/* BWJ Time Tracker — Custom Styles (Light Mode / iOS Design Language) */

/* Base */
* {
  -webkit-tap-highlight-color: transparent;
}

html {
  scroll-behavior: smooth;
}

body {
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
}

/* Screen transitions */
.screen {
  animation: fadeIn 200ms ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Timer display pulse when running */
.timer-running {
  animation: timerPulse 2s ease-in-out infinite;
}

@keyframes timerPulse {
  0%, 100% { color: #1C1C1E; }
  50% { color: #CC6E2F; }
}

/* Loading spinner */
.loading-spinner {
  animation: spin 800ms linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Toast animations */
.toast-enter {
  animation: toastIn 300ms ease-out;
}

.toast-exit {
  animation: toastOut 300ms ease-in forwards;
}

@keyframes toastIn {
  from { opacity: 0; transform: translateY(-16px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes toastOut {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(-16px) scale(0.95); }
}

/* Toast pointer events */
#toast-container > * {
  pointer-events: auto;
}

/* QR Scanner viewfinder styling */
#qr-reader video {
  border-radius: 12px;
}

#qr-reader__scan_region {
  background: transparent !important;
}

#qr-reader__dashboard {
  display: none !important;
}

/* Input datetime-local styling */
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #C6C6C8;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #8E8E93;
}

/* Safe area insets for notched phones */
@supports (padding-top: env(safe-area-inset-top)) {
  body {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }

  nav.fixed.bottom-0 {
    padding-bottom: calc(0.5rem + env(safe-area-inset-bottom));
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .screen {
    animation: none;
  }

  .timer-running {
    animation: none;
    color: #CC6E2F;
  }

  .toast-enter,
  .toast-exit {
    animation: none;
  }

  .loading-spinner {
    animation: spin 1.5s linear infinite;
  }
}

/* Task button minimum touch target */
.task-btn {
  min-height: 44px;
  min-width: 44px;
}

/* Photo preview scroll */
#photo-previews {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
#photo-previews::-webkit-scrollbar {
  display: none;
}