/* ==========================================================================
   BASE / DEFAULT ASP.NET CORE STYLES
   ========================================================================== */

html {
  font-size: 14px;
  position: relative;
  min-height: 100%;
}

@media (min-width: 768px) {
  html { font-size: 16px; }
}

body {
  margin-bottom: 60px;
}

/* Focus ring aligned with theme token */
.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
  box-shadow: 0 0 0 0.1rem #fff, 0 0 0 0.25rem var(--color-500);
}

/* Floating labels RTL/LTR behavior */
.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* ==========================================================================
   THEME TOKENS — HIGH CONTRAST GREEN SCADA
   ========================================================================== */

:root {
  /* ========================================================================
     BACKGROUND COLORS
     Deep dark backgrounds with cool green undertone for industrial SCADA look
     ======================================================================== */
  --bg-main: #080a08;
      /* Primary page background - darkest base
         Used in: body radial-gradient, --grad-hero, badge text color */
  --bg-panel: #0e120e;
      /* Panel/container background - slightly lighter
         Used in: .search-box, .feeders-full, .scada-table, .kpi, --grad-panel,
         Bootstrap table --bs-table-bg override */
  --bg-panel-2: #141a14;
      /* Secondary panel level - for nested containers
         Used in: .col-head, .row-header, --grad-panel, .search-box:focus,
         Bootstrap table striped rows, mobile overrides */
  --bg-panel-3: #1c241c;
      /* Tertiary panel level - for deeper nesting
         Used in: .idle-bar gradient, .col-head:hover, .row-header:hover,
         --grad-sld-bar, .search-box:focus gradient */
  --bg-dark: #060806;
      /* Extra dark areas - footers, sidebars (available for custom use) */
  --bg-darker: #040604;
      /* Near-black for maximum contrast areas (available for custom use) */
  --bg-darkest: #030503;
      /* Absolute darkest - rare use for shadows (available for custom use) */
  --bg-card: #0c100c;
      /* Card component background (available for custom use) */

  /* Gradient background stops - used in linear-gradient compositions */
  --bg-gradient-1: #0a1a0a;
      /* Gradient stop 1 - subtle green tint
         Used in: --grad-header, --grad-hero */
  --bg-gradient-2: #102a10;
      /* Gradient stop 2 - medium green tint
         Used in: --grad-header, --grad-hero */
  --bg-gradient-3: #153a15;
      /* Gradient stop 3 - stronger green tint
         Used in: --grad-header, --grad-sld-bar */
  --bg-gradient-4: #0f2a0f;
      /* Gradient stop 4 - alternate medium (available for custom use) */
  --bg-gradient-5: #1a4a1a;
      /* Gradient stop 5 - brightest gradient bg (available for custom use) */

  /* ========================================================================
     PRIMARY COLOR PALETTE (Green)
     Tailwind-inspired green scale from lightest (50) to darkest (950)
     Used for accents, buttons, highlights, and interactive elements
     ======================================================================== */
  --color-50: #f0fdf4;
      /* Lightest - hover backgrounds, subtle highlights (available for custom use) */
  --color-100: #dcfce7;
      /* Very light - disabled states, light fills (available for custom use) */
  --color-200: #bbf7d0;
      /* Light - secondary highlights (available for custom use) */
  --color-300: #86efac;
      /* Medium light - hover states
         Used in: a:hover link color */
  --color-400: #4ade80;
      /* Medium - primary accent, icons
         Used in: a link color, .text-accent-bright utility class */
  --color-500: #22c55e;
      /* Base green - buttons, links, primary actions
         Used in: .btn:focus ring, --grad-busbar center, .num-on text color,
         --border-accent, --active status color */
  --color-600: #16a34a;
      /* Medium dark - pressed states, emphasis
         Used in: --grad-accent-vert-hover, --grad-active-h, .active-bar gradient */
  --color-700: #15803d;
      /* Dark - strong emphasis (available for custom use) */
  --color-800: #166534;
      /* Darker - borders, outlines
         Used in: --grad-accent-vert, --grad-accent-vert-hover, --border-accent-soft */
  --color-900: #14532d;
      /* Very dark - shadows, dark accents
         Used in: --grad-accent-vert, --grad-active-h, --grad-hover-h, --grad-busbar,
         .active-bar gradient */
  --color-950: #052e16;
      /* Darkest - near-black green for deep shadows
         Used in: body radial-gradient, --grad-hover-h, --grad-sld-bar,
         badge background */

  /* RGB versions for use with rgba() transparency */
  --color-400-rgb: 74, 222, 128;
      /* Use as: rgba(var(--color-400-rgb), 0.5) for transparent overlays */
  --color-500-rgb: 34, 197, 94;
      /* Base green in RGB - used in glow definitions (--accent-glow-soft, --active-glow) */
  --color-600-rgb: 22, 163, 74;
      /* Medium dark in RGB format (available for custom use) */
  --color-800-rgb: 22, 101, 52;
      /* Dark green in RGB format (available for custom use) */

  /* ========================================================================
     BORDER COLORS
     For panels, cards, inputs, and dividers
     ======================================================================== */
  --border-accent: #22c55e;
      /* Primary accent border - matches color-500
         Used in: .scada-header, .clock-box, .search-box, .sub-card,
         .feeders-full, .col-head, .row-header, table cells, form inputs */
  --border-accent-soft: #166534;
      /* Softer accent border - less prominent (available for custom use) */
  --border-slate: #242d24;
      /* Neutral dark border - subtle separation (available for custom use) */
  --border-slate-light: #333d33;
      /* Lighter neutral border (available for custom use) */
  --border-slate-lighter: #434d43;
      /* Lightest neutral border - hover states (available for custom use) */

  /* ========================================================================
     TEXT COLORS
     High contrast text palette for readability on dark backgrounds
     ======================================================================== */
  --text-main: #f0f8f0;
      /* Primary text - high contrast, slight green tint
         Used in: body, .search-box, .feeders-full, table cells, form inputs */
  --text-dim: #a3b8a3;
      /* Secondary text - labels, descriptions
         Used in: .scada-label, .small-muted, .scada-header .stamp, .kpi .label,
         ::placeholder, secondary text throughout */
  --text-bright: #ffffff;
      /* Emphasis text - headings, important values
         Used in: .scada-title, .scada-header .title, .sub-topbar,
         .col-head:hover, .row-header:hover, table headers */
  --text-muted: #475d47;
      /* Muted text - placeholders, disabled (available for custom use) */
  --text-slate: #647d64;
      /* Tertiary text - timestamps, metadata (available for custom use) */

  /* ========================================================================
     STATUS/SEMANTIC COLORS
     Indicate system states: operational, warnings, alarms, errors
     ======================================================================== */
  --ok: #4ade80;
      /* OK/Online status - bright green indicator
         Used in: .clock-box time display, .col-head:hover, .feeder-row.on,
         .switch.on, status indicators, .num-ok values */
  --active: #22c55e;
      /* Active/Running state - primary green
         Used in: .live-dot pulse animation, .kpi.active .value,
         .led.on, .nav-link.active, status badges */
  --idle: #647d64;
      /* Idle/Standby state - muted gray-green
         Used in: .idle-bar gradient, .switch.off, disabled states */
  --alarm: #fbbf24;
      /* Alarm state - amber/yellow for attention
         Used in: .alarm-bar gradient, .kpi.alarm .value, .row-alarm background,
         alarm indicators, flashing alerts */
  --alarm-dark: #b45309;
      /* Dark alarm - for backgrounds behind alarm
         Used in: .alarm-bar gradient start color */
  --warn: #ef4444;
      /* Warning state - red for caution
         Used in: .clock-box::before icon, .lastupdate-box text,
         .kpi.total .value, warning indicators */
  --warn-muted: #f87171;
      /* Muted warning - lighter red variant (available for custom use) */
  --normal: #6b7280;
      /* Normal/Neutral state - gray (available for custom use) */
  --success: #00cc66;
      /* Success actions - confirmations, completions (available for custom use) */
  --success-bright: #00d48a;
      /* Bright success - highlighted success state
         Used in: --grad-energized center color */
  --success-dark: #00a060;
      /* Dark success - for gradients, backgrounds
         Used in: --grad-energized edge colors */
  --success-dim: #cc9900;
      /* Dim success variant - secondary confirmations (available for custom use) */
  --error: #ef4444;
      /* Error state - failures, critical issues (available for custom use) */

  /* ========================================================================
     GAUGE/METER COLORS
     For circular gauges, progress bars, and meter visualizations
     ======================================================================== */
  --gauge-mid: #6b9c6b;
      /* Gauge midpoint color - medium range values (used in gauge components) */
  --gauge-tick: #324d32;
      /* Gauge tick marks - subtle graduations (used in gauge components) */

  /* ========================================================================
     GLOW EFFECTS
     Box-shadow and text-shadow colors for illumination effects
     ======================================================================== */
  --accent-glow: #4ade80;
      /* Solid glow color for highlights
         Used in: .search-box:focus border, .col-head:focus, .row-header:focus,
         button focus states, input focus borders, active borders */
  --accent-glow-soft: rgba(34, 197, 94, 0.35);
      /* Soft glow - subtle illumination
         Used in: --shadow-card inset glow, --shadow-card-strong,
         .scada-header .title text-shadow, ambient glow effects */
  --active-glow: rgba(34, 197, 94, 0.55);
      /* Active element glow - stronger
         Used in: .live-dot box-shadow, .search-box:focus outer ring,
         active state illumination */
  --alarm-glow: rgba(251, 191, 36, 0.50);
      /* Alarm glow - amber illumination
         Used in: .alarm-bar box-shadow, .kpi.alarm text-shadow,
         alarm state effects */
  --warn-glow: rgba(239, 68, 68, 0.40);
      /* Warning glow - red illumination
         Used in: .clock-box::before text-shadow, .lastupdate-box box-shadow,
         warning state effects */

  /* ========================================================================
     ROW HIGHLIGHT COLORS
     For table rows, list items with special states
     ======================================================================== */
  --row-on-bg: #f0fff0;
      /* Row "ON" state background - light green (used in highlighted table rows) */
  --row-meter-bg: #e0ffe0;
      /* Metered row background - subtle highlight (used in meter reading rows) */
  --row-dark-text: #0f1a0f;
      /* Dark text for light row backgrounds (used when row-on-bg is applied) */

  /* ========================================================================
     SPACING SCALE
     Consistent spacing based on 4px/8px grid system
     ======================================================================== */
  --space-xs: 4px;
      /* Extra small - tight padding, small gaps
         Used in: .scada-label margin, .lastupdate-box padding, .scada-header-right gap,
         compact component spacing */
  --space-sm: 8px;
      /* Small - default padding, icon spacing
         Used in: .scada-header border-radius, .clock-box padding/gap,
         .sub-topbar padding, .sub-card border-radius, button padding */
  --space-md: 12px;
      /* Medium - card padding, section gaps
         Used in: .scada-header padding/gap/margin, .scada-grid gap,
         .search-box padding, .sub-body padding, card internal spacing */
  --space-lg: 16px;
      /* Large - container padding, margins
         Used in: .scada-header horizontal padding, section margins,
         larger component padding */
  --space-xl: 24px;
      /* Extra large - section spacing (available for custom use) */
  --space-xxl: 32px;
      /* Double extra large - major sections (available for custom use) */

  /* ========================================================================
     TYPOGRAPHY
     Font families and size scale for consistent text styling
     ======================================================================== */
  --font-main: "Segoe UI", "Roboto", Tahoma, sans-serif;
      /* Primary UI font
         Used in: body font-family, all general text content */
  --font-mono: "Consolas", "SF Mono", "Courier New", monospace;
      /* Code/values font
         Used in: .scada-value, .clock-box, .lastupdate-box, .kpi .value,
         numeric displays, data readings, timestamps */

  --font-size-xs: 10px;
      /* Extra small - labels, badges
         Used in: .scada-label, .kpi .label, .sub-topbar small, table badges */
  --font-size-sm: 12px;
      /* Small - secondary text, captions
         Used in: .small-muted, .scada-header .stamp, .scada-header-right,
         .lastupdate-box, .feeders-full table, secondary content */
  --font-size-md: 14px;
      /* Medium - body text, default size
         Used in: body font-size, .search-box, .sub-topbar, general text */
  --font-size-lg: 16px;
      /* Large - emphasized text, subheadings
         Used in: .clock-box time display, emphasized content */
  --font-size-xl: 20px;
      /* Extra large - section headings
         Used in: .scada-title, .kpi .value, section headers */
  --font-size-xxl: 26px;
      /* Double XL - page titles, hero text
         Used in: .scada-header .title, main page headings */
  --font-size-value: 22px;
      /* Value display - KPI numbers, readings
         Used in: .scada-value class for prominent numeric displays */

  /* ========================================================================
     GRADIENTS
     Pre-composed gradient definitions for common UI patterns
     ======================================================================== */
  --grad-header: linear-gradient(90deg, var(--bg-gradient-1), var(--bg-gradient-2), var(--bg-gradient-3));
      /* Header bar gradient - horizontal, subtle green shift
         Used in: .scada-header, .footer-bar, modal headers, section headers */
  --grad-panel: linear-gradient(180deg, var(--bg-panel-2), var(--bg-panel));
      /* Panel background gradient - vertical, top to bottom darkening
         Used in: .sub-card, .search-box, dropdown menus, card backgrounds */
  --grad-hero: linear-gradient(90deg, var(--bg-main), var(--bg-gradient-1), var(--bg-gradient-2));
      /* Hero section gradient - horizontal sweep (available for hero sections) */
  --grad-accent-vert: linear-gradient(180deg, var(--color-800), var(--color-900));
      /* Vertical accent gradient - for buttons, active states (button backgrounds) */
  --grad-accent-vert-hover: linear-gradient(180deg, var(--color-600), var(--color-800));
      /* Vertical accent hover - brighter on hover (button :hover states) */
  --grad-active-h: linear-gradient(90deg, var(--color-900), var(--color-600));
      /* Horizontal active gradient - for active navigation items (.active-bar) */
  --grad-hover-h: linear-gradient(90deg, var(--color-950), var(--color-900));
      /* Horizontal hover gradient - subtle hover effect (nav hover states) */
  --grad-sld-bar: linear-gradient(180deg, var(--color-950), var(--bg-gradient-3), var(--color-950));
      /* Single-line diagram bar - for electrical diagram elements (SLD components) */
  --grad-busbar: linear-gradient(90deg, var(--color-900), var(--color-500), var(--color-900));
      /* Busbar gradient - electrical busbar visualization (SLD busbar elements) */
  --grad-energized: linear-gradient(90deg, var(--success-dark), var(--success-bright), var(--success-dark));
      /* Energized state gradient - for powered/live indicators (energized equipment) */

  /* ========================================================================
     SHADOWS
     Box-shadow definitions for depth and elevation
     ======================================================================== */
  --shadow-card: 0 0 12px var(--accent-glow-soft) inset, 0 4px 16px rgba(0, 0, 0, 0.6);
      /* Standard card shadow - inner glow + outer drop shadow
         Used in: .scada-header, .sub-card, panel containers, cards */
  --shadow-card-strong: 0 0 14px var(--accent-glow-soft) inset, 0 8px 22px rgba(0, 0, 0, 0.7);
      /* Strong card shadow - more prominent elevation (hover states, modals) */
  --shadow-toolbar: inset 0 0 8px rgba(0, 0, 0, 0.7);
      /* Toolbar shadow - recessed/inset appearance (toolbar backgrounds) */
}

/* Page background + global type */
body {
  background: radial-gradient(1400px 800px at 15% -15%, var(--color-950) 0%, var(--bg-main) 65%);
  color: var(--text-main);
  font-family: var(--font-main);
  font-size: var(--font-size-md);
  line-height: 1.4;
}

/* Global link treatment */
a { color: var(--color-400); }
a:hover { color: var(--color-300); }

/* ==========================================================================
   TYPOGRAPHY HELPERS
   ========================================================================== */

.scada-value {
  font-family: var(--font-mono);
  font-size: var(--font-size-value);
  font-weight: 900;
  letter-spacing: 0.5px;
}

.scada-label {
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-dim);
  margin-bottom: var(--space-xs);
}

.scada-title {
  font-size: var(--font-size-xl);
  font-weight: 900;
  letter-spacing: 1px;
  color: var(--text-bright);
}

.small-muted {
  color: var(--text-dim);
  font-size: var(--font-size-sm);
}

/* ==========================================================================
   ANIMATIONS
   ========================================================================== */

@keyframes pulse {
  0% { opacity: .35; transform: scale(.9); }
  50% { opacity: 1; transform: scale(1.15); }
  100% { opacity: .35; transform: scale(.9); }
}

@keyframes alarm-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* ==========================================================================
   HEADER / TITLE BAR
   ========================================================================== */

.scada-header {
  background: var(--grad-header);
  border: 1px solid var(--border-accent);
  border-radius: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  box-shadow: var(--shadow-card);
  margin-bottom: var(--space-md);

  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.scada-header .title {
  font-size: var(--font-size-xxl);
  font-weight: 900;
  letter-spacing: 1.5px;
  color: var(--text-bright);
  text-shadow: 0 0 10px var(--accent-glow-soft);

  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.scada-header .stamp {
  font-size: var(--font-size-sm);
  color: var(--text-dim);
}

.live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--active);
  box-shadow: 0 0 8px var(--active), 0 0 16px var(--active-glow);
  animation: pulse 1.4s infinite;
  flex-shrink: 0;
}

.scada-header-right {
  text-align: right;
  font-size: var(--font-size-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.clock-box {
  font-weight: 900;
  color: var(--ok);
  font-family: var(--font-mono);
  font-size: var(--font-size-lg);
  text-shadow: 0 0 8px var(--accent-glow-soft);

  background: linear-gradient(180deg, rgba(60, 45, 30, 0.4), rgba(30, 22, 15, 0.6));
  border: 1px solid var(--border-accent);
  border-radius: var(--space-sm);
  padding: var(--space-sm) var(--space-md);

  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);

  box-shadow: 0 0 12px rgba(180, 140, 80, 0.2) inset;
}

.clock-box::before {
  content: "\23F0";
  font-size: var(--font-size-md);
  color: var(--warn);
  text-shadow: 0 0 6px var(--warn-glow);
}

.lastupdate-box {
  font-weight: 800;
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  color: var(--warn);

  background: linear-gradient(180deg, rgba(60, 40, 0, 0.3), rgba(40, 20, 0, 0.5));
  border: 1px solid rgba(255, 184, 0, 0.4);
  border-radius: var(--space-sm);
  padding: var(--space-xs) var(--space-sm);

  display: inline-block;
  box-shadow: 0 0 10px var(--warn-glow) inset;
}

/* ==========================================================================
   SEARCH INPUT
   ========================================================================== */

.search-box {
  width: 260px;
  max-width: 100%;
  border-radius: 10px;
  padding: 9px 12px 9px 36px;

  background: linear-gradient(180deg, var(--bg-panel-2), var(--bg-panel));
  border: 1px solid var(--border-accent);
  color: var(--text-main);

  font-size: 13px;
  box-shadow: 0 0 14px var(--accent-glow-soft) inset, 0 4px 14px rgba(0,0,0,.65);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2394a3b8' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85Zm-5.242 1.156a5 5 0 1 1 0-10 5 5 0 0 1 0 10Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 12px center;
}

.search-box:focus {
  outline: none;
  border-color: var(--accent-glow);
  box-shadow: 0 0 18px var(--accent-glow-soft), 0 0 0 2px var(--active-glow);
  background: linear-gradient(180deg, var(--bg-panel-3), var(--bg-panel-2));
}

.search-box::placeholder {
  color: var(--text-dim);
  letter-spacing: .3px;
}

/* ==========================================================================
   DASHBOARD GRID
   ========================================================================== */

.scada-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-md);
}

/* ==========================================================================
   SUBSTATION CARD
   ========================================================================== */

.sub-card {
  background: var(--grad-panel);
  border: 1px solid var(--border-accent);
  border-radius: var(--space-sm);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.sub-topbar {
  padding: var(--space-sm) var(--space-md);
  font-weight: 800;
  font-size: var(--font-size-md);
  letter-spacing: 0.5px;
  color: var(--text-bright);

  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sub-topbar small { font-size: var(--font-size-xs); opacity: .9; }

.alarm-bar {
  background: linear-gradient(90deg, var(--alarm-dark), var(--alarm));
  box-shadow: 0 0 12px var(--alarm-glow);
}

.active-bar { background: linear-gradient(90deg, var(--color-900), var(--color-600)); }
.idle-bar   { background: linear-gradient(90deg, var(--bg-panel-3), var(--idle)); }

.sub-body {
  padding: var(--space-sm) var(--space-md);
}

/* KPI blocks */
.kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.kpi {
  background: var(--bg-panel);
  border: 1px solid var(--border-accent-soft);
  border-radius: var(--space-xs);
  padding: var(--space-sm);
  text-align: center;
  box-shadow: 0 0 8px rgba(0,0,0,.6) inset;
}

.kpi .label {
  font-size: var(--font-size-xs);
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 700;
}

.kpi .value {
  font-family: var(--font-mono);
  font-size: var(--font-size-xl);
  font-weight: 900;
  margin-top: 2px;
  text-shadow: 0 0 6px rgba(0,0,0,.8);
}

.kpi.total .value { color: var(--warn); }
.kpi.active .value { color: var(--active); }
.kpi.alarm .value  { color: var(--alarm); text-shadow: 0 0 8px var(--alarm-glow); }

/* Feeders list inside card */
.feeders-full {
  max-height: 240px;
  overflow-y: auto;
  border-top: 1px solid var(--border-accent-soft);
  margin-top: var(--space-sm);
  padding-top: var(--space-xs);
}

.feeders-full table { font-size: var(--font-size-sm); }

.feeders-full th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg-panel);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Footer button area */
.sub-footer {
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-panel);
  border-top: 1px solid var(--border-accent-soft);
}

.btn-scada {
  display: block;
  text-align: center;
  text-decoration: none;

  font-size: var(--font-size-sm);
  font-weight: 800;
  letter-spacing: 0.5px;

  padding: var(--space-sm);
  border-radius: var(--space-xs);
  border: 1px solid var(--border-accent);

  background: var(--grad-accent-vert);
  color: var(--text-main);

  transition: .15s;
  box-shadow: 0 0 10px var(--accent-glow-soft) inset;
}

.btn-scada:hover {
  background: var(--grad-accent-vert-hover);
  color: var(--text-bright);
  border-color: var(--accent-glow);
}

/* ==========================================================================
   AUTH FORMS
   ========================================================================== */

.auth-card { max-width: 480px; margin: 0 auto; }

.auth-card .form-control {
  background: var(--bg-panel);
  border: 1px solid var(--border-accent-soft);
  color: var(--text-main);
  font-size: var(--font-size-md);
}

.auth-card .form-control:focus {
  box-shadow: 0 0 0 0.15rem var(--accent-glow-soft);
  border-color: var(--accent-glow);
}

/* ==========================================================================
   SIDEBAR — SUBSTATIONS LIST
   ========================================================================== */

.scada-sidebar {
  max-height: 90vh;
  overflow-y: auto;
  background: var(--bg-panel-2);
  border: 1px solid var(--border-accent);
  border-radius: var(--space-sm);
  box-shadow: 0 0 10px var(--accent-glow-soft) inset;
}

.scada-sidebar-item {
  background: var(--bg-panel-2);
  border-color: var(--border-accent-soft);
  padding: 0;
}

.scada-sidebar-link {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);

  color: var(--text-main);
  text-decoration: none;
  font-weight: 700;
  font-size: var(--font-size-sm);
}

.scada-sidebar-item.active .scada-sidebar-link {
  background: var(--bg-panel-3);
  color: var(--ok);
  border-left: 3px solid var(--accent-glow);
  text-shadow: 0 0 6px var(--accent-glow-soft);
}

.scada-sidebar-link:hover {
  background: var(--bg-panel-3);
  color: var(--text-bright);
}

.side-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--active);
  box-shadow: 0 0 5px var(--active-glow);
  flex-shrink: 0;
}

.scada-sidebar-item.active .side-dot {
  background: var(--ok);
  box-shadow: 0 0 8px var(--accent-glow-soft);
}

/* ==========================================================================
   TABLES (THEME OVERRIDES)
   ========================================================================== */

.table.table-dark {
  --bs-table-bg: var(--bg-panel);
  --bs-table-striped-bg: var(--bg-panel-2);
  --bs-table-striped-color: var(--text-main);
  --bs-table-border-color: var(--border-accent-soft);
  --bs-table-color: var(--text-main);
  border-color: var(--border-accent-soft);
  font-size: var(--font-size-sm);
}

.table.table-dark th {
  font-size: var(--font-size-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-dim);
  padding: var(--space-sm);
}

.table.table-dark td {
  padding: var(--space-sm);
  vertical-align: middle;
}

.table-danger {
  --bs-table-bg: var(--alarm) !important;
  --bs-table-color: #fff !important;
  font-weight: 900;
  box-shadow: 0 0 8px var(--alarm-glow);
}

.table-success {
  --bs-table-bg: var(--row-on-bg) !important;
  --bs-table-color: var(--row-dark-text) !important;
  font-weight: 800;
}

.table-info {
  --bs-table-bg: var(--row-meter-bg) !important;
  --bs-table-color: var(--row-dark-text) !important;
  font-weight: 800;
}

.scada-section-title {
  font-size: var(--font-size-lg);
  color: var(--ok);
  font-weight: 900;
  margin-top: var(--space-lg);
  padding-bottom: var(--space-xs);
  border-bottom: 2px solid var(--border-accent);
  text-shadow: 0 0 6px var(--accent-glow-soft);
}

/* ==========================================================================
   NAVBAR — SCADA
   ========================================================================== */

.scada-navbar {
  background: var(--grad-header);
  box-shadow: 0 0 12px var(--active-glow) inset, 0 4px 12px rgba(0,0,0,.5);
  border-bottom: 1px solid var(--border-accent);
}

.scada-brand {
  font-weight: 900;
  color: var(--text-bright) !important;
  letter-spacing: 1.5px;
  text-shadow: 0 0 8px var(--accent-glow-soft);
  font-size: var(--font-size-lg);

  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.scada-navlink {
  color: var(--text-main) !important;
  font-weight: 700;
  font-size: var(--font-size-sm);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--space-xs);
  transition: .15s;
  text-shadow: 0 0 4px rgba(0,0,0,.5);
}

.scada-navlink:hover {
  background: var(--accent-glow-soft);
  color: var(--text-bright) !important;
}

.scada-navlink.active {
  background: var(--active-glow);
  color: var(--ok) !important;
}

.scada-user {
  color: var(--ok) !important;
  font-weight: 800;
  font-size: var(--font-size-sm);
}

.scada-logout-btn {
  background: transparent;
  color: var(--text-main);
  border: 1px solid var(--border-accent);
  font-weight: 800;
  font-size: var(--font-size-sm);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--space-xs);
  box-shadow: 0 0 6px var(--accent-glow-soft) inset;
}

.scada-logout-btn:hover {
  background: var(--accent-glow-soft);
  color: var(--text-bright);
  border-color: var(--accent-glow);
}

/* ==========================================================================
   TOOLBAR (SEARCH + CLOCK)
   ========================================================================== */

.scada-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;

  background: var(--bg-dark);
  border: 1px solid var(--border-accent);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--space-xs);
  box-shadow: var(--shadow-toolbar);
}

.scada-toolbar-group {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.scada-toolbar-label {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  color: var(--text-dim);
  font-weight: 800;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.scada-input-group { display: flex; align-items: center; }

.scada-input {
  background: var(--bg-darkest);
  border: 1px solid var(--border-accent);
  color: var(--ok);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);

  padding: var(--space-xs) var(--space-sm);
  height: 28px;
  min-width: 140px;
  border-radius: 0;
  outline: none;
}

.scada-input::placeholder {
  color: var(--idle);
  font-style: italic;
}

.scada-input:focus {
  border-color: var(--ok);
  box-shadow: 0 0 5px var(--accent-glow-soft);
  z-index: 1;
}

.scada-btn {
  background: var(--border-accent);
  border: 1px solid var(--border-accent);
  border-left: none;

  color: var(--text-bright);
  height: 28px;
  padding: 0 var(--space-md);

  font-size: var(--font-size-xs);
  text-transform: uppercase;
  font-weight: 800;

  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.scada-btn:hover {
  background: var(--accent-glow);
  color: var(--bg-main);
}

.scada-btn:active {
  background: var(--color-950);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.5);
}

.scada-digital-clock {
  margin-left: auto;

  background: var(--bg-darker);
  border: 2px solid var(--border-slate-light);
  border-bottom-color: var(--border-slate-lighter);
  border-right-color: var(--border-slate-lighter);
  border-top-color: var(--border-slate);
  border-left-color: var(--border-slate);

  color: var(--active);
  font-family: var(--font-mono);
  font-weight: 900;
  font-size: var(--font-size-lg);

  padding: 2px var(--space-md);
  letter-spacing: 2px;
  text-shadow: 0 0 5px var(--active-glow);

  min-width: 200px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.scada-separator {
  width: 1px;
  height: 18px;
  background: var(--border-accent);
  margin: 0 var(--space-sm);
}

/* ==========================================================================
   STATUS HELPERS
   ========================================================================== */

.status-active  { color: var(--active); font-weight: 800; }
.status-alarm   { color: var(--alarm);  font-weight: 900; text-shadow: 0 0 6px var(--alarm-glow); }
.status-warning { color: var(--warn);   font-weight: 800; text-shadow: 0 0 4px var(--warn-glow); }
.status-idle    { color: var(--idle);   font-weight: 600; }
.status-normal  { color: var(--normal); font-weight: 600; }

/* ==========================================================================
   UTILITIES
   ========================================================================== */

.gap-xs { gap: var(--space-xs); }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }

.p-xs { padding: var(--space-xs); }
.p-sm { padding: var(--space-sm); }
.p-md { padding: var(--space-md); }
.p-lg { padding: var(--space-lg); }

.text-right { text-align: right; }
.text-critical {
  font-family: var(--font-mono);
  font-size: var(--font-size-value);
  font-weight: 900;
}

.text-accent         { color: var(--ok) !important; }
.text-accent-bright  { color: var(--color-400) !important; }
.text-main           { color: var(--text-main) !important; }
.text-alarm          { color: var(--alarm) !important; }
.text-bright         { color: var(--text-bright) !important; }

.d-none-util { display: none; }

.num-on  { color: var(--color-500); }
.num-off { color: var(--idle); }

.text-danger-strong {
  color: var(--alarm);
  font-weight: 700;
}

.validation-hidden { display: none; }
.validation-message { color: var(--error); font-size: 12px; margin-top: 4px; }

/* ==========================================================================
   BOOTSTRAP OVERRIDES (THEME CONSISTENCY)
   ========================================================================== */

.btn-primary {
  background-color: var(--color-500) !important;
  border-color: var(--color-400) !important;
  color: #fff !important;
}

.btn-primary:hover {
  background-color: var(--color-600) !important;
  border-color: var(--color-500) !important;
}

.bg-primary { background-color: var(--color-500) !important; }
.text-primary { color: var(--color-400) !important; }

.bg-info { background-color: var(--color-800) !important; }
.text-info { color: var(--color-400) !important; }

.btn-info {
  background-color: var(--color-500) !important;
  border-color: var(--color-400) !important;
  color: #fff !important;
}

.btn-info:hover {
  background-color: var(--color-600) !important;
  border-color: var(--color-500) !important;
}

.btn-outline-info {
  color: var(--color-400) !important;
  border-color: var(--color-500) !important;
  background: transparent !important;
}

.btn-outline-info:hover {
  background-color: var(--color-500) !important;
  border-color: var(--color-400) !important;
  color: #fff !important;
}

.btn-outline-info:focus,
.btn-outline-info.focus {
  box-shadow: 0 0 0 0.2rem rgba(var(--color-500-rgb), 0.5) !important;
}

/* List group */
.list-group-item {
  background-color: var(--bg-panel-2) !important;
  border-color: var(--border-accent-soft) !important;
  color: var(--text-main) !important;
}

.list-group-item:hover { background-color: var(--bg-card) !important; }

.list-group-item.active {
  background-color: var(--bg-panel-3) !important;
  border-color: var(--border-accent) !important;
  color: var(--ok) !important;
}

.list-group-item.active .scada-sidebar-link { color: var(--ok) !important; }

/* Footer */
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  white-space: nowrap;
  line-height: 60px;

  background: var(--bg-main);
  color: var(--text-dim);
  border-color: var(--border-accent) !important;
}

/* ==========================================================================
   NAVBAR — INDUSTRIAL VARIANT
   ========================================================================== */

.nav-industrial {
  background: var(--grad-header);
  border-bottom: 1px solid var(--border-accent);
}

.nav-industrial .navbar-brand {
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--ok) !important;
  text-shadow: 0 0 8px var(--accent-glow-soft);
}

.nav-industrial .nav-link {
  font-weight: 600;
  letter-spacing: 0.4px;
  color: var(--text-main) !important;
}

.nav-industrial .nav-link:hover {
  color: var(--ok) !important;
}

.scada-footer {
  background: var(--bg-dark);
  color: var(--text-dim);
  font-size: var(--font-size-xs);
}

/* ==========================================================================
   BUTTON VARIANTS
   ========================================================================== */

.btn-scada-sm {
  display: inline-block;
  text-decoration: none;
  background: var(--color-500);
  color: #fff;
  border: 1px solid var(--color-400);
  font-size: var(--font-size-sm);
  font-weight: 700;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--space-xs);
  transition: 0.15s;
}

.btn-scada-sm:hover {
  background: var(--color-600);
  color: #fff;
  border-color: var(--color-500);
}

.btn-scada-centered {
  max-width: 220px;
  margin: auto;
}

.btn-scada-guest {
  display: block;
  text-align: center;
  text-decoration: none;
  font-size: var(--font-size-sm);
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: var(--space-sm);
  border-radius: var(--space-xs);
  border: 1px solid var(--border-accent);
  background: linear-gradient(135deg, var(--color-500), var(--color-800));
  color: var(--text-main);
  transition: 0.15s;
}

.btn-scada-guest:hover {
  background: linear-gradient(135deg, var(--color-400), var(--color-500));
  color: var(--text-bright);
}

/* ==========================================================================
   CODE / JSON DISPLAY
   ========================================================================== */

.json-display {
  background: var(--bg-panel);
  color: var(--ok);
  padding: 15px;
  border-radius: 8px;
  white-space: pre-wrap;
  font-family: var(--font-mono);
  border: 1px solid var(--border-accent-soft);
}

.json-preview {
  white-space: pre-wrap;
}

.json-modal-body {
  background: var(--bg-main);
}

.json-modal-content {
  color: var(--ok);
  white-space: pre-wrap;
  font-family: var(--font-mono);
  font-size: 0.92rem;
}

/* ==========================================================================
   BADGES
   ========================================================================== */

.badge {
  font-weight: 700;
}

.badge-accent {
  background: var(--color-500);
  color: #fff;
}

.badge-accent-light {
  background: var(--color-800);
  color: #fff;
}

/* ==========================================================================
   MISCELLANEOUS
   ========================================================================== */

.modal-icon-accent {
  font-size: 1.5rem;
  color: var(--ok);
}

.section-heading-accent {
  color: var(--ok);
  font-weight: 700;
}

.tr-count-label {
  margin-left: 10px;
}

.live-dot-sm {
  width: 6px;
  height: 6px;
  margin-right: 6px;
}

.form-separator {
  border-color: rgba(255, 255, 255, 0.2);
}

.register-title {
  font-size: 20px;
}

.col-auth-access {
  width: 200px;
}

.col-actions {
  width: 150px;
}

.clock-inline {
  margin-top: var(--space-xs);
}

/* ==========================================================================
   GROUPS PAGE
   ========================================================================== */

/* Sidebar */
.group-sidebar {
  position: sticky;
  top: 70px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  background: linear-gradient(180deg, var(--bg-panel-2), var(--bg-panel));
  border: 1px solid var(--border-accent);
  border-radius: 12px;
  box-shadow: var(--shadow-card-strong);
}

.group-sidebar-header {
  background: var(--grad-active-h);
  padding: 12px 14px;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #fff;
  border-bottom: 1px solid var(--border-accent);
}

.group-sidebar-body {
  padding: 10px;
  max-height: calc(100vh - 200px);
  overflow-y: auto;
}

.group-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  margin-bottom: 6px;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
  color: var(--text-main);
  background: var(--bg-panel);
  border: 1px solid var(--border-accent-soft);
  transition: all 0.2s ease;
}

.group-link:hover {
  background: var(--grad-hover-h);
  border-color: var(--accent-glow);
  box-shadow: 0 0 10px var(--accent-glow-soft);
  color: #fff;
}

.group-link.active {
  background: var(--grad-active-h);
  border-color: var(--accent-glow);
  box-shadow: 0 0 12px var(--accent-glow-soft);
  color: #fff;
}

.group-link .group-num {
  font-weight: 800;
  font-size: 18px;
  color: var(--accent-glow);
}

.group-link.active .group-num {
  color: #fff;
}

.group-link .group-count {
  font-size: 12px;
  color: var(--text-dim);
  background: rgba(0, 0, 0, 0.3);
  padding: 4px 10px;
  border-radius: 10px;
}

/* Group Card */
.group-card {
  display: none;
  background: var(--grad-panel);
  border: 1px solid var(--border-accent);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-card-strong);
}

.group-card.active {
  display: block;
}

.group-card-header {
  background: var(--grad-active-h);
  padding: 14px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border-accent);
}

.group-card-header h5 {
  margin: 0;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: 1px;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 12px;
}

.group-badge {
  background: rgba(0, 0, 0, 0.3);
  padding: 6px 16px;
  border-radius: 6px;
  font-size: 22px;
  font-weight: 900;
  color: var(--accent-glow);
  text-shadow: 0 0 8px var(--accent-glow-soft);
}

.group-stats {
  display: flex;
  gap: 14px;
}

.group-stat {
  background: rgba(0, 0, 0, 0.3);
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 14px;
  color: var(--text-main);
}

.group-stat .num {
  font-weight: 800;
  font-size: 18px;
  color: var(--ok);
}

/* Industrial Table */
.scada-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

.scada-table thead th {
  background: linear-gradient(180deg, var(--bg-panel-2), var(--bg-panel));
  color: var(--ok);
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 14px 16px;
  border-bottom: 2px solid var(--border-accent);
  text-align: left;
}

.scada-table tbody tr {
  border-bottom: 1px solid var(--border-accent-soft);
  transition: background 0.15s ease;
}

.scada-table tbody tr:hover {
  background: rgba(var(--color-500-rgb), 0.1);
}

.scada-table tbody td {
  padding: 12px 16px;
  color: var(--ok);
  font-size: 15px;
}

.scada-table .feeder-key {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--ok);
  font-size: 15px;
}

.scada-table .feeder-name {
  font-weight: 600;
  color: var(--ok);
  font-size: 15px;
}

.scada-table .value-cell {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 15px;
  color: var(--ok);
}

/* Summation row */
.scada-table tfoot .sum-row {
  background: linear-gradient(180deg, var(--bg-gradient-2), var(--color-950));
  border-top: 2px solid var(--accent-glow);
}

.scada-table tfoot .sum-row td {
  padding: 14px 16px;
}

.sum-label {
  font-family: var(--font-mono);
  font-weight: 900;
  font-size: 14px;
  color: var(--warn);
  text-transform: uppercase;
  letter-spacing: 2px;
  text-shadow: 0 0 8px var(--warn-glow);
}

.sum-value {
  font-family: var(--font-mono);
  font-weight: 900;
  font-size: 16px;
  color: var(--warn);
  text-shadow: 0 0 8px var(--warn-glow);
}

/* Status indicators */
.status-on {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--active);
  font-weight: 800;
  font-size: 14px;
}

.status-on::before {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--active);
  box-shadow: 0 0 8px var(--active), 0 0 16px var(--active-glow);
  animation: pulse 1.4s infinite;
}

.status-off {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--idle);
  font-weight: 800;
  font-size: 14px;
}

.status-off::before {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--text-muted);
}

/* Groups Header */
.groups-header {
  background: var(--grad-header);
  border: 1px solid var(--border-accent);
  border-radius: 12px;
  padding: 14px 18px;
  color: var(--text-main);
  box-shadow: 0 0 18px var(--accent-glow-soft) inset, 0 8px 26px rgba(0, 0, 0, 0.75);
  margin-bottom: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.groups-header .title {
  font-size: 24px;
  font-weight: 900;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  gap: 10px;
  text-shadow: 0 0 8px var(--accent-glow-soft);
  color: var(--ok);
}

.groups-header .subtitle {
  font-size: 13px;
  color: var(--text-dim);
  margin-top: 4px;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.header-stats {
  display: flex;
  gap: 12px;
}

.header-stat {
  background: linear-gradient(180deg, rgba(var(--color-500-rgb), 0.35), rgba(var(--color-800-rgb), 0.6));
  border: 1px solid var(--border-accent);
  border-radius: 10px;
  padding: 10px 16px;
  text-align: center;
}

.header-stat .label {
  font-size: 11px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.header-stat .value {
  font-size: 22px;
  font-weight: 900;
  color: var(--ok);
  text-shadow: 0 0 10px var(--accent-glow-soft);
}

/* Clock and Last Update */
.time-box {
  background: linear-gradient(180deg, rgba(var(--color-500-rgb), 0.35), rgba(var(--color-800-rgb), 0.6));
  border: 1px solid var(--border-accent);
  border-radius: 10px;
  padding: 10px 16px;
  text-align: center;
}

.time-box .label {
  font-size: 10px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.time-box .value {
  font-size: 16px;
  font-weight: 800;
  color: var(--warn);
  font-family: var(--font-mono);
}

.clock-display {
  font-size: 18px;
  font-weight: 900;
  color: var(--ok);
  font-family: var(--font-mono);
  text-shadow: 0 0 10px var(--accent-glow-soft);
}

/* ==========================================================================
   CREATE USER PAGE
   ========================================================================== */

.create-user-card {
  background: linear-gradient(180deg, var(--bg-panel-2), var(--bg-panel));
  border: 1px solid var(--border-accent);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-card-strong);
  max-width: 500px;
  margin: 0 auto;
}

.create-user-header {
  background: linear-gradient(90deg, var(--color-950), var(--color-900));
  padding: 16px 24px;
  border-bottom: 1px solid var(--border-accent);
}

.create-user-header h4 {
  margin: 0;
  font-weight: 800;
  font-size: 18px;
  letter-spacing: 1px;
  color: #fff;
}

.create-user-header .subtitle {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 4px;
}

.create-user-body {
  padding: 24px;
}

.btn-create {
  background: linear-gradient(90deg, var(--color-900), var(--color-600));
  border: 1px solid var(--active);
  color: #fff;
  font-weight: 700;
  padding: 12px 24px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: all 0.2s ease;
}

.btn-create:hover {
  background: linear-gradient(90deg, var(--color-600), var(--color-500));
  box-shadow: 0 0 12px var(--accent-glow-soft);
  color: #fff;
}

.btn-cancel {
  background: transparent;
  border: 1px solid var(--border-accent);
  color: var(--text-dim);
  font-weight: 600;
  padding: 12px 24px;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.btn-cancel:hover {
  border-color: var(--active);
  color: var(--text-main);
}

.role-options {
  background: rgba(20, 15, 10, 0.4);
  border: 1px solid var(--border-accent-soft);
  border-radius: 8px;
  padding: 16px;
  margin-top: 16px;
}

.role-options-title {
  color: var(--ok);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 12px;
}

/* ==========================================================================
   GAUGES (DETAILS PAGE)
   ========================================================================== */

.gauge-settings-with-preview {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) 320px;
  gap: 16px;
  align-items: start;
}

@media (max-width: 1000px) {
  .gauge-settings-with-preview {
    grid-template-columns: 1fr;
  }
}

.gauge-preview-title {
  color: var(--text-dim);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 8px;
}

.gauge-settings-preview {
  padding: 12px;
  border: 1px solid var(--border-slate);
  border-radius: 10px;
  background: var(--grad-panel);
}

.gauge-sample-card {
  margin: 0 auto;
}

.gauge-sample-dial {
  width: var(--gauge-size, 130px);
  height: var(--gauge-size, 130px);
  margin: 0 auto;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.25) 0%, transparent 55%),
    conic-gradient(from 225deg,
      var(--bg-gradient-1) 0 100deg,
      var(--gauge-band-ok, var(--ok)) 100deg 160deg,
      var(--gauge-band-warn, var(--warn)) 160deg 210deg,
      var(--gauge-band-alarm, var(--alarm)) 210deg 270deg,
      var(--bg-gradient-1) 270deg 360deg);
}

.gauge-sample-dial::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  background:
    repeating-conic-gradient(from 225deg,
      rgba(0,0,0,0) 0deg 7deg,
      var(--gauge-tick-minor, var(--text-dim)) 7deg 8deg),
    radial-gradient(circle at 50% 55%,
      var(--gauge-plate, var(--text-bright)) 0%,
      var(--gauge-plate, var(--text-bright)) 62%,
      rgba(0,0,0,0.12) 100%);
}

.gauge-sample-number {
  position: absolute;
  z-index: 2;
  color: var(--gauge-numbers, var(--bg-main));
  font-family: var(--gauge-font-family, var(--font-mono));
  font-size: var(--gauge-font-numbers, 14px);
  font-weight: 800;
  text-shadow: 0 1px 0 rgba(0,0,0,0.12);
}

.gauge-sample-n0 { left: 18px; bottom: 26px; }
.gauge-sample-n50 { left: 50%; top: 14px; transform: translateX(-50%); }
.gauge-sample-n100 { right: 18px; bottom: 26px; }

.gauge-sample-needle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2px;
  height: calc(var(--gauge-size, 130px) * 0.38);
  background: var(--gauge-needle, var(--active));
  transform-origin: 50% 100%;
  transform: translate(-50%, -100%) rotate(25deg);
  z-index: 3;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

.gauge-sample-center {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--bg-panel);
  border: 1px solid var(--border-slate);
  transform: translate(-50%, -50%);
  z-index: 4;
}

.gauge-sample-valuebox {
  position: absolute;
  left: 50%;
  top: 62%;
  transform: translate(-50%, -50%);
  background: var(--gauge-value-bg, var(--color-900));
  color: var(--gauge-value-text, var(--color-100));
  border: 1px solid var(--border-accent-soft);
  border-radius: 6px;
  padding: 4px 8px;
  z-index: 3;
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.gauge-sample-value {
  font-family: var(--gauge-font-family, var(--font-mono));
  font-size: var(--gauge-font-value, 18px);
  font-weight: 900;
  line-height: 1;
}

.gauge-sample-units {
  font-family: var(--gauge-font-family, var(--font-mono));
  font-size: var(--gauge-font-units, 12px);
  font-weight: 800;
  opacity: 0.95;
}

body.gauges-hide-value-box .gauge-sample-valuebox { display: none !important; }
body.gauges-hide-units .gauge-sample-units { display: none !important; }

.gauge-card {
  width: var(--gauge-card-width, 170px);
  position: relative;
  text-align: center;
}

.gauge-bezel {
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--text-bright) 0%, var(--border-slate-lighter) 18%, var(--border-slate) 55%, var(--bg-panel) 100%);
  border: 1px solid var(--border-slate-lighter);
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.55), 0 8px 18px rgba(0, 0, 0, 0.55);
  z-index: -1;
}

.gauge-card canvas {
  display: block;
  margin: 0 auto;
  border-radius: 50%;
  width: var(--gauge-size, 130px);
  height: var(--gauge-size, 130px);
}

.gauge-label {
  color: var(--ok);
  font-size: 0.92rem;
  margin-bottom: 6px;
  letter-spacing: 0.4px;
  font-weight: 800;
  font-family: var(--gauge-font-family, var(--font-main));
  text-transform: uppercase;
}

.gauge-value-text {
  display: inline-block;
  margin: 6px auto 0;
  padding: 4px 10px;
  border-radius: 6px;
  background: linear-gradient(180deg, var(--gauge-value-bg, var(--color-900)), var(--color-950));
  border: 1px solid var(--color-700);
  color: var(--gauge-value-text, var(--color-200));
  font-family: var(--gauge-font-family, var(--font-mono));
  font-weight: 900;
  letter-spacing: 0.5px;
}

body.gauges-hide-label .gauge-label { display: none !important; }
body.gauges-hide-value-text .gauge-value-text { display: none !important; }
body.gauges-hide-max .gauge-max { display: none !important; }

.gauge-max {
  color: var(--text-dim);
  font-size: 0.75rem;
  text-align: center;
  margin-top: 5px;
  font-family: var(--gauge-font-family, var(--font-main));
}

/* Per-dial color bands */
#ampDial {
  background: conic-gradient(from 225deg, var(--bg-gradient-1) 0 100deg, var(--ok) 100deg 160deg, var(--warn) 160deg 210deg, var(--alarm) 210deg 270deg, var(--bg-gradient-1) 270deg 360deg);
}

#mwDial {
  background: conic-gradient(from 225deg, var(--bg-gradient-1) 0 120deg, var(--active) 120deg 170deg, var(--warn) 170deg 220deg, var(--alarm) 220deg 270deg, var(--bg-gradient-1) 270deg 360deg);
}

#pfDial {
  background: conic-gradient(from 225deg, var(--bg-gradient-1) 0 170deg, var(--active) 170deg 230deg, var(--warn) 230deg 250deg, var(--alarm) 250deg 270deg, var(--bg-gradient-1) 270deg 360deg);
}

#mvarDial {
  background: conic-gradient(from 225deg, var(--bg-gradient-1) 0 140deg, var(--gauge-mid) 140deg 210deg, var(--warn) 210deg 240deg, var(--alarm) 240deg 270deg, var(--bg-gradient-1) 270deg 360deg);
}

/* Danger zones */
#ampDial::before {
  background: repeating-conic-gradient(from 225deg, var(--gauge-tick) 0deg 2deg, transparent 2deg 6deg),
              conic-gradient(from 225deg, transparent 0 210deg, rgba(229, 83, 83, 0.3) 210deg 270deg, transparent 270deg 360deg);
}

#mwDial::before {
  background: repeating-conic-gradient(from 225deg, var(--gauge-tick) 0deg 2deg, transparent 2deg 6deg),
              conic-gradient(from 225deg, transparent 0 220deg, rgba(229, 83, 83, 0.3) 220deg 270deg, transparent 270deg 360deg);
}

#pfDial::before {
  background: repeating-conic-gradient(from 225deg, var(--gauge-tick) 0deg 2deg, transparent 2deg 6deg),
              conic-gradient(from 225deg, transparent 0 250deg, rgba(229, 83, 83, 0.3) 250deg 270deg, transparent 270deg 360deg);
}

#mvarDial::before {
  background: repeating-conic-gradient(from 225deg, var(--gauge-tick) 0deg 2deg, transparent 2deg 6deg),
              conic-gradient(from 225deg, transparent 0 240deg, rgba(229, 83, 83, 0.3) 240deg 270deg, transparent 270deg 360deg);
}

/* ==========================================================================
   FEEDER CARDS PAGE
   ========================================================================== */

.feeder-cards-header {
  background: var(--grad-hero) !important;
  border: 1px solid var(--color-500) !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
  color: var(--text-main) !important;
  box-shadow: 0 0 16px rgba(var(--color-500-rgb), 0.15) inset, 0 4px 16px rgba(0, 0, 0, 0.6);
  margin-bottom: 12px !important;
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.feeder-cards-header .title {
  font-size: 26px !important;
  font-weight: 900;
  letter-spacing: 1.5px;
  display: flex !important;
  align-items: center;
  gap: 8px;
  text-shadow: 0 0 10px rgba(var(--color-500-rgb), 0.3);
  color: var(--text-bright) !important;
}

.header-info {
  display: flex !important;
  align-items: center;
  gap: 12px;
}

.info-box {
  background: linear-gradient(180deg, var(--bg-panel-2), var(--bg-panel)) !important;
  border: 1px solid var(--color-500) !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  text-align: center;
}

.info-box .label {
  font-size: 10px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 1px;
  display: block;
}

.info-box .value {
  font-size: 16px;
  font-weight: 900;
  color: var(--color-400);
  font-family: var(--font-mono);
  display: block;
}

.info-box .value.warn {
  color: var(--warn-muted);
}

/* Horizontal Substation Slider */
.substation-slider-container {
  background: linear-gradient(180deg, var(--bg-panel-2), var(--bg-panel)) !important;
  border: 1px solid var(--color-500) !important;
  border-radius: 8px !important;
  padding: 8px !important;
  margin-bottom: 12px !important;
  box-shadow: 0 0 12px rgba(var(--color-500-rgb), 0.15) inset;
}

.slider-label {
  font-size: 10px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 4px;
  padding-left: 4px;
}

.substation-slider {
  display: flex !important;
  gap: 8px !important;
  overflow-x: auto;
  padding: 4px 0;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: var(--color-500) var(--bg-panel);
}

.substation-slider::-webkit-scrollbar {
  height: 8px;
}

.substation-slider::-webkit-scrollbar-track {
  background: var(--bg-panel);
  border-radius: 4px;
}

.substation-slider::-webkit-scrollbar-thumb {
  background: var(--color-500);
  border-radius: 4px;
}

.substation-slider::-webkit-scrollbar-thumb:hover {
  background: var(--color-400);
}

.sub-pill {
  flex-shrink: 0;
  background: linear-gradient(180deg, var(--bg-panel-3), var(--bg-panel-2)) !important;
  border: 1px solid var(--color-800) !important;
  border-radius: 4px !important;
  padding: 8px 12px !important;
  color: var(--text-main) !important;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex !important;
  align-items: center;
  gap: 8px;
  min-width: 100px;
  justify-content: center;
}

.sub-pill:hover {
  background: linear-gradient(180deg, var(--color-900), var(--color-950)) !important;
  border-color: var(--color-500) !important;
  color: var(--text-bright) !important;
}

.sub-pill.active {
  background: linear-gradient(90deg, var(--color-900), var(--color-600)) !important;
  border-color: var(--color-500) !important;
  color: var(--text-bright) !important;
  box-shadow: 0 0 12px rgba(var(--color-500-rgb), 0.3);
}

.sub-pill .count {
  background: rgba(0, 0, 0, 0.3);
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  color: var(--color-400);
}

.sub-pill.active .count {
  background: rgba(255, 255, 255, 0.2);
  color: var(--text-bright);
}

/* Feeder Cards Grid */
.feeders-section {
  display: none;
}

.feeders-section.active {
  display: block;
}

.feeders-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--feeder-card-width, 220px), 1fr));
  gap: var(--feeder-grid-gap, 15px);
  padding: 15px 0;
}

.feeders-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.feeders-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.feeders-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.feeders-grid.cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

body.feeder-cards-hide-status .feeder-status { display: none !important; }

body.feeder-cards-compact .feeder-card-header { padding: 6px 8px; }
body.feeder-cards-compact .feeder-card-body { padding: 8px 10px; }
body.feeder-cards-compact .feeder-metric { padding: 5px 6px; }
body.feeder-cards-compact .feeder-name { margin-bottom: 8px; padding-bottom: 6px; }

/* Feeder Card */
.feeder-card {
  background: var(--bg-card);
  border: 1px solid var(--border-slate);
  border-radius: 8px;
  width: var(--feeder-card-width, 220px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.feeder-card:hover {
  border-color: var(--color-800);
}

.feeder-card.status-on {
  border-top: 3px solid var(--color-500);
}

.feeder-card.status-off {
  border-top: 3px solid var(--border-slate-light);
}

.feeder-card-header {
  background: var(--bg-gradient-1);
  padding: 10px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.feeder-card.status-off .feeder-card-header {
  background: var(--bg-panel);
}

.feeder-key {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
  color: var(--text-main);
}

.feeder-status {
  font-size: 9px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 3px;
  text-transform: uppercase;
}

.feeder-status.on {
  background: var(--color-500);
  color: var(--text-bright);
}

.feeder-status.off {
  background: var(--border-slate);
  color: var(--idle);
}

.feeder-card-body {
  padding: 10px 12px;
  flex: 1;
}

.feeder-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
  margin-bottom: 10px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-slate);
}

.feeder-metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}

.feeder-metric {
  background: var(--bg-main);
  border: 1px solid var(--border-slate);
  border-radius: 4px;
  padding: 6px 8px;
  text-align: center;
}

.feeder-metric .label {
  font-size: 9px;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 2px;
  display: block;
}

.feeder-metric .value {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--color-400);
  display: block;
}

.feeder-card.status-off .feeder-metric .value {
  color: var(--text-muted);
}

.feeder-metric .value.rem {
  color: var(--success);
}

.feeder-metric .value.loc {
  color: var(--success-dim);
}

.feeder-group {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border-slate);
  font-size: 10px;
  color: var(--text-muted);
  text-align: center;
}

.feeder-group span {
  color: var(--color-400);
  font-weight: 600;
  margin-left: 4px;
}

/* Section Summary */
.section-summary {
  background: var(--bg-card) !important;
  border: 1px solid var(--color-800) !important;
  border-radius: 6px !important;
  padding: 12px 16px !important;
  margin-bottom: 16px !important;
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.section-title {
  font-size: 20px;
  font-weight: 900;
  color: var(--text-bright);
  display: flex;
  align-items: center;
  gap: 8px;
}

.section-stats {
  display: flex !important;
  gap: 16px !important;
}

.section-stat {
  text-align: center;
}

.section-stat .label {
  font-size: 10px;
  color: var(--text-dim);
  text-transform: uppercase;
}

.section-stat .value {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 900;
}

.section-stat .value.green {
  color: var(--color-500);
}

.section-stat .value.grey {
  color: var(--idle);
}

.section-stat .value.cyan {
  color: var(--color-400);
}

/* ==========================================================================
   SLD (SINGLE LINE DIAGRAM) PAGE
   ========================================================================== */

.sld-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  height: calc(100vh - 180px);
}

/* Substation Selector - Horizontal Top Bar */
.sld-sidebar {
  width: 100%;
  flex-shrink: 0;
  background: var(--grad-sld-bar);
  border: 1px solid var(--border-accent);
  border-radius: var(--space-sm);
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  box-shadow: 0 4px 20px rgba(var(--color-500-rgb), 0.2);
}

.sld-sidebar-header {
  background: linear-gradient(90deg, var(--color-900), var(--color-600));
  padding: var(--space-sm) var(--space-lg);
  font-weight: 800;
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-bright);
  border-radius: var(--space-xs);
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(var(--color-500-rgb), 0.3);
}

.sld-search {
  flex-shrink: 0;
}

.sld-search-input {
  width: 180px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(var(--color-500-rgb), 0.4);
  border-radius: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  color: var(--text-main);
  font-size: var(--font-size-sm);
  outline: none;
}

.sld-search-input:focus {
  border-color: var(--active);
  box-shadow: 0 0 8px var(--accent-glow-soft);
}

.sld-search-input::placeholder {
  color: var(--text-dim);
}

.sld-sidebar-list {
  flex: 1;
  overflow-x: auto;
  overflow-y: hidden;
  display: flex;
  flex-direction: row;
  gap: var(--space-sm);
  padding: var(--space-sm) 0;
  scrollbar-width: thin;
}

.sld-sidebar-list::-webkit-scrollbar {
  height: 8px;
}

.sld-sidebar-list::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 4px;
}

.sld-sidebar-list::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, var(--color-900), var(--color-600));
  border-radius: 4px;
}

.sld-sub-link {
  display: inline-block;
  padding: var(--space-sm) var(--space-lg);
  color: var(--text-main);
  text-decoration: none;
  font-weight: 700;
  font-size: var(--font-size-sm);
  border-radius: var(--space-xs);
  white-space: nowrap;
  transition: all 0.15s ease;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(var(--color-500-rgb), 0.2);
}

.sld-sub-link:hover {
  background: rgba(var(--color-500-rgb), 0.25);
  color: var(--text-bright);
  border-color: rgba(var(--color-500-rgb), 0.5);
}

.sld-sub-link.active {
  background: linear-gradient(90deg, var(--color-900), var(--color-600));
  color: var(--text-bright);
  border-color: var(--active);
  box-shadow: 0 2px 10px rgba(var(--color-500-rgb), 0.4);
}

/* Main SLD Area */
.sld-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  overflow: hidden;
}

.sld-header {
  background: var(--grad-hero);
  border: 1px solid var(--border-accent);
  border-radius: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.sld-title {
  font-size: var(--font-size-xl);
  font-weight: 900;
  color: var(--text-bright);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.sld-stats {
  display: flex;
  gap: var(--space-md);
}

.sld-stat {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border-accent-soft);
  border-radius: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  text-align: center;
}

.sld-stat .label {
  font-size: var(--font-size-xs);
  color: var(--text-dim);
  text-transform: uppercase;
}

.sld-stat .value {
  font-family: var(--font-mono);
  font-size: var(--font-size-lg);
  font-weight: 900;
}

.sld-stat .value.cyan {
  color: var(--ok);
}

.sld-stat .value.green {
  color: var(--active);
}

.sld-stat .value.grey {
  color: var(--idle);
}

.sld-stat .value.warn {
  color: var(--warn);
}

/* SLD Diagram Area */
.sld-diagram {
  flex: 1;
  background: linear-gradient(180deg, var(--bg-darkest), var(--bg-dark));
  border: 1px solid var(--border-accent);
  border-radius: var(--space-sm);
  padding: var(--space-lg);
  overflow: auto;
  position: relative;
  zoom: var(--sld-zoom, 1);
}

body.sld-hide-labels .feeder-info .feeder-name,
body.sld-hide-labels .busbar-label {
  display: none !important;
}

body.sld-hide-values .feeder-values {
  display: none !important;
}

body.sld-no-anim .cb-symbol.alarm {
  animation: none !important;
}

/* Busbar */
.busbar {
  background: var(--grad-busbar);
  height: 12px;
  border-radius: 6px;
  margin: var(--space-xl) 0;
  box-shadow: 0 0 20px rgba(var(--color-500-rgb), 0.4), inset 0 2px 4px rgba(255, 255, 255, 0.2);
  position: relative;
}

.busbar.energized {
  background: var(--grad-energized);
  box-shadow: 0 0 25px var(--active-glow), inset 0 2px 4px rgba(255, 255, 255, 0.3);
}

.busbar-label {
  position: absolute;
  left: var(--space-md);
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--font-size-xs);
  font-weight: 800;
  color: var(--text-bright);
  text-transform: uppercase;
  letter-spacing: 1px;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
}

/* Feeder Row */
.feeders-row {
  display: flex;
  justify-content: center;
  gap: var(--space-lg);
  flex-wrap: wrap;
  padding: var(--space-md) 0;
}

/* Single Feeder Block */
.feeder-block {
  width: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Connection Line */
.conn-line {
  width: 4px;
  height: 30px;
  background: var(--border-accent);
}

.conn-line.on {
  background: var(--active);
  box-shadow: 0 0 8px var(--active-glow);
}

/* Circuit Breaker Symbol */
.cb-symbol {
  width: 40px;
  height: 40px;
  border: 3px solid var(--idle);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-panel);
  position: relative;
  cursor: pointer;
  transition: all 0.2s ease;
}

.cb-symbol.on {
  border-color: var(--active);
  background: rgba(var(--color-500-rgb), 0.15);
  box-shadow: 0 0 12px var(--active-glow);
}

.cb-symbol.off {
  border-color: var(--idle);
  background: rgba(0, 0, 0, 0.12);
}

.cb-symbol.alarm {
  border-color: var(--alarm);
  background: rgba(0, 0, 0, 0.12);
  box-shadow: 0 0 12px var(--alarm-glow);
  animation: alarm-pulse 1s infinite;
}

.cb-symbol::before {
  content: '';
  width: 20px;
  height: 4px;
  background: currentColor;
  position: absolute;
}

.cb-symbol.on::before {
  background: var(--active);
}

.cb-symbol.off::before {
  background: var(--idle);
  transform: rotate(45deg);
}

.cb-status {
  position: absolute;
  bottom: -18px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.5px;
}

.cb-status.on {
  color: var(--active);
}

.cb-status.off {
  color: var(--idle);
}

/* Feeder Info Card */
.feeder-info {
  background: linear-gradient(180deg, var(--bg-panel-2), var(--bg-panel));
  border: 1px solid var(--border-accent-soft);
  border-radius: var(--space-sm);
  padding: var(--space-sm);
  margin-top: var(--space-sm);
  width: 100%;
  text-align: center;
}

.feeder-info.on {
  border-color: var(--active);
  box-shadow: 0 0 8px var(--active-glow);
}

.feeder-info.alarm {
  border-color: var(--alarm);
  box-shadow: 0 0 8px var(--alarm-glow);
}

.feeder-info .feeder-key {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: 800;
  color: var(--ok);
  margin-bottom: 2px;
}

.feeder-info .feeder-name {
  font-size: 10px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: var(--space-xs);
}

.feeder-values {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  font-size: 10px;
}

.feeder-val {
  background: rgba(0, 0, 0, 0.3);
  padding: 2px 4px;
  border-radius: 2px;
}

.feeder-val .lbl {
  color: var(--text-dim);
}

.feeder-val .num {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--ok);
}

.feeder-info.off .feeder-val .num {
  color: var(--text-dim);
}

/* Transformer Symbol */
.transformer-symbol {
  width: 60px;
  height: 60px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.transformer-symbol::before,
.transformer-symbol::after {
  content: '';
  position: absolute;
  width: 30px;
  height: 30px;
  border: 3px solid var(--border-accent);
  border-radius: 50%;
  background: var(--bg-panel);
}

.transformer-symbol::before {
  top: 0;
}

.transformer-symbol::after {
  bottom: 0;
}

.transformer-symbol.on::before,
.transformer-symbol.on::after {
  border-color: var(--active);
  box-shadow: 0 0 10px var(--active-glow);
}

/* Remote/Local Indicator */
.rem-loc-badge {
  font-size: 9px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 3px;
  margin-top: 4px;
}

.rem-loc-badge.rem {
  background: rgba(var(--color-500-rgb), 0.2);
  color: var(--active);
}

.rem-loc-badge.loc {
  background: rgba(0, 0, 0, 0.12);
  color: var(--warn);
}

/* Section Label */
.section-label {
  font-size: var(--font-size-sm);
  font-weight: 800;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: var(--space-sm);
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid var(--border-accent-soft);
}

/* SLD Time Display */
.sld-time {
  display: flex;
  gap: var(--space-md);
}

/* ==========================================================================
   MINI DOT STATUS INDICATOR
   ========================================================================== */

.mini-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.mini-dot.alarm {
  background: var(--alarm);
}

.mini-dot.on {
  background: var(--success);
}

.mini-dot.off {
  background: var(--text-slate);
}

/* ==========================================================================
   LAYOUT (NAVBAR BRAND, NAV PILLS, BORDERS)
   ========================================================================== */

a.navbar-brand {
  white-space: normal;
  text-align: center;
  word-break: break-all;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  color: #fff;
  background-color: var(--color-500);
  border-color: var(--color-600);
}

.border-top {
  border-top: 1px solid var(--color-800);
}

.border-bottom {
  border-bottom: 1px solid var(--color-800);
}

.box-shadow {
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
}

button.accept-policy {
  font-size: 1rem;
  line-height: inherit;
}

/* ==========================================================================
   SETTINGS PAGE - THEME & DISPLAY CUSTOMIZATION
   ========================================================================== */

.settings-page {
  max-width: 1400px;
  margin: 0 auto;
}

.settings-card {
  background: var(--grad-panel);
  border: 1px solid var(--border-accent);
  border-radius: var(--space-sm);
  padding: var(--space-lg);
  box-shadow: var(--shadow-card);
  height: 100%;
}

.settings-card-title {
  font-size: var(--font-size-lg);
  font-weight: 800;
  color: var(--text-bright);
  margin-bottom: var(--space-sm);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.settings-card-title .icon {
  font-size: var(--font-size-xl);
}

.settings-description {
  font-size: var(--font-size-sm);
  color: var(--text-dim);
  margin-bottom: var(--space-lg);
}

/* Theme Presets Grid */
.theme-presets {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: var(--space-md);
}

.theme-preset-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: var(--bg-panel-2);
  border: 2px solid var(--border-slate);
  border-radius: var(--space-sm);
  cursor: pointer;
  transition: all 0.2s ease;
}

.theme-preset-btn:hover {
  border-color: var(--border-accent);
  background: var(--bg-panel-3);
  transform: translateY(-2px);
}

.theme-preset-btn.active {
  border-color: var(--accent-glow);
  box-shadow: 0 0 12px var(--accent-glow-soft);
}

.preset-swatch {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.preset-label {
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--text-main);
}

/* Color Calibration */
.color-calibration,
.font-calibration,
.font-family-selection {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.calibration-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--border-slate);
}

.calibration-row:last-child {
  border-bottom: none;
}

.calibration-row label {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-main);
  min-width: 140px;
}

.calibration-controls {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.color-picker {
  width: 48px;
  height: 36px;
  padding: 0;
  border: 2px solid var(--border-slate);
  border-radius: var(--space-xs);
  cursor: pointer;
  background: transparent;
}

.color-picker::-webkit-color-swatch-wrapper {
  padding: 2px;
}

.color-picker::-webkit-color-swatch {
  border-radius: 3px;
  border: none;
}

.hex-input {
  width: 80px;
  padding: var(--space-xs) var(--space-sm);
  background: var(--bg-panel-2);
  border: 1px solid var(--border-slate);
  border-radius: var(--space-xs);
  color: var(--text-main);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  text-transform: uppercase;
}

.hex-input:focus {
  outline: none;
  border-color: var(--accent-glow);
}

/* Font Slider Controls */
.slider-controls {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex: 1;
  max-width: 250px;
}

.slider-controls .form-range {
  flex: 1;
  accent-color: var(--color-500);
}

.slider-value {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--ok);
  min-width: 45px;
  text-align: right;
}

/* Font Family Select */
.font-family-selection .form-select {
  background: var(--bg-panel-2);
  border: 1px solid var(--border-slate);
  color: var(--text-main);
  padding: var(--space-sm);
  border-radius: var(--space-xs);
  font-size: var(--font-size-sm);
  max-width: 280px;
}

.font-family-selection .form-select:focus {
  border-color: var(--accent-glow);
  box-shadow: 0 0 0 2px var(--accent-glow-soft);
  outline: none;
}

/* Live Preview Container */
.live-preview-container {
  background: var(--bg-main);
  border: 1px solid var(--border-slate);
  border-radius: var(--space-sm);
  padding: var(--space-lg);
  overflow: hidden;
}

.preview-header {
  background: var(--grad-header);
  border: 1px solid var(--border-accent);
  border-radius: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  margin-bottom: var(--space-lg);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.preview-header .title {
  font-size: var(--font-size-xl);
  font-weight: 900;
  color: var(--text-bright);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.preview-stamp {
  font-size: var(--font-size-sm);
  color: var(--text-dim);
  font-family: var(--font-mono);
}

.preview-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.preview-card {
  background: var(--grad-panel);
  border: 1px solid var(--border-accent);
  border-radius: var(--space-sm);
  overflow: hidden;
}

.preview-card-header {
  padding: var(--space-sm) var(--space-md);
  font-weight: 800;
  font-size: var(--font-size-sm);
  color: var(--text-bright);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.preview-card-header.active-bar {
  background: linear-gradient(90deg, var(--color-900), var(--color-600));
}

.preview-card-header.alarm-bar {
  background: linear-gradient(90deg, var(--alarm-dark), var(--alarm));
}

.preview-card-header.idle-bar {
  background: linear-gradient(90deg, var(--bg-panel-3), var(--idle));
}

.preview-card-body {
  padding: var(--space-md);
  display: flex;
  gap: var(--space-lg);
}

.preview-kpi {
  text-align: center;
}

.preview-kpi .label {
  display: block;
  font-size: var(--font-size-xs);
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  margin-bottom: var(--space-xs);
}

.preview-kpi .value {
  font-family: var(--font-mono);
  font-size: var(--font-size-value);
  font-weight: 900;
  color: var(--active);
}

.preview-kpi.alarm .value {
  color: var(--alarm);
}

.preview-kpi.idle .value {
  color: var(--idle);
}

.preview-text-samples {
  border-top: 1px solid var(--border-slate);
  padding-top: var(--space-md);
}

.preview-text-main {
  color: var(--text-main);
  font-size: var(--font-size-md);
  margin-bottom: var(--space-sm);
}

.preview-text-dim {
  color: var(--text-dim);
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-sm);
}

.preview-text-bright {
  color: var(--text-bright);
  font-size: var(--font-size-lg);
  font-weight: 700;
  margin-bottom: 0;
}

/* Accent Button */
.btn-accent {
  background: var(--grad-accent-vert);
  border: 1px solid var(--border-accent);
  color: var(--text-bright);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--space-sm);
  font-weight: 700;
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-accent:hover {
  background: var(--grad-accent-vert-hover);
  box-shadow: 0 0 12px var(--accent-glow-soft);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .calibration-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm);
  }

  .slider-controls {
    max-width: 100%;
    width: 100%;
  }

  .font-family-selection .form-select {
    max-width: 100%;
    width: 100%;
  }
}

/* ====================================
   EXTENDED SETTINGS PAGE STYLES
   Tabs, Page Sections, New Controls
   ==================================== */

/* Settings Header */
.settings-header {
  text-align: center;
  margin-bottom: var(--space-xl);
  padding: var(--space-lg);
  background: var(--grad-panel);
  border: 1px solid var(--border-accent);
  border-radius: var(--space-sm);
}

.settings-header h1 {
  font-size: var(--font-size-xxl);
  font-weight: 900;
  color: var(--text-bright);
  margin: 0 0 var(--space-sm) 0;
}

.settings-subtitle {
  color: var(--text-dim);
  font-size: var(--font-size-md);
  margin: 0;
}

/* Tab Navigation */
.settings-tabs {
  display: flex;
  gap: var(--space-xs);
  margin-bottom: var(--space-lg);
  flex-wrap: wrap;
  background: var(--bg-panel);
  padding: var(--space-sm);
  border-radius: var(--space-sm);
  border: 1px solid var(--border-slate);
}

.settings-tab-btn {
  flex: 1;
  min-width: 120px;
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-panel-2);
  border: 1px solid var(--border-slate);
  border-radius: var(--space-xs);
  color: var(--text-dim);
  font-weight: 700;
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: all 0.2s ease;
}

.settings-tab-btn:hover {
  background: var(--bg-panel-3);
  color: var(--text-main);
  border-color: var(--border-accent-soft);
}

.settings-tab-btn.active {
  background: linear-gradient(135deg, var(--color-900), var(--color-700));
  border-color: var(--border-accent);
  color: var(--text-bright);
  box-shadow: 0 0 12px var(--accent-glow-soft);
}

/* Tab Content */
.settings-tab-content {
  display: none;
  background: var(--grad-panel);
  border: 1px solid var(--border-accent);
  border-radius: var(--space-sm);
  padding: var(--space-xl);
}

.settings-tab-content.active {
  display: block;
}

/* Section Titles */
.section-title {
  font-size: var(--font-size-xl);
  font-weight: 800;
  color: var(--text-bright);
  margin: 0 0 var(--space-sm) 0;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.section-desc {
  color: var(--text-dim);
  font-size: var(--font-size-sm);
  margin: 0 0 var(--space-lg) 0;
}

/* Theme Presets Grid (Extended) */
.theme-presets-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: var(--space-md);
}

.preset-name {
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--text-main);
}

/* Settings Grid */
.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-lg);
  margin-bottom: var(--space-lg);
}

.settings-grid.small-grid {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-md);
}

/* Setting Group */
.setting-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.setting-group.full-width {
  grid-column: 1 / -1;
}

.setting-group.checkbox-group {
  justify-content: center;
}

.setting-label {
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--text-main);
  display: flex;
  justify-content: space-between;
}

/* Color Input Row */
.color-input-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

/* Select Input */
.select-input {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-panel-2);
  border: 1px solid var(--border-slate);
  border-radius: var(--space-xs);
  color: var(--text-main);
  font-size: var(--font-size-sm);
  cursor: pointer;
}

.select-input:focus {
  outline: none;
  border-color: var(--border-accent);
  box-shadow: 0 0 0 2px var(--accent-glow-soft);
}

.select-input option {
  background: var(--bg-panel);
  color: var(--text-main);
}

/* Slider Input */
.slider-input {
  width: 100%;
  height: 6px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--bg-panel-3);
  border-radius: 3px;
  outline: none;
  cursor: pointer;
}

.slider-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  background: linear-gradient(135deg, var(--color-400), var(--color-600));
  border: 2px solid var(--color-300);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.slider-input::-moz-range-thumb {
  width: 18px;
  height: 18px;
  background: linear-gradient(135deg, var(--color-400), var(--color-600));
  border: 2px solid var(--color-300);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

/* Checkbox Label */
.checkbox-label {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  cursor: pointer;
  color: var(--text-main);
  font-size: var(--font-size-sm);
  font-weight: 600;
}

.checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--color-500);
  cursor: pointer;
}

/* Page Section */
.page-section {
  background: var(--bg-panel-2);
  border: 1px solid var(--border-slate);
  border-radius: var(--space-sm);
  padding: var(--space-lg);
  margin-bottom: var(--space-lg);
}

.page-section-title {
  font-size: var(--font-size-lg);
  font-weight: 800;
  color: var(--color-400);
  margin: 0 0 var(--space-md) 0;
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--border-slate);
}

/* Preview Section */
.preview-section {
  background: var(--grad-panel);
  border: 1px solid var(--border-accent);
  border-radius: var(--space-sm);
  padding: var(--space-xl);
  margin-top: var(--space-xl);
}

.preview-section .preview-cards {
  margin-bottom: 0;
}

.preview-section .preview-card {
  background: var(--bg-panel-2);
}

.preview-section .preview-card-header {
  background: linear-gradient(90deg, var(--color-900), var(--color-700));
  padding: var(--space-sm) var(--space-md);
}

.preview-section .preview-card.alarm-card .preview-card-header {
  background: linear-gradient(90deg, #78350f, var(--alarm));
}

.preview-section .preview-card-body {
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-md);
}

.preview-stat {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--font-size-sm);
}

.preview-stat .label {
  color: var(--text-dim);
  font-weight: 600;
}

.preview-stat .value {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--text-main);
}

.preview-stat .value.ok {
  color: var(--ok);
}

.preview-stat .value.active {
  color: var(--active);
}

.preview-stat .value.alarm {
  color: var(--alarm);
}

.preview-stat .value.warn {
  color: var(--warn);
}

/* Settings Actions */
.settings-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-top: var(--space-xl);
  padding: var(--space-lg);
  background: var(--bg-panel);
  border: 1px solid var(--border-slate);
  border-radius: var(--space-sm);
}

.btn-reset {
  padding: var(--space-sm) var(--space-lg);
  background: var(--bg-panel-3);
  border: 1px solid var(--border-slate);
  border-radius: var(--space-xs);
  color: var(--text-dim);
  font-weight: 700;
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-reset:hover {
  background: var(--bg-panel-2);
  color: var(--text-main);
  border-color: var(--border-accent-soft);
}

.btn-secondary {
  padding: var(--space-sm) var(--space-lg);
  background: linear-gradient(135deg, var(--color-800), var(--color-900));
  border: 1px solid var(--border-accent-soft);
  border-radius: var(--space-xs);
  color: var(--text-main);
  font-weight: 700;
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-secondary:hover {
  background: linear-gradient(135deg, var(--color-700), var(--color-800));
  border-color: var(--border-accent);
  box-shadow: 0 0 8px var(--accent-glow-soft);
}

.btn-danger {
  padding: var(--space-sm) var(--space-lg);
  background: linear-gradient(135deg, #7f1d1d, #991b1b);
  border: 1px solid #b91c1c;
  border-radius: var(--space-xs);
  color: #fecaca;
  font-weight: 700;
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-danger:hover {
  background: linear-gradient(135deg, #991b1b, #b91c1c);
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.4);
}

/* Compact mode global adjustments */
html.compact-mode {
  --space-xs: 2px;
  --space-sm: 4px;
  --space-md: 8px;
  --space-lg: 12px;
  --space-xl: 16px;
}

/* Settings responsive */
@media (max-width: 768px) {
  .settings-tabs {
    flex-direction: column;
  }

  .settings-tab-btn {
    min-width: 100%;
  }

  .settings-grid {
    grid-template-columns: 1fr;
  }

  .settings-grid.small-grid {
    grid-template-columns: 1fr;
  }

  .settings-actions {
    flex-direction: column;
  }

  .theme-presets-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ====================================
   TOOLTIPS SYSTEM
   Custom tooltips for settings help
   ==================================== */

/* Tooltip container */
[data-tooltip] {
  position: relative;
}

[data-tooltip]::before,
[data-tooltip]::after {
  position: absolute;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
}

/* Tooltip text box */
[data-tooltip]::after {
  content: attr(data-tooltip);
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-panel-3);
  border: 1px solid var(--border-accent);
  border-radius: var(--space-xs);
  color: var(--text-bright);
  font-size: var(--font-size-xs);
  font-weight: 500;
  line-height: 1.4;
  white-space: normal;
  max-width: 280px;
  min-width: 180px;
  text-align: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5), 0 0 8px var(--accent-glow-soft);
}

/* Tooltip arrow */
[data-tooltip]::before {
  content: '';
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--border-accent);
}

/* Show on hover */
[data-tooltip]:hover::before,
[data-tooltip]:hover::after {
  opacity: 1;
  visibility: visible;
}

[data-tooltip]:hover::after {
  transform: translateX(-50%) translateY(0);
}

/* Tooltip positioning for buttons in grid */
.theme-preset-btn[data-tooltip]::after {
  bottom: auto;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
}

.theme-preset-btn[data-tooltip]::before {
  bottom: auto;
  top: calc(100% + 2px);
  border-top-color: transparent;
  border-bottom-color: var(--border-accent);
}

.theme-preset-btn[data-tooltip]:hover::after {
  transform: translateX(-50%) translateY(0);
}

/* Tooltip icon */
.tooltip-icon {
  font-size: 0.85em;
  opacity: 0.6;
  cursor: help;
  margin-left: var(--space-xs);
}

.setting-group:hover .tooltip-icon {
  opacity: 1;
}

/* ====================================
   ENHANCED PREVIEW SECTION
   Dynamic preview with live updates
   ==================================== */

.preview-section {
  background: var(--grad-panel);
  border: 1px solid var(--border-accent);
  border-radius: var(--space-sm);
  padding: var(--space-xl);
  margin-top: var(--space-xl);
}

.preview-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--card-min-width, 220px), 1fr));
  gap: var(--grid-gap, 12px);
  margin-bottom: var(--space-lg);
}

.preview-card {
  background: var(--bg-panel-2);
  border: 1px solid var(--border-accent);
  border-radius: var(--space-sm);
  overflow: hidden;
  box-shadow: var(--shadow-base, 0 4px 16px rgba(0,0,0,0.6));
  transition: all 0.3s ease;
}

.preview-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-base), 0 0 12px var(--accent-glow-soft);
}

.preview-card-header {
  background: linear-gradient(90deg, var(--color-900), var(--color-700));
  padding: var(--space-sm) var(--space-md);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 800;
  font-size: var(--font-size-sm);
  color: var(--text-bright);
}

.preview-card.alarm-card .preview-card-header,
.preview-card-header.alarm-header {
  background: linear-gradient(90deg, #78350f, var(--alarm));
}

.preview-status {
  font-size: var(--font-size-xs);
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 3px;
  background: rgba(0,0,0,0.3);
}

.preview-status.active {
  color: var(--active);
}

.preview-status.ok {
  color: var(--ok);
}

.preview-status.alarm {
  color: var(--alarm);
}

.preview-card-body {
  padding: var(--panel-padding, 16px);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.preview-stat {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--font-size-sm);
  padding: var(--space-xs) 0;
  border-bottom: 1px solid var(--border-slate);
}

.preview-stat:last-child {
  border-bottom: none;
}

.preview-stat .label {
  color: var(--text-dim);
  font-weight: 600;
  text-transform: uppercase;
  font-size: var(--font-size-xs);
}

.preview-stat .value {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--font-size-value, 18px);
  color: var(--text-main);
}

/* Preview text samples */
.preview-text-samples {
  border-top: 1px solid var(--border-slate);
  padding-top: var(--space-lg);
  margin-top: var(--space-md);
}

.preview-text-heading {
  font-size: var(--font-size-xxl);
  font-weight: 900;
  color: var(--text-bright);
  margin: 0 0 var(--space-sm) 0;
}

.preview-text-main {
  font-size: var(--font-size-md);
  color: var(--text-main);
  margin: 0 0 var(--space-xs) 0;
}

.preview-text-dim {
  font-size: var(--font-size-sm);
  color: var(--text-dim);
  margin: 0 0 var(--space-xs) 0;
}

.preview-text-mono {
  font-family: var(--font-mono);
  font-size: var(--font-size-value);
  font-weight: 700;
  color: var(--ok);
  margin: 0;
}

/* ====================================
   APPLY SETTINGS BUTTON & NOTIFICATION
   ==================================== */

.btn-apply {
  padding: var(--space-sm) var(--space-xl);
  background: linear-gradient(135deg, var(--color-500), var(--color-700));
  border: 2px solid var(--color-400);
  border-radius: var(--space-sm);
  color: var(--text-bright);
  font-weight: 800;
  font-size: var(--font-size-md);
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px var(--accent-glow-soft);
}

.btn-apply:hover {
  background: linear-gradient(135deg, var(--color-400), var(--color-600));
  border-color: var(--color-300);
  box-shadow: 0 6px 20px var(--accent-glow-soft), 0 0 15px var(--accent-glow-soft);
  transform: translateY(-2px);
}

.btn-apply:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px var(--accent-glow-soft);
}

/* Settings notification toast */
.settings-notification {
  position: fixed;
  bottom: 30px;
  right: 30px;
  padding: var(--space-md) var(--space-xl);
  background: linear-gradient(135deg, var(--color-700), var(--color-900));
  border: 2px solid var(--color-500);
  border-radius: var(--space-sm);
  color: var(--text-bright);
  font-weight: 700;
  font-size: var(--font-size-md);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 20px var(--accent-glow-soft);
  z-index: 10000;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.3s ease;
}

.settings-notification.show {
  opacity: 1;
  transform: translateY(0);
}

.settings-notification span {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

/* ============================================
   VISIBILITY SETTINGS PAGE
   ============================================ */
.visibility-page {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
}

.visibility-header {
    margin-bottom: 30px;
}

.visibility-header h1 {
    color: var(--text-bright, #fff);
    font-size: 1.8rem;
    margin-bottom: 8px;
}

.visibility-subtitle {
    color: var(--text-dim, #a3b8a3);
    font-size: 0.95rem;
}

.visibility-actions {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.visibility-btn {
    padding: 10px 20px;
    border: 1px solid var(--border-accent, #22c55e);
    background: var(--bg-panel, #0e120e);
    color: var(--text-main, #f0f8f0);
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s;
}

.visibility-btn:hover {
    background: var(--color-900, #14532d);
}

.visibility-btn.primary {
    background: var(--color-600, #16a34a);
    border-color: var(--color-500, #22c55e);
}

.visibility-btn.primary:hover {
    background: var(--color-500, #22c55e);
    color: var(--bg-main, #080a08);
}

.visibility-btn.danger {
    border-color: var(--warn, #ef4444);
    color: var(--warn, #ef4444);
}

.visibility-btn.danger:hover {
    background: var(--warn, #ef4444);
    color: #fff;
}

.visibility-search {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.visibility-search-input {
    flex: 1;
    min-width: 200px;
    padding: 10px 16px;
    background: var(--bg-panel, #0e120e);
    border: 1px solid var(--border-slate, #242d24);
    border-radius: 6px;
    color: var(--text-main, #f0f8f0);
    font-size: 0.95rem;
}

.visibility-search-input:focus {
    outline: none;
    border-color: var(--border-accent, #22c55e);
}

.visibility-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 16px;
}

.substation-card {
    background: var(--bg-panel, #0e120e);
    border: 1px solid var(--border-slate, #242d24);
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.2s;
}

.substation-card.hidden {
    opacity: 0.5;
    border-color: var(--warn, #ef4444);
}

.substation-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: var(--bg-panel-2, #141a14);
    border-bottom: 1px solid var(--border-slate, #242d24);
}

.substation-name {
    font-weight: 600;
    color: var(--text-bright, #fff);
    font-size: 1rem;
}

.substation-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
}

.toggle-label {
    font-size: 0.8rem;
    color: var(--text-dim, #a3b8a3);
}

.toggle-switch {
    position: relative;
    width: 44px;
    height: 24px;
    background: var(--warn, #ef4444);
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.3s;
}

.toggle-switch.active {
    background: var(--color-500, #22c55e);
}

.toggle-switch::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.3s;
}

.toggle-switch.active::after {
    transform: translateX(20px);
}

.feeders-container {
    padding: 12px 16px;
    max-height: 300px;
    overflow-y: auto;
}

.feeders-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-slate, #242d24);
}

.feeders-title {
    font-size: 0.85rem;
    color: var(--text-dim, #a3b8a3);
}

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

.feeders-btn {
    padding: 4px 8px;
    font-size: 0.75rem;
    background: transparent;
    border: 1px solid var(--border-slate-light, #333d33);
    color: var(--text-dim, #a3b8a3);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.feeders-btn:hover {
    border-color: var(--border-accent, #22c55e);
    color: var(--text-main, #f0f8f0);
}

.feeders-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.feeder-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    background: var(--bg-panel-3, #1c241c);
    border-radius: 4px;
    transition: all 0.2s;
}

.feeder-item.hidden {
    opacity: 0.5;
    background: rgba(239, 68, 68, 0.1);
}

.feeder-name {
    font-size: 0.85rem;
    color: var(--text-main, #f0f8f0);
    font-family: var(--font-mono, 'Consolas', monospace);
}

.feeder-toggle {
    width: 32px;
    height: 18px;
    background: var(--warn, #ef4444);
    border-radius: 9px;
    cursor: pointer;
    transition: background 0.3s;
    position: relative;
}

.feeder-toggle.active {
    background: var(--color-500, #22c55e);
}

.feeder-toggle::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.3s;
}

.feeder-toggle.active::after {
    transform: translateX(14px);
}

.no-feeders {
    color: var(--text-muted, #475d47);
    font-size: 0.85rem;
    font-style: italic;
    padding: 10px 0;
}

.visibility-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px;
    color: var(--text-dim, #a3b8a3);
}

.visibility-loading::before {
    content: '';
    width: 32px;
    height: 32px;
    border: 3px solid var(--border-slate, #242d24);
    border-top-color: var(--color-500, #22c55e);
    border-radius: 50%;
    animation: visibility-spin 1s linear infinite;
    margin-right: 12px;
}

@keyframes visibility-spin {
    to { transform: rotate(360deg); }
}

.visibility-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-dim, #a3b8a3);
}

.visibility-empty h3 {
    color: var(--text-main, #f0f8f0);
    margin-bottom: 10px;
}

/* Visibility scrollbar styling */
.feeders-container::-webkit-scrollbar {
    width: 6px;
}

.feeders-container::-webkit-scrollbar-track {
    background: var(--bg-panel, #0e120e);
}

.feeders-container::-webkit-scrollbar-thumb {
    background: var(--border-slate-light, #333d33);
    border-radius: 3px;
}

.feeders-container::-webkit-scrollbar-thumb:hover {
    background: var(--border-accent, #22c55e);
}

/* Visibility toast notification */
.visibility-toast {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 14px 24px;
    background: var(--color-600, #16a34a);
    color: #fff;
    border-radius: 8px;
    font-size: 0.95rem;
    z-index: 9999;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.visibility-toast.show {
    opacity: 1;
    transform: translateY(0);
}

.visibility-toast.error {
    background: var(--warn, #ef4444);
}

/* Visibility stats bar */
.visibility-stats {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    padding: 12px 16px;
    background: var(--bg-panel-2, #141a14);
    border-radius: 8px;
    flex-wrap: wrap;
}

.visibility-stat {
    display: flex;
    align-items: center;
    gap: 8px;
}

.visibility-stat-label {
    color: var(--text-dim, #a3b8a3);
    font-size: 0.85rem;
}

.visibility-stat-value {
    color: var(--color-400, #4ade80);
    font-weight: 600;
    font-size: 1rem;
}

.visibility-stat-value.hidden-count {
    color: var(--warn, #ef4444);
}