/* ============================================================
   touch.css — universal touch/kiosk optimizations
   Loaded after style.css so these rules win the cascade without
   needing !important on most selectors.
   ============================================================ */

html {
    touch-action: manipulation;   /* kill the 300ms tap delay + double-tap zoom */
    -webkit-tap-highlight-color: transparent;
}

/* ============================================================
   Universal scroll shell.
   style.css only locks html/body and makes .page-body the single
   scrolling pane inside its @media (max-width:768px) block, so a
   touchscreen wider than that (most POS monitors) falls back to
   plain document scroll, which is unreliable on many touch
   digitizers. Apply the same locked-shell / internal-scroll-pane
   pattern at every width so drag-to-scroll is consistent everywhere.
   The sidebar stays `position:fixed` regardless, so this doesn't
   affect its layout. ============================================================ */
html, body {
    overflow: hidden;
    overscroll-behavior: none; /* stop a drag from bouncing the whole page or triggering browser back/refresh gestures */
}

.app-wrapper {
    height: 100vh;
    overflow: hidden;
}

.main-content {
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.page-body {
    flex: 1;
    min-height: 0;   /* required so this actually shrinks and scrolls instead of growing past its box */
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
}

/* Sidebar nav is the same kind of internal scroll pane as .page-body (its
   parent .sidebar is position:fixed with a viewport-bound height) -- give it
   the same touch-scrolling treatment, otherwise a finger drag over a long nav
   list (Admin has ~19 links) feels stuck/step-wise instead of a smooth pan. */
.sidebar-nav {
    min-height: 0;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
}

/* Mouse-drag-to-scroll affordance (see assets/js/touch-scroll.js) --
   real touch input never sees this class, it only applies to a held mouse drag. */
.page-body.drag-scrolling,
.page-body.drag-scrolling * {
    cursor: grabbing !important;
    user-select: none !important;
    -webkit-user-select: none !important;
}

/* Anything the user taps gets a real target size and no accidental text-select */
button,
.btn,
.nav-item,
.menu-toggle,
a.nav-item,
input[type="checkbox"],
input[type="radio"],
select,
.form-control,
.select2-selection,
.page-link,
.dataTables_paginate .paginate_button,
.modal .btn-close,
.swal2-styled,
[data-vkb-key],
.vkb-key {
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
}

/* Text fields stay selectable/editable */
input, textarea { user-select: text; -webkit-user-select: text; }

/* ── Minimum 44px tap targets, regardless of viewport width ── */
.btn {
    min-height: 44px;
    padding-top: 10px;
    padding-bottom: 10px;
}
.btn-sm { min-height: 38px; }

.form-control,
select.form-control,
input.form-control {
    min-height: 44px;
    font-size: 16px; /* stops mobile browsers auto-zooming on focus */
}

textarea.form-control { min-height: 88px; }

.nav-item {
    min-height: 46px;
    display: flex;
    align-items: center;
}

.menu-toggle {
    width: 44px !important;
    height: 44px !important;
}

/* Checkboxes / radios: default 13px boxes are unusable on glass — scale up */
input[type="checkbox"],
input[type="radio"] {
    width: 22px;
    height: 22px;
    accent-color: var(--accent, #f59e0b);
    cursor: pointer;
}

/* Table action icons/buttons need breathing room so fingers don't mis-tap */
.bsscs-table td .btn,
.bsscs-table td button,
.bsscs-table td a.btn {
    min-height: 38px;
    min-width: 38px;
}
.bsscs-table td > * + * { margin-left: 6px; }

/* Give tap feedback since :hover means nothing on a touchscreen */
.btn:active,
.nav-item:active,
.page-link:active,
.dataTables_paginate .paginate_button:active {
    transform: scale(0.97);
    opacity: 0.85;
}

/* ── Select2: bump the closed control and each open-list row ── */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    min-height: 44px !important;
    display: flex;
    align-items: center;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 44px !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 42px !important;
}
.select2-container--default .select2-results__option {
    padding: 12px 10px;
    font-size: 15px;
}
.select2-search--dropdown .select2-search__field {
    min-height: 40px;
    font-size: 16px;
}

/* ── DataTables paging controls ── */
.dataTables_paginate .paginate_button {
    min-width: 40px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px !important;
    margin-left: 4px;
}
.dataTables_length select,
.dataTables_filter input {
    min-height: 40px;
    font-size: 16px;
}

/* ── Bootstrap modal / SweetAlert2 buttons & close icons ── */
.modal .btn-close {
    width: 20px;
    height: 20px;
    padding: 12px;
}
.swal2-styled {
    min-height: 44px;
    font-size: 16px !important;
    padding: 10px 24px !important;
}
.swal2-close {
    width: 44px !important;
    height: 44px !important;
    font-size: 28px !important;
}

/* ── Dropdown menus: taller rows for fat fingers ── */
.dropdown-menu .dropdown-item {
    padding: 12px 16px;
    font-size: 15px;
}

/* ── Offline status banner (assets/js/offline-sync.js) ── */
.offline-banner {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 6px;
    position: sticky;
    top: 0;
    z-index: 90000;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    font-family: var(--font-mono, monospace);
    text-align: center;
}
.offline-banner-offline { background: var(--red-dim, rgba(239,68,68,0.15)); color: var(--red, #ef4444); }
.offline-banner-online  { background: var(--accent-dim, rgba(245,158,11,0.15)); color: var(--accent, #f59e0b); }

/* Inline stocksheet/POS inputs (already sized elsewhere) get the same floor */
.inline-input,
.pos-qty-input {
    min-height: 40px;
    font-size: 16px;
}