/* ============================================================================
   premium.css — Parish Operations Platform "premium" design-system layer.
   Loaded AFTER style.css (base.html), so it enhances the existing brand
   palette/tokens without replacing them. Adds: elevation scale, a refined
   shell, KPI cards, real SVG-chart hosts, enterprise tables, skeletons, and
   tasteful motion. New component classes (.kpi/.panel/.lux/...) are used only
   by the redesigned Overview; the shell overrides (.sidebar/.main) cascade
   premium polish to every page. Brand colours come from style.css :root.
   Added 2026-06-14 (design + adversarial QA panel).
   ============================================================================ */
:root{
  --olive-deep:#2A2118; --olive-900:#1F1A12; --paper:#FFFFFF; --bg:#F4EFE4; --line:#EFE9DB;
  --good:#1F7A4D; --good-bg:rgba(31,122,77,.10); --bad:#A63A2A; --bad-bg:rgba(166,58,42,.10);
  --r:14px; --r-lg:18px;
  --e1:0 1px 2px rgba(42,33,24,.05);
  --e2:0 1px 2px rgba(42,33,24,.04), 0 10px 26px -14px rgba(42,33,24,.20);
  --e3:0 2px 4px rgba(42,33,24,.05), 0 22px 48px -20px rgba(42,33,24,.28);
}
body{ background:var(--bg); }
.tnum{ font-variant-numeric:tabular-nums lining-nums; font-feature-settings:'tnum' 1,'lnum' 1; }

/* ---------- Shell uplift (cascades to all pages) ---------- */
.sidebar{ width:256px;
  background:linear-gradient(180deg,#39301F 0%, #2A2118 60%, #211B12 100%);
  box-shadow:1px 0 0 rgba(0,0,0,.2), 18px 0 40px -30px rgba(42,33,24,.5); }
.sidebar-header .church-loc{ color:#C9BCA4; }
.sidebar-platform-brand-words span{ color:#B6A988 !important; }
.sidebar-nav a{ display:flex; align-items:center; gap:.7rem; color:#E6DCC4; border-radius:9px;
  transition:background .16s, color .16s; }
.sidebar-nav a:hover{ background:rgba(200,160,74,.10); color:var(--gold-light); }
.sidebar-nav a.active{ position:relative; background:rgba(200,160,74,.14); color:#F8EFD6; }
.sidebar-nav a.active::before{ content:""; position:absolute; left:-.5rem; top:50%; transform:translateY(-50%);
  width:3px; height:22px; border-radius:0 3px 3px 0; background:linear-gradient(180deg,var(--gold-light),var(--gold-dark)); }
.sidebar-footer .user-name-link{ color:#F6ECCF; }
.main{ max-width:1480px; padding:2.4rem 2.8rem 4rem; }

/* ---------- Premium page header (Overview) ---------- */
.dash .page-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1.9rem; border:0; }
.dash .page-head .eyebrow{ font-size:.7rem; font-weight:600; text-transform:uppercase; letter-spacing:.22em; color:var(--gold-dark); margin-bottom:.3rem; }
.dash .page-head h1{ font-size:2.5rem; font-weight:600; color:var(--olive-deep); line-height:1; margin:0; }
.dash .page-head .sub{ color:var(--muted); font-size:.95rem; margin-top:.4rem; }
.head-actions{ display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap; }
.btn-ghost{ display:inline-flex; align-items:center; gap:.45rem; height:40px; padding:0 1.1rem; border-radius:12px;
  font-size:.88rem; font-weight:600; background:var(--paper); border:1px solid var(--border); color:var(--olive); box-shadow:var(--e1); transition:.16s; }
.btn-ghost:hover{ border-color:var(--gold); background:#FFFDF8; text-decoration:none; }
.btn-ghost svg{ width:16px; height:16px; }

/* ---------- KPI cards ---------- */
.kpi-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.15rem; margin-bottom:1.5rem; }
@media(max-width:1180px){ .kpi-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:640px){ .kpi-grid{ grid-template-columns:1fr; } }
.kpi{ display:flex; flex-direction:column; background:var(--paper); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:1.25rem 1.35rem 1.1rem; box-shadow:var(--e2); transition:transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s; }
.kpi:hover{ transform:translateY(-3px); box-shadow:var(--e3); }
.kpi-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.65rem; }
.kpi-label{ font-size:.74rem; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); }
.kpi-ico{ width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(160deg,#FBF4E2,#F1E4C5); color:var(--gold-dark); box-shadow:inset 0 0 0 1px rgba(200,160,74,.22); }
.kpi-ico svg{ width:18px; height:18px; }
.kpi-value{ font-weight:700; font-size:2.05rem; color:var(--olive-deep); line-height:1; letter-spacing:-.012em;
  font-variant-numeric:tabular-nums lining-nums; font-feature-settings:'tnum' 1,'lnum' 1; }
.kpi-foot{ display:flex; align-items:center; gap:.5rem; margin-top:.55rem; min-height:1.2rem; }
.delta{ display:inline-flex; align-items:center; gap:.18rem; font-size:.77rem; font-weight:700; padding:.16rem .5rem; border-radius:999px; }
.delta.good{ color:var(--good); background:var(--good-bg); }
.delta.bad{ color:var(--bad); background:var(--bad-bg); }
.delta svg{ width:12px; height:12px; }
.kpi-sub{ font-size:.79rem; color:var(--muted); }
.kpi-spark{ margin-top:.85rem; height:30px; }
.kpi-spark svg{ display:block; width:100%; height:30px; }

/* ---------- Panels / charts ---------- */
.grid-2{ display:grid; grid-template-columns:1.55fr 1fr; gap:1.15rem; margin-bottom:1.15rem; align-items:start; }
@media(max-width:1100px){ .grid-2{ grid-template-columns:1fr; } }
.cols-2{ display:grid; grid-template-columns:1fr 1fr; gap:1.15rem; align-items:start; }
@media(max-width:1100px){ .cols-2{ grid-template-columns:1fr; } }
.panel{ background:var(--paper); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--e2); overflow:hidden; margin-bottom:1.15rem; }
.panel-head{ display:flex; align-items:center; justify-content:space-between; padding:1.1rem 1.4rem; border-bottom:1px solid var(--line); }
.panel-head h2{ font-size:1.4rem; font-weight:600; color:var(--olive-deep); margin:0; }
.panel-head .ph-sub{ font-size:.82rem; color:var(--muted); }
.panel-head .link{ font-size:.82rem; font-weight:600; color:var(--gold-dark); }
.panel-head .link:hover{ color:var(--olive); }
.panel-body{ padding:1.25rem 1.4rem 1.4rem; }
.legend{ display:flex; flex-direction:column; gap:.65rem; }
.legend-row{ display:flex; align-items:center; gap:.6rem; font-size:.9rem; }
.legend-dot{ width:10px; height:10px; border-radius:3px; flex:none; }
.legend-row .lg-name{ color:var(--text); font-weight:500; }
.legend-row .lg-val{ margin-left:auto; font-weight:600; color:var(--olive-deep); font-variant-numeric:tabular-nums lining-nums; }
.legend-row .lg-pct{ color:var(--muted); font-size:.8rem; width:40px; text-align:right; font-variant-numeric:tabular-nums lining-nums; }

/* ---------- Enterprise tables ---------- */
table.lux{ width:100%; border-collapse:collapse; }
table.lux th{ text-align:left; padding:.55rem .9rem; font-size:.7rem; text-transform:uppercase; letter-spacing:.07em;
  color:var(--muted); font-weight:600; border-bottom:1px solid var(--border); }
table.lux td{ padding:0 .9rem; height:60px; border-bottom:1px solid var(--line); font-size:.92rem; color:var(--text); }
table.lux tbody tr{ transition:background .12s; }
table.lux tbody tr:hover{ background:#FBF7EC; }
table.lux tr:last-child td{ border-bottom:none; }
table.lux .num{ text-align:right; font-variant-numeric:tabular-nums lining-nums; }
table.lux .money{ text-align:right; font-weight:600; color:var(--olive-deep); font-variant-numeric:tabular-nums lining-nums; }
.donor-cell{ display:flex; align-items:center; gap:.6rem; }
.avatar{ width:30px; height:30px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center;
  font-size:.74rem; font-weight:700; color:var(--olive); background:linear-gradient(160deg,#F4E7C6,#E6D2A0); box-shadow:inset 0 0 0 1px rgba(200,160,74,.3); }
.dmuted{ color:var(--muted); font-size:.84rem; }
.dnum{ font-size:.84rem; color:var(--muted); font-variant-numeric:tabular-nums lining-nums; }
.chip{ display:inline-flex; align-items:center; gap:.35rem; padding:.2rem .55rem .2rem .45rem; border-radius:7px; font-size:.74rem; font-weight:600;
  background:#F3EEE2; color:#5A5142; border:1px solid #E9E1CF; }
.chip .cdot{ width:7px; height:7px; border-radius:50%; }
.cdot-eft{ background:var(--gold-dark); } .cdot-card{ background:var(--olive); }
.table-wrap{ overflow-x:auto; }

/* ---------- Motion + skeletons ---------- */
@keyframes pop-rise{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
.reveal{ opacity:0; animation:pop-rise .6s cubic-bezier(.2,.7,.3,1) forwards; }
@keyframes pop-shimmer{ 100%{ background-position:-200% 0; } }
.skeleton{ background:linear-gradient(90deg,#efe9da 25%,#f7f2e7 37%,#efe9da 63%); background-size:200% 100%; animation:pop-shimmer 1.4s infinite; border-radius:8px; }
@media (prefers-reduced-motion: reduce){ .reveal{ animation:none; opacity:1; } .skeleton{ animation:none; } }

/* ---------- Segmented year control (Overview header) ---------- */
.dash .segmented{ display:inline-flex; align-items:center; height:40px; background:var(--paper); border:1px solid var(--border); border-radius:999px; padding:4px; box-shadow:var(--e1); }
.dash .segmented a{ height:32px; display:inline-flex; align-items:center; padding:0 .9rem; border-radius:999px; font-size:.84rem; font-weight:600; color:var(--muted); transition:.15s; text-decoration:none; }
.dash .segmented a.on{ background:linear-gradient(160deg,var(--olive),var(--olive-deep)); color:var(--cream); box-shadow:0 1px 2px rgba(0,0,0,.14); }
.dash .segmented a:not(.on):hover{ color:var(--olive); }
.dash .empty{ padding:1.5rem; text-align:center; color:var(--muted); }

/* ---------- Legacy-component uplift (2026-06-14): cascades premium polish
   to every staff + parishioner page that uses the shared components. ---------- */
.card{ border-radius:16px; border-color:#EAE2CF;
  box-shadow:0 1px 2px rgba(42,33,24,.04), 0 16px 36px -22px rgba(42,33,24,.26); }
a.card{ transition:transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s, border-color .2s; }
a.card:hover{ transform:translateY(-2px); border-color:rgba(200,160,74,.5);
  box-shadow:0 2px 4px rgba(42,33,24,.05), 0 26px 50px -26px rgba(42,33,24,.34); }
.stat-card{ border-radius:16px;
  box-shadow:0 1px 2px rgba(42,33,24,.04), 0 16px 36px -22px rgba(42,33,24,.24); }
.btn, .btn-primary, .btn-secondary, .btn-download, .btn-ghost{ border-radius:11px;
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease, background .15s ease; }
.btn-primary{ box-shadow:0 12px 26px -14px rgba(168,132,47,.5); }
.btn-primary:hover{ transform:translateY(-1px); filter:brightness(1.05); }
.badge{ border-radius:7px; letter-spacing:.02em; }
table.data tbody tr{ transition:background .12s; }
table.data tbody tr:hover td{ background:#FBF7EC; }
.filter-bar input, .filter-bar select, .inp{ border-radius:10px; transition:border-color .15s, box-shadow .15s, background .15s; }
.filter-bar input:focus, .filter-bar select:focus, .inp:focus{ box-shadow:0 0 0 4px rgba(200,160,74,.18); }