/* ---------------------------------------------------------------------
   Theme personnalise Tandoor (Cosmetique > Theme personnalise CSS).

   Tandoor a DEUX frontends distincts qui coexistent :
   - Bootstrap 4 (legacy) : pages Compte/Espace/Admin (Cosmetique, Espace,
     Systeme...) -> classes .btn/.card/.form-control/.navbar
   - Vue 3 + Vuetify (app principale) : Accueil, recettes, menu, courses,
     recherche... -> classes .v-btn/.v-card/.v-navigation-drawer etc, et
     variables CSS --v-theme-* generees dynamiquement depuis les couleurs
     choisies dans Cosmetique (primary/secondary suivent deja la couleur
     choisie ; le fond ("background") lui est fixe en dur par Vuetify a
     rgb(245,239,234), jamais expose dans l'UI Cosmetique - on le corrige
     ici en re-definissant la custom property).

   Les deux blocs ci-dessous coexistent pour que le rendu soit coherent
   partout, que la page soit servie par l'un ou l'autre frontend.
   --------------------------------------------------------------------- */

/* Reduction legere de la taille de police globale (Vuetify et Bootstrap
   utilisent tous deux des unites rem, donc rescaler la racine suffit a
   tout reduire proportionnellement, sans toucher chaque regle une a une). */
html {
  font-size: 93.75% !important; /* 16px -> 15px */
}

:root {
  --chef-accent: #B55E4F;
  --chef-accent-dark: #954A3D;
  --chef-accent-light: #F5E6E2;
  --chef-surface: #FFFFFF;
  --chef-bg: #FFFFFF;
  --chef-text: #2B2422;
  --chef-border: #D8DADD;
  --chef-radius: 12px;
  --chef-shadow: 0 1px 3px rgba(60, 40, 35, .15), 0 1px 2px rgba(60, 40, 35, .10);
  --chef-shadow-hover: 0 4px 10px rgba(60, 40, 35, .20), 0 2px 4px rgba(60, 40, 35, .12);
}

/* =======================================================================
   1. Frontend Vue 3 / Vuetify (application principale)
   ======================================================================= */

/* Le fond beige de Vuetify vient de cette custom property, jamais exposee
   dans Cosmetique. On la redefinit en !important pour gagner sur la regle
   d'origine (meme si elle est chargee apres la notre). Format attendu par
   Vuetify : "R, G, B" sans fonction rgb() autour. */
:root,
.v-theme--light {
  --v-theme-background: 255, 255, 255 !important; /* = var(--chef-bg) blanc */
  --v-theme-surface: 255, 255, 255 !important;
  /* Couleur "secondary" -> bleu. Ecrase la variable elle-meme (pas juste
     les classes utilitaires .bg-secondary/.text-secondary) pour couvrir
     aussi les usages internes (ex: surlignage de l'item selectionne dans
     un dropdown v-list, qui lit directement cette variable). */
  --v-theme-secondary: 44, 93, 168 !important; /* #2C5DA8 */
}

.v-application,
.v-main,
.bg-background {
  background-color: var(--chef-bg) !important;
  color: var(--chef-text) !important;
}

/* Cartes (recettes, menu, dialogues...) : coins arrondis + ombre douce
   plutot que les angles droits par defaut. */
.v-card,
.v-sheet:not(.v-app-bar):not(.v-navigation-drawer) {
  border-radius: var(--chef-radius) !important;
  box-shadow: var(--chef-shadow) !important;
  transition: box-shadow .18s ease;
}
.v-card:hover {
  box-shadow: var(--chef-shadow-hover) !important;
}

/* Boutons */
.v-btn {
  border-radius: 10px !important;
  font-weight: 600 !important;
  letter-spacing: .01em;
  text-transform: none !important;
}
.v-btn.bg-primary,
.v-btn.bg-secondary,
.v-btn.bg-tandoor {
  box-shadow: var(--chef-shadow) !important;
}

/* Zone de depot de fichier (import de recette, image...) : le titre
   Vuetify par defaut est enorme (1.5rem, gras) compare au reste des
   champs du formulaire. */
.v-file-upload-title {
  font-size: 1rem !important;
  font-weight: 600 !important;
}
.v-file-upload-icon {
  font-size: 2rem !important;
}

/* Harmonisation typographique de tous les champs : "Recette"/"Type de
   repas" utilisent la librairie @vueform/multiselect (police/couleur de
   placeholder differentes par defaut), alors que "Titre"/"Notes" etc
   utilisent les champs natifs Vuetify - deux systemes distincts avec des
   styles par defaut incoherents entre eux. On force la meme police,
   couleur et alignement a gauche partout (sauf Portions, delibarement
   centre, cible plus loin avec une specificite plus elevee). */
.v-field__input,
.v-field-label,
.multiselect-placeholder,
.multiselect-single-label-text,
.multiselect-search,
.multiselect-wrapper {
  font-family: inherit !important;
  font-size: .95rem !important;
  text-align: left !important;
}
.v-field-label,
.multiselect-placeholder {
  color: #757575 !important;
}
.v-field__input,
.multiselect-single-label-text {
  color: var(--chef-text) !important;
}

/* Champs de formulaire (VTextField/VSelect...) : Vuetify affiche par
   defaut un pave gris plat + simple ligne du bas (variante "filled").
   On le remplace par un champ blanc a bordure fine complete et coins
   arrondis, avec un liseret couleur accent au focus - look plus proche
   des formulaires Material 3 actuels. */
.v-field {
  background-color: var(--chef-surface) !important;
  border: 1.5px solid var(--chef-border) !important;
  border-radius: var(--chef-radius) !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.v-field__overlay {
  opacity: 0 !important;
  background: none !important;
}
.v-field__outline {
  display: none !important;
}
.v-field--focused {
  border-color: #2C5DA8 !important;
  box-shadow: none !important;
}
/* Espacement uniforme entre les champs : Vuetify reserve une hauteur
   variable sous chaque champ pour les messages d'aide/erreur (souvent
   vide, mais quand meme reservee), ce qui rend l'espacement incoherent
   d'un champ a l'autre (ex: Recette vs Titre). On force une marge fixe
   identique partout et on annule la reservation d'espace vide. */
.v-input {
  margin-bottom: 14px !important;
}
.v-input__details {
  min-height: 0 !important;
  padding-top: 2px !important;
}
.v-input:has(.material-multiselect) {
  margin-bottom: 14px !important;
}
/* Le champ "Recette" (ModelSelect) passe un texte d'aide (hint) que
   "Titre" n'a pas - ce texte prend une place reelle, pas juste de
   l'espace vide reserve, d'ou l'ecart plus grand qu'ailleurs. On le
   masque pour rester compact et uniforme. */
.v-input:has(.material-multiselect) .v-input__details {
  display: none !important;
}

.v-field--error {
  border-color: #2C5DA8 !important;
  box-shadow: none !important;
}

/* Boutons texte "warning" (ex: Confirmer dans les popups de confirmation) :
   Tandoor les colore en orange/or par defaut (rgb(234,170,33)), on les
   aligne sur un bleu plutot que sur l'accent rouille pour bien les
   distinguer des actions destructives (rouge/danger, inchangees). */
.text-warning,
.v-btn.text-warning {
  color: #2C5DA8 !important;
}

/* Couleur "secondary" de Vuetify (bouton flottant Enregistrer, etc.) :
   calee par defaut sur le rouille de l'accent -> bascule en bleu pour
   suivre le reste des actions (nav, Confirmer...). */
.bg-secondary {
  background-color: #2C5DA8 !important;
}
.text-secondary {
  color: #2C5DA8 !important;
}

/* Champ "Mots-cles" (et tout selecteur similaire type ingredients/unites) :
   ce n'est PAS un champ Vuetify mais la librairie @vueform/multiselect,
   theme via ses propres variables --ms-*. Tandoor la configure en dur en
   angles carres + simple ligne du bas (cf. source KeywordsBar/ModelSelect),
   d'ou le decalage avec le reste des champs deja arrondis. */
.material-multiselect {
  --ms-bg: var(--chef-surface) !important;
  --ms-border-width: 1.5px !important;
  --ms-border-color: var(--chef-border) !important;
  --ms-border-color-active: var(--chef-accent) !important;
  --ms-radius: var(--chef-radius) !important;
  --ms-ring-width: 3px !important;
  --ms-ring-color: var(--chef-accent-light) !important;
  --ms-tag-bg: var(--chef-accent) !important;
  --ms-tag-color: #fff !important;
  border: 1.5px solid var(--chef-border) !important;
  border-radius: var(--chef-radius) !important;
}
.material-multiselect.is-active {
  border-color: #2C5DA8 !important;
  box-shadow: none !important;
}
/* Option survolee/selectionnee dans la liste deroulante (variables
   propres a @vueform/multiselect, distinctes du theme Vuetify - Tandoor
   les code en dur en rouille, d'ou le besoin de les ecraser ici). */
.multiselect-option.is-selected,
.multiselect-option.is-selected.is-pointed {
  background: #2C5DA8 !important;
  color: #fff !important;
}
.multiselect-option.is-pointed {
  background: #EAF1FE !important;
  color: #1f2937 !important;
}

/* Groupes de boutons bascule (agrandir/reduire les etapes, etc.) :
   Vuetify affiche par defaut chaque bouton avec sa propre bordure separee
   et un contraste bizarre sur l'item selectionne. On en fait un seul
   groupe arrondi, sans bordures individuelles, avec l'etat actif en
   accent clair plutot qu'en gris. */
.v-btn-group,
.v-btn-toggle {
  border-radius: var(--chef-radius) !important;
  border: 1.5px solid var(--chef-border) !important;
  box-shadow: none !important;
  filter: none !important;
  overflow: hidden;
}
/* La classe utilitaire Vuetify .elevation-1 (vue dans le HTML reel sur le
   groupe -/«/»/+) a la meme specificite + !important que la regle
   ci-dessus : coin a coin, l'ordre de chargement decide, et Vuetify gagne
   apparemment. On la neutralise avec un selecteur compose plus specifique
   pour gagner quel que soit l'ordre. */
.v-btn-group.elevation-1,
.v-btn-toggle.elevation-1,
.elevation-1 {
  box-shadow: none !important;
}
.v-btn-group *,
.v-btn-toggle * {
  box-shadow: none !important;
  filter: none !important;
}
/* L'ombre du variant "elevated" de Vuetify est en fait portee par le span
   .v-btn__underlay a l'interieur de chaque bouton (verifie via inspection
   HTML), pas par le bouton lui-meme - un simple ".v-btn-group *" est trop
   peu specifique pour gagner face a la regle interne de Vuetify. On cible
   ce span directement avec une specificite plus elevee et on le masque. */
.v-btn-group .v-btn__underlay,
.v-btn-toggle .v-btn__underlay {
  display: none !important;
}
.v-btn-group .v-btn,
.v-btn-toggle .v-btn {
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
}
.v-btn-toggle .v-btn--active,
.v-btn-group .v-btn--active {
  background-color: var(--chef-accent-light) !important;
  color: var(--chef-accent-dark) !important;
}

/* Fond special "groupe Date/Temps colle" propre a Tandoor (fond gris,
   arrondi seulement en haut) : ca cree un chevauchement visuel disgracieux
   avec la barre de boutons -/«/»/+ juste en dessous. On neutralise pour
   revenir a deux champs normaux, coherents avec le reste. */
.datetime-joined-group {
  background: transparent !important;
  border-radius: 0 !important;
  margin-bottom: 4px !important;
  gap: 2px !important;
}
.datetime-joined-group > * {
  margin: 0 !important;
}

/* Champ "Portions" (v-number-input, composant Vuetify recent). Structure
   reelle verifiee via inspection : .v-number-input > .v-input__control >
   .v-field, et les boutons -/+ sont dans .v-field__prepend-inner /
   .v-field__append-inner > .v-number-input__control (donc geres par le
   .v-field lui-meme, pas par un flex qu'on ajouterait sur la racine). Le
   .v-field a deja un layout grid natif (colonne centrale en 1fr) - le
   probleme est juste que les boutons icone Vuetify sont plus larges que
   necessaire pour un simple -/+, ce qui ecrase la place du label. */
.v-number-input {
  border: 1.5px solid var(--chef-border) !important;
  border-radius: var(--chef-radius) !important;
  overflow: hidden;
}
.v-number-input .v-field {
  border: none !important;
  border-radius: 0 !important;
  /* Vuetify reserve normalement de l'espace pour l'animation du label
     flottant qui monte au-dessus du champ - inutile ici puisqu'on a fixe
     le label centre statiquement, d'ou la zone vide en bas. */
  --v-field-padding-top: 4px !important;
  --v-field-padding-bottom: 4px !important;
  --v-input-padding-top: 0px !important;
  min-height: 0 !important;
}
.v-number-input .v-field__field {
  min-height: 0 !important;
}
.v-number-input .v-number-input__control .v-btn {
  min-width: 32px !important;
  width: 32px !important;
}
.v-number-input .v-field__prepend-inner,
.v-number-input .v-field__append-inner {
  padding-inline: 0 !important;
  display: flex !important;
  align-items: center !important;
}
.v-number-input .v-number-input__control {
  display: flex !important;
  align-items: center !important;
  height: auto !important;
}
.v-number-input .v-number-input__control .v-btn {
  height: 32px !important;
  align-self: center !important;
}
/* Le separateur vertical resiste a toute tentative de dimensionnement
   correct (5 essais : stretch, height 100%, hauteur fixe...) - on le
   supprime plutot que de continuer a deviner sa taille. */
.v-number-input .v-divider--vertical {
  display: none !important;
}
/* La variante "split" de Vuetify centre la valeur (1,00) mais laisse le
   libelle flottant ("Portions") aligne a gauche par defaut - decalage
   visuel entre les deux lignes empilees. On centre tout le bloc. */
.v-number-input .v-field__field {
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}
.v-number-input .v-field-label {
  width: 100% !important;
  text-align: center !important;
  left: 0 !important;
}

/* Encadre d'aide ("Foyer", etc.) : v-alert standard, gris et carre par
   defaut. */
.v-alert {
  border-radius: var(--chef-radius) !important;
}
.v-alert .v-alert-title {
  font-size: .85rem !important;
}
.v-alert .v-alert__content {
  font-size: .78rem !important;
}

/* Utilitaire Vuetify .border (utilise par le groupe -/«/»/+ ci-dessus) :
   gris neutre generique par defaut au lieu de notre teinte de bordure. */
.border {
  border-color: var(--chef-border) !important;
}

/* Listes Vuetify (v-list) : pas d'arrondi par defaut sauf demande
   explicite du composant. Utilise par ex. par la barre de date/plan du
   jour sur l'accueil (HorizontalMealPlanWindow) - d'ou le contraste avec
   les boutons ronds a l'interieur. On arrondit le conteneur et on masque
   le debordement pour que les lignes internes suivent la forme. */
.v-list {
  border-radius: var(--chef-radius) !important;
  border: 1.5px solid var(--chef-border) !important;
  overflow: hidden;
}
.v-navigation-drawer .v-list {
  border: none !important;
}
/* Le overflow:hidden ci-dessus (necessaire pour l'arrondi) coupe net
   l'ombre par defaut des boutons a l'interieur d'une liste (ex: la fleche
   suivant/precedent a cote de la date) - rendu bizarre en "bordure"
   tronquee. On retire l'ombre a la source plutot que le overflow. */
.v-list .v-btn,
.v-list-item .v-btn {
  box-shadow: none !important;
}

/* Force nos coins arrondis sur les elements qui portent la classe utilitaire
   Vuetify .rounded-0 (utilisee en dur par plusieurs vues Tandoor : liste de
   courses, minuteur, planning...). Selecteur compose = specificite plus
   elevee que ".rounded-0" seul, donc gagne quel que soit l'ordre de
   chargement des feuilles de style. */
.v-card.rounded-0,
.v-sheet.rounded-0,
.v-btn.rounded-0,
.v-field.rounded-0 {
  border-radius: var(--chef-radius) !important;
}

/* Calendrier/planning (librairie tierce vue-simple-calendar, classes cv-*) :
   entierement en dehors du systeme de theme Vuetify, avec sa propre palette
   grise/saumon/magenta codee en dur par defaut. Version sobre : on retire
   les aplats colores et les coins arrondis sur les en-tetes (pas voulus),
   on garde juste un liseret discret pour "aujourd'hui". */
.cv-header {
  background-color: transparent !important;
  border: none !important;
}
.cv-header-day {
  background-color: transparent !important;
  border: none !important;
  border-bottom: 1.5px solid var(--chef-border) !important;
  border-radius: 0 !important;
  font-weight: 600 !important;
  color: var(--chef-text) !important;
}
.cv-weeknumber {
  background-color: var(--chef-bg) !important;
  border-color: var(--chef-border) !important;
  color: #9c8f8a !important;
}
.cv-day,
.cv-day.past,
.cv-day.outsideOfMonth {
  background-color: var(--chef-surface) !important;
  border-color: var(--chef-border) !important;
  opacity: 1 !important;
}
/* Aujourd'hui : juste le numero du jour en gras, rien d'autre. */
.cv-day.today {
  background-color: var(--chef-surface) !important;
  font-weight: 700 !important;
}

/* Puce "changement de mois" (ex: "aout 1") : Vuetify par defaut la colore
   en violet, on l'aligne sur notre palette. */
.cv-day .bg-purple,
.cv-day .bg-deep-purple,
.cv-day .bg-deep-purple-lighten-4,
.cv-day .bg-deep-purple-lighten-5 {
  background-color: var(--chef-accent-light) !important;
  color: var(--chef-accent-dark) !important;
}

/* Elements de planning (recettes placees dans le calendrier) : cartes
   arrondies avec ombre douce, coherentes avec le reste du theme. */
.cv-item {
  border-radius: 8px !important;
  border: 1px solid var(--chef-border) !important;
  background-color: var(--chef-surface) !important;
  box-shadow: 0 1px 2px rgba(60, 40, 35, .10) !important;
}
.cv-item.purple {
  background-color: #EDE7F6 !important;
  border-color: #D8CCEF !important;
}
.cv-item.orange {
  background-color: var(--chef-accent-light) !important;
  border-color: var(--chef-border) !important;
}
.cv-item.isHovered {
  box-shadow: 0 4px 10px rgba(60, 40, 35, .18) !important;
}

/* Barre du haut : legere degradee au lieu d'un aplat plat, ombre plus
   presente pour donner du relief, et les elements a l'interieur (bouton
   recherche, puce Ctrl+K, avatar) retravailles pour un rendu plus premium
   plutot que des boutons plats sans relief. */
.v-app-bar {
  background: linear-gradient(135deg, #3468B5, #1E4278) !important;
  box-shadow: 0 2px 8px rgba(20, 30, 50, .25) !important;
  border: none !important;
}
/* Bouton "Rechercher" (variant plain) transforme en pastille translucide
   plutot qu'un simple texte/icone flottant sans contour. */
.v-app-bar .v-btn--variant-plain {
  background-color: rgba(255, 255, 255, .14) !important;
  border-radius: 999px !important;
  opacity: 1 !important;
  padding: 0 16px !important;
  transition: background-color .15s ease;
}
.v-app-bar .v-btn--variant-plain:hover {
  background-color: rgba(255, 255, 255, .24) !important;
}
.v-app-bar .v-chip {
  background-color: rgba(255, 255, 255, .22) !important;
  color: #fff !important;
}
/* Bouton "+" (creer/importer) : pastille circulaire au survol plutot
   qu'aucun effet. */
.v-app-bar .v-btn--icon {
  border-radius: 50% !important;
}
.v-app-bar .v-btn--icon:hover {
  background-color: rgba(255, 255, 255, .18) !important;
}
/* Avatar utilisateur : liseret blanc discret pour le detacher du fond. */
.v-app-bar .v-avatar {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .45) !important;
}

/* Barre laterale (menu Home/Rechercher/Courses...) : plate et sans relief
   par defaut. On l'aligne sur le reste (fond blanc, separation fine a
   droite) et on transforme l'item actif en pastille arrondie bleue au lieu
   du simple pave gris plat par defaut. */
.v-navigation-drawer {
  background-color: var(--chef-surface) !important;
  border-right: 1px solid var(--chef-border) !important;
  box-shadow: none !important;
}
/* Annule le style de liste "carte arrondie" generique (voulu pour les
   listes de contenu, pas pour le menu lateral qui est une colonne pleine
   hauteur). */
.v-navigation-drawer .v-list {
  border-radius: 0 !important;
  overflow: visible !important;
  background-color: transparent !important;
  padding: 8px !important;
}
.v-navigation-drawer .v-list-item {
  border-radius: 10px !important;
  margin-bottom: 2px !important;
  color: var(--chef-text) !important;
}
.v-navigation-drawer .v-list-item:hover {
  background-color: var(--chef-bg) !important;
}
.v-navigation-drawer .v-list-item--active {
  background-color: #EAF1FE !important;
  color: #2C5DA8 !important;
}
.v-navigation-drawer .v-list-item--active .v-icon {
  color: #2C5DA8 !important;
}

/* =======================================================================
   2. Frontend Bootstrap 4 (legacy - Compte/Espace/Admin)
   ======================================================================= */

body {
  background: var(--chef-bg) !important;
  color: var(--chef-text) !important;
}

.btn {
  border-radius: var(--chef-radius) !important;
  font-weight: 600 !important;
  border: none !important;
  letter-spacing: .01em;
  transition: box-shadow .18s ease, transform .12s ease, background-color .15s ease !important;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary,
.btn-success {
  background-color: var(--chef-accent) !important;
  border-color: var(--chef-accent) !important;
  color: #fff !important;
  box-shadow: var(--chef-shadow) !important;
}
.btn-primary:hover,
.btn-success:hover {
  background-color: var(--chef-accent-dark) !important;
  border-color: var(--chef-accent-dark) !important;
  box-shadow: var(--chef-shadow-hover) !important;
}

.btn-secondary,
.btn-outline-secondary,
.btn-light {
  background-color: var(--chef-surface) !important;
  border: 1.5px solid var(--chef-border) !important;
  color: var(--chef-accent-dark) !important;
  box-shadow: none !important;
}
.btn-secondary:hover,
.btn-outline-secondary:hover,
.btn-light:hover {
  background-color: var(--chef-accent-light) !important;
  border-color: var(--chef-accent) !important;
  color: var(--chef-accent-dark) !important;
}

/* Danger (suppression, etc.) volontairement laisse en rouge : mieux vaut
   ne pas rendre les actions destructives aussi rassurantes que le reste. */

.card {
  border: 1px solid var(--chef-border) !important;
  border-radius: 14px !important;
  box-shadow: var(--chef-shadow) !important;
  transition: box-shadow .18s ease;
}
.card:hover {
  box-shadow: var(--chef-shadow-hover) !important;
}

.form-control {
  border-radius: 8px !important;
  border: 1.5px solid var(--chef-border) !important;
}
.form-control:focus {
  border-color: var(--chef-accent) !important;
  box-shadow: 0 0 0 3px var(--chef-accent-light) !important;
}

.navbar {
  box-shadow: 0 1px 2px rgba(60, 40, 35, .15) !important;
  border-bottom: none !important;
}