/* ════════════════════════════════════════════════════════════════════════════════════════════
   R2 page chrome — the ONE copy. Every page uses these classes; a page's own .razor.css holds only
   what is unique to that page. Reference pages: Users + Tags (maintenance), Sales Recap (report).

   Before 2026-09-23 each page carried its own copy of all of this (users-, tags-, sr-, ov-, lg-,
   ci-, hy-, st-, otw-, ar-, imp-, lc-, rp-, ld- …). Don't start a new copy: add a variant here.

   Contents
     1. Page frame + scroll
     2. Filter card (the box at the top of every page)
     3. Buttons and checkboxes
     4. Panels, grid cards and SfGrid fill
     5. Summary tiles
     6. Report table
     7. Text helpers, legends, section titles
     8. Maintenance modal
     9. Messages
   ════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── 1. Page frame + scroll ─────────────────────────────────────────────────────────────────── */

/* A page fills the content area and never scrolls itself: its grid or .r2-scroll does. */
.r2-page {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    padding: 0 16px 16px;
    gap: 12px;
}

/* A detail page whose whole body scrolls (no fixed grid). */
.r2-page--scrolls {
    overflow: hidden auto;
}

.r2-page--scrolls > * {
    flex-shrink: 0;
}

/* ⚠ ContentLoadingOverlay wraps its content in two block divs, which breaks the flex chain.
   Descendant selector, not ">": the overlay is not always a direct child. */
.r2-page .content-loading-overlay-shell,
.r2-page .content-loading-overlay-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* ⚠ "overflow: hidden auto" — x hidden, y scrolls. A bare overflow:hidden here would make this a
   scroll container with no scrollbar and swallow everything past the fold. */
.r2-scroll {
    flex: 1;
    min-height: 0;
    overflow: hidden auto;
}

/* Stacked blocks inside a scroll area (tiles, then panels, then a note). */
.r2-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.r2-stack > * {
    flex-shrink: 0;
}

/* ── 2. Filter card ─────────────────────────────────────────────────────────────────────────── */

.r2-filter-card {
    flex-shrink: 0;
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 8px;
    padding: 12px 14px;
}

/* Title (+ subtitle) left, counts right. */
.r2-filter-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}

.r2-filter-header > :first-child {
    min-width: 0;
}

/* A card with only a header (no filters): no rule under it. */
.r2-filter-header:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.r2-filter-title {
    margin: 0;
    font-size: 0.98rem;
    font-weight: 600;
    white-space: nowrap;
}

.r2-filter-subtitle {
    margin-top: 0.3rem;
    color: #475569;
    font-size: 0.92rem;
}

.r2-filter-subtitle--warn {
    color: #b42318;
    font-weight: 600;
}

/* One muted line between title and counts (Sales Recap's year note). */
.r2-filter-note {
    flex: 1 1 auto;
    min-width: 0;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.r2-filter-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Maintenance layout (Users/Tags): filters or a checkbox left, the action buttons right. */
.r2-filter-footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    padding-top: 12px;
    flex-wrap: wrap;
}

/* A footer whose left side is only checkboxes (no labelled inputs): centre them on the buttons
   instead of sitting them on the bottom edge (Licensor Contracts' Show Expired). */
.r2-filter-footer--center {
    align-items: center;
}

.r2-filter-footer--center > .r2-filter-footer-left {
    align-items: center;
}

.r2-filter-footer-left {
    display: flex;
    align-items: flex-end;
    gap: 10px 14px;
    flex-wrap: wrap;
    min-width: 0;
    flex: 1 1 320px;
}

/* Report layout (Sales Recap): one wrapping row of filters. Actions go last and sit right. */
.r2-filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px 14px;
    padding-top: 10px;
}

.r2-filter-row > .products-action-cluster,
.r2-filter-row > .r2-push {
    margin-left: auto;
}

.r2-search-field {
    flex: 1 1 260px;
    max-width: 520px;
}

.filter-label--checkbox {
    margin: 0;
}

/* ── 3. Buttons and checkboxes ──────────────────────────────────────────────────────────────── */
/* .products-action-cluster and .products-action-button live in app.css. */

.products-action-button {
    margin: 0;
}

.products-action-button:disabled,
.products-action-button.disabled {
    opacity: 0.6;
    box-shadow: none;
    pointer-events: none;
}

/* The dashed "Drop .xlsx to Import" button (Wholesale Pricing, Factory, Customer Pricing): drop a file
   anywhere on the page, or click it to choose one. Wired by setupDropZone in js/factory.js. */
.drop-hint {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.45rem 0.85rem;
    font-size: 0.875rem;
    color: #1d4ed8;
    border: 1px dashed #93c5fd;
    border-radius: 10px;
    background: #eff6ff;
    white-space: nowrap;
    user-select: none;
    cursor: pointer;
    line-height: 1.5;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.75), 0 2px 8px rgba(15, 23, 42, 0.10);
}

.drop-hint:hover {
    background: #dbeafe;
}

.drop-hint:focus-visible {
    outline: 2px solid #1d4ed8;
    outline-offset: 2px;
}

/* The page while a file is dragged over it. */
.r2-page.drag-over {
    outline: 3px dashed #0d6efd;
    outline-offset: -4px;
    background: rgba(13, 110, 253, 0.04);
    transition: background 0.15s;
}

/* "Reading file, please wait…" over the page while an import is read. */
.import-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

.import-overlay-card {
    background: #fff;
    border-radius: 12px;
    padding: 28px 36px;
    display: flex;
    align-items: center;
    font-size: 1rem;
    font-weight: 500;
    color: #1e293b;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.22);
}

/* A plain checkbox with its label, the height of a filter input (Sales Recap). */
.r2-check {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    margin: 0;
    font-size: 0.875rem;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.r2-check input {
    width: 16px;
    height: 16px;
    margin: 0;
}

/* Two or three mutually exclusive views (Sales Recap's Table | Cards). */
.r2-segmented {
    display: inline-flex;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 4px;
    overflow: hidden;
    min-height: 34px;
}

.r2-segmented button {
    font-size: 0.85rem;
    padding: 0 12px;
    border: 0;
    background: transparent;
    color: #495057;
    cursor: pointer;
    white-space: nowrap;
}

.r2-segmented button + button {
    border-left: 1px solid var(--bs-border-color, #dee2e6);
}

.r2-segmented button.active {
    background: var(--bs-primary, #0d6efd);
    color: #fff;
}

/* A row's icon button (edit, delete) — Users' pencil. */
.summary-edit-button {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #1d4ed8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.summary-edit-button:hover:not(:disabled) {
    background: #eff6ff;
}

.summary-edit-button--danger {
    color: #b91c1c;
}

.summary-edit-button--danger:hover:not(:disabled) {
    background: #fff1f2;
}

.summary-edit-button:disabled {
    opacity: 0.4;
}

.row-action-buttons {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* A link that looks like text in a table (PO numbers that open a drawer). */
.r2-link-button {
    border: 0;
    background: none;
    padding: 0;
    color: var(--bs-link-color, #0d6efd);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
}

.r2-link-button:hover {
    text-decoration: underline;
}

/* ── 4. Panels, grid cards and SfGrid fill ──────────────────────────────────────────────────── */

/* A white card holding one SfGrid that fills the rest of the page (Users). */
.r2-grid-card {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 12px;
    padding: 12px;
    display: flex;
    flex-direction: column;
}

/* The same fill inside a panel (Tags). */
.r2-grid-fill {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.r2-grid-card .e-grid,
.r2-grid-fill .e-grid {
    height: 100%;
    flex: 1 1 auto;
    min-height: 0;
}

.r2-grid-card .e-grid .e-gridcontent,
.r2-grid-fill .e-grid .e-gridcontent {
    overflow-x: auto;
}

.r2-grid-card .content-loading-overlay-shell,
.r2-grid-card .content-loading-overlay-body,
.r2-grid-fill .content-loading-overlay-shell,
.r2-grid-fill .content-loading-overlay-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    height: 100%;
    min-height: 0;
}

/* A grid whose whole row opens something. */
.r2-grid-clickable .e-grid .e-rowcell {
    cursor: pointer;
}

/* Side-by-side panels. Fill variant (Tags) takes the page's remaining height. */
.r2-panels {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    align-items: start;
}

.r2-panels--fill {
    flex: 1;
    min-height: 0;
    align-items: stretch;
}

.r2-panels--fill > .r2-panel {
    min-height: 0;
    overflow: hidden;
}

.r2-span2 {
    grid-column: 1 / -1;
}

.r2-panel {
    min-width: 0;
    background: #fff;
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 12px;
    padding: 12px;
    display: flex;
    flex-direction: column;
}

.r2-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 12px;
    flex-wrap: wrap;
}

.r2-panel-header > div:first-child {
    min-width: 0;
    flex: 1 1 260px;
}

.r2-panel-header h5 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: #0f172a;
}

.r2-panel-header p {
    margin: 0.3rem 0 0;
    color: #64748b;
    font-size: 0.92rem;
}

/* "Order Dashboard →" in a panel header. */
.r2-panel-link {
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

/* Collapsible panel / expandable row: an r2-expander toggles it (SO Shipments containers, Order
   Matching recon rows); a collapsed panel header sits flush. The
   bordered chevron rotates 90° when open (the look Seth approved on Order Matching, 2026-08-12). */
.r2-panel--collapsed > .r2-panel-header {
    padding-bottom: 0;
}

.r2-expander {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #fff;
    color: #475569;
    cursor: pointer;
    padding: 0;
}

.r2-expander svg {
    width: 14px;
    height: 14px;
    transition: transform 0.15s ease;
}

/* The app's primary blue (.btn-primary in app.css), so the expander matches the buttons beside it
   (Seth, 2026-09-30: the earlier teal didn't go with the theme). */
.r2-expander:hover {
    border-color: #1b6ec2;
    color: #1861ac;
    background: #eef4fb;
}

.r2-expander.open {
    border-color: #1861ac;
    background: #1b6ec2;
    color: #fff;
}

.r2-expander.open svg {
    transform: rotate(90deg);
}

@media (prefers-reduced-motion: reduce) {
    .r2-expander svg {
        transition: none;
    }
}

/* A count beside a panel title. */
.r2-count {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0 8px;
    font-size: 0.72rem;
    font-weight: 700;
    background: #e8ecf1;
    color: #5b6470;
}

.r2-count--bad { background: #f9dede; color: #b03030; }
.r2-count--warn { background: #fbefd2; color: #9a6a12; }

@media (max-width: 1100px) {
    .r2-panels {
        grid-template-columns: minmax(0, 1fr);
    }

    .r2-panels--fill {
        grid-template-rows: minmax(260px, 1fr) minmax(220px, 1fr);
    }
}

/* ── 5. Summary tiles (Sales Recap) ─────────────────────────────────────────────────────────── */

.r2-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 2px;
    background: var(--bs-border-color, #dee2e6);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}

.r2-summary--compact {
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
}

.r2-tile {
    background: var(--bs-body-bg, #fff);
    padding: 10px 14px;
    min-width: 0;
}

.r2-tile-value {
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.r2-summary--compact .r2-tile-value {
    font-size: 1.1rem;
}

.r2-tile-label {
    font-size: 0.78rem;
    color: #6c757d;
}

/* A second, smaller line of context under the label. */
.r2-tile-detail {
    font-size: 0.74rem;
    color: #495057;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* A tile that filters or navigates. */
button.r2-tile,
a.r2-tile {
    display: block;
    border: 0;
    border-radius: 0;
    text-align: left;
    font: inherit;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

button.r2-tile:hover,
a.r2-tile:hover {
    background: #f5f8fc;
}

.r2-tile.is-on {
    box-shadow: inset 0 -3px 0 var(--bs-primary, #0d6efd);
    background: #f5f8fc;
}

.r2-tile.is-off {
    opacity: 0.55;
}

/* Status stripe down the tile's left edge (the Logistics tiles). */
.r2-tile--bad,
.r2-tile--warn,
.r2-tile--ok,
.r2-tile--acc,
.r2-tile--none {
    position: relative;
    padding-left: 18px;
}

.r2-tile--bad::before,
.r2-tile--warn::before,
.r2-tile--ok::before,
.r2-tile--acc::before,
.r2-tile--none::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
}

.r2-tile--bad::before { background: #b03030; }
.r2-tile--warn::before { background: #9a6a12; }
.r2-tile--ok::before { background: #1e7a4b; }
.r2-tile--acc::before { background: #1d5c9e; }
.r2-tile--none::before { background: #6b7889; }

/* ── 6. Report table (Sales Recap) ──────────────────────────────────────────────────────────── */
/* Cells are left-aligned; add .num for figures and .ctr for centered marks, on the th AND the td. */

.r2-table-wrap {
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 8px;
    background: var(--bs-body-bg, #fff);
}

/* Inside a panel the panel is the frame, and the table scrolls sideways on its own. */
.r2-table-wrap--bare {
    border: 0;
    border-radius: 0;
    overflow-x: auto;
}

/* A panel table that scrolls vertically too; its header sticks. */
.r2-table-wrap--scroll {
    max-height: 340px;
    overflow: auto;
    scrollbar-gutter: stable;
}

.r2-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
}

.r2-table th,
.r2-table td {
    padding: 6px 10px;
    text-align: left;
    border-bottom: 1px solid #e9ecef;
    vertical-align: middle;
    white-space: nowrap;
}

.r2-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--bs-body-bg, #fff);
    font-weight: 600;
    font-size: 0.74rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #6c757d;
    box-shadow: 0 1px 0 #e9ecef;
}

.r2-table th.num,
.r2-table td.num {
    text-align: right;
}

.r2-table th.ctr,
.r2-table td.ctr {
    text-align: center;
}

.r2-table td.top {
    vertical-align: top;
}

.r2-table tbody tr:last-child td {
    border-bottom: 0;
}

.r2-table tfoot td {
    border-bottom: 0;
    border-top: 2px solid #dee2e6;
    font-weight: 600;
    background: #f8f9fa;
}

/* Dense variant for tables inside side-by-side panels. */
.r2-table--compact {
    font-size: 0.8rem;
}

.r2-table--compact th,
.r2-table--compact td {
    padding: 4px 8px;
}

.r2-table--compact th {
    font-size: 0.68rem;
}

/* A second line under a column title: which window the figure covers. */
.r2-th-sub {
    display: block;
    margin-top: 1px;
    font-weight: 500;
    font-size: 0.66rem;
    letter-spacing: 0;
    text-transform: none;
    color: #adb5bd;
}

/* A second line inside a cell. Stays on one line: squeezed, a right-aligned sentence breaks into
   ragged fragments that read as damage. */
.r2-sub {
    display: block;
    font-size: 0.75rem;
    color: #6c757d;
    line-height: 1.25;
}

.r2-table td .r2-sub {
    white-space: nowrap;
}

.r2-table td.r2-wrap,
.r2-table td.r2-wrap .r2-sub {
    white-space: normal;
}

.r2-trunc {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.r2-table tr.is-off td,
.r2-table td.is-off,
.r2-table th.is-off {
    color: #adb5bd;
}

/* A row that opens something. */
.r2-row-click {
    cursor: pointer;
}

.r2-row-click:hover td,
.r2-row-click:focus-visible td {
    background: #f5f8fc;
}

.r2-row-click:focus-visible {
    outline: 2px solid var(--bs-primary, #0d6efd);
    outline-offset: -2px;
}

/* Status edge on a row's first cell. */
.r2-row--bad td:first-child { box-shadow: inset 3px 0 0 #b03030; }
.r2-row--warn td:first-child { box-shadow: inset 3px 0 0 #9a6a12; }
.r2-row--ok td:first-child { box-shadow: inset 3px 0 0 #1e7a4b; }
.r2-row--acc td:first-child { box-shadow: inset 3px 0 0 #1d5c9e; }

.r2-empty,
.r2-loading {
    padding: 24px 4px;
    font-size: 0.9rem;
    color: #6c757d;
}

@media (max-width: 768px) {
    .r2-table-wrap {
        overflow-x: auto;
    }

    .r2-table th {
        position: static;
    }
}

/* ── 7. Text helpers, legends, section titles ───────────────────────────────────────────────── */

.r2-dim {
    color: #6c757d;
    font-size: 0.8rem;
}

.r2-note {
    margin: 0;
    color: #6c757d;
    font-size: 0.8rem;
}

.r2-bad { color: #b03030; }
.r2-warn { color: #9a6a12; }
.r2-good { color: #1e7a4b; }
.r2-strong { font-weight: 600; }

/* Small uppercase blue heading for a block inside a panel or modal (Users' Roles/Customers cards). */
.r2-section-title {
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #1d4ed8;
}

.r2-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 16px;
    font-size: 0.78rem;
    color: #6c757d;
}

.r2-legend > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.r2-legend-push {
    margin-left: auto;
}

/* ── 8. Maintenance modal (Users / Tags) ────────────────────────────────────────────────────── */

.maintenance-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 1100;
}

.maintenance-modal {
    width: min(760px, 100%);
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 24px 54px rgba(15, 23, 42, 0.22);
}

.maintenance-modal--narrow {
    width: min(560px, 100%);
}

.maintenance-modal--wide {
    width: min(1080px, 100%);
}

.maintenance-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.25rem 1rem;
    border-bottom: 1px solid #e2e8f0;
}

.maintenance-modal-header h5 {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    font-size: 1.05rem;
    color: #0f172a;
}

.maintenance-modal-header p {
    margin: 0.3rem 0 0;
    color: #64748b;
    font-size: 0.92rem;
}

.modal-close-button {
    border: 0;
    background: transparent;
    color: #64748b;
    font-size: 1.1rem;
    line-height: 1;
}

.maintenance-modal-body {
    padding: 1.25rem;
    overflow: auto;
    display: grid;
    gap: 1rem;
    min-height: 0;
}

.maintenance-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.25rem 1.2rem;
    border-top: 1px solid #e2e8f0;
}

/* A sentence at the left of the footer, buttons at the right. */
.maintenance-modal-footer-note {
    margin-right: auto;
    color: #64748b;
    font-size: 0.88rem;
}

/* A grid inside a modal: a fixed share of the viewport to fill. */
.maintenance-modal-grid {
    height: 55vh;
    min-height: 240px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.maintenance-modal-grid .e-grid {
    height: 100%;
}

.maintenance-modal-grid .content-loading-overlay-shell,
.maintenance-modal-grid .content-loading-overlay-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    height: 100%;
    min-height: 0;
}

.modal-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.modal-form-grid--single {
    grid-template-columns: 1fr;
}

/* Four fields a row, for a --wide modal with many short fields (Customer / Factory editor). */
.modal-form-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem 1rem;
}

/* A field twice as wide as its neighbours (a name, a long dropdown). */
.modal-form-grid .modal-span2 {
    grid-column: span 2;
}

/* A checkbox in a field row: put an empty .filter-label above an .r2-check, and the checkbox
   centres on the inputs beside it rather than on any hint line under them. Modal inputs are 32px
   (measured 2026-09-28), not the 34px of a filter bar. */
.modal-form-grid .r2-check {
    min-height: 32px;
}

/* One titled group of fields in a modal: an .r2-section-title, then its .modal-form-grid.
   A rule separates it from the group above. */
.modal-section {
    display: grid;
    gap: 0.5rem;
}

.modal-section + .modal-section {
    padding-top: 0.9rem;
    border-top: 1px solid #e2e8f0;
}

.modal-form-grid .filter-field {
    max-width: none;
}

.modal-form-grid .filter-field--sm {
    max-width: 220px;
}

.modal-checkbox-row {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}

/* Two cards on Users, three on the Customer / Factory editor: one row either way. */
.modal-linked-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
}

/* A tinted box grouping related values or lines inside a modal. */
.linked-summary-card {
    border: 1px solid #dbeafe;
    background: linear-gradient(180deg, #f8fbff 0%, #f1f5f9 100%);
    border-radius: 14px;
    padding: 0.85rem 0.95rem;
}

.linked-summary-label {
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #1d4ed8;
}

.linked-summary-value {
    margin-top: 0.45rem;
    color: #1e293b;
    line-height: 1.4;
}

@media (max-width: 1100px) {
    .modal-form-grid--4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .modal-form-grid,
    .modal-linked-actions {
        grid-template-columns: 1fr;
    }

    .modal-form-grid .modal-span2 {
        grid-column: auto;
    }
}

/* ── 9. Messages ────────────────────────────────────────────────────────────────────────────── */

.error-bar {
    background: #fee2e2;
    border: 1px solid #fca5a5;
    border-radius: 4px;
    padding: 6px 12px;
    font-size: 0.85rem;
    color: #b91c1c;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.error-close {
    cursor: pointer;
    font-weight: 700;
    padding-left: 12px;
}

.validation-summary {
    border: 1px solid #fecaca;
    background: #fff1f2;
    color: #b91c1c;
    border-radius: 10px;
    padding: 0.85rem 0.95rem;
    display: grid;
    gap: 0.3rem;
}

.r2-warning-box {
    border: 1px solid #fde68a;
    background: #fffbeb;
    color: #92400e;
    border-radius: 10px;
    padding: 0.85rem 0.95rem;
}

.r2-info-box {
    border: 1px solid #dbeafe;
    background: #eff6ff;
    color: #1e3a8a;
    border-radius: 10px;
    padding: 0.85rem 0.95rem;
}

/* Bootstrap alerts on a page: flat, no bottom margin (the page gap spaces them). */
.r2-page > .alert {
    margin: 0;
    flex-shrink: 0;
}