:root {
  color-scheme: light;
  --app-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --bg: #f8fbfd;
  --panel: #ffffff;
  --ink: #101923;
  --muted: #647486;
  --line: #dce8f0;
  --line-strong: #bfd1df;
  --brand: #0b4f7a;
  --brand-2: #00a8c8;
  --ok: #00a878;
  --warn: #d68a00;
  --danger: #d84444;
  --info: #0077ff;
  --purple: #7a58d8;
  --soft-ok: #e8fbf4;
  --soft-warn: #fff6df;
  --soft-danger: #fff0f0;
  --soft-info: #edf6ff;
  --glow: 0 0 0 1px rgba(0, 168, 200, .08), 0 18px 45px rgba(28, 66, 92, .08);
  --shadow: 0 14px 38px rgba(28, 66, 92, .07);
  --dashboard-visual-scale: .8;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0d1520;
  --panel: #162232;
  --ink: #e8eef5;
  --muted: #8a9bb0;
  --line: #2a3a4f;
  --line-strong: #3a4a60;
  --brand: #34c8e8;
  --brand-2: #4dd4f0;
  --ok: #22c997;
  --warn: #f0a93a;
  --danger: #ef6a4d;
  --info: #4d9aff;
  --purple: #a78bf9;
  --soft-ok: rgba(34, 201, 151, .14);
  --soft-warn: rgba(240, 169, 58, .14);
  --soft-danger: rgba(239, 106, 77, .14);
  --soft-info: rgba(77, 154, 255, .14);
  --glow: 0 0 0 1px rgba(52, 200, 232, .12), 0 18px 45px rgba(0, 0, 0, .35);
  --shadow: 0 14px 38px rgba(0, 0, 0, .4);
}

html[data-theme="dark"] body {
  background:
    radial-gradient(circle at 20% 0%, rgba(52, 200, 232, .14), transparent 360px),
    radial-gradient(circle at 88% 10%, rgba(77, 154, 255, .1), transparent 330px),
    linear-gradient(180deg, #0a121d 0%, var(--bg) 52%, #0a121d 100%);
  color: var(--ink);
}

html[data-theme="dark"] .topbar,
html[data-theme="dark"] .sidebar,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .overview-kpi-board,
html[data-theme="dark"] .overview-kpi-card,
html[data-theme="dark"] .overview-total-card,
html[data-theme="dark"] .process-pie-card,
html[data-theme="dark"] .overview-cost-panel,
html[data-theme="dark"] .overview-alarm-trend,
html[data-theme="dark"] .overview-alarm-table,
html[data-theme="dark"] .inlet-line-card,
html[data-theme="dark"] .eq-tank-card,
html[data-theme="dark"] .eq-quality-section,
html[data-theme="dark"] .diagram-node,
html[data-theme="dark"] .process-diagram-panel,
html[data-theme="dark"] .tool-form-panel,
html[data-theme="dark"] .setpoint-card,
html[data-theme="dark"] .equipment-card,
html[data-theme="dark"] .maintenance-calendar-panel,
html[data-theme="dark"] .maintenance-assets-panel,
html[data-theme="dark"] .inlet-trend-panel,
html[data-theme="dark"] .inlet-flow-panel,
html[data-theme="dark"] .inlet-history-panel,
html[data-theme="dark"] .inlet-toolbar,
html[data-theme="dark"] .calendar-day,
html[data-theme="dark"] .system-strip,
html[data-theme="dark"] .app-footer,
html[data-theme="dark"] .modal-card {
  background: var(--panel);
  color: var(--ink);
  border-color: var(--line);
}

html[data-theme="dark"] .calendar-day {
  background: rgba(255, 255, 255, .02);
}

html[data-theme="dark"] .calendar-day div,
html[data-theme="dark"] .calendar-plan-item,
html[data-theme="dark"] .line-point,
html[data-theme="dark"] .line-point span,
html[data-theme="dark"] .line-point .inline-master-sensor,
html[data-theme="dark"] .station-values div,
html[data-theme="dark"] .eq-tank-values div,
html[data-theme="dark"] .diagram-sensors > div,
html[data-theme="dark"] .pie-breakdown div,
html[data-theme="dark"] .cost-breakdown div,
html[data-theme="dark"] .form-row input,
html[data-theme="dark"] .modal-field input,
html[data-theme="dark"] .modal-field select,
html[data-theme="dark"] .tool-form-grid input,
html[data-theme="dark"] .tool-form-grid select,
html[data-theme="dark"] .tool-form-grid textarea,
html[data-theme="dark"] .master-form-grid input,
html[data-theme="dark"] .master-form-grid select {
  background: #1d2c40;
  color: var(--ink);
  border-color: var(--line);
}

html[data-theme="dark"] .nav-toggle,
html[data-theme="dark"] .ghost-button {
  background: #1d2c40;
  color: var(--ink);
  border-color: var(--line);
}

html[data-theme="dark"] .nav-toggle:hover {
  background: rgba(52, 200, 232, .12);
}

html[data-theme="dark"] .primary-button {
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #0d1520;
  font-weight: 800;
}

html[data-theme="dark"] table {
  color: var(--ink);
}

html[data-theme="dark"] table thead th {
  background: rgba(52, 200, 232, .08);
  color: var(--ink);
  border-color: var(--line);
}

html[data-theme="dark"] table tbody td {
  border-color: var(--line);
}

html[data-theme="dark"] table tbody tr:hover {
  background: rgba(52, 200, 232, .04);
}

html[data-theme="dark"] code {
  background: rgba(52, 200, 232, .12);
  color: var(--brand-2);
}

html[data-theme="dark"] .nav-item:hover,
html[data-theme="dark"] .nav-item.active {
  background: rgba(52, 200, 232, .14);
}

html[data-theme="dark"] .user-menu-panel,
html[data-theme="dark"] .user-menu-button {
  background: var(--panel);
  border-color: var(--line);
}

html[data-theme="dark"] .user-menu-item:hover {
  background: rgba(52, 200, 232, .12);
  color: var(--brand-2);
}

html[data-theme="dark"] .user-menu-info {
  background: rgba(52, 200, 232, .06);
}

html[data-theme="dark"] .user-greeting {
  background: linear-gradient(135deg, rgba(52, 200, 232, .2), rgba(34, 201, 151, .14));
}

html[data-theme="dark"] .user-greeting strong {
  color: var(--brand-2);
}

html[data-theme="dark"] .login-screen {
  background:
    radial-gradient(circle at 20% 0%, rgba(52, 200, 232, .14), transparent 360px),
    radial-gradient(circle at 88% 10%, rgba(77, 154, 255, .1), transparent 330px),
    linear-gradient(180deg, #0a121d 0%, var(--bg) 52%, #0a121d 100%);
}

html[data-theme="dark"] .login-card {
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--line);
}

html[data-theme="dark"] .login-card input {
  background: #1d2c40;
  color: var(--ink);
  border-color: var(--line);
}

html[data-theme="dark"] .mini-donut,
html[data-theme="dark"] .cost-donut,
html[data-theme="dark"] .process-summary-donut {
  border-color: var(--line-strong);
  box-shadow: inset 0 0 0 16px rgba(22, 34, 50, .85), 0 14px 32px rgba(0, 0, 0, .35);
}

html[data-theme="dark"] .process-summary-donut {
  background:
    radial-gradient(circle, var(--panel) 0 51%, rgba(22, 34, 50, .94) 52%, transparent 53%),
    var(--donut-gradient, conic-gradient(rgba(148,163,184,.25) 0% 100%));
}

html[data-theme="dark"] .overview-process-summary {
  background: linear-gradient(135deg, var(--panel), rgba(29, 44, 64, .96));
}

html[data-theme="dark"] .mini-donut strong,
html[data-theme="dark"] .cost-donut strong,
html[data-theme="dark"] .process-summary-donut strong {
  color: var(--ink);
}

html[data-theme="dark"] .mini-donut span,
html[data-theme="dark"] .cost-donut span,
html[data-theme="dark"] .process-summary-donut span {
  color: var(--muted);
}

/* Pie breakdown rows */
html[data-theme="dark"] .pie-breakdown div,
html[data-theme="dark"] .cost-breakdown div,
html[data-theme="dark"] .energy-process-breakdown div {
  background: rgba(255, 255, 255, .03);
  border-color: var(--line);
}

html[data-theme="dark"] .pie-breakdown strong,
html[data-theme="dark"] .cost-breakdown strong,
html[data-theme="dark"] .energy-process-breakdown strong {
  color: var(--ink);
}

html[data-theme="dark"] .pie-breakdown span,
html[data-theme="dark"] .pie-breakdown small,
html[data-theme="dark"] .cost-breakdown span,
html[data-theme="dark"] .cost-breakdown small,
html[data-theme="dark"] .energy-process-breakdown span,
html[data-theme="dark"] .energy-process-breakdown small {
  color: var(--muted);
}

html[data-theme="dark"] .pie-copy strong {
  color: var(--ink);
}

html[data-theme="dark"] .pie-copy span {
  color: var(--muted);
}

/* Overview KPI / summary cards text */
html[data-theme="dark"] .overview-kpi-card strong,
html[data-theme="dark"] .overview-total-card strong,
html[data-theme="dark"] .setpoint-card strong,
html[data-theme="dark"] .equipment-card strong,
html[data-theme="dark"] .maintenance-plan-meta strong,
html[data-theme="dark"] .energy-summary-grid strong,
html[data-theme="dark"] .process-summary-grid strong {
  color: var(--ink);
}

html[data-theme="dark"] .overview-kpi-card p,
html[data-theme="dark"] .overview-kpi-card .kpi-name,
html[data-theme="dark"] .overview-total-card p,
html[data-theme="dark"] .overview-total-card span,
html[data-theme="dark"] .setpoint-card p,
html[data-theme="dark"] .setpoint-card span,
html[data-theme="dark"] .equipment-card p,
html[data-theme="dark"] .equipment-card span,
html[data-theme="dark"] .maintenance-plan-meta span,
html[data-theme="dark"] .process-summary-grid p,
html[data-theme="dark"] .process-summary-grid span {
  color: var(--muted);
}

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4 {
  color: var(--ink);
}

html[data-theme="dark"] p,
html[data-theme="dark"] #pageSummary {
  color: var(--muted);
}

html[data-theme="dark"] .eyebrow {
  color: var(--brand-2);
}

/* Line-point sensors (Inlet, Equalisasi) */
html[data-theme="dark"] .line-point span small,
html[data-theme="dark"] .line-point span em,
html[data-theme="dark"] .line-point .inline-master-sensor strong,
html[data-theme="dark"] .line-point .inline-master-sensor span,
html[data-theme="dark"] .line-point strong {
  color: var(--ink);
}

html[data-theme="dark"] .line-point span small {
  color: var(--muted);
}

html[data-theme="dark"] .eq-tank-card {
  background: var(--panel);
  border-color: var(--line);
  box-shadow: none;
}
html[data-theme="dark"] .eq-tank-values div {
  background: rgba(255,255,255,.04) !important;
  border-color: var(--line) !important;
  box-shadow: none !important;
}
html[data-theme="dark"] .eq-tank-values span,
html[data-theme="dark"] .eq-tank-values div span {
  color: var(--muted);
}
html[data-theme="dark"] .eq-tank-values strong,
html[data-theme="dark"] .eq-tank-values div strong {
  color: var(--ink);
}
html[data-theme="dark"] .monitoring-page--final-outlet .flow-station {
  background: var(--panel);
  border-color: var(--line);
  box-shadow: none;
}
html[data-theme="dark"] .monitoring-page--final-outlet .flow-station .station-values > div {
  background: rgba(255,255,255,.04) !important;
  border-color: var(--line) !important;
  box-shadow: none !important;
}

/* Diagram nodes (process flow) */
html[data-theme="dark"] .diagram-node h3,
html[data-theme="dark"] .diagram-sensors strong {
  color: var(--ink);
}

html[data-theme="dark"] .diagram-sensors span:not(.sensor-type-icon):not(.sensor-label-text),
html[data-theme="dark"] .diagram-sensors small {
  color: var(--muted);
}

html[data-theme="dark"] .sensor-label-text {
  color: var(--muted);
}

/* Topbar clock */
html[data-theme="dark"] .topbar-clock {
  background: linear-gradient(135deg, rgba(52, 200, 232, .1) 0%, rgba(77, 154, 255, .08) 100%);
  border-color: var(--line);
}

html[data-theme="dark"] .topbar-clock strong {
  color: var(--brand-2);
}

html[data-theme="dark"] .topbar-clock small {
  color: var(--muted);
}

/* User menu profile card */
html[data-theme="dark"] .user-menu-profile-card {
  background: linear-gradient(135deg, rgba(52, 200, 232, .08) 0%, rgba(34, 201, 151, .06) 100%);
  border-color: var(--line);
}

html[data-theme="dark"] .user-menu-profile-text strong {
  color: var(--ink);
}

html[data-theme="dark"] .user-menu-profile-text span {
  color: var(--brand-2);
}

html[data-theme="dark"] .user-menu-profile-text small {
  color: var(--muted);
}

/* Config-section summary header */
html[data-theme="dark"] .config-section {
  border-color: var(--line);
  background: var(--panel);
}

html[data-theme="dark"] .config-section-details > summary {
  background: linear-gradient(90deg, rgba(11,79,122,.12) 0%, rgba(30,41,59,.8) 100%);
  border-bottom-color: var(--line);
}

html[data-theme="dark"] .config-section-details > summary h2 {
  color: var(--ink);
}

html[data-theme="dark"] .config-section-details > summary .eyebrow {
  color: var(--brand-2);
}

html[data-theme="dark"] .config-section-icon {
  background: rgba(30,64,175,.25);
  color: #93c5fd;
}

html[data-theme="dark"] .sensor-type-icon {
  background: rgba(30,64,175,.2);
  color: #93c5fd;
}

/* Carousel slide content */
html[data-theme="dark"] .carousel-slide,
html[data-theme="dark"] .overview-management-grid,
html[data-theme="dark"] .overview-cost-panel {
  color: var(--ink);
}

/* Modal */
html[data-theme="dark"] .auth-modal-content {
  background: var(--panel);
  color: var(--ink);
}

html[data-theme="dark"] .auth-modal-head {
  border-bottom-color: var(--line);
}

html[data-theme="dark"] .auth-modal-actions {
  border-top-color: var(--line);
}

html[data-theme="dark"] .auth-modal-body input,
html[data-theme="dark"] .auth-modal-body select {
  background: #1d2c40;
  color: var(--ink);
  border-color: var(--line);
}

html[data-theme="dark"] .auth-modal-close {
  background: rgba(255, 255, 255, .04);
  border-color: var(--line);
  color: var(--muted);
}

/* Calendar */
html[data-theme="dark"] .calendar-day strong {
  color: var(--ink);
}

html[data-theme="dark"] .calendar-day p,
html[data-theme="dark"] .calendar-day div span {
  color: var(--muted);
}

/* Inline informational hint boxes */
html[data-theme="dark"] .carousel-empty-hint,
html[data-theme="dark"] .line-point-empty,
html[data-theme="dark"] .sensor-editor-empty {
  background: rgba(255, 255, 255, .02);
  border-color: var(--line);
  color: var(--muted);
}

html[data-theme="dark"] .carousel-empty-hint strong,
html[data-theme="dark"] .line-point-empty strong,
html[data-theme="dark"] .sensor-editor-empty strong {
  color: var(--ink);
}

/* Monitoring concept page (Aerasi, pH Control, Coagulation, S-Pit DAF, Filtration, Final Outlet) */
html[data-theme="dark"] .flow-station {
  background: linear-gradient(180deg, var(--panel), rgba(29, 44, 64, .85));
  border-color: var(--line);
  color: var(--ink);
}

html[data-theme="dark"] .flow-station h3 {
  color: var(--ink);
}

html[data-theme="dark"] .station-values div {
  background: rgba(255, 255, 255, .04);
  border-color: var(--line);
  color: var(--ink);
}

html[data-theme="dark"] .station-values span {
  color: var(--muted);
}

html[data-theme="dark"] .station-values strong {
  color: var(--ink);
}

html[data-theme="dark"] .monitoring-connector {
  background: rgba(52, 200, 232, .08);
  border-color: var(--line-strong);
  color: var(--brand-2);
}

/* Control panels (manual / auto / countdown) */
html[data-theme="dark"] .control-panel,
html[data-theme="dark"] .control-mode-card,
html[data-theme="dark"] .manual-action-box,
html[data-theme="dark"] .control-active-strip {
  background: linear-gradient(135deg, var(--panel), rgba(29, 44, 64, .92));
  border-color: var(--line);
  color: var(--ink);
}

html[data-theme="dark"] .control-mode-card strong,
html[data-theme="dark"] .control-panel strong,
html[data-theme="dark"] .manual-action-box strong {
  color: var(--ink);
}

html[data-theme="dark"] .control-mode-card span,
html[data-theme="dark"] .control-panel span,
html[data-theme="dark"] .manual-action-box span,
html[data-theme="dark"] .control-panel p {
  color: var(--muted);
}

/* Panel-head is dark blue in both themes — toggle already uses white-alpha colors */
html[data-theme="dark"] .control-panel > .panel-head {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%);
}

html[data-theme="dark"] .control-panel > .panel-head .eyebrow {
  color: rgba(255, 255, 255, .75);
}

html[data-theme="dark"] .control-panel > .panel-head p,
html[data-theme="dark"] .control-panel > .panel-head [data-control-status] {
  color: rgba(255, 255, 255, .65);
}

html[data-theme="dark"] .control-panel > .panel-head h2,
html[data-theme="dark"] .control-panel > .panel-head span {
  color: #fff;
}

/* Chemical stock cards */
html[data-theme="dark"] .chemical-stock-card {
  background: rgba(255, 255, 255, .03);
  border-color: var(--line);
  color: var(--ink);
}

html[data-theme="dark"] .chemical-stock-card strong {
  color: var(--ink);
}

html[data-theme="dark"] .chemical-stock-card span,
html[data-theme="dark"] .chemical-stock-card small {
  color: var(--muted);
}

/* Equipment & motor cards */
html[data-theme="dark"] .motor-card,
html[data-theme="dark"] .equipment-process-card,
html[data-theme="dark"] .energy-process-card {
  background: rgba(255, 255, 255, .03);
  border-color: var(--line);
  color: var(--ink);
}

html[data-theme="dark"] .motor-card {
  border-color: var(--line);
  background: var(--panel);
}

html[data-theme="dark"] .motor-card-top {
  background: rgba(255,255,255,.03);
  border-color: rgba(255,255,255,.06);
}

html[data-theme="dark"] .motor-card.active .motor-card-top {
  background: linear-gradient(135deg, rgba(11,79,122,.25), rgba(0,168,200,.12));
}

html[data-theme="dark"] .motor-type-icon { background: #1a6fa0; }

html[data-theme="dark"] .motor-mini-values div {
  background: transparent;
  border-color: rgba(255,255,255,.06);
}

html[data-theme="dark"] .motor-maintenance-summary {
  background: rgba(255,255,255,.025);
  border-color: rgba(255,255,255,.06);
}

html[data-theme="dark"] .motor-maintenance-item + .motor-maintenance-item {
  border-color: rgba(255,255,255,.06);
}

html[data-theme="dark"] .motor-maintenance-label,
html[data-theme="dark"] .motor-maintenance-note {
  color: var(--muted);
}

html[data-theme="dark"] .motor-maintenance-value {
  color: var(--ink);
}

html[data-theme="dark"] .motor-mini-values strong,
html[data-theme="dark"] .motor-card h4 { color: var(--ink); }

html[data-theme="dark"] .motor-mini-values span { color: var(--muted); }

html[data-theme="dark"] .motor-type-label { color: #64748b; }

html[data-theme="dark"] .energy-process-card strong { color: var(--ink); }
html[data-theme="dark"] .energy-process-card span,
html[data-theme="dark"] .energy-process-card p { color: var(--muted); }

html[data-theme="dark"] .equipment-detail-grid article {
  background: rgba(255, 255, 255, .03);
  border-color: var(--line);
}

html[data-theme="dark"] .equipment-detail-grid strong {
  color: var(--ink);
}

/* Diagram (process flow) nodes */
html[data-theme="dark"] .diagram-node {
  background: linear-gradient(180deg, var(--panel), rgba(29, 44, 64, .85));
  border-color: var(--line);
  color: var(--ink);
}

html[data-theme="dark"] .diagram-sensors > div {
  background: rgba(255, 255, 255, .04);
  border-color: var(--line);
  color: var(--ink);
}

/* Inlet line cards */
html[data-theme="dark"] .inlet-line-card {
  background: rgba(255, 255, 255, .02);
}

html[data-theme="dark"] .inlet-line-title h3 {
  color: var(--ink);
}

/* Setpoint cards */
html[data-theme="dark"] .setpoint-card,
html[data-theme="dark"] .inlet-setpoint-grid .setpoint-card {
  background: rgba(255, 255, 255, .03);
}

/* Tool form / details panels */
html[data-theme="dark"] .auto-parameter-grid article,
html[data-theme="dark"] .compliance-summary-card,
html[data-theme="dark"] .compliance-pie-card,
html[data-theme="dark"] .energy-pie-panel,
html[data-theme="dark"] .energy-pie-layout,
html[data-theme="dark"] .chemical-overview-shell {
  background: var(--panel);
  border-color: var(--line);
  color: var(--ink);
}

/* Auto parameter grid labels (Trend page "Parameter" cards) */
html[data-theme="dark"] .auto-parameter-grid label {
  background: rgba(255, 255, 255, .03);
  border-color: var(--line);
  color: var(--ink);
}

html[data-theme="dark"] .auto-parameter-grid label span {
  color: var(--muted);
}

html[data-theme="dark"] .auto-parameter-grid label small {
  color: var(--muted);
}

html[data-theme="dark"] .auto-parameter-grid label strong {
  color: var(--ink);
}

html[data-theme="dark"] .auto-parameter-grid input {
  background: #1d2c40;
  color: var(--ink);
  border-color: var(--line);
}

html[data-theme="dark"] .auto-parameter-grid .unmapped-auto-param {
  background: rgba(255, 255, 255, .02);
}

html[data-theme="dark"] .auto-parameter-grid .unmapped-auto-param input {
  color: var(--muted);
}

/* Period control (date/time pickers + period buttons) */
html[data-theme="dark"] .period-control button,
html[data-theme="dark"] .period-control input {
  background: #1d2c40;
  color: var(--ink);
  border-color: var(--line);
}

html[data-theme="dark"] .period-control button:not(.active):hover {
  background: rgba(52, 200, 232, .12);
  color: var(--brand-2);
}

html[data-theme="dark"] .period-control button.active {
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #0d1520;
  border-color: var(--brand);
}

/* Native date/time picker indicator (calendar/clock icon) — invert in dark mode */
html[data-theme="dark"] input[type="date"],
html[data-theme="dark"] input[type="time"],
html[data-theme="dark"] input[type="datetime-local"],
html[data-theme="dark"] input[type="month"],
html[data-theme="dark"] input[type="week"] {
  background: #1d2c40;
  color: var(--ink);
  color-scheme: dark;
}

html[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
html[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator,
html[data-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: invert(0.85) hue-rotate(160deg);
  cursor: pointer;
}

/* Generic native form fields (catch-all so date/time pickers anywhere render dark) */
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] input[type="tel"],
html[data-theme="dark"] input[type="url"],
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
  background: #1d2c40;
  color: var(--ink);
  border-color: var(--line);
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
  color: var(--muted);
}

html[data-theme="dark"] select option {
  background: var(--panel);
  color: var(--ink);
}

/* Compact period control (smaller variant on Trend / Alarm / Equipment pages) */
html[data-theme="dark"] .period-control.compact button,
html[data-theme="dark"] .period-control.compact input,
html[data-theme="dark"] .compact-period button,
html[data-theme="dark"] .compact-period input {
  background: #1d2c40;
  color: var(--ink);
  border-color: var(--line);
}

html[data-theme="dark"] .period-control.compact button.active,
html[data-theme="dark"] .compact-period button.active {
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #0d1520;
}

/* Trend options — dark mode */
html[data-theme="dark"] .trend-section-block {
  background: #1e293b;
  border-color: #334155;
  border-left-color: #38bdf8;
}
html[data-theme="dark"] .trend-section-head {
  background: linear-gradient(90deg, rgba(56,189,248,.10) 0%, transparent 100%);
  border-bottom-color: #334155;
}
html[data-theme="dark"] .trend-section-label { color: #93c5fd; }
html[data-theme="dark"] .trend-section-count { color: #475569; background: #0f172a; border-color: #334155; }
html[data-theme="dark"] .trend-section-icon { color: #38bdf8; }
html[data-theme="dark"] .trend-type-row { border-bottom-color: #1e293b; }
html[data-theme="dark"] .trend-type-toggle { background: #0f172a; border-color: #1e3a8a; color: #60a5fa; }
html[data-theme="dark"] .trend-type-toggle:hover { background: #172554; }
html[data-theme="dark"] .trend-type-toggle input[type="checkbox"] { accent-color: #60a5fa; }

html[data-theme="dark"] .trend-chip {
  background: rgba(255, 255, 255, .04);
  border-color: rgba(255, 255, 255, .12);
  color: var(--muted);
}

html[data-theme="dark"] .trend-chip:hover {
  background: rgba(37, 99, 235, .15);
  border-color: rgba(59, 130, 246, .4);
  color: #93c5fd;
}

html[data-theme="dark"] .trend-chip:has(input:checked) {
  background: rgba(37, 99, 235, .22);
  border-color: #3b82f6;
  color: #93c5fd;
}

html[data-theme="dark"] .trend-chip input[type="checkbox"] { accent-color: #60a5fa; }

/* Backward compat for old flat labels in non-inlet pages */
html[data-theme="dark"] .trend-options > label {
  background: rgba(255, 255, 255, .04);
  border-color: var(--line);
  color: var(--muted);
}

html[data-theme="dark"] .trend-options > label:has(input:checked) {
  background: rgba(52, 200, 232, .14);
  color: var(--brand-2);
  border-color: var(--brand);
}

html[data-theme="dark"] .trend-options input[type="checkbox"] { accent-color: var(--brand-2); }

/* Inlet/equipment toolbar (header strip with title + period control) */
html[data-theme="dark"] .inlet-toolbar {
  background: rgba(255, 255, 255, .02);
}

html[data-theme="dark"] .data-range-label {
  color: var(--muted);
}

/* Chart container backgrounds */
html[data-theme="dark"] .inlet-chart {
  background: rgba(255, 255, 255, .02);
}

/* Control trigger buttons (Manual / Auto) — secondary-trigger was white */
html[data-theme="dark"] .secondary-trigger {
  background: rgba(255, 255, 255, .04);
  color: var(--brand-2);
  border-color: var(--line);
}

html[data-theme="dark"] .secondary-trigger:hover {
  background: rgba(52, 200, 232, .12);
}

html[data-theme="dark"] .primary-trigger {
  border-color: var(--brand);
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #0d1520;
}

html[data-theme="dark"] .manual-active .primary-trigger.active {
  border-color: var(--warn);
  background: linear-gradient(135deg, #c97a18, var(--warn));
  color: #0d1520;
}

/* Form field cards inside .tool-form-grid (Lab Result, Report, Chemical, etc.) */
html[data-theme="dark"] .tool-form-grid label,
html[data-theme="dark"] .master-form-grid label,
html[data-theme="dark"] .auto-parameter-grid label {
  background: rgba(255, 255, 255, .03);
  border-color: var(--line);
}

html[data-theme="dark"] .tool-form-grid span,
html[data-theme="dark"] .master-form-grid span {
  color: var(--muted);
}

html[data-theme="dark"] .tool-form-grid input,
html[data-theme="dark"] .tool-form-grid select,
html[data-theme="dark"] .tool-form-grid textarea,
html[data-theme="dark"] .master-form-grid input,
html[data-theme="dark"] .master-form-grid select {
  background: #1d2c40;
  color: var(--ink);
  border-color: var(--line);
}

html[data-theme="dark"] .tool-form-grid input:focus,
html[data-theme="dark"] .tool-form-grid select:focus,
html[data-theme="dark"] .tool-form-grid textarea:focus {
  border-color: var(--brand-2);
  outline: 2px solid rgba(52, 200, 232, .18);
}

/* User-management & modal form-row inputs */
html[data-theme="dark"] .form-row {
  background: rgba(255, 255, 255, .02);
}

html[data-theme="dark"] .form-row label {
  color: var(--muted);
}

html[data-theme="dark"] .form-row input,
html[data-theme="dark"] .form-row select,
html[data-theme="dark"] .form-row textarea {
  background: #1d2c40;
  color: var(--ink);
  border-color: var(--line);
}

/* Modal field (Ganti Password modal, Preferensi modal) */
html[data-theme="dark"] .modal-field {
  color: var(--ink);
}

html[data-theme="dark"] .modal-field span {
  color: var(--muted);
}

html[data-theme="dark"] .modal-field input,
html[data-theme="dark"] .modal-field select {
  background: #1d2c40;
  color: var(--ink);
  border-color: var(--line);
}

html[data-theme="dark"] .modal-field input:focus,
html[data-theme="dark"] .modal-field select:focus {
  border-color: var(--brand-2);
  outline: 2px solid rgba(52, 200, 232, .18);
}

/* Trend Data/SV mode toggle pill */
html[data-theme="dark"] .trend-option-mode {
  background: rgba(52, 200, 232, .08);
  border-color: var(--line);
}

html[data-theme="dark"] .trend-option-mode button {
  color: var(--muted);
}

html[data-theme="dark"] .trend-option-mode button.active {
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #0d1520;
}

/* User action row (Save Sensor Master / Save Equipment Master action strip) */
html[data-theme="dark"] .user-action-row {
  background: rgba(255, 255, 255, .02);
  border-color: var(--line);
}

html[data-theme="dark"] .user-action-row span {
  color: var(--muted);
}

html[data-theme="dark"] .user-action-row span[data-type="ok"] {
  color: var(--ok);
}

html[data-theme="dark"] .user-action-row span[data-type="danger"] {
  color: var(--danger);
}

/* Inlet/equipment toolbar period control already covered, but
   ensure date inputs everywhere are theme-aware for the calendar picker icon */
html[data-theme="dark"] .inlet-toolbar input[type="date"],
html[data-theme="dark"] .compact-period input[type="date"],
html[data-theme="dark"] .compact-period input[type="time"] {
  color-scheme: dark;
}

/* Pump / status row strips in equipment / control panels */
html[data-theme="dark"] .equipment-history-layout .panel,
html[data-theme="dark"] .equipment-overview-head {
  background: var(--panel);
  border-color: var(--line);
}

/* ── Dark mode overrides — maintenance page ── */
html[data-theme="dark"] .maintenance-head {
  background: linear-gradient(135deg, #060e1a 0%, #0a1f3a 55%, #0d3060 100%);
  box-shadow: 0 4px 28px rgba(0, 0, 0, .5);
}

html[data-theme="dark"] .maintenance-head .eyebrow { color: #60a5fa; }
html[data-theme="dark"] .maintenance-head h2      { color: #f0f9ff; }
html[data-theme="dark"] .maintenance-head > div > p { color: rgba(224, 242, 255, .7); }

html[data-theme="dark"] .maintenance-scheduler {
  background: #0f1e2e;
  border-color: rgba(52, 200, 232, .15);
  box-shadow: 0 2px 8px rgba(0,0,0,.3), 0 12px 32px rgba(0,0,0,.2);
}

html[data-theme="dark"] .maintenance-scheduler::before {
  background: linear-gradient(90deg, #0074ad 0%, #00b4d8 55%, #34c8e8 100%);
}

html[data-theme="dark"] .maintenance-scheduler .panel-head {
  background: linear-gradient(135deg, #121f30 0%, #0e1d2e 100%);
  border-bottom-color: rgba(52, 200, 232, .12);
}

html[data-theme="dark"] .maintenance-scheduler .panel-head .eyebrow { color: #34c8e8; }
html[data-theme="dark"] .maintenance-scheduler .panel-head h2      { color: var(--ink); }

html[data-theme="dark"] .maintenance-form-grid { background: #0d1b2a; }

html[data-theme="dark"] .maintenance-form-grid label {
  background: #122033;
  border-color: rgba(52, 200, 232, .15);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
}

html[data-theme="dark"] .maintenance-form-grid label:hover {
  border-color: rgba(52, 200, 232, .35);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
}

html[data-theme="dark"] .maintenance-form-grid label:focus-within {
  border-color: #34c8e8;
  box-shadow: 0 0 0 3px rgba(52, 200, 232, .12), 0 4px 14px rgba(0, 0, 0, .25);
}

html[data-theme="dark"] .maintenance-form-grid span { color: #34c8e8; }

html[data-theme="dark"] .maintenance-form-grid label.wide {
  background: linear-gradient(135deg, #122033 0%, #0f1d2e 100%);
}

html[data-theme="dark"] .maintenance-form-grid input,
html[data-theme="dark"] .maintenance-form-grid select,
html[data-theme="dark"] .maintenance-form-grid textarea {
  background: transparent;
  border: none;
  color: var(--ink);
}

/* Dark mode plan cards */
html[data-theme="dark"] .maintenance-plan-card {
  background: #0f1e2e;
  border-color: #1e3a6a;
  border-left-color: #3b82f6;
  box-shadow: 0 2px 12px rgba(0,0,0,.3);
}
html[data-theme="dark"] .maintenance-plan-card.urgent {
  background: #180c0c;
  border-color: #5b1a1a;
  border-left-color: #ef4444;
}
html[data-theme="dark"] .maintenance-plan-card.watch {
  background: #1a1100;
  border-color: #5c3600;
  border-left-color: #f59e0b;
}
html[data-theme="dark"] .maintenance-plan-area { color: #94a3b8; }
html[data-theme="dark"] .maintenance-plan-name { color: #e2e8f0; }
html[data-theme="dark"] .mplan-meta-cell {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.08);
}
html[data-theme="dark"] .mplan-meta-cell > span { color: #64748b; }
html[data-theme="dark"] .mplan-meta-cell > strong { color: #e2e8f0; }
html[data-theme="dark"] .mplan-meta-cell > strong em { color: #94a3b8; }
html[data-theme="dark"] .issue-box {
  background: rgba(15,30,48,.6);
  border-color: #1e3a6a;
}
html[data-theme="dark"] .issue-row { color: #cbd5e1; }
html[data-theme="dark"] .maintenance-plan-card.urgent .issue-box { background: rgba(30,10,10,.6); border-color: #5b1a1a; }
html[data-theme="dark"] .maintenance-plan-card.watch  .issue-box { background: rgba(30,18,0,.6);  border-color: #5c3600; }
html[data-theme="dark"] .mplan-delete-btn { background: #1a0808; border-color: #5b1a1a; color: #fca5a5; }
html[data-theme="dark"] .mplan-bar-head span { color: #94a3b8; }

/* Dark mode calendar */
html[data-theme="dark"] .maint-cal-head span {
  background: linear-gradient(135deg, #1e3a8a 0%, #1d4ed8 100%);
  border-color: #1e3a8a;
}

html[data-theme="dark"] .maint-cell {
  background: rgba(255, 255, 255, .03);
  border-color: rgba(255, 255, 255, .08);
}

html[data-theme="dark"] .maint-cell-plan {
  background: linear-gradient(135deg, #0d1f4a 0%, #0f2258 100%);
  border-color: #3b82f6;
}

html[data-theme="dark"] .maint-day-num        { color: #e2e8f0; }
html[data-theme="dark"] .maint-cell-plan .maint-day-num { color: #60a5fa; }
html[data-theme="dark"] .maint-no-plan        { color: #475569; }

html[data-theme="dark"] .maint-plan-item {
  background: rgba(37, 99, 235, .2);
  border-color: rgba(59, 130, 246, .4);
}

html[data-theme="dark"] .maint-plan-time  { color: #93c5fd; }
html[data-theme="dark"] .maint-plan-name  { color: #bfdbfe; }

html[data-theme="dark"] .calendar-selector span  { color: #94a3b8; }
html[data-theme="dark"] .calendar-selector select {
  background: #1e2d3d;
  border-color: rgba(255, 255, 255, .12);
  color: var(--ink);
}

/* Maintenance form-grid textarea explicit min-height already; just ensure bg dark */
html[data-theme="dark"] .maintenance-form-grid input::placeholder,
html[data-theme="dark"] .maintenance-form-grid textarea::placeholder,
html[data-theme="dark"] .tool-form-grid input::placeholder,
html[data-theme="dark"] .tool-form-grid textarea::placeholder,
html[data-theme="dark"] .master-form-grid input::placeholder {
  color: var(--muted);
}

/* Chemical period control specific */
html[data-theme="dark"] .chemical-period-control button,
html[data-theme="dark"] .chemical-period-control input {
  background: #1d2c40;
  color: var(--ink);
  border-color: var(--line);
}

html[data-theme="dark"] .chemical-period-control button.active {
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #0d1520;
}

/* Sensor master / equipment table inside master-config-card */
html[data-theme="dark"] .compact-table table,
html[data-theme="dark"] .compact-table thead th,
html[data-theme="dark"] .compact-table tbody td {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}

html[data-theme="dark"] .compact-table thead th {
  background: rgba(52, 200, 232, .08);
}

html[data-theme="dark"] .compact-table tbody tr:hover {
  background: rgba(52, 200, 232, .04);
}

html[data-theme="dark"] .compact-table code {
  background: rgba(52, 200, 232, .12);
  color: var(--brand-2);
}

/* Master config table wrapper bg */
html[data-theme="dark"] .table-wrap {
  background: transparent;
}

/* System strip ("Gateway --", "warning", etc.) */
html[data-theme="dark"] .system-strip-item {
  background: rgba(255, 255, 255, .03);
  border-color: var(--line);
}

html[data-theme="dark"] .system-strip-copy strong,
html[data-theme="dark"] .system-strip-copy small {
  color: var(--ink);
}

html[data-theme="dark"] .system-strip-copy em {
  color: var(--muted);
}

/* Active alarm cards */
html[data-theme="dark"] .active-alarm-card {
  background: rgba(255, 255, 255, .03);
  border-color: var(--line);
  color: var(--ink);
}

html[data-theme="dark"] .active-alarm-card h3,
html[data-theme="dark"] .active-alarm-card strong {
  color: var(--ink);
}

html[data-theme="dark"] .active-alarm-card span,
html[data-theme="dark"] .active-alarm-card p {
  color: var(--muted);
}

/* Sensor config workbench */
html[data-theme="dark"] .sensor-config-workbench,
html[data-theme="dark"] .sensor-process-list button,
html[data-theme="dark"] .sensor-editor-card,
html[data-theme="dark"] .sensor-unit-tabs button,
html[data-theme="dark"] .sensor-setting-intro {
  background: rgba(255, 255, 255, .03);
  border-color: var(--line);
  color: var(--ink);
}

html[data-theme="dark"] .sensor-process-list button.active,
html[data-theme="dark"] .sensor-unit-tabs button.active {
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #0d1520;
}

html[data-theme="dark"] .sensor-editor-card strong,
html[data-theme="dark"] .sensor-process-list button strong,
html[data-theme="dark"] .sensor-setting-intro strong {
  color: var(--ink);
}

html[data-theme="dark"] .sensor-editor-card span,
html[data-theme="dark"] .sensor-process-list button small,
html[data-theme="dark"] .sensor-setting-intro p {
  color: var(--muted);
}

html[data-theme="dark"] .sensor-threshold-grid input {
  background: #1d2c40;
  color: var(--ink);
  border-color: var(--line);
}

/* Master configuration cards */
html[data-theme="dark"] .master-config-card {
  background: rgba(255, 255, 255, .03);
  border-color: var(--line);
  color: var(--ink);
}

/* Manual log panel */
html[data-theme="dark"] .manual-log-panel,
html[data-theme="dark"] [data-manual-log-panel] {
  background: rgba(255, 255, 255, .02);
  border-color: var(--line);
}

/* Spec items */
html[data-theme="dark"] .spec-item,
html[data-theme="dark"] .spec-grid article,
html[data-theme="dark"] .metric-card,
html[data-theme="dark"] .timeline article {
  background: rgba(255, 255, 255, .03);
  border-color: var(--line);
  color: var(--ink);
}

html[data-theme="dark"] .spec-item strong,
html[data-theme="dark"] .metric-card strong,
html[data-theme="dark"] .timeline article strong {
  color: var(--ink);
}

html[data-theme="dark"] .spec-item span,
html[data-theme="dark"] .metric-card p,
html[data-theme="dark"] .timeline article p {
  color: var(--muted);
}

/* Equipment detail grid */
html[data-theme="dark"] .equipment-detail-grid article,
html[data-theme="dark"] .maintenance-life-card {
  background: rgba(255, 255, 255, .03);
  border-color: var(--line);
  color: var(--ink);
}

/* Misc generic articles inside panels */
html[data-theme="dark"] .process-summary-grid article,
html[data-theme="dark"] .energy-summary-grid article,
html[data-theme="dark"] .overview-management-grid article {
  background: rgba(255, 255, 255, .03);
  border-color: var(--line);
  color: var(--ink);
}

/* Search input + select */
html[data-theme="dark"] #menuSearch,
html[data-theme="dark"] .nav-tools input {
  background: rgba(255, 255, 255, .04);
  color: var(--ink);
  border-color: var(--line);
}

html[data-theme="dark"] #menuSearch::placeholder {
  color: var(--muted);
}

html[data-theme="dark"] .badge,
html[data-theme="dark"] [class^="badge-"] {
  filter: brightness(1.05);
}


html[data-theme="dark"] .trend-realtime-control {
  background: var(--panel);
  color: var(--ink);
  border-color: var(--line);
}

html[data-theme="dark"] .trend-realtime-actions button {
  background: #1d2c40;
  color: var(--ink);
  border-color: var(--line);
}

html[data-theme="dark"] .trend-realtime-actions button:hover {
  background: rgba(52, 200, 232, .12);
}

html[data-theme="dark"] svg .grid-line {
  stroke: rgba(255, 255, 255, .08);
}

html[data-theme="dark"] .trend-time-axis span {
  color: var(--muted);
}

html[data-theme="dark"] .y-axis-label,
html[data-theme="dark"] .axis-legend {
  color: var(--muted);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-width: 320px;
  background:
    radial-gradient(circle at 20% 0%, rgba(0, 168, 200, .12), transparent 360px),
    radial-gradient(circle at 88% 10%, rgba(0, 119, 255, .08), transparent 330px),
    linear-gradient(180deg, #ffffff 0%, var(--bg) 52%, #f7fbff 100%);
  color: var(--ink);
  font-family: var(--app-font);
}

button,
input,
select,
textarea,
table,
code,
pre,
kbd,
samp {
  font: inherit;
  font-family: var(--app-font) !important;
}

*[style*="font-family"],
.coag-cfg-input,
.tag-field-wrap input,
.ct-eff-empty code {
  font-family: var(--app-font) !important;
}

button {
  cursor: pointer;
}

.app-shell {
  display: grid;
  grid-template-columns: 286px minmax(0, 1fr);
  min-height: 100vh;
  transition: grid-template-columns .25s ease;
}

.app-shell.nav-collapsed {
  grid-template-columns: 0 minmax(0, 1fr);
}

.app-shell.nav-collapsed .sidebar {
  transform: translateX(-100%);
  opacity: 0;
  pointer-events: none;
}

.sidebar {
  transition: transform .25s ease, opacity .2s ease;
}

.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  transition: background .15s, border-color .15s;
  flex-shrink: 0;
}

.nav-toggle:hover {
  background: rgba(0, 168, 200, .08);
  border-color: var(--brand);
}

.nav-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  margin: 0 auto;
  background: var(--brand);
  border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}

.app-shell.nav-collapsed .nav-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.app-shell.nav-collapsed .nav-toggle span:nth-child(2) { opacity: 0; }
.app-shell.nav-collapsed .nav-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.topbar-title {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
  flex: 1 1 auto;
}

.topbar-title-text {
  min-width: 0;
  flex: 1 1 auto;
}

.user-greeting {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(0, 168, 200, .14), rgba(34, 197, 94, .1));
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  width: fit-content;
}

.user-greeting span {
  color: var(--muted);
  font-weight: 600;
}

.user-greeting strong {
  color: var(--brand);
  font-weight: 800;
}

.user-menu-chevron {
  margin-left: 6px;
  color: var(--muted);
  font-size: 11px;
  transition: transform .15s;
}

.user-menu.open .user-menu-chevron {
  transform: rotate(180deg);
}

.user-menu-info {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: rgba(0, 168, 200, .04);
}

.user-menu-info span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.user-menu-info strong {
  color: var(--ink);
  font-size: 13px;
}

.user-menu-items {
  list-style: none;
  margin: 0;
  padding: 6px 0;
}

.user-menu-items li {
  margin: 0;
}

.user-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  border: none;
  background: transparent;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background .12s;
}

.user-menu-item:hover {
  background: rgba(0, 168, 200, .08);
  color: var(--brand);
}

.user-menu-item .icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  font-size: 14px;
}

.user-menu-logout {
  margin: 6px 12px 12px;
  width: calc(100% - 24px);
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 30, 45, .55);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  backdrop-filter: blur(4px);
}

.modal-overlay[hidden] {
  display: none;
}

.modal-card {
  width: min(520px, 100%);
  max-height: calc(100vh - 60px);
  overflow: auto;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(15, 30, 45, .25);
  border: 1px solid var(--line);
}

.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}

.modal-head h3 {
  margin: 0;
  font-size: 16px;
  color: var(--ink);
}

.modal-close {
  width: 30px;
  height: 30px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 22px;
  cursor: pointer;
  border-radius: 6px;
  transition: background .12s;
}

.modal-close:hover {
  background: rgba(239, 106, 77, .12);
  color: var(--danger);
}

.modal-body {
  padding: 18px 20px;
  display: grid;
  gap: 12px;
}

.modal-hint {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.modal-field {
  display: grid;
  gap: 6px;
}

.modal-field span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
}

.modal-field input,
.modal-field select {
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  background: #fff;
  color: var(--ink);
}

.modal-field input:focus,
.modal-field select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(0, 168, 200, .12);
}

.modal-feedback {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  min-height: 18px;
}

.modal-feedback[data-type="ok"] { color: var(--ok); }
.modal-feedback[data-type="danger"] { color: var(--danger); }
.modal-feedback[data-type="info"] { color: var(--info); }

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 6px;
  border-top: 1px solid var(--line);
  margin-top: 6px;
  padding-top: 14px;
}

.modal-help-list {
  margin: 0;
  padding: 0 0 0 18px;
  display: grid;
  gap: 8px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink);
}

.modal-help-list li strong {
  color: var(--brand);
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: auto;
  border-right: 1px solid var(--line);
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(18px);
  padding: 18px 14px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 6px 18px;
  border-bottom: 1px solid var(--line);
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #ffffff;
  font-size: 13px;
  font-weight: 850;
}

.brand strong,
.brand span {
  display: block;
}

.brand span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.nav-tools {
  padding: 14px 0 10px;
}

.nav-tools input,
select {
  width: 100%;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  color: var(--ink);
  padding: 0 11px;
}

.nav-list {
  display: grid;
  gap: 12px;
}

.nav-section {
  display: grid;
  gap: 4px;
}

.nav-section-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 30px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  padding: 0 10px;
  color: #7a8a96;
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.nav-section-toggle:hover {
  background: #f2f7fa;
  color: var(--brand);
}

.nav-chevron {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--brand);
  font-size: 13px;
}

.nav-section-items {
  display: grid;
  gap: 4px;
}

.nav-section.collapsed .nav-section-items {
  display: none;
}

.nav-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 40px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #314451;
  padding: 7px 9px;
  text-align: left;
}

.nav-item:hover,
.nav-item.active {
  background: linear-gradient(90deg, rgba(0, 168, 200, .12), rgba(0, 119, 255, .06));
  color: var(--brand);
}

.nav-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 28px;
  border-radius: 7px;
  background: #f4f9fc;
  color: var(--brand);
  font-size: 11px;
  font-weight: 850;
  transition: background .15s, color .15s, transform .15s;
}

.nav-icon svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
}

.nav-item:hover .nav-icon,
.nav-item.active .nav-icon {
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff;
  transform: scale(1.05);
  box-shadow: 0 4px 10px rgba(0, 119, 255, .25);
}

html[data-theme="dark"] .nav-icon {
  background: rgba(52, 200, 232, .1);
  color: var(--brand-2);
}

html[data-theme="dark"] .nav-item:hover .nav-icon,
html[data-theme="dark"] .nav-item.active .nav-icon {
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #0d1520;
}

.nav-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 700;
}

.main {
  min-width: 0;
  padding: 22px;
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  position: sticky;
  top: 14px;
  z-index: 80;
  border: 1px solid var(--line);
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(246, 252, 255, .94)),
    #fff;
  box-shadow: 0 18px 45px rgba(28, 66, 92, .10);
  padding: 16px 18px 16px 20px;
  backdrop-filter: blur(18px);
}

.topbar::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  border-radius: 12px 0 0 12px;
  background: linear-gradient(180deg, var(--brand), var(--brand-2));
}

.topbar > div:first-child {
  min-width: 0;
  padding-left: 4px;
}

.eyebrow {
  margin: 0 0 5px;
  color: #527180;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 6px;
  font-size: clamp(25px, 4vw, 36px);
  line-height: 1.08;
}

h2 {
  margin-bottom: 0;
  font-size: 18px;
  line-height: 1.2;
}

h3 {
  margin-bottom: 8px;
  font-size: 14px;
}

#pageSummary {
  max-width: 760px;
  margin-bottom: 0;
  color: var(--muted);
  line-height: 1.5;
}

.topbar-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  flex-wrap: wrap;
}

.user-menu {
  position: relative;
}

.user-menu-button {
  min-height: 52px;
  display: grid;
  grid-template-columns: 40px minmax(120px, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(191, 209, 223, .95);
  border-radius: 12px;
  background: linear-gradient(135deg, #ffffff 0%, #f8fbfd 100%);
  color: var(--ink);
  padding: 6px 14px 6px 7px;
  box-shadow: 0 10px 26px rgba(28, 66, 92, .08);
  text-align: left;
  transition: box-shadow .15s, transform .15s;
}

.user-menu-button:hover {
  box-shadow: 0 14px 32px rgba(28, 66, 92, .12);
  transform: translateY(-1px);
}

.user-avatar {
  position: relative;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: 0 4px 10px rgba(28, 66, 92, .15);
}

.user-avatar.has-image {
  background: #f0f4f7;
}

.user-avatar-initials {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}

.user-avatar.has-image .user-avatar-initials {
  display: none;
}

.user-avatar-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.user-avatar-large {
  width: 72px;
  height: 72px;
  border-radius: 14px;
  font-size: 22px;
}

.topbar-clock {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
  min-height: 52px;
  padding: 6px 14px;
  border: 1px solid rgba(191, 209, 223, .95);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(11, 79, 122, .04) 0%, rgba(0, 168, 200, .08) 100%);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.topbar-clock strong {
  color: var(--brand);
  font-size: 17px;
  font-weight: 900;
  letter-spacing: .02em;
  line-height: 1.1;
}

.topbar-clock small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.user-menu-profile-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  padding: 14px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(135deg, rgba(0, 168, 200, .08) 0%, rgba(34, 197, 94, .04) 100%);
}

.user-menu-profile-avatar {
  position: relative;
  width: 72px;
  height: 72px;
}

.user-avatar-edit {
  position: absolute;
  bottom: -4px;
  right: -4px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 2px solid #fff;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-size: 13px;
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(28, 66, 92, .25);
  transition: transform .15s, background .15s;
}

.user-avatar-edit:hover {
  transform: scale(1.08);
  background: var(--brand-2);
}

.user-menu-profile-text {
  display: grid;
  align-content: center;
  gap: 2px;
  min-width: 0;
}

.user-menu-profile-text strong {
  color: var(--ink);
  font-size: 15px;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-menu-profile-text span {
  color: var(--brand);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.user-menu-profile-text small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .topbar-clock {
    display: none;
  }
}

.user-menu-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.user-menu-copy strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-menu-copy small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.user-menu-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 120;
  width: min(280px, 78vw);
  display: none;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(28, 66, 92, .16);
  padding: 14px;
}

.user-menu.open .user-menu-panel {
  display: grid;
}

.user-menu-panel div {
  display: grid;
  gap: 4px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.user-menu-panel span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.user-menu-panel strong {
  color: var(--ink);
  font-size: 13px;
  word-break: break-word;
}

.field-inline {
  display: grid;
  gap: 5px;
  min-width: 126px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.field-inline select {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  padding: 0 10px;
}

.hidden-role-select {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.primary-button,
.ghost-button,
.small-button {
  min-height: 38px;
  border-radius: 7px;
  border: 1px solid var(--line);
  padding: 0 14px;
  font-weight: 800;
}

.primary-button {
  border-color: var(--brand);
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff;
}

.ghost-button,
.small-button {
  background: #fff;
  color: var(--brand);
}

.topbar-actions .ghost-button,
.topbar-actions .primary-button {
  min-height: 38px;
  border-radius: 9px;
}

.system-strip {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, .86);
  box-shadow: var(--shadow);
  color: #294657;
  padding: 9px 12px;
  font-size: 13px;
}

.system-strip-item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 4px 10px;
  border: 1px solid rgba(191, 209, 223, .7);
  border-radius: 999px;
  background: rgba(248, 251, 253, .78);
}

.system-strip-copy {
  display: flex;
  align-items: baseline;
  gap: 6px;
  line-height: 1.1;
}

.system-strip-copy strong {
  color: #314c60;
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.system-strip-copy small {
  color: #102235;
  font-size: 12px;
  font-weight: 850;
}

.system-strip-copy em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
}

.dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  flex: 0 0 auto;
  box-shadow: 0 0 0 4px rgba(100, 116, 139, .08);
}

.ok {
  background: var(--ok);
}

.warn {
  background: var(--warn);
}

.danger {
  background: var(--danger);
}

.info {
  background: var(--info);
}

.manual {
  background: var(--purple);
}

.content {
  margin-top: 16px;
}

.app-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, .82);
  color: var(--muted);
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 800;
}

.overview-kpi-board {
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(248, 252, 255, .94)),
    radial-gradient(circle at 95% 0%, rgba(0, 168, 200, .1), transparent 300px);
  box-shadow: var(--glow);
  padding: 18px;
  overflow: hidden;
}

.overview-page {
  display: grid;
  gap: 16px;
}

.overview-range-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, .92);
  padding: 14px 16px;
  box-shadow: 0 8px 24px rgba(28, 66, 92, .06);
}

.overview-range-copy {
  display: grid;
  gap: 3px;
  min-width: 240px;
}

.overview-range-copy h2 {
  margin: 0;
  font-size: 18px;
  line-height: 1.2;
}

.overview-range-copy span {
  color: var(--muted);
  font-size: 12px;
}

.overview-main-period {
  align-items: center;
}

.overview-range-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  border: 1px solid rgba(0, 148, 178, .18);
  border-radius: 999px;
  background: rgba(0, 168, 200, .08);
  color: var(--brand);
  padding: 0 10px;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.overview-kpi-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}

.overview-kpi-header h2 {
  margin-bottom: 0;
  font-size: 24px;
}

.overview-kpi-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.overview-kpi-card {
  position: relative;
  display: grid;
  gap: 12px;
  min-height: 152px;
  border: 1px solid var(--line);
  border-top: 4px solid var(--info);
  border-radius: 8px;
  background: rgba(255, 255, 255, .9);
  padding: 14px;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}

.overview-kpi-card.is-clickable {
  cursor: pointer;
}

.overview-kpi-card.is-clickable:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(28, 66, 92, .14);
  border-color: var(--brand);
}

.overview-kpi-card.is-clickable:focus-visible {
  outline: 2px solid var(--brand-2);
  outline-offset: 2px;
}

.kpi-route-hint {
  position: absolute;
  bottom: 8px;
  right: 12px;
  color: var(--brand);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .02em;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity .15s, transform .15s;
}

.overview-kpi-card.is-clickable:hover .kpi-route-hint,
.overview-kpi-card.is-clickable:focus-visible .kpi-route-hint {
  opacity: 1;
  transform: translateX(0);
}

html[data-theme="dark"] .overview-kpi-card.is-clickable:hover {
  border-color: var(--brand-2);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .4);
}

html[data-theme="dark"] .kpi-route-hint {
  color: var(--brand-2);
}

/* Executive summary banner for the Director Overview */
.executive-summary {
  position: relative;
  border-radius: 14px;
  border: 1px solid var(--line);
  overflow: hidden;
  margin-bottom: 16px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(248, 252, 255, .94));
  box-shadow: 0 18px 45px rgba(28, 66, 92, .08);
}

.executive-summary.tone-ok {
  border-left: 6px solid var(--ok);
}

.executive-summary.tone-warn {
  border-left: 6px solid var(--warn);
}

.executive-summary.tone-danger {
  border-left: 6px solid var(--danger);
  animation: execPulse 2s ease-in-out infinite;
}

@keyframes execPulse {
  0%, 100% { box-shadow: 0 18px 45px rgba(216, 68, 68, .15); }
  50% { box-shadow: 0 18px 60px rgba(216, 68, 68, .35); }
}

.executive-summary-head {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 20px 22px;
}

.executive-summary-icon {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  font-size: 32px;
  background: rgba(0, 168, 200, .08);
}

.executive-summary.tone-ok .executive-summary-icon {
  background: rgba(0, 168, 120, .12);
}

.executive-summary.tone-warn .executive-summary-icon {
  background: rgba(214, 138, 0, .12);
}

.executive-summary.tone-danger .executive-summary-icon {
  background: rgba(216, 68, 68, .12);
}

.executive-summary-text .eyebrow {
  margin-bottom: 4px;
}

.executive-summary-text h2 {
  margin: 0 0 8px;
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1.15;
  color: var(--ink);
}

.executive-status {
  color: var(--brand);
  font-weight: 900;
  letter-spacing: .01em;
}

.executive-summary.tone-ok .executive-status {
  color: var(--ok);
}

.executive-summary.tone-warn .executive-status {
  color: var(--warn);
}

.executive-summary.tone-danger .executive-status {
  color: var(--danger);
}

.executive-message {
  margin: 0;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.5;
}

.executive-message strong {
  color: var(--brand);
  font-weight: 900;
}

.executive-summary.tone-ok .executive-message strong { color: var(--ok); }
.executive-summary.tone-warn .executive-message strong { color: var(--warn); }
.executive-summary.tone-danger .executive-message strong { color: var(--danger); }

.executive-summary-stats {
  display: flex;
  gap: 8px;
  align-items: center;
}

.exec-stat {
  display: grid;
  place-items: center;
  min-width: 64px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, .85);
}

.exec-stat strong {
  display: block;
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
}

.exec-stat span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.exec-stat.ok strong { color: var(--ok); }
.exec-stat.ok { border-color: rgba(0, 168, 120, .35); background: rgba(0, 168, 120, .06); }

.exec-stat.warn strong { color: var(--warn); }
.exec-stat.warn { border-color: rgba(214, 138, 0, .35); background: rgba(214, 138, 0, .06); }

.exec-stat.danger strong { color: var(--danger); }
.exec-stat.danger { border-color: rgba(216, 68, 68, .35); background: rgba(216, 68, 68, .06); }

.executive-recommendation {
  display: grid;
  gap: 6px;
  padding: 14px 22px 18px;
  border-top: 1px dashed var(--line);
  background: rgba(0, 168, 200, .04);
}

.exec-rec-label {
  color: var(--brand);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.executive-recommendation p {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.55;
}

/* KPI target & achievement rows */
.kpi-target-row {
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
}

.kpi-target-label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .02em;
}

.kpi-achievement {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .02em;
}

.kpi-achievement-ok {
  background: rgba(0, 168, 120, .14);
  color: #006e4f;
}

.kpi-achievement-warn {
  background: rgba(214, 138, 0, .14);
  color: #8a5a00;
}

.kpi-achievement-danger {
  background: rgba(216, 68, 68, .14);
  color: #9a2a2a;
}

.kpi-achievement-icon {
  font-weight: 900;
}

/* Dark mode for executive summary */
html[data-theme="dark"] .executive-summary {
  background: linear-gradient(135deg, var(--panel), rgba(29, 44, 64, .92));
  border-color: var(--line);
  box-shadow: 0 18px 45px rgba(0, 0, 0, .35);
}

html[data-theme="dark"] .overview-range-toolbar {
  background: rgba(16, 26, 38, .92);
  border-color: var(--line);
  box-shadow: 0 14px 36px rgba(0, 0, 0, .28);
}

html[data-theme="dark"] .overview-range-chip {
  background: rgba(52, 200, 232, .12);
  border-color: rgba(77, 212, 240, .22);
  color: var(--brand-2);
}

html[data-theme="dark"] .executive-summary-icon {
  background: rgba(52, 200, 232, .1);
}

html[data-theme="dark"] .executive-summary.tone-ok .executive-summary-icon {
  background: rgba(34, 201, 151, .16);
}

html[data-theme="dark"] .executive-summary.tone-warn .executive-summary-icon {
  background: rgba(240, 169, 58, .16);
}

html[data-theme="dark"] .executive-summary.tone-danger .executive-summary-icon {
  background: rgba(239, 106, 77, .16);
}

html[data-theme="dark"] .executive-summary-text h2,
html[data-theme="dark"] .executive-message,
html[data-theme="dark"] .executive-recommendation p {
  color: var(--ink);
}

html[data-theme="dark"] .exec-stat {
  background: rgba(255, 255, 255, .03);
  border-color: var(--line);
}

html[data-theme="dark"] .executive-recommendation {
  background: rgba(52, 200, 232, .06);
  border-top-color: var(--line);
}

html[data-theme="dark"] .exec-rec-label {
  color: var(--brand-2);
}

html[data-theme="dark"] .kpi-target-row {
  border-top-color: var(--line);
}

html[data-theme="dark"] .kpi-achievement-ok {
  background: rgba(34, 201, 151, .2);
  color: #6eebbf;
}

html[data-theme="dark"] .kpi-achievement-warn {
  background: rgba(240, 169, 58, .2);
  color: #ffd28a;
}

html[data-theme="dark"] .kpi-achievement-danger {
  background: rgba(239, 106, 77, .2);
  color: #ffb09c;
}

@media (max-width: 720px) {
  .overview-range-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .overview-main-period {
    justify-content: flex-start;
  }

  .overview-main-period button,
  .overview-main-period input {
    flex: 1 1 auto;
  }

  .executive-summary-head {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .executive-summary-icon {
    margin: 0 auto;
  }
  .executive-summary-stats {
    justify-content: center;
  }
}

.overview-info-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  box-shadow: 0 10px 22px rgba(0, 119, 255, .15);
}

.overview-info-icon svg,
.station-icon svg,
.diagram-icon svg {
  width: 24px;
  height: 24px;
}

.kpi-name {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}

.overview-management-grid {
  display: grid;
  grid-template-columns: minmax(440px, 1fr) minmax(0, 1.1fr);
  gap: 20px;
}

.overview-management-stack {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.overview-management-stack .overview-full-trend,
.overview-management-stack .overview-management-trend {
  min-width: 0;
}

.overview-management-stack .overview-management-trend {
  min-height: 470px;
}

.overview-management-stack .overview-bar-chart svg {
  height: 310px;
}

.overview-cost-panel-standalone {
  overflow: hidden;
}

.overview-cost-panel-standalone .cost-pie-layout {
  grid-template-columns: minmax(230px, 260px) minmax(0, 1fr);
  gap: 28px;
}

.overview-cost-panel-standalone .cost-donut {
  width: 250px;
  height: 250px;
}

.overview-cost-panel-standalone .cost-breakdown {
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  align-content: center;
}

.overview-carousel {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, .96);
  box-shadow: var(--glow);
  padding: 16px;
}

.carousel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.carousel-actions {
  display: flex;
  gap: 8px;
}

.carousel-actions button,
.carousel-dots button {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--brand);
  padding: 0 11px;
  font-size: 12px;
  font-weight: 850;
}

.carousel-dots button.active,
.carousel-actions button:hover {
  border-color: var(--brand);
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff;
}

.carousel-track {
  position: relative;
  min-height: 430px;
}

.carousel-slide {
  display: none;
  animation: carouselFade .35s ease-out;
}

.carousel-slide.active {
  display: block;
}

.carousel-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.overview-single-trend .overview-alarm-trend {
  min-height: 400px;
}

@keyframes carouselFade {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.overview-cost-panel,
.overview-alarm-trend,
.overview-alarm-table {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, .96);
  box-shadow: var(--glow);
  padding: 16px;
}

.cost-pie-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  align-items: center;
  gap: 24px;
}

.overview-cost-panel-compact .cost-pie-layout {
  grid-template-columns: minmax(190px, 230px) minmax(0, 1fr);
  gap: 18px;
}

.overview-cost-panel-compact .cost-donut {
  width: 220px;
  height: 220px;
}

.overview-cost-panel-compact .cost-breakdown {
  grid-template-columns: repeat(2, minmax(180px, 1fr));
}

.cost-donut {
  display: grid;
  grid-template-rows: auto auto auto;
  place-items: center;
  align-content: center;
  align-items: center;
  justify-content: center;
  width: 280px;
  height: 280px;
  border-radius: 999px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(191, 209, 223, .75);
  box-shadow: inset 0 0 0 18px rgba(255, 255, 255, .45), 0 16px 36px rgba(28, 66, 92, .12);
  background:
    radial-gradient(circle, #fff 0 60%, rgba(255,255,255,.97) 61%, transparent 62%),
    conic-gradient(#0E7C86 0 45%, #2F80ED 45% 79%, #12A076 79% 93%, #F2B84B 93% 100%);
}

.cost-donut small {
  position: relative;
  z-index: 1;
  display: block;
  width: 72%;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.cost-donut strong {
  position: relative;
  z-index: 1;
  display: block;
  width: 84%;
  max-width: 84%;
  margin-top: 8px;
  overflow: visible;
  text-overflow: clip;
  text-align: center;
  white-space: nowrap;
  line-height: 1;
  font-size: clamp(20px, 1.55vw, 26px);
  font-weight: 760;
  letter-spacing: 0;
  color: var(--ink);
}

.cost-donut span {
  position: relative;
  z-index: 1;
  display: block;
  width: 72%;
  max-width: 72%;
  margin-top: 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}

.cost-breakdown {
  display: grid;
  gap: 10px;
}

.cost-breakdown div {
  display: grid;
  grid-template-columns: 12px minmax(120px, 1fr) minmax(92px, auto) minmax(48px, auto);
  align-items: center;
  gap: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 11px 12px;
  min-height: 46px;
}

.cost-breakdown i {
  width: 12px;
  height: 12px;
  border-radius: 999px;
}

.cost-breakdown span {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cost-breakdown strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
  text-align: right;
  white-space: nowrap;
}

.cost-breakdown small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  text-align: right;
  white-space: nowrap;
}

@media (max-width: 780px) {
  .overview-cost-panel-standalone .cost-pie-layout,
  .overview-cost-panel-compact .cost-pie-layout,
  .cost-pie-layout {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .overview-cost-panel-standalone .cost-breakdown,
  .overview-cost-panel-compact .cost-breakdown {
    grid-template-columns: 1fr;
    width: 100%;
  }

  .overview-management-stack .overview-management-trend {
    min-height: 430px;
  }
}

.overview-kpi-card.ok {
  border-color: rgba(0, 168, 120, .34);
  border-top-color: var(--ok);
  background: var(--soft-ok);
}

.overview-kpi-card.warn {
  border-color: rgba(214, 138, 0, .34);
  border-top-color: var(--warn);
  background: var(--soft-warn);
}

.overview-kpi-card.danger {
  border-color: rgba(216, 68, 68, .34);
  border-top-color: var(--danger);
  background: var(--soft-danger);
}

.kpi-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.kpi-card-top span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.35;
  text-transform: uppercase;
}

.overview-kpi-card strong {
  color: #102536;
  font-size: 28px;
  line-height: 1.05;
}

.overview-kpi-card p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.overview-command {
  display: grid;
  gap: 16px;
}

.process-flow-page {
  display: grid;
  gap: 16px;
}

.process-flow-header,
.process-overview-board,
.process-diagram-panel,
.process-summary-grid article {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, .96);
  box-shadow: var(--glow);
}

.process-flow-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 18px;
}

.process-flow-header h2 {
  margin-bottom: 8px;
  font-size: 26px;
}

.process-flow-header p {
  margin-bottom: 0;
  color: var(--muted);
}

.process-status-legend {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.process-diagram-panel {
  padding: 16px;
  overflow: hidden;
}

.process-overview-board {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.process-overview-visual {
  position: relative;
  min-height: 236px;
  overflow: hidden;
  border: 1px solid rgba(20, 91, 69, .18);
  border-radius: 10px;
  background:
    repeating-linear-gradient(0deg, transparent 0 31px, rgba(255, 255, 255, .18) 32px),
    repeating-linear-gradient(90deg, transparent 0 31px, rgba(255, 255, 255, .16) 32px),
    linear-gradient(135deg, #94d351 0%, #b7dd6b 55%, #d3e983 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28);
  display: grid;
  grid-template-columns: repeat(7, minmax(92px, 1fr));
  grid-template-rows: repeat(3, minmax(56px, 1fr));
  gap: 10px;
  padding: 20px 22px 22px;
}

.process-overview-line {
  position: absolute;
  z-index: 0;
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, #17779b, #23a7c8);
  box-shadow: 0 2px 0 rgba(255, 255, 255, .25);
}

.process-overview-line::after {
  content: "";
  position: absolute;
  right: -4px;
  top: 50%;
  width: 12px;
  height: 12px;
  border-top: 5px solid #17779b;
  border-right: 5px solid #17779b;
  transform: translateY(-50%) rotate(45deg);
}

.process-overview-line--water {
  left: 11%;
  right: 8%;
  top: 48%;
}

.process-overview-line--sludge {
  left: 58%;
  right: 23%;
  top: 28%;
  background: linear-gradient(90deg, #d28b00, #f4b63f);
  transform: rotate(-15deg);
}

.process-overview-stage {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 4px;
  min-height: 78px;
  border: 1px solid rgba(255, 255, 255, .58);
  border-radius: 9px;
  background: rgba(255, 255, 255, .76);
  box-shadow: 0 10px 28px rgba(14, 65, 85, .12);
  padding: 9px 8px;
  text-align: center;
}

.process-overview-stage strong {
  color: #102033;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .04em;
  line-height: 1.15;
  text-transform: uppercase;
}

.process-overview-stage span {
  color: #426173;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
}

.process-overview-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff;
  box-shadow: 0 10px 18px rgba(0, 92, 130, .22);
}

.process-overview-icon svg {
  width: 22px;
  height: 22px;
}

.process-overview-stage--input { grid-column: 1; grid-row: 2; }
.process-overview-stage--ct { grid-column: 2; grid-row: 1; }
.process-overview-stage--eq { grid-column: 4; grid-row: 1; }
.process-overview-stage--aer { grid-column: 2; grid-row: 3; }
.process-overview-stage--floc { grid-column: 4; grid-row: 3; }
.process-overview-stage--daf { grid-column: 5; grid-row: 3; }
.process-overview-stage--out { grid-column: 7; grid-row: 3; }
.process-overview-stage--sludge { grid-column: 6; grid-row: 1; }

.process-overview-notes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.process-overview-notes div {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdff;
  padding: 10px 12px;
}

.process-overview-notes strong {
  display: block;
  margin-bottom: 4px;
  color: var(--ink);
  font-size: 12px;
}

.process-overview-notes span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

/* P&ID Overview page styling */
.pid-overview-page {
  display: grid;
  gap: 16px;
}

.pid-board {
  display: grid;
  gap: 14px;
}

.pid-board-canvas {
  background:
    repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(100, 116, 139, .08) 40px),
    repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(100, 116, 139, .08) 40px),
    #fafbfc;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 14px;
  overflow-x: auto;
}

.pid-board-canvas:fullscreen {
  padding: 24px;
  background: #fafbfc;
}

.pid-board-canvas svg {
  display: block;
  max-width: 100%;
  height: auto;
}

html[data-theme="dark"] .pid-board-canvas {
  background:
    repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(255, 255, 255, .04) 40px),
    repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(255, 255, 255, .04) 40px),
    var(--panel);
  border-color: var(--line);
}

.diagram-title {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.diagram-title span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.process-diagram {
  display: grid;
  gap: 18px;
  padding: 4px;
  overflow: visible;
}

.diagram-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
}

.diagram-node {
  position: relative;
  min-height: 124px;
  border: 1px solid var(--line);
  border-top: 4px solid var(--ok);
  border-radius: 10px;
  background:
    linear-gradient(180deg, #ffffff, #fbfdff),
    radial-gradient(circle at 80% 0%, rgba(0, 168, 200, .14), transparent 130px);
  padding: 12px;
}

.diagram-node:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -19px;
  width: 19px;
  height: 2px;
  background: var(--line-strong);
  transform: translateY(-50%);
}

.diagram-node:not(:last-child)::before {
  content: "";
  position: absolute;
  top: calc(50% - 5px);
  right: -21px;
  width: 10px;
  height: 10px;
  border-top: 2px solid var(--line-strong);
  border-right: 2px solid var(--line-strong);
  transform: rotate(45deg);
}

.diagram-row .diagram-node:last-child::after,
.diagram-row .diagram-node:last-child::before {
  content: none;
}

.diagram-node.warn {
  border-top-color: var(--warn);
}

.diagram-node.info {
  border-top-color: var(--info);
}

.diagram-node.danger {
  border-top-color: var(--danger);
}

.node-carousel-card {
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 10px;
}

.node-carousel-track {
  position: relative;
  min-height: 178px;
}

.diagram-node-slide {
  display: none;
  animation: carouselFade .25s ease-out;
}

.diagram-node-slide.active {
  display: block;
}

.node-carousel-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.node-carousel-top h3 {
  margin-bottom: 2px;
}

.node-carousel-top small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.node-carousel-controls {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 30px;
  align-items: center;
  gap: 8px;
  border-top: 1px solid var(--line);
  padding-top: 6px;
}

.node-carousel-controls button {
  display: grid;
  place-items: center;
  width: 30px;
  height: 28px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--brand);
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
}

.node-carousel-controls button:hover {
  border-color: var(--brand);
  background: var(--soft-info);
}

.node-carousel-controls span {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-align: center;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.process-unit-carousel .diagram-title {
  align-items: center;
}

.process-unit-track {
  position: relative;
  min-height: 250px;
}

.process-unit-slide {
  display: none;
  animation: carouselFade .35s ease-out;
}

.process-unit-slide.active {
  display: grid;
  gap: 14px;
}

.process-unit-copy h3 {
  margin: 0;
  font-size: 18px;
}

.process-unit-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.process-unit-card {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  padding: 12px;
  box-shadow: inset 0 0 0 1px rgba(0, 168, 200, .04);
}

.process-unit-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.process-unit-top h4 {
  margin: 0;
  font-size: 15px;
}

.diagram-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  box-shadow: 0 10px 24px rgba(0, 119, 255, .16);
}

.diagram-icon--small {
  width: 34px;
  height: 34px;
  border-radius: 10px;
}

.diagram-node h3 {
  margin: 0 0 8px;
  font-size: 15px;
}

.diagram-sensors {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.diagram-sensors div {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  min-height: 32px;
  padding: 6px 8px;
}

.diagram-sensors > [data-sensor-tag] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(72px, auto);
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 36px;
  gap: 10px;
  padding: 8px 10px;
}

.diagram-sensors span:not(.sensor-type-icon):not(.sensor-label-text) {
  color: var(--muted);
  font-size: 11px;
}

.diagram-sensor-label {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  line-height: 1.25;
}

.sensor-label-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  color: #475569;
  font-size: 13px;
  font-weight: 500;
}

.sensor-label-text small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 400;
}

.sensor-type-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: #0b4f7a;
  color: #ffffff;
}

.sensor-type-icon svg {
  width: 15px;
  height: 15px;
}

/* All types — single dark navy */
[data-type] .sensor-type-icon { background: #0b4f7a; color: #ffffff; }

.diagram-sensor-label small {
  color: var(--muted);
  font-size: 10px;
}

.diagram-sensors strong {
  min-width: 0;
  max-width: 100%;
  color: #1e40af;
  text-align: right;
  font-size: 14px;
  font-weight: 500;
  overflow-wrap: anywhere;
  white-space: nowrap;
  letter-spacing: -.01em;
}

.diagram-sensors .diagram-sensor-subgroup {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.diagram-sensors .diagram-sensor-subgroup > [data-sensor-tag] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(72px, auto);
  align-items: center;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.diagram-node {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 8px;
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.node-units-card {
  align-content: start;
  gap: 12px;
}

.node-units-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.node-units-head h3 {
  margin: 0 0 2px;
}

.node-units-head small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.node-unit-list {
  display: grid;
  gap: 10px;
}

.diagram-node-unit {
  display: grid;
  gap: 8px;
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  padding: 12px;
  border: 1px solid #a9d1ec;
  border-left: 4px solid var(--brand);
  border-radius: 10px;
  background: linear-gradient(180deg, #f7fcff, #edf7ff);
  box-shadow: inset 0 0 0 1px rgba(0, 119, 170, .05), 0 8px 18px rgba(6, 79, 120, .07);
}

.diagram-node-unit-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 0 2px 4px 4px;
}

.diagram-node-unit-head h4 {
  margin: 0 0 2px;
  color: #062f49;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.15;
}

.diagram-node-unit-head small {
  display: inline-flex;
  width: max-content;
  color: #075f83;
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
  padding: 2px 8px;
  border: 1px solid rgba(0, 143, 177, .18);
  border-radius: 999px;
  background: #e9f8ff;
}

.diagram-node-unit .diagram-sensors {
  gap: 8px;
}

.diagram-node-unit .diagram-sensors > [data-sensor-tag],
.diagram-node-unit .diagram-sensors .diagram-sensor-subgroup > [data-sensor-tag] {
  min-height: 42px;
  padding: 9px 12px;
  border-width: 1.5px;
  border-color: #93c8f4;
  border-radius: 10px;
  background: #eef8ff;
  box-shadow: inset 0 0 0 1px rgba(47, 128, 237, .09);
}

.diagram-node-unit .diagram-sensor-label {
  color: #405c72;
  font-size: 12px;
  font-weight: 750;
}

.diagram-node-unit .diagram-sensor-label small {
  display: inline;
  color: #627b92;
  font-size: 10px;
}

.diagram-node-unit .diagram-sensors strong {
  color: #004b78;
  font-size: 16px;
  line-height: 1.1;
}

.diagram-node-unit .diagram-sensors [data-sensor-tag].sensor-health-normal {
  background: #ddf8ec !important;
  border-color: #2fc995 !important;
}

.diagram-node-unit .diagram-sensors [data-sensor-tag].sensor-health-warning {
  background: #fff1d2 !important;
  border-color: #efb846 !important;
}

.diagram-node-unit .diagram-sensors [data-sensor-tag].sensor-health-danger {
  background: #ffe5e5 !important;
  border-color: #ff7d7d !important;
}

.diagram-node-unit .diagram-sensors [data-sensor-tag].sensor-health-neutral,
.diagram-node-unit .diagram-sensors [data-sensor-tag].sensor-health-nodata {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
}

.row-flow-down {
  display: grid;
  place-items: center;
  min-height: 38px;
  position: relative;
}

.row-flow-down::before {
  content: "";
  width: 2px;
  height: 38px;
  background: var(--line-strong);
}

.row-flow-down::after {
  content: "";
  position: absolute;
  bottom: 3px;
  width: 10px;
  height: 10px;
  border-bottom: 2px solid var(--line-strong);
  border-right: 2px solid var(--line-strong);
  transform: rotate(45deg);
}

.row-flow-down span {
  position: absolute;
  right: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.sludge-panel {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(252, 250, 255, .94)),
    radial-gradient(circle at 100% 0%, rgba(122, 88, 216, .12), transparent 300px);
}

.process-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.process-summary-grid article {
  padding: 14px;
}

.process-summary-grid span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}

.process-summary-grid strong {
  display: block;
  margin: 7px 0 5px;
  font-size: 26px;
}

.process-summary-grid p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 13px;
}

.inlet-page,
.monitoring-page {
  display: grid;
  gap: 16px;
}

.inlet-toolbar,
.inlet-flow-panel,
.inlet-trend-panel,
.inlet-history-panel {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, .96);
  box-shadow: var(--glow);
  padding: 16px;
}

/* Trend drawer sits flush — chart follows below */
.inlet-trend-panel .trend-param-drawer {
  margin: 0 -16px;
}

.inlet-trend-panel .inlet-chart {
  margin-top: 12px;
}

.inlet-trend-panel[data-trend-selection-note]::after {
  content: attr(data-trend-selection-note);
  display: block;
  margin-top: 8px;
  color: var(--warn);
  font-size: 11px;
  font-weight: 750;
}

.inlet-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.inlet-toolbar h2 {
  margin-bottom: 0;
  font-size: 24px;
}

.equipment-toolbar-meta {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 8px;
}

.equipment-connected-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  padding: 0 13px;
  border: 1px solid rgba(11, 79, 122, .12);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(237, 246, 255, .96), rgba(226, 241, 253, .92));
  color: #0b4f7a;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0;
  box-shadow: 0 8px 18px rgba(15, 79, 122, .06);
}

.equipment-connected-badge::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--ok);
  box-shadow: 0 0 0 4px rgba(0, 168, 120, .12);
}

html[data-theme="dark"] .equipment-connected-badge {
  border-color: rgba(77, 212, 240, .2);
  background: rgba(52, 200, 232, .1);
  color: #9be7f6;
  box-shadow: none;
}

.period-control {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.period-control button,
.period-control input {
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  color: var(--ink);
  padding: 0 10px;
}

.period-control button.active {
  border-color: var(--brand);
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff;
}

/* ================================================================
   CT Efficiency Card — modern redesign
   ================================================================ */
.ct-efficiency-section {
  margin-bottom: 20px;
}

.ct-efficiency-card {
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 16px rgba(0, 0, 0, .08);
  overflow: hidden;
}

/* Header — gradient bar */
.ct-eff-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 22px;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%);
}

.ct-eff-eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: rgba(255, 255, 255, .72);
  margin-bottom: 3px;
}

.ct-eff-title {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  color: #fff;
}

.ct-eff-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 14px;
  border-radius: 99px;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  background: rgba(255, 255, 255, .18);
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, .35);
  flex-shrink: 0;
}

.ct-eff-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  flex-shrink: 0;
}

.ct-eff-status--ok    .ct-eff-status-dot { background: #4ade80; box-shadow: 0 0 7px #4ade80; }
.ct-eff-status--warn  .ct-eff-status-dot { background: #fcd34d; box-shadow: 0 0 7px #fcd34d; }
.ct-eff-status--danger .ct-eff-status-dot { background: #f87171; box-shadow: 0 0 7px #f87171; }

/* ── Coagulation & Flocculation Efficiency Overview ── */
.coag-eff-section {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  margin-bottom: 20px;
}

.coag-eff-formula-pill {
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 6px;
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,.9);
  white-space: nowrap;
  flex-shrink: 0;
}

.coag-eff-formula-pill--sub {
  background: rgba(255,255,255,.08);
  font-size: 10px;
  color: rgba(255,255,255,.7);
}

.coag-eff-body {
  padding: 18px 20px 14px;
}

.coag-eff-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 12px;
}

.coag-eff-card {
  border: 1px solid var(--line);
  border-left: 3px solid var(--param-color, var(--line));
  border-radius: 8px;
  background: #fff;
  padding: 14px 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: box-shadow .18s;
}

.coag-eff-card:hover { box-shadow: 0 2px 10px rgba(0,0,0,.07); }

.coag-eff-card--no-sensor {
  opacity: .5;
  border-style: dashed;
  border-left-style: dashed;
}

.coag-eff-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.coag-eff-chip {
  width: 32px;
  height: 32px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: .04em;
  flex-shrink: 0;
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #e2e8f0;
}

.coag-eff-param-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  display: block;
  line-height: 1.2;
}

.coag-eff-param-unit {
  font-size: 10px;
  color: var(--muted);
  font-weight: 500;
}

.coag-eff-pct-badge {
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
  background: #f1f5f9;
  color: #64748b;
  border: 1px solid #e2e8f0;
  white-space: nowrap;
  flex-shrink: 0;
}

.coag-eff-badge--ok     { background: #f0fdf4; color: #166534; border-color: #bbf7d0; }
.coag-eff-badge--warn   { background: #fffbeb; color: #92400e; border-color: #fde68a; }
.coag-eff-badge--danger { background: #fff1f2; color: #9f1239; border-color: #fecdd3; }

.coag-eff-donut-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.coag-eff-donut {
  width: 78px;
  height: 78px;
  flex-shrink: 0;
}

.coag-eff-val-stack {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
}

.coag-eff-val-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11.5px;
  gap: 6px;
  padding: 5px 8px;
}

.coag-eff-val-row + .coag-eff-val-row {
  border-top: 1px solid var(--line);
}

.coag-eff-val-row--delta {
  background: #f8fafc;
}

.coag-eff-dir {
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 600;
  white-space: nowrap;
}

.coag-eff-num {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}

.coag-eff-val-row--inlet .coag-eff-dir::before { content: "▼ "; font-size: 8px; opacity: .5; }
.coag-eff-val-row--outlet .coag-eff-dir::before { content: "▲ "; font-size: 8px; opacity: .5; }
.coag-eff-val-row--delta .coag-eff-dir::before { content: "Δ "; font-size: 9px; color: var(--muted); }
.coag-eff-val-row--delta .coag-eff-num { color: var(--ink); }

.coag-eff-src-label {
  font-style: normal;
  font-size: 9px;
  background: #f1f5f9;
  color: #64748b;
  border-radius: 3px;
  padding: 0 3px;
  margin-left: 2px;
}

.coag-eff-sensor-val {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
}

.coag-eff-note {
  font-size: 10px;
  color: var(--muted);
  margin: 0;
  line-height: 1.4;
  border-top: 1px solid var(--line);
  padding-top: 8px;
}

.coag-eff-footer-note {
  font-size: 11px;
  color: var(--muted);
  margin: 0;
  text-align: center;
  border-top: 1px solid var(--line);
  padding-top: 10px;
  line-height: 1.6;
}

html[data-theme="dark"] .coag-eff-section { background: var(--panel); border-color: var(--line); }
html[data-theme="dark"] .coag-eff-card { background: rgba(255,255,255,.03); }
html[data-theme="dark"] .coag-eff-chip { background: rgba(255,255,255,.06); border-color: var(--line); color: var(--muted); }
html[data-theme="dark"] .coag-eff-pct-badge { background: rgba(255,255,255,.06); border-color: var(--line); }
html[data-theme="dark"] .coag-eff-val-stack { border-color: var(--line); }
html[data-theme="dark"] .coag-eff-val-row--delta { background: rgba(255,255,255,.03); }

/* ── Coagulation efficiency sensor config panel ── */
.coag-cfg-toggle-btn {
  background: rgba(255,255,255,.15);
  border: 1.5px solid rgba(255,255,255,.3);
  border-radius: 8px;
  color: rgba(255,255,255,.9);
  font-size: 11.5px;
  font-weight: 700;
  padding: 5px 12px;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: background .15s;
}
.coag-cfg-toggle-btn:hover { background: rgba(255,255,255,.25); }

.coag-cfg-active-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4ade80;
  display: inline-block;
  flex-shrink: 0;
}

.coag-cfg-panel {
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
  overflow: hidden;
}

.coag-cfg-panel-head {
  padding: 11px 16px 8px;
  border-bottom: 1px solid var(--line);
  background: #fff;
}

.coag-cfg-title {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
  display: block;
  margin-bottom: 2px;
}

.coag-cfg-hint {
  font-size: 11px;
  color: var(--muted);
  margin: 0;
}

.coag-cfg-grid {
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.coag-cfg-row {
  display: grid;
  grid-template-columns: 140px 1fr 1fr;
  align-items: center;
  gap: 10px;
}

.coag-cfg-param-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
}

.coag-cfg-tag-wrap {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.coag-cfg-side-label {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
}

.coag-cfg-input {
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 6px 10px;
  font-size: 12px;
  font-family: monospace;
  background: #fff;
  color: var(--ink);
  width: 100%;
  box-sizing: border-box;
  outline: none;
  transition: border-color .15s;
}
.coag-cfg-input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(11,79,122,.1); }

.coag-cfg-actions {
  padding: 10px 16px 12px;
  border-top: 1px solid rgba(0,168,200,.15);
  display: flex;
  align-items: center;
  gap: 10px;
}

.coag-cfg-status {
  font-size: 11.5px;
  font-weight: 600;
}

html[data-theme="dark"] .coag-cfg-panel { background: rgba(255,255,255,.04); border-color: var(--brand-2, #00a8c8); }
html[data-theme="dark"] .coag-cfg-input { background: rgba(255,255,255,.06); color: #e2e8f0; border-color: rgba(255,255,255,.15); }

/* KPI row — 3 equal columns */
.ct-eff-kpi-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid var(--line);
}

.ct-eff-kpi {
  padding: 18px 22px 14px;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ct-eff-kpi:last-child { border-right: none; }

.ct-eff-kpi-label {
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
}

.ct-eff-kpi-number {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin: 5px 0 3px;
}

.ct-eff-kpi-number strong {
  font-size: 34px;
  font-weight: 800;
  line-height: 1;
  color: var(--ink);
}

.ct-eff-kpi-number span {
  font-size: 15px;
  font-weight: 600;
  color: var(--muted);
}

.ct-eff-kpi-note {
  font-size: 11px;
  color: var(--muted);
}

/* Color-coded first KPI (ΔT) */
.ct-eff-kpi--ok    .ct-eff-kpi-number strong { color: #16a34a; }
.ct-eff-kpi--warn  .ct-eff-kpi-number strong { color: #b45309; }
.ct-eff-kpi--danger .ct-eff-kpi-number strong { color: #dc2626; }

/* Efficiency gauge */
.ct-eff-gauge {
  padding: 14px 22px 16px;
  border-bottom: 1px solid var(--line);
}

.ct-eff-gauge-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--muted);
  margin-bottom: 8px;
}

.ct-eff-bar-track {
  height: 10px;
  background: var(--line);
  border-radius: 99px;
  overflow: hidden;
}

.ct-eff-bar-fill {
  height: 100%;
  border-radius: 99px;
  min-width: 4px;
  transition: width .5s cubic-bezier(.4, 0, .2, 1);
}

.ct-eff-bar--ok     { background: linear-gradient(90deg, #16a34a, #4ade80); }
.ct-eff-bar--warn   { background: linear-gradient(90deg, #b45309, #fbbf24); }
.ct-eff-bar--danger { background: linear-gradient(90deg, #dc2626, #f87171); }

.ct-eff-bar-ticks {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
  font-size: 10px;
  color: var(--muted);
}

/* Breakdown table */
.ct-eff-table-head,
.ct-eff-table-row {
  display: grid;
  grid-template-columns: 80px 1fr 1fr 120px 100px;
  align-items: center;
  gap: 12px;
  padding: 13px 22px;
}

.ct-eff-table-head {
  background: rgba(0, 0, 0, .025);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding-top: 10px;
  padding-bottom: 10px;
}

.ct-eff-table-head span {
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
  color: var(--muted);
}

.ct-eff-table-row {
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  color: var(--ink);
  transition: background .15s;
}

.ct-eff-table-row:hover { background: rgba(0, 0, 0, .02); }
.ct-eff-table-row:last-child { border-bottom: none; }

.ct-eff-table-unit {
  font-size: 13px;
  font-weight: 800;
  color: var(--brand);
}

/* Suppress sensor-health coloring inside the CT efficiency table */
.ct-eff-table [data-sensor-tag],
.ct-eff-table [data-sensor-tag].sensor-health-neutral,
.ct-eff-table [data-sensor-tag].sensor-health-normal,
.ct-eff-table [data-sensor-tag].sensor-health-stale,
.ct-eff-table [data-sensor-tag].sensor-health-noise,
.ct-eff-table [data-sensor-tag].sensor-health-warning,
.ct-eff-table [data-sensor-tag].sensor-health-danger {
  background: none !important;
  border: none !important;
  color: inherit !important;
  box-shadow: none !important;
}

/* Nilai sensor — besar dan tebal */
.ct-eff-table [data-sensor-tag] em[data-db-value] {
  font-style: normal;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.01em;
}

/* ΔT — warna teks sesuai status, tanpa background */
.ct-eff-delta {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}

.ct-eff-delta--ok     { color: #16a34a; }
.ct-eff-delta--warn   { color: #b45309; }
.ct-eff-delta--danger { color: #dc2626; }

.ct-eff-q {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}

/* Empty / setup guidance state */
.ct-eff-empty {
  padding: 20px 22px 24px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.7;
}

.ct-eff-empty p { margin: 0 0 8px; }
.ct-eff-empty ul { margin: 4px 0 8px; padding-left: 18px; }
.ct-eff-empty li { margin-bottom: 4px; }
.ct-eff-empty code {
  background: rgba(0, 0, 0, .06);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 12px;
  font-family: monospace;
}

html[data-theme="dark"] .ct-eff-empty code {
  background: rgba(255, 255, 255, .1);
}

/* Footer formula note */
.ct-eff-footer {
  margin: 0;
  padding: 9px 22px;
  font-size: 11px;
  color: var(--muted);
  font-style: italic;
  background: rgba(0, 0, 0, .02);
  border-top: 1px solid var(--line);
}

/* Dark mode */
html[data-theme="dark"] .ct-efficiency-card {
  background: #1a2035;
  box-shadow: 0 2px 20px rgba(0, 0, 0, .35);
}

html[data-theme="dark"] .ct-eff-table-head,
html[data-theme="dark"] .ct-eff-footer {
  background: rgba(255, 255, 255, .03);
}

html[data-theme="dark"] .ct-eff-table-row:hover {
  background: rgba(255, 255, 255, .04);
}

html[data-theme="dark"] .ct-eff-bar-track {
  background: rgba(255, 255, 255, .1);
}

html[data-theme="dark"] .ct-eff-delta--ok     { background: rgba(22, 163, 74, .2);  color: #4ade80; }
html[data-theme="dark"] .ct-eff-delta--warn   { background: rgba(180, 83,  9, .2);  color: #fbbf24; }
html[data-theme="dark"] .ct-eff-delta--danger { background: rgba(220, 38, 38, .2);  color: #f87171; }

/* Responsive */
@media (max-width: 768px) {
  .ct-eff-kpi { padding: 14px 16px 11px; }
  .ct-eff-kpi-number strong { font-size: 26px; }
  .ct-eff-table-head,
  .ct-eff-table-row {
    grid-template-columns: 64px 1fr 1fr 100px 84px;
    padding: 11px 16px;
    font-size: 13px;
  }
}

@media (max-width: 520px) {
  .ct-eff-kpi-row { grid-template-columns: 1fr 1fr; }
  .ct-eff-kpi:last-child { display: none; }
  .ct-eff-table-head,
  .ct-eff-table-row { grid-template-columns: 54px 1fr 1fr 90px; padding: 10px 14px; }
  .ct-eff-table-head span:last-child,
  .ct-eff-table-row .ct-eff-q { display: none; }
}

.inlet-setpoint-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.setpoint-card {
  border: 1px solid var(--line);
  border-top: 4px solid var(--brand-2);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow);
  padding: 14px;
}

.setpoint-card span,
.station-values span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}

.setpoint-card strong {
  display: block;
  margin: 8px 0 7px;
  font-size: 22px;
}

.setpoint-card p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.cooling-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 170px minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
}

.multi-inlet-flow {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.eq-tank-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

@media (max-width: 680px) {
  .eq-tank-list { grid-template-columns: 1fr; }
}

.eq-tank-card {
  border: 1px solid var(--line);
  border-left: 4px solid var(--ok);
  border-radius: 12px;
  background: #fff;
  padding: 18px 18px 16px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .04);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.eq-tank-card.warn {
  border-left-color: var(--warn);
}

.eq-tank-card.ok {
  border-left-color: var(--ok);
}

.eq-tank-title {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.eq-tank-title .station-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
}

.eq-tank-title h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
}

.eq-tank-values {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 8px;
}

.eq-tank-values div {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg, #f8fafc);
  padding: 11px 13px 10px;
  transition: border-color .15s, box-shadow .15s;
}

.eq-tank-values span {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  margin-bottom: 5px;
}

.eq-tank-values strong {
  display: block;
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.15;
}

/* Health states: left-border accent only, no gradient backgrounds */
.eq-tank-values div.sensor-health-normal {
  border-left: 3px solid var(--ok) !important;
  background: rgba(16, 185, 129, .04) !important;
}
.eq-tank-values div.sensor-health-normal span  { color: var(--muted); }
.eq-tank-values div.sensor-health-normal strong { color: var(--ink); }

.eq-tank-values div.sensor-health-warning {
  border-left: 3px solid var(--warn) !important;
  background: rgba(245, 158, 11, .05) !important;
}
.eq-tank-values div.sensor-health-warning span  { color: var(--muted); }
.eq-tank-values div.sensor-health-warning strong { color: var(--ink); }

.eq-tank-values div.sensor-health-danger {
  border-left: 3px solid var(--danger) !important;
  background: rgba(244, 63, 94, .05) !important;
}
.eq-tank-values div.sensor-health-danger span  { color: var(--muted); }
.eq-tank-values div.sensor-health-danger strong { color: var(--ink); }

.eq-tank-values div.sensor-health-neutral {
  border-color: var(--line) !important;
  background: var(--bg, #f8fafc) !important;
}

.eq-tank-values div.sensor-health-stale {
  border-left: 3px solid #7dd3fc !important;
  background: rgba(125, 211, 252, .05) !important;
}
.eq-tank-values div.sensor-health-stale span  { color: var(--muted); }
.eq-tank-values div.sensor-health-stale strong { color: var(--ink); }

.process-overview-main {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
}

/* Pie card always positioned at the bottom spanning full row,
   giving the donut + breakdown room to breathe (applies to all pages:
   Inlet, Equalisasi, Chemical, Alarm, etc.) */
.process-overview-main > .process-pie-card {
  grid-column: 1 / -1;
  grid-template-columns: 380px minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  padding: 16px 20px;
}

.process-overview-main > .process-pie-card .pie-copy {
  grid-column: 1 / -1;
  margin-bottom: 4px;
}

.process-overview-main > .process-pie-card .pie-breakdown {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
  align-content: start;
  align-self: center;
}

.overview-total-card,
.process-pie-card {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, .96);
  box-shadow: var(--glow);
  padding: 14px;
}

.overview-total-card span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}

.overview-total-card strong {
  display: block;
  margin: 8px 0 6px;
  font-size: 28px;
}

.overview-total-card p {
  margin-bottom: 0;
  /*color: var(--muted);*/
  font-size: 13px;
  line-height: 1.45;
}


.process-pie-card {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 20px;
  align-items: center;
  padding: 18px;
}

/* Pie carousel — used to host multiple pies under one card (e.g. Inlet + Outlet) */
.pie-carousel-card {
  display: block;
  padding: 0;
}

.pie-carousel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(135deg, rgba(0, 168, 200, .04), rgba(255, 255, 255, .9));
}

.pie-carousel-tabs {
  display: inline-flex;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  padding: 3px;
}

.pie-carousel-tab {
  min-height: 32px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  padding: 0 14px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: all .15s;
}

.pie-carousel-tab:hover {
  color: var(--brand);
}

.pie-carousel-tab.active {
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff;
  box-shadow: 0 4px 10px rgba(0, 119, 255, .2);
}

.pie-carousel-nav {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.pie-carousel-nav button {
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--brand);
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  transition: background .15s, transform .15s;
}

.pie-carousel-nav button:hover {
  background: rgba(0, 168, 200, .1);
  transform: scale(1.08);
}

.pie-carousel-counter {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  padding: 0 4px;
}

.pie-carousel-counter strong {
  color: var(--brand);
}

.pie-carousel-track {
  position: relative;
  padding: 18px;
}

.pie-carousel-slide {
  display: none;
  animation: pieSlideFade .25s ease-out;
}

.pie-carousel-slide.active {
  display: block;
}

@keyframes pieSlideFade {
  from { opacity: 0; transform: translateX(8px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Inside the carousel, keep the existing process-pie-card grid behavior */
.pie-carousel-slide > .process-pie-card {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 20px;
  align-items: center;
}

/* When the whole carousel card sits in the process-overview-main full-width row,
   force inner pie to span the same wider layout */
.process-overview-main > .pie-carousel-card .pie-carousel-slide > .process-pie-card {
  grid-template-columns: 260px minmax(0, 1fr);
}

.process-overview-main > .pie-carousel-card .pie-carousel-slide .pie-copy {
  grid-column: 1 / -1;
}

.process-overview-main > .pie-carousel-card .pie-carousel-slide .pie-breakdown {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
  align-content: start;
}

/* Dark mode */
html[data-theme="dark"] .pie-carousel-head {
  background: linear-gradient(135deg, rgba(52, 200, 232, .08), rgba(22, 34, 50, .7));
  border-bottom-color: var(--line);
}

html[data-theme="dark"] .pie-carousel-tabs {
  background: rgba(255, 255, 255, .04);
  border-color: var(--line);
}

html[data-theme="dark"] .pie-carousel-tab {
  color: var(--muted);
}

html[data-theme="dark"] .pie-carousel-tab:hover {
  color: var(--brand-2);
}

html[data-theme="dark"] .pie-carousel-tab.active {
  color: #0d1520;
}

html[data-theme="dark"] .pie-carousel-nav button {
  background: rgba(255, 255, 255, .04);
  color: var(--brand-2);
  border-color: var(--line);
}

html[data-theme="dark"] .pie-carousel-nav button:hover {
  background: rgba(52, 200, 232, .12);
}

@media (max-width: 720px) {
  .pie-carousel-head {
    flex-direction: column;
    align-items: stretch;
  }

  .pie-carousel-tabs {
    width: 100%;
    justify-content: space-between;
  }

  .pie-carousel-tab {
    flex: 1 1 auto;
  }
}

.overview-process-summary {
  grid-template-columns: 240px minmax(0, 1fr);
}

.overview-process-summary .pie-copy {
  grid-column: 1 / -1;
}

.overview-process-summary .pie-breakdown {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  align-content: start;
}

.overview-process-summary .pie-breakdown div {
  grid-template-columns: 12px minmax(0, 1fr) auto auto;
}

.process-summary-donut {
  border: 1px solid rgba(191, 209, 223, .75);
  box-shadow: inset 0 0 0 16px rgba(255, 255, 255, .55), 0 14px 32px rgba(28, 66, 92, .1);
  background:
    radial-gradient(circle, #ffffff 0 51%, rgba(255, 255, 255, .94) 52%, transparent 53%),
    var(--donut-gradient, conic-gradient(rgba(148,163,184,.25) 0% 100%));
}

.overview-process-summary {
  background: linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(246, 252, 255, .96));
}

.pie-copy {
  grid-column: 1 / -1;
  margin-bottom: -2px;
}

.pie-copy span {
  display: inline;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.pie-copy strong {
  margin-right: 8px;
  font-size: 13px;
}

.mini-donut {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 280px;
  height: 280px;
  border-radius: 999px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(191, 209, 223, .75);
  box-shadow: inset 0 0 0 16px rgba(255, 255, 255, .45), 0 14px 32px rgba(28, 66, 92, .1);
}

.inlet-donut {
  background:
    radial-gradient(circle, #fff 0 48%, rgba(255,255,255,.96) 49%, transparent 50%),
    conic-gradient(#0E7C86 0 26%, #2F80ED 26% 50%, #12A076 50% 77%, #F2B84B 77% 100%);
}

.eq-donut {
  background:
    radial-gradient(circle, #fff 0 48%, rgba(255,255,255,.96) 49%, transparent 50%),
    conic-gradient(#0E7C86 0 31%, #2F80ED 31% 54%, #12A076 54% 72%, #F2B84B 72% 100%);
}

.compliance-donut {
  background:
    radial-gradient(circle, #fff 0 48%, rgba(255,255,255,.96) 49%, transparent 50%),
    conic-gradient(#12A076 0 96%, #F2B84B 96% 99%, #EF6A4D 99% 100%);
}

.chemical-donut {
  background:
    radial-gradient(circle, #fff 0 48%, rgba(255,255,255,.96) 49%, transparent 50%),
    conic-gradient(#0E7C86 0 23%, #F2B84B 23% 31%, #12A076 31% 97%, #8B5CF6 97% 100%);
}

.mini-donut small {
  position: relative;
  z-index: 1;
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-align: center;
  letter-spacing: .02em;
  line-height: 1;
}

.mini-donut strong {
  position: relative;
  z-index: 1;
  display: block;
  max-width: 84%;
  text-align: center;
  overflow: visible;
  white-space: nowrap;
  text-overflow: clip;
  line-height: 1;
  font-size: clamp(20px, 2.2vw, 32px);
  font-weight: 900;
  letter-spacing: -1px;
  color: var(--ink);
}

.mini-donut span {
  position: relative;
  z-index: 1;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  max-width: 76%;
  line-height: 1.3;
  white-space: normal;
  overflow-wrap: break-word;
}

.pie-breakdown {
  display: grid;
  gap: 8px;
}

.pie-breakdown div {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) minmax(70px, .65fr) minmax(40px, auto);
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 10px 12px;
}

.pie-breakdown i {
  width: 12px;
  height: 12px;
  border-radius: 999px;
}

/* Sensor type sub-label in pie row */
.pie-row-type {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  margin-left: 4px;
  opacity: .75;
}

.pie-breakdown span,
.pie-breakdown small {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 14px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pie-breakdown strong,
.energy-process-breakdown strong,
.cost-breakdown strong {
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 15px;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pie-breakdown small,
.energy-process-breakdown small,
.cost-breakdown small {
  min-width: 0;
  overflow: hidden;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.compliance-overview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.compliance-summary-card,
.compliance-pie-card,
.compliance-parameter-card {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, .96);
  box-shadow: var(--glow);
  padding: 14px;
}

.compliance-summary-card span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}

.compliance-summary-card strong {
  display: block;
  margin: 8px 0 6px;
  font-size: 28px;
}

.compliance-summary-card p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.compliance-pie-card {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 24px;
  align-items: center;
  padding: 20px;
}

.compliance-pie-card .pie-copy {
  grid-column: 1 / -1;
}

.compliance-pie-card .pie-breakdown {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
  align-content: start;
}

.compliance-parameter-card {
  grid-column: 1 / -1;
}

.compliance-parameter-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.compliance-parameter-grid div {
  display: grid;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdff;
  padding: 11px;
}

.compliance-parameter-grid span,
.compliance-parameter-grid small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.compliance-parameter-grid strong {
  font-size: 22px;
}

.inlet-line-card {
  border: 1px solid var(--line);
  border-top: 4px solid var(--ok);
  border-radius: 10px;
  background: #fff;
  padding: 16px;
}

.inlet-line-card.warn {
  border-top-color: var(--warn);
}

.inlet-line-title,
.inlet-line-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.inlet-line-title h3 {
  font-size: 20px;
}

.inlet-line-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 210px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  margin: 16px 0;
}

.line-point {
  display: grid;
  grid-template-columns: minmax(180px, 1.25fr) minmax(145px, .9fr) minmax(155px, .95fr);
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdff;
  padding: 14px;
}

.line-point .station-icon {
  grid-column: 1;
  grid-row: 1;
}

.line-point span,
.line-point .inline-master-sensor,
.inlet-line-meta span {
  color: var(--muted);
  font-size: 15px;
  font-weight: 800;
}

.line-point strong {
  grid-column: 2 / 4;
  grid-row: 1;
  font-size: 19px;
}

.line-point span,
.line-point .inline-master-sensor {
  display: grid;
  min-height: 62px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font-size: 18px;
  font-weight: 900;
  text-align: center;
  padding: 8px;
  white-space: nowrap;
}

.line-point span small,
.line-point .inline-master-sensor small,
.line-point .inline-master-sensor span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.line-point .inline-master-sensor > span {
  min-height: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.15;
  order: 1;
  box-shadow: none;
}

.line-point .inline-master-sensor > strong {
  order: 2;
}

.line-point span em,
.inlet-line-meta span em {
  font-style: normal;
}

.line-point .inline-master-sensor strong {
  grid-column: auto;
  grid-row: auto;
  font-size: 18px;
}

.inlet-line-meta {
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.inlet-line-meta span {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #f7fbff;
  color: var(--brand);
  padding: 8px 12px;
}

.line-arrow {
  display: grid;
  place-items: center;
  min-height: 72px;
  position: relative;
}

.line-arrow::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  background: var(--line-strong);
}

.line-arrow::after {
  content: "";
  position: absolute;
  right: 0;
  top: calc(50% - 5px);
  width: 10px;
  height: 10px;
  border-top: 2px solid var(--line-strong);
  border-right: 2px solid var(--line-strong);
  transform: rotate(45deg);
}

.line-arrow span {
  z-index: 1;
  border: 1px solid rgba(0, 168, 200, .25);
  border-radius: 999px;
  background: #fff;
  color: var(--brand);
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 900;
  text-align: center;
}

.monitoring-flow-map {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.monitoring-connector {
  display: grid;
  place-items: center;
  min-height: 42px;
  margin-top: 12px;
  border: 1px dashed var(--line-strong);
  border-radius: 8px;
  background: #f7fbff;
  color: var(--brand);
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
}

.control-panel {
  border: 1px solid var(--line);
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(247, 252, 255, .95)),
    radial-gradient(circle at 100% 0%, rgba(0, 168, 200, .12), transparent 260px);
  box-shadow: var(--glow);
  padding: 16px;
}

.control-panel.auto-active {
  border-color: rgba(0, 119, 255, .22);
}

.control-panel.manual-active {
  border-color: rgba(214, 138, 0, .38);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(255, 250, 238, .96)),
    radial-gradient(circle at 100% 0%, rgba(214, 138, 0, .14), transparent 260px);
}

.control-panel > .panel-head {
  align-items: center;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%);
  border-radius: 8px 8px 0 0;
  padding: 14px 16px;
  margin: -16px -16px 14px;
}

.control-panel > .panel-head .eyebrow {
  color: rgba(255, 255, 255, .75);
}

.control-panel > .panel-head h2 {
  color: #fff;
}

.control-panel > .panel-head [data-control-status] {
  color: rgba(255, 255, 255, .65);
}

.panel-head-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.control-panel-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 8px;
  background: rgba(255, 255, 255, .12);
  color: rgba(255, 255, 255, .85);
  cursor: pointer;
  transition: background .15s, color .15s, transform .15s;
}

.control-panel-toggle:hover {
  background: rgba(255, 255, 255, .25);
  color: #fff;
  border-color: rgba(255, 255, 255, .45);
}

.control-panel-toggle svg {
  transition: transform .25s ease;
}

.control-panel.collapsed .control-panel-toggle svg {
  transform: rotate(-90deg);
}

.control-panel-body {
  overflow: hidden;
  margin-top: 4px;
}

.control-panel.collapsed .control-panel-body {
  display: none;
}

.control-panel.collapsed .panel-head {
  margin-bottom: 0;
}

.control-active-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  margin: 12px 0;
  border: 1px solid rgba(0, 119, 255, .18);
  border-radius: 10px;
  background: #f3f9ff;
  color: var(--brand);
  padding: 10px 12px;
}

.control-active-strip.manual {
  border-color: rgba(214, 138, 0, .32);
  background: #fff7e7;
  color: #9a5a00;
}

.control-active-strip strong {
  font-size: 13px;
  font-weight: 950;
  text-transform: uppercase;
}

.control-active-strip small {
  margin-left: auto;
  border-radius: 999px;
  background: rgba(255, 255, 255, .74);
  padding: 6px 10px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
}

.mode-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--info);
  box-shadow: 0 0 0 6px rgba(0, 119, 255, .12);
}

.control-active-strip.manual .mode-dot {
  background: var(--warn);
  box-shadow: 0 0 0 6px rgba(214, 138, 0, .15);
}

.equipment-page {
  display: grid;
  gap: 16px;
}

.equipment-overview-head,
.equipment-process-card,
.equipment-detail-view,
.equipment-trend-card,
.equipment-history-table {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, .96);
  box-shadow: var(--glow);
}

.equipment-overview-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 18px;
}

.equipment-overview-head h2 {
  margin-bottom: 8px;
  font-size: 26px;
}

.equipment-overview-head p {
  margin-bottom: 0;
  color: var(--muted);
}

.equipment-process-list {
  display: grid;
  gap: 14px;
}

.equipment-process-card {
  padding: 14px;
}

.equipment-process-title {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.equipment-process-title span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}

.motor-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

/* ── Motor / Equipment Card ── */
.motor-card {
  position: relative;
  display: grid;
  gap: 0;
  border: 1px solid #b9dbea;
  border-radius: 16px;
  background: #fbfdff;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(8, 74, 110, .08), 0 10px 28px rgba(0, 119, 255, .07);
  transition: border-color .18s, background .18s, box-shadow .18s, transform .15s;
}

.motor-card:hover {
  box-shadow: 0 4px 20px rgba(11, 79, 122, .12), 0 1px 4px rgba(15, 23, 42, .08);
  transform: translateY(-1px);
}

.motor-card.active {
  border-color: #008db8;
  background: linear-gradient(180deg, #eafaff 0%, #f9feff 58%);
  box-shadow: 0 0 0 3px rgba(0, 141, 184, .25), 0 16px 36px rgba(0, 105, 145, .20);
}

.motor-card.active::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, #005d88 0%, #00aac0 100%);
  z-index: 1;
}

.motor-card:not(.active) {
  border-color: #d6e7f0;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  box-shadow: 0 2px 8px rgba(8, 74, 110, .05), 0 8px 18px rgba(0, 119, 255, .04);
}

.motor-card.active .motor-card-top {
  background: linear-gradient(135deg, #dff7ff 0%, #c6eff8 100%);
  border-bottom-color: #9fd5e7;
}
.motor-card.active .motor-card-identity h4 { color: var(--brand); }

.motor-card.active .motor-type-icon {
  background: linear-gradient(145deg, #003d63 0%, #007e9e 55%, #00b8c8 100%);
  box-shadow: 0 12px 26px rgba(0, 95, 130, .34);
}

.motor-card:not(.active) .motor-card-top {
  background: linear-gradient(135deg, #ffffff 0%, #f4fbfe 100%);
}

/* Top header */
.motor-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 14px 12px;
  border-bottom: 1px solid #cfe5f1;
  background: linear-gradient(135deg, #f9fdff 0%, #e6f6fb 100%);
}

.motor-card-identity {
  display: flex;
  align-items: center;
  gap: 10px;
}

.motor-type-icon {
  display: none;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(145deg, #004b72 0%, #007ea2 58%, #00a9bd 100%);
  color: #ffffff;
  flex-shrink: 0;
  box-shadow: 0 10px 22px rgba(0, 95, 130, .26);
}

.motor-type-icon svg {
  width: 30px;
  height: 30px;
  color: #ffffff !important;
  stroke-width: 2.9;
  filter: drop-shadow(0 1px 0 rgba(0, 37, 55, .28));
}

.motor-type-icon svg * {
  vector-effect: non-scaling-stroke;
  stroke: #ffffff !important;
}

.motor-type-icon svg [fill="currentColor"] {
  fill: #ffffff !important;
  stroke: none !important;
}

.motor-type-icon svg [data-pump-fill] {
  fill: #ffffff !important;
  stroke: none !important;
}

.motor-type-icon svg path[data-pump-fill] {
  stroke: #ffffff !important;
}

.motor-type-icon svg [data-pump-cutout] {
  fill: #055f7d !important;
  stroke: #055f7d !important;
}

.motor-type-label {
  display: block;
  font-size: 10px;
  font-weight: 600;
  color: #6f8193;
  text-transform: uppercase;
  letter-spacing: .08em;
  line-height: 1;
  margin-bottom: 4px;
}

.motor-card h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 650;
  line-height: 1.25;
  color: #063b58;
}

/* Status + runtime badges */
.motor-card-status {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}

.motor-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 800;
  padding: 5px 11px;
  border-radius: 20px;
  background: #d6fbe8;
  border: 1px solid #68dca3;
  color: #047857;
  white-space: nowrap;
  letter-spacing: .02em;
}

.motor-status-badge strong { font-size: inherit; font-weight: 700; }

.motor-runtime-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: #53677d;
}

.motor-runtime-label svg { width: 12px; height: 12px; opacity: .75; }
.motor-runtime-label strong { font-weight: 800; color: #063b58; }

/* Metrics row */
.motor-mini-values {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-bottom: 1px solid #d7e8f1;
  background: #f6fbfd;
}

.motor-card.active .motor-mini-values {
  background: #eaf9fd;
}

.motor-mini-values div {
  padding: 12px 12px 11px;
  border-right: 1px solid #dcebf2;
  border-bottom: 1px solid #dcebf2;
  background: rgba(255, 255, 255, .72);
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.motor-mini-values div:nth-child(4n),
.motor-mini-values div:last-child { border-right: none; }

.motor-metric-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  font-style: normal;
  flex-shrink: 0;
}

.motor-metric-icon svg {
  width: 15px;
  height: 15px;
  stroke-width: 2.4;
}

[data-metric="ampere"] .motor-metric-icon,
[data-metric="voltage"] .motor-metric-icon,
[data-metric="runtime"] .motor-metric-icon {
  background: #e7f2f8;
  border: 1px solid #c7dcea;
  color: #073b5d;
}

.motor-metric-icon svg {
  color: #073b5d;
  stroke: #073b5d;
}

.motor-mini-values span {
  font-size: 10px;
  font-weight: 600;
  color: #718398;
  text-transform: uppercase;
  letter-spacing: .08em;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.motor-mini-values strong {
  font-size: 18px;
  font-weight: 600;
  color: #004f7a;
  line-height: 1.1;
}

.motor-mini-values div.sensor-health-normal { background: linear-gradient(180deg, #ecfff8 0%, #ddf8ef 100%); }
.motor-mini-values div.sensor-health-normal strong { color: #007a55; }
.motor-mini-values div.sensor-health-warning { background: linear-gradient(180deg, #fff8e8 0%, #ffefd0 100%); }
.motor-mini-values div.sensor-health-warning strong { color: #9a5a00; }
.motor-mini-values div.sensor-health-danger { background: linear-gradient(180deg, #fff0f0 0%, #ffe1e1 100%); }
.motor-mini-values div.sensor-health-danger strong { color: #b51f26; }

.motor-maintenance-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  padding: 10px 12px 0;
  border-bottom: 1px solid #d7e8f1;
  background: linear-gradient(180deg, #f7fcfe 0%, #eff8fb 100%);
}

.motor-maintenance-item {
  min-width: 0;
  padding: 0 10px 10px 0;
  display: grid;
  gap: 3px;
}

.motor-maintenance-item + .motor-maintenance-item {
  padding-left: 10px;
  border-left: 1px solid #dcebf2;
}

.motor-maintenance-label {
  color: #72869a;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.motor-maintenance-value {
  color: #063b58;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.motor-maintenance-note {
  color: #6f8296;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.motor-maintenance-progress {
  height: 5px;
  margin-top: 3px;
  border-radius: 999px;
  overflow: hidden;
  background: #dcebf2;
}

.motor-maintenance-progress i {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #10b981 0%, #14b8a6 100%);
  transition: width .25s ease;
}

.motor-maintenance-summary[data-maintenance-runtime-state="soon"] .motor-maintenance-progress i {
  background: linear-gradient(90deg, #f59e0b 0%, #f97316 100%);
}

.motor-maintenance-summary[data-maintenance-runtime-state="due"] .motor-maintenance-progress i {
  background: linear-gradient(90deg, #ef4444 0%, #dc2626 100%);
}

.motor-maintenance-item.is-late .motor-maintenance-value { color: #b91c1c; }
.motor-maintenance-item.is-planned .motor-maintenance-value { color: #006088; }
.motor-maintenance-item.is-empty .motor-maintenance-value { color: #6f8296; }

/* Footer / detail button */
.motor-card-footer {
  padding: 10px 12px 12px;
}

.motor-detail-button {
  display: block;
  width: 100%;
  padding: 11px 16px;
  border: 1px solid #9fd5e7;
  border-radius: 10px;
  background: #f5fbff;
  color: #00577f;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .01em;
  cursor: pointer;
  box-shadow: none;
  transition: background .16s, color .16s, border-color .16s, filter .16s, transform .12s, box-shadow .16s;
}

.motor-card:not(.active) .motor-detail-button {
  background: #ffffff;
  border-color: #aacfe0;
  color: #006088;
}

.motor-card.active .motor-detail-button {
  border-color: transparent;
  background: linear-gradient(135deg, #00577f 0%, #008fb0 55%, #00b4c8 100%);
  color: #ffffff;
  box-shadow: 0 10px 22px rgba(0, 116, 150, .28);
}

.motor-card.active .motor-detail-button::after {
  content: " - Aktif";
  font-size: 11px;
  opacity: .9;
}

.motor-detail-button:hover {
  background: #e7f7fd;
  border-color: #55bdd5;
  transform: translateY(-1px);
}

.motor-card.active .motor-detail-button:hover {
  filter: brightness(1.04);
  box-shadow: 0 12px 26px rgba(0, 116, 150, .34);
}
.motor-detail-button:active { filter: none; transform: none; }

.motor-card p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

/* Preserve .motor-mini-values span scope from conflicting with non-motor spans */
.motor-card-top span:not(.motor-type-label):not(.motor-status-badge):not(.motor-runtime-label),
.equipment-detail-grid span,
.maintenance-life-card span {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04px;
}

.equipment-detail-view {
  padding: 18px;
}

.equipment-detail-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.equipment-detail-grid article {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  padding: 14px 14px 12px;
  position: relative;
  overflow: hidden;
}

.metric-source {
  display: inline-flex !important;
  width: max-content;
  margin-top: 6px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 9px !important;
  font-weight: 800 !important;
  line-height: 1.1;
  letter-spacing: 0 !important;
  text-transform: uppercase;
}

.metric-source--realtime {
  color: #0369a1 !important;
  background: #e0f2fe;
  border: 1px solid #bae6fd;
}

.metric-source--history {
  color: #047857 !important;
  background: #dcfce7;
  border: 1px solid #bbf7d0;
}

.equipment-history-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  margin: 4px 0 10px;
}

.equipment-history-head h3 {
  margin: 2px 0 0;
  color: #172033;
  font-size: 16px;
}

.equipment-history-head > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.equipment-peak-grid {
  margin-bottom: 14px;
}

.equipment-peak-grid article {
  background: linear-gradient(180deg, #ffffff 0%, #f2fff8 100%);
  border-color: #b7ead0;
}

.equipment-history-metric::after {
  background: #10b981 !important;
}

.equipment-realtime-metric::after {
  background: #0ea5e9 !important;
}

.equipment-detail-grid article::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  border-radius: 0 0 10px 10px;
  background: var(--line);
}
.equipment-detail-grid article:nth-child(1)::after { background: var(--info); }
.equipment-detail-grid article:nth-child(2)::after { background: #f59e0b; }
.equipment-detail-grid article:nth-child(3)::after { background: var(--purple); }
.equipment-detail-grid article:nth-child(4)::after { background: var(--ok); }

.equipment-detail-grid strong {
  display: block;
  margin-top: 7px;
  font-size: 20px;
  font-weight: 800;
  color: #1a2535;
  line-height: 1.1;
}

.maintenance-life-card {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 12px;
  margin-bottom: 14px;
}

.maintenance-life-card > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.maintenance-life-card strong {
  font-size: 24px;
}

.maintenance-bar {
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: #e8f1f6;
}

.maintenance-bar i {
  display: block;
  width: var(--value);
  height: 100%;
  border-radius: inherit;
  background: var(--color);
}

.equipment-history-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.equipment-history-layout > * {
  min-width: 0;
}

.equipment-history-layout .trend-realtime-control {
  margin: 0;
}

.equipment-trend-card,
.equipment-history-table {
  padding: 14px;
}

.equipment-trend-filter {
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
}

.period-control.compact {
  justify-content: flex-start;
}

.period-control.compact button,
.period-control.compact input {
  min-height: 32px;
  font-size: 12px;
}

.equipment-trend {
  width: 100%;
  height: 260px;
  overflow: visible;
}

.equipment-history-table .table-wrap {
  margin-top: 12px;
}

.equipment-history-table table {
  min-width: 760px;
}

.energy-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.energy-summary-grid article,
.energy-pie-panel,
.energy-equipment-panel {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, .96);
  box-shadow: var(--glow);
  padding: 14px;
}

.energy-summary-grid span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}

.energy-summary-grid strong {
  display: block;
  margin: 8px 0 6px;
  font-size: 25px;
}

.energy-summary-grid p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 13px;
}

.energy-pie-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
}

.energy-donut {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 220px;
  height: 220px;
  border-radius: 999px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(191, 209, 223, .75);
  box-shadow: inset 0 0 0 16px rgba(255, 255, 255, .45), 0 14px 34px rgba(28, 66, 92, .08);
  background:
    radial-gradient(circle, #fff 0 51%, rgba(255,255,255,.94) 52%, transparent 53%),
    conic-gradient(#0E7C86 0 20%, #2F80ED 20% 51%, #12A076 51% 66%, #F2B84B 66% 81%, #8B5CF6 81% 100%);
}

.energy-donut strong {
  position: relative;
  z-index: 1;
  display: block;
  max-width: 66%;
  overflow: hidden;
  text-align: center;
  overflow-wrap: anywhere;
  white-space: normal;
  line-height: 1.05;
  font-size: clamp(19px, 1.9vw, 28px);
}

.energy-donut span {
  position: relative;
  z-index: 1;
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.energy-process-breakdown {
  display: grid;
  gap: 10px;
}

.energy-process-breakdown div {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) minmax(64px, .65fr) minmax(38px, auto);
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 10px;
}

.energy-process-breakdown i {
  width: 12px;
  height: 12px;
  border-radius: 999px;
}

.energy-process-breakdown span,
.energy-process-breakdown small {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.energy-motor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.energy-process-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 12px;
}

.energy-motor-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  border-top: 1px solid var(--line);
  padding: 9px 0;
}

.energy-motor-row span,
.energy-motor-row small {
  color: var(--muted);
  font-size: 12px;
}

.energy-page {
  display: grid;
  gap: 16px;
}

.energy-hero-panel {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 18px;
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(8, 145, 178, .28);
  border-radius: 18px;
  background:
    radial-gradient(circle at 92% -20%, rgba(103, 232, 249, .38), transparent 260px),
    linear-gradient(135deg, #0b4f7a 0%, #08799a 55%, #05a9bf 100%);
  box-shadow: 0 18px 42px rgba(6, 95, 130, .18);
  padding: 24px 26px;
  color: #fff;
}

.energy-hero-panel .eyebrow,
.energy-hero-panel h2,
.energy-hero-panel p {
  color: #fff;
}

.energy-hero-panel h2 {
  margin: 4px 0 8px;
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 800;
  letter-spacing: -.04em;
}

.energy-hero-panel p {
  max-width: 760px;
  margin: 0;
  color: rgba(255, 255, 255, .82);
  font-weight: 500;
}

.energy-hero-status {
  display: grid;
  align-content: center;
  min-width: 260px;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 16px;
  background: rgba(255, 255, 255, .14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2);
  padding: 16px;
  text-align: right;
}

.energy-hero-status span {
  color: #d9fbff;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.energy-hero-status strong {
  margin-top: 6px;
  color: #fff;
  font-size: 22px;
  font-weight: 750;
}

.energy-control-panel,
.energy-insight-card,
.energy-process-panel,
.energy-page .energy-equipment-panel {
  border: 1px solid rgba(188, 218, 234, .86);
  border-radius: 16px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 10px 28px rgba(15, 50, 70, .06);
  padding: 16px;
}

.energy-control-grid {
  display: grid;
  grid-template-columns: minmax(280px, 1.5fr) repeat(4, minmax(150px, .7fr)) minmax(150px, .55fr);
  gap: 12px;
  align-items: end;
}

.energy-range-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.energy-period-control {
  justify-content: flex-start;
  align-items: center;
}

.energy-period-control button {
  min-width: 88px;
  font-weight: 750;
}

.energy-period-control input[type="date"] {
  min-width: 148px;
  font-weight: 800;
}

.energy-range-separator {
  color: var(--muted);
  font-size: 14px;
  font-weight: 900;
}

.energy-tariff-inline {
  display: flex;
  align-items: end;
  gap: 8px;
  flex-wrap: wrap;
  margin-left: auto;
}

.energy-tariff-inline label {
  display: grid;
  gap: 4px;
  margin: 0;
}

.energy-tariff-inline label > span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.energy-tariff-inline input {
  width: 124px;
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  color: var(--ink);
  padding: 0 10px;
  font-weight: 750;
}

.energy-tariff-inline .primary-button {
  min-height: 36px;
  padding: 0 14px;
  border-radius: 7px;
  white-space: nowrap;
}

.energy-control-grid label {
  display: grid;
  gap: 7px;
  margin: 0;
}

.energy-control-grid label > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.energy-control-grid input {
  width: 100%;
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  padding: 10px 12px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 500;
}

.energy-control-panel > p {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}

@media (max-width: 980px) {
  .energy-range-row,
  .energy-tariff-inline {
    align-items: stretch;
  }

  .energy-tariff-inline {
    margin-left: 0;
    width: 100%;
  }

  .energy-tariff-inline label {
    flex: 1 1 160px;
  }

  .energy-tariff-inline input {
    width: 100%;
  }
}

.energy-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.energy-kpi-grid article {
  position: relative;
  overflow: hidden;
  min-height: 136px;
  border: 1px solid rgba(188, 218, 234, .86);
  border-radius: 16px;
  background:
    radial-gradient(circle at 92% 0%, rgba(14, 165, 233, .14), transparent 125px),
    linear-gradient(180deg, #fff, #f8fbff);
  box-shadow: 0 10px 28px rgba(15, 50, 70, .055);
  padding: 16px;
}

.energy-kpi-grid article::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, #0284c7, #22d3ee);
}

.energy-kpi-grid span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.energy-kpi-grid strong {
  display: block;
  margin: 12px 0 8px;
  color: #0f172a;
  font-size: clamp(22px, 2vw, 32px);
  font-weight: 750;
  line-height: 1;
}

.energy-kpi-grid p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}

.energy-report-grid {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 16px;
}

.energy-table-grid {
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
}

.energy-ranking-list,
.energy-cost-split {
  display: grid;
  gap: 10px;
}

.energy-pie-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
}

.energy-pie-filter button {
  border: 1px solid #d9e8f1;
  border-radius: 999px;
  background: #fff;
  color: #075985;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 600;
}

.energy-pie-filter button.active {
  border-color: #0891b2;
  background: linear-gradient(135deg, #075985, #0891b2);
  color: #fff;
  box-shadow: 0 8px 18px rgba(8, 145, 178, .18);
}

.energy-pie-card {
  margin-bottom: 12px;
}

.energy-pie-visual {
  display: grid;
  grid-template-columns: 178px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  border: 1px solid rgba(211, 226, 237, .9);
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff, #f8fbff);
  padding: 14px;
}

.energy-pie-donut {
  display: grid;
  place-items: center;
  align-content: center;
  width: 178px;
  height: 178px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(148, 163, 184, .25), 0 12px 26px rgba(15, 50, 70, .08);
  text-align: center;
}

.energy-pie-donut strong {
  max-width: 118px;
  color: #0f172a;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.05;
}

.energy-pie-donut span {
  margin-top: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
}

.energy-pie-legend {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.energy-pie-legend h3 {
  margin: 0 0 2px;
  color: #0f172a;
  font-size: 15px;
  font-weight: 700;
}

.energy-pie-legend div {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-width: 0;
}

.energy-pie-legend i {
  width: 10px;
  height: 10px;
  border-radius: 999px;
}

.energy-pie-legend span {
  overflow: hidden;
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.energy-pie-legend em {
  color: #075985;
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  white-space: nowrap;
}

.energy-pie-legend small {
  grid-column: 2 / -1;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.energy-pie-empty {
  display: grid;
  gap: 4px;
  border: 1px dashed #cbd5e1;
  border-radius: 14px;
  background: #f8fafc;
  padding: 18px;
}

.energy-pie-empty strong {
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
}

.energy-pie-empty span {
  color: var(--muted);
  font-size: 12px;
}

.energy-rank-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 14px;
  align-items: center;
  border: 1px solid rgba(211, 226, 237, .9);
  border-radius: 13px;
  background: #fff;
  padding: 12px;
}

.energy-rank-row strong,
.energy-rank-row span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.energy-rank-row strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
}

.energy-rank-row span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}

.energy-rank-row em {
  color: #075985;
  font-style: normal;
  font-size: 13px;
  font-weight: 700;
}

.energy-rank-row i,
.energy-cost-bars i {
  grid-column: 1 / -1;
  display: block;
  overflow: hidden;
  height: 8px;
  border-radius: 999px;
  background: #e8f3f8;
}

.energy-rank-row b,
.energy-cost-bars b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #0284c7, #22d3ee);
}

.energy-cost-bars {
  display: grid;
  gap: 12px;
}

.energy-cost-bars div {
  display: grid;
  gap: 6px;
  border: 1px solid rgba(211, 226, 237, .9);
  border-radius: 14px;
  background: #fff;
  padding: 14px;
}

.energy-cost-bars span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.energy-cost-bars strong {
  color: #0f172a;
  font-size: 24px;
  font-weight: 750;
}

.energy-cost-bars em {
  color: #075985;
  font-style: normal;
  font-weight: 650;
}

.energy-cost-bars .wbp b {
  background: linear-gradient(90deg, #f59e0b, #ef4444);
}

.energy-cost-split > p,
.energy-empty-note {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}

.energy-table-wrap table {
  min-width: 880px;
}

.energy-table-wrap th.r,
.energy-table-wrap td.r {
  text-align: right;
}

.energy-table-wrap td small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
}

.energy-table-wrap code {
  border: 1px solid #dbeafe;
  border-radius: 7px;
  background: #eff6ff;
  color: #075985;
  padding: 3px 6px;
  font-size: 11px;
  font-weight: 650;
}

.energy-page.is-loading .energy-hero-status span::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 999px;
  background: #facc15;
  box-shadow: 0 0 0 0 rgba(250, 204, 21, .55);
  animation: energyPulse 1s infinite;
}

@keyframes energyPulse {
  70% { box-shadow: 0 0 0 8px rgba(250, 204, 21, 0); }
  100% { box-shadow: 0 0 0 0 rgba(250, 204, 21, 0); }
}

@media (max-width: 1280px) {
  .energy-control-grid,
  .energy-kpi-grid,
  .energy-report-grid,
  .energy-table-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .energy-hero-panel,
  .energy-control-grid,
  .energy-kpi-grid,
  .energy-report-grid,
  .energy-table-grid {
    grid-template-columns: 1fr;
  }
  .energy-hero-panel {
    display: grid;
  }
  .energy-hero-status {
    min-width: 0;
    text-align: left;
  }
  .energy-pie-visual {
    grid-template-columns: 1fr;
  }
  .energy-pie-donut {
    justify-self: center;
  }
}

/* ═══════════════════════════════════════════════════
   MAINTENANCE PAGE — Modern High-Contrast Redesign
   ═══════════════════════════════════════════════════ */
.maintenance-page {
  display: grid;
  gap: 20px;
}

/* ── Hero banner header ── */
.maintenance-head {
  border-radius: 16px;
  background: linear-gradient(135deg, #0c2340 0%, #0f3460 55%, #1565c0 100%);
  box-shadow: 0 4px 28px rgba(21, 101, 192, .3), 0 1px 4px rgba(0, 0, 0, .2);
  padding: 26px 28px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border: none;
}

.maintenance-head .eyebrow {
  color: #93c5fd;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.maintenance-head h2 {
  color: #fff;
  font-size: 22px;
  font-weight: 900;
  margin: 4px 0 8px;
  letter-spacing: -.01em;
}

.maintenance-head > div > p {
  color: rgba(255, 255, 255, .78);
  font-size: 13.5px;
  line-height: 1.55;
  margin: 0;
}


/* ── Calendar and asset panels ── */
.maintenance-calendar-panel,
.maintenance-assets-panel {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface, #fff);
  box-shadow: 0 2px 12px rgba(0, 0, 0, .06);
  padding: 20px 22px;
}

/* ── Scheduler card ── */
.maintenance-scheduler {
  border: 1px solid rgba(0, 116, 173, .22);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 116, 173, .07), 0 12px 32px rgba(28, 66, 92, .09);
  padding: 0;
  overflow: hidden;
  position: relative;
}

.maintenance-scheduler::before {
  content: "";
  display: block;
  height: 4px;
  background: linear-gradient(90deg, #0074ad 0%, #00b4d8 55%, #90e0ef 100%);
  border-radius: 14px 14px 0 0;
}

.maintenance-scheduler .panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 22px 14px;
  background: linear-gradient(135deg, #eef7ff 0%, #e2f1fc 100%);
  border-bottom: 1px solid rgba(0, 116, 173, .14);
}

.maintenance-scheduler .panel-head .eyebrow {
  color: #0065a0;
  font-weight: 800;
  letter-spacing: .06em;
  font-size: 11px;
}

.maintenance-scheduler .panel-head h2 {
  margin: 2px 0 0;
  font-size: 17px;
  font-weight: 800;
  color: #0c2d4a;
}

.maintenance-form-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  padding: 18px 22px 22px;
  background: #f4fbff;
}

.maintenance-form-grid label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  border: 1.5px solid #c8e4f5;
  border-radius: 10px;
  background: #fff;
  padding: 12px 14px 10px;
  box-shadow: 0 1px 4px rgba(0, 116, 173, .06);
  transition: border-color .18s, box-shadow .18s, transform .15s;
  cursor: text;
}

.maintenance-form-grid label:hover {
  border-color: #60acd4;
  box-shadow: 0 4px 14px rgba(0, 116, 173, .14);
  transform: translateY(-1px);
}

.maintenance-form-grid label:focus-within {
  border-color: #0074ad;
  box-shadow: 0 0 0 3px rgba(0, 116, 173, .14), 0 4px 14px rgba(0, 116, 173, .1);
  transform: translateY(-1px);
}

.maintenance-form-grid label.wide {
  grid-column: span 2;
  background: linear-gradient(135deg, #fafeff 0%, #eef8ff 100%);
}

.maintenance-form-grid span {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #005a8a;
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
}

.maintenance-form-grid input,
.maintenance-form-grid select,
.maintenance-form-grid textarea {
  width: 100%;
  min-height: 36px;
  border: none;
  border-radius: 0;
  background: transparent;
  padding: 0;
  font-size: 13.5px;
  color: #0f2d44;
  outline: none;
  box-shadow: none;
}

.maintenance-form-grid select { cursor: pointer; }

.maintenance-form-grid textarea {
  min-height: 78px;
  resize: vertical;
  line-height: 1.55;
}

/* ── Shared calendar selector ── */
.maintenance-calendar {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
}

.calendar-selector {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.calendar-selector label {
  display: grid;
  gap: 5px;
  min-width: 130px;
}

.calendar-selector span {
  color: #475569;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.calendar-selector select {
  min-height: 36px;
  border: 1.5px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
  padding: 0 10px;
  font-weight: 700;
  color: #0f172a;
}

.month-calendar {
  display: grid;
  gap: 10px;
}

.calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
}

.calendar-weekdays span {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7fbff;
  color: var(--brand);
  padding: 9px;
  text-align: center;
  font-size: 12px;
  font-weight: 900;
}

.maintenance-calendar.monthly .calendar-day {
  min-height: 122px;
}

.calendar-day.empty {
  background: #f7f9fb;
  box-shadow: none;
}

.calendar-day {
  min-height: 130px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 10px;
}

.calendar-day.has-plan {
  border-color: rgba(0, 168, 200, .45);
  background: #f7fcff;
}

.calendar-day strong {
  display: block;
  margin-bottom: 8px;
}

.calendar-day div {
  display: grid;
  gap: 4px;
  border-radius: 7px;
  background: #fff;
  border: 1px solid var(--line);
  padding: 8px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 850;
}

.calendar-day div span,
.calendar-day p {
  color: var(--muted);
  font-size: 12px;
}

.calendar-plan-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 4px;
  border-radius: 7px;
  background: #fff;
  border: 1px solid var(--line);
  padding: 6px 8px;
  font-size: 12px;
  font-weight: 850;
  color: var(--ink);
}

.calendar-plan-item span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 400;
}

.calendar-plan-item strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Maintenance calendar panel — protected from datepicker CSS overrides */
.maintenance-page .maintenance-calendar-panel.maintenance-calendar-panel {
  overflow: visible !important;
  position: relative !important;
  left: auto !important;
  right: auto !important;
  grid-column: 1 / -1;
  justify-self: stretch;
  width: 100% !important;
  max-width: 100% !important;
  max-height: none !important;
  height: auto !important;
  margin: 0 !important;
  transform: none !important;
  padding: 20px 22px !important;
  border-radius: 14px !important;
}

.maintenance-calendar-panel .panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.maintenance-calendar-panel .calendar-selector { flex: 0 0 auto; }

/* ── Calendar grid ── */
.maint-cal-wrap {
  display: grid;
  gap: 6px;
  width: 100%;
}

.maint-cal-head {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}

.maint-cal-head span {
  background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%);
  border: 1px solid #1e40af;
  border-radius: 6px;
  padding: 7px 4px;
  text-align: center;
  font-size: 11.5px;
  font-weight: 800;
  color: #fff;
  letter-spacing: .04em;
}

.maint-cal-body {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
  align-content: start;
  align-items: start;
}

.maint-cell {
  min-height: 64px;
  border: 1.5px solid #e2e8f0;
  border-radius: 8px;
  background: #fafbfc;
  padding: 7px 9px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: box-shadow .15s;
}

.maint-cell:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, .08); }

.maint-cell-empty {
  min-height: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  overflow: hidden;
}

.maint-cell-plan {
  border-color: #3b82f6;
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  box-shadow: 0 1px 6px rgba(37, 99, 235, .12);
}

.maint-day-num {
  display: block;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
  color: #1e293b;
}

.maint-cell-plan .maint-day-num { color: #1d4ed8; }

.maint-no-plan {
  margin: 0;
  font-size: 11px;
  color: #94a3b8;
  line-height: 1.3;
}

.maint-plan-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 4px;
  background: #dbeafe;
  border: 1px solid #93c5fd;
  border-radius: 5px;
  padding: 4px 6px;
}

.maint-plan-time {
  font-size: 10px;
  color: #1d4ed8;
  font-weight: 700;
  white-space: nowrap;
}

.maint-plan-name {
  font-size: 11px;
  font-weight: 700;
  color: #1e3a8a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

@media (max-width: 760px) {
  .maintenance-calendar-panel .panel-head { display: grid; }
  .maintenance-calendar-panel .calendar-selector { justify-content: flex-start; }
  .maint-cal-head span { font-size: 10px; padding: 5px 2px; }
  .maint-cell { min-height: 44px; padding: 4px 5px; }
  .maint-day-num { font-size: 13px; }
}

.calendar-delete-btn {
  background: none;
  border: none;
  color: var(--danger);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
  border-radius: 3px;
  opacity: 0.65;
  transition: opacity .15s;
}

.calendar-delete-btn:hover {
  opacity: 1;
  background: rgba(220, 53, 69, .1);
}

/* ── Asset tracking plan list ── */
.maintenance-plan-list {
  display: grid;
  gap: 12px;
}

/* ── Plan cards ── */
.maintenance-plan-card {
  display: grid;
  gap: 12px;
  border: 1px solid #e2e8f0;
  border-left: 4px solid #2563eb;
  border-radius: 12px;
  background: #fff;
  padding: 16px 18px;
  box-shadow: 0 1px 6px rgba(0,0,0,.06);
  transition: box-shadow .18s, transform .15s;
}
.maintenance-plan-card:hover {
  box-shadow: 0 4px 18px rgba(0,0,0,.1);
  transform: translateY(-1px);
}
.maintenance-plan-card.urgent { border-left-color: #dc2626; border-color: #fecaca; background: #fff8f8; }
.maintenance-plan-card.watch  { border-left-color: #d97706; border-color: #fde68a; background: #fffcf2; }

/* Header row */
.maintenance-plan-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.maintenance-plan-identity { display: flex; flex-direction: column; gap: 2px; }
.maintenance-plan-area {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #64748b;
}
.maintenance-plan-name {
  font-size: 16px;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
  line-height: 1.3;
}
.maintenance-plan-card.urgent .maintenance-plan-name { color: #7f1d1d; }
.maintenance-plan-card.watch  .maintenance-plan-name { color: #78350f; }
.maintenance-plan-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.mplan-delete-btn {
  width: 26px; height: 26px;
  border: 1px solid #fca5a5;
  border-radius: 6px;
  background: #fff5f5;
  color: #dc2626;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, border-color .15s;
  flex-shrink: 0;
}
.mplan-delete-btn:hover { background: #fecaca; border-color: #dc2626; }

/* Meta grid */
.maintenance-plan-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.mplan-meta-cell {
  border: 1px solid #f1f5f9;
  border-radius: 8px;
  background: #f8fafc;
  padding: 9px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.maintenance-plan-card.urgent .mplan-meta-cell { background: #fff0f0; border-color: #fde8e8; }
.maintenance-plan-card.watch  .mplan-meta-cell { background: #fffbf0; border-color: #fef0c7; }
.mplan-meta-cell > span {
  font-size: 10px;
  font-weight: 700;
  color: #94a3b8;
  letter-spacing: .04em;
}
.mplan-meta-cell > strong {
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.mplan-meta-cell > strong em {
  font-style: normal;
  font-size: 11px;
  font-weight: 600;
  color: #475569;
}

/* Progress bar */
.maintenance-target-bar { display: flex; flex-direction: column; gap: 5px; }
.mplan-bar-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.mplan-bar-head span {
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
}
.mplan-bar-head strong {
  font-size: 12px;
  font-weight: 800;
}
.maintenance-target-bar span { color: #475569; font-size: 11.5px; font-weight: 700; }
.maintenance-target-bar strong[data-runtime-pct] { font-size: 14px; font-weight: 800; color: #0f172a; }

/* Issue / action box */
.issue-box {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.maintenance-plan-card.urgent .issue-box { background: #fff5f5; border-color: #fecaca; }
.maintenance-plan-card.watch  .issue-box { background: #fffbf0; border-color: #fde68a; }
.issue-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 12.5px;
  line-height: 1.5;
  color: #334155;
}
.issue-label {
  flex-shrink: 0;
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 2px 6px;
  border-radius: 4px;
}
.issue-label--problem { background: #fee2e2; color: #b91c1c; }
.issue-label--action  { background: #dcfce7; color: #15803d; }
.issue-row p { margin: 0; }
.maintenance-plan-card.urgent .issue-label--problem { background: #fca5a5; }
.maintenance-plan-card.watch  .issue-label--problem { background: #fde68a; color: #92400e; }

.tool-page {
  display: grid;
  gap: 16px;
}

.tool-form-panel {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, .96);
  box-shadow: var(--glow);
  padding: 16px;
}

.config-summary-title-trigger {
  border-radius: 8px;
  cursor: pointer;
  padding: 2px 6px;
  margin: -2px -6px;
}

.config-summary-title-trigger:hover,
.config-summary-title-trigger:focus-visible {
  background: rgba(14, 143, 178, .08);
  outline: none;
}

.config-summary-title-trigger[data-sensor-setting-disabled="true"] {
  cursor: default;
  opacity: .72;
}

.tool-form-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.tool-form-grid label {
  display: grid;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 10px;
}

.tool-form-grid label.wide {
  grid-column: span 2;
}

.tool-form-grid span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}

.tool-form-grid input,
.tool-form-grid select,
.tool-form-grid textarea {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
}

.tool-form-grid textarea {
  min-height: 86px;
  resize: vertical;
}


.chemical-overview-shell {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, .96);
  box-shadow: var(--glow);
  padding: 16px;
}

.chemical-period-control,
.compact-period {
  max-width: 100%;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.chemical-master-panel {
  display: grid;
  gap: 14px;
}

.chemical-master-form {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.chemical-master-table {
  margin-top: 2px;
}

.delete-chemical-button {
  border-color: rgba(216, 68, 68, .26);
  color: var(--danger);
}

.deleted-row {
  opacity: .5;
  text-decoration: line-through;
}

.deleted-row .badge {
  text-decoration: line-through;
}

.report-check-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.report-check-grid label {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 10px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
}

.report-process-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.report-process-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: #fff;
  padding: 12px 14px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.report-process-item:has(input:checked) {
  border-color: var(--accent, #0b4f7a);
  background: #f0f9ff;
}

.report-process-item input[type="checkbox"] {
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--accent, #0b4f7a);
  width: 15px;
  height: 15px;
}

.report-process-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.report-process-info strong {
  font-size: 13px;
  color: var(--text, #0f172a);
  font-weight: 600;
}

.report-process-info span {
  font-size: 11px;
  color: var(--muted, #64748b);
  line-height: 1.4;
}

.report-date-field {
  overflow: visible;
}

.report-date-field input[type="date"] {
  position: static !important;
  display: block !important;
  width: 100% !important;
  height: 44px !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  appearance: auto;
  -webkit-appearance: auto;
}

.report-date-field input[type="date"]::-webkit-calendar-picker-indicator {
  display: block;
  opacity: .72;
  cursor: pointer;
}

.report-builder-panel .panel-head {
  align-items: flex-start;
}

.report-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.report-summary-grid article {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 12px;
  min-height: 116px;
}

.report-summary-grid article.calc-ok {
  border-color: rgba(0, 171, 125, .34);
  background: linear-gradient(135deg, rgba(224, 250, 241, .9), #fff);
}

.report-summary-grid article.calc-warn {
  border-color: rgba(242, 184, 75, .48);
  background: linear-gradient(135deg, rgba(255, 247, 226, .95), #fff);
}

.report-summary-grid article.calc-danger {
  border-color: rgba(239, 106, 77, .46);
  background: linear-gradient(135deg, rgba(255, 235, 231, .95), #fff);
}

.report-summary-grid article.calc-empty {
  border-color: rgba(148, 163, 184, .28);
  background: #f8fbfd;
}

.report-summary-grid span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}

.report-summary-grid strong {
  display: block;
  margin-top: 8px;
  font-size: 30px;
  line-height: 1;
}

.report-summary-grid p {
  margin-top: 8px;
  color: var(--muted);
  font-size: 13px;
}

.report-preview-panel .data-range-label {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #f4f9fc;
  color: var(--brand);
  padding: 8px 12px;
  font-weight: 850;
}

.management-summary-grid article {
  min-height: 132px;
}

.report-management-panel {
  border-top: 4px solid var(--brand);
}

.report-conclusion-box {
  border: 1px solid rgba(14, 124, 134, .18);
  border-radius: 10px;
  background: linear-gradient(135deg, #f7fcfd, #fff);
  padding: 14px 16px;
  color: var(--muted);
  line-height: 1.55;
}

.report-conclusion-box strong {
  display: block;
  color: var(--ink);
  font-size: 18px;
  margin-bottom: 8px;
}

.report-conclusion-box ul {
  margin: 0;
  padding-left: 18px;
}

.report-conclusion-box li + li {
  margin-top: 4px;
}

.master-tag-section {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, .96);
  box-shadow: var(--glow);
  padding: 16px;
}

.configured-sensor-section {
  display: grid;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, .96);
  box-shadow: var(--glow);
  padding: 14px;
}

.configured-sensor-groups {
  display: grid;
  gap: 12px;
}

.configured-sensor-group {
  display: grid;
  gap: 10px;
  border: 1px solid rgba(191, 209, 223, .72);
  border-radius: 10px;
  background: linear-gradient(135deg, #f8fcfd, #fff);
  padding: 12px;
}

.configured-sensor-group-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.configured-sensor-group-head strong {
  color: var(--ink);
  font-size: 16px;
}

.configured-sensor-group-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}

.configured-sensor-card-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.configured-sensor-card {
  display: grid;
  gap: 7px;
  min-height: 104px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 11px;
}

.configured-sensor-card span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.configured-sensor-card strong {
  font-size: 25px;
  line-height: 1.05;
}

.configured-sensor-card small {
  max-width: 100%;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.master-tag-grid,
.master-equipment-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.master-tag-card,
.master-equipment-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(135deg, #fff, #f8fcff);
  padding: 12px;
}

.master-tag-card span,
.master-equipment-values span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.master-tag-card h4,
.master-equipment-card h4 {
  margin: 5px 0 10px;
  font-size: 16px;
}

.master-tag-card strong {
  display: block;
  font-size: 28px;
  line-height: 1;
}

.master-tag-card small,
.master-equipment-values small {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 11px;
  overflow-wrap: anywhere;
}

.master-equipment-values {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.master-equipment-values div,
.master-equipment-values p {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 10px;
}

.master-equipment-values strong {
  display: block;
  margin-top: 6px;
  font-size: 20px;
}

.master-hidden {
  display: none !important;
}

.control-mode-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}

.control-mode-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 13px;
}

.control-mode-card.active {
  border-color: rgba(0, 168, 200, .45);
  background: #f7fcff;
  box-shadow: inset 4px 0 0 var(--info);
}

.manual-active .control-mode-card.active {
  border-color: rgba(214, 138, 0, .5);
  background: #fff8e8;
  box-shadow: inset 4px 0 0 var(--warn);
}

.control-mode-card span,
.auto-parameter-grid span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}

.auto-parameter-grid small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.control-mode-card strong {
  display: block;
  margin: 7px 0 5px;
  font-size: 24px;
}

.control-mode-card strong[data-auto-active-summary] {
  font-size: 15px;
  line-height: 1.35;
}

.control-mode-card p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 13px;
}

.trigger-button-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.manual-action-box {
  display: none;
  grid-template-columns: minmax(0, 1fr) 150px 180px auto auto;
  gap: 10px;
  align-items: end;
  border: 1px solid rgba(214, 138, 0, .35);
  border-radius: 10px;
  background: #fff9ea;
  padding: 12px;
  margin-bottom: 14px;
}

.manual-action-box.show {
  display: grid;
}

.manual-action-box span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}

.manual-action-box strong {
  display: block;
  margin: 5px 0;
  font-size: 17px;
}

.manual-action-box p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 12px;
}

.manual-action-box label {
  display: grid;
  gap: 5px;
}

.manual-action-box input {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 10px;
}

.manual-action-box small {
  color: var(--muted);
  font-size: 11px;
}

.manual-countdown {
  display: grid;
  gap: 5px;
  min-width: 0;
  border: 1px solid rgba(214, 138, 0, .22);
  border-radius: 8px;
  background: rgba(255, 255, 255, .72);
  padding: 8px 10px;
}

.manual-countdown strong {
  margin: 0;
  color: var(--warn);
  font-size: 20px;
  font-variant-numeric: tabular-nums;
}

.manual-countdown-bar {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(214, 138, 0, .14);
}

.manual-countdown-bar i {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #b86a00, var(--warn));
  transition: width .25s ease;
}

.manual-start-button,
.manual-stop-button {
  min-height: 38px;
  border-radius: 8px;
  padding: 0 13px;
  font-weight: 850;
}

.manual-start-button {
  border: 1px solid var(--warn);
  background: linear-gradient(135deg, #b86a00, var(--warn));
  color: #fff;
}

.manual-stop-button {
  border: 1px solid var(--danger);
  background: #fff;
  color: var(--danger);
}

.manual-start-button:disabled,
.manual-stop-button:disabled {
  cursor: not-allowed;
  opacity: .55;
}

.control-panel.manual-running {
  box-shadow: 0 0 0 2px rgba(214, 138, 0, .16), 0 18px 44px rgba(214, 138, 0, .15);
}

.control-panel.manual-running .control-active-strip {
  border-color: rgba(214, 138, 0, .5);
  background: #fff0ce;
}

.control-panel.manual-stopped .control-active-strip {
  border-color: rgba(216, 68, 68, .32);
  background: #fff1f1;
  color: var(--danger);
}

.control-panel.manual-stopped .mode-dot {
  background: var(--danger);
  box-shadow: 0 0 0 6px rgba(216, 68, 68, .12);
}

.control-panel.manual-complete .control-active-strip {
  border-color: rgba(31, 157, 122, .32);
  background: #eefbf5;
  color: var(--ok);
}

.control-panel.manual-complete .mode-dot {
  background: var(--ok);
  box-shadow: 0 0 0 6px rgba(31, 157, 122, .12);
}

.primary-trigger,
.secondary-trigger {
  min-height: 38px;
  border-radius: 8px;
  padding: 0 13px;
  font-weight: 850;
}

.primary-trigger {
  border: 1px solid var(--brand);
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff;
}

.manual-active .primary-trigger.active {
  border-color: var(--warn);
  background: linear-gradient(135deg, #b86a00, var(--warn));
}

.secondary-trigger {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--brand);
}

.primary-trigger:disabled,
.secondary-trigger:disabled {
  cursor: not-allowed;
  opacity: .55;
}

.auto-parameter-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.auto-parameter-grid label {
  display: grid;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 11px;
}

.auto-parameter-grid input {
  width: 100%;
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 0 10px;
  color: var(--ink);
}

.auto-parameter-grid .unmapped-auto-param {
  background: #f8fafc;
}

.auto-parameter-grid .unmapped-auto-param input {
  color: #64748b;
}

.flow-station {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: linear-gradient(180deg, #fff, #fbfdff);
  padding: 16px;
}

.station-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}

.flow-station h3 {
  margin: 12px 0;
  font-size: 17px;
}

.station-values {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.monitoring-page[data-monitoring-key="aeration"] .station-values {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  overflow-x: visible;
  padding-bottom: 0;
}

.monitoring-page[data-monitoring-key="aeration"] .station-values div {
  min-width: 0;
  padding: 8px 9px;
}

.monitoring-page[data-monitoring-key="aeration"] .station-values span {
  font-size: 10px;
}

.monitoring-page[data-monitoring-key="aeration"] .station-values strong {
  font-size: 15px;
  line-height: 1.15;
}

.station-values div {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 11px;
}

.station-values strong {
  display: block;
  margin-top: 6px;
  font-size: 18px;
}

/* ── Final Outlet: unified card base ─────────────────────────── */
.monitoring-page--final-outlet .flow-station {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  padding: 20px 18px 18px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .04);
  display: flex;
  flex-direction: column;
}

.monitoring-page--final-outlet .flow-station .station-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  flex-shrink: 0;
}

.monitoring-page--final-outlet .flow-station h3 {
  margin: 12px 0 14px;
  font-size: 15px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.monitoring-page--final-outlet .flow-station .station-values {
  gap: 8px;
  flex: 1;
}

.monitoring-page--final-outlet .flow-station .station-values > div {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg, #f8fafc);
  padding: 11px 13px 10px;
}

.monitoring-page--final-outlet .flow-station .station-values span {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  margin-bottom: 5px;
  line-height: 1.3;
}

.monitoring-page--final-outlet .flow-station .station-values strong {
  display: block;
  margin-top: 0;
  font-size: clamp(17px, 1.5vw, 21px);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.1;
}

/* Outlet Inlet: same row-card concept as sibling final-outlet cards */
.monitoring-page--final-outlet .flow-station--outlet-inlet {
  border-left: 4px solid var(--brand);
}

.monitoring-page--final-outlet .flow-station--outlet-inlet .station-values {
  grid-template-columns: 1fr;
  gap: 7px;
}

.monitoring-page--final-outlet .flow-station--outlet-inlet .station-values > div {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: 10px 13px;
  gap: 8px;
}

.monitoring-page--final-outlet .flow-station--outlet-inlet .station-values span {
  margin-bottom: 0;
  font-size: 11px;
}

.monitoring-page--final-outlet .flow-station--outlet-inlet .station-values strong {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}

/* Compliance Check: accent color + 3-column layout */
.monitoring-page--final-outlet .flow-station--compliance-check {
  border-left: 4px solid var(--ok);
}

.monitoring-page--final-outlet .flow-station--compliance-check .station-values {
  grid-template-columns: 1fr;
  gap: 7px;
}

.monitoring-page--final-outlet .flow-station--compliance-check .station-values > div {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: 10px 13px;
  gap: 8px;
}

.monitoring-page--final-outlet .flow-station--compliance-check .station-values span {
  margin-bottom: 0;
  font-size: 11px;
}

.monitoring-page--final-outlet .flow-station--compliance-check .station-values strong {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}

/* Discharge: neutral/info styling */
.monitoring-page--final-outlet .flow-station--discharge {
  border-left: 4px solid var(--brand-2);
}

.monitoring-page--final-outlet .flow-station--discharge .station-values {
  grid-template-columns: 1fr;
  gap: 7px;
}

.monitoring-page--final-outlet .flow-station--discharge .station-values > div {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: 10px 13px;
  gap: 8px;
}

.monitoring-page--final-outlet .flow-station--discharge .station-values span {
  margin-bottom: 0;
  font-size: 11px;
}

.monitoring-page--final-outlet .flow-station--discharge .station-values strong {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}

/* Health state suppression: clean left-border only */
.monitoring-page--final-outlet .flow-station .station-values div.sensor-health-normal {
  border-left: 3px solid var(--ok) !important;
  background: rgba(16, 185, 129, .04) !important;
  box-shadow: none !important;
}
.monitoring-page--final-outlet .flow-station .station-values div.sensor-health-warning {
  border-left: 3px solid var(--warn) !important;
  background: rgba(245, 158, 11, .05) !important;
  box-shadow: none !important;
}
.monitoring-page--final-outlet .flow-station .station-values div.sensor-health-danger {
  border-left: 3px solid var(--danger) !important;
  background: rgba(244, 63, 94, .05) !important;
  box-shadow: none !important;
}
.monitoring-page--final-outlet .flow-station .station-values div.sensor-health-stale {
  border-left: 3px solid #7dd3fc !important;
  background: rgba(125, 211, 252, .05) !important;
  box-shadow: none !important;
}
.monitoring-page--final-outlet .flow-station .station-values span,
.monitoring-page--final-outlet .flow-station .station-values strong {
  color: inherit;
}

.monitoring-page--final-outlet .inlet-trend-panel {
  overflow: hidden;
  border-color: rgba(14, 116, 144, .18);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(247, 252, 255, .96)),
    radial-gradient(circle at 100% 0%, rgba(0, 147, 185, .08), transparent 320px);
  box-shadow: 0 18px 42px rgba(12, 65, 92, .07);
}

.monitoring-page--final-outlet .inlet-trend-panel .panel-head {
  align-items: flex-start;
  gap: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(196, 218, 232, .72);
}

.monitoring-page--final-outlet .inlet-trend-panel .panel-head h2 {
  margin-bottom: 0;
  font-size: 22px;
}

.monitoring-page--final-outlet .inlet-trend-panel .trend-param-drawer {
  background: transparent;
  border-top: none;
  padding: 0;
}

.monitoring-page--final-outlet .trend-options {
  justify-content: flex-end;
  gap: 8px;
  max-width: min(100%, 920px);
}

.monitoring-page--final-outlet .trend-options > label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(174, 204, 223, .84);
  background: rgba(255, 255, 255, .88);
  color: #52667a;
  padding: 0 13px;
  box-shadow: 0 6px 16px rgba(12, 65, 92, .04);
  transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease;
}

.monitoring-page--final-outlet .trend-options > label:hover {
  border-color: rgba(0, 147, 185, .45);
  color: #075985;
  transform: translateY(-1px);
}

.monitoring-page--final-outlet .trend-options > label:has(input:checked) {
  border-color: rgba(0, 139, 176, .72);
  background: linear-gradient(135deg, rgba(0, 137, 173, .96), rgba(0, 178, 204, .92));
  color: #fff;
  box-shadow: 0 10px 22px rgba(0, 126, 164, .18);
}

.monitoring-page--final-outlet .trend-options input[type="checkbox"] {
  width: 15px;
  height: 15px;
  accent-color: var(--brand);
}

.monitoring-page--final-outlet .trend-options > label:has(input:checked) input[type="checkbox"] {
  accent-color: #fff;
}

.monitoring-page--final-outlet .inlet-chart {
  margin-top: 14px;
  border-radius: 14px;
  border: 1px solid rgba(196, 218, 232, .78);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(249, 252, 255, .94)),
    repeating-linear-gradient(0deg, transparent 0 42px, rgba(12, 65, 92, .035) 43px 44px);
  padding: 14px;
}

.monitoring-page--final-outlet .inlet-chart svg {
  min-height: 260px;
}

.monitoring-page--final-outlet .inlet-chart .grid-line {
  stroke: rgba(118, 148, 168, .22);
  stroke-width: 1;
}

.monitoring-page--final-outlet .inlet-chart .chart-line {
  stroke-width: 4;
  filter: drop-shadow(0 7px 12px rgba(0, 113, 152, .12));
}

.monitoring-page--final-outlet .axis-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.monitoring-page--final-outlet .axis-legend span {
  border-radius: 999px;
  border: 1px solid rgba(196, 218, 232, .82);
  background: rgba(255, 255, 255, .82);
  padding: 7px 12px;
  color: #52667a;
  font-size: 12px;
}

.monitoring-page--final-outlet .clear-legend {
  margin-top: 12px;
  gap: 10px;
}

.monitoring-page--final-outlet .clear-legend span {
  border: 1px solid rgba(196, 218, 232, .72);
  border-radius: 999px;
  background: rgba(255, 255, 255, .86);
  padding: 7px 10px;
}

.monitoring-page--final-outlet .trend-time-axis {
  margin-top: 12px;
  padding: 8px 10px 0;
  border-top: 1px solid rgba(196, 218, 232, .72);
}

.monitoring-page--final-outlet .trend-time-axis span {
  color: #60758b;
  font-size: 12px;
  font-weight: 700;
}

@media (max-width: 900px) {
  .monitoring-page--final-outlet .inlet-trend-panel .panel-head {
    display: grid;
  }

  .monitoring-page--final-outlet .trend-options {
    justify-content: flex-start;
  }
}

.chemical-stock-card-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.chemical-stock-card {
  display: grid;
  gap: 7px;
  min-height: 96px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 12px;
}

.chemical-stock-card span,
.chemical-stock-card small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.chemical-stock-card strong {
  font-size: 23px;
}

.manual-log-panel {
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}

.manual-log-panel .panel-head {
  background: #f8fafc;
  border-bottom: 1px solid var(--line);
  padding: 12px 16px;
  margin: 0;
}

.manual-log-panel .panel-head .eyebrow {
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.manual-log-panel .panel-head h3 {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  margin: 2px 0 0;
}

.manual-log-panel .panel-head p {
  font-size: 12px;
  color: var(--muted);
  margin: 4px 0 0;
}

.manual-log-panel .table-wrap {
  border-radius: 0;
  border: none;
  background: #fff;
}

html[data-theme="dark"] .manual-log-panel {
  background: var(--panel);
  border-color: var(--line);
}

html[data-theme="dark"] .manual-log-panel .panel-head {
  background: rgba(255,255,255,.03);
  border-color: var(--line);
}

/* Action badge chips in manual log table */
.log-action-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .05em;
  padding: 3px 9px;
  border-radius: 100px;
  background: var(--bg);
  color: var(--muted);
  border: 1px solid var(--line);
}
.log-action--start  { background: #e6faf3; color: #0a7a54; border-color: rgba(10,122,84,.3); }
.log-action--stop   { background: #fde8e8; color: #c72d2d; border-color: rgba(199,45,45,.3); }
.log-action--manual { background: #fff3d6; color: #a05f00; border-color: rgba(201,122,0,.3); }
.log-action--auto   { background: #e8f0ff; color: #1a50c8; border-color: rgba(26,80,200,.3); }

.log-ts { color: var(--muted); font-size: 12px; }
.log-empty { text-align: center; color: var(--muted); padding: 24px !important; }

.alarm-rule-workbench {
  margin-top: 14px;
}

.master-config-details {
  display: grid;
  gap: 14px;
}

.master-config-details summary {
  cursor: pointer;
  color: var(--brand);
  font-weight: 900;
}

.config-section {
  margin-bottom: 14px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  border-left: 3px solid #0b4f7a;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
  background: #fff;
}

.config-section-details {
  display: block;
}

.config-section-details > summary {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  list-style: none;
  padding: 13px 18px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  transition: background .12s;
}

.config-section-details > summary:hover {
  background: #f1f5f9;
}

.config-section-details:not([open]) > summary {
  border-bottom: none;
}

.config-section-details > summary::-webkit-details-marker {
  display: none;
}

.config-section-details > summary::after {
  display: none;
}

.config-section-details > summary > div:nth-child(2),
.config-section-details > summary > div.config-summary-title-trigger {
  flex: 1 1 auto;
  min-width: 0;
}

.config-section-details > summary .eyebrow {
  color: #64748b;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin: 0 0 3px;
}

.config-section-details > summary h2 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.3;
}

/* Section icon — single dark navy for all types */
.config-section-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  flex-shrink: 0;
  background: #0b4f7a;
  color: #ffffff;
}

.config-section-icon svg {
  width: 16px;
  height: 16px;
}

/* All section types share the same navy accent — no rainbow */
[data-section-type] { border-left: 3px solid #0b4f7a; }

.master-config-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.master-config-card {
  display: grid;
  gap: 12px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: rgba(255, 255, 255, .6);
}

.sensor-ui-hidden {
  display: none !important;
}

.sensor-visibility-intro {
  display: grid;
  gap: 4px;
  margin: 14px 18px;
  padding: 12px 14px;
  border: 1px solid #d7e7ef;
  border-radius: 10px;
  background: #f8fcff;
  color: #475569;
  font-size: 13px;
}

.sensor-visibility-intro strong {
  color: #0f4c6c;
  font-size: 13px;
}

.sensor-visibility-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 18px 12px;
}

.sensor-visibility-toolbar input {
  flex: 1 1 auto;
  min-width: 180px;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font-size: 13px;
}

.sensor-visibility-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #0f4c6c;
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}

.sensor-visibility-toggle input {
  width: 16px;
  height: 16px;
  accent-color: #0b82a8;
}

html[data-theme="dark"] .sensor-visibility-intro,
html[data-theme="dark"] .sensor-visibility-toolbar input {
  background: rgba(255,255,255,.04);
  border-color: var(--line);
  color: var(--muted);
}

html[data-theme="dark"] .sensor-visibility-intro strong,
html[data-theme="dark"] .sensor-visibility-toggle {
  color: #8bd8ff;
}

/* Equipment threshold panel */
.equipment-threshold-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: 14px;
}

.equipment-threshold-card {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, .9);
  padding: 14px 16px;
  box-shadow: var(--glow);
}

.equipment-threshold-card.empty {
  background: rgba(0, 168, 200, .04);
  border-style: dashed;
}

.equipment-threshold-card header {
  display: grid;
  gap: 2px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.equipment-threshold-card header strong {
  color: var(--ink);
  font-size: 15px;
}

.equipment-threshold-card header small {
  color: var(--brand);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.equipment-threshold-rows {
  display: grid;
  gap: 14px;
}

.equipment-threshold-row {
  display: grid;
  gap: 8px;
  padding: 10px;
  background: rgba(0, 168, 200, .04);
  border: 1px solid rgba(0, 168, 200, .15);
  border-radius: 8px;
}

.threshold-row-label {
  display: grid;
  gap: 2px;
}

.threshold-row-label strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
}

.threshold-row-label small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
}

.threshold-row-label code {
  background: rgba(0, 168, 200, .12);
  color: var(--brand);
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 10px;
}

.threshold-row-inputs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.threshold-row-inputs label {
  display: grid;
  gap: 4px;
}

.threshold-row-inputs label span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.threshold-row-inputs input {
  min-height: 32px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  padding: 0 8px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.threshold-row-inputs input:focus {
  outline: 2px solid rgba(0, 168, 200, .25);
  border-color: var(--brand);
}

/* Dark mode for equipment thresholds */
html[data-theme="dark"] .equipment-threshold-card {
  background: rgba(255, 255, 255, .03);
  border-color: var(--line);
  box-shadow: none;
}

html[data-theme="dark"] .equipment-threshold-card header {
  border-bottom-color: var(--line);
}

html[data-theme="dark"] .equipment-threshold-card header strong {
  color: var(--ink);
}

html[data-theme="dark"] .equipment-threshold-card header small {
  color: var(--brand-2);
}

html[data-theme="dark"] .equipment-threshold-card.empty {
  background: rgba(52, 200, 232, .05);
}

html[data-theme="dark"] .equipment-threshold-row {
  background: rgba(52, 200, 232, .06);
  border-color: rgba(52, 200, 232, .15);
}

html[data-theme="dark"] .threshold-row-label strong {
  color: var(--ink);
}

html[data-theme="dark"] .threshold-row-label small {
  color: var(--muted);
}

html[data-theme="dark"] .threshold-row-label code {
  background: rgba(52, 200, 232, .15);
  color: var(--brand-2);
}

html[data-theme="dark"] .threshold-row-inputs label span {
  color: var(--muted);
}

html[data-theme="dark"] .threshold-row-inputs input {
  background: #1d2c40;
  color: var(--ink);
  border-color: var(--line);
}

@media (max-width: 720px) {
  .equipment-threshold-grid {
    grid-template-columns: 1fr;
  }
  .threshold-row-inputs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.master-form-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.master-form-grid .wide-label {
  grid-column: span 3;
}

.master-form-grid .wide-label input {
  width: 100%;
}

.equipment-phase-group {
  grid-column: span 3;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  align-items: stretch;
}

.equipment-phase-group-title {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  min-height: 18px;
}

.equipment-phase-group-title span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.equipment-phase-group label {
  min-width: 0;
}

.equipment-phase-group label span {
  letter-spacing: .04em;
}

/* Tag field with auto-fill + manual edit + Reset button */
.tag-field-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  align-items: stretch;
}

.tag-field-wrap input {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12.5px;
}

.tag-reset-button {
  min-height: 38px;
  white-space: nowrap;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(0, 168, 200, .1), rgba(0, 119, 255, .06));
  color: var(--brand);
  padding: 0 12px;
  font-weight: 800;
  font-size: 12px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}

.tag-reset-button:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff;
  border-color: var(--brand);
}

.tag-reset-button:disabled {
  opacity: .5;
  cursor: not-allowed;
}

html[data-theme="dark"] .tag-field-wrap input {
  background: #1d2c40;
  color: var(--ink);
  border-color: var(--line);
}

html[data-theme="dark"] .tag-reset-button {
  background: rgba(52, 200, 232, .1);
  color: var(--brand-2);
  border-color: var(--line);
}

html[data-theme="dark"] .tag-reset-button:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #0d1520;
}

.alarm-rule-workbench summary {
  cursor: pointer;
  color: var(--brand);
  font-weight: 900;
}

.alarm-rule-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 14px 0;
}

.alarm-rule-toolbar p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

[data-alarm-rule-editor] table {
  min-width: 1040px;
}

[data-alarm-rule-editor] th:nth-child(2),
[data-alarm-rule-editor] td:nth-child(2) {
  width: 210px;
}

[data-alarm-rule-editor] th:nth-child(3),
[data-alarm-rule-editor] td:nth-child(3) {
  min-width: 360px;
}

.alarm-target-group-cell select {
  font-weight: 800;
  color: #075f83;
  background: #f0fbff;
  border-color: #b8dceb;
}

.compact-head {
  margin-bottom: 8px;
}

.compact-table table {
  min-width: 560px;
}

.table-page-control {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.table-page-control button {
  min-height: 30px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  color: var(--brand);
  padding: 0 10px;
  font-weight: 850;
}

.table-page-control button:disabled {
  opacity: .45;
}

.empty-state-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 24px;
  box-shadow: var(--shadow);
}

.empty-state-panel h3 {
  margin: 0 0 8px;
  font-size: 20px;
}

.empty-state-panel p {
  margin: 0;
  color: var(--muted);
}

.energy-donut,
.cost-donut {
  display: grid;
  place-items: center;
  text-align: center;
}
/* mini-donut uses flex-column (defined earlier) so children stack tight */
.mini-donut {
  text-align: center;
  gap: 2px;
}

.energy-donut strong,
.cost-donut strong {
  max-width: 82%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.05;
}

.mini-donut strong {
  overflow: visible;
  white-space: nowrap;
  text-overflow: clip;
  line-height: 1.05;
}

.energy-donut span,
.cost-donut span {
  align-self: start;
  margin-top: -8px;
  max-width: 76%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}

.overview-cost-panel .cost-donut strong {
  max-width: 84%;
  overflow: visible;
  text-overflow: clip;
  font-weight: 760;
  letter-spacing: 0;
}

.overview-cost-panel .cost-donut small,
.overview-cost-panel .cost-donut span {
  max-width: 72%;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
}

.overview-cost-panel .cost-donut span {
  align-self: auto;
  margin-top: 8px;
}

.mini-donut span {
  white-space: normal;
  overflow-wrap: break-word;
  text-overflow: clip;
}

.flow-connector {
  display: grid;
  place-items: center;
  position: relative;
  min-height: 160px;
}

.flow-connector::before,
.flow-connector::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 42%;
  height: 2px;
  background: var(--line-strong);
}

.flow-connector::before {
  left: 0;
}

.flow-connector::after {
  right: 0;
}

.flow-connector span {
  display: grid;
  place-items: center;
  z-index: 1;
  width: 132px;
  height: 74px;
  border: 1px solid rgba(0, 168, 200, .3);
  border-radius: 12px;
  background: #f6fbff;
  color: var(--brand);
  font-size: 13px;
  font-weight: 900;
  text-align: center;
}

/* ── Trend options: compact single-row horizontal bar ── */
/* Trend parameter button */
.trend-param-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px;
  border-radius: 8px;
  border: 1.5px solid var(--brand);
  background: #fff;
  color: var(--brand);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}

.trend-param-btn:hover,
.trend-param-btn[aria-expanded="true"] {
  background: var(--brand);
  color: #fff;
}

.trend-param-count {
  font-size: 11px;
  opacity: 0.8;
}

/* Trend parameter drawer */
.trend-param-drawer {
  border-top: 1px solid var(--line);
  padding: 12px 16px 10px;
  background: #f8fafd;
}

.trend-param-drawer[hidden] { display: none; }

html[data-theme="dark"] .trend-param-drawer {
  background: #141e2e;
  border-color: #1e293b;
}

html[data-theme="dark"] .trend-param-btn {
  background: #1e293b;
  color: #93c5fd;
  border-color: #2563eb;
}

html[data-theme="dark"] .trend-param-btn:hover,
html[data-theme="dark"] .trend-param-btn[aria-expanded="true"] {
  background: #2563eb;
  color: #fff;
}

/* Trend options chips — wrapping flex inside drawer */
.trend-options {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  width: 100%;
}

/* ══════════════════════════════════════════════════════════
   TREND PARAMETER DRAWER — 3-level hierarchy
   Process Section → Sensor Type → Unit chips
   ══════════════════════════════════════════════════════════ */

/* Stack sections vertically inside the drawer */
.trend-param-drawer .trend-options {
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
}

/* Process section card */
.trend-section-block {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-left: 4px solid #0b4f7a;
  border-radius: 10px;
  overflow: hidden;
}

/* Section header bar */
.trend-section-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 12px;
  background: linear-gradient(90deg, rgba(11,79,122,.06) 0%, transparent 100%);
  border-bottom: 1px solid #e9eef5;
}

.trend-section-icon {
  font-size: 12px;
  color: #0b4f7a;
  line-height: 1;
}

.trend-section-label {
  flex: 1;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #0b4f7a;
}

.trend-section-count {
  font-size: 10px;
  font-weight: 700;
  color: #94a3b8;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  padding: 1px 7px;
}

/* Body containing type rows */
.trend-section-body {
  display: flex;
  flex-direction: column;
}

/* One row per sensor type: [toggle | chips] */
.trend-type-row {
  display: grid;
  grid-template-columns: 130px 1fr;
  align-items: center;
  gap: 0;
  padding: 6px 12px;
  border-bottom: 1px solid #f1f5f9;
  min-height: 38px;
}

.trend-type-row:last-child { border-bottom: none; }

/* Type toggle button-style label */
.trend-type-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border: 1px solid #bfdbfe;
  border-radius: 6px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  width: fit-content;
  transition: background .12s, border-color .12s;
  user-select: none;
}

.trend-type-toggle:hover { background: #dbeafe; border-color: #93c5fd; }

.trend-type-toggle input[type="checkbox"] {
  accent-color: #2563eb;
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  cursor: pointer;
}

.trend-type-name { pointer-events: none; }

/* Chips row — wrapping (inside type rows) */
.trend-type-chips {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 4px;
  padding-left: 10px;
}

/* Flat chip row — for sections with no type sub-grouping (Energy, Chemical, Equipment) */
.trend-flat-chips {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 12px;
}

html[data-theme="dark"] .trend-flat-chips .trend-chip {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.12);
  color: var(--muted);
}

.trend-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: #fff;
  padding: 0 8px;
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .12s, background .12s, color .12s;
  white-space: nowrap;
  flex-shrink: 0;
}

.trend-chip:hover {
  border-color: #93c5fd;
  color: #1d4ed8;
  background: #eff6ff;
}

.trend-chip:has(input:checked) {
  border-color: #2563eb;
  background: linear-gradient(135deg, #dbeafe 0%, #eff6ff 100%);
  color: #1d4ed8;
  font-weight: 800;
}

.trend-chip input[type="checkbox"] {
  accent-color: #2563eb;
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

.trend-option-mode {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #f7fbff;
  padding: 3px;
  margin-bottom: 4px;
  flex-basis: 100%;
  align-self: flex-start;
  width: fit-content;
}

.trend-option-mode button {
  min-height: 28px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  padding: 0 13px;
  font-weight: 900;
}

.trend-option-mode button.active {
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff;
}

/* Fallback flat label style — only for pages using old direct-child chip pattern */
.trend-options > label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  padding: 0 9px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
}

.inlet-chart {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  padding: 14px 16px;
}

.inlet-chart svg {
  width: 100%;
  height: 260px;
  overflow: visible;
}

.chart-legend {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.chart-legend i {
  width: 10px;
  height: 10px;
  border-radius: 999px;
}

.clear-legend {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.clear-legend strong {
  color: var(--ink);
}

.axis-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.axis-legend span {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  padding: 6px 10px;
}

.axis-legend strong {
  color: var(--brand);
}

.trend-time-axis {
  position: relative;
  display: block;
  width: 100%;
  height: 24px;
  min-width: 0;
  overflow: hidden;
  margin-top: 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.trend-time-axis span {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  min-width: 0;
  max-width: 110px;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trend-tooltip {
  position: fixed;
  z-index: 999;
  display: none;
  max-width: 260px;
  border: 1px solid rgba(0, 168, 200, .35);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 14px 34px rgba(28, 66, 92, .18);
  color: var(--ink);
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 850;
  pointer-events: none;
}

.trend-tooltip.show {
  display: block;
}

/* Laboratory result workflow */
.lab-result-page {
  display: grid;
  gap: 18px;
}

.lab-head-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.lab-entry-panel,
.lab-comparison-panel,
.lab-history-panel {
  overflow: visible;
}

.lab-form-state {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #f7fbff;
  color: var(--brand);
  padding: 7px 11px;
  font-size: 12px;
  font-weight: 850;
}

.lab-sample-grid {
  margin-top: 14px;
}

.lab-file-field small,
.lab-result-page td small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

.lab-parameter-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-top: 24px;
  border-top: 1px solid var(--line);
  padding-top: 18px;
}

.lab-parameter-header h3 {
  margin: 2px 0 5px;
}

.lab-parameter-header p:last-child {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.lab-parameter-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.lab-parameter-row {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(150px, .9fr) minmax(110px, .55fr) minmax(90px, .45fr) minmax(260px, 1.5fr) 38px;
  align-items: end;
  gap: 10px;
  border: 1px solid rgba(0, 116, 173, .16);
  border-radius: 12px;
  background: linear-gradient(135deg, #fbfdff, #f4faff);
  padding: 12px;
}

.lab-parameter-row label {
  min-width: 0;
}

.lab-parameter-row label > span {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.lab-parameter-row input,
.lab-parameter-row select {
  width: 100%;
}

.lab-parameter-index {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-bottom: 5px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}

.lab-remove-parameter {
  width: 34px;
  height: 34px;
  margin-bottom: 2px;
  border: 1px solid rgba(239, 68, 68, .24);
  border-radius: 9px;
  background: #fff5f5;
  color: #dc2626;
  font-size: 20px;
  font-weight: 900;
  cursor: pointer;
}

.lab-remove-parameter:disabled {
  opacity: .35;
  cursor: not-allowed;
}

.lab-form-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 16px;
}

.lab-form-actions p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.lab-result-page td code {
  display: block;
  color: var(--brand);
  font-size: 11px;
  font-weight: 800;
  white-space: normal;
  overflow-wrap: anywhere;
}

.lab-pending-value {
  color: var(--muted);
  font-style: italic;
}

.lab-empty-cell {
  padding: 28px !important;
  color: var(--muted);
  text-align: center;
}

.lab-error-cell {
  color: #dc2626;
}

.lab-history-wrap {
  overflow-x: auto;
}

.lab-history-wrap table {
  min-width: 1050px;
}

.lab-history-details summary {
  color: var(--brand);
  font-weight: 900;
  cursor: pointer;
}

.lab-history-parameter-list {
  display: grid;
  gap: 8px;
  min-width: 330px;
  margin-top: 9px;
}

.lab-history-parameter-list > div {
  display: grid;
  grid-template-columns: minmax(90px, 1fr) repeat(3, auto);
  align-items: center;
  gap: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbfd;
  padding: 8px;
  font-size: 11px;
}

.lab-history-parameter-list > div small {
  grid-column: 1 / -1;
}

.lab-file-links {
  display: grid;
  gap: 4px;
  min-width: 145px;
}

.lab-file-links > span {
  display: flex;
  gap: 6px;
}

.lab-file-links a {
  border: 1px solid rgba(0, 116, 173, .18);
  border-radius: 7px;
  background: #f5fbff;
  color: var(--brand);
  padding: 5px 8px;
  font-size: 11px;
  font-weight: 850;
  text-decoration: none;
}

.lab-no-file {
  color: var(--muted);
  font-size: 12px;
}

html[data-theme="dark"] .lab-form-state,
html[data-theme="dark"] .lab-parameter-row,
html[data-theme="dark"] .lab-history-parameter-list > div,
html[data-theme="dark"] .lab-file-links a {
  background: rgba(15, 35, 51, .82);
}

@media (max-width: 1100px) {
  .lab-parameter-row {
    grid-template-columns: 34px repeat(3, minmax(120px, 1fr)) 38px;
  }

  .lab-sensor-select {
    grid-column: 2 / 5;
  }
}

@media (max-width: 720px) {
  .lab-parameter-header,
  .lab-form-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .lab-parameter-row {
    grid-template-columns: 30px 1fr 36px;
  }

  .lab-parameter-row label,
  .lab-sensor-select {
    grid-column: 2;
  }

  .lab-parameter-index {
    grid-column: 1;
    grid-row: 1;
  }

  .lab-remove-parameter {
    grid-column: 3;
    grid-row: 1;
  }
}

.data-range-label {
  margin-bottom: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7fbff;
  color: var(--brand);
  padding: 9px 11px;
  font-size: 12px;
  font-weight: 850;
}

.trend-realtime-control {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid rgba(0, 116, 173, .18);
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(244, 251, 255, .96)),
    radial-gradient(circle at 100% 0%, rgba(0, 168, 200, .12), transparent 260px);
  box-shadow: 0 12px 32px rgba(0, 84, 135, .08);
  padding: 13px 15px;
}

.trend-realtime-control strong,
.trend-realtime-control span {
  display: block;
}

.trend-realtime-control strong {
  margin-top: 3px;
  font-size: 16px;
}

.trend-realtime-control span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.trend-realtime-control[data-mode="paused"] {
  border-color: rgba(214, 138, 0, .3);
  background: #fff9ea;
}

.trend-realtime-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.trend-realtime-actions button,
.trend-realtime-actions input,
.trend-realtime-actions select {
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  padding: 0 11px;
  font-weight: 850;
}

.trend-realtime-actions button.active {
  border-color: var(--brand);
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff;
}

.trend-realtime-actions button[data-trend-mode="paused"].active {
  border-color: var(--warn);
  background: linear-gradient(135deg, #b86a00, var(--warn));
}

.trend-realtime-actions label {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.filter-pulse {
  animation: filterPulse .55s ease-out;
}

.range-highlight td {
  background: #f1fbff;
}

@keyframes filterPulse {
  0% { box-shadow: 0 0 0 0 rgba(0, 168, 200, .2); }
  100% { box-shadow: 0 0 0 8px rgba(0, 168, 200, 0); }
}

/* ── Trend chart loading indicator — CSS-only via data-loading-dynamic ── */
@keyframes trendLoadSweep {
  0%   { left: -30%; }
  100% { left: 110%; }
}

/* Sweep bar at top of trend section while data is loading */
[data-loading-dynamic="true"] .inlet-trend-panel {
  position: relative;
  overflow: hidden;
}

[data-loading-dynamic="true"] .inlet-trend-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: -30%;
  width: 30%;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--brand-2), transparent);
  animation: trendLoadSweep 1.1s ease-in-out infinite;
  z-index: 30;
}

[data-loading-dynamic="true"] .inlet-trend-panel::after {
  content: "Memuat trend…";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 25;
  background: rgba(248, 252, 255, .72);
  color: var(--brand);
  font-size: 13px;
  font-weight: 850;
  letter-spacing: .02em;
  backdrop-filter: blur(1.5px);
}

[data-loading-dynamic="true"] .trend-realtime-actions button,
[data-loading-dynamic="true"] .trend-realtime-actions select {
  pointer-events: none;
  opacity: .58;
}

html[data-theme="dark"] [data-loading-dynamic="true"] .inlet-trend-panel::after {
  background: rgba(11, 20, 30, .72);
}


.overview-hero,
.flow-card,
.alarm-command,
.energy-command,
.pid-overview,
.efficiency-panel {
  border: 1px solid rgba(188, 212, 226, .8);
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(248, 252, 255, .94)),
    radial-gradient(circle at 100% 0%, rgba(0, 168, 200, .12), transparent 260px);
  box-shadow: var(--glow);
}

.overview-hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  min-height: 150px;
  padding: 24px;
  overflow: hidden;
  position: relative;
}

.overview-hero::after {
  content: "";
  position: absolute;
  inset: auto -80px -120px auto;
  width: 300px;
  height: 300px;
  border: 1px solid rgba(0, 168, 200, .18);
  border-radius: 999px;
}

.overview-hero h2 {
  margin-bottom: 8px;
  font-size: clamp(26px, 4vw, 42px);
}

.overview-hero p {
  max-width: 760px;
  margin-bottom: 0;
  color: var(--muted);
  line-height: 1.5;
}

.hero-score {
  display: grid;
  place-items: center;
  flex: 0 0 154px;
  width: 154px;
  height: 154px;
  border: 1px solid rgba(0, 168, 200, .22);
  border-radius: 999px;
  background:
    radial-gradient(circle, #fff 56%, transparent 57%),
    conic-gradient(var(--ok) 96%, #e6f0f6 0);
  text-align: center;
  z-index: 1;
}

.hero-score span,
.hero-score small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.hero-score strong {
  font-size: 34px;
}

.overview-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 14px;
}

.flow-card {
  grid-column: span 3;
  display: grid;
  gap: 14px;
  min-height: 218px;
  padding: 16px;
}

.flow-card-top,
.flow-rate,
.energy-command,
.alarm-command {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
}

.flow-card span,
.alarm-command span,
.energy-command span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}

.flow-card strong {
  display: block;
  margin-top: 5px;
  font-size: 30px;
}

.flow-rate {
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 10px 12px;
}

.flow-rate strong {
  margin: 0;
  font-size: 20px;
}

.flow-visual {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: #eaf2f7;
}

.flow-visual i {
  display: block;
  width: var(--value);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--brand-2), var(--info));
}

.flow-card p,
.alarm-command p,
.energy-command p,
.donut-card p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.alarm-command {
  grid-column: span 3;
  min-height: 102px;
  padding: 16px;
}

.current-alarm {
  grid-column: span 3;
}

.alarm-number {
  display: grid;
  place-items: center;
  flex: 0 0 58px;
  width: 58px;
  height: 58px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--danger), #ff8c8c);
  color: #fff;
  font-size: 30px;
  font-weight: 900;
}

.alarm-command h3 {
  margin: 5px 0 6px;
  font-size: 17px;
}

.energy-command {
  grid-column: span 3;
  min-height: 218px;
  flex-direction: column;
  padding: 16px;
}

.energy-command strong {
  display: block;
  margin: 7px 0 6px;
  font-size: 34px;
}

.energy-bars {
  display: grid;
  gap: 9px;
  width: 100%;
}

.energy-bars label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.energy-bars i {
  display: block;
  width: var(--value);
  height: 7px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
}

.overview-main {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(360px, .8fr);
  gap: 14px;
}

.pid-overview,
.efficiency-panel {
  padding: 16px;
}

.pid-line {
  display: grid;
  grid-template-columns: repeat(8, minmax(118px, 1fr));
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.pid-node {
  position: relative;
  display: grid;
  gap: 8px;
  min-height: 112px;
  border: 1px solid var(--line);
  border-top: 4px solid var(--ok);
  border-radius: 8px;
  background: #fff;
  padding: 12px;
}

.pid-node:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -11px;
  width: 12px;
  height: 2px;
  background: var(--line-strong);
}

.pid-node.warn {
  border-top-color: var(--warn);
}

.pid-node.info {
  border-top-color: var(--info);
}

.pid-node span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.pid-node strong {
  font-size: 20px;
}

.pid-node small {
  color: var(--muted);
}

.efficiency-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.donut-card {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 12px;
}

.donut {
  display: grid;
  place-items: center;
  width: 82px;
  height: 82px;
  border-radius: 999px;
  background:
    radial-gradient(circle, #fff 55%, transparent 56%),
    conic-gradient(var(--brand-2) calc(var(--score) * 1%), #e7f0f6 0);
}

.donut strong {
  font-size: 18px;
}

.donut-card h3 {
  margin-bottom: 4px;
}

.page-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 16px;
  align-items: start;
}

.full-layout {
  display: grid;
  gap: 16px;
}

.panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, .94);
  box-shadow: var(--glow);
  padding: 16px;
  min-width: 0;
}

.panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.panel-head p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 13px;
}

.panel-filter-stack {
  display: grid;
  justify-items: end;
  gap: 10px;
  max-width: 720px;
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.metric-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  padding: 13px;
  min-height: 112px;
}

.metric-card span,
.list-meta,
.table-note,
.form-note {
  color: var(--muted);
  font-size: 12px;
}

.metric-card strong {
  display: block;
  margin: 9px 0 6px;
  font-size: 26px;
  line-height: 1.1;
}

.progress {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: #edf3f4;
}

.progress i {
  display: block;
  width: var(--value);
  height: 100%;
  border-radius: inherit;
  background: var(--color, var(--ok));
}

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  border-radius: 999px;
  padding: 0 10px;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 850;
}

.badge.ok,
.badge--ok {
  background: var(--soft-ok);
  color: #0d7358;
}

.badge.warn,
.badge--warn {
  background: var(--soft-warn);
  color: #875600;
}

.badge.danger,
.badge--danger {
  background: var(--soft-danger);
  color: #9b2424;
}

.badge.info,
.badge--info {
  background: var(--soft-info);
  color: #245f98;
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.detail-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  padding: 14px;
}

.detail-card h3 {
  margin-bottom: 10px;
}

.detail-card ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 17px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.detail-card li::marker {
  color: var(--brand-2);
}

.spec-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.spec-item {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  padding: 11px 12px;
}

.spec-item span {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.spec-item strong {
  display: block;
  margin-top: 5px;
  font-size: 14px;
}

.summary-card,
.list-item,
.process-node,
.form-row,
.timeline-item {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}

.summary-card {
  padding: 14px;
}

.summary-card p,
.list-item p,
.process-node p,
.timeline-item p {
  margin-bottom: 0;
  color: var(--muted);
  line-height: 1.45;
  font-size: 13px;
}

.side-stack {
  display: grid;
  gap: 12px;
}

.list {
  display: grid;
  gap: 10px;
}

.list-item {
  padding: 12px;
}

.list-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.list-title {
  font-weight: 850;
}

.table-wrap {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.summary-grid + .table-wrap,
.summary-grid + .form-grid,
.summary-grid + .timeline {
  margin-top: 12px;
}

/* Table pagination controls */
.table-pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 8px 4px 4px;
}

.table-pagination .tpag-info {
  font-size: 12px;
  color: var(--muted);
  min-width: 120px;
  text-align: center;
}

.table-pagination button {
  height: 30px;
  padding: 0 14px;
  border-radius: 7px;
  border: 1px solid var(--line);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  background: #fff;
  color: var(--brand);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.table-pagination button:hover:not(:disabled) {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}

.table-pagination button:disabled {
  opacity: 0.35;
  cursor: default;
}

html[data-theme="dark"] .table-pagination button {
  background: #1e293b;
  color: #93c5fd;
  border-color: #334155;
}

html[data-theme="dark"] .table-pagination button:hover:not(:disabled) {
  background: #2563eb;
  color: #fff;
  border-color: #2563eb;
}

table {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
  background: #fff;
}

th,
td {
  border-bottom: 1px solid var(--line);
  padding: 11px 12px;
  text-align: left;
  vertical-align: top;
  font-size: 13px;
}

th {
  background: #f5faff;
  color: #405565;
  font-size: 12px;
  text-transform: uppercase;
}

tr:last-child td {
  border-bottom: 0;
}

.process-map {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 12px;
}

.process-node {
  position: relative;
  min-height: 118px;
  padding: 13px;
  border-top: 5px solid var(--ok);
}

.process-node.warn {
  border-top-color: var(--warn);
}

.process-node.danger {
  border-top-color: var(--danger);
}

.process-node.info {
  border-top-color: var(--info);
}

.process-node.manual {
  border-top-color: var(--purple);
}

.process-value {
  margin: 8px 0 5px;
  font-size: 22px;
  font-weight: 900;
}

.branch-box {
  margin-top: 12px;
  border: 1px dashed var(--line-strong);
  border-radius: 8px;
  background: #fbfdfd;
  padding: 12px;
}

.branch-line {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.branch-line span {
  display: grid;
  place-items: center;
  min-height: 44px;
  border-radius: 7px;
  background: #eef5f6;
  color: #254653;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
  padding: 7px;
}

.chart-card {
  min-height: 270px;
}
.chart-card svg {
  overflow: visible;
}

.chart {
  width: 100%;
  height: 220px;
}

.grid-line {
  stroke: #dbe5ea;
  stroke-width: 1;
}

.y-grid-line {
  stroke: #e2e8f0;
  stroke-width: 1;
  stroke-dasharray: 5 4;
}

.y-axis-tick {
  fill: #475569;
  font-size: 11px;
  font-weight: 600;
  paint-order: stroke fill;
  stroke: rgba(255, 255, 255, .85);
  stroke-width: 3px;
  stroke-linejoin: round;
}

.chart-line {
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  cursor: crosshair;
  transition: stroke-width .15s, opacity .15s;
}

.chart-line:hover {
  stroke-width: 3.5;
  opacity: .88;
}

.chart-line.is-hidden {
  display: none;
}

.inlet-chart,
.chart-card {
  position: relative;
}

.trend-chart-empty {
  position: absolute;
  z-index: 3;
  inset: 54px 7% 50px;
  display: grid;
  place-content: center;
  gap: 4px;
  border: 1px dashed rgba(100, 116, 139, .32);
  border-radius: 12px;
  background: rgba(248, 250, 252, .88);
  color: var(--muted);
  text-align: center;
  pointer-events: none;
}

.trend-chart-empty strong {
  color: var(--ink);
  font-size: 13px;
}

.trend-chart-empty span {
  font-size: 11px;
}

html[data-theme="dark"] .trend-chart-empty {
  background: rgba(15, 35, 51, .88);
}

.chart-fill {
  fill: rgba(31, 157, 122, .12);
}

.chart-bar {
  cursor: crosshair;
  transition: opacity .15s, transform .1s;
  transform-box: fill-box;
  transform-origin: bottom;
}

.chart-bar:hover {
  opacity: 1 !important;
  filter: brightness(1.15);
}

.chart-bar-group {
  pointer-events: all;
}

.overview-bar-chart .overview-bar-layer {
  pointer-events: all;
}

.overview-management-bar {
  opacity: .86;
}

.overview-management-bar:hover {
  opacity: 1;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.form-row {
  display: grid;
  gap: 6px;
  padding: 11px;
}

.form-row label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.form-row input,
.form-row select,
.form-row textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  padding: 9px 10px;
  color: var(--ink);
}

.form-row textarea {
  min-height: 82px;
  resize: vertical;
}

.timeline {
  display: grid;
  gap: 10px;
}

.timeline-item {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 12px;
  padding: 12px;
}

.timeline-time {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.locked {
  opacity: .72;
}

.empty-state {
  border: 1px dashed var(--line-strong);
  border-radius: 8px;
  background: #fbfdfd;
  padding: 18px;
  color: var(--muted);
  text-align: center;
}

.login-screen {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: clamp(16px, 4vw, 32px);
  overflow: auto;
  background:
    linear-gradient(90deg, rgba(11, 95, 122, .05) 1px, transparent 1px),
    linear-gradient(180deg, rgba(11, 95, 122, .05) 1px, transparent 1px),
    linear-gradient(135deg, #ffffff 0%, #f6fafc 48%, #edf5f8 100%);
  background-size: 42px 42px, 42px 42px, auto;
}

.login-screen.hidden {
  display: none;
}

.login-header-title {
  display: block;
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 2;
}

.login-header-title span {
  color: var(--brand);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .08em;
  line-height: 1.35;
  text-transform: uppercase;
}

.login-header-title strong {
  display: none;
}

.login-visual {
  display: none;
}

.login-plant-card {
  display: grid;
  gap: 4px;
  border: 1px solid rgba(185, 205, 219, .92);
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(0, 148, 184, .12), transparent 34%),
    rgba(255, 255, 255, .9);
  box-shadow: 0 24px 70px rgba(31, 76, 98, .12);
  padding: 10px 12px;
}

.login-plant-card span,
.login-role-note span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.login-plant-card strong {
  color: var(--ink);
  font-size: 16px;
  line-height: 1.15;
}

.login-plant-card small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.login-status-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.login-status-grid div {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 54px;
  border: 1px solid rgba(185, 205, 219, .82);
  border-radius: 10px;
  background: rgba(255, 255, 255, .82);
  color: var(--ink);
  padding: 10px;
  font-size: 12px;
  font-weight: 850;
}

.login-status-grid span {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--ok);
  box-shadow: 0 0 0 5px rgba(31, 157, 122, .12);
}

.login-card {
  width: min(460px, 100%);
  max-width: 100%;
  display: grid;
  gap: clamp(12px, 2vw, 16px);
  grid-row: 1;
  justify-self: center;
  align-self: center;
  z-index: 1;
  border: 1px solid rgba(160, 188, 206, .95);
  border-radius: 16px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 30px 90px rgba(23, 64, 88, .18);
  padding: clamp(18px, 3vw, 28px);
  backdrop-filter: blur(20px);
}

.login-card h1 {
  font-size: clamp(20px, 2.4vw, 26px);
}

.login-header-title {
  max-width: calc(100% - 48px);
}

.login-header-title span {
  font-size: clamp(11px, 1.3vw, 13px);
}

/* Auth Modal (register + alert popups) */
.auth-modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: grid;
  place-items: center;
  padding: clamp(12px, 3vw, 24px);
}

.auth-modal.hidden {
  display: none;
}

.auth-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 35, 55, .55);
  backdrop-filter: blur(6px);
}

.auth-modal-content {
  position: relative;
  z-index: 1;
  width: min(480px, 100%);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 30px 80px rgba(15, 35, 55, .35);
  overflow: hidden;
}

.auth-modal-content-sm {
  width: min(420px, 100%);
}

.auth-modal-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  padding: 18px 20px 14px;
}

.auth-modal-head h2 {
  margin: 2px 0 0;
  font-size: clamp(17px, 2vw, 20px);
}

.auth-modal-head .eyebrow {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.auth-modal-close {
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.auth-modal-close:hover {
  background: var(--soft-danger);
  color: var(--danger);
  border-color: rgba(216, 68, 68, .3);
}

.auth-modal-body {
  display: grid;
  gap: 12px;
  overflow-y: auto;
  padding: 18px 20px;
}

.auth-modal-body label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.auth-modal-body input,
.auth-modal-body select {
  width: 100%;
  height: 44px;
  border: 1px solid rgba(187, 207, 220, .95);
  border-radius: 9px;
  background: #fbfdfe;
  color: var(--ink);
  padding: 0 12px;
  font-size: 14px;
  font-weight: 750;
}

.auth-modal-body input:focus,
.auth-modal-body select:focus {
  outline: 2px solid rgba(0, 148, 184, .18);
  border-color: var(--brand);
  background: #fff;
}

.auth-modal-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  border-top: 1px solid var(--line);
  padding: 14px 20px;
}

/* Smaller mobile login adjustments */
@media (max-width: 560px) {
  .login-header-title {
    position: static;
    margin-bottom: 8px;
    text-align: center;
  }

  .login-card {
    padding: 18px 16px;
  }

  .login-card h1 {
    font-size: 19px;
  }

  .login-brand {
    padding-bottom: 12px;
  }

  .auth-modal-actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .auth-modal-actions .primary-button,
  .auth-modal-actions .ghost-button {
    width: 100%;
  }
}

.login-register-toggle {
  width: 100%;
}

.register-panel {
  display: grid;
  gap: 12px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.register-panel.hidden {
  display: none;
}

.register-panel select {
  width: 100%;
  height: 46px;
  border: 1px solid rgba(187, 207, 220, .95);
  border-radius: 9px;
  background: #fbfdfe;
  color: var(--ink);
  padding: 0 12px;
  font-size: 14px;
  font-weight: 750;
}

.login-brand {
  padding: 0 0 16px;
  border-bottom: 1px solid var(--line);
}

.login-card h1 {
  margin: 3px 0 8px;
  font-size: 26px;
}

.login-note {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.login-error {
  min-height: 18px;
  margin: 0;
  color: var(--danger);
  font-size: 12px;
  font-weight: 850;
}

.login-card label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.login-card input {
  width: 100%;
  height: 46px;
  border: 1px solid rgba(187, 207, 220, .95);
  border-radius: 9px;
  background: #fbfdfe;
  color: var(--ink);
  padding: 0 12px;
  font-size: 14px;
  font-weight: 750;
}

.login-card input:focus {
  outline: 2px solid rgba(0, 148, 184, .18);
  border-color: var(--brand);
  background: #fff;
}

.password-field {
  position: relative;
}

.password-field input {
  padding-right: 72px;
}

.password-field button {
  position: absolute;
  top: 7px;
  right: 7px;
  min-width: 56px;
  height: 32px;
  border: 1px solid rgba(0, 103, 136, .22);
  border-radius: 7px;
  background: var(--soft-info);
  color: var(--brand);
  font-size: 11px;
  font-weight: 900;
}

.login-role-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid rgba(187, 207, 220, .9);
  border-radius: 10px;
  background: #f8fbfc;
  padding: 11px 12px;
}

.login-role-note strong {
  color: var(--brand);
  font-size: 12px;
}

.config-table-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.config-process-card {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(0, 168, 200, .08), transparent 42%),
    #fff;
  padding: 12px;
}

.config-process-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.config-process-head span,
.config-sensor-row span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
}

.config-process-head strong {
  display: block;
  margin-top: 4px;
  font-size: 16px;
}

.config-sensor-list {
  display: grid;
  gap: 9px;
}

.config-sensor-row {
  display: grid;
  grid-template-columns: minmax(150px, 1.4fr) repeat(6, minmax(76px, 1fr));
  gap: 8px;
  align-items: end;
  border: 1px solid rgba(220, 232, 240, .9);
  border-radius: 8px;
  background: rgba(255, 255, 255, .78);
  padding: 8px;
}

.config-sensor-row label {
  display: grid;
  gap: 5px;
}

.sensor-setting-intro {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--soft-info);
  padding: 12px;
}

.sensor-setting-intro strong {
  display: block;
  margin-bottom: 4px;
}

.sensor-setting-intro p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.sensor-config-workbench {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.sensor-config-workbench.collapsed {
  display: none;
}

.sensor-config-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 12px;
}

.sensor-process-list {
  display: grid;
  align-content: start;
  gap: 8px;
}

.sensor-process-list button {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-height: 50px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  color: var(--ink);
  padding: 8px;
  text-align: left;
}

.sensor-process-list button.active {
  border-color: var(--brand);
  background: linear-gradient(135deg, rgba(0, 168, 200, .12), #fff);
  box-shadow: inset 3px 0 0 var(--brand);
}

.sensor-process-list span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff;
  font-size: 11px;
  font-weight: 900;
}

.sensor-process-list strong {
  min-width: 0;
  font-size: 13px;
}

.sensor-process-list small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.sensor-config-detail {
  min-width: 0;
}

.sensor-process-panel,
.sensor-unit-editor {
  display: none;
}

.sensor-process-panel.active,
.sensor-unit-editor.active {
  display: grid;
  gap: 12px;
}

.sensor-process-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  padding: 12px;
}

.sensor-process-heading h3 {
  margin: 3px 0 0;
  font-size: 17px;
}

.sensor-unit-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sensor-unit-tabs button {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--brand);
  padding: 0 12px;
  font-size: 12px;
  font-weight: 850;
}

.sensor-unit-tabs button.active {
  border-color: var(--brand);
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff;
}

.sensor-editor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
}

.sensor-editor-head span,
.sensor-threshold-grid span,
.sensor-editor-title span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
}

.sensor-editor-head strong {
  display: block;
  margin-top: 3px;
  color: var(--ink);
  font-size: 16px;
}

.sensor-editor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.sensor-editor-card {
  display: grid;
  gap: 10px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  padding: 12px;
}

.sensor-editor-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.sensor-threshold-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

/* Equipment threshold grid — 4 cols instead of 5 (no Setpoint) */
.sensor-threshold-grid.no-setpoint {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Equipment card styling — warmer accent to distinguish from sensor cards */
.sensor-editor-card.equipment-card {
  border-left: 4px solid var(--warn);
  background: linear-gradient(135deg, rgba(214, 138, 0, .04), rgba(255, 255, 255, .98));
}

html[data-theme="dark"] .sensor-editor-card.equipment-card {
  border-left-color: var(--warn);
  background: linear-gradient(135deg, rgba(240, 169, 58, .06), rgba(255, 255, 255, .03));
}

.sensor-threshold-grid label {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.sensor-threshold-grid input {
  width: 100%;
  min-width: 0;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  color: var(--ink);
  padding: 0 8px;
}

.setpoint-card.config-linked {
  border-color: var(--line);
  background: #fff;
}

.setpoint-card.config-linked strong {
  color: var(--ink);
}

.user-management-page {
  display: grid;
  gap: 16px;
}

.user-admin-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr);
  gap: 16px;
}

.user-form-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.user-form-grid label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.user-form-grid input,
.user-form-grid select {
  width: 100%;
  min-width: 0;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  padding: 0 10px;
}

.trend-options label.trend-option-hidden,
.trend-options label[hidden] {
  display: none !important;
}

.trend-options label.sv-trend-option {
  border-color: rgba(0, 116, 173, .22);
  background: #f0f8ff;
  color: var(--brand);
  font-size: 11px;
  height: 26px;
  border-radius: 6px;
}

/* Inside a collapsible drawer the items stack vertically — override pill height/radius
   so each Limit row looks like a compact list item, not a stretched pill.
   Only apply display:flex to visible labels; hidden sub-labels must stay display:none. */
.trend-param-drawer .trend-options label.sv-trend-option:not(.trend-option-hidden) {
  display: flex;
  height: auto;
  min-height: 0;
  border-radius: 6px;
  padding: 6px 12px;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
}

/* Small heading inside the drawer when Limit mode is active */
.trend-param-drawer .trend-options[data-active-trend-mode="sv"]::before {
  content: "Pilih Limit Parameter";
  display: block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  padding: 2px 0 6px;
  order: -1;
}

/* Data trend lines are SOLID. Limit (HiHi/Hi/Lo/LoLo) lines are dashed for easy distinction. */
.dynamic-chart-line.sv-trend-line {
  stroke-dasharray: 6 5;
  stroke-width: 1.5;
  opacity: .8;
}

/* Limit option labels — color-coded per type */
.trend-options label.sv-trend-option:has(input[data-limit-type="hihi"]) { border-color: rgba(239,68,68,.3); background: #fff5f5; color: #ef4444; }
.trend-options label.sv-trend-option:has(input[data-limit-type="hi"])   { border-color: rgba(245,158,11,.3); background: #fffbf0; color: #d97706; }
.trend-options label.sv-trend-option:has(input[data-limit-type="lo"])   { border-color: rgba(59,130,246,.3); background: #eff6ff; color: #3b82f6; }
.trend-options label.sv-trend-option:has(input[data-limit-type="lolo"]) { border-color: rgba(139,92,246,.3); background: #f5f3ff; color: #8b5cf6; }

/* ══════════════════════════════════════════════
   Quality Compliance Report Page
   ══════════════════════════════════════════════ */
.quality-report-page { display: flex; flex-direction: column; gap: 14px; }

.qr-placeholder { padding: 28px 20px; text-align: center; color: var(--muted); font-size: 13px; }


/* ── Summary strip ── */
.qr-summary-strip {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
.qr-summary-inner {
  display: flex;
  gap: 0;
  align-items: stretch;
}

/* Main overall card */
.qr-stat-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 24px;
  min-width: 200px;
  border-right: 1px solid var(--line);
  position: relative;
}
.qr-stat-main::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  border-radius: 12px 0 0 12px;
  background: var(--line);
}
.qr-stat-main.qr-comp-good::before { background: #10b981; }
.qr-stat-main.qr-comp-warn::before { background: #f59e0b; }
.qr-stat-main.qr-comp-bad::before  { background: #ef4444; }

.qr-stat-top { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; }
.qr-stat-icon {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 900;
  background: var(--line);
  color: var(--muted);
}
.qr-comp-good .qr-stat-icon { background: rgba(16,185,129,.15); color: #059669; }
.qr-comp-warn .qr-stat-icon { background: rgba(245,158,11,.15); color: #d97706; }
.qr-comp-bad  .qr-stat-icon { background: rgba(239,68,68,.15);  color: #dc2626; }
.qr-stat-status { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.qr-comp-good .qr-stat-status { color: #059669; }
.qr-comp-warn .qr-stat-status { color: #d97706; }
.qr-comp-bad  .qr-stat-status { color: #dc2626; }

.qr-stat-val { font-size: 34px; font-weight: 800; line-height: 1; color: var(--text); letter-spacing: -.02em; }
.qr-comp-good .qr-stat-val { color: #059669; }
.qr-comp-warn .qr-stat-val { color: #d97706; }
.qr-comp-bad  .qr-stat-val { color: #dc2626; }
.qr-stat-label { font-size: 11px; color: var(--muted); font-weight: 500; }

.qr-stat-bar {
  height: 5px;
  background: rgba(var(--brand-rgb,11,79,122),.08);
  border-radius: 99px;
  overflow: hidden;
  margin-top: 4px;
  width: 100%;
}
.qr-stat-fill {
  height: 100%;
  border-radius: 99px;
  background: var(--line);
  transition: width .5s ease;
}
.qr-stat-fill.qr-comp-good { background: #10b981; }
.qr-stat-fill.qr-comp-warn { background: #f59e0b; }
.qr-stat-fill.qr-comp-bad  { background: #ef4444; }

.qr-stat-date { font-size: 10px; color: var(--muted); margin-top: 2px; }

/* Meta stats (sensors + processes) */
.qr-stat-meta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  padding: 0;
  min-width: 120px;
  border-right: 1px solid var(--line);
}
.qr-meta-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 14px 20px;
  flex: 1;
}
.qr-meta-divider { height: 1px; background: var(--line); margin: 0 12px; }
.qr-meta-icon { font-size: 14px; color: var(--muted); }
.qr-meta-val  { font-size: 24px; font-weight: 800; color: var(--text); line-height: 1.1; }
.qr-meta-label { font-size: 10px; color: var(--muted); text-align: center; }

/* Per-process badges */
.qr-process-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  flex: 1;
  align-items: stretch;
}
.qr-proc-badge {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 16px;
  min-width: 110px;
  border-right: 1px solid var(--line);
  position: relative;
}
.qr-proc-badge::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--line);
  border-radius: 0;
}
.qr-proc-badge.qr-comp-good::before { background: #10b981; }
.qr-proc-badge.qr-comp-warn::before { background: #f59e0b; }
.qr-proc-badge.qr-comp-bad::before  { background: #ef4444; }
.qr-proc-badge:last-child { border-right: none; }

.qr-pb-name {
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
}
.qr-pb-val { font-size: 20px; font-weight: 800; color: var(--text); line-height: 1.1; }
.qr-comp-good .qr-pb-val { color: #059669; }
.qr-comp-warn .qr-pb-val { color: #d97706; }
.qr-comp-bad  .qr-pb-val { color: #dc2626; }

.qr-pb-bar {
  height: 4px;
  background: rgba(var(--brand-rgb,11,79,122),.08);
  border-radius: 99px;
  overflow: hidden;
}
.qr-pb-fill {
  height: 100%;
  border-radius: 99px;
  background: var(--line);
  transition: width .5s ease;
}
.qr-pb-fill.qr-comp-good { background: #10b981; }
.qr-pb-fill.qr-comp-warn { background: #f59e0b; }
.qr-pb-fill.qr-comp-bad  { background: #ef4444; }

.qr-pb-meta { font-size: 10px; color: var(--muted); }

/* ── Table ── */
.qr-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.qr-table th {
  background: var(--panel);
  padding: 9px 12px;
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
  border-bottom: 2px solid var(--line);
  border-right: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 1;
  white-space: nowrap;
}
.qr-table th:last-child { border-right: none; }
.qr-table td { padding: 7px 12px; border-bottom: 1px solid var(--line); border-right: 1px solid rgba(var(--brand-rgb,11,79,122),.06); vertical-align: middle; }
.qr-table td:last-child { border-right: none; }
.qr-table td.num  { text-align: right; font-variant-numeric: tabular-nums; }
.qr-table td.muted { color: var(--muted); }

/* Process group header row */
.qr-process-header-row td {
  background: var(--brand);
  color: #fff;
  padding: 9px 14px;
  border-bottom: none;
  border-right: 1px solid rgba(255,255,255,.15);
}
.qr-process-header-row:first-child td { border-top: none; }
.qr-process-header-label {
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .04em;
  text-align: left;
}
.qr-process-header-comp {
  font-size: 14px;
  font-weight: 900;
  color: #fff !important;
  text-align: right;
}

/* Data rows */
.qr-process-cell {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  border-left: 3px solid var(--brand) !important;
  background: rgba(var(--brand-rgb, 11,79,122), .03);
  white-space: nowrap;
  max-width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.qr-unit-cell {
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  border-right: 2px solid var(--line) !important;
  white-space: nowrap;
}
.qr-sensor-row:hover td { background: rgba(var(--brand-rgb,11,79,122),.04); }
.qr-sensor-row td:first-child { border-left: 3px solid var(--brand) !important; }

.qr-unit-total-row td {
  background: rgba(var(--brand-rgb,11,79,122),.04);
  font-size: 11px;
  font-weight: 600;
  border-top: 1px solid var(--line);
  border-bottom: 2px solid rgba(var(--brand-rgb,11,79,122),.2);
}
.qr-unit-total-row td:first-child { border-left: 3px solid rgba(var(--brand-rgb,11,79,122),.3) !important; }

/* Compliance cell colours */
.qr-comp-cell { font-weight: 700; }
.qr-comp-good { color: #059669; }
.qr-comp-warn { color: #d97706; }
.qr-comp-bad  { color: #dc2626; }
.qr-comp-none { color: var(--muted); }

/* Dark mode */
html[data-theme="dark"] .qr-process-cell { background: rgba(255,255,255,.03); }
html[data-theme="dark"] .qr-unit-total-row td { background: rgba(255,255,255,.04); }
html[data-theme="dark"] .qr-sensor-row:hover td { background: rgba(255,255,255,.04); }
html[data-theme="dark"] .qr-summary-strip { background: rgba(255,255,255,.02); }
html[data-theme="dark"] .qr-stat-main { background: rgba(255,255,255,.02); }
html[data-theme="dark"] .qr-proc-badge { background: rgba(255,255,255,.01); }
html[data-theme="dark"] .qr-stat-bar { background: rgba(255,255,255,.08); }
html[data-theme="dark"] .qr-pb-bar   { background: rgba(255,255,255,.08); }

/* History pivot table */
.qrh-table th { text-align: center; }
.qrh-table td { text-align: center; }
.qrh-date-col { text-align: left !important; white-space: nowrap; font-weight: 600; min-width: 90px; }
.qrh-date-cell { text-align: left !important; font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.qrh-proc-col { background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%) !important; color: #fff !important; border-right: 2px solid rgba(255,255,255,.2); }
.qrh-unit-header th { background: rgba(var(--brand-rgb,11,79,122),.07) !important; font-size: 9px !important; font-weight: 600 !important; border-right: 1px solid var(--line); }
.qrh-unit-col { border-right: 1px solid var(--line); min-width: 72px; }
.qrh-proc-total-row td { background: rgba(var(--brand-rgb,11,79,122),.04); border-top: 2px solid var(--brand); border-bottom: 2px solid var(--brand); }
.qrh-proc-total-cell { border-right: 2px solid var(--line); }
.qrh-proc-total-row .qrh-date-cell { font-weight: 700; color: var(--brand); }
.qrh-table tbody tr:hover td { background: rgba(var(--brand-rgb,11,79,122),.05); }
html[data-theme="dark"] .qrh-proc-total-row td { background: rgba(255,255,255,.04); }
html[data-theme="dark"] .qrh-unit-header th { background: rgba(255,255,255,.05) !important; }

.user-action-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
}

.user-action-row span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.user-action-row span[data-type="ok"] {
  color: var(--ok);
}

.user-action-row span[data-type="danger"] {
  color: var(--danger);
}

.role-access-list {
  display: grid;
  gap: 9px;
}

.role-access-list div {
  display: grid;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 10px;
}

.role-access-list span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.danger-button {
  border-color: rgba(216, 68, 68, .26);
  color: var(--danger);
  background: var(--soft-danger);
}

.user-table-wrap td .badge {
  min-width: 86px;
}

.sensor-config-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  padding: 12px;
}

.sensor-config-action-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.sensor-config-actions span,
.sensor-config-actions strong {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.sensor-config-actions strong {
  min-height: 16px;
}

.sensor-config-actions strong[data-type="info"] { color: var(--info); }
.sensor-config-actions strong[data-type="ok"] { color: var(--ok); }
.sensor-config-actions strong[data-type="danger"] { color: var(--danger); }
.sensor-config-actions strong[data-type="warn"] { color: var(--warn); }

.master-limit-editor {
  display: grid;
  gap: 12px;
  border-top: 1px solid var(--line);
  margin-top: 16px;
  padding-top: 16px;
}

.master-limit-card .sensor-editor-title small,
.equipment-limit-metric small {
  display: block;
  max-width: 100%;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.equipment-limit-metric-grid {
  display: grid;
  gap: 10px;
}

.equipment-limit-metric {
  display: grid;
  grid-template-columns: minmax(180px, .8fr) minmax(0, 1.2fr);
  align-items: end;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 10px;
}

.compact-threshold {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.config-edit-card {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(0, 168, 200, .08), transparent 44%),
    #fff;
  padding: 12px;
}

.config-edit-card div,
.config-edit-card label {
  display: grid;
  gap: 6px;
}

.config-edit-card span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.config-edit-card strong {
  align-self: center;
  font-size: 15px;
}

.config-edit-card input,
.tool-form-panel table input,
.tool-form-panel table select {
  width: 100%;
  min-width: 118px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  color: var(--ink);
  padding: 0 9px;
}

.config-edit-card .wide {
  grid-column: span 3;
}

.tool-form-panel.locked input,
.tool-form-panel.locked select,
.tool-form-panel.locked button {
  cursor: not-allowed;
}

.alarm-page {
  display: grid;
  gap: 16px;
}

[data-alarm-bar-chart] {
  padding: 4px 12px 8px;
  overflow-x: auto;
}

[data-alarm-bar-chart] svg {
  min-width: 400px;
}

.aeration-page {
  display: grid;
  gap: 16px;
}

.aeration-page .equipment-process-list {
  display: grid;
  gap: 12px;
}

.aer-motor-on-btn, .aer-motor-off-btn {
  font-size: 11px;
  font-weight: 700;
  border-radius: 6px;
  border: 1px solid;
  padding: 4px 8px;
  cursor: pointer;
  transition: opacity .15s;
}

.aer-motor-on-btn:disabled, .aer-motor-off-btn:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.alarm-donut {
  background:
    radial-gradient(circle, #fff 0 55%, transparent 56%),
    conic-gradient(var(--danger) 0 8%, var(--warn) 8% 75%, var(--info) 75% 100%);
}

[data-alarm-donut] {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

[data-alarm-donut] strong {
  font-size: 26px !important;
  max-width: 80% !important;
  overflow: visible !important;
  white-space: nowrap !important;
  text-overflow: clip !important;
  line-height: 1 !important;
  align-self: auto !important;
  margin-top: 0 !important;
}

[data-alarm-donut] span {
  font-size: 11px !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  align-self: auto !important;
  margin-top: 0 !important;
  max-width: none !important;
}

.critical-alarm-banner {
  position: fixed;
  z-index: 1000;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: min(1120px, calc(100vw - 24px));
  border: 1px solid rgba(216, 68, 68, .38);
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(216, 68, 68, .12), rgba(255, 255, 255, .96) 45%),
    #fff;
  box-shadow: 0 20px 60px rgba(119, 28, 28, .18);
  padding: 12px 14px;
}

.critical-alarm-copy {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.critical-alarm-copy strong {
  color: var(--danger);
}

.critical-alarm-copy p {
  margin: 3px 0 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.critical-alarm-copy small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.alarm-pulse {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: var(--danger);
  box-shadow: 0 0 0 8px rgba(216, 68, 68, .12);
  animation: alarmPulse 1.2s infinite;
}

.critical-alarm-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  justify-content: flex-end;
}

.alarm-queue-badge {
  min-width: 48px;
  border: 1px solid rgba(216, 68, 68, .24);
  border-radius: 999px;
  background: rgba(216, 68, 68, .08);
  color: var(--danger);
  padding: 8px 10px;
  text-align: center;
  font-size: 12px;
  font-weight: 900;
}

.ack-critical-button {
  min-height: 34px;
  border: 1px solid rgba(216, 68, 68, .36);
  border-radius: 8px;
  background: var(--danger);
  color: #fff;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 900;
}

@keyframes alarmPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(216, 68, 68, .32);
  }
  100% {
    box-shadow: 0 0 0 12px rgba(216, 68, 68, 0);
  }
}

.active-alarm-list {
  display: grid;
  gap: 10px;
}

.active-alarm-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line);
  border-left: 5px solid var(--warn);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(214, 138, 0, .08), transparent 34%),
    #fff;
  padding: 12px;
  box-shadow: var(--shadow);
}

.active-alarm-card.critical,
.active-alarm-card.danger {
  border-left-color: var(--danger);
  background:
    linear-gradient(90deg, rgba(216, 68, 68, .09), transparent 34%),
    #fff;
}

.active-alarm-card.warning {
  border-left-color: var(--warn);
}

.active-alarm-card span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}

.active-alarm-card h3 {
  margin: 4px 0;
  font-size: 17px;
}

.active-alarm-card p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.active-alarm-card.acknowledged,
.acknowledged-row {
  opacity: .68;
}

.ack-button {
  white-space: nowrap;
}

.ack-button:disabled {
  cursor: default;
  border-color: var(--ok);
  background: var(--soft-ok);
  color: var(--ok);
}

.action-confirmed {
  border-color: var(--ok) !important;
  background: var(--soft-ok) !important;
  color: var(--ok) !important;
}

.diagram-sensors [data-sensor-tag].has-db-value {
  border-color: rgba(0, 168, 120, .28);
  background: var(--soft-ok);
}

.diagram-sensors [data-sensor-tag].missing-db-value {
  opacity: .62;
}

/* Neutral = thresholds explicitly cleared → clean white/near-white, no alert tint */
[data-sensor-tag].sensor-health-neutral,
.diagram-sensors [data-sensor-tag].sensor-health-neutral,
.line-point [data-sensor-tag].sensor-health-neutral,
.inlet-line-meta [data-sensor-tag].sensor-health-neutral,
.inline-master-sensor.sensor-health-neutral,
.overview-kpi-card.sensor-health-neutral,
.overview-total-card.sensor-health-neutral,
.metric-card.sensor-health-neutral,
.compliance-summary-card.sensor-health-neutral,
.energy-summary-grid article.sensor-health-neutral,
.process-summary-grid article.sensor-health-neutral,
.equipment-card.sensor-health-neutral,
.equipment-detail-grid article.sensor-health-neutral,
.maintenance-life-card.sensor-health-neutral,
.setpoint-card.sensor-health-neutral {
  border-color: #e2e8f0 !important;
  background: #ffffff !important;
  color: #334155 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.06) !important;
}

[data-sensor-tag].sensor-health-normal,
.diagram-sensors [data-sensor-tag].sensor-health-normal,
.line-point [data-sensor-tag].sensor-health-normal,
.inlet-line-meta [data-sensor-tag].sensor-health-normal,
.inline-master-sensor.sensor-health-normal,
.overview-kpi-card.sensor-health-normal,
.overview-total-card.sensor-health-normal,
.metric-card.sensor-health-normal,
.compliance-summary-card.sensor-health-normal,
.energy-summary-grid article.sensor-health-normal,
.process-summary-grid article.sensor-health-normal,
.equipment-card.sensor-health-normal,
.equipment-detail-grid article.sensor-health-normal,
.maintenance-life-card.sensor-health-normal,
.setpoint-card.sensor-health-normal {
  border-color: rgba(0, 168, 200, .50) !important;
  background: rgba(0, 168, 200, .06) !important;
  box-shadow: inset 0 0 0 1px rgba(0, 168, 200, .15);
}

[data-sensor-tag].sensor-health-stale,
.diagram-sensors [data-sensor-tag].sensor-health-stale,
.line-point [data-sensor-tag].sensor-health-stale,
.inlet-line-meta [data-sensor-tag].sensor-health-stale,
.inline-master-sensor.sensor-health-stale,
.overview-kpi-card.sensor-health-stale,
.overview-total-card.sensor-health-stale,
.metric-card.sensor-health-stale,
.compliance-summary-card.sensor-health-stale,
.energy-summary-grid article.sensor-health-stale,
.process-summary-grid article.sensor-health-stale,
.equipment-card.sensor-health-stale,
.equipment-detail-grid article.sensor-health-stale,
.maintenance-life-card.sensor-health-stale,
.setpoint-card.sensor-health-stale {
  border-color: #cbd5df !important;
  background: #f1f4f7 !important;
  color: #6b7480 !important;
  box-shadow: inset 0 0 0 1px rgba(107, 116, 128, .10);
}

[data-sensor-tag].sensor-health-noise,
.diagram-sensors [data-sensor-tag].sensor-health-noise,
.line-point [data-sensor-tag].sensor-health-noise,
.inlet-line-meta [data-sensor-tag].sensor-health-noise,
.inline-master-sensor.sensor-health-noise,
.overview-kpi-card.sensor-health-noise,
.overview-total-card.sensor-health-noise,
.metric-card.sensor-health-noise,
.compliance-summary-card.sensor-health-noise,
.energy-summary-grid article.sensor-health-noise,
.process-summary-grid article.sensor-health-noise,
.equipment-card.sensor-health-noise,
.equipment-detail-grid article.sensor-health-noise,
.maintenance-life-card.sensor-health-noise,
.setpoint-card.sensor-health-noise {
  border-color: rgba(122, 88, 216, .48) !important;
  background: #f4f0ff !important;
  color: #5636aa !important;
  box-shadow: inset 0 0 0 1px rgba(122, 88, 216, .14);
}

[data-sensor-tag].sensor-health-warning,
.diagram-sensors [data-sensor-tag].sensor-health-warning,
.line-point [data-sensor-tag].sensor-health-warning,
.inlet-line-meta [data-sensor-tag].sensor-health-warning,
.inline-master-sensor.sensor-health-warning,
.overview-kpi-card.sensor-health-warning,
.overview-total-card.sensor-health-warning,
.metric-card.sensor-health-warning,
.compliance-summary-card.sensor-health-warning,
.energy-summary-grid article.sensor-health-warning,
.process-summary-grid article.sensor-health-warning,
.equipment-card.sensor-health-warning,
.equipment-detail-grid article.sensor-health-warning,
.maintenance-life-card.sensor-health-warning,
.setpoint-card.sensor-health-warning {
  border-color: rgba(214, 138, 0, .46) !important;
  background: var(--soft-warn) !important;
  color: #8a5a00 !important;
  box-shadow: inset 0 0 0 1px rgba(214, 138, 0, .14);
}

[data-sensor-tag].sensor-health-danger,
.diagram-sensors [data-sensor-tag].sensor-health-danger,
.line-point [data-sensor-tag].sensor-health-danger,
.inlet-line-meta [data-sensor-tag].sensor-health-danger,
.inline-master-sensor.sensor-health-danger,
.overview-kpi-card.sensor-health-danger,
.overview-total-card.sensor-health-danger,
.metric-card.sensor-health-danger,
.compliance-summary-card.sensor-health-danger,
.energy-summary-grid article.sensor-health-danger,
.process-summary-grid article.sensor-health-danger,
.equipment-card.sensor-health-danger,
.equipment-detail-grid article.sensor-health-danger,
.maintenance-life-card.sensor-health-danger,
.setpoint-card.sensor-health-danger {
  border-color: rgba(216, 68, 68, .52) !important;
  background: var(--soft-danger) !important;
  color: #a22b2b !important;
  box-shadow: inset 0 0 0 1px rgba(216, 68, 68, .16);
}

@media (max-width: 1180px) {
  .login-screen {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
  }

  .login-visual,
  .login-card {
    justify-self: center;
  }

  .login-visual {
    width: min(520px, 100%);
  }

  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .nav-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-layout {
    grid-template-columns: 1fr;
  }

  .metric-grid,
  .detail-grid,
  .process-map {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .overview-grid,
  .overview-kpi-cards,
  .overview-management-grid,
  .inlet-setpoint-grid,
  .overview-main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .inlet-toolbar,
  .cooling-flow,
  .multi-inlet-flow,
  .process-overview-main,
  .process-pie-card,
  .compliance-overview,
  .compliance-pie-card,
  .compliance-parameter-grid,
  .eq-tank-values,
  .monitoring-flow-map,
  .process-summary-grid,
  .energy-summary-grid,
  .chemical-stock-card-grid,
  .energy-pie-layout,
  .energy-motor-grid,
  .maintenance-form-grid,
  .tool-form-grid,
  .report-check-grid,
  .maintenance-calendar,
  .maintenance-plan-meta,
  .manual-action-box,
  .motor-grid,
  .equipment-detail-grid,
  .equipment-history-layout,
  .equipment-limit-metric,
  .configured-sensor-card-grid,
  .control-mode-grid,
  .auto-parameter-grid {
    grid-template-columns: 1fr;
  }

  .process-unit-grid,
  .config-table-grid,
  .config-sensor-row,
  .sensor-config-layout,
  .sensor-editor-grid,
  .sensor-threshold-grid {
    grid-template-columns: 1fr;
  }

  .equipment-overview-head {
    display: grid;
  }

  .maintenance-head {
    display: grid;
  }

  .maintenance-form-grid label.wide {
    grid-column: auto;
  }

  .tool-form-grid label.wide {
    grid-column: auto;
  }

  .equipment-phase-group {
    grid-column: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .motor-mini-values {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .motor-mini-values div:nth-child(2n) {
    border-right: none;
  }

  .motor-maintenance-summary {
    grid-template-columns: 1fr;
  }

  .motor-maintenance-item {
    padding-right: 0;
  }

  .motor-maintenance-item + .motor-maintenance-item {
    padding-left: 0;
    padding-top: 8px;
    border-left: 0;
    border-top: 1px solid #dcebf2;
  }

  .process-flow-header,
  .diagram-title {
    display: grid;
  }

  .process-overview-board {
    padding: 12px;
  }

  .process-overview-visual {
    min-height: 220px;
    overflow-x: auto;
    grid-template-columns: repeat(7, minmax(96px, 1fr));
  }

  .process-overview-notes {
    grid-template-columns: 1fr;
  }

  .diagram-row {
    grid-template-columns: 1fr;
  }

  .diagram-node {
    grid-template-columns: 1fr;
  }

  .diagram-sensors {
    grid-template-columns: 1fr;
  }

  .diagram-node:not(:last-child)::after {
    top: auto;
    right: auto;
    left: 50%;
    bottom: -29px;
    width: 2px;
    height: 29px;
    transform: translateX(-50%);
  }

  .diagram-node:not(:last-child)::before {
    top: auto;
    right: auto;
    left: 50%;
    bottom: -31px;
    border-top: 0;
    border-bottom: 2px solid var(--line-strong);
    transform: translateX(-50%) rotate(45deg);
  }

  .inlet-toolbar {
    display: grid;
  }

  .flow-connector {
    min-height: 86px;
  }

  .flow-connector::before,
  .flow-connector::after {
    display: none;
  }

  .flow-card,
  .alarm-command,
  .energy-command {
    grid-column: span 1;
  }

  .user-admin-grid,
  .user-form-grid {
    grid-template-columns: 1fr;
  }

  .spec-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .login-screen {
    padding: 16px;
  }

  .login-header-title {
    top: 14px;
    left: 16px;
    max-width: calc(100vw - 32px);
  }

  .login-header-title span {
    font-size: 11px;
    letter-spacing: .06em;
  }

  .login-visual {
    display: none;
  }

  .login-card {
    padding: 22px;
  }

  .critical-alarm-banner {
    display: grid;
    top: 8px;
  }

  .critical-alarm-actions {
    justify-content: stretch;
  }

  .ack-critical-button {
    width: 100%;
  }

  .main {
    padding: 14px;
  }

  .topbar,
  .topbar-actions,
  .panel-head,
  .panel-filter-stack {
    display: grid;
    justify-content: stretch;
  }

  .topbar {
    position: static;
    align-items: stretch;
    padding: 16px;
  }

  .topbar-actions {
    grid-template-columns: 1fr;
  }

  .user-menu-button,
  .field-inline,
  .topbar-actions .ghost-button,
  .topbar-actions .primary-button {
    width: 100%;
  }

  .user-menu-panel {
    left: 0;
    right: auto;
    width: 100%;
  }

  .nav-list,
  .overview-grid,
  .overview-kpi-cards,
  .overview-management-grid,
  .user-admin-grid,
  .user-form-grid,
  .config-table-grid,
  .config-edit-card,
  .inlet-setpoint-grid,
  .overview-main,
  .metric-grid,
  .summary-grid,
  .detail-grid,
  .spec-grid,
  .process-map,
  .form-grid,
  .branch-line {
    grid-template-columns: 1fr;
  }

  .cost-pie-layout {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .cost-donut,
  .mini-donut {
    width: 220px;
    height: 220px;
  }

  .process-overview-main > .process-pie-card {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .process-overview-main > .process-pie-card .pie-breakdown {
    grid-template-columns: 1fr;
    width: 100%;
  }

  .process-overview-main > .pie-carousel-card .pie-carousel-slide > .process-pie-card {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .process-overview-main > .pie-carousel-card .pie-carousel-slide .pie-breakdown {
    grid-template-columns: 1fr;
    width: 100%;
  }

  .compliance-pie-card {
    justify-items: center;
  }

  .compliance-pie-card .pie-breakdown {
    grid-template-columns: 1fr;
    width: 100%;
  }

  .carousel-head {
    display: grid;
  }

  .carousel-track {
    min-height: 520px;
  }

  .station-values {
    grid-template-columns: 1fr;
  }

  .inlet-line-flow {
    grid-template-columns: 1fr;
  }

  .line-point {
    grid-template-columns: 1fr;
  }

  .line-point strong {
    grid-column: auto;
  }

  .line-arrow::before,
  .line-arrow::after {
    display: none;
  }

  .period-control,
  .trend-options,
  .trend-realtime-control,
  .trend-realtime-actions {
    justify-content: flex-start;
  }

  .trend-realtime-control {
    align-items: stretch;
    flex-direction: column;
  }

  .overview-kpi-header {
    display: grid;
  }

  .overview-hero {
    display: grid;
  }

  .hero-score {
    width: 132px;
    height: 132px;
  }

  .efficiency-grid {
    grid-template-columns: 1fr;
  }

  .timeline-item {
    grid-template-columns: 1fr;
  }

  .config-edit-card .wide {
    grid-column: auto;
  }

  .active-alarm-card {
    grid-template-columns: 1fr;
    align-items: start;
  }
}
/* Minimal login copy: hide secondary explanations and auto-role note. */
.login-card .login-copy p,
.login-card .login-role-note,
.login-card .role-note,
.login-card [data-login-role-note],
.login-card [data-role-note],
.login-card .login-meta {
  display: none !important;
}

.login-card h2 {
  margin-bottom: 10px;
}
/* Responsive custom date range picker */
[class*="single-date"][class*="trigger"],
[class*="date-range"][class*="trigger"],
[class*="range-date"][class*="trigger"],
[class*="calendar"][class*="trigger"],
[class*="single-date"][class*="button"],
[class*="date-range"][class*="button"],
[class*="range-date"][class*="button"],
[class*="calendar"][class*="button"],
[class*="single-date"][class*="value"],
[class*="date-range"][class*="value"],
[class*="range-date"][class*="value"],
[class*="calendar"][class*="value"] {
  font-weight: 400 !important;
  max-width: min(100%, 320px) !important;
  font-size: clamp(14px, 2.2vw, 18px) !important;
  line-height: 1.2 !important;
  white-space: normal !important;
}

[class*="single-date"][class*="popover"],
[class*="date-range"][class*="popover"],
[class*="range-date"][class*="popover"],
[class*="single-date"][class*="calendar"],
[class*="date-range"][class*="calendar"],
[class*="range-date"][class*="calendar"],
[class*="single-date"][class*="panel"],
[class*="date-range"][class*="panel"],
[class*="range-date"][class*="panel"],
[class*="calendar"][class*="panel"]:not(.maintenance-calendar-panel),
[class*="single-date"][class*="dropdown"],
[class*="date-range"][class*="dropdown"],
[class*="range-date"][class*="dropdown"],
[class*="calendar"][class*="dropdown"] {
  box-sizing: border-box !important;
  width: min(92vw, 430px) !important;
  max-width: calc(100vw - 24px) !important;
  max-height: min(78vh, 680px) !important;
  overflow: auto !important;
  font-weight: 400 !important;
  padding: clamp(12px, 1.8vw, 18px) !important;
  border-radius: 16px !important;
}

[class*="single-date"][class*="popover"] *,
[class*="date-range"][class*="popover"] *,
[class*="range-date"][class*="popover"] *,
[class*="single-date"][class*="calendar"] *,
[class*="date-range"][class*="calendar"] *,
[class*="range-date"][class*="calendar"] *,
[class*="single-date"][class*="panel"] *,
[class*="date-range"][class*="panel"] *,
[class*="range-date"][class*="panel"] *,
[class*="calendar"][class*="panel"]:not(.maintenance-calendar-panel) *,
[class*="single-date"][class*="dropdown"] *,
[class*="date-range"][class*="dropdown"] *,
[class*="range-date"][class*="dropdown"] *,
[class*="calendar"][class*="dropdown"] * {
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

[class*="single-date"][class*="month"],
[class*="date-range"][class*="month"],
[class*="range-date"][class*="month"],
[class*="calendar"][class*="month"],
[class*="single-date"][class*="title"],
[class*="date-range"][class*="title"],
[class*="range-date"][class*="title"],
[class*="calendar"][class*="title"] {
  font-size: clamp(17px, 3vw, 22px) !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
}

[class*="single-date"][class*="grid"],
[class*="date-range"][class*="grid"],
[class*="range-date"][class*="grid"],
[class*="calendar"][class*="grid"],
[class*="single-date"][class*="days"],
[class*="date-range"][class*="days"],
[class*="range-date"][class*="days"],
[class*="calendar"][class*="days"] {
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  gap: clamp(5px, 1.2vw, 8px) !important;
  width: 100% !important;
  min-width: 0 !important;
}

[class*="single-date"][class*="cell"],
[class*="date-range"][class*="cell"],
[class*="range-date"][class*="cell"],
[class*="calendar"][class*="cell"],
[class*="single-date"][class*="day"],
[class*="date-range"][class*="day"],
[class*="range-date"][class*="day"],
[class*="calendar"][class*="day"] {
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 34px !important;
  aspect-ratio: 1 / 0.78 !important;
  padding: 4px !important;
  border-radius: 9px !important;
  font-size: clamp(13px, 2.4vw, 18px) !important;
  font-weight: 400 !important;
  line-height: 1 !important;
}

.single-date-range-trigger,
.single-date-trigger,
.date-range-trigger,
.range-date-trigger,
.custom-date-range-trigger {
  max-width: min(100%, 340px) !important;
  width: auto !important;
  min-height: 44px !important;
  padding: 10px 14px !important;
  font-size: clamp(14px, 2.8vw, 18px) !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  white-space: normal !important;
  word-break: keep-all !important;
  overflow-wrap: anywhere !important;
}

.log-table-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 12px;
  background: rgba(248, 250, 252, 0.86);
  color: #475569;
  font-size: 13px;
  font-weight: 400;
}

.log-table-pager__info {
  font-weight: 400;
  line-height: 1.35;
}

.log-table-pager__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.log-table-pager button {
  min-height: 34px;
  padding: 7px 12px;
  border: 1px solid rgba(14, 116, 144, 0.22);
  border-radius: 10px;
  background: #ffffff;
  color: #075985;
  font-size: 13px;
  font-weight: 400;
  cursor: pointer;
}

.log-table-pager button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.overview-card-empty {
  background: #ffffff !important;
  border-color: rgba(203, 213, 225, 0.9) !important;
  color: #64748b !important;
}

.overview-card-empty [data-empty="true"] {
  color: #0f172a !important;
  font-weight: 400 !important;
}

.safe-compact-date-picker {
  box-sizing: border-box !important;
  width: min(92vw, 380px) !important;
  max-width: calc(100vw - 24px) !important;
  max-height: min(76vh, 560px) !important;
  overflow: auto !important;
  padding: 10px !important;
  border-radius: 14px !important;
  font-weight: 400 !important;
}

.safe-compact-date-picker,
.safe-compact-date-picker * {
  box-sizing: border-box !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

.safe-compact-date-picker button {
  font-weight: 400 !important;
}

.pid-master-sensor-root {
  position: relative;
}

.pid-master-sensor-overlay {
  position: absolute;
  left: clamp(14px, 2vw, 28px);
  right: clamp(14px, 2vw, 28px);
  top: clamp(46px, 5vw, 76px);
  z-index: 8;
  display: grid;
  grid-template-columns: minmax(260px, 0.8fr) minmax(260px, 0.8fr);
  gap: 12px;
  max-width: 760px;
  pointer-events: none;
}

.pid-master-sensor-group {
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(37, 99, 235, 0.2);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.12);
  backdrop-filter: blur(10px);
  pointer-events: auto;
}

.pid-master-sensor-group header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  color: #0f172a;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.pid-master-sensor-group header small {
  color: #64748b;
  font-size: 11px;
  font-weight: 400;
  text-transform: none;
  white-space: nowrap;
}

.pid-master-sensor-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  max-height: 190px;
  overflow: auto;
  padding-right: 2px;
}

.pid-master-sensor-card {
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid rgba(14, 165, 233, 0.24);
  border-left: 4px solid #0ea5e9;
  border-radius: 10px;
  background: linear-gradient(135deg, #ffffff 0%, #f0f9ff 100%);
}

.pid-master-sensor-card--live {
  border-left-color: #10b981;
  background: linear-gradient(135deg, #ffffff 0%, #ecfdf5 100%);
}

.pid-master-sensor-card--no-data {
  border-left-color: #94a3b8;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
}

.pid-master-sensor-card__label {
  color: #64748b;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.pid-master-sensor-card__value {
  margin-top: 4px;
  color: #0f172a;
  font-size: clamp(18px, 1.8vw, 24px);
  font-weight: 700;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.pid-pretreatment-master-panel {
  display: grid;
  grid-template-columns: minmax(260px, 0.9fr) minmax(260px, 1fr) minmax(260px, 1fr);
  gap: 12px;
  align-items: stretch;
  margin: 0 0 14px;
  padding: 12px;
  border: 1px solid rgba(37, 99, 235, 0.18);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(248, 250, 252, 0.96), rgba(239, 246, 255, 0.9));
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.08);
}

.pid-pretreatment-master-panel__title {
  min-width: 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid rgba(148, 163, 184, 0.2);
}

.pid-pretreatment-master-panel__title strong {
  display: block;
  color: #0f172a;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
}

.pid-pretreatment-master-panel__title span {
  display: block;
  margin-top: 6px;
  color: #64748b;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
}

.pid-pretreatment-master-group {
  min-width: 0;
  padding: 10px;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid rgba(14, 116, 144, 0.16);
}

.pid-pretreatment-master-group__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.pid-pretreatment-master-group__head strong {
  color: #0f172a;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
}

.pid-pretreatment-master-group__head span {
  color: #0369a1;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}

.pid-pretreatment-master-group__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  max-height: 210px;
  overflow: auto;
}

.pid-pretreatment-master-card {
  min-width: 0;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid rgba(14, 165, 233, 0.22);
  border-left: 4px solid #0ea5e9;
  background: linear-gradient(135deg, #ffffff, #f0f9ff);
}

.pid-pretreatment-master-card.is-live {
  border-left-color: #10b981;
  background: linear-gradient(135deg, #ffffff, #ecfdf5);
}

.pid-pretreatment-master-card.is-empty {
  border-left-color: #94a3b8;
  background: linear-gradient(135deg, #ffffff, #f8fafc);
}

.pid-pretreatment-master-card__label {
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.pid-pretreatment-master-card__value {
  margin-top: 5px;
  color: #0f172a;
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 800;
  line-height: 1;
  overflow-wrap: anywhere;
}

.pid-pretreatment-master-card__tag {
  margin-top: 6px;
  color: #0369a1;
  font-size: 10px;
  font-weight: 400;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pid-pretreatment-master-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 10px;
  border: 1px dashed rgba(148, 163, 184, 0.45);
  border-radius: 10px;
  color: #64748b;
  font-size: 12px;
  font-weight: 400;
}

@media (max-width: 1100px) {
  .pid-pretreatment-master-panel {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .pid-pretreatment-master-group__cards {
    grid-template-columns: 1fr;
  }
}

.pid-master-sensor-card__tag {
  margin-top: 5px;
  color: #0369a1;
  font-size: 10px;
  font-weight: 400;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pid-master-sensor-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 10px;
  border: 1px dashed rgba(148, 163, 184, 0.45);
  border-radius: 10px;
  color: #64748b;
  font-size: 12px;
  font-weight: 400;
}

@media (max-width: 1100px) {
  .pid-master-sensor-overlay {
    position: relative;
    inset: auto;
    max-width: none;
    margin: 12px 0;
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .pid-master-sensor-list {
    grid-template-columns: 1fr;
  }
}

.date-range-display-note {
  flex-basis: 100%;
  width: 100%;
  margin-top: 8px;
  color: #64748b;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.35;
}

.date-range-display-note strong {
  color: #0f172a;
  font-weight: 400;
}

/* Final compact range-calendar override. Keep this near the end so it wins. */
[class*="single-date"][class*="popover"],
[class*="date-range"][class*="popover"],
[class*="range-date"][class*="popover"],
[class*="calendar"][class*="popover"],
[class*="single-date"][class*="panel"],
[class*="date-range"][class*="panel"],
[class*="range-date"][class*="panel"],
[class*="calendar"][class*="panel"]:not(.maintenance-calendar-panel),
[class*="single-date"][class*="dropdown"],
[class*="date-range"][class*="dropdown"],
[class*="range-date"][class*="dropdown"],
[class*="calendar"][class*="dropdown"],
.single-date-range-popover,
.single-date-popover,
.date-range-popover,
.range-date-popover,
.custom-date-range-popover,
.single-date-calendar,
.date-range-calendar,
.range-calendar-dropdown {
  width: min(86vw, 410px) !important;
  max-width: calc(100vw - 28px) !important;
  max-height: min(76vh, 620px) !important;
  overflow: auto !important;
  padding: 12px !important;
  border-radius: 16px !important;
  transform: translateX(-120px) !important;
  font-weight: 400 !important;
}

[class*="single-date"][class*="popover"] *,
[class*="date-range"][class*="popover"] *,
[class*="range-date"][class*="popover"] *,
[class*="calendar"][class*="popover"] *,
[class*="single-date"][class*="panel"] *,
[class*="date-range"][class*="panel"] *,
[class*="range-date"][class*="panel"] *,
[class*="calendar"][class*="panel"]:not(.maintenance-calendar-panel) *,
[class*="single-date"][class*="dropdown"] *,
[class*="date-range"][class*="dropdown"] *,
[class*="range-date"][class*="dropdown"] *,
[class*="calendar"][class*="dropdown"] *,
.single-date-range-popover *,
.single-date-popover *,
.date-range-popover *,
.range-date-popover *,
.custom-date-range-popover *,
.single-date-calendar *,
.date-range-calendar *,
.range-calendar-dropdown * {
  box-sizing: border-box !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

[class*="single-date"][class*="month"],
[class*="date-range"][class*="month"],
[class*="range-date"][class*="month"],
[class*="calendar"][class*="month"],
[class*="single-date"][class*="title"],
[class*="date-range"][class*="title"],
[class*="range-date"][class*="title"],
[class*="calendar"][class*="title"],
.single-date-range-popover h1,
.single-date-range-popover h2,
.single-date-range-popover h3,
.date-range-popover h1,
.date-range-popover h2,
.date-range-popover h3,
.single-date-calendar h1,
.single-date-calendar h2,
.single-date-calendar h3,
.date-range-calendar h1,
.date-range-calendar h2,
.date-range-calendar h3 {
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
}

[class*="single-date"][class*="grid"],
[class*="date-range"][class*="grid"],
[class*="range-date"][class*="grid"],
[class*="calendar"][class*="grid"],
[class*="single-date"][class*="days"],
[class*="date-range"][class*="days"],
[class*="range-date"][class*="days"],
[class*="calendar"][class*="days"],
.single-date-range-grid,
.single-date-grid,
.date-range-grid,
.range-date-grid,
.calendar-days-grid {
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  gap: 6px !important;
  width: 100% !important;
  min-width: 0 !important;
}

[class*="single-date"][class*="day"],
[class*="date-range"][class*="day"],
[class*="range-date"][class*="day"],
[class*="single-date"][class*="cell"],
[class*="date-range"][class*="cell"],
[class*="range-date"][class*="cell"],
.single-date-range-day,
.single-date-day,
.date-range-day,
.range-date-day {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 34px !important;
  height: auto !important;
  aspect-ratio: 1 / 0.72 !important;
  padding: 4px !important;
  border-radius: 8px !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
}

[class*="single-date"][class*="week"],
[class*="date-range"][class*="week"],
[class*="range-date"][class*="week"],
[class*="calendar"][class*="week"],
.single-date-range-weekdays,
.single-date-weekdays,
.date-range-weekdays,
.range-date-weekdays {
  gap: 6px !important;
  font-size: 12px !important;
  font-weight: 400 !important;
}

[class*="single-date"][class*="trigger"],
[class*="date-range"][class*="trigger"],
[class*="range-date"][class*="trigger"],
[class*="calendar"][class*="trigger"],
.single-date-range-trigger,
.single-date-trigger,
.date-range-trigger,
.range-date-trigger,
.custom-date-range-trigger {
  max-width: min(100%, 330px) !important;
  min-height: 42px !important;
  padding: 9px 13px !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

@media (max-width: 760px) {
  [class*="single-date"][class*="popover"],
  [class*="date-range"][class*="popover"],
  [class*="range-date"][class*="popover"],
  [class*="calendar"][class*="popover"],
  [class*="single-date"][class*="panel"],
  [class*="date-range"][class*="panel"],
  [class*="range-date"][class*="panel"],
  [class*="calendar"][class*="panel"],
  [class*="single-date"][class*="dropdown"],
  [class*="date-range"][class*="dropdown"],
  [class*="range-date"][class*="dropdown"],
  [class*="calendar"][class*="dropdown"],
  .single-date-range-popover,
  .single-date-popover,
  .date-range-popover,
  .range-date-popover,
  .custom-date-range-popover,
  .single-date-calendar,
  .date-range-calendar,
  .range-calendar-dropdown {
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-width: none !important;
    transform: none !important;
  }
}

/* Date range picker final polish: compact, responsive, regular font. */
:where(
  [class*="date-range"],
  [class*="single-date"],
  [class*="range-date"],
  [class*="calendar"]
) {
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

:where(
  [class*="date-range"],
  [class*="single-date"],
  [class*="range-date"],
  [class*="calendar"]
) * {
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

:where(
  [class*="date-range"][class*="trigger"],
  [class*="single-date"][class*="trigger"],
  [class*="range-date"][class*="trigger"],
  [class*="calendar"][class*="trigger"],
  [class*="date-range"][class*="button"],
  [class*="single-date"][class*="button"],
  [class*="range-date"][class*="button"],
  [class*="calendar"][class*="button"],
  .date-range-trigger,
  .single-date-range-trigger,
  .custom-date-range-trigger
) {
  width: auto !important;
  max-width: min(100%, 300px) !important;
  min-height: 40px !important;
  padding: 8px 12px !important;
  font-size: clamp(13px, 1.6vw, 16px) !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

:where(
  [class*="date-range"][class*="popover"],
  [class*="single-date"][class*="popover"],
  [class*="range-date"][class*="popover"],
  [class*="calendar"][class*="popover"],
  [class*="date-range"][class*="panel"],
  [class*="single-date"][class*="panel"],
  [class*="range-date"][class*="panel"],
  [class*="calendar"][class*="panel"],
  [class*="date-range"][class*="dropdown"],
  [class*="single-date"][class*="dropdown"],
  [class*="range-date"][class*="dropdown"],
  [class*="calendar"][class*="dropdown"],
  .date-range-popover,
  .single-date-range-popover,
  .custom-date-range-popover,
  .date-range-calendar,
  .single-date-calendar,
  .range-calendar-dropdown
) {
  box-sizing: border-box !important;
  width: min(92vw, 360px) !important;
  max-width: calc(100vw - 24px) !important;
  max-height: min(76vh, 560px) !important;
  overflow: auto !important;
  padding: 10px !important;
  border-radius: 14px !important;
  font-weight: 400 !important;
  transform: translateX(-80px) !important;
}

:where(
  [class*="date-range"][class*="month"],
  [class*="single-date"][class*="month"],
  [class*="range-date"][class*="month"],
  [class*="calendar"][class*="month"],
  [class*="date-range"][class*="title"],
  [class*="single-date"][class*="title"],
  [class*="range-date"][class*="title"],
  [class*="calendar"][class*="title"],
  .date-range-calendar h1,
  .date-range-calendar h2,
  .date-range-calendar h3,
  .date-range-popover h1,
  .date-range-popover h2,
  .date-range-popover h3
) {
  font-size: clamp(16px, 2.4vw, 18px) !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
}

:where(
  [class*="date-range"][class*="grid"],
  [class*="single-date"][class*="grid"],
  [class*="range-date"][class*="grid"],
  [class*="date-range"][class*="days"],
  [class*="single-date"][class*="days"],
  [class*="range-date"][class*="days"],
  .date-range-grid,
  .single-date-range-grid,
  .calendar-days-grid
) {
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  gap: 5px !important;
  width: 100% !important;
  min-width: 0 !important;
}

:where(
  [class*="date-range"][class*="day"],
  [class*="single-date"][class*="day"],
  [class*="range-date"][class*="day"],
  [class*="date-range"][class*="cell"],
  [class*="single-date"][class*="cell"],
  [class*="range-date"][class*="cell"],
  .date-range-day,
  .single-date-range-day
) {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 30px !important;
  height: auto !important;
  aspect-ratio: 1 / 0.72 !important;
  padding: 3px !important;
  border-radius: 8px !important;
  font-size: clamp(13px, 2vw, 15px) !important;
  font-weight: 400 !important;
  line-height: 1 !important;
}

:where(
  [class*="date-range"][class*="week"],
  [class*="single-date"][class*="week"],
  [class*="range-date"][class*="week"],
  .date-range-weekdays,
  .single-date-range-weekdays
) {
  gap: 5px !important;
  margin-block: 8px 6px !important;
  font-size: 11px !important;
  font-weight: 400 !important;
}

:where(
  [class*="date-range"][class*="footer"],
  [class*="single-date"][class*="footer"],
  [class*="range-date"][class*="footer"],
  [class*="calendar"][class*="footer"],
  .date-range-footer,
  .single-date-range-footer,
  .calendar-range-footer
) {
  margin-top: 10px !important;
  font-size: 12px !important;
  font-weight: 400 !important;
}

@media (max-width: 820px) {
  :where(
    [class*="date-range"][class*="popover"],
    [class*="single-date"][class*="popover"],
    [class*="range-date"][class*="popover"],
    [class*="calendar"][class*="popover"],
    [class*="date-range"][class*="panel"],
    [class*="single-date"][class*="panel"],
    [class*="range-date"][class*="panel"],
    [class*="calendar"][class*="panel"],
    [class*="date-range"][class*="dropdown"],
    [class*="single-date"][class*="dropdown"],
    [class*="range-date"][class*="dropdown"],
    [class*="calendar"][class*="dropdown"],
    .date-range-popover,
    .single-date-range-popover,
    .custom-date-range-popover,
    .date-range-calendar,
    .single-date-calendar,
    .range-calendar-dropdown
  ) {
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-width: none !important;
    transform: none !important;
  }
}

.date-range-ui-normalized {
  box-sizing: border-box !important;
  width: min(94vw, 390px) !important;
  max-width: calc(100vw - 24px) !important;
  max-height: min(78vh, 620px) !important;
  overflow: auto !important;
  padding: 12px !important;
  border-radius: 16px !important;
  font-weight: 400 !important;
}

.date-range-ui-normalized,
.date-range-ui-normalized * {
  letter-spacing: 0 !important;
  font-weight: 400 !important;
}

.date-range-ui-normalized [class*="month"],
.date-range-ui-normalized [class*="title"],
.date-range-ui-normalized h1,
.date-range-ui-normalized h2,
.date-range-ui-normalized h3 {
  font-size: clamp(17px, 3vw, 21px) !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
}

.date-range-ui-normalized [class*="grid"],
.date-range-ui-normalized [class*="days"] {
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  gap: 7px !important;
  width: 100% !important;
  min-width: 0 !important;
}

.date-range-ui-normalized [class*="day"],
.date-range-ui-normalized [class*="cell"] {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 38px !important;
  height: auto !important;
  aspect-ratio: 1 / 0.74 !important;
  padding: 4px !important;
  border-radius: 9px !important;
  font-size: clamp(14px, 2.4vw, 18px) !important;
  line-height: 1 !important;
}

.date-range-ui-normalized button {
  font-size: clamp(14px, 2.4vw, 18px) !important;
  font-weight: 400 !important;
}

.date-range-ui-normalized .date-range-step-hint {
  color: #475569 !important;
  font-size: 13px !important;
  font-weight: 400 !important;
}

@media (max-width: 520px) {
  .date-range-ui-normalized {
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    max-width: none !important;
    padding: 10px !important;
    transform: none !important;
  }

  .date-range-ui-normalized [class*="grid"],
  .date-range-ui-normalized [class*="days"] {
    gap: 5px !important;
  }

  .date-range-ui-normalized [class*="day"],
  .date-range-ui-normalized [class*="cell"] {
    min-height: 34px !important;
    border-radius: 8px !important;
  }
}

@media (max-width: 640px) {
  .log-table-pager {
    align-items: stretch;
  }

  .log-table-pager__actions,
  .log-table-pager button {
    width: 100%;
  }
}

.single-date-range-popover,
.single-date-popover,
.date-range-popover,
.range-date-popover,
.custom-date-range-popover,
.single-date-calendar,
.date-range-calendar,
.range-calendar-dropdown {
  box-sizing: border-box !important;
  width: min(92vw, 520px) !important;
  max-width: calc(100vw - 24px) !important;
  max-height: min(78vh, 680px) !important;
  overflow: auto !important;
  padding: clamp(14px, 2.2vw, 22px) !important;
  border-radius: 18px !important;
  font-weight: 400 !important;
}

.single-date-range-popover *,
.single-date-popover *,
.date-range-popover *,
.range-date-popover *,
.custom-date-range-popover *,
.single-date-calendar *,
.date-range-calendar *,
.range-calendar-dropdown * {
  box-sizing: border-box !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

.single-date-range-popover h1,
.single-date-range-popover h2,
.single-date-range-popover h3,
.single-date-popover h1,
.single-date-popover h2,
.single-date-popover h3,
.date-range-popover h1,
.date-range-popover h2,
.date-range-popover h3,
.range-date-popover h1,
.range-date-popover h2,
.range-date-popover h3,
.custom-date-range-popover h1,
.custom-date-range-popover h2,
.custom-date-range-popover h3,
.single-date-calendar h1,
.single-date-calendar h2,
.single-date-calendar h3,
.date-range-calendar h1,
.date-range-calendar h2,
.date-range-calendar h3,
.range-calendar-dropdown h1,
.range-calendar-dropdown h2,
.range-calendar-dropdown h3 {
  margin: 0 !important;
  font-size: clamp(18px, 4.6vw, 24px) !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  text-align: center !important;
}

.single-date-range-popover button,
.single-date-popover button,
.date-range-popover button,
.range-date-popover button,
.custom-date-range-popover button,
.single-date-calendar button,
.date-range-calendar button,
.range-calendar-dropdown button {
  font-weight: 400 !important;
}

.single-date-range-grid,
.single-date-grid,
.date-range-grid,
.range-date-grid,
.calendar-days-grid {
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  gap: clamp(6px, 1.6vw, 10px) !important;
  width: 100% !important;
  min-width: 0 !important;
}

.single-date-range-day,
.single-date-day,
.date-range-day,
.range-date-day {
  width: 100% !important;
  min-width: 0 !important;
  aspect-ratio: 1 / 0.82 !important;
  min-height: 38px !important;
  height: auto !important;
  padding: 6px !important;
  border-radius: 10px !important;
  font-size: clamp(14px, 3.4vw, 20px) !important;
  font-weight: 400 !important;
  line-height: 1 !important;
}

.single-date-range-weekdays,
.single-date-weekdays,
.date-range-weekdays,
.range-date-weekdays {
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  gap: clamp(6px, 1.6vw, 10px) !important;
  margin-block: 12px 8px !important;
  color: #64748b !important;
  font-size: clamp(12px, 2.8vw, 15px) !important;
  font-weight: 400 !important;
  text-align: center !important;
}

.single-date-range-footer,
.single-date-footer,
.date-range-footer,
.range-date-footer,
.calendar-range-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  margin-top: 14px !important;
  font-size: clamp(13px, 3vw, 16px) !important;
  font-weight: 400 !important;
}

@media (max-width: 640px) {
  .single-date-range-popover,
  .single-date-popover,
  .date-range-popover,
  .range-date-popover,
  .custom-date-range-popover,
  .single-date-calendar,
  .date-range-calendar,
  .range-calendar-dropdown {
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-width: none !important;
    transform: none !important;
  }

  .single-date-range-day,
  .single-date-day,
  .date-range-day,
  .range-date-day {
    min-height: 36px !important;
    border-radius: 9px !important;
  }
}
.inlet-page .process-pie-card.pie-carousel-card,
.inlet-page .pie-carousel-track,
.inlet-page .pie-carousel-slide {
  display: none !important;
}

.inlet-page [data-stable-inlet-delta-pie],
.inlet-page .stable-inlet-delta-pie {
  display: block !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   INLET MONITORING — MODERN PREMIUM LIGHT PALETTE
   Bright vibrant boxes · bold borders · high-contrast dark text on white
   Scoped entirely to .inlet-line-card — zero side-effects on other pages.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Card shell ── */
.inlet-line-card {
  border: 1px solid #e2e8f0 !important;
  border-left: 5px solid #10b981 !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  box-shadow: 0 8px 32px rgba(15,23,42,.09), 0 2px 8px rgba(15,23,42,.05) !important;
  overflow: hidden;
}
.inlet-line-card.warn {
  border-left-color: #f59e0b !important;
}

/* Title */
.inlet-line-card .inlet-line-title h3 {
  font-size: 17px !important;
  font-weight: 900 !important;
  color: #0f172a !important;
  letter-spacing: -.01em;
}

/* ── Line-point container — clean white with brand left accent ── */
.inlet-line-card .line-point {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-left: 4px solid #0b4f7a !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 12px rgba(11, 79, 122, .07), 0 1px 3px rgba(0,0,0,.04) !important;
}
.inlet-line-card .line-point strong {
  color: #0f172a !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase;
}
.inlet-line-card.warn .line-point {
  border-left-color: #f59e0b !important;
}

/* ── Sensor value boxes — clean cards on white background ── */
.inlet-line-card .line-point span,
.inlet-line-card .line-point .inline-master-sensor {
  background: #f8faff !important;
  border: 1.5px solid #dbeafe !important;
  color: #0f172a !important;
  box-shadow: 0 2px 8px rgba(11, 79, 122, .08) !important;
  border-radius: 8px !important;
}

/* Label inside sensor box */
.inlet-line-card .line-point span small,
.inlet-line-card .line-point .inline-master-sensor small {
  color: #0b4f7a !important;
  font-size: 9.5px !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

/* ── Cooling Tower badge in arrow connector ── */
.ct-tower-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  z-index: 1;
  background: #fff;
  border: 1.5px solid #bae6fd;
  border-radius: 12px;
  padding: 8px 10px 6px;
  box-shadow: 0 4px 16px rgba(11, 79, 122, .12), 0 1px 4px rgba(0,0,0,.06);
}

.ct-tower-icon {
  width: 40px;
  height: 46px;
  color: #0b4f7a;
  flex-shrink: 0;
}

.ct-tower-name {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #0b4f7a;
  white-space: nowrap;
}

/* Override the arrow connector line color */
.inlet-line-card .line-arrow::before { background: #bae6fd !important; height: 2px !important; }
.inlet-line-card .line-arrow::after  { border-color: #bae6fd !important; border-width: 2px !important; }

/* Dark mode */
html[data-theme="dark"] .inlet-line-card .line-point {
  background: #1e293b !important;
  border-color: #334155 !important;
  border-left-color: #38bdf8 !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.25) !important;
}
html[data-theme="dark"] .inlet-line-card .line-point strong { color: #e2e8f0 !important; }
html[data-theme="dark"] .inlet-line-card .line-point span,
html[data-theme="dark"] .inlet-line-card .line-point .inline-master-sensor {
  background: #0f172a !important; border-color: #334155 !important; color: #e2e8f0 !important;
}
html[data-theme="dark"] .inlet-line-card .line-point span small,
html[data-theme="dark"] .inlet-line-card .line-point .inline-master-sensor small { color: #38bdf8 !important; }
html[data-theme="dark"] .ct-tower-badge { background: #0f172a !important; border-color: #1e3a5f !important; }
html[data-theme="dark"] .ct-tower-icon { color: #38bdf8 !important; }
html[data-theme="dark"] .ct-tower-name { color: #38bdf8 !important; }

/* ── Empty state ── */
.inlet-line-card .line-point-empty {
  background: rgba(255, 255, 255, .82) !important;
  border: 2px dashed rgba(255, 255, 255, .55) !important;
  color: #334155 !important;
  font-size: 11.5px !important;
  padding: 14px 12px !important;
  border-radius: 8px !important;
}
.inlet-line-card .line-point-empty strong {
  color: #0f2d44 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

/* ── Arrow connector lines (old span-based badge removed; now uses .ct-tower-badge) ── */

/* ══════════════════════════════════════════════════════════════
   SENSOR HEALTH — VIVID LIGHT GRADIENT + DARK TEXT + GLOW
   Light saturated backgrounds, strong colored borders, deep text
   ══════════════════════════════════════════════════════════════ */

/* Normal — Emerald */
.inlet-line-card .line-point [data-sensor-tag].sensor-health-normal {
  background: linear-gradient(145deg, #ecfdf5, #d1fae5) !important;
  border: 2px solid #10b981 !important;
  color: #064e3b !important;
  box-shadow: 0 6px 20px rgba(0,0,0,.22), 0 2px 6px rgba(16,185,129,.25), inset 0 1px 0 rgba(255,255,255,.9) !important;
}
.inlet-line-card .line-point [data-sensor-tag].sensor-health-normal small { color: #065f46 !important; }

/* Warning — Amber */
.inlet-line-card .line-point [data-sensor-tag].sensor-health-warning {
  background: linear-gradient(145deg, #fffbeb, #fef3c7) !important;
  border: 2px solid #f59e0b !important;
  color: #78350f !important;
  box-shadow: 0 6px 20px rgba(0,0,0,.22), 0 2px 6px rgba(245,158,11,.25), inset 0 1px 0 rgba(255,255,255,.9) !important;
}
.inlet-line-card .line-point [data-sensor-tag].sensor-health-warning small { color: #92400e !important; }

/* Danger — Rose */
.inlet-line-card .line-point [data-sensor-tag].sensor-health-danger {
  background: linear-gradient(145deg, #fff1f2, #fee2e2) !important;
  border: 2px solid #f43f5e !important;
  color: #881337 !important;
  box-shadow: 0 6px 20px rgba(0,0,0,.22), 0 2px 6px rgba(244,63,94,.25), inset 0 1px 0 rgba(255,255,255,.9) !important;
}
.inlet-line-card .line-point [data-sensor-tag].sensor-health-danger small { color: #9f1239 !important; }

/* Neutral — white base (no thresholds set, suppress server-default coloring) */
.inlet-line-card .line-point [data-sensor-tag].sensor-health-neutral {
  background: #f8faff !important;
  border: 1.5px solid #dbeafe !important;
  color: #0b4f7a !important;
  box-shadow: 0 2px 8px rgba(11, 79, 122, .08) !important;
}
.inlet-line-card .line-point [data-sensor-tag].sensor-health-neutral small { color: #0b4f7a !important; }

/* Stale — Warm White (teal-tinted on dark bg) */
.inlet-line-card .line-point [data-sensor-tag].sensor-health-stale {
  background: linear-gradient(145deg, #f0f9ff, #e0f2fe) !important;
  border: 2px solid #7dd3fc !important;
  color: #0c4a6e !important;
  box-shadow: 0 6px 20px rgba(0,0,0,.22), 0 2px 6px rgba(125,211,252,.2) !important;
}
.inlet-line-card .line-point [data-sensor-tag].sensor-health-stale small { color: #0369a1 !important; }

/* Noise — Violet */
.inlet-line-card .line-point [data-sensor-tag].sensor-health-noise {
  background: linear-gradient(145deg, #faf5ff, #ede9fe) !important;
  border: 2px solid #8b5cf6 !important;
  color: #4c1d95 !important;
  box-shadow: 0 4px 16px rgba(139,92,246,.20), inset 0 1px 0 rgba(255,255,255,.9) !important;
}
.inlet-line-card .line-point [data-sensor-tag].sensor-health-noise small {
  color: #5b21b6 !important;
}

/* ── Dark-theme adjustments ── */
html[data-theme="dark"] .inlet-line-card {
  background: #0f172a !important;
  border-color: #1e293b !important;
  border-left-color: #10b981 !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.30) !important;
}
html[data-theme="dark"] .inlet-line-card.warn { border-left-color: #f59e0b !important; }
html[data-theme="dark"] .inlet-line-card .inlet-line-title h3 { color: #e2e8f0 !important; }
html[data-theme="dark"] .inlet-line-card .line-point-empty { background: #1e293b !important; border-color: #475569 !important; color: #94a3b8 !important; }
html[data-theme="dark"] .inlet-line-card .line-point-empty strong { color: #cbd5e1 !important; }

/* ══════════════════════════════════════════════════════════════
   PROCESS FLOW — SENSOR CARD BASE STYLE
   White + left accent border (same concept as inlet line-point)
   ══════════════════════════════════════════════════════════════ */

.diagram-node .diagram-sensors > [data-sensor-tag],
.diagram-node-unit .diagram-sensors > [data-sensor-tag] {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.05) !important;
}

.diagram-node .diagram-sensors strong,
.diagram-node-unit .diagram-sensors strong {
  color: #0f172a !important;
}

/* ══════════════════════════════════════════════════════════════
   PROCESS FLOW — SENSOR HEALTH (left-border accent, same as inlet)
   ══════════════════════════════════════════════════════════════ */

/* Normal — Emerald */
.diagram-node [data-sensor-tag].sensor-health-normal,
.diagram-node-unit .diagram-sensors [data-sensor-tag].sensor-health-normal {
  background: #f0fdf9 !important;
  border: 1px solid #e2e8f0 !important;
  border-left: 4px solid #10b981 !important;
  box-shadow: 0 1px 4px rgba(16,185,129,.12) !important;
  color: #064e3b !important;
}
.diagram-node [data-sensor-tag].sensor-health-normal .diagram-sensor-label,
.diagram-node [data-sensor-tag].sensor-health-normal small,
.diagram-node-unit .diagram-sensors [data-sensor-tag].sensor-health-normal .diagram-sensor-label,
.diagram-node-unit .diagram-sensors [data-sensor-tag].sensor-health-normal small { color: #065f46 !important; }
.diagram-node [data-sensor-tag].sensor-health-normal strong,
.diagram-node-unit .diagram-sensors [data-sensor-tag].sensor-health-normal strong { color: #047857 !important; }

/* Warning — Amber */
.diagram-node [data-sensor-tag].sensor-health-warning,
.diagram-node-unit .diagram-sensors [data-sensor-tag].sensor-health-warning {
  background: #fffbf0 !important;
  border: 1px solid #e2e8f0 !important;
  border-left: 4px solid #f59e0b !important;
  box-shadow: 0 1px 4px rgba(245,158,11,.12) !important;
  color: #78350f !important;
}
.diagram-node [data-sensor-tag].sensor-health-warning .diagram-sensor-label,
.diagram-node [data-sensor-tag].sensor-health-warning small,
.diagram-node-unit .diagram-sensors [data-sensor-tag].sensor-health-warning .diagram-sensor-label,
.diagram-node-unit .diagram-sensors [data-sensor-tag].sensor-health-warning small { color: #92400e !important; }
.diagram-node [data-sensor-tag].sensor-health-warning strong,
.diagram-node-unit .diagram-sensors [data-sensor-tag].sensor-health-warning strong { color: #b45309 !important; }

/* Danger — Rose */
.diagram-node [data-sensor-tag].sensor-health-danger,
.diagram-node-unit .diagram-sensors [data-sensor-tag].sensor-health-danger {
  background: #fff5f5 !important;
  border: 1px solid #e2e8f0 !important;
  border-left: 4px solid #f43f5e !important;
  box-shadow: 0 1px 4px rgba(244,63,94,.12) !important;
  color: #881337 !important;
}
.diagram-node [data-sensor-tag].sensor-health-danger .diagram-sensor-label,
.diagram-node [data-sensor-tag].sensor-health-danger small,
.diagram-node-unit .diagram-sensors [data-sensor-tag].sensor-health-danger .diagram-sensor-label,
.diagram-node-unit .diagram-sensors [data-sensor-tag].sensor-health-danger small { color: #9f1239 !important; }
.diagram-node [data-sensor-tag].sensor-health-danger strong,
.diagram-node-unit .diagram-sensors [data-sensor-tag].sensor-health-danger strong { color: #be123c !important; }

/* Neutral — plain white, no left accent (thresholds not configured) */
.diagram-node [data-sensor-tag].sensor-health-neutral,
.diagram-node-unit .diagram-sensors [data-sensor-tag].sensor-health-neutral {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.05) !important;
  color: #334155 !important;
}
.diagram-node [data-sensor-tag].sensor-health-neutral .diagram-sensor-label,
.diagram-node [data-sensor-tag].sensor-health-neutral small,
.diagram-node-unit .diagram-sensors [data-sensor-tag].sensor-health-neutral .diagram-sensor-label,
.diagram-node-unit .diagram-sensors [data-sensor-tag].sensor-health-neutral small { color: #64748b !important; }
.diagram-node [data-sensor-tag].sensor-health-neutral strong,
.diagram-node-unit .diagram-sensors [data-sensor-tag].sensor-health-neutral strong { color: #334155 !important; }

/* Stale — Slate */
.diagram-node [data-sensor-tag].sensor-health-stale,
.diagram-node-unit .diagram-sensors [data-sensor-tag].sensor-health-stale {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-left: 4px solid #94a3b8 !important;
  box-shadow: 0 1px 4px rgba(100,116,139,.08) !important;
  color: #334155 !important;
}
.diagram-node [data-sensor-tag].sensor-health-stale .diagram-sensor-label,
.diagram-node [data-sensor-tag].sensor-health-stale small,
.diagram-node-unit .diagram-sensors [data-sensor-tag].sensor-health-stale .diagram-sensor-label,
.diagram-node-unit .diagram-sensors [data-sensor-tag].sensor-health-stale small { color: #64748b !important; }
.diagram-node [data-sensor-tag].sensor-health-stale strong,
.diagram-node-unit .diagram-sensors [data-sensor-tag].sensor-health-stale strong { color: #475569 !important; }

/* Noise — Violet */
.diagram-node [data-sensor-tag].sensor-health-noise,
.diagram-node-unit .diagram-sensors [data-sensor-tag].sensor-health-noise {
  background: #faf5ff !important;
  border: 1px solid #e2e8f0 !important;
  border-left: 4px solid #8b5cf6 !important;
  box-shadow: 0 1px 4px rgba(139,92,246,.12) !important;
  color: #4c1d95 !important;
}
.diagram-node [data-sensor-tag].sensor-health-noise .diagram-sensor-label,
.diagram-node [data-sensor-tag].sensor-health-noise small,
.diagram-node-unit .diagram-sensors [data-sensor-tag].sensor-health-noise .diagram-sensor-label,
.diagram-node-unit .diagram-sensors [data-sensor-tag].sensor-health-noise small { color: #5b21b6 !important; }
.diagram-node [data-sensor-tag].sensor-health-noise strong,
.diagram-node-unit .diagram-sensors [data-sensor-tag].sensor-health-noise strong { color: #6d28d9 !important; }

/* ── Dark-theme adjustments for process flow sensor cards ── */
html[data-theme="dark"] .diagram-node .diagram-sensors > [data-sensor-tag],
html[data-theme="dark"] .diagram-node-unit .diagram-sensors > [data-sensor-tag] {
  background: #1e293b !important;
  border-color: #334155 !important;
  border-left-color: #38bdf8 !important;
}
html[data-theme="dark"] .diagram-node .diagram-sensors strong,
html[data-theme="dark"] .diagram-node-unit .diagram-sensors strong { color: #93c5fd !important; font-weight: 500 !important; }

html[data-theme="dark"] .diagram-node [data-sensor-tag].sensor-health-normal,
html[data-theme="dark"] .diagram-node-unit .diagram-sensors [data-sensor-tag].sensor-health-normal {
  background: #052e16 !important; border-left-color: #10b981 !important; color: #a7f3d0 !important;
}
html[data-theme="dark"] .diagram-node [data-sensor-tag].sensor-health-warning,
html[data-theme="dark"] .diagram-node-unit .diagram-sensors [data-sensor-tag].sensor-health-warning {
  background: #431407 !important; border-left-color: #f59e0b !important; color: #fde68a !important;
}
html[data-theme="dark"] .diagram-node [data-sensor-tag].sensor-health-danger,
html[data-theme="dark"] .diagram-node-unit .diagram-sensors [data-sensor-tag].sensor-health-danger {
  background: #3b0764 !important; border-left-color: #f43f5e !important; color: #fecdd3 !important;
}
html[data-theme="dark"] .diagram-node [data-sensor-tag].sensor-health-neutral,
html[data-theme="dark"] .diagram-node-unit .diagram-sensors [data-sensor-tag].sensor-health-neutral {
  background: #1e293b !important; border-color: #334155 !important; color: #94a3b8 !important;
}
/* General dark mode neutral — clean dark slate */
html[data-theme="dark"] [data-sensor-tag].sensor-health-neutral,
html[data-theme="dark"] .inline-master-sensor.sensor-health-neutral,
html[data-theme="dark"] .metric-card.sensor-health-neutral,
html[data-theme="dark"] .equipment-card.sensor-health-neutral {
  border-color: #334155 !important;
  background: #1e293b !important;
  color: #94a3b8 !important;
  box-shadow: none !important;
}
html[data-theme="dark"] .diagram-node [data-sensor-tag].sensor-health-stale,
html[data-theme="dark"] .diagram-node-unit .diagram-sensors [data-sensor-tag].sensor-health-stale {
  background: #0f172a !important; border-left-color: #64748b !important; color: #94a3b8 !important;
}
html[data-theme="dark"] .diagram-node [data-sensor-tag].sensor-health-noise,
html[data-theme="dark"] .diagram-node-unit .diagram-sensors [data-sensor-tag].sensor-health-noise {
  background: #2e1065 !important; border-left-color: #8b5cf6 !important; color: #ddd6fe !important;
}

/* ── pH Flow Section ───────────────────────────────────────────────────────── */
.ph-flow-section {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  padding: 16px 16px 14px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .04);
}

.ph-flow-section--empty {
  padding: 20px;
}

.ph-flow-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: -16px -16px 14px;
  padding: 12px 16px;
  border-radius: 14px 14px 0 0;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%);
  flex-wrap: wrap;
}

.ph-flow-header h2 {
  margin: 4px 0 0;
  font-size: 17px;
  font-weight: 700;
  color: #fff;
}

.ph-flow-header .eyebrow {
  color: rgba(255, 255, 255, .75);
  margin: 0;
}

.ph-flow-header .ph-flow-bm {
  background: rgba(255, 255, 255, .15);
  border-color: rgba(255, 255, 255, .3);
  color: rgba(255, 255, 255, .9);
}

.ph-flow-header .ph-flow-bm strong {
  color: #fff;
}

.ph-flow-bm {
  font-size: 12px;
  color: var(--muted);
  background: var(--bg, #f8fafc);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px 13px;
  white-space: nowrap;
  line-height: 1.7;
  flex-shrink: 0;
}

.ph-flow-bm strong {
  color: var(--ink);
  font-weight: 700;
}

/* ── Process flow track ── */
.ph-flow-track {
  display: flex;
  align-items: stretch;
  gap: 0;
  overflow-x: auto;
  padding-bottom: 2px;
  margin-bottom: 20px;
}

/* ── Node card ── */
.ph-flow-node {
  flex: 1;
  min-width: 72px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 8px 7px 7px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: border-color .2s;
}

/* State — border accent only, bg stays white */
.ph-flow-node.ph-card--ok    { border-left-color: var(--ok); }
.ph-flow-node.ph-card--warn  { border-left-color: var(--warn); }
.ph-flow-node.ph-card--danger{ border-left-color: var(--danger); }

/* Process label (eyebrow) colored by state */
.ph-card--ok     .ph-node-process { color: #0a7a54; }
.ph-card--warn   .ph-node-process { color: #b06000; }
.ph-card--danger .ph-node-process { color: #c72d2d; }

/* Big pH number colored by state */
.ph-card--ok     .ph-node-ph strong { color: #0a9e6e; }
.ph-card--warn   .ph-node-ph strong { color: #c97a00; }
.ph-card--danger .ph-node-ph strong { color: #e03131; }

/* "pH" / "pH rata-rata" unit label */
.ph-card--ok     .ph-node-ph span { color: #0a9e6e; opacity: .75; }
.ph-card--warn   .ph-node-ph span { color: #c97a00; opacity: .75; }
.ph-card--danger .ph-node-ph span { color: #e03131; opacity: .75; }

/* Deviation value colored by state */
.ph-card--ok     .ph-node-dev em { color: #0a9e6e; }
.ph-card--warn   .ph-node-dev em { color: #c97a00; }
.ph-card--danger .ph-node-dev em { color: #e03131; }

.ph-flow-node--no-sensor {
  opacity: .55;
  border-style: dashed;
  background: repeating-linear-gradient(
    135deg,
    transparent,
    transparent 4px,
    rgba(148, 163, 184, .06) 4px,
    rgba(148, 163, 184, .06) 8px
  );
}

/* Node top row: process label + status badge */
.ph-node-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3px;
  flex-wrap: wrap;
}

.ph-node-process {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
}

.ph-node-badge {
  font-size: 8px;
  font-weight: 700;
  padding: 1px 0;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: .03em;
  background: transparent;
  color: var(--muted);
  white-space: nowrap;
}

.ph-node-badge.ph-status--ok     { background: transparent; color: #0a7a54; font-weight: 800; }
.ph-node-badge.ph-status--warn   { background: transparent; color: #b06000; font-weight: 800; }
.ph-node-badge.ph-status--danger { background: transparent; color: #c72d2d; font-weight: 800; }

/* Node body: pH value + deviation */
.ph-node-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.ph-node-ph {
  display: flex;
  align-items: baseline;
  gap: 5px;
  line-height: 1;
}

.ph-node-ph strong {
  font-size: 18px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1;
}

/* Keep every pH reading as plain text; card state already provides the color cue. */
.ph-node-ph strong,
.ph-node-ph .ph-node-avg,
.ph-node-ph [data-sensor-tag] {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

.ph-node-ph span {
  font-size: 9px;
  color: var(--muted);
  font-weight: 600;
  white-space: nowrap;
}

.ph-node-dev {
  font-size: 9px;
  color: var(--muted);
  white-space: nowrap;
}

.ph-node-dev em {
  font-style: normal;
  font-weight: 700;
  color: var(--ink);
}

/* Scale bar */
.ph-node-scale { margin-top: 2px; }

.ph-scale-bar {
  position: relative;
  display: flex;
  height: 5px;
  border-radius: 3px;
  overflow: visible;
  margin-bottom: 4px;
}

.ph-scale-acid    { height: 100%; background: rgba(244, 63, 94, .30); border-radius: 3px 0 0 3px; }
.ph-scale-neutral { height: 100%; background: rgba(16, 185, 129, .42); }
.ph-scale-base    { height: 100%; background: rgba(245, 158, 11, .25); border-radius: 0 3px 3px 0; }

.ph-scale-needle {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--brand);
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .22);
  transition: left .4s ease;
  z-index: 2;
}

.ph-scale-marks {
  position: relative;
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  color: var(--muted);
}

.ph-scale-marks span[style] {
  position: absolute;
  transform: translateX(-50%);
}

/* ── Connector between nodes ── */
.ph-flow-conn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 0;
  min-width: 18px;
  flex-shrink: 0;
  position: relative;
}

.ph-conn-line {
  width: 100%;
  height: 2px;
  background: var(--line);
  position: relative;
  border-radius: 1px;
}

.ph-conn-line::after {
  content: '▶';
  position: absolute;
  right: -7px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 8px;
  color: var(--muted);
}

.ph-conn-delta {
  display: none;
}

.ph-conn-delta--ok   { color: var(--ok);   background: transparent; }
.ph-conn-delta--warn { color: var(--warn); background: transparent; }

/* ── KPI summary strip ── */
.ph-flow-kpi {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.ph-kpi-item span {
  display: block;
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: 4px;
}

.ph-kpi-item strong {
  display: block;
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
}

.ph-kpi-item--warn strong { color: var(--warn); }
.ph-kpi-item--ok strong   { color: var(--ok); }
.ph-kpi-item--high strong { color: #f97316; }
.ph-kpi-item--low strong  { color: #0ea5e9; }

/* Compliance donut section */
.ph-compliance-section {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.ph-compliance-header {
  margin-bottom: 14px;
}

.ph-compliance-header .eyebrow {
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin: 0 0 4px;
}

.ph-compliance-header h3 {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 4px;
  color: var(--ink);
}

.ph-compliance-note {
  font-size: 12px;
  color: var(--muted);
  margin: 0;
}

.ph-compliance-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.ph-compliance-empty {
  color: var(--muted);
  font-size: 13px;
  padding: 12px 0;
}

.ph-comp-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 10px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface, #fff);
  min-width: 88px;
  flex: 1 1 88px;
  max-width: 120px;
  transition: border-color .2s, box-shadow .2s;
}

.ph-comp-card--ok     { border-color: var(--ok);   background: rgba(16,185,129,.05); }
.ph-comp-card--warn   { border-color: var(--warn);  background: rgba(245,158,11,.05); }
.ph-comp-card--danger { border-color: var(--danger);background: rgba(244,63,94,.05);  }
.ph-comp-card--no-data{ opacity: .5; }

.ph-comp-donut {
  position: relative;
  width: 52px;
  height: 52px;
}

.ph-comp-donut svg {
  width: 100%;
  height: 100%;
  display: block;
}

.ph-comp-bg {
  fill: none;
  stroke: var(--line);
  stroke-width: 5;
}

.ph-comp-fill {
  fill: none;
  stroke-width: 5;
  stroke-linecap: round;
  transition: stroke-dasharray .4s ease;
}

.ph-comp-fill--ok     { stroke: var(--ok); }
.ph-comp-fill--warn   { stroke: var(--warn); }
.ph-comp-fill--danger { stroke: var(--danger); }
.ph-comp-fill--muted  { stroke: var(--line); }

.ph-comp-pct {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink);
}

.ph-comp-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  text-align: center;
  line-height: 1.3;
}

.ph-comp-val {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  text-align: center;
}

/* Dark mode */
html[data-theme="dark"] .ph-flow-section {
  background: var(--panel);
  border-color: var(--line);
}

html[data-theme="dark"] .ph-flow-header {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%);
}

html[data-theme="dark"] .ph-flow-node {
  background: rgba(255, 255, 255, .04);
  border-color: var(--line);
}

html[data-theme="dark"] .ph-flow-node.ph-card--ok    { background: rgba(16, 185, 129, .06); }
html[data-theme="dark"] .ph-flow-node.ph-card--warn  { background: rgba(245, 158, 11, .06); }
html[data-theme="dark"] .ph-flow-node.ph-card--danger{ background: rgba(244, 63, 94, .06);  }

html[data-theme="dark"] .ph-flow-bm,
html[data-theme="dark"] .ph-conn-delta {
  background: var(--panel);
  border-color: var(--line);
}

html[data-theme="dark"] .ph-comp-card {
  background: rgba(255,255,255,.03);
  border-color: var(--line);
}
html[data-theme="dark"] .ph-comp-card--ok     { background: rgba(16,185,129,.06); }
html[data-theme="dark"] .ph-comp-card--warn   { background: rgba(245,158,11,.06); }
html[data-theme="dark"] .ph-comp-card--danger { background: rgba(244,63,94,.06); }

@media (min-width: 901px) {
  .ph-flow-kpi { grid-template-columns: repeat(6, 1fr); }
}

@media (max-width: 900px) {
  .ph-flow-track { flex-wrap: wrap; }
  .ph-flow-node  { min-width: 80px; flex: 1 1 80px; }
  .ph-flow-conn  { display: none; }
  .ph-flow-kpi   { grid-template-columns: repeat(2, 1fr); }
  .ph-comp-card  { max-width: 100%; }
}

/* ───────────────────────────────────────────────────────────────────────────
   Equalization Quality Overview  (pH compliance + pH dosing efficiency)
─────────────────────────────────────────────────────────────────────────── */
.eq-quality-section {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--glow);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ── Quality cards grid ── */
.eq-quality-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* ── Individual quality card ── */
.eq-quality-card {
  border: 1px solid var(--line);
  border-left: 6px solid var(--line);
  border-radius: 10px;
  background: rgba(255,255,255,.98);
  box-shadow: 0 1px 6px rgba(11,79,122,.05);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-left-color .3s, background .3s, box-shadow .3s;
}
.eq-quality-card.eq-card--ok {
  border-left-color: #0a9e6e;
  background: linear-gradient(160deg, #e6faf3 0%, #f5fffb 55%, #fff 100%);
  box-shadow: 0 4px 20px rgba(10,158,110,.18), 0 1px 4px rgba(0,0,0,.05);
}
.eq-quality-card.eq-card--warn {
  border-left-color: #c97a00;
  background: linear-gradient(160deg, #fff3d6 0%, #fffbee 55%, #fff 100%);
  box-shadow: 0 4px 20px rgba(201,122,0,.20), 0 1px 4px rgba(0,0,0,.05);
}
.eq-quality-card.eq-card--danger {
  border-left-color: #c72d2d;
  background: linear-gradient(160deg, #fde8e8 0%, #fff5f5 55%, #fff 100%);
  box-shadow: 0 4px 22px rgba(199,45,45,.22), 0 1px 4px rgba(0,0,0,.05);
}

/* ── Big number colored by state ── */
.eq-card--ok   .eq-qcard-num strong { color: #0a7a54; }
.eq-card--warn .eq-qcard-num strong { color: #a05f00; }
.eq-card--danger .eq-qcard-num strong { color: #c72d2d; }

/* ── Card title tinted by state ── */
.eq-card--ok   .eq-qcard-title { color: #0a7a54; }
.eq-card--warn .eq-qcard-title { color: #a05f00; }
.eq-card--danger .eq-qcard-title { color: #c72d2d; }

/* ── Deviation text colored by state ── */
.eq-card--ok   .eq-qcard-dev strong { color: #0a7a54; }
.eq-card--warn .eq-qcard-dev strong { color: #a05f00; }
.eq-card--danger .eq-qcard-dev strong { color: #c72d2d; }

/* ── Scale zones — more visible fills ── */
.eq-card--danger .eq-qscale-zone--bad  { background: rgba(199,45,45,.28);  }
.eq-card--warn   .eq-qscale-zone--warn { background: rgba(201,122,0,.26);  }
.eq-card--ok     .eq-qscale-zone--ok   { background: rgba(10,158,110,.30); }

/* ── Needle colored by state ── */
.eq-card--ok   .eq-qscale-needle { background: #0a9e6e; box-shadow: 0 0 0 2px #0a9e6e, 0 2px 8px rgba(10,158,110,.4); }
.eq-card--warn .eq-qscale-needle { background: #c97a00; box-shadow: 0 0 0 2px #c97a00, 0 2px 8px rgba(201,122,0,.4); }
.eq-card--danger .eq-qscale-needle { background: #c72d2d; box-shadow: 0 0 0 2px #c72d2d, 0 2px 8px rgba(199,45,45,.4); }

/* ── Stats bottom bar tinted ── */
.eq-card--ok   .eq-qcard-stats { background: rgba(10,158,110,.07); }
.eq-card--warn .eq-qcard-stats { background: rgba(201,122,0,.07); }
.eq-card--danger .eq-qcard-stats { background: rgba(199,45,45,.07); }

/* ── Card header ── */
.eq-qcard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px 10px;
  border-bottom: 1px solid var(--line);
  gap: 8px;
  flex-wrap: wrap;
}
.eq-qcard-title {
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);   /* neutral — never colored */
}
.eq-qcard-norm {
  font-size: 11px;
  color: var(--muted);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 3px 10px;
  white-space: nowrap;
}

/* ── Card body: value + scale ── */
.eq-qcard-reading {
  flex: 1;
  padding: 16px 18px 12px;
  display: flex;
  align-items: center;
  gap: 20px;
}
.eq-qcard-num {
  text-align: center;
  min-width: 72px;
}
.eq-qcard-num strong {
  display: block;
  font-size: 36px;
  font-weight: 700;
  line-height: 1;
  color: var(--ink);     /* always dark — never colored */
  letter-spacing: -.03em;
}
.eq-qcard-num small {
  display: block;
  font-size: 11px;
  color: var(--muted);
  margin-top: 5px;
}
/* Suppress sensor-health background/border on value elements inside quality cards
   and flow nodes — health state is already expressed via the card's left border.
   Keep color change only (text color is inherited from sensor-health-* via cascade). */
.eq-qcard-num [data-sensor-tag],
.eq-rnode [data-sensor-tag] {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}
.eq-qcard-scale-wrap { flex: 1; }

/* Scale track — zones use low-opacity color, no heavy fills */
.eq-qscale-track {
  position: relative;
  height: 10px;
  border-radius: 5px;
  display: flex;
  overflow: visible;
  background: var(--bg);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.07);
}
.eq-qscale-zone { height: 100%; }
.eq-qscale-zone:first-child { border-radius: 5px 0 0 5px; }
.eq-qscale-zone:last-child  { border-radius: 0 5px 5px 0; }
.eq-qscale-zone--bad  { background: rgba(216,68,68,.14);  }
.eq-qscale-zone--ok   { background: rgba(0,168,120,.18);  }
.eq-qscale-zone--warn { background: rgba(214,138,0,.12);  }

/* Needle — single brand color */
.eq-qscale-needle {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--brand);
  border: 2.5px solid #fff;
  box-shadow: 0 0 0 1.5px var(--brand), 0 2px 6px rgba(11,79,122,.3);
  transition: left .55s cubic-bezier(.4,0,.2,1);
  left: 50%;
  z-index: 2;
}
.eq-qscale-labels {
  position: relative;
  height: 16px;
  margin-top: 6px;
}
.eq-qscale-labels span {
  position: absolute;
  font-size: 10px;
  color: var(--muted);
  transform: translateX(-50%);
  left: 0;
}
.eq-qscale-labels span:first-child { transform: none; }
.eq-qscale-end { right: 0 !important; left: auto !important; transform: none !important; }

/* ── Card footer ── */
.eq-qcard-footer {
  padding: 9px 16px 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  border-top: 1px solid var(--line);
}
/* Badge: the ONLY status-coloured element */
.eq-qcard-badge {
  font-size: 11px;
  font-weight: 850;
  padding: 4px 12px;
  border-radius: 100px;
  background: var(--line);
  color: var(--muted);
  letter-spacing: .03em;
  white-space: nowrap;
}
.eq-badge--ok     { background: var(--soft-ok);     color: #0d7358; }
.eq-badge--warn   { background: var(--soft-warn);   color: #875600; }
.eq-badge--danger { background: var(--soft-danger); color: #9b2424; }

.eq-qcard-dev        { font-size: 12px; color: var(--muted); }
.eq-qcard-dev strong { font-weight: 700; color: var(--ink); }

/* ── Dark header strip ─────────────────────────────────────────────────── */
.eq-quality-header {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%);
  border-radius: 13px 13px 0 0;
  padding: 18px 22px 16px;
  margin: -24px -24px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.eq-quality-header .eyebrow {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .75);
  margin: 0 0 4px;
}
.eq-quality-header h2 {
  color: #fff;
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}
html[data-theme="dark"] .eq-quality-header {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%);
}
html[data-theme="dark"] .eq-quality-header .eyebrow { color: rgba(255,255,255,.75); }
html[data-theme="dark"] .eq-quality-header h2 { color: #fff; }

/* ── Stats bar below footer ─────────────────────────────────────────────── */
.eq-qcard-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
  background: var(--bg);
  border-radius: 0 0 9px 9px;
}
.eq-qcard-stat {
  text-align: center;
  padding: 8px 4px 10px;
}
.eq-qcard-stat:not(:last-child) { border-right: 1px solid var(--line); }
.eq-qcard-stat small {
  display: block;
  font-size: 9px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 3px;
}
.eq-qcard-stat strong {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}
.eq-qcard-stat.stat--compliance strong { color: var(--muted); }
.eq-qcard-stat.stat--compliance strong.stat-ok   { color: var(--ok); }
.eq-qcard-stat.stat--compliance strong.stat-warn { color: var(--warn); }
.eq-qcard-stat.stat--compliance strong.stat-danger { color: var(--danger); }

/* ────────────────────────────────────────────────────────────────────────────
   pH Reduction Efficiency section — white bg, accent only on values & border
────────────────────────────────────────────────────────────────────────── */
.eq-reduction-section {
  background: #fff;
  border-radius: 10px;
  border: 1px solid var(--line);
  border-left: 5px solid var(--line);
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: background .3s, border-color .3s, box-shadow .3s;
}
/* Border accent only — bg stays white */
.eq-reduction-section.eff--ok    { border-left-color: #0a9e6e; }
.eq-reduction-section.eff--warn  { border-left-color: #c97a00; }
.eq-reduction-section.eff--danger{ border-left-color: #c72d2d; }

/* Eyebrow label colored by state */
.eff--ok   .eq-reduction-eyebrow { color: #0a7a54; }
.eff--warn .eq-reduction-eyebrow { color: #a05f00; }
.eff--danger .eq-reduction-eyebrow { color: #c72d2d; }

/* Node value numbers colored by state */
.eff--ok   .eq-rnode > strong { color: #0a7a54; }
.eff--warn .eq-rnode > strong { color: #a05f00; }
.eff--danger .eq-rnode > strong { color: #c72d2d; }

/* Target node chip colored */
.eff--ok   .eq-rnode--target .eq-rnode-chip { color: #0a9e6e; border-color: #0a9e6e; background: rgba(10,158,110,.08); font-weight: 900; }
.eff--warn .eq-rnode--target .eq-rnode-chip { color: #c97a00; border-color: #c97a00; background: rgba(201,122,0,.08); font-weight: 900; }
.eff--danger .eq-rnode--target .eq-rnode-chip { color: #c72d2d; border-color: #c72d2d; background: rgba(199,45,45,.08); font-weight: 900; }

/* Connector delta value colored */
.eff--ok   .eq-rconnector-meta > strong { color: #0a7a54; }
.eff--warn .eq-rconnector-meta > strong { color: #a05f00; }
.eff--danger .eq-rconnector-meta > strong { color: #c72d2d; }

/* Progress track fill color */
.eff--ok   .eq-eff-track { background: rgba(10,158,110,.15); }
.eff--warn .eq-eff-track { background: rgba(201,122,0,.15); }
.eff--danger .eq-eff-track { background: rgba(199,45,45,.15); }

/* Note text color only — no background tint */
.eff--ok   .eq-eff-note { color: #0a5f40; }
.eff--warn .eq-eff-note { color: #7a4800; }
.eff--danger .eq-eff-note { color: #9b1e1e; }
.eq-reduction-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.eq-reduction-header h3 {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  margin: 3px 0 0;
}
.eq-reduction-eyebrow {
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 2px;
}

/* Efficiency % — large, coloured only when data is present */
.eq-eff-pct {
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--muted);
}
.eq-eff--ok     { color: var(--ok);     }
.eq-eff--warn   { color: var(--warn);   }
.eq-eff--danger { color: var(--danger); }

/* ── Flow diagram ── */
.eq-reduction-flow {
  display: flex;
  align-items: stretch;
  gap: 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px 8px;
  overflow-x: auto;
}
.eq-rnode {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 100px;
  text-align: center;
  padding: 4px 10px;
}
.eq-rnode-chip {
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .09em;
  padding: 3px 10px;
  border-radius: 100px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--muted);
}
/* Chip color: single accent color per node, no background fill */
.eq-rnode--inlet  .eq-rnode-chip { color: var(--brand);  border-color: var(--brand-2); }
.eq-rnode--eq     .eq-rnode-chip { color: var(--ok);     border-color: var(--ok);      }
.eq-rnode--target .eq-rnode-chip { color: var(--purple);  border-color: var(--purple);  }

.eq-rnode > span  { font-size: 11px; color: var(--muted); }
.eq-rnode > strong {
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
  letter-spacing: -.02em;
}
.eq-rnode > small { font-size: 11px; color: var(--muted); }

/* Connectors */
.eq-rconnector {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 80px;
  padding: 4px 0;
}
.eq-rconnector-bar {
  display: flex;
  align-items: center;
  width: 100%;
}
.eq-rconnector-line {
  flex: 1;
  height: 1px;
  background: var(--line-strong);
}
.eq-rconnector--dashed .eq-rconnector-line {
  background: repeating-linear-gradient(
    90deg,
    var(--line-strong) 0, var(--line-strong) 5px,
    transparent 5px, transparent 11px
  );
}
.eq-rconnector-arrow { font-size: 16px; color: var(--muted); line-height: 1; }
.eq-rconnector-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
}
.eq-rconnector-label {
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
}
.eq-rconnector-meta > strong { font-size: 13px; font-weight: 700; color: var(--ink); }

/* ── Progress bar ── */
.eq-eff-bar-wrap { display: flex; align-items: center; gap: 10px; }
.eq-eff-label    { font-size: 11px; color: var(--muted); white-space: nowrap; }
.eq-eff-label--end { margin-left: auto; }
.eq-eff-track {
  flex: 1;
  height: 8px;
  background: var(--line);
  border-radius: 4px;
  overflow: hidden;
}
.eq-eff-fill {
  height: 100%;
  border-radius: 4px;
  background: var(--brand-2);
  transition: width .7s cubic-bezier(.4,0,.2,1), background-color .3s;
}
.eq-eff-fill--ok     { background: var(--ok);     }
.eq-eff-fill--warn   { background: var(--warn);   }
.eq-eff-fill--danger { background: var(--danger); }

/* ── Note text ── */
.eq-eff-note {
  font-size: 12px;
  color: var(--muted);
  margin: 0;
  line-height: 1.6;
  padding: 8px 12px;
  background: var(--panel);
  border-radius: 6px;
}

/* ── Dark mode ── */
html[data-theme="dark"] .eq-quality-card {
  background: var(--panel);
  border-color: var(--line);
}
html[data-theme="dark"] .eq-qcard-norm { background: rgba(255,255,255,.04); }
html[data-theme="dark"] .eq-qscale-track { background: rgba(255,255,255,.04); }
html[data-theme="dark"] .eq-reduction-section { background: rgba(255,255,255,.02); }
html[data-theme="dark"] .eq-reduction-flow { background: var(--panel); }
html[data-theme="dark"] .eq-rnode-chip { background: rgba(255,255,255,.04); }
html[data-theme="dark"] .eq-eff-note { background: rgba(255,255,255,.03); }

/* ── Responsive ── */
@media (max-width: 700px) {
  .eq-quality-grid { grid-template-columns: 1fr; }
  .eq-reduction-flow { flex-direction: column; gap: 10px; padding: 12px; }
  .eq-rconnector { flex-direction: row; width: 100%; }
  .eq-rnode { min-width: 80px; }
  .eq-rnode > strong { font-size: 22px; }
}

/* ══════════════════════════════════════════════════════════
   Aerasi Biology Performance Overview
   ══════════════════════════════════════════════════════════ */

.aerasi-bio-section {
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--card);
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
}

.aerasi-bio-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.aerasi-bio-do-legend {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex-shrink: 0;
}
.aerasi-bio-do-legend > div {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: rgba(255,255,255,.75);
  white-space: nowrap;
}
.aerasi-bio-do-legend > div > i {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  font-style: normal;
}

.aerasi-bio-body {
  padding: 16px 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ── Flow Path Cards ── */
.aerasi-flow-paths {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.aerasi-flow-card {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.aerasi-flow-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: rgba(14,165,233,.05);
  flex-wrap: wrap;
}
.aerasi-flow-card[data-aerasi-flow="a"] .aerasi-flow-card-head {
  background: rgba(14,165,233,.08);
  border-bottom-color: rgba(14,165,233,.2);
}
.aerasi-flow-card[data-aerasi-flow="b"] .aerasi-flow-card-head {
  background: rgba(16,185,129,.08);
  border-bottom-color: rgba(16,185,129,.2);
}
.aerasi-flow-card[data-aerasi-flow="a"] { border-top: 3px solid #0ea5e9; }
.aerasi-flow-card[data-aerasi-flow="b"] { border-top: 3px solid #10b981; }

.aerasi-flow-label {
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
  display: block;
}
.aerasi-flow-card[data-aerasi-flow="a"] .aerasi-flow-label { color: #0284c7; }
.aerasi-flow-card[data-aerasi-flow="b"] .aerasi-flow-label { color: #059669; }

.aerasi-flow-route {
  font-size: 11px;
  color: var(--muted);
  display: block;
  margin-top: 2px;
}

.aerasi-flow-eff-pills {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.aerasi-flow-eff-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}
.aerasi-flow-eff-pill > span {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.aerasi-flow-eff-pill > strong {
  font-size: 22px;
  font-weight: 900;
  color: var(--text);
  line-height: 1;
}

.aerasi-flow-diagram {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
  row-gap: 5px;
}

.aerasi-flow-node {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 20px;
  background: var(--line);
  color: var(--muted);
  white-space: nowrap;
}
.aerasi-flow-node--start { background: #0ea5e914; color: #0284c7; }
.aerasi-flow-node--mid   { background: #10b98114; color: #059669; }
.aerasi-flow-node--end   { background: #8b5cf614; color: #7c3aed; }

.aerasi-flow-arrow-svg {
  width: 20px;
  height: 10px;
  flex-shrink: 0;
  color: var(--muted);
  opacity: .6;
}

.aerasi-flow-params-grid {
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.aerasi-flow-param-block {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.aerasi-flow-param-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.aerasi-flow-param-cells {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.aerasi-flow-cell {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 50px;
}
.aerasi-flow-cell > span { font-size: 10px; color: var(--muted); }
.aerasi-flow-cell > strong { font-size: 15px; font-weight: 600; color: var(--text); }
.aerasi-flow-cell > small { font-size: 10px; color: var(--muted); }

.aerasi-flow-cell--eff > strong { font-size: 20px; font-weight: 700; }

/* ── Per-Bak Biology Cards ── */
.aerasi-bak-bio-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.aerasi-bak-bio-card {
  border: 1px solid var(--line);
  border-top: 3px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-top-color .3s;
}

.aerasi-bak-bio-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--card);
}

.aerasi-bak-bio-num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #0ea5e9;
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .3s;
}

.aerasi-bak-bio-title {
  flex: 1;
  min-width: 0;
}
.aerasi-bak-bio-title > strong {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.aerasi-bak-bio-title > span {
  display: block;
  font-size: 11px;
  color: var(--muted);
}

.aerasi-bak-bio-status {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 20px;
  background: var(--line);
  color: var(--muted);
  flex-shrink: 0;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: background .3s, color .3s, border-color .3s;
}

.aerasi-bak-bio-gauge-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}

.aerasi-bak-do-gauge {
  width: 78px;
  height: 78px;
  flex-shrink: 0;
}

.aerasi-bak-bio-sensor-list {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.aerasi-bak-sensor-row {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
}
.aerasi-bak-sensor-row > span { color: var(--muted); flex-shrink: 0; min-width: 36px; font-size: 10px; }
.aerasi-bak-sensor-row > strong { font-size: 14px; font-weight: 600; color: var(--text); flex: 1; text-align: right; }
.aerasi-bak-sensor-row > small { color: var(--muted); font-size: 10px; flex-shrink: 0; }

.aerasi-bak-no-sensor {
  margin: 0;
  font-size: 10px;
  color: var(--muted);
  font-style: italic;
  line-height: 1.4;
}

.aerasi-bak-bio-growth {
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
}

.aerasi-bak-growth-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 10px;
  color: var(--muted);
}
.aerasi-bak-growth-header > strong { font-size: 18px; font-weight: 700; color: var(--text); line-height: 1; }

.aerasi-bak-growth-bar {
  height: 8px;
  background: var(--line);
  border-radius: 4px;
  overflow: hidden;
}

.aerasi-bak-growth-fill {
  height: 100%;
  width: 0;
  border-radius: 3px;
  background: #10b981;
  transition: width .55s ease, background-color .3s;
}

.aerasi-bak-forecast {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  margin-top: 2px;
}

.aerasi-bak-forecast-icon {
  flex-shrink: 0;
  font-size: 12px;
  padding: 1px 5px;
  border-radius: 20px;
  background: var(--line);
  line-height: 1.4;
}

.aerasi-bak-forecast-text {
  font-size: 11px;
  color: var(--text);
  line-height: 1.45;
  font-weight: 500;
  transition: color .3s;
}

/* Dark mode */
html[data-theme="dark"] .aerasi-bio-section { background: var(--panel); }
html[data-theme="dark"] .aerasi-flow-card   { background: var(--panel); }
html[data-theme="dark"] .aerasi-bak-bio-card { background: var(--panel); }
html[data-theme="dark"] .aerasi-bak-bio-head { background: rgba(255,255,255,.03); }
html[data-theme="dark"] .aerasi-flow-param-block { background: var(--panel); }

/* Suppress sensor-health coloring inside biology cards */
.aerasi-bio-section [data-sensor-tag].sensor-health-normal,
.aerasi-bio-section [data-sensor-tag].sensor-health-neutral,
.aerasi-bio-section [data-sensor-tag].sensor-health-stale,
.aerasi-bio-section [data-sensor-tag].sensor-health-noise,
.aerasi-bio-section [data-sensor-tag].sensor-health-warning,
.aerasi-bio-section [data-sensor-tag].sensor-health-danger {
  background: none !important;
  border: none !important;
  color: inherit !important;
  box-shadow: none !important;
}

/* Responsive */
@media (max-width: 1100px) {
  .aerasi-bak-bio-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .aerasi-flow-paths { grid-template-columns: 1fr; }
  .aerasi-bak-bio-grid { grid-template-columns: 1fr; }
  .aerasi-bio-do-legend { display: none; }
}

/* ══════════════════════════════════════════════════════════
   Final Outlet — Compliance & Performance Overview
   ══════════════════════════════════════════════════════════ */

.fo-overview-section {
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--card);
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
}

.fo-overview-body {
  padding: 16px 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ── Compliance badge in header ── */
.fo-compliance-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 18px;
  border-radius: 99px;
  background: rgba(255,255,255,.15);
  border: 1.5px solid rgba(255,255,255,.3);
  min-width: 80px;
  transition: background .4s, border-color .4s;
}
.fo-compliance-badge > strong {
  font-size: 18px;
  font-weight: 900;
  color: #fff;
  line-height: 1;
}
.fo-compliance-badge > span {
  font-size: 9px;
  color: rgba(255,255,255,.7);
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* ── Baku mutu config panel ── */
.fo-bm-panel {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  padding: 14px 16px;
}
.fo-bm-panel-head > strong {
  font-size: 13px;
  color: var(--text);
  display: block;
  margin-bottom: 3px;
}
.fo-bm-panel-head > p {
  margin: 0 0 12px;
  font-size: 12px;
  color: var(--muted);
}
.fo-bm-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}
.fo-bm-grid > label {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.fo-bm-grid > label > span {
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
}
.fo-bm-grid > label > input {
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 13px;
  background: var(--card);
  color: var(--text);
  width: 100%;
}
.fo-bm-actions { display: flex; gap: 8px; align-items: center; }

/* ── Top grid: totalizer + param cards ── */
.fo-section-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
  margin-bottom: 10px;
}

.fo-totalizer-pie-card.process-pie-card {
  grid-template-columns: 310px minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  padding: 20px 24px;
  gap: 16px 24px;
  margin-bottom: 16px;
}
.fo-totalizer-pie-card .pie-copy {
  grid-column: 1 / -1;
  margin-bottom: 0;
}
.fo-totalizer-pie-card .mini-donut {
  grid-row: 2;
  grid-column: 1;
  width: 260px;
  height: 260px;
  justify-self: center;
}
.fo-totalizer-pie-card .pie-breakdown {
  grid-row: 2;
  grid-column: 2;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
  align-content: center;
  align-self: center;
}
.fo-param-section {
  margin-bottom: 4px;
}
.fo-pie-empty {
  font-size: 11px;
  color: var(--muted);
  font-style: italic;
  padding: 16px 0;
  text-align: center;
}

/* ── Compliance param cards ── */
.fo-param-section { display: flex; flex-direction: column; gap: 6px; }
.fo-param-section > .fo-section-label { margin-bottom: 0; }
.fo-param-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.fo-param-card {
  --param-clr: var(--muted);
  border: 1px solid var(--line);
  border-top: 3px solid var(--param-clr);
  border-radius: 10px;
  background: var(--bg);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color .3s, background .3s, box-shadow .3s;
}
.fo-param-card.fo-param-ok {
  border-top-color: #10b981;
  background: rgba(16,185,129,.03);
  box-shadow: 0 2px 8px rgba(16,185,129,.08);
}
.fo-param-card.fo-param-warn {
  border-top-color: #f59e0b;
  background: rgba(245,158,11,.03);
  box-shadow: 0 2px 8px rgba(245,158,11,.08);
}
.fo-param-card.fo-param-danger {
  border-top-color: #ef4444;
  background: rgba(239,68,68,.04);
  box-shadow: 0 2px 8px rgba(239,68,68,.1);
}
.fo-param-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.fo-param-chip {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .05em;
  padding: 3px 10px;
  border-radius: 20px;
  width: fit-content;
}
.fo-param-body {
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.fo-param-body > strong {
  font-size: 26px;
  font-weight: 900;
  color: var(--text);
  line-height: 1;
}
.fo-param-unit { font-size: 12px; color: var(--muted); }
.fo-param-bm { font-size: 10px; color: var(--muted); margin-top: -4px; }
.fo-param-status {
  font-size: 10px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 20px;
  background: var(--line);
  color: var(--muted);
  white-space: nowrap;
  border: 1px solid transparent;
  flex-shrink: 0;
}

/* ── Per-parameter stats (avg/min/max) ── */
.fo-param-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  background: rgba(0,0,0,.03);
  border-radius: 8px;
  padding: 8px 6px;
  border: 1px solid var(--line);
}
html[data-theme="dark"] .fo-param-stats { background: rgba(255,255,255,.04); }
.fo-param-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2px;
}
.fo-param-stat + .fo-param-stat {
  border-left: 1px solid var(--line);
}
.fo-param-stat > span {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
}
.fo-param-stat > strong {
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.2;
}
.fo-param-stat > small { font-size: 9px; color: var(--muted); }

/* ── Compliance progress bar ── */
.fo-param-comply-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
}
.fo-param-comply-label > span { font-size: 10px; color: var(--muted); }
.fo-param-comply-label > strong {
  font-size: 14px;
  font-weight: 900;
  color: var(--text);
}
.fo-param-comply-track {
  height: 7px;
  background: var(--line);
  border-radius: 4px;
  overflow: hidden;
}
.fo-param-comply-fill {
  height: 100%;
  border-radius: 4px;
  background: #10b981;
  width: 0%;
  transition: width .7s ease, background .3s;
}

/* ── Compliance per-day table ── */
.fo-compliance-table-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.fo-compliance-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 6px 0 2px;
}
.fo-compliance-table-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.fo-compliance-table-head > div:first-child > strong {
  display: block;
  font-size: 13px;
  color: var(--text);
  margin-bottom: 2px;
}
.fo-compliance-table-head > div:first-child > span {
  font-size: 11px;
  color: var(--muted);
}
.fo-compliance-legend {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--muted);
}
.fo-compliance-legend > span { display: flex; align-items: center; gap: 4px; }
.fo-compliance-legend i {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  font-style: normal;
}

/* Table row highlight colors */
.fo-compliance-table tbody tr.fo-row-ok     { background: #f0fdf4; }
.fo-compliance-table tbody tr.fo-row-warn   { background: #fefce8; }
.fo-compliance-table tbody tr.fo-row-danger { background: #fff1f2; }

/* Cell colors per parameter */
.fo-compliance-table td.fo-cell-ok     { color: #15803d; font-weight: 700; }
.fo-compliance-table td.fo-cell-warn   { color: #a16207; font-weight: 700; }
.fo-compliance-table td.fo-cell-danger { color: #dc2626; font-weight: 700; background: #fff1f2; }

.fo-status-cell { font-weight: 700; white-space: nowrap; }
.fo-compliance-table tbody tr.fo-row-ok   .fo-status-cell { color: #15803d; }
.fo-compliance-table tbody tr.fo-row-warn .fo-status-cell { color: #a16207; }
.fo-compliance-table tbody tr.fo-row-danger .fo-status-cell { color: #dc2626; }

/* Dark mode */
html[data-theme="dark"] .fo-overview-section { background: var(--panel); }
html[data-theme="dark"] .fo-param-card       { background: var(--panel); }
html[data-theme="dark"] .fo-bm-panel         { background: var(--panel); }
html[data-theme="dark"] .fo-bm-grid > label > input { background: var(--panel); }
html[data-theme="dark"] .fo-compliance-table tbody tr.fo-row-ok     { background: rgba(16,185,129,.08); }
html[data-theme="dark"] .fo-compliance-table tbody tr.fo-row-warn   { background: rgba(245,158,11,.08); }
html[data-theme="dark"] .fo-compliance-table tbody tr.fo-row-danger { background: rgba(239,68,68,.08); }
html[data-theme="dark"] .fo-compliance-table td.fo-cell-danger      { background: rgba(239,68,68,.1); }

/* Responsive */
@media (max-width: 900px) {
  .fo-param-cards { grid-template-columns: repeat(2, 1fr); }
  .fo-bm-grid     { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .fo-param-cards { grid-template-columns: 1fr 1fr; }
  .fo-bm-grid     { grid-template-columns: 1fr; }
  .fo-compliance-legend { display: none; }
}

/* ── Final Outlet modern information hierarchy ───────────────────────────── */
.monitoring-page--final-outlet .fo-overview-section {
  border: 0;
  border-radius: 18px;
  background:
    radial-gradient(circle at 95% 0%, rgba(14,165,233,.08), transparent 24%),
    linear-gradient(180deg, #fff 0%, #f8fbfd 100%);
  box-shadow: 0 18px 48px rgba(15,23,42,.08);
}

.monitoring-page--final-outlet .fo-overview-section > .ct-eff-header {
  position: relative;
  overflow: hidden;
  padding: 22px 26px;
  background: linear-gradient(120deg, #063b5d 0%, #075985 52%, #0891b2 100%);
}

.monitoring-page--final-outlet .fo-overview-section > .ct-eff-header::after {
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  right: -80px;
  top: -150px;
  border-radius: 50%;
  border: 42px solid rgba(255,255,255,.07);
  pointer-events: none;
}

.monitoring-page--final-outlet .fo-overview-body {
  padding: 22px;
  gap: 22px;
}

.monitoring-page--final-outlet .fo-compliance-badge {
  min-width: 108px;
  padding: 11px 20px;
  border-radius: 14px;
  background: rgba(255,255,255,.13);
  border-color: rgba(255,255,255,.28);
  backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16);
}

.monitoring-page--final-outlet .fo-compliance-badge > strong {
  font-size: 25px;
  letter-spacing: -.04em;
}

.monitoring-page--final-outlet .fo-compliance-badge > span {
  font-size: 9px;
  font-weight: 800;
}

.monitoring-page--final-outlet [data-fo-bm-toggle] {
  min-height: 42px;
  padding: 0 15px;
  border-radius: 12px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.25);
  color: #fff;
  font-weight: 800;
  backdrop-filter: blur(8px);
}

.monitoring-page--final-outlet .fo-section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 0 2px;
}

.monitoring-page--final-outlet .fo-section-heading > div {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}

.monitoring-page--final-outlet .fo-section-heading strong {
  font-size: 16px;
  color: #0f2940;
  letter-spacing: -.015em;
}

.monitoring-page--final-outlet .fo-section-heading p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
}

.monitoring-page--final-outlet .fo-section-label {
  margin: 0;
  padding: 5px 9px;
  border-radius: 7px;
  background: #e0f2fe;
  color: #0369a1;
  font-size: 9px;
  letter-spacing: .1em;
}

.monitoring-page--final-outlet .fo-param-section {
  gap: 12px;
}

.monitoring-page--final-outlet .fo-param-cards {
  gap: 14px;
}

.monitoring-page--final-outlet .fo-param-card {
  position: relative;
  isolation: isolate;
  min-height: 286px;
  padding: 16px;
  gap: 11px;
  border: 1px solid #dce8ef;
  border-top: 0;
  border-radius: 15px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 10px 24px rgba(15,23,42,.055);
  overflow: hidden;
}

.monitoring-page--final-outlet .fo-param-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: var(--param-clr);
  z-index: -1;
}

.monitoring-page--final-outlet .fo-param-card::after {
  content: "";
  position: absolute;
  width: 120px;
  height: 120px;
  right: -54px;
  top: -54px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--param-clr) 9%, transparent);
  z-index: -1;
}

.monitoring-page--final-outlet .fo-param-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--param-clr) 34%, #dce8ef);
  box-shadow: 0 16px 32px rgba(15,23,42,.09);
}

.monitoring-page--final-outlet .fo-param-card.fo-param-ok,
.monitoring-page--final-outlet .fo-param-card.fo-param-warn,
.monitoring-page--final-outlet .fo-param-card.fo-param-danger {
  background: rgba(255,255,255,.96);
}

.monitoring-page--final-outlet .fo-param-top {
  min-height: 30px;
}

.monitoring-page--final-outlet .fo-param-chip {
  padding: 5px 11px;
  border-radius: 8px;
  font-size: 11px;
}

.monitoring-page--final-outlet .fo-param-status {
  padding: 5px 10px;
  border-radius: 8px;
  font-size: 9px;
  box-shadow: 0 3px 10px rgba(15,23,42,.05);
}

.monitoring-page--final-outlet .fo-param-body {
  align-items: flex-end;
  gap: 6px;
  min-height: 46px;
}

.monitoring-page--final-outlet .fo-param-body > strong {
  font-size: clamp(28px, 2.2vw, 36px);
  letter-spacing: -.045em;
  line-height: .95;
}

.monitoring-page--final-outlet .fo-param-unit {
  padding-bottom: 3px;
  font-size: 11px;
  font-weight: 700;
}

.monitoring-page--final-outlet .fo-param-bm {
  width: fit-content;
  margin-top: -2px;
  padding: 4px 8px;
  border: 1px solid color-mix(in srgb, var(--param-clr) 18%, #dce8ef);
  border-radius: 7px;
  background: color-mix(in srgb, var(--param-clr) 5%, #fff);
  color: #52677a;
  font-size: 10px;
  font-weight: 700;
}

/* Global sensor-health styles should not draw boxes behind the main reading. */
.monitoring-page--final-outlet .fo-param-body .fo-param-reading,
.monitoring-page--final-outlet .fo-param-body .fo-param-reading[class*="sensor-health-"] {
  display: inline !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  outline: 0 !important;
}

.monitoring-page--final-outlet .fo-param-stats {
  padding: 10px 6px;
  border: 0;
  border-radius: 11px;
  background: #f4f8fa;
}

.monitoring-page--final-outlet .fo-param-stat > span {
  font-size: 8px;
  letter-spacing: .09em;
}

.monitoring-page--final-outlet .fo-param-stat > strong {
  margin-top: 2px;
  font-size: 15px;
}

.monitoring-page--final-outlet .fo-param-comply-bar {
  margin-top: auto;
  padding-top: 2px;
}

.monitoring-page--final-outlet .fo-param-comply-label > span {
  font-weight: 650;
}

.monitoring-page--final-outlet .fo-param-comply-label > strong {
  font-size: 16px;
}

.monitoring-page--final-outlet .fo-param-comply-track {
  height: 8px;
  background: #e5eef3;
}

.monitoring-page--final-outlet .fo-compliance-table-wrap {
  gap: 14px;
  padding: 18px;
  border: 1px solid #dce8ef;
  border-radius: 15px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 10px 24px rgba(15,23,42,.045);
}

.monitoring-page--final-outlet .fo-compliance-table-head {
  align-items: center;
}

.monitoring-page--final-outlet .fo-compliance-table-head > div:first-child > strong {
  font-size: 17px;
  letter-spacing: -.02em;
}

.monitoring-page--final-outlet .fo-compliance-table-head > div:first-child > span {
  display: block;
  margin-top: 4px;
  font-size: 11px;
}

.monitoring-page--final-outlet .fo-compliance-legend {
  padding: 7px 10px;
  border: 1px solid #e1ebf0;
  border-radius: 9px;
  background: #f8fafc;
}

.monitoring-page--final-outlet [data-fo-compliance-refresh] {
  min-height: 38px;
  padding: 0 14px;
  border-radius: 9px;
  border-color: #bae6fd;
  background: #f0f9ff;
  color: #0369a1;
  font-weight: 800;
}

.monitoring-page--final-outlet .fo-compliance-table.table-wrap {
  border: 1px solid #dce8ef;
  border-radius: 12px;
  overflow: auto;
  background: #fff;
}

.monitoring-page--final-outlet .fo-compliance-table table {
  border-collapse: separate;
  border-spacing: 0;
  min-width: 820px;
}

.monitoring-page--final-outlet .fo-compliance-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 13px 16px;
  border-bottom: 1px solid #d8e5ec;
  background: #f3f8fb;
  color: #40586d;
  font-size: 10px;
  letter-spacing: .065em;
  text-transform: uppercase;
}

.monitoring-page--final-outlet .fo-compliance-table tbody td {
  padding: 13px 16px;
  border-bottom: 1px solid #e8eff3;
  background: transparent !important;
  color: #334155;
  font-size: 12px;
}

.monitoring-page--final-outlet .fo-compliance-table tbody tr {
  position: relative;
  background: #fff !important;
}

.monitoring-page--final-outlet .fo-compliance-table tbody tr:nth-child(even) {
  background: #fbfdfe !important;
}

.monitoring-page--final-outlet .fo-compliance-table tbody tr:hover {
  background: #f3f9fc !important;
}

.monitoring-page--final-outlet .fo-compliance-table tbody tr.fo-row-ok td:first-child {
  box-shadow: inset 4px 0 #10b981;
}

.monitoring-page--final-outlet .fo-compliance-table tbody tr.fo-row-warn td:first-child {
  box-shadow: inset 4px 0 #f59e0b;
}

.monitoring-page--final-outlet .fo-compliance-table tbody tr.fo-row-danger td:first-child {
  box-shadow: inset 4px 0 #ef4444;
}

.monitoring-page--final-outlet .fo-compliance-table td.fo-cell-ok,
.monitoring-page--final-outlet .fo-compliance-table td.fo-cell-warn,
.monitoring-page--final-outlet .fo-compliance-table td.fo-cell-danger {
  font-weight: 800;
}

.monitoring-page--final-outlet .fo-compliance-score,
.monitoring-page--final-outlet .fo-status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-weight: 850;
  white-space: nowrap;
}

.monitoring-page--final-outlet .fo-compliance-score {
  min-width: 68px;
  padding: 4px 9px;
  font-size: 12px;
}

.monitoring-page--final-outlet .fo-status-pill {
  gap: 6px;
  padding: 4px 10px;
  font-size: 11px;
}

.monitoring-page--final-outlet .fo-status-pill i {
  font-style: normal;
  font-size: 12px;
}

.monitoring-page--final-outlet .fo-compliance-score--ok,
.monitoring-page--final-outlet .fo-status-pill--ok {
  border-color: #bbf7d0;
  background: #ecfdf5;
  color: #047857;
}

.monitoring-page--final-outlet .fo-compliance-score--warn,
.monitoring-page--final-outlet .fo-status-pill--warn {
  border-color: #fde68a;
  background: #fffbeb;
  color: #a16207;
}

.monitoring-page--final-outlet .fo-compliance-score--danger,
.monitoring-page--final-outlet .fo-status-pill--danger {
  border-color: #fecaca;
  background: #fff1f2;
  color: #dc2626;
}

.monitoring-page--final-outlet .fo-compliance-score--neutral,
.monitoring-page--final-outlet .fo-status-pill--neutral {
  border-color: #e2e8f0;
  background: #f8fafc;
  color: #64748b;
}

html[data-theme="dark"] .monitoring-page--final-outlet .fo-overview-section {
  background: linear-gradient(180deg, #101923, #0d151e);
}

html[data-theme="dark"] .monitoring-page--final-outlet .fo-param-card,
html[data-theme="dark"] .monitoring-page--final-outlet .fo-compliance-table-wrap,
html[data-theme="dark"] .monitoring-page--final-outlet .fo-compliance-table.table-wrap {
  background: #111c27;
  border-color: #263747;
}

html[data-theme="dark"] .monitoring-page--final-outlet .fo-param-stats,
html[data-theme="dark"] .monitoring-page--final-outlet .fo-compliance-legend {
  background: #172432;
  border-color: #263747;
}

html[data-theme="dark"] .monitoring-page--final-outlet .fo-compliance-table thead th {
  background: #172432;
  border-color: #2b3c4b;
  color: #aebdca;
}

html[data-theme="dark"] .monitoring-page--final-outlet .fo-compliance-table tbody tr,
html[data-theme="dark"] .monitoring-page--final-outlet .fo-compliance-table tbody tr:nth-child(even) {
  background: #111c27 !important;
}

html[data-theme="dark"] .monitoring-page--final-outlet .fo-compliance-table tbody tr:hover {
  background: #172432 !important;
}

html[data-theme="dark"] .monitoring-page--final-outlet .fo-compliance-table tbody td {
  border-color: #263747;
  color: #d5dee6;
}

@media (max-width: 1180px) {
  .monitoring-page--final-outlet .fo-param-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .monitoring-page--final-outlet .fo-overview-body {
    padding: 14px;
  }

  .monitoring-page--final-outlet .fo-overview-section > .ct-eff-header {
    padding: 18px;
  }

  .monitoring-page--final-outlet .fo-section-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }

  .monitoring-page--final-outlet .fo-param-cards {
    grid-template-columns: 1fr;
  }

  .monitoring-page--final-outlet .fo-param-card {
    min-height: 0;
  }

  .monitoring-page--final-outlet .fo-totalizer-pie-card.process-pie-card {
    grid-template-columns: 1fr;
    padding: 16px;
  }

  .monitoring-page--final-outlet .fo-totalizer-pie-card .pie-copy,
  .monitoring-page--final-outlet .fo-totalizer-pie-card .mini-donut,
  .monitoring-page--final-outlet .fo-totalizer-pie-card .pie-breakdown {
    grid-column: 1;
  }

  .monitoring-page--final-outlet .fo-totalizer-pie-card .mini-donut {
    grid-row: auto;
    width: 210px;
    height: 210px;
  }

  .monitoring-page--final-outlet .fo-totalizer-pie-card .pie-breakdown {
    grid-row: auto;
    grid-template-columns: 1fr;
  }

  .monitoring-page--final-outlet .fo-compliance-table-wrap {
    padding: 13px;
  }
}

/* Compliance trend chart lines & dots */
.ctc-path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  cursor: crosshair;
  transition: stroke-width .15s, opacity .15s;
}
.ctc-path:hover { stroke-width: 3.5 !important; }
.ctc-dot {
  cursor: crosshair;
  transition: r .12s;
}
.ctc-dot:hover { r: 6; }

/* ================================================================
   ALARM & EVENT PAGE — modern redesign
   ================================================================ */

/* ── KPI grid (6 cards, 3+3 columns) ── */
.alarm-kpi-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.alarm-kpi-card {
  border-radius: 14px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: 0 2px 12px rgba(28,66,92,.06);
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  overflow: hidden;
}
.alarm-kpi-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: 14px 14px 0 0;
}
.alarm-kpi-total::before  { background: linear-gradient(90deg, var(--brand), var(--brand-2)); }
.alarm-kpi-critical::before { background: linear-gradient(90deg, #dc2626, #f87171); }
.alarm-kpi-warning::before  { background: linear-gradient(90deg, #d97706, #fbbf24); }
.alarm-kpi-avg::before      { background: linear-gradient(90deg, #7c3aed, #a78bfa); }

.alarm-kpi-label {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
}
.alarm-kpi-value {
  font-size: 32px;
  font-weight: 900;
  line-height: 1;
  color: var(--ink);
  margin: 4px 0 2px;
}
.alarm-kpi-total  .alarm-kpi-value { color: var(--brand); }
.alarm-kpi-critical .alarm-kpi-value { color: #dc2626; }
.alarm-kpi-warning  .alarm-kpi-value { color: #d97706; }
.alarm-kpi-avg    .alarm-kpi-value { color: #7c3aed; }

.alarm-kpi-sub {
  font-size: 11px;
  color: var(--muted);
  margin: 0;
}

/* ── Donut row (2 donuts side by side) ── */
.alarm-donut-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.alarm-donut-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px 24px;
  box-shadow: 0 2px 12px rgba(28,66,92,.06);
}

.alarm-donut-head {
  margin-bottom: 18px;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.alarm-donut-head strong {
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
}
.alarm-donut-head span {
  font-size: 12px;
  color: var(--muted);
}

.alarm-donut-body {
  display: flex;
  align-items: center;
  gap: 28px;
}

/* Override mini-donut size — default is 280px, too large for this card */
.alarm-donut-body .mini-donut {
  width: 200px;
  height: 200px;
  flex-shrink: 0;
}
.alarm-donut-body .mini-donut strong { font-size: 34px; letter-spacing: -1px; }
.alarm-donut-body .mini-donut span   { font-size: 12px; max-width: 90px; }

.alarm-donut-legend {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

/* Each legend row: dot | label | bar | count | pct */
.alarm-donut-legend > div {
  display: grid;
  grid-template-columns: 10px minmax(60px,1fr) minmax(40px, 80px) 36px 36px;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}
.alarm-donut-legend > div i {
  display: block;          /* <i> is inline by default — must force block for w/h */
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
}
.alarm-donut-legend > div span {
  color: var(--ink);
  font-weight: 700;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.alarm-donut-legend > div .legend-bar-wrap {
  background: var(--line);
  border-radius: 99px;
  height: 6px;
  overflow: hidden;
}
.alarm-donut-legend > div .legend-bar-fill {
  height: 100%;
  border-radius: 99px;
  transition: width .4s ease;
}
.alarm-donut-legend > div strong {
  color: var(--ink);
  font-weight: 800;
  font-size: 13px;
  text-align: right;
}
.alarm-donut-legend > div small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-align: right;
}

.alarm-process-top-name {
  font-size: 10px;
  max-width: 72px;
  text-align: center;
  line-height: 1.3;
  word-break: break-word;
}

/* ── Active alarm cards ── */
.active-alarm-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-radius: 12px;
  margin-bottom: 8px;
  border-left: 4px solid transparent;
  background: var(--panel);
  border: 1px solid var(--line);
  transition: box-shadow .15s;
}
.active-alarm-card:hover { box-shadow: 0 4px 16px rgba(28,66,92,.1); }
.active-alarm-card.danger { border-left-color: var(--danger); background: linear-gradient(135deg, rgba(216,68,68,.05) 0%, var(--panel) 60%); }
.active-alarm-card.warn   { border-left-color: var(--warn);   background: linear-gradient(135deg, rgba(214,138,0,.05) 0%, var(--panel) 60%); }
.active-alarm-card.info   { border-left-color: var(--info);   background: linear-gradient(135deg, rgba(0,119,255,.05) 0%, var(--panel) 60%); }
.active-alarm-card > div  { flex: 1; min-width: 0; }
.active-alarm-card > div span { font-size: 11px; color: var(--muted); font-weight: 700; display: block; margin-bottom: 2px; }
.active-alarm-card > div h3   { font-size: 14px; font-weight: 800; color: var(--ink); margin: 0 0 3px; }
.active-alarm-card > div p    { font-size: 12px; color: var(--muted); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Dark mode */
html[data-theme="dark"] .alarm-kpi-card { background: var(--panel); border-color: var(--line); }
html[data-theme="dark"] .alarm-donut-card { background: var(--panel); border-color: var(--line); }
html[data-theme="dark"] .active-alarm-card { background: var(--panel); border-color: var(--line); }
html[data-theme="dark"] .alarm-kpi-critical .alarm-kpi-value { color: #f87171; }
html[data-theme="dark"] .alarm-kpi-warning  .alarm-kpi-value { color: #fbbf24; }
html[data-theme="dark"] .alarm-kpi-avg      .alarm-kpi-value { color: #a78bfa; }

/* Responsive */
@media (max-width: 1100px) {
  .alarm-kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .alarm-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .alarm-donut-row { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .alarm-kpi-grid { grid-template-columns: 1fr 1fr; }
  .alarm-kpi-value { font-size: 26px; }
}

/* ── Coagulation: aerasi inlet label ──────────────────────────────────────── */
.coag-eff-src-label {
  font-style: normal;
  font-size: 9px;
  background: #f0fdf4;
  color: #15803d;
  border: 1px solid #bbf7d0;
  border-radius: 3px;
  padding: 1px 4px;
  margin-left: 3px;
  vertical-align: middle;
}

/* ── Coagulation: chemical consumption section ────────────────────────────── */
.coag-chem-section {
  background: #fff;
  border-radius: 12px;
  border: 1px solid var(--line);
  padding: 18px 20px 20px;
  margin-bottom: 0;
}
.coag-chem-header { margin-bottom: 14px; }
.coag-chem-header .ct-eff-eyebrow { color: var(--muted); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; display: block; margin-bottom: 3px; }
.coag-chem-header .ct-eff-title { margin: 0 0 2px; font-size: 15px; color: var(--ink); }
.coag-chem-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.coag-chem-card {
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px 16px;
}
.coag-chem-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.coag-chem-card-head strong { display: block; font-size: 13px; font-weight: 700; color: var(--ink); }
.coag-chem-rate-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 7px 10px;
  margin-bottom: 10px;
  font-size: 11.5px;
  color: var(--muted);
}
.coag-chem-rate-row strong { font-size: 14px; font-weight: 700; color: var(--ink); }
.coag-chem-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.coag-chem-stat {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 7px 10px;
}
.coag-chem-stat span { display: block; font-size: 10px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 2px; }
.coag-chem-stat strong { font-size: 13px; font-weight: 700; color: var(--ink); }
.coag-chem-stat--period {
  grid-column: span 2;
  background: #f8fafc;
  border-color: var(--line);
  border-top: 2px solid var(--line);
}
.coag-chem-stat--period strong { color: var(--ink); }

html[data-theme="dark"] .coag-chem-section { background: var(--panel); border-color: var(--line); }
html[data-theme="dark"] .coag-chem-card { background: rgba(255,255,255,.03); border-color: var(--line); }
html[data-theme="dark"] .coag-chem-rate-row { background: rgba(255,255,255,.04); border-color: var(--line); }
html[data-theme="dark"] .coag-chem-stat { background: rgba(255,255,255,.03); border-color: var(--line); }
html[data-theme="dark"] .coag-chem-stat--period { background: rgba(255,255,255,.04); }

/* ── Coagulation: custom process view ────────────────────────────────────── */
.coag-process-view {
  background: #fff;
  border-radius: 12px;
  border: 1px solid var(--line);
  padding: 20px 24px;
}
.coag-pv-flow {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 16px;
}
.coag-pv-process-group { display: flex; flex-direction: column; gap: 6px; }
.coag-pv-process-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  padding: 2px 0 0 2px;
}
.coag-pv-sub-flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 12px;
  align-items: start;
}
.coag-pv-sub-flow--4 {
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
}
.coag-pv-arrow {
  font-size: 18px;
  color: #94a3b8;
  padding-top: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.coag-pv-station {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px;
  border-top: 3px solid transparent;
}
.coag-pv-station--in   { border-top-color: #0ea5e9; }
.coag-pv-station--in2  { border-top-color: #6366f1; }
.coag-pv-station--mid  { border-top-color: #f59e0b; background: #fffdf5; }
.coag-pv-station--mid2 { border-top-color: #a855f7; background: #fdf4ff; }
.coag-pv-station--out  { border-top-color: #10b981; }
.coag-pv-station--out2 { border-top-color: #059669; }
.coag-pv-station-icon {
  width: 36px; height: 36px;
  border-radius: 8px;
  font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 8px;
}
.coag-pv-icon--in   { background: linear-gradient(135deg,#0ea5e9,#0284c7); color: #fff; }
.coag-pv-icon--in2  { background: linear-gradient(135deg,#6366f1,#4f46e5); color: #fff; }
.coag-pv-icon--chem { background: linear-gradient(135deg,#f59e0b,#d97706); color: #fff; }
.coag-pv-icon--chem2{ background: linear-gradient(135deg,#a855f7,#9333ea); color: #fff; }
.coag-pv-icon--out  { background: linear-gradient(135deg,#10b981,#059669); color: #fff; }
.coag-pv-icon--out2 { background: linear-gradient(135deg,#059669,#047857); color: #fff; }
.coag-pv-station h3 { font-size: 13px; font-weight: 600; margin: 0 0 2px; }
.coag-pv-station-sub { font-size: 10px; color: var(--muted); margin: 0 0 10px; }
.coag-pv-rows { display: flex; flex-direction: column; gap: 0; }
.coag-pv-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 6px;
  align-items: center;
  font-size: 12px;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
}
.coag-pv-row:last-child { border-bottom: none; }
.coag-pv-label { color: var(--text); display: flex; align-items: center; gap: 6px; font-size: 12px; }
.coag-pv-row-icon { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.coag-pv-val { font-weight: 600; font-size: 13px; text-align: right; }
.coag-pv-unit { font-size: 10px; color: var(--muted); white-space: nowrap; }
.coag-pv-avg-badge {
  font-style: normal;
  font-size: 9px;
  background: #f1f5f9;
  color: #64748b;
  border: 1px solid #e2e8f0;
  border-radius: 3px;
  padding: 1px 3px;
}
.coag-pv-section-divider {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
  padding: 6px 0 2px;
  border-top: 1px dashed var(--line);
  margin-top: 2px;
}
@media (max-width: 900px) {
  .coag-pv-sub-flow, .coag-pv-sub-flow--4 { grid-template-columns: 1fr; }
  .coag-pv-arrow { display: none; }
  .coag-chem-grid { grid-template-columns: 1fr; }
}
.standard-history-table-wrap {
  max-height: none !important;
  overflow-x: auto;
  overflow-y: visible;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}

.standard-history-table {
  width: 100%;
  min-width: 820px;
  border-collapse: collapse;
}

.standard-history-table th,
.standard-history-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  white-space: nowrap;
}

.standard-history-table th {
  background: color-mix(in srgb, var(--info) 6%, var(--surface));
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .025em;
  text-transform: uppercase;
}

.standard-history-table tbody tr:last-child td {
  border-bottom: 0;
}

.standard-history-table tbody tr:hover {
  background: color-mix(in srgb, var(--info) 4%, transparent);
}

.standard-history-value {
  color: var(--ink);
  font-weight: 800;
}

.standard-history-empty {
  height: 72px;
  color: var(--muted);
  text-align: center !important;
}

.standard-history-loader {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 7px;
  border: 2px solid color-mix(in srgb, var(--info) 22%, transparent);
  border-top-color: var(--info);
  border-radius: 50%;
  vertical-align: -3px;
  animation: standard-history-spin .75s linear infinite;
}

@keyframes standard-history-spin {
  to { transform: rotate(360deg); }
}

.standard-history-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 12px;
}

.standard-history-summary {
  color: var(--muted);
  font-size: 12px;
}

.standard-history-navigation,
.standard-history-pages,
.standard-history-jump {
  display: flex;
  align-items: center;
  gap: 6px;
}

.standard-history-navigation button,
.standard-history-jump input {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
}

.standard-history-navigation button {
  min-width: 38px;
  padding: 7px 10px;
  color: var(--primary);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.standard-history-navigation button:hover:not(:disabled),
.standard-history-navigation button.active {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}

.standard-history-navigation button:disabled {
  opacity: .42;
  cursor: not-allowed;
}

.standard-history-jump {
  margin: 0 4px;
  color: var(--muted);
  font-size: 12px;
}

.standard-history-jump input {
  width: 62px;
  padding: 6px 8px;
  text-align: center;
}

@media (max-width: 980px) {
  .standard-history-pager {
    align-items: flex-start;
    flex-direction: column;
  }

  .standard-history-navigation {
    width: 100%;
    flex-wrap: wrap;
  }
}

.eq-page .process-overview-main {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.eq-summary-card {
  position: relative;
  overflow: hidden;
  border-top: 3px solid var(--line);
}

.eq-summary-card--realtime {
  border-top-color: var(--ok);
}

.eq-summary-card--period {
  border-top-color: var(--info);
    background: linear-gradient(155deg, color-mix(in srgb, var(--info) 5%, var(--panel)) 0%, var(--panel) 68%);
}

.eq-summary-card p b {
  color: var(--primary);
  font-size: 11px;
}

.eq-summary-card.eq-period-ok {
  border-top-color: var(--ok);
}

.eq-summary-card.eq-period-warn {
  border-top-color: var(--warn);
}

.eq-summary-card.eq-period-danger {
  border-top-color: var(--danger);
}

.eq-summary-card.eq-period-loading::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.55) 48%, transparent 76%);
  content: "";
  pointer-events: none;
  transform: translateX(-100%);
  animation: eq-period-loading 1.1s linear infinite;
}

@keyframes eq-period-loading {
  to { transform: translateX(100%); }
}

@media (max-width: 1320px) {
  .eq-page .process-overview-main {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .eq-page .process-overview-main {
    grid-template-columns: 1fr;
  }
}

/* S PIT DAF — operator realtime + management period dashboard */
.daf-page {
  display: grid;
  gap: 16px;
}

.daf-toolbar > div:first-child p:last-child {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.daf-status-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
}

.daf-operation-card,
.daf-master-note,
.daf-section,
.daf-unit-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  box-shadow: var(--shadow-sm);
}

.daf-operation-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-left: 4px solid var(--ok);
}

.daf-live-dot {
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--ok) 14%, transparent);
}

.daf-operation-card.sensor-health-warning {
  border-left-color: var(--warn);
}

.daf-operation-card.sensor-health-warning .daf-live-dot {
  background: var(--warn);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--warn) 14%, transparent);
}

.daf-operation-card.sensor-health-danger {
  border-left-color: var(--danger);
}

.daf-operation-card.sensor-health-danger .daf-live-dot {
  background: var(--danger);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--danger) 14%, transparent);
}

.daf-operation-card small,
.daf-unit-card header small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
}

.daf-operation-card strong {
  display: block;
  margin-top: 2px;
  color: var(--text);
  font-size: 22px;
}

.daf-operation-card p,
.daf-master-note span {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.daf-master-note {
  min-width: 220px;
  display: grid;
  place-content: center;
  padding: 14px 18px;
}

.daf-master-note strong {
  color: var(--info);
  font-size: 20px;
}

.daf-section {
  padding: 17px;
}

.daf-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.daf-section-head h2 {
  margin: 2px 0 0;
  font-size: 18px;
}

.daf-kpi-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 11px;
}

.daf-kpi-card {
  position: relative;
  min-height: 145px;
  padding: 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-top: 3px solid var(--info);
  border-radius: 12px;
  background: color-mix(in srgb, var(--info) 3%, var(--panel));
}

.daf-kpi-card--ph { border-top-color: #06b6d4; }
.daf-kpi-card--quality { border-top-color: #8b5cf6; }
.daf-kpi-card--efficiency { border-top-color: var(--ok); }
.daf-kpi-card--level { border-top-color: #f59e0b; }
.daf-kpi-card--unavailable {
  border-top-color: #94a3b8;
  background: color-mix(in srgb, #94a3b8 5%, var(--panel));
}

.daf-kpi-card > span {
  display: block;
  min-height: 32px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.daf-kpi-card strong {
  display: inline-block;
  margin: 5px 4px 7px 0;
  color: var(--text);
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1;
}

.daf-kpi-card > small {
  color: var(--muted);
  font-size: 11px;
}

.daf-kpi-card p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

.daf-unit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
}

.daf-unit-card {
  padding: 16px;
}

.daf-unit-card header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.daf-unit-card header h3 {
  margin: 2px 0 0;
}

.daf-unit-card header > span,
.daf-period-badge {
  padding: 5px 9px;
  border-radius: 999px;
  color: #047857;
  background: #d1fae5;
  font-size: 11px;
  font-weight: 750;
}

.daf-unit-values {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.daf-unit-values > div {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: color-mix(in srgb, var(--info) 3%, var(--panel));
}

.daf-unit-values span,
.daf-unit-values strong {
  display: block;
}

.daf-unit-values span {
  color: var(--muted);
  font-size: 11px;
}

.daf-unit-values strong {
  margin-top: 4px;
  font-size: 15px;
}

.daf-management-section {
  border-top: 3px solid #0f766e;
}

.daf-management-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 11px;
}

.daf-management-card {
  min-height: 130px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(145deg, color-mix(in srgb, #0f766e 5%, var(--panel)), var(--panel));
}

.daf-management-card > span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.daf-management-card strong {
  display: inline-block;
  margin: 10px 4px 8px 0;
  font-size: 24px;
}

.daf-management-card > small,
.daf-management-card p {
  color: var(--muted);
  font-size: 11px;
}

.daf-management-card p {
  margin: 4px 0 0;
}

.daf-period-ok {
  border-color: color-mix(in srgb, var(--ok) 40%, var(--line));
}

.daf-period-warn {
  border-color: color-mix(in srgb, var(--warn) 50%, var(--line));
}

.daf-period-loading strong {
  opacity: .55;
  animation: eqPeriodPulse 1s ease-in-out infinite alternate;
}

.daf-page .trend-chip small {
  margin-left: 3px;
  color: var(--warn);
  font-size: 9px;
}

@media (max-width: 1400px) {
  .daf-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .daf-unit-values {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .daf-status-strip,
  .daf-unit-grid {
    grid-template-columns: 1fr;
  }

  .daf-kpi-grid,
  .daf-management-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .daf-kpi-grid,
  .daf-management-grid,
  .daf-unit-values {
    grid-template-columns: 1fr;
  }
}

/* DAF blue visual refresh */
.daf-page {
  --daf-navy: #075985;
  --daf-blue: #0284c7;
  --daf-cyan: #06b6d4;
  --daf-pale: #f0f9ff;
}

.daf-toolbar {
  position: relative;
  overflow: hidden;
  padding: 20px 22px;
  border: 0;
  border-radius: 14px;
  color: #fff;
  background:
    radial-gradient(circle at 92% 15%, rgb(255 255 255 / 18%) 0 70px, transparent 71px),
    linear-gradient(108deg, #075985 0%, #087da7 52%, #06b6d4 100%);
  box-shadow: 0 12px 30px rgb(7 89 133 / 18%);
}

.daf-toolbar .eyebrow,
.daf-toolbar h2,
.daf-toolbar > div:first-child p:last-child {
  color: #fff;
}

.daf-toolbar .eyebrow {
  opacity: .78;
}

.daf-toolbar h2 {
  margin-top: 3px;
  font-size: 23px;
}

.daf-toolbar > div:first-child p:last-child {
  opacity: .82;
}

.daf-toolbar .period-control {
  padding: 5px;
  border: 1px solid rgb(255 255 255 / 30%);
  border-radius: 11px;
  background: rgb(255 255 255 / 13%);
  backdrop-filter: blur(8px);
}

.daf-toolbar .period-control button {
  border-color: transparent;
  color: rgb(255 255 255 / 86%);
  background: transparent;
}

.daf-toolbar .period-control button:hover,
.daf-toolbar .period-control button.active {
  color: var(--daf-navy);
  background: #fff;
  box-shadow: 0 4px 12px rgb(7 89 133 / 18%);
}

.daf-toolbar .period-control input {
  border-color: rgb(255 255 255 / 35%);
  color: #fff;
  background: rgb(255 255 255 / 12%);
  color-scheme: dark;
}

.daf-status-strip {
  grid-template-columns: minmax(0, 1fr) 250px;
}

.daf-operation-card {
  position: relative;
  overflow: hidden;
  padding: 18px 22px;
  border: 0;
  border-left: 0;
  color: #fff;
  background: linear-gradient(110deg, #0c4a6e 0%, #0369a1 56%, #0891b2 100%);
  box-shadow: 0 10px 24px rgb(7 89 133 / 14%);
}

.daf-operation-card::after {
  content: "";
  position: absolute;
  top: -55px;
  right: 4%;
  width: 170px;
  height: 170px;
  border: 1px solid rgb(255 255 255 / 15%);
  border-radius: 50%;
}

.daf-operation-card small,
.daf-operation-card strong,
.daf-operation-card p {
  position: relative;
  z-index: 1;
  color: #fff;
}

.daf-operation-card p {
  opacity: .72;
}

.daf-operation-card .daf-live-dot {
  position: relative;
  z-index: 1;
  background: #facc15;
  box-shadow: 0 0 0 6px rgb(250 204 21 / 18%);
}

.daf-operation-card.sensor-health-warning {
  background: linear-gradient(110deg, #075985 0%, #0369a1 54%, #0e7490 100%);
}

.daf-operation-card.sensor-health-danger {
  border-color: transparent !important;
  color: #fff !important;
  background: linear-gradient(110deg, #075985 0%, #0369a1 54%, #0891b2 100%) !important;
  box-shadow:
    inset 5px 0 0 #ef4444,
    0 10px 24px rgb(7 89 133 / 14%) !important;
}

.daf-operation-card.sensor-health-danger .daf-live-dot {
  background: #fb7185;
  box-shadow: 0 0 0 6px rgb(251 113 133 / 20%);
}

.daf-operation-card.sensor-health-danger small,
.daf-operation-card.sensor-health-danger strong,
.daf-operation-card.sensor-health-danger p {
  color: #fff !important;
  text-shadow: 0 1px 2px rgb(3 47 74 / 28%);
}

.daf-operation-card.sensor-health-danger small {
  opacity: .86;
}

.daf-operation-card.sensor-health-danger p {
  opacity: .82;
}

.daf-master-note {
  border: 1px solid #bae6fd;
  background: linear-gradient(145deg, #fff 0%, var(--daf-pale) 100%);
  box-shadow: 0 8px 20px rgb(14 116 144 / 9%);
}

.daf-master-note strong {
  color: var(--daf-blue);
}

.daf-section,
.daf-unit-card {
  border-color: #d7e8f2;
  box-shadow: 0 8px 24px rgb(15 85 120 / 7%);
}

.daf-section {
  overflow: hidden;
  padding: 0;
}

.daf-section-head {
  margin: 0;
  padding: 15px 18px;
  border-bottom: 1px solid #dbeafe;
  background: linear-gradient(90deg, #f0f9ff 0%, #fff 72%);
}

.daf-section-head .eyebrow {
  color: var(--daf-blue);
}

.daf-section > .daf-kpi-grid,
.daf-section > .daf-management-grid {
  padding: 16px 18px 18px;
}

.daf-section-head .badge,
.daf-period-badge {
  border: 1px solid #bae6fd;
  color: #0369a1;
  background: #e0f2fe;
}

.daf-kpi-grid {
  gap: 12px;
}

.daf-kpi-card {
  min-height: 138px;
  border: 1px solid #d9e8f1;
  border-top: 0;
  background: #fff;
  box-shadow: 0 5px 14px rgb(15 85 120 / 6%);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.daf-kpi-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--daf-blue);
}

.daf-kpi-card:hover {
  transform: translateY(-2px);
  border-color: #93c5fd;
  box-shadow: 0 10px 22px rgb(2 132 199 / 12%);
}

.daf-kpi-card--ph::before { background: var(--daf-cyan); }
.daf-kpi-card--quality::before { background: #2563eb; }
.daf-kpi-card--efficiency::before { background: #0ea5e9; }
.daf-kpi-card--level::before { background: #0284c7; }

.daf-kpi-card--unavailable {
  background: #f8fafc;
}

.daf-kpi-card--unavailable::before {
  background: #94a3b8;
}

.daf-kpi-card > span {
  color: #547087;
}

.daf-kpi-card strong {
  color: #0f2940;
}

.daf-kpi-card:not(.daf-kpi-card--unavailable) > small,
.daf-management-card > small {
  display: none;
}

.daf-kpi-card.sensor-health-danger {
  border-color: #fecaca;
  background: linear-gradient(145deg, #fff 0%, #fff1f2 100%);
}

.daf-kpi-card.sensor-health-danger::before {
  background: var(--danger);
}

.daf-kpi-card.sensor-health-danger strong {
  color: #b91c1c;
}

.daf-kpi-card.sensor-health-stale {
  border-color: #d7e1e8;
  background: #f8fafc;
}

.daf-kpi-card.sensor-health-stale::before {
  background: #94a3b8;
}

.daf-unit-card {
  position: relative;
  overflow: hidden;
  padding: 0;
}

.daf-unit-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, var(--daf-blue), var(--daf-cyan));
}

.daf-unit-card header {
  margin: 0;
  padding: 18px 18px 13px;
  border-bottom: 1px solid #e0f2fe;
  background: linear-gradient(90deg, #f0f9ff, #fff);
}

.daf-unit-card header > span {
  border: 1px solid #bae6fd;
  color: #0369a1;
  background: #e0f2fe;
}

.daf-unit-values {
  padding: 14px 16px 16px;
}

.daf-unit-values > div {
  border-color: #dbe8f0;
  background: #fff;
  box-shadow: 0 4px 12px rgb(15 85 120 / 5%);
}

.daf-unit-values > div.has-db-value {
  border-color: #bae6fd;
  background: #f8fdff;
}

.daf-management-section {
  border-top: 0;
}

.daf-management-section .daf-section-head {
  color: #fff;
  background: linear-gradient(105deg, #075985 0%, #087da7 55%, #06b6d4 100%);
}

.daf-management-section .daf-section-head .eyebrow,
.daf-management-section .daf-section-head h2 {
  color: #fff;
}

.daf-management-section .daf-section-head .eyebrow {
  opacity: .76;
}

.daf-management-section .daf-period-badge {
  border-color: rgb(255 255 255 / 30%);
  color: #fff;
  background: rgb(255 255 255 / 15%);
}

.daf-management-grid {
  background: linear-gradient(180deg, #f8fdff, #fff);
}

.daf-management-card {
  position: relative;
  overflow: hidden;
  min-height: 126px;
  border-color: #cfe8f4;
  background: #fff;
  box-shadow: 0 5px 14px rgb(15 85 120 / 6%);
}

.daf-management-card::after {
  content: "";
  position: absolute;
  right: -18px;
  bottom: -30px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgb(6 182 212 / 7%);
}

.daf-management-card > span,
.daf-management-card strong,
.daf-management-card p {
  position: relative;
  z-index: 1;
}

.daf-management-card > span {
  color: #527086;
}

.daf-management-card strong {
  color: #075985;
}

.daf-period-ok {
  border-color: #7dd3fc;
}

.daf-period-warn {
  border-color: #cbd5e1;
  background: #f8fafc;
}

.daf-page .inlet-trend-panel,
.daf-page .inlet-history-panel {
  border-color: #d7e8f2;
  box-shadow: 0 8px 24px rgb(15 85 120 / 7%);
}

@media (max-width: 900px) {
  .daf-status-strip {
    grid-template-columns: 1fr;
  }

  .daf-master-note {
    min-width: 0;
  }
}

/* Restore the original neutral DAF page header */
.daf-page .daf-toolbar {
  position: static;
  overflow: visible;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  background: rgba(255, 255, 255, .96);
  box-shadow: var(--glow);
}

.daf-page .daf-toolbar .eyebrow {
  color: var(--muted);
  opacity: 1;
}

.daf-page .daf-toolbar h2 {
  margin-top: 0;
  color: var(--ink);
  font-size: 24px;
}

.daf-page .daf-toolbar > div:first-child p:last-child {
  color: var(--muted);
  opacity: 1;
}

.daf-page .daf-toolbar .period-control {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
}

.daf-page .daf-toolbar .period-control button {
  border-color: var(--line);
  color: var(--ink);
  background: #fff;
  box-shadow: none;
}

.daf-page .daf-toolbar .period-control button:hover {
  border-color: var(--brand);
  color: var(--brand);
  background: #fff;
  box-shadow: none;
}

.daf-page .daf-toolbar .period-control button.active {
  border-color: var(--brand);
  color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  box-shadow: none;
}

.daf-page .daf-toolbar .period-control input {
  border-color: var(--line);
  color: var(--ink);
  background: #fff;
  color-scheme: light;
}

/* Trend Historical analysis workbench */
.trend-analysis-page { display: grid; gap: 14px; }
.trend-analysis-hero { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:20px 22px; border:1px solid #b9e5f2; border-radius:14px; color:#fff; background:linear-gradient(120deg,#075985 0%,#087ea4 55%,#06b6d4 100%); box-shadow:0 14px 34px rgb(8 126 164 / 18%); }
.trend-analysis-hero h2 { margin:3px 0 5px; font-size:25px; color:#fff; }
.trend-analysis-hero p { margin:0; color:rgb(255 255 255 / 82%); }
.trend-analysis-hero .eyebrow { color:#bae6fd; }
.trend-analysis-presets { display:flex; align-items:end; gap:8px; min-width:360px; }
.trend-analysis-presets label { display:grid; gap:5px; flex:1; }
.trend-analysis-presets label span { font-size:11px; font-weight:800; text-transform:uppercase; color:#dff7ff; }
.trend-analysis-presets select,.trend-analysis-presets button { min-height:40px; border-color:rgb(255 255 255 / 35%); background:rgb(255 255 255 / 94%); }
.trend-analysis-filter { padding:16px; }
.trend-analysis-filter-grid { display:grid; grid-template-columns:minmax(220px,1.05fr) minmax(190px,.9fr) minmax(520px,2.25fr) 145px 180px; gap:12px; align-items:start; }
.trend-analysis-filter-grid > label { display:grid; gap:6px; }
.trend-analysis-filter-grid > label > span { color:var(--muted); font-size:11px; font-weight:800; text-transform:uppercase; }
.trend-analysis-filter-grid select { min-height:42px; border:1px solid var(--line); border-radius:9px; padding:0 10px; color:var(--ink); background:#fff; }
.trend-analysis-period { display:grid; grid-template-columns:auto 1fr; gap:6px 10px; min-width:0; }
.trend-analysis-field-label { grid-column:1/-1; color:var(--muted); font-size:11px; font-weight:800; text-transform:uppercase; }
.trend-analysis-period-buttons { display:flex; gap:6px; }
.trend-analysis-period-buttons button { min-height:42px; padding:0 14px; border:1px solid var(--line); border-radius:9px; color:var(--ink); background:#fff; font-weight:700; }
.trend-analysis-period-buttons button:hover { border-color:#38bdf8; color:#0369a1; }
.trend-analysis-period-buttons button.active { border-color:#0284c7; color:#fff; background:linear-gradient(135deg,#075985,#0891b2); }
.trend-analysis-range-pill { display:flex; align-items:center; justify-content:center; min-height:42px; padding:0 12px; border:1px solid #cfe2ec; border-radius:9px; color:#0f172a; background:#f8fbfd; font-size:12px; font-weight:800; white-space:nowrap; }
.trend-analysis-custom-dates { grid-column:1/-1; display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:10px; border:1px solid #bae6fd; border-radius:10px; background:#f0f9ff; }
.trend-analysis-custom-dates[hidden] { display:none; }
.trend-analysis-custom-dates label { display:grid; gap:5px; }
.trend-analysis-custom-dates label span { color:#526b7c; font-size:10px; font-weight:800; text-transform:uppercase; }
.trend-analysis-custom-dates input { width:100%; min-height:40px; padding:0 10px; border:1px solid #b8d7e7; border-radius:8px; color:#0f172a; background:#fff; color-scheme:light; }
.trend-analysis-period > small { grid-column:1/-1; min-height:14px; color:#dc2626; font-size:10px; }
.trend-analysis-run { min-height:42px; }
.trend-analysis-parameter-head { display:flex; justify-content:space-between; gap:20px; margin:16px 0 9px; padding-top:14px; border-top:1px solid var(--line); }
.trend-analysis-parameter-head div { display:grid; gap:2px; }
.trend-analysis-parameter-head span { color:var(--muted); font-size:12px; }
.trend-analysis-parameter-head > span { align-self:center; padding:5px 9px; border-radius:99px; color:#075985; font-weight:800; background:#e0f2fe; }
.trend-analysis-parameters { display:grid; grid-template-columns:repeat(auto-fill,minmax(245px,1fr)); gap:10px; max-height:250px; overflow:auto; padding:2px; }
.trend-analysis-param { display:flex; gap:10px; align-items:flex-start; min-height:62px; padding:11px 12px; border:1px solid var(--line); border-radius:10px; background:#fff; cursor:pointer; transition:.16s ease; }
.trend-analysis-param:hover,.trend-analysis-param.active { border-color:#38bdf8; background:#f0f9ff; box-shadow:0 5px 14px rgb(14 165 233 / 9%); }
.trend-analysis-param input { width:16px; height:16px; margin-top:2px; accent-color:#0284c7; flex:0 0 auto; }
.trend-analysis-param span { display:grid; gap:2px; min-width:0; }
.trend-analysis-param strong { font-size:12px; line-height:1.3; }
.trend-analysis-param small { overflow:hidden; color:var(--muted); font-size:10px; line-height:1.35; text-overflow:ellipsis; white-space:nowrap; }
.trend-analysis-loading { position:sticky; top:8px; z-index:20; display:flex; justify-content:center; align-items:center; gap:9px; padding:10px 14px; border:1px solid #7dd3fc; border-radius:10px; color:#075985; background:rgb(240 249 255 / 95%); box-shadow:0 10px 28px rgb(14 165 233 / 16%); }
.trend-analysis-loading[hidden] { display:none; }
.trend-analysis-stat-grid { display:grid; grid-template-columns:repeat(8,minmax(125px,1fr)); gap:9px; }
.trend-analysis-stat { min-width:0; padding:13px; border:1px solid #d8e8f1; border-top:3px solid #0ea5e9; border-radius:11px; background:#fff; box-shadow:0 7px 20px rgb(15 85 120 / 6%); }
.trend-analysis-stat.warn { border-top-color:#f59e0b; background:#fffbeb; }.trend-analysis-stat.danger { border-top-color:#ef4444; background:#fff1f2; }
.trend-analysis-stat span,.trend-analysis-management-grid span { display:block; color:var(--muted); font-size:10px; font-weight:800; text-transform:uppercase; }
.trend-analysis-stat strong { display:block; overflow:hidden; margin:7px 0 3px; font-size:18px; text-overflow:ellipsis; white-space:nowrap; }
.trend-analysis-stat small,.trend-analysis-management-grid small { color:var(--muted); font-size:10px; }
.trend-analysis-main-grid { display:grid; grid-template-columns:minmax(0,2.2fr) minmax(310px,.8fr); gap:14px; }
.trend-analysis-chart-panel { min-width:0; }
.trend-analysis-chart-panel > .axis-legend,
.trend-analysis-chart-panel > .trend-time-axis,
.trend-analysis-chart-panel > .clear-legend { display:none !important; }
.trend-analysis-chart-actions,.trend-analysis-export-actions { display:flex; gap:6px; }
.trend-analysis-chart-actions .active { border-color:#0284c7; color:#fff; background:#0284c7; }
.trend-analysis-chart-panel .inlet-chart { position:relative; min-height:390px; }
.trend-analysis-chart-panel svg { height:290px; }
.trend-event-rail { position:absolute; right:5.8%; bottom:71px; left:6.6%; height:18px; border-top:1px dashed #94a3b8; }
.trend-event-rail button { position:absolute; top:-6px; width:11px; height:11px; padding:0; border:2px solid #fff; border-radius:50%; background:#0ea5e9; box-shadow:0 0 0 1px #0ea5e9; transform:translateX(-50%); }
.trend-event-rail button.warn{background:#f59e0b;box-shadow:0 0 0 1px #f59e0b}.trend-event-rail button.danger{background:#ef4444;box-shadow:0 0 0 1px #ef4444}.trend-event-rail button.ok{background:#10b981;box-shadow:0 0 0 1px #10b981}.trend-event-rail button.purple{background:#8b5cf6;box-shadow:0 0 0 1px #8b5cf6}
.trend-analysis-limit-note { display:flex; flex-wrap:wrap; gap:14px; margin-top:8px; color:var(--muted); font-size:11px; }.trend-analysis-limit-note span{display:flex;align-items:center;gap:5px}.trend-analysis-limit-note i{width:16px;height:3px;border-radius:3px;background:#94a3b8}.trend-analysis-limit-note .target{background:#64748b}.trend-analysis-limit-note .hi{background:#f59e0b}.trend-analysis-limit-note .lo{background:#3b82f6}.trend-analysis-limit-note .event{height:9px;width:9px;border-radius:50%;background:#8b5cf6}
.trend-analysis-insight { align-self:stretch; background:linear-gradient(180deg,#fff,#f7fbfd); }
.trend-analysis-insight-block { margin-top:10px; padding:12px; border:1px solid #dcebf2; border-left:3px solid #0ea5e9; border-radius:9px; background:#fff; }
.trend-analysis-insight-block:nth-of-type(3){border-left-color:#f59e0b}.trend-analysis-insight-block:nth-of-type(4){border-left-color:#10b981}
.trend-analysis-insight-block span { color:#075985; font-size:10px; font-weight:900; text-transform:uppercase; }.trend-analysis-insight-block p{margin:5px 0 0;color:#334155;font-size:12px;line-height:1.55}
.trend-analysis-evidence { margin-top:12px; padding:12px; border-radius:9px; background:#eef8fc; }.trend-analysis-evidence strong{font-size:11px;color:#075985}.trend-analysis-evidence ul{margin:7px 0 0;padding-left:17px;color:#475569;font-size:11px;line-height:1.55}
.trend-analysis-management-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:9px; }.trend-analysis-management-grid article{padding:14px;border:1px solid #bae6fd;border-radius:10px;background:linear-gradient(145deg,#fff,#f0f9ff)}.trend-analysis-management-grid strong{display:block;margin:7px 0 3px;color:#075985;font-size:21px}
.trend-analysis-event-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }.trend-analysis-event{display:grid;grid-template-columns:10px minmax(0,1fr) auto;gap:9px;align-items:center;padding:10px;border:1px solid var(--line);border-radius:9px;background:#fff}.trend-analysis-event>i{width:9px;height:9px;border-radius:50%;background:#0ea5e9}.trend-analysis-event.warn>i{background:#f59e0b}.trend-analysis-event.danger>i{background:#ef4444}.trend-analysis-event.ok>i{background:#10b981}.trend-analysis-event.purple>i{background:#8b5cf6}.trend-analysis-event div{display:grid;gap:2px}.trend-analysis-event strong{font-size:11px}.trend-analysis-event span,.trend-analysis-event time{color:var(--muted);font-size:10px}.trend-analysis-event time{white-space:nowrap}
.trend-analysis-table td small { display:block; margin-top:2px; color:var(--muted); font-size:10px; }.trend-analysis-table code{font-size:10px}.trend-analysis-empty{padding:16px;color:var(--muted);text-align:center}.trend-analysis-table-panel .standard-history-pager{display:flex;justify-content:flex-end;align-items:center;gap:5px;margin-top:10px}.trend-analysis-table-panel .standard-history-pager button{padding:6px 9px;border:1px solid var(--line);border-radius:7px;background:#fff}.trend-analysis-table-panel .standard-history-pager span{margin-left:5px;color:var(--muted);font-size:11px}
.trend-analysis-page > [data-trend-realtime-control],
.trend-analysis-main-grid > [data-trend-realtime-control] { display:none !important; }
.trend-analysis-table-panel .panel-head { align-items:center; gap:12px; }
.trend-analysis-export-actions { flex-wrap:wrap; justify-content:flex-end; }
.trend-analysis-export-actions .small-button { min-width:72px; }
.trend-analysis-table-panel .table-wrap { max-height:620px; overflow:auto; border:1px solid var(--line); border-radius:10px; }
.trend-analysis-table-panel table { min-width:920px; }
.trend-analysis-table-panel thead th { position:sticky; top:0; z-index:2; background:#eef7fb; }
.trend-analysis-table-panel .standard-history-pager { padding-top:10px; border-top:1px solid #e5eef3; }
@media(max-width:1500px){.trend-analysis-filter-grid{grid-template-columns:1fr 1fr}.trend-analysis-period{grid-column:1/-1}.trend-analysis-run{min-height:42px}.trend-analysis-stat-grid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:980px){.trend-analysis-hero,.trend-analysis-main-grid{display:grid;grid-template-columns:1fr}.trend-analysis-presets{min-width:0}.trend-analysis-filter-grid{grid-template-columns:1fr 1fr}.trend-analysis-filter-grid .period-control{grid-column:1/-1;flex-wrap:wrap}.trend-analysis-stat-grid,.trend-analysis-management-grid{grid-template-columns:repeat(2,1fr)}.trend-analysis-event-list{grid-template-columns:1fr}}

/* Modern compact equipment detail cards */
.equipment-detail-view {
  padding: 22px;
  border-color: #e3edf4;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 8px 26px rgba(15, 79, 122, .045);
}

.equipment-detail-view > .panel-head {
  align-items: flex-start;
  padding-bottom: 14px;
  margin-bottom: 18px;
  border-bottom: 1px solid #edf4f8;
}

.equipment-detail-view > .panel-head h2 {
  margin: 2px 0 4px;
  color: #0f1f33;
  font-size: 20px;
  font-weight: 650;
  letter-spacing: 0;
}

.equipment-detail-view > .panel-head .eyebrow,
.equipment-detail-view .equipment-history-head .eyebrow {
  color: #6f8195;
  font-weight: 650;
  letter-spacing: .035em;
}

.equipment-detail-view > .panel-head .badge {
  padding: 6px 10px;
  border: 0;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 650;
  text-transform: none;
}

.equipment-detail-view > .panel-head p:not(.eyebrow) {
  max-width: 680px;
  color: #6b7d8d;
  font-size: 13px;
}

.equipment-detail-view .equipment-detail-grid {
  grid-template-columns: repeat(4, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.equipment-detail-view .equipment-detail-grid article {
  --metric-accent: #0891b2;
  display: flex;
  min-height: 94px;
  flex-direction: column;
  justify-content: space-between;
  padding: 15px 16px 14px 18px;
  border: 1px solid #e1ebf2 !important;
  border-radius: 8px;
  background: #ffffff !important;
  color: #132236 !important;
  box-shadow: 0 6px 18px rgba(15, 79, 122, .035) !important;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.equipment-detail-view .equipment-detail-grid article:hover {
  border-color: #cbdde9 !important;
  box-shadow: 0 10px 24px rgba(15, 79, 122, .07) !important;
  transform: translateY(-1px);
}

.equipment-detail-view .equipment-detail-grid article::before {
  content: "";
  position: absolute;
  top: 14px;
  bottom: 14px;
  left: 0;
  width: 3px;
  background: var(--metric-accent);
  border-radius: 0 999px 999px 0;
  opacity: .78;
}

.equipment-detail-view .equipment-detail-grid article::after {
  display: none;
}

.equipment-detail-view .equipment-detail-grid article:nth-child(1),
.equipment-detail-view .equipment-detail-grid article:nth-child(5),
.equipment-detail-view .equipment-detail-grid article:nth-child(9),
.equipment-detail-view .equipment-detail-grid article:nth-child(12) {
  --metric-accent: #0ea5e9;
}

.equipment-detail-view .equipment-detail-grid article:nth-child(2),
.equipment-detail-view .equipment-detail-grid article:nth-child(3),
.equipment-detail-view .equipment-detail-grid article:nth-child(4) {
  --metric-accent: #64748b;
}

.equipment-detail-view .equipment-detail-grid article:nth-child(6),
.equipment-detail-view .equipment-detail-grid article:nth-child(7),
.equipment-detail-view .equipment-detail-grid article:nth-child(8) {
  --metric-accent: #14b8a6;
}

.equipment-detail-view .equipment-detail-grid article:nth-child(10),
.equipment-detail-view .equipment-detail-grid article:nth-child(11),
.equipment-detail-view .equipment-detail-grid article:nth-child(13),
.equipment-detail-view .equipment-detail-grid article:nth-child(14) {
  --metric-accent: #10b981;
}

.equipment-detail-view .equipment-detail-grid span {
  max-width: calc(100% - 88px);
  color: #6f8195 !important;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .025em;
}

.equipment-detail-view .equipment-detail-grid strong {
  margin-top: 14px;
  overflow-wrap: anywhere;
  color: #132236 !important;
  font-size: clamp(18px, 1.08vw, 22px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: 0;
}

.equipment-detail-view .metric-source {
  position: absolute;
  top: 12px;
  right: 14px;
  margin: 0;
  padding: 3px 7px;
  border: 0;
  border-radius: 999px;
  font-size: 9px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none;
  box-shadow: none;
}

.equipment-detail-view .metric-source--realtime {
  color: #0f7490 !important;
  background: #eef9fc;
}

.equipment-detail-view .metric-source--history {
  color: #08775c !important;
  background: #effaf5;
}

.equipment-detail-view .equipment-history-head {
  align-items: center;
  margin: 18px 0 12px;
  padding-top: 2px;
}

.equipment-detail-view .equipment-history-head h3 {
  margin-top: 3px;
  font-size: 18px;
  font-weight: 650;
  letter-spacing: 0;
}

.equipment-detail-view .equipment-history-head > span {
  padding: 6px 10px;
  border: 1px solid #dbe9f1;
  border-radius: 999px;
  background: #f8fbfd;
  color: #5f7182;
  font-size: 10px;
  font-weight: 600;
  text-transform: none;
}

.equipment-detail-view .equipment-peak-grid article {
  --metric-accent: #10b981;
  background: #ffffff !important;
  border-color: #d8eee4 !important;
}

.equipment-detail-view .equipment-realtime-metric {
  --metric-accent: #0ea5e9;
}

.equipment-detail-view .equipment-history-metric {
  --metric-accent: #10b981;
}

.equipment-detail-view .equipment-detail-grid article.sensor-health-normal,
.equipment-detail-view .equipment-detail-grid article.sensor-health-neutral,
.equipment-detail-view .equipment-detail-grid article.sensor-health-stale,
.equipment-detail-view .equipment-detail-grid article.sensor-health-noise,
.equipment-detail-view .equipment-detail-grid article.sensor-health-warning,
.equipment-detail-view .equipment-detail-grid article.sensor-health-danger {
  background: #ffffff !important;
  color: #142033 !important;
  box-shadow: 0 6px 18px rgba(15, 79, 122, .035) !important;
}

.equipment-detail-view .equipment-detail-grid article.sensor-health-normal { --metric-accent: #10b981; }
.equipment-detail-view .equipment-detail-grid article.sensor-health-neutral { --metric-accent: #cbd5e1; }
.equipment-detail-view .equipment-detail-grid article.sensor-health-stale { --metric-accent: #94a3b8; }
.equipment-detail-view .equipment-detail-grid article.sensor-health-noise { --metric-accent: #8b5cf6; }
.equipment-detail-view .equipment-detail-grid article.sensor-health-warning { --metric-accent: #f59e0b; }
.equipment-detail-view .equipment-detail-grid article.sensor-health-danger { --metric-accent: #ef4444; }

.equipment-detail-view .equipment-detail-grid article.sensor-health-normal strong { color: #047857 !important; font-weight: 600; }
.equipment-detail-view .equipment-detail-grid article.sensor-health-stale strong { color: #64748b !important; font-weight: 600; }
.equipment-detail-view .equipment-detail-grid article.sensor-health-noise strong { color: #6d4acb !important; font-weight: 600; }
.equipment-detail-view .equipment-detail-grid article.sensor-health-warning strong { color: #b45309 !important; font-weight: 600; }
.equipment-detail-view .equipment-detail-grid article.sensor-health-danger strong { color: #dc2626 !important; font-weight: 600; }

.equipment-detail-view .maintenance-life-card {
  gap: 12px;
  padding: 16px;
  border-color: #e1ebf2;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 6px 18px rgba(15, 79, 122, .035);
}

.equipment-detail-view .maintenance-life-card > div:first-child {
  align-items: center;
}

.equipment-detail-view .maintenance-life-card strong {
  color: #101923;
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
}

.equipment-detail-view .maintenance-bar {
  height: 12px;
  border-radius: 999px;
  background: #edf5f8;
}

.equipment-detail-view .maintenance-bar i {
  border-radius: inherit;
}

html[data-theme="dark"] .equipment-detail-view {
  background: linear-gradient(180deg, var(--panel), rgba(22, 34, 50, .92));
  border-color: var(--line);
}

html[data-theme="dark"] .equipment-detail-view > .panel-head {
  border-bottom-color: rgba(255, 255, 255, .07);
}

html[data-theme="dark"] .equipment-detail-view .equipment-detail-grid article,
html[data-theme="dark"] .equipment-detail-view .equipment-detail-grid article.sensor-health-normal,
html[data-theme="dark"] .equipment-detail-view .equipment-detail-grid article.sensor-health-neutral,
html[data-theme="dark"] .equipment-detail-view .equipment-detail-grid article.sensor-health-stale,
html[data-theme="dark"] .equipment-detail-view .equipment-detail-grid article.sensor-health-noise,
html[data-theme="dark"] .equipment-detail-view .equipment-detail-grid article.sensor-health-warning,
html[data-theme="dark"] .equipment-detail-view .equipment-detail-grid article.sensor-health-danger {
  background: rgba(255, 255, 255, .035) !important;
  border-color: rgba(255, 255, 255, .08) !important;
  color: var(--ink) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .equipment-detail-view .equipment-detail-grid strong {
  color: var(--ink) !important;
}

html[data-theme="dark"] .equipment-detail-view .equipment-history-head > span,
html[data-theme="dark"] .equipment-detail-view .maintenance-life-card {
  background: rgba(255, 255, 255, .035);
  border-color: rgba(255, 255, 255, .08);
}

@media (max-width: 1180px) {
  .equipment-detail-view .equipment-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .equipment-detail-view {
    padding: 14px;
  }

  .equipment-detail-view .equipment-detail-grid {
    grid-template-columns: 1fr;
  }

  .equipment-detail-view .equipment-history-head {
    align-items: flex-start;
    display: grid;
  }
}

/* Modern compact energy monitoring KPI cards */
.energy-page .energy-kpi-grid {
  gap: 12px;
}

.energy-page .energy-kpi-grid article {
  --energy-kpi-accent: #0ea5e9;
  position: relative;
  display: flex;
  min-height: 108px;
  flex-direction: column;
  justify-content: space-between;
  padding: 15px 17px 14px;
  border: 1px solid #e1eaf0;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 6px 18px rgba(15, 79, 122, .045);
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.energy-page .energy-kpi-grid article:hover {
  border-color: #c9dbe6;
  box-shadow: 0 10px 24px rgba(15, 79, 122, .07);
  transform: translateY(-1px);
}

.energy-page .energy-kpi-grid article::before {
  inset: 0 0 auto 0;
  width: auto;
  height: 2px;
  border-radius: 8px 8px 0 0;
  background: var(--energy-kpi-accent);
  opacity: .82;
}

.energy-page .energy-kpi-grid article:nth-child(1) { --energy-kpi-accent: #0284c7; }
.energy-page .energy-kpi-grid article:nth-child(2) { --energy-kpi-accent: #059669; }
.energy-page .energy-kpi-grid article:nth-child(3) { --energy-kpi-accent: #64748b; }
.energy-page .energy-kpi-grid article:nth-child(4) { --energy-kpi-accent: #d97706; }
.energy-page .energy-kpi-grid article:nth-child(5) { --energy-kpi-accent: #0891b2; }
.energy-page .energy-kpi-grid article:nth-child(6) { --energy-kpi-accent: #0f766e; }
.energy-page .energy-kpi-grid article:nth-child(7) { --energy-kpi-accent: #7c3aed; }
.energy-page .energy-kpi-grid article:nth-child(8) { --energy-kpi-accent: #0369a1; }

.energy-page .energy-kpi-grid span {
  color: #738396;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: .045em;
}

.energy-page .energy-kpi-grid strong {
  margin: 8px 0 6px;
  overflow-wrap: anywhere;
  color: #172033;
  font-size: clamp(20px, 1.28vw, 28px);
  font-weight: 780;
  line-height: 1.05;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.energy-page .energy-kpi-grid p {
  max-width: 92%;
  color: #7f8fa0;
  font-size: 11px;
  font-weight: 560;
  line-height: 1.32;
}

html[data-theme="dark"] .energy-page .energy-kpi-grid article {
  border-color: rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .035);
  box-shadow: none;
}

html[data-theme="dark"] .energy-page .energy-kpi-grid article:hover {
  border-color: rgba(125, 211, 252, .24);
  box-shadow: none;
}

html[data-theme="dark"] .energy-page .energy-kpi-grid span,
html[data-theme="dark"] .energy-page .energy-kpi-grid p {
  color: var(--muted);
}

html[data-theme="dark"] .energy-page .energy-kpi-grid strong {
  color: var(--ink);
}

/* Modern simple Overview KPI cards */
.overview-page .overview-kpi-cards {
  gap: 14px;
}

.overview-page .overview-kpi-card {
  --kpi-accent: #0ea5e9;
  position: relative;
  min-height: 178px;
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  align-content: start;
  gap: 10px;
  padding: 16px;
  overflow: hidden;
  border: 1px solid #dbe8f0 !important;
  border-radius: 12px;
  background: #ffffff !important;
  color: #102536 !important;
  box-shadow: 0 10px 28px rgba(15, 23, 42, .06) !important;
}

.overview-page .overview-kpi-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--kpi-accent);
}

.overview-page .overview-kpi-card.ok,
.overview-page .overview-kpi-card.sensor-health-normal {
  --kpi-accent: #10b981;
}

.overview-page .overview-kpi-card.warn,
.overview-page .overview-kpi-card.sensor-health-warning {
  --kpi-accent: #d97706;
}

.overview-page .overview-kpi-card.danger,
.overview-page .overview-kpi-card.sensor-health-danger {
  --kpi-accent: #dc2626;
}

.overview-page .overview-kpi-card.sensor-health-stale,
.overview-page .overview-kpi-card.sensor-health-neutral {
  --kpi-accent: #94a3b8;
}

.overview-page .overview-kpi-card.is-clickable:hover {
  transform: translateY(-2px);
  border-color: rgba(14, 165, 233, .35) !important;
  box-shadow: 0 16px 34px rgba(15, 23, 42, .10) !important;
}

.overview-page .kpi-card-top {
  align-items: center;
}

.overview-page .overview-info-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--kpi-accent) 12%, #ffffff);
  color: var(--kpi-accent);
  box-shadow: none;
}

.overview-page .overview-info-icon svg {
  width: 18px;
  height: 18px;
  stroke-width: 2.3;
}

.overview-page .kpi-card-top [data-kpi-status] .badge {
  padding: 4px 9px;
  border-radius: 999px;
  background: #f8fafc;
  border: 1px solid #dbe8f0;
  color: #52677a;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .02em;
}

.overview-page .overview-kpi-card.ok .kpi-card-top [data-kpi-status] .badge {
  background: #ecfdf5;
  border-color: #bbf7d0;
  color: #047857;
}

.overview-page .overview-kpi-card.warn .kpi-card-top [data-kpi-status] .badge {
  background: #fff7ed;
  border-color: #fed7aa;
  color: #9a5a00;
}

.overview-page .overview-kpi-card.danger .kpi-card-top [data-kpi-status] .badge {
  background: #fef2f2;
  border-color: #fecaca;
  color: #b91c1c;
}

.overview-page .kpi-name {
  color: #718398;
  font-size: 11px;
  font-weight: 750;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.overview-page .overview-kpi-card strong[data-kpi-value] {
  color: #102536;
  font-size: clamp(24px, 1.7vw, 31px);
  font-weight: 720;
  line-height: 1.05;
  letter-spacing: 0;
}

.overview-page .overview-kpi-card p {
  margin: 0;
  color: #6f8193;
  font-size: 12.5px;
  line-height: 1.45;
}

.overview-page .kpi-target-row {
  margin-top: 0;
  padding-top: 10px;
  border-top: 1px solid #edf3f7;
}

.overview-page .kpi-target-label {
  display: block;
  color: #617489;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.overview-page .kpi-achievement {
  width: 100%;
  margin-top: 0;
  padding: 6px 9px;
  border-radius: 9px;
  justify-content: flex-start;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
}

.overview-page .kpi-route-hint {
  bottom: 12px;
  right: 14px;
  color: var(--kpi-accent);
  font-size: 11px;
  font-weight: 750;
}

html[data-theme="dark"] .overview-page .overview-kpi-card {
  background: rgba(15, 23, 42, .72) !important;
  border-color: rgba(148, 163, 184, .24) !important;
  color: var(--ink) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .28) !important;
}

html[data-theme="dark"] .overview-page .overview-info-icon {
  background: rgba(255, 255, 255, .05);
}

html[data-theme="dark"] .overview-page .overview-kpi-card strong[data-kpi-value] {
  color: var(--ink);
}

html[data-theme="dark"] .overview-page .overview-kpi-card p,
html[data-theme="dark"] .overview-page .kpi-name,
html[data-theme="dark"] .overview-page .kpi-target-label {
  color: var(--muted);
}

/* Overview process summary aligned with Management Cost panel */
.overview-page .overview-process-summary.process-pie-card {
  grid-template-columns: minmax(230px, 260px) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  gap: 28px;
  align-items: center;
  min-height: 360px;
  padding: 16px 20px 22px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, .96);
  box-shadow: var(--glow);
}

.overview-page .overview-process-summary-head {
  grid-column: 1 / -1;
  margin: 0;
}

.overview-page .overview-process-summary-head h2 {
  margin: 0;
  font-size: 20px;
}

.overview-page .overview-process-summary-head p:not(.eyebrow) {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.overview-page .overview-process-summary .process-summary-donut {
  width: 250px;
  height: 250px;
  border-color: rgba(191, 209, 223, .75);
  box-shadow: inset 0 0 0 18px rgba(255, 255, 255, .45), 0 16px 36px rgba(28, 66, 92, .12);
  background:
    radial-gradient(circle, #fff 0 60%, rgba(255,255,255,.97) 61%, transparent 62%),
    var(--donut-gradient, conic-gradient(rgba(148,163,184,.25) 0% 100%));
}

.overview-page .overview-process-summary .process-summary-donut strong {
  max-width: 84%;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
  color: #102536;
  font-size: clamp(24px, 1.8vw, 34px);
  font-weight: 760;
  letter-spacing: 0;
  line-height: 1;
}

.overview-page .overview-process-summary .process-summary-donut span {
  max-width: 72%;
  margin-top: 8px;
  align-self: auto;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.1;
  text-align: center;
}

.overview-page .overview-process-summary .process-summary-donut small {
  max-width: 72%;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.overview-page .overview-process-summary .pie-breakdown {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 10px 12px;
  align-content: center;
  align-self: center;
}

.overview-page .overview-process-summary .pie-breakdown div {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid #dbe8f0;
  border-radius: 8px;
  background: rgba(255, 255, 255, .86);
  box-shadow: none;
}

.overview-page .overview-process-summary .pie-breakdown i {
  width: 11px;
  height: 11px;
  border-radius: 999px;
}

.overview-page .overview-process-summary .pie-breakdown span {
  min-width: 0;
  color: #617489;
  font-size: 13px;
  font-weight: 760;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overview-page .overview-process-summary .pie-breakdown strong {
  color: #102536;
  font-size: 12px;
  font-weight: 720;
  white-space: nowrap;
}

.overview-page .overview-process-summary .pie-breakdown small {
  color: #617489;
  font-size: 12px;
  font-weight: 720;
  white-space: nowrap;
}

.overview-page .overview-process-summary .pie-breakdown .process-compliance-row {
  border-left: 3px solid transparent;
}

.overview-page .overview-process-summary .pie-breakdown .process-compliance-ok {
  border-left-color: #10b981;
}

.overview-page .overview-process-summary .pie-breakdown .process-compliance-warn {
  border-left-color: #f59e0b;
}

.overview-page .overview-process-summary .pie-breakdown .process-compliance-danger {
  border-left-color: #ef4444;
}

.overview-page .overview-process-summary .pie-breakdown .process-compliance-neutral {
  border-left-color: #94a3b8;
}

.overview-page .overview-process-summary .pie-breakdown .process-compliance-ok strong {
  color: #047857;
}

.overview-page .overview-process-summary .pie-breakdown .process-compliance-warn strong {
  color: #a16207;
}

.overview-page .overview-process-summary .pie-breakdown .process-compliance-danger strong {
  color: #b91c1c;
}

.overview-page .overview-process-summary .pie-breakdown .is-loading {
  opacity: .72;
}

html[data-theme="dark"] .overview-page .overview-process-summary.process-pie-card {
  background: rgba(15, 23, 42, .72);
  border-color: rgba(148, 163, 184, .24);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .28);
}

html[data-theme="dark"] .overview-page .overview-process-summary .process-summary-donut strong,
html[data-theme="dark"] .overview-page .overview-process-summary .pie-breakdown strong {
  color: var(--ink);
}

html[data-theme="dark"] .overview-page .overview-process-summary .pie-breakdown div {
  border-color: rgba(148, 163, 184, .2);
  background: rgba(255, 255, 255, .035);
}

html[data-theme="dark"] .overview-page .overview-process-summary-head p:not(.eyebrow),
html[data-theme="dark"] .overview-page .overview-process-summary .process-summary-donut span,
html[data-theme="dark"] .overview-page .overview-process-summary .pie-breakdown span,
html[data-theme="dark"] .overview-page .overview-process-summary .pie-breakdown small {
  color: var(--muted);
}

@media (max-width: 900px) {
  .overview-page .overview-process-summary.process-pie-card {
    grid-template-columns: 1fr;
  }

  .overview-page .overview-process-summary .process-summary-donut {
    justify-self: center;
  }

  .overview-page .overview-process-summary .pie-breakdown {
    grid-template-columns: 1fr;
    width: 100%;
  }
}

/* Desktop visual density: keep the dashboard readable without browser zoom. */
@media (min-width: 1024px) {
  .app-shell {
    zoom: var(--dashboard-visual-scale);
  }
}

/* The date-range calendar is portaled under body so cards with overflow cannot clip it. */
body > .single-range-popover {
  position: fixed !important;
  z-index: 10000 !important;
  width: min(360px, calc(100vw - 24px)) !important;
  max-width: calc(100vw - 24px) !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 12px !important;
  border-radius: 12px !important;
  transform: none !important;
}

/* Keep time-range controls as a toolbar; only the calendar itself is an overlay. */
.period-control.period-control--single-range {
  width: auto !important;
  max-width: 100% !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

.period-control.period-control--single-range > .single-range-picker {
  flex: 0 0 100%;
  justify-content: flex-end;
  width: 100%;
}

/* Energy keeps the custom range beside the period presets instead of centering it. */
.energy-period-control.period-control--single-range {
  flex: 1 1 720px;
  justify-content: flex-start !important;
}

.energy-period-control.period-control--single-range > .single-range-picker {
  flex: 0 1 auto !important;
  justify-content: flex-start !important;
  width: auto !important;
}

body > .single-range-popover,
body > .single-range-popover * {
  font-weight: 400 !important;
}

body > .single-range-popover .single-range-title {
  font-size: 16px !important;
}

body > .single-range-popover .single-range-nav {
  min-width: 34px !important;
  height: 34px !important;
  font-size: 14px !important;
}

body > .single-range-popover .single-range-days,
body > .single-range-popover .single-range-weekdays {
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  gap: 5px !important;
}

body > .single-range-popover .single-range-day {
  min-width: 0 !important;
  min-height: 34px !important;
  aspect-ratio: auto !important;
  font-size: 13px !important;
}

html[data-theme="dark"] body > .single-range-popover {
  background: var(--panel) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
  box-shadow: 0 22px 54px rgba(0, 0, 0, .48) !important;
}

html[data-theme="dark"] body > .single-range-popover .single-range-title,
html[data-theme="dark"] body > .single-range-popover .single-range-day {
  color: var(--ink) !important;
}

html[data-theme="dark"] body > .single-range-popover .single-range-day,
html[data-theme="dark"] body > .single-range-popover .single-range-nav {
  background: #1d2c40 !important;
  border-color: var(--line) !important;
}

html[data-theme="dark"] body > .single-range-popover .single-range-day.is-between {
  background: rgba(52, 200, 232, .16) !important;
  color: var(--brand-2) !important;
}

html[data-theme="dark"] body > .single-range-popover .single-range-day.is-start,
html[data-theme="dark"] body > .single-range-popover .single-range-day.is-end {
  background: var(--brand) !important;
  color: #071421 !important;
}

@media (max-width: 520px) {
  .period-control.period-control--single-range {
    justify-content: flex-start !important;
  }

  .period-control.period-control--single-range > .single-range-picker,
  .period-control.period-control--single-range .single-range-button {
    width: 100%;
  }

  body > .single-range-popover {
    padding: 10px !important;
  }

  body > .single-range-popover .single-range-days,
  body > .single-range-popover .single-range-weekdays {
    gap: 5px !important;
  }

  body > .single-range-popover .single-range-day {
    min-height: 32px !important;
    font-size: 12px !important;
  }
}