# /static/css/bootstrap.css
/* ================================
   OVERRIDE BOOTSTRAP CON PALETTE LIGHT/DARK
   Le variabili sono definite in /static/css/global.css
   ================================ */

/* ================================
   LIGHT MODE (default)
   ================================ */

/* === BOTTONI PIENI === */
.btn-primary {
  --bs-btn-bg: var(--blue-primary);
  --bs-btn-border-color: var(--blue-primary);
  --bs-btn-color: var(--neutral-white);
  --bs-btn-hover-bg: var(--blue-secondary);
  --bs-btn-hover-border-color: var(--blue-secondary);
  --bs-btn-active-bg: var(--blue-dark);
  --bs-btn-active-border-color: var(--blue-dark);
}

.btn-secondary {
  --bs-btn-bg: var(--blue-light);
  --bs-btn-border-color: var(--blue-light);
  --bs-btn-color: var(--neutral-black);
  --bs-btn-hover-bg: var(--blue-secondary);
  --bs-btn-hover-border-color: var(--blue-secondary);
  --bs-btn-active-bg: var(--blue-dark);
  --bs-btn-active-border-color: var(--blue-dark);
}

.btn-success {
  --bs-btn-bg: var(--blue-primary);
  --bs-btn-border-color: var(--blue-primary);
  --bs-btn-color: var(--neutral-white);
  --bs-btn-hover-bg: var(--blue-dark);
  --bs-btn-hover-border-color: var(--blue-dark);
  --bs-btn-active-bg: var(--blue-dark);
  --bs-btn-active-border-color: var(--blue-dark);
}

.btn-danger {
  --bs-btn-bg: var(--red-primary);
  --bs-btn-border-color: var(--red-primary);
  --bs-btn-color: var(--neutral-white);
  --bs-btn-hover-bg: var(--red-dark);
  --bs-btn-hover-border-color: var(--red-dark);
  --bs-btn-active-bg: var(--red-dark);
  --bs-btn-active-border-color: var(--red-dark);
}

.btn-warning {
  --bs-btn-bg: var(--blue-secondary);
  --bs-btn-border-color: var(--blue-secondary);
  --bs-btn-color: var(--neutral-white);
  --bs-btn-hover-bg: var(--blue-dark);
  --bs-btn-hover-border-color: var(--blue-dark);
  --bs-btn-active-bg: var(--blue-dark);
  --bs-btn-active-border-color: var(--blue-dark);
}

.btn-info {
  --bs-btn-bg: var(--blue-light);
  --bs-btn-border-color: var(--blue-light);
  --bs-btn-color: var(--neutral-black);
  --bs-btn-hover-bg: var(--blue-primary);
  --bs-btn-hover-border-color: var(--blue-primary);
  --bs-btn-active-bg: var(--blue-secondary);
  --bs-btn-active-border-color: var(--blue-secondary);
}

.btn-light {
  --bs-btn-bg: var(--neutral-white);
  --bs-btn-border-color: var(--neutral-white);
  --bs-btn-color: var(--neutral-black);
  --bs-btn-hover-bg: var(--blue-light);
  --bs-btn-hover-border-color: var(--blue-light);
  --bs-btn-active-bg: var(--blue-secondary);
  --bs-btn-active-border-color: var(--blue-secondary);
}

.btn-dark {
  --bs-btn-bg: var(--neutral-black);
  --bs-btn-border-color: var(--neutral-black);
  --bs-btn-color: var(--blue-primary);
  --bs-btn-hover-bg: var(--blue-dark);
  --bs-btn-hover-border-color: var(--blue-dark);
  --bs-btn-active-bg: var(--blue-secondary);
  --bs-btn-active-border-color: var(--blue-secondary);
}

/* === BOTTONI OUTLINE === */
.btn-outline-primary {
  --bs-btn-color: var(--blue-primary);
  --bs-btn-border-color: var(--blue-primary);
  --bs-btn-hover-color: var(--neutral-white);
  --bs-btn-hover-bg: var(--blue-primary);
  --bs-btn-hover-border-color: var(--blue-primary);
}

.btn-outline-secondary {
  --bs-btn-color: var(--blue-dark);
  --bs-btn-border-color: var(--blue-dark);
  --bs-btn-hover-color: var(--neutral-black);
  --bs-btn-hover-bg: var(--blue-light);
  --bs-btn-hover-border-color: var(--blue-dark);
}

.btn-outline-success {
  --bs-btn-color: var(--blue-primary);
  --bs-btn-border-color: var(--blue-primary);
  --bs-btn-hover-color: var(--neutral-white);
  --bs-btn-hover-bg: var(--blue-primary);
  --bs-btn-hover-border-color: var(--blue-primary);
}

.btn-outline-danger {
  --bs-btn-color: var(--red-primary);
  --bs-btn-border-color: var(--red-primary);
  --bs-btn-hover-color: var(--neutral-white);
  --bs-btn-hover-bg: var(--red-primary);
  --bs-btn-hover-border-color: var(--red-primary);
}

.btn-outline-warning {
  --bs-btn-color: var(--blue-secondary);
  --bs-btn-border-color: var(--blue-secondary);
  --bs-btn-hover-color: var(--neutral-white);
  --bs-btn-hover-bg: var(--blue-secondary);
  --bs-btn-hover-border-color: var(--blue-secondary);
}

.btn-outline-info {
  --bs-btn-color: var(--blue-light);
  --bs-btn-border-color: var(--blue-light);
  --bs-btn-hover-color: var(--neutral-black);
  --bs-btn-hover-bg: var(--blue-light);
  --bs-btn-hover-border-color: var(--blue-light);
}


/* === BADGE === */
.badge { --bs-badge-color: var(--neutral-black); }

/* === BACKGROUND & TEXT UTILITIES === */
.bg-primary { background-color: var(--yellow-primary) !important; }
.bg-secondary { background-color: var(--yellow-secondary) !important; }
.bg-success { background-color: var(--yellow-primary) !important; }
.bg-danger { background-color: var(--red-primary) !important; }
.bg-warning { background-color: var(--yellow-secondary) !important; }
.bg-info { background-color: var(--yellow-primary) !important; }
.bg-light { background-color: var(--neutral-white) !important; }
.bg-dark { background-color: var(--neutral-black) !important; }

.text-primary   { color: var(--blue-primary) !important; }
.text-secondary { color: var(--blue-secondary) !important; }
.text-success   { color: var(--blue-primary) !important; }
.text-danger    { color: var(--red-primary) !important; }
.text-warning   { color: var(--blue-secondary) !important; }
.text-info      { color: var(--blue-light) !important; }
.text-light     { color: var(--neutral-white) !important; }
.text-dark      { color: var(--neutral-black) !important; }


.text-muted {
  --bs-text-opacity: 1;
}

/* === MODALI === */
.modal-content {
  background-color: var(--neutral-white);
  color: var(--neutral-black);
  border-color: var(--yellow-primary);
}
.modal-header,
.modal-footer { border-color: var(--yellow-light); }
.modal-backdrop.show { background-color: var(--black-overlay-85); }

/* === LIST GROUP === */
.list-group-item.active {
  background-color: var(--yellow-primary);
  border-color: var(--yellow-primary);
  color: var(--neutral-black);
}

/* === PAGINATION === */
.page-link { color: var(--yellow-primary); }
.page-item.active .page-link {
  background-color: var(--yellow-primary);
  border-color: var(--yellow-primary);
  color: var(--neutral-black);
}

/* === DROPDOWN === */
.dropdown-menu { 
  background-color: var(--mb4-bg); 
}
.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--blue-primary);
  color: var(--neutral-white);
}


    /* === ACCORDION GENERALI === */
    .accordion-button {
      background-color: var(--accordion-general-title-bg) !important;
      color: var(--accordion-general-title-text) !important;
    }
    
    .accordion-button:not(.collapsed) {
      background-color: var(--accordion-general-title-bg) !important;
      color: var(--yellow-secondary) !important; /* opzionale: --accordion-general-title-text-active */
    }
    
    .accordion-button::after {
      filter: invert(72%) sepia(83%) saturate(680%) hue-rotate(14deg) brightness(103%) contrast(101%);
    }
    
    .accordion-body {
      background-color: var(--accordion-general-bg) !important;
      color: var(--accordion-general-body-text) !important;
    }

.mb-4  {
  background-color: var(--mb4-bg);
  padding: 1rem;
  border-radius: var(--border-radius);
}

.card {
  border: 1px solid var(--card-border-color);
  border-radius: var(--card-border-radius);
}

.card-body {
  background-color: var(--card-body-bg);
  border-radius: var(--card-border-radius);
  color: var(--card-text-color) !important; 
}



/* Menu azioni light */
.dropdown-menu .dropdown-item { color: var(--blue-primary) !important; }
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
  background-color: var(--yellow-primary) !important;
  color: var(--neutral-black) !important;
}

/* ================================
   DARK MODE
   ================================ */
@media (prefers-color-scheme: dark) {

  /* Background e testi chiari nelle modali */
  .modal-content {
    background-color: var(--neutral-black);
    color: var(--neutral-white);
    border-color: var(--yellow-primary);
  }
  .modal-header,
  .modal-footer { border-color: var(--yellow-light); }
  .modal-backdrop.show { background-color: var(--black-overlay-85); }

  /* Utilities testo in dark */
  .text-light { color: var(--neutral-white) !important; }
  .text-dark { color: var(--neutral-black) !important; }

  /* Dropdown dark */
  .dropdown-menu {
    background-color: var(--neutral-black) !important;
    color: var(--yellow-primary) !important;
  }
  .dropdown-menu .dropdown-item { color: var(--yellow-primary) !important; }
  .dropdown-menu .dropdown-item:hover,
  .dropdown-menu .dropdown-item:focus {
    background-color: var(--yellow-primary) !important;
    color: var(--neutral-black) !important;
  }

  /* Card in dark: bordo giallo, fondo neutro scuro controllato via var globale se usato */
  .card {
    border: 2px solid var(--yellow-primary) !important;
    border-radius: var(--border-radius);
    background-color: var(--neutral-black);
    color: var(--neutral-white);
  }

  /* Accordion titoli già scuri; corpo e subscribers usano variabili dedicate */
  .accordion-body {
    background-color: var(--accordion-bg) !important;
    color: var(--yellow-primary) !important;
  }
  .subscribers-background {
    background-color: var(--subscribers-bg);
    padding: 1rem;
    border-radius: var(--border-radius);
  }
}

/* === Search Results Card === */
.search-result-card {
  background-color: var(--search-card-bg);
  border: 2px solid var(--search-card-border);
  border-radius: var(--border-radius);
  overflow: hidden;
}

.search-result-card .card-body {
  background-color: transparent;
}

/* Immagine profilo fissa */
.profile-image-fixed {
  width: 250px;   /* regolabile */
  height: 250px;
  object-fit: cover;
  border-radius: var(--border-radius);
}

/* Placeholder icona */
.profile-image-fixed.placeholder-icon {
  background-color: var(--yellow-light);
  color: var(--yellow-dark);
  font-size: 3rem;
}

/* === Dark mode === */
@media (prefers-color-scheme: dark) {
  .search-result-card {
    background-color: var(--search-card-bg);
    border-color: var(--search-card-border);
  }
}
/* ================================
   Esecuzione Scheda - Stili Specifici
   ================================ */

/* Accordion esercizi */
.execplan-accordion .accordion-item {
  background-color: var(--execplan-bg);
  border: 1px solid var(--execplan-border-color);
  border-radius: var(--border-radius);
  overflow: hidden;
}

.execplan-accordion .accordion-button {
  background-color: var(--execplan-header-bg) !important;
  color: var(--execplan-header-text) !important;
  font-weight: bold;
}

.execplan-accordion .accordion-button:not(.collapsed) {
  background-color: var(--execplan-hover-bg) !important;
  color: var(--execplan-hover-text) !important;
}

.execplan-accordion .accordion-body {
  background-color: var(--execplan-body-bg) !important;
  color: var(--execplan-body-text) !important;
}

/* Stato esercizio */
.execplan-status.finished {
  color: var(--execplan-finished-text);
  font-weight: bold;
}

.execplan-status.inprogress {
  color: var(--execplan-inprogress-text);
  font-weight: bold;
}

.execplan-status.pending {
  color: var(--execplan-pending-text);
}

/* Pulsanti */
.execplan-btn-primary {
  background-color: var(--execplan-btn-primary-bg);
  color: var(--execplan-btn-primary-text);
  border: none;
}

.execplan-btn-primary:hover {
  background-color: var(--execplan-hover-bg);
  color: var(--execplan-hover-text);
}

.execplan-btn-secondary {
  background-color: var(--execplan-btn-secondary-bg);
  border: 1px solid var(--execplan-btn-secondary-border);
  color: var(--execplan-btn-secondary-text);
}

.execplan-btn-secondary:hover {
  background-color: var(--execplan-hover-bg);
  color: var(--execplan-hover-text);
}

/* Miniatura esercizio */
.execplan-thumbnail {
  width: 100px;
  border-radius: var(--border-radius);
  box-shadow: 0 2px 4px rgba(0,0,0,0.4);
}


/* Stile globale per tutte le tabelle Bootstrap */
.table {
  border-color: var(--card-border-color);
}

.table thead {
  background-color: var(--card-body-bg);
  color: var(--card-text-color, var(--neutral-black));
}

.table tbody tr:hover {
  background-color: rgba(255, 215, 0, 0.2);
}

/* menu profili pubblici*/
.profile-offcanvas-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1050; /* sopra il contenuto */
  border-radius: 50%;
  width: 56px;
  height: 56px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

/* toogle */
.btn-toggle-lesson-type.active {
  text-decoration: underline;
  text-underline-offset: 4px; /* spaziatura opzionale per estetica */
  background-color: transparent !important; /* rimuove eventuale sfondo attivo */
  color: inherit !important; /* mantiene il colore del testo originale */
}

/* Evidenzia media selezionati con bordo e spunta verde */
.media-item.selected {
  position: relative;
  outline: 3px solid var(--green-primary);
  border-radius: 6px;
}

.media-item.selected::after {
  content: "✔";
  position: absolute;
  top: 6px;
  right: 6px;
  background-color: var(--green-primary);
  color: white;
  font-size: 14px;
  font-weight: bold;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* arrow per i collapse */
.toggle-arrow {
  transition: transform 0.2s ease;
}
.collapsed .toggle-arrow {
  transform: rotate(-90deg); /* ► quando chiuso */
}
/* === Accordion full-width in modal (solo mobile) === */
@media (max-width: 768px) {
  .modal-body .accordion {
    width: 100%;
  }

  .modal-body .accordion .accordion-item {
    border-radius: 0;
    margin-left: -1rem;   /* annulla padding modale */
    margin-right: -1rem;
  }

  .modal-body .accordion-button {
    border-radius: 0;
    width: 100%;
  }
  .modal-dialog {
    margin: 0 !important;   /* rimuove margini laterali */
    max-width: 100% !important; /* allarga il modale a tutta larghezza */
  }

  .modal-content {
    border-radius: 0; /* opzionale: elimina gli angoli stondati */
  }
}

}
/* Rimuovere margini laterali nei modali */
@media (max-width: 768px) {
  .modal-dialog {
    margin: 0 !important;        /* elimina margini laterali */
    max-width: 100% !important;  /* estende il modale a tutta larghezza */
  }

  .modal-content {
    border-radius: 0;            /* opzionale: elimina arrotondamento angoli */
  }

  /* Compensare padding interno per far aderire gli accordion */
  .modal-body {
    padding-left: 0;
    padding-right: 0;
  }

  .modal-body .accordion .accordion-item {
    margin-left: 0;
    margin-right: 0;
  }
}

/* collapse colonna di dx */
#right-col.collapsed { display:none !important; }

#left-col.collapsed { display:none !important; }

.footer {
  background-color: var(--neutral-white);
  color: var(--neutral-black);
}
.footer a {
  color: #0066CC; /* blu acceso */
  text-decoration: none;
}
.footer a:hover {
  color: var(--yellow-dark);
}
.footer h6 {
  color: #0066CC; /* blu acceso */
}