/* ===========================================
   FAMILY HUB - UNIFIED STYLE GUIDE
   =========================================== */

/* ===========================================
   COLOR SYSTEM DOCUMENTATION
   =========================================== 
   
   This is the SINGLE SOURCE OF TRUTH for all colors and themes.
   
   System Architecture:
   1. BASE THEME VARIABLES: Default theme colors (--color-*)
   2. SEMANTIC MAPPINGS: Component-specific assignments
   3. UTILITY CLASSES: Reusable styling patterns
   4. THEME OVERRIDES: JavaScript can override base variables for theme switching
   
   Usage Guidelines:
   - Use CSS custom properties (var(--color-*)) in all components
   - Avoid hardcoded hex values
   - All theme switching happens by overriding these base variables
   - Update semantic mappings when adding new components
   
   =========================================== */

/* ===========================================
   VUE CLOAK - Hide uncompiled templates
   Vue requires !important to ensure templates are hidden before compilation
   stylelint-disable-next-line declaration-no-important
   =========================================== */
[v-cloak] {
  /* stylelint-disable-next-line declaration-no-important -- Vue framework requirement */
  display: none !important;
}

/* ===========================================
   HIDE NATIVE BROWSER PASSWORD REVEAL
   Prevents duplicate eye icons when using custom toggle
   =========================================== */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
  display: none;
}

/* ===========================================
   BASE THEME COLORS (Default Theme)
   =========================================== */
:root {
  /* Primary Brand Colors */
  --color-primary-50: #f0f7ff;
  --color-primary-100: #e0efff;
  --color-primary-200: #b8dcff;
  --color-primary-300: #7cc3ff;
  --color-primary-400: #4A90E2;
  --color-primary-500: #4A90E2;   /* Main brand color */
  --color-primary-600: #3a7bc8;
  --color-primary-700: #2d5f9f;
  --color-primary-800: #1e4176;
  --color-primary-900: #0f234d;
  
  /* Secondary Colors */
  --color-secondary-50: #f5f3ff;
  --color-secondary-100: #ede9fe;
  --color-secondary-200: #ddd6fe;
  --color-secondary-300: #c4b5fd;
  --color-secondary-400: #a78bfa;
  --color-secondary-500: #7B68EE;
  --color-secondary-600: #6d5ce6;
  --color-secondary-700: #5b21b6;
  --color-secondary-800: #4c1d95;
  --color-secondary-900: #3c1a78;
  
  /* Neutral Colors */
  --color-neutral-50: var(--color-neutral-50);
  --color-neutral-100: #f1f5f9;
  --color-neutral-200: #e2e8f0;
  --color-neutral-300: #cbd5e1;
  --color-neutral-400: #94a3b8;
  --color-neutral-500: #718096;
  --color-neutral-600: #475569;
  --color-neutral-700: #334155;
  --color-neutral-800: #2D3748;
  --color-neutral-900: #1a202c;
  
  /* Status Colors */
  --color-success-50: #f0fff4;
  --color-success-500: #50C878;
  --color-success-600: #22c55e;
  --color-success-700: #16a34a;
  --color-warning-50: #fff7ed;
  --color-warning-500: #FF8C42;
  --color-warning-600: #ea580c;
  --color-warning-700: #c2410c;
  --color-error-50: #fef2f2;
  --color-error-500: #ef4444;
  --color-error-600: #dc2626;
  --color-error-700: #b91c1c;
  
  /* Status Badge Colors (for electronics status, etc.) */
  --color-success-bg: var(--color-success-50);
  --color-success-text: var(--color-success-700);
  --color-warning-bg: var(--color-warning-50);
  --color-warning-text: var(--color-warning-700);
  --color-error-bg: var(--color-error-50);
  --color-error-text: var(--color-error-700);
  
  /* ===========================================
     COMPUTED SEMANTIC COLORS
     (These are calculated from base colors above)
     =========================================== */
  
  /* Text Colors */
  --color-text-primary: var(--color-neutral-800);
  --color-text-secondary: var(--color-neutral-600);
  --color-text-muted: var(--color-neutral-500);
  
  /* Background Colors */
  --color-bg-primary: var(--color-neutral-50);
  --color-bg-secondary: var(--color-neutral-100);
  --color-bg-card: var(--color-neutral-50);
  --color-bg-card-hover: var(--color-neutral-100);
  --color-bg-elevated: #fff;
  --color-border-card: var(--color-neutral-200);
  
  /* Surface Color System (layered elevation) */
  --color-surface-0: var(--color-bg-primary);   /* Page background */
  --color-surface-1: var(--color-bg-card);      /* Cards, panels */
  --color-surface-2: var(--color-bg-card-hover); /* Hover, nested */
  --color-surface-3: var(--color-bg-elevated);  /* Modals, dropdowns */
  
  /* Component-Specific Colors (inherit from base theme) */
  --color-quicklist-border: var(--color-border-card);
  --color-quicklist-bg: var(--color-bg-card);
  --color-quicklist-text: var(--color-text-primary);
  --color-family-card-bg: var(--color-bg-card);
  --color-family-card-border: var(--color-border-card);
  --color-family-card-hover: var(--color-primary-500);
  --color-earnings-bg: linear-gradient(135deg, var(--color-success-50), var(--color-primary-50));
  --color-earnings-border: var(--color-success-200);
  --color-earnings-text: var(--color-success-600);
  --color-unassigned-bg: var(--color-bg-card);
  --color-unassigned-border: var(--color-border-card);
  
  /* ===========================================
     DESIGN TOKENS
     =========================================== */
  
  /* Gradients */
  --gradient-primary: linear-gradient(135deg, var(--color-primary-500), var(--color-primary-600));
  --gradient-secondary: linear-gradient(135deg, var(--color-secondary-500), var(--color-secondary-600));
  --gradient-success: linear-gradient(135deg, var(--color-success-500), var(--color-success-600));
  --gradient-warning: linear-gradient(135deg, var(--color-warning-500), var(--color-warning-600));
  --gradient-error: linear-gradient(135deg, var(--color-error-500), var(--color-error-600));
  --gradient-sunset: linear-gradient(135deg, var(--color-warning-500), var(--color-error-500));
  --gradient-ocean: linear-gradient(135deg, var(--color-primary-500), var(--color-secondary-500));
  
  /* Typography */
  --font-family-sans: inter, 'Noto Sans', sans-serif;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  /* Font Size Scale (follows Tailwind conventions) */
  --font-size-xs: 0.75rem;     /* 12px */
  --font-size-sm: 0.875rem;    /* 14px */
  --font-size-base: 1rem;      /* 16px */
  --font-size-lg: 1.125rem;    /* 18px */
  --font-size-xl: 1.25rem;     /* 20px */
  --font-size-2xl: 1.5rem;     /* 24px */
  --font-size-3xl: 1.875rem;   /* 30px */
  --font-size-4xl: 2.25rem;    /* 36px */
  
  /* Line Height Scale */
  --line-height-tight: 1.25;
  --line-height-snug: 1.375;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;
  --line-height-loose: 2;
  
  /* Spacing Scale */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  
  /* Border Radius */
  --radius-sm: 0.375rem;   /* 6px */
  --radius-md: 0.5rem;     /* 8px */
  --radius-lg: 0.75rem;    /* 12px */
  --radius-xl: 1rem;       /* 16px */
  --radius-full: 9999px;   /* pill/circle */
  
  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 5%);
  --shadow-md: 0 4px 6px -1px var(--color-overlay-10), 0 2px 4px -2px var(--color-overlay-10);
  --shadow-lg: 0 10px 15px -3px var(--color-overlay-10), 0 4px 6px -4px var(--color-overlay-10);
  
  /* Overlay Colors - Black (actual rgba values) */
  --color-overlay: rgb(0 0 0 / 50%);
  --color-overlay-heavy: rgb(0 0 0 / 70%);
  --color-overlay-medium: rgb(0 0 0 / 40%);
  --color-overlay-light: rgb(0 0 0 / 20%);
  --color-overlay-12: rgb(0 0 0 / 12%);
  --color-overlay-10: rgb(0 0 0 / 10%);
  --color-overlay-subtle: rgb(0 0 0 / 8%);
  --color-overlay-6: rgb(0 0 0 / 6%);
  --color-overlay-transparent: rgb(0 0 0 / 0%);
  
  /* Overlay Colors - White (actual rgba values) */
  --color-white: #fff;
  --color-white-overlay-90: rgb(255 255 255 / 90%);
  --color-white-overlay-strong: rgb(255 255 255 / 80%);
  --color-white-overlay-70: rgb(255 255 255 / 70%);
  --color-white-overlay-50: rgb(255 255 255 / 50%);
  --color-white-overlay-40: rgb(255 255 255 / 40%);
  --color-white-overlay-35: rgb(255 255 255 / 35%);
  --color-white-overlay-light: rgb(255 255 255 / 30%);
  --color-white-overlay-25: rgb(255 255 255 / 25%);
  --color-white-overlay: rgb(255 255 255 / 20%);
  --color-white-overlay-15: rgb(255 255 255 / 15%);
  --color-white-overlay-10: rgb(255 255 255 / 10%);
  
  /* Overlay Colors - Primary (blue) */
  --color-primary-overlay-75: rgb(74 144 226 / 75%);
  --color-primary-overlay-60: rgb(74 144 226 / 60%);
  --color-primary-overlay-50: rgb(74 144 226 / 50%);
  --color-primary-overlay-10: rgb(74 144 226 / 10%);
  
  /* Overlay Colors - Error (red) */
  --color-error-overlay-90: rgb(239 68 68 / 90%);
  
  /* Extended Status Colors for Shoelace components */
  --color-success-100: var(--color-success-100);
  --color-success-200: #bbf7d0;
  --color-warning-100: var(--color-warning-100);
  --color-warning-200: var(--color-warning-200);
  --color-error-100: var(--color-error-100);
  --color-error-200: #fecaca;
  --color-info-50: #eff6ff;
  --color-info-100: var(--color-info-100);
  --color-gray-100: #f3f4f6;
  --color-gray-700: #374151;
  
  /* Transitions */
  --transition-fast: 150ms ease-in-out;
  --transition-normal: 200ms ease-in-out;
  --transition-slow: 300ms ease-in-out;
  
  /* Focus */
  --color-focus-ring: var(--color-primary-500);
}

/* ===========================================
   ACCESSIBILITY - SKIP LINK (WCAG 2.4.1)
   Allows keyboard users to skip navigation
   =========================================== */
.skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-4);
  z-index: 9999;
  padding: var(--space-2) var(--space-4);
  background: var(--color-primary-500);
  color: var(--color-white);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-sm);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: top var(--transition-fast);
  box-shadow: var(--shadow-lg);

  /* Touch target accessibility - WCAG 2.5.5 */
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.skip-link:focus {
  top: var(--space-4);
  outline: 2px solid var(--color-white);
  outline-offset: 2px;
}

/* Alternative selector for skip link - ensures touch target compliance */
a[href="#main-content"] {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* ===========================================
   ACCESSIBILITY - FORCED COLORS MODE
   Support for Windows High Contrast Mode
   =========================================== */
@media (forced-colors: active) {
  /* Ensure focus indicators are visible */
  :focus {
    outline: 2px solid CanvasText !important;
    outline-offset: 2px;
  }
  
  /* Ensure buttons have visible borders */
  .btn-primary,
  .btn-secondary,
  .btn-success,
  .btn-warning,
  .btn-error {
    border: 2px solid ButtonText !important;
  }
  
  /* Ensure cards have visible borders */
  .card {
    border: 1px solid CanvasText !important;
  }
}

/* ===========================================
   TYPOGRAPHY UTILITIES
   Use these classes for consistent text sizing
   =========================================== */
.text-xs { font-size: var(--font-size-xs); }
.text-sm { font-size: var(--font-size-sm); }
.text-base { font-size: var(--font-size-base); }
.text-lg { font-size: var(--font-size-lg); }
.text-xl { font-size: var(--font-size-xl); }
.text-2xl { font-size: var(--font-size-2xl); }
.text-3xl { font-size: var(--font-size-3xl); }
.text-4xl { font-size: var(--font-size-4xl); }

/* ===========================================
   READABILITY UTILITIES
   Max line length for optimal reading (45-75 chars)
   =========================================== */
.prose {
  max-width: 65ch;
}

.prose-sm {
  max-width: 45ch;
}

.prose-lg {
  max-width: 75ch;
}

/* ===========================================
   UTILITY CLASSES FOR CONSISTENT STYLING
   =========================================== */

/* Optimistic Update Indicators */
.optimistic-update {
  position: relative;
  opacity: 0.85;
  transition: opacity var(--transition-normal);
}

.optimistic-update::after {
  content: '';
  position: absolute;
  top: 2px;
  right: 2px;
  width: 8px;
  height: 8px;
  background: var(--color-warning-500);
  border-radius: 50%;
  animation: optimistic-pulse 1.5s ease-in-out infinite;
  box-shadow: 0 0 4px var(--color-warning-500);
}

@keyframes optimistic-pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.6;
    transform: scale(1.1);
  }
}

.optimistic-update.confirmed {
  opacity: 1;
}

.optimistic-update.confirmed::after {
  display: none;
}

/* Button Loading States */
.btn-loading {
  position: relative;
  pointer-events: none;
  opacity: 0.8;
}

.btn-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  transform: translate(-50%, -50%);
  border: 2px solid transparent;
  border-top: 2px solid currentcolor;
  border-radius: 50%;
  animation: btn-spin 0.8s linear infinite;
}

@keyframes btn-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Faster transitions for better responsiveness */
.chore-item {
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.chore-item:active {
  transform: scale(0.98);
}

/* Improved touch feedback */
.touch-feedback {
  transition: all 100ms ease-out;
}

.touch-feedback:active {
  transform: scale(0.97);
  opacity: 0.9;
}

/* Skeleton loading for better perceived performance */
.skeleton {
  background: linear-gradient(90deg, var(--color-neutral-200) 25%, var(--color-neutral-100) 50%, var(--color-neutral-200) 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
}

@keyframes skeleton-loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Button Variants */
.btn-primary {
  background: var(--gradient-primary);
  color: white;
  border: none;
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  font-weight: var(--font-weight-medium);
  font-size: 0.875rem;
  transition: all var(--transition-normal);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px; /* Touch target */

  /* Shoelace small elevation */
  box-shadow: 0 1px 2px var(--color-overlay-6), 0 1px 3px var(--color-overlay-10);
}

/* Hover effects only for devices that support hovering */
@media (hover: hover) {
  .btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-lg);
    background: linear-gradient(135deg, var(--color-primary-600), var(--color-primary-700));
  }

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

  .btn-success:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-lg);
    background: linear-gradient(135deg, var(--color-success-600), var(--color-success-700));
  }

  .btn-warning:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-lg);
    background: linear-gradient(135deg, var(--color-warning-600), var(--color-warning-700));
  }

  .btn-error:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-lg);
    background: linear-gradient(135deg, var(--color-error-600), var(--color-error-700));
  }

  .card:hover {
    box-shadow: var(--shadow-md);
  }
}

.btn-secondary {
  background: var(--color-surface-2);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-card);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  font-weight: var(--font-weight-medium);
  font-size: 0.875rem;
  transition: all var(--transition-normal);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;

  /* Shoelace small elevation */
  box-shadow: 0 1px 2px var(--color-overlay-6), 0 1px 3px var(--color-overlay-10);
}

/* Numpad buttons - theme-aware for spending flyout */
.numpad-btn {
  background: var(--color-surface-2);
  transition: background-color var(--transition-normal);
}

.numpad-btn:hover {
  background: var(--color-surface-3);
}

.btn-success {
  background: var(--gradient-success);
  color: white;
  border: none;
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  font-weight: var(--font-weight-medium);
  font-size: 0.875rem;
  transition: all var(--transition-normal);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;

  /* Shoelace small elevation */
  box-shadow: 0 1px 2px var(--color-overlay-6), 0 1px 3px var(--color-overlay-10);
}

.btn-warning {
  background: var(--gradient-warning);
  color: white;
  border: none;
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  font-weight: var(--font-weight-medium);
  font-size: 0.875rem;
  transition: all var(--transition-normal);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;

  /* Shoelace small elevation */
  box-shadow: 0 1px 2px var(--color-overlay-6), 0 1px 3px var(--color-overlay-10);
}

.btn-error {
  background: var(--gradient-error);
  color: white;
  border: none;
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  font-weight: var(--font-weight-medium);
  font-size: 0.875rem;
  transition: all var(--transition-normal);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;

  /* Shoelace small elevation */
  box-shadow: 0 1px 2px var(--color-overlay-6), 0 1px 3px var(--color-overlay-10);
}

/* Compact button variant for flyout footers */
.btn-compact {
  min-height: 36px;
  padding: var(--space-2) var(--space-3);
  font-size: 0.875rem;
}

/* Card Components */
.card {
  background: var(--color-bg-card);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border-card);
  transition: all var(--transition-normal);
}

.card-header {
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-neutral-200);
}

.card-title {
  font-size: 1.25rem;
  font-weight: var(--font-weight-semibold);
  color: var(--color-neutral-900);
  margin: 0;
}

.card-subtitle {
  font-size: 0.875rem;
  color: var(--color-neutral-600);
  margin: var(--space-1) 0 0 0;
}

/* Avatar Component */
.avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--gradient-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: var(--font-weight-medium);
  font-size: 0.875rem;
}

.avatar-lg {
  width: 3rem;
  height: 3rem;
  font-size: 1.125rem;
}

/* Status Indicators */
.status-success {
  color: var(--color-success-600);
  background-color: var(--color-success-50);
  border: 1px solid var(--color-success-200);
}

.status-warning {
  color: var(--color-warning-600);
  background-color: var(--color-warning-50);
  border: 1px solid var(--color-warning-200);
}

.status-error {
  color: var(--color-error-600);
  background-color: var(--color-error-50);
  border: 1px solid var(--color-error-200);
}

/* Typography Utilities */
.text-primary {
  color: var(--color-primary-500);
}

.text-secondary {
  color: var(--color-neutral-600);
}

.text-muted {
  color: var(--color-neutral-500);
}

.text-error {
  color: var(--color-error-600);
}

.text-success {
  color: var(--color-success-600);
}

.text-warning {
  color: var(--color-warning-600);
}

/* ===========================================
   SEMANTIC COMPONENT CLASSES
   =========================================== */

/* Quicklist Components */
.quicklist-card {
  background: var(--color-bg-card);
  border-left: 3px solid var(--color-primary-500);
  color: var(--color-text-primary);
}

.quicklist-badge {
  background: var(--color-quicklist-bg);
  color: var(--color-quicklist-text);
}

/* Family Member Cards Grid - Prevents sibling cards from stretching when one expands */
.family-cards-grid {
  align-items: start;
}

/* Family Member Cards */
.family-card {
  border-color: var(--color-family-card-border);
}

.family-card:hover {
  border-color: var(--color-family-card-hover);
}

/* Card container minimum padding - ensures all family cards have adequate spacing (Requirements 4.2) */
.family-card {
  padding: var(--space-3); /* 12px minimum padding on all sides */
}

/* Responsive padding for family cards - larger on desktop */
@media (width >= 640px) {
  .family-card {
    padding: var(--space-6); /* 24px on larger screens */
  }
}

/* Header user info card padding - ensures minimum vertical padding (Requirements 4.1) */
.header-user-card,
.card.flex.items-center.gap-3 {
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
  min-height: 44px;
}

/* Electronics status badge - prevent text wrapping on narrow cards (Requirements 3.1) */
.family-card .electronics-badge,
.family-card [class*="bg-success-600"][class*="rounded-full"],
.family-card [class*="bg-warning-600"][class*="rounded-full"],
.family-card [class*="bg-error-600"][class*="rounded-full"] {
  white-space: nowrap;
}

/* Metric labels - ensure consistent width and prevent wrapping (Requirements 3.2) */
.family-card .metric-label,
.family-card .text-sm.text-white.text-opacity-80 {
  white-space: nowrap;
}

.family-avatar {
  background: var(--gradient-ocean);
}

/* ===========================================
   RECIPE CARDS
   =========================================== */

/* Recipe ingredient item colors - theme-aware */
.ingredient-item {
  background: var(--color-surface-1);
  border-color: var(--color-border-card);
  color: var(--color-text-primary);
}

.ingredient-item:hover {
  background: var(--color-surface-2);
  border-color: var(--color-neutral-300);
}

.ingredient-item--selected {
  background: var(--color-success-50);
  border-color: var(--color-success-300);
}

.ingredient-item--editing {
  background: var(--color-primary-50);
  border-color: var(--color-primary-300);
}

.ingredient-quantity {
  color: var(--color-text-muted);
}

.ingredient-name {
  color: var(--color-text-primary);
}

/* Recipe card grid - ensures consistent row heights */
.recipe-card-grid {
  align-items: stretch;
}

/* Recipe cards - consistent height with flexbox layout */
.recipe-card {
  min-height: 140px; /* Accommodate cards with tags */
  display: flex;
  flex-direction: column;
}

/* Earnings Components */
.earnings-card {
  background: var(--color-earnings-bg);
  border-color: var(--color-earnings-border);
}

.earnings-text {
  color: var(--color-earnings-text);
}

.earnings-avatar {
  background: linear-gradient(135deg, var(--color-success-500), var(--color-primary-500));
}

/* Badge utilities */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  border-radius: var(--radius-full);
  font-weight: var(--font-weight-medium);
  padding: var(--space-1) var(--space-2);
  font-size: 0.85rem;
  line-height: 1;
}

.badge-success {
  background: var(--color-success-50);
  color: var(--color-success-700);
  border: 1px solid var(--color-success-500);
}

.badge-warning {
  background: var(--color-warning-50);
  color: var(--color-warning-700);
  border: 1px solid var(--color-warning-500);
}

.badge-error {
  background: var(--color-error-50);
  color: var(--color-error-700);
  border: 1px solid var(--color-error-500);
}

/* Tag - compact pill for labels/categories (matches category badge size) */
.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  border-radius: var(--radius-full);
  font-weight: 500;
  padding: var(--space-1) var(--space-2);
  font-size: 0.75rem; /* text-xs */
  line-height: 1.25;
  white-space: nowrap;
}

.tag-primary {
  background: var(--color-primary-500);
  color: var(--color-white);
}

.tag-secondary {
  background: var(--color-secondary-500);
  color: var(--color-white);
}

.tag-outline {
  background: var(--color-primary-100);
  color: var(--color-primary-700);
  border: 1px solid var(--color-primary-200);
}

.tag-removable {
  gap: var(--space-1);
}

/* Unassigned Chores */
.unassigned-area {
  background: var(--color-unassigned-bg);
  border-color: var(--color-unassigned-border);
}

/* Text Utilities */
.text-primary-custom {
  color: var(--color-text-primary);
}

.text-secondary-custom {
  color: var(--color-text-secondary);
}

.text-muted-custom {
  color: var(--color-text-muted);
}

/* ===========================================
   RESPONSIVE DESIGN UTILITIES
   =========================================== */

/* Touch targets for mobile */
.touch-target {
  min-height: 44px;
  min-width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Focus states for accessibility */
.focus-visible:focus-visible {
  outline: 2px solid var(--color-primary-500);
  outline-offset: 2px;
}

/* Loading states */
.loading {
  opacity: 0.6;
  pointer-events: none;
  position: relative;
}

.loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1rem;
  height: 1rem;
  margin: -0.5rem 0 0 -0.5rem;
  border: 2px solid var(--color-neutral-300);
  border-top-color: var(--color-primary-500);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ===========================================
   COMPONENT-SPECIFIC OVERRIDES
   =========================================== */

/* Ensure consistent styling across the app */
* {
  box-sizing: border-box;
}

body {
  font-family: var(--font-family-sans);
  color: var(--color-text-primary);
  background-color: var(--color-bg-primary);
  background-image: linear-gradient(135deg, var(--color-bg-primary) 0%, var(--color-bg-secondary) 100%);
  line-height: 1.5;
  min-height: 100vh;
  transition: background-color var(--transition-normal), color var(--transition-normal);
}

/* Link styles */
a {
  color: var(--color-primary-500);
  text-decoration: none;
  transition: color var(--transition-fast);
}

@media (hover: hover) {
  a:hover {
    color: var(--color-primary-600);
  }
}

/* Form elements - !important needed to override Tailwind forms plugin reset */
input, select, textarea {
  border: 1px solid var(--color-border-card);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  font-family: inherit;
  font-size: var(--font-size-base);
  /* stylelint-disable-next-line declaration-no-important -- Override Tailwind forms plugin */
  background-color: var(--color-surface-1) !important;
  /* stylelint-disable-next-line declaration-no-important -- Override Tailwind forms plugin */
  color: var(--color-text-primary) !important;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

input::placeholder, textarea::placeholder {
  color: var(--color-text-muted);
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--color-primary-500);
  box-shadow: 0 0 0 1px var(--color-primary-500);
}

/* Modal overlays */
.modal-overlay {
  background-color: var(--color-overlay);
  backdrop-filter: blur(4px);

  /* ensure overlay receives touches but doesn't allow events to bleed through */
  pointer-events: auto;

  /* lock overlay color on touch devices when :hover sticks */
  --overlay-bg: var(--color-overlay);
}

/* ensure modal panels render opaque on iOS by promoting to own layer */
.modal-panel {
  background-color: var(--color-surface-3);
  transform: translateZ(0);
  backface-visibility: hidden;
  pointer-events: auto;
}

/* ===========================================
   SHOELACE DRAWER FLYOUT
   Uses Shoelace's <sl-drawer> for iOS Safari/PWA support
   =========================================== */

/* Customize Shoelace drawer to match our design */
.flyout-sl-drawer {
  --size: 450px;
  --header-spacing: var(--space-4);
  --body-spacing: 0;
  --footer-spacing: 0;
}

.flyout-sl-drawer::part(panel) {
  background-color: var(--color-surface-3);
  box-shadow: -4px 0 24px var(--color-overlay-light);

  /* Animation duration controlled via JS animation registry in flyout-panel.js */
}

.flyout-sl-drawer::part(overlay) {
  background-color: var(--color-overlay);
}

.flyout-sl-drawer::part(header) {
  background-color: var(--color-surface-3);
  border-bottom: 1px solid var(--color-border-card);
  padding: var(--space-3) var(--space-4);
}

.flyout-sl-drawer::part(title) {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-text-primary);
}

.flyout-sl-drawer::part(body) {
  padding: 0;
}

.flyout-sl-drawer::part(footer) {
  background-color: var(--color-surface-3);
  border-top: 1px solid var(--color-border-card);
  padding: var(--space-3) var(--space-4);
  padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
}

.flyout-sl-drawer::part(close-button) {
  /* Hide Shoelace's default close button - we use our own in header-actions slot */
  display: none;
}

/* Content area styling */
.flyout-sl-content {
  padding: var(--space-4) var(--space-4);
  overflow-y: auto;
  flex: 1;
}

@media (width >= 640px) {
  .flyout-sl-content {
    padding: var(--space-6);
  }
}

/* Footer styling */
.flyout-sl-footer {
  width: 100%;
}

/* Full width on mobile */
@media (width <= 640px) {
  .flyout-sl-drawer {
    --size: 100%;
  }
}

/* Prevent body scroll when flyout is open while preserving scroll position */
body.flyout-open {
  position: fixed;
  width: 100%;
  overflow-y: scroll; /* Prevent layout shift from scrollbar disappearing */
}

/* fix iOS momentum scroll bleed-through under modals */
body.modal-open {
  position: fixed;
  width: 100%;
  overflow: hidden;
}

/* ===========================================
   SHOELACE CHORE CARDS
   Uses Shoelace's <sl-card> for consistent styling
   =========================================== */

/* Base chore card styling */
.chore-card {
  --border-radius: var(--radius-xl);
  --border-width: 2px;
  --border-color: var(--color-primary-600);
  --padding: var(--space-3);

  /* Shoelace card background - use same as gradient start to hide corners */
  --sl-color-neutral-0: var(--color-primary-500);

  width: 100%;
  cursor: pointer;
  transition: transform 200ms ease, box-shadow 200ms ease;
  background: transparent !important;
  overflow: hidden;
  border-radius: var(--radius-xl);
}

.chore-card::part(base) {
  background: var(--gradient-primary) !important;
  border-color: var(--color-primary-600);
  border-radius: var(--radius-xl);

  /* Shoelace large elevation for visible depth */
  box-shadow: 0 2px 18px var(--color-overlay-12), 0 12.5px 10px var(--color-overlay-subtle), 0 6.25px 6.25px var(--color-overlay-6);
  transition: box-shadow 200ms ease;
  overflow: hidden;
}

.chore-card::part(body) {
  padding: var(--space-2) var(--space-3);
}

/* Hover state */
@media (hover: hover) {
  .chore-card:hover {
    transform: translateY(-3px);
  }
  
  .chore-card:hover::part(base) {
    /* Shoelace x-large elevation on hover */
    box-shadow: 0 4px 30px var(--color-overlay-light), 0 20px 15px var(--color-overlay-10), 0 10px 10px var(--color-overlay-subtle);
  }
}

/* Selected state */
.chore-card--selected {
  --border-width: 4px;
  --border-color: var(--color-primary-300);

  transform: scale(1.02);
  z-index: 10;
}

.chore-card--selected::part(base) {
  background: linear-gradient(135deg, var(--color-primary-600), var(--color-primary-700));
  box-shadow: 0 25px 50px -12px var(--color-primary-500), 0 0 0 4px rgb(250 204 21 / 60%);
}

/* Completed state */
.chore-card--completed::part(base) {
  opacity: 0.7;
}

/* ===========================================
   PRIORITY CHORE HIGHLIGHTING
   Visual distinction for the highest priority chore
   **Feature: chore-priority**
   **Validates: Requirements 3.1**
   =========================================== */

/* Priority chore state - golden glow effect */
.chore-card--priority {
  --border-color: var(--color-warning-500);

  position: relative;
  z-index: 5;
}

.chore-card--priority::part(base) {
  background: linear-gradient(135deg, var(--color-warning-500), var(--color-warning-600)) !important;
  border-color: var(--color-warning-600);

  /* Golden glow shadow for priority emphasis */
  box-shadow:
    0 0 0 3px var(--color-warning-300),
    0 4px 20px var(--color-warning-500),
    0 8px 30px rgb(255 140 66 / 30%);
}

/* Priority badge styling */
.chore-priority-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  background: var(--color-white-overlay);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-white);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.chore-priority-badge svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

/* Priority indicator icon (star) */
.chore-priority-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--color-white);
}

.chore-priority-indicator svg {
  width: 16px;
  height: 16px;
}

/* Hover state for priority chore */
@media (hover: hover) {
  .chore-card--priority:hover::part(base) {
    box-shadow:
      0 0 0 4px var(--color-warning-300),
      0 8px 30px var(--color-warning-500),
      0 12px 40px rgb(255 140 66 / 40%);
  }
}

/* Priority + Completed state (completed priority chore) */
.chore-card--priority.chore-card--completed::part(base) {
  opacity: 0.7;
}

/* ===========================================
   DRAG-AND-DROP REORDERING
   Visual feedback for chore reordering
   **Feature: chore-priority**
   **Validates: Requirements 4.1**
   =========================================== */

/* Drag handle styling */
.chore-drag-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--color-white-overlay-50);
  cursor: grab;
  transition: color 150ms ease, transform 150ms ease;
  touch-action: none;
}

.chore-drag-handle:hover {
  color: var(--color-white);
  transform: scale(1.1);
}

.chore-drag-handle:active {
  cursor: grabbing;
}

.chore-drag-handle svg {
  width: 16px;
  height: 16px;
}

/* Dragging state - the card being dragged */
.chore-card-wrapper--dragging {
  opacity: 0.95;
  transform: scale(0.98);
}

.chore-card--dragging {
  opacity: 0.95;
}

.chore-card--dragging::part(base) {
  box-shadow: 0 8px 30px var(--color-overlay-20);
}

/* Drag over state - the card being hovered over */
.chore-card-wrapper--drag-over,
.chore-card-wrapper--touch-drag-over {
  transform: translateY(4px);
}

/* Prevent child elements from triggering separate drag events (causes jitter) */
.chore-card-wrapper--drag-over *,
.chore-card-wrapper--touch-drag-over * {
  pointer-events: none;
}

.chore-card-wrapper--drag-over::before,
.chore-card-wrapper--touch-drag-over::before {
  content: '';
  position: absolute;
  top: -4px;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--color-primary-400);
  border-radius: var(--radius-full);
  animation: drag-indicator-pulse 1s ease-in-out infinite;
}

@keyframes drag-indicator-pulse {
  0%, 100% {
    opacity: 0.6;
  }

  50% {
    opacity: 1;
  }
}

/* Chore list container during reordering */
.chore-list-container--reordering {
  /* Subtle background to indicate reorder mode */
  background: var(--color-surface-2);
  border-radius: var(--radius-lg);
  padding: var(--space-2);
  margin: calc(-1 * var(--space-2));
}

/* Chore list transition animations (for completed chores moving to bottom) */
.chore-list-move {
  transition: transform 300ms ease-out;
}

.chore-list-enter-active,
.chore-list-leave-active {
  transition: all 300ms ease-out;
}

.chore-list-enter-from {
  opacity: 0;
  transform: translateX(-20px);
}

.chore-list-leave-to {
  opacity: 0;
  transform: translateX(20px);
}

/* Ensure leaving items don't affect layout during animation */
.chore-list-leave-active {
  position: absolute;
  width: 100%;
}

/* Expanded state - remove bottom border radius to connect with flyout */
.chore-card--expanded {
  --border-radius: var(--radius-xl) var(--radius-xl) 0 0;

  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.chore-card--expanded::part(base) {
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;

  /* Remove bottom border when flyout is attached */
  border-bottom: none;
}

/* Card content layout */
.chore-card-content {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* Legacy divided card layout - kept for backwards compatibility */
.chore-card-content.chore-card-divided {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Left zone: Checkbox + Name */
.chore-card-left {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 1;
  min-width: 0;
}

/* Right zone: Money + Actions with visual separator */
.chore-card-right {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
  padding-left: var(--space-4);
  border-left: 2px solid var(--color-white-overlay-35);
  margin-left: var(--space-3);
  min-height: 32px;
}

/* Money section */
.chore-card-money {
  display: flex;
  align-items: center;
}

/* Actions section - legacy horizontal layout */
.chore-card-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Checkbox styling */
.chore-card .chore-checkbox {
  --sl-color-primary-600: var(--color-white);

  flex-shrink: 0;
}

.chore-card .chore-checkbox::part(control) {
  border-color: var(--color-white-overlay-50);
  background-color: transparent;
}

.chore-card .chore-checkbox::part(control--checked) {
  background-color: var(--color-secondary-500);
  border-color: var(--color-secondary-500);
}

/* Chore name */
.chore-name {
  flex: 1;
  min-width: 0;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-white);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;

  /* Softer text shadow - bottom right */
  text-shadow: 2px 1px 3px var(--color-overlay-heavy);
}

.chore-name--completed {
  text-decoration: line-through;
  opacity: 0.6;
}

/* Amount badge - use theme colors */
.chore-card .chore-amount {
  flex-shrink: 0;

  --sl-color-primary-600: var(--color-white);
}

.chore-card .chore-amount::part(base) {
  background-color: var(--color-white-overlay);
  border: 1px solid var(--color-white-overlay-40);
  color: var(--color-white);
  font-weight: 600;
}

/* Delete button */
.chore-card .chore-delete-btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: var(--color-white-overlay-10);
  border: 1px solid var(--color-white-overlay);
  border-radius: var(--radius-md);
  color: var(--color-white-overlay-70);
  cursor: pointer;
  transition: all 150ms ease;
}

.chore-card .chore-delete-btn:hover {
  background: var(--color-white-overlay);
  color: var(--color-white);
  transform: scale(1.05);
}

/* Category assignment button (for uncategorized quicklist chores) */
.chore-card .chore-category-btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: var(--color-white-overlay-10);
  border: 1px solid var(--color-white-overlay);
  border-radius: var(--radius-md);
  color: var(--color-white-overlay-70);
  cursor: pointer;
  transition: all 150ms ease;
}

.chore-card .chore-category-btn:hover {
  background: var(--color-white-overlay);
  color: var(--color-white);
  transform: scale(1.05);
}

/* Ensure SVG icons inside chore cards inherit white color */
.chore-card svg,
.chore-card .chore-delete-btn svg,
.chore-card .chore-category-btn svg {
  color: inherit;
  stroke: currentcolor;
}

/* ===========================================
   SHOELACE SKELETON LOADING STATES
   =========================================== */

/* Skeleton for section headers */
.skeleton-header {
  --border-radius: var(--radius-md);

  height: 2rem;
  width: 200px;
}

/* Skeleton for subtext */
.skeleton-subtext {
  --border-radius: var(--radius-sm);

  height: 1rem;
  width: 300px;
  margin: 0 auto;
}

/* Skeleton for chore cards */
.skeleton-card {
  --border-radius: var(--radius-xl);

  height: 60px;
  width: 100%;
}

/* Skeleton for avatar */
.skeleton-avatar {
  --border-radius: 50%;

  height: 48px;
  width: 48px;
  flex-shrink: 0;
}

/* Skeleton for name */
.skeleton-name {
  --border-radius: var(--radius-md);

  height: 1.5rem;
  width: 120px;
}

/* Skeleton for earnings cards */
.skeleton-earnings {
  --border-radius: var(--radius-xl);

  height: 100px;
  width: 100%;
}

/* Customize Shoelace skeleton colors to match theme */
sl-skeleton {
  --color: var(--color-neutral-300);
  --sheen-color: var(--color-neutral-200);
}

/* ===========================================
   TOAST NOTIFICATIONS
   =========================================== */

/* Override Shoelace's default toast stack position (top-right) to bottom-right */
.sl-toast-stack {
  top: auto;
  bottom: 1rem;
}

/* Mobile: position above bottom nav */
@media (width <= 640px) {
  .sl-toast-stack {
    left: 1rem;
    right: 1rem;
    bottom: 5rem;
  }
}

/* Customize Shoelace alert toast appearance */
.sl-toast-stack sl-alert {
  --box-shadow: 0 4px 12px var(--color-overlay-light);
}

/* ===========================================
   PRINT STYLES
   =========================================== */

@media print {
  .no-print {
    display: none !important;
  }
  
  .card {
    box-shadow: none;
    border: 1px solid var(--color-neutral-300);
  }
}

/* Confetti is now handled by canvas-confetti library - no CSS needed */

/* Success message animation */
.success-message {
  animation: success-bounce 0.6s ease-out;
}

@keyframes success-bounce {
  0% {
    transform: scale(0) rotate(-5deg);
    opacity: 0;
  }

  50% {
    transform: scale(1.1) rotate(2deg);
    opacity: 1;
  }

  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

/* Touch-friendly improvements
   These !important declarations are intentional to override Tailwind utility classes on touch devices */
/* stylelint-disable declaration-no-important, selector-class-pattern, design-tokens/no-hardcoded-colors */
@media (hover: none) and (pointer: coarse) {
  /* Touch device styles */
  .cursor-pointer {
    cursor: default;
  }
  
  /* Larger touch targets */
  .touch-target {
    min-height: 48px;
    min-width: 48px;
  }
  
  /* Disable problematic hover effects on touch to avoid sticky hover,
     but do NOT reset background-color or text color which can hide content */
  *:hover {
    box-shadow: inherit !important;
    border-color: inherit !important;
    transform: inherit !important;
  }


  /* preserve modal overlay backdrop on first tap in iOS safari where :hover can stick */
  .modal-overlay:hover {
    background-color: var(--color-overlay) !important;
  }

  .modal-panel:hover {
    background-color: var(--color-surface-3) !important;
  }
  
  /* Specifically disable common hover classes used throughout the app */
  .hover\:bg-blue-50:hover,
  .hover\:bg-blue-200:hover,
  .hover\:bg-blue-600:hover,
  .hover\:bg-green-600:hover,
  .hover\:bg-red-600:hover,
  .hover\:bg-red-700:hover,
  .hover\:bg-gray-50:hover,
  .hover\:bg-gray-200:hover,
  .hover\:bg-gray-600:hover,
  .hover\:bg-purple-200:hover,
  .hover\:bg-purple-600:hover,
  .hover\:border-blue-300:hover,
  .hover\:shadow-md:hover,
  .hover\:scale-102:hover,
  .hover\:scale-105:hover,
  .hover\:text-red-700:hover,
  .hover\:text-blue-800:hover {
    background-color: inherit !important;
    box-shadow: inherit !important;
    border-color: inherit !important;
    transform: inherit !important;
    color: inherit !important;
  }

  
  /* Disable group-hover effects on touch devices - this is critical for mobile interactions */
  .group:hover .group-hover\:opacity-100,
  .group:hover .group-hover\:opacity-75,
  .group:hover .group-hover\:opacity-50 {
    opacity: inherit !important;
  }
  
  .group:hover .group-hover\:bg-blue-50,
  .group:hover .group-hover\:bg-blue-100,
  .group:hover .group-hover\:bg-gray-100,
  .group:hover .group-hover\:bg-red-600 {
    background-color: inherit !important;
  }
  
  /* Ensure delete buttons don't interfere with main touch target */
  .group .touch-target[class*="absolute"] {
    pointer-events: auto;
    z-index: 2;
  }
}
/* stylelint-enable declaration-no-important, selector-class-pattern, design-tokens/no-hardcoded-colors */

/* Mobile-specific improvements */
@media (width <= 640px) {
  /* Reduce visual noise on mobile */
  body {
    background-image: none;
  }

  /* Increase nav menu width on mobile for better version display */
  .nav-menu {
    width: 220px; /* Wider on mobile to accommodate version text */
    min-width: 220px;
  }

  /* Improve version text wrapping on mobile */
  .nav-item-version {
    word-break: break-word;
    hyphens: auto;
    line-height: 1.4;
  }

  [style*="--color-border-card"] {
    border-color: var(--color-neutral-200) !important;
    box-shadow: none !important;
  }

  .card {
    box-shadow: none;
    border-color: var(--color-neutral-200);
  }

  /* Dramatically larger buttons on mobile for readability */
  .btn-primary,
  .btn-secondary,
  .btn-success,
  .btn-warning,
  .btn-error {
    font-size: 1.25rem; /* ~20px (was 14px) */
    min-height: 64px;   /* larger touch target */
    padding: var(--space-4) var(--space-5); /* increase visual weight */
    border-radius: var(--radius-xl);
  }

  /* Scale icons inside buttons to match increased text size */
  .btn-primary svg,
  .btn-secondary svg,
  .btn-success svg,
  .btn-warning svg,
  .btn-error svg {
    width: 1.25em;
    height: 1.25em;
  }

  /* Sticky bottom action bar for key actions */
  .mobile-sticky-actions {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-3) calc(var(--space-3) + env(safe-area-inset-bottom));
    background: var(--color-bg-card);
    border-top: 1px solid var(--color-border-card);
    box-shadow: 0 -6px 16px var(--color-overlay-subtle);
    z-index: 50;
  }

  /* Floating Add Button (FAB) for shopping */
  .fab-add-item {
    position: fixed;
    right: var(--space-4);
    bottom: calc(var(--space-4) + env(safe-area-inset-bottom));
    width: 56px;
    height: 56px;
    border-radius: var(--radius-full);
    background: var(--gradient-success);
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-lg);
    border: none;
    z-index: 60;
  }

  .fab-add-item:active {
    transform: scale(0.96);
  }

  /* Ensure minimum touch target size */
  .touch-target {
    min-height: 48px;
    min-width: 48px;
    padding: var(--space-3);
  }
  
  /* Improve spacing on mobile */
  .mobile-spacing {
    padding: var(--space-4) var(--space-3);
    margin-bottom: var(--space-4);
  }
  
  /* Better text wrapping on mobile */
  .line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  
  /* Larger interactive elements */
  input[type="checkbox"] {
    min-height: 20px;
    min-width: 20px;
  }
  
  /* Better button sizing */
  button {
    min-height: 48px;
    padding: var(--space-3) var(--space-4);
  }
  
  /* Improved focus states for accessibility */
  button:focus,
  input:focus,
  .touch-target:focus {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
  }
  
  /* Better visual feedback for taps */
  .touch-target:active {
    transform: scale(0.95);
    transition: transform 0.1s ease;
  }
  
  /* Prevent text selection on interactive elements */
  .touch-target {
    user-select: none;
  }
}

/* Consistent focus ring across button variants */
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-success:focus-visible,
.btn-warning:focus-visible,
.btn-error:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

/* ===========================================
   STANDARD ICON BUTTONS
   =========================================== */
.btn-icon {
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  border: none;
  box-shadow: var(--shadow-sm);
}

/* stylelint-disable declaration-no-important -- Required to override inline styles on delete buttons */

/* Uniformize existing circular remove/delete buttons without touching markup */
button.rounded-full[title*="Remove"],
button.rounded-full[title*="Delete"] {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: var(--gradient-error) !important;
  color: var(--color-white) !important;
  border: none;
  box-shadow: var(--shadow-md); /* subtle depth */
  padding: 0;
  font-size: 16px; /* ensure the × character is visible */
  line-height: 1;  /* vertical centering */
  font-weight: 700;
  opacity: 1 !important; /* avoid inconsistent transparency */
}
/* stylelint-enable declaration-no-important */

button.rounded-full[title*="Remove"] svg,
button.rounded-full[title*="Delete"] svg {
  width: 16px;
  height: 16px;
}

@media (width <= 640px) {
  button.rounded-full[title*="Remove"],
  button.rounded-full[title*="Delete"] {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    font-size: 18px;
  }
}

.btn-icon svg {
  width: 18px;
  height: 18px;
}

.btn-icon--danger {
  background: var(--gradient-error);
  color: var(--color-white);
}

@media (width <= 640px) {
  .btn-icon {
    width: 36px;
    height: 36px;
  }

  .btn-icon svg {
    width: 20px;
    height: 20px;
  }
}

/* Legacy toggle switch styles removed - replaced with Shoelace */

/* Family card actions layout - mobile friendly */
.card-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.toggle-row {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.toggle-row > span {
  color: var(--color-text-secondary);
}

/* Shoelace switch styling for family cards */
.family-card-switch::part(control) {
  background: var(--color-white-overlay);
  border: 1px solid var(--color-white-overlay-light);
  height: 18px;
}

.family-card-switch::part(control--checked) {
  background: var(--color-success-500);
  border-color: var(--color-success-600);
}

.family-card-switch::part(thumb) {
  background: var(--color-white);
  box-shadow: 0 1px 3px var(--color-overlay);
}

.family-card-switch::part(control):focus-visible {
  outline: 2px solid var(--color-white-overlay-strong);
  outline-offset: 2px;
}

@media (width <= 640px) {
  .card-actions {
    flex-wrap: wrap;
    row-gap: var(--space-3);
  }

  .toggle-row {
    width: 100%;
    justify-content: space-between;
  }
}

/* Tablet optimizations */
@media (width >= 641px) and (width <= 1024px) {
  .touch-target {
    min-height: 44px;
    min-width: 44px;
  }
}

/* Improved accessibility */
/* stylelint-disable declaration-no-important -- Required for accessibility override */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
/* stylelint-enable declaration-no-important */

/* slide-fade transition for expandable cards */
.slide-fade-enter-active,
.slide-fade-leave-active {
  transition: all 180ms ease;
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  opacity: 0;
  transform: translateY(-4px);
  max-height: 0;
}

.slide-fade-enter-to,
.slide-fade-leave-from {
  opacity: 1;
  transform: translateY(0);
}

/* Shopping item list animations - FLIP animation for reordering */
.shopping-items-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  position: relative;
}

.shopping-item {
  /* Needed for FLIP animation to work properly */
  transition: transform 300ms ease, opacity 200ms ease;
}

/* Move animation - the magic for position changes */
.shopping-item-move {
  transition: transform 300ms ease;
}

/* Enter animation - new items fade in from right */
.shopping-item-enter-active {
  transition: all 250ms ease-out;
}

.shopping-item-enter-from {
  opacity: 0;
  transform: translateX(20px);
}

/* Leave animation - removed items fade out */
.shopping-item-leave-active {
  transition: all 200ms ease-in;
  position: absolute;
  width: 100%;
}

.shopping-item-leave-to {
  opacity: 0;
  transform: translateX(-20px);
}

/* Checkbox bounce animation */
.checkbox-icon {
  transition: transform 150ms ease;
}

.checkbox-checked {
  animation: checkbox-bounce 400ms ease;
}

@keyframes checkbox-bounce {
  0% {
    transform: scale(1);
  }

  25% {
    transform: scale(1.3);
  }

  50% {
    transform: scale(0.9);
  }

  75% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(1);
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .border-dashed {
    border-width: 3px;
  }
  
  .shadow-sm {
    box-shadow: 0 2px 4px var(--color-overlay);
  }
  
  .ring-4 {
    --tw-ring-width: 6px;
  }
}

/* Improve visual feedback for selected items */
.selected-chore {
  transform: scale(1.05);
  box-shadow: 0 0 0 4px var(--color-primary-overlay-50);
  z-index: 10;
  position: relative;
}

/* When a chore is selected, keep the highlight to the outer card only */
.selected-chore .bg-white.bg-opacity-20:not(.family-card *, .family-avatar) { background-color: transparent !important; }

/* Fallback for utility class order variations */
.selected-chore [class*="bg-white"][class*="bg-opacity-20"]:not(.family-card *, .family-avatar) { background-color: transparent !important; }

  /* Ensure family cards maintain their styling when in selected state */
  .family-card {
    background: var(--color-primary-500) !important;
    border-color: var(--color-primary-600) !important;
  }

  /* Prevent family cards from responding to touch/hover interactions */
  .family-card {
    pointer-events: auto; /* Allow clicks on the toggle button */
  }

  .family-card:hover {
    transform: none !important;
    box-shadow: inherit !important;
  }

  /* On touch devices, prevent family card background changes but allow toggle button */
  @media (hover: none) and (pointer: coarse) {
    .family-card:hover,
    .family-card:active {
      background-color: var(--color-primary-500) !important;
      border-color: var(--color-primary-600) !important;
      transform: none !important;
    }

    /* Ensure the toggle button still works on touch devices */
    .family-card button[aria-expanded] {
      pointer-events: auto;
    }
  }


/* Enhanced mobile selected state */
@media (width <= 640px) {
  .selected-chore {
    transform: scale(1.02);
    box-shadow: 0 0 0 3px var(--color-primary-overlay-60);
  }
  
  /* Ensure selection ring is visible on mobile */
  .ring-4 {
    box-shadow: 0 0 0 4px var(--color-primary-overlay-75) !important;
    position: relative !important;
    z-index: 10 !important;
    animation: mobile-ring-appear 0.1s ease-out !important;
  }
  
  .ring-blue-400 {
    --tw-ring-color: rgb(96 165 250 / 75%) !important;
  }
  
  /* Force hardware acceleration for better rendering */
  .transform {
    transform: translateZ(0) !important;
  }
  
  /* Animation to force repaint on mobile */
  @keyframes mobile-ring-appear {
    0% {
      box-shadow: 0 0 0 0 var(--color-primary-overlay-75);
    }

    100% {
      box-shadow: 0 0 0 4px var(--color-primary-overlay-75);
    }
  }
}

/* ============================================
   THEME INITIALIZATION
   ============================================ */

/* JavaScript will be added here to initialize themes */ 

/* Header nav (mobile) */
.nav-trigger {
  background: var(--color-bg-card);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-card);
  border-radius: var(--radius-xl);
  padding: var(--space-2) var(--space-3);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  backdrop-filter: saturate(120%) blur(6px);
  box-shadow: var(--shadow-sm);
}

.nav-trigger:focus-visible {
  outline: 2px solid var(--color-primary-500);
  outline-offset: 2px;
}

.nav-menu {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-card);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  min-width: 200px; /* Ensure minimum width for version text */
}

.nav-item {
  width: 100%;
  text-align: left;
  color: var(--color-text-primary);
  background: transparent;
  border: none;
  padding: var(--space-3);
  font-size: 0.95rem;
  cursor: pointer;
}

.nav-item + .nav-item { border-top: 1px solid var(--color-border-card); }

@media (hover: hover) {
  .nav-item:hover {
    background: var(--color-bg-card-hover);
  }
}

/* Header action button sizing to align with nav */
.header-bar .btn-error {
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-xl);
}

@media (width <= 640px) {
  .header-bar .btn-error {
    min-height: 44px !important;
    padding: var(--space-2) var(--space-3) !important;
  }
}

/* Ensure header (and dropdown) sits above content */
.header-bar {
  position: relative;
  z-index: 60;
}

/* ===========================================
   MODERN SHOELACE CHORE PAGE STYLING
   Shoelace component customizations use hardcoded values
   to match the component library's internal styling
   =========================================== */
/* stylelint-disable design-tokens/no-hardcoded-colors, design-tokens/no-arbitrary-spacing, design-tokens/no-arbitrary-radius */

/* Base Shoelace Card Customizations */
sl-card {
  --border-radius: var(--radius-lg);
  --border-width: 1px;

  box-shadow: var(--shadow-sm);
  transition: all 0.2s ease-in-out;
}

sl-card:hover {
  box-shadow: var(--shadow-md);
}

/* Modern Quicklist Section Styling */
sl-card.quicklist-section {
  background: linear-gradient(135deg, var(--color-neutral-50) 0%, #f1f5f9 100%);
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 6px -1px var(--color-overlay-10), 0 2px 4px -1px var(--color-overlay-6);
}

sl-card.quicklist-section::part(header) {
  background: linear-gradient(135deg, var(--color-primary-800) 0%, #7c3aed 100%);
  color: white;
  border-bottom: 1px solid var(--color-white-overlay-10);
  padding: 20px 24px;
}

sl-card.quicklist-section::part(content) {
  padding: 0;
}

/* Modern Quicklist Chore Cards */
sl-card.quicklist-chore-card {
  color: #374151;
  min-height: 140px;
  display: flex;
  flex-direction: column;
  transition: transform 200ms ease;
}

sl-card.quicklist-chore-card::part(base) {
  background: #fff;
  border: 1px solid #e5e7eb;

  /* Shoelace medium elevation */
  box-shadow: 0 2px 8px var(--color-overlay-subtle), 0 5px 5px rgb(0 0 0 / 5%), 0 3px 3px rgb(0 0 0 / 4%);
  transition: box-shadow 200ms ease;
}

sl-card.quicklist-chore-card:hover {
  transform: translateY(-2px);
}

sl-card.quicklist-chore-card:hover::part(base) {
  /* Shoelace large elevation */
  box-shadow: 0 2px 18px rgb(0 0 0 / 9%), 0 12.5px 10px var(--color-overlay-6), 0 6.25px 6.25px rgb(0 0 0 / 5%);
}

sl-card.quicklist-chore-card::part(header) {
  padding: 16px;
  border-bottom: 1px solid #f3f4f6;
  background: #f9fafb;
  flex: 1;
}

sl-card.quicklist-chore-card::part(footer) {
  padding: 12px 16px;
  background: var(--color-neutral-50);
  border-top: 1px solid #f3f4f6;
}

/* Modern Add Quicklist Card */
sl-card.add-quicklist-card {
  background: var(--color-neutral-50);
  border: 2px dashed #cbd5e1;
  min-height: 140px;
  transition: all 0.3s ease;
}

sl-card.add-quicklist-card:hover {
  background: #f1f5f9;
  border-color: #3b82f6;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgb(59 130 246 / 15%);
}

/* Modern Unassigned Section */
sl-card.unassigned-section {
  background: linear-gradient(135deg, #fefce8 0%, var(--color-warning-100) 100%);
  border: 1px solid var(--color-warning-500);
  box-shadow: 0 4px 6px -1px var(--color-overlay-10), 0 2px 4px -1px var(--color-overlay-6);
}

sl-card.unassigned-section::part(header) {
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
  color: white;
  border-bottom: 1px solid var(--color-white-overlay-10);
  padding: 20px 24px;
}

sl-card.unassigned-section::part(content) {
  padding: 0;
}

/* Modern Unassigned Chore Cards */
sl-card.unassigned-chore-card {
  color: #374151;
  min-height: 120px;
  transition: transform 200ms ease;
}

sl-card.unassigned-chore-card::part(base) {
  background: #fff;
  border: 1px solid #e5e7eb;

  /* Shoelace medium elevation */
  box-shadow: 0 2px 8px var(--color-overlay-subtle), 0 5px 5px rgb(0 0 0 / 5%), 0 3px 3px rgb(0 0 0 / 4%);
  transition: box-shadow 200ms ease;
}

sl-card.unassigned-chore-card:hover {
  transform: translateY(-2px);
}

sl-card.unassigned-chore-card:hover::part(base) {
  /* Shoelace large elevation */
  box-shadow: 0 2px 18px rgb(0 0 0 / 9%), 0 12.5px 10px var(--color-overlay-6), 0 6.25px 6.25px rgb(0 0 0 / 5%);
}

sl-card.unassigned-chore-card::part(header) {
  padding: 16px;
  border-bottom: 1px solid #f3f4f6;
  background: #fefce8;
}

sl-card.unassigned-chore-card::part(content) {
  padding: 16px;
}

sl-card.unassigned-chore-card::part(footer) {
  padding: 12px 16px;
  background: var(--color-warning-100);
  border-top: 1px solid var(--color-warning-500);
}

/* Modern Family Section */
sl-card.family-section {
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
  border: 1px solid #10b981;
  box-shadow: 0 4px 6px -1px var(--color-overlay-10), 0 2px 4px -1px var(--color-overlay-6);
}

sl-card.family-section::part(header) {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  color: white;
  border-bottom: 1px solid var(--color-white-overlay-10);
  padding: 20px 24px;
}

sl-card.family-section::part(content) {
  padding: 0;
}

/* Modern Family Member Cards */
sl-card.family-member-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  transition: all 0.3s ease;
}

sl-card.family-member-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px var(--color-overlay-10);
}

sl-card.family-member-card::part(header) {
  padding: 20px;
  border-bottom: 1px solid #f3f4f6;
  background: #f0fdf4;
}

sl-card.family-member-card::part(content) {
  padding: 0;
  overflow: visible;
}

/* Allow flyout to overflow the family member card */
sl-card.family-member-card::part(base) {
  overflow: visible;
}

/* Person card - allow flyout overflow and add bottom padding for last chore */
.person-card {
  overflow: visible;
  padding-bottom: 56px; /* Extra space for flyout when last chore is expanded */
}

/* Modern Assigned Chore Cards (inside family member cards) */
sl-card.assigned-chore-card {
  color: #374151;
  margin-bottom: 8px;
  transition: transform 200ms ease;
}

sl-card.assigned-chore-card::part(base) {
  background: #fff;
  border: 1px solid #e5e7eb;

  /* Shoelace medium elevation */
  box-shadow: 0 2px 8px var(--color-overlay-subtle), 0 5px 5px rgb(0 0 0 / 5%), 0 3px 3px rgb(0 0 0 / 4%);
  transition: box-shadow 200ms ease;
}

sl-card.assigned-chore-card:hover {
  transform: translateY(-2px);
}

sl-card.assigned-chore-card:hover::part(base) {
  /* Shoelace large elevation */
  box-shadow: 0 2px 18px rgb(0 0 0 / 9%), 0 12.5px 10px var(--color-overlay-6), 0 6.25px 6.25px rgb(0 0 0 / 5%);
}

sl-card.assigned-chore-card::part(header) {
  padding: var(--space-3);
  border-bottom: 1px solid #f3f4f6;
  background: #fefce8;
}

sl-card.assigned-chore-card::part(content) {
  padding: var(--space-3);
}

sl-card.assigned-chore-card::part(footer) {
  padding: var(--space-2) var(--space-3);
  background: var(--color-warning-100);
  border-top: 1px solid var(--color-warning-500);
}

/* Modern Earnings Section */
sl-card.earnings-section {
  background: linear-gradient(135deg, var(--color-warning-100) 0%, var(--color-warning-200) 100%);
  border: 1px solid var(--color-warning-500);
  box-shadow: 0 4px 6px -1px var(--color-overlay-10), 0 2px 4px -1px var(--color-overlay-6);
}

sl-card.earnings-section::part(header) {
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
  color: white;
  border-bottom: 1px solid var(--color-white-overlay-10);
  padding: 20px 24px;
}

sl-card.earnings-section::part(content) {
  padding: 0;
}

/* Modern Earnings Cards */
sl-card.earnings-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  cursor: pointer;
  transition: all 0.3s ease;
}

sl-card.earnings-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px var(--color-overlay-light);
}

sl-card.earnings-card::part(header) {
  padding: 24px;
  text-align: center;
  background: #fffbeb;
}

/* Modern Category Icons */
.category-icon {
  flex-shrink: 0;
  position: relative;
}

.category-icon::before {
  content: '';
  position: absolute;
  inset: -2px;
  background: linear-gradient(45deg, #3b82f6, #8b5cf6);
  border-radius: 8px;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.category-icon:hover::before {
  opacity: 1;
}

/* Modern Family Avatar */
.family-avatar {
  background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
  border: 3px solid var(--color-white-overlay-light);
  box-shadow: 0 4px 12px rgb(59 130 246 / 30%);
}

/* Modern Text styling for better readability */
sl-card h3, sl-card h4 {
  color: var(--color-neutral-800);
  margin: 0;
  font-weight: 600;
  line-height: 1.4;
}

sl-card p {
  color: #6b7280;
  margin: 0;
  line-height: 1.5;
}

/* Modern Badge styling */
sl-badge {
  font-size: 0.75rem;
  padding: 4px 10px;
  border-radius: 12px;
  font-weight: 500;
}

/* Modern Button styling within cards */
sl-card sl-button {
  font-size: 0.875rem;
  border-radius: 8px;
}

/* Modern Checkbox styling */
sl-checkbox {
  --size: 20px;
  --border-radius: 4px;
}

/* Modern Responsive Grid - Better breakpoints */
@media (width <= 475px) { /* xs breakpoint */
  .grid-cols-1.xs\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Enhanced responsive adjustments */
@media (width <= 768px) {
  sl-card.quicklist-section::part(header),
  sl-card.unassigned-section::part(header),
  sl-card.family-section::part(header),
  sl-card.earnings-section::part(header) {
    padding: 16px 20px;
  }

  sl-card.family-member-card::part(header),
  sl-card.family-member-card::part(content) {
    padding: 16px;
  }

  sl-card.earnings-card::part(header) {
    padding: 20px;
  }

  /* Stack grid on mobile */
  .grid.grid-cols-1.md\:grid-cols-2 {
    grid-template-columns: 1fr;
  }
}

@media (width <= 640px) {
  .space-y-8 > * + * {
    margin-top: 1.5rem;
  }

  /* Mobile-first header adjustments */
  .sticky.top-0 {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
  }

  /* Ensure content doesn't overlap with fixed header */
  .max-w-7xl {
    padding-top: 4rem;
  }
}

/* Dark mode enhancements */
@media (prefers-color-scheme: dark) {
  sl-card {
    --background: var(--color-neutral-800);
    --border-color: #374151;
  }

  sl-card.quicklist-section {
    background: linear-gradient(135deg, #111827 0%, var(--color-neutral-800) 100%);
  }

  sl-card.unassigned-section {
    background: linear-gradient(135deg, #451a03 0%, #7c2d12 100%);
  }

  sl-card.family-section {
    background: linear-gradient(135deg, #064e3b 0%, #065f46 100%);
  }

  sl-card.earnings-section {
    background: linear-gradient(135deg, var(--color-warning-800, #78350f) 0%, var(--color-warning-700) 100%);
  }
}

/* Animation enhancements */
@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

sl-card {
  animation: slideInUp 0.3s ease-out;
}

/* Focus states for accessibility */
sl-card:focus-within {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

sl-button:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

/* Loading animation enhancements */
sl-spinner {
  --track-color: #e5e7eb;
  --indicator-color: #3b82f6;
}

/* Print styles */
@media print {
  sl-card {
    box-shadow: none;
    border: 1px solid var(--color-neutral-300);
  }

  sl-button {
    display: none;
  }
}
/* stylelint-enable design-tokens/no-hardcoded-colors, design-tokens/no-arbitrary-spacing, design-tokens/no-arbitrary-radius */

/* ===========================================
   DASHBOARD & WIDGET SYSTEM STYLES
   =========================================== */

/* Dashboard Page */
.dashboard-page {
  padding: 1.5rem;
  max-width: 1600px;
  margin: 0 auto;
  min-height: 100vh;
}

@media (width <= 768px) {
  .dashboard-page {
    padding: 1rem;
  }
}

@media (width <= 480px) {
  .dashboard-page {
    padding: 0.75rem;
  }
}

.dashboard-header {
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-border-card);
}

.dashboard-header h1 {
  margin-bottom: 0.5rem;
}

/* Dashboard Grid */
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  gap: 1rem;
  grid-auto-rows: minmax(160px, auto);
  padding-bottom: 2rem;
  max-width: 100%;
}

/* Responsive Grid Breakpoints - Only apply on smaller screens */
@media (width <= 1920px) {
  .dashboard-grid {
    grid-template-columns: repeat(24, 1fr);
    gap: 1rem;
    grid-auto-rows: minmax(160px, auto);
  }
}

@media (width <= 1600px) {
  .dashboard-grid {
    grid-template-columns: repeat(20, 1fr);
    gap: 1rem;
    grid-auto-rows: minmax(140px, auto);
  }

  .dashboard-widget-wrapper {
    /* Allow widgets to use up to 12 columns on large screens */
    grid-column: span min(var(--widget-width, 2), 12);
  }
}

@media (width <= 1200px) {
  .dashboard-grid {
    grid-template-columns: repeat(16, 1fr);
    gap: 1rem;
    grid-auto-rows: minmax(140px, auto);
  }

  .dashboard-widget-wrapper {
    /* Adjust widget spans for medium screens */
    grid-column: span min(var(--widget-width, 2), 8);
  }
}

@media (width <= 768px) {
  .dashboard-grid {
    grid-template-columns: repeat(8, 1fr);
    gap: 0.75rem;
    grid-auto-rows: minmax(130px, auto);
  }

  .dashboard-widget-wrapper {
    /* Adjust widget spans for tablets */
    grid-column: span min(var(--widget-width, 2), 6);
  }
}

@media (width <= 480px) {
  .dashboard-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    grid-auto-rows: minmax(120px, auto);
  }

  .dashboard-widget-wrapper {
    /* Full width on mobile */
    grid-column: span 1;
    grid-row: auto;
  }
}

/* Widget Wrapper */
.dashboard-widget-wrapper {
  position: relative;
  transition: all 0.2s ease;
}

.dashboard-widget-wrapper.edit-mode {
  outline: 2px dashed var(--color-primary-300);
  outline-offset: 4px;
}

.dashboard-widget-wrapper.edit-mode:hover {
  outline-color: var(--color-primary-500);
  transform: scale(1.01);
  z-index: 10;
}

.dashboard-widget-wrapper.resizing {
  outline: var(--color-primary-600) solid 3px;
  transform: none;
  transition: none;
  z-index: 100;
}

/* Widget Controls Container */
.widget-controls {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  z-index: 30;
  pointer-events: none; /* Allow clicks to pass through to children */
}

/* Remove Button (Top-Right Corner) */
.widget-remove-btn {
  position: absolute;
  top: -16px;
  right: -16px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-error, #ef4444);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0.8;
  transition: all 0.2s ease;
  color: white;
  box-shadow: 0 2px 4px var(--color-overlay-medium);
  z-index: 35;
}

.widget-remove-btn:hover {
  opacity: 1;
  background: var(--color-error-dark, #dc2626);
  transform: scale(1.1);
}

.widget-remove-btn:active {
  transform: scale(0.95);
}

/* Resize Handle */
.widget-resize-handle {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary-500);
  border-top-left-radius: var(--radius-md);
  cursor: nwse-resize;
  opacity: 0;
  transition: opacity 0.2s ease, background-color 0.2s ease;
  color: white;
  z-index: 10;
}

.dashboard-widget-wrapper.edit-mode:hover .widget-resize-handle {
  opacity: 0.7;
}

.widget-resize-handle:hover {
  opacity: 1 !important;
  background: var(--color-primary-600);
}

.widget-resize-handle:active {
  background: var(--color-primary-700);
}

.dashboard-widget-wrapper.resizing .widget-resize-handle {
  opacity: 1;
  background: var(--color-primary-700);
}

/* Prevent text selection during resize */
body.resizing-widget {
  user-select: none;
  cursor: nwse-resize !important;
}

body.resizing-widget * {
  cursor: nwse-resize !important;
}

/* Advice Widget Styles */
.advice-widget .advice-body {
  padding: 0;
}

.advice-widget .advice-content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.advice-widget .advice-main {
  padding: 1.5rem;
  background: linear-gradient(135deg, var(--color-secondary-50) 0%, var(--color-secondary-100) 100%);
  border-radius: var(--radius-md);
  margin: 1rem;
  text-align: center;
}

.advice-widget .advice-text {
  font-size: 1.125rem;
  font-style: italic;
  line-height: 1.6;
  color: var(--color-text-primary);
  margin-bottom: 1rem;
}

.advice-widget .advice-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  margin-top: 1rem;
}


.advice-widget .advice-favorites {
  padding: 0 1rem 1rem;
  margin-top: auto;
}

.advice-widget .favorites-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  margin-bottom: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.advice-widget .favorites-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.advice-widget .favorite-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-card);
  border-radius: var(--radius-md);
}

.advice-widget .favorite-advice {
  flex: 1;
  font-size: 0.875rem;
  color: var(--color-text-primary);
  line-height: 1.4;
}

.advice-widget .favorite-remove {
  padding: 0.25rem;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-secondary);
}

.advice-widget .favorite-remove:hover {
  color: var(--color-error, #ef4444);
  background: var(--color-error-bg, #fef2f2);
}

.advice-widget .favorites-toggle {
  margin-top: 0.5rem;
  width: 100%;
}

/* Responsive adjustments for advice widget */
@media (width <= 768px) {
  .advice-widget .advice-text {
    font-size: 1rem;
  }

  .advice-widget .advice-actions {
    flex-direction: column;
    gap: 0.25rem;
  }
}

/* Trivia Widget Styles */
.trivia-widget .trivia-body {
  padding: 0;
}

.trivia-widget .trivia-content {
  display: flex;
  flex-direction: column;
}

.trivia-widget .question-card {
  background: linear-gradient(135deg, var(--color-info-50) 0%, var(--color-info-100) 100%);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  margin: 1rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.trivia-widget .question-info {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.trivia-widget .question-category {
  background: var(--color-primary-100);
  color: var(--color-primary-700);
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
}

.trivia-widget .question-difficulty {
  background: var(--color-secondary-100);
  color: var(--color-secondary-700);
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
}

.trivia-widget .question-difficulty.easy {
  background: var(--color-success-100);
  color: var(--color-success-700);
}

.trivia-widget .question-difficulty.medium {
  background: var(--color-warning-100);
  color: var(--color-warning-700);
}

.trivia-widget .question-difficulty.hard {
  background: var(--color-error-100);
  color: var(--color-error-700);
}

.trivia-widget .question-type {
  background: var(--color-gray-100);
  color: var(--color-gray-700);
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
}

.trivia-widget .question-text {
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-text-primary);
  margin-bottom: 1.5rem;
  flex: 1;
}

.trivia-widget .answer-options {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.trivia-widget .answer-option {
  padding: 0.75rem 1rem;
  background: var(--color-surface-1);
  border-radius: var(--radius-md);
  transition: all 0.2s ease;
  text-align: center;
  font-weight: 500;
  outline: none !important;
  user-select: none;
  cursor: pointer;
  width: 100%;
  color: var(--color-text-primary);
}

.trivia-widget .answer-option:focus {
  outline: none !important;
  box-shadow: none !important;
}

.trivia-widget .answer-option:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

.trivia-widget .answer-option:hover:not(.correct, .incorrect, .selected) {
  /* No hover background */
}

.trivia-widget .answer-option.selected {
  background: var(--color-info-100);
  font-weight: 600;
  color: var(--color-primary-800);
}

.trivia-widget .answer-option.correct {
  background: var(--color-success-100);
  color: var(--color-success-700);
  font-weight: 600;
}

.trivia-widget .answer-option.incorrect {
  background: var(--color-error-100);
  color: var(--color-error-700);
  opacity: 0.6;
}


.trivia-widget .answer-section {
  margin-bottom: 1.5rem;
  padding: 1rem;
  background: var(--color-surface-1);
  border-radius: var(--radius-md);
}

.trivia-widget .correct-answer {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-success-700);
  text-align: center;
}

.trivia-widget .trivia-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  margin-top: auto;
}

/* Rate limiting indicator */
.trivia-widget .rate-limit-indicator {
  background: linear-gradient(135deg, var(--color-warning-100) 0%, var(--color-warning-200) 100%);
  border: 1px solid var(--color-warning-500);
  border-radius: var(--radius-md);
  padding: 0.75rem;
  margin: 0.75rem;
  text-align: center;
}

.trivia-widget .rate-limit-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.trivia-widget .rate-limit-badge span {
  font-weight: 600;
  color: var(--color-warning-700);
  font-size: 0.875rem;
}

.trivia-widget .rate-limit-badge small {
  color: var(--color-warning-800, #78350f);
  font-size: 0.75rem;
}

/* Responsive adjustments for trivia widget */
@media (width <= 768px) {
  .trivia-widget .question-card {
    padding: 1rem;
    margin: 0.75rem;
  }

  .trivia-widget .question-text {
    font-size: 1rem;
  }

  .trivia-widget .answer-option {
    padding: 0.625rem 0.875rem;
  }

  .trivia-widget .trivia-actions {
    flex-direction: column;
    gap: 0.5rem;
  }
}

/* Widget Container */
.widget-container {
  display: flex;
  flex-direction: column;
  min-height: 150px;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 1px 3px 0 var(--color-overlay-10), 0 1px 2px 0 var(--color-overlay-6);
  transition: all 0.2s ease;
}

.widget-container:hover {
  box-shadow: 0 4px 6px -1px var(--color-overlay-10), 0 2px 4px -1px var(--color-overlay-6);
}

/* Widget Header */
.widget-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--color-border-card);
  background: var(--color-bg-card);
  flex-shrink: 0;
}

@media (width <= 768px) {
  .widget-header {
    padding: 1rem;
  }
}

.widget-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
  line-height: 1.5;
}

@media (width <= 768px) {
  .widget-title {
    font-size: 1rem;
  }
}

.widget-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.widget-action-btn {
  padding: 0.25rem 0.5rem;
  background: transparent;
  border: none;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s;
  font-size: 1rem;
}

.widget-action-btn:hover {
  opacity: 1;
}

.widget-action-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* Widget Body */
.widget-body {
  flex: 1;
  padding: 1rem;
  overflow: auto;
  min-height: 0; /* Important for flex children with overflow */
}

@media (width <= 768px) {
  .widget-body {
    padding: 1rem;
  }
}

.widget-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Widget States */
.widget-loading,
.widget-error,
.widget-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  text-align: center;
}

.widget-error {
  color: var(--color-error-600);
}

.widget-empty {
  color: var(--color-text-secondary);
}

/* Earnings Summary Widget Specific */
.earnings-summary-widget .earnings-summary-total {
  text-align: center;
  padding: 1.25rem;
  margin: -0.5rem -0.5rem 0.5rem;
}

.earnings-summary-widget .earnings-individuals {
  max-height: 400px;
  overflow-y: auto;
  padding-right: 0.5rem;
}

/* Custom scrollbar for individuals list */
.earnings-summary-widget .earnings-individuals::-webkit-scrollbar {
  width: 6px;
}

.earnings-summary-widget .earnings-individuals::-webkit-scrollbar-track {
  background: transparent;
}

.earnings-summary-widget .earnings-individuals::-webkit-scrollbar-thumb {
  background: var(--color-border-card);
  border-radius: var(--radius-sm);
}

.earnings-summary-widget .earnings-individuals::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-secondary);
}

.earnings-summary-widget .earnings-member {
  padding: 0.875rem;
  margin-bottom: 0.5rem;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.earnings-summary-widget .spend-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-success-100);
  color: var(--color-success-600);
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color 0.15s ease, transform 0.1s ease;
  -webkit-tap-highlight-color: transparent;
}

.earnings-summary-widget .spend-btn:hover {
  background: var(--color-success-200);
}

.earnings-summary-widget .spend-btn:active {
  transform: scale(0.95);
  background: var(--color-success-300);
}

.earnings-summary-widget.compact .widget-body {
  padding: 1rem;
}

.earnings-summary-widget.compact .earnings-member {
  padding: 0.625rem;
}

.earnings-summary-widget.compact .earnings-summary-total {
  padding: 1rem;
}

/* Weather Widget Styles */
.weather-widget .weather-body {
  padding: 0;
}

.weather-widget .weather-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.weather-widget .current-weather {
  padding: 1.5rem;
  background: linear-gradient(135deg, var(--color-primary-50) 0%, var(--color-primary-100) 100%);
  border-radius: var(--radius-md);
  margin: 1rem;
}

.weather-widget .weather-main {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.weather-widget .weather-icon {
  width: 80px;
  height: 80px;
  filter: drop-shadow(0 2px 4px var(--color-overlay-10));
}

.weather-widget .weather-temp {
  flex: 1;
}

.weather-widget .temp-current {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--color-text-primary);
}

.weather-widget .temp-feels {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  margin-top: 0.25rem;
}

.weather-widget .weather-description {
  font-size: 1rem;
  color: var(--color-text-primary);
  font-weight: 500;
  text-transform: capitalize;
  margin-bottom: 0.75rem;
}

.weather-widget .weather-details {
  display: flex;
  gap: 1.5rem;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--color-overlay-10);
}

.weather-widget .detail-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}

.weather-widget .detail-icon {
  font-size: 1.125rem;
}

.weather-widget .forecast {
  padding: 0 1rem 1rem;
}

.weather-widget .forecast-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  margin-bottom: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.weather-widget .forecast-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.5rem;
}

.weather-widget .forecast-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.75rem 0.5rem;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-card);
  border-radius: var(--radius-md);
  transition: all 0.2s;
}

.weather-widget .forecast-day:hover {
  background: var(--color-primary-50);
  border-color: var(--color-primary-200);
  transform: translateY(-2px);
  box-shadow: 0 2px 4px var(--color-overlay-10);
}

.weather-widget .forecast-day-name {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-secondary);
}

.weather-widget .forecast-icon {
  width: 40px;
  height: 40px;
}

.weather-widget .forecast-temps {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.125rem;
  font-size: 0.75rem;
}

.weather-widget .temp-high {
  color: var(--color-text-primary);
  font-weight: 600;
}

.weather-widget .temp-low {
  color: var(--color-text-secondary);
}

/* Responsive adjustments for weather widget */
@media (width <= 768px) {
  .weather-widget .forecast-days {
    grid-template-columns: repeat(4, 1fr);
  }
  
  .weather-widget .forecast-day:nth-child(n+5) {
    display: none;
  }
  
  .weather-widget .weather-icon {
    width: 60px;
    height: 60px;
  }
  
  .weather-widget .temp-current {
    font-size: 2rem;
  }
}

@media (width <= 480px) {
  .weather-widget .forecast-days {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .weather-widget .forecast-day:nth-child(n+4) {
    display: none;
  }
  
  .weather-widget .weather-details {
    flex-direction: column;
    gap: 0.5rem;
  }
}

/* ===========================================
   CAMERA WIDGET STYLES
   Live camera stream via go2rtc
   =========================================== */

.camera-widget .camera-body {
  padding: 0;
  position: relative;
  background: var(--color-black, #000);
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.camera-widget .camera-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--color-black, #000);
}

.camera-widget .camera-video--hidden {
  display: none;
}

.camera-widget .camera-iframe {
  width: 100%;
  height: 100%;
  min-height: 250px;
  border: none;
  background: var(--color-black, #000);
}

.camera-widget .camera-iframe--hidden {
  display: none;
}

.camera-widget .camera-loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  background: var(--color-overlay-dark, rgb(0 0 0 / 80%));
  color: white;
}

.camera-widget .camera-loading p {
  margin: 0;
  font-size: var(--font-size-sm);
}

.camera-widget .camera-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-6);
  text-align: center;
  color: var(--color-text-secondary);
}

.camera-widget .camera-error-icon {
  color: var(--color-error-400);
}

.camera-widget .camera-error-text {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-error-500);
}

.camera-widget .camera-error-hint {
  margin: var(--space-2) 0;
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  line-height: 1.6;
}

/* ===========================================
   CAMERA PICTURE-IN-PICTURE STYLES
   Floating draggable camera view
   =========================================== */

.camera-pip {
  position: fixed;
  z-index: 500;
  width: 320px;
  background: var(--color-surface-1);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--color-border-card);
  overflow: hidden;
  transition: width 0.2s ease, height 0.2s ease;
}

.camera-pip--minimized {
  width: 160px;
}

.camera-pip--dragging {
  cursor: grabbing;
  user-select: none;
}

.camera-pip-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-2);
  cursor: grab;
  border-bottom: 1px solid var(--color-border-card);
}

.camera-pip--dragging .camera-pip-header {
  cursor: grabbing;
}

.camera-pip-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-primary);
}

.camera-pip-controls {
  display: flex;
  gap: var(--space-1);
}

.camera-pip-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
}

.camera-pip-btn:hover {
  background: var(--color-surface-3);
  color: var(--color-text-primary);
}

.camera-pip-body {
  background: var(--color-black, #000);
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.camera-pip-iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* Mobile adjustments */
@media (width <= 480px) {
  .camera-pip {
    width: 200px;
  }
  
  .camera-pip--minimized {
    width: 120px;
  }
}

/* Camera status indicator */
.camera-status {
  font-size: var(--font-size-xs);
  margin-left: var(--space-2);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.camera-status--connected {
  color: var(--color-success-500);
}

.camera-status--connecting {
  color: var(--color-warning-500);
}

.camera-status--disconnected {
  color: var(--color-error-500);
}

.camera-status .status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-success-500);
  animation: pulse-dot 2s infinite;
}

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

/* Fullscreen mode */
.camera-widget:fullscreen {
  background: var(--color-black, #000);
}

.camera-widget:fullscreen .widget-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: var(--color-overlay-dark, rgb(0 0 0 / 70%));
  z-index: 10;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.camera-widget:fullscreen:hover .widget-header {
  opacity: 1;
}

.camera-widget:fullscreen .camera-body {
  height: 100vh;
}

.camera-widget:fullscreen .camera-video {
  object-fit: contain;
}

/* Calendar Widget Styles */
.calendar-widget .calendar-body {
  padding: 0;
  min-height: 200px;
}

.calendar-widget .calendar-loading,
.calendar-widget .calendar-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-8);
  gap: var(--space-3);
  color: var(--color-text-secondary);
}

.calendar-widget .calendar-config {
  padding: var(--space-4);
}

.calendar-widget .config-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-4);
}

.calendar-widget .config-header h4 {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: 600;
}

.calendar-widget .config-help {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
}

.calendar-widget .config-steps {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-4) var(--space-4);
  padding: 0;
}

.calendar-widget .config-steps li {
  margin-bottom: var(--space-1);
}

.calendar-widget .config-input-group {
  display: flex;
  gap: var(--space-2);
}

.calendar-widget .config-input {
  flex: 1;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border-card);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  background-color: var(--color-surface-1);
  color: var(--color-text-primary);
}

.calendar-widget .config-error {
  color: var(--color-error-500);
  font-size: var(--font-size-sm);
  margin-top: var(--space-2);
}

/* Multi-calendar list */
.calendar-widget .calendar-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.calendar-widget .calendar-list-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-neutral-50);
  border-radius: var(--radius-md);
}

.calendar-widget .calendar-list-item .calendar-name {
  flex: 1;
  font-size: var(--font-size-sm);
}

.calendar-widget .add-calendar-form {
  padding: var(--space-3);
  background: var(--color-neutral-50);
  border-radius: var(--radius-md);
}

.calendar-widget .calendar-events {
  padding: var(--space-3);
  max-height: 400px;
  overflow-y: auto;
}

.calendar-widget .calendar-events.compact .event-item {
  padding: var(--space-1) var(--space-2);
}

.calendar-widget .event-group {
  margin-bottom: var(--space-4);
}

.calendar-widget .event-group:last-child {
  margin-bottom: 0;
}

.calendar-widget .event-date-header {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-primary);
  padding: var(--space-1) 0;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-2);
}

.calendar-widget .event-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.calendar-widget .event-item:hover {
  background: var(--color-primary-50);
}

.calendar-widget .event-item.all-day {
  background: var(--color-secondary-50);
}

/* Calendar color dot (shared) */
.calendar-color-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Calendar legend */
.calendar-legend {
  display: flex;
  gap: var(--space-1);
}

.calendar-legend-item {
  display: flex;
  align-items: center;
}

.calendar-widget .event-time {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  min-width: 60px;
  flex-shrink: 0;
}

.calendar-widget .event-title {
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Event Details Modal */
.calendar-widget .event-modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--color-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.calendar-widget .event-modal {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  max-width: 400px;
  width: 90%;
  max-height: 80vh;
  overflow: hidden;
}

.calendar-widget .event-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.calendar-widget .event-modal-header h4 {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: 600;
  padding-right: var(--space-4);
}

.calendar-widget .event-modal-body {
  padding: var(--space-4);
}

.calendar-widget .event-detail {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.calendar-widget .event-description {
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  white-space: pre-wrap;
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

.calendar-widget .btn-close {
  background: none;
  border: none;
  font-size: var(--font-size-xl);
  color: var(--color-text-secondary);
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

.calendar-widget .btn-close:hover {
  color: var(--color-text-primary);
}

/* Calendar Month View */
.calendar-widget .calendar-month-view {
  padding: var(--space-3);
}

.calendar-widget .month-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.calendar-widget .month-nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: var(--color-neutral-100);
  border-radius: var(--radius-md);
  cursor: pointer;
  color: var(--color-text-secondary);
  transition: all 150ms ease;
}

.calendar-widget .month-nav-btn:hover {
  background: var(--color-primary-100);
  color: var(--color-primary-600);
}

.calendar-widget .month-label {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--color-text-primary);
  min-width: 140px;
  text-align: center;
}

.calendar-widget .today-btn {
  font-size: var(--font-size-xs);
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--color-text-secondary);
  margin-left: var(--space-2);
  transition: all 150ms ease;
}

.calendar-widget .today-btn:hover {
  background: var(--color-primary-50);
  border-color: var(--color-primary-300);
  color: var(--color-primary-600);
}

.calendar-widget .calendar-grid-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--space-px, 1px);
  margin-bottom: var(--space-1);
}

.calendar-widget .day-header {
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--color-text-secondary);
  text-align: center;
  padding: var(--space-1) 0;
}

.calendar-widget .calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--space-0-5, 2px);
}

.calendar-widget .calendar-day {
  aspect-ratio: 1;
  min-height: 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: var(--space-1);
  background: var(--color-surface);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 150ms ease;
  position: relative;
}

.calendar-widget .calendar-day:hover {
  background: var(--color-primary-50);
}

.calendar-widget .calendar-day.other-month {
  opacity: 0.4;
  cursor: default;
}

.calendar-widget .calendar-day.other-month:hover {
  background: var(--color-surface);
}

.calendar-widget .calendar-day.today {
  background: var(--color-primary-100);
  font-weight: 600;
}

.calendar-widget .calendar-day.today .day-number {
  color: var(--color-primary-600);
}

.calendar-widget .calendar-day.selected {
  background: var(--color-primary-500);
}

.calendar-widget .calendar-day.selected .day-number {
  color: white;
}

.calendar-widget .calendar-day.selected:hover {
  background: var(--color-primary-600);
}

.calendar-widget .day-number {
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  line-height: 1;
}

.calendar-widget .event-dots {
  display: flex;
  gap: var(--space-0-5, 2px);
  margin-top: var(--space-0-5, 2px);
  flex-wrap: wrap;
  justify-content: center;
  max-width: 100%;
}

.calendar-widget .event-dot {
  width: 5px;
  height: 5px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.calendar-widget .more-events {
  font-size: 8px;
  color: var(--color-text-secondary);
  line-height: 1;
}

.calendar-widget .calendar-day.selected .event-dot {
  box-shadow: 0 0 0 1px var(--color-overlay-light, rgb(255 255 255 / 50%));
}

.calendar-widget .calendar-day.selected .more-events {
  color: var(--color-text-on-dark, rgb(255 255 255 / 80%));
}

/* Day Events Panel */
.calendar-widget .day-events-panel {
  margin-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-3);
}

.calendar-widget .day-events-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-2);
}

.calendar-widget .day-events-header h4 {
  margin: 0;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-primary);
}

.calendar-widget .day-events-list {
  max-height: 150px;
  overflow-y: auto;
}

.calendar-widget .day-events-list .no-events {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-3);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

.calendar-widget .day-events-list .no-events p {
  margin: 0;
}

/* View Toggle Button */
.calendar-widget .view-toggle-btn {
  background: var(--color-primary-50);
  border-color: var(--color-primary-200);
}

.calendar-widget .view-toggle-btn:hover {
  background: var(--color-primary-100);
}

/* ===========================================
   CALENDAR PANELS (Chore Page Sidebar)
   Styled to match the main content cards
   =========================================== */

.calendar-panel {
  background: var(--color-surface-1);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border-card);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.calendar-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--color-border-card);
}

.calendar-panel-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-text-primary);
}

.calendar-panel-title svg {
  color: var(--color-text-primary);
}

.calendar-panel-date {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

/* Calendar legend - colored dots for multiple calendars */
.calendar-legend {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

.calendar-legend-item {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.calendar-color-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.calendar-panel-body {
  padding: var(--space-4) var(--space-6);
  min-height: 100px;
}

.calendar-panel-loading,
.calendar-panel-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-6);
  color: var(--color-text-secondary);
  text-align: center;
}

.calendar-panel-empty p {
  margin: 0;
  font-size: var(--font-size-sm);
}

.calendar-panel-hint {
  font-size: var(--font-size-xs) !important;
  opacity: 0.7;
}

.calendar-panel-events {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.calendar-event {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
  transition: background-color 0.15s ease;
}

.calendar-event:hover {
  background: var(--color-surface-3);
}

.calendar-event--allday {
  background: var(--color-surface-2);
  border-left: 3px solid var(--color-primary-500);
}

.calendar-event-time {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  min-width: 55px;
  flex-shrink: 0;
}

.calendar-event-title {
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  line-height: 1.4;

  /* Allow wrapping for longer event titles */
  word-break: break-word;
}

/* Week View Styles */
.calendar-week-view {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.calendar-day {
  display: grid;
  grid-template-columns: 48px 1fr 70px;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border-card);
  align-items: center;
}

.calendar-day:last-child {
  border-bottom: none;
}

.calendar-day--today {
  background: var(--color-surface-2);
  margin: 0 calc(-1 * var(--space-6));
  padding: var(--space-2) var(--space-6);
  border-radius: 0;
  border-bottom: none;
}

.calendar-day-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Weather column in calendar day */
.calendar-day-weather {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-1);
  min-width: 70px;
}

.calendar-day-weather--empty {
  min-width: 70px;
}

.calendar-weather-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.calendar-weather-temps {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.calendar-weather-high {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-primary);
}

.calendar-weather-low {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.calendar-day--today .calendar-weather-high {
  color: var(--color-text-primary);
}

/* Header right section */
.calendar-header-right {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.calendar-location {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.calendar-day-name {
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.calendar-day--today .calendar-day-name {
  color: var(--color-text-primary);
}

.calendar-day-date {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-text-primary);
}

.calendar-day--today .calendar-day-date {
  color: var(--color-text-primary);
}

.calendar-day-events {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  justify-content: center;
}

.calendar-day-empty {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.calendar-event--compact {
  padding: var(--space-2) var(--space-3);
  gap: var(--space-2);
  background: var(--color-surface-2);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-card);
  align-items: center;
}

.calendar-event--compact:hover {
  background: var(--color-surface-3);
  border-color: var(--color-primary-500);
}

.calendar-event--compact .calendar-event-title {
  font-size: var(--font-size-sm);
  line-height: 1.3;
}

.calendar-event-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-primary-500);
  flex-shrink: 0;
}

.calendar-event--allday .calendar-event-dot {
  background: var(--color-secondary-500);
}

/* Chore Page Layout with Calendar Sidebar */
.chore-page-layout {
  display: flex;
  gap: var(--space-6);
}

.chore-page-main {
  flex: 1;
  min-width: 0;
}

.chore-page-sidebar {
  width: 380px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  position: sticky;
  top: var(--space-4);
  max-height: calc(100vh - var(--space-8));
  overflow-y: auto;
}

/* Hide sidebar on mobile/tablet */
@media (width <= 1200px) {
  .chore-page-layout {
    flex-direction: column;
  }
  
  .chore-page-sidebar {
    display: none;
  }
}

/* Widget Picker */
.widget-card {
  transition: all 0.2s ease;
  position: relative;
}

.widget-card:hover {
  transform: translateY(-2px);
}

.widget-card:active {
  transform: scale(0.98);
}

/* Line clamp utility for widget descriptions */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Improve modal responsiveness */
@media (width <= 768px) {
  .modal-container {
    max-width: calc(100vw - 2rem);
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
  }
}

/* Better button spacing and sizing */
.btn-primary,
.btn-secondary {
  white-space: nowrap;
  min-height: 44px; /* Better touch target */
}

@media (width <= 480px) {
  .btn-primary,
  .btn-secondary {
    font-size: 0.875rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}


/* ===========================================
   OFFLINE INDICATOR STYLES
   =========================================== */

/* Offline banner transition */
.offline-banner-enter-active,
.offline-banner-leave-active {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.offline-banner-enter-from,
.offline-banner-leave-to {
  transform: translateY(-100%);
  opacity: 0;
}

.offline-banner-enter-to,
.offline-banner-leave-from {
  transform: translateY(0);
  opacity: 1;
}

/* Offline banner base styles */
.offline-banner {
  background-color: var(--color-warning-500); /* amber-500 */
  color: white;
  box-shadow: 0 2px 4px var(--color-overlay-10);
  z-index: 9999;
}

/* Add padding to body when offline banner is shown */
body.has-offline-banner {
  padding-top: var(--space-10);
}


/* ===========================================
   iOS PWA LIFECYCLE FIXES
   =========================================== 
   
   These styles help fix issues when iOS PWA goes to 
   background and returns - CSS can get partially unloaded
   causing black backgrounds and broken styling.
   
   =========================================== */

/* Helper class for forcing style refresh */
html.ios-refresh {
  /* Force a repaint by changing a property */
  transform: translateZ(0);
}

/* Ensure body always has a background color fallback */
body {
  /* Fallback background color in case CSS variables fail */
  background-color: var(--color-neutral-50);
}

/* iOS PWA: Ensure backgrounds are always rendered */
@supports (-webkit-touch-callout: none) {
  /* iOS-specific styles */
  body {
    /* Force GPU layer for better rendering stability */
    transform: translateZ(0);
    backface-visibility: hidden;
  }
  
  /* Ensure main app container maintains its background */
  #app > div {
    /* Fallback background */
    background-color: var(--color-bg-primary, var(--color-neutral-50));

    /* Force compositing layer */
    transform: translateZ(0);
    will-change: background-color;
  }
  
  /* Prevent background from being optimized away */
  .layout-container {
    background-color: inherit;
    transform: translateZ(0);
  }
}

/* Standalone PWA mode specific fixes */
@media all and (display-mode: standalone) {
  body {
    /* Ensure background persists in standalone mode */
    background-color: var(--color-bg-primary, var(--color-neutral-50));
    background-image: linear-gradient(135deg, var(--color-bg-primary, var(--color-neutral-50)) 0%, var(--color-bg-secondary, #f1f5f9) 100%);

    /* Force layer creation */
    transform: translateZ(0);
  }
  
  #app {
    /* Ensure app container has background */
    min-height: 100vh;
    background-color: inherit;
  }
  
  #app > div {
    /* Force background inheritance */
    background-color: var(--color-bg-primary, var(--color-neutral-50));
    background-image: linear-gradient(135deg, var(--color-bg-primary, var(--color-neutral-50)) 0%, var(--color-bg-secondary, #f1f5f9) 100%);
  }
}

/* iOS Safari PWA: Handle visibility state changes */
@supports (-webkit-overflow-scrolling: touch) {
  /* Older iOS Safari detection */
  body {
    -webkit-overflow-scrolling: touch;
  }
  
  /* Ensure cards maintain their backgrounds */
  .card,
  .modal-panel,
  .nav-menu {
    background-color: var(--color-surface-1);
    transform: translateZ(0);
  }
}

/* Prevent black flash on iOS when returning from background */
html {
  /* Ensure html element has a background */
  background-color: var(--color-bg-primary, var(--color-neutral-50));
}

/* Force repaint animation - used by JavaScript */
@keyframes ios-force-repaint {
  0% { opacity: 0.999; }
  100% { opacity: 1; }
}

.ios-force-repaint {
  animation: ios-force-repaint 0.01s linear;
}


/* ===========================================
   SCALE SELECTOR BUTTONS (Recipe Flyout)
   Override mobile button sizing for compact scale controls
   =========================================== */
.scale-btn {
  min-height: 32px !important;
  min-width: 32px !important;
  max-height: 32px !important;
  max-width: 32px !important;
  padding: 0 !important;
}

.scale-selector {
  display: flex !important;
}

@media (width <= 640px) {
  .scale-btn {
    min-height: 36px !important;
    min-width: 36px !important;
    max-height: 36px !important;
    max-width: 36px !important;
    padding: 0 !important;
  }
}


/* ===========================================
   TAG BUTTONS - Keep compact on mobile
   Override mobile button sizing for tag remove buttons
   =========================================== */
.tag-remove-btn {
  min-height: auto !important;
  min-width: auto !important;
  padding: 0 !important;
  margin: 0;
  background: transparent;
  border: none;
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

/* Ensure tags stay compact on mobile */
@media (width <= 640px) {
  .tag {
    padding: var(--space-1) var(--space-2) !important;
    font-size: 0.75rem !important;
    min-height: auto !important;
  }
  
  .tag-remove-btn {
    min-height: auto !important;
    min-width: auto !important;
    padding: 0 !important;
  }
}


/* ===========================================
   COMPACT BUTTONS - For flyout footers and tight spaces
   Override mobile button sizing to keep buttons consistent
   =========================================== */
.btn-compact {
  min-height: 40px !important;
  padding: var(--space-2) var(--space-3) !important;
  font-size: 0.875rem !important;
}

@media (width <= 640px) {
  .btn-compact {
    min-height: 44px !important;
    padding: var(--space-2) var(--space-3) !important;
    font-size: 0.875rem !important;
  }
  
  /* Ensure flyout footer buttons are all the same height */
  .flyout-footer-buttons .btn-primary,
  .flyout-footer-buttons .btn-secondary,
  .flyout-footer-buttons .btn-success,
  .flyout-footer-buttons .btn-warning,
  .flyout-footer-buttons .btn-error {
    min-height: 44px !important;
    padding: var(--space-2) var(--space-3) !important;
    font-size: 0.875rem !important;
  }
}


/* ===========================================
   ICON-ONLY BUTTONS - Small square buttons for inline actions
   =========================================== */
.btn-icon-only {
  min-height: 32px !important;
  min-width: 32px !important;
  max-height: 32px !important;
  max-width: 32px !important;
  padding: var(--space-2) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

@media (width <= 640px) {
  .btn-icon-only {
    min-height: 36px !important;
    min-width: 36px !important;
    max-height: 36px !important;
    max-width: 36px !important;
    padding: var(--space-2) !important;
  }
}


/* ===========================================
   QUICKLIST ACCORDION STYLES
   Feature: quicklist-categories
   =========================================== */

/* Quicklist accordion container */
.quicklist-accordion {
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 0.5rem;
}

/* Shoelace sl-details customization */
.quicklist-accordion::part(base) {
  border: 1px solid var(--color-border-card);
  border-radius: var(--radius-md);
  background: var(--color-surface-1);
}

.quicklist-accordion::part(header) {
  padding: 0.75rem 1rem;
  font-weight: 600;
  color: var(--color-text-primary);
  background: var(--color-surface-2);
}

.quicklist-accordion::part(header):hover {
  background: var(--color-bg-card-hover);
}

.quicklist-accordion::part(summary) {
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.quicklist-accordion::part(summary-icon) {
  color: var(--color-primary-500);
}

.quicklist-accordion::part(content) {
  padding: 0;
  background: var(--color-surface-1);
}

/* Quicklist chore card within accordion */
.quicklist-accordion .chore-card {
  border-left-color: var(--color-primary-500);
}

/* Search input styling */
.quicklist-search-input {
  border: 1px solid var(--color-border-card);
  border-radius: var(--radius-md);
  padding: 0.5rem 1rem 0.5rem 2.5rem;
  width: 100%;
  font-size: 0.875rem;
  background-color: var(--color-surface-1);
  color: var(--color-text-primary);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.quicklist-search-input::placeholder {
  color: var(--color-text-muted);
}

.quicklist-search-input:focus {
  outline: none;
  border-color: var(--color-primary-500);
  box-shadow: 0 0 0 3px var(--color-primary-overlay-10);
}

/* Empty state styling */
.quicklist-empty-state {
  text-align: center;
  padding: 2rem;
  color: var(--color-neutral-500);
}

.quicklist-empty-state svg {
  margin: 0 auto 0.75rem;
  color: var(--color-neutral-400);
}

/* ===========================================
   QUICKLIST CHORE CARD STYLES
   Feature: quicklist-categories
   =========================================== */

/* Quicklist chore card using sl-card */
.quicklist-accordion sl-card.chore-card {
  --border-radius: var(--radius-lg);
  --padding: 0;

  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.quicklist-accordion sl-card.chore-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px var(--color-overlay-light);
}

.quicklist-accordion sl-card.chore-card::part(base) {
  background: var(--color-primary-500);
  border: none;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.quicklist-accordion sl-card.chore-card::part(body) {
  padding: var(--space-3);
}

/* ===========================================
   UNIFIED CHORE CARD SPLIT LAYOUT
   3-section layout: Name | Money | Buttons
   ┌─────────────────────────┬─────────────┐
   │  ☐ Chore Name           │   $10.00    │  ← money (centered)
   │                         ├─────────────┤  ← horizontal divider
   │                         │     🗑      │  ← buttons
   └─────────────────────────┴─────────────┘
   Cards without money show only buttons in right section (no divider)
   =========================================== */

/* Base split layout - works for all chore cards */
.chore-card-content.chore-card-split {
  display: flex;
  align-items: stretch;
  gap: 0;
  min-height: 3.5rem;
}

/* Left section: Checkbox + Name - grows to fill available space */
.chore-card-split .chore-card-left-section {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-right: var(--space-3);
}

/* Chore name in split layout */
.chore-card-split .chore-name {
  flex: 1;
  min-width: 0;
  font-size: 0.875rem;
  font-weight: 500;
  color: white;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-word;
}

/* Right section: Contains money + buttons stacked vertically */
.chore-card-split .chore-card-right-section {
  display: flex;
  flex-direction: column;
  border-left: 2px solid var(--color-white-overlay-35);
  margin-left: var(--space-2); /* Gap between text and divider */
  padding-left: var(--space-2); /* Gap between divider and buttons */
  min-width: 4.5rem;
  flex-shrink: 0;
}

/* Hide right section when truly empty (no money, no chevron, no action buttons) */
.chore-card-split .chore-card-right-section:empty,
.chore-card-split .chore-card-right-section:not(:has(.chore-card-money-row), :has(.chore-expand-indicator), :has(.chore-card-actions-row)) {
  display: none;
}

/* Money row - top of right section, centered */
.chore-card-split .chore-card-money-row {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-1) var(--space-2);
  border-bottom: 2px solid var(--color-white-overlay-35);
  flex: 1;
}

/* Hide divider when money row is the only/last item (no actions below) */
.chore-card-split .chore-card-money-row:last-child {
  border-bottom: none;
}

/* Actions row - bottom of right section */
.chore-card-split .chore-card-actions-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  flex: 1;
}

/* When card has NO money, center the buttons vertically */
.chore-card-split:not(.has-amount) .chore-card-right-section {
  justify-content: center;
}

.chore-card-split:not(.has-amount) .chore-card-actions-row {
  flex: none;
}

/* ===========================================
   UNIFIED BUTTON STYLES FOR ALL CHORE CARDS
   Consistent 32px square buttons
   =========================================== */
.chore-card-split .chore-schedule-btn,
.chore-card-split .chore-delete-btn,
.chore-card-split .chore-category-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem; /* 32px */
  min-height: 2rem; /* 32px */
  width: 2rem; /* Force exact size */
  height: 2rem; /* Force exact size */
  padding: 0;
  gap: 0;
  box-sizing: border-box;
  border: none;
  background: var(--color-white-overlay-15);
  border-radius: var(--radius-sm);
  color: var(--color-white-overlay-strong);
  cursor: pointer;
  transition: background 0.15s ease;
  flex-shrink: 0;
}

.chore-card-split .chore-delete-btn:hover {
  background: var(--color-error-overlay-90);
  color: white;
}

.chore-card-split .chore-schedule-btn:hover,
.chore-card-split .chore-category-btn:hover {
  background: var(--color-white-overlay-35);
}

/* Schedule badge in compact mode - position relative to button, not extending it */
.chore-card-split .chore-schedule-btn .schedule-badge {
  position: absolute;
  top: -6px;
  right: -10px;
  font-size: 0.5rem;
  min-width: 0.875rem;
  height: 0.875rem;
  padding: 0 0.125rem;
  pointer-events: none; /* Don't interfere with button clicks */
}

/* Override Shoelace badge primary color to use theme color in compact mode */
.chore-card-split .chore-schedule-btn .schedule-badge::part(base) {
  background: var(--color-white-overlay-25);
  color: white;
  padding: 0 0.125rem;
}

/* Approval button styling */
.chore-card-split .chore-approve-btn {
  --sl-color-success-600: var(--color-success-600);

  min-width: 2rem;
  min-height: 2rem;
}

.chore-card-split .chore-approve-btn::part(base) {
  padding: 0 var(--space-2);
  min-height: 2rem;
  font-size: 0.875rem;
}

/* ===========================================
   QUICKLIST-SPECIFIC OVERRIDES
   Quicklist cards allow 3-line names
   =========================================== */
.quicklist-accordion .chore-card-split .chore-name {
  -webkit-line-clamp: 3;
}

/* Default chore card content layout - horizontal for family member cards */
.chore-card-content {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.5rem;
}

/* Default chore name - grows to fill available space */
.chore-name {
  flex: 1;
  min-width: 0;
  font-size: 0.875rem;
  font-weight: 500;
  color: white;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-word;
}

/* Action buttons row (for when needed) */
.chore-card-actions {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-shrink: 0;
}

/* Chore amount badge */
.chore-card-content sl-badge.chore-amount {
  flex-shrink: 0;
}

.chore-card-content sl-badge.chore-amount::part(base) {
  background: var(--color-white-overlay-25);
  color: white;
  font-weight: 600;
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-full);
}

/* Category assign button - 44px minimum touch target for accessibility */
.chore-category-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem; /* 44px */
  min-height: 2.75rem; /* 44px */
  border: none;
  background: var(--color-white-overlay-15);
  border-radius: var(--radius-sm);
  color: var(--color-white-overlay-strong);
  cursor: pointer;
  transition: background 0.15s ease;
  flex-shrink: 0;
}

.chore-category-btn:hover {
  background: var(--color-white-overlay-35);
}

/* Schedule button - compact for horizontal layout */

/* **Feature: weekly-chore-scheduling** */

/* **Validates: Requirements 1.1, 4.1, 4.2, 4.3, 8.1** */
.chore-schedule-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem; /* 44px minimum touch target - Requirements 8.1 */
  min-height: 2.75rem;
  border: none;
  background: var(--color-white-overlay-15);
  border-radius: var(--radius-sm);
  color: var(--color-white-overlay-strong);
  cursor: pointer;
  transition: background 0.15s ease;
  flex-shrink: 0;
  padding: 0 0.5rem;
  gap: 0.25rem;
}

.chore-schedule-btn:hover {
  background: var(--color-white-overlay-35);
}

.chore-schedule-btn:focus-visible {
  outline: 2px solid var(--color-primary-300);
  outline-offset: 2px;
}

/* Schedule badge positioning */
.chore-schedule-btn .schedule-badge {
  position: absolute;
  top: -4px;
  right: -8px;
  font-size: 0.625rem;
  min-width: 1rem;
  height: 1rem;
  padding: 0 0.25rem;
}

/* Override Shoelace badge primary color to use theme color */
.chore-schedule-btn .schedule-badge::part(base) {
  background: var(--color-white-overlay-25);
  color: white;
  padding: 0 0.125rem;
}

/* Delete button - 44px minimum touch target for accessibility */
.chore-delete-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem; /* 44px */
  min-height: 2.75rem; /* 44px */
  border: none;
  background: var(--color-white-overlay-15);
  border-radius: var(--radius-sm);
  color: var(--color-white-overlay-strong);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  flex-shrink: 0;
}

.chore-delete-btn:hover {
  background: var(--color-error-overlay-90);
  color: white;
}

/* Dropdown styling for category selection */
.chore-card-content sl-dropdown {
  flex-shrink: 0;
}

.chore-card-content sl-dropdown sl-menu {
  min-width: 140px;
}

.chore-card-content sl-dropdown sl-menu-item::part(base) {
  font-size: 0.875rem;
  padding: 0.5rem 1rem;
}

.chore-card-content sl-dropdown sl-menu-item::part(base):hover {
  background: var(--color-primary-50);
  color: var(--color-primary-700);
}

/* Selected chore card state */
.quicklist-accordion sl-card.chore-card--selected::part(base) {
  background: var(--color-primary-600);
  box-shadow: 0 0 0 3px var(--color-primary-300);
}


/* Dropdown wrapper - prevents event propagation to accordion */
.chore-card-actions .dropdown-wrapper {
  display: contents;
}

/* Fix sl-dropdown menu visibility and positioning */
.chore-card-actions sl-dropdown {
  position: static;
}

.chore-card-actions sl-dropdown::part(panel) {
  z-index: 9999;
  background: var(--color-surface-3);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 16px var(--color-overlay-medium);
  min-width: 140px;
  border: 1px solid var(--color-border-card);
}

/* Style the menu */
.chore-card-actions sl-dropdown sl-menu {
  background: var(--color-surface-3);
  border-radius: var(--radius-md);
  padding: 0.25rem 0;
}

/* Style menu items */
.chore-card-actions sl-dropdown sl-menu-item::part(base) {
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
  color: var(--color-text-primary);
}

.chore-card-actions sl-dropdown sl-menu-item::part(base):hover {
  background: var(--color-surface-2);
  color: var(--color-primary-500);
}

.chore-card-actions sl-dropdown sl-menu-item::part(checked-icon) {
  display: none;
}

/* CRITICAL: Hide sl-menu when dropdown is closed */

/* The menu content was rendering visibly even when closed */
.chore-card-actions sl-dropdown:not([open]) sl-menu {
  display: none !important;
}

/* Ensure menu is visible when dropdown is open */
.chore-card-actions sl-dropdown[open] sl-menu {
  display: block;
}

/* Allow dropdown to escape sl-card overflow:hidden */

/* When dropdown is open, temporarily allow overflow on parent card */
.quicklist-accordion sl-card:has(sl-dropdown[open]) {
  overflow: visible !important;
}

.quicklist-accordion sl-card:has(sl-dropdown[open])::part(base) {
  overflow: visible !important;
}

/* Also allow overflow on sl-details when dropdown is open */
.quicklist-accordion:has(sl-dropdown[open]) {
  overflow: visible !important;
}

.quicklist-accordion:has(sl-dropdown[open])::part(content) {
  overflow: visible !important;
}

/* ===========================================
   SCHEDULE MODAL STYLES
   Feature: weekly-chore-scheduling
   Requirements: 8.1, 8.2, 8.3, 8.4
   =========================================== */

/* Schedule modal content container */
.schedule-modal-content {
  padding: var(--space-2);
}

/* Day labels header row */
.schedule-day-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border-card);
  margin-bottom: var(--space-4);
}

/* Member label column (name) */
.schedule-member-label {
  width: 100px;
  min-width: 100px;
  flex-shrink: 0;
}

.schedule-member-name {
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Days row container */
.schedule-days-row {
  display: flex;
  gap: var(--space-2); /* 8px gaps between day toggles - Requirements 8.2 */
  flex-shrink: 0;
}

/* Day label in header */
.schedule-day-label {
  width: 44px; /* 44px minimum touch target - Requirements 8.1 */
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
}



/* Family members list */
.schedule-members-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4); /* 16px spacing between member rows - Requirements 8.2 */
}

/* Individual member row */
.schedule-member-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-card);
  border-radius: var(--radius-lg);
}

/* Day toggle button - Requirements 8.1, 8.4 */
.schedule-day-toggle {
  width: 44px; /* 44px minimum touch target - Requirements 8.1 */
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  background: var(--color-neutral-100);
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 150ms ease;
  flex-shrink: 0;
}

.schedule-day-toggle:hover {
  background: var(--color-neutral-200);
}

/* Focus indicator for accessibility - Requirements 8.4 */
.schedule-day-toggle:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-primary-300);
}

.schedule-day-toggle:focus-visible {
  outline: 2px solid var(--color-primary-500);
  outline-offset: 2px;
}

/* Selected state - Requirements 1.4 */
.schedule-day-toggle--selected {
  background: var(--color-primary-500);
  color: var(--color-white);
  border-color: var(--color-primary-600);
}

.schedule-day-toggle--selected:hover {
  background: var(--color-primary-600);
}

/* Days and shortcuts container - vertical stack */
.schedule-days-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
}

/* Shortcuts row - Weekday and Weekend side by side */
.schedule-shortcuts-row {
  display: flex;
  gap: var(--space-1);
}

/* Shortcut button base - Requirements 2.1, 2.2, 2.3 */
.schedule-shortcut-btn {
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-primary-600);
  background: var(--color-primary-50);
  border: 1px solid var(--color-primary-200);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 150ms ease;
  white-space: nowrap;
  min-height: 32px;
  text-align: center;
}

.schedule-shortcut-btn:hover {
  background: var(--color-primary-100);
  border-color: var(--color-primary-300);
}

.schedule-shortcut-btn:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-primary-300);
}

/* Weekday button - spans width of M-F (5 day toggles + 4 gaps) */

/* Each day toggle is 44px, gap is 4px, so 5*44 + 4*4 = 236px */
.schedule-shortcut-btn--weekday {
  width: calc(5 * 44px + 4 * var(--space-1));
  flex-shrink: 0;
}

/* Weekend button - spans width of S-S (2 day toggles + 1 gap) */

/* 2*44 + 1*4 = 92px */
.schedule-shortcut-btn--weekend {
  width: calc(2 * 44px + 1 * var(--space-1));
  flex-shrink: 0;
}

/* Daily button - full width of all 7 days */
.schedule-shortcut-btn--daily {
  width: 100%;
}

/* Empty state */
.schedule-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-8);
  text-align: center;
}

/* ===========================================
   SCHEDULE MODAL RESPONSIVE STYLES
   Requirements: 8.3 - Full-width on mobile
   =========================================== */

@media (width <= 640px) {
  /* Stack layout vertically on mobile */
  .schedule-day-header {
    display: none; /* Hide header on mobile, labels are in toggles */
  }
  
  .schedule-member-row {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
    padding: var(--space-3);
  }
  
  .schedule-member-label {
    width: 100%;
    min-width: unset;
    margin-bottom: var(--space-1);
  }
  
  .schedule-member-name {
    font-size: var(--font-size-base);
  }
  
  .schedule-days-container {
    width: 100%;
  }
  
  .schedule-days-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr); /* Equal width columns for all 7 days */
    gap: var(--space-1);
    width: 100%;
  }
  
  /* Flexible day toggles that fill available space - still meets 44px touch target */
  .schedule-day-toggle {
    width: 100%; /* Fill grid cell */
    min-width: unset;
    height: 44px;
    flex-shrink: unset;
    font-size: var(--font-size-xs); /* Slightly smaller text */
  }
  
  /* Shortcut buttons use proportional widths on mobile */
  .schedule-shortcuts-row {
    width: 100%;
  }
  
  .schedule-shortcut-btn--weekday {
    width: calc(5 / 7 * 100% - var(--space-1) / 2);
  }
  
  .schedule-shortcut-btn--weekend {
    width: calc(2 / 7 * 100% - var(--space-1) / 2);
  }
}




/* ===========================================
   SLIDE PANEL COMPONENT
   Reusable horizontal sliding container for
   multi-page inline navigation
   =========================================== */

/* Container - clips overflow during slide */
.slide-panel {
  overflow: hidden;
  position: relative;
  width: 100%;

  /* Rounded corners on container so they don't show during slide transition */
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}

/* Track - holds all pages in a row, slides horizontally */

/* Width is 200% to hold 2 pages, each page is 50% of track = 100% of container */
.slide-panel-track {
  display: flex;
  width: 200%;

  /* iOS Safari PWA: Use margin-left animation instead of transform
     Transforms inside overflow:hidden containers don't work reliably in iOS Safari PWA */
}

/* Individual page - each takes 50% of track (= 100% of container) */
.slide-panel-page {
  flex: 0 0 50%;
  width: 50%;
  box-sizing: border-box;
}

/* Active page indicator (for potential styling) */
.slide-panel-page--active {
  /* Can add focus/active styles here if needed */
}

/* ===========================================
   CHORE ACTION FLYOUT
   Bottom flyout action bar that slides down from card
   =========================================== */

/* Wrapper needs relative positioning for flyout */
.chore-card-wrapper {
  position: relative;
}

/* When expanded, raise above sibling cards so flyout overlays them */
.chore-card-wrapper--expanded {
  z-index: 20;
}

/* Flyout container - positioned below the card, slides down */
.chore-action-flyout {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 0;

  /* Only clip vertically during height transition - slide-panel handles horizontal clipping */
  overflow: visible hidden;
  transition: height 200ms ease-out;
  z-index: 10;

  /* Pull up to connect seamlessly with card (compensate for shadow/transform effects) */
  margin-top: calc(-1 * var(--space-2) - 1px);
}

.chore-action-flyout--expanded {
  height: 48px;
}

/* Button group fills the entire flyout - no border, no padding */
.chore-action-button-group {
  display: flex;
  width: 100%;
  height: 48px;
  gap: 0;

  /* Rounded bottom corners only - connects to card above */
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  overflow: hidden;
  background: var(--color-primary-300);

  /* No border on top since it connects to card */
  border: none;
  box-shadow: 0 4px 12px var(--color-overlay-light);
}

.chore-action-button-group::part(base) {
  display: flex;
  width: 100%;
  height: 100%;
}

.chore-action-button-group sl-button {
  flex: 1;
  height: 100%;
}

/* Primary-300 buttons with blue icons */
.chore-action-button-group sl-button::part(base) {
  width: 100%;
  height: 100%;
  min-height: 48px;
  justify-content: center;
  border-radius: 0;
  transition: all 150ms ease;
  padding: 0;

  /* Darker primary background with blue text/icons */
  background: var(--color-primary-300) !important;
  border: none !important;
  color: var(--color-primary-600) !important;
}

.chore-action-button-group sl-button::part(base):hover {
  background: var(--color-primary-400) !important;
}

.chore-action-button-group sl-button::part(label) {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary-600);
}

/* Icon color inside buttons */
.chore-action-button-group sl-button svg,
.chore-action-button-group sl-button span {
  color: var(--color-primary-600) !important;
}

/* First button - rounded bottom-left corner */
.chore-action-button-group sl-button:first-child::part(base) {
  border-radius: 0 0 0 var(--radius-xl);
}

/* Last button - rounded bottom-right corner */
.chore-action-button-group sl-button:last-child::part(base) {
  border-radius: 0 0 var(--radius-xl) 0;
}

/* Only button - both bottom corners rounded */
.chore-action-button-group sl-button:only-child::part(base) {
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}

/* Divider lines between buttons */
.chore-action-button-group sl-button:not(:last-child)::part(base)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 20%;
  height: 60%;
  width: 1px;
  background: var(--color-primary-100);
}



/* Individual action button */
.chore-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-width: 80px;
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: all 150ms ease;
  color: white;
}

/* Complete button - success green */
.chore-action-btn--complete {
  background: var(--color-success-500);
}

.chore-action-btn--complete:hover {
  background: var(--color-success-600);
}

/* Reassign button - primary blue */
.chore-action-btn--reassign {
  background: var(--color-primary-500);
}

.chore-action-btn--reassign:hover {
  background: var(--color-primary-600);
}

/* Delete button - danger red */
.chore-action-btn--delete {
  background: var(--color-error-500);
}

.chore-action-btn--delete:hover {
  background: var(--color-error-600);
}

/* Back button - compact circle matching avatar chip height, blue icon on light bg */
.chore-action-btn--back {
  background: var(--color-white-overlay-25);
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  padding: 0;
  color: var(--color-primary-600);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  flex-shrink: 0;
  transition: background 150ms ease;
}

@media (hover: hover) {
  .chore-action-btn--back:hover {
    background: var(--color-white-overlay-35);
  }
}

.chore-action-btn--back:active {
  background: var(--color-white-overlay-40);
}

/* Back button icon - same blue as flyout icons */
.chore-action-btn--back svg {
  color: var(--color-primary-600);
}

/* ===========================================
   REASSIGN PICKER
   Avatar chips for family member selection
   =========================================== */

/* Reassign picker row */
.chore-reassign-picker {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--color-primary-300);
  height: 48px;

  /* No border-radius here - parent .slide-panel handles it to avoid visible corners during transition */
}

/* Avatar chip - horizontal pill button with initial + name */
.avatar-chip {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2) var(--space-1) var(--space-1);
  border: none;
  background: var(--color-primary-500);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background 150ms ease;
  flex-shrink: 0;
  height: 32px;
  min-height: 32px;
  max-height: 32px;
  align-self: center;
}

/* Hover only for non-touch devices */
@media (hover: hover) {
  .avatar-chip:hover {
    background: var(--color-primary-600);
  }
}

/* Subtle active state without jarring transform */
.avatar-chip:active {
  background: var(--color-primary-700);
}

/* Avatar circle - smaller for compact layout */
.avatar-chip-circle {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  background: var(--color-white-overlay-25);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  flex-shrink: 0;
}

/* Unassigned chip - different style */
.avatar-chip--unassigned {
  background: var(--color-neutral-400);
}

.avatar-chip--unassigned:hover {
  background: var(--color-neutral-500);
}

/* Current assignee - dimmed */
.avatar-chip--current {
  opacity: 0.5;
  pointer-events: none;
}

/* Avatar name label */
.avatar-chip-name {
  font-size: var(--font-size-xs);
  color: white;
  white-space: nowrap;
  font-weight: var(--font-weight-medium);
}

/* Mobile: Circle-only avatar chips (hide name to save space) */
@media (width <= 640px) {
  .avatar-chip {
    /* Circle shape - no padding for name */
    padding: var(--space-1);
    width: 32px;
    min-width: 32px;
    max-width: 32px;
    justify-content: center;
  }

  .avatar-chip-name {
    display: none;
  }
}


/* ===========================================
   CHORE CARD EXPANDED STATE
   =========================================== */

/* Wrapper for proper spacing */
.chore-card-wrapper {
  margin-bottom: var(--space-2);
}

/* Expanded card state */
.chore-card--expanded {
  --border-width: 3px;
}

.chore-card--expanded::part(base) {
  border-color: var(--color-primary-400);
}

/* Completed indicator (non-interactive checkmark) */
.chore-completed-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  background: var(--color-success-500);
  color: white;
  flex-shrink: 0;
  margin-right: var(--space-2);
}

/* Completed name strikethrough */
.chore-name--completed {
  text-decoration: line-through;
  opacity: 0.7;
}

/* Expand indicator (chevron) */
.chore-expand-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--color-white-overlay-60);
  transition: transform 200ms ease;
  flex-shrink: 0;
}

.chore-expand-indicator--expanded {
  transform: rotate(180deg);
}

/* Undo button style */
.chore-action-btn--undo {
  background: var(--color-neutral-500);
}

.chore-action-btn--undo:hover {
  background: var(--color-neutral-600);
}

/* Approve button style */
.chore-action-btn--approve {
  background: var(--color-success-600);
}

.chore-action-btn--approve:hover {
  background: var(--color-success-700);
}

/* ===========================================
   SHOELACE COMPONENT THEME OVERRIDES
   Ensure Shoelace components use our surface colors
   =========================================== */

/* Quicklist section - subtle primary tint for visual distinction */
.quicklist-section-container {
  background: var(--color-surface-1);
  border-color: var(--color-primary-200);
}

/* sl-details (accordion) - Category accordions in quicklist */
sl-details.quicklist-accordion {
  --sl-color-neutral-0: var(--color-surface-1);
  --sl-color-neutral-50: var(--color-surface-1);
  --sl-color-neutral-100: var(--color-surface-2);
  --sl-panel-background-color: var(--color-surface-2);
  --sl-panel-border-color: var(--color-border-card);
  --sl-color-neutral-200: var(--color-border-card);
  --sl-spacing-medium: var(--space-3);

  background: var(--color-surface-1);
  border: 1px solid var(--color-border-card);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-2);
}

/* Override the base part background */
sl-details.quicklist-accordion::part(base) {
  background: var(--color-surface-1);
  border: none;
  border-radius: var(--radius-lg);
}

sl-details.quicklist-accordion::part(header) {
  background: var(--color-primary-500);
  color: white;
  padding: var(--space-3) var(--space-4);
  font-weight: 600;
  border-radius: var(--radius-lg);
}

sl-details.quicklist-accordion::part(header):hover {
  background: var(--color-primary-600);
}

sl-details.quicklist-accordion::part(content) {
  background: var(--color-surface-2);
  padding: var(--space-3);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

sl-details.quicklist-accordion::part(summary-icon) {
  color: white;
}

/* Chore cards inside quicklist - ensure they use surface colors */
sl-details.quicklist-accordion sl-card {
  --sl-panel-background-color: var(--color-surface-1);
  --sl-panel-border-color: var(--color-border-card);
  --sl-color-neutral-0: var(--color-surface-1);
}

sl-details.quicklist-accordion sl-card::part(base) {
  background: var(--color-surface-1);
  border-color: var(--color-border-card);
}

/* General sl-card overrides for theme consistency */
sl-card {
  --sl-panel-background-color: var(--color-surface-1);
  --sl-panel-border-color: var(--color-border-card);
  --sl-color-neutral-0: var(--color-surface-1);
}

sl-card::part(base) {
  background: var(--color-surface-1);
  border-color: var(--color-border-card);
}

/* sl-input overrides */
sl-input::part(base) {
  background: var(--color-surface-1);
  border-color: var(--color-border-card);
}

sl-input::part(input) {
  color: var(--color-text-primary);
}

sl-input::part(input)::placeholder {
  color: var(--color-text-muted);
}

/* sl-skeleton for loading states */
sl-skeleton {
  --color: var(--color-surface-2);
  --sheen-color: var(--color-surface-3);
}

/* Schedule badge on quicklist chore cards - smaller size */
.schedule-badge {
  --sl-badge-font-size: 0.6rem;
  --sl-spacing-x-small: 0.2rem;

  transform: scale(0.75);
  transform-origin: center;
}

.schedule-badge::part(base) {
  font-size: 0.6rem;
  padding: 0.1rem 0.35rem;
  min-width: 1rem;
  min-height: 1rem;
}

/* ===========================================
   THEME-AWARE BUTTON ICON COLORS
   Ensure icons in buttons adapt to theme
   =========================================== */

.btn-secondary svg,
.btn-secondary [class*="icon"] {
  color: var(--color-text-primary);
  transition: color var(--transition-normal);
}

/* On hover, icons should turn white to match the text */
@media (hover: hover) {
  .btn-secondary:hover svg,
  .btn-secondary:hover [class*="icon"] {
    color: white;
  }
}


/* ===========================================
   VIRTUAL KEYBOARD STYLES
   On-screen keyboard for desktop/tablet use
   =========================================== */

/* Keyboard container - fixed at bottom of viewport */
.virtual-keyboard-container {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10000;
  background: var(--color-surface-1);
  border-top: 1px solid var(--color-border-card);
  box-shadow: 0 -4px 20px var(--color-overlay-medium);
  transform: translateY(100%);
  transition: transform 0.2s ease;
}

.virtual-keyboard-container.visible {
  transform: translateY(0);
}

/* Keyboard header with title and close button */
.virtual-keyboard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-4);
  background: var(--color-surface-2);
  border-bottom: 1px solid var(--color-border-card);
}

.virtual-keyboard-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
}

.virtual-keyboard-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--color-text-secondary);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.virtual-keyboard-close:hover {
  background: var(--color-error-100);
  color: var(--color-error-600);
}

/* Override simple-keyboard default theme */
.virtual-keyboard-theme.simple-keyboard {
  background: var(--color-surface-1);
  padding: var(--space-3) var(--space-4) var(--space-4);
  font-family: inherit;
}

.virtual-keyboard-theme .hg-button {
  background: var(--color-surface-3);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-card);
  border-radius: var(--radius-md);
  box-shadow: 0 1px 2px var(--color-overlay-subtle);
  height: 48px;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  transition: background 0.1s ease, transform 0.1s ease;
}

.virtual-keyboard-theme .hg-button:hover {
  background: var(--color-bg-card-hover);
}

.virtual-keyboard-theme .hg-button:active {
  background: var(--color-primary-100);
  transform: scale(0.95);
}

/* Special keys styling */
.virtual-keyboard-theme .hg-button-bksp,
.virtual-keyboard-theme .hg-button-enter,
.virtual-keyboard-theme .hg-button-shift,
.virtual-keyboard-theme .hg-button-tab,
.virtual-keyboard-theme .hg-button-lock {
  background: var(--color-neutral-200);
  color: var(--color-text-primary);
}

.virtual-keyboard-theme .hg-button-bksp:hover,
.virtual-keyboard-theme .hg-button-enter:hover,
.virtual-keyboard-theme .hg-button-shift:hover,
.virtual-keyboard-theme .hg-button-tab:hover,
.virtual-keyboard-theme .hg-button-lock:hover {
  background: var(--color-neutral-300);
}

/* Space bar */
.virtual-keyboard-theme .hg-button-space {
  min-width: 200px;
}

/* Shift active state */
.virtual-keyboard-theme .hg-button-shift.hg-activeButton {
  background: var(--color-primary-500);
  color: white;
}

/* Input wrapper with keyboard toggle */
.keyboard-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.keyboard-input-wrapper .keyboard-input {
  flex: 1;
  padding-right: var(--space-12); /* Space for keyboard icon (48px) */
}

/* Keyboard toggle button inside input */
.keyboard-toggle-btn {
  position: absolute;
  right: var(--space-2);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.keyboard-toggle-btn:hover {
  background: var(--color-neutral-100);
  color: var(--color-text-secondary);
}

.keyboard-toggle-btn.active {
  background: var(--color-primary-100);
  color: var(--color-primary-600);
}

/* Responsive adjustments */
@media (width <= 768px) {
  .virtual-keyboard-theme .hg-button {
    height: 44px;
    font-size: var(--font-size-sm);
  }
  
  .virtual-keyboard-theme .hg-button-space {
    min-width: 150px;
  }
}

@media (width <= 480px) {
  .virtual-keyboard-theme.simple-keyboard {
    padding: var(--space-2);
  }
  
  .virtual-keyboard-theme .hg-button {
    height: 40px;
    font-size: var(--font-size-xs);
    border-radius: var(--radius-sm);
  }
  
  .virtual-keyboard-header {
    padding: var(--space-2) var(--space-3);
  }
}

/* Hide keyboard toggle on devices with native keyboards (optional) */
@media (hover: none) and (pointer: coarse) {
  /*
   * On touch devices, you might want to hide the toggle since they have native keyboards
   * Uncomment below to hide on mobile/tablet touch devices:
   * .keyboard-toggle-btn { display: none; }
   * .keyboard-input-wrapper .keyboard-input { padding-right: var(--space-3); }
   */
}


/* Auto-enhanced keyboard inputs */
.keyboard-auto-enhanced {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.keyboard-auto-enhanced input {
  flex: 1;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Ensure toggle button is positioned correctly in auto-enhanced inputs */
.keyboard-auto-enhanced .keyboard-toggle-btn {
  position: absolute;
  right: var(--space-2, 8px);
  top: 50%;
  transform: translateY(-50%);
  flex-shrink: 0;
}

/* Prevent wrapper from causing overflow */
.keyboard-input-wrapper {
  max-width: 100%;
  overflow: hidden;
}


/* ===========================================
   LEARNING HUB PAGE STYLES
   **Feature: learning-hub-ai-chat**
   **Validates: Requirements 1.1, 1.2, 1.3, 1.4**
   =========================================== */

/* Main layout container */
.learning-hub-layout {
  display: flex;
  min-height: calc(100vh - 120px); /* Account for header/nav */
  background: var(--color-bg-primary);
}

/* Mobile header - hidden on desktop */
.learning-hub-mobile-header {
  display: none;
}

/* Sidebar navigation */

/* **Validates: Requirements 1.1** */
.learning-hub-sidebar {
  width: 260px;
  flex-shrink: 0;
  background: var(--color-bg-card);
  border-right: 1px solid var(--color-border-card);
  display: flex;
  flex-direction: column;
}

.learning-hub-sidebar-header {
  padding: var(--space-4) var(--space-4);
  border-bottom: 1px solid var(--color-border-card);
}

.learning-hub-sidebar-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin: 0;
}

/* Navigation items */
.learning-hub-nav {
  padding: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.learning-hub-nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  background: transparent;
  border: none;
  color: var(--color-text-secondary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: all var(--transition-fast);
  text-align: left;
  width: 100%;
  min-height: 44px; /* Touch target */
}

.learning-hub-nav-item:hover {
  background: var(--color-bg-card-hover);
  color: var(--color-text-primary);
}

/* Active tab state */

/* **Validates: Requirements 1.3** */
.learning-hub-nav-item--active {
  background: var(--color-primary-100);
  color: var(--color-primary-700);
}

.learning-hub-nav-item--active:hover {
  background: var(--color-primary-100);
}

/* Content panel */
.learning-hub-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: var(--space-4);
}

/* Placeholder for future tabs */
.learning-hub-placeholder {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  color: var(--color-text-muted);
}

/* Mobile overlay */
.learning-hub-overlay {
  display: none;
}

/* Mobile menu button */
.learning-hub-menu-btn {
  padding: var(--space-2);
  min-width: 44px;
  min-height: 44px;
}

/* Mobile title */
.learning-hub-mobile-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin: 0;
}

/* ===========================================
   LEARNING HUB RESPONSIVE STYLES
   **Validates: Requirements 1.4**
   =========================================== */

@media (width <= 768px) {
  /* Show mobile header */
  .learning-hub-mobile-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg-card);
    border-bottom: 1px solid var(--color-border-card);
    position: sticky;
    top: 0;
    z-index: 10;
  }
  
  /* Stack layout vertically */
  .learning-hub-layout {
    flex-direction: column;
    min-height: calc(100vh - 60px);
  }
  
  /* Sidebar becomes slide-out drawer */
  .learning-hub-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 280px;
    z-index: 100;
    transform: translateX(-100%);
    transition: transform var(--transition-normal);
    box-shadow: var(--shadow-lg);
  }
  
  .learning-hub-sidebar--open {
    transform: translateX(0);
  }
  
  /* Overlay when sidebar is open */
  .learning-hub-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: var(--color-overlay);
    z-index: 99;
  }
  
  /* Content takes full width */
  .learning-hub-content {
    padding: var(--space-3);
  }
}

/* Prevent body scroll when mobile menu is open */
body.learning-hub-menu-open {
  overflow: hidden;
}


/* ===========================================
   AI CHAT PANEL STYLES
   **Feature: learning-hub-ai-chat**
   **Validates: Requirements 2.1, 2.2, 2.5, 5.1, 5.2, 5.3, 5.4**
   =========================================== */

/* Main chat panel container */
.ai-chat-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 400px;
  max-height: calc(100vh - 200px);
  background: var(--color-bg-card);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border-card);
  overflow: hidden;
}

/* Chat header */
.ai-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-border-card);
  background: var(--color-bg-card);
}

.ai-chat-header-info {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.ai-chat-header-icon {
  color: var(--color-primary-500);
}

.ai-chat-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin: 0;
}

.ai-chat-subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin: 0;
}

.ai-chat-clear-btn {
  padding: var(--space-2) var(--space-3);
  min-height: 36px;
}

.ai-chat-clear-text {
  display: none;
}

@media (width >= 640px) {
  .ai-chat-clear-text {
    display: inline;
  }
}

/* Messages container */

/* **Validates: Requirements 2.2** */
.ai-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  scroll-behavior: smooth;
}

/* Welcome message */
.ai-chat-welcome {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-8);
  color: var(--color-text-muted);
}

.ai-chat-welcome-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--color-primary-100);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-4);
  color: var(--color-primary-500);
}

.ai-chat-welcome-title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-2) 0;
}

.ai-chat-welcome-text {
  font-size: var(--font-size-base);
  max-width: 400px;
  line-height: var(--line-height-relaxed);
  margin: 0;
}

/* Message styling */

/* **Validates: Requirements 2.5** */
.ai-chat-message {
  display: flex;
  gap: var(--space-3);
  max-width: 85%;
}

.ai-chat-message--user {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.ai-chat-message--assistant {
  align-self: flex-start;
}

/* Message avatar */
.ai-chat-message-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ai-chat-message--user .ai-chat-message-avatar {
  background: var(--gradient-primary);
  color: white;
}

.ai-chat-message--assistant .ai-chat-message-avatar {
  background: var(--color-secondary-100);
  color: var(--color-secondary-600);
}

/* Message content */
.ai-chat-message-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.ai-chat-message-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.ai-chat-message--user .ai-chat-message-header {
  flex-direction: row-reverse;
}

.ai-chat-message-sender {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
}

.ai-chat-message-time {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.ai-chat-message-text {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  white-space: pre-wrap;
  word-break: break-word;
}

.ai-chat-message--user .ai-chat-message-text {
  background: var(--gradient-primary);
  color: white;
  border-bottom-right-radius: var(--radius-sm);
}

.ai-chat-message--assistant .ai-chat-message-text {
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
  border-bottom-left-radius: var(--radius-sm);
}

/* Loading indicator */

/* **Validates: Requirements 5.1** */
.ai-chat-loading-indicator {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-lg);
  border-bottom-left-radius: var(--radius-sm);
}

.ai-chat-loading-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-text-muted);
  animation: ai-chat-bounce 1.4s ease-in-out infinite;
}

.ai-chat-loading-dot:nth-child(1) {
  animation-delay: 0s;
}

.ai-chat-loading-dot:nth-child(2) {
  animation-delay: 0.2s;
}

.ai-chat-loading-dot:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes ai-chat-bounce {
  0%, 80%, 100% {
    transform: translateY(0);
    opacity: 0.5;
  }

  40% {
    transform: translateY(-6px);
    opacity: 1;
  }
}

/* Error message */

/* **Validates: Requirements 5.3** */
.ai-chat-error {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-error-50);
  border: 1px solid var(--color-error-200);
  border-radius: var(--radius-lg);
  color: var(--color-error-700);
}

.ai-chat-error-content {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
}

.ai-chat-error-icon {
  flex-shrink: 0;
}

.ai-chat-retry-btn {
  flex-shrink: 0;
  padding: var(--space-2) var(--space-3);
  min-height: 36px;
  font-size: var(--font-size-sm);
}

/* Input area */

/* **Validates: Requirements 2.1, 5.2, 5.4** */
.ai-chat-input-area {
  padding: var(--space-4);
  border-top: 1px solid var(--color-border-card);
  background: var(--color-bg-card);
}

.ai-chat-input-wrapper {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

.ai-chat-input {
  flex: 1;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border-card);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-base);
  /* stylelint-disable-next-line declaration-no-important -- Override Tailwind forms plugin */
  background: var(--color-surface-1) !important;
  /* stylelint-disable-next-line declaration-no-important -- Override Tailwind forms plugin */
  color: var(--color-text-primary) !important;
  min-height: 44px;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.ai-chat-input:focus {
  outline: none;
  border-color: var(--color-primary-500);
  box-shadow: 0 0 0 2px var(--color-primary-overlay-10);
}

.ai-chat-input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.ai-chat-input::placeholder {
  color: var(--color-text-muted);
}

.ai-chat-send-btn {
  width: 44px;
  height: 44px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  flex-shrink: 0;
}

.ai-chat-send-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.ai-chat-send-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid transparent;
  border-top-color: currentcolor;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* Mobile responsive adjustments */
@media (width <= 768px) {
  .ai-chat-panel {
    max-height: calc(100vh - 140px);
    border-radius: var(--radius-lg);
  }
  
  .ai-chat-header {
    padding: var(--space-3);
  }
  
  .ai-chat-messages {
    padding: var(--space-3);
  }
  
  .ai-chat-message {
    max-width: 90%;
  }
  
  .ai-chat-input-area {
    padding: var(--space-3);
  }
  
  .ai-chat-welcome {
    padding: var(--space-4);
  }
  
  .ai-chat-welcome-icon {
    width: 64px;
    height: 64px;
  }
}


/* ===========================================
   DEFAULT ORDER MODAL STYLES
   Modal for setting default chore order per family member
   =========================================== */

/* Modal content container */
.default-order-modal-content {
  padding: var(--space-2);
}

/* Draggable list container */
.default-order-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Individual chore item */
.default-order-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border-card);
  border-radius: var(--radius-lg);
  cursor: grab;
  transition: all 150ms ease;
  user-select: none;
}

.default-order-item:hover {
  background: var(--color-surface-3);
  border-color: var(--color-primary-300);
}

.default-order-item:active {
  cursor: grabbing;
}

/* Dragging state */
.default-order-item--dragging {
  opacity: 0.5;
  background: var(--color-primary-100);
  border-color: var(--color-primary-400);
}

/* Drag over state (drop target) */
.default-order-item--drag-over {
  border-color: var(--color-primary-500);
  background: var(--color-primary-50);
  box-shadow: 0 0 0 2px var(--color-primary-200);
}

/* Drag handle icon */
.default-order-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  flex-shrink: 0;
}

/* Order number badge */
.default-order-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  background: var(--color-primary-500);
  color: white;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  flex-shrink: 0;
}

/* Chore info container */
.default-order-info {
  flex: 1;
  min-width: 0;
}

/* Chore name */
.default-order-name {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Chore metadata row */
.default-order-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-1);
}

/* Amount badge */
.default-order-amount {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-success-600);
}

/* Category badge */
.default-order-category {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  padding: var(--space-1) var(--space-2);
  background: var(--color-surface-3);
  border-radius: var(--radius-sm);
}

/* Empty state */
.default-order-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-8);
  text-align: center;
}

/* Mobile responsive */
@media (width <= 480px) {
  .default-order-item {
    padding: var(--space-2) var(--space-3);
    gap: var(--space-2);
  }
  
  .default-order-name {
    font-size: var(--font-size-sm);
  }
  
  .default-order-meta {
    flex-wrap: wrap;
  }
}

/* ===========================================
   PIP-BOY THEME CRT EFFECTS
   Fallout-inspired retro terminal visual effects
   Requirements: 3.1, 3.2, 3.4
   =========================================== */

/* Define Pip-Boy theme variables */
[data-theme="pipboy"] {
  --pipboy-scanline: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgb(0 0 0 / 3%) 2px,
    rgb(0 0 0 / 3%) 4px
  );
  --pipboy-phosphor-glow: rgb(20 240 20 / 40%);
}

/* Scanline overlay effect on #app container */
[data-theme="pipboy"] #app::before {
  content: '';
  position: fixed;
  inset: 0;
  background: var(--pipboy-scanline);
  pointer-events: none;
  z-index: 9999;
}

/* Phosphor text glow effect for headings */
[data-theme="pipboy"] h1,
[data-theme="pipboy"] h2,
[data-theme="pipboy"] h3 {
  text-shadow: 0 0 8px var(--pipboy-phosphor-glow);
}

/* Phosphor text glow for primary text elements */
[data-theme="pipboy"] .text-primary-custom {
  text-shadow: 0 0 8px var(--pipboy-phosphor-glow);
}

/* Glow effect for card titles */
[data-theme="pipboy"] .card-title {
  text-shadow: 0 0 8px var(--pipboy-phosphor-glow);
}


/* ===========================================
   SUBMISSION CARD STYLES
   Card component for homework grading submissions
   **Feature: homework-grading**
   **Validates: Requirements 3.2, 3.4, 3.5, 7.1, 7.2, 7.3, 7.4, 7.5, 7.6**
   =========================================== */

/* Main card container */
.submission-card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface-1);
  border: 1px solid var(--color-border-card);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  cursor: pointer;
  transition: all var(--transition-normal);
  gap: var(--space-3);
}

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

.submission-card:focus {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

/* Card state variants */
.submission-card--pending,
.submission-card--processing {
  border-left: 4px solid var(--color-warning-500);
}

.submission-card--completed {
  border-left: 4px solid var(--color-success-500);
}

.submission-card--failed {
  border-left: 4px solid var(--color-error-500);
}

/* Card Header */
.submission-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

/* Family Member Section */
.submission-card-member {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  flex: 1;
}

/* Avatar */
.submission-card-avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-base);
  flex-shrink: 0;
  overflow: hidden;
}

.submission-card-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Member Info */
.submission-card-member-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.submission-card-member-name {
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.submission-card-timestamp {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* Status Badge */
.submission-card-status {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  flex-shrink: 0;
}

.submission-card-status--pending,
.submission-card-status--processing {
  background: var(--color-warning-50);
  color: var(--color-warning-700);
}

.submission-card-status--completed {
  background: var(--color-success-50);
  color: var(--color-success-700);
}

.submission-card-status--failed {
  background: var(--color-error-50);
  color: var(--color-error-700);
}

.submission-card-status-text {
  white-space: nowrap;
}

/* Spinner Animation */
.submission-card-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid currentcolor;
  border-top-color: transparent;
  border-radius: var(--radius-full);
  animation: submission-card-spin 0.8s linear infinite;
}

@keyframes submission-card-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Card Body */
.submission-card-body {
  min-height: 48px;
}

/* Progress Section (Pending/Processing) */
.submission-card-progress {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.submission-card-progress-bar {
  height: 6px;
  background: var(--color-neutral-200);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.submission-card-progress-fill {
  height: 100%;
  background: var(--color-warning-500);
  border-radius: var(--radius-full);
  transition: width 0.3s ease;
  animation: submission-card-progress-pulse 1.5s ease-in-out infinite;
}

@keyframes submission-card-progress-pulse {
  0%, 100% {
    opacity: 1;
  }

  50% {
    opacity: 0.6;
  }
}

.submission-card-progress-text {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* Results Section (Completed) */
.submission-card-results {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

/* Score Display */
.submission-card-score {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
}

.submission-card-score-value {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  line-height: 1;
}

.submission-card-score--high {
  color: var(--color-success-600);
}

.submission-card-score--medium {
  color: var(--color-warning-600);
}

.submission-card-score--low {
  color: var(--color-error-600);
}

.submission-card-score-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Completion Status */
.submission-card-completion {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-md);
}

.submission-card-completion--complete {
  background: var(--color-success-50);
  color: var(--color-success-700);
}

.submission-card-completion--incomplete {
  background: var(--color-warning-50);
  color: var(--color-warning-700);
}

/* Question Summary */
.submission-card-questions {
  flex: 1;
  text-align: right;
}

.submission-card-questions-text {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

/* Error Section (Failed) */
.submission-card-error {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--color-error-50);
  border-radius: var(--radius-md);
}

.submission-card-error-icon {
  color: var(--color-error-600);
  flex-shrink: 0;
}

.submission-card-error-text {
  font-size: var(--font-size-sm);
  color: var(--color-error-700);
}

/* Card Footer */
.submission-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border-card);
}

.submission-card-images {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.submission-card-delete-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.submission-card-delete-btn:hover {
  background: var(--color-error-50);
  color: var(--color-error-600);
}

.submission-card-delete-btn:focus {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

/* Mobile Responsive */
@media (width <= 480px) {
  .submission-card {
    padding: var(--space-3);
  }
  
  .submission-card-avatar {
    width: 36px;
    height: 36px;
    font-size: var(--font-size-sm);
  }
  
  .submission-card-member-name {
    font-size: var(--font-size-sm);
  }
  
  .submission-card-results {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }
  
  .submission-card-score {
    flex-direction: row;
    gap: var(--space-2);
  }
  
  .submission-card-score-value {
    font-size: var(--font-size-xl);
  }
  
  .submission-card-questions {
    text-align: left;
  }
}

/* =============================================
   HOMEWORK DETAIL VIEW STYLES
   **Feature: homework-grading**
   **Validates: Requirements 8.1, 8.2, 8.3, 8.4, 8.5, 8.6**
   ============================================= */

/* Main Container */
.homework-detail-view {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-bg-primary);
}

/* Header */
.homework-detail-header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-border-light);
  background: var(--color-bg-secondary);
}

.homework-detail-back-btn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.homework-detail-back-btn:hover {
  background: var(--color-neutral-100);
  color: var(--color-text-primary);
}

.homework-detail-back-btn:focus {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.homework-detail-header-info {
  flex: 1;
}

.homework-detail-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0;
}

.homework-detail-timestamp {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* =============================================
   IN-PROGRESS VIEW
   **Validates: Requirements 8.6**
   ============================================= */

.homework-detail-progress-view {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
}

.homework-detail-progress-card {
  max-width: 400px;
  width: 100%;
  text-align: center;
  padding: var(--space-8);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
}

.homework-detail-progress-icon {
  margin-bottom: var(--space-4);
}

.homework-detail-spinner {
  width: 64px;
  height: 64px;
  margin: 0 auto;
  border: 4px solid var(--color-neutral-200);
  border-top-color: var(--color-primary-500);
  border-radius: var(--radius-full);
  animation: homework-detail-spin 1s linear infinite;
}

@keyframes homework-detail-spin {
  to {
    transform: rotate(360deg);
  }
}

.homework-detail-progress-title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-2) 0;
}

.homework-detail-progress-text {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-6) 0;
}

.homework-detail-progress-bar-container {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.homework-detail-progress-bar {
  flex: 1;
  height: 8px;
  background: var(--color-neutral-200);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.homework-detail-progress-fill {
  height: 100%;
  background: var(--color-primary-500);
  border-radius: var(--radius-full);
  transition: width 0.5s ease;
  animation: homework-detail-progress-pulse 2s ease-in-out infinite;
}

@keyframes homework-detail-progress-pulse {
  0%, 100% {
    opacity: 1;
  }

  50% {
    opacity: 0.7;
  }
}

.homework-detail-progress-percent {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  min-width: 40px;
}

/* Status Steps */
.homework-detail-status-steps {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
}

.homework-detail-status-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  flex: 1;
}

.homework-detail-status-step-icon {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: var(--color-neutral-200);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
}

.homework-detail-status-step--complete .homework-detail-status-step-icon {
  background: var(--color-success-500);
  color: white;
}

.homework-detail-status-step--active .homework-detail-status-step-icon {
  background: var(--color-primary-500);
  color: white;
}

.homework-detail-step-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid var(--color-white-alpha-30, rgb(255 255 255 / 30%));
  border-top-color: white;
  border-radius: var(--radius-full);
  animation: homework-detail-spin 0.8s linear infinite;
}

.homework-detail-status-step-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-align: center;
}

.homework-detail-status-step--complete .homework-detail-status-step-label,
.homework-detail-status-step--active .homework-detail-status-step-label {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium);
}

/* =============================================
   ERROR VIEW
   ============================================= */

.homework-detail-error-view {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
}

.homework-detail-error-card {
  max-width: 400px;
  width: 100%;
  text-align: center;
  padding: var(--space-8);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
}

.homework-detail-error-icon {
  color: var(--color-error-500);
  margin-bottom: var(--space-4);
}

.homework-detail-error-title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-2) 0;
}

.homework-detail-error-text {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-6) 0;
}

/* =============================================
   COMPLETED VIEW - CONTENT SECTIONS
   **Validates: Requirements 8.1, 8.2, 8.3, 8.4, 8.5**
   ============================================= */

.homework-detail-content {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.homework-detail-section {
  background: var(--color-bg-secondary);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
}

.homework-detail-section-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-4) 0;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border-light);
}

/* =============================================
   IMAGE GALLERY
   **Validates: Requirements 8.2, 8.5**
   ============================================= */

.homework-detail-image-gallery {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

.homework-detail-main-image {
  width: 100%;
  max-width: 500px;
  aspect-ratio: 4/3;
  background: var(--color-neutral-100);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.homework-detail-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  cursor: zoom-in;
}

.homework-detail-no-image {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-muted);
}

.homework-detail-no-image-hint {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  opacity: 0.8;
}

.homework-detail-image-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  color: var(--color-text-muted);
  min-height: 200px;
}

.homework-detail-image-nav {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.homework-detail-nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--color-neutral-100);
  border: none;
  border-radius: var(--radius-full);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.homework-detail-nav-btn:hover:not(:disabled) {
  background: var(--color-primary-100);
  color: var(--color-primary-600);
}

.homework-detail-nav-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.homework-detail-nav-btn:focus {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.homework-detail-image-indicators {
  display: flex;
  gap: var(--space-2);
}

.homework-detail-image-indicator {
  width: 10px;
  height: 10px;
  background: var(--color-neutral-300);
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.homework-detail-image-indicator:hover {
  background: var(--color-neutral-400);
}

.homework-detail-image-indicator--active {
  background: var(--color-primary-500);
  transform: scale(1.2);
}

.homework-detail-image-indicator:focus {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.homework-detail-image-count {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin: 0;
}

/* =============================================
   GRADING SUMMARY
   ============================================= */

.homework-detail-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.homework-detail-summary-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3);
  background: var(--color-neutral-50);
  border-radius: var(--radius-md);
}

.homework-detail-summary-label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.homework-detail-summary-value {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}

/* Score Colors */
.homework-detail-score--high {
  color: var(--color-success-600);
}

.homework-detail-score--medium {
  color: var(--color-warning-600);
}

.homework-detail-score--low {
  color: var(--color-error-600);
}

/* Completion Status */
.homework-detail-completion-status {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.homework-detail-completion--complete {
  color: var(--color-success-600);
}

.homework-detail-completion--incomplete {
  color: var(--color-warning-600);
}

/* Validation Status */
.homework-detail-validation-status {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.homework-detail-validation--confirmed {
  color: var(--color-success-600);
}

.homework-detail-validation--corrected {
  color: var(--color-warning-600);
}

/* Overall Summary */
.homework-detail-overall-summary {
  padding: var(--space-3);
  background: var(--color-primary-50);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--color-primary-500);
}

.homework-detail-overall-summary p {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: 1.6;
}

/* =============================================
   PAGE INTERPRETATION SECTION
   Shows what type of homework was detected
   ============================================= */

.homework-detail-interpretation-section {
  background: var(--color-bg-secondary);
}

.homework-detail-interpretation-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.homework-detail-interpretation-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.homework-detail-interpretation-topics {
  grid-column: 1 / -1;
}

.homework-detail-interpretation-label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.homework-detail-interpretation-value {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.homework-detail-topic-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.homework-detail-topic-tag {
  display: inline-flex;
  padding: var(--space-1) var(--space-2);
  background: var(--color-primary-100);
  color: var(--color-primary-700);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-full);
}

.homework-detail-word-bank,
.homework-detail-passage-context,
.homework-detail-grading-notes {
  padding: var(--space-3);
  background: var(--color-neutral-50);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
}

.homework-detail-word-bank-items {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.homework-detail-word-bank-item {
  display: inline-flex;
  padding: var(--space-1) var(--space-2);
  background: var(--color-warning-100);
  color: var(--color-warning-800);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-sm);
}

.homework-detail-passage-summary,
.homework-detail-grading-notes-text {
  margin: var(--space-2) 0 0 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: 1.5;
}

/* =============================================
   QUESTIONS LIST
   **Validates: Requirements 8.3**
   ============================================= */

.homework-detail-questions-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.homework-detail-question-card {
  padding: var(--space-4);
  background: var(--color-neutral-50);
  border-radius: var(--radius-md);
  border-left: 4px solid var(--color-neutral-300);
}

.homework-detail-question-card--correct {
  border-left-color: var(--color-success-500);
}

.homework-detail-question-card--incorrect {
  border-left-color: var(--color-error-500);
}

.homework-detail-question-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}

.homework-detail-question-number {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.homework-detail-question-card--correct .homework-detail-question-number {
  color: var(--color-success-600);
}

.homework-detail-question-card--incorrect .homework-detail-question-number {
  color: var(--color-error-600);
}

.homework-detail-question-badge {
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-full);
}

.homework-detail-question-badge--correct {
  background: var(--color-success-100);
  color: var(--color-success-700);
}

.homework-detail-question-badge--incorrect {
  background: var(--color-error-100);
  color: var(--color-error-700);
}

.homework-detail-question-text,
.homework-detail-student-answer {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
  line-height: 1.5;
}

.homework-detail-question-text strong,
.homework-detail-student-answer strong {
  color: var(--color-text-primary);
}

/* Feedback Section */
.homework-detail-feedback {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-light);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.homework-detail-feedback-item {
  padding: var(--space-3);
  border-radius: var(--radius-md);
}

.homework-detail-why-wrong {
  background: var(--color-error-50);
}

.homework-detail-correct-answer {
  background: var(--color-success-50);
}

.homework-detail-feedback-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-2);
}

.homework-detail-why-wrong .homework-detail-feedback-label {
  color: var(--color-error-700);
}

.homework-detail-correct-answer .homework-detail-feedback-label {
  color: var(--color-success-700);
}

.homework-detail-feedback-item p {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: 1.5;
}

/* Correction Notice */
.homework-detail-correction-notice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding: var(--space-3);
  background: var(--color-warning-50);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  color: var(--color-warning-700);
}

/* =============================================
   CORRECTIONS SECTION
   **Validates: Requirements 8.4**
   ============================================= */

.homework-detail-corrections-info {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--color-warning-50);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
}

.homework-detail-corrections-info p {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-warning-700);
}

.homework-detail-corrections-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.homework-detail-correction-card {
  padding: var(--space-3);
  background: var(--color-neutral-50);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--color-warning-500);
}

.homework-detail-correction-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.homework-detail-correction-question {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.homework-detail-correction-change {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.homework-detail-correction-badge {
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-sm);
}

.homework-detail-correction-badge--correct {
  background: var(--color-success-100);
  color: var(--color-success-700);
}

.homework-detail-correction-badge--incorrect {
  background: var(--color-error-100);
  color: var(--color-error-700);
}

.homework-detail-correction-reason {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: 1.5;
}

/* =============================================
   RESPONSIVE STYLES
   ============================================= */

@media (width <= 640px) {
  .homework-detail-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }
  
  .homework-detail-back-btn {
    padding: var(--space-2);
  }
  
  .homework-detail-content {
    padding: var(--space-3);
    gap: var(--space-4);
  }
  
  .homework-detail-section {
    padding: var(--space-3);
  }
  
  .homework-detail-summary-grid {
    grid-template-columns: 1fr;
  }
  
  .homework-detail-status-steps {
    flex-wrap: wrap;
  }
  
  .homework-detail-status-step {
    min-width: 70px;
  }
  
  .homework-detail-question-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }
  
  .homework-detail-correction-header {
    flex-direction: column;
    align-items: flex-start;
  }
}


/* =============================================
   HOMEWORK GRADING PANEL STYLES
   **Feature: homework-grading**
   **Validates: Requirements 1.3, 2.1, 2.2, 2.3, 2.5, 2.6, 2.7**
   ============================================= */

/* Main Panel Container */
.homework-grading-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-bg-primary);
}

.homework-grading-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
  padding: var(--space-4);
}

/* Header Section */
.homework-grading-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.homework-grading-header-text {
  flex: 1;
}

.homework-grading-title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-1) 0;
}

.homework-grading-subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin: 0;
}

.homework-grading-new-btn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  white-space: nowrap;
}

/* =============================================
   SUBMISSION FORM
   **Validates: Requirements 2.1, 2.2, 2.3, 2.5, 2.6**
   ============================================= */

.homework-submission-form {
  background: var(--color-bg-secondary);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-6);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border-light);
}

.homework-submission-form-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border-light);
}

.homework-submission-form-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0;
}

.homework-submission-form-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.homework-submission-form-close:hover {
  background: var(--color-neutral-100);
  color: var(--color-text-primary);
}

.homework-submission-form-close:focus {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

/* Form Sections */
.homework-form-section {
  margin-bottom: var(--space-5);
}

.homework-form-label {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  margin-bottom: var(--space-3);
}

.homework-form-required {
  color: var(--color-error-500);
}

.homework-form-hint {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-2);
}

.homework-form-error {
  font-size: var(--font-size-sm);
  color: var(--color-error-600);
  margin-top: var(--space-2);
}

/* =============================================
   FAMILY MEMBER SELECTOR
   **Validates: Requirements 2.1, 2.6**
   ============================================= */

.homework-member-selector {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.homework-member-option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--color-bg-primary);
  border: 2px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--transition-fast);
  min-width: 140px;
}

.homework-member-option:hover {
  border-color: var(--color-primary-300);
  background: var(--color-primary-50);
}

.homework-member-option--selected {
  border-color: var(--color-primary-500);
  background: var(--color-primary-50);
}

.homework-member-option:focus {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.homework-member-avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-base);
  overflow: hidden;
  flex-shrink: 0;
}

.homework-member-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.homework-member-name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  flex: 1;
}

.homework-member-check {
  color: var(--color-primary-500);
  flex-shrink: 0;
}

/* =============================================
   IMAGE CAPTURE/UPLOAD AREA
   **Validates: Requirements 2.2, 2.3**
   ============================================= */

.homework-capture-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-4);
}

.homework-capture-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-6);
  background: var(--color-bg-primary);
  border: 2px dashed var(--color-border-light);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--transition-fast);
  min-height: 120px;
}

.homework-capture-btn:hover {
  border-color: var(--color-primary-400);
  background: var(--color-primary-50);
}

.homework-capture-btn:focus {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.homework-capture-btn span {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
}

/* Image Preview Grid */
.homework-image-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: var(--space-3);
}

.homework-image-preview-item {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-neutral-100);
}

.homework-image-preview-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.homework-image-remove-btn {
  position: absolute;
  top: var(--space-1);
  right: var(--space-1);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-error-500);
  border: none;
  border-radius: var(--radius-full);
  color: white;
  cursor: pointer;
  transition: all var(--transition-fast);
  opacity: 0.9;
}

.homework-image-remove-btn:hover {
  opacity: 1;
  transform: scale(1.1);
}

.homework-image-remove-btn:focus {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.homework-image-add-more {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  aspect-ratio: 1;
  background: var(--color-bg-primary);
  border: 2px dashed var(--color-border-light);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
  color: var(--color-text-muted);
}

.homework-image-add-more:hover {
  border-color: var(--color-primary-400);
  background: var(--color-primary-50);
  color: var(--color-primary-500);
}

.homework-image-add-more:focus {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.homework-image-add-more span {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
}

/* Hidden file inputs */
.hidden {
  display: none !important;
}

/* =============================================
   FORM ACTIONS
   **Validates: Requirements 2.5, 2.6, 2.7**
   ============================================= */

.homework-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-light);
}

.homework-submit-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid var(--color-white-alpha-30, rgb(255 255 255 / 30%));
  border-top-color: white;
  border-radius: var(--radius-full);
  animation: homework-submit-spin 0.8s linear infinite;
}

@keyframes homework-submit-spin {
  to {
    transform: rotate(360deg);
  }
}

.homework-form-error-banner {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding: var(--space-3);
  background: var(--color-error-50);
  border: 1px solid var(--color-error-200);
  border-radius: var(--radius-md);
  color: var(--color-error-700);
  font-size: var(--font-size-sm);
}

/* =============================================
   SUBMISSIONS LIST SECTION
   **Validates: Requirements 1.3, 7.7**
   ============================================= */

.homework-submissions-section {
  flex: 1;
}

.homework-submissions-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-4) 0;
}

/* Loading State */
.homework-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-8);
  color: var(--color-text-muted);
}

.homework-loading-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--color-neutral-200);
  border-top-color: var(--color-primary-500);
  border-radius: var(--radius-full);
  animation: homework-submit-spin 0.8s linear infinite;
}

/* Empty State */
.homework-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-12);
  text-align: center;
}

.homework-empty-state h3 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0;
}

.homework-empty-state p {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin: 0;
  max-width: 300px;
}

/* Submissions Grid */
.homework-submissions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-4);
}

/* =============================================
   RESPONSIVE STYLES
   ============================================= */

@media (width <= 640px) {
  .homework-grading-content {
    padding: var(--space-3);
  }
  
  .homework-grading-header {
    flex-direction: column;
    gap: var(--space-3);
  }
  
  .homework-grading-new-btn {
    width: 100%;
    justify-content: center;
  }
  
  .homework-submission-form {
    padding: var(--space-4);
  }
  
  .homework-member-selector {
    flex-direction: column;
  }
  
  .homework-member-option {
    width: 100%;
  }
  
  .homework-capture-options {
    grid-template-columns: 1fr;
  }
  
  .homework-image-preview-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .homework-form-actions {
    flex-direction: column-reverse;
  }
  
  .homework-form-actions button {
    width: 100%;
  }
  
  .homework-submissions-grid {
    grid-template-columns: 1fr;
  }
  
  .homework-empty-state {
    padding: var(--space-8);
  }
}

/* ===========================================
   KID'S CENTER PAGE STYLES
   Main page with sidebar navigation for kid-focused features
   **Feature: decision-wheel**
   **Validates: Requirements 1.1, 1.2, 1.3**
   =========================================== */

/* Main layout container */
.kids-center-layout {
  display: flex;
  flex-direction: row; /* Explicitly set horizontal layout */
  min-height: calc(100vh - 120px);
  background: var(--color-bg-primary);
  
  /* Break out of the constrained parent container */
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  position: relative;
}

/* Mobile header - hidden on desktop */
.kids-center-mobile-header {
  display: none;
}

/* Sidebar navigation */
.kids-center-sidebar {
  width: 260px;
  flex-shrink: 0;
  background: var(--color-bg-card);
  border-right: 1px solid var(--color-border-card);
  display: flex;
  flex-direction: column;
}

.kids-center-sidebar-header {
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-border-card);
}

.kids-center-sidebar-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin: 0;
}

/* Navigation items */
.kids-center-nav {
  padding: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.kids-center-nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  background: transparent;
  border: none;
  color: var(--color-text-secondary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: all var(--transition-fast);
  text-align: left;
  width: 100%;
  min-height: 44px;
}

.kids-center-nav-item:hover {
  background: var(--color-bg-card-hover);
  color: var(--color-text-primary);
}

/* Active tab state */
.kids-center-nav-item--active {
  background: var(--color-primary-100);
  color: var(--color-primary-700);
}

.kids-center-nav-item--active:hover {
  background: var(--color-primary-100);
}

/* Content panel */
.kids-center-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: var(--space-4);
}

/* Placeholder for future tabs */
.kids-center-placeholder {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  color: var(--color-text-muted);
}

/* Mobile overlay */
.kids-center-overlay {
  display: none;
}

/* Mobile menu button */
.kids-center-menu-btn {
  padding: var(--space-2);
  min-width: 44px;
  min-height: 44px;
}

/* Mobile title */
.kids-center-mobile-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin: 0;
}

/* ===========================================
   KID'S CENTER RESPONSIVE STYLES
   =========================================== */

@media (width <= 768px) {
  /* Show mobile header */
  .kids-center-mobile-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg-card);
    border-bottom: 1px solid var(--color-border-card);
    position: sticky;
    top: 0;
    z-index: 10;
  }
  
  /* Stack layout vertically and reset breakout */
  .kids-center-layout {
    flex-direction: column;
    min-height: calc(100vh - 60px);
    width: 100%;
    margin-left: 0;
  }
  
  /* Sidebar becomes slide-out drawer */
  .kids-center-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 280px;
    z-index: 100;
    transform: translateX(-100%);
    transition: transform var(--transition-normal);
    box-shadow: var(--shadow-lg);
  }
  
  .kids-center-sidebar--open {
    transform: translateX(0);
  }
  
  /* Overlay when sidebar is open */
  .kids-center-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: var(--color-overlay);
    z-index: 99;
  }
  
  /* Content takes full width */
  .kids-center-content {
    padding: var(--space-3);
  }
}

/* Prevent body scroll when mobile menu is open */
body.kids-center-menu-open {
  overflow: hidden;
}


/* ===========================================
   DECISION WHEEL PANEL STYLES
   Interactive spinning wheel for random decisions
   **Feature: decision-wheel**
   **Validates: Requirements 3.1, 3.2, 3.3, 3.4, 4.1, 4.2, 8.1, 8.2, 8.3, 8.4, 8.5, 9.1, 10.1, 10.2, 10.3, 10.4, 10.5, 12.1, 12.2, 12.4**
   =========================================== */

/* Main panel container */
.decision-wheel-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 500px;
}

/* Two-column layout */
.decision-wheel-layout {
  display: flex;
  gap: var(--space-6);
  flex: 1;
  min-height: 0;
}

/* ===========================================
   OPTIONS PANEL (Left Side)
   =========================================== */

.decision-wheel-options-panel {
  width: 320px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--color-bg-card);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border-card);
  overflow: hidden;
}

.decision-wheel-options-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-border-card);
  background: var(--color-surface-1);
}

.decision-wheel-options-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0;
}

.decision-wheel-add-btn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  min-height: 36px;
  font-size: var(--font-size-sm);
}

/* Options List */
.decision-wheel-options-list {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Empty State */
.decision-wheel-empty-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-8);
  text-align: center;
}

.decision-wheel-empty-icon {
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}

.decision-wheel-empty-text {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-1) 0;
}

.decision-wheel-empty-hint {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin: 0;
}

/* Option Item */
.decision-wheel-option-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border-card);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--transition-fast);
  min-height: 48px;
}

.decision-wheel-option-item:hover {
  background: var(--color-surface-3);
  border-color: var(--color-primary-300);
}

.decision-wheel-option-item:focus {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

/* Option on wheel state */
.decision-wheel-option-item--on-wheel {
  background: var(--color-primary-50);
  border-color: var(--color-primary-300);
}

.decision-wheel-option-item--on-wheel:hover {
  background: var(--color-primary-100);
}

.decision-wheel-option-content {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  flex: 1;
}

.decision-wheel-option-text {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.decision-wheel-option-badge {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  background: var(--color-success-100);
  color: var(--color-success-700);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  flex-shrink: 0;
}

.decision-wheel-option-delete {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
  flex-shrink: 0;
  min-width: 44px;
  min-height: 44px;
}

.decision-wheel-option-delete:hover {
  background: var(--color-error-50);
  color: var(--color-error-600);
}

.decision-wheel-option-delete:focus {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

/* ===========================================
   WHEEL AREA (Right Side)
   =========================================== */

.decision-wheel-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  min-width: 0;
}

.decision-wheel-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  width: 100%;
  max-width: 400px;
}

/* Placeholder when < 2 options */
.decision-wheel-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-8);
  text-align: center;
}

.decision-wheel-placeholder-icon {
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}

.decision-wheel-placeholder-text {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-2) 0;
}

.decision-wheel-placeholder-hint {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin: 0;
}

/* SVG Wheel Container */
.decision-wheel-canvas-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.decision-wheel-wrapper {
  position: relative;
  width: 100%;
  max-width: 350px;
  aspect-ratio: 1;
}

/* Fixed Pointer */
.decision-wheel-pointer {
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  filter: drop-shadow(0 2px 4px var(--color-shadow-medium, rgb(0 0 0 / 20%)));
}

/* SVG Wheel */
.decision-wheel-svg {
  width: 100%;
  height: 100%;
  transform-origin: center center;
}

.decision-wheel-segment {
  transition: opacity var(--transition-fast);
}

.decision-wheel-segment--clickable {
  cursor: pointer;
}

.decision-wheel-segment--clickable:hover {
  opacity: 0.85;
}

.decision-wheel-segment-text {
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-semibold);
  pointer-events: none;
}

/* Removal Error Message */
.decision-wheel-removal-error {
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-4);
  background: var(--color-warning-50);
  color: var(--color-warning-700);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  text-align: center;
}

/* Spin Button */
.decision-wheel-spin-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-8);
  min-height: 56px;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  transition: all var(--transition-normal);
}

.decision-wheel-spin-btn:hover:not(:disabled) {
  transform: scale(1.05);
  box-shadow: var(--shadow-xl);
}

.decision-wheel-spin-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* ===========================================
   WINNER ANNOUNCEMENT OVERLAY
   =========================================== */

.decision-wheel-winner-overlay {
  position: fixed;
  inset: 0;
  background: var(--color-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: var(--space-4);
  animation: decision-wheel-fade-in 0.3s ease-out;
}

@keyframes decision-wheel-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.decision-wheel-winner-modal {
  background: var(--color-bg-card);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  text-align: center;
  max-width: 400px;
  width: 100%;
  box-shadow: var(--shadow-2xl);
  animation: decision-wheel-scale-in 0.3s ease-out;
}

@keyframes decision-wheel-scale-in {
  from {
    transform: scale(0.9);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

.decision-wheel-winner-icon {
  margin-bottom: var(--space-4);
}

.decision-wheel-trophy {
  color: var(--color-warning-500);
}

.decision-wheel-winner-title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-4) 0;
}

.decision-wheel-winner-text {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary-600);
  margin: 0 0 var(--space-6) 0;
  padding: var(--space-4);
  background: var(--color-primary-50);
  border-radius: var(--radius-lg);
}

.decision-wheel-winner-dismiss {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  min-height: 48px;
  font-size: var(--font-size-base);
  width: 100%;
}

/* ===========================================
   NEW OPTION FLYOUT STYLES
   =========================================== */

.decision-wheel-flyout-content {
  padding: var(--space-4);
}

.decision-wheel-flyout-label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
}

.decision-wheel-flyout-input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border-card);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-base);
  background: var(--color-surface-1);
  color: var(--color-text-primary);
  min-height: 44px;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.decision-wheel-flyout-input:focus {
  outline: none;
  border-color: var(--color-primary-500);
  box-shadow: 0 0 0 2px var(--color-primary-overlay-10);
}

.decision-wheel-flyout-input::placeholder {
  color: var(--color-text-muted);
}

.decision-wheel-flyout-hint {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin: var(--space-2) 0 0 0;
}

.decision-wheel-flyout-error {
  font-size: var(--font-size-sm);
  color: var(--color-error-600);
  margin: var(--space-2) 0 0 0;
}

.decision-wheel-flyout-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
}

/* ===========================================
   DECISION WHEEL RESPONSIVE STYLES
   =========================================== */

@media (width <= 900px) {
  .decision-wheel-layout {
    flex-direction: column;
    gap: var(--space-4);
  }
  
  .decision-wheel-options-panel {
    width: 100%;
    max-height: 300px;
  }
  
  .decision-wheel-main {
    padding: var(--space-4) 0;
  }
  
  .decision-wheel-display {
    max-width: 300px;
  }
}

@media (width <= 480px) {
  .decision-wheel-panel {
    min-height: 400px;
  }
  
  .decision-wheel-options-panel {
    max-height: 250px;
  }
  
  .decision-wheel-options-header {
    padding: var(--space-3);
  }
  
  .decision-wheel-options-list {
    padding: var(--space-2);
  }
  
  .decision-wheel-option-item {
    padding: var(--space-2) var(--space-3);
  }
  
  .decision-wheel-display {
    max-width: 280px;
  }
  
  .decision-wheel-spin-btn {
    padding: var(--space-3) var(--space-6);
    min-height: 48px;
    font-size: var(--font-size-base);
  }
  
  .decision-wheel-winner-modal {
    padding: var(--space-6);
  }
  
  .decision-wheel-winner-title {
    font-size: var(--font-size-xl);
  }
  
  .decision-wheel-winner-text {
    font-size: var(--font-size-lg);
  }
}

/* Mobile collapsible options panel header */
.decision-wheel-options-collapse-header {
  display: none;
}

@media (width <= 768px) {
  .decision-wheel-options-collapse-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface-1);
    border-bottom: 1px solid var(--color-border-card);
    cursor: pointer;
    min-height: 44px;
  }
}


/* ===========================================
   HABIT CARD COMPONENT
   HabitKit-style habit tracking with pip grid
   **Feature: habit-tracking**
   **Validates: Requirements 2.4, 3.7**
   =========================================== */

/* Main habit card container */
.habit-card {
  background: var(--color-surface-1);
  border: 1px solid var(--color-border-card);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  transition: all var(--transition-normal);
}

.habit-card:hover {
  border-color: var(--color-primary-300);
  box-shadow: var(--shadow-sm);
}

/* Expanded state - slightly more padding */
.habit-card--grid-expanded {
  padding: var(--space-4);
}

/* Card Header */
.habit-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.habit-card-name {
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Card Actions */
.habit-card-actions {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-shrink: 0;
}

.habit-card-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.habit-card-action-btn:hover {
  background: var(--color-surface-2);
  color: var(--color-text-primary);
}

.habit-card-action-btn:focus {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.habit-card-action-btn--danger:hover {
  background: var(--color-error-50);
  color: var(--color-error-600);
}

/* ===========================================
   PIP GRID - Shared Styles
   =========================================== */

.habit-pip-grid {
  display: flex;
  gap: var(--space-1);
}

/* Individual Pip */
.habit-pip {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-neutral-200);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
  position: relative;
}

.habit-pip:hover {
  transform: scale(1.1);
  box-shadow: var(--shadow-sm);
}

.habit-pip:focus {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

/* Filled pip state - completed */

/* **Validates: Requirements 3.4** */
.habit-pip--filled {
  background: var(--color-success-500);
}

.habit-pip--filled:hover {
  background: var(--color-success-600);
}

/* Today's pip - distinct styling */

/* **Validates: Requirements 3.7** */
.habit-pip--today {
  box-shadow: 0 0 0 2px var(--color-primary-500);
}

.habit-pip--today.habit-pip--filled {
  box-shadow: 0 0 0 2px var(--color-primary-500);
}

/* ===========================================
   COMPACT VIEW - 7 Days (Week)
   **Validates: Requirements 3.1, 3.6**
   =========================================== */

.habit-pip-grid--week {
  flex-direction: row;
  justify-content: flex-start;
}

.habit-pip-grid--week .habit-pip {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

/* Day label inside compact pip */
.habit-pip-day-label {
  font-size: 10px;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  line-height: 1;
}

.habit-pip--filled .habit-pip-day-label {
  color: var(--color-white);
}

/* ===========================================
   EXPANDED VIEW - Full Month Calendar
   **Validates: Requirements 3.2, 3.8**
   =========================================== */

.habit-pip-grid--month {
  flex-direction: column;
  gap: var(--space-2);
}

/* Month header */
.habit-month-header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border-card);
}

.habit-month-name {
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
}

/* Weekday labels row */
.habit-month-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--space-1);
  text-align: center;
}

.habit-weekday-label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  padding: var(--space-1) 0;
}

/* Calendar grid */
.habit-month-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--space-1);
}

/* Month view pip */
.habit-pip--month {
  width: 100%;
  aspect-ratio: 1;
  min-height: 28px;
  max-height: 36px;
}

/* Day number inside month pip */
.habit-pip-day {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  line-height: 1;
}

.habit-pip--filled .habit-pip-day {
  color: var(--color-white);
}

/* Future dates - disabled state */

/* **Validates: Requirements 3.8** */
.habit-pip--future {
  background: var(--color-neutral-100);
  cursor: not-allowed;
  opacity: 0.5;
}

.habit-pip--future:hover {
  transform: none;
  box-shadow: none;
}

.habit-pip--future .habit-pip-day {
  color: var(--color-text-muted);
}

/* Other month dates - muted */
.habit-pip--other-month {
  background: var(--color-neutral-100);
  opacity: 0.4;
  cursor: not-allowed;
}

.habit-pip--other-month:hover {
  transform: none;
  box-shadow: none;
}

.habit-pip--other-month .habit-pip-day {
  color: var(--color-text-muted);
}

/* ===========================================
   RESPONSIVE ADJUSTMENTS
   =========================================== */

/* Larger touch targets on mobile */
@media (width <= 640px) {
  .habit-pip-grid--week .habit-pip {
    width: 32px;
    height: 32px;
  }
  
  .habit-card-action-btn {
    width: 36px;
    height: 36px;
  }
  
  .habit-pip--month {
    min-height: 32px;
    max-height: 40px;
  }
}

/* Very small screens */
@media (width <= 375px) {
  .habit-pip-grid--week .habit-pip {
    width: 28px;
    height: 28px;
  }
  
  .habit-pip-grid--week {
    gap: var(--space-1);
  }
}

/* ===========================================
   ACCESSIBILITY - Forced Colors Mode
   =========================================== */

@media (forced-colors: active) {
  .habit-pip {
    border: 1px solid CanvasText;
  }
  
  .habit-pip--filled {
    background: Highlight;
    border-color: Highlight;
  }
  
  .habit-pip--today {
    outline: 2px solid Highlight;
    outline-offset: 2px;
  }
  
  .habit-card-action-btn:focus {
    outline: 2px solid Highlight;
  }
}

/* ===========================================
   ANIMATION - Pip Toggle Feedback
   =========================================== */

@keyframes habit-pip-pulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.15);
  }

  100% {
    transform: scale(1);
  }
}

.habit-pip:active {
  animation: habit-pip-pulse 0.2s ease-out;
}

/* ===========================================
   HABITS SECTION STYLES
   **Feature: habit-tracking**
   **Validates: Requirements 2.1, 2.3, 2.4**
   =========================================== */

/* Habits section container within PersonCard */
.habits-section {
  display: block;
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-card);
}

/* Section header */
.habits-section h4 {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-3);
}

/* Empty state styling */
.habits-section .text-center {
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
}

/* Add habit button (dashed border style) */
.habits-section button[style*="dashed"] {
  transition: all 0.2s ease;
}

.habits-section button[style*="dashed"]:hover {
  background: var(--color-primary-50) !important;
  border-color: var(--color-primary-400) !important;
}

.habits-section button[style*="dashed"]:focus {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

/* Add habit button - native button styled to match app design */
.add-habit-btn {
  width: 100%;
  margin-top: var(--space-2);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 1px dashed var(--color-border-card);
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
  color: var(--color-primary-500);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 44px; /* Touch target */
}

.add-habit-btn:hover {
  background: var(--color-primary-50);
  border-color: var(--color-primary-400);
}

.add-habit-btn:focus-visible {
  outline: 2px solid var(--color-primary-500);
  outline-offset: 2px;
}

.add-habit-btn:active {
  transform: scale(0.98);
}

.add-habit-btn svg {
  flex-shrink: 0;
}

/* Responsive adjustments */
@media (width <= 640px) {
  .habits-section {
    margin-top: var(--space-4);
    padding-top: var(--space-3);
  }
}

/* Accessibility - Forced Colors Mode */
@media (forced-colors: active) {
  .habits-section button[style*="dashed"] {
    border: 2px dashed CanvasText !important;
  }
  
  .habits-section button[style*="dashed"]:focus {
    outline: 2px solid Highlight;
  }
}

/* ===========================================
   NEW DAY FLYOUT COMPONENT
   Flyout panel for starting a new day
   Theme-aware styling using CSS custom properties
   =========================================== */

.new-day-flyout-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4);
}

/* Info cards - base styles */
.new-day-info-card {
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  border: 1px solid;
}

/* Error variant (what will be cleared) */
.new-day-info-card--error {
  background: var(--color-error-50);
  border-color: var(--color-error-200);
}

/* Success variant (what will be created) */
.new-day-info-card--success {
  background: var(--color-success-50);
  border-color: var(--color-success-200);
}

/* Primary variant (what will be preserved) */
.new-day-info-card--primary {
  background: var(--color-primary-50);
  border-color: var(--color-primary-200);
}

/* Info card titles */
.new-day-info-title {
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-2);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.new-day-info-title--error {
  color: var(--color-error-700);
}

.new-day-info-title--success {
  color: var(--color-success-700);
}

.new-day-info-title--primary {
  color: var(--color-primary-700);
}

/* Info card lists */
.new-day-info-list {
  font-size: var(--font-size-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.new-day-info-list--error {
  color: var(--color-error-700);
}

.new-day-info-list--success {
  color: var(--color-success-700);
}

.new-day-info-list--primary {
  color: var(--color-primary-700);
}

.new-day-info-list strong {
  font-weight: var(--font-weight-semibold);
}

/* Warning text */
.new-day-warning-text {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-top: var(--space-2);
}

/* Loading spinner */
.new-day-spinner {
  animation: new-day-spin 0.75s linear infinite;
}

@keyframes new-day-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Responsive adjustments */
@media (width <= 640px) {
  .new-day-flyout-content {
    padding: var(--space-3);
    gap: var(--space-3);
  }

  .new-day-info-card {
    padding: var(--space-3);
  }
}

/* ===========================================
   SCOUNDREL GAME PANEL STYLES
   **Feature: scoundrel-game**
   =========================================== */

.scoundrel-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  padding: var(--space-4);
  background: var(--color-bg-primary);
}

.scoundrel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
  flex-shrink: 0;
}

.scoundrel-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0;
}

.scoundrel-help-btn {
  padding: var(--space-2);
  border-radius: var(--radius-md);
}

.scoundrel-canvas-container {
  flex: 1;
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-secondary);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: var(--space-4);
}

.scoundrel-canvas {
  cursor: pointer;
  border-radius: var(--radius-md);
}

.scoundrel-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

.scoundrel-start-btn {
  padding: var(--space-3) var(--space-6);
  font-size: var(--font-size-lg);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.scoundrel-action-buttons {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  justify-content: center;
}

.scoundrel-action-buttons button {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-4);
}

.scoundrel-skip-btn {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-4);
}

.scoundrel-hint {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  margin: 0;
}

/* Tutorial Overlay */
.scoundrel-tutorial-overlay {
  position: fixed;
  inset: 0;
  background: rgb(0 0 0 / 50%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: var(--space-4);
}

.scoundrel-tutorial {
  background: var(--color-bg-primary);
  border-radius: var(--radius-lg);
  max-width: 500px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: var(--shadow-xl);
}

.scoundrel-tutorial-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-border-secondary);
}

.scoundrel-tutorial-header h3 {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.scoundrel-tutorial-content {
  padding: var(--space-4);
}

.scoundrel-tutorial-content h4 {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: var(--space-4) 0 var(--space-2);
}

.scoundrel-tutorial-content h4:first-child {
  margin-top: 0;
}

.scoundrel-tutorial-content p {
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-2);
  line-height: 1.5;
}

.scoundrel-tutorial-content ul {
  margin: 0;
  padding-left: var(--space-5);
  color: var(--color-text-secondary);
}

.scoundrel-tutorial-content li {
  margin-bottom: var(--space-2);
  line-height: 1.5;
}

.scoundrel-tutorial-content strong {
  color: var(--color-text-primary);
}

/* High Scores */
.scoundrel-high-scores {
  margin-top: var(--space-4);
  padding: var(--space-4);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-lg);
  flex-shrink: 0;
}

.scoundrel-high-scores h4 {
  margin: 0 0 var(--space-3);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.scoundrel-high-scores ol {
  margin: 0;
  padding-left: var(--space-5);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

.scoundrel-high-scores li {
  margin-bottom: var(--space-1);
}

.scoundrel-high-scores .text-success {
  color: var(--color-success-500);
}

.scoundrel-high-scores .text-danger {
  color: var(--color-error-500);
}

/* Responsive adjustments */
@media (width <= 640px) {
  .scoundrel-panel {
    padding: var(--space-2);
  }

  .scoundrel-canvas-container {
    min-height: 250px;
  }

  .scoundrel-controls {
    gap: var(--space-2);
  }

  .scoundrel-action-buttons button {
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-sm);
  }

  .scoundrel-start-btn {
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-base);
  }
}