/* ============================================================================
   LIGHT MODE (Default)
   ============================================================================ */
:root,
[data-theme="light"] {
  --text-color: #1a1a1a;
  --bg-color: #ffffff;
  --secondary-color: #6c757d;
  --border-color: #dee2e6;
  --light-bg: #f8f9fa;
  --shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Base elements - Light Mode */
body {
  background-color: #ffffff;
  color: #1a1a1a;
}

.navbar {
  background-color: #ffffff;
  border-bottom: 1px solid #dee2e6;
}

.page-transition-overlay {
  background-color: rgba(255, 255, 255, 0.98);
}

/* ============================================================================
   DARK MODE
   ============================================================================ */
[data-theme="dark"] {
  --text-color: #e9ecef;
  --bg-color: #1a1a1a;
  --secondary-color: #495057;
  --border-color: #495057;
  --light-bg: #212529;
  --shadow: 0 2px 8px rgba(0,0,0,0.3);
}

[data-theme="dark"] body {
  background-color: #1a1a1a !important;
  color: #e9ecef !important;
}

[data-theme="dark"] .navbar {
  background-color: #1a1a1a !important;
  border-bottom: 1px solid #495057 !important;
}

[data-theme="dark"] .navbar-brand,
[data-theme="dark"] .nav-link {
  color: #e9ecef !important;
}

[data-theme="dark"] .page-transition-overlay {
  background-color: rgba(26, 26, 26, 0.98) !important;
}

[data-theme="dark"] .hero-section {
  background-color: #212529 !important;
}

[data-theme="dark"] .hero-section h1 {
  color: #e9ecef !important;
}

[data-theme="dark"] .hero-section p {
  color: #b8b8b8 !important;
}

[data-theme="dark"] .so-funktionierts-section {
  background-color: #1a1a1a !important;
}

[data-theme="dark"] .so-funktionierts-section h2,
[data-theme="dark"] .so-funktionierts-section h3 {
  color: #e9ecef !important;
}

[data-theme="dark"] .so-funktionierts-section p,
[data-theme="dark"] .so-funktionierts-section li {
  color: #b8b8b8 !important;
}

[data-theme="dark"] .step-number-badge {
  background-color: var(--primary-color, #0d6efd);
  color: #ffffff;
}

[data-theme="dark"] .steps-timeline > div > div:first-child::before {
  background-color: #495057 !important;
}

[data-theme="dark"] .preise-section {
  background-color: #1a1a1a !important;
}

[data-theme="dark"] .pricing-card {
  background-color: #2c2c2c !important;
  border-color: #495057 !important;
  color: #e9ecef !important;
}

[data-theme="dark"] .pricing-card-featured {
  background-color: #1e3a5f !important;
  border-color: #0d6efd !important;
}

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

[data-theme="dark"] .pricing-amount {
  color: #e9ecef !important;
}

[data-theme="dark"] .pricing-extra-text {
  color: #b8b8b8 !important;
}

[data-theme="dark"] .pricing-features li {
  color: #e9ecef !important;
}

[data-theme="dark"] .pricing-features svg {
  color: #0d6efd !important;
}

[data-theme="dark"] .pricing-btn-outline {
  background-color: transparent !important;
  border-color: #e9ecef !important;
  color: #e9ecef !important;
}

[data-theme="dark"] .pricing-btn-outline:hover {
  background-color: #e9ecef !important;
  color: #1a1a1a !important;
}

[data-theme="dark"] .pricing-btn-featured {
  background-color: #0d6efd !important;
  border-color: #0d6efd !important;
  color: #ffffff !important;
}

[data-theme="dark"] .info-box {
  background-color: #2c2c2c !important;
  border-color: #495057 !important;
  color: #e9ecef !important;
}

[data-theme="dark"] .scorecard-section {
  background-color: #1a1a1a !important;
}

[data-theme="dark"] .scorecard-section h2,
[data-theme="dark"] .scorecard-section h3 {
  color: #e9ecef !important;
}

[data-theme="dark"] .scorecard-section ul li {
  color: #e9ecef !important;
}

[data-theme="dark"] .scorecard-section ul li::marker {
  color: #e9ecef !important;
}

[data-theme="dark"] .principle-box {
  background-color: #2c2c2c !important;
  border-color: #495057 !important;
}

[data-theme="dark"] .principle-box h3,
[data-theme="dark"] .principle-box h4 {
  color: #e9ecef !important;
}

[data-theme="dark"] .principle-box p {
  color: #e9ecef !important;
}

[data-theme="dark"] .meine-chancen-section ul li {
  color: #e9ecef !important;
}

[data-theme="dark"] .meine-chancen-section ul li::marker {
  color: #e9ecef !important;
}

[data-theme="dark"] .module-card {
  background-color: #2c2c2c !important;
  border-color: #495057 !important;
}

[data-theme="dark"] .module-card-body {
  background-color: #2c2c2c !important;
  color: #e9ecef !important;
}

[data-theme="dark"] .module-card h3,
[data-theme="dark"] .module-card h4 {
  color: #e9ecef !important;
}

[data-theme="dark"] .module-card p {
  color: #b8b8b8 !important;
}

[data-theme="dark"] .success-stories {
  background-color: #1a1a1a !important;
}

[data-theme="dark"] .success-stories h2,
[data-theme="dark"] .success-stories h3 {
  color: #e9ecef !important;
}

[data-theme="dark"] .success-stories p {
  color: #b8b8b8 !important;
}

[data-theme="dark"] .story-card {
  background-color: #2c2c2c !important;
  border-color: #495057 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
}

[data-theme="dark"] .story-image {
  border-radius: 0.5rem;
}

[data-theme="dark"] .story-title {
  color: #e9ecef !important;
  font-size: 1.25rem;
}

[data-theme="dark"] .story-label {
  color: #e9ecef !important;
}

[data-theme="dark"] .story-text {
  color: #b8b8b8 !important;
  line-height: 1.6;
}

[data-theme="dark"] .story-solution {
  color: #28a745 !important;
}

[data-theme="dark"] .story-solution-text {
  color: #28a745 !important;
  line-height: 1.6;
}

[data-theme="dark"] .ueber-uns-section {
  background-color: #1a1a1a !important;
}

[data-theme="dark"] .ueber-uns-section h1,
[data-theme="dark"] .ueber-uns-section h2 {
  color: #e9ecef !important;
}

[data-theme="dark"] .ueber-uns-section p {
  color: #b8b8b8 !important;
}

[data-theme="dark"] .login-section,
[data-theme="dark"] .register-section {
  background-color: #1a1a1a !important;
}

[data-theme="dark"] .login-form,
[data-theme="dark"] .register-form {
  background-color: #2c2c2c !important;
  border-color: #495057 !important;
}

[data-theme="dark"] .form-control {
  background-color: #1a1a1a !important;
  border-color: #495057 !important;
  color: #e9ecef !important;
}

[data-theme="dark"] .form-control:focus {
  background-color: #1a1a1a !important;
  border-color: #0d6efd !important;
  color: #e9ecef !important;
}

[data-theme="dark"] .form-label {
  color: #e9ecef !important;
}

[data-theme="dark"] .login-container {
  background-color: #1a1a1a !important;
}

[data-theme="dark"] .login-card {
  background-color: #2c2c2c !important;
  border-color: #495057 !important;
  color: #e9ecef !important;
}

[data-theme="dark"] .login-welcome,
[data-theme="dark"] .login-subtitle {
  color: #e9ecef !important;
}

[data-theme="dark"] .login-link {
  color: #0d6efd !important;
}

[data-theme="dark"] .login-back-link {
  color: #adb5bd !important;
}

[data-theme="dark"] .login-back-link:hover {
  color: #e9ecef !important;
}

[data-theme="dark"] .login-divider-text {
  color: #6c757d !important;
  background-color: #2c2c2c !important;
}

[data-theme="dark"] .login-oauth-btn-branded {
  background-color: #1a1a1a !important;
  border-color: #495057 !important;
  color: #e9ecef !important;
}

[data-theme="dark"] .login-oauth-btn-branded:hover {
  background-color: #343a40 !important;
  border-color: #6c757d !important;
}

[data-theme="dark"] .login-alert {
  background-color: #1a1a1a !important;
  border-color: #495057 !important;
  color: #e9ecef !important;
}

[data-theme="dark"] .dashboard-section {
  background-color: #1a1a1a !important;
}

[data-theme="dark"] .view-toggle-buttons {
  background-color: #2c2c2c !important;
  border-color: #495057 !important;
}

[data-theme="dark"] .view-btn {
  background-color: transparent !important;
  color: #b8b8b8 !important;
}

[data-theme="dark"] .view-btn:hover {
  background-color: #1a1a1a !important;
  color: #e9ecef !important;
}

[data-theme="dark"] .view-btn.active {
  background-color: #1a1a1a !important;
  color: #0d6efd !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3) !important;
}

[data-theme="dark"] .case-card {
  background-color: #2c2c2c !important;
  border-color: #495057 !important;
}

[data-theme="dark"] .case-card h3,
[data-theme="dark"] .case-card h4 {
  color: #e9ecef !important;
}

[data-theme="dark"] .case-card p {
  color: #b8b8b8 !important;
}

[data-theme="dark"] .case-logo {
  background: #3c3c3c !important;
  border-color: #495057 !important;
}

[data-theme="dark"] .logo-spinner {
  background: #3c3c3c !important;
}

[data-theme="dark"] .btn-info {
  background: #3c3c3c !important;
  border-color: #495057 !important;
  color: #e9ecef !important;
}

[data-theme="dark"] .btn-info:hover {
  background: #4c4c4c !important;
}

[data-theme="dark"] .company-info-logo {
  background: #3c3c3c !important;
  border-color: #495057 !important;
}

[data-theme="dark"] .company-info-row label {
  color: #9e9e9e !important;
}

[data-theme="dark"] .company-info-row span {
  color: #e9ecef !important;
}

[data-theme="dark"] .case-box,
[data-theme="dark"] .fall-box {
  background-color: #2c2c2c !important;
  border-color: #495057 !important;
}

[data-theme="dark"] .case-box h3,
[data-theme="dark"] .case-box h4,
[data-theme="dark"] .fall-box h3,
[data-theme="dark"] .fall-box h4 {
  color: #e9ecef !important;
}

[data-theme="dark"] .case-box p,
[data-theme="dark"] .fall-box p {
  color: #b8b8b8 !important;
}

[data-theme="dark"] .chat-header {
  background-color: #2c2c2c !important;
  border-bottom: 1px solid #495057 !important;
}

[data-theme="dark"] .chat-header h2,
[data-theme="dark"] .chat-header h3 {
  color: #e9ecef !important;
}

[data-theme="dark"] .chat-message {
  background-color: #2c2c2c !important;
  border-color: #495057 !important;
  color: #e9ecef !important;
}

[data-theme="dark"] .info-box-header,
[data-theme="dark"] .case-info-header {
  background-color: #2c2c2c !important;
  border-bottom: 1px solid #495057 !important;
  color: #e9ecef !important;
}

[data-theme="dark"] .profile-section {
  background-color: #1a1a1a !important;
}

[data-theme="dark"] .profile-card {
  background-color: #2c2c2c !important;
  border-color: #495057 !important;
}

[data-theme="dark"] .container-fluid > div[style*="background: #ffffff"] {
  background-color: #2c2c2c !important;
}

[data-theme="dark"] div[style*="background: #f8f9fa"] {
  background-color: #1a1a1a !important;
}

[data-theme="dark"] h2[style*="color: #2c3e50"],
[data-theme="dark"] h3[style*="color: #2c3e50"] {
  color: #e9ecef !important;
}

[data-theme="dark"] .billing-section {
  background-color: #1a1a1a !important;
}

[data-theme="dark"] .invoices-overview {
  background-color: #1a1a1a !important;
}

[data-theme="dark"] .invoices-table {
  background-color: #2c2c2c !important;
  color: #e9ecef !important;
}

[data-theme="dark"] .table {
  background-color: #2c2c2c !important;
  color: #e9ecef !important;
}

[data-theme="dark"] .table thead th {
  background-color: #1a1a1a !important;
  border-color: #495057 !important;
  color: #e9ecef !important;
}

[data-theme="dark"] .table tbody td {
  border-color: #495057 !important;
  color: #e9ecef !important;
}

[data-theme="dark"] .table-hover tbody tr:hover {
  background-color: #1a1a1a !important;
}

[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) {
  background-color: #212529 !important;
}

[data-theme="dark"] .stats-box,
[data-theme="dark"] .statistic-box,
[data-theme="dark"] .statistics-box,
[data-theme="dark"] .stat-card {
  background-color: #2c2c2c !important;
  border-color: #495057 !important;
  color: #e9ecef !important;
}

[data-theme="dark"] .stats-box h3,
[data-theme="dark"] .stats-box h4,
[data-theme="dark"] .statistic-box h3,
[data-theme="dark"] .statistic-box h4,
[data-theme="dark"] .statistics-box h3,
[data-theme="dark"] .statistics-box h4,
[data-theme="dark"] .stat-card h3,
[data-theme="dark"] .stat-card h4 {
  color: #e9ecef !important;
}

[data-theme="dark"] .stats-box p,
[data-theme="dark"] .statistic-box p,
[data-theme="dark"] .statistics-box p,
[data-theme="dark"] .stat-card p {
  color: #b8b8b8 !important;
}

[data-theme="dark"] #caseListContainer {
  background-color: transparent !important;
}

[data-theme="dark"] #caseListContainer.grid-view {
  background-color: transparent !important;
}

[data-theme="dark"] .card {
  background-color: #2c2c2c !important;
  border-color: #495057 !important;
}

[data-theme="dark"] .card-header {
  background-color: #1a1a1a !important;
  border-bottom: 1px solid #495057 !important;
  color: #e9ecef !important;
}

[data-theme="dark"] .card-body {
  color: #e9ecef !important;
}

[data-theme="dark"] .btn-primary {
  background-color: #0d6efd !important;
  border-color: #0d6efd !important;
  color: #ffffff !important;
}

[data-theme="dark"] .btn-outline-primary {
  background-color: transparent !important;
  border-color: #0d6efd !important;
  color: #0d6efd !important;
}

[data-theme="dark"] .btn-outline-primary:hover {
  background-color: #0d6efd !important;
  color: #ffffff !important;
}

[data-theme="dark"] .btn-outline-secondary {
  background-color: transparent !important;
  border-color: #6c757d !important;
  color: #adb5bd !important;
}

[data-theme="dark"] .btn-outline-secondary:hover {
  background-color: #6c757d !important;
  border-color: #6c757d !important;
  color: #ffffff !important;
}

[data-theme="dark"] .bg-white {
  background-color: #1a1a1a !important;
}

[data-theme="dark"] .alert {
  background-color: #2c2c2c !important;
  border-color: #495057 !important;
  color: #e9ecef !important;
}

[data-theme="dark"] .modal-content {
  background-color: #2c2c2c !important;
  border-color: #495057 !important;
}

[data-theme="dark"] .modal-header {
  background-color: #1a1a1a !important;
  border-bottom: 1px solid #495057 !important;
}

[data-theme="dark"] .modal-footer {
  background-color: #1a1a1a !important;
  border-top: 1px solid #495057 !important;
}

[data-theme="dark"] .dropdown-menu {
  background-color: #2c2c2c !important;
  border-color: #495057 !important;
}

[data-theme="dark"] .dropdown-item {
  color: #e9ecef !important;
}

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

/* Link colors - use CSS variable so brand CSS can override */
[data-theme="dark"] a {
  color: var(--primary-color, #4da3ff);
}

[data-theme="dark"] a:hover {
  color: var(--primary-hover, #80bdff);
}

[data-theme="dark"] .navbar-brand svg .st0 {
  fill: #ffffff !important;
}

[data-theme="dark"] .navbar-brand svg path:not(.st0) {
  fill: #ffffff !important;
}

[data-theme="dark"] .navbar-logo-light {
  display: none !important;
}

[data-theme="dark"] .navbar-logo-dark {
  display: inline-block !important;
}

[data-theme="light"] .navbar-logo-light {
  display: inline-block !important;
}

[data-theme="light"] .navbar-logo-dark {
  display: none !important;
}

[data-theme="dark"] #dropdownMenu,
[data-theme="dark"] #dropdownMenuUB {
  background: #2c2c2c !important;
  border-color: #495057 !important;
}

[data-theme="dark"] #dropdownMenu > div:first-child,
[data-theme="dark"] #dropdownMenuUB > div:first-child {
  background: linear-gradient(135deg, #1a1a1a 0%, #2c2c2c 100%) !important;
  border-bottom-color: #495057 !important;
}

[data-theme="dark"] #dropdownMenu > div:first-child > div:first-child,
[data-theme="dark"] #dropdownMenuUB > div:first-child > div:first-child {
  color: #e9ecef !important;
}

[data-theme="dark"] #dropdownMenu > div:first-child > div:last-child,
[data-theme="dark"] #dropdownMenuUB > div:first-child > div:last-child {
  color: #adb5bd !important;
}

[data-theme="dark"] #dropdownMenu a,
[data-theme="dark"] #dropdownMenuUB a {
  color: #dc3545 !important;
  border-top-color: #495057 !important;
}

[data-theme="dark"] #dropdownMenu a:hover,
[data-theme="dark"] #dropdownMenuUB a:hover {
  background-color: #1a1a1a !important;
}
