/* Organizations & Programs admin — utility classes for the master-detail
   visuals (cr-row--active, cr-orgcell, cr-drill__*). All values flow through
   the Threshold token system (threshold-tokens.css); the legacy local-prefix
   tokens were retired in sub-step 6 of the foundation rebase.
*/

.cr-orgs-page .cr-split {
    display: grid;
    grid-template-columns: minmax(420px, 1.1fr) minmax(560px, 1.4fr);
    gap: 16px;
    align-items: start;
}

@media (max-width: 1280px) {
    .cr-orgs-page .cr-split {
        grid-template-columns: 1fr;
    }
}

.cr-orgs-page .cr-pane {
    background: var(--th-paper-sunk);
    border: 1px solid var(--th-line);
    border-radius: 4px;
}

.cr-orgs-page .cr-pane__org-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--th-line);
}

.cr-orgs-page .cr-pane__org-id {
    display: flex;
    gap: 14px;
    align-items: center;
    flex: 1;
    min-width: 0;
}

.cr-orgs-page .cr-pane__org-name {
    font-weight: 600;
    font-size: 15px;
    color: var(--th-ink);
}

.cr-orgs-page .cr-pane__org-meta {
    font-size: 12px;
    color: var(--th-ink-2);
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.cr-orgs-page .cr-pane__org-meta i {
    color: var(--th-ink-3);
    margin-right: 4px;
}

.cr-orgs-page .cr-orgcell {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.cr-orgs-page .cr-orgcell__monogram {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    background: var(--th-advant-soft);
    color: var(--th-advant);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 12px;
    flex-shrink: 0;
}

.cr-orgs-page .cr-orgcell__name {
    font-weight: 500;
    font-size: 13px;
    color: var(--th-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cr-orgs-page .cr-orgcell__tenant {
    font-size: 11px;
    color: var(--th-ink-3);
}

/* Selected row in master/detail tables — primary inset shadow + tinted bg. The
   selectors target both <tr class="cr-row--active"> (for any future plain HTML
   table) and the DxGrid's data-row element (which carries the same class via
   the page's CustomizeElement callback). */
.cr-orgs-page .cr-row--active {
    background: var(--th-advant-soft) !important;
}

.cr-orgs-page .cr-row--active td:first-child,
.cr-orgs-page .cr-row--active > *:first-child {
    box-shadow: inset 3px 0 0 0 var(--th-advant);
}

/* Archived rows render dim but still legible. */
.cr-orgs-page .cr-row--archived td,
.cr-orgs-page .cr-row--archived {
    color: var(--th-ink-3);
}

/* Drillable program rows: clickable cursor + hover chevron animation. */
.cr-orgs-page .cr-row--drillable {
    cursor: pointer;
}

.cr-orgs-page .cr-row--drillable .cr-row__chev {
    color: var(--th-ink-3);
    transition: transform 120ms ease, color 120ms ease;
}

.cr-orgs-page .cr-row--drillable:hover .cr-row__chev {
    color: var(--th-advant);
    transform: translateX(2px);
}

/* Drill-down header: pill back button + breadcrumb path. */
.cr-orgs-page .cr-drill__crumbs {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.cr-orgs-page .cr-drill__back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: transparent;
    border: 1px solid var(--th-line);
    color: var(--th-ink-2);
    font-size: 12px;
    font-family: var(--th-font-sans);
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}

.cr-orgs-page .cr-drill__back:hover {
    background: var(--th-advant-soft);
    color: var(--th-advant);
    border-color: var(--th-advant);
}

.cr-orgs-page .cr-drill__path {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
}

.cr-orgs-page .cr-drill__crumb {
    color: var(--th-ink-2);
}

.cr-orgs-page .cr-drill__crumb--active {
    color: var(--th-ink);
    font-weight: 600;
}

.cr-orgs-page .cr-drill__sep {
    color: var(--th-ink-3);
    font-size: 11px;
}

.cr-orgs-page .cr-drill__context {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--th-advant-soft);
    border-bottom: 1px solid var(--th-line);
    font-size: 12.5px;
    color: var(--th-ink);
}

.cr-orgs-page .cr-drill__context i {
    color: var(--th-advant);
}

/* Editor-specific bits live here; the generic field/section/footer/row classes
   moved to app.css so they're shared with non-editor forms (Roles, Invitations,
   etc.). What stays: drawer title/subtitle/close, which are unique to the
   right-anchored side-sheet pattern these editors use. */

.cr-editor__title {
    font-weight: 700;
    font-size: 18px;
    line-height: 1.3;
    color: var(--th-ink);
}

.cr-editor__subtitle {
    font-size: 13px;
    color: var(--th-ink-2);
    margin-top: 2px;
}

.cr-editor__close {
    background: transparent;
    border: none;
    padding: 6px 8px;
    cursor: pointer;
    color: var(--th-ink-2);
    font-size: 16px;
}

.cr-editor__close:hover { color: var(--th-ink); }

/* ====================================================================
   Pane toolbar / filter row — replaces MudTable's ToolBarContent so the
   layout matches panes.jsx (toolbar row → filter row → table).
   ==================================================================== */
.cr-orgs-page .cr-pane__toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--th-line);
}

.cr-orgs-page .cr-toolbar__title {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.cr-orgs-page .cr-toolbar__title h2 {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    color: var(--th-ink);
}

.cr-orgs-page .cr-toolbar__count {
    font-size: 12px;
    color: var(--th-ink-3);
}

.cr-orgs-page .cr-pane__filters {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--th-line);
}

.cr-orgs-page .cr-pane__filters > .mud-input-control { flex: 1; }

/* Filter pill — the design treats archived as a toggle pill (no checkbox), inactive=outlined
   in muted gray, active=filled warning. Click toggles. */
.cr-orgs-page .cr-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border: 1px solid var(--th-line);
    border-radius: 999px;
    font-family: inherit;
    font-size: 12px;
    color: var(--th-ink-2);
    cursor: pointer;
    user-select: none;
    background: transparent;
    white-space: nowrap;
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}

.cr-orgs-page .cr-filter-chip:hover {
    border-color: var(--th-ink-2);
    color: var(--th-ink);
}

.cr-orgs-page .cr-filter-chip--active {
    background: rgba(242, 194, 76, 0.16);   /* warning-bg tint */
    border-color: rgba(242, 194, 76, 0.6);
    color: #b88a1d;
    font-weight: 600;
}

.cr-orgs-page .cr-filter-chip--active:hover {
    background: rgba(242, 194, 76, 0.24);
    border-color: rgba(242, 194, 76, 0.8);
    color: #b88a1d;
}

[data-bs-theme="dark"] .cr-orgs-page .cr-filter-chip--active {
    color: #f2c24c;
}

/* Cell-level helpers used inside RowTemplate */
.cr-orgs-page .cr-mono {
    font-family: var(--th-font-mono);
    font-size: 12px;
}

.cr-orgs-page .cr-text-muted { color: var(--th-ink-3); }

.cr-orgs-page .cr-progcell {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.cr-orgs-page .cr-progcell__icon {
    color: var(--th-advant);
    font-size: 16px;
    flex-shrink: 0;
}

.cr-orgs-page .cr-progcell__name {
    font-weight: 500;
    color: var(--th-ink);
}

.cr-orgs-page .cr-progcell__id {
    font-size: 11px;
    color: var(--th-ink-3);
}

/* Inline row actions — Edit/Archive icon buttons (not a kebab menu). 8px gap so the
   icons don't visually merge into a single shape; 4px was tight at MudIconButton's
   default sizing. */
.cr-orgs-page .cr-rowmenu {
    display: inline-flex;
    gap: 8px;
    align-items: center;
}

.cr-orgs-page .cr-rowmenu .mud-icon-button {
    color: var(--th-ink-3);
}

.cr-orgs-page .cr-rowmenu .mud-icon-button:hover { color: var(--th-advant); }

/* Drill chevron column — narrow rightmost cell so the > sits flush against the row's
   right edge, separated from the rowmenu icons. Only used on the program table. */
.cr-orgs-page .cr-table__chev {
    width: 32px;
    text-align: right;
    padding-right: 12px !important;
}

.cr-orgs-page .cr-table__chev .cr-row__chev {
    color: var(--th-ink-3);
    font-size: 14px;
    transition: color 120ms ease, transform 120ms ease;
}

.cr-orgs-page .cr-row--drillable:hover .cr-table__chev .cr-row__chev {
    color: var(--th-advant);
    transform: translateX(2px);
}

/* Right-aligned numeric / date / actions columns to match the design. */
.cr-orgs-page .cr-table__num,
.cr-orgs-page .cr-table__date,
.cr-orgs-page .cr-table__actions { white-space: nowrap; }

.cr-orgs-page .cr-table__date { color: var(--th-ink-2); font-size: 12px; }

/* Archive confirm dialog — title + body + footnote + gray actions strip. The design
   bands the dialog like the editor drawers: divider under the title, generous content
   padding (no scrollbars on a short message), gray fill on the actions row. */
.cr-confirm-dialog .mud-dialog-title {
    border-bottom: 1px solid var(--th-line);
    padding-bottom: 12px;
}

.cr-confirm-dialog .mud-dialog-content {
    padding-top: 20px !important;
    padding-bottom: 28px !important;
    overflow-y: visible;          /* short messages don't need a scroll container */
}

.cr-confirm-dialog .mud-dialog-actions {
    background: rgba(0, 0, 0, 0.02);
    border-top: 1px solid var(--th-line);
    padding: 12px 16px;
    gap: 8px;
    justify-content: flex-end;
    margin: 0;
}

[data-bs-theme="dark"] .cr-confirm-dialog .mud-dialog-actions {
    background: rgba(255, 255, 255, 0.02);
    border-top-color: var(--th-line);
}

.cr-confirm__body {
    font-size: 13px;
    color: var(--th-ink);
    line-height: 1.5;
    margin-bottom: 14px;
}

.cr-confirm__foot {
    font-size: 12.5px;
    color: var(--th-ink-2);
    line-height: 1.5;
}