/* ============================================
   GRID HEADER & FOOTER — FLAT COBALT DESIGN SYSTEM
   Spreadsheet-style high-density tables.
   Flat cobalt headers, thin gray grid lines,
   alternating white / soft off-white rows,
   pastel-teal selected row. No gradients, no glare.
   ============================================ */

/* Flat cobalt header (replaces black & purple-gradient headers) */
.table thead,
.table thead th,
.table thead tr,
.table-dark,
.table-dark thead,
.table-dark thead th,
.bg-dark {
    background: var(--ds-primary-dark) !important;
    color: var(--ds-text-invert) !important;
}

/* Light header variant */
.table-light thead,
.table-light thead th,
.table-light thead tr {
    background: var(--ds-head-bg) !important;
    color: var(--ds-text) !important;
}

/* Footer styling - soft head fill */
.table tfoot,
.table tfoot td,
.table tfoot th,
.table-light tfoot,
.table-light tfoot td,
.table-light tfoot th {
    background: var(--ds-head-bg) !important;
    color: var(--ds-text) !important;
    font-weight: 600;
}

/* Primary header variant */
.table-primary thead,
.table-primary thead th {
    background: var(--ds-primary) !important;
    color: var(--ds-text-invert) !important;
}

/* Override Bootstrap's table-dark completely */
.table-dark,
.table-dark > :not(caption) > * > * {
    background: var(--ds-primary-dark) !important;
    color: var(--ds-text-invert) !important;
}

/* Ensure thead always has appropriate styling */
thead {
    background: var(--ds-primary-dark);
    color: var(--ds-text-invert);
}

thead th {
    border-color: var(--ds-primary) !important;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
}

/* Grid alternating row colors — pure white / very soft off-white */
.table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--ds-surface-alt);
}

.table-hover tbody tr:hover {
    background-color: var(--ds-row-hover);
}

/* Focused row highlight */
.table tbody tr.row-focused,
.table tbody tr:focus-within {
    background-color: var(--ds-primary-soft) !important;
    box-shadow: inset 3px 0 0 var(--ds-primary);
}

/* Selected row — soft pastel teal */
.table tbody tr.selected,
.table tbody tr.row-selected,
.table tbody tr.is-selected {
    background-color: var(--ds-row-selected) !important;
    box-shadow: inset 3px 0 0 var(--ds-row-selected-bar);
}

/* Card headers — flat cobalt */
.card-header,
.form-card-header {
    background: var(--ds-primary-dark) !important;
    color: var(--ds-text-invert) !important;
}

/* Modal headers */
.modal-header {
    background: var(--ds-primary-dark);
    color: var(--ds-text-invert);
    border-bottom: none;
}

.modal-header .btn-close {
    filter: brightness(0) invert(1);
}

/* Accordion headers */
.accordion-button:not(.collapsed) {
    background: var(--ds-primary-soft);
    color: var(--ds-primary-dark);
}

/* List group headers */
.list-group-item.active {
    background: var(--ds-primary);
    border-color: var(--ds-primary);
}

/* Nav tabs active state */
.nav-tabs .nav-link.active {
    background: var(--ds-surface);
    color: var(--ds-primary);
    border-color: var(--ds-border) var(--ds-border) var(--ds-surface);
    font-weight: 600;
}

/* Pagination active */
.pagination .page-item.active .page-link {
    background: var(--ds-primary);
    border-color: var(--ds-primary);
}

/* Badge primary */
.badge.bg-primary {
    background: var(--ds-primary) !important;
}

/* Alert primary */
.alert-primary {
    background: var(--ds-primary-soft);
    border-left: 4px solid var(--ds-primary);
    color: var(--ds-primary-dark);
}

/* Responsive table wrapper — flat, hairline border (no heavy shadow) */
.table-responsive {
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
    overflow: hidden;
}

/* Ensure form-card-header flat cobalt */
.form-card-header {
    background: var(--ds-primary-dark) !important;
    color: var(--ds-text-invert) !important;
    padding: 1rem 1.5rem;
    border-radius: 8px 8px 0 0;
}

/* NOTE: Do NOT blanket-whiten every descendant (`.form-card-header * { color:white !important }`).
   The header already sets white text, so plain content inherits it automatically. The blanket
   rule force-overrode self-coloured pills (summary chips / status badges) that sit on light
   pastel backgrounds, making their dark text + icons invisible. Let those keep their own colours;
   only re-assert white for the title block which may contain muted helper text. */
.form-card-header .form-card-title,
.form-card-header .form-card-title * {
    color: var(--ds-text-invert) !important;
}

/* Print-friendly - remove fills for printing */
@media print {
    .table thead,
    .table thead th,
    .table tfoot,
    .table tfoot td,
    .card-header,
    .form-card-header,
    .modal-header {
        background: #f8f9fa !important;
        color: #000 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* When a print/receipt page is active, strip the app chrome so only the
       printable document reaches the printer (set via body.printing-doc by the
       PrintInvoice / Print QR pages). */
    body.printing-doc .topnav,
    body.printing-doc nav.topnav-menu,
    body.printing-doc .sidebar,
    body.printing-doc .top-row,
    body.printing-doc .no-print {
        display: none !important;
    }

    body.printing-doc .page,
    body.printing-doc .main-content,
    body.printing-doc .content-wrapper {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        width: auto !important;
    }

    /* Safety net: never print the app chrome (top nav bar, brand/icons, error UI)
       regardless of when body.printing-doc is applied — browsers that fire their
       own Ctrl+P / Save-as-PDF can miss the JS-set class, leaving the nav visible. */
    header.topnav,
    nav.topnav-menu,
    .topnav-brand,
    .sidebar,
    #blazor-error-ui {
        display: none !important;
    }

    /* Standard convention: anything tagged .no-print is always stripped from print output. */
    .no-print {
        display: none !important;
    }
}

/* Dark mode override (if implementing dark mode later) */
@media (prefers-color-scheme: dark) {
    /* Keep flat cobalt headers in dark mode */
    .table thead,
    .table thead th {
        background: var(--ds-primary-dark) !important;
    }
}

/* ============================================
   SORTABLE HEADERS (SortableHeader.razor)
   ============================================ */
th.grid-sortable {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: background-color 0.15s ease;
}

th.grid-sortable:hover {
    background: var(--ds-primary) !important;
}

.grid-sortable-inner {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.grid-sort-icon {
    font-size: 0.7rem;
    opacity: 0.45;
    transition: opacity 0.15s ease;
}

th.grid-sortable:hover .grid-sort-icon {
    opacity: 0.85;
}

th.grid-sortable.is-sorted .grid-sort-icon {
    opacity: 1;
}

/* Keep numeric sortable headers right-aligned with their cells */
th.grid-sortable.text-end .grid-sortable-inner {
    justify-content: flex-end;
}

th.grid-sortable.text-center .grid-sortable-inner {
    justify-content: center;
}

/* ============================================
   GRID PAGER (GridPager.razor)
   ============================================ */
.grid-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 0.25rem 0.25rem;
}

.grid-pager-info {
    font-size: 0.82rem;
    color: var(--ds-text-muted);
}

.grid-pager-controls {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.grid-pager-size {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: var(--ds-text-muted);
}

.grid-pager-size .form-select {
    width: auto;
    min-width: 4.25rem;
}

.grid-pager-nav {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
}

.grid-page-btn {
    min-width: 2rem;
    height: 2rem;
    padding: 0 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ds-border);
    background: var(--ds-surface);
    color: var(--ds-text);
    border-radius: var(--ds-radius-sm, 6px);
    font-size: 0.82rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.grid-page-btn:hover:not(:disabled):not(.active) {
    background: var(--ds-primary-soft);
    border-color: var(--ds-primary);
    color: var(--ds-primary-dark);
}

.grid-page-btn.active {
    background: var(--ds-primary);
    border-color: var(--ds-primary);
    color: var(--ds-text-invert);
    font-weight: 600;
}

.grid-page-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

@media (max-width: 576px) {
    .grid-pager {
        justify-content: center;
    }
    .grid-pager-controls {
        flex-direction: column;
        gap: 0.5rem;
    }
}