/* ── Styles communs à tous les dialogs Syncfusion ───────────────────────────
   Inclus dans App.razor — ne pas dupliquer dans les fichiers .razor.
   Squelette commun : .sf-dialog-header / .sf-dialog-body / .sf-dialog-footer,
   champs via .sf-field / .sf-row / .sf-label, boutons .my-success-btn / .my-cancel-btn.
   ───────────────────────────────────────────────────────────────────────── */

/* Fenêtre */
.e-dialog {
    border: 0;
}

    .e-dialog .e-dlg-header-content {
        background-color: #1a2a44 !important;
        border-top-right-radius: inherit;
        border-top-left-radius: inherit;
        padding: 2px;
    }

    .e-dialog .e-footer-content {
        background-color: #f5f5f5 !important;
        border-top: 1px solid #dee2e6 !important;
        border-bottom-right-radius: inherit;
        border-bottom-left-radius: inherit;
        padding: 6px 12px !important;
        display: flex;
        justify-content: flex-end;
        gap: 12px;
    }

/* Header */
.sf-dialog-header {
    display: flex;
    align-items: center;
    color: white;
    font-size: 16px;
    font-weight: 600;
    padding: 9px 16px;
}

/* Corps */
.sf-dialog-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
}

/* Champs */
.sf-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sf-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.sf-label {
    font-size: 13px;
    font-weight: 600;
    color: #4b5563;
}

.sf-required {
    color: #ef4444;
}

.sf-error {
    color: #ef4444;
    font-size: 12px;
    margin-top: -2px;
}

.sf-error-banner {
    background: #fef2f2;
    border: 1px solid #fca5a5;
    color: #b91c1c;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 13px;
    margin: 12px 16px 0 16px;
}

.sf-hint {
    font-size: 11px;
    color: #6b7280;
    font-style: italic;
}

/* Bloc d'information (résumé, aperçu) réutilisable */
.sf-info {
    background-color: #f8f9fa;
    padding: 10px 15px;
    border-radius: 4px;
    border-left: 4px solid #007bff;
    border-top: 1px solid #d1d5db;
}

.sf-separator {
    border: 0;
    border-top: 1px solid #d1d5db;
    margin: 6px 0;
}

/* ── Panneau de paramètres des pages Analytics (Cyclicals, Breakout) ─────────
   Grille à 2 colonnes de champs Syncfusion compacts + bouton « Analyser ».
   ───────────────────────────────────────────────────────────────────────── */
.param-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 10px;
}

.sf-param {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sf-param-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: #6c757d;
    cursor: help;
}

/* Compacter les SfNumericTextBox dans la grille de paramètres */
.param-grid .e-input-group {
    margin-bottom: 0;
}

.param-grid .e-input-group input.e-input {
    font-size: 0.82rem;
    padding-top: 4px;
    padding-bottom: 4px;
}

.param-apply-btn {
    width: 100%;
    margin-top: 10px;
}

/* ── Grille screener (SfGrid) des pages Analytics ───────────────────────────
   Le conteneur prend la hauteur restante du panneau (flex) ; la grille scrolle
   en interne. Densité réduite : beaucoup de colonnes dans une colonne étroite.
   ───────────────────────────────────────────────────────────────────────── */
.scr-grid-wrap {
    flex: 1 1 auto;
    min-height: 0;
}

.scr-grid .e-headercell,
.scr-grid .e-rowcell {
    padding-left: 6px !important;
    padding-right: 6px !important;
}

.scr-grid .e-rowcell {
    font-size: 0.72rem !important;
}

.scr-grid .e-headercelldiv {
    font-size: 0.68rem !important;
    font-weight: 400 !important;
    color: #6c757d !important;
}

/* Lignes plus serrées + curseur main (sélection au clic) */
.scr-grid .e-row {
    cursor: pointer;
}

/* Boutons */
.my-success-btn {
    background-color: #1A2a44;
    border-color: #43786d;
    color: white;
}

.my-cancel-btn {
    background-color: #db0016;
    border-color: #db0016;
    color: white;
}

/* Paramétrage identique de tous les grids*/
.e-grid {
    font-family: "Calibri";
}

    .e-grid .e-altrow {
        background-color: #e3f1bd;
    }

    .e-grid .e-rowcell {
        font-size: 14px;
    }