/* ---------- pages#home ---------- */

/* ---------- Stat tiles: four across, two on tablets, one on phones ---------- */
.stat-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

/* Icon top-left, then label / big number / one line of context */
.stat-tile {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "icon label"
    "icon value"
    "icon meta";
  column-gap: var(--space-3);
  align-items: center;
  padding: var(--space-4) var(--space-5);
}

.stat-tile__icon {
  grid-area: icon;
  align-self: start;
  display: grid;
  place-items: center;
  width: var(--avatar-md);
  height: var(--avatar-md);
  border-radius: var(--radius-lg);
  background: var(--color-primary-subtle);
  color: var(--color-primary);

  svg {
    width: var(--icon-md);
    height: var(--icon-md);
  }
}

.stat-tile__label {
  grid-area: label;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-text-subtle);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.stat-tile__value {
  grid-area: value;
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

.stat-tile__value--muted {
  color: var(--color-text-disabled);
}

.stat-tile__meta {
  grid-area: meta;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.stat-tile__meta--truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Something needs attention (unbilled appointments, low stock): amber icon */
.stat-tile--warning .stat-tile__icon {
  background: var(--color-warning-subtle);
  color: var(--color-warning-text);
}

/* ---------- "To bill" tile → #to-bill card ----------
   .is-highlighted is added on every click of the tile (jump_highlight_controller.js).
   :target covers opening /#to-bill directly (bookmark, refresh), where no click happens.
   scroll-margin-top leaves a little room above it instead of sticking to the window edge */
#to-bill {
  scroll-margin-top: var(--space-6);
}

#to-bill:target,
#to-bill.is-highlighted {
  animation: home-target-flash 1.8s var(--ease-in-out);
}

/* Fade in (0–15%), hold (15–40%), fade out (40–100%).
   The ring keeps the same shape the whole time (0 0 0 4px) and only its colour changes,
   from transparent to teal and back: animating between two differently shaped shadows
   (like --focus-ring → --shadow-xs) makes the glow slide and shrink instead of fading.
   --shadow-xs stays first in the list so the card's own shadow never disappears. */
@keyframes home-target-flash {
  0%, 100% {
    border-color: var(--color-border);
    box-shadow: var(--shadow-xs), 0 0 0 4px transparent;
  }

  15%, 40% {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-xs), 0 0 0 4px color-mix(in srgb, var(--color-focus) 30%, transparent);
  }
}

/* Respect "reduce motion": a steady outline instead of the fade */
@media (prefers-reduced-motion: reduce) {
  #to-bill:target,
  #to-bill.is-highlighted {
    animation: none;
    border-color: var(--color-primary);
  }
}

/* ---------- Two columns: agenda + to bill | low stock + conversations ---------- */
.home-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(18rem, 1fr);
  gap: var(--space-6);
  align-items: start;
}

.home-grid__main,
.home-grid__side {
  display: grid;
  gap: var(--space-6);
  min-width: 0;
}

@media (max-width: 64rem) {
  .home-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Card footers here hold a single "See all" / "Open calendar" link, right-aligned */
.home-card__footer {
  display: flex;
  justify-content: flex-end;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

/* One-line "nothing here" message inside a card (the dashed .empty-state is too big here) */
.home-empty {
  padding: var(--space-6) var(--space-5);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  text-align: center;
}

/* ---------- Segmented control: the "Mine | Clinic" tabs ----------
   Real radio buttons (keyboard and screen readers work), visually hidden;
   the label next to each one is the visible pill */
.segmented {
  display: inline-flex;
  padding: var(--space-0-5);
  border-radius: var(--radius-md);
  background: var(--color-surface-sunken);
}

.segmented__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.segmented__option {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);

  &:hover { color: var(--color-text); }
}

.segmented__input:checked + .segmented__option {
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-xs);
}

.segmented__input:focus-visible + .segmented__option {
  outline: 2px solid var(--color-focus);
  outline-offset: 1px;
}

.segmented__count {
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  font-variant-numeric: tabular-nums;
}

/* Show only the panel whose radio is checked */
.today-card:has(#agenda-mine:checked) .today-card__panel--clinic,
.today-card:has(#agenda-clinic:checked) .today-card__panel--mine {
  display: none;
}

/* ---------- Agenda rows (pages/_agenda_item) ---------- */
.agenda {
  list-style: none;
  margin: 0;
  padding: 0;
}

.agenda-item {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr) auto;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-3) var(--space-5);
  border-left: 3px solid transparent;

  & + & { border-top: var(--border); }
}

.agenda-item__time {
  display: flex;
  flex-direction: column;
  font-variant-numeric: tabular-nums;
}

.agenda-item__start {
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

.agenda-item__end {
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
}

.agenda-item__main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.agenda-item__title {
  font-weight: var(--weight-medium);
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agenda-item__meta,
.agenda-item__place {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agenda-item__side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-1);
  max-width: 14rem;
}

.agenda-item__badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-1);
}

/* Already over: still listed (it happened today) but faded */
.agenda-item--done {
  opacity: 0.6;
}

/* Happening right now: teal edge, like a "you are here" marker */
.agenda-item--now {
  border-left-color: var(--color-primary);
  background: var(--color-primary-subtle);
}

/* On phones the room/badges drop under the title */
@media (max-width: 40rem) {
  .agenda-item {
    grid-template-columns: 3.5rem minmax(0, 1fr);
  }

  .agenda-item__side {
    grid-column: 2;
    align-items: flex-start;
    max-width: none;
  }

  .agenda-item__badges {
    justify-content: flex-start;
  }
}

/* ---------- Simple rows: to bill, low stock, conversations ---------- */
.home-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.home-list__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);

  & + & { border-top: var(--border); }
}

.home-list__main {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.home-list__title {
  font-weight: var(--weight-medium);
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-list__meta {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.home-list__meta--truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-list__time {
  flex-shrink: 0;
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}

/* Right-hand "5 minutes ago" in the conversations card: small and quiet */
.home-list__time--end {
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
  color: var(--color-text-subtle);
}

/* Conversations card: "5 minutes ago" with the unread bubble under it */
.home-list__end {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-1);
  flex-shrink: 0;
}

.home-list__item--unread {
  .home-list__title {
    font-weight: var(--weight-bold);
  }

  .home-list__meta {
    color: var(--color-text);
  }

  .home-list__time--end {
    color: var(--color-primary-text);
    font-weight: var(--weight-semibold);
  }
}