/* -----------------------------
   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;
}

.bg-primary {
  background-color: var(--gp-primary) !important;
}

.bg-secondary {
  background-color: var(--gp-surface-soft) !important;
}

.bg-tertiary {
  background-color: transparent !important;
}

.text-primary {
  color: var(--gp-primary) !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;
}

/* Form controls — adaptive theme (base) */
.form-control,
.form-select {
  color: var(--gp-text-main) !important;
  background-color: var(--gp-surface) !important;
  border-color: var(--gp-border) !important;
}

.form-control:focus,
.form-select:focus {
  color: var(--gp-text-main) !important;
  background-color: var(--gp-surface) !important;
  border-color: var(--gp-primary) !important;
  box-shadow: 0 0 0 0.2rem var(--gp-primary-soft) !important;
  outline: none !important;
}

/* Placeholder adaptativo — tema base (claro) */
.form-control::placeholder,
.form-select::placeholder {
  color: var(--gp-text-muted, #6c757d) !important;
  opacity: 0.7;
}

/* Primary variant */
.btn-primary {
  background: var(--gp-primary) !important;
  color: #fff !important;
  border-color: var(--gp-primary) !important;
}
.btn-primary:active {
  background: var(--gp-primary-active) !important;
}
.btn-primary:hover,
.btn-primary:focus {
  background: var(--gp-primary-hover) !important;
  box-shadow: 0 10px 18px -6px rgba(16, 185, 129, 0.18) !important;
}
.btn-primary:focus {
  box-shadow: 0 0 0 4px var(--gp-primary-soft) !important;
}
.btn-outline-primary {
  background-color: transparent !important;
  color: var(--gp-primary) !important;
  border: 1px solid var(--gp-primary) !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background-color: var(--gp-primary) !important;
  color: #fff !important;
  border-color: var(--gp-primary) !important;
}
.btn-outline-primary:focus {
  box-shadow: 0 0 0 4px var(--gp-primary-soft) !important;
}

/* Secondary Variant - use design tokens from app.css */
.btn-secondary {
  background: var(--gp-secondary) !important;
  color: #fff !important;
  border: 1px solid var(--gp-secondary) !important;
}
.btn-secondary:active {
  background: var(--gp-secondary-active) !important;
  border-color: var(--gp-secondary-active) !important;
}
.btn-secondary:hover,
.btn-secondary:focus {
  background: var(--gp-secondary-hover) !important;
  border-color: var(--gp-secondary-hover) !important;
  box-shadow: 0 10px 18px -6px rgba(16, 185, 129, 0.06) !important;
}
.btn-secondary:focus {
  box-shadow: 0 0 0 4px var(--gp-secondary-soft) !important;
}
.btn-outline-secondary {
  background-color: transparent !important;
  color: var(--gp-secondary) !important;
  border: 1px solid var(--gp-secondary) !important;
}
.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
  background-color: var(--gp-secondary) !important;
  color: #fff !important;
  border-color: var(--gp-secondary) !important;
}
.btn-outline-secondary:focus {
  box-shadow: 0 0 0 4px var(--gp-secondary-soft) !important;
}

/* Tertiary Variant - subtle actions use tertiary tokens */
.btn-tertiary {
  background-color: transparent !important;
  color: var(--gp-tertiary) !important;
  border: none !important;
}
.btn-tertiary:hover {
  color: var(--gp-tertiary-hover) !important;
  background-color: var(--gp-surface-soft) !important;
}
.btn-tertiary:focus {
  color: var(--gp-tertiary-hover) !important;
  box-shadow: 0 0 0 4px var(--gp-tertiary-soft) !important;
}

/* Success Button */
.btn-success {
  background-color: var(--gp-success) !important;
  color: #fff !important;
  border-color: var(--gp-success) !important;
}
.btn-success:hover,
.btn-success:focus {
  background-color: var(--gp-success-hover) !important;
  border-color: var(--gp-success-hover) !important;
}
.btn-outline-success {
  background-color: transparent !important;
  color: var(--gp-success) !important;
  border: 1px solid var(--gp-success) !important;
}
.btn-outline-success:hover,
.btn-outline-success:focus {
  background-color: var(--gp-success) !important;
  color: #fff !important;
  border-color: var(--gp-success) !important;
}

/* Danger Button */
.btn-danger {
  background-color: var(--gp-error) !important;
  color: #fff !important;
  border-color: var(--gp-error) !important;
}
.btn-danger:hover,
.btn-danger:focus {
  background-color: var(--gp-error-hover) !important;
  color: #fff !important;
  border-color: var(--gp-error-hover) !important;
}
.btn-outline-danger {
  background-color: transparent !important;
  color: var(--gp-error) !important;
  border: 1px solid var(--gp-error) !important;
}
.btn-outline-danger:hover,
.btn-outline-danger:focus {
  background-color: var(--gp-error) !important;
  color: #fff !important;
  border-color: var(--gp-error) !important;
}

/* Warning Button */
.btn-warning {
  background-color: var(--gp-warning) !important;
  color: #fff !important;
  border-color: var(--gp-warning) !important;
}
.btn-warning:hover,
.btn-warning:focus {
  background-color: var(--gp-warning-hover) !important;
  color: #fff !important;
  border-color: var(--gp-warning-hover) !important;
}
.btn-outline-warning {
  background-color: transparent !important;
  color: var(--gp-warning) !important;
  border: 1px solid var(--gp-warning) !important;
}
.btn-outline-warning:hover,
.btn-outline-warning:focus {
  background-color: var(--gp-warning) !important;
  color: #fff !important;
  border-color: var(--gp-warning) !important;
}

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

/* -----------------------------
   Blazored.Modal overrides
   — El CSS del paquete hardcodea #fff con scoped attribute selectors;
     se necesita !important para sobreescribir la especificidad.
------------------------------ */
.blazored-modal {
  background-color: var(--gp-surface) !important;
  border-color: var(--gp-border) !important;
  color: var(--gp-text-main) !important;
  box-shadow: var(--gp-elevation) !important;
}

.bm-title {
  color: var(--gp-text-main) !important;
}

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

.bm-close:hover {
  color: var(--gp-text-main) !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 {
  --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);
}

/* -----------------------------
   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;
  }

  .form-control::placeholder {
    color: var(--gp-text-muted) !important;
    opacity: 0.6;
  }

  .form-select {
    color: var(--gp-text-main) !important;
    background-color: var(--gp-surface) !important;
    border-color: var(--gp-border) !important;
    /* Chevron arrow — light color for dark backgrounds */
    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='%23adb5bd' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
  }

  .form-select::placeholder {
    color: var(--gp-text-muted) !important;
    opacity: 0.6;
  }

  /* Table header adjustments for dark theme: make thead more contrasted */
  .table thead,
  .table thead th,
  .table thead td {
    --bs-table-head-bg: rgba(255, 255, 255, 0.03);
    --bs-table-head-color: var(--gp-text-main);
    background-color: var(--bs-table-head-bg) !important;
    color: var(--bs-table-head-color) !important;
    border-color: var(--gp-border) !important;
  }

  /* Slightly stronger separation for header row */
  .table thead th {
    box-shadow: inset 0 -1px 0 0 var(--gp-border);
  }
}