/* ============================================================
   SOT TTI SMART ADMISSIONS — DESIGN SYSTEM
   Concept: a technical training institute runs on schematics,
   spec sheets and workshop drawings. The interface borrows that
   vernacular — module tags, corner brackets, dotted grid fields,
   ruled data — instead of a generic "edtech SaaS" look.
   ============================================================ */

:root{
  /* Colour */
  --navy-900:#0B2E4E;
  --navy-800:#36b1fe;
  --navy-700:#1A4A79;
  --orange-500:#F2792A;
  --orange-600:#D9631A;
  --orange-100:#FCE3CE;
  --cream-050:#F7F5EF;
  --paper:#FFFFFF;
  --ink-900:#1B2530;
  --ink-600:#4B5A68;
  --ink-400:#7C8A97;
  --line:#DBE2E8;
  --line-strong:#B9C4CD;
  --sky-100:#EAF2F8;
  --green-600:#2C9463;
  --green-700:#237A50; /* referenced across many pages (competence bands, status badges) but was never actually defined - added rather than hunting down and editing 13 separate files */
  --green-100:#E1F3EA;
  --red-600:#C94B3F;
  --red-100:#FBE7E4;
  --amber-600:#B8791A;
  --amber-100:#FBEBD3;

  /* Type */
  --font-display:'Space Grotesk', 'Segoe UI', sans-serif;
  --font-body:'Inter', 'Segoe UI', sans-serif;
  --font-mono:'JetBrains Mono', 'Consolas', monospace;

  /* Layout */
  --radius:10px;
  --radius-sm:6px;
  --shadow-card: 0 1px 2px rgba(11,46,78,0.06), 0 8px 24px rgba(11,46,78,0.06);
  --shadow-pop: 0 12px 40px rgba(11,46,78,0.18);
  --maxw:1180px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink-900);
  background:var(--cream-050);
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;}
input,select,textarea{font-family:inherit;font-size:15px;}
:focus-visible{outline:2px solid var(--orange-500);outline-offset:2px;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;}

/* ---------- Blueprint grid background ---------- */
.blueprint{
  background-image:
    linear-gradient(rgba(11,46,78,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11,46,78,0.05) 1px, transparent 1px);
  background-size:28px 28px;
}

/* ---------- Corner bracket decoration ---------- */
.bracketed{position:relative;}
.bracketed::before,.bracketed::after{
  content:"";
  position:absolute;
  width:14px;height:14px;
  border:2px solid var(--orange-500);
  opacity:0.85;
}
.bracketed::before{top:-2px;left:-2px;border-right:none;border-bottom:none;}
.bracketed::after{bottom:-2px;right:-2px;border-left:none;border-top:none;}

/* ---------- Top nav ---------- */
.topnav{
  position:sticky;top:0;z-index:50;
  background:var(--navy-900);
  border-bottom:3px solid var(--orange-500);
}
.topnav .wrap{display:flex;align-items:center;justify-content:space-between;height:72px;}
.brand{display:flex;align-items:center;gap:12px;font-family:var(--font-display);}
.brand-mark{
  width:38px;height:38px;border-radius:8px;
  background:#fff;
  color:var(--orange-500);
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:14px;letter-spacing:0.5px;
  border:2px solid var(--orange-500);
}
.brand-name{font-weight:700;font-size:16px;color:#fff;line-height:1.15;}
.brand-name small{display:block;font-family:var(--font-body);font-weight:500;font-size:11px;color:#AFC1D2;letter-spacing:0.06em;text-transform:uppercase;}
.navlinks{display:flex;gap:6px;align-items:center;}
.navlinks a{
  padding:9px 14px;border-radius:999px;font-size:14px;font-weight:600;color:#E4ECF3;
  transition:background 0.15s ease,color 0.15s ease;
}
.navlinks a:hover{background:rgba(255,255,255,0.12);color:#fff;}
.navlinks a.current{background:var(--orange-500);color:#fff;}
.navlinks a.main-site-link{border:1px solid rgba(255,255,255,0.35);}
.navlinks a.main-site-link:hover{border-color:var(--orange-500);}
.btn-nav-cta{
  background:var(--orange-500)!important;color:#fff!important;
}
.btn-nav-cta:hover{background:var(--orange-600)!important;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 22px;border-radius:8px;font-weight:600;font-size:14.5px;
  border:1px solid transparent;transition:transform .12s ease, box-shadow .12s ease, background .15s ease;
  line-height:1;
}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--orange-500);color:#fff;}
.btn-primary:hover{background:var(--orange-600);box-shadow:0 6px 18px rgba(242,121,42,0.35);}
.btn-dark{background:var(--navy-900);color:#fff;}
.btn-dark:hover{background:var(--navy-800);}
.btn-outline{background:transparent;border-color:var(--line-strong);color:var(--navy-900);}
.btn-outline:hover{border-color:var(--navy-900);background:var(--sky-100);}
.btn-ghost{background:transparent;color:var(--navy-800);}
.btn-ghost:hover{background:var(--sky-100);}
.btn-sm{padding:8px 14px;font-size:13px;border-radius:6px;}
.btn-danger{background:var(--red-600);color:#fff;}
.btn-danger:hover{background:#a83c31;}
.btn-block{width:100%;}
.btn[disabled]{opacity:0.45;cursor:not-allowed;}

/* ---------- Module eyebrow tag ---------- */
.mod-tag{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:12px;letter-spacing:0.08em;
  color:var(--navy-800);background:var(--sky-100);
  border:1px solid var(--line);padding:5px 10px;border-radius:5px;
  text-transform:uppercase;
}
.mod-tag .dot{width:6px;height:6px;border-radius:50%;background:var(--orange-500);}

/* ---------- Hero ---------- */
.hero{padding:76px 0 60px;position:relative;overflow:hidden;}
.hero-grid{display:grid;grid-template-columns:1.1fr 0.9fr;gap:56px;align-items:center;}
.hero h1{
  font-family:var(--font-display);font-size:clamp(34px,4.4vw,54px);
  line-height:1.06;letter-spacing:-0.01em;color:var(--navy-900);margin:18px 0 18px;
}
.hero h1 em{color:var(--orange-500);font-style:normal;}
.hero p.lead{font-size:17px;color:var(--ink-600);max-width:520px;margin:0 0 30px;}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap;}
.hero-stats{display:flex;gap:28px;margin-top:38px;flex-wrap:wrap;}
.hero-stat b{font-family:var(--font-mono);font-size:22px;color:var(--navy-900);display:block;}
.hero-stat span{font-size:12px;color:var(--ink-600);text-transform:uppercase;letter-spacing:0.05em;}

/* ---------- Signature: signal-path diagram ---------- */
.signal-card{
  background:var(--navy-900);border-radius:16px;padding:26px 22px 22px;
  box-shadow:var(--shadow-pop); position:relative;
}
.signal-card .cap{
  font-family:var(--font-mono);color:var(--orange-500);font-size:11px;
  letter-spacing:0.1em;text-transform:uppercase;margin-bottom:10px;display:block;
}
.signal-card svg{width:100%;display:block;}
.signal-node-label{font-family:var(--font-mono);font-size:10.5px;fill:#CBD9E6;}
.signal-node-sub{font-family:var(--font-body);font-size:9.5px;fill:#8CA3B8;}

/* ---------- Section shell ---------- */
.section{padding:64px 0;}
.section-head{max-width:640px;margin-bottom:36px;}
.section-head h2{font-family:var(--font-display);font-size:30px;color:var(--navy-900);margin:10px 0 10px;letter-spacing:-0.01em;}
.section-head p{color:var(--ink-600);font-size:15.5px;margin:0;}
.section-alt{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}

/* ---------- Alert strip (registry-managed announcements) ---------- */
.alert-strip{padding:10px 0;font-size:13.5px;font-weight:600;text-align:center;}
.alert-strip .wrap{display:flex;align-items:center;justify-content:center;gap:8px;}
.alert-strip.success{background:var(--green-100);color:#1E6E48;border-bottom:1px solid #BEE4CF;}
.alert-strip.info{background:var(--sky-100);color:var(--navy-800);border-bottom:1px solid #CFE0EE;}
.alert-strip.warning{background:var(--amber-100);color:var(--amber-600);border-bottom:1px solid #F0D9AC;}

/* ---------- Advisor ---------- */
.advisor-card{background:var(--navy-900);border-radius:18px;padding:32px;box-shadow:var(--shadow-pop);color:#fff;}
.advisor-card .cap{font-family:var(--font-mono);color:var(--orange-500);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;}
.advisor-card h2{font-family:var(--font-display);font-size:26px;margin:10px 0 6px;color:#fff;}
.advisor-card p.lead2{color:#AFC1D2;font-size:14.5px;margin:0 0 22px;max-width:560px;}
.advisor-form{display:grid;grid-template-columns:1fr 180px;gap:14px;align-items:start;}
.advisor-form textarea{
  width:100%;min-height:96px;padding:14px 16px;border-radius:10px;border:1.5px solid rgba(255,255,255,0.18);
  background:rgba(255,255,255,0.06);color:#fff;resize:vertical;font-size:14.5px;
}
.advisor-form textarea::placeholder{color:#8CA3B8;}
.advisor-form select{
  width:100%;padding:12px 14px;border-radius:10px;border:1.5px solid rgba(255,255,255,0.18);
  background:rgba(255,255,255,0.06);color:#fff;font-size:14px;
}
.advisor-form select option{color:#111;}
.advisor-form .col{display:flex;flex-direction:column;gap:10px;}
.advisor-form label.mini{font-size:11.5px;color:#8CA3B8;text-transform:uppercase;letter-spacing:0.05em;}
.advisor-results{margin-top:22px;display:grid;gap:10px;}
.advisor-result{
  background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.14);border-radius:12px;
  padding:14px 16px;display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
  text-decoration:none;transition:background .15s ease,border-color .15s ease;
}
.advisor-result:hover{background:rgba(255,255,255,0.11);border-color:rgba(255,255,255,0.28);}
.advisor-result .name{font-weight:700;color:#fff;font-size:14.5px;}
.advisor-result .meta{font-size:12.5px;color:#AFC1D2;margin-top:3px;}
.advisor-result .match{
  font-family:var(--font-mono);font-size:11px;padding:4px 10px;border-radius:999px;font-weight:700;flex:none;
}
.advisor-result .match.yes{background:var(--green-600);color:#fff;}
.advisor-result .match.no{background:rgba(255,255,255,0.14);color:#CBD9E6;}
.advisor-empty{color:#8CA3B8;font-size:13.5px;margin-top:18px;}

/* ---------- Usage showcase ---------- */
.showcase-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.showcase-card{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:24px 20px;box-shadow:var(--shadow-card);}
.showcase-icon{
  width:44px;height:44px;border-radius:10px;background:var(--sky-100);display:flex;align-items:center;justify-content:center;
  margin-bottom:14px;font-size:19px;
}
.showcase-card h3{font-family:var(--font-display);font-size:16.5px;margin:0 0 8px;color:var(--navy-900);}
.showcase-card p{font-size:13.5px;color:var(--ink-600);margin:0;}

/* ---------- Pipeline / how it works ---------- */
.pipeline{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.pipe-card{
  background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:22px 18px;
  position:relative;box-shadow:var(--shadow-card);
}
.pipe-num{font-family:var(--font-mono);color:var(--orange-500);font-size:12px;letter-spacing:0.08em;}
.pipe-card h3{font-family:var(--font-display);font-size:17px;margin:10px 0 8px;color:var(--navy-900);}
.pipe-card p{font-size:13.5px;color:var(--ink-600);margin:0;}
.pipe-arrow{
  position:absolute;top:22px;right:-13px;width:24px;height:24px;color:var(--line-strong);
  display:none;
}

/* ---------- Course catalogue ---------- */
.course-filters{display:flex;gap:10px;margin-bottom:22px;flex-wrap:wrap;}
.chip{
  padding:8px 14px;border-radius:999px;border:1px solid var(--line-strong);background:var(--paper);
  font-size:13px;font-weight:600;color:var(--navy-800);
}
.chip.active{background:var(--navy-900);color:#fff;border-color:var(--navy-900);}
.course-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.course-card{
  background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:18px;
  box-shadow:var(--shadow-card);display:block;text-decoration:none;
  transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;
}
.course-card:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(11,46,78,0.12);border-color:var(--orange-500);}
.course-card .dept{font-size:11px;text-transform:uppercase;letter-spacing:0.06em;color:var(--ink-400);}
.course-card h4{font-family:var(--font-display);font-size:16px;margin:6px 0 10px;color:var(--navy-900);}
.course-meta{display:flex;justify-content:space-between;align-items:center;border-top:1px dashed var(--line);padding-top:10px;margin-top:4px;}
.course-meta .level{font-size:12px;font-weight:600;color:var(--navy-800);background:var(--sky-100);padding:3px 8px;border-radius:5px;}
.course-meta .grade{font-family:var(--font-mono);font-size:13px;color:var(--orange-600);font-weight:700;}
.course-campuses{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px;}
.campus-badge{font-size:11px;font-weight:600;color:var(--navy-800);background:var(--sky-100);border:1px solid var(--line-strong);padding:3px 9px;border-radius:999px;}
.course-subreqs{font-size:11.5px;color:var(--ink-500);margin-top:8px;line-height:1.4;}
.course-apply-cta{font-size:12.5px;font-weight:700;color:var(--orange-600);margin-top:12px;}

/* ---------- Back to top ---------- */
.back-to-top{
  position:fixed;bottom:24px;right:20px;z-index:60;
  width:46px;height:46px;border-radius:50%;background:var(--navy-900);color:#fff;
  border:none;cursor:pointer;font-size:18px;display:none;align-items:center;justify-content:center;
  box-shadow:0 6px 18px rgba(11,46,78,0.35);transition:opacity .2s ease;
}
.back-to-top.visible{display:flex;}
.back-to-top:hover{background:var(--orange-600);}

/* ---------- Cards / panels generic ---------- */
.card{background:var(--paper);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-card);}
.card-pad{padding:24px;}

/* ---------- Footer ---------- */
footer{background:var(--navy-900);color:#C7D5E2;padding:44px 0 26px;margin-top:20px;}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:20px;}
footer h5{color:#fff;font-family:var(--font-display);font-size:15px;margin:0 0 10px;}
footer a{color:#AFC1D2;font-size:13.5px;}
footer a:hover{color:#fff;}
footer .col{min-width:180px;}
.foot-bottom{border-top:1px solid rgba(255,255,255,0.12);margin-top:30px;padding-top:18px;font-size:12.5px;color:#8CA3B8;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;}

/* ---------- FORM (apply flow) ---------- */
.apply-shell{padding:44px 0 80px;}
.stepper{display:flex;align-items:center;gap:0;margin-bottom:38px;}
.step-item{display:flex;align-items:center;gap:10px;flex:1;}
.step-circle{
  width:34px;height:34px;border-radius:50%;border:2px solid var(--line-strong);
  display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);
  font-size:13px;color:var(--ink-400);background:var(--paper);flex:none;transition:all .2s ease;
}
.step-item.active .step-circle{border-color:var(--orange-500);color:var(--orange-600);background:var(--orange-100);}
.step-item.done .step-circle{border-color:var(--green-600);background:var(--green-600);color:#fff;}
.step-label{font-size:13px;font-weight:600;color:var(--ink-400);}
.step-item.active .step-label,.step-item.done .step-label{color:var(--navy-900);}
.step-line{flex:1;height:2px;background:var(--line);margin:0 8px;}
.step-item.done + .step-line{background:var(--green-600);}

.form-card{max-width:720px;margin:0 auto;}
.field{margin-bottom:20px;}
.field label{display:block;font-size:13px;font-weight:600;color:var(--navy-900);margin-bottom:7px;}

/* ---------- Review status banner + collapsible actions ---------- */
.review-stage{
  display:flex;align-items:center;gap:10px;padding:14px 16px;border-radius:10px;margin-bottom:16px;
  font-size:14px;font-weight:600;
}
.review-stage.stage-pending{background:var(--sky-100);color:var(--navy-800);}
.review-stage.stage-hod{background:var(--amber-100);color:var(--amber-600);}
.review-stage.stage-registrar{background:var(--amber-100);color:var(--amber-600);}
.review-stage.stage-done{background:var(--green-100);color:var(--green-600);}
.review-stage.stage-stopped{background:var(--red-100);color:var(--red-600);}
.review-stage .stage-admno{font-family:var(--font-mono);font-weight:700;margin-left:auto;}

.more-actions-toggle{
  display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--navy-800);
  cursor:pointer;padding:8px 0;user-select:none;
}
.more-actions-toggle .arrow{transition:transform .15s ease;}
.more-actions-toggle.open .arrow{transform:rotate(90deg);}
.more-actions-panel{display:none;padding-top:6px;gap:8px;flex-wrap:wrap;}
.more-actions-panel.open{display:flex;}

/* ---------- Bulk selection ---------- */
.bulk-bar{
  display:none;align-items:center;gap:10px;background:var(--navy-900);color:#fff;
  padding:12px 16px;border-radius:10px;margin-bottom:14px;flex-wrap:wrap;
}
.bulk-bar.show{display:flex;}
.bulk-bar .count{font-family:var(--font-mono);background:rgba(255,255,255,0.15);padding:3px 10px;border-radius:999px;font-size:12.5px;}
th.checkbox-col, td.checkbox-col{width:36px;text-align:center;}

/* ---------- Print (Reports page, Summary modals) ---------- */
@media print {
  .admin-side, .toolbar, .admin-topbar button, .modal-foot, .bulk-bar,
  .btn, .side-foot, .icon-btn { display:none !important; }
  .admin-shell{ display:block !important; }
  .admin-main{ padding:0 !important; }
  .modal-overlay:not(.open){ display:none !important; }
  .modal-overlay.open{ position:static !important; background:none !important; display:block !important; }
  .modal{ box-shadow:none !important; max-width:100% !important; }
  body{ background:#fff !important; }
}

/* ---------- Lightweight data table (sort + pagination) ---------- */
thead th[data-sort]{user-select:none;}
thead th[data-sort]:hover{color:var(--navy-900);}
.dt-pagination{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;
  padding:14px 4px 4px;font-size:13px;color:var(--ink-600);
}
.dt-pages{display:flex;align-items:center;gap:10px;}
.dt-page-label{font-family:var(--font-mono);font-size:12.5px;}
.req{color:var(--red-600);}
.field-error{color:var(--red-600);font-size:12.5px;margin-top:6px;min-height:0;}
.field input.invalid,.field select.invalid{border-color:var(--red-600) !important;}
.field .hint{font-size:12px;color:var(--ink-400);margin-top:5px;}
.field input,.field select,.field textarea{
  width:100%;padding:12px 14px;border:1.5px solid var(--line-strong);border-radius:8px;
  background:var(--paper);color:var(--ink-900);transition:border-color .15s ease;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--orange-500);}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.upload-box{
  border:2px dashed var(--line-strong);border-radius:10px;padding:28px 20px;text-align:center;
  background:var(--sky-100);cursor:pointer;transition:border-color .15s ease;
}
.upload-box:hover{border-color:var(--orange-500);}
.upload-box.has-file{border-color:var(--green-600);background:var(--green-100);}
.upload-box svg{margin:0 auto 10px;}
.upload-box .fname{font-family:var(--font-mono);font-size:12.5px;color:var(--navy-900);margin-top:8px;}
.form-actions{display:flex;justify-content:space-between;margin-top:32px;}
.review-row{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px dashed var(--line);font-size:14px;}
.review-row .k{color:var(--ink-600);}
.review-row .v{font-weight:600;color:var(--navy-900);text-align:right;}

/* ---------- Decision panels ---------- */
.decision-panel{border-radius:14px;padding:30px;text-align:center;}
.decision-panel.pass{background:var(--green-100);border:1.5px solid var(--green-600);}
.decision-panel.fail{background:var(--amber-100);border:1.5px solid var(--amber-600);}
.decision-panel .icon-circle{
  width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 14px;
}
.decision-panel.pass .icon-circle{background:var(--green-600);color:#fff;}
.decision-panel.fail .icon-circle{background:var(--amber-600);color:#fff;}
.decision-panel h3{font-family:var(--font-display);font-size:22px;margin:0 0 8px;color:var(--navy-900);}
.decision-panel p{color:var(--ink-600);margin:0 0 4px;font-size:14.5px;}
.index-pill{
  display:inline-block;margin-top:14px;font-family:var(--font-mono);background:var(--navy-900);color:#fff;
  padding:8px 16px;border-radius:8px;font-size:14px;letter-spacing:0.03em;
}

/* ---------- Tracker ---------- */
.track-hero{padding:60px 0 20px;text-align:center;}
.track-input-row{display:flex;gap:10px;max-width:460px;margin:26px auto 0;}
.track-input-row input{flex:1;text-align:center;font-family:var(--font-mono);letter-spacing:0.04em;}
.track-result{max-width:640px;margin:40px auto 0;}
.status-timeline{display:flex;justify-content:space-between;position:relative;margin:36px 0 10px;}
.status-timeline::before{
  content:"";position:absolute;top:17px;left:0;right:0;height:2px;background:var(--line);z-index:0;
}
.tl-node{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;flex:1;text-align:center;}
.tl-dot{width:34px;height:34px;border-radius:50%;background:var(--paper);border:2px solid var(--line-strong);display:flex;align-items:center;justify-content:center;color:var(--ink-400);}
.tl-node.reached .tl-dot{background:var(--navy-900);border-color:var(--navy-900);color:var(--orange-500);}
.tl-node.current .tl-dot{background:var(--orange-500);border-color:var(--orange-500);color:#fff;box-shadow:0 0 0 5px var(--orange-100);}
.tl-label{font-size:12px;font-weight:600;color:var(--ink-400);margin-top:9px;max-width:90px;}
.tl-node.reached .tl-label,.tl-node.current .tl-label{color:var(--navy-900);}
.tl-line-fill{position:absolute;top:17px;left:0;height:2px;background:var(--orange-500);z-index:0;transition:width .5s ease;}

.track-not-found{text-align:center;padding:40px 20px;color:var(--ink-600);}

/* ---------- Admin shell ---------- */
.admin-body{background:var(--cream-050);min-height:100vh;}
.admin-shell{display:grid;grid-template-columns:230px 1fr;min-height:100vh;transition:grid-template-columns .2s ease;}
.admin-side{background:var(--navy-900);color:#C7D5E2;padding:22px 16px;position:relative;transition:padding .2s ease;}
.admin-side .brand{color:#fff;margin-bottom:26px;padding:0 6px;}
.admin-side .brand-name{color:#fff;transition:opacity .15s ease;}
.admin-side .brand-name small{color:#8CA3B8;}

/* ---------- Collapsible sidebar ---------- */
.sidebar-toggle{
  position:absolute;top:26px;right:-13px;width:26px;height:26px;border-radius:50%;
  background:var(--orange-500);color:#fff;border:2px solid var(--navy-900);cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:11px;z-index:20;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1);padding:0;
}
.sidebar-toggle:hover{background:var(--orange-600);}
.admin-shell{transition:grid-template-columns .25s cubic-bezier(.34,1.1,.4,1);}
.admin-shell.collapsed{grid-template-columns:66px 1fr;}
.admin-shell.collapsed .admin-side{padding-left:10px;padding-right:10px;}
.admin-shell.collapsed .brand-name,
.admin-shell.collapsed .side-role,
.admin-shell.collapsed .nav-label{display:none;}
.admin-shell.collapsed .brand{justify-content:center;}
.admin-shell.collapsed .side-nav a{justify-content:center;padding:11px 4px;font-size:18px;position:relative;}
.admin-shell.collapsed .side-foot .btn{padding:10px 4px;font-size:16px;}
.admin-shell.collapsed .sidebar-toggle{transform:rotate(180deg);}
/* Collapsed icon-only links show their name on hover, so a link isn't
   just a mystery icon someone has to click-and-see to identify. */
.admin-shell.collapsed .side-nav a:hover::after{
  content:attr(data-tooltip); position:absolute; left:calc(100% + 8px); top:50%; transform:translateY(-50%);
  background:var(--navy-900); color:#fff; padding:6px 10px; border-radius:6px; font-size:12.5px;
  white-space:nowrap; z-index:30; box-shadow:0 4px 14px rgba(0,0,0,0.2); pointer-events:none;
}
/* Brief highlight when the sidebar expands and lands on the current
   page's link — a small nudge that this is actually where you are,
   not just a static list. */
@keyframes navPulse{
  0%{box-shadow:0 0 0 0 rgba(230,126,34,0.55);}
  100%{box-shadow:0 0 0 10px rgba(230,126,34,0);}
}
.side-nav a.nav-pulse{animation:navPulse .9s ease-out;}
@media (max-width:1000px){
  .sidebar-toggle{display:none;}
}
.side-role{
  font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:0.08em;
  background:rgba(255,255,255,0.08);padding:8px 12px;border-radius:6px;margin-bottom:20px;color:var(--orange-500);
}
.side-nav a{
  display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:8px;font-size:14px;font-weight:600;
  color:#C7D5E2;margin-bottom:3px;
}
/* Nav links are visible by default and applyRoleNav() hides the ones
   that don't belong to the signed-in role — the reverse of hiding by
   default and revealing via JS. That default-hide approach caused a
   brief flash of every link before the wrong ones vanished, which was
   worth avoiding, but it also meant that if applyRoleNav() ever failed
   or ran late for any reason (and this happened for real reasons more
   than once — a data-shape mismatch in one link's permission check, a
   database query elsewhere on the page throwing before it got a
   chance to run), every link stayed invisible for the rest of that
   page load, turning a cosmetic flash into someone unable to navigate
   at all. Between "occasionally see a link for half a second before
   it's correctly hidden" and "occasionally see nothing at all," the
   first is clearly the safer failure mode. */
.side-nav a:hover{background:rgba(255,255,255,0.06);}
.side-nav a.current{background:var(--orange-500);color:#fff;}
.side-foot{margin-top:auto;padding-top:20px;}
.admin-main{padding:30px 34px 60px;overflow-x:auto;}
.admin-topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:26px;}
.admin-topbar h1{font-family:var(--font-display);font-size:24px;color:var(--navy-900);margin:0;}
.admin-topbar .sub{font-size:13.5px;color:var(--ink-600);margin-top:4px;}

.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:28px;}
.kpi-card{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:18px 20px;box-shadow:var(--shadow-card);}
.kpi-card .label{font-size:12px;color:var(--ink-400);text-transform:uppercase;letter-spacing:0.05em;}
.kpi-card .value{font-family:var(--font-display);font-size:28px;color:var(--navy-900);margin:6px 0 4px;}
.kpi-card .delta{font-size:12px;font-weight:600;}
.kpi-card .delta.up{color:var(--green-600);}
.kpi-card .delta.flat{color:var(--ink-400);}

.panel{background:var(--paper);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-card);margin-bottom:24px;}
.panel-head{display:flex;justify-content:space-between;align-items:center;padding:18px 20px;border-bottom:1px solid var(--line);}
.panel-head h3{font-family:var(--font-display);font-size:16px;margin:0;color:var(--navy-900);}
.panel-body{padding:20px;}

.grid-2{display:grid;grid-template-columns:1.3fr 1fr;gap:16px;}

table{width:100%;border-collapse:collapse;font-size:13.5px;}
/* Wrap a table in <div class="table-scroll"> when its content can run
   wide — many allocated units for one trainer, a long class list —
   so just that table scrolls horizontally, not the whole page
   (sidebar and header stay put either way). */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.table-scroll table{min-width:640px;}
.marks-input{width:44px;padding:5px 3px;border:1px solid var(--line-strong);border-radius:5px;font-family:var(--font-mono);font-size:12.5px;text-align:center;}
.marks-input-error{border-color:var(--red-600);background:#fdeceb;}
thead th{
  text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:0.05em;color:var(--ink-400);
  padding:10px 12px;border-bottom:1.5px solid var(--line);font-weight:700;
}
tbody td{padding:12px 12px;border-bottom:1px solid var(--line);color:var(--ink-900);}
tbody tr:hover{background:var(--sky-100);}
tbody tr:last-child td{border-bottom:none;}
td.mono{font-family:var(--font-mono);font-size:12.5px;}

.badge{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:999px;text-transform:uppercase;letter-spacing:0.03em;}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;}
.badge.received{background:var(--sky-100);color:var(--navy-800);}
.badge.received::before{background:var(--navy-800);}
.badge.provisional{background:var(--amber-100);color:var(--amber-600);}
.badge.provisional::before{background:var(--amber-600);}
.badge.fee_verified{background:#E8E4FB;color:#5B4BB8;}
.badge.fee_verified::before{background:#5B4BB8;}
.badge.fully_admitted{background:var(--green-100);color:var(--green-600);}
.badge.fully_admitted::before{background:var(--green-600);}
.badge.not_qualified{background:var(--red-100);color:var(--red-600);}
.badge.not_qualified::before{background:var(--red-600);}

.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:16px;}
.toolbar input[type=search],.toolbar select{
  padding:9px 12px;border:1.5px solid var(--line-strong);border-radius:7px;font-size:13.5px;background:var(--paper);
}
.tag-filter{display:flex;gap:6px;flex-wrap:wrap;}

.modal-overlay{
  position:fixed;inset:0;background:rgba(11,46,78,0.45);display:none;align-items:center;justify-content:center;z-index:200;padding:20px;
}
.modal-overlay.open{display:flex;}
.modal{background:var(--paper);border-radius:14px;max-width:560px;width:100%;max-height:88vh;overflow-y:auto;box-shadow:var(--shadow-pop);}
.modal.modal-wide{max-width:1100px;}
.modal-head{display:flex;justify-content:space-between;align-items:center;padding:20px 22px;border-bottom:1px solid var(--line);}
.modal-head h3{font-family:var(--font-display);margin:0;font-size:17px;color:var(--navy-900);}
.modal-body{padding:22px;}
.modal-foot{padding:16px 22px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:10px;}
.icon-btn{background:transparent;border:none;color:var(--ink-400);font-size:18px;line-height:1;padding:4px;}
.icon-btn:hover{color:var(--ink-900);}

.toast{
  position:fixed;bottom:24px;right:24px;background:var(--navy-900);color:#fff;padding:14px 18px;border-radius:10px;
  font-size:13.5px;box-shadow:var(--shadow-pop);z-index:400;display:flex;align-items:center;gap:10px;
  opacity:0;transform:translateY(8px);transition:all .25s ease;
}
.toast.show{opacity:1;transform:translateY(0);}
.toast .dot{width:8px;height:8px;border-radius:50%;background:var(--green-600);}

/* Login page */
.login-shell{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--navy-900);position:relative;}
.login-card{background:var(--paper);border-radius:16px;padding:38px 34px;width:100%;max-width:400px;box-shadow:var(--shadow-pop);position:relative;z-index:1;}
.role-toggle{display:flex;background:var(--sky-100);border-radius:9px;padding:4px;margin-bottom:24px;}
.role-toggle button{flex:1;padding:9px;border-radius:6px;border:none;background:transparent;font-weight:600;font-size:13.5px;color:var(--ink-600);}
.role-toggle button.active{background:var(--navy-900);color:#fff;}
.login-note{font-size:12px;color:var(--ink-400);margin-top:18px;text-align:center;line-height:1.6;}

/* Responsive */
/* Both toggle buttons default to hidden — declared BEFORE their mobile
   media queries below, deliberately. CSS cascade rule: when two rules
   have equal specificity, the one that appears LATER in the stylesheet
   wins, regardless of whether either is inside a media query. Having
   these "off by default" declarations AFTER the media query that turns
   them on was the actual bug — it silently won on every screen size,
   including mobile, because it came later in source order despite its
   condition being "always true" rather than "only when narrow". */
.admin-mobile-toggle{display:none;}
.nav-toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:40px; height:40px; border:1px solid var(--line); border-radius:8px;
  background:#fff; cursor:pointer; padding:0;
}
.nav-toggle span{display:block; width:20px; height:2px; background:var(--navy-900); margin:0 auto;}

@media (max-width:1000px){
  .hero-grid{grid-template-columns:1fr;}
  .pipeline{grid-template-columns:repeat(2,1fr);}
  .course-grid{grid-template-columns:repeat(2,1fr);}
  .kpi-grid{grid-template-columns:repeat(2,1fr);}
  .grid-2{grid-template-columns:1fr;}
  .admin-shell{grid-template-columns:1fr;}
  .admin-side{
    position:fixed; top:0; left:0; bottom:0; width:230px; z-index:200;
    transform:translateX(-100%); transition:transform .2s ease;
    box-shadow:4px 0 24px rgba(0,0,0,0.25);
  }
  .admin-side.mobile-open{transform:translateX(0);}
  .admin-shell.collapsed{grid-template-columns:1fr;} /* higher-specificity override — without this, a desktop collapse state saved in localStorage silently breaks the mobile layout, since the plain .admin-shell reset below loses to the more specific desktop rule */
  .admin-shell.collapsed .admin-side{padding-left:16px;padding-right:16px;} /* the desktop-collapse styling doesn't apply on mobile — full sidebar either way */
  .admin-shell.collapsed .brand-name,
  .admin-shell.collapsed .side-role,
  .admin-shell.collapsed .nav-label{display:unset;}
  .sidebar-toggle{display:none;} /* the desktop collapse arrow doesn't make sense once the sidebar is an overlay */
  .mobile-sidebar-backdrop{
    display:none; position:fixed; inset:0; background:rgba(11,46,78,0.45); z-index:190;
  }
  .mobile-sidebar-backdrop.open{display:block;}
  .admin-mobile-toggle{
    display:flex; position:sticky; top:0; z-index:150;
    align-items:center; justify-content:space-between; gap:10px; background:var(--navy-900); color:#fff;
    padding:14px 18px; font-weight:600; font-size:14.5px;
    box-shadow:0 2px 10px rgba(11,46,78,0.25);
    transition:background .15s ease;
  }
  .admin-mobile-toggle:active{background:var(--navy-800);}
  .admin-mobile-toggle-current{display:flex;align-items:center;gap:9px;}
  .admin-mobile-toggle-current .nav-label{font-family:var(--font-display);letter-spacing:0.01em;}
  .mobile-chevron{
    font-size:13px; color:var(--orange-500); transition:transform .25s cubic-bezier(.34,1.56,.64,1);
    display:inline-block;
  }
  .admin-mobile-toggle.open .mobile-chevron{transform:rotate(180deg);}
  .admin-side{transition:transform .28s cubic-bezier(.34,1.1,.4,1) !important;} /* springier than a flat linear/ease slide — matches the chevron's bounce so opening feels like one coordinated motion, not two separate animations */
  .showcase-grid{grid-template-columns:repeat(2,1fr);}
  .advisor-form{grid-template-columns:1fr;}
}
@media (max-width:640px){
  .nav-toggle{display:flex;}
  .navlinks{
    display:none;
    position:absolute; top:72px; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--navy-900); border-bottom:3px solid var(--orange-500);
    box-shadow:0 8px 20px rgba(11,46,78,0.25);
    padding:8px;
  }
  .navlinks.open{display:flex;}
  .navlinks a{padding:12px 14px; border-radius:8px; width:100%;}
  .navlinks a.btn-nav-cta{margin-top:6px;}
  .pipeline{grid-template-columns:1fr;}
  .course-grid{grid-template-columns:1fr;}
  .kpi-grid{grid-template-columns:repeat(2,1fr);}
  .field-row{grid-template-columns:1fr;}
  .form-card{padding:0 4px;}
  .showcase-grid{grid-template-columns:1fr;}
}

/* ---------- Scroll-reveal animation ---------- */
/* Elements start faded/offset, then settle into place as they enter the
   viewport. Uses IntersectionObserver (see main.js initScrollReveal) —
   no animation library, keeps this lightweight. Different elements can
   stagger slightly via .sr-delay-1/2/3 for a less mechanical feel when
   several reveal together (e.g. a row of cards). */
.scroll-reveal{
  opacity:0; transform:translateY(28px);
  transition:opacity .65s cubic-bezier(.21,.6,.35,1), transform .65s cubic-bezier(.21,.6,.35,1);
  will-change:opacity, transform;
}
.scroll-reveal.sr-visible{opacity:1; transform:translateY(0);}
.scroll-reveal.sr-delay-1{transition-delay:.08s;}
.scroll-reveal.sr-delay-2{transition-delay:.16s;}
.scroll-reveal.sr-delay-3{transition-delay:.24s;}

/* Respect the visitor's OS-level motion preference — content still
   appears, just without the animated entrance. */
@media (prefers-reduced-motion: reduce){
  .scroll-reveal{opacity:1!important; transform:none!important; transition:none!important;}
}