/* /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] {
    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;
}

.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;
}

.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-badges[b-2lno8nzwaq] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.card-meta[b-2lno8nzwaq] {
    color: var(--c-muted);
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.meta-sep[b-2lno8nzwaq] { opacity: 0.5; }

.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;
    gap: 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; }
/* /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;
}

/* 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;
    }
}
/* /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;
}
.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;
}

/* 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);
}

.todo-row-main[b-gs224eymv5] {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    gap: 14px;
    align-items: center;
}

.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; }

/* 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-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;
}

.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, 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-assignee[b-ohclyomldq] { min-width: 0; }

/* 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/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/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;
}

.card-grid[b-rbqhabbhqm] {
    display: grid;
    /* ADDENDUM A.2 — slightly wider min-column + roomier gap to match Bryan. */
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 20px;
    align-items: stretch;
}

/* 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); }
/* /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; }
}