/* Portal Theme Variables and Dark Mode Support */

:root {
  --brand-primary: #1d6349;
  --brand-secondary: #2a7c5f;
  --brand-light: #4a9d6f;
  --brand-accent: #e8f5e8;
  --brand-dark: #0f2922;
  --brand-warning: #fec724;
  --brand-warning-bg: #fff8e1;

  /* Light mode colors */
  --bg-body: #eeeeee;
  --bg-surface: #fbfbfb;
  --text-primary: #212529;
  --text-secondary: #6c757d;
  --border-color: #dee2e6;
  --card-bg: #fbfbfb;
  --navbar-bg: #1d6349;
  --navbar-text: #ffffff;
}

[data-bs-theme="dark"] {
  --brand-primary: #2a7c5f;
  --brand-secondary: #4a9d6f;
  --brand-light: #6bb886;
  --brand-accent: #1a3e2a;
  --brand-dark: #0f2922;
  --brand-warning: #fec724;
  --brand-warning-bg: #3d3016;

  /* Dark mode colors */
  --bg-body: #1a1d29;
  --bg-surface: #2d3748;
  --text-primary: #f7fafc;
  --text-secondary: #a0aec0;
  --border-color: #4a5568;
  --card-bg: #2d3748;
  --navbar-bg: #1d6349;
  --navbar-text: #ffffff;

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

/* Apply custom colors */
body {
  background-color: var(--bg-body);
  color: var(--text-primary);
}

.card {
  background-color: var(--card-bg);
  border-color: var(--border-color);
  color: var(--text-primary);
}

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

.table {
  --bs-table-bg: var(--card-bg);
  --bs-table-color: var(--text-primary);
}

.table-light {
  --bs-table-bg: var(--bg-surface);
  --bs-table-color: var(--text-primary);
}

[data-bs-theme="dark"] .table-light {
  --bs-table-bg: #374151;
  --bs-table-color: var(--text-primary);
}

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

/* Primary buttons and elements */
.btn-primary {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
}

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

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

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

/* Success/Active states - use green variants */
.btn-success {
  background-color: var(--brand-secondary);
  border-color: var(--brand-secondary);
  color: white;
}

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

.bg-success {
  background-color: var(--brand-secondary) !important;
  color: white !important;
}

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

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

/* Info states - use lighter green */
.btn-info {
  background-color: var(--brand-light);
  border-color: var(--brand-light);
  color: white;
}

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

.bg-info {
  background-color: var(--brand-light) !important;
  color: white !important;
}

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

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

/* Resource type badges - all use green variants */
.badge.bg-primary {
  background-color: var(--brand-primary) !important;
  color: white !important;
}

/* Warnings only - use yellow sparingly */
.badge.bg-warning {
  background-color: var(--brand-warning) !important;
  color: #000 !important;
}

.btn-warning {
  background-color: var(--brand-warning);
  border-color: var(--brand-warning);
  color: #000;
}

.btn-warning:hover {
  background-color: #e6b520;
  border-color: #e6b520;
  color: #000;
}

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

.alert-warning {
  background-color: var(--brand-warning-bg);
  border-color: var(--brand-warning);
  color: #8a6914;
}

[data-bs-theme="dark"] .alert-warning {
    background-color: var(--brand-warning-bg);
    border-color: var(--brand-warning);
    color: var(--brand-warning);
}

/* Info alerts use light green */
.alert-info {
  background-color: var(--brand-accent);
  border-color: var(--brand-light);
  color: var(--brand-dark);
}

[data-bs-theme="dark"] .alert-info {
  background-color: var(--brand-accent);
  border-color: var(--brand-light);
  color: var(--text-primary);
}

/* Display elements */
.display-4 {
  color: var(--brand-primary) !important;
}

/* Secondary/disabled elements stay neutral */
.badge.bg-secondary {
  background-color: #6c757d !important;
  color: #fff !important;
}

/* Dark Mode Form Controls */
[data-bs-theme="dark"] .form-control {
  background-color: #374151;
  border-color: var(--border-color);
  color: var(--text-primary);
}

[data-bs-theme="dark"] .form-control:focus {
  background-color: #374151;
  border-color: var(--brand-light);
  color: var(--text-primary);
  box-shadow: 0 0 0 0.2rem rgba(74, 157, 111, 0.25);
}

[data-bs-theme="dark"] .form-control::placeholder {
  color: var(--text-secondary);
}

[data-bs-theme="dark"] .form-text {
  color: var(--text-secondary);
}

[data-bs-theme="dark"] .form-label {
  color: var(--text-primary);
}

[data-bs-theme="dark"] .form-check-label {
  color: var(--text-primary);
}

[data-bs-theme="dark"] .alert-danger {
  background-color: #3d1a1a;
  border-color: #dc3545;
  color: #f5c6cb;
}

/* Custom form styles for proxy mapping form in dark mode */
[data-bs-theme="dark"] .form-section {
  background: var(--card-bg) !important;
  border-color: var(--border-color) !important;
}

[data-bs-theme="dark"] .form-section h3 {
  color: var(--text-primary) !important;
}

[data-bs-theme="dark"] .form-input {
  background-color: #374151 !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

[data-bs-theme="dark"] .form-input:focus {
  border-color: var(--brand-light) !important;
  box-shadow: 0 0 0 3px rgba(74, 157, 111, 0.1) !important;
}

[data-bs-theme="dark"] .form-help {
  color: var(--text-secondary) !important;
}

[data-bs-theme="dark"] .checkbox-label {
  color: var(--text-primary) !important;
}

[data-bs-theme="dark"] .preview-card {
  background-color: var(--bg-surface) !important;
  border-color: var(--border-color) !important;
}

[data-bs-theme="dark"] .preview-item {
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

[data-bs-theme="dark"] .preview-value {
  background-color: var(--card-bg) !important;
  color: var(--text-primary) !important;
}

[data-bs-theme="dark"] .traffic-flow h4 {
  color: var(--text-primary) !important;
}

[data-bs-theme="dark"] .flow-step {
  background: var(--card-bg) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

[data-bs-theme="dark"] .flow-step strong {
  color: var(--text-secondary) !important;
}

[data-bs-theme="dark"] .flow-arrow {
  color: var(--text-secondary) !important;
}

[data-bs-theme="dark"] .form-actions {
  border-color: var(--border-color) !important;
}

[data-bs-theme="dark"] .page-header h1 {
  color: var(--text-primary) !important;
}

[data-bs-theme="dark"] .page-description {
  color: var(--text-secondary) !important;
}

[data-bs-theme="dark"] .error-messages {
  background-color: #3d1a1a !important;
  color: #f5c6cb !important;
  border: 1px solid #dc3545 !important;
  padding: 1rem !important;
  border-radius: 0.375rem !important;
  margin-bottom: 1.5rem !important;
}

[data-bs-theme="dark"] .error-messages h3 {
  color: #f5c6cb !important;
}

[data-bs-theme="dark"] .error-messages ul {
  color: #f5c6cb !important;
}

/* Account summary cards in dark mode */
[data-bs-theme="dark"] .bg-light {
  background-color: var(--bg-surface) !important;
  color: var(--text-primary) !important;
}

[data-bs-theme="dark"] .input-group-text {
  background-color: #374151;
  border-color: var(--border-color);
  color: var(--text-primary);
}

[data-bs-theme="dark"] .form-control:disabled {
  background-color: #4a5568;
  border-color: var(--border-color);
  color: var(--text-secondary);
}