@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; }

/* 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; }