/**
 * JaliscoAsisteWeb - Custom Styles & Micro-Animations
 */

/* Smooth theme transition */
html, body, header, nav, main, section, footer, div, card, input, select, textarea {
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.2s ease, box-shadow 0.25s ease;
}

/* Glassmorphism Header */
.glass-header {
  background-color: var(--header-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--color-canvas);
}
::-webkit-scrollbar-thumb {
  background: var(--color-border-strong);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-brand-orange);
}

/* Pulse animation for live telemetry */
@keyframes telemetryPulse {
  0% { transform: scale(0.95); opacity: 0.8; }
  50% { transform: scale(1.15); opacity: 1; filter: drop-shadow(0 0 6px rgba(16, 185, 129, 0.8)); }
  100% { transform: scale(0.95); opacity: 0.8; }
}

.animate-telemetry {
  animation: telemetryPulse 2s infinite ease-in-out;
}

/* Interactive Roster Badge States */
.badge-status {
  cursor: pointer;
  user-select: none;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.badge-status:active {
  transform: scale(0.92);
}

.badge-present {
  background-color: var(--color-status-success-bg);
  color: var(--color-status-success);
  border: 1px solid var(--color-status-success-border);
}
.badge-late {
  background-color: var(--color-status-warning-bg);
  color: var(--color-status-warning);
  border: 1px solid var(--color-status-warning-border);
}
.badge-absent {
  background-color: var(--color-status-danger-bg);
  color: var(--color-status-danger);
  border: 1px solid var(--color-status-danger-border);
}

/* Tabular figures for telemetry numbers */
.font-tabular {
  font-variant-numeric: tabular-nums;
}

/* Toast Container */
#toast-container {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  min-width: 280px;
  max-width: 420px;
  padding: 1rem 1.25rem;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-strong);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  animation: toastSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes toastSlideUp {
  from { transform: translateY(100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* Mobile Drawer Overlay */
#mobile-drawer {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
#mobile-drawer.open {
  transform: translateX(0);
}

/* Focus Ring */
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--color-brand-orange) !important;
  box-shadow: 0 0 0 3px var(--color-brand-orange-glow) !important;
}