/* The field MDT: a rugged in-cab tablet running a mobile CAD client. Dark screen for the cab,
   flat fills, 1px lines, square corners, big touch targets. Self-contained: every rule is
   scoped under .mdt (the screen), .mdt-dlg (its dialogs, which open outside the screen) or
   and sets its own fonts and colours so the base sheet can change
   without this one noticing.

   Order: 1 screen + controls  2 top bar  3 shell, rail, status bar  4 call sheet  5 tabs
   (calls, units, messages, status, sign-on)  6 alerts and dialogs. */

/* ---------- 1 the screen and its controls */
.mdt {
  --screen: #0E1217; --bar: #182230; --rail: #121922; --panel: #141C26; --panel-head: #1C2836;
  --line: #22303F; --line-soft: #1C2733; --btn: #22303F; --btn-line: #34475E; --btn-hover: #2B3C52;
  --text: #E6E9EE; --muted: #9FB0C6; --faint: #4A5B70; --white: #FFFFFF;
  --red: #B3261E; --blue: #1E88E5; --sel: #1F5FA8; --yellow: #FDD835; --haz: #FFCA28; --green: #66BB6A;
  --c-AVL: #43A047; --c-DSP: #FDD835; --c-ENR: #1E88E5; --c-STG: #26A69A; --c-ONS: #E53935;
  --c-TRN: #8E24AA; --c-ATH: #F4511E; --c-OOS: #757575; --c-UNS: #37474F; --c-CLR: #546E7A;
  --ui: 'Figtree', 'Segoe UI', system-ui, sans-serif; --mono: 'JetBrains Mono', Consolas, monospace;
  height: 100%; display: flex; flex-direction: column; position: relative; overflow: hidden;
  background: var(--screen); color: var(--text);
  font: 400 15px/1.3 var(--ui); letter-spacing: 0; text-transform: uppercase; -webkit-font-smoothing: antialiased;
}
.mdt *, .mdt *::before, .mdt *::after { box-sizing: border-box; }
.mdt h1, .mdt h2, .mdt h3, .mdt h4, .mdt p { margin: 0; letter-spacing: 0; text-transform: uppercase; }
.mdt i { font-style: normal; }
.mdt .dim { color: var(--muted); font-weight: 400; }
.mdt .mono { font-family: var(--mono); }
.mdt .row { display: flex; align-items: center; gap: 12px; } .mdt .grow { flex: 1; min-width: 0; }
.mdt ::-webkit-scrollbar { width: 12px; height: 12px; }
.mdt ::-webkit-scrollbar-thumb { background: #34475E; border: 3px solid var(--screen); border-radius: 0; }
.mdt ::-webkit-scrollbar-thumb:hover { background: #4A6180; }
.mdt ::-webkit-scrollbar-track { background: transparent; }
.mdt ::selection { background: rgba(30, 136, 229, .45); }

.mdt button { font: 600 14px/1 var(--ui); letter-spacing: 0; text-transform: uppercase; color: var(--white); background: var(--btn); border: 1px solid var(--btn-line); border-radius: 3px; height: 36px; padding: 0 14px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; transition: none; box-shadow: none; filter: none; }
.mdt button:hover:not(:disabled) { background: var(--btn-hover); border-color: #4A6180; filter: none; }
.mdt button:active:not(:disabled) { background: #1A2634; filter: none; }
.mdt button:disabled { opacity: .35; cursor: default; }
.mdt button:focus-visible { outline: 2px solid #64B5F6; outline-offset: 1px; }
.mdt button.primary { background: var(--blue); border-color: #64B5F6; color: var(--white); font-weight: 700; }
.mdt button.primary:hover:not(:disabled) { background: #1976D2; }
.mdt button.danger { background: #5A1A16; border-color: var(--red); color: var(--white); }
.mdt button.danger:hover:not(:disabled) { background: #7F0000; border-color: #E53935; color: var(--white); filter: none; }
.mdt button.ghost { background: transparent; border-color: var(--btn-line); color: var(--muted); }
.mdt input, .mdt select { font: 400 15px var(--ui); letter-spacing: 0; text-transform: uppercase; color: var(--white); background: #0A0D11; border: 1px solid var(--btn-line); border-radius: 2px; height: 36px; padding: 0 10px; box-shadow: none; transition: none; }
.mdt input:focus, .mdt select:focus { border-color: var(--blue); box-shadow: none; outline: none; }
.mdt input::placeholder { color: #5D6E84; }
.mdt select { width: auto; cursor: pointer; } .mdt select option { background: var(--panel); color: var(--white); text-transform: uppercase; }

/* status colours: chips, the top-bar block and the unit chips on the sheet share them */
.mdt .st, .mdt .stat, .mdt .uchip { background: var(--c-UNS); color: var(--white); box-shadow: none; }
.mdt .st-XS { background: #546E7A; color: #FFF; }
.mdt .st-AVL { background: var(--c-AVL); color: #000; }
.mdt .st-DSP { background: var(--c-DSP); color: #000; } .mdt .st-ENR { background: var(--c-ENR); color: var(--white); }
.mdt .st-STG { background: var(--c-STG); color: #000; } .mdt .st-ONS { background: var(--c-ONS); color: var(--white); }
.mdt .st-TRN { background: var(--c-TRN); color: var(--white); } .mdt .st-ATH { background: var(--c-ATH); color: #000; }
.mdt .st-OOS { background: var(--c-OOS); color: var(--white); } .mdt .st-UNS { background: var(--c-UNS); color: var(--muted); }
.mdt .st-CLR { background: var(--c-CLR); color: var(--white); }
.mdt .st { display: inline-block; min-width: 58px; text-align: center; font: 700 12px/1 var(--ui); letter-spacing: 0; padding: 5px 7px; border-radius: 2px; white-space: nowrap; }
.mdt .unit-chips { display: inline-flex; flex-wrap: wrap; gap: 4px; } .mdt .unit-chips .st { min-width: 0; }
.mdt .timer { font: 400 14px var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mdt .timer.over { color: #E53935; font-weight: 700; }
.mdt .pri { display: inline-block; font: 700 13px/1 var(--mono); padding: 5px 7px; border-radius: 2px; color: #000; background: #9FB0C6; letter-spacing: 0; }
.mdt .pri-1 { background: #E53935; color: var(--white); } .mdt .pri-2 { background: var(--yellow); color: #000; }
.mdt .als { font: 700 11px var(--mono); color: #64B5F6; margin-left: 4px; letter-spacing: 0; }
.mdt .flag { font: 700 11px/1 var(--ui); color: #000; background: var(--yellow); padding: 3px 6px; margin-left: 4px; border-radius: 2px; letter-spacing: 0; }
.mdt .flag.mayday { background: #E53935; color: var(--white); }
.mdt .hs { display: inline-block; font: 700 12px/1 var(--ui); padding: 5px 8px; border-radius: 2px; color: var(--green); border: 1px solid #2E7D32; }
.mdt .hs.DIVERT { background: var(--yellow); border-color: var(--yellow); color: #000; } .mdt .hs.CLOSED { background: #E53935; border-color: #E53935; color: var(--white); }
@keyframes mdt-blink { 50% { opacity: .5; } }
@media (prefers-reduced-motion: reduce) { .mdt .sbtn.ack, .mdt .blink, .mdt .mdt-alert.k-MAYDAY { animation: none !important; } }

/* ---------- 2 top bar: unit, status block, where it stands, crew, link, clock */
.mdt .mdt-top { flex: none; height: 58px; display: flex; align-items: center; gap: 14px; padding: 0 14px; background: var(--bar); border-bottom: 2px solid #2A3A50; white-space: nowrap; }
.mdt .mdt-top .unit { font: 700 26px/1 var(--ui); letter-spacing: .02em; color: var(--white); }
.mdt .stat { display: inline-block; padding: 6px 14px; font: 700 16px/1 var(--ui); text-transform: uppercase; border-radius: 3px; white-space: nowrap; }
.mdt .mdt-top .where { display: flex; align-items: center; gap: 10px; min-width: 0; overflow: hidden; color: var(--muted); font-size: 15px; }
.mdt .mdt-top .where > * { flex: none; } .mdt .mdt-top .where > span:last-child { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.mdt .mdt-top .where i { color: var(--faint); }
.mdt .mdt-top .where .timer { font-size: 15px; color: var(--muted); }
.mdt .mdt-top .need { color: var(--yellow); font-weight: 700; animation: mdt-blink 1.2s steps(1) infinite; }
.mdt .mdt-top .r { margin-left: auto; display: flex; gap: 16px; align-items: center; color: var(--muted); font-size: 14px; }
.mdt .mdt-top .who b { color: #64B5F6; font-weight: 700; margin-left: 4px; }
.mdt .mdt-top .gps { color: var(--faint); } .mdt .mdt-top .gps.on { color: var(--green); }
.mdt .mdt-top .link.up { color: var(--muted); } .mdt .mdt-top .link.down { color: var(--white); background: var(--red); padding: 3px 8px; font-weight: 700; border-radius: 2px; }
.mdt .mdt-top .clock { font: 700 22px/1 var(--mono); color: var(--white); letter-spacing: 0; font-variant-numeric: tabular-nums; }

/* ---------- 3 shell: the rail on the left, the view, the status bar along the bottom */
.mdt .mdt-shell { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.mdt .mdt-body { flex: 1; min-height: 0; display: flex; }
.mdt .mdt-tabs { flex: none; width: 150px; background: var(--rail); border-right: 1px solid var(--line); display: flex; flex-direction: column; overflow: hidden; }
.mdt .mdt-tabs .tab { flex: none; width: 100%; height: 84px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; color: var(--muted); font: 700 12px/1 var(--ui); text-transform: uppercase; letter-spacing: .04em; background: transparent; border: none; border-bottom: 1px solid var(--line-soft); border-radius: 0; position: relative; padding: 0; white-space: normal; }
.mdt .mdt-tabs .tab svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; opacity: .85; transition: opacity .12s, transform .12s; }
.mdt .mdt-tabs .tab:hover:not(:disabled) svg, .mdt .mdt-tabs .tab.on svg { opacity: 1; }
.mdt .mdt-tabs .tab.on svg { transform: scale(1.06); }
.mdt .mdt-tabs .tab.em svg { color: #FF5252; stroke-width: 1.9; }
.mdt .mdt-tabs .tab.em.blink svg { color: #FFFFFF; }
.mdt .mdt-tabs .tab:hover:not(:disabled) { background: #182230; color: var(--white); border-color: var(--line-soft); }
.mdt .mdt-tabs .tab.on, .mdt .mdt-tabs .tab.on:hover:not(:disabled) { background: var(--sel); color: var(--white); }
.mdt .mdt-tabs .tab .dot { position: absolute; right: 18px; top: 12px; width: 10px; height: 10px; border-radius: 50%; background: var(--c-ONS); }
.mdt .mdt-tabs .tab .n { position: absolute; right: 16px; top: 10px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: #E53935; color: var(--white); font: 700 12px/20px var(--ui); text-align: center; letter-spacing: 0; }
.mdt .mdt-tabs .tab.em { margin-top: auto; border-top: 1px solid var(--line-soft); border-bottom: none; }
.mdt .mdt-tabs .tab.em .sq { width: 30px; height: 30px; background: #7F0000; border: 1px solid #B71C1C; border-radius: 3px; }
.mdt .mdt-tabs .tab.em:hover:not(:disabled) { background: #3A0A0A; }
.mdt .mdt-tabs .tab.em.blink { background: #7F0000; color: var(--white); animation: mdt-blink 1s steps(1) infinite; } .mdt .mdt-tabs .tab.em.blink .sq { background: #E53935; }
.mdt .mdt-col { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.mdt .mdt-main { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; }
.mdt .mdt-view { flex: 1; min-height: 0; overflow-y: auto; }
.mdt .mdt-map { flex: 1; min-height: 0; position: relative; overflow: hidden; background: #0A0D11; }
.mdt .mdt-map canvas { display: block; cursor: grab; }
.mdt .map-ov { position: absolute; left: 10px; top: 10px; z-index: 2; display: flex; align-items: center; gap: 6px; max-width: calc(100% - 20px); }
.mdt .map-ov .map-title { background: rgba(24, 34, 48, .92); border: 1px solid var(--btn-line); color: var(--white); padding: 8px 12px; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.mdt .map-ov .map-title b { font-family: var(--mono); margin-right: 6px; } .mdt .map-ov .map-title i { color: var(--faint); margin: 0 4px; }
.mdt .map-ov .map-note { background: rgba(30, 136, 229, .9); color: var(--white); padding: 8px 12px; font-size: 13px; font-weight: 700; }
.mdt .map-ov button { background: rgba(24, 34, 48, .92); }
/* turn directions from the vehicle's GPS, down the right of the map */
.mdt .nav-panel { position: absolute; right: 0; top: 0; bottom: 0; width: 340px; z-index: 2; background: rgba(20, 28, 38, .96); border-left: 1px solid #22303F; display: flex; flex-direction: column; color: #E6E9EE; }
.mdt .nav-panel .next { padding: 18px 16px; background: #1F5FA8; color: #FFF; } .mdt .nav-panel .next small { display: block; font-size: 16px; opacity: .9; } .mdt .nav-panel .next b { display: block; font: 700 40px/1.1 var(--ui); margin: 4px 0; }
.mdt .nav-panel .next.arrive { background: #2E7D32; } .mdt .nav-panel .next.recalc { background: #6D4C41; }
.mdt .nav-panel .step { padding: 10px 16px; border-bottom: 1px solid #1C2733; font-size: 14px; display: flex; gap: 12px; } .mdt .nav-panel .step i { width: 40px; color: #9FB0C6; font-style: normal; font-weight: 700; text-align: right; flex: none; }
.mdt .nav-panel .step .dim { color: #9FB0C6; display: block; }
.mdt .nav-panel .eta { margin-top: auto; padding: 14px 16px; display: flex; justify-content: space-around; border-top: 1px solid #22303F; } .mdt .nav-panel .eta div { text-align: center; } .mdt .nav-panel .eta b { display: block; font: 700 28px var(--mono); color: #FFF; } .mdt .nav-panel .eta span { color: #9FB0C6; font-size: 11px; letter-spacing: .1em; }
.mdt .nav-panel .none { padding: 16px; color: #9FB0C6; font-size: 14px; line-height: 1.5; }

.mdt .mdt-status { flex: none; height: 96px; display: flex; gap: 4px; padding: 6px; background: #0A0D11; border-top: 1px solid var(--line); }
.mdt .sbtn { flex: 1 1 0; min-width: 0; height: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 0 6px; font: 700 17px/1.1 var(--ui); text-transform: uppercase; letter-spacing: .04em; color: var(--white); background: var(--btn); border: 1px solid var(--btn-line); border-radius: 3px; text-align: center; white-space: normal; }
.mdt .sbtn small { font: 400 11px/1 var(--mono); color: var(--muted); letter-spacing: .1em; text-transform: uppercase; }
.mdt .sbtn:disabled { opacity: 1; color: #5D6E84; background: #141A22; border-color: #1C2733; } .mdt .sbtn:disabled small { color: #3E4D60; }
.mdt .sbtn.cur { border-color: var(--muted); box-shadow: inset 0 0 0 1px var(--muted); } .mdt .sbtn.cur small { color: var(--white); }
.mdt .sbtn.next, .mdt .sbtn.next:hover:not(:disabled) { flex: 1 1 0; font-size: 17px; background: var(--blue); border-color: #64B5F6; box-shadow: inset 0 0 0 2px #BBDEFB; } .mdt .sbtn.next small { color: #E3F2FD; }
.mdt .sbtn.done, .mdt .sbtn.done:disabled, .mdt .sbtn.done:hover:not(:disabled) { background: #0F2A17; border-color: #2E7D32; color: var(--green); opacity: 1; box-shadow: none; } .mdt .sbtn.done small { color: var(--green); }
.mdt .sbtn.done.cur { box-shadow: inset 0 0 0 2px #2E7D32; }
.mdt .sbtn.ack, .mdt .sbtn.ack:hover:not(:disabled) { flex: 1 1 0; font-size: 17px; background: var(--yellow); border-color: #FFF59D; color: #000; animation: mdt-blink 1.2s steps(1) infinite; } .mdt .sbtn.ack small { color: #5D4037; }
.mdt .sbtn.mayday { flex: 1.25 1 0; background: #7F0000; border-color: #E53935; } .mdt .sbtn.mayday small { color: #FFCDD2; }
.mdt .sbtn.mayday:hover:not(:disabled) { background: #9A0007; }
.mdt .sbtn.mayday.blink { background: #E53935; animation: mdt-blink .8s steps(1) infinite; }

/* ---------- 4 the call sheet: red band, tools, fields left, dispatch comments right */
.mdt .sheet { height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 36%); grid-template-rows: auto auto minmax(0, 1fr); gap: 12px 20px; padding: 14px 20px 16px; }
.mdt .hdr { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; min-height: 46px; background: var(--red); color: var(--white); padding: 9px 16px; font: 700 18px/1.2 var(--ui); white-space: nowrap; }
.mdt .sheet[data-pri="3"] .hdr { background: #8D5A00; }
.mdt .hdr .nature { overflow: hidden; text-overflow: ellipsis; }
.mdt .hdr .num { font: 400 18px var(--mono); }
.mdt .hdr .det { font: 400 14px var(--mono); background: rgba(0, 0, 0, .28); padding: 3px 8px; border-radius: 2px; }
.mdt .hdr .r { margin-left: auto; display: flex; gap: 8px; align-items: center; font: 400 16px var(--mono); } .mdt .hdr .r i { opacity: .55; }
.mdt .hdr .r .timer { font: 700 16px var(--mono); color: var(--white); }
.mdt .hdr .back { height: 28px; padding: 0 10px; font-size: 13px; background: rgba(0, 0, 0, .3); border-color: rgba(255, 255, 255, .45); }
.mdt .hdr .back:hover:not(:disabled) { background: rgba(0, 0, 0, .5); }
.mdt .tools { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mdt .tools button, .mdt .tools select { height: 40px; font-size: 15px; } .mdt .tools select { min-width: 240px; }
.mdt .fields { min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; padding-right: 6px; }
.mdt .field { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 6px 12px; align-content: start; align-items: baseline; font-size: 15px; }
.mdt .field b { color: var(--muted); font-weight: 400; text-align: right; }
.mdt .field > span { color: var(--white); font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.mdt .field i { color: var(--faint); font-weight: 400; margin: 0 2px; }
.mdt .field .big { font: 700 30px/1.1 var(--ui); }
.mdt .field .subl, .mdt .field .dim { color: var(--muted); font-weight: 400; font-size: 15px; letter-spacing: 0; }
.mdt .field .haz { color: var(--haz); }
.mdt .field .units { display: flex; flex-wrap: wrap; gap: 4px; }
.mdt .uchip { display: inline-block; padding: 5px 10px; font: 700 14px/1 var(--ui); border-radius: 2px; letter-spacing: 0; }
.mdt .panel { background: var(--panel); border: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; flex: none; }
.mdt .panel .ph { flex: none; background: var(--panel-head); color: var(--muted); font: 700 12px/1 var(--ui); letter-spacing: .1em; text-transform: uppercase; padding: 8px 10px; } .mdt .ph i { opacity: .6; margin: 0 3px; }
.mdt .panel .pb { padding: 10px; font-size: 14px; line-height: 1.45; }
.mdt .comments { grid-column: 2; grid-row: 3; flex: 1; }
.mdt .comments .pb, .mdt .msgs .pb { flex: 1; min-height: 0; overflow-y: auto; }
.mdt .cmts { display: flex; flex-direction: column; gap: 5px; font: 14px/1.45 var(--mono); color: #DCE3EC; }
.mdt .cmts .log-line { display: grid; grid-template-columns: 66px 110px minmax(0, 1fr); gap: 0 10px; align-items: baseline; }
.mdt .cmts .log-line .t { font: 14px var(--mono); color: var(--muted); letter-spacing: 0; }
.mdt .cmts .log-line .by { font: 14px var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: 0; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mdt .cmts .log-line .tx { color: #DCE3EC; font-weight: 400; word-break: break-word; }
.mdt .cmts .k-N .tx { color: var(--white); } .mdt .cmts .k-A .tx { color: var(--haz); font-weight: 700; }
.mdt .cmts .k-U .tx, .mdt .cmts .k-S .tx { color: #8FA3BA; } .mdt .cmts .k-B .tx { color: var(--green); }
.mdt form.note { flex: none; display: flex; gap: 6px; margin: 0; padding: 8px; border-top: 1px solid var(--line); position: static; }
.mdt form.note::before { content: none; }
.mdt form.note input { flex: 1; min-width: 0; width: auto; height: 40px; font: 400 15px var(--mono); padding: 0 10px; }
.mdt form.note button { height: 40px; }
/* the command block (benchmarks, PAR) and unit rows come from the shared incident module */
.mdt .cmd .block-head { display: none; } /* the field list above already names who has command */
.mdt .cmdrow { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.mdt .chips { display: flex; flex-wrap: wrap; gap: 5px; }
.mdt .bm { height: 30px; padding: 0 10px; font: 600 13px var(--ui); border-radius: 2px; }
.mdt .bm.on, .mdt .bm.on:disabled { background: #0F2A17; border-color: #2E7D32; color: var(--green); opacity: 1; }
.mdt .par { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.mdt .k { color: var(--haz); font: 700 13px var(--ui); letter-spacing: 0; } .mdt .par .k .timer { color: inherit; font-weight: 700; }
.mdt .par .chip { height: 30px; padding: 0 10px; font: 700 13px var(--mono); border-radius: 2px; }
.mdt .par .chip.done, .mdt .par .chip.done:disabled { border-color: #2E7D32; color: var(--green); opacity: 1; } .mdt .par .chip.need { border-color: var(--yellow); color: var(--yellow); }
.mdt .urow { display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 3px 0; border-bottom: 1px solid var(--line-soft); font-size: 14px; }
.mdt .urow:last-child { border-bottom: none; } .mdt .urow.cleared { opacity: .45; }
.mdt .urow .uid { width: 56px; font: 700 15px var(--mono); color: var(--white); }

/* ---------- 5 the other tabs */
.mdt .tpad, .mdt .stpage, .mdt .msgs { padding: 14px 20px 16px; }
.mdt .msgs { height: 100%; display: flex; flex-direction: column; } .mdt .msgs .panel { flex: 1; min-height: 0; }
.mdt .stpage { display: flex; flex-direction: column; gap: 14px; max-width: 1100px; }
.mdt .stpage .field { gap: 8px 12px; } .mdt .stpage .field .stat { font-size: 13px; padding: 4px 10px; }
.mdt .stbtns { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.mdt .stbtns .sbtn { height: 76px; }
.mdt table.tbl { width: 100%; border-collapse: collapse; font-size: 15px; }
.mdt table.tbl th { text-align: left; color: var(--muted); font: 700 12px/1 var(--ui); letter-spacing: .08em; text-transform: uppercase; padding: 9px 10px; background: var(--panel-head); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 1; }
.mdt table.tbl td { padding: 8px 10px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.mdt table.tbl td b { color: var(--white); }
.mdt table.tbl.click tbody tr { cursor: pointer; } .mdt table.tbl.click tbody tr:hover td { background: #152030; }
.mdt h4 { margin: 18px 0 8px; font: 700 12px/1 var(--ui); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.mdt .mdt-empty { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--muted); text-align: center; padding: 24px; font: 400 16px var(--ui); letter-spacing: 0; }
.mdt .mdt-empty .e-title { font: 700 30px/1.1 var(--ui); color: var(--white); } .mdt .mdt-empty .e-hint { font-size: 14px; color: var(--faint); margin-top: 10px; }
/* sign-on: stations with their rigs as rows */
.mdt .signon { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 22px; }
.mdt .signon h1 { font: 700 20px/1.2 var(--ui); color: var(--white); margin-bottom: 4px; }
.mdt .signon p { color: var(--muted); margin-bottom: 14px; }
.mdt .so-station { margin-bottom: 14px; border: 1px solid var(--line); background: var(--panel); }
.mdt .so-station h3 { padding: 8px 10px; background: var(--panel-head); font: 700 12px/1 var(--ui); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .mdt .so-station h3 i { opacity: .6; margin: 0 3px; }
.mdt .so-grid td { height: 48px; } .mdt .so-grid tr:last-child td { border-bottom: none; }
.mdt .so-id { width: 90px; font: 700 17px var(--mono); color: var(--white); }
.mdt .so-home { margin-left: 8px; padding: 3px 6px; border: 1px solid var(--blue); font: 700 10px/1 var(--ui); letter-spacing: .1em; color: var(--white); vertical-align: 2px; }
.mdt .so-act { text-align: right; white-space: nowrap; } .mdt .so-act button + button { margin-left: 6px; }
.mdt .seat { min-width: 130px; height: 38px; border-radius: 3px; }
.mdt .seg { white-space: nowrap; } .mdt .seg button { height: 34px; padding: 0 10px; margin-right: 3px; font-size: 12px; }
.mdt .seg button.on.m-IS_ALS, .mdt .seg button.on.m-IS_BLS { background: #2E7D32; border-color: #43A047; color: #FFF; }
.mdt .seg button.on.m-XS_ALS, .mdt .seg button.on.m-XS_BLS { background: #37474F; border-color: #78909C; color: #FFF; }
.mdt .seg button.on.m-OOS { background: #616161; border-color: #9E9E9E; color: #FFF; } .mdt .seg button.on.m-NONE { background: #263238; border-color: #455A64; color: #B0BEC5; }
.mdt .ride { margin-left: 8px; } .mdt .ride select { height: 30px; background: #0E1217; color: #FFF; border: 1px solid #34475E; font: 700 14px var(--mono); padding: 0 6px; }
.mdt .nostaff { padding: 16px; color: #9FB0C6; text-align: center; width: 100%; }
.mdt .so-grid th { text-align: left; color: #9FB0C6; font: 700 11px var(--ui); letter-spacing: .1em; padding: 6px 10px; border-bottom: 1px solid #22303F; }
.mdt .cov select { width: 150px; height: 34px; } .mdt .parc input { width: 70px; height: 34px; text-align: center; font: 700 15px var(--mono); }
.mdt .swap button { height: 30px; padding: 0 12px; margin-right: 4px; font-weight: 700; } .mdt .swap .dim { margin-left: 4px; } .mdt .so-act .dim b { color: var(--text); }

/* ---------- 6 alerts and dialogs */
.mdt .mdt-alert { position: absolute; left: 50%; top: 68px; transform: translateX(-50%); width: min(860px, 90%); z-index: 20; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0 14px; background: var(--red); color: var(--white); border: 1px solid #E53935; border-radius: 3px; padding: 10px 10px 10px 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, .7); cursor: pointer; animation: none; text-transform: uppercase; letter-spacing: 0; }
.mdt .mdt-alert.k-MAYDAY { animation: mdt-blink .8s steps(1) infinite; }
.mdt .mdt-alert:not(.k-DISPATCH):not(.k-MAYDAY):not(.k-UPDATE):not(.k-UPGRADE):not(.k-CLOSED) { background: #8D5A00; border-color: var(--yellow); }
.mdt .mdt-alert { grid-template-columns: minmax(0, 1fr) auto; border-left-width: 8px; }
.mdt .mdt-alert.k-UPDATE, .mdt .mdt-alert.k-UPGRADE { background: #0D47A1; border-color: #64B5F6; }
.mdt .mdt-alert.k-CLOSED { background: #1B5E20; border-color: #81C784; }
.mdt .ma-head { font: 700 13px/1.2 var(--ui); letter-spacing: .14em; opacity: .9; margin-bottom: 3px; }
.mdt .ma-text { font: 700 17px/1.25 var(--ui); overflow-wrap: anywhere; }
.mdt .mdt-alert button { height: 32px; background: rgba(0, 0, 0, .35); border-color: rgba(255, 255, 255, .45); border-radius: 2px; grid-row: auto; grid-column: auto; }
/* dialogs the MDT opens (they live in #overlays, outside the screen, so they carry their own class) */
.mdt-dlg .dialog { background: #141C26; border: 1px solid #34475E; border-radius: 3px; color: #E6E9EE; font: 400 15px/1.35 var(--ui); letter-spacing: 0; text-transform: uppercase; box-shadow: 0 20px 60px rgba(0, 0, 0, .8); }
.mdt-dlg .dialog-title { background: #1C2836; color: #FFFFFF; font: 700 14px var(--ui); letter-spacing: .08em; text-transform: uppercase; border-bottom: 1px solid #22303F; padding: 12px 14px; }
.mdt-dlg .dialog-title .x { color: #9FB0C6; background: none; border: none; }
.mdt-dlg .dialog-body { padding: 16px; text-transform: uppercase; letter-spacing: 0; }
.mdt-dlg .dialog-body p { margin: 0 0 12px; } .mdt-dlg .dialog-body p:last-child { margin-bottom: 0; }
.mdt-dlg .dialog-body .dim { color: #9FB0C6; } .mdt-dlg .dialog-body .warn { color: #FFCA28; font-weight: 600; }
.mdt-dlg .dialog-foot { background: #0E1217; border-top: 1px solid #22303F; padding: 10px 14px; text-transform: uppercase; letter-spacing: 0; }
.mdt-dlg button { font: 600 14px/1 var(--ui); letter-spacing: 0; text-transform: uppercase; color: #FFFFFF; background: #22303F; border: 1px solid #34475E; border-radius: 3px; height: 38px; padding: 0 16px; transition: none; filter: none; }
.mdt-dlg button:hover:not(:disabled) { background: #2B3C52; border-color: #4A6180; filter: none; }
.mdt-dlg button.primary { background: #1E88E5; border-color: #64B5F6; color: #FFFFFF; font-weight: 700; }
.mdt-dlg button.danger, .mdt-dlg button.danger:hover:not(:disabled) { background: #7F0000; border-color: #E53935; color: #FFFFFF; filter: none; }
.mdt-dlg label { display: block; color: #9FB0C6; font: 600 12px var(--ui); letter-spacing: .08em; text-transform: uppercase; margin: 0 0 12px; }
.mdt-dlg input, .mdt-dlg select { font: 400 15px var(--ui); letter-spacing: 0; text-transform: uppercase; color: #FFFFFF; background: #0A0D11; border: 1px solid #34475E; border-radius: 2px; height: 40px; padding: 0 10px; width: 100%; margin-top: 6px; box-shadow: none; }
.mdt-dlg input:focus, .mdt-dlg select:focus { border-color: #1E88E5; box-shadow: none; }
.mdt-dlg select option { background: #141C26; color: #FFFFFF; text-transform: uppercase; }
.mdt-dlg .hosp-pick { display: flex; flex-direction: column; gap: 6px; }
.mdt-dlg .hbtn { width: 100%; height: auto; padding: 10px 14px; flex-direction: column; align-items: flex-start; gap: 3px; border-left: 4px solid #43A047; white-space: normal; text-align: left; }
.mdt-dlg .hbtn b { font: 700 16px var(--ui); } .mdt-dlg .hbtn span { font-size: 13px; color: #9FB0C6; font-weight: 400; }
.mdt-dlg .hbtn.DIVERT { border-left-color: #FDD835; } .mdt-dlg .hbtn.CLOSED { border-left-color: #E53935; }

/* ---------- 7b the rugged docked tablet the in-game MDT sits in. Brand-neutral on purpose. */
body.game .tb { position: fixed; left: 7vw; right: 7vw; top: 4vh; bottom: 3vh; display: flex; flex-direction: column; align-items: stretch; pointer-events: auto; filter: drop-shadow(0 30px 50px rgba(0, 0, 0, .75)); }
body.game .tb[hidden] { display: none; }
.tb-body { position: relative; flex: 1; min-height: 0; border-radius: 28px; padding: 46px 78px 52px 92px;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .012) 0 2px, transparent 2px 5px),
    linear-gradient(160deg, #3B3E44 0%, #2A2C31 38%, #1E2024 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .08), inset 0 -3px 0 rgba(0, 0, 0, .55), inset 0 0 0 2px #15161A, 0 0 0 1px #0A0A0C; }
/* rubber corner bumpers */
.tb-c { position: absolute; width: 120px; height: 120px; background: radial-gradient(circle at 30% 25%, #2A2B2E, #121315 70%); box-shadow: inset 0 2px 2px rgba(255, 255, 255, .06), inset 0 -4px 6px rgba(0, 0, 0, .6); z-index: 2; }
.tb-c::after { content: ''; position: absolute; inset: 14px; border: 2px solid rgba(255, 255, 255, .03); border-radius: inherit; }
.tb-c { cursor: nwse-resize; } .tb-c.tr, .tb-c.bl { cursor: nesw-resize; }
.tb-body, .tb-top, .tb-badge, .tb-strap, .tb-dock { cursor: move; } .tb.moving, .tb.moving * { cursor: grabbing !important; } .tb.moving, .tb.resizing { user-select: none; }
.tb-c.tl { left: -8px; top: -8px; border-radius: 34px 10px 60px 10px; } .tb-c.tr { right: -8px; top: -8px; border-radius: 10px 34px 10px 60px; }
.tb-c.bl { left: -8px; bottom: -8px; border-radius: 10px 60px 10px 34px; } .tb-c.br { right: -8px; bottom: -8px; border-radius: 60px 10px 34px 10px; }
/* the bezel and the glass */
.tb-bezel { position: relative; z-index: 3; height: 100%; padding: 14px; background: #08090A; border-radius: 10px; box-shadow: inset 0 0 0 2px #1B1C20, 0 0 0 3px #1A1B1F, 0 2px 0 4px rgba(255, 255, 255, .04); }
.tb-screen { position: relative; height: 100%; overflow: hidden; background: #000; }
.tb-screen > * { height: 100%; }
.tb-screen::after { content: ''; position: absolute; inset: 0; z-index: 30; pointer-events: none; box-shadow: inset 0 0 0 1px #000, inset 0 0 40px rgba(0, 0, 0, .35);
  background: linear-gradient(118deg, rgba(255, 255, 255, .07) 0%, rgba(255, 255, 255, .025) 26%, rgba(255, 255, 255, 0) 44%); }
/* top: status lights, camera, light sensor */
.tb-top { position: absolute; left: 50%; top: 15px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; z-index: 3; }
.tb-cam { width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #3C4A66, #050608 60%); box-shadow: 0 0 0 3px #15161A; margin-left: 22px; }
.tb-sensor { width: 6px; height: 6px; border-radius: 50%; background: #111; box-shadow: 0 0 0 2px #1A1B1F; }
.tb-led { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #1C2A1F; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .6); }
.tb-led.on { background: #3DFF6A; box-shadow: 0 0 6px #3DFF6A; } .tb-led.amber { background: #FFB300; box-shadow: 0 0 6px #FFB300; }
/* left: the hardware keys */
.tb-keys { position: absolute; left: 22px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 14px; z-index: 3; }
.tb-key { width: 48px; height: 44px; border-radius: 8px; display: grid; place-items: center; font: 700 13px var(--ui); color: #9AA0A8; letter-spacing: 0;
  background: linear-gradient(#2E3035, #1C1D21); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 -2px 0 rgba(0, 0, 0, .5), 0 0 0 1px #0E0F12; }
button.tb-key { border: none; padding: 0; cursor: pointer; font-size: 20px; } button.tb-key.pwr { color: #E53935; } button.tb-key:hover { color: #FF6B5E; }
button.tb-key:focus-visible { outline: 2px solid #64B5F6; outline-offset: 2px; }
/* right: the hand strap */
.tb-strap { position: absolute; right: 18px; top: 18%; bottom: 18%; width: 40px; z-index: 3; border-radius: 10px;
  background: repeating-linear-gradient(0deg, #1A1B1E 0 6px, #222327 6px 8px); box-shadow: inset 0 0 0 2px #0E0F12, inset 3px 0 6px rgba(0, 0, 0, .5); }
.tb-strap i { position: absolute; inset: 8px 6px; border: 1px dashed rgba(255, 255, 255, .12); border-radius: 6px; }
.tb-strap::before, .tb-strap::after { content: ''; position: absolute; left: -6px; width: 52px; height: 22px; border-radius: 5px; background: linear-gradient(#45484E, #2C2E33); box-shadow: inset 0 0 0 1px #111; }
.tb-strap::before { top: -14px; } .tb-strap::after { bottom: -14px; }
/* badge under the screen */
.tb-badge { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 3; font: 700 11px/1 var(--ui); letter-spacing: .32em; color: #7E848D; text-shadow: 0 1px 0 rgba(0, 0, 0, .7); }
.tb-badge i { color: #555A62; }
/* the vehicle dock: a cradle the tablet sits in and the mounting arm below it */
.tb-dock { order: 2; position: relative; height: 40px; flex: none; }
.tb-cradle { position: absolute; left: 22%; right: 22%; top: -26px; height: 44px; border-radius: 0 0 14px 14px; background: linear-gradient(#26282C, #121316); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .05), 0 0 0 1px #0A0A0C;
  display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 12px 22px 0; font: 700 10px/1 var(--ui); letter-spacing: .25em; color: #6E747D; font-style: normal; }
.tb-arm { position: absolute; left: 50%; top: 14px; width: 120px; height: 40px; transform: translateX(-50%); background: linear-gradient(90deg, #1A1B1E, #3A3D42 50%, #1A1B1E); border-radius: 0 0 6px 6px; box-shadow: 0 0 0 1px #0A0A0C; }


/* ---------- 7c the MDT at a truck's dash screen (client/screens.lua, main.js dock()): the rugged
   tablet, placed and sized so it sits over the truck's own tablet where the camera framed it.
   It stays still on the monitor while the cab moves a little around it. */
body.game .tb.cab .tb-dock { display: none; }
body.game .tb.cab .tb-body { padding: var(--pt) var(--pr) var(--pb) var(--pl); cursor: default; }
body.game .tb.cab { animation: cab-in .3s ease-out both; }
@keyframes cab-in { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }
/* the read-only copy on a truck's dash screen (a DUI the size of the screen) */
body.mirror { background: #000; }
body.mirror #mirror-screen { position: fixed; inset: 0; height: auto; }
body.mirror .mdt * { cursor: none !important; }