/* ==========================================================================
   PS_MOBILE_FIX - mobile usability layer for the POS.

   Loaded immediately after charisma-app.css so it wins over the Bootstrap 2
   theme and its responsive sheet. Every rule lives inside a max-width media
   query, so the desktop cashier screens are completely unaffected.

   The headline bug this fixes: Bootstrap 2 ships

       @media (max-width: 480px) {
         .modal         { position: absolute; }
         .modal.fade.in { top: auto; }
       }

   position:absolute + top:auto drops the dialog at its *static* position in
   the document, which on these very long device and report pages is far below
   the viewport. The backdrop is still position:fixed over the whole screen, so
   the cashier gets a dark screen with no visible dialog and every tap lands on
   the backdrop. Between 481px and 767px the modal instead keeps its desktop
   width:560px / margin-left:-280px, which hangs off the side of the screen.
   ========================================================================== */


/* ==========================================================================
   1. MODALS - phones and small tablets
   The whole modal becomes the scroll container instead of only .modal-body,
   so every control inside it is reachable no matter how tall the content is.
   Header and footer stay pinned, so the close button and the action buttons
   are always on screen.
   ========================================================================== */
@media (max-width: 991px) {

  .modal,
  .modal.fade,
  .modal.fade.in {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* .modal-body had its own scrollbar and a hard max-height (400px in the
     theme, 528px inline on the billing dialog). Both are dropped - the modal
     itself scrolls now, so a capped body would only hide the bottom rows. */
  .modal-body {
    max-height: none !important;
    overflow: visible !important;
    padding: 12px !important;
    padding-bottom: 28px !important;
  }

  /* background-color:inherit picks up whatever .modal is painted, so the
     pinned bars stay opaque on any theme. */
  .modal-header,
  .modal-footer {
    position: -webkit-sticky;
    position: sticky;
    z-index: 3;
    background-color: inherit;
  }
  .modal-header { top: 0; }
  .modal-footer { bottom: 0; margin-bottom: 0 !important; }

  /* The dismiss glyph is a 10px "x" by default - far too small to hit. */
  .modal-header .close {
    padding: 8px 14px !important;
    margin: -4px -4px 0 0 !important;
    font-size: 30px !important;
    line-height: 1 !important;
    opacity: 1 !important;
    filter: alpha(opacity=100);
  }
  .modal-header h3,
  .modal-header h2 { font-size: 18px !important; line-height: 1.3 !important; }

  /* Nothing inside a dialog may push it sideways. */
  .modal * { max-width: 100%; }
  .modal img { height: auto; }
  .modal h1, .modal h2 { font-size: 20px !important; }
  .modal h3, .modal h4 { font-size: 16px !important; }
  .modal td, .modal th { word-break: break-word; overflow-wrap: break-word; }

  /* The billing dialog floats the totals table and the numeric keypad side by
     side (table[float:left] plus .main_panel[width:200px]). That needs ~400px
     of width, so on a phone the keypad is pushed out of reach. Stack them. */
  .modal-body table {
    float: none !important;
    width: 100% !important;
    margin: 0 0 12px 0 !important;
  }
  .modal-body table td { padding: 4px !important; }

  /* Keypad: a real 3-column grid that fills the dialog width. The page-level
     <style> block defining .main_panel loads after this file, so these need
     !important to win. */
  .modal-body .main_panel {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    float: none !important;
    width: auto !important;
    height: auto !important;
    max-width: 420px;
    margin: 0 auto !important;
    padding: 10px !important;
    border-width: 4px !important;
    box-sizing: border-box !important;
  }
  .modal-body .main_panel br { display: none !important; }
  .modal-body .main_panel > center { grid-column: 1 / -1; }
  .modal-body .main_panel .text_box {
    width: 100% !important;
    box-sizing: border-box !important;
    margin-bottom: 6px !important;
  }
  .modal-body .main_panel .number_button {
    float: none !important;
    width: auto !important;
    height: 56px !important;
    margin: 0 !important;
    font-size: 26px !important;
    line-height: 56px !important;
    border-radius: 12px !important;
    -webkit-user-select: none;
    user-select: none;
  }

  /* Anything tappable inside a dialog gets a real touch target. */
  .modal .btn,
  .modal button,
  .modal input[type="submit"],
  .modal input[type="button"],
  .modal label {
    min-height: 44px;
    line-height: normal;
  }
  .modal input[type="radio"],
  .modal input[type="checkbox"] {
    width: 22px;
    height: 22px;
    vertical-align: middle;
    margin: 0 6px 0 0;
  }
  /* The submit control on the billing dialog is a bare <img> inside a
     transparent <button>; keep it a sane tappable size. */
  .modal button > img { max-height: 56px; width: auto; }

  /* 16px stops iOS zooming the page in on focus, which would otherwise leave
     the cashier scrolled away from the dialog. */
  .modal input[type="text"],
  .modal input[type="number"],
  .modal input[type="password"],
  .modal select,
  .modal textarea {
    font-size: 16px;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* The page behind the dialog must not scroll under the finger. */
  body.ps-modal-open { overflow: hidden !important; }
}


/* ==========================================================================
   2. TYPOGRAPHY AND NAVIGATION - phones
   ========================================================================== */
@media (max-width: 767px) {

  /* ------------------------------------------------------------------
     Grid safety net.

     Several pages inline their own stylesheet list and ask for
     css/bootstrap-responsive.css, which is not in the webroot - the
     request 404s and the page runs with no responsive stylesheet at all,
     so the desktop grid survives onto the phone. The links are being
     repointed at the file that does exist, but these few rules make the
     grid stack regardless, so a page that is missed - or a site that has
     diverged - still behaves. Same values the real sheet uses, so this is
     a no-op where it does load.
     ------------------------------------------------------------------ */
  [class*="span"],
  .row-fluid [class*="span"] {
    display: block;
    float: none;
    width: auto;
    margin-left: 0;
  }
  .row-fluid { width: 100%; }
  .container, .container-fluid { width: auto; padding: 0; }
  .navbar .btn-navbar { display: block; }

  /* The theme sets body { font-size: 6pt } (~8px) below 767px, which is what
     makes the whole system unreadable on a phone. */
  body {
    font-size: 14px !important;
    -webkit-text-size-adjust: 100%;
    padding-right: 6px;
    padding-left: 6px;
  }
  td, th, label, p, a, .btn { font-size: 14px; }

  /* Menu trigger and the collapsed menu itself. The sidebar wells carry an
     inline width:200px, which leaves a cramped column on a phone. */
  .navbar .btn-navbar {
    padding: 10px 14px;
    margin-top: 6px;
    min-height: 44px;
  }
  .main-menu-span { width: auto !important; margin: 0 !important; }
  .sidebar-nav {
    width: auto !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
  /* A long menu scrolls instead of running off the bottom of the screen. */
  .nav-collapse.in {
    max-height: 78vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .nav-collapse .nav > li > a,
  .nav-collapse .dropdown-menu a {
    padding: 12px 15px !important;
    font-size: 15px !important;
    min-height: 44px;
    box-sizing: border-box;
  }

  /* Tooltips and the custom .tip overlays latch on after a tap on a touch
     device and then sit on top of the buttons underneath, swallowing taps.
     They stay visible, they just stop intercepting. */
  .tooltip,
  a.tip span,
  .tip span { pointer-events: none !important; }

  /* Wide report tables scroll inside themselves rather than stretching the
     page sideways. Scoped to table.table so the layout tables used inside
     dialogs and on the device cards are left alone. */
  table.table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  img { max-width: 100%; }

  /* Touch targets for the ordinary page chrome. */
  .btn, button, input[type="submit"], input[type="button"] { min-height: 40px; }
  input[type="text"], input[type="number"], input[type="password"],
  select, textarea { font-size: 16px; max-width: 100%; box-sizing: border-box; }

  /* ------------------------------------------------------------------
     Device cards.

     DO NOT give .sortable.row-fluid a percentage width here. The device
     loop in devices.php opens a <div class="sortable row-fluid"> per
     device but only closes one after the whole loop, so the browser nests
     every card inside the one before it. Any percentage width compounds
     down that chain and the cards march off the screen getting smaller
     (190px, 93px, 45px...). Full width is the only safe value until the
     markup itself is fixed.
     ------------------------------------------------------------------ */
  .sortable.row-fluid {
    width: 100% !important;
    margin-left: 0 !important;
    float: none !important;
  }

  .span33 {
    max-width: 100%;
    box-sizing: border-box;
    text-align: center;
  }
  .span33 img { max-width: 100%; }

  /* The game/type picker and the two start buttons on an available device. */
  .span33 select {
    height: 42px;
    font-size: 16px;
    padding: 4px 8px;
  }
  .span33 .rotate-on-hover-un,
  .span33 .rotate-on-hover-ti,
  .span33 .rotate-on-hover {
    width: 54px !important;
    height: 54px;
    margin: 10px 12px;
  }

  /* ------------------------------------------------------------------
     The two header shortcuts - the round "last room" badge and the wide
     "credit account" button - share one .span10 with display:inline-flex.
     Their inline widths are 150px and 86%, which together overflow a
     phone, so flex shrinks both and the circle collapses into a squashed
     oval with its label spilling out.

     Keep them on one row: the badge holds its size, the button takes
     whatever width is left. They are told apart by what they contain
     rather than by source order, since the sites have diverged.

     .well adds 19px of padding on top of those widths and Bootstrap 2
     does not use border-box, so the padding is trimmed and the box model
     corrected first - otherwise the badge really occupies ~190px.
     ------------------------------------------------------------------ */
  .span10:has(> .top-blockk) {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100% !important;
    margin-top: 12px !important;
    box-sizing: border-box;
  }
  .top-blockk {
    box-sizing: border-box !important;
    margin: 0 !important;
    float: none !important;
    padding: 8px !important;
  }
  /* the round badge - the one showing the device name */
  .top-blockk:has(#device-name-display) {
    flex: 0 0 auto !important;
    width: 142px !important;
    min-width: 0 !important;
  }
  /* the wide button - the one with the <h1> label */
  .top-blockk:has(h1) {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
  }
  .top-blockk h1 { font-size: 18px !important; margin: 0 !important; line-height: 1.2 !important; }
  .top-blockk h4 { font-size: 11px !important; margin: 0 0 2px !important; line-height: 1.2 !important; }
  .top-blockk #device-name-display { font-size: 20px !important; line-height: 1.1 !important; }
}


/* ==========================================================================
   3. Touch devices of any size.
   Bootstrap 2 tooltips are hover-triggered. On a touch screen the hover state
   latches after a tap, so the tooltip opens and then just stays there on top
   of whatever the cashier wanted to press next. The tooltip plugin has no
   destroy method in this version, so the fix is to not render them at all
   where there is no real pointer.
   ========================================================================== */
@media (hover: none) {
  .tooltip { display: none !important; }
  a.tip:hover span,
  .tip:hover span { display: none !important; }
}


/* ==========================================================================
   4. Short screens (landscape phones). The rules above already apply here;
   this only buys back some vertical room.
   ========================================================================== */
@media (max-width: 991px) and (max-height: 500px) {
  .modal-header { padding: 6px 12px !important; }
  .modal-header h3, .modal-header h2 { font-size: 15px !important; }
  .modal-body { padding-top: 8px !important; }
  .modal-body .main_panel .number_button {
    height: 44px !important;
    line-height: 44px !important;
    font-size: 20px !important;
  }
}