/* =============================================================================
   list-page.css — SINGLE SOURCE OF TRUTH for the Standardized List Page Pattern
   =============================================================================
   The pattern was documented in CLAUDE.md but had no implementation, so every list
   page hand-copied the same layout CSS into its own scoped stylesheet. Measured
   2026-07-20: .table-container in 65 stylesheets, .navigation-bar in 50 (25 near-
   identical bodies — the differences were drift, e.g. gap 0.75rem vs 1rem — not
   design), .content-area in 58, tabs in 29.

   These rules are GLOBAL and unscoped, so they apply to every page that uses the
   pattern's class names. A page-scoped rule (.navigation-bar[b-xyz]) still wins on
   specificity, so pages can be migrated off their local copies incrementally and
   anything genuinely bespoke can still override.

   Canonical values taken from the dominant variant across the codebase.
   Colours are tokens only — never literals (see the token rubric in CLAUDE.md).

   SCOPE — this file defines exactly:
     .navigation-bar .tabs-inline .tab-compact .tab-badge .search-inline .nav-search-box
     .refresh-btn .content-area .table-container .filter-toggle-btn .filter-active-dot
     .advanced-filters-bar .advanced-filter-item .advanced-filter-label .advanced-filter-actions
     .adv-clear-btn
   NOT covered (still page-local): .inline-alert(s), .view-toggle-inline, .sort-inline,
   .pagination-wrapper — add them here only after checking for collisions.

   DELIBERATELY EXCLUDED — generic names already used with a DIFFERENT meaning elsewhere. An
   unscoped rule here would silently restyle unrelated markup:
     .spinner-sm  — BusyOverlay/PageLoader use it as a SIZE MODIFIER on a container
                    (`.spinner-sm .spinner-border`, `.page-loader-spinner.spinner-sm`), not as a
                    spinner itself. A global 14px ring + animation would break both components.
     .toggle-btn  — too generic; used outside list pages.
   Before adding any class here, grep the codebase for other meanings of that name first.
   ============================================================================= */

/* ============ Navigation Bar ============ */
.navigation-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 1.25rem;
    background: var(--bg-surface);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    margin-bottom: 1.25rem;
    overflow: visible;
    position: relative;
    /* intentional: local stacking context, not a global layer */
    z-index: 10;
}

/* ============ Tabs ============ */
.tabs-inline {
    display: flex;
    background: var(--bg-surface-tertiary);
    border-radius: 8px;
    padding: 0.25rem;
    gap: 0.125rem;
}

.tab-compact {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.75rem;
    background: transparent;
    border: none;
    border-radius: 6px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--sidenav-transition-fast);
    white-space: nowrap;
}

.tab-compact:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.tab-compact.active {
    background: var(--bg-surface);
    color: var(--text-primary);
    box-shadow: var(--shadow-sm);
}

.tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--border-color);
    border-radius: 9px;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.tab-compact.active .tab-badge {
    background: var(--theme-primary);
    color: var(--text-inverse);
}

.tab-badge.success {
    background: var(--theme-success-subtle);
    color: var(--theme-success);
}

.tab-badge.warning {
    background: var(--theme-warning-subtle);
    color: var(--theme-warning);
}

.tab-badge.danger {
    background: var(--theme-danger-subtle);
    color: var(--theme-danger);
}

.tab-badge.info {
    background: var(--theme-info-subtle);
    color: var(--theme-info);
}

.tab-compact.active .tab-badge.success,
.tab-compact.active .tab-badge.warning,
.tab-compact.active .tab-badge.danger,
.tab-compact.active .tab-badge.info {
    background: var(--theme-primary);
    color: var(--text-inverse);
}

/* ============ Search ============ */
.search-inline {
    flex: 1;
    min-width: 130px;
    max-width: 300px;
}

.nav-search-box {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 0.75rem;
    background: var(--bg-surface-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    height: 34px;
    transition: var(--sidenav-transition-fast);
}

.nav-search-box:focus-within {
    border-color: var(--theme-primary);
    box-shadow: 0 0 0 2px var(--focus-ring-color);
}

.nav-search-box i {
    color: var(--text-muted);
    font-size: 1rem;
    flex-shrink: 0;
}

.nav-search-box input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 0.8125rem;
    color: var(--text-primary);
    outline: none;
    min-width: 0;
}

.nav-search-box input::placeholder {
    color: var(--text-muted);
}

.nav-search-box .clear-search {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    background: var(--bg-surface-tertiary);
    border: none;
    border-radius: 50%;
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--sidenav-transition-fast);
    flex-shrink: 0;
}

.nav-search-box .clear-search:hover {
    background: var(--border-color);
    color: var(--text-primary);
}

/* ============ Refresh Button ============ */
.refresh-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: var(--theme-primary);
    border: none;
    border-radius: 6px;
    color: var(--text-inverse);
    cursor: pointer;
    transition: var(--sidenav-transition-fast);
    flex-shrink: 0;
}

/* A refresh button that carries a LABEL (e.g. Period Close renders
   "Refresh" / "Apply" / "Loading…") must size to its content. The 34px above is
   an icon-only square, and it silently clipped the label — measured on
   /accounting/fees/period-close: rendered 34px against a 51px scrollWidth, so
   "Refresh" displayed as "Refre".
   `:not(:empty)` keeps the square for the icon-only usages, whose only spans are
   the empty .refresh-dot / .spinner-sm markers. Browsers without :has() simply
   keep the old fixed width — no regression. */
.refresh-btn:has(span:not(:empty)) {
    width: auto;
    min-width: 34px;
    padding: 0 0.75rem;
    gap: 0.375rem;
}

.refresh-btn:hover:not(:disabled) {
    background: var(--theme-primary-emphasis);
}

.refresh-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.refresh-btn i {
    font-size: 1rem;
}

/* ============ Content Area ============ */
.content-area {
    min-height: 200px;
}

.table-container {
    background: var(--bg-surface);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    overflow: visible;
}


/* ─── Advanced filters, view toggle, alerts ─── */

/* ============ Filter Toggle ============ */
.filter-toggle-btn {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.75rem;
    background: var(--bg-surface-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--sidenav-transition-fast);
    white-space: nowrap;
    position: relative;
}

.filter-toggle-btn:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
    border-color: var(--theme-primary);
}

.filter-toggle-btn.active {
    background: var(--theme-primary-subtle);
    color: var(--theme-primary);
    border-color: var(--theme-primary);
}

.filter-toggle-btn i {
    font-size: 1rem;
}

.filter-active-dot {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 7px;
    height: 7px;
    background: var(--theme-danger);
    border-radius: 50%;
    border: 1.5px solid var(--bg-surface);
}

/* ============ Advanced Filters Bar ============ */
.advanced-filters-bar {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
    padding: 0.875rem 1.25rem;
    background: var(--bg-surface-secondary);
    border-radius: 10px;
    border: 1px solid var(--border-color);
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.advanced-filter-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1 1 140px;
    min-width: 120px;
    max-width: 200px;
}

.advanced-filter-label {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin: 0;
    line-height: 1;
}

.advanced-filter-label i {
    font-size: 0.75rem;
}

.advanced-filter-actions {
    display: flex;
    align-items: flex-end;
    gap: 0.375rem;
}

.adv-clear-btn {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.4375rem 0.75rem;
    background: transparent;
    border: 1px solid var(--theme-danger);
    border-radius: 6px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--theme-danger);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    height: 30px;
}

.adv-clear-btn:hover {
    background: var(--theme-danger);
    color: var(--text-inverse);
}