:root{
  --sans:'Inter',-apple-system,system-ui,'Segoe UI',sans-serif;
  /* NEAR-MONOCHROME SYSTEM — dark, typographic, color only for status */
  --bg:#0b1728;          /* deep space canvas */
  --bg2:#0f1c30;         /* sidebar / raised surfaces */
  --bg3:#13253c;         /* inputs / wells */
  --card:#122236;        /* card surface */
  --card2:#1a2c44;       /* card hover / secondary */
  --border:#1d3452;      /* borders */
  --border-soft:#152740;
  /* --accent is reused app-wide for active/links/info — make it a LIGHT NEUTRAL
     so interaction reads white/grey, not colored. */
  --accent:#4fd4ff;
  --accent2:#9fe8ff;
  --accent-soft:rgba(79,212,255,0.10);
  --accent-line:rgba(79,212,255,0.32);
  /* STATUS — the ONLY color in the system */
  --accent-green:#3ddc84;--accent-gold:#f5b942;--accent-red:#ff6b6b;--accent-orange:#ff9f43;
  --text:#eef5fc;--text2:#bcd3e8;--text3:#9db6cf;--text-muted:#8ba7c1;
  --glass:rgba(255,255,255,0.035);--glass-border:rgba(140,200,255,0.12);
  --shadow:0 6px 28px rgba(0,0,0,0.55);--radius:10px;--radius-lg:14px;
  --mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --display:'Audiowide',var(--sans,'Inter'),sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Inter',-apple-system,system-ui,'Segoe UI',sans-serif;background:var(--bg);
  background-image:radial-gradient(120% 80% at 50% 0%,#0a1c33 0%,#061020 40%,#050b17 100%);
  background-attachment:fixed;color:var(--text);min-height:100vh;font-size:14px;line-height:1.55;letter-spacing:-0.01em;-webkit-font-smoothing:antialiased}
#banner canvas{position:absolute;inset:0;width:100%;height:100%}
.logo-bubble{width:70px;height:70px;border-radius:50%;background:rgba(255,255,255,0.06);border:1.5px solid rgba(255,255,255,0.15);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;box-shadow:0 0 20px rgba(255,255,255,0.2),inset 0 1px 0 rgba(255,255,255,0.1);flex-shrink:0}
.banner-center .logo-bubble{width:84px;height:84px}
#app{display:flex;min-height:calc(100vh - 130px)}
#sidebar::-webkit-scrollbar{width:4px}
#sidebar::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
.user-info{flex:1;min-width:0}
#main{flex:1;min-height:calc(100vh - 130px);overflow-y:auto;background:var(--bg)}
#main::-webkit-scrollbar{width:6px}
#main::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
.page.active{display:block}
.btn-sm{padding:4px 10px;font-size:11px}
.btn-xs{padding:2px 8px;font-size:10px}
.form-group{margin-bottom:14px}
.form-control::placeholder{color:var(--text3)}
select.form-control option{background:var(--bg3)}
textarea.form-control{resize:vertical;min-height:80px}
.table{width:100%;border-collapse:collapse;font-size:12px}
.badge-approved{background:rgba(34,197,94,0.15);color:var(--accent-green)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.tree-item{cursor:pointer;user-select:none}
.tree-header.open .tree-toggle{transform:rotate(90deg)}
.tree-children{display:none;padding-left:20px}
.tree-children.open{display:block}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.cal-header{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin-bottom:4px}
.cal-day-name{text-align:center;padding:6px;font-size:10px;font-weight:700;color:var(--text3);letter-spacing:0.5px;text-transform:uppercase}
.cal-day{aspect-ratio:1;display:flex;align-items:center;justify-content:center;border-radius:6px;font-size:12px;cursor:pointer;transition:all 0.15s;position:relative;border:1px solid transparent}
.cal-day:hover{background:var(--card2);border-color:var(--border)}
.cal-day.today{border-color:var(--accent);color:var(--accent)}
.cal-day.holiday{background:rgba(240,165,0,0.1);color:var(--accent-gold)}
.cal-day.leave-pending{background:rgba(217,119,6,0.28)!important;color:#8a4f04!important;border-color:rgba(217,119,6,0.55)!important;font-weight:700}
.cal-day.leave-approved{background:rgba(22,163,74,0.24)!important;color:#0f7a37!important;border-color:rgba(22,163,74,0.5)!important;font-weight:700}
.cal-day.leave-denied{background:rgba(220,38,38,0.22)!important;color:#b81c1c!important;border-color:rgba(220,38,38,0.5)!important;font-weight:700}
.cal-day.other-month{opacity:0.3}
.modal-overlay.open{display:flex}
.modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;padding-bottom:14px;border-bottom:1px solid var(--border)}
.modal-close{background:none;border:none;color:var(--text2);font-size:20px;cursor:pointer;line-height:1;padding:4px;border-radius:4px;transition:all 0.15s}
.modal-close:hover{background:var(--bg3);color:var(--text)}
#toast-container{position:fixed;bottom:80px;right:20px;z-index:2000;display:flex;flex-direction:column;gap:8px}
@keyframes slideIn{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}
#device-toggle:hover{opacity:1;transform:scale(1)}
@media(hover:none),(max-width:768px){#device-toggle{display:none!important}}
.device-btn{padding:8px 12px;cursor:pointer;font-size:14px;transition:all 0.15s;border:none;background:none;color:var(--text2)}
body.phone-mode #sidebar{position:fixed;bottom:0;left:0;right:0;width:100%;height:60px;min-height:unset;top:unset;flex-direction:row;overflow-x:auto;overflow-y:hidden;border-right:none;border-top:1px solid var(--border);z-index:100}
body.phone-mode .sidebar-user{display:none}
body.phone-mode .nav-section{padding:0;display:flex;flex-direction:row;align-items:center}
body.phone-mode .nav-label{display:none}
body.phone-mode .nav-item{flex-direction:column;gap:2px;padding:8px 10px;font-size:9px;min-width:60px;border-left:none;border-bottom:2px solid transparent;white-space:nowrap}
body.phone-mode .nav-item.active{border-bottom-color:var(--accent);border-left-color:transparent}
body.phone-mode #app{flex-direction:column}
body.phone-mode #main{padding-bottom:70px}
.divider{height:1px;background:var(--border);margin:16px 0}
.text-muted{color:var(--text2)}.text-sm{font-size:11px}.text-xs{font-size:10px}
.text-accent{color:var(--accent)}.text-success{color:var(--accent-green)}.text-danger{color:var(--accent-red)}.text-warning{color:var(--accent-gold)}
.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}
.gap-2{gap:8px}.gap-3{gap:12px}.gap-4{gap:16px}
.mb-2{margin-bottom:8px}.mb-3{margin-bottom:12px}.mb-4{margin-bottom:16px}.mt-2{margin-top:8px}.mt-3{margin-top:12px}.w-full{width:100%}
.notice-box{background:rgba(217,119,6,0.14);border:1px solid rgba(217,119,6,0.45);border-radius:8px;padding:12px 16px;font-size:12px;color:#8a4f04;margin-bottom:16px;display:flex;align-items:flex-start;gap:10px}
.scroll-list{max-height:300px;overflow-y:auto}
.scroll-list::-webkit-scrollbar{width:4px}
.scroll-list::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
.tab-bar{display:flex;gap:2px;border-bottom:1px solid var(--border);margin-bottom:20px;overflow-x:auto}
.tab-bar::-webkit-scrollbar{height:3px}
.tab-content{display:none}
.tab-content.active{display:block}
.expiry-grid{display:grid;border:1px solid var(--border);border-radius:8px;overflow:hidden;font-size:11px}
.expiry-cell{padding:8px 10px;border-right:1px solid var(--border);border-bottom:1px solid var(--border)}
.expiry-header{background:var(--bg3);font-weight:700;color:var(--text2);font-size:10px;text-transform:uppercase;letter-spacing:0.5px}
.expiry-name{background:var(--bg3);font-weight:600;color:var(--text)}
.expiry-ok{background:rgba(34,197,94,0.08);color:var(--accent-green)}
.expiry-warning{background:rgba(240,165,0,0.08);color:var(--accent-gold)}
.expiry-expired{background:rgba(239,68,68,0.08);color:var(--accent-red)}
.expiry-none{color:var(--text3);font-style:italic}
.cal-matrix{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.cal-matrix-cell{min-height:80px;background:var(--card);border:1px solid var(--border);border-radius:6px;padding:6px;position:relative;cursor:pointer;transition:background 0.15s}
.cal-matrix-cell:hover{background:var(--card2)}
.cal-matrix-cell.today{border-color:var(--accent)}
.cal-matrix-cell .date-num{font-size:11px;font-weight:700;color:var(--text2);margin-bottom:4px}
.cal-event{font-size:9px;padding:2px 5px;border-radius:3px;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.event-leave{background:var(--bg3);color:var(--text);border:1px solid var(--border-soft)}
.cal-event.leave-pending{background:rgba(217,119,6,0.18);color:#8a4f04;border-color:rgba(217,119,6,0.45)}
.cal-event.leave-approved{background:rgba(22,163,74,0.16);color:#0f7a37;border-color:rgba(22,163,74,0.45)}
.cal-event.leave-denied{background:rgba(220,38,38,0.14);color:#b81c1c;border-color:rgba(220,38,38,0.45)}
.event-project{background:rgba(240,165,0,0.2);color:var(--accent-gold)}
.event-holiday{background:rgba(34,197,94,0.2);color:var(--accent-green)}
.audit-score{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;font-size:13px;font-weight:700;border:2px solid}
.audit-pass{border-color:var(--accent-green);color:var(--accent-green);background:rgba(34,197,94,0.1)}
.audit-fail{border-color:var(--accent-red);color:var(--accent-red);background:rgba(239,68,68,0.1)}
.perf-bar{height:6px;border-radius:3px;background:var(--bg3);overflow:hidden;margin-top:4px}
.perf-fill{height:100%;border-radius:3px;background:var(--accent);transition:width 0.5s}
.jc-type-badge{padding:3px 10px;border-radius:20px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px}
.jc-delivery{background:rgba(255,255,255,0.15);color:var(--accent)}
.jc-repair{background:rgba(239,68,68,0.15);color:var(--accent-red)}
.jc-callout{background:rgba(240,165,0,0.15);color:var(--accent-gold)}
.jc-invoice{background:rgba(34,197,94,0.15);color:var(--accent-green)}
.jc-collection{background:rgba(149,76,233,0.15);color:#9f5ae5}
.jc-equipment{background:rgba(249,115,22,0.15);color:var(--accent-orange)}
.jc-maintenance{background:rgba(6,182,212,0.15);color:#06b6d4}
.glass-card{background:rgba(255,255,255,0.03);border:1px solid var(--glass-border);border-radius:var(--radius);backdrop-filter:blur(10px);padding:16px}
.red-banner{background:rgba(239,68,68,0.15);border:1px solid rgba(239,68,68,0.3);border-radius:6px;padding:6px 12px;font-size:11px;color:var(--accent-red);font-weight:600;display:inline-flex;align-items:center;gap:6px}
@media print{#sidebar,#device-toggle,#toast-container,.no-print{display:none!important}#main{padding:0}body{background:#fff;color:#000}.card{border:1px solid #ddd;box-shadow:none}}
/* ===== EXAM MODULE ===== */
.exam-card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:10px}
.exam-card-desc{font-size:12px;color:var(--text2);margin-top:3px}
.exam-meta{display:flex;flex-wrap:wrap;gap:14px;font-size:11px;color:var(--text2);margin:10px 0}
.exam-meta span{display:inline-flex;align-items:center;gap:5px}
.exam-meta strong{color:var(--text)}
.exam-card-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.badge-published{background:rgba(34,197,94,0.15);color:var(--accent-green)}
/* Exam runner */
#examRunner{display:none}
#examRunner.active{display:block}
.exam-runner-bar{position:sticky;top:0;z-index:50;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:14px 18px;margin-bottom:18px;display:flex;justify-content:space-between;align-items:center;gap:14px;box-shadow:var(--shadow)}
.exam-runner-bar h2{font-family:'Inter',sans-serif;font-size:17px;color:var(--text)}
.exam-runner-bar .sub{font-size:11px;color:var(--text2);margin-top:2px}
.exam-timer{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.exam-timer.warning .clock{color:var(--accent-orange)}
.exam-timer.danger .clock{color:var(--accent-red);animation:pulseClock 1s infinite}
.exam-timer .lbl{font-size:9px;text-transform:uppercase;letter-spacing:1px;color:var(--text3)}
@keyframes pulseClock{0%,100%{opacity:1}50%{opacity:0.45}}
.exam-progress-track{height:4px;background:var(--bg3);border-radius:2px;overflow:hidden;margin-bottom:18px}
.q-card .q-text{font-size:14px;font-weight:600;color:var(--text);margin-bottom:14px;line-height:1.5}
.q-option .radio{width:16px;height:16px;border-radius:50%;border:2px solid var(--text3);flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:all 0.12s}
/* review (results) */
.q-option .mark{margin-left:auto;font-size:13px}
.q-option.locked{cursor:default}
.q-option.locked:hover{border-color:var(--border);background:transparent;color:var(--text2)}
.q-option.locked.selected:hover{border-color:var(--accent);background:rgba(255,255,255,0.12);color:var(--text)}
.q-option.locked.correct:hover{border-color:var(--accent-green);background:rgba(34,197,94,0.1);color:var(--text)}
.q-option.locked.incorrect:hover{border-color:var(--accent-red);background:rgba(239,68,68,0.1);color:var(--text)}
.q-card.q-unanswered{border-color:var(--accent-orange)}
.exam-locked-banner{background:rgba(239,68,68,0.12);border:1px solid rgba(239,68,68,0.3);color:var(--accent-red);border-radius:8px;padding:12px 16px;font-size:12px;font-weight:600;margin-bottom:18px;display:flex;align-items:center;gap:8px}
.result-hero{text-align:center;padding:30px 20px}
.result-score.pass{color:var(--accent-green)}
.result-score.fail{color:var(--accent-red)}
.result-sub{font-size:13px;color:var(--text2);margin-top:8px}
.result-pill{display:inline-block;margin-top:14px;padding:6px 18px;border-radius:20px;font-size:12px;font-weight:700;letter-spacing:0.5px}
.result-pill.pass{background:rgba(34,197,94,0.15);color:var(--accent-green)}
.result-pill.fail{background:rgba(239,68,68,0.15);color:var(--accent-red)}
.qb-row{border:1px solid var(--border);border-radius:8px;padding:12px;margin-bottom:10px;background:var(--bg3)}
.qb-row .qb-q{font-size:13px;font-weight:600;color:var(--text);margin-bottom:6px}
.qb-row .qb-opt{font-size:12px;color:var(--text2);padding:2px 0}
.qb-row .qb-opt.correct{color:var(--accent-green);font-weight:600}

/* ============================================================
   NEAR-MONOCHROME DESIGN SYSTEM — component layer
   (Vercel/Linear discipline. Color only for status.)
   ============================================================ */
::selection{background:rgba(0,0,0,0.12)}
::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}

/* ---- mono label helper ---- */
.mono,.nav-label,.card-title,.user-role,.form-label,.tab-btn,.badge-status,.table th,.upload-item-meta,.tree-toggle{font-family:var(--mono)}

/* ---- BANNER: signature moment ---- */
#banner{height:108px;background:var(--bg2);border-bottom:1px solid var(--border-soft);position:relative;overflow:hidden}
.banner-content{justify-content:space-between;padding:0 40px;position:relative;z-index:10;display:flex;align-items:center;height:100%}
.banner-center{gap:8px;display:flex;flex-direction:column;align-items:center}
.logo-bubble,.banner-center .logo-bubble{background:none!important;border:none!important;box-shadow:none!important;backdrop-filter:none!important;border-radius:0;padding:0;display:flex;align-items:center;justify-content:center}
.banner-title{font-family:var(--mono);font-size:10px;letter-spacing:3.5px;color:var(--text3);text-shadow:none;font-weight:500}

/* ---- SIDEBAR / NAV ---- */
#sidebar{width:232px;background:var(--bg2);border-right:1px solid var(--border-soft);padding:8px 10px;min-height:calc(100vh - 130px);display:flex;flex-direction:column;flex-shrink:0;position:sticky;top:0;height:calc(100vh - 130px);overflow-y:auto}
.sidebar-user{padding:10px;border:1px solid var(--border-soft);border-radius:10px;margin:6px 2px 10px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px}
.user-avatar{width:34px;height:34px;border-radius:8px;background:var(--bg3);border:1px solid var(--border);color:var(--text);font-family:var(--mono);font-weight:600;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0}
.user-name{font-size:13px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-role{font-size:9px;letter-spacing:1.5px;color:var(--text3);font-weight:600;text-transform:uppercase}
.nav-section{padding:4px 0}
.nav-label{font-size:9px;letter-spacing:1.6px;color:var(--text3);padding:10px 12px 4px;font-weight:700;text-transform:uppercase}
.nav-item{padding:7px 11px;margin:1px 2px;border-radius:8px;font-size:13px;color:var(--text2);border-left:none;border:1px solid transparent;gap:10px;display:flex;align-items:center;cursor:pointer;transition:all 0.15s;user-select:none}
.nav-item:hover{background:var(--accent-soft);color:var(--text)}
.nav-item.active{background:rgba(0,0,0,0.06);color:var(--text);border-color:var(--border);border-left:1px solid var(--border);border-left-color:var(--accent)}
.nav-icon{font-size:13px;opacity:.7;width:18px;text-align:center;flex-shrink:0}
.nav-item svg{width:15px;height:15px;opacity:.7;flex-shrink:0}
.nav-item.active svg{opacity:1}

/* ---- PAGE HEADERS ---- */
.page{padding:28px 32px;display:none}
.page-header{border-bottom:1px solid var(--border-soft);padding-bottom:16px;margin-bottom:24px;display:flex;align-items:center;justify-content:space-between}
.page-header h1{font-family:'Inter',sans-serif;font-size:22px;font-weight:600;letter-spacing:-0.02em;color:var(--text)}
.page-header p{font-family:var(--mono);font-size:11px;color:var(--text3);letter-spacing:0.3px;margin-top:2px}

/* ---- CARDS ---- */
.card{background:var(--card);border:1px solid var(--border);border-radius:12px;box-shadow:none;padding:18px;margin-bottom:16px}
.card-title{font-size:10px;letter-spacing:1.4px;text-transform:uppercase;color:var(--text2);font-weight:500;margin-bottom:14px}
.card-title .badge{font-family:var(--mono);font-size:9px;letter-spacing:0.8px;color:var(--text3);background:transparent;border:1px solid var(--border);border-radius:6px;padding:3px 8px;text-transform:none;font-weight:600}

/* ---- BUTTONS (Vercel: primary = white on black) ---- */
.btn{border-radius:7px;font-family:'Inter',sans-serif;font-weight:500;font-size:12px;padding:7px 13px;transition:background .14s,border-color .14s,color .14s;display:inline-flex;align-items:center;gap:6px;border:none;cursor:pointer;text-decoration:none}
.btn svg{display:inline-block;vertical-align:-2px}
.btn-primary{background:var(--accent);color:#04121f;border:1px solid var(--accent);font-weight:600}
.btn-primary:hover{background:var(--accent2);color:#04121f}
.btn-secondary{background:var(--bg2);color:var(--text);border:1px solid var(--border)}
.btn-secondary:hover{background:var(--card2);border-color:var(--accent-line);color:var(--text)}
.btn-success{background:var(--ok-bg,rgba(22,163,74,0.10));color:var(--accent-green);border:1px solid rgba(22,163,74,0.30)}
.btn-danger{background:rgba(220,38,38,0.10);color:var(--accent-red);border:1px solid rgba(220,38,38,0.30)}
.btn-warning{background:rgba(217,119,6,0.10);color:var(--accent-gold);border:1px solid rgba(217,119,6,0.30)}
.btn-sm{padding:5px 10px;font-size:11px}.btn-xs{padding:4px 8px;font-size:10px}.btn-xs svg{width:12px;height:12px}
.print-btn{background:var(--bg2);color:var(--text2);border:1px solid var(--border);border-radius:7px;font-family:var(--mono);font-size:10px;display:inline-flex;align-items:center;gap:6px;padding:6px 12px;cursor:pointer;font-weight:600;transition:all 0.15s}
.print-btn:hover{background:var(--card2);color:var(--text)}

/* ---- FORMS ---- */
.form-label{font-size:10px;letter-spacing:0.8px;color:var(--text3);display:block;font-weight:600;margin-bottom:5px;text-transform:uppercase}
.form-control{background:var(--bg3);border:1px solid var(--border);border-radius:7px;color:var(--text);font-family:'Inter',sans-serif;width:100%;padding:8px 12px;font-size:13px;transition:border-color 0.15s;outline:none}
.form-control:focus{border-color:var(--accent-line);box-shadow:0 0 0 3px rgba(255,255,255,0.04)}

/* ---- TABLES ---- */
.table th{background:transparent;font-family:var(--mono);font-size:9px;letter-spacing:1.2px;color:var(--text3);font-weight:500;border-bottom:1px solid var(--border-soft);padding:10px 14px;text-align:left;text-transform:uppercase}
.table td{padding:11px 14px;border-bottom:1px solid var(--border-soft);color:var(--text2);vertical-align:middle}
.table tr:hover td{background:var(--accent-soft)}

/* ---- STATUS BADGES (only color) ---- */
.badge-status{font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:0.6px;text-transform:uppercase;padding:3px 8px;border-radius:6px;border:1px solid;display:inline-flex;align-items:center}
.badge-pending{background:rgba(217,119,6,0.10);color:var(--accent-gold);border-color:rgba(217,119,6,0.30)}
.badge-approved,.badge-published{background:rgba(22,163,74,0.10);color:var(--accent-green);border-color:rgba(22,163,74,0.30)}
.badge-denied{background:rgba(220,38,38,0.10);color:var(--accent-red);border-color:rgba(220,38,38,0.30)}
.badge-info{background:transparent;color:var(--text2);border-color:var(--border)}
.badge-draft{background:transparent;color:var(--text3);border-color:var(--border)}

/* ---- QUICK LINKS ---- */
.quick-link{background:var(--bg2);border:1px solid var(--border);border-radius:11px;padding:16px;align-items:flex-start;text-align:left;gap:14px;display:flex;flex-direction:column;cursor:pointer;transition:all 0.2s}
.quick-link:hover{background:var(--card2);border-color:var(--accent-line);transform:translateY(-1px);box-shadow:none}
.quick-link-icon{font-size:0;width:34px;height:34px;border:1px solid var(--border);border-radius:9px;display:flex;align-items:center;justify-content:center;color:var(--text2)}
.quick-link-icon svg{width:17px;height:17px}
.quick-link-label{font-size:13px;font-weight:600;color:var(--text)}

/* ---- DROP ZONE ---- */
.drop-zone{border:1.5px dashed var(--border);border-radius:10px;background:rgba(0,0,0,0.015);padding:30px 20px;text-align:center;cursor:pointer;transition:all 0.2s}
.drop-zone:hover,.drop-zone.drag-over{border-color:var(--accent-line);background:rgba(0,0,0,0.03)}
.drop-zone-icon{color:var(--text3);opacity:.6;display:inline-flex;margin-bottom:6px;font-size:32px}
.drop-zone p{font-size:13px;color:var(--text2);margin:6px 0 2px}
.drop-zone small{font-family:var(--mono);font-size:10px;color:var(--text3)}

/* ---- UPLOAD ROWS ---- */
.upload-item{background:var(--bg2);border:1px solid var(--border);border-radius:8px;padding:10px 12px;margin-bottom:6px;display:flex;align-items:center;justify-content:space-between}
.upload-item:hover{border-color:var(--accent-line)}
.upload-item-name{font-size:13px;color:var(--text);gap:8px;display:flex;align-items:center}
.upload-item-meta{font-family:var(--mono);font-size:10px;color:var(--text3)}

/* ---- TREE ---- */
.tree-header{padding:5px 8px;border-radius:6px;font-size:12px;font-weight:600;color:var(--text);display:flex;align-items:center;gap:8px;transition:all 0.15s}
.tree-header:hover{background:var(--accent-soft);color:var(--text)}
.tree-toggle{font-size:9px;color:var(--text3);width:14px}
.tree-leaf{padding:5px 8px 5px 22px;border-radius:6px;font-size:12px;color:var(--text2);display:flex;align-items:center;gap:8px;cursor:pointer;transition:all 0.15s}
.tree-leaf:hover{background:var(--accent-soft);color:var(--text)}
.tree-leaf.active{background:rgba(0,0,0,0.07);color:var(--text);font-weight:600}

/* ---- TABS ---- */
.tab-btn{font-family:var(--mono);font-size:11px;letter-spacing:0.5px;color:var(--text3);padding:8px 16px;font-weight:600;cursor:pointer;border:none;background:none;border-bottom:2px solid transparent;transition:all 0.15s;white-space:nowrap}
.tab-btn:hover{color:var(--text)}
.tab-btn.active{color:var(--text);border-bottom-color:var(--text)}

/* ---- MODALS ---- */
.modal{background:var(--card);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow)}
.modal-title{font-family:'Inter',sans-serif;font-size:15px;font-weight:600;letter-spacing:-0.01em}
.modal-overlay{background:rgba(0,0,0,0.6);backdrop-filter:blur(6px);display:none;position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;align-items:center;justify-content:center}

/* ---- INFO / NOTICE BOXES (de-blued) ---- */
.info-box{background:var(--bg2);border:1px solid var(--border);color:var(--text2);border-radius:8px;font-size:12px;padding:12px 16px;margin-bottom:12px}
.notice-box.blue{background:var(--bg2);border-color:var(--border);color:var(--text2)}

/* ---- TOASTS ---- */
.toast{border-radius:9px;padding:12px 18px;font-size:12px;font-weight:600;display:flex;align-items:center;gap:8px;box-shadow:var(--shadow);animation:slideIn 0.3s ease;min-width:240px}
.toast-info{background:var(--bg2);border:1px solid var(--border);color:var(--text)}
.toast-success{background:rgba(22,163,74,0.10);border:1px solid rgba(22,163,74,0.30);color:var(--accent-green)}
.toast-error{background:rgba(220,38,38,0.10);border:1px solid rgba(220,38,38,0.30);color:var(--accent-red)}
.toast-warning{background:rgba(217,119,6,0.10);border:1px solid rgba(217,119,6,0.30);color:var(--accent-gold)}

/* ---- EXAM MODULE (de-blued; mono accents) ---- */
.exam-card{background:var(--card);border-radius:12px;border:1px solid var(--border);padding:18px;margin-bottom:14px;transition:border-color 0.15s}
.exam-card:hover{border-color:var(--accent-line)}
.exam-card-title{font-weight:600;font-size:14px;color:var(--text)}
.q-card{background:var(--card);border-radius:12px;border:1px solid var(--border);padding:18px;margin-bottom:14px}
.q-card .q-num{font-family:var(--mono);color:var(--text2);font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;margin-bottom:6px}
.q-option{border-radius:9px;color:var(--text2);display:flex;align-items:center;gap:10px;padding:11px 14px;border:1px solid var(--border);margin-bottom:8px;cursor:pointer;transition:all 0.12s;font-size:13px;user-select:none}
.q-option:hover{border-color:var(--accent-line);background:var(--accent-soft);color:var(--text)}
.q-option.selected{border-color:var(--accent-line);background:rgba(0,0,0,0.06);color:var(--text)}
.q-option.selected .radio{border-color:var(--text)}
.q-option.selected .radio::after{background:var(--text);content:'';width:8px;height:8px;border-radius:50%}
.q-option.correct{border-color:rgba(74,222,128,0.4);background:rgba(22,163,74,0.10);color:var(--text)}
.q-option.incorrect{border-color:rgba(248,113,113,0.4);background:rgba(220,38,38,0.10);color:var(--text)}
.exam-timer .clock{font-family:var(--mono);color:var(--text);font-size:24px;font-weight:700;letter-spacing:1px;font-variant-numeric:tabular-nums}
.exam-progress-fill{background:var(--text);height:100%;transition:width 0.3s}
.result-score{font-family:'Inter',sans-serif;font-size:48px;font-weight:700;line-height:1}
.exam-runner-bar h2,.result-score{font-weight:700}

/* ---- DEVICE TOGGLE ---- */
.device-btn.active{background:var(--accent);color:#04121f}

/* ---- tree column min-height (kept) ---- */
#journalTree,#logbookTree,#jcSiteTree,#jcOfficeTree,#toolCheckTree{min-height:60vh}


/* ============================================================
   AUDIOWIDE DISPLAY LAYER (branding + headings only)
   Body stays Inter, data stays JetBrains Mono.
   ============================================================ */
.banner-title,.logo-label{font-family:var(--display)!important}
.page-header h1{font-family:var(--display)!important;font-weight:400;letter-spacing:0.5px;font-size:20px;color:var(--text)}
.modal-title{font-family:var(--display)!important;font-weight:400;letter-spacing:0.4px;font-size:15px}
.result-score,.exam-runner-bar h2{font-family:var(--display)!important;font-weight:400}
.card-title{font-family:var(--display)!important;font-weight:400;letter-spacing:1px;font-size:11px;color:var(--text);margin-bottom:14px;display:flex;align-items:center;gap:8px}

/* banner title sizing tuned for Audiowide */
.banner-title{font-size:10px;letter-spacing:2.5px;font-family:'Inter',sans-serif;color:rgba(255,255,255,0.8);text-transform:uppercase;text-shadow:0 0 20px rgba(255,255,255,0.5);white-space:nowrap}

/* logo caption labels under side marks */
.logo-label{font-size:8px;letter-spacing:1.5px;color:var(--text3);text-transform:uppercase;margin-top:5px;text-align:center;white-space:nowrap}
.banner-logo-col{display:flex;flex-direction:column;align-items:center;gap:2px}

/* --- icon consistency pass: tree-toggle + breadcrumb chevrons --- */
.tree-toggle{display:inline-flex;align-items:center;justify-content:center;font-size:10px;transition:transform 0.2s;width:14px}
.crumb{display:flex;align-items:center;flex-wrap:wrap}
.crumb-sep{width:11px;height:11px;opacity:.45;margin:0 3px;flex-shrink:0}

/* categorized sidebar nav */
.nav-group-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px 4px;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);cursor:pointer;user-select:none}
.nav-group-header:hover{color:var(--text2)}
.nav-caret{transition:transform .15s ease;opacity:.55;flex-shrink:0}
.nav-group-header.collapsed .nav-caret{transform:rotate(-90deg)}
.nav-group{display:flex;flex-direction:column}
.nav-group.collapsed{display:none}

.badge-success{background:transparent;color:var(--accent-green);border-color:var(--accent-green)}
.badge-warning{background:transparent;color:var(--accent-gold);border-color:var(--accent-gold)}
.badge-danger{background:transparent;color:var(--accent-red);border-color:var(--accent-red)}

.modal{scrollbar-width:thin;scrollbar-color:var(--border) transparent;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px;width:90%;max-width:520px;max-height:90vh;overflow-y:auto;overflow-x:hidden;box-shadow:var(--shadow)}
.modal::-webkit-scrollbar{width:8px}
.modal::-webkit-scrollbar-track{background:transparent}
.modal::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}

/* ===== responsive / mobile ===== */
#device-toggle{display:none !important;position:fixed;bottom:16px;left:16px;z-index:900;background:var(--card);border:1px solid var(--border);border-radius:8px;overflow:hidden;box-shadow:var(--shadow);opacity:0.18;transform:scale(0.82);transform-origin:bottom left;transition:opacity .2s,transform .2s}
#navToggle{display:none;position:fixed;top:10px;left:10px;z-index:1003;width:40px;height:40px;align-items:center;justify-content:center;background:var(--card);color:var(--text);border:1px solid var(--border);border-radius:8px;font-size:18px;line-height:1;cursor:pointer;box-shadow:var(--shadow)}
#navBackdrop{display:none}
@media (max-width:768px){
  #banner{height:64px}
  .banner-content{padding:0 12px;justify-content:center}
  .banner-logo-col{display:none}
  .banner-center{flex-direction:row;gap:10px}
  .banner-center .logo-bubble{width:38px;height:38px}
  .banner-title{font-size:11px;letter-spacing:1px}
  #app{display:block;min-height:auto}
  #navToggle{display:flex}
  #sidebar{position:fixed;top:0;left:0;height:100vh;min-height:100vh;width:82%;max-width:300px;z-index:1002;transform:translateX(-100%);transition:transform .22s ease;box-shadow:6px 0 30px rgba(0,0,0,.45)}
  body.nav-open #sidebar{transform:translateX(0)}
  #navBackdrop{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:1001}
  body.nav-open #navBackdrop{display:block}
  #main{width:100%;height:auto;min-height:calc(100vh - 64px)}
  .page{padding:16px !important}
  .page-header{flex-wrap:wrap;gap:8px;margin-bottom:14px;padding-top:4px}
  .page-header h1{font-size:18px}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr;gap:12px}
  .modal{width:94% !important;max-width:94% !important;max-height:92vh;padding:18px}
  .table{display:block;overflow-x:auto;white-space:nowrap}
  .tab-btn{font-size:11px;padding:8px 10px}
  #toast-container{right:10px;left:10px;bottom:16px}
}

/* ===== certificate compliance — grouped view ===== */
.dept-group{border:1px solid var(--border);border-radius:10px;margin-bottom:10px;overflow:hidden;background:var(--card)}
.dept-group>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:12px 14px;font-weight:600;font-size:13px;color:var(--text);user-select:none}
.dept-group>summary::-webkit-details-marker{display:none}
.dept-group>summary::before{content:'\25B8';color:var(--text2);font-size:11px;transition:transform .15s}
.dept-group[open]>summary::before{transform:rotate(90deg)}
.dept-group>summary .dept-name{flex:1}
.dept-flag{font-size:10px;font-weight:700;padding:2px 8px;border-radius:20px;text-transform:uppercase;letter-spacing:.3px}
.dept-flag.red{background:rgba(239,68,68,.15);color:var(--accent-red)}
.dept-flag.gold{background:rgba(240,165,0,.15);color:var(--accent-gold)}
.dept-flag.green{background:rgba(34,197,94,.12);color:var(--accent-green)}
.dept-body{padding:2px 14px 12px}
.cert-emp{padding:8px 0;border-top:1px solid var(--border-soft)}
.cert-emp:first-child{border-top:none}
.cert-emp-name{font-size:12px;font-weight:600;color:var(--text);margin-bottom:4px}
.cert-row{display:flex;align-items:center;gap:10px;padding:5px 0;flex-wrap:wrap}
.cert-row .ct-t{flex:1;min-width:110px;font-size:12px;color:var(--text)}
.cert-row .ct-d{font-size:11px;color:var(--text2);font-family:var(--mono);white-space:nowrap}
#sidebar{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}

.badge-status.ignored{background:rgba(148,163,184,.15);color:var(--text2)}
.cert-row.ignored{opacity:.6}
.cert-row.ignored .ct-t{text-decoration:line-through}

/* traceability audit trail + request status badges */
.audit-trail{margin-top:6px;border-left:2px solid var(--border);padding-left:10px}
.audit-row{display:flex;justify-content:space-between;gap:10px;padding:3px 0;font-size:11px}
.audit-act{font-weight:600;color:var(--text)}
.audit-meta{color:var(--text2);font-family:var(--mono)}
.badge-submitted{background:rgba(148,163,184,.15);color:var(--text2)}
.badge-approved{background:rgba(34,197,94,.15);color:var(--accent-green)}
.badge-ordered{background:rgba(59,130,246,.15);color:#3b82f6}
.badge-received{background:rgba(34,197,94,.22);color:var(--accent-green)}
.badge-declined{background:rgba(239,68,68,.15);color:var(--accent-red)}

.dr-line{border:1px solid var(--border);border-radius:8px;padding:10px;margin-bottom:10px;background:var(--bg2)}
.dr-checks{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:8px;font-size:11px}

.badge-issued{background:rgba(59,130,246,.15);color:#3b82f6}
.badge-collected{background:rgba(34,197,94,.22);color:var(--accent-green)}

.badge-signedoff{background:rgba(34,197,94,.22);color:var(--accent-green)}

.dr-grid{width:100%;border-collapse:collapse;font-size:11px}
.dr-grid th,.dr-grid td{border:1px solid var(--border-soft);padding:3px 4px;text-align:left;white-space:nowrap}
.dr-grid th{background:var(--bg2);font-weight:700}
.dr-grid input.form-control{padding:4px 6px;font-size:11px;height:auto}
.dr-grid input[type=checkbox]{width:16px;height:16px}

/* directory — compact cards (~70%) */
#employeeDirectoryList{display:grid;grid-template-columns:repeat(auto-fill,minmax(256px,1fr));gap:10px}
.emp-dir-card{padding:11px}

/* nav favourites + Jenna themes */
.nav-item{display:flex;align-items:center}
.nav-item .nav-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-star{opacity:.3;font-size:12px;cursor:pointer;padding:0 2px;flex-shrink:0}
.nav-star.on{opacity:1;color:#f5b301}
.nav-item:hover .nav-star{opacity:.65}
.nav-item:hover .nav-star.on{opacity:1}

/* ---- Training library tree ---- */
.tree-row{display:flex;align-items:center;gap:6px;padding:4px 6px;border-radius:6px;font-size:13px}
.tree-row:hover{background:rgba(0,0,0,0.04)}
.tree-caret{cursor:pointer;width:16px;display:inline-flex;justify-content:center;color:var(--text-soft,#555);user-select:none;font-size:11px}
.tree-name{cursor:pointer;flex:1;display:flex;align-items:center;gap:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tree-actions{display:none;gap:4px;flex-shrink:0}
.tree-row:hover .tree-actions{display:flex}
.tree-empty,.tree-loading{font-size:11px;color:var(--text-soft,#777);padding:3px 6px}

/* ===== Project Board (Kanban / list) ===== */
.pb-toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.pb-summary{display:flex;gap:12px;flex-wrap:wrap;margin-left:auto}
.pb-pill{font-size:11px;color:var(--text2);display:inline-flex;align-items:center;gap:6px}
.pb-dot{width:9px;height:9px;border-radius:50%;display:inline-block}
.pb-board{display:flex;gap:12px;align-items:flex-start}
.pb-col{flex:1 1 0;min-width:0;background:rgba(255,255,255,0.02);border:1px solid var(--glass-border);border-radius:12px;display:flex;flex-direction:column;min-height:120px;transition:flex-basis .2s}
.pb-col-head{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 12px;font-weight:700;font-size:12px;color:var(--text);letter-spacing:.3px;cursor:pointer;user-select:none}
.pb-col-chev{color:var(--text3);font-size:14px;line-height:1}
.pb-col-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pb-col-collapsed{flex:0 0 46px;min-width:46px}
.pb-col-collapsed .pb-col-body{display:none}
.pb-col-collapsed .pb-col-head{flex-direction:column;align-items:center;gap:10px;padding:10px 4px;height:100%}
.pb-col-collapsed .pb-col-name{writing-mode:vertical-rl;transform:rotate(180deg);flex:none;max-height:220px}
.pb-col-n{font-size:11px;color:var(--text3);background:rgba(255,255,255,0.06);border-radius:10px;padding:1px 8px;font-weight:600}
.pb-col-body{padding:8px;display:flex;flex-direction:column;gap:8px;min-height:40px}
.pb-card{background:var(--card);border:1px solid var(--glass-border);border-radius:8px;padding:10px;cursor:pointer;transition:border-color .15s,transform .05s}
.pb-card:hover{border-color:var(--accent-line)}
.pb-card:active{transform:scale(.99)}
.pb-card-top{display:flex;justify-content:space-between;align-items:center;gap:6px;margin-bottom:4px}
.pb-ref{font-family:var(--mono);font-size:10px;color:var(--text3)}
.pb-jc{font-size:9px;color:var(--accent);border:1px solid var(--accent-line);border-radius:5px;padding:1px 5px;white-space:nowrap}
.pb-card-title{font-size:12px;font-weight:600;color:var(--text);line-height:1.35;margin-bottom:4px}
.pb-card-meta{font-size:10px;color:var(--text2);display:flex;gap:5px;flex-wrap:wrap}
.pb-card-date{font-size:10px;color:var(--text3);margin-top:5px}
.pb-empty{font-size:11px;color:var(--text3);text-align:center;padding:14px 0}
.pb-lgroup{margin-bottom:18px}
.pb-lgroup-head{font-weight:700;font-size:12px;color:var(--text);padding:6px 10px;margin-bottom:8px}
.pb-list .pb-card{margin-bottom:6px}
.pb-status-sel{margin:0 0 10px;font-size:11px;height:32px}
@media(max-width:820px){ .pb-summary{margin-left:0;width:100%} }

/* ===== H&S Induction manual ===== */
.hsi-manual{max-height:62vh;overflow-y:auto;padding-right:10px;font-size:13px;line-height:1.6;color:var(--text2)}
.hsi-manual h3.hsi-h1{font-size:14px;color:var(--text);margin:18px 0 6px;padding-top:10px;border-top:1px solid var(--border-soft)}
.hsi-manual h4.hsi-h2{font-size:12.5px;color:var(--text);margin:12px 0 4px}
.hsi-manual p{margin:0 0 8px}
.hsi-manual ul{margin:0 0 10px 18px;padding:0}
.hsi-manual li{margin:0 0 4px}
.hsi-table{width:100%;border-collapse:collapse;margin:8px 0 14px;font-size:12px}
.hsi-table th,.hsi-table td{border:1px solid var(--border);padding:6px 8px;text-align:left;vertical-align:top;color:var(--text2)}
.hsi-table th{background:var(--bg2);color:var(--text);font-weight:600}

/* ── Dead-space fix ──────────────────────────────────────────────
   The honeycomb home (#hive) must overlay the viewport, NOT sit in
   the page flow. If a deployed build leaves it in flow it reserves a
   full-viewport-tall box above every page (opacity-hidden but still
   occupying space), pushing all page content down by one screen.
   Forcing fixed positioning removes that band on every page. */
#hive{position:fixed!important;top:0!important;right:0!important;bottom:0!important;left:0!important;z-index:900}

/* ── Dead-space fix, part 2 ──────────────────────────────────────
   In the deployed build the pages render as direct <body> children,
   leaving #app (with its hidden sidebar + empty #main) as a stray
   full-viewport shell in the flow ABOVE them, reserving one screen
   of dead space. Collapse it. min-height:0 is safe in the other
   layout too (where #app holds the pages) — it just shrinks to fit.
   body>.page gets top padding so content clears the fixed MENU button. */
#app{min-height:0!important}
#main{min-height:0!important}
body>.page{padding-top:72px!important}

/* ── Lighter home screen ─────────────────────────────────────────
   The hive home used a near-black navy gradient. Lift it to a
   lighter navy so it doesn't read as so dark. !important so it wins
   over the inline gradient in index.html (which isn't deploying). */
#hive{ background:radial-gradient(120% 90% at 50% 42%,#0e3f6b 0%,#0b3057 34%,#082139 64%,#061a30 100%)!important; }