/* Assistant de requête (assistant-requete.js) — fenêtre <dialog> */

.qa-dialogue {
    width: min(1760px, 96vw);
    /* Hauteur fixe : la fenêtre ne doit pas se déplacer quand son contenu change */
    height: min(1110px, 94vh);
    margin: auto;
    padding: 0;
    border: 1px solid var(--qc-border);
    border-radius: var(--qc-radius-lg);
    box-shadow: var(--qc-shadow-pop);
    background: var(--qc-surface);
    color: var(--qc-ink);
    overflow: hidden;
}
.qa-dialogue[open] { display: flex; flex-direction: column; }
/* Fenêtre ouverte : la page dessous ne défile plus, et le défilement d'une zone de la
   fenêtre arrivée en bout de course n'est pas transmis à la page */
html:has(.qa-dialogue[open]), body:has(.qa-dialogue[open]) { overflow: hidden; }
.qa-dialogue, .qa-corps, .qa-droite, .qa-liste, .qa-diagramme, .qa-sql-texte { overscroll-behavior: contain; }
.qa-dialogue::backdrop { background: rgba(33, 31, 47, .45); }

.qa-entete {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 18px;
    background: linear-gradient(135deg, var(--qc-accent) 0%, var(--qc-accent-2) 100%);
    color: #fff;
}
.qa-entete h2 { font-size: 1.15rem; margin: 0; }
.qa-fermer {
    border: 0; background: transparent; color: #fff; font-size: 1.2rem; cursor: pointer;
    width: 32px; height: 32px; border-radius: 50%;
}
.qa-fermer:hover, .qa-fermer:focus-visible { background: rgba(255, 255, 255, .2); }

/* Deux colonnes de hauteur fixe : à gauche le modèle de la base et la requête construite,
   toujours visibles ; à droite les choix (tables, calculs, conditions, tri), seule partie qui
   défile, sur toute la hauteur. Le diagramme défile dans son propre cadre. */
.qa-corps {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 400px);
    grid-template-rows: minmax(0, 1fr); gap: 16px;
    padding: 14px 18px; overflow: hidden; flex: 1 1 auto; min-height: 0;
}
.qa-corps h3 { font-size: .95rem; margin: 0 0 8px; color: var(--qc-ink-soft); }

/* Modèle de la base : diagramme cliquable ou liste */
.qa-gauche { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.qa-barre { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.qa-barre h3 { margin: 0; }
.qa-onglets { display: inline-flex; border: 1px solid var(--qc-border-strong); border-radius: 999px; overflow: hidden; }
.qa-onglets button {
    border: 0; background: var(--qc-surface); color: var(--qc-ink-soft); font: inherit; font-size: .85rem;
    padding: 3px 12px; cursor: pointer;
}
.qa-onglets button.qa-actif { background: var(--qc-accent); color: #fff; }
.qa-ajuster { margin-left: auto; }
.qa-aide { margin: 0 0 8px; }
.qa-dialogue[data-vue="diagramme"] .qa-liste,
.qa-dialogue[data-vue="liste"] .qa-diagramme,
.qa-dialogue[data-vue="liste"] .qa-ajuster { display: none; }
.qa-diagramme { flex: 1 1 auto; min-height: 0; max-height: none; }
.qa-liste { overflow: auto; flex: 1 1 auto; min-height: 0; }
.qa-diagramme .boite { cursor: pointer; }
.qa-diagramme .boite:hover .cadre,
.qa-diagramme .boite:focus-visible .cadre { stroke: var(--qc-accent); stroke-width: 2.5; }
.qa-diagramme .boite:focus { outline: none; }
.qa-diagramme .boite.qa-choisie .cadre { stroke: var(--qc-accent-2); stroke-width: 3.5; fill: var(--qc-accent-soft); }
.qa-diagramme .boite.qa-choisie .entete { fill: var(--qc-accent-2); }
/* Flèches des clés étrangères utilisées par les jointures de la requête */
.qa-diagramme svg .lien.qa-utilise { stroke: var(--qc-accent-2); stroke-width: 3.5; stroke-opacity: 1; }

/* Tables de la base (vue liste) */
.qa-filtre {
    width: 100%; padding: 6px 8px; margin-bottom: 8px;
    border: 1px solid var(--qc-border-strong); border-radius: var(--qc-radius-sm); font: inherit;
}
.qa-tables { list-style: none; display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.qa-table {
    width: 100%; text-align: left; padding: 6px 10px; font: inherit; cursor: pointer;
    border: 1px solid var(--qc-border); border-radius: var(--qc-radius-sm); background: var(--qc-surface-2);
    color: var(--qc-ink);
}
.qa-table:hover, .qa-table:focus-visible { border-color: var(--qc-accent); background: var(--qc-accent-soft); }
.qa-table.qa-choisie { border-color: var(--qc-accent); font-weight: 600; }
.qa-compte { float: right; color: var(--qc-accent); }

/* Tables choisies */
.qa-droite {
    display: flex; flex-direction: column; gap: 10px; min-width: 0; min-height: 0;
    overflow-y: auto; padding-right: 4px;
}
.qa-vide { color: var(--qc-ink-faint); font-style: italic; }
.qa-carte {
    border: 1px solid var(--qc-border); border-radius: var(--qc-radius-md);
    padding: 10px 12px; background: var(--qc-surface);
}
.qa-carte.qa-isolee { border-color: var(--qc-warn-border); background: var(--qc-warn-soft); }
.qa-carte header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.qa-mini {
    border: 0; background: transparent; cursor: pointer; color: var(--qc-ink-faint);
    width: 26px; height: 26px; border-radius: 50%; flex: none;
}
.qa-mini:hover, .qa-mini:focus-visible { background: var(--qc-danger-soft); color: var(--qc-danger); }

.qa-jointure, .qa-choix {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    margin-bottom: 6px; font-size: .88rem;
}
.qa-jointure select { padding: 2px 4px; font: inherit; border-radius: 6px; border: 1px solid var(--qc-border-strong); }
.qa-carte code { font-size: .85rem; overflow-wrap: anywhere; }

.qa-colonnes { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.qa-colonne { display: inline-flex; align-items: center; gap: 4px; font-size: .9rem; cursor: pointer; }
.qa-pk { text-decoration: underline; }

.qa-message { padding: 8px 12px; border-radius: var(--qc-radius-sm); font-size: .9rem; }
.qa-ok { background: var(--qc-ok-soft); border: 1px solid var(--qc-ok-border); color: var(--qc-ok); }
.qa-info { background: var(--qc-accent-soft); border: 1px solid var(--qc-border-strong); }
.qa-erreur { color: var(--qc-danger); }
.qa-avertissements {
    padding: 8px 12px 8px 28px; border-radius: var(--qc-radius-sm); font-size: .88rem;
    background: var(--qc-warn-soft); border: 1px solid var(--qc-warn-border); color: var(--qc-warn);
}

/* Niveau 2 : conditions (WHERE), tri (ORDER BY), DISTINCT */
.qa-section {
    border-top: 1px solid var(--qc-border); padding-top: 10px; display: flex; flex-direction: column; gap: 6px;
}
.qa-section h3 { margin: 0 0 2px; }
.qa-condition {
    display: flex; flex-direction: column; gap: 4px; padding: 6px 8px;
    border: 1px solid var(--qc-border); border-radius: var(--qc-radius-sm); background: var(--qc-surface-2);
}
.qa-retirer { margin-left: auto; }
/* Listes à libellés longs (fonctions, opérateurs) : elles rétrécissent plutôt que de repousser le ✕ */
.qa-condition-ligne select { flex: 0 1 auto; min-width: 0; text-overflow: ellipsis; }
.qa-condition > .qa-condition-ligne:first-child { flex-wrap: nowrap; }
.qa-condition > .qa-condition-ligne:first-child code { flex: 0 1 auto; min-width: 0; }
.qa-valeurs { padding-left: 4px; }
.qa-condition-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .9rem; }
.qa-condition-ligne code { font-size: .85rem; overflow-wrap: anywhere; }
.qa-section select, .qa-valeur {
    padding: 3px 6px; font: inherit; font-size: .88rem; max-width: 100%;
    border: 1px solid var(--qc-border-strong); border-radius: 6px; background: var(--qc-surface);
}
.qa-valeur { width: 9em; flex: 1 1 7em; }
.qa-ajout { align-self: flex-start; color: var(--qc-accent); }
.qa-alias { flex: 0 1 12em; font-family: var(--qc-mono, monospace); }
.qa-combinaison { font-size: .88rem; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.qa-puce {
    display: inline-flex; align-items: center; gap: 2px; padding: 0 0 0 8px; font-size: .85rem;
    border: 1px solid var(--qc-border-strong); border-radius: 999px; background: var(--qc-accent-soft);
}
.qa-puce .qa-mini { width: 22px; height: 22px; }
.qa-indice { font-size: .8rem; color: var(--qc-ink-faint); }
.qa-distinct { display: inline-flex; align-items: center; gap: 6px; font-size: .9rem; cursor: pointer; }

/* Requête construite */
.qa-sql { padding-top: 10px; flex: none; }
.qa-sql-titre { font-size: .85rem; font-weight: 600; color: var(--qc-ink-soft); margin-bottom: 4px; }
.qa-sql-texte {
    border: 1px solid var(--qc-border-strong); border-radius: var(--qc-radius-sm);
    max-height: 9.5em; overflow: auto; background: var(--qc-surface-2);
}
.qa-sql-texte .CodeMirror { height: auto; background: transparent; }
.qa-sql-texte pre { margin: 0; padding: 8px 10px; white-space: pre-wrap; font-size: .9rem; }

.qa-pied {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 10px 18px 14px; border-top: 1px solid var(--qc-border); flex: none;
}
.qa-espace { flex: 1; }

@media (max-width: 800px) {
    /* Une colonne : modèle puis tables empilés, défilement commun */
    /* Une colonne : modèle, choix, puis la requête collée en bas de la zone qui défile
       (.qa-gauche s'efface pour que la requête puisse passer après les choix) */
    .qa-corps { display: flex; flex-direction: column; overflow: auto; padding-bottom: 0; }
    .qa-gauche { display: contents; }
    .qa-droite { overflow: visible; padding-right: 0; flex: none; }
    .qa-sql {
        order: 1; position: sticky; bottom: 0; z-index: 1; flex: none;
        background: var(--qc-surface); padding-bottom: 10px; border-top: 1px solid var(--qc-border);
    }
    .qa-barre { flex-wrap: wrap; }
    .qa-onglets { flex: none; }
    /* Une seule colonne : la hauteur du modèle ne peut plus venir de la grille */
    .qa-diagramme { flex: none; height: 50vh; max-height: 50vh; }
    .qa-liste { flex: none; max-height: 50vh; }
    .qa-tables { flex-direction: row; flex-wrap: wrap; }
    .qa-tables li { flex: 0 0 auto; }
    .qa-table { width: auto; }
}