/* ============================================================================
   responsive.css — single source of truth for PCL's responsive behaviour
   ============================================================================

   PCL has THREE deliberate presentation tiers. This file owns every viewport
   @media rule for the staff shell. Do not add viewport media queries elsewhere
   (site.css, page-scoped CSS, inline <style>) — migrate them here.

   ----------------------------------------------------------------------------
   TIER            RANGE                    SIDEBAR              CONTENT / TABLES
   ----------------------------------------------------------------------------
   Desktop         >= 1400px                permanent, in flow  full density (UNCHANGED)
   Tablet /        768px - 1399.98px        off-canvas drawer   full width; desktop
     constrained                            (hamburger)         tables kept, padding
     desktop                                                    tightened
   Phone           < 768px                  off-canvas drawer,  cards; reduced
                                             reduced nav + More  task-oriented nav
   ----------------------------------------------------------------------------

   THE FOUR BREAKPOINT EDGES (normalise everything to these):

     phone-narrow-max   575.98px   tightest phone sub-tier only (nav-bar
                                    truncation, 1-col stat grids)
     phone-max          767.98px   at/below = phone tier
     tablet-min         768px      tablet tier begins
     desktop-min        1400px     permanent sidebar, desktop density

   Use the .98 form for max-width, the integer for min-width, so ranges never
   overlap or gap.

   SIDEBAR DRAWER BEHAVIOUR IS NOT A MEDIA QUERY HERE. It is delivered by
   Bootstrap's compiled `.offcanvas-xxl` class on the sidebar element:
   in-flow block at >= 1400px, translated drawer (backdrop, Esc, focus trap,
   body scroll-lock, ARIA) below 1400px. The only rule this file adds for it is
   dropping `.main-content` margin below 1400 (see below).

   Component-box responsiveness (bank-reconciliation grids, line-item tables)
   should prefer CSS @container queries so they stay off the breakpoint budget.
   ============================================================================ */


/* ===== Sidebar: permanent at >= 1400px, offcanvas drawer below =============== */

/* Desktop tier: Bootstrap's compiled `.offcanvas` reset (applied by `.offcanvas-xxl`
   at >= 1400px) forces `width/height: auto !important` and a transparent background.
   Re-assert the permanent-sidebar box so desktop is visually unchanged. */
@media (min-width: 1400px) {
    #appSidebar.offcanvas-xxl {
        width: var(--sidebar-width) !important;
        height: calc(100dvh - var(--env-banner-height)) !important;
        background-color: var(--sidebar-bg) !important;
    }
}

/* Tablet + phone tiers: the sidebar is a drawer, so the main content reclaims the
   width the permanent sidebar used to occupy. */
@media (max-width: 1399.98px) {
    .main-content {
        margin-left: 0;
    }

    /* Drawer width matches the permanent sidebar; sits below any non-prod env banner.
       z-index must clear Bootstrap's offcanvas backdrop (1040) — the app's inline
       `.sidebar { z-index: 1000 }` (correct for the permanent desktop sidebar) would
       otherwise leave the open drawer *behind* its own backdrop. */
    #appSidebar.offcanvas-xxl {
        --bs-offcanvas-width: var(--sidebar-width);
        top: var(--env-banner-height);
        z-index: 1045;
    }

    /* Close (X) button — sidebar background is dark, so the light variant is set on the
       element; position it clear of the brand/logo. */
    .sidebar-close {
        position: absolute;
        top: 0.75rem;
        right: 0.75rem;
        z-index: 2;
    }
}


/* ===== Tablet / constrained desktop density ================================= */
/* The permanent sidebar used to eat 260px; now that tablet reclaims it, trim the
   generous desktop paddings so wide tables keep their columns instead of wrapping.
   Desktop (>= 1400px) keeps the original 2rem / 0.75rem spacing untouched. */
@media (min-width: 768px) and (max-width: 1399.98px) {
    .content-area {
        padding: 1.25rem;
        padding-bottom: calc(1.25rem + var(--help-bubble-clearance));
    }

    .table > :not(caption) > * > *,
    .table thead th {
        padding: 0.55rem 0.5rem;
    }

    /* Reclaim a little more width for the fixed-width shop-entered description
       column (14rem on desktop) so wide list tables like Jobs keep every column
       visible instead of spawning an inner horizontal scrollbar. Still truncates
       with an ellipsis; nothing is hidden. */
    .list-description-column,
    .list-description-text {
        width: 11rem;
        max-width: 11rem;
    }
}


/* ===== Phone: reduced task-oriented nav + "More" ==========================
   Tablet and desktop show every nav item. On phones the office / back-of-house
   items (.nav-2nd, and the whole Accounting section, data-nav="fin") collapse
   behind a "More" toggle so the workshop tasks are reachable without scrolling.
   Nothing is removed — every destination is still one or two taps away, so
   workflows that reach these screens from elsewhere are unaffected. */
.nav-more-toggle {
    width: 100%;
    background: none;
    border: 0;
    text-align: left;
    color: rgba(255, 255, 255, 0.55);
    cursor: pointer;
}
.nav-more-toggle:hover {
    color: rgba(255, 255, 255, 0.85);
    background: var(--sidebar-hover);
}

@media (max-width: 767.98px) {
    .sidebar-nav .nav-2nd,
    .sidebar-nav .nav-link[data-nav="fin"],
    .sidebar-nav .nav-section-title[data-nav="fin"] {
        display: none;
    }

    .sidebar-nav.nav-more-open .nav-link.nav-2nd,
    .sidebar-nav.nav-more-open .nav-link[data-nav="fin"] {
        display: flex;
    }
    .sidebar-nav.nav-more-open .nav-section-title.nav-2nd,
    .sidebar-nav.nav-more-open .nav-section-title[data-nav="fin"] {
        display: block;
    }
}


/* ===== Job Board (kanban) on phones =======================================
   The board stays horizontally scrollable, but becomes a deliberate one-column
   pager (snap points, next column peeking) instead of a cramped free-scroll.
   The real phone experience is Jobs/ShopMobile, linked from the in-page hint. */
@media (max-width: 767.98px) {
    .board-scroll {
        scroll-snap-type: x mandatory;
    }
    /* .board-scroll descendant selector so this wins over the page's own
       `.board-column { width: 240px }` in Board.cshtml @@section Styles. */
    .board-scroll .board-column {
        scroll-snap-align: start;
        width: min(85vw, 320px);
    }
}


/* ===== Print: never render the app chrome ================================== */
@media print {
    .sidebar,
    .top-navbar,
    .offcanvas-backdrop {
        display: none !important;
    }
    .main-content {
        margin-left: 0 !important;
    }
}


/* ===== Table -> card swap on phones (merged from mobile-cards.css) =========
   List pages ship a desktop <table> plus a sibling .mobile-card-view. The table
   is shown for desktop AND tablet (density preserved — tablet is not a big
   phone); below 768px the card view takes over. Previously this swapped at
   991px, which handed tablets the phone layout. */

.mobile-card-view { display: none; }
.mobile-stats-compact { display: none; }

@media (max-width: 767.98px) {
    /* Hide the desktop table only when a mobile card view sibling is present. */
    .mobile-card-view ~ .table-responsive,
    .table-responsive:has(~ .mobile-card-view) {
        display: none !important;
    }
    .mobile-card-view {
        display: block;
        padding: 1rem;
    }

    /* Swap the big desktop KPI cards for the compact 2-up strip. */
    .stats-cards-desktop { display: none !important; }
    .mobile-stats-compact { display: block; margin-bottom: 1rem; }
    .mobile-stats-compact .card {
        border: 1px solid var(--bs-border-color);
        border-radius: 0.5rem;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }
    .mobile-stats-compact .stats-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
        padding: 1rem;
    }
    .mobile-stats-compact .stat-item { text-align: center; }
    .mobile-stats-compact .stat-value {
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--bs-emphasis-color);
        line-height: 1;
        margin-bottom: 0.25rem;
    }
    .mobile-stats-compact .stat-label {
        font-size: 0.75rem;
        color: var(--bs-secondary-color);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        font-weight: 500;
    }
    .mobile-stats-compact .stat-icon {
        font-size: 1.25rem;
        margin-bottom: 0.25rem;
        opacity: 0.6;
    }
}

/* Mobile card component — rendered only inside .mobile-card-view (hidden until
   the phone breakpoint above), so these are safe at any width. */
.mobile-card-list { display: flex; flex-direction: column; gap: 1rem; }

.mobile-data-card {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: all 0.2s ease;
}
.mobile-data-card:active {
    transform: scale(0.98);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.mobile-card-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--bs-tertiary-bg);
    border-bottom: 1px solid var(--bs-border-color);
}
.mobile-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    flex-shrink: 0;
}
.mobile-card-title { flex: 1; min-width: 0; }
.mobile-card-title h6 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--bs-emphasis-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mobile-card-title small {
    display: block;
    font-size: 0.875rem;
    color: var(--bs-secondary-color);
    margin-top: 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mobile-card-body { padding: 1rem; display: flex; flex-direction: column; gap: 0.75rem; }
.mobile-card-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--bs-border-color);
}
.mobile-card-row:last-child { border-bottom: none; }
.mobile-card-label {
    font-size: 0.875rem;
    color: var(--bs-secondary-color);
    font-weight: 500;
    flex-shrink: 0;
}
.mobile-card-value {
    font-size: 0.9375rem;
    color: var(--bs-body-color);
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobile-card-footer {
    padding: 1rem;
    background: var(--bs-tertiary-bg);
    border-top: 1px solid var(--bs-border-color);
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}
/* 44px touch target for card action buttons. This does NOT collide with
   site.css's `.table .btn { min-height: unset !important }` (phone tier) —
   a button is never inside both .mobile-card-footer and .table. */
.mobile-card-footer .btn {
    min-height: 44px;
    min-width: 44px;
    padding: 0.625rem 1rem;
    font-size: 0.9375rem;
}
.mobile-card-footer .btn-sm {
    min-height: 44px;
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
}

.mobile-card-value .badge { font-size: 0.875rem; padding: 0.375rem 0.75rem; }
.mobile-card-value i { margin-right: 0.25rem; }
.mobile-card-view .text-center { padding: 3rem 1rem; }
.mobile-card-view .text-center i {
    font-size: 3rem;
    color: var(--bs-secondary-color);
    opacity: 0.5;
}


/* ===== Phone polish (< 768px) ============================================= */

@media (max-width: 767.98px) {

    /* --- Non-prod environment banner: keep it to one tight line on a phone so it
       doesn't eat the viewport. Its height is still measured live, so a wrap on a
       very narrow device stays safe (no header overlap). --- */
    #envBanner {
        /* !important overrides the element's inline style attribute (kept inline
           because the background colour is environment-specific and server-rendered). */
        font-size: 0.62rem !important;
        letter-spacing: 0.02em !important;
        padding: 3px 8px !important;
        min-height: 22px !important;
        gap: 0.3rem !important;
    }

    /* --- Dashboard hero: reclaim vertical space so the Daily Briefing peeks
       into the first viewport. Content unchanged, just tighter. --- */
    .dash-hero .card-body > .row > [class*="col-"] {
        padding: 1rem !important;
    }
    .dash-hero .card-body > .row > [style*="border-left"] {
        border-left: 0 !important;
        border-top: 1px solid var(--pcl-rule);
    }
    .dash-hero-headline {
        font-size: 1.1rem !important;
        line-height: 1.35 !important;
        margin-bottom: 0.75rem !important;
    }
    .dash-hero .btn-sm {
        padding: 0.4rem 0.7rem;
    }

    /* --- List-page toolbars (.pcl-page-* opt-in classes).
       Owns the phone treatment for the whole phone tier — moved here from
       site.css's <=575.98 block and extended to 767.98 so 576–767px stops
       getting the desktop wrap that could push controls past the edge. --- */
    .pcl-page-header {
        align-items: stretch !important;
        flex-direction: column;
    }
    .pcl-page-actions {
        align-items: stretch;
        justify-content: flex-start;
        width: 100%;
    }
    .pcl-page-actions > .btn,
    .pcl-page-actions > .btn-group,
    .pcl-page-actions > .dropdown,
    .pcl-page-actions > form {
        flex: 1 1 100%;
        width: 100%;
    }
    .pcl-page-actions > .btn,
    .pcl-page-actions > .dropdown > .btn,
    .pcl-page-actions > form > .btn {
        width: 100%;
    }
    .pcl-page-actions > .btn-group > .btn:not(.dropdown-toggle-split) {
        flex-grow: 1;
    }
    .pcl-page-actions > .btn-group > .dropdown-toggle-split {
        flex-grow: 0;
    }
    .pcl-page-action-group,
    .pcl-page-filter {
        width: 100%;
    }
    .pcl-page-action-group > .btn {
        flex: 1 1 9rem;
    }
    .pcl-page-filter > .input-group,
    .pcl-page-filter > .form-select,
    .pcl-page-filter > .form-control {
        flex: 1 1 100%;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }
}

/* Wider phones get a comfortable two-up action row; the narrowest still stack. */
@media (min-width: 410px) and (max-width: 575.98px) {
    .pcl-page-actions > .btn,
    .pcl-page-actions > .btn-group,
    .pcl-page-actions > .dropdown {
        flex: 1 1 calc(50% - 0.25rem);
    }
    .pcl-page-actions > form,
    .pcl-page-actions > .pcl-page-filter {
        flex: 1 1 100%;
    }
}


/* ===== Migrated viewport rules from site.css (increment 9) ================== */
/* (still pending) */