/* fonctions/cartes/fiche.css — fenêtres carte
   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 carte (liste, agenda, détails) : version compacte ====
   Même contenu, gabarit resserré :
   - la colonne de droite fait exactement la largeur de la palette (16 × 20 px + 15 × 4 px + 2 × 2 px = 384 px),
     la fenêtre s'arrête donc juste après la palette ;
   - la colonne de gauche (titre, liste, description) est réduite ;
   - la description descend jusqu'en bas de la colonne (alignée sur Échéance) au lieu de rester courte. */
.modal.card-editor-modal{
 width:min(calc(507px * var(--ui-scale-factor)),calc(100vw - calc(18px * var(--ui-scale-factor))));
 max-width:none;
}
.modal.card-editor-modal .modal-head{padding:calc(7.5px * var(--ui-scale-factor)) calc(9px * var(--ui-scale-factor)) calc(6px * var(--ui-scale-factor));}
.modal.card-editor-modal .add-card-left,
.modal.card-editor-modal .add-card-right{
 min-width:0;
 display:flex;
 flex-direction:column;
 gap:calc(6px * var(--ui-scale-factor));
}
.modal.card-editor-modal .field-label{margin-bottom:calc(3px * var(--ui-scale-factor));}
.modal.card-editor-modal .add-card-left .description-editor-field{
 flex:1 1 0;
 height:auto;
 min-height:calc(52.5px * var(--ui-scale-factor));
 max-height:none;
 overflow:auto;
 padding:calc(5.25px * var(--ui-scale-factor)) calc(6px * var(--ui-scale-factor));
}
.modal.card-editor-modal .desc-format-toolbar{margin-top:calc(4.5px * var(--ui-scale-factor));flex-shrink:0;}
.modal.card-editor-modal .modal-foot{padding:calc(6px * var(--ui-scale-factor)) calc(9px * var(--ui-scale-factor)) calc(7.5px * var(--ui-scale-factor));}

/* ==== Fenêtres carte : champ Titre plus fin + « Retirer la date » sans déformation ==== */
.modal.card-editor-modal .field textarea:is(#newListCardTitle,#agendaNewCardTitle,#cardTitleInput){
 height:calc(27px * var(--ui-scale-factor));
 min-height:calc(27px * var(--ui-scale-factor));
 max-height:calc(54px * var(--ui-scale-factor));
 padding:calc(6px * var(--ui-scale-factor)) calc(7.5px * var(--ui-scale-factor));
 line-height:calc(13.5px * var(--ui-scale-factor));
 resize:none;
 overflow-y:hidden;
 box-sizing:border-box;
}
/* Libellé + action contextuelle sur une même ligne ; la ligne garde toujours la même hauteur. */
.modal.card-editor-modal .field-label-row{
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:calc(6px * var(--ui-scale-factor));
 min-height:calc(10.5px * var(--ui-scale-factor));
 margin-bottom:calc(3px * var(--ui-scale-factor));
}
.modal.card-editor-modal .field-label-row .field-label{margin-bottom:0;}
.modal.card-editor-modal .field-clear-btn{
 padding:0 calc(1.5px * var(--ui-scale-factor));
 border:0;
 background:none;
 color:var(--text-dim);
 font:inherit;
 font-size:calc(8px * var(--ui-scale-factor));
 line-height:calc(10.5px * var(--ui-scale-factor));
 text-decoration:underline;
 text-underline-offset:calc(1.5px * var(--ui-scale-factor));
 cursor:pointer;
}
.modal.card-editor-modal .field-clear-btn:hover:not(:disabled),
.modal.card-editor-modal .field-clear-btn:focus-visible{color:var(--text);}
/* Sans date : le bouton reste dans la mise en page mais devient invisible et inactif. */
.modal.card-editor-modal .field-clear-btn:disabled{visibility:hidden;}
/* Fenêtre Étiquettes : étiquettes compactes sur trois colonnes (elles seront nombreuses),
   palette identique à celle des fenêtres carte (16 × 20 px), fenêtre calée sur la largeur de la palette (384 px). */
.modal.labels-manager{width:min(calc(307.5px * var(--ui-scale-factor)),calc(100vw - calc(18px * var(--ui-scale-factor))));max-width:none;font-size:var(--card-font-size);}

/* ==== Fenêtres carte, Étiquettes et Nouvelle liste : ni voile sombre ni flou, le tableau reste net.
   La classe est posée par le script (voir « Fenêtres déplaçables ») : pas de dépendance à :has(). ==== */
.overlay.see-through{
 background:transparent;
 -webkit-backdrop-filter:none;
 backdrop-filter:none;
}

/* ---- #labelColorRow ---- */
#labelColorRow .swatch{padding:0;}

/* ---- .add-card-columns ---- */
/* Contenu commun aux trois fenêtres carte. */
.add-card-columns{display:grid;align-items:start;}

/* ---- .add-card-left ---- */
.add-card-left,.add-card-right{min-width:0;display:flex;flex-direction:column;gap:calc(6px * var(--ui-scale-factor));}
/* Grille de la fiche (venue de agenda.css à l'étape 9) ; l'écran étroit la surcharge plus bas. */
.modal.card-editor-modal .modal-body.add-card-columns{
 display:grid;
 grid-template-columns:calc(187.5px * var(--ui-scale-factor)) calc(288px * var(--ui-scale-factor));
 gap:calc(12px * var(--ui-scale-factor));
 justify-content:start;
 align-items:stretch;
 padding:calc(9px * var(--ui-scale-factor));
 overflow:visible;
 max-height:none;
}
/* ==== Fenêtres carte — écran étroit (bloc « suite », rapatrié à l’étape 9) ====
   Doit suivre la grille .add-card-columns ci-dessus (même spécificité). */
@media (max-width:700px){
 .modal.card-editor-modal{width:calc(100vw - calc(18px * var(--ui-scale-factor)));}
 .modal.card-editor-modal .modal-body.add-card-columns{grid-template-columns:minmax(0,1fr);}
 .modal.card-editor-modal .add-card-left .description-editor-field{flex:0 0 auto;min-height:calc(90px * var(--ui-scale-factor));max-height:45vh;}
}