/* ===========================================================================
   Dashboard.
   ---------------------------------------------------------------------------
   Only the parts that were still template: the KPI strip at the top and the
   range switcher above it. The chart cards below already read correctly under
   apple.css, and rewriting four hundred lines of working chart markup to
   change nothing visible would be the wrong trade.

   Everything here is .adash-*. The segmented control is a third copy of the
   one in mail.css and today.css - each page's stylesheet has stayed
   self-contained all the way through, and three small copies are easier to
   follow than one shared class that three pages must not break.
   =========================================================================== */

/* -------------------------------------------------------------- header --- */

.adash-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }

.adash-seg { display: inline-flex; background: var(--fill); border-radius: 8px; padding: 2px; }
.adash-seg button {
  border: 0; background: transparent; color: var(--label-2);
  font-size: 12.5px; font-weight: 600; padding: 5px 13px; border-radius: 6px;
}
.adash-seg button.on { background: var(--surface); color: var(--label); box-shadow: 0 1px 2px rgba(0, 0, 0, .1); }

.adash-scope { color: var(--label-2); font-size: 13px; }

/* ----------------------------------------------------------- KPI tiles --- */

.adash-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 16px; }

.adash-kpi {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 16px 18px 15px;
  text-align: left;
  width: 100%;
  display: flex; flex-direction: column;
  transition: transform .15s, box-shadow .2s;
}
/* These numbers are drill-throughs, and were before this restyle. A real
   <button> carries that: keyboard, focus ring and role come free, where the
   old markup hung a role and an onKeyDown on a div to fake it. */
button.adash-kpi { cursor: pointer; }
button.adash-kpi:hover { transform: translateY(-1px); box-shadow: 0 2px 4px rgba(0,0,0,.05), 0 8px 24px rgba(0,0,0,.07); }
button.adash-kpi:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring); }

.adash-kpi-top { display: flex; align-items: baseline; gap: 10px; }
.adash-kpi-title { flex: 1; min-width: 0; color: var(--label); font-size: 13.5px; font-weight: 600; letter-spacing: -.1px; }
.adash-kpi-v { color: var(--label); font-size: 28px; font-weight: 700; letter-spacing: -.04em; line-height: 1; }
.adash-kpi-of { color: var(--label-3); font-size: 11.5px; text-align: right; margin-top: 3px; }
.adash-kpi-note { color: var(--label-2); font-size: 12px; line-height: 1.4; margin-top: 5px; flex: 1; }

/* The bar only appears where the figure really is a share of something. A
   headcount is not a percentage of anything, and a bar at an invented width
   would be a claim about people's attendance that nobody made. The spacer
   keeps the four tiles the same height without inventing one. */
.adash-kpi-bar { margin-top: 12px; height: 6px; border-radius: 999px; background: var(--fill); overflow: hidden; }
.adash-kpi-bar i { display: block; height: 100%; border-radius: 999px; transition: width .8s cubic-bezier(.4, 0, .2, 1); }
.adash-kpi-bar.b-green i { background: linear-gradient(90deg, #34d399, var(--accent)); }
.adash-kpi-bar.b-red i { background: linear-gradient(90deg, #fca5a5, #ef4444); }
.adash-kpi-gap { margin-top: 12px; height: 6px; }

@media (max-width: 1100px) { .adash-kpis { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
  .adash-kpis { grid-template-columns: 1fr; gap: 12px; }
  .adash-kpi { padding: 14px 16px; }
}