/* app-icons.css — iOS-style "home screen" icon primitive.
 *
 * Per maintainer May 14: "I want to see iphone like icons in
 * dashboard rather than dropdown menus" + "hall pass request
 * menu, make it like iphone icon, just big icon and says PASS."
 * A single primitive that every entry-point surface consumes so
 * the visual stays consistent.
 *
 * Anatomy:
 *   .app-icon        — the tile (anchor / button). Caption sits below.
 *     .app-icon-glyph  — rounded-square gradient with the SVG glyph
 *     .app-icon-label  — caption beneath, iOS home-screen style
 *   .app-icon-grid   — layout container (auto-fill grid).
 *
 * Visual spec (iPhone exact):
 *   - squircle = border-radius: 22.37% (the iOS continuous-curve ratio)
 *   - 64 / 72 / 80 px across the phone / laptop / xlarge ladder
 *   - per-tile gradient via `--app-icon-from` / `--app-icon-to`,
 *     default teal -> navy. Helper classes ship a curated palette.
 *   - drop shadow 0 8px 22px (35% of the hue) for the lifted feel
 *   - glyph: white stroke, Heroicons outline at stroke-2, 50% of tile
 *   - label: 12px / 500 / slate-1 (or rgba white on dark)
 *
 * Behaviour:
 *   - hover/focus: scale(1.04) + brighter shadow
 *   - press: scale(0.96) — iOS press response
 *   - respects prefers-reduced-motion
 */

.app-icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 24px 16px;
  padding: 24px 8px;
  list-style: none;
  margin: 0;
}
@media (min-width: 1024px) {
  .app-icon-grid {
    grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
    gap: 28px 20px;
    padding: 28px 12px;
  }
}
@media (min-width: 1920px) {
  .app-icon-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 32px 24px;
  }
}

.app-icon {
  --app-icon-from: var(--brand-teal-bright, #25D6AD);
  --app-icon-to:   var(--brand-teal, #0F9F87);
  --app-icon-glow: color-mix(in srgb, var(--app-icon-from) 35%, transparent);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: var(--brand-font-body, -apple-system, BlinkMacSystemFont, 'SF Pro', system-ui);
  min-width: 64px;
}

.app-icon-glyph {
  width: 64px; height: 64px;
  border-radius: 22.37%;
  background: linear-gradient(135deg, var(--app-icon-from), var(--app-icon-to));
  box-shadow:
    0 8px 22px var(--app-icon-glow),
    0 1px 0 rgba(255,255,255,0.10) inset;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  flex: 0 0 auto;
  transition: transform 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              box-shadow 0.15s ease;
}
@media (min-width: 1024px) { .app-icon-glyph { width: 72px; height: 72px; } }
@media (min-width: 1920px) { .app-icon-glyph { width: 80px; height: 80px; } }
.app-icon-glyph svg {
  width: 50%; height: 50%;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.app-icon-label {
  font: 500 12px/1.25 var(--brand-font-body, system-ui);
  text-align: center;
  color: var(--brand-ink-1, #0F172A);
  max-width: 96px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}
html.dark .app-icon-label { color: rgba(255,255,255,.86); }

.app-icon:hover .app-icon-glyph,
.app-icon:focus-visible .app-icon-glyph {
  transform: scale(1.04);
  box-shadow:
    0 12px 28px var(--app-icon-glow),
    0 1px 0 rgba(255,255,255,0.14) inset;
}
.app-icon:active .app-icon-glyph {
  transform: scale(0.96);
  transition-duration: 0.06s;
}
@media (prefers-reduced-motion: reduce) {
  .app-icon-glyph,
  .app-icon:hover .app-icon-glyph,
  .app-icon:active .app-icon-glyph {
    transform: none;
    transition: none;
  }
}

/* Per-module gradient palette. Tasteful: soft, not neon. Mirrors
   iOS where each app has a distinct hue but the set reads calm. */
.app-icon--teal    { --app-icon-from: var(--brand-teal-bright, #25D6AD); --app-icon-to: var(--brand-teal, #0F9F87); --app-icon-accent: #0F8A6B; }
.app-icon--coral   { --app-icon-from: #FF8E72; --app-icon-to: #E55B45; --app-icon-accent: #E55B45; }
.app-icon--amber   { --app-icon-from: #FFCB57; --app-icon-to: #D99300; --app-icon-accent: #B45309; }
.app-icon--violet  { --app-icon-from: #A78BFA; --app-icon-to: #7C5CD8; --app-icon-accent: #6D28D9; }
.app-icon--sky     { --app-icon-from: #6CC4FF; --app-icon-to: #2A8FE0; --app-icon-accent: #0369A1; }
.app-icon--rose    { --app-icon-from: #FF8AB0; --app-icon-to: #E0457F; --app-icon-accent: #BE185D; }
.app-icon--slate   { --app-icon-from: #94A3B8; --app-icon-to: #475569; --app-icon-accent: #475569; }
.app-icon--navy    { --app-icon-from: #4A6585; --app-icon-to: var(--brand-navy, #0A1628); --app-icon-accent: #1E3A5F; }
.app-icon--emerald { --app-icon-from: #6EE7B7; --app-icon-to: #059669; --app-icon-accent: #047857; }
.app-icon--orange  { --app-icon-from: #FFB066; --app-icon-to: #D97706; --app-icon-accent: #C2410C; }
.app-icon--indigo  { --app-icon-from: #A5B4FC; --app-icon-to: #4F46E5; --app-icon-accent: #4338CA; }
.app-icon--pink    { --app-icon-from: #FBCFE8; --app-icon-to: #DB2777; --app-icon-accent: #BE185D; }
.app-icon--cyan    { --app-icon-from: #67E8F9; --app-icon-to: #0891B2; --app-icon-accent: #0E7490; }

/* ── Outline variant — opt-in via .app-icon-grid--outline on the
   wrapper. Swaps the gradient-filled squircle for a soft tinted
   tile with an accent border + accent icon stroke. Maintainer
   May 15 admin-dashboard polish: "do not fill in color, just
   change border line" + "do not use just green icons" — the
   Departments grid now reads as breath, not paint, with each
   module wearing its own accent. */
.app-icon-grid--outline .app-icon-glyph {
  background: color-mix(in srgb, var(--app-icon-accent, #0F8A6B) 10%, transparent);
  border: 1.5px solid color-mix(in srgb, var(--app-icon-accent, #0F8A6B) 32%, transparent);
  box-shadow: none;
  color: var(--app-icon-accent, #0F8A6B);
}
.app-icon-grid--outline .app-icon:hover .app-icon-glyph,
.app-icon-grid--outline .app-icon:focus-visible .app-icon-glyph {
  background: color-mix(in srgb, var(--app-icon-accent, #0F8A6B) 16%, transparent);
  border-color: color-mix(in srgb, var(--app-icon-accent, #0F8A6B) 52%, transparent);
  box-shadow: 0 6px 18px -10px color-mix(in srgb, var(--app-icon-accent, #0F8A6B) 50%, transparent);
}
html.dark .app-icon-grid--outline .app-icon-glyph {
  background: color-mix(in srgb, var(--app-icon-from, #25D6AD) 12%, transparent);
  border-color: color-mix(in srgb, var(--app-icon-from, #25D6AD) 28%, transparent);
  color: var(--app-icon-from, #25D6AD);
}
html.dark .app-icon-grid--outline .app-icon:hover .app-icon-glyph,
html.dark .app-icon-grid--outline .app-icon:focus-visible .app-icon-glyph {
  background: color-mix(in srgb, var(--app-icon-from, #25D6AD) 18%, transparent);
  border-color: color-mix(in srgb, var(--app-icon-from, #25D6AD) 44%, transparent);
}

/* ── .page-head primitive ─────────────────────────────────────
 * Per maintainer May 14: "the pages we visit, lets have an icon
 * and page title larger, for example student hall pass screen
 * HALL PASS title so tiny, add a nice icon and make text bigger."
 *
 * Reusable header for any page that wants a big iOS-app-icon-
 * style identity at the top. Pairs an icon squircle (reusing the
 * .app-icon-glyph primitive above) with a large tracked-out
 * page title.
 *
 * Anatomy:
 *   <header class="page-head">
 *     <span class="page-head-icon app-icon-glyph app-icon--teal">
 *       <svg>…</svg>
 *     </span>
 *     <h1 class="page-head-title">HALL PASS</h1>
 *     <p class="page-head-sub">Optional subtitle.</p>
 *   </header>
 */
.page-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  padding: 24px 8px 18px;
}
@media (min-width: 1024px) {
  .page-head { padding: 32px 8px 22px; gap: 16px; }
}

/* Icon — reuse .app-icon-glyph sizes (64/72/80 px) but bump one
 * notch (72/80/88 px) so the head icon reads bigger than an
 * in-grid icon. Override via inline style or a modifier class. */
.page-head-icon {
  width: 72px; height: 72px;
}
@media (min-width: 1024px) { .page-head-icon { width: 80px; height: 80px; } }
@media (min-width: 1920px) { .page-head-icon { width: 88px; height: 88px; } }

.page-head-title {
  font-family: var(--brand-font-display, 'Instrument Serif', Georgia, serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(36px, 4.5vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--brand-ink-1, #0F172A);
  margin: 0;
  text-transform: uppercase;
  font-feature-settings: "ss01" on, "ss02" on;
}
html.dark .page-head-title { color: rgba(255,255,255,.92); }

.page-head-sub {
  font: 400 15px/1.45 var(--brand-font-body, system-ui);
  color: var(--brand-ink-3, #64748B);
  margin: 0;
  max-width: 56ch;
}