:root{
  --bg0:#070b13;
  --bg1:#0b1220;
  --panel:#0e1a2b;
  --panel2:#101f35;
  --line:rgba(255,255,255,.08);
  --line2:rgba(255,255,255,.12);
  --text:#e8eefc;
  --muted:rgba(232,238,252,.72);
  --muted2:rgba(232,238,252,.55);
  --mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  --sans:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;

  --blue:#2f6bff;
  --blue2:#1f4fd6;
  --green:#18c37e;
  --amber:#ffbf2f;
  --red:#ff4d6d;

  --shadow:0 10px 30px rgba(0,0,0,.55);
  --shadow2:0 6px 18px rgba(0,0,0,.45);
  --r:12px;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;padding:0;overflow:hidden}
#app{width:100vw;height:100vh;margin:0;padding:0;overflow:hidden}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 30% -10%, rgba(47,107,255,.22), transparent 60%),
    radial-gradient(900px 550px at 80% 0%, rgba(255,191,47,.12), transparent 55%),
    radial-gradient(900px 700px at 10% 90%, rgba(24,195,126,.10), transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  overflow:hidden;
}

.hidden{display:none !important}
.view{height:100vh; width:100vw; display:block; padding:0; margin:0; overflow:hidden}
#view-login{display:flex; align-items:center; justify-content:center; padding:24px}

.mono{font-family:var(--mono)}

/* LOGIN */
.loginShell{
  width:min(1200px, 100%);
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:18px;
  position:relative;
}

.loginCard{
  border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(16,31,53,.92), rgba(14,26,43,.92));
  border-radius:var(--r);
  box-shadow:var(--shadow);
  overflow:hidden;
}

.loginHeader{
  display:flex;
  gap:16px;
  align-items:center;
  padding:18px 18px 12px 18px;
  border-bottom:1px solid var(--line);
  background:
    linear-gradient(90deg, rgba(47,107,255,.14), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.03), transparent);
}

.agencySeal{
  width:54px;
  height:54px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.12), transparent 60%),
    radial-gradient(circle at 60% 70%, rgba(47,107,255,.18), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.06));
  box-shadow:0 0 0 3px rgba(0,0,0,.15) inset;
}

.loginTitleBlock{display:flex; flex-direction:column; gap:4px}
.loginTitle{
  font-weight:800;
  letter-spacing:.10em;
  font-size:14px;
  text-transform:uppercase;
}
.loginSub{
  font-size:12px;
  color:var(--muted);
  letter-spacing:.03em;
}
.loginEnv{
  margin-top:6px;
  font-size:11px;
  color:var(--amber);
  letter-spacing:.18em;
  font-family:var(--mono);
}

.loginBody{
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.loginFooter{
  border-top:1px solid var(--line);
  padding:12px 18px;
  display:flex;
  justify-content:space-between;
  gap:12px;
  background:rgba(0,0,0,.12);
}

.tinyLabel{
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted2);
}
.tinyValue{
  font-size:12px;
  font-family:var(--mono);
  color:var(--text);
  margin-top:2px;
}

.loginSide{
  position:relative;
  border-radius:var(--r);
  border:1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(14,26,43,.75), rgba(16,31,53,.75));
  box-shadow:var(--shadow2);
  overflow:hidden;
  min-height: 420px;
}

.sidePanel{
  padding:18px;
  position:relative;
  z-index:2;
}
.sidePanelTitle{
  font-weight:800;
  letter-spacing:.12em;
  font-size:12px;
  text-transform:uppercase;
}
.sidePanelText{
  margin-top:8px;
  font-size:12px;
  color:var(--muted);
  line-height:1.5;
}
.sidePanelDivider{
  height:1px;
  background:var(--line);
  margin:16px 0;
}
.sidePanelMeta{display:flex; flex-direction:column; gap:10px}
.metaRow{
  display:flex;
  justify-content:space-between;
  gap:14px;
  font-size:12px;
  color:var(--muted);
}
.scanline{
  position:absolute;
  inset:0;
  background:
    repeating-linear-gradient(
      180deg,
      rgba(255,255,255,.03),
      rgba(255,255,255,.03) 1px,
      transparent 1px,
      transparent 4px
    );
  mix-blend-mode:overlay;
  opacity:.20;
  z-index:1;
  pointer-events:none;
}

.okText{color:var(--green)}
.warnText{color:var(--amber)}
.errText{color:var(--red)}

/* APP LAYOUT */
#view-main{
  align-items:stretch;
  justify-content:stretch;
  padding:0;
}

.sidebar{
  width:280px;
  height:100vh;
  border-right:1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(16,31,53,.92), rgba(14,26,43,.92));
  display:flex;
  flex-direction:column;
  padding:16px 14px;
  gap:14px;
}

.sideBrand{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 10px 12px 10px;
  border:1px solid var(--line);
  border-radius:var(--r);
  background:
    linear-gradient(90deg, rgba(47,107,255,.14), transparent 62%),
    rgba(0,0,0,.10);
}

.brandMark{
  width:42px;
  height:42px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.12), transparent 60%),
    radial-gradient(circle at 80% 20%, rgba(47,107,255,.25), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.08));
}

.sideBrandTitle{
  font-weight:900;
  letter-spacing:.10em;
  font-size:12px;
  text-transform:uppercase;
}
.sideBrandSub{
  margin-top:4px;
  font-size:12px;
  color:var(--muted);
  font-family:var(--mono);
}

.sideSection{
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:12px 10px;
  background:rgba(0,0,0,.10);
}
.sideSectionTitle{
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted2);
  margin-bottom:10px;
}
.sideMeta{display:flex; flex-direction:column; gap:10px}

.nav{display:flex; flex-direction:column; gap:8px}
.navItem{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  width:100%;
  padding:10px 10px;
  border-radius:10px;
  border:1px solid var(--line);
  background:rgba(0,0,0,.12);
  color:var(--text);
  cursor:pointer;
  text-align:left;
  transition:transform .06s ease, border-color .12s ease, background .12s ease;
}
.navItem:hover{
  border-color:rgba(255,255,255,.18);
  background:rgba(255,255,255,.03);
}
.navItem:active{transform:translateY(1px)}
.navItem.active{
  border-color:rgba(47,107,255,.40);
  background:
    linear-gradient(90deg, rgba(47,107,255,.18), rgba(0,0,0,.10));
}
.navIcon{
  width:18px;
  height:18px;
  display:inline-flex;
  justify-content:center;
  align-items:center;
  opacity:.9;
  font-size:0 !important;
  color:transparent;
  text-indent:-9999px;
  position:relative;
}
.navIcon::before{
  content:'';
  width:6px;
  height:6px;
  border-radius:50%;
  background:rgba(232,238,252,0.9);
  display:block;
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
}
#nav-calls .navIcon{font-size:14px !important; color:rgba(232,238,252,0.9); text-indent:0}
#nav-calls .navIcon::before{display:none}
.navText{flex:1; font-weight:700; letter-spacing:.02em; font-size:12px}
.navDot{
  width:8px; height:8px; border-radius:999px;
  background:rgba(255,255,255,.18);
  box-shadow:0 0 0 2px rgba(0,0,0,.25) inset;
}
.navItem.active .navDot{background:rgba(47,107,255,.85)}
.navIcon,
.navDot{
  display:none;
}

.sideFooter{margin-top:auto; padding-top:10px}

/* MAIN */
.main{
  height:100vh;
  flex:1;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.topbar{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  padding:16px 18px;
  border-bottom:1px solid var(--line);
  background:
    linear-gradient(90deg, rgba(47,107,255,.10), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.06));
}

.crumbs{
  display:flex;
  gap:8px;
  align-items:center;
  color:var(--muted);
  font-size:12px;
  letter-spacing:.04em;
}
.crumb.active{color:var(--text); font-weight:700}
.crumbSep{opacity:.45}

.pageTitles{margin-top:10px}
.pageTitle{
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:16px;
}
.pageSub{
  margin-top:4px;
  color:var(--muted);
  font-size:12px;
}

.topPills{display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end}
.pill{
  display:inline-flex;
  gap:10px;
  align-items:center;
  border-radius:999px;
  padding:8px 12px;
  border:1px solid rgba(24,195,126,.45);
  background:rgba(0,0,0,.14);
  font-size:12px;
  font-family:var(--mono);
}
.pill.soft{
  border-color:rgba(255,255,255,.10);
  background:rgba(0,0,0,.10);
  color:var(--text);
}
.pillLabel{
  color:var(--muted2);
  font-family:var(--sans);
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
}

/* GRID */
.contentGrid{
  flex:1;
  display:grid;
  grid-template-columns: 1fr 360px;
  gap:14px;
  padding:14px;
  overflow:hidden;
}
.contentGrid.full-width{
  grid-template-columns: 1fr;
}
.contentMain{overflow:hidden}
.tab{height:100%; overflow:auto}

.panel{
  height:100%;
  border:1px solid var(--line);
  border-radius:var(--r);
  background:linear-gradient(180deg, rgba(16,31,53,.72), rgba(14,26,43,.72));
  box-shadow:var(--shadow2);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.panelHeader{
  padding:12px 12px;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.03), transparent 60%),
    rgba(0,0,0,.10);
}
.panelTitle{
  font-weight:900;
  letter-spacing:.12em;
  font-size:12px;
  text-transform:uppercase;
}
.panelTools{
  display:flex;
  gap:10px;
  align-items:center;
}
.panelSubHeader{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-bottom:1px solid var(--line);
  background:rgba(0,0,0,.10);
}
.subHint{font-size:12px; color:var(--muted)}
.subRight{font-size:12px; color:var(--muted2)}

.tableWrap{
  flex:1;
  overflow:auto;
}
.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  font-size:12px;
}
.table thead th{
  position:sticky;
  top:0;
  z-index:2;
  text-align:left;
  padding:10px 10px;
  background:rgba(11,18,32,.92);
  border-bottom:1px solid var(--line2);
  color:var(--muted);
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:11px;
}
.table tbody td{
  padding:10px 10px;
  border-bottom:1px solid rgba(255,255,255,.06);
  color:rgba(232,238,252,.90);
}
.table tbody tr{
  cursor:pointer;
  background:transparent;
  transition:background .10s ease, outline-color .10s ease;
}
.table tbody tr:hover{
  background:rgba(255,255,255,.03);
}
.table tbody tr.selected{
  background:rgba(47,107,255,.10);
  outline:1px solid rgba(47,107,255,.35);
  outline-offset:-1px;
}

/* INSPECTOR */
.inspector{
  height:100%;
  border:1px solid var(--line);
  border-radius:var(--r);
  background:linear-gradient(180deg, rgba(16,31,53,.78), rgba(14,26,43,.78));
  box-shadow:var(--shadow2);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.inspectorHeader{
  padding:12px;
  border-bottom:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.03), transparent 60%),
    rgba(0,0,0,.10);
}
.inspectorTitle{
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:12px;
}
.inspectorBadge{
  font-family:var(--mono);
  font-size:11px;
  color:var(--muted);
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.12);
}
.inspectorBody{
  flex:1;
  overflow:auto;
  padding:12px;
}
.inspectorFooter{
  border-top:1px solid var(--line);
  padding:10px 12px;
  display:flex;
  gap:10px;
  justify-content:flex-end;
  background:rgba(0,0,0,.10);
}

.emptyState{padding:10px}
.emptyTitle{
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:12px;
}
.emptyText{margin-top:8px; font-size:12px; color:var(--muted); line-height:1.5}
.emptyMeta{margin-top:14px; font-size:11px; color:var(--muted2)}

.kv{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.kvGroup{
  border:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.10);
  border-radius:12px;
  padding:12px;
}
.kvTitle{
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted2);
  margin-bottom:10px;
}
.kvRow{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:8px 0;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.kvRow:last-child{border-bottom:none}
.kvKey{color:var(--muted); font-size:12px}
.kvVal{color:var(--text); font-size:12px; font-family:var(--mono); text-align:right; word-break:break-word}

.inspectorActions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid rgba(255,255,255,.06);
}
.inspectorActions .btn{
  flex:1 1 auto;
  min-width:fit-content;
  text-align:center;
}

/* LICENSE MANAGER */
.licManager{margin-top:8px;}
.licManager .hint{margin-bottom:10px;}
.licForm{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.licForm .licFormFull{grid-column:1/-1;}
.licForm label{
  font-size:9px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--muted2);
  margin-bottom:2px;
  display:block;
}
.licForm input,
.licForm select,
.licForm textarea{
  width:100%;
  min-width:0;
  padding:8px;
  font-size:12px;
}
.licForm textarea{
  height:50px;
  resize:vertical;
}
.licFormActions{
  grid-column:1/-1;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
  margin-top:4px;
}
.licFormActions .btn{
  padding:8px 12px;
  font-size:10px;
}
.licList{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:12px;
}
.licCard{
  border:1px solid rgba(255,255,255,.10);
  border-radius:10px;
  background:rgba(0,0,0,.15);
  padding:10px;
}
.licCardHeader{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  margin-bottom:8px;
}
.licCardType{
  font-weight:700;
  font-size:12px;
  color:var(--text);
}
.licCardStatus{
  font-family:var(--mono);
  font-size:10px;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.10);
}
.licCardStatus.valid{border-color:rgba(24,195,126,.35); color:rgba(24,195,126,.95)}
.licCardStatus.suspended,.licCardStatus.revoked{border-color:rgba(255,77,109,.35); color:rgba(255,77,109,.95)}
.licCardStatus.expired,.licCardStatus.denied{border-color:rgba(255,191,47,.35); color:rgba(255,191,47,.95)}
.licCardMeta{
  font-size:11px;
  color:var(--muted);
  display:flex;
  flex-wrap:wrap;
  gap:6px 12px;
}
.licCardNotes{
  font-size:11px;
  color:var(--muted2);
  margin-top:6px;
  font-style:italic;
}
.licCardActions{
  display:flex;
  gap:6px;
  margin-top:8px;
}
.licCardActions .btn{
  padding:6px 10px;
  font-size:10px;
}

.flagRow{display:flex; gap:8px; flex-wrap:wrap}
.flag{
  font-family:var(--mono);
  font-size:11px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.10);
  color:var(--muted);
}
.flag.good{border-color:rgba(24,195,126,.35); color:rgba(24,195,126,.95)}
.flag.warn{border-color:rgba(255,191,47,.35); color:rgba(255,191,47,.95)}
.flag.bad{border-color:rgba(255,77,109,.35); color:rgba(255,77,109,.95)}

/* FORMS / BUTTONS */
.formRow{display:flex; flex-direction:column; gap:6px}
label{
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted2);
}
#tab-calls .callFormRow{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:10px;
}
#tab-calls .callFormGroup{
  flex:1;
  min-width:200px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
#tab-calls .callFormGroupWide{
  flex:1 1 100%;
}

/* ------------------------------------------------------------
 * CALLS TAB (Dispatch)
 * ------------------------------------------------------------ */

/* ============================================================
 * CAD - COMPUTER AIDED DISPATCH
 * Optimized for 1400x900 in-game tablet
 * ============================================================ */

#tab-calls .cadRoot {
  width: 1040px;
  height: 630px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: linear-gradient(180deg, #0a0e14 0%, #0d1219 100%);
  border-radius: 6px;
  border: 1px solid rgba(47, 107, 255, 0.25);
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
}

/* CAD Header - 32px height */
#tab-calls .cadHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 32px;
  padding: 0 8px;
  background: linear-gradient(180deg, #0f1923 0%, #0a0e14 100%);
  border-bottom: 1px solid rgba(47, 107, 255, 0.25);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
  flex-shrink: 0;
}

#tab-calls .cadHeaderLeft {
  display: flex;
  align-items: center;
  gap: 10px;
}

#tab-calls .cadLogo {
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.12em;
  color: #2f6bff;
  text-shadow: 0 0 20px rgba(47, 107, 255, 0.5);
}

#tab-calls .cadHeaderMeta {
  display: flex;
  gap: 5px;
}

#tab-calls .cadMetaItem {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2px 6px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 3px;
}

#tab-calls .cadMetaLabel {
  font-size: 6px;
  letter-spacing: 0.1em;
  color: var(--muted2);
  text-transform: uppercase;
}

#tab-calls .cadLive {
  font-size: 8px;
  font-weight: 900;
  color: #18c37e;
  letter-spacing: 0.08em;
  animation: cadPulse 1.5s ease-in-out infinite;
}

#tab-calls .cadClock {
  font-size: 10px;
  font-weight: 700;
  color: var(--text);
}

#tab-calls .cadActiveCount,
#tab-calls .cadPendingCount {
  font-size: 11px;
  font-weight: 900;
}

#tab-calls .cadActiveCount { color: #2f6bff; }
#tab-calls .cadPendingCount { color: #ffbf2f; }

@keyframes cadPulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

#tab-calls .cadHeaderRight {
  display: flex;
  align-items: center;
  gap: 4px;
}

#tab-calls .cadFilterSelect,
#tab-calls .cadSearch {
  padding: 4px 7px;
  font-size: 9px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  color: var(--text);
}

#tab-calls .cadSearch { width: 100px; }

#tab-calls .cadBtn {
  padding: 4px 8px;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 3px;
  color: var(--text);
  cursor: pointer;
  transition: all 0.15s ease;
}

#tab-calls .cadBtn:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.2);
}

#tab-calls .cadBtn.primary {
  background: linear-gradient(180deg, rgba(47, 107, 255, 0.3) 0%, rgba(47, 107, 255, 0.15) 100%);
  border-color: rgba(47, 107, 255, 0.5);
  color: #7aa3ff;
}

#tab-calls .cadBtn.primary:hover {
  border-color: rgba(47, 107, 255, 0.8);
  box-shadow: 0 0 12px rgba(47, 107, 255, 0.3);
}

/* Main Layout - 856px height (900 - 44px header) */
#tab-calls .cadMain {
  flex: 1;
  display: grid;
  grid-template-columns: 220px 1fr 220px;
  gap: 1px;
  background: rgba(47, 107, 255, 0.15);
  overflow: hidden;
  min-height: 0;
}

/* Panel Headers */
#tab-calls .cadPanelHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 24px;
  padding: 0 6px;
  background: linear-gradient(180deg, rgba(47, 107, 255, 0.12) 0%, transparent 100%);
  border-bottom: 1px solid rgba(47, 107, 255, 0.2);
  flex-shrink: 0;
}

#tab-calls .cadPanelTitle {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #7aa3ff;
}

#tab-calls .cadPanelBadge {
  padding: 1px 4px;
  font-size: 7px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 2px;
}

/* Call Queue (Left Panel) */
#tab-calls .cadCallQueue {
  display: flex;
  flex-direction: column;
  background: #0a0e14;
  overflow: hidden;
}

#tab-calls .cadQueueList {
  flex: 1;
  overflow-y: auto;
  padding: 3px;
  min-height: 0;
}

#tab-calls .cadQueueEmpty {
  padding: 10px;
  text-align: center;
  color: var(--muted2);
  font-size: 9px;
}

#tab-calls .cadQueueItem {
  padding: 4px 6px;
  margin-bottom: 3px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 2px solid rgba(47, 107, 255, 0.5);
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.15s ease;
}

#tab-calls .cadQueueItem:hover {
  background: rgba(47, 107, 255, 0.1);
  border-color: rgba(47, 107, 255, 0.3);
}

#tab-calls .cadQueueItem.selected {
  background: rgba(47, 107, 255, 0.15);
  border-color: rgba(47, 107, 255, 0.5);
  box-shadow: 0 0 15px rgba(47, 107, 255, 0.2);
}

#tab-calls .cadQueueItem.priority-low { border-left-color: #18c37e; }
#tab-calls .cadQueueItem.priority-medium { border-left-color: #2f6bff; }
#tab-calls .cadQueueItem.priority-high { border-left-color: #ffbf2f; }
#tab-calls .cadQueueItem.priority-urgent { border-left-color: #ff4d6d; animation: urgentPulse 1s ease-in-out infinite; }

@keyframes urgentPulse {
  0%, 100% { box-shadow: 0 0 5px rgba(255, 77, 109, 0.3); }
  50% { box-shadow: 0 0 15px rgba(255, 77, 109, 0.5); }
}

#tab-calls .cadQueueItemTop {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 2px;
}

#tab-calls .cadQueueCallNum {
  font-size: 8px;
  font-weight: 700;
  color: #7aa3ff;
}

#tab-calls .cadQueueCode {
  font-size: 7px;
  padding: 1px 4px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 2px;
  color: var(--muted);
}

#tab-calls .cadQueuePriority {
  font-size: 7px;
  font-weight: 800;
  padding: 1px 4px;
  border-radius: 2px;
  letter-spacing: 0.06em;
}

#tab-calls .cadQueuePriority.low { background: rgba(24, 195, 126, 0.2); color: #18c37e; }
#tab-calls .cadQueuePriority.medium { background: rgba(47, 107, 255, 0.2); color: #7aa3ff; }
#tab-calls .cadQueuePriority.high { background: rgba(255, 191, 47, 0.2); color: #ffbf2f; }
#tab-calls .cadQueuePriority.urgent { background: rgba(255, 77, 109, 0.25); color: #ff4d6d; }

#tab-calls .cadQueueResponse {
  font-size: 7px;
  color: var(--muted2);
  margin-left: auto;
}

#tab-calls .cadQueueItemTitle {
  font-size: 9px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#tab-calls .cadQueueItemLoc {
  font-size: 8px;
  color: var(--muted);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#tab-calls .cadQueueItemBottom {
  display: flex;
  align-items: center;
  gap: 4px;
}

#tab-calls .cadQueueStatus {
  font-size: 7px;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 2px;
  letter-spacing: 0.05em;
}

#tab-calls .cadQueueStatus.pending { background: rgba(255, 191, 47, 0.2); color: #ffbf2f; }
#tab-calls .cadQueueStatus.dispatched { background: rgba(47, 107, 255, 0.2); color: #7aa3ff; }
#tab-calls .cadQueueStatus.enroute { background: rgba(139, 92, 246, 0.2); color: #a78bfa; }
#tab-calls .cadQueueStatus.onscene { background: rgba(24, 195, 126, 0.2); color: #18c37e; }
#tab-calls .cadQueueStatus.cleared { background: rgba(107, 114, 128, 0.2); color: #9ca3af; }
#tab-calls .cadQueueStatus.closed { background: rgba(255, 77, 109, 0.15); color: #ff4d6d; }

#tab-calls .cadQueueUnits {
  font-size: 8px;
  color: var(--muted2);
}

#tab-calls .cadQueueTime {
  font-size: 8px;
  color: var(--muted2);
  margin-left: auto;
}

#tab-calls .cadQueueFlag {
  font-size: 10px;
  font-weight: 900;
  color: #ff4d6d;
  animation: flagBlink 0.8s ease-in-out infinite;
}

@keyframes flagBlink {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* Center Panel */
#tab-calls .cadCenter {
  display: flex;
  flex-direction: column;
  background: #0c1018;
  overflow-y: auto;
  min-height: 0;
}

/* Call Card */
#tab-calls .cadCallCard {
  background: #0a0e14;
  border-bottom: 1px solid rgba(47, 107, 255, 0.15);
}

#tab-calls .cadCardHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  background: linear-gradient(180deg, rgba(47, 107, 255, 0.15) 0%, transparent 100%);
  border-left: 3px solid #2f6bff;
}

#tab-calls .cadCardHeader.priority-low { border-left-color: #18c37e; }
#tab-calls .cadCardHeader.priority-medium { border-left-color: #2f6bff; }
#tab-calls .cadCardHeader.priority-high { border-left-color: #ffbf2f; }
#tab-calls .cadCardHeader.priority-urgent { border-left-color: #ff4d6d; background: linear-gradient(180deg, rgba(255, 77, 109, 0.15) 0%, transparent 100%); }

#tab-calls .cadCardHeaderLeft {
  display: flex;
  align-items: center;
  gap: 8px;
}

#tab-calls .cadCardCallNum {
  font-size: 12px;
  font-weight: 800;
  color: #7aa3ff;
}

#tab-calls .cadCardType {
  font-size: 11px;
  font-weight: 600;
}

#tab-calls .cadCardCode {
  font-size: 10px;
  padding: 2px 6px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 3px;
  color: var(--muted);
}

#tab-calls .cadCardHeaderRight {
  display: flex;
  align-items: center;
  gap: 6px;
}

#tab-calls .cadCardPriority,
#tab-calls .cadCardStatus {
  font-size: 9px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 3px;
  letter-spacing: 0.06em;
}

#tab-calls .cadCardPriority.low { background: rgba(24, 195, 126, 0.2); color: #18c37e; }
#tab-calls .cadCardPriority.medium { background: rgba(47, 107, 255, 0.2); color: #7aa3ff; }
#tab-calls .cadCardPriority.high { background: rgba(255, 191, 47, 0.2); color: #ffbf2f; }
#tab-calls .cadCardPriority.urgent { background: rgba(255, 77, 109, 0.25); color: #ff4d6d; }

#tab-calls .cadCardStatus.pending { background: rgba(255, 191, 47, 0.2); color: #ffbf2f; }
#tab-calls .cadCardStatus.dispatched { background: rgba(47, 107, 255, 0.2); color: #7aa3ff; }
#tab-calls .cadCardStatus.enroute { background: rgba(139, 92, 246, 0.2); color: #a78bfa; }
#tab-calls .cadCardStatus.onscene { background: rgba(24, 195, 126, 0.2); color: #18c37e; }
#tab-calls .cadCardStatus.cleared { background: rgba(107, 114, 128, 0.2); color: #9ca3af; }
#tab-calls .cadCardStatus.closed { background: rgba(255, 77, 109, 0.15); color: #ff4d6d; }

#tab-calls .cadCardResponse {
  font-size: 9px;
  color: var(--muted);
}

#tab-calls .cadCardBody {
  padding: 8px 10px;
}

#tab-calls .cadCardTitle {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 8px;
}

#tab-calls .cadCardEmpty {
  padding: 30px 16px;
  text-align: center;
  color: var(--muted2);
  font-size: 11px;
}

#tab-calls .cadCardFlags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 8px;
}

#tab-calls .cadCardFlag {
  font-size: 8px;
  font-weight: 800;
  padding: 2px 6px;
  background: rgba(255, 77, 109, 0.2);
  border: 1px solid rgba(255, 77, 109, 0.4);
  border-radius: 3px;
  color: #ff4d6d;
  letter-spacing: 0.06em;
}

#tab-calls .cadCardGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 8px;
}

#tab-calls .cadCardField {
  padding: 5px 8px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 4px;
}

#tab-calls .cadCardLabel {
  display: block;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--muted2);
  margin-bottom: 2px;
}

#tab-calls .cadCardValue {
  font-size: 11px;
  color: var(--text);
}

#tab-calls .cadCardDesc {
  padding: 6px 8px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 4px;
  margin-bottom: 8px;
}

#tab-calls .cadCardDescText {
  font-size: 11px;
  line-height: 1.4;
  color: var(--muted);
  margin-top: 4px;
}

#tab-calls .cadCardUnitsSection {
  margin-bottom: 8px;
}

#tab-calls .cadCardUnitsList {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 5px;
}

#tab-calls .cadCardUnit {
  font-size: 10px;
  padding: 3px 8px;
  background: rgba(47, 107, 255, 0.15);
  border: 1px solid rgba(47, 107, 255, 0.3);
  border-radius: 3px;
  color: #7aa3ff;
}

#tab-calls .cadCardUnit.primary {
  background: rgba(24, 195, 126, 0.15);
  border-color: rgba(24, 195, 126, 0.4);
  color: #18c37e;
}

#tab-calls .cadCardNoUnits {
  font-size: 10px;
  color: var(--muted2);
}

#tab-calls .cadCardTimeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  padding: 6px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

#tab-calls .cadCardTimeItem {
  text-align: center;
}

#tab-calls .cadCardTimeLabel {
  display: block;
  font-size: 7px;
  letter-spacing: 0.1em;
  color: var(--muted2);
  margin-bottom: 2px;
}

#tab-calls .cadCardTimeValue {
  font-size: 9px;
  color: var(--muted);
}

#tab-calls .cadCardCreator {
  font-size: 9px;
  color: var(--muted2);
  text-align: right;
  margin-top: 6px;
}

/* Dispatch Console */
#tab-calls .cadDispatchConsole {
  background: linear-gradient(180deg, rgba(47, 107, 255, 0.08) 0%, #0a0e14 100%);
  border-top: 1px solid rgba(47, 107, 255, 0.2);
  flex-shrink: 0;
}

#tab-calls .cadDispatchBadge {
  font-size: 8px;
  font-weight: 800;
  padding: 2px 6px;
  background: rgba(47, 107, 255, 0.25);
  border: 1px solid rgba(47, 107, 255, 0.5);
  border-radius: 3px;
  color: #7aa3ff;
  letter-spacing: 0.1em;
}

#tab-calls .cadDispatchBody {
  padding: 8px;
}

#tab-calls .cadDispatchSection {
  margin-bottom: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

#tab-calls .cadDispatchSection:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

#tab-calls .cadDispatchSection.compact {
  flex: 1;
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

#tab-calls .cadDispatchRow {
  display: flex;
  gap: 10px;
}

#tab-calls .cadDispoRow {
  display: flex;
  gap: 6px;
}

#tab-calls .cadDispatchLabel {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--muted2);
  margin-bottom: 5px;
}

#tab-calls .cadStatusBtns {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

#tab-calls .cadStatusBtn {
  padding: 5px 8px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.15s ease;
}

#tab-calls .cadStatusBtn:hover { border-color: rgba(255, 255, 255, 0.25); }
#tab-calls .cadStatusBtn.pending:hover { border-color: #ffbf2f; color: #ffbf2f; }
#tab-calls .cadStatusBtn.dispatched:hover { border-color: #2f6bff; color: #7aa3ff; }
#tab-calls .cadStatusBtn.enroute:hover { border-color: #8b5cf6; color: #a78bfa; }
#tab-calls .cadStatusBtn.onscene:hover { border-color: #18c37e; color: #18c37e; }
#tab-calls .cadStatusBtn.cleared:hover { border-color: #6b7280; color: #9ca3af; }
#tab-calls .cadStatusBtn.closed:hover { border-color: #ff4d6d; color: #ff4d6d; }

#tab-calls .cadAssignRow {
  display: flex;
  align-items: center;
  gap: 6px;
}

#tab-calls .cadUnitSelect {
  flex: 1;
  padding: 5px 8px;
  font-size: 10px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  color: var(--text);
}

#tab-calls .cadPrimaryCheck {
  font-size: 9px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 3px;
}

#tab-calls .cadPrimaryCheck input {
  width: auto;
}

#tab-calls .cadAssignedUnits {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}

#tab-calls .cadAssignedEmpty {
  font-size: 10px;
  color: var(--muted2);
}

#tab-calls .cadAssignedUnit {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  background: rgba(47, 107, 255, 0.15);
  border: 1px solid rgba(47, 107, 255, 0.3);
  border-radius: 3px;
}

#tab-calls .cadAssignedUnit.primary {
  background: rgba(24, 195, 126, 0.15);
  border-color: rgba(24, 195, 126, 0.4);
}

#tab-calls .cadAssignedUnitName { font-size: 10px; }
#tab-calls .cadAssignedUnitBadge {
  font-size: 7px;
  padding: 1px 4px;
  background: rgba(24, 195, 126, 0.3);
  border-radius: 2px;
  color: #18c37e;
}

#tab-calls .cadAssignedUnitRemove {
  width: 14px;
  height: 14px;
  border: none;
  background: rgba(255, 77, 109, 0.2);
  border-radius: 50%;
  color: #ff4d6d;
  font-size: 10px;
  cursor: pointer;
  line-height: 1;
}

#tab-calls .cadDispositionSelect {
  flex: 1;
  padding: 5px 8px;
  font-size: 10px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  color: var(--text);
}

#tab-calls .cadNarrativeRow {
  display: flex;
  gap: 6px;
}

#tab-calls .cadNarrativeInput {
  flex: 1;
  padding: 5px 8px;
  font-size: 10px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  color: var(--text);
}

/* Officer Panel */
#tab-calls .cadOfficerPanel {
  background: #0a0e14;
  border-top: 1px solid rgba(47, 107, 255, 0.15);
  flex-shrink: 0;
}

#tab-calls .cadOfficerBody {
  padding: 8px;
}

#tab-calls .cadOfficerBtns {
  display: flex;
  gap: 8px;
}

#tab-calls .cadResponseBtn {
  flex: 1;
  padding: 10px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.15s ease;
}

#tab-calls .cadResponseBtn.enroute:hover {
  background: rgba(139, 92, 246, 0.2);
  border-color: #8b5cf6;
  color: #a78bfa;
}

#tab-calls .cadResponseBtn.onscene:hover {
  background: rgba(24, 195, 126, 0.2);
  border-color: #18c37e;
  color: #18c37e;
}

#tab-calls .cadResponseBtn.cleared:hover {
  background: rgba(107, 114, 128, 0.2);
  border-color: #6b7280;
  color: #9ca3af;
}

#tab-calls .cadResponseBtn.unassign {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.3);
}

#tab-calls .cadResponseBtn.unassign:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: #ef4444;
  color: #f87171;
}

/* Right Panel */
#tab-calls .cadRight {
  display: flex;
  flex-direction: column;
  background: #0a0e14;
  overflow: hidden;
}

/* Units Panel */
#tab-calls .cadUnitsPanel {
  flex: 0 0 auto;
  max-height: 160px;
  border-bottom: 1px solid rgba(47, 107, 255, 0.15);
}

#tab-calls .cadUnitsList {
  padding: 4px;
  overflow-y: auto;
  max-height: 120px;
}

#tab-calls .cadUnitsEmpty {
  padding: 12px;
  text-align: center;
  color: var(--muted2);
  font-size: 10px;
}

#tab-calls .cadUnitItem {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  margin-bottom: 2px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-left: 2px solid #18c37e;
  border-radius: 3px;
}

#tab-calls .cadUnitItem.pending,
#tab-calls .cadUnitItem.dispatched,
#tab-calls .cadUnitItem.enroute { border-left-color: #ffbf2f; }
#tab-calls .cadUnitItem.onscene { border-left-color: #ff4d6d; }
#tab-calls .cadUnitItem.available { border-left-color: #18c37e; }

#tab-calls .cadUnitCallsign {
  font-size: 10px;
  font-weight: 700;
  color: #7aa3ff;
}

#tab-calls .cadUnitName {
  flex: 1;
  font-size: 9px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#tab-calls .cadUnitStatus {
  font-size: 8px;
  padding: 1px 4px;
  border-radius: 2px;
  background: rgba(24, 195, 126, 0.2);
  color: #18c37e;
}

#tab-calls .cadUnitStatus.pending,
#tab-calls .cadUnitStatus.dispatched,
#tab-calls .cadUnitStatus.enroute {
  background: rgba(255, 191, 47, 0.2);
  color: #ffbf2f;
}

#tab-calls .cadUnitStatus.onscene {
  background: rgba(255, 77, 109, 0.15);
  color: #ff4d6d;
}

/* Log Panel */
#tab-calls .cadLogPanel {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-bottom: 1px solid rgba(47, 107, 255, 0.15);
}

#tab-calls .cadLogList {
  flex: 1;
  padding: 4px;
  overflow-y: auto;
  font-size: 10px;
  min-height: 0;
}

#tab-calls .cadLogEmpty {
  padding: 12px;
  text-align: center;
  color: var(--muted2);
  font-size: 10px;
}

#tab-calls .cadLogEntry {
  display: grid;
  grid-template-columns: 40px 45px 1fr 40px;
  gap: 4px;
  padding: 3px 5px;
  margin-bottom: 2px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 3px;
  align-items: start;
}

#tab-calls .cadLogTime { font-size: 9px; color: var(--muted2); }
#tab-calls .cadLogType {
  font-size: 8px;
  font-weight: 700;
  padding: 1px 4px;
  background: rgba(47, 107, 255, 0.2);
  border-radius: 2px;
  color: #7aa3ff;
  text-align: center;
}
#tab-calls .cadLogEntry.status .cadLogType { background: rgba(24, 195, 126, 0.2); color: #18c37e; }
#tab-calls .cadLogEntry.dispatch .cadLogType { background: rgba(255, 191, 47, 0.2); color: #ffbf2f; }
#tab-calls .cadLogEntry.unit .cadLogType { background: rgba(139, 92, 246, 0.2); color: #a78bfa; }
#tab-calls .cadLogEntry.response .cadLogType { background: rgba(47, 107, 255, 0.2); color: #7aa3ff; }

#tab-calls .cadLogMsg { font-size: 9px; color: var(--muted); }
#tab-calls .cadLogAuthor { font-size: 8px; color: var(--muted2); text-align: right; }

/* Radio Panel */
#tab-calls .cadRadioPanel {
  flex: 0 0 auto;
  max-height: 140px;
}

#tab-calls .cadRadioLive {
  font-size: 8px;
  font-weight: 800;
  padding: 2px 6px;
  background: rgba(24, 195, 126, 0.2);
  border-radius: 3px;
  color: #18c37e;
  animation: cadPulse 1.5s ease-in-out infinite;
}

#tab-calls .cadRadioList {
  padding: 4px;
  overflow-y: auto;
  max-height: 100px;
}

#tab-calls .cadRadioEmpty {
  padding: 12px;
  text-align: center;
  color: var(--muted2);
  font-size: 10px;
}

#tab-calls .cadRadioEntry {
  display: flex;
  gap: 6px;
  padding: 3px 6px;
  margin-bottom: 2px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 2px;
  font-size: 9px;
}

#tab-calls .cadRadioTime { color: var(--muted2); }
#tab-calls .cadRadioMsg { color: var(--muted); flex: 1; }
#tab-calls .cadRadioEntry.dispatch .cadRadioMsg { color: #ffbf2f; }
#tab-calls .cadRadioEntry.status .cadRadioMsg { color: #18c37e; }
#tab-calls .cadRadioEntry.system .cadRadioMsg { color: #7aa3ff; }

/* Modal */
#tab-calls .cadModal {
  position: absolute;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

#tab-calls .cadModalBackdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
}

#tab-calls .cadModalContent {
  position: relative;
  width: 600px;
  max-height: 700px;
  background: linear-gradient(180deg, #0f1923 0%, #0a0e14 100%);
  border: 1px solid rgba(47, 107, 255, 0.3);
  border-radius: 8px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

#tab-calls .cadModalHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 40px;
  padding: 0 14px;
  background: linear-gradient(180deg, rgba(47, 107, 255, 0.15) 0%, transparent 100%);
  border-bottom: 1px solid rgba(47, 107, 255, 0.2);
  flex-shrink: 0;
}

#tab-calls .cadModalTitle {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #7aa3ff;
}

#tab-calls .cadModalClose {
  width: 24px;
  height: 24px;
  border: none;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
  color: var(--muted);
  font-size: 16px;
  cursor: pointer;
}

#tab-calls .cadModalClose:hover {
  background: rgba(255, 77, 109, 0.2);
  color: #ff4d6d;
}

#tab-calls .cadModalBody {
  flex: 1;
  padding: 12px;
  overflow-y: auto;
}

#tab-calls .cadFormRow {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

#tab-calls .cadFormGroup {
  flex: 1;
  display: flex;
  flex-direction: column;
}

#tab-calls .cadFormGroup.wide { flex: 2; }
#tab-calls .cadFormGroup.small { flex: 0.5; }

#tab-calls .cadFormGroup label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--muted2);
  margin-bottom: 4px;
  text-transform: uppercase;
}

#tab-calls .cadInput,
#tab-calls .cadTextarea {
  padding: 7px 10px;
  font-size: 11px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  color: var(--text);
}

#tab-calls .cadInput:focus,
#tab-calls .cadTextarea:focus {
  border-color: rgba(47, 107, 255, 0.5);
  outline: none;
}

#tab-calls .cadTextarea {
  resize: vertical;
  min-height: 50px;
}

#tab-calls .cadFlagsRow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#tab-calls .cadFlagCheck {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: var(--muted);
  cursor: pointer;
}

#tab-calls .cadFlagCheck input {
  width: auto;
}

#tab-calls .cadModalFooter {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  height: 44px;
  padding: 0 14px;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}

/* Fixed 1400x900 tablet - no responsive breakpoints needed */
input,select,textarea{
  width:100%;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.18);
  color:var(--text);
  padding:10px 10px;
  outline:none;
}
input::placeholder, textarea::placeholder{color:rgba(232,238,252,.35)}
input:focus,select:focus,textarea:focus{
  border-color:rgba(47,107,255,.40);
  box-shadow:0 0 0 3px rgba(47,107,255,.12);
}
select option{
  background:#0d1117;
  color:#fff;
}
.search{
  min-width:320px;
}
.btn{
  border-radius:10px;
  border:2px solid #555;
  background:#2a2a2a;
  color:#fff;
  padding:10px 12px;
  cursor:pointer;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-size:11px;
  transition:transform .06s ease, border-color .12s ease, background .12s ease;
}
.btn:hover{border-color:#888; background:#3a3a3a}
.btn:active{transform:translateY(1px)}
.btn.primary{
  border-color:#2f6bff;
  background:#2f6bff;
  color:#fff;
}
.btn.primary:hover{border-color:#5a8fff; background:#5a8fff}
.btn.danger{
  border-color:rgba(255,77,109,.35);
  background:linear-gradient(180deg, rgba(255,77,109,.16), rgba(0,0,0,.12));
}
.btn.danger:hover{border-color:rgba(255,77,109,.55)}

.btn.warning{
  border-color:rgba(255,193,7,.45);
  background:linear-gradient(180deg, rgba(255,193,7,.2), rgba(0,0,0,.12));
  color:#ffc107;
}
.btn.warning:hover{border-color:rgba(255,193,7,.7)}

.inspectorStatus{
  font-size:14px;
  font-weight:700;
  padding:6px 12px;
  border-radius:4px;
  text-align:center;
  background:rgba(24,195,126,.15);
  color:#18c37e;
  border:1px solid rgba(24,195,126,.3);
  margin-bottom:8px;
}
.inspectorStatus.danger{
  background:rgba(255,77,109,.15);
  color:#ff4d6d;
  border-color:rgba(255,77,109,.3);
}
.inspectorStatus.warning{
  background:rgba(255,193,7,.15);
  color:#ffc107;
  border-color:rgba(255,193,7,.3);
}

.notesEditor{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.notesTextarea{
  width:100%;
  min-height:120px;
  padding:10px;
  font-size:12px;
  font-family:inherit;
  background:rgba(0,0,0,.3);
  border:1px solid rgba(255,255,255,.15);
  border-radius:4px;
  color:var(--text);
  resize:vertical;
}

.notesTextarea:focus{
  outline:none;
  border-color:rgba(47,107,255,.5);
}

.notesActions{
  display:flex;
  gap:8px;
}

.hint{font-size:12px; color:var(--muted)}
.hint.subtle{color:var(--muted2)}
.hint.error{color:rgba(255,77,109,.95)}
.hint.ok{color:rgba(24,195,126,.95)}

/* MODAL */
.modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.55);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  z-index:50;
}
.modalCard{
  width:min(900px, 100%);
  border-radius:var(--r);
  border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(16,31,53,.96), rgba(14,26,43,.96));
  box-shadow:var(--shadow);
  overflow:hidden;
}
.modalHeader{
  padding:12px 14px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid var(--line);
}
.modalTitle{
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:12px;
}
.modalBody{padding:14px; display:flex; flex-direction:column; gap:12px}
.modalFooter{
  padding:12px 14px;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:flex-end;
  gap:10px;
  background:rgba(0,0,0,.10);
}
.iconBtn{
  width:34px;
  height:34px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.12);
  color:var(--text);
  cursor:pointer;
}
.iconBtn:hover{border-color:rgba(255,255,255,.24)}
.grid2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

/* TOAST */
.toast{
  position:fixed;
  right:16px;
  bottom:16px;
  width:min(420px, calc(100vw - 32px));
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg, rgba(16,31,53,.96), rgba(14,26,43,.96));
  box-shadow:var(--shadow2);
  padding:12px 12px;
  z-index:80;
  opacity:0;
  transform:translateY(8px);
  pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
}
.toast.show{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
.toastTitle{
  font-weight:900;
  letter-spacing:.10em;
  text-transform:uppercase;
  font-size:11px;
}
.toastText{
  margin-top:6px;
  color:var(--muted);
  font-size:12px;
  line-height:1.4;
}

/* Global Confirm Dialog */
.mdtConfirmOverlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  backdrop-filter: blur(2px);
}

.mdtConfirmOverlay.hidden {
  display: none;
}

.mdtConfirmBox {
  width: 340px;
  max-width: 100%;
  background: linear-gradient(180deg, rgba(18, 30, 48, 0.98), rgba(12, 22, 38, 0.98));
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 18px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6);
  animation: mdtConfirmIn 0.15s ease-out;
}

@keyframes mdtConfirmIn {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(-8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.mdtConfirmTitle {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.95);
}

.mdtConfirmMsg {
  margin-top: 10px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.5;
}

.mdtConfirmActions {
  margin-top: 18px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* Responsive */
@media (max-width: 1120px){
  .contentGrid{grid-template-columns: 1fr}
  .inspector{display:none}
}
@media (max-width: 980px){
  .loginShell{grid-template-columns:1fr}
  .loginSide{display:none}
  .search{min-width:220px}
}

/* ============================
   REALISTIC REPORT FORM MODAL
   ============================ */

.mdtModalOverlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  padding: 22px;
}

.mdtModalOverlay.hidden {
  display: none !important;
}

.mdtModal {
  width: min(980px, 96vw);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  border: 2px solid #0b0b0b;
  background: #f7f7f7;
  box-shadow: 0 20px 80px rgba(0,0,0,0.55);
  overflow: hidden;
}

.mdtModalHeader {
  background: #0b0b0b;
  color: #fff;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  padding: 14px 14px;
  border-bottom: 2px solid #000;
}

.mdtModalHeaderLeft {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mdtSeal {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 2px solid #fff;
  position: relative;
}

.mdtSeal:before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 2px solid #fff;
  border-radius: 999px;
  opacity: 0.7;
}

.mdtModalTitle {
  font-weight: 900;
  letter-spacing: 1.2px;
  font-size: 14px;
}

.mdtModalSub {
  opacity: 0.8;
  font-size: 12px;
  margin-top: 2px;
}

.mdtModalHeaderRight {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mdtHeaderStamp {
  background: #fff;
  color: #000;
  border: 2px solid #000;
  padding: 6px 10px;
  text-align: center;
  min-width: 120px;
}

.mdtStampTop {
  font-size: 10px;
  letter-spacing: 1px;
  opacity: 0.85;
}

.mdtStampBottom {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1px;
  margin-top: 2px;
}

.mdtCloseX {
  background: transparent;
  border: 2px solid rgba(255,255,255,0.75);
  color: #fff;
  width: 34px;
  height: 34px;
  cursor: pointer;
  font-weight: 900;
  line-height: 1;
}

.mdtCloseX:hover {
  border-color: #fff;
}

.mdtModalBody {
  padding: 14px;
  overflow: auto;
}

/* -------------------------------------------------------------------------- */
/* Hyper-realistic Ticket / Complaint Form (KSP-inspired, not 1:1)             */
/* -------------------------------------------------------------------------- */

.kspSeal {
  width: 40px;
  height: 52px;
  color: rgba(255,255,255,0.9);
  flex-shrink: 0;
}

.kspSeal svg {
  width: 100%;
  height: 100%;
}

.kspHeaderAgency {
  font-weight: 950;
  letter-spacing: 1.2px;
  font-size: 14px;
}

.kspHeaderForm {
  font-weight: 950;
  letter-spacing: 1px;
  font-size: 13px;
  margin-top: 2px;
}

.kspHeaderMeta {
  opacity: 0.82;
  font-size: 11px;
  margin-top: 2px;
}

.kspHeaderBoxes {
  display: flex;
  align-items: stretch;
  gap: 10px;
}

.kspHdrBox {
  background: #fff;
  color: #000;
  border: 2px solid #000;
  padding: 6px 10px;
  min-width: 150px;
}

.kspHdrLabel {
  font-size: 10px;
  letter-spacing: 1px;
  opacity: 0.85;
}

.kspHdrValue {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1px;
  margin-top: 2px;
}

.kspHdrSelect {
  margin-top: 4px;
  width: 100%;
  border: 1px solid #000;
  padding: 6px 8px;
  font-size: 12px;
  background: #fff;
  color: #000;
  outline: none;
}

.kspPaper {
  background: #fff;
  border: 2px solid #000;
  padding: 12px;
  max-width: 980px;
  margin: 0 auto;
  /* Ensure form text renders as true "ink" on paper (prevents inheriting app's light UI text) */
  color: #000;
}

.kspGrid {
  display: block;
}

.kspSection {
  margin-top: 10px;
  border: 2px solid #000;
  background: #111;
  color: #fff;
  padding: 6px 10px;
  font-size: 10px;
  letter-spacing: 1.2px;
  font-weight: 950;
}

.kspRow {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0;
}

.kspCell {
  border: 1px solid #000;
  padding: 6px 8px 6px;
  background: #fff;
  min-height: 46px;
}

.kspCell.kspTall {
  min-height: 230px;
}

.kspCell:focus-within {
  box-shadow: inset 0 0 0 2px rgba(0,0,0,0.8);
}

.kspSpan-1 { grid-column: span 1; }
.kspSpan-2 { grid-column: span 2; }
.kspSpan-3 { grid-column: span 3; }
.kspSpan-4 { grid-column: span 4; }
.kspSpan-5 { grid-column: span 5; }
.kspSpan-6 { grid-column: span 6; }
.kspSpan-8 { grid-column: span 8; }
.kspSpan-12 { grid-column: 1 / -1; }

.kspLabel {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1px;
  margin-bottom: 6px;
  color: #000;
  opacity: 0.90;
  line-height: 1.05;
  text-transform: uppercase;
}

/* Make placeholders look like faint printed guidance instead of bright UI text */
.kspInput::placeholder,
.kspTextarea::placeholder,
.kspTextareaSmall::placeholder {
  color: rgba(0,0,0,0.35);
}

/* Normalize select rendering inside paper cells (keeps text baseline consistent) */
.kspCell select.kspInput {
  color: #000;
  line-height: 1.2;
  padding: 3px 0;
}

.kspInput {
  width: 100%;
  border: 0;
  outline: none;
  padding: 2px 0;
  font-size: 12px;
  background: transparent;
  color: #000;
}

.kspInput:disabled {
  opacity: 0.75;
}

/* Charge Autocomplete */
.charge-autocomplete {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 200px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #999;
  border-top: none;
  z-index: 1000;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.charge-autocomplete.hidden {
  display: none;
}

.charge-option {
  padding: 6px 8px;
  cursor: pointer;
  font-size: 11px;
  border-bottom: 1px solid #eee;
  display: flex;
  gap: 8px;
}

.charge-option:last-child {
  border-bottom: none;
}

.charge-option:hover,
.charge-option.selected {
  background: #e8f0ff;
}

.charge-option .charge-section {
  font-family: var(--mono);
  font-weight: 600;
  color: #333;
  white-space: nowrap;
}

.charge-option .charge-desc {
  color: #555;
  flex: 1;
}

/* Draft Restore Banner */
.draft-restore-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 20px;
  background: linear-gradient(135deg, #1a3a5c 0%, #0d2840 100%);
  border-bottom: 2px solid var(--amber);
  color: #fff;
}

.draft-restore-banner.hidden {
  display: none;
}

.draft-restore-content {
  display: flex;
  align-items: center;
  gap: 12px;
}

.draft-restore-icon {
  font-size: 24px;
}

.draft-restore-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.draft-restore-text strong {
  font-size: 14px;
  color: var(--amber);
}

.draft-restore-text span {
  font-size: 12px;
  opacity: 0.85;
}

.draft-restore-actions {
  display: flex;
  gap: 8px;
}

.draft-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.draft-btn-restore {
  background: var(--amber);
  color: #000;
}

.draft-btn-restore:hover {
  background: #ffd54f;
}

.draft-btn-discard {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.3);
}

.draft-btn-discard:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.5);
}

.kspTextarea,
.kspTextareaSmall {
  width: 100%;
  border: 0;
  outline: none;
  background: transparent;
  color: #000;
  font-size: 12px;
  line-height: 1.35;
  resize: vertical;
}

.kspTextarea {
  min-height: 190px;
}

.kspTextareaSmall {
  min-height: 90px;
}

.kspMicro {
  margin-top: 8px;
  font-size: 10px;
  opacity: 0.78;
}

.kspChecks {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  padding-top: 4px;
}

.kspChk {
  font-size: 12px;
  display: inline-flex;
  gap: 6px;
  align-items: center;
  color: #000;
  font-weight: 700;
  cursor: pointer;
}

.kspChk input[type="radio"] {
  accent-color: #000;
}

.kspInline3 {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 10px;
  align-items: center;
}

.kspFooter {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
}

.kspServedBox {
  border: 2px solid #000;
  padding: 10px;
}

.kspServedBig {
  font-weight: 1000;
  font-size: 28px;
  letter-spacing: 2px;
}

.kspServedLine {
  border-bottom: 2px dashed #000;
  margin-top: 10px;
  height: 18px;
}

.kspServedMicro {
  margin-top: 8px;
  font-size: 10px;
  opacity: 0.8;
}

.kspSigLine {
  border-bottom: 2px solid #000;
}

/* Defendant signature area inside SERVED box */
.kspServedSignArea {
  position: relative;
  height: 60px;
  margin: 4px 0 0;
}

.kspSigImage {
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 100%;
  height: 60px;
  object-fit: contain;
  object-position: bottom left;
}

.kspSigImage.hidden {
  display: none;
}

/* Officer signature block — large cursive name on the line */
.kspSigOfficer {
  border: 2px solid #000;
  padding: 10px 10px 28px;
}

.kspSigOfficerWrap {
  position: relative;
  height: 100%;
  min-height: 80px;
}

.kspSigOfficerWrap .kspSigName {
  position: absolute;
  bottom: 4px;
  left: 6px;
  font-family: 'Dancing Script', cursive;
  font-weight: 700;
  font-size: 48px;
  color: #0a0a0a;
  line-height: 1;
  font-style: italic;
  transform: rotate(-2deg);
  transform-origin: bottom left;
}

.kspSigOfficerWrap .kspSigLine {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.kspSigSmall {
  font-size: 10px;
  opacity: 0.85;
  letter-spacing: 1px;
}

/* Printed timestamp below signature boxes */
.kspFooterPrinted {
  font-size: 10px;
  opacity: 0.7;
  letter-spacing: 1px;
  text-align: right;
  margin-top: 6px;
  padding-right: 2px;
  grid-column: 1 / -1;
}

@media (max-width: 980px) {
  .kspHeaderBoxes { flex-direction: column; align-items: flex-end; }
  .kspFooter { grid-template-columns: 1fr; }
}

.mdtPaper {
  background: #fff;
  border: 2px solid #000;
  padding: 14px;
}

.mdtPaperTopLine {
  border: 1px solid #000;
  padding: 12px;
}

.mdtPaperRow {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}

.mdtField {
  border: 1px solid #000;
  padding: 10px;
  background: #fff;
}

.mdtFieldWide {
  grid-column: 1 / -1;
}

.mdtLabel {
  font-size: 10px;
  letter-spacing: 1px;
  font-weight: 800;
  color: #000;
  margin-bottom: 6px;
}

.mdtInput, .mdtTextarea, .mdtTextareaSmall {
  width: 100%;
  border: 1px solid #000;
  outline: none;
  padding: 8px 10px;
  font-size: 13px;
  background: #fff;
  color: #000;
}

.mdtTextarea {
  min-height: 220px;
  resize: vertical;
  line-height: 1.35;
}

.mdtTextareaSmall {
  min-height: 110px;
  resize: vertical;
  line-height: 1.35;
}

.mdtHelper {
  margin-top: 6px;
  font-size: 11px;
  opacity: 0.75;
}

.mdtDivider {
  height: 2px;
  background: #000;
  margin: 12px 0;
}

.mdtPaperFooter {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-top: 10px;
}

.mdtPaperFooterLeft {
  font-size: 11px;
  opacity: 0.9;
}

.mdtPaperFooterRight {
  font-size: 11px;
  opacity: 0.9;
}

.mdtModalFooter {
  border-top: 2px solid #000;
  background: #f0f0f0;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mdtFooterLeft {
  font-size: 12px;
  letter-spacing: 1px;
  color: #000;
  font-weight: 800;
}

.mdtFooterRight {
  display: flex;
  gap: 10px;
}

/* Responsive */
@media (max-width: 860px) {
  .mdtPaperRow {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------------------------------
 * OFFICERS TAB - MDT Unit Management
 * ------------------------------------------------------------ */

#tab-officers .mdtOfficerRoot {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: 900px;
  background:
    radial-gradient(900px 400px at 0% 0%, rgba(47, 107, 255, 0.12), transparent 60%),
    radial-gradient(700px 350px at 100% 20%, rgba(24, 195, 126, 0.08), transparent 55%),
    linear-gradient(180deg, rgba(12, 15, 22, 0.6), rgba(8, 10, 16, 0.4));
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

/* MDT Header */
#tab-officers .mdtOfficerHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  background: rgba(10, 12, 18, 0.85);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

#tab-officers .mdtOfficerHeaderLeft {
  display: flex;
  align-items: center;
  gap: 10px;
}

#tab-officers .mdtOfficerLogo {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.12em;
  color: #2f6bff;
  background: rgba(47, 107, 255, 0.15);
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid rgba(47, 107, 255, 0.3);
}

#tab-officers .mdtOfficerTitle {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.85);
}

#tab-officers .mdtOfficerHeaderMeta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: 12px;
}

#tab-officers .mdtOfficerMetaItem {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

#tab-officers .mdtOfficerMetaLabel {
  font-size: 7px;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.45);
  text-transform: uppercase;
}

#tab-officers .mdtOfficerLive {
  font-size: 8px;
  font-weight: 700;
  color: #18c37e;
  letter-spacing: 0.08em;
}

#tab-officers .mdtOfficerClock {
  font-size: 10px;
  font-weight: 600;
  color: #2f6bff;
}

#tab-officers .mdtOfficerOnDutyCount {
  font-size: 12px;
  font-weight: 800;
  color: #18c37e;
}

#tab-officers .mdtOfficerHeaderRight {
  display: flex;
  gap: 10px;
}

/* Main Layout */
#tab-officers .mdtOfficerMain {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 10px;
  padding: 10px;
  flex: 1;
  overflow: hidden;
  max-width: 1040px;
  max-height: 630px;
  margin: 0 auto;
}

#tab-officers .mdtOfficerLeft {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  padding-right: 4px;
}

#tab-officers .mdtOfficerRight {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
}

/* Unit Status Card */
#tab-officers .mdtUnitStatusCard {
  background: rgba(16, 19, 28, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
}

#tab-officers .mdtUnitStatusHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  background: rgba(0, 0, 0, 0.25);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

#tab-officers .mdtUnitStatusTitle {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.7);
}

#tab-officers .mdtUnitStatusBadge {
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(47, 107, 255, 0.2);
  color: #2f6bff;
  border: 1px solid rgba(47, 107, 255, 0.35);
}

#tab-officers .mdtUnitStatusBody {
  padding: 10px;
}

/* Big Status Indicator */
#tab-officers .mdtBigStatus {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

#tab-officers .mdtBigStatusIndicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 65px;
  height: 65px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.35);
  border: 2px solid rgba(107, 114, 128, 0.5);
  transition: all 0.3s ease;
}

#tab-officers .mdtBigStatusIndicator.available {
  border-color: rgba(24, 195, 126, 0.6);
  background: rgba(24, 195, 126, 0.12);
  box-shadow: 0 0 30px rgba(24, 195, 126, 0.2);
}

#tab-officers .mdtBigStatusIndicator.busy {
  border-color: rgba(255, 191, 47, 0.6);
  background: rgba(255, 191, 47, 0.12);
  box-shadow: 0 0 30px rgba(255, 191, 47, 0.2);
}

#tab-officers .mdtBigStatusIndicator.enroute {
  border-color: rgba(139, 92, 246, 0.6);
  background: rgba(139, 92, 246, 0.12);
  box-shadow: 0 0 30px rgba(139, 92, 246, 0.2);
}

#tab-officers .mdtBigStatusIndicator.onscene {
  border-color: rgba(47, 107, 255, 0.6);
  background: rgba(47, 107, 255, 0.12);
  box-shadow: 0 0 30px rgba(47, 107, 255, 0.2);
}

#tab-officers .mdtBigStatusIndicator.break {
  border-color: rgba(249, 115, 22, 0.6);
  background: rgba(249, 115, 22, 0.12);
  box-shadow: 0 0 30px rgba(249, 115, 22, 0.2);
}

#tab-officers .mdtBigStatusIndicator.code6 {
  border-color: rgba(6, 182, 212, 0.6);
  background: rgba(6, 182, 212, 0.12);
  box-shadow: 0 0 30px rgba(6, 182, 212, 0.2);
}

#tab-officers .mdtBigStatusIndicator.offline {
  border-color: rgba(107, 114, 128, 0.5);
  background: rgba(107, 114, 128, 0.1);
}

#tab-officers .mdtBigStatusDot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #6b7280;
  margin-bottom: 6px;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.3);
}

#tab-officers .mdtBigStatusIndicator.available .mdtBigStatusDot { background: #18c37e; }
#tab-officers .mdtBigStatusIndicator.busy .mdtBigStatusDot { background: #ffbf2f; }
#tab-officers .mdtBigStatusIndicator.enroute .mdtBigStatusDot { background: #8b5cf6; }
#tab-officers .mdtBigStatusIndicator.onscene .mdtBigStatusDot { background: #2f6bff; }
#tab-officers .mdtBigStatusIndicator.break .mdtBigStatusDot { background: #f97316; }
#tab-officers .mdtBigStatusIndicator.code6 .mdtBigStatusDot { background: #06b6d4; }

#tab-officers .mdtBigStatusText {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.9);
  text-align: center;
}

#tab-officers .mdtBigStatusMeta {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

#tab-officers .mdtBigStatusCallsign {
  font-size: 20px;
  font-weight: 900;
  color: #2f6bff;
  letter-spacing: 0.02em;
}

#tab-officers .mdtBigStatusName {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.7);
}

/* Shift Info */
#tab-officers .mdtShiftInfo {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 8px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 8px;
  margin-bottom: 8px;
}

#tab-officers .mdtShiftItem {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: center;
}

#tab-officers .mdtShiftLabel {
  font-size: 9px;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.45);
}

#tab-officers .mdtShiftValue {
  font-size: 14px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
}

/* Clock Buttons */
#tab-officers .mdtClockButtons {
  display: flex;
  gap: 10px;
  min-height: 48px;
}

#tab-officers .mdtClockBtn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 16px;
  border: none;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: all 0.2s ease;
}

#tab-officers .mdtClockBtn.clockIn {
  background: linear-gradient(135deg, #18c37e, #0f9d58);
  color: #fff;
  box-shadow: 0 4px 20px rgba(24, 195, 126, 0.35);
}

#tab-officers .mdtClockBtn.clockIn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 28px rgba(24, 195, 126, 0.45);
}

#tab-officers .mdtClockBtn.clockOut {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #fff;
  box-shadow: 0 4px 20px rgba(239, 68, 68, 0.35);
}

#tab-officers .mdtClockBtn.clockOut:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 28px rgba(239, 68, 68, 0.45);
}

#tab-officers .mdtClockBtnIcon {
  font-size: 16px;
  font-weight: 900;
}

/* Quick Status */
#tab-officers .mdtQuickStatus {
  background: rgba(16, 19, 28, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  overflow: hidden;
}

#tab-officers .mdtQuickStatusHeader {
  padding: 8px 10px;
  background: rgba(0, 0, 0, 0.25);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

#tab-officers .mdtQuickStatusTitle {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.7);
}

#tab-officers .mdtQuickStatusGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5px;
  padding: 8px;
}

#tab-officers .mdtStatusBtn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.25);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  transition: all 0.2s ease;
}

#tab-officers .mdtStatusBtn:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.25);
}

#tab-officers .mdtStatusBtnDot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

#tab-officers .mdtStatusBtn.available .mdtStatusBtnDot { background: #18c37e; }
#tab-officers .mdtStatusBtn.busy .mdtStatusBtnDot { background: #ffbf2f; }
#tab-officers .mdtStatusBtn.enroute .mdtStatusBtnDot { background: #8b5cf6; }
#tab-officers .mdtStatusBtn.onscene .mdtStatusBtnDot { background: #2f6bff; }
#tab-officers .mdtStatusBtn.break .mdtStatusBtnDot { background: #f97316; }
#tab-officers .mdtStatusBtn.code6 .mdtStatusBtnDot { background: #06b6d4; }

#tab-officers .mdtStatusBtn.available:hover { border-color: rgba(24, 195, 126, 0.5); background: rgba(24, 195, 126, 0.1); }
#tab-officers .mdtStatusBtn.busy:hover { border-color: rgba(255, 191, 47, 0.5); background: rgba(255, 191, 47, 0.1); }
#tab-officers .mdtStatusBtn.enroute:hover { border-color: rgba(139, 92, 246, 0.5); background: rgba(139, 92, 246, 0.1); }
#tab-officers .mdtStatusBtn.onscene:hover { border-color: rgba(47, 107, 255, 0.5); background: rgba(47, 107, 255, 0.1); }
#tab-officers .mdtStatusBtn.break:hover { border-color: rgba(249, 115, 22, 0.5); background: rgba(249, 115, 22, 0.1); }
#tab-officers .mdtStatusBtn.code6:hover { border-color: rgba(6, 182, 212, 0.5); background: rgba(6, 182, 212, 0.1); }

#tab-officers .mdtQuickStatusHint {
  padding: 0 8px 8px 8px;
  font-size: 7px;
  color: rgba(255, 255, 255, 0.4);
}

/* Unit Profile */
#tab-officers .mdtUnitProfile {
  background: rgba(16, 19, 28, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  overflow: hidden;
}

#tab-officers .mdtUnitProfileHeader {
  padding: 8px 10px;
  background: rgba(0, 0, 0, 0.25);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

#tab-officers .mdtUnitProfileTitle {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.7);
}

#tab-officers .mdtUnitProfileBody {
  padding: 8px;
}

#tab-officers .mdtProfileGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}

#tab-officers .mdtProfileField {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#tab-officers .mdtProfileField label {
  font-size: 7px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
}

#tab-officers .mdtProfileInput {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.35);
  color: rgba(255, 255, 255, 0.9);
  font-size: 13px;
  transition: border-color 0.2s ease;
}

#tab-officers .mdtProfileInput:focus {
  outline: none;
  border-color: rgba(47, 107, 255, 0.5);
  background: rgba(0, 0, 0, 0.45);
}

#tab-officers .mdtProfileActions {
  margin-top: 14px;
}

/* Roster Panel */
#tab-officers .mdtRosterPanel {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: rgba(16, 19, 28, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  overflow: hidden;
}

#tab-officers .mdtRosterHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: rgba(0, 0, 0, 0.25);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}

#tab-officers .mdtRosterHeaderLeft {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#tab-officers .mdtRosterTitle {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.85);
}

#tab-officers .mdtRosterSubtitle {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.45);
}

#tab-officers .mdtRosterHeaderRight {
  display: flex;
  align-items: center;
  gap: 12px;
}

#tab-officers .mdtRosterCount {
  font-size: 11px;
  font-weight: 700;
  color: #18c37e;
  letter-spacing: 0.08em;
}

/* Roster Filter */
#tab-officers .mdtRosterFilter {
  display: flex;
  gap: 10px;
  padding: 12px 16px;
  background: rgba(0, 0, 0, 0.15);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  flex-shrink: 0;
}

#tab-officers .mdtRosterFilterSelect {
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.35);
  color: rgba(255, 255, 255, 0.85);
  font-size: 12px;
  cursor: pointer;
}

#tab-officers .mdtRosterSearch {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.35);
  color: rgba(255, 255, 255, 0.85);
  font-size: 12px;
}

#tab-officers .mdtRosterSearch::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

/* Roster Grid */
#tab-officers .mdtRosterGrid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  padding: 16px;
  overflow-y: auto;
  align-content: start;
}

#tab-officers .mdtRosterCard {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  overflow: hidden;
  transition: all 0.2s ease;
}

#tab-officers .mdtRosterCard:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

#tab-officers .mdtRosterCard.available { border-left: 3px solid #18c37e; }
#tab-officers .mdtRosterCard.busy { border-left: 3px solid #ffbf2f; }
#tab-officers .mdtRosterCard.enroute { border-left: 3px solid #8b5cf6; }
#tab-officers .mdtRosterCard.onscene { border-left: 3px solid #2f6bff; }
#tab-officers .mdtRosterCard.break { border-left: 3px solid #f97316; }
#tab-officers .mdtRosterCard.code6 { border-left: 3px solid #06b6d4; }
#tab-officers .mdtRosterCard.offline { border-left: 3px solid #6b7280; }

#tab-officers .mdtRosterCardHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

#tab-officers .mdtRosterCallsign {
  font-size: 15px;
  font-weight: 800;
  color: #2f6bff;
}

#tab-officers .mdtRosterDept {
  font-size: 10px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.08em;
}

#tab-officers .mdtRosterCardBody {
  padding: 10px 12px;
}

#tab-officers .mdtRosterName {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 2px;
}

#tab-officers .mdtRosterRank {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.5);
}

#tab-officers .mdtRosterCardFooter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.15);
}

#tab-officers .mdtRosterStatus {
  display: flex;
  align-items: center;
  gap: 6px;
}

#tab-officers .mdtRosterStatusDot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

#tab-officers .mdtRosterStatusText {
  font-size: 10px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.04em;
}

#tab-officers .mdtRosterTime {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.45);
}

#tab-officers .mdtRosterEmpty {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
}

#tab-officers .mdtRosterEmptyIcon {
  font-size: 32px;
  color: rgba(255, 255, 255, 0.2);
  margin-bottom: 12px;
}

#tab-officers .mdtRosterEmptyText {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.4);
}

/* 10-Codes Panel */
#tab-officers .mdtCodesPanel {
  background: rgba(16, 19, 28, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}

#tab-officers .mdtCodesHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  background: rgba(0, 0, 0, 0.25);
  cursor: pointer;
  transition: background 0.2s ease;
}

#tab-officers .mdtCodesHeader:hover {
  background: rgba(0, 0, 0, 0.35);
}

#tab-officers .mdtCodesTitle {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.7);
}

#tab-officers .mdtCodesToggle {
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.5);
  width: 16px;
  text-align: center;
}

#tab-officers .mdtCodesBody {
  padding: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  max-height: 180px;
  overflow-y: auto;
}

#tab-officers .mdtCodesGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 4px;
}

#tab-officers .mdtCodeItem {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 6px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  font-size: 8px;
  color: rgba(255, 255, 255, 0.7);
}

#tab-officers .mdtCodeItem .mono {
  font-weight: 700;
  color: #ffbf2f;
  min-width: 50px;
}

/* Responsive */
@media (max-width: 1100px) {
  #tab-officers .mdtOfficerMain {
    grid-template-columns: 1fr;
  }

  #tab-officers .mdtOfficerLeft {
    order: 1;
  }

  #tab-officers .mdtOfficerRight {
    order: 2;
    max-height: 500px;
  }

  #tab-officers .mdtOfficerHeaderMeta {
    display: none;
  }
}

@media (max-width: 720px) {
  #tab-officers .mdtOfficerHeader {
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
  }

  #tab-officers .mdtProfileGrid {
    grid-template-columns: 1fr;
  }

  #tab-officers .mdtShiftInfo {
    grid-template-columns: 1fr;
  }

  #tab-officers .mdtQuickStatusGrid {
    grid-template-columns: 1fr;
  }

  #tab-officers .mdtRosterGrid {
    grid-template-columns: 1fr;
  }
}


/* ------------------------------------------------------------
 * COMMAND CENTER (Admin) - Compact Layout
 * ------------------------------------------------------------ */

#tab-command .cmdPanel {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: rgba(8, 12, 20, 0.95);
  overflow: hidden;
}

#tab-command .cmdHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  background: linear-gradient(180deg, rgba(20, 30, 50, 0.9), rgba(15, 22, 38, 0.9));
  border-bottom: 1px solid rgba(47, 107, 255, 0.3);
  flex-shrink: 0;
}

#tab-command .cmdHeaderTitle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.95);
}

#tab-command .cmdIcon {
  font-size: 16px;
  opacity: 0.7;
}

#tab-command .cmdHeaderMeta {
  display: flex;
  align-items: center;
  gap: 10px;
}

#tab-command .cmdChip {
  padding: 4px 10px;
  border-radius: 4px;
  background: rgba(47, 107, 255, 0.15);
  border: 1px solid rgba(47, 107, 255, 0.3);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.9);
}

#tab-command .cmdChip.warn {
  background: rgba(255, 180, 50, 0.15);
  border-color: rgba(255, 180, 50, 0.4);
  color: rgba(255, 200, 100, 1);
}

#tab-command .cmdTime {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
}

#tab-command .cmdHeaderActions {
  display: flex;
  gap: 8px;
}

/* Inner Tab Navigation */
#tab-command .cmdTabs {
  display: flex;
  gap: 2px;
  padding: 0 10px;
  background: rgba(10, 15, 25, 0.8);
  border-bottom: 1px solid rgba(47, 107, 255, 0.2);
  flex-shrink: 0;
}

#tab-command .cmdTab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: rgba(255, 255, 255, 0.5);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.15s ease;
}

#tab-command .cmdTab:hover {
  color: rgba(255, 255, 255, 0.8);
  background: rgba(47, 107, 255, 0.05);
}

#tab-command .cmdTab.active {
  color: rgba(255, 255, 255, 0.95);
  border-bottom-color: rgba(47, 107, 255, 0.8);
  background: rgba(47, 107, 255, 0.08);
}

#tab-command .cmdTabBadge {
  padding: 2px 6px;
  border-radius: 8px;
  background: rgba(255, 100, 100, 0.25);
  border: 1px solid rgba(255, 100, 100, 0.4);
  font-size: 9px;
  font-weight: 700;
  color: rgba(255, 150, 150, 1);
}

#tab-command .cmdTab.active .cmdTabBadge {
  background: rgba(47, 107, 255, 0.25);
  border-color: rgba(47, 107, 255, 0.5);
  color: rgba(150, 180, 255, 1);
}

/* Tab Panels */
#tab-command .cmdTabPanel {
  display: none;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

#tab-command .cmdTabPanel.active {
  display: flex;
}

#tab-command .cmdTabPanel > .cmdTableWrap {
  flex: 1;
  min-height: 0;
}

#tab-command .cmdPanelHeader {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}

#tab-command .cmdPanelTitle {
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
}

#tab-command .cmdTableWrap.cmdTableFull {
  flex: 1;
  overflow-y: auto;
  max-height: none;
  min-height: 0;
}

#tab-command .cmdLogsFull {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Settings Grid */
#tab-command .cmdSettingsGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  padding: 12px;
}

#tab-command .cmdSettingCard {
  background: rgba(15, 22, 35, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#tab-command .cmdSettingCard:hover {
  border-color: rgba(47, 107, 255, 0.3);
}

#tab-command .cmdSettingTitle {
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
}

#tab-command .cmdSettingDesc {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.5;
}

/* Status Pills */
#tab-command .cmdPill.active {
  background: rgba(34, 197, 94, 0.2);
  color: rgba(80, 220, 140, 1);
}

#tab-command .cmdPill.pending {
  background: rgba(245, 158, 11, 0.2);
  color: rgba(255, 200, 80, 1);
}

#tab-command .cmdContent {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
  gap: 10px;
}

#tab-command .cmdSection {
  background: rgba(15, 22, 35, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  overflow: hidden;
}

#tab-command .cmdSectionHeader {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: rgba(0, 0, 0, 0.25);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

#tab-command .cmdSectionTitle {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
}

#tab-command .cmdBadge {
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(47, 107, 255, 0.2);
  border: 1px solid rgba(47, 107, 255, 0.3);
  font-size: 10px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
}

#tab-command .cmdSearch {
  flex: 1;
  max-width: 200px;
  padding: 5px 10px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.3);
  color: rgba(255, 255, 255, 0.9);
  font-size: 11px;
  outline: none;
}

#tab-command .cmdSearch:focus {
  border-color: rgba(47, 107, 255, 0.5);
}

#tab-command .cmdSelect {
  padding: 5px 8px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.3);
  color: rgba(255, 255, 255, 0.9);
  font-size: 11px;
  outline: none;
}

#tab-command .cmdDeleteRow {
  display: flex;
  gap: 8px;
  padding: 8px 10px;
  background: rgba(255, 50, 50, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}

#tab-command .cmdDeleteRow .cmdSearch {
  max-width: 220px;
}

#tab-command .cmdTableWrap {
  max-height: 180px;
  overflow: auto;
}

#tab-command .cmdTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}

#tab-command .cmdTable thead th {
  position: sticky;
  top: 0;
  background: rgba(10, 15, 25, 0.98);
  color: rgba(255, 255, 255, 0.7);
  text-align: left;
  padding: 8px 10px;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

#tab-command .cmdTable tbody td {
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.85);
  vertical-align: middle;
}

#tab-command .cmdTable tbody tr:hover td {
  background: rgba(47, 107, 255, 0.05);
}

#tab-command .cmdEmpty {
  color: rgba(255, 255, 255, 0.4);
  text-align: center;
  padding: 20px;
  font-size: 11px;
}

#tab-command .cmdActions {
  display: flex;
  gap: 6px;
}

#tab-command .cmdActions .btn {
  padding: 4px 10px;
  font-size: 10px;
}

#tab-command .cmdPill {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

#tab-command .cmdPill.owner { background: rgba(255, 215, 0, 0.25); color: #ffd700; font-weight: bold; }
#tab-command .cmdPill.admin { background: rgba(139, 92, 246, 0.2); color: rgba(180, 150, 255, 1); }
#tab-command .cmdPill.command { background: rgba(34, 197, 94, 0.2); color: rgba(80, 220, 140, 1); }
#tab-command .cmdPill.user { background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.7); }
#tab-command .cmdPill.ok { background: rgba(34, 197, 94, 0.2); color: rgba(80, 220, 140, 1); }
#tab-command .cmdPill.warn { background: rgba(245, 158, 11, 0.2); color: rgba(255, 200, 80, 1); }

#tab-command .cmdLogs {
  max-height: 150px;
  overflow: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#tab-command .cmdLogEmpty {
  padding: 20px;
  text-align: center;
  color: rgba(255, 255, 255, 0.4);
  font-size: 11px;
}

#tab-command .cmdLog {
  display: flex;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.2);
  font-size: 11px;
}

#tab-command .cmdLogTime {
  color: rgba(255, 255, 255, 0.5);
  flex-shrink: 0;
  width: 70px;
}

#tab-command .cmdLogLevel {
  font-weight: 700;
  text-transform: uppercase;
  flex-shrink: 0;
  width: 50px;
}

#tab-command .cmdLogMsg {
  color: rgba(255, 255, 255, 0.8);
  flex: 1;
}

#tab-command .cmdLog.info .cmdLogLevel { color: rgba(139, 92, 246, 0.9); }
#tab-command .cmdLog.warn .cmdLogLevel { color: rgba(245, 158, 11, 0.9); }
#tab-command .cmdLog.error .cmdLogLevel { color: rgba(239, 68, 68, 0.9); }
#tab-command .cmdLog.action .cmdLogLevel { color: rgba(34, 197, 94, 0.9); }

/* Drawer */
#tab-command .cmdDrawer {
  position: absolute;
  top: 0;
  right: 0;
  width: 340px;
  height: 100%;
  background: linear-gradient(180deg, rgba(14, 22, 36, 0.99) 0%, rgba(10, 16, 28, 0.99) 100%);
  border-left: 1px solid rgba(47, 107, 255, 0.2);
  box-shadow: -8px 0 30px rgba(0, 0, 0, 0.6);
  z-index: 20;
  display: flex;
  flex-direction: column;
}

#tab-command .cmdDrawerHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: linear-gradient(180deg, rgba(47, 107, 255, 0.1) 0%, transparent 100%);
  border-bottom: 1px solid rgba(47, 107, 255, 0.15);
}

#tab-command .cmdDrawerHeaderLeft {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

#tab-command .cmdDrawerTitle {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}

#tab-command .cmdDrawerSub {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
}

#tab-command .cmdCloseBtn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  font-size: 18px;
  transition: all 0.15s ease;
}

#tab-command .cmdCloseBtn:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.3);
  color: #ef4444;
}

#tab-command .cmdDrawerBody {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Sections */
#tab-command .cmdSection {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
}

#tab-command .cmdSectionHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#tab-command .cmdSectionTitle {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}

/* Form Layout */
#tab-command .cmdFormRow {
  display: flex;
  gap: 10px;
}

#tab-command .cmdField {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#tab-command .cmdField.flex2 {
  flex: 2;
}

#tab-command .cmdField.full {
  width: 100%;
}

#tab-command .cmdField label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
}

#tab-command .cmdField input,
#tab-command .cmdField select {
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  font-size: 13px;
  transition: all 0.15s ease;
}

#tab-command .cmdField input:focus,
#tab-command .cmdField select:focus {
  outline: none;
  border-color: rgba(47, 107, 255, 0.5);
  background: rgba(0, 0, 0, 0.5);
}

#tab-command .cmdField input[type="number"] {
  text-align: center;
  padding: 10px 8px;
}

/* Color Picker */
#tab-command .cmdColorPicker {
  display: flex;
  align-items: center;
  gap: 8px;
}

#tab-command .cmdColorPicker input[type="color"] {
  width: 40px;
  height: 36px;
  padding: 2px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: transparent;
  cursor: pointer;
}

/* Status Toggle */
#tab-command .cmdStatusToggle {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 36px;
}

#tab-command .cmdStatusLabel {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
}

/* Actions */
#tab-command .cmdDrawerActions {
  display: flex;
  gap: 10px;
}

#tab-command .cmdDrawerActions .btn {
  flex: 1;
  padding: 12px;
}

#tab-command .cmdFormActions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 4px;
}

/* Add Button */
#tab-command .cmdAddBtn {
  padding: 5px 12px;
  background: rgba(47, 107, 255, 0.15);
  border: 1px solid rgba(47, 107, 255, 0.3);
  border-radius: 4px;
  color: #7aa3ff;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

#tab-command .cmdAddBtn:hover {
  background: rgba(47, 107, 255, 0.25);
  border-color: rgba(47, 107, 255, 0.5);
}

/* Confirm Modal */
#tab-command .cmdConfirm {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

#tab-command .cmdConfirmBox {
  width: 320px;
  max-width: 100%;
  background: rgba(15, 22, 35, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

#tab-command .cmdConfirmTitle {
  font-size: 13px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.95);
}

#tab-command .cmdConfirmMsg {
  margin-top: 8px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.4;
}

#tab-command .cmdConfirmActions {
  margin-top: 14px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

#tab-command .hidden { display: none !important; }

/* ============================================
   MDT CIVILIANS TAB - NCIC STYLE
   ============================================ */

.mdt-panel {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #0a1628 0%, #0d1a2d 100%);
  border: 1px solid rgba(0, 180, 255, 0.15);
  border-radius: 4px;
  overflow: hidden;
  font-family: var(--mono);
}

/* MDT Header */
.mdt-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: linear-gradient(180deg, #001f3f 0%, #001a35 100%);
  border-bottom: 2px solid #00aaff;
  flex-shrink: 0;
}

.mdt-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mdt-module-badge {
  background: #00aaff;
  color: #001020;
  font-size: 10px;
  font-weight: 900;
  padding: 3px 8px;
  letter-spacing: 0.1em;
}

.mdt-module-title {
  color: #00ccff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.mdt-header-right {
  display: flex;
  align-items: center;
  gap: 6px;
}

.mdt-status-light {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #444;
}

.mdt-status-light.online {
  background: #00ff88;
  box-shadow: 0 0 6px #00ff88;
}

.mdt-status-light.offline {
  background: #ff4444;
  box-shadow: 0 0 6px #ff4444;
}

.mdt-status-text {
  color: #00ff88;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

/* MDT Search Bar */
.mdt-search-bar {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 12px;
  background: rgba(0, 40, 80, 0.4);
  border-bottom: 1px solid rgba(0, 170, 255, 0.2);
  flex-shrink: 0;
  flex-wrap: wrap;
}

.mdt-search-group {
  flex: 1;
  min-width: 200px;
}

.mdt-search-label {
  display: block;
  color: #0099cc;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.15em;
  margin-bottom: 4px;
}

.mdt-input {
  width: 100%;
  padding: 7px 10px;
  background: #000d1a;
  border: 1px solid #004477;
  color: #00ffcc;
  font-family: var(--mono);
  font-size: 12px;
  outline: none;
}

.mdt-input:focus {
  border-color: #00aaff;
  box-shadow: 0 0 8px rgba(0, 170, 255, 0.3);
}

.mdt-input::placeholder {
  color: #336688;
}

.mdt-search-filters {
  flex-shrink: 0;
}

.mdt-search-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: flex-end;
  flex-shrink: 0;
}

.mdt-select {
  padding: 7px 10px;
  background: #000d1a;
  border: 1px solid #004477;
  color: #00ccff;
  font-family: var(--mono);
  font-size: 11px;
  cursor: pointer;
  outline: none;
}

.mdt-select:focus {
  border-color: #00aaff;
}

.mdt-btn {
  padding: 7px 14px;
  background: #002244;
  border: 1px solid #004477;
  color: #00ccff;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.mdt-btn:hover {
  background: #003366;
  border-color: #0088cc;
}

.mdt-btn.primary {
  background: linear-gradient(180deg, #0066aa 0%, #004488 100%);
  border-color: #0088cc;
  color: #fff;
}

.mdt-btn.primary:hover {
  background: linear-gradient(180deg, #0077bb 0%, #005599 100%);
}

.mdt-btn-icon {
  margin-right: 4px;
}

/* MDT Info Bar */
.mdt-info-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 12px;
  background: rgba(0, 20, 40, 0.6);
  border-bottom: 1px solid rgba(0, 100, 150, 0.3);
  flex-shrink: 0;
}

.mdt-info-left,
.mdt-info-right {
  display: flex;
  align-items: center;
  gap: 6px;
}

.mdt-info-center {
  flex: 1;
  text-align: center;
}

.mdt-info-label {
  color: #557799;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.mdt-info-value {
  color: #00ccff;
  font-size: 11px;
  font-weight: 700;
}

.mdt-hint {
  color: #446688;
  font-size: 10px;
  font-style: italic;
}

/* MDT Table Container */
.mdt-table-container {
  flex: 1;
  overflow: auto;
  background: #000a14;
}

/* MDT Table */
.mdt-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  table-layout: fixed;
}

.mdt-table thead {
  position: sticky;
  top: 0;
  z-index: 2;
}

.mdt-table thead th {
  padding: 8px 6px;
  background: linear-gradient(180deg, #001830 0%, #001020 100%);
  border-bottom: 2px solid #004477;
  color: #0099cc;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-align: left;
  white-space: nowrap;
}

.mdt-table tbody tr {
  cursor: pointer;
  transition: background 0.1s;
  border-bottom: 1px solid rgba(0, 68, 119, 0.3);
}

.mdt-table tbody tr:hover {
  background: rgba(0, 100, 180, 0.15);
}

.mdt-table tbody tr.selected {
  background: rgba(0, 150, 255, 0.2);
  outline: 1px solid rgba(0, 170, 255, 0.5);
  outline-offset: -1px;
}

.mdt-table tbody td {
  padding: 6px 6px;
  color: #b8d4e8;
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Column widths */
.mdt-table .col-status { width: 32px; text-align: center; }
.mdt-table .col-ssn { width: 100px; }
.mdt-table .col-name { width: 140px; }
.mdt-table .col-dob { width: 80px; }
.mdt-table .col-sex { width: 40px; text-align: center; }
.mdt-table .col-phone { width: 100px; }
.mdt-table .col-license { width: 70px; text-align: center; }
.mdt-table .col-address { min-width: 120px; }

/* Status Indicators */
.mdt-status-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 2px;
  font-size: 9px;
  font-weight: 900;
}

.mdt-status-indicator.status-clear {
  background: #0a2a1a;
  border: 1px solid #00662a;
  color: #00cc55;
}

.mdt-status-indicator.status-alert {
  background: #2a2a0a;
  border: 1px solid #aa8800;
  color: #ffcc00;
}

.mdt-status-indicator.status-warrant {
  background: #2a0a0a;
  border: 1px solid #aa0000;
  color: #ff3333;
  animation: warrant-pulse 1.5s infinite;
}

.mdt-status-indicator.status-bail {
  background: #2a2a0a;
  border: 1px solid #aa8800;
  color: #ffc107;
  animation: warrant-pulse 1.5s infinite;
}

@keyframes warrant-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* License Badges */
.mdt-badge {
  display: inline-block;
  padding: 2px 6px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.05em;
  border-radius: 2px;
}

.mdt-badge.valid {
  background: #003322;
  border: 1px solid #00aa44;
  color: #00ff66;
}

.mdt-badge.suspended {
  background: #332200;
  border: 1px solid #aa6600;
  color: #ffaa00;
}

.mdt-badge.revoked {
  background: #330000;
  border: 1px solid #aa0000;
  color: #ff4444;
}

.mdt-badge.expired {
  background: #222222;
  border: 1px solid #666666;
  color: #999999;
}

.mdt-badge.unknown {
  background: #111a22;
  border: 1px solid #334455;
  color: #668899;
}

/* MDT Footer */
.mdt-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  background: linear-gradient(180deg, #001020 0%, #000810 100%);
  border-top: 1px solid #003355;
  flex-shrink: 0;
}

.mdt-footer-left {
  display: flex;
  gap: 16px;
}

.mdt-key-hint {
  color: #335577;
  font-size: 9px;
  letter-spacing: 0.05em;
}

.mdt-timestamp {
  color: #00aaff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

/* Vehicle-specific column widths */
.mdt-table .col-plate { width: 80px; }
.mdt-table .col-year { width: 40px; text-align: center; }
.mdt-table .col-make { width: 80px; }
.mdt-table .col-model { width: 100px; }
.mdt-table .col-color { width: 60px; }
.mdt-table .col-owner { width: 140px; }
.mdt-table .col-reg-status { width: 65px; text-align: center; }
.mdt-table .col-vin { min-width: 140px; }

/* Responsive adjustments for MDT table */
@media (max-width: 1400px) {
  .mdt-table .col-address { display: none; }
  .mdt-table .col-vin { display: none; }
}

@media (max-width: 1200px) {
  .mdt-table .col-phone { display: none; }
  .mdt-table .col-owner { display: none; }
}

/* Weapon-specific column widths */
.mdt-table .col-serial { width: 110px; }
.mdt-table .col-wep-type { width: 50px; text-align: center; }
.mdt-table .col-wep-make { width: 90px; }
.mdt-table .col-wep-model { width: 110px; }
.mdt-table .col-caliber { width: 70px; text-align: center; }
.mdt-table .col-wep-owner { width: 140px; }
.mdt-table .col-wep-status { width: 65px; text-align: center; }

/* Weapon type badge */
.mdt-type-badge {
  display: inline-block;
  padding: 2px 6px;
  background: #0a1a2a;
  border: 1px solid #004466;
  color: #00aacc;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.05em;
  border-radius: 2px;
}

@media (max-width: 1300px) {
  .mdt-table .col-wep-owner { display: none; }
}

/* ============================================================
 * DISPATCH CONSOLE - Main MDT Interface
 * Optimized for FiveM tablet: 1400x900
 * ============================================================ */

.console {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #050810 0%, #0a1018 100%);
  overflow: hidden;
  margin: 0;
  border: none;
  box-shadow: none;
  box-sizing: border-box;
}

/* Console Header - 44px */
.consoleHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 44px;
  padding: 0 10px;
  background: linear-gradient(180deg, #0c1420 0%, #080e18 100%);
  border-bottom: 2px solid rgba(47, 107, 255, 0.4);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  flex-shrink: 0;
}

.consoleHeaderLeft {
  display: flex;
  align-items: center;
  gap: 8px;
}

.consoleBadge {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: 1px solid rgba(47, 107, 255, 0.5);
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.15), transparent 60%),
    radial-gradient(circle at 70% 70%, rgba(47, 107, 255, 0.3), transparent 50%),
    linear-gradient(180deg, #0c1a30 0%, #06101c 100%);
  box-shadow: 0 0 12px rgba(47, 107, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #d6e6ff;
}

.consoleBadgeLogo {
  width: 22px;
  height: 22px;
  filter: drop-shadow(0 0 6px rgba(47, 107, 255, 0.4));
}

.consoleBrandTitle {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.12em;
  color: #fff;
  text-shadow: 0 0 15px rgba(47, 107, 255, 0.5);
}

.consoleBrandSub {
  font-size: 8px;
  color: var(--muted);
  letter-spacing: 0.06em;
  margin-top: 1px;
}

.consoleHeaderCenter {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.consoleClock {
  text-align: center;
  padding: 4px 16px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(47, 107, 255, 0.3);
  border-radius: 6px;
}

.clockTime {
  font-size: 18px;
  font-weight: 900;
  color: #2f6bff;
  text-shadow: 0 0 15px rgba(47, 107, 255, 0.6);
  letter-spacing: 0.06em;
}

.clockDate {
  font-size: 8px;
  color: var(--muted);
  letter-spacing: 0.1em;
  margin-top: 1px;
}

.consoleHeaderRight {
  display: flex;
  align-items: center;
  gap: 10px;
}

.consoleOfficer {
  display: flex;
  gap: 6px;
}

.officerInfo {
  text-align: center;
  padding: 3px 8px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
}

.officerLabel {
  font-size: 7px;
  color: var(--muted2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.officerValue {
  font-size: 10px;
  font-weight: 700;
  color: var(--text);
  margin-top: 1px;
  max-width: 70px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.consoleStatus {
  padding-left: 10px;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.statusIndicator {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(24, 195, 126, 0.4);
  border-radius: 4px;
}

.statusIndicator.online { border-color: rgba(24, 195, 126, 0.5); }
.statusIndicator.offline { border-color: rgba(255, 77, 109, 0.5); }

.statusDot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #18c37e;
  box-shadow: 0 0 8px rgba(24, 195, 126, 0.6);
  animation: statusPulse 2s ease-in-out infinite;
}

.statusIndicator.offline .statusDot {
  background: #ff4d6d;
  box-shadow: 0 0 8px rgba(255, 77, 109, 0.6);
}

@keyframes statusPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.statusText {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #18c37e;
}

.statusIndicator.offline .statusText { color: #ff4d6d; }

/* Console Body - fills remaining space */
.consoleBody {
  flex: 1;
  display: flex;
  gap: 0;
  overflow: hidden;
  min-height: 0;
}

/* Side Panels - 160px each */
.consolePanel {
  width: 160px;
  background: linear-gradient(180deg, #0a1220 0%, #060c14 100%);
  border-right: 1px solid rgba(47, 107, 255, 0.2);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  overflow: hidden;
}

.consolePanelRight {
  border-right: none;
  border-left: 1px solid rgba(47, 107, 255, 0.2);
}

.consolePanel .panelHeader {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  background: linear-gradient(180deg, rgba(47, 107, 255, 0.15) 0%, transparent 100%);
  border-bottom: 1px solid rgba(47, 107, 255, 0.25);
  flex-shrink: 0;
}

.consolePanel .panelIcon {
  color: #2f6bff;
  font-size: 8px;
}

.consolePanel .panelIcon.pulse {
  color: #18c37e;
  animation: statusPulse 1.5s ease-in-out infinite;
}

.consolePanel .panelLabel {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #7aa3ff;
}

/* Status Buttons */
.statusButtons {
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  overflow-y: auto;
}

.statusBtn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 8px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: left;
}

.statusBtn:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.2);
}

.statusBtn.active {
  border-width: 2px;
}

.statusBtn.available { border-left: 3px solid #18c37e; }
.statusBtn.available.active { background: rgba(24, 195, 126, 0.15); border-color: rgba(24, 195, 126, 0.5); }

.statusBtn.busy { border-left: 3px solid #ffbf2f; }
.statusBtn.busy.active { background: rgba(255, 191, 47, 0.15); border-color: rgba(255, 191, 47, 0.5); }

.statusBtn.enroute { border-left: 3px solid #2f6bff; }
.statusBtn.enroute.active { background: rgba(47, 107, 255, 0.15); border-color: rgba(47, 107, 255, 0.5); }

.statusBtn.onscene { border-left: 3px solid #00d4ff; }
.statusBtn.onscene.active { background: rgba(0, 212, 255, 0.15); border-color: rgba(0, 212, 255, 0.5); }

.statusBtn.transport { border-left: 3px solid #a855f7; }
.statusBtn.transport.active { background: rgba(168, 85, 247, 0.15); border-color: rgba(168, 85, 247, 0.5); }

.statusBtn.outofservice { border-left: 3px solid #ff4d6d; }
.statusBtn.outofservice.active { background: rgba(255, 77, 109, 0.15); border-color: rgba(255, 77, 109, 0.5); }

.statusCode {
  font-size: 10px;
  font-weight: 900;
  font-family: var(--mono);
  color: var(--text);
  min-width: 32px;
}

.statusName {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.currentStatus {
  margin: 6px;
  padding: 8px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(47, 107, 255, 0.3);
  border-radius: 6px;
  text-align: center;
  flex-shrink: 0;
}

.currentStatusLabel {
  font-size: 7px;
  color: var(--muted2);
  letter-spacing: 0.12em;
  margin-bottom: 4px;
}

.currentStatusValue {
  font-size: 11px;
  font-weight: 900;
  color: var(--muted);
}

.currentStatusValue.available {
  color: #18c37e;
  text-shadow: 0 0 8px rgba(24, 195, 126, 0.4);
}

.currentStatusValue.busy {
  color: #ffbf2f;
  text-shadow: 0 0 8px rgba(255, 191, 47, 0.4);
}

.currentStatusValue.enroute {
  color: #2f6bff;
  text-shadow: 0 0 8px rgba(47, 107, 255, 0.4);
}

.currentStatusValue.onscene {
  color: #00d4ff;
  text-shadow: 0 0 8px rgba(0, 212, 255, 0.4);
}

.currentStatusValue.transport {
  color: #a855f7;
  text-shadow: 0 0 8px rgba(168, 85, 247, 0.4);
}

.currentStatusValue.outofservice {
  color: #ff4d6d;
  text-shadow: 0 0 8px rgba(255, 77, 109, 0.4);
}

/* Main Menu Grid */
.consoleMain {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

.menuGrid {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  padding: 8px 10px;
  background: linear-gradient(180deg, rgba(47, 107, 255, 0.05) 0%, transparent 100%);
  border-bottom: 1px solid rgba(47, 107, 255, 0.2);
  flex-shrink: 0;
}

.menuGrid .menuTile {
  flex: 1 1 0;
  min-width: 0;
}

.rightLogout {
  margin-top: 8px;
  padding: 0 10px 10px;
}

.rightLogout .menuTile {
  min-height: 56px;
  padding: 8px 6px;
  width: 100%;
}

.menuTile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 8px;
  background: linear-gradient(180deg, rgba(16, 31, 53, 0.9) 0%, rgba(10, 18, 32, 0.9) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  position: relative;
  min-height: 70px;
}

.menuTile:hover {
  border-color: rgba(47, 107, 255, 0.5);
  background: linear-gradient(180deg, rgba(47, 107, 255, 0.15) 0%, rgba(16, 31, 53, 0.9) 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 0 15px rgba(47, 107, 255, 0.2);
}

.menuTile.active {
  border-color: rgba(47, 107, 255, 0.6);
  background: linear-gradient(180deg, rgba(47, 107, 255, 0.2) 0%, rgba(16, 31, 53, 0.95) 100%);
  box-shadow: 0 0 20px rgba(47, 107, 255, 0.3);
}

.menuTile.active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #2f6bff, transparent);
  border-radius: 8px 8px 0 0;
}

.menuTile.command {
  border-color: rgba(255, 191, 47, 0.3);
}

.menuTile.command:hover {
  border-color: rgba(255, 191, 47, 0.6);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 0 15px rgba(255, 191, 47, 0.2);
}

.menuTile.logout {
  border-color: rgba(255, 77, 109, 0.3);
}

.menuTile.logout:hover {
  border-color: rgba(255, 77, 109, 0.6);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 0 15px rgba(255, 77, 109, 0.2);
}

.tileIcon {
  width: 24px;
  height: 24px;
  margin-bottom: 6px;
  color: #7aa3ff;
}

.menuTile:hover .tileIcon { color: #a0c4ff; }
.menuTile.active .tileIcon { color: #2f6bff; }
.menuTile.command .tileIcon { color: #ffbf2f; }
.menuTile.logout .tileIcon { color: #ff4d6d; }

.tileIcon svg {
  width: 100%;
  height: 100%;
}

.vehicleIcon {
  width: 24px;
  height: 24px;
}

.tileLabel {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: var(--text);
  text-align: center;
}

.tileSub {
  font-size: 7px;
  color: var(--muted);
  margin-top: 2px;
  letter-spacing: 0.03em;
}


/* Console Content Area */
.consoleContent {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
  background: rgba(0, 0, 0, 0.2);
}

.consoleContent .contentHeader {
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg, rgba(47, 107, 255, 0.08) 0%, transparent 50%);
  flex-shrink: 0;
}

.consoleContent .contentBreadcrumb {
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: 9px;
  color: var(--muted);
}

.consoleContent .contentBreadcrumb .crumb.active {
  color: var(--text);
  font-weight: 700;
}

.consoleContent .contentBreadcrumb .crumbSep {
  opacity: 0.5;
}

.consoleContent .contentTitles {
  margin-top: 4px;
}

.consoleContent .contentTitles .pageTitle {
  font-size: 14px;
}

.consoleContent .contentTitles .pageSub {
  font-size: 10px;
  margin-top: 2px;
}

.consoleContent .contentGrid {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 8px;
  padding: 8px;
  overflow: hidden;
  min-height: 0;
}

.consoleContent .contentGrid.full-width {
  grid-template-columns: 1fr;
}

/* Right Panel - Active Call */
.activeCallPanel {
  flex-shrink: 0;
}

.activeCallBody {
  padding: 8px;
  min-height: 80px;
}

.noCallMessage {
  text-align: center;
  padding: 20px 8px;
  color: var(--muted2);
  font-size: 9px;
  letter-spacing: 0.08em;
}

.activeCallInfo {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(47, 107, 255, 0.3);
  border-radius: 6px;
  padding: 8px;
}

.activeCallTitle {
  font-size: 10px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 6px;
}

.activeCallMeta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 9px;
}

.activeCallRow {
  display: flex;
  justify-content: space-between;
  gap: 6px;
}

.activeCallLabel {
  color: var(--muted2);
}

.activeCallValue {
  color: var(--text);
  font-family: var(--mono);
}

.activeCallPriority {
  display: inline-block;
  padding: 2px 6px;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.06em;
  border-radius: 3px;
  margin-top: 6px;
}

.activeCallPriority.low { background: rgba(24, 195, 126, 0.2); color: #18c37e; }
.activeCallPriority.medium { background: rgba(47, 107, 255, 0.2); color: #7aa3ff; }
.activeCallPriority.high { background: rgba(255, 191, 47, 0.2); color: #ffbf2f; }
.activeCallPriority.urgent { background: rgba(255, 77, 109, 0.2); color: #ff4d6d; }

/* Right Panel - Code Reference */
.codeRefPanel {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

.codeRefBody {
  flex: 1;
  overflow-y: auto;
  padding: 4px 6px;
}

.codeRow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  font-size: 9px;
}

.codeRow:hover {
  background: rgba(47, 107, 255, 0.08);
}

.codeRow .code {
  color: #7aa3ff;
  font-weight: 700;
  min-width: 40px;
}

.codeRow .meaning {
  color: var(--muted);
  text-align: right;
  font-size: 8px;
}


/* Hide old sidebar in new console mode */
#view-main .sidebar {
  display: none;
}

#view-main .topbar {
  display: none;
}

/* Override old main styles */
#view-main .main {
  display: none;
}

/* Show console layout */
#view-main.console-mode .console {
  display: flex;
}

/* ============================================================
 * CUSTOM SCROLLBARS - Modern thin style
 * ============================================================ */

/* Webkit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb {
  background: rgba(47, 107, 255, 0.4);
  border-radius: 3px;
  transition: background 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(47, 107, 255, 0.6);
}

::-webkit-scrollbar-corner {
  background: transparent;
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(47, 107, 255, 0.4) rgba(0, 0, 0, 0.3);
}

/* ============================================================
 * FIX: Status Button Active Colors
 * ============================================================ */

.statusBtn.available.active {
  background: rgba(24, 195, 126, 0.25) !important;
  border-color: #18c37e !important;
  box-shadow: 0 0 12px rgba(24, 195, 126, 0.3), inset 0 0 20px rgba(24, 195, 126, 0.1);
}

.statusBtn.available.active .statusCode,
.statusBtn.available.active .statusName {
  color: #18c37e;
}

.statusBtn.busy.active {
  background: rgba(255, 191, 47, 0.25) !important;
  border-color: #ffbf2f !important;
  box-shadow: 0 0 12px rgba(255, 191, 47, 0.3), inset 0 0 20px rgba(255, 191, 47, 0.1);
}

.statusBtn.busy.active .statusCode,
.statusBtn.busy.active .statusName {
  color: #ffbf2f;
}

.statusBtn.enroute.active {
  background: rgba(47, 107, 255, 0.25) !important;
  border-color: #2f6bff !important;
  box-shadow: 0 0 12px rgba(47, 107, 255, 0.3), inset 0 0 20px rgba(47, 107, 255, 0.1);
}

.statusBtn.enroute.active .statusCode,
.statusBtn.enroute.active .statusName {
  color: #7aa3ff;
}

.statusBtn.onscene.active {
  background: rgba(0, 212, 255, 0.25) !important;
  border-color: #00d4ff !important;
  box-shadow: 0 0 12px rgba(0, 212, 255, 0.3), inset 0 0 20px rgba(0, 212, 255, 0.1);
}

.statusBtn.onscene.active .statusCode,
.statusBtn.onscene.active .statusName {
  color: #00d4ff;
}

.statusBtn.transport.active {
  background: rgba(168, 85, 247, 0.25) !important;
  border-color: #a855f7 !important;
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.3), inset 0 0 20px rgba(168, 85, 247, 0.1);
}

.statusBtn.transport.active .statusCode,
.statusBtn.transport.active .statusName {
  color: #a855f7;
}

.statusBtn.outofservice.active {
  background: rgba(255, 77, 109, 0.25) !important;
  border-color: #ff4d6d !important;
  box-shadow: 0 0 12px rgba(255, 77, 109, 0.3), inset 0 0 20px rgba(255, 77, 109, 0.1);
}

.statusBtn.outofservice.active .statusCode,
.statusBtn.outofservice.active .statusName {
  color: #ff4d6d;
}

/* ============================================================
 * FIX: CAD Tab for Console Layout (1400x900)
 * ============================================================ */

.consoleContent #tab-calls .cadRoot {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  border-radius: 0;
  border: none;
  box-shadow: none;
}

.consoleContent #tab-calls .cadMain {
  grid-template-columns: 180px 1fr 180px;
}

.consoleContent #tab-calls .cadCallQueue,
.consoleContent #tab-calls .cadRight {
  min-width: 180px;
  max-width: 180px;
}

.consoleContent #tab-calls .cadQueueList,
.consoleContent #tab-calls .cadLogList,
.consoleContent #tab-calls .cadUnitsList,
.consoleContent #tab-calls .cadRadioList {
  max-height: none;
  overflow-y: auto;
}

.consoleContent #tab-calls .cadCenter {
  min-width: 0;
  overflow: hidden;
}

.consoleContent #tab-calls .cadCallCard {
  max-height: 45%;
  overflow-y: auto;
}

.consoleContent #tab-calls .cadDispatchConsole,
.consoleContent #tab-calls .cadOfficerPanel {
  max-height: 55%;
  overflow-y: auto;
}

/* CAD Modal fix */
.consoleContent #tab-calls .cadModal {
  position: fixed;
  inset: 0;
  z-index: 9999;
}

.consoleContent #tab-calls .cadModalContent {
  max-height: 85vh;
  max-width: 700px;
  overflow-y: auto;
}

/* ============================================================
 * FIX: Officers Tab for Console Layout (1400x900)
 * ============================================================ */

.consoleContent #tab-officers .mdtOfficerRoot {
  width: 100%;
  height: 100%;
  max-height: none;
  overflow: hidden;
}

.consoleContent #tab-officers .mdtOfficerHeader {
  height: 36px;
  padding: 0 10px;
  flex-shrink: 0;
}

.consoleContent #tab-officers .mdtOfficerHeader .mdtOfficerLogo {
  font-size: 12px;
}

.consoleContent #tab-officers .mdtOfficerHeader .mdtOfficerTitle {
  font-size: 10px;
}

.consoleContent #tab-officers .mdtOfficerMain {
  grid-template-columns: 240px 1fr;
  gap: 8px;
  padding: 8px;
  overflow: hidden;
  min-height: 0;
}

.consoleContent #tab-officers .mdtOfficerLeft {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  min-height: 0;
}

.consoleContent #tab-officers .mdtOfficerRight {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
  min-height: 0;
}

/* Unit Status Card - compact */
.consoleContent #tab-officers .mdtUnitStatusCard {
  flex-shrink: 0;
}

.consoleContent #tab-officers .mdtUnitStatusHeader {
  padding: 6px 10px;
}

.consoleContent #tab-officers .mdtUnitStatusTitle {
  font-size: 9px;
}

.consoleContent #tab-officers .mdtUnitStatusBody {
  padding: 8px;
}

.consoleContent #tab-officers .mdtBigStatus {
  gap: 8px;
  margin-bottom: 8px;
}

.consoleContent #tab-officers .mdtBigStatusIndicator {
  padding: 8px 16px;
}

.consoleContent #tab-officers .mdtBigStatusText {
  font-size: 12px;
}

.consoleContent #tab-officers .mdtBigStatusCallsign {
  font-size: 14px;
}

.consoleContent #tab-officers .mdtBigStatusName {
  font-size: 10px;
}

.consoleContent #tab-officers .mdtShiftInfo {
  padding: 6px;
  gap: 6px;
}

.consoleContent #tab-officers .mdtShiftItem {
  padding: 4px 8px;
}

.consoleContent #tab-officers .mdtShiftLabel {
  font-size: 7px;
}

.consoleContent #tab-officers .mdtShiftValue {
  font-size: 10px;
}

.consoleContent #tab-officers .mdtClockButtons {
  gap: 6px;
}

.consoleContent #tab-officers .mdtClockBtn {
  padding: 8px 12px;
}

.consoleContent #tab-officers .mdtClockBtnIcon {
  font-size: 14px;
}

.consoleContent #tab-officers .mdtClockBtnText {
  font-size: 9px;
}

/* Quick Status - compact */
.consoleContent #tab-officers .mdtQuickStatus {
  flex-shrink: 0;
}

.consoleContent #tab-officers .mdtQuickStatusHeader {
  padding: 6px 10px;
}

.consoleContent #tab-officers .mdtQuickStatusTitle {
  font-size: 9px;
}

.consoleContent #tab-officers .mdtQuickStatusGrid {
  padding: 6px;
  gap: 4px;
}

.consoleContent #tab-officers .mdtStatusBtn {
  padding: 6px 8px;
  font-size: 8px;
}

.consoleContent #tab-officers .mdtStatusBtnDot {
  width: 6px;
  height: 6px;
}

.consoleContent #tab-officers .mdtQuickStatusHint {
  padding: 4px 8px;
  font-size: 7px;
}

/* Unit Profile - compact */
.consoleContent #tab-officers .mdtUnitProfile {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.consoleContent #tab-officers .mdtUnitProfileHeader {
  padding: 6px 10px;
}

.consoleContent #tab-officers .mdtUnitProfileTitle {
  font-size: 9px;
}

.consoleContent #tab-officers .mdtUnitProfileBody {
  padding: 8px;
}

.consoleContent #tab-officers .mdtProfileGrid {
  gap: 6px;
}

.consoleContent #tab-officers .mdtProfileField label {
  font-size: 7px;
  margin-bottom: 2px;
}

.consoleContent #tab-officers .mdtProfileInput {
  padding: 5px 8px;
  font-size: 10px;
}

.consoleContent #tab-officers .mdtProfileActions {
  margin-top: 8px;
}

/* Roster Panel - fills space */
.consoleContent #tab-officers .mdtRosterPanel {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

.consoleContent #tab-officers .mdtRosterHeader {
  padding: 8px 10px;
  flex-shrink: 0;
}

.consoleContent #tab-officers .mdtRosterTitle {
  font-size: 10px;
}

.consoleContent #tab-officers .mdtRosterSubtitle {
  font-size: 8px;
}

.consoleContent #tab-officers .mdtRosterCount {
  font-size: 10px;
}

.consoleContent #tab-officers .mdtRosterFilter {
  padding: 6px 8px;
  gap: 6px;
  flex-shrink: 0;
}

.consoleContent #tab-officers .mdtRosterFilterSelect,
.consoleContent #tab-officers .mdtRosterSearch {
  padding: 5px 8px;
  font-size: 9px;
}

.consoleContent #tab-officers .mdtRosterGrid {
  flex: 1;
  overflow-y: auto;
  padding: 6px;
  gap: 6px;
  min-height: 0;
}

.consoleContent #tab-officers .mdtRosterCard {
  padding: 8px;
}

.consoleContent #tab-officers .mdtRosterCallsign {
  font-size: 11px;
}

.consoleContent #tab-officers .mdtRosterName {
  font-size: 9px;
}

.consoleContent #tab-officers .mdtRosterMeta {
  font-size: 8px;
}

/* 10-Codes Panel - compact */
.consoleContent #tab-officers .mdtCodesPanel {
  flex-shrink: 0;
  max-height: 200px;
  overflow: hidden;
}

.consoleContent #tab-officers .mdtCodesHeader {
  padding: 6px 10px;
}

.consoleContent #tab-officers .mdtCodesTitle {
  font-size: 9px;
}

.consoleContent #tab-officers .mdtCodesBody {
  max-height: 160px;
  overflow-y: auto;
}

.consoleContent #tab-officers .mdtCodesGrid {
  padding: 6px;
  gap: 2px;
}

.consoleContent #tab-officers .mdtCodeItem {
  padding: 3px 6px;
  font-size: 8px;
}

/* ============================================================
 * FIX: Inspector Panel for Console Layout
 * ============================================================ */

.consoleContent .inspector {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
  max-height: 100%;
}

.consoleContent .inspectorHeader {
  padding: 8px 10px;
  flex-shrink: 0;
}

.consoleContent .inspectorTitle {
  font-size: 10px;
}

.consoleContent .inspectorBadge {
  font-size: 9px;
}

.consoleContent .inspectorBody {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  min-height: 0;
}

.consoleContent .inspectorFooter {
  padding: 6px 8px;
  flex-shrink: 0;
}

/* ============================================================
 * FIX: Content Main Area Scrolling
 * ============================================================ */

.consoleContent .contentMain {
  overflow-y: auto;
  min-height: 0;
}

.consoleContent .contentMain .tab {
  height: 100%;
  overflow: hidden;
}

.consoleContent .contentMain .tab > div {
  height: 100%;
  overflow: hidden;
}

/* ============================================================
 * NEW OFFICERS TAB - Redesigned for 1400x900 Console
 * ============================================================ */

#tab-officers .officerConsole {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 8px;
  height: 100%;
  padding: 8px;
  background: linear-gradient(180deg, rgba(5, 8, 16, 0.5) 0%, rgba(10, 16, 24, 0.5) 100%);
  overflow: hidden;
}

/* ===== LEFT PANEL - Unit Panel ===== */
#tab-officers .unitPanel {
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Card Base Style */
#tab-officers .unitCard,
#tab-officers .quickStatusCard,
#tab-officers .profileCard {
  background: linear-gradient(180deg, rgba(14, 26, 43, 0.95) 0%, rgba(10, 18, 32, 0.95) 100%);
  border: 1px solid rgba(47, 107, 255, 0.2);
  border-radius: 6px;
  overflow: hidden;
}

#tab-officers .unitCardHeader {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  background: linear-gradient(180deg, rgba(47, 107, 255, 0.12) 0%, transparent 100%);
  border-bottom: 1px solid rgba(47, 107, 255, 0.15);
}

#tab-officers .unitCardHeader.clickable {
  cursor: pointer;
  transition: background 0.15s ease;
}

#tab-officers .unitCardHeader.clickable:hover {
  background: rgba(47, 107, 255, 0.15);
}

#tab-officers .unitCardIcon {
  color: #2f6bff;
  font-size: 8px;
}

#tab-officers .unitCardTitle {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #7aa3ff;
  flex: 1;
}

#tab-officers .unitRoleBadge {
  font-size: 7px;
  font-weight: 800;
  padding: 2px 6px;
  background: rgba(47, 107, 255, 0.2);
  border: 1px solid rgba(47, 107, 255, 0.4);
  border-radius: 3px;
  color: #7aa3ff;
  letter-spacing: 0.08em;
}

#tab-officers .toggleIcon {
  font-size: 10px;
  color: var(--muted);
  font-weight: 700;
}

/* Unit Card Body */
#tab-officers .unitCardBody {
  padding: 10px;
}

/* Status Display */
#tab-officers .unitStatusDisplay {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 6px;
  margin-bottom: 8px;
}

#tab-officers .statusDotLarge {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ff4d6d;
  box-shadow: 0 0 12px rgba(255, 77, 109, 0.5);
  flex-shrink: 0;
}

#tab-officers .statusDotLarge.on {
  background: #18c37e;
  box-shadow: 0 0 12px rgba(24, 195, 126, 0.5);
  animation: statusPulse 2s ease-in-out infinite;
}

#tab-officers .statusDotLarge.available { background: #18c37e; box-shadow: 0 0 12px rgba(24, 195, 126, 0.5); }
#tab-officers .statusDotLarge.busy { background: #ffbf2f; box-shadow: 0 0 12px rgba(255, 191, 47, 0.5); }
#tab-officers .statusDotLarge.enroute { background: #2f6bff; box-shadow: 0 0 12px rgba(47, 107, 255, 0.5); }
#tab-officers .statusDotLarge.onscene { background: #00d4ff; box-shadow: 0 0 12px rgba(0, 212, 255, 0.5); }
#tab-officers .statusDotLarge.break { background: #a855f7; box-shadow: 0 0 12px rgba(168, 85, 247, 0.5); }
#tab-officers .statusDotLarge.code6 { background: #ffbf2f; box-shadow: 0 0 12px rgba(255, 191, 47, 0.5); }

#tab-officers .statusInfo {
  flex: 1;
  min-width: 0;
}

#tab-officers .statusText {
  font-size: 11px;
  font-weight: 900;
  color: var(--text);
  letter-spacing: 0.06em;
}

#tab-officers .statusMeta {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 2px;
}

#tab-officers .callsignBig {
  font-size: 13px;
  font-weight: 900;
  color: #2f6bff;
}

#tab-officers .nameSub {
  font-size: 9px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Shift Timer */
#tab-officers .shiftTimer {
  display: flex;
  gap: 4px;
  margin-bottom: 8px;
}

#tab-officers .timerItem {
  flex: 1;
  padding: 6px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 4px;
  text-align: center;
}

#tab-officers .timerLabel {
  font-size: 6px;
  color: var(--muted2);
  letter-spacing: 0.1em;
  display: block;
}

#tab-officers .timerValue {
  font-size: 10px;
  font-weight: 700;
  color: var(--text);
  display: block;
  margin-top: 2px;
}

/* Clock Buttons */
#tab-officers .clockActions {
  display: flex;
  gap: 6px;
}

#tab-officers .clockBtn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px;
  border: none;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: all 0.15s ease;
}

#tab-officers .clockBtn.in {
  background: linear-gradient(180deg, rgba(24, 195, 126, 0.3) 0%, rgba(24, 195, 126, 0.15) 100%);
  border: 1px solid rgba(24, 195, 126, 0.5);
  color: #18c37e;
}

#tab-officers .clockBtn.in:hover {
  background: linear-gradient(180deg, rgba(24, 195, 126, 0.4) 0%, rgba(24, 195, 126, 0.2) 100%);
  box-shadow: 0 0 15px rgba(24, 195, 126, 0.3);
}

#tab-officers .clockBtn.out {
  background: linear-gradient(180deg, rgba(255, 77, 109, 0.3) 0%, rgba(255, 77, 109, 0.15) 100%);
  border: 1px solid rgba(255, 77, 109, 0.5);
  color: #ff4d6d;
}

#tab-officers .clockBtn.out:hover {
  background: linear-gradient(180deg, rgba(255, 77, 109, 0.4) 0%, rgba(255, 77, 109, 0.2) 100%);
  box-shadow: 0 0 15px rgba(255, 77, 109, 0.3);
}

#tab-officers .clockIcon {
  font-size: 14px;
  font-weight: 900;
}

/* Quick Status Grid */
#tab-officers .quickStatusGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 8px;
}

#tab-officers .qsBtn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 4px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.15s ease;
}

#tab-officers .qsBtn:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.15);
}

#tab-officers .qsBtn.active {
  border-width: 2px;
}

#tab-officers .qsBtn.available.active { background: rgba(24, 195, 126, 0.2); border-color: #18c37e; }
#tab-officers .qsBtn.busy.active { background: rgba(255, 191, 47, 0.2); border-color: #ffbf2f; }
#tab-officers .qsBtn.enroute.active { background: rgba(47, 107, 255, 0.2); border-color: #2f6bff; }
#tab-officers .qsBtn.onscene.active { background: rgba(0, 212, 255, 0.2); border-color: #00d4ff; }
#tab-officers .qsBtn.transport.active { background: rgba(168, 85, 247, 0.2); border-color: #a855f7; }
#tab-officers .qsBtn.outofservice.active { background: rgba(255, 77, 109, 0.2); border-color: #ff4d6d; }

#tab-officers .qsDot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-bottom: 4px;
}

#tab-officers .qsBtn.available .qsDot { background: #18c37e; }
#tab-officers .qsBtn.busy .qsDot { background: #ffbf2f; }
#tab-officers .qsBtn.enroute .qsDot { background: #2f6bff; }
#tab-officers .qsBtn.onscene .qsDot { background: #00d4ff; }
#tab-officers .qsBtn.transport .qsDot { background: #a855f7; }
#tab-officers .qsBtn.outofservice .qsDot { background: #ff4d6d; }

#tab-officers .qsLabel {
  font-size: 9px;
  font-weight: 900;
  color: var(--text);
  font-family: var(--mono);
}

#tab-officers .qsText {
  font-size: 7px;
  color: var(--muted);
  letter-spacing: 0.05em;
  margin-top: 1px;
}

/* Profile Card */
#tab-officers .profileBody {
  padding: 8px;
}

#tab-officers .profileRow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 6px;
}

#tab-officers .profileField label {
  display: block;
  font-size: 7px;
  color: var(--muted2);
  letter-spacing: 0.1em;
  margin-bottom: 3px;
}

#tab-officers .profileInput {
  width: 100%;
  padding: 6px 8px;
  font-size: 10px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  color: var(--text);
  outline: none;
  transition: border-color 0.15s ease;
}

#tab-officers .profileInput:focus {
  border-color: rgba(47, 107, 255, 0.5);
}

#tab-officers .saveBtn {
  width: 100%;
  padding: 8px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  background: linear-gradient(180deg, rgba(47, 107, 255, 0.3) 0%, rgba(47, 107, 255, 0.15) 100%);
  border: 1px solid rgba(47, 107, 255, 0.5);
  border-radius: 4px;
  color: #7aa3ff;
  cursor: pointer;
  transition: all 0.15s ease;
}

#tab-officers .saveBtn:hover {
  background: linear-gradient(180deg, rgba(47, 107, 255, 0.4) 0%, rgba(47, 107, 255, 0.2) 100%);
  box-shadow: 0 0 12px rgba(47, 107, 255, 0.3);
}

/* Full Roster Button */
#tab-officers .fullRosterBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 10px;
  margin-top: 8px;
  background: linear-gradient(180deg, rgba(47, 107, 255, 0.15) 0%, rgba(47, 107, 255, 0.05) 100%);
  border: 1px solid rgba(47, 107, 255, 0.3);
  border-radius: 6px;
  color: var(--text);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: all 0.15s ease;
}

#tab-officers .fullRosterBtn:hover {
  background: linear-gradient(180deg, rgba(47, 107, 255, 0.25) 0%, rgba(47, 107, 255, 0.1) 100%);
  border-color: rgba(47, 107, 255, 0.5);
}

#tab-officers .fullRosterIcon {
  font-size: 14px;
}

/* Full Roster Modal */
.fullRosterModal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(4px);
}

.fullRosterBox {
  width: 950px;
  max-width: 95vw;
  height: 85vh;
  max-height: 85vh;
  background: linear-gradient(180deg, #0d1829 0%, #080e18 100%);
  border: 1px solid rgba(47, 107, 255, 0.25);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.6), 0 0 40px rgba(47, 107, 255, 0.1);
}

.fullRosterHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  background: linear-gradient(180deg, rgba(47, 107, 255, 0.12) 0%, transparent 100%);
  border-bottom: 1px solid rgba(47, 107, 255, 0.15);
}

.fullRosterTitle {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--text);
  text-shadow: 0 0 20px rgba(47, 107, 255, 0.3);
}

.fullRosterClose {
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  color: var(--muted);
  font-size: 20px;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fullRosterClose:hover {
  background: rgba(255, 77, 109, 0.15);
  border-color: rgba(255, 77, 109, 0.3);
  color: #ff4d6d;
}

.fullRosterFilters {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 24px;
  background: rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid var(--line);
}

.fullRosterSearchRow {
  width: 100%;
}

.fullRosterSearch {
  width: 100%;
  padding: 12px 16px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  color: var(--text);
  font-size: 13px;
}

.fullRosterSearch::placeholder {
  color: var(--muted2);
}

.fullRosterSearch:focus {
  outline: none;
  border-color: rgba(47, 107, 255, 0.4);
  box-shadow: 0 0 12px rgba(47, 107, 255, 0.15);
}

.fullRosterFilterRow {
  display: flex;
  align-items: center;
  gap: 10px;
}

.fullRosterFilterLabel {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--muted2);
}

.fullRosterFilter {
  padding: 8px 14px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  color: var(--text);
  font-size: 12px;
  cursor: pointer;
}

.fullRosterTable {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.fullRosterTableHeader {
  display: flex;
  padding: 12px 24px;
  background: rgba(0, 0, 0, 0.25);
  border-bottom: 1px solid var(--line);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--muted2);
}

.fullRosterTableBody {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}

.fullRosterTableBody::-webkit-scrollbar {
  width: 6px;
}

.fullRosterTableBody::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
}

.fullRosterTableBody::-webkit-scrollbar-thumb {
  background: rgba(47, 107, 255, 0.3);
  border-radius: 3px;
}

.frCol { padding: 0 12px; }
.frColStatus { width: 100px; }
.frColCallsign { width: 120px; }
.frColName { flex: 1; min-width: 150px; }
.frColDept { width: 100px; }
.frColRank { width: 140px; }

.fullRosterRow {
  display: flex;
  align-items: center;
  padding: 12px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  font-size: 13px;
  transition: background 0.15s ease;
}

.fullRosterRow:hover {
  background: rgba(47, 107, 255, 0.06);
}

.fullRosterRow:nth-child(even) {
  background: rgba(0, 0, 0, 0.15);
}

.fullRosterRow:nth-child(even):hover {
  background: rgba(47, 107, 255, 0.08);
}

.fullRosterRow .frCol {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fullRosterRow .frColCallsign {
  font-family: var(--mono);
  font-weight: 700;
  color: #7aa3ff;
}

.frStatusBadge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.frStatusBadge.onduty {
  background: rgba(24, 195, 126, 0.12);
  border: 1px solid rgba(24, 195, 126, 0.25);
  color: #18c37e;
  box-shadow: 0 0 12px rgba(24, 195, 126, 0.1);
}

.frStatusBadge.offduty {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--muted2);
}

.frStatusDot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.frStatusBadge.onduty .frStatusDot {
  background: #18c37e;
  box-shadow: 0 0 6px rgba(24, 195, 126, 0.5);
}
.frStatusBadge.offduty .frStatusDot { background: var(--muted2); }

.fullRosterLoading {
  padding: 60px;
  text-align: center;
  color: var(--muted2);
  font-size: 14px;
}

.fullRosterEmpty {
  padding: 60px;
  text-align: center;
  color: var(--muted2);
  font-size: 14px;
}

.fullRosterFooter {
  display: flex;
  gap: 24px;
  padding: 14px 24px;
  background: rgba(0, 0, 0, 0.25);
  border-top: 1px solid var(--line);
  font-size: 12px;
}

.frStat {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
}

.frStat.total {
  margin-left: auto;
  font-weight: 700;
  color: var(--text);
}

.frStatDot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.frStatDot.onduty {
  background: #18c37e;
  box-shadow: 0 0 8px rgba(24, 195, 126, 0.4);
}
.frStatDot.offduty { background: var(--muted2); }

.frStatDot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.frStatDot.onduty { background: #18c37e; }
.frStatDot.offduty { background: var(--muted2); }

/* Officer Profile Modal */
.officerProfileModal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1001;
  backdrop-filter: blur(4px);
}

.officerProfileBox {
  width: 550px;
  max-width: 95vw;
  max-height: 85vh;
  background: linear-gradient(180deg, #0d1829 0%, #080e18 100%);
  border: 1px solid rgba(47, 107, 255, 0.25);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.6);
}

.officerProfileHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: linear-gradient(180deg, rgba(47, 107, 255, 0.12) 0%, transparent 100%);
  border-bottom: 1px solid rgba(47, 107, 255, 0.15);
}

.officerProfileTitle {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--text);
}

.officerProfileClose {
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  color: var(--muted);
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.officerProfileClose:hover {
  background: rgba(255, 77, 109, 0.15);
  border-color: rgba(255, 77, 109, 0.3);
  color: #ff4d6d;
}

.officerProfileContent {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
}

.officerProfileInfo {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
}

.profileInfoRow {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}

.profileInfoRow:last-child {
  border-bottom: none;
}

.profileInfoLabel {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--muted2);
}

.profileInfoValue {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.profileBadges {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.profileBadge {
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.profileBadge.fto {
  background: rgba(168, 85, 247, 0.15);
  border: 1px solid rgba(168, 85, 247, 0.3);
  color: #a855f7;
}

.profileBadge.admin {
  background: rgba(255, 191, 47, 0.15);
  border: 1px solid rgba(255, 191, 47, 0.3);
  color: #ffbf2f;
}

.profileBadge.cadet {
  background: rgba(0, 212, 255, 0.15);
  border: 1px solid rgba(0, 212, 255, 0.3);
  color: #00d4ff;
}

.profileSectionHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--line);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--muted);
}

.profileFtoSection,
.profileCadetsSection,
.profileNotesSection {
  margin-bottom: 16px;
}

.profileFtoActions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.ftoActionBtn {
  padding: 8px 14px;
  background: rgba(47, 107, 255, 0.1);
  border: 1px solid rgba(47, 107, 255, 0.3);
  border-radius: 6px;
  color: var(--text);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.ftoActionBtn:hover {
  background: rgba(47, 107, 255, 0.2);
  border-color: rgba(47, 107, 255, 0.5);
}

.ftoActionBtn.unlink {
  background: rgba(255, 77, 109, 0.1);
  border-color: rgba(255, 77, 109, 0.3);
}

.ftoActionBtn.unlink:hover {
  background: rgba(255, 77, 109, 0.2);
  border-color: rgba(255, 77, 109, 0.5);
}

.profileCadetsList {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cadetItem {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--line);
  border-radius: 6px;
}

.cadetInfo {
  display: flex;
  gap: 12px;
  align-items: center;
}

.cadetCallsign {
  font-family: var(--mono);
  font-weight: 700;
  color: #7aa3ff;
}

.cadetName {
  font-size: 12px;
  color: var(--muted);
}

.cadetUnlinkBtn {
  padding: 4px 10px;
  background: rgba(255, 77, 109, 0.1);
  border: 1px solid rgba(255, 77, 109, 0.3);
  border-radius: 4px;
  color: #ff4d6d;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
}

.cadetUnlinkBtn:hover {
  background: rgba(255, 77, 109, 0.2);
}

.addNoteBtn {
  padding: 4px 10px;
  background: rgba(24, 195, 126, 0.1);
  border: 1px solid rgba(24, 195, 126, 0.3);
  border-radius: 4px;
  color: #18c37e;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}

.addNoteBtn:hover {
  background: rgba(24, 195, 126, 0.2);
}

.profileNotesList {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 200px;
  overflow-y: auto;
}

.noNotes {
  padding: 20px;
  text-align: center;
  color: var(--muted2);
  font-size: 12px;
}

.noteItem {
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--line);
  border-radius: 6px;
}

.noteItem.fto {
  border-left: 3px solid #a855f7;
}

.noteItem.command {
  border-left: 3px solid #ffbf2f;
}

.noteHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.noteAuthor {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
}

.noteType {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 2px 6px;
  border-radius: 3px;
}

.noteType.fto {
  background: rgba(168, 85, 247, 0.15);
  color: #a855f7;
}

.noteType.command {
  background: rgba(255, 191, 47, 0.15);
  color: #ffbf2f;
}

.noteContent {
  font-size: 12px;
  color: var(--text);
  line-height: 1.5;
  margin-bottom: 6px;
}

.noteFooter {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.noteDate {
  font-size: 10px;
  color: var(--muted2);
}

.noteDeleteBtn {
  padding: 2px 8px;
  background: transparent;
  border: 1px solid rgba(255, 77, 109, 0.3);
  border-radius: 3px;
  color: #ff4d6d;
  font-size: 9px;
  cursor: pointer;
}

.noteDeleteBtn:hover {
  background: rgba(255, 77, 109, 0.15);
}

.addNoteForm {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  margin-top: 12px;
}

.noteTypeSelector {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.noteTypeBtn {
  flex: 1;
  padding: 8px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}

.noteTypeBtn.active {
  background: rgba(47, 107, 255, 0.15);
  border-color: rgba(47, 107, 255, 0.4);
  color: var(--text);
}

.noteTypeBtn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.noteTextarea {
  width: 100%;
  min-height: 80px;
  padding: 10px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  font-size: 12px;
  resize: vertical;
  margin-bottom: 10px;
}

.noteTextarea:focus {
  outline: none;
  border-color: rgba(47, 107, 255, 0.4);
}

.noteFormActions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.noteCancelBtn {
  padding: 8px 16px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

.noteSaveBtn {
  padding: 8px 16px;
  background: rgba(24, 195, 126, 0.15);
  border: 1px solid rgba(24, 195, 126, 0.3);
  border-radius: 4px;
  color: #18c37e;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

.noteSaveBtn:hover {
  background: rgba(24, 195, 126, 0.25);
}

/* ===== RIGHT PANEL - Roster ===== */
#tab-officers .rosterPanel {
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(14, 26, 43, 0.95) 0%, rgba(10, 18, 32, 0.95) 100%);
  border: 1px solid rgba(47, 107, 255, 0.2);
  border-radius: 6px;
  overflow: hidden;
}

#tab-officers .rosterHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  background: linear-gradient(180deg, rgba(47, 107, 255, 0.12) 0%, transparent 100%);
  border-bottom: 1px solid rgba(47, 107, 255, 0.15);
  flex-shrink: 0;
}

#tab-officers .rosterHeaderLeft {
  display: flex;
  align-items: center;
  gap: 8px;
}

#tab-officers .rosterIcon {
  color: #2f6bff;
  font-size: 8px;
}

#tab-officers .rosterTitle {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #7aa3ff;
}

#tab-officers .rosterCount {
  font-size: 11px;
  font-weight: 900;
  color: #2f6bff;
  padding: 2px 8px;
  background: rgba(47, 107, 255, 0.15);
  border-radius: 10px;
}

#tab-officers .rosterHeaderRight {
  display: flex;
  align-items: center;
  gap: 6px;
}

#tab-officers .rosterFilter,
#tab-officers .rosterSearch {
  padding: 5px 8px;
  font-size: 9px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  color: var(--text);
  outline: none;
}

#tab-officers .rosterSearch {
  width: 120px;
}

#tab-officers .rosterFilter:focus,
#tab-officers .rosterSearch:focus {
  border-color: rgba(47, 107, 255, 0.4);
}

#tab-officers .rosterRefresh {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.15s ease;
}

#tab-officers .rosterRefresh:hover {
  background: rgba(47, 107, 255, 0.2);
  border-color: rgba(47, 107, 255, 0.4);
  color: #7aa3ff;
}

/* Roster Table */
#tab-officers .rosterTable {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

#tab-officers .rosterTableHeader {
  display: flex;
  padding: 10px 22px;
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

#tab-officers .rCol {
  font-size: 9px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.35);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#tab-officers .rColStatus { width: 90px; }
#tab-officers .rColUnit { width: 75px; }
#tab-officers .rColName { flex: 1; min-width: 140px; }
#tab-officers .rColDept { width: 60px; }
#tab-officers .rColRank { width: 90px; }
#tab-officers .rColCall { width: 50px; }
#tab-officers .rColTime { width: 50px; text-align: right; }

#tab-officers .rosterTableBody {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  padding: 4px 0;
}

/* Roster Empty State */
#tab-officers .rosterEmpty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 40px;
  text-align: center;
}

#tab-officers .emptyIcon {
  font-size: 32px;
  opacity: 0.3;
  margin-bottom: 10px;
}

#tab-officers .emptyText {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 4px;
}

#tab-officers .emptySub {
  font-size: 10px;
  color: var(--muted2);
}

/* Roster Row */
#tab-officers .rosterRow {
  display: flex;
  align-items: center;
  padding: 10px 14px;
  margin: 4px 8px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 6px;
  border: 1px solid transparent;
  transition: all 0.15s ease;
}

#tab-officers .rosterRow.clickable {
  cursor: pointer;
}

#tab-officers .rosterRow:hover {
  background: rgba(47, 107, 255, 0.1);
  border-color: rgba(47, 107, 255, 0.2);
}

.rosterBadge, .frBadge {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 5px;
  border-radius: 3px;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.03em;
  vertical-align: middle;
}

.rosterBadge.fto, .frBadge.fto {
  background: rgba(168, 85, 247, 0.2);
  color: #a855f7;
}

.rosterBadge.cadet, .frBadge.cadet {
  background: rgba(0, 212, 255, 0.2);
  color: #00d4ff;
}

.fullRosterRow.clickable {
  cursor: pointer;
}

#tab-officers .rosterRow .rCol {
  font-size: 11px;
  font-weight: 500;
  color: var(--text);
}

#tab-officers .rosterRow .rColStatus {
  display: flex;
  align-items: center;
  gap: 8px;
}

#tab-officers .rosterRow .statusDot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

#tab-officers .rosterRow .statusDot.available { background: #18c37e; box-shadow: 0 0 8px rgba(24, 195, 126, 0.6); }
#tab-officers .rosterRow .statusDot.busy { background: #ffbf2f; box-shadow: 0 0 8px rgba(255, 191, 47, 0.6); }
#tab-officers .rosterRow .statusDot.enroute { background: #2f6bff; box-shadow: 0 0 8px rgba(47, 107, 255, 0.6); }
#tab-officers .rosterRow .statusDot.onscene { background: #00d4ff; box-shadow: 0 0 8px rgba(0, 212, 255, 0.6); }
#tab-officers .rosterRow .statusDot.break { background: #a855f7; box-shadow: 0 0 8px rgba(168, 85, 247, 0.6); }
#tab-officers .rosterRow .statusDot.code6 { background: #ffbf2f; box-shadow: 0 0 8px rgba(255, 191, 47, 0.6); }
#tab-officers .rosterRow .statusDot.off { background: #ff4d6d; box-shadow: 0 0 8px rgba(255, 77, 109, 0.6); }

#tab-officers .rosterRow .statusLabel {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  opacity: 0.8;
}

#tab-officers .rosterRow .rColUnit {
  font-weight: 700;
  font-size: 12px;
  color: #7aa3ff;
  font-family: var(--mono);
}

#tab-officers .rosterRow .rColName {
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
}

#tab-officers .rosterRow .rColDept {
  font-size: 10px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
}

#tab-officers .rosterRow .rColRank {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.45);
}

#tab-officers .rosterRow .rColCall {
  font-size: 10px;
  font-family: var(--mono);
  color: rgba(255, 255, 255, 0.4);
}

#tab-officers .rosterRow .rColTime {
  font-size: 10px;
  font-family: var(--mono);
  color: rgba(255, 255, 255, 0.35);
  text-align: right;
}

/* Roster Footer Stats */
#tab-officers .rosterFooter {
  display: flex;
  justify-content: center;
  gap: 16px;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.25);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}

#tab-officers .rosterStat {
  display: flex;
  align-items: center;
  gap: 6px;
}

#tab-officers .statDot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

#tab-officers .statDot.available { background: #18c37e; }
#tab-officers .statDot.busy { background: #ffbf2f; }
#tab-officers .statDot.enroute { background: #2f6bff; }
#tab-officers .statDot.onscene { background: #00d4ff; }

#tab-officers .statLabel {
  font-size: 8px;
  color: var(--muted);
  letter-spacing: 0.06em;
}

#tab-officers .statValue {
  font-size: 11px;
  font-weight: 900;
  color: var(--text);
}

#tab-officers .rosterStat.total {
  padding-left: 12px;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}

#tab-officers .rosterStat.total .statLabel {
  color: #7aa3ff;
}

#tab-officers .rosterStat.total .statValue {
  color: #2f6bff;
}

/* ========================================
   CHAT TAB STYLES
   ======================================== */

.chatPanel {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: linear-gradient(180deg, #0a0e17 0%, #0d1220 100%);
}

.chatHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid rgba(74, 158, 255, 0.2);
}

.chatHeaderLeft {
  display: flex;
  align-items: center;
  gap: 10px;
}

.chatIcon {
  font-size: 20px;
}

.chatTitle {
  font-size: 14px;
  font-weight: 600;
  color: #4a9eff;
  letter-spacing: 1px;
}

.chatHeaderRight {
  display: flex;
  align-items: center;
  gap: 12px;
}

.chatChannelSelect {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(74, 158, 255, 0.3);
  color: #fff;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
}

.chatChannelSelect:focus {
  outline: none;
  border-color: #4a9eff;
}

.chatOnline {
  font-size: 11px;
  color: #4ade80;
  background: rgba(74, 222, 128, 0.1);
  padding: 4px 8px;
  border-radius: 4px;
}

.chatMessages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.chatEmpty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.3);
}

.chatEmptyIcon {
  font-size: 48px;
  margin-bottom: 12px;
  opacity: 0.5;
}

.chatEmptyText {
  font-size: 16px;
  margin-bottom: 4px;
}

.chatEmptySub {
  font-size: 12px;
  opacity: 0.7;
}

.chatDateSeparator {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 16px 0 8px;
}

.chatDateSeparator span {
  background: rgba(74, 158, 255, 0.1);
  color: rgba(255, 255, 255, 0.5);
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.chatMessage {
  max-width: 75%;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  border-bottom-left-radius: 4px;
}

.chatMessage.own {
  align-self: flex-end;
  background: rgba(74, 158, 255, 0.15);
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 4px;
}

.chatMsgHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
}

.chatMsgSender {
  font-size: 11px;
  font-weight: 600;
  color: #4a9eff;
}

.chatMessage.own .chatMsgSender {
  color: #7cb3ff;
}

.chatMsgTime {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.4);
}

.chatMsgBody {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.4;
  word-wrap: break-word;
}

.chatInputArea {
  padding: 12px 16px;
  background: rgba(0, 0, 0, 0.3);
  border-top: 1px solid rgba(74, 158, 255, 0.2);
}

.chatInputWrapper {
  display: flex;
  gap: 8px;
}

.chatInput {
  flex: 1;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(74, 158, 255, 0.3);
  color: #fff;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
}

.chatInput:focus {
  outline: none;
  border-color: #4a9eff;
  box-shadow: 0 0 0 2px rgba(74, 158, 255, 0.1);
}

.chatInput::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.chatSendBtn {
  background: linear-gradient(135deg, #4a9eff 0%, #2563eb 100%);
  border: none;
  color: #fff;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.chatSendBtn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(74, 158, 255, 0.3);
}

.chatSendBtn:active {
  transform: translateY(0);
}

.chatInputHint {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.3);
}

/* Chat nav tile */
.menuTile.chat {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.1) 0%, rgba(139, 92, 246, 0.05) 100%);
  border-color: rgba(168, 85, 247, 0.3);
}

.menuTile.chat:hover {
  border-color: rgba(168, 85, 247, 0.6);
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.2) 0%, rgba(139, 92, 246, 0.1) 100%);
}

.menuTile.chat .tileIcon {
  color: #a855f7;
}

/* ========================================
   RANKS MANAGEMENT STYLES
   ======================================== */

.cmdRanksList {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 180px;
  overflow-y: auto;
}

.cmdRanksEmpty {
  color: rgba(255, 255, 255, 0.35);
  font-size: 12px;
  padding: 16px;
  text-align: center;
}

.cmdRankItem {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition: all 0.15s ease;
}

.cmdRankItem:hover {
  background: rgba(74, 158, 255, 0.1);
  border-color: rgba(74, 158, 255, 0.25);
}

.cmdRankOrder {
  min-width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(74, 158, 255, 0.15);
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  color: #7aa3ff;
}

.cmdRankName {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
  color: #fff;
}

.cmdRankBadge {
  padding: 3px 8px;
  background: linear-gradient(180deg, rgba(251, 191, 36, 0.25) 0%, rgba(251, 191, 36, 0.1) 100%);
  border: 1px solid rgba(251, 191, 36, 0.4);
  border-radius: 3px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #fbbf24;
}

.cmdRankDelete {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.3);
  font-size: 16px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.15s ease;
  opacity: 0;
}

.cmdRankItem:hover .cmdRankDelete {
  opacity: 1;
}

.cmdRankDelete:hover {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

.btn.small {
  padding: 6px 12px;
  font-size: 11px;
}

/* Toggle Switch */
.cmdToggle {
  position: relative;
  display: inline-block;
  width: 42px;
  height: 22px;
  cursor: pointer;
  flex-shrink: 0;
}

.cmdToggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.cmdToggleSlider {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 11px;
  transition: all 0.2s ease;
}

.cmdToggleSlider::before {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  left: 2px;
  top: 2px;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  transition: all 0.2s ease;
}

.cmdToggle input:checked + .cmdToggleSlider {
  background: rgba(74, 222, 128, 0.25);
  border-color: rgba(74, 222, 128, 0.5);
}

.cmdToggle input:checked + .cmdToggleSlider::before {
  transform: translateX(20px);
  background: #4ade80;
}

/* Command Toggle (gold) */
#cmd-new-rank-command:checked + .cmdToggleSlider {
  background: rgba(251, 191, 36, 0.25);
  border-color: rgba(251, 191, 36, 0.5);
}

#cmd-new-rank-command:checked + .cmdToggleSlider::before {
  background: #fbbf24;
}

/* Rank Form */
.cmdRankForm {
  margin-top: 10px;
  padding: 12px;
  background: rgba(47, 107, 255, 0.08);
  border: 1px solid rgba(47, 107, 255, 0.2);
  border-radius: 6px;
}

/* ========================================
   CHAT TAB STYLES (Clean Design)
   ======================================== */

.chat-container {
  height: 100%;
  display: grid;
  grid-template-columns: 180px 1fr;
  background: linear-gradient(180deg, rgba(12, 18, 30, 0.98) 0%, rgba(8, 12, 22, 0.98) 100%);
  border-radius: 8px;
  overflow: hidden;
}

/* Sidebar */
.chat-sidebar {
  display: flex;
  flex-direction: column;
  background: rgba(0, 0, 0, 0.2);
  border-right: 1px solid rgba(255, 255, 255, 0.06);
}

.chat-section {
  padding: 14px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.chat-section.flex-1 {
  flex: 1;
  overflow-y: auto;
}

.chat-section-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.35);
  text-transform: uppercase;
}

/* Channels */
.chat-channel-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.chat-channel {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: transparent;
  border: none;
  border-radius: 5px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.12s ease;
  text-align: left;
  width: 100%;
}

.chat-channel:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
}

.chat-channel.active {
  background: rgba(47, 107, 255, 0.15);
  color: #7aa3ff;
}

.chat-channel-hash {
  font-size: 15px;
  font-weight: 600;
  opacity: 0.5;
}

.chat-channel.active .chat-channel-hash {
  opacity: 1;
}

/* DM Add Button */
.chat-dm-add {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
  cursor: pointer;
  transition: all 0.12s ease;
}

.chat-dm-add:hover {
  background: rgba(47, 107, 255, 0.2);
  border-color: rgba(47, 107, 255, 0.4);
  color: #7aa3ff;
}

/* DM List */
.chat-dm-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.chat-dm-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.12s ease;
}

.chat-dm-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

.chat-dm-item.active {
  background: rgba(47, 107, 255, 0.15);
}

.chat-dm-avatar {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(47, 107, 255, 0.2);
  border-radius: 50%;
  font-size: 10px;
  font-weight: 600;
  color: #7aa3ff;
}

.chat-dm-name {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
}

/* Online Badge */
.chat-online-badge {
  padding: 2px 7px;
  background: rgba(74, 222, 128, 0.15);
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
  color: #4ade80;
}

/* Online List */
.chat-online-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.chat-online-user {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 6px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.12s ease;
}

.chat-online-user:hover {
  background: rgba(255, 255, 255, 0.05);
}

.chat-online-dot {
  width: 6px;
  height: 6px;
  background: #4ade80;
  border-radius: 50%;
}

.chat-online-name {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.7);
}

.chat-empty-hint {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.3);
  padding: 8px 4px;
}

/* Main Area */
.chat-main {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Header */
.chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.chat-header-info {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.chat-header-title {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
}

.chat-header-desc {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.35);
}

.chat-header-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #4ade80;
}

.chat-status-dot {
  width: 6px;
  height: 6px;
  background: #4ade80;
  border-radius: 50%;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Messages */
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.chat-empty-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: rgba(255, 255, 255, 0.25);
}

.chat-empty-icon {
  width: 48px;
  height: 48px;
  opacity: 0.4;
}

.chat-empty-icon svg {
  width: 100%;
  height: 100%;
}

.chat-empty-title {
  font-size: 14px;
  font-weight: 500;
}

.chat-empty-sub {
  font-size: 12px;
  opacity: 0.7;
}

/* Date Separator */
.chat-date-sep {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 0;
}

.chat-date-sep span {
  padding: 4px 14px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  font-size: 10px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.4);
}

/* Message */
.chat-msg {
  display: flex;
  gap: 10px;
  max-width: 70%;
}

.chat-msg.own {
  flex-direction: row-reverse;
  align-self: flex-end;
}

.chat-msg-avatar {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(47, 107, 255, 0.2);
  border-radius: 50%;
  font-size: 12px;
  font-weight: 600;
  color: #7aa3ff;
}

.chat-msg.own .chat-msg-avatar {
  background: rgba(74, 222, 128, 0.2);
  color: #4ade80;
}

.chat-msg-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.chat-msg-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.chat-msg.own .chat-msg-header {
  flex-direction: row-reverse;
}

.chat-msg-name {
  font-size: 11px;
  font-weight: 600;
  color: #7aa3ff;
}

.chat-msg.own .chat-msg-name {
  color: #4ade80;
}

.chat-msg-time {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.3);
}

.chat-msg-text {
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 4px 14px 14px 14px;
  font-size: 13px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.9);
}

.chat-msg.own .chat-msg-text {
  background: rgba(47, 107, 255, 0.15);
  border-radius: 14px 4px 14px 14px;
}

/* Input Area */
.chat-input-area {
  display: flex;
  gap: 10px;
  padding: 14px 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.chat-input {
  flex: 1;
  padding: 12px 16px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  color: #fff;
  font-size: 13px;
  transition: all 0.15s ease;
}

.chat-input:focus {
  outline: none;
  border-color: rgba(47, 107, 255, 0.4);
  background: rgba(0, 0, 0, 0.4);
}

.chat-input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.chat-send-btn {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  border: none;
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  transition: all 0.15s ease;
}

.chat-send-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 15px rgba(37, 99, 235, 0.4);
}

.chat-send-btn svg {
  width: 18px;
  height: 18px;
}

/* Modal */
.chat-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.75);
  z-index: 1000;
  backdrop-filter: blur(4px);
}

.chat-modal.hidden {
  display: none;
}

.chat-modal-box {
  width: 320px;
  background: linear-gradient(180deg, rgba(18, 26, 40, 0.98) 0%, rgba(12, 18, 28, 0.98) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  overflow: hidden;
}

.chat-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 14px;
  font-weight: 600;
  color: #fff;
}

.chat-modal-close {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  font-size: 20px;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.12s ease;
}

.chat-modal-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.chat-modal-body {
  padding: 14px;
  max-height: 350px;
  overflow-y: auto;
}

.chat-modal-body .chat-input {
  width: 100%;
  margin-bottom: 12px;
}

.chat-modal-user {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.12s ease;
}

.chat-modal-user:hover {
  background: rgba(47, 107, 255, 0.1);
}

.chat-modal-avatar {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(47, 107, 255, 0.2);
  border-radius: 50%;
  font-size: 13px;
  font-weight: 600;
  color: #7aa3ff;
}

.chat-modal-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.chat-modal-name {
  font-size: 13px;
  font-weight: 500;
  color: #fff;
}

.chat-modal-dept {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
}

/* Footer removed - cleaner without it */
#tab-chat .mdt-footer {
  display: none;
}

/* Old styles cleanup - keeping for backwards compatibility */
.comms-input-area {
  display: flex;
  gap: 10px;
  padding: 12px 16px;
  background: rgba(0, 0, 0, 0.25);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.comms-input {
  flex: 1;
  padding: 10px 14px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(47, 107, 255, 0.25);
  border-radius: 6px;
  font-size: 13px;
  color: var(--text);
  transition: all 0.15s ease;
}

.comms-input:focus {
  outline: none;
  border-color: rgba(47, 107, 255, 0.5);
  box-shadow: 0 0 0 2px rgba(47, 107, 255, 0.15);
}

.comms-input::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

.comms-send-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(47, 107, 255, 0.4) 0%, rgba(47, 107, 255, 0.25) 100%);
  border: 1px solid rgba(47, 107, 255, 0.5);
  border-radius: 6px;
  color: #7aa3ff;
  cursor: pointer;
  transition: all 0.15s ease;
}

.comms-send-btn:hover {
  background: linear-gradient(180deg, rgba(47, 107, 255, 0.55) 0%, rgba(47, 107, 255, 0.35) 100%);
  border-color: #2f6bff;
  box-shadow: 0 0 12px rgba(47, 107, 255, 0.3);
}

.comms-send-btn svg {
  width: 18px;
  height: 18px;
}

/* Footer */
#tab-chat .mdt-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 16px;
  background: rgba(0, 0, 0, 0.2);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

#tab-chat .mdt-footer-left {
  display: flex;
  gap: 16px;
}

#tab-chat .mdt-key-hint {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.35);
  font-family: var(--mono);
}

#tab-chat .mdt-timestamp {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  font-family: var(--mono);
}

/* DM Modal */
.comms-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.7);
  z-index: 1000;
  backdrop-filter: blur(4px);
}

.comms-modal.hidden {
  display: none;
}

.comms-modal-content {
  width: 380px;
  max-height: 500px;
  background: linear-gradient(180deg, rgba(14, 26, 43, 0.98) 0%, rgba(11, 18, 32, 0.98) 100%);
  border: 1px solid rgba(47, 107, 255, 0.3);
  border-radius: 8px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.comms-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  background: linear-gradient(180deg, rgba(47, 107, 255, 0.15) 0%, transparent 100%);
  border-bottom: 1px solid rgba(47, 107, 255, 0.2);
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

.comms-modal-close {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  font-size: 18px;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.15s ease;
}

.comms-modal-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text);
}

.comms-modal-body {
  padding: 16px;
  max-height: 400px;
  overflow-y: auto;
}

.comms-modal-body .comms-input {
  width: 100%;
  margin-bottom: 12px;
}

.comms-dm-officer-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.comms-dm-officer-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.comms-dm-officer-item:hover {
  background: rgba(47, 107, 255, 0.1);
  border-color: rgba(47, 107, 255, 0.25);
}

.comms-dm-officer-avatar {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(47, 107, 255, 0.4) 0%, rgba(47, 107, 255, 0.2) 100%);
  border: 1px solid rgba(47, 107, 255, 0.4);
  border-radius: 50%;
  font-size: 13px;
  font-weight: 700;
  color: #7aa3ff;
}

.comms-dm-officer-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.comms-dm-officer-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.comms-dm-officer-dept {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.45);
}

/* FTO Selector Modal */
.ftoSelectorModal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

.ftoSelectorContent {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  min-width: 300px;
  max-width: 400px;
  max-height: 400px;
  display: flex;
  flex-direction: column;
}

.ftoSelectorHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  color: var(--text);
}

.ftoSelectorClose {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 20px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

.ftoSelectorClose:hover {
  color: var(--text);
}

.ftoSelectorList {
  overflow-y: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ftoSelectorItem {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.ftoSelectorItem:hover {
  background: rgba(47, 107, 255, 0.15);
  border-color: rgba(47, 107, 255, 0.3);
}

.ftoSelectorItem .ftoCallsign {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  color: #4a9eff;
  min-width: 60px;
}

.ftoSelectorItem .ftoName {
  flex: 1;
  font-size: 13px;
  color: var(--text);
}

.ftoSelectorItem .ftoDept {
  font-size: 11px;
  color: var(--muted);
  padding: 2px 6px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
}

/* Inline FTO action button */
.profileNameRow {
  display: flex;
  align-items: center;
}

.profileNameRow .profileFtoActions {
  margin-left: auto;
}

.ftoActionBtnSmall {
  padding: 4px 10px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  background: rgba(47, 107, 255, 0.2);
  border: 1px solid rgba(47, 107, 255, 0.4);
  border-radius: 4px;
  color: #7aa3ff;
  cursor: pointer;
  transition: all 0.15s ease;
}

.ftoActionBtnSmall:hover {
  background: rgba(47, 107, 255, 0.3);
  border-color: rgba(47, 107, 255, 0.6);
}

.ftoActionBtnSmall.unlink {
  background: rgba(255, 82, 82, 0.15);
  border-color: rgba(255, 82, 82, 0.3);
  color: #ff6b6b;
}

.ftoActionBtnSmall.unlink:hover {
  background: rgba(255, 82, 82, 0.25);
  border-color: rgba(255, 82, 82, 0.5);
}

/* Roster Assign Button */
.rosterAssignBtn {
  margin-left: 8px;
  padding: 2px 8px;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  background: rgba(47, 107, 255, 0.2);
  border: 1px solid rgba(47, 107, 255, 0.4);
  border-radius: 3px;
  color: #7aa3ff;
  cursor: pointer;
  transition: all 0.15s ease;
}

.rosterAssignBtn:hover {
  background: rgba(47, 107, 255, 0.35);
  border-color: rgba(47, 107, 255, 0.6);
}

/* Cadet badge with assigned FTO */
.rosterBadge.cadet {
  background: rgba(255, 193, 7, 0.15);
  color: #ffc107;
  border-color: rgba(255, 193, 7, 0.3);
}

/* Name badges in roster (next to officer name) */
.nameBadge {
  margin-left: 10px;
  padding: 3px 8px;
  font-size: 9px;
  font-weight: 600;
  border-radius: 4px;
  vertical-align: middle;
  letter-spacing: 0.02em;
}

.nameBadge.fto {
  background: rgba(255, 152, 0, 0.15);
  color: #ffb74d;
  border: 1px solid rgba(255, 152, 0, 0.3);
}

.nameBadge.cadet {
  background: rgba(156, 39, 176, 0.15);
  color: #ce93d8;
  border: 1px solid rgba(156, 39, 176, 0.4);
}

/* =====================
   STATS DASHBOARD
   ===================== */
.statsGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  padding: 16px;
}

.statCard {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  transition: all 0.2s ease;
}

.statCard:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(47, 107, 255, 0.2);
}

.statCardIcon {
  font-size: 28px;
  opacity: 0.7;
}

.statCardIcon.green { color: #18c37e; }
.statCardIcon.blue { color: #2f6bff; }
.statCardIcon.yellow { color: #ffbf2f; }
.statCardIcon.purple { color: #a855f7; }
.statCardIcon.red { color: #ff4d6d; }

.statCardInfo {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.statCardValue {
  font-size: 26px;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
}

.statCardLabel {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.statsSection {
  padding: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.statsSectionHeader {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 12px;
}

.statsBarChart {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.statsBarItem {
  display: flex;
  align-items: center;
  gap: 12px;
}

.statsBarLabel {
  width: 120px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.statsBarTrack {
  flex: 1;
  height: 20px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
  overflow: hidden;
}

.statsBarFill {
  height: 100%;
  background: linear-gradient(90deg, #2f6bff 0%, #7aa3ff 100%);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 8px;
  min-width: 30px;
}

.statsBarValue {
  font-size: 11px;
  font-weight: 600;
  color: white;
}

.statsTable {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.statsTableRow {
  display: flex;
  align-items: center;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 6px;
  gap: 16px;
}

.statsTableRow:hover {
  background: rgba(255, 255, 255, 0.04);
}

.statsTableRank {
  width: 30px;
  font-size: 14px;
  font-weight: 700;
  color: #7aa3ff;
}

.statsTableName {
  flex: 1;
  font-size: 13px;
  color: var(--text);
}

.statsTableCallsign {
  font-size: 11px;
  font-family: var(--mono);
  color: rgba(255, 255, 255, 0.5);
}

.statsTableValue {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
}

/* =====================
   ANNOUNCEMENTS
   ===================== */
.announcementsList {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  max-height: 500px;
  overflow-y: auto;
}

.announcementCard {
  padding: 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  border-left: 4px solid #2f6bff;
}

.announcementCard.priority-high {
  border-left-color: #ffbf2f;
}

.announcementCard.priority-urgent {
  border-left-color: #ff4d6d;
  background: rgba(255, 77, 109, 0.05);
}

.announcementCard.pinned {
  background: rgba(47, 107, 255, 0.05);
  border-color: rgba(47, 107, 255, 0.15);
}

.announcementHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 8px;
}

.announcementTitle {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
}

.announcementPinIcon {
  color: #ffbf2f;
  font-size: 12px;
}

.announcementActions {
  display: flex;
  gap: 6px;
}

.announcementActions button {
  padding: 4px 8px;
  font-size: 10px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
}

.announcementActions button:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
}

.announcementActions button.delete:hover {
  background: rgba(255, 77, 109, 0.1);
  border-color: rgba(255, 77, 109, 0.3);
  color: #ff6b6b;
}

.announcementContent {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.5;
  white-space: pre-wrap;
}

.announcementMeta {
  display: flex;
  gap: 16px;
  margin-top: 12px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
}

.announcementBadge {
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
}

.announcementBadge.urgent {
  background: rgba(255, 77, 109, 0.2);
  color: #ff6b6b;
}

.announcementBadge.high {
  background: rgba(255, 191, 47, 0.2);
  color: #ffbf2f;
}

/* =====================
   AUDIT LOGS
   ===================== */
.auditLogsTable {
  max-height: 450px;
  overflow-y: auto;
}

.auditLogsTable .cmdTable {
  font-size: 12px;
}

.auditLogsTable .cmdTable td {
  padding: 10px 12px;
  vertical-align: top;
}

.auditCategory {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
}

.auditCategory.auth { background: rgba(168, 85, 247, 0.2); color: #a855f7; }
.auditCategory.officer { background: rgba(47, 107, 255, 0.2); color: #7aa3ff; }
.auditCategory.civilian { background: rgba(24, 195, 126, 0.2); color: #18c37e; }
.auditCategory.vehicle { background: rgba(255, 191, 47, 0.2); color: #ffbf2f; }
.auditCategory.call { background: rgba(0, 212, 255, 0.2); color: #00d4ff; }
.auditCategory.report { background: rgba(255, 152, 0, 0.2); color: #ff9800; }
.auditCategory.admin { background: rgba(255, 77, 109, 0.2); color: #ff6b6b; }
.auditCategory.system { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.6); }

.auditDetails {
  max-width: 300px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
  word-break: break-word;
}

.auditPagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.auditPagination button {
  padding: 6px 12px;
  font-size: 11px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
}

.auditPagination button:hover:not(:disabled) {
  background: rgba(47, 107, 255, 0.15);
  border-color: rgba(47, 107, 255, 0.3);
}

.auditPagination button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.auditPagination .pageInfo {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  padding: 0 12px;
}

/* Form improvements */
.cmdFormRow {
  display: flex;
  gap: 16px;
}

.cmdFormRow .cmdFormGroup {
  flex: 1;
}