/* Threshold app.css — chrome-adjacent rules that don't belong to the
   bespoke cc-* chrome (threshold-chrome.css) or to the legacy editor
   drawers' utility classes.

   Per ADR-0035: the layout shell (.app-shell / .topbar / .sidenav /
   .main-content) was retired in sub-step 5; the active layout grid is
   .cc-shell. What remains here:

     * The custom pager bar (.cr-pager) used by Layout/GridPagerBar.razor.
     * DxGrid theme overrides for the master-detail .cr-table tables.
     * The slide-in side-sheet (.cr-drawer) used by Admin editors.
     * Stacked-label form helpers (.cr-field, .cr-section-*, .cr-row-*,
       .cr-tag-*) used inside Admin editor drawers.
     * Loading + Blazor error chrome.

   Phase 5 removed the orphan .topbar-icon-btn / .topbar-user-btn (ThemeToggle
   + LoginDisplay rewired to .cc-theme-switch + .cc-user) and the
   .page-title-head strip (PageHeader.razor deleted; the topbar breadcrumb
   is the only orientation chrome now).

   Hard rule 1 enforced: no legacy local-prefix token references remain
   in this file; everything reads from the Threshold token system per
   Appendix A. --bs-* references stay; they resolve through the
   threshold-bootstrap.css override layer. */

/* ====================================================================
   Custom pager bar — Layout/GridPagerBar.razor. DxGrid has no
   PagerTemplate, so the bar lives outside the grid in markup and binds
   to PageIndex/PageSize. Layout mirrors the prior MudTablePager strip:

       [empty]  Rows per page: [25 v]  1-25 of 126   «  <  1 / 6  >  »
   ==================================================================== */
.cr-pager {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 10px 16px;
    border-top: 1px solid var(--th-line);
    font-size: 0.8125rem;
    color: var(--th-ink-2);
    flex-wrap: wrap;
    justify-content: flex-end;
}

.cr-pager__pagesize {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cr-pager__label {
    color: var(--th-ink-2);
    white-space: nowrap;
}

/* Pager rows-per-page combo — DxComboBox defaults to ~150px width and
   inherits Bootstrap's input-style gray fill. Force narrow + transparent
   so it reads as a tight pill matching the rest of the pager strip. */
.cr-pager__pagesize-combo.dxbl-text-edit,
.cr-pager .cr-pager__pagesize-combo {
    width: 80px !important;
    min-width: 80px !important;
    background: transparent !important;
}

.cr-pager .cr-pager__pagesize-combo .dxbl-text-edit-input {
    background: transparent !important;
    text-align: center;
}

.cr-pager__range {
    color: var(--th-ink-2);
    white-space: nowrap;
}

.cr-pager__nav {
    display: flex;
    align-items: center;
    gap: 4px;
}

.cr-pager__btn {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    color: var(--th-ink-2);
    border-radius: 4px;
    cursor: pointer;
    padding: 0;
}

.cr-pager__btn:hover:not(:disabled) {
    background: rgba(0, 0, 0, 0.05);
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .cr-pager__btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.05);
}

.cr-pager__btn:disabled {
    opacity: 0.35;
    cursor: default;
}

.cr-pager__counter {
    min-width: 36px;
    text-align: center;
    color: var(--bs-body-color);
    white-space: nowrap;
    margin: 0 4px;
}

/* ====================================================================
   DxGrid theme overrides for the .cr-table master-detail tables
   (Organizations, Programs, App Defs). The DX base theme bakes in
   several details that fight Threshold's hairline design — header gray
   wash via a ::before pseudo, 1px row borders, no row hover, etc.
   This block strips them and reapplies the design's intended look.
   ==================================================================== */

/* Strip the grid's outer border + body bg so it sits flush in the
   pane (orgs-admin.css's .cr-pane already provides the border + bg).
   --dxbl-grid-text-cell-padding-x: 1rem gives cells a 16px inset from
   the row edges so monograms / first-column content don't crash into
   the pane's left border. */
.cr-table {
    --dxbl-grid-border-width: 0;
    --dxbl-grid-bg: transparent;
    --dxbl-grid-header-color: var(--th-ink-3);
    --dxbl-grid-header-font-weight: 700;
    --dxbl-grid-hover-bg: var(--th-paper-2);
    --dxbl-grid-hover-color: inherit;
    --dxbl-grid-text-cell-padding-x: 1rem;
    --dxbl-grid-text-cell-padding-y: 0.625rem;
    border: 0 !important;
}

/* Selectable rows (orgs grid + programs grid both have
   AllowSelectRowByClick="true"). Force pointer cursor so users see
   the row as clickable. The default DX cell cursor is text/I-beam
   on cell text. */
.cr-table .dxbl-grid-table > tbody > tr {
    cursor: pointer;
}

/* DX paints headers with a 5%-opacity currentcolor wash via a ::before
   pseudo on every header cell — that's the visible gray. Hide it. */
.cr-table .dxbl-grid-table > thead .dxbl-grid-header-row > th:not(.dxbl-grid-empty-cell)::before {
    display: none !important;
}

/* Header caption styling — uppercase, muted, smaller font, no gray fill. */
.cr-table .dxbl-grid-header-row > th {
    background: transparent !important;
    border-bottom: 1px solid var(--th-line) !important;
    border-top: 0 !important;
}

.cr-table .dxbl-grid-header-content {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.6875rem;
    color: var(--th-ink-3);
    font-weight: 700;
}

/* Strip per-row borders. DX uses --dxbl-grid-border-width on cell
   bottom-borders; the override above zeros that, but vertical lines
   on cells need explicit removal too. */
.cr-table .dxbl-grid-table > tbody > tr > td {
    border: 0 !important;
}

/* Row hover — DX leaves this empty by default; wire it through our
   own token so rows light up subtly when the cursor passes over. */
.cr-table .dxbl-grid-table > tbody > tr:hover > td {
    background: var(--th-paper-2);
}

/* Selected row — zero DX's default heavy gray so .cr-row--active
   (painted via CustomizeElement, styled in orgs-admin.css) wins. */
.cr-table .dxbl-grid-selected-row,
.cr-table .dxbl-grid-focused-row {
    background: transparent !important;
}

.cr-orgs-page .dxbl-grid-selected-row.cr-row--active,
.cr-orgs-page .dxbl-grid-focused-row.cr-row--active {
    background: var(--th-advant-soft) !important;
}

.cr-orgs-page .cr-row--drillable {
    cursor: pointer;
}

/* Centered numeric / status columns (Programs, App Defs, etc). DX has
   per-column TextAlignment but the cell content templates use raw markup
   that ignores it; this targets the cell wrapper directly. */
.cr-table .cr-cell-center {
    text-align: center;
}

/* ====================================================================
   Side-sheet drawer — replaces MudDrawer Variant=Temporary Anchor=Right.
   Pure CSS slide-in: a backdrop covers the page and the sheet slides in
   from the right when .cr-drawer--open is on the panel. Uses the bootstrap
   z-index scale (1040 backdrop, 1050 panel) so it sits above DevExpress
   popovers but below toasts (1090).
   ==================================================================== */
.cr-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1040;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease-out;
}

.cr-drawer-backdrop--visible {
    opacity: 1;
    pointer-events: auto;
}

.cr-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 560px;
    max-width: 100vw;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
    transform: translateX(100%);
    transition: transform 0.2s ease-out;
    z-index: 1050;
    display: flex;
    flex-direction: column;
}

.cr-drawer--open {
    transform: none;
}

.cr-drawer--narrow { width: 520px; }

.cr-editor__close {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border: 0;
    background: transparent;
    color: var(--th-ink-2);
    border-radius: 4px;
    cursor: pointer;
}

.cr-editor__close:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .cr-editor__close:hover {
    background: rgba(255, 255, 255, 0.05);
}

.cr-editor__title {
    font-size: 1.0625rem;
    font-weight: 600;
}

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

/* Content wrapper around @Body in MainLayout.razor — gives normal page
   content a 24px horizontal margin so it doesn't hug the sidebar / right
   edge. Flex column + min-height anchors <Footer/> at the viewport bottom
   on short pages (margin-top:auto on .page-footer pushes it down). 4px top
   padding gives the "tiny sliver" gap between the topbar and the page
   content. */

.content-padding {
    padding: 4px 24px 0;
    /* Definite height — equals .main-content's grid-row size. A `min-height`
     * here would only set a minimum; flex children with `flex: 1; min-height: 0`
     * couldn't shrink because the container itself wasn't bounded. The
     * form-builder shell (which OWNS internal scroll) relies on a bounded
     * container; regular admin pages still scroll via .main-content's
     * overflow-y: auto when their natural content exceeds this box. */
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Page footer — light-subtle fill with a 1px top border, edge-to-edge across
   the content area (negative-24px horizontal break-out cancels .content-padding's
   horizontal inset). Legacy chrome retained for compatibility with destinations
   that still render Layout/Footer.razor's old markup; the new chrome surface is
   Features/Chrome/ThresholdFooter.razor mounted by MainLayout. */

.page-footer {
    margin: auto -24px 0;
    padding: 14px 24px;
    background-color: rgba(0, 0, 0, 0.02);
    border-top: 1px solid var(--th-line);
    color: var(--th-ink-2);
    font-size: 0.75rem;
}

[data-bs-theme="dark"] .page-footer {
    background-color: rgba(255, 255, 255, 0.02);
}


#blazor-error-ui {
    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 {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}

.loading-progress {
    position: absolute;
    display: block;
    width: 8rem;
    height: 8rem;
    inset: 20vh 0 auto 0;
    margin: 0 auto 0 auto;
}

.loading-progress circle {
    fill: none;
    stroke: #e0e0e0;
    stroke-width: 0.6rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}

.loading-progress circle:last-child {
    stroke: var(--th-advant); /* matches --bs-primary */
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
}

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

.loading-progress-text:after {
    content: var(--blazor-load-percentage-text, "Loading");
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

/* ====================================================================
   Form fields — stacked-label pattern. Use anywhere
   you'd otherwise reach for a labeled input.

       <div class="cr-field">
           <label class="cr-field-label cr-field-label-required">Email</label>
           <DxTextBox @bind-Text="..." />
           <div class="cr-field-helper">Helper text or validation message.</div>
       </div>

   Section headers + dividers above groups of fields:

       <div class="cr-section-header">Identity</div>
       <div class="cr-section-desc">Description.</div>
       <hr class="cr-section-divider" />

   Form footers (Cancel / Save) get the cr-form-footer fill so they read
   as a separate strip at the bottom of a panel/drawer.
   ==================================================================== */
.cr-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cr-field-label {
    font-weight: 600;
    font-size: 13px;
    color: var(--th-ink);
}

.cr-field-label-required::after {
    content: " *";
    color: var(--th-risk);
}

.cr-field-helper {
    font-size: 11.5px;
    color: var(--th-ink-2);
}

.cr-field-error {
    font-size: 11.5px;
    color: var(--th-risk);
}

.cr-section-header {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--th-ink);
    margin-bottom: 4px;
}

.cr-section-desc {
    font-size: 12.5px;
    color: var(--th-ink-2);
    margin-bottom: 8px;
}

.cr-section-divider {
    border: none;
    border-top: 1px solid var(--th-line);
    margin: 0 0 16px 0;
}

.cr-row {
    display: grid;
    gap: 12px;
}

.cr-row--two { grid-template-columns: 1fr 1fr; }
.cr-row--three { grid-template-columns: 2fr 1fr 1fr; }

@media (max-width: 600px) {
    .cr-row--two,
    .cr-row--three { grid-template-columns: 1fr; }
}

.cr-form-footer {
    border-top: 1px solid var(--th-line);
    background: rgba(0, 0, 0, 0.02);
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

[data-bs-theme="dark"] .cr-form-footer {
    background: rgba(255, 255, 255, 0.02);
}

/* ====================================================================
   Tag chip composer — used by ApplicationDefinitionEditor's Tags section.
   Lifted verbatim from the design's styles.css lines 880–942 (chip well,
   pill chip, key/sep/val spans, X removal button, key:value composer grid).
   ==================================================================== */
.cr-tag-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 32px;
    padding: 8px 10px;
    border: 1px dashed var(--th-line-2);
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.02);
    align-items: center;
}

[data-bs-theme="dark"] .cr-tag-chips {
    background: rgba(255, 255, 255, 0.02);
}

.cr-tag-chips__empty {
    font-size: 12px;
    color: var(--th-ink-3);
    font-style: italic;
}

.cr-tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 0;
    padding: 3px 4px 3px 10px;
    height: 26px;
    background: var(--bs-secondary-bg);
    border: 1px solid var(--th-line);
    border-radius: 999px;
    font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 11.5px;
    line-height: 1;
}

.cr-tag-chip:hover { border-color: var(--th-line-2); }

.cr-tag-chip__key {
    font-weight: 600;
    color: var(--th-advant);
}

.cr-tag-chip__sep {
    margin: 0 2px;
    color: var(--th-ink-3);
}

.cr-tag-chip__val { color: var(--th-ink-2); }

.cr-tag-chip__rm {
    margin-left: 6px;
    width: 18px;
    height: 18px;
    border: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: transparent;
    color: var(--th-ink-3);
    font-size: 10px;
    cursor: pointer;
}

.cr-tag-chip__rm:hover {
    background: var(--th-risk);
    color: #fff;
}

.cr-tag-composer {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

.cr-tag-composer__inputs {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 6px;
}

.cr-tag-composer__sep {
    color: var(--th-ink-3);
    font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 14px;
    font-weight: 600;
}