/* ============================================================
   components.css — Componenti riutilizzabili cross-pagina
   Caricato in common.html, disponibile su tutti i template.
   ============================================================ */

/* ── Stato "pending" (modifiche non salvate) ────────────────
   Usato in: modifica_ricetta, settimana_visualizza_menu,
             visualizza_impianti, visualizza_ingredienti      */
.input-pending {
  border-color: var(--pending) !important;
  background-color: var(--pending-light) !important;
  box-shadow: 0 0 0 0.1rem rgba(253, 126, 20, .3) !important;
}

/* Alias semantico usato in visualizza_impianti */
.select-pending {
  border-color: var(--pending) !important;
  background-color: var(--pending-light) !important;
  box-shadow: 0 0 0 0.1rem rgba(253, 126, 20, .3) !important;
}

.radio-group-pending {
  outline: 2px solid var(--pending);
  outline-offset: 4px;
  border-radius: .3rem;
}

/* ── Bottone circolare piccolo ──────────────────────────────
   Usato in: pivot.html, settimana_visualizza_menu           */
.btn-circle.btn-sm {
  width: 30px;
  height: 30px;
  padding: 6px 0;
  border-radius: 15px;
  font-size: 8px;
  text-align: center;
}

/* ── Toggle radio accessibile ───────────────────────────────
   Usato in: form ricette                                    */
.toggle-radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* ── Disabled select ────────────────────────────────────────
   Usato in: form ricette                                    */
select:disabled {
  cursor: not-allowed;
  opacity: .55;
}

/* ── Accordion brand (index.html) ───────────────────────────  */
.accordion-button {
  font-size: 20px;
  color: white !important;
  background-color: var(--brand) !important;
}
.accordion-button:after {
  color: white !important;
}
.accordion-header:collapse {
  background-color: white !important;
}
.accordion-button.collapse {
  border-radius: 20px;
  color: var(--brand) !important;
}

/* ── Modal header colorato ──────────────────────────────────
   Usato in: ruoli_permessi                                  */
.modal-header-brand {
  background: var(--brand);
  color: #fff;
}
.modal-header-brand .close {
  color: #fff;
  opacity: .8;
}
.modal-header-danger {
  background: #dc3545;
  color: #fff;
}
.modal-header-danger .close {
  color: #fff;
  opacity: .8;
}

/* ── Card con box-shadow ────────────────────────────────────
   Usato in: ruoli_permessi (con margine specifico)         */
.page-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .07);
  overflow: hidden;
}

/* ── Navbar sfondo brand ────────────────────────────────────
   Usato in: _navbar.html (entrambe le versioni)             */
.navbar-brand-bg {
  background-color: var(--brand) !important;
}

/* ── HR separatore brand ────────────────────────────────────
   Usato in: index, ricette, amministrazione, reportistica   */
.hr-brand {
  border-color: var(--brand);
  opacity: 1;
}

/* ── Bottone brand (Bootstrap-compatibile) ──────────────────
   Sostituisce class="btn btn-primary" style="background…"  */
.btn-brand {
  background-color: var(--brand);
  border-color: var(--brand);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .15s, border-color .15s;
}
.btn-brand:hover,
.btn-brand:focus {
  background-color: var(--brand-dark);
  border-color: var(--brand-dark);
  color: #fff;
}
.btn-brand:active {
  background-color: var(--brand-dark) !important;
  border-color: var(--brand-dark) !important;
}

/* ── Bottone outline brand ──────────────────────────────────  */
.btn-outline-brand {
  background-color: #fff;
  border: 2px solid var(--brand);
  color: var(--brand);
  font-weight: 600;
  cursor: pointer;
  transition: background-color .15s, color .15s;
}
.btn-outline-brand:hover,
.btn-outline-brand:focus {
  background-color: var(--brand);
  color: #fff;
}

/* ── Dropdown menu profilo (navbar) ─────────────────────────
   Sostituisce inline style sul .dropdown-menu del profilo   */
.dropdown-menu-profile {
  min-width: 280px;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

/* ── Modal header con sfondo grigio + bordo brand ───────────
   Usato in: mod_nuovo_ingrediente                           */
.modal-header-ing {
  background: #f8f9fa;
  border-bottom: 2px solid var(--brand);
}

/* ── Animazione slot importato ──────────────────────────────
   Usato in: modifica_menu                                   */
@keyframes flashSlotImportato {
  0%,
  70% { background-color: #cfe2ff; }
  100% { background-color: transparent; }
}
.flash-importato {
  animation: flashSlotImportato 2s ease forwards;
}