/* ============================================================
   FleetPilot stylesheet
   ------------------------------------------------------------
   1. Tokens (light / dark) and Bootstrap bridge
   2. Base elements
   3. App shell: sidebar, topbar, page
   4. Components: cards, buttons, badges, alerts, forms, tables
   5. Shared widgets (stats, status, usage bars, toast, login)
   6. Page-specific sections (hosts, scanner, modules)
   Bootstrap 5.3 is loaded first by base.html; everything here
   sits on top of it and reads from the same tokens.
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root {
  --font-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 10px;
  --sidebar-w: 232px;
  --topbar-h:  52px;
  --transition: 0.12s ease;
}

:root,
[data-theme="light"] {
  --bg-base:       #f5f6f7;
  --bg-surface:    #ffffff;
  --bg-elevated:   #f0f1f3;
  --bg-hover:      #e8eaed;
  --border:        #dcdfe3;
  --border-strong: #c4c9cf;
  --border-focus:  #2a58bd;

  --text-primary:   #15181c;
  --text-secondary: #4a525c;
  --text-muted:     #5f6670;

  --accent-blue:   #2a58bd;
  --accent-blue-h: #20479c;
  --accent-green:  #186b43;
  --accent-red:    #ad2f28;
  --accent-amber:  #875605;
  --accent-purple: #6551b0;
  --accent-cyan:   #10646e;
  --accent-orange: #b8561b;

  --on-accent: #ffffff;
  --on-danger: #ffffff;
  --shadow-sm: 0 1px 2px rgba(16,20,24,.06);
  --shadow-md: 0 2px 8px rgba(16,20,24,.08);
  --shadow-lg: 0 12px 32px rgba(16,20,24,.14);

  --pre-bg:   #f0f1f3;
  --pre-text: #2a3038;
  --scrollbar-track: transparent;
  --scrollbar-thumb: #c4c9cf;

  --bs-primary-rgb: 42,88,189;
  --bs-success-rgb: 24,107,67;
  --bs-danger-rgb:  173,47,40;
  --bs-warning-rgb: 135,86,5;
  --bs-info-rgb:    16,100,110;
  color-scheme: light;
}

[data-theme="dark"] {
  --bg-base:       #0f1113;
  --bg-surface:    #16181b;
  --bg-elevated:   #1c1f23;
  --bg-hover:      #24282d;
  --border:        #2b2f35;
  --border-strong: #3b4048;
  --border-focus:  #6b98ee;

  --text-primary:   #e5e7ea;
  --text-secondary: #a8aeb7;
  --text-muted:     #8b929c;

  --accent-blue:   #6b98ee;
  --accent-blue-h: #85abf2;
  --accent-green:  #4fb383;
  --accent-red:    #e46a63;
  --accent-amber:  #d8a645;
  --accent-purple: #a093dc;
  --accent-cyan:   #5ab6c1;
  --accent-orange: #e08a52;

  --on-accent: #0f1113;
  --on-danger: #0f1113;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.3);
  --shadow-md: 0 2px 8px rgba(0,0,0,.35);
  --shadow-lg: 0 12px 32px rgba(0,0,0,.5);

  --pre-bg:   #0b0c0e;
  --pre-text: #c9d1d9;
  --scrollbar-track: transparent;
  --scrollbar-thumb: #3b4048;

  --bs-primary-rgb: 107,152,238;
  --bs-success-rgb: 79,179,131;
  --bs-danger-rgb:  228,106,99;
  --bs-warning-rgb: 216,166,69;
  --bs-info-rgb:    90,182,193;
  color-scheme: dark;
}

/* Tints derived from the accents, so every page follows the palette. */
:root, [data-theme] {
  --tint-blue:   color-mix(in srgb, var(--accent-blue) 12%, transparent);
  --tint-green:  color-mix(in srgb, var(--accent-green) 12%, transparent);
  --tint-red:    color-mix(in srgb, var(--accent-red) 12%, transparent);
  --tint-amber:  color-mix(in srgb, var(--accent-amber) 14%, transparent);
  --tint-purple: color-mix(in srgb, var(--accent-purple) 12%, transparent);
  --tint-cyan:   color-mix(in srgb, var(--accent-cyan) 12%, transparent);
  --tint-gray:   color-mix(in srgb, var(--text-muted) 12%, transparent);

  /* Aliases still referenced by older templates */
  --primary: var(--accent-blue);
  --primary-color: var(--accent-blue);
  --success: var(--accent-green);
  --success-color: var(--accent-green);
  --danger: var(--accent-red);
  --danger-color: var(--accent-red);
  --warning: var(--accent-amber);
  --warning-color: var(--accent-amber);
  --info: var(--accent-cyan);
  --accent: var(--accent-blue);
  --accent-color: var(--accent-blue);
  --bg: var(--bg-base);
  --bg-primary: var(--bg-base);
  --bg-secondary: var(--bg-surface);
  --bg-tertiary: var(--bg-elevated);
  --bg-card: var(--bg-surface);
  --card-bg: var(--bg-surface);
  --surface: var(--bg-surface);
  --border-color: var(--border);
  --text: var(--text-primary);
  --text-color: var(--text-primary);
  --muted: var(--text-muted);
  --glow-blue: transparent; --glow-green: transparent; --glow-red: transparent;
  --glow-amber: transparent; --glow-purple: transparent;

  /* Bootstrap bridge */
  --bs-body-font-family: var(--font-sans);
  --bs-font-monospace: var(--font-mono);
  --bs-body-bg: var(--bg-base);
  --bs-body-color: var(--text-primary);
  --bs-emphasis-color: var(--text-primary);
  --bs-secondary-color: var(--text-muted);
  --bs-secondary-bg: var(--bg-elevated);
  --bs-tertiary-bg: var(--bg-elevated);
  --bs-tertiary-color: var(--text-muted);
  --bs-border-color: var(--border);
  --bs-border-color-translucent: var(--border);
  --bs-border-radius: var(--radius-md);
  --bs-border-radius-sm: var(--radius-sm);
  --bs-border-radius-lg: var(--radius-lg);
  --bs-link-color: var(--accent-blue);
  --bs-link-hover-color: var(--accent-blue-h);
  --bs-link-color-rgb: var(--bs-primary-rgb);
  --bs-heading-color: var(--text-primary);
  --bs-code-color: var(--text-primary);
}

/* ---------- 2. Base ---------- */
html { font-size: 15px; }
body {
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 0.93rem;
  line-height: 1.5;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent-blue); text-decoration: none; }
a:hover { color: var(--accent-blue-h); text-decoration: underline; text-underline-offset: 2px; }
a.btn:hover, .sidebar a:hover, a.card:hover, .topbar a:hover { text-decoration: none; }

h1, h2, h3, h4, h5, h6 { font-weight: 600; line-height: 1.3; color: var(--text-primary); letter-spacing: -0.005em; }
h1 { font-size: 1.45rem; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.08rem; }
h4 { font-size: 1rem; }
h5 { font-size: 0.93rem; }
p  { color: var(--text-secondary); margin-bottom: 0.75rem; }
p:last-child { margin-bottom: 0; }
strong, b { color: var(--text-primary); font-weight: 600; }
small, .small { font-size: 0.85em; }
hr { border-color: var(--border); opacity: 1; }

code, kbd, samp, .font-monospace, .ip-mono {
  font-family: var(--font-mono);
}
code {
  background: var(--bg-elevated);
  color: var(--text-primary);
  padding: 0.1em 0.35em;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.86em;
}
pre {
  background: var(--pre-bg);
  color: var(--pre-text);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0.9rem 1rem;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  line-height: 1.6;
}
pre code { background: none; border: 0; padding: 0; }
ul, ol { color: var(--text-secondary); }
li { margin-bottom: 0.25rem; }

.icon { display: inline-block; vertical-align: -0.18em; flex-shrink: 0; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--scrollbar-track); }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 10px; border: 3px solid var(--bg-base); }

:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }

/* ---------- 3. App shell ---------- */
.layout { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-w);
  background: var(--bg-surface);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  position: fixed; top: 0; left: 0;
  height: 100vh; z-index: 100;
  overflow-y: auto;
  transition: transform 0.2s ease;
}
.sidebar-brand {
  display: flex; align-items: center; gap: 0.6rem;
  height: var(--topbar-h);
  padding: 0 1rem;
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
}
.sidebar-brand:hover { color: var(--text-primary); }
.sidebar-brand-mark {
  width: 24px; height: 24px;
  border-radius: var(--radius-sm);
  background: var(--text-primary);
  color: var(--bg-surface);
  display: flex; align-items: center; justify-content: center;
}
.sidebar-brand-text { display: flex; align-items: baseline; gap: 0.45rem; }
.sidebar-brand-title { font-weight: 600; font-size: 0.95rem; }
.sidebar-brand-sub { font-size: 0.72rem; color: var(--text-muted); font-family: var(--font-mono); }

.sidebar-nav { flex: 1; padding: 0.5rem 0.5rem 1rem; display: flex; flex-direction: column; }
.sidebar-section-label {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 0.75rem; font-weight: 500;
  color: var(--text-muted);
  padding: 0.85rem 0.6rem 0.3rem;
  cursor: pointer; user-select: none;
}
.sidebar-section-label:hover { color: var(--text-secondary); }
.sidebar-section-label .nav-chevron { transition: transform 0.15s; opacity: 0.7; }
.sidebar-section-label.collapsed .nav-chevron { transform: rotate(-90deg); }
.sidebar-nav-group { overflow: hidden; transition: max-height 0.2s ease; }
.sidebar-nav-group.collapsed { max-height: 0 !important; }

.sidebar-link {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.36rem 0.6rem;
  margin: 1px 0;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: 0.88rem;
  line-height: 1.35;
}
.sidebar-link:hover { background: var(--bg-hover); color: var(--text-primary); }
.sidebar-link.active { background: var(--bg-elevated); color: var(--text-primary); font-weight: 500; box-shadow: inset 2px 0 0 var(--accent-blue); }
.sidebar-link .icon { color: var(--text-muted); }
.sidebar-link.active .icon { color: var(--accent-blue); }
.sidebar-icon { display: inline-flex; width: 16px; justify-content: center; }
.nav-tag {
  margin-left: auto;
  font-size: 0.68rem; color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0 0.3rem; line-height: 1.4;
}
.sidebar-footer {
  border-top: 1px solid var(--border);
  padding: 0.6rem 0.5rem;
}
.sidebar-version { padding: 0 0.6rem 0.4rem; font-size: 0.72rem; color: var(--text-muted); font-family: var(--font-mono); }
.sidebar-update {
  margin: 0 0.5rem 0.6rem; padding: 0.6rem 0.7rem;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  font-size: 0.8rem; color: var(--text-secondary);
}
.sidebar-update strong { display: block; font-size: 0.82rem; margin-bottom: 0.15rem; }
button.sidebar-link { width: 100%; border: 0; background: transparent; text-align: left; cursor: pointer; font: inherit; font-size: 0.88rem; }

.main-content { margin-left: var(--sidebar-w); flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 100vh; }

.topbar {
  height: var(--topbar-h);
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0 1.25rem;
  position: sticky; top: 0; z-index: 50;
}
.topbar-left { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.topbar-breadcrumb { display: flex; align-items: center; gap: 0.4rem; font-size: 0.88rem; color: var(--text-muted); min-width: 0; white-space: nowrap; }
.topbar-breadcrumb a { color: var(--text-muted); }
.topbar-breadcrumb a:hover { color: var(--text-primary); }
.topbar-breadcrumb .bc-sep { color: var(--border-strong); }
.topbar-breadcrumb .bc-current { color: var(--text-primary); font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.topbar-actions { display: flex; align-items: center; gap: 0.5rem; }

.topbar-control, .theme-toggle, .lang-select {
  height: 32px;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem;
  padding: 0 0.6rem;
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font: inherit; font-size: 0.82rem;
  cursor: pointer;
}
.theme-toggle { width: 32px; padding: 0; }
.topbar-control:hover, .theme-toggle:hover, .lang-select:hover { background: var(--bg-hover); color: var(--text-primary); }
select.lang-select { width: auto; padding-right: 1.6rem; background-position: right 0.45rem center; }
[data-theme="dark"]  .theme-icon-dark  { display: none; }
[data-theme="light"] .theme-icon-light { display: none; }
.theme-icon-light, .theme-icon-dark { display: inline-flex; }

.topbar-profile {
  display: inline-flex; align-items: center; gap: 0.45rem;
  height: 32px; padding: 0 0.55rem 0 0.25rem;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  color: var(--text-secondary); font-size: 0.85rem;
}
.topbar-profile:hover { background: var(--bg-hover); color: var(--text-primary); }
.topbar-profile-avatar {
  width: 24px; height: 24px; border-radius: var(--radius-sm);
  background: var(--bg-elevated); border: 1px solid var(--border);
  color: var(--text-secondary);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.68rem; font-weight: 600; font-family: var(--font-mono);
}
.online-indicator::after { display: none; }

.page-content { padding: 1.5rem 1.75rem 3rem; flex: 1; width: 100%; max-width: 1480px; }
.page-header { margin-bottom: 1.25rem; }
.page-header h1, .page-header h2 { font-size: 1.35rem; margin: 0; }
.page-header p { margin-top: 0.25rem; font-size: 0.9rem; color: var(--text-muted); }
/* Every page gets this header from base.html: title, optional description, actions. */
.page-header-v4 {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 0.75rem 1.5rem; flex-wrap: wrap;
  margin-bottom: 1.25rem;
}
.page-header-text { min-width: 0; }
.page-title, .page-header-v4 h1, .page-header-v4 h2 {
  font-size: 1.4rem; font-weight: 600; line-height: 1.25; margin: 0;
  letter-spacing: -0.01em; overflow-wrap: anywhere;
}
.page-subtitle {
  font-size: 0.9rem; color: var(--text-muted); margin: 0.3rem 0 0;
  max-width: 72ch; display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem;
}
.page-back { margin-bottom: 0.35rem; font-size: 0.85rem; }
.page-back a { color: var(--text-muted); display: inline-flex; align-items: center; gap: 0.3rem; }
.page-back a:hover { color: var(--text-primary); }
.page-actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.page-actions form { margin: 0; }
.page-narrow { max-width: 760px; }
/* Bootstrap containers left inside pages must not add a second gutter. */
.page-content .container, .page-content .container-fluid { max-width: none; padding-left: 0; padding-right: 0; }

.subnav {
  display: flex; gap: 0.25rem; flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
  margin: -0.25rem 0 1.25rem;
}
.subnav a {
  padding: 0.45rem 0.7rem; margin-bottom: -1px;
  color: var(--text-secondary); font-size: 0.88rem;
  border-bottom: 2px solid transparent;
}
.subnav a:hover { color: var(--text-primary); text-decoration: none; }
.subnav a.active { color: var(--text-primary); border-bottom-color: var(--accent-blue); font-weight: 500; }

/* ---------- 4. Components ---------- */

/* Cards */
.card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.1rem 1.25rem;
  margin-bottom: 1rem;
  color: var(--text-primary);
  --bs-card-bg: var(--bg-surface);
  --bs-card-border-color: var(--border);
  --bs-card-cap-bg: var(--bg-elevated);
  --bs-card-color: var(--text-primary);
}
.card :is(h2, h3) { font-size: 1rem; margin-bottom: 0.6rem; display: flex; align-items: center; gap: 0.45rem; }
.card :is(h3, h4) :is(h3,h4), .card h4 { font-size: 0.93rem; margin-bottom: 0.5rem; color: var(--text-secondary); }
.card-header {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  margin-bottom: 0.9rem; padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--border);
  background: transparent;
}
.card-header :is(h2, h3) { margin-bottom: 0; }
/* Bootstrap-structured cards (header/body/footer children) */
.card:has(> .card-body), .card:has(> .card-header + .card-body), .card:has(> .list-group) { padding: 0; }
.card:has(> .card-body) > .card-header,
.card:has(> .table-responsive) > .card-header {
  margin: 0; padding: 0.65rem 1rem;
  background: var(--bg-elevated);
  font-size: 0.9rem; font-weight: 600;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.card-body { padding: 1rem; color: var(--text-primary); }
.card-footer { background: var(--bg-elevated); border-top: 1px solid var(--border); padding: 0.6rem 1rem; }
.card-title { font-size: 0.95rem; font-weight: 600; }
.card-blue   { border-left: 3px solid var(--accent-blue); }
.card-green  { border-left: 3px solid var(--accent-green); }
.card-red    { border-left: 3px solid var(--accent-red); }
.card-purple { border-left: 3px solid var(--accent-purple); }
.card-amber  { border-left: 3px solid var(--accent-amber); }
.card-v4 { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.card-v4-header {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--border);
}
.card-v4-header-title { display: flex; align-items: center; gap: 0.5rem; font-size: 0.92rem; font-weight: 600; color: var(--text-primary); }
.card-v4-body { padding: 1rem; }
.shadow-sm, .shadow, .shadow-lg { box-shadow: none !important; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  height: auto; min-height: 32px;
  padding: 0.32rem 0.8rem;
  border-radius: var(--radius-md);
  font-size: 0.86rem; font-weight: 500; line-height: 1.35;
  border: 1px solid var(--border-strong);
  background: var(--bg-surface);
  color: var(--text-primary);
  cursor: pointer; white-space: nowrap;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
  box-shadow: none;
}
.btn:hover { background: var(--bg-hover); color: var(--text-primary); border-color: var(--border-strong); }
.btn:disabled, .btn.disabled { opacity: 0.55; }
.btn-primary, .btn-glow-blue { background: var(--accent-blue); border-color: var(--accent-blue); color: var(--on-accent); }
.btn-primary:hover, .btn-glow-blue:hover { background: var(--accent-blue-h); border-color: var(--accent-blue-h); color: var(--on-accent); }
.btn-secondary, .btn-light, .btn-dark { background: var(--bg-surface); color: var(--text-primary); border-color: var(--border-strong); }
.btn-secondary:hover, .btn-light:hover, .btn-dark:hover { background: var(--bg-hover); color: var(--text-primary); border-color: var(--border-strong); }
/* Filled colour is reserved for the primary action and destructive actions. */
.btn-success, .btn-glow-green { background: var(--accent-blue); border-color: var(--accent-blue); color: var(--on-accent); }
.btn-success:hover, .btn-glow-green:hover { background: var(--accent-blue-h); border-color: var(--accent-blue-h); color: var(--on-accent); }
.btn-danger { background: var(--accent-red); border-color: var(--accent-red); color: var(--on-danger); }
.btn-danger:hover { background: color-mix(in srgb, var(--accent-red) 88%, #000); border-color: transparent; color: var(--on-danger); }
.btn-warning { background: var(--bg-surface); border-color: var(--border-strong); color: var(--accent-amber); }
.btn-warning:hover { background: var(--bg-hover); color: var(--accent-amber); border-color: var(--border-strong); }
.btn-info, .btn-purple { background: var(--bg-surface); color: var(--text-primary); border-color: var(--border-strong); }
.btn-info:hover, .btn-purple:hover { background: var(--bg-hover); color: var(--text-primary); }
.btn-ghost, .btn-link { background: transparent; border-color: transparent; color: var(--text-secondary); }
.btn-ghost:hover { background: var(--bg-hover); color: var(--text-primary); border-color: transparent; }
.btn-link { color: var(--accent-blue); padding-left: 0.3rem; padding-right: 0.3rem; }
.btn-link:hover { background: transparent; color: var(--accent-blue-h); text-decoration: underline; }
[class*="btn-outline-"] { background: transparent; border-color: var(--border-strong); }
.btn-outline-primary   { color: var(--accent-blue); }
.btn-outline-secondary, .btn-outline-light, .btn-outline-dark { color: var(--text-secondary); }
.btn-outline-success   { color: var(--accent-green); }
.btn-outline-danger    { color: var(--accent-red); }
.btn-outline-warning   { color: var(--accent-amber); }
.btn-outline-info      { color: var(--accent-cyan); }
[class*="btn-outline-"]:hover { background: var(--bg-hover); border-color: var(--border-strong); }
.btn-outline-danger:hover { background: var(--tint-red); color: var(--accent-red); border-color: color-mix(in srgb, var(--accent-red) 45%, transparent); }
.btn-sm { min-height: 28px; padding: 0.2rem 0.6rem; font-size: 0.8rem; }
.btn-xs { min-height: 24px; padding: 0.1rem 0.45rem; font-size: 0.75rem; border-radius: var(--radius-sm); }
.btn-lg { min-height: 40px; padding: 0.5rem 1.1rem; font-size: 0.95rem; }
.btn-group { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.btn-close { filter: none; }
[data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }

/* Badges */
.badge {
  display: inline-flex; align-items: center; gap: 0.25rem;
  padding: 0.1rem 0.45rem;
  border-radius: var(--radius-sm);
  font-size: 0.74rem; font-weight: 500; line-height: 1.5;
  letter-spacing: 0;
  background: var(--tint-gray); color: var(--text-secondary);
  border: 1px solid transparent;
}
.badge-blue,   .badge.bg-primary, .badge-running { background: var(--tint-blue) !important;   color: var(--accent-blue) !important; }
.badge-green,  .badge.bg-success, .badge-online, .badge-local { background: var(--tint-green) !important;  color: var(--accent-green) !important; }
.badge-red,    .badge.bg-danger,  .badge-offline, .badge-error, .badge-danger { background: var(--tint-red) !important; color: var(--accent-red) !important; }
.badge-amber,  .badge.bg-warning, .badge-warn, .badge-yellow, .badge-orange { background: var(--tint-amber) !important; color: var(--accent-amber) !important; }
.badge-purple { background: var(--tint-purple); color: var(--accent-purple); }
.badge-cyan,   .badge.bg-info { background: var(--tint-cyan) !important; color: var(--accent-cyan) !important; }
.badge-gray,   .badge.bg-secondary, .badge.bg-light, .badge.bg-dark { background: var(--tint-gray) !important; color: var(--text-secondary) !important; }
.badge.text-dark { color: inherit !important; }

/* Status */
.status-dot, .host-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--text-muted); }
.status-dot.online, .host-dot.online { background: var(--accent-green); }
.status-dot.offline { background: var(--accent-red); }
.host-dot.offline { background: var(--text-muted); }
.host-dot.critical { background: var(--accent-red); }
.status-online { color: var(--accent-green); }
.status-offline { color: var(--accent-red); }
.status-badge { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.78rem; font-weight: 500; white-space: nowrap; padding: 0.1rem 0.45rem; border-radius: var(--radius-sm); }
.status-pill {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.1rem 0.45rem;
  border-radius: var(--radius-sm);
  font-size: 0.76rem; font-weight: 500; white-space: nowrap;
  background: var(--tint-gray); color: var(--text-secondary);
}
.status-pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status-pill.online   { background: var(--tint-green); color: var(--accent-green); }
.status-pill.offline  { background: var(--tint-gray);  color: var(--text-muted); }
.status-pill.critical { background: var(--tint-red);   color: var(--accent-red); }
.status-pill.warning  { background: var(--tint-amber); color: var(--accent-amber); }

/* Alerts */
.alert {
  display: flex; align-items: flex-start; gap: 0.6rem;
  padding: 0.65rem 0.9rem;
  margin-bottom: 1rem;
  border-radius: var(--radius-md);
  font-size: 0.9rem;
  border: 1px solid var(--border);
  border-left-width: 3px;
  background: var(--bg-surface);
  color: var(--text-primary);
}
.alert-success { border-left-color: var(--accent-green); }
.alert-info, .alert-primary { border-left-color: var(--accent-blue); }
.alert-warning { border-left-color: var(--accent-amber); }
.alert-danger  { border-left-color: var(--accent-red); }
.alert-secondary, .alert-light, .alert-dark { border-left-color: var(--border-strong); }
.alert .icon { margin-top: 0.15rem; }
.alert-success > .icon { color: var(--accent-green); }
.alert-warning > .icon { color: var(--accent-amber); }
.alert-danger  > .icon { color: var(--accent-red); }
.alert-info    > .icon { color: var(--accent-blue); }
.alert-dismissible { padding-right: 2.5rem; position: relative; }
.alert-link { color: inherit; font-weight: 600; }
.info-box, .warning-box {
  padding: 0.75rem 1rem; margin-bottom: 1rem;
  border: 1px solid var(--border); border-left: 3px solid var(--accent-blue);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
}
.warning-box { border-left-color: var(--accent-red); }
.info-box p, .warning-box p, .warning-box li { font-size: 0.88rem; color: var(--text-secondary); margin-bottom: 0.4rem; }
.warning-box :is(h2, h3) { font-size: 0.93rem; color: var(--accent-red); margin-bottom: 0.4rem; }

/* Forms */
.form-group { margin-bottom: 1rem; }
.form-label, label { font-size: 0.86rem; font-weight: 500; color: var(--text-primary); }
.form-label { display: block; margin-bottom: 0.3rem; }
.form-hint, .form-text { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.25rem; }
.form-control, .form-select,
input[type="text"], input[type="password"], input[type="email"], input[type="number"],
input[type="url"], input[type="search"], input[type="tel"], input[type="date"], input[type="time"], input[type="datetime-local"],
textarea, select {
  width: 100%;
  min-height: 34px;
  padding: 0.38rem 0.65rem;
  background-color: var(--bg-surface);
  color: var(--text-primary);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  font: inherit; font-size: 0.9rem;
  transition: border-color var(--transition), box-shadow var(--transition);
}
[data-theme="dark"] :is(.form-control, .form-select, input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="url"], input[type="search"], textarea, select) {
  background-color: var(--bg-base);
}
.form-control:focus, .form-select:focus,
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--border-focus) 20%, transparent);
  color: var(--text-primary);
}
.form-control:disabled, .form-control[readonly] { background-color: var(--bg-elevated); color: var(--text-secondary); }
input::placeholder, textarea::placeholder { color: var(--text-muted); opacity: 1; }
select, .form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237c838d' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.6rem center;
  padding-right: 2rem;
}
textarea { resize: vertical; min-height: 90px; }
.form-control-sm { min-height: 28px; font-size: 0.82rem; padding: 0.2rem 0.5rem; }
.form-control-lg { min-height: 40px; font-size: 1rem; }
.input-group-text { background: var(--bg-elevated); border-color: var(--border-strong); color: var(--text-secondary); }

/* FleetPilot's bordered option rows; Bootstrap-style checks are left alone */
.form-check:not(:has(.form-check-input)) {
  display: flex; align-items: flex-start; gap: 0.6rem;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: 0.6rem;
  cursor: pointer;
}
.form-check:not(:has(.form-check-input)):hover { background: var(--bg-elevated); }
.form-check input[type="checkbox"], .form-check input[type="radio"],
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent-blue); }
.form-check-input { background-color: var(--bg-surface); border-color: var(--border-strong); }
.form-check-input:checked { background-color: var(--accent-blue); border-color: var(--accent-blue); }
.form-check-label { color: var(--text-primary); }
.form-check-label strong { font-size: 0.9rem; }
.form-check-label span { font-size: 0.8rem; color: var(--text-muted); }
.form-range::-webkit-slider-thumb { background: var(--accent-blue); }
.form-range::-moz-range-thumb { background: var(--accent-blue); }
.form-range::-webkit-slider-runnable-track { background: var(--bg-hover); }

/* Tables */
.table-wrapper, .table-responsive { overflow-x: auto; }
.table-wrapper { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-surface); }
table, .table, .fleet-table, .table-v4, .data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
  color: var(--text-primary);
  margin-bottom: 0;
  --bs-table-bg: transparent;
  --bs-table-color: var(--text-primary);
  --bs-table-border-color: var(--border);
  --bs-table-striped-bg: var(--bg-elevated);
  --bs-table-striped-color: var(--text-primary);
  --bs-table-hover-bg: var(--bg-elevated);
  --bs-table-hover-color: var(--text-primary);
  --bs-table-active-bg: var(--bg-hover);
}
th, .table > thead > tr > th, .fleet-table thead th, .table-v4 thead th {
  background: transparent;
  color: var(--text-muted);
  font-size: 0.78rem; font-weight: 500;
  text-transform: none; letter-spacing: 0;
  padding: 0.55rem 0.85rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
td, .table > tbody > tr > td { padding: 0.55rem 0.85rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: var(--bg-elevated); }
.table-sm td, .table-sm th { padding: 0.35rem 0.6rem; }
.table-dark, .table-light { --bs-table-bg: transparent; --bs-table-color: var(--text-primary); background: transparent; color: var(--text-primary); }
.table-dark th, .table-light th { background: transparent !important; color: var(--text-muted) !important; }
.text-end { text-align: right; }
.num, td.num, .tabular { font-variant-numeric: tabular-nums; }

/* Lists, tabs, modals, toasts, progress */
.list-group { --bs-list-group-bg: var(--bg-surface); --bs-list-group-color: var(--text-primary); --bs-list-group-border-color: var(--border); }
.nav-tabs { --bs-nav-tabs-border-color: var(--border); --bs-nav-tabs-link-active-bg: var(--bg-surface); --bs-nav-tabs-link-active-color: var(--text-primary); --bs-nav-tabs-link-active-border-color: var(--border) var(--border) var(--bg-surface); }
.nav-link { color: var(--text-secondary); }
.nav-link:hover { color: var(--text-primary); }
.modal { --bs-modal-bg: var(--bg-surface); --bs-modal-color: var(--text-primary); --bs-modal-border-color: var(--border); --bs-modal-header-border-color: var(--border); --bs-modal-footer-border-color: var(--border); --bs-modal-border-radius: var(--radius-lg); }
.toast { --bs-toast-bg: var(--bg-surface); --bs-toast-color: var(--text-primary); --bs-toast-border-color: var(--border); }
.progress { --bs-progress-bg: var(--bg-elevated); --bs-progress-bar-bg: var(--accent-blue); --bs-progress-border-radius: var(--radius-sm); }
.spinner-border { --bs-spinner-border-width: 2px; color: var(--text-muted); }

/* Utilities kept from the original stylesheet */
.text-muted     { color: var(--text-muted) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.text-primary   { color: var(--text-primary) !important; }
.text-blue      { color: var(--accent-blue); }
.text-green, .text-success { color: var(--accent-green) !important; }
.text-red, .text-danger    { color: var(--accent-red) !important; }
.text-amber, .text-warning { color: var(--accent-amber) !important; }
.text-info                 { color: var(--accent-cyan) !important; }
.text-purple    { color: var(--accent-purple); }
.text-light, .text-white { color: var(--text-primary) !important; }
.text-dark { color: var(--text-primary) !important; }
.bg-dark, .bg-black { background-color: var(--bg-elevated) !important; }
.bg-light, .bg-white, .bg-body { background-color: var(--bg-surface) !important; }
.bg-success-subtle { background: var(--tint-green) !important; }
.bg-warning-subtle { background: var(--tint-amber) !important; }
.bg-primary-subtle { background: var(--tint-blue) !important; }
.bg-secondary-subtle { background: var(--tint-gray) !important; }
.border, .border-top, .border-bottom { border-color: var(--border) !important; }
.align-center { align-items: center; }
.divider { height: 1px; background: var(--border); margin: 1.1rem 0; }
.empty-state { text-align: center; padding: 2.5rem 1rem; color: var(--text-muted); }
.empty-state-icon { margin-bottom: 0.75rem; color: var(--text-muted); }
.empty-state :is(h2, h3) { color: var(--text-secondary); margin-bottom: 0.4rem; font-size: 1rem; justify-content: center; }

/* ---------- 5. Shared widgets ---------- */
.stat-grid, .stat-grid-v4, .stats-grid, .summary-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
.stat-card, .stat-card-v4, .sum-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 0.85rem 1rem;
  display: flex; flex-direction: column; gap: 0.25rem;
  position: relative;
}
.stat-card-icon, .sc4-icon, .stat-icon, .stat-icon-box {
  width: 28px; height: 28px;
  border-radius: var(--radius-md);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-elevated);
  color: var(--text-secondary);
  font-size: 0.9rem;
}
:is(.stat-card-icon, .sc4-icon, .stat-icon, .stat-icon-box).blue   { color: var(--accent-blue); }
:is(.stat-card-icon, .sc4-icon, .stat-icon, .stat-icon-box).green  { color: var(--accent-green); }
:is(.stat-card-icon, .sc4-icon, .stat-icon, .stat-icon-box).red    { color: var(--accent-red); }
:is(.stat-card-icon, .sc4-icon, .stat-icon, .stat-icon-box).amber  { color: var(--accent-amber); }
:is(.stat-card-icon, .sc4-icon, .stat-icon, .stat-icon-box).purple { color: var(--accent-purple); }
:is(.stat-card-icon, .sc4-icon, .stat-icon, .stat-icon-box).cyan   { color: var(--accent-cyan); }
.sc4-top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.stat-card-value, .sc4-value, .stat-value, .sum-card .val {
  font-size: 1.6rem; font-weight: 600; line-height: 1.1;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.stat-card-label, .sc4-label, .stat-label, .sum-card .lbl {
  font-size: 0.82rem; font-weight: 400; color: var(--text-muted);
  text-transform: none; letter-spacing: 0;
}
.sc4-trend { display: flex; align-items: center; gap: 0.3rem; font-size: 0.78rem; color: var(--text-muted); }
.sc4-trend.up { color: var(--accent-green); }
.sc4-trend.down { color: var(--accent-red); }
.sc4-sparkline { display: none; }

.usage-bar-wrap { display: flex; align-items: center; gap: 0.5rem; }
.usage-bar { flex: 1; height: 6px; min-width: 60px; background: var(--bg-elevated); border-radius: 3px; overflow: hidden; }
.usage-bar-fill { height: 100%; border-radius: 3px; background: var(--accent-blue); }
.usage-bar-fill.low    { background: var(--accent-blue); }
.usage-bar-fill.medium { background: var(--accent-amber); }
.usage-bar-fill.high   { background: var(--accent-red); }
.usage-pct { font-size: 0.8rem; color: var(--text-secondary); min-width: 34px; text-align: right; font-variant-numeric: tabular-nums; }

.host-name-cell { display: flex; align-items: center; gap: 0.5rem; font-weight: 500; color: var(--text-primary); }
.ip-mono, .load-avg { font-size: 0.82rem; color: var(--text-muted); }
.uptime-badge { font-size: 0.76rem; color: var(--text-muted); font-family: var(--font-mono); }
.load-avg .la-high { color: var(--accent-red); }
.load-avg .la-med  { color: var(--accent-amber); }

.temp-chip-v4 {
  display: inline-flex; flex-direction: column; align-items: center;
  padding: 0.45rem 0.7rem; min-width: 68px;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  color: var(--text-primary);
}
.temp-chip-v4 .tc-val { font-size: 1.05rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.temp-chip-v4 .tc-label { font-size: 0.72rem; color: var(--text-muted); }
.temp-chip-v4.warm .tc-val { color: var(--accent-amber); }
.temp-chip-v4.hot  .tc-val { color: var(--accent-orange); }
.temp-chip-v4.crit .tc-val { color: var(--accent-red); }

.dashboard-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
@media (max-width: 900px) { .dashboard-grid-2 { grid-template-columns: 1fr; } }
.section-divider { display: flex; align-items: center; gap: 0.75rem; margin: 1.5rem 0 0.75rem; }
.section-divider-label { font-size: 0.85rem; font-weight: 600; color: var(--text-secondary); white-space: nowrap; }
.section-divider-line { flex: 1; height: 1px; background: var(--border); }

/* Update toast */
.update-toast {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 1000;
  width: min(380px, calc(100vw - 2rem));
  display: flex; gap: 0.75rem;
  padding: 0.9rem 1rem;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  transform: translateY(calc(100% + 2rem)); opacity: 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.update-toast.show { transform: none; opacity: 1; }
.update-toast-icon { color: var(--accent-blue); padding-top: 0.1rem; }
.update-toast-body { flex: 1; min-width: 0; }
.update-toast-title { font-weight: 600; font-size: 0.92rem; }
.update-toast-msg { font-size: 0.85rem; color: var(--text-secondary); margin: 0.15rem 0 0.6rem; }
.update-toast-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.update-toast-close { background: none; border: 0; color: var(--text-muted); cursor: pointer; align-self: flex-start; padding: 0; }
.update-toast-close:hover { color: var(--text-primary); }

/* Login */
.login-wrapper { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1rem; background: var(--bg-base); }
.login-card {
  width: 100%; max-width: 360px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2rem 1.75rem 1.5rem;
}
.login-logo { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1.5rem; }
.login-logo-icon { width: 28px; height: 28px; border-radius: var(--radius-sm); background: var(--text-primary); color: var(--bg-surface); display: flex; align-items: center; justify-content: center; }
.login-title { font-size: 1.15rem; font-weight: 600; margin-bottom: 0.2rem; color: var(--text-primary); }
.login-subtitle { font-size: 0.88rem; color: var(--text-muted); margin-bottom: 1.25rem; }
.login-theme-btn { position: fixed; top: 1rem; right: 1rem; z-index: 200; }

/* Mobile chrome */
.hamburger {
  display: none;
  width: 32px; height: 32px;
  align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: transparent; color: var(--text-secondary); cursor: pointer;
}
.sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 99; }
.sidebar-overlay.visible { display: block; }
.mobile-nav-bar { display: none; }

@media (max-width: 900px) {
  .page-content { padding: 1.25rem 1rem 2.5rem; }
}
@media (max-width: 768px) {
  .sidebar { transform: translateX(-100%); box-shadow: var(--shadow-lg); }
  .sidebar.open { transform: none; }
  .main-content { margin-left: 0; }
  .hamburger { display: inline-flex; }
  .topbar { padding: 0 0.75rem; }
  .topbar-profile-name, .lang-select { display: none; }
  .page-content { padding: 1rem 1rem calc(4.5rem + env(safe-area-inset-bottom)); }
  .mobile-nav-bar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    background: var(--bg-surface); border-top: 1px solid var(--border);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .mobile-nav-item {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.15rem;
    padding: 0.45rem 0 0.4rem; font-size: 0.7rem; color: var(--text-muted);
  }
  .mobile-nav-item.active { color: var(--text-primary); }
  .mobile-nav-item:hover { text-decoration: none; color: var(--text-primary); }
  .stat-grid, .stat-grid-v4, .stats-grid, .summary-bar { grid-template-columns: repeat(2, 1fr); }
  .host-grid { grid-template-columns: 1fr; }
}

/* ---------- 6. Page-specific sections ---------- */
/* ============================================================
   FleetPilot v3 — Tags, Search/Filter, Groups, Rich Host Cards
   ============================================================ */

/* ---------- Tag Chips ---------- */
.tag-chip {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem; font-weight: 600;
  cursor: default; white-space: nowrap;
  transition: all var(--transition);
}
.tag-chip-server      { background: color-mix(in srgb, var(--accent-blue) 12%, transparent);  color: var(--accent-blue);   border: 1px solid color-mix(in srgb, var(--accent-blue) 30%, transparent); }
.tag-chip-pc          { background: color-mix(in srgb, var(--accent-green) 12%, transparent);  color: var(--accent-green);  border: 1px solid color-mix(in srgb, var(--accent-green) 30%, transparent); }
.tag-chip-vm          { background: color-mix(in srgb, var(--accent-purple) 12%, transparent);  color: var(--accent-purple); border: 1px solid color-mix(in srgb, var(--accent-purple) 30%, transparent); }
.tag-chip-container   { background: color-mix(in srgb, var(--accent-cyan) 12%, transparent);   color: var(--accent-cyan);   border: 1px solid color-mix(in srgb, var(--accent-cyan) 30%, transparent); }
.tag-chip-laptop      { background: color-mix(in srgb, var(--accent-amber) 12%, transparent);  color: var(--accent-amber);  border: 1px solid color-mix(in srgb, var(--accent-amber) 30%, transparent); }
.tag-chip-nas         { background: color-mix(in srgb, var(--accent-red) 12%, transparent);   color: var(--accent-red);    border: 1px solid color-mix(in srgb, var(--accent-red) 30%, transparent); }
.tag-chip-router      { background: color-mix(in srgb, var(--accent-green) 12%, transparent);  color: var(--accent-green);  border: 1px solid color-mix(in srgb, var(--accent-green) 30%, transparent); }
.tag-chip-default     { background: rgba(100,116,139,.12); color: var(--text-muted);    border: 1px solid rgba(100,116,139,.25); }
.tag-chip-remove {
  background: none; border: none; color: inherit; cursor: pointer;
  padding: 0; line-height: 1; font-size: 0.8rem; opacity: 0.7;
}
.tag-chip-remove:hover { opacity: 1; }

/* Tag input container */
.tag-input-wrapper {
  display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center;
  padding: 0.5rem 0.75rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  min-height: 44px;
  cursor: text;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.tag-input-wrapper:focus-within {
  border-color: var(--accent-blue);
  box-shadow:none;
}
.tag-input-inner {
  border: none; background: transparent; color: var(--text-primary);
  font-size: 0.9rem; font-family: inherit;
  outline: none; min-width: 120px; flex: 1;
  padding: 0;
}
.tag-input-inner::placeholder { color: var(--text-muted); }

/* Tag preset buttons */
.tag-presets { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.5rem; }
.tag-preset-btn {
  display: inline-flex; align-items: center; gap: 0.25rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem; font-weight: 500;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  cursor: pointer; transition: all var(--transition);
}
.tag-preset-btn:hover { background: color-mix(in srgb, var(--accent-blue) 10%, transparent); border-color: var(--accent-blue); color: var(--accent-blue); }
.tag-preset-btn.active { background: color-mix(in srgb, var(--accent-blue) 12%, transparent); border-color: var(--accent-blue); color: var(--accent-blue); }

/* ---------- Search & Filter Bar ---------- */
.search-filter-bar {
  display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center;
  padding: 0.9rem 1.1rem;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: 1.5rem;
}
.search-input-wrapper {
  display: flex; align-items: center; gap: 0.5rem;
  flex: 1; min-width: 200px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0.45rem 0.85rem;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.search-input-wrapper:focus-within {
  border-color: var(--accent-blue);
  box-shadow:none;
}
.search-input-wrapper .search-icon { color: var(--text-muted); font-size: 0.9rem; flex-shrink: 0; }
.search-input-wrapper input {
  border: none; background: transparent; color: var(--text-primary);
  font-size: 0.9rem; font-family: inherit; outline: none; width: 100%; padding: 0;
}
.filter-select {
  padding: 0.45rem 2rem 0.45rem 0.75rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: 0.85rem; font-family: inherit;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.6rem center;
  transition: all var(--transition);
}
.filter-select:focus { outline: none; border-color: var(--accent-blue); box-shadow:none; }
.filter-select:hover { border-color: color-mix(in srgb, var(--accent-blue) 30%, transparent); }
.filter-count {
  font-size: 0.8rem; color: var(--text-muted);
  padding: 0.35rem 0.7rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  white-space: nowrap;
}

/* ---------- Environment Badges ---------- */
.env-badge {
  display: inline-flex; align-items: center;
  padding: 0.18rem 0.55rem;
  border-radius: var(--radius-sm);
  font-size: 0.7rem; font-weight:600; letter-spacing: 0.05em;
  text-transform: uppercase;
}
.env-production  { background: color-mix(in srgb, var(--accent-red) 12%, transparent);   color: var(--accent-red);    border: 1px solid color-mix(in srgb, var(--accent-red) 25%, transparent); }
.env-staging     { background: color-mix(in srgb, var(--accent-amber) 12%, transparent);  color: var(--accent-amber);  border: 1px solid color-mix(in srgb, var(--accent-amber) 25%, transparent); }
.env-development { background: color-mix(in srgb, var(--accent-green) 12%, transparent);  color: var(--accent-green);  border: 1px solid color-mix(in srgb, var(--accent-green) 25%, transparent); }
.env-testing     { background: color-mix(in srgb, var(--accent-cyan) 12%, transparent);   color: var(--accent-cyan);   border: 1px solid color-mix(in srgb, var(--accent-cyan) 25%, transparent); }
.env-lab         { background: color-mix(in srgb, var(--accent-purple) 12%, transparent);  color: var(--accent-purple); border: 1px solid color-mix(in srgb, var(--accent-purple) 25%, transparent); }

/* ---------- Criticality Badges ---------- */
.crit-badge {
  display: inline-flex; align-items: center; gap: 0.25rem;
  padding: 0.18rem 0.55rem;
  border-radius: var(--radius-sm);
  font-size: 0.7rem; font-weight:600; letter-spacing: 0.04em;
  text-transform: uppercase;
}
.crit-critical { background: color-mix(in srgb, var(--accent-red) 12%, transparent);   color: var(--accent-red);    border: 1px solid color-mix(in srgb, var(--accent-red) 30%, transparent); }
.crit-high     { background: color-mix(in srgb, var(--accent-amber) 12%, transparent);  color: var(--accent-amber);  border: 1px solid color-mix(in srgb, var(--accent-amber) 30%, transparent); }
.crit-medium   { background: color-mix(in srgb, var(--accent-blue) 12%, transparent);  color: var(--accent-blue);   border: 1px solid color-mix(in srgb, var(--accent-blue) 30%, transparent); }
.crit-low      { background: rgba(100,116,139,.12); color: var(--text-muted);    border: 1px solid rgba(100,116,139,.25); }

/* ---------- Rich Host Card ---------- */
.host-card-v2 {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 0;
  overflow: hidden;
  transition: all var(--transition);
  display: flex; flex-direction: column;
}
.host-card-v2:hover {
  border-color: color-mix(in srgb, var(--accent-blue) 30%, transparent);
  box-shadow: var(--shadow-md);
  transform:none;
}
.host-card-v2.online  { border-left: 3px solid var(--accent-green); }
.host-card-v2.offline { border-left: 3px solid rgba(100,116,139,.4); }
.host-card-v2.crit-critical-card { border-left: 3px solid var(--accent-red); }

.hc-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 1rem 1.1rem 0.6rem;
  gap: 0.75rem;
}
.hc-title-row { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; min-width: 0; }
.hc-name {
  font-size: 1rem; font-weight:600; color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hc-badges { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; }

.hc-description {
  padding: 0 1.1rem 0.5rem;
  font-size: 0.83rem; color: var(--text-secondary); line-height: 1.5;
}

.hc-meta {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1rem;
  padding: 0 1.1rem 0.6rem;
  font-size: 0.8rem; color: var(--text-muted);
}
.hc-meta-item { display: flex; align-items: center; gap: 0.3rem; }
.hc-meta-item .icon { color: var(--text-muted); }

.hc-tags {
  display: flex; flex-wrap: wrap; gap: 0.3rem;
  padding: 0 1.1rem 0.75rem;
}

.hc-notes {
  margin: 0 1.1rem 0.75rem;
  padding: 0.5rem 0.75rem;
  background: var(--bg-elevated);
  border-left: 3px solid var(--accent-amber);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 0.8rem; color: var(--text-secondary); line-height: 1.5;
}

.hc-actions {
  display: flex; flex-wrap: wrap; gap: 0.4rem;
  padding: 0.75rem 1.1rem;
  border-top: 1px solid var(--border);
  background: var(--bg-elevated);
  margin-top: auto;
}

/* ---------- Group Section Header ---------- */
.group-header {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.6rem 0;
  margin: 1.5rem 0 0.75rem;
  border-bottom: 1px solid var(--border);
}
.group-header-title {
  font-size: 0.85rem; font-weight:600; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--text-muted);
}
.group-header-count {
  font-size: 0.75rem; font-weight: 600;
  padding: 0.15rem 0.5rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-muted);
}

/* ---------- Stat Cards (improved) ---------- */
.stat-grid-v2 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.stat-card-v2 {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.1rem 1.25rem;
  display: flex; flex-direction: column; gap: 0.5rem;
  transition: all var(--transition);
}
.stat-card-v2:hover { border-color: color-mix(in srgb, var(--accent-blue) 25%, transparent); box-shadow: var(--shadow-sm); }
.stat-card-v2-value { font-size: 1.75rem; font-weight:600; color: var(--text-primary); line-height: 1; }
.stat-card-v2-label { font-size: 0.78rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.stat-card-v2-sub   { font-size: 0.78rem; color: var(--text-muted); }
.stat-card-v2.blue  { border-top: 3px solid var(--accent-blue); }
.stat-card-v2.green { border-top: 3px solid var(--accent-green); }
.stat-card-v2.red   { border-top: 3px solid var(--accent-red); }
.stat-card-v2.amber { border-top: 3px solid var(--accent-amber); }
.stat-card-v2.purple{ border-top: 3px solid var(--accent-purple); }
.stat-card-v2.cyan  { border-top: 3px solid var(--accent-cyan); }

/* ---------- Form Section Divider ---------- */
.form-section {
  margin: 1.5rem 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 0.6rem;
}
.form-section-title {
  font-size: 0.8rem; font-weight:600; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--text-muted);
}

/* ---------- Form Grid ---------- */
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; }
@media (max-width: 640px) {
  .form-grid-2, .form-grid-3 { grid-template-columns: 1fr; }
}

/* ---------- Notes Textarea ---------- */
.notes-textarea {
  resize: vertical; min-height: 80px; font-size: 0.875rem;
  font-family: inherit; line-height: 1.5;
}

/* ---------- Collapsible Section ---------- */
.collapsible-toggle {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; background: none; border: none; cursor: pointer;
  padding: 0.6rem 0; color: var(--text-secondary);
  font-size: 0.875rem; font-weight: 600; font-family: inherit;
  transition: color var(--transition);
}
.collapsible-toggle:hover { color: var(--text-primary); }
.collapsible-toggle .arrow { transition: transform var(--transition); font-size: 0.75rem; }
.collapsible-toggle.open .arrow { transform: rotate(180deg); }
.collapsible-body { display: none; padding-top: 0.75rem; }
.collapsible-body.open { display: block; }

/* ---------- Host Card No-Result ---------- */
.no-results-msg {
  text-align: center; padding: 3rem 1rem;
  color: var(--text-muted); display: none;
}
.no-results-msg.visible { display: block; }
.no-results-msg .icon { margin-bottom: 0.75rem; opacity: 0.6; }

/* ---------- Quick-Notes Inline Edit ---------- */
.inline-note-form { display: flex; gap: 0.5rem; align-items: flex-start; margin-top: 0.5rem; }
.inline-note-form textarea {
  flex: 1; min-height: 60px; font-size: 0.82rem; resize: vertical;
}

/* ---------- View Toggle (Grid / List) ---------- */
.view-toggle { display: flex; gap: 0.25rem; }
.view-toggle-btn {
  padding: 0.35rem 0.6rem;
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: var(--radius-sm); cursor: pointer; color: var(--text-muted);
  font-size: 0.85rem; transition: all var(--transition);
}
.view-toggle-btn.active, .view-toggle-btn:hover {
  background: color-mix(in srgb, var(--accent-blue) 10%, transparent); border-color: var(--accent-blue); color: var(--accent-blue);
}

/* ---------- List View for Hosts ---------- */
.host-list-view { display: flex; flex-direction: column; gap: 0.5rem; }
.host-list-item {
  display: flex; align-items: center; gap: 1rem;
  padding: 0.75rem 1.1rem;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: all var(--transition);
}
.host-list-item:hover { border-color: color-mix(in srgb, var(--accent-blue) 25%, transparent); background: var(--bg-elevated); }
.host-list-item.online  { border-left: 3px solid var(--accent-green); }
.host-list-item.offline { border-left: 3px solid rgba(100,116,139,.3); }
.hli-name { font-weight:600; font-size: 0.9rem; min-width: 120px; }
.hli-meta { flex: 1; display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; font-size: 0.8rem; color: var(--text-muted); }
.hli-tags { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.hli-actions { display: flex; gap: 0.35rem; flex-shrink: 0; }


/* ── Scanner Page ────────────────────────────────────────── */
.scanner-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1rem;
}
.scanner-input-row {
  display: flex; gap: 0.75rem; align-items: flex-end;
  flex-wrap: wrap;
}
.scanner-input-row .form-group { flex: 1; min-width: 180px; margin-bottom: 0; }
.scan-progress {
  display: none;
  margin-top: 1rem;
  padding: 1rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.scan-progress.active { display: block; }
.scan-progress-bar-wrap {
  background: var(--bg-base);
  border-radius: 99px;
  height: 8px;
  overflow: hidden;
  margin: 0.6rem 0;
}
.scan-progress-bar {
  height: 100%;
  background: var(--accent-blue);
  border-radius: 99px;
  width: 0%;
  transition: width 0.4s ease;
}
.scan-results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.75rem;
  margin-top: 1rem;
}
.scan-device-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0.9rem 1rem;
  transition: all var(--transition);
  position: relative;
}
.scan-device-card:hover { border-color: color-mix(in srgb, var(--accent-blue) 35%, transparent); background: var(--bg-elevated); }
.scan-device-card.already-added { border-color: color-mix(in srgb, var(--accent-green) 30%, transparent); }
.scan-device-card.already-added::after {
  content: '✓ Added';
  position: absolute; top: 0.6rem; right: 0.75rem;
  font-size: 0.7rem; font-weight:600;
  color: var(--accent-green);
  background: color-mix(in srgb, var(--accent-green) 10%, transparent);
  padding: 0.15rem 0.5rem;
  border-radius: 99px;
}
.scan-device-ip {
  font-size: 1rem; font-weight:600; color: var(--text-primary);
  font-family:var(--font-mono);
}
.scan-device-meta {
  font-size: 0.78rem; color: var(--text-muted);
  margin: 0.25rem 0 0.6rem;
  display: flex; flex-direction: column; gap: 0.15rem;
}
.scan-device-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.scan-status-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-right: 0.3rem;
  vertical-align: middle;
}
.scan-status-dot.ssh  { background: var(--accent-green); }
.scan-status-dot.ping { background: var(--accent-amber); }
.scan-status-dot.off  { background: var(--text-muted); }

/* ── Quick-Add Modal ─────────────────────────────────────── */
.fp-modal-backdrop {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.6);
  z-index: 1000;
  
  align-items: center; justify-content: center;
}
.fp-modal-backdrop.open { display: flex; }
.fp-modal {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 1.5rem;
  width: 100%; max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
  animation:none;
}
@keyframes fp-modal-in {
  from { transform: scale(0.9) translateY(20px); opacity: 0; }
  to   { transform: scale(1) translateY(0); opacity: 1; }
}
.fp-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
}
.fp-modal-header :is(h2, h3) { font-size: 1rem; font-weight:600; }
.fp-modal-close {
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); font-size: 1.2rem;
  padding: 0.2rem; line-height: 1;
  transition: color var(--transition);
}
.fp-modal-close:hover { color: var(--text-primary); }


/* Page-specific responsive rules */
@media (max-width: 768px) {
  .scan-results-grid { grid-template-columns: 1fr; }
  .form-grid-2, .form-grid-3 { grid-template-columns: 1fr; }
  .search-filter-bar { flex-direction: column; gap: 0.5rem; }
  .search-filter-bar select, .search-filter-bar input { width: 100%; }
  .search-filter-bar .view-toggle { align-self: flex-end; }
  .host-card-v2 .hc-actions { flex-wrap: wrap; }
  .host-card-v2 .hc-actions .btn { flex: 1; min-width: 80px; }
  .fp-modal { max-width: 100%; border-radius: var(--radius-lg) var(--radius-lg) 0 0; margin-top: auto; }
  .fp-modal-backdrop { align-items: flex-end; }
  .scanner-input-row { flex-direction: column; }
  .scanner-input-row .form-group { min-width: 100%; }
}

/* ============================================================
   FleetPilot — Module Shared Styles (HW Monitor, Fan, etc.)
   ============================================================ */
.module-toolbar{display:flex;align-items:center;gap:10px;margin-bottom:1.5rem;flex-wrap:wrap;}
.module-toolbar h1{font-size:1.3rem;font-weight:600;flex:1;color:var(--text-primary);}
.device-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:16px;}
.device-card{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;transition:all var(--transition);position:relative;}
.device-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--accent-blue);opacity:0;transition:opacity .3s;}
.device-card:hover{border-color:color-mix(in srgb, var(--accent-blue) 30%, transparent);transform:none;box-shadow:var(--shadow-md);}
.device-card.online{border-color:color-mix(in srgb, var(--accent-green) 20%, transparent);}
.device-card.online::before{background:var(--accent-green);}
.device-card.offline{border-color:color-mix(in srgb, var(--accent-red) 20%, transparent);opacity:.85;}
.device-card.offline::before{background:var(--accent-red);opacity:1;}
.device-card.warning{border-color:color-mix(in srgb, var(--accent-amber) 25%, transparent);}
.device-card.warning::before{background:var(--accent-amber);opacity:1;}
.device-card.error{border-color:color-mix(in srgb, var(--accent-red) 40%, transparent);box-shadow:none;}
.device-card.error::before{background:var(--accent-red);opacity:1;animation:none;}
@keyframes fp-pulse-bar{0%,100%{opacity:.5}50%{opacity:1}}
.device-card-head{padding:16px 18px 12px;display:flex;align-items:flex-start;justify-content:space-between;border-bottom:1px solid var(--border);}
.device-card-head h2{font-size:1rem;font-weight:600;letter-spacing:-.3px;color:var(--text-primary);}
.device-card-head .ip-row{display:flex;align-items:center;gap:8px;margin-top:3px;}
.device-card-head .ip{font-size:.72rem;color:var(--text-muted);font-family:var(--font-mono);}
.device-card-head .uptime-tag{font-size:.68rem;color:var(--text-muted);background:var(--bg-elevated);padding:1px 6px;border-radius:4px;}
@keyframes fp-pulse-badge{0%,100%{opacity:.8}50%{opacity:1}}
.device-card-body{padding:14px 18px;}
.metrics-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px;}
.metric{display:flex;flex-direction:column;gap:3px;}
.metric .m-label{font-size:.65rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;font-weight:500;}
.metric .m-val{font-size:.9rem;font-weight:600;line-height:1.2;}
.metric .m-bar{height:3px;background:var(--border);border-radius:2px;overflow:hidden;margin-top:3px;}
.metric .m-fill{height:100%;border-radius:2px;transition:width .6s cubic-bezier(.4,0,.2,1);}
.m-green{color:var(--accent-green);}.m-yellow{color:var(--accent-amber);}.m-red{color:var(--accent-red);}
.m-blue{color:var(--accent-blue);}.m-orange{color:var(--accent-orange);}.m-purple{color:var(--accent-purple);}.m-cyan{color:var(--accent-cyan);}.m-muted{color:var(--text-secondary);}
.card-divider{height:1px;background:var(--border);margin:10px 0;}
.fans-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px;}
.fan-chip{display:inline-flex;align-items:center;gap:4px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:6px;padding:3px 8px;font-size:.72rem;}
.fan-chip .fan-icon{font-size:.8rem;animation:none;}
.fan-chip .fan-rpm{font-weight:600;color:var(--accent-cyan);}
@keyframes fp-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.pump-chip{display:inline-flex;align-items:center;gap:4px;background:color-mix(in srgb, var(--accent-blue) 10%, transparent);border:1px solid color-mix(in srgb, var(--accent-blue) 30%, transparent);border-radius:6px;padding:3px 8px;font-size:.72rem;color:var(--accent-blue);}
.pump-chip .pump-rpm{font-weight:600;}
.error-banner{background:color-mix(in srgb, var(--accent-red) 40%, transparent);border:1px solid color-mix(in srgb, var(--accent-red) 40%, transparent);border-radius:var(--radius-md);padding:10px 14px;margin-top:10px;display:flex;align-items:flex-start;gap:10px;}
.error-banner .err-icon{font-size:1.1rem;flex-shrink:0;margin-top:1px;}
.error-banner .err-text{flex:1;font-size:.78rem;color:var(--accent-red);line-height:1.5;}
.error-banner .err-msg{font-weight:600;color:var(--accent-red);font-size:.8rem;margin-bottom:2px;}
.ack-btn{padding:5px 12px;border-radius:7px;border:1px solid color-mix(in srgb, var(--accent-red) 50%, transparent);background:color-mix(in srgb, var(--accent-red) 12%, transparent);color:var(--accent-red);cursor:pointer;font-size:.72rem;font-weight:600;transition:all var(--transition);flex-shrink:0;}
.ack-btn:hover{background:color-mix(in srgb, var(--accent-red) 12%, transparent);}
.stress-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px;}
.phase-tag{font-size:.7rem;padding:2px 10px;border-radius:6px;background:color-mix(in srgb, var(--accent-blue) 12%, transparent);color:var(--accent-blue);border:1px solid color-mix(in srgb, var(--accent-blue) 20%, transparent);font-weight:500;}
.running-dot{width:7px;height:7px;border-radius:50%;background:var(--accent-green);animation:fp-blink 1.5s infinite;}
@keyframes fp-blink{0%,100%{opacity:1}50%{opacity:.3}}
.device-card-actions{padding:10px 18px;border-top:1px solid var(--border);display:flex;gap:6px;flex-wrap:wrap;background:rgba(0,0,0,.1);}
.chart-card{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:18px;}
.chart-card :is(h2,h3){font-size:.75rem;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.06em;margin-bottom:14px;}
.chart-wrap{position:relative;height:160px;}
.charts-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;}
@media(max-width:900px){.charts-grid{grid-template-columns:1fr;}}
.fp-panel{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;}
.fp-panel-head{padding:14px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;}
.fp-panel-head :is(h2,h3){font-size:.8rem;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.06em;margin:0;}
.fp-panel-body{padding:14px 18px;}
.log-box{background:var(--pre-bg);font-family:var(--font-mono);font-size:.7rem;line-height:1.7;height:280px;overflow-y:auto;padding:12px;white-space:pre-wrap;word-break:break-all;border-radius:0 0 var(--radius-lg) var(--radius-lg);}
.log-info{color:var(--text-muted);}.log-mon{color:var(--accent-blue);}.log-test{color:var(--accent-purple);}
.log-warn{color:var(--accent-amber);}.log-crit{color:var(--accent-red);font-weight:bold;}.log-ok{color:var(--accent-green);}
.pwm-slider{-webkit-appearance:none;width:100%;height:5px;border-radius:3px;background:var(--border);outline:none;cursor:pointer;}
.pwm-slider::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--accent-blue);cursor:pointer;transition:transform var(--transition);}
.pwm-slider::-webkit-slider-thumb:hover{transform:none;}
.rpm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px;margin-bottom:20px;}
.rpm-card{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-md);padding:14px;text-align:center;transition:border-color var(--transition);}
.rpm-card:hover{border-color:color-mix(in srgb, var(--accent-blue) 30%, transparent);}
.rpm-card .rc-icon{font-size:1.4rem;margin-bottom:6px;display:block;animation:none;}
.rpm-card .rc-rpm{font-size:1.4rem;font-weight:600;color:var(--accent-cyan);line-height:1;}
.rpm-card .rc-unit{font-size:.65rem;color:var(--text-muted);margin-top:2px;}
.rpm-card .rc-name{font-size:.68rem;color:var(--text-secondary);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.rpm-card.is-pump{border-color:color-mix(in srgb, var(--accent-blue) 30%, transparent);background:color-mix(in srgb, var(--accent-blue) 6%, transparent);}
.rpm-card.is-pump .rc-rpm{color:var(--accent-blue);}
.rpm-card.is-pump .rc-icon{animation:none;}
.server-tabs{display:flex;gap:8px;margin-bottom:1.5rem;flex-wrap:wrap;}
.s-tab{padding:8px 18px;border-radius:var(--radius-md);border:1px solid var(--border);cursor:pointer;font-size:.82rem;font-weight:500;background:var(--bg-surface);color:var(--text-secondary);transition:all var(--transition);}
.s-tab:hover{border-color:color-mix(in srgb, var(--accent-blue) 30%, transparent);color:var(--text-primary);}
.s-tab.active{background:color-mix(in srgb, var(--accent-blue) 10%, transparent);border-color:var(--accent-blue);color:var(--accent-blue);}
.s-tab .dot{width:7px;height:7px;border-radius:50%;display:inline-block;margin-right:6px;}
.dot-green{background:var(--accent-green);}.dot-red{background:var(--accent-red);}.dot-gray{background:var(--text-muted);}
.dep-list{display:flex;flex-direction:column;gap:8px;}
.dep-item{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-md);transition:border-color var(--transition);}
.dep-item:hover{border-color:color-mix(in srgb, var(--accent-blue) 30%, transparent);}
.dep-left{display:flex;align-items:center;gap:10px;}
.dep-icon{font-size:1.1rem;width:24px;text-align:center;}
.dep-name{font-size:.85rem;font-weight:600;color:var(--text-primary);}
.dep-desc{font-size:.72rem;color:var(--text-secondary);margin-top:1px;}
.dep-status{font-size:.72rem;padding:3px 10px;border-radius:999px;font-weight:600;white-space:nowrap;}
.ds-ok{background:color-mix(in srgb, var(--accent-green) 12%, transparent);color:var(--accent-green);border:1px solid color-mix(in srgb, var(--accent-green) 25%, transparent);}
.ds-missing{background:color-mix(in srgb, var(--accent-red) 10%, transparent);color:var(--accent-red);border:1px solid color-mix(in srgb, var(--accent-red) 20%, transparent);}
.ds-unknown{background:rgba(100,116,139,.1);color:var(--text-secondary);border:1px solid var(--border);}
.setup-card{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;}
.setup-card-head{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;}
.setup-card-head h2{font-size:.9rem;font-weight:600;display:flex;align-items:center;gap:8px;}
.setup-card-body{padding:18px 20px;}
.log-output{background:var(--pre-bg);border:1px solid var(--border);border-radius:var(--radius-md);padding:14px;font-family:var(--font-mono);font-size:.72rem;line-height:1.7;height:220px;overflow-y:auto;white-space:pre-wrap;word-break:break-all;color:var(--text-secondary);margin-top:16px;}
.log-output .log-ok{color:var(--accent-green);}.log-output .log-err{color:var(--accent-red);}.log-output .log-info{color:var(--accent-blue);}.log-output .log-warn{color:var(--accent-amber);}
.pwm-info{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-md);padding:14px;}
.pwm-channel{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--border);}
.pwm-channel:last-child{border-bottom:none;}
.pwm-name{font-size:.82rem;font-weight:600;color:var(--text-primary);}
.pwm-path{font-size:.68rem;color:var(--text-muted);font-family:var(--font-mono);}
.pwm-val{font-size:.82rem;color:var(--accent-cyan);font-weight:600;}
.alert-list{display:flex;flex-direction:column;gap:6px;}
.alert-item{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 12px;font-size:.78rem;}
.alert-item .ai-time{font-size:.68rem;color:var(--text-muted);margin-bottom:3px;}
.alert-item .ai-msg{color:var(--text-secondary);}
.alert-item.acked{opacity:.5;}
.alert-item .ai-ack{font-size:.68rem;color:var(--accent-green);margin-top:3px;}
.offline-panel{background:color-mix(in srgb, var(--accent-red) 6%, transparent);border:1px solid color-mix(in srgb, var(--accent-red) 20%, transparent);border-radius:var(--radius-md);padding:16px;margin-bottom:16px;}
.offline-panel .offline-title{font-size:.78rem;font-weight:600;color:var(--accent-red);text-transform:uppercase;letter-spacing:.05em;margin-bottom:10px;}
.offline-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;}
.offline-item{background:rgba(0,0,0,.2);border-radius:var(--radius-sm);padding:8px 10px;}
.offline-item .oi-label{font-size:.65rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em;}
.offline-item .oi-val{font-size:.9rem;font-weight:600;margin-top:2px;}
.offline-log-preview{margin-top:10px;background:rgba(0,0,0,.3);border-radius:var(--radius-sm);padding:8px;font-family:var(--font-mono);font-size:.68rem;color:var(--text-secondary);max-height:80px;overflow:hidden;line-height:1.6;}
.cluster-pill{font-size:.72rem;padding:4px 14px;border-radius:999px;background:color-mix(in srgb, var(--accent-blue) 10%, transparent);border:1px solid color-mix(in srgb, var(--accent-blue) 30%, transparent);color:var(--accent-blue);font-weight:600;}
.offline-data{background:color-mix(in srgb, var(--accent-red) 6%, transparent);border:1px solid color-mix(in srgb, var(--accent-red) 15%, transparent);border-radius:var(--radius-md);padding:10px 12px;margin-top:10px;}
.offline-data .od-title{font-size:.68rem;color:var(--accent-red);font-weight:600;text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px;}
.offline-data .od-row{display:flex;gap:16px;flex-wrap:wrap;}
.offline-data .od-item{font-size:.78rem;color:var(--text-secondary);}
.offline-data .od-item span{color:var(--text-primary);font-weight:600;}
.offline-log{margin-top:8px;background:rgba(0,0,0,.3);border-radius:6px;padding:6px 8px;font-family:var(--font-mono);font-size:.67rem;color:var(--text-secondary);max-height:60px;overflow:hidden;line-height:1.5;}



/* Inside dense rows, destructive buttons stay quiet until hovered. */
td .btn-danger, .table .btn-danger, .hc-actions .btn-danger, .host-card-actions .btn-danger {
  background: var(--bg-surface); color: var(--accent-red); border-color: var(--border-strong);
}
td .btn-danger:hover, .table .btn-danger:hover, .hc-actions .btn-danger:hover, .host-card-actions .btn-danger:hover {
  background: var(--tint-red); color: var(--accent-red); border-color: color-mix(in srgb, var(--accent-red) 45%, transparent);
}

/* File inputs */
input[type="file"] {
  font: inherit; font-size: 0.86rem; color: var(--text-secondary);
}
input[type="file"]::file-selector-button {
  font: inherit; font-size: 0.86rem; margin-right: 0.6rem;
  padding: 0.3rem 0.75rem; border-radius: var(--radius-md);
  border: 1px solid var(--border-strong); background: var(--bg-surface); color: var(--text-primary);
  cursor: pointer;
}
input[type="file"]::file-selector-button:hover { background: var(--bg-hover); }

/* One surface for every card-like container, whatever the page calls it. */
.page-content :is(.workspace-card, .prod-card, .proxy-card, .ff-card, .hw-section, .setup-card, .srv-card,
  .panel, .chart-card, .validation-card, .plugin-card, .task-card, .device-card, .scanner-card,
  .storage-stat, .sum-card, .stat-card, .stat-card-v2, .stat-card-v4, .service-hub, .card-v4) {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: none;
  transform: none;
}
.page-content :is(.workspace-card-header, .setup-card-head, .panel-head, .hw-section-header, .card-head) {
  border-bottom: 1px solid var(--border);
}
.page-content :is(.workspace-card-header h2, .setup-card-head h2, .hw-section-title, .chart-card :is(h2,h3), .panel-head :is(h2,h3)) {
  font-size: 0.95rem; font-weight: 600; color: var(--text-primary); margin: 0;
}

/* ============================================================
   Accessibility
   Settings live on <html> (data-text, data-contrast, data-motion,
   data-links, data-spacing, data-font) and are chosen per user under
   Account → Accessibility.
   ============================================================ */
.skip-link {
  position: absolute; left: 0.75rem; top: -3rem; z-index: 2000;
  padding: 0.5rem 0.9rem; border-radius: var(--radius-md);
  background: var(--accent-blue); color: var(--on-accent); font-weight: 600;
}
.skip-link:focus { top: 0.75rem; color: var(--on-accent); text-decoration: none; }
main:focus { outline: none; }

/* Sidebar group headings are buttons */
button.sidebar-section-label {
  width: 100%; border: 0; background: transparent; font: inherit; font-size: 0.75rem;
  text-align: left; border-radius: var(--radius-sm);
}
.sidebar-nav-group.collapsed { visibility: hidden; }

/* Keyboard focus must always be visible */
:focus-visible, .btn:focus-visible, .form-control:focus-visible, .sidebar-link:focus-visible {
  outline: 3px solid var(--border-focus); outline-offset: 2px; box-shadow: none;
}

/* Easy-language explanation under the page title */
.easy-help {
  display: block; margin: -0.5rem 0 1.25rem; padding: 0.85rem 1rem;
  background: var(--bg-surface); border: 1px solid var(--border); border-left: 4px solid var(--accent-blue);
  border-radius: var(--radius-md); max-width: 80ch;
}
.easy-help-title { display: flex; align-items: center; gap: 0.4rem; font-size: 0.95rem; margin: 0 0 0.35rem; }
.easy-help p { margin: 0; color: var(--text-primary); font-size: 1rem; line-height: 1.65; }

/* Text size */
html[data-text="large"]  { font-size: 17px; }
html[data-text="larger"] { font-size: 19.5px; }
html[data-text="large"] { --sidebar-w: 262px; }
html[data-text="larger"] { --sidebar-w: 292px; }

/* Readable font (Atkinson Hyperlegible is loaded only when chosen) */
html[data-font="readable"] { --font-sans: 'Atkinson Hyperlegible', system-ui, sans-serif; }

/* Text spacing (WCAG 1.4.12) */
html[data-spacing="wide"] body { line-height: 1.8; letter-spacing: 0.03em; word-spacing: 0.12em; }
html[data-spacing="wide"] p, html[data-spacing="wide"] li { margin-bottom: 1em; }

/* Underlined links */
html[data-links="on"] .page-content a:not(.btn):not(.sidebar-link),
html[data-links="on"] .login-card a { text-decoration: underline; text-underline-offset: 2px; }

/* Reduced motion: the user's setting or the operating system's */
html[data-motion="reduce"] *, html[data-motion="reduce"] *::before, html[data-motion="reduce"] *::after {
  animation: none !important; transition: none !important; scroll-behavior: auto !important;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* High contrast */
html[data-contrast="high"][data-theme="dark"] {
  --bg-base: #000000; --bg-surface: #0b0b0b; --bg-elevated: #161616; --bg-hover: #262626;
  --border: #9aa0a6; --border-strong: #c8ccd1; --border-focus: #ffd400;
  --text-primary: #ffffff; --text-secondary: #f0f0f0; --text-muted: #d6d6d6;
  --accent-blue: #8fb6ff; --accent-blue-h: #b3ccff; --accent-green: #6fe0a3; --accent-red: #ff8a84;
  --accent-amber: #ffd166; --accent-purple: #c9bcff; --accent-cyan: #7fe3ef;
}
html[data-contrast="high"][data-theme="light"] {
  --bg-base: #ffffff; --bg-surface: #ffffff; --bg-elevated: #f2f2f2; --bg-hover: #e6e6e6;
  --border: #4d4d4d; --border-strong: #1f1f1f; --border-focus: #0047b3;
  --text-primary: #000000; --text-secondary: #1a1a1a; --text-muted: #333333;
  --accent-blue: #0047b3; --accent-blue-h: #00337f; --accent-green: #00662e; --accent-red: #a3000b;
  --accent-amber: #7a4b00; --accent-purple: #4b2fa0; --accent-cyan: #005c66;
}
html[data-contrast="high"] .page-content a:not(.btn) { text-decoration: underline; }
html[data-contrast="high"] .badge, html[data-contrast="high"] .status-pill { border: 1px solid currentColor; }
html[data-contrast="high"] .sidebar-link.active { box-shadow: inset 4px 0 0 var(--accent-blue); }

/* Settings page */
.a11y-option { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.85rem 0; border-bottom: 1px solid var(--border); }
.a11y-option:last-child { border-bottom: 0; }
.a11y-option input[type="checkbox"] { width: 1.25rem; height: 1.25rem; margin-top: 0.15rem; flex-shrink: 0; }
.a11y-option label { font-weight: 600; font-size: 0.95rem; }
.a11y-option .form-hint { margin-top: 0.15rem; }
.a11y-preview { padding: 1rem; border: 1px dashed var(--border-strong); border-radius: var(--radius-md); }

/* Links inside running text are underlined so they don't rely on color (WCAG 1.4.1). */
:is(p, li, td, dd, .text-muted, .form-hint, .proxy-note, .alert, .easy-help) a:not(.btn) {
  text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px;
}

/* Inside pages the visual size of a heading does not depend on its level:
   the page title is the only large heading, sections look alike. */
.page-content h2 { font-size: 1.08rem; }
.page-content h3 { font-size: 1rem; }
.page-content :is(h4, h5, h6) { font-size: 0.93rem; }
.page-content .page-title { font-size: 1.4rem; }
.modal-title { font-size: 1.05rem; }

/* Bootstrap's colored card headers become neutral so their text keeps enough contrast. */
.card-header[class*="bg-"] { background: var(--bg-elevated) !important; color: var(--text-primary) !important; }
.card-header[class*="bg-"] :is(h2, h3, h4, h5) { color: var(--text-primary); }
button.mobile-nav-item { border: 0; background: transparent; font: inherit; font-size: 0.7rem; cursor: pointer; }