/* =========================================================
   01. GLOBAL COLOR VARIABLES / DESIGN TOKENS
   Change colors, spacing, radius, and shadows here.
   ========================================================= */
   :root{
    --brand-teal:#008F96;
    --brand-teal-dark:#007880;
    --brand-teal-deep:#006b72;
    --brand-teal-soft:rgba(0,143,150,.22);
    --brand-mint:#b8e8ea;
    --bg:#eef2f3;
    --sidebar:var(--brand-teal);
    --sidebar-ink:#f3f4f6;
    --card:#ffffff;
    --border:rgba(0,143,150,.2);
    --text:#1a2b2e;
    --muted:#6b7280;
    --blue:var(--brand-teal);
    --blue-600:var(--brand-teal-dark);
    --red:#ef4444;
    --green:#16a34a;
    --purple:#a855f7;
    --amber:#d97706;
    --radius-sm:10px;
    --radius-md:12px;
    --radius-lg:16px;
    --radius-xl:18px;
    --shadow-card:0 6px 20px rgba(0,143,150,.08);
    --shadow-card-hover:0 8px 24px rgba(0,143,150,.12);
    --space-section:20px;
    --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;
    background:var(--sidebar);
    color:var(--sidebar-ink);
    padding:16px 12px 14px;
    display:flex;
    flex-direction:column;
    gap:12px;
  }
  .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:#fff;border:1px solid rgba(255,255,255,.45);
    overflow:hidden;display:grid;place-items:center;flex-shrink:0;
  }
  .logo.logo--brand{background:#fff;border:1px solid rgba(255,255,255,.55);padding:4px}
  .logo-img{width:100%;height:100%;object-fit:contain;display:block;border-radius:8px}
  .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:20px;height:20px;display:grid;place-items:center;flex-shrink:0;opacity:.92}
  .nav-ico svg{width:20px;height:20px;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{
    margin-top:8px;
    border:1px solid rgba(255,255,255,.22);
    text-align:left;
    color:rgba(255,255,255,.88);
  }
  .nav-link.logout:hover{background:rgba(0,0,0,.14);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(0,143,150,.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)}
  
  /* =========================================================
     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(0,143,150,.15);background:#fff}
  body.app .input{
    background:#fff;
    border:1.5px solid rgba(0,143,150,.45);
    border-radius:10px;
  }
  body.app .input:focus{
    border-color:var(--brand-teal);
    box-shadow:0 0 0 3px rgba(0,143,150,.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(--blue);border-color:transparent;color:#fff;box-shadow:0 2px 8px rgba(0,143,150,.2)}
  .btn-primary:hover{background:var(--blue-600)}
  body.app .btn-primary{box-shadow:0 2px 8px rgba(0,143,150,.2)}
  .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(0,143,150,.28)}
  .btn-danger{
    background:#fff;border:1px solid #fecaca;color:#b91c1c;font-weight:600;box-shadow:none;
  }
  .btn-danger:hover{background:#fef2f2;border-color:#f87171}
  .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--dashboard .td-user{gap:8px}
  .table tbody tr:hover td{background:#fafcfc}
  .td-user{display:flex;align-items:center;gap:10px}

  /* =========================================================
     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{background:#fff7ed;color:#c2410c;border:1px solid #ffedd5}
  .pill-pending{background:#eff6ff;color:#1d4ed8;border:1px solid #bfdbfe}
  .pill-overdue{background:#fef2f2;color:#b91c1c;border:1px solid #fecaca}
  .pill-purple{background:#f3e8ff;color:#7c3aed}
  .pill-ok{background:#ecfdf5;color:#047857;border:1px solid #d1fae5}
  
  /* =========================================================
     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(0,143,150,.55);box-shadow:0 0 0 2px rgba(0,143,150,.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:12px 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 .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(0,143,150,.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:linear-gradient(90deg,var(--brand-teal),var(--brand-teal-dark));border-radius:999px;
    transition:width .25s ease;
  }
  
  .doc-meta{margin:0;font-size:13px}
  
  /* ===== LOGIN PAGE ===== */
  .login-page{
    --login-ink:#1a2b2e;
    --login-placeholder:#8b979a;
    --login-panel:#008F96;
    --login-panel-deep:#006b72;
    min-height:100vh;
    margin:0;
    position:relative;
    overflow-x:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:clamp(16px,3vw,36px);
    background:linear-gradient(165deg,#e9f6f7 0%,#f4f7f8 50%,#eef2f3 100%);
    font-family:var(--font-sans);
    color:var(--login-ink);
  }

  .login-backdrop{
    position:fixed;
    inset:0;
    z-index:0;
    pointer-events:none;
    background:
      radial-gradient(ellipse 65% 45% at 8% 15%, rgba(0,143,150,.11), transparent 55%),
      radial-gradient(ellipse 55% 40% at 92% 85%, rgba(0,107,114,.07), transparent 50%);
  }

  .login-frame{
    position:relative;
    z-index:1;
    width:min(960px,100%);
    background:#fff;
    border-radius:18px;
    overflow:hidden;
    border:1px solid rgba(0,143,150,.14);
    box-shadow:0 22px 56px rgba(26,43,46,.11);
  }

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

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

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

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

  .login-logo{
    object-fit:contain;
    display:block;
    flex-shrink:0;
    background:#fff;
  }

  .login-logo--school,
  .login-logo--department{
    width:72px;
    height:72px;
    border-radius:999px;
    border:1px solid rgba(0,143,150,.2);
    padding:2px;
  }

  .login-logo--tracked{
    width:104px;
    height:104px;
    border-radius:999px;
    background:#fff;
    border:3px solid rgba(255,255,255,.7);
    box-shadow:0 10px 28px rgba(0,0,0,.16);
    padding:6px;
  }

  .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:linear-gradient(165deg,var(--login-panel) 0%,var(--login-panel-deep) 100%);
    color:#fff;
    padding:clamp(36px,5vw,52px) clamp(28px,4vw,44px);
    position:relative;
  }

  .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;
  }

  .login-brand{
    position:relative;
    z-index:1;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
    max-width:26rem;
  }

  .login-kicker{
    margin:4px 0 0;
    font-size:11px;
    font-weight:600;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:rgba(255,255,255,.8);
  }

  .login-heading{
    margin:0;
    font-size:clamp(2rem,3.8vw,2.5rem);
    font-weight:700;
    letter-spacing:.1em;
    color:#fff;
    line-height:1.05;
  }

  .login-tagline{
    margin:0;
    font-size:14px;
    line-height:1.55;
    font-weight:500;
    color:rgba(255,255,255,.9);
    max-width:22rem;
  }

  .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(0,143,150,.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-eye{
    position:absolute;
    right:6px;
    top:50%;
    transform:translateY(-50%);
    width:38px;
    height:38px;
    border:none;
    background:transparent;
    cursor:pointer;
    color:var(--brand-teal);
    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:20px;
    height:20px;
  }

  .login-eye:hover{
    background:rgba(0,143,150,.1);
    color:var(--brand-teal-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(0,143,150,.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;
  }

  .login-role-native{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
    opacity:0;
    pointer-events:none;
  }

  .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(0,143,150,.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(0,143,150,.16);
  }

  .login-role-menu{
    position:absolute;
    left:0;
    right:0;
    top:calc(100% + 6px);
    z-index:20;
    margin:0;
    padding:6px;
    list-style:none;
    background:#fff;
    border:1.5px solid rgba(0,143,150,.28);
    border-radius:12px;
    box-shadow:0 12px 28px rgba(26,43,46,.12), 0 2px 8px rgba(0,143,150,.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(0,143,150,.1);
    color:var(--login-ink);
  }

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

  .login-role-option[aria-selected="true"]{
    background:rgba(0,143,150,.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(0,143,150,.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:0 10px 24px rgba(0,143,150,.28);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    transition:background .15s, box-shadow .15s, transform .08s;
  }

  .login-submit:hover{
    background:var(--brand-teal-dark);
    box-shadow:0 12px 28px rgba(0,120,128,.3);
  }

  .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:#6b7280;
    line-height:1.45;
  }

  .login-flash{
    margin:0;
    width:100%;
    padding:11px 14px;
    border-radius:10px;
    background:#fef2f2;
    color:#991b1b;
    border:1px solid #fecaca;
    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:88px;
      height:88px;
    }

    .login-heading{font-size:1.9rem}
    .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--school,
    .login-logo--department{width:56px;height:56px}
    .login-institution-name{font-size:13px}
    .login-institution-dept{font-size:11px}
  }

  /* 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(0,143,150,.14);
    box-shadow:0 22px 56px rgba(26,43,46,.11);
    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}
  
  /* =========================================================
     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:ui-monospace,monospace;font-size:13px}
  .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;
  }
  .register-toolbar{
    margin:0;
    gap:12px;
    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:44px;
    padding:0 18px;
    flex-shrink:0;
    white-space:nowrap;
    border-radius:10px;
    font-size:14px;
  }
  .register-primary-btn .qa-ico{
    width:16px;height:16px;display:grid;place-items:center;
  }
  .register-primary-btn .qa-ico svg{width:16px;height:16px;display:block}
  .register-search .search{
    width:100%;
    margin:0;
    padding:0 14px;
    min-height:44px;
    height:44px;
    border:1.5px solid rgba(0,143,150,.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(0,143,150,.14);
  }
  .register-search .input--search{
    border:none !important;
    box-shadow:none !important;
    background:transparent;
    padding:10px 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-panel .panel-head{
    padding:16px 18px 10px;
  }
  .register-panel-sub{margin:4px 0 0;font-size:13px}
  .table-wrap--register{
    overflow-x:auto;
    max-height:none;
  }
  .table--register{
    table-layout:fixed;
    width:100%;
  }
  .table--register th,
  .table--register td{
    padding:14px 16px;
    vertical-align:middle;
  }
  .table--register thead th{
    background:#f7f9fa;
  }
  .table--register th.th-num,
  .table--register td.td-num{
    width:52px;
    color:var(--muted);
    text-align:left;
  }
  .table--register th.th-name{width:22%}
  .table--register th.th-email{width:24%}
  .table--register th.th-password{width:28%}
  .table--register th.th-actions,
  .table--register td.td-actions{
    width:170px;
    text-align:right;
    white-space:nowrap;
  }
  .table--register .td-user{
    font-weight:600;
    gap:10px;
  }
  .table--register .td-email{
    word-break:break-word;
  }
  .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(0,143,150,.08);
  }
  .empty-state--register{
    padding:36px 20px;
  }
  .search-ico{display:inline-flex;align-items:center;color:var(--muted)}
  .modal--register{
    border-radius:16px;
    border:1px solid rgba(0,143,150,.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)}
  .modal-actions{margin-top:6px;gap:8px}
  
  /* =========================================================
     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(0,143,150,.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(--login-ink,#1a2b2e);
  }
  .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(0,143,150,.1);
    color:var(--brand-teal-dark,#006b72);
  }
  .modal-intro{
    margin:0 0 16px;
    font-size:14px;
    font-weight:500;
    line-height:1.45;
    color:var(--muted,#6b7280);
  }
  .row.gap{gap:10px}

  /* Modal action buttons — match login forgot modal */
  .modal .btn,
  .modal .login-forgot-btn{
    appearance:none;
    border-radius:12px;
    padding:11px 16px;
    font:inherit;
    font-size:14px;
    font-weight:600;
    cursor:pointer;
    transition:background .15s, border-color .15s, box-shadow .15s, color .15s;
  }
  .modal .btn{
    background:#fff;
    color:var(--login-ink,#1a2b2e);
    border:1.5px solid rgba(0,143,150,.28);
    box-shadow:none;
  }
  .modal .btn:hover{
    background:#f4fbfb;
    border-color:rgba(0,143,150,.45);
  }
  .modal .btn-primary{
    background:var(--brand-teal,#008F96);
    color:#fff;
    border:1.5px solid transparent;
    box-shadow:0 8px 18px rgba(0,143,150,.22);
  }
  .modal .btn-primary:hover{
    background:var(--brand-teal-dark,#006b72);
    box-shadow:0 10px 22px rgba(0,120,128,.28);
    color:#fff;
  }
  .modal .btn:focus-visible,
  .modal .login-forgot-btn:focus-visible{
    outline:2px solid var(--brand-teal,#008F96);
    outline-offset:2px;
  }

  /* 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);
  }
  .confirm-modal-actions{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:10px;
    margin:0;
  }

  /* ===== 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-actions{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:10px;
    margin-top:2px;
  }

  .login-forgot-btn--ghost{
    background:#fff;
    color:var(--login-ink,#1a2b2e);
    border:1.5px solid rgba(0,143,150,.28);
  }

  .login-forgot-btn--ghost:hover{
    background:#f4fbfb;
    border-color:rgba(0,143,150,.45);
  }

  .login-forgot-btn--primary{
    background:var(--brand-teal,#008F96);
    color:#fff;
    border:1.5px solid transparent;
    box-shadow:0 8px 18px rgba(0,143,150,.22);
  }

  .login-forgot-btn--primary:hover{
    background:var(--brand-teal-dark,#006b72);
    box-shadow:0 10px 22px rgba(0,120,128,.28);
  }
  
  .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(0,143,150,.15);
  }
  .folder-icon{font-size:28px;line-height:1}
  .folder-name{font-weight:700;font-size:15px}
  .folder-meta{font-size:12px}
  .folder-empty{padding:18px}
  
  /* ===== OVERALL COMPLIANCE ===== */
  /* ===== TOP 5 TEACHERS ===== */
  /* =========================================================
     41. DASHBOARD CHART LAYOUT
     ========================================================= */
  .charts--dashboard{margin-top:4px;gap:14px}
  .chart--canvas{
    padding:16px 16px 14px;
    border-radius:12px;
    border:1px solid rgba(0,143,150,.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 canvas{max-width:100%}
  .dashboard-analytics{margin-top:4px}
  @media (max-width:900px){
    .charts--dashboard{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-menu{position:relative}
  .topbar-bell{
    border:1px solid var(--border);background:#fff;color:var(--brand-teal-deep);cursor:pointer;
    width:38px;height:38px;border-radius:10px;display:grid;place-items:center;position:relative;
    box-shadow:none;
  }
  .topbar-bell:hover{background:#f7fafb;border-color:rgba(0,143,150,.28)}
  .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(0,143,150,.35);
    display:block;box-shadow:none;
  }
  .topbar-avatar-btn:hover .avatar--profile{border-color:var(--brand-teal);background:#a8dfe2}
  .topbar-badge{
    position:absolute;top:-5px;right:-5px;z-index:2;
    min-width:18px;height:18px;padding:0 5px;
    border-radius:999px;background:#ef4444;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(0,143,150,.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:240px}
  .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{padding:14px;border-bottom:1px solid #eef0f3}
  .topbar-profile-name{font-weight:700}
  .topbar-profile-email,.topbar-profile-role{font-size:12px;color:var(--muted);margin-top:2px}
  .topbar-dropdown-link{
    display:block;padding:11px 14px;text-decoration:none;color:var(--text);font-weight:600;font-size:14px;
  }
  .topbar-dropdown-link:hover{background:#f8fafc}
  .topbar-dropdown-link--danger{color:var(--red)}
  .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;
  }
  .dashboard-submissions .table-wrap--scroll{
    flex:1 1 auto;
    min-height:280px;
    max-height:min(420px,48vh);
    overflow:auto;
  }
  .dashboard-submissions .table--dashboard{
    width:100%;
    min-width:720px;
  }
  .dashboard-submissions .table--dashboard th,
  .dashboard-submissions .table--dashboard td{
    padding:14px 16px;
    font-size:13.5px;
    white-space:nowrap;
  }
  .dashboard-submissions .table--dashboard td:last-child{
    white-space:normal;
    max-width:220px;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .dashboard-notifications{
    grid-column:5 / 6;
    min-width:0;
    display:flex;
    flex-direction:column;
  }
  .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{
    flex-shrink:0;
    padding:0 8px;
    height:30px;
    font-size:12px;
  }
  .dashboard-notifications .scroll-panel--notifications{
    flex:1 1 auto;
    max-height:min(420px,48vh);
    min-height:280px;
    overflow:auto;
  }
  .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{
    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}
  .qa-btn{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px}
  .qa-ico{width:15px;height:15px;display:grid;place-items:center}
  .qa-ico svg{width:15px;height:15px;display:block}
  .panel-head--row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
  .kpi.kpi--solid{
    background:var(--brand-teal);
    border:none;
    color:#fff;
    box-shadow:0 6px 18px rgba(0,143,150,.22);
    border-radius:12px;
    padding:22px 18px;
    min-height:108px;
  }
  .kpi.kpi--solid .kpi-label{color:rgba(255,255,255,.92)}
  .kpi.kpi--solid .kpi-value{color:#fff}

  .page > .toolbar,
  .page > .subtabs,
  .page > .stat-boxes,
  .page > .grid.kpis,
  .page > .quick-actions{margin-bottom:var(--space-section)}
  .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:4px}
  .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(0,143,150,.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 / STATUS REPORT STATISTICS
     ========================================================= */
  /* Shared files + status report 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(0,143,150,.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{padding:48px 20px;text-align:center;color:var(--muted)}
  .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;
  }