/**
 * MOJO Framework List Styles
 *
 * Layout for the toolbar / show-more row / list body in ListView. The
 * toolbar reuses TableView's `.table-action-buttons` shell — no duplicate
 * styles needed. This file only contains list-specific bits (the
 * "Show more" row and a mild empty-state nicety).
 *
 * Theme: tokens-based, so dark theme is automatic via Bootstrap's
 * `[data-bs-theme="dark"]` cascade.
 */

/* ========================================================================
   Wrapper
   ======================================================================== */

.list-view-wrapper {
    display: flex;
    flex-direction: column;
}

.list-view-wrapper .list-items {
    display: flex;
    flex-direction: column;
}

/* ========================================================================
   Show more row (paginationMode: 'more')
   ======================================================================== */

.list-show-more-row {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

.list-show-more-row .btn {
    min-width: 10rem;
}

.list-show-more-row .btn[disabled] {
    cursor: progress;
}

/* ========================================================================
   Clickable items (onItemClick / clickable: true)
   ======================================================================== */

.list-view-item.clickable {
    cursor: pointer;
    transition: background-color 0.12s ease;
}

.list-view-item.clickable:hover {
    background-color: var(--bs-tertiary-bg);
}

/* The clickable hover lives on the item root, but inner elements with their
   own click affordances (buttons, action chips) should remain visually
   neutral so the user can tell they're separately clickable. */
.list-view-item.clickable [data-action]:hover {
    background-color: transparent;
}

/* ========================================================================
   Filter pill text — readable on the framework's subtle badge background
   ======================================================================== */

/* The pill wraps a `.btn.btn-link` which Bootstrap colors with a hard-coded
   link blue. Inside `.badge.bg-primary` (which the framework now renders
   as a soft pill with emphasis-text), we want the button text to inherit
   the pill's own foreground so it stays readable in both themes. */
.badge .list-filter-pill-text,
.badge .list-filter-pill-text:hover,
.badge .list-filter-pill-text:focus {
    color: inherit;
    text-decoration: none;
}

/* ========================================================================
   Loading / empty states
   ======================================================================== */

.list-view-wrapper .list-loading {
    color: var(--bs-secondary-color);
}

.list-view-wrapper .list-empty {
    color: var(--bs-secondary-color);
}

/* ========================================================================
   Group header rows (groupBy primitive)

   Four opt-in styles, selected via the ListView constructor option
   `groupHeaderStyle: 'banner' | 'mark' | 'band' | 'rule'`. Each renders a
   modifier class on the header view's outer element:

     'banner' (default) — neutral full-width tint, label centered
     'mark'             — small accent square + bold label + fading hairline
     'band'             — neutral full-width tint, label left-aligned
     'rule'             — editorial fieldset-legend, label centered between rules

   The accent color (used by 'mark') is exposed as a CSS variable so
   consumers can retint a single header (e.g. severity tone) without
   rewriting the template:
       <div class="list-group-header list-group-header--mark"
            style="--list-group-header-accent: var(--bs-success)">

   Light + dark from a single block: every property uses Bootstrap tokens
   that re-skin under [data-bs-theme="dark"], so no override block needed.

   TableView shape uses the same modifier vocabulary on the `<tr>` outer
   (`.list-group-header-row--<style>`) and the styles cascade through
   descendant selectors to the `<th class="list-group-header-cell">` inside.
   ======================================================================== */

/* Base — every variant gets these. Behavior only (no decoration) so the
   modifier class owns the visual. */
.list-group-header {
    pointer-events: none;          /* never participate in row-click affordances */
}

.list-group-header-row {
    background: transparent;
}

.list-group-header-row .list-group-header-cell {
    border-top: 0;
    border-bottom: 0;
    background: transparent;
    pointer-events: none;
}

/* ============================================================
   Style: 'banner' — neutral full-width tint, label centered (default)
   ============================================================ */

.list-group-header--banner {
    display: block;
    padding: 0.5rem 1rem;
    background: var(--bs-tertiary-bg);
    color: var(--bs-emphasis-color);
    text-align: center;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border-bottom: 1px solid var(--bs-border-color-translucent);
}
.list-group-header--banner:not(:first-child) {
    border-top: 1px solid var(--bs-border-color-translucent);
}

.list-group-header-row--banner .list-group-header-cell {
    padding: 0.5rem 1rem;
    background: var(--bs-tertiary-bg);
    color: var(--bs-emphasis-color);
    text-align: center;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border-bottom: 1px solid var(--bs-border-color-translucent);
}
.list-group-header-row--banner:not(:first-child) .list-group-header-cell {
    border-top: 1px solid var(--bs-border-color-translucent);
}

/* ============================================================
   Style: 'band' — neutral full-width tint, label left-aligned
   ============================================================ */

.list-group-header--band {
    display: block;
    padding: 0.5rem 1rem;
    background: var(--bs-tertiary-bg);
    color: var(--bs-secondary-color);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-bottom: 1px solid var(--bs-border-color-translucent);
}
.list-group-header--band:not(:first-child) {
    border-top: 1px solid var(--bs-border-color-translucent);
}

.list-group-header-row--band .list-group-header-cell {
    padding: 0.5rem 1rem;
    background: var(--bs-tertiary-bg);
    color: var(--bs-secondary-color);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-bottom: 1px solid var(--bs-border-color-translucent);
}
.list-group-header-row--band:not(:first-child) .list-group-header-cell {
    border-top: 1px solid var(--bs-border-color-translucent);
}

/* ============================================================
   Style: 'mark' — small accent square + bold label + fading hairline

   Composition: a sharp 4×4 brand-tinted square anchors a bold uppercase
   label, followed by a directional gradient hairline that fades to
   transparent on the right. Mark + label aligned with item icons below
   (1rem horizontal padding).
   ============================================================ */

.list-group-header--mark {
    --list-group-header-accent: var(--bs-primary);

    display: flex;
    align-items: center;
    gap: 0.625rem;

    margin-top: 0.75rem;
    padding: 0.5rem 1rem 0.375rem;

    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--bs-emphasis-color);
}
.list-group-header--mark:first-child,
.list-items > .list-group-header--mark:first-child,
.list-view-wrapper .list-items > .list-group-header--mark:first-child {
    margin-top: 0;
}
.list-group-header--mark::before {
    content: '';
    width: 4px;
    height: 4px;
    flex-shrink: 0;
    background: var(--list-group-header-accent);
}
.list-group-header--mark::after {
    content: '';
    flex-grow: 1;
    height: 1px;
    background: linear-gradient(
        to right,
        var(--bs-border-color),
        var(--bs-border-color) 1.5rem,
        transparent
    );
}

.list-group-header-row--mark .list-group-header-cell {
    --list-group-header-accent: var(--bs-primary);

    display: flex;
    align-items: center;
    gap: 0.625rem;

    padding: 1rem 1rem 0.5rem;

    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--bs-emphasis-color);
}
.list-group-header-row--mark:first-child .list-group-header-cell {
    padding-top: 0.5rem;
}
.list-group-header-row--mark .list-group-header-cell::before {
    content: '';
    width: 4px;
    height: 4px;
    flex-shrink: 0;
    background: var(--list-group-header-accent);
}
.list-group-header-row--mark .list-group-header-cell::after {
    content: '';
    flex-grow: 1;
    height: 1px;
    background: linear-gradient(
        to right,
        var(--bs-border-color),
        var(--bs-border-color) 1.5rem,
        transparent
    );
}

/* ============================================================
   Style: 'rule' — editorial fieldset-legend, label centered between rules
   ============================================================ */

.list-group-header--rule {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 1rem 1rem 0.625rem;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--bs-emphasis-color);
}
.list-group-header--rule::before,
.list-group-header--rule::after {
    content: '';
    flex-grow: 1;
    height: 1px;
    background: var(--bs-border-color);
}

.list-group-header-row--rule .list-group-header-cell {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 1rem 1rem 0.625rem;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--bs-emphasis-color);
}
.list-group-header-row--rule .list-group-header-cell::before,
.list-group-header-row--rule .list-group-header-cell::after {
    content: '';
    flex-grow: 1;
    height: 1px;
    background: var(--bs-border-color);
}

/* ========================================================================
   Row stripe (severity-coded left-edge color)

   Opt-in via the ListView constructor option `rowStripe: (model) => token`.
   The callback returns a Bootstrap variant token (`danger / warning /
   success / info / primary / secondary`) and ListView applies the
   matching class to each item's outer element. Token values resolve via
   `--bs-*` CSS variables so light + dark themes track automatically.

   TableView rows are `<tr>`s — the equivalent rules live in `table.css`
   (using `box-shadow: inset` on `td:first-child` because `border-left`
   on a `<tr>` doesn't render under Bootstrap's `border-collapse:
   separate`).
   ======================================================================== */

.list-view-item.list-row-stripe-danger    { border-left: 4px solid var(--bs-danger); }
.list-view-item.list-row-stripe-warning   { border-left: 4px solid var(--bs-warning); }
.list-view-item.list-row-stripe-info      { border-left: 4px solid var(--bs-info); }
.list-view-item.list-row-stripe-success   { border-left: 4px solid var(--bs-success); }
.list-view-item.list-row-stripe-primary   { border-left: 4px solid var(--bs-primary); }
.list-view-item.list-row-stripe-secondary { border-left: 4px solid var(--bs-secondary); }