/* AURIA LASH — dashboard page. Mobile-first; white-tie discipline:
   whites ladder for structure, espresso ink for every word and number,
   rose for data marks, champagne for hairline ceremony. Demo data. */

.dash {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: calc(var(--unit) * 3) calc(var(--unit) * 2) calc(var(--unit) * 6);
  display: grid;
  gap: calc(var(--unit) * 3);
}

/* ---------- page head + timezone control ---------- */

.dash-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center; /* title centers on the tz selector */
  justify-content: space-between;
  gap: calc(var(--unit) * 2);
}

.dash-head h1 {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 21px; /* reduced 20% */
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rose); /* operator's rose, his call */
}

.tz-field { display: grid; gap: 4px; }
.tz-label {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.6;
}
.tz-shell {
  position: relative;
  display: inline-block;
  background: var(--white);
  border: 1px solid var(--champagne);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}
.tz-shell select {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  background: transparent;
  font-family: var(--font-head); /* unified with The Glance header */
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--ink);
  padding: 10px 40px 10px 14px;
  cursor: pointer;
}
.tz-shell select:focus { outline: 2px solid var(--champagne); outline-offset: 1px; }
/* customizable select: rose rollover in the open list, not the OS blue */
.tz-shell select, .tz-shell select::picker(select) { appearance: base-select; }
.tz-shell select::picker-icon { display: none; }
.tz-shell select::picker(select) {
  background: var(--white);
  border: 1px solid var(--champagne);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}
.tz-shell select option {
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 13px;
  padding: 9px 14px;
}
.tz-shell select option:hover,
.tz-shell select option:focus {
  background: var(--rose);
  color: var(--on-accent);
}
.tz-shell select option::checkmark { color: var(--rose); }
.tz-chev {
  position: absolute;
  right: 12px;
  top: 50%;
  width: 14px;
  height: 14px;
  transform: translateY(-50%) rotate(90deg);
  filter: invert(1) brightness(0); /* white asset -> ink over white shell */
  pointer-events: none;
}

/* ---------- cards ---------- */

.card {
  background: var(--white);
  border: var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: calc(var(--unit) * 2.5);
}

.card-head {
  display: flex;
  align-items: center;
  gap: calc(var(--unit) * 1.5);
  margin-bottom: calc(var(--unit) * 2.5);
}
.card-head .rule { width: 28px; height: 2px; background: var(--champagne); }
.card-head h2 {
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.card-head .count {
  margin-left: auto;
  font-size: 12px;
  color: var(--text-muted); /* mute the words, never the numbers */
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.card-head .count .count-num {
  font-size: 18px; /* +50% */
  color: var(--rose-vivid);
  font-weight: bold;
  margin-right: 5px; /* air between number and word */
}

/* ---------- docket: clock + timeline ---------- */

.docket-body { display: grid; gap: calc(var(--unit) * 3); }

.clock-wrap { display: grid; justify-items: center; }
#clock { width: min(220px, 70vw); height: auto; }

.docket-body > * { min-width: 0; } /* wide track must never blow the grid */
.timeline-wrap { display: grid; gap: calc(var(--unit) * 2); min-width: 0; }
.tl-row { min-width: 0; }
.timeline-scroll { min-width: 0; }

.day-label {
  margin-top: calc(var(--unit) * 3.5); /* lowered; belongs to the timeline */
  font-family: Arial, "Helvetica Neue", sans-serif;
  font-weight: bold;
  font-size: 20px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  color: var(--rose);
}

/* arrows flank the window; no visible scrollbar anywhere */
.tl-row {
  display: flex;
  align-items: flex-start;
  gap: calc(var(--unit) * 1);
}
.tl-arrow {
  flex: none;
  margin-top: 7px; /* circle centers on the track line (track at 19px) */
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 50%;
  background: var(--rose);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-card);
  padding: 0;
}
.tl-arrow img { width: 13px; height: 13px; }
.tl-arrow.left img { transform: scaleX(-1); }

/* scrollable window into today + tomorrow's docket; scrollbar hidden,
   arrows and drag do the moving */
.timeline-scroll {
  flex: 1;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  cursor: grab;
}
.timeline-scroll::-webkit-scrollbar { display: none; }
.timeline-scroll:active { cursor: grabbing; }

.timeline {
  position: relative;
  height: 50px;
  width: 1400px; /* spans today 08:00 through tomorrow close */
}
.timeline .track {
  position: absolute;
  left: 0; right: 0; top: 18px;
  height: 2px;
  background: var(--bone);
}
.timeline .t-tick {
  position: absolute;
  top: 13px;
  width: 1px;
  height: 12px;
  background: var(--bone);
}
.timeline .t-mid {
  position: absolute;
  top: 4px;
  width: 2px;
  height: 30px;
  background: var(--champagne);
}
.timeline .t-midlab {
  position: absolute;
  top: 38px;
  transform: translateX(-50%);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.5;
  white-space: nowrap;
}
.timeline .t-dot {
  position: absolute;
  top: 19px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--rose-vivid); /* matches the clock dots */
  border: 2px solid var(--white); /* surface ring per mark spec */
  transform: translate(-50%, -50%);
}
.timeline .t-cap {
  position: absolute;
  top: 32px;
  transform: translateX(-50%);
  font-family: Arial, "Helvetica Neue", sans-serif;
  font-weight: bold;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--rose-vivid); /* matches the clock dots */
  white-space: nowrap;
}

.appt-list {
  list-style: none;
  display: grid;
  gap: 2px;
  /* the list reserves the taller docket's height in JS; hold the rows
     at their natural size so a five-row day does not stretch them */
  align-content: start;
}
.appt-list li {
  display: flex;
  align-items: center;
  gap: calc(var(--unit) * 1.5);
  padding: 8px 6px;
  border-bottom: 1px solid var(--pearl);
  font-size: 13px;
}
.appt-list li:last-child { border-bottom: none; }
.appt-list .a-dash { color: var(--ink); margin: 0 2px; }
/* names and services in the clock-numeral gray */
.appt-list .a-name { flex: 1; color: var(--ink); opacity: 0.7; }
.appt-list .a-svc {
  flex: 1;
  text-align: right;
  margin-left: 0;
  opacity: 0.7;
}
.lash-btn {
  border: none;
  background: var(--rose);
  color: var(--on-accent);
  font-family: Arial, "Helvetica Neue", sans-serif;
  font-weight: bold;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 5px 12px;
  border-radius: var(--radius-btn);
  cursor: pointer;
  white-space: nowrap;
}
.appt-list .a-time {
  font-family: Arial, "Helvetica Neue", sans-serif;
  font-weight: bold;
  color: var(--rose-vivid); /* matches the clock dots */
  font-size: 13px;
  letter-spacing: 0.04em;
}
.appt-list .a-name { font-weight: 600; }
.appt-list .a-svc {
  margin-left: auto;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---------- schedule filled ---------- */

.fill-body {
  display: flex;
  align-items: flex-start;
  gap: calc(var(--unit) * 3);
}
#gauge { width: 88px; height: 88px; flex: none; }

/* Mon-Fri history; today rotates to the top (pure front end, the
   browser supplies the date). Separators between days; day label
   right-aligned, top-aligned, Arial bold. */
.day-history { margin-top: calc(var(--unit) * 2); }
.dh-row {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: calc(var(--unit) * 2);
  padding: 9px 6px;
  border-bottom: 1px solid var(--pearl);
  font-size: 13px;
}
.dh-row:last-child { border-bottom: none; }
.dh-row.today { background: var(--rose); }
.dh-row.today .dh-pct { opacity: 0.8; }
.dh-tag {
  flex: 1;
  text-align: center;
  align-self: center;
  font-family: Arial, "Helvetica Neue", sans-serif;
  font-weight: bold;
  font-size: 16px; /* pulled back 20% */
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--on-accent);
}
.dh-data { display: flex; align-items: baseline; gap: 8px; }
.dh-count {
  font-family: var(--font-mark);
  font-size: 15px;
  color: #A99A78; /* AURIA hue, deepened for readability */
}
.dh-row.today .dh-count { color: var(--on-accent); opacity: 1; }
.dh-row.today .dh-dash { color: var(--on-accent); opacity: 0.8; }
.dh-row.today .dh-pct { background: #FFFFFF; color: var(--rose); opacity: 1; }
.dh-row.today .dh-day { color: var(--on-accent); }
/* fixed columns so every chip aligns regardless of count width */
.dh-count { width: 72px; }
.dh-dash {
  color: var(--ink);
  opacity: 0.5;
  font-size: 11px;
  width: 12px;
  text-align: center;
}
.dh-pct {
  font-size: 12px;
  background: var(--rose);
  color: var(--on-accent);
  padding: 3px 8px;
  border-radius: var(--radius);
}
.dh-day {
  font-family: var(--font-mark); /* the 9-of-12 serif */
  font-weight: 400;
  font-size: 18.7px; /* reduced 15% */
  letter-spacing: 0.08em;
  text-transform: uppercase;
  align-self: flex-start;
  text-align: right;
  color: var(--rose);
}
.dh-row.total .dh-day {
  font-family: Arial, "Helvetica Neue", sans-serif; /* Total stays Arial */
  font-weight: bold;
}
.dh-row.total {
  border-top: 1px solid var(--bone);
  border-bottom: none;
  margin-top: 2px;
}
.dh-row.total .dh-day { opacity: 0.55; }
.fill-big {
  font-family: var(--font-mark);
  font-size: 34px;
  letter-spacing: 0.02em;
  color: #A99A78; /* AURIA hue, deepened for readability */
}
.fill-sub {
  font-size: 12px;
  line-height: 1.5;
  opacity: 0.6;
  max-width: 26ch;
}

/* ---------- KPIs ---------- */

.kpi-card .card-head { flex-wrap: wrap; }

/* rose marks the selected period; unselected boxes match the card's
   white, each box rose-stroked on all four edges so every button's
   bounds read clean */
.seg {
  margin-left: auto;
  display: inline-flex;
}
.seg-btn {
  border: 1px solid var(--rose);
  border-radius: 0; /* square corners, this control only */
  background: var(--white);
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 7px 14px;
  cursor: pointer;
}
.seg-btn + .seg-btn { margin-left: -1px; } /* strokes share one seam */
.seg-btn.active {
  background: var(--rose);
  color: var(--on-accent);
}

/* framed and buffered so no tile ever reads cut off; the frame runs
   all four sides with equal breathing room */
.kpi-frame {
  border: var(--hairline);
  border-radius: var(--radius);
  background: var(--porcelain);
  padding: calc(var(--unit) * 1.5);
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: calc(var(--unit) * 1.5);
}

/* uniform tile anatomy: rose title plaque, number, chart, delta
   pinned to the bottom of every card */
.tile {
  background: var(--white);
  border: var(--hairline);
  border-radius: var(--radius);
  padding: calc(var(--unit) * 2);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.k-value-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.k-spark svg { width: 64px; height: 26px; display: block; }
.tile .k-label {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--rose); /* offset plaque, never to the edges */
  color: var(--on-accent);
  padding: 4px 9px;
  border-radius: var(--radius);
}
.tile .k-value {
  font-family: var(--font-mark);
  font-size: 24px;
  letter-spacing: 0.01em;
}
.tile .k-delta {
  font-size: 11px;
  letter-spacing: 0.03em;
  opacity: 0.65;
  margin-top: auto; /* delta rides the card floor, every card */
  padding-top: 4px;
}
.tile .k-delta .arrow { font-size: 9px; margin-right: 2px; }

.kpi-note {
  margin-top: calc(var(--unit) * 1.5);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.45;
  text-align: right;
}

/* punk: the dashboard floats its dark furniture on hot pink */
:root[data-theme="punk"] body.page-dash { background: #FF1493; }
:root[data-theme="punk"] .dash-head h1 { color: #000000; }
:root[data-theme="punk"] .tz-label { color: #000000; opacity: 0.85; }

/* ---------- active nav state ---------- */

.bar-lockup nav a.active { border-bottom-color: var(--champagne); }

/* ---------- desktop dress ---------- */

@media (min-width: 840px) {
  .dash { padding-top: calc(var(--unit) * 5); }
  .dash-head h1 { font-size: 26px; } /* 32 reduced 20% */

  .dash {
    grid-template-columns: 1fr 1fr;
  }
  .dash-head { grid-column: 1 / -1; }
  .docket { grid-column: 1 / -1; }
  .docket-body {
    grid-template-columns: 260px 1fr;
    align-items: center;
    gap: calc(var(--unit) * 5);
  }
  .kpi-grid { grid-template-columns: repeat(3, 1fr); }
}