/* themes.css */
:root {
  /* Brand Colors */
  --nn-primary: #4caf50;
  --nn-primary-dark: #45a049;
  --nn-primary-darker: #388e3c;
  --nn-primary-light: #81c784;
  --nn-primary-lighter: #c8e6c9;

  --nn-secondary: #ffc107;
  --nn-secondary-dark: #ff8f00;
  --nn-secondary-light: #fff350;

  --nn-accent: #2196f3;
  --nn-success: #4caf50;
  --nn-warning: #ff9800;
  --nn-danger: #f44336;
  --nn-info: #00bcd4;

  /* Light Theme Colors */
  --nn-bg-primary: #ffffff;
  --nn-bg-secondary: #f8f9fa;
  --nn-bg-tertiary: #e9ecef;
  --nn-text-primary: #212529;
  --nn-text-secondary: #6c757d;
  --nn-text-muted: #868e96;
  --nn-border: #dee2e6;
  --nn-shadow: rgba(0, 0, 0, 0.1);

  /* Override Bootstrap CSS Variables */
  --bs-primary: var(--nn-primary);
  --bs-primary-rgb: 76, 175, 80;
  --bs-secondary: var(--nn-secondary);
  --bs-secondary-rgb: 255, 193, 7;
  --bs-success: var(--nn-success);
  --bs-warning: var(--nn-warning);
  --bs-danger: var(--nn-danger);
  --bs-info: var(--nn-info);

  --bs-body-bg: var(--nn-bg-primary);
  --bs-body-color: var(--nn-text-primary);
  --bs-border-color: var(--nn-border);

  /* Component-specific variables */
  --nn-navbar-bg: var(--nn-bg-primary);
  --nn-navbar-text: var(--nn-text-primary);
  --nn-card-bg: var(--nn-bg-primary);
  --nn-card-shadow: 0 2px 4px var(--nn-shadow);

  /* Alert Warning custom properties for better light theme contrast */
  --alert-warning-bg: #fff3cd;
  --alert-warning-border: #ffeaa7;
  --alert-warning-text: #856404;
}

/* Dark Theme */
[data-bs-theme='dark'] {
  --nn-bg-primary: #1a1a1a;
  --nn-bg-secondary: #2d2d2d;
  --nn-bg-tertiary: #3d3d3d;
  --nn-text-primary: #ffffff;
  --nn-text-secondary: #b0b0b0;
  --nn-text-muted: #888888;
  --nn-border: #404040;
  --nn-shadow: rgba(0, 0, 0, 0.3);

  /* Adjust primary colors for dark mode */
  --nn-primary: #66bb6a;
  --nn-primary-dark: #4caf50;
  --nn-primary-light: #81c784;

  /* Update Bootstrap variables for dark mode */
  --bs-body-bg: var(--nn-bg-primary);
  --bs-body-color: var(--nn-text-primary);
  --bs-border-color: var(--nn-border);

  --nn-navbar-bg: var(--nn-bg-secondary);
  --nn-navbar-text: var(--nn-text-primary);
  --nn-card-bg: var(--nn-bg-secondary);
  --nn-card-shadow: 0 2px 8px var(--nn-shadow);

  /* Alert Warning custom properties for better dark theme contrast */
  --alert-warning-bg: #664d03;
  --alert-warning-border: #805208;
  --alert-warning-text: #ffecb5;
}

.container {
  max-width: 720px;
}

.bi-fill {
  color: var(--nn-bg-secondary);
}

.bg-primary {
  background-color: var(--nn-primary) !important;
}

/* Enhanced Component Styles */
/* Button variants - Override Bootstrap's hardcoded colors */
.btn-primary {
  background-color: var(--nn-primary);
  border-color: var(--nn-primary);
  color: white;
  --bs-btn-active-color: white !important;
  --bs-btn-active-bg: var(--nn-primary-dark) !important;
  --bs-btn-active-border-color: var(--nn-primary-dark) !important;
}

.btn-primary:hover {
  background-color: var(--nn-primary-dark);
  border-color: var(--nn-primary-dark);
  color: white;
}

.btn-primary:focus,
.btn-primary.focus {
  background-color: var(--nn-primary-dark);
  border-color: var(--nn-primary-dark);
  color: white;
  box-shadow: 0 0 0 0.25rem rgba(76, 175, 80, 0.25);
}

.btn-primary:disabled,
.btn-primary.disabled {
  background-color: var(--nn-primary-light);
  border-color: var(--nn-primary-light);
  color: white;
  opacity: 0.6;
}

.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
  background-color: var(--nn-primary-dark);
  border-color: var(--nn-primary-dark);
  color: white;
}

.btn-success {
  background-color: var(--nn-success);
  border-color: var(--nn-success);
  color: white;
}

.btn-success:hover {
  background-color: #45a049;
  border-color: #45a049;
  color: white;
}

.btn-success:focus,
.btn-success.focus {
  background-color: #45a049;
  border-color: #45a049;
  color: white;
  box-shadow: 0 0 0 0.25rem rgba(76, 175, 80, 0.25);
}

.btn-success:disabled,
.btn-success.disabled {
  background-color: var(--nn-success);
  border-color: var(--nn-success);
  opacity: 0.6;
}

.btn-success:not(:disabled):not(.disabled):active,
.btn-success:not(:disabled):not(.disabled).active,
.show > .btn-success.dropdown-toggle {
  background-color: #45a049;
  border-color: #45a049;
  color: white;
}

.btn-warning {
  background-color: var(--nn-warning);
  border-color: var(--nn-warning);
  color: white;
}

.btn-warning:hover {
  background-color: #e68900;
  border-color: #e68900;
  color: white;
}

.btn-warning:focus,
.btn-warning.focus {
  background-color: #e68900;
  border-color: #e68900;
  color: white;
  box-shadow: 0 0 0 0.25rem rgba(255, 152, 0, 0.25);
}

.btn-warning:disabled,
.btn-warning.disabled {
  background-color: var(--nn-warning);
  border-color: var(--nn-warning);
  opacity: 0.6;
}

.btn-warning:not(:disabled):not(.disabled):active,
.btn-warning:not(:disabled):not(.disabled).active,
.show > .btn-warning.dropdown-toggle {
  background-color: #e68900;
  border-color: #e68900;
  color: white;
}

.btn-danger {
  background-color: var(--nn-danger);
  border-color: var(--nn-danger);
  color: white;
}

.btn-danger:hover {
  background-color: #d32f2f;
  border-color: #d32f2f;
  color: white;
}

.btn-danger:focus,
.btn-danger.focus {
  background-color: #d32f2f;
  border-color: #d32f2f;
  color: white;
  box-shadow: 0 0 0 0.25rem rgba(244, 67, 54, 0.25);
}

.btn-danger:disabled,
.btn-danger.disabled {
  background-color: var(--nn-danger);
  border-color: var(--nn-danger);
  opacity: 0.6;
}

.btn-danger:not(:disabled):not(.disabled):active,
.btn-danger:not(:disabled):not(.disabled).active,
.show > .btn-danger.dropdown-toggle {
  background-color: #d32f2f;
  border-color: #d32f2f;
  color: white;
}

.btn-info {
  background-color: var(--nn-info);
  border-color: var(--nn-info);
  color: white;
}

.btn-info:hover {
  background-color: #00acc1;
  border-color: #00acc1;
  color: white;
}

.btn-info:focus,
.btn-info.focus {
  background-color: #00acc1;
  border-color: #00acc1;
  color: white;
  box-shadow: 0 0 0 0.25rem rgba(0, 188, 212, 0.25);
}

.btn-info:disabled,
.btn-info.disabled {
  background-color: var(--nn-info);
  border-color: var(--nn-info);
  opacity: 0.6;
}

.btn-info:not(:disabled):not(.disabled):active,
.btn-info:not(:disabled):not(.disabled).active,
.show > .btn-info.dropdown-toggle {
  background-color: #00acc1;
  border-color: #00acc1;
  color: white;
}

.btn-secondary {
  background-color: var(--nn-secondary);
  border-color: var(--nn-secondary);
  color: #212529;
}

.btn-secondary:hover {
  background-color: var(--nn-secondary-dark);
  border-color: var(--nn-secondary-dark);
  color: #212529;
}

.btn-secondary:focus,
.btn-secondary.focus {
  background-color: var(--nn-secondary-dark);
  border-color: var(--nn-secondary-dark);
  color: #212529;
  box-shadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.25);
}

.btn-secondary:disabled,
.btn-secondary.disabled {
  background-color: var(--nn-secondary);
  border-color: var(--nn-secondary);
  opacity: 0.6;
}

.btn-secondary:not(:disabled):not(.disabled):active,
.btn-secondary:not(:disabled):not(.disabled).active,
.show > .btn-secondary.dropdown-toggle {
  background-color: var(--nn-secondary-dark);
  border-color: var(--nn-secondary-dark);
  color: #212529;
}

/* Outline button variants */
.btn-outline-primary {
  color: var(--nn-primary);
  border-color: var(--nn-primary);
}

.btn-outline-primary:hover {
  background-color: var(--nn-primary);
  border-color: var(--nn-primary);
  color: white;
}

.btn-outline-primary:focus,
.btn-outline-primary.focus {
  box-shadow: 0 0 0 0.25rem rgba(76, 175, 80, 0.25);
}

.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-outline-primary:not(:disabled):not(.disabled).active,
.show > .btn-outline-primary.dropdown-toggle {
  background-color: var(--nn-primary);
  border-color: var(--nn-primary);
  color: white;
}

.btn-outline-success {
  color: var(--nn-success);
  border-color: var(--nn-success);
}

.btn-outline-success:hover {
  background-color: var(--nn-success);
  border-color: var(--nn-success);
  color: white;
}

.btn-outline-success:focus,
.btn-outline-success.focus {
  box-shadow: 0 0 0 0.25rem rgba(76, 175, 80, 0.25);
}

.btn-outline-success:not(:disabled):not(.disabled):active,
.btn-outline-success:not(:disabled):not(.disabled).active,
.show > .btn-outline-success.dropdown-toggle {
  background-color: var(--nn-success);
  border-color: var(--nn-success);
  color: white;
}

.btn-outline-warning {
  color: var(--nn-warning);
  border-color: var(--nn-warning);
}

.btn-outline-warning:hover {
  background-color: var(--nn-warning);
  border-color: var(--nn-warning);
  color: white;
}

.btn-outline-warning:focus,
.btn-outline-warning.focus {
  box-shadow: 0 0 0 0.25rem rgba(255, 152, 0, 0.25);
}

.btn-outline-warning:not(:disabled):not(.disabled):active,
.btn-outline-warning:not(:disabled):not(.disabled).active,
.show > .btn-outline-warning.dropdown-toggle {
  background-color: var(--nn-warning);
  border-color: var(--nn-warning);
  color: white;
}

.btn-outline-danger {
  color: var(--nn-danger);
  border-color: var(--nn-danger);
}

.btn-outline-danger:hover {
  background-color: var(--nn-danger);
  border-color: var(--nn-danger);
  color: white;
}

.btn-outline-danger:focus,
.btn-outline-danger.focus {
  box-shadow: 0 0 0 0.25rem rgba(244, 67, 54, 0.25);
}

.btn-outline-danger:not(:disabled):not(.disabled):active,
.btn-outline-danger:not(:disabled):not(.disabled).active,
.show > .btn-outline-danger.dropdown-toggle {
  background-color: var(--nn-danger);
  border-color: var(--nn-danger);
  color: white;
}

.btn-outline-info {
  color: var(--nn-info);
  border-color: var(--nn-info);
}

.btn-outline-info:hover {
  background-color: var(--nn-info);
  border-color: var(--nn-info);
  color: white;
}

.btn-outline-info:focus,
.btn-outline-info.focus {
  box-shadow: 0 0 0 0.25rem rgba(0, 188, 212, 0.25);
}

.btn-outline-info:not(:disabled):not(.disabled):active,
.btn-outline-info:not(:disabled):not(.disabled).active,
.show > .btn-outline-info.dropdown-toggle {
  background-color: var(--nn-info);
  border-color: var(--nn-info);
  color: white;
}

.btn-outline-secondary {
  color: var(--nn-secondary);
  border-color: var(--nn-secondary);
}

.btn-outline-secondary:hover {
  background-color: var(--nn-secondary);
  border-color: var(--nn-secondary);
  color: #212529;
}

.btn-outline-secondary:focus,
.btn-outline-secondary.focus {
  box-shadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.25);
}

.btn-outline-secondary:not(:disabled):not(.disabled):active,
.btn-outline-secondary:not(:disabled):not(.disabled).active,
.show > .btn-outline-secondary.dropdown-toggle {
  background-color: var(--nn-secondary);
  border-color: var(--nn-secondary);
  color: #212529;
}

.navbar {
  background-color: var(--nn-navbar-bg) !important;
  color: var(--nn-navbar-text);
  border-bottom: 1px solid var(--nn-border);
}

.nav-item {
  text-decoration: none;
  color: var(--nn-text-muted);
  transition: color 0.2s;
}

.nav-item.active {
  color: var(--nn-bg-primary);
  background-color: var(--nn-primary);
}

.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  border-top: 1px solid var(--nn-border);
  z-index: 1000;
}

.card {
  background-color: var(--nn-card-bg);
  border-color: var(--nn-border);
  box-shadow: var(--nn-card-shadow);
}

.bottom-nav {
  background-color: var(--nn-navbar-bg);
  border-top: 1px solid var(--nn-border);
}

.preference-card {
  background-color: var(--nn-card-bg);
  border: 2px solid var(--nn-border);
  transition: all 0.2s ease;
}

.preference-card:hover {
  border-color: var(--nn-primary);
  transform: translateY(-2px);
}

.btn-check:checked + .preference-card {
  border-color: var(--nn-primary);
  background-color: color-mix(
    in srgb,
    var(--nn-primary) 10%,
    var(--nn-card-bg)
  );
}

.step-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 15px;
  padding: 2rem;
  margin-bottom: 2rem;
}

/* Dark mode specific adjustments */
[data-bs-theme='dark'] .preference-card.active {
  background-color: color-mix(
    in srgb,
    var(--nn-primary) 20%,
    var(--nn-card-bg)
  );
}

.text-primary {
  color: var(--nn-primary) !important;
  text-decoration: none !important;
}

.text-success {
  color: var(--nn-success) !important;
}

.text-warning {
  color: var(--nn-warning) !important;
}

.text-danger {
  color: var(--nn-danger) !important;
}

.text-info {
  color: var(--nn-info) !important;
}

.text-secondary {
  color: var(--nn-secondary) !important;
}

/* Background utilities */
.bg-success {
  background-color: var(--nn-success) !important;
}

.bg-warning {
  background-color: var(--nn-warning) !important;
}

.bg-danger {
  background-color: var(--nn-danger) !important;
}

.bg-info {
  background-color: var(--nn-info) !important;
}

.bg-secondary {
  background-color: var(--nn-secondary) !important;
}

/* Border utilities */
.border-primary {
  border-color: var(--nn-primary) !important;
}

.border-success {
  border-color: var(--nn-success) !important;
}

.border-warning {
  border-color: var(--nn-warning) !important;
}

.border-danger {
  border-color: var(--nn-danger) !important;
}

.border-info {
  border-color: var(--nn-info) !important;
}

.border-secondary {
  border-color: var(--nn-secondary) !important;
}

/* Alert components */
.alert-primary {
  background-color: color-mix(
    in srgb,
    var(--nn-primary) 10%,
    var(--nn-bg-primary)
  );
  border-color: color-mix(in srgb, var(--nn-primary) 20%, var(--nn-border));
  color: var(--nn-primary);
}

.alert-success {
  background-color: color-mix(
    in srgb,
    var(--nn-success) 10%,
    var(--nn-bg-primary)
  );
  border-color: color-mix(in srgb, var(--nn-success) 20%, var(--nn-border));
  color: var(--nn-success);
}

.alert-warning {
  background-color: var(--alert-warning-bg) !important;
  border-color: var(--alert-warning-border) !important;
  color: var(--alert-warning-text) !important;
}

.alert-danger {
  background-color: color-mix(
    in srgb,
    var(--nn-danger) 10%,
    var(--nn-bg-primary)
  );
  border-color: color-mix(in srgb, var(--nn-danger) 20%, var(--nn-border));
  color: var(--nn-danger);
}

.alert-info {
  background-color: color-mix(
    in srgb,
    var(--nn-info) 10%,
    var(--nn-bg-primary)
  );
  border-color: color-mix(in srgb, var(--nn-info) 20%, var(--nn-border));
  color: var(--nn-info);
}

/* Form controls */
.form-check-input:checked {
  background-color: var(--nn-primary);
  border-color: var(--nn-primary);
}

.form-check-input:focus {
  border-color: var(--nn-primary);
  box-shadow: 0 0 0 0.25rem rgba(76, 175, 80, 0.25);
}

.form-control:focus {
  border-color: var(--nn-primary);
  box-shadow: 0 0 0 0.25rem rgba(76, 175, 80, 0.25);
}

.form-select:focus {
  border-color: var(--nn-primary);
  box-shadow: 0 0 0 0.25rem rgba(76, 175, 80, 0.25);
}

/* Progress bars */
.progress-bar {
  background-color: var(--nn-primary);
}

.progress-bar-success {
  background-color: var(--nn-success);
}

.progress-bar-warning {
  background-color: var(--nn-warning);
}

.progress-bar-danger {
  background-color: var(--nn-danger);
}

.progress-bar-info {
  background-color: var(--nn-info);
}

/* Links */
.link-primary {
  color: var(--nn-primary) !important;
}

.link-primary:hover {
  color: var(--nn-primary-dark) !important;
}

.link-success {
  color: var(--nn-success) !important;
}

.link-success:hover {
  color: #45a049 !important;
}

.link-warning {
  color: var(--nn-warning) !important;
}

.link-warning:hover {
  color: #e68900 !important;
}

.link-danger {
  color: var(--nn-danger) !important;
}

.link-danger:hover {
  color: #d32f2f !important;
}

.link-info {
  color: var(--nn-info) !important;
}

.link-info:hover {
  color: #00acc1 !important;
}

.link-secondary {
  color: var(--nn-secondary) !important;
}

.link-secondary:hover {
  color: var(--nn-secondary-dark) !important;
}

/* Accordion Styles */
.accordion {
  --bs-accordion-border-color: var(--nn-border);
  --bs-accordion-bg: var(--nn-card-bg);
  --bs-accordion-btn-bg: var(--nn-card-bg);
  --bs-accordion-btn-color: var(--nn-text-primary);
  --bs-accordion-body-padding-x: 1.25rem;
  --bs-accordion-body-padding-y: 1rem;
}

.accordion-item {
  background-color: var(--nn-card-bg);
  border: 1px solid var(--nn-border);
  border-radius: 0.375rem !important;
  margin-bottom: 0.5rem;
  box-shadow: var(--nn-card-shadow);
}

.accordion-button {
  background-color: var(--nn-card-bg) !important;
  color: var(--nn-text-primary) !important;
  border: none !important;
  border-radius: 0.375rem !important;
  padding: 1rem 1.25rem;
  font-weight: 500;
  transition: all 0.2s ease;
}

.accordion-button:not(.collapsed) {
  background-color: color-mix(
    in srgb,
    var(--nn-primary) 10%,
    var(--nn-card-bg)
  ) !important;
  color: var(--nn-primary) !important;
  box-shadow: none !important;
}

.accordion-button:hover {
  background-color: color-mix(
    in srgb,
    var(--nn-primary) 5%,
    var(--nn-card-bg)
  ) !important;
}

.accordion-button:focus {
  box-shadow: 0 0 0 0.25rem
    color-mix(in srgb, var(--nn-primary) 25%, transparent) !important;
  border-color: var(--nn-primary) !important;
}

.accordion-button::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  filter: brightness(0) saturate(100%) invert(27%) sepia(51%) saturate(2878%)
    hue-rotate(135deg) brightness(85%) contrast(95%);
}

.accordion-body {
  background-color: var(--nn-card-bg);
  color: var(--nn-text-primary);
  border-top: 1px solid var(--nn-border);
  line-height: 1.6;
}

/* Dark mode accordion adjustments */
[data-bs-theme='dark'] .accordion-button::after {
  filter: brightness(0) saturate(100%) invert(100%);
}

[data-bs-theme='dark'] .accordion-button:not(.collapsed)::after {
  filter: brightness(0) saturate(100%) invert(64%) sepia(98%) saturate(1204%)
    hue-rotate(85deg) brightness(90%) contrast(87%);
}

/* Badge Styles */
.badge {
  font-weight: 500;
  letter-spacing: 0.025em;
  border-radius: 0.5rem;
  padding: 0.5em 0.75em;
  font-size: 0.875em;
}

.badge.bg-primary {
  background-color: var(--nn-primary) !important;
}

.badge.bg-secondary {
  background-color: var(--nn-text-muted) !important;
}

.badge.bg-success {
  background-color: var(--nn-success) !important;
}

.badge.bg-info {
  background-color: var(--nn-info) !important;
}

.badge.bg-warning {
  background-color: var(--nn-warning) !important;
}

.badge.bg-danger {
  background-color: var(--nn-danger) !important;
}

.badge.bg-light {
  background-color: var(--nn-bg-tertiary) !important;
  border: 1px solid var(--nn-border);
}

.badge.bg-dark {
  background-color: var(--nn-text-primary) !important;
}

/* Dark mode badge adjustments */
[data-bs-theme='dark'] .badge.bg-secondary {
  background-color: var(--nn-bg-tertiary) !important;
}

[data-bs-theme='dark'] .badge.bg-light {
  background-color: var(--nn-bg-tertiary) !important;
}

[data-bs-theme='dark'] .badge.bg-dark {
  background-color: var(--nn-bg-primary) !important;
  border: 1px solid var(--nn-border);
}

/* Rounded pill badges */
.badge.rounded-pill {
  border-radius: 50rem !important;
  padding: 0.5em 1em;
}

/* Badge size variants */
.badge.badge-sm {
  font-size: 0.75em;
  padding: 0.35em 0.65em;
}

.badge.badge-lg {
  font-size: 1em;
  padding: 0.65em 0.85em;
}

/* List Group Styles */
.list-group {
  --bs-list-group-bg: var(--nn-card-bg);
  --bs-list-group-border-color: var(--nn-border);
  --bs-list-group-border-width: 1px;
  --bs-list-group-border-radius: 0.375rem;
}

.list-group-item {
  background-color: var(--nn-card-bg) !important;
  border-color: var(--nn-border) !important;
  color: var(--nn-text-primary) !important;
}

.list-group-item:hover {
  background-color: color-mix(
    in srgb,
    var(--nn-primary) 5%,
    var(--nn-card-bg)
  ) !important;
}

.list-group-item.active {
  background-color: var(--nn-primary) !important;
  border-color: var(--nn-primary) !important;
  color: white !important;
}

.list-group-item-action:hover {
  background-color: color-mix(
    in srgb,
    var(--nn-primary) 5%,
    var(--nn-card-bg)
  ) !important;
}

.list-group-item-action:focus {
  background-color: color-mix(
    in srgb,
    var(--nn-primary) 8%,
    var(--nn-card-bg)
  ) !important;
}

/* Dark mode list group adjustments */
[data-bs-theme='dark'] .list-group-item {
  background-color: var(--nn-card-bg) !important;
  border-color: var(--nn-border) !important;
  color: var(--nn-text-primary) !important;
}

.htmx-indicator {
  display: none;
}

.htmx-request .htmx-indicator {
  display: inline;
}

.htmx-request.htmx-indicator {
  display: inline;
}