/* ============================================================
   virtual-keyboard.css — universal on-screen keyboard
   Matches the BSSCS dark/amber theme (see style.css :root vars),
   with safe fallback values in case a page loads this before
   style.css defines them.
   ============================================================ */

#bsscsVkb {
    --vkb-bg:      var(--bg-secondary, #141720);
    --vkb-key:     var(--bg-card, #1a1e2a);
    --vkb-key-b:   var(--border-light, #353a50);
    --vkb-text:    var(--text-primary, #e8eaf0);
    --vkb-muted:   var(--text-secondary, #8b91a8);
    --vkb-accent:  var(--accent, #f59e0b);

    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 100000;
    background: var(--vkb-bg);
    border-top: 1px solid var(--vkb-key-b);
    box-shadow: 0 -8px 24px rgba(0,0,0,0.45);
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
    transform: translateY(110%);
    transition: transform .22s cubic-bezier(.4,0,.2,1);
    font-family: var(--font-main, system-ui, sans-serif);
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
}

#bsscsVkb.vkb-visible { transform: translateY(0); }

body.vkb-open {
    padding-bottom: var(--vkb-h, 260px);
}

/* padding-bottom on body only pushes normal-flow content -- position:fixed bars and
   flex-centered cards (like the login card) sit at fixed viewport coordinates and need
   their own compensation so the keyboard doesn't cover the controls inside them.
   Most pages use the locked html/body + internal .page-body scroll pane (see
   touch.css), where body never actually scrolls -- so body's own padding-bottom
   above has no visible effect there. .page-body needs its own compensation since
   it's the pane that's actually scrolling underneath the fixed keyboard overlay.
   These two are cheap, localized position changes on already position:fixed /
   flex-centered elements, so they're safe to tie to the live vkb-open toggle. */
body.vkb-open #pos-bottom-bar {
    bottom: var(--vkb-h, 260px) !important;
}
body.vkb-open .login-card {
    margin-bottom: var(--vkb-h, 260px);
}

/* .page-body's reservation is NOT gated on vkb-open, unlike the two rules above.
   --vkb-h is set once (see virtual-keyboard.js's build()), not per focus, so this
   is a static amount of bottom padding on every scroll pane, always present --
   toggling it live, tied to focus, used to cause exactly the reflow-on-focus
   problem described below, and the heavier the page (e.g. pos.php's rooms/food
   grids + sticky cart column), the more likely that reflow was to cost enough
   for the browser to blur the field mid-focus, closing the keyboard right after
   it opened. A permanently-reserved gap trades a bit of empty space at the
   bottom of every page for the keyboard reliably staying open. */
.page-body {
    padding-bottom: calc(var(--vkb-h, 260px) + 24px) !important;
}

/* Same reservation, for fields inside a Bootstrap modal (payment/receive-payment
   modals etc). Bootstrap's .modal element is what actually scrolls (it's the
   position:fixed, overflow-y:auto ancestor -- see revealTarget() in
   virtual-keyboard.js), and .modal-body is a normal-flow child of it, so padding
   here makes .modal's own scrollable area taller, exactly like .page-body's
   reservation does for the page. Without it, a field near the bottom of a modal
   has nothing to scroll up into -- the modal's content simply ends where the
   field is. */
.modal-body {
    padding-bottom: calc(var(--vkb-h, 260px) + 24px) !important;
}

/* Select2 (item/customer/supplier search everywhere, incl. pos.php and
   purchases.php) appends its results dropdown to <body> and positions it
   itself, with no idea the on-screen keyboard is covering the bottom of the
   viewport. This used to rely solely on JS capping the dropdown's height the
   moment it opens (see the select2:open handler in includes/layout.php) so
   it would stop short of the keyboard instead of overlapping it -- but in
   practice that measurement can be off (wrong moment, wrong keyboard mode,
   a taller-than-expected results list), and because the keyboard's z-index
   is so high, ANY part of the dropdown that still geometrically overlaps it
   loses the stacking fight and simply disappears -- on a short 15" touchscreen
   viewport this could hide the whole results list, not just its last row.
   Explicitly outranking the keyboard here means a search dropdown is now
   ALWAYS fully visible/tappable while open, even if it visually sits over
   the keyboard -- a reasonable trade since the user's next action at that
   point is tapping a result, not typing further. The height cap in JS is
   kept as a minor nicety (keeps very long lists from towering off-screen),
   not as the thing actually preventing the hidden-search-field bug anymore. */
.select2-container--open .select2-dropdown {
    z-index: 100001;
}

.vkb-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2px 6px 6px;
}

.vkb-title {
    font-size: 10px;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--vkb-muted);
    font-family: var(--font-mono, monospace);
}

.vkb-hide {
    border: 1px solid var(--vkb-key-b);
    background: var(--vkb-key);
    color: var(--vkb-text);
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 12px;
    min-height: 30px;
}
.vkb-hide:active { background: var(--vkb-accent); color: #000; }

.vkb-pad { display: none; max-width: 900px; margin: 0 auto; }
#bsscsVkb.vkb-mode-full .vkb-pad-full { display: block; }
#bsscsVkb.vkb-mode-numeric .vkb-pad-numeric { display: block; max-width: 320px; }

.vkb-row {
    display: flex;
    gap: 4px;
    margin-bottom: 4px;
    justify-content: center;
}

/* Compact by default -- this app targets 15" touchscreen POS terminals, not
   phones, so the keyboard should stay short enough to leave real room for
   search results / select dropdowns above it (see includes/layout.php's
   select2:open handler, which caps a dropdown's height against the
   keyboard's actual live size -- the less height this keyboard claims, the
   more of that cap is usable rows instead of empty space). Sized so the
   keyboard plus a docked search field still leaves enough for at least
   ~4 result rows on a typical 15" touchscreen's usable viewport height. */
.vkb-key {
    flex: 1;
    min-width: 0;
    height: 34px;
    border-radius: 7px;
    border: 1px solid var(--vkb-key-b);
    background: var(--vkb-key);
    color: var(--vkb-text);
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .1s, transform .1s;
}

.vkb-key:active {
    background: var(--vkb-accent);
    color: #000;
    transform: scale(0.95);
}

.vkb-key-wide  { flex: 1.6; font-size: 14px; color: var(--vkb-muted); }
.vkb-key-space { flex: 5; }
.vkb-key-full  { flex: 1 1 100%; }

.vkb-key-enter {
    background: var(--vkb-accent);
    color: #000;
    border-color: var(--vkb-accent);
    font-weight: 700;
}
.vkb-key-enter:active { background: var(--accent-hover, #fbbf24); }

.vkb-key-active {
    background: var(--vkb-accent);
    color: #000;
}

/* Numeric pad: bigger square keys, centered */
.vkb-pad-numeric .vkb-key { height: 46px; font-size: 18px; }
.vkb-pad-numeric .vkb-key-enter { height: 42px; font-size: 15px; }

@media (max-width: 480px) {
    .vkb-key { height: 38px; font-size: 14px; }
    .vkb-pad-numeric .vkb-key { height: 42px; font-size: 16px; }
}

/* Typical 15" POS touchscreen heights (many run ~700-800px of usable browser
   viewport once OS/browser chrome is subtracted) -- tighten one notch further
   so a docked search field + keyboard reliably still leaves room for a
   handful of result rows, not just on the short-phone tier below. */
@media (max-height: 820px) {
    .vkb-key { height: 30px; font-size: 13px; }
    .vkb-pad-numeric .vkb-key { height: 40px; font-size: 16px; }
    .vkb-pad-numeric .vkb-key-enter { height: 36px; font-size: 14px; }
}

/* Short viewports (small phones, or any phone in landscape) -- the keyboard's
   fixed height can otherwise eat close to half the screen, so tighten rows
   and margins further regardless of width. */
@media (max-height: 640px) {
    .vkb-bar { padding: 0 6px 4px; }
    .vkb-row { margin-bottom: 4px; }
    .vkb-key { height: 28px; font-size: 12px; }
    .vkb-pad-numeric .vkb-key { height: 34px; font-size: 15px; }
    .vkb-pad-numeric .vkb-key-enter { height: 30px; font-size: 13px; }
}

@media (max-height: 480px) {
    .vkb-bar { padding: 0 6px 2px; }
    .vkb-title { display: none; }
    .vkb-row { margin-bottom: 3px; }
    .vkb-key { height: 32px; font-size: 13px; }
    .vkb-pad-numeric .vkb-key { height: 34px; font-size: 14px; }
    .vkb-pad-numeric .vkb-key-enter { height: 30px; font-size: 13px; }
}