/* /Components/Admin/ClientMultiSelect.razor.rz.scp.css */
.client-ms[b-pufxjtbxkq] { display: flex; flex-direction: column; gap: 8px; }
.client-ms-head[b-pufxjtbxkq] { display: flex; align-items: center; justify-content: space-between; }
.client-ms-filter[b-pufxjtbxkq] { width: 100%; }
.client-ms-actions[b-pufxjtbxkq] { display: flex; gap: 12px; }

.client-ms-list[b-pufxjtbxkq] {
    max-height: 220px;
    overflow-y: auto;
    border: 1px solid var(--c-border);
    border-radius: 6px;
    padding: 6px 8px;
    background: var(--c-surface);
}
.client-ms-item[b-pufxjtbxkq] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 4px;
    font-size: 14px;
    cursor: pointer;
    border-radius: 4px;
}
.client-ms-item:hover[b-pufxjtbxkq] { background: var(--c-bg); }
.client-ms-item input[b-pufxjtbxkq] { width: 15px; height: 15px; margin: 0; cursor: pointer; }
.client-ms-empty[b-pufxjtbxkq] { padding: 8px 4px; margin: 0; font-style: italic; }

.client-ms-help[b-pufxjtbxkq] { margin: 0; font-size: 12px; color: var(--c-muted); line-height: 1.4; }
/* /Components/Admin/ColorSwatchPicker.razor.rz.scp.css */
.swatch-grid[b-u3aeatn2ww] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
}
.swatch-opt[b-u3aeatn2ww] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 8px 4px;
    background: none;
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    font: inherit;
}
.swatch-opt:hover[b-u3aeatn2ww] { background: var(--c-bg); border-color: var(--c-border); }
.swatch-opt.selected[b-u3aeatn2ww] { border-color: var(--c-accent); background: var(--c-bg); }
.swatch-opt.inuse[b-u3aeatn2ww] { opacity: 0.5; }
.swatch-opt .swatch[b-u3aeatn2ww] { width: 22px; height: 22px; }
.swatch-label[b-u3aeatn2ww] { font-size: 11px; color: var(--c-text); }
.swatch-inuse-note[b-u3aeatn2ww] { font-size: 9px; color: var(--c-muted); line-height: 1.1; text-align: center; }
/* /Components/Admin/MergeFunctionalAreaDialog.razor.rz.scp.css */
.merge-backdrop[b-n1g08ee41z] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 41, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}
.merge-dialog[b-n1g08ee41z] {
    background: var(--c-surface);
    border-radius: 10px;
    width: min(480px, calc(100vw - 32px));
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}
.merge-head[b-n1g08ee41z] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--c-border);
}
.merge-head h3[b-n1g08ee41z] { margin: 0; font-size: 16px; }
.merge-close[b-n1g08ee41z] {
    background: none;
    border: none;
    font-size: 16px;
    cursor: pointer;
    color: var(--c-muted);
    line-height: 1;
}
.merge-close:hover[b-n1g08ee41z] { color: var(--c-text); }

.merge-body[b-n1g08ee41z] { padding: 20px; }
.merge-field[b-n1g08ee41z] { display: block; margin-bottom: 4px; }
.merge-arrow[b-n1g08ee41z] {
    text-align: center;
    color: var(--c-muted);
    font-size: 13px;
    margin: 10px 0;
}
.merge-confirm-msg[b-n1g08ee41z] { margin: 0 0 10px; font-size: 14px; line-height: 1.5; }
.merge-confirm-note[b-n1g08ee41z] { margin: 0; font-size: 12px; color: var(--c-muted); }

.merge-actions[b-n1g08ee41z] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 20px;
    border-top: 1px solid var(--c-border);
    background: #f9fafb;
}
/* /Components/Cards/InitiativeCard.razor.rz.scp.css */
.card[b-2lno8nzwaq] {
    /* The card is its own size-query container: layout responds to the CARD's width (set by the
       Columns selector / Responsive grid), not the viewport. Drives the wide-reflow @container below. */
    container-type: inline-size;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 8px;
    /* ADDENDUM A.2 — roomier card padding to match Bryan's relaxed density. */
    padding: 18px 20px 16px;
    box-shadow: 0 1px 2px rgba(15, 23, 41, 0.04);
    transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 12px;
    outline: none;
}
.card:hover[b-2lno8nzwaq],
.card:focus-visible[b-2lno8nzwaq] {
    box-shadow: 0 4px 12px rgba(15, 23, 41, 0.10);
    border-color: #cbd5e1;
}

/* Tie-in §8: full-width rock banner across the top of the card. Negative margins cancel the
   card's 18px/20px padding so it runs edge-to-edge; top corners rounded to nest inside the
   8px card border. White text; both backgrounds pass WCAG AA (committed 4.69:1, potential 5.0:1). */
.card-rockbar[b-2lno8nzwaq] {
    margin: -18px -20px 0;
    padding: 5px 12px;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.card-rockbar--committed[b-2lno8nzwaq] { background: #E1251B; }  /* brand red --ww-red-on-light (Quarterly committed) */
.card-rockbar--potential[b-2lno8nzwaq] { background: #B45309; }  /* muted amber (Quarterly potential) */
/* HORIZONS: Annual = violet, deliberately distinct from the committed-indigo (#4F46E5) badge;
   ThreeYear = dark forest green, deliberately darker than the bright COMPLETED to-do pill green so the
   two never read as the same state. Both keep the white-on-strong text from .card-rockbar. */
.card-rockbar--annual[b-2lno8nzwaq]    { background: #7C3AED; }  /* violet-600 */
.card-rockbar--threeyear[b-2lno8nzwaq] { background: #166534; }  /* green-800 (dark forest) */

/* HORIZONS roll-up: a child rock's "↑ Rolls up to: {parent}" link, rendered in the body (not the top
   banner). A quiet text button so it reads as a cross-link, not a status bar. */
.card-rollup-parent[b-2lno8nzwaq] { margin: 6px 0 0; }
.card-rollup-link[b-2lno8nzwaq] {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-size: 0.74rem;
    font-weight: 600;
    color: #6D28D9;          /* violet-700 — echoes the Annual-tier hue, reads as a roll-up link */
    cursor: pointer;
    text-align: left;
}
.card-rollup-link:hover[b-2lno8nzwaq] { text-decoration: underline; }

/* Slice 2: sub-rock banner — a third rockbar variant. A PALE red with dark-red text (not the
   white-on-strong-red of the two top-level variants) so it reads as subordinate to its parent rock,
   and stays visually distinct from the pale-salmon overdue ROW TINT (which is a full-card wash behind
   dark body text, not a defined top bar). dark-red #8A2A22 on #F2C4BF = 5.5:1 (passes WCAG AA). */
.card-rockbar--subrock[b-2lno8nzwaq] {
    background: #F2C4BF;
    color: #8A2A22;
}
/* The sub-rock banner is a <button> (jumps to the parent). Strip the native button chrome so it
   matches the <div> banners; display:block + the inherited edge-to-edge negative margins make it
   span the card top identically. */
button.card-rockbar[b-2lno8nzwaq] {
    display: block;
    border: none;
    font-family: inherit;
    cursor: pointer;
}
button.card-rockbar--subrock:hover[b-2lno8nzwaq] { background: #ECB2AC; }

.card-head[b-2lno8nzwaq] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.card-head-text[b-2lno8nzwaq] {
    flex: 1;
    min-width: 0;
}
.card-id[b-2lno8nzwaq] {
    display: block;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    color: var(--c-muted);
    letter-spacing: 0.04em;
}
.card-title[b-2lno8nzwaq] {
    margin: 3px 0 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--c-text);
    line-height: 1.35;
}

/* Card-parity Stage 3: closed / overdue / off-track row treatment — Bryan's Image 3.
   ONE tint per card via a single precedence-winning modifier on the <article> (Closed → Overdue →
   OffTrack), computed in CardTintClass so the classes never stack. Tints are LIGHT washes over the
   card surface so the dark body text (var(--c-text) / #374151) stays readable. The two semantic tints
   derive from the existing brand tokens — var(--green-text) (the RELEASED green) and var(--red-text)
   (the overdue red) — via color-mix so they stay Bryan-faithful; off-track has no existing token, so
   it uses a lemon-yellow base (#facc15). These are eye-review tints and will likely be retuned. Same
   single-class specificity as .card, but declared later in the file so they win; the .card:hover /
   :focus-visible rules touch only box-shadow + border, never background, so hover keeps the tint. */
.card--closed[b-2lno8nzwaq]   { background: color-mix(in srgb, var(--green-text) 12%, var(--c-surface)); }
.card--overdue[b-2lno8nzwaq]  { background: color-mix(in srgb, var(--red-text)   10%, var(--c-surface)); }
.card--offtrack[b-2lno8nzwaq] { background: color-mix(in srgb, #facc15           16%, var(--c-surface)); }

/* Closed cards: strikethrough + mute the title (Bryan's Image 3). */
.card--closed .card-title[b-2lno8nzwaq] {
    text-decoration: line-through;
    text-decoration-thickness: 1px;
    color: var(--c-muted);
}

/* "Closed <date>" audit line — muted, sits just above the Created line. */
.card-closed-date[b-2lno8nzwaq] {
    font-size: 12px;
    font-weight: 600;
    color: var(--c-muted);
}

.overflow-wrap[b-2lno8nzwaq] {
    position: relative;
    flex-shrink: 0;
}
.overflow-btn[b-2lno8nzwaq] {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 0 8px;
    font-size: 18px;
    line-height: 1.4;
    color: var(--c-muted);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.overflow-btn:hover:not([disabled])[b-2lno8nzwaq] {
    background: var(--c-bg);
    border-color: var(--c-border);
}
.overflow-btn[disabled][b-2lno8nzwaq] { opacity: 0.5; cursor: not-allowed; }

/* Overlay that catches outside clicks to close the menu — covers the viewport;
   the menu (z-index higher) sits on top of it. Background fully transparent. */
.overflow-overlay[b-2lno8nzwaq] {
    position: fixed;
    inset: 0;
    z-index: 99;
    background: transparent;
}
.overflow-menu[b-2lno8nzwaq] {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    min-width: 180px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(15, 23, 41, 0.15);
    z-index: 100;
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.overflow-item[b-2lno8nzwaq] {
    background: transparent;
    border: none;
    text-align: left;
    padding: 8px 12px;
    border-radius: 4px;
    font-family: inherit;
    font-size: 13px;
    color: var(--c-text);
    cursor: pointer;
    white-space: nowrap;
}
.overflow-item:hover[b-2lno8nzwaq] { background: var(--c-bg); }

/* ADDENDUM A.2: bigger, more relaxed card body text; preserve user-entered line breaks
   (`pre-wrap`) so multi-line descriptions render as written, not collapsed. The 2-line
   clamp still truncates with ellipsis — pre-wrap and the box-clamp coexist. */
.card-desc[b-2lno8nzwaq] {
    margin: 0;
    color: #374151;
    font-size: 14px;
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Card-parity Stage 1a: Bryan-style grouped body — one row per logical group, stacked
   top-to-bottom (Category / Product·Type / Status·Priority / Visibility·Assignee / Timeline). */
.card-groups[b-2lno8nzwaq] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.card-group[b-2lno8nzwaq] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
.card-assignee[b-2lno8nzwaq] {
    font-size: 13px;
    color: var(--c-muted);
}
.card-timeline[b-2lno8nzwaq] {
    gap: 8px;
}
.card-created[b-2lno8nzwaq] {
    font-size: 12px;
    color: var(--c-muted);
    opacity: 0.85;
}

/* Quiet, non-interactive info chips (ToDo sub-counts, Companies) — distinct from the
   clickable ToDos/Notes chip <button>s, which keep the hover/pointer treatment. */
.chip-static[b-2lno8nzwaq] {
    cursor: default;
    color: var(--c-muted);
}
.chip-static:hover[b-2lno8nzwaq] {
    background: var(--c-bg);
    border-color: var(--c-border);
    color: var(--c-muted);
}

.card-foot[b-2lno8nzwaq] {
    border-top: 1px dashed var(--c-border);
    margin-top: auto;
    padding-top: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}
.card-chips[b-2lno8nzwaq] {
    display: flex;
    flex-wrap: wrap;   /* narrow cards: ToDos/Planned/Notes/Companies drop to a 2nd line, never clip */
    gap: 6px 8px;
}

/* ADDENDUM A.1 + SLICE 3: chips are real <button>s now — clicking the ToDos chip
   opens the modal straight to the ToDos tab, Notes chip to the Notes tab. The
   `@onclick:stopPropagation="true"` on the markup ensures the card-body click
   handler doesn't also fire and open the Edit tab. */
.chip[b-2lno8nzwaq] {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 14px;
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    color: var(--c-text);
    font-size: 12px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.1s ease, border-color 0.1s ease, color 0.1s ease;
    user-select: none;
    line-height: 1.4;
}
.chip:hover[b-2lno8nzwaq] {
    background: #e5e7eb;
    border-color: #94a3b8;
    color: #0f172a;
}
.chip:active[b-2lno8nzwaq] {
    background: #d1d5db;
}

.card-link[b-2lno8nzwaq] {
    font-size: 12px;
    color: var(--c-accent);
    text-decoration: none;
    font-weight: 500;
}
.card-link:hover[b-2lno8nzwaq] { text-decoration: underline; }

/* Slice 2: a rock card's "N sub-rocks" control — header + a list of clickable child links. Sits
   just above the dashed footer; the bordered top mirrors the footer's divider so it reads as its
   own band. */
.card-subrocks[b-2lno8nzwaq] {
    border-top: 1px dashed var(--c-border);
    padding-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.card-subrocks-head[b-2lno8nzwaq] {
    font-size: 12px;
    font-weight: 600;
    color: #8A2A22;          /* echoes the sub-rock banner so the relationship is legible at a glance */
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.card-subrocks-list[b-2lno8nzwaq] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.card-subrock-link[b-2lno8nzwaq] {
    background: transparent;
    border: none;
    padding: 1px 0;
    font-family: inherit;
    font-size: 13px;
    color: var(--c-accent);
    text-align: left;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.card-subrock-link:hover[b-2lno8nzwaq] { text-decoration: underline; }

/* Card-parity Stage 2: timeline / overdue bar (render-only). Visualizes the Start→Target
   window — NOT todo completion. Green fill = Sales/Orders green token (--green-text);
   overdue = red token (--red-text). Knob = today's marker (in-progress + overdue only). */
.card-timeline-bar[b-2lno8nzwaq] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.tlbar-labels[b-2lno8nzwaq] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;        /* narrow cards (5–6 column layout): wrap instead of overflowing */
    gap: 2px 8px;
    font-size: 11px;
}
.tlbar-date[b-2lno8nzwaq] {
    color: var(--c-muted);
    font-variant-numeric: tabular-nums;
}
.tlbar-status[b-2lno8nzwaq] { font-weight: 700; letter-spacing: 0.02em; }
.tlbar-status-overdue[b-2lno8nzwaq] { color: var(--red-text); }
.tlbar-status-done[b-2lno8nzwaq]    { color: var(--green-text); }

.tlbar-track[b-2lno8nzwaq] {
    position: relative;
    height: 8px;
    border-radius: 999px;
    background: var(--c-bg);   /* unfilled track */
}
.tlbar-fill[b-2lno8nzwaq] {
    height: 100%;
    border-radius: 999px;
    background: var(--green-text);   /* default green (in-progress / done) */
}
.is-overdue .tlbar-fill[b-2lno8nzwaq] { background: var(--red-text); }

.tlbar-knob[b-2lno8nzwaq] {
    position: absolute;
    top: 50%;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--green-text);
    transform: translate(-50%, -50%);
    box-shadow: 0 1px 2px rgba(15, 23, 41, 0.25);
}
.is-overdue .tlbar-knob[b-2lno8nzwaq] { border-color: var(--red-text); }

/* ── WIDE-CARD REFLOW (Bryan's single-column layout, his Image 3) ──────────────────────────────
   When the CARD itself is wide (1–2 fixed columns, or a wide Responsive cell) the stacked left-strip
   wastes the width. Above the breakpoint, the badge/meta groups flow HORIZONTALLY across the full
   width; the timeline bar + created line take their own full-width rows; the title stays on top and
   the footer stays inline. Below it, the card keeps today's vertical stacked layout (+ the footer
   wrap above). Breakpoint tuned to ~560px so normal-screen 1–2 columns go wide and 3+ stay stacked
   (3-col cards are ~440px, 2-col ~600–666px within the 1400px board). Tunable. */
@container (min-width: 560px) {
    .card-groups[b-2lno8nzwaq] {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        column-gap: 16px;
        row-gap: 8px;
    }
    /* Bar + created line break to their own full-width rows so the bar spans the card
       (start-date left · status center · target-date right via its space-between labels). */
    .card-timeline-bar[b-2lno8nzwaq],
    .card-created[b-2lno8nzwaq] {
        flex-basis: 100%;
    }
}

/* ── Measurable-result band (result-band feature) — hero readout under the title ──────────────────
   A rounded inset band whose wash follows the band color: green (met) / amber (just short) / red
   (missed). Dark body text stays on the light washes for AA (same color-mix approach as the row
   tints). Eye-review tints — likely to be retuned, like the .card--overdue family. */
.card-resultband[b-2lno8nzwaq] {
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.rb--green[b-2lno8nzwaq] { background: color-mix(in srgb, var(--green-text) 14%, var(--c-surface)); }
.rb--amber[b-2lno8nzwaq] { background: color-mix(in srgb, #f59e0b       18%, var(--c-surface)); }
.rb--red[b-2lno8nzwaq]   { background: color-mix(in srgb, var(--red-text)   12%, var(--c-surface)); }

.rb-main[b-2lno8nzwaq] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 8px;
}
.rb-actual[b-2lno8nzwaq] {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--c-text);
    font-variant-numeric: tabular-nums;
}
.rb-of[b-2lno8nzwaq] {
    font-size: 13px;
    font-weight: 500;
    color: var(--c-muted);
}
.rb-track[b-2lno8nzwaq] {
    height: 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--c-text) 8%, transparent);
    overflow: hidden;
}
.rb-fill[b-2lno8nzwaq] { height: 100%; border-radius: 999px; }
.rb--green .rb-fill[b-2lno8nzwaq] { background: var(--green-text); }
.rb--amber .rb-fill[b-2lno8nzwaq] { background: #d97706; }
.rb--red   .rb-fill[b-2lno8nzwaq] { background: var(--red-text); }
.rb-meta[b-2lno8nzwaq] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 2px 8px;
    font-size: 11px;
    color: var(--c-muted);
}
.rb-secondary[b-2lno8nzwaq] { font-weight: 500; }
.rb-label[b-2lno8nzwaq] {
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-weight: 700;
    white-space: nowrap;
}

/* Period-close chip — sits next to the "Q2 2026" quarter tag. Amber clock while the measurement
   period is open, red lock once it has ended. */
.period-chip[b-2lno8nzwaq] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
    line-height: 1.5;
}
.period-chip-glyph[b-2lno8nzwaq] { font-size: 10px; }
.period-chip--open[b-2lno8nzwaq] {
    background: color-mix(in srgb, #f59e0b 18%, var(--c-surface));
    color: #92400e;
    border: 1px solid color-mix(in srgb, #f59e0b 40%, var(--c-surface));
}
.period-chip--closed[b-2lno8nzwaq] {
    background: color-mix(in srgb, var(--red-text) 14%, var(--c-surface));
    color: var(--red-text);
    border: 1px solid color-mix(in srgb, var(--red-text) 35%, var(--c-surface));
}

/* References (DevOps + Support) — muted monospace chips directly under the title. */
.card-refs[b-2lno8nzwaq] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 0.25rem;
}
.card-ref[b-2lno8nzwaq] {
    font: 12px ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--c-muted, #667);
    background: var(--c-bg, #f4f5f7);
    border-radius: 4px;
    padding: 1px 6px;
}
/* /Components/Cards/ToDoBoardRow.razor.rz.scp.css */
/* To-Dos view row — a single flat, clickable to-do line. */
.tdrow[b-twsiqnzo1f] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 8px;
}
.tdrow--completed[b-twsiqnzo1f] { opacity: 0.62; }
.tdrow--completed .tdrow-desc[b-twsiqnzo1f] { text-decoration: line-through; }

.tdrow-check[b-twsiqnzo1f] { flex: 0 0 auto; width: 16px; height: 16px; cursor: pointer; }

/* Effective-priority chip. ★ marks an override (vs inherited). */
.tdrow-prio[b-twsiqnzo1f] {
    flex: 0 0 auto;
    font-size: 11px; font-weight: 700; letter-spacing: 0.03em;
    padding: 2px 7px; border-radius: 999px; white-space: nowrap;
    border: 1px solid transparent;
}
.tdrow-prio.prio-critical[b-twsiqnzo1f] { background: #FEE2E2; color: #991B1B; border-color: #FECACA; }
.tdrow-prio.prio-high[b-twsiqnzo1f]     { background: #FFEDD5; color: #9A3412; border-color: #FED7AA; }
.tdrow-prio.prio-medium[b-twsiqnzo1f]   { background: #FEF9C3; color: #854D0E; border-color: #FEF08A; }
.tdrow-prio.prio-low[b-twsiqnzo1f]      { background: #F3F4F6; color: #4B5563; border-color: #E5E7EB; }

/* Body button (description + optional completion stamp) — the "open this to-do" target. */
.tdrow-body[b-twsiqnzo1f] {
    flex: 1 1 auto; min-width: 0;
    display: flex; flex-direction: column; gap: 2px;
    background: none; border: none; padding: 0; font: inherit; text-align: left; cursor: pointer;
}
.tdrow-desc[b-twsiqnzo1f] { color: var(--c-text); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tdrow-body:hover .tdrow-desc[b-twsiqnzo1f] { text-decoration: underline; }
.tdrow-completed-stamp[b-twsiqnzo1f] { font-size: 11px; color: var(--green-text); font-style: italic; }

.tdrow-status[b-twsiqnzo1f] { flex: 0 0 auto; }

.tdrow-assignee[b-twsiqnzo1f] { flex: 0 0 auto; font-size: 12px; color: var(--c-muted); min-width: 70px; }

.tdrow-dates[b-twsiqnzo1f] { flex: 0 0 auto; display: flex; gap: 8px; font-size: 12px; color: var(--c-muted); }
.tdrow-date--start[b-twsiqnzo1f] { color: #6D28D9; }
/* Placeholder shown in lieu of a Due date when none is set — a faded, italic hint, not a real value. */
.tdrow-date--none[b-twsiqnzo1f] { font-style: italic; opacity: 0.6; }

/* Parent-initiative link — the second, distinct click target. */
.tdrow-initiative[b-twsiqnzo1f] {
    flex: 0 0 auto; max-width: 200px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    background: none; border: none; padding: 0; font: inherit;
    font-size: 12px; font-weight: 600; color: var(--c-accent); cursor: pointer;
}
.tdrow-initiative:hover[b-twsiqnzo1f] { text-decoration: underline; }

/* Status pill (shared visual with ToDoRow; redeclared here because scoped CSS doesn't cross components). */
.status-pill[b-twsiqnzo1f] {
    flex: 0 0 auto;
    font-size: 11px; font-weight: 600;
    padding: 2px 8px; border-radius: 999px; border: 1px solid transparent; white-space: nowrap;
}
.status-pill.status-planned[b-twsiqnzo1f]    { background: var(--gray-bg);  color: var(--gray-text);  border-color: #d1d5db; }
.status-pill.status-inprogress[b-twsiqnzo1f] { background: var(--blue-bg);  color: var(--blue-text);  border-color: #bfdbfe; }
.status-pill.status-completed[b-twsiqnzo1f]  { background: var(--green-bg); color: var(--green-text); border-color: #a7f3d0; }
.status-pill.status-cancelled[b-twsiqnzo1f]  { background: var(--red-bg);   color: var(--red-text);   border-color: #fecaca; }
/* /Components/Layout/MainLayout.razor.rz.scp.css */
#blazor-error-ui[b-grzvzekt0a] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-grzvzekt0a] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-af2f6dop37],
.components-reconnect-repeated-attempt-visible[b-af2f6dop37],
.components-reconnect-failed-visible[b-af2f6dop37],
.components-pause-visible[b-af2f6dop37],
.components-resume-failed-visible[b-af2f6dop37],
.components-rejoining-animation[b-af2f6dop37] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-af2f6dop37],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-af2f6dop37],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-af2f6dop37],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-af2f6dop37],
#components-reconnect-modal.components-reconnect-retrying[b-af2f6dop37],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-af2f6dop37],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-af2f6dop37],
#components-reconnect-modal.components-reconnect-failed[b-af2f6dop37],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-af2f6dop37] {
    display: block;
}


#components-reconnect-modal[b-af2f6dop37] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-af2f6dop37 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-af2f6dop37 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-af2f6dop37 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-af2f6dop37]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-af2f6dop37 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-af2f6dop37 {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-af2f6dop37 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-af2f6dop37 {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-af2f6dop37] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-af2f6dop37] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-af2f6dop37] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-af2f6dop37] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-af2f6dop37] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-af2f6dop37] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-af2f6dop37] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-af2f6dop37 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-af2f6dop37] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-af2f6dop37 {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Modals/InitiativeEditForm.razor.rz.scp.css */
/* ADDENDUM A.2 — comfortable reading size + relaxed line-height to match Bryan.
   Most atomic form-control styles (.form-input, .form-textarea, .form-label, .btn-*)
   live in global app.css because the Blazor <InputText>/<InputTextArea>/<InputSelect>
   wrappers render their own <input>/<textarea>/<select> which DON'T carry this file's
   scope attribute. Layout-only rules stay scoped here. */

.edit-form[b-m0nrbt124o] {
    padding-bottom: 20px;
    font-size: 15px;
    line-height: 1.5;
}

.row[b-m0nrbt124o] {
    display: grid;
    gap: 22px;
    margin-bottom: 20px;
}
.row-1[b-m0nrbt124o]                 { grid-template-columns: 1fr; }
.row-2[b-m0nrbt124o]                 { grid-template-columns: 1fr 1fr; }
.row-3[b-m0nrbt124o]                 { grid-template-columns: 1fr 1fr 1fr; }
.row-substate[b-m0nrbt124o]          { grid-template-columns: minmax(220px, 1fr) 3fr; }
.row-descriptions[b-m0nrbt124o]      { grid-template-columns: 1fr 1fr; }

.form-field[b-m0nrbt124o] {
    display: flex;
    flex-direction: column;
}
.form-field-grow[b-m0nrbt124o] { flex: 1; }

/* V2 §3.1 "(WWS-only)" in orange next to the Internal Description label. */
.wws-only[b-m0nrbt124o] {
    color: #D97706;
    font-weight: 600;
    font-size: 12px;
}

/* ADDENDUM B — three-way "Visible to Users" segmented radio.
   Native radio inputs are hidden; the surrounding <label> + <span> is the visible
   control. The .seg-selected class is bound from the razor (`Model.VisibilityTier`)
   so we don't depend on :has() for the active state. */
.seg-radio[b-m0nrbt124o] {
    display: inline-flex;
    border: 1px solid var(--c-border);
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
    user-select: none;
    max-width: 100%;
}
.seg-option[b-m0nrbt124o] {
    cursor: pointer;
    padding: 10px 16px;
    font-size: 13.5px;
    color: var(--c-text);
    border-right: 1px solid var(--c-border);
    transition: background 0.1s ease, color 0.1s ease;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}
.seg-option:last-child[b-m0nrbt124o] { border-right: none; }
.seg-option:hover:not(.seg-selected)[b-m0nrbt124o] { background: var(--c-bg); }
.seg-option input[type="radio"][b-m0nrbt124o] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    clip: rect(0 0 0 0);
    overflow: hidden;
}
.seg-option.seg-selected[b-m0nrbt124o] {
    background: var(--c-accent);
    color: #fff;
    font-weight: 600;
}
.seg-option input[type="radio"]:focus-visible + span[b-m0nrbt124o] {
    outline: 2px solid var(--c-accent);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Inline note that shows when "Specific clients only" is selected — honest
   placeholder per ADDENDUM B.4 (client picker is Chunk 4). */
.visibility-deferred-note[b-m0nrbt124o] {
    margin-top: 10px;
    padding: 8px 12px;
    background: #FEF3C7;
    color: #92400E;
    border: 1px solid #FDE68A;
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.5;
}

.row-visibility .form-field[b-m0nrbt124o] {
    align-items: flex-start;
}

/* Slice 2: small muted helper line under a control (e.g. the mutually-exclusive rock pickers).
   On a <p> declared directly in the .razor markup, so the scope attribute applies (unlike the
   InputSelect children). */
.field-hint[b-m0nrbt124o] {
    margin: 6px 0 0;
    font-size: 12px;
    line-height: 1.4;
    color: var(--c-muted);
}

/* Externally-visible checkbox sits inline in the External Description label row. */
.desc-external-label[b-m0nrbt124o] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.ext-checkbox[b-m0nrbt124o] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--c-text);
    font-weight: 500;
    text-transform: none;
    background: #f8fafc;
    border: 1px solid var(--c-border);
    border-radius: 6px;
    padding: 4px 10px;
}
.ext-checkbox input[type="checkbox"][b-m0nrbt124o] {
    width: 16px;
    height: 16px;
    margin: 0;
    cursor: pointer;
}
.ext-checkbox input[disabled][b-m0nrbt124o] { cursor: not-allowed; }
.ext-checkbox label[b-m0nrbt124o] { cursor: pointer; }
.ext-checkbox input[disabled] + label[b-m0nrbt124o] { cursor: not-allowed; color: var(--c-muted); }

/* Functional area combobox inline-add panel. */
.combo-inline-add[b-m0nrbt124o] {
    margin-top: 8px;
    padding: 12px;
    border: 1px solid var(--c-border);
    border-radius: 6px;
    background: #f9fafb;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.combo-add-choices[b-m0nrbt124o] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
}
.radio-line[b-m0nrbt124o] {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}
.radio-line input[type="radio"][b-m0nrbt124o] { margin: 0; }
.combo-add-actions[b-m0nrbt124o] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.form-actions[b-m0nrbt124o] {
    position: sticky;
    bottom: 0;
    background: var(--c-surface);
    border-top: 1px solid var(--c-border);
    padding: 14px 0 6px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 12px;
}

@media (max-width: 900px) {
    .row-2[b-m0nrbt124o], .row-3[b-m0nrbt124o], .row-substate[b-m0nrbt124o], .row-descriptions[b-m0nrbt124o] {
        grid-template-columns: 1fr;
    }
}

/* Result-band number inputs (Target / Actual / Secondary target+actual): hide the browser spinner
   arrows while KEEPING type="number" (mobile numeric keypad + numeric binding preserved). Scoped to
   this form only. ::deep is required because the <input> is emitted by the InputNumber CHILD component,
   so the parent's isolation scope attribute never lands on it — we anchor on the scoped .row-3 wrapper
   instead. .row-3 rows that hold no number input are simply never matched. */
.row-3[b-m0nrbt124o]  input[type="number"]::-webkit-outer-spin-button,
.row-3[b-m0nrbt124o]  input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.row-3[b-m0nrbt124o]  input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}
/* /Components/Modals/InitiativeModal.razor.rz.scp.css */
.modal-backdrop[b-ciw1ew708z] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 41, 0.55);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 32px 24px;
    z-index: 1000;
    overflow-y: auto;
    outline: none;
}

/* V2: wide modal, ~1180px max, near full-width on smaller screens. */
.modal-content[b-ciw1ew708z] {
    background: var(--c-surface);
    width: min(1180px, calc(100vw - 48px));
    border-radius: 10px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.30);
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 64px);
    overflow: hidden;
}

/* V2: solid navy header band, white title + close. */
.modal-head[b-ciw1ew708z] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 26px;
    background: var(--c-header-bg);
    color: var(--c-header-text);
}
.modal-title[b-ciw1ew708z] {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.01em;
}
/* Board position #, secondary to the Title — Owner heading. */
.modal-title-num[b-ciw1ew708z] {
    font-size: 0.78em;
    font-weight: 400;
    color: #64748b;
}
.modal-close[b-ciw1ew708z] {
    background: transparent;
    border: 1px solid transparent;
    color: rgba(255, 255, 255, 0.85);
    font-size: 18px;
    line-height: 1;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
}
.modal-close:hover[b-ciw1ew708z] {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;
}

.modal-tabs[b-ciw1ew708z] {
    display: flex;
    gap: 4px;
    padding: 0 22px;
    border-bottom: 1px solid var(--c-border);
    background: #fafafa;
}
/* ADDENDUM A.2 — tabs match Bryan's roomier rhythm. */
.tab[b-ciw1ew708z] {
    background: transparent;
    border: none;
    padding: 14px 18px;
    font-size: 15px;
    color: var(--c-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    font-weight: 500;
}
.tab:hover:not([disabled])[b-ciw1ew708z] { color: var(--c-text); }
.tab-active[b-ciw1ew708z] {
    color: var(--c-text);
    border-bottom-color: var(--c-accent);
    font-weight: 600;
}
.tab-disabled[b-ciw1ew708z] { color: #cbd5e1; cursor: not-allowed; }

.modal-body[b-ciw1ew708z] {
    flex: 1;
    overflow-y: auto;
    /* ADDENDUM A.2 — roomier modal body to match Bryan's relaxed feel. */
    padding: 26px 32px 0;
}
/* ToDos tab: zero the body's TOP padding so the scrollport top is already flush under the frozen
   tabs. The sticky head then needs no negative top margin (flow position == pinned position, so the
   first row no longer clips). The 26px top inset is reproduced by the sticky head's own padding-top.
   Horizontal/bottom padding is unchanged (the sticky head's -32px side margins still rely on it). */
.modal-body--todos[b-ciw1ew708z] {
    padding-top: 0;
}

/* Placeholder content for tabs not yet built (Step 3/4 of Slice 3 replaces these). */
.tab-placeholder[b-ciw1ew708z] {
    color: var(--c-muted);
    font-style: italic;
    padding: 32px 0;
    text-align: center;
}
/* /Components/Modals/NotesTab.razor.rz.scp.css */
.notes-tab[b-65ht0629fp] {
    padding-bottom: 24px;
}

.notes-addrow[b-65ht0629fp] {
    background: #f9fafb;
    border: 1px solid var(--c-border);
    border-radius: 8px;
    padding: 16px 18px;
    margin-bottom: 20px;
}
.notes-add-actions[b-65ht0629fp] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
}

.notes-divider[b-65ht0629fp] {
    border: none;
    border-top: 1px solid var(--c-border);
    margin: 0 0 16px;
}

.notes-empty[b-65ht0629fp] {
    color: var(--c-muted);
    font-style: italic;
    text-align: center;
    padding: 40px 0;
}

.note-card[b-65ht0629fp] {
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: 8px;
    padding: 16px 18px;
    margin-bottom: 12px;
}
.note-body[b-65ht0629fp] {
    margin: 0 0 8px;
    font-size: 15px;
    color: var(--c-text);
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
}
.note-footer[b-65ht0629fp] {
    font-size: 12px;
    color: var(--c-muted);
    border-top: 1px dashed var(--c-border);
    padding-top: 8px;
    margin-top: 4px;
}
/* /Components/Modals/ToDoRow.razor.rz.scp.css */
.todo-row[b-gs224eymv5] {
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: 8px;
    padding: 14px 18px;
    margin-bottom: 10px;
    transition: opacity 0.15s ease, background 0.15s ease;
}
.todo-row-completed[b-gs224eymv5] {
    background: #fafafa;
}
.todo-row-completed .todo-desc[b-gs224eymv5] {
    color: var(--c-muted);
    text-decoration: line-through;
}
.todo-row-editing[b-gs224eymv5] {
    background: #fafafa;
    border-color: var(--c-accent);
}
/* Deep-linked focus row: persistent pale-green highlight + green left-accent so it's obvious which
   to-do was clicked, and stays obvious the whole time the modal is open (no fade-out). Declared
   after .todo-row-editing so it wins the background even though the focused row is also expanded.
   scroll-margin-top is a fallback so scroll-into-view lands BELOW the sticky head; the JS helper
   overrides it inline with the head's measured height. */
.todo-row-focused[b-gs224eymv5] {
    background: #ecfdf5;
    border-color: #6ee7b7;
    border-left: 3px solid var(--c-accent);
    scroll-margin-top: 180px;
}

.todo-row-main[b-gs224eymv5] {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    gap: 14px;
    align-items: center;
}
/* Draggable rows get a leading handle column. */
.todo-row-main--draggable[b-gs224eymv5] {
    grid-template-columns: auto auto 1fr auto auto;
}

/* Drag handle — the sole drag origin (SortableJS handle), so a drag never triggers the complete
   checkbox or the row's edit/notes. Grip glyph, grab cursor, muted until row hover. */
.todo-drag-handle[b-gs224eymv5] {
    cursor: grab;
    color: #cbd5e1;
    font-size: 16px;
    line-height: 1;
    user-select: none;
    flex-shrink: 0;
    padding: 0 2px;
    touch-action: none;   /* let the pointer-based fallback own the gesture on touch */
}
.todo-row:hover .todo-drag-handle[b-gs224eymv5] { color: var(--c-muted); }
.todo-drag-handle:active[b-gs224eymv5] { cursor: grabbing; }

.todo-check[b-gs224eymv5] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    margin: 0;
    flex-shrink: 0;
}

.todo-desc[b-gs224eymv5] {
    margin: 0;
    font-size: 15px;
    color: var(--c-text);
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
    min-width: 0;
}

/* Status pill — a styled <select> whose color reflects the current status. */
.status-pill[b-gs224eymv5] {
    border: 1px solid transparent;
    border-radius: 14px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: none;
    text-align: center;
    min-width: 110px;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.status-pill.status-planned[b-gs224eymv5]    { background: var(--gray-bg);   color: var(--gray-text);   border-color: #d1d5db; }
.status-pill.status-inprogress[b-gs224eymv5] { background: var(--blue-bg);   color: var(--blue-text);   border-color: #bfdbfe; }
.status-pill.status-completed[b-gs224eymv5]  { background: var(--green-bg);  color: var(--green-text);  border-color: #a7f3d0; }
.status-pill.status-cancelled[b-gs224eymv5]  { background: var(--red-bg);    color: var(--red-text);    border-color: #fecaca; }
.status-pill:focus[b-gs224eymv5] { outline: 2px solid var(--c-accent); outline-offset: 1px; }

.todo-row-actions[b-gs224eymv5] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.icon-btn[b-gs224eymv5] {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 14px;
    color: var(--c-muted);
    cursor: pointer;
    transition: background 0.1s ease, color 0.1s ease, border-color 0.1s ease;
    line-height: 1;
}
.icon-btn:hover[b-gs224eymv5] {
    background: var(--c-bg);
    border-color: var(--c-border);
    color: var(--c-text);
}
.icon-btn-danger:hover[b-gs224eymv5] {
    background: var(--red-bg);
    border-color: #fecaca;
    color: var(--red-text);
}

.confirm-line[b-gs224eymv5] {
    font-size: 12px;
    color: var(--red-text);
    font-weight: 600;
    margin-right: 4px;
}
.btn-tiny[b-gs224eymv5] {
    background: transparent;
    border: 1px solid var(--c-border);
    border-radius: 4px;
    padding: 3px 10px;
    font-size: 12px;
    cursor: pointer;
    font-family: inherit;
}
.btn-tiny:hover:not(:disabled)[b-gs224eymv5] { background: var(--c-bg); }
.btn-tiny-danger[b-gs224eymv5] {
    background: var(--red-text);
    color: #fff;
    border-color: var(--red-text);
}
.btn-tiny-danger:hover:not(:disabled)[b-gs224eymv5] { background: #991b1b; }
.btn-tiny:disabled[b-gs224eymv5] { opacity: 0.55; cursor: not-allowed; }

.todo-row-meta[b-gs224eymv5] {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 8px;
    padding-left: 32px;  /* align under description, past the checkbox */
    color: var(--c-muted);
    font-size: 12px;
}
.todo-row-meta strong[b-gs224eymv5] { color: var(--c-text); font-weight: 500; }
.note-indicator[b-gs224eymv5] {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fde68a;
    border-radius: 12px;
    padding: 1px 8px;
    font-weight: 500;
    cursor: help;
}
.meta-created[b-gs224eymv5] { margin-left: auto; font-style: italic; }
.meta-completed[b-gs224eymv5] { font-style: italic; color: var(--green-text); }

/* Edit mode */
.todo-edit-form[b-gs224eymv5] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.todo-edit-grid[b-gs224eymv5] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 14px;
}
.todo-edit-actions[b-gs224eymv5] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

@media (max-width: 800px) {
    .todo-row-main[b-gs224eymv5] {
        grid-template-columns: auto 1fr auto;
    }
    .todo-row-main--draggable[b-gs224eymv5] {
        grid-template-columns: auto auto 1fr auto;
    }
    .todo-row-actions[b-gs224eymv5] { grid-column: 1 / -1; justify-content: flex-end; }
    .todo-edit-grid[b-gs224eymv5] { grid-template-columns: 1fr; }
    .meta-created[b-gs224eymv5] { margin-left: 0; }
}
/* /Components/Modals/ToDosTab.razor.rz.scp.css */
.todos-tab[b-ohclyomldq] {
    padding-bottom: 24px;
}

/* Sticky head: the "New ToDo" add block + the hide-completed/count line stay pinned at the top of
   the scrolling to-do list, directly beneath the already-frozen modal header/tabs. The scroll
   container is .modal-body (overflow-y:auto) and the header/tabs are its frozen siblings OUTSIDE
   it, so the scrollport top already sits under the tabs — hence top:0 (not the header pixel height).
   .modal-body--todos zeroes the body's top padding so there is NO negative top margin here: the
   flow position equals the pinned position, so the first row never clips. The 26px top inset lives
   on this block's own padding-top instead. The negative LEFT/RIGHT margins (with matching side
   padding) still bleed the solid background edge-to-edge so rows scroll under with no see-through
   sliver. z-index lifts it above the normal-flow rows. */
.todos-stickyhead[b-ohclyomldq] {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--c-surface);
    margin: 0 -32px;
    padding: 26px 32px 12px;
    border-bottom: 1px solid var(--c-border);
}
/* Inside the sticky head the count line is the last element — drop its margin so the block's own
   padding-bottom controls the gap above the divider. */
.todos-stickyhead .todos-controls[b-ohclyomldq] {
    margin-bottom: 0;
}

.todos-addrow[b-ohclyomldq] {
    background: #f9fafb;
    border: 1px solid var(--c-border);
    border-radius: 8px;
    padding: 16px 18px;
    margin-bottom: 20px;
}
.addrow-grid[b-ohclyomldq] {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 0.9fr) minmax(0, 1.5fr);
    gap: 14px;
    /* Fix 1: top-align so "Assigned to" sits at the same baseline as "New ToDo"
       (was align-items: end, which bottom-aligned the columns and dropped the
       shorter right-hand cluster below the left label). */
    align-items: start;
}
.addrow-desc[b-ohclyomldq] { min-width: 0; }
.addrow-due[b-ohclyomldq] { min-width: 0; }
.addrow-assignee[b-ohclyomldq] { min-width: 0; }
/* The date input fills its column and sits on the same line as the assignee/add strip beside it. */
.addrow-due-input[b-ohclyomldq] { width: 100%; }

/* Right column control strip under "Assigned to": the UserPicker (dropdown + "+ Add user")
   and "+ Add ToDo" on one horizontal line, mirroring textarea-under-label on the left.
   NOTE: .user-picker / .user-add-panel are rendered by the child UserPicker component, so
   they carry UserPicker's CSS-isolation scope, not this file's — they're only reachable
   via ::deep (the Slice 2 V2 scoped-CSS gotcha). */
.addrow-controls[b-ohclyomldq] {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;   /* equal heights → "+ Add ToDo" matches the select / "+ Add user" */
    gap: 10px;
}
.addrow-controls[b-ohclyomldq]  .user-picker {
    order: 1;
    flex: 1 1 auto;
    min-width: 0;
}
/* Fix 2: grow "+ Add ToDo" (.btn-save = 9px vertical padding) to the strip-line height so
   it equals the taller outline "+ Add user". Stretch + zero vertical padding does it without
   hardcoding a pixel height; horizontal padding from .btn-save is preserved. */
.addrow-add-btn[b-ohclyomldq] {
    order: 2;
    padding-top: 0;
    padding-bottom: 0;
    white-space: nowrap;
}
/* When "+ Add user" expands, its panel takes its own full-width line BELOW the strip
   rather than being squeezed into the horizontal row. */
.addrow-controls[b-ohclyomldq]  .user-add-panel {
    order: 3;
    flex: 1 0 100%;
}

.todos-controls[b-ohclyomldq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding: 0 4px;
}
.hide-completed[b-ohclyomldq] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--c-text);
    cursor: pointer;
    user-select: none;
}
.hide-completed input[type="checkbox"][b-ohclyomldq] {
    width: 16px;
    height: 16px;
    margin: 0;
    cursor: pointer;
}
.todos-count[b-ohclyomldq] {
    color: var(--c-muted);
    font-size: 12px;
}

.todos-empty[b-ohclyomldq] {
    color: var(--c-muted);
    font-style: italic;
    text-align: center;
    padding: 40px 0;
}

@media (max-width: 900px) {
    .addrow-grid[b-ohclyomldq] { grid-template-columns: 1fr; }
}
/* /Components/Pages/Account/ChangePassword.razor.rz.scp.css */
.pw-main[b-vdp0bzxrsq] {
    padding: 28px;
    max-width: 460px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

.pw-card[b-vdp0bzxrsq] {
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: 8px;
    padding: 22px 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.pw-field[b-vdp0bzxrsq] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 16px;
    color: var(--c-text);
}

.pw-field span[b-vdp0bzxrsq] { color: var(--c-muted); }
.pw-field em[b-vdp0bzxrsq] { font-style: normal; font-size: 14px; }

.pw-field input[b-vdp0bzxrsq] {
    font-size: 18px;
    padding: 9px 11px;
    border: 1px solid var(--c-border);
    border-radius: 6px;
    box-sizing: border-box;
}

.pw-field input:focus[b-vdp0bzxrsq] {
    outline: none;
    border-color: var(--c-accent);
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.18);
}

.pw-card .btn-primary[b-vdp0bzxrsq] { font-size: 18px; padding: 10px 16px; }

.pw-error[b-vdp0bzxrsq] { margin: 0; }
.pw-ok[b-vdp0bzxrsq] { margin: 0 0 10px; background: #e6f4ea; color: #1e7e34; }
/* /Components/Pages/Admin/Import.razor.rz.scp.css */
/* Import page — fully self-contained scoped CSS. NOTE: .manage-main/.manage-table are scoped to
   the Manage* components (their own .razor.css), so they do NOT apply here — this page defines its
   own import-* classes. Colors reuse the global CSS custom props (--c-*) from app.css.

   Typography standard (this page): nothing below 14px. Base/table cells/inputs/selects/buttons =
   18px; help/hint text + pills = 14–16px; result subheading = 24px; page title = 32px. */

/* page title rendered in this page's own header (scope-override of the shared .app-title/.app-subtitle) */
.app-title[b-zszhf260m8] { font-size: 32px; }
.app-subtitle[b-zszhf260m8] { font-size: 16px; }

.import-main[b-zszhf260m8] {
    padding: 28px;
    max-width: 1180px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
    font-size: 18px;              /* base body size for everything that inherits */
}

.import-intro[b-zszhf260m8] {
    margin-bottom: 18px;
}

.import-intro p[b-zszhf260m8] {
    color: var(--c-muted);
    font-size: 16px;             /* instructions / help text */
    line-height: 1.5;
    margin: 0 0 12px;
}

.import-intro code[b-zszhf260m8] {
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 16px;
}

.import-file[b-zszhf260m8] {
    display: inline-block;
    margin-top: 4px;
    padding: 14px 16px;
    background: #f9fafb;
    border: 1px solid var(--c-border);
    border-radius: 8px;
    font-size: 18px;
}

.import-file input[b-zszhf260m8] {
    font-size: 18px;
}

.import-error[b-zszhf260m8] {
    margin: 14px 0;
    font-size: 18px;
}

/* ---- toolbar above the table ---- */
.import-toolbar[b-zszhf260m8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin: 20px 0 10px;
}

.import-counts[b-zszhf260m8] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;            /* the ok/warning/error summary line */
    color: var(--c-muted);
}

.import-toolbar-actions[b-zszhf260m8] {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* buttons (scope-override of the global .btn-link / .btn-primary on this page) */
.import-toolbar-actions .btn-link[b-zszhf260m8] { font-size: 18px; }
.import-toolbar-actions .btn-primary[b-zszhf260m8] { font-size: 18px; padding: 9px 18px; }

.import-note[b-zszhf260m8] {
    font-size: 16px;           /* hint line */
    margin: 0 0 12px;
}

/* ---- severity pills (small badges) ---- */
.sev[b-zszhf260m8] {
    display: inline-block;
    padding: 3px 11px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    line-height: 1.7;
    white-space: nowrap;
}

.sev-ok[b-zszhf260m8]    { background: #e6f4ea; color: #1e7e34; }
.sev-warn[b-zszhf260m8]  { background: #fff4d6; color: #8a6100; }
.sev-error[b-zszhf260m8] { background: #fbe3e1; color: #b32218; }

/* ---- the preview table ----
   The wrap is a 2-D scroll container (bounded height) so BOTH the header row and the left
   identifying columns can position:sticky against it. overflow:auto (not just overflow-x) is
   required — a horizontal-only scroller can't anchor a vertically-sticky header. */
.import-table-wrap[b-zszhf260m8] {
    overflow: auto;
    max-height: calc(100vh - 240px);   /* keep the horizontal scrollbar reachable without scrolling to the table's bottom */
    border: 1px solid var(--c-border);
    border-radius: 8px;
}

/* max-content lets the grid exceed the viewport and scroll, instead of compressing 18 columns to fit.
   min-width:100% keeps it filling the wrap when there's room to spare. */
.import-table[b-zszhf260m8] {
    width: max-content;
    min-width: 100%;
    border-collapse: collapse;
    font-size: 18px;
}

.import-table thead th[b-zszhf260m8] {
    text-align: left;
    font-size: 14px;            /* uppercase column labels — kept compact per the small-text floor */
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #374151;
    background: #f3f4f6;
    padding: 12px 13px;
    border-bottom: 2px solid var(--c-border);
    white-space: nowrap;
    position: sticky;           /* header stays visible while scrolling DOWN */
    top: 0;
    z-index: 2;
}

.import-table td[b-zszhf260m8] {
    padding: 11px 13px;
    border-bottom: 1px solid var(--c-border);
    vertical-align: top;
    font-size: 18px;
}

.import-table tbody tr:last-child td[b-zszhf260m8] {
    border-bottom: none;
}

/* zebra */
.import-table tbody tr:nth-child(even) td[b-zszhf260m8] {
    background: #fafafa;
}

/* severity row tints — declared AFTER zebra so equal-specificity rules win on order */
.import-table tbody tr.import-row-warn td[b-zszhf260m8] {
    background: #fffaf0;
}

.import-table tbody tr.import-row-error td[b-zszhf260m8] {
    background: #fdf1f0;
}

/* keep long text readable */
.import-table td:nth-child(4)[b-zszhf260m8] {   /* Title */
    max-width: 280px;
    white-space: normal;
}

.import-messages[b-zszhf260m8] {
    min-width: 240px;
}

.import-messages ul[b-zszhf260m8] {
    margin: 0;
    padding-left: 18px;
}

.import-messages li[b-zszhf260m8] {
    font-size: 16px;
    color: #6b5a00;
    line-height: 1.45;
}

.import-row-error .import-messages li[b-zszhf260m8] {
    color: #b32218;
}

/* ---- Slice 2: inline edit cells ---- */
.cell-input[b-zszhf260m8] {
    width: 100%;
    min-width: 110px;
    box-sizing: border-box;
    font: inherit;
    font-size: 18px;
    padding: 7px 10px;
    border: 1px solid var(--c-border);
    border-radius: 6px;
    background: #fff;
}

.cell-input:focus[b-zszhf260m8] {
    outline: none;
    border-color: var(--c-accent);
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.18);
}

.cell-title .cell-input[b-zszhf260m8] { min-width: 240px; }   /* Title stays roomy — NOT tightened */

/* Tighten the space hogs (req 3): the classifier selects and date inputs were far wider than
   their content needs. Fixed, content-appropriate widths → less horizontal scrolling. Long option
   text (client/assignee/category names) simply truncates in the closed select; the dropdown list
   still shows the full value. */
select.cell-input[b-zszhf260m8] {
    cursor: pointer;
    width: 150px;
    min-width: 150px;
}

.cell-date[b-zszhf260m8] {
    width: 140px;
    min-width: 140px;           /* enough for mm/dd/yyyy + the picker glyph */
}

.row-expand[b-zszhf260m8] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 5px 9px;
    cursor: pointer;
    font: inherit;
    font-size: 18px;
    color: var(--c-text);
}

.row-expand:hover[b-zszhf260m8] {
    background: var(--c-bg);
    border-color: var(--c-border);
}

.row-expand .chev[b-zszhf260m8] {
    color: var(--c-muted);
    font-size: 14px;
}

/* description editor panel under an expanded row */
.import-expand-row td[b-zszhf260m8] {
    background: #f6f8fa !important;
    padding: 14px 16px;
}

.expand-panel[b-zszhf260m8] {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.expand-panel label[b-zszhf260m8] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1 1 340px;
    font-size: 16px;
    color: var(--c-muted);
}

.expand-panel label em[b-zszhf260m8] {
    font-style: normal;
    color: #b32218;
}

.expand-panel textarea[b-zszhf260m8] {
    width: 100%;
    min-height: 80px;
    box-sizing: border-box;
    font: inherit;
    font-size: 18px;
    padding: 9px 11px;
    border: 1px solid var(--c-border);
    border-radius: 6px;
    resize: vertical;
}

.expand-panel textarea:focus[b-zszhf260m8] {
    outline: none;
    border-color: var(--c-accent);
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.18);
}

/* ---- result panel ---- */
.import-result[b-zszhf260m8] {
    margin: 18px 0;
    padding: 16px 18px;
    background: #e6f4ea;
    border: 1px solid #b7dfc2;
    border-radius: 8px;
}

.import-result h2[b-zszhf260m8] {
    margin: 0 0 10px;
    font-size: 24px;            /* subheading */
}

.import-result ul[b-zszhf260m8] {
    margin: 8px 0;
    padding-left: 22px;
    font-size: 18px;
}

/* ---- rock / parent preview cells (read-only; rock facets come from the sheet) ---- */
.cell-rock[b-zszhf260m8], .cell-parent[b-zszhf260m8] {
    font-size: 16px;
    white-space: nowrap;
}

.rock-badge[b-zszhf260m8] {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 10px;
    background: #eae4f6;
    border: 1px solid #cbbce6;
    color: #4a2f7a;
    font-size: 14px;
    font-weight: 600;
}

/* ---- sticky left identifying columns (checkbox, #, Severity, Title) ----
   Frozen as a CONTIGUOUS block so they stay put while scrolling right. Severity is included on
   purpose: a non-contiguous freeze (skipping it) would let it slide UNDER Title on scroll. The
   divider is drawn on Title, the last sticky column. Fixed px widths on the three narrow columns
   make the left offsets exact; Title keeps its natural width (not tightened). */
.import-table .col-check[b-zszhf260m8],
.import-table .col-num[b-zszhf260m8],
.import-table .col-sev[b-zszhf260m8],
.import-table .col-title[b-zszhf260m8] {
    position: sticky;
    box-sizing: border-box;
}

.import-table .col-check[b-zszhf260m8] { left: 0;     width: 48px;  min-width: 48px;  max-width: 48px; }
.import-table .col-num[b-zszhf260m8]   { left: 48px;  width: 92px;  min-width: 92px;  max-width: 92px; }
.import-table .col-sev[b-zszhf260m8]   { left: 140px; width: 128px; min-width: 128px; max-width: 128px; }
.import-table .col-title[b-zszhf260m8] { left: 268px; }   /* 48 + 92 + 128 */

/* body sticky cells sit above normal cells; opaque base bg for odd rows. The existing zebra +
   severity-tint rules target every td and (being more specific) correctly repaint even/warn/error
   sticky cells over this base, so the frozen columns keep each row's colour. */
.import-table tbody .col-check[b-zszhf260m8],
.import-table tbody .col-num[b-zszhf260m8],
.import-table tbody .col-sev[b-zszhf260m8],
.import-table tbody .col-title[b-zszhf260m8] {
    background: #fff;
    z-index: 1;
}

/* header corner cells must sit above BOTH the sticky header row (z2) and the sticky body columns (z1) */
.import-table thead th.col-check[b-zszhf260m8],
.import-table thead th.col-num[b-zszhf260m8],
.import-table thead th.col-sev[b-zszhf260m8],
.import-table thead th.col-title[b-zszhf260m8] {
    z-index: 3;
}

/* divider on the last sticky column (Title): a hairline right border + a soft shadow so the frozen
   pane reads as a distinct edge against the scrolling columns. */
.import-table .col-title[b-zszhf260m8] {
    box-shadow: inset -1px 0 0 var(--c-border), 6px 0 6px -6px rgba(0, 0, 0, 0.18);
}
/* /Components/Pages/Admin/ManageCategories.razor.rz.scp.css */
.manage-main[b-pppxfwmsey] { padding: 28px; max-width: 900px; margin: 0 auto; width: 100%; box-sizing: border-box; }
.manage-error[b-pppxfwmsey] { margin-bottom: 16px; }

.manage-toolbar[b-pppxfwmsey] { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.show-inactive[b-pppxfwmsey] {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13px; color: var(--c-text); cursor: pointer; user-select: none; margin-left: auto;
}
.show-inactive input[b-pppxfwmsey] { width: 16px; height: 16px; margin: 0; cursor: pointer; }

.create-row[b-pppxfwmsey] {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px; margin-bottom: 16px;
    background: #f9fafb; border: 1px solid var(--c-border); border-radius: 8px;
}
.create-row .name-input[b-pppxfwmsey] { flex: 1; min-width: 0; max-width: 360px; }

.manage-table[b-pppxfwmsey] { width: 100%; border-collapse: collapse; font-size: 14px; }
.manage-table th[b-pppxfwmsey] {
    text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em;
    color: var(--c-muted); padding: 8px 12px; border-bottom: 2px solid var(--c-border);
}
.manage-table td[b-pppxfwmsey] { padding: 8px 12px; border-bottom: 1px solid var(--c-border); vertical-align: middle; }
.manage-table .num[b-pppxfwmsey] { text-align: right; width: 110px; }
.row-inactive[b-pppxfwmsey] { opacity: 0.55; }

/* ---- inline rename ---- */
.name-cell[b-pppxfwmsey] { position: relative; }
.name-button[b-pppxfwmsey] {
    background: none; border: 1px solid transparent; border-radius: 6px;
    padding: 4px 8px; cursor: pointer; font: inherit; color: var(--c-text); text-align: left;
}
.name-button:hover[b-pppxfwmsey] { background: var(--c-bg); border-color: var(--c-border); }
.name-button .pencil[b-pppxfwmsey] { color: var(--c-muted); font-size: 11px; margin-left: 6px; opacity: 0; }
.name-button:hover .pencil[b-pppxfwmsey] { opacity: 1; }
.name-input.editing[b-pppxfwmsey] {
    border: 1px solid var(--c-accent);
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.18);
    padding: 4px 8px; width: 100%; max-width: 360px;
}

/* ---- disabled Deactivate (CSS ::after tooltip, mirrors FA page Gate 2e) ---- */
.actions-cell[b-pppxfwmsey] { width: 130px; }
.deactivate-disabled[b-pppxfwmsey] {
    position: relative;
    color: var(--c-muted);
    cursor: not-allowed;
    text-decoration: none;
    opacity: 0.7;
}
.deactivate-disabled:hover[b-pppxfwmsey] { text-decoration: none; color: var(--c-muted); }
.deactivate-disabled[b-pppxfwmsey]::after {
    content: attr(data-tip);
    position: absolute;
    bottom: 100%;
    right: 0;
    margin-bottom: 6px;
    width: max-content;
    max-width: 240px;
    white-space: normal;
    text-align: left;
    background: var(--c-header-bg);
    color: #fff;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.35;
    padding: 6px 8px;
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.12s ease, visibility 0s linear 0.4s;
    z-index: 60;
    pointer-events: none;
}
.deactivate-disabled:hover[b-pppxfwmsey]::after {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.12s ease 0.4s;
}
/* /Components/Pages/Admin/ManageClients.razor.rz.scp.css */
.manage-main[b-rknosmwq05] { padding: 28px; max-width: 900px; margin: 0 auto; width: 100%; box-sizing: border-box; }
.manage-error[b-rknosmwq05] { margin-bottom: 16px; }

.manage-toolbar[b-rknosmwq05] { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.show-inactive[b-rknosmwq05] {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13px; color: var(--c-text); cursor: pointer; user-select: none; margin-left: auto;
}
.show-inactive input[b-rknosmwq05] { width: 16px; height: 16px; margin: 0; cursor: pointer; }

.create-row[b-rknosmwq05] {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px; margin-bottom: 16px;
    background: #f9fafb; border: 1px solid var(--c-border); border-radius: 8px;
}
.create-row .name-input[b-rknosmwq05] { flex: 1; min-width: 0; max-width: 360px; }

.manage-table[b-rknosmwq05] { width: 100%; border-collapse: collapse; font-size: 14px; }
.manage-table th[b-rknosmwq05] {
    text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em;
    color: var(--c-muted); padding: 8px 12px; border-bottom: 2px solid var(--c-border);
}
.manage-table td[b-rknosmwq05] { padding: 8px 12px; border-bottom: 1px solid var(--c-border); vertical-align: middle; }
.manage-table .num[b-rknosmwq05] { text-align: right; width: 110px; }
.row-inactive[b-rknosmwq05] { opacity: 0.55; }

/* ---- inline rename ---- */
.name-cell[b-rknosmwq05] { position: relative; }
.name-button[b-rknosmwq05] {
    background: none; border: 1px solid transparent; border-radius: 6px;
    padding: 4px 8px; cursor: pointer; font: inherit; color: var(--c-text); text-align: left;
}
.name-button:hover[b-rknosmwq05] { background: var(--c-bg); border-color: var(--c-border); }
.name-button .pencil[b-rknosmwq05] { color: var(--c-muted); font-size: 11px; margin-left: 6px; opacity: 0; }
.name-button:hover .pencil[b-rknosmwq05] { opacity: 1; }
.name-input.editing[b-rknosmwq05] {
    border: 1px solid var(--c-accent);
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.18);
    padding: 4px 8px; width: 100%; max-width: 360px;
}

/* ---- disabled Deactivate (CSS ::after tooltip, mirrors FA page Gate 2e) ---- */
.actions-cell[b-rknosmwq05] { width: 130px; }
.deactivate-disabled[b-rknosmwq05] {
    position: relative;
    color: var(--c-muted);
    cursor: not-allowed;
    text-decoration: none;
    opacity: 0.7;
}
.deactivate-disabled:hover[b-rknosmwq05] { text-decoration: none; color: var(--c-muted); }
.deactivate-disabled[b-rknosmwq05]::after {
    content: attr(data-tip);
    position: absolute;
    bottom: 100%;
    right: 0;
    margin-bottom: 6px;
    width: max-content;
    max-width: 240px;
    white-space: normal;
    text-align: left;
    background: var(--c-header-bg);
    color: #fff;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.35;
    padding: 6px 8px;
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.12s ease, visibility 0s linear 0.4s;
    z-index: 60;
    pointer-events: none;
}
.deactivate-disabled:hover[b-rknosmwq05]::after {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.12s ease 0.4s;
}
/* /Components/Pages/Admin/ManageFunctionalAreas.razor.rz.scp.css */
/* A2: center the content under the navy header. */
.manage-main[b-xgkpsicl1x] { padding: 28px; max-width: 900px; margin: 0 auto; width: 100%; box-sizing: border-box; }
.manage-error[b-xgkpsicl1x] { margin-bottom: 16px; }

.manage-toolbar[b-xgkpsicl1x] { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.show-inactive[b-xgkpsicl1x] {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13px; color: var(--c-text); cursor: pointer; user-select: none; margin-left: auto;
}
.show-inactive input[b-xgkpsicl1x] { width: 16px; height: 16px; margin: 0; cursor: pointer; }

/* Fix 2: create-row stacks — Name, then the swatch picker, then the actions. */
.create-row[b-xgkpsicl1x] {
    display: flex; flex-direction: column; align-items: stretch; gap: 12px;
    padding: 14px 16px; margin-bottom: 16px;
    background: #f9fafb; border: 1px solid var(--c-border); border-radius: 8px;
}
.create-row .name-input[b-xgkpsicl1x] { width: 100%; max-width: 360px; }
.create-picker[b-xgkpsicl1x] { display: flex; flex-direction: column; gap: 4px; }
.create-actions[b-xgkpsicl1x] { display: flex; gap: 8px; }

.manage-table[b-xgkpsicl1x] { width: 100%; border-collapse: collapse; font-size: 14px; }
.manage-table th[b-xgkpsicl1x] {
    text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em;
    color: var(--c-muted); padding: 8px 12px; border-bottom: 2px solid var(--c-border);
}
.manage-table td[b-xgkpsicl1x] { padding: 8px 12px; border-bottom: 1px solid var(--c-border); vertical-align: middle; }
.manage-table .num[b-xgkpsicl1x] { text-align: right; width: 110px; }
.row-inactive[b-xgkpsicl1x] { opacity: 0.55; }

/* ---- inline rename ---- */
.name-cell[b-xgkpsicl1x] { position: relative; }
.name-button[b-xgkpsicl1x] {
    background: none; border: 1px solid transparent; border-radius: 6px;
    padding: 4px 8px; cursor: pointer; font: inherit; color: var(--c-text); text-align: left;
}
.name-button:hover[b-xgkpsicl1x] { background: var(--c-bg); border-color: var(--c-border); }
.name-button .pencil[b-xgkpsicl1x] { color: var(--c-muted); font-size: 11px; margin-left: 6px; opacity: 0; }
.name-button:hover .pencil[b-xgkpsicl1x] { opacity: 1; }
/* Editing affordance: clear focused border + ring so the user knows blur will save. */
.name-input.editing[b-xgkpsicl1x] {
    border: 1px solid var(--c-accent);
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.18);
    padding: 4px 8px; width: 100%; max-width: 280px;
}

/* ---- color cell + popover (popover just hosts the ColorSwatchPicker) ---- */
.color-cell[b-xgkpsicl1x] { position: relative; }
.swatch-button[b-xgkpsicl1x] {
    display: inline-flex; align-items: center; gap: 8px;
    background: none; border: 1px solid transparent; border-radius: 6px;
    padding: 4px 8px; cursor: pointer; font: inherit;
}
.swatch-button:hover[b-xgkpsicl1x] { background: var(--c-bg); border-color: var(--c-border); }
.swatch-name[b-xgkpsicl1x] { color: var(--c-text); font-size: 13px; }

.popover-backdrop[b-xgkpsicl1x] { position: fixed; inset: 0; z-index: 40; }
.color-popover[b-xgkpsicl1x] {
    position: absolute; top: 100%; left: 8px; z-index: 41; margin-top: 4px;
    padding: 10px; background: var(--c-surface); border: 1px solid var(--c-border);
    border-radius: 8px; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18); outline: none;
}

/* ---- B1 + Gate 2e Fix 1: disabled Deactivate (gray, not-allowed) with a reliable CSS tooltip
   (native title was flaky). The bubble reads from data-tip and shows ~0.4s after hover. ---- */
.actions-cell[b-xgkpsicl1x] { width: 130px; }
.deactivate-disabled[b-xgkpsicl1x] {
    position: relative;
    color: var(--c-muted);
    cursor: not-allowed;
    text-decoration: none;
    opacity: 0.7;
}
.deactivate-disabled:hover[b-xgkpsicl1x] { text-decoration: none; color: var(--c-muted); }
.deactivate-disabled[b-xgkpsicl1x]::after {
    content: attr(data-tip);
    position: absolute;
    bottom: 100%;
    right: 0;
    margin-bottom: 6px;
    width: max-content;
    max-width: 240px;
    white-space: normal;
    text-align: left;
    background: var(--c-header-bg);
    color: #fff;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.35;
    padding: 6px 8px;
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.12s ease, visibility 0s linear 0.4s;
    z-index: 60;
    pointer-events: none;
}
.deactivate-disabled:hover[b-xgkpsicl1x]::after {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.12s ease 0.4s;
}

/* ---- C5: reactivation modal ---- */
.react-backdrop[b-xgkpsicl1x] {
    position: fixed; inset: 0; background: rgba(15, 23, 41, 0.45);
    display: flex; align-items: center; justify-content: center; z-index: 1000;
}
.react-dialog[b-xgkpsicl1x] {
    background: var(--c-surface); border-radius: 10px;
    width: min(440px, calc(100vw - 32px));
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.3); overflow: hidden;
}
.react-head[b-xgkpsicl1x] {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px; border-bottom: 1px solid var(--c-border);
}
.react-head h3[b-xgkpsicl1x] { margin: 0; font-size: 16px; }
.react-close[b-xgkpsicl1x] { background: none; border: none; font-size: 16px; cursor: pointer; color: var(--c-muted); line-height: 1; }
.react-close:hover[b-xgkpsicl1x] { color: var(--c-text); }
.react-body[b-xgkpsicl1x] { padding: 20px; }
.react-msg[b-xgkpsicl1x] { margin: 0 0 14px; font-size: 14px; color: var(--c-text); }
.react-actions[b-xgkpsicl1x] {
    display: flex; justify-content: flex-end; gap: 8px;
    padding: 14px 20px; border-top: 1px solid var(--c-border); background: #f9fafb;
}
/* /Components/Pages/Admin/ManageUsers.razor.rz.scp.css */
.users-main[b-hccuznldh5] {
    padding: 28px;
    max-width: 1100px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

.users-error[b-hccuznldh5] { margin: 0 0 14px; }
.users-ok[b-hccuznldh5] { margin: 0 0 14px; background: #e6f4ea; color: #1e7e34; }

.users-toolbar[b-hccuznldh5] { margin-bottom: 14px; }

.create-panel[b-hccuznldh5] {
    background: #f9fafb;
    border: 1px solid var(--c-border);
    border-radius: 8px;
    padding: 16px 18px;
    margin-bottom: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
}

.create-grid[b-hccuznldh5] {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.create-grid label[b-hccuznldh5] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 14px;
    color: var(--c-muted);
}

.create-grid label span[b-hccuznldh5] { font-size: 14px; }

.create-grid input[type="text"][b-hccuznldh5],
.create-grid input[type="email"][b-hccuznldh5] {
    font-size: 16px;
    padding: 7px 9px;
    border: 1px solid var(--c-border);
    border-radius: 6px;
    min-width: 220px;
}

.create-admin[b-hccuznldh5] {
    flex-direction: row !important;
    align-items: center;
    gap: 6px !important;
    align-self: flex-end;
    padding-bottom: 6px;
}

.create-hint[b-hccuznldh5] { font-size: 14px; margin: 0; }

.users-table-wrap[b-hccuznldh5] { overflow-x: auto; border: 1px solid var(--c-border); border-radius: 8px; }

.users-table[b-hccuznldh5] { width: 100%; border-collapse: collapse; font-size: 16px; }

.users-table thead th[b-hccuznldh5] {
    text-align: left;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #374151;
    background: #f3f4f6;
    padding: 10px 12px;
    border-bottom: 2px solid var(--c-border);
    white-space: nowrap;
}

.users-table td[b-hccuznldh5] {
    padding: 9px 12px;
    border-bottom: 1px solid var(--c-border);
    vertical-align: middle;
}

.users-table tbody tr:last-child td[b-hccuznldh5] { border-bottom: none; }

.row-inactive td[b-hccuznldh5] { opacity: 0.55; }

.toggle[b-hccuznldh5] {
    font: inherit;
    font-size: 14px;
    padding: 4px 12px;
    border-radius: 999px;
    border: 1px solid var(--c-border);
    background: #fff;
    color: var(--c-muted);
    cursor: pointer;
    min-width: 78px;
}

.toggle.on[b-hccuznldh5] {
    background: #e6f4ea;
    border-color: #b7dfc2;
    color: #1e7e34;
    font-weight: 600;
}

.toggle:disabled[b-hccuznldh5] { cursor: not-allowed; opacity: 0.6; }

.reset-row[b-hccuznldh5] { display: inline-flex; align-items: center; gap: 8px; }

.reset-input[b-hccuznldh5] {
    font-size: 16px;
    padding: 6px 8px;
    border: 1px solid var(--c-border);
    border-radius: 6px;
    min-width: 180px;
}

.btn-save[b-hccuznldh5] {
    font: inherit; font-size: 15px; cursor: pointer;
    background: var(--c-accent); color: #fff; border: none;
    border-radius: 6px; padding: 6px 12px; font-weight: 600;
}

.btn-save:disabled[b-hccuznldh5] { opacity: 0.6; cursor: not-allowed; }
/* /Components/Pages/Board.razor.rz.scp.css */
/* App shell + navy header + .btn-primary/.btn-link + Settings dropdown now live in global
   app.css (shared with the Manage page) — see "App chrome" there. Board-specific styles below. */
/* NOTE: .show-offroadmap moved to Bar 2 (light) — its styling now lives in global app.css
   (.nav-bar2 .show-offroadmap, dark text). The old scoped white-text rules here made the label
   invisible against the light bar, so they were removed (Chunk-3 header follow-up). */

.board-main[b-rbqhabbhqm] {
    flex: 1;
    padding: 24px;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}
/* Responsive columns only: drop the 1400px cap so the auto-fill grid spans the FULL screen
   and keeps adding ~340px columns on wide displays (the cap limited auto-fill to ~3 tracks).
   Fixed 1-6 keep the centered 1400px band; card layouts are unaffected (cards stay ~340px). */
.board-main--responsive[b-rbqhabbhqm] {
    max-width: none;
}

.card-grid[b-rbqhabbhqm] {
    display: grid;
    /* Columns selector drives the count via --board-cols (set on the grid / grouped wrapper,
       default 5 if unset). minmax(0, 1fr) lets columns shrink without overflow at 5/6. */
    grid-template-columns: repeat(var(--board-cols, 5), minmax(0, 1fr));
    gap: 20px;
    align-items: stretch;
}
/* "Responsive" columns option — pre-Columns auto-fit behaviour. With the card container query
   (InitiativeCard.razor.css) these ~340px cards use the narrow stacked layout, so it never goes
   sparse or overflows. */
.card-grid--responsive[b-rbqhabbhqm] {
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
}

/* Slice B — Group-by sections: a header (label + count chip) above each group's own .card-grid. */
.board-group[b-rbqhabbhqm] { margin-bottom: 28px; }
.board-group-header[b-rbqhabbhqm] {
    display: flex; align-items: center; gap: 8px;
    margin: 0 0 12px; font-size: 14px; font-weight: 700; color: var(--c-text);
}
.board-group-count[b-rbqhabbhqm] {
    font-size: 12px; font-weight: 600; color: var(--c-muted);
    background: var(--c-bg); border: 1px solid var(--c-border);
    border-radius: 999px; padding: 1px 9px; font-variant-numeric: tabular-nums;
}

.muted[b-rbqhabbhqm] { color: var(--c-muted); }
.empty[b-rbqhabbhqm] {
    background: var(--c-surface);
    border: 1px dashed var(--c-border);
    border-radius: 8px;
    padding: 28px;
    color: var(--c-muted);
    text-align: center;
}
.empty h2[b-rbqhabbhqm] { margin: 0 0 8px; color: var(--c-text); }

/* Multi-select status filter (Bryan's checkbox panel). Toggle button + popover panel; the
   global .dropdown-backdrop (z-index 50) catches the outside click, the panel sits above it. */
.statusfilter-wrap[b-rbqhabbhqm] { position: relative; display: inline-flex; }
.statusfilter-toggle[b-rbqhabbhqm] {
    display: inline-flex; align-items: center; gap: 6px;
    text-align: left; cursor: pointer; min-width: 120px; justify-content: space-between;
}
.statusfilter-caret[b-rbqhabbhqm] { color: var(--c-muted); font-size: 10px; }
.statusfilter-panel[b-rbqhabbhqm] {
    position: absolute; top: calc(100% + 4px); left: 0; z-index: 60;
    min-width: 210px; padding: 8px;
    background: var(--c-surface); border: 1px solid var(--c-border);
    border-radius: 6px; box-shadow: 0 4px 12px rgba(15, 23, 41, 0.15);
    display: flex; flex-direction: column; gap: 1px;
}
.statusfilter-actions[b-rbqhabbhqm] {
    display: flex; gap: 10px; flex-wrap: wrap;
    padding: 2px 4px 8px; margin-bottom: 4px;
    border-bottom: 1px solid var(--c-border);
}
.statusfilter-actions button[b-rbqhabbhqm] {
    background: none; border: none; padding: 0;
    color: var(--c-accent); font-size: 12px; font-family: inherit; cursor: pointer;
}
.statusfilter-actions button:hover[b-rbqhabbhqm] { text-decoration: underline; }
.statusfilter-item[b-rbqhabbhqm] {
    display: flex; align-items: center; gap: 8px;
    padding: 5px 6px; border-radius: 4px;
    font-size: 13px; color: var(--c-text); cursor: pointer; white-space: nowrap;
}
.statusfilter-item:hover[b-rbqhabbhqm] { background: var(--c-bg); }
.statusfilter-item input[b-rbqhabbhqm] { cursor: pointer; }
/* /Components/Shared/UserPicker.razor.rz.scp.css */
.user-picker[b-p1bhe47nlf] {
    display: flex;
    gap: 8px;
    align-items: stretch;
}
.user-picker-select[b-p1bhe47nlf] {
    flex: 1;
    min-width: 0;
}

.btn-add-user[b-p1bhe47nlf] {
    background: #fff;
    color: var(--c-accent);
    border: 1px solid var(--c-accent);
    border-radius: 6px;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    transition: background 0.1s ease, color 0.1s ease;
}
.btn-add-user:hover[b-p1bhe47nlf] {
    background: var(--c-accent);
    color: #fff;
}

.user-add-panel[b-p1bhe47nlf] {
    margin-top: 8px;
    padding: 12px 14px;
    border: 1px solid var(--c-border);
    border-radius: 6px;
    background: #f9fafb;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.user-add-row[b-p1bhe47nlf] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.user-add-field[b-p1bhe47nlf] {
    display: flex;
    flex-direction: column;
}
.user-add-optional[b-p1bhe47nlf] {
    font-weight: 400;
    color: var(--c-muted);
    font-size: 11px;
    text-transform: none;
}

.user-add-actions[b-p1bhe47nlf] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

@media (max-width: 720px) {
    .user-add-row[b-p1bhe47nlf] { grid-template-columns: 1fr; }
}