/* ===========================
 * Booking (Time Block) Component Styles
 * ===========================
 * The rectangle that represents one time span in a calendar or schedule:
 * a time (always first, always top-left) and a label on a tinted,
 * bordered surface whose TYPE carries the intent.
 *
 * Markup:  <div class="booking booking-error">                 (display)
 *            <span class="booking-time">09:20</span>
 *            <span class="booking-label">Testína Kerfisdóttir</span>
 *          </div>
 *          <button type="button" class="booking booking-brand booking-sm">
 *            …same children…                                   (interactive)
 *          </button>
 *
 * Types:   .booking (Default) · .booking-brand · .booking-error ·
 *          .booking-warning · .booking-success · .booking-passed
 *          — intent names (Tag / Badge / Alert precedent). The app maps
 *          its domain onto them (Bóka tíma: free slot → brand, another
 *          patient's booking → error, the open patient's own → success,
 *          elapsed → passed).
 * Sizes:   Md 40px two-line (default) · Sm 24px one-line (.booking-sm).
 *          min-height only — the consumer's box height wins; use Sm
 *          when the box is under 40px.
 *
 * CSS-only — no JS engine. A <div> block only displays; a <button> or
 * <a> block gets hover / focus / cursor (the Tag-vs-Chip precedent: a
 * display block can never look clickable by accident).
 *
 * Colour hooks (element-scoped, zero new :root tokens):
 *   --booking-time-color · --booking-label-color · --booking-hover-bg ·
 *   --booking-hover-shadow — set per type; the text elements and the
 *   hover rule read only these, so dark mode overrides a hook, never a
 *   text rule (the Alert --alert-accent precedent).
 *
 * Text tiers follow Figma's HEX, not its variable names (LSH-396):
 *   time  = the lighter tier (brand-700 / *-800 / text-tertiary)
 *   label = the darker tier  (brand-800 / *-900 / text-primary)
 * Default and Brand run ONE tier darker than the Figma frames: the
 * Figma pairs measure 3.40 / 3.42:1 for 12px text (WCAG 2.2 AA gate,
 * 2026-09-17), so quaternary → tertiary and brand-600/700 → 700/800.
 * Passed likewise: Figma's text-disabled pair measures 2.46:1, and a past
 * booking is content a clinician still reads (not an inactive control),
 * so time → text-tertiary, label → text-secondary (LSH-403, 2026-09-23).
 *
 * Figma: ❖ Heilsugátt DS node 3460-30839 (12 variants, 2026-09-08).
 * Spec:  docs/specs/2026-09-17-booking-design.md (LSH-389)
 * =========================== */


/* ─── 1. Base block — Md, Type=Default ─── */

.booking {
  --booking-time-color: var(--text-tertiary);         /* Figma: quaternary — 3.40:1 on bg-secondary; tertiary for AA */
  --booking-label-color: var(--text-primary);
  --booking-hover-bg: var(--bg-secondary-hover);
  --booking-hover-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start; /* top-left in tall blocks — calendar convention */
  gap: 0;
  box-sizing: border-box;
  width: 100%;
  min-height: 40px;
  margin: 0;
  /* Figma 4px / 8px sits inside an inside stroke; minus the 1px border
     the box lands on exactly 24 / 40px (the Tag / Chip convention). */
  padding: 3px 7px;
  overflow: hidden;
  border: 1px solid var(--border-secondary);
  border-radius: var(--radius-xs);
  background-color: var(--bg-secondary);
  font-family: var(--font-primary);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-xs);
  font-weight: var(--font-weight-regular);
  font-feature-settings: 'lnum', 'tnum';
  text-align: left;
  color: var(--booking-label-color);
}


/* ─── 2. Elements ─── */

.booking-time {
  flex: 0 0 auto;
  white-space: nowrap;
  color: var(--booking-time-color);
}

.booking-label {
  display: block;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--booking-label-color);
}


/* ─── 3. Size: Sm — 24px, one line ─── */

.booking-sm {
  flex-direction: row;
  align-items: center;
  gap: var(--spacing-1);
  min-height: 24px;
}

.booking-sm .booking-label {
  flex: 1 1 0;
  width: auto;
}


/* ─── 4. Types ─── */
/* Each type sets the four hooks + bg + border. bg/border ride semantic
   tokens that already flip in dark mode; the text hooks ride the token
   whose HEX matches Figma. */

.booking-brand {
  --booking-time-color: var(--text-brand-primary-alt);    /* brand-700 — Figma's brand-600 measures 3.42:1; one tier darker for AA */
  --booking-label-color: var(--text-brand-primary);       /* brand-800 — keeps the two-tier hierarchy under the darker time */
  --booking-hover-bg: var(--bg-brand-primary-alt);
  border-color: var(--border-brand);
  background-color: var(--bg-brand-primary);
}

.booking-error {
  --booking-time-color: var(--text-error-primary);        /* error-800 = Figma #8c0000 (token re-tiered 2026-09-17, LSH-396) */
  --booking-label-color: var(--text-error-secondary);     /* error-900 = Figma #660000 */
  --booking-hover-bg: var(--bg-error-primary-hover);
  border-color: var(--border-error-subtle);
  background-color: var(--bg-error-primary);
}

.booking-warning {
  --booking-time-color: var(--text-warning-primary);      /* warning-800 */
  --booking-label-color: var(--text-warning-secondary);   /* warning-900 */
  --booking-hover-bg: var(--bg-warning-primary-hover);
  border-color: var(--border-warning-subtle);
  background-color: var(--bg-warning-primary);
}

.booking-success {
  --booking-time-color: var(--text-success-primary);      /* success-800 (LSH-334) */
  --booking-label-color: var(--text-success-secondary);   /* success-900 */
  --booking-hover-bg: var(--bg-success-primary-hover);
  border-color: var(--border-success-subtle);
  background-color: var(--bg-success-primary);
}

/* Passed = "gone": quiet, but still readable — a past booking is content,
   not an inactive control (WCAG 2.2 AA, LSH-403). It may still be
   clickable (view a past booking) but must not invite: no hover change,
   no hover shadow. */
.booking-passed {
  --booking-time-color: var(--text-tertiary);     /* Figma: text-disabled — 2.46:1 on bg-disabled; tertiary for AA */
  --booking-label-color: var(--text-secondary);   /* Figma: text-disabled; secondary for AA */
  --booking-hover-bg: var(--bg-disabled);
  --booking-hover-shadow: none;
  border-color: var(--border-disabled-subtle);
  background-color: var(--bg-disabled);
}


/* ─── 5. Interactive blocks — button / a only ─── */

button.booking,
a.booking {
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  text-decoration: none;
  user-select: none;
  /* Targeted, not `all` — colour and border never animate; 120ms on bg + shadow only (the focus ring is a box-shadow and fades in over the same 120ms; base.css kills it under reduced motion). */
  transition: background-color 120ms ease, box-shadow 120ms ease;
}

button.booking:hover:not(:disabled),
a.booking:hover {
  background-color: var(--booking-hover-bg);
  box-shadow: var(--booking-hover-shadow);
}

/* Focus — the DS two-layer ring. The :hover companions tie the hover
   rule's specificity (0,3,1) so the ring wins while hovered too. */
button.booking:focus-visible,
a.booking:focus-visible,
button.booking:focus-visible:hover,
a.booking:focus-visible:hover {
  outline: none;
  box-shadow: 0 0 0 2px var(--bg-primary), 0 0 0 4px var(--brand-500);
  z-index: 1;
}

button.booking:disabled {
  cursor: not-allowed;
}


/* ─── 6. Dark mode ─── */
/* No overrides: every type flips through its semantic tokens. Since the
   LSH-396 re-tiering (2026-09-17) --text-error-secondary is error-900 light /
   error-200 dark, so the Error label needs no primitive and no dark rule. */