/* =====================================================================
   ARCIVÉO — Security Monitor  ·  Design System
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&family=Chakra+Petch:wght@600;700&display=swap');

/* ── Tokens ─────────────────────────────────────────────────────────── */
:root {
  --c-bg:        #070e13;   /* matches landing */
  --c-s0:        #05090d;   /* sidebar */
  --c-s1:        #0d1820;   /* card */
  --c-s2:        #152330;   /* card hover / elevated */
  --c-s3:        #16242e;   /* input bg */

  --c-b0:        rgba(255,255,255,.08);  /* default border */
  --c-b1:        rgba(255,255,255,.15);  /* hover border */
  --c-b2:        rgba(45,212,191,.3); /* glow border */

  --c-t1:        #fafafa;   /* primary text */
  --c-t2:        #a1a1aa;   /* secondary */
  --c-t3:        #71717a;   /* dim */

  --c-blue:      #2dd4bf;   /* primary accent = landing teal */
  --c-blue-hi:   #5eead4;
  --c-blue-glow: rgba(45,212,191,.16);

  --c-green:     #34d399;
  --c-green-hi:  #6ee7b7;
  --c-green-glow:rgba(52,211,153,.14);

  --c-red:       #f06464;
  --c-red-hi:    #f89090;
  --c-red-glow:  rgba(240,100,100,.14);

  --c-amber:     #f0a030;
  --c-amber-hi:  #f8c060;
  --c-amber-glow:rgba(240,160,48,.14);

  --nav-w:     244px;
  --topbar-h:  58px;
  --r:         10px;
  --r-sm:       6px;
  --ease:      cubic-bezier(.4,0,.2,1);
}

[data-theme="light"] {
  --c-bg:      #eef2f8;
  --c-s0:      #dde4ee;
  --c-s1:      #ffffff;
  --c-s2:      #f0f5fc;
  --c-s3:      #eaf0f8;
  --c-b0:      #ccd8e8;
  --c-b1:      #a8bdd0;
  --c-b2:      rgba(37,99,235,.3);
  --c-t1:      #0c1a2e;
  --c-t2:      #3a5a88;
  --c-t3:      #5a7a9a;
  --c-blue:    #0d9488;
  --c-blue-hi: #14b8a6;
  --c-blue-glow:rgba(13,148,136,.12);
  --c-green:    #0d9488;
  --c-green-hi: #14b8a6;
  --c-green-glow:rgba(13,148,136,.1);
  --c-red:      #dc2626;
  --c-red-hi:   #ef4444;
  --c-red-glow: rgba(220,38,38,.1);
  --c-amber:    #d97706;
  --c-amber-hi: #f59e0b;
  --c-amber-glow:rgba(217,119,6,.1);
}

/* ── Reset ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { height: 100%; }
body {
  min-height: 100%;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  background: var(--c-bg);
  color: var(--c-t1);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--c-blue-hi); text-decoration: none; }
a:hover { color: var(--c-green-hi); }

/* ── Sidebar light theme ────────────────────────────────────────────── */
[data-theme="light"] .sidebar {
  background: linear-gradient(180deg, #0d1820 0%, #05090d 100%);
  border-inline-end: 1px solid rgba(255,255,255,.05);
  box-shadow: 4px 0 32px rgba(0,0,0,.45);
}
[data-theme="light"] .sidebar-brand {
  background: linear-gradient(160deg, rgba(45,212,191,.12) 0%, transparent 60%);
}
[data-theme="light"] .sidebar-brand::after {
  background: linear-gradient(90deg, rgba(45,212,191,.4) 0%, transparent 80%);
}
[data-theme="light"] .sb-logo {
  background: linear-gradient(145deg, rgba(45,212,191,.3) 0%, rgba(45,212,191,.08) 100%);
  border-color: rgba(45,212,191,.45);
  box-shadow: 0 0 22px rgba(45,212,191,.2), inset 0 1px 0 rgba(255,255,255,.07);
}
[data-theme="light"] .sb-logo .bi {
  color: #5eead4;
  filter: drop-shadow(0 0 8px rgba(45,212,191,.8));
}
[data-theme="light"] .sb-name strong {
  background: linear-gradient(90deg, #5eead4 0%, #e2f7f2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
[data-theme="light"] .sb-name span { color: #a1a1aa; }
[data-theme="light"] .sb-server {
  background: rgba(0,0,0,.2);
  border-color: rgba(255,255,255,.08);
}
[data-theme="light"] .sb-server-host { color: #fafafa; }
[data-theme="light"] .sb-server-date { color: #a1a1aa; }
[data-theme="light"] .sb-section-label {
  color: #5a7a9a;
}
[data-theme="light"] .sb-section-label::after {
  background: linear-gradient(90deg, rgba(45,212,191,.2) 0%, transparent 100%);
}
[data-theme="light"] .sb-item a {
  color: #a1a1aa;
}
[data-theme="light"] .sb-item a:hover {
  background: rgba(45,212,191,.1);
  color: #fafafa;
}
[data-theme="light"] .sb-item a.active {
  background: linear-gradient(90deg, rgba(45,212,191,.2) 0%, rgba(45,212,191,.04) 100%);
  color: #fff;
  box-shadow: inset 3px 0 0 #2dd4bf;
}
[data-theme="light"] .sb-item a.active .bi {
  color: #5eead4;
  filter: drop-shadow(0 0 6px rgba(45,212,191,.7));
}
[data-theme="light"] .sb-footer::before {
  background: linear-gradient(90deg, rgba(45,212,191,.2) 0%, transparent 100%);
}
[data-theme="light"] .sb-footer a { color: #a1a1aa; }
[data-theme="light"] .sb-footer a:not(.logout):hover { background: rgba(45,212,191,.1); color: #fafafa; }
[data-theme="light"] .sb-footer a.logout:hover { background: rgba(240,100,100,.15); color: #fca5a5; }

/* ── Legacy aliases (backward compat for inline styles in other pages) ─ */
:root {
    --accent:      var(--c-blue);
    --accent-glow: var(--c-blue-glow);
    --bg:          var(--c-bg);
    --bg-card:     var(--c-s1);
    --bg-card-hover:var(--c-s2);
    --border:      var(--c-b0);
    --text:        var(--c-t1);
    --text-muted:  var(--c-t2);
    --success:     var(--c-green);
    --danger:      var(--c-red);
    --warning:     var(--c-amber);
    --info:        var(--c-blue-hi);
}

/* ── Rainbow top stripe ─────────────────────────────────────────────── */
body::before {
  content: '';
  position: fixed;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg,
    var(--c-blue) 0%, #2dd4bf 25%,
    var(--c-green) 50%, #5eead4 75%,
    var(--c-amber) 100%);
  z-index: 9999;
  pointer-events: none;
}

/* ── Bootstrap overrides ────────────────────────────────────────────── */
.bg-success { background-color: var(--c-green)  !important; }
.bg-danger  { background-color: var(--c-red)    !important; }
.bg-warning { background-color: var(--c-amber)  !important; }
.bg-primary { background-color: var(--c-blue)   !important; }

.badge.bg-success  { background: rgba(34,211,164,.14) !important; color: var(--c-green-hi)  !important; border: 1px solid rgba(34,211,164,.28) !important; }
.badge.bg-danger   { background: rgba(240,100,100,.14)!important; color: var(--c-red-hi)    !important; border: 1px solid rgba(240,100,100,.28)!important; }
.badge.bg-warning  { background: rgba(240,160,48,.14) !important; color: var(--c-amber-hi)  !important; border: 1px solid rgba(240,160,48,.28) !important; }
.badge.bg-primary  { background: var(--c-blue-glow)   !important; color: var(--c-blue-hi)   !important; border: 1px solid var(--c-b2)           !important; }
.badge.bg-secondary{ background: rgba(100,120,160,.12)!important; color: var(--c-t2)        !important; border: 1px solid var(--c-b0)           !important; }
.badge.text-dark   { color: var(--c-bg) !important; }

.table, .table > :not(caption) > * > * {
  background-color: transparent !important;
  color: var(--c-t1) !important;
  border-color: var(--c-b0) !important;
}
.form-control, .form-select {
  background: var(--c-s3) !important;
  border-color: var(--c-b0) !important;
  color: var(--c-t1) !important;
  font-family: 'Inter', sans-serif !important;
  border-radius: var(--r-sm) !important;
}
.form-control:focus, .form-select:focus {
  border-color: var(--c-blue) !important;
  box-shadow: 0 0 0 3px var(--c-blue-glow) !important;
  outline: none;
}
.dropdown-menu {
  background: var(--c-s1) !important;
  border-color: var(--c-b0) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.5) !important;
  border-radius: var(--r-sm) !important;
}
.dropdown-item { color: var(--c-t1) !important; font-size: 13px; font-family: 'Inter', sans-serif; }
.dropdown-item:hover, .dropdown-item.active {
  background: var(--c-blue-glow) !important;
  color: var(--c-blue-hi) !important;
}

/* ── Layout ─────────────────────────────────────────────────────────── */
.app-shell {
  display: flex;
  min-height: 100vh;
}

/* ── Sidebar ─────────────────────────────────────────────────────────── */
.sidebar {
  width: var(--nav-w);
  background: #060c18;
  border-inline-end: 1px solid rgba(45,212,191,.1);
  display: flex;
  flex-direction: column;
  position: fixed;
  inset-block: 0;
  inset-inline-start: 0;   /* left in LTR, right in RTL */
  inset-inline-end: auto;
  z-index: 1200;   /* above the Leaflet map (controls/markers reach ~1000) */
  overflow: hidden;
  box-shadow: 2px 0 24px rgba(0,0,0,.5);
}

/* RTL: box-shadows have no logical-property equivalent — flip the horizontal
   offset so the sidebar's shadow falls on its inner (page-facing) edge in RTL. */
[dir="rtl"] .sidebar                     { box-shadow: -2px 0 24px rgba(0,0,0,.5); }
[dir="rtl"][data-theme="light"] .sidebar { box-shadow: -4px 0 32px rgba(0,0,0,.45); }
[dir="rtl"] .sidebar.open                { box-shadow: -4px 0 40px rgba(0,0,0,.6); }

/* Brand */
.sidebar-brand {
  padding: 20px 16px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  background: linear-gradient(160deg, rgba(45,212,191,.1) 0%, transparent 60%);
}
.sidebar-brand::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, rgba(45,212,191,.5) 0%, transparent 80%);
}

.sb-brand-link {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  transition: opacity .15s ease;
}
.sb-brand-link:hover { opacity: .8; }

.sb-logo {
  width: 40px; height: 40px;
  border-radius: 11px;
  background: linear-gradient(145deg, rgba(45,212,191,.35) 0%, rgba(45,212,191,.08) 100%);
  border: 1px solid rgba(45,212,191,.4);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 0 22px rgba(45,212,191,.25), inset 0 1px 0 rgba(255,255,255,.07);
}
.sb-logo .bi {
  font-size: 19px;
  color: #5eead4;
  filter: drop-shadow(0 0 8px rgba(45,212,191,.9));
}
.sb-logo img {
  width: 22px; height: 22px;
  display: block;
  filter: drop-shadow(0 0 8px rgba(45,212,191,.9));
}

.sb-name { flex: 1; min-width: 0; }
/* "Arcivéo" logo — Chakra Petch techno font */
.sb-name strong {
  font-family: 'Chakra Petch', sans-serif;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: .3px;
  display: block;
  line-height: 1.1;
  background: linear-gradient(90deg, #5eead4 0%, #e2f7f2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  white-space: nowrap;
}
.sb-name span {
  display: block;
  font-size: 9px;
  color: var(--c-t2);
  font-weight: 600;
  margin-top: 2px;
  letter-spacing: .5px;
  text-transform: uppercase;
}

.sidebar-close-btn {
  display: none;
  background: none; border: none;
  color: var(--c-t2); font-size: 17px;
  cursor: pointer; padding: 4px; line-height: 1;
}

/* Server status pill */
.sb-server {
  margin: 6px 0;
  padding: 9px 18px;
  border-top: 1px solid var(--c-b0);
  border-bottom: 1px solid var(--c-b0);
  background: rgba(0,0,0,.15);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sb-server-top {
  display: flex;
  align-items: center;
  gap: 6px;
}
.sb-server-live {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.4px;
  color: var(--c-green-hi);
  text-transform: uppercase;
}
.sb-server-date {
  font-size: 10px;
  color: var(--c-t2);
  font-variant-numeric: tabular-nums;
  margin-inline-start: auto;
}
.sb-server-host {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  color: var(--c-t2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sb-server-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--c-green);
  flex-shrink: 0;
  animation: pulseGreen 2s ease-in-out infinite;
}
@keyframes pulseGreen {
  0%,100% { box-shadow: 0 0 0 0 rgba(34,211,164,.7); }
  50%      { box-shadow: 0 0 0 4px rgba(34,211,164,0); }
}

/* Nav */
.sb-nav {
  flex: 1;
  min-height: 0;
  padding: 6px 0 8px;
  list-style: none;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(45,212,191,.85) rgba(128,128,128,.2);
}
.sb-nav::-webkit-scrollbar { width: 8px; }
.sb-nav::-webkit-scrollbar-track { background: rgba(128,128,128,.2); border-radius: 4px; }
.sb-nav::-webkit-scrollbar-thumb { background: rgba(45,212,191,.85); border-radius: 4px; }
.sb-nav::-webkit-scrollbar-thumb:hover { background: rgba(45,212,191,1); }

.sb-section-label {
  padding: 16px 18px 5px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.8px;
  color: var(--c-t3);
  display: flex;
  align-items: center;
  gap: 8px;
}
.sb-section-label::after {
  content: '';
  flex: 1; height: 1px;
  background: linear-gradient(90deg, rgba(45,212,191,.18) 0%, transparent 100%);
}

.sb-item a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px 9px 16px;
  margin: 1px 8px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--c-t2);
  transition: background .15s var(--ease), color .15s var(--ease);
  white-space: nowrap;
}
.sb-item a:hover {
  background: rgba(45,212,191,.08);
  color: var(--c-t1);
}
.sb-item a.active {
  background: linear-gradient(90deg, rgba(45,212,191,.2) 0%, rgba(45,212,191,.05) 100%);
  color: #5eead4;
  font-weight: 600;
  box-shadow: inset 3px 0 0 #2dd4bf;
}
.sb-item a.active .bi {
  filter: drop-shadow(0 0 6px rgba(45,212,191,.7));
  color: #5eead4;
}
.sb-item a .bi {
  font-size: 15px; width: 17px;
  text-align: center; flex-shrink: 0;
  opacity: .9;
  transition: opacity .15s;
}
.sb-item a:hover .bi,
.sb-item a.active .bi { opacity: 1; }

/* Footer */
.sb-footer {
  padding: 6px 8px 14px;
}
.sb-footer::before {
  content: '';
  display: block;
  height: 1px;
  margin: 0 12px 6px;
  background: linear-gradient(90deg, rgba(45,212,191,.15) 0%, transparent 100%);
}
.sb-footer a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px 8px 16px;
  margin: 1px 0;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--c-t2);
  transition: background .15s, color .15s;
}
.sb-footer a:not(.logout):hover {
  background: rgba(45,212,191,.08);
  color: var(--c-t1);
}
.sb-footer a.logout:hover {
  background: rgba(240,100,100,.08);
  color: #f89090;
}
.sb-footer a .bi {
  font-size: 15px; width: 17px;
  text-align: center; opacity: .9;
}

/* ── Main area ──────────────────────────────────────────────────────── */
.app-main {
  margin-inline-start: var(--nav-w);
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* ── Topbar ─────────────────────────────────────────────────────────── */
.topbar {
  height: var(--topbar-h);
  padding: 0 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--c-s1);
  border-bottom: 1px solid var(--c-b0);
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 2px 20px rgba(0,0,0,.3);
  gap: 16px;
}

.topbar-left { display: flex; align-items: center; gap: 12px; }
.topbar-right { display: flex; align-items: center; gap: 8px; }

.page-title {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 16px;
  font-weight: 700;
  color: var(--c-t1);
  letter-spacing: -.2px;
}
.page-title .bi {
  font-size: 17px;
  color: var(--c-blue-hi);
}

.live-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--c-green);
  background: rgba(34,211,164,.1);
  border: 1px solid rgba(34,211,164,.22);
}
.live-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--c-green);
  animation: pulseGreen 1.6s ease-in-out infinite;
}

.topbar-btn {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: var(--r-sm);
  border: 1px solid var(--c-b0);
  background: transparent;
  color: var(--c-t2);
  cursor: pointer;
  font-size: 14px;
  transition: all .15s;
  padding: 0;
}
.topbar-btn:hover {
  background: var(--c-blue-glow);
  color: var(--c-blue-hi);
  border-color: var(--c-b2);
}
.topbar-btn.lang-btn {
  width: auto;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 700;
  gap: 4px;
}

.topbar-user {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600;
  color: var(--c-t2);
  padding: 0 4px;
}

/* ── Page body ──────────────────────────────────────────────────────── */
.page-body {
  flex: 1;
  padding: 28px 28px 48px;
}

/* ── Cards ──────────────────────────────────────────────────────────── */
.card {
  background: var(--c-s1) !important;
  border: 1px solid var(--c-b0) !important;
  border-radius: var(--r) !important;
  color: var(--c-t1) !important;
  transition: border-color .2s, box-shadow .2s;
  box-shadow: 0 2px 8px rgba(0,0,0,.25), 0 0 0 1px rgba(255,255,255,.03) !important;
  overflow: hidden;
}
.card:hover {
  border-color: var(--c-b1) !important;
  box-shadow: 0 6px 24px rgba(0,0,0,.3), 0 0 0 1px rgba(45,212,191,.08) !important;
}
.card-header {
  padding: 13px 18px !important;
  border-bottom: 1px solid var(--c-b0) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--c-t1) !important;
  background: rgba(0,0,0,.18) !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.card-header .bi { color: var(--c-blue-hi); }
.card-body { padding: 18px !important; }

/* ── Stat cards ─────────────────────────────────────────────────────── */
.stat-card {
  background: var(--c-s1);
  border: 1px solid var(--c-b0);
  border-radius: var(--r);
  padding: 0;
  overflow: hidden;
  position: relative;
  transition: transform .2s var(--ease), box-shadow .2s, border-color .2s;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
  cursor: default;
}
.stat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(0,0,0,.35);
}
.stat-card-inner {
  padding: 20px 18px 16px;
  display: flex; flex-direction: column; gap: 4px;
  position: relative;   /* keep the value above the ghost icon */
  z-index: 1;
}

/* Top accent bar */
.stat-card::before {
  content: '';
  display: block;
  height: 3px;
  background: var(--c-b0);
}
.stat-card.sc-red::before    { background: linear-gradient(90deg, var(--c-red),   transparent 80%); }
.stat-card.sc-green::before  { background: linear-gradient(90deg, var(--c-green), transparent 80%); }
.stat-card.sc-amber::before  { background: linear-gradient(90deg, var(--c-amber), transparent 80%); }
.stat-card.sc-blue::before   { background: linear-gradient(90deg, var(--c-blue),  transparent 80%); }

/* Color variants */
.stat-card.sc-red   { border-color: rgba(240,100,100,.22);  background: linear-gradient(160deg, rgba(240,100,100,.06) 0%, var(--c-s1) 55%); }
.stat-card.sc-green { border-color: rgba(34,211,164,.22);   background: linear-gradient(160deg, rgba(34,211,164,.06) 0%, var(--c-s1) 55%); }
.stat-card.sc-amber { border-color: rgba(240,160,48,.22);   background: linear-gradient(160deg, rgba(240,160,48,.06) 0%, var(--c-s1) 55%); }
.stat-card.sc-blue  { border-color: rgba(45,212,191,.22);   background: linear-gradient(160deg, rgba(45,212,191,.06) 0%, var(--c-s1) 55%); }

.stat-card.sc-red:hover   { box-shadow: 0 12px 32px rgba(240,100,100,.14), 0 0 0 1px rgba(240,100,100,.2); }
.stat-card.sc-green:hover { box-shadow: 0 12px 32px rgba(34,211,164,.12),  0 0 0 1px rgba(34,211,164,.2); }
.stat-card.sc-amber:hover { box-shadow: 0 12px 32px rgba(240,160,48,.14),  0 0 0 1px rgba(240,160,48,.2); }
.stat-card.sc-blue:hover  { box-shadow: 0 12px 32px rgba(45,212,191,.14),  0 0 0 1px rgba(45,212,191,.2); }

.stat-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.1px;
  color: var(--c-t2);
  margin-bottom: 6px;
}
.stat-value {
  font-size: 40px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -1.5px;
  color: var(--c-t1);
  font-variant-numeric: tabular-nums;
}
/* Text values (Installed / Inactive) — normal letter-spacing for words */
.stat-value.stat-value-text {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.2px;
  line-height: 1.3;
}
.stat-card.sc-red   .stat-value { color: var(--c-red-hi); }
.stat-card.sc-green .stat-value { color: var(--c-green-hi); }
.stat-card.sc-amber .stat-value { color: var(--c-amber-hi); }
.stat-card.sc-blue  .stat-value { color: var(--c-blue-hi); }

.stat-foot {
  font-size: 12px;
  color: var(--c-t2);
  margin-top: 8px;
  font-weight: 500;
}

/* Ghost icon — subtle watermark sitting BEHIND the value (see .stat-card-inner z-index) */
.stat-icon-bg {
  position: absolute;
  inset-inline-end: 14px;   /* right in LTR, auto-flips to left in RTL */
  bottom: 12px;
  font-size: 56px;
  line-height: 1;
  pointer-events: none;
  opacity: .10;
  transition: transform .3s var(--ease), opacity .3s;
}
.stat-card.sc-red   .stat-icon-bg { color: var(--c-red);   opacity: .16; }
.stat-card.sc-green .stat-icon-bg { color: var(--c-green); opacity: .16; }
.stat-card.sc-amber .stat-icon-bg { color: var(--c-amber); opacity: .16; }
.stat-card.sc-blue  .stat-icon-bg { color: var(--c-blue);  opacity: .16; }
.stat-card:hover    .stat-icon-bg { transform: scale(1.12) rotate(-8deg); opacity: .24; }

/* ── Compact card label/value (auditd, modsec, map pages) ───────────── */
.stat-card .label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--c-t2);
  margin-bottom: 6px;
}
.stat-card .value {
  font-size: 32px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -1.5px;
  color: var(--c-t1);
  font-variant-numeric: tabular-nums;
}

/* ── Modifier aliases (danger/success/warning → sc-red/green/amber) ─── */
.stat-card.danger  { border-color: rgba(240,100,100,.22);  background: linear-gradient(160deg, rgba(240,100,100,.06) 0%, var(--c-s1) 55%); }
.stat-card.success { border-color: rgba(34,211,164,.22);   background: linear-gradient(160deg, rgba(34,211,164,.06)  0%, var(--c-s1) 55%); }
.stat-card.warning { border-color: rgba(240,160,48,.22);   background: linear-gradient(160deg, rgba(240,160,48,.06)  0%, var(--c-s1) 55%); }
.stat-card.danger  .value { color: var(--c-red-hi); }
.stat-card.success .value { color: var(--c-green-hi); }
.stat-card.warning .value { color: var(--c-amber-hi); }

/* ── Status table ───────────────────────────────────────────────────── */
.status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 0;
  border-bottom: 1px solid var(--c-b0);
  font-size: 13px;
}
.status-row:last-child { border-bottom: none; }
.status-row-label { color: var(--c-t2); font-weight: 500; }
.status-row-val   { color: var(--c-t1); font-weight: 600; text-align: end; }

/* ── Score gauge ────────────────────────────────────────────────────── */
.score-wrap {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-bottom: 18px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--c-b0);
}
.score-gauge { position: relative; width: 100px; height: 100px; flex-shrink: 0; }
.score-gauge svg { transform: rotate(-90deg); }
.score-num {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 1px;
}
.score-num strong {
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -1px;
}
.score-num small {
  font-size: 9px;
  color: var(--c-t3);
  letter-spacing: .5px;
}
.score-label-wrap { flex: 1; }
.score-title {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.3px;
  margin-bottom: 4px;
}
.score-sub { font-size: 12px; color: var(--c-t2); }

.score-check {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 0;
  border-bottom: 1px solid var(--c-b0);
  font-size: 13px;
  gap: 8px;
}
.score-check:last-child { border-bottom: none; }
.score-check-label { display: flex; align-items: center; gap: 8px; color: var(--c-t2); font-weight: 500; flex: 1; min-width: 0; }
.score-check-val   { font-size: 12px; font-weight: 600; white-space: nowrap; }
.score-check .bi-check-circle-fill { color: var(--c-green); }
.score-check .bi-exclamation-triangle-fill { color: var(--c-amber); }
.score-check .bi-x-circle-fill { color: var(--c-red); }
.score-check .bi-dash-circle   { color: var(--c-t3); }

/* ── Generic table styles ───────────────────────────────────────────── */
.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th {
  padding: 10px 14px;
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px;
  color: var(--c-t3);
  border-bottom: 1px solid var(--c-b0);
  background: rgba(0,0,0,.2) !important;
  white-space: nowrap;
}
.table td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--c-b0);
  color: var(--c-t1);
  vertical-align: middle;
}
.table tbody tr { transition: background .12s; }
.table tbody tr:hover td { background: rgba(45,212,191,.05) !important; }
.table tbody tr:last-child td { border-bottom: none; }

/* ── Badges ─────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: 20px;
  font-size: 11px; font-weight: 700;
  font-family: 'Space Grotesk', sans-serif;
  letter-spacing: .2px;
}
.badge-green  { background: rgba(34,211,164,.14); color: var(--c-green-hi);  border: 1px solid rgba(34,211,164,.25); }
.badge-red    { background: rgba(240,100,100,.14); color: var(--c-red-hi);    border: 1px solid rgba(240,100,100,.25); }
.badge-amber  { background: rgba(240,160,48,.14);  color: var(--c-amber-hi);  border: 1px solid rgba(240,160,48,.25); }
.badge-blue   { background: rgba(45,212,191,.14);  color: var(--c-blue-hi);   border: 1px solid rgba(45,212,191,.25); }
.badge-muted  { background: rgba(100,120,160,.1);  color: var(--c-t2);        border: 1px solid var(--c-b0); }

/* ── Alerts ─────────────────────────────────────────────────────────── */
.alert { padding: 12px 16px; border-radius: var(--r-sm); border-inline-start: 3px solid; font-size: 13px; display: flex; align-items: flex-start; gap: 10px; }
.alert-success { background: rgba(34,211,164,.07); border-color: var(--c-green); color: var(--c-t1); }
.alert-danger  { background: rgba(240,100,100,.07); border-color: var(--c-red);  color: var(--c-t1); }
.alert-warning { background: rgba(240,160,48,.07); border-color: var(--c-amber); color: var(--c-t1); }
.alert-info    { background: rgba(45,212,191,.07); border-color: var(--c-blue);  color: var(--c-t1); }

/* ── Buttons ─────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 16px; border-radius: var(--r-sm);
  font-size: 13px; font-weight: 600;
  font-family: 'Inter', sans-serif;
  cursor: pointer; border: 1px solid transparent;
  transition: all .15s var(--ease);
  text-decoration: none; letter-spacing: .1px;
}
.btn:hover  { transform: translateY(-1px); }
.btn:active { transform: none; }
.btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }

.btn-primary {
  background: linear-gradient(135deg, #14b8a6, #0d9488); color: #f3fdfa;
  border-color: rgba(94,234,212,.20);
  box-shadow: 0 6px 18px rgba(13,148,136,.22);
}
.btn-primary:hover { background: linear-gradient(135deg, #19c6b2, #0f9c8c); border-color: rgba(94,234,212,.30); color: #f3fdfa; transform: translateY(-2px); box-shadow: 0 10px 28px rgba(13,148,136,.32); }

.btn-outline { background: transparent; color: var(--c-t2); border-color: var(--c-b0); }
.btn-outline:hover { color: var(--c-t1); border-color: var(--c-b1); background: rgba(45,212,191,.06); }

.btn-danger { background: var(--c-red); color: #fff; border-color: var(--c-red); }
.btn-danger:hover { background: #e05050; box-shadow: 0 4px 16px rgba(240,100,100,.3); color: #fff; }

.btn-sm { padding: 5px 12px; font-size: 12px; }

/* ── Form ────────────────────────────────────────────────────────────── */
.form-group { margin-bottom: 16px; }
.form-label { display: block; margin-bottom: 6px; font-size: 11px; font-weight: 700; color: var(--c-t2); text-transform: uppercase; letter-spacing: .5px; }

/* ── Status dot ─────────────────────────────────────────────────────── */
.status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-inline-end: 6px; flex-shrink: 0; }
.status-dot.online  { background: var(--c-green); animation: pulseGreen 2s infinite; }
.status-dot.offline { background: var(--c-red); }
.status-dot.warning { background: var(--c-amber); }

/* ── Log viewer ─────────────────────────────────────────────────────── */
.log-section-content {
  background: rgba(0,0,0,.3);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; color: var(--c-t2);
  padding: 12px; border-radius: 0 0 var(--r-sm) var(--r-sm);
  max-height: 380px; overflow-y: auto;
}
.log-line { font-family: 'JetBrains Mono', monospace; font-size: 12px; line-height: 1.6; }
.log-line.danger  { color: var(--c-red-hi); }
.log-line.warning { color: var(--c-amber-hi); }
.log-line.success { color: var(--c-green-hi); }
.log-line.muted   { color: var(--c-t3); }

/* ── Scrollbar ──────────────────────────────────────────────────────── */
html { scrollbar-width: thin; scrollbar-color: rgba(45,212,191,.85) rgba(128,128,128,.2); }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: rgba(128,128,128,.2); border-radius: 4px; }
::-webkit-scrollbar-thumb { background: rgba(45,212,191,.85); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(45,212,191,1); }

/* ── Utilities ──────────────────────────────────────────────────────── */
.text-success { color: var(--c-green-hi) !important; }
.text-danger  { color: var(--c-red-hi)   !important; }
.text-warning { color: var(--c-amber-hi) !important; }
.text-muted   { color: var(--c-t2)       !important; }
.text-accent  { color: var(--c-blue-hi)  !important; }
.text-dim     { color: var(--c-t3)       !important; }

.mb-0{margin-bottom:0}.mb-1{margin-bottom:4px}.mb-2{margin-bottom:8px}
.mb-3{margin-bottom:16px}.mb-4{margin-bottom:24px}
.mt-2{margin-top:8px}.mt-3{margin-top:16px}.mt-4{margin-top:24px}
.d-flex{display:flex}.gap-2{gap:8px}.gap-3{gap:12px}
.align-center{align-items:center}.justify-between{justify-content:space-between}
.flex-wrap{flex-wrap:wrap}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media(max-width:1100px){.grid-4{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(2,1fr)}}

/* ── LOGIN PAGE ─────────────────────────────────────────────────────── */
/* (styles live in login.php inline — just ensure body bg is right) */

/* ── ACCESS GRANTED overlay ─────────────────────────────────────────── */
.access-granted-overlay {
  display: none; position: absolute; inset: 0; border-radius: 15px;
  background: rgba(7,9,15,.94); z-index: 10;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; overflow: hidden;
}
.access-granted-overlay.show { display: flex; }
.access-granted-text {
  font-family: 'JetBrains Mono', monospace;
  font-size: 22px; font-weight: 700; letter-spacing: 4px;
  text-transform: uppercase; color: #5eead4;
  text-shadow: 0 0 20px rgba(116,179,248,.8);
  animation: agFlick .12s infinite alternate;
}
.access-granted-sub { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: rgba(116,179,248,.6); letter-spacing: 2px; }
@keyframes agFlick { from{opacity:1}to{opacity:.88} }
.access-scan-line {
  position: absolute; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg,transparent,#5eead4,transparent);
  box-shadow: 0 0 12px #5eead4;
  animation: scanLn 1.2s ease-in-out forwards;
}
@keyframes scanLn {
  0%{top:0%;opacity:0}10%{opacity:1}90%{opacity:1}100%{top:100%;opacity:0}
}

/* ── Mobile overlay ─────────────────────────────────────────────────── */
.sidebar-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.65); z-index: 1100;   /* above the Leaflet map, below the sidebar */
}
.sidebar-overlay.show { display: block; }

.mobile-menu-btn {
  display: none; position: fixed; top: 12px; inset-inline-end: 12px; z-index: 1300;
  background: var(--c-s1); color: var(--c-t1);
  border: 1px solid var(--c-b0); border-radius: var(--r-sm);
  padding: 8px 10px; font-size: 20px; cursor: pointer; line-height: 1;
  box-shadow: 0 2px 10px rgba(0,0,0,.4);
}

/* ── Scroll to top (same look/behavior as the arciveo.com landing) ────── */
.scroll-to-top {
  position: fixed; bottom: 24px; inset-inline-end: 24px; z-index: 999;
  width: 48px; height: 48px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--c-blue), #0d9488);
  color: #f3fdfa; border: 1px solid var(--c-blue-glow); border-radius: 50%;
  box-shadow: 0 6px 18px rgba(13,148,136,.28); cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(20px);
  transition: opacity .2s, visibility .2s, transform .2s, background-color .15s;
}
.scroll-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.scroll-to-top:hover { background: linear-gradient(135deg, var(--c-blue-hi), #0f9c8c); transform: translateY(-4px); box-shadow: 0 10px 28px rgba(13,148,136,.38); }
.scroll-to-top:active { transform: translateY(-2px); }
.scroll-to-top svg { width: 20px; height: 20px; }
@media (max-width: 767px) {
  .scroll-to-top { bottom: 16px; inset-inline-end: 16px; width: 44px; height: 44px; }
}

/* ── Lang switch ─────────────────────────────────────────────────────── */
.lang-switch { display: flex; gap: 4px; margin-top: 10px; }
.lang-switch a {
  flex: 1; text-align: center; padding: 5px; font-size: 12px; font-weight: 700;
  border-radius: 4px; border: 1px solid var(--c-b0);
  background: var(--c-s3); color: var(--c-t2); transition: all .15s;
}
.lang-switch a.active { background: var(--c-blue); color: #fff; border-color: var(--c-blue); }
.lang-switch a:hover:not(.active) { color: var(--c-t1); border-color: var(--c-b1); }

/* ── Responsive ─────────────────────────────────────────────────────── */

/* The topbar cluster (buy CTA + plaque + Live + language + theme + user) is
   ~690px of nowrap content, while the sidebar keeps 244px of the window for
   itself at every width above the mobile breakpoint. Below a wide desktop it
   therefore does not fit and dragged the page sideways, so the decorative items
   are dropped first, narrowest screens losing the most. */
@media (max-width: 1199.98px) {
  /* !important: the plaque carries display:inline-flex as an inline style. */
  .topbar .topbar-selfhost { display: none !important; }
}
@media (max-width: 991.98px) {
  .topbar .live-badge { display: none; }
  .topbar-btn.lang-btn { width: 32px; padding: 0; gap: 0; font-size: 0; }
  .topbar-btn.lang-btn .bi { font-size: 14px; }
  .topbar-user { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

@media (max-width: 768px) {
  .mobile-menu-btn { display: block; }
  .sidebar-close-btn { display: block; }
  .sidebar { inset-inline-start: calc(-1 * var(--nav-w)); transition: inset-inline-start .3s var(--ease); overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .sidebar.open { inset-inline-start: 0; box-shadow: 4px 0 40px rgba(0,0,0,.6); }
  /* Scroll the whole sidebar (not just .sb-nav) so the System links and footer are always reachable on mobile. */
  .sb-nav { flex: 0 0 auto; overflow: visible; }
  .app-main { margin-inline-start: 0; }
  /* Keep the topbar within the viewport on mobile: truncate the title, slim the
     right cluster to icons, and reserve space for the fixed hamburger button. */
  .topbar { padding: 0 14px; padding-inline-end: 56px; gap: 8px; }
  .topbar-left { flex: 1; min-width: 0; }
  .page-title { min-width: 0; }
  .page-title span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar-right { gap: 6px; flex-shrink: 0; }
  /* Keep the demo purchase CTA, but as a cart icon only — the label alone is wider
     than the space left next to the language, theme and user controls. */
  .topbar .topbar-buy { padding: 5px 9px; }
  .topbar .topbar-buy .topbar-buy-text { display: none; }
  .topbar .topbar-buy .bi { margin-inline-end: 0 !important; }
  .topbar-user { font-size: 0; gap: 0; padding: 0; }
  .topbar-user .bi { font-size: 18px; }
  /* Lynis hero card: stack the host/version columns so nothing is clipped off-screen. */
  .lynis-hero-grid { grid-template-columns: 1fr !important; row-gap: 14px; }
  .page-body { padding: 16px 14px 32px; }
  .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; }
  /* System pages (disk, SSL, monit, ssh, db): wide tables scroll horizontally
     inside the card instead of being clipped off the right edge. */
  .card-body:has(table) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .card-body:has(table) .table th,
  .card-body:has(table) .table td { white-space: nowrap; }

  /* Long values the modules print — file paths, package names, rule messages,
     cron lines, domains — have no spaces to break at, so they used to push the
     card (and the page) past the right edge. Set once on the content wrapper:
     overflow-wrap inherits, and table cells keep their nowrap from the rule
     above, so the horizontal table scroll is unaffected. */
  .page-body { overflow-wrap: anywhere; }

  /* Flex and grid children default to min-width:auto and refuse to shrink below
     their longest word, which drags their neighbours off-screen. */
  .card-header > *,
  .page-body .d-flex > *,
  .page-body .grid-2 > *, .page-body .grid-3 > *, .page-body .grid-4 > * { min-width: 0; }

  /* Header rows ("title + refresh/scan button") wrap instead of overflowing. */
  .page-body .d-flex:not(.flex-nowrap):not(.btn-group):not(.input-group) { flex-wrap: wrap; }

  /* Status badges may wrap; inside tables they must not, or the horizontal
     table scroll above stops working. */
  .badge { white-space: normal; }
  .table .badge { white-space: nowrap; }

  body.nav-open { overflow: hidden; }
}