/* =========================================================
   HQNMS — Token system v1
   - Legacy names kept (--bg, --sidebar, --accent, --card-bg, etc.)
   - shadcn-semantic aliases added (--background, --foreground, etc.)
   - 8-LOB accent scale + status + alert + subnet + device-type scales
   - Brand quad locked: #2B6A9E #669C41 #F26A27 #CE3436
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* ---------- HQ brand quad (locked, never mutate) ---------- */
  --hq-blue:   #2B6A9E;
  --hq-green:  #669C41;
  --hq-orange: #F26A27;
  --hq-red:    #CE3436;
  --hq-blue-bright: #3d8bc9;   /* dark-mode hover lift on blue */
  --hq-blue-deep:   #1f4e76;   /* card-edge accent, focus rings on light */

  /* ---------- Brand gradient (load-bearing — under #topnav, on #htmx-progress) ---------- */
  --brand-gradient: linear-gradient(
    90deg,
    var(--hq-blue) 0%,
    var(--hq-green) 35%,
    var(--hq-orange) 70%,
    var(--hq-red) 100%
  );
  --brand-gradient-progress: linear-gradient(90deg, var(--hq-blue), var(--hq-green));

  /* ---------- Semantic foundation: dark mode is canonical ---------- */
  /* shadcn-style names */
  --background:        #141a2b;   /* page bg — cooler, deeper than old #1a1a2e */
  --foreground:        #e6edf5;   /* body text */
  --foreground-muted:  #8a99ad;   /* secondary text, meta, dimmed */
  --foreground-subtle: #5b6a80;   /* tertiary, disabled labels */

  --card:               #1b2238;
  --card-foreground:    var(--foreground);
  --card-elevated:      #232c46;   /* hover, active */

  --popover:            #1b2238;
  --popover-foreground: var(--foreground);

  --muted:              #1f2740;
  --muted-foreground:   var(--foreground-muted);

  --primary:            var(--hq-blue);
  --primary-foreground: #ffffff;
  --primary-hover:      var(--hq-blue-bright);

  --secondary:          #2a3553;
  --secondary-foreground: var(--foreground);

  --destructive:           var(--hq-red);
  --destructive-foreground:#ffffff;

  --success:            var(--hq-green);
  --success-foreground: #ffffff;

  --warning:            var(--hq-orange);
  --warning-foreground: #ffffff;

  --info:               var(--hq-blue);
  --info-foreground:    #ffffff;

  --border:             #283556;
  --border-strong:      #36456b;
  --input:              #0f1628;       /* input bg */
  --input-border:       var(--border);
  --ring:               var(--hq-blue-bright);  /* focus ring */

  /* PWA chrome (replaces hardcoded #0d1b2e/#0a1628 in layout.html + manifest.json) */
  --pwa-theme-color:      #0f1628;
  --pwa-background-color: #0a1020;

  /* ---------- Legacy aliases (do NOT remove — referenced across templates) ---------- */
  --bg:           var(--background);
  --sidebar:      #161e33;            /* slightly darker than --card for chrome separation */
  --card-bg:      var(--card);
  --input-bg:     var(--input);
  --hover:        var(--card-elevated);
  --text:         var(--foreground);
  --text-dim:     var(--foreground-muted);
  --accent:       var(--primary);
  --accent-bright:var(--primary-hover);
  --link:         #5dade2;
  --logo-url:     url('/images/hq-logo-light.svg');

  /* ---------- 8 LOB accents (service-stack) ---------- */
  /* Hue map: HQWiFi=green, Security=slate, VoIP=blue, Internet=red,
     Cloud=amber, Digital=violet, Support=orange, AI=teal */
  --lob-hqwifi:   #47c47d;
  --lob-security: #6a7a8c;
  --lob-voip:     #3b70f5;
  --lob-internet: #e54a32;
  --lob-cloud:    #e09c24;
  --lob-digital:  #9163bf;
  --lob-support:  #d67022;
  --lob-ai:       #2dd4bf;

  /* tinted bg companions (12% on dark) for badge/row backgrounds */
  --lob-hqwifi-tint:   rgba(71,196,125,.12);
  --lob-security-tint: rgba(106,122,140,.14);
  --lob-voip-tint:     rgba(59,112,245,.14);
  --lob-internet-tint: rgba(229,74,50,.14);
  --lob-cloud-tint:    rgba(224,156,36,.14);
  --lob-digital-tint:  rgba(145,99,191,.14);
  --lob-support-tint:  rgba(214,112,34,.14);
  --lob-ai-tint:       rgba(45,212,191,.14);

  /* ---------- Status scale (device online/offline/etc) ---------- */
  --status-online:    var(--success);
  --status-offline:   var(--destructive);
  --status-degraded:  var(--warning);
  --status-unknown:   var(--foreground-subtle);

  --status-online-tint:   rgba(102,156,65,.14);
  --status-offline-tint:  rgba(206,52,54,.14);
  --status-degraded-tint: rgba(242,106,39,.14);
  --status-unknown-tint:  rgba(91,106,128,.18);

  /* ---------- Alert severity ---------- */
  --alert-critical: var(--destructive);
  --alert-warning:  var(--warning);
  --alert-info:     var(--info);
  --alert-degraded: #b07028;

  /* ---------- Subnet types (replaces theme.css:268-275) ---------- */
  /* Stroke colours — saturated, used as cloud-pill outline + label */
  --subnet-management: #6a7a8c;
  --subnet-hotspot:    #47c47d;
  --subnet-guest:      #47c47d;   /* alias of hotspot — IPAM emits 'guest' */
  --subnet-vpn:        #9163bf;
  --subnet-lan:        #3b70f5;
  --subnet-smarttv:    #e09c24;
  --subnet-iot:        #e09c24;   /* alias of smarttv — IPAM emits 'iot' */
  --subnet-camera:     #b073d4;
  --subnet-voip:       #3b70f5;
  --subnet-wan:        #e54a32;
  --subnet-other:      #c2b4ac;

  /* Pill fills — opaque pastels so text on top reads in dark + light mode.
     Roughly 30% saturated hue + 70% near-white. Dark text (#1f1f1f) on
     these has 8:1+ contrast on dark mode, ~10:1 on light mode. */
  --subnet-management-tint: #d8dde2;
  --subnet-hotspot-tint:    #cef0d9;
  --subnet-guest-tint:      #cef0d9;
  --subnet-vpn-tint:        #e1d4ee;
  --subnet-lan-tint:        #cdddf9;
  --subnet-smarttv-tint:    #f7e2b6;
  --subnet-iot-tint:        #f7e2b6;
  --subnet-camera-tint:     #e7d3f1;
  --subnet-voip-tint:       #cdddf9;
  --subnet-wan-tint:        #f9cec6;
  --subnet-other-tint:      #ece5e0;

  /* ---------- Device types (12 hues for canvas + dashboard doughnut) ---------- */
  --dev-ap:       #5dade2;
  --dev-switch:   #47c47d;
  --dev-router:   #e54a32;
  --dev-backhaul: #e09c24;
  --dev-camera:   #9163bf;
  --dev-infra:    #6a7a8c;
  --dev-nvr:      #b073d4;
  --dev-voip:     #3b70f5;
  --dev-server:   #2dd4bf;
  --dev-vm:       #4ed4c4;
  --dev-nas:      #c2b4ac;
  --dev-other:    #8a99ad;

  /* ---------- User roles (6 tiers) ---------- */
  --role-customer:   #c2b4ac;
  --role-viewer:     #8a99ad;
  --role-installer:  #d67022;
  --role-technician: #e09c24;
  --role-engineer:   #3b70f5;
  --role-admin:      #CE3436;

  /* ---------- Spacing & type (preserved) ---------- */
  --space-xs: 4px;  --space-sm: 8px;  --space-md: 12px;
  --space-lg: 16px; --space-xl: 24px; --space-2xl: 40px;

  --text-xs:   10px;
  --text-sm:   11px;
  --text-base: 13px;
  --text-lg:   16px;
  --text-xl:   20px;
  --text-2xl:  28px;

  /* Radii — sharp edge direction (per Round 1 review).
     Set everything to 0 by default; opt back in to subtle rounding only on
     pill-shaped affordances (badges, toggles) via --radius-pill. */
  --radius-sm:   0;
  --radius:      0;        /* default — cards, buttons, inputs, tables, modals */
  --radius-md:   0;
  --radius-lg:   0;
  --radius-pill: 100px;    /* badges only — readability of all-caps micro text */

  --shadow-card:  0 4px 12px rgba(0,0,0,.32);
  --shadow-card-hover: 0 8px 24px rgba(0,0,0,.42);
  --shadow-modal: 0 24px 60px rgba(0,0,0,.55);

  /* ---------- Site-card edge accent ----------
     The active/selected site card gets a 3px left edge in the LOB colour
     of the site's dominant service (e.g. a wifi-led site = --lob-hqwifi).
     Templates set this per-row by writing the variable inline:
       <article class="site-tile" style="--site-lob: var(--lob-hqwifi)">
     and CSS reads it via `border-left-color: var(--site-lob, var(--primary))`.
     If --site-lob isn't set, falls back to --primary so existing markup
     keeps working. */
  --site-lob: var(--primary);

  /* Type stack — Poppins display, Verdana body (per HQ brand brief).
     Self-host Poppins from /fonts/Poppins/ (no CDN — intranet sites). */
  --font-display: 'Poppins', system-ui, sans-serif;
  --font-body:    Verdana, Geneva, Tahoma, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}

/* =========================================================
   Light mode — derived, less contrasty than v0
   ========================================================= */
:root[data-theme="light"] {
  --background:        #f4f6fa;
  --foreground:        #1a2233;
  --foreground-muted:  #5b6a80;
  --foreground-subtle: #8a99ad;

  --card:               #ffffff;
  --card-foreground:    var(--foreground);
  --card-elevated:      #f0f3f8;

  --popover:            #ffffff;
  --popover-foreground: var(--foreground);

  --muted:              #eef1f6;
  --muted-foreground:   var(--foreground-muted);

  --primary:            var(--hq-blue);
  --primary-foreground: #ffffff;
  --primary-hover:      var(--hq-blue-deep);

  --secondary:          #e7ebf2;
  --secondary-foreground: var(--foreground);

  --border:             #d6dde7;
  --border-strong:      #b9c3d1;
  --input:              #ffffff;
  --input-border:       #c8d1de;
  --ring:               var(--hq-blue);

  /* legacy aliases (the names current templates use) */
  --sidebar:      #ffffff;
  --link:         var(--hq-blue);
  --logo-url:     url('/images/hq-logo-dark.svg');

  /* LOB tints — lighter on light mode */
  --lob-hqwifi-tint:   rgba(71,196,125,.10);
  --lob-security-tint: rgba(106,122,140,.10);
  --lob-voip-tint:     rgba(59,112,245,.08);
  --lob-internet-tint: rgba(229,74,50,.08);
  --lob-cloud-tint:    rgba(224,156,36,.10);
  --lob-digital-tint:  rgba(145,99,191,.10);
  --lob-support-tint:  rgba(214,112,34,.10);
  --lob-ai-tint:       rgba(45,212,191,.10);

  --status-online-tint:   rgba(102,156,65,.10);
  --status-offline-tint:  rgba(206,52,54,.08);
  --status-degraded-tint: rgba(242,106,39,.10);
  --status-unknown-tint:  rgba(138,153,173,.14);

  --shadow-card:  0 1px 3px rgba(15,30,60,.08), 0 4px 12px rgba(15,30,60,.06);
  --shadow-card-hover: 0 2px 6px rgba(15,30,60,.10), 0 12px 28px rgba(15,30,60,.10);
  --shadow-modal: 0 24px 60px rgba(15,30,60,.20);
}

html, body { height: 100%; overflow: hidden; font-family: var(--font-body); background: var(--bg); color: var(--text); font-size: 13px; }
button { cursor: pointer; border: 1px solid var(--border); background: var(--input-bg); color: var(--text); padding: 5px 10px; border-radius: var(--radius); font-size: 12px; transition: all 0.15s ease; }
button:hover { background: var(--hover); }
button.active { background: var(--accent); border-color: var(--accent); color: #fff; }
input, select, textarea { background: var(--input-bg); border: 1px solid var(--border); color: var(--text); padding: 4px 8px; border-radius: var(--radius); font-size: 12px; outline: none; transition: border-color 0.15s ease; }
input:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(43,106,158,0.2); }
*:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
h3 { font-size: 13px; font-weight: 600; margin-bottom: 6px; }

/* Layout */
#app { display: flex; flex-direction: column; height: 100vh; }
#topnav { height: 40px; background: var(--sidebar); border-bottom: 1px solid var(--border); display: flex; align-items: center; padding: 0 16px; gap: 24px; flex-shrink: 0; position: relative; z-index: 930; }
.nav-brand { font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--accent); letter-spacing: 1px; }
.nav-links { display: flex; gap: 4px; }
.nav-link { color: var(--text-dim); text-decoration: none; padding: 6px 12px; border-radius: var(--radius); font-size: 12px; }
.nav-link:hover { background: var(--hover); color: var(--text); }
.nav-link.active { background: var(--accent); color: #fff; }
.nav-search { position: relative; margin-left: auto; }
.nav-search input { background: var(--input-bg); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius); padding: 4px 10px; font-size: 11px; width: 200px; }
.nav-search input:focus { border-color: var(--accent); outline: none; width: 280px; transition: width 0.2s; }
.search-results { position: absolute; top: 100%; left: 0; right: 0; background: var(--sidebar); border: 1px solid var(--border); border-radius: var(--radius); max-height: 400px; overflow-y: auto; z-index: 1000; box-shadow: 0 8px 24px rgba(0,0,0,0.4); }
.search-result-group { padding: 4px 10px; font-size: 9px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; border-top: 1px solid var(--border); }
.search-result-item { padding: 6px 10px; font-size: 12px; cursor: pointer; display: flex; align-items: center; gap: 8px; }
.search-result-item:hover { background: var(--hover); }
.search-result-item .result-type { font-size: 9px; color: var(--text-dim); background: var(--input-bg); padding: 1px 5px; border-radius: var(--radius); }
.result-map-btn { font-size: 9px; color: var(--link); background: var(--input-bg); padding: 2px 6px; border-radius: var(--radius); cursor: pointer; white-space: nowrap; }
.result-map-btn:hover { background: var(--hover); color: var(--accent); }
.rack-port-pill { padding: 2px 5px; border-radius: var(--radius-pill); cursor: pointer; display: inline-flex; align-items: center; gap: 2px; min-width: 28px; justify-content: center; }
.rack-port-pill:hover { filter: brightness(1.3); }
.nav-status { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--text-dim); }
.alert-badge { display: inline-block; background: var(--danger); color: #fff; font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: var(--radius-pill); margin-left: 4px; min-width: 16px; text-align: center; }
.alert-badge:empty { display: none; }
.nav-sep { color: var(--border); }
.status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.status-dot.online { background: var(--success); }
.status-dot.offline { background: var(--danger); }

#main { flex: 1; display: flex; overflow: hidden; }

/* Sidebar */
#sidebar { width: 260px; min-width: 260px; background: var(--sidebar); border-right: 1px solid var(--border); overflow-y: auto; position: relative; z-index: 930; }
.sidebar-section { padding: 10px 12px; border-bottom: 1px solid var(--border); }
/* Collapsible sidebar sections — h3 acts as the toggle when the section
   carries data-collapsible="true". Hide everything except the h3 in the
   collapsed state. The chevron is injected by JS. */
.sidebar-section[data-collapsible="true"] > h3 { cursor: pointer; user-select: none; display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.sidebar-section[data-collapsible="true"] > h3::after { content: "\25BC"; font-size: 9px; color: var(--text-dim); transition: transform 0.15s; }
.sidebar-section[data-collapsible="true"][data-collapsed="true"] > h3::after { transform: rotate(-90deg); }
.sidebar-section[data-collapsible="true"][data-collapsed="true"] > *:not(h3) { display: none !important; }

/* Layer tree accordion */
.layer-tree { font-size: 11px; }
.layer-tree > label { display: block; padding: 2px 0; cursor: pointer; }
.layer-group { margin: 2px 0; }
.layer-parent { display: flex; align-items: center; gap: 2px; }
.layer-parent label { cursor: pointer; }
.layer-arrow { display: inline-block; width: 14px; font-size: 8px; cursor: pointer; color: var(--text-dim); transition: transform 0.15s; user-select: none; text-align: center; }
.layer-group.open > .layer-parent > .layer-arrow { transform: rotate(90deg); }
.layer-children { display: none; padding-left: 20px; }
.layer-group.open > .layer-children { display: block; }
.layer-children label { display: block; padding: 1px 0; cursor: pointer; }

/* Inline editable fields */
.inline-edit { padding: 2px 6px; border-radius: var(--radius); border: 1px dashed transparent; cursor: text; min-height: 1.4em; }
.inline-edit:hover { border-color: var(--text-dim); background: var(--hover); }
.inline-edit:focus { border-color: var(--link); border-style: solid; outline: none; background: var(--input-bg); color: var(--text); }
.inline-edit:empty::before { content: attr(data-placeholder); color: var(--text-dim); opacity: 0.5; font-style: italic; }

/* Breadcrumbs */
.breadcrumbs { font-size: 11px; margin-bottom: 8px; color: var(--text-dim); }
.breadcrumbs a { color: var(--link); text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; }
.bc-sep { margin: 0 4px; color: var(--text-dim); }

/* Topology panel */
#topology-panel { width: 320px; min-width: 280px; background: var(--sidebar); border-left: 1px solid var(--border); display: flex; flex-direction: column; overflow: hidden; }
/* LOS Profile panel */
.los-header { display: flex; align-items: center; gap: 12px; padding: 4px 12px; border-bottom: 1px solid var(--border); min-height: 32px; }
.los-header h3 { margin: 0; font-size: 13px; white-space: nowrap; }
.los-header select, .los-header input[type=number] { font-size: 11px; padding: 2px 4px; background: var(--input-bg); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); }
.los-header input[type=number]::-webkit-inner-spin-button { opacity: 0.5; }
.los-height-group { display: inline-flex; align-items: center; gap: 3px; }
.los-height-group input.los-dirty { border-color: var(--warning); background: rgba(245,166,35,0.1); }

.topo-header { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-bottom: 1px solid var(--border); }
.topo-header h3 { font-size: 13px; margin: 0; }
.topo-controls { display: flex; align-items: center; gap: 4px; padding: 6px 12px; border-bottom: 1px solid var(--border); }
.topo-node { padding: 3px 0 3px 0; cursor: pointer; font-size: 11px; white-space: nowrap; }
.topo-node:hover { background: var(--hover); }
.topo-node.selected { background: rgba(43,106,158,0.18); }
.topo-node .topo-icon { display: inline-block; width: 14px; text-align: center; margin-right: 2px; }
.topo-node .topo-status { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; vertical-align: middle; }
.topo-node .topo-clients { color: var(--text-dim); font-size: 9px; margin-left: 4px; }
.topo-children { padding-left: 16px; border-left: 1px solid var(--border); margin-left: 6px; }
.topo-toggle { cursor: pointer; display: inline-block; width: 12px; font-size: 8px; color: var(--text-dim); user-select: none; }
.topo-orphan { opacity: 0.6; }
.btn-row { display: flex; gap: 4px; }
.btn-row button { flex: 1; }

/* Canvas */
#canvas-area { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
#canvas-wrap { flex: 1; overflow: auto; position: relative; cursor: crosshair; background: var(--bg); }
canvas { display: block; }
#statusbar { height: 28px; background: var(--sidebar); border-top: 1px solid var(--border); display: flex; align-items: center; padding: 0 12px; font-size: 11px; color: var(--text-dim); gap: 16px; }
.zoom-btn { background: var(--input-bg); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius); width: 22px; height: 20px; font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; line-height: 1; }
.zoom-btn:hover { border-color: var(--accent); }
/* Props modal tabs */
.props-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border); margin-bottom: 10px; }
.props-tab { background: none; border: none; color: var(--text-dim); font-size: 12px; padding: 6px 12px; cursor: pointer; border-bottom: 2px solid transparent; }
.props-tab:hover { color: var(--text); }
.props-tab.active { color: var(--text); border-bottom-color: var(--accent); }

.tool-group-label { font-size: 9px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; padding: 4px 0 2px 0; cursor: pointer; user-select: none; }
.tool-group-label:hover { color: var(--text); }
kbd { background: var(--input-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 1px 5px; font-size: 11px; font-family: var(--font-mono); color: var(--text); display: inline-block; min-width: 20px; text-align: center; }
#status-msg { flex: 1; color: var(--warning); }
.sep { color: var(--border); }

/* Tables (for HTMX device list views) */
table { width: 100%; border-collapse: collapse; font-size: 12px; }
th { text-align: left; padding: 6px 8px; background: var(--sidebar); color: var(--text-dim); border-bottom: 1px solid var(--border); position: sticky; top: 0; }
td { padding: 4px 8px; border-bottom: 1px solid var(--border); }
td a { color: var(--link); text-decoration: none; font-weight: 500; }
td a:hover { text-decoration: underline; color: var(--accent-bright); }
tr:hover { background: var(--hover); }
.badge { display: inline-block; padding: 1px 6px; border-radius: var(--radius-pill); font-size: 10px; font-weight: 600; }
.badge-online { background: rgba(39,174,96,0.2); color: var(--success); }
.dev-photo-badge { display: inline-block; padding: 1px 6px; border-radius: var(--radius-pill); font-size: 10px; font-weight: 600;
                   background: rgba(78,161,214,0.15); color: #4ea1d6; margin-left: 4px; vertical-align: middle; }
.badge-offline { background: rgba(231,76,60,0.2); color: var(--danger); }
.badge-unknown { background: rgba(136,153,170,0.2); color: var(--text-dim); }

/* Login */
#login-screen { display: flex; align-items: center; justify-content: center; height: 100vh; background: var(--bg); }
.login-box { background: var(--sidebar); border: 1px solid var(--border); border-radius: var(--radius); padding: 40px; width: 340px; text-align: center; }
.login-brand { font-family: var(--font-display); font-size: 28px; font-weight: 700; color: var(--accent); letter-spacing: 2px; margin-bottom: 4px; }
.login-subtitle { font-size: 12px; color: var(--text-dim); margin-bottom: 28px; }
.login-box input { display: block; width: 100%; margin-bottom: 12px; padding: 10px 12px; font-size: 13px; }
.btn-login { display: block; width: 100%; padding: 10px; background: var(--accent); color: #fff; border: none; border-radius: var(--radius); font-size: 14px; font-weight: 600; cursor: pointer; }
.btn-login:hover { opacity: 0.9; }
.login-error { color: var(--danger); font-size: 12px; margin-top: 10px; min-height: 16px; }

/* Site cards */
.site-card { padding: 8px 10px; border-bottom: 1px solid var(--border); cursor: pointer; transition: background 0.15s; }
.site-card:hover { background: var(--hover); }
.site-card.active { background: var(--hover); border-left: 3px solid var(--accent); }
.site-card-header { display: flex; align-items: center; gap: 8px; }
.site-code { font-weight: 700; color: var(--accent); font-size: 11px; background: rgba(43,106,158,0.15); padding: 1px 5px; border-radius: var(--radius-pill); }
.site-name { font-size: 12px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.site-card-stats { display: flex; gap: 8px; margin-top: 4px; }
.stat { font-size: 10px; color: var(--text-dim); }
.stat-online { color: var(--success); }
.stat-degraded { color: var(--warning); font-weight: 600; }
.stat-alert { color: var(--danger); font-weight: 600; }
.site-empty { padding: 16px; color: var(--text-dim); font-size: 12px; text-align: center; }

/* Small button */
.btn-sm { padding: 2px 8px; font-size: 11px; background: transparent; border-color: var(--border); color: var(--text-dim); text-decoration: none; }
.btn-sm:hover { background: var(--hover); color: var(--text); }

/* User dropdown menu */
.user-menu { position: relative; }
.user-menu-btn { background: transparent; border: 1px solid var(--border); color: var(--text-dim); padding: 4px 10px; border-radius: var(--radius); font-size: 12px; cursor: pointer; }
.user-menu-btn:hover { background: var(--hover); color: var(--text); }
.caret { font-size: 9px; margin-left: 2px; }
.user-dropdown { display: none; position: absolute; right: 0; top: 100%; margin-top: 4px; background: var(--sidebar); border: 1px solid var(--border); border-radius: var(--radius); min-width: 160px; box-shadow: 0 4px 12px rgba(0,0,0,0.3); z-index: 100; overflow: hidden; }
.user-dropdown.open { display: block; }
.dropdown-item { display: block; width: 100%; padding: 8px 14px; font-size: 12px; color: var(--text); text-decoration: none; border: none; background: none; text-align: left; cursor: pointer; }
.dropdown-item:hover { background: var(--hover); }
.dropdown-divider { height: 1px; background: var(--border); margin: 4px 0; }

/* Button group */
.btn-group { display: flex; gap: 6px; }

/* Primary button */
.btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 600; }
.btn-primary:hover { opacity: 0.9; }
.btn-danger { border-color: var(--danger); color: var(--danger); }
.btn-danger:hover { background: rgba(231,76,60,0.15); }

/* Admin pages */
.admin-page { padding: 24px 32px; max-width: 1200px; }
.page-header { margin-bottom: 20px; }
.page-header h2 { font-family: var(--font-display); font-size: 20px; font-weight: 600; display: flex; align-items: center; gap: 10px; }
.page-header-row { display: flex; align-items: center; justify-content: space-between; }
.text-dim { color: var(--text-dim); font-size: 12px; }
.text-danger { color: var(--danger); }
.mono { font-family: var(--font-mono); font-size: 12px; }
.loading { color: var(--text-dim); padding: 20px; text-align: center; }
.empty-state { color: var(--text-dim); padding: 40px; text-align: center; font-size: 14px; }

/* Stats row */
.stats-row { display: flex; gap: 16px; margin-bottom: 24px; }
.stat-card { background: var(--sidebar); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 20px; min-width: 120px; }
.stat-value { font-family: var(--font-display); font-size: 28px; font-weight: 700; color: var(--text); }
.stat-label { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.stat-card-ok .stat-value { color: var(--success); }
.stat-card-danger .stat-value { color: var(--danger); }
.stat-card-warning .stat-value { color: var(--warning); }

/* Site grid (dashboard) */
.site-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.child-company-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.child-company-card { background: var(--input-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; cursor: pointer; transition: border-color 0.15s; }
.child-company-card:hover { border-color: var(--accent); }
.site-tile { background: var(--sidebar); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 14px; cursor: pointer; transition: border-color 0.15s; }
.site-tile:hover { border-color: var(--accent); }
.site-tile-header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.site-tile-name { font-family: var(--font-display); font-size: 14px; font-weight: 600; }
.site-tile-stats { display: flex; gap: 12px; font-size: 12px; margin-bottom: 4px; }
.site-tile-meta { font-size: 11px; color: var(--text-dim); }
.site-tile-actions { margin-top: 8px; }

/* Device rows */
.device-row { cursor: pointer; }
.device-row:hover { background: var(--hover); }

/* Badges */
.badge-critical { background: rgba(231,76,60,0.2); color: var(--danger); }
.badge-warning { background: rgba(245,166,35,0.2); color: var(--warning); }
.badge-info { background: rgba(52,152,219,0.2); color: #3498db; }
.badge-degraded { background: rgba(245,166,35,0.2); color: var(--warning); }
.badge-role-admin { background: rgba(43,106,158,0.2); color: var(--accent); }
.badge-role-engineer { background: rgba(52,152,219,0.2); color: #3498db; }
.badge-role-viewer { background: rgba(136,153,170,0.2); color: var(--text-dim); }

/* Subnet type badges */
.badge-subnet-management { background: rgba(52,152,219,0.2); color: #3498db; }
.badge-subnet-hotspot { background: rgba(245,166,35,0.2); color: var(--warning); }
.badge-subnet-vpn { background: rgba(155,89,182,0.2); color: #9b59b6; }
.badge-subnet-lan { background: rgba(39,174,96,0.2); color: var(--success); }
.badge-subnet-smarttv { background: rgba(230,126,34,0.2); color: #e67e22; }
.badge-subnet-wan { background: rgba(231,76,60,0.2); color: var(--danger); }
.badge-subnet-other_private { background: rgba(136,153,170,0.2); color: var(--text-dim); }
.badge-subnet-unknown { background: rgba(136,153,170,0.2); color: var(--text-dim); }

/* Filter tabs */
.filter-tabs { display: flex; gap: 4px; flex-wrap: wrap; }

/* Alert row severity highlights */
.alert-severity-critical { border-left: 3px solid var(--danger); }
.alert-severity-warning { border-left: 3px solid var(--warning); }
.alert-severity-degraded { border-left: 3px solid var(--warning); background: rgba(245,166,35,0.05); }
.alert-severity-info { border-left: 3px solid #3498db; }
.alert-row { cursor: pointer; }
.alert-row.expanded { background: var(--hover); }
.alert-detail-row td { padding: 0 !important; }
.alert-detail-content { padding: 8px 16px 12px 40px; font-size: 12px; }
.alert-detail-content .detail-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px 16px; margin-bottom: 8px; }
.alert-detail-content .detail-label { color: var(--text-dim); font-size: 11px; }
.alert-detail-content .detail-value { color: var(--text); }
.alert-detail-content .detection-chain { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.alert-detail-content .detection-step { padding: 2px 8px; border-radius: var(--radius); font-size: 11px; }
.alert-detail-content .detection-step.fail { background: rgba(231,76,60,0.15); color: var(--danger); }
.alert-detail-content .detection-step.ok { background: rgba(39,174,96,0.15); color: var(--success); }
.alert-detail-content .detection-step.skip { background: rgba(136,153,170,0.15); color: var(--text-dim); }
.alert-detail-content .detection-arrow { color: var(--text-dim); }
.alert-detail-content .detail-links { margin-top: 8px; display: flex; gap: 12px; }
.alert-detail-content .detail-links a { color: var(--accent); text-decoration: none; font-size: 12px; }
.alert-detail-content .detail-links a:hover { text-decoration: underline; }

/* Filter bar */
.filter-bar { display: flex; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.filter-bar input, .filter-bar select { font-size: 12px; }
.sortable { cursor: pointer; user-select: none; }
.sortable:hover { color: var(--accent); }

/* Site tabs */
.site-tabs { display: flex; gap: 2px; border-bottom: 2px solid var(--border); margin-bottom: 16px; }
.tab-btn { background: transparent; border: none; border-bottom: 2px solid transparent; color: var(--text-dim); padding: 8px 16px; font-size: 12px; cursor: pointer; margin-bottom: -2px; }
.tab-btn:hover { color: var(--text); border-bottom-color: var(--hover); }
.tab-btn.active { color: var(--text); border-bottom-color: var(--accent); font-weight: 600; background: var(--card-elevated); border-radius: var(--radius); }
.tab-panel { min-height: 200px; }

/* Links — visible against dark background */
.link { color: var(--link); text-decoration: none; }
.link:hover { text-decoration: underline; }
a[href^="mailto:"] { color: var(--link); text-decoration: none; }
a[href^="mailto:"]:hover { text-decoration: underline; }

/* Proposal mode banner */
#proposal-banner { display: flex; align-items: center; padding: 6px 16px; background: rgba(245,166,35,0.15); border-bottom: 2px solid var(--warning); color: var(--warning); font-size: 12px; font-weight: 600; }
#proposal-banner .btn-sm { color: var(--warning); border-color: var(--warning); }
.proposal-canvas-wrap { border: 2px solid var(--warning) !important; }

/* Unplaced devices list */
.unplaced-item { padding: 3px 4px; cursor: pointer; border-radius: var(--radius); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.unplaced-item:hover { background: var(--hover); }

/* Dashboard grid */
.dashboard-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.dash-card { background: var(--sidebar); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 16px; }
.dash-card h4 { font-size: 12px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; }
.dash-metric-row { display: flex; gap: 16px; }
.dash-metric { text-align: center; }
.dash-num { font-family: var(--font-display); font-size: 24px; font-weight: 700; display: block; }
.dash-label { font-size: 10px; color: var(--text-dim); }
@media (max-width: 1200px) { .dashboard-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 800px) { .dashboard-grid { grid-template-columns: 1fr; } }

/* Ticket badge */
.badge-ticket { background: rgba(52,152,219,0.2); color: #3498db; }

/* Detail grid (device detail) */
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.detail-section { background: var(--sidebar); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; }
.detail-section h3 { margin-bottom: 12px; }

/* Forms */
.form-row { display: flex; flex-direction: column; margin-bottom: 10px; }
.form-row label { font-size: 11px; color: var(--text-dim); margin-bottom: 3px; }
.form-row textarea { background: var(--input-bg); border: 1px solid var(--border); color: var(--text); padding: 6px 8px; border-radius: var(--radius); font-size: 12px; font-family: inherit; resize: vertical; }
.form-actions { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.form-inline { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* Info list (key-value) */
.info-list { font-size: 12px; }
.info-list dt { color: var(--text-dim); float: left; width: 80px; padding: 3px 0; }
.info-list dd { padding: 3px 0; margin-left: 88px; }

/* Card */
.card { background: var(--sidebar); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin-bottom: 16px; }

/* Admin layout — full width content area */
#content { flex: 1; overflow-y: auto; }
/* Map page fills available height */
#map-page { overflow: hidden; }

/* Design tool grid */
.tool-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.tool-btn { display: flex; flex-direction: column; align-items: center; padding: 6px 2px; font-size: 10px; border: 1px solid var(--border); background: var(--input-bg); color: var(--text-dim); border-radius: var(--radius); cursor: pointer; gap: 1px; }
.tool-btn:hover { background: var(--hover); color: var(--text); }
.tool-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.tool-icon { font-size: 16px; line-height: 1; }
.tool-label { font-size: 9px; }

/* Context menu */
#context-menu { position: fixed; display: none; z-index: 950; background: var(--sidebar); border: 1px solid var(--border); border-radius: var(--radius); padding: 4px 0; min-width: 180px; box-shadow: 0 4px 16px rgba(0,0,0,0.5); }
#context-menu.active { display: block; }
.ctx-item { padding: 6px 16px; font-size: 12px; cursor: pointer; color: var(--text); }
.ctx-item:hover { background: var(--hover); }
.ctx-item:first-child { font-weight: 600; color: var(--text-dim); font-size: 11px; cursor: default; }
.ctx-item:first-child:hover { background: transparent; }
.ctx-item.danger { color: var(--danger); }
.ctx-sep { height: 1px; background: var(--border); margin: 4px 0; }
.ctx-has-sub { position: relative; }
.ctx-submenu { position: fixed; z-index: 960; background: var(--sidebar); border: 1px solid var(--border); border-radius: var(--radius); padding: 4px 0; min-width: 200px; max-height: 70vh; overflow-y: auto; box-shadow: 0 4px 16px rgba(0,0,0,0.5); }
.ctx-submenu .ctx-item { padding: 5px 14px; font-size: 12px; cursor: pointer; color: var(--text); font-weight: normal; }
.ctx-submenu .ctx-item:hover { background: var(--hover); }

/* Properties modal */
.modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.6); z-index: 900; display: none; align-items: center; justify-content: center; }
#props-modal, #multi-props-modal { z-index: 920; }
.modal-overlay.active { display: flex; }
.modal-box { background: var(--sidebar); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 24px; width: 600px; max-width: 90vw; max-height: 85vh; overflow-y: auto; box-shadow: 0 8px 32px rgba(0,0,0,0.5); }
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.modal-header h2 { font-family: var(--font-display); font-size: 16px; margin: 0; }
.modal-close { background: none; border: none; color: var(--text-dim); font-size: 22px; cursor: pointer; padding: 0 4px; }
.modal-close:hover { color: var(--text); }
.modal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* ─── Mobile / Responsive ─────────────────────────────── */
/* ─── Tablet (768-1024px) ─────────────────────────────── */
@media (max-width: 1024px) {
  /* NOC dashboard cards wrap */
  #noc-dashboard-cards { grid-template-columns: repeat(3, 1fr) !important; }
  /* Admin page reduce padding */
  .admin-page { padding: 16px !important; }
  /* Filter bar wrap */
  .filter-bar, .filter-tabs { flex-wrap: wrap; }
}

/* ─── Mobile (768px and below) ────────────────────────── */
@media (max-width: 768px) {
  /* Collapse sidebar to overlay */
  #sidebar { position: fixed; left: -260px; top: 40px; bottom: 0; z-index: 800; width: 250px; transition: left 0.2s; }
  #sidebar.open { left: 0; box-shadow: 4px 0 24px rgba(0,0,0,0.5); }
  #canvas-wrap { margin-left: 0 !important; }
  .mobile-sidebar-toggle { display: block !important; position: fixed; top: 44px; left: 4px; z-index: 810; background: var(--sidebar); border: 1px solid var(--border); color: var(--text); padding: 6px 10px; border-radius: var(--radius); font-size: 16px; cursor: pointer; }
  /* Stack modal grid on mobile */
  .modal-grid { grid-template-columns: 1fr; }
  .modal-box { width: 95vw; max-height: 90vh; padding: 12px 14px; }
  /* Topnav compact */
  #topnav .nav-links { gap: 4px; }
  #topnav .nav-links a { font-size: 10px; padding: 4px 5px; }
  #topnav .nav-search { display: none; } /* hide search on mobile — use global search shortcut */
  /* Tool buttons bigger tap targets */
  .tool-btn { padding: 10px 4px; font-size: 11px; }
  .tool-icon { font-size: 20px; }
  /* Table responsive */
  table { display: block; overflow-x: auto; font-size: 11px; }
  th, td { padding: 4px 6px !important; white-space: nowrap; }
  /* NOC cards stack to 2 columns */
  #noc-dashboard-cards { grid-template-columns: repeat(2, 1fr) !important; }
  /* Admin page full width */
  .admin-page { padding: 10px !important; }
  .page-header-row { flex-direction: column; gap: 8px; align-items: flex-start !important; }
  .btn-group { flex-wrap: wrap; }
  /* Filter bar vertical stack */
  .filter-bar { flex-direction: column; }
  .filter-tabs { overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
  /* Cards tighter */
  .card, .stat-card { padding: 10px !important; }
  /* Dashboard grid */
  .dashboard-grid { grid-template-columns: 1fr !important; }
}

/* ─── Small Mobile (480px and below) ──────────────────── */
@media (max-width: 480px) {
  #sidebar { width: 100%; left: -100%; }
  #sidebar.open { left: 0; }
  .modal-box { width: 100vw; border-radius: 0; max-height: 100vh; }
  /* Single column NOC cards */
  #noc-dashboard-cards { grid-template-columns: repeat(3, 1fr) !important; }
  #noc-dashboard-cards .card { padding: 6px !important; }
  #noc-dashboard-cards .card div:first-child { font-size: 18px !important; }
  /* Hide less important table columns */
  .hide-mobile { display: none !important; }
}

/* ─── Light Mode Logo Swap ───────────────────────────────── */
:root[data-theme="light"] .nav-logo-dark { display: none !important; }
:root[data-theme="light"] .nav-logo-light { display: block !important; }

/* ─── Brand Gradient Bar ────────────────────────────────── */
#topnav::after {
  content: '';
  display: block;
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: var(--brand-gradient);
}

/* ─── Nav Active Indicator ───────────────────────────────── */
.nav-link.active-page { border-bottom: 2px solid var(--accent); color: var(--text) !important; }
.nav-link { transition: color 0.15s ease; }

/* ─── Page Transitions ───────────────────────────────────── */
#content { animation: pageIn 0.15s ease; }
@keyframes pageIn { from { opacity: 0.6; transform: translateY(2px); } to { opacity: 1; transform: translateY(0); } }

/* ─── Loading Progress Bar ───────────────────────────────── */
#htmx-progress { position: fixed; top: 0; left: 0; height: 3px; background: var(--brand-gradient-progress); z-index: 9999; transition: width 0.4s ease; width: 0; opacity: 0; }
#htmx-progress.loading { opacity: 1; width: 70%; }
#htmx-progress.done { width: 100%; transition: width 0.15s ease, opacity 0.4s ease 0.2s; opacity: 0; }

/* ─── Card Elevation ─────────────────────────────────────── */
.card, .stat-card, .site-tile { box-shadow: 0 1px 3px rgba(0,0,0,0.2); transition: box-shadow 0.2s ease, transform 0.2s ease; }
.site-tile:hover, .card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.3); transform: translateY(-1px); }

/* ─── Table Polish ────────────────────────────────────────── */
tr:nth-child(even) { background: rgba(255,255,255,0.015); }
:root[data-theme="light"] tr:nth-child(even) { background: rgba(0,0,0,0.02); }

/* ─── Spinner ─────────────────────────────────────────────── */
.spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ─── Toast Notifications ─────────────────────────────────── */
#toast-container { position: fixed; top: 48px; right: 16px; z-index: 9998; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.toast { pointer-events: auto; background: var(--sidebar); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 14px; font-size: 12px; color: var(--text); box-shadow: 0 4px 16px rgba(0,0,0,0.4); animation: toastIn 0.2s ease; min-width: 260px; max-width: 380px; display: flex; gap: 8px; align-items: flex-start; }
.toast.toast-success { border-left: 3px solid var(--success); }
.toast.toast-error { border-left: 3px solid var(--danger); }
.toast.toast-info { border-left: 3px solid var(--accent); }
.toast.toast-out { animation: toastOut 0.2s ease forwards; }
@keyframes toastIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
@keyframes toastOut { from { opacity: 1; } to { opacity: 0; transform: translateX(20px); } }

/* ─── Empty States ────────────────────────────────────────── */
.empty-state { text-align: center; padding: 40px 20px; color: var(--text-dim); }
.empty-state-icon { font-size: 36px; margin-bottom: 12px; opacity: 0.5; }
.empty-state-msg { font-size: 14px; margin-bottom: 8px; }
.empty-state-hint { font-size: 11px; }

/* ─── Collapsible Sidebar Sections ─────────────────────────── */
.sidebar-section > h3 { cursor: pointer; user-select: none; display: flex; justify-content: space-between; align-items: center; }
.sidebar-section > h3::after { content: '\25B4'; font-size: 8px; color: var(--text-dim); transition: transform 0.15s; }
.sidebar-section.collapsed > h3::after { transform: rotate(180deg); }
.sidebar-section.collapsed > *:not(h3) { display: none !important; }

/* ─── Theme Toggle Button ─────────────────────────────────── */
.theme-toggle { background: none; border: none; font-size: 16px; cursor: pointer; padding: 4px; color: var(--text-dim); }
.theme-toggle:hover { color: var(--text); }

/* ─── Config Backup UI ────────────────────────────────────── */
.config-text { font-family: var(--font-mono); font-size: 11px; line-height: 1.4; white-space: pre; background: var(--input-bg); color: var(--text); padding: 12px; border: 1px solid var(--border); border-radius: var(--radius); overflow: auto; max-height: 70vh; margin: 0; }
.diff-table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 11px; table-layout: fixed; }
.diff-table th { text-align: left; padding: 6px 8px; background: var(--sidebar); color: var(--text-dim); border-bottom: 1px solid var(--border); font-weight: 600; font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; }
.diff-table td { padding: 2px 8px; border-bottom: 1px solid var(--border); vertical-align: top; white-space: pre-wrap; word-break: break-all; }
.diff-table td.lineno { color: var(--text-dim); text-align: right; width: 50px; user-select: none; background: var(--sidebar); }
.diff-table tr.diff-changed td.diff-old { background: var(--status-offline-tint); color: var(--danger); }
.diff-table tr.diff-changed td.diff-new { background: var(--status-online-tint); color: var(--success); }
.diff-table tr.diff-changed td.diff-old:empty::before,
.diff-table tr.diff-changed td.diff-new:empty::before { content: '—'; color: var(--text-dim); }
.backup-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.backup-actions .btn-sm { padding: 3px 8px; font-size: 10px; }
.backup-history-header { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.backup-history-header .toggle-label { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-dim); }
.backup-row-selected { background: rgba(43, 106, 158, 0.08); }
.backup-error { color: var(--danger); font-size: 10px; margin-top: 4px; max-width: 320px; line-height: 1.3; word-break: break-word; cursor: help; }