/*
 * responsive-overrides.css
 * Extracted from resources/views/layouts/partials/css.blade.php
 * Contains all mobile + desktop media query overrides and component-level CSS.
 * DO NOT remove — these rules ensure correct responsive behaviour across
 * mobile (< 768px), tablet (768px-1023px), and desktop (>= 1024px) viewports.
 */

/* ============================================================
   SECTION 1: Mobile Sidebar Drawer (< 1024px)
   Controls the slide-in sidebar on tablet/mobile screens.
   ============================================================ */
@media (max-width: 1023px) {
    body.mobile-sidebar-open {
        overflow: hidden !important;
    }
    aside.side-bar.mobile-open,
    aside.side-bar.mobile-active,
    .side-bar.mobile-open,
    .side-bar.mobile-active,
    body.mobile-sidebar-open aside.side-bar,
    body.mobile-sidebar-open .side-bar {
        display: flex !important;
        flex-direction: column !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        width: 280px !important;
        max-width: 85vw !important;
        height: 100vh !important;
        z-index: 999999 !important;
        background-color: #FFFFFF !important;
        box-shadow: 10px 0 40px rgba(0, 0, 0, 0.5) !important;
        overflow-y: auto !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: translateX(0) !important;
    }
    body.mobile-sidebar-open .overlay,
    .overlay.visible {
        display: block !important;
        z-index: 999998 !important;
        background: rgba(0, 0, 0, 0.6) !important;
    }
}

/* ============================================================
   SECTION 2: Mobile-only App-Wide Design Tokens (< 768px)
   ============================================================ */
@media (max-width: 768px) {
    /* 1. Viewport & Prevent Unwanted Horizontal Scroll */
    body, html {
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }

    /* 2. Responsive Typography & Spacing */
    h1 { font-size: 20px !important; line-height: 1.3 !important; }
    h2 { font-size: 18px !important; line-height: 1.3 !important; }
    h3 { font-size: 16px !important; line-height: 1.3 !important; }
    .content { padding: 10px 8px !important; }

    /* 3. Touch-Friendly Buttons & Text Overlap Protection */
    .btn, button, input[type="submit"], input[type="button"] {
        white-space: nowrap !important;
        max-width: 100% !important;
        text-overflow: ellipsis !important;
    }

    /* 4. Table Alignment & Touch Scrolling */
    .table-responsive {
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        border-radius: 8px !important;
        margin-bottom: 12px !important;
    }
    .table th, .table td {
        padding: 6px 8px !important;
        font-size: 12px !important;
    }

    /* 5. Modal Viewport Fit (320px - 430px) */
    .modal-dialog {
        width: calc(100% - 16px) !important;
        margin: 8px auto !important;
        max-width: 100% !important;
    }

    /* 6. Horizontal Nav Tabs Ribbon */
    .nav-tabs-custom > .nav-tabs,
    .nav-tabs {
        display: flex !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        -webkit-overflow-scrolling: touch !important;
        border-bottom: 2px solid #E2E8F0 !important;
        padding-bottom: 4px !important;
    }
    .nav-tabs-custom > .nav-tabs > li,
    .nav-tabs > li {
        float: none !important;
        display: inline-block !important;
        flex: 0 0 auto !important;
    }

    /* 7. DataTables Inputs */
    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_length {
        float: none !important;
        text-align: left !important;
        margin-bottom: 8px !important;
    }
    .dataTables_wrapper .dataTables_filter input {
        width: 100% !important;
        margin-left: 0 !important;
        height: 36px !important;
        border-radius: 8px !important;
    }

    /* 8. Home & DataTables Universal 100% Full-Width Coverage */
    .table-responsive,
    .dataTables_wrapper,
    .dataTables_wrapper .dataTables_scroll,
    .dataTables_wrapper .dataTables_scrollHead,
    .dataTables_wrapper .dataTables_scrollBody,
    .dataTables_wrapper table.dataTable,
    table.dataTable,
    table.table {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ============================================================
   SECTION 3: Desktop Table & DataTables Styling (>= 769px)
   ============================================================ */
@media (min-width: 769px) {
    .table-responsive > .table > thead > tr > th,
    .table-responsive > .table > tbody > tr > td,
    .table-responsive > .table > tfoot > tr > td,
    .table-responsive > table > thead > tr > th,
    .table-responsive > table > tbody > tr > td,
    .table-responsive > table > tfoot > tr > td,
    table.dataTable thead th,
    table.dataTable tbody td {
        padding: 10px 14px !important;
        font-size: 13px !important;
        white-space: normal !important;
    }
}

/* ============================================================
   SECTION 4: Mobile DataTables Specific Overrides (< 768px)
   ============================================================ */
@media (max-width: 768px) {
    .table-responsive {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        border-radius: 8px !important;
    }
    .table-responsive > .table > thead > tr > th,
    .table-responsive > .table > tbody > tr > td,
    .table-responsive > .table > tfoot > tr > td,
    .table-responsive > table > thead > tr > th,
    .table-responsive > table > tbody > tr > td,
    .table-responsive > table > tfoot > tr > td,
    table.dataTable thead th,
    table.dataTable tbody td {
        white-space: nowrap !important;
        padding: 6px 10px !important;
        font-size: 12px !important;
    }
    .table-responsive .btn-xs,
    .table-responsive .btn-sm {
        padding: 3px 6px !important;
        font-size: 11px !important;
    }
}

/* ============================================================
   SECTION 5: Pattern Lock UI
   Used on POS screen lock / pin entry. Direction arrow icons.
   http://ignitersworld.com/lab/patternLock.html
   ============================================================ */
.patt-wrap {
    z-index: 10;
}
.patt-circ.hovered {
    background-color: #cde2f2;
    border: none;
}
.patt-circ.hovered .patt-dots {
    display: none;
}
.patt-circ.dir {
    background-image: url("/img/pattern-directionicon-arrow.png");
    background-position: center;
    background-repeat: no-repeat;
}
.patt-circ.e  { -webkit-transform: rotate(0);     transform: rotate(0); }
.patt-circ.s-e { -webkit-transform: rotate(45deg);  transform: rotate(45deg); }
.patt-circ.s  { -webkit-transform: rotate(90deg);  transform: rotate(90deg); }
.patt-circ.s-w { -webkit-transform: rotate(135deg); transform: rotate(135deg); }
.patt-circ.w  { -webkit-transform: rotate(180deg); transform: rotate(180deg); }
.patt-circ.n-w { -webkit-transform: rotate(225deg); transform: rotate(225deg); }
.patt-circ.n  { -webkit-transform: rotate(270deg); transform: rotate(270deg); }
.patt-circ.n-e { -webkit-transform: rotate(315deg); transform: rotate(315deg); }

/* ============================================================
   SECTION 6: DataTables Filter — Force Left-Align (All Screens)
   Positions Search bar on the LEFT above every list table
   ============================================================ */
div.dataTables_wrapper div.dataTables_filter,
.dataTables_wrapper .dataTables_filter {
    float: left !important;
    text-align: left !important;
    margin-bottom: 10px !important;
}

div.dataTables_wrapper div.dataTables_filter label,
.dataTables_wrapper .dataTables_filter label {
    display: inline-flex !important;
    align-items: center !important;
    margin-bottom: 0 !important;
    font-weight: 500 !important;
    color: #475569 !important;
    text-align: left !important;
}

div.dataTables_wrapper div.dataTables_filter input[type="search"],
div.dataTables_wrapper div.dataTables_filter input,
.dataTables_wrapper .dataTables_filter input {
    margin-left: 0 !important;
    width: 260px !important;
    max-width: 100% !important;
    height: 38px !important;
    border-radius: 10px !important;
    border: 1px solid #cbd5e1 !important;
    padding: 6px 14px !important;
    font-size: 14px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    background-color: #ffffff !important;
    transition: all 0.2s ease-in-out !important;
}

div.dataTables_wrapper div.dataTables_filter input:focus,
.dataTables_wrapper .dataTables_filter input:focus {
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15) !important;
    outline: none !important;
}

/* Ensure top control row in DataTables flexes cleanly with search bar on the LEFT */
.dataTables_wrapper > .row:first-child,
.dataTables_wrapper .row:first-child {
    display: flex !important;
    flex-wrap: wrap !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 12px !important;
}
.dataTables_wrapper > .row:first-child > [class*="col-"],
.dataTables_wrapper .row:first-child > [class*="col-"] {
    float: none !important;
}