/* ── 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: 600;
    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;
    color: var(--color-text-secondary);
    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: var(--radius);
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.dark .atq-combo-dropdown {
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}

.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 var(--color-border);
    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;
}

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

/* ── 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 ── */
.row.no-gutters > .col-form-label,
.row.no-gutters > .col-form-label-sm {
    padding-left: 0.5rem;
    padding-right: 0.25rem;
}

/* ══════════════════════════════════════════════════════════════════════════
   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);
    border-bottom: 1px solid var(--color-primary);
    padding: 0.3125rem 0.375rem;
}
.atq-detail-grid .atq-grid-td {
    border-inline-end: 1px solid var(--color-border);
}

/* 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 — distinct whitesmoke so white cards stand out cleanly. */
.atq-page-stack {
    background-color: #F1F5F9;
    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;
}

/* 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;
}
: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 var(--color-border);
}
.atq-detail-grid .atq-num-col-th {
    background-color: rgb(248 250 252);
    font-weight: 600;
    border-bottom: 1px solid var(--color-primary);
    padding: 0.3125rem 0.125rem;
}

/* 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 var(--color-border);
}
.atq-detail-grid .atq-action-col-th {
    background-color: var(--color-surface);
    border-bottom: 1px solid 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 var(--color-border);
    color: var(--color-text-primary);
    font-size: 0.8125rem;
    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. */
.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);
}
.atq-total-items-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    color: var(--color-text-secondary);
    font-size: 0.6875rem;
    font-weight: 500;
}
.atq-total-items-badge i {
    color: var(--color-text-muted);
}

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