/* ============================================================
   MODULE ADMINISTRATION — responsive 3 paliers MEDEF54
   ============================================================
   Convention : Mobile < 768 / Laptop 768-1599 / Desktop ≥ 1600
   Règle sacrée : ne rien dégrader au-delà de 1600px
   ============================================================ */

/* --------------------------------------------------------------------------
   Pages diagnostic/traitement batch (GeocodageAdresses, EnrichissementSirene,
   ImportYellow, ImportDonneesReference, etc.)
   Conteneur principal : max-width conditionnel à 1600px (desktop).
   En laptop on occupe toute la largeur pour éviter l'effet "colonne flottante".
   -------------------------------------------------------------------------- */
.admin-batch-container {
    width: 100%;
}

@media (min-width: 1600px) {
    .admin-batch-container {
        max-width: 1600px;
    }
}

/* --------------------------------------------------------------------------
   Grille KPI progression (4 cartes %traités / synchronisés / non-trouvés / erreurs).
   Mobile : 2 colonnes (minmax 140px pour labels courts)
   Laptop : auto-fit, peut varier entre 2 et 4 colonnes selon largeur card
   Desktop : 4 colonnes fixes
   -------------------------------------------------------------------------- */
.admin-progress-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
}

@media (min-width: 1600px) {
    .admin-progress-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
    }
}

/* --------------------------------------------------------------------------
   Tranches TypeAdhesion — ligne éditable (Effectif min / max / Montant / Action)
   Mobile < 768 : empilée en 1 colonne (labels/champs sur la même largeur)
   Laptop+      : 3 colonnes égales + bouton supprimer
   -------------------------------------------------------------------------- */
.admin-tranches-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    align-items: center;
}

@media (min-width: 768px) {
    .admin-tranches-grid {
        grid-template-columns: 1fr 1fr 1fr auto;
    }
}

/* Page Organisation : blocs de logos (bannière, carré, favicon) */
.organisation-logos {
    align-items: start;
}

.organisation-logo-bloc {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.organisation-logo-apercu {
    min-height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    border: 1px dashed var(--neutral-stroke-rest);
    border-radius: 6px;
    background: var(--neutral-layer-2);
}

.organisation-logo-apercu img {
    max-height: 80px;
    max-width: 100%;
    object-fit: contain;
}

[data-bs-theme="dark"] .organisation-logo-apercu img {
    background: white;
    border-radius: 6px;
    padding: 4px 8px;
}

/* Assistant « Initialiser une organisation » (ticket #96) : page hors du layout principal */
.initialisation {
    min-height: 100vh;
    background: var(--neutral-layer-1);
    color: var(--neutral-foreground-rest);
    font-family: var(--body-font);
}

.initialisation-entete {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.initialisation-contenu {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 16px 40px;
}

/* Enfant d'un FluentStack vertical, qui n'étire pas : sans largeur, « Suivant » colle à « Précédent ». */
.initialisation-navigation {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
}

.initialisation-discret {
    color: var(--neutral-foreground-hint);
}

.initialisation-etat {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
}

.initialisation-recapitulatif {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 6px 20px;
    margin: 0;
}

.initialisation-recapitulatif dt {
    font-weight: 600;
}

.initialisation-recapitulatif dd {
    margin: 0;
}

.initialisation-controles {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.initialisation-controles li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.initialisation-email-test {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.initialisation-email-test > div {
    flex: 1;
    min-width: 240px;
    max-width: 480px;
}

@media (max-width: 767.98px) {
    /* Cinq libellés ne tiennent pas côte à côte : seul celui de l'étape en cours reste. */
    .initialisation .workflow-step-label:not(.active) {
        display: none;
    }

    .initialisation-recapitulatif {
        grid-template-columns: 1fr;
        gap: 2px;
    }

    .initialisation-recapitulatif dd {
        margin-bottom: 8px;
    }
}