/* Custom CSS Stylesheet for CareLink Hub */

/* Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/* Smooth Scroll and Selection Custom */
html {
  scroll-behavior: smooth;
}

::selection {
  background-color: #e06a3b;
  color: white;
}

/* Sidebar Navigation Link Styles */
.nav-link {
  color: #e5eeec;
  border: 1px solid transparent;
}

.nav-link:hover {
  background-color: rgba(255, 255, 255, 0.08);
  color: #faf9f6;
}

.nav-link.active {
  background-color: #faf9f6;
  color: #2d6255;
  box-shadow: 0 4px 12px rgba(45, 98, 85, 0.15);
  border-color: rgba(255, 255, 255, 0.2);
}

.nav-link.active i {
  color: #e06a3b;
}

/* Mobile Sticky Navigation Link Styles */
.mobile-nav-link {
  color: #e5eeec;
  opacity: 0.7;
  transition: all 0.2s ease;
}

.mobile-nav-link:hover,
.mobile-nav-link.active {
  opacity: 1;
  color: #faf9f6;
}

.mobile-nav-link.active i {
  color: #e06a3b;
  transform: translateY(-2px);
}

/* Tab Routing Animations */
.tab-content {
  animation: tabFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

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

/* Glassmorphism Accents */
.glass-panel {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.4);
}

/* Card Hover Scale and Shadow Glide */
.hover-card {
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.hover-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px -10px rgba(45, 98, 85, 0.15);
  border-color: rgba(58, 125, 110, 0.3);
}

/* Modal Dialog Scale Animation */
dialog[open] {
  animation: modalSlideUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

dialog::backdrop {
  background: rgba(35, 77, 67, 0.4);
  backdrop-filter: blur(4px);
  animation: backdropFadeIn 0.3s ease forwards;
}

@keyframes modalSlideUp {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

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

/* Custom Scrollbar Styling */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: #faf9f6;
}

::-webkit-scrollbar-thumb {
  background: #c7dbd5;
  border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
  background: #3a7d6e;
}

/* Custom Detail Accordion Transition styling */
details summary::-webkit-details-marker {
  display: none;
}

details[open] summary i {
  transform: rotate(180deg);
}

/* Pulse Glow Effects */
.pulse-glow-orange {
  box-shadow: 0 0 0 0 rgba(224, 106, 59, 0.7);
  animation: pulseOrange 2s infinite;
}

@keyframes pulseOrange {
  70% {
    box-shadow: 0 0 0 10px rgba(224, 106, 59, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(224, 106, 59, 0);
  }
}

/* Deep Breathing pacing states */
.breathe-in-state {
  transform: scale(1.6);
  background-color: #7c3aed !important;
}

.breathe-hold-state {
  transform: scale(1.6);
  background-color: #8b5cf6 !important;
}

.breathe-out-state {
  transform: scale(1.0);
  background-color: #6d28d9 !important;
}

/* Outer ring transitions */
.ring-in-state {
  transform: scale(2.2);
  opacity: 0.6;
}

.ring-hold-state {
  transform: scale(2.2);
  opacity: 0.8;
}

.ring-out-state {
  transform: scale(1.0);
  opacity: 0.2;
}