/* ============================================================
   LBAC — Refined Design System
   Forest + Gold · warm neutrals · light & dark (forest) modes
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,400..800;1,400..600&family=Newsreader:ital,opsz,wght@0,6..72,400..600;1,6..72,400..500&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* ---------- Tokens : LIGHT ---------- */
:root {
  /* warm-neutral surfaces */
  --bg:            oklch(0.984 0.005 120);
  --bg-2:          oklch(0.965 0.006 120);
  --surface:       oklch(1 0 0);
  --surface-2:     oklch(0.974 0.005 120);
  --surface-3:     oklch(0.958 0.006 120);
  --border:        oklch(0.915 0.006 130);
  --border-strong: oklch(0.86 0.008 135);
  --overlay:       oklch(0.22 0.02 150 / 0.42);

  /* ink */
  --text:          oklch(0.27 0.022 152);
  --text-muted:    oklch(0.47 0.018 150);
  --text-subtle:   oklch(0.60 0.014 145);
  --text-faint:    oklch(0.72 0.010 140);

  /* forest brand */
  --forest-50:  #F2FFF5;
  --forest-100: #D6F5DE;
  --forest-200: #ADEBBC;
  --forest-300: #6DD88B;
  --forest-400: #3EC463;
  --forest-500: #2BA82B;
  --forest-600: #1C8C41;
  --forest-700: #0B6A33;
  --forest-800: #054D28;
  --forest-900: #032E18;

  --brand:        var(--forest-800);   /* primary actions */
  --brand-hover:  var(--forest-700);
  --brand-bright: var(--forest-500);   /* accents, highlights */
  --brand-ink:    var(--forest-800);   /* brand-colored text on light */
  --brand-soft:   oklch(0.95 0.04 150);/* tinted fill */
  --brand-soft-bd:oklch(0.88 0.06 150);
  --on-brand:     #F2FFF5;

  /* gold accent */
  --gold:        #B8923A;
  --gold-bright: #D9B65A;
  --gold-deep:   #8A6E22;
  --gold-soft:   oklch(0.95 0.05 92);
  --gold-soft-bd:oklch(0.88 0.07 92);

  /* status */
  --ok:        #1C8C41;   --ok-soft:   oklch(0.95 0.04 150); --ok-bd: oklch(0.86 0.07 150);
  --info:      #2563C9;   --info-soft: oklch(0.95 0.035 255);--info-bd: oklch(0.86 0.06 255);
  --warn:      #B7791F;   --warn-soft: oklch(0.95 0.045 85); --warn-bd: oklch(0.87 0.07 85);
  --danger:    #C0392B;   --danger-soft:oklch(0.95 0.04 28); --danger-bd: oklch(0.87 0.06 28);
  --violet:    #6D45C9;   --violet-soft:oklch(0.95 0.04 295);--violet-bd: oklch(0.87 0.06 295);

  /* radii */
  --r-xs: 6px; --r-sm: 9px; --r-md: 13px; --r-lg: 18px; --r-xl: 24px; --r-full: 999px;

  /* elevation — soft, layered, low-saturation */
  --sh-xs: 0 1px 2px oklch(0.3 0.02 150 / 0.06);
  --sh-sm: 0 1px 2px oklch(0.3 0.02 150 / 0.06), 0 2px 6px oklch(0.3 0.02 150 / 0.05);
  --sh-md: 0 2px 4px oklch(0.3 0.02 150 / 0.05), 0 8px 20px oklch(0.3 0.02 150 / 0.08);
  --sh-lg: 0 4px 8px oklch(0.3 0.02 150 / 0.06), 0 18px 40px oklch(0.3 0.02 150 / 0.12);
  --ring:  0 0 0 3px oklch(0.55 0.12 150 / 0.28);

  /* type */
  --font-ui: 'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-display: 'Newsreader', Georgia, serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
}

/* ---------- Tokens : DARK (forest) ---------- */
html.dark {
  --bg:            oklch(0.20 0.022 158);
  --bg-2:          oklch(0.185 0.022 158);
  --surface:       oklch(0.245 0.024 158);
  --surface-2:     oklch(0.275 0.026 158);
  --surface-3:     oklch(0.305 0.028 158);
  --border:        oklch(0.34 0.026 158);
  --border-strong: oklch(0.42 0.03 158);
  --overlay:       oklch(0.08 0.02 158 / 0.6);

  --text:          oklch(0.96 0.012 140);
  --text-muted:    oklch(0.82 0.018 142);
  --text-subtle:   oklch(0.68 0.02 145);
  --text-faint:    oklch(0.56 0.022 148);

  --brand:        var(--forest-500);
  --brand-hover:  var(--forest-400);
  --brand-bright: var(--forest-400);
  --brand-ink:    var(--forest-300);
  --brand-soft:   oklch(0.32 0.06 156);
  --brand-soft-bd:oklch(0.42 0.08 156);
  --on-brand:     #04140A;

  --gold:        #D9B65A;
  --gold-bright: #ECCE7C;
  --gold-deep:   #B8923A;
  --gold-soft:   oklch(0.36 0.05 92);
  --gold-soft-bd:oklch(0.46 0.07 92);

  --ok-soft:   oklch(0.34 0.05 150); --ok-bd: oklch(0.46 0.07 150); --ok: #5BD07A;
  --info-soft: oklch(0.34 0.045 255);--info-bd: oklch(0.46 0.06 255);--info: #7AA8F5;
  --warn-soft: oklch(0.36 0.05 85);  --warn-bd: oklch(0.46 0.07 85); --warn: #E2B354;
  --danger-soft:oklch(0.34 0.05 28); --danger-bd: oklch(0.46 0.07 28);--danger: #EE8478;
  --violet-soft:oklch(0.34 0.05 295);--violet-bd: oklch(0.46 0.07 295);--violet: #B69AF0;

  --sh-xs: 0 1px 2px oklch(0 0 0 / 0.4);
  --sh-sm: 0 1px 2px oklch(0 0 0 / 0.4), 0 2px 6px oklch(0 0 0 / 0.34);
  --sh-md: 0 2px 4px oklch(0 0 0 / 0.4), 0 8px 22px oklch(0 0 0 / 0.5);
  --sh-lg: 0 4px 10px oklch(0 0 0 / 0.45), 0 20px 44px oklch(0 0 0 / 0.6);
  --ring:  0 0 0 3px oklch(0.7 0.14 150 / 0.32);
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-ui);
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv01";
  transition: background-color .35s ease, color .35s ease;
}
h1,h2,h3,h4 { margin: 0; font-weight: 650; letter-spacing: -0.018em; color: var(--text); }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--brand-bright); color: var(--on-brand); }

.font-display { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.01em; line-height: 1.12; }
.font-mono { font-family: var(--font-mono); }
.tnum { font-variant-numeric: tabular-nums; }

/* scrollbars */
*::-webkit-scrollbar { width: 11px; height: 11px; }
*::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--text-faint); background-clip: padding-box; }
*::-webkit-scrollbar-track { background: transparent; }

/* ---------- Semantic surface / text utilities ---------- */
.bg-page { background: var(--bg); }
.bg-page-2 { background: var(--bg-2); }
.surface { background: var(--surface); }
.surface-2 { background: var(--surface-2); }
.surface-3 { background: var(--surface-3); }
.ink { color: var(--text); }
.ink-muted { color: var(--text-muted); }
.ink-subtle { color: var(--text-subtle); }
.ink-faint { color: var(--text-faint); }
.ink-brand { color: var(--brand-ink); }
.ink-gold { color: var(--gold-deep); }
html.dark .ink-gold { color: var(--gold); }
.bd { border-color: var(--border) !important; }
.bd-strong { border-color: var(--border-strong) !important; }

/* ---------- Card ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
}
.card-2 { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); }
.card-flush { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh-xs); }
.card-hover { transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease; }
.card-hover:hover { box-shadow: var(--sh-md); border-color: var(--border-strong); transform: translateY(-2px); }

/* ---------- Eyebrow / label ---------- */
.eyebrow {
  font-size: 11px; font-weight: 650; letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--text-subtle);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-ui); font-size: 14px; font-weight: 600; line-height: 1;
  padding: 10px 16px; border-radius: var(--r-sm); border: 1px solid transparent;
  cursor: pointer; transition: background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease, transform .08s ease;
  white-space: nowrap; user-select: none;
}
.btn:active { transform: translateY(0.5px); }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }
.btn svg { width: 16px; height: 16px; }
.btn--primary { background: var(--brand); color: var(--on-brand); box-shadow: var(--sh-xs); }
.btn--primary:hover { background: var(--brand-hover); }
.btn--gold { background: var(--gold); color: #1A1303; }
.btn--gold:hover { background: var(--gold-bright); }
.btn--ghost { background: transparent; color: var(--text); border-color: var(--border-strong); }
.btn--ghost:hover { background: var(--surface-2); border-color: var(--text-faint); }
.btn--subtle { background: var(--surface-2); color: var(--text); }
.btn--subtle:hover { background: var(--surface-3); }
.btn--danger { background: transparent; color: var(--danger); border-color: var(--danger-bd); }
.btn--danger:hover { background: var(--danger-soft); }
.btn--sm { padding: 7px 12px; font-size: 13px; border-radius: var(--r-xs); }
.btn--xs { padding: 5px 9px; font-size: 12px; border-radius: var(--r-xs); gap: 5px; }
.btn--xs svg { width: 13px; height: 13px; }
.btn--lg { padding: 13px 22px; font-size: 15px; }
.btn--icon { padding: 9px; }
.btn--block { width: 100%; }

/* ---------- Badges / pills ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  font-size: 11.5px; font-weight: 600; line-height: 1; letter-spacing: 0.01em;
  padding: 4px 9px; border-radius: var(--r-full); border: 1px solid transparent;
}
.badge .dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; flex: none; }
.badge--ok     { background: var(--ok-soft);     color: var(--ok);     border-color: var(--ok-bd); }
.badge--info   { background: var(--info-soft);   color: var(--info);   border-color: var(--info-bd); }
.badge--warn   { background: var(--warn-soft);   color: var(--warn);   border-color: var(--warn-bd); }
.badge--danger { background: var(--danger-soft); color: var(--danger); border-color: var(--danger-bd); }
.badge--violet { background: var(--violet-soft); color: var(--violet); border-color: var(--violet-bd); }
.badge--gold   { background: var(--gold-soft);   color: var(--gold-deep); border-color: var(--gold-soft-bd); }
html.dark .badge--gold { color: var(--gold-bright); }
.badge--neutral{ background: var(--surface-3);   color: var(--text-muted); border-color: var(--border); }
.badge--brand  { background: var(--brand-soft);  color: var(--brand-ink); border-color: var(--brand-soft-bd); }

/* ---------- Inputs ---------- */
.input, .select, .textarea {
  width: 100%; font-family: var(--font-ui); font-size: 14px; color: var(--text);
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--r-sm); padding: 10px 12px; transition: border-color .15s, box-shadow .15s;
}
.input::placeholder, .textarea::placeholder { color: var(--text-faint); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--brand-bright); box-shadow: var(--ring); }
.input--sm { padding: 7px 10px; font-size: 13px; }
.field-label { display: block; font-size: 13px; font-weight: 600; color: var(--text-muted); margin-bottom: 6px; }

/* search input with icon */
.search { position: relative; display: flex; align-items: center; }
.search svg { position: absolute; left: 12px; width: 17px; height: 17px; color: var(--text-faint); pointer-events: none; }
.search .input { padding-left: 38px; }

/* ---------- Segmented control ---------- */
.seg { display: inline-flex; padding: 3px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); gap: 2px; }
.seg button, .seg a {
  font-family: var(--font-ui); font-size: 13px; font-weight: 600; color: var(--text-muted);
  padding: 6px 13px; border: none; background: transparent; border-radius: 6px; cursor: pointer; transition: all .15s;
  white-space: nowrap; text-decoration: none; display: inline-flex; align-items: center;
}
.seg button:hover, .seg a:hover { color: var(--text); }
.seg button.active, .seg a.active { background: var(--surface); color: var(--text); box-shadow: var(--sh-xs); }

/* ---------- Tabs ---------- */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); overflow-x: auto; }
.tab {
  font-size: 14px; font-weight: 600; color: var(--text-subtle); padding: 11px 14px;
  border: none; background: transparent; cursor: pointer; border-bottom: 2px solid transparent;
  margin-bottom: -1px; white-space: nowrap; transition: color .15s, border-color .15s; display: inline-flex; align-items: center; gap: 8px;
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--brand-ink); border-bottom-color: var(--brand-bright); }
.tab .count { font-size: 11px; font-weight: 600; background: var(--surface-3); color: var(--text-muted); padding: 1px 7px; border-radius: 999px; }
.tab.active .count { background: var(--brand-soft); color: var(--brand-ink); }

/* ---------- Stat tile ---------- */
.stat { padding: 18px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--sh-sm); }
.stat__label { font-size: 12px; font-weight: 600; color: var(--text-subtle); display: flex; align-items: center; gap: 7px; }
.stat__value { font-size: 30px; font-weight: 700; letter-spacing: -0.03em; color: var(--text); margin-top: 8px; font-variant-numeric: tabular-nums; }
.stat__meta { margin-top: 6px; font-size: 12.5px; color: var(--text-subtle); }
.delta { display: inline-flex; align-items: center; gap: 3px; font-weight: 650; font-size: 12.5px; }
.delta--up { color: var(--ok); }
.delta--down { color: var(--danger); }

/* ---------- Tables ---------- */
.tbl { width: 100%; border-collapse: collapse; }
.tbl thead th {
  text-align: left; font-size: 11px; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-subtle); padding: 11px 16px; border-bottom: 1px solid var(--border); white-space: nowrap;
  position: sticky; top: 0; background: var(--surface-2); z-index: 1;
}
.tbl tbody td { padding: 14px 16px; border-bottom: 1px solid var(--border); font-size: 14px; color: var(--text); vertical-align: middle; }
.tbl tbody tr { transition: background-color .12s; }
.tbl tbody tr:hover { background: var(--surface-2); }
.tbl tbody tr:last-child td { border-bottom: none; }

/* ---------- Avatar ---------- */
.avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; font-weight: 650; flex: none;
  background: linear-gradient(135deg, var(--forest-600), var(--forest-800)); color: #fff; }
.avatar--gold { background: linear-gradient(135deg, var(--gold-bright), var(--gold-deep)); color: #221703; }
.avatar--sm { width: 30px; height: 30px; font-size: 12px; }
.avatar--md { width: 38px; height: 38px; font-size: 13px; }
.avatar--lg { width: 48px; height: 48px; font-size: 16px; }

/* ---------- Progress / bars ---------- */
.bar { height: 8px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.bar > span { display: block; height: 100%; border-radius: 999px; background: var(--brand-bright); transition: width .6s cubic-bezier(.2,.8,.2,1); }
.bar--gold > span { background: var(--gold); }

/* quality ring (conic donut via mask) */
.qring { position: relative; display: inline-grid; place-items: center; flex: none; }
.qring > i { position: absolute; inset: 0; border-radius: 999px;
  -webkit-mask: radial-gradient(closest-side, #0000 62%, #000 63%);
          mask: radial-gradient(closest-side, #0000 62%, #000 63%); }
.qring > span { position: relative; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; }

/* ---------- Divider ---------- */
.hr { height: 1px; background: var(--border); border: none; margin: 0; }
.vr { width: 1px; background: var(--border); align-self: stretch; }

/* ---------- Sidebar nav (app shell) ---------- */
.nav-item {
  display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: var(--r-sm);
  font-size: 14px; font-weight: 550; color: var(--text-muted); cursor: pointer; transition: all .14s; position: relative;
}
.nav-item svg { width: 18px; height: 18px; flex: none; opacity: .85; }
.nav-item > span { white-space: nowrap; }
.nav-item .tail { margin-left: auto; flex: none; }
.nav-item:hover { background: var(--surface-2); color: var(--text); }
.nav-item.active { background: var(--brand-soft); color: var(--brand-ink); font-weight: 650; }
.nav-item.active svg { opacity: 1; }
.nav-item .tail { margin-left: auto; }
.nav-section { font-size: 10.5px; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; color: var(--text-faint); padding: 0 12px; margin: 18px 0 7px; }

/* ---------- Misc helpers ---------- */
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
[x-cloak] { display: none !important; }
.elev-md { box-shadow: var(--sh-md); }
.elev-lg { box-shadow: var(--sh-lg); }

/* placeholder image (striped) */
.ph {
  background-color: var(--surface-2);
  background-image: repeating-linear-gradient(135deg, var(--surface-3) 0 12px, transparent 12px 24px);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-faint); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em;
}

/* tooltip-ish caption */
.cap { font-size: 12px; color: var(--text-subtle); }

/* focus reset for clickable cards */
.click { cursor: pointer; }
.click:focus-visible { outline: none; box-shadow: var(--ring); }

/* sparkline svg sizing */
.spark { display: block; width: 100%; height: 100%; }
.spark path.line { fill: none; stroke: var(--brand-bright); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.spark path.area { fill: var(--brand-soft); opacity: .55; stroke: none; }

/* ---------- App shell layout ---------- */
.app { display: flex; height: 100vh; height: 100dvh; overflow: hidden; }
.appside {
  width: 248px; flex: none; background: var(--surface); border-right: 1px solid var(--border);
  z-index: 40; transition: transform .28s cubic-bezier(.2,.8,.2,1);
}
.appmain { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.apptop {
  height: 64px; flex: none; display: flex; align-items: center; gap: 12px;
  padding: 0 18px; background: oklch(1 0 0 / 0.7); backdrop-filter: blur(12px) saturate(1.4);
  border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 30;
}
html.dark .apptop { background: oklch(0.245 0.024 158 / 0.72); }
.appview { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; scroll-behavior: smooth; }

@media (max-width: 767px) {
  .appside { position: fixed; top: 0; bottom: 0; left: 0; transform: translateX(-100%); box-shadow: var(--sh-lg); }
  .appside.side-open { transform: none; }
}

/* page width */
.page { max-width: 1280px; margin: 0 auto; padding: 26px 24px 64px; }
@media (max-width: 640px) { .page { padding: 18px 16px 56px; } }

/* responsive grid helper for KPI rows handled by Tailwind in pages */

/* toggle switch */
.toggle { position:relative; width:42px; height:24px; border-radius:99px; background:var(--surface-3); border:1px solid var(--border-strong); cursor:pointer; transition:background .2s, border-color .2s; flex:none; }
.toggle.on { background:var(--brand-bright); border-color:var(--brand-bright); }
.toggle::after { content:""; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:99px; background:#fff; box-shadow:var(--sh-xs); transition:transform .2s; }
.toggle.on::after { transform:translateX(18px); }

/* animate-in — transform only so content is never invisible (screenshot/export safe) */
@keyframes rise { from { transform: translateY(10px); } to { transform: none; } }
.rise { animation: rise .5s cubic-bezier(.2,.8,.2,1) both; }
@media (prefers-reduced-motion: reduce) { .rise { animation: none; } }
.rise-2 { animation-delay: .06s; }
.rise-3 { animation-delay: .12s; }
.rise-4 { animation-delay: .18s; }