/* =====================================================================
   XOVENT — MOBILE LAYER
   =====================================================================
   Everything here is scoped to small screens, so desktop is untouched.

   What it fixes:
     1. Touch targets — the app ships hundreds of 20-32px controls that
        are effectively un-tappable on a phone. Minimum is now 42px.
     2. Big data tables — made to scroll properly with a pinned first
        column so you never lose track of which row you are on.
     3. Forms — single column, full-width fields, no cramped grids.
     4. POS — checkout rail stacks under the cart, pay bar is thumb-sized.
     5. Modals — full screen on a phone instead of a tiny floating box.
   ===================================================================== */

:root{
  --xm-tap:44px;          /* Apple/Google minimum comfortable tap target */
  --xm-tap-sm:38px;
  --xm-r:12px;
  --xm-line:#E2E7E9;
  --xm-card:#FFFFFF;
  --xm-bg:#F5F7F7;
  --xm-ink:#101418;
  --xm-mut:#6B7681;
  --xm-brand:#0E5C63;
  --xm-brandS:#E3EFEF;
}
@media (prefers-color-scheme:dark){
  :root{
    --xm-line:#283034; --xm-card:#161B1E; --xm-bg:#0E1214;
    --xm-ink:#EAEFEF; --xm-mut:#8B989B; --xm-brand:#5CC4CB; --xm-brandS:#123034;
  }
}

/* =====================================================================
   PHONE  (<= 767px)
   ===================================================================== */
@media (max-width: 767px) {

  /* ---------- 1. TOUCH TARGETS ---------- */
  .btn, button:not(.close):not(.xv-help-fab),
  .tw-dw-btn, a.btn, .dt-button, .input-group-addon {
    min-height: var(--xm-tap-sm) !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
  }
  .btn-xs, .tw-dw-btn-xs, .buttons-html5, .buttons-colvis, .buttons-print {
    min-height: var(--xm-tap-sm) !important;
    padding: 8px 12px !important;
    font-size: 12.5px !important;
  }

  input.form-control, select.form-control, textarea.form-control,
  .form-control, input[type="text"], input[type="number"],
  input[type="password"], input[type="email"], input[type="date"], select {
    min-height: var(--xm-tap) !important;
    font-size: 16px !important;   /* 16px stops iOS zooming on focus */
    border-radius: 10px !important;
    padding: 10px 12px !important;
  }

  .select2-container--default .select2-selection--single {
    height: var(--xm-tap) !important;
    border-radius: 10px !important;
  }
  .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 42px !important; font-size: 15px !important;
  }
  .select2-container--default .select2-selection--single .select2-selection__arrow { height: 42px !important; }
  .select2-search__field { font-size: 16px !important; min-height: 40px !important; }
  .select2-results__option { padding: 12px 14px !important; font-size: 15px !important; }

  /* icon-only action links in tables need real hit area */
  td .btn, td a.btn, td button { min-width: 38px; }

  /* checkbox / radio big enough to hit */
  input[type="checkbox"], input[type="radio"] {
    width: 20px !important; height: 20px !important; vertical-align: middle;
  }

  /* ---------- 2. TABLES ---------- */
  /* keep the horizontal scroll but make it feel deliberate */
  .table-responsive, .dataTables_wrapper .dataTables_scroll,
  .dataTables_scrollBody {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .dataTables_scrollBody { max-height: none !important; }

  /* roomier rows so a finger can hit the action buttons */
  table.table > tbody > tr > td,
  table.dataTable > tbody > tr > td {
    padding: 12px 10px !important;
    font-size: 14px !important;
    white-space: nowrap;
  }
  table.table > thead > tr > th,
  table.dataTable > thead > tr > th {
    padding: 12px 10px !important;
    font-size: 11px !important;
    white-space: nowrap;
  }

  /* pin the first column so you always know which row you are reading */
  table.dataTable > tbody > tr > td:first-child,
  table.dataTable > thead > tr > th:first-child {
    position: sticky; left: 0; z-index: 2;
    background: var(--xm-card) !important;
    box-shadow: 2px 0 4px -2px rgba(0,0,0,.18);
  }

  /* DataTables toolbar stacks instead of squashing */
  .dataTables_wrapper .row { margin: 0 !important; }
  .dataTables_wrapper .col-sm-1,
  .dataTables_wrapper .col-sm-3,
  .dataTables_wrapper .col-sm-8 {
    width: 100% !important; float: none !important;
    padding: 0 !important; margin-bottom: 8px; text-align: left !important;
  }
  .dataTables_filter { width: 100%; }
  .dataTables_filter input { width: 100% !important; margin: 0 !important; }
  .dataTables_length select { min-height: var(--xm-tap-sm) !important; }
  .dt-buttons { display: flex; flex-wrap: wrap; gap: 6px; }
  .dataTables_paginate .paginate_button {
    min-width: 40px; min-height: 40px; line-height: 26px !important;
    margin: 2px !important;
  }

  /* ---------- 3. FORMS ---------- */
  /* one field per row - the bootstrap grid crushes fields on a phone */
  form .col-md-1, form .col-md-2, form .col-md-3, form .col-md-4,
  form .col-md-5, form .col-md-6, form .col-md-7, form .col-md-8,
  form .col-md-9, form .col-md-10, form .col-sm-2, form .col-sm-3,
  form .col-sm-4, form .col-sm-6, form .col-xs-6 {
    width: 100% !important; float: none !important;
    padding-left: 10px !important; padding-right: 10px !important;
  }
  .form-group { margin-bottom: 16px !important; }
  .form-group > label { font-size: 13px !important; margin-bottom: 6px !important; }
  .content, section.content { padding: 12px 8px !important; }
  section.content-header { padding: 14px 12px 4px !important; }
  section.content-header h1 { font-size: 21px !important; }

  /* ---------- 4. MODALS: full screen ---------- */
  .modal-dialog {
    margin: 0 !important; width: 100% !important; max-width: 100% !important;
    min-height: 100vh;
  }
  .modal-content {
    border-radius: 0 !important; min-height: 100vh; border: none !important;
  }
  .modal-header { position: sticky; top: 0; z-index: 5; background: var(--xm-card) !important; }
  .modal-footer {
    position: sticky; bottom: 0; z-index: 5; background: var(--xm-card) !important;
    display: flex; gap: 8px;
  }
  .modal-footer .btn { flex: 1; }
  .modal-body { padding: 16px 14px !important; }

  /* ---------- 5. POS ---------- */
  .xv-pos { margin: 0 -8px !important; padding: 8px 8px 0 !important; }
  .xv-pos-shell { grid-template-columns: 1fr !important; gap: 10px !important; padding-bottom: 150px !important; }
  .xv-pos-rail { position: static !important; max-height: none !important; }

  /* the pay bar is the most important control on the screen */
  .xv-pos .pos-form-actions {
    padding: 8px 10px !important;
    padding-bottom: calc(8px + env(safe-area-inset-bottom)) !important;
  }
  /* The stock markup nests the buttons inside wrappers that carry
     !important widths, so a grid on the parent gets overridden. Flex
     with forced full-width children is the reliable way here. */
  .xv-pos .pos-form-actions > div,
  .xv-pos .pos-form-actions > div > div {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    justify-content: stretch !important;
  }
  .xv-pos .pos-form-actions #pos-finalize {
    flex: 1 1 100% !important;
    min-height: 52px !important; font-size: 1rem !important;
    padding: 14px !important; width: 100% !important; max-width: 100% !important;
  }
  .xv-pos .pos-form-actions .pos-express-finalize[data-pay_method] {
    min-height: 46px !important; padding: 12px !important; width: 100% !important;
  }
  .xv-pos .pos-form-actions #pos-draft,
  .xv-pos .pos-form-actions #pos-quotation,
  .xv-pos .pos-form-actions #pos-cancel,
  .xv-pos .pos-form-actions #recent-transactions {
    min-height: 42px !important; width: 100% !important;
  }
  /* the running total needs to be readable at a glance while selling */
  .xv-pos .pos-form-actions #total_payable,
  .xv-pos .pos-form-actions .total_payable_span {
    font-size: 1.5rem !important;
  }
  .xv-pos-topbar #search_product { height: 48px !important; font-size: 16px !important; }

  /* cart columns: drop the noise, keep product / qty / total */
  #pos_table th:nth-child(n+5), #pos_table td:nth-child(n+5) { display: none; }
  #pos_table th, #pos_table td { padding: 10px 6px !important; }
  #pos_table input.pos_quantity { min-height: 40px !important; font-size: 15px !important; }

  /* the floating help button must not cover the pay bar */
  .xv-help-fab { bottom: 160px !important; right: 12px !important; }

  /* ---------- 6. DASHBOARD 2.0 ---------- */
  .xv2 { margin: 0 -8px !important; padding: 12px 10px 40px !important; }
  .xv2 .g4, .xv2 .g3, .xv2 .g2 { grid-template-columns: 1fr !important; }
  .xv2 .top { flex-direction: column; align-items: stretch; gap: 12px; }
  .xv2 .qa { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; }
  .xv2 .qa a { justify-content: center; min-height: 44px; }
  .xv2 .strip { flex-direction: column; align-items: stretch; }
  .xv2 .strip .r { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .xv2 .strip .btn { min-height: 42px; justify-content: center; text-align: center; }
  .xv2 .fig { font-size: 24px !important; }

  /* ---------- 7. CHROME ---------- */
  .box-header, .box-body { padding: 14px !important; }
  .pos-header > div { padding: 10px !important; }
  .pos-header { margin-bottom: 8px !important; }

  /* stop long words breaking the layout */
  td, th, .box-title, h1, h2, h3 { overflow-wrap: anywhere; }
}

/* =====================================================================
   TABLET  (768px - 991px)
   ===================================================================== */
@media (min-width: 768px) and (max-width: 991px) {
  .btn, button:not(.close), .tw-dw-btn { min-height: 40px !important; }
  .form-control, select, .select2-container--default .select2-selection--single {
    min-height: 42px !important; font-size: 15px !important;
  }
  form .col-md-3, form .col-md-4 { width: 50% !important; }
  .xv-pos-shell { grid-template-columns: 1fr !important; }
  .xv-pos-rail { position: static !important; max-height: none !important; }
  .xv2 .g4 { grid-template-columns: repeat(2,1fr) !important; }
}

/* =====================================================================
   Anything with a coarse pointer (touch screens of any size)
   ===================================================================== */
@media (pointer: coarse) {
  a, button, .btn, input, select, textarea { touch-action: manipulation; }
  td .btn + .btn { margin-left: 6px; }
}

/* =====================================================================
   8. REMAINING TAP TARGETS  (phone)
   =====================================================================
   The header chips and the clickable labels inside table cells were
   still 19-32px. These are real controls, so they get a real hit area.
   Plain text links are deliberately left alone - inflating every inline
   link would wreck the reading layout.
   ===================================================================== */
@media (max-width: 767px) {

  /* top bar chips (POS, calculator, profit, notifications, user menu) */
  header a[class*="tw-inline-flex"],
  header button[class*="tw-inline-flex"],
  .main-header a[class*="tw-inline-flex"],
  a.dropdown-toggle, .navbar-nav > li > a,
  a[class*="tw-rounded-lg"][class*="tw-p-1"],
  button[class*="tw-rounded-lg"][class*="tw-p-1"] {
    min-height: 40px !important;
    min-width: 40px !important;
    padding: 8px 12px !important;
    display: inline-flex !important;
    align-items: center; justify-content: center;
  }

  /* clickable status chips inside table rows */
  td a.payment-status-label, td .payment-status-label,
  td a[class*="modal"], td a[data-toggle], td .label, td .badge {
    display: inline-flex !important;
    align-items: center;
    min-height: 32px !important;
    padding: 6px 12px !important;
    font-size: 12.5px !important;
    border-radius: 8px !important;
  }

  /* dropdown menu rows in any menu */
  .dropdown-menu > li > a, .dt-button-collection .dt-button {
    min-height: 44px !important;
    display: flex !important; align-items: center;
    padding: 10px 16px !important; font-size: 15px !important;
  }

  /* search box really should fill the width */
  .dataTables_filter { display: block !important; width: 100% !important; }
  .dataTables_filter label { display: block !important; width: 100% !important; margin: 0 !important; }
  .dataTables_filter label input[type="search"],
  .dataTables_filter input {
    display: block !important; width: 100% !important;
    min-height: 42px !important; margin: 6px 0 0 !important;
  }

  /* the sidebar drawer needs comfortable rows too */
  #side-bar a, .side-bar a {
    min-height: 44px !important; display: flex !important; align-items: center;
  }
}

/* =====================================================================
   9. FORM SIMPLIFICATION  (all screen sizes)
   =====================================================================
   Step headings and the "More options" fold, driven by js/xv-forms.js.
   ===================================================================== */
.xv-step{
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  margin:22px 0 12px; padding:0 10px 9px;
  border-bottom:1px solid var(--xm-line);
}
.xv-step:first-of-type{ margin-top:6px; }
.xv-step .n{
  width:22px; height:22px; flex-shrink:0; border-radius:6px;
  background:var(--xm-brand); color:#fff;
  font-size:11px; font-weight:800; line-height:22px; text-align:center;
  font-family:"IBM Plex Mono",ui-monospace,monospace;
}
.xv-step .t{
  font-family:Archivo,system-ui,sans-serif;
  font-size:15px; font-weight:700; color:var(--xm-ink); letter-spacing:-.01em;
}
.xv-step .h{ font-size:12.5px; color:var(--xm-mut); }

.xv-adv{ display:none !important; }
form.xv-adv-open .xv-adv{ display:block !important; }

.xv-adv-toggle{
  display:inline-flex; align-items:center; gap:7px;
  margin:16px 10px 12px; padding:9px 16px;
  font-size:12.5px; font-weight:700; letter-spacing:.03em;
  color:var(--xm-mut); background:transparent;
  border:1px dashed var(--xm-line); border-radius:999px;
  cursor:pointer; user-select:none; font-family:inherit;
  transition:all .15s cubic-bezier(.4,0,.2,1);
}
.xv-adv-toggle:hover{
  color:var(--xm-brand); border-color:var(--xm-brand);
  background:var(--xm-brandS); border-style:solid;
}
.xv-adv-toggle em{
  font-style:normal; font-size:10.5px; font-weight:800;
  padding:1px 7px; border-radius:99px;
  background:var(--xm-line); color:var(--xm-mut);
}
.xv-adv-toggle:hover em{ background:var(--xm-brand); color:#fff; }

@media (max-width:767px){
  .xv-step{ margin:18px 0 10px; padding:0 8px 8px; }
  .xv-step .h{ flex-basis:100%; }
  .xv-adv-toggle{ width:calc(100% - 20px); justify-content:center; min-height:44px; }
}