/* FormLayout — éditeur visuel + vue synthétique */

/* ============ Vue synthétique dans ConfigurationEdit ============ */
.sfl-summary { margin-top: 10px; }
.sfl-group-card { margin-bottom: 12px; }
.sfl-group-header {
    background: #eef3f7 !important;
    border-bottom: 1px solid #d0d8de !important;
}
.sfl-group-body .table { margin: 0; }
.sfl-controls-table th { font-size: 11px; color: #666; font-weight: 600; text-transform: uppercase; }
.sfl-controls-table td { vertical-align: middle; }
.sfl-controls-table code { background: #f4f4f4; padding: 1px 5px; border-radius: 3px; font-size: 12px; }

/* ============ Editeur visuel (popin pleine page) ============ */
.fl-editor-wrapper { font-family: inherit; }

/* Barre d'outils interne (au-dessus du canvas) : undo / redo / quick save / history. */
.fl-editor-inner-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    background: #f3f5f7;
    border: 1px solid #d8dde2;
    border-radius: 4px;
    flex-shrink: 0;
}
.fl-inner-toolbar-left { display: flex; align-items: center; gap: 6px; flex: 1; }
.fl-inner-toolbar-right { display: flex; align-items: center; gap: 6px; }
.fl-toolbar-sep {
    width: 1px;
    height: 24px;
    background: #d0d8de;
    margin: 0 6px;
}
.fl-dirty-indicator {
    font-size: 12px;
    color: transparent;
    margin-left: 8px;
    transition: color 0.2s ease;
}
.fl-dirty-indicator.fl-dirty {
    color: #d68000;
    font-weight: 500;
}

/* Popover d'historique des actions */
.fl-history-list {
    max-height: 360px;
    overflow-y: auto;
}
.fl-history-entry {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    font-size: 12px;
}
.fl-history-entry:hover { background: #f0f7fc; }
.fl-history-entry.current {
    background: #eef6fb;
    font-weight: 500;
}
.fl-history-time {
    color: #888;
    font-family: monospace;
    flex-shrink: 0;
    font-size: 11px;
}
.fl-history-label { flex: 1; color: #333; }
.fl-history-current-badge { color: #1A5276; font-size: 11px; }

.fl-editor-canvas {
    background: #f7f7f7;
}
.fl-editor-canvas .fl-editor-add-group:hover {
    background: #e8eef3;
    border-color: #1A5276 !important;
    color: #1A5276 !important;
}

/* Groupes */
.fl-group-card { box-sizing: border-box; }
.fl-group-box { transition: border-color 0.15s ease; }
.fl-group-header {
    -webkit-user-select: none;
    user-select: none;
}
.fl-group-header:hover { background: #e8eef3; }
.fl-group-drag-handle:active { cursor: grabbing; }

.fl-group-controls-body {
    background: #fafafa;
}

/* Ligne explicite (sortable horizontal) — conteneur Bootstrap row pour les chips d'une meme ligne.
   Chaque ligne est son propre dxSortable, ce qui rend le DnD precis pour chips cote-a-cote. */
.fl-group-controls-body {
    padding: 8px;
    min-height: 50px;
}
.fl-control-row {
    margin: 0;
    min-height: 30px;
    /* row Bootstrap fournit deja display:flex flex-wrap */
}

/* Drop-zone entre lignes (sortable vertical) — discret au repos, large et orange dashed pendant un drag. */
.fl-row-drop-zone {
    height: 6px;
    margin: 2px 0;
    border-radius: 3px;
    transition: height 0.15s ease, background 0.15s ease, border-color 0.15s ease;
    background: transparent;
    border: 1px dashed transparent;
}
.fl-editor-canvas.fl-is-dragging .fl-row-drop-zone {
    height: 28px;
    background: rgba(255, 152, 0, 0.06);
    border-color: rgba(255, 152, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #d68000;
    font-size: 11px;
    font-style: italic;
}
.fl-editor-canvas.fl-is-dragging .fl-row-drop-zone::before {
    content: '↳ Nouvelle ligne';
}
.fl-row-drop-zone-empty {
    min-height: 60px;
    height: auto;
    margin: 4px 0;
    background: rgba(255, 152, 0, 0.04);
    border: 2px dashed rgba(180, 180, 180, 0.6);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.fl-row-drop-zone-hint {
    color: #999;
    font-style: italic;
    font-size: 13px;
}
.fl-editor-canvas.fl-is-dragging .fl-row-drop-zone-empty {
    border-color: #ff9800;
    background: rgba(255, 152, 0, 0.1);
}
/* Override : pour la drop-zone empty, on ne veut pas le ::before "Nouvelle ligne" */
.fl-row-drop-zone-empty::before { content: none !important; }

/* Contrôles chips — header + mock visuel du widget.
   HAUTEUR FIXE : tous les chips ont la meme hauteur (~80px) pour un canvas uniforme,
   quel que soit le type. Le mock s'adapte via flex:1 + overflow:hidden. */
.fl-control-chip { box-sizing: border-box; padding: 0 4px; margin-bottom: 6px; }
.fl-control-chip-inner {
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 6px 8px;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
    height: 76px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;
}
.fl-control-chip-inner:hover {
    border-color: #1A5276;
    background: #f9fbfd;
}
.fl-control-chip-inner.selected {
    border: 2px solid #1A5276;
    background: #f0f7fc;
    padding: 5px 7px;  /* compense le bord 2px */
    box-shadow: 0 0 0 2px rgba(26, 82, 118, 0.1);
}
.fl-control-chip-header {
    display: flex;
    align-items: center;
    font-size: 12px;
    color: #555;
    margin-bottom: 5px;
    flex-shrink: 0;
    height: 22px;
}
.fl-control-drag-handle {
    cursor: grab;
    color: #888;
    margin-right: 6px;
}
.fl-control-drag-handle:active { cursor: grabbing; }
.fl-control-type-icon {
    margin-right: 6px;
    color: #1A5276;
}
.fl-control-label {
    flex: 1;
    font-weight: 500;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fl-control-width-badge {
    font-size: 10px;
    color: #888;
    background: #f4f4f4;
    padding: 1px 5px;
    border-radius: 3px;
    margin-left: 6px;
}
.fl-control-required-badge {
    color: #e67e22;
    margin-left: 4px;
    font-weight: bold;
}
.fl-control-delete-btn {
    cursor: pointer;
    color: #c0392b;
    margin-left: 8px;
    padding: 2px 4px;
    border-radius: 3px;
}
.fl-control-delete-btn:hover { background: rgba(192, 57, 43, 0.1); }

/* Mock visuels — apercu statique du widget reel.
   flex:1 pour remplir la hauteur restante du chip (qui est fixe). overflow:hidden
   pour clip discret quand le contenu (options Radio/MultiCheck) deborde. */
.fl-mock {
    padding: 4px 8px;
    font-size: 12px;
    color: #777;
    background: #fafafa;
    border: 1px solid #d5d5d5;
    border-radius: 3px;
    display: flex;
    align-items: center;
    -webkit-user-select: none;
    user-select: none;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    box-sizing: border-box;
}
.fl-mock-input { display: flex; align-items: center; justify-content: space-between; }
.fl-mock-textarea {
    align-items: flex-start;
    padding-top: 6px;
}
.fl-mock-input-text { flex: 1; }
.fl-mock-input-icon { color: #888; margin-left: 6px; }
.fl-mock-spinners {
    display: inline-flex;
    flex-direction: column;
    line-height: 0.7;
    margin-left: 6px;
    color: #888;
    font-size: 10px;
}
.fl-mock-checkbox {
    border: none;
    background: transparent;
    padding: 4px 0;
    color: #333;
}
.fl-mock-checkbox-box {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 1px solid #999;
    border-radius: 2px;
    background: #fff;
    margin-right: 6px;
    vertical-align: middle;
    flex-shrink: 0;
}
.fl-mock-checkbox-label { color: #333; }
.fl-mock-radio-group, .fl-mock-multicheck {
    border: none;
    background: transparent;
    padding: 4px 0;
    color: #333;
    flex-wrap: wrap;
    gap: 4px 12px;
    min-height: 0;
    /* hauteur fixe du chip impose un overflow sur les options qui debordent */
    overflow: hidden;
    align-content: flex-start;
}
.fl-mock-radio-item, .fl-mock-check-item {
    display: inline-flex;
    align-items: center;
    color: #333;
}
.fl-mock-radio-circle {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 1px solid #999;
    border-radius: 50%;
    background: #fff;
    margin-right: 4px;
    flex-shrink: 0;
}
.fl-mock-radio-circle.selected {
    background: #1A5276;
    border-color: #1A5276;
    box-shadow: inset 0 0 0 2px #fff;
}
.fl-mock-radio-label { font-size: 12px; }
.fl-mock-empty { font-style: italic; color: #aaa; }

/* Mock Title : le label EST le contenu, rendu en heading souligne */
.fl-mock-title {
    background: transparent;
    border: none;
    color: #1A5276;
    font-weight: 600;
    font-size: 14px;
    border-bottom: 1px solid #d0d8de;
    padding: 4px 0;
    min-height: 28px;
}

/* Rendu Title dans la popin d'edition Site (via dxForm template) */
.fl-rendered-title {
    color: #1A5276;
    font-weight: 600;
    font-size: 15px;
    border-bottom: 1px solid #d0d8de;
    padding: 6px 0 4px;
    margin: 4px 0 6px;
}

/* Rendu Title en lecture (formLayoutRenderer mode 'read') */
.form-layout-section-title {
    color: #1A5276;
    font-weight: 600;
    font-size: 15px;
    border-bottom: 1px solid #d0d8de;
    padding: 6px 0 4px;
    margin: 4px 0 6px;
}

/* Palette */
.fl-palette-item {
    -webkit-user-select: none;
    user-select: none;
    transition: background 0.1s ease, border-color 0.1s ease;
}
.fl-palette-item:hover {
    background: #f0f7fc !important;
    border-color: #1A5276 !important;
}
.fl-palette-item:active { cursor: grabbing; }

/* Drop indicator visuel — couleur orange flashy, tres visible.
   Mode 'push' (groupes verticaux) : la placeholder est un "trou" rectangulaire
   orange en pointille la ou l'item sera lache.
   Mode 'indicate' (controles horizontaux dans grille wrap) : la placeholder est
   une ligne verticale orange epaisse entre les items. */
.dx-sortable-placeholder {
    opacity: 1 !important;
    background: #ff9800 !important;
    box-shadow: 0 0 0 2px rgba(255, 152, 0, 0.25);
    border-radius: 3px !important;
}
/* Cas mode 'push' (groupes) : la placeholder a la taille d'un groupe, on la rend
   en cadre orange dashed avec un fond leger pour bien la distinguer. */
.fl-editor-canvas > div > .dx-sortable-placeholder,
.fl-editor-groups > .dx-sortable-placeholder {
    background: rgba(255, 152, 0, 0.15) !important;
    border: 2px dashed #ff9800 !important;
    box-shadow: none;
    min-height: 50px !important;
}
/* Cas mode 'indicate' sur une ligne (.fl-control-row, sortable horizontal) :
   placeholder = ligne verticale fine entre les chips cote-a-cote. */
.fl-control-row > .dx-sortable-placeholder {
    background: #ff9800 !important;
    border: none !important;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
    min-width: 5px !important;
    min-height: 30px !important;
    border-radius: 3px !important;
}
/* Drop-zone inter-ligne (.fl-row-drop-zone, sortable vertical, mode 'push') :
   on rend toute la drop-zone comme une "cible" en surbrillance orange pendant le drag.
   Le placeholder y est plus discret car la zone elle-meme est deja visible. */
.fl-row-drop-zone > .dx-sortable-placeholder {
    background: rgba(255, 152, 0, 0.3) !important;
    border: 1px dashed #ff9800 !important;
    box-shadow: none;
    min-height: 24px !important;
    min-width: 60px;
    border-radius: 3px !important;
}

/* Pendant un drag, la zone "Ajouter un groupe" devient une cible visible (creation
   d'un nouveau groupe a la fin). Les .fl-row-drop-zone (inter-ligne) ont leur propre
   surbrillance plus haut dans ce fichier. */
.fl-editor-canvas.fl-is-dragging .fl-editor-add-group {
    border-color: #ff9800 !important;
    background: rgba(255, 152, 0, 0.06);
    color: #d68000 !important;
}

/* ============ Popin Propriétés (style Visual Studio Properties) ============ */
/* Layout compact en grille 2-colonnes label/éditeur, regroupé par catégories.
   Pas d'espacements généreux : densité maximale, façon panneau technique. */

/* On cible le wrapper dxPopup de la popin propriétés via :has() (modernes) ou
   via la classe .fl-props-overlay ajoutée par JS au onShown (fallback). */
.dx-overlay-content:has(.fl-props-popup-content),
.dx-overlay-content.fl-props-overlay {
    border: 2px solid #1A5276 !important;
    border-radius: 4px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.30),
                0 0 0 1px rgba(26, 82, 118, 0.20) !important;
    background: #fbfcfd !important;
}
.dx-overlay-content:has(.fl-props-popup-content) .dx-popup-title,
.dx-overlay-content.fl-props-overlay .dx-popup-title {
    background: #1A5276 !important;
    border-bottom: 2px solid #154565 !important;
    padding: 6px 10px !important;
    min-height: 0 !important;
}
.dx-overlay-content:has(.fl-props-popup-content) .dx-popup-title .dx-toolbar-text,
.dx-overlay-content:has(.fl-props-popup-content) .dx-popup-title .dx-toolbar-label,
.dx-overlay-content:has(.fl-props-popup-content) .dx-popup-title .dx-toolbar-label > div,
.dx-overlay-content.fl-props-overlay .dx-popup-title .dx-toolbar-text,
.dx-overlay-content.fl-props-overlay .dx-popup-title .dx-toolbar-label,
.dx-overlay-content.fl-props-overlay .dx-popup-title .dx-toolbar-label > div {
    color: #fff !important;
    font-weight: 600 !important;
    font-size: 13px !important;
}
.dx-overlay-content:has(.fl-props-popup-content) .dx-popup-title .dx-closebutton,
.dx-overlay-content:has(.fl-props-popup-content) .dx-popup-title .dx-closebutton .dx-icon,
.dx-overlay-content.fl-props-overlay .dx-popup-title .dx-closebutton,
.dx-overlay-content.fl-props-overlay .dx-popup-title .dx-closebutton .dx-icon {
    color: #fff !important;
}
.dx-overlay-content:has(.fl-props-popup-content) .dx-popup-title .dx-closebutton:hover,
.dx-overlay-content.fl-props-overlay .dx-popup-title .dx-closebutton:hover {
    background: rgba(255, 255, 255, 0.15) !important;
}

.fl-props-popup-content { padding: 0 !important; background: #fbfcfd; }
.fl-props-inner {
    font-size: 12px;
    font-family: 'Segoe UI', Tahoma, sans-serif;
    color: #1f1f1f;
    background: #fbfcfd;
}

.fl-props-grid {
    display: block;
    border-top: 1px solid #d0d0d0;
}

.fl-props-category {
    background: #ECECF0;
    color: #1A5276;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 4px 8px;
    border-bottom: 1px solid #d0d0d0;
    border-top: 1px solid #d0d0d0;
    margin-top: -1px; /* fusionne avec la séparation précédente */
}
.fl-props-category:first-child { border-top: 0; margin-top: 0; }

.fl-props-row {
    display: grid;
    grid-template-columns: 42% 58%;
    align-items: stretch;
    min-height: 24px;
    border-bottom: 1px solid #f0f0f0;
}
.fl-props-row:hover { background: #f5f9fc; }

.fl-props-label {
    padding: 3px 8px;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-right: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
}
.fl-props-label-readonly { color: #888; }

.fl-props-editor {
    padding: 0;
    display: flex;
    align-items: stretch;
    min-width: 0; /* permet le shrink des inputs */
}

.fl-props-editor input[type="text"],
.fl-props-editor select {
    border: 0 !important;
    background: transparent !important;
    width: 100%;
    padding: 2px 6px;
    font-size: 12px;
    font-family: inherit;
    color: #1f1f1f;
    height: auto;
    min-height: 22px;
    box-shadow: none !important;
    outline: none !important;
    border-radius: 0 !important;
    margin: 0;
}
.fl-props-editor input[type="text"]::placeholder { color: #aaa; font-style: italic; }
.fl-props-editor input[type="text"]:focus,
.fl-props-editor select:focus {
    background: #fff !important;
    box-shadow: inset 0 0 0 1px #1A5276 !important;
}
.fl-props-editor input[type="checkbox"] {
    margin: 4px 6px;
    transform: scale(1.05);
    cursor: pointer;
}
.fl-props-editor .fl-props-static {
    padding: 3px 6px;
    color: #666;
    font-style: italic;
}

/* Options (Select / Radio / MultiCheck) : tableau compact value | label | × */
.fl-props-options { padding: 4px 6px; }
.fl-props-option-row {
    display: grid;
    grid-template-columns: 1fr 1fr 22px;
    gap: 3px;
    margin-bottom: 2px;
    align-items: center;
}
.fl-props-option-row input[type="text"] {
    height: 22px;
    font-size: 11px;
    padding: 1px 4px;
    border: 1px solid #d0d0d0;
    background: #fff;
    border-radius: 0;
    color: #1f1f1f;
}
.fl-props-option-row input[type="text"]:focus { border-color: #1A5276; outline: none; }
.fl-props-option-row .fl-props-opt-del {
    height: 22px;
    width: 22px;
    border: 1px solid #d0d0d0;
    background: #fafafa;
    color: #c0392b;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    font-size: 10px;
}
.fl-props-option-row .fl-props-opt-del:hover { background: #fdecea; }
.fl-props-opt-add {
    margin-top: 4px;
    width: 100%;
    border: 1px dashed #aaa;
    background: transparent;
    color: #1A5276;
    padding: 3px;
    cursor: pointer;
    font-size: 11px;
}
.fl-props-opt-add:hover { background: #f0f7fc; border-color: #1A5276; }

/* Toggles des 4 bordures (haut/droite/bas/gauche) */
.fl-props-border-toggles {
    display: flex;
    gap: 2px;
    padding: 2px 4px;
    width: 100%;
    align-items: center;
}
.fl-border-side-btn {
    width: 28px;
    height: 22px;
    border: 1px solid #ccc;
    background: #fff;
    color: #888;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    font-size: 10px;
    border-radius: 2px;
}
.fl-border-side-btn:hover { background: #f0f7fc; border-color: #1A5276; color: #1A5276; }
.fl-border-side-btn.active {
    background: #1A5276;
    border-color: #154565;
    color: #fff;
}

/* Color picker : swatch + champ hex + bouton reset */
.fl-props-color-wrap {
    display: flex;
    gap: 3px;
    padding: 2px 4px;
    width: 100%;
    align-items: center;
}
.fl-props-color-swatch {
    width: 26px;
    height: 22px;
    border: 1px solid #ccc;
    padding: 0;
    cursor: pointer;
    flex: 0 0 26px;
    border-radius: 2px;
    background: transparent;
}
.fl-props-color-hex {
    flex: 1;
    min-width: 0;
    height: 22px;
    font-size: 11px;
    padding: 1px 4px;
    border: 1px solid #d0d0d0 !important;
    background: #fff !important;
    border-radius: 2px !important;
    font-family: monospace;
    color: #1f1f1f;
    text-transform: uppercase;
    box-shadow: none !important;
}
.fl-props-color-hex:focus { border-color: #1A5276 !important; outline: none !important; }
.fl-props-color-hex::placeholder { color: #aaa; font-style: italic; text-transform: none; }
.fl-props-color-reset {
    width: 22px;
    height: 22px;
    border: 1px solid #d0d0d0;
    background: #fafafa;
    color: #999;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    font-size: 9px;
    border-radius: 2px;
    flex: 0 0 22px;
}
.fl-props-color-reset:hover { background: #fff; color: #c0392b; border-color: #c0392b; }

/* Bouton de suppression en pied de popin */
.fl-props-footer {
    padding: 8px;
    border-top: 1px solid #d0d0d0;
    background: #fafafa;
}
.fl-props-footer button {
    width: 100%;
    padding: 4px 8px;
    font-size: 11px;
}

/* ============ Bouton Code JSON (toolbar haute du popup éditeur) ============ */
.fl-toolbar-json-btn { margin-right: 30px; }

/* ============ Éditeur JSON brut ============ */
.fl-json-editor {
    flex: 1;
    width: 100%;
    font-family: 'Cascadia Code', 'Consolas', 'Courier New', monospace;
    font-size: 13px;
    line-height: 1.5;
    background: #1e1e1e;
    color: #d4d4d4;
    border: 1px solid #444;
    border-radius: 4px;
    padding: 12px;
    resize: none;
    outline: none;
    box-sizing: border-box;
    -moz-tab-size: 2;
    tab-size: 2;
    white-space: pre;
    overflow: auto;
}
.fl-json-editor:focus {
    border-color: #1A5276;
    box-shadow: 0 0 0 2px rgba(26, 82, 118, 0.25);
}
.fl-json-errors { flex-shrink: 0; max-height: 180px; overflow-y: auto; }
.fl-json-errors:empty { display: none; }

/* ============ Rendu lecture des champs perso avec groupes (form-layout-renderer.ts) ============ */
.form-layout-row { margin: 0; }
.form-layout-group-col { padding: 0 5px; margin-bottom: 10px; }
.form-layout-group { padding: 5px; }
.form-layout-group-bordered {
    border: 1px solid #d0d8de;
    border-radius: 4px;
    background: #fff;
}
.form-layout-group-title {
    font-weight: 600;
    color: #1A5276;
    padding: 4px 8px;
    border-bottom: 1px solid #eee;
    margin-bottom: 8px;
}
.form-layout-group-body { padding: 4px; }
.form-layout-controls-row { margin: 0; }
.form-layout-control-read { margin-bottom: 8px; padding: 0 5px; }
.form-layout-control-read .form-layout-control-label {
    font-size: 11px;
    color: #888;
    text-transform: uppercase;
    margin-bottom: 2px;
}
.form-layout-control-read .form-layout-control-value {
    font-size: 14px;
    color: #333;
}