/* Rapport de recherche — écran interne (admin).
   Deux colonnes : les recherches du débouché à gauche, le rapport à droite. La lecture va
   toujours dans le même sens, et la colonne de gauche reste visible pendant qu'on compare
   plusieurs recherches d'un même débouché. */

/* 1360 px, comme le rapport de croisements (.cr-wrap). Cet écran affiche une colonne de
   recherches EN PLUS d'un tableau de sept colonnes : les serrer plus étroit rendait le
   tableau illisible. Les deux rapports partagent désormais le même gabarit, appliqué au
   même endroit — un conteneur interne, jamais la vue. */
.sr-wrap {
    padding: 24px;
    max-width: 1360px;
    margin: 0 auto;
}

/* Même taille que le rapport de croisements : sans valeur explicite, ce titre héritait
   du 1.5em par défaut du navigateur et paraissait plus gros que l'autre écran. */
.sr-header h2 {
    margin: 0 0 4px;
    font-size: 1.25rem;
}

.sr-sub {
    color: #6b7280;
    font-size: 13px;
    margin: 0;
}

.sr-picker {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 18px 0;
    padding: 14px 16px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
}

.sr-picker label {
    font-weight: 600;
}

.sr-picker input {
    flex: 1;
    min-width: 260px;
    padding: 8px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font: inherit;
}

.sr-hint {
    font-size: 12px;
    color: #6b7280;
}

/* Deux colonnes : les recherches du débouché à gauche, le rapport à droite.
   J'avais supprimé cette disposition pour aligner l'écran sur le rapport de croisements —
   c'était une perte : la colonne reste visible pendant qu'on compare plusieurs recherches
   d'un même débouché, et c'est précisément ce qu'on fait ici. Le rapport de croisements,
   lui, ne porte que sur UN gisement : il n'a rien à lister à côté. */
.sr-body {
    display: grid;
    grid-template-columns: minmax(230px, 300px) minmax(0, 1fr);
    gap: 22px;
    align-items: start;
}

.sr-col-searches {
    position: sticky;
    top: 12px;
}

.sr-searches {
    flex-direction: column;
}

@media (max-width: 900px) {
    .sr-body { grid-template-columns: 1fr; }
    .sr-col-searches { position: static; }
}

/* --- colonne des recherches --- */

.sr-searches {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sr-search {
    width: 100%;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    cursor: pointer;
    font: inherit;
}

.sr-search:hover {
    border-color: #2563eb;
}

.sr-search.is-active {
    border-color: #2563eb;
    box-shadow: inset 3px 0 0 #2563eb;
}

.sr-search-name {
    font-weight: 600;
}

.sr-search-meta,
.sr-search-date {
    font-size: 12px;
    color: #6b7280;
}

/* --- rapport --- */

.sr-report-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.sr-report-head h3 {
    margin: 0;
    font-size: 1.05rem;
}

.sr-toggle {
    padding: 7px 12px;
    border: 1px solid #2563eb;
    background: transparent;
    color: #2563eb;
    border-radius: 6px;
    cursor: pointer;
    font: inherit;
}

.sr-stats {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 14px 0;
    padding: 0;
}

.sr-stats li {
    padding: 6px 12px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    font-size: 13px;
}

.sr-blocages {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sr-blocages li {
    padding: 8px 12px;
    border-left: 3px solid #e5e7eb;
    background: #f9fafb;
    font-size: 13px;
}

/* Une donnée à renseigner se corrige ; un blocage avéré, non. La couleur porte cette
   différence, qui est la seule qui compte pour décider quoi faire. */
.sr-blocage-a_renseigner { border-left-color: #f59e0b; }
.sr-blocage-bloquant     { border-left-color: #ef4444; }
.sr-blocage-conforme     { border-left-color: #10b981; }

.sr-motifs ul {
    margin: 6px 0 18px;
    padding-left: 20px;
    font-size: 13px;
}

.sr-group {
    margin: 22px 0;
}

.sr-group h4 {
    margin: 0 0 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.sr-badge {
    padding: 2px 9px;
    background: #f3f4f6;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
}

/* Le tableau défile dans son cadre : la page ne doit jamais partir en travers. */
.sr-table-wrap {
    overflow-x: auto;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}

.sr-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.sr-table th,
.sr-table td {
    padding: 8px 10px;
    text-align: left;
    border-bottom: 1px solid #f3f4f6;
    vertical-align: top;
}

.sr-table th {
    background: #f9fafb;
    font-weight: 600;
    white-space: nowrap;
}

.sr-gis {
    font-weight: 600;
}

.sr-why {
    max-width: 420px;
}

.sr-cat {
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.sr-cat-RETENU  { background: #dcfce7; color: #166534; }
.sr-cat-RESERVE { background: #fef3c7; color: #92400e; }
.sr-cat-ECARTE  { background: #fee2e2; color: #991b1b; }
.sr-cat-MASQUE  { background: #e5e7eb; color: #374151; }

.sr-vide,
.sr-loading,
.sr-erreur {
    padding: 16px;
    color: #6b7280;
    font-size: 14px;
}

.sr-erreur {
    color: #b91c1c;
}

.sr-teaser {
    margin-top: 16px;
    padding: 10px 12px;
    background: #f9fafb;
    border-radius: 8px;
}

/* Statut du croisement, vocabulaire avant-vente. */
.sr-croisement {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    background: #e0e7ff;
    color: #3730a3;
    font-size: 11px;
    font-weight: 600;
}

/* Posé par l'algorithme, pas par un humain : à ne pas confondre avec une décision.
   C'est la distinction qui a motivé la liste blanche côté débouché. */
.sr-croisement-auto {
    background: #f1f5f9;
    color: #64748b;
    font-weight: 500;
    font-style: italic;
}

.sr-source {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 6px;
    border-radius: 4px;
    background: #dcfce7;
    color: #166534;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

/* --- Accordéons ------------------------------------------------------------------- */

.sr-group > summary,
.sr-criteres > summary {
    cursor: pointer;
    font-weight: 600;
    padding: 10px 0;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
}

.sr-group > summary::-webkit-details-marker,
.sr-criteres > summary::-webkit-details-marker { display: none; }

.sr-group > summary::before,
.sr-criteres > summary::before {
    content: '▶';
    font-size: 11px;
    color: #8a94a1;
    transition: transform 0.12s;
}

.sr-group[open] > summary::before,
.sr-criteres[open] > summary::before { transform: rotate(90deg); }

.sr-criteres {
    margin: 12px 0 4px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 0 14px;
    background: #f9fafb;
}

.sr-criteres-grille {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px 20px;
    margin: 0 0 14px;
}

.sr-criteres-grille > div { min-width: 0; }
.sr-criteres-grille dt { font-size: 12px; color: #6b7280; margin: 0; }
.sr-criteres-grille dd { margin: 2px 0 0; font-weight: 600; overflow-wrap: anywhere; }

.sr-report-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Ouvre la fiche Airtable : la recherche s'y corrige, c'est elle la source. Modifier
   depuis le portail supposerait de dupliquer le formulaire du débouché et de contourner
   la règle qui lui interdit de toucher aux recherches créées par Greenr. */
.sr-modifier {
    padding: 7px 12px;
    border: 1px solid #cfd6de;
    border-radius: 6px;
    color: #37414f;
    text-decoration: none;
    font-size: 13px;
    white-space: nowrap;
}

.sr-modifier:hover { background: #f2f4f7; }

/* La grille de contraintes est rendue par le composant partagé : à l'intérieur d'un
   accordéon, elle ne doit pas hériter de la marge haute prévue pour un flux normal. */
.sr-criteres .cu-liste { margin-bottom: 14px; }

/* Liens vers Airtable. Discrets : dans un tableau de 460 lignes, un lien bleu souligné
   par ligne créerait un mur de bleu. La flèche suffit à les annoncer. */
.sr-lien {
    color: inherit;
    text-decoration: none;
}

.sr-lien:hover {
    color: #2563eb;
    text-decoration: underline;
}

.sr-lien span {
    font-size: 0.8em;
    color: #94a3b8;
}

.sr-sub .sr-lien {
    margin-left: 8px;
    color: #2563eb;
}

/* --- Contexte unifié -------------------------------------------------------------- */

.sr-contexte {
    margin: 14px 0 4px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 0 14px;
    background: #f9fafb;
}

.sr-contexte > summary {
    cursor: pointer;
    font-weight: 600;
    padding: 10px 0;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
}

.sr-contexte > summary::-webkit-details-marker { display: none; }
.sr-contexte > summary::before { content: '▶'; font-size: 11px; color: #8a94a1; transition: transform 0.12s; }
.sr-contexte[open] > summary::before { transform: rotate(90deg); }

/* Les trois sections côte à côte tant que la largeur le permet : critères et motifs se
   lisent ensemble — « rayon 200 km » et « 258 écartés hors rayon » s'expliquent l'un
   par l'autre. */
.sr-contexte-corps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
    padding-bottom: 14px;
    align-items: start;
}

.sr-contexte-corps h5 {
    margin: 0 0 8px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #6b7280;
}

.sr-motifs-liste {
    margin: 0;
    padding-left: 18px;
    font-size: 13px;
}

.sr-sep {
    border: none;
    border-top: 1px solid #e5e7eb;
    margin: 18px 0 14px;
}

.sr-filtre-wrap { margin: 0 0 18px; }

.sr-filtre-wrap input {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid #cfd6de;
    border-radius: 6px;
    font: inherit;
}

/* Bille d'aide : discrète, mais toujours au même endroit — l'œil finit par savoir où
   chercher l'explication. Le détail passe par l'infobulle native : elle survit au
   défilement et ne demande aucune gestion d'ouverture/fermeture. */
.sr-aide {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #e2e8f0;
    color: #475569;
    font-size: 10px;
    font-weight: 700;
    cursor: help;
    vertical-align: middle;
    margin-left: 4px;
}

.sr-aide:hover { background: #cbd5e1; }

/* Référence de la recherche (RB-0021) — le même mot que celui affiché au débouché, pour
   qu'admin et client désignent la même chose au téléphone. */
.sr-ref {
    display: inline-block;
    margin-right: 6px;
    padding: 1px 7px;
    border-radius: 5px;
    background: #eef2f7;
    color: #475569;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    font-weight: 600;
    user-select: all;
}

/* Modale de la chronologie. Au-dessus du header (1000) et des bandeaux (1100, 1200),
   comme les modales de l'espace débouché. */
.sr-modal {
    position: fixed;
    inset: 0;
    background: rgba(20, 30, 45, 0.45);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 48px 16px;
    overflow-y: auto;
    z-index: 13100;
}

.sr-modal.hidden { display: none; }

.sr-modal-box {
    position: relative;
    background: #fff;
    border-radius: 12px;
    width: min(560px, 100%);
    padding: 20px 24px 24px;
    max-height: calc(100vh - 96px);
    overflow-y: auto;
}

.sr-modal-box header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 6px;
}

.sr-modal-box h3 { margin: 0; font-size: 1.05rem; }

.sr-close {
    border: none;
    background: none;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    color: #8a94a1;
}

.sr-modal-box .sr-sub { margin-bottom: 14px; }

/* Accordéon « Résultats » : ouvert par défaut — c'est ce qu'on vient lire. Le contexte,
   lui, est replié : on y remonte quand le résultat surprend. */
.sr-resultats > summary {
    cursor: pointer;
    font-weight: 600;
    padding: 6px 0 12px;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
}

.sr-resultats > summary::-webkit-details-marker { display: none; }
.sr-resultats > summary::before {
    content: '▶';
    font-size: 11px;
    color: #8a94a1;
    transition: transform 0.12s;
}
.sr-resultats[open] > summary::before { transform: rotate(90deg); }