/* ============================================================
   WEDORIA DASHBOARD — Refonte back office · Phase 3 (2026-08)
   Restyle du tableau de bord : hero actionnable, KPI bento,
   graphique CA, carte sombre, listes. Chargé après lists.css.
   ============================================================ */

/* ── Hero : salutation or (sans-serif), résumé actionnable ── */
.wd-dashboard-greeting { font-weight: 600; letter-spacing: -0.025em; }
.wd-dashboard-greeting em { font-style: normal; color: var(--wd-or-profond); }
.wd-dashboard-summary {
    margin: 0.35rem 0 0;
    font-size: 0.9rem;
    color: var(--ep-text-secondary);
}
.wd-dashboard-summary strong { color: var(--ep-text-primary); font-weight: 700; }
.wd-dashboard-hero { margin-bottom: 1.8rem; }

/* ── KPI : cartes sans bordure, ombre douce, lift au survol ── */
.wd-kpi {
    background: var(--ep-bg-surface);
    border: none;
    border-radius: var(--wd-r-card);
    box-shadow: var(--wd-shadow-soft);
    padding: 1.15rem 1.3rem;
    height: 100%;
    transition: transform 250ms var(--wd-ease), box-shadow 250ms var(--wd-ease);
}
.wd-kpi:hover { transform: translateY(-2px); box-shadow: var(--wd-shadow-lift); }
.wd-kpi-label {
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ep-text-muted);
}
.wd-kpi-value {
    font-family: var(--wd-font-sans);
    font-size: 1.55rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    margin: 0.55rem 0 0.5rem;
}
.wd-kpi-foot { font-size: 0.76rem; }
.wd-kpi--gold {
    background: linear-gradient(150deg, #23222A, var(--wd-onyx));
    box-shadow: var(--wd-shadow-lift);
}
.wd-kpi--gold .wd-kpi-label { color: rgba(250, 247, 242, 0.6); }
.wd-kpi--gold .wd-kpi-value { color: var(--wd-or); }
.wd-kpi--gold .wd-kpi-foot { color: rgba(250, 247, 242, 0.7); }

/* ── Métriques secondaires ── */
.wd-metric {
    background: var(--ep-bg-surface);
    border: none;
    border-radius: var(--wd-r-card);
    box-shadow: var(--wd-shadow-soft);
    transition: transform 250ms var(--wd-ease), box-shadow 250ms var(--wd-ease);
}
a.wd-metric:hover { transform: translateY(-2px); box-shadow: var(--wd-shadow-lift); }
.wd-metric-value { font-variant-numeric: tabular-nums; }

/* ── Graphique CA : barres sable, mois courant en or,
      valeur révélée au survol ── */
.wd-chart-card {
    background: var(--ep-bg-surface);
    border: none;
    border-radius: var(--wd-r-card);
    box-shadow: var(--wd-shadow-soft);
}
.ep-chart-container { min-height: 245px; }
.ep-chart-bar {
    width: 78%;
    max-width: 96px;
    background: #EADFC8;
    border-radius: 6px 6px 3px 3px;
    transform-origin: bottom;
    animation: wd-bar-grow 900ms var(--wd-ease) backwards;
    transition: filter 250ms var(--wd-ease);
}
.ep-chart-bar-wrapper:nth-child(1) .ep-chart-bar { animation-delay: 60ms; }
.ep-chart-bar-wrapper:nth-child(2) .ep-chart-bar { animation-delay: 140ms; }
.ep-chart-bar-wrapper:nth-child(3) .ep-chart-bar { animation-delay: 220ms; }
.ep-chart-bar-wrapper:nth-child(4) .ep-chart-bar { animation-delay: 300ms; }
.ep-chart-bar-wrapper:nth-child(5) .ep-chart-bar { animation-delay: 380ms; }
.ep-chart-bar-wrapper:nth-child(6) .ep-chart-bar { animation-delay: 460ms; }
@keyframes wd-bar-grow { from { transform: scaleY(0); } }
.ep-chart-bar-wrapper:last-child .ep-chart-bar {
    background: linear-gradient(180deg, var(--wd-or) 0%, #CBB27E 100%);
}
.ep-chart-bar-wrapper:hover .ep-chart-bar { filter: brightness(0.96) saturate(1.15); }
.ep-chart-bar-value {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--wd-or-profond);
    font-variant-numeric: tabular-nums;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 280ms var(--wd-ease), transform 280ms var(--wd-ease);
}
.ep-chart-bar-wrapper:hover .ep-chart-bar-value { opacity: 1; transform: none; }
.ep-chart-bar-label {
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ep-text-muted);
}

/* ── Carte sombre (prochain événement / dernière galerie) ── */
.wd-next-event {
    background: linear-gradient(150deg, #23222A, var(--wd-onyx));
    border: none;
    border-radius: var(--wd-r-card);
    box-shadow: var(--wd-shadow-lift);
    transition: transform 250ms var(--wd-ease), box-shadow 250ms var(--wd-ease);
    display: flex;
    flex-direction: column;
    min-height: 300px;
}
/* Compteurs (ou action des états vides) épinglés en bas de la carte */
.wd-next-event .wd-ne-counters { margin-top: auto; }
.wd-next-event .wd-next-event-action { margin-top: auto; }
.wd-next-event:hover { transform: translateY(-2px); }
.wd-next-event-countdown {
    font-style: normal;
    font-weight: 700;
    color: var(--wd-or);
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}
.wd-next-event-name { font-weight: 600; letter-spacing: -0.015em; font-style: normal; }
.wd-next-event-name em,
.wd-next-event--empty .wd-next-event-name { font-style: normal; }
/* Méta sur une ligne (date · lieu · invités), comme la maquette */
.wd-next-event .wd-next-event-meta {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.35rem 1rem;
    margin-top: 0.5rem;
}

/* ── Sections de listes ── */
.ep-section-title { font-size: 0.95rem; font-weight: 700; letter-spacing: -0.01em; }
.ep-section-header .btn {
    border: none;
    background: transparent;
    color: var(--wd-or-profond);
    font-size: 0.76rem;
    font-weight: 600;
    padding: 0.2rem 0.2rem;
    border-bottom: 1px solid var(--wd-or);
    border-radius: 0;
    transition: color 200ms var(--wd-ease), border-color 200ms var(--wd-ease);
}
.ep-section-header .btn:hover { color: var(--wd-onyx); border-color: var(--wd-onyx); background: transparent; }

.ep-list {
    background: var(--ep-bg-surface);
    border: 1px solid var(--wd-hairline);
    border-radius: var(--wd-r-card);
    box-shadow: var(--wd-shadow-soft);
    overflow: hidden;
}
.ep-list .ep-row { border-bottom: 1px solid var(--wd-hairline); transition: background 180ms var(--wd-ease); }
.ep-list .ep-row:last-child { border-bottom: none; }
.ep-list .ep-row:hover { background: #F8F6F0; }

/* Badges des listes : point coloré + texte, plus d'aplats */
.ep-list .badge[class*="bg-"] {
    background: transparent !important;
    color: var(--ep-text-secondary);
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0 0 0 12px;
    position: relative;
}
.ep-list .badge[class*="bg-"]::before {
    content: '';
    position: absolute;
    left: 0; top: 50%; transform: translateY(-50%);
    width: 6px; height: 6px; border-radius: 50%;
    background: #9b968f;
}
.ep-list .badge.bg-success::before { background: var(--ep-success); }
.ep-list .badge.bg-warning::before { background: var(--ep-warning); }
.ep-list .badge.bg-danger::before { background: var(--ep-danger); }
.ep-list .badge.bg-info::before { background: var(--ep-info); }
.ep-list .badge.bg-primary::before { background: var(--wd-or); }
.ep-list .badge.bg-dark::before { background: var(--wd-onyx); }
.ep-list .badge.bg-secondary::before { background: var(--ep-secondary-gray); }

/* ── Bento : grille 12 colonnes ── */
.wd-bento {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1rem;
    align-items: stretch;
}
.wd-b8 { grid-column: span 8; }
.wd-b4 { grid-column: span 4; }
@media (max-width: 991.98px) {
    .wd-b8, .wd-b4 { grid-column: span 12; }
}

.wd-card-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.9rem;
}
.wd-card-title { font-size: 0.95rem; font-weight: 700; letter-spacing: -0.01em; color: var(--ep-text-primary); }
.wd-more {
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--wd-or-profond);
    text-decoration: none;
    border-bottom: 1px solid var(--wd-or);
    padding-bottom: 1px;
    transition: color 200ms var(--wd-ease), border-color 200ms var(--wd-ease);
}
.wd-more:hover { color: var(--wd-onyx); border-color: var(--wd-onyx); }

/* Tendance KPI */
.wd-trend-up { color: var(--ep-success); font-weight: 700; }
.wd-trend-down { color: var(--ep-danger); font-weight: 700; }
.wd-dot-status {
    display: inline-flex; align-items: center; gap: 6px;
}
.wd-dot-status::before {
    content: '';
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--st, #9b968f);
}

/* Compteurs de la carte sombre */
.wd-ne-counters {
    display: flex;
    gap: 1.6rem;
    margin-top: 1.1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(250, 247, 242, 0.12);
}
.wd-ne-counters b {
    display: block;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--wd-or);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}
.wd-ne-counters span {
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(250, 247, 242, 0.55);
}

/* ── Activité récente ── */
.wd-feed-card, .wd-tasks-card {
    background: var(--ep-bg-surface);
    border-radius: var(--wd-r-card);
    box-shadow: var(--wd-shadow-soft);
    padding: 1.15rem 1.3rem;
}
.wd-feed-row {
    display: grid;
    grid-template-columns: 34px minmax(0, 1.5fr) 74px 130px 92px;
    gap: 0.9rem;
    align-items: center;
    padding: 0.6rem 0.4rem;
    border-bottom: 1px solid var(--wd-hairline);
    text-decoration: none;
    border-radius: 10px;
    transition: background 180ms var(--wd-ease);
}
.wd-feed-row:last-child { border-bottom: none; }
.wd-feed-row:hover { background: #F8F6F0; }
.wd-feed-av {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--wd-gold-wash);
    color: var(--wd-or-profond);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    flex: none;
}
.wd-feed-av i { font-size: 0.95rem; }
.wd-feed-amt small {
    display: block;
    font-size: 0.68rem;
    font-weight: 400;
    color: var(--ep-text-muted);
}
.wd-feed-name {
    display: block;
    font-size: 0.85rem; font-weight: 600;
    color: var(--ep-text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wd-feed-sub {
    display: block;
    font-size: 0.73rem;
    color: var(--ep-text-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wd-feed-date { font-size: 0.72rem; color: var(--ep-text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wd-feed-status {
    display: block;
    position: relative;
    padding-left: 15px;
    font-size: 0.76rem; font-weight: 600;
    color: var(--ep-text-secondary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wd-feed-status::before {
    content: '';
    position: absolute;
    left: 0; top: 50%; transform: translateY(-50%);
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--st, #9b968f);
}
.wd-feed-amt {
    font-size: 0.84rem; font-weight: 600;
    text-align: right;
    color: var(--ep-text-primary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
@media (max-width: 767.98px) {
    .wd-feed-row { grid-template-columns: 34px minmax(0, 1fr) 10px 74px; gap: 0.6rem; }
    .wd-feed-date { display: none; }
    .wd-feed-status { font-size: 0; gap: 0; justify-self: center; }
    .wd-feed-status::before { width: 8px; height: 8px; }
    .wd-feed-amt { font-size: 0.8rem; }
}

/* ── À faire : tâches cochables ── */
.wd-todo {
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
    padding: 0.6rem 0.1rem;
    border-bottom: 1px solid var(--wd-hairline);
}
.wd-todo:last-child { border-bottom: none; }
.wd-tick {
    width: 17px; height: 17px;
    margin-top: 2px;
    border: 1.4px solid var(--wd-hairline-2);
    border-radius: 6px;
    background: transparent;
    flex: none;
    cursor: pointer;
    position: relative;
    padding: 0;
    transition: border-color 200ms var(--wd-ease), background 200ms var(--wd-ease);
}
.wd-todo:hover .wd-tick { border-color: var(--wd-or); }
.wd-tick::after {
    content: '✓';
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.62rem; font-weight: 700; color: #fff;
    opacity: 0; transform: scale(0.3);
    transition: opacity 250ms var(--wd-ease), transform 250ms var(--wd-ease);
}
.wd-todo.done .wd-tick { background: var(--wd-or); border-color: var(--wd-or); }
.wd-todo.done .wd-tick::after { opacity: 1; transform: scale(1); }
.wd-todo-body { min-width: 0; }
.wd-todo-txt { font-size: 0.84rem; font-weight: 600; color: var(--ep-text-primary); transition: opacity 300ms var(--wd-ease); }
.wd-todo-when { font-size: 0.72rem; color: var(--ep-text-muted); transition: opacity 300ms var(--wd-ease); }
.wd-todo-when.is-late { color: var(--ep-danger); font-weight: 600; }
.wd-todo.done .wd-todo-txt { opacity: 0.4; text-decoration: line-through; }
.wd-todo.done .wd-todo-when { opacity: 0.35; }

@media (prefers-reduced-motion: reduce) {
    .ep-chart-bar { animation: none; }
    .wd-kpi, .wd-metric, .wd-next-event, .wd-tick { transition: none; }
}