/* LINCR Loop Intake Wizard — Custom Styles */

/* Smooth transitions for all interactive elements */
input, select, textarea, button {
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Checkbox styling */
input[type="checkbox"] {
  accent-color: #0d9488;
  cursor: pointer;
}

/* Condition items — selected state */
.condition-item:has(input:checked) {
  border-color: #0d9488;
  background-color: #f0fdfa;
}

/* Functional capacity and STOP-BANG items — selected state */
label:has(.fc-cb:checked),
label:has(.sb-cb:checked) {
  border-color: #0d9488;
  background-color: #f0fdfa;
}

/* Complication items — selected state */
#complication-list label:has(input:checked) {
  border-color: #0d9488;
  background-color: #f0fdfa;
}

/* NKDA selected state */
label:has(#nkda-checkbox:checked) {
  border-color: #16a34a;
  background-color: #dcfce7;
}

/* Focus-visible for keyboard navigation (WCAG) */
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid #0d9488;
  outline-offset: 2px;
}

/* Progress bar animation */
#progress-bar {
  transition: width 0.4s ease;
}

/* Toast animation */
#toast {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Sticky footer shadow */
footer {
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
}

/* Responsive adjustments */
@media (max-width: 375px) {
  .grid-cols-2 {
    grid-template-columns: 1fr;
  }
}

/* Prevent iOS zoom on input focus */
@media (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="date"],
  select,
  textarea {
    font-size: 16px;
  }
}

/* Smooth scroll behavior */
html {
  scroll-behavior: smooth;
}

/* Screen transition */
#login-screen,
#setup-screen,
#wizard-screen,
#complete-screen {
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Medication/allergy entry animation */
.medication-entry,
.allergy-entry {
  animation: slideIn 0.2s ease;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── LINCR Loop: Completion checkmark animation ──────────────────── */
@keyframes checkCircle {
  from { stroke-dashoffset: 226; }
  to   { stroke-dashoffset: 0; }
}
@keyframes checkPath {
  from { stroke-dashoffset: 50; }
  to   { stroke-dashoffset: 0; }
}
.check-circle-anim {
  animation: checkCircle 0.6s ease-out 0.2s forwards;
}
.check-path-anim {
  animation: checkPath 0.4s ease-out 0.7s forwards;
}

/* ── LINCR Loop: Welcome + Complete screen ───────────────────────── */
#welcome-screen,
#complete-screen {
  animation: fadeIn 0.3s ease;
}

/* ── LINCR Loop: Progress % label ────────────────────────────────── */
#progress-percent {
  font-size: 0.75rem;
  font-weight: 600;
  color: #0d9488;
}