/**
 * frontend/css/responsive.css
 * Media queries for tablet and mobile.
 */

/* ── Extra stats cards: 3/row tablet ─────────────────────────────────────── */
@media (max-width: 1100px) {
    .plc-extra-card {
        flex: 0 0 calc(33.333% - 10px);
        max-width: calc(33.333% - 10px);
    }
}

/* ── Tablet (≤900px): sidebar filter + anchor collapse to top ────────────── */
@media (max-width: 900px) {

    /* Sidebar filter layouts stack vertically */
    .plc-dash--sidebar-filter .plc-content-wrap {
        flex-direction: column !important;
    }
    .plc-filter-bar.plc-filter-left,
    .plc-filter-bar.plc-filter-right {
        width: 100%;
        position: static !important;
        margin-bottom: 16px;
    }

    /* Anchor sidebar: full-width horizontal pill row on tablet */
    .plc-anchor-sidebar {
        width: 100% !important;
        order: 0 !important;
        position: static !important;
        max-height: none !important;
    }
    .plc-anchor-list {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }
    .plc-anchor-link {
        display: inline-block;
        border: 1px solid #ddd;
    }
}

/* ── Small tablet (≤768px) ───────────────────────────────────────────────── */
@media (max-width: 768px) {
    .plc-extra-card {
        flex: 0 0 calc(50% - 8px);
        max-width: calc(50% - 8px);
    }
    .plc-filters { flex-direction: column; }
    .plc-filters > div { flex: 1 1 100%; }
}

/* ── Mobile (≤640px): filter hidden behind FAB ───────────────────────────── */
@media (max-width: 640px) {

    /*
     * Hide the filter bar by default.
     * It becomes a full-screen overlay when .plc-mobile-open is added by JS.
     * We use visibility+opacity instead of display:none so JS can measure
     * element dimensions, and so CSS transitions work.
     */
    .plc-filter-bar {
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
        position: fixed !important;
        inset: 0;
        z-index: 300;
        background: rgba(255,255,255,.98);
        overflow-y: auto;
        border-radius: 0 !important;
        margin: 0 !important;
        padding: 20px 16px 80px;
        box-shadow: none !important;
        transition: opacity .2s, visibility .2s;
        /* Remove sticky/positional overrides */
        top: 0 !important;
    }

    /* Open state — added by sticky.js */
    .plc-filter-bar.plc-mobile-open {
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
    }

    /* Show the FAB */
    .plc-filter-toggle-btn {
        display: flex !important;
    }

    /* Show the × close button inside the panel */
    .plc-filter-close-btn {
        display: flex !important;
        float: right;
        background: none;
        border: none;
        font-size: 24px;
        cursor: pointer;
        color: #555;
        line-height: 1;
        padding: 0;
        margin: -4px -4px 12px 0;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
    }

    /* Anchor sidebar: hide on mobile (too narrow, use jump links after content) */
    .plc-anchor-sidebar {
        display: none !important;
    }

    /* Content wrap: no gap, full width */
    .plc-content-wrap {
        gap: 0;
    }
}

/* ── Extra small mobile (≤480px) ─────────────────────────────────────────── */
@media (max-width: 480px) {
    .plc-extra-card   { flex: 0 0 100%; max-width: 100%; }
    .plc-card         { flex: 1 1 100%; }
    .plc-modal-footer { justify-content: center; }
    .shift-row        { flex-direction: column; gap: 10px; }
    .shift-row > div  { width: 100%; flex: 1 1 100%; }
    .shift-row input  { width: 100%; box-sizing: border-box; }
}

/* ── DataTables mobile: container-level horizontal scroll ───────────────── */
/* scrollX is disabled on mobile so DataTables keeps header+body in one
   <table> element. The .plc-table-box wrapper provides the horizontal scroll. */
@media (max-width: 768px) {
    .plc-table-box {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        width: 100%;
    }
    .plc-table-box table {
        min-width: 480px;  /* prevents columns collapsing too narrow */
        width: 100%;
    }
    /* Hide the DataTables scrollX UI chrome (not used on mobile) */
    .dataTables_scrollHead,
    .dataTables_scrollBody {
        overflow: visible !important;
    }
}