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

/* Custom CSS for Reminder App */

/* Modern Color Theme - CSS Custom Properties */
:root {
  /* Design System Variables */
  --transition-duration: 0.2s;
  --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
  --border-radius-sm: 0.25rem;
  --border-radius: 0.5rem;
  --border-radius-lg: 0.75rem;
  --border-radius-xl: 1rem;
  
  /* Enhanced Shadows with Better Depth */
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  
  /* Modern Primary Colors - Olive Green */
  --color-primary-50: 248, 249, 242;
  --color-primary-100: 238, 242, 225;
  --color-primary-200: 221, 229, 198;
  --color-primary-300: 197, 211, 160;
  --color-primary-400: 168, 189, 115;
  --color-primary-500: 143, 166, 83;
  --color-primary-600: 115, 140, 61;
  --color-primary-700: 90, 109, 51;
  --color-primary-800: 74, 89, 41;
  --color-primary-900: 63, 75, 37;
  --color-primary-950: 33, 41, 17;
  
  /* Secondary Colors - Sage Green */
  --color-secondary-50: 244, 246, 243;
  --color-secondary-100: 230, 235, 227;
  --color-secondary-200: 205, 216, 199;
  --color-secondary-300: 173, 190, 161;
  --color-secondary-400: 135, 160, 118;
  --color-secondary-500: 107, 131, 89;
  --color-secondary-600: 83, 106, 68;
  --color-secondary-700: 66, 85, 55;
  --color-secondary-800: 54, 69, 47;
  --color-secondary-900: 45, 58, 40;
  --color-secondary-950: 23, 31, 21;
  
  /* Enhanced Success Colors - Forest Green */
  --color-success-50: 240, 251, 244;
  --color-success-100: 220, 252, 231;
  --color-success-200: 187, 247, 208;
  --color-success-300: 134, 239, 172;
  --color-success-400: 74, 222, 128;
  --color-success-500: 34, 197, 94;
  --color-success-600: 22, 163, 74;
  --color-success-700: 21, 128, 61;
  --color-success-800: 22, 101, 52;
  --color-success-900: 20, 83, 45;
  --color-success-950: 5, 46, 22;
  
  /* Enhanced Warning Colors - Warm Amber */
  --color-warning-50: 255, 251, 235;
  --color-warning-100: 254, 243, 199;
  --color-warning-200: 253, 230, 138;
  --color-warning-300: 252, 211, 77;
  --color-warning-400: 251, 191, 36;
  --color-warning-500: 245, 158, 11;
  --color-warning-600: 217, 119, 6;
  --color-warning-700: 180, 83, 9;
  --color-warning-800: 146, 64, 14;
  --color-warning-900: 120, 53, 15;
  --color-warning-950: 69, 26, 3;
  
  /* Enhanced Error Colors - Muted Red */
  --color-error-50: 254, 242, 242;
  --color-error-100: 254, 226, 226;
  --color-error-200: 254, 202, 202;
  --color-error-300: 252, 165, 165;
  --color-error-400: 248, 113, 113;
  --color-error-500: 220, 85, 85;
  --color-error-600: 185, 65, 65;
  --color-error-700: 150, 50, 50;
  --color-error-800: 120, 40, 40;
  --color-error-900: 100, 35, 35;
  --color-error-950: 60, 20, 20;
  
  /* Enhanced Neutral Colors - Warm Stone Tones */
  --color-neutral-50: 250, 250, 249;
  --color-neutral-100: 245, 245, 244;
  --color-neutral-200: 231, 229, 228;
  --color-neutral-300: 214, 211, 209;
  --color-neutral-400: 168, 162, 158;
  --color-neutral-500: 120, 113, 108;
  --color-neutral-600: 87, 83, 78;
  --color-neutral-700: 68, 64, 60;
  --color-neutral-800: 41, 37, 36;
  --color-neutral-900: 28, 25, 23;
  --color-neutral-950: 12, 10, 9;
  
  /* Light Theme Variables */
  --bg-primary: rgb(var(--color-neutral-50));
  --bg-secondary: rgb(255, 255, 255);
  --bg-tertiary: rgb(var(--color-neutral-100));
  --text-primary: rgb(var(--color-neutral-900));
  --text-secondary: rgb(var(--color-neutral-600));
  --text-tertiary: rgb(var(--color-neutral-500));
  --border-primary: rgb(var(--color-neutral-200));
  --border-secondary: rgb(var(--color-neutral-300));
}

/* Dark Theme Variables */
.dark {
  --bg-primary: rgb(var(--color-neutral-950));
  --bg-secondary: rgb(var(--color-neutral-900));
  --bg-tertiary: rgb(var(--color-neutral-800));
  --text-primary: rgb(var(--color-neutral-50));
  --text-secondary: rgb(var(--color-neutral-300));
  --text-tertiary: rgb(var(--color-neutral-400));
  --border-primary: rgb(var(--color-neutral-700));
  --border-secondary: rgb(var(--color-neutral-600));
}

/* Auto Dark Mode Support - Only when no explicit theme is set */
@media (prefers-color-scheme: dark) {
  :root:not(.light):not(.dark) {
    --bg-primary: rgb(var(--color-neutral-950));
    --bg-secondary: rgb(var(--color-neutral-900));
    --bg-tertiary: rgb(var(--color-neutral-800));
    --text-primary: rgb(var(--color-neutral-50));
    --text-secondary: rgb(var(--color-neutral-300));
    --text-tertiary: rgb(var(--color-neutral-400));
    --border-primary: rgb(var(--color-neutral-700));
    --border-secondary: rgb(var(--color-neutral-600));
  }
}

/* Explicit Light Theme - Override prefers-color-scheme */
.light {
  --bg-primary: rgb(var(--color-neutral-50)) !important;
  --bg-secondary: rgb(255, 255, 255) !important;
  --bg-tertiary: rgb(var(--color-neutral-100)) !important;
  --text-primary: rgb(var(--color-neutral-900)) !important;
  --text-secondary: rgb(var(--color-neutral-600)) !important;
  --text-tertiary: rgb(var(--color-neutral-500)) !important;
  --border-primary: rgb(var(--color-neutral-200)) !important;
  --border-secondary: rgb(var(--color-neutral-300)) !important;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: radial-gradient(circle at top, rgba(var(--color-primary-50), 0.9), rgba(var(--color-neutral-50), 0.6)) fixed,
              linear-gradient(180deg, rgba(var(--color-neutral-50), 1), rgba(var(--color-neutral-100), 0.75));
  color: var(--text-primary);
  min-height: 100vh;
  line-height: 1.65;
}

.dark body {
  background: radial-gradient(circle at 20% 20%, rgba(15, 73, 80, 0.85), rgba(4, 15, 20, 0.92)) fixed,
              linear-gradient(180deg, rgba(3, 8, 15, 0.96), rgba(6, 20, 32, 0.92));
}

.app-nav {
  backdrop-filter: blur(20px);
  background: rgba(255, 255, 255, 0.92) !important;
  border-bottom: 1px solid rgba(var(--color-neutral-200), 0.9) !important;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08);
  overflow: visible;
  position: sticky;
  top: 0;
  z-index: 50;
  transition: background var(--transition-duration) var(--transition-timing),
              border-color var(--transition-duration) var(--transition-timing),
              box-shadow var(--transition-duration) var(--transition-timing);
}

.app-nav::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(var(--color-primary-300), 0.6), rgba(var(--color-secondary-300), 0.6));
  opacity: 0.4;
}

.dark .app-nav {
  background: linear-gradient(120deg, rgba(6, 20, 32, 0.94), rgba(9, 35, 29, 0.9)) !important;
  border-bottom-color: rgba(var(--color-primary-500), 0.4) !important;
  box-shadow: 0 26px 44px rgba(0, 0, 0, 0.65);
}

.dark .app-nav::after {
  opacity: 0.25;
}

.app-nav .nav-shell {
  position: relative;
  padding-top: 0;
  padding-bottom: 0;
  overflow: visible;
}

.nav-brand__label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text-primary) !important;
}

.nav-brand__label i {
  color: rgb(var(--color-primary-500));
}

.nav-actions {
  gap: 0.75rem;
}

.theme-toggle-btn,
.user-menu-trigger,
.mobile-menu-btn {
  border: 1px solid rgba(var(--color-neutral-300), 0.7);
  background: rgba(var(--color-neutral-50), 0.95);
  color: var(--text-secondary);
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  min-width: 2.5rem;
  transition: background var(--transition-duration) var(--transition-timing),
              border-color var(--transition-duration) var(--transition-timing),
              color var(--transition-duration) var(--transition-timing),
              transform var(--transition-duration) var(--transition-timing);
}

.theme-toggle-btn:hover,
.user-menu-trigger:hover,
.mobile-menu-btn:hover {
  background: rgba(var(--color-primary-50), 0.95);
  border-color: rgba(var(--color-primary-300), 0.7);
  color: rgb(var(--color-primary-700));
  transform: translateY(-1px);
}

.theme-toggle-btn:focus,
.user-menu-trigger:focus,
.mobile-menu-btn:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--color-primary-200), 0.8);
}

.user-menu-trigger {
  padding-left: 0.75rem;
  padding-right: 0.85rem;
  min-width: auto;
  background: rgba(var(--color-neutral-50), 0.8);
}

.user-menu-trigger span {
  font-weight: 600;
}

.dark .theme-toggle-btn,
.dark .user-menu-trigger,
.dark .mobile-menu-btn {
  background: rgba(var(--color-neutral-900), 0.7);
  border-color: rgba(var(--color-neutral-700), 0.8);
  color: var(--text-secondary);
}

.dark .theme-toggle-btn:hover,
.dark .user-menu-trigger:hover,
.dark .mobile-menu-btn:hover {
  background: rgba(var(--color-neutral-800), 0.9);
  border-color: rgba(var(--color-primary-500), 0.5);
  color: rgb(var(--color-primary-200));
}

.mobile-menu-panel {
  background: rgba(255, 255, 255, 0.97);
  border-color: rgba(var(--color-neutral-200), 0.8) !important;
  box-shadow: 0 16px 28px rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(10px);
}

.dark .mobile-menu-panel {
  background: linear-gradient(145deg, rgba(6, 20, 32, 0.95), rgba(5, 12, 20, 0.9));
  border-color: rgba(var(--color-neutral-700), 0.7) !important;
  box-shadow: 0 30px 50px rgba(0, 0, 0, 0.65);
  border-radius: 1.25rem;
}

#mobile-user-display {
  padding: 0;
  border-radius: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}

#mobile-username-display {
  color: var(--text-primary);
  font-weight: 600;
}

.dark #mobile-user-display {
  border: none;
  background: transparent;
}

.dark #mobile-username-display {
  color: var(--text-primary);
}

#mobile-menu button,
#mobile-menu a {
  border-radius: 0.95rem;
  border: 1px solid transparent;
  background: transparent;
  transition: border-color var(--transition-duration) var(--transition-timing),
              background-color var(--transition-duration) var(--transition-timing);
}

#mobile-menu button:hover,
#mobile-menu a:hover {
  border-color: rgba(var(--color-primary-300), 0.6);
  background-color: rgba(var(--color-primary-50), 0.6);
}

#mobile-menu button:focus-visible,
#mobile-menu a:focus-visible {
  border-color: rgba(var(--color-primary-300), 0.6);
  box-shadow: 0 0 0 3px rgba(var(--color-primary-200), 0.25);
}

.dark #mobile-menu button,
.dark #mobile-menu a {
  border-color: rgba(255, 255, 255, 0.04);
}

.dark #mobile-menu button:hover,
.dark #mobile-menu a:hover {
  border-color: rgba(var(--color-primary-500), 0.4);
  background: rgba(255, 255, 255, 0.03);
}

.nav-mobile .mobile-menu-btn {
  border-radius: 0.85rem;
  padding: 0.55rem 0.75rem;
  min-height: 2.75rem;
  min-width: 2.75rem;
  border: none;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: none;
}

.dark .nav-mobile .mobile-menu-btn {
  background: rgba(6, 20, 32, 0.9);
  border: none;
  color: var(--text-primary);
  box-shadow: none;
}

.nav-mobile .mobile-menu-btn i {
  color: var(--text-secondary);
}

.dark .nav-mobile .mobile-menu-btn i {
  color: rgb(var(--color-primary-200));
}

@media (max-width: 768px) {
  .app-nav {
    border-left: none !important;
    border-right: none !important;
    padding-left: 0;
    padding-right: 0;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }

  .nav-shell {
    max-width: none !important;
    width: 100%;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    margin-left: 0;
    margin-right: 0;
  }

  .nav-shell > .flex {
    gap: 0.75rem;
    align-items: flex-start;
    flex-direction: column;
    height: auto;
    padding: 0.35rem 0;
  }

  .nav-brand,
  .nav-brand__label {
    width: 100%;
    padding-left: 0.25rem;
  }

  .nav-brand__label {
    font-size: 1.2rem;
  }

  .nav-mobile {
    width: 100%;
    justify-content: space-between;
    gap: 0.75rem;
    align-items: center;
    padding-right: 0.25rem;
  }

  #mobile-user-display {
    display: inline-flex !important;
    flex: 0 1 auto;
  }

  .nav-mobile .mobile-menu-btn {
    margin-left: auto;
  }

  #mobile-menu {
    position: absolute;
    left: 1rem;
    right: 1rem;
    top: calc(100% + 0.5rem);
    margin-top: 0;
    border-radius: 1.5rem;
    overflow: hidden;
    border: 1px solid rgba(var(--color-primary-500), 0.35);
    box-shadow: none;
  }
}

@media (max-width: 480px) {
  .nav-shell {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .nav-brand__label {
    font-size: 1.1rem;
  }

  #mobile-menu {
    left: 0.75rem;
    right: 0.75rem;
  }
}

#user-dropdown {
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12);
}

.dark #user-dropdown {
  box-shadow: 0 18px 35px rgba(0, 0, 0, 0.65);
}

#search-input {
  background: rgba(var(--color-neutral-50), 0.85);
  border: 1px solid rgba(var(--color-neutral-300), 0.6) !important;
  border-radius: 9999px;
  padding: 0.85rem 1rem 0.85rem 2.75rem;
  font-size: 0.95rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

#search-input::placeholder {
  color: rgba(var(--color-neutral-500), 0.9);
}

.dark #search-input {
  background: rgba(var(--color-neutral-900), 0.65);
  border-color: rgba(var(--color-neutral-700), 0.8) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  color: var(--text-primary);
}

.dark #search-input::placeholder {
  color: rgba(var(--color-neutral-400), 0.9);
}

.collapsed-hint {
  color: var(--text-tertiary) !important;
  font-size: 0.8rem;
}

.collapse-toggle {
  border-radius: 9999px;
  border: 1px solid transparent;
  padding: 0.35rem 0.5rem;
}

.collapse-toggle:focus {
  border-color: rgba(var(--color-primary-400), 0.6);
  box-shadow: 0 0 0 3px rgba(var(--color-primary-200), 0.7);
}

/* Global Styling with New Color System */
* {
  transition: background-color var(--transition-duration) var(--transition-timing), 
              border-color var(--transition-duration) var(--transition-timing), 
              color var(--transition-duration) var(--transition-timing),
              opacity var(--transition-duration) var(--transition-timing),
              transform var(--transition-duration) var(--transition-timing),
              box-shadow var(--transition-duration) var(--transition-timing);
}

/* Enhanced Scrollbar with Modern Colors */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background-color: var(--bg-tertiary);
  border-radius: var(--border-radius-sm);
}

::-webkit-scrollbar-thumb {
  background-color: rgb(var(--color-neutral-400));
  border-radius: var(--border-radius-sm);
  transition: background-color var(--transition-duration) var(--transition-timing);
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgb(var(--color-neutral-500));
}

.dark ::-webkit-scrollbar-track {
  background-color: rgb(var(--color-neutral-800));
}

.dark ::-webkit-scrollbar-thumb {
  background-color: rgb(var(--color-neutral-600));
}

.dark ::-webkit-scrollbar-thumb:hover {
  background-color: rgb(var(--color-neutral-500));
}

/* Enhanced Animations with GPU Acceleration */
@keyframes fadeIn {
  from { 
    opacity: 0; 
    transform: translateY(10px) translateZ(0); 
  }
  to { 
    opacity: 1; 
    transform: translateY(0) translateZ(0); 
  }
}

@keyframes slideInFromRight {
  from { 
    transform: translateX(100%) translateZ(0); 
    opacity: 0; 
  }
  to { 
    transform: translateX(0) translateZ(0); 
    opacity: 1; 
  }
}

@keyframes shimmer {
  100% {
    transform: translateX(100%);
  }
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* Component Styles with Modern Colors */
.reminder-item {
  position: relative;
  background-color: var(--bg-secondary);
  border: 1px solid rgba(var(--color-neutral-300), 0.3);
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  margin-bottom: 0.25rem;
  backdrop-filter: blur(8px);
}

/* Section-specific coloring for Light Mode */
#past-list .reminder-item {
  background-color: rgba(254, 242, 242, 0.8); /* Red 50 */
  border-color: rgba(254, 226, 226, 0.8); /* Red 100 */
}

#today-list .reminder-item {
  background-color: rgba(240, 253, 244, 0.8); /* Green 50 */
  border-color: rgba(220, 252, 231, 0.8); /* Green 100 */
}

#future-list .reminder-item {
  background-color: rgba(239, 246, 255, 0.8); /* Blue 50 */
  border-color: rgba(219, 234, 254, 0.8); /* Blue 100 */
}

.dark .reminder-item {
  /* Default dark background - will be overridden by specific sections below */
  background-color: rgba(31, 41, 55, 0.8);
  border-color: rgba(75, 85, 99, 0.3);
}

/* Section-specific coloring for Dark Mode */
.dark #past-list .reminder-item {
  background-color: rgba(69, 10, 10, 0.4); /* Red tint */
  border-color: rgba(127, 29, 29, 0.4);
}

.dark #today-list .reminder-item {
  background-color: rgba(5, 46, 22, 0.4); /* Green tint */
  border-color: rgba(20, 83, 45, 0.4);
}

.dark #future-list .reminder-item {
  background-color: rgba(23, 37, 84, 0.4); /* Blue tint */
  border-color: rgba(30, 58, 138, 0.4);
}

/* Priority-based subtle accent */
.reminder-item[data-priority="low"]::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, rgb(var(--color-success-400)), rgb(var(--color-success-500)));
  border-radius: 12px 0 0 12px;
}

.reminder-item[data-priority="medium"]::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, rgb(var(--color-warning-400)), rgb(var(--color-warning-500)));
  border-radius: 12px 0 0 12px;
}

.reminder-item[data-priority="high"]::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, rgb(var(--color-error-400)), rgb(var(--color-error-500)));
  border-radius: 12px 0 0 12px;
}

/* Enhanced Form Styles */
.form-input:focus {
  outline: none;
  border-color: rgb(var(--color-primary-500));
  box-shadow: 0 0 0 3px rgba(var(--color-primary-500), 0.1);
  transform: translateY(-1px);
}

.form-input {
  transition: all var(--transition-duration) var(--transition-timing);
  background: rgba(var(--color-neutral-50), 0.8);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(var(--color-neutral-300), 0.4);
  border-radius: 12px;
}

.dark .form-input {
  background: rgba(var(--color-neutral-800), 0.8);
  border-color: rgba(var(--color-neutral-600), 0.4);
}

/* Enhanced card styling */
.card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7));
  backdrop-filter: blur(12px);
  border: 1px solid rgba(var(--color-neutral-200), 0.4);
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  transition: all var(--transition-duration) var(--transition-timing);
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

.dark .card {
  background: linear-gradient(135deg, rgba(var(--color-neutral-800), 0.9), rgba(var(--color-neutral-700), 0.7));
  border-color: rgba(var(--color-neutral-600), 0.4);
}

/* Button improvements */
.btn-primary, .btn-secondary {
  border-radius: 12px;
  transition: all var(--transition-duration) var(--transition-timing);
  backdrop-filter: blur(8px);
  font-weight: 600;
  letter-spacing: 0.025em;
}

.btn-primary:hover, .btn-secondary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

/* Priority Indicators with New Color System */
.priority-low { 
  color: rgb(var(--color-success-600));
}

.priority-medium { 
  color: rgb(var(--color-warning-600));
}

.priority-high { 
  color: rgb(var(--color-error-600));
}

.dark .priority-low { 
  color: rgb(var(--color-success-400));
}

.dark .priority-medium { 
  color: rgb(var(--color-warning-400));
}

.dark .priority-high { 
  color: rgb(var(--color-error-400));
}

/* Clean reminder layout */
.reminder-title {
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 0.5rem;
  color: var(--text-primary);
  letter-spacing: -0.025em;
}

.reminder-description {
  font-size: 0.9rem;
  line-height: 1.6;
  margin-bottom: 1rem;
  opacity: 0.8;
  color: var(--text-secondary);
  font-weight: 400;
}

.reminder-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.8rem;
  font-weight: 500;
  flex-wrap: wrap;
}

.reminder-meta-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.75rem;
  background: linear-gradient(135deg, rgba(var(--color-neutral-100), 0.6), rgba(var(--color-neutral-200), 0.3));
  border-radius: 8px;
  color: rgb(var(--color-neutral-700));
  font-weight: 500;
  font-size: 0.75rem;
  backdrop-filter: blur(4px);
  border: 1px solid rgba(var(--color-neutral-300), 0.2);
  transition: all var(--transition-duration) var(--transition-timing);
}

.dark .reminder-meta-item {
  background: linear-gradient(135deg, rgba(var(--color-neutral-800), 0.6), rgba(var(--color-neutral-700), 0.3));
  color: rgb(var(--color-neutral-300));
  border-color: rgba(var(--color-neutral-600), 0.2);
}

/* Icon styling within meta items */
.reminder-meta-item i {
  font-size: 0.7rem;
  opacity: 0.8;
}

/* Main dashboard header improvements */
h1 {
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: -0.05em;
  margin-bottom: 0.5rem;
}

/* Section spacing improvements */
.space-y-6 > :not([hidden]) ~ :not([hidden]) {
  margin-top: 2rem;
}

.space-y-4 > :not([hidden]) ~ :not([hidden]) {
  margin-top: 1.5rem;
}

/* Priority badge styling - made smaller */
.priority-badge {
  padding: 0.1rem 0.3rem;
  border-radius: 12px;
  font-size: 0.5rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  backdrop-filter: blur(6px);
  border: 1px solid transparent;
  transition: all var(--transition-duration) var(--transition-timing);
}

/* Recurrence badge styling - made more prominent */
.recurrence-badge {
  padding: 0.25rem 0.6rem;
  border-radius: 18px;
  font-size: 0.65rem;
  font-weight: 600;
  background: linear-gradient(135deg, rgba(var(--color-primary-100), 0.9), rgba(var(--color-primary-200), 0.7));
  color: rgb(var(--color-primary-700));
  border: 1px solid rgba(var(--color-primary-300), 0.4);
  transition: all var(--transition-duration) var(--transition-timing);
}

.dark .recurrence-badge {
  background: linear-gradient(135deg, rgba(var(--color-primary-900), 0.7), rgba(var(--color-primary-800), 0.5));
  color: rgb(var(--color-primary-200));
  border-color: rgba(var(--color-primary-600), 0.4);
  box-shadow: 0 2px 4px rgba(var(--color-primary-400), 0.1);
}

/* Datetime badge styling - prominent with good contrast */
.datetime-badge {
  padding: 0.3rem 0.7rem;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 600;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(99, 102, 241, 0.1));
  color: #1e40af;
  border: 1px solid rgba(59, 130, 246, 0.3);
  transition: all var(--transition-duration) var(--transition-timing);
}

.dark .datetime-badge {
  background: linear-gradient(135deg, rgba(30, 64, 175, 0.3), rgba(67, 56, 202, 0.2));
  color: #93c5fd;
  border-color: rgba(59, 130, 246, 0.5);
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15);
}

.priority-badge.low {
  background: linear-gradient(135deg, rgba(var(--color-success-100), 0.8), rgba(var(--color-success-200), 0.6));
  color: rgb(var(--color-success-700));
  border-color: rgba(var(--color-success-300), 0.3);
}

.priority-badge.medium {
  background: linear-gradient(135deg, rgba(var(--color-warning-100), 0.8), rgba(var(--color-warning-200), 0.6));
  color: rgb(var(--color-warning-700));
  border-color: rgba(var(--color-warning-300), 0.3);
}

.priority-badge.high {
  background: linear-gradient(135deg, rgba(var(--color-error-100), 0.8), rgba(var(--color-error-200), 0.6));
  color: rgb(var(--color-error-700));
  border-color: rgba(var(--color-error-300), 0.3);
}

.dark .priority-badge.low {
  background: linear-gradient(135deg, rgba(var(--color-success-900), 0.6), rgba(var(--color-success-800), 0.4));
  color: rgb(var(--color-success-200));
  border-color: rgba(var(--color-success-600), 0.3);
}

.dark .priority-badge.medium {
  background: linear-gradient(135deg, rgba(var(--color-warning-900), 0.6), rgba(var(--color-warning-800), 0.4));
  color: rgb(var(--color-warning-200));
  border-color: rgba(var(--color-warning-600), 0.3);
}

.dark .priority-badge.high {
  background: linear-gradient(135deg, rgba(var(--color-error-900), 0.6), rgba(var(--color-error-800), 0.4));
  color: rgb(var(--color-error-200));
  border-color: rgba(var(--color-error-600), 0.3);
}

/* Calendar Styles with Modern Colors */
.calendar-day {
  text-align: center;
  padding: 0.5rem 0;
  cursor: pointer;
  border-radius: var(--border-radius);
  transition: background-color var(--transition-duration) var(--transition-timing),
              color var(--transition-duration) var(--transition-timing);
  min-height: 2rem;
  will-change: background-color, color;
}

.calendar-day:hover {
  background-color: var(--bg-tertiary);
}

.calendar-day.today {
  background-color: rgb(var(--color-primary-500));
  color: white;
}

.calendar-day.has-reminders:not(.today) {
  background-color: rgb(var(--color-primary-100));
}

.dark .calendar-day.has-reminders:not(.today) {
  background-color: rgb(var(--color-primary-800));
}

/* Status Badges with New Color System */
.status-pending { 
  background-color: rgb(var(--color-warning-100));
  color: rgb(var(--color-warning-800));
  padding: 0.25rem 0.5rem;
  border-radius: var(--border-radius-sm);
  font-size: 0.75rem;
  font-weight: 500;
}

.status-overdue { 
  background-color: rgb(var(--color-error-100));
  color: rgb(var(--color-error-800));
  padding: 0.25rem 0.5rem;
  border-radius: var(--border-radius-sm);
  font-size: 0.75rem;
  font-weight: 500;
}

.dark .status-pending { 
  background-color: rgb(var(--color-warning-900));
  color: rgb(var(--color-warning-200));
}

.dark .status-overdue { 
  background-color: rgb(var(--color-error-900));
  color: rgb(var(--color-error-200));
}

/* Action button improvements */
.reminder-item button {
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  border-radius: 10px;
  transition: all var(--transition-duration) var(--transition-timing);
  backdrop-filter: blur(8px);
  border: 1px solid transparent;
  position: relative;
  overflow: hidden;
}



.reminder-item button:hover {
  transform: scale(1.08);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.reminder-item button:active {
  transform: scale(0.95);
}

/* Edit button styling - Removed obsolete CSS (using Tailwind classes instead) */

/* Delete button styling - Removed obsolete CSS (using Tailwind classes instead) */

/* Snooze button styling - Removed obsolete CSS (using Tailwind classes instead) */

/* Dark mode uses same styling to keep contrast high - Removed obsolete CSS */

/* Time display styling */
.reminder-meta-item .text-xs {
  margin-left: 0.25rem;
  font-weight: 400;
}

/* Past reminder styling - consolidated */
.past-reminder {
  opacity: 0.8;
  background: rgba(156, 163, 175, 0.1) !important;
  border-left: 4px solid #9CA3AF;
}

/* Dashboard panels and sidebar cards */
.panel-card,
.sidebar-card {
  transition: background var(--transition-duration) var(--transition-timing),
              border-color var(--transition-duration) var(--transition-timing),
              box-shadow var(--transition-duration) var(--transition-timing);
}

.panel-card {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(var(--color-neutral-200), 0.85) !important;
  box-shadow: none;
}

#past-section.panel-card {
  background: rgba(254, 242, 242, 0.9);
  border-color: rgba(248, 113, 113, 0.35) !important;
}

#today-section.panel-card {
  background: rgba(240, 253, 244, 0.92);
  border-color: rgba(34, 197, 94, 0.3) !important;
}

#future-section.panel-card {
  background: rgba(239, 246, 255, 0.92);
  border-color: rgba(59, 130, 246, 0.3) !important;
}

.sidebar-card {
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(var(--color-neutral-200), 0.85) !important;
  box-shadow: none;
}

.calendar-card {
  background: rgba(255, 255, 255, 0.94);
  border-color: rgba(var(--color-neutral-200), 0.85) !important;
  box-shadow: none;
}

.stats-card {
  background: rgba(255, 255, 255, 0.94);
  border-color: rgba(var(--color-neutral-200), 0.85) !important;
  box-shadow: none;
}

.dark .panel-card {
  background: linear-gradient(135deg, rgba(21, 24, 33, 0.95), rgba(18, 21, 30, 0.92));
  border-color: rgba(71, 85, 105, 0.35) !important;
  box-shadow: none;
}

.dark #past-section.panel-card {
  background: linear-gradient(135deg, rgba(58, 13, 25, 0.9), rgba(33, 10, 18, 0.95));
  border-color: rgba(248, 113, 113, 0.45) !important;
}

.dark #today-section.panel-card {
  background: linear-gradient(135deg, rgba(9, 37, 24, 0.9), rgba(6, 24, 15, 0.95));
  border-color: rgba(74, 222, 128, 0.45) !important;
}

.dark #future-section.panel-card {
  background: linear-gradient(135deg, rgba(15, 34, 63, 0.9), rgba(10, 23, 45, 0.95));
  border-color: rgba(96, 165, 250, 0.45) !important;
}

.dark .sidebar-card {
  background: linear-gradient(160deg, rgba(11, 16, 30, 0.98), rgba(7, 10, 20, 0.95));
  border-color: rgba(51, 65, 85, 0.4) !important;
  box-shadow: none;
}

.dark .calendar-card {
  background: rgba(6, 10, 22, 0.96);
  box-shadow: none;
}

.dark .stats-card {
  background: linear-gradient(150deg, rgba(7, 11, 24, 0.98), rgba(4, 7, 16, 0.95));
  box-shadow: none;
}

.dark .past-reminder {
  opacity: 0.85;
}

.past-reminder .reminder-title {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: rgba(107, 114, 128, 0.8);
}

.past-reminder .reminder-description {
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  text-decoration-color: rgba(107, 114, 128, 0.7);
}

/* Enhanced dark mode strikethrough visibility */
.dark .past-reminder .reminder-title {
  text-decoration-color: rgba(156, 163, 175, 0.9);
  text-decoration-thickness: 2px;
}

.dark .past-reminder .reminder-description {
  text-decoration-color: rgba(156, 163, 175, 0.8);
  text-decoration-thickness: 1.5px;
}

/* Enhanced past reminder background for dark mode */
.dark .past-reminder {
  background: rgba(75, 85, 99, 0.2) !important;
  border-left-color: #6B7280;
}

/* Responsive Design Improvements */
@container (max-width: 768px) {
  .reminder-item {
    padding: 1.25rem;
    margin-bottom: 1rem;
  }
  
  .reminder-meta {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  
  .reminder-item button {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 0.85rem;
  }
  
  .collapsible-header {
    padding: 1rem 1.25rem;
  }
  
  .reminder-title {
    font-size: 1rem;
  }
  
  .card {
    margin-bottom: 1.5rem;
  }
  
  h1 {
    font-size: 2rem;
  }
}

@media (max-width: 640px) {
  .reminder-item {
    padding: 1rem;
  }
  
  .reminder-meta {
    gap: 0.4rem;
  }
  
  .reminder-meta-item {
    padding: 0.3rem 0.6rem;
    font-size: 0.7rem;
  }
  
  .priority-badge {
    padding: 0.25rem 0.6rem;
    font-size: 0.65rem;
  }
}

/* Accessibility Improvements */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
  .border {
    border-width: 2px;
  }
  
  .text-gray-500 {
    color: var(--text-primary);
  }
}

/* Print Optimizations */
@media print {
  .no-print { 
    display: none !important; 
  }
  
  body { 
    color: black !important;
    background: white !important;
    font-size: 12pt;
    line-height: 1.4;
  }
  
  .reminder-item { 
    border: 1px solid #333;
    margin-bottom: 0.5rem;
    padding: 0.5rem;
    page-break-inside: avoid;
    break-inside: avoid;
  }
  
  /* Ensure dark mode styles don't affect print */
  * {
    color: black !important;
    background: white !important;
  }
}

/* Loading States for Better UX */
.skeleton {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  background-color: rgb(var(--color-neutral-200));
  border-radius: var(--border-radius);
}

.dark .skeleton {
  background-color: rgb(var(--color-neutral-700));
}

.skeleton::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  animation: shimmer 2s infinite;
}

/* Dark mode improvements with better contrast ratios */
.dark .modal-content {
  background-color: rgb(243, 244, 246); /* gray-100 */
  color: rgb(17, 24, 39) !important; /* gray-900 */
}

.dark .modal-content *:not(.btn-primary):not(.bg-red-600):not(.bg-green-600) {
  color: rgb(17, 24, 39) !important; /* Force dark text for readability */
}

/* Fix input field visibility in dark mode modals */
.dark .modal-content input[type="text"],
.dark .modal-content input[type="password"], 
.dark .modal-content input[type="email"],
.dark .modal-content input[type="datetime-local"],
.dark .modal-content textarea,
.dark .modal-content select {
  background-color: rgb(255, 255, 255) !important; /* White background */
  border-color: rgb(209, 213, 219) !important; /* gray-300 border */
  color: rgb(17, 24, 39) !important; /* Dark text for contrast */
}

.dark .modal-content input[type="text"]:focus,
.dark .modal-content input[type="password"]:focus,
.dark .modal-content input[type="email"]:focus,
.dark .modal-content input[type="datetime-local"]:focus,
.dark .modal-content textarea:focus,
.dark .modal-content select:focus {
  background-color: rgb(255, 255, 255) !important; /* Keep white background on focus */
  border-color: rgb(var(--color-primary-600)) !important; /* Primary color border on focus */
  color: rgb(17, 24, 39) !important; /* Keep dark text on focus */
  box-shadow: 0 0 0 3px rgba(var(--color-primary-600), 0.1) !important;
}

/* Fix placeholder text visibility in dark mode modals */
.dark .modal-content input::placeholder,
.dark .modal-content textarea::placeholder {
  color: rgb(107, 114, 128) !important; /* gray-500 for placeholder */
}

/* Fix labels in dark mode modals */
.dark .modal-content label {
  color: rgb(17, 24, 39) !important; /* Dark text for labels */
}

/* Enhanced Recurrence and Selection Button Styling */
.recurrence-type-btn,
.repeat-on-btn {
  padding: 0.75rem 1rem;
  border: 2px solid rgb(209, 213, 219); /* gray-300 */
  border-radius: var(--border-radius);
  background-color: rgb(255, 255, 255);
  color: rgb(75, 85, 99); /* gray-600 */
  font-weight: 500;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all var(--transition-duration) var(--transition-timing);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 80px;
}

.recurrence-type-btn:hover,
.repeat-on-btn:hover {
  border-color: rgb(115, 140, 61); /* fallback sage color */
  background-color: rgb(230, 235, 227); /* fallback sage light */
  color: rgb(83, 106, 68); /* fallback sage dark */
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.recurrence-type-btn.selected,
.repeat-on-btn.selected,
.recurrence-type-btn.active,
.repeat-on-btn.active {
  background-color: rgb(115, 140, 61) !important; /* fallback sage color */
  border-color: rgb(115, 140, 61) !important; /* fallback sage color */
  color: white !important;
  font-weight: 600;
  box-shadow: var(--shadow-md);
}

/* Dark mode styles for recurrence buttons */
.dark .modal-content .recurrence-type-btn,
.dark .modal-content .repeat-on-btn {
  background-color: rgb(55, 65, 81) !important; /* gray-700 */
  border-color: rgb(75, 85, 99) !important; /* gray-600 */
  color: rgb(243, 244, 246) !important; /* gray-100 */
}

.dark .modal-content .recurrence-type-btn:hover,
.dark .modal-content .repeat-on-btn:hover {
  border-color: rgb(115, 140, 61) !important; /* fallback sage color */
  background-color: rgb(75, 85, 99) !important; /* gray-600 */
  color: rgb(255, 255, 255) !important; /* white */
}

.dark .modal-content .recurrence-type-btn.selected,
.dark .modal-content .repeat-on-btn.selected,
.dark .modal-content .recurrence-type-btn.active,
.dark .modal-content .repeat-on-btn.active {
  background-color: rgb(115, 140, 61) !important; /* fallback sage color */
  border-color: rgb(115, 140, 61) !important; /* fallback sage color */
  color: white !important;
}

/* Enhanced checkbox styling in modals */
.dark .modal-content input[type="checkbox"] {
  width: 1.25rem;
  height: 1.25rem;
  accent-color: rgb(var(--color-primary-600));
  cursor: pointer;
}

/* Weekday selection buttons styling - consistent with recurrence buttons */
.weekday-btn {
  padding: 0.75rem 0.5rem;
  border: 2px solid rgb(209, 213, 219); /* gray-300 */
  border-radius: var(--border-radius);
  background-color: rgb(255, 255, 255);
  color: rgb(75, 85, 99); /* gray-600 */
  font-weight: 500;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all var(--transition-duration) var(--transition-timing);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 50px;
  min-height: 44px;
  text-align: center;
  user-select: none;
  -webkit-user-select: none;
}

.weekday-btn:hover {
  border-color: rgb(115, 140, 61); /* fallback sage color */
  background-color: rgb(230, 235, 227); /* fallback sage light */
  color: rgb(83, 106, 68); /* fallback sage dark */
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.weekday-btn.selected {
  background-color: rgb(115, 140, 61) !important; /* fallback sage color */
  border-color: rgb(115, 140, 61) !important; /* fallback sage color */
  color: white !important;
  font-weight: 600;
  box-shadow: var(--shadow-md);
}

/* Fallback for browsers that support :has() selector */
@supports selector(:has(*)) {
  .weekday-btn:has(input[name="weekdays"]:checked) {
    background-color: rgb(115, 140, 61) !important; /* fallback sage color */
    border-color: rgb(115, 140, 61) !important; /* fallback sage color */
    color: white !important;
    font-weight: 600;
    box-shadow: var(--shadow-md);
  }
}

/* Dark mode styles for weekday buttons - ensure proper contrast in modal */
.dark .modal-content .weekday-btn {
  background-color: rgb(55, 65, 81) !important; /* gray-700 */
  border-color: rgb(75, 85, 99) !important; /* gray-600 */
  color: rgb(243, 244, 246) !important; /* gray-100 */
}

.dark .modal-content .weekday-btn:hover {
  border-color: rgb(115, 140, 61) !important; /* fallback sage color */
  background-color: rgb(75, 85, 99) !important; /* gray-600 */
  color: rgb(255, 255, 255) !important; /* white */
}

.dark .modal-content .weekday-btn.selected {
  background-color: rgb(115, 140, 61) !important; /* fallback sage color */
  border-color: rgb(115, 140, 61) !important; /* fallback sage color */
  color: white !important;
}

/* Dark mode fallback for browsers that support :has() selector */
@supports selector(:has(*)) {
  .dark .modal-content .weekday-btn:has(input[name="weekdays"]:checked) {
    background-color: rgb(115, 140, 61) !important; /* fallback sage color */
    border-color: rgb(115, 140, 61) !important; /* fallback sage color */
    color: white !important;
  }
}

/* Hide the checkbox but keep it accessible */
.weekday-btn input[name="weekdays"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Enhanced Button System with New Colors */
.btn-primary {
  background-color: rgb(var(--color-primary-600));
  color: white;
  border: 1px solid transparent;
  padding: 0.5rem 1rem;
  border-radius: var(--border-radius);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--transition-duration) var(--transition-timing);
}

.btn-primary:hover {
  background-color: rgb(var(--color-primary-700));
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn-primary:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}

.btn-primary:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--color-primary-500), 0.3);
}

.btn-primary:disabled {
  background-color: rgb(var(--color-neutral-400));
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.btn-secondary {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border-primary);
  padding: 0.5rem 1rem;
  border-radius: var(--border-radius);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--transition-duration) var(--transition-timing);
}

.btn-secondary:hover {
  background-color: var(--bg-tertiary);
  border-color: var(--border-secondary);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.btn-secondary:active {
  transform: translateY(0);
}

.btn-secondary:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--color-neutral-500), 0.3);
}

.btn-secondary:disabled {
  background-color: rgb(var(--color-neutral-300));
  color: rgb(var(--color-neutral-500));
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Enhanced Form Controls */
.form-checkbox {
  height: 1rem;
  width: 1rem;
  color: rgb(var(--color-primary-600));
  border: 1px solid rgb(var(--color-neutral-300));
  border-radius: var(--border-radius-sm);
  background-color: var(--bg-secondary);
  transition: all var(--transition-duration) var(--transition-timing);
}

.form-checkbox:focus {
  box-shadow: 0 0 0 3px rgba(var(--color-primary-600), 0.3);
  outline: none;
}

.dark .form-checkbox {
  border-color: rgb(var(--color-neutral-600));
  background-color: rgb(var(--color-neutral-700));
}

.dark .form-checkbox:focus {
  box-shadow: 0 0 0 3px rgba(var(--color-primary-600), 0.3);
}

/* Enhanced Navigation Styles */
.tab-navigation {
  display: flex;
  overflow-x: auto;
  scrollbar-width: thin;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  border-bottom: 1px solid var(--border-primary);
}

.tab-button {
  padding: 0.75rem 1rem;
  border: none;
  background: none;
  color: var(--text-secondary);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all var(--transition-duration) var(--transition-timing);
  white-space: nowrap;
  font-weight: 500;
}

.tab-button:hover {
  color: var(--text-primary);
  background-color: var(--bg-tertiary);
}

.tab-button.active {
  color: rgb(var(--color-primary-600));
  border-bottom-color: rgb(var(--color-primary-600));
}

.dark .tab-button.active {
  color: rgb(var(--color-primary-400));
  border-bottom-color: rgb(var(--color-primary-400));
}

/* Enhanced Cards and Containers */
.card {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: var(--border-radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-duration) var(--transition-timing);
}

.card:hover {
  box-shadow: var(--shadow-md);
  border-color: rgb(var(--color-primary-200));
}

.dark .card:hover {
  border-color: rgb(var(--color-primary-700));
}

/* Enhanced Alert Styles */
.alert {
  padding: 1rem;
  border-radius: var(--border-radius);
  border: 1px solid;
  margin-bottom: 1rem;
}

.alert-success {
  background-color: rgb(var(--color-success-50));
  border-color: rgb(var(--color-success-200));
  color: rgb(var(--color-success-800));
}

.alert-warning {
  background-color: rgb(var(--color-warning-50));
  border-color: rgb(var(--color-warning-200));
  color: rgb(var(--color-warning-800));
}

.alert-error {
  background-color: rgb(var(--color-error-50));
  border-color: rgb(var(--color-error-200));
  color: rgb(var(--color-error-800));
}

.dark .alert-success {
  background-color: rgb(var(--color-success-950));
  border-color: rgb(var(--color-success-800));
  color: rgb(var(--color-success-200));
}

.dark .alert-warning {
  background-color: rgb(var(--color-warning-950));
  border-color: rgb(var(--color-warning-800));
  color: rgb(var(--color-warning-200));
}

.dark .alert-error {
  background-color: rgb(var(--color-error-950));
  border-color: rgb(var(--color-error-800));
  color: rgb(var(--color-error-200));
}

/* Enhanced Form Input Styles */
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
textarea:focus,
select:focus {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

/* Improve form field contrast in dark mode */
.dark input[type="text"],
.dark input[type="password"], 
.dark input[type="email"],
.dark textarea,
.dark select {
  background-color: #374151 !important;
  border-color: #4b5563 !important;
  color: #f9fafb !important;
}

.dark input[type="text"]:focus,
.dark input[type="password"]:focus,
.dark input[type="email"]:focus,
.dark textarea:focus,
.dark select:focus {
  background-color: #374151 !important;
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2) !important;
}

/* Login Form Specific Enhancements */
#login-form input {
  transition: all 0.2s ease-in-out;
}

#login-form .btn-primary {
  transform: scale(1);
  transition: all 0.2s ease-in-out;
}

#login-form .btn-primary:hover {
  transform: scale(1.02);
}

#login-form .btn-primary:active {
  transform: scale(0.98);
}

/* Ensure password toggle button doesn't interfere with field styling */
#toggle-password {
  z-index: 10;
}

/* Improve focus visibility */
#toggle-password:focus {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Polished Card Styles */
.login-card, .register-card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.dark .login-card, .dark .register-card {
  background: rgba(31, 41, 55, 0.95);
  border: 1px solid rgba(75, 85, 99, 0.3);
}

/* Enhanced Form Field Icons */
.form-field-icon {
  transition: color 0.2s ease-in-out;
}

input:focus + .form-field-icon,
input:focus ~ .form-field-icon {
  color: #3b82f6 !important;
}



/* Color scheme selection */
.color-scheme-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 8px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #f9fafb;
}

@media (min-width: 768px) {
    .color-scheme-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.dark .color-scheme-grid {
    border-color: #374151;
    background: #1f2937;
}

.color-scheme-option {
    cursor: pointer;
    display: block;
}

.color-scheme-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.color-scheme-card {
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    padding: 16px;
    transition: all 0.2s ease;
    background: #ffffff;
    min-height: 80px;
    display: block;
}

.dark .color-scheme-card {
    border-color: #374151;
    background: #1f2937;
}

.color-scheme-option:hover .color-scheme-card {
    border-color: #9ca3af;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.color-scheme-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.color-circle {
    width: 24px;
    height: 24px;
    border-radius: 50%;
}

.color-scheme-name {
    font-size: 14px;
    font-weight: 500;
    color: #111827;
}

.dark .color-scheme-name {
    color: #f9fafb;
}

.color-swatches {
    display: flex;
    gap: 4px;
}

.color-swatch {
    width: 16px;
    height: 16px;
    border-radius: 4px;
}

/* Blue color scheme */
.blue-primary { background-color: #3b82f6; }
.blue-light { background-color: #dbeafe; }
.blue-medium { background-color: #93c5fd; }
.blue-dark { background-color: #1d4ed8; }

/* Forest Green color scheme */
.forest-primary { background-color: #225a31; }
.forest-light { background-color: #d1f2db; }
.forest-medium { background-color: #48cc5e; }
.forest-dark { background-color: #164623; }

/* Lavender Purple color scheme */
.lavender-primary { background-color: #8b5fbf; }
.lavender-light { background-color: #f3e8ff; }
.lavender-medium { background-color: #c084fc; }
.lavender-dark { background-color: #6d28d9; }

/* Coral Pink color scheme */
.coral-primary { background-color: #f472b6; }
.coral-light { background-color: #fdf2f8; }
.coral-medium { background-color: #f9a8d4; }
.coral-dark { background-color: #be185d; }

/* Sunset Orange color scheme */
.sunset-primary { background-color: #ea580c; }
.sunset-light { background-color: #fed7aa; }
.sunset-medium { background-color: #fb923c; }
.sunset-dark { background-color: #c2410c; }

/* Ocean Blue color scheme */
.ocean-primary { background-color: #0e7490; }
.ocean-light { background-color: #cffafe; }
.ocean-medium { background-color: #22d3ee; }
.ocean-dark { background-color: #08586c; }



/* Sage color scheme */
.sage-primary { background-color: #6b8359; }
.sage-light { background-color: #e6ebe3; }
.sage-medium { background-color: #87a076; }
.sage-dark { background-color: #536a44; }

/* Midnight Blue color scheme */
.midnight-primary { background-color: #1e3a8a; }
.midnight-light { background-color: #dbeafe; }
.midnight-medium { background-color: #3b82f6; }
.midnight-dark { background-color: #1e40af; }

/* Brown color scheme */
.brown-primary { background-color: #8b5a3c; }
.brown-light { background-color: #f3e8d8; }
.brown-medium { background-color: #a0724e; }
.brown-dark { background-color: #6f4e2a; }

/* Selected state styling */
.color-scheme-option input[type="radio"]:checked + .color-scheme-card {
    border-color: #3b82f6;
    background-color: rgba(59, 130, 246, 0.05);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}



.color-scheme-option input[value="sage"]:checked + .color-scheme-card {
    border-color: #6b8359;
    background-color: rgba(107, 131, 89, 0.05);
    box-shadow: 0 0 0 3px rgba(107, 131, 89, 0.1);
}

.color-scheme-option input[value="cyan"]:checked + .color-scheme-card {
    border-color: #0891b2;
    background-color: rgba(8, 145, 178, 0.05);
    box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.1);
}

.color-scheme-option input[value="brown"]:checked + .color-scheme-card {
    border-color: #8b5a3c;
    background-color: rgba(139, 90, 60, 0.05);
    box-shadow: 0 0 0 3px rgba(139, 90, 60, 0.1);
}

/* Dark mode selected states */
.dark .color-scheme-option input[type="radio"]:checked + .color-scheme-card {
    background-color: rgba(59, 130, 246, 0.1);
}



.dark .color-scheme-option input[value="sage"]:checked + .color-scheme-card {
    background-color: rgba(107, 131, 89, 0.1);
}



.dark .color-scheme-option input[value="brown"]:checked + .color-scheme-card {
    background-color: rgba(139, 90, 60, 0.1);
}

/* Dynamic color scheme theming */
:root {
    --primary-rgb: 59, 130, 246;
    --accent-rgb: 37, 99, 235;
}

/* Theme-specific button and accent colors */
.theme-blue .btn-primary,
.theme-blue button[type="submit"],
.theme-blue .bg-blue-600,
.theme-blue .bg-blue-500 {
    background-color: rgb(59, 130, 246) !important;
    border-color: rgb(59, 130, 246) !important;
    color: white !important;
}

.theme-blue .btn-primary:hover,
.theme-blue button[type="submit"]:hover,
.theme-blue .hover\\:bg-blue-700:hover {
    background-color: rgb(37, 99, 235) !important;
    border-color: rgb(37, 99, 235) !important;
}

.theme-blue .text-blue-600,
.theme-blue .text-blue-500,
.theme-blue a:not(.no-theme-color) {
    color: rgb(59, 130, 246) !important;
}

.theme-blue .ring-blue-500,
.theme-blue .focus\\:ring-blue-500:focus {
    --tw-ring-color: rgb(59, 130, 246) !important;
}

/* Forest Green Theme */
.theme-forest .btn-primary,
.theme-forest button[type="submit"],
.theme-forest .bg-blue-600,
.theme-forest .bg-blue-500 {
    background-color: rgb(34, 90, 49) !important;
    border-color: rgb(34, 90, 49) !important;
    color: white !important;
}

.theme-forest .btn-primary:hover,
.theme-forest button[type="submit"]:hover,
.theme-forest .hover\\:bg-blue-700:hover {
    background-color: rgb(22, 70, 35) !important;
    border-color: rgb(22, 70, 35) !important;
}

.theme-forest .text-blue-600,
.theme-forest .text-blue-500,
.theme-forest a:not(.no-theme-color) {
    color: rgb(34, 90, 49) !important;
}

.theme-forest .ring-blue-500,
.theme-forest .focus\\:ring-blue-500:focus {
    --tw-ring-color: rgb(34, 90, 49) !important;
}

/* Lavender Purple Theme */
.theme-lavender .btn-primary,
.theme-lavender button[type="submit"],
.theme-lavender .bg-blue-600,
.theme-lavender .bg-blue-500 {
    background-color: rgb(139, 95, 191) !important;
    border-color: rgb(139, 95, 191) !important;
    color: white !important;
}

.theme-lavender .btn-primary:hover,
.theme-lavender button[type="submit"]:hover,
.theme-lavender .hover\\:bg-blue-700:hover {
    background-color: rgb(109, 40, 217) !important;
    border-color: rgb(109, 40, 217) !important;
}

.theme-lavender .text-blue-600,
.theme-lavender .text-blue-500,
.theme-lavender a:not(.no-theme-color) {
    color: rgb(139, 95, 191) !important;
}

.theme-lavender .ring-blue-500,
.theme-lavender .focus\\:ring-blue-500:focus {
    --tw-ring-color: rgb(139, 95, 191) !important;
}

/* Ocean Blue Theme */
.theme-ocean .btn-primary,
.theme-ocean button[type="submit"],
.theme-ocean .bg-blue-600,
.theme-ocean .bg-blue-500 {
    background-color: rgb(14, 116, 144) !important;
    border-color: rgb(14, 116, 144) !important;
    color: white !important;
}

.theme-ocean .btn-primary:hover,
.theme-ocean button[type="submit"]:hover,
.theme-ocean .hover\\:bg-blue-700:hover {
    background-color: rgb(8, 88, 108) !important;
    border-color: rgb(8, 88, 108) !important;
}

.theme-ocean .text-blue-600,
.theme-ocean .text-blue-500,
.theme-ocean a:not(.no-theme-color) {
    color: rgb(14, 116, 144) !important;
}

.theme-ocean .ring-blue-500,
.theme-ocean .focus\\:ring-blue-500:focus {
    --tw-ring-color: rgb(14, 116, 144) !important;
}

.theme-green .btn-primary,
.theme-green button[type="submit"],
.theme-green .bg-blue-600,
.theme-green .bg-blue-500 {
    background-color: rgb(5, 150, 105) !important;
    border-color: rgb(5, 150, 105) !important;
    color: white !important;
}

.theme-green .btn-primary:hover,
.theme-green button[type="submit"]:hover,
.theme-green .hover\\:bg-blue-700:hover {
    background-color: rgb(4, 120, 87) !important;
    border-color: rgb(4, 120, 87) !important;
}

.theme-green .text-blue-600,
.theme-green .text-blue-500,
.theme-green a {
    color: rgb(5, 150, 105) !important;
}

.theme-green .ring-blue-500,
.theme-green .focus\\:ring-blue-500:focus {
    --tw-ring-color: rgb(5, 150, 105) !important;
}

.theme-sage .btn-primary,
.theme-sage button[type="submit"],
.theme-sage .bg-blue-600,
.theme-sage .bg-blue-500 {
    background-color: rgb(107, 131, 89) !important;
    border-color: rgb(107, 131, 89) !important;
    color: white !important;
}

.theme-sage .btn-primary:hover,
.theme-sage button[type="submit"]:hover,
.theme-sage .hover\\:bg-blue-700:hover {
    background-color: rgb(83, 106, 68) !important;
    border-color: rgb(83, 106, 68) !important;
}

.theme-sage .text-blue-600,
.theme-sage .text-blue-500,
.theme-sage a:not(.no-theme-color) {
    color: rgb(107, 131, 89) !important;
}

.theme-sage .ring-blue-500,
.theme-sage .focus\\:ring-blue-500:focus {
    --tw-ring-color: rgb(107, 131, 89) !important;
}

.theme-coral .btn-primary,
.theme-coral button[type="submit"],
.theme-coral .bg-blue-600,
.theme-coral .bg-blue-500 {
    background-color: rgb(244, 114, 182) !important;
    border-color: rgb(244, 114, 182) !important;
    color: white !important;
}

.theme-coral .btn-primary:hover,
.theme-coral button[type="submit"]:hover,
.theme-coral .hover\\:bg-blue-700:hover {
    background-color: rgb(190, 24, 93) !important;
    border-color: rgb(190, 24, 93) !important;
}

.theme-coral .text-blue-600,
.theme-coral .text-blue-500,
.theme-coral a:not(.no-theme-color) {
    color: rgb(244, 114, 182) !important;
}

.theme-coral .ring-blue-500,
.theme-coral .focus\\:ring-blue-500:focus {
    --tw-ring-color: rgb(244, 114, 182) !important;
}

.theme-brown .btn-primary,
.theme-brown button[type="submit"],
.theme-brown .bg-blue-600,
.theme-brown .bg-blue-500 {
    background-color: rgb(139, 90, 60) !important;
    border-color: rgb(139, 90, 60) !important;
    color: white !important;
}

.theme-brown .btn-primary:hover,
.theme-brown button[type="submit"]:hover,
.theme-brown .hover\\:bg-blue-700:hover {
    background-color: rgb(111, 78, 42) !important;
    border-color: rgb(111, 78, 42) !important;
}

.theme-brown .text-blue-600,
.theme-brown .text-blue-500,
.theme-brown a:not(.no-theme-color) {
    color: rgb(139, 90, 60) !important;
}

.theme-brown .ring-blue-500,
.theme-brown .focus\\:ring-blue-500:focus {
    --tw-ring-color: rgb(139, 90, 60) !important;
}

.theme-sunset .btn-primary,
.theme-sunset button[type="submit"],
.theme-sunset .bg-blue-600,
.theme-sunset .bg-blue-500 {
    background-color: rgb(234, 88, 12) !important;
    border-color: rgb(234, 88, 12) !important;
    color: white !important;
}

.theme-sunset .btn-primary:hover,
.theme-sunset button[type="submit"]:hover,
.theme-sunset .hover\\:bg-blue-700:hover {
    background-color: rgb(194, 65, 12) !important;
    border-color: rgb(194, 65, 12) !important;
}

.theme-sunset .text-blue-600,
.theme-sunset .text-blue-500,
.theme-sunset a:not(.no-theme-color) {
    color: rgb(234, 88, 12) !important;
}

.theme-sunset .ring-blue-500,
.theme-sunset .focus\\:ring-blue-500:focus {
    --tw-ring-color: rgb(234, 88, 12) !important;
}

.theme-midnight .btn-primary,
.theme-midnight button[type="submit"],
.theme-midnight .bg-blue-600,
.theme-midnight .bg-blue-500 {
    background-color: rgb(30, 58, 138) !important;
    border-color: rgb(30, 58, 138) !important;
    color: white !important;
}

.theme-midnight .btn-primary:hover,
.theme-midnight button[type="submit"]:hover,
.theme-midnight .hover\\:bg-blue-700:hover {
    background-color: rgb(30, 64, 175) !important;
    border-color: rgb(30, 64, 175) !important;
}

.theme-midnight .text-blue-600,
.theme-midnight .text-blue-500,
.theme-midnight a:not(.no-theme-color) {
    color: rgb(30, 58, 138) !important;
}

.theme-midnight .ring-blue-500,
.theme-midnight .focus\\:ring-blue-500:focus {
    --tw-ring-color: rgb(30, 58, 138) !important;
}

/* Theme-specific styles for recurrence and selection buttons */

/* Blue Theme - Maximum Specificity Override */
html body.theme-blue .recurrence-type-btn.selected,
html body.theme-blue .repeat-on-btn.selected,
html body.theme-blue .weekday-btn.selected,
html body.theme-blue .modal-content .recurrence-type-btn.selected,
html body.theme-blue .modal-content .repeat-on-btn.selected,
html body.theme-blue .modal-content .weekday-btn.selected,
html body.theme-blue.light .modal-content .recurrence-type-btn.selected,
html body.theme-blue.light .modal-content .repeat-on-btn.selected,
html body.theme-blue.light .modal-content .weekday-btn.selected,
html body.theme-blue .dark .modal-content .recurrence-type-btn.selected,
html body.theme-blue .dark .modal-content .repeat-on-btn.selected,
html body.theme-blue .dark .modal-content .weekday-btn.selected {
    background-color: rgb(59, 130, 246) !important;
    border-color: rgb(59, 130, 246) !important;
    color: white !important;
    font-weight: 600 !important;
    box-shadow: var(--shadow-md) !important;
}

html body.theme-blue .recurrence-type-btn:hover,
html body.theme-blue .repeat-on-btn:hover,
html body.theme-blue .weekday-btn:hover,
html body.theme-blue .modal-content .recurrence-type-btn:hover,
html body.theme-blue .modal-content .repeat-on-btn:hover,
html body.theme-blue .modal-content .weekday-btn:hover,
html body.theme-blue.light .modal-content .recurrence-type-btn:hover,
html body.theme-blue.light .modal-content .repeat-on-btn:hover,
html body.theme-blue.light .modal-content .weekday-btn:hover,
html body.theme-blue .dark .modal-content .recurrence-type-btn:hover,
html body.theme-blue .dark .modal-content .repeat-on-btn:hover,
html body.theme-blue .dark .modal-content .weekday-btn:hover {
    border-color: rgb(59, 130, 246) !important;
    background-color: rgb(219, 234, 254) !important;
    color: rgb(37, 99, 235) !important;
}

/* Forest Theme */
.theme-forest .recurrence-type-btn.selected,
.theme-forest .repeat-on-btn.selected,
.theme-forest .weekday-btn.selected {
    background-color: rgb(34, 90, 49) !important;
    border-color: rgb(34, 90, 49) !important;
}

.theme-forest .recurrence-type-btn:hover,
.theme-forest .repeat-on-btn:hover,
.theme-forest .weekday-btn:hover {
    border-color: rgb(34, 90, 49) !important;
    background-color: rgb(209, 242, 219) !important;
    color: rgb(22, 70, 35) !important;
}

/* Lavender Theme */
.theme-lavender .recurrence-type-btn.selected,
.theme-lavender .repeat-on-btn.selected,
.theme-lavender .weekday-btn.selected {
    background-color: rgb(139, 95, 191) !important;
    border-color: rgb(139, 95, 191) !important;
}

.theme-lavender .recurrence-type-btn:hover,
.theme-lavender .repeat-on-btn:hover,
.theme-lavender .weekday-btn:hover {
    border-color: rgb(139, 95, 191) !important;
    background-color: rgb(243, 232, 255) !important;
    color: rgb(109, 40, 217) !important;
}

/* Ocean Theme */
.theme-ocean .recurrence-type-btn.selected,
.theme-ocean .repeat-on-btn.selected,
.theme-ocean .weekday-btn.selected {
    background-color: rgb(14, 116, 144) !important;
    border-color: rgb(14, 116, 144) !important;
}

.theme-ocean .recurrence-type-btn:hover,
.theme-ocean .repeat-on-btn:hover,
.theme-ocean .weekday-btn:hover {
    border-color: rgb(14, 116, 144) !important;
    background-color: rgb(207, 250, 254) !important;
    color: rgb(8, 88, 108) !important;
}

/* Green Theme */
.theme-green .recurrence-type-btn.selected,
.theme-green .repeat-on-btn.selected,
.theme-green .weekday-btn.selected {
    background-color: rgb(5, 150, 105) !important;
    border-color: rgb(5, 150, 105) !important;
}

.theme-green .recurrence-type-btn:hover,
.theme-green .repeat-on-btn:hover,
.theme-green .weekday-btn:hover {
    border-color: rgb(5, 150, 105) !important;
    background-color: rgb(167, 243, 208) !important;
    color: rgb(4, 120, 87) !important;
}

/* Sage Theme */
.theme-sage .recurrence-type-btn.selected,
.theme-sage .repeat-on-btn.selected,
.theme-sage .weekday-btn.selected {
    background-color: rgb(107, 131, 89) !important;
    border-color: rgb(107, 131, 89) !important;
}

.theme-sage .recurrence-type-btn:hover,
.theme-sage .repeat-on-btn:hover,
.theme-sage .weekday-btn:hover {
    border-color: rgb(107, 131, 89) !important;
    background-color: rgb(230, 235, 227) !important;
    color: rgb(83, 106, 68) !important;
}

/* Coral Theme */
.theme-coral .recurrence-type-btn.selected,
.theme-coral .repeat-on-btn.selected,
.theme-coral .weekday-btn.selected {
    background-color: rgb(244, 114, 182) !important;
    border-color: rgb(244, 114, 182) !important;
}

.theme-coral .recurrence-type-btn:hover,
.theme-coral .repeat-on-btn:hover,
.theme-coral .weekday-btn:hover {
    border-color: rgb(244, 114, 182) !important;
    background-color: rgb(253, 242, 248) !important;
    color: rgb(190, 24, 93) !important;
}

/* Sunset Theme */
.theme-sunset .recurrence-type-btn.selected,
.theme-sunset .repeat-on-btn.selected,
.theme-sunset .weekday-btn.selected {
    background-color: rgb(234, 88, 12) !important;
    border-color: rgb(234, 88, 12) !important;
}

.theme-sunset .recurrence-type-btn:hover,
.theme-sunset .repeat-on-btn:hover,
.theme-sunset .weekday-btn:hover {
    border-color: rgb(234, 88, 12) !important;
    background-color: rgb(254, 215, 170) !important;
    color: rgb(194, 65, 12) !important;
}

/* Midnight Theme */
.theme-midnight .recurrence-type-btn.selected,
.theme-midnight .repeat-on-btn.selected,
.theme-midnight .weekday-btn.selected {
    background-color: rgb(30, 58, 138) !important;
    border-color: rgb(30, 58, 138) !important;
}

.theme-midnight .recurrence-type-btn:hover,
.theme-midnight .repeat-on-btn:hover,
.theme-midnight .weekday-btn:hover {
    border-color: rgb(30, 58, 138) !important;
    background-color: rgb(219, 234, 254) !important;
    color: rgb(30, 64, 175) !important;
}

/* Theme support for :has() selector - Maximum Specificity */
@supports selector(:has(*)) {
  html body.theme-blue .weekday-btn:has(input[name="weekdays"]:checked),
  html body.theme-blue .modal-content .weekday-btn:has(input[name="weekdays"]:checked),
  html body.theme-blue.light .modal-content .weekday-btn:has(input[name="weekdays"]:checked),
  html body.theme-blue .dark .modal-content .weekday-btn:has(input[name="weekdays"]:checked) {
    background-color: rgb(59, 130, 246) !important;
    border-color: rgb(59, 130, 246) !important;
    color: white !important;
    font-weight: 600 !important;
    box-shadow: var(--shadow-md) !important;
  }
}



/* Dark mode theme overrides for modal buttons */
.dark .modal-content .theme-blue .recurrence-type-btn.selected,
.dark .modal-content .theme-blue .repeat-on-btn.selected,
.dark .modal-content .theme-blue .weekday-btn.selected {
    background-color: rgb(59, 130, 246) !important;
    border-color: rgb(59, 130, 246) !important;
    color: white !important;
}

.dark .modal-content .theme-blue .recurrence-type-btn:hover,
.dark .modal-content .theme-blue .repeat-on-btn:hover,
.dark .modal-content .theme-blue .weekday-btn:hover {
    border-color: rgb(59, 130, 246) !important;
    background-color: rgb(219, 234, 254) !important;
    color: rgb(37, 99, 235) !important;
}

/* Dark mode :has() selector support for blue theme */
@supports selector(:has(*)) {
  .dark .modal-content .theme-blue .weekday-btn:has(input[name="weekdays"]:checked) {
    background-color: rgb(59, 130, 246) !important;
    border-color: rgb(59, 130, 246) !important;
    color: white !important;
  }
}

/* Additional dark mode theme support for other themes can be added as needed */

/* Modern Collapsible Section Styling */
.collapsible-header {
  cursor: pointer;
  transition: all var(--transition-duration) var(--transition-timing);
  background: linear-gradient(135deg, rgba(var(--color-neutral-50), 0.8), rgba(var(--color-neutral-100), 0.4));
  border-radius: 12px 12px 0 0;
  padding: 1.25rem 1.5rem;
  margin-bottom: 0;
  border: 1px solid rgba(var(--color-neutral-200), 0.5);
  border-bottom: none;
  backdrop-filter: blur(8px);
}

/* When section is expanded, content should connect seamlessly */
section:not(.collapsed) {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(var(--color-neutral-200), 0.5);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7));
  backdrop-filter: blur(12px);
}

section:not(.collapsed) .collapsible-header {
  border-radius: 12px 12px 0 0;
  border-bottom: 1px solid rgba(var(--color-neutral-200), 0.3);
  background: linear-gradient(135deg, rgba(var(--color-neutral-50), 0.8), rgba(var(--color-neutral-100), 0.4));
}

section:not(.collapsed) .collapsible-content {
  border-radius: 0 0 12px 12px;
  background: rgba(255, 255, 255, 0.5);
}

.dark section:not(.collapsed) {
  background: linear-gradient(135deg, rgba(var(--color-neutral-800), 0.9), rgba(var(--color-neutral-700), 0.7));
  border-color: rgba(var(--color-neutral-600), 0.5);
}

.dark section:not(.collapsed) .collapsible-header {
  background: linear-gradient(135deg, rgba(var(--color-neutral-800), 0.8), rgba(var(--color-neutral-700), 0.4));
  border-color: rgba(var(--color-neutral-600), 0.5);
}

.dark section:not(.collapsed) .collapsible-content {
  background: rgba(var(--color-neutral-800), 0.3);
}

.collapsible-header:hover {
  background: linear-gradient(135deg, rgba(var(--color-primary-50), 0.9), rgba(var(--color-primary-100), 0.6));
  border-color: rgba(var(--color-primary-300), 0.4);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.dark .collapsible-header {
  background: linear-gradient(135deg, rgba(var(--color-neutral-800), 0.8), rgba(var(--color-neutral-700), 0.4));
  border-color: rgba(var(--color-neutral-600), 0.5);
}

.dark .collapsible-header:hover {
  background: linear-gradient(135deg, rgba(var(--color-primary-800), 0.6), rgba(var(--color-primary-700), 0.4));
  border-color: rgba(var(--color-primary-500), 0.4);
}

.collapse-icon {
  transition: transform var(--transition-duration) var(--transition-timing);
  font-size: 0.9rem;
  opacity: 0.7;
}

.collapsed .collapse-icon {
  transform: rotate(-90deg);
}

/* Section count badges */
.status-overdue, .status-pending {
  font-weight: 600;
  min-width: 1.75rem;
  height: 1.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 0.75rem;
  letter-spacing: 0.025em;
}

/* Section titles */
.collapsible-header h3 {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0;
  letter-spacing: 0.025em;
}

/* Improved Collapsible Section Styling */
.collapsible-content {
  max-height: 1000px;
  overflow: hidden;
  transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
}



.collapsible-content.collapsed {
  max-height: 0;
  opacity: 0;
}

/* Enhanced collapsed section header styling */
.collapsed {
  transition: all 0.3s ease-in-out;
  border-radius: 12px !important;
}

.collapsed .collapsible-header {
  border-bottom: none !important;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  border-radius: 12px !important;
  background: linear-gradient(135deg, rgba(var(--color-neutral-50), 0.8), rgba(var(--color-neutral-100), 0.4)) !important;
  border: 1px solid rgba(var(--color-neutral-200), 0.5) !important;
}

.collapsed .collapsible-header:hover {
  background: linear-gradient(135deg, rgba(var(--color-primary-50), 0.9), rgba(var(--color-primary-100), 0.6)) !important;
  border-color: rgba(var(--color-primary-300), 0.4) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.dark .collapsed .collapsible-header {
  background: linear-gradient(135deg, rgba(var(--color-neutral-800), 0.8), rgba(var(--color-neutral-700), 0.4)) !important;
  border-color: rgba(var(--color-neutral-600), 0.5) !important;
}

.dark .collapsed .collapsible-header:hover {
  background: linear-gradient(135deg, rgba(var(--color-primary-800), 0.6), rgba(var(--color-primary-700), 0.4)) !important;
  border-color: rgba(var(--color-primary-500), 0.4) !important;
}

/* Better spacing for collapsed state */
.collapsed .collapsible-header {
  padding: 1.25rem 1.5rem;
}

.collapsed .collapsible-header h3 {
  margin: 0;
}

/* Improve the count badge in collapsed state */
.collapsed .status-overdue {
  font-weight: 600;
  min-width: 1.5rem;
  height: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
}

/* Show/hide collapsed hint */
.collapsed-hint {
  opacity: 1;
  transition: opacity 0.3s ease-in-out;
}

section:not(.collapsed) .collapsed-hint {
  opacity: 0;
  pointer-events: none;
}

/* Enhanced hover effects for interactive header */
.collapsible-header {
  transition: background-color 0.2s ease-in-out;
}

.collapsible-header:hover {
  background-color: rgba(var(--color-neutral-100), 0.5);
}

.dark .collapsible-header:hover {
  background-color: rgba(var(--color-neutral-700), 0.3);
}

/* Natural Language Processing Input Styles */
.smart-input-container {
  transition: all 0.3s ease;
}

.smart-input:focus {
  border-color: rgb(var(--color-primary-500)) !important;
  box-shadow: 0 0 0 3px rgba(var(--color-primary-500), 0.1) !important;
}

.preview-panel {
  border-left: 4px solid rgb(var(--color-primary-500));
}

#toggle-nlp-input {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  border-radius: var(--border-radius-sm);
  transition: all 0.2s ease;
}

#toggle-nlp-input:hover {
  background-color: rgba(var(--color-primary-500), 0.1);
}

#toggle-nlp-input i {
  transition: transform 0.3s ease;
}

/* Mobile Navigation Styles */
#mobile-username-display {
  max-width: 5rem; /* 80px for better truncation */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}

/* Mobile menu animation */
#mobile-menu {
  transition: all 0.3s ease-in-out;
}

#mobile-menu.hidden {
  transform: translateY(-10px);
  opacity: 0;
}

#mobile-menu:not(.hidden) {
  transform: translateY(0);
  opacity: 1;
}

/* Better mobile button spacing */
#mobile-menu-button {
  min-width: 2.5rem;
  min-height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Mobile theme toggle button improvements */
#mobile-theme-toggle {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

#mobile-theme-toggle:focus {
  outline: none;
}

/* Modal scrolling for small devices */
@media (max-height: 640px), (max-width: 640px) {
  /* Make modal container scrollable on small screens */
  #reminder-modal {
    align-items: flex-start !important;
    padding: 1rem !important;
  }
  
  /* Modal content with scrolling */
  .modal-content {
    max-height: calc(100vh - 2rem) !important;
    overflow-y: auto !important;
    margin: 0 !important;
  }
  
  /* Ensure modal doesn't exceed screen bounds */
  #reminder-modal .modal-content {
    max-width: calc(100vw - 2rem) !important;
  }
  
  /* Better spacing on very small screens */
  @media (max-width: 480px) {
    #reminder-modal {
      padding: 0.5rem !important;
    }
    
    .modal-content {
      max-height: calc(100vh - 1rem) !important;
      border-radius: 0.5rem !important;
      padding: 1rem !important;
    }
    
    /* Reduce form spacing on small screens */
    #reminder-form .space-y-4 > * + * {
      margin-top: 0.75rem !important;
    }
    
    /* Smaller buttons on mobile */
    .recurrence-type-btn,
    .repeat-on-btn {
      padding: 0.5rem 0.75rem !important;
      font-size: 0.875rem !important;
    }
    
    /* Stack buttons vertically on very small screens */
    #reminder-form .flex.space-x-3 {
      flex-direction: column !important;
      gap: 0.5rem !important;
    }
  }
}

/* Better scrollbar styling for modals */
.modal-content::-webkit-scrollbar {
  width: 6px;
}

.modal-content::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 3px;
}

.modal-content::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 3px;
}

.modal-content::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.5);
}

/* Dark mode scrollbar for modals */
.dark .modal-content::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
}

.dark .modal-content::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
}

.dark .modal-content::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
}

/* PWA Specific Styles */

/* Safe area handling for iPhone X and newer */
@supports (padding: max(0px)) {
  body {
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }
  
  nav {
    padding-left: max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
    padding-top: max(0px, env(safe-area-inset-top));
  }
}

/* Standalone display mode styles */
@media (display-mode: standalone) {
  body {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
  }
  
  /* Remove URL bar space compensation */
  .min-h-screen {
    min-height: 100vh;
    min-height: 100dvh; /* Dynamic viewport height */
  }
  
  /* Better touch targets */
  button, .btn, .btn-primary, .btn-secondary {
    min-height: 44px;
    min-width: 44px;
  }
  
  /* Improved scrolling on iOS */
  .overflow-y-auto {
    -webkit-overflow-scrolling: touch;
  }
}

/* Fullscreen mode */
@media (display-mode: fullscreen) {
  nav {
    padding-top: max(8px, env(safe-area-inset-top));
  }
}

/* Window controls overlay (Desktop PWA) */
@media (display-mode: window-controls-overlay) {
  nav {
    -webkit-app-region: drag;
  }
  
  nav button, nav a {
    -webkit-app-region: no-drag;
  }
}

/* Improved touch interactions */
@media (hover: none) and (pointer: coarse) {
  /* Touch device optimizations */
  .hover\:bg-gray-100:hover {
    background-color: rgb(243 244 246) !important;
  }
  
  .dark .hover\:bg-dark-700:hover {
    background-color: rgb(55 65 81) !important;
  }
  
  /* Better focus states for touch */
  button:focus, .btn:focus {
    outline: 2px solid rgb(59, 130, 246);
    outline-offset: 2px;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .bg-white {
    background-color: #ffffff !important;
  }
  
  .text-gray-600 {
    color: #000000 !important;
  }
  
  .border-gray-200 {
    border-color: #000000 !important;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  .fa-spin {
    animation: none !important;
  }
}

/* Network status indicator */
.offline-indicator {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #f59e0b;
  color: white;
  text-align: center;
  padding: 8px;
  z-index: 9999;
  transform: translateY(-100%);
  transition: transform 0.3s ease;
}

.offline-indicator.show {
  transform: translateY(0);
}

/* Better mobile navigation */
@media (max-width: 768px) {
  .nav-mobile {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    border-top: 1px solid #e5e7eb;
    padding: env(safe-area-inset-bottom, 0) 0;
    z-index: 50;
  }
  
  .dark .nav-mobile {
    background: rgb(17, 24, 39);
    border-color: rgb(55, 65, 81);
  }
  
  /* Compensate for bottom navigation */
  .main-content {
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0));
  }
}

/* Dark mode specific: Ensure selected weekday buttons always have white text for all themes */
.dark .weekday-btn.selected,
.dark .modal-content .weekday-btn.selected,
html.dark body .weekday-btn.selected,
html.dark body .modal-content .weekday-btn.selected,
body.dark .weekday-btn.selected,
body.dark .modal-content .weekday-btn.selected {
    color: white !important;
    font-weight: 600 !important;
}

/* Consolidated dark mode text color enforcement for weekday buttons */
.dark .weekday-btn.selected,
.dark .modal-content .weekday-btn.selected,
.dark .weekday-btn[data-selected="true"],
.dark .modal-content .weekday-btn[data-selected="true"],
html.dark body .weekday-btn.selected,
html.dark body .modal-content .weekday-btn.selected,
.dark .force-white-text {
    color: white !important;
    -webkit-text-fill-color: white !important;
}

/* Dark Mode Modal Fixes */
.dark .modal-content {
  background-color: rgb(31, 41, 55) !important; /* Dark background for modal */
}

/* Force all text to be light in dark mode modals - More specific selectors */
.dark #reminder-modal h1,
.dark #reminder-modal h2,
.dark #reminder-modal h3,
.dark #reminder-modal h4,
.dark #reminder-modal h5,
.dark #reminder-modal h6,
.dark #reminder-modal p,
.dark #reminder-modal span,
.dark #reminder-modal div,
.dark #reminder-modal label,
.dark #reminder-modal small,
.dark #reminder-modal strong,
.dark #reminder-modal em,
.dark #reminder-modal .text-lg,
.dark #reminder-modal .font-medium,
.dark #reminder-modal #modal-title,
.dark .modal-content h1,
.dark .modal-content h2,
.dark .modal-content h3,
.dark .modal-content h4,
.dark .modal-content h5,
.dark .modal-content h6,
.dark .modal-content p,
.dark .modal-content span,
.dark .modal-content div,
.dark .modal-content label,
.dark .modal-content small,
.dark .modal-content strong,
.dark .modal-content em,
.dark .modal-content i:not(.fas) {
  color: rgb(243, 244, 246) !important; /* Light text */
}

/* Ensure icons and buttons have proper colors */
.dark .modal-content .fas,
.dark .modal-content button {
  color: rgb(243, 244, 246) !important;
}

/* Form inputs in dark mode */
.dark .modal-content input,
.dark .modal-content textarea,
.dark .modal-content select {
  background-color: rgb(55, 65, 81) !important;
  border-color: rgb(75, 85, 99) !important;
  color: rgb(243, 244, 246) !important;
}

.dark .modal-content input::placeholder,
.dark .modal-content textarea::placeholder {
  color: rgb(156, 163, 175) !important;
}

/* Nuclear option - force ALL elements in dark mode modal to have light text */
.dark #reminder-modal *,
.dark .modal-content * {
  color: rgb(243, 244, 246) !important;
}

/* Override for elements that should keep their specific colors */
.dark .modal-content input,
.dark .modal-content textarea,
.dark .modal-content select {
  background-color: rgb(55, 65, 81) !important;
  border-color: rgb(75, 85, 99) !important;
  color: rgb(255, 255, 255) !important; /* Pure white text for better contrast */
  font-weight: 500 !important; /* Make text slightly bolder */
}

/* Input focus states */
.dark .modal-content input:focus,
.dark .modal-content textarea:focus,
.dark .modal-content select:focus {
  background-color: rgb(55, 65, 81) !important; /* Keep same dark background */
  border-color: rgb(99, 102, 241) !important; /* Blue focus border */
  color: rgb(255, 255, 255) !important; /* Keep white text */
  font-weight: 500 !important; /* Keep bold text */
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1) !important;
  outline: none !important;
  -webkit-text-fill-color: rgb(255, 255, 255) !important;
  text-shadow: none !important;
}

/* Placeholder text */
.dark .modal-content input::placeholder,
.dark .modal-content textarea::placeholder {
  color: rgb(209, 213, 219) !important; /* Lighter placeholder for better visibility */
  opacity: 0.8 !important;
}

/* Select dropdown options */
.dark .modal-content select option {
  background-color: rgb(55, 65, 81) !important;
  color: rgb(255, 255, 255) !important;
}

/* Datetime input specific styling */
.dark .modal-content input[type="datetime-local"] {
  background-color: rgb(55, 65, 81) !important;
  border-color: rgb(75, 85, 99) !important;
  color: rgb(255, 255, 255) !important;
  font-weight: 500 !important;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: textfield;
}

/* Datetime input calendar icon */
.dark .modal-content input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  opacity: 0.8;
}

/* Fix any remaining input text visibility issues */
.dark .modal-content input[type="text"],
.dark .modal-content input[type="password"],
.dark .modal-content input[type="email"],
.dark .modal-content input[type="number"] {
  background-color: rgb(55, 65, 81) !important;
  border-color: rgb(75, 85, 99) !important;
  color: rgb(255, 255, 255) !important;
  font-weight: 500 !important;
  text-shadow: none !important;
  -webkit-text-fill-color: rgb(255, 255, 255) !important;
}

/* Specific focus states for all input types */
.dark .modal-content input[type="text"]:focus,
.dark .modal-content input[type="password"]:focus,
.dark .modal-content input[type="email"]:focus,
.dark .modal-content input[type="number"]:focus,
.dark .modal-content input[type="datetime-local"]:focus,
.dark .modal-content textarea:focus {
  background-color: rgb(55, 65, 81) !important;
  border-color: rgb(99, 102, 241) !important;
  color: rgb(255, 255, 255) !important;
  font-weight: 500 !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1) !important;
  outline: none !important;
  -webkit-text-fill-color: rgb(255, 255, 255) !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

/* Override any browser default focus styles */
.dark .modal-content input:focus-visible,
.dark .modal-content textarea:focus-visible {
  background-color: rgb(55, 65, 81) !important;
  color: rgb(255, 255, 255) !important;
  -webkit-text-fill-color: rgb(255, 255, 255) !important;
}

.dark .modal-content .bg-blue-600,
.dark .modal-content .bg-gray-600,
.dark .modal-content .btn-primary {
  color: rgb(255, 255, 255) !important;
}

/* Snooze Functionality Styles - Modal Based */
.snooze-time-btn:hover {
  transform: translateY(-1px);
}

.snooze-time-btn:active {
  transform: translateY(0);
}

/* Snoozed badge for reminders */
.snoozed-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
  background-color: rgb(var(--color-warning-100));
  color: rgb(var(--color-warning-800));
}

.dark .snoozed-badge {
  background-color: rgb(var(--color-warning-900));
  color: rgb(var(--color-warning-200));
}

/* Original due date styling for snoozed reminders */
.original-due-date {
  color: rgb(var(--color-gray-500));
  font-size: 0.875rem;
  text-decoration: line-through;
  opacity: 0.7;
}

.dark .original-due-date {
  color: rgb(var(--color-gray-400));
}

/* Drag and Drop Styles for Notification Channels */
.notification-channel-item {
  transition: all 0.2s ease;
}

.notification-channel-item:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.notification-channel-item.dragging {
  opacity: 0.8;
  transform: rotate(2deg);
  z-index: 1000;
}

.drag-handle {
  opacity: 0;
  transition: opacity 0.2s ease;
}

.notification-channel-item:hover .drag-handle {
  opacity: 1;
}

.drag-placeholder {
  border: 2px dashed rgb(var(--color-primary-400));
  background-color: rgba(var(--color-primary-100), 0.5);
  color: rgb(var(--color-primary-600));
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 8px 0;
}

.dark .drag-placeholder {
  background-color: rgba(var(--color-primary-800), 0.3);
  color: rgb(var(--color-primary-400));
  border-color: rgb(var(--color-primary-600));
}

.priority-indicator {
  font-weight: 600;
  min-width: 24px;
  display: inline-block;
}

/* Notification Channel Chips */
.notification-chip-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.75rem;
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: var(--border-radius);
  min-height: 3rem;
  align-items: center;
}

.notification-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.875rem;
  background-color: rgb(var(--color-neutral-100));
  color: rgb(var(--color-neutral-600));
  border: 1px solid rgb(var(--color-neutral-300));
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-duration) var(--transition-timing);
  user-select: none;
  position: relative;
}

.notification-chip:hover {
  background-color: rgb(var(--color-neutral-200));
  border-color: rgb(var(--color-neutral-400));
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.notification-chip:focus {
  outline: none;
  border-color: rgb(var(--color-primary-500));
  box-shadow: 0 0 0 2px rgba(var(--color-primary-500), 0.2);
}

.notification-chip.selected {
  background-color: rgb(var(--color-primary-100));
  color: rgb(var(--color-primary-700));
  border-color: rgb(var(--color-primary-400));
}

.notification-chip.selected:hover {
  background-color: rgb(var(--color-primary-200));
  border-color: rgb(var(--color-primary-500));
}

.notification-chip-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.notification-chip-label {
  font-weight: 500;
  line-height: 1;
}

.notification-chip-type {
  font-size: 0.75rem;
  opacity: 0.75;
  font-weight: 400;
}

.notification-chip-selected-indicator {
  display: none;
  width: 1rem;
  height: 1rem;
  color: rgb(var(--color-primary-600));
}

.notification-chip.selected .notification-chip-selected-indicator {
  display: block;
}

/* Dark theme variations */
.dark .notification-chip-container {
  background-color: var(--bg-secondary);
  border-color: var(--border-primary);
}

.dark .notification-chip {
  background-color: rgb(var(--color-neutral-800));
  color: rgb(var(--color-neutral-300));
  border-color: rgb(var(--color-neutral-700));
}

.dark .notification-chip:hover {
  background-color: rgb(var(--color-neutral-700));
  border-color: rgb(var(--color-neutral-600));
}

.dark .notification-chip.selected {
  background-color: rgb(var(--color-primary-900));
  color: rgb(var(--color-primary-200));
  border-color: rgb(var(--color-primary-600));
}

.dark .notification-chip.selected:hover {
  background-color: rgb(var(--color-primary-800));
  border-color: rgb(var(--color-primary-500));
}

.dark .notification-chip-selected-indicator {
  color: rgb(var(--color-primary-400));
}

/* Empty state for chip container */
.notification-chip-container:empty::before {
  content: "No notification channels available";
  color: rgb(var(--color-neutral-500));
  font-size: 0.875rem;
  font-style: italic;
}

.dark .notification-chip-container:empty::before {
  color: rgb(var(--color-neutral-400));
}

/* Accessibility improvements */
.notification-chip[role="checkbox"] {
  position: relative;
}

.notification-chip[role="checkbox"]:focus-visible {
  outline: 2px solid rgb(var(--color-primary-500));
  outline-offset: 2px;
}

/* Animation for selection changes */
.notification-chip {
  transition: background-color var(--transition-duration) var(--transition-timing),
              border-color var(--transition-duration) var(--transition-timing),
              color var(--transition-duration) var(--transition-timing),
              transform var(--transition-duration) var(--transition-timing),
              box-shadow var(--transition-duration) var(--transition-timing);
}

/* Mobile touch improvements */
@media (max-width: 768px) {
  .drag-handle {
    opacity: 1;
    font-size: 1.1rem;
  }
  
  .notification-channel-item {
    padding: 1rem;
  }
  
  .notification-channel-item .flex {
    flex-direction: column;
    gap: 0.75rem;
  }
  
  .notification-channel-item .flex > div:last-child {
    align-self: flex-end;
  }
  
  .notification-chip {
    padding: 0.625rem 1rem;
    font-size: 0.9rem;
    min-height: 2.5rem;
  }
  
  .notification-chip-container {
    gap: 0.625rem;
    min-height: 3.5rem;
  }
}