/* ============================================
   Minimal Stylesheet — Pengumuman Kelulusan
   SMK Negeri 1 Wadaslintang
   ============================================ */

/* --- Smooth transitions --- */
* {
  transition-property: color, background-color, border-color, opacity;
  transition-duration: 0.15s;
  transition-timing-function: ease;
}

/* --- Checkmark Animation (Hasil Kelulusan) --- */
.checkmark-container {
  width: 100%;
  max-width: 250px;
  height: 250px;
}

.checkmark {
  width: 100%;
  height: 100%;
  stroke: #16a34a;
  stroke-width: 3;
  stroke-miterlimit: 10;
  fill: none;
  animation: scaleIn 0.3s ease-in-out forwards;
}

.checkmark-circle {
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  animation: strokeCircle 0.6s ease-out forwards;
}

.checkmark-check {
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: strokeCheck 0.4s 0.6s ease-out forwards;
}

@keyframes strokeCircle {
  to { stroke-dashoffset: 0; }
}

@keyframes strokeCheck {
  to { stroke-dashoffset: 0; }
}

@keyframes scaleIn {
  0% { transform: scale(0.8); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* --- Toast animation --- */
@keyframes toastIn {
  from { opacity: 0; transform: translateX(1rem); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes toastOut {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(1rem); }
}

.toast-enter {
  animation: toastIn 0.3s ease-out forwards;
}

.toast-exit {
  animation: toastOut 0.3s ease-in forwards;
}

/* --- Tom Select overrides for Tailwind --- */
.ts-wrapper .ts-control {
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  background: #fff;
  box-shadow: none;
}

.ts-wrapper .ts-control:focus,
.ts-wrapper.focus .ts-control {
  border-color: #16a34a;
  box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.15);
}

.ts-dropdown .option:hover,
.ts-dropdown .option.active {
  background-color: #16a34a;
  color: white;
}

/* --- Himbauan Alert Modal --- */
@keyframes togglePulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(245, 158, 11, 0.15); }
  50% { box-shadow: 0 4px 25px rgba(245, 158, 11, 0.35); }
}

.himbauan-toggle-pulse {
  animation: togglePulse 3s ease-in-out infinite;
}

.himbauan-modal {
  transition: opacity 0.25s ease, transform 0.25s ease;
}