/* ========================================
   3D Model Generator - Unified CSS System
   ======================================== */

/* Global Text Color - Use theme primary text by default */
* {
  color: var(--text-primary) !important;
}

/* Override Bootstrap color classes with maximum specificity */
html body *,
html body .card-title,
html body .card-text,
html body .card-body,
html body .card-header,
html body .card-footer,
html body .bs-card-title-color,
html body .bs-card-text-color,
html body .bs-card-body-color,
html body .bs-card-header-color,
html body .bs-card-footer-color,
html body .text-muted,
html body .text-dark,
html body .text-light,
html body .text-primary,
html body .text-secondary,
html body .text-success,
html body .text-danger,
html body .text-warning,
html body .text-info,
html body .text-white,
html body .text-black-50,
html body .text-white-50,
html body .form-label,
html body .form-text,
html body .form-control,
html body .form-select,
html body .btn,
html body .nav-link,
html body .navbar-brand,
html body .dropdown-item,
html body .list-group-item,
html body .modal-title,
html body .modal-body,
html body .modal-footer,
html body .alert,
html body .badge,
html body .small,
html body .lead,
html body .display-1,
html body .display-2,
html body .display-3,
html body .display-4,
html body .display-5,
html body .display-6,
html body .h1,
html body .h2,
html body .h3,
html body .h4,
html body .h5,
html body .h6,
html body p,
html body span,
html body div,
html body label,
html body input,
html body textarea,
html body select {
  color: var(--text-primary) !important;
}

/* Specific overrides for secondary text */
.small,
.text-muted {
  color: var(--text-secondary) !important;
}

/* Link colors should remain distinct */
a,
.btn-link {
  color: var(--text-link) !important;
}

a:hover,
.btn-link:hover {
  color: var(--text-link-hover) !important;
}

/* Toast notifications - ensure proper contrast */
.toast-container .toast {
  color: #000 !important; /* Dark text for better readability */
}

.toast-container .toast .toast-header {
  color: #000 !important;
  background-color: rgba(255, 255, 255, 0.85) !important;
}

.toast-container .toast .toast-body {
  color: #000 !important;
}

/* Even more specific selectors */
#toast.toast {
  color: #000 !important;
}

#toast.toast .toast-header {
  color: #000 !important;
  background-color: rgba(255, 255, 255, 0.85) !important;
}

#toast.toast .toast-header * {
  color: #000 !important;
}

#toast.toast .toast-header .me-auto {
  color: #000 !important;
  font-weight: bold !important;
}

#toast.toast .toast-header strong {
  color: #000 !important;
  font-weight: bold !important;
}

#toast.toast .toast-body {
  color: #000 !important;
}

#toastBody {
  color: #000 !important;
}

/* Ultra-specific toast header text override */
.toast-container .toast .toast-header .me-auto,
.toast-container .toast .toast-header strong,
.toast-container .toast .toast-header .me-auto strong,
#toast.toast .toast-header .me-auto,
#toast.toast .toast-header strong,
#toast.toast .toast-header .me-auto strong {
  color: #000 !important;
  font-weight: bold !important;
  background-color: transparent !important;
}

/* Specific toast type colors */
.toast.bg-success {
  background-color: #d4edda !important;
  border-color: #c3e6cb !important;
}

.toast.bg-danger,
.toast.bg-error {
  background-color: #f8d7da !important;
  border-color: #f5c6cb !important;
}

.toast.bg-warning {
  background-color: #fff3cd !important;
  border-color: #ffeaa7 !important;
}

.toast.bg-info {
  background-color: #d1ecf1 !important;
  border-color: #bee5eb !important;
}

/* Page Navigation System */
.page {
  display: none;
}

.page.active {
  display: block;
}

/* CSS Custom Properties for Theme System */
:root {
  /* Dark Theme (Default) */
  --primary-color: #6366f1;
  --primary-hover: #5856eb;
  --primary-light: #a5b4fc;
  --secondary-color: #64748b;
  --secondary-hover: #475569;

  /* Background Colors */
  --bg-primary: #0f172a;
  --bg-secondary: #1e293b;
  --bg-tertiary: #334155;
  --bg-card: #1e293b;
  --bg-modal: rgba(15, 23, 42, 0.95);

  /* Text Colors */
  --text-primary: #f8fafc;
  --text-secondary: #cbd5e1;
  --text-muted: #94a3b8;
  --text-inverse: #0f172a;

  /* Border Colors */
  --border-primary: #334155;
  --border-secondary: #475569;
  --border-focus: #6366f1;

  /* Status Colors */
  --success-color: #10b981;
  --success-bg: #064e3b;
  --warning-color: #f59e0b;
  --warning-bg: #451a03;
  --error-color: #ef4444;
  --error-bg: #7f1d1d;
  --info-color: #3b82f6;
  --info-bg: #1e3a8a;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6);

  /* Spacing */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;

  /* Border Radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;

  /* Transitions */
  --transition-fast: 0.15s ease-in-out;
  --transition-normal: 0.3s ease-in-out;
  --transition-slow: 0.5s ease-in-out;
}

/* Light Theme */
[data-theme="light"] {
  --bg-primary: #ffffff;
  --bg-secondary: #f8fafc;
  --bg-tertiary: #f1f5f9;
  --bg-card: #ffffff;
  --bg-modal: rgba(255, 255, 255, 0.95);

  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #64748b;
  --text-inverse: #f8fafc;

  --border-primary: #e2e8f0;
  --border-secondary: #cbd5e1;

  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

/* Base Styles */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.6;
  transition: background-color var(--transition-normal), color var(--transition-normal);
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  line-height: 1.25;
  margin-bottom: var(--spacing-md);
  color: var(--text-primary);
}

h2 {
  font-weight: 300;
}

h1 { font-size: 2.5rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.125rem; }
h6 { font-size: 1rem; }

p {
  margin-bottom: var(--spacing-md);
  color: var(--text-secondary);
}

a {
  color: var(--primary-color);
  text-decoration: none;
  transition: color var(--transition-fast);
}

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

/* Layout Components */
.container {
  max-width: 1200px;
  margin: 0 auto;
  margin-top: 18px;
  padding: 0 var(--spacing-md);
}

.container-fluid {
  width: 100%;
  padding: 0 var(--spacing-md);
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 calc(var(--spacing-sm) * -1);
}

.col {
  flex: 1;
  padding: 0 var(--spacing-sm);
}

/* Grid System */
.col-1 { flex: 0 0 8.333333%; }
.col-2 { flex: 0 0 16.666667%; }
.col-3 { flex: 0 0 25%; }
.col-4 { flex: 0 0 33.333333%; }
.col-6 { flex: 0 0 50%; }
.col-8 { flex: 0 0 66.666667%; }
.col-9 { flex: 0 0 75%; }
.col-12 { flex: 0 0 100%; }

/* Cards */
.card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--transition-normal), transform var(--transition-normal);
}

.card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.card-header {
  padding: var(--spacing-lg);
  border-bottom: 1px solid var(--border-primary);
  background-color: var(--bg-secondary);
}

.card-body {
  padding: var(--spacing-lg);
}

.card-footer {
  padding: var(--spacing-lg);
  border-top: 1px solid var(--border-primary);
  background-color: var(--bg-secondary);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-sm) var(--spacing-lg);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
  user-select: none;
  gap: var(--spacing-sm);
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-primary {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--text-inverse);
}

.btn-primary:hover:not(:disabled) {
  background-color: var(--primary-hover);
  border-color: var(--primary-hover);
}

.btn-secondary {
  background-color: var(--secondary-color);
  border-color: var(--secondary-color);
  color: var(--text-inverse);
}

.btn-secondary:hover:not(:disabled) {
  background-color: var(--secondary-hover);
  border-color: var(--secondary-hover);
}

.btn-outline {
  background-color: transparent;
  border-color: var(--border-primary);
  color: var(--text-primary);
}

.btn-outline:hover:not(:disabled) {
  background-color: var(--bg-secondary);
  border-color: var(--border-secondary);
}

.btn-ghost {
  background-color: transparent;
  border-color: transparent;
  color: var(--text-primary);
}

.btn-ghost:hover:not(:disabled) {
  background-color: var(--bg-secondary);
}

.btn-sm {
  padding: var(--spacing-xs) var(--spacing-md);
  font-size: 0.75rem;
}

.btn-lg {
  padding: var(--spacing-md) var(--spacing-xl);
  font-size: 1rem;
}

/* Form Elements */
.form-group {
  margin-bottom: var(--spacing-lg);
}

.form-label {
  display: block;
  margin-bottom: var(--spacing-sm);
  font-weight: 500;
  color: var(--text-primary);
}

.form-control {
  display: block;
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text-primary);
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-control:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.form-control::placeholder {
  color: var(--text-muted);
}

textarea.form-control {
  resize: vertical;
  min-height: 100px;
}

/* Status Messages */
.alert {
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
}

.alert-success {
  background-color: var(--success-bg);
  border-color: var(--success-color);
  color: var(--success-color);
}

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

.alert-error {
  background-color: var(--error-bg);
  border-color: var(--error-color);
  color: var(--error-color);
}

.alert-info {
  background-color: var(--info-bg);
  border-color: var(--info-color);
  color: var(--info-color);
}

/* Navigation */
.navbar {
  background-color: var(--bg-card);
  border-bottom: 1px solid var(--border-primary);
  padding: var(--spacing-md) 0;
  position: sticky;
  top: 0;
  z-index: 1000;
}

.navbar-toggler {
  border: 1px solid var(--border-primary);
  background-color: transparent;
}

.navbar-toggler:focus {
  box-shadow: 0 0 0 0.2rem rgba(var(--primary-rgb), 0.25);
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar-brand {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
  text-decoration: none;
}

.navbar-nav {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
  list-style: none;
}

.nav-link {
  color: var(--text-secondary);
  text-decoration: none;
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}

.nav-link:hover,
.nav-link.active {
  color: var(--text-primary);
  background-color: var(--bg-secondary);
}

/* Theme Toggle */
.theme-toggle {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: var(--spacing-sm);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}

.theme-toggle:hover {
  color: var(--text-primary);
  background-color: var(--bg-secondary);
}

/* Loading States */
.loading {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid var(--border-primary);
  border-radius: 50%;
  border-top-color: var(--primary-color);
  animation: spin 1s ease-in-out infinite;
}

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

/* Utility Classes */
.d-none { display: none !important; }
.d-block { display: block !important; }
.d-flex { display: flex !important; }
.d-inline { display: inline !important; }
.d-inline-block { display: inline-block !important; }

.text-center { text-align: center !important; }
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }

.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: var(--spacing-xs) !important; }
.mt-2 { margin-top: var(--spacing-sm) !important; }
.mt-3 { margin-top: var(--spacing-md) !important; }
.mt-4 { margin-top: var(--spacing-lg) !important; }
.mt-5 { margin-top: var(--spacing-xl) !important; }

.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: var(--spacing-xs) !important; }
.mb-2 { margin-bottom: var(--spacing-sm) !important; }
.mb-3 { margin-bottom: var(--spacing-md) !important; }
.mb-4 { margin-bottom: var(--spacing-lg) !important; }
.mb-5 { margin-bottom: var(--spacing-xl) !important; }

.p-0 { padding: 0 !important; }
.p-1 { padding: var(--spacing-xs) !important; }
.p-2 { padding: var(--spacing-sm) !important; }
.p-3 { padding: var(--spacing-md) !important; }
.p-4 { padding: var(--spacing-lg) !important; }
.p-5 { padding: var(--spacing-xl) !important; }

/* Responsive Design */
@media (min-width: 992px) {
  .navbar-nav .nav-link {
    font-size: 0.9rem;
    padding: 0.5rem 0.75rem;
  }

  .navbar-nav {
    gap: var(--spacing-sm);
  }

  .navbar-nav .btn {
    font-size: 0.85rem;
    padding: 0.4rem 0.8rem;
  }

  .navbar-brand {
    font-size: 1.1rem;
  }
}

@media (max-width: 768px) {
  .container {
    padding: 0 var(--spacing-sm);
    margin-top: 12px;
  }

  .col {
    flex: 0 0 100%;
    margin-bottom: var(--spacing-md);
  }

  .navbar-nav {
    flex-direction: column;
    gap: var(--spacing-sm);
  }

  h1 { font-size: 2rem; }
  h2 { font-size: 1.25rem; font-weight: 300; }
  h3 { font-size: 1.25rem; }
}

@media (max-width: 480px) {
  html { font-size: 14px; }

  .btn {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: 0.75rem;
  }

  .card-body {
    padding: var(--spacing-md);
  }
}

/* ========================================
   AGGRESSIVE BOOTSTRAP OVERRIDES
   ======================================== */

/* Force override Bootstrap with maximum specificity */
html body div.container div.row div.col-12 div.card div.card-body div.row div.col-6 small,
html body div.container div.row div.col-12 div.card div.card-body div.row div.col-6 div,
html body div.container div.row div.col-12 div.card div.card-body h6,
html body div.container div.row div.col-12 div.card div.card-body p,
html body div.container div.row div.col-12 div.card div.card-header div span,
html body div.container div.row div.col-12 div.card div.card-footer div button,
html body div.container div.row div.col-12 div.card div.card-body div.row div.col-6 small + div,
html body div.container div.row div.col-12 div.card div.card-body div.row div.col-6 small + div.fw-bold,
html body div.container div.row div.col-12 div.card div.card-body div.row div.col-6 small + div.small,
html body div.container div.row div.col-12 div.card div.card-body div.row div.col-6 small + div.fw-bold.small {
  color: var(--text-primary) !important;
}

/* Override Bootstrap utility classes with maximum specificity */
html body .text-muted,
html body .text-dark,
html body .text-light,
html body .text-primary,
html body .text-secondary,
html body .text-success,
html body .text-danger,
html body .text-warning,
html body .text-info,
html body .text-white,
html body .text-black-50,
html body .text-white-50,
html body .small,
html body .lead,
html body .display-1,
html body .display-2,
html body .display-3,
html body .display-4,
html body .display-5,
html body .display-6,
html body .h1,
html body .h2,
html body .h3,
html body .h4,
html body .h5,
html body .h6 {
  color: var(--text-primary) !important;
}

/* Override Bootstrap form elements */
html body .form-label,
html body .form-text,
html body .form-control,
html body .form-select,
html body .input-group-text,
html body .form-check-label {
  color: var(--text-primary) !important;
}

/* Fix input group text styling */
html body .input-group-text {
  color: var(--text-primary) !important;
  background-color: var(--bg-secondary) !important;
  border-color: var(--border-color) !important;
}

/* Fix input field styling for readability */
html body .form-control,
html body input[type="text"],
html body input[type="email"],
html body input[type="password"],
html body input[type="search"] {
  color: var(--text-primary) !important;
  background-color: var(--bg-secondary) !important;
  border-color: var(--border-color) !important;
}

html body .form-control:focus,
html body input[type="text"]:focus,
html body input[type="email"]:focus,
html body input[type="password"]:focus,
html body input[type="search"]:focus {
  color: var(--text-primary) !important;
  background-color: var(--bg-secondary) !important;
  border-color: var(--accent-color) !important;
  box-shadow: 0 0 0 0.2rem rgba(var(--accent-rgb), 0.25) !important;
}

/* Dark theme specific input styling */
[data-theme="dark"] html body .form-control,
[data-theme="dark"] html body input[type="text"],
[data-theme="dark"] html body input[type="email"],
[data-theme="dark"] html body input[type="password"],
[data-theme="dark"] html body input[type="search"] {
  color: #ffffff !important;
  background-color: #2d3748 !important;
  border-color: #4a5568 !important;
}

[data-theme="dark"] html body .form-control:focus,
[data-theme="dark"] html body input[type="text"]:focus,
[data-theme="dark"] html body input[type="email"]:focus,
[data-theme="dark"] html body input[type="password"]:focus,
[data-theme="dark"] html body input[type="search"]:focus {
  color: #ffffff !important;
  background-color: #2d3748 !important;
  border-color: var(--accent-color) !important;
  box-shadow: 0 0 0 0.2rem rgba(var(--accent-rgb), 0.25) !important;
}

/* Light theme specific input styling */
[data-theme="light"] html body .form-control,
[data-theme="light"] html body input[type="text"],
[data-theme="light"] html body input[type="email"],
[data-theme="light"] html body input[type="password"],
[data-theme="light"] html body input[type="search"] {
  color: #1a202c !important;
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
}

[data-theme="light"] html body .form-control:focus,
[data-theme="light"] html body input[type="text"]:focus,
[data-theme="light"] html body input[type="email"]:focus,
[data-theme="light"] html body input[type="password"]:focus,
[data-theme="light"] html body input[type="search"]:focus {
  color: #1a202c !important;
  background-color: #ffffff !important;
  border-color: var(--accent-color) !important;
  box-shadow: 0 0 0 0.2rem rgba(var(--accent-rgb), 0.25) !important;
}

/* Fix Font Awesome icons in input groups */
html body .input-group-text i,
html body .input-group-text .fas,
html body .input-group-text .far,
html body .input-group-text .fab,
html body .input-group-text .fal,
html body .input-group-text .fa {
  color: var(--text-primary) !important;
}

/* Specific styling for select elements to ensure readability */
html body .form-select,
html body select,
html body .form-select option,
html body select option {
  color: var(--text-primary) !important;
  background-color: var(--bg-secondary) !important;
  border-color: var(--border-color) !important;
}

html body .form-select:focus,
html body select:focus {
  color: var(--text-primary) !important;
  background-color: var(--bg-secondary) !important;
  border-color: var(--accent-color) !important;
  box-shadow: 0 0 0 0.2rem rgba(var(--accent-rgb), 0.25) !important;
}

/* Ensure select options are readable */
html body .form-select option,
html body select option {
  color: var(--text-primary) !important;
  background-color: var(--bg-secondary) !important;
}

/* Dark theme specific select styling */
[data-theme="dark"] html body .form-select,
[data-theme="dark"] html body select,
[data-theme="dark"] html body .form-select option,
[data-theme="dark"] html body select option {
  color: #ffffff !important;
  background-color: #2d3748 !important;
  border-color: #4a5568 !important;
}

[data-theme="dark"] html body .form-select:focus,
[data-theme="dark"] html body select:focus {
  color: #ffffff !important;
  background-color: #2d3748 !important;
  border-color: var(--accent-color) !important;
  box-shadow: 0 0 0 0.2rem rgba(var(--accent-rgb), 0.25) !important;
}

/* Light theme specific select styling */
[data-theme="light"] html body .form-select,
[data-theme="light"] html body select,
[data-theme="light"] html body .form-select option,
[data-theme="light"] html body select option {
  color: #1a202c !important;
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
}

[data-theme="light"] html body .form-select:focus,
[data-theme="light"] html body select:focus {
  color: #1a202c !important;
  background-color: #ffffff !important;
  border-color: var(--accent-color) !important;
  box-shadow: 0 0 0 0.2rem rgba(var(--accent-rgb), 0.25) !important;
}

/* Override Bootstrap navigation */
html body .nav-link,
html body .navbar-brand,
html body .navbar-nav .nav-link,
html body .navbar-nav .dropdown-item {
  color: var(--text-primary) !important;
}

/* Override Bootstrap buttons */
html body .btn,
html body .btn-primary,
html body .btn-secondary,
html body .btn-success,
html body .btn-danger,
html body .btn-warning,
html body .btn-info,
html body .btn-light,
html body .btn-dark,
html body .btn-outline-primary,
html body .btn-outline-secondary,
html body .btn-outline-success,
html body .btn-outline-danger,
html body .btn-outline-warning,
html body .btn-outline-info,
html body .btn-outline-light,
html body .btn-outline-dark {
  color: var(--text-primary) !important;
}

/* Override Bootstrap cards */
html body .card,
html body .card-title,
html body .card-text,
html body .card-body,
html body .card-header,
html body .card-footer,
html body .card-body h1,
html body .card-body h2,
html body .card-body h3,
html body .card-body h4,
html body .card-body h5,
html body .card-body h6,
html body .card-body p,
html body .card-body span,
html body .card-body div,
html body .card-body small,
html body .card-body .fw-bold,
html body .card-body .text-muted {
  color: var(--text-primary) !important;
}

/* Override Bootstrap modals */
html body .modal-title,
html body .modal-body,
html body .modal-footer,
html body .modal-body h1,
html body .modal-body h2,
html body .modal-body h3,
html body .modal-body h4,
html body .modal-body h5,
html body .modal-body h6,
html body .modal-body p,
html body .modal-body span,
html body .modal-body div,
html body .modal-body small,
html body .modal-body .fw-bold,
html body .modal-body .text-muted {
  color: var(--text-primary) !important;
}

/* Override Bootstrap alerts */
html body .alert,
html body .alert-primary,
html body .alert-secondary,
html body .alert-success,
html body .alert-danger,
html body .alert-warning,
html body .alert-info,
html body .alert-light,
html body .alert-dark {
  color: var(--text-primary) !important;
}

/* Override Bootstrap badges */
html body .badge,
html body .badge-primary,
html body .badge-secondary,
html body .badge-success,
html body .badge-danger,
html body .badge-warning,
html body .badge-info,
html body .badge-light,
html body .badge-dark {
  color: var(--text-primary) !important;
}

/* Override Bootstrap list groups */
html body .list-group-item,
html body .list-group-item-action {
  color: var(--text-primary) !important;
}

/* Override Bootstrap dropdowns */
html body .dropdown-item,
html body .dropdown-menu .dropdown-item {
  color: var(--text-primary) !important;
}

/* Override Bootstrap progress bars */
html body .progress-bar {
  color: var(--text-primary) !important;
}

/* Override Bootstrap spinners */
html body .spinner-border,
html body .spinner-grow {
  color: var(--text-primary) !important;
}

/* Override Bootstrap toasts - REMOVED - conflicts with specific toast styling below */

/* Fix Font Awesome icons throughout the page */
html body i,
html body .fas,
html body .far,
html body .fab,
html body .fal,
html body .fa,
html body .fa-search,
html body .fa-sync-alt,
html body .fa-plus,
html body .fa-cube,
html body .fa-eye,
html body .fa-download,
html body .fa-times,
html body .fa-redo,
html body .fa-trash,
html body .fa-home,
html body .fa-project-diagram,
html body .fa-expand,
html body .fa-mouse,
html body .fa-clock,
html body .fa-cog,
html body .fa-check,
html body .fa-ban,
html body .fa-exclamation-triangle {
  color: var(--text-primary) !important;
}

/* Specific styling for search icon */
html body .fa-search {
  color: var(--text-primary) !important;
}

/* Force override for any remaining elements - EXCLUDING TOASTS */
html body *:not(.btn):not(.nav-link):not(.navbar-brand):not(.dropdown-item):not(.list-group-item):not(.badge):not(.alert):not(.toast):not(.toast-header):not(.toast-body):not(.toast-container):not(.toast-container *):not(.me-auto) {
  color: var(--text-primary) !important;
}

/* Specific modal header styling */
.modal-header,
.modal-header *,
.modal-header h1,
.modal-header h2,
.modal-header h3,
.modal-header h4,
.modal-header h5,
.modal-header h6,
.modal-header .modal-title,
.modal-header .btn-close {
  color: var(--text-primary) !important;
}

/* Modal header background override */
.modal-header {
  background-color: var(--bs-modal-header-bg) !important;
  border-bottom-color: var(--bs-modal-header-border-color) !important;
}

/* Modal dark theme styling */
.modal-content {
  background-color: var(--bs-dark) !important;
  border-color: var(--bs-gray-700) !important;
  color: var(--text-primary) !important;
}

.modal-body {
  background-color: var(--bs-dark) !important;
  color: var(--text-primary) !important;
}

.modal-footer {
  background-color: var(--bs-dark) !important;
  border-top-color: var(--bs-gray-700) !important;
  color: var(--text-primary) !important;
}

/* Modal backdrop */
.modal-backdrop {
  background-color: rgba(0, 0, 0, 0.8) !important;
}

/* Ensure modal backdrops are properly cleaned up */
.modal-backdrop.fade {
  transition: opacity 0.15s linear;
}

.modal-backdrop.show {
  opacity: 0.5;
}

/* Fix for multiple backdrops */
.modal-backdrop + .modal-backdrop {
  display: none !important;
}

/* Force hide loading and error elements */
#viewerLoading.d-none,
#modelViewerError.d-none {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Make viewerLoading overlay the viewerContainer */
#viewerLoading {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(26, 26, 26, 0.9);
  z-index: 1000;
  backdrop-filter: blur(2px);
}

/* Viewer container is always visible, loading overlay covers it */
#modelViewerContainer {
  opacity: 1;
  transition: opacity 0.3s ease-in-out;
}

/* Loading overlay covers the entire viewer container */
#modelViewerLoading {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(26, 26, 26, 0.9);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(2px);
}

/* Also style the HTML modal loading overlay */
#viewerLoading {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(26, 26, 26, 0.9);
  z-index: 1000;
  backdrop-filter: blur(2px);
}

/* Error overlay covers the entire viewer container */
#modelViewerError {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(26, 26, 26, 0.9);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(2px);
}

/* Make sure error overlay is positioned relative to viewerContainer */
#viewerContainer {
  position: relative;
}

/* Ensure viewer container is visible when not loading */
#viewerContainer:not(.d-none) {
  display: block !important;
  visibility: visible !important;
}

/* Model card button styling */
.model-card .btn {
  font-size: 0.75rem;
  padding: 0.375rem 0.5rem;
  border-radius: 0.25rem;
}

.model-card .row.g-2 {
  margin-left: -0.25rem;
  margin-right: -0.25rem;
}

.model-card .row.g-2 > * {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

/* Featured model stats buttons */
.model-stats .btn-link {
  color: var(--text-primary) !important;
  text-decoration: none !important;
  transition: all 0.2s ease;
}

.model-stats .btn-link:hover {
  color: var(--bs-primary) !important;
  transform: scale(1.1);
}

.model-stats .btn-link:focus {
  box-shadow: none !important;
  outline: none !important;
}

.model-stats .btn-link i.fas {
  color: var(--bs-danger) !important;
}

.model-stats .btn-link i.far {
  color: var(--text-muted) !important;
}

.model-stats .btn-link:hover i.far {
  color: var(--bs-danger) !important;
}

/* Admin Panel Button Styling */
#adminPanelBtn {
  background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
  color: #000 !important;
  font-weight: 600;
  border: 2px solid #ffd700;
  transition: all 0.3s ease;
}

#adminPanelBtn:hover {
  background: linear-gradient(135deg, #ffed4e 0%, #ffd700 100%);
  color: #000 !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 215, 0, 0.4);
}

#adminPanelBtn i {
  color: #000 !important;
}

/* Main Page Admin Panel Button Styling */
#adminPanelMainBtn {
  background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
  color: #000 !important;
  font-weight: 600;
  border: 2px solid #ffd700;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
}

#adminPanelMainBtn:hover {
  background: linear-gradient(135deg, #ffed4e 0%, #ffd700 100%);
  color: #000 !important;
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(255, 215, 0, 0.5);
}

#adminPanelMainBtn i {
  color: #000 !important;
}

.text-dark {
  color: #000 !important;
}

/* Model Card Thumbnails */
.model-card {
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.model-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.card-img-top-container {
  position: relative;
  overflow: hidden;
  border-radius: 0.5rem 0.5rem 0 0;
}

.card-img-top-container img {
  transition: transform 0.3s ease;
}

.model-card:hover .card-img-top-container img {
  transform: scale(1.05);
}

.thumbnail-placeholder {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 3rem;
  border-radius: 0.5rem 0.5rem 0 0;
}

/* Small thumbnails - 1/4 of card size */
.model-thumbnail-small {
  width: 60px;
  height: 60px;
  min-width: 60px;
  min-height: 60px;
  border-radius: 0.375rem;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: 2px; /* Align with title baseline */
}

.thumbnail-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.model-card:hover .thumbnail-img {
  transform: scale(1.05);
}

.thumbnail-placeholder-small {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.5rem;
  border-radius: 0.375rem;
}

/* Loading state for thumbnails */
.thumbnail-loading {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

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

/* Dark theme adjustments for thumbnails */
[data-theme="dark"] .model-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
}

[data-theme="dark"] .thumbnail-placeholder {
  background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%);
}

[data-theme="dark"] .thumbnail-placeholder-small {
  background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%);
}

[data-theme="dark"] .model-card:hover {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

html body .badge.bg-light.text-dark {
  color: #000 !important;
}