/* ============================================================
   CDS Admin Tool — Main Stylesheet
   Default: Navy + Green (dark-navy-green)
   Supports 12 themes × 10 layouts via [data-theme] + [data-layout]
   ============================================================ */

/* ── THEME VARIABLES ─────────────────────────────────────── */
:root,
[data-theme="dark-navy-green"] {
  --accent:  #22c55e;
  --accent2: #f59e0b;
  --accent3: #38bdf8;
  --bg0:     #0a0f1e;
  --bg1:     #0f172a;
  --bg2:     #1e293b;
  --bg3:     #263045;
  --bg4:     #2d3a52;
  --text0:   #f0f9ff;
  --text1:   #b8d4e8;
  --text2:   #64849a;
  --text3:   #334a5e;
  --border:  rgba(34,197,94,0.10);
  --border2: rgba(34,197,94,0.22);
  --shadow:  0 8px 32px rgba(0,0,0,0.55);
  --sidebar-w: 240px;
  --topbar-h:  56px;
  --radius:    12px;
  --content-p: 24px;
}
[data-theme="dark-teal"] {
  --accent:#00e5b4;--accent2:#ff6b35;--accent3:#7b61ff;
  --bg0:#0a0c0f;--bg1:#11141a;--bg2:#181c25;--bg3:#1f2433;--bg4:#252b3b;
  --text0:#f0f2f7;--text1:#b8bdd0;--text2:#6b7194;--text3:#3d4260;
  --border:rgba(0,229,180,0.07);--border2:rgba(0,229,180,0.14);
}
[data-theme="dark-blue"] {
  --accent:#3b82f6;--accent2:#f59e0b;--accent3:#8b5cf6;
  --bg0:#070c14;--bg1:#0d1526;--bg2:#111d33;--bg3:#172440;--bg4:#1e2e50;
  --text0:#e8f0ff;--text1:#a3bcdb;--text2:#6080a0;--text3:#344860;
  --border:rgba(59,130,246,0.12);--border2:rgba(59,130,246,0.22);
}
[data-theme="dark-forest"] {
  --accent:#22c55e;--accent2:#f97316;--accent3:#06b6d4;
  --bg0:#060d09;--bg1:#0c1610;--bg2:#111f16;--bg3:#17291e;--bg4:#1d3325;
  --text0:#e8f5ec;--text1:#9fc9ab;--text2:#568a6a;--text3:#2e5040;
  --border:rgba(34,197,94,0.10);--border2:rgba(34,197,94,0.20);
}
[data-theme="dark-violet"] {
  --accent:#a855f7;--accent2:#ec4899;--accent3:#06b6d4;
  --bg0:#080612;--bg1:#0f0c1e;--bg2:#151228;--bg3:#1c1833;--bg4:#23213f;
  --text0:#f0ecff;--text1:#beb8d8;--text2:#7870a0;--text3:#403a60;
  --border:rgba(168,85,247,0.10);--border2:rgba(168,85,247,0.20);
}
[data-theme="dark-amber"] {
  --accent:#f59e0b;--accent2:#ef4444;--accent3:#10b981;
  --bg0:#0d0a04;--bg1:#181208;--bg2:#201a0c;--bg3:#282210;--bg4:#322c16;
  --text0:#fff8e8;--text1:#d4c090;--text2:#906040;--text3:#503a20;
  --border:rgba(245,158,11,0.10);--border2:rgba(245,158,11,0.22);
}
[data-theme="dark-midnight"] {
  --accent:#60a5fa;--accent2:#34d399;--accent3:#fbbf24;
  --bg0:#000000;--bg1:#050508;--bg2:#0a0b10;--bg3:#101218;--bg4:#161820;
  --text0:#f8faff;--text1:#c0c8e0;--text2:#6070a0;--text3:#303855;
  --border:rgba(255,255,255,0.05);--border2:rgba(255,255,255,0.09);
}
/* Light Themes */
[data-theme="light-clean"] {
  --accent:#16a34a;--accent2:#d97706;--accent3:#2563eb;
  --bg0:#eef2f7;--bg1:#f5f8fc;--bg2:#ffffff;--bg3:#f0f4fa;--bg4:#e2e8f0;
  --text0:#0d1a14;--text1:#1e3a2f;--text2:#4a7060;--text3:#90b0a0;
  --border:rgba(0,0,0,0.07);--border2:rgba(22,163,74,0.20);
  --shadow:0 4px 20px rgba(0,0,0,0.08);
}
[data-theme="light-sky"] {
  --accent:#2563eb;--accent2:#dc2626;--accent3:#7c3aed;
  --bg0:#ebf2ff;--bg1:#f3f8ff;--bg2:#ffffff;--bg3:#edf4ff;--bg4:#dde9ff;
  --text0:#0a1830;--text1:#1e3a6a;--text2:#4a6090;--text3:#9ab0c8;
  --border:rgba(37,99,235,0.10);--border2:rgba(37,99,235,0.18);
  --shadow:0 4px 20px rgba(0,0,0,0.08);
}
[data-theme="light-sage"] {
  --accent:#16a34a;--accent2:#ca8a04;--accent3:#0891b2;
  --bg0:#edfaf2;--bg1:#f4fbf7;--bg2:#ffffff;--bg3:#edf7f1;--bg4:#e0f2e8;
  --text0:#0a2015;--text1:#1a4030;--text2:#4a7060;--text3:#90b0a0;
  --border:rgba(22,163,74,0.10);--border2:rgba(22,163,74,0.18);
  --shadow:0 4px 20px rgba(0,0,0,0.06);
}
[data-theme="light-warm"] {
  --accent:#b45309;--accent2:#dc2626;--accent3:#6d28d9;
  --bg0:#faf7f2;--bg1:#fdf9f4;--bg2:#ffffff;--bg3:#faf4ec;--bg4:#f2e8d8;
  --text0:#1a1208;--text1:#3d2a18;--text2:#7a5a40;--text3:#c0a080;
  --border:rgba(0,0,0,0.07);--border2:rgba(180,83,9,0.16);
  --shadow:0 4px 20px rgba(0,0,0,0.07);
}
[data-theme="light-slate"] {
  --accent:#334155;--accent2:#e11d48;--accent3:#0ea5e9;
  --bg0:#e8ecf2;--bg1:#f0f4f8;--bg2:#ffffff;--bg3:#eaf0f6;--bg4:#dde5ef;
  --text0:#0f172a;--text1:#1e3050;--text2:#5a7090;--text3:#a0b4c8;
  --border:rgba(0,0,0,0.08);--border2:rgba(0,0,0,0.14);
  --shadow:0 4px 20px rgba(0,0,0,0.08);
}

/* ── LAYOUT PRESETS ─────────────────────────────────────────── */
[data-layout="sidebar-compact"] { --sidebar-w: 54px; }
[data-layout="sidebar-wide"]    { --sidebar-w: 280px; }
[data-layout="sidebar-right"]   { --sidebar-w: 240px; }
[data-layout="topnav"]          { --sidebar-w: 0px; --topbar-h: 56px; }
[data-layout="floating-cards"]  { --sidebar-w: 240px; --content-p: 28px; }
[data-layout="minimal"]         { --sidebar-w: 220px; }
[data-layout="dense"]           { --sidebar-w: 200px; --topbar-h: 44px; --content-p: 14px; }
[data-layout="magazine"]        { --sidebar-w: 260px; --content-p: 40px; --radius: 16px; }
[data-layout="boxed"]           { --sidebar-w: 240px; --content-p: 28px; }

/* ── RESET ──────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html,body { height:100%; overflow:hidden; }
body {
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  background:var(--bg0); color:var(--text0);
  font-size:13px; line-height:1.55;
  transition:background .25s,color .25s;
  display:flex;
}

/* ── LAYOUT SHELL ─────────────────────────────────────────── */
#sidebar {
  width:var(--sidebar-w); min-width:var(--sidebar-w);
  height:100vh; background:var(--bg1);
  border-right:1px solid var(--border);
  display:flex; flex-direction:column;
  overflow-y:auto; overflow-x:hidden;
  flex-shrink:0; z-index:100;
  transition:width .2s,background .25s,border-color .25s;
}
#sidebar::-webkit-scrollbar{width:3px}
#sidebar::-webkit-scrollbar-thumb{background:var(--text3);border-radius:2px}

[data-layout="topnav"] #sidebar   { display:none; }
[data-layout="sidebar-right"] #sidebar { order:2; border-right:none; border-left:1px solid var(--border); }
[data-layout="minimal"] #sidebar { border-right:none; box-shadow:2px 0 8px rgba(0,0,0,.12); }
[data-layout="floating-cards"] .card { box-shadow:0 4px 24px rgba(0,0,0,.22)!important; }
[data-layout="magazine"] .card { border-radius:16px!important; }
[data-layout="dense"] td,[data-layout="dense"] th { padding:6px 10px!important; }

#main { flex:1; display:flex; flex-direction:column; height:100vh; overflow:hidden; }

#topbar {
  height:var(--topbar-h); background:var(--bg1);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; padding:0 22px; gap:12px; flex-shrink:0;
  transition:background .25s;
}
[data-layout="topnav"] #topbar { padding:0 16px; }

#content { flex:1; overflow-y:auto; padding:var(--content-p); }
#content::-webkit-scrollbar{width:6px}
#content::-webkit-scrollbar-thumb{background:var(--text3);border-radius:3px}

/* ── SIDEBAR LOGO ─────────────────────────────────────────── */
.sidebar-logo {
  padding:18px 16px 14px; display:flex; align-items:center; gap:10px;
  border-bottom:1px solid var(--border); flex-shrink:0;
}
.logo-icon {
  width:32px;height:32px;border-radius:8px;flex-shrink:0;
  background:linear-gradient(135deg,var(--accent),var(--accent3));
  display:flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:800;color:#000;
}
.logo-text { font-size:15px;font-weight:700;color:var(--text0);letter-spacing:-.3px;white-space:nowrap; }
.logo-sub  { font-size:9px;color:var(--text2);font-family:'IBM Plex Mono',monospace;letter-spacing:.5px; }

/* ── SIDEBAR NAV ──────────────────────────────────────────── */
.nav-section { padding:14px 10px 2px; }
.nav-section-label {
  font-size:9px;font-weight:700;color:var(--text3);
  text-transform:uppercase;letter-spacing:1.2px;
  padding:0 6px;margin-bottom:3px;
}
.nav-item {
  display:flex;align-items:center;gap:9px;
  padding:7px 9px;border-radius:8px;cursor:pointer;
  color:var(--text2);font-size:12px;font-weight:500;
  text-decoration:none;transition:all .14s;margin-bottom:1px;
  position:relative;
}
.nav-item:hover { background:var(--bg3);color:var(--text0); }
.nav-item.active {
  background:linear-gradient(90deg,rgba(34,197,94,.13),transparent);
  color:var(--accent);border-left:2px solid var(--accent);padding-left:7px;
}
[data-theme="dark-teal"] .nav-item.active   { background:linear-gradient(90deg,rgba(0,229,180,.1),transparent); }
[data-theme="dark-blue"] .nav-item.active   { background:linear-gradient(90deg,rgba(59,130,246,.1),transparent); }
.nav-item i { width:16px;text-align:center;font-size:12px;flex-shrink:0; }
.nav-badge {
  margin-left:auto;font-size:9px;font-weight:700;
  padding:1px 6px;border-radius:10px;font-family:'IBM Plex Mono',monospace;
}

/* Compact sidebar - icons only */
[data-layout="sidebar-compact"] .nav-section-label,
[data-layout="sidebar-compact"] .nav-item span,
[data-layout="sidebar-compact"] .logo-text,
[data-layout="sidebar-compact"] .logo-sub,
[data-layout="sidebar-compact"] .nav-badge,
[data-layout="sidebar-compact"] .sidebar-user-name,
[data-layout="sidebar-compact"] .sidebar-user-role { display:none!important; }
[data-layout="sidebar-compact"] .nav-item  { justify-content:center;padding:10px; }
[data-layout="sidebar-compact"] .sidebar-logo { justify-content:center; }
[data-layout="sidebar-compact"] .sidebar-user { justify-content:center; }

/* Sidebar bottom user card */
.sidebar-bottom { margin-top:auto;padding:12px;border-top:1px solid var(--border); }
.sidebar-user { display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:8px;cursor:pointer;transition:background .14s; }
.sidebar-user:hover { background:var(--bg3); }
.user-avatar { width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--accent3),var(--accent));display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff;flex-shrink:0; }
.sidebar-user-name { font-size:12px;font-weight:600;color:var(--text0); }
.sidebar-user-role { font-size:10px;color:var(--text2);font-family:'IBM Plex Mono',monospace; }

/* ── TOPBAR ───────────────────────────────────────────────── */
.topbar-title { font-size:15px;font-weight:700;color:var(--text0); }
.topbar-breadcrumb { font-size:10px;color:var(--text2);font-family:'IBM Plex Mono',monospace; }
.topbar-actions { margin-left:auto;display:flex;align-items:center;gap:8px; }
.icon-btn {
  width:32px;height:32px;border-radius:8px;border:1px solid var(--border2);
  background:var(--bg2);cursor:pointer;display:flex;align-items:center;justify-content:center;
  color:var(--text2);font-size:12px;transition:all .14s;text-decoration:none;position:relative;
}
.icon-btn:hover { background:var(--bg3);color:var(--text0); }
.notif-dot { position:absolute;top:5px;right:5px;width:6px;height:6px;background:var(--accent2);border-radius:50%;border:1px solid var(--bg1); }
.env-badge { padding:3px 10px;border-radius:20px;font-size:10px;font-family:'IBM Plex Mono',monospace;font-weight:600;background:rgba(34,197,94,.1);color:var(--accent);border:1px solid rgba(34,197,94,.25); }

/* ── CARDS ────────────────────────────────────────────────── */
.card {
  background:var(--bg2);border:1px solid var(--border);
  border-radius:var(--radius);padding:20px;
  transition:border-color .14s,background .25s;
}
.card:hover { border-color:var(--border2); }
.card-header { display:flex;align-items:center;justify-content:space-between;margin-bottom:16px; }
.card-title { font-size:11px;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.8px; }

/* ── STAT CARDS ───────────────────────────────────────────── */
.stat-card {
  background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);
  padding:18px;cursor:pointer;transition:all .18s;position:relative;overflow:hidden;
}
.stat-card::before { content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--sc,var(--accent));border-radius:var(--radius) var(--radius) 0 0;opacity:.8; }
.stat-card:hover { border-color:var(--border2);transform:translateY(-1px);box-shadow:var(--shadow); }
.stat-icon { width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:14px;margin-bottom:12px;background:var(--bg3);color:var(--sc,var(--accent));border:1px solid var(--border); }
.stat-value { font-size:26px;font-weight:800;color:var(--text0);line-height:1;margin-bottom:5px; }
.stat-label { font-size:11px;color:var(--text2);font-weight:500; }
.stat-delta { position:absolute;top:16px;right:16px;font-size:10px;font-family:'IBM Plex Mono',monospace;padding:2px 7px;border-radius:20px;font-weight:600; }
.delta-up   { background:rgba(34,197,94,.1);color:var(--accent); }
.delta-down { background:rgba(245,158,11,.1);color:var(--accent2); }

/* ── GRIDS ────────────────────────────────────────────────── */
.grid-2 { display:grid;grid-template-columns:1fr 1fr;gap:16px; }
.grid-3 { display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px; }
.grid-4 { display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:14px; }
@media(max-width:1100px){.grid-4{grid-template-columns:1fr 1fr;}}
@media(max-width:768px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}}

/* ── TABLES ───────────────────────────────────────────────── */
.table-wrap { overflow-x:auto; }
table { width:100%;border-collapse:collapse;font-size:12px; }
th { text-align:left;padding:8px 12px;font-size:10px;text-transform:uppercase;letter-spacing:.7px;color:var(--text2);font-weight:700;border-bottom:1px solid var(--border); }
td { padding:10px 12px;color:var(--text1);border-bottom:1px solid var(--border);vertical-align:middle; }
tr:last-child td { border-bottom:none; }
tr:hover td { background:var(--bg3); }

/* ── BADGES ───────────────────────────────────────────────── */
.badge {
  display:inline-flex;align-items:center;gap:3px;
  padding:2px 8px;border-radius:20px;font-size:10px;font-weight:600;
  font-family:'IBM Plex Mono',monospace;letter-spacing:.2px;
}
.badge::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor;}
.badge-active  { background:rgba(34,197,94,.1);color:var(--accent); }
.badge-expired { background:rgba(245,158,11,.1);color:var(--accent2); }
.badge-revoked { background:rgba(239,68,68,.1);color:#f87171; }
.badge-hold    { background:rgba(99,102,241,.1);color:#818cf8; }
.badge-pending { background:rgba(250,204,21,.1);color:#fbbf24; }
.badge-blocked { background:rgba(239,68,68,.12);color:#f87171; }
.badge-online  { background:rgba(34,197,94,.1);color:var(--accent); }
.badge-offline { background:rgba(239,68,68,.1);color:#f87171; }

/* ── BUTTONS ──────────────────────────────────────────────── */
.btn { display:inline-flex;align-items:center;gap:6px;padding:7px 16px;border-radius:8px;font-size:12px;font-weight:600;cursor:pointer;transition:all .14s;border:none;font-family:'Inter',sans-serif;text-decoration:none;white-space:nowrap; }
.btn-primary { background:var(--accent);color:#fff; }
[data-theme="dark-navy-green"] .btn-primary,
[data-theme="dark-forest"] .btn-primary,
[data-theme="dark-teal"] .btn-primary,
[data-theme="light-clean"] .btn-primary,
[data-theme="light-sage"] .btn-primary { color:#0a1200; }
.btn-primary:hover { opacity:.88;transform:translateY(-1px); }
.btn-secondary { background:var(--bg3);color:var(--text1);border:1px solid var(--border2); }
.btn-secondary:hover { background:var(--bg4);color:var(--text0); }
.btn-danger { background:rgba(239,68,68,.1);color:#f87171;border:1px solid rgba(239,68,68,.2); }
.btn-danger:hover { background:rgba(239,68,68,.2); }
.btn-sm { padding:4px 10px;font-size:10px; }
.btn-xs { padding:2px 8px;font-size:10px; }

/* ── FORMS ────────────────────────────────────────────────── */
.form-group { margin-bottom:14px; }
.form-label { display:block;font-size:11px;font-weight:600;color:var(--text2);margin-bottom:5px;text-transform:uppercase;letter-spacing:.5px; }
.input-field {
  width:100%;background:var(--bg3);border:1px solid var(--border2);border-radius:8px;
  padding:8px 12px;font-size:12px;color:var(--text0);font-family:'Inter',sans-serif;
  outline:none;transition:border-color .14s;
}
.input-field:focus { border-color:var(--accent); }
.input-field::placeholder { color:var(--text3); }
.select-field {
  width:100%;background:var(--bg3);border:1px solid var(--border2);border-radius:8px;
  padding:8px 12px;font-size:12px;color:var(--text0);outline:none;cursor:pointer;
}
textarea.input-field { resize:vertical;min-height:80px; }

/* ── TOGGLE SWITCH ────────────────────────────────────────── */
.toggle-switch { position:relative;display:inline-block;width:36px;height:20px; }
.toggle-switch input { opacity:0;width:0;height:0; }
.toggle-slider { position:absolute;inset:0;background:var(--bg4);border-radius:20px;cursor:pointer;transition:background .18s;border:1px solid var(--border2); }
.toggle-slider::before { content:'';position:absolute;width:14px;height:14px;left:2px;top:2px;background:var(--text2);border-radius:50%;transition:transform .18s,background .18s; }
.toggle-switch input:checked+.toggle-slider { background:var(--accent);border-color:var(--accent); }
.toggle-switch input:checked+.toggle-slider::before { transform:translateX(16px);background:#fff; }

/* ── MODALS ───────────────────────────────────────────────── */
.modal-overlay {
  position:fixed;inset:0;background:rgba(0,0,0,.65);
  display:flex;align-items:center;justify-content:center;
  z-index:1000;opacity:0;pointer-events:none;transition:opacity .18s;backdrop-filter:blur(4px);
}
.modal-overlay.open { opacity:1;pointer-events:auto; }
.modal {
  background:var(--bg2);border:1px solid var(--border2);border-radius:16px;
  padding:28px;min-width:400px;max-width:560px;width:90%;box-shadow:var(--shadow);
  transform:scale(.96);transition:transform .18s;
}
.modal-overlay.open .modal { transform:scale(1); }
.modal-title { font-size:18px;font-weight:700;color:var(--text0);margin-bottom:4px; }
.modal-sub   { font-size:11px;color:var(--text2);margin-bottom:22px; }
.modal-footer { display:flex;gap:8px;justify-content:flex-end;margin-top:20px; }

/* ── ALERTS / FLASH ───────────────────────────────────────── */
.alert { padding:10px 14px;border-radius:8px;font-size:12px;margin-bottom:14px;display:flex;align-items:center;gap:8px; }
.alert-success { background:rgba(34,197,94,.1);color:var(--accent);border:1px solid rgba(34,197,94,.25); }
.alert-error   { background:rgba(239,68,68,.1);color:#f87171;border:1px solid rgba(239,68,68,.25); }
.alert-warn    { background:rgba(245,158,11,.1);color:var(--accent2);border:1px solid rgba(245,158,11,.25); }
.alert-info    { background:rgba(56,189,248,.08);color:var(--accent3);border:1px solid rgba(56,189,248,.2); }

/* ── PROGRESS BARS ────────────────────────────────────────── */
.progress-bar-wrap { height:5px;background:var(--bg4);border-radius:10px;overflow:hidden; }
.progress-bar-fill { height:100%;border-radius:10px;transition:width .5s; }
.progress-item { margin-bottom:13px; }
.progress-header { display:flex;justify-content:space-between;margin-bottom:5px; }
.progress-label { font-size:12px;color:var(--text1);font-weight:500; }
.progress-value { font-size:11px;color:var(--text2);font-family:'IBM Plex Mono',monospace; }

/* ── AUTH PAGES ───────────────────────────────────────────── */
.auth-wrapper {
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:var(--bg0);padding:20px;
}
.auth-card {
  background:var(--bg2);border:1px solid var(--border2);
  border-radius:16px;padding:40px;width:100%;max-width:440px;
  box-shadow:var(--shadow);
}
.auth-logo { text-align:center;margin-bottom:32px; }
.auth-logo-icon {
  width:60px;height:60px;border-radius:16px;margin:0 auto 12px;
  background:linear-gradient(135deg,var(--accent),var(--accent3));
  display:flex;align-items:center;justify-content:center;
  font-size:28px;font-weight:800;color:#0a1200;
}
.auth-title { font-size:22px;font-weight:800;color:var(--text0);text-align:center;margin-bottom:4px; }
.auth-subtitle { font-size:12px;color:var(--text2);text-align:center; }
.auth-divider { text-align:center;color:var(--text3);font-size:11px;margin:16px 0; }

/* ── PAGINATION ───────────────────────────────────────────── */
.pagination { display:flex;gap:4px;align-items:center;padding-top:14px;border-top:1px solid var(--border); }
.page-btn { padding:4px 10px;border-radius:6px;border:1px solid var(--border2);background:var(--bg3);color:var(--text2);font-size:11px;cursor:pointer;text-decoration:none;transition:all .14s;font-family:'IBM Plex Mono',monospace; }
.page-btn:hover,.page-btn.active { background:var(--accent);border-color:var(--accent);color:#0a1200;font-weight:700; }
.page-info { font-size:11px;color:var(--text2);margin-left:auto;font-family:'IBM Plex Mono',monospace; }

/* ── MINI CHARTS ──────────────────────────────────────────── */
.mini-chart { margin-top:12px;height:32px;display:flex;align-items:flex-end;gap:2px; }
.mini-bar { flex:1;border-radius:2px 2px 0 0;min-height:3px;opacity:.4;transition:opacity .14s; }
.mini-bar:hover,.mini-bar.current { opacity:.85; }

/* ── TIMELINE ─────────────────────────────────────────────── */
.timeline { position:relative;padding-left:20px; }
.timeline::before { content:'';position:absolute;left:6px;top:8px;bottom:8px;width:1px;background:var(--border2); }
.tl-item { position:relative;padding:0 0 16px 16px; }
.tl-dot  { position:absolute;left:-20px;top:4px;width:10px;height:10px;border-radius:50%;border:2px solid var(--bg1); }
.tl-text { font-size:12px;color:var(--text1); }
.tl-time { font-size:10px;color:var(--text3);font-family:'IBM Plex Mono',monospace;margin-top:2px; }

/* ── ACTIVITY FEED ────────────────────────────────────────── */
.activity-item { display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--border); }
.activity-item:last-child { border-bottom:none; }
.activity-dot { width:8px;height:8px;border-radius:50%;margin-top:4px;flex-shrink:0; }
.activity-text { font-size:12px;color:var(--text1); }
.activity-time { font-size:10px;color:var(--text3);font-family:'IBM Plex Mono',monospace;margin-top:2px; }

/* ── TOAST NOTIFICATIONS ──────────────────────────────────── */
#toast-container { position:fixed;bottom:24px;right:24px;z-index:9999;display:flex;flex-direction:column;gap:8px; }
.toast { background:var(--bg2);border:1px solid var(--border2);border-radius:10px;padding:12px 16px;font-size:12px;color:var(--text0);display:flex;align-items:center;gap:10px;box-shadow:var(--shadow);max-width:320px;animation:toastIn .22s ease; }
.toast.toast-success { border-left:3px solid var(--accent); }
.toast.toast-error   { border-left:3px solid #f87171; }
.toast.toast-warn    { border-left:3px solid var(--accent2); }
@keyframes toastIn { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }

/* ── CONFIRM DIALOG ───────────────────────────────────────── */
#confirm-overlay { position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:2000;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .15s;backdrop-filter:blur(4px); }
#confirm-overlay.open { opacity:1;pointer-events:auto; }
.confirm-box { background:var(--bg2);border:1px solid var(--border2);border-radius:14px;padding:28px;max-width:380px;width:90%;box-shadow:var(--shadow); }
.confirm-title { font-size:16px;font-weight:700;color:var(--text0);margin-bottom:8px; }
.confirm-msg   { font-size:12px;color:var(--text2);margin-bottom:20px;line-height:1.6; }
.confirm-actions { display:flex;gap:8px;justify-content:flex-end; }

/* ── PAGE VIEWS ───────────────────────────────────────────── */
.page-view { display:none;animation:fadeUp .22s ease; }
.page-view.active { display:block; }
@keyframes fadeUp { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }

/* ── KV ROWS ──────────────────────────────────────────────── */
.kv-row { display:flex;justify-content:space-between;align-items:center;padding:7px 0;border-bottom:1px solid var(--border);font-size:12px; }
.kv-row:last-child { border-bottom:none; }
.kv-key { color:var(--text2);font-weight:500; }
.kv-val { color:var(--text0);font-family:'IBM Plex Mono',monospace;font-size:11px; }

/* ── CLI PREVIEW ──────────────────────────────────────────── */
.cli-bar { display:flex;align-items:center;gap:10px;background:var(--bg0);border:1px solid var(--border2);border-radius:8px;padding:9px 14px;margin-bottom:16px;font-family:'IBM Plex Mono',monospace; }
.cli-output { background:var(--bg0);border:1px solid var(--border);border-radius:8px;padding:14px;font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--text1);line-height:1.9;min-height:60px;overflow-y:auto;max-height:280px; }

/* ── CERT TABS ────────────────────────────────────────────── */
.page-tabs { display:flex;gap:0;border-bottom:1px solid var(--border);margin-bottom:20px; }
.page-tab { padding:9px 18px;background:none;border:none;border-bottom:2px solid transparent;font-size:12px;font-weight:500;color:var(--text2);cursor:pointer;font-family:'Inter',sans-serif;display:flex;align-items:center;gap:6px;transition:all .14s;white-space:nowrap;text-decoration:none; }
.page-tab:hover { color:var(--text0); }
.page-tab.active { color:var(--accent);border-bottom-color:var(--accent); }

/* ── TENANT CARD ──────────────────────────────────────────── */
.tenant-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px; }
.tenant-card { background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:16px;cursor:pointer;transition:all .18s; }
.tenant-card:hover { border-color:var(--border2);transform:translateY(-1px);box-shadow:var(--shadow); }
.tenant-stats { display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid var(--border); }
.tenant-stat-val { font-size:18px;font-weight:800;color:var(--text0); }
.tenant-stat-lbl { font-size:9px;color:var(--text2);text-transform:uppercase;letter-spacing:.5px; }

/* ── STAT CHIPS ───────────────────────────────────────────── */
.stat-chips { display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px; }
.stat-chip { background:var(--bg2);border:1px solid var(--border);border-top:2px solid var(--sc,var(--accent));border-radius:8px;padding:8px 14px;display:flex;flex-direction:column;gap:2px;min-width:80px; }
.chip-val { font-size:18px;font-weight:800;color:var(--text0);line-height:1; }
.chip-lbl { font-size:10px;color:var(--text2);text-transform:uppercase;letter-spacing:.4px; }

/* ── THEME SELECTOR GRID ──────────────────────────────────── */
.theme-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px; }
.theme-card { border-radius:10px;overflow:hidden;border:2px solid var(--border);cursor:pointer;transition:border-color .15s; }
.theme-card:hover,.theme-card.selected { border-color:var(--accent); }
.theme-thumb { height:52px;display:flex; }
.theme-info  { padding:7px 10px;background:var(--bg3); }
.layout-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px; }
.layout-card { border:2px solid var(--border);border-radius:10px;padding:12px;cursor:pointer;transition:all .15s;background:var(--bg3); }
.layout-card:hover,.layout-card.selected { border-color:var(--accent); }
.layout-thumb { height:44px;background:var(--bg2);border-radius:6px;overflow:hidden;margin-bottom:8px;border:1px solid var(--border);display:flex;flex-direction:column; }

/* ── SEARCH ───────────────────────────────────────────────── */
.search-wrap { position:relative; }
.search-wrap .input-field { padding-left:32px; }
.search-icon { position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--text3);font-size:11px;pointer-events:none; }

/* ── DRAWER ───────────────────────────────────────────────── */
.drawer-overlay { position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:200;opacity:0;pointer-events:none;transition:opacity .22s;backdrop-filter:blur(3px); }
.drawer-overlay.open { opacity:1;pointer-events:auto; }
.drawer { position:absolute;right:0;top:0;bottom:0;width:500px;background:var(--bg1);border-left:1px solid var(--border2);display:flex;flex-direction:column;transform:translateX(100%);transition:transform .28s cubic-bezier(.4,0,.2,1);overflow:hidden; }
.drawer-overlay.open .drawer { transform:translateX(0); }
.drawer-header { padding:18px 22px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;flex-shrink:0; }
.drawer-body   { flex:1;overflow-y:auto;padding:18px 22px; }
.drawer-footer { padding:12px 22px;border-top:1px solid var(--border);display:flex;gap:8px;flex-shrink:0; }
.drawer-tab { flex:1;padding:9px 4px;background:none;border:none;border-bottom:2px solid transparent;font-size:12px;font-weight:500;color:var(--text2);cursor:pointer;font-family:'Inter',sans-serif;transition:all .14s; }
.drawer-tab:hover { color:var(--text0); }
.drawer-tab.active { color:var(--accent);border-bottom-color:var(--accent); }

/* ── JOB PROGRESS ─────────────────────────────────────────── */
.job-bar-wrap { display:flex;align-items:center;gap:8px; }
.job-bar { flex:1;height:5px;background:var(--bg4);border-radius:10px;overflow:hidden; }
.job-bar-fill { height:100%;border-radius:10px;transition:width .4s; }

/* ── SECTION HEADERS ──────────────────────────────────────── */
.section-header { display:flex;align-items:center;justify-content:space-between;margin-bottom:16px; }
.section-title  { font-size:14px;font-weight:700;color:var(--text0); }

/* ── UTILITIES ────────────────────────────────────────────── */
.text-muted { color:var(--text2); }
.text-mono  { font-family:'IBM Plex Mono',monospace; }
.text-sm    { font-size:11px; }
.text-xs    { font-size:10px; }
.mt-1  { margin-top:4px; }  .mt-2 { margin-top:8px; }  .mt-3 { margin-top:12px; } .mt-4 { margin-top:16px; }
.mb-1  { margin-bottom:4px; }.mb-2 { margin-bottom:8px; }.mb-3 { margin-bottom:12px;}.mb-4 { margin-bottom:16px;}
.gap-2 { gap:8px; } .gap-3 { gap:12px; } .flex { display:flex; } .flex-wrap { flex-wrap:wrap; } .items-center { align-items:center; } .justify-between { justify-content:space-between; }
.w-full { width:100%; } .hidden { display:none!important; }
code { background:var(--bg3);border-radius:4px;padding:1px 6px;font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--text1); }
hr { border:none;border-top:1px solid var(--border);margin:14px 0; }

/* ── LEADERBOARD ──────────────────────────────────────────── */
.lb-row { display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--border); }
.lb-row:last-child { border-bottom:none; }
.lb-rank { font-size:16px;font-weight:800;color:var(--text3);width:24px;text-align:center;flex-shrink:0; }
.lb-rank.gold{color:#ffd700}.lb-rank.silver{color:#c0c0c0}.lb-rank.bronze{color:#cd7f32}
.lb-name { flex:1;font-size:12px;font-weight:500; }
.lb-bar-wrap { flex:1;height:5px;background:var(--bg4);border-radius:3px;overflow:hidden; }
.lb-bar-fill { height:100%;border-radius:3px;transition:width .5s; }
.lb-val { font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--text2);width:44px;text-align:right; }

/* ── RESPONSIVE ───────────────────────────────────────────── */
@media(max-width:960px){
  #sidebar { display:none; }
  #main { width:100vw; }
}