/* ---- Practice dashboard redesign (Weronika, 1 Nov 2026) ----
   Client-owned: the admin dashboard is designed separately, so the shared files keep their
   values and this sheet, loaded last, sets the practice dashboard's. */

/* "The chart colour becomes periwinkle." */
:root{ --ch-volume:#7C8CE4; --ch-volume-rgb:124,140,228; --attn-tag:152px }

/* "No coloured side bars anywhere." Red appears only on the Urgent label. */
.q-row{ border-left:none }
.q-row.urgent{ background:none }
.q-row .age.overdue{ color:var(--ink-3); font-weight:400 }
.block-ask, .block-ask.error{ border-left:none }
.note-row.note-focus{ box-shadow:none }
.settings-note, .settings-note.warn{ border-left:1px solid var(--line) }
.sync-note{ border-left:1px solid var(--line) }
.chip-msg, .chip-msg.warn, .chip-msg.err{ border-left:none }
.state.error{ border-left:none }
.sh-banner, .sh-banner.ok, .sh-banner.warn, .sh-banner.bad{ border-left:1px solid var(--line) }
.tag.ka-cancelled{ background:#F0EAFB; color:#6A3FB0 }
.tag.complaint{ background:#EDF0F5; color:var(--ink-2) }

/* Labels in a fixed-width column, so every name and line of text starts in the same place. */
.q-row .q-open{ grid-template-columns:var(--attn-tag) minmax(0,1fr) auto auto }
.q-row .q-tag-cell{ width:var(--attn-tag) }
.q-row .q-tag-cell .tag{ white-space:nowrap }
.req-row .q-open{ grid-template-columns:var(--attn-tag) minmax(0,1fr) var(--req-state) auto }
.req-row .q-tag-cell{ width:var(--attn-tag) }
.attn-item .block-ask{ margin:0 0 10px }

/* The Kai today lines, one line each. */
.ka-row{ grid-template-columns:52px 112px minmax(0,1fr) auto }
.ka-row .ka-tag{ justify-self:start; white-space:nowrap }
#home-today .ka-main{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.history .ka-row{ grid-template-columns:150px 112px minmax(0,1fr) auto }
.see-all{ display:block; margin-top:10px }

/* Callbacks waiting: a button that reads as a tile. Amber, then red, at the ruled numbers. */
button.stat{ background:none; border:none; border-left:1px solid var(--line); text-align:left; font:inherit; color:inherit; cursor:pointer; width:100% }
button.stat:hover .lbl{ color:var(--cobalt) }
button.stat:focus-visible{ outline:2px solid var(--cobalt); outline-offset:-2px }
button.stat.amber{ background:var(--warn-wash) }
button.stat.amber .val{ color:var(--warn) }
button.stat.red{ background:var(--urgent-wash) }
button.stat.red .val{ color:var(--urgent) }

/* ‹ dates › on Home's chart and on Statistics. */
.chart-head{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 20px; align-items:flex-start }
.period-nav{ display:inline-flex; align-items:center; gap:10px; font-size:13.5px; color:var(--ink-2) }
.period-nav button{ width:32px; height:32px; border:none; border-radius:50%; background:var(--surface); box-shadow:var(--ring); color:var(--ink); font-size:18px; line-height:1; cursor:pointer }
.period-nav button:hover:not(:disabled){ color:var(--cobalt) }
.period-nav button:disabled{ color:var(--ink-3); opacity:.5; cursor:default }
.stats-controls{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; align-items:center; margin-bottom:6px }
.stats-controls .hist-switch{ margin-bottom:0 }
.hist-switch button[aria-pressed="true"]{ background:var(--cobalt); color:#FFFFFF }

/* The menu's count. */
.nav-count{ margin-left:auto; min-width:20px; padding:1px 6px; border-radius:999px; background:var(--cobalt-wash); color:var(--blue-700); font-size:12px; font-weight:600; text-align:center }
.nav-count[hidden]{ display:none }
.tab .nav-count{ margin-left:4px; padding:0 5px; font-size:10.5px }

/* Needs your attention: two parts that fold. */
.attn-total{ font-family:Outfit, sans-serif; font-size:20px; font-weight:400; color:var(--ink-3) }
.attn-part{ margin-bottom:26px }
.attn-part > summary{ display:flex; align-items:center; gap:8px; cursor:pointer; padding:6px 0 10px; list-style:none }
.attn-part > summary::-webkit-details-marker{ display:none }
.attn-part > summary::before{ content:"›"; display:inline-block; width:14px; font-size:18px; line-height:1; color:var(--ink-3); transform:rotate(0deg) }
.attn-part[open] > summary::before{ transform:rotate(90deg) }
.attn-part-title{ font-size:19px; font-weight:600; color:var(--navy) }

/* Busiest times: weekdays down, hours across, darker for more calls. */
.busy{ display:grid; grid-template-columns:34px repeat(var(--busy-hours), minmax(0,1fr)); gap:3px; align-items:center }
.busy-day{ font-size:12px; color:var(--ink-2) }
.busy-cell{ aspect-ratio:1.5; min-height:12px; border-radius:3px; background:rgba(var(--ch-volume-rgb), var(--busy)); box-shadow:inset 0 0 0 1px rgba(var(--ch-volume-rgb), .14) }
.busy-hour{ font-size:10.5px; color:var(--ink-3); text-align:center }

/* What callers wanted. */
.wants{ display:grid; grid-template-columns:minmax(0,190px) minmax(0,1fr) 40px; gap:10px 12px; align-items:center }
.want-label{ font-size:14px; color:var(--ink-2) }
.want-track{ height:14px; border-radius:4px; background:var(--paper) }
.want-bar{ height:100%; min-width:2px; border-radius:4px; background:var(--ch-volume) }
.want-n{ font-size:13.5px; text-align:right; color:var(--ink) }

@media (max-width:720px){
  :root{ --attn-tag:128px }
  .q-row .q-tag-cell .tag{ font-size:11px }
  .wants{ grid-template-columns:minmax(0,130px) minmax(0,1fr) 32px }
  .stats-controls{ flex-direction:column; align-items:flex-start }
  .ka-row, .history .ka-row{ grid-template-columns:auto minmax(0,1fr) }
  button.stat{ border-left:none }
}

/* The quoted email in Patient emails: the same rule. */
.et-live, .et-live-standard{ border-left:1px solid var(--line) }

/* One card per problem (Weronika, 2 Nov 2026): each call on a card, its summary, and Open call. */
.card-call{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:12px; align-items:baseline; padding:9px 0; border-bottom:1px solid var(--line-soft); font-size:15px; color:var(--ink) }
.card-call:last-of-type{ border-bottom:none }
.card-call-at{ color:var(--ink-3); font-size:14px; white-space:nowrap }
.card-again{ font-weight:600 }
@media (max-width:640px){ .card-call{ grid-template-columns:1fr auto } .card-call-at{ grid-column:1 / -1 } }