/* ============================================================
   Selliora — AI theme  (LOOK & FEEL ONLY)
   Pure styling layered over the existing app. No markup,
   no scripts, no features are changed or removed — every
   module, button and screen stays exactly where it is.
   Scoped to LIGHT mode; your dark mode is left untouched.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700;800&display=swap');

/* ---------- 1. Tokens (light mode only) ---------- */
:root:not([data-theme="dark"]) {
  --p:#1a73e8;  --pd:#1557b0;  --pm:#4285f4;  --pl:#e8f0fe;
  --acc:#1a73e8; --acc-d:#1557b0; --acc-l:#e8f0fe;

  --bg:#f0f4f9;  --s:#ffffff;   --s2:#f6f8fb;
  --bd:#e6eaf0;  --bd2:#d5dce4;
  --t:#1f1f1f;   --t2:#5f6368;  --t3:#80868b;

  --bb:#e8f0fe;  --bc:#1a73e8;
  --inp:#ffffff; --inp-bd:#d5dce4;
  --aibd:#c9d6ec; --aitx:#1a73e8;

  --rad:16px;    --rads:11px;

  --shadow:0 1px 2px rgba(60,64,67,.10),0 1px 3px rgba(60,64,67,.07);
  --shadow-lg:0 6px 22px rgba(60,64,67,.14);

  /* light Gemini-style sidebar */
  --sbar:#ffffff;
  --sbar-t:#5f6368;
  --sbar-hv:#f1f4f9;
  --sbar-ac:#e8f0fe;
  --sbar-bd:#e6eaf0;
}

/* ---------- 2. Typeface ---------- */
body { font-family:'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }

/* ---------- 3. Light sidebar (text/colour fixes) ---------- */
:root:not([data-theme="dark"]) .sbar { box-shadow:1px 0 0 var(--sbar-bd); }
:root:not([data-theme="dark"]) .sb-brand { color:var(--t); border-bottom:1px solid var(--sbar-bd); }
:root:not([data-theme="dark"]) .sb-foot { border-top:1px solid var(--sbar-bd); }
:root:not([data-theme="dark"]) .ntabs::-webkit-scrollbar-thumb { background:#d5dce4; }
:root:not([data-theme="dark"]) .ntab { color:var(--sbar-t); font-weight:500; }
:root:not([data-theme="dark"]) .ntab:hover { color:var(--t); background:var(--sbar-hv); }
:root:not([data-theme="dark"]) .ntab.active { color:var(--p); background:var(--sbar-ac); font-weight:600; }
:root:not([data-theme="dark"]) .ntab.active::before { background:var(--p); }
/* nav footer bits that were hard-coded white for the dark bar */
:root:not([data-theme="dark"]) #nav-name { color:var(--t) !important; }
:root:not([data-theme="dark"]) #nav-role { background:var(--pl) !important; color:var(--p) !important; }
:root:not([data-theme="dark"]) .sb-links a { color:var(--p); }
:root:not([data-theme="dark"]) .btn-logout {
  border:1px solid var(--bd2); color:var(--t2); background:var(--s);
}
:root:not([data-theme="dark"]) .btn-logout:hover { background:var(--s2); color:var(--t); }
:root:not([data-theme="dark"]) .sb-collapse { color:var(--t2); }

/* pill nav items to echo the mockup */
:root:not([data-theme="dark"]) .ntab { border-radius:999px; }
:root:not([data-theme="dark"]) .ntab.active::before { display:none; }

/* section headers injected by selliora-theme.js (both themes) */
.nav-group-label{
  font-size:10.5px; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; color:var(--t3);
  padding:14px 14px 5px; user-select:none;
}
.nav-group-label:first-child{ padding-top:6px; }

/* ---------- 4. Rounder cards + tiles + softer shadows ---------- */
:root:not([data-theme="dark"]) .mcard,
:root:not([data-theme="dark"]) .card,
:root:not([data-theme="dark"]) .met { border-radius:var(--rad); }
:root:not([data-theme="dark"]) .ktile,
:root:not([data-theme="dark"]) .perm-row,
:root:not([data-theme="dark"]) .dchip { border-radius:12px; }

/* ---------- 5. Pill buttons + inputs ---------- */
:root:not([data-theme="dark"]) .btn { border-radius:999px; font-weight:600; }
:root:not([data-theme="dark"]) .ff input,
:root:not([data-theme="dark"]) .ff select,
:root:not([data-theme="dark"]) .ff textarea { border-radius:10px; }

/* ---------- 6. Signature gradient accents ---------- */
/* Login backdrop */
:root:not([data-theme="dark"]) #auth-screen {
  background:linear-gradient(135deg,#4285f4 0%,#9b72cb 52%,#d96570 100%);
}
/* Brand badge */
:root:not([data-theme="dark"]) .brand-badge {
  background:linear-gradient(115deg,#4285f4,#9b72cb);
}
/* AI insight box → subtle gradient tint + rounded */
:root:not([data-theme="dark"]) .aibox {
  border-radius:var(--rad);
  background:linear-gradient(115deg,#e9f0fe 0%,#f1eafc 55%,#fbeceb 100%);
  border-color:#d7cdf0;
}

/* ---------- 7. Group A polish ---------- */

/* "Highlights / what needs your attention" card → gradient AI-panel look
   (targets the card that carries the blue left-accent inline style) */
:root:not([data-theme="dark"]) .card[style*="border-left:3px solid var(--p)"] {
  background:linear-gradient(115deg,#eaf1fe 0%,#f3ecfc 52%,#fdeeed 100%);
  border-top:1px solid #d7cdf0;
  border-right:1px solid #d7cdf0;
  border-bottom:1px solid #d7cdf0;
}

/* KPI metric cards → sentence-case labels, larger value (matches mockup) */
:root:not([data-theme="dark"]) .met-l {
  text-transform:none;
  letter-spacing:0;
  font-size:12px;
  color:var(--t2);
}
:root:not([data-theme="dark"]) .met-v { font-size:26px; }
:root:not([data-theme="dark"]) .met { padding:16px 18px; }

/* Period toolbar + segmented chips → rounder, pill segments */
:root:not([data-theme="dark"]) .dfilter { border-radius:var(--rad); padding:10px 14px; }
:root:not([data-theme="dark"]) .dchip { border-radius:999px; padding:6px 14px; }

/* Status pills a touch larger & fully rounded */
:root:not([data-theme="dark"]) .pill { padding:3px 10px; border-radius:999px; font-size:10.5px; }

/* Settings tabs — keep the clean underline, blue active (already blue via tokens) */
:root:not([data-theme="dark"]) .set-tab.active { border-bottom-width:2px; }

/* Modals & overlay rounding to match the softer look */
:root:not([data-theme="dark"]) .modal { border-radius:20px; }