/* ============================================================================
   catchup-page.css — styles for CatchUp.aspx's 30-day backfill grid.

   A wide matrix: pinned activity-name column on the left, 30 scrollable date
   columns to the right, a checkbox per cell. Uses the shared design-system CSS
   variables so light/dark mode come for free. Rendered by catchup-page.js.
   ========================================================================== */

/* hidden-attr safety (some resets clobber [hidden], and the rules below set an
   explicit `display` that would otherwise beat the UA sheet's [hidden]{display:none}) */
.cu-grid-wrap[hidden],
.cu-toolbar[hidden],
.cu-loading[hidden],
.cu-nomatch[hidden],
.cu-fills[hidden],
.cu-legend[hidden],
.cu-empty[hidden] { display: none !important; }

/* ── local palette ───────────────────────────────────────────────────────
   Row shading derives from the CARD, never from --color-bg. The page
   background is user-tintable (Preferences → Site Background), so --color-bg
   would drag that tint (e.g. Rose #f3e0e6) into cells sitting on a white card.
   Mixing against --color-bg-card keeps the zebra neutral and theme-aware.

   "Today" uses --color-primary-light, NOT --color-accent-light: the two share
   the same light value (#e0f6fe) but only --color-primary-light is overridden
   in the dark block (#082a3d). --color-accent-light stays pale blue in dark
   mode, which put near-white --color-text on a near-white cell.

   Defined on :root, not on .cu-grid-wrap — this sheet only loads on CatchUp.aspx,
   so there is nothing to leak into, and root scoping means a .cu-* element can
   never resolve one of these to `transparent` by sitting outside a wrapper. */
:root {
    --cu-shade:     color-mix(in srgb, var(--color-text) 6%,  var(--color-bg-card));
    --cu-band:      color-mix(in srgb, var(--color-text) 11%, var(--color-bg-card));
    --cu-today-bg:  var(--color-primary-light);
}

/* ── legend (intro card) ─────────────────────────────────────────────── */
.cu-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 8px;
    font-size: var(--font-size-sm); color: var(--color-text-muted); }
.cu-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.cu-swatch { display: inline-block; width: 14px; height: 14px; border-radius: 3px;
    border: 1px solid var(--color-border); }
.cu-swatch-today { background: var(--cu-today-bg); border-color: var(--color-accent); }
.cu-swatch-weekend { background: var(--cu-shade); }

/* ── loading row ─────────────────────────────────────────────────────── */
.cu-loading { display: flex; align-items: center; gap: 10px; padding: 20px 4px;
    color: var(--color-text-muted); }

/* ── empty-state caveat (the Goals exclusion) ────────────────────────
   One step quieter than .empty-state-sub above it, so the actionable sentence
   stays the thing you read first. Same 32rem measure + auto margins as
   .empty-state-sub (styles_shared.css) so the two wrap on the same column. */
.cu-empty-caveat { max-width: 32rem; margin: 0 auto 1rem;
    font-size: var(--font-size-sm); color: var(--color-text-muted); opacity: .85; }

/* ── "what fills the grid" line (sits directly above the toolbar) ─────
   Muted body text rather than .note — the sentence is long enough that italics
   hurt, and max-width keeps it to a couple of readable lines on a wide screen. */
.cu-fills { margin: 12px 0 0; max-width: 74ch;
    font-size: var(--font-size-sm); color: var(--color-text-muted); }

/* ── toolbar (filter · count · jump-to-today) ────────────────────────── */
.cu-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    margin: 12px 0 8px; }
/* min-width (not flex-basis) so the box shrinks on a narrow screen instead of
   growing tall when the row wraps. */
.cu-toolbar .cu-filter { flex: 1 1 auto; min-width: 160px; max-width: 320px; }
.cu-toolbar-count { margin-left: auto; white-space: nowrap; }
.cu-nomatch { padding: 18px 4px; color: var(--color-text-muted); }

/* ── scroll container ────────────────────────────────────────────────── */
.cu-grid-wrap {
    overflow: auto;
    max-height: 78vh;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    background: var(--color-bg-card);
    -webkit-overflow-scrolling: touch;
}

/* ── table ───────────────────────────────────────────────────────────── */
.cu-table {
    border-collapse: separate;
    border-spacing: 0;
    width: max-content;
    min-width: 100%;
    font-size: var(--font-size-sm);
    color: var(--color-text);
}
.cu-table th, .cu-table td {
    border-bottom: 1px solid var(--color-border);
    border-right: 1px solid var(--color-border);
}

/* header cells (sticky top) */
.cu-table thead th {
    position: sticky; top: 0;
    z-index: var(--z-sticky);
    background: var(--color-bg-card);
    padding: 6px 4px;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    font-weight: var(--font-weight-medium);
}
.cu-date-col { width: 42px; min-width: 42px; }
.cu-dow { display: block; font-size: var(--font-size-xs); color: var(--color-text-muted);
    text-transform: uppercase; letter-spacing: .02em; }
.cu-date { display: block; font-size: var(--font-size-xs); }

/* name column (sticky left), header + body */
.cu-name-col {
    position: sticky; left: 0;
    z-index: calc(var(--z-sticky) - 1);
    background: var(--color-bg-card);
    text-align: left;
    padding: 6px 10px;
    min-width: 170px; max-width: 280px;
    font-weight: var(--font-weight-normal);
}
/* top-left corner: above both sticky axes */
.cu-corner { z-index: calc(var(--z-sticky) + 1); }

.cu-name { display: inline; }
.cu-count { margin-left: 8px; font-size: var(--font-size-xs);
    color: var(--color-text-muted); white-space: nowrap; }

/* indentation by depth */
.cu-lvl-0 .cu-name { padding-left: 0; }
.cu-lvl-1 .cu-name { padding-left: 16px; }
.cu-lvl-2 .cu-name { padding-left: 32px; }

/* level emphasis */
.cu-cat   .cu-name { font-weight: var(--font-weight-bold); }
.cu-tgt   .cu-name { font-weight: var(--font-weight-medium); }
.cu-method .cu-name { font-weight: var(--font-weight-normal); }

/* category band (whole row tinted) */
.cu-cat td, .cu-cat th, .cu-cat .cu-name-col { background: var(--cu-band); }

/* body cells */
.cu-cell { text-align: center; padding: 5px 4px; }
.cu-spacer { background: var(--color-bg-card); }

.cu-chk { width: 19px; height: 19px; cursor: pointer; margin: 0;
    accent-color: var(--color-primary); }
.cu-chk:disabled { opacity: .5; cursor: progress; }

/* weekend + today emphasis */
.cu-cell.cu-weekend { background: var(--cu-shade); }
/* The category band spans the whole row, so weekend shading must not punch holes
   in it. (Moot while both were --color-bg; now that they differ, it shows.) */
.cu-cat td.cu-cell.cu-weekend { background: var(--cu-band); }
.cu-date-col.cu-weekend { color: var(--color-text-muted); }
.cu-date-col.cu-today { background: var(--cu-today-bg);
    color: var(--color-text); font-weight: var(--font-weight-bold); }
th.cu-date-col.cu-today, td.cu-cell.cu-today { border-left: 2px solid var(--color-accent); }
/* keep the today line continuous on the right edge of the column too */
.cu-table thead th.cu-date-col.cu-today + th,
.cu-table tbody td.cu-cell.cu-today + td { border-left: 1px solid var(--color-border); }

/* save feedback */
@keyframes cuFlashOk  { 0% { background: var(--color-success-bg); } 100% { background: transparent; } }
@keyframes cuFlashErr { 0% { background: var(--color-danger-bg);  } 100% { background: transparent; } }
.cu-flash-ok  { animation: cuFlashOk  .7s ease-out; }
.cu-flash-err { animation: cuFlashErr .7s ease-out; }

/* empty state spacing */
.cu-empty { margin-top: 8px; }

@media (max-width: 600px) {
    .cu-name-col { min-width: 140px; max-width: 200px; }
    .cu-date-col { width: 38px; min-width: 38px; }
}