/* ========================================================================
   IH Silo Weight Management - Web Theme System
   Full-application visual themes. Layout remains in site.css; all theme
   colors and control surfaces are centralized here.
   ======================================================================== */

:root,
html[data-theme="office2016-dark"] {
  color-scheme: dark;
  --theme-name: "Office 2016 Dark";
  --app-bg: #17191c;
  --app-bg-2: #1d2024;
  --surface: #22262b;
  --surface-2: #292e34;
  --surface-3: #30363d;
  --surface-hover: #353c44;
  --surface-selected: #164f7a;
  --header-bg: rgba(29, 32, 36, .97);
  --header-line: #414850;
  --text-primary: #f3f5f7;
  --text-secondary: #c9d0d7;
  --text-muted: #8f9aa5;
  --border: #414850;
  --border-strong: #59636d;
  --accent: #2b88d8;
  --accent-hover: #3a96e4;
  --accent-soft: #123b5a;
  --accent-text: #ffffff;
  --input-bg: #1c2024;
  --input-bg-hover: #252a2f;
  --input-text: #f5f7f9;
  --input-placeholder: #7f8a95;
  --input-border: #525b64;
  --table-head: #2d3339;
  --table-row-hover: #292f35;
  --card-shadow: rgba(0, 0, 0, .25);
  --focus-ring: rgba(43, 136, 216, .26);
  --logo-from: #2b88d8;
  --logo-to: #1769aa;
  --success: #39c77a;
  --success-bg: #163728;
  --success-border: #2d6f50;
  --danger: #ff777d;
  --danger-bg: #401d22;
  --danger-border: #7a3940;
  --warning: #f4b942;
  --warning-bg: #3a2d14;
  --warning-border: #74602e;
  --info: #5eb6ff;
  --disabled: #89939c;
  --report-bg: #ffffff;
  --report-text: #14212b;
  --report-muted: #657783;
  --report-line: #dce6ec;
  --report-head: #eaf1f5;
  --report-panel: #f3f7fa;
  --report-warning-bg: #fff3f4;
  --report-warning-text: #862b35;
  --report-warning-border: #e6a5aa;
  --silo-card-bg: #1c2228;
  --silo-card-head: #20272e;
  --silo-card-foot: #1a2026;
  --silo-metric-bg: #20272d;
  --silo-ring-track: #3a444e;
  --silo-inner: #1c2228;
  --silo-chamber: #151b20;
}

html[data-theme="office2016-light"] {
  color-scheme: light;
  --theme-name: "Office 2016 Light";
  --app-bg: #f3f3f3;
  --app-bg-2: #fafafa;
  --surface: #ffffff;
  --surface-2: #f7f7f7;
  --surface-3: #eeeeee;
  --surface-hover: #e6f0f8;
  --surface-selected: #d8eaf8;
  --header-bg: rgba(255, 255, 255, .98);
  --header-line: #d1d5da;
  --text-primary: #1f2328;
  --text-secondary: #3f4852;
  --text-muted: #6d7884;
  --border: #d0d6dc;
  --border-strong: #aab3bc;
  --accent: #2b88d8;
  --accent-hover: #166fbb;
  --accent-soft: #e4f1fb;
  --accent-text: #ffffff;
  --input-bg: #ffffff;
  --input-bg-hover: #f7fafd;
  --input-text: #1f2328;
  --input-placeholder: #7c8792;
  --input-border: #aeb7c0;
  --table-head: #edf2f6;
  --table-row-hover: #f4f8fb;
  --card-shadow: rgba(37, 52, 68, .11);
  --focus-ring: rgba(43, 136, 216, .18);
  --logo-from: #2b88d8;
  --logo-to: #1769aa;
  --success: #178447;
  --success-bg: #e8f6ee;
  --success-border: #88c9a4;
  --danger: #c9363e;
  --danger-bg: #fff0f1;
  --danger-border: #e2a1a5;
  --warning: #9a6500;
  --warning-bg: #fff5d9;
  --warning-border: #dfc16d;
  --info: #176fb1;
  --disabled: #84909b;
  --report-bg: #ffffff;
  --report-text: #14212b;
  --report-muted: #657783;
  --report-line: #dce6ec;
  --report-head: #eaf1f5;
  --report-panel: #f3f7fa;
  --report-warning-bg: #fff3f4;
  --report-warning-text: #862b35;
  --report-warning-border: #e6a5aa;
  --silo-card-bg: #ffffff;
  --silo-card-head: #f4f8fb;
  --silo-card-foot: #f6f8fa;
  --silo-metric-bg: #f8fafc;
  --silo-ring-track: #d4dde5;
  --silo-inner: #ffffff;
  --silo-chamber: #e9eef2;
}

html[data-theme="office2010-blue"] {
  color-scheme: light;
  --theme-name: "Office 2010 Blue";
  --app-bg: #d9e9f7;
  --app-bg-2: #edf5fb;
  --surface: #f7fbff;
  --surface-2: #e7f1f9;
  --surface-3: #d7e8f5;
  --surface-hover: #cfe6f7;
  --surface-selected: #bcdcf3;
  --header-bg: rgba(226, 240, 250, .98);
  --header-line: #8eb8d5;
  --text-primary: #17354b;
  --text-secondary: #31566f;
  --text-muted: #5f7f95;
  --border: #9fc3dc;
  --border-strong: #6e9fbe;
  --accent: #1f70a8;
  --accent-hover: #185d8e;
  --accent-soft: #d7eaf7;
  --accent-text: #ffffff;
  --input-bg: #ffffff;
  --input-bg-hover: #f8fcff;
  --input-text: #17354b;
  --input-placeholder: #68869a;
  --input-border: #86abc4;
  --table-head: #cfe4f2;
  --table-row-hover: #e6f2fa;
  --card-shadow: rgba(37, 81, 113, .14);
  --focus-ring: rgba(31, 112, 168, .2);
  --logo-from: #367fb3;
  --logo-to: #1f5f91;
  --success: #187747;
  --success-bg: #e4f4eb;
  --success-border: #7dbf9c;
  --danger: #b9323a;
  --danger-bg: #fcebed;
  --danger-border: #d9999e;
  --warning: #9d6600;
  --warning-bg: #fff3d5;
  --warning-border: #dabd6c;
  --info: #1f70a8;
  --disabled: #70889a;
  --report-bg: #ffffff;
  --report-text: #14212b;
  --report-muted: #657783;
  --report-line: #dce6ec;
  --report-head: #eaf1f5;
  --report-panel: #f3f7fa;
  --report-warning-bg: #fff3f4;
  --report-warning-text: #862b35;
  --report-warning-border: #e6a5aa;
  --silo-card-bg: #f7fbff;
  --silo-card-head: #e4f0f8;
  --silo-card-foot: #e9f3fa;
  --silo-metric-bg: #eff7fc;
  --silo-ring-track: #a8c6d9;
  --silo-inner: #f7fbff;
  --silo-chamber: #dbe9f2;
}

html[data-theme="industrial"] {
  color-scheme: dark;
  --theme-name: "Industrial";
  --app-bg: #151515;
  --app-bg-2: #1b1b1b;
  --surface: #232323;
  --surface-2: #2b2b2b;
  --surface-3: #333333;
  --surface-hover: #3b3529;
  --surface-selected: #66430f;
  --header-bg: rgba(25, 25, 25, .98);
  --header-line: #4d4941;
  --text-primary: #f5f2eb;
  --text-secondary: #d2cdc3;
  --text-muted: #9f998d;
  --border: #4b4740;
  --border-strong: #6b6458;
  --accent: #d88a16;
  --accent-hover: #eca12f;
  --accent-soft: #4a3313;
  --accent-text: #151515;
  --input-bg: #1b1b1b;
  --input-bg-hover: #292722;
  --input-text: #f5f2eb;
  --input-placeholder: #8f897e;
  --input-border: #655f54;
  --table-head: #33312d;
  --table-row-hover: #302d27;
  --card-shadow: rgba(0, 0, 0, .30);
  --focus-ring: rgba(216, 138, 22, .24);
  --logo-from: #e69b25;
  --logo-to: #a45f08;
  --success: #57c77b;
  --success-bg: #173326;
  --success-border: #376d4f;
  --danger: #ff7474;
  --danger-bg: #3d1c1c;
  --danger-border: #743838;
  --warning: #f0a62b;
  --warning-bg: #3d2f16;
  --warning-border: #715b31;
  --info: #e1a84f;
  --disabled: #928c82;
  --report-bg: #ffffff;
  --report-text: #14212b;
  --report-muted: #657783;
  --report-line: #dce6ec;
  --report-head: #eaf1f5;
  --report-panel: #f3f7fa;
  --report-warning-bg: #fff3f4;
  --report-warning-text: #862b35;
  --report-warning-border: #e6a5aa;
  --silo-card-bg: #21201d;
  --silo-card-head: #292721;
  --silo-card-foot: #1c1b18;
  --silo-metric-bg: #292721;
  --silo-ring-track: #514b40;
  --silo-inner: #21201d;
  --silo-chamber: #191815;
}

/* ---------- Base application surfaces ---------- */
html, body {
  background: linear-gradient(180deg, var(--app-bg-2), var(--app-bg) 48%, var(--app-bg));
  color: var(--text-primary);
}
body { transition: background-color .18s ease, color .18s ease; }
.topbar { background: var(--header-bg); border-color: var(--header-line); color: var(--text-primary); }
.logo, .auth-logo { background: linear-gradient(135deg, var(--logo-from), var(--logo-to)); color: #fff; box-shadow: 0 0 22px var(--focus-ring); }
.brand h1, .hero h2, .group-head h3, .card-title, h1, h2, h3, h4 { color: var(--text-primary); }
.sub, .clock, .hero p, .group-head .meta, .location, .mini-muted, footer { color: var(--text-muted); }
footer { border-color: var(--border); }

/* ---------- Theme selectors ---------- */
.theme-control { display:flex; align-items:center; gap:8px; white-space:nowrap; }
.theme-control label { color:var(--text-muted); font-size:12px; }
.theme-select {
  height:36px; min-width:170px; border:1px solid var(--input-border); border-radius:8px;
  background:var(--input-bg); color:var(--input-text); padding:0 34px 0 10px;
  font:inherit; font-size:12px; outline:none; cursor:pointer;
}
html[dir="rtl"] .theme-select { padding:0 10px 0 34px; }
.theme-select:hover { background:var(--input-bg-hover); }
.theme-select:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--focus-ring); }
.theme-select option { background:var(--input-bg); color:var(--input-text); }
.auth-theme-row { margin-top:18px; padding-top:16px; border-top:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; gap:12px; }
.auth-theme-row span { color:var(--text-muted); font-size:13px; }
.auth-theme-row .theme-select { min-width:190px; }

/* ---------- Authentication ---------- */
.auth-screen { background: color-mix(in srgb, var(--app-bg) 92%, transparent); }
.auth-card { background:var(--surface); color:var(--text-primary); border:1px solid var(--border); box-shadow:0 24px 70px var(--card-shadow); }
.auth-card p { color:var(--text-muted); }
.auth-field label { color:var(--text-secondary); }
.auth-field input,
.admin-card input, .admin-card select,
.admin-edit-grid input, .admin-edit-grid select,
.field input, .field select,
select, input, textarea {
  background:var(--input-bg); color:var(--input-text); border-color:var(--input-border);
}
input::placeholder, textarea::placeholder { color:var(--input-placeholder); opacity:1; }
select option { background:var(--input-bg); color:var(--input-text); }
.auth-field input:focus,
.admin-card input:focus, .admin-card select:focus,
.admin-edit-grid input:focus, .admin-edit-grid select:focus,
.field input:focus, .field select:focus,
select:focus, input:focus, textarea:focus {
  border-color:var(--accent); box-shadow:0 0 0 3px var(--focus-ring); outline:none;
}
.auth-submit, .refresh { background:var(--accent); border-color:var(--accent); color:var(--accent-text); }
.auth-submit:hover, .refresh:hover { background:var(--accent-hover); border-color:var(--accent-hover); }
.auth-error, .admin-message.error, .error-box { background:var(--danger-bg); border-color:var(--danger-border); color:var(--danger); }
.logout-btn { border-color:var(--border-strong); color:var(--text-secondary); }
.logout-btn:hover { background:var(--surface-hover); color:var(--text-primary); }

/* ---------- Navigation / status ---------- */
.nav-btn { color:var(--text-muted); }
.nav-btn:hover { background:var(--surface-hover); color:var(--text-primary); }
.nav-btn.active { background:var(--surface-selected); color:var(--text-primary); box-shadow:inset 0 -2px 0 var(--accent); }
.pill { border-color:var(--border); }
.pill.ok { color:var(--success); border-color:var(--success-border); background:var(--success-bg); }
.pill.bad { color:var(--danger); border-color:var(--danger-border); background:var(--danger-bg); }
.pill.pending { color:var(--warning); border-color:var(--warning-border); background:var(--warning-bg); }

/* ---------- General panels / controls ---------- */
.summary-card, .filter-panel { background:linear-gradient(180deg,var(--surface-2),var(--surface)); border-color:var(--border); box-shadow:0 10px 28px var(--card-shadow); }
.summary-card span, .history-summary span, .field label, .view-options-title { color:var(--text-muted); }
.summary-card strong, .history-summary strong { color:var(--text-primary); }
.group-head, .table-wrap, .view-options { border-color:var(--border); }
.view-options { background:var(--surface); }
.view-filter-btn, .secondary-btn {
  border-color:var(--input-border); background:var(--surface-2); color:var(--text-secondary);
}
.view-filter-btn:hover, .secondary-btn:hover { background:var(--surface-hover); color:var(--text-primary); }
.view-filter-btn.active { background:var(--accent); border-color:var(--accent); color:var(--accent-text); box-shadow:0 0 0 2px var(--focus-ring); }
.loading, .empty { border-color:var(--border); color:var(--text-muted); }

/* ---------- History / tables ---------- */
.history-summary > div { border-color:var(--border); background:var(--surface); }
.table-wrap { background:var(--surface); }
.data-table th, .data-table td { border-color:var(--border); color:var(--text-secondary); }
.data-table th { background:var(--table-head); color:var(--text-primary); }
.data-table tbody tr:hover { background:var(--table-row-hover); }
.details-cell { color:var(--text-secondary); }
.muted-cell { color:var(--text-muted); }
.error-cell, .data-warning { color:var(--danger); }
.event-badge { border-color:var(--border-strong); background:var(--surface-2); color:var(--text-secondary); }
.ev-consumption { color:var(--warning); border-color:var(--warning-border); background:var(--warning-bg); }
.ev-filling { color:var(--success); border-color:var(--success-border); background:var(--success-bg); }
.ev-gap { color:var(--danger); border-color:var(--danger-border); background:var(--danger-bg); }
.ev-opening, .ev-closing { color:var(--info); border-color:var(--border-strong); background:var(--accent-soft); }
.incomplete-row { background:color-mix(in srgb, var(--danger-bg) 58%, transparent); }

/* ---------- Customer / System administration ---------- */
.admin-card { background:var(--surface); color:var(--text-primary); border:1px solid var(--border); box-shadow:0 5px 20px var(--card-shadow); }
.admin-label, .admin-edit-grid label { color:var(--text-secondary); }
.customer-admin-item { border-color:var(--border); }
.admin-user-row { border-color:var(--border); background:var(--surface-2); }
.admin-message { background:var(--success-bg); color:var(--success); border:1px solid var(--success-border); }
.status-active { background:var(--success-bg); color:var(--success); }
.status-disabled { background:var(--danger-bg); color:var(--danger); }
.uid { color:var(--text-secondary); }

/* ---------- Live silo cards ---------- */
.scale-card { background:linear-gradient(180deg,var(--surface-2),var(--surface)); border-color:var(--border); box-shadow:0 10px 30px var(--card-shadow); color:var(--text-primary); }
.scale-card:hover { border-color:var(--border-strong); }
.scale-card:focus-visible { outline-color:var(--accent); }
.scale-card.focused-scale { border-color:var(--accent); box-shadow:0 24px 80px var(--card-shadow),0 0 0 1px var(--focus-ring); }
.details b { color:var(--text-primary); }
.bar { background:var(--surface-3); border-color:var(--border); }
.bar > i { background:linear-gradient(90deg,var(--accent),var(--success)); }
.status.connected { color:var(--success); background:var(--success-bg); border-color:var(--success-border); }
.status.error, .status.disconnected { color:var(--danger); background:var(--danger-bg); border-color:var(--danger-border); }
.status.disabled { color:var(--disabled); background:var(--surface-3); border-color:var(--border); }
.status.connecting { color:var(--warning); background:var(--warning-bg); border-color:var(--warning-border); }
.diag-icon { background:var(--surface-2); border-color:var(--border); }

.desktop-card { background:var(--silo-card-bg); border-color:var(--accent); box-shadow:0 0 16px var(--focus-ring); }
.desktop-card:hover { border-color:var(--accent-hover); box-shadow:0 0 22px var(--focus-ring); }
.desktop-card-head { background:var(--silo-card-head); border-color:var(--accent); }
.desktop-silo-thumb { background:var(--surface-2); border-color:var(--accent); }
.desktop-card .location { color:var(--text-secondary); }
.location-dot { color:var(--accent); }
.desktop-card .status { background:var(--surface); border-color:var(--accent); }
.desktop-card .diag-icon { background:var(--surface-2); }
.desktop-metric { border-color:var(--accent); background:var(--silo-metric-bg); box-shadow:0 0 12px var(--focus-ring); }
.desktop-metric-icon { background:var(--surface-2); border-color:var(--accent); box-shadow:0 0 10px var(--focus-ring); color:var(--info); }
.desktop-metric span { color:var(--text-secondary); }
.desktop-metric strong { color:var(--text-primary); }
.desktop-metric strong small { color:var(--text-muted); }
.desktop-metric .metric-weight { color:var(--success); }
.desktop-metric .metric-fill { color:var(--warning); }
.real-silo-glow { background:radial-gradient(circle,var(--focus-ring),transparent 70%); }
.grain-chamber { background:var(--silo-chamber); }
.fill-ring { background:conic-gradient(var(--warning) calc(var(--fill)*1%),var(--silo-ring-track) 0); }
.fill-ring::after { background:repeating-conic-gradient(transparent 0 48deg,var(--silo-card-bg) 48deg 57deg); }
.fill-ring-inner { background:var(--silo-inner); }
.fill-ring-inner strong { color:var(--text-primary); }
.connection-box { border-color:var(--accent); background:var(--surface); color:var(--text-muted); }
.connection-box b { color:var(--text-primary); }
.conn-dot { background:var(--disabled); }
.conn-dot.connected { background:var(--success); }
.conn-dot.disconnected, .conn-dot.error { background:var(--danger); }
.conn-dot.connecting { background:var(--warning); }
.desktop-card-foot { border-color:var(--accent); background:var(--silo-card-foot); color:var(--text-muted); }
.desktop-card-foot b { color:var(--text-primary); }

/* Legacy/dead-simple silo styling is themed too, in case it is reused. */
.info-block { border-color:var(--border); background:var(--surface); }
.info-block strong small, .silo-weight span { color:var(--text-muted); }
.silo-percent { color:var(--text-primary); }
.silo-weight { color:var(--text-secondary); }
.silo-offline .silo-percent, .silo-offline .silo-weight { color:var(--disabled); }

/* ---------- Reports shown on screen / printing ----------
   Reports intentionally remain paper-white in every theme, because what users
   see is the same content they print/save to PDF. */
.print-report { background:var(--report-bg); color:var(--report-text); }
.print-report-head { border-color:var(--report-line); }
.print-report-head p, .report-period span, .report-footer, .no-report-events { color:var(--report-muted); }
.report-brand { color:#2574a9; }
.report-metrics > div { background:var(--report-panel); border-color:var(--report-line); }
.report-metrics span { color:#667985; }
.report-warning { border-color:var(--report-warning-border); background:var(--report-warning-bg); color:var(--report-warning-text); }
.report-table th { background:var(--report-head); color:#334955; }
.report-table th, .report-table td { border-color:var(--report-line); color:var(--report-text); }
.no-report-events { background:#f8fbfd; border-color:#cbd8e0; }

/* ---------- Browser-specific native control corrections ---------- */
input[type="datetime-local"]::-webkit-calendar-picker-indicator { cursor:pointer; opacity:.8; }
html[data-theme="office2016-dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator,
html[data-theme="industrial"] input[type="datetime-local"]::-webkit-calendar-picker-indicator { filter:invert(1) opacity(.78); }

@media (max-width: 1050px) {
  .theme-control label { display:none; }
  .theme-select { min-width:145px; }
}
@media (max-width: 800px) {
  .top-actions { flex-wrap:wrap; justify-content:flex-end; }
  .theme-select { min-width:135px; max-width:150px; }
}
.station-online-state.online { color:var(--success); }
.station-online-state.offline { color:var(--danger); }

/* ---------- Customer hierarchy management ---------- */
.structure-region,.structure-site,.asset-editor{border-color:var(--border);color:var(--text-primary)}
.structure-region{background:var(--surface-2)}
.structure-site{background:var(--surface)}
.asset-editor{background:var(--surface-2)}
.structure-head,.site-head,.asset-section,.scale-editor{border-color:var(--border)}
.structure-edit-grid label,.asset-section h4,.scale-editor-head strong{color:var(--text-secondary)}
.serial-badge{background:var(--accent-soft);border-color:var(--border-strong);color:var(--text-primary)}
.danger-btn{background:var(--danger-bg);border-color:var(--danger-border);color:var(--danger)}
.danger-btn:hover{filter:brightness(1.08)}
.admin-card textarea{background:var(--input-bg);color:var(--input-text);border-color:var(--input-border)}

/* Phase 11 - bridge legacy variables to active theme. */
html[data-theme]{--bg:var(--app-bg);--panel:var(--surface);--panel2:var(--surface-2);--line:var(--border);--text:var(--text-primary);--muted:var(--text-muted);--blue:var(--accent);--green:var(--success);--red:var(--danger);--orange:var(--warning);--gray:var(--disabled);}