@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Lao:wght@300;400;500;600;700;800;900&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  --font-lao: 'Noto Sans Lao', 'Saysettha OT', 'Phetsarath OT', -apple-system, BlinkMacSystemFont, sans-serif;
  --color-primary: #F97316;
  --color-primary-hover: #EA580C;
  --color-primary-dark: #C2410C;
}

* {
  font-family: var(--font-lao);
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ==========================================
   CSS Theme Variables (Guaranteed 100% Contrast)
   ========================================== */
.theme-dark {
  --bg-page: #0F1115;
  --bg-header: #13151A;
  --bg-card: #181B20;
  --bg-subcard: #22262F;
  --bg-input: #1C2028;
  --bg-modal: #15181E;
  --text-main: #FFFFFF;
  --text-sub: #9CA3AF;
  --text-muted: #6B7280;
  --border: #2D333F;
  --border-light: #22262F;
  --table-head-bg: #22262F;
  --table-hover-bg: rgba(249, 115, 22, 0.08);
}

.theme-light {
  --bg-page: #F8FAFC;
  --bg-header: #FFFFFF;
  --bg-card: #FFFFFF;
  --bg-subcard: #F1F5F9;
  --bg-input: #FFFFFF;
  --bg-modal: #FFFFFF;
  --text-main: #0F172A;
  --text-sub: #334155;
  --text-muted: #64748B;
  --border: #E2E8F0;
  --border-light: #F1F5F9;
  --table-head-bg: #F1F5F9;
  --table-hover-bg: rgba(249, 115, 22, 0.08);
}

/* Base Root Colors */
body.theme-dark, #app-root.theme-dark {
  background-color: var(--bg-page);
  color: var(--text-main);
}

body.theme-light, #app-root.theme-light {
  background-color: var(--bg-page);
  color: var(--text-main);
}

/* Component Classes */
.app-card {
  background-color: var(--bg-card) !important;
  border-color: var(--border) !important;
  color: var(--text-main) !important;
}

.app-subcard {
  background-color: var(--bg-subcard) !important;
  border-color: var(--border) !important;
  color: var(--text-main) !important;
}

.app-input {
  background-color: var(--bg-input) !important;
  border-color: var(--border) !important;
  color: var(--text-main) !important;
}
.app-input::placeholder {
  color: var(--text-muted) !important;
}

.app-modal {
  background-color: var(--bg-modal) !important;
  border-color: var(--border) !important;
  color: var(--text-main) !important;
}

.app-text-main {
  color: var(--text-main) !important;
}

.app-text-sub {
  color: var(--text-sub) !important;
}

.app-text-muted {
  color: var(--text-muted) !important;
}

.app-border {
  border-color: var(--border) !important;
}

.app-header {
  background-color: var(--bg-header) !important;
  border-color: var(--border) !important;
}

/* Excel Import Dropzone */
.excel-dropzone {
  border: 2px dashed #F97316;
  background: rgba(249, 115, 22, 0.05);
  transition: all 0.2s ease-in-out;
}
.excel-dropzone:hover, .excel-dropzone.dragover {
  background: rgba(249, 115, 22, 0.15);
  border-color: #EA580C;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(156, 163, 175, 0.35);
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(156, 163, 175, 0.65);
}

/* ==========================================
   POS Product Catalog & Card System
   ========================================== */
.pos-product-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
  gap: 16px !important;
  overflow-y: auto !important;
  max-height: calc(100vh - 16.5rem) !important;
  padding: 4px 6px 16px 2px !important;
}

@media (min-width: 1400px) {
  .pos-product-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
  }
}

.pos-product-card {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  background-color: var(--bg-card) !important;
  border: 2px solid var(--border) !important;
  border-radius: 24px !important;
  padding: 14px !important;
  min-height: 290px !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
  user-select: none !important;
  box-sizing: border-box !important;
}

.pos-product-card:hover {
  border-color: #F97316 !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 25px rgba(249, 115, 22, 0.18) !important;
}

.pos-product-card.in-cart {
  border-color: #F97316 !important;
  background-color: rgba(249, 115, 22, 0.08) !important;
  box-shadow: 0 6px 20px rgba(249, 115, 22, 0.22) !important;
}

.pos-product-img-box {
  width: 100% !important;
  height: 145px !important;
  min-height: 145px !important;
  background-color: #FFFFFF !important;
  border-radius: 18px !important;
  border: 1.5px solid var(--border) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 12px !important;
  position: relative !important;
  overflow: hidden !important;
  padding: 8px !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.04) !important;
}

.pos-product-img {
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  transition: transform 0.25s ease !important;
}

.pos-product-card:hover .pos-product-img {
  transform: scale(1.08) !important;
}

.pos-product-fallback-icon {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.08), rgba(245, 158, 11, 0.12)) !important;
}

.pos-product-category-badge {
  position: absolute !important;
  top: 8px !important;
  left: 8px !important;
  background: rgba(0, 0, 0, 0.78) !important;
  color: #FFFFFF !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  padding: 3px 9px !important;
  border-radius: 10px !important;
  backdrop-filter: blur(4px) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  z-index: 2 !important;
}

.pos-product-cart-badge {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  background: #F97316 !important;
  color: #FFFFFF !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  padding: 3px 9px !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 8px rgba(249, 115, 22, 0.5) !important;
  z-index: 2 !important;
}

.pos-product-meta {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  font-size: 11px !important;
  margin-bottom: 6px !important;
}

.pos-product-sku {
  font-family: monospace !important;
  font-weight: 700 !important;
  color: var(--text-muted) !important;
  background: var(--bg-subcard) !important;
  padding: 2px 6px !important;
  border-radius: 6px !important;
}

.pos-product-stock {
  font-size: 11px !important;
  font-weight: 800 !important;
  padding: 2px 6px !important;
  border-radius: 6px !important;
}
.pos-product-stock.in-stock {
  background: rgba(16, 185, 129, 0.15) !important;
  color: #10B981 !important;
}
.pos-product-stock.low-stock {
  background: rgba(239, 68, 68, 0.15) !important;
  color: #EF4444 !important;
}

.pos-product-name {
  font-size: 14.5px !important;
  font-weight: 900 !important;
  line-height: 1.35 !important;
  color: var(--text-main) !important;
  margin: 0 0 10px 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  min-height: 38px !important;
}

.pos-product-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-top: 1.5px solid var(--border) !important;
  padding-top: 10px !important;
  margin-top: auto !important;
}

.pos-product-price {
  font-size: 18px !important;
  font-weight: 900 !important;
  color: #F97316 !important;
  font-family: monospace !important;
  line-height: 1.1 !important;
}

.pos-product-unit {
  font-size: 11px !important;
  color: var(--text-muted) !important;
  font-weight: 700 !important;
}

.pos-add-btn {
  background: #F97316 !important;
  color: #FFFFFF !important;
  font-weight: 900 !important;
  font-size: 12px !important;
  padding: 7px 14px !important;
  border-radius: 14px !important;
  border: none !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  box-shadow: 0 2px 8px rgba(249, 115, 22, 0.3) !important;
}
.pos-add-btn:hover {
  background: #EA580C !important;
  transform: scale(1.04) !important;
}

/* Number input spinners removal */
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}
input[type=number] {
  -moz-appearance: textfield;
}

/* Bill / Receipt Paper Dimensions for Live Preview */
.paper-preview-container {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 24px;
  background-color: #475569;
  min-height: 520px;
  overflow: auto;
}

.paper-sheet {
  background: #FFFFFF !important;
  color: #000000 !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -6px rgba(0, 0, 0, 0.3);
  margin: 0 auto;
  transition: all 0.2s ease-in-out;
  position: relative;
  box-sizing: border-box;
}

#modal-bill-paper-wrapper {
  max-width: 100%;
}

/* Paper Dimensions */
.paper-A4 { width: 210mm; min-height: 297mm; padding: 12mm; }
.paper-A5 { width: 148mm; min-height: 210mm; padding: 8mm; }
.paper-A6 { width: 105mm; min-height: 148mm; padding: 6mm; font-size: 85%; }
.paper-A7 { width: 74mm; min-height: 105mm; padding: 4mm; font-size: 75%; }
.paper-A8 { width: 52mm; min-height: 74mm; padding: 3mm; font-size: 65%; }
.paper-A9 { width: 37mm; min-height: 52mm; padding: 2mm; font-size: 55%; }
.paper-80mm { width: 80mm; max-width: 80mm; min-height: 120mm; padding: 4mm 3mm; font-size: 11px; box-sizing: border-box; overflow: hidden; }
.paper-58mm { width: 58mm; max-width: 58mm; min-height: 100mm; padding: 3mm 2mm; font-size: 9.5px; box-sizing: border-box; overflow: hidden; }

@media screen and (max-width: 850px) {
  .paper-A4, .paper-A5 {
    width: 100% !important;
    max-width: 100% !important;
    min-height: auto !important;
    padding: 16px !important;
  }
}

/* Print Specific Rules - 100% Strict Single Page Guarantee */
@media print {
  @page {
    size: auto;
    margin: 0mm !important;
  }
  
  html, body {
    margin: 0 !important;
    padding: 0 !important;
    background: #FFFFFF !important;
    color: #000000 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
  }

  body * {
    visibility: hidden;
  }
  
  .print-area, .print-area * {
    visibility: visible;
  }

  .no-print {
    display: none !important;
  }

  .print-area {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    background: #FFFFFF !important;
    color: #000000 !important;
  }

  .print-area .paper-sheet {
    box-shadow: none !important;
    margin: 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    box-sizing: border-box !important;
  }

  /* When single page invoice (<= 10 items or thermal) */
  .print-area .paper-sheet.single-page-sheet {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    page-break-after: avoid !important;
    break-after: avoid !important;
    page-break-before: avoid !important;
    break-before: avoid !important;
    max-height: 270mm !important;
    overflow: hidden !important;
  }

  .paper-A4, .paper-A5, .paper-A6, .paper-A7, .paper-A8, .paper-A9, .paper-80mm, .paper-58mm {
    min-height: 0 !important;
    height: auto !important;
  }

  body.print-size-A4 .paper-A4 {
    padding: 6mm 8mm !important;
  }
  body.print-size-A5 .paper-A5 {
    padding: 4mm 6mm !important;
  }
  body.print-size-A6 .paper-A6 {
    padding: 3mm 4mm !important;
  }
  body.print-size-80mm .paper-80mm {
    padding: 2mm 2mm !important;
  }
  body.print-size-58mm .paper-58mm {
    padding: 2mm 1mm !important;
  }

  body.print-size-A4 { @page { size: A4 portrait; margin: 0mm; } }
  body.print-size-A5 { @page { size: A5 portrait; margin: 0mm; } }
  body.print-size-A6 { @page { size: A6 portrait; margin: 0mm; } }
  body.print-size-A7 { @page { size: 74mm auto; margin: 0mm; } }
  body.print-size-A8 { @page { size: 52mm auto; margin: 0mm; } }
  body.print-size-A9 { @page { size: 37mm auto; margin: 0mm; } }
  body.print-size-80mm { @page { size: 80mm auto; margin: 0mm; } }
  body.print-size-58mm { @page { size: 58mm auto; margin: 0mm; } }
}

/* Shake animation for incorrect password PIN */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-8px); }
  40%, 80% { transform: translateX(8px); }
}

.animate-shake {
  animation: shake 0.4s ease-in-out;
}

/* Navigation Tabs Clean Spacing & Strict No-Wrap */
.nav-tab-btn {
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1.2 !important;
}

.no-scrollbar::-webkit-scrollbar {
  display: none !important;
}
.no-scrollbar {
  -ms-overflow-style: none !important;
  scrollbar-width: none !important;
}

/* ==========================================
   🏷️ Barcode & Product Sticker Label System
   ========================================== */
.barcode-sticker {
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: #FFFFFF !important;
  color: #000000 !important;
  border: 1px dashed #CBD5E1;
  text-align: center;
  overflow: hidden;
  position: relative;
  page-break-inside: avoid !important;
  break-inside: avoid !important;
  font-family: 'Noto Sans Lao', sans-serif !important;
}

/* Screen Preview Styling */
.barcode-preview-board {
  background-color: #334155;
  border-radius: 20px;
  padding: 24px;
  min-height: 480px;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 12px;
  overflow-y: auto;
}

/* Label Dimension Presets */
.barcode-size-40x30 {
  width: 40mm !important;
  height: 30mm !important;
  min-width: 40mm !important;
  min-height: 30mm !important;
  max-width: 40mm !important;
  max-height: 30mm !important;
  padding: 1.5mm 1.5mm !important;
}

.barcode-size-30x20 {
  width: 30mm !important;
  height: 20mm !important;
  min-width: 30mm !important;
  min-height: 20mm !important;
  max-width: 30mm !important;
  max-height: 20mm !important;
  padding: 1mm 1mm !important;
}

.barcode-size-50x30 {
  width: 50mm !important;
  height: 30mm !important;
  min-width: 50mm !important;
  min-height: 30mm !important;
  max-width: 50mm !important;
  max-height: 30mm !important;
  padding: 2mm 2mm !important;
}

.barcode-size-50x25 {
  width: 50mm !important;
  height: 25mm !important;
  min-width: 50mm !important;
  min-height: 25mm !important;
  max-width: 50mm !important;
  max-height: 25mm !important;
  padding: 1.5mm 1.5mm !important;
}

.barcode-size-80x50 {
  width: 80mm !important;
  height: 50mm !important;
  min-width: 80mm !important;
  min-height: 50mm !important;
  max-width: 80mm !important;
  max-height: 50mm !important;
  padding: 3mm 3mm !important;
}

/* A4 Sheet 24 Labels (3 Columns x 8 Rows) */
.barcode-size-a4-24 {
  width: 70mm !important;
  height: 37mm !important;
  min-width: 70mm !important;
  min-height: 37mm !important;
  max-width: 70mm !important;
  max-height: 37mm !important;
  padding: 2mm 2.5mm !important;
}

/* A4 Sheet 40 Labels (4 Columns x 10 Rows) */
.barcode-size-a4-40 {
  width: 52.5mm !important;
  height: 29.7mm !important;
  min-width: 52.5mm !important;
  min-height: 29.7mm !important;
  max-width: 52.5mm !important;
  max-height: 29.7mm !important;
  padding: 1.5mm 2mm !important;
}

/* A4 Sheet Print Container */
.barcode-a4-sheet {
  width: 210mm !important;
  min-height: 297mm !important;
  max-height: 297mm !important;
  background: #FFFFFF !important;
  box-sizing: border-box !important;
  page-break-after: always !important;
  break-after: page !important;
  page-break-inside: avoid !important;
  break-inside: avoid !important;
  margin: 0 auto !important;
}

.barcode-a4-sheet.grid-24 {
  display: grid !important;
  grid-template-columns: repeat(3, 70mm) !important;
  grid-auto-rows: 37mm !important;
  padding: 0mm !important;
}

.barcode-a4-sheet.grid-40 {
  display: grid !important;
  grid-template-columns: repeat(4, 52.5mm) !important;
  grid-auto-rows: 29.7mm !important;
  padding: 0mm !important;
}

/* Print Specific Rules for Barcodes */
@media print {
  body.print-barcode-mode .print-area {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  body.print-barcode-mode .barcode-sticker {
    border: none !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }

  body.print-barcode-roll .barcode-sticker {
    page-break-after: always !important;
    break-after: page !important;
    margin: 0 !important;
  }

  /* Specific Roll Page Sizes */
  body.print-barcode-size-40x30 { @page { size: 40mm 30mm; margin: 0mm; } }
  body.print-barcode-size-30x20 { @page { size: 30mm 20mm; margin: 0mm; } }
  body.print-barcode-size-50x30 { @page { size: 50mm 30mm; margin: 0mm; } }
  body.print-barcode-size-50x25 { @page { size: 50mm 25mm; margin: 0mm; } }
  body.print-barcode-size-80x50 { @page { size: 80mm 50mm; margin: 0mm; } }
  body.print-barcode-size-a4-24 { @page { size: A4 portrait; margin: 0mm; } }
  body.print-barcode-size-a4-40 { @page { size: A4 portrait; margin: 0mm; } }
}