/* ============================================================
   TOUCH.CSS — Touchscreen Optimization for Apex Hardware POS
   Designed for retail touchscreen monitors (10"–27")
   ============================================================ */

/* ── 1. ROOT: BASE TOUCH SIZES ─────────────────────────────── */
:root {
  --touch-min: 48px;        /* WCAG minimum touch target */
  --touch-radius: 10px;
  --touch-font-base: 15px;
  --touch-font-lg: 17px;
  --touch-ripple: rgba(255,255,255,0.25);
}

/* Prevent text selection on tapping (feels snappy) */
* {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

/* Smooth momentum scrolling on iOS/touch */
.pos-catalog-grid,
.pos-cart-items-table,
.table-responsive,
.sidebar,
.modal-body {
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

/* ── 2. PREVENT ZOOM ON INPUT FOCUS ───────────────────────── */
/* Browser zooms when input font-size < 16px. We force 16px+ */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="search"],
select,
textarea {
  font-size: 16px !important;
  min-height: var(--touch-min) !important;
  padding: 10px 14px !important;
  touch-action: manipulation;
}

/* Inputs inside modals also need this */
.modal input,
.modal select,
.modal textarea {
  font-size: 16px !important;
  min-height: var(--touch-min) !important;
}

/* ── 3. BUTTONS — ALL BUTTONS ──────────────────────────────── */
.btn {
  min-height: var(--touch-min) !important;
  min-width: var(--touch-min) !important;
  font-size: var(--touch-font-base) !important;
  padding: 10px 18px !important;
  border-radius: var(--touch-radius) !important;
  touch-action: manipulation;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  position: relative;
  overflow: hidden;
  transition: transform 0.08s ease, box-shadow 0.1s ease;
}

/* Active press feedback (visible press effect) */
.btn:active {
  transform: scale(0.96) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2) !important;
}

/* Ripple effect on touch */
.btn::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  background: var(--touch-ripple);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.3s ease, height 0.3s ease, opacity 0.3s ease;
  opacity: 0;
}
.btn:active::after {
  width: 200px; height: 200px;
  opacity: 1;
  transition: 0s;
}

/* Small buttons should still meet touch target */
.btn-sm, .btn-xs {
  min-height: 40px !important;
  min-width: 40px !important;
  padding: 8px 14px !important;
  font-size: 14px !important;
}

/* Large buttons — more touch-friendly */
.btn-lg, .btn-block {
  min-height: 56px !important;
  font-size: var(--touch-font-lg) !important;
  padding: 14px 20px !important;
}

/* ── 4. SIDEBAR NAVIGATION ─────────────────────────────────── */
.main-sidebar .nav-link {
  min-height: 52px !important;
  display: flex !important;
  align-items: center !important;
  padding: 14px 16px !important;
  font-size: 15px !important;
  border-radius: 8px !important;
  margin: 2px 8px !important;
  touch-action: manipulation;
  transition: background 0.15s ease;
}

.main-sidebar .nav-link:active {
  background: rgba(255,255,255,0.2) !important;
}

.main-sidebar .nav-icon {
  font-size: 18px !important;
  min-width: 22px !important;
  margin-right: 10px !important;
}

.main-sidebar .nav-link p {
  font-size: 14px !important;
  line-height: 1.2 !important;
}

/* ── 5. TOP HEADER BAR ─────────────────────────────────────── */
.main-header {
  min-height: 56px !important;
}

.main-header .nav-link {
  min-height: 56px !important;
  min-width: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 20px !important;
}

/* ── 6. DATATABLES — TOUCH-FRIENDLY ROWS ──────────────────── */
.table tbody td,
.table thead th {
  padding: 14px 12px !important;
  font-size: 14px !important;
  vertical-align: middle !important;
}

/* Action buttons inside tables */
.table .btn {
  min-height: 42px !important;
  min-width: 42px !important;
  padding: 8px 12px !important;
  font-size: 14px !important;
  margin: 2px !important;
}

/* DataTables search input */
.dataTables_filter input {
  min-height: 44px !important;
  font-size: 15px !important;
  padding: 8px 14px !important;
  border-radius: 8px !important;
}

/* DataTables length select */
.dataTables_length select {
  min-height: 44px !important;
  font-size: 15px !important;
}

/* ── 7. POS TERMINAL — PRODUCT CARDS ──────────────────────── */
.prod-card {
  border-radius: 12px !important;
  transition: transform 0.1s ease, box-shadow 0.15s ease !important;
  cursor: pointer !important;
  user-select: none;
}

.prod-card:active {
  transform: scale(0.94) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
}

.prod-card .card-body {
  padding: 14px !important;
}

/* Product title larger for readability */
.product-title {
  font-size: 14px !important;
  line-height: 1.3 !important;
}

/* Bigger price text */
.prod-card .h5 {
  font-size: 18px !important;
}

/* Category badges */
.category-badge {
  min-height: 38px !important;
  padding: 8px 16px !important;
  font-size: 13px !important;
  border-radius: 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  touch-action: manipulation;
}

.category-badge:active {
  transform: scale(0.95);
}

/* ── 8. POS CART SPIN CONTROLS ─────────────────────────────── */
.spin-btn {
  min-width: 44px !important;
  min-height: 44px !important;
  padding: 8px !important;
  font-size: 16px !important;
  border-radius: 8px !important;
  touch-action: manipulation;
}

.cart-qty-input {
  min-height: 44px !important;
  font-size: 16px !important;
  text-align: center !important;
}

/* Cart rows: taller for easier reading */
#cart-items-body tr td {
  padding: 12px 8px !important;
  font-size: 14px !important;
}

/* Delete cart row button */
.delete-cart-row {
  min-width: 44px !important;
  min-height: 44px !important;
}

/* Grand Total display — larger and bolder */
#cart-grand-total {
  font-size: 2rem !important;
}

/* ── 9. CHECKOUT FORM ──────────────────────────────────────── */
#amount_tendered,
#customer_name {
  font-size: 20px !important;
  min-height: 60px !important;
  padding: 14px 16px !important;
  border-radius: 10px !important;
}

#amount_change {
  font-size: 22px !important;
  min-height: 60px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  border-radius: 10px !important;
}

#pay-print-btn {
  min-height: 64px !important;
  font-size: 18px !important;
  letter-spacing: 0.5px !important;
  border-radius: 12px !important;
}

/* ── 10. TOUCH NUMPAD ──────────────────────────────────────── */
#touch-numpad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 10px;
}

.numpad-btn {
  background: #f0f4ff;
  border: 1.5px solid #d0d8f0;
  border-radius: 10px;
  font-size: 22px;
  font-weight: 700;
  color: #2d3436;
  min-height: 58px;
  cursor: pointer;
  transition: background 0.1s, transform 0.08s;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

.numpad-btn:active {
  background: #dde6ff;
  transform: scale(0.92);
  border-color: #6a11cb;
}

.numpad-btn.numpad-zero {
  grid-column: span 1;
}

.numpad-btn.numpad-dot {
  background: #fff8e1;
  border-color: #ffc107;
}

.numpad-btn.numpad-clear {
  background: #fff0f0;
  border-color: #dc3545;
  color: #dc3545;
  font-size: 16px;
}

.numpad-btn.numpad-backspace {
  background: #fff8ee;
  border-color: #fd7e14;
  color: #fd7e14;
  font-size: 18px;
}

/* ── 11. MODAL TOUCH IMPROVEMENTS ─────────────────────────── */
.modal-dialog {
  margin: 10px auto !important;
}

.modal-header {
  min-height: 56px !important;
  padding: 14px 20px !important;
}

.modal-header .close {
  min-width: 44px !important;
  min-height: 44px !important;
  font-size: 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.modal-footer .btn {
  min-height: 48px !important;
  font-size: 15px !important;
}

/* ── 12. FORMS IN MODALS ───────────────────────────────────── */
.form-group label {
  font-size: 14px !important;
  font-weight: 600 !important;
  margin-bottom: 6px !important;
}

.form-control {
  border-radius: 8px !important;
  font-size: 16px !important;
  min-height: var(--touch-min) !important;
  padding: 10px 14px !important;
}

.form-control-sm {
  min-height: 40px !important;
  font-size: 14px !important;
}

.form-control-lg {
  min-height: 56px !important;
  font-size: 18px !important;
}

/* ── 13. SELECT2 — TOUCH FRIENDLY ─────────────────────────── */
.select2-container--bootstrap4 .select2-selection {
  min-height: var(--touch-min) !important;
  padding: 8px 12px !important;
  font-size: 16px !important;
  border-radius: 8px !important;
}

.select2-results__option {
  padding: 12px 16px !important;
  font-size: 15px !important;
}

/* ── 14. CONFIRM / SWEETALERT BUTTONS ─────────────────────── */
.swal2-confirm, .swal2-cancel {
  min-height: 48px !important;
  min-width: 100px !important;
  font-size: 16px !important;
  padding: 12px 24px !important;
  border-radius: 10px !important;
}

/* ── 15. INFO BOXES (DASHBOARD CARDS) ─────────────────────── */
.info-box {
  min-height: 80px !important;
  border-radius: 12px !important;
}

.info-box-icon {
  width: 80px !important;
  height: 80px !important;
  font-size: 28px !important;
  line-height: 80px !important;
  border-radius: 12px 0 0 12px !important;
}

.info-box-content {
  padding: 12px 16px !important;
}

.info-box-number {
  font-size: 1.6rem !important;
}

/* ── 16. SCROLLBAR — WIDER FOR TOUCH ──────────────────────── */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.2);
  border-radius: 4px;
}

/* ── 17. LOGIN PAGE ────────────────────────────────────────── */
.login-page .form-control {
  min-height: 54px !important;
  font-size: 18px !important;
}

.login-page .btn {
  min-height: 54px !important;
  font-size: 18px !important;
}

/* ── 18. PREVENT ACCIDENTAL DOUBLE-TAP ZOOM ───────────────── */
a, button, [role="button"], label, .badge,
.category-badge, .prod-card, .nav-link,
.numpad-btn {
  touch-action: manipulation;
}

/* ── 19. POS FULLSCREEN SEARCH INPUT ──────────────────────── */
#search-prod {
  font-size: 16px !important;
  min-height: 46px !important;
  padding: 10px 14px !important;
  border-radius: 8px !important;
}

/* ── 20. ACTIVE NAV INDICATOR ──────────────────────────────── */
.main-sidebar .nav-link.active {
  background: linear-gradient(90deg, rgba(106,17,203,0.6) 0%, rgba(37,117,252,0.5) 100%) !important;
  box-shadow: 0 4px 12px rgba(106,17,203,0.3) !important;
}