/* ---------------------------------------------------------------------
   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: #FAF4F1;
  --chef-text: #2B2422;
  --chef-border: #E4D6D1;
  --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: 250, 244, 241 !important; /* = var(--chef-bg) #FAF4F1 */
  --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;
}

/* 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;
}
.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;
  overflow: hidden;
}
.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;
}

/* 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;
  overflow: hidden;
}
/* 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 laterale / barre du haut : on garde la couleur choisie dans
   Cosmetique, juste une ombre plus douce que la bordure plate. */
.v-navigation-drawer,
.v-app-bar {
  box-shadow: 0 1px 2px rgba(60, 40, 35, .15) !important;
  border: none !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;
}