:root{
  --bg:#0b1220;
  --card:#0f1a2d;
  --text:#e7eefc;
  --muted:#a9b7d0;
  --line:rgba(255,255,255,.08);
  --btn:#1e335a;
  --btn2:#2a4a87;
  --danger:#b84a4a;

  /* used by JS: fallback if JS doesn't set it */
  --topbar-h: 62px;
}

*{box-sizing:border-box}

body{
  margin:0;
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial;
  color:var(--text);
  background:var(--bg);
  background-size:cover;
  background-position:center;
}

/* Prevent background scroll when mobile nav open */
body.nav-open{ overflow:hidden; }

.bg-image{background-attachment:fixed}
a{color:#9ec1ff;text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1100px;margin:0 auto;padding:14px}

.topbar{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(10,16,28,.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
  padding:10px 14px;
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:space-between;
}

.brand{display:flex;align-items:center;gap:10px;min-width:0}
.logo{height:34px;width:auto}
.appname{font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:45vw}

/* =========================
   NAV (mobile-first + scoped)
   ========================= */

/* show hamburger by default */
.nav-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.06);
  border:1px solid var(--line);
  color:var(--text);
  padding:8px 10px;
  border-radius:10px;
  cursor:pointer;
  z-index:60; /* keep it clickable above overlays */
}
.nav-toggle:active{transform:translateY(1px)}

/* hide header nav by default (mobile) */
header.topbar #siteNav{
  display:none;
  flex-direction:column;
  align-items:stretch;
  gap:6px;

  position:fixed;
  left:10px;
  right:10px;

  /* sits below header height (set by JS), plus safe area */
  top: calc(var(--topbar-h) + 10px + env(safe-area-inset-top));

  background:rgba(10,16,28,.98);
  border:1px solid var(--line);
  border-radius:14px;
  padding:10px;

  max-height: calc(100vh - var(--topbar-h) - 30px - env(safe-area-inset-top));
  overflow:auto;
  -webkit-overflow-scrolling:touch;

  z-index:9999;
}

/* open state (force) */
body.nav-open header.topbar #siteNav{
  display:flex !important;
}

header.topbar #siteNav a{padding:6px 8px;border-radius:8px}
header.topbar #siteNav a:hover{background:rgba(255,255,255,.06)}
header.topbar #siteNav a,
header.topbar #siteNav .linkbtn{display:block;text-align:left;width:100%}

.linkbtn{
  background:none;
  border:none;
  color:#9ec1ff;
  cursor:pointer;
  padding:6px 8px;
  border-radius:8px;
}
.linkbtn:hover{background:rgba(255,255,255,.06)}

/* desktop: show links, hide hamburger */
@media (min-width: 721px){
  body.nav-open{ overflow:auto; } /* don't lock scroll on desktop */

  .nav-toggle{ display:none; }

  header.topbar #siteNav{
    display:flex !important;
    position:static;
    flex-direction:row;
    align-items:center;
    justify-content:flex-end;
    flex-wrap:wrap;
    gap:10px;

    max-height:none;
    overflow:visible;
    background:transparent;
    border:0;
    padding:0;
  }

  header.topbar #siteNav a,
  header.topbar #siteNav .linkbtn{
    display:inline-block;
    width:auto;
    text-align:inherit;
  }
}

.footer{opacity:.6;padding:16px;text-align:center}
.card{background:rgba(15,26,45,.92);border:1px solid var(--line);border-radius:14px;padding:14px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.row{display:flex;gap:8px;align-items:center}
.row-between{display:flex;gap:10px;align-items:flex-end;justify-content:space-between;flex-wrap:wrap}
.row.wrap{flex-wrap:wrap}
.stack{display:flex;flex-direction:column;gap:10px}

input,select,textarea{
  background:rgba(255,255,255,.05);
  border:1px solid var(--line);
  border-radius:10px;
  color:var(--text);
  padding:10px;
  min-width:0;
}
textarea{resize:vertical}

.btn{
  background:var(--btn);
  border:1px solid var(--line);
  color:var(--text);
  padding:9px 12px;
  border-radius:10px;
  cursor:pointer;
}
.btn:hover{background:var(--btn2)}
.btn-primary{background:#2b63c6}
.btn-primary:hover{background:#2f6fe0}
.btn-danger{background:var(--danger)}
.btn-danger:hover{filter:brightness(1.05)}

.pill{display:inline-block;padding:3px 8px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.05);font-size:12px}
.muted{color:var(--muted)}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:12px;overflow:hidden;text-overflow:ellipsis;max-width:360px;display:inline-block;vertical-align:bottom}

.table{width:100%;border-collapse:collapse}
.table-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:14px}
.table-wrap .table{min-width:760px}
.table th,.table td{padding:10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}

.list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}
.auth-card{max-width:420px;margin:40px auto;background:rgba(15,26,45,.96);border:1px solid var(--line);border-radius:16px;padding:18px}

.alert{background:rgba(184,74,74,.25);border:1px solid rgba(184,74,74,.5);padding:10px;border-radius:12px}
.alert.ok{background:rgba(52,211,153,.15);border-color:rgba(52,211,153,.35)}
.alert.error{background:rgba(184,74,74,.25);border-color:rgba(184,74,74,.5)}

.perm-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.perm{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);padding:10px;border-radius:12px;background:rgba(255,255,255,.03)}
.perm input{margin-top:3px}

.drag-handle{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);cursor:grab;user-select:none}
.role-card{outline:0}
.role-card:active .drag-handle{cursor:grabbing}

.announce{border-top:1px solid var(--line);padding-top:10px;margin-top:10px}
.announce-title{font-weight:800}
.tabs{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* ---------- RESPONSIVE ---------- */

@media (max-width: 900px){
  .grid-2,.grid-3{grid-template-columns:1fr}
  .perm-grid{grid-template-columns:1fr}
  .mono{max-width:220px}
}

@media (max-width: 720px){
  .topbar{align-items:flex-start}
  .appname{max-width:60vw}

  .row{flex-wrap:wrap}
  .row-between{align-items:stretch}
  input,select,textarea{width:100%}
  .btn{width:auto}
  .auth-card{margin:18px 10px}
  .table-wrap{border-radius:12px}
}

/* Force native selects dark */
select{
  background-color: rgba(255,255,255,.05) !important;
  color: var(--text) !important;
  border: 1px solid var(--line) !important;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
select option{
  background-color: #0b1220;
  color: #e7eefc;
}

/* =========================================================
   ? FIX: allow the RTE toolbar dropdowns (Font/Size) to open
   ========================================================= */
.rte-toolbar{
  position: relative;
  z-index: 5;
}

/* restore native dropdown behavior ONLY inside the editor toolbar */
.rte-toolbar select{
  -webkit-appearance: menulist !important;
  -moz-appearance: menulist !important;
  appearance: menulist !important;

  /* keep dark theme */
  background-color: rgba(255,255,255,.06) !important;
  color: var(--text) !important;
  border: 1px solid rgba(255,255,255,.12) !important;

  /* important for mobile tap */
  pointer-events: auto !important;
  position: relative;
  z-index: 10;
}

.rte-editor[data-editor="training"]{
  min-height: 360px;
  max-height: 70vh;
  overflow: auto;
  line-height: 1.5;
}
/* --- 2026 portal refresh --- */
.eyebrow{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#91a8d6;font-weight:800}
.hero-panel{background:linear-gradient(180deg,rgba(23,37,66,.95),rgba(15,26,45,.94));}
.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.glass{background:rgba(255,255,255,.04)}
.stat-big{font-size:28px;font-weight:800;margin-top:4px}
.small{font-size:12px}
.secondary{background:rgba(255,255,255,.06)}
.pill-accent{background:rgba(59,130,246,.18);border-color:rgba(96,165,250,.35)}
.case-list-modern .case-row{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;padding:10px 0;border-top:1px solid var(--line)}
.case-list-modern .case-row:first-child{border-top:0}
.announce-card{border-top:1px solid var(--line);padding-top:10px;margin-top:10px}
.announcement-preview,.announcement-body{line-height:1.55}
.training-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.training-card h3{font-size:18px}
.upload-dropzone{border:1px dashed rgba(255,255,255,.18);border-radius:14px;padding:12px}
.preview-image,.preview-video,.preview-frame{width:100%;border-radius:12px;border:1px solid var(--line);background:#09101d}
.preview-image{max-height:380px;object-fit:contain}
.preview-video{max-height:380px}
.preview-frame{min-height:360px}
.workspace-links{position:sticky;top:72px;z-index:10;background:rgba(11,18,32,.72);padding:8px 0;backdrop-filter:blur(6px)}
.workspace-summary strong{display:block}
.timeline-list{gap:10px}
.timeline-item{padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.03)}
.user-card,.evidence-card{overflow:hidden}
.btn-small{padding:6px 9px;font-size:12px}
@media (max-width: 900px){
  .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .training-grid{grid-template-columns:1fr}
  .workspace-links{top:64px}
}
@media (max-width: 640px){
  .stats-grid{grid-template-columns:1fr}
}