/* =========================================================
   01. GLOBAL COLOR VARIABLES / DESIGN TOKENS
   Change colors, spacing, radius, and shadows here.
   ========================================================= */
   :root{
    /* Palette from design reference (minimal deep teal + slate) */
    --primary:#0d6a72;
    --primary-dark:#084a50;
    --primary-light:#e7f2f3;
    --secondary:#4a7c82;
    --accent:#0d6a72;
    --button:#0d6a72;
    --button-hover:#084a50;
    --background:#f3f5f6;
    --surface:#ffffff;
    --border:#d4dee0;
    --text-primary:#1b2c30;
    --text-secondary:#5c6c71;
    --hover:#084a50;
    --active:#084a50;
    --primary-color:var(--primary);
    --secondary-color:var(--secondary);
    --accent-color:var(--accent);
    --background-color:var(--background);
    --surface-color:var(--surface);
    --border-color:var(--border);
    --hover-color:var(--hover);
    --active-color:var(--active);
    --success:#2a7a54;
    --warning:#a65f12;
    --danger:#b03c36;
    --info:#2c6a86;
    --status-completed:#1f7a4d;
    --status-completed-bg:#e7f5ee;
    --status-pending:#a67c00;
    --status-pending-bg:#fff8e5;
    --status-overdue:#c0453d;
    --status-overdue-bg:#fceeee;
    --status-discrepancy:#c9651a;
    --status-discrepancy-bg:#fff2e6;
    --status-disapproved:#c0453d;
    --status-disapproved-bg:#fceeee;
    --status-responded:#3f7378;
    --status-responded-bg:#e7f2f3;
    --primary-rgb:13,106,114;
    --primary-dark-rgb:8,74,80;

    --brand-teal:var(--primary);
    --brand-teal-dark:var(--primary-dark);
    --brand-teal-deep:var(--primary-dark);
    --brand-teal-soft:rgba(var(--primary-rgb),.16);
    --brand-mint:var(--primary-light);
    --bg:var(--background);
    --sidebar:var(--primary-dark);
    --sidebar-deep:var(--primary-dark);
    --sidebar-deeper:#042f33;
    --sidebar-deepest:#031f22;
    --sidebar-ink:#f3f7f7;
    --card:var(--surface);
    --text:var(--text-primary);
    --muted:var(--text-secondary);
    --blue:var(--primary);
    --blue-600:var(--primary-dark);
    --red:var(--danger);
    --green:var(--success);
    --purple:var(--info);
    --amber:var(--warning);
    --radius-sm:8px;
    --radius-md:10px;
    --radius-lg:12px;
    --radius-xl:12px;
    --radius-modal:16px;
    --shadow-card:0 1px 2px rgba(27,44,48,.06);
    --shadow-card-hover:0 4px 12px rgba(27,44,48,.08);
    --space-section:16px;
    --page-padding-x:24px;
    --page-padding-y:20px;
    --font-sans:"Poppins",system-ui,-apple-system,"Segoe UI",sans-serif;
  }
  
  /* =========================================================
     02. GLOBAL / BASE STYLES
     ========================================================= */
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0;
    font-family:var(--font-sans);
    background:var(--bg);
    color:var(--text);
  }
  body.app{
    font-family:var(--font-sans);
  }
  
  /* =========================================================
     03. APP LAYOUT / SHELL
     Main page wrapper containing sidebar + content.
     ========================================================= */
  .shell{display:flex;min-height:100vh;gap:0;background:var(--bg)}
  
  /* ===== SIDEBAR NAVIGATION ===== */
  /* =========================================================
     04. SIDEBAR / NAVIGATION
     Change sidebar width, color, logo area, and menu links here.
     ========================================================= */
  .sidebar{
    width:248px;
    flex-shrink:0;
    position:relative;
    background-color:var(--sidebar);
    background-image:none;
    color:var(--sidebar-ink);
    padding:16px 12px 14px;
    display:flex;
    flex-direction:column;
    gap:12px;
    overflow:hidden;
  }
  .sidebar-art{
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
    overflow:hidden;
  }
  .sidebar-art__bottom{
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    height:auto;
    display:block;
    max-width:none;
    object-fit:contain;
    object-position:left bottom;
    pointer-events:none;
    user-select:none;
    -webkit-user-drag:none;
  }
  .sidebar-brand,
  .nav,
  .sidebar-footer{
    position:relative;
    z-index:1;
  }
  .sidebar-brand{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:10px 8px 16px;
    border-bottom:1px solid rgba(255,255,255,.18);
    text-align:center;
  }
  .logo{
    width:56px;height:56px;border-radius:12px;background:transparent;border:none;
    overflow:visible;display:grid;place-items:center;flex-shrink:0;
  }
  .logo.logo--brand{
    width:84px;
    height:84px;
    background:transparent;
    border:none;
    padding:0;
    box-shadow:none;
    overflow:visible;
  }
  .logo-img{width:100%;height:100%;object-fit:contain;display:block;border-radius:0;background:transparent}
  .logo.lg{width:72px;height:72px}
  .brand-text{font-weight:700;letter-spacing:.02em;font-size:1.15rem;color:#fff;line-height:1.2}

  .nav{display:flex;flex-direction:column;gap:8px;flex:1}
  .nav-link{
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px 14px;
    min-height:44px;
    border-radius:10px;
    color:rgba(255,255,255,.9);
    text-decoration:none;
    font-weight:500;
    font-size:14.5px;
    background:transparent;
    border:none;
  }
  .nav-ico{width:22px;height:22px;display:grid;place-items:center;flex-shrink:0;opacity:.92}
  .nav-ico svg{width:22px;height:22px;display:block}
  .nav-label{min-width:0;line-height:1.3}
  .nav-link:hover{background:rgba(0,0,0,.12);color:#fff}
  .nav-link.is-active{
    background:rgba(255,255,255,.95);
    color:var(--brand-teal-deep);
    font-weight:600;
  }
  .nav-link.logout,
  .sidebar-footer .nav-link.pwa-install-btn{
    margin-top:8px;
    background:#042f33;
    background-color:#042f33;
    border:1.5px solid #042f33;
    text-align:left;
    color:#fff;
    opacity:1;
    box-shadow:none;
  }
  .nav-link.logout:hover,
  .nav-link.logout:focus-visible,
  .sidebar-footer .nav-link.pwa-install-btn:hover,
  .sidebar-footer .nav-link.pwa-install-btn:focus-visible{
    background:#031f22;
    background-color:#031f22;
    border-color:#031f22;
    color:#fff;
  }
  
  /* =========================================================
     05. MAIN CONTENT AREA / BACKGROUND DECORATION
     ========================================================= */
  .main{flex:1;display:flex;flex-direction:column;min-width:0}
  body.app .main{
    position:relative;
    overflow:visible;
    background:var(--bg);
  }
  body.app .main::before,
  body.app .main::after{display:none}

  /* ===== ADMIN DASHBOARD HEADER ===== */
  /* =========================================================
     06. TOPBAR / HEADER
     ========================================================= */
  .topbar{z-index:200}
  body.app .page{position:relative;z-index:1}

  .topbar{
    min-height:64px;height:auto;background:#fff;border-bottom:1px solid var(--border);
    display:flex;align-items:center;justify-content:space-between;gap:16px;
    padding:12px var(--page-padding-x);
  }
  .topbar-spacer{flex:1}
  .topbar-heading{min-width:0;flex:1;display:flex;flex-direction:column;gap:3px;justify-content:center}
  .topbar-title{
    margin:0;font-size:1.35rem;font-weight:700;color:var(--text);letter-spacing:.01em;line-height:1.25;
  }
  .topbar-subtitle{margin:0;font-size:13px;font-weight:500;color:var(--muted);line-height:1.35}

  .avatar{
    width:34px;height:34px;border-radius:999px;background:#cbd5e1;border:1px solid var(--border)
  }
  .avatar.sm{width:28px;height:28px}
  .avatar.avatar--profile{background:var(--brand-mint);border:1px solid rgba(var(--primary-rgb),.35)}

  /* =========================================================
     07. PAGE CONTAINER / PAGE TITLE
     ========================================================= */
  .page{padding:var(--page-padding-y) var(--page-padding-x) 28px;max-width:none;width:100%;margin:0}
  .page-title h1{margin:0 0 16px;font-size:22px;font-weight:700;letter-spacing:.02em;color:var(--text)}
  .page > section + section{margin-top:var(--space-section)}
  .page > :first-child{margin-top:0}
  .page > [hidden] + *{margin-top:0}
  
  /* =========================================================
     08. CARDS / PANELS
     ========================================================= */
  .card{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-card);
  }
  body.app .card{
    border:1px solid var(--border);
    border-radius:var(--radius-xl);
    box-shadow:var(--shadow-card);
  }
  .panel{padding:0;overflow:hidden}
  .panel-head{padding:18px 18px 0}
  .panel-head h2{margin:0;font-size:15px}
  .panel-head p{margin:6px 0 0}
  
  /* =========================================================
     09. GRID / DASHBOARD LAYOUTS
     ========================================================= */
  .grid{display:grid;gap:16px}
  .kpis{
    grid-template-columns:repeat(auto-fit,minmax(158px,1fr));
    gap:18px;
  }
  .two{grid-template-columns:1fr 1fr}
  .charts{grid-template-columns:1fr 1fr}
  
  @media (max-width: 1100px){
    .kpis{gap:16px}
    .two{grid-template-columns:1fr}
    .charts{grid-template-columns:1fr}
  }
  @media (max-width: 520px){
    .kpis{gap:14px}
  }
  
  /* =========================================================
     10. KPI / STAT CARDS
     Total requirements, completed, pending, overdue, etc.
     ========================================================= */
  .kpi{padding:22px 18px;min-height:108px;display:flex;flex-direction:column;justify-content:center}
  .kpi-label{color:var(--muted);font-size:13px;font-weight:600;letter-spacing:.01em}
  .kpi-value{font-size:2.1rem;font-weight:750;margin-top:10px;line-height:1.1;color:var(--text)}
  .kpi-body{min-width:0;flex:1}
  
  /* =========================================================
     11. TOOLBAR / SEARCH
     ========================================================= */
  .toolbar{display:flex;gap:10px;align-items:center;margin:0 0 14px;flex-wrap:wrap}
  .search{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--border);border-radius:12px;padding:8px 10px;flex:1;min-width:220px}
  body.app .search{border:1.5px solid var(--brand-teal-soft);border-radius:10px}
  .search-ico{color:var(--muted);padding:0 2px}
  
  /* =========================================================
     12. INPUT FIELDS
     ========================================================= */
  .input{
    width:100%;
    border:1px solid var(--border);
    background:#fff;
    border-radius:var(--radius-md);
    padding:10px 12px;
    font:inherit;
    outline:none;
    transition:border-color .15s, box-shadow .15s;
  }
  .input:focus{border-color:var(--brand-teal);box-shadow:0 0 0 3px rgba(var(--primary-rgb),.15);background:#fff}
  body.app .input{
    background:#fff;
    border:1.5px solid rgba(var(--primary-rgb),.45);
    border-radius:10px;
  }
  body.app .input:focus{
    border-color:var(--brand-teal);
    box-shadow:0 0 0 3px rgba(var(--primary-rgb),.2);
    background:#fff;
  }
  .input.sm{padding:8px 10px;border-radius:10px}
  .input.flex{flex:1}
  
  /* =========================================================
     13. BUTTONS
     Primary, secondary, small, and ghost buttons.
     ========================================================= */
  .btn{
    border:1px solid var(--border);
    background:#fff;
    border-radius:var(--radius-md);
    padding:10px 14px;
    font-weight:700;
    cursor:pointer;
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    transition:background .15s, box-shadow .15s, border-color .15s;
  }
  .btn:hover{background:#f8fafc}
  .btn-sm,.btn.sm{padding:8px 12px;border-radius:8px;font-weight:600;font-size:13px}
  .btn-primary{background:var(--button);background-color:#0d6a72;border-color:transparent;color:#fff;box-shadow:none}
  .btn-primary:hover{background:var(--button-hover);background-color:#084a50}
  body.app .btn-primary{box-shadow:none}
  .btn-secondary{
    background:#fff;border:1px solid var(--border);color:var(--brand-teal-deep);box-shadow:none;font-weight:600;
  }
  .btn-secondary:hover{background:#f7fafb;border-color:rgba(var(--primary-rgb),.28)}
  .btn-danger{
    background:#fff;border:1px solid #e2c4c2;color:var(--danger);font-weight:600;box-shadow:none;
  }
  .btn-danger:hover{background:#f8efee;border-color:#d4a8a5}
  .btn-success{background:var(--success);border-color:transparent;color:#fff;box-shadow:none}
  .btn-success:hover{background:#246b4a}
  .btn-ghost{opacity:.95}

  /* ===== RECENT SUBMISSIONS ===== */
  /* =========================================================
     14. TABLES
     ========================================================= */
  .table-wrap{overflow:auto}
  .table{width:100%;border-collapse:separate;border-spacing:0}
  .table th,.table td{padding:12px 14px;border-bottom:1px solid #eef0f3;font-size:13px;text-align:left;vertical-align:middle}
  .table th{
    font-size:11px;color:var(--muted);background:#f7f9fa;font-weight:700;
    text-transform:uppercase;letter-spacing:.03em;border-bottom:1px solid #e5e9eb;
  }
  .table--dashboard th,.table--dashboard td{padding:13px 14px}
  .table tbody tr:hover td{background:#fafcfc}
  .td-user{display:flex;align-items:center;gap:10px}
  /* Keep Teachers as a real table cell so row borders line up with other columns */
  .dashboard-submissions .table--dashboard td.td-user{
    display:table-cell;
    vertical-align:middle;
  }
  .dashboard-submissions .table--dashboard .td-user-inner{
    display:inline-flex;
    align-items:center;
    gap:8px;
    white-space:nowrap;
  }

  /* =========================================================
     15. STATUS PILLS / BADGES
     ========================================================= */
  .pill{display:inline-flex;align-items:center;padding:3px 9px;border-radius:6px;font-size:11px;font-weight:700}
  .pill-warn,
  .pill-pending{background:var(--status-pending-bg);color:var(--status-pending);border:1px solid #f0e0a8}
  .pill-overdue{background:var(--status-overdue-bg);color:var(--status-overdue);border:1px solid #f0c7c3}
  .pill-disapproved{background:var(--status-disapproved-bg);color:var(--status-disapproved);border:1px solid #f0c7c3}
  .pill-discrepancy{background:var(--status-discrepancy-bg);color:var(--status-discrepancy);border:1px solid #f0d2b0}
  .pill-purple{background:var(--status-responded-bg);color:var(--status-responded);border:1px solid #c9dcde}
  .pill-ok{background:var(--status-completed-bg);color:var(--status-completed);border:1px solid #b7dfc8}
  
  /* =========================================================
     16. TABS
     ========================================================= */
  .tabs{display:flex;gap:8px;padding:12px 12px 0}
  .tab{
    border:1px solid var(--border);
    background:#f3f4f6;
    padding:8px 12px;border-radius:12px;font-weight:800;cursor:pointer
  }
  .tab.is-active{background:#fff}
  body.app .tab{border-color:var(--brand-teal-soft)}
  body.app .tab.is-active{border-color:rgba(var(--primary-rgb),.55);box-shadow:0 0 0 2px rgba(var(--primary-rgb),.12)}
  
  /* =========================================================
     17. LINKS
     ========================================================= */
  .link{color:var(--blue);font-weight:800;text-decoration:none}
  
  /* =========================================================
     18. DOCUMENT CARDS
     ========================================================= */
  .doc{padding:14px;display:grid;grid-template-rows:auto 1fr auto;gap:10px;min-height:120px}
  .doc-ico{opacity:.75}
  .doc-title{font-weight:800}
  
  /* =========================================================
     19. STACKS / NOTICES
     ========================================================= */
  .stack{display:grid;gap:12px}
  .stack.tight{gap:10px;padding:16px}
  .notice{padding:14px}
  .notice-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
  .notice-title{font-weight:900;margin-bottom:6px}
  
  /* =========================================================
     21. CHARTS / ANALYTICS
     ========================================================= */
  .chart{padding:14px}
  .chart h3{margin:0 0 10px;font-size:13px}
  
  /* =========================================================
     22. FORMS
     ========================================================= */
  .form{padding:16px;display:grid;gap:12px;max-width:720px}
  .field-label{display:grid;gap:8px;font-size:12px;color:var(--muted);font-weight:800}
  .row{display:flex;justify-content:flex-end}
  .row.end{justify-content:flex-end}
  
  .radio{display:flex;align-items:center;gap:10px;font-weight:700}
  
  .muted{color:var(--muted)}
  
  /* =========================================================
     24. APP-WIDE TYPOGRAPHY / UI POLISH
     ========================================================= */
  /* App shell — larger type, full-width content, working UI */
  body.app{font-size:16px;line-height:1.45}
  body.app .sidebar{width:248px;padding:16px 12px 14px}
  body.app .nav-link{padding:12px 14px;font-size:14.5px;min-height:44px}
  body.app .topbar{min-height:64px;padding:14px var(--page-padding-x)}
  body.app .topbar-user{font-size:14px;font-weight:600;color:var(--muted);margin-right:12px;white-space:nowrap;max-width:200px;overflow:hidden;text-overflow:ellipsis}
  body.app .page{max-width:none;padding:var(--page-padding-y) var(--page-padding-x) 28px}
  body.app .page-title h1{font-size:1.35rem;margin-bottom:0;color:var(--text)}
  body.app .page > section + section{margin-top:var(--space-section)}
  body.app .page > :first-child{margin-top:0}
  body.app .page > [hidden] + *{margin-top:0}
  body.app .grid{gap:16px}
  body.app .kpis{gap:14px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
  body.app .kpi{padding:22px 18px;min-height:108px}
  body.app .kpi-label{font-size:13px}
  body.app .kpi-value{font-size:2.1rem;margin-top:10px}
  body.app .table th,
  body.app .table td{padding:12px 14px;font-size:13.5px;vertical-align:middle}
  body.app .table th{font-size:11px}
  body.app .panel-head{padding:16px 16px 0}
  body.app .panel-head h2{font-size:1rem;font-weight:700;color:var(--text)}
  body.app .avatar{width:36px;height:36px}
  body.app .avatar.sm{width:26px;height:26px}
  body.app .btn{padding:9px 12px;font-size:13.5px}
  body.app .btn-sm,body.app .btn.sm{padding:7px 11px;font-size:13px}
  body.app .notice-title{font-size:1.05rem}
  body.app .notice{padding:18px}
  body.app .doc{padding:18px;min-height:132px}
  body.app .doc-title{font-size:1.02rem}
  body.app .chart h3{font-size:1rem}
  body.app .field-label{font-size:13px}
  
  /* =========================================================
     25. FLASH / SUCCESS MESSAGE
     ========================================================= */
  .flash{
    margin:-6px 0 18px;padding:12px 16px;border-radius:12px;
    background:rgba(var(--primary-rgb),.12);border:1px solid var(--brand-teal-soft);
    color:var(--text);font-size:15px;font-weight:600;
  }
  
  /* =========================================================
     26. SEARCH FORM / TABLE ACTIONS
     ========================================================= */
  .search-form{display:flex;flex-wrap:wrap;gap:12px;align-items:center;width:100%}
  .search--grow{flex:1;min-width:min(100%,280px)}
  .search-form .search{margin:0}
  
  .table-action-form{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
  .table-action-form .input.sm{min-width:140px}
  
  a.tab{
    text-decoration:none;color:inherit;display:inline-flex;align-items:center;
    font:inherit;font-weight:800;font-size:14px;
  }
  
  /* =========================================================
     29. BAR CHART DETAILS
     ========================================================= */
  .chart-caption{margin:0 0 12px;font-size:14px}
  .bar-chart{padding:4px 0 8px}
  .bar-track{
    height:18px;border-radius:999px;background:#e5e7eb;overflow:hidden;
  }
  .bar-track--sm{height:12px;flex:1;min-width:80px}
  .bar-fill{
    height:100%;background:var(--brand-teal);border-radius:999px;
    transition:width .25s ease;
  }
  
  .doc-meta{margin:0;font-size:13px}
  
  /* ===== LOGIN PAGE ===== */
  .login-page{
    --login-ink:var(--text-primary);
    --login-placeholder:#7a8a8d;
    --login-panel:var(--primary);
    --login-panel-deep:var(--primary-dark);
    --primary-hover:var(--primary-dark);
    min-height:100vh;
    margin:0;
    position:relative;
    overflow-x:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:clamp(16px,3vw,36px);
    background:var(--background);
    font-family:var(--font-sans);
    color:var(--login-ink);
  }

  .login-backdrop{
    position:fixed;
    inset:0;
    z-index:0;
    pointer-events:none;
    overflow:hidden;
    background:var(--background);
  }
  .login-backdrop::before,
  .login-backdrop::after{
    content:none;
    display:none;
  }

  .login-frame{
    position:relative;
    z-index:1;
    width:min(960px,100%);
    background:#fff;
    border-radius:18px;
    overflow:hidden;
    border:1px solid rgba(var(--primary-rgb),.14);
    box-shadow:0 8px 24px rgba(26,43,46,.08);
  }

  /* ===== LOGO SECTION ===== */
  .login-institution{
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px 20px;
    background:#f7fbfb;
    border-bottom:1px solid rgba(var(--primary-rgb),.12);
  }

  .login-institution-text{
    flex:1;
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:1px;
  }

  .login-institution-name{
    margin:0;
    font-size:20px;
    font-weight:700;
    color:var(--login-ink);
    line-height:1.25;
  }

  .login-institution-dept{
    margin:0;
    font-size:15px;
    font-weight:500;
    color:var(--muted);
    line-height:1.3;
  }

  .login-logo{
    object-fit:contain;
    object-position:center;
    display:block;
    flex-shrink:0;
    background:transparent;
  }

  .login-logo-badge{
    width:80px;
    height:80px;
    min-width:80px;
    min-height:80px;
    box-sizing:border-box;
    border-radius:50%;
    overflow:hidden;
    flex-shrink:0;
    border:1px solid var(--border);
    background:#fff;
    display:block;
  }

  .login-logo-badge .login-logo--school,
  .login-logo-badge .login-logo--department{
    width:100%;
    height:100%;
    min-width:0;
    min-height:0;
    max-width:none;
    max-height:none;
    box-sizing:border-box;
    border:none;
    border-radius:0;
    padding:0;
    margin:0;
    background:#fff;
    object-fit:cover;
    object-position:center;
    display:block;
  }
  /* Circular High School Department seal — fill the badge cleanly */
  .login-logo-badge--department{
    background:#fff;
    padding:0;
  }
  .login-logo-badge--department .login-logo--department{
    object-fit:cover;
    object-position:center;
    background:#fff;
  }

  .login-logo--tracked{
    width:168px;
    height:168px;
    border-radius:0;
    background:transparent;
    border:none;
    box-shadow:none;
    padding:0;
    object-fit:contain;
    object-position:center;
  }

  .login-logo--placeholder{
    display:grid;
    place-items:center;
    text-align:center;
    font-size:11px;
    font-weight:700;
    line-height:1.15;
    letter-spacing:.02em;
    color:var(--login-panel-deep);
    padding:10px;
    object-fit:unset;
    overflow:hidden;
  }

  .login-logo--department.login-logo--placeholder{
    font-size:8px;
    padding:6px;
  }

  /* ===== SPLIT LAYOUT ===== */
  .login-shell{
    display:grid;
    grid-template-columns:1.02fr 1fr;
    min-height:460px;
  }

  .login-panel{
    min-width:0;
    display:flex;
    flex-direction:column;
    justify-content:center;
  }

  .login-panel--brand{
    background:var(--login-panel-deep);
    color:#fff;
    padding:clamp(36px,5vw,52px) clamp(28px,4vw,44px);
    position:relative;
    overflow:hidden;
    justify-content:flex-end;
  }

  .login-panel--brand::before{
    content:"";
    position:absolute;
    inset:0;
    background:url("../images/system-logo.png") center / min(118%,540px) no-repeat;
    opacity:.05;
    pointer-events:none;
    z-index:0;
  }

  .login-panel--brand::after{
    content:"";
    position:absolute;
    right:-48px;
    bottom:-48px;
    width:180px;
    height:180px;
    border-radius:50%;
    background:rgba(255,255,255,.07);
    pointer-events:none;
    z-index:0;
  }

  .login-brand{
    position:relative;
    z-index:1;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:0;
    max-width:100%;
    width:100%;
    margin-top:auto;
    padding-bottom:clamp(8px,1.5vw,18px);
  }

  .login-panel--brand .login-logo--tracked{
    width:clamp(132px, 28%, 168px);
    height:auto;
    max-width:168px;
    aspect-ratio:1;
  }

  .login-panel--brand .login-welcome{
    margin:0 0 12px;
    font-family:"Cormorant Garamond", Georgia, "Times New Roman", serif;
    font-size:clamp(1.15rem, 2vw, 1.45rem);
    font-weight:700;
    font-style:italic;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:#fff;
    line-height:1.25;
  }

  .login-panel--brand .login-heading{
    margin:0;
    font-size:clamp(1.2rem, 2.1vw, 1.55rem);
    font-weight:700;
    letter-spacing:.01em;
    color:#fff;
    line-height:1.35;
    max-width:100%;
    white-space:normal;
  }

  .login-panel--brand .login-heading::after{
    display:none;
  }

  .login-panel--brand .login-tagline{
    margin:18px 0 0;
    font-size:15px;
    line-height:1.5;
    font-weight:500;
    color:#fff;
    max-width:100%;
  }

  .login-panel--form{
    padding:clamp(28px,4vw,44px) clamp(24px,4vw,40px);
    background:#fff;
  }

  .login-card{
    width:100%;
    max-width:380px;
    margin:0 auto;
    display:flex;
    flex-direction:column;
    gap:18px;
  }

  .login-card-head{display:flex;flex-direction:column;gap:6px}

  .login-card-title{
    margin:0;
    font-size:1.35rem;
    font-weight:700;
    color:var(--login-ink);
  }

  .login-sub{
    margin:0;
    font-size:14px;
    color:var(--muted);
    font-weight:500;
    line-height:1.45;
  }

  /* ===== LOGIN FORM ===== */
  .login-form{
    width:100%;
    display:flex;
    flex-direction:column;
    gap:15px;
  }

  .login-field{
    display:flex;
    flex-direction:column;
    gap:7px;
    margin:0;
    width:100%;
  }

  .login-label{
    font-size:13px;
    font-weight:600;
    color:var(--login-ink);
  }

  /* ===== INPUT FIELDS ===== */
  .login-control{
    position:relative;
    display:flex;
    align-items:center;
    width:100%;
  }

  .login-input{
    width:100%;
    margin:0;
    font:inherit;
    font-size:14px;
    font-weight:500;
    color:var(--login-ink);
    background:#f8fbfb;
    border:1.5px solid rgba(var(--primary-rgb),.28);
    border-radius:12px;
    padding:13px 14px;
    outline:none;
    transition:border-color .15s, box-shadow .15s, background .15s;
  }

  .login-control--password .login-input{padding-right:48px}

  .login-page input[type="password"]::-ms-reveal,
  .login-page input[type="password"]::-ms-clear,
  .login-input[type="password"]::-ms-reveal,
  .login-input[type="password"]::-ms-clear{
    display:none;
    width:0;
    height:0;
  }

  .login-eye{
    position:absolute;
    right:4px;
    top:50%;
    transform:translateY(-50%);
    width:42px;
    height:42px;
    border:none;
    background:transparent;
    cursor:pointer;
    color:var(--primary);
    display:grid;
    place-items:center;
    padding:0;
    z-index:2;
    border-radius:8px;
    line-height:0;
  }

  .login-eye svg{
    display:block;
    pointer-events:none;
    width:22px;
    height:22px;
    color:var(--primary);
    stroke:var(--primary);
    fill:none;
  }

  .login-eye:hover{
    background:rgba(var(--primary-rgb),.1);
    color:var(--primary-dark);
  }

  .login-eye:hover svg{
    color:var(--primary-dark);
    stroke:var(--primary-dark);
  }

  .login-eye:focus-visible{
    outline:2px solid var(--brand-teal);
    outline-offset:1px;
  }

  .login-input::placeholder{
    color:var(--login-placeholder);
    font-weight:500;
  }

  .login-input:focus{
    background:#fff;
    border-color:var(--brand-teal);
    box-shadow:0 0 0 3px rgba(var(--primary-rgb),.16);
  }

  .login-select{
    appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23008F96' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 14px center;
    padding-right:40px;
    cursor:pointer;
  }

  /* ===== LOGIN ROLE DROPDOWN (custom; native select kept for submit) ===== */
  .login-control--role{
    display:block;
    position:relative;
    overflow:visible;
    z-index:2;
  }

  .login-control--role.is-open{
    z-index:40;
  }

  .login-role-native{
    position:absolute !important;
    left:0;
    top:0;
    width:1px !important;
    height:1px !important;
    padding:0 !important;
    margin:0 !important;
    overflow:hidden !important;
    clip:rect(0,0,0,0) !important;
    clip-path:inset(50%) !important;
    border:0 !important;
    opacity:0 !important;
    pointer-events:none !important;
    appearance:none !important;
    z-index:-1;
  }

  .login-role-trigger{
    appearance:none;
    position:relative;
    display:flex;
    align-items:center;
    width:100%;
    text-align:left;
    cursor:pointer;
    padding-right:44px;
    background-color:#f8fbfb;
    background-image:none;
  }

  .login-role-trigger-text{
    display:block;
    flex:1;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    padding-right:4px;
  }

  .login-role-trigger-text.is-placeholder{
    color:var(--login-placeholder);
    font-weight:500;
  }

  .login-role-arrow{
    position:absolute;
    right:14px;
    top:50%;
    transform:translateY(-50%);
    width:12px;
    height:8px;
    color:var(--brand-teal);
    display:flex;
    align-items:center;
    justify-content:center;
    pointer-events:none;
    line-height:0;
  }

  .login-role-arrow svg{
    display:block;
    width:12px;
    height:8px;
  }

  .login-role-trigger[aria-expanded="true"]{
    background-color:#fff;
    border-color:var(--brand-teal);
    box-shadow:0 0 0 3px rgba(var(--primary-rgb),.16);
  }

  .login-role-trigger[aria-expanded="true"] .login-role-arrow{
    transform:translateY(-50%) rotate(180deg);
  }

  .login-role-trigger:focus-visible{
    background:#fff;
    border-color:var(--brand-teal);
    box-shadow:0 0 0 3px rgba(var(--primary-rgb),.16);
  }

  .login-role-menu{
    position:absolute;
    left:0;
    right:0;
    top:calc(100% + 6px);
    z-index:50;
    margin:0;
    padding:6px;
    list-style:none;
    background:#fff;
    border:1.5px solid rgba(var(--primary-rgb),.28);
    border-radius:12px;
    box-shadow:0 12px 28px rgba(26,43,46,.12), 0 2px 8px rgba(var(--primary-rgb),.08);
    max-height:none;
  }

  .login-role-menu[hidden]{display:none}

  .login-role-option{
    margin:0;
    padding:11px 12px;
    border-radius:10px;
    font-size:14px;
    font-weight:500;
    color:var(--login-ink);
    cursor:pointer;
    line-height:1.35;
    transition:background .12s, color .12s;
  }

  .login-role-option + .login-role-option{margin-top:2px}

  .login-role-option:hover,
  .login-role-option:focus{
    outline:none;
    background:rgba(var(--primary-rgb),.1);
    color:var(--login-ink);
  }

  .login-role-option--placeholder{
    color:var(--login-placeholder);
  }

  .login-role-option[aria-selected="true"]{
    background:rgba(var(--primary-rgb),.14);
    color:var(--brand-teal-dark);
    font-weight:600;
  }

  .login-role-option--placeholder[aria-selected="true"]{
    color:var(--login-placeholder);
    font-weight:500;
  }

  .login-role-option[aria-selected="true"]:hover,
  .login-role-option[aria-selected="true"]:focus{
    background:rgba(var(--primary-rgb),.18);
  }

  /* ===== LOGIN BUTTON ===== */
  .login-submit{
    width:100%;
    margin-top:6px;
    border:none;
    border-radius:12px;
    padding:14px 18px;
    font:inherit;
    font-size:15px;
    font-weight:700;
    color:#fff;
    background:var(--brand-teal);
    cursor:pointer;
    box-shadow:none;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    transition:background .15s, box-shadow .15s, transform .08s;
  }

  .login-submit:hover{
    background:var(--primary-hover);
    box-shadow:none;
  }

  .login-submit:active{transform:translateY(1px)}

  .login-submit:focus-visible{
    outline:2px solid var(--brand-teal-deep);
    outline-offset:2px;
  }

  /* ===== MESSAGES / LINKS ===== */
  .login-hint{
    margin:0;
    text-align:center;
    font-size:13px;
    color:var(--text-secondary);
    line-height:1.45;
  }

  .login-flash{
    margin:0;
    width:100%;
    padding:11px 14px;
    border-radius:10px;
    background:#f8eceb;
    color:var(--danger);
    border:1px solid #e8c9c6;
    font-size:13px;
    font-weight:500;
    text-align:center;
    line-height:1.4;
  }

  .login-hint--row{margin-top:8px}
  .login-link{color:var(--brand-teal);font-weight:600;text-decoration:none}
  .login-link:hover{text-decoration:underline}

  .login-link--btn{
    border:none;
    background:transparent;
    cursor:pointer;
    font:inherit;
    padding:0;
    color:var(--brand-teal);
    font-weight:600;
  }

  .login-link--btn:hover{text-decoration:underline}

  /* ===== LOGIN RESPONSIVE ===== */
  @media (max-width:860px){
    .login-shell{
      grid-template-columns:1fr;
      min-height:0;
    }

    .login-panel--brand{
      padding:28px 24px 26px;
      align-items:center;
    }

    .login-brand{
      align-items:center;
      text-align:center;
      max-width:none;
    }

    .login-tagline{
      max-width:28rem;
      font-size:13px;
    }

    .login-logo--tracked{
      width:120px;
      height:120px;
    }

    .login-panel--brand .login-heading{font-size:1.35rem}
    .login-panel--form{padding:26px 22px 30px}
  }

  @media (max-width:480px){
    .login-page{padding:10px}
    .login-frame{border-radius:14px}

    .login-institution{
      padding:10px 14px;
      gap:10px;
    }

    .login-logo-badge{
      width:68px;
      height:68px;
      min-width:68px;
      min-height:68px;
    }
    .login-institution-name{font-size:17px}
    .login-institution-dept{font-size:13px}
  }

  /* Simple shell for forgot_password / setup_database */
  .login-shell--simple{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:16px;
    width:min(440px,100%);
    padding:clamp(28px,4vw,40px) clamp(22px,4vw,36px);
    background:#fff;
    border-radius:18px;
    border:1px solid rgba(var(--primary-rgb),.14);
    box-shadow:0 8px 24px rgba(26,43,46,.08);
    grid-template-columns:none;
    position:relative;
    z-index:1;
  }

  .login-shell--simple .login-heading{
    color:var(--brand-teal-deep);
    font-size:1.6rem;
    letter-spacing:.04em;
    text-align:center;
  }

  .login-shell--simple .login-brand{
    align-items:center;
    text-align:center;
    max-width:none;
  }

  .login-shell--simple .login-form{gap:14px}

  /* =========================================================
     32. DASHBOARD TABS / COMPLIANCE / NOTIFICATIONS / DOCUMENT VIEW
     ========================================================= */
  /* Dashboard tabs + compliance checklist + notifications + doc view */
  .panel-intro{margin:0 0 18px;font-size:14px}
  
  /* =========================================================
     33. COMPLIANCE CHECKLIST
     ========================================================= */
  .checklist-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
  .checklist-list--padded{padding:12px 18px 20px}
  .checklist-row{border:1px solid var(--border);border-radius:12px;padding:12px 14px;background:#fafafa}
  .checklist-form{margin:0}
  .checklist-label{display:flex;align-items:flex-start;gap:10px;cursor:pointer;font-weight:500}
  .checklist-label--readonly{cursor:default}
  .checklist-due{display:block;font-size:12px;margin-top:4px}
  .checklist-row--action{
    display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  }
  .checklist-row-main{flex:1;min-width:200px}
  .checklist-row-side{display:flex;align-items:center;gap:12px;flex-shrink:0}
  .checklist-action{font-size:13px;white-space:nowrap}
  
  .panel--scroll .table-wrap--wide{overflow-x:auto}
  .table--compact{font-size:12px}
  .th-check{min-width:120px;max-width:140px;vertical-align:bottom;line-height:1.25}
  .th-check-label{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .td-check{text-align:center}
  .check-readonly{width:18px;height:18px;accent-color:var(--brand-teal)}
  .sticky-col{position:sticky;left:0;background:#fff;z-index:1;box-shadow:4px 0 8px -4px rgba(0,0,0,.08)}
  
  /* ===== NOTIFICATIONS ===== */
  /* =========================================================
     34. NOTIFICATIONS
     ========================================================= */
  .notif-stack{display:flex;flex-direction:column;gap:8px;padding:12px 14px 14px;min-width:0}
  .notif-card{
    border-radius:10px;padding:12px 12px;
    background:#f7fafb;box-shadow:none;border:1px solid #e8ecee;min-width:0;
  }
  .notif-card--compact{
    display:flex;flex-direction:column;gap:6px;
  }
  .notif-card-main{min-width:0}
  .notif-card-top{display:flex;align-items:center;gap:8px;margin-bottom:6px}
  .notif-dot{width:8px;height:8px;border-radius:999px;background:var(--brand-teal);flex-shrink:0}
  .notif-time{font-size:11px;color:var(--muted);font-weight:500;line-height:1.3}
  .notif-card-title{
    font-size:13.5px;font-weight:700;margin-bottom:4px;color:var(--text);line-height:1.35;
    overflow-wrap:anywhere;word-break:break-word;
  }
  .notif-card-body{
    font-size:12.5px;color:#4b5563;line-height:1.45;
    overflow-wrap:anywhere;word-break:break-word;
  }
  .notif-empty{padding:20px 12px;text-align:center;border-radius:10px;border:1px dashed var(--border);background:#fff}
  a.notif-card{
    text-decoration:none;
    color:inherit;
    cursor:pointer;
  }
  a.notif-card:hover{
    border-color:rgba(var(--primary-rgb),.35);
  }
  
  /* =========================================================
     35. DOCUMENT VIEW PAGE
     ========================================================= */
  .doc-view{max-width:800px;margin:0 auto;display:flex;flex-direction:column;gap:18px}
  .doc-view-hero{display:flex;gap:18px;align-items:center;padding:22px 24px;border-radius:18px;border:1px solid var(--border)}
  .doc-view-icon{font-size:42px;line-height:1}
  .doc-view-meta{font-size:12px;margin:0 0 6px}
  .doc-view-title{font-size:1.5rem;margin:0;font-weight:700}
  .doc-view-body{padding:22px 24px}
  .doc-view-content{font-size:15px;line-height:1.65;color:#374151}
  .doc-view-actions{margin-top:20px}
  
  .panel-body--padded{padding:8px 8px 20px}
  .form--narrow{max-width:480px}
  .h3-spaced{margin:0 0 12px;font-size:1.1rem}
  .form-row-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  @media(max-width:640px){.form-row-2{grid-template-columns:1fr}}
  
  .toolbar--between{justify-content:space-between;align-items:center}
  .toolbar--between .search-form{flex:1}
  
  /* =========================================================
     37. SCROLLABLE PANELS / TABLES
     ========================================================= */
  /* Internal scroll areas — page scroll stays normal */
  .scroll-panel{
    max-height:min(52vh,520px);
    overflow-y:auto;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .table-wrap--scroll-teachers,
  .table-wrap--scroll{
    max-height:min(52vh,520px);
    overflow-y:auto;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .table-wrap--scroll thead th{
    position:sticky;
    top:0;
    z-index:1;
    background:#f7f9fa;
    box-shadow:0 1px 0 #e5e9eb;
  }
  .scroll-panel--notifications{
    max-height:min(52vh,520px);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  .scroll-panel--folder-grid /* =========================================================
     40. FOLDERS / SHARED FILES
     ========================================================= */
  .folder-grid{padding-top:16px}
  
  /* =========================================================
     38. PASSWORD FIELD / PASSWORD TOGGLE
     ========================================================= */
  .password-field{display:flex;align-items:center;gap:8px;max-width:320px}
  .password-field .input--password{flex:1;font-family:var(--font-sans);font-size:14px}
  .password-toggle{flex-shrink:0;min-width:38px;height:36px;padding:0 8px;display:inline-flex;align-items:center;justify-content:center}
  .password-toggle svg{display:block}

  /* ===== REGISTER TEACHER ===== */
  .register-page{
    display:flex;
    flex-direction:column;
    gap:16px;
  }
  html:has(body.page-teachers-record),
  body.page-teachers-record{
    height:100%;
    overflow:hidden;
  }
  body.page-teachers-record .shell{
    height:100vh;
    max-height:100vh;
    overflow:hidden;
  }
  body.page-teachers-record .sidebar{
    height:100vh;
    height:100dvh;
    position:fixed;
    top:0;
    left:0;
    overflow:hidden;
  }
  body.page-teachers-record .main{
    height:100%;
    min-height:0;
    overflow:hidden;
  }
  body.page-teachers-record .topbar{
    flex-shrink:0;
    position:sticky;
    top:0;
    z-index:2050;
    overflow:visible;
  }
  body.page-teachers-record .page{
    flex:1 1 auto;
    min-height:0;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    padding-bottom:16px;
  }
  body.page-teachers-record .flash{
    flex-shrink:0;
  }
  body.page-teachers-record .register-page{
    flex:1 1 auto;
    min-height:0;
    overflow:hidden;
    gap:0;
  }
  body.page-teachers-record .register-panel{
    flex:1 1 auto;
    min-height:0;
    display:flex;
    flex-direction:column;
  }
  body.page-teachers-record .register-panel .panel-head{
    flex-shrink:0;
  }
  body.page-teachers-record .table-wrap--register{
    flex:1 1 auto;
    min-height:0;
    overflow:hidden;
  }
  body.page-teachers-record .table-wrap--register-fill{
    display:flex;
    flex-direction:column;
  }
  body.page-teachers-record .table-wrap--register-fill .table--register{
    flex:0 0 auto;
    width:100%;
    height:auto;
  }
  body.page-teachers-record .register-pagination{
    flex-shrink:0;
  }
  .register-toolbar{
    margin:0;
    gap:10px;
    align-items:center;
  }
  .register-toolbar .search-form{
    flex:1;
    min-width:0;
    max-width:none;
  }
  .register-primary-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    height:38px;
    padding:0 14px;
    flex-shrink:0;
    white-space:nowrap;
    border-radius:10px;
    font-size:14px;
  }
  .register-primary-btn .qa-ico{
    width:20px;height:20px;display:grid;place-items:center;
  }
  .register-primary-btn .qa-ico svg{width:20px;height:20px;display:block}
  .register-search .search{
    width:100%;
    margin:0;
    padding:0 14px;
    min-height:38px;
    height:38px;
    border:1.5px solid rgba(var(--primary-rgb),.35);
    border-radius:10px;
    background:#fff;
    box-shadow:none;
  }
  .register-search .search:focus-within{
    border-color:var(--brand-teal);
    box-shadow:0 0 0 3px rgba(var(--primary-rgb),.14);
  }
  .register-search .input--search{
    border:none !important;
    box-shadow:none !important;
    background:transparent;
    padding:8px 4px;
    outline:none;
    width:100%;
    height:100%;
    font-size:14px;
  }
  .sr-only{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
  }
  .register-panel{
    overflow:hidden;
  }
  .register-pagination{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:6px;
    padding:8px 14px 12px;
    margin-top:auto;
    flex-shrink:0;
    border-top:1px solid #eef0f3;
  }
  .register-page-btn{
    min-width:32px;
    height:32px;
    padding:0 8px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:8px;
    text-decoration:none;
    color:var(--text);
    font-weight:600;
    font-size:13px;
    line-height:1;
    background:transparent;
    border:none;
    box-sizing:border-box;
  }
  .register-page-btn:hover{
    background:var(--primary-light);
    color:var(--brand-teal-deep);
  }
  .register-page-btn.is-active{
    background:var(--button);
    background-color:#0d6a72;
    color:#fff;
  }
  .register-page-btn.is-active:hover{
    background:var(--button-hover);
    background-color:#0a555c;
    color:#fff;
  }
  .register-page-btn--icon svg{
    width:16px;
    height:16px;
    display:block;
  }
  .register-page-btn.is-disabled{
    opacity:.32;
    pointer-events:none;
    cursor:default;
  }
  body.app .register-panel .panel-head,
  .register-panel .panel-head{
    padding:10px 14px 6px;
  }
  .register-panel .panel-head--row{
    align-items:center;
    justify-content:space-between;
    gap:12px;
  }
  .register-panel-actions{
    display:flex;
    align-items:center;
    gap:10px;
    margin-left:auto;
    flex-shrink:0;
  }
  .register-sort-form{
    margin:0;
  }
  .register-sort{
    display:inline-flex;
    align-items:center;
    margin:0;
  }
  .register-sort-select{
    box-sizing:border-box;
    appearance:none;
    -webkit-appearance:none;
    display:inline-flex;
    align-items:center;
    min-width:168px;
    height:var(--tracked-btn-h, 36px);
    min-height:var(--tracked-btn-h, 36px);
    max-height:var(--tracked-btn-h, 36px);
    padding:0 36px 0 var(--tracked-btn-px, 14px);
    border-radius:var(--tracked-btn-r, 10px);
    border:1.5px solid rgba(var(--primary-rgb),.28);
    background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%23084a50' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center;
    color:var(--brand-teal-deep);
    font:inherit;
    font-size:var(--tracked-btn-fs, 13.5px);
    font-weight:var(--tracked-btn-fw, 700);
    line-height:1;
    cursor:pointer;
  }
  .register-sort-select:focus{
    outline:none;
    border-color:var(--brand-teal);
    box-shadow:0 0 0 3px rgba(var(--primary-rgb),.12);
  }
  .register-panel .register-primary-btn{
    margin-left:0;
  }
  .register-panel-sub{margin:2px 0 0;font-size:13px}
  .table-wrap--register{
    overflow:hidden;
    max-height:none;
  }
  .table--register{
    table-layout:fixed;
    width:100%;
    min-width:0;
  }
  /* Must beat body.app .table th/td (12px 14px), which made rows feel tall. */
  body.app .table.table--register th,
  body.app .table.table--register td,
  .table.table--register th,
  .table.table--register td{
    padding:5px 12px;
    vertical-align:middle;
    line-height:1.3;
    font-size:13.5px;
  }
  body.app .table.table--register thead th,
  .table.table--register thead th{
    background:#f7f9fa;
    padding:7px 12px;
    font-size:11px;
    border-bottom:1px solid #e5e9eb;
  }
  .table--register tbody td{
    border-bottom:1px solid #eef0f3;
  }
  body.app .table.table--register tbody tr,
  .table.table--register tbody tr{
    height:46px;
  }
  body.app .table.table--register tbody td,
  .table.table--register tbody td{
    height:46px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .table.table--register tbody .pill{
    white-space:nowrap;
  }
  .table--register th.th-num,
  .table--register td.td-num{
    width:36px;
    color:var(--muted);
    text-align:left;
  }
  .table--register th.th-name{width:20%}
  .table--register th.th-email{width:22%}
  .table--register th.th-level{width:9%}
  .table--register th.th-role{width:14%}
  .table--register th.th-status{width:9%}
  .table--register th.th-credentials{width:10%}
  .table--register th.th-actions,
  .table--register td.td-actions{
    width:124px;
    text-align:right;
    white-space:nowrap;
    padding-right:10px;
    overflow:visible;
  }
  .table--register .td-credentials,
  .table--register .td-status,
  .table--register .td-level,
  .table--register .td-role{
    white-space:nowrap;
  }
  body.app .table--register .td-credentials .pill,
  .table--register .td-credentials .pill{
    padding:2px 8px;
    line-height:1.2;
  }
  body.app .table--register .td-level .pill,
  .table--register .td-level .pill,
  body.app .table--register .td-role .pill,
  .table--register .td-role .pill,
  .pill-level{
    padding:2px 8px;
    line-height:1.2;
    background:var(--primary-light);
    color:var(--brand-teal-deep);
    border:1px solid rgba(var(--primary-rgb),.22);
  }
  .register-cred-form{
    display:inline-flex;
    justify-content:flex-end;
    align-items:center;
    margin:0;
  }
  .register-actions{
    display:inline-flex;
    align-items:center;
    justify-content:flex-end;
    gap:4px;
  }
  .register-icon-btn{
    width:auto;
    height:auto;
    min-width:28px;
    min-height:28px;
    padding:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:none;
    background:transparent;
    box-shadow:none;
    color:var(--brand-teal-deep);
    border-radius:0;
    cursor:pointer;
    flex-shrink:0;
    text-decoration:none;
    transition:color .12s;
  }
  .register-icon-btn svg{
    display:block;
    width:20px;
    height:20px;
  }
  .register-icon-btn:hover,
  .register-icon-btn:focus-visible{
    background:transparent;
    border:none;
    box-shadow:none;
    color:var(--brand-teal);
    outline:none;
  }
  .register-icon-btn--resend{
    color:var(--brand-teal);
    background:transparent;
  }
  .register-icon-btn--danger{
    color:#b91c1c;
    background:transparent;
  }
  .register-icon-btn--danger:hover,
  .register-icon-btn--danger:focus-visible{
    background:transparent;
    border:none;
    color:#991b1b;
  }
  .register-icon-btn--ok{
    color:#047857;
    background:transparent;
  }
  .register-icon-btn--ok:hover,
  .register-icon-btn--ok:focus-visible{
    background:transparent;
    border:none;
    color:#065f46;
  }
  .register-icon-btn--neutral,
  .register-icon-btn--neutral:hover,
  .register-icon-btn--neutral:focus-visible{
    background:transparent;
    border:none;
    color:var(--text);
  }
  body.app .td-action .register-icon-btn,
  body.app .col-action .register-icon-btn{
    text-decoration:none;
  }
  body.app .table--register .td-status .pill,
  .table--register .td-status .pill{
    padding:2px 8px;
    line-height:1.2;
  }
  .table--register .td-user{
    font-weight:600;
    display:table-cell;
    min-width:0;
    vertical-align:middle;
  }
  .table--register .td-user-inner{
    display:flex;
    align-items:center;
    gap:8px;
    min-width:0;
    max-width:100%;
  }
  .table--register .td-user-name{
    min-width:0;
    flex:1 1 auto;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  body.app .table--register .td-user .avatar.sm,
  .table--register .td-user .avatar.sm{
    width:22px;
    height:22px;
    flex-shrink:0;
    display:inline-block;
    vertical-align:middle;
    margin-right:8px;
  }
  .table--register .td-email{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-weight:500;
    color:#374151;
  }
  @media (max-width:900px){
    body.app .table.table--register th,
    body.app .table.table--register td,
    .table.table--register th,
    .table.table--register td{
      padding:5px 10px;
    }
    .table--register th.th-actions,
    .table--register td.td-actions{
      width:118px;
      min-width:118px;
    }
  }
  @media (max-width:640px){
    .register-toolbar{
      flex-wrap:wrap;
    }
    .register-primary-btn{
      height:36px;
    }
    body.app .table.table--register th,
    body.app .table.table--register td,
    .table.table--register th,
    .table.table--register td{
      padding:5px 8px;
      font-size:12.5px;
    }
    body.app .table.table--register thead th,
    .table.table--register thead th{
      padding:6px 8px;
    }
  }
  .password-field--register{
    max-width:100%;
    width:100%;
    background:#f7f9fa;
    border:1px solid var(--border);
    border-radius:8px;
    padding:2px 2px 2px 10px;
    gap:4px;
  }
  .password-field--register .input--password{
    border:none !important;
    box-shadow:none !important;
    background:transparent;
    padding:8px 4px;
    min-width:0;
  }
  .password-field--register .password-toggle{
    height:32px;
    min-width:34px;
    border:none;
    background:transparent;
  }
  .password-field--register .password-toggle:hover{
    background:rgba(var(--primary-rgb),.08);
  }
  .empty-state--register{
    min-height:min(52vh,420px);
    padding:48px 20px;
  }
  .search-ico{display:inline-flex;align-items:center;color:var(--muted)}
  .modal--register{
    border-radius:16px;
    border:1px solid rgba(var(--primary-rgb),.16);
    box-shadow:0 24px 56px rgba(26,43,46,.18);
  }
  .form--register{max-width:none;padding:0;gap:14px}
  .form--register .field-label{gap:6px;font-weight:600;color:var(--muted)}
  .form--register select.input{
    cursor:pointer;
    min-height:42px;
  }
  .modal-actions{
    display:flex;
    align-items:stretch;
    gap:10px;
    width:100%;
    margin-top:6px;
  }
  
  /* =========================================================
     39. MODALS / POPUPS
     Shared Tracked modal look (teal/white, soft shadow, blur).
     ========================================================= */
  .modal-overlay{
    position:fixed;
    inset:0;
    width:100vw;
    height:100vh;
    min-height:100%;
    z-index:2000;
    background:rgba(26,43,46,.42);
    backdrop-filter:blur(2px);
    -webkit-backdrop-filter:blur(2px);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    box-sizing:border-box;
  }
  .modal-overlay[hidden]{display:none !important}
  body.modal-open{overflow:hidden}
  .modal{
    width:min(520px,100%);
    max-height:calc(100vh - 40px);
    overflow:auto;
    background:#fff;
    border-radius:16px;
    border:1px solid rgba(var(--primary-rgb),.16);
    box-shadow:0 24px 56px rgba(26,43,46,.18);
    padding:26px 26px 24px;
    margin:auto;
  }
  .modal-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    margin-bottom:18px;
  }
  .modal-head h2{
    margin:0;
    font-size:1.25rem;
    font-weight:700;
    color:var(--primary-dark);
  }
  .modal-close{
    flex-shrink:0;
    width:36px;
    height:36px;
    border:none;
    background:transparent;
    border-radius:10px;
    display:grid;
    place-items:center;
    font-size:24px;
    line-height:1;
    cursor:pointer;
    color:#6b7280;
    padding:0;
    text-decoration:none;
    transition:background .12s, color .12s;
  }
  .modal-close:hover{
    background:rgba(var(--primary-rgb),.1);
    color:var(--brand-teal-dark);
  }
  .modal-intro{
    margin:0 0 16px;
    font-size:14px;
    font-weight:500;
    line-height:1.45;
    color:var(--muted,#6b7280);
  }
  .row.gap{gap:10px}

  /* Dedicated modal action buttons — Register Teacher is the visual source */
  .modal-btn-row,
  .login-forgot-actions,
  .confirm-modal-actions,
  .confirm-modal-actions--end,
  .modal-actions,
  .analytics-report-actions{
    display:flex;
    align-items:stretch;
    justify-content:stretch;
    gap:10px;
    width:100%;
    margin-top:6px;
  }
  .confirm-modal-actions,
  .confirm-modal-actions--end{
    margin-top:8px;
    margin-bottom:0;
  }
  .login-forgot-actions{
    margin-top:2px;
  }
  .analytics-report-actions{
    margin-top:14px;
    flex-shrink:0;
  }

  .modal-btn,
  .login-forgot-btn{
    appearance:none;
    -webkit-appearance:none;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    box-sizing:border-box;
    min-height:44px;
    padding:11px 16px;
    border-radius:12px;
    font:inherit;
    font-size:14px;
    font-weight:600;
    line-height:1.2;
    letter-spacing:0;
    text-align:center;
    text-decoration:none;
    cursor:pointer;
    transition:background .15s, border-color .15s, box-shadow .15s, color .15s;
  }
  a.modal-btn,
  a.login-forgot-btn{
    color:inherit;
  }
  .modal-btn-row > .modal-btn,
  .modal-btn-row > .login-forgot-btn,
  .login-forgot-actions > .modal-btn,
  .login-forgot-actions > .login-forgot-btn,
  .confirm-modal-actions > .modal-btn,
  .confirm-modal-actions > .login-forgot-btn,
  .confirm-modal-actions--end > .modal-btn,
  .confirm-modal-actions--end > .login-forgot-btn,
  .modal-actions > .modal-btn,
  .modal-actions > .login-forgot-btn,
  .analytics-report-actions > .modal-btn{
    flex:1 1 0;
    width:0;
    min-width:0;
  }
  .modal-btn--secondary,
  .login-forgot-btn--ghost{
    background:#fff;
    color:var(--login-ink,#1a2b2e);
    border:1.5px solid rgba(var(--primary-rgb),.28);
    box-shadow:none;
  }
  .modal-btn--secondary:hover,
  .login-forgot-btn--ghost:hover{
    background:var(--primary-light);
    border-color:rgba(var(--primary-rgb),.45);
    color:var(--login-ink,#1a2b2e);
  }
  .modal-btn--secondary:active,
  .login-forgot-btn--ghost:active{
    background:#dceaea;
    border-color:rgba(var(--primary-rgb),.55);
  }
  .modal-btn--primary,
  .login-forgot-btn--primary{
    background:var(--button);
    background-color:#0d6a72;
    color:#fff;
    border:1.5px solid transparent;
    box-shadow:0 8px 18px rgba(var(--primary-rgb),.22);
  }
  .modal-btn--primary:hover,
  .login-forgot-btn--primary:hover{
    background:var(--button-hover);
    background-color:#0a555c;
    color:#fff;
    border-color:transparent;
    box-shadow:0 10px 22px rgba(var(--primary-rgb),.28);
  }
  .modal-btn--primary:active,
  .login-forgot-btn--primary:active{
    background:var(--primary-dark);
    background-color:#084a50;
    box-shadow:0 4px 10px rgba(var(--primary-dark-rgb),.2);
  }
  .modal-btn:focus-visible,
  .login-forgot-btn:focus-visible{
    outline:2px solid var(--brand-teal);
    outline-offset:2px;
  }
  .modal-btn:disabled,
  .login-forgot-btn:disabled{
    opacity:.55;
    cursor:not-allowed;
    box-shadow:none;
  }

  /* Confirm dialogs (logout / delete) */
  .confirm-modal{
    width:min(420px,100%);
  }
  .confirm-modal-text{
    margin:0 0 18px;
    font-size:14px;
    font-weight:500;
    line-height:1.45;
    color:var(--muted,#6b7280);
  }
  .modal-overlay--viewport{
    inset:0;
    left:0;
    right:0;
    top:0;
    bottom:0;
    z-index:3200;
    align-items:center;
    justify-content:center;
  }

  /* ===== LOGIN ROLE SELECTION (Admin + Teacher) ===== */
  .login-role-select-modal{
    width:min(420px,100%);
  }
  .login-role-select-welcome{
    margin:0 0 6px;
    font-size:15px;
    font-weight:600;
    color:var(--login-ink,#1a2b2e);
  }
  .login-role-select-hint{
    margin:0 0 16px;
    font-size:13px;
    line-height:1.45;
  }
  .login-role-select-actions{
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  .login-role-select-actions form{margin:0}
  .login-role-select-btn{
    width:100%;
    justify-content:center;
  }
  .login-role-select-cancel{
    margin:14px 0 0;
    text-align:center;
    font-size:13px;
  }

  /* ===== LOGIN FORGOT PASSWORD MODAL ===== */
  .login-forgot-modal{
    width:min(420px,100%);
  }

  .login-forgot-title-wrap{
    display:flex;
    flex-direction:column;
    gap:6px;
    min-width:0;
  }

  .login-forgot-intro{
    margin:0;
    font-size:14px;
    font-weight:500;
    line-height:1.45;
    color:var(--muted,#6b7280);
  }

  .login-forgot-form{
    padding:0;
    max-width:none;
    gap:18px;
  }

  .login-forgot-field{
    display:flex;
    flex-direction:column;
    gap:7px;
    margin:0;
  }

  .login-forgot-label{
    font-size:13px;
    font-weight:600;
    color:var(--login-ink,#1a2b2e);
  }

  .login-forgot-form .login-input{
    width:100%;
  }

  .login-forgot-send{
    display:flex;
    width:100%;
    margin:2px 0 4px;
  }

  .login-forgot-send .modal-btn,
  .login-forgot-send .login-forgot-btn{
    width:100%;
    flex:1 1 auto;
    box-sizing:border-box;
  }

  .login-forgot-error{
    margin:0 0 14px;
    width:100%;
    padding:11px 14px;
    border-radius:10px;
    background:#f8eceb;
    color:var(--danger);
    border:1px solid #e8c9c6;
    font-size:13px;
    font-weight:500;
    text-align:center;
    line-height:1.4;
  }

  .login-forgot-success{
    margin:0;
    width:100%;
    box-sizing:border-box;
    padding:11px 14px;
    border-radius:10px;
    background:#edf8f2;
    color:#17633a;
    border:1px solid #b9ddc8;
    font-size:13px;
    font-weight:500;
    text-align:center;
    line-height:1.4;
  }

  .login-forgot-modal a.modal-close{
    text-decoration:none;
  }
  
  .folder-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
    gap:16px;
    padding:16px 18px 22px;
  }
  .folder-grid--categories{padding-top:0}
  .folder-card{
    display:flex;flex-direction:column;align-items:flex-start;gap:8px;
    padding:18px 16px;border-radius:14px;
    border:1px solid var(--border);
    background:linear-gradient(180deg,#fff 0%,#f8fcfb 100%);
    text-decoration:none;color:inherit;
    transition:box-shadow .15s,border-color .15s;
  }
  .folder-card:hover{
    border-color:var(--brand-teal);
    box-shadow:0 8px 24px rgba(var(--primary-rgb),.15);
  }
  .folder-icon{font-size:28px;line-height:1}
  .folder-name{font-weight:700;font-size:15px}
  .folder-meta{font-size:12px}
  .folder-empty{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    width:100%;
    min-height:min(52vh,420px);
    margin:0;
    padding:48px 20px;
    text-align:center;
    box-sizing:border-box;
  }
  
  /* ===== OVERALL COMPLIANCE ===== */
  /* ===== TOP 5 TEACHERS ===== */
  /* =========================================================
     41. DASHBOARD CHART LAYOUT
     ========================================================= */
  .charts--dashboard{margin-top:4px;gap:14px}
  .charts--analytics{
    margin-top:4px;
    gap:14px;
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:stretch;
  }
  .charts--analytics .chart--span-full{grid-column:1 / -1}
  .chart--canvas{
    padding:16px 16px 14px;
    border-radius:12px;
    border:1px solid rgba(var(--primary-rgb),.12);
    box-shadow:0 2px 8px rgba(15,61,66,.04);
    background:linear-gradient(180deg,#ffffff 0%,#f7fbfb 100%);
  }
  .chart-canvas-wrap{position:relative;height:240px}
  .chart-canvas-wrap--vbar{height:268px}
  .chart-canvas-wrap--trend{height:280px}
  .chart-canvas-wrap canvas{max-width:100%;display:block}
  .dashboard-analytics{margin-top:4px}
  @media (max-width:900px){
    .charts--dashboard{grid-template-columns:1fr}
    .charts--analytics{grid-template-columns:1fr}
  }

  /* =========================================================
     42. TOPBAR NOTIFICATION BELL / PROFILE MENU
     ========================================================= */
  .topbar-actions{display:flex;align-items:center;gap:10px;margin-left:auto;flex-shrink:0}
  .topbar-user-controls{
    position:relative;
    display:flex;
    align-items:center;
    gap:10px;
    flex-shrink:0;
  }
  .account-success{
    position:absolute;
    top:calc(100% + 8px);
    right:0;
    z-index:2600;
    display:flex;
    align-items:flex-start;
    gap:12px;
    width:min(360px, calc(100vw - 32px));
    max-width:360px;
    margin:0;
    padding:14px 16px;
    box-sizing:border-box;
    background:#ecfdf5;
    border:1px solid #86efac;
    border-radius:12px;
    box-shadow:0 10px 24px rgba(15,23,42,.08);
    pointer-events:auto;
    opacity:1;
    transform:translateY(0);
    transition:opacity .2s ease, transform .2s ease;
  }
  .account-success.is-leaving{
    opacity:0;
    transform:translateY(-6px);
    pointer-events:none;
  }
  .account-success-icon{
    flex:0 0 auto;
    width:28px;
    height:28px;
    border-radius:999px;
    display:grid;
    place-items:center;
    color:#16a34a;
    background:#16a34a;
  }
  .account-success-icon svg{
    display:block;
    color:#16a34a;
  }
  .account-success-copy{
    min-width:0;
    flex:1 1 auto;
  }
  .account-success-title{
    display:block;
    margin:0 0 4px;
    font-size:14px;
    font-weight:700;
    line-height:1.3;
    color:var(--brand-teal-dark,#084a50);
  }
  .account-success-message{
    margin:0;
    font-size:13px;
    font-weight:500;
    line-height:1.4;
    color:#166534;
  }
  @media (max-width:720px){
    .account-success{
      right:0;
      left:auto;
      width:min(360px, calc(100vw - 24px));
    }
  }
  .topbar-period-filters{display:flex;align-items:center;gap:8px;flex-shrink:0}
  .topbar-search-slot{display:flex;align-items:center;min-width:0}
  .topbar-search-slot:empty{display:none}
  .topbar-search-slot .search-form,
  .topbar-search-slot .search-form.register-search{
    display:flex;
    align-items:center;
    margin:0;
    width:280px;
    max-width:280px;
    flex:0 0 auto;
    flex-wrap:nowrap;
    gap:0;
  }
  body.app .topbar-search-slot .search,
  body.app .topbar-search-slot .search.search--grow,
  body.app .topbar-search-slot .register-search .search{
    display:flex;
    align-items:center;
    gap:8px;
    min-width:0;
    width:100%;
    flex:none;
    height:38px;
    min-height:38px;
    margin:0;
    padding:0 16px 0 14px;
    background:#fff;
    border:1px solid var(--border);
    border-radius:999px;
    box-shadow:none;
  }
  body.app .topbar-search-slot .search:focus-within,
  body.app .topbar-search-slot .register-search .search:focus-within{
    border-color:var(--brand-teal);
    box-shadow:0 0 0 3px rgba(var(--primary-rgb),.14);
  }
  body.app .topbar-search-slot .search-ico{
    color:var(--muted);
    display:inline-flex;
    align-items:center;
    flex-shrink:0;
    padding:0;
  }
  body.app .topbar-search-slot .search-ico svg{
    width:20px;
    height:20px;
    display:block;
  }
  body.app .topbar-search-slot .input--search,
  body.app .topbar-search-slot .register-search .input--search{
    border:none !important;
    box-shadow:none !important;
    background:transparent;
    padding:0;
    height:auto;
    font-size:13.5px;
    color:var(--text);
  }
  body.app .topbar-search-slot .input--search::placeholder{
    color:var(--muted);
    font-weight:400;
  }
  .toolbar--actions-end{justify-content:flex-end}
  .is-search-hidden,
  [data-smart-search-hide="1"]{display:none !important}
  mark.search-hit{
    background:#ffe08a;
    color:inherit;
    padding:0 1px;
    border-radius:2px;
    font:inherit;
    font-weight:700;
  }
  body.app .page .toolbar .search-form.register-search,
  body.app .page .compliance-search-bar .search-form.register-search{
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
  }
  .topbar-menu{position:relative}
  .topbar-bell{
    border:none;background:transparent;color:var(--brand-teal-deep);cursor:pointer;
    width:38px;height:38px;border-radius:0;display:grid;place-items:center;position:relative;
    box-shadow:none;
  }
  .topbar-bell:hover{background:transparent;border:none;color:var(--brand-teal)}
  .topbar-bell.has-unread::after{display:none}
  .topbar-avatar-btn{
    border:none;background:transparent;cursor:pointer;padding:0;
    width:38px;height:38px;border-radius:999px;
    display:grid;place-items:center;
  }
  .topbar-avatar-btn .avatar--profile{
    width:38px;height:38px;border-radius:999px;
    background:var(--brand-mint);border:2px solid rgba(var(--primary-rgb),.35);
    display:block;box-shadow:none;
  }
  .topbar-avatar-btn:hover .avatar--profile{border-color:var(--brand-teal);background:var(--primary-light)}
  .topbar-badge{
    position:absolute;top:-5px;right:-5px;z-index:2;
    min-width:18px;height:18px;padding:0 5px;
    border-radius:999px;background:var(--danger);color:#fff;
    border:2px solid #fff;font-size:10px;font-weight:700;
    line-height:1;display:inline-flex;align-items:center;justify-content:center;
    box-sizing:border-box;
  }
  .topbar-badge[hidden]{display:none !important}
  .topbar-notif-card{
    display:flex;gap:10px;padding:12px 14px;border-bottom:1px solid #f0f4f5;
    text-decoration:none;color:inherit;
  }
  .topbar-notif-card:hover{background:#f7fafb}
  .topbar-notif-card.is-unread{background:#f3fbfb}
  .topbar-notif-card.is-unread .topbar-notif-title{font-weight:700}
  .topbar-notif-card.is-read{opacity:.88}
  .topbar-notif-card.is-read .topbar-notif-dot{background:#cbd5e1;box-shadow:none}
  .notif-card.is-unread{
    border-color:rgba(var(--primary-rgb),.28);
    background:#f5fbfb;
  }
  .notif-card.is-read{opacity:.9}
  .notif-card.is-read .notif-dot{background:#cbd5e1;box-shadow:none}
  .topbar-dropdown{
    position:absolute;right:0;top:calc(100% + 8px);z-index:9999;
    background:#fff;border:1px solid var(--border);border-radius:12px;
    box-shadow:0 12px 28px rgba(17,24,39,.12);min-width:280px;overflow:hidden;
  }
  .topbar-dropdown--notif{width:min(340px,90vw)}
  .topbar-dropdown--profile{min-width:280px;width:288px;padding:0}
  .topbar-dropdown-head{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    padding:11px 14px;border-bottom:1px solid #eef0f3;font-size:14px;background:#f8fafb;
  }
  .topbar-dropdown-head a{color:var(--brand-teal);font-weight:600;text-decoration:none;font-size:13px}
  .topbar-dropdown-body{max-height:320px;overflow:auto}
  .topbar-empty{padding:22px 14px;text-align:center;margin:0}
  .topbar-notif-item{padding:12px 14px;border-bottom:1px solid #f3f4f6}
  .topbar-notif-title{font-weight:700;font-size:13px;margin-bottom:4px}
  .topbar-notif-body{font-size:12px;color:var(--muted);line-height:1.4}
  .topbar-notif-time{font-size:11px;color:var(--muted);margin-top:6px}
  .topbar-profile-info{
    display:flex;align-items:center;gap:12px;
    padding:14px 14px 12px;border-bottom:1px solid #eef0f3;background:#f6fbfb;
  }
  .topbar-profile-copy{min-width:0;flex:1}
  .topbar-profile-name{font-weight:700;font-size:14px;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .topbar-profile-email{font-size:12px;color:var(--muted);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .topbar-profile-role{
    display:inline-flex;margin-top:6px;padding:2px 8px;border-radius:999px;
    font-size:11px;font-weight:700;background:rgba(var(--primary-rgb),.12);color:var(--brand-teal-deep);
  }
  .topbar-profile-actions{display:flex;flex-direction:column;padding:6px}
  .topbar-switch-role{
    margin-top:4px;
    padding-top:8px;
    border-top:1px solid #eef0f3;
  }
  .topbar-switch-role-label{
    padding:4px 12px 6px;
    font-size:11px;
    font-weight:700;
    letter-spacing:.04em;
    text-transform:uppercase;
    color:var(--muted);
  }
  .topbar-dropdown-link{
    display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;
    text-decoration:none;color:var(--text);font-weight:600;font-size:13.5px;
  }
  .topbar-dropdown-link:hover{background:#f8fafc}
  .topbar-dropdown-link--danger{color:var(--red);margin-top:4px;border-top:1px solid #eef0f3;border-radius:0 0 10px 10px}
  .logo.logo--placeholder{
    background:var(--brand-mint);
    border:1px solid rgba(255,255,255,.55);
    box-shadow:none;
    color:transparent;
  }

  /* ===== QUICK ACTIONS ===== */
  /* =========================================================
     43. DASHBOARD / PAGE POLISH
     ========================================================= */
  .page-title--row{
    display:flex;align-items:center;justify-content:space-between;
    gap:16px;flex-wrap:wrap;margin-bottom:14px;
  }
  .page-title--row h1{margin-bottom:0}
  .page-title--row .quick-actions{margin:0;flex-shrink:0}
  .dashboard-grid{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:14px 16px;
    margin-bottom:var(--space-section);
    align-items:stretch;
  }
  .dashboard-submissions{
    grid-column:1 / 5;
    min-width:0;
    display:flex;
    flex-direction:column;
    align-self:stretch;
    height:100%;
    min-height:0;
  }
  .dashboard-submissions .table-wrap--scroll{
    flex:1 1 auto;
    min-height:320px;
    height:min(420px,48vh);
    max-height:min(420px,48vh);
    overflow:hidden;
    scrollbar-width:none;
    -ms-overflow-style:none;
  }
  .dashboard-submissions .table-wrap--scroll::-webkit-scrollbar{
    width:0;
    height:0;
    display:none;
  }
  .dashboard-submissions .table--dashboard{
    width:100%;
    min-width:720px;
  }
  .dashboard-submissions .table--dashboard.table--dashboard-lite,
  .dashboard-submissions .table--dashboard.table--dashboard-overview{
    min-width:0;
  }
  .dashboard-submissions .table-wrap--scroll:has(.table--dashboard-overview){
    overflow-x:hidden;
  }
  .dashboard-submissions .table--dashboard-overview{
    width:100%;
    table-layout:fixed;
  }
  .dashboard-submissions .table--dashboard-overview th,
  .dashboard-submissions .table--dashboard-overview td{
    padding:8px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .dashboard-submissions .table--dashboard th,
  .dashboard-submissions .table--dashboard td{
    padding:14px 16px;
    font-size:13.5px;
    white-space:nowrap;
  }
  .dashboard-submissions .table--dashboard-lite th,
  .dashboard-submissions .table--dashboard-lite td{
    white-space:normal;
    vertical-align:middle;
  }
  .dashboard-submissions .table--dashboard td.td-user{
    display:table-cell;
    vertical-align:middle;
  }
  .dashboard-submissions .table--dashboard .td-user-inner{
    display:inline-flex;
    align-items:center;
    gap:8px;
    white-space:nowrap;
  }
  .dashboard-submissions .table--dashboard td:last-child{
    white-space:normal;
    max-width:220px;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .dashboard-submissions .table--dashboard-lite td:last-child,
  .dashboard-submissions .table--dashboard-lite td.td-action{
    max-width:none;
    overflow:visible;
    text-overflow:clip;
    white-space:nowrap;
  }
  .dashboard-notifications{
    grid-column:5 / 6;
    min-width:0;
    display:flex;
    flex-direction:column;
    align-self:stretch;
    height:100%;
    min-height:0;
  }
  .dashboard-notifications .panel-head--row{
    gap:6px;
    align-items:center;
  }
  .dashboard-notifications .panel-head h2{
    font-size:1rem;
    line-height:1.25;
  }
  .dashboard-notifications .panel-head .btn,
  .dashboard-submissions .panel-head .btn{
    flex-shrink:0;
    padding:0 8px;
    height:30px;
    font-size:12px;
    font-weight:600;
    color:#fff;
    border-color:var(--brand-teal);
    background:var(--brand-teal);
  }
  .dashboard-notifications .scroll-panel--notifications{
    flex:1 1 auto;
    min-height:320px;
    height:min(420px,48vh);
    max-height:min(420px,48vh);
    overflow:hidden;
    display:flex;
    flex-direction:column;
    scrollbar-width:none;
    -ms-overflow-style:none;
  }
  .dashboard-notifications .scroll-panel--notifications::-webkit-scrollbar{
    width:0;
    height:0;
    display:none;
  }
  .dashboard-notifications .notif-stack{
    gap:8px;
    padding:10px 10px 12px;
  }
  .dashboard-notifications .notif-card--compact{
    padding:10px 10px;
    gap:5px;
  }
  .dashboard-notifications .notif-card-title{
    font-size:12.5px;
    font-weight:700;
    margin-bottom:2px;
    line-height:1.3;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  .dashboard-notifications .notif-card-body{
    font-size:12px;
    line-height:1.4;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  .dashboard-notifications .notif-time{
    display:block;
    margin-top:2px;
    font-size:11px;
  }
  .dashboard-notifications .notif-empty{
    flex:1 1 auto;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:0;
    padding:28px 10px;
  }
  .dashboard-notifications .notif-empty .muted{
    margin:0;
    font-size:12.5px;
    line-height:1.4;
  }
  .dashboard-notifications .panel-head,
  .dashboard-submissions .panel-head{padding-bottom:8px}
  @media (max-width:1200px){
    .dashboard-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
    .dashboard-submissions{grid-column:1 / 3}
    .dashboard-notifications{grid-column:3 / 4}
  }
  @media (max-width:1100px){
    .dashboard-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .dashboard-submissions,
    .dashboard-notifications{grid-column:1 / -1}
  }
  @media (max-width:640px){
    .dashboard-grid{grid-template-columns:1fr}
  }
  .dashboard-panels{
    align-items:stretch;
    margin-bottom:var(--space-section);
  }
  .quick-actions{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
  .dashboard-toolbar{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:12px 16px;
    flex-wrap:wrap;
    margin:0 0 16px;
  }
  .dashboard-toolbar .quick-actions{margin:0}
  .dashboard-period-filters{
    display:flex;
    align-items:center;
    gap:8px;
    margin-left:auto;
    flex-shrink:0;
  }
  .dashboard-period-filters .shared-drive-filter-select{
    min-width:148px;
    height:36px;
    padding:6px 32px 6px 12px;
  }
  .qa-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:36px;padding:0 12px}
  .qa-ico{
    width:20px;
    height:20px;
    flex:0 0 20px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    line-height:0;
  }
  .qa-ico svg{
    width:20px;
    height:20px;
    display:block;
    flex:0 0 auto;
  }
  .panel-head--row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
  .kpi.kpi--solid{
    background:var(--primary-light);
    border:1px solid rgba(var(--primary-rgb),.18);
    color:var(--text);
    box-shadow:none;
    border-radius:12px;
    padding:22px 18px;
    min-height:108px;
  }
  .kpi.kpi--solid .kpi-label{color:var(--muted)}
  .kpi.kpi--solid .kpi-value{color:var(--text)}
  .kpi.kpi--solid.kpi--completed{
    background:var(--status-completed-bg);
    border-color:#b7dfc8;
  }
  .kpi.kpi--solid.kpi--completed .kpi-label{color:var(--status-completed)}
  .kpi.kpi--solid.kpi--completed .kpi-value{color:var(--status-completed)}
  .kpi.kpi--solid.kpi--pending{
    background:var(--status-pending-bg);
    border-color:#f0e0a8;
  }
  .kpi.kpi--solid.kpi--pending .kpi-label{color:var(--status-pending)}
  .kpi.kpi--solid.kpi--pending .kpi-value{color:var(--status-pending)}
  .kpi.kpi--solid.kpi--overdue{
    background:var(--status-overdue-bg);
    border-color:#f0c7c3;
  }
  .kpi.kpi--solid.kpi--overdue .kpi-label{color:var(--status-overdue)}
  .kpi.kpi--solid.kpi--overdue .kpi-value{color:var(--status-overdue)}
  .kpi.kpi--solid.kpi--discrepancy{
    background:var(--status-discrepancy-bg);
    border-color:#f0d2b0;
  }
  .kpi.kpi--solid.kpi--discrepancy .kpi-label{color:var(--status-discrepancy)}
  .kpi.kpi--solid.kpi--discrepancy .kpi-value{color:var(--status-discrepancy)}
  .kpi.kpi--solid.kpi--soft-teal,
  .kpi.kpi--solid.kpi--total{
    background:var(--primary-light);
    border-color:rgba(var(--primary-rgb),.18);
  }
  .kpi.kpi--solid.kpi--soft-teal .kpi-label,
  .kpi.kpi--solid.kpi--total .kpi-label{color:var(--muted)}
  .kpi.kpi--solid.kpi--soft-teal .kpi-value,
  .kpi.kpi--solid.kpi--total .kpi-value{color:var(--text)}
  .kpi.kpi--solid.kpi--soft-blue{background:#e8f0f6;border-color:#c5d6e6}
  .kpi.kpi--solid.kpi--soft-purple{background:#efeaf6;border-color:#d4cce4}
  .kpi.kpi--solid.kpi--soft-amber{background:var(--status-pending-bg);border-color:#f0e0a8}
  a.kpi.kpi--solid{
    text-decoration:none;
    color:var(--text);
    cursor:pointer;
  }
  a.kpi.kpi--solid:visited,
  a.kpi.kpi--solid:hover,
  a.kpi.kpi--solid:focus{
    color:var(--text);
    text-decoration:none;
  }
  a.kpi.kpi--solid:hover{
    box-shadow:0 4px 12px rgba(27,44,48,.10);
  }
  a.kpi.kpi--solid:focus-visible{
    outline:2px solid var(--primary);
    outline-offset:2px;
  }

  .page > .toolbar,
  .page > .page-controls,
  .page > .subtabs,
  .page > .stat-boxes,
  .page > .grid.kpis,
  .page > .quick-actions,
  .page > .dashboard-toolbar{margin-bottom:0}
  .page > .panel-intro{margin-bottom:14px}
  .page .card.panel + .card.panel,
  .page .card.chart + .card.chart{margin-top:0}
  .page .grid.two,
  .page .grid.charts,
  .page .grid.kpis{margin-bottom:0}
  .form.form--narrow{padding:16px 18px 20px}
  .toolbar--between{gap:12px}
  .stat-boxes{margin-bottom:0}
  
  /* =========================================================
     44. COMPLIANCE SUBTABS
     ========================================================= */
  .subtabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px}
  .subtab{
    border:1px solid var(--border);background:#fff;padding:9px 14px;border-radius:var(--radius-md);
    font-weight:700;text-decoration:none;color:inherit;font-size:14px;
    transition:background .15s, color .15s, border-color .15s;
  }
  .subtab.is-active{background:var(--brand-teal);color:#fff;border-color:transparent;box-shadow:0 4px 12px rgba(var(--primary-rgb),.24)}
  
  /* =========================================================
     45. FOLDER CARD ACTIONS
     ========================================================= */
  /* Folder card with More button */
  .folder-card--row{display:flex;flex-direction:column;gap:12px;min-height:120px}
  .folder-card-top{display:flex;align-items:center;gap:10px}
  .folder-card-actions{margin-top:auto;display:flex;justify-content:flex-end}
  .folder-card .btn{text-decoration:none}
  
  /* =========================================================
     46. SHARED FILES STATISTICS
     ========================================================= */
  /* Shared files stats — match KPI solid cards */
  .stat-boxes{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:var(--space-section)}
  @media (max-width:900px){.stat-boxes{grid-template-columns:repeat(2,1fr)}}
  .stat-box,
  .stat-boxes .card.stat-box{
    padding:18px 16px;
    background:var(--brand-teal);
    border:none;
    border-radius:var(--radius-lg);
    color:#fff;
    box-shadow:0 8px 22px rgba(var(--primary-rgb),.28);
    text-align:left;
  }
  .stat-box-value{font-size:1.85rem;font-weight:800;color:#fff;margin-top:8px;line-height:1.1}
  .stat-box-label{font-size:13px;font-weight:600;color:rgba(255,255,255,.92);letter-spacing:.01em}
  .chart .stat-boxes .stat-box{padding:14px 14px}
  .chart .stat-boxes .stat-box-value{font-size:1.5rem;margin-top:6px}
  .chart .stat-boxes .stat-box-label{font-size:12px}
  .chart-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:6px}
  .chart-card-head h3{margin:0;font-size:.95rem;font-weight:700;color:var(--text)}
  .chart-caption{margin:0 0 10px;font-size:12.5px}
  .empty-state,
  .empty-state--register{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    width:100%;
    min-height:min(52vh,420px);
    margin:0 auto;
    padding:48px 20px;
    text-align:center;
    color:var(--muted);
    box-sizing:border-box;
  }
  .folder-grid:has(> .folder-empty),
  .folder-grid:has(> .empty-state:not([hidden])),
  .folder-grid--teacher-files:has(> .folder-empty),
  .folder-grid--teacher-files:has(> .empty-state:not([hidden])),
  .shared-drive-grid:has(> .empty-state:not([hidden])){
    display:flex !important;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    width:100%;
    min-height:min(52vh,420px);
  }
  .folder-grid > .folder-empty,
  .folder-grid > .empty-state,
  .folder-grid--teacher-files > .folder-empty,
  .folder-grid--teacher-files > .empty-state,
  .shared-drive-grid > .empty-state{
    grid-column:1 / -1;
    width:100%;
    min-height:0;
    flex:1 1 auto;
  }
  .table-wrap:has(tr.is-empty-row:not([hidden])),
  .notice-mgmt-table-wrap:has(tr.is-empty-row:not([hidden])){
    display:flex;
    flex-direction:column;
    min-height:min(52vh,420px);
  }
  .table-wrap:has(tr.is-empty-row:not([hidden])) > table,
  .notice-mgmt-table-wrap:has(tr.is-empty-row:not([hidden])) > table{
    height:100%;
    flex:1 1 auto;
  }
  tr.is-empty-row:not([hidden]){height:100%}
  tr.is-empty-row:not([hidden]) > td{
    height:min(46vh,360px);
    text-align:center !important;
    vertical-align:middle !important;
    padding:48px 20px !important;
  }
  tr.is-empty-row:not([hidden]) > td .empty-state,
  tr.is-empty-row:not([hidden]) > td > .muted{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    min-height:min(40vh,320px);
    width:100%;
    text-align:center;
    box-sizing:border-box;
  }
  .empty-state-ico{font-size:42px;opacity:.5;margin-bottom:10px}
  .days-passed{font-size:12px;font-weight:700;color:var(--amber)}
  .form-placeholder{
    border:2px dashed var(--border);border-radius:14px;padding:18px;background:#f9fafb;margin-top:10px;
  }

  /* =========================================================
     47. ADMIN PERMISSION CHECKBOXES (Create/Edit Admin)
     ========================================================= */
  .admin-perm-box{margin:4px 0 8px}
  .admin-perm-hint{margin:0 0 10px;font-size:13px}
  .admin-perm-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px}
  .admin-perm-group{
    border:1px solid var(--border);border-radius:10px;padding:10px 12px;background:#f8fbfb
  }
  .admin-perm-group-title{font-size:12px;font-weight:700;color:var(--text-secondary);margin-bottom:6px}
  .admin-perm-item{display:flex;align-items:flex-start;gap:8px;font-size:13px;margin:4px 0}
  .admin-perm-item input{margin-top:2px}
  @media (max-width:720px){
    .admin-perm-grid{grid-template-columns:1fr}
  }