/* ============================================================================
 *  Carmeyan "Instrument Deck" theme — Stage 1.5 faithful port of design.css.
 *  Loaded AFTER css/dashboard.css. Restyles existing markup only; changes no
 *  IDs/classes/JS. js/theme-deck.js adds decorative elements (.bk brackets,
 *  .deck-ruler, .deck-eyebrow, .deck-sec, #deck-gas) that are styled here.
 * ==========================================================================*/

:root{
  /* --- palette: warm charcoal + amber (mirrors design.css exactly) --- */
  --color-bg:#090806; --color-surface-0:#100D0A; --color-surface:#151110;
  --color-surface-2:#1B1613; --color-surface-3:#231C17;
  --glass-bg:rgba(21,17,16,.72); --glass-bg-2:rgba(27,22,19,.55);
  --color-primary:var(--color-surface-3);
  --orange:#FF7A1A; --orange-soft:rgba(255,122,26,.16); --orange-ring:rgba(255,122,26,.45);
  --orange-on-dark:#FFA24D; --amber-deep:#B85512;
  --color-accent:#FF7A1A; --color-accent-glow:rgba(255,122,26,.45);
  --color-white:#F6F0E7; --color-text-main:#E7E0D5; --color-text-muted:#B4AA9C; --color-text-faint:#847968;
  --color-border:rgba(240,214,184,.11); --color-border-hover:rgba(240,214,184,.22);
  --glass-border:rgba(240,214,184,.09); --line-2:rgba(240,214,184,.06);
  --c-safe:#79D07C; --c-safe-soft:rgba(121,208,124,.12); --c-safe-border:rgba(121,208,124,.3); --c-safe-core:#79D07C;
  --c-warn:#FFC24B; --c-warn-soft:rgba(255,194,75,.12);
  --c-danger:#FF463A; --c-danger-core:#E5261A; --c-danger-soft:rgba(229,38,26,.14); --c-danger-border:rgba(229,38,26,.42);
  --font-heading:'Clash Display','Space Grotesk',sans-serif;
  --font-body:'Satoshi','IBM Plex Sans',sans-serif;
  --font-mono:'Chivo Mono','IBM Plex Mono',monospace;
  --radius-sm:8px; --radius-md:12px; --radius-lg:16px;
  --ease:cubic-bezier(.2,.9,.25,1); --spring:cubic-bezier(.34,1.56,.64,1);
  --bg-gradient-dark:
    radial-gradient(1100px 680px at 85% -12%, rgba(255,122,26,.13), transparent 58%),
    radial-gradient(820px 820px at -8% 112%, rgba(255,122,26,.05), transparent 55%),
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(0,0,0,.14) 3px 4px),
    linear-gradient(180deg,#090806,#0D0B09);
}

/* --- background: warm amber mesh + scanline veil (via redefined --bg-gradient-dark).
 *     NB: do NOT touch .dash-body::before — dashboard.css uses it as a z-index:300
 *     noise overlay (mix-blend-mode:overlay). Overriding it darkens the whole app. --- */
.dash-body{background:var(--bg-gradient-dark);background-color:var(--color-bg);background-attachment:fixed;}
html{scrollbar-width:thin;scrollbar-color:var(--amber-deep) transparent;}
::selection{background:var(--orange);color:#140d06;}

/* particle gas field (injected by theme-deck.js) */
#deck-gas{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.8;}
.dash-layout{position:relative;z-index:1;}

/* inline Lucide icons (js/lucide-icons.js) — behave like the FA glyphs they
 * replaced: size to 1em of the surrounding text, inherit currentColor. */
[data-lucide]{display:inline-flex;align-items:center;justify-content:center;vertical-align:-0.125em;line-height:0;}
[data-lucide] svg{width:1em;height:1em;display:block;}

/* corner brackets (injected by theme-deck.js, design.css .bk) */
.bk{position:absolute;width:11px;height:11px;border:1.5px solid rgba(255,122,26,.55);pointer-events:none;z-index:2;}
.bk.tl{top:8px;left:8px;border-right:0;border-bottom:0;}
.bk.br{bottom:8px;right:8px;border-left:0;border-top:0;}

/* tick-ruler divider (injected under panel headers, design.css .ruler) */
.deck-ruler{height:7px;margin:2px 0 12px;opacity:.5;
  background:repeating-linear-gradient(90deg,var(--color-border) 0 1px,transparent 1px 11px);
  -webkit-mask:linear-gradient(90deg,#000 0,#000 68%,transparent);mask:linear-gradient(90deg,#000 0,#000 68%,transparent);}

@keyframes deck-ping{0%{box-shadow:0 0 0 0 currentColor}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}

/* ---------------- SIDEBAR ---------------- */
.dash-sidebar{background:linear-gradient(180deg,rgba(18,14,11,.78),rgba(9,8,6,.82));border-right:1px solid var(--line-2);backdrop-filter:blur(20px);}
.sidebar-brand{border-bottom:1px solid var(--line-2);}
/* tighter menu rhythm — match the prototype density */
.sidebar-menu{gap:2px !important;padding:0 14px !important;}
.deck-sec{list-style:none;font-family:var(--font-mono);font-size:.56rem;letter-spacing:2.5px;color:var(--color-text-faint);margin:14px 12px 7px;display:flex;align-items:center;gap:8px;}
.deck-sec::after{content:"";flex:1;height:1px;background:var(--line-2);}
.sidebar-item a{gap:12px;padding:9px 12px;border-radius:9px;font-family:var(--font-body);font-weight:500;font-size:.85rem;letter-spacing:.1px;color:var(--color-text-muted);transition:.3s var(--ease);position:relative;}
/* Lucide line icons (inline SVG) — thin, technical, inherit currentColor */
.sidebar-item a .nav-ic{width:18px;height:18px;flex:none;color:var(--color-text-faint);transition:color var(--transition-fast),transform .3s var(--spring);}
.sidebar-item a:hover{color:var(--color-white);background:var(--color-surface);}
.sidebar-item a:hover .nav-ic{color:var(--orange-on-dark);transform:scale(1.14);}
.sidebar-item.active a{color:var(--color-white);font-weight:500;background:linear-gradient(90deg,var(--color-surface-3),rgba(35,28,23,0));}
.sidebar-item.active a .nav-ic{color:var(--orange);filter:drop-shadow(0 0 6px var(--color-accent-glow));}
.sidebar-item a::before{background:var(--orange) !important;box-shadow:0 0 12px var(--color-accent-glow);border-radius:0 3px 3px 0;}
.sidebar-item.active a::after{content:"";position:absolute;right:9px;top:50%;transform:translateY(-50%);width:5px;height:5px;border-radius:50%;background:var(--orange);box-shadow:0 0 8px var(--orange);}
.nav-badge{margin-left:auto;font-family:var(--font-mono);font-size:.6rem;font-weight:600;color:#180d06;background:var(--orange);padding:1px 7px;border-radius:5px;}
.sidebar-user{border:1px solid var(--line-2);border-radius:12px;background:var(--color-surface);position:relative;}
.sidebar-user::before{content:"";position:absolute;top:6px;left:6px;width:9px;height:9px;border-top:1.5px solid rgba(255,122,26,.4);border-left:1.5px solid rgba(255,122,26,.4);}
.user-avatar{border-radius:8px;font-family:var(--font-heading);font-weight:600;color:#140d06;background:linear-gradient(135deg,var(--orange-on-dark),var(--orange));}
.user-name{font-family:var(--font-body);color:var(--color-white);}
.user-role{color:var(--color-text-muted);}
.btn-logout .nav-ic,.sidebar-toggle-btn .nav-ic{width:18px;height:18px;vertical-align:middle;}
.btn-logout:hover{color:var(--orange);}

/* ---------------- HEADER ---------------- */
.dash-header{border-bottom:1px solid var(--color-border);}
.deck-eyebrow{font-family:var(--font-mono);font-size:.6rem;letter-spacing:3px;color:var(--orange);margin-bottom:6px;display:flex;align-items:center;gap:8px;}
.deck-eyebrow .lp{width:6px;height:6px;border-radius:50%;background:var(--orange);box-shadow:0 0 10px var(--orange);animation:deck-ping 1.8s infinite;}
.dash-header-title h2{font-family:var(--font-heading);font-weight:600;font-size:1.9rem;line-height:.95;letter-spacing:-.8px;color:var(--color-white);}
/* native <select> restyled as the prototype's .sel — layers glyph on the left,
 * chevron on the right (SVG data-URIs, since a native select can't hold DOM). */
.site-selector{-webkit-appearance:none;appearance:none;background-color:var(--color-surface);border:1px solid var(--color-border);font-family:var(--font-body);font-size:.82rem;color:var(--color-text-main);border-radius:0;
  padding-left:34px;padding-right:30px;
  background-repeat:no-repeat,no-repeat;background-position:11px center,right 11px center;background-size:15px,13px;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF7A1A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z'/%3E%3Cpath d='M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12'/%3E%3Cpath d='M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B4AA9C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  clip-path:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,0 100%);transition:.3s;}
.site-selector:hover{border-color:var(--orange);color:var(--color-white);}
.sync-indicator{font-family:var(--font-mono);font-size:.72rem;color:var(--c-safe);background:rgba(121,208,124,.08);border:1px solid rgba(121,208,124,.22);border-radius:3px;text-transform:uppercase;letter-spacing:.5px;}
.sync-indicator .sync-dot{background:var(--c-safe);animation:deck-ping 1.8s infinite;}
.sync-indicator.offline{color:var(--c-danger);background:rgba(229,38,26,.08);border-color:rgba(229,38,26,.3);}
.sync-indicator.offline .sync-dot{background:var(--c-danger);}

/* ---------------- METRIC CARDS (KPI tiles) ---------------- */
.metric-card{background:linear-gradient(168deg,var(--color-surface-2),var(--color-surface));border:1px solid var(--line-2);
  border-radius:12px;box-shadow:inset 0 1px 0 rgba(255,220,180,.05),0 22px 44px -26px rgba(0,0,0,.7);overflow:hidden;position:relative;}
.metric-card::after{content:"";position:absolute;top:0;left:16px;right:16px;height:1px;background:linear-gradient(90deg,transparent,var(--orange-on-dark),transparent);opacity:.4;}
.metric-card:hover{transform:translateY(-5px);border-color:var(--color-border);}
.metric-label{font-family:var(--font-mono);font-size:.62rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--color-text-muted);}
.metric-value{font-family:var(--font-heading);font-weight:600;color:var(--color-white);letter-spacing:-1px;text-shadow:0 0 14px rgba(255,255,255,.12);}
.metric-icon{color:var(--orange);background:rgba(255,122,26,.09);border-radius:10px;}
.metric-status{font-family:var(--font-body);}
.metric-card--danger{border-color:var(--c-danger-border);}
.metric-card--danger .metric-value{color:#ffb3ad;text-shadow:0 0 16px rgba(229,38,26,.4);}
.metric-card--danger .metric-icon{color:#fff;background:var(--c-danger-core);box-shadow:0 0 18px rgba(229,38,26,.6);}

/* ---------------- PANELS (design.css .panelx) ---------------- */
.panel-card{background:linear-gradient(168deg,var(--color-surface-2),var(--color-surface));border:1px solid var(--line-2);
  border-radius:12px;box-shadow:inset 0 1px 0 rgba(255,220,180,.05),0 22px 44px -26px rgba(0,0,0,.7);position:relative;overflow:hidden;}
.panel-card::after{content:"";position:absolute;top:0;left:16px;right:16px;height:1px;background:linear-gradient(90deg,transparent,var(--orange-on-dark),transparent);opacity:.4;}
.panel-card:hover{border-color:var(--color-border);}
.panel-title{font-family:var(--font-heading);font-weight:500;font-size:.96rem;letter-spacing:.2px;color:var(--color-white);display:flex;align-items:center;gap:9px;}
.panel-title::before{content:"";width:7px;height:7px;flex:none;border-radius:50% !important;background:var(--c-safe) !important;box-shadow:0 0 8px var(--c-safe);animation:deck-ping 2s infinite;position:static !important;}
.panel-header > span,.panel-actions > span{font-family:var(--font-mono) !important;letter-spacing:1px;text-transform:uppercase;font-size:.62rem !important;color:var(--amber-deep) !important;}

/* ---------------- TABLES (design.css .dtable) ---------------- */
.data-table{font-size:.84rem;}
.data-table th{font-family:var(--font-mono);font-size:.58rem;letter-spacing:1.2px;text-transform:uppercase;color:var(--color-text-muted);background:transparent;border-bottom:1px solid var(--color-border);border-radius:0 !important;white-space:nowrap;}
.data-table td{border-bottom:1px solid var(--line-2);color:var(--color-text-main);}
.data-table td:first-child{font-family:var(--font-mono);color:var(--color-white);font-weight:600;}
.data-table tbody tr:nth-child(even){background:transparent;}
.data-table tbody tr{transition:background .2s;}
.data-table tbody tr:hover{background:rgba(255,122,26,.045);}
.data-table tbody tr.critical-row{background:var(--c-danger-soft);}

/* ---------------- BADGES (design.css .bdg — LED dot readouts) ---------------- */
.badge-status{font-family:var(--font-mono);font-size:.58rem;letter-spacing:.5px;border-radius:5px;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;}
.badge-status::before{content:"";width:6px;height:6px;flex:none;border-radius:50%;background:currentColor;box-shadow:0 0 6px currentColor;}
.badge-safe{color:var(--c-safe);background:rgba(121,208,124,.1);border:1px solid rgba(121,208,124,.25);}
.badge-warning{color:var(--c-warn);background:rgba(255,194,75,.1);border:1px solid rgba(255,194,75,.28);}
.badge-danger,.badge-sos{color:#fff;background:var(--c-danger-core);border:1px solid transparent;box-shadow:0 0 12px rgba(229,38,26,.5);}
.badge-danger::before,.badge-sos::before{background:#fff;}
.badge-offline{color:var(--color-text-muted);background:rgba(255,255,255,.03);border:1px solid var(--line-2);}

/* ---------------- BUTTONS (design.css .tbtn / .btnx) ---------------- */
.btn-dash{font-family:var(--font-body);font-weight:700;font-size:.78rem;color:#160d06;background:var(--orange);border:1px solid var(--orange);border-radius:0;
  clip-path:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,0 100%);transition:.25s;}
.btn-dash:hover{box-shadow:0 8px 20px -8px var(--color-accent-glow);}
.btn-dash-danger{background:var(--c-danger-core);border-color:var(--c-danger-core);color:#fff;box-shadow:0 8px 18px -8px rgba(229,38,26,.7);
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));}
.btn-ghost{background:var(--color-surface);color:var(--color-text-main);border:1px solid var(--color-border);border-radius:0;
  clip-path:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,0 100%);}
.btn-ghost:hover{border-color:var(--orange);color:var(--color-white);}
.btn-icon{border-radius:7px;}
.btn-icon:hover{color:var(--orange);border-color:var(--orange);}

/* ---------------- FORMS (design.css .field) ---------------- */
.form-label{font-family:var(--font-mono);font-size:.6rem;letter-spacing:1.2px;text-transform:uppercase;color:var(--color-text-muted);}
.form-control{background:var(--color-surface-3);border:1px solid var(--color-border);color:var(--color-white);font-family:var(--font-body);border-radius:0;
  clip-path:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,0 100%);}
.form-control:focus{border-color:var(--orange);box-shadow:none;}
.form-control option{background:var(--color-surface-2);color:var(--color-text-main);}

/* ---------------- ALARM BANNER (design.css .alarm — hazard stripe + pulse) ---------------- */
.alarms-banner{background:
    repeating-linear-gradient(45deg,var(--c-danger-core) 0 6px,#2a0603 6px 12px) left/8px 100% no-repeat,
    linear-gradient(100deg,rgba(229,38,26,.2),rgba(229,38,26,.04));
  border:1px solid rgba(229,38,26,.55);border-radius:0;
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px));
  animation:deck-pb 2.6s ease-in-out infinite;padding-left:24px;}
@keyframes deck-pb{0%,100%{box-shadow:inset 0 0 26px rgba(229,38,26,.1)}50%{box-shadow:inset 0 0 42px rgba(229,38,26,.22),0 0 30px -10px rgba(229,38,26,.6)}}
.alarms-banner-icon{color:#fff;background:var(--c-danger-core);box-shadow:0 0 20px rgba(229,38,26,.6);border-radius:9px;padding:10px;animation:deck-bl 1.1s steps(2) infinite;}
@keyframes deck-bl{50%{opacity:.55}}
.alarms-banner-text{font-family:var(--font-heading);font-weight:600;letter-spacing:.3px;color:#ffe8e5;}

/* ---------------- ALARM CARDS (design.css .acard) ---------------- */
.alarm-card{background:linear-gradient(168deg,var(--color-surface-2),var(--color-surface));border:1px solid rgba(229,38,26,.4);border-radius:12px;position:relative;}
.alarm-card--sos{border-color:rgba(229,38,26,.6);}
.alarm-card-reason{font-family:var(--font-heading);font-weight:500;color:#ffb3ad;}
.alarm-card-device{font-family:var(--font-mono);}

/* ---------------- SITE CARDS ---------------- */
.site-card{background:linear-gradient(168deg,var(--color-surface-2),var(--color-surface));border:1px solid var(--line-2);border-radius:12px;}
.site-card:hover{border-color:var(--color-border);}
.site-card-title{font-family:var(--font-heading);font-weight:500;}
.site-stat-label{font-family:var(--font-mono);font-size:.6rem;letter-spacing:1px;}
.site-stat-val{font-family:var(--font-heading);}
.site-card-stats{background:rgba(0,0,0,.2);border:1px solid var(--line-2);}

/* ---------------- ACTION LEVELS ---------------- */
.action-level-head{font-family:var(--font-body);}
.action-level-danger,.action-level-warn{font-family:var(--font-mono);font-size:.78rem;}
.action-level-desc{color:var(--color-text-muted);}

/* ---------------- ACK MODAL (design.css .modal) ---------------- */
.ack-modal-overlay{background:rgba(5,4,3,.72);backdrop-filter:blur(7px);}
.ack-modal{background:linear-gradient(168deg,var(--color-surface-2),var(--color-surface));border:1px solid var(--color-border);border-radius:12px;box-shadow:0 40px 80px -20px rgba(0,0,0,.8);}
.ack-modal-head h3{font-family:var(--font-heading);color:var(--color-white);}
.ack-field span{font-family:var(--font-mono);font-size:.6rem;letter-spacing:1.2px;text-transform:uppercase;color:var(--color-text-muted);}
.ack-field input{background:var(--color-surface-3);border:1px solid var(--color-border);color:var(--color-white);border-radius:0;
  clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,0 100%);}
.ack-field input:focus{border-color:var(--orange);}

/* ============================================================================
 *  STAGE 2 — Overview "Instrument Deck" bento (Signal Scope, Gas Signature,
 *  Vitals, Device Swarm, Gas Trend). Wired live by js/overview-deck.js.
 *  Ported from design.css; scoped under .deck-bento to avoid collisions.
 * ==========================================================================*/
.deck-kpi-mirror{display:none !important;}

.deck-bento{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:152px;gap:16px;margin-bottom:22px;}
.deck-bento .tile{display:flex;flex-direction:column;padding:16px 18px;overflow:hidden;}
.deck-bento .tile .panel-header{margin-bottom:0;}
.deck-bento .tile .content{flex:1;min-height:0;position:relative;margin-top:2px;}
.t-scope{grid-column:span 5;grid-row:span 2;}
.t-gauge{grid-column:span 4;grid-row:span 2;}
.t-vitals{grid-column:span 3;grid-row:span 2;}
.t-swarm{grid-column:span 7;grid-row:span 2;}
.t-trend{grid-column:span 5;grid-row:span 2;}

/* device dropdown (design.css .devsel) */
.deck-devsel{font-family:var(--font-mono);font-size:.6rem;color:var(--orange-on-dark);background:var(--color-surface-3);border:1px solid var(--color-border);padding:5px 7px;cursor:pointer;outline:none;letter-spacing:.5px;max-width:150px;
  clip-path:polygon(0 0,calc(100% - 7px) 0,100% 7px,100% 100%,0 100%);}
.deck-devsel:hover{border-color:var(--orange);color:var(--color-white);}
.deck-devsel option{background:#1B1613;color:var(--color-text-main);}

/* SIGNAL SCOPE */
.scopewrap{position:relative;height:100%;display:flex;align-items:center;justify-content:center;}
#deck-radar{width:100%;height:100%;display:block;}
.scope-cap{position:absolute;left:0;bottom:0;font-family:var(--font-mono);font-size:.56rem;color:var(--color-text-muted);display:flex;gap:12px;}
.scope-cap i{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:5px;vertical-align:middle;}
.scope-read{position:absolute;right:0;bottom:0;font-family:var(--font-mono);font-size:.56rem;color:var(--color-text-muted);}
.scope-read b{color:var(--c-safe);}

/* GAS SIGNATURE dials */
.deck-gg{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:0;height:100%;}
.deck-gsite{position:absolute;left:0;bottom:-4px;font-family:var(--font-mono);font-size:.55rem;color:var(--color-text-faint);letter-spacing:.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
.gauge{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0;border-radius:10px;transition:.3s;cursor:default;min-height:0;}
.gauge:hover{background:var(--color-surface-3);}
.gauge svg{width:72px;height:72px;transform:rotate(-90deg);transition:filter .3s;}
.gauge:hover svg{filter:drop-shadow(0 0 6px var(--color-accent-glow));}
.gauge .ticks{fill:none;stroke:rgba(255,168,90,.22);stroke-width:4;stroke-dasharray:1 6;stroke-linecap:round;}
.gauge .track{fill:none;stroke:rgba(255,255,255,.05);stroke-width:7;}
.gauge .arc{fill:none;stroke-width:7;stroke-linecap:round;stroke-dasharray:314.16;stroke-dashoffset:314.16;transition:stroke-dashoffset 1.1s var(--ease),stroke .5s;}
.gauge .cen{margin-top:-48px;text-align:center;height:42px;display:flex;flex-direction:column;justify-content:center;}
.gauge .cen .v{font-family:var(--font-mono);font-size:.9rem;font-weight:600;color:var(--color-white);}
.gauge .cen .u{font-size:.46rem;color:var(--color-text-muted);}
.gauge .nm{margin-top:2px;font-weight:700;font-size:.62rem;color:var(--color-text-main);letter-spacing:.5px;}
/* alarm on the selected device turns the gauge-tile LED red */
#deck-gauge-tile.deck-danger .panel-title::before{background:var(--c-danger) !important;box-shadow:0 0 8px var(--c-danger);}

/* VITALS LED readouts */
.vstack{display:flex;flex-direction:column;gap:9px;height:100%;}
.vcell{flex:1;position:relative;border-radius:9px;background:rgba(255,255,255,.02);border:1px solid var(--line-2);padding:9px 14px;display:flex;align-items:center;justify-content:space-between;transition:.35s var(--spring);overflow:hidden;}
.vcell::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--orange);opacity:.55;}
.vcell:hover{transform:translateX(4px);background:var(--color-surface-3);}
.vcell .vl{font-family:var(--font-mono);font-size:.58rem;letter-spacing:1px;color:var(--color-text-muted);text-transform:uppercase;}
.vcell .vl small{display:block;font-family:var(--font-body);font-size:.58rem;color:var(--color-text-faint);margin-top:3px;letter-spacing:0;text-transform:none;}
.vcell .vn{font-family:var(--font-heading);font-size:1.7rem;font-weight:600;color:var(--color-white);line-height:1;text-shadow:0 0 14px rgba(255,255,255,.12);}
.vcell.d::before{background:var(--c-danger);}.vcell.d .vn{color:#ffb3ad;text-shadow:0 0 16px rgba(229,38,26,.4);}
.vcell.ok::before{background:var(--c-safe);}.vcell.ok .vn{color:var(--c-safe);}

/* DEVICE SWARM */
.swarm{display:grid;grid-template-columns:repeat(auto-fill,14px);gap:4px;align-content:start;height:calc(100% - 20px);overflow:auto;}
.cellx{width:14px;height:14px;border-radius:2px;background:var(--color-surface-3);transition:transform .25s var(--spring),box-shadow .25s;}
.cellx.s{background:rgba(121,208,124,.85);}.cellx.w{background:rgba(255,194,75,.9);}
.cellx.a{background:var(--c-danger-core);animation:deck-cp 1.3s infinite;}.cellx.o{background:rgba(255,235,210,.1);}
@keyframes deck-cp{50%{box-shadow:0 0 9px 2px rgba(229,38,26,.7);}}
.cellx:hover{transform:scale(1.9);box-shadow:0 4px 14px rgba(0,0,0,.6);z-index:2;position:relative;border-radius:3px;}
.swtip{position:fixed;z-index:1000;transform:translate(-50%,-100%);pointer-events:none;font-family:var(--font-mono);font-size:.62rem;color:var(--color-white);background:rgba(20,16,13,.97);border:1px solid var(--color-border);padding:5px 9px;border-radius:5px;opacity:0;transition:opacity .12s;white-space:nowrap;box-shadow:0 6px 16px rgba(0,0,0,.5);}
.swtip.on{opacity:1;}.swtip b{color:var(--orange-on-dark);}
.legend{display:flex;gap:14px;margin-top:6px;font-family:var(--font-mono);font-size:.56rem;color:var(--color-text-muted);flex-wrap:wrap;}
.legend i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:5px;vertical-align:middle;}

/* GAS TREND sparkline */
.spark{width:100%;height:100%;}
.tchips{display:flex;gap:7px;position:absolute;top:16px;right:18px;z-index:3;}
.tchip{font-family:var(--font-mono);font-size:.55rem;padding:3px 8px;border-radius:4px;border:1px solid var(--line-2);}
.deck-trend-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:.6rem;color:var(--color-text-faint);letter-spacing:.5px;}

/* bento responsive collapse */
@media (max-width:1080px){
  .deck-bento{grid-template-columns:1fr;grid-auto-rows:auto;}
  .deck-bento .tile{grid-column:1/-1 !important;grid-row:auto !important;min-height:230px;}
}

/* ---------------- REDUCED MOTION ---------------- */
@media (prefers-reduced-motion: reduce){
  .deck-eyebrow .lp,.panel-title::before,.sync-indicator .sync-dot,.alarms-banner,.alarms-banner-icon,.cellx.a{animation:none !important;}
  .gauge .arc{transition:none !important;}
}

/* ================= HISTORIAN / REPORTS / ALERT CONTACTS ================= */

/* Filter control grid (refinery/device/date/time) */
.hist-controls{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:14px 16px; margin-bottom:14px;
}
.hist-controls .form-group{margin:0;}

/* Quick-range + action button row */
.hist-quick{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:12px;}
.btn-quick{
  background:var(--color-surface-3); border:1px solid var(--color-border);
  color:var(--color-text-main); font-weight:600; font-size:.76rem;
  padding:8px 12px; cursor:pointer; transition:border-color .15s,color .15s;
}
.btn-quick:hover{border-color:var(--orange); color:var(--orange); box-shadow:none;}
.btn-dash-primary{background:var(--orange); border-color:var(--orange); color:#160d06;}

/* Notes + inline messages */
.hist-note{
  font-size:.78rem; color:var(--color-text-muted); margin:2px 0 0;
  display:flex; align-items:center; gap:7px;
}
.hist-note svg,.hist-note i{width:15px; height:15px; flex:0 0 auto;}
.hist-message{
  margin-top:12px; padding:10px 13px; font-size:.82rem; border:1px solid var(--line-2);
  background:rgba(255,255,255,.03); color:var(--color-text-main);
}
.hist-message.is-error{background:var(--c-danger-soft); border-color:var(--c-danger-border); color:var(--c-danger);}
.hist-message.is-info{background:var(--orange-soft); border-color:var(--orange-ring); color:var(--orange-on-dark);}

/* Chart */
.hist-chart-wrap{position:relative; height:340px; width:100%;}
.hist-chart-wrap canvas{width:100% !important; height:100% !important;}
.hist-empty{
  padding:40px 16px; text-align:center; color:var(--color-text-muted); font-size:.86rem;
}

/* Sortable table headers */
.data-table th.sortable{cursor:pointer; user-select:none;}
.data-table th.sortable:hover{color:var(--orange);}
.data-table th.sortable::after{content:" ⇅"; opacity:.4; font-size:.8em;}

/* Pagination */
.hist-pager{display:flex; align-items:center; gap:12px; justify-content:flex-end; margin-top:12px;}
.hist-page-ind{font-size:.8rem; color:var(--color-text-muted);}
.btn-page{background:var(--color-surface-3); border:1px solid var(--color-border); color:var(--color-text-main); font-size:.76rem; padding:6px 12px; cursor:pointer;}
.btn-page:hover{border-color:var(--orange); color:var(--orange); box-shadow:none;}
.btn-page:disabled{opacity:.4; cursor:not-allowed;}

/* Reports preview */
.rep-preview{font-size:.85rem; color:var(--color-text-main);}
.rep-meta-grid{display:flex; flex-wrap:wrap; gap:6px 22px; margin-bottom:10px; padding-bottom:10px; border-bottom:1px solid var(--line-2);}
.rep-meta-row span{color:var(--color-text-muted); margin-right:6px; font-size:.8rem;}
.rep-kv{display:flex; flex-wrap:wrap; gap:10px 20px; margin:10px 0;}
.rep-kv-item{background:var(--color-surface-3); border:1px solid var(--color-border); padding:8px 14px; min-width:120px;}
.rep-kv-item span{display:block; color:var(--color-text-muted); font-size:.72rem;}
.rep-kv-item b{font-size:1.1rem; color:var(--color-white);}
.rep-h{margin:16px 0 6px; font-size:.82rem; color:var(--color-text-muted); text-transform:uppercase; letter-spacing:.04em;}

/* Alert-contacts add/edit form */
.ac-form{margin-top:18px; padding-top:16px; border-top:1px solid var(--line-2);}
.ac-form-title{margin:0 0 12px; font-size:.85rem; color:var(--color-text-muted); text-transform:uppercase; letter-spacing:.04em;}
.ac-checks{display:flex; flex-wrap:wrap; gap:16px; margin:12px 0;}
.ac-checks label{display:flex; align-items:center; gap:6px; font-size:.82rem; color:var(--color-text-main); cursor:pointer;}
.ac-form-actions{display:flex; flex-wrap:wrap; gap:10px;}

/* Demo / test data panel */
.demo-actions{display:flex; flex-wrap:wrap; gap:10px; margin-top:6px;}
.demo-bar{height:10px; background:var(--color-surface-3); border:1px solid var(--color-border); overflow:hidden;}
.demo-bar-fill{height:100%; width:0; background:var(--orange); transition:width .3s ease;}
.demo-login{display:flex; flex-wrap:wrap; gap:10px 22px; margin:12px 0 16px; padding:12px 14px; background:var(--color-surface-3); border:1px solid var(--color-border);}
.demo-login>div{display:flex; flex-direction:column;}
.demo-login span{font-size:.72rem; color:var(--color-text-muted);}
.demo-login b{font-size:1rem; color:var(--color-white); font-family:var(--font-mono, monospace);}