/* Shared daylight theme. Layout, readable type sizes and data states stay in the base stylesheets. */
:root {
  color-scheme: light;
  --bg: #f7f9fc;
  --surface: #fff;
  --surface-soft: #f8fafd;
  --sidebar: #fff;
  --sidebar-soft: #f0f6ff;
  --text: #293c52;
  --muted: #5e7186;
  --subtle: #65798f;
  --border: #e5ecf3;
  --border-strong: #cfdeeb;
  --primary: #407bd0;
  --primary-dark: #2f65b2;
  --green: #218675;
  --red: #c4475e;
  --shadow: 0 14px 40px rgba(62, 96, 134, .06);
  --shadow-soft: 0 5px 22px rgba(62, 96, 134, .045);
}
body { background: var(--bg); }
::selection { color: #234e81; background: #dcecff; }

/* Console navigation and shared surfaces. */
.sidebar {
  color: var(--text);
  border-right: 1px solid var(--border);
  background: linear-gradient(180deg, #fff 0%, #fff 65%, #f5f9fe 100%);
  box-shadow: 5px 0 28px rgba(63, 94, 131, .035);
}
.brand { border-bottom-color: var(--border); }
.brand strong { color: #284461; }
.brand small { color: #617b96; }
.brand-mark { background: linear-gradient(135deg, #49bcb3, #548de0); box-shadow: 0 5px 14px #5796c52a; }
.workspace-card, .sidebar-footer { border-color: var(--border); background: #f7faff; }
.workspace-card strong, .server-health strong { color: #34516c; }
.workspace-card small, .server-health small, .sidebar-footer > small,
.resource-line, .resource-line strong { color: var(--muted); }
.workspace-icon, .workspace-badge { color: #267e7a; background: #e6f5f2; border-color: #d4eae5; }
.nav-item { color: #5c7188; border-radius: 10px; }
.nav-item:hover { color: #315f9a; background: #f0f6ff; }
.nav-item.active { color: #2e66ac; background: linear-gradient(90deg, #e8f2ff, #f2f7fe); box-shadow: inset 3px 0 #6096df; font-weight: 650; }
.nav-item.active .icon { color: #3d81cd; }
.nav-count { color: #567393; background: #eaf1f9; }
.nav-dot { color: #b74258; background: #fdebf0; }
.nav-label, .nav-section-label { color: #75889a; }
.progress { background: #e7eef5; }
.topbar { border-bottom-color: var(--border); background: rgba(255, 255, 255, .96); box-shadow: 0 3px 16px #41628506; }
.global-search, .table-search { background: #f8fafd; }
.global-search input::placeholder, .table-search input::placeholder { color: #708197; }
.panel, .settings-card, .monitor-status-panel, .connection-card,
.nested-table-panel, .history-policy-panel { border-color: var(--border); box-shadow: var(--shadow-soft); }
.panel-header, .telemetry-section-head, .telemetry-feed-head { background: #fff; border-bottom-color: var(--border); }
thead, th { background: #f7faff; color: #526a82; }
tbody tr:hover { background: #f6faff; }
.primary-button { background: linear-gradient(135deg, #4384d7, #527fc9); box-shadow: 0 4px 12px #4984c522; }
.primary-button:hover { background: #356fbe; }
.secondary-button { background: #fff; border-color: #dce6f0; }
.monitor-summary-card { background: #fff; border-color: var(--border); box-shadow: var(--shadow-soft); }
.modal-backdrop, .drawer-backdrop, .command-backdrop, .sidebar-backdrop { background: rgba(65, 90, 121, .22); backdrop-filter: blur(7px); }
.modal-card { border: 1px solid #e5edf5; background: #fff; box-shadow: 0 24px 85px #50719529; }
#loginModal .modal-card { background: linear-gradient(150deg, #fff 65%, #f4f9ff); }
#loginModal .eyebrow { color: #397ab6; }
.guide-page { --bg: #f8fafd; background: linear-gradient(165deg, #fff 0%, #f4f9ff 45%, #fcfdff 100%); }
.guide-section pre { color: #37526e; border-color: #dce7f1; background: #f3f7fc; box-shadow: none; }
.guide-endpoint-card { box-shadow: 0 14px 45px #517baa12; }

/* The console's live readings use the same calm surfaces as the rest of the portal. */
.industrial-monitor { color: var(--text); border-color: var(--border); background: #fff; box-shadow: var(--shadow-soft); }
.industrial-monitor-head { border-bottom-color: var(--border); background: #f7faff; }
.industrial-monitor-head h2, .industrial-metric-head strong { color: var(--text); }
.industrial-monitor-head p, .industrial-monitor-meta small, .industrial-metric-head small { color: var(--muted); }
.industrial-monitor .industrial-kicker { color: #387aa9; }
.industrial-metric-card, #view-telemetry .industrial-metric-card { border-color: #e1eaf3; background: linear-gradient(145deg, #fff 48%, #f2f8ff); box-shadow: 0 4px 16px #54779708; }
.industrial-metric-head { background: transparent; border-bottom-color: var(--border); }
.industrial-metric-value > strong { color: #347daf; text-shadow: none; }
.industrial-metric-value > span:not(.metric-signal-stack) { color: #526c83; }
.industrial-state { color: #237c67; background: #ecf8f2; border-color: #cde9dd; }
.industrial-state i { background: #39a383; box-shadow: none; }
.industrial-state.offline, .industrial-state.unknown { color: #61758a; background: #f0f4f8; border-color: #dce5ee; }
.industrial-state.offline i, .industrial-state.unknown i { background: #8194a7; box-shadow: none; }
.industrial-loading-card { border-color: #e5edf4; background: linear-gradient(110deg, #f5f8fc 25%, #e9f0f8 40%, #f5f8fc 55%); background-size: 240% 100%; }
#view-telemetry .industrial-metric-card.alarm-high { border-color: #efc4ce; background: linear-gradient(145deg, #fff, #fff1f4); }
#view-telemetry .industrial-metric-card.alarm-high .industrial-metric-value > strong,
#view-telemetry .metric-state-badge.alarm-high { color: #b63e55; }
#view-telemetry .metric-state-badge.alarm-high { background: #fceaf0; }
#view-telemetry .industrial-metric-card.alarm-low { border-color: #edd7b9; background: linear-gradient(145deg, #fff, #fff7ec); }
#view-telemetry .industrial-metric-card.alarm-low .industrial-metric-value > strong,
#view-telemetry .metric-state-badge.alarm-low { color: #9e641a; }
#view-telemetry .metric-state-badge.alarm-low { background: #fff1dc; }
#view-telemetry .industrial-metric-card.stale { border-color: #e3e9ef; background: #f7f9fc; }
#view-telemetry .industrial-metric-card.stale .industrial-metric-value > strong { color: #64778a; }

/* Stable per-parameter colors are shared by the ring, detail card and selected trend. */
[data-metric-tone="0"] { --metric-accent: #3485c8; --metric-wash: #eef6ff; }
[data-metric-tone="1"] { --metric-accent: #239c93; --metric-wash: #ebf9f5; }
[data-metric-tone="2"] { --metric-accent: #8767c6; --metric-wash: #f4effc; }
[data-metric-tone="3"] { --metric-accent: #258dad; --metric-wash: #ecf8fc; }
[data-metric-tone="4"] { --metric-accent: #6177c9; --metric-wash: #f0f3fd; }

/* Monitoring wall: white panels, colored accents and high-contrast readings. */
body.monitor-screen {
  --screen-bg: #f4f8fc;
  --screen-surface: #fff;
  --screen-surface-raised: #f4f8fd;
  --screen-line: #e2eaf2;
  --screen-line-strong: #d0dfec;
  --screen-text: #2a4056;
  --screen-muted: #5b7186;
  --screen-dim: #63788c;
  --screen-teal: #227f77;
  --screen-blue: #367eb5;
  --screen-warm: #a16920;
  --screen-danger: #b9435a;
  color: var(--screen-text);
  background: radial-gradient(ellipse at 8% 0%, #e9f4ff 0%, transparent 42%),
    radial-gradient(ellipse at 95% 20%, #eff9f5 0%, transparent 36%), #f7f9fd;
}
body.monitor-screen::before { background: none; }
.monitor-screen * { scrollbar-color: #cedde9 transparent; }
.monitor-screen ::-webkit-scrollbar-thumb { background: #cedde9; }
.screen-header { border-bottom-color: #dde8f2; }
.screen-clock { color: #3a5c7b; }
.screen-brand h1 { color: #30536f; font-weight: 650; }
.screen-brand h1 span { color: #51a69e; }
.screen-brand p { color: #617e97; }
.screen-brand-line { background: linear-gradient(90deg, transparent, #8bb9d8); }
.screen-brand-line::after { background: #69b4ba; }
.screen-icon-button { color: #51738f; border-color: #dce7f0; background: #fff; }
.screen-console-link { color: #416a8b; }
.screen-view-tabs { background: #fff; border-color: var(--screen-line); box-shadow: 0 4px 18px #597fa407; }
.screen-view-tabs button:hover { background: #f2f7fd; }
.screen-view-tabs button.active { color: #2e6a9d; background: linear-gradient(125deg, #e8f2ff, #ecf8f6); box-shadow: inset 0 0 0 1px #d7e8f2; }
.screen-summary { border-color: var(--screen-line); background: #fff; border-radius: 13px; box-shadow: 0 5px 24px #597fa408; }
.screen-stat-icon { color: #4a86c9; background: #eef5ff; }
.screen-stat strong { color: #3974ab; font-weight: 600; }
.screen-stat-online strong, .screen-stat-online .screen-stat-icon { color: #278976; }
.screen-stat-online .screen-stat-icon { background: #ebf8f3; }
.screen-stat-offline strong, .screen-stat-offline .screen-stat-icon { color: #77869c; }
.screen-stat-offline .screen-stat-icon { background: #f1f4f9; }
.screen-stat-alarm strong, .screen-stat-alarm .screen-stat-icon { color: #a77529; }
.screen-stat-alarm .screen-stat-icon { background: #fff5e7; }
.screen-panel { border-color: var(--screen-line); border-radius: 14px; background: #fff; box-shadow: 0 7px 28px #587ba309; }
.screen-panel-heading { background: linear-gradient(110deg, #f9fcff, #fff); }
.screen-panel-heading h2 { color: #3b546b; font-weight: 600; }
.screen-heading-mark { background: #5ba9bd; }
.screen-heading-mark-warm { background: #c19350; }
.screen-count { color: #51738f; background: #eef5fb; }
.screen-search { background: #f7faff; border-color: #e1eaf3; }
.screen-search input::placeholder { color: #6b8196; }
.screen-device-option:hover { background: #f5f9fe; }
.screen-device-option.selected { border-color: #d3e7f0; background: linear-gradient(115deg, #eef6ff, #f0faf7); }
.screen-device-option.selected::before { background: #4c9dad; }
.screen-device-name { color: #36536d; }
.screen-status.online { color: #287e6a; border-color: #cfe9de; background: #edf8f2; }
.screen-status.offline { color: #65788c; border-color: #e0e8f0; background: #f3f6fa; }
.screen-alarm-item.active strong { color: #a46c24; }
.screen-alarm-item.active strong::before { background: #c3924c; }
.screen-alarm-detail { color: var(--screen-muted); }
.screen-selected-id, .screen-meta-label, .screen-selected-meta svg,
.screen-received time, .screen-footer time { color: #627c93; }
.screen-device-state { border-color: #dfeaf1; background: #f5faff; border-radius: 8px; }
.screen-device-state:nth-child(2) { background: #f4f0fc; border-color: #e7dff5; }
.screen-device-state:nth-child(2) strong { color: #7959ab; }
.screen-device-state:nth-child(3) { background: #eef8f3; border-color: #dcece1; }
.screen-overview-card { background: #f7faff; border-color: #e0eaf3; border-radius: 12px; }
.screen-overview-card:nth-child(2) { background: #f0faf5; }
.screen-overview-card:nth-child(3) { background: #f5f2fc; }
.screen-overview-card:nth-child(4) { background: #fff8ed; }
.screen-trend-controls select { background: #f7faff; color: #45627d; border-color: #dbe6f0; }
#screenTrendSvg text { fill: #60778d; }
.screen-trend-hint { color: #627a91; }
.screen-metric-card { border-color: #e2eaf2; border-radius: 11px; background: linear-gradient(125deg, #fff, var(--metric-wash, #f4f8fd)); }
.screen-metric-label { color: #456077; }
.screen-metric-value { color: #2f4e67; font-weight: 600; }
.screen-metric-unit, .screen-metric-card .screen-metric-unit { color: #566f85; }
.screen-metric-state { color: #277d69; }
.screen-metric-limits { color: #63788e; }
.screen-progress { background: #e5edf4; }
.screen-progress-fill { background: var(--metric-accent, #429baf); }
.screen-metric-card.alarm-high { border-color: #efccd4; background: linear-gradient(120deg, #fff, #fff1f4); }
.screen-metric-card.alarm-low { border-color: #eedac1; background: linear-gradient(120deg, #fff, #fff7ec); }
.alarm-high .screen-progress-fill { background: #ce6177; }
.alarm-low .screen-progress-fill { background: #c39244; }
.screen-primary-card.screen-gauge-card {
  --gauge-color: var(--metric-accent, #3485c8);
  border: 1px solid color-mix(in srgb, var(--gauge-color) 13%, #fff);
  border-radius: 16px;
  background: linear-gradient(155deg, #fff 28%, var(--metric-wash, #f0f6fd));
  box-shadow: 0 3px 12px #58799b05;
}
.screen-gauge-card .screen-metric-label.screen-gauge-label { color: #405c74; font-weight: 600; }
.screen-gauge-card .screen-metric-value { color: #2a465e; font-weight: 650; }
.screen-gauge-card[data-reading-length="medium"] .screen-metric-value { font-size: 23px; letter-spacing: -.025em; }
.screen-gauge-card[data-reading-length="long"] .screen-metric-value { font-size: 19px; letter-spacing: -.025em; }
.screen-gauge-card .screen-metric-unit { color: #536d84; }
.screen-gauge-track { stroke: color-mix(in srgb, var(--gauge-color) 13%, #fff); }
.screen-gauge-progress { filter: none; }
.screen-gauge-range { color: #60788d; }
.screen-gauge-card .screen-metric-state.screen-gauge-status { color: #297960; border-color: #d4e9de; background: #f0f8f2; }
.screen-gauge-card.unscaled .screen-gauge-track { stroke: #e4ebf2; opacity: 1; }
.screen-gauge-card.alarm-high { --gauge-color: #cd536b; --metric-wash: #fff0f3; }
.screen-gauge-card.alarm-low { --gauge-color: #bd8534; --metric-wash: #fff6e7; }
.screen-gauge-card.alarm-high .screen-metric-value { color: #b93e57; }
.screen-gauge-card.alarm-low .screen-metric-value { color: #9c651e; }
.screen-gauge-card.alarm-high .screen-gauge-status { color: #b33d55; border-color: #efc6d0; background: #fff0f3; }
.screen-gauge-card.alarm-low .screen-gauge-status { color: #98621a; border-color: #edd6b1; background: #fff6e6; }
.screen-primary-card.screen-gauge-card.stale { --gauge-color: #7d8fa0; --metric-wash: #f5f7fa; }
.screen-gauge-card.stale .screen-metric-value, .screen-gauge-card.stale .screen-metric-unit { color: #65788c; }
.screen-gauge-card.stale .screen-gauge-status { color: #60768b; border-color: #dfe7ef; background: #f2f5f9; }
.screen-gate-card { border-color: #dce8f2; background: linear-gradient(150deg, #fff 55%, #eff7ff); box-shadow: 0 22px 70px #50779e14; }
.screen-gate-mark { color: #409baf; }
.screen-gate .screen-eyebrow { color: #527b94; }
.screen-gate-link { color: #fff; border-color: #4e87cc; background: linear-gradient(115deg, #4686cd, #498ec0); }
.screen-gate-link:hover { background: #3778b6; }
@media (prefers-reduced-motion: reduce) {
  .screen-gauge-progress, .screen-progress-fill { transition: none; }
}