/* ================= Dashboard ================= */
.dash-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 14px; }
.dash-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.duty-toggle-row { display: flex; align-items: center; gap: 10px; }

.recent-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 10px; background: var(--bg-2); border: 1px solid var(--border-soft); border-radius: var(--radius-xs); font-size: 11.5px;
  transition: background var(--dur-fast) var(--ease);
}
.recent-row .r-left { display: flex; align-items: center; gap: 8px; min-width: 0; }
.recent-row .r-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-0); }
.recent-row .r-time { font-size: 10px; color: var(--text-3); font-family: var(--font-mono); flex: none; }

.notif-row.clickable { cursor: pointer; transition: background var(--dur-fast) var(--ease); }
.notif-row.clickable:hover { background: var(--chrome-soft); }
.notif-type-icon.t-danger { color: var(--danger-strong); }
.notif-type-icon.t-warn { color: var(--warn-strong); }
.notif-type-icon.t-good { color: var(--good-strong); }
.notif-type-icon.t-info { color: var(--chrome-strong); }

/* ================= Detail headers / member-and-record rows ================= */
.call-detail-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 14px; }
.call-detail-code { font-family: var(--font-mono); font-size: 11px; color: var(--text-2); margin-bottom: 4px; }
.call-detail-title { font-size: 15px; font-weight: 700; color: var(--text-0); text-transform: uppercase; letter-spacing: .3px; }

.unit-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 11px; background: var(--bg-2); border: 1px solid var(--border-soft); border-radius: var(--radius-xs); font-size: 12px; margin-bottom: 5px;
}
.unit-row-left { display: flex; align-items: center; gap: 9px; min-width: 0; }
.unit-callsign { font-family: var(--font-mono); color: var(--text-0); font-weight: 700; flex: none; }
.unit-dept-tag { font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: var(--radius-xs); background: var(--bg-4); color: var(--text-2); flex: none; text-transform: uppercase; }
.unit-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-0); }
.unit-loc { font-size: 10px; color: var(--text-3); }

.status-select {
  width: auto; flex: none; padding: 4px 8px; font-size: 10.5px; border-radius: var(--radius-sm);
  background: var(--bg-4); border: 1px solid var(--border-strong); color: var(--text-1); cursor: pointer;
  text-transform: uppercase;
}
.status-select:focus { border-color: var(--chrome-strong); outline: none; }

/* ================= Settings ================= */
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--border-soft); }
.toggle-row:last-child { border-bottom: none; }
.toggle-row-label { font-size: 12px; font-weight: 500; color: var(--text-0); }
.toggle-row-sub { font-size: 10.5px; color: var(--text-2); margin-top: 2px; }
.switch { position: relative; width: 38px; height: 21px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .track {
  position: absolute; inset: 0; background: var(--bg-4); border: 1px solid var(--border-strong);
  border-radius: 11px; cursor: pointer; transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.switch .track::before {
  content: ''; position: absolute; width: 15px; height: 15px; left: 2px; top: 2px;
  background: var(--text-2); border-radius: 50%; transition: transform var(--dur-med) var(--ease), background var(--dur-fast) var(--ease);
}
.switch input:checked + .track { background: var(--accent); border-color: var(--accent); }
.switch input:checked + .track::before { transform: translateX(17px); background: var(--on-accent); }

/* Accent color picker (MDT Settings > Appearance) - squared off to match
   this theme's sharp, functional controls. */
.accent-swatch-row { display: flex; gap: 10px; flex-wrap: wrap; }
.accent-swatch {
  width: 26px; height: 26px; border-radius: var(--radius-xs); border: 2px solid transparent; padding: 0; cursor: pointer;
  background: var(--swatch); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  transition: border-color var(--dur-fast) var(--ease);
}
.accent-swatch:hover { border-color: var(--border-strong); }
.accent-swatch.active { border-color: var(--text-0); }

.keybind-chip { font-family: var(--font-mono); background: var(--bg-4); border: 1px solid var(--border-strong); padding: 2px 7px; border-radius: var(--radius-xs); font-size: 11px; }

/* ================= Phone Records ================= */
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 14px; }
.photo-card { display: flex; flex-direction: column; }
.photo-tile {
  background: var(--bg-3);
  border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  font-size: 26px; position: relative;
}
.photo-tile .tile-tag {
  position: absolute; top: 6px; left: 6px; font-size: 9px; font-weight: 700;
  background: var(--accent); color: var(--on-accent); padding: 1px 5px; border-radius: var(--radius-xs); text-transform: uppercase;
}
.photo-caption { font-size: 11px; color: var(--text-1); margin-top: 6px; line-height: 1.3; }
.photo-time { font-size: 10px; color: var(--text-3); margin-top: 2px; }

.msg-thread-card { background: var(--bg-2); border: 1px solid var(--border-soft); border-radius: var(--radius-xs); padding: 10px 12px; margin-bottom: 8px; }
.msg-thread-top { display: flex; align-items: center; justify-content: space-between; }
.msg-thread-name { font-weight: 700; font-size: 12px; color: var(--text-0); }
.msg-thread-preview { font-size: 11px; color: var(--text-2); margin-top: 3px; }

/* ================= Evidence ================= */
.evidence-item { background: var(--bg-2); border: 1px solid var(--border-soft); border-radius: var(--radius-xs); padding: 11px 13px; margin-bottom: 8px; }
.evidence-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.chain-step { display: flex; gap: 10px; font-size: 11px; padding: 5px 0; border-bottom: 1px dashed var(--border-soft); }
.chain-step:last-child { border-bottom: none; }
.chain-step .c-time { color: var(--text-3); font-family: var(--font-mono); flex: none; width: 105px; }

/* ================= Investigations ================= */
.gang-swatch {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  margin-right: 6px; vertical-align: middle; border: 1px solid rgba(255, 255, 255, .2);
}

.record-photo-thumb {
  max-width: 100%; max-height: 160px; border-radius: var(--radius-sm); border: 1px solid var(--border-soft);
  display: block; margin-bottom: 8px; object-fit: cover;
}

/* ---- Detective connections board ---- */
.conn-board-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.conn-board {
  position: relative; height: 480px; background: var(--bg-1); border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm); overflow: hidden;
}
.conn-board-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.conn-edge-line { stroke: var(--text-2); stroke-width: 1.5; opacity: .85; }
.conn-edge-tag {
  position: absolute; transform: translate(-50%, -50%); background: var(--bg-0);
  border: 1px solid var(--border-soft); font-size: 10px; color: var(--text-1);
  padding: 1px 7px; border-radius: var(--radius-xs); pointer-events: none; white-space: nowrap;
}
.conn-node {
  position: absolute; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 6px;
  background: var(--bg-3); border: 1px solid var(--border-strong); border-left: 3px solid var(--accent);
  border-radius: var(--radius-xs); padding: 6px 10px; cursor: grab; user-select: none; white-space: nowrap;
  font-size: 12px;
}
.conn-node:active { cursor: grabbing; }
.conn-node.linking { outline: 2px dashed var(--chrome-strong); outline-offset: 2px; }
.conn-node-person { border-left-color: var(--accent); }
.conn-node-vehicle { border-left-color: var(--priority-2); }
.conn-node-case { border-left-color: var(--good); }
.conn-node-bolo { border-left-color: var(--priority-1); }
.conn-node-other { border-left-color: var(--text-3); }
.conn-node-icon { font-size: 14px; }
.conn-node-remove {
  background: none; border: none; color: var(--text-3); cursor: pointer; font-size: 13px;
  line-height: 1; padding: 0 0 0 2px;
}
.conn-node-remove:hover { color: var(--danger-strong); }

/* ---- Corrections & Courts: holding cell grid ---- */
.cell-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px; margin-bottom: 14px;
}
.cell-card {
  background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 10px; min-height: 84px; display: flex; flex-direction: column; justify-content: space-between;
}
.cell-card.occupied { border-color: var(--warn-strong); background: var(--warn-soft); }
.cell-card-id { font-size: 10.5px; color: var(--text-2); font-family: var(--font-mono); letter-spacing: 0.02em; }
.cell-card-name { font-size: 12.5px; font-weight: 600; color: var(--text-0); margin-top: 4px; cursor: pointer; }
.cell-card-name:hover { text-decoration: underline; color: var(--chrome-strong); }
.cell-card-meta { font-size: 10px; color: var(--text-2); margin-top: 2px; }
.cell-card-empty { font-size: 11.5px; color: var(--text-3); margin-top: 14px; text-align: center; text-transform: uppercase; }

/* ================= Camera App (Apple Camera-style) =================
   This is its own dedicated look rather than the flat RMS-panel style
   every other view uses (no .view-header/.view-actions here at all),
   styled after the iOS/iPadOS Camera app per an explicit request: a
   dark viewfinder with
   rule-of-thirds guide lines, a big circular shutter button, and a
   corner thumbnail of the last shot that opens the full roll. The roll
   itself reuses the pre-existing .photo-grid/.photo-card/.photo-tile
   markup (camera.js's tile()/renderGrid(), also shared with Phone
   Records above) - re-themed dark here strictly under
   .camera-roll-overlay's own ancestor selectors, so Phone Records is
   completely unaffected. Everything below is scoped under
   .camera-app-screen so none of it can leak onto any other view.
   ================= */
.camera-app-screen {
  height: 100%;
  min-height: 520px;
  display: flex;
  flex-direction: column;
  position: relative;
  background: #000000;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.4);
}

.camera-viewfinder {
  flex: 1;
  min-height: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(120% 100% at 50% 15%, #1c1c1e 0%, #000000 70%);
}
.camera-grid-lines { position: absolute; inset: 0; pointer-events: none; opacity: .35; }
.camera-grid-lines .cgl-v { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(255, 255, 255, 0.5); }
.camera-grid-lines .cgl-h { position: absolute; left: 0; right: 0; height: 1px; background: rgba(255, 255, 255, 0.5); }
.camera-viewfinder-hint {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  color: rgba(255, 255, 255, 0.55);
  text-align: center; max-width: 260px;
  font-size: 12px; line-height: 1.5;
}
.camera-viewfinder-hint p { margin: 0; }
.camera-viewfinder-icon { opacity: .7; }
.camera-viewfinder-icon svg { width: 40px; height: 40px; display: block; }

.camera-controls {
  flex: none;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 30px 26px;
  background: #000000;
}
.camera-controls-spacer { width: 46px; height: 46px; flex: none; }

.camera-roll-thumb {
  width: 46px; height: 46px; flex: none;
  border-radius: 11px;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  background: #1c1c1e;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  cursor: pointer;
}
.camera-roll-thumb img { width: 100%; height: 100%; object-fit: cover; display: none; }
.camera-roll-thumb-empty { width: 16px; height: 16px; border-radius: 3px; border: 1.5px solid rgba(255, 255, 255, 0.4); display: flex; }

.camera-shutter-btn {
  width: 72px; height: 72px; flex: none;
  border-radius: 50%;
  background: #ffffff;
  border: 4px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9) inset;
  cursor: pointer;
  padding: 0;
  transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.camera-shutter-btn:hover { background: #f0f0f0; }
.camera-shutter-btn:active { transform: scale(0.92); }
.camera-shutter-btn:disabled { opacity: .5; cursor: default; transform: none; }

/* ---- Camera Roll: the existing photo grid, slid in as a full overlay
   over the viewfinder instead of being the default screen - same idea
   as tapping the thumbnail in the real Camera app to reach Photos. ---- */
.camera-roll-overlay {
  position: absolute; inset: 0;
  z-index: 5;
  display: flex; flex-direction: column;
  background: #0a0a0a;
}
.camera-roll-overlay.hidden { display: none; }
.camera-roll-header {
  flex: none;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.camera-roll-header h3 { margin: 0; font-size: 13px; font-weight: 700; color: #ffffff; }
.camera-roll-back {
  display: flex; align-items: center; gap: 4px;
  background: none; border: none; color: #ffffff;
  font-size: 12px; font-weight: 600; cursor: pointer; padding: 4px 2px;
}
#camera-grid { flex: 1; overflow-y: auto; padding: 14px 16px 20px; }
.camera-roll-overlay .photo-tile { background: #1c1c1e; border-color: rgba(255, 255, 255, 0.12); }
.camera-roll-overlay .photo-time { color: rgba(255, 255, 255, 0.45); }
.camera-roll-overlay .empty-state { color: rgba(255, 255, 255, 0.5); }

/* Single per-photo "share" button (top-right of each thumbnail, camera.js's
   tile()) opening openPhotoActionsSheet()'s picker below - replaces the
   old row of 4 stacked buttons under each card. .photo-tile already has
   position:relative (see Phone Records above, which this is shared with),
   so this just needs to stay inset within it. */
.photo-share-btn {
  position: absolute; top: 6px; right: 6px;
  width: 26px; height: 26px; flex: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  border: none; color: #ffffff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0;
}
.photo-share-btn:hover { background: rgba(0, 0, 0, 0.75); }
.photo-share-btn .btn-ico svg { width: 14px; height: 14px; }

/* Files/Share-app-style action sheet (camera.js's openPhotoActionsSheet) -
   plain icon rows inside this MDT's existing .modal-box chrome, rather
   than a native OS share sheet (there's nothing to share to outside this
   MDT's own features). Delete sits below a divider and reads as the
   sheet's destructive action (danger-colored icon + label), same
   convention iOS uses for a share sheet's own destructive rows. */
.share-sheet { display: flex; flex-direction: column; }
.share-sheet-row {
  display: flex; align-items: center; gap: 12px;
  width: 100%; text-align: left;
  background: none; border: none; border-bottom: 1px solid var(--border-soft);
  cursor: pointer; padding: 11px 16px;
  font-size: 12.5px; font-weight: 600; color: var(--text-0);
}
.share-sheet-row:last-child { border-bottom: none; }
.share-sheet-row:hover { background: var(--bg-2); }
.share-sheet-icon {
  width: 30px; height: 30px; flex: none;
  border-radius: 8px;
  background: var(--accent-soft); color: var(--accent-strong);
  display: flex; align-items: center; justify-content: center;
}
.share-sheet-icon svg { width: 17px; height: 17px; display: block; }
.share-sheet-row.danger .share-sheet-icon { background: var(--danger); }
.share-sheet-row.danger .share-sheet-label { color: var(--danger-strong); }
.share-sheet-divider { height: 7px; background: var(--bg-0); }

/* ---- Recent filmstrip (idle viewfinder screen) - camera.js's
   renderFilmstrip(). Gives the idle screen something to show besides an
   empty dark box between shots; tapping a thumb opens the lightbox
   below. ---- */
.camera-filmstrip {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  overflow-x: auto;
  background: #000000;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.camera-filmstrip.empty { justify-content: center; }
.camera-filmstrip-empty { font-size: 11px; color: rgba(255, 255, 255, 0.35); white-space: nowrap; }
.camera-filmstrip-thumb {
  flex: none;
  width: 46px; height: 46px;
  border-radius: 8px;
  overflow: hidden;
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  background: #1c1c1e;
  padding: 0;
  cursor: pointer;
}
.camera-filmstrip-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.camera-filmstrip-thumb:hover { border-color: rgba(255, 255, 255, 0.5); }

.camera-roll-overlay .photo-tile { cursor: pointer; }

/* ---- Roll header "Select" button + bulk-delete bar (camera.js's
   setSelectMode/deleteSelected) - reuses this MDT's plain .btn chrome
   for the bar's own buttons since the bar sits over a dark background,
   not the roll's tile grid. ---- */
.camera-roll-select-btn {
  background: none; border: none; color: var(--chrome-strong, #6ea8e8);
  font-size: 12px; font-weight: 600; cursor: pointer; padding: 4px 2px;
}
.camera-roll-select-btn:hover { text-decoration: underline; }
.camera-roll-selectbar {
  flex: none;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 16px;
  background: #141414;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 11.5px; color: rgba(255, 255, 255, 0.8);
}
.camera-roll-selectbar.hidden { display: none; }
.camera-roll-selectbar-spacer { flex: 1; }

/* Checkbox indicator swapped in for the share button (top-right of each
   tile) while select mode is active - filled/checked once tapped. */
.photo-select-check {
  position: absolute; top: 6px; right: 6px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  border: 1.5px solid rgba(255, 255, 255, 0.7);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: #ffffff; line-height: 1;
}
.photo-card.selected .photo-tile { outline: 2px solid var(--chrome-strong); outline-offset: -2px; }
.photo-card.selected .photo-select-check { background: var(--chrome-strong); border-color: var(--chrome-strong); }

/* ---- Full-size lightbox (camera.js's openLightbox) - tap any tile or
   filmstrip thumb to see the actual photo instead of only ever a small
   cropped 16:9 tile. Sits above the roll overlay (z-index 5) so it can
   be opened from either the roll grid or the idle viewfinder's
   filmstrip. ---- */
.camera-lightbox {
  position: absolute; inset: 0;
  z-index: 10;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.94);
  padding: 20px;
}
.camera-lightbox.hidden { display: none; }
.camera-lightbox-top {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px;
}
.camera-lightbox-icon-btn {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: none; color: #ffffff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0;
}
.camera-lightbox-icon-btn:hover { background: rgba(255, 255, 255, 0.22); }
.camera-lightbox-icon-btn .btn-ico svg { width: 15px; height: 15px; }
.camera-lightbox-count { font-size: 11px; font-weight: 600; color: rgba(255, 255, 255, 0.6); }
.camera-lightbox-img {
  max-width: 100%; max-height: calc(100% - 70px);
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
}
.camera-lightbox-time {
  position: absolute; bottom: 14px; left: 0; right: 0;
  text-align: center;
  font-size: 10.5px; color: rgba(255, 255, 255, 0.45);
}
.camera-lightbox-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: none; color: #ffffff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0;
}
.camera-lightbox-nav:hover { background: rgba(255, 255, 255, 0.2); }
.camera-lightbox-nav .btn-ico svg { width: 17px; height: 17px; }
.camera-lightbox-prev { left: 12px; }
.camera-lightbox-next { right: 12px; }

/* ================= Image attachments (Reports/Cases) =================
   Small thumbnail chips for images attached via camera.js's "Attach to
   Report"/"Attach to Case" share-sheet actions, or the matching "Add
   Image" button here - both read/write the exact same attachments array
   (mdt_reports.attachments / mdt_cases.attachments), just from two
   different entry points, so a photo attached from either side shows up
   in both places. ================= */
.attachment-thumbs { display: flex; flex-wrap: wrap; gap: 6px; }
.attachment-thumb {
  position: relative; width: 56px; height: 56px; flex: none;
  border-radius: var(--radius-xs); overflow: hidden; border: 1px solid var(--border);
  cursor: pointer;
}
.attachment-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.attachment-thumb-remove {
  position: absolute; top: 2px; right: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: rgba(0, 0, 0, 0.65); color: #fff; border: none;
  font-size: 11px; line-height: 15px; text-align: center; cursor: pointer; padding: 0;
}
.attachment-thumb-remove:hover { background: var(--danger); }
.attachment-pick-grid {
  display: flex; flex-wrap: wrap; gap: 6px;
  max-height: 200px; overflow-y: auto; padding: 2px;
}
.attachment-pick-thumb {
  width: 56px; height: 56px; flex: none;
  border-radius: var(--radius-xs); overflow: hidden; border: 1px solid var(--border);
  cursor: pointer; transition: border-color var(--dur-fast) var(--ease);
}
.attachment-pick-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.attachment-pick-thumb:hover { border-color: var(--chrome-strong, var(--chrome)); }

/* ==========================================================
   v2 additions: dashboard, dispatch board, agencies, feed rows.
   ========================================================== */
.eyebrow { font-size: 10.5px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--accent-strong); margin-bottom: 4px; }

/* Legacy rows restyled */
.recent-row { background: var(--bg-3); border-color: var(--border-soft); border-radius: var(--radius); padding: 9px 12px; font-size: 12px; }
.unit-row { background: var(--bg-3); border-radius: var(--radius); }

/* ---- Dashboard ---- */
.dash-unit {
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  padding: 14px 18px; margin-bottom: 14px;
}
.dash-unit-id { display: flex; align-items: center; gap: 14px; min-width: 0; }
.dash-crest { width: 46px; height: 46px; object-fit: contain; flex: none; }
.dash-unit-name { font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--text-0); }
.dash-unit-cells { display: flex; align-items: stretch; gap: 0; }
.dash-cell { padding: 2px 20px; border-left: 1px solid var(--border-soft); min-width: 0; }
.dash-cell-label { font-size: 9.5px; font-weight: 700; letter-spacing: .9px; color: var(--text-3); text-transform: uppercase; margin-bottom: 4px; }
.dash-cell-value { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 700; color: var(--text-0); white-space: nowrap; }
.dash-cell-toggle { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 10px; align-items: center; }
.dash-cell-toggle .dash-cell-label { grid-column: 1 / -1; }
.dash-duty-text { font-size: 11px; font-weight: 700; letter-spacing: .6px; }

.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 14px; }
.kpi {
  background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 13px 15px 12px; min-width: 0;
  transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.kpi.clickable { cursor: pointer; }
.kpi.clickable:hover { border-color: var(--accent-border); transform: translateY(-1px); }
.kpi-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kpi-label { font-size: 10.5px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--text-2); }
.kpi-ico { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius); background: var(--bg-3); color: var(--text-2); }
.kpi-ico svg { width: 15px; height: 15px; }
.kpi-ico.danger { background: var(--danger-soft); color: var(--danger-strong); }
.kpi-ico.warn { background: var(--warn-soft); color: var(--warn-strong); }
.kpi-ico.good { background: var(--good-soft); color: var(--good-strong); }
.kpi-ico.accent { background: var(--accent-soft); color: var(--accent-strong); }
.kpi-value { font-family: var(--font-display); font-size: 28px; font-weight: 700; line-height: 1.1; margin-top: 6px; color: var(--text-0); letter-spacing: -.4px; }
.kpi-value.danger { color: var(--danger-strong); }
.kpi-value.warn { color: var(--warn-strong); }
.kpi-value.good { color: var(--good-strong); }
.kpi-value.accent { color: var(--accent-strong); }
.kpi-sub { font-size: 11px; color: var(--text-3); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.dash-grid { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(300px, 1fr); gap: 14px; align-items: start; }
.dash-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.dash-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }

.feed-row {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 16px; border-bottom: 1px solid var(--border-soft);
  transition: background var(--dur-fast) var(--ease);
}
.feed-row:last-child { border-bottom: none; }
.feed-row.clickable { cursor: pointer; }
.feed-row.clickable:hover { background: var(--bg-3); }
.feed-ico { display: flex; color: var(--text-3); }
.feed-ico svg { width: 15px; height: 15px; }
.feed-main { flex: 1; min-width: 0; }
.feed-title { font-size: 12.5px; font-weight: 600; color: var(--text-0); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed-sub { font-size: 11.3px; color: var(--text-2); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.unit-cs { min-width: 58px; font-weight: 700; color: var(--accent-strong); font-size: 12px; }

.dash-searches { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.dash-mini-label { width: 100%; font-size: 9.5px; font-weight: 700; letter-spacing: .9px; text-transform: uppercase; color: var(--text-3); margin-bottom: 2px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 10px;
  background: var(--bg-3); border: 1px solid var(--border); border-radius: 13px;
  color: var(--text-1); font-size: 11.5px; font-weight: 500; cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.chip:hover { border-color: var(--accent-border); color: var(--text-0); }
.chip svg { width: 12px; height: 12px; color: var(--text-3); }

/* ---- Dispatch board ---- */
.cad-strip {
  display: flex; align-items: stretch; flex-wrap: wrap; gap: 0;
  background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-lg);
  margin-bottom: 14px; overflow: hidden;
}
.cad-stat { padding: 11px 20px; border-right: 1px solid var(--border-soft); }
.cad-stat-label { font-size: 9.5px; font-weight: 700; letter-spacing: .9px; text-transform: uppercase; color: var(--text-3); }
.cad-stat-value { display: flex; align-items: center; gap: 7px; font-size: 18px; font-weight: 700; margin-top: 2px; }
.cad-legend { margin-left: auto; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; padding: 10px 16px; font-size: 11px; color: var(--text-2); }
.cad-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.cad-legend-item .mono { color: var(--text-1); font-weight: 600; }
.unit-status { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; }
.unit-status .mono { color: var(--text-1); }

.dispatch-grid {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 14px;
  height: calc(var(--mdt-h) - var(--topbar-h) - var(--statusbar-h) - 230px); min-height: 400px;
}
.dispatch-left { display: flex; flex-direction: column; gap: 14px; min-height: 0; }
.dispatch-right { display: flex; flex-direction: column; min-height: 0; }
.map-mount, #map-view-mount { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.dispatch-right .map-panel { border: none; border-radius: 0; }
#map-view-mount .map-panel { flex: 1; }

/* ---- Agencies ---- */
.agency-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 14px; }
.agency-card { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px 18px; }
.agency-card.mine { border-color: var(--accent-border); box-shadow: inset 0 2px 0 var(--accent); }
.agency-top { display: flex; align-items: center; gap: 14px; }
.agency-crest { width: 54px; height: 54px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: var(--radius); background: var(--bg-3); border: 1px solid var(--border); font-weight: 700; color: var(--text-2); }
.agency-crest img { width: 44px; height: 44px; object-fit: contain; }
.agency-code { font-size: 11px; font-weight: 700; color: var(--accent-strong); letter-spacing: .6px; }
.agency-name { font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--text-0); }
.agency-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border-soft); }

@media (max-width: 1440px) {
  .dash-grid { grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr); }
  .dash-cell { padding: 2px 14px; }
}
@media (max-width: 1320px) {
  .dash-split { grid-template-columns: 1fr; }
  .dash-grid { grid-template-columns: minmax(0, 1fr) 280px; }
  .kpi-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dispatch-grid { grid-template-columns: 1fr; height: auto; }
  .dispatch-right { height: 420px; }
  .cad-legend { display: none; }
  .dash-unit-cells .dash-cell:nth-child(3) { display: none; }
}

/* ---- Reports list (v2) ---- */
.report-meta-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px 16px; padding-top: 10px; border-top: 1px solid var(--border-soft); }
.report-meta-grid > div { display: flex; flex-direction: column; min-width: 0; }
.list-summary { font-size: 11px; color: var(--text-3); margin: -4px 0 8px; letter-spacing: .3px; }
@media (max-width: 1440px) { .report-meta-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---- Search list column with refine box (Persons / Vehicles) ---- */
.list-col { display: flex; flex-direction: column; gap: 8px; min-height: 0; min-width: 0; }
.list-col .list-pane { flex: 1; min-height: 0; }
.list-refine { height: 32px; min-height: 32px; font-size: 12px; background: var(--bg-2); }
.veh-plate-big {
  width: 150px; height: 76px; flex: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: #eeebdd; color: #1b2440; border: 3px solid #c9c4ae; border-radius: 8px;
  font-family: var(--font-mono); font-size: 24px; font-weight: 800; letter-spacing: 2px;
  box-shadow: inset 0 0 0 2px #fff;
}
.veh-plate-big span { font-family: var(--font-ui); font-size: 8.5px; letter-spacing: 2px; color: #b8860b; font-weight: 700; margin-top: 2px; }