/* ============================================================================
   responsive-tablet.css
   Added 2026-09-22.

   THE PROBLEM
   -----------
   The theme has layout rules for phone (<=767px) and desktop (>=1200px) and
   nothing in between. Every tablet width falls in that gap:

     core.css:1462   .content-page { margin-left: 240px; overflow: hidden; }
     responsive.css:201  the ONLY rule that collapses it is @media (max-width: 767px)

   So on an iPad (1032px CSS px portrait, 1366px landscape) the 240px fixed
   sidebar keeps its full width, content is left with 1032 - 240 = 792px, and
   `overflow: hidden` CLIPS everything past that edge instead of scrolling.
   Fields and table columns are cut off and unreachable - there is not even a
   scrollbar to get to them.

   THE APPROACH
   ------------
   This file loads LAST in the bundle, so it overrides the theme without
   editing it. Two reasons that matters: core.css is vendor theme code that may
   be replaced wholesale on a theme upgrade, and an additive file is reversible
   by removing one line from BundleConfig - no desktop regression risk.

   It reuses the theme's OWN collapsed-sidebar mode (`#wrapper.enlarged`,
   core.css:1671 and :1801) rather than inventing a new one, so the sidebar
   looks and behaves exactly as it already does when a user collapses it
   manually on desktop.

   Everything here is scoped to 768px-1199px. Desktop (>=1200px) and phone
   (<=767px) are untouched.
   ============================================================================ */


/* ---------------------------------------------------------------------------
   1. TABLET BAND - the gap between the theme's phone and desktop layouts.
   --------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1199px) {

    /* --- 1a. Give the content its width back ------------------------------
       The sidebar collapses to the theme's own 70px icon rail instead of
       240px, which returns 170px to the content area. Paired with the
       overflow fix below, this is what stops fields being clipped. */

    /* #wrapper is `height: 100%; overflow: hidden` (core.css:131). That clamps
       it to the viewport and clips anything taller, so the moment
       .content-page stops clipping, tall pages get cut off at the fold and the
       page simply stops scrolling - which is what happened below the Receipt
       Detail section. The wrapper must be allowed to grow with its content. */
    #wrapper {
        height: auto;
        min-height: 100%;
        overflow: visible;
    }

    .left.side-menu {
        width: 70px;
    }

    .content-page {
        margin-left: 70px;
        /* Was `overflow: hidden` (core.css:1464), which made horizontal
           overflow unreachable rather than merely off-screen.
           `overflow-x: auto` restores horizontal scrolling for wide content;
           overflow-y is deliberately left `visible` so vertical scrolling
           stays on the document and the page scrolls as one piece. Setting
           `overflow: auto` here instead would create a nested scroll area and
           the page would again appear to stop scrolling. */
        overflow-x: auto;
        overflow-y: visible;
    }

    .topbar .topbar-left {
        width: 70px;
    }

    .footer {
        left: 70px;
    }

    /* Match the theme's collapsed presentation: icons only, no text labels,
       so the 70px rail is legible rather than a column of clipped words. */
    .left.side-menu .menu-title,
    .left.side-menu #sidebar-menu > ul > li > a > span,
    .topbar .topbar-left .logo span {
        display: none;
    }

    .left.side-menu #sidebar-menu > ul > li > a {
        padding: 15px 20px;
        text-align: center;
    }

        .left.side-menu #sidebar-menu > ul > li > a > i {
            font-size: 20px;
            margin-right: 0;
        }

    /* The collapsed rail must not hide the submenu behind the content. */
    .left.side-menu #sidebar-menu > ul > li:hover > ul,
    .left.side-menu #sidebar-menu > ul > li.tap-open > ul {
        display: block;
        left: 70px;
        position: absolute;
        width: 190px;
        z-index: 9999;
    }


    /* --- 1b. Submenus must be reachable by TAP, not only hover -----------
       core.css opens collapsed-sidebar submenus with `:hover` only. A touch
       screen has no hover, so second-level navigation is otherwise
       unreachable on a tablet. `.tap-open` above is toggled by the small
       script in _UboldLayout; this rule is what makes the tap do something.

       The hover rule is kept so a mouse on a small laptop still works. */


    /* --- 1c. Wide tables scroll instead of being cut ----------------------
       Bootstrap's .table-responsive must sit on a WRAPPER of the table to
       create a scroll container; the app puts the class on the <table> itself
       (CommonGrid.js:78), where `overflow-x: auto` does nothing. Rather than
       rewrite every view, give the table's own parent the scroll behaviour. */

    .table-responsive,
    .content-page .panel-body > table,
    .content-page .card-box > table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        width: 100%;
    }

    /* A table inside a scrolling wrapper must be allowed to exceed it -
       otherwise it compresses to the container and the columns crush. */
    .table-responsive > table,
    .table-responsive.table {
        min-width: 100%;
        width: auto;
    }


    /* --- 1d. Stop the fixed topbar covering page content ------------------
       core.css:1467 offsets content by a hardcoded 60px, which assumes the
       topbar never wraps to a second line. At tablet width it does. Using a
       min-height on the topbar keeps the 60px assumption TRUE instead of
       trying to guess the wrapped height. */

    .topbar {
        min-height: 60px;
    }

        .topbar .navbar-custom {
            min-height: 60px;
        }

    .content-page > .content {
        margin-top: 60px;
        padding: 20px 10px 15px 10px;
    }


    /* --- 1e. Form fields must fill their column ---------------------------
       Many views declare only col-md-* (>=992px) or col-lg-* (>=1200px) on
       the OUTER field wrappers, so at tablet width the intended column split
       either squeezes the input to ~130px or drops out entirely. Forcing
       controls to fill whatever width they are given makes the layout degrade
       gracefully without editing hundreds of views. */

    .content-page .form-control,
    .content-page .chosen-container,
    .content-page select.form-control,
    .content-page input.form-control {
        max-width: 100%;
        width: 100%;
    }

    /* Chosen sets inline widths when initialised; they must not win here. */
    .content-page .chosen-container {
        width: 100% !important;
    }

    /* A label and its field need a sane minimum before they wrap, otherwise
       two-column form rows collapse into unreadable slivers. */
    .content-page .form-horizontal .control-label {
        text-align: left;
    }


    /* --- 1f. Tab bars wrap cleanly instead of crushing --------------------
       Customer/Detail.cshtml uses .nav-justified with up to 11 tabs. In
       Bootstrap's table-cell mode each cell gets ~72px, less than the label
       needs, so the row overflows and misaligns. Letting the tabs scroll
       horizontally keeps every tab reachable at its natural width. */

    .nav-tabs.nav-justified {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }

        .nav-tabs.nav-justified > li {
            display: inline-block;
            float: none;
            width: auto;
        }

            .nav-tabs.nav-justified > li > a {
                border-bottom: 1px solid #ddd;
                white-space: nowrap;
            }


    /* --- 1g. Modal tables with hardcoded th widths ------------------------
       e.g. the DuplicateCustomer modal declares 6 x 276px = 1656px of fixed
       column width. Allow it to scroll rather than burst the modal. */

    .modal-body {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }


    /* --- 1h. Listing-page filter toolbars ---------------------------------
       Every listing page (SalesOrder, Customer, Doctor, ...) builds its
       toolbar the same way:

           <div class="col-md-4"> ... date range ... </div>
           <div class="col-md-8"><div class="pull-right">
               <a class="btn">Add New</a>
               <button class="btn">Change Status</button>
               @Html.DropDownList(..., new { @class = "form-control chosen" })
               <button class="btn">export</button> <button class="btn">filter</button>
           </div></div>

       Two things break it below 992px:

       1. col-md-* does not apply, so each wrapper becomes a full-width block
          and the two halves stack instead of sitting side by side.
       2. Bootstrap's .form-control is `display:block; width:100%`. Dropped
          among floated buttons it claims the whole line, pushing every button
          onto its own row - which is why the Store/page-size selects render as
          wide bars with the buttons stacked above and below them.

       Making the toolbar a flex row that wraps fixes both: controls sit in a
       line, wrap only when genuinely out of room, and each keeps its natural
       width instead of one element hogging the row. */

    .card-box .panel-heading .row > [class*="col-"] > .pull-left,
    .card-box .panel-heading .row > [class*="col-"] > .pull-right {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        float: none !important; /* the float is what forced the stacking */
        gap: 8px;
        justify-content: flex-start;
        width: 100%;
    }

    /* Controls size to their content rather than filling the row.
       The minimum is kept modest so six controls still fit one line at the
       narrowest tablet (768px); a larger min-width pushed the export/filter
       buttons onto a third row there. */
    .card-box .panel-heading .pull-right > .form-control,
    .card-box .panel-heading .pull-left > .form-control {
        display: inline-block;
        max-width: 200px;
        min-width: 90px;
        width: auto;
    }

    .card-box .panel-heading .pull-right > .btn,
    .card-box .panel-heading .pull-left > .btn,
    .card-box .panel-heading .pull-right > .btn-group,
    .card-box .panel-heading .pull-left > .btn-group {
        flex: 0 0 auto;
        margin: 0;
        white-space: nowrap;
    }

    /* Chosen replaces the select with its own element and writes an inline
       width, so it needs the same treatment and enough specificity to win. */
    .card-box .panel-heading .chosen-container {
        display: inline-block !important;
        max-width: 200px !important;
        min-width: 90px !important;
        width: auto !important;
    }

    /* The date range is an input-group: keep it intact as one unit so the
       "Date From" / "to" addons stay attached to their inputs. */
    .card-box .panel-heading .input-daterange {
        display: flex;
        flex: 0 0 auto;
        float: none !important;
        max-width: 100%;
        width: auto;
    }

        /* The inputs may shrink; the labels beside them may not. */
        .card-box .panel-heading .input-daterange > .form-control {
            flex: 1 1 auto;
            max-width: 110px;
            min-width: 70px;
            padding-left: 6px;
            padding-right: 6px;
        }

        /* The "Date From" / "to" addons must keep their natural width.
           `flex: 0 0 auto` plus `width: auto` stops flex from shrinking them:
           without it the label cell collapsed below its text and rendered as a
           clipped "D" with the rest cut off. Padding is left at the theme's
           value for the same reason - trimming it was what let them collapse. */
        .card-box .panel-heading .input-daterange > .input-group-addon {
            flex: 0 0 auto;
            overflow: visible;
            white-space: nowrap;
            width: auto;
        }

    /* The two toolbar halves should share a line when there is room for both
       rather than each taking a full-width block of its own. */
    .card-box .panel-heading .row > [class*="col-md-"] {
        display: inline-block;
        float: none;
        vertical-align: top;
        width: auto;
    }

    /* Paging strip: keep the page numbers on one line and let them scroll
       rather than wrap into a ragged block. */
    .card-box .panel-heading + div .pagination,
    .card-box .pagination {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }
}


/* ---------------------------------------------------------------------------
   2. ALL TOUCH-CAPABLE SCREENS, any width.

   `hover: none` matches devices whose primary input cannot hover - a tablet
   or phone, but not a laptop with a touchscreen, which keeps its mouse
   behaviour. This is the correct test for "hover will never fire here".
   --------------------------------------------------------------------------- */
@media (hover: none) {

    /* A hover-only submenu is permanently unreachable on such a device.
       Showing it on tap is handled by `.tap-open`; this makes sure the
       hover-dependent rules cannot leave a menu stuck open after a tap
       elsewhere. */
    #wrapper.enlarged .left.side-menu #sidebar-menu > ul > li:hover > ul {
        display: none;
    }

    #wrapper.enlarged .left.side-menu #sidebar-menu > ul > li.tap-open > ul {
        display: block;
    }

    /* Apple's minimum comfortable target is 44x44px. Buttons and menu rows
       below that are hard to hit accurately. */
    .btn,
    .nav-tabs > li > a,
    #sidebar-menu > ul > li > a {
        min-height: 38px;
    }

    /* Momentum scrolling - without this, scrollable panes feel broken on iOS
       because they stop dead instead of gliding. */
    .table-responsive,
    .modal-body,
    .nav-tabs.nav-justified {
        -webkit-overflow-scrolling: touch;
    }
}


/* ---------------------------------------------------------------------------
   3. SAFETY NET - any width.

   A single over-wide element can otherwise drag the whole page sideways.

   IMPORTANT: this is deliberately applied to `body` ONLY, never to both `html`
   and `body`. When overflow-x is set on both, the spec makes the used
   overflow-y `auto` on each, producing two nested scroll containers - the page
   then scrolls to the end of one box and stops while content continues below.
   core.css:25 already sets overflow-x on body; this just adds the width clamp
   and leaves html alone.
   --------------------------------------------------------------------------- */
body {
    max-width: 100%;
}

/* The content area must not exceed its column, but must keep vertical overflow
   `visible` so the document remains the single scrolling element. */
.content-page > .content {
    max-width: 100%;
}