/**
 * ========================================
 * FLOW THEME - DARK MODE BOOTSTRAP
 * ========================================
 *
 * Bootstrap bileşenlerinin dark mode override'ları.
 * Backgrounds, Cards, Forms, Buttons, Navigation, Tables vb.
 */

/* ============================================
   DARK MODE - BACKGROUNDS
   ============================================ */

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

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

[data-theme="dark"] .bg-light-gray {
  background-color: var(--color-surface-secondary) !important;
}

/* ============================================
   DARK MODE - CARDS & ELEVATED SURFACES
   ============================================ */

[data-theme="dark"] .card {
  background-color: var(--color-surface-elevated);
  border-color: var(--color-border-default);
}

[data-theme="dark"] .modal-content {
  background-color: var(--color-surface-elevated);
  border-color: var(--color-border-default);
}

[data-theme="dark"] .dropdown-menu {
  background-color: var(--color-surface-elevated);
  border-color: var(--color-border-default);
}

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

[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus {
  background-color: var(--color-surface-tertiary);
  color: var(--color-text-primary);
}

/* ============================================
   DARK MODE - FORMS
   ============================================ */

[data-theme="dark"] .form-control {
  background-color: var(--color-surface-secondary);
  border-color: var(--color-border-default);
  color: var(--color-text-primary);
}

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

[data-theme="dark"] .form-select {
  background-color: var(--color-surface-secondary);
  border-color: var(--color-border-default);
  color: var(--color-text-primary);
}

/* Form select dropdown arrow (Bootstrap) */
[data-theme="dark"] .form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23f8fafc' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
}

/* ============================================
   DARK MODE - BORDERS
   ============================================ */

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

/* ============================================
   DARK MODE - BUTTONS
   ============================================ */

[data-theme="dark"] .btn-light {
  background-color: var(--color-surface-tertiary);
  border-color: var(--color-border-default);
  color: var(--color-text-primary);
}

[data-theme="dark"] .btn-light:hover {
  background-color: var(--color-surface-secondary);
}

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

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

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

/* ============================================
   DARK MODE - NAVIGATION
   ============================================ */

[data-theme="dark"] .nav-tabs {
  border-bottom-color: var(--color-border-default);
}

[data-theme="dark"] .nav-tabs .nav-link.active {
  background-color: var(--color-surface-primary);
  border-color: var(--color-border-default) var(--color-border-default) var(--color-surface-primary);
  color: var(--color-text-primary);
}

[data-theme="dark"] .nav-pills .nav-link {
  color: var(--color-text-secondary);
}

[data-theme="dark"] .nav-pills .nav-link.active {
  background-color: var(--te-color);
  color: #fff;
}

/* ============================================
   DARK MODE - PAGINATION
   ============================================ */

[data-theme="dark"] .page-link {
  background-color: var(--color-surface-secondary);
  border-color: var(--color-border-default);
  color: var(--color-text-primary);
}

[data-theme="dark"] .page-link:hover {
  background-color: var(--color-surface-tertiary);
  color: var(--color-text-primary);
}

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

/* ============================================
   DARK MODE - LISTS
   ============================================ */

[data-theme="dark"] .list-group-item {
  background-color: var(--color-surface-secondary);
  border-color: var(--color-border-default);
  color: var(--color-text-primary);
}

[data-theme="dark"] .list-group-item:hover {
  background-color: var(--color-surface-tertiary);
}

/* ============================================
   DARK MODE - TABLES
   ============================================ */

[data-theme="dark"] .table {
  color: var(--color-text-primary);
  --bs-table-bg: transparent;
  --bs-table-striped-bg: var(--color-surface-secondary);
  --bs-table-hover-bg: var(--color-surface-tertiary);
  border-color: var(--color-border-default);
}

[data-theme="dark"] .table > :not(caption) > * > * {
  background-color: var(--color-surface-primary);
  color: var(--color-text-primary);
  border-color: var(--color-border-default);
}

[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: var(--color-surface-secondary);
  color: var(--color-text-primary);
}

[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(even) > * {
  background-color: var(--color-surface-primary);
  color: var(--color-text-primary);
}

[data-theme="dark"] .table thead th {
  background-color: var(--color-surface-tertiary);
  color: var(--color-text-primary);
  border-color: var(--color-border-default);
}

/* ============================================
   DARK MODE - ACCORDIONS
   ============================================ */

[data-theme="dark"] .accordion-button {
  background-color: var(--color-surface-secondary);
  color: var(--color-text-primary);
}

[data-theme="dark"] .accordion-button:not(.collapsed) {
  background-color: var(--color-surface-tertiary);
  color: var(--color-text-primary);
}

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

[data-theme="dark"] .accordion-body {
  background-color: var(--color-surface-primary);
  color: var(--color-text-primary);
}

[data-theme="dark"] .accordion-item {
  background-color: var(--color-surface-primary);
  border-color: var(--color-border-default);
}

/* ============================================
   DARK MODE - PROGRESS
   ============================================ */

[data-theme="dark"] .progress {
  background-color: var(--color-surface-tertiary);
}

/* ============================================
   DARK MODE - SHADOWS
   ============================================ */

[data-theme="dark"] .shadow {
  box-shadow: var(--shadow-base) !important;
}

[data-theme="dark"] .shadow-sm {
  box-shadow: var(--shadow-sm) !important;
}

[data-theme="dark"] .shadow-lg {
  box-shadow: var(--shadow-lg) !important;
}

/* ============================================
   DARK MODE - BREADCRUMB
   ============================================ */

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

[data-theme="dark"] .breadcrumb-item.active a {
  color: var(--color-text-primary) !important;
}

/* ============================================
   DARK MODE - MODAL
   ============================================ */

[data-theme="dark"] .modal-body h1,
[data-theme="dark"] .modal-body p {
  color: var(--color-text-primary) !important;
}