/* 10-8 Systems dashboards: TV screen. Sizes are in rem; the root font size scales with the screen. */
html { font-size: 1.9vh; }
html.ts-normal { font-size: 1.55vh; }
html.ts-large { font-size: 1.9vh; }
html.ts-xlarge { font-size: 2.35vh; }
html.tall.ts-normal { font-size: 1.55vw; }
html.tall.ts-large { font-size: 1.9vw; }
html.tall.ts-xlarge { font-size: 2.35vw; }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #0b0c0e; color: #eef0f3; overflow: hidden; cursor: none;
  font-family: 'Segoe UI', 'Open Sans', Verdana, Arial, Helvetica, sans-serif; }
#app { position: fixed; top: 0; right: 0; bottom: 0; left: 0; transition: transform 2s ease; }

/* ---------- full-screen messages (connect code, paused, off) ---------- */
.msg { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; padding: 4rem; }
.msg-logo { font-size: 1.4rem; color: #8a929c; letter-spacing: .15em; text-transform: uppercase; margin-bottom: 2.5rem; }
.msg-title { font-size: 2.2rem; color: #cfd3d9; margin-bottom: 1.5rem; }
.msg-code { font-family: Consolas, 'Courier New', monospace; font-size: 7rem; font-weight: 700; letter-spacing: .6rem; color: #fff; margin: .5rem 0 1.5rem; }
.msg-text { font-size: 1.4rem; color: #a3aab4; line-height: 1.5; max-width: 44rem; }
.msg-small { font-size: 1rem; color: #6f7782; margin-top: 2rem; }
.msg-dot { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; background: #1ba1e2; margin-right: .6rem; vertical-align: middle; }

/* ---------- dashboard ---------- */
.board { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; flex-direction: column; padding: .8rem; gap: .7rem; }
.bar { display: flex; align-items: center; gap: 1.1rem; padding: 0 1.1rem; height: 3.6rem; background: #15171b; border-radius: .3rem; flex: none; }
.bar-logo { height: 2.6rem; width: auto; max-width: 6rem; object-fit: contain; }
.bar-title { display: flex; flex-direction: column; min-width: 0; }
.bar-name { font-size: 1.45rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-agency { font-size: .85rem; color: #a3aab4; }
.bar-right { margin-left: auto; display: flex; align-items: center; gap: 1.6rem; }
.bar-updated { font-size: .85rem; color: #7ee08a; display: flex; align-items: center; gap: .4rem; }
.bar-updated:before { content: ''; width: .55rem; height: .55rem; border-radius: 50%; background: #3fb950; }
.bar-date { font-size: 1rem; color: #cfd3d9; }
.bar-time { font-size: 2rem; font-weight: 600; font-variant-numeric: tabular-nums; }

.stale { display: none; align-items: center; gap: .8rem; padding: .6rem 1.1rem; background: #b93a36; color: #fff; font-size: 1.1rem; font-weight: 600; border-radius: .3rem; flex: none; }
.board.is-stale .stale { display: flex; }
.board.is-stale .grid { opacity: .5; }
.board.is-stale .bar-updated { display: none; }

.grid { flex: 1; display: grid; gap: .7rem; min-height: 0; }
.footer { flex: none; padding: .6rem 1.1rem; background: #2b2410; color: #ffd98f; font-size: 1.05rem; border-radius: .3rem; }

.p { background: #15171b; border-radius: .3rem; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; }
.p-head { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; padding: .7rem .9rem .4rem; flex: none; }
.p-title { font-size: 1.2rem; font-weight: 600; }
.p-count { font-size: .85rem; color: #a3aab4; }
.p-body { flex: 1; min-height: 0; overflow: hidden; padding: 0 .9rem .7rem; position: relative; }
.p-empty { color: #6f7782; font-size: 1rem; padding: .6rem 0; }
.p-error { color: #ff8a85; font-size: .9rem; padding: .6rem 0; }

/* calls / pending tables */
.t { width: 100%; border-collapse: collapse; table-layout: fixed; }
.t th { text-align: left; font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: #8a929c; font-weight: 600; padding: .3rem .4rem; }
.t td { font-size: 1rem; padding: .45rem .4rem; border-top: 1px solid #23272d; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.t td.num { font-variant-numeric: tabular-nums; text-align: right; }
.t th.num { text-align: right; }
.t td.strong { font-weight: 600; }
.t tr.late td { background: rgba(229, 83, 75, .14); }
.pri { display: inline-block; min-width: 1.7rem; text-align: center; padding: .1rem .35rem; border-radius: .2rem; font-weight: 700; color: #0b0c0e; background: #5aa9ff; }
.pri.p1 { background: #e5534b; } .pri.p2 { background: #f0a33a; }
.st { font-size: .85rem; color: #cfd3d9; }
.st-Waiting { color: #ffb3ae; font-weight: 600; }

/* units */
.ug { margin-bottom: .6rem; }
.ug-name { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: #8a929c; margin-bottom: .35rem; }
.ug-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip { display: inline-flex; flex-direction: column; padding: .3rem .55rem; border-radius: .25rem; border: 1px solid; min-width: 5.5rem; }
.chip b { font-size: 1rem; }
.chip span { font-size: .78rem; }
.chip i { font-style: normal; font-size: .72rem; opacity: .85; }
.c-avail { background: #13321b; color: #9be7a6; border-color: #2c6b38; }
.c-disp { background: #3a2a0e; color: #ffd27a; border-color: #7a5a1c; }
.c-scene { background: #3a1715; color: #ffb3ae; border-color: #7a2e2a; }
.c-busy { background: #2f2a12; color: #f5d97a; border-color: #6b5c1f; }
.c-oos { background: #23272d; color: #a3aab4; border-color: #383d45; }

/* numbers */
.tiles { display: grid; gap: .6rem; height: 100%; }
.tile { background: #1b1e23; border-radius: .25rem; padding: .7rem .9rem; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.tile-label { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: #a3aab4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile-value { font-size: 2.6rem; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.tile-sub { font-size: .78rem; color: #8a929c; }

/* charts */
.cols { display: flex; align-items: flex-end; gap: .25rem; height: 100%; padding-bottom: 1.3rem; position: relative; }
.col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; position: relative; }
.col-bar { width: 100%; background: #5aa9ff; border-radius: .15rem .15rem 0 0; min-height: 1px; }
.col-val { font-size: .65rem; color: #cfd3d9; margin-bottom: .15rem; }
.col-label { position: absolute; bottom: -1.2rem; font-size: .65rem; color: #8a929c; white-space: nowrap; }
.rows { display: flex; flex-direction: column; gap: .45rem; }
.row-head { display: flex; justify-content: space-between; font-size: .95rem; margin-bottom: .15rem; }
.row-head span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: .6rem; }
.row-track { height: .5rem; background: #23272d; border-radius: .25rem; }
.row-bar { height: .5rem; background: #5aa9ff; border-radius: .25rem; }

/* feed */
.feed-row { display: flex; gap: .8rem; align-items: baseline; padding: .45rem 0; border-top: 1px solid #23272d; font-size: 1rem; }
.feed-row:first-child { border-top: 0; }
.feed-type { font-weight: 600; flex: 0 0 38%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feed-where { color: #cfd3d9; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feed-when { color: #8a929c; font-size: .85rem; white-space: nowrap; }

/* message, clock, weather */
.message { font-size: 1.5rem; line-height: 1.45; white-space: pre-line; word-wrap: break-word; }
.clock { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.clock-time { font-size: 5rem; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1; }
.clock-date { font-size: 1.4rem; color: #cfd3d9; margin-top: .6rem; }
.wx { height: 100%; display: flex; flex-direction: column; justify-content: center; gap: .5rem; }
.wx-temp { font-size: 4rem; font-weight: 600; line-height: 1; }
.wx-desc { font-size: 1.3rem; color: #cfd3d9; }
.wx-alert { margin-top: .4rem; padding: .5rem .7rem; background: #3a1715; color: #ffb3ae; border-left: .25rem solid #e5534b; font-size: .95rem; }

/* map */
.map { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: #121519; }
.p-map .p-body { padding: 0; }
.leaflet-container { background: #121519; font-family: inherit; }
.leaflet-control-attribution { font-size: .6rem; background: rgba(11,12,14,.7) !important; color: #8a929c; }
.leaflet-control-attribution a { color: #8a929c; }
.ulabel { background: #1f6fc5; color: #fff; font-size: .75rem; font-weight: 700; padding: .05rem .3rem; border-radius: .15rem; white-space: nowrap; border: 1px solid #0b0c0e; }
.ulabel.c-avail { background: #2c6b38; color: #fff; } .ulabel.c-disp { background: #a2741c; color: #fff; }
.ulabel.c-scene { background: #a33c37; color: #fff; } .ulabel.c-oos { background: #4a5059; color: #fff; }

/* map looks (keyless public basemaps have no dark or gray style, so they're tinted) */
.map-live, .map-live * { cursor: grab; }
.look-dark .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.85) contrast(.9) saturate(.35); }
.look-light .leaflet-tile-pane { filter: grayscale(1) brightness(1.04) contrast(.92); }
.leaflet-control-zoom a { background: #15171b !important; color: #eef0f3 !important; border-color: #383d45 !important; }

/* pins, clusters, legend, spotlight */
.pin { position: relative; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; }
.pin-dot { width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 2px solid #0b0c0e; color: #fff; font-size: .8rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center; line-height: 1; box-shadow: 0 1px 3px rgba(0,0,0,.5); }
.pin-name { margin-top: .15rem; font-size: .7rem; font-weight: 600; color: #fff; white-space: nowrap; text-shadow: 0 0 3px #000, 0 0 3px #000, 0 0 2px #000; }
.mcl { transform: translate(-50%, -50%); min-width: 2rem; height: 2rem; padding: 0 .4rem; border-radius: 1rem; background: rgba(31,111,197,.92);
  border: 2px solid #0b0c0e; color: #fff; font-weight: 700; font-size: .9rem; display: flex; align-items: center; justify-content: center; }
.mcl-hot { background: rgba(229,83,75,.95); }
.legend { position: absolute; left: .6rem; bottom: 1.6rem; z-index: 900; background: rgba(11,12,14,.82); border-radius: .25rem;
  padding: .45rem .6rem; font-size: .72rem; color: #cfd3d9; display: flex; flex-direction: column; gap: .25rem; pointer-events: none; }
.legend-row { display: flex; align-items: center; gap: .45rem; white-space: nowrap; }
.legend-sw { display: inline-block; width: .75rem; height: .75rem; flex: none; }
.legend-dot { border-radius: 50%; } .legend-box { border-radius: .15rem; }
.legend-line { height: 0; border-top: 2px solid; }
.spot { position: absolute; top: .7rem; left: 50%; transform: translateX(-50%); z-index: 900; background: rgba(11,12,14,.9);
  border-left: .3rem solid #e5534b; border-radius: .25rem; padding: .6rem 1rem; max-width: 80%; pointer-events: none; }
.spot-tag { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: #ff8a85; font-weight: 700; }
.spot-type { font-size: 1.35rem; font-weight: 700; }
.spot-where { font-size: .95rem; color: #cfd3d9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spot-ring { animation: spotpulse 1.4s ease-in-out infinite; }
@keyframes spotpulse { 0%, 100% { stroke-opacity: 1; } 50% { stroke-opacity: .25; } }

/* layouts with the map behind everything */
.grid.ov { display: block; position: relative; }
.ov-slot { position: absolute; }
.ov-slot.p-none { display: none; }
.ov-m .p-head { display: none; }   /* the background map has no title bar */
.ov-m { top: 0; right: 0; bottom: 0; left: 0; z-index: 0; }
.ov-a, .ov-b, .ov-c, .ov-d { z-index: 2; background: rgba(21,23,27,.86); border: 1px solid rgba(255,255,255,.06); box-shadow: 0 .2rem .8rem rgba(0,0,0,.45); }
.ov-a .tile, .ov-b .tile, .ov-c .tile, .ov-d .tile { background: rgba(35,39,45,.75); }
.ov-map_corners .ov-a { top: 1.2%; left: .8%; width: 30%; height: 44%; }
.ov-map_corners .ov-b { top: 1.2%; right: .8%; width: 30%; height: 44%; }
.ov-map_corners .ov-c { bottom: 1.2%; left: .8%; width: 30%; height: 44%; }
.ov-map_corners .ov-d { bottom: 1.2%; right: .8%; width: 30%; height: 44%; }
.ov-map_column .ov-a { top: 1.2%; right: .8%; width: 29%; height: 31.6%; }
.ov-map_column .ov-b { top: 34.2%; right: .8%; width: 29%; height: 31.6%; }
.ov-map_column .ov-c { top: 67.2%; right: .8%; width: 29%; height: 31.6%; }
.ov-map_column .ov-d { bottom: 1.2%; left: .8%; width: 68.6%; height: 17%; }
html.tall .ov-map_corners .ov-a, html.tall .ov-map_corners .ov-b, html.tall .ov-map_corners .ov-c, html.tall .ov-map_corners .ov-d { width: 47%; height: 26%; }
html.tall .ov-map_column .ov-a, html.tall .ov-map_column .ov-b, html.tall .ov-map_column .ov-c { width: 44%; }
html.tall .ov-map_column .ov-d { width: 53%; height: 12%; }
/* the map's own legend/attribution stay clear of a bottom-left box */
.ov-map_corners .legend { left: 50%; transform: translateX(-50%); }
.ov-map_column .legend { top: .6rem; bottom: auto; }
.ov-map_column .spot { left: 35%; }

/* link password */
body.typing, body.typing * { cursor: auto; }
.pw-form { display: flex; flex-direction: column; align-items: stretch; gap: 1rem; width: 26rem; max-width: 90vw; margin-top: 1rem; text-align: left; }
.pw-label { display: flex; flex-direction: column; gap: .5rem; font-size: 1.1rem; color: #cfd3d9; }
.pw-input { height: 3.2rem; padding: 0 1rem; font-size: 1.4rem; background: #15171b; color: #eef0f3; border: 1px solid #383d45; border-radius: .25rem; }
.pw-input:focus { outline: none; border-color: #1ba1e2; }
.pw-btn { height: 3.2rem; font-size: 1.2rem; font-weight: 600; color: #fff; background: #1f6fc5; border: 0; border-radius: .25rem; cursor: pointer; }
.pw-btn:disabled { opacity: .6; }
.pw-error { color: #ff8a85; font-size: 1.05rem; }

/* embedded in a website: sized by the iframe, normal cursor, smaller type */
html[data-embed] { font-size: 1.6vh; }
html[data-embed] body, html[data-embed] body * { cursor: auto; }
html[data-embed] .bar { height: 3rem; }
html[data-embed] .bar-time { font-size: 1.5rem; }
html[data-embed] .msg-title { font-size: 1.6rem; }

/* night dimming */
.dimmer { display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,.55); pointer-events: none; z-index: 2000; }
body.dim .dimmer { display: block; }