/**
 * Theme System CSS
 * Uses CSS custom properties for dynamic theming
 */

:root {
  /* Default theme variables (light theme) */
  --primary-color: #4a7048;
  --primary-hover: #3a5a38;
  --secondary-color: #6c757d;
  --success-color: #28a745;
  --info-color: #17a2b8;
  --warning-color: #ffc107;
  --danger-color: #dc3545;
  --light-color: #f8f9fa;
  --dark-color: #212529;
  --body-bg: #ffffff;
  --body-color: #212529;
  --card-bg: #ffffff;
  --card-border: #dee2e6;
  --navbar-bg: #4a7048;
  --navbar-color: #ffffff;
  --footer-bg: #f8f9fa;
  --footer-color: #6c757d;
  --input-bg: #ffffff;
  --input-border: #ced4da;
  --input-color: #495057;
  --btn-primary-bg: #4a7048;
  --btn-primary-border: #4a7048;
  --btn-primary-color: #ffffff;
  --btn-secondary-bg: #D2691E;
  --btn-secondary-border: #D2691E;
  --btn-secondary-color: #ffffff;
  --table-bg: #ffffff;
  --table-border: #dee2e6;
  --modal-bg: #ffffff;
  --modal-border: #dee2e6;
  --dropdown-bg: #ffffff;
  --dropdown-border: #dee2e6;
  --shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  --shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
  --border-radius: 0.375rem;
  --border-radius-lg: 0.5rem;
  --border-radius-sm: 0.25rem;
  --transition: all 0.3s ease;

  /* Container and gradient backgrounds */
  --container-bg: linear-gradient(135deg, #F5E8C7 0%, #FF9A8B 100%);
  --app-body-bg: linear-gradient(135deg, #F5E8C7 0%, #FF9A8B 100%);
  --admin-container-bg: linear-gradient(135deg, #F5E8C7 0%, #FF9A8B 100%);
  --main-content-bg: linear-gradient(135deg, #F5E8C7 0%, #FF9A8B 100%);
  --sun-gradient-start: #F5E8C7;
  --sun-gradient-end: #FF9A8B;
  --wooden-bg: #D4A017;
  --terracotta: #D2691E;
  --foliage-green: #4A7048;
  --mountain-green: #A9CBA4;
  --text-dark: #2c3e50;
  --text-light: #ffffff;

  /* Platform-specific variables */
  --platform-ios: false;
  --platform-android: false;
  --platform-windows: false;
  --platform-macos: false;
  --platform-linux: false;
  --device-mobile: false;
  --device-tablet: false;
  --device-desktop: false;
}

/* Apply theme variables to Bootstrap components */
body {
  background-color: var(--body-bg) !important;
  color: var(--body-color) !important;
}

/* Light theme - ensure proper backgrounds */
[data-theme="light"] body,
[data-theme="light"] .app-body,
[data-theme="light"] .admin-container,
[data-theme="light"] .main-content {
  background-image: none !important; /* Remove dark theme starry background */
}

[data-theme="light"] .app-body {
  background: var(--app-body-bg, linear-gradient(135deg, #F5E8C7 0%, #FF9A8B 100%)) !important;
  background-color: var(--body-bg, #ffffff) !important;
}

[data-theme="light"] .admin-container {
  background: var(--admin-container-bg, linear-gradient(135deg, #F5E8C7 0%, #FF9A8B 100%)) !important;
  background-color: var(--body-bg, #ffffff) !important;
}

[data-theme="light"] .main-content {
  background: var(--main-content-bg, linear-gradient(135deg, #F5E8C7 0%, #FF9A8B 100%)) !important;
  background-color: var(--body-bg, #ffffff) !important;
}

/* Navigation */
.navbar {
  background-color: var(--navbar-bg) !important;
}

.navbar-brand,
.navbar-nav .nav-link {
  color: var(--navbar-color) !important;
}

.navbar-nav .nav-link:hover {
  color: var(--navbar-color) !important;
  opacity: 0.8;
}

/* Cards */
.card {
  background-color: var(--card-bg) !important;
  border-color: var(--card-border) !important;
  box-shadow: var(--shadow) !important;
}

.card-header {
  background-color: var(--card-bg) !important;
  border-bottom-color: var(--card-border) !important;
}

/* Buttons */
.btn-primary {
  background-color: var(--btn-primary-bg) !important;
  border-color: var(--btn-primary-border) !important;
  color: var(--btn-primary-color) !important;
}

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

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

/* Forms */
.form-control {
  background-color: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  color: var(--input-color) !important;
}

.form-control:focus {
  background-color: var(--input-bg) !important;
  border-color: var(--primary-color) !important;
  color: var(--input-color) !important;
  box-shadow: 0 0 0 0.2rem rgba(74, 112, 72, 0.25) !important;
}

[data-theme="dark"] .form-control:focus {
  box-shadow: 0 0 0 0.2rem rgba(107, 141, 214, 0.4), 0 0 10px rgba(107, 141, 214, 0.3) !important;
  border-color: #6b8dd6 !important;
}

.form-select {
  background-color: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  color: var(--input-color) !important;
}

/* Tables */
.table {
  background-color: var(--table-bg) !important;
  color: var(--body-color) !important;
}

.table th,
.table td {
  border-color: var(--table-border) !important;
}

.table-striped > tbody > tr:nth-of-type(odd) > td,
.table-striped > tbody > tr:nth-of-type(odd) > th {
  background-color: rgba(0, 0, 0, 0.05) !important;
}

/* Modals */
.modal-content {
  background-color: var(--modal-bg) !important;
  border-color: var(--modal-border) !important;
}

.modal-header {
  border-bottom-color: var(--modal-border) !important;
}

.modal-footer {
  border-top-color: var(--modal-border) !important;
}

/* Dropdowns */
.dropdown-menu {
  background-color: var(--dropdown-bg) !important;
  border-color: var(--dropdown-border) !important;
}

.dropdown-item {
  color: var(--body-color) !important;
}

.dropdown-item:hover {
  background-color: var(--light-color) !important;
  color: var(--body-color) !important;
}

.dropdown-item.active {
  background-color: var(--primary-color) !important;
  color: var(--btn-primary-color) !important;
}

/* Footer */
.custom-footer {
  background-color: var(--footer-bg) !important;
  color: var(--footer-color) !important;
}

/* Theme switcher specific styles */
.theme-option.active {
  background-color: var(--primary-color) !important;
  color: var(--btn-primary-color) !important;
}

.theme-option:hover {
  background-color: var(--light-color) !important;
}

/* Custom components that need theme support */
.banner-container {
  background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
}

.custom-navbar {
  background-color: var(--navbar-bg) !important;
  box-shadow: var(--shadow) !important;
}

.custom-brand {
  color: var(--navbar-color) !important;
}

.custom-nav-link {
  color: var(--navbar-color) !important;
}

.custom-nav-link:hover {
  color: var(--navbar-color) !important;
  opacity: 0.8;
}

/* Shopping list specific theming */
.shopping-list-raw li,
.shopping-list-formatted li {
  background-color: var(--card-bg) !important;
  border-color: var(--card-border) !important;
  color: var(--body-color) !important;
}

.shopping-list-raw li:hover,
.shopping-list-formatted li:hover {
  background-color: var(--light-color) !important;
}

.shopping-list-raw li.checked,
.shopping-list-formatted li.checked {
  background-color: var(--light-color) !important;
  color: var(--secondary-color) !important;
}

.walmart-btn {
  background: linear-gradient(135deg, #0071dc 0%, #004c91 100%) !important;
  color: white !important;
}

.walmart-btn:hover {
  background: linear-gradient(135deg, #004c91 0%, #003366 100%) !important;
}

/* Financial dashboard theming */
.financial-card {
  background-color: var(--card-bg) !important;
  border-color: var(--card-border) !important;
  box-shadow: var(--shadow) !important;
}

.transaction-item {
  background-color: var(--card-bg) !important;
  border-color: var(--card-border) !important;
}

/* Financial Components - Dark Mode Improvements */
[data-theme="dark"] .financial-card,
[data-theme="dark"] .transaction-item {
  background-color: var(--card-bg) !important;
  border-color: var(--card-border) !important;
  color: #f8f9ff !important; /* Bright text for better readability */
}

[data-theme="dark"] .financial-card h3,
[data-theme="dark"] .financial-card h4,
[data-theme="dark"] .financial-card h5,
[data-theme="dark"] .transaction-item h3,
[data-theme="dark"] .transaction-item h4 {
  color: #ffffff !important; /* Pure white for headings */
}

/* Financial Household Page - Dark Mode */
[data-theme="dark"] .intro-card {
  background: linear-gradient(135deg, #1e1b4b 0%, #2d2a5b 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 6px rgba(107, 141, 214, 0.3) !important;
}

[data-theme="dark"] .intro-card h2 {
  color: #ffd700 !important; /* Golden heading */
}

[data-theme="dark"] .intro-card p {
  color: #f8f9ff !important; /* Bright text */
}

[data-theme="dark"] .step-item {
  background: rgba(107, 141, 214, 0.15) !important;
  border: 1px solid rgba(107, 141, 214, 0.3) !important;
}

[data-theme="dark"] .step-number {
  background: #6b8dd6 !important;
  color: #ffffff !important;
}

[data-theme="dark"] .step-content strong {
  color: #ffd700 !important; /* Golden emphasis */
}

[data-theme="dark"] .step-content p {
  color: #f8f9ff !important; /* Bright text */
}

[data-theme="dark"] .section-header {
  border-bottom-color: rgba(107, 141, 214, 0.3) !important;
}

[data-theme="dark"] .section-header h3 {
  color: #ffffff !important; /* Pure white for section headers */
}

[data-theme="dark"] .section-description {
  color: #c7d2fe !important; /* Brighter description text */
}

[data-theme="dark"] .section-divider {
  background: linear-gradient(to right, transparent, rgba(107, 141, 214, 0.3), transparent) !important;
}

[data-theme="dark"] .form-group label {
  color: #f8f9ff !important; /* Bright labels */
}

[data-theme="dark"] .required-badge {
  background: #f87171 !important; /* Soft red for required */
  color: #ffffff !important;
}

[data-theme="dark"] .optional-badge {
  background: #6b7280 !important;
  color: #ffffff !important;
}

[data-theme="dark"] .input-with-icon .currency-icon,
[data-theme="dark"] .input-with-icon .percent-icon {
  color: #c7d2fe !important; /* Brighter icon color */
}

[data-theme="dark"] .field-explanation {
  background: rgba(107, 141, 214, 0.15) !important;
  border-left-color: #6b8dd6 !important;
  color: #f8f9ff !important; /* Bright text */
}

[data-theme="dark"] .field-explanation i {
  color: #6b8dd6 !important;
}

[data-theme="dark"] .field-explanation strong {
  color: #ffd700 !important; /* Golden emphasis */
}

[data-theme="dark"] .members-container {
  background: rgba(30, 27, 75, 0.5) !important;
  border-color: rgba(107, 141, 214, 0.3) !important;
}

[data-theme="dark"] .members-placeholder {
  color: #c7d2fe !important; /* Brighter placeholder text */
}

[data-theme="dark"] .members-placeholder i {
  color: #6b8dd6 !important;
}

[data-theme="dark"] .member-section {
  background: rgba(30, 27, 75, 0.7) !important;
  border-color: rgba(107, 141, 214, 0.3) !important;
  box-shadow: 0 2px 4px rgba(107, 141, 214, 0.2) !important;
}

[data-theme="dark"] .member-header {
  color: #ffd700 !important; /* Golden header */
}

[data-theme="dark"] .form-help-text {
  color: #c7d2fe !important; /* Brighter help text */
}

[data-theme="dark"] .preview-section {
  background: rgba(30, 27, 75, 0.7) !important;
  border-color: rgba(107, 141, 214, 0.3) !important;
  color: #f8f9ff !important; /* Bright text */
}

[data-theme="dark"] .submission-progress {
  background: rgba(96, 165, 250, 0.15) !important;
  border-left-color: #60a5fa !important;
}

[data-theme="dark"] .progress-text {
  color: #60a5fa !important; /* Bright blue progress text */
}

[data-theme="dark"] .submission-success {
  background: rgba(74, 222, 128, 0.15) !important;
  border-left-color: #4ade80 !important;
  color: #4ade80 !important; /* Green success text */
}

[data-theme="dark"] .financial-preview-section {
  background: rgba(255, 215, 0, 0.15) !important;
  border-color: rgba(255, 215, 0, 0.4) !important;
  color: #f8f9ff !important; /* Bright text */
}

[data-theme="dark"] .submission-error,
[data-theme="dark"] .preview-error {
  background: rgba(248, 113, 113, 0.15) !important;
  border-left-color: #f87171 !important;
  color: #f87171 !important; /* Red error text */
}

/* Financial Debts Page - Dark Mode */
[data-theme="dark"] #mortgage-details-section {
  background: rgba(30, 27, 75, 0.7) !important;
  border-color: rgba(107, 141, 214, 0.3) !important;
}

[data-theme="dark"] .mortgage-details-card {
  background: rgba(15, 23, 42, 0.8) !important;
  border-color: rgba(107, 141, 214, 0.3) !important;
}

[data-theme="dark"] .detail-label {
  color: #c7d2fe !important; /* Brighter labels */
}

[data-theme="dark"] .detail-value {
  color: #ffffff !important; /* Pure white for values */
}

[data-theme="dark"] #payoff-order-section {
  background: rgba(255, 215, 0, 0.15) !important;
  border-color: rgba(255, 215, 0, 0.4) !important;
}

[data-theme="dark"] .payoff-description {
  color: #ffd700 !important; /* Golden description text */
}

/* Meal plan theming */
.meal-card {
  background-color: var(--card-bg) !important;
  border-color: var(--card-border) !important;
  box-shadow: var(--shadow) !important;
}

.meal-card:hover {
  box-shadow: var(--shadow-lg) !important;
}

/* Quick actions theming */
.quick-actions .btn {
  background-color: var(--btn-secondary-bg) !important;
  border-color: var(--btn-secondary-border) !important;
  color: var(--btn-secondary-color) !important;
}

.quick-actions .btn:hover {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
  color: var(--btn-primary-color) !important;
}

/* PWA install button theming */
#pwa-install-btn {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
  color: var(--btn-primary-color) !important;
}

#pwa-install-btn:hover {
  background-color: var(--primary-hover) !important;
  border-color: var(--primary-hover) !important;
}

/* Responsive adjustments for themes */
@media (max-width: 768px) {
  .theme-option {
    padding: 0.5rem 1rem !important;
  }
}

/* Animation for theme transitions */
* {
  transition: var(--transition);
}

/* Additional component theming */
.alert {
  background-color: var(--light-color) !important;
  border-color: var(--card-border) !important;
  color: var(--body-color) !important;
}

/* Dark mode alerts - ensure proper contrast */
[data-theme="dark"] .alert {
  background-color: rgba(30, 27, 75, 0.8) !important;
  border-color: rgba(107, 141, 214, 0.3) !important;
  color: #f8f9ff !important; /* Bright text to prevent white-on-white */
}

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

.alert-success {
  background-color: var(--success-color) !important;
  border-color: var(--success-color) !important;
  color: white !important;
}

.alert-danger {
  background-color: var(--danger-color) !important;
  border-color: var(--danger-color) !important;
  color: white !important;
}

/* Dark mode alert overrides - ensure text is visible */
[data-theme="dark"] .alert-success {
  background-color: rgba(74, 222, 128, 0.2) !important;
  border-color: #4ade80 !important;
  color: #4ade80 !important; /* Green text on dark background */
}

[data-theme="dark"] .alert-danger {
  background-color: rgba(248, 113, 113, 0.2) !important;
  border-color: #f87171 !important;
  color: #f87171 !important; /* Red text on dark background */
}

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

.alert-info {
  background-color: var(--info-color) !important;
  border-color: var(--info-color) !important;
  color: white !important;
}

/* Badge theming */
.badge {
  background-color: var(--secondary-color) !important;
  color: white !important;
}

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

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

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

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

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

/* Progress bar theming */
.progress {
  background-color: var(--light-color) !important;
}

.progress-bar {
  background-color: var(--primary-color) !important;
}

/* List group theming */
.list-group-item {
  background-color: var(--card-bg) !important;
  border-color: var(--card-border) !important;
  color: var(--body-color) !important;
}

/* Dark mode list group - ensure proper contrast */
[data-theme="dark"] .list-group-item {
  background-color: rgba(30, 27, 75, 0.7) !important;
  border-color: rgba(107, 141, 214, 0.3) !important;
  color: #f8f9ff !important; /* Bright text to prevent white-on-white */
}

.list-group-item:hover {
  background-color: var(--light-color) !important;
}

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

/* Nav tabs theming */
.nav-tabs .nav-link {
  color: var(--body-color) !important;
  border-color: var(--card-border) !important;
}

.nav-tabs .nav-link:hover {
  color: var(--primary-color) !important;
  border-color: var(--card-border) !important;
}

.nav-tabs .nav-link.active {
  color: var(--primary-color) !important;
  background-color: var(--card-bg) !important;
  border-color: var(--card-border) var(--card-border) var(--card-bg) !important;
}

/* Nav pills theming */
.nav-pills .nav-link {
  color: var(--body-color) !important;
}

.nav-pills .nav-link:hover {
  color: var(--primary-color) !important;
}

.nav-pills .nav-link.active {
  background-color: var(--primary-color) !important;
  color: var(--btn-primary-color) !important;
}

/* Disable transitions for theme switcher to avoid flicker */
.theme-option {
  transition: none !important;
}

/* Theme cards in settings */
.theme-card {
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid transparent !important;
}

.theme-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg) !important;
}

.theme-card.border-primary {
  border-color: var(--primary-color) !important;
  box-shadow: 0 0 0 0.2rem rgba(74, 112, 72, 0.25) !important;
}

.theme-preview {
  transition: all 0.3s ease;
}

/* High contrast theme specific adjustments */
[data-theme="highContrast"] .table-striped > tbody > tr:nth-of-type(odd) > td,
[data-theme="highContrast"] .table-striped > tbody > tr:nth-of-type(odd) > th {
  background-color: #f0f0f0 !important;
}

[data-theme="highContrast"] .dropdown-item:hover {
  background-color: #e0e0e0 !important;
}

/* Dark theme specific adjustments - Starry Night */
[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > td,
[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > th {
  background-color: rgba(107, 141, 214, 0.1) !important; /* Starry blue tint */
}

/* Headings - Starry Night - Improved readability */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
  color: #ffffff !important; /* Pure white for maximum readability */
  text-shadow: 0 0 5px rgba(107, 141, 214, 0.3) !important;
}

/* Card text - Starry Night - Improved readability */
[data-theme="dark"] .card-title,
[data-theme="dark"] .card-header {
  color: #ffffff !important; /* Pure white for maximum readability */
}

[data-theme="dark"] .card-text,
[data-theme="dark"] .card-body {
  color: #f8f9ff !important; /* Bright text for better readability */
}

/* Paragraphs and general text - Starry Night */
[data-theme="dark"] p {
  color: #f8f9ff !important; /* Bright text for better readability */
}

/* Small text - Starry Night */
[data-theme="dark"] small,
[data-theme="dark"] .small {
  color: #c7d2fe !important; /* Brighter muted text for better readability */
}

[data-theme="dark"] .dropdown-item:hover {
  background-color: rgba(107, 141, 214, 0.2) !important; /* Starry blue hover */
}

[data-theme="dark"] .card {
  background-color: var(--card-bg) !important;
  border-color: var(--card-border) !important;
  color: #f8f9ff !important; /* Bright text to prevent white-on-white */
  box-shadow: 0 4px 6px rgba(107, 141, 214, 0.15), 0 0 20px rgba(255, 215, 0, 0.05) !important;
  position: relative;
}

/* Ensure all card content has proper text color */
[data-theme="dark"] .card * {
  color: inherit !important;
}

[data-theme="dark"] .card-body *:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(.card-title):not(.card-header) {
  color: #f8f9ff !important; /* Bright text for all card content */
}

[data-theme="dark"] .card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(107, 141, 214, 0.05) 0%, rgba(255, 215, 0, 0.03) 100%);
  pointer-events: none;
  border-radius: inherit;
}

[data-theme="dark"] .text-muted {
  color: #c7d2fe !important; /* Brighter purple-blue for better readability */
}

[data-theme="dark"] .btn-primary {
  box-shadow: 0 0 10px rgba(107, 141, 214, 0.4), 0 0 20px rgba(107, 141, 214, 0.2) !important;
  transition: all 0.3s ease !important;
}

[data-theme="dark"] .btn-primary:hover {
  box-shadow: 0 0 15px rgba(107, 141, 214, 0.6), 0 0 30px rgba(107, 141, 214, 0.3) !important;
  transform: translateY(-1px);
}

[data-theme="dark"] .btn-secondary {
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.4), 0 0 20px rgba(255, 215, 0, 0.2) !important;
  transition: all 0.3s ease !important;
}

[data-theme="dark"] .btn-secondary:hover {
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.6), 0 0 30px rgba(255, 215, 0, 0.3) !important;
  transform: translateY(-1px);
}

[data-theme="dark"] .navbar {
  box-shadow: 0 2px 10px rgba(107, 141, 214, 0.2), 0 0 20px rgba(255, 215, 0, 0.1) !important;
  background: linear-gradient(135deg, #1e1b4b 0%, #2d2a5b 100%) !important;
}

[data-theme="dark"] .modal-content {
  box-shadow: 0 10px 40px rgba(107, 141, 214, 0.3), 0 0 60px rgba(255, 215, 0, 0.1) !important;
  border: 1px solid rgba(107, 141, 214, 0.3) !important;
  background-color: var(--modal-bg) !important;
  color: #f8f9ff !important; /* Bright text to prevent white-on-white */
}

/* Ensure all modal content has proper text color */
[data-theme="dark"] .modal-body *:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(.modal-title) {
  color: #f8f9ff !important; /* Bright text for all modal content */
}

[data-theme="dark"] .modal-header {
  border-bottom-color: rgba(107, 141, 214, 0.3) !important;
  background: linear-gradient(135deg, rgba(30, 27, 75, 0.8) 0%, rgba(45, 42, 91, 0.8) 100%) !important;
}

[data-theme="dark"] .modal-footer {
  border-top-color: rgba(107, 141, 214, 0.3) !important;
  background: linear-gradient(135deg, rgba(30, 27, 75, 0.8) 0%, rgba(45, 42, 91, 0.8) 100%) !important;
}

[data-theme="dark"] .modal-title {
  color: #ffd700 !important;
}

/* Forms - Starry Night */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] textarea {
  background-color: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  color: var(--input-color) !important;
  box-shadow: 0 0 5px rgba(107, 141, 214, 0.1) !important;
}

[data-theme="dark"] .form-control::placeholder,
[data-theme="dark"] .form-select::placeholder {
  color: #c7d2fe !important;
  opacity: 0.8;
}

[data-theme="dark"] .form-control:disabled,
[data-theme="dark"] .form-select:disabled {
  background-color: rgba(15, 23, 42, 0.5) !important;
  color: #6b7280 !important;
  opacity: 0.6;
}

[data-theme="dark"] .form-label {
  color: #f8f9ff !important; /* Brighter text for better readability */
}

[data-theme="dark"] .form-text {
  color: #c7d2fe !important; /* Brighter text for better readability */
}

/* Links - Starry Night */
[data-theme="dark"] a {
  color: #6b8dd6 !important;
  transition: all 0.3s ease !important;
}

[data-theme="dark"] a:hover {
  color: #ffd700 !important;
  text-shadow: 0 0 5px rgba(255, 215, 0, 0.5) !important;
}

[data-theme="dark"] a:visited {
  color: #8b9dd6 !important;
}

/* Navigation Links - Starry Night */
[data-theme="dark"] .nav-link {
  color: #f8f9ff !important; /* Brighter text for better readability */
  transition: all 0.3s ease !important;
}

[data-theme="dark"] .nav-link:hover {
  color: #ffd700 !important;
  background-color: rgba(107, 141, 214, 0.1) !important;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.6) !important;
}

[data-theme="dark"] .nav-link.active {
  color: #ffd700 !important;
  background-color: rgba(107, 141, 214, 0.2) !important;
  box-shadow: 0 0 10px rgba(107, 141, 214, 0.4) !important;
}

[data-theme="dark"] .navbar-brand {
  color: #ffd700 !important;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.5) !important;
  transition: all 0.3s ease !important;
}

[data-theme="dark"] .navbar-brand:hover {
  text-shadow: 0 0 15px rgba(255, 215, 0, 0.8) !important;
  transform: scale(1.05);
}

/* Dropdowns - Starry Night */
[data-theme="dark"] .dropdown-menu {
  background-color: var(--dropdown-bg) !important;
  border-color: rgba(107, 141, 214, 0.3) !important;
  box-shadow: 0 4px 12px rgba(107, 141, 214, 0.3), 0 0 20px rgba(255, 215, 0, 0.1) !important;
}

[data-theme="dark"] .dropdown-item {
  color: #f8f9ff !important; /* Brighter text for better readability */
  transition: all 0.2s ease !important;
}

[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus {
  background-color: rgba(107, 141, 214, 0.2) !important;
  color: #ffd700 !important;
}

[data-theme="dark"] .dropdown-item.active {
  background-color: rgba(107, 141, 214, 0.4) !important;
  color: #ffd700 !important;
}

[data-theme="dark"] .dropdown-divider {
  border-top-color: rgba(107, 141, 214, 0.3) !important;
}

/* Tables - Starry Night */
[data-theme="dark"] .table {
  color: #f8f9ff !important; /* Brighter text for better readability */
}

[data-theme="dark"] .table th {
  background-color: rgba(107, 141, 214, 0.15) !important;
  color: #ffd700 !important;
  border-color: rgba(107, 141, 214, 0.3) !important;
}

[data-theme="dark"] .table td {
  border-color: rgba(107, 141, 214, 0.2) !important;
}

[data-theme="dark"] .table-hover tbody tr:hover {
  background-color: rgba(107, 141, 214, 0.15) !important;
  box-shadow: 0 0 10px rgba(107, 141, 214, 0.2) !important;
}

/* Footer - Starry Night */
[data-theme="dark"] .custom-footer,
[data-theme="dark"] footer {
  background: linear-gradient(135deg, #1e1b4b 0%, #2d2a5b 100%) !important;
  color: #c7d2fe !important; /* Brighter text for better readability */
  border-top: 1px solid rgba(107, 141, 214, 0.3) !important;
  box-shadow: 0 -2px 10px rgba(107, 141, 214, 0.2) !important;
}

/* Badges - Starry Night */
[data-theme="dark"] .badge {
  box-shadow: 0 0 5px rgba(107, 141, 214, 0.3) !important;
}

[data-theme="dark"] .badge.bg-primary {
  background-color: #6b8dd6 !important;
  box-shadow: 0 0 8px rgba(107, 141, 214, 0.5) !important;
}

[data-theme="dark"] .badge.bg-secondary {
  background-color: #ffd700 !important;
  color: #0a0e27 !important;
  box-shadow: 0 0 8px rgba(255, 215, 0, 0.5) !important;
}

/* Alerts - Starry Night */
[data-theme="dark"] .alert {
  border-color: rgba(107, 141, 214, 0.3) !important;
  box-shadow: 0 0 10px rgba(107, 141, 214, 0.2) !important;
}

[data-theme="dark"] .alert-primary {
  background-color: rgba(107, 141, 214, 0.15) !important;
  border-color: rgba(107, 141, 214, 0.4) !important;
  color: #f8f9ff !important; /* Brighter text for better readability */
}

[data-theme="dark"] .alert-warning {
  background-color: rgba(255, 215, 0, 0.15) !important;
  border-color: rgba(255, 215, 0, 0.4) !important;
  color: #ffd700 !important;
}

[data-theme="dark"] .alert-success {
  background-color: rgba(74, 222, 128, 0.15) !important;
  border-color: rgba(74, 222, 128, 0.4) !important;
  color: #4ade80 !important;
}

[data-theme="dark"] .alert-danger {
  background-color: rgba(248, 113, 113, 0.15) !important;
  border-color: rgba(248, 113, 113, 0.4) !important;
  color: #f87171 !important;
}

[data-theme="dark"] .alert-info {
  background-color: rgba(96, 165, 250, 0.15) !important;
  border-color: rgba(96, 165, 250, 0.4) !important;
  color: #60a5fa !important;
}

/* List Groups - Starry Night */
[data-theme="dark"] .list-group-item {
  background-color: rgba(30, 27, 75, 0.5) !important;
  border-color: rgba(107, 141, 214, 0.3) !important;
  color: #f8f9ff !important; /* Brighter text for better readability */
}

[data-theme="dark"] .list-group-item:hover {
  background-color: rgba(107, 141, 214, 0.2) !important;
  box-shadow: 0 0 8px rgba(107, 141, 214, 0.3) !important;
}

[data-theme="dark"] .list-group-item.active {
  background-color: rgba(107, 141, 214, 0.4) !important;
  border-color: #6b8dd6 !important;
  color: #ffd700 !important;
  box-shadow: 0 0 12px rgba(107, 141, 214, 0.5) !important;
}

/* Breadcrumbs - Starry Night */
[data-theme="dark"] .breadcrumb {
  background-color: rgba(30, 27, 75, 0.5) !important;
}

[data-theme="dark"] .breadcrumb-item a {
  color: #6b8dd6 !important;
}

[data-theme="dark"] .breadcrumb-item.active {
  color: #c7d2fe !important; /* Brighter text for better readability */
}

/* Pagination - Starry Night */
[data-theme="dark"] .page-link {
  background-color: rgba(30, 27, 75, 0.5) !important;
  border-color: rgba(107, 141, 214, 0.3) !important;
  color: #f8f9ff !important; /* Brighter text for better readability */
}

[data-theme="dark"] .page-link:hover {
  background-color: rgba(107, 141, 214, 0.3) !important;
  border-color: #6b8dd6 !important;
  color: #ffd700 !important;
  box-shadow: 0 0 8px rgba(107, 141, 214, 0.4) !important;
}

[data-theme="dark"] .page-item.active .page-link {
  background-color: #6b8dd6 !important;
  border-color: #6b8dd6 !important;
  color: #ffffff !important;
  box-shadow: 0 0 12px rgba(107, 141, 214, 0.6) !important;
}

[data-theme="dark"] .page-item.disabled .page-link {
  background-color: rgba(15, 23, 42, 0.3) !important;
  border-color: rgba(107, 141, 214, 0.2) !important;
  color: #6b7280 !important;
  opacity: 0.5;
}

/* Progress Bars - Starry Night */
[data-theme="dark"] .progress {
  background-color: rgba(15, 23, 42, 0.5) !important;
  box-shadow: inset 0 0 5px rgba(107, 141, 214, 0.2) !important;
}

[data-theme="dark"] .progress-bar {
  background-color: #6b8dd6 !important;
  box-shadow: 0 0 10px rgba(107, 141, 214, 0.5) !important;
}

[data-theme="dark"] .progress-bar.bg-success {
  background-color: #4ade80 !important;
  box-shadow: 0 0 10px rgba(74, 222, 128, 0.5) !important;
}

[data-theme="dark"] .progress-bar.bg-warning {
  background-color: #ffd700 !important;
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.5) !important;
}

/* Tooltips - Starry Night */
[data-theme="dark"] .tooltip-inner {
  background-color: #1e1b4b !important;
  border: 1px solid rgba(107, 141, 214, 0.3) !important;
  box-shadow: 0 0 15px rgba(107, 141, 214, 0.4) !important;
  color: #f8f9ff !important; /* Brighter text for better readability */
}

[data-theme="dark"] .tooltip.bs-tooltip-top .tooltip-arrow::before {
  border-top-color: #1e1b4b !important;
}

[data-theme="dark"] .tooltip.bs-tooltip-bottom .tooltip-arrow::before {
  border-bottom-color: #1e1b4b !important;
}

[data-theme="dark"] .tooltip.bs-tooltip-start .tooltip-arrow::before {
  border-left-color: #1e1b4b !important;
}

[data-theme="dark"] .tooltip.bs-tooltip-end .tooltip-arrow::before {
  border-right-color: #1e1b4b !important;
}

/* Popovers - Starry Night */
[data-theme="dark"] .popover {
  background-color: #1e1b4b !important;
  border-color: rgba(107, 141, 214, 0.3) !important;
  box-shadow: 0 4px 20px rgba(107, 141, 214, 0.3), 0 0 30px rgba(255, 215, 0, 0.1) !important;
  color: #e0e7ff !important;
}

[data-theme="dark"] .popover-header {
  background-color: rgba(45, 42, 91, 0.8) !important;
  border-bottom-color: rgba(107, 141, 214, 0.3) !important;
  color: #ffd700 !important;
}

[data-theme="dark"] .popover-body {
  color: #f8f9ff !important; /* Brighter text for better readability */
}

/* Code blocks - Starry Night */
[data-theme="dark"] code {
  background-color: rgba(15, 23, 42, 0.6) !important;
  color: #60a5fa !important;
  border: 1px solid rgba(107, 141, 214, 0.2) !important;
  box-shadow: 0 0 5px rgba(107, 141, 214, 0.1) !important;
}

[data-theme="dark"] pre {
  background-color: rgba(15, 23, 42, 0.8) !important;
  border-color: rgba(107, 141, 214, 0.3) !important;
  color: #f8f9ff !important; /* Brighter text for better readability */
  box-shadow: 0 0 10px rgba(107, 141, 214, 0.2) !important;
}

/* Blockquotes - Starry Night */
[data-theme="dark"] blockquote {
  border-left-color: #6b8dd6 !important;
  color: #c7d2fe !important; /* Brighter text for better readability */
}

/* Horizontal Rules - Starry Night */
[data-theme="dark"] hr {
  border-color: rgba(107, 141, 214, 0.3) !important;
  box-shadow: 0 0 5px rgba(107, 141, 214, 0.2) !important;
}

/* Custom Navbar - Starry Night */
[data-theme="dark"] .custom-navbar {
  box-shadow: 0 2px 10px rgba(107, 141, 214, 0.2), 0 0 20px rgba(255, 215, 0, 0.1) !important;
}

[data-theme="dark"] .custom-nav-link {
  color: #f8f9ff !important; /* Brighter text for better readability */
  transition: all 0.3s ease !important;
}

[data-theme="dark"] .custom-nav-link:hover {
  color: #ffd700 !important;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.6) !important;
  background-color: rgba(107, 141, 214, 0.1) !important;
}

/* Main Content - Starry Night */
[data-theme="dark"] .main-content {
  background-color: transparent !important;
}

[data-theme="dark"] .container-fluid {
  background-color: transparent !important;
}

/* Dark mode banner image and background */
[data-theme="dark"] .banner-container {
  background: url('/static/banner-image-darkmode.png') center/cover no-repeat !important;
}

[data-theme="dark"] .banner-image {
  display: none; /* Hide regular banner image in dark mode */
}

[data-theme="dark"] .banner-overlay {
  background: linear-gradient(135deg, rgba(10, 14, 39, 0.85) 0%, rgba(30, 27, 75, 0.75) 50%, rgba(10, 14, 39, 0.85) 100%) !important;
  box-shadow: inset 0 0 100px rgba(107, 141, 214, 0.1);
}

[data-theme="dark"] body {
  background-image:
    radial-gradient(2px 2px at 20% 30%, rgba(255, 215, 0, 0.8), transparent),
    radial-gradient(2px 2px at 60% 70%, rgba(255, 215, 0, 0.6), transparent),
    radial-gradient(1px 1px at 50% 50%, rgba(255, 255, 255, 0.8), transparent),
    radial-gradient(1px 1px at 80% 10%, rgba(255, 215, 0, 0.7), transparent),
    radial-gradient(2px 2px at 90% 40%, rgba(255, 215, 0, 0.5), transparent),
    radial-gradient(1px 1px at 33% 60%, rgba(255, 255, 255, 0.6), transparent),
    radial-gradient(1px 1px at 66% 20%, rgba(255, 215, 0, 0.6), transparent),
    radial-gradient(2px 2px at 10% 80%, rgba(255, 215, 0, 0.5), transparent),
    radial-gradient(1px 1px at 40% 90%, rgba(255, 255, 255, 0.7), transparent),
    linear-gradient(180deg, #0a0e27 0%, #1e1b4b 50%, #0a0e27 100%),
    url('/static/banner-image-darkmode.png');
  background-size:
    200% 200%,
    200% 200%,
    200% 200%,
    200% 200%,
    200% 200%,
    200% 200%,
    200% 200%,
    200% 200%,
    200% 200%,
    100% 100%,
    cover;
  background-position:
    0% 0%,
    20% 30%,
    50% 50%,
    80% 10%,
    90% 40%,
    33% 60%,
    66% 20%,
    10% 80%,
    40% 90%,
    0% 0%,
    center top;
  background-attachment: fixed;
  background-repeat: repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, no-repeat, no-repeat;
  background-color: var(--body-bg, #0a0e27) !important; /* Deep midnight blue-black */
  animation: starryNight 20s ease-in-out infinite;
}

@keyframes starryNight {
  0%, 100% {
    background-position:
      0% 0%,
      20% 30%,
      50% 50%,
      80% 10%,
      90% 40%,
      33% 60%,
      66% 20%,
      10% 80%,
      40% 90%,
      0% 0%,
      center top;
  }
  50% {
    background-position:
      10% 10%,
      25% 35%,
      55% 55%,
      85% 15%,
      95% 45%,
      38% 65%,
      71% 25%,
      15% 85%,
      45% 95%,
      0% 0%,
      center top;
  }
}

[data-theme="dark"] .app-body {
  background: var(--app-body-bg) !important;
  background-color: var(--body-bg) !important;
  background-image: none !important; /* Override any hardcoded gradients */
}

[data-theme="dark"] .admin-container {
  background: var(--admin-container-bg) !important;
  background-color: var(--body-bg) !important;
  background-image: none !important; /* Override any hardcoded gradients */
}

[data-theme="dark"] .main-content {
  background: var(--main-content-bg) !important;
  background-color: var(--body-bg) !important;
  background-image: none !important; /* Override any hardcoded gradients */
}

/* Override hardcoded gradients in dark mode */
[data-theme="dark"] .admin-header {
  background: linear-gradient(135deg, var(--navbar-bg) 0%, var(--card-bg) 100%) !important;
  background-color: var(--navbar-bg) !important;
}

/* Global dark mode fix - ensure no white backgrounds with white text */
[data-theme="dark"] * {
  /* Override any white backgrounds that might cause white-on-white text */
}

[data-theme="dark"] div[style*="background: white"],
[data-theme="dark"] div[style*="background-color: white"],
[data-theme="dark"] div[style*="background: #fff"],
[data-theme="dark"] div[style*="background-color: #fff"],
[data-theme="dark"] div[style*="background: #ffffff"],
[data-theme="dark"] div[style*="background-color: #ffffff"] {
  background-color: var(--card-bg) !important;
  color: #f8f9ff !important; /* Bright text to prevent white-on-white */
}

[data-theme="dark"] .container,
[data-theme="dark"] .container-fluid,
[data-theme="dark"] .row,
[data-theme="dark"] .col,
[data-theme="dark"] [class*="col-"] {
  /* Ensure containers don't have white backgrounds */
  background-color: transparent !important;
}

/* Fix any elements that might have white backgrounds */
[data-theme="dark"] section,
[data-theme="dark"] article,
[data-theme="dark"] aside {
  background-color: transparent !important;
  color: #f8f9ff !important; /* Bright text by default */
}

/* Override hardcoded white backgrounds from app.css and other files */
[data-theme="dark"] .camera-container,
[data-theme="dark"] [class*="white"],
[data-theme="dark"] [style*="background: white"],
[data-theme="dark"] [style*="background-color: white"],
[data-theme="dark"] [style*="background: #fff"],
[data-theme="dark"] [style*="background-color: #fff"],
[data-theme="dark"] [style*="background: #ffffff"],
[data-theme="dark"] [style*="background-color: #ffffff"] {
  background-color: var(--card-bg) !important;
  background: var(--card-bg) !important;
  color: #f8f9ff !important; /* Bright text to prevent white-on-white */
}

/* Override any elements with light/white backgrounds that might have light text */
[data-theme="dark"] [class*="bg-white"],
[data-theme="dark"] [class*="bg-light"],
[data-theme="dark"] .bg-white,
[data-theme="dark"] .bg-light {
  background-color: var(--card-bg) !important;
  color: #f8f9ff !important; /* Bright text */
}

/* Ensure all text elements have proper color in dark mode */
[data-theme="dark"] span,
[data-theme="dark"] div,
[data-theme="dark"] label,
[data-theme="dark"] .text-light,
[data-theme="dark"] .text-white {
  /* Only override if parent doesn't have a dark background */
}

/* Fix for elements that might inherit light text color */
[data-theme="dark"] .text-light,
[data-theme="dark"] .text-white {
  color: #f8f9ff !important; /* Use bright text instead of pure white for better contrast */
}

/* Override Bootstrap utility classes that might cause issues */
[data-theme="dark"] .bg-white {
  background-color: var(--card-bg) !important;
}

[data-theme="dark"] .text-white {
  color: #f8f9ff !important; /* Slightly off-white for better visibility */
}

[data-theme="dark"] .text-light {
  color: #c7d2fe !important; /* Brighter light text */
}

/* Override hardcoded white backgrounds from app.css */
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="tel"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="time"],
[data-theme="dark"] input[type="datetime-local"],
[data-theme="dark"] input[type="url"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background-color: var(--input-bg) !important;
  color: var(--input-color) !important;
}

[data-theme="dark"] input[type="text"]:focus,
[data-theme="dark"] input[type="number"]:focus,
[data-theme="dark"] input[type="email"]:focus,
[data-theme="dark"] input[type="tel"]:focus,
[data-theme="dark"] input[type="password"]:focus,
[data-theme="dark"] input[type="date"]:focus,
[data-theme="dark"] input[type="time"]:focus,
[data-theme="dark"] input[type="datetime-local"]:focus,
[data-theme="dark"] input[type="url"]:focus,
[data-theme="dark"] input[type="search"]:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus {
  background-color: var(--input-bg) !important;
  color: var(--input-color) !important;
}

/* Override any elements with hardcoded white backgrounds */
[data-theme="dark"] [style*="background-color: #ffffff"],
[data-theme="dark"] [style*="background: #ffffff"],
[data-theme="dark"] [style*="background-color: white"],
[data-theme="dark"] [style*="background: white"] {
  background-color: var(--card-bg) !important;
  background: var(--card-bg) !important;
  color: #f8f9ff !important; /* Bright text */
}

/* Override light/cream colored backgrounds that might have light text */
[data-theme="dark"] [style*="background: #fff3cd"],
[data-theme="dark"] [style*="background-color: #fff3cd"],
[data-theme="dark"] [style*="background: #fff0f0"],
[data-theme="dark"] [style*="background-color: #fff0f0"],
[data-theme="dark"] [style*="background: #fff8e1"],
[data-theme="dark"] [style*="background-color: #fff8e1"],
[data-theme="dark"] [style*="background: #fff3e0"],
[data-theme="dark"] [style*="background-color: #fff3e0"] {
  background-color: var(--card-bg) !important;
  background: var(--card-bg) !important;
  color: #f8f9ff !important; /* Bright text */
}

/* Ensure all text on potentially white backgrounds is dark/visible */
[data-theme="dark"] * {
  /* If parent has white background, ensure text is visible */
}

/* Force dark backgrounds for common white background classes */
[data-theme="dark"] .white-bg,
[data-theme="dark"] .bg-white,
[data-theme="dark"] [class*="white-bg"],
[data-theme="dark"] [class*="bg-white"] {
  background-color: var(--card-bg) !important;
  color: #f8f9ff !important;
}

/* Override any remaining light text that might be on white backgrounds */
[data-theme="dark"] .light-text,
[data-theme="dark"] .text-light,
[data-theme="dark"] [class*="light-text"],
[data-theme="dark"] [class*="text-light"] {
  color: #c7d2fe !important; /* Brighter text for visibility */
}

/* Comprehensive fix for any element with white/light background - make text dark and visible */
[data-theme="dark"] * {
  /* Check if element has white background and ensure text is visible */
}

/* Force all elements to have proper text color if they have light backgrounds */
[data-theme="dark"] div,
[data-theme="dark"] span,
[data-theme="dark"] p,
[data-theme="dark"] li,
[data-theme="dark"] td,
[data-theme="dark"] th {
  /* Ensure default text color is visible */
}

/* Override any light gray or very light text colors that might be hard to read */
[data-theme="dark"] [style*="color: #f8f9fa"],
[data-theme="dark"] [style*="color: #e9ecef"],
[data-theme="dark"] [style*="color: #dee2e6"],
[data-theme="dark"] [style*="color: #ced4da"],
[data-theme="dark"] [style*="color: #adb5bd"],
[data-theme="dark"] [style*="color: #6c757d"],
[data-theme="dark"] [style*="color: #495057"] {
  color: #f8f9ff !important; /* Use bright text instead */
}

/* Ensure any element with computed white background gets dark background */
[data-theme="dark"] *:not(.btn-primary):not(.btn-secondary):not(.alert-success):not(.alert-danger):not(.alert-warning):not(.alert-info) {
  /* If background is white or very light, override it */
}

/* More specific overrides for common problematic elements */
[data-theme="dark"] .card-body,
[data-theme="dark"] .modal-body,
[data-theme="dark"] .tab-content,
[data-theme="dark"] .tab-pane {
  background-color: transparent !important;
  color: #f8f9ff !important; /* Ensure text is visible */
}

[data-theme="dark"] .card-body *,
[data-theme="dark"] .modal-body *,
[data-theme="dark"] .tab-content *,
[data-theme="dark"] .tab-pane * {
  color: inherit !important;
}

/* Colorful theme specific adjustments */
[data-theme="colorful"] .table-striped > tbody > tr:nth-of-type(odd) > td,
[data-theme="colorful"] .table-striped > tbody > tr:nth-of-type(odd) > th {
  background-color: rgba(233, 30, 99, 0.05) !important;
}

[data-theme="colorful"] .dropdown-item:hover {
  background-color: rgba(233, 30, 99, 0.1) !important;
}

/* Platform-specific theme adaptations */

/* iOS Platform Styles */
.platform-ios {
  --platform-ios: true;
  --border-radius: 0.5rem;
  --border-radius-lg: 0.75rem;
  --shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 1rem 2rem rgba(0, 0, 0, 0.15);
}

.platform-ios .btn {
  border-radius: 0.5rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.platform-ios .card {
  border-radius: 0.75rem;
  box-shadow: var(--shadow);
}

.platform-ios .navbar {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  background: rgba(255, 255, 255, 0.8);
}

.platform-ios .modal-content {
  border-radius: 0.75rem;
}

/* Android Platform Styles */
.platform-android {
  --platform-android: true;
  --border-radius: 0.25rem;
  --border-radius-lg: 0.375rem;
  --shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  --shadow-lg: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.platform-android .btn {
  border-radius: 0.25rem;
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 0.05em;
}

.platform-android .card {
  border-radius: 0.375rem;
  box-shadow: var(--shadow);
}

.platform-android .navbar {
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

.platform-android .modal-content {
  border-radius: 0.375rem;
}

/* Windows Platform Styles */
.platform-windows {
  --platform-windows: true;
  --border-radius: 0.125rem;
  --border-radius-lg: 0.25rem;
  --shadow: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.15);
}

.platform-windows .btn {
  border-radius: 0.125rem;
  font-weight: 400;
}

.platform-windows .card {
  border-radius: 0.25rem;
  box-shadow: var(--shadow);
}

.platform-windows .navbar {
  box-shadow: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.1);
}

.platform-windows .modal-content {
  border-radius: 0.25rem;
}

/* macOS Platform Styles */
.platform-macos {
  --platform-macos: true;
  --border-radius: 0.375rem;
  --border-radius-lg: 0.5rem;
  --shadow: 0 0.1875rem 0.375rem rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.15);
}

.platform-macos .btn {
  border-radius: 0.375rem;
  font-weight: 400;
  letter-spacing: 0.01em;
}

.platform-macos .card {
  border-radius: 0.5rem;
  box-shadow: var(--shadow);
}

.platform-macos .navbar {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  background: rgba(255, 255, 255, 0.7);
}

.platform-macos .modal-content {
  border-radius: 0.5rem;
}

/* Linux Platform Styles */
.platform-linux {
  --platform-linux: true;
  --border-radius: 0.25rem;
  --border-radius-lg: 0.375rem;
  --shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  --shadow-lg: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.platform-linux .btn {
  border-radius: 0.25rem;
  font-weight: 400;
}

.platform-linux .card {
  border-radius: 0.375rem;
  box-shadow: var(--shadow);
}

.platform-linux .navbar {
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

.platform-linux .modal-content {
  border-radius: 0.375rem;
}

/* Device-specific adaptations */

/* Mobile Device Styles */
.device-mobile {
  --device-mobile: true;
  --font-size-base: 0.875rem;
  --line-height-base: 1.4;
  --spacing-unit: 0.5rem;
}

.device-mobile .btn {
  min-height: 44px;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
}

.device-mobile .card {
  margin-bottom: 0.75rem;
}

.device-mobile .navbar {
  padding: 0.5rem 1rem;
}

.device-mobile .modal-content {
  margin: 1rem;
  max-height: calc(100vh - 2rem);
}

/* Tablet Device Styles */
.device-tablet {
  --device-tablet: true;
  --font-size-base: 1rem;
  --line-height-base: 1.5;
  --spacing-unit: 0.75rem;
}

.device-tablet .btn {
  min-height: 40px;
  padding: 0.625rem 1.25rem;
  font-size: 1rem;
}

.device-tablet .card {
  margin-bottom: 1rem;
}

.device-tablet .navbar {
  padding: 0.75rem 1.5rem;
}

.device-tablet .modal-content {
  margin: 1.5rem;
  max-height: calc(100vh - 3rem);
}

/* Desktop Device Styles */
.device-desktop {
  --device-desktop: true;
  --font-size-base: 1.125rem;
  --line-height-base: 1.6;
  --spacing-unit: 1rem;
}

.device-desktop .btn {
  min-height: 36px;
  padding: 0.5rem 1.5rem;
  font-size: 1.125rem;
}

.device-desktop .card {
  margin-bottom: 1.5rem;
}

.device-desktop .navbar {
  padding: 1rem 2rem;
}

.device-desktop .modal-content {
  margin: 2rem;
  max-height: calc(100vh - 4rem);
}

/* Platform-specific input styles */
.platform-ios input,
.platform-ios textarea,
.platform-ios select {
  border-radius: 0.5rem;
  font-size: 1rem;
}

.platform-android input,
.platform-android textarea,
.platform-android select {
  border-radius: 0.25rem;
  font-size: 1rem;
}

.platform-windows input,
.platform-windows textarea,
.platform-windows select {
  border-radius: 0.125rem;
  font-size: 1rem;
}

.platform-macos input,
.platform-macos textarea,
.platform-macos select {
  border-radius: 0.375rem;
  font-size: 1rem;
}

.platform-linux input,
.platform-linux textarea,
.platform-linux select {
  border-radius: 0.25rem;
  font-size: 1rem;
}

/* Platform-specific scrollbar styles */
.platform-ios ::-webkit-scrollbar {
  width: 8px;
}

.platform-ios ::-webkit-scrollbar-track {
  background: transparent;
}

.platform-ios ::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

.platform-android ::-webkit-scrollbar {
  width: 6px;
}

.platform-android ::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.platform-android ::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 3px;
}

.platform-windows ::-webkit-scrollbar {
  width: 12px;
}

.platform-windows ::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.platform-windows ::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 6px;
}

.platform-macos ::-webkit-scrollbar {
  width: 8px;
}

.platform-macos ::-webkit-scrollbar-track {
  background: transparent;
}

.platform-macos ::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

.platform-linux ::-webkit-scrollbar {
  width: 8px;
}

.platform-linux ::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.platform-linux ::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}