/* ─────────────────────────────────────────────────────────────────────────
   Schedule Visit dialog — Leaf design system (high-fidelity port).
   Dialog shell + caregiver selector + accordion + frequency.

   Everything is scoped to .sv-scope so it never bleeds into the
   Material/MudBlazor chrome. The .sv-scope block carries a self-contained
   token set (lifted from the design handoff's colors_and_type.css) so the
   dialog renders identically regardless of leaf-ds.css load order. Fonts
   (Manrope, JetBrains Mono) load in App.razor.
   ───────────────────────────────────────────────────────────────────────── */

.sv-scope {
    /* Surfaces & ink (warm neutral) */
    --bg: #f7f6f3;
    --surface: #ffffff;
    --surface-2: #faf9f6;
    --ink-1: #1b1a17;
    --ink-2: #5b5953;
    --ink-3: #8a8881;
    --ink-4: #c8c5be;
    --line: #e9e6df;
    --line-2: #efece5;

    /* Brand */
    --accent: #2f7a3a;
    --accent-soft: #e6f0e3;
    --accent-ink: #1f4e2a;
    --warn: #c67a06;

    /* Status palette (tags / meter / chips) */
    --c-sched-bg: #e8f1e6;  --c-sched-fg: #1f4e2a;  --c-sched-bd: #c6dec0;
    --c-done-bg:  #ececea;  --c-done-fg:  #4d4a45;  --c-done-bd:  #d8d6d2;
    --c-conf-bg:  #f9dfde;  --c-conf-fg:  #8a1b1a;  --c-conf-bd:  #ebbab8;

    /* Radii */
    --r-3: 6px;  --r-4: 7px;  --r-6: 10px;  --r-pill: 999px;

    /* Type */
    --sv-font-ui: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --sv-font-mono: "JetBrains Mono", ui-monospace, monospace;

    font-family: var(--sv-font-ui);
    color: var(--ink-1);
    -webkit-font-smoothing: antialiased;
}
.sv-scope *, .sv-scope *::before, .sv-scope *::after { box-sizing: border-box; }

/* ── Scrim / overlay ─────────────────────────────────────────────────────── */
.sv-overlay {
    position: fixed; inset: 0; z-index: 1300;
    background: rgba(20, 20, 15, 0.34);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    display: flex; align-items: flex-start; justify-content: center;
    padding: 46px 40px 40px;
    overflow-y: auto;
}

/* ── Dialog card ─────────────────────────────────────────────────────────── */
.sv-scope .lf-dialog {
    background: var(--surface);
    border-radius: var(--r-6);
    box-shadow: 0 24px 64px rgba(20, 20, 15, 0.22), 0 2px 6px rgba(20, 20, 15, 0.08);
    width: 480px; max-width: 100%;
    display: flex; flex-direction: column;
    overflow: hidden;
    animation: sv-dialog-in 0.18s cubic-bezier(0.2, 0.7, 0.2, 1);
}
@keyframes sv-dialog-in { from { transform: translateY(-8px); opacity: 0; } to { transform: none; opacity: 1; } }

.sv-scope .lf-dlg-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 22px 14px;
}
.sv-scope .lf-dlg-title { font: 700 17px/1.2 var(--sv-font-ui); letter-spacing: -0.01em; }
.sv-scope .lf-dlg-sub {
    font: 500 10.5px/1.3 var(--sv-font-ui); color: var(--ink-3);
    text-transform: uppercase; letter-spacing: 0.07em; margin-top: 3px; white-space: nowrap;
}
.sv-scope .lf-x {
    appearance: none; border: 1px solid var(--line); background: var(--surface-2);
    width: 30px; height: 30px; border-radius: var(--r-4); cursor: pointer;
    color: var(--ink-2); display: flex; align-items: center; justify-content: center;
    flex: 0 0 auto; transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.sv-scope .lf-x:hover { background: var(--bg); color: var(--ink-1); border-color: var(--ink-4); }

.sv-scope .lf-dlg-body { padding: 4px 22px 8px; display: flex; flex-direction: column; overflow-y: auto; }
.sv-scope .lf-dlg-foot {
    display: flex; align-items: center; justify-content: flex-end; gap: 10px;
    padding: 14px 22px 18px; border-top: 1px solid var(--line-2); margin-top: 4px;
}

/* ── Form fields ─────────────────────────────────────────────────────────── */
.sv-scope .lf-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.sv-scope .lf-label {
    font: 600 10.5px/1 var(--sv-font-ui); color: var(--ink-2);
    text-transform: uppercase; letter-spacing: 0.06em;
}
.sv-scope .lf-label .req { color: var(--accent); margin-left: 1px; }
.sv-scope .lf-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.sv-scope .lf-control {
    appearance: none; -webkit-appearance: none;
    width: 100%; text-align: left;
    background: var(--surface); color: var(--ink-1);
    border: 1px solid var(--line); border-radius: var(--r-4);
    padding: 0 12px; height: 44px;
    font: 500 13px/1 var(--sv-font-ui);
    display: flex; align-items: center; gap: 8px; cursor: pointer;
    transition: border-color 0.12s, box-shadow 0.12s, background 0.12s;
    font-variant-numeric: tabular-nums;
}
.sv-scope select.lf-control { cursor: pointer; }
.sv-scope .lf-control:hover { border-color: var(--ink-4); }
.sv-scope .lf-control:focus, .sv-scope .lf-control.is-focus, .sv-scope .lf-control:focus-within {
    outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(47, 122, 58, 0.16);
}
.sv-scope .lf-control .lf-ctl-val { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-scope .lf-control .lf-ctl-ph { color: var(--ink-3); }
.sv-scope .lf-control .lf-chev, .sv-scope .lf-control .lf-ctl-icon { color: var(--ink-3); flex: 0 0 auto; display: flex; }
.sv-scope .lf-suffix { color: var(--ink-3); font-weight: 500; }

/* Native input/select rendered as an .lf-control */
.sv-scope input.lf-control, .sv-scope select.lf-control {
    font-family: var(--sv-font-ui);
}
.sv-scope input.lf-control::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 0.5; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.sv-scope .lf-btn {
    appearance: none; border: 1px solid transparent; cursor: pointer;
    height: 40px; padding: 0 18px; border-radius: var(--r-4);
    font: 600 12.5px/1 var(--sv-font-ui);
    display: inline-flex; align-items: center; gap: 7px;
    transition: background 0.12s, border-color 0.12s, color 0.12s, box-shadow 0.12s;
}
.sv-scope .lf-btn-ghost { background: transparent; color: var(--ink-2); border-color: var(--line); }
.sv-scope .lf-btn-ghost:hover { background: var(--surface-2); color: var(--ink-1); border-color: var(--ink-4); }
.sv-scope .lf-btn-primary { background: var(--accent); color: #fff; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04); }
.sv-scope .lf-btn-primary:hover { background: #2a6e34; }
.sv-scope .lf-btn-primary:disabled { background: var(--ink-4); color: #fff; cursor: not-allowed; box-shadow: none; }

/* ─────────────────────────────────────────────────────────────────────────
   Caregiver selector — shared pieces
   ───────────────────────────────────────────────────────────────────────── */
.sv-scope .lf-avatar {
    flex: 0 0 auto; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font: 700 10px/1 var(--sv-font-ui); border: 1px solid; letter-spacing: 0.01em;
    width: 26px; height: 26px;
}
.sv-scope .lf-avatar.sz-lg { width: 34px; height: 34px; font-size: 12px; }
.sv-scope .lf-cg-unassigned { color: var(--ink-3); font-weight: 500; }

/* Search */
.sv-scope .lf-search {
    display: flex; align-items: center; gap: 8px;
    background: var(--surface-2); border: 1px solid var(--line);
    border-radius: var(--r-4); padding: 0 11px; height: 38px;
    transition: border-color 0.12s, box-shadow 0.12s, background 0.12s;
}
.sv-scope .lf-search:focus-within { border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 3px rgba(47, 122, 58, 0.13); }
.sv-scope .lf-search svg { color: var(--ink-3); flex: 0 0 auto; }
.sv-scope .lf-search input {
    appearance: none; border: 0; background: transparent; outline: none;
    flex: 1; min-width: 0; font: 500 13px/1 var(--sv-font-ui); color: var(--ink-1);
}
.sv-scope .lf-search input::placeholder { color: var(--ink-3); }
.sv-scope .lf-search .lf-x { width: 22px; height: 22px; border: 0; background: transparent; }
.sv-scope .lf-search .lf-x:hover { background: transparent; color: var(--ink-1); }

/* Chips */
.sv-scope .lf-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sv-scope .lf-chip {
    appearance: none; cursor: pointer;
    background: var(--surface); border: 1px solid var(--line); color: var(--ink-2);
    border-radius: var(--r-pill); height: 28px; padding: 0 11px;
    font: 600 12px/1 var(--sv-font-ui);
    display: inline-flex; align-items: center; gap: 6px;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.sv-scope .lf-chip:hover { border-color: var(--ink-4); color: var(--ink-1); }
.sv-scope .lf-chip.is-on { background: var(--accent-soft); border-color: var(--c-sched-bd); color: var(--accent-ink); }

/* List + section headers */
.sv-scope .lf-cg-list { display: flex; flex-direction: column; }
.sv-scope .lf-cg-scroll { overflow-y: auto; }
.sv-scope .lf-cg-secthd {
    display: flex; align-items: center; gap: 8px;
    font: 600 10.5px/1 var(--sv-font-ui); color: var(--ink-3);
    text-transform: uppercase; letter-spacing: 0.07em;
    padding: 12px 4px 7px;
}
.sv-scope .lf-cg-secthd .lf-secthd-ct {
    font-variant-numeric: tabular-nums; color: var(--ink-4);
    letter-spacing: 0; font-weight: 600;
}
.sv-scope .lf-cg-secthd .hr { flex: 1; height: 1px; background: var(--line-2); }
.sv-scope .lf-cg-empty {
    font: 500 11px/1.4 var(--sv-font-ui); color: var(--ink-3);
    padding: 14px 6px; text-align: center;
}

/* Caregiver row */
.sv-scope .lf-cg {
    appearance: none; width: 100%; text-align: left; cursor: pointer;
    background: transparent; border: 1px solid transparent; border-radius: var(--r-4);
    padding: 9px 11px; display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto auto;
    align-items: center; gap: 12px;
    transition: background 0.12s, border-color 0.12s, box-shadow 0.12s;
}
.sv-scope .lf-cg + .lf-cg { margin-top: 1px; }
.sv-scope .lf-cg:hover { background: var(--surface-2); }
.sv-scope .lf-cg.is-sel { background: var(--accent-soft); border-color: var(--c-sched-bd); }
.sv-scope .lf-cg.is-sel:hover { background: var(--accent-soft); }
.sv-scope .lf-cg.is-unavail { cursor: not-allowed; opacity: 0.66; }
.sv-scope .lf-cg.is-unavail:hover { background: transparent; }

.sv-scope .lf-cg-id { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sv-scope .lf-cg-name { font: 600 13px/1.15 var(--sv-font-ui); color: var(--ink-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-scope .lf-cg-meta {
    display: flex; align-items: center; gap: 6px;
    font: 500 11px/1.2 var(--sv-font-ui); color: var(--ink-3);
    white-space: nowrap; overflow: hidden;
}
.sv-scope .lf-cg-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-4); flex: 0 0 auto; }
.sv-scope .lf-cg-meta .recent { color: var(--accent-ink); font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.sv-scope .lf-cg-meta .recent svg { opacity: 0.85; }
.sv-scope .lf-cg-meta .new { color: var(--ink-3); }

/* Hours-this-week meter */
.sv-scope .lf-hours { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; width: 88px; flex: 0 0 auto; }
.sv-scope .lf-hours-top { display: flex; align-items: baseline; gap: 3px; font-variant-numeric: tabular-nums; }
.sv-scope .lf-hours-num { font: 600 13px/1 var(--sv-font-mono); color: var(--ink-1); }
.sv-scope .lf-hours-cap { font: 500 10px/1 var(--sv-font-mono); color: var(--ink-4); }
.sv-scope .lf-meter { width: 88px; height: 5px; border-radius: 3px; background: var(--line); overflow: hidden; display: flex; }
.sv-scope .lf-meter-fill { height: 100%; background: var(--accent); }
.sv-scope .lf-meter-add { height: 100%; background: repeating-linear-gradient(45deg, var(--warn) 0 3px, #d98c1f 3px 6px); }
.sv-scope .lf-hours.is-ot .lf-hours-num { color: var(--warn); }
.sv-scope .lf-hours.is-ot .lf-meter-fill { background: var(--warn); }
.sv-scope .lf-hours-flag {
    display: inline-flex; align-items: center; gap: 3px; white-space: nowrap;
    font: 600 9.5px/1 var(--sv-font-ui); color: var(--warn);
    text-transform: uppercase; letter-spacing: 0.04em;
}

/* Trailing radio */
.sv-scope .lf-cg-pick { width: 22px; height: 22px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; }
.sv-scope .lf-radio { width: 18px; height: 18px; border-radius: 50%; border: 1.6px solid var(--ink-4); transition: border-color 0.12s, background 0.12s; }
.sv-scope .lf-cg:hover .lf-radio { border-color: var(--accent); }
.sv-scope .lf-cg.is-sel .lf-radio { border-color: var(--accent); background: var(--accent); box-shadow: inset 0 0 0 3px var(--surface); }

/* Unavailable block (replaces hours + radio) */
.sv-scope .lf-unavail {
    grid-column: 3 / 5; justify-self: end;
    display: flex; flex-direction: column; align-items: flex-end; gap: 3px; text-align: right;
}
.sv-scope .lf-unavail-tag {
    display: inline-flex; align-items: center; gap: 4px;
    background: var(--c-conf-bg); color: var(--c-conf-fg); border: 1px solid var(--c-conf-bd);
    border-radius: var(--r-3); padding: 3px 7px; font: 600 12px/1 var(--sv-font-ui);
}
.sv-scope .lf-unavail-tag.is-timeoff { background: var(--c-done-bg); color: var(--c-done-fg); border-color: var(--c-done-bd); }
.sv-scope .lf-unavail-why { font: 500 11px/1.2 var(--sv-font-ui); color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* ── Inline picker (embedded in the accordion step) ──────────────────────── */
.sv-scope .cgp-inline { display: flex; flex-direction: column; gap: 9px; }
.sv-scope .cgp-inline-list { max-height: 268px; overflow-y: auto; margin: 0 -4px; padding: 0 4px; }

/* ── Collapsed caregiver summary ─────────────────────────────────────────── */
.sv-scope .cg-summary { display: flex; align-items: center; gap: 11px; min-width: 0; flex: 1; }
.sv-scope .cg-sum-id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sv-scope .cg-sum-name { font: 600 13px/1.15 var(--sv-font-ui); color: var(--ink-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-scope .cg-sum-meta { display: flex; align-items: center; gap: 6px; font: 500 11px/1.2 var(--sv-font-ui); color: var(--ink-3); white-space: nowrap; overflow: hidden; }
.sv-scope .cg-sum-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-4); flex: 0 0 auto; }
.sv-scope .cg-sum-meta .recent { color: var(--accent-ink); font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.sv-scope .cg-sum-meta .new { color: var(--ink-3); }
.sv-scope .cg-sum-hrs { font-family: var(--sv-font-mono); font-variant-numeric: tabular-nums; }
.sv-scope .cg-sum-hrs.is-ot { color: var(--warn); font-weight: 600; }
.sv-scope .tone-inline-summary { gap: 9px; }
.sv-scope .tone-inline-summary .lf-avatar { width: 28px; height: 28px; font-size: 10px; }
.sv-scope .tone-inline-summary .cg-sum-name { font-size: 11px; }

/* ─────────────────────────────────────────────────────────────────────────
   Accordion — progressive disclosure
   ───────────────────────────────────────────────────────────────────────── */
.sv-scope .acc { border: 1px solid var(--line-2); border-radius: var(--r-4); background: var(--surface); transition: border-color 0.15s, box-shadow 0.15s, background 0.15s; }
.sv-scope .acc + .acc { margin-top: 9px; }
.sv-scope .acc.is-open { border-color: var(--line); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04); }
.sv-scope .acc-head { width: 100%; appearance: none; background: transparent; border: 0; cursor: pointer; display: flex; align-items: center; gap: 11px; padding: 12px 14px; text-align: left; min-width: 0; }
.sv-scope .acc-step {
    width: 24px; height: 24px; border-radius: 50%; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    border: 1.5px solid var(--ink-4); color: var(--ink-3);
    font: 700 12px/1 var(--sv-font-ui); font-variant-numeric: tabular-nums;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.sv-scope .acc.is-done .acc-step { background: var(--accent); border-color: var(--accent); color: #fff; }
.sv-scope .acc.is-open .acc-step { background: var(--surface); border-color: var(--accent); color: var(--accent); }
.sv-scope .acc-label { font: 600 13px/1.2 var(--sv-font-ui); color: var(--ink-1); flex: 0 0 auto; }
.sv-scope .acc-summary { flex: 1; min-width: 0; color: var(--ink-3); font: 500 11px/1.2 var(--sv-font-ui); overflow: hidden; display: flex; align-items: center; gap: 8px; }
.sv-scope .acc-summary:not(:has(.cg-summary)) { white-space: nowrap; text-overflow: ellipsis; display: block; }
.sv-scope .acc-summary-empty { color: var(--ink-3); font-style: italic; }
.sv-scope .acc-edit { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; color: var(--accent-ink); font: 600 12px/1 var(--sv-font-ui); background: transparent; border: 0; cursor: pointer; padding: 0; }
.sv-scope .acc-edit:hover { text-decoration: underline; }
.sv-scope .acc-chev { flex: 0 0 auto; color: var(--ink-3); transition: transform 0.25s; margin-left: 2px; display: flex; }
.sv-scope .acc.is-open .acc-chev { transform: rotate(180deg); }
.sv-scope .acc-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.28s cubic-bezier(0.4, 0, 0.2, 1); }
.sv-scope .acc.is-open .acc-body { grid-template-rows: 1fr; }
.sv-scope .acc-body-inner { overflow: hidden; min-height: 0; }
.sv-scope .acc-body-pad { padding: 0 14px 14px; }

/* ── Frequency options ───────────────────────────────────────────────────── */
.sv-scope .freq-wrap { display: flex; flex-direction: column; gap: 4px; }
.sv-scope .freq-opts { display: flex; flex-direction: column; gap: 2px; }
.sv-scope .freq-opt {
    appearance: none; cursor: pointer; width: 100%; text-align: left;
    display: flex; align-items: center; gap: 11px; padding: 10px 11px;
    border-radius: var(--r-3); border: 1px solid transparent; background: transparent;
    transition: background 0.12s, border-color 0.12s;
}
.sv-scope .freq-opt:hover { background: var(--surface-2); }
.sv-scope .freq-opt.is-on { background: var(--accent-soft); border-color: var(--c-sched-bd); }
.sv-scope .freq-radio { width: 18px; height: 18px; border-radius: 50%; border: 1.6px solid var(--ink-4); flex: 0 0 auto; transition: border-color 0.12s, background 0.12s; }
.sv-scope .freq-opt:hover .freq-radio { border-color: var(--accent); }
.sv-scope .freq-opt.is-on .freq-radio { border-color: var(--accent); background: var(--accent); box-shadow: inset 0 0 0 3px var(--surface); }
.sv-scope .freq-opt-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sv-scope .freq-opt-label { font: 600 13px/1.15 var(--sv-font-ui); color: var(--ink-1); }
.sv-scope .freq-opt-sub { font: 500 11px/1.2 var(--sv-font-ui); color: var(--ink-3); }
.sv-scope .freq-opt-icon { flex: 0 0 auto; color: var(--ink-4); display: flex; }
.sv-scope .freq-opt.is-on .freq-opt-icon { color: var(--accent); }
.sv-scope .freq-reveal { animation: sv-reveal 0.18s cubic-bezier(0.2, 0.7, 0.2, 1); }
@keyframes sv-reveal { from { transform: translateY(-6px); opacity: 0; } to { transform: none; opacity: 1; } }
.sv-scope .freq-sub-label { font: 600 10.5px/1 var(--sv-font-ui); color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em; padding: 8px 11px 0; }
.sv-scope .dow { display: flex; gap: 6px; padding: 8px 11px 4px; }
.sv-scope .dow-day {
    width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto; cursor: pointer;
    border: 1px solid var(--line); background: var(--surface); color: var(--ink-2);
    font: 600 12px/1 var(--sv-font-ui); display: flex; align-items: center; justify-content: center;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.sv-scope .dow-day:hover { border-color: var(--ink-4); }
.sv-scope .dow-day.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }
.sv-scope .freq-ends { display: flex; align-items: center; gap: 12px; padding: 10px 11px 2px; }
.sv-scope .freq-ends .freq-sub-label { padding: 0; flex: 0 0 auto; }
.sv-scope .freq-ends-ctl { flex: 1; height: 40px; }
.sv-scope .freq-confirm { display: flex; justify-content: flex-end; padding: 10px 11px 2px; }

/* Date & time step stack */
.sv-scope .sv-datetime { display: flex; flex-direction: column; gap: 13px; margin-top: 2px; }