/* Typography Global Enterprise - Inter (Primary Corporate SaaS Font) */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

html, body, button, input, select, textarea {
  font-family: 'Inter', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6, .font-bold, .font-extrabold, .font-semibold {
  font-family: 'Inter', 'Plus Jakarta Sans', sans-serif !important;
  letter-spacing: -0.02em;
}

code, kbd, samp, pre, .font-mono {
  font-family: 'JetBrains Mono', monospace !important;
}

/* Custom Scrollbar Modern */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

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

/* Background dot-pattern minimalis enterprise */
.bg-dot-pattern {
  background-image: radial-gradient(#e2e8f0 1.2px, transparent 1.2px);
  background-size: 20px 20px;
}

/* Animasi Halus & Micro-interactions dengan GPU Hardware Acceleration */
@keyframes modalFadeIn {
  from { opacity: 0; transform: scale(0.97) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
.animate-modal {
  animation: modalFadeIn 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  will-change: transform, opacity;
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in-up {
  animation: fadeInUp 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  will-change: transform, opacity;
  transform: translateZ(0);
}

@keyframes sheetSlideUp {
  from { transform: translateY(100%); opacity: 0.8; }
  to { transform: translateY(0); opacity: 1; }
}
.animate-sheet-up {
  animation: sheetSlideUp 0.28s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  will-change: transform, opacity;
  transform: translateZ(0);
}

@keyframes dropdownFade {
  from { opacity: 0; transform: translateY(-6px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.animate-dropdown {
  animation: dropdownFade 0.18s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  will-change: transform, opacity;
  transform: translateZ(0);
}

/* Pulsing dot indicator for real-time status */
@keyframes pulseDot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.35); opacity: 0.6; }
}
.animate-pulse-dot {
  animation: pulseDot 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes gentleFloat {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-2px); }
}
.animate-gentle-float {
  animation: gentleFloat 3s ease-in-out infinite;
}

/* Glassmorphic Surfaces */
.glass-surface {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.glass-nav-bottom {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
}

/* Tactile press micro-interaction */
.tap-feedback {
  transition: transform 0.16s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.16s ease;
}
.tap-feedback:active {
  transform: scale(0.965);
}

/* Smooth momentum scrolling */
.scroll-touch-smooth {
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

/* Pencegahan Mutlak Horizontal Overflow / Scroll Geser Kiri-Kanan di Mobile */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
  width: 100% !important;
}

#dashboardScreen, #loginScreen {
  overflow-x: hidden !important;
  max-width: 100% !important;
  width: 100% !important;
}

main {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Mobile Touch & Viewport Optimization */
@media (max-width: 640px) {
  input, select, textarea {
    font-size: 16px !important; /* Mencegah iOS Safari auto-zoom */
  }
  .touch-target {
    min-height: 42px;
  }
  /* Ruang aman agar konten paling bawah tidak tertutup Mobile Bottom Bar */
  #dashboardScreen {
    padding-bottom: 7.5rem !important;
  }

  /* OPTIMASI LELANG GPU: Matikan backdrop-blur berat khusus di layar HP */
  .backdrop-blur-sm,
  .backdrop-blur-md,
  .backdrop-blur-lg,
  .backdrop-blur-xl,
  .backdrop-blur,
  .glass-surface,
  .glass-nav-bottom {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Set background overlay solid/transparan yang tajam & ringan */
  .bg-slate-950\/60,
  .bg-slate-900\/60,
  .bg-slate-950\/50,
  .bg-black\/50 {
    background-color: rgba(15, 23, 42, 0.85) !important;
  }

  .glass-surface,
  .glass-nav-bottom {
    background-color: rgba(255, 255, 255, 0.98) !important;
  }

  /* Optimasi momentum scroll & overscroll modal di HP */
  .overflow-y-auto {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
}

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

/* Print styling resmi SMK PGRI 1 Ngawi */
@media print {
  @page {
    size: A4 landscape;
    margin: 6mm 6mm;
  }
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    box-sizing: border-box !important;
  }
  body {
    background: white !important;
    color: black !important;
    font-size: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
  }
  html, #dashboardScreen, main, #tableCard, .overflow-hidden, .overflow-x-auto, .overflow-y-auto {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
  }
  .print-only {
    display: block !important;
  }
  span.print-only {
    display: inline !important;
  }
  header, #loginScreen, #statsRow, #filterToolbar, #paginationContainer, #migrationBanner, #toastContainer, #mobileSearchBox, #mobileFab, #mobileBottomNav, #mobileMenuSheet, .no-print, button, input[type="text"] {
    display: none !important;
  }
  main {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  #tableCard {
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    width: 100% !important;
    overflow: visible !important;
    border-radius: 0 !important;
  }
  #mobileCardList {
    display: none !important;
  }
  .hidden.sm\:block {
    display: block !important;
    overflow: visible !important;
    width: 100% !important;
  }
  #printHeader {
    display: block !important;
    margin-bottom: 10px !important;
  }
  #printFooter {
    display: block !important;
    page-break-inside: avoid !important;
    margin-top: 14px !important;
  }
  table {
    width: 100% !important;
    max-width: 100% !important;
    border-collapse: collapse !important;
    font-size: 8px !important;
    table-layout: fixed !important;
    box-sizing: border-box !important;
  }
  th, td {
    border: 1px solid #475569 !important;
    padding: 4px 3px !important;
    color: black !important;
    vertical-align: middle !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  /* Proporsi tepat 100% untuk 9 kolom cetak resmi (termasuk Teknisi & Aksi) */
  th:nth-child(1), td:nth-child(1) { width: 7% !important; min-width: 0 !important; white-space: nowrap !important; }
  th:nth-child(2), td:nth-child(2) { 
    width: 11% !important; 
    min-width: 0 !important; 
    white-space: normal !important; 
    word-break: break-word !important; 
    overflow-wrap: break-word !important; 
  }
  td:nth-child(2) div {
    overflow: visible !important;
  }
  td:nth-child(2) span {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: break-word !important;
    font-size: 8px !important;
    line-height: 1.25 !important;
  }
  th:nth-child(3), td:nth-child(3) { width: 10% !important; min-width: 0 !important; text-align: center !important; }
  th:nth-child(4), td:nth-child(4) { width: 10.5% !important; min-width: 0 !important; text-align: center !important; }
  th:nth-child(5), td:nth-child(5) { width: 27.5% !important; min-width: 0 !important; }
  th:nth-child(6), td:nth-child(6) { width: 13.5% !important; min-width: 0 !important; }
  th:nth-child(7), td:nth-child(7) { width: 6.5% !important; min-width: 0 !important; text-align: center !important; }
  th:nth-child(8), td:nth-child(8) { width: 7% !important; min-width: 0 !important; text-align: center !important; }
  th:nth-child(9), td:nth-child(9) { width: 7% !important; min-width: 0 !important; text-align: center !important; }
  /* Styling badge kategori saat print agar pas rapi di dalam batas sel */
  td:nth-child(3) span {
    font-size: 7.5px !important;
    padding: 2px 4px !important;
    display: inline-block !important;
    max-width: 100% !important;
    white-space: normal !important;
    line-height: 1.2 !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }
  .print-url {
    color: #1d4ed8 !important;
    text-decoration: underline !important;
    white-space: nowrap !important;
  }

  /* Mode Khusus Cetak Stiker Label QR & Barcode (Thermal Label / Mini Card) */
  body.printing-label * {
    visibility: hidden !important;
  }
  body.printing-label #printableThermalLabel,
  body.printing-label #printableThermalLabel * {
    visibility: visible !important;
  }
  body.printing-label #printableThermalLabel {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    width: 76mm !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 2.5mm !important;
    display: block !important;
    border: 1.5px solid #000 !important;
    border-radius: 4px !important;
    background: #fff !important;
    color: #000 !important;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  body.printing-label #printableThermalLabel * {
    color: #000 !important;
    border-color: #000 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  body.printing-label #labelQrContainer {
    background: #ffffff !important;
    padding: 3px !important;
    box-sizing: border-box !important;
  }
  body.printing-label #labelQrContainer img,
  body.printing-label #labelQrContainer canvas {
    width: 78px !important;
    height: 78px !important;
    image-rendering: -webkit-optimize-contrast !important;
    image-rendering: crisp-edges !important;
    image-rendering: pixelated !important;
    display: block !important;
    margin: 0 auto !important;
  }
  body.printing-label #labelBarcodeSvg {
    shape-rendering: crispEdges !important;
    image-rendering: -webkit-optimize-contrast !important;
    image-rendering: crisp-edges !important;
  }
  body.printing-label #printableThermalLabel.label-mini {
    width: 56mm !important;
    max-width: 58mm !important;
    padding: 1.5mm !important;
    font-size: 6.5px !important;
    line-height: 1.15 !important;
    border-width: 1px !important;
  }
  body.printing-label #printableThermalLabel.label-mini #labelBarcodeSvg {
    height: 20px !important;
    max-height: 20px !important;
  }
  body.printing-label #printableThermalLabel.label-mini #labelQrContainer {
    width: 56px !important;
    height: 56px !important;
  }
  body.printing-label #printableThermalLabel.label-mini #labelQrContainer img,
  body.printing-label #printableThermalLabel.label-mini #labelQrContainer canvas {
    width: 54px !important;
    height: 54px !important;
    max-width: 54px !important;
    max-height: 54px !important;
  }
  body.printing-label .no-print,
  body.printing-label #labelPrintModal > div > div:not(.bg-slate-100\/70):not(#printableThermalLabel) {
    display: none !important;
  }
}

/* Anti-blur & Resolusi Tajam untuk Barcode & QR Code Tiket (Layar & Download) */
#labelQrContainer {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff !important;
  padding: 4px !important;
  border-radius: 4px !important;
  box-sizing: border-box !important;
}
#labelQrContainer img,
#labelQrContainer canvas {
  width: 78px !important;
  height: 78px !important;
  max-width: 78px !important;
  max-height: 78px !important;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  display: block;
}

#labelBarcodeSvg {
  width: 100%;
  shape-rendering: crispEdges;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

/* ================= PREVIEW STIKER KECIL / RINGKAS (.label-mini 58mm) ================= */
#printableThermalLabel.label-mini {
  max-width: 275px;
  padding: 8px 9px;
  border-width: 1.5px;
}
#printableThermalLabel.label-mini .label-kop-title {
  font-size: 10px !important;
}
#printableThermalLabel.label-mini .label-kop-sub {
  font-size: 6.5px !important;
}
#printableThermalLabel.label-mini #labelBarcodeSection {
  padding: 3px 5px !important;
}
#printableThermalLabel.label-mini #labelBarcodeSvg {
  height: 24px !important;
  max-width: 215px !important;
}
#printableThermalLabel.label-mini #labelTicketId {
  font-size: 8.5px !important;
}
#printableThermalLabel.label-mini #labelStatusBadge {
  font-size: 6px !important;
  padding: 1px 3px !important;
}
#printableThermalLabel.label-mini .label-unit-title {
  font-size: 9.5px !important;
}
#printableThermalLabel.label-mini .label-subtext {
  font-size: 6.2px !important;
}
#printableThermalLabel.label-mini .label-valtext {
  font-size: 7.5px !important;
}
#printableThermalLabel.label-mini #labelQrContainer {
  width: 62px !important;
  height: 62px !important;
}
#printableThermalLabel.label-mini #labelQrContainer img,
#printableThermalLabel.label-mini #labelQrContainer canvas {
  width: 60px !important;
  height: 60px !important;
  max-width: 60px !important;
  max-height: 60px !important;
}
#printableThermalLabel.label-mini .label-qr-caption {
  font-size: 5.8px !important;
}
#printableThermalLabel.label-mini #labelKendalaSolusiBox {
  padding: 3px 5px !important;
  font-size: 7px !important;
  line-height: 1.2 !important;
}
#printableThermalLabel.label-mini #labelKendalaSolusiBox .label-ks-label {
  width: 40px !important;
  font-size: 6.2px !important;
}
#printableThermalLabel.label-mini #labelSpecBox {
  padding: 3px 5px !important;
}
#printableThermalLabel.label-mini #labelSpecBox .label-spec-title {
  font-size: 6.5px !important;
}
#printableThermalLabel.label-mini #labelSpecBadge {
  font-size: 6px !important;
  padding: 1px 3px !important;
}
#printableThermalLabel.label-mini #labelSpecItems {
  font-size: 7px !important;
  line-height: 1.2 !important;
}
#printableThermalLabel.label-mini #labelSpecItems .label-spec-lbl {
  width: 32px !important;
  font-size: 6.2px !important;
}
#printableThermalLabel.label-mini .label-meta-row {
  font-size: 6.5px !important;
  padding-top: 2px !important;
}
#printableThermalLabel.label-mini .label-footer-text {
  font-size: 5.8px !important;
  padding-top: 2px !important;
}

/* Sembunyikan Tombol Buat Tiket, Jadwal Servis Rutin, dan Refresh di Top Header Khusus Layar Mobile (<640px) */
@media (max-width: 639px) {
  #btnTopBuatTiket,
  #btnMaintenanceReminder,
  #btnMobileRefresh {
    display: none !important;
  }
}


@media (max-width: 639px) {
  #desktopAdminButtonsContainer,
  #btnScanQrDesktop,
  #btnTopBuatTiket,
  #btnTableTambahManual,
  #btnBackupRestore,
  #btnKelolaUser,
  #btnGoogleCloudSync,
  #btnMaintenanceReminder,
  #btnKotakSampah,
  #btnMobileRefresh,
  #mobileAdminMenuContainer,
  #btnMobileAdminMenuToggle {
    display: none !important;
  }
}

/* Penyelarasan Presisi Status Badge dan Spec Badge Tiket Stiker */
#labelStatusBadge {
  display: inline-block !important;
  height: 20px !important;
  line-height: 20px !important;
  padding: 0 8px !important;
  vertical-align: middle !important;
  text-align: center !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

#labelSpecBadge {
  display: inline-block !important;
  height: 18px !important;
  line-height: 18px !important;
  padding: 0 8px !important;
  vertical-align: middle !important;
  text-align: center !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}