/* ==============================================================
   des/des.css - the DES back-end look (dark "operator" style)

   Used only by the pages in des/. The public site uses style.css.

   CONTENTS
     1. SETTINGS ......... colors and fonts. Change these first.
     2. BASE
     3. LOGIN AND SETUP PAGES (the centered card)
     4. FORMS AND BUTTONS
     5. BACK-END SHELL (top bar, side menu, main area)
     6. DASHBOARD
     7. SMALL SCREENS
     8. LISTS, TABLES AND ADMIN PAGES (phase 2)
     10. CRIMINAL DATABASE AND WANTED LIST (phase 3)
     11. CAD (phase 4)
     12. OIA AND OFI CASES (phase 5)
     13. POSTS, DES NEWS AND RECRUITMENT (phase 6)
     14. SYNAPSE GRID BACKGROUND (login page)
     9. TEMPORARY preview banner (remove with preview.js)
   ============================================================== */


/* ---------- 1. SETTINGS ---------- */
:root {
  --bg:        #0b0c0e;    /* page background */
  --panel:     #111317;    /* cards and bars */
  --panel-2:   #0e1013;    /* side menu */
  --line:      #1f2328;    /* borders */
  --line-2:    #2a2f36;    /* input borders */
  --text:      #e6e9ec;
  --dim:       #9aa3ad;    /* quieter text */
  --faint:     #6f7883;    /* quietest text */
  --lime:      #bed215;    /* accent, from the flag */
  --blue:      #3f95ce;
  --green:     #5db54a;
  --amber:     #e8a33d;
  --red:       #ff8f86;
  --sans:      "IBM Plex Sans", system-ui, sans-serif;
  --mono:      "IBM Plex Mono", ui-monospace, monospace;
}


/* ---------- 2. BASE ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 15px; line-height: 1.5; }
a { color: var(--lime); }
a:hover { color: #d6ea4a; }
:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.mono { font-family: var(--mono); }
.label { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); font-weight: 600; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }


/* ---------- 3. LOGIN AND SETUP PAGES ---------- */
.auth-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 32px 16px;
}

.auth-brand { display: flex; align-items: center; gap: 12px; color: var(--text); text-decoration: none; }
.auth-brand img { width: 44px; height: 44px; }
.auth-brand strong { display: block; letter-spacing: .04em; }

.auth-card {
  width: 100%;
  max-width: 420px;
  padding: 28px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-top: 3px solid var(--lime);
  border-radius: 8px;
}
.auth-card h1 { margin: 0 0 4px; font-size: 22px; }
.auth-card > p { margin: 0 0 20px; color: var(--dim); }
.auth-links { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; font-size: 14px; }
.auth-foot { max-width: 420px; color: var(--faint); font-size: 13px; text-align: center; }


/* ---------- 4. FORMS AND BUTTONS ---------- */
.form { display: flex; flex-direction: column; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 13px; font-weight: 600; }
.field input {
  height: 44px;
  padding: 0 12px;
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-radius: 6px;
  color: var(--text);
  font: 500 15px var(--sans);
}
.field input.mono { font-family: var(--mono); }
.field input:focus { outline: 2px solid var(--lime); outline-offset: 0; border-color: transparent; }
.field input[readonly] { color: var(--dim); }
.field-hint { font-size: 12.5px; color: var(--dim); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 18px;
  border: 1px solid var(--line-2);
  border-radius: 6px;
  background: #14171a;
  color: var(--text);
  font: 600 14px var(--sans);
  text-decoration: none;
  cursor: pointer;
}
.btn:hover { border-color: var(--dim); color: var(--text); }
.btn-primary { background: var(--lime); border-color: var(--lime); color: #111214; }
.btn-primary:hover { background: #d3e63a; color: #111214; }
.btn-discord { background: #5865f2; border-color: #5865f2; color: #ffffff; }
.btn-discord:hover { background: #4752c4; color: #ffffff; }
.btn-discord::before { content: ""; width: 20px; height: 20px; background: url("../images/Discordthingy.png") center / contain no-repeat; }
.btn:disabled { opacity: .6; cursor: wait; }

.message { min-height: 1.5em; margin: 0; font-size: 14px; }
.message-error { color: var(--red); }
.message-ok { color: var(--green); }


/* ---------- 5. BACK-END SHELL ---------- */
.shell { min-height: 100vh; display: flex; flex-direction: column; }

.topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  padding: 10px 20px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}
.topbar-brand { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; }
.topbar-brand img { width: 34px; height: 34px; }
.topbar-brand strong { letter-spacing: .04em; }
.topbar-brand strong span { color: var(--dim); font-weight: 500; }
.topbar-right { display: flex; align-items: center; gap: 18px; margin-left: auto; flex-wrap: wrap; }
.clock { font-family: var(--mono); font-size: 18px; font-weight: 600; letter-spacing: .04em; }
.who { display: flex; align-items: center; gap: 10px; }
.who-badge { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #1d3a52; color: #8fd0f0; font-weight: 700; font-size: 13px; }
.who-name { font-weight: 600; line-height: 1.25; }
.who-sub { font-size: 12px; color: var(--dim); }

.body { flex: 1; display: flex; flex-wrap: wrap; }

.sidenav {                               /* the side menu, built by des.js from the member's roles */
  flex: 1 1 240px;
  max-width: 260px;
  padding: 16px 12px;
  background: var(--panel-2);
  border-right: 1px solid var(--line);
}
.sidenav h2 { margin: 18px 10px 6px; }
.sidenav h2:first-child { margin-top: 4px; }
.sidenav ul { list-style: none; margin: 0; padding: 0; }
.sidenav a, .sidenav .soon {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 40px;
  padding: 8px 10px;
  border-radius: 6px;
  color: #c3c9d1;
  text-decoration: none;
  font-size: 14px;
}
.sidenav a:hover { background: #151820; color: var(--text); }
.sidenav a.current { background: #1c2410; color: var(--lime); font-weight: 600; }
.sidenav .soon { color: var(--faint); }
.soon-tag { font-family: var(--mono); font-size: 10.5px; color: var(--faint); border: 1px solid var(--line-2); border-radius: 4px; padding: 1px 5px; white-space: nowrap; }

.main { flex: 999 1 560px; min-width: 0; padding: 22px 24px 40px; display: flex; flex-direction: column; gap: 18px; }
.main h1 { margin: 0; font-size: 26px; }

.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; }
.panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.panel-head h2 { margin: 0; font-size: 15px; }
.panel-body { padding: 16px; }

.statusbar {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 6px 20px;
  background: var(--panel);
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--dim);
}


/* ---------- 6. DASHBOARD ---------- */
.dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; align-items: start; }

.kv { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 8px 14px; margin: 0; font-size: 14px; }
.kv dt { color: var(--dim); }
.kv dd { margin: 0; font-family: var(--mono); }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { padding: 3px 9px; border-radius: 4px; background: #1b1f25; color: #c3c9d1; font-size: 12px; font-weight: 600; }
.chip-lime { background: #1c2410; color: var(--lime); }

.access-section { scroll-margin-top: 16px; }
.access-list { list-style: none; margin: 0; padding: 0; }
.access-list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 16px; border-bottom: 1px solid #181b20; }
.access-list li:last-child { border-bottom: 0; }
.access-none { color: var(--faint); }


/* ---------- 7. SMALL SCREENS ---------- */
@media (max-width: 640px) {
  .sidenav { max-width: none; border-right: 0; border-bottom: 1px solid var(--line); }
  .main { padding: 18px 16px 32px; }
  .topbar-right { margin-left: 0; }
}


/* ---------- 8. LISTS, TABLES AND ADMIN PAGES (phase 2) ---------- */
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
.back-link { font-size: 14px; text-decoration: none; }
.dim { color: var(--dim); }
.warn { color: var(--red); font-weight: 600; }
.stack { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.button-row { display: flex; flex-wrap: wrap; gap: 8px; }
.panel-note { margin: 0; padding: 0 16px 14px; }

/* Filters above a list */
.toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.tool { display: flex; flex-direction: column; gap: 4px; flex: 1 1 160px; max-width: 240px; }
.tool:first-child { flex: 2 1 220px; max-width: 320px; }
.tool input, .tool select, .field select, .field textarea {
  height: 40px;
  padding: 0 10px;
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-radius: 6px;
  color: var(--text);
  font: 500 14px var(--sans);
}
.field select { height: 44px; }
.field textarea { height: auto; padding: 10px 12px; resize: vertical; }
.tool input:focus, .tool select:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--lime); outline-offset: 0; border-color: transparent; }

/* Data tables (Personnel, Former Personnel, audit log) */
.table-scroll { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.data-table th {
  padding: 10px 14px;
  background: #151820;
  border-bottom: 1px solid var(--line);
  color: var(--dim);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}
.data-table td { padding: 10px 14px; border-bottom: 1px solid #181b20; white-space: nowrap; vertical-align: top; }
.data-table td.wrap { white-space: normal; min-width: 200px; }
.data-table tbody tr:hover { background: #14171b; }
.data-table .chip { margin-right: 4px; }
.row-link { font-weight: 600; text-decoration: none; }
.row-link:hover { text-decoration: underline; }
.table-empty { padding: 28px 14px !important; color: var(--faint); text-align: center; white-space: normal !important; }
.table-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; }

.pager { display: flex; flex-wrap: wrap; gap: 4px; }
.pager-btn { min-width: 36px; height: 36px; border: 1px solid var(--line-2); border-radius: 6px; background: transparent; color: var(--text); font: 600 13px var(--mono); cursor: pointer; }
.pager-btn.current { background: var(--lime); border-color: var(--lime); color: #111214; }

/* Status chips */
.chip-green { background: #13240f; color: var(--green); }
.chip-amber { background: #2b2110; color: #f2b85b; }
.chip-red { background: #2a1514; color: var(--red); }

/* Role checkboxes */
.role-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px 14px; margin: 0; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: 6px; }
.role-picker legend { padding: 0 6px; font-size: 13px; font-weight: 600; }
.check { display: flex; align-items: center; gap: 8px; min-height: 32px; font-size: 14px; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--lime); }

/* Dangerous buttons, and the "click again" state */
.btn-danger { border-color: #5a2622; color: var(--red); background: #1a0f0e; }
.btn-danger:hover { border-color: var(--red); color: var(--red); }
.btn-armed { background: #b23b3b; border-color: #b23b3b; color: #ffffff; }
.btn-armed:hover { color: #ffffff; }


/* ---------- 10. CRIMINAL DATABASE AND WANTED LIST (phase 3) ---------- */
.flash:empty { display: none; }
a.subject-row { color: var(--text); text-decoration: none; }
a.subject-row:hover { background: #14171b; }
a.subject-row:hover .subject-row-name { text-decoration: underline; }
.subject-row-name { color: var(--lime); }
.rp-note { margin: 0; padding: 8px 12px; border: 1px dashed var(--line-2); border-radius: 6px; color: var(--dim); font-size: 13px; }

/* Avatars (Roblox headshots) */
.subject-av {
  flex: none;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 6px;
  background: #1b1f25;
  color: var(--dim);
  font-weight: 700;
}
.subject-av img { width: 100%; height: 100%; object-fit: cover; }

/* Search results list */
.subject-list { list-style: none; margin: 0; padding: 0; }
.subject-row { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-bottom: 1px solid #181b20; }
.subject-row:last-child { border-bottom: 0; }
.subject-row-text { flex: 1; min-width: 0; }
.subject-row-name { font-weight: 600; text-decoration: none; }
.subject-row-tags { display: flex; flex-wrap: wrap; gap: 6px; }

/* A subject's page */
.subject-head { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.subject-head-av { width: 96px; height: 96px; display: grid; place-items: center; overflow: hidden; border-radius: 8px; background: #1b1f25; color: var(--dim); font-size: 28px; font-weight: 700; }
.subject-head-av img { width: 100%; height: 100%; object-fit: cover; }
.subject-head p { margin: 2px 0 0; }
.subject-notes { margin: 4px 0 12px; white-space: pre-line; }

.form-inset { margin-bottom: 16px; padding: 14px; border: 1px solid var(--line-2); border-radius: 6px; background: var(--bg); }
.edit-details { margin-top: 14px; }
.edit-details summary { cursor: pointer; color: var(--lime); font-weight: 600; font-size: 14px; }
.edit-details[open] summary { margin-bottom: 10px; }
.summary-small { font-size: 12.5px !important; font-weight: 500 !important; color: var(--dim) !important; }

/* Records and warrants */
.rec-card { padding: 12px 14px; margin-bottom: 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); }
.rec-card:last-child { margin-bottom: 0; }
.rec-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rec-num { font-weight: 600; }
.rec-summary { margin: 8px 0 0; white-space: pre-line; }
.rec-meta { margin: 8px 0 0; color: var(--faint); font-size: 12.5px; }
.rec-card .button-row { margin-top: 10px; }
.charge-list { margin: 8px 0 0; padding-left: 18px; font-family: var(--mono); font-size: 13px; color: #c3c9d1; }
.warrant-active { border-color: #5a2622; }
.warrant-served, .warrant-recalled { opacity: .7; }

.danger-low { background: #13240f; color: var(--green); }
.danger-medium { background: #2b2110; color: #f2b85b; }
.danger-high { background: #2a1514; color: var(--red); }
.kind-arrest { background: #2a1514; color: var(--red); }
.kind-citation { background: #2b2110; color: #f2b85b; }
.kind-warning { background: #172636; color: #8fd0f0; }
.kind-note { background: #1b1f25; color: #c3c9d1; }

.btn-small { height: 34px; padding: 0 12px; font-size: 13px; }

/* Wanted List cards */
.wanted-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.wanted-card { padding: 16px; display: flex; flex-direction: column; gap: 4px; }
.wanted-card .button-row { margin-top: 10px; }
.wanted-top { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }


/* ---------- 11. CAD (phase 4) ---------- */
/* Colors for call priority and unit status. Change these to restyle the CAD. */
:root {
  --p1: #ff6b61;        /* P1 Emergency */
  --p2: #e8a33d;        /* P2 Urgent */
  --p3: #3f95ce;        /* P3 Routine */
  --p4: #6f7883;        /* P4 Low */
  --u-available: #5db54a;
  --u-enroute:   #e8a33d;
  --u-onscene:   #3f95ce;
  --u-busy:      #b08cf0;
  --u-oos:       #6f7883;
}

.cad-head-right { align-items: center; }
.cad-live { display: inline-flex; align-items: center; gap: 8px; font: 500 12px var(--mono); color: var(--dim); }
.cad-live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px #13240f; }
.cad-live-bad { color: var(--red); }
.cad-live-bad::before { background: var(--red); box-shadow: 0 0 0 3px #2a1514; }
.link-btn { padding: 0; border: 0; background: none; color: var(--lime); font: inherit; text-align: left; cursor: pointer; }
.link-btn:hover { text-decoration: underline; }

/* Your unit bar */
.cad-me { border-left: 3px solid var(--lime); }
.cad-me-body { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; padding: 12px 16px; }
.cad-me-title { font-weight: 600; }
.cad-me-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.cad-me-form .tool { flex: 0 1 180px; }
.cad-me-who { display: flex; align-items: center; gap: 10px; }
.cad-callsign { font: 700 20px var(--mono); letter-spacing: .04em; }
.cad-me-call { flex: 1 1 200px; min-width: 0; font-size: 14px; }
.cad-status-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.status-btn.is-current { color: #111214; }
.status-btn-available.is-current { background: var(--u-available); border-color: var(--u-available); }
.status-btn-enroute.is-current { background: var(--u-enroute); border-color: var(--u-enroute); }
.status-btn-onscene.is-current { background: var(--u-onscene); border-color: var(--u-onscene); color: #ffffff; }
.status-btn-busy.is-current { background: var(--u-busy); border-color: var(--u-busy); }
.status-btn-oos.is-current { background: var(--u-oos); border-color: var(--u-oos); color: #ffffff; }
.btn.btn-small:disabled { cursor: not-allowed; opacity: .4; }

/* The three parts: queue | call | units (stacks on smaller screens) */
.cad-grid { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); grid-template-areas: "call" "queue" "units"; align-items: start; }
.cad-queue { grid-area: queue; }
.cad-call { grid-area: call; }
.cad-units { grid-area: units; }
@media (min-width: 1000px) {
  .cad-grid { grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "queue call" "units call"; }
}
@media (min-width: 1500px) {
  .cad-grid { grid-template-columns: minmax(280px, 340px) minmax(0, 1fr) minmax(260px, 320px); grid-template-rows: auto; grid-template-areas: "queue call units"; }
}
@media (max-width: 999px) { .cad-call.is-empty { display: none; } }   /* phones: the queue comes first until a call is picked */
.cad-empty { margin: 0; padding: 22px 16px; text-align: center; }

/* Priority and status labels */
.prio { padding: 2px 7px; border-radius: 4px; font: 700 12px var(--mono); color: #111214; }
.prio-1 { background: var(--p1); }
.prio-2 { background: var(--p2); }
.prio-3 { background: var(--p3); color: #ffffff; }
.prio-4 { background: var(--p4); color: #ffffff; }
.unit-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.unit-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.unit-available { color: var(--u-available); }
.unit-enroute { color: var(--u-enroute); }
.unit-onscene { color: var(--u-onscene); }
.unit-busy { color: var(--u-busy); }
.unit-oos { color: var(--u-oos); }
.unit-tag { padding: 1px 6px; border: 1px solid currentColor; border-radius: 4px; font: 600 11.5px var(--mono); }

/* Call queue */
.cad-list { list-style: none; margin: 0; padding: 0; }
.cad-row {
  display: block;
  width: 100%;
  padding: 10px 14px 10px 12px;
  border: 0;
  border-left: 4px solid transparent;
  border-bottom: 1px solid #181b20;
  background: none;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.cad-row:hover { background: #14171b; }
.cad-row.cad-p1 { border-left-color: var(--p1); }
.cad-row.cad-p2 { border-left-color: var(--p2); }
.cad-row.cad-p3 { border-left-color: var(--p3); }
.cad-row.cad-p4 { border-left-color: var(--p4); }
.cad-row.is-selected { background: #1c2410; }
.cad-row.is-closed { border-left-color: var(--line-2); opacity: .75; }
.cad-row.is-new { animation: cad-new 1.2s ease-in-out 4; }
@keyframes cad-new { 50% { background: #2a1d10; } }
@media (prefers-reduced-motion: reduce) { .cad-row.is-new { animation: none; background: #2a1d10; } }
.cad-row-top { display: flex; align-items: center; gap: 8px; }
.cad-num { font-size: 12.5px; color: var(--dim); }
.cad-age { margin-left: auto; font-size: 12px; }
.cad-row-type { margin-top: 4px; font-weight: 600; }
.cad-row-loc { font-size: 13.5px; color: #c3c9d1; }
.cad-row-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; font-size: 12.5px; }
.cad-recent summary { padding: 10px 14px; color: var(--dim); font-size: 13px; cursor: pointer; }

/* The selected call */
.cad-info { padding: 16px 16px 4px; }
.cad-info-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cad-type { margin: 10px 0 2px; font-size: 22px; }
.cad-loc { margin: 0 0 12px; font-size: 16px; color: #c3c9d1; }
.cad-desc { margin: 12px 0 0; padding: 10px 12px; border-left: 3px solid var(--line-2); background: var(--bg); white-space: pre-line; }
.cad-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 16px; }
.cad-edit { margin: 0 16px 12px; padding: 14px; border: 1px solid var(--line-2); border-radius: 6px; background: var(--bg); }
.cad-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.cad-close-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.cad-close-form .tool { flex: 1 1 240px; max-width: none; }
.cad-section-head { margin: 0; padding: 10px 16px 8px; border-top: 1px solid var(--line); }
.cad-section { padding: 0 16px 14px; }
.cad-none { margin: 0; font-size: 14px; }
.cad-unit-list, .cad-subjects, .cad-link-results { list-style: none; margin: 0; padding: 0; }
.cad-unit-list li, .cad-subjects li, .cad-link-results li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 7px 0; border-bottom: 1px solid #181b20; font-size: 14px; }
.cad-unit-list li:last-child, .cad-subjects li:last-child, .cad-link-results li:last-child { border-bottom: 0; }
.cad-unit-list .btn, .cad-subjects .btn, .cad-link-results .btn { margin-left: auto; }
.cad-subjects li.has-warrant { padding-left: 10px; border-left: 3px solid var(--p1); }
.cad-callsign-sm { font-weight: 700; }
.cad-assign, .cad-link-form { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.cad-assign select, .cad-link-form input, .cad-board-tools select {
  flex: 1 1 200px;
  height: 34px;
  padding: 0 8px;
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-radius: 6px;
  color: var(--text);
  font: 500 13.5px var(--sans);
}
.cad-link { margin-top: 4px; }

/* Call log */
.cad-log { list-style: none; max-height: 360px; overflow-y: auto; margin: 0 16px; padding: 4px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); font-size: 13.5px; }
.cad-log li { display: grid; grid-template-columns: 66px minmax(0, 1fr); gap: 0 10px; padding: 6px 0; border-bottom: 1px solid #15181c; }
.cad-log li:last-child { border-bottom: 0; }
.log-time { grid-row: span 2; color: var(--faint); font-size: 12px; padding-top: 1px; }
.log-who { color: var(--dim); font-size: 12px; font-weight: 600; }
.log-text { white-space: pre-line; overflow-wrap: anywhere; }
.log-system .log-text, .log-status .log-text { color: #c3c9d1; font-family: var(--mono); font-size: 12.5px; }
.log-assign .log-text { color: #8fd0f0; font-family: var(--mono); font-size: 12.5px; }
.cad-note { display: flex; gap: 8px; align-items: flex-end; padding: 10px 16px 16px; }
.cad-note textarea {
  flex: 1;
  min-height: 44px;
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-radius: 6px;
  color: var(--text);
  font: 500 14px var(--sans);
  resize: vertical;
}
.cad-note textarea:focus, .cad-assign select:focus, .cad-link-form input:focus, .cad-board-tools select:focus { outline: 2px solid var(--lime); outline-offset: 0; border-color: transparent; }

/* Unit board */
.cad-dept { margin: 0; padding: 10px 14px 4px; }
.cad-board { list-style: none; margin: 0; padding: 0 0 6px; }
.cad-board li { padding: 8px 14px; border-bottom: 1px solid #181b20; }
.cad-board li:last-child { border-bottom: 0; }
.cad-board li.is-me { background: #1c2410; }
.cad-board-top { display: flex; align-items: center; gap: 10px; }
.cad-board-line { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-top: 2px; font-size: 13px; }
.cad-board-tools { display: flex; gap: 6px; margin-top: 6px; }
.cad-board-tools select { flex: 1 1 auto; }


/* ---------- 12. OIA AND OFI CASES (phase 5) ---------- */
.case-intro { margin: -8px 0 0; }
.case-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.case-tab { height: 36px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 6px; background: transparent; color: var(--dim); font: 600 13px var(--sans); cursor: pointer; }
.case-tab:hover { color: var(--text); border-color: var(--dim); }
.case-tab[aria-pressed="true"] { background: var(--lime); border-color: var(--lime); color: #111214; }

.case-num { margin-right: 6px; color: var(--dim); font-size: .8em; font-weight: 600; }
.case-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; }
@media (min-width: 1100px) { .case-grid { grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr); } }
.case-sub { margin: 18px 0 6px; }
.case-desc { margin: 0; padding: 10px 12px; border-left: 3px solid var(--line-2); background: var(--bg); white-space: pre-line; overflow-wrap: anywhere; }
.case-evidence { margin: 0 0 6px; padding-left: 18px; font-size: 14px; }
.case-evidence a { overflow-wrap: anywhere; }
.case-assigned { margin: 0 0 10px; font-weight: 600; }
.case-log { margin: 12px 16px 0; max-height: 480px; }
.case-log li { grid-template-columns: 120px minmax(0, 1fr); }
.case-history { list-style: none; margin: 8px 0 0; padding: 0; }
.case-history li { display: flex; flex-wrap: wrap; gap: 4px 10px; padding: 7px 0; border-bottom: 1px solid #181b20; font-size: 14px; }
.case-history li:last-child { border-bottom: 0; }
.nav-count { min-width: 22px; padding: 1px 7px; border-radius: 999px; background: #2b2110; color: #f2b85b; font: 700 11.5px var(--mono); text-align: center; }
.stack-sm { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.stack-sm > .form, .stack-sm > details { align-self: stretch; }
.stack-sm p { margin: 0; }
.stack-sm .form .btn { align-self: flex-start; }
.field select, .field textarea { width: 100%; }


/* ---------- 13. POSTS, DES NEWS AND RECRUITMENT (phase 6) ---------- */
.post-list { display: flex; flex-direction: column; gap: 12px; }
.post-card { padding: 14px 16px; border: 1px solid var(--line); border-left: 3px solid var(--line-2); border-radius: 6px; background: var(--panel); }
.panel-body .post-card { background: var(--bg); }
.post-card.is-pinned { border-left-color: var(--lime); }
.post-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.post-meta { font-size: 13px; }
.post-title { margin: 8px 0 4px; font-size: 17px; }
.post-body { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.post-card .button-row { margin-top: 10px; }
.post-card .form { margin-top: 4px; }
.dash-posts { grid-column: 1 / -1; }
@media (min-width: 1300px) { .dash-posts { grid-column: span 2; } }
.dash-posts .panel-head a { font-size: 14px; }
.app-flags { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }


/* ---------- 14. SYNAPSE GRID BACKGROUND (login page; drawn by synapse.js) ---------- */
canvas.synapse { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
canvas.synapse ~ .auth-page { position: relative; z-index: 1; }
canvas.synapse ~ .auth-page::before {    /* darkens the middle a little so the login card stays easy to read */
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse 520px 460px at 50% 50%, rgba(11, 12, 14, 0.82), rgba(11, 12, 14, 0) 100%);
  pointer-events: none;
}


/* ---------- 9. TEMPORARY: the AveYellonia preview banner (remove with preview.js) ---------- */
.preview-banner {
  padding: 8px 20px;
  background: #2b2110;
  border-bottom: 1px solid #5a4316;
  color: #f2b85b;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}