/* ─── CSS Variables ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Palette A "Savanna Green" (same values as the Figma Color variables). Light is the default. */
:root, [data-theme="light"] {
  --bg-base:      #F4F7F5;
  --bg-surface:   #FFFFFF;
  --bg-card:      #FFFFFF;
  --bg-hover:     #EFF4F1;
  --bg-elevated:  #FFFFFF;
  --primary:      #0B6E4F;   /* brand: main buttons, links, active items, focus */
  --primary-soft: rgba(11,110,79,.10);
  --primary-dim:  #08573E;
  --on-primary:   #FFFFFF;   /* text and icons on --primary */
  --warning:      #9A5B00;   /* pending, needs a look */
  --warning-soft: rgba(154,91,0,.10);
  --green:        #1E7D32;   /* success */
  --green-glow:   rgba(30,125,50,.10);
  --red:          #C0262D;   /* error */
  --red-glow:     rgba(192,38,45,.10);
  --blue:         #1A5FB4;   /* info */
  --blue-glow:    rgba(26,95,180,.10);
  --purple:       #6E40C9;
  --text-1: #13201B;
  --text-2: #55655E;
  --text-3: #5E6E67;
  --border:    #DCE5E0;
  --border-hi: #C3D0C9;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --sidebar-w: 240px;
  --topbar-h:  60px;
}

[data-theme="dark"] {
  --bg-base:      #0D1512;
  --bg-surface:   #111A16;
  --bg-card:      #15201C;
  --bg-hover:     #192520;
  --bg-elevated:  #1F2D28;
  --primary:      #3CC48F;
  --primary-soft: rgba(60,196,143,.16);
  --primary-dim:  #2A9A6F;
  --on-primary:   #06261A;
  --warning:      #F0A93B;
  --warning-soft: rgba(240,169,59,.16);
  --green:        #4CC274;
  --green-glow:   rgba(76,194,116,.16);
  --red:          #FF6B6B;
  --red-glow:     rgba(255,107,107,.16);
  --blue:         #6AA8FF;
  --blue-glow:    rgba(106,168,255,.16);
  --purple:       #BC8CFF;
  --text-1: #E6EEEA;
  --text-2: #9AABA3;
  --text-3: #85978E;
  --border:    #26352F;
  --border-hi: #33463E;
}

/* ─── Theme transitions ─────────────────────────────────────── */
body, aside, header, .card-box, .stat-box, .nav-lnk, .feed-row, tbody td {
  transition: background-color .25s ease, border-color .25s ease, color .2s ease;
}

/* ─── Keyframes ─────────────────────────────────────────────── */
@keyframes pulse-primary {
  0%,100% { box-shadow: 0 0 0 0 var(--primary-soft); }
  50%      { box-shadow: 0 0 0 6px transparent; }
}
@keyframes feedSlide {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.3} }

.content-area { animation: fadeUp .3s ease; }

/* ─── Scrollbars ────────────────────────────────────────────── */
.content-area { scrollbar-width: thin; scrollbar-color: var(--border-hi) transparent; }
.content-area::-webkit-scrollbar { width: 5px; }
.content-area::-webkit-scrollbar-track { background: transparent; }
.content-area::-webkit-scrollbar-thumb { background: var(--border-hi); border-radius: 3px; }
.tree-scroll::-webkit-scrollbar { width: 4px; }
.tree-scroll::-webkit-scrollbar-thumb { background: var(--border-hi); border-radius: 2px; }

/* ─── Brand dot ─────────────────────────────────────────────── */
.brand-dot { animation: pulse-primary 2s infinite; }

/* ─── Nav active state ──────────────────────────────────────── */
.nav-lnk.active {
  background: var(--primary-soft) !important;
  color: var(--primary) !important;
  border-left: 2px solid var(--primary);
  padding-left: 10px;
}
.nav-lnk.active svg { opacity: 1 !important; }

/* ─── Live dot ──────────────────────────────────────────────── */
.live-dot { animation: blink 1.4s infinite; }

/* ─── Welcome banner ────────────────────────────────────────── */
.welcome-banner {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--primary-soft) 0%, transparent 65%), var(--bg-card);
  border-color: var(--border);
}
.welcome-banner::before {
  content: '';
  position: absolute; right: -60px; top: -60px;
  width: 300px; height: 300px;
  background: radial-gradient(circle, var(--primary-soft) 0%, transparent 70%);
  pointer-events: none;
}
.welcome-banner::after {
  content: '';
  position: absolute; right: 32px; bottom: -20px;
  width: 120px; height: 120px;
  border: 30px solid var(--primary-soft);
  border-radius: 50%;
  opacity: .6;
  pointer-events: none;
}
.welcome-pill {
  background: rgba(255,255,255,.06);
  border-color: var(--border);
}
[data-theme="light"] .welcome-pill { background: var(--bg-hover); }

/* ─── Stat card glow ────────────────────────────────────────── */
.stat-box { position: relative; overflow: hidden; }
.stat-box::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, var(--card-glow, transparent) 0%, transparent 60%);
  pointer-events: none;
}
.stat-box.primary { --card-glow: var(--primary-soft); }
.stat-box.green   { --card-glow: var(--green-glow); }
.stat-box.red     { --card-glow: var(--red-glow); }
.stat-box.blue    { --card-glow: var(--blue-glow); }

/* ─── Badges ────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center;
  font-size: 11px; font-weight: 500;
  padding: 3px 9px; border-radius: 20px;
}
.badge.primary { background: var(--primary-soft);       color: var(--primary); }
.badge.green  { background: var(--green-glow);          color: var(--green); }
.badge.red    { background: var(--red-glow);            color: var(--red); }
.badge.amber  { background: var(--warning-soft);        color: var(--warning); }   /* pending / needs a look */
.badge.blue   { background: var(--blue-glow);           color: var(--blue); }
.badge.purple { background: rgba(188,140,255,.12);      color: var(--purple); }
.badge.gray   { background: rgba(100,120,140,.12);      color: var(--text-2); }
[data-theme="light"] .badge.purple { background: rgba(110,64,201,.08); }
[data-theme="light"] .badge.gray   { background: rgba(70,90,110,.08); }

/* ─── Level badges ──────────────────────────────────────────── */
.lv-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; font-weight: 500;
  padding: 1px 5px; border-radius: 3px; flex-shrink: 0;
}
.lv0 { background: var(--warning-soft);  color: var(--warning); }
.lv1 { background: var(--blue-glow);     color: var(--blue); }
.lv2 { background: rgba(188,140,255,.18); color: var(--purple); }
.lv3 { background: var(--green-glow);    color: var(--green); }
.lv4 { background: var(--red-glow);      color: var(--red); }
.lv5 { background: rgba(255,166,56,.15);  color: #FFA63A; }
.lv6 { background: rgba(100,210,255,.15); color: #64D2FF; }
[data-theme="light"] .lv2 { background: rgba(110,64,201,.1); }

/* ─── Feed icon colors ──────────────────────────────────────── */
.feed-icon-create { background: var(--green-glow); }
.feed-icon-update { background: var(--blue-glow); }
.feed-icon-delete { background: var(--red-glow); }
.feed-icon-login  { background: var(--primary-soft); }
.feed-icon-denied { background: rgba(188,140,255,.12); }
[data-theme="light"] .feed-icon-denied { background: rgba(110,64,201,.08); }

/* ─── Feed status colors ────────────────────────────────────── */
.feed-st-success { background: var(--green-glow);         color: var(--green); }
.feed-st-failure { background: var(--red-glow);           color: var(--red); }
.feed-st-denied  { background: rgba(188,140,255,.12);     color: var(--purple); }
[data-theme="light"] .feed-st-denied { background: rgba(110,64,201,.08); color: var(--purple); }

/* ─── Feed item animation ───────────────────────────────────── */
.feed-row { animation: feedSlide .3s ease; }

/* ─── Tree ──────────────────────────────────────────────────── */
.tree-children { padding-left: 24px; border-left: 1px dashed var(--border); margin-left: 21px; }
.tree-children.collapsed { display: none; }
.tree-toggle { transition: transform .2s; }
.tree-toggle.open { transform: rotate(90deg); }

/* ─── Table hover ───────────────────────────────────────────── */
tbody tr:hover td { background: var(--bg-hover); }
tbody tr:last-child td { border-bottom: none !important; }

/* ─── DaisyUI overrides ─────────────────────────────────────── */
.btn { font-family: 'Plus Jakarta Sans', sans-serif; text-transform: none; }
.select { font-family: 'Plus Jakarta Sans', sans-serif; }