/* Custom Theme & Animations for E-Voting OSIS & MPK */
:root {
  --primary: #15D8B3;
  --primary-dark: #0eb897;
  --primary-light: #e6fbf7;
  --slate-dark: #0f172a;
}

html, body {
  overflow-x: hidden;
  max-width: 100%;
}

@keyframes pulse-slow {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.05); opacity: 0.85; }
}

.animate-pulse-slow {
  animation: pulse-slow 3s infinite ease-in-out;
}

@keyframes scanner-laser {
  0% { top: 0%; opacity: 0.8; }
  50% { top: 96%; opacity: 1; }
  100% { top: 0%; opacity: 0.8; }
}

.scanner-line {
  position: absolute;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, transparent, #15D8B3, #ffffff, #15D8B3, transparent);
  box-shadow: 0 0 15px #15D8B3, 0 0 5px #ffffff;
  animation: scanner-laser 2.2s infinite ease-in-out;
}

/* Glassmorphism effects */
.glass-panel {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.glass-dark {
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Base styles for QR Code boxes */
.qrcode-box {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  overflow: hidden !important;
  background: #ffffff !important;
}

/* Strictly hide internal QRCode.js canvas to prevent duplicate/stacked rendering */
.qrcode-box canvas,
.voter-card canvas {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  position: absolute !important;
  pointer-events: none !important;
}

.qrcode-box img {
  display: block !important;
  margin: 0 auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}

/* Print Styles for QR Cards & Official Reports */
@page {
  size: A4 portrait;
  margin: 6mm 6mm 6mm 6mm;
}

@media print {
  html, body {
    background: #ffffff !important;
    color: #000000 !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    display: block !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  .no-print,
  aside,
  header,
  #admin-sidebar,
  #sidebar-backdrop,
  #global-floating-toast,
  .alert-auto-dismiss {
    display: none !important;
  }

  body,
  main,
  #app,
  .print-page,
  .overflow-y-auto,
  .overflow-x-auto {
    overflow: visible !important;
  }

  main {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
  }

  .print-page {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
  }

  .print-sheet {
    width: 100% !important;
    max-width: 196mm !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    page-break-after: always !important;
    break-after: page !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    display: block !important;
  }

  .print-sheet:last-of-type {
    page-break-after: auto !important;
    break-after: auto !important;
  }

  /* 8 Cards per Sheet Grid (Standard Compact 2x4 - 1 Lembar Berisi 8 Kartu) */
  .cards-grid-8 {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    grid-template-rows: repeat(4, 66mm) !important;
    gap: 2.5mm 3.5mm !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 6 Cards per Sheet Grid (Standard 2x3) */
  .cards-grid-6 {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    grid-template-rows: repeat(3, 85mm) !important;
    gap: 5mm !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 4 Cards per Sheet Grid (Large 2x2) */
  .cards-grid-4 {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    grid-template-rows: repeat(2, 128mm) !important;
    gap: 8mm !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .voter-card {
    box-sizing: border-box !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    border: 1.2px dashed #64748b !important;
    background: #ffffff !important;
    box-shadow: none !important;
    border-radius: 8px !important;
    margin: 0 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
  }

  .cards-grid-8 .voter-card {
    height: 66mm !important;
    max-height: 66mm !important;
    padding: 2.2mm 3.2mm !important;
  }

  .cards-grid-6 .voter-card {
    height: 85mm !important;
    max-height: 85mm !important;
    padding: 3.5mm 4mm !important;
  }

  .cards-grid-4 .voter-card {
    height: 128mm !important;
    max-height: 128mm !important;
    padding: 5mm 5mm !important;
  }

  /* Tighter, proportional print layout inside voter card */
  .cards-grid-8 .card-header {
    padding-bottom: 1.2mm !important;
    border-bottom: 1px solid #e2e8f0 !important;
  }

  .cards-grid-8 .card-logo {
    width: 8.5mm !important;
    height: 8.5mm !important;
    min-width: 8.5mm !important;
    min-height: 8.5mm !important;
    padding: 0.4mm !important;
    border-radius: 4px !important;
  }

  /* Card Body: Voter Details on Left, QR Code on Right (Samping) */
  .card-body {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 3mm !important;
    width: 100% !important;
    flex: 1 1 auto !important;
    box-sizing: border-box !important;
  }

  .cards-grid-8 .card-body {
    padding-top: 1mm !important;
    padding-bottom: 1mm !important;
    gap: 2.5mm !important;
  }

  .card-details {
    display: block !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  .card-qr {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    margin-left: auto !important;
  }

  .card-footer {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .cards-grid-8 .card-footer {
    padding-top: 1mm !important;
    border-top: 1px solid #e2e8f0 !important;
    font-size: 6.5pt !important;
    line-height: 1.1 !important;
  }

  /* Canvas is strictly hidden in print so only the clean generated img is printed */
  .qrcode-box canvas,
  .voter-card canvas {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    position: absolute !important;
    pointer-events: none !important;
  }

  /* Fixed print container for QR Code */
  .qrcode-box {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    box-sizing: border-box !important;
  }

  .cards-grid-8 .qrcode-box {
    width: 27mm !important;
    height: 27mm !important;
    min-width: 27mm !important;
    min-height: 27mm !important;
    max-width: 27mm !important;
    max-height: 27mm !important;
    padding: 0.8mm !important;
  }

  .cards-grid-6 .qrcode-box {
    width: 32mm !important;
    height: 32mm !important;
    min-width: 32mm !important;
    min-height: 32mm !important;
    max-width: 32mm !important;
    max-height: 32mm !important;
    padding: 1.2mm !important;
  }

  .cards-grid-4 .qrcode-box {
    width: 42mm !important;
    height: 42mm !important;
    min-width: 42mm !important;
    min-height: 42mm !important;
    max-width: 42mm !important;
    max-height: 42mm !important;
    padding: 1.5mm !important;
  }

  /* Single high-contrast QR image */
  .qrcode-box img {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    image-rendering: -webkit-optimize-contrast !important;
    image-rendering: crisp-edges !important;
    image-rendering: pixelated !important;
    display: block !important;
    margin: 0 auto !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
  }

  /* School logo in voter card */
  .voter-card img:not(.qrcode-box img) {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    display: block !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
  }
}

/* ========================================================
   Kiosk Fullscreen Bilik Suara Styles
   ======================================================== */
.kiosk-topbar {
  display: none;
}

body.kiosk-mode-active header.sticky,
body.kiosk-mode-active footer {
  display: none !important;
}

body.kiosk-mode-active {
  background-color: #090e17 !important;
  color: #f8fafc !important;
}

body.kiosk-mode-active .kiosk-topbar {
  display: flex !important;
}

/* Hide the fullscreen activate button when kiosk mode is ALREADY active */
body.kiosk-mode-active #fullscreen-toggle-wrapper {
  display: none !important;
}

/* High-contrast readable typography in Kiosk mode */
body.kiosk-mode-active #scan-page-title,
body.kiosk-mode-active .kiosk-title,
body.kiosk-mode-active h1,
body.kiosk-mode-active h2,
body.kiosk-mode-active h3 {
  color: #ffffff !important;
}

body.kiosk-mode-active #scan-page-desc,
body.kiosk-mode-active .kiosk-desc {
  color: #94a3b8 !important;
}

body.kiosk-mode-active #scanner-status-label {
  color: #e2e8f0 !important;
}

body.kiosk-mode-active .kiosk-card {
  background-color: #0f172a !important;
  border-color: #1e293b !important;
  color: #f8fafc !important;
  box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.7) !important;
}

body.kiosk-mode-active .kiosk-text-muted {
  color: #94a3b8 !important;
}

body.kiosk-mode-active .kiosk-input {
  background-color: #1e293b !important;
  border-color: #334155 !important;
  color: #ffffff !important;
}

body.kiosk-mode-active .kiosk-input::placeholder {
  color: #64748b !important;
}

/* Toggle Camera Button in Kiosk Mode */
body.kiosk-mode-active #toggle-camera-btn,
body.kiosk-mode-active .btn-camera-hp {
  background-color: #1e293b !important;
  color: #15D8B3 !important;
  border-color: #334155 !important;
}

/* Vibrant primary verify button in dark kiosk mode */
body.kiosk-mode-active .btn-verify {
  background: linear-gradient(135deg, #15D8B3 0%, #0ca88c 100%) !important;
  color: #042f27 !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 15px 0 rgba(21, 216, 179, 0.35) !important;
}
body.kiosk-mode-active .btn-verify svg {
  color: #042f27 !important;
}

/* ========================================================
   HTML5 QR Code Scanner Responsive Camera Fit
   ======================================================== */
#reader {
  width: 100% !important;
  height: 100% !important;
  position: relative !important;
  overflow: hidden !important;
  border: none !important;
  background-color: #020617 !important;
  border-radius: 1rem !important;
}

#reader__scan_region {
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  position: relative !important;
}

#reader video {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
  border-radius: 1rem !important;
  display: block !important;
}

#reader canvas {
  display: none !important;
}

#reader__dashboard_section,
#reader__dashboard_section_swaplink,
#reader__header_message {
  display: none !important;
}

#qr-shaded-region {
  border-color: rgba(21, 216, 179, 0.4) !important;
}