/* ==========================================================================
   RK — Global Mobile Responsive Layer
   --------------------------------------------------------------------------
   - Adds proper mobile behaviour to every page WITHOUT changing the desktop
     design or structure.
   - All layout rules are scoped to small screens (max-width: 767.98px) so
     tablets/desktops render exactly as before.
   - Works together with css/responsive-mobile.js (off-canvas drawer + table
     scroll wrappers).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Shared helpers (all screen sizes)
   -------------------------------------------------------------------------- */

/* Horizontal scroll wrapper that JS places around every <table>. */
.rk-table-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.table-responsive { -webkit-overflow-scrolling: touch; }

/* Dark backdrop shown behind the mobile sidebar drawer. */
.rk-backdrop {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1045;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Never show the backdrop or its effects on tablet / desktop. */
@media (min-width: 768px) {
    .rk-backdrop { display: none !important; }
}

/* Keep media-print clean: don't constrain tables when printing. */
@media print {
    .rk-table-scroll { overflow: visible !important; width: auto !important; }
    .rk-backdrop { display: none !important; }
}

/* ==========================================================================
   MOBILE  (phones — up to 767.98px)
   ========================================================================== */
@media (max-width: 767.98px) {

    /* ----- Media never overflows the viewport ----- */
    img, canvas, video, svg, iframe { max-width: 100%; height: auto; }

    /* ----- Bootstrap fixed (xs) columns stack to full width -----
       Only the plain numeric columns (col-1 … col-11) are stacked.
       Responsive variants (col-sm-*, col-md-*, col-xl-*) are left alone. */
    .col-1, .col-2, .col-3, .col-4, .col-5, .col-6,
    .col-7, .col-8, .col-9, .col-10, .col-11 {
        -ms-flex: 0 0 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* Tighter gutters so forms/cards/tables use the full width nicely. */
    .container, .container-fluid {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    .row { margin-left: -8px; margin-right: -8px; }

    /* ----- Tables: wrapped by JS, allow horizontal scrolling ----- */
    .table { margin-bottom: 0.5rem; }
    .rk-table-scroll table td,
    .rk-table-scroll table th { white-space: nowrap; }

    /* ----- Headings scale down a little ----- */
    h1, .h1 { font-size: 1.55rem !important; }
    h2, .h2 { font-size: 1.35rem !important; }
    h3, .h3 { font-size: 1.18rem !important; }
    h4, .h4 { font-size: 1.05rem !important; }

    /* Long button labels wrap instead of overflowing. */
    .btn { white-space: normal; }

    /* 16px form fields stop iOS from auto-zooming on focus. */
    input.form-control,
    select.form-control,
    textarea.form-control,
    .form-control { font-size: 16px; }

    /* Cards get breathing room when stacked. */
    .card { margin-bottom: 1rem; }

    /* ======================================================================
       SB ADMIN 2 SIDEBAR  ->  off-canvas drawer
       (targets only the dashboard sidebar; custom page sidebars untouched)
       ====================================================================== */
    #accordionSidebar.sidebar,
    .navbar-nav.sidebar,
    .sidebar.sidebar-dark {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        height: 100% !important;
        width: 250px !important;
        max-width: 82vw !important;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        z-index: 1046 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    body.sidebar-open #accordionSidebar.sidebar,
    body.sidebar-open .navbar-nav.sidebar,
    body.sidebar-open .sidebar.sidebar-dark {
        transform: translateX(0);
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.35);
    }

    /* Content + footer take the full width once the sidebar is off-canvas. */
    /* IMPORTANT: these selectors must match/exceed sd.php's
       ".sidebar ~ #content-wrapper" specificity (1 id + 1 class), otherwise the
       desktop "margin-left:250px" wins on mobile and crushes the content into a
       tiny strip pushed to the right. */
    #wrapper #content-wrapper,
    .sidebar ~ #content-wrapper,
    body > #content-wrapper {
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden;
    }
    #content-wrapper .sticky-footer,
    body .sticky-footer { margin-left: 0 !important; }

    /* Show backdrop + lock page scroll while the drawer is open. */
    body.sidebar-open .rk-backdrop {
        opacity: 1;
        visibility: visible;
    }
    body.sidebar-open { overflow: hidden; }

    /* ----------------------------------------------------------------------
       Drawer is 250px wide, so render the menu like the FULL desktop sidebar
       (inline icon + label) instead of SB Admin's narrow 6.5rem icon-rail.
       This also makes every item — including the last one (Reports) —
       readable and the whole list comfortably scrollable.
       ---------------------------------------------------------------------- */
    #accordionSidebar.sidebar { padding-bottom: 2rem; }

    #accordionSidebar.sidebar .nav-item .nav-link {
        text-align: left !important;
        padding: 0.85rem 1.25rem !important;
        width: 100% !important;
    }
    #accordionSidebar.sidebar .nav-item .nav-link i {
        font-size: 0.95rem !important;
        margin-right: 0.65rem !important;
        width: 1.3rem;
        text-align: center;
    }
    #accordionSidebar.sidebar .nav-item .nav-link span {
        font-size: 0.95rem !important;
        display: inline !important;
    }
    /* Collapse caret on the right (matches desktop behaviour). */
    #accordionSidebar.sidebar .nav-item .nav-link[data-toggle="collapse"]::after {
        width: 1rem; text-align: center; float: right; vertical-align: 0;
        border: 0; font-weight: 900; content: '\f107'; font-family: 'Font Awesome 5 Free';
    }
    #accordionSidebar.sidebar .nav-item .nav-link[data-toggle="collapse"].collapsed::after {
        content: '\f105';
    }
    /* Submenus expand INLINE inside the drawer (not as an off-screen flyout). */
    #accordionSidebar.sidebar .nav-item .collapse,
    #accordionSidebar.sidebar .nav-item .collapsing {
        position: static !important;
        left: auto !important;
        top: auto !important;
        margin: 0 !important;
        -webkit-animation: none !important;
        animation: none !important;
    }
    #accordionSidebar.sidebar .nav-item .collapse .collapse-inner {
        box-shadow: none !important;
        border-radius: 0 !important;
    }
    #accordionSidebar.sidebar .collapse-item { padding: 0.6rem 1.25rem 0.6rem 2.6rem; }
    #accordionSidebar.sidebar .sidebar-heading { text-align: left; }

    /* ======================================================================
       CUSTOM "view" pages header (order_detail_v / purchase_detail_v)
       The .row.bg header has an inline 33px <h3> + 70px logo — shrink it so
       it fits a phone. !important is required to beat the inline styles.
       ====================================================================== */
    .row.bg { padding: 8px 6px !important; }
    .row.bg .col-sm-3,
    .row.bg .col-sm-6 { text-align: center !important; }
    .row.bg h3 {
        font-size: 18px !important;
        line-height: 1.3 !important;
        margin-bottom: 8px !important;
    }
    .row.bg img {
        width: 46px !important;
        height: 46px !important;
        margin-top: 0 !important;
    }
    .row.bg .btn {
        float: none !important;
        margin-top: 6px !important;
    }
    .main-content { margin-left: 0 !important; }

    /* ======================================================================
       POS / full-screen form pages — keep inputs usable, kill overflow
       ====================================================================== */
    #table-container-wrapper { max-height: 60vh !important; }
}

/* ==========================================================================
   TABLET / DESKTOP  (>= 768px)
   Make the content + footer follow the sidebar when it is collapsed via the
   round toggle button. The custom sidebar is position:fixed with a manual
   content margin, so we must update that margin for the collapsed state too,
   otherwise the content stays pinned at 250px and leaves a large gap.
   ========================================================================== */
@media (min-width: 768px) {
    #content-wrapper {
        transition: margin-left 0.25s ease, width 0.25s ease;
    }
    .sidebar.toggled ~ #content-wrapper,
    body.sidebar-toggled .sidebar ~ #content-wrapper,
    body.sidebar-toggled #content-wrapper {
        margin-left: 6.5rem !important;
        width: calc(100% - 6.5rem) !important;
    }
    body.sidebar-toggled .sticky-footer {
        margin-left: 6.5rem !important;
    }
}

/* ==========================================================================
   EXTRA-SMALL  (very small phones — up to 480px)
   ========================================================================== */
@media (max-width: 480px) {

    h1, .h1 { font-size: 1.35rem !important; }
    h2, .h2 { font-size: 1.2rem !important; }

    .container, .container-fluid {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* Slightly smaller drawer so a sliver of content stays visible. */
    #accordionSidebar.sidebar,
    .navbar-nav.sidebar,
    .sidebar.sidebar-dark { max-width: 86vw !important; }

    /* Action button groups in tables/cards stack neatly. */
    .btn-group-vertical-xs .btn { display: block; width: 100%; margin: 0 0 4px 0; }
}
