@tailwind base;
@tailwind components;
@tailwind utilities;

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/

/* Sidebar rétractée (icônes seules) — mockups, desktop uniquement.
   Le toggle est une icône en haut de la sidebar (retour client #2, réf Figma "Minimized").
   État persisté en cookie : la classe .nav-mini est posée par le layout
   (Mockups::NavController#toggle), donc l'état survit à la navigation. */
@media (min-width: 768px) {
  .nav-mini aside { width: 3.5rem; }
  .nav-mini aside .nav-label { display: none; }
  .nav-mini aside .ws-btn { display: none; }
  /* visibility (pas display) : la hauteur du bloc workspace ne bouge pas au
     collapse — les icônes gardent taille, position et espacement (tracker #1553) */
  .nav-mini aside .ws-label { visibility: hidden; }
  .nav-mini aside nav a, .nav-mini aside .nav-row { justify-content: center; padding-left: 0; padding-right: 0; }
  .nav-mini aside .mini-rotate { transform: rotate(180deg); }

  /* Sidebar figée : reste visible même sur les pages longues, ne descend plus en
     bas de la page (tracker #2073). Sticky sous la topbar (h-14 = 3.5rem), hauteur
     bornée au viewport, scroll interne si besoin. Remplace le md:static de l'aside. */
  .app-sidebar {
    position: sticky;
    align-self: flex-start;
    top: 3.5rem;
    height: calc(100vh - 3.5rem);
    overflow-y: auto;
  }
}

/* Selects stylés charte (retour client #4) : on masque le rendu natif OS et on
   dessine le chevron nous-mêmes. Le panneau ouvert reste natif (limite navigateur). */
.select-ui {
  appearance: none;
  -webkit-appearance: none;
  background-color: #fff;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.835 3.25a.8.8 0 0 0-.69 1.203l5.164 8.854a.8.8 0 0 0 1.382 0l5.165-8.854a.8.8 0 0 0-.691-1.203z' fill='%236b7280'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  background-size: 0.55em;
  padding-right: 1.75rem;
}

/* Toggle switch CSS pur (Lock budget / Auto-apply — retours client #7 et #10) */
.toggle-ui {
  position: relative;
  display: inline-block;
  width: 2.25rem;
  height: 1.25rem;
  border-radius: 9999px;
  background: #d1d5db;
  transition: background-color 0.15s ease;
  vertical-align: middle;
  cursor: pointer;
}
.toggle-ui::after {
  content: "";
  position: absolute;
  top: 0.125rem;
  left: 0.125rem;
  width: 1rem;
  height: 1rem;
  border-radius: 9999px;
  background: #fff;
  transition: transform 0.15s ease;
}
input:checked + .toggle-ui { background: #008076; }
input:checked + .toggle-ui::after { transform: translateX(1rem); }
input:focus-visible + .toggle-ui { outline: 2px solid rgba(0, 128, 118, 0.4); }

/* Fermeture des dropdowns <details class="dropdown"> au clic extérieur :
   un overlay invisible plein écran est greffé au summary quand le menu est ouvert —
   cliquer dehors = cliquer le summary = fermeture. (mockups, zéro JS) */
details.dropdown[open] > summary::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 10;
  cursor: default;
}
details.dropdown > div { position: absolute; z-index: 20; }

/* Les menus déroulants doivent pouvoir déborder du conteneur scrollable de table
   (tracker #2149) : quand un dropdown est ouvert dans une table, on rend le
   conteneur overflow:visible le temps de l'affichage (CSS pur, :has). */
.table-scroll:has(details.dropdown[open]) { overflow: visible; }

/* Au téléphone, un panneau à largeur fixe sort de l'écran dès que son déclencheur est
   près d'un bord : une partie du menu devient physiquement inatteignable.

   La première version alignait le panneau à droite (`left: auto; right: 0`), ce qui
   règle le cas d'un déclencheur près du bord DROIT, mesuré sur Mapping le 2026-08-20.
   Mais sur `/budget_groups` la colonne « ⋮ » est tout à GAUCHE : aligné à droite, le
   panneau part vers la gauche et sort par l'autre bord. Mesuré à 390 px le 2026-08-25 :
   panneau de 176 px posé à x = -91, soit 91 px hors écran, sur les cinq lignes, sans
   aucun moyen de les ramener. C'est un cas R1-10.1 (contenu coupé sans défilement).

   CSS ne sait pas de quel côté est ancré son déclencheur, donc on ne choisit plus un
   côté : au téléphone le panneau est ancré au VIEWPORT, bordé à gauche comme à droite.
   Il reste à sa hauteur naturelle (`top: auto` garde la position statique) et ne peut
   plus sortir par aucun bord, quel que soit l'écran. Le rendu bureau ne change pas. */
@media (max-width: 640px) {
  details.dropdown > div {
    position: fixed;
    left: 0.75rem;
    right: 0.75rem;
    width: auto;
    max-width: none;
  }
  /* Même cause pour les infobulles : centrées sur leur déclencheur, elles sortent de
     l'écran dès que celui-ci est près d'un bord. */
  .tip-bubble { max-width: min(15rem, calc(100vw - 2rem)); }
}

/* Infobulle stylée charte (tracker #2431) : remplace le title= natif, dont le rendu
   dépend de l'OS (macOS / Windows). Zéro JS.
   Markup : <span class="tip">…déclencheur…<span class="tip-bubble">texte</span></span> */
.tip { position: relative; display: inline-flex; align-items: center; }
.tip-bubble {
  position: absolute;
  bottom: calc(100% + 0.5rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  width: max-content;
  max-width: 15rem;
  padding: 0.4375rem 0.625rem;
  border-radius: 0.375rem;
  background: #1f2937;
  color: #fff;
  font-size: 0.6875rem;
  line-height: 1.45;
  font-weight: 400;
  text-align: left;
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s ease;
  pointer-events: none;
}
.tip-bubble::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -0.25rem;
  border: 0.25rem solid transparent;
  border-top-color: #1f2937;
}
.tip:hover .tip-bubble,
.tip:focus-within .tip-bubble { opacity: 1; visibility: visible; }

/* Même contrainte que les dropdowns (#2149) : l'infobulle doit pouvoir déborder
   du conteneur scrollable de table. */
.table-scroll:has(.tip:hover) { overflow: visible; }

/* Colonnes Lock Budget / Lock Percentage (tracker #1660) : repliées par défaut,
   dépliées via le "+" au-dessus de Weighting. Zéro JS : checkbox peer + label. */
.lock-col { display: none; }
.locks-toggle:checked ~ .table-scroll .lock-col { display: table-cell; }
.locks-minus { display: none; }
.locks-toggle:checked ~ .table-scroll .locks-plus { display: none; }
.locks-toggle:checked ~ .table-scroll .locks-minus { display: inline-flex; }