/*
 * FatoraTek responsive application shell
 * Keeps the desktop sidebar proportional to the available viewport and
 * guarantees that Bootstrap modals/dialog helpers always render above it.
 */

:root {
    --fatoratek-sidebar-width: clamp(215px, 16vw, 270px);
    --fatoratek-sidebar-layer: 900;
    --fatoratek-mobile-overlay-layer: 8990;
    --fatoratek-mobile-sidebar-layer: 9000;
    --fatoratek-modal-layer: 11000;
    --fatoratek-modal-backdrop-layer: 10990;
    --fatoratek-modal-helper-layer: 11060;
    --fatoratek-alert-layer: 12000;
}

/* =============================
   RESPONSIVE DESKTOP SIDEBAR
   ============================= */
@media (min-width: 992px) {
    aside.side-bar {
        width: var(--fatoratek-sidebar-width) !important;
        min-width: var(--fatoratek-sidebar-width) !important;
        max-width: var(--fatoratek-sidebar-width) !important;
        flex: 0 0 var(--fatoratek-sidebar-width) !important;
        transition: width .22s ease, min-width .22s ease, max-width .22s ease, flex-basis .22s ease !important;
        z-index: var(--fatoratek-sidebar-layer) !important;
    }

    aside.side-bar #side-bar,
    #side-bar {
        width: var(--fatoratek-sidebar-width) !important;
        max-width: var(--fatoratek-sidebar-width) !important;
        z-index: var(--fatoratek-sidebar-layer) !important;
        transition: width .22s ease, max-width .22s ease !important;
    }
}

/* Slightly tighten cards when the usable desktop viewport becomes narrow.
   Browser zoom also reduces CSS viewport width, so this reacts to 110/125% zoom. */
@media (min-width: 992px) and (max-width: 1279px) {
    #side-bar {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    #side-bar .interactive-card {
        gap: 8px !important;
    }

    #side-bar .interactive-card > div.tw-shrink-0 {
        width: 36px !important;
        height: 36px !important;
    }

    #side-bar .interactive-card > span,
    #side-bar .drop_down > span {
        font-size: 12px !important;
    }

    #side-bar .menu-parent {
        margin-bottom: 9px !important;
    }
}

/* =============================
   TABLET / MOBILE OFF-CANVAS
   ============================= */
@media (max-width: 991.98px) {
    aside.side-bar {
        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
        flex: 0 0 0 !important;
    }

    aside.side-bar.small-view-side-active {
        display: block !important;
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        width: min(82vw, 300px) !important;
        min-width: min(82vw, 300px) !important;
        max-width: min(82vw, 300px) !important;
        z-index: var(--fatoratek-mobile-sidebar-layer) !important;
    }

    aside.side-bar.small-view-side-active #side-bar,
    #side-bar {
        width: min(82vw, 300px) !important;
        max-width: min(82vw, 300px) !important;
    }

    aside.side-bar.small-view-side-active #side-bar {
        z-index: var(--fatoratek-mobile-sidebar-layer) !important;
    }

    .overlay {
        z-index: var(--fatoratek-mobile-overlay-layer) !important;
    }
}

/* =============================
   GLOBAL MODAL LAYERING FIX
   ============================= */
.modal {
    z-index: var(--fatoratek-modal-layer) !important;
}

.modal-backdrop {
    z-index: var(--fatoratek-modal-backdrop-layer) !important;
}

/* Keep dialogs inside the visible viewport on laptops and zoomed browsers. */
.modal-dialog {
    max-width: calc(100vw - 28px) !important;
}

@media (max-width: 767.98px) {
    .modal-dialog {
        width: auto !important;
        margin: 10px !important;
        max-width: calc(100vw - 20px) !important;
    }
}

/* Controls commonly rendered outside the modal DOM must stay above it. */
.select2-container--open,
.select2-dropdown,
.daterangepicker,
.datepicker,
.bootstrap-datetimepicker-widget,
.ui-datepicker,
.bootstrap-select.open,
.dropdown-menu.selectpicker,
.popover,
.tooltip {
    z-index: var(--fatoratek-modal-helper-layer) !important;
}

/* SweetAlert is sometimes launched from inside a modal; keep it on top. */
.swal-overlay {
    z-index: var(--fatoratek-alert-layer) !important;
}

.swal-modal {
    z-index: calc(var(--fatoratek-alert-layer) + 1) !important;
}

/* Prevent a stale sidebar layer from winning over an opened dialog. */
body.modal-open aside.side-bar,
body.modal-open #side-bar {
    z-index: var(--fatoratek-sidebar-layer) !important;
}

/* =============================
   MOBILE DATATABLE SCROLL STABILITY
   =============================
   On phones the page must own the vertical scroll. DataTables scrollY,
   sticky/floating headers and nested vertical overflow can otherwise fight
   the browser's touch scrolling and cause the viewport to jump upward when
   the table header reaches the top edge of the screen.
*/
@media (max-width: 767.98px) {
    /* Never pin a table header on phone-sized viewports. */
    table.dataTable thead,
    table.dataTable thead tr,
    table.dataTable thead th,
    .table thead,
    .table thead tr,
    .table thead th {
        position: static !important;
        top: auto !important;
        bottom: auto !important;
        transform: none !important;
    }

    /* FixedHeader extension clones are desktop-only in FatoraTek. */
    .fixedHeader-floating,
    .fixedHeader-locked,
    table.fixedHeader-floating,
    table.fixedHeader-locked {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    /* DataTables configured with scrollY must not create a second vertical
       scroller on mobile. Keep horizontal scrolling available for wide tables. */
    .dataTables_wrapper,
    .dataTables_scroll,
    .dataTables_scrollBody,
    .dataTables_scrollHead,
    .dataTables_scrollFoot {
        max-height: none !important;
    }

    .dataTables_scrollBody {
        height: auto !important;
        max-height: none !important;
        overflow-y: hidden !important;
        overflow-x: auto !important;
        overscroll-behavior-y: auto !important;
        touch-action: pan-x pan-y !important;
        -webkit-overflow-scrolling: touch;
    }

    /* Normal responsive table shells may scroll sideways, but their height
       stays content-driven so vertical gestures continue to the document. */
    .table-responsive,
    .sales-table-wrap {
        height: auto !important;
        max-height: none !important;
        overflow-x: auto !important;
        overscroll-behavior-y: auto !important;
        touch-action: pan-x pan-y !important;
        -webkit-overflow-scrolling: touch;
    }

    /* Prevent browser scroll anchoring from compensating for DataTables DOM
       measurements/redraws while the user is already scrolling the page. */
    .dataTables_wrapper,
    .dataTables_scroll,
    .table-responsive,
    .sales-table-wrap {
        overflow-anchor: none !important;
    }
}