/* Main Styles & Print 58mm Thermal Styles */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;600;700&display=swap');

:root {
  --primary: #2563eb;
  --primary-hover: #1d4ed8;
  --secondary: #0f172a;
}

body {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-tap-highlight-color: transparent;
}

.font-mono-receipt {
  font-family: 'JetBrains Mono', 'Courier New', Courier, monospace;
}

/* Touch Action for Pattern Lock Canvas */
#patternCanvas {
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

/* Custom scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Badge pulse animation for status */
.pulse-dot {
  position: relative;
}
.pulse-dot::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  border-radius: 50%;
  animation: pulse 2s infinite;
  opacity: 0.6;
}
@keyframes pulse {
  0% { transform: scale(1); opacity: 0.8; }
  70% { transform: scale(2.2); opacity: 0; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* ========================================================
   58mm THERMAL RECEIPT STYLES
   Standar kertas 58mm (lebar cetak riil printer thermal ~48mm-54mm)
   ======================================================== */
.thermal-receipt-preview {
  width: 58mm;
  min-height: 100mm;
  margin: 0 auto;
  background: #ffffff;
  color: #000000;
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 11px;
  line-height: 1.25;
  padding: 8px 6px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.12);
  border-radius: 4px;
}

.thermal-receipt-preview .receipt-divider {
  border-top: 1px dashed #000000;
  margin: 6px 0;
}

.thermal-receipt-preview .receipt-double-divider {
  border-top: 2px dashed #000000;
  margin: 6px 0;
}

/* Hide print area in normal view */
#printOnlyArea {
  display: none;
}

/* PRINT MEDIA QUERY FOR 58mm THERMAL PRINTER */
@media print {
  @page {
    size: 58mm auto;
    margin: 0mm;
  }
  
  html, body {
    margin: 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
    color: #000000 !important;
    font-size: 10px !important;
    line-height: 1.18 !important;
    width: 58mm !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Hide everything except the print receipt */
  body * {
    visibility: hidden;
  }

  #printOnlyArea, #printOnlyArea * {
    visibility: visible;
  }

  #printOnlyArea {
    display: block !important;
    position: absolute;
    left: 0;
    top: 0;
    width: 58mm !important;
    padding: 1mm 2mm 2mm 2mm !important;
    box-sizing: border-box !important;
    background: #ffffff !important;
    color: #000000 !important;
  }

  /* Force pure black & sharp lines for thermal heads */
  .receipt-divider {
    border-top: 1px dashed #000000 !important;
    margin: 2px 0 !important;
  }
  
  .receipt-double-divider {
    border-top: 2px dashed #000000 !important;
    margin: 3px 0 !important;
  }
  
  img, canvas {
    filter: grayscale(100%) contrast(150%);
  }
}

/* ========================================================
   THERMAL RECEIPT PREVIEW & CUSTOMIZER STYLES
   ======================================================== */
.receipt-paper-roll {
  background: #ffffff;
  color: #000000;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.12), 0 8px 10px -6px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.05);
  border-radius: 4px;
  position: relative;
  transition: all 0.25s ease;
}

.receipt-paper-roll::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 0;
  right: 0;
  height: 6px;
  background: radial-gradient(circle, transparent, transparent 50%, #ffffff 50%, #ffffff 100%);
  background-size: 10px 10px;
}

.receipt-paper-roll::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 0;
  right: 0;
  height: 6px;
  background: radial-gradient(circle, #ffffff, #ffffff 50%, transparent 50%, transparent 100%);
  background-size: 10px 10px;
}

.receipt-theme-classic {
  font-family: 'Courier New', Courier, monospace !important;
}

.receipt-theme-modern {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
}

.receipt-theme-compact {
  font-family: 'Courier New', Courier, monospace !important;
  line-height: 1.12 !important;
}

.receipt-theme-elegant {
  font-family: system-ui, -apple-system, sans-serif !important;
}

/* ========================================================
   SIDEBAR COLLAPSE & NAVBAR TITLE DYNAMIC VISIBILITY
   ======================================================== */
@media (min-width: 1024px) {
  body.sidebar-collapsed #servisSidebar,
  html.sidebar-collapsed #servisSidebar {
    display: none !important;
  }
  /* Ketika sidebar ditampilkan (normal): judul web di navbar HILANG */
  #navBrandGroup {
    display: none !important;
  }
  /* Ketika sidebar diminimize/collapsed: judul web di navbar TAMPIL */
  body.sidebar-collapsed #navBrandGroup,
  html.sidebar-collapsed #navBrandGroup {
    display: flex !important;
  }
}

@media (max-width: 1023px) {
  /* Di Mobile: judul web di navbar selalu TAMPIL */
  #navBrandGroup {
    display: flex !important;
  }
}