/* ───────────────────────────────────────────────────────────────────────────
   Operations report (/Reports/Operations): a period's care hours from
   scheduled to ready to bill. Tiles, the funnel with what was lost between
   steps, stuck care by age, and the same funnel by week and by house.
   Scoped under .leaf-ds, built only from leaf-ds.css tokens.
   ─────────────────────────────────────────────────────────────────────────── */

.leaf-ds .op-page {
    max-width: 1080px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px;
    /* The funnel's steps are an order, so one hue light → dark (the accent green), shared by the
       chart's lines and the funnel's bars. Validated as an ordinal ramp on the card surface:
       monotone lightness, visible steps, the light end 2.46:1. */
    --op-s1: #7fb276;   /* scheduled, staff hours */
    --op-s2: #4f9a4f;   /* worked */
    --op-s3: #2f7a3a;   /* billable, documented (= --accent) */
    --op-s4: #1f4e2a;   /* ready or locked (= --accent-ink) */
}

/* "Oct 1 – Oct 31 · days of care at each house's clock · hours, not dollars" */
.leaf-ds .op-scope { display: flex; flex-wrap: wrap; margin: 0; font-size: 12.5px; color: var(--ink-3); }
.leaf-ds .op-scope > * + *::before { content: "·"; margin: 0 6px; color: var(--ink-4); }
.leaf-ds .op-scope > :first-child { color: var(--ink-2); font-weight: 600; }

.leaf-ds .op-empty, .leaf-ds .op-quiet { font-size: 13px; color: var(--ink-3); padding: 6px 0; }
.leaf-ds .op-empty { padding: 28px 16px; text-align: center; border: 1px dashed var(--line); border-radius: var(--r-6); }

/* ── Tiles ─────────────────────────────────────────────────────────────── */
.leaf-ds .op-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 900px) { .leaf-ds .op-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .leaf-ds .op-tiles { grid-template-columns: minmax(0, 1fr); } }
.leaf-ds .op-tile { padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-6); background: var(--surface); min-width: 0; }
.leaf-ds .op-tile-l { font-size: 11.5px; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; }
.leaf-ds .op-tile-v { margin-top: 4px; font-size: 24px; font-weight: 700; letter-spacing: -0.015em; color: var(--ink-1); font-variant-numeric: tabular-nums; }
.leaf-ds .op-tile-c { margin-top: 2px; font-size: 12px; color: var(--ink-2); }
.leaf-ds .op-tile.is-warn { border-color: var(--c-warn-bd); background: var(--c-warn-bg); }
.leaf-ds .op-tile.is-warn .op-tile-v { color: var(--c-warn-fg); }

/* ── Cards ─────────────────────────────────────────────────────────────── */
.leaf-ds .op-card { padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-6); background: var(--surface); min-width: 0; }
.leaf-ds .op-card-h { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin-bottom: 10px; }
.leaf-ds .op-card-t { margin: 0; font-size: 14px; font-weight: 700; color: var(--ink-1); }
.leaf-ds .op-card-sub { font-size: 12px; color: var(--ink-3); }

/* ── The funnel: a bar per step, the changes on the way to it above it ─── */
.leaf-ds .op-funnel { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.leaf-ds .op-step {
    display: grid; grid-template-columns: 140px minmax(0, 1fr) 96px; align-items: center; gap: 12px;
    padding: 6px 0;
}
.leaf-ds .op-step-l { font-size: 13px; font-weight: 700; color: var(--ink-1); }
.leaf-ds .op-step-v { font-size: 13.5px; font-weight: 700; color: var(--ink-1); text-align: right; font-variant-numeric: tabular-nums; }
.leaf-ds .op-bar { position: relative; height: 14px; border-radius: var(--r-pill); background: var(--surface-2); border: 1px solid var(--line-2); overflow: hidden; }
.leaf-ds .op-bar-fill { position: absolute; inset: 0 auto 0 0; border-radius: var(--r-pill); background: var(--tc-c); }

.leaf-ds .op-change {
    display: grid; grid-template-columns: 140px minmax(0, 1fr) 96px; gap: 12px; align-items: baseline;
    padding: 1px 0; font-size: 12.5px; color: var(--ink-2);
}
.leaf-ds .op-change-l { grid-column: 2; min-width: 0; padding-left: 10px; border-left: 2px solid var(--line); }
.leaf-ds .op-change-v { grid-column: 3; text-align: right; color: var(--c-warn-fg); font-variant-numeric: tabular-nums; }
.leaf-ds .op-change.is-gain .op-change-v { color: var(--c-sched-fg); }
.leaf-ds .op-team {
    display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: var(--r-pill);
    font-size: 11px; font-weight: 600; line-height: 17px; border: 1px solid var(--line); color: var(--ink-3);
}
.leaf-ds .op-team--care { border-color: var(--c-live-bd); background: var(--c-live-bg); color: var(--c-live-fg); }
.leaf-ds .op-team--admin { border-color: var(--c-warn-bd); background: var(--c-warn-bg); color: var(--c-warn-fg); }
.leaf-ds .op-team--outside { border-color: var(--c-done-bd); background: var(--c-done-bg); color: var(--c-done-fg); }

@media (max-width: 640px) {
    .leaf-ds .op-step { grid-template-columns: minmax(0, 1fr) auto; }
    .leaf-ds .op-step .op-bar { grid-column: 1 / -1; grid-row: 2; }
    .leaf-ds .op-change { grid-template-columns: minmax(0, 1fr) auto; }
    .leaf-ds .op-change-l { grid-column: 1; }
    .leaf-ds .op-change-v { grid-column: 2; }
}

/* ── Tables (stuck care, by week, by house): one horizontal scroller each ─ */
.leaf-ds .op-scroll { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; }
.leaf-ds .op-table { width: 100%; border-collapse: collapse; font-size: 12.5px; color: var(--ink-1); }
.leaf-ds .op-table th {
    text-align: left; font-size: 11px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em;
    padding: 6px 10px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
.leaf-ds .op-table td { padding: 7px 10px; border-bottom: 1px solid var(--line-2); white-space: nowrap; }
.leaf-ds .op-table tr:last-child td { border-bottom: none; }
.leaf-ds .op-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.leaf-ds .op-table td.is-zero { color: var(--ink-4); }
.leaf-ds .op-table td.is-warn { color: var(--c-warn-fg); font-weight: 700; }
.leaf-ds .op-table tr.is-moving td { color: var(--ink-2); }
.leaf-ds .op-moving {
    margin-left: 6px; padding: 0 6px; border-radius: var(--r-pill); font-size: 11px; font-weight: 600; line-height: 17px;
    border: 1px solid var(--c-live-bd); background: var(--c-live-bg); color: var(--c-live-fg);
}

/* ── Hours by day: overlaid lines, CSS-only hover ──────────────────────── */
.leaf-ds .tc-s1 { --tc-c: var(--op-s1); }
.leaf-ds .tc-s2 { --tc-c: var(--op-s2); }
.leaf-ds .tc-s3 { --tc-c: var(--op-s3); }
.leaf-ds .tc-s4 { --tc-c: var(--op-s4); }

.leaf-ds .tc-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0 0 12px; padding: 0; }
.leaf-ds .tc-legend li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-2); }
.leaf-ds .tc-legend b { font-size: 16px; font-weight: 700; color: var(--ink-1); letter-spacing: -0.01em; }
.leaf-ds .tc-key { width: 16px; height: 2px; border-radius: 1px; background: var(--tc-c); }

.leaf-ds .tc { display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: 200px auto; column-gap: 8px; }
.leaf-ds .tc-y { position: relative; }
.leaf-ds .tc-y span {
    position: absolute; right: 0; transform: translateY(-50%);
    font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.leaf-ds .tc-plot { position: relative; }
.leaf-ds .tc-grid { position: absolute; left: 0; right: 0; height: 1px; background: var(--line-2); }
.leaf-ds .tc-grid.is-base { background: var(--line); }
.leaf-ds .tc-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.leaf-ds .tc-area { fill: var(--tc-c); opacity: .10; stroke: none; }
.leaf-ds .tc-line { fill: none; stroke: var(--tc-c); stroke-width: 2px; stroke-linejoin: round; stroke-linecap: round; }

/* An end dot on each line: 8px, with a 2px ring in the surface colour. */
.leaf-ds .tc-dot, .leaf-ds .tc-hdot {
    position: absolute; width: 8px; height: 8px; margin: -6px 0 0 -6px; border-radius: 50%;
    background: var(--tc-c); border: 2px solid var(--surface); box-sizing: content-box; pointer-events: none;
}

/* One column per day: the hit target is the whole column, so a reader aims at a day, not a line. */
.leaf-ds .tc-col { position: absolute; top: 0; bottom: 0; }
.leaf-ds .tc-col .tc-cross { position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--ink-4); display: none; }
.leaf-ds .tc-col .tc-hdot { left: 50%; display: none; }
.leaf-ds .tc-col:hover .tc-cross, .leaf-ds .tc-col:hover .tc-hdot { display: block; }
.leaf-ds .tc-tip {
    position: absolute; top: 4px; left: calc(50% + 10px); z-index: 2; display: none;
    min-width: 168px; padding: 8px 10px; border-radius: var(--r-5);
    background: var(--surface); border: 1px solid var(--line); box-shadow: 0 4px 14px rgba(27, 26, 23, .10);
    font-size: 12px; color: var(--ink-2); white-space: nowrap; pointer-events: none;
}
.leaf-ds .tc-tip.is-left { left: auto; right: calc(50% + 10px); }
.leaf-ds .tc-col:hover .tc-tip { display: block; }
.leaf-ds .tc-tip-h { font-weight: 700; color: var(--ink-1); margin-bottom: 4px; }
.leaf-ds .tc-tip-r { display: flex; align-items: center; gap: 8px; line-height: 20px; }
.leaf-ds .tc-tip-r b { min-width: 66px; color: var(--ink-1); font-variant-numeric: tabular-nums; }
.leaf-ds .tc-tip-k { width: 12px; height: 2px; border-radius: 1px; background: var(--tc-c); }

.leaf-ds .tc-x { grid-column: 2; position: relative; height: 22px; }
.leaf-ds .tc-x span {
    position: absolute; top: 6px; transform: translateX(-50%);
    font-size: 11px; color: var(--ink-3); white-space: nowrap;
}

.leaf-ds .tc-table { margin-top: 10px; }
.leaf-ds .tc-table summary { cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--accent-ink); }
.leaf-ds .tc-table .op-scroll { max-height: 320px; overflow-y: auto; overflow-x: hidden; margin-top: 8px; }

@media (max-width: 640px) {
    .leaf-ds .tc { grid-template-rows: 160px auto; grid-template-columns: 36px minmax(0, 1fr); }
    .leaf-ds .tc-x span:nth-child(even) { display: none; }
}