/* Monochrome interface. State remains explicit in labels and borders. */
:root {
  --bg:#f5f5f5; --surface:#fff; --ink:#181818; --muted:#666666;
  --line:#dedede; --blue:#202020; --sidebar:#181818;
  --red:#5c5c5c; --green:#646464; --amber:#6e6e6e; --radius:6px;
}
body { color:var(--ink); }
.sidebar,.directory-camera,.sidebar-user { color:#bdbdbd; }
.directory-title span,.ov-tree>summary small { color:#999; }
.app-footer { color:#777; }
.small-dot,.demo-label i { background:#999; }
.toast { background:#222; color:#fff; }
.ov-context>span:first-child { color:#444; }
.brand { padding:22px 16px; gap:8px; font-size:20px; letter-spacing:-.5px; }
.brand img { display:block; width:64px; height:48px; object-fit:contain; flex:none; }
.brand small { font-size:10px; letter-spacing:0; color:#b1b1b1; margin-top:5px; }
.sidebar { background:var(--sidebar); }
.workspace-label,.stage-pill { color:#a3a3a3; letter-spacing:1px; }
.site-name,.sidebar-bottom>strong { color:#e1e1e1; }
.site-name span,.directory-camera small,.sidebar-user small { color:#a7a7a7; }
.nav-item { color:#bebebe; border-radius:4px; }
.nav-item:hover { background:#353535; color:#fff; }
.nav-item.active { background:#464646; color:#fff; box-shadow:inset 3px 0 #a3a3a3; }
nav,.sidebar-bottom,.sidebar-user { border-color:#444444; }
.sidebar-user>span { background:#424242; color:#e1e1e1; }
.directory-title,.ov-tree>summary { color:#c6c6c6; }
.directory-camera.selected { background:#414141; border-color:#696969; }
.app-header { background:#fbfbfb; border-color:var(--line); }
h1,h2,h3,.header-title { color:#333333; }
h1 { font-weight:650; letter-spacing:-.7px; }
.page-caption,.breadcrumb,.ov-context,.ov-caption,.ov-small,
.ov-detail>p,.ov-reading>span,.ov-reading>small,.ov-facts dt,
.ov-metric p,.ov-queue-row small,.ov-cabinet-top small { color:#737373; }
.demo-label { background:#f1f1f1; border-color:#e1e1e1; color:#6f6f6f; }
.btn { border-radius:4px; border-color:#d8d8d8; color:#565656; box-shadow:none; }
.btn:hover { background:#f2f2f2; border-color:#b5b5b5; }
.btn.primary { background:#575757; border-color:#575757; color:#fff; }
.btn.primary:hover { background:#4a4a4a; border-color:#4a4a4a; }
.dx-link,.dx-panel-link,.ov-detail-label,.ov-queue-row>b { color:#575757; }
.dx-link.danger { color:#5c5c5c; }
.dx-panel,.metric,.dx-stat,.hx-paper { border-color:var(--line); border-radius:6px; box-shadow:none; }
.ov-metrics { gap:0; background:#fff; border:1px solid var(--line); border-radius:6px; overflow:hidden; }
.ov-metric { border:0; border-right:1px solid var(--line); border-radius:0; padding:18px 22px; }
.ov-metric:last-child { border-right:0; }
.ov-metric>span { color:#585858; }
.ov-metric>strong { font-weight:600; }
.ov-metric.alarm strong,.dx-stat.red strong { color:#5c5c5c; }
.ov-metric.pending strong,.dx-stat.amber strong { color:#6e6e6e; }
.ov-panel-head,.dx-panel-head { border-color:var(--line); }
.ov-filters { background:#fbfbfb; border-color:var(--line); }
.ov-filters label { color:#6a6a6a; font-size:11px; }
.ov-filters input,.ov-filters select { border-color:#dadada; color:#464646; }
.ov-views button[aria-pressed=true],.dx-tabs button[aria-pressed=true],
.dx-roi-tabs button[aria-pressed=true] { background:#eeeeee; border-color:#b8b8b8; color:#4e4e4e; }
.ov-legend { color:#686868; }
.ov-room { background:transparent; border:0; border-radius:0; padding:6px 0 18px; margin:0; }
.ov-room-head { border-bottom:1px solid var(--line); padding:0 0 10px; margin-bottom:14px; }
.ov-room-head h3 { color:#4b4b4b; font-size:13px; }
.ov-room-head>span { color:#797979; }
.ov-cabinet { border-color:#dddddd; border-top-color:#818181; color:#424242; border-radius:4px; }
.ov-cabinet.alarm { background:#fff; border-top-color:#6b6b6b; }
.ov-cabinet.stale { border-top-color:#8e8e8e; }
.ov-cabinet.unlinked { background:#fbfbfb; border-top-color:#b1b1b1; }
.ov-cabinet.selected { outline:1px solid #575757; outline-offset:1px; background:#f6f6f6; }
.ov-cabinet:hover { box-shadow:none; border-left-color:#979797; border-right-color:#979797; }
.ov-cabinet-value { font-weight:600; }
.ov-symbol { background:#f2f2f2; border-color:#dcdcdc; }
.ov-symbol i { background:linear-gradient(#c2c2c2 30%,#f0f0f0 30% 62%,#c2c2c2 62%); border-color:#b2b2b2; }
.ov-symbol.gis i { background:#e2e2e2; border-color:#b7b7b7; }
.alarm .ov-symbol i:nth-child(2) { background:#c0c0c0; border-color:#898989; }
.dx-badge { border-radius:3px; background:#f0f0f0; color:#6c6c6c; }
.dx-badge.normal { background:#f2f2f2; color:#5c5c5c; }
.dx-badge.alarm { background:#eeeeee; color:#545454; }
.dx-badge.stale,.dx-badge.video { background:#f0f0f0; color:#636363; }
.status-dot.normal { background:#747474; }
.status-dot.alarm { background:#6e6e6e; }
.status-dot.stale { background:#898989; }
.status-dot.unlinked { background:#acacac; }
.ov-reading,.ov-device { border-color:var(--line); }
.ov-reading>strong { font-weight:600; }
.ov-device,.ov-device strong { color:#747474; }
.ov-queue-row { color:#4a4a4a; border-color:#e6e6e6; }
.ov-queue-row:hover { background:#f6f6f6; }
.ov-table { color:#494949; }
.ov-table thead,.dx-table th { background:#f5f5f5; color:#6c6c6c; }
.ov-table th,.ov-table td { border-color:#e4e4e4; }
.ov-table tr.selected,.dx-event-row.selected,.hx-event.active,.hx-saved.active { background:#f2f2f2; border-left-color:#707070; }
.dx-intro,.dx-status-lanes,.dx-record-note,.eq-summary,
.gx-step,.hx-readout,.hx-report-check { background:#f4f4f4; border-color:#e1e1e1; color:#6f6f6f; }
.hx-paper-brand,.hx-paper-title h2,.hx-paper section h3 { color:#484848; }
.hx-paper-brand { border-color:#666666; }
.hx-paper-brand strong { display:flex; align-items:center; gap:4px; letter-spacing:0; white-space:nowrap; }
.hx-paper-brand img { width:48px; height:36px; object-fit:contain; }
.gx-overview>span { border-color:var(--line); border-radius:6px; color:#737373; }
.gx-overview b,.gx-form h3,.gx-rule-body h3,.gx-roi-select strong { color:#505050; }
.gx-tree button { color:#606060; }
.gx-tree button.active { background:#f2f2f2; border-left-color:#707070; color:#4e4e4e; }
.gx-form label,.gx-rule-body form label,.hx-filters label,.hx-control-body label { color:#737373; }
.gx-note,.gx-link-flow,.hx-control-body textarea[readonly] { background:#f5f5f5; color:#737373; }
.gx-step span:first-child { color:#575757; }
.gx-form input,.gx-form select,.gx-rule-body input,.gx-rule-body select,
.hx-filters select,.hx-control-body select,.hx-control-body textarea { border-color:#dadada; color:#4f4f4f; }
.gx-roi-select input,.hx-cursor input { accent-color:#575757; }
.gx-form input:focus,.gx-rule-body input:focus { outline:2px solid #767676; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,
.ov-main button:focus-visible,.ov-detail a:focus-visible,.ov-queue-row:focus-visible {
  outline:2px solid #767676; outline-offset:3px;
}
/* Typography and hierarchy: restrained headings, readable operational data. */
body { font-family:"Segoe UI","Malgun Gothic",sans-serif; font-size:13px; line-height:1.5; }
h1 { font-size:28px; line-height:1.25; font-weight:650; letter-spacing:-.8px; }
.page-caption { font-size:12px; line-height:1.7; color:#666; }
.breadcrumb { font-size:11px; }
.header-title { font-size:12px; color:#444; }
.nav-item { font-size:12px; }
.nav-item.active { background:#fff; color:#171717; box-shadow:none; font-weight:650; }
.nav-item.active:hover { background:#e8e8e8; color:#171717; }
.nav-arrow { color:inherit; }
.btn { font-size:12px; font-weight:500; color:#333; }
.btn.primary { background:#202020; border-color:#202020; color:#fff; }
.btn.primary:hover { background:#000; border-color:#000; }
.dx-link { color:#333; text-decoration:underline; text-underline-offset:3px; }
.ov-views button[aria-pressed=true],.dx-tabs button[aria-pressed=true],.dx-roi-tabs button[aria-pressed=true] {
  background:#ededed; border-color:#888; color:#111; font-weight:650;
}
.ov-context { font-size:12px; }
.ov-metric>span { font-size:12px; color:#505050; }
.ov-metric>strong { font-size:32px; color:#202020; font-variant-numeric:tabular-nums; }
.ov-metric.alarm strong,.ov-metric.pending strong { color:#202020; }
.ov-metric p { font-size:11px; color:#666; }
.ov-panel-head { padding:18px; }
.ov-legend { font-size:11px; }
.ov-room-head h3 { font-size:14px; font-weight:650; color:#262626; }
.ov-room-head>span { font-size:11px; }
.ov-cabinet { padding:15px; border-top:1px solid #d8d8d8; color:#222; }
.ov-cabinet.alarm { border-top:3px solid #222; }
.ov-cabinet.stale { border-top:3px dashed #8a8a8a; }
.ov-cabinet.unlinked { border-top:1px solid #d8d8d8; background:#fafafa; }
.ov-cabinet.selected { outline:2px solid #222; outline-offset:1px; background:#fff; }
.ov-cabinet>strong { font-size:14px; font-weight:600; }
.ov-cabinet-top small { font-size:10px; }
.ov-cabinet-value { font-size:24px; color:#171717; }
.ov-cabinet-value small { font-size:11px; }
.ov-cabinet .dx-badge { font-size:11px; }
.ov-small,.ov-caption { font-size:11px; color:#6b6b6b; }
.ov-detail-label { font-size:11px; color:#666; }
.ov-detail h2 { font-size:21px; letter-spacing:-.5px; }
.ov-detail>p { font-size:11px; line-height:1.7; }
.ov-reading>span,.ov-reading>small { font-size:11px; }
.ov-reading>strong { font-size:38px; color:#111; font-variant-numeric:tabular-nums; }
.ov-facts { font-size:12px; gap:14px 8px; }
.ov-device,.ov-device strong,.ov-device small { font-size:11px; }
.ov-queue-row { font-size:12px; }
.ov-queue-row small { font-size:11px; }
.ov-table { font-size:12px; }
.ov-table thead,.ov-table th small { font-size:11px; }
.dx-badge.normal { background:#f0f0f0; color:#555; }
.dx-badge.alarm { background:#242424; color:#fff; }
.dx-badge.stale,.dx-badge.video { background:#fff; border:1px dashed #888; color:#444; }
.status-dot.normal { background:#fff; border:1px solid #666; }
.status-dot.alarm { background:#222; }
.status-dot.stale,.status-dot.video { background:#888; }
.status-dot.unlinked { background:#ccc; }
.avatar,.metric-icon,.metric-icon.red,.metric-icon.amber { background:#ededed; color:#555; }
.btn.selected,.camera-tile.selected,.roi-row.active { border-color:#333; }
.tile-temperature.alarm,.metric-value.red,.metric-value.amber,.dx-live { color:#222; }
.dx-stat.red strong,.dx-stat.amber strong,.dx-event-row>div b { color:#222; }
.dx-rule-evidence,.dx-edit-banner,.gx-test { background:#f3f3f3; color:#333; border-color:#ccc; }
.dx-event-row,.dx-event-body>p,.dx-event-row p,.dx-event-row>div:last-child,
.dx-timeline,.dx-timeline b,.dx-muted,.dx-panel-head p,.dx-panel-head small,
.dx-roi-form label,#dx-work-form label,.hx-event,.hx-event small,.hx-event time,
.hx-event-summary span,.hx-event-summary strong,.hx-readout strong,
.hx-action-summary span,.hx-action-summary strong,.hx-notes p,.hx-notes time { color:#555; }
.dx-alarm-tools input,.dx-alarm-tools select,.dx-roi-form input,.dx-roi-form select,
#dx-work-form select,#dx-work-form textarea { color:#333; border-color:#ccc; }
.hx-report-facts,.hx-paper .hx-action-summary { background:#f5f5f5; }
.hx-report-facts strong,.hx-report-facts span,.gx-toolbar>span,.gx-log p,.gx-log time { color:#555; }
.gx-roi-summary article,.gx-roi-select label { border-color:#ddd; color:#444; }
.hx-paper-brand span,.hx-paper-title>span,.hx-paper-title p,.hx-paper-meta span,.hx-paper-meta b,
.hx-paper section>p,.hx-opinion dt,.hx-opinion dd,.hx-paper footer { color:#666; }
@media (min-width:681px) and (max-width:950px) {
  .brand { padding:20px 10px; gap:4px; font-size:17px; }
  .brand img { width:48px; height:42px; }
  .brand small { font-size:9px; }
}
@media (max-width:820px) {
  .ov-metric { border-bottom:1px solid var(--line); padding:15px; }
  .ov-metric:nth-child(2) { border-right:0; }
  .ov-metric:nth-child(n+3) { border-bottom:0; }
}
@media (max-width:680px) {
  h1 { font-size:24px; }
  .page-caption { font-size:12px; }
  .ov-context { font-size:11px; }
  .ov-metric>strong { font-size:28px; }
  .ov-cabinet { padding:11px; }
  .ov-cabinet>strong { font-size:13px; }
  .ov-facts { font-size:12px; }
  .brand { padding:12px 14px; font-size:19px; gap:5px; }
  .brand img { width:56px; height:44px; }
  .brand small { font-size:9px; letter-spacing:0; }
  .ov-filters .btn,.ov-filters input,.ov-filters select { min-height:40px; }
  .ov-room { padding:6px 0 16px; }
}
/* Operational layout. Keep breakpoints together to avoid conflicting overrides. */
:root { --bg:#f3f4f6; --ink:#252a31; --line:#dde1e6; --blue:#46627c; --red:#b42318; --amber:#946200; }
h1 {font-size:22px;letter-spacing:-.5px}
.sidebar {overflow-y:auto}
.sidebar nav {flex:none}
.sidebar .brand {padding:20px 12px;gap:6px;font-size:18px;white-space:nowrap}
.sidebar .brand img {width:48px;height:40px}
.sidebar .brand small {font-size:9px;white-space:nowrap}
.sidebar-bottom {display:none}
.nav-section-label {font-size:11px;color:#a9afb7;padding:12px 12px 6px}
.nav-item.active {background:#e8edf2;color:#263e54;box-shadow:inset 3px 0 #7891a7}
.camera-directory {flex:none;overflow:visible}
.camera-directory summary {cursor:pointer}
.ov-context {margin-bottom:10px;font-size:12px}
.ov-metrics {margin-bottom:16px;border-radius:4px}
.ov-metric {padding:10px 14px;gap:2px}
.ov-metric>strong {font-size:24px}
.ov-metric.alarm strong {color:#b42318}
.ov-metric.pending strong {color:#946200}
.ov-workspace {display:grid;grid-template-columns:minmax(0,1fr) 310px;grid-template-areas:"assets alarms" "detail detail";gap:16px;align-items:start}
.ov-main {grid-area:assets;min-width:0}
.ov-queue {grid-area:alarms;margin:0;max-height:none;overflow:visible}
.ov-detail {grid-area:detail;position:static;padding:18px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px 24px;align-items:start}
.ov-detail-label,.ov-detail>h2,.ov-detail>p,.ov-detail>.dx-badge {grid-column:1;margin:0;justify-self:start}
.ov-detail .ov-reading {grid-column:1;padding:8px 0;border:0}
.ov-detail .ov-facts {grid-column:2;grid-row:1/6;margin:0;gap:14px 10px}
.ov-detail .ov-detail-actions {grid-column:3;grid-row:1/6}
.ov-detail .ov-device {grid-column:1/-1;margin:0;padding-top:10px}
.ov-detail .ov-device strong,.ov-detail .ov-device small {display:inline;margin-left:10px}
.ov-reading>strong {font-size:26px}
.ov-panel-head {padding:12px 14px;gap:8px}
.ov-queue h2 {font-size:14px}
.ov-queue .ov-caption {font-size:11px;padding:8px 14px}
.ov-queue-row {grid-template-columns:1fr;gap:6px;padding:14px;overflow-wrap:anywhere}
.ov-queue-row>span:nth-child(3) {grid-column:auto;display:flex;gap:8px;align-items:center;font-size:11px}
.ov-queue-row>span:nth-child(3) small {margin:0}
.ov-queue-row>b {display:none}
.ov-filters {padding:10px 14px;gap:8px}
.ov-legend {padding:10px 14px}
.ov-table {font-size:12px}
.ov-table th,.ov-table td {padding:10px 8px}
.ov-table td small {display:block;font-size:11px;color:#68717d}
.ov-table tr.selected {background:#edf2f6;box-shadow:inset 3px 0 #46627c}
.btn.primary {background:#344b60;border-color:#344b60}
.btn.primary:hover {background:#25394a;border-color:#25394a}
.ov-views button[aria-pressed=true] {background:#e9eff4;border-color:#97a9b9;color:#314b62}
.dx-badge.alarm {background:#fff0ed;color:#a51e16;border:1px solid #e9b9b2}
.status-dot.alarm {background:#b42318;border:0}
.dx-badge.stale,.dx-badge.video {color:#665a40;background:#faf7f0;border:1px dashed #a6997c}
.ov-cabinet.alarm {border-top-color:#b42318}
.ov-cabinet.selected {outline-color:#46627c}
.tile-temperature.alarm,.metric-value.red,.dx-stat.red strong {color:#b42318}
@media(max-width:1200px) {
 .ov-workspace {grid-template-columns:minmax(0,1fr);grid-template-areas:"alarms" "assets" "detail"}
 .ov-queue {display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
 .ov-queue .ov-panel-head,.ov-queue .ov-caption,.ov-queue .ov-empty {grid-column:1/-1}
 .ov-queue-row {border-right:1px solid var(--line);align-content:start}
 .ov-detail {grid-template-columns:1fr 1fr}
 .ov-detail .ov-detail-actions {grid-column:1/-1;grid-row:auto;display:flex;flex-wrap:wrap}
}
@media(max-width:680px) {
 .sidebar nav {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible;gap:4px;padding:0 10px 10px}
 .nav-section-label {display:none}
 .sidebar .nav-item {width:auto;min-width:0;white-space:normal;padding:8px 6px;margin:0;font-size:11px;gap:5px;min-height:40px}
 .sidebar .nav-item svg {width:14px;height:14px}
 .nav-arrow {display:none}
 h1 {font-size:21px}
 .ov-context {gap:4px;font-size:11px}
 .ov-metric {padding:8px 10px}
 .ov-metric>strong {font-size:22px}
 .ov-metric p {display:none}
 .ov-queue {display:block}
 .ov-queue-row {grid-template-columns:1fr auto;padding:12px;gap:6px 10px}
 .ov-queue-row>span:first-child {grid-column:1/-1}
 .ov-queue-row>span:nth-child(3) {display:block}
 .ov-queue-row>span:nth-child(3) small {margin-top:5px}
 .ov-filters label {font-size:12px;flex:1;min-width:110px}
 .ov-filters .ov-search {flex-basis:100%}
 .ov-filters .btn {min-height:42px;flex:1}
 .ov-table {min-width:0;white-space:normal;display:block}
 .ov-table thead {display:none}
 .ov-table tbody {display:block}
 .ov-table tr {display:grid;grid-template-columns:1fr 1fr;padding:12px;gap:8px;border-bottom:1px solid var(--line)}
 .ov-table th,.ov-table td {padding:0;border:0;min-width:0}
 .ov-table th {grid-column:1/-1;font-size:14px}
 .ov-table td[data-label]:before {content:attr(data-label);display:block;font-size:11px;color:#68717d;margin-bottom:3px}
 .ov-select-cell {grid-column:1/-1}
 .ov-select-cell .btn {width:100%;min-height:42px}
 .ov-detail {display:block;padding:16px}
 .ov-detail>p,.ov-detail>.dx-badge {margin-top:8px}
 .ov-detail .ov-facts {margin:12px 0}
 .ov-detail .ov-detail-actions {display:grid}
 .ov-detail-actions .btn {min-height:44px}
 .ov-detail .ov-device {margin-top:12px}
 .ov-detail .ov-device strong,.ov-detail .ov-device small {display:block;margin:0}
}