/* ==========================================================================
   Koovira Legal Professional Ecosystem — portal theme (Velzon-styled, no CDN).
   Palette: deep legal navy + gold accent. Built on the shared Bootstrap 5.3.
   ========================================================================== */
:root{
  --lp-navy:#0b1e3f; --lp-navy-2:#12294f; --lp-navy-3:#17335f; --lp-ink:#1f2a44;
  --lp-gold:#c9a227; --lp-gold-soft:#e7d9a3;
  --lp-primary:#1b4dff; --lp-primary-600:#153fd6;
  --lp-bg:#f4f6fb; --lp-card:#ffffff; --lp-border:#e6eaf2; --lp-muted:#6b7590;
  --lp-sidebar-w:264px; --lp-radius:14px; --lp-shadow:0 1px 3px rgba(16,30,66,.06),0 6px 24px rgba(16,30,66,.06);
}
*{box-sizing:border-box}
html,body{height:100%}
/* Clip decorative flourishes (e.g. the absolutely-positioned kv-character mascot)
   that bleed a few px past the viewport, so the page never shows a horizontal
   scrollbar. Content is always within the viewport; only decor exceeds. The clip
   must sit on BOTH the root element and body — overflow on body alone does not
   stop the root (html) from scrolling to an overflowing positioned descendant. */
html{overflow-x:hidden;}
body.lp-body{margin:0;background:var(--lp-bg);color:var(--lp-ink);
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-size:14px;line-height:1.5;
  overflow-x:hidden;}
a{text-decoration:none}

/* ---------------- App shell ---------------- */
.lp-app{display:flex;min-height:100vh}
.lp-main{flex:1;min-width:0;display:flex;flex-direction:column;margin-left:var(--lp-sidebar-w)}
.lp-content{flex:1;padding:20px 24px 40px}

/* ---------------- Sidebar ---------------- */
.lp-sidebar{position:fixed;top:0;left:0;width:var(--lp-sidebar-w);height:100vh;z-index:1040;
  background:linear-gradient(180deg,var(--lp-navy) 0%,var(--lp-navy-2) 100%);color:#c7d2e6;
  display:flex;flex-direction:column}
.lp-brand{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid rgba(255,255,255,.06)}
.lp-brand-link{display:flex;align-items:center;gap:10px;color:#fff;font-size:17px;letter-spacing:.2px}
.lp-brand-text b{color:var(--lp-gold);font-weight:800}
.lp-brand-mark{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;
  background:rgba(201,162,39,.15);color:var(--lp-gold);font-size:19px}
.lp-sidebar-close{background:none;border:0;color:#c7d2e6;font-size:20px}
.lp-firm-chip{display:flex;align-items:center;gap:8px;margin:12px 16px 6px;padding:9px 12px;border-radius:10px;
  background:rgba(255,255,255,.05);color:#dbe4f5;font-size:12.5px;font-weight:600;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.lp-firm-chip i{color:var(--lp-gold)}
.lp-nav{flex:1;overflow-y:auto;padding:6px 10px 10px}
.lp-nav-label{padding:14px 12px 6px;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:#7e8db0;font-weight:700}
.lp-nav-list{list-style:none;margin:0;padding:0}
.lp-nav-link{display:flex;align-items:center;gap:11px;padding:9px 12px;margin:2px 0;border-radius:9px;
  color:#c1cde3;font-weight:500;transition:.15s}
.lp-nav-link i{font-size:18px;width:20px;text-align:center;opacity:.9}
.lp-nav-link:hover{background:rgba(255,255,255,.06);color:#fff}
.lp-nav-link.active{background:linear-gradient(90deg,rgba(27,77,255,.22),rgba(27,77,255,.05));color:#fff;box-shadow:inset 3px 0 0 var(--lp-gold)}
.lp-sidebar-foot{padding:14px 16px;border-top:1px solid rgba(255,255,255,.06)}
.lp-ai-cta{display:flex;align-items:center;justify-content:center;gap:8px;padding:10px;border-radius:10px;font-weight:600;
  background:linear-gradient(90deg,var(--lp-gold),#d9b94a);color:#3a2d05}
.lp-ai-cta:hover{filter:brightness(1.05);color:#3a2d05}
.lp-sidebar-backdrop{display:none;position:fixed;inset:0;background:rgba(11,30,63,.5);z-index:1035}

/* ---------------- Topbar ---------------- */
.lp-topbar{position:sticky;top:0;z-index:1020;display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:12px 24px;background:rgba(255,255,255,.85);backdrop-filter:blur(8px);border-bottom:1px solid var(--lp-border)}
.lp-topbar-left{display:flex;align-items:center;gap:12px;min-width:0}
.lp-page-title h1{font-size:19px;font-weight:700;margin:0;color:var(--lp-navy)}
.lp-menu-toggle{background:none;border:0;font-size:22px;color:var(--lp-navy)}
.lp-topbar-right{display:flex;align-items:center;gap:10px}
.lp-top-btn{position:relative;display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 12px;border-radius:10px;
  background:#eef1f8;color:var(--lp-navy);font-weight:600;font-size:13px}
.lp-top-btn:hover{background:#e4e9f5;color:var(--lp-navy)}
.lp-top-ai{background:rgba(201,162,39,.14);color:#8a6d0e}
.lp-top-ai i{color:var(--lp-gold)}
.lp-badge{position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;
  background:#e0394f;color:#fff;font-size:10.5px;font-weight:700;display:grid;place-items:center}
.lp-user-btn{display:flex;align-items:center;gap:8px;background:none;border:0;color:var(--lp-navy);font-weight:600}
.lp-avatar{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-weight:700;color:#fff;
  background:linear-gradient(135deg,var(--lp-navy),var(--lp-primary))}

/* ---------------- Cards / UI primitives ---------------- */
.lp-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:16px 24px;color:var(--lp-muted);font-size:12.5px;border-top:1px solid var(--lp-border)}
.lp-footer-links{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.lp-footer-links a{color:var(--lp-muted)}
.lp-ai-note{opacity:.8}
.lp-card{background:var(--lp-card);border:1px solid var(--lp-border);border-radius:var(--lp-radius);box-shadow:var(--lp-shadow)}
.lp-card .lp-card-body{padding:18px 20px}
.lp-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:16px 20px;border-bottom:1px solid var(--lp-border)}
.lp-card-head h3{font-size:15px;font-weight:700;margin:0;color:var(--lp-navy)}
.lp-page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:6px 0 18px}
.lp-page-head h2{font-size:22px;font-weight:800;color:var(--lp-navy);margin:0}
.lp-page-head .lp-lead{color:var(--lp-muted);margin:4px 0 0;max-width:640px}

/* KPI tiles */
.lp-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;margin-bottom:20px}
.lp-kpi{background:var(--lp-card);border:1px solid var(--lp-border);border-radius:var(--lp-radius);padding:18px;box-shadow:var(--lp-shadow);display:flex;gap:14px;align-items:center}
.lp-kpi-ic{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;font-size:22px;background:rgba(27,77,255,.1);color:var(--lp-primary)}
.lp-kpi-ic.gold{background:rgba(201,162,39,.14);color:#a9861a}
.lp-kpi-ic.green{background:rgba(25,163,101,.12);color:#159a5b}
.lp-kpi-ic.red{background:rgba(224,57,79,.1);color:#d0324a}
.lp-kpi .lp-kpi-val{font-size:24px;font-weight:800;color:var(--lp-navy);line-height:1}
.lp-kpi .lp-kpi-lbl{color:var(--lp-muted);font-size:12.5px;margin-top:3px}

.lp-grid{display:grid;gap:16px}
.lp-grid.cols-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.lp-grid.cols-3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}

.btn-lp{background:var(--lp-primary);border-color:var(--lp-primary);color:#fff;font-weight:600}
.btn-lp:hover{background:var(--lp-primary-600);border-color:var(--lp-primary-600);color:#fff}
.btn-lp-gold{background:var(--lp-gold);border:0;color:#3a2d05;font-weight:700}
.btn-lp-gold:hover{filter:brightness(1.05);color:#3a2d05}
.lp-chip{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:600;background:#eef1f8;color:var(--lp-navy)}
.lp-chip.gold{background:rgba(201,162,39,.16);color:#8a6d0e}
.lp-chip.green{background:rgba(25,163,101,.14);color:#128a51}
.lp-chip.amber{background:rgba(240,173,20,.16);color:#a5730a}
.lp-empty{text-align:center;padding:48px 20px;color:var(--lp-muted)}
.lp-empty i{font-size:42px;color:#c3ccde;display:block;margin-bottom:10px}

.table thead th{font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--lp-muted);border-bottom:1px solid var(--lp-border)}

/* Auth (login/onboard) */
.lp-auth{min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr}
.lp-auth-brandside{background:linear-gradient(150deg,var(--lp-navy),var(--lp-navy-3));color:#eaf0fb;padding:56px 60px;display:flex;flex-direction:column;justify-content:center}
.lp-auth-brandside h2{font-size:30px;font-weight:800;line-height:1.2}
.lp-auth-brandside h2 b{color:var(--lp-gold)}
.lp-auth-points{list-style:none;padding:0;margin:26px 0 0}
.lp-auth-points li{display:flex;gap:10px;align-items:flex-start;margin:12px 0;color:#cdd8ee}
.lp-auth-points i{color:var(--lp-gold);font-size:18px;margin-top:1px}
.lp-auth-formside{display:flex;align-items:center;justify-content:center;padding:40px 24px;background:var(--lp-card)}
.lp-auth-form{width:100%;max-width:400px}
.lp-auth-form h1{font-size:23px;font-weight:800;color:var(--lp-navy);margin-bottom:4px}

/* ---------------- Responsive ---------------- */
@media (max-width:991.98px){
  .lp-main{margin-left:0}
  .lp-sidebar{transform:translateX(-100%);transition:transform .25s ease}
  .lp-app.lp-nav-open .lp-sidebar{transform:translateX(0)}
  .lp-app.lp-nav-open .lp-sidebar-backdrop{display:block}
  .lp-content{padding:16px}
  .lp-auth{grid-template-columns:1fr}
  .lp-auth-brandside{display:none}
}
@media (max-width:575.98px){
  .lp-topbar{padding:10px 14px}
  .lp-page-title h1{font-size:16px}
  .lp-kpi .lp-kpi-val{font-size:20px}
  /* Force a single column below 576px so the grid min-track (260–300px) can never
     exceed the viewport and trigger horizontal page scroll on ~320px devices. */
  .lp-kpis,.lp-grid.cols-2,.lp-grid.cols-3{grid-template-columns:1fr}
}

/* dark-mode friendly for the topbar text on light glass */
[data-lp-theme="dark"] body.lp-body{--lp-bg:#0d1526;--lp-card:#131d33;--lp-border:#22304e;--lp-ink:#dfe6f3;--lp-muted:#8b98b8}

/* Dark-mode legibility: headings/KPIs use var(--lp-navy) which is a fixed dark navy,
   invisible on the dark surface. Retarget them to --lp-ink and give the topbar dark chrome. */
[data-lp-theme="dark"] .lp-card-head h3,
[data-lp-theme="dark"] .lp-kpi .lp-kpi-val,
[data-lp-theme="dark"] .lp-page-head h2,
[data-lp-theme="dark"] .lp-page-title h1,
[data-lp-theme="dark"] .lp-menu-toggle,
[data-lp-theme="dark"] .lp-user-btn{color:var(--lp-ink)}
/* Inline h2 heads on pages that still carry style="color:var(--lp-navy)" — force legible ink. */
[data-lp-theme="dark"] .lp-page-head h2[style]{color:var(--lp-ink) !important}
/* --lp-navy is a FIXED dark navy (deliberately not remapped in dark, since the sidebar/avatar
   gradients depend on it). But ~100 inline style="color:var(--lp-navy)" text nodes (table cells,
   matter/client links, <strong> labels) would render near-black on the dark card and vanish.
   Retarget any element whose inline color is navy to legible ink — text only; border/background
   uses of --lp-navy don't contain the literal "color:var(--lp-navy)" and are untouched. */
[data-lp-theme="dark"] [style*="color:var(--lp-navy)"]{color:var(--lp-ink) !important}
[data-lp-theme="dark"] .lp-topbar{background:var(--lp-card);border-bottom:1px solid var(--lp-border)}
[data-lp-theme="dark"] .lp-top-btn{background:#1b2946;color:var(--lp-ink)}
[data-lp-theme="dark"] .lp-top-btn:hover{background:#233457;color:var(--lp-ink)}
[data-lp-theme="dark"] .lp-chip{background:#1b2946;color:var(--lp-ink)}

/* ---- Koovira OAuth popup overlay (kv-oauth.js) ---- */
#kvOAuthOverlay{position:fixed;inset:0;z-index:3000;display:flex;align-items:center;justify-content:center;
  background:rgba(6,11,24,.62);backdrop-filter:blur(4px)}
#kvOAuthOverlay .kvo-card{background:#0e1830;border:1px solid rgba(255,255,255,.12);border-radius:18px;
  padding:30px 34px;text-align:center;box-shadow:0 30px 80px rgba(0,0,0,.5);max-width:320px}
#kvOAuthOverlay .kvo-spin{width:46px;height:46px;margin:0 auto 16px;border:3px solid rgba(127,192,255,.25);
  border-top-color:#43ade6;border-radius:50%;animation:kvoSpin .8s linear infinite}
@keyframes kvoSpin{to{transform:rotate(360deg)}}
#kvOAuthOverlay p{color:#dbe6f7;font-size:14.5px;margin:0 0 16px;font-weight:600}
#kvOAuthOverlay .kvo-cancel{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);
  color:#cdd9ee;font-size:13px;font-weight:600;padding:8px 18px;border-radius:9px;cursor:pointer}
#kvOAuthOverlay .kvo-cancel:hover{background:rgba(255,255,255,.14)}

/* ---- Auth brandside polish (login / onboard) — subtle animated aurora ---- */
.lp-auth-brandside{position:relative;overflow:hidden}
.lp-auth-brandside::before,.lp-auth-brandside::after{content:"";position:absolute;border-radius:50%;filter:blur(64px);opacity:.42;pointer-events:none}
.lp-auth-brandside::before{width:340px;height:340px;background:radial-gradient(circle,#2f97d6,transparent 70%);top:-90px;right:-70px;animation:lpAuthOrb 16s ease-in-out infinite}
.lp-auth-brandside::after{width:300px;height:300px;background:radial-gradient(circle,#1b4dff,transparent 70%);bottom:-80px;left:-60px;animation:lpAuthOrb 20s ease-in-out infinite reverse}
@keyframes lpAuthOrb{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(30px,22px) scale(1.06)}}
.lp-auth-brandside>*{position:relative;z-index:1}
@media(prefers-reduced-motion:reduce){.lp-auth-brandside::before,.lp-auth-brandside::after{animation:none}}