/* -----------------------------
   Bootstrap
------------------------------ */

.bg-white,
.bg-light,
.card,
.navbar,
.modal-content,
.dropdown-menu,
.sidebar {
  background-color: var(--gp-surface) !important;
  color: var(--gp-text-main) !important;
  border-color: var(--gp-border) !important;
  box-shadow: var(--gp-elevation) !important;
}

/* Explicit dark theme class support for list groups */
.theme-dark .list-group-item {
  --bs-list-group-bg: var(--gp-surface);
  --bs-list-group-color: var(--gp-text-main);
  --bs-list-group-border-color: var(--gp-border);

  background-color: var(--bs-list-group-bg) !important;
  color: var(--bs-list-group-color) !important;
  border-color: var(--bs-list-group-border-color) !important;
}

/* Modifier for explicitly dark list items */
.list-group-item-dark {
  --bs-list-group-bg: rgba(255, 255, 255, 0.02);
  --bs-list-group-color: var(--gp-text-main);
  --bs-list-group-border-color: rgba(255, 255, 255, 0.06);

  background-color: var(--bs-list-group-bg) !important;
  color: var(--bs-list-group-color) !important;
  border-color: var(--bs-list-group-border-color) !important;
}

/* Card - Bootstrap variable defaults adapted to project design tokens */
.card {
  --bs-card-spacer-y: 1rem;
  --bs-card-spacer-x: 1rem;
  --bs-card-title-spacer-y: 0.5rem;
  --bs-card-title-color: var(--gp-text-main);
  --bs-card-subtitle-color: var(--gp-text-muted);
  --bs-card-border-width: var(--bs-border-width);
  --bs-card-border-color: var(--gp-border);
  --bs-card-border-radius: var(--gp-radius);
  --bs-card-box-shadow: var(--gp-elevation);
  --bs-card-inner-border-radius: calc(
    var(--bs-card-border-radius) - var(--bs-card-border-width)
  );
  --bs-card-cap-padding-y: 0.5rem;
  --bs-card-cap-padding-x: 1rem;
  --bs-card-cap-bg: var(--gp-surface-accent);
  --bs-card-cap-color: var(--gp-text-muted);
  --bs-card-height: auto;
  --bs-card-color: var(--gp-text-main);
  --bs-card-bg: var(--gp-surface);
  --bs-card-img-overlay-padding: 1rem;
  --bs-card-group-margin: 0.75rem;

  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: var(--bs-card-height);
  color: var(--bs-card-color);
  word-wrap: break-word;
  background-color: var(--bs-card-bg);
  background-clip: border-box;
  border: var(--bs-card-border-width) solid var(--bs-card-border-color);
  border-radius: var(--bs-card-border-radius);
  box-shadow: var(--bs-card-box-shadow);
}

.navbar-light .navbar-brand,
.navbar-light .nav-link,
.text-dark {
  color: var(--gp-text-main) !important;
}

.text-muted {
  color: var(--gp-text-muted) !important;
}

.btn-light {
  background-color: var(--gp-surface-soft) !important;
  color: var(--gp-text-main) !important;
  border: 1px solid var(--gp-border) !important;
}

/* Primary variant */
.btn-primary {
  background: var(--gp-primary) !important;
  color: #fff !important;
  border-color: var(--gp-primary) !important;
}

.btn-primary:hover,
.btn-primary:focus {
  background: var(--gp-primary-hover) !important;
  box-shadow: 0 10px 18px -6px rgba(0, 87, 255, 0.18) !important;
}

.modal-backdrop.show {
  background-color: rgba(0, 0, 0, 0.6) !important;
}

.dropdown-menu {
  min-width: 12rem;
}

.border,
.border-top,
.border-end {
  border-color: var(--gp-border) !important;
}

.content {
  background-color: transparent;
}

/* -----------------------------
   Modificadores de modo oscuro para tablas
   - Sobre escribe variables de Bootstrap
   - Funciona con la preferencia del sistema y la clase oscura explícita
------------------------------ */

/* Modifica especificamente */
.table,
.theme-dark .table {
  --bs-table-color: var(--gp-text-main, #e9ecef);
  --bs-table-bg: var(--gp-surface, #0f1318);
  --bs-table-border-color: var(--gp-border, rgba(255, 255, 255, 0.06));
  --bs-table-accent-bg: rgba(255, 255, 255, 0.02);
  --bs-table-striped-color: var(--gp-text-main, #e9ecef);
  --bs-table-striped-bg: rgba(255, 255, 255, 0.02);
  --bs-table-active-color: var(--gp-text-main, #e9ecef);
  --bs-table-active-bg: rgba(255, 255, 255, 0.04);
  --bs-table-hover-color: var(--gp-text-main, #e9ecef);
  --bs-table-hover-bg: rgba(255, 255, 255, 0.03);
}

/* Optional modifier class for explicitly dark tables */
.table-dark {
  --bs-table-color-type: dark;
  --bs-table-bg-type: dark;
  --bs-table-color-state: dark;
  --bs-table-bg-state: dark;
  --bs-table-color: var(--gp-text-main, #e9ecef);
  --bs-table-bg: rgba(255, 255, 255, 0.02);
  --bs-table-border-color: rgba(255, 255, 255, 0.06);
  --bs-table-accent-bg: rgba(255, 255, 255, 0.03);
  --bs-table-striped-color: var(--gp-text-main, #e9ecef);
  --bs-table-striped-bg: rgba(255, 255, 255, 0.02);
  --bs-table-active-color: var(--gp-text-main, #e9ecef);
  --bs-table-active-bg: rgba(255, 255, 255, 0.04);
  --bs-table-hover-color: var(--gp-text-main, #e9ecef);
  --bs-table-hover-bg: rgba(255, 255, 255, 0.03);
}

/* -----------------------------
   Bootstrap Dark Mode
------------------------------ */

@media (prefers-color-scheme: dark) {
  .table {
    --bs-table-color: var(--gp-text-main, #e9ecef);
    --bs-table-bg: var(--gp-surface, #0f1318);
    --bs-table-border-color: var(--gp-border, rgba(255, 255, 255, 0.06));
    --bs-table-accent-bg: rgba(255, 255, 255, 0.02);
    --bs-table-striped-color: var(--gp-text-main, #e9ecef);
    --bs-table-striped-bg: rgba(255, 255, 255, 0.02);
    --bs-table-active-color: var(--gp-text-main, #e9ecef);
    --bs-table-active-bg: rgba(255, 255, 255, 0.04);
    --bs-table-hover-color: var(--gp-text-main, #e9ecef);
    --bs-table-hover-bg: rgba(255, 255, 255, 0.03);
  }

  .card {
    --bs-card-spacer-y: 1rem;
    --bs-card-spacer-x: 1rem;
    --bs-card-title-spacer-y: 0.5rem;
    --bs-card-title-color: var(--gp-text-main);
    --bs-card-subtitle-color: var(--gp-text-muted);
    --bs-card-border-width: var(--bs-border-width);
    --bs-card-border-color: var(--gp-border);
    --bs-card-border-radius: var(--gp-radius);
    --bs-card-box-shadow: var(--gp-elevation);
    --bs-card-inner-border-radius: calc(
      var(--bs-card-border-radius) - var(--bs-card-border-width)
    );
    --bs-card-cap-padding-y: 0.5rem;
    --bs-card-cap-padding-x: 1rem;
    --bs-card-cap-bg: var(--gp-surface-accent);
    --bs-card-cap-color: var(--gp-text-muted);
    --bs-card-height: auto;
    --bs-card-color: var(--gp-text-main);
    --bs-card-bg: var(--gp-surface);
    --bs-card-img-overlay-padding: 1rem;
    --bs-card-group-margin: 0.75rem;

    color: var(--bs-card-color);
    background-color: var(--bs-card-bg);
    border-color: var(--bs-card-border-color);
    box-shadow: var(--bs-card-box-shadow);
  }

  .list-group-item {
    --bs-list-group-bg: var(--gp-surface);
    --bs-list-group-color: var(--gp-text-main);
    --bs-list-group-border-color: var(--gp-border);

    background-color: var(--bs-list-group-bg);
    color: var(--bs-list-group-color);
    border-color: var(--bs-list-group-border-color);
  }

  /* hover / focus / active states for dark list items */
  .list-group-item:hover,
  .list-group-item:focus {
    background-color: rgba(255, 255, 255, 0.03);
    color: var(--gp-text-main);
  }

  .list-group-item.active,
  .list-group-item.active:hover,
  .list-group-item.active:focus {
    background-color: var(--gp-primary);
    color: #fff;
    border-color: var(--gp-primary);
  }

  .form-control {
    color: var(--gp-text-main) !important;
  }
}