/* Sample client dashboard (case study).

   Typographic and surface system: Swiss precision on paper. One grotesk does
   every job -- hierarchy comes from weight, size and alignment, never from a
   second face. Decorative gradients are gone; structure is carried by hairline
   rules and a strict 4px spacing grid. The only gradients left in the page are
   the SVG hatches inside the charts, where they encode a data series (expenses,
   amounts not yet cleared) rather than decorate a surface.

   Archivo is self-hosted from fonts/ for the same reason League Spartan is in the
   parent stylesheet: no third-party font CDN on any page of this site.

   The marketing site keeps League Spartan. This is a different kind of surface
   -- a tool someone reads numbers off, not a page that persuades -- and it gets
   a type system built for dense data. Brand continuity is carried by the blue.

   Figures are illustrative; see the banner at the top of the page. */

@font-face{
  font-family:'Archivo';
  src:url('../fonts/Archivo-Variable.woff2') format('woff2');
  font-weight:400 700;
  font-style:normal;
  font-display:swap;
}

:root{
  /* --- surface: a pale periwinkle canvas so the pastel panels read as colour
         rather than as slightly-off greys --- */
  --paper:#F5F5FB;
  --surface:#FFFFFF;
  --rail:#FAFAFE;
  --sunken:#F3F4FA;
  --rule:#E4E4EF;
  --rule-strong:#CBCBDC;

  /* --- ink: the tertiary step is dark enough to clear 4.5:1 on every tint in
         the palette below, not just on white --- */
  --ink:#10192A;
  --ink-2:#3E4D64;
  --ink-3:#525F75;

  /* --- pastel card fills --- */
  --tint-blue:#DCE9F8;
  --tint-violet:#E6DEF9;
  --tint-green:#D8EDE1;
  --tint-teal:#D3ECE7;
  --tint-amber:#FAEBCB;
  --tint-rose:#FADFDC;
  --tint-peach:#FBE3D6;

  /* --- solid fills, all cleared for white text --- */
  --solid-blue:#2B6CA6;
  --solid-violet:#6154B8;
  --solid-green:#1B7557;
  --solid-teal:#0E6E62;
  --solid-amber:#8C5E11;
  --solid-rose:#A84A42;

  /* --- accent (carried over from the marketing site) --- */
  --accent:#1A6FA8;
  --accent-deep:#0F4C77;
  --accent-wash:#EAF2F8;

  /* --- semantic --- */
  --pos:#197A5E;
  --neg:#A83F36;
  --warn:#8F6512;
  --amber:#D9A038;

  /* --- type scale: fixed rem steps, ~1.2 ratio. No clamp: a dashboard is
         read at a consistent size and fluid headings only wobble. --- */
  --t-micro:0.6875rem;
  --t-xs:0.75rem;
  --t-sm:0.8125rem;
  --t-base:0.875rem;
  --t-md:1rem;
  --t-lg:1.375rem;
  --t-xl:1.75rem;
  --t-2xl:2.25rem;

  /* --- geometry --- */
  --r-panel:12px;
  --r-control:6px;
  --r-chip:4px;
  --ease:cubic-bezier(0.2,0.6,0.25,1);
  --dur:160ms;
}

*{box-sizing:border-box;}

body.dash{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Archivo','Helvetica Neue',Helvetica,Arial,sans-serif;
  font-size:var(--t-base);
  line-height:1.45;
    -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
/* the parent stylesheet sets League Spartan on generic elements; this surface
   runs on one family, so pull everything back to the body's face */
body.dash h1,body.dash h2,body.dash h3,body.dash p,body.dash a,
body.dash span,body.dash button,body.dash input,body.dash nav,
body.dash aside,body.dash text{font-family:inherit;}

/* Figures line up in columns or they are not figures. */
.kpi-value,.kpi-pct,.gauge-value,.run-clock,.dash-badge,
.cf-y,.cf-x,.chart-tip,.chart-x{
  font-variant-numeric:tabular-nums lining-nums;
  font-feature-settings:"tnum" 1;
}

/* --- browser surfaces: these ship with defaults that belong to no design --- */
body.dash ::selection{background:var(--accent);color:#fff;}
body.dash{caret-color:var(--accent);}
body.dash *{scrollbar-width:thin;scrollbar-color:var(--rule-strong) transparent;}
body.dash ::-webkit-scrollbar{width:10px;height:10px;}
body.dash ::-webkit-scrollbar-track{background:transparent;}
body.dash ::-webkit-scrollbar-thumb{
  background:var(--rule-strong);
  border-radius:99px;
  border:3px solid var(--paper);
}
body.dash ::-webkit-scrollbar-thumb:hover{background:var(--ink-3);}
body.dash :focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:3px;
}

/* ========================================================================
   Sample banner
   ======================================================================== */
.dash-notice{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 20px;
  padding:10px 20px;
  background:var(--ink);
  color:#fff;
  font-size:var(--t-sm);
}
.dash-notice a{color:#fff;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;}
.dash-notice a:hover{text-decoration-thickness:2px;}
.dash-notice-tag{
  padding:3px 7px;
  border-radius:var(--r-chip);
  background:rgba(255,255,255,0.14);
  font-size:var(--t-micro);
  font-weight:600;
  letter-spacing:0.1em;
  text-transform:uppercase;
}
.dash-notice-text{color:rgba(255,255,255,0.72);font-weight:400;}
.dash-notice-back{margin-left:auto;font-weight:500;}

/* ========================================================================
   Shell
   ======================================================================== */
.dash-shell{
  display:grid;
  grid-template-columns:201px minmax(0,1fr);
  gap:14px;
  padding:14px;
  max-width:1680px;
  margin:0 auto;
  align-items:start;
}

/* ---------------- rail ---------------- */
.dash-side{
  position:sticky;
  top:14px;
  background:var(--rail);
  border:1px solid var(--rule);
  border-radius:var(--r-panel);
  padding:18px 12px 12px;
  display:flex;
  flex-direction:column;
  gap:20px;
  min-height:calc(100vh - 28px);
}
.dash-brand{
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 6px 16px;
  border-bottom:1px solid var(--rule);
}
.dash-brand-mark{
  display:grid;
  place-items:center;
  width:30px;height:30px;
  border-radius:var(--r-control);
  background:var(--ink);
  color:#fff;
}
.dash-brand-mark svg{width:17px;height:17px;}
.dash-brand-name{font-size:var(--t-md);font-weight:600;letter-spacing:-0.015em;}

.dash-nav-scroll{
  display:flex;
  flex-direction:column;
  min-height:0;
  overflow-y:auto;
  margin-right:-6px;
  padding-right:6px;
}
.dash-menu-label{
  margin:20px 0 6px;
  padding:0 8px;
  font-size:var(--t-micro);
  font-weight:600;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--ink-3);
}
.dash-nav-scroll > .dash-menu-label:first-child{margin-top:0;}
.dash-menu{display:flex;flex-direction:column;}
.dash-menu a{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  padding:7px 8px;
  border-radius:var(--r-control);
  color:var(--ink-2);
  font-size:var(--t-base);
  font-weight:450;
  text-decoration:none;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease);
}
.menu-tile{
  display:grid;
  place-items:center;
  width:34px;height:34px;
  flex:0 0 auto;
  border-radius:8px;
  background:var(--tile-bg);
  color:var(--tile-fg);
  box-shadow:inset 0 0 0 1px var(--tile-ring);
  transition:background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.menu-tile svg{width:20px;height:20px;}
.menu-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.dash-menu a:hover{background:var(--sunken);color:var(--ink);}
.dash-menu a:hover .menu-tile{box-shadow:inset 0 0 0 1px var(--tile-fg);}
/* Active state is a flat wash plus accent text and icon. No coloured left bar:
   it sat outside the scrolling rail and got clipped, and a thick coloured edge
   on a list item is a tell, not a design decision. */
.dash-menu a.is-active{
  background:var(--accent-wash);
  color:var(--accent-deep);
  font-weight:600;
}
.dash-menu a.is-active .menu-tile{box-shadow:inset 0 0 0 1.5px var(--tile-fg);}
.dash-badge{
  margin-left:auto;
  padding:1px 6px;
  border-radius:var(--r-chip);
  background:var(--surface);
  border:1px solid var(--rule);
  color:var(--ink-2);
  font-size:var(--t-micro);
  font-weight:600;
}

.dash-promo{
  margin-top:auto;
  border-radius:var(--r-control);
  border:1px solid var(--rule);
  background:var(--surface);
  padding:16px;
}
.dash-promo-mark{display:grid;place-items:center;width:26px;height:26px;border-radius:var(--r-chip);background:var(--accent-wash);color:var(--accent-deep);}
.dash-promo-mark svg{width:15px;height:15px;}
.dash-promo h3{margin:10px 0 3px;font-size:var(--t-base);font-weight:600;letter-spacing:-0.01em;}
.dash-promo p{margin:0 0 12px;font-size:var(--t-xs);color:var(--ink-2);line-height:1.5;}
.dash-promo-btn{
  display:block;
  text-align:center;
  padding:8px 12px;
  border-radius:var(--r-control);
  background:var(--ink);
  color:#fff;
  font-size:var(--t-sm);
  font-weight:500;
  text-decoration:none;
  transition:background var(--dur) var(--ease);
}
.dash-promo-btn:hover{background:var(--accent-deep);}

/* ========================================================================
   Main column
   ======================================================================== */
.dash-main{display:flex;flex-direction:column;gap:14px;min-width:0;}

.dash-topbar{
  display:flex;
  align-items:center;
  gap:12px;
  background:var(--surface);
  border:1px solid var(--rule);
  border-radius:var(--r-panel);
  padding:10px 12px;
}
.dash-search{
  display:flex;
  align-items:center;
  gap:9px;
  flex:1 1 auto;
  max-width:440px;
  padding:9px 12px;
  border-radius:var(--r-control);
  background:var(--sunken);
  color:var(--ink-3);
  font-size:var(--t-base);
}
.dash-search svg{width:16px;height:16px;flex:0 0 auto;}
.dash-kbd{
  margin-left:auto;
  padding:2px 6px;
  border-radius:var(--r-chip);
  background:var(--surface);
  border:1px solid var(--rule);
  font-size:var(--t-micro);
  font-weight:600;
  color:var(--ink-2);
}
.dash-icon-btn{
  display:grid;place-items:center;
  width:36px;height:36px;
  border-radius:var(--r-control);
  background:transparent;
  border:1px solid var(--rule);
  color:var(--ink-2);
  cursor:pointer;
  transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease);
}
.dash-icon-btn svg{width:17px;height:17px;}
.dash-icon-btn:hover{border-color:var(--rule-strong);color:var(--ink);}
.dash-user{display:flex;align-items:center;gap:10px;margin-left:auto;padding-left:12px;border-left:1px solid var(--rule);}
.dash-avatar{
  display:grid;place-items:center;
  width:36px;height:36px;
  border-radius:var(--r-control);
  background:var(--accent-deep);
  color:#fff;
  font-size:var(--t-sm);
  font-weight:600;
}
.dash-user-name{display:block;font-size:var(--t-base);font-weight:550;line-height:1.3;}
.dash-user-mail{display:block;font-size:var(--t-xs);color:var(--ink-3);}

.dash-head{display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px;padding:10px 2px 2px;}
.dash-head h1{margin:0;font-size:var(--t-2xl);font-weight:650;letter-spacing:-0.03em;line-height:1.05;}
.dash-head p{margin:6px 0 0;color:var(--ink-2);font-size:var(--t-base);}
.dash-head-actions{display:flex;gap:8px;margin-left:auto;}
.dash-btn{
  display:inline-flex;align-items:center;gap:7px;
  padding:10px 16px;
  border-radius:var(--r-control);
  font-size:var(--t-base);
  font-weight:550;
  text-decoration:none;
  border:1px solid transparent;
  cursor:pointer;
  font-family:inherit;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease);
}
.dash-btn svg{width:15px;height:15px;}
.dash-btn--solid{background:var(--ink);color:#fff;}
.dash-btn--solid:hover{background:var(--accent-deep);}
.dash-btn--ghost{background:var(--surface);color:var(--ink-2);border-color:var(--rule);}
.dash-btn--ghost:hover{border-color:var(--rule-strong);color:var(--ink);}

/* ========================================================================
   Panels
   ======================================================================== */
.dash-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;}
.panel{
  background:var(--surface);
  border:1px solid var(--rule);
  border-radius:var(--r-panel);
  padding:20px;
  min-width:0;
}
.panel-head{
  display:flex;align-items:center;gap:12px;
  padding-bottom:14px;
  margin-bottom:16px;
  border-bottom:1px solid var(--rule);
}
.panel-head h2{margin:0;font-size:var(--t-md);font-weight:600;letter-spacing:-0.015em;}
.panel-head .dash-btn{margin-left:auto;padding:6px 10px;font-size:var(--t-xs);}
.span-2{grid-column:span 2;}
.span-3{grid-column:span 3;}
.span-4{grid-column:span 4;}

/* ---------------- stat cards ---------------- */
.dash-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:14px;align-items:start;}
.dash-kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}

.kpi{display:flex;flex-direction:column;gap:14px;}
/* wraps rather than dropping the label when a card is narrow */
.kpi-top{display:flex;align-items:center;flex-wrap:wrap;gap:8px 9px;}
.kpi-icon{
  display:grid;place-items:center;
  width:28px;height:28px;flex:0 0 auto;
  border-radius:8px;
  background:var(--tile-bg);
  color:var(--tile-fg);
  box-shadow:inset 0 0 0 1px var(--tile-ring);
}
.kpi-icon svg{width:16px;height:16px;}
.kpi-top h2{margin:0;font-size:var(--t-base);font-weight:550;color:var(--ink-2);min-width:0;line-height:1.3;flex:1 1 auto;}
/* Label beside a round arrow tile, the affordance the marketing site already
   uses on its "explore" panel -- scaled from 88px down to card size. The link
   itself carries no box; the circle is the button. */
.kpi-action{
  margin-left:auto;flex:0 0 auto;
  display:inline-flex;align-items:center;gap:8px;
  padding:0;
  border:0;
  background:none;
  color:var(--ink-2);
  font-size:var(--t-xs);
  font-weight:550;
  text-decoration:none;
  white-space:nowrap;
  transition:color var(--dur) var(--ease);
}
.kpi-action-arrow{
  display:grid;
  place-items:center;
  width:26px;height:26px;
  flex:0 0 auto;
  border-radius:50%;
  background:var(--sunken);
  color:var(--ink-2);
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.kpi-action-arrow svg{width:13px;height:13px;}
.kpi-action:hover{color:var(--accent-deep);}
.kpi-action:hover .kpi-action-arrow,
.kpi-action:focus-visible .kpi-action-arrow{
  background:var(--accent-wash);
  color:var(--accent-deep);
  transform:rotate(45deg);
}

.kpi-row{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;min-width:0;}
.kpi-value{margin:0;font-size:var(--t-xl);font-weight:650;letter-spacing:-0.03em;line-height:1.05;}
/* The direction marker is a glyph beside the change, not a tinted disc.
   Colour follows the meaning, so a fall in expenses reads as the good news
   it is rather than as a warning. */
.kpi-chev{margin-left:auto;display:inline-flex;align-items:center;}
.kpi-chev svg{width:13px;height:13px;}
.kpi-pct{font-size:var(--t-base);font-weight:600;white-space:nowrap;letter-spacing:-0.01em;}
.kpi-chev--up,.kpi-chev--good,.kpi-pct--up,.kpi-pct--good{color:var(--pos);}
.kpi-chev--down,.kpi-chev--bad,.kpi-pct--down,.kpi-pct--bad{color:var(--neg);}
.kpi-chev--flat,.kpi-pct--flat{color:var(--ink-3);}
.kpi-foot{margin:0;font-size:var(--t-xs);color:var(--ink-3);}

/* ========================================================================
   Charts
   ======================================================================== */
.chart{display:flex;align-items:flex-end;gap:clamp(6px,1.4vw,18px);height:216px;padding-top:40px;}
.chart-col{flex:1 1 0;display:flex;flex-direction:column;align-items:center;gap:10px;min-width:0;}
.chart-stack{position:relative;width:100%;max-width:56px;height:170px;display:flex;flex-direction:column;justify-content:flex-end;gap:3px;}
.chart-bar{width:100%;border-radius:3px;}
.chart-bar--rev{background:var(--accent);}
.chart-bar--exp{background:repeating-linear-gradient(135deg,#EFD6A2 0 5px,#FAEBCB 5px 10px);}
.chart-col--peak .chart-bar--rev{background:var(--accent-deep);}
.chart-tip{
  position:absolute;
  top:-22px;left:50%;
  transform:translateX(-50%);
  padding:2px 7px;
  border-radius:var(--r-chip);
  background:var(--ink);
  color:#fff;
  font-size:var(--t-micro);
  font-weight:600;
  white-space:nowrap;
}
.chart-x{font-size:var(--t-xs);font-weight:500;color:var(--ink-3);}
.chart-legend{
  display:flex;flex-wrap:wrap;gap:8px 18px;
  margin-top:16px;padding-top:14px;
  border-top:1px solid var(--rule);
  font-size:var(--t-xs);color:var(--ink-2);
}
.chart-legend span{display:inline-flex;align-items:center;gap:7px;}
.swatch{width:10px;height:10px;border-radius:2px;flex:0 0 auto;}
.swatch--rev{background:var(--accent);}
.swatch--exp{background:repeating-linear-gradient(135deg,#EFD6A2 0 4px,#FAEBCB 4px 8px);}
.swatch--unc{background:repeating-linear-gradient(45deg,#8FB6D2 0 3px,#C6DBEA 3px 6px);}
.swatch--dot{background:var(--ink);}

/* ---------------- gauge ---------------- */
.gauge{position:relative;display:grid;place-items:center;padding:4px 0;}
.gauge svg{width:100%;max-width:230px;height:auto;transform:rotate(-90deg);}
.gauge-track{fill:none;stroke:var(--sunken);stroke-width:14;}
.gauge-arc{fill:none;stroke-width:14;stroke-linecap:butt;}
.gauge-arc--a{stroke:var(--accent-deep);}
.gauge-arc--b{stroke:var(--accent);}
.gauge-center{position:absolute;top:50%;transform:translateY(-50%);text-align:center;}
.gauge-value{display:block;font-size:var(--t-xl);font-weight:650;letter-spacing:-0.03em;line-height:1;}
.gauge-label{display:block;margin-top:5px;font-size:var(--t-xs);color:var(--ink-3);}

/* ---------------- cash flow ---------------- */
.panel--cash{display:flex;flex-direction:column;}
.cf-wrap{flex:1 1 auto;min-width:0;}
.cf-svg{width:100%;height:auto;display:block;overflow:visible;}
.cf-in{fill:var(--accent);}
.cf-out{fill:var(--amber);}
.cf-in-unc{fill:url(#cfHatchIn);}
.cf-out-unc{fill:url(#cfHatchOut);}
.cf-dot{fill:var(--ink);}
.cf-grid{stroke:var(--rule);stroke-width:1;stroke-dasharray:3 4;}
.cf-axis{stroke:var(--rule-strong);stroke-width:1;}
.cf-axis-y{stroke:var(--rule);stroke-width:1;}
.cf-y{fill:var(--ink-3);font-size:12px;font-weight:550;text-anchor:end;}
.cf-x{fill:var(--ink-3);font-size:12px;font-weight:500;text-anchor:middle;}
.cf-tick{stroke:var(--rule-strong);stroke-width:1;}

/* ========================================================================
   Status list
   ======================================================================== */
.list{display:flex;flex-direction:column;}
.list-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--rule);}
.list-row:first-child{padding-top:0;}
.list-row:last-child{border-bottom:0;}
.list-mark{
  display:grid;place-items:center;
  width:30px;height:30px;flex:0 0 auto;
  border-radius:8px;
  background:var(--tile-bg);
  color:var(--tile-fg);
  box-shadow:inset 0 0 0 1px var(--tile-ring);
}
.list-mark svg{width:16px;height:16px;}
.lottie-icon{display:block;flex:0 0 auto;pointer-events:none;}
.lottie-icon svg{display:block;}
.list-body{min-width:0;}
.list-title{display:block;font-size:var(--t-base);font-weight:550;}
.list-sub{display:block;font-size:var(--t-xs);color:var(--ink-3);margin-top:1px;}
.pill{
  margin-left:auto;flex:0 0 auto;
  padding:3px 8px;
  border-radius:var(--r-chip);
  font-size:var(--t-micro);
  font-weight:600;
  letter-spacing:0.02em;
  white-space:nowrap;
  border:1px solid;
}
.pill--done{background:rgba(25,122,94,0.08);border-color:rgba(25,122,94,0.28);color:var(--pos);}
.pill--wip{background:rgba(143,101,18,0.08);border-color:rgba(143,101,18,0.28);color:var(--warn);}
.pill--todo{background:rgba(168,63,54,0.07);border-color:rgba(168,63,54,0.26);color:var(--neg);}
.pill--auto{background:var(--accent-wash);border-color:rgba(26,111,168,0.26);color:var(--accent-deep);}

/* ========================================================================
   Responsive: structural, never fluid type
   ======================================================================== */
@media (max-width:1400px){
  .dash-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .span-3,.span-4{grid-column:span 2;}
  .dash-split{grid-template-columns:1fr;}
}
@media (max-width:920px){
  .dash-shell{grid-template-columns:1fr;}
  .dash-side{position:static;min-height:0;}
  .dash-menu{flex-direction:row;flex-wrap:wrap;}
    .dash-promo{margin-top:12px;}
}
@media (max-width:640px){
  :root{--t-2xl:1.875rem;--t-xl:1.5rem;--t-lg:1.25rem;}
  .dash-shell{padding:10px;gap:10px;}
  .dash-grid,.dash-kpis{grid-template-columns:1fr;}
  .span-2,.span-3,.span-4{grid-column:span 1;}
  .dash-search{display:none;}
  .dash-head-actions{margin-left:0;width:100%;}
  .dash-btn{flex:1 1 auto;justify-content:center;}
  .panel{padding:16px;}
  .chart{height:180px;gap:5px;padding-top:34px;}
  .chart-stack{height:140px;}
}
@media (prefers-reduced-motion:reduce){
  body.dash *{transition-duration:0.01ms !important;}
}

/* Panel header controls: a period selector sitting beside the open-in action.
   The selector is a real button, so it needs the anchor styling plus a reset. */
.panel-tools{margin-left:auto;display:flex;align-items:center;gap:8px;flex:0 0 auto;}
.panel-tools .kpi-action{margin-left:0;}
.kpi-action--select{
  gap:6px;
  padding:6px 10px;
  border:1px solid var(--rule);
  border-radius:var(--r-chip);
  background:var(--surface);
  cursor:pointer;
  font-family:inherit;
  line-height:1.2;
  color:var(--ink-2);
}
.kpi-action--select svg{width:13px;height:13px;flex:0 0 auto;}
.kpi-action--select:hover{border-color:var(--accent);color:var(--accent-deep);}
.kpi-action--select svg:first-child{width:14px;height:14px;}
.kpi-action-caret{width:12px;height:12px;opacity:0.65;}
.kpi-action--select[aria-expanded="true"]{border-color:var(--accent);color:var(--accent-deep);}

@media (max-width:760px){
  /* keep the calendar glyph and caret, drop the label before the head wraps */
  .kpi-action--select .kpi-action-text{display:none;}
}

/* Period qualifier inside a stat heading. The same metric appears for the
   month and for the trailing year; without this the two look like a
   contradiction rather than two windows on the same number. */
.kpi-period{
  font-size:var(--t-xs);
  font-weight:500;
  color:var(--ink-3);
  letter-spacing:0;
}
.kpi-period::before{content:"· ";}

/* Totals under the cash-flow chart: the arithmetic the bars imply, stated. */
.cf-totals{
  display:flex;
  flex-wrap:wrap;
  gap:4px 20px;
  margin:16px 0 0;
  padding-top:14px;
  border-top:1px solid var(--rule);
  font-size:var(--t-sm);
  color:var(--ink-2);
}
.cf-totals b{font-weight:650;color:var(--ink);font-variant-numeric:tabular-nums lining-nums;}
.cf-totals-net b{color:var(--pos);}
.cf-totals + .chart-legend{margin-top:10px;padding-top:0;border-top:0;}

/* Twelve columns instead of seven: narrower bars, tighter gutters. */
.chart{gap:clamp(4px,0.9vw,12px);}
.chart-stack{max-width:34px;}
@media (max-width:640px){
  .chart{gap:3px;}
  .chart-stack{max-width:20px;}
  .chart-x{font-size:var(--t-micro);}
}

/* The callout sits on the last column, so centring it pushes half its width
   past the right edge of the chart. Anchor it to that edge instead. */
.chart-col--peak .chart-tip{left:auto;right:0;transform:none;}

/* ==========================================================================
   Budget card
   The client supplied a React/Tailwind reference for these two cards: a soft
   outer frame with an inset highlight, a deep-radius inner card, oversized
   figure, capsule delta, stacked-note illustration and a hover-readout area
   chart. Ported to plain CSS with the page's own blue in place of the
   reference's indigo. Deliberately richer than the flat panels around it.
   ========================================================================== */
/* The pair share one line across the full main column. Below ~1180 there is
   no longer room for two at a size the card carries, so they stack. */
.dash-heroes{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:14px;
  align-items:start;
}
/* The pair hold one line down to phone width; the card steps down a size at
   each breakpoint instead of dropping to a column. */
@media (max-width:1180px){
  .bc{border-radius:26px;padding:10px;}
  .bc::before{border-radius:25px 25px 0 0;}
  .bc-inner{border-radius:18px;padding:18px 18px 14px;}
  .bc-value{font-size:34px;}
  .bc-label{font-size:14px;}
  .bc-pill{margin-top:12px;padding:6px 12px;font-size:13px;}
}
@media (max-width:900px){
  .bc-value{font-size:28px;}
  .bc-inner{padding:16px 16px 12px;}
  .bc-pill{margin-top:10px;}
}
@media (max-width:640px){
  .dash-heroes{grid-template-columns:1fr;}
}

.bc{
  position:relative;
  border-radius:32px;
  padding:12px;
  background:linear-gradient(180deg, #E9EDF3 0%, #E3E8EF 100%);
  box-shadow:0 25px 50px -12px rgba(14,26,43,0.15), inset 0 0 0 1px rgba(255,255,255,0.55);
}
/* inset highlight across the top half of the frame */
.bc::before{
  content:"";
  position:absolute;
  inset:1px;
  height:50%;
  border-radius:31px 31px 0 0;
  background:linear-gradient(180deg, rgba(255,255,255,0.65), rgba(255,255,255,0));
  pointer-events:none;
}
.bc-inner{
  position:relative;
  overflow:hidden;
  border-radius:22px;
  background:var(--surface);
  padding:22px 22px 16px;
  box-shadow:0 2px 8px rgba(14,26,43,0.08), 0 0 0 1px rgba(14,26,43,0.04);
}

.bc-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;}
.bc-head-copy{flex:1 1 auto;min-width:0;}
.bc-label{
  margin:0;
  font-size:15px;
  font-weight:500;
  letter-spacing:0.01em;
  color:var(--ink-2);
}
.bc-label .kpi-period{font-size:var(--t-xs);}
.bc-value{
  margin:6px 0 0;
  font-size:40px;
  font-weight:600;
  line-height:1;
  letter-spacing:-0.03em;
  color:var(--ink);
  font-variant-numeric:tabular-nums lining-nums;
}
.bc-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:14px;
  padding:7px 14px;
  border-radius:999px;
  border:1px solid var(--rule);
  background:rgba(255,255,255,0.5);
  box-shadow:0 1px 3px rgba(14,26,43,0.05), 0 4px 12px rgba(14,26,43,0.04);
  font-size:14px;
  font-weight:600;
  color:var(--ink);
  font-variant-numeric:tabular-nums lining-nums;
}

.bc-chart{position:relative;margin-top:8px;}
.bc-svg{width:100%;display:block;touch-action:pan-y;}
.bc-rule{stroke:var(--rule-strong);stroke-width:1;opacity:0.5;transition:opacity var(--dur) var(--ease);}
.bc-rule.is-on{opacity:0.9;}
.bc-speck{fill:var(--surface);}
.bc-line{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;}
.bc-halo{fill:var(--surface);opacity:0.5;}
.bc-knob{fill:var(--surface);stroke:var(--accent);stroke-width:3;}
.bc-x{font-size:12px;font-weight:500;fill:var(--ink-3);}
.bc-halo,.bc-knob,.bc-tip{transition:all var(--dur) var(--ease);}

.bc-tip{
  position:absolute;
  transform:translateY(-140%);
  pointer-events:none;
  padding:6px 14px;
  border-radius:12px;
  background:rgba(16,25,42,0.92);
  color:#fff;
  font-size:14px;
  font-weight:600;
  white-space:nowrap;
  box-shadow:0 4px 16px rgba(14,26,43,0.22);
  font-variant-numeric:tabular-nums lining-nums;
}
.bc-tip::after{
  content:"";
  position:absolute;
  left:var(--arrow-x, 50%);bottom:-7px;
  transform:translateX(-50%);
  border:8px solid transparent;
  border-top-color:rgba(16,25,42,0.92);
  border-bottom:0;
}

.bc-foot{margin:2px 0 0;font-size:var(--t-xs);color:var(--ink-3);}
.bc-action{
  display:inline-flex;align-items:center;gap:8px;
  margin-top:12px;
  color:var(--ink-2);
  font-size:var(--t-xs);
  font-weight:550;
  text-decoration:none;
  transition:color var(--dur) var(--ease);
}
.bc-action:hover{color:var(--accent-deep);}
.bc-action:hover .kpi-action-arrow,
.bc-action:focus-visible .kpi-action-arrow{
  background:var(--accent-wash);
  color:var(--accent-deep);
  transform:rotate(45deg);
}

@media (max-width:640px){
  .bc{border-radius:28px;padding:10px;}
  .bc::before{border-radius:27px 27px 0 0;}
  .bc-inner{border-radius:20px;padding:20px 18px 14px;}
  .bc-value{font-size:34px;}
  .bc-label{font-size:14px;}
}
@media (prefers-reduced-motion:reduce){
  .bc-halo,.bc-knob,.bc-tip,.bc-rule{transition:none;}
}

/* ==========================================================================
   Statistic row
   The client's reference: one bordered container holding three segments split
   by rules rather than three separate cards, each with a title/period pair, a
   figure beside a pill delta, and a supporting line. Ported to the page's own
   tokens. Segments divide vertically when there is room and horizontally when
   the row stacks, the way the reference's container query behaves.
   ========================================================================== */
.statrow{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  background:var(--surface);
  border:1px solid var(--rule);
  border-radius:var(--r-panel);
  overflow:hidden;
  min-width:0;
}
.statrow-cell{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:24px;
  padding:20px;
  min-width:0;
  border-right:1px solid var(--rule);
}
.statrow-cell:last-child{border-right:0;}

.statrow-head{display:flex;align-items:flex-start;flex-wrap:wrap;gap:8px 12px;}
.statrow-heading{min-width:0;}
.statrow-title{
  font-size:18px;
  font-weight:600;
  letter-spacing:-0.015em;
  color:var(--ink);
  line-height:1.25;
}
.statrow-sub{margin-top:1px;font-size:14px;color:var(--ink-3);}
.statrow-head .kpi-action{margin-left:auto;padding-top:2px;}

.statrow-body{display:flex;flex-direction:column;gap:8px;}
.statrow-valuerow{display:flex;align-items:center;flex-wrap:wrap;gap:8px;}
.statrow-value{
  font-size:30px;
  font-weight:700;
  letter-spacing:-0.025em;
  line-height:1.05;
  color:var(--ink);
  font-variant-numeric:tabular-nums lining-nums;
}
.statrow-badge{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:4px 9px;
  border-radius:999px;
  font-size:13px;
  font-weight:600;
  white-space:nowrap;
  font-variant-numeric:tabular-nums lining-nums;
}
.statrow-badge svg{width:12px;height:12px;flex:0 0 auto;}
.statrow-badge--good{background:rgba(25,122,94,0.12);color:var(--pos);}
.statrow-badge--bad{background:rgba(168,63,54,0.12);color:var(--neg);}
.statrow-badge--flat{background:rgba(16,25,42,0.07);color:var(--ink-2);}
/* Reserve two lines so a one-line note and a wrapped one leave their figures
   on the same baseline across the row. */
.statrow-subtext{margin:0;font-size:14px;line-height:1.45;color:var(--ink-2);min-height:2.9em;}

@media (max-width:1100px){
  .statrow-title{font-size:16px;}
  .statrow-value{font-size:26px;}
  .statrow-cell{padding:18px;gap:18px;}
}
/* Three across is the point of the row, so it steps down a size rather than
   collapsing; the action label wraps under the heading when it stops fitting. */
@media (max-width:900px){
  .statrow-cell{padding:14px;gap:14px;}
  .statrow-title{font-size:15px;}
  .statrow-sub{font-size:13px;}
  .statrow-value{font-size:22px;}
  .statrow-badge{padding:3px 7px;font-size:12px;gap:4px;}
  .statrow-badge svg{width:11px;height:11px;}
  .statrow-subtext{font-size:13px;min-height:2.9em;}
}
@media (max-width:640px){
  /* stacked: the rules turn horizontal, as the reference does */
  .statrow{grid-template-columns:1fr;}
  .statrow-cell{border-right:0;border-bottom:1px solid var(--rule);}
  .statrow-cell:last-child{border-bottom:0;}
}

/* ==========================================================================
   Icon hues
   Colour is assigned by meaning, not sprinkled: each sidebar group carries one
   hue so the rail reads as colour-coded sections, and each list row takes the
   hue of its subject. Every glyph/tint pair was measured at 4.6:1 or better,
   so the icons stay legible rather than becoming pale decoration.
   ========================================================================== */
[data-hue]{--tile-bg:var(--sunken);--tile-fg:var(--ink-2);--tile-ring:transparent;}
[data-hue="blue"]  {--tile-bg:#E9F1F9;--tile-fg:#15638F;--tile-ring:#CFE2F1;}
[data-hue="violet"]{--tile-bg:#F0ECFA;--tile-fg:#5B4A9E;--tile-ring:#DCD4F1;}
[data-hue="amber"] {--tile-bg:#FAF1DF;--tile-fg:#8A6210;--tile-ring:#F0E0BE;}
[data-hue="teal"]  {--tile-bg:#E3F2EF;--tile-fg:#0F7263;--tile-ring:#C7E4DE;}
[data-hue="green"] {--tile-bg:#E7F3ED;--tile-fg:#197A5E;--tile-ring:#CCE6DA;}
[data-hue="rose"]  {--tile-bg:#FBEBE9;--tile-fg:#A63C33;--tile-ring:#F3D5D1;}
[data-hue="slate"] {--tile-bg:#EDF0F4;--tile-fg:#4E5D73;--tile-ring:#D9DFE7;}

/* anything without a hue keeps the old neutral tile */
.menu-tile:not([data-hue]),
.kpi-icon:not([data-hue]),
.list-mark:not([data-hue]){--tile-bg:var(--sunken);--tile-fg:var(--ink-2);--tile-ring:transparent;}

/* ==========================================================================
   Colour system
   Colour owns whole regions here rather than trimming edges: the two summary
   rows are pastel bands, a handful of panels take a solid fill, and the canvas
   itself carries a tint. Roles, not swatches -- every fill is tied to what the
   panel reports, and every pair was measured before it shipped (worst case
   4.97:1 for tertiary text, 5.53:1 for white on a solid).
   ========================================================================== */

/* ---- pastel panels ---- */
[data-tint]{background:var(--tint-fill);}
[data-tint="blue"]  {--tint-fill:var(--tint-blue);}
[data-tint="violet"]{--tint-fill:var(--tint-violet);}
[data-tint="green"] {--tint-fill:var(--tint-green);}
[data-tint="teal"]  {--tint-fill:var(--tint-teal);}
[data-tint="amber"] {--tint-fill:var(--tint-amber);}
[data-tint="rose"]  {--tint-fill:var(--tint-rose);}
[data-tint="peach"] {--tint-fill:var(--tint-peach);}

/* a tinted cell keeps its own hue for the icon tile instead of a grey one */
.statrow-cell[data-tint]{background:var(--tint-fill);}
.statrow-cell[data-tint] .kpi-action-arrow{background:rgba(255,255,255,0.65);}
/* The delta pill's own tint would sit on top of the cell's tint -- a green pill
   on a green card disappears. On a tinted cell it takes a white ground so the
   semantic colour still separates. */
.statrow-cell[data-tint] .statrow-badge{background:rgba(255,255,255,0.8);}
.statrow-cell[data-tint] .kpi-action:hover .kpi-action-arrow{background:#fff;}

/* ---- solid panels ---- */
[data-fill]{color:#fff;border-color:transparent;}
[data-fill="blue"]  {background:var(--solid-blue);}
[data-fill="violet"]{background:var(--solid-violet);}
[data-fill="green"] {background:var(--solid-green);}
[data-fill="teal"]  {background:var(--solid-teal);}
[data-fill="amber"] {background:var(--solid-amber);}
[data-fill="rose"]  {background:var(--solid-rose);}

[data-fill] .panel-head{border-bottom-color:rgba(255,255,255,0.22);}
[data-fill] .panel-head h2,
[data-fill] .kpi-value,
[data-fill] .gauge-value{color:#fff;}
[data-fill] .kpi-top h2{color:#fff;}
/* Muted text on a solid fill still has to clear 4.5:1. Anything under 0.88
   white fails against the blue, so the whole family sits at 0.88. */
[data-fill] .kpi-foot,
[data-fill] .kpi-period,
[data-fill] .gauge-label,
[data-fill] .chart-legend{color:rgba(255,255,255,0.88);}
[data-fill] .kpi-top h2 .kpi-period{color:rgba(255,255,255,0.88);}
[data-fill] .kpi-icon{background:rgba(255,255,255,0.18);color:#fff;box-shadow:none;}
[data-fill] .kpi-action{color:rgba(255,255,255,0.92);}
[data-fill] .kpi-action-arrow{background:rgba(255,255,255,0.18);color:#fff;box-shadow:none;}
[data-fill] .kpi-action:hover{color:#fff;}
[data-fill] .kpi-action:hover .kpi-action-arrow{background:rgba(255,255,255,0.32);color:#fff;}
/* direction still reads from the glyph, so the change goes white rather than
   fighting the fill with a semantic green or red */
[data-fill] .kpi-chev,
[data-fill] .kpi-pct{color:#fff;}
[data-fill] .gauge-track{stroke:rgba(255,255,255,0.22);}
[data-fill] .gauge-arc--a{stroke:#fff;}
[data-fill] .gauge-arc--b{stroke:rgba(255,255,255,0.55);}
/* the gauge legend has to echo the arcs, which are white on a solid fill */
.swatch--arc-a{background:var(--accent-deep);}
.swatch--arc-b{background:var(--accent);}
.swatch--arc-rest{background:var(--sunken);}
[data-fill] .swatch--arc-a{background:#fff;}
[data-fill] .swatch--arc-b{background:rgba(255,255,255,0.55);}
[data-fill] .swatch--arc-rest{background:rgba(255,255,255,0.22);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.45);}

/* ---- the promo tile takes a solid fill too ---- */
.dash-promo[data-fill]{border-color:transparent;}
.dash-promo[data-fill] h3{color:#fff;}
.dash-promo[data-fill] p{color:rgba(255,255,255,0.88);}
.dash-promo[data-fill] .dash-promo-mark{background:rgba(255,255,255,0.18);color:#fff;}
.dash-promo[data-fill] .dash-promo-btn{background:#fff;color:var(--ink);}
.dash-promo[data-fill] .dash-promo-btn:hover{background:rgba(255,255,255,0.88);}

/* ---- budget cards: the outer frame carries the card's hue ---- */
.bc[data-frame]{background:linear-gradient(180deg, var(--frame-a) 0%, var(--frame-b) 100%);}
.bc[data-frame="green"]{--frame-a:#DFF0E7;--frame-b:#D2E9DC;}
.bc[data-frame="blue"] {--frame-a:#E2ECF9;--frame-b:#D5E4F6;}

/* ==========================================================================
   Export button (folder)
   From the client's supplied Uiverse component. Class names and the SVG
   gradient ids are namespaced -- the original ships bare `.text`, `.filePage`
   and `paint0_linear_117_4`, which would collide with the marketing
   stylesheet and with any other inline gradient on the page.
   It stays an <a href="#data"> so the existing jump still works.
   ========================================================================== */
.export-btn{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  width:fit-content;
  padding:0 15px;
  border:none;
  border-radius:5px;
  background:#313153;
  gap:10px;
  cursor:pointer;
  text-decoration:none;
  transition:background 0.3s ease, transform 0.3s ease;
}
.export-folder{
  width:40px;
  height:fit-content;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  position:relative;
}
.export-file-back{z-index:1;width:80%;height:auto;}
.export-file-page{
  width:50%;height:auto;
  position:absolute;z-index:2;
  transition:transform 0.3s ease-out;
}
.export-file-front{
  width:85%;height:auto;
  position:absolute;z-index:3;
  opacity:0.95;
  transform-origin:bottom;
  transition:transform 0.3s ease-out;
}
.export-label{
  color:#fff;
  font-size:14px;
  font-weight:600;
  letter-spacing:0.5px;
}
.export-btn:hover{background:#3A3A5E;}
.export-btn:hover .export-file-page{transform:translateY(-5px);}
.export-btn:hover .export-file-front{transform:rotateX(30deg);}
.export-btn:active{transform:scale(0.95);}
.export-btn:focus-visible{outline:2px solid var(--solid-violet);outline-offset:2px;}

@media (prefers-reduced-motion:reduce){
  .export-btn,
  .export-file-page,
  .export-file-front{transition:none;}
  .export-btn:hover .export-file-page,
  .export-btn:hover .export-file-front,
  .export-btn:active{transform:none;}
}

/* ==========================================================================
   Sparkline
   Twelve months of movement under the change figure -- no axes, no labels, no
   gridlines, just the shape. preserveAspectRatio="none" lets it stretch to any
   card width; non-scaling-stroke keeps the line 2px while it does, and the
   fill inherits currentColor so it works on a solid card or a white one.
   ========================================================================== */
.spark{margin-top:2px;}
.spark-svg{
  display:block;
  width:100%;
  /* the box is ~9x wider than tall once stretched, so the curve needs real
     height or twelve months of movement flattens into a ruled line */
  height:42px;
  overflow:visible;
  color:var(--accent);
}
.spark-line{
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
/* on a solid fill the line and its wash go white */
[data-fill] .spark-svg{color:#fff;}

@media (max-width:640px){
  .spark-svg{height:34px;}
}

/* Sparklines inside the pastel summary cells: the line takes the cell's own
   hue rather than a single blue, so it belongs to the card it sits in. Each
   pairing was measured at 4.29:1 or better against its tint. */
.statrow-cell .spark{margin-top:6px;}
.statrow-cell .spark-svg{height:34px;}
.statrow-cell[data-tint="blue"]   .spark-svg{color:#15638F;}
.statrow-cell[data-tint="violet"] .spark-svg{color:#5B4A9E;}
.statrow-cell[data-tint="green"]  .spark-svg{color:#197A5E;}
.statrow-cell[data-tint="teal"]   .spark-svg{color:#0F7263;}
.statrow-cell[data-tint="peach"]  .spark-svg{color:#9A5323;}
.statrow-cell[data-tint="rose"]   .spark-svg{color:#A63C33;}

@media (max-width:900px){
  .statrow-cell .spark-svg{height:30px;}
}

/* ========================================================================
   Invoice status button (From Uiverse.io by barisdogansutcu)
   ======================================================================== */
.list-row .download-button{margin-left:auto;flex:0 0 auto;}
.download-button {
  position: relative;
  border-width: 0;
  color: white;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 4px;
  z-index: 1;
}

.download-button .docs {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 40px;
  padding: 0 10px;
  border-radius: 4px;
  z-index: 1;
  background-color: #242a35;
  border: solid 1px #e8e8e82d;
  transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1);
}

.download-button:hover {
  box-shadow:
    rgba(0, 0, 0, 0.25) 0px 54px 55px,
    rgba(0, 0, 0, 0.12) 0px -12px 30px,
    rgba(0, 0, 0, 0.12) 0px 4px 6px,
    rgba(0, 0, 0, 0.17) 0px 12px 13px,
    rgba(0, 0, 0, 0.09) 0px -3px 5px;
}

.download {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 90%;
  margin: 0 auto;
  z-index: -1;
  border-radius: 4px;
  transform: translateY(0%);
  background-color: #01e056;
  border: solid 1px #01e0572d;
  transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1);
}

.download svg{width:10px;height:10px;}

.download-button:hover .download {
  transform: translateY(100%);
}

.download svg polyline,
.download svg line {
  animation: docs 1s infinite;
}

@keyframes docs {
  0% {
    transform: translateY(0%);
  }

  50% {
    transform: translateY(-15%);
  }

  100% {
    transform: translateY(0%);
  }
}

/* ========================================================================
   Scheduled-report frequency button (From Uiverse.io by adamgiebl)
   ======================================================================== */
.list-row .cssbuttons-io-button{margin-left:auto;flex:0 0 auto;font-size:8px;}
.list-row .cssbuttons-io-button svg{width:12px;height:12px;margin-right:3px;}
.cssbuttons-io-button {
  display: flex;
  align-items: center;
  font-family: inherit;
  cursor: pointer;
  font-weight: 500;
  font-size: 16px;
  padding: 0.7em 1.4em 0.7em 1.1em;
  color: white;
  background: #ad5389;
  background: linear-gradient(
    0deg,
    rgba(20, 167, 62, 1) 0%,
    rgba(102, 247, 113, 1) 100%
  );
  border: none;
  box-shadow: 0 0.7em 1.5em -0.5em #14a73e98;
  letter-spacing: 0.05em;
  border-radius: 20em;
}

.cssbuttons-io-button svg {
  margin-right: 6px;
}

.cssbuttons-io-button:hover {
  box-shadow: 0 0.5em 1.5em -0.5em #14a73e98;
}

.cssbuttons-io-button:active {
  box-shadow: 0 0.3em 1em -0.5em #14a73e98;
}