/* ==========================================================
   ak-zone-card — Source de vérité visuelle factorisée
   ----------------------------------------------------------
   Couvre 5 vues planning :
     - ZonePfCard               (PF — référence la plus mature)
     - ZoneCremaCard            (Crémation, variants Priorité)
     - ZoneSalleCeremonieCard   (Salle de cérémonie)
     - ZoneConvivialiteCard     (Convivialité, time-range)
     - CentreFuneraireMergedZoneCard (CF, empty-row)

   Convention BEM stricte : .ak-zone-card__element--modifier
   CSS GLOBAL (pas scoped Blazor — pas de [b-XYZ], pas de ::deep)

   Les modes Compact / Normal / Enlarged sont pilotés par les
   modifiers .ak-zone-card--compact / --enlarged ; Normal est
   l'état par défaut sans modifier.
   ========================================================== */


/* ==========================================================
   1) BASE — wrapper, variants entreprise, header / body / footer
   ========================================================== */

.ak-zone-card {
    background: var(--cfl-white);
    border: 1px solid #d0d0d0;
    border-radius: var(--cfl-radius-sm);
    margin-bottom: 6px;
    box-shadow: var(--cfl-shadow-xs);
    border-top: 4px solid transparent;
}

/* Interne = notre entreprise (PF de référence : 3px ; on aligne sur 4px
   pour suivre Crema/Salle/CF — visuellement plus marqué et cohérent
   avec les overrides Priorité qui sont également 4px). */
.ak-zone-card--internal {
    border-left: 4px solid var(--cfl-primary);
    background: linear-gradient(to right, var(--cfl-primary-lighter) 0%, var(--cfl-white) 30%);
}

.ak-zone-card--internal .ak-zone-card__header {
    background: var(--cfl-planning-pf-header-bg, var(--cfl-gray-300));
}

/* Externe = autre entreprise */
.ak-zone-card--external {
    border-left: 4px solid var(--cfl-gray-400);
    background: var(--cfl-white);
}

.ak-zone-card--external .ak-zone-card__header {
    background: color-mix(in srgb, var(--cfl-planning-pf-header-bg, var(--cfl-gray-300)), white 25%);
}

/* Empty (CF Merged) — zone sans défunt encore assigné */
.ak-zone-card--empty {
    border-left: 4px solid var(--cfl-gray-400);
}

.ak-zone-card--empty .ak-zone-card__header {
    background: linear-gradient(to right, rgba(76, 175, 80, 0.15) 0%, rgba(76, 175, 80, 0.06) 70%, #f7f7f7 100%);
}

/* Convivialité — Reserved (défunt assigné) = rouge */
.ak-zone-card--reserved {
    border-left: 4px solid #ef9a9a;
    background: #ffebee;
}

.ak-zone-card--reserved .ak-zone-card__header {
    background: #ffcdd2;
}

/* Convivialité — Available (réservable, sans défunt) = vert */
.ak-zone-card--available {
    border-left: 4px solid #a5d6a7;
    background: #e8f5e9;
}

.ak-zone-card--available .ak-zone-card__header {
    background: #c8e6c9;
}

/* Header — flex container avec wrapping et alignement vertical */
.ak-zone-card__header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 2px 8px;
    padding: 4px 10px;
    background: var(--cfl-gray-100);
    border-bottom: 1px solid var(--cfl-gray-200);
}

.ak-zone-card__header-left {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 120px;
    flex: 1;
    flex-wrap: wrap;
}

.ak-zone-card__header-right {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 4px 6px;
    flex-shrink: 1;
    min-width: 0;
}

/* Body */
.ak-zone-card__body {
    padding: 5px 10px;
}

/* Footer */
.ak-zone-card__footer {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 3px 10px;
    background: #f7f7f7;
    border-top: 1px solid #e8e8e8;
    font-size: 0.7rem;
    color: var(--cfl-text-secondary);
}

.ak-zone-card__footer-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}


/* ==========================================================
   2) DEFUNT NAME / TIME / EMPTY ROW
   ========================================================== */

/* Nom du défunt — fallback "Aucun défunt" si vide */
.ak-zone-card__defunt-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--cfl-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ak-zone-card__defunt-name:empty::after {
    content: 'Aucun défunt';
    color: var(--cfl-gray-600);
    font-style: italic;
    font-weight: 400;
}

/* Convivialité Available — message "Réservable" en vert */
.ak-zone-card--available .ak-zone-card__defunt-name:empty::after {
    content: 'Réservable';
    color: #2e7d32;
    font-style: italic;
    font-weight: 400;
}

/* Convivialité Reserved — fallback "Aucun défunt" en gris clair */
.ak-zone-card--reserved .ak-zone-card__defunt-name:empty::after {
    content: 'Aucun défunt';
    color: var(--cfl-gray-400);
    font-style: italic;
    font-weight: 400;
}

/* Badge horaire principal (Crema / Salle / CF) — monospace */
.ak-zone-card__main-time {
    font-size: var(--cfl-font-size-sm);
    font-weight: 600;
    color: var(--cfl-text-secondary);
    background: var(--cfl-gray-200);
    padding: 2px 6px;
    border-radius: var(--cfl-radius-sm);
    font-family: var(--cfl-font-mono);
}

/* Time range (Convivialité : HeureDébut → HeureFin) */
.ak-zone-card__time-range {
    font-size: var(--cfl-font-size-sm);
    font-weight: 700;
    color: var(--cfl-text-primary);
    background: rgba(255, 255, 255, 0.6);
    padding: 2px 8px;
    border-radius: var(--cfl-radius-sm);
    font-family: var(--cfl-font-mono);
    white-space: nowrap;
}

.ak-zone-card__time-separator {
    margin: 0 2px;
    color: var(--cfl-text-secondary);
}

/* Empty row (CF Merged — fallback "X opérations" sans défunt, ligne cliquable) */
.ak-zone-card__empty-row {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: transparent;
    border: none;
    border-top: 1px solid #e8e8e8;
    cursor: pointer;
    text-align: left;
    color: var(--cfl-gray-800);
    font: inherit;
    font-size: 0.8rem;
}

.ak-zone-card__empty-row:disabled {
    cursor: default;
    opacity: 0.6;
}

.ak-zone-card__empty-row:not(:disabled):hover {
    background: rgba(76, 175, 80, 0.08);
}

.ak-zone-card__empty-row-label {
    font-weight: 500;
}


/* ==========================================================
   3) ACTIONS — boutons flat compacts à droite du header
   ========================================================== */

.ak-zone-card__actions {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
}

.ak-zone-card__action-btn {
    font-size: 0.75rem !important;
    padding: 2px 5px !important;
    border: none;
    background: transparent;
    border-radius: var(--cfl-radius-sm);
    cursor: pointer;
    color: var(--cfl-text-secondary);
    transition: all var(--cfl-transition-fast);
}

.ak-zone-card__action-btn:hover {
    background: #edf2f7;
    color: var(--cfl-text-primary);
}

/* Variant — orange : dossier incomplet, action en attente */
.ak-zone-card__action-btn--pending {
    color: var(--cfl-warning) !important;
}

.ak-zone-card__action-btn--pending:hover {
    background: var(--cfl-warning-light);
}

/* Variant — vert : dossier complet */
.ak-zone-card__action-btn--complete {
    color: var(--cfl-success) !important;
}

.ak-zone-card__action-btn--complete:hover {
    background: var(--cfl-success-light);
}

/* Variant — rouge : suppression */
.ak-zone-card__action-btn--delete {
    color: var(--cfl-danger, #e53e3e) !important;
}

.ak-zone-card__action-btn--delete:hover {
    background: rgba(229, 62, 62, 0.1);
    color: #c53030 !important;
}


/* ==========================================================
   4) OPS — container + 14 types d'opérations colorés
   ----------------------------------------------------------
   Les couleurs sont pilotées par les CSS custom properties
   --cfl-op-color-{type} fournies par le ThemeService.
   ========================================================== */

.ak-zone-card__ops {
    background: linear-gradient(to right, #e8eef4, #f0f5fa);
    border: 1px solid #b0bcc8;
    border-left: 3px solid var(--cfl-primary);
    border-radius: var(--cfl-radius-sm);
    padding: 3px 8px;
    margin-bottom: 5px;
}

.ak-zone-card__op {
    display: flex;
    gap: 8px;
    padding: 2px 0;
    font-size: 0.8rem;
    line-height: 1.35;
    align-items: center;
}

.ak-zone-card__op:not(:last-child) {
    border-bottom: 1px solid var(--cfl-border-dark);
}

.ak-zone-card__op-time {
    font-family: var(--cfl-font-mono);
    color: #1a365d;
    font-weight: 700;
    flex-shrink: 0;
    font-size: 0.75rem;
    background: #90cdf4;
    padding: 1px 6px;
    border-radius: var(--cfl-radius-sm);
    text-align: center;
    border: 1px solid #63b3ed;
}

.ak-zone-card__op-text {
    color: var(--cfl-gray-800);
    font-weight: 500;
    flex: 1;
    min-width: 0;
    white-space: pre-line;
}

/* CF Merged — secondary segments inside an op text (lieu / detail libre) */
.ak-zone-card__op-lieu {
    color: var(--cfl-text-secondary);
    font-weight: 400;
    font-size: 0.85em;
}

.ak-zone-card__op-detail {
    color: var(--cfl-text-secondary);
    font-weight: 400;
    font-style: italic;
    font-size: 0.85em;
}

/* Opérateur de l'opération (entreprise pour MeB/Rituel, agent pour crémation) — suffixe discret. */
.ak-zone-card__op-operateur {
    color: var(--cfl-text-secondary);
    font-weight: 500;
    font-size: 0.85em;
}

/* Tous les variants ops héritent du border-radius */
.ak-zone-card__op--admission,
.ak-zone-card__op--arrivee,
.ak-zone-card__op--soin,
.ak-zone-card__op--toilette-rituelle,
.ak-zone-card__op--mise-en-biere,
.ak-zone-card__op--transport,
.ak-zone-card__op--ceremonie-pf,
.ak-zone-card__op--ceremonie-cf,
.ak-zone-card__op--inhumation,
.ak-zone-card__op--exhumation,
.ak-zone-card__op--cremation,
.ak-zone-card__op--dispersion,
.ak-zone-card__op--rdv-mc,
.ak-zone-card__op--convivialite {
    border-radius: var(--cfl-radius-sm);
}

/* Admission */
.ak-zone-card__op--admission {
    background: color-mix(in srgb, var(--cfl-op-color-admission) 15%, white);
}
.ak-zone-card__op--admission .ak-zone-card__op-time {
    background: color-mix(in srgb, var(--cfl-op-color-admission) 35%, white);
    color: color-mix(in srgb, var(--cfl-op-color-admission) 80%, black);
    border-color: var(--cfl-op-color-admission);
}

/* Arrivée */
.ak-zone-card__op--arrivee {
    background: color-mix(in srgb, var(--cfl-op-color-arrivee) 15%, white);
}
.ak-zone-card__op--arrivee .ak-zone-card__op-time {
    background: color-mix(in srgb, var(--cfl-op-color-arrivee) 35%, white);
    color: color-mix(in srgb, var(--cfl-op-color-arrivee) 80%, black);
    border-color: var(--cfl-op-color-arrivee);
}

/* Soin */
.ak-zone-card__op--soin {
    background: color-mix(in srgb, var(--cfl-op-color-soin) 15%, white);
}
.ak-zone-card__op--soin .ak-zone-card__op-time {
    background: color-mix(in srgb, var(--cfl-op-color-soin) 35%, white);
    color: color-mix(in srgb, var(--cfl-op-color-soin) 80%, black);
    border-color: var(--cfl-op-color-soin);
}

/* Toilette rituelle */
.ak-zone-card__op--toilette-rituelle {
    background: color-mix(in srgb, var(--cfl-op-color-toilette-rituelle) 15%, white);
}
.ak-zone-card__op--toilette-rituelle .ak-zone-card__op-time {
    background: color-mix(in srgb, var(--cfl-op-color-toilette-rituelle) 35%, white);
    color: color-mix(in srgb, var(--cfl-op-color-toilette-rituelle) 80%, black);
    border-color: var(--cfl-op-color-toilette-rituelle);
}

/* Mise en bière */
.ak-zone-card__op--mise-en-biere {
    background: color-mix(in srgb, var(--cfl-op-color-mise-en-biere) 15%, white);
}
.ak-zone-card__op--mise-en-biere .ak-zone-card__op-time {
    background: color-mix(in srgb, var(--cfl-op-color-mise-en-biere) 35%, white);
    color: color-mix(in srgb, var(--cfl-op-color-mise-en-biere) 80%, black);
    border-color: var(--cfl-op-color-mise-en-biere);
}

/* Transport */
.ak-zone-card__op--transport {
    background: color-mix(in srgb, var(--cfl-op-color-transport) 15%, white);
}
.ak-zone-card__op--transport .ak-zone-card__op-time {
    background: color-mix(in srgb, var(--cfl-op-color-transport) 35%, white);
    color: color-mix(in srgb, var(--cfl-op-color-transport) 80%, black);
    border-color: var(--cfl-op-color-transport);
}

/* Cérémonie PF */
.ak-zone-card__op--ceremonie-pf {
    background: color-mix(in srgb, var(--cfl-op-color-ceremonie-pf) 15%, white);
}
.ak-zone-card__op--ceremonie-pf .ak-zone-card__op-time {
    background: color-mix(in srgb, var(--cfl-op-color-ceremonie-pf) 35%, white);
    color: color-mix(in srgb, var(--cfl-op-color-ceremonie-pf) 80%, black);
    border-color: var(--cfl-op-color-ceremonie-pf);
}

/* Cérémonie CF */
.ak-zone-card__op--ceremonie-cf {
    background: color-mix(in srgb, var(--cfl-op-color-ceremonie-cf) 15%, white);
}
.ak-zone-card__op--ceremonie-cf .ak-zone-card__op-time {
    background: color-mix(in srgb, var(--cfl-op-color-ceremonie-cf) 35%, white);
    color: color-mix(in srgb, var(--cfl-op-color-ceremonie-cf) 80%, black);
    border-color: var(--cfl-op-color-ceremonie-cf);
}

/* Inhumation */
.ak-zone-card__op--inhumation {
    background: color-mix(in srgb, var(--cfl-op-color-inhumation) 15%, white);
}
.ak-zone-card__op--inhumation .ak-zone-card__op-time {
    background: color-mix(in srgb, var(--cfl-op-color-inhumation) 35%, white);
    color: color-mix(in srgb, var(--cfl-op-color-inhumation) 80%, black);
    border-color: var(--cfl-op-color-inhumation);
}

/* Exhumation */
.ak-zone-card__op--exhumation {
    background: color-mix(in srgb, var(--cfl-op-color-exhumation) 15%, white);
}
.ak-zone-card__op--exhumation .ak-zone-card__op-time {
    background: color-mix(in srgb, var(--cfl-op-color-exhumation) 35%, white);
    color: color-mix(in srgb, var(--cfl-op-color-exhumation) 80%, black);
    border-color: var(--cfl-op-color-exhumation);
}

/* Crémation */
.ak-zone-card__op--cremation {
    background: color-mix(in srgb, var(--cfl-op-color-cremation) 15%, white);
}
.ak-zone-card__op--cremation .ak-zone-card__op-time {
    background: color-mix(in srgb, var(--cfl-op-color-cremation) 35%, white);
    color: color-mix(in srgb, var(--cfl-op-color-cremation) 80%, black);
    border-color: var(--cfl-op-color-cremation);
}

/* Dispersion */
.ak-zone-card__op--dispersion {
    background: color-mix(in srgb, var(--cfl-op-color-dispersion) 15%, white);
}
.ak-zone-card__op--dispersion .ak-zone-card__op-time {
    background: color-mix(in srgb, var(--cfl-op-color-dispersion) 35%, white);
    color: color-mix(in srgb, var(--cfl-op-color-dispersion) 80%, black);
    border-color: var(--cfl-op-color-dispersion);
}

/* RDV Maître de cérémonie */
.ak-zone-card__op--rdv-mc {
    background: color-mix(in srgb, var(--cfl-op-color-rdv-mc) 15%, white);
}
.ak-zone-card__op--rdv-mc .ak-zone-card__op-time {
    background: color-mix(in srgb, var(--cfl-op-color-rdv-mc) 35%, white);
    color: color-mix(in srgb, var(--cfl-op-color-rdv-mc) 80%, black);
    border-color: var(--cfl-op-color-rdv-mc);
}

/* Convivialité */
.ak-zone-card__op--convivialite {
    background: color-mix(in srgb, var(--cfl-op-color-convivialite) 15%, white);
}
.ak-zone-card__op--convivialite .ak-zone-card__op-time {
    background: color-mix(in srgb, var(--cfl-op-color-convivialite) 35%, white);
    color: color-mix(in srgb, var(--cfl-op-color-convivialite) 80%, black);
    border-color: var(--cfl-op-color-convivialite);
}


/* ==========================================================
   5) COMMENT — bloc commentaire jaune-beige
   ========================================================== */

.ak-zone-card__comment {
    background: #fffdf7;
    border: 1px solid #e8e4d9;
    border-radius: var(--cfl-radius-sm);
    padding: 3px 8px;
    font-size: 0.78rem;
    color: #5a5245;
    white-space: pre-wrap;
    line-height: 1.3;
    margin-top: 4px;
}


/* ==========================================================
   6) BADGES — pills réutilisables (dossier, soin, four, cérémonie)
   ========================================================== */

.ak-zone-card__badge {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: 10px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* CF — ligne ordonnateur (chip personne métier Ordonnateur + badge « par nos soins ») */
.ak-zone-card__ordonnateur {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.ak-zone-card__ordonnateur-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--cfl-text-secondary);
}

/* Badge « Ordonnateur par nos soins » (vert succès, cohérent avec dossier-complete) */
.ak-zone-card__badge--ordonnateur {
    background: var(--cfl-success-light);
    color: var(--cfl-success-dark, #22543d);
    border: 1px solid var(--cfl-success, #38a169);
}

/* Soin (bleu) */
.ak-zone-card__badge--soin {
    background: #ebf8ff;
    color: #2b6cb0;
    border: 1px solid #90cdf4;
}

/* Toilette (vert) */
.ak-zone-card__badge--toilette {
    background: #f0fff4;
    color: #276749;
    border: 1px solid #9ae6b4;
}

/* Rituel (violet) */
.ak-zone-card__badge--rituel {
    background: #faf5ff;
    color: #6b46c1;
    border: 1px solid #d6bcfa;
}

/* Dossier incomplet (orange) */
.ak-zone-card__badge--dossier-incomplete {
    background: var(--cfl-warning-light);
    color: var(--cfl-warning);
    border: 1px solid var(--cfl-warning-border);
}

/* Dossier complet (vert) */
.ak-zone-card__badge--dossier-complete {
    background: var(--cfl-success-light);
    color: #276749;
    border: 1px solid var(--cfl-success-border);
}

/* Crema — badge "Four X" (gris neutre, par défaut) */
.ak-zone-card__badge--four {
    background: var(--cfl-gray-200);
    color: var(--cfl-text-secondary);
    border: 1px solid var(--cfl-gray-300);
    border-radius: var(--cfl-radius-sm);
    font-size: var(--cfl-font-size-xs);
    padding: 2px 6px;
}

/* Salle — badge type cérémonie */
.ak-zone-card__badge--ceremonie {
    background: var(--cfl-gray-200);
    color: var(--cfl-text-secondary);
    border-radius: var(--cfl-radius-sm);
    font-size: var(--cfl-font-size-xs);
    padding: 2px 6px;
}


/* ==========================================================
   7) COMPACT mode overrides
   ----------------------------------------------------------
   Ne pas inclure ici les overrides personnel PF (pf-personnel,
   pf-label) — ils restent scoped à ZonePfCard.
   ========================================================== */

.ak-zone-card--compact { margin-bottom: 3px; }
.ak-zone-card--compact .ak-zone-card__header { padding: 2px 8px; }
.ak-zone-card--compact .ak-zone-card__defunt-name { font-size: 0.8rem; }
.ak-zone-card--compact .ak-zone-card__main-time { font-size: 0.7rem; padding: 1px 4px; }
.ak-zone-card--compact .ak-zone-card__time-range { font-size: 0.7rem; padding: 1px 4px; }
.ak-zone-card--compact .ak-zone-card__actions { gap: 0; }
.ak-zone-card--compact .ak-zone-card__action-btn {
    font-size: 0.65rem !important;
    padding: 1px 3px !important;
}
.ak-zone-card--compact .ak-zone-card__badge { font-size: 0.6rem; padding: 0 5px; }
.ak-zone-card--compact .ak-zone-card__body { padding: 3px 8px; }
.ak-zone-card--compact .ak-zone-card__ops { padding: 1px 6px; margin-bottom: 3px; }
.ak-zone-card--compact .ak-zone-card__op { padding: 1px 0; font-size: 0.75rem; }
.ak-zone-card--compact .ak-zone-card__op-time { font-size: 0.7rem; padding: 0 4px; }
.ak-zone-card--compact .ak-zone-card__comment { font-size: 0.7rem; padding: 2px 6px; margin-top: 2px; }
.ak-zone-card--compact .ak-zone-card__footer { padding: 1px 8px; font-size: 0.6rem; gap: 0; }
.ak-zone-card--compact .ak-zone-card__footer-row { gap: 6px; }
.ak-zone-card--compact .ak-zone-card__empty-row { padding: 2px 8px; font-size: 0.7rem; }


/* ==========================================================
   8) ENLARGED mode overrides
   ========================================================== */

.ak-zone-card--enlarged { margin-bottom: 10px; }
.ak-zone-card--enlarged .ak-zone-card__header { padding: 6px 12px; }
.ak-zone-card--enlarged .ak-zone-card__defunt-name { font-size: 0.95rem; }
.ak-zone-card--enlarged .ak-zone-card__main-time { font-size: 0.85rem; padding: 3px 8px; }
.ak-zone-card--enlarged .ak-zone-card__time-range { font-size: 0.85rem; padding: 3px 8px; }
.ak-zone-card--enlarged .ak-zone-card__actions { gap: 4px; }
.ak-zone-card--enlarged .ak-zone-card__action-btn {
    font-size: 0.8rem !important;
    padding: 3px 8px !important;
}
.ak-zone-card--enlarged .ak-zone-card__badge { font-size: 0.75rem; padding: 2px 8px; }
.ak-zone-card--enlarged .ak-zone-card__body { padding: 8px 12px; }
.ak-zone-card--enlarged .ak-zone-card__ops { padding: 6px 10px; margin-bottom: 8px; }
.ak-zone-card--enlarged .ak-zone-card__op { padding: 4px 0; font-size: 0.9rem; line-height: 1.4; }
.ak-zone-card--enlarged .ak-zone-card__op-time { font-size: 0.8rem; padding: 2px 8px; }
.ak-zone-card--enlarged .ak-zone-card__comment { font-size: 0.85rem; padding: 6px 10px; margin-top: 6px; }
.ak-zone-card--enlarged .ak-zone-card__footer { padding: 5px 12px; font-size: 0.75rem; gap: 2px; }
.ak-zone-card--enlarged .ak-zone-card__footer-row { gap: 12px; }
.ak-zone-card--enlarged .ak-zone-card__empty-row { padding: 8px 14px; font-size: 0.95rem; }


/* ==========================================================
   9) PRIORITE OVERRIDES — Crémation (Prioritaire / Possible / Exclu)
   ----------------------------------------------------------
   Ces variants surcharges les variants entreprise (internal /
   external) en repeignant la border gauche et le dégradé du
   header/body. Spécificité augmentée via le double sélecteur
   .ak-zone-card.ak-zone-card--{modifier}.
   ========================================================== */

/* Prioritaire = vert */
.ak-zone-card.ak-zone-card--prioritaire {
    border-left: 4px solid #4CAF50;
    background: linear-gradient(to right, rgba(76, 175, 80, 0.15) 0%, rgba(76, 175, 80, 0.08) 60%, var(--cfl-white) 100%);
}

.ak-zone-card.ak-zone-card--prioritaire .ak-zone-card__header {
    background: linear-gradient(to right, rgba(76, 175, 80, 0.25) 0%, rgba(76, 175, 80, 0.12) 70%, #f7f7f7 100%);
}

/* Possible = orange */
.ak-zone-card.ak-zone-card--possible {
    border-left: 4px solid #FF9800;
    background: linear-gradient(to right, rgba(255, 152, 0, 0.15) 0%, rgba(255, 152, 0, 0.08) 60%, var(--cfl-white) 100%);
}

.ak-zone-card.ak-zone-card--possible .ak-zone-card__header {
    background: linear-gradient(to right, rgba(255, 152, 0, 0.25) 0%, rgba(255, 152, 0, 0.12) 70%, #f7f7f7 100%);
}

/* Exclu = rouge */
.ak-zone-card.ak-zone-card--exclu {
    border-left: 4px solid #F44336;
    background: linear-gradient(to right, rgba(244, 67, 54, 0.15) 0%, rgba(244, 67, 54, 0.08) 60%, var(--cfl-white) 100%);
}

.ak-zone-card.ak-zone-card--exclu .ak-zone-card__header {
    background: linear-gradient(to right, rgba(244, 67, 54, 0.28) 0%, rgba(244, 67, 54, 0.12) 70%, #f7f7f7 100%);
}

/* ==========================================================
   Dynamic statut color (PR 2 — supersedes the 3 hardcoded
   classes above when ZoneCrema.Statut.Color is configured).
   The shell injects --zone-statut-color inline on the root
   element and adds the .ak-zone-card--has-statut-color flag.
   color-mix gives us the gradient opacity without parsing
   the hex. Falls back gracefully on browsers without color-mix
   support to a flat tinted background.
   ========================================================== */
.ak-zone-card.ak-zone-card--has-statut-color {
    border-left: 4px solid var(--zone-statut-color, var(--cfl-gray-400));
    background: linear-gradient(to right,
        color-mix(in srgb, var(--zone-statut-color, transparent) 15%, var(--cfl-white)) 0%,
        color-mix(in srgb, var(--zone-statut-color, transparent) 8%, var(--cfl-white)) 60%,
        var(--cfl-white) 100%);
}

.ak-zone-card.ak-zone-card--has-statut-color .ak-zone-card__header {
    background: linear-gradient(to right,
        color-mix(in srgb, var(--zone-statut-color, transparent) 25%, var(--cfl-white)) 0%,
        color-mix(in srgb, var(--zone-statut-color, transparent) 12%, var(--cfl-white)) 70%,
        #f7f7f7 100%);
}


/* ==========================================================
   10) PF — Personnel block (DisplayMode overrides)
   ----------------------------------------------------------
   Ces overrides ciblent les classes pf-personnel / pf-label
   locales à ZonePfCard. Elles vivent ici (et non dans le scoped
   CSS du composant) parce que le modifier --compact / --enlarged
   est posé sur le wrapper ZoneCardShell, qui est un composant
   scoped distinct. Un sélecteur scoped dans ZonePfCard ne peut
   pas remonter à ce wrapper.
   ========================================================== */

.ak-zone-card--compact .pf-personnel {
    font-size: 0.75rem;
    padding: 3px 6px;
    min-height: 28px;
    gap: 2px 4px;
}

.ak-zone-card--compact .pf-label {
    font-size: 0.6rem;
}

.ak-zone-card--enlarged .pf-personnel {
    font-size: 0.9rem;
    padding: 8px 12px;
    min-height: 42px;
    gap: 5px 10px;
}

.ak-zone-card--enlarged .pf-label {
    font-size: 0.7rem;
}


/* ==========================================================
   11) CREMA — Inline edit fields (DisplayMode overrides)
   ----------------------------------------------------------
   Mêmes raisons que pour PF : le modifier --compact / --enlarged
   est posé sur le wrapper ZoneCardShell, hors de portée des
   sélecteurs scoped de ZoneCremaCard.
   ========================================================== */

.ak-zone-card--compact .crema-inline-fields {
    gap: 4px;
    margin-bottom: 2px;
}

.ak-zone-card--compact .crema-inline-label {
    font-size: 0.6rem;
}

.ak-zone-card--enlarged .crema-inline-fields {
    gap: 8px;
    margin-bottom: 6px;
}


/* ==========================================================
   Responsive — header empilé sur mobile
   ========================================================== */

@media (max-width: 600px) {
    .ak-zone-card__header-left {
        flex-direction: column;
        align-items: flex-start;
    }
}