/*
  Shopping Kart - CSS custom minimo.

  Regola seguita: tutto il resto dell'interfaccia usa esclusivamente classi
  di Bootstrap 4.6 (bootstrap.min.css). Queste poche regole esistono solo
  perche' Bootstrap 4 non offre un'utility per farlo:

  - .text-strike     -> decorazione line-through (assente tra le utility
                        text-decoration-* di Bootstrap 4)
  - .content-spacer  -> spazio in fondo al contenuto per non finire sotto
                        il menu fisso in fondo (l'altezza esatta non
                        corrisponde a nessuno step della scala spaziatura
                        di Bootstrap); .content-spacer-lista e' la stessa
                        cosa ma piu' alta, per la vista Lista dove sopra
                        al menu c'e' impilata anche la barra aggiungi
                        articolo
  - .toast-fixed     -> posizionamento del toast di conferma sopra la barra
                        fixed-bottom (Bootstrap 4 non ha utility di offset
                        arbitrari, solo position-fixed generico)
  - .autocomplete-dropdown -> menu suggerimenti sotto l'input (componente
                        autocomplete-input), niente plugin JS/Popper
  - .autocomplete-dropdown-up -> stessa cosa ma verso l'alto, per la barra
                        aggiungi articolo (vista Lista) che sta in fondo
                        allo schermo
  - .piano-voce-menu -> menu "..." (duplica/rimuovi/nota) di una voce
                        pianificata, visibile solo da mobile (< sm), stesso
                        motivo di .autocomplete-dropdown: niente plugin
                        JS/Popper
  - .swatch-btn      -> pulsante colore circolare per la palette a swatch
                        delle categorie ricetta
  - .unit-select     -> larghezza massima per le select unita' di misura
                        (max 4 caratteri, inutile farle larghe quanto
                        la colonna Bootstrap che le contiene)

  In fondo al file: blocco tema scuro (html.theme-dark), commentato a parte
  perche' e' un insieme di override piu' ampio, non una singola utility.
*/

.text-strike {
  text-decoration: line-through;
}

.content-spacer {
  padding-bottom: 76px;
}

.content-spacer-lista {
  padding-bottom: 160px;
}

.toast-fixed {
  position: fixed;
  left: 50%;
  bottom: 132px;
  transform: translateX(-50%);
  z-index: 1080;
  max-width: 90%;
}

/*
  .mdi-icon -> allineamento verticale delle icone MDI inline rispetto al
  testo adiacente. Bootstrap 4 non ha una utility per questo (le icone non
  fanno parte del framework), quindi e' indispensabile.
*/
.mdi-icon {
  vertical-align: -0.15em;
}

/*
  .icon-spin -> rotazione continua dell'icona di sync (navbar e
  Impostazioni) mentre una sincronizzazione e' in corso (vueApp.syncing,
  vedi js/sync.js), al posto di un messaggio toast "in corso" che con la
  sync automatica ad ogni modifica comparirebbe troppo spesso. Bootstrap 4
  non ha un'utility di animazione per questo.
*/
@keyframes icon-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.icon-spin {
  display: inline-block;
  animation: icon-spin 1s linear infinite;
}

/*
  .autocomplete-dropdown -> posizionamento del menu suggerimenti sotto
  l'input (componente autocomplete-input, piano alimentare/ricette).
  Bootstrap 4 non offre positioning per dropdown "liberi" senza il plugin
  JS/Popper, che l'app evita volutamente.
*/
.autocomplete-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1055;
  max-height: 220px;
  overflow-y: auto;
}

/*
  .autocomplete-dropdown-up -> variante di .autocomplete-dropdown che apre
  il menu verso l'alto invece che verso il basso: usata dalla barra
  aggiungi articolo (vista Lista), che sta nella fixed-bottom in fondo allo
  schermo, dove aprire verso il basso lascerebbe il menu fuori dallo
  schermo.
*/
.autocomplete-dropdown-up {
  top: auto;
  bottom: 100%;
}

/*
  .swatch-btn -> pulsante colore circolare per la palette a swatch delle
  categorie ricetta (nessuna utility Bootstrap 4 per bottoni-colore).
*/
.swatch-btn {
  display: inline-block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  padding: 0;
  border: 2px solid transparent;
}

.swatch-btn.selected {
  border-color: #343a40;
}

/*
  .unit-select -> le unita' di misura sono al massimo 4 caratteri
  ("conf"): le select di Bootstrap 4 si allargano per riempire la colonna
  che le contiene, molto piu' del necessario. Nessuna utility Bootstrap
  per limitare la larghezza di un singolo form-control.
*/
.unit-select {
  max-width: 5.5rem;
}

/*
  Trascinamento ricette nel Piano (SortableJS, js/components.js/meal-cell
  + js/feature-piano.js) -> ".piano-draggable" e' il cursore "afferra" sui
  badge trascinabili, con padding maggiore del badge di Bootstrap (troppo
  sottile su schermi piccoli per essere afferrato comodamente col dito -
  vince su quello di bootstrap.min.css per ordine di caricamento dei due
  file, senza bisogno di !important); ".piano-sortable-ghost"/
  ".piano-sortable-chosen" sono i nomi di classe passati alle opzioni
  ghostClass/chosenClass di Sortable (segnaposto nella cella di
  destinazione ed evidenziazione dell'elemento in trascinamento) - nessuna
  utility Bootstrap per questo.
*/
.piano-draggable {
  cursor: grab;
  padding: 0.5rem 0.5rem;
  min-height: 2.25rem;
}

/*
  .piano-recipe-name -> il nome ricetta dentro un badge va a capo invece di
  troncarsi con "...". Serve sovrascrivere tre cose che Bootstrap 4 imposta
  su ".btn" e che altrimenti lo impedirebbero: "white-space: nowrap" (va a
  capo), "text-align: center" (a sinistra, coerente col resto dell'app) e
  la larghezza shrink-to-fit di default (flex-grow lo fa occupare lo spazio
  disponibile nel badge, altrimenti non ci sarebbe mai un bordo su cui
  andare a capo); "min-width: 0" e' il classico correttivo per far
  restringere/avvolgere un elemento flessibile invece di spingere oltre il
  contenitore.
*/
.piano-recipe-name {
  white-space: normal;
  text-align: left;
  word-break: break-word;
  flex: 1 1 auto;
  min-width: 0;
}

/*
  .piano-nota-ricetta-input -> input inline per l'annotazione di una
  singola voce-ricetta nel piano (es. "x2", vedi meal-cell-template):
  larghezza ridotta invece della larghezza piena di ".form-control", per
  restare compatta dentro un badge stretto (colonna Piano settimanale).
*/
.piano-nota-ricetta-input {
  width: 5rem;
  display: inline-block;
}

/*
  .piano-voce-menu -> menu "..." di una voce pianificata (mobile, vedi
  meal-cell-template): stesso posizionamento libero di
  .autocomplete-dropdown ma ancorato a destra (invece che a tutta
  larghezza) dato che il trigger e' un'icona piccola nell'angolo del
  badge, non un campo di testo; "right: 0" invece di "left: 0" per non
  finire fuori dal bordo destro dello schermo sui badge vicini al margine.
*/
.piano-voce-menu {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 1055;
  min-width: 9rem;
}

.piano-sortable-ghost {
  opacity: 0.35;
  outline: 2px dashed #343a40;
  outline-offset: -2px;
}

.piano-sortable-chosen {
  box-shadow: 0 0 0 2px #343a40 inset;
}

html.theme-dark .piano-sortable-ghost {
  outline-color: #e9ecef;
}

html.theme-dark .piano-sortable-chosen {
  box-shadow: 0 0 0 2px #e9ecef inset;
}

/*
  Tema scuro (attivato con la classe .theme-dark su <html>, interruttore
  in Impostazioni) -> override manuale perche' Bootstrap 4.6 non ha un
  tema scuro nativo (introdotto solo in Bootstrap 5.3, che il progetto
  non usa per i motivi di compatibilita' Edge 14 spiegati nel README).
  Copre solo gli sfondi/testi dei componenti Bootstrap che l'app usa
  davvero; le classi contestuali (alert-warning/success/info delle
  colonne pasto, badge colorati) restano invariate: sono pastelli con
  testo scuro gia' leggibili su entrambi gli sfondi.
*/
html.theme-dark body {
  background-color: #1a1d20;
  color: #e9ecef;
}

html.theme-dark .card,
html.theme-dark .card-header,
html.theme-dark .list-group-item,
html.theme-dark .modal-content {
  background-color: #26292c;
  color: #e9ecef;
  border-color: #3a3f44;
}

/*
  .bg-light e' un'utility Bootstrap definita con !important (come tutte le
  utility bg-*): deve avere !important anche qui, altrimenti vince sempre
  quella di bootstrap.min.css indipendentemente dalla specificita'.
*/
html.theme-dark .bg-light {
  background-color: #26292c !important;
  color: #e9ecef;
}

html.theme-dark .fixed-bottom.bg-white {
  background-color: #26292c !important;
  border-color: #3a3f44;
}

html.theme-dark .border,
html.theme-dark .border-top,
html.theme-dark .border-bottom {
  border-color: #3a3f44 !important;
}

html.theme-dark .text-dark {
  color: #e9ecef !important;
}

html.theme-dark .text-muted {
  color: #adb5bd !important;
}

html.theme-dark .badge-light {
  background-color: #3a3f44;
  color: #e9ecef;
}

html.theme-dark .form-control,
html.theme-dark .custom-select {
  background-color: #2f3337;
  border-color: #3a3f44;
  color: #e9ecef;
}

html.theme-dark .form-control::placeholder {
  color: #8a9096;
}

html.theme-dark .form-control:disabled,
html.theme-dark .custom-select:disabled {
  background-color: #26292c;
  color: #8a9096;
}

html.theme-dark .close {
  color: #e9ecef;
  text-shadow: none;
}

html.theme-dark .btn-outline-secondary {
  color: #ced4da;
  border-color: #6c757d;
}

html.theme-dark .btn-outline-secondary:hover {
  background-color: #3a3f44;
  color: #fff;
}

html.theme-dark .table {
  color: #e9ecef;
}

html.theme-dark .table-bordered,
html.theme-dark .table-bordered td,
html.theme-dark .table-bordered th {
  border-color: #3a3f44;
}

/*
  Le 3 colonne pasto (Colazione/Pranzo/Cena) riusano alert-warning/success/
  info di Bootstrap: pastelli chiari pensati per un fondo chiaro, troppo
  luminosi sul tema scuro. Qui sotto varianti scure della stessa terna di
  colori (ambra/verde/ciano), sempre distinguibili tra loro.
*/
html.theme-dark .alert-warning {
  background-color: #4d3a12;
  border-color: #6b5219;
  color: #ffe1a6;
}

html.theme-dark .alert-success {
  background-color: #1e3a24;
  border-color: #2c5334;
  color: #a8e6b5;
}

html.theme-dark .alert-info {
  background-color: #103a42;
  border-color: #185763;
  color: #a8dee6;
}