/* ──────────────────────────────────────────────────────────────
   Desktop Shared Foundations — Phase F.1
   Reusable desktop layout patterns applied across tile pages.
   Everything inside @media (min-width: 1024px), so this file is
   safe to load on every page — zero effect on mobile.

   Load AFTER css/desktop-sidebar.css. The foundations reference
   --sidebar-width and assume Batch 0's content offset is in place.
   ────────────────────────────────────────────────────────────── */

@media (min-width: 1024px) {

    /* ── Foundation 1 ─ Master-Detail Layout ──────────────────────
       The signature desktop pattern: persistent left rail with
       search/results, right panel with the selected item's detail.
       Used by item-lookup, customer-inquiry, ar-lookup, web-access,
       po-lookup, so-lookup, price-levels (≥7 tiles). Rail sticks so
       the user can scroll the detail panel while keeping search
       visible.

       Two breakpoints to keep the detail panel usable when the
       Batch 0 sidebar (220px) shares the viewport:
       - 1024-1199px: 34% rail (min 260px) + 1fr detail with min:0,
         so the right column shrinks instead of overflowing.
       - 1200px+: the original 380px rail. */
    .tile-master-detail {
        display: grid;
        grid-template-columns: minmax(260px, 34%) minmax(0, 1fr);
        gap: 1rem;
        max-width: 1400px;
        margin: 0 auto;
        padding: 1rem;
        min-height: calc(100vh - 80px);
    }

    .tile-master-detail__rail {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        max-height: calc(100vh - 120px);
        overflow-y: auto;
        position: sticky;
        top: 1rem;
        padding-right: 1rem;
        border-right: 1px solid var(--border);
    }

    .tile-master-detail__detail {
        min-width: 0;  /* prevent grid blowout from wide table cells */
        padding: 0 0.5rem;
    }
}

/* Roomier master-detail at 1200px+ — restore the original 380px rail
   so the detail panel stops being squeezed once the viewport has
   enough room (1200px viewport - 220px sidebar = 980px content, comfy). */
@media (min-width: 1200px) {
    .tile-master-detail {
        grid-template-columns: 380px 1fr;
        gap: 1.5rem;
        padding: 1.5rem;
    }
}

@media (min-width: 1024px) {

    /* ── Foundation 2 ─ Desktop Toolbar ───────────────────────────
       Horizontal bar containing mode tabs + filters + search + page
       actions on a single row. Replaces the mobile stacked layout
       used by po-lookup, so-lookup, backorder-lookup, ar-lookup,
       shipping-dashboard. flex-wrap kicks in when the viewport
       narrows so the toolbar degrades gracefully at 1024–1100px. */
    .tile-toolbar {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.75rem 1rem;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 8px;
        margin-bottom: 1.25rem;
        flex-wrap: wrap;
    }

    .tile-toolbar__tabs {
        display: flex;
        gap: 0.25rem;
    }

    .tile-toolbar__filters {
        display: flex;
        gap: 0.5rem;
        align-items: center;
    }

    .tile-toolbar__search {
        display: flex;
        gap: 0.5rem;
        align-items: center;
        margin-left: auto;  /* right-align search within the toolbar */
    }

    .tile-toolbar__actions {
        display: flex;
        gap: 0.5rem;
        align-items: center;
        margin-left: auto;
    }

    /* ── Foundation 3 ─ Force-Open Section Accordions ─────────────
       Phone layouts use vertical accordions to conserve scroll
       space. On desktop that becomes friction — every click is
       wasted motion. Force-open the in-record section pattern
       used by item-lookup, customer-inquiry, so-entry, and the
       transaction-viewer record-detail view.

       Audit notes (selectors derived from grepping dev branch):
       - `.section-content` is the body div toggled by `.collapsed`
         in customer-inquiry / item-lookup (max-height: 1000px →
         0). It's also used inside `.collapsible-section.open`
         containers in so-entry (always-open by default but JS may
         toggle).
       - `.section-toggle` is the chevron icon — small, decorative.
         Safe to hide entirely; the parent header stays clickable
         but the click is a no-op visually.

       Deliberately NOT forced open: `.po-card-body`,
       `.so-card-body`, `.bo-accordion-body`. Those gate
       per-record line-item tables in list views — opening every
       PO/SO/group on a search-result page would dump hundreds of
       rows on screen. The proper desktop fix for those is
       master-detail (Foundation 1), not force-open. */
    .section-content,
    .section-content.collapsed,
    .collapsible-section .section-content {
        max-height: none !important;
        overflow: visible !important;
        padding: 1rem !important;  /* override the `padding: 0 1rem` collapsed state */
    }

    .section-toggle,
    .section-toggle.collapsed {
        display: none !important;
    }

    /* ── Foundation 4 ─ Stat / KPI Strip ──────────────────────────
       Horizontal row of equal-width stat cards for the top of a
       workspace. auto-fit + minmax means the strip degrades from 6
       cells at 1440px+ down to 4 at 1024px. Used by ar-lookup
       (aging buckets), shipping-dashboard, my-deliveries, reports,
       index. Cards get a subtle hover affordance even though they
       may or may not be clickable — desktop users expect feedback. */
    .tile-stat-strip {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 1rem;
        margin-bottom: 1.5rem;
    }

    .tile-stat-strip__card {
        padding: 1rem 1.25rem;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 8px;
        text-align: center;
        transition: border-color 200ms ease, box-shadow 200ms ease;
    }

    .tile-stat-strip__card:hover {
        border-color: var(--text-secondary);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    }

    .tile-stat-strip__value {
        font-size: 1.75rem;
        font-weight: 700;
        line-height: 1.2;
    }

    .tile-stat-strip__label {
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        opacity: 0.6;
        margin-top: 0.25rem;
    }

    /* ── Foundation 5 ─ Card Grid with Hover Lift ─────────────────
       Reusable grid for any "cards laid out in a grid" use case:
       stop cards, contact cards, rep islands, photo galleries,
       report-section cards. Default is 2-up; modifier classes give
       3-up or auto-fill flexibility. Hover lift on any direct
       child element. */
    .tile-card-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem;
    }

    .tile-card-grid--3col {
        grid-template-columns: repeat(3, 1fr);
    }

    .tile-card-grid--auto {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }

    .tile-card-grid > * {
        transition: transform 200ms ease, box-shadow 200ms ease;
    }

    .tile-card-grid > *:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }

    /* ── Foundation 6 ─ Desktop Data Table ────────────────────────
       Polish for any tabular data: sticky header with the brand
       navy background, alternating rows for scannability, row
       hover, generous cell padding. Apply by adding the
       .tile-data-table class to a <table> element. Existing
       tile-specific table styles (e.g. .pl-table) can also opt in
       by adding this class alongside the existing one. */
    .tile-data-table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
    }

    .tile-data-table thead th {
        position: sticky;
        top: 0;
        background: var(--brand-primary, #1a2332);
        color: white;
        padding: 0.75rem 1rem;
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        opacity: 0.92;
        text-align: left;
        /* Border stays rgba-white — it sits on the dark brand-primary
           th background which is the same color in both themes. */
        border-bottom: 2px solid rgba(255, 255, 255, 0.1);
        z-index: 1;
    }

    .tile-data-table tbody tr {
        transition: background-color 150ms ease;
    }

    /* Alt rows use rgba black so the tint shows in both themes
       (faint on dark surface, faint on light surface). */
    .tile-data-table tbody tr:nth-child(even) {
        background: rgba(0, 0, 0, 0.025);
    }

    .tile-data-table tbody tr:hover {
        background: var(--surface-hover);
    }

    .tile-data-table td {
        padding: 0.625rem 1rem;
        border-bottom: 1px solid var(--border);
    }
}