/* PharmaTrack Custom Design System */

:root {
  --color-primary: #1463A5;
  --color-success: #178A4B;
  --color-cap-event: #0F8B8D;
  --color-unconfirmed: #B77900;
  --color-unrecorded: #5B6573;
  --color-warning: #C65D00;
  --color-danger: #B42318;
  --color-bg: #F7F9FC;
  --color-text: #14213D;
}

body {
  font-family: 'IBM Plex Sans Arabic', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background-color: var(--color-bg);
  color: var(--color-text);
  -webkit-tap-highlight-color: transparent;
}

/* Large Font / Elderly Accessibility Mode */
body.large-text-mode {
  font-size: 19px;
}
body.large-text-mode h1 { font-size: 1.6rem; }
body.large-text-mode h2 { font-size: 1.5rem; }
body.large-text-mode h3 { font-size: 1.25rem; }
body.large-text-mode p, body.large-text-mode span, body.large-text-mode button {
  font-size: 1.05rem !important;
}

/* Tab Switching Active State */
.nav-item.active {
  color: var(--color-primary);
}
.nav-item.active svg {
  transform: scale(1.1);
  stroke-width: 2.4;
}

/* Role Pills */
.role-badge.active {
  background-color: var(--color-primary);
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(20, 99, 165, 0.25);
}

/* Micro animations */
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-slide-up {
  animation: slideUp 0.25s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Hide scrollbars nicely */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Role Choice Cards in Onboarding */
.role-choice-card {
  transition: all 0.2s ease-out;
}
.role-choice-card:hover {
  transform: translateY(-2px);
}
.role-choice-card.active {
  box-shadow: 0 4px 12px rgba(20, 99, 165, 0.12);
}

/* OTP 6-box input styling */
.otp-box {
  transition: all 0.15s ease-in-out;
}
.otp-box:focus {
  transform: scale(1.05);
  box-shadow: 0 0 0 3px rgba(20, 99, 165, 0.15);
}

/* Step indicators */
.step-dot {
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Status Badges */
.badge-confirmed {
  background-color: #E8F5E9;
  color: #178A4B;
  border: 1px solid #C8E6C9;
}
.badge-cap-event {
  background-color: #E0F2F1;
  color: #0F8B8D;
  border: 1px solid #B2DFDB;
}
.badge-unconfirmed {
  background-color: #FFF8E1;
  color: #B77900;
  border: 1px solid #FFE082;
}
.badge-unrecorded {
  background-color: #ECEFF1;
  color: #5B6573;
  border: 1px solid #CFD8DC;
}

/* Touch targets */
button, select, input {
  touch-action: manipulation;
}