/* ============================================================
   portal-v33.css — Portal-wide visual elevation pass.
   Loaded LAST (after portal-fix.css) so it can safely refine
   spacing, typography, motion and mobile ergonomics across the
   student / parent / teacher / admin dashboards without
   touching PHP business logic. Keeps navy/gold brand language
   and respects prefers-reduced-motion + dark theme variables.
   ============================================================ */

:root{
  --v33-navy:#0b2a5b; --v33-navy-2:#123a7d; --v33-gold:#f0b429; --v33-gold-2:#d99e17;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px;
  --v33-shadow-card:0 2px 10px -4px rgba(11,42,91,.08), 0 14px 34px -22px rgba(11,42,91,.18);
  --v33-shadow-card-hover:0 8px 22px -6px rgba(11,42,91,.16), 0 26px 54px -26px rgba(11,42,91,.30);
  --v33-radius:16px;
}

/* ---------------------------------------------------------------
   0. Motion — entry animation + hover lift, fully reduced-motion
      safe. Applied to common card/tile selectors used everywhere.
   --------------------------------------------------------------- */
@media (prefers-reduced-motion:no-preference){
  body:not(.no-anim) .card,
  body:not(.no-anim) .st-card, body:not(.no-anim) .pt-card, body:not(.no-anim) .adm-panel,
  body:not(.no-anim) .qa-tile, body:not(.no-anim) .st-tile, body:not(.no-anim) .modcard,
  body:not(.no-anim) .teacher-tile, body:not(.no-anim) .dept-card, body:not(.no-anim) .adm-actions a{
    animation:v33-rise .45s cubic-bezier(.22,.85,.32,1) both;
  }
  body:not(.no-anim) .kpi .card:nth-child(1),body:not(.no-anim) .st-kpi .k:nth-child(1),body:not(.no-anim) .pt-kpi .k:nth-child(1),body:not(.no-anim) .adm-kpi .card:nth-child(1){animation-delay:.02s}
  body:not(.no-anim) .kpi .card:nth-child(2),body:not(.no-anim) .st-kpi .k:nth-child(2),body:not(.no-anim) .pt-kpi .k:nth-child(2),body:not(.no-anim) .adm-kpi .card:nth-child(2){animation-delay:.06s}
  body:not(.no-anim) .kpi .card:nth-child(3),body:not(.no-anim) .st-kpi .k:nth-child(3),body:not(.no-anim) .pt-kpi .k:nth-child(3),body:not(.no-anim) .adm-kpi .card:nth-child(3){animation-delay:.10s}
  body:not(.no-anim) .kpi .card:nth-child(4),body:not(.no-anim) .st-kpi .k:nth-child(4),body:not(.no-anim) .pt-kpi .k:nth-child(4),body:not(.no-anim) .adm-kpi .card:nth-child(4){animation-delay:.14s}
  body:not(.no-anim) .kpi .card:nth-child(5){animation-delay:.18s}
}
@keyframes v33-rise{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:none } }
@media (prefers-reduced-motion:reduce){
  .card,.st-card,.pt-card,.adm-panel,.qa-tile,.st-tile,.modcard,.teacher-tile,.dept-card,.adm-actions a{ animation:none !important; transition:none !important }
}

/* Hover lift for interactive cards/tiles across all roles. */
.qa-tile, .st-tile, .modcard, .teacher-tile, .dept-card, .adm-actions a, a.adm-kpi-card .card{
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.qa-tile:hover, .st-tile:hover, .modcard:hover, .teacher-tile:hover:not(.teacher-tile--locked), .dept-card:hover, .adm-actions a:hover{
  transform:translateY(-3px);
  box-shadow:var(--v33-shadow-card-hover);
}

/* ---------------------------------------------------------------
   1. Card language — soft shadow + clear header hierarchy.
   --------------------------------------------------------------- */
.card, .st-card, .pt-card, .adm-panel{
  box-shadow:var(--v33-shadow-card);
  border-radius:var(--v33-radius);
}
.card > h2:first-child, .card > h2.card-h,
.st-card h2, .pt-card h2, .adm-panel h2{
  letter-spacing:-.01em;
}
.card h2, .st-card h2, .pt-card h2{
  padding-bottom:var(--sp-3);
  margin-bottom:var(--sp-3);
  border-bottom:1px solid var(--border-2, rgba(11,42,91,.08));
}

/* ---------------------------------------------------------------
   2. Sticky section navigation (tabs / breadcrumbs) — desktop
      and mobile, sits just under the fixed topbar.
   --------------------------------------------------------------- */
.pt-tabs, .portal-tabs, .st-section-title{
  position:sticky; top:var(--topbar-h,62px); z-index:20;
  background:var(--surface,#fff); background-clip:padding-box;
}
body.theme-dark .pt-tabs, body.theme-dark .portal-tabs{ background:var(--surface,#0f1730) }
.ep-breadcrumbs{
  position:sticky; top:var(--topbar-h,62px); z-index:19;
  background:var(--surface,#fff);
}

/* ---------------------------------------------------------------
   3. Empty states — icon + message + action, used via .empty-state
   --------------------------------------------------------------- */
.empty-state{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:var(--sp-2); padding:var(--sp-6) var(--sp-4);
  border:1.5px dashed var(--border-2, rgba(11,42,91,.16));
  border-radius:14px; background:var(--surface-2, rgba(11,42,91,.02));
  color:var(--muted,#6b7280);
}
.empty-state .es-icon{
  width:52px; height:52px; border-radius:50%; display:grid; place-items:center;
  font-size:24px; background:linear-gradient(135deg, rgba(11,42,91,.10), rgba(240,180,41,.18));
}
.empty-state b, .empty-state strong{ color:var(--text,#0f172a); font-size:15px }
.empty-state p{ margin:2px 0 0; max-width:420px; font-size:13.5px; line-height:1.55 }
.empty-state a.btn, .empty-state a.es-action{
  margin-top:var(--sp-2); display:inline-flex; align-items:center; gap:6px;
  padding:8px 16px; border-radius:9px; font-weight:700; font-size:13px; text-decoration:none;
  background:var(--primary,#15307a); color:#fff;
}
.empty-state a.es-action:hover{ opacity:.92 }
body.theme-dark .empty-state{ background:rgba(255,255,255,.03); border-color:rgba(255,255,255,.12) }

/* ---------------------------------------------------------------
   4. Quick-access + stat-tile responsive grids
      2 cols on phones, 4 on desktop, scroll-snap stat rows.
   --------------------------------------------------------------- */
@media (min-width:1024px){
  .qa-grid, .st-tiles, .teacher-tile-grid, .modgrid{ grid-template-columns:repeat(4,1fr) !important; }
}
@media (max-width:640px){
  .qa-grid, .st-tiles{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:10px; }
  .teacher-tile-grid, .modgrid{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:10px; }
  .qa-tile, .st-tile, .modcard, .teacher-tile{ min-height:0; padding:12px; }
}

/* Stat tiles: horizontal scroll-snap row on phones. */
@media (max-width:640px){
  .kpi, .st-kpi, .pt-kpi, .adm-kpi{
    display:flex !important; overflow-x:auto; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch; gap:10px; padding-bottom:6px;
    scrollbar-width:none; margin-left:calc(var(--sp-1) * -1); margin-right:calc(var(--sp-1) * -1);
  }
  .kpi::-webkit-scrollbar, .st-kpi::-webkit-scrollbar, .pt-kpi::-webkit-scrollbar, .adm-kpi::-webkit-scrollbar{ display:none }
  .kpi > *, .st-kpi > *, .pt-kpi > *, .adm-kpi > *{
    flex:0 0 min(72vw,240px); scroll-snap-align:start;
  }
}

/* ---------------------------------------------------------------
   5. Mobile-first header / utility bar — grid-cols pattern so
      the row never overflows at 360px and no horizontal scroll
      leaks from the page.
   --------------------------------------------------------------- */
html, body{ overflow-x:hidden; max-width:100%; }
.container, .app, .main{ max-width:100%; }
.main > .topbar{
  display:grid !important;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
}
.topbar .tb-search{ min-width:0; overflow:hidden }
.topbar .tb-actions{ min-width:0; justify-self:end }
@media (max-width:360px){
  .main > .topbar{ padding:8px !important; gap:4px !important; }
  .topbar .tb-actions{ gap:4px !important }
  .topbar .tb-actions .btn.sm, .topbar .tb-icon-btn{ padding:6px 8px !important; font-size:14px !important }
}
.uni-utility .wrap{
  display:grid !important; grid-auto-flow:column; grid-auto-columns:max-content;
  justify-content:start;
}

/* ---------------------------------------------------------------
   6. Sidebar drawer — reinforce clean layering (content < scrim
      < drawer) so the drawer never traps the page.
   --------------------------------------------------------------- */
.sidebar{ z-index:1000 }
.scrim{ z-index:900 }
.container, main.container{ position:relative; z-index:1 }
body.drawer-open .sidebar, body.drawer-open .sidebar *{ pointer-events:auto !important }

/* ---------------------------------------------------------------
   7. Bottom tab bar (mobile only) — compact, brand-consistent,
      used for student navigation: Home / Exams / Results / Fees / More.
   --------------------------------------------------------------- */
@media (min-width:1081px){
  .bottombar{ display:none !important }
}
@media (max-width:1080px){
  .bottombar{
    display:flex !important; position:fixed; left:0; right:0; bottom:0; z-index:950;
    background:var(--surface,#fff); border-top:1px solid var(--border,#e4e9f3);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom));
    box-shadow:0 -8px 24px -14px rgba(11,42,91,.25);
  }
  .bottombar a{
    flex:1 1 0; display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:2px; min-width:0; padding:4px 2px; border-radius:10px; text-decoration:none;
    color:var(--muted,#6b7280); transition:color .15s ease, background .15s ease;
  }
  .bottombar a span{ font-size:19px; line-height:1 }
  .bottombar a small{ font-size:10px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100% }
  .bottombar a.active{ color:var(--v33-navy); background:rgba(11,42,91,.08) }
  body.theme-dark .bottombar a.active{ color:var(--v33-gold); background:rgba(240,180,41,.12) }
  body:not(.no-sidebar) .container{ padding-bottom:calc(78px + env(safe-area-inset-bottom)) !important }
}

/* ---------------------------------------------------------------
   8. Typography hierarchy polish
   --------------------------------------------------------------- */
h1{ letter-spacing:-.02em }
h2{ letter-spacing:-.01em }
.tag{ letter-spacing:.04em }

/* ---------------------------------------------------------------
   9. No-overflow safety net for tables/pre blocks on small screens
   --------------------------------------------------------------- */
@media (max-width:480px){
  table{ font-size:12.5px }
  pre{ overflow-x:auto; max-width:100% }
}

/* ---------------------------------------------------------------
   10. Dark-theme continuity for the new elements above.
   --------------------------------------------------------------- */
body.theme-dark .empty-state .es-icon{ background:linear-gradient(135deg, rgba(240,180,41,.14), rgba(255,255,255,.06)) }
body.theme-dark .card h2, body.theme-dark .st-card h2, body.theme-dark .pt-card h2{ border-color:rgba(255,255,255,.10) }