/* DAGAMAS Portal — Main Stylesheet */
:root{
  --green:#1a6b4a;--green2:#2e8d66;--greenl:#e6f4ef;--glow:#43c48a;
  --forest:#0d3d29;--gold:#c9962a;--goldl:#fdf3dc;--white:#fff;
  --surface:#f7faf8;--border:#daeee6;--text:#12241c;--muted:#5a7a6c;
  --danger:#d9534f;--info:#2e7bbf;--purple:#7c3aed;--accent:#1e80c8;
  --r:12px;--sh:0 2px 12px rgba(26,107,74,.10);--shl:0 8px 32px rgba(26,107,74,.16);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'DM Sans',sans-serif;background:var(--surface);color:var(--text);}

/* ── LOGIN ── */
#login-screen{position:fixed;inset:0;background:linear-gradient(135deg,var(--forest) 0%,#0e2d4a 100%);display:none;align-items:center;justify-content:center;z-index:9999;}
.login-split{display:flex;width:900px;max-width:100%;min-height:540px;border-radius:24px;overflow:hidden;box-shadow:0 32px 100px rgba(0,0,0,.45);}
/* — Brand panel — */
.login-brand{flex:1;background:linear-gradient(160deg,var(--forest) 0%,#1a4a6b 100%);display:flex;align-items:center;justify-content:center;padding:48px 40px;position:relative;overflow:hidden;}
.login-brand::before{content:'';position:absolute;inset:-60px;background:radial-gradient(circle at 30% 50%,rgba(67,196,138,.18) 0%,transparent 60%);pointer-events:none;}
.login-brand-inner{position:relative;z-index:1;color:#fff;text-align:center;}
.login-mark-lg{width:80px;height:80px;border-radius:20px;background:linear-gradient(135deg,var(--glow),#1a6b4a);display:flex;align-items:center;justify-content:center;font-family:'Sora',sans-serif;font-weight:800;font-size:32px;color:#fff;margin:0 auto 20px;box-shadow:0 8px 32px rgba(67,196,138,.35);overflow:hidden;}
.login-mark-lg img{width:100%;height:100%;object-fit:cover;border-radius:inherit;}
.login-brand-eyebrow{font-size:11.5px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;opacity:.7;margin-bottom:8px;}
.login-brand-title{font-family:'Sora',sans-serif;font-size:19px;font-weight:800;letter-spacing:.2px;line-height:1.35;margin-bottom:28px;max-width:320px;margin-left:auto;margin-right:auto;}
.login-brand-sub{font-size:12px;opacity:.65;margin-bottom:28px;line-height:1.6;}
.login-brand-pills{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;}
.login-pill{padding:6px 16px;border-radius:20px;font-size:11.5px;font-weight:600;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);color:#fff;letter-spacing:.3px;}
/* — Form panel — */
.login-form-panel{flex:1;background:#fff;display:flex;align-items:center;justify-content:center;padding:48px 44px;}
.login-form-inner{width:100%;}
.login-form-header{display:flex;align-items:center;gap:14px;margin-bottom:28px;}
.login-form-mark{width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,var(--glow),var(--green));display:flex;align-items:center;justify-content:center;font-family:'Sora',sans-serif;font-weight:800;font-size:17px;color:#fff;flex-shrink:0;overflow:hidden;}
.login-form-mark img{width:100%;height:100%;object-fit:cover;border-radius:inherit;}
.login-h{font-family:'Sora',sans-serif;font-size:20px;font-weight:800;margin-bottom:2px;}
/* — Footer link buttons — */
.login-links{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:22px;}
.login-link-btn{
  display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border-radius:10px;
  font-size:12px;font-weight:600;color:var(--text);background:var(--surface);
  border:1px solid var(--border);text-decoration:none;letter-spacing:.1px;
  transition:border-color .15s,background .15s,color .15s,transform .15s;
}
.login-link-btn:hover{border-color:var(--green);color:var(--green);background:var(--greenl);transform:translateY(-1px);}
.login-link-btn-accent{border-color:rgba(201,150,42,.35);color:var(--gold);background:var(--goldl);}
.login-link-btn-accent:hover{border-color:var(--gold);background:#fbecc7;color:var(--gold);}
.login-p{font-size:12.5px;color:var(--muted);}
.fl{font-size:12px;font-weight:600;color:var(--muted);display:block;margin-bottom:5px;}
.fi{width:100%;padding:10px 14px;border:1.5px solid var(--border);border-radius:8px;font-size:13.5px;font-family:inherit;outline:none;margin-bottom:14px;transition:border-color .15s;}
.fi:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(26,107,74,.08);}
.login-btn{width:100%;padding:13px;border:none;border-radius:10px;background:linear-gradient(135deg,var(--green2),var(--green));color:#fff;font-size:15px;font-weight:700;cursor:pointer;font-family:inherit;letter-spacing:.3px;transition:opacity .15s;}
.login-btn:hover{opacity:.9;}
.login-btn:disabled{opacity:.6;cursor:default;}
.login-err{color:var(--danger);font-size:12.5px;margin-bottom:14px;display:none;padding:9px 13px;background:#fdecea;border-radius:8px;border-left:3px solid var(--danger);}
.login-links{margin-top:16px;text-align:center;}
/* — Legacy compat — */
.login-card{background:#fff;border-radius:20px;padding:40px 44px;width:480px;max-width:100%;box-shadow:0 24px 80px rgba(0,0,0,.3);}
.login-mark{width:54px;height:54px;border-radius:14px;background:linear-gradient(135deg,var(--glow),var(--green));display:flex;align-items:center;justify-content:center;font-family:'Sora',sans-serif;font-weight:800;font-size:22px;color:#fff;}
.role-badges{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:20px;}
.role-badge{padding:4px 10px;border-radius:20px;font-size:11px;font-weight:600;border:1.5px solid var(--border);cursor:pointer;background:#fff;color:var(--muted);}
.role-badge.active{background:var(--green);border-color:var(--green);color:#fff;}

/* ── APP ── */
#app{display:flex;height:100vh;overflow:hidden;display:none;}
#sidebar{width:260px;flex-shrink:0;background:var(--forest);display:flex;flex-direction:column;transition:transform .28s,width .25s;overflow:hidden;z-index:200;}
#sidebar.collapsed{width:64px;}
#main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0;}
#topbar{height:60px;flex-shrink:0;background:#fff;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;padding:0 16px;box-shadow:var(--sh);}
#content{flex:1;overflow-y:auto;padding:24px;}
/* Mobile sidebar overlay */
#sb-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:199;}

.sb-logo{padding:20px 16px 16px;display:flex;align-items:center;gap:10px;border-bottom:1px solid rgba(255,255,255,.08);}
.sb-mark{width:36px;height:36px;border-radius:8px;background:linear-gradient(135deg,var(--glow),var(--green));display:flex;align-items:center;justify-content:center;font-family:'Sora',sans-serif;font-weight:800;font-size:15px;color:#fff;flex-shrink:0;}
.sb-name{font-family:'Sora',sans-serif;font-weight:700;font-size:13px;color:#fff;white-space:nowrap;}
.sb-sub{font-size:10px;color:rgba(255,255,255,.4);white-space:nowrap;}
.sb-user{padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.06);display:flex;gap:10px;align-items:center;}
.sb-av{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--gold),#e8b030);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#fff;flex-shrink:0;}
.sb-uname{font-size:13px;font-weight:600;color:#fff;white-space:nowrap;}
.sb-urole{font-size:11px;color:rgba(255,255,255,.45);}
.sb-nav{flex:1;overflow-y:auto;padding:8px;}
.sb-signout{padding:10px 16px 16px;border-top:1px solid rgba(255,255,255,.08);}
.sb-signout button{width:100%;padding:9px;border-radius:8px;border:1px solid rgba(255,255,255,.15);background:transparent;color:rgba(255,255,255,.6);font-size:13px;font-weight:600;cursor:pointer;transition:all .15s;}
.sb-signout button:hover{background:rgba(255,59,59,.2);border-color:rgba(255,100,100,.4);color:#ff8080;}
.sb-sec{font-size:10px;font-weight:600;color:rgba(255,255,255,.3);text-transform:uppercase;letter-spacing:.08em;padding:12px 8px 5px;white-space:nowrap;}
.ni{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;cursor:pointer;color:rgba(255,255,255,.65);font-size:13px;font-weight:500;transition:all .15s;white-space:nowrap;}
.ni:hover{background:rgba(255,255,255,.07);color:#fff;}
.ni.active{background:var(--green);color:#fff;}
.ni .ic{font-size:16px;flex-shrink:0;}
.nbadge{background:var(--gold);color:#fff;font-size:10px;font-weight:700;padding:1px 6px;border-radius:20px;margin-left:auto;}

#topbar-toggle{background:none;border:none;font-size:20px;cursor:pointer;color:var(--muted);}
.tb-title{font-family:'Sora',sans-serif;font-size:16px;font-weight:700;flex:1;}
.tb-search{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:7px 12px;width:240px;}
.tb-search input{border:none;background:none;font-size:13.5px;width:100%;outline:none;}
.tb-btn{width:36px;height:36px;border-radius:8px;background:var(--greenl);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;position:relative;}
.dotb{position:absolute;top:5px;right:5px;width:8px;height:8px;border-radius:50%;background:var(--gold);border:2px solid #fff;}
.college-badge{background:var(--greenl);color:var(--green);font-size:12px;font-weight:700;padding:4px 12px;border-radius:20px;}

/* ── VIEWS ── */
.view{display:none;}.view.active{display:block;}
.section-title{font-family:'Sora',sans-serif;font-size:20px;font-weight:800;margin-bottom:4px;}
.section-sub{color:var(--muted);font-size:13.5px;margin-bottom:22px;}

/* ── CARDS ── */
.card{background:#fff;border-radius:var(--r);border:1px solid var(--border);box-shadow:var(--sh);padding:20px;}
.card-title{font-family:'Sora',sans-serif;font-size:15px;font-weight:700;}
.qa-card{cursor:pointer;transition:background .15s,box-shadow .15s,transform .15s;}
.qa-card:hover{background:var(--greenl);box-shadow:var(--shl);transform:translateY(-2px);}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:22px;}
/* Bursar/Payment Officer dashboard — 6 cards, fixed at 3-per-row (2 rows)
   instead of auto-fit's "as many narrow columns as fit", so each card is
   wide enough for a large ₦ figure to fit on one line using the space
   that's actually available, rather than wrapping in a narrower column. */
.pay-stat-grid{grid-template-columns:repeat(3,1fr);}
.stat-card{background:#fff;border-radius:var(--r);border:1px solid var(--border);padding:18px 20px;box-shadow:var(--sh);overflow:hidden;}
.stat-ic{width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px;margin-bottom:8px;}
.stat-val{font-family:'Sora',sans-serif;font-size:clamp(17px,4.5vw,26px);font-weight:800;line-height:1.15;overflow-wrap:anywhere;}
.stat-label{font-size:12px;color:var(--muted);margin-top:4px;}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.field-row-2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
#cert-gen-form[style*="display: none"] ~ #cert-preview-area{grid-column:1/-1;}
.three-col{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
/* Table scroll containment — the table itself scrolls sideways when it's
   wider than its card, so the rest of the page (sidebar, topbar) never has
   to. Not gated to a breakpoint: overflow can happen at any viewport width. */
.table-wrap{overflow-x:auto;max-width:100%;}
/* Grid items default to min-width:auto, so a wide table inside a grid column
   (e.g. #doc-req-grid) forces the whole column — and the page — to widen to
   fit it, even with overflow-x:auto on .table-wrap above. min-width:0 lets
   the column actually shrink so the table-wrap scrollbar is what kicks in. */
#doc-req-grid > .card{min-width:0;}
/* Same fix, same reasoning — a Chart.js canvas (e.g. the Revenue by Fee
   Type / Monthly Revenue cards) sets its own pixel width attribute, which
   otherwise pins its .card's min-width and forces .two-col/.three-col
   (and the whole page) wider than the viewport on mobile instead of the
   chart shrinking to fit. */
.two-col > .card, .three-col > .card{min-width:0;}
/* ── SIDEBAR CLOSE BUTTON (mobile only by default) ── */
.sb-close-btn{
  display:none;
  background:none;border:none;
  color:rgba(255,255,255,.55);font-size:20px;
  cursor:pointer;margin-left:auto;
  padding:4px 6px;line-height:1;border-radius:6px;
  transition:color .15s,background .15s;
}
.sb-close-btn:hover{color:#fff;background:rgba(255,255,255,.1);}

/* ── TAB BARS — scrollable at all sizes ── */
div:has(> .pay-tab){
  overflow-x:auto;
  scrollbar-width:none;
}
div:has(> .pay-tab)::-webkit-scrollbar{display:none;}
.pay-tab{flex-shrink:0;white-space:nowrap;}

/* ── RESPONSIVE ─────────────────────────────────────────── */

/* Tablet (641–900px): collapse grids, hide login brand */
@media(max-width:900px){
  .two-col,.three-col{grid-template-columns:1fr;}
  .form-row{grid-template-columns:1fr;}
  .stat-grid{grid-template-columns:repeat(2,1fr);}
  #doc-req-grid{grid-template-columns:1fr!important;}
  .login-brand{display:none;}
  .login-split{width:100%;max-width:460px;border-radius:20px;}
  .login-form-panel{padding:40px 36px;}
  #profile-grid,#staff-profile-grid{grid-template-columns:1fr !important;}
  .dash-grid-r2,.dash-grid-r3{grid-template-columns:1fr !important;}
  #docreq-stats-row{grid-template-columns:repeat(2,1fr)!important;}
  .field-row-2{grid-template-columns:1fr!important;}
  /* Certificate/ID Card designers are drag-and-drop canvas tools that need
     real width to be usable — they don't become touch-friendly on mobile,
     but at minimum they must stack instead of forcing page-wide horizontal
     scroll, and the fixed calc(100vh - 200px) height should stop pinning
     content off-screen once the two panels stack vertically. */
  #cert-designer-grid,#idcard-designer-grid{grid-template-columns:1fr!important;height:auto!important;}
}

/* Tablet sidebar: off-canvas at 768px and below */
@media(max-width:768px){
  #sidebar{
    position:fixed;top:0;left:0;bottom:0;
    transform:translateX(-100%);
    width:280px!important;
    z-index:200;
    transition:transform .25s ease;
    box-shadow:4px 0 24px rgba(0,0,0,.35);
  }
  #sidebar.mobile-open{transform:translateX(0);}
  #sidebar.collapsed{width:280px!important;transform:translateX(-100%);}
  #sidebar.collapsed.mobile-open{transform:translateX(0);}
  #sb-overlay.active{display:block;}
  .sb-close-btn{display:flex!important;align-items:center;justify-content:center;}
}

/* Mobile (≤640px): full treatment */
@media(max-width:640px){
  /* Topbar */
  #topbar{padding:0 10px;gap:6px;}
  .tb-search{display:none;}
  .tb-title{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:160px;}
  .college-badge{display:none;}
  #topbar > .btn{display:none;}   /* Sign Out hidden — use sidebar */
  #topbar-toggle{font-size:22px;min-width:40px;min-height:40px;}

  /* Content padding */
  #content{padding:12px 10px;}
  .section-title{font-size:17px;}
  .section-sub{font-size:12.5px;margin-bottom:12px;}

  /* Stat cards */
  .stat-grid{grid-template-columns:repeat(2,1fr);gap:8px;}
  .stat-card{padding:12px 10px;}
  .stat-val{font-size:clamp(14px,5vw,20px);}
  .stat-label{font-size:11px;}

  /* Cards */
  .card{padding:12px;}
  .two-col,.three-col,.form-row{grid-template-columns:1fr;}

  /* Tables — block + overflow so they scroll without a wrapper */
  table:not(.tt-table){display:block;overflow-x:auto;max-width:100%;}
  th,td{padding:8px 10px;font-size:12px;}

  /* Tab bar buttons — bigger touch targets */
  .pay-tab{padding:9px 14px;font-size:13px;}

  /* Modals — bottom sheet */
  .modal-overlay{padding:0!important;align-items:flex-end;}
  .modal{width:100%!important;max-width:100%!important;border-radius:20px 20px 0 0;max-height:92vh;margin:0;}
  .modal-header{padding:16px 18px;}
  .modal-body{padding:14px 18px;}
  .modal-footer{padding:12px 18px;flex-wrap:wrap;gap:8px;}
  .modal-footer .btn{flex:1;justify-content:center;}

  /* Notification + AI panels */
  #notif-panel{width:100%;right:0;top:60px;border-radius:0;max-height:70vh;overflow-y:auto;}
  #ai-panel{width:100%;}

  /* Buttons */
  .btn{padding:8px 12px;font-size:13px;}
  .btn-sm{padding:6px 10px;font-size:12px;}

  /* Login */
  .login-card{padding:28px 20px;border-radius:16px;}
  .login-h{font-size:18px;}
  .login-split{border-radius:16px;}
  .login-form-panel{padding:30px 22px;}
  #login-screen{padding:12px;}

  /* Timetable */
  .tt-table{display:block;overflow-x:auto;max-width:100%;}

  /* Chatroom: stack panels vertically */
  #chatroom-layout{
    display:flex!important;
    flex-direction:column!important;
    grid-template-columns:unset!important;
    height:auto!important;
    min-height:0!important;
    gap:0!important;
  }
  #chatroom-layout > .card:first-child{
    height:180px!important;
    flex-shrink:0;
    border-radius:var(--r) var(--r) 0 0!important;
    border-bottom:none!important;
  }
  #chatroom-panel{
    height:calc(100vh - 320px)!important;
    min-height:360px;
    border-radius:0 0 var(--r) var(--r)!important;
    border-top:none!important;
  }

  /* Exam timer smaller on mobile */
  #exam-timer{font-size:18px!important;}

  /* Attendance code display */
  .att-code-display{font-size:32px;letter-spacing:.08em;}

  /* Section action buttons (e.g. + Schedule Lecture) wrap */
  .view > .flex.items-center{flex-wrap:wrap;gap:10px;}
  .view > .flex.items-center .ml-auto{margin-left:0;}

  /* Whiteboard toolbar */
  .wb-toolbar{padding:8px;gap:6px;}
  .wb-tool{width:30px;height:30px;font-size:14px;}
}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:8px;font-size:13.5px;font-weight:600;cursor:pointer;border:none;font-family:inherit;transition:all .15s;}
.btn-primary{background:var(--green);color:#fff;}.btn-primary:hover{background:var(--green2);}
.btn-outline{background:transparent;border:1.5px solid var(--border);color:var(--text);}.btn-outline:hover{border-color:var(--green);color:var(--green);}
.anat-sys-btn.active{background:var(--greenl);border-color:var(--green);color:var(--green);font-weight:700;}
.btn-gold{background:var(--gold);color:#fff;}
.btn-danger{background:var(--danger);color:#fff;}
.btn-info{background:var(--info);color:#fff;}
.btn-purple{background:var(--purple);color:#fff;}
.btn-sm{padding:5px 12px;font-size:12px;}

/* ── PILLS ── */
.pill{display:inline-flex;align-items:center;padding:3px 10px;border-radius:20px;font-size:11.5px;font-weight:600;}
.pill-green{background:var(--greenl);color:var(--green);}
.pill-gold{background:var(--goldl);color:var(--gold);}
.pill-blue{background:#e6f0fb;color:var(--info);}
.pill-red{background:#fdecea;color:var(--danger);}
.pill-purple{background:#f3e8ff;color:var(--purple);}

/* ── Semantic icon colors ──
   Font Awesome icons are font glyphs and inherit surrounding text color by
   default (unlike the emoji they replaced, which always rendered in their
   own fixed color regardless of context). These restore that fixed meaning
   for icons that are inherently semantic, wherever they appear bare. */
.fa-circle-check{color:var(--green);}
.fa-circle-xmark{color:var(--danger);}
.fa-triangle-exclamation{color:var(--gold);}
.fa-ban{color:var(--danger);}

/* ── TABLE ── */
.table-wrap{overflow-x:auto;}
table{width:100%;border-collapse:collapse;font-size:13.5px;}
th{text-align:left;padding:10px 14px;font-size:11.5px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;border-bottom:1.5px solid var(--border);white-space:nowrap;}
td{padding:11px 14px;border-bottom:1px solid var(--border);vertical-align:middle;}
tr:last-child td{border-bottom:none;}tr:hover td{background:var(--surface);}

/* ── FORM ── */
label{font-size:12.5px;font-weight:600;color:var(--muted);display:block;margin-bottom:5px;}
input[type=text],input[type=email],input[type=date],input[type=number],input[type=datetime-local],input[type=password],select,textarea{width:100%;padding:9px 12px;border:1.5px solid var(--border);border-radius:8px;font-size:13.5px;font-family:inherit;outline:none;background:#fff;transition:border .15s;}
input:focus,select:focus,textarea:focus{border-color:var(--green);}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px;}
.form-group{margin-bottom:12px;}
textarea{resize:vertical;min-height:80px;}

/* ── MODAL ── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:500;display:none;align-items:center;justify-content:center;padding:20px;}
.modal-overlay.open{display:flex;}
.modal{background:#fff;border-radius:16px;width:600px;max-width:100%;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.25);}
.modal-header{padding:20px 24px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;}
.modal-body{padding:20px 24px;}
.modal-footer{padding:14px 24px;border-top:1px solid var(--border);display:flex;gap:10px;justify-content:flex-end;}
.modal-close{background:none;border:none;font-size:22px;cursor:pointer;color:var(--muted);}

/* ── TIMETABLE GRID ── */
.tt-table{width:100%;border-collapse:collapse;table-layout:fixed;}
.tt-table th{background:var(--surface);text-align:center;padding:8px;border:1px solid var(--border);font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;}
.tt-table td{border:1px solid var(--border);vertical-align:top;padding:4px;}
.tt-table tr:hover td{background:unset;}

/* ── NOTIFICATIONS ── */
#notif-panel{position:fixed;right:20px;top:70px;width:350px;background:#fff;border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shl);z-index:400;display:none;overflow:hidden;}
#notif-panel.open{display:block;}
.notif-header{padding:14px 16px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;font-weight:700;font-size:14px;}
.notif-item{display:flex;gap:10px;padding:12px 16px;border-bottom:1px solid var(--border);font-size:12.5px;}
.notif-item:last-child{border-bottom:none;}

/* ── PROGRESS ── */
.progress{height:6px;background:var(--border);border-radius:3px;overflow:hidden;}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--glow),var(--green));border-radius:3px;}

/* ── AI PANEL ── */
#ai-panel{position:fixed;right:0;top:0;bottom:0;width:400px;background:#fff;border-left:1px solid var(--border);box-shadow:-4px 0 24px rgba(0,0,0,.10);display:flex;flex-direction:column;transform:translateX(100%);transition:transform .3s;z-index:300;}
#ai-panel.open{transform:translateX(0);}
.ai-h{padding:18px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;}
.ai-logo-ic{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,#43c48a,#1a6b4a);display:flex;align-items:center;justify-content:center;font-size:18px;}
.ai-msgs{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px;}
.ai-msg{max-width:88%;border-radius:12px;padding:10px 14px;font-size:13.5px;line-height:1.55;}
.ai-msg.bot{background:var(--greenl);color:var(--forest);align-self:flex-start;}
.ai-msg.user{background:var(--green);color:#fff;align-self:flex-end;}
.dp span{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);animation:dp 1.1s infinite;}
.dp span:nth-child(2){animation-delay:.2s;}.dp span:nth-child(3){animation-delay:.4s;}
@keyframes dp{0%,60%,100%{opacity:.3;transform:scale(.8)}30%{opacity:1;transform:scale(1)}}
.ai-qs{display:flex;flex-wrap:wrap;gap:6px;padding:10px 16px;border-top:1px solid var(--border);}
.ai-q{background:var(--greenl);color:var(--green);font-size:11.5px;font-weight:600;padding:5px 10px;border-radius:20px;border:none;cursor:pointer;font-family:inherit;}
.ai-q:hover{background:var(--green);color:#fff;}
.ai-input-row{padding:12px 16px;border-top:1px solid var(--border);display:flex;gap:8px;align-items:flex-end;}
.ai-input-row textarea{flex:1;min-height:40px;max-height:120px;resize:none;border-radius:8px;font-size:13.5px;padding:9px 12px;}
.ai-send{width:40px;height:40px;border-radius:8px;background:var(--green);color:#fff;border:none;cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:18px;}

/* ── SIMULATION LAB ── */
.sim-card{background:#fff;border-radius:var(--r);border:1px solid var(--border);overflow:hidden;cursor:pointer;transition:box-shadow .18s,transform .18s;box-shadow:var(--sh);}
.sim-card:hover{box-shadow:var(--shl);transform:translateY(-2px);}
.sim-thumb{height:120px;display:flex;align-items:center;justify-content:center;font-size:48px;}
.sim-body{padding:14px 16px;}
.sim-name{font-family:'Sora',sans-serif;font-size:13.5px;font-weight:700;margin-bottom:4px;}
.sim-meta{font-size:11.5px;color:var(--muted);}

/* ── CERTIFICATE ── */
.cert-preview{border:8px solid var(--gold);border-radius:16px;padding:40px;background:linear-gradient(135deg,#fffdf5,#fff9ec);text-align:center;position:relative;}
.cert-seal{width:80px;height:80px;border-radius:50%;background:var(--green);color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Sora',sans-serif;font-weight:800;font-size:14px;margin:0 auto 16px;}
.cert-title{font-family:'Sora',sans-serif;font-size:13px;font-weight:800;color:var(--green);text-transform:uppercase;letter-spacing:.1em;margin-bottom:4px;}
.cert-name{font-family:'Sora',sans-serif;font-size:28px;font-weight:800;color:var(--forest);margin:8px 0;}
.cert-prog{font-size:15px;color:var(--muted);margin-bottom:8px;}
.cert-class{font-family:'Sora',sans-serif;font-size:18px;font-weight:700;color:var(--gold);}
.qr-placeholder{width:80px;height:80px;background:var(--surface);border:2px solid var(--border);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:10px;color:var(--muted);margin:16px auto 0;}

/* ── CERT DESIGNER ── */
.tpl-item{display:flex;align-items:center;justify-content:space-between;padding:9px 10px;border-radius:6px;border:1px solid var(--border);margin-bottom:6px;cursor:pointer;font-size:13px;transition:background .15s;}
.tpl-item:hover{background:var(--greenl);}
.tpl-item.tpl-default{border-color:var(--green);background:var(--greenl);}
.tpl-item-name{font-weight:600;flex:1;}
.tpl-item-actions{display:flex;gap:4px;opacity:0;}
.tpl-item:hover .tpl-item-actions{opacity:1;}
.designer-el{border:1.5px dashed transparent;border-radius:2px;min-width:20px;transition:border-color .1s;-webkit-user-select:none;user-select:none;}
.designer-el:hover{border-color:rgba(45,106,79,.5);}
.designer-el.selected{border-color:#2d6a4f;background:rgba(45,106,79,.07);}
.designer-el .resize-handle{position:absolute;bottom:-4px;right:-4px;width:10px;height:10px;background:#2d6a4f;border-radius:2px;cursor:se-resize;}

/* ── TRANSCRIPT ── */
.transcript-header{border-bottom:3px solid var(--green);padding-bottom:16px;margin-bottom:16px;}
.transcript-table th{background:var(--greenl);}
.grade-A{color:var(--green);font-weight:700;}
.grade-F{color:var(--danger);font-weight:700;}

/* ── LOADING ── */
.spinner{display:inline-block;width:18px;height:18px;border:2.5px solid var(--border);border-top-color:var(--green);border-radius:50%;animation:spin .7s linear infinite;vertical-align:middle;}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-row{text-align:center;padding:32px;color:var(--muted);}
.empty-state{text-align:center;padding:48px;color:var(--muted);}
.empty-state .ei{font-size:48px;margin-bottom:12px;}

/* ── VERIFY PAGE ── */
#verify-page{display:none;position:fixed;inset:0;background:linear-gradient(135deg,var(--forest),#1a4a6b);z-index:9998;overflow-y:auto;padding:40px 20px;}
.verify-card{background:#fff;border-radius:20px;padding:40px;max-width:600px;margin:0 auto;}

/* ── UTILS ── */
/* display */
.flex{display:flex;}.flex-col{flex-direction:column;}.flex-wrap{flex-wrap:wrap;}.flex-1{flex:1;}.flex-shrink-0{flex-shrink:0;}
/* alignment */
.items-center{align-items:center;}.items-start{align-items:flex-start;}.items-end{align-items:flex-end;}
.justify-between{justify-content:space-between;}.justify-center{justify-content:center;}.justify-end{justify-content:flex-end;}
/* gap */
.gap-4{gap:4px;}.gap-6{gap:6px;}.gap-8{gap:8px;}.gap-12{gap:12px;}.gap-16{gap:16px;}.gap-20{gap:20px;}
/* margin */
.ml-auto{margin-left:auto;}.ml-8{margin-left:8px;}.ml-12{margin-left:12px;}
.mb-0{margin-bottom:0;}.mb-4{margin-bottom:4px;}.mb-8{margin-bottom:8px;}.mb-12{margin-bottom:12px;}.mb-16{margin-bottom:16px;}.mb-20{margin-bottom:20px;}.mb-24{margin-bottom:24px;}
.mt-0{margin-top:0;}.mt-4{margin-top:4px;}.mt-8{margin-top:8px;}.mt-12{margin-top:12px;}.mt-16{margin-top:16px;}
.p-0{padding:0;}.pt-0{padding-top:0;}
/* width */
.w-100{width:100%;}
/* typography */
.sora{font-family:'Sora',sans-serif;font-weight:700;}
.text-muted{color:var(--muted);}
.text-danger{color:var(--danger);}
.text-green{color:var(--green);}
.text-gold{color:var(--gold);}
.text-xs{font-size:11px;}
.text-sm{font-size:12.5px;}
.text-center{text-align:center;}
.font-600{font-weight:600;}
.font-bold{font-weight:700;}
.font-800{font-weight:800;}
.nowrap{white-space:nowrap;}
.capitalize{text-transform:capitalize;}
/* misc */
.cursor-pointer{cursor:pointer;}
.overflow-x-auto{overflow-x:auto;}
.opacity-50{opacity:.5;}

/* ── COMPONENT SHORTHANDS ── */
/* Row inside a card: flex, centred, border-bottom separator */
.card-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--border);}
.card-row:last-child{border-bottom:none;}
/* Card header: title on left, actions on right */
.card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;flex-wrap:wrap;gap:8px;}
/* Section toolbar: filter/action bar above a table or list */
.section-actions{display:flex;align-items:center;gap:8px;margin-bottom:16px;flex-wrap:wrap;}
/* Tab bar container (holds .pay-tab buttons) */
.tab-bar{display:flex;gap:6px;margin-bottom:20px;border-bottom:2px solid var(--border);overflow-x:auto;scrollbar-width:none;}
.tab-bar::-webkit-scrollbar{display:none;}
/* Filter toolbar inside a card (no bottom margin) */
.filter-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px;}
/* Inline icon + label pair */
.icon-label{display:flex;align-items:center;gap:5px;font-size:12px;}

/* ── NEW MODULES CSS ── */
.wb-canvas{background:#fff;cursor:crosshair;border-radius:8px;display:block;}
.wb-toolbar{display:flex;gap:8px;align-items:center;padding:10px;background:var(--forest);border-radius:8px 8px 0 0;flex-wrap:wrap;}
.wb-tool{width:34px;height:34px;border-radius:6px;border:2px solid transparent;background:none;cursor:pointer;font-size:16px;color:#fff;display:flex;align-items:center;justify-content:center;}
.wb-tool.active,.wb-tool:hover{background:var(--green);border-color:var(--glow);}
.wb-color{width:26px;height:26px;border-radius:50%;cursor:pointer;border:3px solid transparent;}
.wb-color.active{border-color:#fff;}
.chat-msg{display:flex;gap:10px;margin-bottom:12px;}
.chat-bubble{max-width:75%;border-radius:12px;padding:10px 14px;font-size:13.5px;line-height:1.5;}
.chat-bubble.me{background:var(--green);color:#fff;border-bottom-right-radius:3px;}
.chat-bubble.other{background:var(--greenl);color:var(--forest);border-bottom-left-radius:3px;}
.chat-bubble.announcement{background:var(--goldl);color:var(--forest);border-left:4px solid var(--gold);border-radius:8px;width:100%;}
.chat-av{width:32px;height:32px;border-radius:50%;background:var(--green);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0;}
.msg-item{border:1px solid var(--border);border-radius:10px;padding:14px 16px;background:#fff;margin-bottom:8px;cursor:pointer;transition:border-color .15s;}
.msg-item:hover{border-color:var(--green);}
.msg-item.unread{border-left:4px solid var(--green);background:var(--greenl);}
.approval-card{border:1px solid var(--border);border-radius:10px;padding:16px;background:#fff;margin-bottom:10px;}
.approval-status{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:20px;font-size:12px;font-weight:700;}
.cbt-question{border:1px solid var(--border);border-radius:10px;padding:18px;background:#fff;margin-bottom:14px;}
.cbt-option{display:flex;align-items:center;gap:10px;padding:10px 14px;border:1.5px solid var(--border);border-radius:8px;margin-bottom:8px;cursor:pointer;transition:all .15s;font-size:13.5px;}
.cbt-option:hover{border-color:var(--green);background:var(--greenl);}
.cbt-option.selected{border-color:var(--green);background:var(--greenl);}
.cbt-option.correct{border-color:#1a6b4a;background:#e6f4ef;}
.cbt-option.wrong{border-color:#d9534f;background:#fdecea;}
.cbt-timer{font-family:'Sora',sans-serif;font-size:28px;font-weight:800;color:var(--danger);text-align:center;}
.cbt-timer.warning{animation:pulse-red 1s infinite;}
@keyframes pulse-red{0%,100%{color:var(--danger)}50%{color:#ff6b6b}}
.att-code-display{font-family:monospace;font-size:48px;font-weight:800;color:var(--green);letter-spacing:.15em;text-align:center;background:var(--greenl);border-radius:12px;padding:20px;}
.course-reg-card{border:1.5px solid var(--border);border-radius:10px;padding:14px 16px;background:#fff;display:flex;align-items:center;gap:12px;margin-bottom:8px;transition:all .15s;}
.course-reg-card:hover{border-color:var(--green);}
.course-reg-card.registered{border-color:var(--green);background:var(--greenl);}
.info-card{border:1px solid var(--border);border-radius:12px;overflow:hidden;background:#fff;margin-bottom:12px;box-shadow:var(--sh);}
.info-banner{padding:14px 18px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;}
.parent-stat{text-align:center;padding:16px;}
.parent-stat-val{font-family:'Sora',sans-serif;font-size:28px;font-weight:800;}
.lecture-card{border:1px solid var(--border);border-radius:12px;background:#fff;overflow:hidden;box-shadow:var(--sh);}
.lecture-banner{height:80px;display:flex;align-items:center;justify-content:center;font-size:36px;}
::-webkit-scrollbar{width:5px;}::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px;}
.live-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#ff3d3d;margin-right:5px;animation:blink 1s infinite;}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
.pay-tab{background:none;border:none;border-bottom:3px solid transparent;padding:10px 18px;font-size:13.5px;font-weight:600;cursor:pointer;color:var(--muted);font-family:inherit;margin-bottom:-2px;transition:all .15s;}
.pay-tab:hover{color:var(--green);}
.pay-tab.active{color:var(--green);border-bottom-color:var(--green);}
/* Payments module filter-bar polish — scoped additions only, does not
   touch .card/.tab-bar/.pay-tab/.form-row/.form-group base rules (shared
   with other views, e.g. academics.js also renders .pay-tab elements). */
.pmt-filters{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;}
.pmt-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:14px;padding-top:14px;border-top:1px solid var(--border);}
/* Smaller/lighter variant for nested sub-tab bars, so main tabs vs
   sub-tabs read as two different navigation levels instead of looking
   identical. */
.pay-tab.sub{padding:7px 14px;font-size:12.5px;}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
/* Tab bar with .tab-btn children */
.tabs{display:flex;gap:0;border-bottom:2px solid var(--border);overflow-x:auto;scrollbar-width:none;flex-wrap:nowrap;}
.tabs::-webkit-scrollbar{display:none;}
.tab-btn{background:none;border:none;border-bottom:3px solid transparent;padding:10px 18px;font-size:13.5px;font-weight:600;cursor:pointer;color:var(--muted);font-family:inherit;margin-bottom:-2px;transition:all .15s;white-space:nowrap;flex-shrink:0;}
.tab-btn:hover{color:var(--green);}
.tab-btn.active{color:var(--green);border-bottom-color:var(--green);}
/* Results class grid */
.grid-input{width:80px;padding:5px 8px;border:1px solid var(--border);border-radius:6px;font-size:13px;text-align:center;font-family:inherit;}
.grid-input:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 2px rgba(52,168,83,.15);}
#res-grid-table td{vertical-align:middle;}
/* Lecturer viewing Course Management ("My Courses") — no bulk-select
   checkboxes or lecturer-assignment column; that's admin-only territory. */
#view-courses.lecturer-mode th:nth-child(1),
#view-courses.lecturer-mode td:nth-child(1),
#view-courses.lecturer-mode th:nth-child(8),
#view-courses.lecturer-mode td:nth-child(8){display:none;}
#view-courses.lecturer-mode #crs-bulk-bar{display:none !important;}