/*
 * index-page.css — Shared Index-Page Standard
 *
 * Two-column desktop layout (filter sidebar + content area), sticky sidebar,
 * collapsed-sidebar state, mobile filter overlay trigger, and results-card styling.
 *
 * CSS class conventions:
 *   .ip-page-layout      — flex container wrapping sidebar + content
 *   .ip-filter-col       — left sidebar column
 *   .ip-filter-sidebar   — inner sidebar card (border + background)
 *   .ip-filter-form-area — scrollable filter form container
 *   .ip-filter-reset     — bottom reset-link strip
 *   .ip-content-area     — right (results) column; flex: 1
 *   .ip-results-card     — the card wrapping the results table
 *   .ip-col-header       — thead row rendered by the partial (desktop only)
 *   .ip-list-body        — tbody in list mode (consuming view)
 *   .ip-grid-body        — grid container in grid mode (consuming view)
 *   .ip-header-filter-btn — filter button in results card top-bar
 *
 * All sidebar state classes follow the existing site pattern:
 *   .sidebar-collapsed on .ip-filter-col hides the form and shows the expand stub.
 *   .filter-expanded-header / .filter-collapsed-btn mirror the existing pattern so
 *   naming stays consistent with orders-filter-col and product-filter-col.
 */

/* ── Two-column layout (desktop ≥ 768px) ────────────────────────────────────── */
@media (min-width: 768px) {
    .ip-page-layout {
        display: flex;
        align-items: flex-start;
        gap: 1rem;
    }

    .ip-filter-col {
        width: 260px;
        flex-shrink: 0;
        position: sticky;
        top: 70px;
        max-height: calc(100vh - 90px);
        display: flex;
        flex-direction: column;
    }

    .ip-filter-col.sidebar-collapsed {
        width: 48px;
    }

    .ip-filter-sidebar {
        border: 1px solid #dee2e6;
        border-radius: .375rem .375rem 0 0;
        background: #fff;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .ip-filter-form-area {
        overflow-y: auto;
        max-height: calc(100vh - 180px);
        padding-bottom: 0 !important;
    }

    /* Collapsed: hide the expanded header and form, show the expand stub */
    .filter-collapsed-btn { display: none; }

    .ip-filter-col.sidebar-collapsed .filter-expanded-header {
        display: none !important;
    }

    .ip-filter-col.sidebar-collapsed .filter-collapsed-btn {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        width: 100%;
        padding: 10px 0;
    }

    .ip-filter-col.sidebar-collapsed .ip-filter-form-area {
        display: none;
    }

    .ip-filter-reset {
        border: 1px solid #dee2e6;
        border-top: none;
        border-radius: 0 0 .375rem .375rem;
        background: #f8f9fa;
        padding: 8px;
    }

    .ip-filter-col.sidebar-collapsed .ip-filter-reset {
        display: none;
    }

    .ip-content-area {
        flex: 1;
        min-width: 0;
    }

    /* On desktop, the header filter button is hidden when the sidebar is visible.
       It is shown (inline-flex) when the sidebar is collapsed — this is managed
       by index-page.js, not CSS alone, because it depends on saved state. */
    .ip-header-filter-btn {
        display: none;
    }
}

/* ── Mobile (< 768px): hide sidebar, show filter button ─────────────────────── */
@media (max-width: 767px) {
    .ip-filter-col {
        display: none;
    }

    /* Filter button always visible on mobile */
    .ip-header-filter-btn {
        display: inline-flex !important;
    }
}

/* ── Results card ────────────────────────────────────────────────────────────── */
.ip-results-card .card-header {
    border-bottom: 1px solid rgba(0, 0, 0, .125);
}

.ip-results-card .sortable {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.ip-results-card .sortable:hover {
    text-decoration: underline !important;
}

/* Column-header row rendered inside the card by the partial */
.ip-col-header table {
    margin-bottom: 0;
}

.ip-col-header thead th {
    background: #f8f9fa;
    border-top: 0;
    font-size: .85rem;
    font-weight: 600;
}

/* ── Filter badge (chip) row ─────────────────────────────────────────────────── */
.ip-filter-badges .badge {
    font-size: .78rem;
}

/* ── Filter sidebar section headers (collapsible) ────────────────────────────── */
.ip-filter-section-header {
    cursor: pointer;
    border-bottom: 1px solid #dee2e6;
    padding-bottom: 8px;
    margin-bottom: 8px;
}

/* ── Utility: clickable table rows ───────────────────────────────────────────── */
.ip-clickable-row { cursor: pointer; }
.ip-clickable-row:hover { background-color: #f8f9fa; }

/* ── Row link (full-cell click target) ───────────────────────────────────────── */
.ip-row-link {
    display: block;
    padding: var(--bs-table-cell-padding-y, .5rem) var(--bs-table-cell-padding-x, .5rem);
    color: inherit;
    text-decoration: none;
}
.ip-row-link:hover { color: inherit; }