/* IMPORTANT: Apply default background to entire body */
body.theme-default,
body,
.theme-default {
  background: linear-gradient(135deg, #ffffff 0%, #f5f7fa 100%) !important;
  color: #333 !important;
}

/* Hero section styling for default theme */
.theme-default .theme-hero,
body.theme-default .hero,
.hero {
  background: linear-gradient(135deg, #4e93e8 0%, #5461db 100%) !important;
  color: white !important;
}

/* Ensure navbar gets the default styling */
.theme-default .navbar,
body.theme-default .navbar,
.navbar {
  background-color: #f8f9fa !important;
  border-bottom: 1px solid #dee2e6 !important;
}

/* Card Colors for Default Theme */
.theme-default .health-card, 
body.theme-default .health-card,
.health-card {
  background: #e8f5e9 !important;
  border-color: #4caf50 !important;
}

.theme-default .finance-card,
body.theme-default .finance-card,
.finance-card {
  background: #fff8e1 !important;
  border-color: #ffc107 !important;
}

.theme-default .lifestyle-card,
body.theme-default .lifestyle-card,
.lifestyle-card {
  background: #e0f7fa !important;
  border-color: #17a2b8 !important;
}

.theme-default .health-icon,
body.theme-default .health-icon,
.health-icon {
  color: #28a745 !important;
}

.theme-default .finance-icon,
body.theme-default .finance-icon,
.finance-icon {
  color: #ffc107 !important;
}

.theme-default .lifestyle-icon,
body.theme-default .lifestyle-icon,
.lifestyle-icon {
  color: #17a2b8 !important;
}

.theme-default .card-title,
body.theme-default .card-title,
.card-title {
  color: #212529 !important;
  font-weight: 600 !important;
}

.theme-default .card-text,
body.theme-default .card-text,
.card-text {
  color: #495057 !important;
}

/* Override for footer transparency fix */
.theme-default footer,
body.theme-default footer,
footer {
  background-color: #f1f1f1 !important;
  color: #6c757d !important;
  border-top: 1px solid #e9ecef !important;
}

/* Default Theme - Light & Clean */
:root .theme-default,
:root body.theme-default,
:root {
  --primary: #007bff !important;
  --secondary: #6c757d !important;
  --success: #28a745 !important;
  --info: #17a2b8 !important;
  --warning: #ffc107 !important;
  --danger: #dc3545 !important;
  --light: #f8f9fa !important;
  --dark: #343a40 !important;
  
  --body-bg: linear-gradient(135deg, #ffffff 0%, #f5f7fa 100%) !important;
  --text-color: #333 !important;
  --link-color: #007bff !important;
  --link-hover-color: #0056b3 !important;
  
  --navbar-bg: #f8f9fa !important;
  --navbar-color: #333 !important;
  --navbar-active: #007bff !important;
  --navbar-hover-bg: #e9ecef !important;
  
  --dropdown-bg: #fff !important;
  --dropdown-color: #333 !important;
  --dropdown-hover-bg: #f8f9fa !important;
  --dropdown-border-color: #dee2e6 !important;
  
  --card-bg: #fff !important;
  --card-border: #dee2e6 !important;
  --card-shadow: 0 .125rem .25rem #e9ecef !important;
  
  --input-bg: #fff !important;
  --input-border: #ced4da !important;
  --input-color: #495057 !important;
  --input-focus-border: #80bdff !important;
  
  --btn-default-bg: #f8f9fa !important;
  --btn-default-color: #212529 !important;
  --btn-default-border: #f8f9fa !important;
  
  --footer-bg: #f1f1f1 !important;
  --footer-color: #6c757d !important;
  
  /* Default Design System Tokens */
  --ds-seam: #CED5E0 !important;
  --ds-card-bg: #FFFFFF !important;
  --ds-card-title: #253750 !important;
  --ds-focus-ring: #0059D6 !important;
  --bs-focus-ring-color: var(--ds-focus-ring) !important;
}

/* Circular Chart Styles for Default Theme */
.circular-chart,
.theme-default .circular-chart,
body.theme-default .circular-chart {
  display: block;
  margin: 10px auto;
  max-width: 80%;
  max-height: 80px;
}

.circle-bg,
.theme-default .circle-bg,
body.theme-default .circle-bg {
  fill: none;
  stroke: #eee;
  stroke-width: 3.8;
}

.circle,
.theme-default .circle,
body.theme-default .circle {
  fill: none;
  stroke-width: 3.8;
  stroke-linecap: round;
  animation: progress 1s ease-out forwards;
}

@keyframes progress {
  0% {
    stroke-dasharray: 0 100;
  }
}

.percentage,
.theme-default .percentage,
body.theme-default .percentage {
  fill: #666;
  font-family: sans-serif;
  font-size: 0.5em;
  text-anchor: middle;
}

.low-completion .circle,
.theme-default .low-completion .circle,
body.theme-default .low-completion .circle {
  stroke: #dc3545;
}

.medium-completion .circle,
.theme-default .medium-completion .circle,
body.theme-default .medium-completion .circle {
  stroke: #ffc107;
}

.high-completion .circle,
.theme-default .high-completion .circle,
body.theme-default .high-completion .circle {
  stroke: #28a745;
}

/* Modal-specific versions */
.modal-circular-chart,
.theme-default .modal-circular-chart,
body.theme-default .modal-circular-chart {
  display: block;
  margin: 0 auto;
  max-width: 80%;
  max-height: 250px;
}

.modal-circle-bg,
.theme-default .modal-circle-bg,
body.theme-default .modal-circle-bg {
  fill: none;
  stroke: #eee;
  stroke-width: 3.8;
}

.modal-circle,
.theme-default .modal-circle,
body.theme-default .modal-circle {
  fill: none;
  stroke-width: 3.8;
  stroke-linecap: round;
  transition: stroke-dasharray 0.5s ease;
}

.modal-percentage,
.theme-default .modal-percentage,
body.theme-default .modal-percentage {
  fill: #666;
  font-family: sans-serif;
  font-size: 0.5em;
  text-anchor: middle;
  font-weight: bold;
}

.modal-low-completion .modal-circle,
.theme-default .modal-low-completion .modal-circle,
body.theme-default .modal-low-completion .modal-circle {
  stroke: #dc3545;
}

.modal-medium-completion .modal-circle,
.theme-default .modal-medium-completion .modal-circle,
body.theme-default .modal-medium-completion .modal-circle {
  stroke: #ffc107;
}

.modal-high-completion .modal-circle,
.theme-default .modal-high-completion .modal-circle,
body.theme-default .modal-high-completion .modal-circle {
  stroke: #28a745;
}

/* Meal Planner Main UI Theme Fixes for Default Theme */
.meal-section,
.theme-default .meal-section,
body.theme-default .meal-section {
  background-color: #fff;
  color: #333;
  border-color: #dee2e6;
}

[id^="meal-"],
.theme-default [id^="meal-"],
body.theme-default [id^="meal-"] {
  background-color: #f8f9fa;
  color: #333;
  border-color: #dee2e6;
}

.meal-empty,
.theme-default .meal-empty,
body.theme-default .meal-empty {
  background-color: #fafafa;
  color: #6c757d;
  border: 1px dashed #dee2e6;
}

.no-foods-message,
.theme-default .no-foods-message,
body.theme-default .no-foods-message {
  color: #6c757d;
}
/* Dark Theme */
.theme-dark .empty-meal {
  background-color: #343a40 !important;
  color: #e9ecef !important;
  border-color: #495057 !important;
}

.theme-dark .text-muted,
.theme-dark .empty-meal-content p {
  color: #adb5bd !important;
}

/* Onyx Theme */
.theme-onyx .empty-meal {
  background-color: #1a1a1a !important;
  color: #f5f5f5 !important;
  border-color: #333333 !important;
}

.theme-onyx .text-muted,
.theme-onyx .empty-meal-content p {
  color: #8c8c8c !important;
}

/* Nature Theme */
.theme-nature .empty-meal {
  background-color: #eff1ea !important;
  color: #3d2a15 !important;
  border-color: #c3e6cb !important;
}

.theme-nature .text-muted,
.theme-nature .empty-meal-content p {
  color: #61523b !important;
}
/* Button styling for empty meals */
.theme-dark .empty-meal .btn-outline-primary {
  color: #4dabec !important;
  border-color: #4dabec !important;
}

.theme-onyx .empty-meal .btn-outline-primary {
  color: #81d4fa !important;
  border-color: #81d4fa !important;
}

.theme-nature .empty-meal .btn-outline-primary {
  color: #2e7d32 !important;
  border-color: #2e7d32 !important;
}

/* Fix for btn-outline-secondary visibility in default theme */
.theme-default .btn-outline-secondary,
body.theme-default .btn-outline-secondary,
.btn-outline-secondary {
  color: #6c757d !important;
  background-color: transparent !important;
  border: 1px solid #ced4da !important; /* Match input border color */
}

.theme-default .btn-outline-secondary:hover,
body.theme-default .btn-outline-secondary:hover,
.btn-outline-secondary:hover {
  color: #fff !important;
  background-color: #6c757d !important;
  border-color: #6c757d !important;
}

.theme-default .btn-outline-secondary:focus,
body.theme-default .btn-outline-secondary:focus,
.btn-outline-secondary:focus {
  box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.25) !important;
}

.theme-default .btn-outline-secondary.dropdown-toggle:after,
body.theme-default .btn-outline-secondary.dropdown-toggle:after,
.btn-outline-secondary.dropdown-toggle:after {
  border-top-color: currentColor !important;
}

/* Ensure input-group buttons match input styling */
.theme-default .input-group .btn-outline-secondary,
body.theme-default .input-group .btn-outline-secondary,
.input-group .btn-outline-secondary {
  border-left: none !important;
  border-radius: 0 0.25rem 0.25rem 0 !important;
}

/* Match focus state with input fields */
.theme-default .input-group .btn-outline-secondary:focus,
body.theme-default .input-group .btn-outline-secondary:focus,
.input-group .btn-outline-secondary:focus {
  border-color: #80bdff !important;
  box-shadow: none !important;
}