/**
 * ============================================================================
 * MUAADH ROSTER — Tables (base + AJAX chrome)
 * ============================================================================
 *
 * Consolidated 2026-05-13 (Phase 3 Wave 12).
 *
 * Before this wave, the base .muaadh-roster (table layout, borders, rows,
 * headers, hover) lived in muaadh-core.css and this file only carried
 * the AJAX-driven chrome added in Phase 9a (the DataTables replacement,
 * 2026-05-09). After Wave 12 both layers live here in one file.
 *
 * Sections in order:
 *   1. BASE TABLE (.muaadh-roster, thead/tbody, scroll variant, hover)
 *      — extracted from muaadh-core.css §SECTION 7: TABLE COMPONENT
 *   2. AJAX CHROME (.muaadh-roster-frame and friends)
 *      — original content of this file (Phase 9a, 2026-05-09)
 *
 * Components:
 *   resources/views/components/muaadh-roster.blade.php
 * JS:
 *   public/assets/js/muaadh-roster.js
 * ============================================================================
 */

/* ============================================================================
 * SECTION 1: BASE TABLE
 * Extracted from muaadh-core.css §SECTION 7 in Phase 3 Wave 12
 * ============================================================================ */

  transform: translate(-50%);
}

/* ============================================================================
   .muaadh-roster — canonical source for AJAX data tables (Band 13)
   ============================================================================ */

/* ============================================================================
   SECTION 7: TABLE COMPONENT
   ============================================================================ */

.muaadh-roster {
    width: 100%;
    border-collapse: collapse;
    background-color: var(--surface-card);
    border-radius: var(--chassis-radius-card);
    overflow: hidden;
    box-shadow: var(--chassis-shadow-card-elevated);
    font-size: var(--text-sm);
}
.muaadh-roster thead th {
    padding: var(--space-4);
    font-size: var(--text-xs);
    font-weight: var(--theme-font-semibold);
    text-transform: uppercase;
    letter-spacing: var(--theme-letter-spacing-wide);
    color: var(--text-secondary);
    background-color: var(--theme-bg-light);
    border-bottom: none;
    text-align: left;
    white-space: nowrap;
}
.muaadh-roster tbody td {
    padding: var(--space-4);
    font-size: var(--text-sm);
    color: var(--text-primary);
    border-bottom: var(--chassis-border-thin) solid var(--theme-border-light);
    vertical-align: middle;
}
.muaadh-roster tbody tr {
    transition: background var(--chassis-duration-quick) ease;
}
.muaadh-roster tbody tr:hover {
    background-color: var(--surface-elevated);
}
.muaadh-roster tbody tr:last-child td {
    border-bottom: none;
}
/* Responsive Table Wrapper */
.muaadh-roster-responsive {
    overflow-x: auto;

}
/* Dark Table Header */
.muaadh-roster__head--dark {
    background-color: var(--surface-sunken);
    color: var(--text-primary);
}
.muaadh-roster__head--dark th {
    background-color: inherit;
    color: inherit;
}
.muaadh-roster-nowrap th,
.muaadh-roster-nowrap td {
    white-space: nowrap;
}
/* ── Scrollable Table Container ──────────────────────────────────────────────
 * Unified scroll wrapper for all data tables (catalog, modal, fitment, etc.)
 * Provides: horizontal scroll for wide tables + vertical scroll with sticky header.
 * Usage: <div class="m-table-scroll"><table>...</table></div>
 * ────────────────────────────────────────────────────────────────────────── */
.muaadh-roster-scroll {
    overflow: auto;

    max-height: 70vh;
}
.muaadh-roster-scroll thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: var(--theme-card-bg);
}
/* === From style.css C12: Flat modern tables === */
/* ============================================================================
   C12 — TABLES (Flat Modern)
   ============================================================================ */
.muaadh-roster,
table {
    width: 100%;
    margin-bottom: 0;
    color: var(--text-primary);
    border-collapse: collapse;
    border-spacing: 0;
    background-color: var(--theme-card-bg);
}
/* Table Header */
.muaadh-roster thead th,
table thead th {
    background-color: var(--theme-bg-light);
    color: var(--text-primary);
    font-size: var(--text-xs);
    font-weight: var(--theme-font-semibold);
    text-transform: uppercase;
    letter-spacing: var(--theme-letter-spacing-wide);
    padding: var(--space-3) var(--space-4);
    border-bottom: var(--chassis-border-normal) solid var(--theme-border-light);
    border-top: none;
    white-space: nowrap;
    vertical-align: middle;
}
/* Table Body Cells */
.muaadh-roster tbody td,
table tbody td {
    padding: var(--space-3) var(--space-4);
    vertical-align: middle;
    border-bottom: var(--chassis-border-thin) solid var(--theme-border-light);
    border-top: none;
    font-size: var(--text-sm);
    color: var(--text-secondary);
}
/* Table Row Hover */
.muaadh-roster tbody tr:hover,
table tbody tr:hover {
    background-color: var(--theme-bg-light);


/* ============================================================================
 * SECTION 2: AJAX ROSTER CHROME (Phase 9a, 2026-05-09)
 * ============================================================================ */

.muaadh-roster-frame {
    position: relative;
}

/* Loading veil — drawn over the table during fetch. */
.muaadh-roster-frame__veil {
    position: absolute;
    inset: 0;
    background: var(--theme-overlay-light);
    display: none;
    align-items: center;
    justify-content: center;
    color: var(--theme-text-muted);
    font-size: var(--text-sm);
    pointer-events: none;
    z-index: 1;
}

.muaadh-roster-frame--loading .muaadh-roster-frame__veil {
    display: flex;
    pointer-events: auto;
}

/* Sortable column header indicator — small, only on sortable columns,
   only highlighted when active. NO arrow on every column. */
.muaadh-roster__sort {
    cursor: pointer;
    user-select: none;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

.muaadh-roster__sort-indicator {
    font-size: var(--text-xs);
    color: var(--theme-text-muted);
    opacity: 0.4;
    transition: opacity var(--chassis-duration-fast) ease,
                color var(--chassis-duration-fast) ease;
}

.muaadh-roster__sort--active .muaadh-roster__sort-indicator {
    opacity: 1;
    color: var(--theme-primary);
}

/* Empty state — shown when rows array is empty. */
.muaadh-roster-frame__empty {
    padding: var(--space-8) var(--space-4);
    text-align: center;
    color: var(--theme-text-muted);
    font-size: var(--text-sm);
}

/* Row actions cell — flex cluster of links/buttons. */
.muaadh-roster__actions {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

/* Pagination wrap — center the existing .muaadh-stepper-simple under the table. */
.muaadh-roster-frame__pagination {
    display: flex;
    justify-content: center;
    padding: var(--space-3) 0;
}

/* Total summary — minimalist, opt-in; appears only if [data-show-total]. */
.muaadh-roster-frame__total {
    color: var(--theme-text-muted);
    font-size: var(--text-xs);
    text-align: center;
    padding-bottom: var(--space-2);
    font-variant-numeric: tabular-nums;
}

/* ============================================================================
 * APPENDED (Phase 13 Wave 3 — 2026-05-13): rules pulled from muaadh-core.css
 * ============================================================================ */

.muaadh-roster th,
.muaadh-roster td {
    padding: var(--space-3) var(--space-4);
    text-align: start;
    border-bottom: var(--chassis-border-thin) solid var(--border-light);
}

.muaadh-roster th {
    background-color: var(--surface-elevated);
    font-weight: var(--theme-font-semibold);
    color: var(--text-secondary);
    border-bottom-color: var(--border-default);
}


/* ============================================================================
 * APPENDED (Phase 13 Wave 3 — 2026-05-13): rules pulled from muaadh-core.css
 * ============================================================================ */

.muaadh-roster__cell-width-60  { width: 60px; }

.muaadh-roster__cell-width-80  { width: 80px; }

.muaadh-roster__cell-width-100 { width: 100px; }

.muaadh-roster-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
}

/* .muaadh-roster-actions__action --view/--edit/--delete removed 2026-05-19.
   Per-button styling now comes from the canonical .muaadh-action --primary/
   --danger/--info --icon system. The .muaadh-roster-actions container above
   stays as layout-only (flex + gap). */

.muaadh-roster__row--primary  { background-color: var(--action-primary-light); }

.muaadh-roster__row--info     { background-color: var(--action-info-light); }

.muaadh-roster--striped tbody tr:nth-child(odd) {
    background-color: var(--surface-elevated);
}

.muaadh-roster--bordered {
    border: var(--chassis-border-thin) solid var(--border-default);
}

.muaadh-roster--bordered th,
.muaadh-roster--bordered td {
    border: var(--chassis-border-thin) solid var(--border-default);
}

.muaadh-roster--borderless th,
.muaadh-roster--borderless td,
.muaadh-roster--borderless thead th,
.muaadh-roster--borderless tbody + tbody {
    border: 0;
}

.muaadh-roster--hover tbody tr:hover {
    background-color: var(--surface-elevated);
}

.muaadh-roster--sm th,
.muaadh-roster--sm td {
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
}

.muaadh-roster--striped tbody tr:nth-child(even) {
    background-color: var(--surface-sunken);
}

.muaadh-roster--light tbody tr  { background-color: var(--surface-elevated); }

.muaadh-roster--warning tbody tr { background-color: var(--action-warning-light); }

.muaadh-roster--active tbody tr  { background-color: var(--action-primary-light); }


/* =========================================================================
   Line-item cells — name + part-number link styling for the unified
   purchase/order/sale/invoice tables (<x-frontend.line-item-row>). The
   identity is split across its own columns (Part Number | Name | Quality);
   these style the cell contents. Lives here (not muaadh-catalogitem-list.css)
   because roster.css is the only list stylesheet loaded on all 3 layouts.
   ========================================================================= */
.muaadh-lineitem-row__name {
    font-weight: var(--theme-font-semibold, 600);
    color: var(--text-primary);
    text-decoration: none;
    overflow-wrap: anywhere;
}

.muaadh-lineitem-row__name:hover { text-decoration: underline; }

.muaadh-lineitem-row__pn {
    font-family: monospace;
    font-size: var(--text-sm);
    color: var(--text-secondary);
    text-decoration: none;
}