/* Custom CSS for Uji Kadar Air - SMK Negeri 1 Mundu XI APHPi */

@keyframes vaporFloat {
  0% {
    transform: translateY(0px) scale(0.8);
    opacity: 0.8;
  }
  50% {
    transform: translateY(-8px) scale(1.1);
    opacity: 0.5;
  }
  100% {
    transform: translateY(-16px) scale(1.4);
    opacity: 0;
  }
}

.animate-vapor {
  animation: vaporFloat 2s ease-in-out infinite;
}

/* Tab & Navigation styles */
.nav-tab-btn {
  border-bottom: 2px solid transparent;
}

.nav-tab-btn.active-tab {
  background-color: rgba(6, 182, 212, 0.2);
  color: #38bdf8;
  border-bottom: 2px solid #38bdf8;
}

.subtab-btn.active-subtab {
  background-color: #0284c7;
  color: #ffffff;
  box-shadow: 0 2px 4px rgba(2, 132, 199, 0.3);
}

/* APD Button active state */
.apd-btn.apd-active {
  border-color: #06b6d4 !important;
  background-color: rgba(6, 182, 212, 0.15) !important;
}

.apd-btn.apd-active span {
  color: #38bdf8;
}

/* Quiz Option Card Styling */
.quiz-opt-btn {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.quiz-opt-btn:hover {
  border-color: #0284c7;
  background-color: #f0f9ff;
}

.quiz-opt-btn.selected {
  border-color: #0284c7;
  background-color: #e0f2fe;
  font-weight: 600;
}

.quiz-opt-btn.correct-reveal {
  border-color: #10b981 !important;
  background-color: #ecfdf5 !important;
  color: #065f46 !important;
}

.quiz-opt-btn.wrong-reveal {
  border-color: #ef4444 !important;
  background-color: #fef2f2 !important;
  color: #991b1b !important;
}

/* Digital Seven-segment / Monospace look */
.font-mono-lcd {
  font-family: 'Courier New', Courier, monospace;
  letter-spacing: 0.08em;
}

/* Print Styles for Certificate & Report */
@media print {
  body {
    background-color: white !important;
    color: black !important;
    font-size: 12pt;
  }

  header, footer, nav, #main-nav-tabs, #mobile-menu, 
  .page-section:not(#page-hasil), 
  #page-hasil > div:first-child,
  #page-hasil > .grid,
  button {
    display: none !important;
  }

  #page-hasil {
    display: block !important;
  }

  #printable-certificate {
    border: 2px solid #000 !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 24px !important;
    width: 100% !important;
    max-width: 100% !important;
    page-break-inside: avoid;
  }

  #printable-certificate * {
    color: black !important;
  }

  table {
    border-collapse: collapse !important;
  }

  th, td {
    border: 1px solid #333 !important;
  }
}