/* ============================================================================
   muaadh-catalogitem-list.css — unified visual identity for catalog item lists
   ----------------------------------------------------------------------------
   Created 2026-05-11 (Phase 2 of unified-itemlist plan, doc archived).

   Adopted by 8 surfaces that today each style their own item-list table:
     · /result/{part_number}      — Alternatives section
     · /modal/alternative/{pn}    — same alternatives, AJAX modal
     · /modal/fitment/{itemId}    — fitment vehicles (per brand)
     · /brands                    — list-view mode (the table replacement)
     · illustrations              — "Parts in this diagram"
     · callout modal              — partials/api/part-details.blade.php
     · callout modal SHELL        — callout-modal.blade.php cleanup
     · search results modal       — "Select Matching Part Code"

   BEM convention. EVERY block-level class is muaadh-catalogitem-list*.
   No global element selectors — every rule starts with the BEM block. The
   sheet is safe to load alongside any other stylesheet without bleeding.

   Cell variants (--image, --pn, --name, etc.) act as MODIFIERS on td/th.
   A surface chooses which columns to emit; the sheet styles whichever are
   present. Surfaces with fewer columns just don't render the others.
   ============================================================================ */

/* ── Outer wrapper — horizontal scroll on narrow widths ─────────────────── */
.muaadh-catalogitem-list {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--theme-card-bg, #ffffff);
    border-radius: var(--chassis-radius, 8px);
    border: var(--chassis-border-thin, 1px) solid var(--theme-border, #e5e7eb);
}

.muaadh-catalogitem-list--compact {
    /* Tighter padding for the callout modal — the modal already has its
       own padding around the table, so the table itself can be flush. */
    border-radius: 0;
    border: 0;
}

/* ── The <table> ────────────────────────────────────────────────────────── */
.muaadh-catalogitem-list__table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm, 0.875rem);
    color: var(--theme-text, #1f2937);
}

/* ── Head ───────────────────────────────────────────────────────────────── */
.muaadh-catalogitem-list__head {
    background: var(--theme-bg-light, #faf8f5);
}

.muaadh-catalogitem-list__head-cell {
    padding: var(--space-3, 0.75rem) var(--space-3, 0.75rem);
    font-size: var(--text-xs, 0.75rem);
    font-weight: var(--theme-font-semibold, 600);
    color: var(--theme-text-muted, #6b7280);
    text-transform: uppercase;
    letter-spacing: var(--theme-letter-spacing-normal, 0.02em);
    white-space: nowrap;
    text-align: start;
    border-bottom: var(--chassis-border-normal, 1px) solid var(--theme-border, #e5e7eb);
}

.muaadh-catalogitem-list--compact .muaadh-catalogitem-list__head-cell {
    padding: var(--space-2, 0.5rem) var(--space-2, 0.5rem);
    font-size: 10px;
}

/* Centred head cells for icon-heavy columns. Pair with --center on the body
   cell to keep alignment consistent across head/body. */
.muaadh-catalogitem-list__head-cell--center {
    text-align: center;
}

/* ── Rows ───────────────────────────────────────────────────────────────── */
.muaadh-catalogitem-list__row {
    border-bottom: var(--chassis-border-thin, 1px) solid var(--theme-border, #e5e7eb);
    transition: background-color var(--chassis-duration-fast, 0.15s) ease;
}

.muaadh-catalogitem-list__row:last-child {
    border-bottom: 0;
}

.muaadh-catalogitem-list__row:hover {
    background-color: rgba(var(--theme-primary-rgb, 90, 60, 30), 0.04);
}

/* Persistent highlight applied by JS when a row matches a search result.
   Survives hover cycles. */
.muaadh-catalogitem-list__row--searched {
    background-color: rgba(var(--theme-primary-rgb, 90, 60, 30), 0.10);
    box-shadow: inset 3px 0 0 var(--theme-primary, #5a3c1e);
}

.muaadh-catalogitem-list__row--searched:hover {
    background-color: rgba(var(--theme-primary-rgb, 90, 60, 30), 0.14);
}

/* Loading state — applies during AJAX pagination cycle. */
.muaadh-catalogitem-list.is-loading {
    opacity: 0.55;
    pointer-events: none;
}

/* ── Default cell ───────────────────────────────────────────────────────── */
.muaadh-catalogitem-list__cell {
    padding: var(--space-3, 0.75rem) var(--space-3, 0.75rem);
    vertical-align: middle;
    color: var(--theme-text, #1f2937);
    /* Default: nowrap. Wrappable cells (--name, --match, --ext) opt out
       with their own overrides below. */
    white-space: nowrap;
}

.muaadh-catalogitem-list--compact .muaadh-catalogitem-list__cell {
    padding: var(--space-2, 0.5rem) var(--space-2, 0.5rem);
    font-size: var(--text-xs, 0.75rem);
}

.muaadh-catalogitem-list__cell--center {
    text-align: center;
}

/* ── Cell variant: Image ────────────────────────────────────────────────── */
.muaadh-catalogitem-list__cell--image {
    width: 4rem;
    padding-inline-end: 0;
}

.muaadh-catalogitem-list--compact .muaadh-catalogitem-list__cell--image {
    width: 3rem;
}

.muaadh-catalogitem-list__media-link {
    display: inline-block;
    line-height: 0;
    border-radius: var(--chassis-radius-sm, 4px);
    overflow: hidden;
    border: var(--chassis-border-thin, 1px) solid var(--theme-border, #e5e7eb);
    background: var(--theme-bg-light, #faf8f5);
    transition: border-color var(--chassis-duration-fast, 0.15s) ease;
}

.muaadh-catalogitem-list__media-link:hover {
    border-color: var(--theme-primary, #5a3c1e);
}

.muaadh-catalogitem-list__img {
    display: block;
    width: 3rem;
    height: 3rem;
    object-fit: contain;
    background: var(--theme-card-bg, #ffffff);
}

.muaadh-catalogitem-list--compact .muaadh-catalogitem-list__img {
    width: 2.25rem;
    height: 2.25rem;
}

/* ── Cell variant: Part Number ──────────────────────────────────────────── */
.muaadh-catalogitem-list__cell--pn {
    font-family: var(--theme-font-mono);
    font-weight: var(--theme-font-bold, 700);
    color: var(--theme-primary, #5a3c1e);
    letter-spacing: 0.02em;
}

.muaadh-catalogitem-list__pn-link {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dashed transparent;
    transition: border-color var(--chassis-duration-fast, 0.15s) ease;
}

.muaadh-catalogitem-list__pn-link:hover {
    border-bottom-color: currentColor;
}

/* Inert part-number / name (alternatives modal context — no route). */
.muaadh-catalogitem-list__pn-text {
    color: inherit;
}

/* Back button inside the offers modal header — shown by catalog-offers.js
   only when there's a previous view to return to. */
.muaadh-offers-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin-inline-end: var(--space-2, 8px);
    background: transparent;
    border: none;
    color: inherit;
    cursor: pointer;
    font-size: 1.1em;
}

.muaadh-offers-back:hover {
    opacity: 0.7;
}

/* ── Cell variant: Name / Description ───────────────────────────────────── */
/* Phase 6.3: Per owner directive, long names must NOT wrap to a
   second line. The column widens to fit the longest value; if the
   total table width exceeds the viewport, the .muaadh-catalogitem-list
   wrapper handles horizontal scrolling via overflow-x: auto (line 28).
   Removed: max-width + overflow-wrap + white-space:normal. */
.muaadh-catalogitem-list__cell--name {
    white-space: nowrap;
    color: var(--theme-text-muted, #6b7280);
    font-size: var(--text-sm, 0.875rem);
    line-height: 1.4;
}

.muaadh-catalogitem-list--compact .muaadh-catalogitem-list__cell--name {
    font-size: var(--text-xs, 0.75rem);
}

/* ── Cell variant: Lowest Price ─────────────────────────────────────────── */
.muaadh-catalogitem-list__cell--price {
    font-variant-numeric: tabular-nums;
    text-align: end;
    font-weight: var(--theme-font-semibold, 600);
    color: var(--theme-text, #1f2937);
}

.muaadh-catalogitem-list__price--old {
    display: inline-block;
    margin-inline-end: var(--space-2, 0.5rem);
    color: var(--theme-text-muted, #6b7280);
    text-decoration: line-through;
    font-weight: var(--theme-font-medium, 500);
}

/* ── Cell variant: Offers (button container) ────────────────────────────── */
.muaadh-catalogitem-list__cell--offers {
    text-align: center;
}

/* ── Cell variant: Actions (favorites/cart row — remove etc.) ───────────── */
.muaadh-catalogitem-list__cell--actions {
    text-align: center;
    white-space: nowrap;
}

.muaadh-catalogitem-list__cell--actions > * + * {
    margin-inline-start: var(--space-2, 0.5rem);
}

/* ── Cell variant: Quality (cart — quality-brand chip) ──────────────────── */
.muaadh-catalogitem-list__cell--quality {
    text-align: center;
}

/* ── Cell variant: Stock / availability (cart — stock, preorder, hold) ──── */
.muaadh-catalogitem-list__cell--stock {
    text-align: center;
}

/* ── Cell variant: Cart quantity (the −/input/+ control group, centred) ─── */
.muaadh-catalogitem-list__cell--cart-qty {
    text-align: center;
}

.muaadh-catalogitem-list__cell--cart-qty .muaadh-cart__qty-controls {
    justify-content: center;
    display: inline-flex;
}

/* ── Cell variant: Line total (cart) ────────────────────────────────────── */
.muaadh-catalogitem-list__cell--total {
    white-space: nowrap;
    font-weight: var(--theme-font-bold, 700);
    font-variant-numeric: tabular-nums;
}

/* ── Cell variant: Fitment (button container) ───────────────────────────── */
.muaadh-catalogitem-list__cell--fitment {
    text-align: center;
}

/* ── Cell variant: Callout (small numeric badge) ────────────────────────── */
.muaadh-catalogitem-list__cell--callout {
    width: 3rem;
    text-align: center;
    font-weight: var(--theme-font-bold, 700);
    color: var(--theme-primary, #5a3c1e);
    font-size: var(--text-sm, 0.875rem);
}

/* ── Cell variant: Qty (per-part quantity in callout modal) ─────────────── */
/* Distinct from --callout: callout = the stamped number on the image
   (identifies which spot), qty = how many of this part are needed.
   Same width but rendered in muted color + smaller weight so the two
   adjacent columns visually separate at a glance. */
.muaadh-catalogitem-list__cell--qty {
    width: 3rem;
    text-align: center;
    color: var(--theme-text-muted, #6b7280);
    font-variant-numeric: tabular-nums;
    font-size: var(--text-sm, 0.875rem);
}

/* ── Cell variant: Match (spec tags) ────────────────────────────────────── */
.muaadh-catalogitem-list__cell--match {
    white-space: normal;
    text-align: center;
}

.muaadh-catalogitem-list__cell--match > * {
    /* The inner .muaadh-catalog-match-tags container — flex by default in
       the project's tag CSS. Keep it centred when sitting in a centred
       cell. */
    justify-content: center;
}

/* The Extensions column was folded into the Match modal — no
   --ext cell variant is emitted anymore. The class group used
   to live here before the merge. */

/* ── Cell variant: Period (From/To date) ────────────────────────────────── */
.muaadh-catalogitem-list__cell--period {
    font-variant-numeric: tabular-nums;
    color: var(--theme-text-muted, #6b7280);
    font-size: var(--text-xs, 0.75rem);
    text-align: center;
}

/* ── Match BUTTON (icon-only) ──────────────────────────────────────
   Lives in the --match cell of any unified table; click is handled
   by muaadh-match-ext-modal.js which reads data-match-groups and
   opens the singleton modal. Extensions are folded INTO that modal
   per group — there's no separate Ext button anymore. */
.muaadh-match-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: var(--chassis-border-thin, 1px) solid var(--theme-border, #e5e7eb);
    border-radius: var(--chassis-radius-sm, 4px);
    background: var(--theme-bg-light, #faf8f5);
    color: var(--theme-primary, #5a3c1e);
    cursor: pointer;
    transition: background var(--chassis-duration-fast, 0.15s) ease,
                border-color var(--chassis-duration-fast, 0.15s) ease;
}

.muaadh-match-action:hover {
    background: var(--theme-card-bg, #ffffff);
    border-color: var(--theme-primary, #5a3c1e);
}

/* Singleton match/ext modal body — Phase 6.4.2 redesign.
   Match: one CARD per group. Ext: a single card-less list.
   The cards visually separate each valid configuration so the
   user reads "this is combo 1, this is combo 2" instead of
   conflating values across groups. */

.muaadh-match-modal__groups {
    display: flex;
    flex-direction: column;
    gap: var(--space-3, 0.75rem);
    padding: var(--space-2, 0.5rem);
}

.muaadh-match-modal__card {
    border: var(--chassis-border-thin, 1px) solid var(--theme-border, #e5e7eb);
    border-radius: var(--chassis-radius, 8px);
    background: var(--theme-bg-light, #faf8f5);
    overflow: hidden;
}

.muaadh-match-modal__card-header {
    padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
    background: var(--theme-card-bg, #ffffff);
    border-bottom: var(--chassis-border-thin, 1px) solid var(--theme-border, #e5e7eb);
    font-weight: var(--theme-font-semibold, 600);
    font-size: var(--text-xs, 0.75rem);
    color: var(--theme-primary, #5a3c1e);
    text-transform: uppercase;
    letter-spacing: var(--theme-letter-spacing-normal, 0.02em);
}

/* Periods list inside a Match-modal card — Phase 6.4.6.
   One bullet per psg row that contributed to this signature.
   Shown after the items list, separated by a thin divider, so the
   spec values read first and the periods are secondary context. */
.muaadh-match-modal__periods {
    list-style: none;
    padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
    margin: 0;
    border-top: var(--chassis-border-thin, 1px) solid var(--theme-border, #e5e7eb);
    background: var(--theme-card-bg, #ffffff);
}

.muaadh-match-modal__period-item {
    font-size: var(--text-xs, 0.75rem);
    color: var(--theme-text-muted, #6b7280);
    font-variant-numeric: tabular-nums;
    line-height: 1.5;
}

.muaadh-match-modal__period-item + .muaadh-match-modal__period-item {
    border-top: var(--chassis-border-thin, 1px) dashed var(--theme-border, #e5e7eb);
    padding-top: var(--space-1, 0.25rem);
    margin-top: var(--space-1, 0.25rem);
}

/* Per-config Extensions section inside the Match-modal card.
   Owner directive: each Configuration shows its own Extensions
   below the periods, when they exist. The data is built per
   signature by CalloutDataService::appendExtensions and travels
   inside each match_group as `extensions: [{key, value}]`. */
.muaadh-match-modal__ext {
    border-top: var(--chassis-border-thin, 1px) solid var(--theme-border, #e5e7eb);
}

.muaadh-match-modal__ext-header {
    padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
    font-weight: var(--theme-font-semibold, 600);
    font-size: var(--text-xs, 0.75rem);
    color: var(--theme-text-muted, #6b7280);
    text-transform: uppercase;
    letter-spacing: var(--theme-letter-spacing-normal, 0.02em);
    background: var(--theme-card-bg, #ffffff);
}

.muaadh-match-modal__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.muaadh-match-modal__item {
    padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
    border-bottom: var(--chassis-border-thin, 1px) solid var(--theme-border, #e5e7eb);
    font-size: var(--text-sm, 0.875rem);
    line-height: 1.5;
}

.muaadh-match-modal__item:last-child {
    border-bottom: 0;
}

.muaadh-match-modal__label {
    font-weight: var(--theme-font-semibold, 600);
    color: var(--theme-text-muted, #6b7280);
    margin-inline-end: var(--space-1, 0.25rem);
}

.muaadh-match-modal__value {
    color: var(--theme-text, #1f2937);
}

/* ── Cell variant: Action (right-arrow / open-modal indicator) ──────────── */
.muaadh-catalogitem-list__cell--action {
    width: 2.5rem;
    text-align: center;
    color: var(--theme-primary, #5a3c1e);
}

/* ── Cell variant: Section parent label (search-results modal).
   Renders the section name as muted secondary text — the
   primary column is "Name", the parent is just contextual. */
.muaadh-catalogitem-list__cell--section {
    color: var(--theme-text-muted, #6b7280);
    font-size: var(--text-sm, 0.875rem);
}

/* ── Cell variant: Applicability text (search-results modal "Parts" tab).
   Free-form short text noting which trim/variant the part fits.
   Muted because it's contextual, not headline data.
   Phase 6.3: white-space: nowrap (no line breaks); column grows
   with content. Phase 6.6 will repurpose this column as a Match
   button anyway, but until then the no-wrap rule applies. */
.muaadh-catalogitem-list__cell--applicability {
    color: var(--theme-text-muted, #6b7280);
    font-size: var(--text-sm, 0.875rem);
    white-space: nowrap;
}

/* ── Row modifier: clickable (cursor pointer + hover lift).
   Used by search-results rows where the whole row is the click
   target (no inner link/button). The unified row hover state
   from .muaadh-catalogitem-list__row already brightens the
   background; this just adds the affordance. */
.muaadh-catalogitem-list__row--clickable {
    cursor: pointer;
}

/* ── Tag clusters when nested inside the table (match / extensions / fitment)
   These are scoped overrides — they let the project's existing
   .muaadh-catalog-{match,ext}-tag chip styles look right when wrapped in
   a list cell, without duplicating the chip styling. */
.muaadh-catalogitem-list__table .muaadh-catalog-match-tag,
.muaadh-catalogitem-list__table .muaadh-catalog-ext-tag {
    font-size: var(--text-xs, 0.75rem);
}

.muaadh-catalogitem-list--compact .muaadh-catalogitem-list__table .muaadh-catalog-match-tag,
.muaadh-catalogitem-list--compact .muaadh-catalogitem-list__table .muaadh-catalog-ext-tag {
    font-size: 10px;
    padding: 1px 5px;
}

.muaadh-catalogitem-list__table .muaadh-catalog-match-tags,
.muaadh-catalogitem-list__table .muaadh-catalog-ext-tags {
    gap: 3px;
    flex-wrap: wrap;
}

/* ── Pagination spacer — the <x-frontend.pagination-stepper> rendered below
   the table needs a small breather. Surfaces are free to wrap the
   stepper in their own container; this is a fallback default. */
.muaadh-catalogitem-list + .muaadh-category-catalogItems-pagination,
.muaadh-catalogitem-list + .muaadh-stepper-simple {
    margin-top: var(--space-3, 0.75rem);
}

/* ── Empty-state row (when items.count === 0 but the surface still wants to
   show the table shell with a placeholder row). Optional — surfaces that
   prefer a separate empty box ignore this. */
.muaadh-catalogitem-list__row--empty {
    color: var(--theme-text-muted, #6b7280);
    font-style: italic;
    text-align: center;
}

.muaadh-catalogitem-list__row--empty .muaadh-catalogitem-list__cell {
    padding-block: var(--space-6, 1.5rem);
}

/* ── Print stylesheet (light optimization) ─────────────────────────────── */
@media print {
    .muaadh-catalogitem-list {
        border: 0;
        background: transparent;
        overflow: visible;
    }
    .muaadh-catalogitem-list__row:hover,
    .muaadh-catalogitem-list__row--searched {
        background: transparent;
        box-shadow: none;
    }
    .muaadh-catalogitem-list__cell--action {
        display: none;
    }
}