/* ══════════════════════════════════════════════
   Carehia Caregiver Portal — Premium Styles
   Design: Purple/blue gradient, glassmorphism,
   mobile-first, Inter font, soft shadows
══════════════════════════════════════════════ */

/* ── Brand tokens ── */
:root {
  /* ── New Design System Tokens ── */
  --color-primary:        #7C5CFF;
  --color-secondary:      #4A90E2;
  --color-success:        #22C55E;
  --color-warning:        #F59E0B;
  --color-error:          #EF4444;
  --color-bg:             #F8FAFC;
  --color-card:           #FFFFFF;
  --color-text-primary:   #0F172A;
  --color-text-secondary: #475569;
  --color-border:         #E2E8F0;

  /* ── Legacy aliases (keep for DaisyUI compatibility) ── */
  --purple:       #7C5CFF;
  --purple-soft:  #9b80ff;
  --purple-dark:  #6040e0;
  --blue:         #4A90E2;
  --blue-dark:    #3578c8;
  --gradient:     linear-gradient(135deg, #7C5CFF 0%, #4A90E2 100%);
  --gradient-hero: linear-gradient(160deg, #1a1a2e 0%, #2d1b69 40%, #1e3a5f 100%);
  --shadow-sm:  0 1px 4px rgba(124,92,255,0.06), 0 0 0 1px rgba(124,92,255,0.04);
  --shadow-md:  0 4px 16px rgba(124,92,255,0.10), 0 1px 4px rgba(0,0,0,0.04);
  --shadow-lg:  0 8px 32px rgba(124,92,255,0.16), 0 2px 8px rgba(0,0,0,0.06);
}

/* ── Typography ── */
*, *::before, *::after { box-sizing: border-box; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.01em;
}

/* ── Constrain to mobile width on desktop ── */
@media (min-width: 640px) {
  #root {
    max-width: 430px;
    margin: 0 auto;
    min-height: 100vh;
    position: relative;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.06), 0 0 80px rgba(124,58,237,0.08);
  }
}

/* ── Layout helpers ── */
.min-h-screen { min-height: 100vh !important; min-height: 100dvh !important; }
.flex          { display: flex !important; }
.flex-col      { flex-direction: column !important; }
.flex-1        { flex: 1 1 0% !important; }
.overflow-y-auto { overflow-y: auto !important; }

/* ── Tab enter animation ── */
.tab-content {
  animation: fadeSlideUp 0.22s ease-out;
  width: 100%;
  display: block !important;
  min-height: auto;
}
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Skeleton shimmer ── */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}
.skeleton-shimmer {
  background: linear-gradient(90deg,
    var(--color-base-300, #ede9fe) 25%,
    var(--color-base-200, #ffffff) 50%,
    var(--color-base-300, #ede9fe) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 1rem;
}

/* ════════════════════════════
   Hero Gradient Card
   (Login header + Earnings)
════════════════════════════ */
.earnings-card {
  background: linear-gradient(160deg, #1a1a2e 0%, #2d1b69 40%, #1e3a5f 100%);
  position: relative;
  overflow: hidden;
}
/* Decorative blobs */
.earnings-card::before {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 160px; height: 160px;
  border-radius: 50%;
  background: rgba(139, 92, 246, 0.35);
  filter: blur(50px);
  pointer-events: none;
}
.earnings-card::after {
  content: '';
  position: absolute;
  bottom: -30px; left: 10px;
  width: 120px; height: 120px;
  border-radius: 50%;
  background: rgba(74, 144, 226, 0.25);
  filter: blur(40px);
  pointer-events: none;
}

/* ════════════════════════════
   Cards — white, elevated
════════════════════════════ */
.bg-base-200 {
  box-shadow: var(--shadow-sm) !important;
}
/* Clickable cards get stronger shadow on hover */
.press-card {
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.press-card:active {
  transform: scale(0.985);
  box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
}

/* ════════════════════════════
   Floating Glassmorphism Nav
════════════════════════════ */
.fixed.bottom-0.bg-base-100 {
  background: rgba(250, 249, 255, 0.90) !important;
  backdrop-filter: blur(28px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(200%) !important;
  border-top: 1px solid rgba(124, 92, 255, 0.08) !important;
  box-shadow:
    0 -4px 24px rgba(124, 92, 255, 0.07),
    0 -1px 0 rgba(124, 92, 255, 0.05) !important;
}

/* ── Bottom nav dark mode ── */
[data-theme='alfred-dark'] .fixed.bottom-0 {
  background: rgba(13, 13, 26, 0.90) !important;
  border-top: 1px solid rgba(139, 92, 246, 0.12) !important;
  box-shadow: 0 -4px 24px rgba(0,0,0,0.3) !important;
}

/* ── Nav item active pill ── */
.bottom-nav-item {
  transition: color 0.2s ease, transform 0.15s ease;
  border-radius: 1rem;
}
.bottom-nav-item:active { transform: scale(0.88); }
.bottom-nav-item.active { color: #7C5CFF !important; }

/* Active top indicator → replace with background glow */
.bottom-nav-item.active > div:first-child > .absolute {
  display: none !important;
}

/* ════════════════════════════
   Inputs
════════════════════════════ */
.input, .textarea, .select {
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
  border-color: rgba(124, 92, 255, 0.15) !important;
}
.input:focus-within, .input:focus,
.textarea:focus, .select:focus {
  border-color: #7C5CFF !important;
  box-shadow: 0 0 0 3px rgba(124, 92, 255, 0.12) !important;
  outline: none !important;
}

/* ════════════════════════════
   Buttons
════════════════════════════ */
/* Primary — gradient purple with glow */
.btn-primary {
  background: linear-gradient(135deg, #7C5CFF 0%, #7C5CFF 100%) !important;
  border-color: transparent !important;
  box-shadow: 0 4px 14px rgba(124, 92, 255, 0.30) !important;
  transition: all 0.2s ease !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}
.btn-primary:hover:not(:disabled) {
  box-shadow: 0 6px 20px rgba(124, 92, 255, 0.40) !important;
  transform: translateY(-1px);
}
.btn-primary:active:not(:disabled) {
  box-shadow: 0 2px 8px rgba(124, 92, 255, 0.25) !important;
  transform: translateY(0);
}
.btn-primary:disabled {
  opacity: 0.55 !important;
  box-shadow: none !important;
}

/* Outline buttons */
.btn-outline {
  border-color: rgba(124, 92, 255, 0.25) !important;
  color: #7C5CFF !important;
}
.btn-outline:hover {
  background: rgba(124, 92, 255, 0.06) !important;
  border-color: #7C5CFF !important;
}

/* Ghost */
.btn-ghost { color: var(--color-base-content); }

/* Small rounded filter pills */
.btn-sm.rounded-full { padding-left: 1rem; padding-right: 1rem; }

/* ════════════════════════════
   Badges
════════════════════════════ */
.badge-primary {
  background: rgba(124, 92, 255, 0.10) !important;
  color: #7C5CFF !important;
  border: 1px solid rgba(124, 92, 255, 0.15) !important;
  font-weight: 600 !important;
}
.badge-success {
  background: rgba(34, 197, 94, 0.10) !important;
  color: #22C55E !important;
  border: 1px solid rgba(34, 197, 94, 0.15) !important;
}
.badge-info {
  background: rgba(74, 144, 226, 0.10) !important;
  color: #4A90E2 !important;
  border: 1px solid rgba(74, 144, 226, 0.15) !important;
}
.badge-error {
  background: rgba(239, 68, 68, 0.10) !important;
  color: #EF4444 !important;
  border: 1px solid rgba(239, 68, 68, 0.12) !important;
}
.badge-ghost {
  background: rgba(0,0,0,0.04) !important;
  color: var(--color-base-content) !important;
}

/* ════════════════════════════
   Toggle
════════════════════════════ */
.toggle-primary:checked {
  background-color: #7C5CFF !important;
  border-color: #7C5CFF !important;
  box-shadow: 0 2px 8px rgba(124, 92, 255, 0.30) !important;
}

/* ════════════════════════════
   Avatar & Profile
════════════════════════════ */
.avatar-ring {
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.30),
    0 0 0 5px rgba(255, 255, 255, 0.10),
    0 4px 16px rgba(0,0,0,0.20);
}

/* ════════════════════════════
   Typography
════════════════════════════ */
.text-xl.font-bold, .text-2xl.font-bold {
  letter-spacing: -0.025em;
}
.text-3xl, .text-4xl {
  letter-spacing: -0.035em;
  font-feature-settings: "tnum";
}

/* ════════════════════════════
   Earnings Bar Chart
════════════════════════════ */
/* Gradient bars in chart */
[class*='bg-primary\/85'] {
  background: linear-gradient(180deg, #7C5CFF 0%, #7C5CFF 100%) !important;
  border-radius: 5px 5px 0 0 !important;
  min-height: 4px;
}

/* ════════════════════════════
   Status dot
════════════════════════════ */
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(0.82); }
}
.pulse-dot { animation: pulse-dot 2.2s ease-in-out infinite; }

/* ════════════════════════════
   Scrollbar
════════════════════════════ */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Page scroll */
::-webkit-scrollbar { width: 0px; }

/* ════════════════════════════
   Safe area
════════════════════════════ */
.safe-bottom {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* ════════════════════════════
   Request card (swipeable)
════════════════════════════ */
.request-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.request-card:active { transform: scale(0.98); }

/* ════════════════════════════
   Alert / error
════════════════════════════ */
.alert-error {
  background: rgba(239, 68, 68, 0.08) !important;
  border: 1px solid rgba(239, 68, 68, 0.20) !important;
  color: #EF4444 !important;
  border-radius: 0.875rem !important;
}

/* ════════════════════════════
   Section labels
════════════════════════════ */
.text-base-content\/50 {
  letter-spacing: 0.04em;
}

/* ════════════════════════════
   Loading spinner
════════════════════════════ */
.loading-spinner {
  border-color: transparent !important;
  border-top-color: currentColor !important;
}

/* ════════════════════════════
   Skill / language chips
════════════════════════════ */
.badge-sm.bg-primary\/10 {
  background: rgba(124, 92, 255, 0.08) !important;
  color: #7C5CFF !important;
  border: 1px solid rgba(124, 92, 255, 0.12) !important;
  padding: 0.35rem 0.65rem !important;
}

/* ════════════════════════════
   Menu list items
════════════════════════════ */
.hover\:bg-base-300:hover {
  background: rgba(124, 92, 255, 0.04) !important;
}

/* ════════════════════════════
   Dark mode overrides
════════════════════════════ */
[data-theme='alfred-dark'] .bg-base-200 {
  box-shadow: 0 1px 8px rgba(0,0,0,0.25), 0 0 0 1px rgba(139,92,246,0.06) !important;
}
[data-theme='alfred-dark'] .btn-primary {
  background: linear-gradient(135deg, #7C5CFF 0%, #7C5CFF 100%) !important;
}
[data-theme='alfred-dark'] .skeleton-shimmer {
  background: linear-gradient(90deg,
    var(--color-base-200, #161628) 25%,
    var(--color-base-300, #1e1e38) 50%,
    var(--color-base-200, #161628) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

/* OT Progress Bar */
.ot-bar-normal { background: var(--color-primary); }
.ot-bar-overtime { background: var(--color-warning); }

/* Match score semantic colors */
.match-high   { color: var(--color-success);   } /* 90-100% */
.match-mid    { color: var(--color-primary);   } /* 70-89% */
.match-low    { color: var(--color-text-secondary); } /* <70% */

/* Availability indicator */
.avail-dot {
  width: 8px; height: 8px;
  background: var(--color-success);
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(34, 197, 94, 0.5);
}

/* Locked content overlay */
.locked-overlay {
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(4px);
}
.lock-icon-primary { color: var(--color-primary); }

/* ════════════════════════════
   Caregiver Redesign v2 — May 2026
════════════════════════════ */

/* Request card pulse glow for new requests */
@keyframes requestGlow {
  0%, 100% { box-shadow: var(--shadow-sm), 0 0 0 0 rgba(245, 158, 11, 0); }
  50% { box-shadow: var(--shadow-md), 0 0 0 6px rgba(245, 158, 11, 0.12); }
}
.request-new {
  animation: requestGlow 2.5s ease-in-out infinite;
}

/* Online status glow pulse */
@keyframes onlinePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.15); }
}
.online-dot {
  animation: onlinePulse 2s ease-in-out infinite;
}

/* Radar ping for empty state */
@keyframes radarPing {
  0% { transform: scale(0.8); opacity: 0.8; }
  100% { transform: scale(2); opacity: 0; }
}
.radar-ring {
  animation: radarPing 2s ease-out infinite;
}
.radar-ring-delayed {
  animation: radarPing 2s ease-out 0.7s infinite;
}

/* Earnings number transition */
.earnings-number {
  font-variant-numeric: tabular-nums;
  transition: all 0.1s ease;
}

/* Urgency left borders */
.urgency-today    { border-left: 4px solid #EF4444; }
.urgency-week     { border-left: 4px solid #F59E0B; }
.urgency-flexible { border-left: 4px solid #22C55E; }

/* Active nav pill */
.nav-pill-active {
  background: rgba(124, 92, 255, 0.10);
  border-radius: 14px;
}