/* SwiftDrone Dark Mode - Navy Theme */
/* Note: Dark mode variables now in variables.css (loaded first) */
/* Accent color: Emerald Green (#10B981) for sustainability/future-oriented feel */

/* Base Elements */
html.dark-mode body {
  background-color: var(--bg-primary);
  background-image: url('/static/images/drone-hero.png');
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 60% auto;
  background-attachment: fixed;
  color: var(--text-primary);
}

/* Navbar Dark Mode - uses same variables as light mode for consistency */
/* No override needed - navbar uses --navbar-bg-* variables which are constant */

html.dark-mode .navbar-brand {
  background: transparent;
  color: var(--navbar-text);
}

html.dark-mode .navbar-brand:hover {
  background: var(--white-overlay-5);
}

/* Sidebar Dark Mode */
html.dark-mode .sidebar,
html.dark-mode .offcanvas,
html.dark-mode .offcanvas-body {
  background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%) !important;
  border-right: 1px solid var(--border-color);
  color: var(--text-primary);
}

html.dark-mode .sidebar .nav-link {
  color: var(--text-secondary);
}

html.dark-mode .sidebar .nav-link:hover {
  color: var(--accent-primary);
  background-color: var(--white-overlay-5);
}

html.dark-mode .sidebar .nav-link.active {
  color: var(--accent-primary);
  background: linear-gradient(90deg, var(--white-overlay-15) 0%, var(--white-overlay-5) 100%);
}

html.dark-mode .sidebar-heading {
  color: var(--text-muted);
}

/* Main Content Dark Mode - transparent to show drone background */
html.dark-mode main {
  background: transparent;
}

/* Cards Dark Mode */
html.dark-mode .card {
  background: var(--card-bg) !important;
  border: 1px solid var(--border-color);
  color: var(--text-primary);
}

html.dark-mode .card-header {
  background-color: var(--bg-tertiary) !important;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-primary);
}

/* Tone down brand headers in dark mode - subtle Navy gradient instead of bright colors */
html.dark-mode .card-header-brand {
  background: linear-gradient(135deg, var(--bg-tertiary) 0%, var(--bg-secondary) 100%) !important;
  border-left: 3px solid var(--accent-primary);
  color: var(--text-primary);
}

/* Icon circle in brand cards - more visible in dark mode */
html.dark-mode .card-header-brand .bg-white.bg-opacity-25 {
  background-color: rgba(255, 255, 255, 0.15) !important;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

html.dark-mode .card-body {
  background-color: var(--card-bg) !important;
  color: var(--text-primary);
}

/* Buttons Dark Mode */
html.dark-mode .btn-primary {
  background: var(--btn-primary-dark);
  border: none;
  color: #ffffff;
  font-weight: 600;
  box-shadow: 0 2px 4px rgba(4, 120, 87, 0.3);
}

html.dark-mode .btn-primary:hover {
  background: var(--btn-primary-dark-hover);
  transform: var(--lift-sm);
  box-shadow: 0 4px 8px rgba(4, 120, 87, 0.4);
}

html.dark-mode .btn-outline-primary {
  color: var(--accent-primary);
  border-color: var(--accent-primary);
}

html.dark-mode .btn-outline-primary:hover {
  background-color: rgba(16, 185, 129, 0.15);
  color: var(--accent-primary);
}

html.dark-mode .btn-outline-secondary {
  color: var(--text-secondary);
  border-color: var(--border-color);
}

html.dark-mode .btn-link {
  color: var(--accent-primary);
}

/* Bright Orange CTA Button - for high-emphasis actions */
html.dark-mode .btn-cta,
html.dark-mode .btn-warning {
  background: linear-gradient(135deg, var(--brand-tertiary-dark) 0%, var(--brand-tertiary) 100%);
  border: none;
  color: #ffffff;
  box-shadow: 0 2px 4px rgba(var(--brand-tertiary-rgb), 0.3);
}

html.dark-mode .btn-cta:hover,
html.dark-mode .btn-warning:hover {
  background: var(--btn-cta-hover);
  color: #ffffff;
  transform: var(--lift-sm);
  box-shadow: 0 4px 8px rgba(var(--brand-tertiary-rgb), 0.4);
}

html.dark-mode .btn-outline-warning {
  color: var(--brand-tertiary) !important;
  border-color: var(--brand-tertiary) !important;
  background-color: transparent !important;
  transition: all 0.2s ease;
}

html.dark-mode .btn-outline-warning:hover,
html.dark-mode .btn-outline-warning:focus {
  background-color: transparent !important;
  border-color: var(--brand-tertiary) !important;
  color: var(--brand-tertiary) !important;
  font-weight: 600;
  transform: var(--lift-sm);
  box-shadow: 0 4px 12px rgba(var(--brand-tertiary-rgb), 0.3);
}

/* Forms Dark Mode */
html.dark-mode .form-control,
html.dark-mode .form-select {
  background-color: var(--input-bg);
  border-color: var(--input-border);
  color: var(--text-primary);
}

html.dark-mode .form-control:focus,
html.dark-mode .form-select:focus {
  background-color: var(--input-bg);
  border-color: var(--accent-primary);
  color: var(--text-primary);
  box-shadow: 0 0 0 0.25rem rgba(16, 185, 129, 0.25); /* Emerald Green */
}

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

html.dark-mode .form-label {
  color: var(--text-secondary);
}

/* Tables Dark Mode */
html.dark-mode .table {
  color: var(--text-primary);
  background-color: transparent;
}

html.dark-mode .table thead th {
  background-color: transparent;
  color: var(--text-primary);
  border-color: var(--border-color);
}

html.dark-mode .table tbody tr {
  border-color: var(--border-color);
  background-color: transparent !important;
}

html.dark-mode .table tbody tr td {
  background-color: transparent !important;
  color: var(--text-primary);
}

html.dark-mode .table-hover tbody tr:hover {
  background-color: var(--white-overlay-5) !important;
}

html.dark-mode .table-borderless td,
html.dark-mode .table-borderless th {
  background-color: transparent !important;
  color: var(--text-primary);
}

/* Alerts Dark Mode */
html.dark-mode .alert {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}

html.dark-mode .alert-success {
  background: linear-gradient(90deg, rgba(var(--bs-success-rgb), 0.2) 0%, var(--bg-tertiary) 100%);
  border-left: 4px solid var(--bs-success);
}

html.dark-mode .alert-danger,
html.dark-mode .alert-error {
  background: linear-gradient(90deg, rgba(var(--bs-danger-rgb), 0.2) 0%, var(--bg-tertiary) 100%);
  border-left: 4px solid var(--bs-danger);
}

html.dark-mode .alert-warning {
  background: linear-gradient(90deg, rgba(var(--bs-warning-rgb), 0.2) 0%, var(--bg-tertiary) 100%);
  border-left: 4px solid var(--bs-warning);
}

html.dark-mode .alert-info {
  background: linear-gradient(90deg, rgba(var(--bs-info-rgb), 0.2) 0%, var(--bg-tertiary) 100%);
  border-left: 4px solid var(--bs-info);
}

/* Badge Dark Mode */
html.dark-mode .badge.badge-available {
  background-color: transparent !important;
  border: 1px solid var(--brand-tertiary);
  color: var(--brand-tertiary);
}

html.dark-mode .badge.bg-secondary {
  background-color: rgba(var(--bs-secondary-rgb, 108, 117, 125), 0.3);
  color: var(--text-secondary);
}

html.dark-mode .badge.bg-warning {
  background-color: rgba(var(--bs-warning-rgb), 0.9);
  color: var(--text-on-warning); /* Keep black text for readability on yellow */
}

/* Info Toolbar Dark Mode */
html.dark-mode .info-toolbar {
  background: var(--card-bg);
  border-left-width: 4px;
}

html.dark-mode .info-toolbar .card-body {
  color: var(--text-primary);
}

/* Text Colors Dark Mode */
html.dark-mode .text-muted {
  color: var(--text-muted) !important;
}

html.dark-mode .text-dark {
  color: var(--text-primary);
}

html.dark-mode .text-secondary {
  color: var(--text-secondary);
}

/* Form Help Text Dark Mode */
html.dark-mode .form-text,
html.dark-mode .helptext,
html.dark-mode small,
html.dark-mode .small {
  color: var(--text-secondary);
}

/* List items and paragraphs */
html.dark-mode ul li,
html.dark-mode ol li,
html.dark-mode p {
  color: var(--text-primary);
}

/* Django error messages */
html.dark-mode .errorlist,
html.dark-mode .error,
html.dark-mode .invalid-feedback {
  color: var(--feedback-error);
}

html.dark-mode .valid-feedback {
  color: var(--feedback-success);
}

/* Override hardcoded black colors - !important needed to override inline styles */
html.dark-mode [style*="color: black"],
html.dark-mode [style*="color: #000"],
html.dark-mode [style*="color:#000"] {
  color: var(--text-primary) !important;
}

/* Footer Dark Mode */
html.dark-mode .footer-modern {
  background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
  border-top: 1px solid var(--border-color);
  color: var(--text-secondary);
}

/* Borders and Backgrounds - !important needed to override Bootstrap utilities */
html.dark-mode .border {
  border-color: var(--border-color) !important;
}

html.dark-mode .bg-light {
  background-color: var(--bg-tertiary) !important;
}

html.dark-mode .bg-white {
  background-color: var(--bg-secondary) !important;
}

html.dark-mode .bg-body-secondary {
  background-color: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
}

/* Smooth theme transitions */
html.dark-mode,
html.dark-mode * {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}