/* ───────────────────────────────────────────────────────────────────────────
   DΛREΛKT_ UI — ui.roster.calendar (schedule: calendar + table) — --ha-* tokens
   ─────────────────────────────────────────────────────────────────────────── */
@layer components {
  .ui-roster-calendar { display: block; color: var(--ha-text); }

  .urc-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 16px;
  }
  .urc-head__main { min-width: 0; }
  .urc-title { margin: 0 0 4px; font-size: 1.5rem; font-weight: 700; color: var(--ha-text-bright); }
  .urc-range { margin: 0 0 6px; color: var(--ha-accent); font-weight: 600; }
  .urc-hint { margin: 0; color: var(--ha-text-muted); font-size: 0.9rem; }

  /* Calendar ⇄ Table toggle */
  .urc-toggle {
    display: inline-flex;
    flex: 0 0 auto;
    border: 1px solid var(--ha-border-hi);
    border-radius: 8px;
    overflow: hidden;
  }
  .urc-toggle__btn {
    appearance: none;
    border: none;
    background: transparent;
    color: var(--ha-text-muted);
    padding: 7px 16px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
  }
  .urc-toggle__btn:hover { color: var(--ha-text); }
  .urc-toggle__btn.is-active { background: var(--ha-accent); color: #14130f; }

  /* Schedule actions row — view toggle + "My days" filter + Print. */
  .urc-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; flex-wrap: wrap; }
  .urc-actionbtn {
    appearance: none;
    border: 1px solid var(--ha-border-hi);
    background: transparent;
    color: var(--ha-text-muted);
    padding: 7px 14px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease;
  }
  .urc-actionbtn:hover { color: var(--ha-text); border-color: var(--ha-accent); }
  .urc-filterbtn.is-active { background: var(--ha-accent); color: #14130f; border-color: var(--ha-accent); }

  .urc-viewbox { display: block; }
  .urc-cal { margin-bottom: 16px; }

  .urc-loading, .urc-error { padding: 24px; text-align: center; color: var(--ha-text-muted); }
  .urc-error { color: #e0533d; }

  /* Day-cell label — the cell carries the group colour wash, so we just show a
     clean group name (+ AM/PM badge) anchored at the bottom; no dot/pill. */
  .ui-roster-calendar .uc__daybody { justify-content: flex-end; gap: 3px; }
  .urc-daylabel {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--ha-text);
  }
  .urc-daylabel__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .urc-daylabel__pt {
    flex: 0 0 auto;
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 1px 4px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--ha-text) 14%, transparent);
    color: var(--ha-text-muted);
  }
  /* Note under a day's sitter — left marker makes it clearly "a note". */
  .urc-daynote {
    font-size: 0.66rem;
    line-height: 1.25;
    color: var(--ha-text-muted);
    padding-left: 6px;
    border-left: 2px solid color-mix(in srgb, var(--ha-text) 22%, transparent);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .urc-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  .urc-legend__label { color: var(--ha-text-muted); font-size: 0.85rem; }
  /* The signed-in sitter's own legend pill is "active" — SAME colour + tint as
     the other pills (so it matches), just bigger, bolder, a full-strength colour
     border + a soft glow halo, so it's unmistakably theirs without recolouring it. */
  .urc-legend .urs-chip--mine {
    border-width: 1.5px;
    border-color: var(--chip-color);
    color: var(--ha-text);
    font-weight: 700;
    font-size: 0.82rem;
    padding: 5px 13px 5px 11px;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--chip-color) 20%, transparent);
  }

  /* ── Table (spreadsheet) view ───────────────────────────────────────────── */
  .urt-wrap {
    overflow-x: auto;
    border: 1px solid var(--ha-border-hi);
    border-radius: 10px;
  }
  .urt { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
  .urt__hd {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--ha-surface);
    padding: 10px 12px;
    text-align: left;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ha-text-muted);
    border-bottom: 1px solid var(--ha-border-hi);
    white-space: nowrap;
  }
  .urt__hd--grp { text-align: center; }
  .urt__dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }

  .urt__row { border-bottom: 1px solid var(--ha-border); }
  .urt__row:last-child { border-bottom: none; }
  .urt__row:hover { background: color-mix(in srgb, var(--ha-text) 4%, transparent); }
  .urt__row--wknd .urt__wd,
  .urt__row--wknd .urt__dnum { color: var(--ha-accent); }

  .urt__date {
    padding: 8px 12px;
    white-space: nowrap;
    cursor: pointer;
    display: flex;
    gap: 8px;
    align-items: baseline;
  }
  .urt__wd { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ha-text-muted); width: 30px; }
  .urt__dnum { font-weight: 600; }

  .urt__cell {
    text-align: center;
    padding: 6px 8px;
    border-left: 1px solid var(--ha-border);
    color: var(--ha-text);
    min-width: 64px;
  }
  .urt__cell.is-on {
    background: var(--cell-tint);
    font-weight: 700;
    font-size: 0.78rem;
    cursor: pointer;
  }
  .urt__cell--add { cursor: pointer; color: transparent; font-weight: 700; transition: background 0.12s ease, color 0.12s ease; }
  .urt__cell--add:hover { color: var(--ha-accent); background: var(--ha-accent-dim); }

  .urt__hd--notes { text-align: left; }
  .urt__notes {
    padding: 8px 12px;
    border-left: 1px solid var(--ha-border);
    color: var(--ha-text-muted);
    font-size: 0.82rem;
    min-width: 140px;
  }

  /* ── Day editor (right-side panel) ──────────────────────────────────────── */
  .urc-modal-section { display: flex; flex-direction: column; gap: 10px; }
  .urc-modal-h {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ha-text-muted);
  }
  .urc-arow {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--ha-border);
    border-radius: 8px;
    background: color-mix(in srgb, var(--ha-text) 4%, transparent);
  }
  .urc-arow__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .urc-arow__ctrls { display: flex; gap: 8px; }
  .urc-arow__ctrls .urs-field:first-child { flex: 0 0 150px; }
  .urc-arow__ctrls .urs-field:last-child  { flex: 1 1 auto; min-width: 0; }
  .urc-arow__meta { color: var(--ha-text-muted); font-size: 0.85rem; }
  .urc-arow__contacts { display: flex; flex-wrap: wrap; gap: 4px 14px; padding-top: 2px; }
  .urc-arow__contact { display: inline-flex; gap: 6px; font-size: 0.82rem; }
  .urc-arow__cname { color: var(--ha-text-muted); }
  .urc-arow__cphone { color: var(--ha-accent); text-decoration: none; font-variant-numeric: tabular-nums; }
  .urc-arow__cphone:hover { text-decoration: underline; }
  @media (max-width: 560px) {
    .urc-arow__ctrls { flex-direction: column; }
    .urc-arow__ctrls .urs-field { flex: 1 1 auto; }
  }

  .urc-addform { display: flex; flex-direction: column; gap: 10px; padding-top: 6px; }
  .urc-fullnote {
    margin: 4px 0 0;
    padding: 12px 14px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--ha-text) 4%, transparent);
    color: var(--ha-text-muted);
    font-size: 0.88rem;
  }

  /* ── Care routine (cards under the schedule) ───────────────────────────────── */
  .urc-routinebox { margin-top: 26px; }
  .urc-routine__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
  }
  .urc-routine__title { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--ha-text-bright); }
  .urc-routine__edit {
    appearance: none;
    flex: 0 0 auto;
    border: 1px solid var(--ha-border-hi);
    background: transparent;
    color: var(--ha-text-muted);
    padding: 5px 14px;
    border-radius: var(--ha-radius-sm, 3px);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
  }
  .urc-routine__edit:hover { border-color: var(--ha-accent); color: var(--ha-accent-hover); }
  .urc-routine__empty { margin: 0; color: var(--ha-text-muted); font-size: 0.9rem; }

  .urc-routine__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
  }
  .urc-rcard {
    border: 1px solid var(--ha-border-hi);
    border-radius: 10px;
    background: var(--ha-surface);
    padding: 14px 16px;
  }
  .urc-rcard__h {
    margin: 0 0 10px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--ha-accent);
  }
  .urc-rcard__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
  .urc-rtask { display: flex; align-items: flex-start; gap: 9px; font-size: 0.9rem; color: var(--ha-text); line-height: 1.35; }
  .urc-rtask::before {
    content: "";
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    margin-top: 7px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--ha-accent) 70%, transparent);
  }

  /* ── Routine editor (right-side modal) ─────────────────────────────────────── */
  .urc-redit__hint { margin: 0 0 4px; color: var(--ha-text-muted); font-size: 0.85rem; }
  .urc-redit__rows { display: flex; flex-direction: column; gap: 10px; margin-bottom: 6px; }
  .urc-redit__row { display: flex; align-items: center; gap: 8px; }
  .urc-redit__row .urs-field:first-child { flex: 1 1 auto; min-width: 0; }
  .urc-redit__row .urs-field:nth-child(2) { flex: 0 0 150px; }
  .urc-redit__rm {
    flex: 0 0 auto;
    appearance: none;
    border: 1px solid var(--ha-border-hi);
    background: transparent;
    color: var(--ha-text-muted);
    width: 34px;
    height: 38px;
    border-radius: var(--ha-radius-sm, 3px);
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
  }
  .urc-redit__rm:hover { border-color: var(--ha-danger, #e0533d); color: var(--ha-danger, #e0533d); }

  /* ── "Mine" emphasis — restrained: a thin ring in the sitter's colour and a
     subtle "You" chip that echoes the legend chips, NOT a loud filled sticker.
     --mine-color is the signed-in user's own colour (set in JS). */
  .ui-roster-calendar .uc__day.urc-day--mine {
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--mine-color, var(--ha-accent)) 42%, transparent);
  }
  .urc-daylabel--mine .urc-daylabel__name {
    padding: 2px 9px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--mine-color, var(--ha-accent)) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--mine-color, var(--ha-accent)) 46%, transparent);
    color: var(--ha-text);
    font-weight: 600;
  }

  /* Table view — same restraint: a thin ring + the "You" header in bright text. */
  .urt__cell.urt__cell--mine {
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--mine-color, var(--ha-accent)) 40%, transparent);
  }
  .urt__hd--mine .urt__hd-name { color: var(--ha-text-bright); font-weight: 700; }

  /* "My days" filter — non-mine days recede; empty-table note. */
  .ui-roster-calendar .uc__day.urc-day--faded { opacity: 0.4; }
  .urt__empty { padding: 26px; text-align: center; color: var(--ha-text-muted); font-size: 0.9rem; }

  /* ── Clear-calendar dialog (master) ────────────────────────────────────────── */
  .urc-clearbtn:hover { border-color: var(--ha-danger, #e0533d); color: var(--ha-danger, #e0533d); }
  .urc-clear__hint { margin: 0; color: var(--ha-text-muted); font-size: 0.9rem; line-height: 1.45; }
  .urc-clear__count { margin: 0; color: var(--ha-text); font-size: 0.92rem; font-weight: 600; }
  .urc-clear__confirm {
    padding: 14px 16px;
    border: 1px solid color-mix(in srgb, var(--ha-danger, #e0533d) 45%, var(--ha-border-hi));
    border-radius: 8px;
    background: color-mix(in srgb, var(--ha-danger, #e0533d) 9%, transparent);
  }
  .urc-clear__warn { margin: 0 0 12px; color: var(--ha-text); font-size: 0.9rem; line-height: 1.45; }
  .urc-clear__confirm-row { display: flex; gap: 8px; justify-content: flex-end; }
}

/* ── Print — a clean roster sheet (whatever view + filter is on screen), no app
   chrome. Unlayered so it wins over the component layer; scoped via :has() so it
   only applies while the schedule page is mounted. ───────────────────────────── */
@media print {
  body:has(.ui-roster-calendar) #ha-sidebar-mount,
  body:has(.ui-roster-calendar) #ha-topbar-mount,
  body:has(.ui-roster-calendar) .ui-sidebar { display: none; }
  body:has(.ui-roster-calendar) .ha-content { max-width: none; padding: 0; }

  /* Force light, print-friendly colours regardless of the active theme by
     redefining the tokens — every var(--ha-*) consumer prints dark-on-white. */
  body:has(.ui-roster-calendar) {
    --ha-bg: #fff; --ha-surface: #fff; --ha-surface-2: #fff; --ha-surface-3: #fff;
    --ha-text: #111; --ha-text-bright: #000; --ha-text-muted: #555;
    --ha-border: #cfcfcf; --ha-border-hi: #aeaeae;
  }
  .ui-roster-calendar { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  /* Hide interactive controls. */
  .ui-roster-calendar .urc-actions,
  .ui-roster-calendar .urc-hint,
  .ui-roster-calendar .urc-routine__edit,
  .ui-roster-calendar .uc__nav { display: none; }

  /* Don't slice a day-cell / table row / routine card across pages. */
  .ui-roster-calendar .uc__day,
  .ui-roster-calendar .urt__row,
  .ui-roster-calendar .urc-rcard { break-inside: avoid; }
}