/* ============================================================================
   Charte Cité Ministérielle (Bénin) — overrides Velzon
   Couleurs officielles du drapeau béninois pour l'emblem :
     - Vert    #008751 (bande verticale gauche)
     - Jaune   #FCD116 (rectangle haut droite)
     - Rouge   #E8112D (rectangle bas droite)
   Le bleu (`--brand-blue`) est conservé en accent institutionnel UI uniquement
   (boutons primary, badges éditeur, écran auth) ; il NE fait PAS partie du
   drapeau béninois.
   ============================================================================ */

:root,
[data-bs-theme="light"] {
    --brand-green: #008751;
    --brand-green-dark: #006b40;
    --brand-green-light: #e6f4ed;

    --brand-yellow: #fcd116;
    --brand-yellow-dark: #d9b410;
    --brand-yellow-light: #fff8d9;

    --brand-red: #e8112d;
    --brand-red-dark: #b80c23;
    --brand-red-light: #fde8eb;

    /* Bleu institutionnel — accent UI (boutons, badges) — n'est PAS dans le drapeau */
    --brand-blue: #1a4fa0;
    --brand-blue-dark: #133e80;
    --brand-blue-light: #e8eef8;

    /* Overrides des variables Velzon */
    --vz-primary: var(--brand-blue);
    --vz-primary-rgb: 26, 79, 160;
    --vz-success: var(--brand-green);
    --vz-success-rgb: 0, 135, 81;
    --vz-danger: var(--brand-red);
    --vz-danger-rgb: 232, 17, 45;
    --vz-warning: var(--brand-yellow);
    --vz-warning-rgb: 252, 209, 22;
}

/* ============================================================================
   Drapeau Bénin — rendu CSS pur fidèle au drapeau officiel.
   Structure : ~1/3 vertical vert à gauche + ~2/3 droite (jaune en haut, rouge en bas).
   Compatible navigateurs + emails modernes (flexbox).
   ============================================================================ */
.brand-flag {
    display: inline-flex;
    width: 32px;
    height: 22px;
    border-radius: 2px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
    vertical-align: middle;
}
.brand-flag .flag-vertical {
    flex: 0 0 35%;
    background: var(--brand-green, #008751);
}
.brand-flag .flag-horizontal {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}
.brand-flag .flag-horizontal .flag-top {
    flex: 1 1 50%;
    background: var(--brand-yellow, #fcd116);
}
.brand-flag .flag-horizontal .flag-bottom {
    flex: 1 1 50%;
    background: var(--brand-red, #e8112d);
}

/* Variantes de taille */
.brand-flag.sm { width: 22px; height: 15px; }
.brand-flag.lg { width: 48px; height: 33px; }
.brand-flag.xl { width: 72px; height: 50px; }

/* ============================================================================
   Compat ascendante : les anciens markups `.brand-emblem` + `.flag-slice` sont
   maintenus pour ne pas casser les vues qui n'auraient pas encore été migrées
   vers `.brand-flag`. Le `.flag-blue` legacy est remappé vers le jaune (le
   drapeau béninois n'a pas de bleu).
   ============================================================================ */
.brand-emblem {
    display: inline-flex;
    align-items: stretch;
    gap: 3px;
}
.brand-emblem .flag-slice {
    display: inline-block;
    width: 10px;
    height: 28px;
    border-radius: 2px;
}
.brand-emblem.sm .flag-slice { width: 6px; height: 18px; }
.brand-emblem.lg .flag-slice { width: 14px; height: 42px; }
.flag-slice.flag-green  { background: var(--brand-green); }
.flag-slice.flag-yellow { background: var(--brand-yellow); }
.flag-slice.flag-blue   { background: var(--brand-yellow); } /* legacy → mappe vers jaune */
.flag-slice.flag-red    { background: var(--brand-red); }

.brand-title {
    font-weight: 700;
    color: var(--vz-heading-color, #212529);
    letter-spacing: -0.01em;
    margin-bottom: 0;
}
.brand-subtitle {
    font-size: 0.875rem;
    color: var(--vz-text-muted, #878a99);
}
.brand-name {
    font-weight: 600;
    font-size: 1.05rem;
}

/* ==== Badges de rôles ==== */
.badge-role-admin      { background-color: var(--brand-red);   color: #fff; }
.badge-role-editor     { background-color: var(--brand-blue);  color: #fff; }
.badge-role-validator  { background-color: var(--brand-green); color: #fff; }
.badge-role-reader     { background-color: #6c757d;            color: #fff; }

/* ==== Override du bg auth Velzon pour teinte institutionnelle ==== */
.auth-one-bg {
    background: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-blue-dark) 100%);
}
.auth-one-bg .bg-overlay {
    opacity: 0.85;
    background-color: var(--brand-blue-dark);
}

/* ==== Utility ==== */
.content-block { padding: 1.5rem; }