/* PremierOne CAD client - the look, taken from the user guide's screenshots (MN008396A01-V):
   a Windows desktop application - light chrome, white forms, a dark blue tab bar, and the
   cyan seven-segment clock. */

/* DSEG7 Classic Italic (dseg 0.46.0, SIL OFL - fonts/DSEG-LICENSE.txt), served from here: the
   CSP allows fonts from this origin only, so the CDN copy was never loaded on the live site. */
@font-face {
  font-family: "DSEG7";
  src: url("fonts/DSEG7Classic-Italic.woff2") format("woff2");
  font-display: swap;
}

:root {
  --chrome: #f0f0f0;
  --chrome-2: #e3e3e3;
  --edge: #a9a9a9;
  --edge-dark: #707070;
  --text: #000;
  --muted: #555;
  --field: #fff;
  --field-edge: #abadb3;
  --focus: #569de5;
  --yellow: #fcf3a9;
  --blue: #1e6bc0;
  --select: #3b78c8;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font: 12px "Segoe UI", Tahoma, Arial, sans-serif;
  color: var(--text);
  background: #3a5a78 linear-gradient(160deg, #2d4b68, #4a7194);
  overflow: hidden;
  user-select: none;
}
input, select, textarea, button { font: inherit; color: inherit; }
.hidden { display: none !important; }
u { text-decoration: underline; }

#desktop { position: fixed; inset: 0; overflow: hidden; }

/* --- windows --------------------------------------------------------------------------- */
.win {
  position: absolute; display: flex; flex-direction: column; background: var(--chrome);
  border: 1px solid #6d6d6d; box-shadow: 0 4px 18px rgba(0,0,0,.45); min-width: 200px;
}
.win.minimized .win-body, .win.minimized .win-rs { display: none; }
.win-title {
  display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 0 0 6px; flex: none;
  background: linear-gradient(#ffffff, #e9e9e9); border-bottom: 1px solid #c8c8c8; cursor: default;
}
.win-title-t { font-size: 12px; white-space: nowrap; }
.win-logo {
  display: inline-block; width: 18px; height: 18px; flex: none; color: transparent; overflow: hidden;
  background: url("atxrp-icon.png") center / contain no-repeat;
}
.win-grip {
  flex: 1 1 auto; height: 12px; margin: 0 8px;
  background-image: radial-gradient(#b8b8b8 1px, transparent 1.2px); background-size: 4px 4px;
}
.win-btns { display: flex; align-self: stretch; }
.win-b {
  width: 34px; border: 0; background: transparent; position: relative; cursor: default;
}
.win-b:hover { background: #e5e5e5; }
.win-close:hover { background: #e81123; }
.win-min::after { content: ""; position: absolute; left: 12px; right: 12px; top: 15px; border-top: 1px solid #000; }
.win-max::after { content: ""; position: absolute; left: 12px; top: 9px; width: 10px; height: 9px; border: 1px solid #000; }
.win-close::before, .win-close::after {
  content: ""; position: absolute; left: 11px; top: 13px; width: 13px; border-top: 1px solid #000; transform: rotate(45deg);
}
.win-close::after { transform: rotate(-45deg); }
.win-close:hover::before, .win-close:hover::after { border-color: #fff; }
.win-body { flex: 1 1 auto; min-height: 0; overflow: hidden; position: relative; }
.win-rs { position: absolute; right: 0; bottom: 0; width: 14px; height: 14px; cursor: nwse-resize;
  background: linear-gradient(135deg, transparent 50%, #9a9a9a 50%, transparent 60%, #9a9a9a 70%, transparent 80%); }

/* --- buttons and fields ------------------------------------------------------------------ */
.btn {
  min-height: 23px; padding: 1px 10px; background: linear-gradient(#f6f6f6, #dddddd);
  border: 1px solid var(--edge-dark); border-radius: 3px; cursor: default; white-space: nowrap;
}
.btn:hover:not(:disabled) { background: linear-gradient(#eaf6fd, #bee6fd); border-color: #3c7fb1; }
.btn:active:not(:disabled) { background: linear-gradient(#c4e5f6, #98d1ef); }
.btn:disabled { color: #9a9a9a; border-color: #bfbfbf; background: #f4f4f4; }
.btn.primary { border-color: #3c7fb1; box-shadow: inset 0 0 0 1px #9cd0ef; }
.btn.on { background: linear-gradient(#cde6f7, #9ccbee); border-color: #3c7fb1; }
.btn-icon.no { width: 24px; padding: 0; background: #fff; border-color: #bbb; position: relative; }
.btn-icon.no::after { content: "\2298"; color: #d11; font-weight: 700; font-size: 16px; line-height: 20px; }
.fi, .fs, .fa {
  height: 22px; padding: 1px 4px; background: var(--field); border: 1px solid var(--field-edge); border-radius: 0;
  user-select: text;
}
.fa { height: auto; resize: vertical; width: 100%; min-height: 44px; }
.fi:focus, .fs:focus, .fa:focus { outline: none; border-color: var(--focus); }
.fi.req, .fs.req, .fa.yellow, .fi:focus.req { background: var(--yellow); }
.fi[readonly] { background: #f7f7f7; }
.fs { padding: 0 2px; }

/* --- the client -------------------------------------------------------------------------- */
.p1 { display: flex; flex-direction: column; height: 100%; }
.p1-menubar {
  display: flex; align-items: center; gap: 2px; height: 30px; padding: 0 4px; background: var(--chrome);
  border-bottom: 1px solid #d6d6d6; flex: none;
}
.mb-grip { width: 4px; height: 18px; margin-right: 4px; background-image: radial-gradient(#9a9a9a 1px, transparent 1.2px); background-size: 3px 3px; }
.mb { border: 1px solid transparent; background: none; padding: 2px 6px; cursor: default; white-space: nowrap; flex: none; }
.mb:hover { background: #e5f1fb; border-color: #cce4f7; }
.p1-cmd, .p1-status {
  display: flex; align-items: center; height: 24px; background: #fff; border: 1px solid #b9b9b9; margin-left: 4px;
}
.p1-cmd { flex: 1 1 42%; }
.p1-cmd input { flex: 1 1 auto; height: 100%; border: 0; padding: 0 6px; font-size: 14px; outline: none; user-select: text; }
.p1-status { flex: 1 1 36%; min-width: 0; padding-left: 4px; gap: 5px; }
#status-msg { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.combo-arrow { width: 18px; text-align: center; color: #333; cursor: default; flex: none; }
.st-icon { width: 15px; height: 15px; border-radius: 50%; flex: none; display: grid; place-items: center; color: #fff; font: 700 10px Arial; }
.st-icon.ok { background: radial-gradient(circle at 40% 35%, #6fd36f, #1e8e1e); }
.st-icon.ok::after { content: "\2714"; }
.st-icon.warn { background: radial-gradient(circle at 40% 35%, #ffd76a, #d49a00); }
.st-icon.warn::after { content: "!"; }
.st-icon.err { background: radial-gradient(circle at 40% 35%, #ff7676, #c01616); }
.st-icon.err::after { content: "\2716"; }

.p1-grid {
  flex: 1 1 auto; min-height: 0; display: grid;
  grid-template-columns: 200px minmax(0, 1fr) 340px;
  grid-template-rows: 42px 26px minmax(0, 1fr);
  grid-template-areas:
    "clock tabs  tabs"
    "date  sub   waat"
    "left  pwa   waa";
}
.p1-clock {
  grid-area: clock; display: flex; align-items: center; justify-content: center; gap: 4px;
  background: linear-gradient(#06101a, #0d1c28 60%, #03080d); border-right: 1px solid #000;
  color: #3fd9f5; text-shadow: 0 0 6px rgba(63,217,245,.6);
}
#clock-t { font: 24px "DSEG7", "Consolas", monospace; letter-spacing: 1px; }
#clock-ap { font: italic 700 13px Arial; align-self: flex-start; margin-top: 7px; }
.p1-maintabs {
  grid-area: tabs; display: flex; align-items: flex-end; justify-content: space-between;
  background: linear-gradient(#1b2835, #2e3f50 55%, #1f2b37); padding: 0 8px 0 6px;
}
.mt-list { display: flex; gap: 4px; align-items: flex-end; height: 100%; }
.mt {
  height: 34px; min-width: 104px; padding: 0 18px; border: 1px solid transparent; border-bottom: 0;
  background: none; color: #e8eef4; font-size: 15px; cursor: default; border-radius: 4px 4px 0 0;
}
.mt:hover { color: #fff; background: rgba(255,255,255,.07); }
.mt.on {
  color: #fff; background: linear-gradient(#6db3f2, #2d7fd4 50%, #1c64b3); border-color: #9cc9f5;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
}
.pq { display: flex; align-items: center; gap: 6px; align-self: center; color: #e8eef4; }
.pq-t { font-size: 12px; line-height: 13px; text-align: center; }
.pq-b {
  width: 28px; height: 28px; border-radius: 50%; border: 1px solid #9cc9f5; cursor: default;
  background: radial-gradient(circle at 40% 30%, #8cc8ff, #1a5fb4 70%); color: #fff; font-weight: 700; font-size: 15px;
}
.p1-date {
  grid-area: date; display: grid; place-items: center; background: #f7f7f7;
  border: 1px solid #b0b0b0; border-top: 0; font-size: 12px;
}
.p1-subbar { grid-area: sub; background: #f3f3f3; border-bottom: 1px solid #d0d0d0; }
.p1-waatabs {
  grid-area: waat; display: flex; justify-content: flex-end; align-items: center; gap: 0; padding: 0 6px;
  background: #f3f3f3; border-bottom: 1px solid #d0d0d0;
}
.wt {
  height: 20px; padding: 0 10px; font-size: 11px; border: 1px solid #a8a8a8; margin-left: -1px;
  background: linear-gradient(#fbfbfb, #e1e1e1); cursor: default;
}
.wt.on { background: linear-gradient(#dcdcdc, #c9c9c9); box-shadow: inset 0 1px 2px rgba(0,0,0,.2); }
.wt.hot { background: linear-gradient(#ffd27a, #f0a830); }
/* The Haz tab by the most important premise/hazard record (guide 6.11.3): white, orange, red with white text. */
.wt.hot.hot-normal { background: linear-gradient(#ffffff, #f2f2f2); color: #000; font-weight: 700; }
.wt.hot.hot-high { background: linear-gradient(#ffc56a, #f08c00); color: #000; font-weight: 700; }
.wt.hot.hot-critical { background: linear-gradient(#e82020, #b00000); color: #fff; font-weight: 700; }

.p1-left { grid-area: left; display: flex; flex-direction: column; border-right: 1px solid #8a8a8a; background: #fff; min-height: 0; }
.wa-list { flex: 1 1 auto; overflow: auto; }
.wa {
  display: flex; gap: 6px; min-height: 44px; padding: 3px 4px; border-bottom: 1px solid #b8b8b8;
  background: #e8e8e8; cursor: default;
}
.wa.on { background: #fff; }
.wa.timeout .wa-n { background: #ffd200; }
.wa-n {
  flex: none; width: 15px; height: 15px; border: 1px solid #7a7a7a; font: 700 10px Arial;
  display: grid; place-items: center; background: #fff;
}
.wa.on .wa-n { border-color: #2d7fd4; box-shadow: 0 0 0 1px #9cc9f5; }
.wa-t { min-width: 0; line-height: 14px; }
.wa-cmd { font-style: italic; color: #333; padding-left: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-sum { color: #2a6fb0; padding-left: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 11px; }
.info { flex: none; border-top: 1px solid #8a8a8a; background: #fff; }
.info-h { display: flex; gap: 6px; align-items: center; padding: 4px 6px; font-weight: 600; background: linear-gradient(#fafafa, #ececec); border-bottom: 1px solid #d0d0d0; }
.info-arrow { font-size: 10px; }
.info-g { display: grid; grid-template-columns: 34px 1fr; padding: 4px 0 6px; }
.info-l { display: flex; flex-direction: column; gap: 3px; padding-left: 8px; color: #555; font-size: 11px; }
.info-l b { margin-left: 5px; color: #000; }
.info-kv { display: grid; grid-template-columns: 58px 1fr; row-gap: 2px; font-size: 11px; }
.info-kv .k { color: #333; }
.info-kv .v { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.info-kv .v.bad { color: #c00; font-weight: 700; }
.info-kv .v.toggle { cursor: pointer; text-decoration: underline dotted; }
.info-kv .v.warn { color: #d08000; font-weight: 700; }

.p1-pwa { grid-area: pwa; overflow: auto; background: #fff; border-right: 1px solid #8a8a8a; }
.p1-waa { grid-area: waa; display: flex; flex-direction: column; min-height: 0; background: #fff; }
.waa-body { flex: 1 1 auto; overflow: auto; }
.waa-foot { flex: none; display: flex; justify-content: flex-end; padding: 5px 8px; border-top: 1px solid #d0d0d0; background: #f3f3f3; }
.pwa-empty { margin: 60px auto; text-align: center; color: #777; font-size: 13px; }

/* --- forms ------------------------------------------------------------------------------- */
.form { padding: 8px 12px 14px; display: flex; flex-direction: column; gap: 5px; user-select: text; }
.fg { border: 1px solid #d0d7de; border-radius: 4px; padding: 4px 8px 8px; margin: 2px 0 4px; display: flex; flex-direction: column; gap: 5px; }
.fg legend { padding: 0 3px; color: #222; }
.fr { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-height: 24px; }
.fl { width: 84px; flex: none; color: #111; }
.fr .fl + .fi, .fr .fl + .fs { flex: none; }
.fr > .fa { flex: 1 1 auto; width: auto; }
.fr .fl:not(:first-child) { width: auto; margin-left: 10px; }
.ftext { color: #111; }
.ftext.box { display: inline-block; min-width: 60px; height: 22px; line-height: 20px; padding: 0 4px; border: 1px solid #d5d5d5; background: #f7f7f7; }
.ftext.box.w { min-width: 110px; }
.ftext.strong, .strong { font-weight: 700; }
.type-l { color: #2a6fb0; font-style: italic; }
.fcheck { display: inline-flex; gap: 4px; align-items: center; font-size: 11px; }
.verified.on { color: #1e8e1e; font-weight: 700; }
.units-in { display: inline-flex; gap: 4px; }
.form-hint { color: #777; font-size: 11px; margin-top: 4px; }
.form-title { font-weight: 700; color: #333; margin-bottom: 4px; }
.form-acts { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; row-gap: 4px; }
.form-acts.bottom { justify-content: flex-end; border-top: 1px solid #e0e0e0; padding-top: 8px; }
.recform { display: flex; flex-direction: column; gap: 5px; }
/* 9-1-1 Caller Information on the Persons tab (guide fig. 125). */
.recform .ani-box { position: relative; }
.recform .ani-box > .btn { position: absolute; right: 8px; top: 6px; }
.ani-kv { display: grid; grid-template-columns: 92px minmax(0, 1fr) 92px minmax(0, 1fr); gap: 2px 8px; padding: 2px 0 0 18px; }
.ani-kv .k { color: #333; } .ani-kv .v { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ani-pick { display: inline-flex; align-items: center; gap: 2px; }
.iu-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.iu-num { font-size: 16px; font-weight: 700; }
.iu-time { color: #333; }
.closed-banner { color: #d00; font-weight: 800; font-size: 18px; margin: 20px 0 6px; }
.subtabs { display: flex; gap: 0; margin: -8px -12px 6px; border-bottom: 1px solid #c8c8c8; background: #f3f3f3; }
.st { border: 0; border-right: 1px solid #c8c8c8; background: none; padding: 4px 12px; cursor: default; }
.st.on { background: #fff; font-weight: 600; }
.caps { border: 1px solid #c8c8c8; margin: 4px 0; }
.caps-h { display: grid; grid-template-columns: 70px 1fr auto; padding: 3px 6px; background: #f3f3f3; border-bottom: 1px solid #d0d0d0; font-weight: 600; }
.caps-h .pref { color: #2a6fb0; font-weight: 400; text-decoration: none; cursor: pointer; }
.caps-h .pref:hover { text-decoration: underline; }
.caps-r { display: grid; grid-template-columns: 70px 1fr; align-items: center; padding: 4px 6px; border-bottom: 1px solid #e3e3e3; }
.caps-r:nth-child(odd) { background: #f4f4f4; }
.caps-c { font-weight: 700; }
.caps-u { display: flex; flex-wrap: wrap; gap: 4px; }
.caps-empty { padding: 10px; color: #777; }
.pill {
  display: inline-flex; flex-direction: column; align-items: center; min-width: 58px; padding: 2px 6px;
  border: 1px solid #9cc9f5; border-radius: 5px; background: linear-gradient(#e7f2fd, #c7def5); color: #10406f; cursor: default; line-height: 13px;
}
.pill .pill-u { font-weight: 700; }
.pill .pill-d { font-size: 10px; }
.pill.on { background: linear-gradient(#4f93d8, #1f5ea8); border-color: #164d8c; color: #fff; }
.pill.busy { background: linear-gradient(#fbe3ec, #f3c4d4); border-color: #d78aa3; color: #6b1231; }
.pill.busy.on { background: linear-gradient(#b8456d, #862549); color: #fff; }

/* --- tables (grids) ---------------------------------------------------------------------- */
.grid { width: 100%; border-collapse: collapse; font-size: 12px; }
.grid th { text-align: left; font-weight: 400; padding: 2px 6px; background: linear-gradient(#fff, #f0f0f0); border: 1px solid #d5d5d5; }
.grid td { padding: 2px 6px; border-bottom: 1px solid #ececec; }
.grid tr.sel td { background: var(--select); color: #fff; }
.grid tr:not(.hist-d):not(.prev-d):not(.cm-t):hover td { background: #e5f1fb; }
.grid tr.sel:hover td { background: var(--select); }
.grid .k { font-family: Consolas, monospace; color: #1a4f8a; white-space: nowrap; }
.grid.keys td { padding: 2px 8px; }
.close-row { margin-top: 6px; }
.close-row td { padding: 2px; }
.hist-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.hist-bar .iu-num { margin-right: auto; }
.hist-d td { padding: 2px 6px 6px 18px; border-bottom: 1px solid #d8d8d8; }
.hist-kv { display: grid; grid-template-columns: 1fr 1fr; gap: 1px 14px; color: #222; }
.hist-kv i { color: #2a6fb0; font-style: normal; }
.hist-kv .cm { grid-column: 1 / -1; }
.prev-d td { padding: 2px 6px 6px 22px; color: #333; font-size: 11px; }
.cm-t td { padding: 2px 6px 6px 16px; }
.cm-t.prio td { color: #d00; font-weight: 700; }
.prim { color: #1e8e1e; font-weight: 700; }
.assigned td { vertical-align: middle; }

/* --- the Work Assist Area ---------------------------------------------------------------- */
.waa-sec { border-bottom: 1px solid #c8d2de; }
.waa-sh {
  display: flex; gap: 6px; align-items: center; padding: 3px 8px; font-weight: 700; cursor: default;
  background: linear-gradient(#f1f4f8, #d9e0e9); border-top: 1px solid #fff;
}
.waa-sh .tri { width: 10px; font-size: 10px; }
.waa-sb { display: none; }
.waa-sec.open .waa-sb { display: block; }
.waa-empty { padding: 8px 10px; color: #777; }
.waa-empty.pad { padding: 20px; text-align: center; }
.haz { display: flex; gap: 8px; padding: 5px 8px; border-bottom: 1px solid #eee; }
.haz b { flex: none; font-size: 10px; color: #fff; background: #777; padding: 0 4px; height: 15px; }
.haz-hazard b { background: #d00; }
/* The Premise/Hazard Check (Figures 61, 62, 63, 230): critical rows red with white text, the selected one boxed. */
.haz-t .haz-x { width: 18px; text-align: center; cursor: pointer; user-select: none; }
.haz-t tr.haz-r td { vertical-align: top; }
.haz-t tr.p-critical td, .haz-t tr.haz-d.p-critical td { background: #e01818; color: #fff; }
.haz-t tr.haz-r.sel td { background: inherit; color: inherit; border-top: 2px solid #000; border-bottom: 2px solid #000; }
.haz-t tr.haz-r.p-critical.sel td { background: #e01818; color: #fff; }
.haz-t tr.haz-r.sel td:first-child { border-left: 2px solid #000; }
.haz-t tr.haz-r.sel td:last-child { border-right: 2px solid #000; }
.haz-t tr.haz-d td { padding: 3px 8px 6px 26px; line-height: 1.5; }
.haz-acts { display: flex; justify-content: space-between; gap: 6px; padding: 8px 6px; border-top: 1px solid #ddd; margin-top: 6px; }
/* The Premise Hazard Record (Figures 62, 234, 235): a pale yellow overlay in the PWA. */
.ph-rec { background: #ffffd8; border: 1px solid #c9c79a; padding: 8px 14px 10px; display: flex; flex-direction: column; gap: 4px; }
.ph-rec .ph-h { font-weight: 700; font-size: 14px; margin-bottom: 2px; }
/* Four columns, as the figures: label, value, and Status/Priority/Agency/Floor/Zip Code at the right. */
.ph-rec .fr { display: grid; grid-template-columns: 150px minmax(0, 1fr) 76px 130px; align-items: center; column-gap: 6px; min-height: 22px; }
.ph-rec .fr .fl, .ph-rec .fr .fl:not(:first-child) { width: auto; margin-left: 0; }
.ph-rec .fr > .fi, .ph-rec .fr > .fs { justify-self: start; max-width: 100%; }
.ph-rec .fl.ind { padding-left: 22px; }
.ph-rec .ftext { min-width: 0; overflow-wrap: anywhere; }
.ph-rec .p-critical { color: #c00000; font-weight: 700; }
.ph-rec .p-high { color: #b35a00; font-weight: 700; }
.ph-acts { background: #ffffd8; border: 1px solid #c9c79a; border-top: none; margin-top: 0; padding: 6px 10px; }
.ph-reswrap { border: 1px solid #b9b9b9; min-height: 220px; max-height: calc(50 * var(--vh, 1vh)); overflow: auto; }
.ph-res td { white-space: nowrap; }
.ph-new .fcheck { display: block; margin: 6px 0 2px; font-weight: 600; }
.dptch { padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; }
.dptch .kv { display: grid; grid-template-columns: 112px 1fr; }

/* --- status monitors --------------------------------------------------------------------- */
.mon-body { overflow: auto !important; background: #fff; }
.mon { border-collapse: collapse; width: 100%; font: 700 11px "Segoe UI", Arial, sans-serif; }
.mon th {
  position: sticky; top: 0; z-index: 1; text-align: left; padding: 2px 5px; font-weight: 700; white-space: nowrap;
  background: linear-gradient(#fff, #f1f1f1); border: 1px solid #d0d0d0; cursor: default;
}
.mon th.sorted { background: linear-gradient(#eaf4fd, #cfe6fb); }
.mon th.exp, .mon td.exp { width: 16px; text-align: center; color: #555; }
/* Columns move by dragging their heading (a finger too, so the browser must not pan it). */
.mon th[data-key] { touch-action: none; user-select: none; }
.mon th.col-drag { opacity: .45; }
.mon th.col-drop-before { box-shadow: inset 3px 0 0 #1e6ad6; }
.mon th.col-drop-after { box-shadow: inset -3px 0 0 #1e6ad6; }
/* A heading's right edge sizes its column; double-click it to autofit. */
.mon th[data-key] { overflow: hidden; text-overflow: ellipsis; }
.mon th .col-grip { position: absolute; top: 0; right: -1px; bottom: 0; width: 7px; cursor: col-resize; z-index: 2; }
.mon th .col-grip:hover, body.col-resizing .mon th .col-grip:hover { background: rgba(30, 106, 214, .35); }
body.col-resizing, body.col-resizing * { cursor: col-resize !important; }
.mon td.fit { max-width: none; }
.mon td { padding: 1px 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; border-bottom: 1px solid #eee; }
.mon tr { cursor: default; }
.mon tr.grp td { background: #fff; color: #000; padding-left: 8px; }
.mon tr.sel td { outline: 1px dashed #000; outline-offset: -1px; }
.mon tr.drop td { background: #cde6f7 !important; color: #000 !important; }
body.dragging .mon tr:not(.grp) { opacity: .92; }
/* incidents: coloured by priority, red once overdue (guide p.453, p.457) */
.mon .row-red td { background: #ff1010; color: #000; }
.mon .row-ring td { background: #ffb3ff; color: #000; }
.mon .row-p0 td { background: #ff6a00; color: #000; }
.mon .row-p1 td { background: #ff9d3a; color: #000; }
.mon .row-p2 td { background: #ffe400; color: #000; }
.mon .row-p3 td { background: #1f8c1f; color: #000; }
.mon .row-p4 td { background: #fff; color: #000; }
.mon .row-adp td { background: #c9c9c9; color: #8b0000; }
.mon .row-aos td { background: #3a7a78; color: #00ff3c; }
/* units: DS dark red on grey, EN blue, AS green on teal, CL/TS black (guide p.449) */
.mon .urow-ds td { background: #c3c3c3; color: #8b0000; }
.mon .urow-en td { background: #fff; color: #0000ff; }
.mon .urow-as td { background: #3a7a78; color: #00ff3c; }
.mon .urow-av td { background: #fff; color: #000; }
.mon .urow-other td { background: #fff; color: #000; }
.mon .urow-oos td { background: #fff; color: #9a9a9a; font-weight: 400; }
.mon .urow-over td { background: #ffe400; color: #000; animation: flash 1s steps(1) infinite; }
@keyframes flash { 50% { background: #fff; } }

/* --- menus, dialogs, notifications -------------------------------------------------------- */
.ctx {
  max-width: calc(calc(100 * var(--vw, 1vw)) - 4px); max-height: calc(calc(100 * var(--vh, 1vh)) - 4px); overflow-y: auto; 
  position: fixed; z-index: 100000; min-width: 220px; padding: 2px; background: #f2f2f2;
  border: 1px solid #979797; box-shadow: 2px 2px 4px rgba(0,0,0,.35);
}
.ctx-i {
  display: flex; justify-content: space-between; gap: 20px; width: 100%; text-align: left; padding: 3px 18px 3px 26px;
  border: 1px solid transparent; background: none; cursor: default; position: relative;
}
.ctx-i:hover:not(:disabled) { background: #d8e6f2; border-color: #aecff7; }
.ctx-i:disabled { color: #8c8c8c; }
.ctx-i.checked::before { content: "\2714"; position: absolute; left: 8px; }
.ctx-k { color: #555; }
.ctx-sep { height: 1px; margin: 3px 2px 3px 26px; background: #d7d7d7; }
/* A group's name in a menu (Utilities: In the CAD Client / In a New Window). */
.ctx-h { padding: 3px 10px 2px 8px; color: #555; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }

.dlg-back { position: fixed; inset: 0; z-index: 90000; background: rgba(0,0,0,.12); display: grid; place-items: center; }
.dlg { min-width: min(380px, calc(calc(100 * var(--vw, 1vw)) - 16px)); max-width: min(640px, calc(calc(100 * var(--vw, 1vw)) - 16px)); background: #fff; border: 1px solid #6d6d6d; box-shadow: 0 8px 30px rgba(0,0,0,.5); }
.dlg-title { display: flex; gap: 6px; align-items: center; height: 28px; padding: 0 8px; background: linear-gradient(#fff, #e9e9e9); border-bottom: 1px solid #c8c8c8; }
.dlg-body { padding: 14px 18px; max-height: min(calc(70 * var(--vh, 1vh)), calc(calc(100 * var(--vh, 1vh)) - 110px)); overflow: auto; user-select: text; }
.dlg-body p { margin: 0 0 8px; }
.dlg-acts { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 14px; background: #f0f0f0; border-top: 1px solid #dfdfdf; }
.dlg-acts .btn { min-width: 76px; }

.notify {
  position: fixed; left: 8px; bottom: 8px; z-index: 80000; width: 380px; background: #fff;
  border: 1px solid #6d6d6d; box-shadow: 0 4px 16px rgba(0,0,0,.45);
  max-width: calc(calc(100 * var(--vw, 1vw)) - 16px); max-height: calc(calc(100 * var(--vh, 1vh)) - 16px); overflow-y: auto;
}
.notify.offer { left: 396px; }
/* A window too narrow for the two side by side (a pop-out client sized small): the offer goes on top. */
html.lt800 .notify.offer { left: 8px; bottom: auto; top: 8px; }
.notify-t { display: flex; gap: 6px; align-items: center; height: 26px; padding: 0 8px; font-weight: 700; background: linear-gradient(#fff, #e9e9e9); border-bottom: 1px solid #c8c8c8; }
.notify-t.flash { animation: titleflash .5s steps(1) 10; }
/* The Priority Notification flashes until it is Ack'd (monitors.js): its red ring on the box,
   which is kept across the poll's redraws, and its title bar. */
.notify.unacked { animation: notifyflash 1s steps(1) infinite; }
.notify.unacked .notify-t { animation: titleflash 1s steps(1) infinite; }
@keyframes notifyflash { 50% { border-color: #ff1010; box-shadow: 0 0 0 3px #ff1010, 2px 2px 8px rgba(0,0,0,.4); } }
@keyframes titleflash { 50% { background: #ffd200; } }
.notify-b { padding: 8px 12px; display: flex; flex-direction: column; gap: 2px; }
/* Priority Notification entries (guide 7.1.3): time and transaction, then the comment or new value
   in bold red, the old value after it in parentheses. */
.pn-ent { border-top: 1px solid #ddd; margin-top: 4px; padding-top: 3px; }
.pn-when { color: #555; font-size: 11px; }
.pn-red { color: #d00000; font-weight: 700; }
html.dark .pn-red { color: #ff5a5a; } html.dark .pn-when { color: #aab; } html.dark .pn-ent { border-color: #3a3d44; }
.notify-b .strong { color: #d00; }
.notify-a { display: flex; justify-content: flex-end; gap: 8px; padding: 0 12px 10px; }

/* --- sign in ---------------------------------------------------------------------------- */
.login-back { position: fixed; inset: 0; z-index: 95000; display: grid; place-items: center; background: #fff; }
.login { width: 600px; background: #f0f0f0; border: 1px solid #8a8a8a; box-shadow: 0 6px 24px rgba(0,0,0,.35); user-select: none; }
.login-title { display: flex; justify-content: space-between; align-items: center; height: 30px; padding: 0 0 0 8px; background: #fff; }
.login-x { width: 44px; height: 30px; border: 0; background: none; font-size: 14px; }
.login-x:hover { background: #e81123; color: #fff; }
.login-top { display: grid; grid-template-columns: 150px 1fr 150px; gap: 8px; padding: 12px 12px 6px; }
.login-logo svg { width: 88px; height: 88px; margin: 16px 0 0 26px; }
.login-fields, .login-dev { display: grid; grid-template-columns: 90px 1fr; gap: 6px 6px; align-items: center; align-content: start; }
.login-dev { grid-template-columns: 76px 1fr; }
.login input, .login select { height: 22px; border: 1px solid #abadb3; background: #fff; padding: 0 4px; user-select: text; }
.login input:disabled, .login select:disabled { background: #f4f4f4; color: #666; }
.login select.req { background: var(--yellow); }
.login-mid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto 1fr; gap: 6px 12px; padding: 6px 12px; }
.login-cov { grid-column: 1; }
.login-prev { grid-column: 2; grid-row: 1 / 4; min-height: 200px; }
.login fieldset { border: 1px solid #d0d0d0; border-radius: 3px; margin: 0; padding: 4px 8px 8px; }
.login-cov label { margin-right: 6px; }
.login-tree { font-size: 11px; line-height: 17px; color: #333; }
.login-tabs { grid-column: 1; display: flex; gap: 2px; margin-top: 6px; }
.login-tabs span { padding: 3px 18px; border: 1px solid #c8c8c8; border-bottom: 0; background: #eee; }
.login-tabs span.on { background: #fff; border-top: 2px solid #f0a830; font-weight: 600; }
.login-tabbody { grid-column: 1; border: 1px solid #c8c8c8; background: #fff; padding: 8px; min-height: 120px; display: flex; gap: 6px; align-items: flex-start; }
.login-err { min-height: 18px; padding: 0 12px; color: #c00; font-weight: 600; }
.login-exp { display: flex; align-items: center; gap: 6px; padding: 2px 12px 4px; font-size: 12px; }
.login-acts { display: flex; align-items: center; gap: 8px; padding: 6px 12px 12px; }
.login-acts label { margin-left: 0; }
.login-acts select { width: 150px; margin-right: auto; }
.login-acts .btn { min-width: 86px; }

.loading { position: fixed; inset: 0; z-index: 96000; display: grid; place-items: center; background: rgba(255,255,255,.85); }
.loading-box { width: 300px; padding: 16px 20px; background: #f0f0f0; border: 1px solid #8a8a8a; box-shadow: 0 6px 24px rgba(0,0,0,.35); display: flex; flex-direction: column; gap: 8px; }
.loading-t { font-weight: 700; }
.loading-bar { height: 14px; border: 1px solid #b0b0b0; background: #fff; overflow: hidden; }
.loading-bar span { display: block; height: 100%; width: 40%; background: linear-gradient(#7fd17f, #2e9e2e); animation: load 1s linear infinite; }
@keyframes load { from { margin-left: -40%; } to { margin-left: 100%; } }
.fatal { position: fixed; inset: 20px; background: #fff; color: #c00; padding: 20px; z-index: 99999; }

/* --- ATXRP logo, coverage, roles -------------------------------------------------- */
.title-icon { width: 18px; height: 18px; vertical-align: -4px; margin-right: 4px; }
.login-top { grid-template-columns: 150px 1fr; }
.login-logo img { width: 120px; height: 120px; margin: 4px 0 0 14px; object-fit: contain; }
.loading-logo { width: 72px; height: 72px; object-fit: contain; align-self: center; }
.login-cov, .cc-left { display: flex; flex-direction: column; gap: 4px; }
.cov-groups { border: 1px solid #d0d0d0; border-radius: 3px; margin: 0; padding: 4px 8px 8px; }
.cov-row { display: flex; align-items: center; gap: 6px; }
.cov-sel { height: 22px; border: 1px solid #abadb3; background: #fff; }
.cov-tabs { display: flex; gap: 2px; margin-top: 6px; }
.cov-tabs span { padding: 3px 18px; border: 1px solid #c8c8c8; border-bottom: 0; background: #eee; cursor: default; }
.cov-tabs span.on { background: #fff; border-top: 2px solid #f0a830; font-weight: 600; }
.cov-body { border: 1px solid #c8c8c8; background: #fff; padding: 6px 8px; min-height: 150px; }
.cov-sub { display: flex; gap: 0; margin-bottom: 6px; border-bottom: 1px solid #d0d0d0; }
.cov-sub span { padding: 2px 12px; cursor: default; border: 1px solid transparent; border-bottom: 0; }
.cov-sub span.on { border-color: #d0d0d0; background: #f4f8fc; font-weight: 600; }
.cov-areas { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; }
.cov-areas label { display: flex; align-items: center; gap: 4px; }
.cov-all { grid-column: 1 / -1; font-weight: 600; border-bottom: 1px dotted #ccc; padding-bottom: 3px; }
.cov-other { color: #888; font-size: 11px; }
.cov-tree { font-size: 12px; line-height: 18px; }
.cov-tree .t1 { padding-left: 12px; font-weight: 600; }
.cov-tree .t2 { padding-left: 30px; color: #555; }
.cov-tree .t2.c { color: #000; font-weight: 600; }
.cov-tree .none { color: #999; font-weight: 400; }
.login-mid { grid-template-columns: 1.2fr 1fr; grid-template-rows: auto; }
.login-prev { grid-column: 2; grid-row: 1; min-height: 230px; }
.login-acts #l-working { margin-right: auto; }
.login-acts #l-working select { width: 230px; }
#l-role { background: var(--yellow); }
.cc { display: grid; grid-template-columns: 1.2fr 1fr; gap: 10px; min-width: 580px; }
.cc-prev { border: 1px solid #d0d0d0; border-radius: 3px; margin: 0; padding: 4px 8px; }
.cc-work { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; }
.mon tr.mon-only td { font-style: italic; opacity: .78; }
.role-note { margin: 10px 0; padding: 8px 10px; border: 1px solid #e0c060; background: #fff8d8; color: #5a4600; }

/* --- Dynamic Help, list forms, map, emergencies ------------------------------------------- */
.p1-cmd { position: relative; }
.dyn-help {
  position: absolute; left: -1px; right: -1px; top: 23px; z-index: 5000; background: #ffffe1; border: 1px solid #767676;
  box-shadow: 2px 2px 4px rgba(0,0,0,.25); padding: 3px 6px; font-size: 12px; max-height: 320px; overflow: auto;
}
.dh-row { display: flex; gap: 6px; padding: 1px 2px; cursor: default; white-space: nowrap; }
.dh-row:hover { background: #d8e6f2; }
.dh-row b { width: 26px; font-family: Consolas, monospace; color: #1a4f8a; }
.dh-row i { color: #777; font-style: normal; font-family: Consolas, monospace; font-size: 11px; }
.dh-row.np { color: #999; }
.dh-err { color: #c00; font-weight: 600; }
.dh-line { margin-bottom: 2px; }
.dh-syn { font-family: Consolas, monospace; font-size: 12px; line-height: 17px; word-break: break-all; }
.dh-id { color: #777; }
.dh-id.set { color: #000; }
.dh-id.cur { background: #1e6bc0; color: #fff; }
.grid.list td { white-space: nowrap; }
.grid tr.hl td { background: #fff27a !important; color: #000 !important; }
.grid.keys tr.np td { color: #999; }
.prev-d { display: none; }
.prev-d.open, .waa-sec .prev-d { display: table-row; }
.qform { display: grid; grid-template-columns: 1fr; gap: 6px; min-width: 380px; }
.qrow { display: grid; grid-template-columns: 120px 1fr; align-items: center; gap: 8px; }
.qrow .fa { min-height: 60px; }
.map-body { display: flex; }
/*
 * The Classic Mapping window (map.js, guide Figure 255): the map pane on the left - tabs,
 * menus and toolbar, the map with its compass and zoom bar - and the Map Assist area on the
 * right behind a splitter.
 */
.map-wrap { position: relative; display: flex; width: 100%; height: 100%; background: #d4d0c8; font: 12px "Segoe UI", Tahoma, Arial, sans-serif; }
.map-pane { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; background: #f0f0f0; border: 1px solid #8a8a8a; }
.map-tabs { display: flex; gap: 2px; padding: 3px 4px 0; background: #e4e4e4; border-bottom: 1px solid #a8a8a8; }
.map-tab { position: relative; padding: 3px 22px 3px 8px; border: 1px solid #a8a8a8; border-bottom: 0; border-radius: 3px 3px 0 0;
  background: linear-gradient(#ececec, #d8d8d8); color: #333; font: inherit; cursor: pointer; }
.map-tab::after { content: ""; position: absolute; right: 5px; top: 6px; width: 9px; height: 9px; opacity: .45;
  background: radial-gradient(circle, #777 1px, transparent 1.5px) 0 0 / 3px 3px; }
.map-tab.on { background: #fff; color: #000; margin-bottom: -1px; padding-bottom: 4px; }
.map-bar { display: flex; align-items: center; gap: 2px; padding: 3px 4px; background: #f4f4f4; border-bottom: 1px solid #c8c8c8; flex-wrap: wrap; }
.map-menu { padding: 2px 9px; border: 1px solid transparent; background: none; color: #000; font: inherit; cursor: pointer; }
.map-menu:hover { border-color: #9cb6d6; background: #e3edf9; }
.map-cad { margin-left: auto; font-weight: 700; }
.map-sep { width: 1px; height: 20px; margin: 0 4px; background: #b8b8b8; }
.map-tool { display: inline-grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 1px solid #9a9a9a; border-radius: 2px;
  background: linear-gradient(#fdfdfd, #dcdcdc); color: #111; cursor: pointer; }
.map-tool.wide { width: auto; padding: 0 6px 0 3px; grid-auto-flow: column; gap: 2px; font-weight: 700; }
.map-tool:hover { border-color: #5b87c4; background: linear-gradient(#fff, #d6e5f7); }
.map-tool.on { border-color: #2f5f9e; background: linear-gradient(#cfe0f6, #a9c6ec); box-shadow: inset 0 1px 2px rgba(0,0,0,.25); }
.map-tool svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.map-tool svg .fill { fill: currentColor; }
.map-scale { width: 92px; height: 22px; margin-left: 2px; padding: 0 4px; border: 1px solid #8a8a8a; background: #fff8b8; font: inherit; }
.map-stage { position: relative; display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.map-canvas { flex: 1 1 auto; width: 100%; min-height: 0; display: block; cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none; }
.map-canvas.dragging { cursor: grabbing; }
.map-canvas.m-pointer, .map-canvas.m-pointer.over { cursor: default; }
.map-canvas.m-zoomin { cursor: zoom-in; }
.map-canvas.m-zoomout { cursor: zoom-out; }
.map-canvas.m-info { cursor: help; }
.map-canvas.m-measure, .map-canvas.m-create { cursor: crosshair; }
.map-canvas.m-pan.over { cursor: pointer; }
/* The navigation compass and zoom level bar over the map's top left (Figures 255, 265). */
.map-nav { position: absolute; left: 30px; top: 8px; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.map-nav.hidden { display: none; }
.map-compass { display: grid; grid-template: 18px 22px 18px / 18px 22px 18px; place-items: center; }
.map-compass .cp { width: 18px; height: 18px; padding: 0; border: 0; background: #333; color: #fff; font: 700 8px Arial; cursor: pointer; }
.map-compass .cp:hover { background: #1f5fd6; }
.map-compass .cp-n { grid-area: 1 / 2; clip-path: polygon(50% 0, 100% 100%, 0 100%); padding-top: 7px; }
.map-compass .cp-s { grid-area: 3 / 2; clip-path: polygon(0 0, 100% 0, 50% 100%); padding-bottom: 7px; }
.map-compass .cp-w { grid-area: 2 / 1; clip-path: polygon(0 50%, 100% 0, 100% 100%); padding-left: 7px; }
.map-compass .cp-e { grid-area: 2 / 3; clip-path: polygon(0 0, 100% 50%, 0 100%); padding-right: 7px; }
.map-compass .cp-c { grid-area: 2 / 2; width: 20px; height: 20px; border-radius: 50%; border: 4px solid #333; background: #fff; }
.map-compass.turned .cp-c { background: #ffe400; }
.map-zbar { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.zb-pm { width: 24px; height: 24px; padding: 0; border: 1px solid #111; border-radius: 3px; background: linear-gradient(#5a5a5a, #1c1c1c);
  color: #fff; font: 700 18px/1 Arial; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,.5); }
.zb-l { width: 24px; height: 13px; padding: 0; border: 1px solid #111; background: linear-gradient(#777, #2a2a2a 50%, #555); cursor: pointer; }
.zb-l:hover { background: linear-gradient(#9cb6d6, #3a5f8f); }
.zb-l.on { background: linear-gradient(#e8f2ff, #4a8fe0 45%, #1d5fb8); border-color: #0b3d91; }
.map-tip { position: absolute; z-index: 6; display: grid; grid-template-columns: auto auto; gap: 2px 10px; padding: 6px 10px;
  background: #fff; border: 1px solid #7a7a7a; box-shadow: 2px 2px 4px rgba(0,0,0,.3); font-size: 11.5px; pointer-events: none; max-width: 360px; }
.map-tip .k { color: #8a8a8a; white-space: nowrap; }
.map-tip b { color: #000; }
.map-tip.hidden { display: none; }
/* Free Measure */
.map-measure { position: absolute; right: 10px; top: 10px; z-index: 5; min-width: 190px; padding: 0 0 6px; background: #f4f4f4; border: 1px solid #7a7a7a;
  box-shadow: 2px 2px 5px rgba(0,0,0,.3); }
.map-measure.hidden { display: none; }
.map-measure .mw-h { display: flex; align-items: center; padding: 3px 6px; background: linear-gradient(#5b87c4, #2f5f9e); color: #fff; font-weight: 700; }
.map-measure .mw-x { margin-left: auto; border: 0; background: none; color: #fff; font-size: 15px; cursor: pointer; }
.map-measure .mw-t { width: calc(100% - 12px); margin: 6px; border-collapse: collapse; background: #fff; }
.map-measure .mw-t th, .map-measure .mw-t td { padding: 1px 6px; border: 1px solid #ccc; text-align: left; }
.map-measure .mw-t th { background: #e8e8e8; font-weight: 600; }
.map-measure .mw-tot { margin: 0 6px 6px; font-weight: 700; }
.map-measure .btn { margin-left: 6px; }
/* The splitter, with its arrow (Figure 255's expander). */
.map-split { flex: none; width: 7px; padding: 0; border: 0; background: #d4d0c8; cursor: pointer; position: relative; }
.map-split::after { content: ""; position: absolute; left: 1px; top: 50%; margin-top: -6px; border: 5px solid transparent; border-left: 0; border-right-color: #666; }
.map-split:hover { background: #c4d6ee; }
.map-wrap.assist-off .ma { display: none; }
.map-wrap.assist-off .map-split::after { border-right: 0; border-left: 5px solid #666; }
/* Map Assist */
.ma { flex: none; width: 320px; display: flex; flex-direction: column; min-height: 0; overflow: auto; background: #eef3f3; border: 1px solid #8a8a8a; }
.ma-msg { display: flex; align-items: center; gap: 6px; margin: 4px; padding: 3px 6px; border: 1px solid #8a8a8a; background: #fff; font: inherit; text-align: left; cursor: pointer; }
.ma-msg-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ma-msg-a { padding-left: 6px; border-left: 1px solid #ccc; color: #444; }
.ma-sec { border-top: 1px solid #c9cfd6; }
.ma-sh { display: flex; align-items: center; gap: 7px; width: 100%; padding: 3px 8px; border: 0; background: #dfe3e8; color: #000; font: inherit; text-align: left; cursor: pointer; }
.ma-sh:hover { background: #d0d8e2; }
.ma-sec.open > .ma-sh { background: linear-gradient(#6d8fd8, #4a6fc6); color: #fff; }
.ma-tri { border: 4px solid transparent; border-left: 5px solid currentColor; border-right: 0; }
.ma-sec.open .ma-tri { border: 4px solid transparent; border-top: 5px solid currentColor; border-bottom: 0; }
.ma-grip { margin-left: auto; width: 12px; height: 12px; opacity: .45; background: radial-gradient(circle, #777 1px, transparent 1.5px) 0 0 / 4px 4px; }
.ma-sb { display: none; padding: 6px 6px 8px; background: #fff; border: 1px solid #c9cfd6; border-top: 0; margin: 0 2px 2px; }
.ma-sec.open > .ma-sb { display: block; }
.ma-tabs { display: flex; gap: 2px; border-bottom: 1px solid #a8a8a8; margin-bottom: 8px; }
.ma-tab { padding: 3px 12px; border: 1px solid #a8a8a8; border-bottom: 0; border-radius: 3px 3px 0 0; background: linear-gradient(#f6f6f6, #dedede); font: inherit; cursor: pointer; }
.ma-tab.on { background: #fff; border-top: 2px solid #f0a020; margin-bottom: -1px; }
.ma-tb.hidden { display: none; }
.ma-f { display: grid; grid-template-columns: 82px 1fr; align-items: center; gap: 6px; margin: 4px 0; }
.ma-f .fld { width: 100%; min-width: 0; }
.ma-acts { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; }
.ma-acts.end { justify-content: flex-end; }
.ma-out { white-space: pre-wrap; min-height: 18px; margin: 6px 0; font-size: 11.5px; }
.ma-scroll { max-height: 200px; overflow: auto; border: 1px solid #c8c8c8; margin-top: 6px; }
.ma-res { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.ma-res th { position: sticky; top: 0; background: linear-gradient(#fafafa, #e6e6e6); border-bottom: 1px solid #bbb; text-align: left; font-weight: 600; padding: 2px 4px; }
.ma-res td { padding: 1px 4px; border-bottom: 1px solid #eee; white-space: nowrap; cursor: default; }
.ma-res tr.sel td { background: #cde6f7; }
.ma-res .ma-none { color: #888; }
.ma-tree { padding: 4px 6px; border: 1px solid #c8c8c8; max-height: 320px; overflow: auto; }
.ma-tree-h { font-weight: 600; margin: 2px 0 4px; }
.ma-chk { display: flex; align-items: center; gap: 4px; padding: 1px 0 1px 16px; }
.ma-key { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 3px; }
.ma-key .ma-tree-h { width: 100%; }
.lk { padding: 0 4px; border: 1px solid #000; color: #000; font: 700 10.5px "Segoe UI", Arial; }
.lk.p0 { background: #ff6a00; } .lk.p1 { background: #ff9d3a; } .lk.p2 { background: #ffe400; } .lk.p3 { background: #1f8c1f; } .lk.p4 { background: #fff; }
.lk.red { background: #ff1010; } .lk.ds { background: #c3c3c3; color: #8b0000; } .lk.en { background: #fff; color: #0000ff; }
.lk.as { background: #3a7a78; color: #00ff3c; } .lk.av { background: #fff; }
.ma-hint { color: #666; font-size: 11.5px; margin-bottom: 6px; }
.ma-feat { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; font-size: 11.5px; }
.ma-feat .k { color: #777; }
/* The 3D Map tab (map3d.js): where the canvas was, the same size. */
.map3d { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; background: #a9c8de; touch-action: none; }
.map3d canvas { display: block; width: 100%; height: 100%; cursor: grab; }
.map3d-note { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); max-width: 80%; padding: 10px 16px;
  background: rgba(255,255,255,.92); border: 1px solid #999; text-align: center; font-weight: 600; }
#desktop > .map-wrap { position: fixed; inset: 0; }
.mon .urow-emg td { background: #ff1010; color: #fff; animation: flashred .6s steps(1) infinite; }
@keyframes flashred { 50% { background: #7a0000; } }
.emg-pop {
  position: fixed; z-index: 85000; width: 360px; background: #fff; border: 2px solid #d00; box-shadow: 0 6px 24px rgba(0,0,0,.55);
  max-width: calc(calc(100 * var(--vw, 1vw)) - 32px); max-height: calc(calc(100 * var(--vh, 1vh)) - 100px); overflow-y: auto;
}
.emg-t { display: flex; gap: 6px; align-items: center; height: 28px; padding: 0 8px; font-weight: 800; color: #fff; background: #c00; }
.emg-t.flash { animation: flashred .6s steps(1) infinite; }
.emg-b { padding: 8px 12px; display: flex; flex-direction: column; gap: 3px; }
.emg-b .kv { display: grid; grid-template-columns: 70px 1fr; }

/* Priority comment parts: red, only inside the angle brackets. Comments read in capitals. */
.prio-seg { color: #d00; font-weight: 700; }
.cm-t td, .hist-kv .cm, .hist-kv .hist-cm { text-transform: uppercase; }
.fi, .fa, .p1-cmd input { text-transform: uppercase; }
.fi[type=date] { text-transform: none; }

/* ============================================================================================
   Dark mode (html.dark). The status colours on the monitors and map are left alone - they
   mean something - and only the white "nothing to report" rows and the chrome turn dark.
   ============================================================================================ */
html.dark { color-scheme: dark; --field: #1b1d20; --field-edge: #5b6068; --yellow: #4a4220; --select: #2d5f9a; --focus: #4d9be6; }
html.dark body { color: #e4e6e9; background: #0d1116 linear-gradient(160deg, #0b0f14, #161d26); }
html.dark .win, html.dark .dlg, html.dark .notify, html.dark .login, html.dark .loading-box { background: #23262b; border-color: #0c0c0c; }
html.dark .win-title, html.dark .dlg-title, html.dark .notify-t, html.dark .login-title { background: linear-gradient(#34383f, #2a2d32); border-color: #15171a; color: #e4e6e9; }
html.dark .win-b:hover { background: #3d424a; }
html.dark .win-min::after, html.dark .win-max::after, html.dark .win-close::before, html.dark .win-close::after { border-color: #e4e6e9; }
html.dark .win-grip, html.dark .mb-grip { background-image: radial-gradient(#5a5f67 1px, transparent 1.2px); }
html.dark .win-body, html.dark .p1-pwa, html.dark .p1-waa, html.dark .p1-left, html.dark .info, html.dark .mon-body { background: #1b1d20; }
html.dark .p1-menubar, html.dark .p1-date, html.dark .p1-subbar, html.dark .p1-waatabs, html.dark .waa-foot, html.dark .dlg-acts { background: #26292e; border-color: #3a3e45; color: #e4e6e9; }
html.dark .p1-pwa, html.dark .p1-left { border-color: #3a3e45; }
html.dark .mb:hover { background: #33404f; border-color: #3f5670; }
html.dark .p1-cmd, html.dark .p1-status { background: #16181b; border-color: #4a4f57; }
html.dark .p1-cmd input { background: #16181b; color: #f0f2f4; }
html.dark .combo-arrow { color: #bbb; }
html.dark .wa { background: #24272c; border-color: #3a3e45; }
html.dark .wa.on { background: #30353c; }
html.dark .wa-n { background: #1b1d20; border-color: #6a6f77; color: #e4e6e9; }
html.dark .wa-cmd { color: #c2c6cc; }
html.dark .wa-sum { color: #7fb5ef; }
html.dark .info-h { background: linear-gradient(#2e3237, #26292e); border-color: #3a3e45; }
html.dark .info-l, html.dark .info-kv .k { color: #a9aeb6; }
html.dark .info-l b { color: #fff; }
html.dark .wt { background: linear-gradient(#34383f, #2a2d32); border-color: #50555d; color: #e4e6e9; }
html.dark .wt.on { background: linear-gradient(#1f2226, #26292e); }
html.dark .wt.hot { background: linear-gradient(#a8741d, #8a5c10); color: #fff; }
html.dark .wt.hot.hot-normal { background: linear-gradient(#e9ecef, #c9cdd2); color: #000; }
html.dark .wt.hot.hot-high { background: linear-gradient(#c4790f, #96580a); color: #fff; }
html.dark .wt.hot.hot-critical { background: linear-gradient(#c81414, #8e0000); color: #fff; }
html.dark .haz-t tr.haz-r.sel td { border-color: #fff; }
html.dark .haz-acts { border-color: #33373d; }
html.dark .ph-rec, html.dark .ph-acts { background: #34331f; border-color: #6a6640; }
html.dark .ph-rec .fl, html.dark .ph-rec .ftext { color: #f1efd2; }
html.dark .ph-reswrap { border-color: #50555d; }
html.dark .btn { background: linear-gradient(#3a3f46, #2e3238); border-color: #5a5f67; color: #e4e6e9; }
html.dark .btn:hover:not(:disabled) { background: linear-gradient(#3d5670, #2f465e); border-color: #4d8ad0; }
html.dark .btn:disabled { background: #26292e; border-color: #3a3e45; color: #6c7179; }
html.dark .btn.on { background: linear-gradient(#2f5f94, #24507f); border-color: #4d8ad0; }
html.dark .btn-icon.no { background: #1b1d20; border-color: #50555d; }
html.dark .fi, html.dark .fs, html.dark .fa { color: #f0f2f4; }
html.dark .fi[readonly], html.dark .ftext.box { background: #24272c; border-color: #3f434a; color: #e4e6e9; }
html.dark .fi.req, html.dark .fs.req, html.dark .fa.yellow, html.dark #l-role, html.dark .login select.req { background: var(--yellow); color: #fff5c8; }
html.dark .fg, html.dark .cov-groups, html.dark .login fieldset, html.dark .cc-prev { border-color: #3f434a; }
html.dark .fg legend, html.dark .fl, html.dark .ftext, html.dark .iu-time, html.dark .form-title { color: #e4e6e9; }
html.dark .type-l { color: #7fb5ef; }
html.dark .form-hint, html.dark .pwa-empty, html.dark .waa-empty { color: #8d939b; }
html.dark .form-acts.bottom { border-color: #3a3e45; }
html.dark .subtabs { background: #26292e; border-color: #3a3e45; }
html.dark .st { border-color: #3a3e45; color: #e4e6e9; }
html.dark .st.on { background: #1b1d20; }
html.dark .caps, html.dark .caps-r { border-color: #3a3e45; }
html.dark .caps-h { background: #26292e; border-color: #3a3e45; }
html.dark .caps-r:nth-child(odd) { background: #202327; }
html.dark .pill { background: linear-gradient(#2b4a6b, #203a57); border-color: #3f6d9c; color: #d8e8f8; }
html.dark .pill.busy { background: linear-gradient(#5a2638, #461c2b); border-color: #8a4460; color: #f5d3de; }
html.dark .grid th { background: linear-gradient(#2e3237, #272a2f); border-color: #3f434a; color: #e4e6e9; }
html.dark .grid td { border-color: #2e3237; }
html.dark .grid tr:not(.hist-d):not(.prev-d):not(.cm-t):hover td { background: #2a3440; }
html.dark .hist-d td, html.dark .prev-d td { border-color: #33373d; color: #c9cdd2; }
html.dark .hist-kv, html.dark .hist-kv i { color: #c9cdd2; }
html.dark .waa-sec { border-color: #33373d; }
html.dark .waa-sh { background: linear-gradient(#2e3540, #262c35); border-color: #3a404a; color: #e4e6e9; }
html.dark .haz { border-color: #2e3237; }
html.dark .role-note { background: #3a321a; border-color: #6b5a24; color: #f1dc9a; }
html.dark .prio-seg { color: #ff5a5a; }
/* monitors: headers and the plain rows */
html.dark .mon th { background: linear-gradient(#2e3237, #272a2f); border-color: #3f434a; color: #e4e6e9; }
html.dark .mon th.sorted { background: linear-gradient(#2f4a66, #26405a); }
html.dark .mon td { border-color: #2a2d31; }
html.dark .mon th.exp, html.dark .mon td.exp { color: #9aa0a8; }
html.dark .mon tr.grp td { background: #202327; color: #e4e6e9; }
html.dark .mon tr.sel td { outline-color: #fff; }
html.dark .mon .row-p4 td, html.dark .mon .urow-av td, html.dark .mon .urow-other td { background: #1b1d20; color: #e4e6e9; }
html.dark .mon .urow-en td { background: #1b1d20; color: #6f9bff; }
html.dark .mon .urow-oos td { background: #1b1d20; color: #6c7179; }
/* menus, dynamic help, notifications, pop-ups */
html.dark .ctx { background: #2a2d32; border-color: #50555d; box-shadow: 2px 2px 6px rgba(0,0,0,.6); }
html.dark .ctx-i { color: #e4e6e9; }
html.dark .ctx-i:hover:not(:disabled) { background: #33404f; border-color: #3f5670; }
html.dark .ctx-i:disabled { color: #6c7179; }
html.dark .ctx-sep { background: #3f434a; }
html.dark .ctx-h { color: #9aa0a8; }
html.dark .ctx-k { color: #9aa0a8; }
html.dark .dyn-help { background: #2c2a1c; border-color: #6b6440; color: #f0ecd0; }
html.dark .dh-row:hover { background: #3a3726; }
html.dark .dh-row b { color: #8cc0f5; }
html.dark .dh-id { color: #9b9679; }
html.dark .dh-id.set { color: #fff; }
html.dark .notify-b, html.dark .emg-b { color: #e4e6e9; }
html.dark .emg-pop { background: #23262b; }
html.dark .dlg-back { background: rgba(0,0,0,.35); }
/* map chrome */
html.dark .map-wrap { background: #23262b; }
html.dark .map-tabs { background: #26292e; border-color: #3a3e45; }
html.dark .map-tab { background: #16181b; border-color: #3a3e45; color: #a9aeb6; }
html.dark .map-tab.on { background: #2a2d32; color: #e4e6e9; }
html.dark .map3d { background: #10161d; }
html.dark .map3d-note { background: rgba(35,38,43,.95); border-color: #50555d; color: #e4e6e9; }
html.dark .map-bar { background: #26292e; border-color: #3a3e45; }
html.dark .map-pane, html.dark .ma { background: #23262b; border-color: #3a3e45; }
html.dark .map-wrap { background: #16181b; }
html.dark .map-menu { color: #e4e6e9; }
html.dark .map-menu:hover { background: #2f3b4c; border-color: #4a6588; }
html.dark .map-tool { background: linear-gradient(#3a3e45, #2a2d32); border-color: #50555d; color: #e4e6e9; }
html.dark .map-tool.on { background: linear-gradient(#2f4a6e, #233a59); border-color: #6f9bff; }
html.dark .map-scale { background: #3a3620; border-color: #6b6440; color: #f0ecd0; }
html.dark .map-sep { background: #50555d; }
html.dark .map-split { background: #1b1d20; }
html.dark .map-compass .cp { background: #6c7380; }
html.dark .map-compass .cp-c { border-color: #6c7380; background: #1b1d20; }
html.dark .map-compass.turned .cp-c { background: #c9a800; }
html.dark .map-tip { background: #1b1d20; border-color: #50555d; }
html.dark .map-tip b { color: #f0f2f4; }
html.dark .map-measure { background: #23262b; border-color: #50555d; color: #e4e6e9; }
html.dark .map-measure .mw-t { background: #1b1d20; }
html.dark .map-measure .mw-t th { background: #2a2d32; }
html.dark .map-measure .mw-t th, html.dark .map-measure .mw-t td { border-color: #3f434a; }
html.dark .ma-msg { background: #1b1d20; border-color: #50555d; color: #e4e6e9; }
html.dark .ma-sec { border-color: #3a3e45; }
html.dark .ma-sh { background: #2a2d32; color: #e4e6e9; }
html.dark .ma-sh:hover { background: #333740; }
html.dark .ma-sb { background: #1b1d20; border-color: #3a3e45; color: #e4e6e9; }
html.dark .ma-tab { background: #2a2d32; border-color: #50555d; color: #c9cdd2; }
html.dark .ma-tab.on { background: #1b1d20; color: #fff; }
html.dark .ma-tabs, html.dark .ma-scroll, html.dark .ma-tree { border-color: #3f434a; }
html.dark .ma-res th { background: #2a2d32; border-color: #3f434a; }
html.dark .ma-res td { border-color: #2a2d32; }
html.dark .ma-res tr.sel td { background: #26303b; }
html.dark .ma-hint, html.dark .ma-feat .k { color: #9aa0a8; }
/* sign-on */
html.dark .login-back, html.dark .loading { background: #0d1116; }
html.dark .login input, html.dark .login select, html.dark .cov-sel { background: #1b1d20; border-color: #5b6068; color: #f0f2f4; }
html.dark .login input:disabled, html.dark .login select:disabled { background: #26292e; color: #8d939b; }
html.dark .cov-body, html.dark .login-tabbody { background: #1b1d20; border-color: #3f434a; }
html.dark .cov-tabs span, html.dark .login-tabs span { background: #2a2d32; border-color: #3f434a; color: #e4e6e9; }
html.dark .cov-tabs span.on, html.dark .login-tabs span.on { background: #1b1d20; }
html.dark .cov-sub { border-color: #3f434a; }
html.dark .cov-sub span.on { background: #26303b; border-color: #3f434a; }
html.dark .cov-tree .t2 { color: #9aa0a8; }
html.dark .cov-tree .t2.c { color: #fff; }
html.dark .loading-bar { background: #1b1d20; border-color: #3f434a; }

/* map zones legend */
.map-zonekey { position: absolute; left: 8px; bottom: 34px; z-index: 4; display: flex; flex-direction: column; gap: 2px;
  padding: 5px 8px; background: rgba(255,255,255,.9); border: 1px solid #888; font: 700 11px "Segoe UI", Arial; }
.map-zonekey .zk { display: flex; align-items: center; gap: 6px; }
.map-zonekey i { width: 14px; height: 10px; border: 1px solid rgba(0,0,0,.4); opacity: .75; }
html.dark .map-zonekey { background: rgba(35,38,43,.92); border-color: #50555d; color: #e4e6e9; }

/* --- Ready Reference (RR) --------------------------------------------------------------- */
.rr-kv { display: grid; grid-template-columns: 96px 1fr; gap: 8px; padding: 5px 0; align-items: start; }
.rr-kv b { font-weight: 400; color: #333; }
.rr-att { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.rr-att a { color: #1a5fb4; }
.rr-att img { max-width: 100%; max-height: 460px; border: 1px solid #b8b8b8; background: #fff; cursor: zoom-in; }
.rr-crit { padding: 6px 8px; display: grid; gap: 4px; }
.rr-crit .fr { display: grid; grid-template-columns: 72px 1fr; align-items: center; }
.form-hint.pad { padding: 6px 10px; }
/* The ANI/ALI a phone call filled the form with (Source, Class, ESN, line). */
.form-hint.ani-line { color: #1f5fa8; font-weight: 600; }
html.dark .form-hint.ani-line { color: #7fb2ec; }
html.dark .rr-kv b { color: #c5c9cf; }
html.dark .rr-att a { color: #8cb8ef; }
html.dark .rr-att img { border-color: #4a4f57; }
/* The entry's buttons stay in view below a tall map, as PremierOne's PWA button bar does. */
.rr-acts { position: sticky; bottom: 0; background: #fff; padding-bottom: 6px; z-index: 1; }
html.dark .rr-acts { background: #1b1d20; }

/* --- A closed incident, read only (IH / IU / IR) ------------------------------------------ */
.ro-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; padding-bottom: 6px; border-bottom: 1px solid #e0e0e0; }
.ro-bar .closed-banner { margin: 0; }
.ro-note { color: #555; margin-right: auto; }
.ro-grid { display: grid; grid-template-columns: 96px 1fr 96px 1fr; gap: 3px 10px; }
.ro-grid b { font-weight: 400; color: #555; }
.ro-grid span { min-height: 16px; }
.ro-text { white-space: pre-wrap; }
html.dark .ro-bar { border-color: #3a3e45; }
html.dark .ro-note, html.dark .ro-grid b { color: #a9aeb6; }

/* --- the radio panel: Elite Dispatch framed (radiowin.js) --------------------------------- */
.win-body.radio-body { padding: 0; overflow: hidden; }
.radio-frame { display: block; width: 100%; height: 100%; border: 0; background: #f0f0f0; }

/*
 * Touchscreens. The map and the window frame take touch themselves (map.js, ui.js); these make
 * the browser leave those gestures alone and make the controls big enough for a finger. Only on
 * a coarse pointer, so the mouse layout is unchanged.
 */
.win-title, .win-rs { touch-action: none; }
@media (pointer: coarse) {
  .map-bar { gap: 6px; padding: 5px 8px; }
  .map-tool { width: 38px; height: 36px; }
  .map-menu { min-height: 36px; padding: 0 12px; font-size: 15px; }
  .map-scale { height: 34px; }
  .zb-pm { width: 34px; height: 34px; }
  .zb-l { width: 34px; height: 16px; }
  .map-compass { grid-template: 26px 30px 26px / 26px 30px 26px; }
  .map-compass .cp { width: 26px; height: 26px; }
  .map-split { width: 18px; }
  .ma-chk input, .ma-res input { width: 20px; height: 20px; }
  .map-tip { font-size: 13px; padding: 5px 8px; }
  .win-b { min-width: 34px; min-height: 28px; }
  .win-rs { width: 26px; height: 26px; }
  .ctx-i { min-height: 38px; font-size: 14px; }
}

/*
 * PremierOne's combo box (forms.js combo): the field with its square arrow button, and the list
 * it drops - code, description and (for incident types) the agency, the current one highlighted.
 */
.combo { display: inline-flex; align-items: stretch; flex: none; }
.combo .combo-in { border-right: 0; }
.combo-btn {
  width: 18px; height: 22px; padding: 0; border: 1px solid var(--field-edge); border-radius: 0;
  background: linear-gradient(#fdfdfd, #e3e3e3); cursor: pointer; position: relative;
}
.combo-btn::after {
  content: ""; position: absolute; left: 5px; top: 9px;
  border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid #333;
}
.combo.dis .combo-btn { cursor: default; opacity: .55; }
.combo-list {
  position: fixed; z-index: 3000; overflow-y: auto; background: #fff; border: 1px solid #767676;
  box-shadow: 2px 3px 8px rgba(0, 0, 0, .25); font-size: 12px; user-select: none;
}
.combo-row { display: flex; gap: 10px; padding: 2px 6px; white-space: nowrap; cursor: default; }
.combo-row .cc { flex: none; min-width: 64px; font-weight: 600; }
.combo-row .cl { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; }
.combo-row .ct { flex: none; color: #777; font-size: 11px; }
.combo-row:hover { background: #e5f1fb; }
.combo-row.hi { background: var(--select); color: #fff; }
.combo-row.hi .ct { color: #dfe9f6; }
html.dark .combo-btn { background: linear-gradient(#3a3e45, #2c2f35); border-color: #4a4f57; }
html.dark .combo-btn::after { border-top-color: #d6d9de; }
html.dark .combo-list { background: #23262b; border-color: #4a4f57; color: #e4e6e9; }
html.dark .combo-row:hover { background: #2f3540; }
html.dark .combo-row .ct { color: #9aa0a8; }
@media (pointer: coarse) {
  .combo-btn { width: 30px; }
  .combo-row { padding: 8px 10px; font-size: 14px; }
}

/* Alerting List (TN): the radio channels an alert goes out on. */
.alert-list { display: flex; gap: 10px; flex-wrap: wrap; min-width: 320px; }
.alert-zone { border: 1px solid var(--edge); padding: 4px 10px 6px; min-width: 140px; }
.alert-zone legend { padding: 0 4px; font-weight: 700; }
.alert-ch { display: flex; align-items: center; gap: 6px; padding: 2px 0; cursor: pointer; }
.alert-ch input:disabled + .alert-id { opacity: .7; }
.alert-id { display: inline-block; min-width: 1.4em; text-align: right; opacity: .75; }
.alert-note { opacity: .6; font-size: 90%; }
.alert-say { max-width: 520px; font-style: italic; }
.alert-warn { color: #b06a00; }
.btn.chans { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Queries (QY) and Query Responses (VQ): the response, formatted as PremierOne lays it out (rformat.js) */
.qr-tabs { display: flex; gap: 2px; margin-bottom: 6px; }
.qr-tabs .btn.on { background: #fff; border-bottom-color: #fff; font-weight: 600; }
.qr-out { border: 1px solid #c9c9c9; background: #fff; padding: 6px 8px; min-height: 220px; max-height: calc(calc(100 * var(--vh, 1vh)) - 330px); overflow: auto; }
.qr-err { color: #b00; font-weight: 600; }
.qr-raw { margin: 0; font: 12px Consolas, monospace; white-space: pre-wrap; }
td.qr-hot { color: #d11; font-weight: 700; text-align: center; }
.qr-out .qhead { margin: 0 0 8px; padding: 4px 10px 8px; border: 1px solid #c3c7cf; display: grid; grid-template-columns: 1fr 1fr; gap: 3px 20px; }
.qr-out .qhead legend { padding: 0 4px; }
.qr-out .qh { display: grid; grid-template-columns: 76px 1fr; }
.qr-out .qh b { font-weight: 400; color: #555; }
.qr-out .qh span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qr-out .rec { margin: 0 0 10px; }
.qr-out .rec-h { font-weight: 600; margin: 6px 0 4px; color: #1f5fa8; }
.qr-out .krow { display: grid; grid-template-columns: 160px 1fr; padding: 2px 0; border-bottom: 1px dotted #e3e3e3; }
.qr-out .krow span:first-child { color: #555; }
.qr-out .hothit { margin: 2px 0 8px; padding: 5px 10px; background: #fde8e8; border: 1px solid #e38b8b; color: #9b1111; font-weight: 600; }
.qr-out .hothit::before { content: "\25B2  "; color: #d11; }
.qr-out table.rtable { border-collapse: collapse; width: 100%; }
.qr-out .rtable th { text-align: left; font-weight: 400; background: #f1f2f4; border: 1px solid #d4d6db; padding: 2px 8px; }
.qr-out .rtable td { border-bottom: 1px solid #e6e7ea; padding: 2px 8px; }
.qr-out .link { color: #1a3f9a; text-decoration: underline; cursor: pointer; }
.qr-out .chips { display: inline-flex; gap: 3px; }
.qr-out .chip b { display: inline-block; min-width: 26px; padding: 1px 4px; font-size: 11px; text-align: center; color: #fff; }
.qr-out .chip.red b { background: #e41b1b; }
.qr-out .chip.yellow b { background: #ffe800; color: #111; }
.qr-out .chip.orange b { background: #f08a00; }
.qr-out .chip.grey b { background: #787878; }
.qr-out .chip.black b { background: #111; }
html.dark .qr-out { background: #1b1d20; border-color: #3c4148; }
html.dark .qr-tabs .btn.on { background: #1b1d20; border-bottom-color: #1b1d20; }
html.dark .qr-out .qhead { border-color: #4a5058; }
html.dark .qr-out .qh b, html.dark .qr-out .krow span:first-child { color: #aab0b8; }
html.dark .qr-out .rec-h, html.dark .qr-out .link { color: #7fb6e8; }
html.dark .qr-out .krow { border-bottom-color: #30353c; }
html.dark .qr-out .hothit { background: #45201f; border-color: #8b3a3a; color: #ffb4b4; }
html.dark .qr-out .rtable th { background: #262a31; border-color: #3c4148; }
html.dark .qr-out .rtable td { border-bottom-color: #30353c; }
html.dark .qr-err { color: #ff8a8a; }

/* Traffic camera window (camwin.js) */
.cam-wrap { display: flex; flex-direction: column; height: 100%; background: #000; }
.cam-bar { display: flex; align-items: center; gap: 10px; padding: 4px 8px; background: #e8e8e8; border-bottom: 1px solid #b8b8b8; }
.cam-pick { height: 24px; font: inherit; }
.cam-where { color: #444; font-size: 12px; }
.cam-img { flex: 1 1 auto; min-height: 0; width: 100%; object-fit: contain; background: #000; }
.cam-status { padding: 3px 8px; background: #111; color: #bbb; font: 600 12px Consolas, monospace; }
.cam-status.live { color: #4cd07a; }
.cam-status.stale { color: #ff8a65; }
html.dark .cam-bar { background: #26292e; border-color: #3a3e45; }
html.dark .cam-where { color: #a9aeb6; }
/* The camera window, reconstructed (camwin.js): scene on the left, what is in view on the right. */
.cam2 { display: flex; flex-direction: column; height: 100%; background: #101317; }
.cam-tabs { margin-left: auto; display: flex; gap: 2px; }
.cam-tab { padding: 2px 12px; border: 1px solid #a8a8a8; background: linear-gradient(#f6f6f6, #dedede); font: inherit; cursor: pointer; }
.cam-tab.on { background: #fff; border-color: #2f5f9e; font-weight: 700; }
.cam2-body { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 1fr 290px; }
.cam2-scene { position: relative; min-height: 0; }
.cam2-scene .mm-canvas { width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
.cam2-still { position: absolute; inset: 0; width: 100%; height: 100%; display: block; background: #000; }
.cam2-still.hidden, .cam2-note.hidden { display: none; }
.cam2-note { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); max-width: 70%; padding: 12px 16px;
  background: rgba(16,19,23,.92); border: 1px solid #50555d; color: #e4e6e9; text-align: center; line-height: 1.4; }
.cam-bar .cam-tabs + .cam-tabs { margin-left: 8px; }
/* The camera grid (camgrid.js): the map of every camera on the left, a tile per camera on the right. */
.cgrid { display: grid; grid-template-columns: minmax(280px, 38%) 1fr; height: 100%; background: #101317; }
.cgrid-map { position: relative; min-height: 0; border-right: 1px solid #2a2f36; }
.cgrid-map .mm-canvas { width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
.cgrid-right { display: flex; flex-direction: column; min-height: 0; }
.cgrid-head { display: flex; align-items: center; gap: 12px; padding: 6px 10px; color: #c9cdd2; font: 600 12px Segoe UI, Arial; border-bottom: 1px solid #2a2f36; }
.cgrid-headtext { flex: 1; min-width: 0; }
.cgrid-toggles { display: flex; gap: 14px; font-weight: 400; }
.cgrid-tg { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
@media (pointer: coarse) { .cgrid-tg input { width: 20px; height: 20px; } .cgrid-toggles { gap: 18px; } }
.cgrid-tiles { flex: 1; overflow: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; padding: 8px; align-content: start; }
.cgrid-tile { background: #1a1e24; border: 2px solid #2a2f36; cursor: pointer; display: flex; flex-direction: column; }
.cgrid-tile:hover { border-color: #4a6fc6; }
.cgrid-tile.live { border-color: #2e9d4a; }
.cgrid-tile.alarm { border-color: #ff3030; animation: cgridflash 1s steps(1) infinite; }
@keyframes cgridflash { 50% { border-color: #7a0000; } }
.cgrid-pic { width: 100%; aspect-ratio: 16 / 9; display: block; background: #0b0d10; }
.cgrid-cap { display: flex; align-items: center; gap: 8px; padding: 4px 8px 0; color: #e4e6e9; font-size: 12px; }
.cgrid-cap b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cgrid-status { color: #4cd07a; font: 700 11px Consolas, monospace; }
.cgrid-what { padding: 2px 8px 6px; color: #9aa0a8; font-size: 11.5px; }
.cgrid-empty { padding: 20px; color: #9aa0a8; }
.cam2-side { min-height: 0; overflow: auto; background: #f4f4f4; border-left: 1px solid #8a8a8a; font-size: 12px; }
.cam2-h { padding: 5px 8px; font-weight: 700; background: #dfe3e8; border-bottom: 1px solid #c9cfd6; position: sticky; top: 0; }
.cam2-row { display: grid; grid-template-columns: 14px auto 1fr; gap: 2px 6px; align-items: center; padding: 5px 8px; border-bottom: 1px solid #e2e2e2; cursor: pointer; }
.cam2-row.rec { grid-template-columns: auto 1fr; }
.cam2-row:hover { background: #e3edf9; }
.cam2-row.on { background: #cde6f7; }
.cam2-row .cam2-mute { grid-column: 2 / -1; color: #666; font-size: 11px; }
.cam2-row.rec .cam2-mute { grid-column: 1 / -1; }
.cam2-sw { width: 12px; height: 12px; border: 1px solid #333; }
.cam2-sw.round { border-radius: 50%; }
.cam2-run { grid-column: 2 / -1; justify-self: start; padding: 1px 8px; font-size: 11px; }
.cam2-empty { padding: 10px 8px; color: #777; }
.cam2-outfit { font-size: 10.5px; }
.cam2-ev { display: grid; grid-template-columns: auto 1fr; gap: 6px; padding: 4px 8px; border-bottom: 1px solid #e2e2e2; font-size: 12px; cursor: pointer; }
.cam2-ev:hover { background: #e3edf9; }
.cam2-ev.ev-hit { color: #b31010; }
.cam2-ev.ev-fatal { color: #fff; background: #b31010; font-weight: 700; }
.cam2-ev.ev-fatal .cam2-mute { color: #ffd0d0; }
.cam2-ev.ev-now { outline: 2px solid #ffd600; outline-offset: -2px; }
html.dark .cam2-ev { border-color: #2a2d32; }
html.dark .cam2-ev.ev-hit { color: #ff8a8a; }
html.dark .cam2-ev:hover { background: #26303b; }
.cam2-recs.hidden, .cam2-timeline.hidden { display: none; }
.cam2-recs { border-bottom: 2px solid #b8b8b8; max-height: 45%; overflow: auto; }
.cam2-timeline { display: flex; align-items: center; gap: 8px; padding: 4px 8px; background: #1c2026; color: #ddd; }
.cam2-slider { flex: 1; }
.cam2-clock { font: 600 12px Consolas, monospace; min-width: 90px; text-align: right; }
.cam-status.wait { color: #c9cdd2; }
html.dark .cam2-side { background: #1b1d20; border-color: #3a3e45; color: #e4e6e9; }
html.dark .cam2-h { background: #2a2d32; border-color: #3a3e45; }
html.dark .cam2-row { border-color: #2a2d32; }
html.dark .cam2-row:hover { background: #26303b; }
html.dark .cam2-row.on { background: #2f4a6e; }
html.dark .cam2-row .cam2-mute, html.dark .cam2-empty { color: #9aa0a8; }
html.dark .cam-tab { background: #2a2d32; border-color: #50555d; color: #c9cdd2; }
html.dark .cam-tab.on { background: #1b1d20; border-color: #6f9bff; color: #fff; }
@media (pointer: coarse) {
  .cam2-row { padding: 9px 10px; }
  .cam-tab { padding: 8px 14px; }
  .cam2-timeline .btn { min-width: 44px; min-height: 36px; }
}

/* --- the experimental pop-out UI (popout.js) --------------------------------------------- */
/* A window that is the whole page: its browser window is the frame. */
.win.fill { position: fixed; inset: 0; width: auto !important; height: auto !important; border: 0; box-shadow: none; }
/* The client's pop-out window keeps one shape (popout.js STAGE): laid out at --stage-w x --stage-h,
   zoomed to fit the browser window, centred on a dark desk - as the training CAD's locked client. */
html.stage, html.stage body { background: #1b1f26; }
html.stage .win.fill { inset: auto; left: 50%; top: 50%; width: var(--stage-w) !important; height: var(--stage-h) !important;
  margin: calc(var(--stage-h) / -2) 0 0 calc(var(--stage-w) / -2); box-shadow: 0 0 0 1px #000; overflow: hidden; }

/* The window status page (hub.js): the tab signed in on. */
body.hub-page { overflow: auto; }
body.hub-page #desktop { position: static; overflow: visible; }
.hub { max-width: 900px; margin: 24px auto; padding: 0 16px; }
.hub-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; background: var(--chrome); border: 1px solid #b9b9b9; }
.hub-brand { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; }
.hub-brand img { grid-row: span 2; height: 44px; }
.hub-t { font-size: 18px; font-weight: 700; }
.hub-s { color: #555; }
.hub-who { color: #333; }
.hub-note { margin: 12px 0; padding: 8px 14px; background: #fff; border: 1px solid #c9c9c9; }
.hub-note p { margin: 6px 0; }
.hub-warn { margin: 0 0 12px; padding: 8px 14px; background: #fff3cd; border: 1px solid #d9b44a; }
.hub-bar { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.hub-gap { flex: 1; }
.hub-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid #c9c9c9; }
.hub-table th { text-align: left; padding: 6px 10px; background: #e8e8e8; border-bottom: 1px solid #c9c9c9; }
.hub-table td { padding: 6px 10px; border-bottom: 1px solid #e3e3e3; }
.hub-table tr.on .hub-name { font-weight: 600; }
.hub-opt { margin-left: 8px; font-size: 11px; color: #777; font-weight: 400; }
.hub-acts { text-align: right; white-space: nowrap; }
.hub-acts .btn { min-width: 80px; margin-left: 6px; }
.hub-size { color: #555; font-variant-numeric: tabular-nums; }
.hub-scale { white-space: nowrap; }
.hub-sv { min-width: 150px; height: 24px; font: inherit; font-variant-numeric: tabular-nums; }
.hub-dot { display: inline-block; width: 10px; height: 10px; margin-right: 8px; border-radius: 50%; background: #aaa; vertical-align: -1px; }
.hub-dot.on { background: #1f9d3a; }
.hub-dot.lost { background: #d9822b; }
html.dark .hub-head { background: #23262b; border-color: #0c0c0c; }
html.dark .hub-note, html.dark .hub-table { background: #1b1d20; border-color: #3a3e45; }
html.dark .hub-table th { background: #2a2d32; border-color: #3a3e45; }
html.dark .hub-table td { border-color: #30343a; }
html.dark .hub-s, html.dark .hub-who, html.dark .hub-size, html.dark .hub-opt { color: #aab0b8; }
html.dark .hub-warn { background: #45391a; border-color: #8a6f2a; color: #f0d58a; }
html.dark .ani-kv .k { color: #b9bdc3; }
/* A label too long for the label column (State/Fed Entry #) runs on rather than wrapping. */
.fr .fl.fl-wide { width: auto; white-space: nowrap; }
/* Incident Management Summary (guide fig. 107): the Comments label with its two check boxes under
   it, the clear button on the close row, and the jurisdiction table at the foot. */
.cm-label { width: 84px; flex: none; display: flex; flex-direction: column; gap: 3px; align-self: flex-start; }
.cm-label .fl { width: auto; }
.cm-label .fcheck { font-size: 10.5px; line-height: 1.15; }
.ftext.box.city { min-width: 180px; }
.close-row td:last-child { width: 24px; }
.grid.jur { margin-top: 6px; width: 100%; }
/* Dispatch tab (guide fig. 206/210/120): "Press Request", the unit + capability boxes under the
   recommendation, the primary's arrow, and the WAA Dispatch Summary's groups and Map It. */
.caps-empty.req { font-style: italic; font-weight: 700; color: #222; text-align: center; padding: 14px; }
.caps-man { display: flex; gap: 14px; flex-wrap: wrap; padding: 6px; border-top: 1px solid #e3e3e3; }
.man-pair { display: inline-flex; gap: 2px; }
.prim-arrow { color: #1e8e1e; font-size: 11px; }
.assigned td > div + div { color: #555; }
.dptch { position: relative; }
.dptch .dptch-map { position: absolute; right: 10px; top: 8px; }
.dptch-g { display: flex; flex-direction: column; gap: 3px; padding: 4px 0; border-bottom: 1px solid #ddd; }
.dptch-g:last-child { border-bottom: 0; }
html.dark .dptch-g { border-color: #3a3e45; }
html.dark .caps-empty.req { color: #e4e6e9; }
.fr .fl.dp-l { min-width: 112px; }
/* History tab (guide fig. 156-159): what happened on a line of its own, labelled pairs in blue
   two to a row, priority comments in red, the picked transaction highlighted; Print shows only the
   history; the Orphan window's list and Transaction Display. */
.hist-kv .hist-what, .hist-kv .hist-cm { grid-column: 1 / -1; }
.hist tr.hist-h td { font-weight: 600; }
.hist tr.hist-h.sel td { background: #3d7fd6; color: #fff; }
.hist tr.prio td, .hist tr.prio .hist-kv { color: #d00000; }
.hist-filter { display: inline-flex; align-items: center; gap: 6px; }
.hist-filter .fl { width: auto; }
.hist-acts { align-items: center; }
.hist-gap { flex: 1; }
.hist-print { display: none; }
@media print {
  body.printing-hist > *:not(.hist-print) { display: none !important; }
  body.printing-hist .hist-print { display: block; font: 11px "Segoe UI", Arial, sans-serif; color: #000; }
  body.printing-hist .hist-print table { width: 100%; border-collapse: collapse; }
}
.win-body.orphan { display: flex; flex-direction: column; padding: 8px; gap: 6px; background: #fff; }
.orph-top { display: flex; align-items: center; gap: 8px; }
.orph-top .orph-where { margin-right: auto; font-weight: 600; }
.orph-top .fl { width: auto; }
.orph-split { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border: 1px solid #c8c8c8; }
.orph-list { overflow: auto; border-right: 1px solid #c8c8c8; }
.orph-row { display: grid; grid-template-columns: minmax(0, 1fr) 90px 80px; gap: 6px; padding: 3px 8px; cursor: default; }
.orph-row:hover { background: #e5f1fb; }
.orph-row.sel { background: #3d7fd6; color: #fff; }
.orph-row span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.orph-show { overflow: auto; padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; }
.orph-show .orph-h { font-weight: 700; font-size: 13px; text-align: center; }
html.dark .win-body.orphan { background: #1b1d20; }
html.dark .orph-split, html.dark .orph-list { border-color: #3a3e45; }
html.dark .hist-kv i { color: #7fb3ec; }
/* Associated incidents (guide fig. 101/116): the Recommended dialog's heading and grid, the
   Assoc tab's own row, its buttons, and the group's history. */
.ra-box { min-width: 0; }
.dlg:has(.ra-box), .dlg:has(.ah-box) { max-width: min(980px, calc(calc(100 * var(--vw, 1vw)) - 16px)); width: auto; }
.dlg:has(.ra-box) .dlg-body { overflow-x: visible; }
.ra-head { display: grid; grid-template-columns: auto 1fr auto 1fr auto 1fr; gap: 4px 8px; margin-bottom: 10px; }
.ra-head b { font-weight: 600; }
.ra-sub { font-weight: 700; margin: 4px 0; }
.grid.ra { width: 100%; }
.grid.assoc tr.self td { font-weight: 700; }
.grid.assoc td.ex { width: 18px; text-align: center; cursor: pointer; color: #555; }
.assoc-acts { display: flex; gap: 6px; justify-content: flex-end; padding: 6px; border-top: 1px solid #ddd; }
.ah-box { width: min(860px, calc(86 * var(--vw, 1vw))); }
.ah-bar { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.ah-bar .fl { width: auto; }
.ah-list { max-height: calc(55 * var(--vh, 1vh)); overflow: auto; }
html.dark .assoc-acts { border-color: #3a3e45; }

/* Unit Management Status form (forms.js umStatus; guide fig. 169, training CAD cad.css). */
.warnbox { background: #fff4d6; border: 1px solid #e0b64a; padding: 5px 8px; margin: 4px 0 8px; }
.errbox { background: #ffe3e0; border: 1px solid #d86b60; padding: 5px 8px; margin: 4px 0 8px; }
.lnk { color: #0b2fd0; text-decoration: underline; cursor: pointer; }
.lnk:hover { color: #c21b0d; }
.us-uid { font-size: 15px; margin: 0 10px; }
.dstrip { margin: 8px 0 10px; border: 1px solid #c0c0c0; width: 100%; table-layout: fixed; }
.dstrip th:first-child { width: 46%; }
.dstrip.dis, .dstrip.dis th { background: #dcdcdc; color: #8a8a8a; }
html.dark .warnbox { background: #3d3418; border-color: #8a6d1f; }
html.dark .errbox { background: #3d1c1a; border-color: #8a3a33; }
html.dark .lnk { color: #7fa6ff; }
html.dark .dstrip.dis, html.dark .dstrip.dis th { background: #2a2d32; color: #777; }

/* Incident Initiation, General tab (forms.js iiGeneral): the PremierOne client's II layout at the
   client's fixed 1024 x 860 stage - narrow labels, one line per row, fields that fill the rest. */
.iif .fr { flex-wrap: nowrap; gap: 5px; min-height: 24px; margin: 1px 0; }
.iif .fr.top { align-items: flex-start; }
.iif .fl { width: 62px; font-size: 12px; white-space: nowrap; }
.iif .fr .fl:not(:first-child) { width: auto; margin-left: 4px; }
.iif .fl.w24 { width: 24px !important; } .iif .fl.w30 { width: 30px !important; } .iif .fl.w36 { width: 36px !important; }
.iif .fl.w40 { width: 40px !important; } .iif .fl.w44 { width: 44px !important; } .iif .fl.w70 { width: 70px !important; }
.iif .fl.w80 { width: 80px !important; } .iif .fl.auto { width: auto !important; } .iif .fl.r { text-align: right; }
.iif .fl.b { font-weight: 700; } .iif .fl.ml { margin-left: 14px; }
.iif .w70sp { width: 70px; flex: none; }
.iif .grow { flex: 1; }
.iif .fi.fill { flex: 1 1 auto; width: auto; min-width: 0; }
.iif .fr > .fa { flex: 1 1 auto; }
.iif .cmlbl { display: flex; flex-direction: column; gap: 4px; width: 70px; flex: none; }
.iif .cmlbl .fl { width: 70px; }
.iif .fcheck.pc { font-size: 11px; line-height: 1.1; display: block; }
.iif .ftext.box.s { min-width: 58px; }
.iif .cross { color: #333; }
.iif .lvl { margin-left: 8px; color: #333; font-size: 11px; }
.iif .fg { padding: 2px 8px 6px; gap: 2px; }
.locmark { display: inline-flex; width: 22px; height: 22px; flex: none; }
.locmark.no { cursor: pointer; }
html.dark .iif .cross, html.dark .iif .lvl { color: #c8ccd2; }
.iif .fl.wrap { white-space: normal; line-height: 1.05; }

/* Submenus (ui.js menu: Console > Session, Work Area > Work Objects, Utilities > Command Line). */
.ctx-i.has-sub { padding-right: 22px; }
.ctx-arrow { position: absolute; right: 8px; color: #444; font-size: 10px; }
html.dark .ctx-arrow { color: #bbb; }

/* Lock Session (client.js lockSession): the client hidden behind the lock until the password. */
.lock-back { position: fixed; inset: 0; z-index: 2147483000; background: rgba(27, 31, 38, .55); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; }
body.locked-session .win.fill > *:not(.lock-back) { filter: blur(6px); }
.lock-dlg { position: static; width: 420px; }

/* Messaging work object (msgform.js; guide ch. 18, the training CAD's forms_msg). */
.msg-h .fr { flex-wrap: nowrap; }
.msg-h .fl.ml48 { width: 52px; }
.msg-h .fl.ml60, .fr .fl.ml60 { width: 92px; }
.msg-h .fl.auto { width: auto; margin-left: 8px; }
.msg-h .fi.fill { flex: 1 1 auto; width: auto; min-width: 0; }
.fi.w80, .fs.w80 { width: 80px; } .fi.w120 { width: 120px; } .fi.w150 { width: 150px; } .fi.w200 { width: 200px; }
.msg-h .grow { flex: 1; }
.msg-att { border: 1px solid #c8c8c8; margin-top: 6px; }
.msg-atth { padding: 3px 6px; background: #f0f0f0; border-bottom: 1px solid #d8d8d8; font-size: 11px; color: #333; }
/* Scheduled Incidents (siform.js): the held list scrolls inside the form. */
.si-list { border: 1px solid #c8c8c8; margin-top: 6px; max-height: 360px; overflow: auto; background: #fff; }
/* Status Backdating (sbform.js): the trips, a trip's fields opened under it. */
.sb-list { border: 1px solid #c8c8c8; margin: 6px 0; max-height: 380px; overflow: auto; background: #fff; }
.sb-grid td { white-space: nowrap; }
.sb-grid tr.sb-add td { color: #1a4f9c; font-style: italic; cursor: pointer; }
.sb-grid tr.sb-edit td { background: #f4f7fb; padding: 4px 8px; }
.sb-grid tr.sb-edit .fl { min-width: 96px; }
/* Contractor Requests (contractor.js): the rotation's contact line, the timeout icon. */
.cr-rot td:nth-child(3) { white-space: nowrap; }
.cr-rot td.cr-plus { width: 14px; text-align: center; cursor: pointer; font-weight: 700; color: #1a4f9c; }
.cr-rot tr.cr-contact td { background: #f4f7fb; padding: 4px 10px; font-size: 11px; }
.cr-timeout { display: inline-block; width: 14px; height: 14px; line-height: 14px; text-align: center; border-radius: 7px;
              background: #d9262c; color: #fff; font-weight: 700; font-size: 10px; }
tr.dim td { color: #888; }
.fa.mbody { border: 0; width: 100%; min-height: 220px; text-transform: none; }
.grid.cfl tr.unread td { font-weight: 700; }
.grid.cfl tr { cursor: default; }
.ab-wrap { width: 480px; max-width: 100%; }
.ab-pick { height: 260px; overflow: auto; border: 1px solid #aaa; margin-top: 6px; background: #fff; }
.waa-foot .waa-x { margin-left: 4px; }
html.dark .msg-atth { background: #2a2d32; border-color: #3f434a; color: #c8ccd2; }
html.dark .msg-att { border-color: #3f434a; }
html.dark .ab-pick { background: #1e2125; border-color: #3f434a; }

/* A status monitor's title row in its own window (monitors.js monHead; guide 15.1). */
.mon-head { display: flex; align-items: center; gap: 8px; height: 24px; padding: 0 6px; flex: none;
  background: linear-gradient(#fdfdfd, #e8e8e8); border-bottom: 1px solid #c4c4c4; font-weight: 700; font-size: 12px; }
.mon-head .mh-grow { flex: 1; }
.mon-head .mh-chk { display: flex; align-items: center; gap: 4px; font-weight: 400; }
.mon-head .mh-al { height: 18px; padding: 0 6px; font-size: 11px; font-weight: 400; }
.mon-head .mh-al.on { background: #ffd200; border-color: #b38f00; font-weight: 700; }
.mon-head .mh-oos { height: 18px; padding: 0 8px; font-size: 11px; font-weight: 400; }
.mon-head .mh-oos.on { background: #cfe0f5; border-color: #3d6fb3; box-shadow: inset 0 1px 2px rgba(0,0,0,.25); font-weight: 700; }
html.dark .mon-head .mh-oos.on { background: #22406a; border-color: #5f86bd; color: #fff; }
html.dark .mon-head { background: linear-gradient(#34383f, #2a2d32); border-color: #15171a; color: #e4e6e9; }

/* Unit Status Monitor, Station Grid (monitors.js gridOf): an area to a column, a tile per unit. */
.ugrid { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 0; height: 100%; overflow: auto; background: #fff; }
.ug-col { width: 150px; border-right: 1px solid #d0d0d0; border-bottom: 1px solid #d0d0d0; min-height: 120px; }
.ug-h { padding: 2px 4px; font-weight: 700; font-size: 11px; background: #f0f0f0; border-bottom: 1px solid #d0d0d0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mon.ug-t { width: 100%; table-layout: fixed; border-collapse: collapse; }
.mon.ug-t td { padding: 1px 5px; border-bottom: 1px solid #e4e4e4; font-weight: 700; }
.mon.ug-t td.ug-s { width: 46px; text-align: left; }
html.dark .ugrid { background: #1b1d20; } html.dark .ug-h { background: #2a2d32; border-color: #3f434a; } html.dark .ug-col { border-color: #3f434a; }
/* A work area whose incident changed since it was last looked at (client.js renderWAList). */
.wa-upd { position: absolute; right: 4px; top: 2px; color: #d00000; font-weight: 700; }
.wa { position: relative; }

/* Dynamic Help on the command line itself (commands.js ghostHelp): what is typed, invisible, then
   the hint in grey - drawn behind the input, which is transparent over it. */
.p1-cmd { background: #fff; }
.p1-cmd input#cmd { background: transparent; position: relative; z-index: 1; }
.cmd-ghost { position: absolute; left: 6px; top: 0; bottom: 0; right: 22px; display: flex; align-items: center; font-size: 14px; color: transparent;
  white-space: pre; pointer-events: none; overflow: hidden; }
.cmd-ghost .hint { color: #9a9a9a; text-transform: none; }
.cmd-ghost .gt { color: transparent; text-transform: uppercase; }
.cmd-ghost .bad { color: #d04040; text-transform: none; }
html.dark .p1-cmd { background: #1e2125; } html.dark .cmd-ghost .hint { color: #6c7179; }

/* Interface monitor (ifacemon.js): Down red, Late yellow, Up as any row. */
.iface { height: 100%; overflow: auto; }
.mon tr.if-down td { background: #ff1010; color: #fff; }
.mon tr.if-late td { background: #ffe400; color: #000; }
.mon tr.if-up td.if-s { color: #1f8a1f; font-weight: 700; }
.mon tr.if-idle td.if-s { color: #6d6d6d; }
.ss-multi { width: 230px; min-height: 90px; }
/* Roll Calls (rcform.js). */
.rc-units td { white-space: nowrap; }
.rc-days .fcheck { margin-right: 8px; }
.grid tr.err td { color: #b00000; }
.ct-grid tr.ct-on td { background: #fff7b0; }

/* ---------------------------------------------------------------------------------------------
   Traffic Cameras as Axon Fusus - FususONE (camfusus.js): navbar, top toolbar, map with side
   toolbar and dock, grids, dashboard. Dark by default; "light" follows Change Style > Light.
   --------------------------------------------------------------------------------------------- */
.fz { --fz-bg: #0f141b; --fz-p: #171e27; --fz-p2: #1f2833; --fz-p3: #273241; --fz-line: #2b3747; --fz-t: #e3e9f0; --fz-dim: #8e9bab;
      --fz-acc: #ffd400; --fz-red: #ff3b30; --fz-green: #30c85a; --fz-grey: #8e8e93; --fz-orange: #ff7a00; --fz-blue: #3d8bff;
      position: absolute; inset: 0; display: flex; background: var(--fz-bg); color: var(--fz-t);
      font: 13px/1.35 "Segoe UI", Roboto, Arial, sans-serif; overflow: hidden; }
.fz.light { --fz-bg: #f3f5f8; --fz-p: #ffffff; --fz-p2: #eef1f5; --fz-p3: #e2e7ee; --fz-line: #d3d9e1; --fz-t: #1d2633; --fz-dim: #5f6b7a; }
.fz .hidden { display: none !important; }
.fz button { font: inherit; }
.fz-i { display: inline-flex; width: 18px; height: 18px; flex: none; }
.fz-i svg { width: 100%; height: 100%; }
.fz-grow { flex: 1; }
.fz-mx { color: var(--fz-dim); font-size: 12px; }
.fz-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; background: var(--fz-grey); }
.fz-dot.live { background: var(--fz-red); animation: fz-pulse 1.2s ease-in-out infinite; }
.fz-dot.online { background: var(--fz-green); }
.fz-dot.inactive { background: var(--fz-grey); }
@keyframes fz-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 59, 48, .7); } 50% { box-shadow: 0 0 0 5px rgba(255, 59, 48, 0); } }
/* navbar */
.fz-nav { width: 78px; flex: none; background: #0a0e13; border-right: 1px solid var(--fz-line); display: flex; flex-direction: column; align-items: stretch; }
.fz.light .fz-nav { background: #1d2633; }
.fz-logo { height: 48px; display: grid; place-items: center; font-weight: 800; letter-spacing: .5px; color: var(--fz-acc); font-size: 17px; border-bottom: 1px solid #222c38; }
.fz-nv { background: none; border: 0; color: #9aa7b6; padding: 10px 2px 8px; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; font-size: 11px; }
.fz-nv .fz-i { width: 21px; height: 21px; }
.fz-nv:hover { color: #fff; background: #141b24; }
.fz-nv.on { color: var(--fz-acc); box-shadow: inset 3px 0 0 var(--fz-acc); background: #141b24; }
.fz-main { flex: 1; min-width: 0; display: flex; flex-direction: column; position: relative; }
/* top toolbar */
.fz-top { height: 48px; flex: none; display: flex; align-items: center; gap: 6px; padding: 0 10px; background: var(--fz-p); border-bottom: 1px solid var(--fz-line); }
.fz-cs { background: var(--fz-acc); color: #111; font-weight: 800; border-radius: 3px; padding: 2px 8px; min-width: 20px; text-align: center; }
.fz-cs:empty { display: none; }
.fz-sbox { position: relative; display: flex; align-items: center; margin-left: 6px; }
.fz-sbox .fz-si { position: absolute; left: 8px; color: var(--fz-dim); width: 16px; height: 16px; pointer-events: none; }
.fz-search { padding: 6px 9px; background: var(--fz-bg); border: 1px solid var(--fz-line); border-radius: 4px; color: var(--fz-t); }
.fz-sbox .fz-search { width: 300px; padding-left: 30px; }
.fz-narrow { width: 150px; }
.fz-sel { padding: 5px 8px; background: var(--fz-bg); border: 1px solid var(--fz-line); border-radius: 4px; color: var(--fz-t); }
.fz-tb { background: none; border: 0; color: var(--fz-dim); display: flex; align-items: center; gap: 5px; padding: 6px 9px; border-radius: 4px; cursor: pointer; position: relative; }
.fz-tb:hover { background: var(--fz-p2); color: var(--fz-t); }
.fz-tb .fz-tl { font-size: 12px; font-weight: 600; }
.fz-tb .fz-n { background: var(--fz-blue); color: #fff; border-radius: 8px; font-size: 11px; padding: 0 5px; font-weight: 700; }
.fz-tb .fz-n:empty { display: none; }
.fz-tb.hot .fz-n { background: var(--fz-orange); }
.fz-tb.hot { color: var(--fz-orange); }
.fz-drop { position: absolute; z-index: 50; min-width: 260px; max-height: 420px; overflow: auto; background: var(--fz-p); border: 1px solid var(--fz-line); border-radius: 6px; box-shadow: 0 10px 26px rgba(0, 0, 0, .45); padding: 4px 0; }
.fz-sbox .fz-drop { top: 36px; left: 0; width: 340px; }
.fz-smh { padding: 7px 12px 4px; font-weight: 700; font-size: 12px; color: var(--fz-dim); text-transform: uppercase; letter-spacing: .4px; }
.fz-mi { display: flex; align-items: center; gap: 6px; width: 100%; background: none; border: 0; color: var(--fz-t); padding: 6px 12px; text-align: left; cursor: pointer; }
.fz-mi:hover:not(:disabled) { background: var(--fz-p2); }
.fz-mi:disabled { opacity: .45; cursor: default; }
.fz-mi.on { color: var(--fz-acc); }
.fz-mi.hi { box-shadow: inset 3px 0 0 var(--fz-orange); }
.fz-mi.dim { opacity: .55; }
.fz-drop > .fz-mx { padding: 3px 12px; }
.fz-lay { display: flex; align-items: center; gap: 6px; padding: 4px 12px; cursor: pointer; }
.fz-pri { font-size: 11px; font-weight: 800; padding: 0 5px; border-radius: 3px; color: #fff; background: #556; }
.fz-pri.p0 { background: #d00; } .fz-pri.p1 { background: #ff7a00; } .fz-pri.p2 { background: #c8a400; }
/* views */
.fz-views { flex: 1; position: relative; min-height: 0; }
.fz-view { position: absolute; inset: 0; }
.fz-pad { padding: 14px 18px; overflow: auto; }
.fz-h2 { margin: 0 0 12px; font-size: 18px; font-weight: 700; }
.fz-mapview { display: flex; }
.fz-maparea { flex: 1; position: relative; min-width: 0; }
.fz-map { position: absolute; inset: 0; }
.fz-map .mm-canvas { width: 100%; height: 100%; display: block; }
.fz-ovl { position: absolute; inset: 0; pointer-events: none; }
.fz-ovl > * { pointer-events: auto; }
.fz-ovl > .fz-shapes, .fz-ovl > .fz-markers { pointer-events: none; }
.fz-shapes { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.fz-shapes circle, .fz-shapes polygon, .fz-shapes polyline:not(.tele) { fill: rgba(255, 212, 0, .12); stroke: var(--fz-acc); stroke-width: 2; }
.fz-shapes polyline.tele { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.fz-shapes .drawing { stroke-dasharray: 6 4; }
.fz-shapes polyline { fill: none; }
.fz-drawlayer { position: absolute; inset: 0; cursor: crosshair; z-index: 20; }
.fz-markers { position: absolute; inset: 0; }
.fz-mk, .fz-cluster, .fz-inc { position: absolute; transform: translate(-50%, -50%); pointer-events: auto; cursor: pointer; }
.fz-mk { width: 28px; height: 28px; border-radius: 50%; background: #0d1520; border: 2px solid #c9d6e6; display: grid; place-items: center; color: #dce6f2; }
.fz-mk .fz-i { width: 15px; height: 15px; }
.fz-mk > .fz-dot { position: absolute; right: -3px; bottom: -3px; width: 11px; height: 11px; border: 2px solid #0d1520; }
.fz-mk.on { border-color: var(--fz-acc); }
.fz-mk.docked { background: #3a3000; }
.fz-mk.alert, .fz-cluster.alert { box-shadow: 0 0 0 4px rgba(255, 122, 0, .75); }
.fz-ml { position: absolute; top: 30px; left: 50%; transform: translateX(-50%); background: rgba(10, 14, 19, .85); color: #e3e9f0; padding: 1px 6px; border-radius: 3px; font-size: 11px; white-space: nowrap; }
.fz-cluster { width: 34px; height: 34px; border-radius: 50%; background: #fff; color: #111; display: grid; place-items: center; border: 3px solid rgba(0, 0, 0, .25); font-weight: 800; }
.fz-cluster > .fz-dot { position: absolute; right: -2px; bottom: -2px; border: 2px solid #fff; }
.fz-inc { width: 26px; height: 26px; transform: translate(-50%, -50%) rotate(45deg); background: #556; border: 2px solid #fff; display: grid; place-items: center; }
.fz-inc b { transform: rotate(-45deg); font-size: 10px; color: #fff; }
.fz-inc.p0 { background: #d00; } .fz-inc.p1 { background: var(--fz-orange); } .fz-inc.p2 { background: #c8a400; }
/* side toolbar */
.fz-side { position: absolute; right: 10px; top: 10px; display: flex; flex-direction: column; gap: 4px; background: var(--fz-p); border: 1px solid var(--fz-line); border-radius: 6px; padding: 4px; z-index: 15; }
.fz-ib { background: none; border: 0; color: var(--fz-dim); padding: 5px; border-radius: 4px; cursor: pointer; display: grid; place-items: center; }
.fz-ib:hover { color: var(--fz-t); background: var(--fz-p2); }
.fz-ib.on { color: var(--fz-acc); background: var(--fz-p2); }
.fz-menu { position: absolute; z-index: 40; background: var(--fz-p); border: 1px solid var(--fz-line); border-radius: 6px; padding: 4px 0; min-width: 200px; box-shadow: 0 8px 22px rgba(0, 0, 0, .45); }
.fz-shapemenu { position: absolute; z-index: 30; background: var(--fz-p); border: 1px solid var(--fz-acc); border-radius: 6px; padding: 4px 0; min-width: 190px; box-shadow: 0 8px 22px rgba(0, 0, 0, .45); }
/* camera info */
.fz-info { position: absolute; width: 280px; background: var(--fz-p); border: 1px solid var(--fz-line); border-radius: 6px; padding: 10px; box-shadow: 0 8px 22px rgba(0, 0, 0, .45); z-index: 16; }
.fz-ih { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.fz-ih b { flex: 1; }
.fz-irows { display: grid; gap: 3px; margin-bottom: 8px; }
.fz-ir { display: grid; grid-template-columns: 96px 1fr; font-size: 12px; }
.fz-ir span:first-child { color: var(--fz-dim); }
.fz-ial { margin: 6px 0; font-size: 12px; }
.fz-ial div { border-left: 3px solid var(--fz-acc); padding-left: 6px; margin: 2px 0; }
.fz-ial .hi { border-color: var(--fz-orange); }
.fz-iact { display: flex; gap: 6px; margin-top: 6px; }
.fz-iact .fz-btn { flex: 1; }
.fz-btn { background: var(--fz-p2); border: 1px solid var(--fz-line); color: var(--fz-t); border-radius: 4px; padding: 5px 10px; font-weight: 600; cursor: pointer; }
.fz-btn:hover:not(:disabled) { border-color: #4a5c74; }
.fz-btn:disabled { opacity: .45; cursor: default; }
.fz-btn.fz-primary { background: var(--fz-acc); border-color: var(--fz-acc); color: #111; }
/* the dock */
.fz-dock { width: 380px; flex: none; background: var(--fz-p); border-left: 1px solid var(--fz-line); display: flex; flex-direction: column; }
.fz-dh { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--fz-line); }
.fz-dl { flex: 1; overflow: auto; padding: 8px; display: flex; flex-direction: column; gap: 8px; }
.fz-empty { padding: 18px 14px; color: var(--fz-dim); }
.fz-dt { background: #000; border: 1px solid var(--fz-line); border-radius: 5px; overflow: hidden; flex: none; }
.fz-dt.flash { border-color: var(--fz-acc); }
.fz-dt.float { position: absolute; width: 400px; z-index: 18; resize: both; min-width: 260px; min-height: 180px; display: flex; flex-direction: column; box-shadow: 0 12px 30px rgba(0, 0, 0, .55); }
.fz-dt.float.top { z-index: 19; }
.fz-dt.float .fz-dtp { flex: 1; height: auto; }
.fz-dt.float .fz-dth { cursor: move; }
.fz-dth { display: flex; align-items: center; gap: 6px; padding: 4px 6px; background: #111821; color: #e3e9f0; user-select: none; }
.fz-dtn { flex: 1; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fz-dtt { display: flex; gap: 1px; }
.fz-dtt .fz-ib { color: #9aa7b6; padding: 3px; }
.fz-dtt .fz-i { width: 16px; height: 16px; }
.fz-dtp { position: relative; height: 205px; }
.fz-dtc { width: 100%; height: 100%; display: block; }
.fz-live { position: absolute; right: 8px; top: 8px; background: var(--fz-red); color: #fff; font-size: 11px; font-weight: 800; padding: 1px 6px; border-radius: 3px; }
.fz-ended { position: absolute; left: 0; right: 0; bottom: 0; padding: 3px 8px; background: rgba(0, 0, 0, .7); color: #c9d2dd; font-size: 11px; }
.fz-dtf { padding: 4px 8px; font-size: 11px; color: #9aa7b6; background: #0b1016; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the alert window */
.fz-alertwin { position: absolute; width: 260px; background: var(--fz-orange); color: #1a0d00; border-radius: 6px; box-shadow: 0 10px 26px rgba(0, 0, 0, .5); z-index: 22; overflow: hidden; }
.fz-awh { display: flex; align-items: center; gap: 6px; padding: 7px 8px; font-weight: 800; }
.fz-awh b { flex: 1; }
.fz-awh .fz-ib { color: #1a0d00; }
.fz-awb { padding: 0 10px 6px; font-weight: 600; }
.fz-awa { display: flex; align-items: center; gap: 6px; padding: 6px 8px; background: rgba(0, 0, 0, .12); }
.fz-awa .fz-ib { color: #1a0d00; background: rgba(255, 255, 255, .35); }
.fz-awa .fz-btn { margin-left: auto; }
/* grids */
.fz-gridsview { display: flex; flex-direction: column; }
.fz-gbar { flex: none; display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-bottom: 1px solid var(--fz-line); background: var(--fz-p); flex-wrap: wrap; }
.fz-gname { margin: 0 8px; }
.fz-ggrid { flex: 1; display: grid; gap: 4px; padding: 4px; min-height: 0; background: #000; }
.fz-ggrid.op { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); }
.fz-ggrid.op .fz-gt.big { grid-column: 1 / span 2; grid-row: 1 / span 2; }
.fz-gt { position: relative; background: #000; border: 1px solid #1d2a39; min-height: 0; overflow: hidden; }
.fz-gcap { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; padding: 4px 8px; background: linear-gradient(transparent, rgba(0, 0, 0, .85)); color: #e3e9f0; font-size: 12px; font-weight: 600; }
.fz-gcap .fz-live { position: static; }
.fz-card { background: var(--fz-p); border: 1px solid var(--fz-line); border-radius: 6px; padding: 10px 12px; margin-bottom: 12px; }
.fz-ch { font-weight: 700; margin-bottom: 8px; }
.fz-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.fz-cards .fz-card { margin: 0; }
.fz-grow-row { display: flex; align-items: center; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--fz-line); }
.fz-grow-row .fz-mx { flex: 1; }
.fz-link { background: none; border: 0; color: var(--fz-blue); font-weight: 600; cursor: pointer; padding: 0; }
.fz-link:hover { text-decoration: underline; }
.fz-stat { display: flex; gap: 8px; }
.fz-statn { flex: 1; background: var(--fz-p2); border: 1px solid var(--fz-line); border-radius: 6px; padding: 10px; color: var(--fz-t); cursor: pointer; display: flex; flex-direction: column; align-items: center; }
.fz-statn b { font-size: 24px; }
.fz-statn.live b { color: var(--fz-red); } .fz-statn.online b { color: var(--fz-green); } .fz-statn.inactive b { color: var(--fz-grey); }
.fz-modal { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); display: grid; place-items: center; z-index: 60; }
.fz-modal .fz-card { width: 420px; max-height: 80%; overflow: auto; display: flex; flex-direction: column; gap: 6px; }
.fz-picks { max-height: 260px; overflow: auto; border: 1px solid var(--fz-line); border-radius: 4px; padding: 4px 0; }
/* tables (Cameras, fususALERT, Audit) */
.fz-bar { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
.fz-chip { background: transparent; border: 1px solid var(--fz-line); border-radius: 12px; padding: 3px 10px; color: var(--fz-dim); font-size: 12px; cursor: pointer; }
.fz-chip.on { border-color: var(--fz-acc); color: var(--fz-acc); }
.fz-table { width: 100%; border-collapse: collapse; }
.fz-table th { text-align: left; color: var(--fz-dim); font-weight: 600; border-bottom: 1px solid var(--fz-line); padding: 6px 8px; position: sticky; top: 0; background: var(--fz-bg); }
.fz-table td { padding: 6px 8px; border-bottom: 1px solid var(--fz-line); }
.fz-table tr.hi td:first-child { box-shadow: inset 3px 0 0 var(--fz-orange); }
.fz-table tr.dim td { color: var(--fz-dim); }
.fz-acts { display: flex; gap: 5px; justify-content: flex-end; }
.fz-acts .fz-btn { padding: 2px 8px; font-size: 12px; }
/* The camera player inside the Fusus window (camwin.js, opts.fusus): Fusus's look over cam2. */
.fz-expand { background: #000; }
.cam2.fzp { background: #0b0f14; color: #e3e9f0; font: 13px/1.35 "Segoe UI", Roboto, Arial, sans-serif; position: relative; }
.cam2.fzp .cam-bar { background: #171e27; border-bottom: 1px solid #2b3747; padding: 6px 10px; gap: 10px; }
.cam2.fzp .cam-pick { background: #0f141b; color: #e3e9f0; border: 1px solid #2b3747; border-radius: 4px; height: 28px; padding: 0 6px; }
.cam2.fzp .cam-where { color: #8e9bab; }
.cam2.fzp .cam-tab { background: transparent; border: 1px solid #2b3747; color: #8e9bab; border-radius: 4px; padding: 4px 12px; font-weight: 600; }
.cam2.fzp .cam-tabs { gap: 4px; }
.cam2.fzp .cam-tab.on { background: #ffd400; border-color: #ffd400; color: #111; }
.fzp-back { background: #1f2833; border: 1px solid #2b3747; color: #e3e9f0; border-radius: 4px; padding: 4px 10px; font-weight: 700; cursor: pointer; }
.fzp-back:hover { border-color: #ffd400; }
.cam2.fzp .cam2-body { grid-template-columns: 1fr 320px; }
.cam2.fzp .cam2-side { background: #171e27; border-left: 1px solid #2b3747; color: #e3e9f0; }
.cam2.fzp .cam2-h { background: #1f2833; border-bottom: 1px solid #2b3747; color: #8e9bab; text-transform: uppercase; letter-spacing: .4px; font-size: 11px; }
.cam2.fzp .cam2-row, .cam2.fzp .cam2-ev { border-bottom: 1px solid #222c38; }
.cam2.fzp .cam2-row:hover, .cam2.fzp .cam2-ev:hover { background: #1f2833; }
.cam2.fzp .cam2-row.on { background: #2a3442; box-shadow: inset 3px 0 0 #ffd400; }
.cam2.fzp .cam2-row .cam2-mute, .cam2.fzp .cam2-ev .cam2-mute { color: #8e9bab; }
.cam2.fzp .cam2-sw { border-color: #8e9bab; }
.cam2.fzp .cam2-run { background: #1f2833; border: 1px solid #2b3747; color: #e3e9f0; border-radius: 4px; padding: 2px 9px; }
.cam2.fzp .cam2-run:hover { border-color: #ffd400; color: #ffd400; }
.cam2.fzp .cam2-empty { color: #8e9bab; }
.cam2.fzp .cam2-recs { border-bottom: 2px solid #2b3747; }
.cam2.fzp .cam2-ev.ev-hit { color: #ff8a80; }
.cam2.fzp .cam2-ev.ev-fatal { background: #7a1010; color: #fff; }
.cam2.fzp .cam2-note { background: #171e27; color: #e3e9f0; border: 1px solid #2b3747; }
.cam2.fzp .cam2-foot { background: #111821; border-top: 1px solid #2b3747; display: flex; flex-wrap: wrap; align-items: center; }
.cam2.fzp .cam2-timeline { background: transparent; flex: 1 1 100%; padding: 6px 10px; gap: 6px; }
.cam2.fzp .cam2-timeline .btn, .fzp-ib { background: #1f2833; border: 1px solid #2b3747; color: #e3e9f0; border-radius: 4px; padding: 3px 9px; cursor: pointer; font-size: 13px; }
.cam2.fzp .cam2-timeline .btn:hover, .fzp-ib:hover { border-color: #ffd400; color: #ffd400; }
.cam2.fzp .cam2-slider { accent-color: #ffd400; }
.cam2.fzp .cam2-speed { background: #0f141b; color: #e3e9f0; border: 1px solid #2b3747; border-radius: 4px; }
.cam2.fzp .cam2-clock { color: #e3e9f0; }
.cam2.fzp .cam-status { background: transparent; flex: 1; padding: 6px 10px; }
.fzp-tools { display: flex; align-items: center; gap: 6px; padding: 6px 10px; }
.fzp-cal { background: #0f141b; color: #e3e9f0; border: 1px solid #2b3747; border-radius: 4px; padding: 3px 6px; color-scheme: dark; }
.fzp-modal { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); display: grid; place-items: center; z-index: 30; }
.fzp-card { width: 340px; background: #171e27; border: 1px solid #2b3747; border-radius: 6px; padding: 14px; display: flex; flex-direction: column; gap: 6px; }
.fzp-card label { color: #8e9bab; font-size: 12px; }
.fzp-in { background: #0f141b; color: #e3e9f0; border: 1px solid #2b3747; border-radius: 4px; padding: 5px 8px; color-scheme: dark; }
.fzp-msg { color: #8e9bab; font-size: 12px; }
.fzp-acts { display: flex; gap: 6px; margin-top: 6px; }
.fzp-btn { flex: 1; background: #1f2833; border: 1px solid #2b3747; color: #e3e9f0; border-radius: 4px; padding: 6px 10px; font-weight: 600; cursor: pointer; }
.fzp-btn.primary { background: #ffd400; border-color: #ffd400; color: #111; }
.fzp-btn:disabled { opacity: .5; }
/* Window overlays (client.js openOverlay): the incident over the work area, shaded blue. */
.p1.overlaid #pwa, .p1.overlaid #waa { background: #dbe8f8; }
/* Dark: a dark blue shade - the light one left the dark theme's light text unreadable. */
html.dark .p1.overlaid #pwa, html.dark .p1.overlaid #waa { background: #17263a; }
.ov-bar { display: flex; align-items: center; gap: 8px; padding: 2px 8px; background: #2f5f9e; color: #fff; font-size: 12px; }
.ov-bar b { font-size: 14px; }
.ov-bar span { flex: 1; }
.ov-b { background: #fff; color: #1d3f6b; border: 1px solid #1d3f6b; border-radius: 2px; padding: 0 7px; cursor: pointer; font-size: 11px; line-height: 18px; }
.ov-b:disabled { opacity: .45; cursor: default; }
/* The PTT status monitor (pttmon.js): an emergency red and bold, a console transmission dimmer. */
.mon tr.ptt-emg td { color: #e00000; font-weight: 700; }
.mon tr.ptt-disp td { color: #555; }
.mon tr.ptt-play td { background: #fff3b0; }
/* The Incident Update Tool (itform.js). */
.it-bar { display: flex; gap: 4px; padding: 4px 0 6px; }
.it-sheet { border: 1px solid #c8c8c8; background: #fff; max-height: 170px; overflow: auto; margin-bottom: 6px; }
.it-sheet tr.err td { color: #b00000; }
.it-setup .fl { min-width: 80px; }
/* The Supervisor status monitor (supmon.js). */
.sup-h { padding: 6px 8px 3px; font-weight: 700; font-size: 12px; }
.mon tr.sup-over td { color: #c00000; font-weight: 700; }
.mon tr.sup-tot td { border-top: 2px solid #888; font-weight: 700; }
/* Manage Contractors (contractor.js). */
.dlg.cr-manage { width: 760px; max-width: 95vw; }
.cr-manage .cr-mlist { max-height: 220px; overflow: auto; border: 1px solid #c8c8c8; background: #fff; margin: 6px 0; }
.cr-manage .fl { min-width: 90px; }
.mon tr.ptt-live td { background: #e6f6e6; font-weight: 700; }
/* Fusus: tips, chat, telestrate, playback sync (camfusus.js). */
.fz-tip { position: absolute; transform: translate(-50%, -100%); color: #ff9f0a; cursor: pointer; pointer-events: auto; filter: drop-shadow(0 1px 2px #000); }
.fz-tip svg { width: 22px; height: 22px; }
.fz-pad6 { padding: 4px 10px 6px; }
.fz-chat { width: 360px; }
.fz-chatlog { max-height: 260px; overflow: auto; padding: 4px 10px; }
.fz-cm { padding: 4px 0; border-bottom: 1px solid var(--fz-line); font-size: 12px; }
.fz-chatin { display: flex; gap: 6px; padding: 8px 10px; }
.fz-chatin .fz-search { flex: 1; min-width: 0; }
.fz-chatin .fz-narrow { flex: 0 0 110px; }
.fz-telelayer { cursor: crosshair; z-index: 21; }
.fz-telebar { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); z-index: 22; display: flex; gap: 6px; align-items: center;
  background: var(--fz-p); border: 1px solid var(--fz-line); border-radius: 6px; padding: 6px 10px; }
.fz-sw { width: 20px; height: 20px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; }
.fz-sw.on { border-color: #fff; box-shadow: 0 0 0 1px #000; }
.fz-syncbar { display: flex; gap: 8px; align-items: center; padding: 6px 10px; border-bottom: 1px solid var(--fz-line); flex-wrap: wrap; }
.fz-syncslider { flex: 1; min-width: 160px; accent-color: var(--fz-acc); }
.fz-syncclock { font-variant-numeric: tabular-nums; min-width: 64px; }
.fzp-chk { display: flex; gap: 6px; align-items: center; }

/* Sign in with the ATXRP account (Authentik). */
.sso-btn { display: inline-block; text-decoration: none; text-align: center; }
.sso-btn.hidden, .sso-btn[hidden] { display: none; }