/* ============================================================
   GLAMPOS v4 — Custom CSS  (Tailwind handles utilities)
   Tablet-first responsive design for beauty & therapy POS
   ============================================================ */

/* ---- Scrollbar ---- */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: #cbd5e1; }

/* ---- Sidebar ---- */
.sidebar-gradient {
  background: linear-gradient(180deg, #0f172a 0%, #131f34 100%);
}

/* ---- POS Layout — Tablet optimized ---- */
.pos-wrap {
  display: flex;
  height: calc(100vh - 56px);
  overflow: hidden;
}
.pos-left {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  padding: 16px;
  background: #f8fafc;
  -webkit-overflow-scrolling: touch;
}
.pos-right {
  width: 340px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-left: 1px solid #f1f5f9;
  overflow: hidden;
}

/* Mobile (< 640px): stack vertically */
@media (max-width: 639px) {
  .pos-wrap { flex-direction: column; height: auto; min-height: calc(100vh - 56px); }
  .pos-left  { max-height: 50vh; min-height: 200px; }
  .pos-right { width: 100%; flex: 1; }
}

/* Small tablet portrait (640px - 767px): side by side, narrower cart */
@media (min-width: 640px) and (max-width: 767px) {
  .pos-right { width: 280px; }
}

/* Tablet (768px - 1023px): optimized for iPad */
@media (min-width: 768px) and (max-width: 1023px) {
  .pos-right { width: 320px; }
  .pos-left { padding: 12px; }
}

/* ---- Touch-friendly targets ----
   The tablet is the primary device, so every interactive control clears the
   44px minimum on coarse pointers. Scoped to a named selector list rather
   than a blanket `button {}` so dense table rows grow predictably. */
:root { --touch-min: 44px; }

@media (pointer: coarse) {
  .touch-target { min-height: var(--touch-min); min-width: var(--touch-min); }

  button,
  a[role="button"],
  [type="button"], [type="submit"], [type="reset"],
  select,
  textarea,
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  .cat-pill,
  .pg-links a,
  .tour-fab {
    min-height: var(--touch-min);
  }

  button, a[role="button"], [type="button"], [type="submit"], .cat-pill, .pg-links a {
    min-width: var(--touch-min);
  }

  /* Native checkboxes and radios are far too small to hit reliably */
  input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; }

  button, a[role="button"], .pay-btn, .cat-pill, .item-card {
    -webkit-tap-highlight-color: transparent;
  }
}

/* ---- Focus visibility ----
   Keyboard and stylus users need to see focus; pointer clicks should not
   paint a ring. */
:focus-visible {
  outline: 2px solid #b8860b;
  outline-offset: 2px;
  border-radius: 6px;
}
:focus:not(:focus-visible) { outline: none; }

/* ---- Tabular figures ----
   Only affects digits, so it is safe to apply broadly. Keeps money columns
   aligned instead of ragged under Inter's proportional figures. */
table,
.tabular-nums,
input[inputmode="decimal"],
input[inputmode="numeric"] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ---- Item card hover ---- */
.item-card {
  transition: transform 0.13s ease, box-shadow 0.13s ease, border-color 0.13s ease;
}
.item-card:not(.sold-out):hover,
.item-card:not(.sold-out):active {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -4px rgba(184,134,11,0.15), 0 4px 8px -2px rgba(0,0,0,0.06);
  border-color: #d4a017;
}
.item-card:not(.sold-out):active {
  transform: translateY(0);
}
.item-card.sold-out { opacity: 0.45; cursor: not-allowed; }

/* ---- Modal backdrop animation ---- */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(2px);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  transition: opacity 0.18s ease;
}
.modal-overlay.open {
  display: flex;
  opacity: 1;
}
.modal-panel {
  transform: translateY(8px) scale(0.98);
  transition: transform 0.18s ease, opacity 0.18s ease;
  opacity: 0;
  max-height: 90vh;
  overflow-y: auto;
}
.modal-overlay.open .modal-panel {
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* ---- Stat card hover ---- */
.stat-card {
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.stat-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 16px -4px rgba(0,0,0,0.08);
}

/* ---- Gold gradient button ---- */
.btn-gold {
  background: linear-gradient(135deg, #b8860b 0%, #d4a017 100%);
  transition: filter 0.12s ease, transform 0.1s ease;
}
.btn-gold:hover:not(:disabled) {
  filter: brightness(1.08);
  transform: translateY(-1px);
}
.btn-gold:disabled { opacity: 0.5; cursor: not-allowed; transform: none; filter: none; }

/* ---- Charge button ---- */
.charge-btn {
  background: linear-gradient(135deg, #b8860b 0%, #d4a017 100%);
  transition: filter 0.13s ease;
}
.charge-btn:hover:not(:disabled) { filter: brightness(1.08); }
.charge-btn:disabled { opacity: 0.5; cursor: not-allowed; filter: none; }

/* ---- Nav link active ---- */
.nav-active {
  background: rgba(255,255,255,0.10);
  color: #ffffff;
}

/* ---- SweetAlert2 custom theme ---- */
.swal2-popup.swal-glam {
  font-family: 'Inter', sans-serif !important;
  border-radius: 16px !important;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.18) !important;
}
.swal2-popup.swal-glam .swal2-title {
  font-size: 1rem !important; font-weight: 600 !important; color: #0f172a !important;
}
.swal2-popup.swal-glam .swal2-html-container {
  font-size: 0.875rem !important; color: #64748b !important;
}
.swal2-popup.swal-glam .swal2-confirm {
  background: linear-gradient(135deg,#b8860b,#d4a017) !important;
  border-radius: 10px !important; font-size: 0.875rem !important; font-weight: 500 !important;
  padding: 10px 24px !important; min-height: 44px;
}
.swal2-popup.swal-glam .swal2-cancel {
  background: #f8fafc !important; color: #374151 !important;
  border: 1px solid #e5e7eb !important; border-radius: 10px !important;
  font-size: 0.875rem !important; padding: 10px 24px !important; min-height: 44px;
}
.swal2-popup.swal-toast-glam {
  font-family: 'Inter', sans-serif !important;
  border-radius: 12px !important;
  font-size: 0.855rem !important;
  box-shadow: 0 10px 25px -5px rgba(0,0,0,0.12) !important;
  border: 1px solid #f1f5f9 !important;
}
.swal2-popup.swal-toast-glam .swal2-timer-progress-bar {
  background: #b8860b !important;
}

/* ---- Form focus ring ---- */
.form-input:focus {
  outline: none;
  border-color: #b8860b;
  box-shadow: 0 0 0 3px rgba(184,134,11,0.12);
}

/* ---- Table row hover ---- */
.tbl-row { transition: background 0.08s; }
.tbl-row:hover { background: #f8fafc; }
.tbl-row.clickable { cursor: pointer; }

/* ---- Responsive table helpers ---- */
@media (max-width: 767px) {
  .hide-mobile { display: none !important; }
}
@media (max-width: 1023px) {
  .hide-tablet { display: none !important; }
}

/* ---- Pagination (built by PHP) ---- */
.pg-link-active {
  background: linear-gradient(135deg,#b8860b,#d4a017) !important;
  color: white !important; border-color: transparent !important;
}

/* ---- Print / PDF Export ---- */
@media print {
  /* Hide navigation & chrome */
  .no-print, aside#sidebar, header, #sidebarOverlay,
  .btn-gold, nav, [onclick="openSidebar()"],
  button[onclick="exportPDF()"] { display: none !important; }

  /* Reset body & layout */
  body {
    background: white !important;
    font-size: 12px !important;
    display: block !important;
    min-height: auto !important;
  }

  /* Remove sidebar margin from main wrapper */
  body > div, .flex-1.flex.flex-col {
    margin-left: 0 !important;
    min-height: auto !important;
  }

  /* Content area */
  main {
    padding: 12px 0 !important;
  }

  /* Cards */
  .stat-card, .bg-white {
    break-inside: avoid;
    page-break-inside: avoid;
    box-shadow: none !important;
  }
  .stat-card { border: 1px solid #e5e7eb !important; }

  /* Shadows off */
  .shadow-card, .shadow-card-lg, .shadow-sm, .shadow-md, .shadow-lg, .shadow-xl, .shadow-2xl {
    box-shadow: none !important;
  }

  /* Tables */
  table { font-size: 11px; }
  .overflow-x-auto { overflow: visible !important; }

  /* Borders softer */
  .rounded-2xl { border-radius: 8px !important; }
  .rounded-3xl { border-radius: 10px !important; }

  /* Charts */
  canvas { max-height: 180px !important; }

  /* Print-only header */
  .print-header { display: flex !important; }

  /* Links */
  a { color: inherit !important; text-decoration: none !important; }
  a[href]::after { content: none !important; }

  /* Grids — keep responsive layout */
  .grid { gap: 8px !important; }

  /* POS */
  .pos-wrap { display: block; height: auto; }

  /* Page setup */
  @page {
    margin: 1.2cm;
    size: A4;
  }
}

/* ---- Beauty industry glass card effect ---- */
.glass-card {
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.5);
}

/* ---- Smooth page transitions ---- */
main { animation: fadeIn 0.2s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ---- Virtual Tour / Onboarding ---- */
.tour-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,0);
  transition: background 0.3s ease;
}
.tour-overlay.tour-active {
  background: rgba(0,0,0,0.55);
}
.tour-highlight {
  position: absolute;
  border: 2px solid #d4a017;
  border-radius: 12px;
  box-shadow: 0 0 0 4000px rgba(0,0,0,0.5), 0 0 20px rgba(184,134,11,0.3);
  transition: all 0.35s cubic-bezier(0.4,0,0.2,1);
  pointer-events: none;
  z-index: 10000;
}
.tour-tooltip {
  position: absolute;
  z-index: 10001;
  width: 340px;
  max-width: calc(100vw - 32px);
  background: white;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25), 0 0 0 1px rgba(0,0,0,0.05);
  opacity: 0;
  transition: opacity 0.25s ease, top 0.35s ease, left 0.35s ease;
}
.tour-tooltip-arrow {
  position: absolute;
  width: 12px; height: 12px;
  background: white;
  transform: rotate(45deg);
  border-radius: 2px;
}
.tour-tooltip-arrow.arrow-top {
  top: -6px; left: 50%; margin-left: -6px;
  box-shadow: -1px -1px 2px rgba(0,0,0,0.06);
}
.tour-tooltip-arrow.arrow-bottom {
  bottom: -6px; left: 50%; margin-left: -6px;
  box-shadow: 1px 1px 2px rgba(0,0,0,0.06);
}
.tour-tooltip-arrow.arrow-left {
  left: -6px; top: 24px;
  box-shadow: -1px 1px 2px rgba(0,0,0,0.06);
}
.tour-step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 22px;
  border-radius: 20px;
  background: linear-gradient(135deg, #b8860b, #d4a017);
  color: white;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

/* Tour help button (floating) */
.tour-fab {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 999;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #b8860b, #d4a017);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(184,134,11,0.4);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  border: none;
  font-size: 18px;
}
.tour-fab:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(184,134,11,0.5);
}
@media print { .tour-overlay, .tour-fab { display: none !important; } }

/* ============================================================
   TABLE -> CARD STACKING
   ============================================================
   Add .tbl-stack to a <table> and data-label="Column name" to each <td>.
   Below 900px the table becomes one card per row with labelled fields, so
   nothing scrolls sideways on a portrait tablet. At 900px and up it renders
   as a completely ordinary table.

   The first <td> is treated as the card title and takes no data-label.
   A <td> with no data-label (typically the row actions) right-aligns
   without a label.
   ============================================================ */
@media (max-width: 899px) {
  .tbl-stack thead {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  .tbl-stack,
  .tbl-stack tbody,
  .tbl-stack tr,
  .tbl-stack td {
    display: block;
    width: 100%;
  }

  .tbl-stack tr {
    background: #ffffff;
    border: 1px solid #eef2f7;
    border-radius: 14px;
    margin-bottom: 10px;
    padding: 4px 0 6px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
  }

  /* Tailwind's `divide-y divide-gray-50` on tbody recolours each row's top
     border, which would leave one edge of every card a different shade.
     Force it back to the card border colour. */
  .tbl-stack tbody > tr + tr {
    border-top-width: 1px !important;
    border-top-color: #eef2f7 !important;
  }

  .tbl-stack td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 9px 14px !important;
    border: 0 !important;
    text-align: right;
    white-space: normal;
  }

  .tbl-stack td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: left;
  }

  /* First cell is the card title */
  .tbl-stack td:first-child {
    justify-content: flex-start;
    text-align: left;
    font-size: 15px;
    font-weight: 600;
    color: #0f172a;
    padding-top: 12px !important;
    padding-bottom: 4px !important;
  }
  .tbl-stack td:first-child::before { content: none; }

  /* Unlabelled cells (row actions) sit right-aligned with no label */
  .tbl-stack td:not([data-label])::before { content: none; }
  .tbl-stack td:not([data-label]):not(:first-child) { justify-content: flex-end; }

  /* An empty-state row must not be forced into card chrome */
  .tbl-stack tr.tbl-empty { border: 0; box-shadow: none; background: transparent; }
  .tbl-stack tr.tbl-empty td { display: block; text-align: center; }
  .tbl-stack tr.tbl-empty td::before { content: none; }

  /* Wrapper no longer needs to scroll once rows are stacked */
  .tbl-stack-wrap { overflow-x: visible !important; }
}

/* ============================================================
   AUTH PAGES
   ============================================================ */
.auth-shell {
  min-height: 100vh;
  min-height: 100dvh;
  background-color: #0b1120;
  background-image: url('../images/auth-bg.svg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Below 1024px the artwork is the page background and the form floats over
   it in a glass card. From 1024px up the right column turns solid white and
   the card dissolves into it, producing the split screen. 1024 is chosen
   because iPad landscape is exactly 1024 (gets the split) while iPad
   portrait is 768 (keeps the centred card). */
.auth-card {
  background: rgba(255,255,255,0.985);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 24px 60px -12px rgba(0,0,0,0.45);
}

@media (min-width: 1024px) {
  .auth-form-panel {
    background: #ffffff;
    box-shadow: -28px 0 70px -34px rgba(0,0,0,0.65);
  }
  .auth-form-panel .auth-card {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    border: 0;
    border-radius: 0;
  }
  /* The accent bar belongs to the floating card, not the split panel */
  .auth-form-panel .auth-card > .auth-accent { display: none; }
}

.auth-quote-rule {
  width: 46px; height: 2px;
  background: linear-gradient(90deg,#d4a017,rgba(212,160,23,0));
}

@keyframes authFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.float-anim { animation: authFloat 4.5s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .float-anim { animation: none; }
}

/* Auth inputs run taller than app inputs; they are the first thing a new
   user touches and are used one-handed on a tablet. */
.auth-input {
  min-height: 50px;
  font-size: 15px;
}

/* ============================================================
   SUBMIT / LOADING STATE
   ============================================================ */
.is-submitting {
  opacity: 0.62;
  cursor: progress;
  pointer-events: none;
}
.btn-spinner {
  display: inline-block;
  width: 14px; height: 14px;
  border: 2px solid rgba(255,255,255,0.38);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: btnSpin 0.6s linear infinite;
  flex-shrink: 0;
}
.btn-spinner.dark {
  border-color: rgba(15,23,42,0.25);
  border-top-color: #0f172a;
}
@keyframes btnSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .btn-spinner { animation-duration: 1.6s; }
}

/* ============================================================
   EMPTY STATE
   ============================================================ */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 20px 44px;
  color: #94a3b8;
}
.empty-state .empty-icon {
  width: 56px; height: 56px;
  border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
  background: #f8fafc;
  border: 1px solid #eef2f7;
  color: #cbd5e1;
  font-size: 24px;
  margin-bottom: 14px;
}
.empty-state .empty-title {
  font-size: 15px; font-weight: 600; color: #475569; margin-bottom: 4px;
}
.empty-state .empty-hint {
  font-size: 13px; color: #94a3b8; margin-bottom: 16px; max-width: 32ch;
}