/* ── Blazor framework styles ──────────────────────────────────────────── */

h1:focus {
    outline: none;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    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;
    }

.dark #blazor-error-ui {
    background: #3f3f00;
    color: #fef08a;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.4);
}

.dark #blazor-error-ui .dismiss {
    color: #fef08a;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

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

.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem 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: #1b6ec2;
            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");
    }

code {
    color: #c02d76;
}

/* ── Blazor Dialog CSS ────────────────────────────────────────────── */
.blazor-dialog-container {
    position: fixed;
    z-index: 1050;
    inset: 0;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(2px);
}

.blazor-dialog-centered {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    padding: 1rem;
}

.blazor-dialog-content-wrapper {
    position: relative;
    background-color: var(--color-surface);
    margin: auto;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg, 0.75rem);
    width: min(90%, 500px);
    box-shadow: 0 20px 60px -12px rgba(0, 0, 0, 0.25);
    animation: dialog-slide-in 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.blazor-dialog-content {
    display: flex;
    flex-direction: column;
}

.blazor-dialog-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--color-border);
    border-radius: var(--radius-lg, 0.75rem) var(--radius-lg, 0.75rem) 0 0;
    background-color: var(--color-surface-raised);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.blazor-dialog-header > i.fas:not(.fa-times) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.875rem;
    height: 1.875rem;
    border-radius: 0.5rem;
    background-color: color-mix(in srgb, currentColor 14%, transparent);
    font-size: 0.875rem;
    flex-shrink: 0;
}

.blazor-dialog-title {
    margin-bottom: 0;
    line-height: 1.4;
    flex: 1;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.blazor-dialog-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    margin-inline-start: auto;
    background: transparent;
    border: none;
    border-radius: var(--radius);
    font-size: 1.125rem;
    line-height: 1;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
}

.blazor-dialog-close:hover {
    color: var(--color-text-primary);
    background-color: var(--color-surface-raised);
}

.blazor-dialog-body {
    position: relative;
    flex: 1 1 auto;
    padding: 1.5rem 1.5rem;
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--color-text-secondary);
}

.blazor-dialog-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.875rem 1.25rem;
    border-top: 1px solid var(--color-border);
    border-radius: 0 0 var(--radius-lg, 0.75rem) var(--radius-lg, 0.75rem);
    background-color: var(--color-surface-raised);
}

.blazor-dialog-footer .btn {
    flex: 0 0 auto;
    min-width: 5rem;
    max-width: none;
    padding: 0.4rem 1.5rem;
    font-size: 0.8125rem;
    font-weight: 500;
}

@media (min-width: 576px) {
    .blazor-dialog-content-wrapper {
        width: min(90%, 500px);
    }
}

@media (min-width: 992px) {
    .blazor-dialog-content-wrapper-large {
        width: min(90%, 800px);
    }
}

@media (min-width: 1416px) {
    .blazor-dialog-content-wrapper-xlarge {
        width: min(90%, 1200px);
    }
}

.blazor-dialog-content-wrapper-small {
    width: min(90%, 340px);
}

@keyframes dialog-slide-in {
    from { opacity: 0; transform: translateY(-1rem) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Bootstrap Grid & Component Compatibility Shim
   Phase 5G removed Bootstrap CSS. These rules restore structural semantics
   for all .razor files that use .row / .col-* / .card / .btn-* / .d-*
   without modifying any markup. Uses ATQ design tokens for dark mode support.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Section 1: Grid System ──────────────────────────────────────────────── */

.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -0.5rem;
    margin-left:  -0.5rem;
}

.no-gutters {
    margin-right: 0;
    margin-left:  0;
}

.no-gutters > [class*="col-"],
.no-gutters > [class="col"] {
    padding-right: 0;
    padding-left:  0;
}

[class*="col-"] {
    padding-right: 0.5rem;
    padding-left:  0.5rem;
    width: 100%;
    flex-shrink: 0;
}

.col    { flex: 1 0 0%; }
.col-1  { width:  8.333333%; }
.col-2  { width: 16.666667%; }
.col-3  { width: 25%; }
.col-4  { width: 33.333333%; }
.col-5  { width: 41.666667%; }
.col-6  { width: 50%; }
.col-7  { width: 58.333333%; }
.col-8  { width: 66.666667%; }
.col-9  { width: 75%; }
.col-10 { width: 83.333333%; }
.col-11 { width: 91.666667%; }
.col-12 { width: 100%; }

@media (min-width: 576px) {
    .col-sm-1  { width:  8.333333%; }
    .col-sm-2  { width: 16.666667%; }
    .col-sm-3  { width: 25%; }
    .col-sm-4  { width: 33.333333%; }
    .col-sm-5  { width: 41.666667%; }
    .col-sm-6  { width: 50%; }
    .col-sm-7  { width: 58.333333%; }
    .col-sm-8  { width: 66.666667%; }
    .col-sm-9  { width: 75%; }
    .col-sm-10 { width: 83.333333%; }
    .col-sm-11 { width: 91.666667%; }
    .col-sm-12 { width: 100%; }
}

@media (min-width: 768px) {
    .col-md-1  { width:  8.333333%; }
    .col-md-2  { width: 16.666667%; }
    .col-md-3  { width: 25%; }
    .col-md-4  { width: 33.333333%; }
    .col-md-5  { width: 41.666667%; }
    .col-md-6  { width: 50%; }
    .col-md-7  { width: 58.333333%; }
    .col-md-8  { width: 66.666667%; }
    .col-md-9  { width: 75%; }
    .col-md-10 { width: 83.333333%; }
    .col-md-11 { width: 91.666667%; }
    .col-md-12 { width: 100%; }
}

@media (min-width: 992px) {
    .col-lg-1  { width:  8.333333%; }
    .col-lg-2  { width: 16.666667%; }
    .col-lg-3  { width: 25%; }
    .col-lg-4  { width: 33.333333%; }
    .col-lg-5  { width: 41.666667%; }
    .col-lg-6  { width: 50%; }
    .col-lg-7  { width: 58.333333%; }
    .col-lg-8  { width: 66.666667%; }
    .col-lg-9  { width: 75%; }
    .col-lg-10 { width: 83.333333%; }
    .col-lg-11 { width: 91.666667%; }
    .col-lg-12 { width: 100%; }
}

/* ── Section 2: Display Utilities ────────────────────────────────────────── */

.d-none   { display: none   !important; }
.d-block  { display: block  !important; }
.d-flex   { display: flex   !important; }
.d-inline { display: inline !important; }

/* Bootstrap responsive display: d-{bp}-{value} applies from that breakpoint UP */
@media (min-width: 576px) {
    .d-sm-none  { display: none  !important; }
    .d-sm-block { display: block !important; }
    .d-sm-flex  { display: flex  !important; }
}

@media (min-width: 768px) {
    .d-md-none  { display: none  !important; }
    .d-md-block { display: block !important; }
    .d-md-flex  { display: flex  !important; }
}

/* ── Section 3: Card Component ───────────────────────────────────────────── */

.card {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: 0 1px 2px rgba(0,0,0,.07);
    margin-bottom: 1rem;
}

.card-header {
    padding: 0.25rem 1rem;
    border-bottom: 1px solid var(--color-border);
    background-color: var(--color-surface-raised);
    border-top-left-radius: var(--radius);
    border-top-right-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.card-body {
    padding: 0.75rem 1rem;
}

.card-footer {
    padding: 0.625rem 1rem;
    border-top: 1px solid var(--color-border);
    background-color: var(--color-surface-raised);
    border-bottom-left-radius: var(--radius);
    border-bottom-right-radius: var(--radius);
}

.card-title {
    font-size: 0.9375rem;
    font-weight: 500;   /* operator: form card titles → 500 */
    color: var(--color-text-primary);
    margin: 0;
}

.card-tools {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: auto;
}

[dir="rtl"] .card-tools {
    margin-left: 0;
    margin-right: auto;
}

/* ── RTL: flip select dropdown chevron to left side + right-align text ── */
[dir="rtl"] select {
    background-position: left 0.5rem center;
    padding-inline-start: 0.75rem;
    padding-inline-end: 1.25rem;
    direction: rtl;
    text-align: right;
    text-align-last: right;
}

[dir="rtl"] select option {
    direction: rtl;
    text-align: right;
}

.card.border-info    { border-color: var(--color-info);    }
.card.border-success { border-color: var(--color-success); }
.card.border-danger  { border-color: var(--color-danger);  }

/* ── Nested toolbar card inside main card — strip chrome ───────────────── */
.card .card.border-info,
.card .card.border-success,
.card .card.border-danger {
    border: none;
    background: transparent;
    box-shadow: none;
    margin: 0;
    border-radius: 0;
}

/* ── Outer card flex-row: header + toolbar on SAME LINE, body below ──────── */
.card:has(> .card.border-info),
.card:has(> .card.border-success),
.card:has(> .card.border-danger) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.card:has(> .card.border-info) > .card-header,
.card:has(> .card.border-success) > .card-header,
.card:has(> .card.border-danger) > .card-header {
    flex: 1 1 auto;
    min-width: 0;
    border-bottom: none;
}

.card:has(> .card.border-info) > .card.border-info,
.card:has(> .card.border-success) > .card.border-success,
.card:has(> .card.border-danger) > .card.border-danger {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}

/* Toolbar inner containers — flat flex row of buttons */
.card .card.border-info > .card-header,
.card .card.border-success > .card-header,
.card .card.border-danger > .card-header,
.card .card.border-info > .card-body,
.card .card.border-info > .col-md-12 {
    background-color: transparent;
    border: none;
    border-radius: 0;
    padding: 0.15rem 0.5rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
}

/* Force card-body and container children to new row (100% width) */
.card:has(> .card.border-info) > .card-body,
.card:has(> .card.border-info) > .container-fluid,
.card:has(> .card.border-success) > .card-body,
.card:has(> .card.border-danger) > .card-body {
    flex: 0 0 100%;
    border-top: 1px solid var(--color-border);
}

/* ── atq-hdr-actions: transaction engine button group inside card-header ── */
.atq-hdr-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    margin-inline-start: auto;
    margin-inline-end: 0.5rem;
}

/* ── Header action buttons — solid colored, wide ERP toolbar style ──────── */
.atq-hdr-actions .btn,
.card .card.border-info .btn,
.card .card.border-success .btn,
.card .card.border-danger .btn {
    height: var(--field-height);
    min-width: calc(var(--field-height) * 2.5);
    padding: 0 0.875rem;
    font-size: var(--label-font-size);
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    line-height: 1;
    font-weight: 500;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
    transition: filter 0.12s, box-shadow 0.12s;
}

/* Transaction navigator — dark pill button group (media-player style) */
.atq-trns-nav {
    display: inline-flex;
    align-items: center;
    background: var(--color-surface-sunken, #1e293b);
    border-radius: var(--radius-md, 0.375rem);
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.15);
}
.atq-trns-nav button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--field-height) * 0.9);
    height: calc(var(--field-height) * 0.85);
    padding: 0;
    margin: 0;
    border: none;
    border-inline-end: 1px solid rgba(255,255,255,0.1);
    background: transparent;
    color: #fff;
    cursor: pointer;
    font-size: 0.7rem;
    transition: background 0.12s;
}
.atq-trns-nav button:last-child { border-inline-end: none; }
.atq-trns-nav button:not(:disabled):hover { background: rgba(255,255,255,0.12); }
.atq-trns-nav button:not(:disabled):active { background: rgba(255,255,255,0.2); }
.atq-trns-nav button:disabled { opacity: 0.5; cursor: default; }

/* Divider between navigator and action buttons */
.atq-hdr-actions .atq-nav-divider {
    width: 1px;
    height: calc(var(--field-height) * 0.7);
    background: var(--color-border);
    margin: 0 0.25rem;
    flex-shrink: 0;
}

/* Solid Info — Save, Clear, Reset, Plus */
.atq-hdr-actions .btn-info,
.atq-hdr-actions .btn-outline-info,
.atq-hdr-actions .btn-primary,
.card .card.border-info .btn-info,
.card .card.border-info .btn-outline-info,
.card .card.border-info .btn-primary {
    background: var(--color-info);
    color: #fff;
    border: 1px solid var(--color-info);
}
.atq-hdr-actions .btn-info:not(:disabled):hover,
.atq-hdr-actions .btn-outline-info:not(:disabled):hover,
.atq-hdr-actions .btn-primary:not(:disabled):hover,
.card .card.border-info .btn-info:not(:disabled):hover,
.card .card.border-info .btn-outline-info:not(:disabled):hover,
.card .card.border-info .btn-primary:not(:disabled):hover {
    filter: brightness(0.88);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
}

/* Solid Danger — Delete, Minus */
.atq-hdr-actions .btn-danger,
.atq-hdr-actions .btn-outline-danger,
.card .card.border-info .btn-danger,
.card .card.border-info .btn-outline-danger {
    background: var(--color-danger);
    color: #fff;
    border: 1px solid var(--color-danger);
}
.atq-hdr-actions .btn-danger:not(:disabled):hover,
.atq-hdr-actions .btn-outline-danger:not(:disabled):hover,
.card .card.border-info .btn-danger:not(:disabled):hover,
.card .card.border-info .btn-outline-danger:not(:disabled):hover {
    filter: brightness(0.88);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
}

/* Solid Success — Save */
.atq-hdr-actions .btn-success,
.atq-hdr-actions .btn-outline-success,
.card .card.border-info .btn-success,
.card .card.border-info .btn-outline-success,
.card .card.border-success .btn-success,
.card .card.border-success .btn-outline-success {
    background: var(--color-success);
    color: #fff;
    border: 1px solid var(--color-success);
}
.atq-hdr-actions .btn-success:not(:disabled):hover,
.atq-hdr-actions .btn-outline-success:not(:disabled):hover,
.card .card.border-info .btn-success:not(:disabled):hover,
.card .card.border-info .btn-outline-success:not(:disabled):hover {
    filter: brightness(0.88);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
}

/* Solid Warning */
.atq-hdr-actions .btn-warning,
.card .card.border-info .btn-warning {
    background: var(--color-warning);
    color: #fff;
    border: 1px solid var(--color-warning);
}
.atq-hdr-actions .btn-warning:not(:disabled):hover,
.card .card.border-info .btn-warning:not(:disabled):hover {
    filter: brightness(0.88);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
}

/* Solid Secondary — Print, Exit */
.atq-hdr-actions .btn-secondary,
.atq-hdr-actions .btn-dark,
.atq-hdr-actions .btn-outline-secondary,
.card .card.border-info .btn-secondary,
.card .card.border-info .btn-dark,
.card .card.border-info .btn-outline-secondary {
    background: var(--color-text-secondary);
    color: #fff;
    border: 1px solid var(--color-text-secondary);
}
.atq-hdr-actions .btn-secondary:not(:disabled):hover,
.atq-hdr-actions .btn-dark:not(:disabled):hover,
.atq-hdr-actions .btn-outline-secondary:not(:disabled):hover,
.card .card.border-info .btn-secondary:not(:disabled):hover,
.card .card.border-info .btn-dark:not(:disabled):hover,
.card .card.border-info .btn-outline-secondary:not(:disabled):hover {
    filter: brightness(0.85);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
}

/* Disabled state for all header buttons */
.atq-hdr-actions .btn:disabled,
.card .card.border-info .btn:disabled,
.card .card.border-success .btn:disabled,
.card .card.border-danger .btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
}

/* Icon sizing inside header buttons */
.atq-hdr-actions .btn i,
.card .card.border-info .btn i,
.card .card.border-success .btn i,
.card .card.border-danger .btn i {
    font-size: calc(var(--label-font-size) * 1.15);
    line-height: 1;
}

/* ── Card tools (maximize/collapse) — softer ghost style ── */
.card-tools .btn-tool {
    opacity: 0.5;
    transition: opacity 0.15s;
}
.card-tools .btn-tool:hover {
    opacity: 1;
}

/* ── Section 4: Alert Component ──────────────────────────────────────────── */

.alert {
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    border: 1px solid transparent;
    margin-bottom: 1rem;
}

.alert-success {
    background-color: rgb(var(--color-success-rgb) / 0.1);
    border-color:     rgb(var(--color-success-rgb) / 0.3);
    color: var(--color-success);
}

.alert-danger {
    background-color: rgb(var(--color-danger-rgb) / 0.1);
    border-color:     rgb(var(--color-danger-rgb) / 0.3);
    color: var(--color-danger);
}

/* ── Section 5: Spinner ──────────────────────────────────────────────────── */

.spinner-grow,
.spinner-border {
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    margin: 0 0.25rem;
}

.spinner-grow {
    background-color: currentColor;
    opacity: 0;
    animation: spinner-grow 0.75s linear infinite;
}

.spinner-border {
    border: 0.2em solid currentColor;
    border-right-color: transparent;
    animation: spinner-border 0.75s linear infinite;
}

@keyframes spinner-grow {
    0%   { transform: scale(0); opacity: 0; }
    50%  { opacity: 1; }
    100% { transform: scale(1); opacity: 0; }
}

@keyframes spinner-border {
    to { transform: rotate(360deg); }
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
}

/* ── Section 6: Buttons & Utilities ──────────────────────────────────────── */

.btn-tool {
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    width: var(--field-height);
    height: var(--field-height);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--color-text-secondary);
    line-height: 1;
    transition: background-color 0.15s, color 0.15s;
}
.btn-tool:hover {
    color: var(--color-text-primary);
    background-color: var(--color-surface-raised);
}

.btn-sm {
    padding: 0.25rem 0.625rem;
    font-size: 0.8125rem;
    border-radius: var(--radius-sm);
}

.btn-primary {
    background-color: var(--color-primary);
    color: var(--color-primary-text);
    border: 1px solid var(--color-primary);
}

.btn-success {
    background-color: var(--color-success);
    color: #fff;
    border: 1px solid var(--color-success);
}

.btn-danger {
    background-color: var(--color-danger);
    color: #fff;
    border: 1px solid var(--color-danger);
}

.btn-secondary {
    background-color: var(--color-text-secondary);
    color: #fff;
    border: 1px solid var(--color-text-secondary);
}

.btn-info {
    background-color: var(--color-info);
    color: #fff;
    border: 1px solid var(--color-info);
}

.btn-warning {
    background-color: var(--color-warning);
    color: #fff;
    border: 1px solid var(--color-warning);
}

.btn-outline-success {
    color: var(--color-success);
    border: 1px solid var(--color-success);
    background: transparent;
}

.btn-outline-secondary {
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
    background: transparent;
}

.btn-outline-info {
    color: var(--color-info);
    border: 1px solid var(--color-info);
    background: transparent;
}

.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.img-fluid {
    max-width: 100%;
    height: auto;
}

.justify-content-center { justify-content: center !important; }

.col-form-label,
.col-form-label-sm {
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: 0;
    font-size: var(--label-font-size);
    font-weight: 500;
    /* operator: all form labels use #191e25 (tokenized so it flips in dark mode) */
    color: var(--color-label);
    line-height: var(--field-height);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.col-form-label-sm {
    font-size: var(--label-font-size);
}

/* ── Field row spacing inside card-body ─── */
.card-body .row.no-gutters {
    margin-bottom: 0;
}

.card-body .row.no-gutters:last-child {
    margin-bottom: 0;
}

.pr-2 { padding-right: 0.5rem !important; }
.pl-2 { padding-left:  0.5rem !important; }
.pt-2 { padding-top:   0.5rem !important; }
.pb-2 { padding-bottom: 0.5rem !important; }
.p-2  { padding: 0.5rem !important; }
.mb-0 { margin-bottom: 0 !important; }
.mt-0 { margin-top:    0 !important; }
.mb-3 { margin-bottom: 1rem !important; }

.bg-gradient-info {
    background: linear-gradient(180deg, var(--color-info), rgb(var(--color-info-rgb) / 0.7));
    color: #fff;
}

/* ── AtqComboBox ──────────────────────────────────────────────────────────── */

.atq-combo-dropdown {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    /* Modern layered elevation so the panel reads as floating above the grid */
    box-shadow: 0 12px 28px -8px rgba(0,0,0,0.18),
                0 4px 10px -6px rgba(0,0,0,0.12);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.dark .atq-combo-dropdown {
    box-shadow: 0 14px 34px -8px rgba(0,0,0,0.55),
                0 6px 14px -6px rgba(0,0,0,0.42);
}

.atq-combo-item {
    padding: 0.25rem 0.5rem;
    font-size: 0.8rem;
    cursor: pointer;
    color: var(--color-text-primary);
    line-height: 1.4;
    user-select: none;
    transition: background-color 60ms;
}

.atq-combo-item-active {
    background-color: var(--color-surface-raised);
}

.atq-combo-item-selected {
    background-color: rgb(var(--color-primary-rgb) / 0.08);
    color: var(--color-primary);
    font-weight: 500;
}

.atq-combo-item-selected.atq-combo-item-active {
    background-color: rgb(var(--color-primary-rgb) / 0.14);
}

.atq-combo-item-disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

.atq-combo-highlight {
    background-color: rgb(var(--color-warning-rgb) / 0.35);
    color: inherit;
    border-radius: 2px;
    padding: 0 1px;
}

.dark .atq-combo-highlight {
    background-color: rgb(var(--color-warning-rgb) / 0.25);
}

.atq-combo-dropdown .atq-combo-item {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.atq-combo-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: atq-combo-spin 0.6s linear infinite;
    vertical-align: middle;
}

@keyframes atq-combo-spin {
    to { transform: rotate(360deg); }
}

/* ── Section 7: Text Color Utilities ─────────────────────────────────────── */

.text-white     { color: #fff !important; }
.text-dark      { color: var(--color-text-primary) !important; }
.bg-light       { background-color: var(--color-surface-raised) !important; }
.bg-white       { background-color: var(--color-surface) !important; }

/* Form control shim — used by DateTimePicker and some field wrappers */
.form-control,
.form-control-sm {
    display: block;
    width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: var(--label-font-size);
    line-height: 1.5;
    color: var(--color-text-primary);
    background-color: var(--color-surface);
    border: 1px solid #b2b7bc;   /* operator input border colour — matches .atq-input; this rule (app.css, loaded after tailwind.css) is what wins for inputs that also carry .form-control */
    border-radius: var(--radius-sm);
    transition: border-color 0.15s;
}

.form-control-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.8125rem;
    height: var(--field-height);
}

.form-control:focus,
.form-control-sm:focus {
    border-color: var(--color-primary);
    outline: 0;
    box-shadow: 0 0 0 2px rgb(var(--color-primary-rgb) / 0.3);
}

.form-control:disabled {
    cursor: not-allowed;
}

/* form-control elements without atq-input need the disabled palette applied
   directly (AtqUnitDropDownList, raw <input class="form-control">, etc.). */
.form-control:disabled:not(.atq-input) {
    opacity: 1;
    color:            var(--color-input-disabled-text)   !important;
    background-color: var(--color-input-disabled-bg)     !important;
    border-color:     var(--color-input-disabled-border) !important;
}

/* DateTimePicker: the text input is readonly (never HTML-disabled).
   When the calendar button is disabled, style the sibling input to match. */
.picker-wrapper:has(button:disabled) input {
    cursor: not-allowed;
    opacity: 1;
    color:            var(--color-input-disabled-text)   !important;
    background-color: var(--color-input-disabled-bg)     !important;
    border-color:     var(--color-input-disabled-border) !important;
}

.input-group {
    display: flex;
    align-items: stretch;
}

.input-group > .form-control {
    flex: 1 1 auto;
    width: 1%;
}

/* Table shim — used by grid views */
.table {
    width: 100%;
    border-collapse: collapse;
}

.table th,
.table td {
    padding: 0.375rem 0.5rem;
    border-bottom: 1px solid var(--color-border);
    text-align: start;
    font-size: var(--label-font-size);
    color: var(--color-text-primary);
}

.table thead th {
    background-color: var(--color-surface-raised);
    font-weight: 600;
    border-bottom: 2px solid var(--color-primary);
    white-space: nowrap;
}

.table-hover tbody tr:hover {
    background-color: rgb(var(--color-primary-rgb) / 0.05);
}

.table-bordered th,
.table-bordered td {
    border: 1px solid var(--color-border);
}

.w-100 { width: 100% !important; }
.h-100 { height: 100% !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   Section 9: Transaction Form Polish (Phase 5K)
   Enhances the DocumentSetupComponent visual output without touching .razor
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Hide AdminLTE page content header (title is in card-header already) ── */
.content-header {
    display: none;
}

/* ── Action buttons in toolbar: consistent sizing ──────────────────────── */
.card-header .btn {
    height: var(--field-height);
    font-size: var(--label-font-size);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    border-radius: var(--radius);
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s, opacity 0.15s;
}

.card-header .btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Better btn hover states for toolbar buttons ── */
.card-header .btn-primary:hover  { filter: brightness(0.9); }
.card-header .btn-success:hover  { filter: brightness(0.9); }
.card-header .btn-danger:hover   { filter: brightness(0.9); }

/* ── Summary section separator — applies when last row group is below grid ── */
.card-body > .row:last-child > [class*="col-"] > .row.no-gutters:first-child {
    padding-top: 0.5rem;
}

/* ── Form control height sync — ensure all inputs match design system ── */
.form-control {
    height: var(--field-height);
}

/* ── Consistent border-radius on buttons adjacent to inputs ── */
.input-group > .btn:last-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

[dir="rtl"] .input-group > .btn:last-child {
    border-top-left-radius: var(--radius);
    border-bottom-left-radius: var(--radius);
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* ── Section (container) spacing ── */
.content > .container {
    padding: 0;
    /* Fill the content area instead of Tailwind's capped .container max-width (1536px at the
       top breakpoint, not auto-centered) so the form expands into the space freed when the
       sidebar is collapsed (Session 104). Higher specificity than the @media .container rules,
       so it wins at every breakpoint. Only takes effect when the content area is WIDER than the
       cap — i.e. exactly when the sidebar is collapsed; the sidebar-open layout is unchanged. */
    max-width: none;
}

.content {
    padding: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   Section 10: Phase 5L — Transaction Form Visual Parity Improvements
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Card header — primary accent bar (not on toolbar-merged headers) ── */
.card > .card-header {
    border-bottom: 2px solid var(--color-primary);
    background-color: rgb(var(--color-primary-rgb) / 0.03);
}

.card:has(> .card.border-info) > .card-header,
.card:has(> .card.border-success) > .card-header,
.card:has(> .card.border-danger) > .card-header {
    border-bottom: none;
    background-color: rgb(var(--color-primary-rgb) / 0.03);
}

/* ── Grid section — visual containment ── */
.card-body .overflow-auto {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    margin-top: 0.5rem;
    margin-bottom: 0.75rem;
    /* Needed for tfoot sticky-bottom to work: table must fill full height */
}

/* ── Grid header — stronger tint for scannability ── */
.card-body .overflow-auto table thead,
.card-body table thead {
    background-color: rgb(var(--color-primary-rgb) / 0.06);
}

.card-body .overflow-auto table thead th,
.card-body table thead th {
    color: var(--color-text-primary);
    font-weight: 600;
    font-size: var(--label-font-size);
    white-space: nowrap;
}

/* ── Summary/footer area — visual containment ── */
.card-body > .row:last-child {
    border-top: 1px solid var(--color-border);
    margin-top: 0.5rem;
    padding: 0.75rem;
    background-color: var(--color-surface-raised);
    border-radius: 0 0 var(--radius) var(--radius);
}

/* ── Summary labels — slightly bolder for readability ── */
.card-body > .row:last-child .col-form-label,
.card-body > .row:last-child .col-form-label-sm {
    font-weight: 600;
    color: var(--color-text-primary);
}

/* Operator: Master Account form labels = weight 500 + #191e25. The summary rule
   above (.card-body > .row:last-child …, specificity 0,4,0) was catching this
   form's only .card-body row and forcing 600 + text-primary; !important restores
   the requested 500/#191e25 scoped to the Master Account right panel. */
.acc-right-panel .atq-label,
.acc-right-panel .col-form-label,
.acc-right-panel .col-form-label-sm,
.acc-right-panel .control-label {
    font-weight: 500 !important;
    color: var(--color-label) !important;
}

/* ── Master field rows — subtle bottom separator ── */
.card-body > .row.no-gutters:not(:last-child) {
    border-bottom: 1px solid rgb(var(--color-primary-rgb) / 0.05);
}

/* ── Label spacing in no-gutters rows — prevent labels from touching adjacent fields ──
   Logical props so the gap lands on the reading-START side in both RTL & LTR.
   In RTL the previous field's input sits on the label's start side, so the larger
   pad goes there to keep the label TEXT from butting against it. ── */
.row.no-gutters > .col-form-label,
.row.no-gutters > .col-form-label-sm {
    padding-inline-start: 0.5625rem; /* 9px — space before the label text begins */
    padding-inline-end:   0.25rem;   /* 4px — minor gap toward this field's own input */
}

/* ── Checkbox fields — same start-side gap so the box doesn't butt the prior field.
   AtqCheckBox renders a flex wrapper (checkbox + label) as a col-* child; the
   checkbox is the leading element on the reading-start side, so pad the wrapper.
   `.gap-2` pins this to the checkbox signature (col-* flex items-center gap-2),
   excluding AtqRating (gap-0.5). ── */
.row.no-gutters > .flex.items-center.gap-2 {
    padding-inline-start: 0.5625rem; /* 9px — match the label gap */
}

/* ── Rating stars — make the default (unselected) stars visible like V1 (V1 = solid black).
   AtqRating.razor styles them via an inline <style> compiled into the WASM bundle; this
   served-CSS rule (specificity 0,2,0 via :not) overrides the faint default even when the
   component bundle hasn't been recompiled. Selected stars keep .star-selected (gold). ── */
.star:not(.star-selected) {
    background: var(--color-text-primary);
}

/* ══════════════════════════════════════════════════════════════════════════
   Section 11: Grid Insert Row Positioning
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Compact empty state (always — template insert row is always present) ── */
tbody tr.atq-empty-row td {
    padding-top: 0.5rem;
    padding-bottom: 0.25rem;
}
tbody tr.atq-empty-row td .fa-inbox {
    font-size: 1rem;
    margin-bottom: 0.125rem;
}

/* ── Insert (template) row: visible chip styling now lives on the <td>
   elements (Section 14 — solid primary border). This <tr>-level rule kept
   for the dashed leading-edge accent only. ─ */
tr.atq-new-record-row {
    background: var(--color-surface);
}
tr.atq-new-record-row > td:first-child {
    box-shadow: inset 3px 0 0 0 rgb(var(--color-primary-rgb) / 0.25);
}
[dir="rtl"] tr.atq-new-record-row > td:first-child {
    box-shadow: inset -3px 0 0 0 rgb(var(--color-primary-rgb) / 0.25);
}

/* ── Active (edited) row: solid leading-edge accent. Pairs with the existing
   bg-primary/10 + ring utilities applied via Tailwind in AtqDocGridView. ───── */
tr.atq-row-active > td:first-child {
    box-shadow: inset 3px 0 0 0 var(--color-primary);
}
[dir="rtl"] tr.atq-row-active > td:first-child {
    box-shadow: inset -3px 0 0 0 var(--color-primary);
}

/* `table-layout: fixed` enforces the configured column widths from <th width="%">
   regardless of cell content length. Without this, browsers use auto-layout where
   cells with short text (e.g. "1.000000") shrink the column below its configured
   width, breaking the visual contract on retrieved transactions.
   Trade-off: when ControlWidth metadata doesn't sum to exactly 100%, there may be
   small trailing empty space — acceptable vs. column-crushing on data load. */
table.atq-detail-grid {
    table-layout: fixed;
}
.atq-detail-grid .atq-grid-th {
    background-color: var(--color-surface);
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
    border-inline-end: 1px solid var(--color-border);
    /* The header is position:sticky (`sticky top-0`). A border-bottom on a sticky
       table cell is painted with the scrolling body row (border-collapse) and
       disappears mid-scroll, so the accent line is drawn as an inset box-shadow
       which stays attached to the sticky cell. */
    border-bottom: 0;
    box-shadow: inset 0 -1px 0 0 var(--color-primary);
    padding: 0.3125rem 0.375rem;
    /* Operator: header text #191e25 (tokenized for dark mode), weight 500, 12px */
    color: var(--color-label);
    font-weight: 500;
    font-size: 0.75rem; /* 12px */
}
.atq-detail-grid .atq-grid-td {
    border-inline-end: 1px solid var(--color-border);
}

/* Transaction-engine form labels — operator-specified colour #191e25
   (tokenized via --color-label so it flips correctly in dark mode).
   Scoped to #div_body so only the transaction form is affected. */
#div_body .col-form-label,
#div_body .col-form-label-sm,
#div_body .atq-label {
    color: var(--color-label);
    font-weight: 500; /* operator: components 3 & 4 labels match 1 & 2 (uniform 500) */
}

/* Detail-grid column widths driven by inline CSS custom properties set in
   AtqDocGridView.razor via GetColumnWidthStyle:
     --col-w-d  → desktop width (sums to 100% over visible columns)
     --col-w-m  → mobile width  (sums to 100% over columns visible below lg)
   `table-layout: fixed` on .atq-detail-grid means <td> inherits this width
   from the matching <th>, so no per-cell rule is needed. */
.atq-detail-grid .atq-grid-th {
    width: var(--col-w-d, auto);
}
@media (max-width: 1023px) {
    .atq-detail-grid .atq-grid-th {
        width: var(--col-w-m, var(--col-w-d, auto));
    }
}

/* ── Info-row card sits above the grid (per design pass) — flush look,
   slightly tighter padding than a generic atq-card. ──────────────────────── */
.atq-grid-info-card {
    margin-bottom: 0.5rem;
}
.atq-grid-info-card > .atq-card-body {
    padding: 0.5rem 0.75rem;
}

/* ══════════════════════════════════════════════════════════════════════════
   Section 12: Syncfusion Grid Overrides (loaded after bootstrap5.css)
   ══════════════════════════════════════════════════════════════════════════ */

/* Group drop area icons — white (overrides Syncfusion bootstrap5.css #6c757d) */
.e-grid .e-groupdroparea .e-icons,
.e-grid .e-groupheadercell .e-icons {
    color: white;
}

/* Ungroup button margin — overrides Syncfusion bootstrap5.css -8px/-12px */
.e-grid.sf-grid span.e-ungroupbutton.e-icons {
    margin-left: 1px;
}

/* ══════════════════════════════════════════════════════════════════════════
   Section 13: DocumentSetup — Card-per-Component Layout
   Each ComponentNo (1, 2, 3, 4) and the detail grid render as their own card
   on a whitesmoke page background. Action buttons + title sit in a top bar.
   ══════════════════════════════════════════════════════════════════════════ */

/* Page background — tinted canvas so white section cards stand out cleanly.
   Tokenized to var(--color-page): this fixes a latent dark-mode bug (the old
   hardcoded #F1F5F9 stayed light-slate in dark mode) and is palette-aware in
   both shells. In the floating shell it's overridden transparent below so the
   section cards float directly on the page canvas (no canvas-in-canvas). */
.atq-page-stack {
    background-color: var(--color-page);
    padding: 0.5rem;
    min-height: 100%;
    border: none;
    box-shadow: none;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

/* Top toolbar — title on one side, action buttons on the other. */
.atq-page-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.625rem 1rem;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    margin-bottom: 0;
    flex-wrap: wrap;
}
.atq-page-toolbar .card-title,
.atq-page-toolbar h3.card-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-primary);
    margin: 0;
    letter-spacing: -0.01em;
}
.atq-page-toolbar .atq-hdr-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.atq-page-toolbar .atq-hdr-actions .btn {
    height: var(--field-height);
    padding: 0 0.875rem;
    font-size: var(--label-font-size);
}
.atq-page-toolbar .card-tools {
    display: none;
}

/* Reset the .card-body inside the new stack so it's just a flex container. */
.atq-page-stack > .card-body {
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    background: transparent;
}

/* Each ComponentNo group / grid is its own white card. */
.atq-section-card {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    padding: 0.875rem 1rem;
    margin-bottom: 0;
}

/* Equal-height cards: when section-cards live inside a Bootstrap row, fill it. */
.atq-page-stack .row > [class*="col-"] > .atq-section-card {
    height: 100%;
    width: 100%;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}
.atq-page-stack .row > [class*="col-"] {
    display: flex;
    align-items: stretch;
}

/* Escape hatch for the flex rule above (Session 155).
   That rule assumes a col-* holds exactly ONE child — an .atq-section-card —
   which is true for the master ComponentNo groups (C1/C2, C3/C4). The
   document-detail ENTRY FORM is the exception: both the setting-28
   "insertion mode" desktop form and the mobile entry form put the
   per-ControlRow field rows DIRECTLY inside the col-* with no section-card in
   between. Making that column a flex row lays every ControlRow side by side on
   ONE line instead of stacking them (V1 renders them stacked, because in
   Bootstrap a col-* is a block box). Restore block flow for those four columns
   only; every section-card column keeps its equal-height behaviour. */
.atq-page-stack .row > [class*="col-"].atq-field-stack {
    display: block;
}

/* Equal-width columns + consistent row widths.
   Forces each direct col-child of any direct row inside the page-stack to
   stretch evenly (1/1/.../n), and removes the .row's negative margins/padding
   so all rows (C1+C2, grid, C3+C4) start and end at the same x positions. */
.atq-page-stack > .card-body > .row {
    margin-inline: 0;
    width: 100%;
    box-sizing: border-box;
    padding-top: 0 !important;     /* overrides Bootstrap pt-2 on the grid row */
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}
/* Equal-width flex panels on desktop only — at lg+ each col-md-6 panel
   grows to share the row equally. Below lg, Bootstrap's col-sm-12/col-12
   stacking takes over so panels reflow vertically on tablet/phone. */
@media (min-width: 1024px) {
    .atq-page-stack > .card-body > .row > [class*="col-"] {
        flex: 1 1 0;
        width: auto;
        padding-inline: 0;
        padding-block: 0;
        box-sizing: border-box;
    }
    .atq-page-stack > .card-body > .row > [class*="col-"] + [class*="col-"] {
        margin-inline-start: 0.25rem;
    }
}

/* Below lg: zero side-margin so stacked panels align flush, small vertical
   gap between them. Panel widths come from Bootstrap col-sm-* / col-* on
   the field metadata. */
@media (max-width: 1023px) {
    .atq-page-stack > .card-body > .row > [class*="col-"] {
        padding-inline: 0;
        padding-block: 0;
        box-sizing: border-box;
    }
    .atq-page-stack > .card-body > .row > [class*="col-"] + [class*="col-"] {
        margin-top: 0.5rem;
    }
}

.atq-section-card .row + .row.no-gutters,
.atq-section-card .row.no-gutters + .row.no-gutters {
    border-top: none;
}

/* Section title (optional — inferred from first label). */
.atq-section-card > .atq-section-title {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--color-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Grid card variation — full width, heavier emphasis, white bg. */
.atq-grid-card {
    padding: 0;
    overflow: hidden;
    background-color: var(--color-surface) !important;
}
.atq-grid-card > .atq-section-title {
    margin: 0;
    padding: 0.625rem 1rem;
    border-bottom: 1px solid var(--color-border);
}

/* Grid card title bar (the "DocDetails" section title) — primary fill. */
.atq-grid-card > .card-header {
    background-color: var(--color-primary) !important;
    border-bottom: none !important;
    padding: 0.625rem 1rem;
    margin: 0;
}
.atq-grid-card > .card-header .card-title,
.atq-grid-card > .card-header h5 {
    color: var(--color-primary-text) !important;
    font-size: 0.875rem;
    font-weight: 700;
    margin: 0;
    letter-spacing: -0.01em;
}
.atq-grid-card > .card-body {
    padding: 0;
    background-color: var(--color-surface);
}

/* Inline grid card (when GridDetail field renders inside C1/C2): break out of
   the parent section-card padding so it sits as its own flush card.
   Top margin negative-flushes the grid's <thead> against the section card's
   inner top edge (no whitespace between rounded card top and purple header).
   Top corners are rounded to match the section card's outer radius — combined
   with `.atq-grid-card { overflow: hidden }`, the header is clipped to those
   corners so it reads as a single rounded chrome. */
.atq-section-card > .atq-grid-card {
    margin: -0.875rem -1rem -0.875rem -1rem;
    border-inline: none;
    border-radius: var(--radius) var(--radius) 0 0;
    border-top: none;
    box-shadow: none;
}
/* When the grid is NOT the first child of the section card (i.e. master fields
   render above it), restore a thin separator so the visual seam stays clean. */
.atq-section-card > .atq-grid-card:not(:first-child) {
    margin-top: 0.5rem;
    border-top: 1px solid var(--color-border);
    border-radius: 0;
}

/* Grid header — light slate chrome with bold slate text (NOT primary fill).
   Reverses the previous "primary purple header" design to match the new
   high-density data-entry visual where the eye should land on the highlighted
   template row, not the header.
   `var(--color-bg)` falls back to a light slate when not defined. */
.atq-section-card table thead,
.atq-grid-card table thead,
.atq-section-card .overflow-auto table thead,
.atq-grid-card .overflow-auto table thead,
.atq-section-card table thead tr,
.atq-grid-card table thead tr {
    background-color: var(--color-surface) !important;
}
.atq-section-card table thead th,
.atq-grid-card table thead th,
.atq-section-card .overflow-auto table thead th,
.atq-grid-card .overflow-auto table thead th,
.atq-section-card table > thead > tr > th,
.atq-grid-card table > thead > tr > th {
    background-color: var(--color-surface) !important;
    color: var(--color-text-secondary) !important;
    /* Primary border so the line reading "header bottom + template row top"
       composes into one continuous primary divider. The template row's td
       border-top is also primary; with border-spacing:0 they sit adjacent. */
    border-bottom: 1px solid var(--color-primary) !important;
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.01em;
    padding: 0.3125rem 0.375rem;
    text-align: start;
}
/* The generic card-table header rule above (… .overflow-auto table thead th,
   specificity 0,2,3 + !important on color) was beating the detail grid's own
   .atq-grid-th — forcing weight 600 + color text-secondary. Restore the operator's
   header style (weight 500 + #191e25 via --color-label) for the detail grid only,
   with higher specificity (table.atq-detail-grid + th.atq-grid-th) + !important. */
.atq-grid-card .overflow-auto table.atq-detail-grid thead th.atq-grid-th,
.atq-grid-card table.atq-detail-grid thead th.atq-grid-th,
.atq-section-card .overflow-auto table.atq-detail-grid thead th.atq-grid-th,
.atq-section-card table.atq-detail-grid thead th.atq-grid-th {
    color: var(--color-label) !important;
    font-weight: 500 !important;
}
:root.dark .atq-section-card table thead,
:root.dark .atq-grid-card table thead,
:root.dark .atq-section-card .overflow-auto table thead,
:root.dark .atq-grid-card .overflow-auto table thead,
:root.dark .atq-section-card table thead tr,
:root.dark .atq-grid-card table thead tr,
:root.dark .atq-section-card table thead th,
:root.dark .atq-grid-card table thead th,
:root.dark .atq-section-card .overflow-auto table thead th,
:root.dark .atq-grid-card .overflow-auto table thead th {
    background-color: var(--color-surface-raised) !important;
    color: var(--color-text-secondary) !important;
}
:root.dark .atq-detail-grid .atq-grid-th,
:root.dark .atq-detail-grid .atq-action-col-th {
    background-color: var(--color-surface-raised);
}
/* Force the grid wrapper itself to be white, not page-bg, even on Tailwind chains. */
.atq-section-card .overflow-auto,
.atq-grid-card .overflow-auto {
    background-color: var(--color-surface) !important;
}
.atq-section-card table,
.atq-grid-card table {
    background-color: var(--color-surface) !important;
}

/* Compact grid card — auto-fit height (no white space below), no border on
   wrapper since the section-card already provides one. */
.atq-grid-card > .overflow-auto,
.atq-grid-card .overflow-auto {
    height: auto !important;
    min-height: 0 !important;
    border: none !important;
    border-radius: 0 !important;
}
.atq-grid-card { padding: 0; }
.atq-grid-card table { border-collapse: collapse; }

/* Compact empty-state row when grid is empty so the always-present template
   row doesn't sit in the middle of a void. Inbox icon + "No items" message
   stay visible but stack tightly above the template row. */
.atq-grid-card tbody tr.atq-empty-row td {
    padding-top: 0.5rem !important;
    padding-bottom: 0.25rem !important;
}
.atq-grid-card tbody tr.atq-empty-row td .fa-inbox {
    font-size: 1rem !important;
    margin-bottom: 0.125rem !important;
}
/* Template-row top border is now drawn on the <td> elements in primary
   color (see Section 14 .atq-detail-grid tbody tr.atq-new-record-row > td).
   The legacy <tr>-level slate border that used to live here was overriding
   the new chip styling on some browsers, so it is explicitly removed. */
.atq-grid-card tbody tr.atq-new-record-row {
    border-top: none !important;
}

/* Toolbar tightening — toolbar sits flush above the first card. */
.atq-page-toolbar { margin-bottom: 0; }

/* Override the legacy ".card-body > .row:last-child" summary background —
   it conflicted with our per-section card layout. */
.atq-page-stack > .card-body > .row:last-child {
    background-color: transparent;
    border-top: none;
    margin-top: 0;
    padding: 0;
}

/* Hide bottom action button row when toolbar at top is in use (it duplicates). */
.atq-page-stack .atq-bottom-actions { display: none; }

/* ── Input icon prefix for money / percent / discount fields ─────────────── */
.atq-input-prefix {
    position: relative;
    display: block;
}
.atq-input-prefix > .atq-prefix-icon {
    position: absolute;
    inset-inline-start: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.25rem;
    height: 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    border-radius: 0.25rem;
    pointer-events: none;
    z-index: 2;
}
.atq-input-prefix.is-money > .atq-prefix-icon {
    background-color: rgb(var(--color-success-rgb) / 0.12);
    color: var(--color-success);
}
.atq-input-prefix.is-percent > .atq-prefix-icon {
    background-color: rgb(var(--color-info-rgb) / 0.12);
    color: var(--color-info);
}
.atq-input-prefix.is-discount > .atq-prefix-icon {
    background-color: rgb(var(--color-warning-rgb) / 0.14);
    color: var(--color-warning);
}
.atq-input-prefix > input,
.atq-input-prefix > .form-control {
    padding-inline-start: 2.25rem;
}

/* Shell wrapper — single full-width flex/block child of the parent col so
   the grid + footer + totals + tip stack VERTICALLY. The page-stack equal-
   height rule sets `display:flex; align-items:stretch` on every `[class*="col-"]`,
   which would otherwise lay AtqDocGridView's multi-element output as flex-row
   siblings (grid on the inline-start, tip beside it on the inline-end). */
.atq-detail-grid-shell {
    display: flex;
    flex-direction: column;
    width: 100%;
    flex: 1 1 auto;
    min-width: 0;
}

/* Tighten the gap above + below the table wrapper inside the shell.
   Prior pass left ~8px above and ~12px below from default user-agent table
   margins / sibling spacing. Force tight 1px / 2px so the chrome (header,
   template row, footer toolbar, totals, tip) all read as one continuous
   stack without dead space between them. */
.atq-detail-grid-shell > .overflow-auto {
    margin-top: 1px !important;
    margin-bottom: 2px !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   Section 14: Detail-Grid Visual Pass v2 (target image — high-density entry)
   - Light slate header (handled in Section 13 thead overrides above)
   - # leading-edge column for line numbers / + add affordance
   - ⋮ trailing-edge action column
   - Template row as a primary-soft "chip" — first row under the header
   - Zebra-striped saved rows
   - Footer bar (clear-all + total-items badge)
   - Totals card (sum per numeric column)
   - Help tip
   ══════════════════════════════════════════════════════════════════════════ */

/* Leading-edge "#" column — line-number gutter on the inline-start of every row. */
.atq-detail-grid .atq-num-col-th,
.atq-detail-grid .atq-num-col-td {
    width: 36px;
    min-width: 36px;
    max-width: 36px;
    text-align: center;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    padding: 0 0.25rem;
    border-bottom: 1px solid #888d92; /* operator: submitted-row separator (TH overrides → primary) */
}
.atq-detail-grid .atq-num-col-th {
    background-color: rgb(248 250 252);
    font-weight: 600;
    /* bottom accent as box-shadow so it survives sticky scroll (see header note) */
    border-bottom: 0;
    box-shadow: inset 0 -1px 0 0 var(--color-primary);
    padding: 0.3125rem 0.125rem;
}
/* Operator: line-number cell text at 12px */
.atq-detail-grid .atq-num-col-td {
    font-size: 12px;
}

/* G4 selected-row highlight (V1 SelectedRowCss). Distinct from .atq-row-active,
   which marks the row being EDITED — a row can be selected without being edited.
   Scoped under .atq-detail-grid so it cannot reach AtqGridView / master-data pages. */
.atq-detail-grid tr.atq-row-selected > td {
    background-color: color-mix(in srgb, var(--color-primary) 8%, transparent);
}

/* G3 multi-select gutter — sits between the "#" column and the first data column.
   Scoped under .atq-detail-grid so it cannot reach AtqGridView / master-data pages. */
.atq-detail-grid .atq-select-col-th,
.atq-detail-grid .atq-select-col-td {
    width: 32px;
    min-width: 32px;
    max-width: 32px;
    text-align: center;
    padding: 0 0.25rem;
    border-bottom: 1px solid #888d92;
}
.atq-detail-grid .atq-select-col-th {
    background-color: rgb(248 250 252);
    border-bottom: 0;
    box-shadow: inset 0 -1px 0 0 var(--color-primary);
    padding: 0.3125rem 0.125rem;
}
.atq-detail-grid .atq-select-col-th input[type="checkbox"],
.atq-detail-grid .atq-select-col-td input[type="checkbox"] {
    width: 14px;
    height: 14px;
    cursor: pointer;
    accent-color: var(--color-primary);
    vertical-align: middle;
}

/* Trailing-edge action column — 3-dot row menu. */
.atq-detail-grid .atq-action-col-th,
.atq-detail-grid .atq-action-col-td {
    width: 32px;
    min-width: 32px;
    max-width: 32px;
    padding: 0;
    text-align: center;
    border-bottom: 1px solid #888d92; /* operator: submitted-row separator (TH overrides → primary) */
}
.atq-detail-grid .atq-action-col-th {
    background-color: var(--color-surface);
    /* bottom accent as box-shadow so it survives sticky scroll (see header note) */
    border-bottom: 0;
    box-shadow: inset 0 -1px 0 0 var(--color-primary);
    padding: 0.3125rem 0;
}
.atq-detail-grid .atq-row-menu-btn {
    width: 24px;
    height: 24px;
    border-radius: 9999px;
    color: var(--color-text-secondary);
    background: transparent;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 120ms, color 120ms;
}
.atq-detail-grid .atq-row-menu-btn:hover {
    background-color: rgb(var(--color-primary-rgb) / 0.08);
    color: var(--color-primary);
}

/* Row 3-dot action menu — the dropdown is rendered ONCE at the end of the
   AtqDocGridView output (outside the table wrapper) and floated via
   `position:fixed` with coords computed from the trigger button's
   getBoundingClientRect (atq.computeActionMenuStyle in index.html). This
   escapes the wrapper's overflow:auto clipping, so the menu shows correctly
   even when the trigger sits on the very last row of a tall scrollable grid.
   The backdrop is also position:fixed so any click outside closes the menu. */
.atq-row-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: transparent;
}
.atq-row-menu-dropdown {
    /* `position: fixed` is set via inline style from JS at open-time so we
       can use the exact viewport coords. The CSS-only fallback below is
       used when JS interop is unavailable for any reason. */
    position: fixed;
    top: 50%;
    inset-inline-end: 1rem;
    min-width: 130px;
    z-index: 50;
    padding: 4px 0;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12);
    display: flex;
    flex-direction: column;
}
.atq-row-menu-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.75rem;
    text-align: start;
    background: transparent;
    border: none;
    color: var(--color-text-primary);
    font-size: 0.75rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 120ms;
}
.atq-row-menu-item i {
    width: 14px;
    text-align: center;
    color: var(--color-text-muted);
}
.atq-row-menu-item:hover {
    background-color: var(--color-surface-raised);
}
.atq-row-menu-item:hover i {
    color: var(--color-text-primary);
}
.atq-row-menu-item-danger {
    color: var(--color-danger);
}
.atq-row-menu-item-danger i {
    color: var(--color-danger);
}
.atq-row-menu-item-danger:hover {
    background-color: rgb(var(--color-danger-rgb) / 0.08);
    color: var(--color-danger);
}
.atq-row-menu-item-danger:hover i {
    color: var(--color-danger);
}

/* Generic data cell baseline — replaces the inline px-2 py-0.5 utility chain
   on saved rows. Padding tightened ~25% from the prior pass to make rows feel
   more "data-dense", matching the target image. */
.atq-detail-grid td.atq-grid-td,
.atq-detail-grid .atq-grid-td {
    padding: 0.4375rem 0.5625rem;
    border-bottom: 1px solid #888d92; /* operator: submitted-row separator */
    color: var(--color-label); /* operator: cell text #191e25 (dark-mode tokenized) */
    font-size: 0.6875rem; /* 11px */
    font-variant-numeric: tabular-nums;
    background-color: var(--color-surface);
    transition: background-color 120ms;
    /* Cap stretch when content is long: the cell wraps to a 2nd line
       inside the same width instead of pushing the table wider. The
       minimum stops it from collapsing too small. Inputs inside the cell
       fill 100% of this width so the input is also capped at 220px. */
    max-width: 220px;
    min-width: 60px;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
}

/* Zebra rows — even rows get a faint slate tint so the eye can scan vertically. */
.atq-detail-grid tbody tr.atq-detail-row:nth-of-type(even):not(.atq-new-record-row):not(.atq-row-active) > td {
    background-color: rgb(248 250 252 / 0.5);
}
:root.dark .atq-detail-grid tbody tr.atq-detail-row:nth-of-type(even):not(.atq-new-record-row):not(.atq-row-active) > td {
    background-color: rgb(15 23 42 / 0.25);
}

/* Hover state on saved rows — slightly stronger tint than zebra. */
.atq-detail-grid tbody tr.atq-detail-row:not(.atq-new-record-row):not(.atq-row-active):hover > td {
    background-color: rgb(var(--color-primary-rgb) / 0.04);
}

/* Active (edit-mode) row — primary-soft fill + leading-edge solid accent. */
.atq-detail-grid tbody tr.atq-row-active > td {
    background-color: rgb(var(--color-primary-rgb) / 0.08) !important;
}
.atq-detail-grid tbody tr.atq-row-active > td:first-child {
    box-shadow: inset 3px 0 0 0 var(--color-primary);
}
[dir="rtl"] .atq-detail-grid tbody tr.atq-row-active > td:first-child {
    box-shadow: inset -3px 0 0 0 var(--color-primary);
}

/* Template (insert) row — primary-soft "chip" sitting directly under the
   header. Stronger primary border on top + bottom (clearly framed), tighter
   cell padding (-25% vs prior pass) so inputs drive the row height. The
   `!important` on border-top is needed because the table-level header rule
   above set its own border-bottom on <th>; with `border-collapse: separate`
   both should render but in some browsers the header's border won out due to
   stacking on the same y-line. */
/* NOTE: the insert (template) row CANNOT be position:sticky — it needs a z-index to
   stack over scrolling rows, and that z-index makes the cell a stacking context that
   TRAPS the LOV modal + combobox dropdown rendered inside the itemno field (their
   `fixed inset-0` backdrop then can't cover the topbar). Sticky pin reverted. */
.atq-detail-grid tbody tr.atq-new-record-row > td {
    background-color: rgb(var(--color-primary-rgb) / 0.06) !important;
    border-top: 1px solid var(--color-primary) !important;
    border-bottom: 1px solid var(--color-primary) !important;
    padding: 0.1875rem 0.28125rem;
}
/* First/last cells also get an inline-edge border so the row reads as a
   continuous framed chip, not just two horizontal stripes. */
.atq-detail-grid tbody tr.atq-new-record-row > td:first-child {
    border-inline-start: 1px solid var(--color-primary) !important;
}
.atq-detail-grid tbody tr.atq-new-record-row > td:last-child {
    border-inline-end: 1px solid var(--color-primary) !important;
}
.atq-detail-grid tbody tr.atq-new-record-row.atq-row-active > td {
    background-color: rgb(var(--color-primary-rgb) / 0.10) !important;
}
.atq-detail-grid .atq-num-col-template {
    background-color: transparent !important;
    padding: 0 0.1875rem !important;
}

/* Circular + add-affordance in the template-row gutter cell. */
.atq-detail-grid .atq-add-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 9999px;
    background-color: var(--color-primary);
    color: var(--color-primary-text);
    box-shadow: 0 1px 2px rgb(var(--color-primary-rgb) / 0.35);
    pointer-events: none; /* template row's tr@onclick handles it */
}

/* Inputs INSIDE the template row — rounded, white, distinct from chip bg. */
.atq-detail-grid tbody tr.atq-new-record-row .atq-input,
.atq-detail-grid tbody tr.atq-new-record-row textarea.atq-input {
    background-color: var(--color-surface) !important;
    border-color: var(--color-border) !important;
    border-radius: 0.5rem;
}

/* Footer bar — slim toolbar below the grid (Clear all + total-items). */
.atq-detail-footer-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row-reverse;
    gap: 0.5rem;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
    padding-inline: 0.65625rem;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-top: none;
    border-radius: 0 0 var(--radius) var(--radius);
}
.atq-section-card > .atq-detail-footer-bar {
    border-inline: none;
    border-radius: 0;
    margin: 0 -1rem;
}
.atq-clear-all-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    padding: 0.1875rem 0.5625rem;
    background-color: rgb(var(--color-danger-rgb) / 0.08);
    color: var(--color-danger);
    border: 1px solid rgb(var(--color-danger-rgb) / 0.25);
    border-radius: 0.375rem;
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 1.1;
    cursor: pointer;
    transition: background-color 120ms;
}
.atq-clear-all-btn:hover {
    background-color: rgb(var(--color-danger-rgb) / 0.14);
}
/* G3 delete-selected — same footer shape as Clear-all but SOLID, because it only
   appears once rows are ticked and it is the more specific destructive action of
   the two. Filled vs tinted keeps them distinguishable at a glance. */
.atq-delete-selected-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    padding: 0.1875rem 0.5625rem;
    background-color: var(--color-danger);
    color: #fff;
    border: 1px solid var(--color-danger);
    border-radius: 0.375rem;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.1;
    cursor: pointer;
    transition: filter 120ms;
}
.atq-delete-selected-btn:hover {
    filter: brightness(0.92);
}
.atq-total-items-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--color-primary);                    /* operator: text = primary */
    background-color: var(--color-surface-raised);  /* operator: background = secondary surface */
    padding: 0.1875rem 0.5625rem;
    border-radius: 0.4375rem;
    font-size: 0.6875rem;
    font-weight: 600;
}
.atq-total-items-badge i {
    color: var(--color-primary);
}

/* Totals card — separate light card sitting below the footer bar. Each cell
   has icon + label + value; the trailing-most cell (typ. tax-incl) gets a
   primary-color highlight to draw the eye. */
.atq-detail-totals-card {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0;
    background-color: rgb(248 250 252);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    margin-top: 2px !important;
    overflow: hidden;
}
.atq-section-card > .atq-detail-totals-card {
    margin-inline: -1rem;
    margin-top: 0.625rem;
    border-radius: 0;
    border-inline: none;
}
:root.dark .atq-detail-totals-card {
    background-color: var(--color-surface-raised);
}
.atq-totals-cell {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4375rem 0.75rem;
    border-inline-end: 1px solid var(--color-border);
}
.atq-totals-cell:last-child {
    border-inline-end: none;
}
.atq-totals-icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background-color: rgb(var(--color-primary-rgb) / 0.10);
    color: var(--color-primary);
    font-size: 0.75rem;
}
.atq-totals-text {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}
.atq-totals-label {
    font-size: 0.6875rem;
    color: var(--color-text-muted);
    line-height: 1;
}
.atq-totals-value {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.atq-totals-cell-highlight .atq-totals-value {
    color: var(--color-primary);
    font-size: 1rem;
    font-weight: 700;
}
.atq-totals-cell-highlight .atq-totals-icon {
    background-color: rgb(var(--color-primary-rgb) / 0.18);
}

/* Tip text — small slate row at the very bottom. */
.atq-detail-tip {
    display: flex;
    align-items: center;
    gap: 0.3125rem;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
    padding-inline: 0.65625rem;
    color: var(--color-text-muted);
    font-size: 0.6875rem;
    font-style: italic;
    line-height: 1.2;
}
.atq-detail-tip i {
    opacity: 0.75;
}

/* Mobile: collapse totals to a single column instead of 4 cramped cells. */
@media (max-width: 767px) {
    .atq-detail-totals-card {
        grid-template-columns: 1fr 1fr;
    }
    .atq-totals-cell:nth-child(2) {
        border-inline-end: none;
    }
    .atq-totals-cell:nth-child(-n+2) {
        border-bottom: 1px solid var(--color-border);
    }
}

/* ═══════════════════════════════════════════════════════════════════
   Tablet & phone responsive polish (<1024px, below Tailwind lg).
   Desktop (>=1024px) is fully preserved.

   V1 pattern: SmallControlWidth + SmallColumnWidth metadata in setup
   data drives per-field/per-column widths. We do NOT force-stack
   form rows — admin controls layout via these columns. If their
   values aren't populated, fields fall back to col-12 (full-width).

   Phase 1 — column hiding via SmallColumnWidth='0' (handled in
   AtqDocGridView.razor with Tailwind max-lg:hidden class).
   Phase 2 — form-mode entry card replaces the in-table template row
   below 1024px (handled with explicit display rules below).
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {

    /* Touch-friendly density — 32px tap targets */
    :root {
        --field-height:    2rem;
        --label-font-size: 0.8125rem;
    }

    /* Utility columns stay narrow */
    .atq-detail-grid .atq-num-col-th,
    .atq-detail-grid .atq-num-col-td,
    .atq-detail-grid .atq-action-col-th,
    .atq-detail-grid .atq-action-col-td {
        min-width: unset;
    }

    /* Tighter preview table headers — smaller padding and font so column
       headers fit on 1-2 lines instead of 4-5 lines on narrow viewports. */
    .atq-detail-grid .atq-grid-th {
        padding: 0.3125rem 0.375rem;
        font-size: 0.6875rem;       /* 11px */
        line-height: 1.2;
        font-weight: 600;
    }
    .atq-detail-grid .atq-grid-td {
        padding: 0.35rem 0.4rem;
        font-size: 0.75rem;         /* 12px */
        line-height: 1.25;
    }

    /* Preview grid is shorter so the form card above has visual priority */
    .atq-detail-grid-shell .overflow-auto {
        max-height: 14rem;
    }

    /* Toolbar wrapping polish */
    .atq-hdr-actions,
    .atq-page-toolbar {
        flex-wrap: wrap;
        gap: 0.375rem;
    }

    /* Force-hide the in-table template row below 1024px. (Belt-and-suspenders
       in case Tailwind max-lg:hidden specificity loses to existing tr rules.) */
    .atq-detail-grid tr.atq-new-record-row {
        display: none !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   V1 dual-DOM responsive (revived): desktop grid (.atq-desktop-grid-wrap)
   and mobile form-mode (.atq-mobile-entry-wrap) toggle at the 1024px
   breakpoint. Wiring (event callbacks for cascading lookups, button clicks,
   validation chain) lives in DocumentSetupComponent.razor's V1 mobile block
   — we just style it.
   ══════════════════════════════════════════════════════════════════════════ */

/* === Wrapper visibility ================================================ */
.atq-mobile-entry-wrap {
    display: none;
}
.atq-desktop-grid-wrap {
    display: block;
}
@media (max-width: 1023px) {
    .atq-mobile-entry-wrap { display: block; }
    .atq-desktop-grid-wrap { display: none; }
}

/* === Inside V1 mobile block: replace .card.border-success chrome with a
       flat card that matches the rest of the V2 design language. ========= */
.atq-mobile-entry-wrap > .card.border-success {
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius);
    background: var(--color-surface);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    margin-bottom: 0.5rem;
}
.atq-mobile-entry-wrap .card-header {
    background: rgb(var(--color-primary-rgb) / 0.08);
    border-bottom: 1px solid var(--color-border);
    padding: 0.5rem 0.75rem;
}
.atq-mobile-entry-wrap .card-header .card-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0;
}
.atq-mobile-entry-wrap .card-body {
    padding: 0.5rem 0.75rem;
}
.atq-mobile-entry-wrap .card-footer {
    background: var(--color-surface-raised);
    border-top: 1px solid var(--color-border);
    padding: 0.5rem 0.75rem;
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

/* === Undo .atq-page-stack's flex display on the OUTER panels of the mobile
   wrapper (com1Css / com2Css). Scoped to direct .card-body > .row > col
   so inner field cols inside each panel keep their normal flex behavior
   and Bootstrap col-sm-6 still produces 2-per-row at tablet width. */
.atq-mobile-entry-wrap > .card > .card-body > .row > [class*="col-"] {
    display: block !important;
}
.atq-mobile-entry-wrap > .card > .card-body > .row > [class*="col-"] > .row {
    width: 100%;
}

/* === Tier-2 responsive: tablet 576–1023px → 2 fields per row, phone
   <576px → 1 field per row. The metadata-supplied col-X classes give
   each field ~67% width (label 25% + input 42%) — that lets only 1
   field fit per row.  We override the *inner* field cols (children of
   each panel's inner row) so that:
     • tablet: each label/input is 25% → label+input = 50% per field
       → 2 fields fit in one panel row
     • phone:  each label/input is 100% → 1 field per row, stacked. */

@media (min-width: 576px) and (max-width: 1023px) {
    .atq-mobile-entry-wrap > .card > .card-body > .row > [class*="col-"] > .row > [class*="col-"] {
        flex: 0 0 25% !important;
        max-width: 25% !important;
        width: 25% !important;
    }
}

@media (max-width: 575px) {
    .atq-mobile-entry-wrap [class*="col-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Section 20: Floating-card shell (Phase 5Q) — gated by html[data-shell="floating"]
   ---------------------------------------------------------------------------
   Converts the flush Option C shell into detached, rounded sidebar + top-bar
   cards on a tinted page canvas (mockup: mockups/shell-option-C.html). Default
   OFF: with the attribute absent the shipped flush layout is byte-for-byte
   unchanged (these selectors simply don't match). Toggle via the top-bar layout
   button (atq.setShell). Everything is gated >= md (768px); below md the shell
   stays flush (mobile drawer + edge-to-edge content) per spec. POS (PosLayout)
   has no .atq-app-root, so it is untouched. Scroll stays contained to a single
   region (#main-content) — no height rework needed (see plan §11 audit 2).
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {

    /* Page canvas + outer gutter + sidebar<->content gap (p-3 / gap-3 = .75rem). */
    html[data-shell="floating"] .atq-app-root {
        background-color: var(--color-page);
        padding: 0.75rem;
        gap: 0.75rem;
    }

    /* Top-bar <-> main gap inside the content column. */
    html[data-shell="floating"] .atq-app-shell {
        gap: 0.75rem;
    }

    /* Detached SIDEBAR card — hairline border all around + radius, replacing the
       flush border-inline-end. Minimal shadow (operator pref); the border does
       most of the separation on the tinted canvas. */
    html[data-shell="floating"] .atq-sb {
        border: 1px solid var(--color-border);
        border-radius: 1rem;
        box-shadow: 0 1px 3px rgb(15 23 42 / 0.06);
    }

    /* Detached TOP-BAR card — drop the flush full-width primary bottom border for
       an all-around hairline + radius; stays a fixed (non-scrolling) flex item. */
    html[data-shell="floating"] .atq-app-shell > header {
        border: 1px solid var(--color-border);
        border-radius: 1rem;
        box-shadow: 0 1px 3px rgb(15 23 42 / 0.06);
    }

    /* MAIN becomes a transparent contained scroll region: .atq-app-root padding
       owns the gutter, so drop main's own padding to keep each page's cards
       floating directly on the canvas at a consistent inset. overflow-x:hidden
       absorbs the 2px shadow-poke of now-full-width cards (wide grids scroll via
       their own inner .overflow-auto, so nothing useful is clipped). */
    html[data-shell="floating"] #main-content {
        padding: 0;
        overflow-x: hidden;
    }

    /* Transaction multi-card stack: transparent (the canvas already shows through)
       so the section/grid cards float directly — avoids canvas-in-canvas. Card
       count + structure unchanged; only background + gutter + inter-card gap. */
    html[data-shell="floating"] .atq-page-stack {
        background-color: transparent;
        padding: 0;
        gap: 0.75rem;
    }

    /* Dark canvas needs a touch more elevation so cards read as raised against the
       near-black page (mockup parity); borders are lightened in dark + shadow adds
       depth. */
    html.dark[data-shell="floating"] .atq-sb,
    html.dark[data-shell="floating"] .atq-app-shell > header {
        box-shadow: 0 6px 20px rgb(0 0 0 / 0.4);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Section 21: Report engine — two-panel redesign (ViewReport)
   Card 1 = Settings & Filters · Card 2 = Report Data (tabs in the panel header).
   Operator-approved mockup: D:\Projects\Claude\mockups\report-engine.html
   ═══════════════════════════════════════════════════════════════════════════ */
.atq-rpt-page { display: flex; flex-direction: column; gap: 0.75rem; }
/* overflow:visible (was hidden) so floating menus that open near the card's edge —
   the Export dropdown in card-1's action bar — escape the card instead of being
   clipped. The header tint is kept inside the rounded corners by rounding the
   header's own top corners (.rpt-card-head below), so we no longer need the card
   to clip. Body content is inset by padding, so the bottom corners don't bleed. */
.rpt-card { overflow: visible; }

/* ── Card header ── */
.rpt-card-head {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.6rem 1rem;
    border-bottom: 1px solid var(--color-border);
    background: rgb(var(--color-primary-rgb) / 0.03);
    /* Round the header's own top corners to the card radius (inherited from
       .rpt-card / .atq-card) so the tint stays within the rounded card even
       though the card no longer clips with overflow:hidden. */
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}
.rpt-card-head h2 { font-size: 0.875rem; font-weight: 500; color: var(--color-text-primary); margin: 0; }
.rpt-bar { width: 0.25rem; height: 1.05rem; border-radius: 2px; background: var(--color-primary); flex-shrink: 0; }
.rpt-card-body { padding: 7px 1rem; }

/* Data-card header with centered tabs: title (start) · tabs (centered) · end */
.rpt-card-head--tabs { display: grid; grid-template-columns: 1fr auto 1fr; padding-top: 5px; padding-bottom: 5px; }
.rpt-head-start { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
.rpt-head-start h2 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Segmented tab pills (in the data-card header) ── */
.rpt-tabs {
    display: inline-flex; align-items: center; gap: 0.2rem; justify-self: center;
    background: var(--color-surface-raised); border: 1px solid var(--color-border);
    border-radius: 0.6rem; padding: 0.18rem;
}
.rpt-tab {
    display: inline-flex; align-items: center; gap: 0.4rem;
    height: 1.85rem; padding: 0 0.85rem; border: none; background: transparent;
    border-radius: 0.45rem; font-size: 0.74rem; font-weight: 500;
    color: var(--color-text-secondary); cursor: pointer; white-space: nowrap;
    transition: all 0.12s ease;
}
.rpt-tab i { font-size: 0.8rem; color: var(--color-text-muted); }
.rpt-tab:hover:not(.active):not(.disabled):not(:disabled) { background: var(--color-surface); color: var(--color-text-primary); }
.rpt-tab.active { background: var(--color-primary); color: var(--color-primary-text); box-shadow: 0 1px 4px rgb(var(--color-primary-rgb) / 0.35); }
.rpt-tab.active i { color: var(--color-primary-text); }
.rpt-tab.disabled, .rpt-tab:disabled { opacity: 0.45; cursor: not-allowed; }

/* ── Centered action buttons (Execute / Preview / Print / Export) ── */
.rpt-actions {
    display: flex; align-items: center; justify-content: center;
    gap: 0.4rem; flex-wrap: wrap;
    margin-top: 6px; padding-top: 6px;
    border-top: 1px dashed var(--color-border);
}

/* ── Form: operator-specified label colour + extra inline-start padding, tight rows ── */
.rpt-card-1 .col-form-label {
    color: var(--color-label) !important;
    padding-inline-start: 1.25rem;
    padding-top: 1px; padding-bottom: 1px;
    font-weight: 500;
    line-height: 1.5;
}
/* Tightly-stacked fields like the original ERP forms — strip the inter-row gaps,
   column vertical padding, and label margin so each field row sits flush. */
.rpt-card-1 .form-group { margin-bottom: 0; }
.rpt-card-1 .row { margin-bottom: 0; }
.rpt-card-1 .col-md-6 > .row { margin-bottom: 0; }
.rpt-card-1 .row > [class*="col-"] { padding-top: 0; padding-bottom: 0; }
.rpt-card-1 .atq-label { margin-bottom: 0; }
.rpt-card-1 .atq-input { margin-bottom: 0; }

/* Sub-section titles + divider — match the mockup's labelled Filters | Print-Settings columns */
.rpt-col-title {
    font-size: 0.7rem; font-weight: 700; letter-spacing: 0.02em;
    color: var(--color-primary); text-transform: uppercase;
    margin-bottom: 0.4rem; padding-inline-start: 0.55rem;
}
.rpt-card-1 .rpt-col-settings { border-inline-start: 1px solid var(--color-border); }
@media (max-width: 767.98px) { .rpt-card-1 .rpt-col-settings { border-inline-start: none; } }

/* "تنفيذ" (Execute) — always green, independent of the brand palette (operator request) */
.btn-rpt-execute { background-color: #16a34a; border-color: #16a34a; color: #ffffff; }
.btn-rpt-execute:hover { background-color: #15803d; border-color: #15803d; color: #ffffff; }
.btn-rpt-execute:disabled { background-color: #16a34a; border-color: #16a34a; color: #ffffff; opacity: 0.55; }

/* Hide AtqTabControl's native tab strip — the header pills drive it via SetActivatePage */
.atq-rpt-tabs .nav-tabs { display: none !important; }

/* ── Group-by area + chip — styled to match the mockup (raised panel + primary pill) ── */
.atq-rpt-tabs .e-grid .e-groupdroparea {
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: 0.6rem;
    margin-bottom: 0.6rem;
    padding: 4px 0.7rem;
    color: var(--color-text-muted);
    font-size: 12px;
    min-height: 2rem;
}
.atq-rpt-tabs .e-grid .e-groupheadercell {
    background: var(--color-primary);
    border: none;
    border-radius: 0.5rem;
    box-shadow: none;
    height: 1.7rem;
    padding-inline: 0.6rem 0.35rem;
    font-size: 12px;
}
.atq-rpt-tabs .e-grid .e-groupheadercell,
.atq-rpt-tabs .e-grid .e-groupheadercell span,
.atq-rpt-tabs .e-grid .e-groupheadercell .e-grouptext {
    color: var(--color-primary-text) !important;
    font-size: 12px;
}
.atq-rpt-tabs .e-grid .e-groupheadercell .e-icons,
.atq-rpt-tabs .e-grid .e-groupheadercell .e-ungroupbutton {
    color: rgb(255 255 255 / 0.85) !important;
}
.atq-rpt-tabs .e-grid .e-groupheadercell .e-icons:hover,
.atq-rpt-tabs .e-grid .e-groupheadercell .e-ungroupbutton:hover {
    color: #ffffff !important;
}

/* ── Friendly empty state for the report grid ── */
.atq-rpt-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 0.7rem; padding: 2.75rem 1rem; text-align: center;
}
.atq-rpt-empty-icon {
    width: 3.5rem; height: 3.5rem; border-radius: 0.9rem;
    display: flex; align-items: center; justify-content: center;
    background: rgb(var(--color-primary-rgb) / 0.08); color: var(--color-primary);
    font-size: 1.5rem;
}
.atq-rpt-empty-text { font-size: 0.85rem; font-weight: 600; color: var(--color-text-muted); max-width: 26rem; }

/* ── Global 1px margin on form controls (operator request) — overrides Tailwind
   preflight's `margin:0` on these elements so every field across the app has a
   little breathing room. Loaded after tailwind.css → same-specificity win. ── */
button,
input,
optgroup,
select,
textarea {
    margin: 1px;
}

/* ── All form inputs & dropdowns use the label font size (12px in the default
   density; 11px compact / 13px comfortable). `.atq-input` already does; the
   class selectors below also pull Bootstrap-styled controls (form-control /
   form-control-sm, e.g. the LOV field) down to match. Login keeps its own size
   via the higher-specificity `.login-form-fields .atq-input` rule. ── */
input,
select,
textarea,
.atq-input,
.form-control,
.form-control-sm {
    font-size: var(--label-font-size);
}

/* ── Share dropdown (transaction toolbar) — bundles email / whatsapp / download ── */
.atq-share-dd { position: relative; display: inline-flex; }
.atq-share-caret { font-size: 0.7em; margin-inline-start: 0.25rem; }
.atq-share-backdrop { position: fixed; inset: 0; z-index: 1000; background: transparent; }
.atq-share-menu {
    position: absolute; top: calc(100% + 4px); inset-inline-end: 0; z-index: 1001;
    min-width: 190px; padding: 4px;
    background: var(--color-background-primary, #fff);
    border: 0.5px solid var(--color-border);
    border-radius: var(--border-radius-md, 8px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16);
    display: flex; flex-direction: column; gap: 2px;
}
.atq-share-item {
    display: flex; align-items: center; gap: 8px; width: 100%;
    padding: 6px 10px; text-align: start; white-space: nowrap; cursor: pointer;
    font-size: var(--label-font-size); color: var(--color-text-primary);
    background: transparent; border: none; border-radius: 6px;
}
.atq-share-item:hover:not(:disabled) { background: var(--color-background-secondary); }
.atq-share-item:disabled { opacity: 0.5; cursor: not-allowed; }
.atq-share-item i { width: 16px; text-align: center; }