/* Dark Mode Styles for Blood Center Management App */

/* Dark theme CSS variables */
[data-theme="dark"] {
  --primary-color: #ff6b6b;
  --secondary-color: #adb5bd;
  --success-color: #51cf66;
  --info-color: #22d3ee;
  --warning-color: #ffd43b;
  --danger-color: #ff6b6b;
  --light-color: #1a1a1a;
  --dark-color: #fff;
  
  /* Dark theme specific */
  --blood-red: #ff4757;
  --plasma-yellow: #ffa502;
  --platelet-blue: #3742fa;
  --sidebar-bg: #2d2d2d;
  --header-bg: #343a40;
  --card-shadow: 0 0.125rem 0.25rem rgb(0 0 0 / 30%);
  --border-color: #495057;
  
  /* Clinical dark mode */
  --clinic-primary: #4da6ff;
  --clinic-secondary: #33c3ff;
  --clinic-accent: #ff6b6b;
  --clinic-light: #1a2d4d;
  --clinic-border: #495057;
  --clinic-gray-light: #495057;
  --clinic-gray-dark: #ddd;
}

/* Dark mode body */
[data-theme="dark"] body {
  background-color: var(--light-color);
  color: var(--dark-color);
}

/* Dark mode header */
[data-theme="dark"] .header {
  background: var(--header-bg);
  border-bottom-color: var(--border-color);
}

/* Dark mode sidebar */
[data-theme="dark"] .sidebar {
  background: var(--sidebar-bg);
  border-right-color: var(--border-color);
}

/* Combined nav-link rules to avoid descending specificity conflicts */
[data-theme="dark"] .navbar-nav .nav-link,
[data-theme="dark"] .sidebar .nav-link {
  color: var(--dark-color);
}

[data-theme="dark"] .navbar-nav .nav-link:hover,
[data-theme="dark"] .sidebar .nav-link:hover {
  color: var(--primary-color);
  background-color: rgb(255 107 107 / 10%);
}

[data-theme="dark"] .navbar-nav .nav-link.active,
[data-theme="dark"] .sidebar .nav-link.active {
  color: var(--primary-color);
  background-color: rgb(255 107 107 / 15%);
}

/* Dark mode cards */
[data-theme="dark"] .card {
  background-color: #343a40;
  border-color: var(--border-color);
  color: var(--dark-color);
}

[data-theme="dark"] .card-header {
  background-color: #495057;
  border-bottom-color: var(--border-color);
  color: var(--dark-color);
}

/* Dark mode tables */
[data-theme="dark"] .table {
  color: var(--dark-color);
}

[data-theme="dark"] .table thead th {
  background-color: #495057;
  border-bottom-color: var(--border-color);
  color: var(--dark-color);
}

[data-theme="dark"] .table tbody tr:hover {
  background-color: rgb(255 107 107 / 5%);
}

[data-theme="dark"] .table-filters {
  background: #343a40;
  border-color: var(--border-color);
}

/* Dark mode forms */
[data-theme="dark"] .form-control {
  background-color: #495057;
  border-color: var(--border-color);
  color: var(--dark-color);
}

[data-theme="dark"] .form-control:focus {
  background-color: #495057;
  border-color: var(--primary-color);
  color: var(--dark-color);
  box-shadow: 0 0 0 0.2rem rgb(255 107 107 / 25%);
}

[data-theme="dark"] .form-control::placeholder {
  color: #adb5bd;
}

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

[data-theme="dark"] .form-select {
  background-color: #495057;
  border-color: var(--border-color);
  color: var(--dark-color);
}

/* Dark mode modals */
[data-theme="dark"] .modal-content {
  background-color: #343a40;
  color: var(--dark-color);
}

[data-theme="dark"] .modal-header {
  background-color: #495057;
  border-bottom-color: var(--border-color);
}

[data-theme="dark"] .modal-footer {
  border-top-color: var(--border-color);
}

/* Dark mode buttons */
[data-theme="dark"] .btn-primary {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

[data-theme="dark"] .btn-primary:hover {
  background-color: #ff5252;
  border-color: #ff5252;
}

[data-theme="dark"] .btn-outline-primary {
  color: var(--primary-color);
  border-color: var(--primary-color);
}

[data-theme="dark"] .btn-outline-primary:hover {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: white;
}

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

[data-theme="dark"] .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

/* Dark mode alerts */
[data-theme="dark"] .alert-success {
  background-color: rgb(81 207 102 / 10%);
  border-color: #51cf66;
  color: #51cf66;
}

[data-theme="dark"] .alert-warning {
  background-color: rgb(255 212 59 / 10%);
  border-color: #ffd43b;
  color: #ffd43b;
}

[data-theme="dark"] .alert-danger {
  background-color: rgb(255 107 107 / 10%);
  border-color: #ff6b6b;
  color: #ff6b6b;
}

[data-theme="dark"] .alert-info {
  background-color: rgb(34 211 238 / 10%);
  border-color: #22d3ee;
  color: #22d3ee;
}

/* Dark mode status badges - adjust for dark theme */
[data-theme="dark"] .status-available { 
  background-color: rgb(81 207 102 / 20%); 
  color: #51cf66; 
}

[data-theme="dark"] .status-processing { 
  background-color: rgb(255 212 59 / 20%); 
  color: #ffd43b; 
}

[data-theme="dark"] .status-expired { 
  background-color: rgb(255 107 107 / 20%); 
  color: #ff6b6b; 
}

[data-theme="dark"] .status-issued { 
  background-color: rgb(34 211 238 / 20%); 
  color: #22d3ee; 
}

/* Dark mode dropdowns */
[data-theme="dark"] .dropdown-menu {
  background-color: #343a40;
  border-color: var(--border-color);
}

[data-theme="dark"] .dropdown-item {
  color: var(--dark-color);
}

[data-theme="dark"] .dropdown-item:hover {
  background-color: rgb(255 107 107 / 10%);
  color: var(--primary-color);
}

[data-theme="dark"] .dropdown-divider {
  border-top-color: var(--border-color);
}

/* Dark mode pagination */
[data-theme="dark"] .page-link {
  background-color: #343a40;
  border-color: var(--border-color);
  color: var(--dark-color);
}

[data-theme="dark"] .page-link:hover {
  background-color: rgb(255 107 107 / 10%);
  border-color: var(--primary-color);
  color: var(--primary-color);
}

[data-theme="dark"] .page-item.active .page-link {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

/* Dark mode toasts */
[data-theme="dark"] .toast {
  background-color: #343a40;
  color: var(--dark-color);
}

[data-theme="dark"] .toast-header {
  background-color: #495057;
  color: var(--dark-color);
}

/* Theme toggle button */
.theme-toggle {
  background: none;
  border: 1px solid var(--border-color, #dee2e6);
  border-radius: var(--border-radius);
  padding: 0.375rem 0.75rem;
  color: var(--dark-color, #212529);
  transition: all 0.3s ease;
}

.theme-toggle:hover {
  background-color: rgb(var(--primary-color-rgb, 220, 53, 69), 0.1);
  border-color: var(--primary-color);
  color: var(--primary-color);
}

[data-theme="dark"] .theme-toggle {
  border-color: var(--border-color);
  color: var(--dark-color);
}

[data-theme="dark"] .theme-toggle:hover {
  background-color: rgb(255 107 107 / 10%);
  border-color: var(--primary-color);
  color: var(--primary-color);
}

/* Dark mode text colors */
[data-theme="dark"] .text-muted {
  color: #adb5bd !important;
}

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

/* Dark mode borders */
[data-theme="dark"] .border {
  border-color: var(--border-color) !important;
}

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

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

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

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