/* ═══════════════════════════════════════════════════════════════════
   cad_realistic.css — the Realistic console skin
   ───────────────────────────────────────────────────────────────────
   The Legacy console is a four-quadrant board: calls, units, 911 and
   groups, each a sortable table. It is dense and it is fast, and the
   people who know it do not want it taken away.

   Realistic is the other shape a dispatch console comes in — vertical
   rails read left to right in the order the work happens. Who is free,
   what is waiting, what is running, where it all is. Nothing is behind
   a modal: the map is a column, not a dialog, because a dispatcher
   looks at it constantly and a dialog is something you dismiss.

   The split between pending and active is the point of the layout. On
   the Legacy board an unassigned call is a row among forty rows with
   the word UNASSIGNED at the end of it. Here it is in its own column
   with a count in the header, so the question "what is nobody on?" is
   answered by looking rather than by reading.

   Everything here is scoped to body.skin-realistic. Legacy renders
   from the same markup with this file inert.
   ═══════════════════════════════════════════════════════════════════ */

body.skin-realistic {
  /* Cooler and flatter than Legacy's blue-black: this layout leans on
     card edges rather than on glow to separate things. */
  --rl-bg:        #05070b;
  --rl-rail:      #0a0e14;
  --rl-head:      #0d1219;
  --rl-card:      #141a23;
  --rl-cardhi:    #1b2330;
  --rl-line:      #1e2733;
  --rl-linehi:    #2c3949;
  --rl-text:      #e3ebf5;
  --rl-text2:     #8ba0b8;
  --rl-text3:     #5a6b80;
  --rl-blue:      #2f80ed;
  --rl-green:     #27ae60;
  --rl-amber:     #e8912d;
  --rl-red:       #e0393e;
  --rl-teal:      #17a2b8;
  --rl-r:         5px;
}

/* The Legacy board and the Realistic rails are both in the document;
   each skin hides the other. */
body.skin-realistic .workspace { display: none !important; }
body:not(.skin-realistic) #rl-shell { display: none !important; }

/* ── Shell ──────────────────────────────────────────────────────── */
#rl-shell {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 250px 236px minmax(330px, 1fr) minmax(300px, .92fr);
  gap: 1px;
  background: var(--rl-line);
  overflow: hidden;
}
body.skin-realistic { background: var(--rl-bg); color: var(--rl-text); }

/* Every column is the same object: a header that never scrolls and a
   body that does. */
.rl-col {
  background: var(--rl-rail);
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}
.rl-col-head {
  height: 34px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  background: var(--rl-head);
  border-bottom: 1px solid var(--rl-line);
}
.rl-col-title {
  font-family: var(--cond, sans-serif);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .02em;
  color: var(--rl-text);
  white-space: nowrap;
}
.rl-col-count { color: var(--rl-text2); font-size: 12px; font-weight: 600; }
.rl-col-tools { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.rl-icon-btn {
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 3px;
  background: transparent; color: var(--rl-text3);
  font-size: 12px; cursor: pointer;
  transition: background .12s, color .12s;
}
.rl-icon-btn:hover { background: var(--rl-cardhi); color: var(--rl-text); }
.rl-icon-btn.on { color: var(--rl-blue); background: rgba(47,128,237,.14); }
.rl-col-body { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 6px; }

/* A column with nothing in it says so, rather than sitting empty and
   reading as broken. */
.rl-empty {
  padding: 22px 12px;
  text-align: center;
  color: var(--rl-text3);
  font-size: 11.5px;
  line-height: 1.5;
}

/* ── Units ──────────────────────────────────────────────────────── */
/* Two groups, because the only question worth answering at a glance is
   who can be sent. Available is first and stays first. */
.rl-group { margin-bottom: 8px; }
.rl-group-head {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 4px 4px 2px;
  cursor: pointer;
  color: var(--rl-text2);
  font-size: 11.5px; font-weight: 700;
  letter-spacing: .02em;
  user-select: none;
}
.rl-group-head:hover { color: var(--rl-text); }
.rl-caret { font-size: 9px; transition: transform .13s; display: inline-block; }
.rl-group.collapsed .rl-caret { transform: rotate(-90deg); }
.rl-group.collapsed .rl-group-body { display: none; }
.rl-subhead {
  padding: 6px 4px 3px;
  font-family: var(--mono, monospace);
  font-size: 9.5px;
  letter-spacing: .09em;
  color: var(--rl-text3);
  text-transform: uppercase;
}

.rl-unit {
  display: flex; align-items: center; gap: 7px;
  padding: 4px 6px;
  margin-bottom: 2px;
  border-radius: 3px;
  cursor: pointer;
  transition: background .1s;
}
.rl-unit:hover { background: var(--rl-cardhi); }
.rl-unit.sel { background: rgba(47,128,237,.16); box-shadow: inset 2px 0 0 var(--rl-blue); }
/* The callsign is the thing being read, so it carries the colour and
   everything else on the row stays quiet. */
.rl-unit-tag {
  min-width: 44px;
  padding: 2px 6px;
  border-radius: 3px;
  font-family: var(--mono, monospace);
  font-size: 11px; font-weight: 700;
  text-align: center;
  color: #06090d;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rl-unit-code {
  font-family: var(--mono, monospace);
  font-size: 10px; font-weight: 700;
  color: var(--rl-text2);
  letter-spacing: .04em;
}
.rl-unit-name {
  flex: 1; min-width: 0;
  font-size: 11px;
  color: var(--rl-text3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* How long they have been in this status. A dispatcher's own sense of
   "that one has been on that call a while" is the whole job. */
.rl-unit-timer {
  font-family: var(--mono, monospace);
  font-size: 10px;
  color: var(--rl-text3);
  white-space: nowrap;
}
.rl-unit-timer.stale { color: var(--rl-amber); }
.rl-unit-timer.old   { color: var(--rl-red); }

/* ── Incident cards ─────────────────────────────────────────────── */
.rl-card {
  background: var(--rl-card);
  border: 1px solid var(--rl-line);
  border-left: 3px solid var(--rl-text3);
  border-radius: var(--rl-r);
  padding: 7px 9px 8px;
  margin-bottom: 6px;
  cursor: pointer;
  transition: background .1s, border-color .1s;
}
.rl-card:hover { background: var(--rl-cardhi); border-color: var(--rl-linehi); }
.rl-card.sel { border-color: var(--rl-blue); background: rgba(47,128,237,.11); }
.rl-card.p1 { border-left-color: var(--rl-red); }
.rl-card.p2 { border-left-color: var(--rl-amber); }
.rl-card.p3 { border-left-color: var(--rl-green); }

.rl-card-top { display: flex; align-items: baseline; gap: 6px; margin-bottom: 2px; }
.rl-card-id {
  font-family: var(--mono, monospace);
  font-size: 10px;
  color: var(--rl-text3);
}
.rl-card-nature {
  flex: 1; min-width: 0;
  font-family: var(--cond, sans-serif);
  font-weight: 700; font-size: 13px;
  letter-spacing: .01em;
  color: var(--rl-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rl-card-prio {
  font-family: var(--mono, monospace);
  font-size: 11px; font-weight: 700;
  color: var(--rl-text2);
}
.rl-card.p1 .rl-card-prio { color: var(--rl-red); }
.rl-card.p2 .rl-card-prio { color: var(--rl-amber); }
.rl-card-addr {
  font-size: 11.5px;
  color: var(--rl-text2);
  line-height: 1.35;
  margin-bottom: 4px;
  overflow-wrap: anywhere;
}
.rl-card-when {
  font-family: var(--mono, monospace);
  font-size: 9.5px;
  color: var(--rl-text3);
}
.rl-card-units { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 5px; }
.rl-utag {
  padding: 1px 5px;
  border-radius: 3px;
  font-family: var(--mono, monospace);
  font-size: 10px; font-weight: 700;
  color: #06090d;
}
/* The narrative sits under a rule with a speech glyph, the way it does
   on the sheet an officer actually files. */
.rl-card-note {
  display: flex; gap: 5px;
  margin-top: 6px; padding-top: 6px;
  border-top: 1px solid var(--rl-line);
  font-size: 11px; color: var(--rl-text2);
  line-height: 1.4;
}
.rl-card-note-icon { color: var(--rl-text3); flex-shrink: 0; font-size: 10px; }
.rl-badge {
  padding: 1px 5px;
  border-radius: 3px;
  font-family: var(--mono, monospace);
  font-size: 9px; font-weight: 700;
  letter-spacing: .05em;
}
.rl-badge.hot  { background: rgba(224,57,62,.18);  color: #ff8b8f; }
.rl-badge.warn { background: rgba(232,145,45,.18); color: #ffc074; }
.rl-badge.info { background: rgba(47,128,237,.18); color: #7db4ff; }

/* A call that arrived on this poll pulses once. Twice would be noise. */
@keyframes rl-arrive {
  0%   { box-shadow: 0 0 0 0 rgba(47,128,237,.55); }
  100% { box-shadow: 0 0 0 9px rgba(47,128,237,0); }
}
.rl-card.arriving { animation: rl-arrive 1.1s ease-out 2; }

/* ── Map column ─────────────────────────────────────────────────── */
/* The map is a column, not a dialog. A dispatcher looks at it the whole
   shift, and a dialog is something you dismiss. */
#rl-map-mount { position: relative; flex: 1; min-height: 0; display: flex; }
#rl-map-mount .map-modal {
  position: static;
  width: 100%; height: 100%;
  max-width: none; max-height: none;
  border: 0; border-radius: 0;
  box-shadow: none;
  transform: none;
  display: flex; flex-direction: column;
}
#rl-map-mount .map-modal-head {
  height: 34px; min-height: 34px;
  padding: 0 8px;
  background: var(--rl-head);
  border-bottom: 1px solid var(--rl-line);
}
/* The dialog's own header carries a title, a legend, seven filter chips
   and a close button. In a column that is two lines of furniture above
   the thing being looked at, so the column supplies its own header and
   the dialog's is dropped. Everything it did is still reachable: the
   filters live in the column tools, the zoom is on the map itself. */
#rl-map-mount .map-modal-head { display: none; }
#rl-map-mount .map-modal-body { flex: 1; min-height: 0; }

/* Zoom sits on the map, bottom right, out of the way of the north end
   of the county where most of the calls are. */
.rl-map-ctl {
  position: absolute;
  right: 10px; bottom: 10px;
  display: flex; flex-direction: column; gap: 4px;
  z-index: 5;
}
.rl-map-ctl button {
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(13,18,25,.92);
  border: 1px solid var(--rl-linehi);
  border-radius: 3px;
  color: var(--rl-text2);
  font-size: 13px; line-height: 1;
  cursor: pointer;
}
.rl-map-ctl button:hover { color: var(--rl-text); border-color: var(--rl-blue); }

/* The department filter, as a strip of dots rather than a row of chips
   that wraps onto three lines in a column this narrow. */
.rl-map-filters { display: flex; align-items: center; gap: 3px; }
.rl-dept-dot {
  width: 15px; height: 15px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  opacity: .34;
  transition: opacity .12s, border-color .12s;
}
.rl-dept-dot.on { opacity: 1; border-color: rgba(255,255,255,.34); }

/* ── Top bar ────────────────────────────────────────────────────── */
body.skin-realistic .topbar {
  height: 44px;
  background: var(--rl-head);
  border-bottom: 1px solid var(--rl-line);
}
body.skin-realistic .topbar-brand { border-right: 1px solid var(--rl-line); padding: 0 12px; }
body.skin-realistic .nav-buttons { display: none; }

/* The command bar. One box that searches calls and units and runs the
   handful of things a dispatcher does constantly, so the nav row of
   buttons can go away and give the columns the height back. */
.rl-cmd-wrap { flex: 1; display: flex; justify-content: center; padding: 0 14px; position: relative; }
/* Legacy keeps its nav row, and the two do not both belong in one bar. */
body:not(.skin-realistic) .rl-cmd-wrap { display: none; }
.rl-cmd {
  width: 100%; max-width: 560px;
  height: 27px;
  display: flex; align-items: center; gap: 7px;
  padding: 0 10px;
  background: var(--rl-bg);
  border: 1px solid var(--rl-line);
  border-radius: 3px;
  transition: border-color .12s;
}
.rl-cmd:focus-within { border-color: var(--rl-blue); }
.rl-cmd-icon { color: var(--rl-text3); font-size: 11px; }
.rl-cmd input {
  flex: 1; min-width: 0;
  background: transparent; border: 0; outline: 0;
  color: var(--rl-text); font-size: 12px;
  font-family: var(--body, sans-serif);
}
.rl-cmd input::placeholder { color: var(--rl-text3); }
.rl-cmd kbd {
  font-family: var(--mono, monospace);
  font-size: 9px;
  color: var(--rl-text3);
  border: 1px solid var(--rl-line);
  border-radius: 2px;
  padding: 1px 4px;
}

.rl-cmd-menu {
  position: absolute;
  top: 32px; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 560px;
  max-height: 340px; overflow-y: auto;
  background: var(--rl-card);
  border: 1px solid var(--rl-linehi);
  border-radius: var(--rl-r);
  box-shadow: 0 16px 46px rgba(0,0,0,.62);
  z-index: 400;
  padding: 4px;
}
.rl-cmd-sect {
  padding: 6px 8px 3px;
  font-size: 9.5px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--rl-text3);
}
.rl-cmd-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 12px;
  color: var(--rl-text2);
}
.rl-cmd-item:hover, .rl-cmd-item.active { background: var(--rl-cardhi); color: var(--rl-text); }
.rl-cmd-item .k { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rl-cmd-item .v { font-family: var(--mono, monospace); font-size: 10px; color: var(--rl-text3); }

/* ── Style switch ───────────────────────────────────────────────── */
/* Two labels in one pill, in both skins, so the way back is the same
   control as the way in. */
.rl-style-switch {
  display: flex;
  border: 1px solid var(--border, #1e2733);
  border-radius: 3px;
  overflow: hidden;
  margin-right: 8px;
  flex-shrink: 0;
}
.rl-style-switch button {
  border: 0;
  background: transparent;
  color: #7d90a8;
  font-family: var(--cond, sans-serif);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 4px 9px;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.rl-style-switch button:hover { color: #dce8f5; }
.rl-style-switch button.on { background: #2f80ed; color: #fff; }

/* ── Narrow screens ─────────────────────────────────────────────── */
/* Four rails do not fit on a laptop half-screen. The map is the one
   that can wait, so it goes under the rest rather than being squeezed
   to a strip that shows nothing. */
@media (max-width: 1500px) {
  #rl-shell { grid-template-columns: 216px 210px minmax(280px, 1fr); grid-template-rows: 1fr; }
  #rl-shell .rl-col-map { display: none; }
  body.skin-realistic.rl-map-open #rl-shell { grid-template-columns: 1fr; }
  body.skin-realistic.rl-map-open #rl-shell .rl-col:not(.rl-col-map) { display: none; }
  body.skin-realistic.rl-map-open #rl-shell .rl-col-map { display: flex; }
}
@media (max-width: 1040px) {
  #rl-shell { grid-template-columns: 1fr; grid-auto-rows: minmax(180px, auto); overflow-y: auto; }
  .rl-cmd-wrap { display: none; }
}