/* APEX AVIATION CAMPUS — Management Portal Design System */
:root {
  --obsidian:#0A0A0F;--carbon:#111118;--slate:#1A1A24;--mid:#22222E;
  --border-subtle:rgba(255,255,255,0.07);--border:rgba(255,255,255,0.12);
  --gold:#C4973A;--gold-dim:#8a6825;--gold-light:#dab96a;
  --text:#E8E8F0;--text-muted:#9090A8;--text-dim:#5A5A70;
  --red:#c0392b;--green:#27ae60;--amber:#e67e22;--blue:#2980b9;
  --font-sans:'Inter',system-ui,sans-serif;
  --font-display:'Cormorant Garamond',Georgia,serif;
  --font-mono:'JetBrains Mono',monospace;
  --sidebar-w:240px;--topbar-h:56px;
  --radius:6px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--font-sans);background:var(--obsidian);color:var(--text);font-size:14px;line-height:1.5}

/* ── Layout ── */
.portal-shell{display:grid;grid-template-columns:var(--sidebar-w) 1fr;grid-template-rows:var(--topbar-h) 1fr;height:100vh;overflow:hidden}
.topbar{grid-column:1/-1;background:var(--carbon);border-bottom:1px solid var(--border-subtle);display:flex;align-items:center;padding:0 1.25rem;gap:1rem;z-index:100}
.sidebar{background:var(--carbon);border-right:1px solid var(--border-subtle);overflow-y:auto;padding:.75rem 0}
.main-content{overflow-y:auto;padding:2rem}
.page-inner{max-width:1400px;margin:0 auto}

/* ── Topbar ── */
.topbar-logo{display:flex;align-items:center;gap:.6rem;text-decoration:none}
.topbar-wordmark{font-family:var(--font-display);font-size:16px;font-weight:600;color:var(--text);letter-spacing:.5px}
.topbar-tag{font-family:var(--font-mono);font-size:9px;color:var(--gold);letter-spacing:1.5px;margin-top:1px}
.topbar-sep{width:1px;height:24px;background:var(--border-subtle);margin:0 .5rem}
.topbar-school{font-size:12px;color:var(--text-muted);font-family:var(--font-mono);letter-spacing:.5px}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:.75rem}
.topbar-user{font-size:12px;color:var(--text-muted)}
.topbar-role{font-family:var(--font-mono);font-size:10px;color:var(--gold);letter-spacing:1px;background:rgba(196,151,58,.1);padding:2px 8px;border-radius:12px}
.topbar-btn{background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:13px;font-family:var(--font-sans);padding:4px 8px;border-radius:var(--radius);transition:color .15s}
.topbar-btn:hover{color:var(--text)}

/* ── Sidebar ── */
.sidebar-section{padding:.25rem 0}
.sidebar-label{font-family:var(--font-mono);font-size:9px;letter-spacing:2px;color:var(--text-dim);padding:.5rem 1rem .25rem;text-transform:uppercase}
.sidebar-link{display:flex;align-items:center;gap:.6rem;padding:.45rem 1rem;font-size:13px;color:var(--text-muted);text-decoration:none;border-left:2px solid transparent;transition:all .15s;cursor:pointer}
.sidebar-link:hover{color:var(--text);background:rgba(255,255,255,.04);border-left-color:var(--border)}
.sidebar-link.active{color:var(--gold);background:rgba(196,151,58,.08);border-left-color:var(--gold)}
.sidebar-link .ico{width:16px;height:16px;opacity:.7;flex-shrink:0}
.sidebar-link.active .ico{opacity:1}
.sidebar-badge{margin-left:auto;background:var(--red);color:#fff;font-size:10px;font-family:var(--font-mono);padding:1px 6px;border-radius:10px;min-width:18px;text-align:center}
.sidebar-badge.gold{background:var(--gold-dim);color:var(--gold-light)}

/* ── Page header ── */
.page-header{margin-bottom:1.75rem;padding-bottom:1.25rem;border-bottom:1px solid var(--border-subtle);display:flex;align-items:flex-start;gap:1rem;flex-wrap:wrap}
.page-title{font-family:var(--font-display);font-size:1.75rem;font-weight:600}
.page-sub{font-size:13px;color:var(--text-muted);margin-top:.25rem}
.page-actions{margin-left:auto;display:flex;gap:.5rem;flex-wrap:wrap}

/* ── Cards ── */
.card{background:var(--carbon);border:1px solid var(--border-subtle);border-radius:var(--radius);padding:1.25rem 1.5rem;margin-bottom:1rem}
.card-title{font-size:13px;font-weight:600;margin-bottom:.75rem;display:flex;align-items:center;gap:.5rem}
.card-title-mono{font-family:var(--font-mono);font-size:10px;letter-spacing:1.5px;color:var(--gold);text-transform:uppercase}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:1px;background:var(--border-subtle)}
.stat-cell{background:var(--carbon);padding:1rem 1.25rem}
.stat-val{font-family:var(--font-display);font-size:1.75rem;font-weight:600;color:var(--gold)}
.stat-label{font-size:11px;color:var(--text-dim);font-family:var(--font-mono);letter-spacing:.5px;margin-top:.15rem}
.stat-sub{font-size:12px;color:var(--text-muted);margin-top:.15rem}

/* ── Tables ── */
.table-wrap{overflow-x:auto;margin:-1px}
table.data-table{width:100%;border-collapse:collapse;font-size:13px}
.data-table th{text-align:left;font-family:var(--font-mono);font-size:10px;letter-spacing:1.5px;color:var(--gold);padding:.6rem .75rem;border-bottom:1px solid var(--border);white-space:nowrap}
.data-table td{padding:.7rem .75rem;border-bottom:1px solid var(--border-subtle);color:var(--text-muted);vertical-align:middle}
.data-table td:first-child{color:var(--text)}
.data-table tr:last-child td{border-bottom:none}
.data-table tr{cursor:pointer;transition:background .1s}
.data-table tr:hover td{background:rgba(255,255,255,.03)}
.data-table .mono{font-family:var(--font-mono);font-size:12px}

/* ── Status badges ── */
.badge{display:inline-block;font-family:var(--font-mono);font-size:10px;letter-spacing:.5px;padding:2px 8px;border-radius:3px;text-transform:uppercase;font-weight:500}
.badge-green{background:rgba(39,174,96,.15);color:#4ae08a;border:1px solid rgba(39,174,96,.25)}
.badge-gold{background:rgba(196,151,58,.15);color:var(--gold);border:1px solid rgba(196,151,58,.25)}
.badge-red{background:rgba(192,57,43,.15);color:#e06c5a;border:1px solid rgba(192,57,43,.25)}
.badge-blue{background:rgba(41,128,185,.15);color:#5aabe0;border:1px solid rgba(41,128,185,.25)}
.badge-dim{background:rgba(255,255,255,.06);color:var(--text-dim);border:1px solid var(--border-subtle)}
.badge-amber{background:rgba(230,126,34,.15);color:#e8a56a;border:1px solid rgba(230,126,34,.25)}

/* ── Buttons ── */
.btn{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem 1rem;font-size:13px;font-family:var(--font-sans);border-radius:var(--radius);cursor:pointer;border:none;transition:all .15s;text-decoration:none;font-weight:500}
.btn-primary{background:var(--gold);color:#0A0A0F}
.btn-primary:hover{background:var(--gold-light)}
.btn-secondary{background:var(--slate);color:var(--text);border:1px solid var(--border-subtle)}
.btn-secondary:hover{border-color:var(--border);background:var(--mid)}
.btn-danger{background:rgba(192,57,43,.2);color:#e06c5a;border:1px solid rgba(192,57,43,.3)}
.btn-danger:hover{background:rgba(192,57,43,.35)}
.btn-sm{padding:.3rem .7rem;font-size:12px}
.btn-ghost{background:none;color:var(--text-muted);border:1px solid var(--border-subtle)}
.btn-ghost:hover{color:var(--text);border-color:var(--border)}
.btn:disabled{opacity:.4;cursor:not-allowed}

/* ── Forms ── */
.form-group{margin-bottom:1rem}
.form-label{display:block;font-size:12px;font-family:var(--font-mono);color:var(--text-muted);letter-spacing:.5px;margin-bottom:.4rem}
.form-input{width:100%;background:var(--slate);border:1px solid var(--border-subtle);color:var(--text);padding:.6rem .8rem;font-size:13px;font-family:var(--font-sans);border-radius:var(--radius);outline:none;transition:border-color .15s}
.form-input:focus{border-color:var(--gold)}
.form-input::placeholder{color:var(--text-dim)}
select.form-input{cursor:pointer}
textarea.form-input{resize:vertical;min-height:80px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.form-row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem}
.form-error{font-size:12px;color:#e06c5a;margin-top:.3rem}
.form-hint{font-size:11px;color:var(--text-dim);margin-top:.3rem}

/* ── Phase timeline ── */
.phase-bar{display:flex;gap:0;margin-bottom:1.5rem;overflow-x:auto}
.phase-step{flex:1;min-width:90px;padding:.6rem .75rem;background:var(--carbon);border-right:2px solid var(--obsidian);text-align:center}
.phase-step.done{background:rgba(39,174,96,.08);border-bottom:2px solid var(--green)}
.phase-step.current{background:rgba(196,151,58,.1);border-bottom:2px solid var(--gold)}
.phase-step.locked{opacity:.45}
.phase-step-num{font-family:var(--font-mono);font-size:9px;color:var(--text-dim);letter-spacing:1px}
.phase-step.done .phase-step-num{color:var(--green)}
.phase-step.current .phase-step-num{color:var(--gold)}
.phase-step-name{font-size:11px;font-weight:600;margin-top:2px}

/* ── Gate blocks ── */
.gate-row{display:flex;align-items:center;gap:.75rem;padding:.6rem .75rem;background:var(--slate);border-left:3px solid var(--border);margin-bottom:2px;border-radius:0 var(--radius) var(--radius) 0}
.gate-row.passed{border-left-color:var(--green)}
.gate-row.failed{border-left-color:var(--red)}
.gate-row.pending{border-left-color:var(--gold-dim)}
.gate-row.waived{border-left-color:var(--blue)}
.gate-name{font-size:13px;color:var(--text)}
.gate-meta{margin-left:auto;font-size:11px;color:var(--text-dim);font-family:var(--font-mono)}

/* ── Session cards ── */
.session-card{background:var(--carbon);border:1px solid var(--border-subtle);border-left:3px solid var(--border);border-radius:0 var(--radius) var(--radius) 0;padding:.9rem 1.1rem;margin-bottom:.4rem;cursor:pointer;transition:all .15s}
.session-card:hover{border-left-color:var(--gold)}
.session-card.satisfactory{border-left-color:var(--green)}
.session-card.unsatisfactory{border-left-color:var(--red)}
.session-card.scheduled{border-left-color:var(--gold-dim)}
.session-title{font-size:13px;font-weight:600}
.session-meta{font-size:12px;color:var(--text-dim);margin-top:.2rem;font-family:var(--font-mono)}

/* ── Modals ── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;z-index:1000;padding:1rem}
.modal{background:var(--carbon);border:1px solid var(--border);border-radius:var(--radius);width:100%;max-width:560px;max-height:90vh;overflow-y:auto}
.modal-header{padding:1.25rem 1.5rem;border-bottom:1px solid var(--border-subtle);display:flex;align-items:center;justify-content:space-between}
.modal-title{font-size:16px;font-weight:600}
.modal-close{background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:20px;line-height:1;padding:0 4px}
.modal-body{padding:1.5rem}
.modal-footer{padding:1rem 1.5rem;border-top:1px solid var(--border-subtle);display:flex;gap:.5rem;justify-content:flex-end}

/* ── Search bar ── */
.search-bar{display:flex;gap:.5rem;margin-bottom:1.25rem;flex-wrap:wrap;align-items:center}
.search-input{background:var(--slate);border:1px solid var(--border-subtle);color:var(--text);padding:.5rem .8rem;font-size:13px;font-family:var(--font-mono);border-radius:var(--radius);outline:none;min-width:220px;transition:border-color .15s}
.search-input:focus{border-color:var(--gold)}
.filter-select{background:var(--slate);border:1px solid var(--border-subtle);color:var(--text-muted);padding:.5rem .8rem;font-size:12px;font-family:var(--font-mono);border-radius:var(--radius);cursor:pointer}

/* ── Alerts ── */
.alert{padding:.8rem 1rem;border-radius:var(--radius);font-size:13px;margin-bottom:1rem;border-left:3px solid}
.alert-success{background:rgba(39,174,96,.1);border-color:var(--green);color:#4ae08a}
.alert-error{background:rgba(192,57,43,.1);border-color:var(--red);color:#e06c5a}
.alert-warn{background:rgba(230,126,34,.1);border-color:var(--amber);color:#e8a56a}
.alert-info{background:rgba(41,128,185,.1);border-color:var(--blue);color:#5aabe0}

/* ── Loading ── */
.loading{display:flex;align-items:center;gap:.6rem;color:var(--text-dim);font-size:13px;padding:2rem;justify-content:center}
.spinner{width:18px;height:18px;border:2px solid var(--border-subtle);border-top-color:var(--gold);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── Empty state ── */
.empty-state{text-align:center;padding:3rem 1.5rem;color:var(--text-dim)}
.empty-state-title{font-size:15px;font-weight:600;color:var(--text-muted);margin-bottom:.5rem}
.empty-state-sub{font-size:13px}

/* ── Tab nav ── */
.tab-nav{display:flex;gap:0;border-bottom:1px solid var(--border-subtle);margin-bottom:1.5rem}
.tab-btn{padding:.6rem 1rem;font-size:13px;color:var(--text-muted);background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;font-family:var(--font-sans);transition:all .15s;margin-bottom:-1px}
.tab-btn:hover{color:var(--text)}
.tab-btn.active{color:var(--gold);border-bottom-color:var(--gold)}

/* ── Utility ── */
.text-gold{color:var(--gold)}
.text-muted{color:var(--text-muted)}
.text-dim{color:var(--text-dim)}
.text-green{color:var(--green)}
.text-red{color:#e06c5a}
.mono{font-family:var(--font-mono);font-size:12px}
.flex{display:flex;align-items:center;gap:.5rem}
.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}
.ml-auto{margin-left:auto}
.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}
.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem}
.divider{border:none;border-top:1px solid var(--border-subtle);margin:1.25rem 0}

/* ── Responsive ── */
@media(max-width:900px){
  .portal-shell{grid-template-columns:1fr;grid-template-rows:var(--topbar-h) 1fr}
  .sidebar{display:none}
  .main-content{padding:1rem}
  .form-row,.form-row-3,.grid-2,.grid-3{grid-template-columns:1fr}
}

/* ── Login page ── */
.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--obsidian);padding:1rem}
.login-card{background:var(--carbon);border:1px solid var(--border-subtle);border-radius:var(--radius);padding:2.5rem;width:100%;max-width:400px}
.login-logo{text-align:center;margin-bottom:2rem}
.login-wordmark{font-family:var(--font-display);font-size:22px;font-weight:600;margin-top:.5rem}
.login-tagline{font-family:var(--font-mono);font-size:10px;color:var(--gold);letter-spacing:2px;margin-top:.25rem}