/* EPS Dashboard — shared design tokens & primitives.
   Professional, enterprise-grade system for a property-valuation firm.
   Light theme. Semantic tokens; refined elevation, typography, focus. */
:root{
  /* surfaces — cool slate neutrals */
  --bg:#f1f4f8; --panel:#ffffff; --panel-2:#f8fafc;
  --ink:#0f172a; --ink-2:#334155; --muted:#64748b; --faint:#94a3b8;
  --line:#e2e8f0; --line-2:#eef2f6;

  /* brand — deep teal (financial-grade) */
  --accent:#0f766e; --accent-ink:#115e59; --accent-soft:#d7eeea; --accent-softer:#eefaf7;

  /* semantic status */
  --ok:#15803d; --okbg:#e7f5ec;
  --warn:#b45309; --warnbg:#fdf2e3;
  --cancel:#b91c1c; --cancelbg:#fdecec;
  --staff:#4338ca; --staffbg:#eaeafe;

  /* pipeline stage accents (sequential, distinguishable, on-brand) */
  --st-work:#64748b;   --st-work-bg:#eef2f6;     /* slate  — intake     */
  --st-visit:#b45309;  --st-visit-bg:#fdf2e3;    /* amber  — site visit */
  --st-primary:#0f766e;--st-primary-bg:#d7eeea;  /* teal   — primary    */
  --st-final:#4338ca;  --st-final-bg:#eaeafe;    /* indigo — final      */
  --st-done:#15803d;   --st-done-bg:#e7f5ec;     /* green  — done       */

  /* elevation scale (consistent, slate-tinted) */
  --sh-1:0 1px 2px rgba(15,23,42,.06);
  --sh-2:0 1px 3px rgba(15,23,42,.09),0 1px 2px rgba(15,23,42,.05);
  --sh-3:0 4px 14px rgba(15,23,42,.10),0 2px 5px rgba(15,23,42,.05);
  --sh-4:0 16px 40px rgba(15,23,42,.16),0 4px 10px rgba(15,23,42,.07);
  --shadow:var(--sh-2);                 /* back-compat alias */

  /* radii — tighter, more serious (no pills) */
  --r-sm:5px; --r-md:7px; --r-lg:9px; --r-xl:12px;
  --focus:0 0 0 3px var(--accent-soft);

  /* z-index scale */
  --z-nav:50; --z-drawer:60; --z-scrim:55;
}
*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);color:var(--ink);
  font-size:14px;line-height:1.5;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  display:flex;flex-direction:column;height:100vh;
  font-feature-settings:"cv02","cv03","cv04";
}
/* tabular figures for all data/counts so columns don't jitter */
.num,.count,.kpi .num,.col h3 .c,.cnt,.bitem .n,.res .crumb,.card .d{font-variant-numeric:tabular-nums;}

/* visible, accessible focus on every interactive element */
a:focus-visible,button:focus-visible,input:focus-visible,
[tabindex]:focus-visible,.navitem:focus-visible,.bitem:focus-visible,
.card:focus-visible,.res:focus-visible,.tab:focus-visible{
  outline:none;box-shadow:var(--focus);border-radius:var(--r-sm);
}

/* ---- generic primitives reused across views ---- */
.chip{font-size:11px;padding:2px 8px;border-radius:var(--r-sm);font-weight:600;white-space:nowrap;}
.chip[data-s="Active"]{background:var(--okbg);color:var(--ok);}
.chip[data-s="Cancelled"]{background:var(--cancelbg);color:var(--cancel);}
.chip[data-s="Staff"]{background:var(--staffbg);color:var(--staff);}
.chip[data-s="In Progress"]{background:var(--warnbg);color:var(--warn);}
.crumb{color:var(--muted);font-size:12px;}
.crumb b{color:var(--ink);font-weight:600;}
.btn{
  border:1px solid var(--line);background:var(--panel);color:var(--ink-2);
  border-radius:var(--r-sm);padding:7px 13px;font:inherit;font-size:12.5px;font-weight:550;
  cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:7px;
  transition:border-color .15s ease,color .15s ease,background .15s ease;
}
.btn:hover{border-color:var(--accent);color:var(--accent);}
.btn.pri{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600;}
.btn.pri:hover{background:var(--accent-ink);color:#fff;}
.muted{color:var(--muted);}
mark{background:#fff3a8;padding:0 1px;border-radius:2px;}
.empty{color:var(--muted);padding:60px 20px;text-align:center;}
.loading{color:var(--muted);padding:40px 20px;text-align:center;}

/* inline SVG icon sizing tokens (replace emoji) */
.ic{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;}
.ic svg{display:block;}
.ic-sm svg{width:15px;height:15px;}
.ic-md svg{width:18px;height:18px;}
.ic-lg svg{width:20px;height:20px;}

/* file rows reused in detail panels */
.filelist{list-style:none;margin:0;padding:0;}
.filelist li{display:flex;align-items:center;gap:9px;padding:6px 9px;border-radius:var(--r-sm);cursor:pointer;transition:background .12s ease;}
.filelist li:hover{background:var(--accent-soft);}
.filelist .fi{width:18px;text-align:center;color:var(--muted);}
.filelist .sz{margin-left:auto;color:var(--muted);font-size:11px;font-variant-numeric:tabular-nums;}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important;animation:none !important;}
}