/* interface/fenetres.css — fenêtres modales
   Extrait de styles.css à l'étape 8 du découpage. L'ordre de chargement (index.html) est celui
   de l'ancienne feuille : à spécificité égale, la dernière règle l'emporte (voir CARTE.md, CSS). */
 /* ==================== FENÊTRES MODALES ==================== */
 .overlay{
 position:fixed; inset:0; background:rgba(6,7,10,.6); backdrop-filter:blur(calc(1.5px * var(--ui-scale-factor)));
 display:flex; align-items:flex-start; justify-content:center; z-index:1000; padding:5vh calc(10.5px * var(--ui-scale-factor));
 overflow-y:auto;
 }
 .overlay.hidden{display:none;}
 /* Étiquettes et Nouvelle liste peuvent rester ouvertes pendant qu'on travaille
 ailleurs : pas de fond assombri qui bloque le reste de l'écran, seule la
 fenêtre elle-même reste cliquable (voir bindOverlayClose). */
 .overlay.overlay-passthrough{background:transparent;backdrop-filter:none;pointer-events:none;}
 .overlay.overlay-passthrough .modal{pointer-events:auto;}
 .modal{
 background:var(--surface); border:calc(1px * var(--ui-scale-factor)) solid var(--border); border-radius:calc(7.5px * var(--ui-scale-factor));
 width:100%; max-width:calc(360px * var(--ui-scale-factor)); padding:0; box-shadow:0 calc(15px * var(--ui-scale-factor)) calc(45px * var(--ui-scale-factor)) rgba(0,0,0,.5);
 }
 .modal-head{
 display:flex; align-items:center; justify-content:space-between; padding:calc(12px * var(--ui-scale-factor)) calc(13.5px * var(--ui-scale-factor)) calc(9px * var(--ui-scale-factor));
 border-bottom:calc(1px * var(--ui-scale-factor)) solid var(--border-soft);
 }
 .modal-head h2{margin:0; font-family:system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif; font-size:calc(12px * var(--ui-scale-factor)); font-weight:600;}
 .modal-close{background:none; border:none; color:var(--text-faint); font-size:calc(15px * var(--ui-scale-factor)); line-height:1; padding:calc(1.5px * var(--ui-scale-factor)) calc(4.5px * var(--ui-scale-factor)); border-radius:calc(4.5px * var(--ui-scale-factor));}
 .modal-close:hover{color:var(--text); background:var(--surface-2);}
 .modal.is-movable .modal-head .modal-close{cursor:pointer;}
 .modal-body{padding:calc(12px * var(--ui-scale-factor)) calc(13.5px * var(--ui-scale-factor)); display:flex; flex-direction:column; gap:calc(12px * var(--ui-scale-factor)); max-height:70vh; overflow-y:auto;}
 .modal-foot{display:flex; justify-content:space-between; align-items:center; padding:calc(9px * var(--ui-scale-factor)) calc(13.5px * var(--ui-scale-factor)) calc(12px * var(--ui-scale-factor)); gap:calc(7.5px * var(--ui-scale-factor));}
 .field-label{font-size:calc(9px * var(--ui-scale-factor)); font-weight:700; color:var(--text-faint); text-transform:uppercase; letter-spacing:.05em; margin-bottom:calc(5.25px * var(--ui-scale-factor)); display:block;}
 .field input[type=text], .field input[type=date], .field textarea{
 width:100%; background:var(--surface-3); border:calc(1px * var(--ui-scale-factor)) solid var(--border); border-radius:calc(5.25px * var(--ui-scale-factor));
 color:var(--text); font-size:calc(11px * var(--ui-scale-factor)); padding:calc(6.75px * var(--ui-scale-factor)) calc(7.5px * var(--ui-scale-factor)); font-family:inherit;
 }
 .field textarea{min-height:calc(60px * var(--ui-scale-factor)); resize:vertical;}
 /* Champ date : icône du calendrier claire (thème sombre, color-scheme) et toujours entière :
    taille fixe, sans marge interne, dans un champ assez haut quelle que soit la taille de
    l'interface ou le navigateur. */
 /* Hauteur de ligne explicite (≈ 1,55 em) : en taille compacte, l'icône interne du navigateur
    (1 em + sa marge, notamment sous Firefox) dépassait la ligne « normale » de 11 px et se
    trouvait rognée par le bord du contenu. Padding réduit d'autant : même hauteur totale à 75 %. */
 /* padding-right généreux : Firefox ignore ::-webkit-calendar-picker-indicator (icône native,
    taille non maîtrisable) et la posait collée au bord droit, rognée par l'arrondi du champ. */
 .field input[type=date]{color-scheme:dark; min-height:calc(28px * var(--ui-scale-factor)); line-height:calc(17px * var(--ui-scale-factor)); padding-top:calc(5.75px * var(--ui-scale-factor)); padding-bottom:calc(5.75px * var(--ui-scale-factor)); padding-right:calc(22px * var(--ui-scale-factor));}
 .field input[type=date]::-webkit-calendar-picker-indicator{width:calc(13px * var(--ui-scale-factor)); height:calc(13px * var(--ui-scale-factor)); padding:0; margin:0; cursor:pointer; opacity:.8;}
 .field input[type=date]::-webkit-calendar-picker-indicator:hover{opacity:1;}
 .field select{width:100%;background:var(--surface-3);border:calc(1px * var(--ui-scale-factor)) solid var(--border);border-radius:calc(5.25px * var(--ui-scale-factor));color:var(--text);font-size:calc(11px * var(--ui-scale-factor));padding:calc(6.75px * var(--ui-scale-factor)) calc(7.5px * var(--ui-scale-factor));font-family:inherit;color-scheme:dark;}
 .field select:focus{outline:none;border-color:var(--accent);}
 .field select option{background:var(--surface-3);color:var(--text);}
 .field input:focus, .field textarea:focus{outline:none; border-color:var(--accent);}
  .label-dropdown{position:relative;}
  .label-dropdown-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;gap:calc(7.5px * var(--ui-scale-factor));background:var(--surface-3);border:calc(1px * var(--ui-scale-factor)) solid var(--border);border-radius:calc(5.25px * var(--ui-scale-factor));color:var(--text);padding:calc(6.75px * var(--ui-scale-factor)) calc(7.5px * var(--ui-scale-factor));font-size:calc(10px * var(--ui-scale-factor));font-weight:600;cursor:pointer;}
  .label-dropdown-toggle:hover{border-color:var(--text-faint);}
  .label-dropdown-menu{display:none;position:absolute;z-index:20;left:0;right:0;top:calc(100% + calc(4.5px * var(--ui-scale-factor)));max-height:calc(172.5px * var(--ui-scale-factor));overflow-y:auto;padding:calc(6px * var(--ui-scale-factor));background:var(--surface-2);border:calc(1px * var(--ui-scale-factor)) solid var(--border);border-radius:calc(6px * var(--ui-scale-factor));box-shadow:0 calc(9px * var(--ui-scale-factor)) calc(22.5px * var(--ui-scale-factor)) rgba(0,0,0,.35);}
  .label-dropdown.open .label-dropdown-menu{display:flex;flex-wrap:wrap;gap:calc(5.25px * var(--ui-scale-factor));}
  /* Étiquettes choisies, toujours visibles sous le bouton (même fenêtre fermée) : on voit d'un
     coup d'œil ce qui est sélectionné, sans dérouler le menu. Glissables (curseur "grab") pour
     choisir leur ordre sur la carte ; celle en cours de glisser s'efface à moitié. */
  .label-dropdown-selected{display:flex;flex-wrap:wrap;gap:calc(4.5px * var(--ui-scale-factor));margin-top:calc(6px * var(--ui-scale-factor));}
  .label-dropdown-selected:empty{display:none;}
  .label-chip{
  display:inline-flex; align-items:center; gap:calc(4.5px * var(--ui-scale-factor)); padding:calc(3px * var(--ui-scale-factor)) calc(7.5px * var(--ui-scale-factor)) calc(3px * var(--ui-scale-factor)) calc(4.5px * var(--ui-scale-factor));
  border-radius:calc(4.5px * var(--ui-scale-factor)); border:calc(1px * var(--ui-scale-factor)) solid var(--border); background:var(--surface-3);
  font-size:calc(9px * var(--ui-scale-factor)); font-weight:600; color:var(--text); cursor:grab; user-select:none;
  }
  .label-chip:active{cursor:grabbing;}
  .label-chip.dragging{opacity:.35;}
  .label-chip .dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
 .label-check{
 display:inline-flex; align-items:center; gap:calc(4.5px * var(--ui-scale-factor)); padding:calc(3.75px * var(--ui-scale-factor)) calc(7.5px * var(--ui-scale-factor)) calc(3.75px * var(--ui-scale-factor)) calc(4.5px * var(--ui-scale-factor)); border-radius:calc(4.5px * var(--ui-scale-factor));
 border:calc(1px * var(--ui-scale-factor)) solid var(--border); background:var(--surface-3); font-size:calc(9px * var(--ui-scale-factor)); font-weight:600; color:var(--text-dim);
 cursor:pointer;
 transition:border-color .12s ease,box-shadow .12s ease;
 }
 .label-check input{accent-color:var(--accent);}
 .label-check.checked{border-color:#fff;box-shadow:0 0 0 calc(1px * var(--ui-scale-factor)) rgba(255,255,255,.18);color:var(--text);}
 /* « + » en fin de liste : crée une étiquette dans la fenêtre Étiquettes, cochée d'office au retour. */
 .label-dropdown-add{
 display:inline-flex; align-items:center; justify-content:center; min-width:calc(24px * var(--ui-scale-factor)); padding:calc(3.75px * var(--ui-scale-factor)) calc(6px * var(--ui-scale-factor)); border-radius:calc(4.5px * var(--ui-scale-factor));
 border:calc(1px * var(--ui-scale-factor)) dashed var(--text-faint); background:transparent; color:var(--text-dim);
 font:700 calc(10px * var(--ui-scale-factor))/1 system-ui,sans-serif; cursor:pointer; transition:border-color .12s ease,color .12s ease;
 }
 .label-dropdown-add:hover,.label-dropdown-add:focus-visible{border-color:var(--accent); color:var(--text); outline:none;}
 .manage-labels-link{font-size:calc(9px * var(--ui-scale-factor)); color:var(--accent); background:none; border:none; text-decoration:underline; padding:0; margin-top:calc(6px * var(--ui-scale-factor));}
 .no-labels-hint{font-size:calc(9px * var(--ui-scale-factor)); color:var(--text-faint);}
 .label-row{display:flex; align-items:center; gap:calc(6px * var(--ui-scale-factor)); padding:calc(6px * var(--ui-scale-factor)) 0; border-bottom:calc(1px * var(--ui-scale-factor)) solid var(--border-soft);}
 .label-row:last-of-type{border-bottom:none;}
 .label-row input[type=text]{
 flex:1; background:var(--surface-3); border:calc(1px * var(--ui-scale-factor)) solid var(--border); border-radius:calc(4.5px * var(--ui-scale-factor)); color:var(--text);
 -webkit-text-fill-color:var(--text); caret-color:var(--text);
 font-size:calc(10px * var(--ui-scale-factor)); padding:calc(5.25px * var(--ui-scale-factor)) calc(6px * var(--ui-scale-factor)); font-family:inherit;
 transition:background-color .15s ease, color .15s ease, border-color .15s ease;
 }
 .label-row input:focus{outline:none; border-color:var(--accent);}
/* Les trois éditeurs de carte partagent exactement le même gabarit.
   La colonne de droite réserve la largeur réelle de la palette :
   16 cases de 20 px + 15 espaces de 4 px = 380 px. */
.card-editor-modal{
 max-width:none;
 /* Ajustement final des modales cartes : finition compacte */
 width:min(calc(675px * var(--ui-scale-factor)),calc(100vw - calc(18px * var(--ui-scale-factor))));
}
.card-editor-modal .modal-body{overflow:visible;max-height:none;}
.card-editor-modal .add-card-columns{
 display:grid;
 align-items:start;
}
.card-editor-modal .add-card-right .field{min-width:0;margin-bottom:calc(6px * var(--ui-scale-factor));}
.card-editor-modal .field input[type=date],
.card-editor-modal .label-dropdown{width:100%;}
.modal.card-editor-modal .add-card-right .field{margin-bottom:0;}
/* Le champ Description occupe tout l'espace restant de la colonne de gauche. */
.modal.card-editor-modal .add-card-left .field:last-child{
 flex:1 1 auto;
 display:flex;
 flex-direction:column;
 min-height:0;
}
.card-editor-modal .swatch{
  width:calc(15px * var(--ui-scale-factor));
  height:calc(15px * var(--ui-scale-factor));
  border-radius:calc(3.75px * var(--ui-scale-factor));
}
/* Suite : ces règles l’emportent sur des styles génériques de même spécificité (champs, pastilles, fenêtres) ; elles doivent rester après eux. */
.swatch.none{border-style:dashed;}
.swatch.selected,.theme-swatch.selected{
 border-color:#fff;
 box-shadow:0 0 0 calc(1px * var(--ui-scale-factor)) rgba(255,255,255,.18);
}
.card-editor-modal .field input[type=text]{
  height:calc(31.5px * var(--ui-scale-factor));
  resize:none;
}
/* Éditeur de carte : dimensions des composants */
/* .card-editor-modal.card-editor-modal : spécificité renforcée, pour l’emporter sur les styles génériques sans dépendre de l’ordre. */
.card-editor-modal.card-editor-modal .add-card-columns{
  justify-content:center;
}
.card-editor-modal .add-card-left,
.card-editor-modal .add-card-right{
  min-width:0;
}
/* .card-editor-modal.card-editor-modal : spécificité renforcée, pour l’emporter sur les styles génériques sans dépendre de l’ordre. */
.card-editor-modal.card-editor-modal .swatch-row{
  display:grid;
  grid-template-columns:repeat(16,calc(15px * var(--ui-scale-factor)));
  gap:calc(3px * var(--ui-scale-factor));
  justify-content:start;
}
/* .card-editor-modal.card-editor-modal : spécificité renforcée, pour l’emporter sur les styles génériques sans dépendre de l’ordre. */
.card-editor-modal.card-editor-modal .field textarea{
  min-height:calc(127.5px * var(--ui-scale-factor));
  height:calc(127.5px * var(--ui-scale-factor));
  resize:none;
}
.card-editor-modal .desc-format-toolbar{
  margin-top:calc(3.75px * var(--ui-scale-factor));
}