/* ===== DARK MODE STYLES ===== */

/* Dark mode variables */
:root {
  --bg-light: #ffffff;
  --bg-dark: #0e0e0e;
  --text-light: #333333;
  --text-dark: #e0e0e0;
  --card-light: #ffffff;
  --card-dark: #2d2d2d;
  --card-header-dark: #666666;
  --border-light: #dee2e6;
  --border-dark: #404040;
  --input-bg-light: #ffffff;
  --input-bg-dark: #2d2d2d;
  --navbar-light: #ffffff;
  --navbar-dark: #3d3d3d;
}

/* Dark mode toggle button */
.dark-mode-toggle {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  color: white;
  font-size: 20px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dark-mode-toggle:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

.dark-mode-toggle:active {
  transform: scale(0.95);
}

/* Dark mode styles */
body.dark-mode {
  background: var(--bg-dark)!important;
  color: var(--text-dark)!important;
}

body.dark-mode .navbar {
  background: var(--navbar-dark) !important;
  border-bottom: 1px solid var(--border-dark);
}

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

body.dark-mode .card {
  background-color: var(--card-dark);
  border-color: var(--border-dark);
  color: var(--text-dark);
}

body.dark-mode .card-header {
  background: var(--card-header-dark);
  border-color: var(--border-dark);
}

body.dark-mode .menu-card:hover {
  box-shadow: 0 8px 16px rgba(255, 255, 255, 0.1);
}

body.dark-mode .menu-card .card-title {
  color: var(--text-dark);
}

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

body.dark-mode .form-control,
body.dark-mode .form-select {
  background-color: var(--input-bg-dark);
  border-color: var(--border-dark);
  color: var(--text-dark);
}

body.dark-mode .form-control:focus,
body.dark-mode .form-select:focus {
  background-color: var(--input-bg-dark);
  border-color: #667eea;
  color: var(--text-dark);
}

body.dark-mode .modal-content {
  background-color: var(--card-dark);
  color: var(--text-dark);
}

body.dark-mode .modal-header {
  border-bottom-color: var(--border-dark);
}

body.dark-mode .modal-footer {
  border-top-color: var(--border-dark);
  background: var(--card-dark);
}

body.dark-mode .table {
  color: var(--text-dark);
}

body.dark-mode .table thead th {
  border-color: var(--border-dark);
  background-color: #2d2d2d;
}

body.dark-mode .table tbody tr {
  border-color: var(--border-dark);
}

body.dark-mode .table tbody tr:hover {
  background-color: #333333;
}

body.dark-mode .bg-light {
  background-color: #2d2d2d !important;
}

body.dark-mode .text-muted {
  color: #a0a0a0 !important;
}

body.dark-mode .border {
  border-color: var(--border-dark) !important;
}

body.dark-mode .alert-info {
  background-color: #1a3a52;
  border-color: #2a5a82;
  color: #a8d5ff;
}

body.dark-mode .alert-warning {
  background-color: #4a3a1a;
  border-color: #7a6a2a;
  color: #ffd8a8;
}

body.dark-mode .alert-success {
  background-color: #1a4a2a;
  border-color: #2a7a4a;
  color: #a8ffc8;
}

body.dark-mode .alert-danger {
  background-color: #4a1a1a;
  border-color: #7a2a2a;
  color: #ffa8a8;
}

/* Dropdown menus in dark mode */
body.dark-mode .dropdown-menu {
  background-color: var(--card-dark);
  border-color: var(--border-dark);
}

body.dark-mode .dropdown-item {
  color: var(--text-dark);
}

body.dark-mode .dropdown-item:hover {
  background-color: #404040;
  color: #ffffff;
}

/* Badges in dark mode */
body.dark-mode .badge {
  background-color: #404040;
  color: var(--text-dark);
}

/* List group in dark mode */
body.dark-mode .list-group-item {
  background-color: var(--card-dark);
  border-color: var(--border-dark);
  color: var(--text-dark);
}

/* Buttons in dark mode */
body.dark-mode .btn-secondary {
  background-color: #404040;
  border-color: #505050;
}

body.dark-mode .btn-secondary:hover {
  background-color: #505050;
  border-color: #606060;
}

/* Smooth transition for dark mode */
body,
.navbar,
.card,
.form-label,
.form-control,
.form-select,
.modal-content,
.table,
.alert,
.dropdown-menu,
.list-group-item {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Icon rotation animation */
.dark-mode-toggle i {
  transition: transform 0.3s ease;
}

body.dark-mode .dark-mode-toggle i {
  transform: rotate(180deg);
}

body.dark-mode .btn-outline-primary {
  border-color: #4a70de;
  color: #4a70de;
}

/* country edit dropdown */
body.dark-mode .v-select:focus-within .vs__dropdown-toggle {
  background-color: var(--input-bg-dark);
  border-color: var(--border-dark);
  color: var(--text-dark);
}

body.dark-mode .vs__dropdown-toggle {
  border: 2px solid var(--border-dark);
  background-color: var(--input-bg-dark);
}

body.dark-mode .vs__selected {
  color: var(--text-dark);
}

body.dark-mode .vs__open-indicator {
  fill: var(--text-dark);
}

body.dark-mode .vs__search, .vs__search:focus {
  color: var(--text-dark);
  background-color: var(--input-bg-dark);
}

body.dark-mode .vs__dropdown-menu {
  background-color: var(--input-bg-dark);
}

body.dark-mode .table {
  --bs-table-color: var(--text-dark);
  --bs-table-bg: var(--card-dark);
}

/* ===== CAPTURE PAGE RESULTS SECTION ===== */

/* Accordion items */
body.dark-mode .accordion-item {
  background-color: var(--card-dark);
  border-color: var(--border-dark);
}

body.dark-mode .accordion-button {
  background-color: #3d3d3d;
  color: var(--text-dark);
  border-color: var(--border-dark);
}

body.dark-mode .accordion-button:not(.collapsed) {
  background-color: #4a4a4a;
  color: var(--text-dark);
  box-shadow: inset 0 -1px 0 var(--border-dark);
}

body.dark-mode .accordion-button:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 0.25rem rgba(102, 126, 234, 0.25);
}

body.dark-mode .accordion-button::after {
  filter: brightness(0) invert(1);
}

body.dark-mode .accordion-body {
  background-color: var(--card-dark);
  color: var(--text-dark);
}

/* Result section headers */
body.dark-mode .text-primary {
  color: #6b8aff !important;
}

body.dark-mode .text-success {
  color: #6bff8a !important;
}

body.dark-mode .text-warning {
  color: #ffb86b !important;
}

body.dark-mode .text-info {
  color: #6bddff !important;
}

body.dark-mode .border-bottom {
  border-bottom-color: var(--border-dark) !important;
}

/* Result card images */
body.dark-mode .card .card-img-top,
body.dark-mode .img-fluid {
  border-color: var(--border-dark);
  opacity: 0.95;
}

/* Small labels and icons */
body.dark-mode .small,
body.dark-mode small {
  color: #b0b0b0;
}

/* Form inputs in results */
body.dark-mode .accordion-body .form-control::placeholder {
  color: #707070;
  opacity: 1;
}

/* Card headers with background colors */
body.dark-mode .card-header.bg-primary {
  background-color: #4a5a9a !important;
  color: #ffffff !important;
}

body.dark-mode .card-header.bg-success {
  background-color: #3a7a4a !important;
  color: #ffffff !important;
}

body.dark-mode .card-header.bg-warning {
  background-color: #8a6a2a !important;
  color: #ffffff !important;
}

body.dark-mode .card-header.bg-info {
  background-color: #2a6a8a !important;
  color: #ffffff !important;
}

/* Processing indicator */
body.dark-mode .spinner-border {
  color: #6b8aff;
}

body.dark-mode .progress {
  background-color: #2d2d2d;
  border: 1px solid var(--border-dark);
}

body.dark-mode .progress-bar {
  background-color: #6b8aff;
}

/* Selected images preview cards */
body.dark-mode .card.border-0 {
  background-color: #3d3d3d;
}

/* Duplicate modal specific styles */
body.dark-mode .modal-dialog .card.border-primary {
  border-color: #4a70de !important;
}

body.dark-mode .modal-dialog .card.border-success {
  border-color: #3a9a5a !important;
}

body.dark-mode .modal-header.bg-warning {
  background-color: #8a6a2a !important;
  color: #ffffff !important;
}

/* Scan mode selection */
body.dark-mode .btn-check:checked + .btn-outline-primary {
  background-color: #4a70de;
  border-color: #4a70de;
  color: #ffffff;
}

body.dark-mode .btn-check:checked + .btn-outline-success {
  background-color: #3a9a5a;
  border-color: #3a9a5a;
  color: #ffffff;
}

body.dark-mode .btn-outline-success {
  border-color: #3a9a5a;
  color: #3a9a5a;
}

body.dark-mode .btn-outline-success:hover {
  background-color: #3a9a5a;
  border-color: #3a9a5a;
  color: #ffffff;
}

/* Camera container */
body.dark-mode .camera-container {
  background: #000000 !important;
}

body.dark-mode .camera-container .form-select {
  background-color: rgba(45, 45, 45, 0.75);
  color: var(--text-dark);
  border-color: var(--border-dark);
}

/* Alert boxes in results */
body.dark-mode .alert-info .alert-heading {
  color: #a8d5ff;
}

/* Country option in dropdown */
body.dark-mode .country-option {
  color: var(--text-dark);
}

body.dark-mode .country-flag {
  opacity: 1;
}

/* Textarea in results */
body.dark-mode textarea.form-control {
  background-color: var(--input-bg-dark);
  color: var(--text-dark);
  border-color: var(--border-dark);
}

body.dark-mode textarea.form-control:focus {
  background-color: var(--input-bg-dark);
  border-color: #667eea;
  color: var(--text-dark);
}

/* Card footer */
body.dark-mode .card-footer {
  background-color: #2d2d2d;
  border-top-color: var(--border-dark);
}

/* Buttons in results section */
body.dark-mode .btn-primary {
  background-color: #4a70de;
  border-color: #4a70de;
}

body.dark-mode .btn-primary:hover {
  background-color: #5a80ee;
  border-color: #5a80ee;
}

body.dark-mode .btn-success {
  background-color: #3a9a5a;
  border-color: #3a9a5a;
}

body.dark-mode .btn-success:hover {
  background-color: #4aaa6a;
  border-color: #4aaa6a;
}

body.dark-mode .btn-danger {
  background-color: #aa3a3a;
  border-color: #aa3a3a;
}

body.dark-mode .btn-danger:hover {
  background-color: #ba4a4a;
  border-color: #ba4a4a;
}

body.dark-mode .btn-warning {
  background-color: #aa8a3a;
  border-color: #aa8a3a;
  color: #ffffff;
}

body.dark-mode .btn-warning:hover {
  background-color: #ba9a4a;
  border-color: #ba9a4a;
  color: #ffffff;
}