/* Esaal Custom Styles */
*, *::before, *::after { box-sizing: border-box; }

html, body, #app { height: 100%; margin: 0; }

/* Smooth transitions */
a, button { cursor: pointer; }

/* Spinner animation */
@keyframes spin { to { transform: rotate(360deg); } }
.animate-spin { animation: spin 0.8s linear infinite; }

/* Fade in */
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.fade-in { animation: fadeIn 0.25s ease-out forwards; }

/* Sidebar nav active state */
.nav-item-active { background-color: #eff6ff; color: #1d4ed8; }
.nav-item { transition: background 0.15s, color 0.15s; }
.nav-item:hover { background-color: #f9fafb; color: #111827; }

/* Table hover */
tbody tr { transition: background 0.1s; }

/* Focus ring */
input:focus, select:focus, textarea:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
  border-color: #3b82f6 !important;
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #e5e7eb; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #d1d5db; }

/* Modal backdrop blur */
.modal-backdrop { backdrop-filter: blur(4px); }

/* Progress bars */
.progress-bar { transition: width 0.6s ease-out; }

/* Number input arrows */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { opacity: 0.5; }

/* OTP input style */
.otp-input { letter-spacing: 0.5em; font-size: 1.5rem; text-align: center; }

/* Notification badge */
.notif-badge {
  position: absolute; top: -4px; right: -4px;
  min-width: 18px; height: 18px;
  background: #ef4444; color: white;
  border-radius: 9px; font-size: 11px;
  font-weight: 700; display: flex;
  align-items: center; justify-content: center;
  padding: 0 4px;
}

/* Print */
@media print { aside { display: none; } main { margin: 0; } }