/* styles.css — Sprout-grade. Themed at runtime via --primary (per-tenant brand config).
   Tokens: #fff cards on #f5f6f8, hairline borders, system font, NO shadows / NO gradients. */
:root {
  /* colour */
  --primary: #ff5f00;
  --bg: #f5f6f8; --card: #fff; --ink: #11151c; --muted: #6b7280; --faint: #9aa1ab;
  --line: #e6e8ec; --line-strong: #d7dbe0;
  --up: #15994f; --down: #dc2626;
  --primary-soft: color-mix(in srgb, var(--primary) 10%, #fff);
  /* spacing scale (4px base) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 22px; --s-6: 32px;
  /* type ramp + 2 weights */
  --fs-xs: 11px; --fs-sm: 12px; --fs-md: 14px; --fs-lg: 16px; --fs-xl: 25px;
  --fw: 500; --fw-b: 700;
  /* radius + border */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --bw: 1px;
  --radius: var(--r-md);
  /* layout */
  --nav-w: 220px; --topbar-h: 60px;
  /* motion (subtle only) */
  --t: 120ms ease;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; }
button { cursor: pointer; font: inherit; }
a { color: var(--primary); }
h1, h2, h3 { margin: 0; }

/* buttons */
.btn { background: var(--primary); color: #fff; border: 0; border-radius: 8px; padding: 9px 15px; font-weight: 600; font-size: 13px; }
.btn.ghost { background: #fff; color: var(--ink); border: 1px solid var(--line-strong); }
.btn.sm { padding: 6px 11px; font-size: 12px; }
.btn:disabled { opacity: .55; cursor: default; }
.err { color: var(--down); font-size: 13px; margin-top: 10px; }
.muted { color: var(--muted); }

/* login */
.login-wrap { min-height: 100vh; display: grid; place-items: center; background: var(--bg); }
.login-card { background: var(--card); padding: 34px; border-radius: 16px; width: 350px; border: 1px solid var(--line); }
.login-card .mark { width: 30px; height: 30px; border-radius: 8px; background: var(--primary); margin-bottom: 14px; }
.login-card h1 { font-size: 19px; }
.login-card p { margin: 4px 0 22px; color: var(--muted); font-size: 13px; }
.login-card label { display: block; font-size: 12px; color: var(--muted); margin: 14px 0 5px; }
.login-card input { width: 100%; padding: 11px 12px; border: 1px solid var(--line-strong); border-radius: 8px; font-size: 14px; }
.login-card input:focus { outline: none; border-color: var(--primary); }

/* app shell: fixed left nav + main column */
.shell { display: flex; min-height: 100vh; }
.nav { width: var(--nav-w); flex: 0 0 var(--nav-w); background: var(--card); border-right: 1px solid var(--line); position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 16px 12px; gap: 2px; }
.nav .brand { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 15px; padding: 6px 8px 16px; }
.nav .brand img { height: 24px; }
.nav .brand .dot { width: 22px; height: 22px; border-radius: 6px; background: var(--primary); }
.nav-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: transparent; border: 0; border-radius: 9px; padding: 9px 11px; color: var(--muted); font-weight: 600; font-size: 13px; }
.nav-item:hover { background: #f2f3f5; color: var(--ink); }
.nav-item.active { background: var(--primary-soft); color: var(--primary); }
.nav-item .ico { width: 17px; height: 17px; flex: 0 0 17px; display: inline-flex; }
.nav-item .ico svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.nav-item .count { margin-left: auto; background: var(--primary); color: #fff; font-size: 11px; border-radius: 9px; padding: 0 7px; line-height: 18px; }
.nav .who { margin-top: auto; font-size: 12px; color: var(--faint); padding: 10px 8px 4px; border-top: 1px solid var(--line); }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { height: var(--topbar-h); flex: 0 0 var(--topbar-h); background: var(--card); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 14px; padding: 0 22px; position: sticky; top: 0; z-index: 5; }
.topbar .title { font-size: 16px; font-weight: 700; }
.topbar .range { font-size: 12px; color: var(--muted); background: #f2f3f5; border: 1px solid var(--line); border-radius: 7px; padding: 4px 9px; }
.topbar .spacer { flex: 1; }
.topbar input.tenant { padding: 7px 10px; border: 1px solid var(--line-strong); border-radius: 8px; font: inherit; font-size: 13px; width: 150px; }
.exports { display: flex; gap: 8px; }

.content { padding: 22px 26px 64px; max-width: 1280px; width: 100%; }
.view-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 4px; }
.view-head h2 { font-size: 18px; }
.view-head .sub { color: var(--muted); font-size: 13px; }

/* cards / sections */
.section { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; margin-top: 18px; }
.section > h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.freshness { color: var(--faint); font-size: 11.5px; margin-top: 12px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 900px) { .grid2 { grid-template-columns: 1fr; } .nav { --nav-w: 64px; } .nav-item span.lbl, .nav .brand .lbl { display: none; } }

/* KPI row */
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(186px, 1fr)); gap: 14px; margin-top: 18px; }
.kpi { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 15px 16px; display: flex; flex-direction: column; gap: 3px; min-height: 104px; }
.kpi .label { color: var(--muted); font-size: 12px; }
.kpi .value { font-size: 25px; font-weight: 700; letter-spacing: -.01em; }
.kpi .spark { height: 30px; margin: 2px -4px -2px; }
.delta { font-size: 12.5px; font-weight: 700; display: inline-flex; align-items: center; gap: 3px; }
.delta.up { color: var(--up); } .delta.down { color: var(--down); } .delta.flat { color: var(--faint); }

/* tables */
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
th { color: var(--muted); font-weight: 600; font-size: 11.5px; text-transform: uppercase; letter-spacing: .03em; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #fafbfc; }
td.cap { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* chips */
.chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; border-radius: 999px; padding: 2px 10px; border: 1px solid var(--line-strong); color: var(--muted); background: #fff; }
.chip.on { background: var(--primary-soft); color: var(--primary); border-color: transparent; }
.chip.comment { color: #2563eb; } .chip.dm { color: #7c3aed; } .chip.mention { color: #c2410c; } .chip.reply { color: var(--up); }
.badge { background: var(--primary); color: #fff; border-radius: 999px; padding: 1px 8px; font-size: 11px; font-weight: 700; }
.status-pill { font-size: 11px; font-weight: 700; border-radius: 999px; padding: 2px 9px; text-transform: capitalize; }
.status-pill.draft { background: #eef0f2; color: var(--muted); }
.status-pill.needs_approval { background: #fff4e8; color: #c2410c; }
.status-pill.approved, .status-pill.scheduled, .status-pill.posted { background: #e8f6ee; color: var(--up); }
.status-pill.rejected, .status-pill.failed { background: #fdeaea; color: var(--down); }

/* states */
.skel { background: linear-gradient(90deg,#eef0f2,#f6f7f8,#eef0f2); background-size: 200% 100%; animation: sh 1.2s infinite; border-radius: 8px; }
@keyframes sh { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
.skel-kpi { height: 104px; }
.skel-chart { height: 260px; }
.empty, .error { text-align: center; color: var(--muted); padding: 40px 20px; }
.empty .big, .error .big { font-size: 15px; color: var(--ink); margin-bottom: 6px; font-weight: 600; }
.error { color: var(--down); }

/* approvals / cards */
.cards { display: flex; flex-direction: column; gap: 12px; }
.card { border: 1px solid var(--line); border-radius: var(--radius); padding: 15px; background: var(--card); }
.card-actions { display: flex; gap: 8px; margin-top: 12px; }
.confirm { margin-top: 10px; color: var(--up); font-weight: 600; font-size: 13px; }
textarea { font: inherit; width: 100%; min-height: 64px; border: 1px solid var(--line-strong); border-radius: 8px; padding: 9px; resize: vertical; }
textarea:focus, input:focus { outline: none; }

/* calendar (publishing) */
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal .dow { font-size: 11px; text-transform: uppercase; color: var(--muted); text-align: center; padding-bottom: 4px; font-weight: 600; }
.cal .day { min-height: 84px; border: 1px solid var(--line); border-radius: 8px; padding: 6px; background: #fff; display: flex; flex-direction: column; gap: 4px; }
.cal .day.pad { background: #fafbfc; border-style: dashed; }
.cal .day .dnum { font-size: 11px; color: var(--faint); }
.cal .ev { font-size: 11px; border-radius: 6px; padding: 3px 6px; border-left: 3px solid var(--primary); background: var(--primary-soft); color: var(--ink); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal .ev.posted { border-left-color: var(--up); background: #e8f6ee; }
.cal .ev.needs_approval { border-left-color: #c2410c; background: #fff4e8; }
.cal .ev.rejected { border-left-color: var(--down); background: #fdeaea; }

/* drawer */
.drawer-bg { position: fixed; inset: 0; background: rgba(17,21,28,.32); z-index: 20; }
.drawer { position: fixed; top: 0; right: 0; height: 100vh; width: 420px; max-width: 92vw; background: #fff; border-left: 1px solid var(--line); z-index: 21; padding: 22px; overflow: auto; }
.drawer h3 { font-size: 15px; margin-bottom: 4px; }
.drawer .row { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.preview { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 14px; margin-top: 12px; font-size: 14px; }

/* inbox */
.inbox-row { display: flex; gap: 12px; padding: 13px 4px; border-bottom: 1px solid var(--line); }
.inbox-row .av { width: 34px; height: 34px; border-radius: 50%; background: var(--primary-soft); color: var(--primary); display: grid; place-items: center; font-weight: 700; flex: 0 0 34px; }
.inbox-row .body { flex: 1; min-width: 0; }
.inbox-row .who { font-weight: 600; font-size: 13px; }
.inbox-row .txt { font-size: 13.5px; margin: 2px 0; }
.toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }

/* controls: range picker, metric menu, tables, account header */
.range-picker { display: flex; gap: 6px; align-items: center; }
.range-picker input[type=date] { padding: 5px 8px; border: 1px solid var(--line-strong); border-radius: 7px; font: inherit; font-size: 12px; }
.section-controls { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 18px; }
.menu { position: absolute; right: 0; top: 30px; background: #fff; border: 1px solid var(--line-strong); border-radius: 10px; padding: 8px; z-index: 10; min-width: 180px; }
.menu-row { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 4px 6px; border-radius: 6px; cursor: pointer; white-space: nowrap; }
.menu-row:hover { background: #f2f3f5; }
.filter { padding: 7px 10px; border: 1px solid var(--line-strong); border-radius: 8px; font: inherit; font-size: 13px; width: 200px; }
.pager { display: flex; align-items: center; gap: 10px; justify-content: flex-end; margin-top: 10px; }
.acct-head { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.acct-av { width: 38px; height: 38px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--primary-soft); }
.acct-av img { height: 24px; } .acct-av .dot { width: 20px; height: 20px; border-radius: 6px; background: var(--primary); }
.acct-name { font-weight: 700; font-size: 15px; }
.acct-view { font-size: 16px; color: var(--muted); font-weight: 600; }

/* nav groups (Sprout-style sections) */
.nav-group { font-size: 10px; font-weight: var(--fw-b); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); padding: 14px 11px 4px; }
.nav-item, .btn, .chip, .tab, .nav-item .count { transition: background var(--t), color var(--t), border-color var(--t); }

/* overview landing */
.ov-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--s-4); margin-top: var(--s-4); }
.ov-card { background: var(--card); border: var(--bw) solid var(--line); border-radius: var(--r-md); padding: var(--s-4) var(--s-5); cursor: pointer; }
.ov-card:hover { border-color: var(--line-strong); }
.ov-card .k { font-size: var(--fs-sm); color: var(--muted); }
.ov-card .v { font-size: 22px; font-weight: var(--fw-b); margin-top: var(--s-1); }
.ov-card .lk { color: var(--primary); font-size: var(--fs-sm); margin-top: var(--s-2); }

/* board (one-page export target) */
.board { background: var(--bg); }
.board-head { font-size: 13px; color: var(--ink); padding: 2px 2px 12px; border-bottom: 2px solid var(--primary); margin-bottom: 14px; }

/* Brand Voice tab */
.conf { display: inline-flex; align-items: center; gap: 6px; }
.conf-track { width: 64px; height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; display: inline-block; }
.conf-fill { display: block; height: 100%; background: var(--primary); }
.evi { display: inline-block; background: var(--bg); border: var(--bw) solid var(--line); border-radius: var(--r-sm); padding: 2px 8px; margin: 2px 6px 2px 0; font-size: var(--fs-sm); }
.caveat { border: var(--bw) solid #e2c268; background: #fdf6e0; border-radius: var(--r-md); padding: var(--s-3) var(--s-4); font-size: 13px; margin-bottom: var(--s-4); }
.caveat .big { font-weight: var(--fw-b); margin-bottom: var(--s-1); }
.sample { border: var(--bw) solid var(--line); border-left: 3px solid var(--line-strong); border-radius: var(--r-sm); padding: var(--s-3); margin-bottom: var(--s-2); background: var(--card); }
.sample.yes { border-left-color: var(--up); }
.sample.no { border-left-color: var(--down); }
.sample .meta { font-size: var(--fs-sm); color: var(--muted); margin-top: var(--s-1); }
.rule-list { margin: var(--s-2) 0 0; padding-left: 18px; }
.rule-list li { margin-bottom: var(--s-2); }

/* unified nav: three collapsible product groups + top-bar product switcher + provenance chips */
.nav-prod-head { display: flex; align-items: center; gap: 7px; width: 100%; background: transparent; border: 0; cursor: pointer; font-size: 10px; font-weight: var(--fw-b); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); padding: 14px 11px 4px; }
.nav-prod-head:hover { color: var(--ink); }
.nav-prod-head .caret { margin-left: auto; font-size: 9px; }
.prod-dot { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: var(--line-strong); }
.prod-dot.live { background: var(--up); }
.prod-dot.pending { background: #e0a100; }
.prod-switch { display: flex; gap: 4px; }
.prod-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; border: 1px solid var(--line-strong); background: var(--card); color: var(--muted); border-radius: 8px; padding: 5px 10px; transition: background var(--t), color var(--t), border-color var(--t); }
.prod-btn:hover { color: var(--ink); }
.prod-btn.on { background: var(--primary-soft); color: var(--primary); border-color: transparent; }
.prod-btn .prod-pending { font-size: 10px; font-weight: 700; color: #8d6e00; background: #fff8e1; border-radius: 999px; padding: 0 6px; }
.prov-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--muted); background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; margin-top: 4px; max-width: 460px; }
.prov-chip.pending { background: #fffdf4; border-color: #f0e2b6; }
@media (max-width: 1100px) { .prod-btn .prod-pending, .prov-chip { display: none; } }
@media (max-width: 900px) { .nav-prod-head .lbl { display: none; } }
/* ===== beddha theme (PL-DNA, appended override) ===== */
:root{
  --primary:#FF2882; --accent-2:#953BFF;
  --brand-dark:#37003C; --brand-on-dark:#c3b2c4; --brand-label-dark:#87668a;
  --bg:#faf9fa; --card:#fff; --ink:#37003C; --muted:#87668a; --faint:#af99b1;
  --line:#ebe5eb; --line-strong:#d7ccd8; --up:#0a8a4a;
  --r-sm:11px; --r-md:16px; --r-lg:20px; --radius:16px;
}
body{ font-family:'Hanken Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; }
.btn,.btn.ghost{ border-radius:999px; font-weight:700; }
.kpi .value,.ov-card .v{ font-weight:800; letter-spacing:-.03em; }
.section,.kpi,.card,.ov-card{ border-radius:16px; }
.nav{ background:var(--brand-dark); border-right:0; }
.nav .brand{ color:#fff; font-weight:800; letter-spacing:-.02em; }
.nav .brand .dot{ background:center/18px no-repeat url("brand/beddha-icon.png"); }
.nav-item{ color:var(--brand-on-dark); border-radius:12px; }
.nav-item:hover{ background:rgba(255,255,255,.08); color:#fff; }
.nav-item.active{ background:var(--primary); color:#fff; }
.nav-item.active .count{ background:rgba(255,255,255,.25); }
.nav-item .count{ background:var(--accent-2); }
.nav-group,.nav-prod-head{ color:var(--brand-label-dark); }
.nav .who{ color:var(--brand-label-dark); border-top-color:rgba(255,255,255,.12); }
.topbar{ background:var(--brand-dark); border-bottom:0; }
.topbar .title{ color:#fff; font-weight:800; letter-spacing:-.02em; }
.topbar .range{ color:#e8d9ea; background:rgba(255,255,255,.13); border-color:transparent; border-radius:999px; }
.login-wrap{ background:var(--brand-dark); }
.login-card{ border-radius:20px; }
.login-card .mark{ width:54px; height:54px; border-radius:16px; background:var(--brand-dark) center no-repeat url("brand/beddha-icon.png"); background-size:34px; }
.login-card h1{ font-weight:800; letter-spacing:-.02em; }
.board-head{ border-bottom:2px solid var(--brand-dark); }
.prod-btn.on,.chip.on{ background:color-mix(in srgb,var(--primary) 12%,#fff); color:var(--primary); border-color:transparent; }

/* ==== beddha v2 (premium polish) ==== */
:root { --primary:#FF2882 !important; --primary-soft:color-mix(in srgb,#FF2882 9%,#fff);
  --bg:#faf9fa; --ink:#2b1233; --line:#ebe5eb; --line-strong:#d7ccd8; --muted:#87668a; --faint:#af99b1;
  --up:#00a76b; --down:#e11d6f; --r-sm:12px; --r-md:12px; --r-lg:16px; --radius:16px; }
body { font-family:"Hanken Grotesk",-apple-system,"Segoe UI",sans-serif; }
.nav { background:#37003C; border-right-color:rgba(255,255,255,.08); }
.nav .brand > * { display:none; }
.nav .brand::before { content:none !important; }
.nav .brand::after { content:""; display:block; width:128px; height:22px; filter:brightness(0) invert(1);
  background:url("/brand/beddha-wordmark.png") left center/contain no-repeat; }
@media (max-width:900px){ .nav .brand::after { width:28px; height:28px; filter:none; background-image:url("/brand/beddha-icon.png"); } }
.login-card .mark { width:100%; height:34px; border-radius:0; margin-bottom:18px;
  background:url("/brand/beddha-icon.png") left center/auto 100% no-repeat,
             url("/brand/beddha-wordmark.png") 46px center/auto 72% no-repeat; }
.acct-av .dot { background:var(--tenant-brand,var(--primary)); border-radius:50%; }
.nav-item { color:#c9b3cd; border-radius:12px; }
.nav-item:hover { background:rgba(255,255,255,.07); color:#fff; }
.nav-item.active { background:color-mix(in srgb,#FF2882 24%,transparent); color:#fff; }
.nav-item .count { background:#FF2882; border-radius:999px; }
.nav-group,.nav-prod-head,.nav .who { color:#a486a9; } .nav-prod-head:hover { color:#fff; }
.nav .who { border-top-color:rgba(255,255,255,.1); }
.section,.kpi,.card,.ov-card,.login-card,.warn-banner,.caveat,.skel-kpi,.skel-chart { border-radius:16px; }
.login-card input,textarea,.topbar input.tenant,.range-picker input[type=date],.filter,.menu,.menu-row,.preview,.sample,.evi,.cal .day,.skel { border-radius:12px; }
.btn,.prod-btn,.topbar .range,.conf-track { border-radius:999px; }
.cal .ev { border-radius:999px; border-left-width:0; padding:3px 10px; }
.brand .dot { border-radius:50%; } .drawer { border-radius:16px 0 0 16px; }
.content { padding:24px 28px 72px; } .section { margin-top:16px; padding:20px 22px; }
.kpis,.grid2 { gap:16px; } .kpis { margin-top:16px; } .kpi { padding:18px 18px 16px; }
.kpi .value { font-size:30px; font-weight:800; letter-spacing:-.03em; }
.btn { padding:9px 18px; font-weight:700; } .btn.ghost:hover { border-color:#FF2882; color:#FF2882; }
input:focus,textarea:focus,.filter:focus { border-color:#FF2882 !important; box-shadow:0 0 0 3px color-mix(in srgb,#FF2882 18%,transparent); }
.btn:focus-visible,.nav-item:focus-visible { outline:2px solid #FF2882; outline-offset:2px; }
tbody tr:hover { background:#faf7fb; } .menu-row:hover { background:#f6f0f7; }
th { letter-spacing:.05em; } th,td { padding:10px 12px; }
.skel { background:linear-gradient(90deg,#f1eaf2,#f9f6fa,#f1eaf2); background-size:200% 100%; }
.empty,.error { padding:48px 20px; } .cal .day.pad { background:#faf9fa; }
.status-pill.draft { background:#f3eef4; color:#87668a; }
.prov-chip.pending { background:#faf5ff; border-color:#e5d3fb; color:#7c3aed; }
.prod-btn .prod-pending { background:#f4ebff; color:#953BFF; } .prod-dot.pending { background:#953BFF; }
.conf-fill { background:#953BFF; } .recharts-cartesian-grid line { stroke:#f1eaf2; }
.recharts-cartesian-axis-tick text { fill:#af99b1; }