/* ==========================================================================
   FHS — Global Mobile Responsive Layer (content)
   --------------------------------------------------------------------------
   Fixes the page CONTENT on small screens without changing the desktop
   design. The sidebar drawer itself is handled in pages/common/sd.php
   (the existing .mobile-open / #sidebarOverlay mechanism), so this file
   deliberately does NOT touch the sidebar — only tables, columns, headers,
   forms, and the desktop sidebar-collapse alignment.
   ========================================================================== */

/* 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; }

@media print {
    .rk-table-scroll { overflow: visible !important; width: auto !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; }

    /* Plain (xs) Bootstrap columns stack to full width.
       Responsive variants (col-sm-*, col-md-*, col-xl-*) are left untouched. */
    .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. */
    .container, .container-fluid {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    .row { margin-left: -8px; margin-right: -8px; }

    /* Tables: wrapped by JS, scroll horizontally instead of breaking layout. */
    .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; }

    .btn { white-space: normal; }

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

    .card { margin-bottom: 1rem; }

    /* ----------------------------------------------------------------------
       CUSTOM "view" pages header (order_detail_v / purchase_detail_v)
       The .row.bg header uses an inline 33px <h3> + 70px logo — shrink it so
       it fits a phone. !important is needed 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 table area usable. */
    #table-container-wrapper { max-height: 60vh !important; }
}

@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;
    }
}

/* ==========================================================================
   TABLET / DESKTOP  (>= 768px)
   Make content + footer follow the sidebar when it is collapsed via the round
   toggle button. The sidebar is position:fixed with a manual content margin,
   so the collapsed state must be handled explicitly, 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;
    }
}
