/* Rankly Platform - Optimised CSS */
:root{
  --blue:#2563eb;--blue-d:#1d4ed8;--blue-bg:#eff6ff;--blue-bd:#bfdbfe;
  --green:#16a34a;--green-bg:#f0fdf4;--green-bd:#bbf7d0;
  --red:#dc2626;--red-bg:#fef2f2;--red-bd:#fecaca;
  --yellow:#d97706;--yel-bg:#fffbeb;--yel-bd:#fde68a;
  --purple:#7c3aed;--pur-bg:#faf5ff;--pur-bd:#ddd6fe;
  --bg:#f0f3f9;--surface:#fff;--surface2:#f7f9fc;
  --border:#e3e8f0;--text:#0f172a;--text2:#475569;--text3:#94a3b8;
  --sidebar-w:240px;--header-h:60px;
  --radius:12px;--radius-sm:8px;
  --shadow:0 1px 4px rgba(0,0,0,.06);
  --shadow-md:0 4px 16px rgba(0,0,0,.08);
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{font-size:16px;scroll-behavior:smooth;}
body{font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);line-height:1.5;}
img{max-width:100%;height:auto;}
a{color:var(--blue);text-decoration:none;}
button{cursor:pointer;font-family:inherit;}

/* ── LAYOUT ── */
/* height:100vh (not min-height) is required here - min-height let the
   whole layout grow taller than the viewport when page content was
   long, at which point body/html (unconstrained) became the actual
   scrolling element instead of .main-area, dragging .topbar and the
   sidebar header away with it despite their own position:sticky rules.
   Pinning this to the exact viewport height forces .main-area's own
   overflow-y:auto to be the only thing that scrolls, which is what
   keeps .topbar fixed in place the way it already visually appears to
   work in short-content pages. */
.admin-layout{display:flex;height:100vh;height:100dvh;overflow:hidden;}
.page-content{flex:1;margin-left:var(--sidebar-w);min-width:0;display:flex;flex-direction:column;}
.main-area{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:clamp(16px,2vw,28px);}
.main-area::-webkit-scrollbar{width:5px;}
.main-area::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px;}

/* ── SIDEBAR ── */
.sidebar{
  position:fixed;top:0;left:0;bottom:0;width:var(--sidebar-w);
  background:#0f172a;display:flex;flex-direction:column;z-index:100;
  box-shadow:4px 0 24px rgba(0,0,0,.12);transition:transform .3s ease;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
}
.sidebar-brand{
  height:var(--header-h);display:flex;align-items:center;padding:0 18px;
  border-bottom:1px solid rgba(255,255,255,.07);gap:10px;flex-shrink:0;
}
.brand-icon{width:32px;height:32px;border-radius:8px;background:var(--blue);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.brand-icon svg{width:18px;height:18px;}
.brand-name{font-size:19px;font-weight:800;color:#fff;letter-spacing:-.3px;}
.brand-name span{color:#60a5fa;}
.brand-badge{margin-left:auto;font-size:9px;font-weight:700;background:rgba(37,99,235,.3);color:#93c5fd;padding:2px 7px;border-radius:20px;letter-spacing:.5px;text-transform:uppercase;}
/* Sticky header: the sidebar's own content scrolls (overflow-y:auto on
   .sidebar), so pinning this wrapper requires position:sticky on the
   wrapper itself, inside that same scroll container - top:0 keeps it
   pinned to the top of the visible sidebar area while the nav list
   scrolls underneath it. Scoped only to the student sidebar's new
   wrapper - every other role's sidebar header is untouched. */
.sidebar-header-fixed{position:sticky;top:0;z-index:5;background:#0f172a;flex-shrink:0;}
.sidebar-brand-compact{height:44px;padding:0 14px;border-bottom:none;}
.sidebar-brand-compact .brand-icon{width:24px;height:24px;border-radius:6px;}
.sidebar-brand-compact .brand-icon svg{width:14px;height:14px;}
.sidebar-brand-compact .brand-name{font-size:15px;}
.sidebar-profile-card{display:flex;flex-direction:row;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.07);}
.sidebar-profile-av{width:52px;height:52px;border-radius:12px;background:linear-gradient(135deg,var(--accent),var(--purple));background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center;font-family:'Rajdhani',sans-serif;font-size:18px;font-weight:700;color:#fff;border:2px solid rgba(255,255,255,.15);flex-shrink:0;}
.sidebar-profile-info{min-width:0;flex:1;height:52px;display:flex;flex-direction:column;justify-content:center;gap:1px;overflow:hidden;}
.sidebar-profile-name{font-size:13px;font-weight:800;color:#fff;letter-spacing:.1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.2;}
.sidebar-profile-email{font-size:10px;color:rgba(255,255,255,.55);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.2;}
.sidebar-profile-phone{font-size:10px;color:rgba(255,255,255,.55);display:flex;align-items:center;gap:4px;line-height:1.2;}
.sidebar-profile-link{font-size:10.5px;font-weight:700;color:#60a5fa;text-decoration:none;line-height:1.2;}
.sidebar-profile-link:hover{text-decoration:underline;}
.nav-section{font-size:9px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:rgba(255,255,255,.3);padding:10px 18px 4px;}
.nav-item{
  display:flex;align-items:center;gap:10px;
  padding:7px 18px;margin:0 8px;border-radius:8px;
  cursor:pointer;transition:all .18s;color:rgba(255,255,255,.55);
  font-size:13px;font-weight:500;text-decoration:none;position:relative;
}
.nav-item:hover{background:rgba(255,255,255,.07);color:rgba(255,255,255,.9);}
.nav-item.active{background:var(--blue);color:#fff;box-shadow:0 4px 14px rgba(37,99,235,.4);}
.nav-item svg{width:16px;height:16px;flex-shrink:0;}
.nav-badge{margin-left:auto;font-size:10px;font-weight:700;background:var(--red);color:#fff;padding:1px 6px;border-radius:10px;min-width:18px;text-align:center;}
.nav-item.active .nav-badge{background:rgba(255,255,255,.25);}
.sidebar-footer{margin-top:auto;padding:8px 8px calc(8px + env(safe-area-inset-bottom,0px));border-top:1px solid rgba(255,255,255,.07);flex-shrink:0;}
.nav-group-toggle.open .nav-chevron{transform:rotate(180deg);}
.nav-subgroup{padding:2px 8px 4px;}
.nav-subitem{
  display:flex;align-items:center;gap:8px;
  padding:6px 18px 6px 34px;margin:0;border-radius:8px;
  cursor:pointer;transition:all .18s;color:rgba(255,255,255,.5);
  font-size:12.5px;font-weight:500;text-decoration:none;position:relative;
}
.nav-subitem::before{content:'';position:absolute;left:20px;top:50%;width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.6;transform:translateY(-50%);}
.nav-subitem:hover{background:rgba(255,255,255,.07);color:rgba(255,255,255,.85);}
.nav-subitem.active{background:rgba(37,99,235,.18);color:#fff;font-weight:600;}
.nav-subitem.active::before{background:var(--blue);opacity:1;}
.admin-card{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:9px;cursor:pointer;transition:all .2s;}
.admin-card:hover{background:rgba(255,255,255,.07);}
.admin-av{width:34px;height:34px;border-radius:8px;background:linear-gradient(135deg,var(--blue),var(--purple));display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#fff;flex-shrink:0;}
.admin-name{font-size:13px;font-weight:600;color:#fff;}
.admin-role{font-size:10px;color:rgba(255,255,255,.4);}
.logout-btn{margin-left:auto;background:transparent;border:none;color:rgba(255,255,255,.3);padding:4px;display:flex;align-items:center;}
.logout-btn:hover{color:var(--red);}
.logout-btn svg{width:16px;height:16px;}

/* ── TOPBAR ── */
.topbar{
  position:sticky;top:0;z-index:90;
  height:var(--header-h);background:var(--surface);
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 clamp(14px,2vw,24px);box-shadow:var(--shadow);flex-shrink:0;
}
.topbar-left{display:flex;align-items:center;gap:12px;}
.sidebar-toggle{background:transparent;border:none;color:var(--text2);padding:6px;border-radius:7px;display:flex;align-items:center;}
.sidebar-toggle:hover{background:var(--surface2);}
.sidebar-toggle svg{width:20px;height:20px;}
.page-title{font-size:16px;font-weight:700;}
.page-sub{font-size:12px;color:var(--text3);}
.topbar-right{display:flex;align-items:center;gap:10px;}
.tb-date{font-size:12px;color:var(--text3);background:var(--surface2);border:1px solid var(--border);padding:6px 12px;border-radius:7px;font-family:monospace;}
.notif-btn{position:relative;width:36px;height:36px;border-radius:9px;border:1px solid var(--border);background:var(--surface2);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text2);}
.notif-btn:hover{border-color:var(--blue);color:var(--blue);}
.notif-btn svg{width:17px;height:17px;}
.notif-dot{position:absolute;top:7px;right:7px;width:7px;height:7px;border-radius:50%;background:var(--red);border:2px solid var(--surface);}

/* ── CARDS ── */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;}
.card-header{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:12px;}
.card-title{font-size:14px;font-weight:700;}
.card-sub{font-size:11px;color:var(--text3);margin-top:2px;}

/* ── STAT CARDS ── */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;margin-bottom:24px;}
.stat-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);transition:all .2s;position:relative;overflow:hidden;cursor:default;}
.stat-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;}
.stat-card.blue::before{background:var(--blue);}
.stat-card.green::before{background:var(--green);}
.stat-card.purple::before{background:var(--purple);}
.stat-card.orange::before{background:#ea580c;}
.stat-card.red::before{background:var(--red);}
.stat-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);}
.stat-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:12px;}
.stat-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.stat-icon svg{width:20px;height:20px;}
.icon-blue{background:var(--blue-bg);color:var(--blue);}
.icon-green{background:var(--green-bg);color:var(--green);}
.icon-purple{background:var(--pur-bg);color:var(--purple);}
.icon-orange{background:#fff7ed;color:#ea580c;}
.icon-red{background:var(--red-bg);color:var(--red);}
.stat-trend{font-size:11px;font-weight:600;padding:3px 8px;border-radius:20px;}
.trend-up{background:var(--green-bg);color:var(--green);}
.trend-down{background:var(--red-bg);color:var(--red);}
.stat-val{font-size:30px;font-weight:800;color:var(--text);letter-spacing:-.5px;line-height:1;}
.stat-label{font-size:13px;color:var(--text2);font-weight:500;margin-top:4px;}
.stat-sub{font-size:11px;color:var(--text3);margin-top:2px;}

/* ── TABLES ── */
.table-wrap{overflow-x:auto;}
table{width:100%;border-collapse:collapse;}
thead th{text-align:left;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.6px;color:var(--text3);padding:10px 20px;background:var(--surface2);border-bottom:1px solid var(--border);}
tbody tr{border-bottom:1px solid var(--border);transition:background .15s;}
tbody tr:last-child{border-bottom:none;}
tbody tr:hover{background:var(--surface2);}
tbody td{padding:12px 20px;font-size:13px;vertical-align:middle;}

/* ── BADGES ── */
.badge{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;padding:3px 9px;border-radius:20px;}
.badge-green{background:var(--green-bg);color:var(--green);border:1px solid var(--green-bd);}
.badge-red{background:var(--red-bg);color:var(--red);border:1px solid var(--red-bd);}
.badge-yellow{background:var(--yel-bg);color:var(--yellow);border:1px solid var(--yel-bd);}
.badge-blue{background:var(--blue-bg);color:var(--blue);border:1px solid var(--blue-bd);}
.badge-purple{background:var(--pur-bg);color:var(--purple);border:1px solid var(--pur-bd);}
.badge-grey{background:var(--surface2);color:var(--text3);border:1px solid var(--border);}
.badge-chip{font-size:11px;font-weight:600;padding:2px 8px;border-radius:20px;display:inline-block;margin:2px;}

/* ── FORMS ── */
.form-group{margin-bottom:16px;}
.form-label{display:block;font-size:12px;font-weight:600;color:var(--text2);margin-bottom:6px;}
.form-input,.form-select,.form-textarea{
  width:100%;padding:10px 14px;border:1.5px solid var(--border);
  border-radius:var(--radius-sm);font-family:inherit;font-size:13px;
  color:var(--text);background:var(--surface2);outline:none;transition:border .2s;
}
.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--blue);background:#fff;}
.form-textarea{resize:vertical;min-height:80px;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;gap:6px;padding:9px 18px;border-radius:var(--radius-sm);font-family:inherit;font-size:13px;font-weight:600;border:none;cursor:pointer;transition:all .2s;white-space:nowrap;}
.btn-primary{background:var(--blue);color:#fff;box-shadow:0 2px 8px rgba(37,99,235,.25);}
.btn-primary:hover{background:var(--blue-d);}
.btn-success{background:var(--green);color:#fff;}
.btn-success:hover{background:#15803d;}
.btn-danger{background:var(--red);color:#fff;}
.btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none;}
.btn-outline{background:var(--surface2);border:1px solid var(--border);color:var(--text2);}
.btn-outline:hover{border-color:var(--blue);color:var(--blue);}
.btn-ghost{background:transparent;color:var(--text3);}
.btn-ghost:hover{color:var(--blue);}
.btn svg{width:14px;height:14px;}

/* ── FILTER BAR ── */
.filter-bar{display:flex;align-items:center;gap:10px;padding:12px 20px;border-bottom:1px solid var(--border);background:var(--surface2);flex-wrap:wrap;}
.search-input-wrap{flex:1;min-width:180px;display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;}
.search-input-wrap svg{width:15px;height:15px;color:var(--text3);flex-shrink:0;}
.search-input-wrap input{border:none;outline:none;background:transparent;font-size:13px;font-family:inherit;color:var(--text);padding:8px 0;width:100%;}
.search-input-wrap input::placeholder{color:var(--text3);}

/* ── MODALS ── */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(15,23,42,.5);z-index:500;align-items:center;justify-content:center;backdrop-filter:blur(4px);}
.modal-overlay.show{display:flex;}
.modal-box{background:var(--surface);border-radius:16px;width:min(520px,93vw);max-height:90vh;overflow-y:auto;-webkit-overflow-scrolling:touch;box-shadow:0 20px 60px rgba(0,0,0,.15);animation:modalPop .25s ease;}
@keyframes modalPop{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}
.modal-head{padding:20px 24px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;}
.modal-head h3{font-size:16px;font-weight:700;}
.modal-close{width:28px;height:28px;border-radius:7px;background:var(--surface2);border:1px solid var(--border);cursor:pointer;font-size:16px;color:var(--text2);display:flex;align-items:center;justify-content:center;}
.modal-body{padding:24px;}
.modal-foot{padding:0 24px 22px;display:flex;gap:10px;justify-content:flex-end;}

/* ── TOASTS ── */
.toast-wrap{position:fixed;bottom:24px;right:24px;z-index:9999;display:flex;flex-direction:column;gap:8px;}
.toast{display:flex;align-items:center;gap:10px;background:var(--text);color:#fff;padding:12px 18px;border-radius:10px;font-size:13px;font-weight:500;box-shadow:0 8px 24px rgba(0,0,0,.2);animation:toastIn .3s ease;max-width:340px;}
.toast.success{background:#16a34a;}
.toast.error{background:var(--red);}
.toast.warning{background:var(--yellow);}
@keyframes toastIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}

/* ── RESPONSIVE ── */
@media(max-width:768px){
  .sidebar{transform:translateX(-100%);}
  .sidebar.open{transform:translateX(0);}
  .page-content{margin-left:0;}
  .sidebar-overlay{display:block !important;}
  .form-row{grid-template-columns:1fr;}
  .stats-grid{grid-template-columns:1fr 1fr;}
  /* The mobile sidebar-close overlay used across pages is `inset:0` with
     z-index just below the sidebar's. That should stack correctly, but on
     some Android WebViews a position:fixed element with inset:0 sitting
     directly behind another position:fixed element at a close z-index can
     still intercept touch/scroll gestures meant for the element on top -
     a real, separately-reported cause of the sidebar's scroll feeling
     unresponsive on real devices despite working correctly in testing.
     Excluding the sidebar's own width from the overlay's clickable area
     removes the overlap entirely instead of relying on stacking order. */
  #sidebarOverlay{left:var(--sidebar-w) !important;}
  /* The actual fix for "tap outside closes the sidebar": every view
     across the app sets the overlay's initial state with an inline
     style="display:none", and toggleSidebar() in rankly.js only ever
     toggled a `show` class - but no rule anywhere matched the real
     #sidebarOverlay id with that class, only the unrelated .sidebar-
     overlay CLASS above (which the element never has). So the overlay
     never actually appeared, meaning there was nothing to tap to close
     the sidebar - it wasn't a stacking/z-index problem, the backdrop was
     simply never shown. This rule's specificity (id + class) is enough
     to override the element's own inline display:none. */
  #sidebarOverlay.show{display:block !important;}
}

/* ── Smart School additions ── */
.modal-title{font-size:16px;font-weight:700;}
.data-table{width:100%;border-collapse:collapse;font-size:13px;}
.data-table th{background:var(--surface2);text-align:left;padding:10px 14px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text2);border-bottom:1px solid var(--border);white-space:nowrap;}
.data-table td{padding:10px 14px;border-bottom:1px solid var(--border);vertical-align:middle;}
.data-table tr:last-child td{border-bottom:none;}
.data-table tr:hover td{background:var(--surface2);}
.ss-badge{display:inline-block;font-size:11px;font-weight:700;padding:2px 9px;border-radius:20px;}
.ss-badge-blue{background:var(--blue-bg);color:var(--blue);border:1px solid var(--blue-bd);}
.ss-badge-green{background:var(--green-bg);color:var(--green);border:1px solid var(--green-bd);}
.ss-badge-red{background:var(--red-bg);color:var(--red);border:1px solid var(--red-bd);}
.ss-badge-yellow{background:var(--yel-bg);color:var(--yellow);border:1px solid var(--yel-bd);}
.ss-badge-purple{background:var(--pur-bg);color:var(--purple);border:1px solid var(--pur-bd);}
.ss-badge-gray{background:var(--surface2);color:var(--text2);border:1px solid var(--border);}
.ss-toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,20px);opacity:0;transition:all .3s ease;background:#0f172a;color:#fff;padding:11px 20px;border-radius:10px;font-size:13px;font-weight:600;z-index:9999;box-shadow:var(--shadow-md);max-width:90vw;}
.ss-toast.show{transform:translate(-50%,0);opacity:1;}
.ss-toast-error{background:var(--red);}
.ss-toast-ok{background:#0f172a;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media(max-width:560px){.form-row{grid-template-columns:1fr;}}
.form-group{margin-bottom:14px;}
.form-group label{display:block;font-size:12px;font-weight:700;color:var(--text2);margin-bottom:5px;}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:9px 12px;border:1px solid var(--border);border-radius:8px;font-size:13.5px;font-family:inherit;background:var(--surface);color:var(--text);}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-bg);}
.filter-bar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:16px;}
.filter-bar select,.filter-bar input{padding:8px 12px;border:1px solid var(--border);border-radius:8px;font-size:13px;font-family:inherit;background:var(--surface);}
.icon-btn{width:30px;height:30px;border-radius:7px;border:1px solid var(--border);background:var(--surface);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;color:var(--text2);margin-right:4px;}
.icon-btn:hover{border-color:var(--blue);color:var(--blue);}
.icon-btn.danger:hover{border-color:var(--red);color:var(--red);}
.icon-btn svg{width:14px;height:14px;}
.stat-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow);}
.stat-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--text3);}
.stat-value{font-size:24px;font-weight:800;margin-top:4px;}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;margin-bottom:20px;}
.dgrid2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:20px;}
@media(max-width:900px){.dgrid2{grid-template-columns:1fr;}}
.att-pill{display:inline-flex;border:1px solid var(--border);border-radius:20px;overflow:hidden;}
.att-pill button{border:none;background:var(--surface);padding:5px 12px;font-size:12px;font-weight:700;color:var(--text3);}
.att-pill button.sel-present{background:var(--green);color:#fff;}
.att-pill button.sel-absent{background:var(--red);color:#fff;}
.att-pill button.sel-late{background:var(--yellow);color:#fff;}
.att-pill button.sel-leave{background:var(--purple);color:#fff;}