/* ==========================================================================
   CaseWeave — ATTORNEY PORTAL theme  ·  LIGHT canvas + deep-indigo left nav
   --------------------------------------------------------------------------
   Loaded AFTER ../styles.css on every portal page. It does two jobs:
     1. Re-maps the global design tokens (floor, lift, ink ramp, hairlines) to a
        LIGHT palette. Every panel that was built against those tokens (the
        matter page's .msg-* / .fee-* / .dr-* blocks) re-themes automatically —
        no markup changes needed.
     2. Defines the app-shell + dashboard classes the portal HTML references
        but the marketing stylesheet never provided (.appbar, .row/.rows,
        .kv, .field, .authwrap, the .pshell sidebar dashboard, etc).
   Honest by design: no fabricated metrics, no compliance badges — every number
   the dashboard shows is computed from the real API.
   ========================================================================== */

:root{
  /* ---- LIGHT canvas + elevation ramp (tokens reused by the existing panels) ---- */
  --floor:  #F4F3FB;   /* the canvas behind cards */
  --lift-1: #FFFFFF;   /* a card / panel */
  --lift-2: #F1EFFA;   /* hover / subtle raise */
  --lift-3: #FBFAFE;   /* input / nested chrome */
  --well:   #ECEAF6;   /* recessed track (bars/wells) */

  --hair:        rgba(26,21,54,0.09);
  --hair-bright: rgba(26,21,54,0.16);
  --inset-hi:  0 1px 2px rgba(26,21,54,0.05);                 /* soft card lift, not an inset */
  --ring:      0 0 0 1px var(--hair);
  --glow:      0 24px 60px -28px rgba(40,30,90,0.35);

  /* ---- ink ramp ---- */
  --t1: #191538;   /* primary */
  --t2: #4B4769;   /* body */
  --t3: #7C7795;   /* muted */
  --t4: #A8A4BE;   /* dim / captions */

  /* ---- functional color (state, never decoration) ---- */
  --violet: #7C53F0;   --violet-press: #6A40DE;   --violet-soft: rgba(124,83,240,0.10);
  --sage:   #2E9E73;   --sage-soft: rgba(46,158,115,0.13);
  --clay:   #DC5942;   --clay-soft: rgba(220,89,66,0.10);
  --brass:  #B98A2E;   --brass-soft: rgba(185,138,46,0.12);
  --cyan:   #2E8FB0;

  /* clean sans for headings/wordmark (Fraunces isn't loaded in the portal) */
  --display: "Space Grotesk", "Inter", system-ui, sans-serif;

  /* deep-indigo navigation */
  --nav-top:   #2A1C63;
  --nav-bot:   #1B1148;
  --nav-ink:   #CFC8EC;
  --nav-ink-dim: #948CC4;
}

/* the marketing grain overlay reads as noise on a light canvas — kill it here */
body::after{ display:none !important; }

body{ background:var(--floor); color:var(--t2); }
::selection{ background:var(--violet-soft); color:var(--t1); }

/* ==========================================================================
   AUTH (signin)
   ========================================================================== */
.authwrap{ min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:var(--s6) var(--s5); position:relative; overflow:hidden; }
.authwrap::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(680px 420px at 15% -10%, rgba(124,83,240,0.16), transparent 60%),
    radial-gradient(640px 460px at 100% 110%, rgba(124,83,240,0.10), transparent 55%); }
.authcard{ position:relative; width:100%; max-width:430px; background:var(--lift-1);
  border:1px solid var(--hair); border-radius:var(--radius-lg); padding:var(--s7) var(--s6);
  box-shadow:var(--glow), var(--ring); }
.authcard .brand{ font-size:1.35rem; margin-bottom:var(--s4); }
.authcard h1{ font-size:clamp(1.5rem,3vw,1.9rem); margin:var(--s2) 0 var(--s2); line-height:1.12; }
.authcard .sub{ color:var(--t3); font-size:0.96rem; margin:0 0 var(--s5); line-height:1.5; }
.authcard .btn{ margin-top:var(--s2); }

.field{ display:flex; flex-direction:column; gap:6px; margin-bottom:var(--s4); }
.field label{ font-family:var(--mono); font-size:0.68rem; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--t3); }
.field input{ font-family:var(--body); font-size:0.98rem; color:var(--t1); background:var(--lift-3);
  border:1px solid var(--hair-bright); border-radius:var(--radius-sm); padding:0.72em 0.9em; width:100%; }
.field input:focus{ outline:none; border-color:var(--violet); box-shadow:0 0 0 3px var(--violet-soft); }
.field input::placeholder{ color:var(--t4); }

.formerr{ background:var(--clay-soft); border:1px solid rgba(220,89,66,0.30); color:#B23A28;
  border-radius:var(--radius-sm); padding:0.7em 0.9em; font-size:0.9rem; margin-bottom:var(--s4); }
.formnote{ color:var(--t3); font-size:0.85rem; margin:var(--s4) 0 0; text-align:center; }
.formnote a{ font-weight:560; }

/* the small mono "Attorney portal" chip */
.role{ font-family:var(--mono); font-size:0.64rem; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--violet); background:var(--violet-soft); border:1px solid rgba(124,83,240,0.22);
  border-radius:var(--radius-pill); padding:4px 11px; }

/* ==========================================================================
   TOP-BAR SHELL (matter + package pages)
   ========================================================================== */
.appbar{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,0.86);
  -webkit-backdrop-filter:blur(14px) saturate(150%); backdrop-filter:blur(14px) saturate(150%);
  border-bottom:1px solid var(--hair); }
.appbar .container{ display:flex; align-items:center; gap:var(--s4); height:64px; }
.appbar .brand{ font-size:1.18rem; }
.spacer{ flex:1; }
.signout{ font-weight:560; font-size:0.9rem; color:var(--t3); cursor:pointer; }
.signout:hover{ color:var(--violet); }

.appmain{ padding:var(--s7) 0 var(--s9); }
.crumb{ margin-bottom:var(--s4); }
.crumb a{ font-family:var(--mono); font-size:0.74rem; letter-spacing:0.06em; color:var(--t3); font-weight:500; }
.crumb a:hover{ color:var(--violet); }

/* key/value list (matter facts) */
.kv{ display:grid; grid-template-columns:auto 1fr; gap:var(--s2) var(--s5); margin:0; }
.kv dt{ font-family:var(--mono); font-size:0.7rem; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--t3); align-self:center; }
.kv dd{ margin:0; color:var(--t1); font-weight:520; font-size:0.95rem; }

/* iframe holding a published package document */
.viewer-frame{ width:100%; min-height:78vh; border:1px solid var(--hair); border-radius:var(--radius);
  background:#fff; box-shadow:var(--inset-hi); }

/* ==========================================================================
   LIST ROWS (.rows/.row) — used by the matter page's package list
   ========================================================================== */
.rows{ display:flex; flex-direction:column; gap:var(--s3); }
.row{ display:flex; align-items:center; gap:var(--s4); background:var(--lift-1); border:1px solid var(--hair);
  border-radius:var(--radius); padding:var(--s4) var(--s5); box-shadow:var(--inset-hi);
  transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease; color:var(--t1); }
.row:hover{ transform:translateY(-1px); border-color:rgba(124,83,240,0.4); box-shadow:var(--glow); color:var(--t1); }
.rico{ width:42px; height:42px; flex:none; border-radius:11px; display:grid; place-items:center;
  background:var(--violet-soft); color:var(--violet); }
.rbody{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
.rtitle{ font-weight:600; color:var(--t1); font-size:1rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rmeta{ font-family:var(--mono); font-size:0.72rem; letter-spacing:0.03em; color:var(--t3); }
.rchev{ color:var(--t4); flex:none; }
.row:hover .rchev{ color:var(--violet); }

/* empty / loading states */
.empty{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:var(--s3);
  color:var(--t3); background:var(--lift-1); border:1px dashed var(--hair-bright); border-radius:var(--radius);
  padding:var(--s7) var(--s6); }
.empty svg{ width:34px; height:34px; color:var(--t4); }
.empty p{ margin:0; max-width:42ch; font-size:0.95rem; }

/* ==========================================================================
   DASHBOARD SHELL (.pshell) — deep-indigo left nav + light main canvas
   ========================================================================== */
.pbody{ overflow-x:hidden; }
.pshell{ display:grid; grid-template-columns:264px 1fr; min-height:100vh; }

.psidebar{ position:sticky; top:0; align-self:start; height:100vh; display:flex; flex-direction:column;
  gap:var(--s5); padding:var(--s5) var(--s4); color:var(--nav-ink);
  background:linear-gradient(176deg, var(--nav-top) 0%, #211661 52%, var(--nav-bot) 100%); }

.pbrand{ display:flex; align-items:center; gap:var(--s3); padding:var(--s2) var(--s2) 0; }
.pbrand img{ width:34px; height:34px; border-radius:9px; }
.pbrand-name{ font-family:var(--display); font-weight:600; font-size:1.3rem; letter-spacing:-0.02em; color:#fff; line-height:1; }
.pbrand-name .w{ color:#B9A4FF; }
.pbrand-sub{ display:block; font-family:var(--mono); font-size:0.58rem; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--nav-ink-dim); margin-top:3px; }

.pnav{ display:flex; flex-direction:column; gap:3px; margin-top:var(--s2); }
.pnav-item{ display:flex; align-items:center; gap:var(--s3); padding:0.66em 0.8em; border-radius:11px;
  color:var(--nav-ink); font-weight:520; font-size:0.94rem; cursor:pointer; transition:background .15s, color .15s; }
.pnav-item svg{ width:19px; height:19px; flex:none; opacity:0.9; }
.pnav-item:hover{ background:rgba(255,255,255,0.07); color:#fff; }
.pnav-item.is-active{ background:linear-gradient(135deg, #8B62F5, #6B40E6); color:#fff;
  box-shadow:0 10px 24px -10px rgba(124,83,240,0.7); }
.pnav-item.is-active svg{ opacity:1; }
.pnav-badge{ margin-left:auto; font-family:var(--mono); font-size:0.66rem; font-weight:600;
  background:rgba(255,255,255,0.16); color:#fff; border-radius:var(--radius-pill); padding:1px 8px; min-width:20px; text-align:center; }
.pnav-item.is-active .pnav-badge{ background:rgba(255,255,255,0.25); }

.psidebar-foot{ margin-top:auto; border-top:1px solid rgba(255,255,255,0.10); padding-top:var(--s4); }
.puser{ display:flex; align-items:center; gap:var(--s3); padding:0 var(--s2) var(--s3); }
.pavatar{ width:38px; height:38px; flex:none; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,0.14); color:#fff; font-weight:600; font-size:0.9rem; }
.puser-body{ min-width:0; display:flex; flex-direction:column; }
.puser-name{ color:#fff; font-weight:560; font-size:0.9rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.puser-sub{ color:var(--nav-ink-dim); font-size:0.76rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.psignout{ display:flex; align-items:center; gap:var(--s2); width:100%; padding:0.6em 0.8em; border-radius:10px;
  background:transparent; border:1px solid rgba(255,255,255,0.14); color:var(--nav-ink); font-family:var(--body);
  font-weight:520; font-size:0.88rem; cursor:pointer; transition:background .15s, color .15s, border-color .15s; }
.psignout svg{ width:16px; height:16px; }
.psignout:hover{ background:rgba(255,255,255,0.08); color:#fff; border-color:rgba(255,255,255,0.28); }

/* ---- main column ---- */
.pmain{ min-width:0; }
.pmain-inner{ max-width:1200px; margin:0 auto; padding:var(--s6) var(--s7) var(--s9); }
@media (max-width:1100px){ .pmain-inner{ padding:var(--s5) var(--s5) var(--s8); } }

.ptopbar{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--s4);
  margin-bottom:var(--s6); flex-wrap:wrap; }
.pgreet{ font-family:var(--display); font-size:clamp(1.5rem,3vw,2rem); font-weight:600; color:var(--t1);
  letter-spacing:-0.02em; margin:0 0 4px; }
.pgreet .wave{ -webkit-text-fill-color:initial; }
.psubtitle{ color:var(--t3); font-size:1rem; margin:0; }
.pdate{ font-family:var(--mono); font-size:0.74rem; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--t3); background:var(--lift-1); border:1px solid var(--hair); border-radius:var(--radius-pill);
  padding:8px 14px; white-space:nowrap; box-shadow:var(--inset-hi); }

/* ---- stat tiles ---- */
.pstat-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(184px, 1fr)); gap:var(--s4); margin-bottom:var(--s5); }
.pstat{ background:var(--lift-1); border:1px solid var(--hair); border-radius:var(--radius); padding:var(--s5);
  box-shadow:var(--inset-hi); display:flex; align-items:center; gap:var(--s4); }
.pstat-ico{ width:48px; height:48px; flex:none; border-radius:13px; display:grid; place-items:center; }
.pstat-ico svg{ width:23px; height:23px; }
.pstat-ico--violet{ background:rgba(124,83,240,0.12); color:var(--violet); }
.pstat-ico--blue{   background:rgba(46,143,176,0.13);  color:var(--cyan); }
.pstat-ico--green{  background:var(--sage-soft);       color:var(--sage); }
.pstat-ico--amber{  background:var(--brass-soft);      color:var(--brass); }
.pstat-ico--rose{   background:var(--clay-soft);       color:var(--clay); }
.pstat-body{ min-width:0; display:flex; flex-direction:column; gap:4px; }
.pstat-num{ font-family:var(--display); font-size:1.85rem; font-weight:600; color:var(--t1); letter-spacing:-0.02em; line-height:1; }
.pstat-label{ color:var(--t3); font-size:0.86rem; margin-top:4px; }

/* ---- two-column body ---- */
.pcols{ display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:var(--s4); align-items:start; }
@media (max-width:980px){ .pcols{ grid-template-columns:1fr; } }
.pcol{ display:flex; flex-direction:column; gap:var(--s4); min-width:0; }

.pcard{ background:var(--lift-1); border:1px solid var(--hair); border-radius:var(--radius);
  box-shadow:var(--inset-hi); overflow:hidden; }
.pcard-head{ display:flex; align-items:center; justify-content:space-between; gap:var(--s3);
  padding:var(--s5) var(--s5) var(--s4); }
.pcard-title{ font-family:var(--display); font-size:1.12rem; font-weight:600; color:var(--t1); margin:0; letter-spacing:-0.01em; }
.pcard-title .pmuted{ color:var(--t3); font-weight:500; font-size:0.92rem; font-family:var(--body); }
.pcard-link{ font-size:0.84rem; font-weight:560; color:var(--violet); }
.pcard-pad{ padding:0 var(--s5) var(--s5); }

/* ---- active-cases table (div grid so rows can be links) ---- */
.ptable{ display:flex; flex-direction:column; }
.ptable-head, .ptable-row{ display:grid;
  grid-template-columns:minmax(0,2.2fr) minmax(0,1.5fr) 92px minmax(0,1.3fr) 96px;
  gap:var(--s3); align-items:center; padding:var(--s3) var(--s5); }
.ptable-head{ font-family:var(--mono); font-size:0.64rem; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--t4); border-bottom:1px solid var(--hair); }
.ptable-row{ border-bottom:1px solid var(--hair); color:var(--t1); transition:background .12s ease; }
.ptable-row:last-child{ border-bottom:0; }
.ptable-row:hover{ background:var(--lift-2); }
.ptcase{ display:flex; align-items:center; gap:var(--s3); min-width:0; }
.ptcase-ico{ width:34px; height:34px; flex:none; border-radius:9px; display:grid; place-items:center;
  background:var(--violet-soft); color:var(--violet); }
.ptcase-ico svg{ width:17px; height:17px; }
.ptcase-name{ font-weight:600; font-size:0.95rem; color:var(--t1); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ptcell{ font-size:0.9rem; color:var(--t2); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ptcell-dim{ color:var(--t3); font-family:var(--mono); font-size:0.78rem; }

/* status pill */
.ppill{ display:inline-flex; align-items:center; gap:6px; font-size:0.76rem; font-weight:600;
  border-radius:var(--radius-pill); padding:3px 11px; text-transform:capitalize; }
.ppill::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.ppill--active{ color:var(--sage); background:var(--sage-soft); }
.ppill--violet{ color:var(--violet); background:var(--violet-soft); }
.ppill--muted{ color:var(--t3); background:var(--well); }

/* mini progress (doc-request fulfillment) */
.pprog{ display:flex; align-items:center; gap:var(--s2); }
.pprog-track{ flex:1; height:7px; border-radius:var(--radius-pill); background:var(--well); overflow:hidden; }
.pprog-fill{ height:100%; border-radius:var(--radius-pill); background:var(--violet); min-width:3px; }
.pprog-fill.is-done{ background:var(--sage); }
.pprog-val{ font-family:var(--mono); font-size:0.72rem; color:var(--t2); white-space:nowrap; }

/* ---- activity feed ---- */
.pfeed{ display:flex; flex-direction:column; }
.pfeed-item{ display:flex; align-items:flex-start; gap:var(--s3); padding:var(--s3) var(--s5); border-bottom:1px solid var(--hair); }
.pfeed-item:last-child{ border-bottom:0; }
.pfeed-ico{ width:34px; height:34px; flex:none; border-radius:50%; display:grid; place-items:center; margin-top:1px; }
.pfeed-ico svg{ width:16px; height:16px; }
.pfeed-body{ flex:1; min-width:0; display:flex; flex-direction:column; }
.pfeed-title{ color:var(--t1); font-size:0.9rem; font-weight:560; line-height:1.35; }
.pfeed-meta{ color:var(--t3); font-size:0.82rem; margin-top:1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pfeed-time{ font-family:var(--mono); font-size:0.7rem; color:var(--t4); white-space:nowrap; flex:none; margin-top:2px; }

/* ---- insight cards (honest, computed — NOT "AI") ---- */
.pinsights{ display:flex; flex-direction:column; }
.pinsight{ display:flex; align-items:flex-start; gap:var(--s3); padding:var(--s4) var(--s5); border-bottom:1px solid var(--hair); }
.pinsight:last-child{ border-bottom:0; }
.pinsight-ico{ width:38px; height:38px; flex:none; border-radius:10px; display:grid; place-items:center; }
.pinsight-ico svg{ width:18px; height:18px; }
.pinsight-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.pinsight-title{ color:var(--t1); font-weight:600; font-size:0.92rem; }
.pinsight-text{ color:var(--t3); font-size:0.86rem; line-height:1.45; margin-top:2px; }
.pinsight-text a{ font-weight:560; }

/* tinted icon helpers shared by feed + insights */
.tint-violet{ background:rgba(124,83,240,0.12); color:var(--violet); }
.tint-green{  background:var(--sage-soft);       color:var(--sage); }
.tint-amber{  background:var(--brass-soft);      color:var(--brass); }
.tint-rose{   background:var(--clay-soft);       color:var(--clay); }
.tint-blue{   background:rgba(46,143,176,0.13);  color:var(--cyan); }

.pcard-empty{ color:var(--t3); font-size:0.9rem; padding:var(--s6) var(--s5); text-align:center; line-height:1.5; }

/* responsive: collapse the sidebar to a top rail */
@media (max-width:860px){
  .pshell{ grid-template-columns:1fr; }
  .psidebar{ position:static; height:auto; flex-direction:row; flex-wrap:wrap; align-items:center; gap:var(--s3); }
  .pnav{ flex-direction:row; flex-wrap:wrap; margin-top:0; }
  .pnav-item{ padding:0.5em 0.7em; }
  .psidebar-foot{ margin:0 0 0 auto; border-top:0; padding-top:0; display:flex; align-items:center; gap:var(--s3); }
  .puser{ display:none; }
  .ptable-head{ display:none; }
  .ptable-row{ grid-template-columns:1fr auto; row-gap:var(--s1); }
}