/* ==========================================================================
   SOLON — Override selettivi Bootstrap 5
   ========================================================================== */

/* ---- Variabili Bootstrap che puntano alle nostre variabili ---- */
[data-theme="light"],
[data-theme="dark"] {
  --bs-primary: var(--accent);
  --bs-secondary: var(--txt2);
  --bs-success: var(--like);
  --bs-danger: var(--dislike);
  --bs-warning: #f59e0b;
  --bs-info: var(--doc);
  --bs-light: var(--surface2);
  --bs-dark: var(--bg);
  --bs-body-bg: var(--bg);
  --bs-body-color: var(--txt);
  --bs-border-color: var(--border);
  --bs-link-color: var(--accent);
  --bs-link-hover-color: var(--accent-txt);
}

/* ---- Form controls ---- */
.form-control,
.form-select {
  background-color: var(--surface2);
  color: var(--txt);
  border-color: var(--border);
  border-width: 0.5px;
}

.form-control:focus,
.form-select:focus {
  background-color: var(--surface2);
  color: var(--txt);
  border-color: var(--accent);
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--accent) 15%, transparent);
}

.form-control::placeholder {
  color: var(--txt3);
}

/* ---- Dropdown ---- */
.dropdown-menu {
  background-color: var(--surface);
  border: 0.5px solid var(--border);
  color: var(--txt);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

.dropdown-item {
  color: var(--txt2);
  border-radius: 6px;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--accent-bg);
  color: var(--accent-txt);
}

.dropdown-divider {
  border-color: var(--border);
}

.dropdown-header {
  color: var(--txt);
  font-weight: 600;
}

/* ---- Modal ---- */
.modal-content {
  background-color: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: 14px;
  color: var(--txt);
}

.modal-header {
  border-bottom: 0.5px solid var(--border);
}

.modal-footer {
  border-top: 0.5px solid var(--border);
}

/* ---- Card ---- */
.card {
  background-color: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: 14px;
  color: var(--txt);
}

/* ---- List group ---- */
.list-group-item {
  background-color: var(--surface);
  border-color: var(--border);
  color: var(--txt);
}

/* ---- Pagination ---- */
.page-link {
  background-color: var(--surface);
  border-color: var(--border);
  color: var(--accent);
}

.page-link:hover {
  background-color: var(--accent-bg);
  border-color: var(--border);
  color: var(--accent-txt);
}

/* ---- Table ---- */
.table {
  color: var(--txt);
  --bs-table-color: var(--txt);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--border);
}

/* ---- Accordion ---- */
.accordion-item {
  background-color: var(--surface);
  border-color: var(--border);
}

.accordion-button {
  background-color: var(--surface);
  color: var(--txt);
}

.accordion-button:not(.collapsed) {
  background-color: var(--accent-bg);
  color: var(--accent-txt);
}

.accordion-button::after {
  filter: invert(1) grayscale(100%) brightness(200%);
}

[data-theme="light"] .accordion-button::after {
  filter: none;
}

/* ---- Focus accessibile ---- */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

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

/* ---- Transizioni globali per cambio tema ---- */
body,
.card,
.modal-content,
.dropdown-menu,
.form-control,
.form-select,
.page-link,
.accordion-item,
.accordion-button,
.list-group-item,
.table {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}