/* CSS Custom Properties for Dynamic Theming */
:root {
  /* Primary Colors */
  --color-primary: #1976d2;
  --color-primary-80: #1565c0;
  --color-primary-60: #0d47a1;
  --color-on-primary: #ffffff;
  
  /* Surface Colors */
  --color-surface: #ffffff;
  --color-on-surface: #212529;
  --color-surface-avatar: #f8f9fa;
  --color-on-surface-avatar: #495057;
  --color-surface-variant: #e9ecef;
  --color-surface-container: #f5f5f5;
  
  /* Selection Colors */
  --color-selected-group: #e3f2fd;
  --color-selected-item: #1976d2;
  --color-selected-item-hover: #1565c0;
  --color-on-selected-item: #ffffff;
  
  /* Logo Variables */
  --surface-logo-url: url('/assets/img/Smile-Alliance-Club.svg');
  --organization-logo-url: url('/assets/img/organization-logo.png');
}

/* Dynamic Button Styles */
.btn-primary {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: var(--color-on-primary) !important;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--color-primary-80) !important;
  border-color: var(--color-primary-80) !important;
  color: var(--color-on-primary) !important;
}

.btn-primary:active {
  background-color: var(--color-primary-60) !important;
  border-color: var(--color-primary-60) !important;
  color: var(--color-on-primary) !important;
}

/* Dynamic Card Styles */
.card {
  background-color: var(--color-surface) !important;
  color: var(--color-on-surface) !important;
}

.card-header {
  background-color: var(--color-surface-variant) !important;
  color: var(--color-on-surface) !important;
}

/* Dynamic Navigation Styles */
.navbar-brand:not([style*="color"]) {
  color: var(--color-primary);
}

/* Only apply default nav-link color when no theme directive is present */
.nav-link:not([style*="color"]) {
  color: var(--color-on-surface);
}

.nav-link:hover:not([style*="color"]) {
  color: var(--color-primary);
}

.nav-link.active:not([style*="color"]) {
  color: var(--color-primary);
  background-color: var(--color-selected-group);
}

/* Dynamic Form Styles */
.form-control:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 0.2rem rgba(25, 118, 210, 0.25) !important;
}

.form-check-input:checked {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}

/* Dynamic Table Styles */
.table-striped > tbody > tr:nth-of-type(odd) > td {
  background-color: var(--color-surface-variant) !important;
}

.table th {
  background-color: var(--color-selected-group) !important;
  color: var(--color-on-surface) !important;
}

/* Dynamic Selected Items */
.selected-item {
  background-color: var(--color-selected-item) !important;
  color: var(--color-on-selected-item) !important;
}

.selected-item:hover {
  background-color: var(--color-selected-item-hover) !important;
}

.selected-group {
  background-color: var(--color-selected-group) !important;
}

/* Dynamic Avatar Styles */
.avatar {
  background-color: var(--color-surface-avatar) !important;
  color: var(--color-on-surface-avatar) !important;
}

/* Dynamic Logo Styles */
.surface-logo {
  background-image: var(--surface-logo-url);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.organization-logo {
  background-image: var(--organization-logo-url);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Only apply default link color when no theme directive is present */
a:not([style*="color"]):not(.nav-link):not(.dropdown-item):not(.btn) {
  color: var(--color-primary);
}

a:hover:not([style*="color"]):not(.nav-link):not(.dropdown-item):not(.btn) {
  color: var(--color-primary-80);
}

/* Dynamic Badge Styles */
.badge-primary {
  background-color: var(--color-primary) !important;
  color: var(--color-on-primary) !important;
}

/* Dynamic Alert Styles */
.alert-primary {
  background-color: var(--color-selected-group) !important;
  border-color: var(--color-primary) !important;
  color: var(--color-on-surface) !important;
}

/* Dynamic Progress Bar Styles */
.progress-bar {
  background-color: var(--color-primary) !important;
}

/* Dynamic Dropdown Styles */
.dropdown-item.active:not([style*="background-color"]),
.dropdown-item:active:not([style*="background-color"]) {
  background-color: var(--color-selected-item);
}

.dropdown-item.active:not([style*="color"]),
.dropdown-item:active:not([style*="color"]) {
  color: var(--color-on-selected-item);
}

.dropdown-item:hover:not([style*="background-color"]) {
  background-color: var(--color-selected-group);
}

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

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

.text-on-primary {
  color: var(--color-on-primary) !important;
}

.text-on-surface {
  color: var(--color-on-surface) !important;
}

/* Dynamic Background Utilities */
.bg-primary {
  background-color: var(--color-primary) !important;
  color: var(--color-on-primary) !important;
}

.bg-surface {
  background-color: var(--color-surface) !important;
  color: var(--color-on-surface) !important;
}

.bg-surface-variant {
  background-color: var(--color-surface-variant) !important;
  color: var(--color-on-surface) !important;
}

.bg-selected {
  background-color: var(--color-selected-item) !important;
  color: var(--color-on-selected-item) !important;
}

.bg-selected-group {
  background-color: var(--color-selected-group) !important;
}

/* Responsive Theming for Mobile */
@media (max-width: 768px) {
  .btn-primary {
    padding: 12px 24px;
    font-size: 16px;
  }
  
  .navbar-brand {
    font-size: 1.5rem;
  }
}

/* Dark Mode Support (if needed in future) */
@media (prefers-color-scheme: dark) {
  :root {
    --color-surface: #121212;
    --color-on-surface: #ffffff;
    --color-surface-variant: #2c2c2c;
    --color-surface-container: #1e1e1e;
  }
}

/* Animation for Theme Changes */
* {
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

/* Focus Indicators with Theme Colors */
button:focus,
.btn:focus,
.form-control:focus,
.form-select:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Custom Plan Card Styles */
.plan-card {
  border: 2px solid var(--color-surface-variant);
  transition: all 0.3s ease;
}

.plan-card:hover {
  border-color: var(--color-primary);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.plan-card.selected {
  border-color: var(--color-primary);
  background-color: var(--color-selected-group);
}

.plan-header {
  background-color: var(--color-primary);
  color: var(--color-on-primary);
}

/* Custom Provider Card Styles */
.provider-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-surface-variant);
}

.provider-card:hover {
  background-color: var(--color-selected-group);
}

/* Custom FAQ Styles */
.faq-item {
  border-bottom: 1px solid var(--color-surface-variant);
}

.faq-question {
  color: var(--color-primary);
}

/* Loading States */
.loading-spinner {
  border-top-color: var(--color-primary);
}

.skeleton-loader {
  background: linear-gradient(90deg, var(--color-surface-variant) 25%, var(--color-surface) 50%, var(--color-surface-variant) 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

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