/* ─────────────────────────────────────────────────────────────
   MAMI WATA — surcouche app au-dessus d'iManage
   Palette inspirée du logo : sarcelle profond (eau) + ambre (sable/feu)
   ───────────────────────────────────────────────────────────── */
:root {
    --accent:        #0E7C7B;
    --accent-light:  #2DD4BF;
    --accent-dark:   #0F4C4C;
    --accent-soft:   #CCFBF1;
    --secondary:     #F59E0B;
    --secondary-light: #FCD34D;
    --secondary-dark:  #B45309;

    --ink:        #0F172A;
    --ink-soft:   #334155;
    --muted:      #64748B;
    --line:       #E2E8F0;
    --line-soft:  #F1F5F9;
    --canvas:     #FCFDFE;   /* fond de page plus clair → moins de contraste avec les cartes blanches */
    --paper:      #FFFFFF;

    --notification-bg: linear-gradient(135deg, #0E7C7B 0%, #0F4C4C 100%);
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 1px rgba(15, 23, 42, 0.03);
    --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.06), 0 2px 4px rgba(15, 23, 42, 0.04);
    --shadow-lg: 0 16px 40px rgba(15, 23, 42, 0.08), 0 4px 12px rgba(15, 23, 42, 0.05);
    --radius-sm: 5px;
    --radius:    5px;
    --radius-lg: 5px;

    --font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* Échelle typographique — surcharge PROJET des jetons iManage.
       Décision de la propriétaire, 2026-08-17 : conformité stricte sur le
       TITRE DE PAGE, qui repasse à la valeur canonique R × φ = 21px.
       Les trois autres jetons restent volontairement au-dessus du canonique
       (base 13.5 au lieu de 12, sm 12 au lieu de 11, lg 16 au lieu de 13) :
       les ramener toucherait tout le corps de l'application, ce qui n'a pas
       été demandé. Écart assumé et tracé ici plutôt que silencieux. */
    --font-size-base: 13.5px;
    --font-size-sm:   12px;
    --font-size-lg:   16px;
    --font-size-xl:   21px;   /* = R × φ, valeur canonique DESIGN.md */
}

html, body {
    font-family: var(--font-stack);
    background: var(--canvas);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a, a:hover { color: var(--accent); }
a { text-decoration: none; }

::selection { background: var(--accent-soft); color: var(--accent-dark); }

/* ─── Buttons ───────────────────────────────────────────────── */
.btn { border-radius: 5px; font-weight: 500; transition: all 0.15s ease-out; }
.btn-sm { font-size: var(--font-size-sm); padding: 5px 12px; }

.btn-primary,
.btn-primary:focus {
    background-color: var(--accent);
    border-color: var(--accent);
    box-shadow: 0 1px 2px rgba(14, 124, 123, 0.15);
}
.btn-primary:hover,
.btn-primary:active {
    background-color: var(--accent-dark) !important;
    border-color: var(--accent-dark) !important;
    box-shadow: 0 4px 10px rgba(14, 124, 123, 0.25);
}
.btn-outline-primary { color: var(--accent); border-color: var(--line); background: var(--paper); }
.btn-outline-primary:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-outline-danger  { color: #DC2626; border-color: var(--line); background: var(--paper); }
.btn-outline-danger:hover { background: #DC2626; border-color: #DC2626; color: #fff; }

/* ─── Ticket / Facture (impression thermique 80mm) ──────────── */
.ticket-paper {
    width: 80mm;
    margin: 20px auto;
    padding: 12px;
    background: #fff;
    color: #000;
    font-family: "Courier New", Courier, monospace;
    font-size: 12.5px;
    line-height: 1.4;
    border: 1px dashed #ccc;
}
.ticket-paper h1, .ticket-paper h2, .ticket-paper h3 { text-align: center; margin: 4px 0; }
.ticket-paper hr { border: 0; border-top: 1px dashed #999; margin: 8px 0; }
.ticket-paper table { width: 100%; border-collapse: collapse; }
.ticket-paper td  { vertical-align: top; padding: 2px 0; }
.ticket-paper .text-end   { text-align: right; }
.ticket-paper .text-center{ text-align: center; }
.ticket-paper .total      { font-weight: bold; font-size: 14px; border-top: 1px solid #000; padding-top: 6px; }
.ticket-paper .badge      { display: inline-block; padding: 2px 8px; border: 1px solid #000; border-radius: 3px; }
.ticket-paper address     { font-style: normal; font-size: 11px; line-height: 1.3; }

/* ─── Ticket CLIENT (lot F) — gabarit de référence de l'ancienne app ── */
/* Référence : mwbkp/css/imanage_dev.css:145-210. Le conteneur du ticket
   client revient en police PROPORTIONNELLE : seul le tableau des articles
   passe en monospace grasse, et uniquement à l'impression (ci-dessous).
   Le zébrage « table-striped » de la référence n'est PAS repris : un fond
   gris sur imprimante thermique est du bruit. Le ticket cuisine/bar
   (.ticket-paper sans .ticket-invoice) n'est pas concerné. */
.ticket-paper .pull-right { float: right; }
.ticket-paper .text-right { text-align: right; }
.ticket-invoice { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
.ticket-invoice .table-ticket { width: 100%; font-size: 13px; font-weight: bold; }
.ticket-invoice .table-ticket th { text-align: left; }
.ticket-invoice address { text-align: center; }
/* Le <hr> du pied n'imprime RIEN sur le ticket papier : Bootstrap 3 le
   dessine en #eee, invisible en thermique. On reproduit le résultat —
   un espace — plutôt que la balise. */
.ticket-invoice hr { border: 0; margin: 14px 0 6px; }

@media print {
    body * { visibility: hidden; }
    .ticket-paper, .ticket-paper * { visibility: visible; }
    .ticket-paper { position: absolute; left: 0; top: 0; border: 0; margin: 0; }

    /* Monospace grasse 15 px sur le SEUL tableau des articles — l'en-tête
       et le pied du ticket client restent en police proportionnelle. */
    .ticket-invoice .table-ticket { font-family: monospace; font-size: 15px; font-weight: bold; margin: 0; }

    /* Le mode sombre ne doit jamais affecter l'impression. */
    [data-theme="dark"] .ticket-paper { background: #fff; color: #000; border-color: #ccc; }
    [data-theme="dark"] .ticket-paper td,
    [data-theme="dark"] .ticket-paper th { color: #000; }
    [data-theme="dark"] .ticket-paper hr { border-top-color: #999; }
    [data-theme="dark"] .ticket-paper .total { border-top-color: #000; color: #000; }
    [data-theme="dark"] .ticket-paper .badge { border-color: #000; color: #000; }
}


/* ─── D6 : sélecteur d'établissement (comptes non rattachés) ──────────── */
/* Même gabarit que le sélecteur de date de l'en-tête (.date-container du
   socle) : inline, compact, sans bordure. L'état « aucun choix » est signalé
   par un liseré d'accent : un compte de direction qui n'a rien choisi ne peut
   RIEN saisir, et il doit le voir sans lire un message. */
/* Sélecteur d'établissement : un menu déroulant seul, sans libellé ni mention.
   L'état « aucun choix » se lit dans l'option sélectionnée ; la bordure d'accent
   le rappelle sans ajouter un mot — sans choix, aucune action n'est possible. */
/* Le cadre est porté par le CONTENEUR, pas par le <select> : logo et menu se
   lisent alors comme un seul contrôle, ce qu'un <select> natif ne permet pas
   (il n'accepte pas d'image dans ses options). Le menu perd donc sa bordure et
   son fond propres, et rend son chevron. */
/* Icône neutre du retour au tableau de bord, posée dans la barre supérieure
   quand aucun logo d'établissement n'est à montrer (vue groupe). Elle occupe la
   place du logo, à la même taille, et mène au même endroit. */
#brand_home .brand-neutral { font-size: 19px; line-height: 1; display: inline-flex; }

.restaurant-scope { display: inline-flex; align-items: center; gap: 8px;
                    background: var(--paper, #fff); border: 1px solid var(--line);
                    border-radius: 6px; padding: 2px 8px 2px 10px; }
.restaurant-scope.rs-vide { background: none; border-color: transparent; padding-left: 0; }
/* Plafond de largeur : les logos n'ont pas les mêmes proportions — celui de
   Mami Wata est un mot-symbole très allongé (2283×453), celui de Brazza Burger
   presque carré. Sans plafond, le contrôle changeait de largeur de 47 px d'une
   maison à l'autre, et sautait sous l'œil à chaque bascule. */
.restaurant-scope .rs-logo { height: 18px; width: auto; max-width: 58px; object-fit: contain;
                             flex: 0 0 auto; display: block; }
.restaurant-scope .rs-select { border: 0; background-color: transparent; box-shadow: none;
                               padding-left: 0; }
.restaurant-scope .rs-select:focus { box-shadow: none; }
/* Pastille « i » : présente uniquement en lecture seule, c'est-à-dire tant
   qu'aucun établissement n'est choisi. L'explication est en infobulle. */
.restaurant-scope .rs-info { color: var(--accent); font-size: 15px; line-height: 1;
                             cursor: help; display: inline-flex; align-items: center; }
.restaurant-scope .rs-info:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 50%; }
/* Largeur calée sur le contenu : 240px imposait une boîte bien plus large que
   le plus long des noms. `min-width:0` laisse le navigateur dimensionner sur
   l'option la plus longue ; le plafond évite qu'un nom d'établissement très
   long ne pousse le fil d'Ariane hors de la rangée. */
.restaurant-scope .rs-select { width: auto; min-width: 0; max-width: 240px; }
.restaurant-scope .rs-select.rs-none { border-color: var(--accent); }
@media (max-width: 767px) { .restaurant-scope .rs-select { min-width: 0; max-width: 62vw; } }

/* ─── Site picker / Table grid ──────────────────────────────── */
.site-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.site-tabs .site-tab {
    padding: 8px 16px; border-radius: 5px; background: var(--paper);
    border: 1px solid var(--line); cursor: pointer; font-weight: 500;
}
.site-tabs .site-tab.active { background: var(--accent); border-color: var(--accent); color: #fff; }

.table-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 12px; }
.table-tile {
    aspect-ratio: 1; border-radius: var(--radius); background: var(--paper);
    border: 1px solid var(--line); display: flex; flex-direction: column;
    align-items: center; justify-content: center; cursor: pointer;
    transition: all .12s ease-out;
}
.table-tile:hover { border-color: var(--accent); box-shadow: var(--shadow-md); }
.table-tile.occupied { background: var(--secondary); color: #fff; border-color: var(--secondary); }
.table-tile .num { font-size: 22px; font-weight: 700; }
.table-tile .lbl { font-size: 11px; opacity: .75; text-transform: uppercase; }

/* ─── Carte / Plats ─────────────────────────────────────────── */
.dish-card {
    border: 1px solid var(--line); border-radius: var(--radius);
    padding: 12px; background: var(--paper); cursor: pointer;
    transition: all .12s ease-out;
}
.dish-card:hover { box-shadow: var(--shadow-md); border-color: var(--accent); }
.dish-card .dish-name { font-weight: 500; color: var(--ink); }
.dish-card .dish-price { color: var(--secondary-dark); font-weight: 600; font-size: 13px; }

/* ─── Status badges ─────────────────────────────────────────── */
.badge-due  { background: var(--secondary); color: #fff; }
.badge-paid { background: var(--accent-light); color: #fff; }
.badge-cancelled { background: #DC2626; color: #fff; }

/* ============================================================
   RESPONSIVE — couvre tous les viewports mobile/tablette/desktop
   • <576px  : mobile portrait (téléphone)
   • <768px  : mobile paysage / petite tablette
   • <992px  : tablette
   • ≥1200px : desktop large (utilise toute la largeur jusqu'à 1800px max via iManage)
   ============================================================ */

/* ── Mobile portrait : <576px ─────────────────────────────── */
@media (max-width: 575.98px) {
    /* Padding minimal pour gagner de la largeur utile */
    .container-fluid { padding-left: 8px; padding-right: 8px; }

    /* Navbar : moins de padding latéral, logos compactés */
    .navbar { padding: 6px 8px; }
    .nav-link { padding: 8px 10px; font-size: 14px; }
    .dropdown-menu { font-size: 14px; }

    /* Titres : on réduit pour ne pas casser le layout */
    h1, .h1 { font-size: 22px; }
    h2, .h2 { font-size: 20px; }
    h3, .h3 { font-size: 18px; }
    .content-title { font-size: var(--font-size-xl); flex-wrap: wrap; gap: 8px; }
    .content-title-actions { width: 100%; margin-top: 6px; }

    /* Cards : padding réduit */
    .card-body { padding: 12px; }

    /* Listes : scroll horizontal si overflow */
    .table-responsive, .list-view-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .list-view table { min-width: 600px; }  /* force scroll au lieu de wrap brutal */

    /* Forms : empile en mobile (Bootstrap row > col le fait déjà mais on s'assure du gap) */
    .row.g-2 > [class*="col-"] { margin-bottom: 8px; }
    .form-label { margin-bottom: 2px; font-size: 13px; }
    .form-control, .form-select { font-size: 16px; /* évite zoom auto iOS */ }

    /* Form actions toujours collées en bas, full-width, empilées */
    .form-actions { flex-direction: column-reverse; gap: 6px; }
    .form-actions .btn { width: 100%; }

    /* Tile grid : tiles plus petites pour tenir 2 par ligne minimum */
    .table-grid { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 8px; }
    .table-tile .num { font-size: 18px; }

    /* Dashboard KPI cards en pleine largeur */
    .col-md-3.col-6 { padding: 4px; }

    /* Footer : labels secondaires masqués */
    .footer-row .footer-brand img { height: 20px; }
    .footer-datetime .footer-sep { display: none; }
    .footer-copy { display: none; }
}

/* ── Mobile paysage / petite tablette : 576-767px ─────────── */
@media (min-width: 576px) and (max-width: 767.98px) {
    .container-fluid { padding-left: 12px; padding-right: 12px; }
    .form-control, .form-select { font-size: 15px; }
    .list-view table { min-width: 700px; }
}

/* ── Tablette : 768-991px ─────────────────────────────────── */
@media (min-width: 768px) and (max-width: 991.98px) {
    .container-fluid { padding-left: 16px; padding-right: 16px; }

    /* ── POS tablette portrait : on force le layout 2 colonnes ──────────
       (sinon Bootstrap col-lg-* casse en mono-colonne dès <992px et le
       caissier perd la vue panier sticky). Menu plats à gauche ~62%,
       sidebar (panier + commandes ouvertes) à droite ~38% sticky.       */
    .no-form-frame > .row.g-3 > .col-lg-9 {
        flex: 0 0 auto;
        width: 62% !important;
        max-width: 62%;
    }
    .no-form-frame > .row.g-3 > .col-lg-3 {
        flex: 0 0 auto;
        width: 38% !important;
        max-width: 38%;
    }
    /* La sidebar reste collée en haut quand on scroll les plats. */
    .no-form-frame .side-panel {
        position: sticky;
        top: .5rem;
        max-height: calc(100vh - 1rem);
        overflow-y: auto;
    }
    /* Sous-colonnes du menu : empile menu_types + dish_types côte-à-côte
       (en pills) et la grille des plats en dessous, pleine largeur.    */
    .no-form-frame .menu-nav-row > .col-lg-3:nth-child(1),
    .no-form-frame .menu-nav-row > .col-lg-3:nth-child(2) {
        flex: 0 0 auto;
        width: 50% !important;
        max-width: 50%;
    }
    .no-form-frame .menu-nav-row > .col-lg-6.dishes-pane {
        flex: 0 0 auto;
        width: 100% !important;
        max-width: 100%;
        margin-top: .5rem;
    }
    /* Compaction des plats : 3 cartes par ligne en portrait. */
    .no-form-frame .dishes-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

/* ── A11y : focus visible au clavier — outline visible partout ─────── */
:focus-visible {
    outline: 3px solid var(--accent) !important;
    outline-offset: 2px;
}
/* Bouton .btn-close (Bootstrap) — pas de double bordure quand focus */
.btn-close:focus-visible { outline-offset: 0; }

/* ── Desktop large : ≥1200px ──────────────────────────────── */
@media (min-width: 1200px) {
    /* iManage gère déjà max-width 1800px + padding adaptatif via container-fluid */
    /* Forms qui ont du sens jusqu'à 600px max-width : centrage propre */
    .form-narrow { max-width: 720px; margin: 0 auto; }
}

/* ── Tactile : boutons et inputs plus grands ──────────────── */
@media (hover: none) and (pointer: coarse) {
    .btn { min-height: 44px; padding: 10px 18px; }
    .btn-sm { min-height: 36px; padding: 6px 14px; }
    .form-control, .form-select { min-height: 44px; }
    .form-check-input { width: 22px; height: 22px; margin-top: 2px; }

    /* Liens dans les listes : zone tactile élargie */
    .list-view td a, .list-view td .btn-link { padding: 6px 4px; display: inline-block; }
}

/* ── Form panels iManage en mobile : plein écran + contenu contraint ── */
@media (max-width: 991.98px) {
    .form-panel.form-panel-xxl,
    .form-panel.form-panel-xl,
    .form-panel.form-panel-lg {
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 !important;
    }
    .form-panel .form-panel-body { padding: 12px !important; }
    /* Empêche tout enfant de drawer de dépasser la largeur */
    .form-panel * { max-width: 100%; }
    .form-panel table { max-width: none; }
}

/* ── srv-cart actions : empilées en mobile ───────────────────────── */
@media (max-width: 575.98px) {
    #srv_root .srv-actions { flex-direction: column; }
    #srv_root .srv-actions .btn { width: 100%; }
    #srv_root .srv-cart { padding: 10px; }
    #srv_root .srv-cart .form-control, #srv_root .srv-cart .form-select { font-size: 16px; }
}

/* ── Print : on garde uniquement les éléments imprimables ─────────── */
@media print {
    .navbar, #page_header, #breadcrumb_bar, #page_footer, .content-title-actions, .page-actions { display: none !important; }
    body { background: white; color: black; }
    .container-fluid { padding: 0; }
}

/* ══════════════════════════════════════════════════════════
   MAMIWATA — Mode sombre (composants spécifiques au projet)
   ══════════════════════════════════════════════════════════ */
[data-theme="dark"] .ticket-paper {
    background: var(--bg-surface);
    color: var(--text-primary);
    border-color: var(--border);
}
[data-theme="dark"] .ticket-paper hr          { border-top-color: var(--border); }
[data-theme="dark"] .ticket-paper .total      { border-top-color: var(--border); color: var(--text-primary); }
[data-theme="dark"] .ticket-paper .badge      { border-color: var(--border); color: var(--text-primary); }
[data-theme="dark"] .ticket-paper td,
[data-theme="dark"] .ticket-paper th          { color: var(--text-primary); }

[data-theme="dark"] .badge-due,
[data-theme="dark"] .badge-paid,
[data-theme="dark"] .badge-cancelled {
    opacity: 0.9;
}

/* ══════════════════════════════════════════════════════════
   TOAST BRAND — vrai logo cursive Mami Wata.
   Le logo nav_logo_i.png est noir/foncé sur fond transparent → on garde
   le filter brightness(0) invert(1) du composant iManage pour qu'il
   ressorte en blanc sur la barre verte du toast.
   ══════════════════════════════════════════════════════════ */
#brand_home .brand-logo {
    height: 28px;
    max-height: 28px;
    width: auto;
    max-width: 220px;
    /* filter par défaut du composant iManage = brightness(0) invert(1) → blanc */
}

/* Toast (barre de notification) : la barre reste pleine largeur, mais son CONTENU
   est borné à la largeur de l'app (1400px) et centré → aligné avec le menu, le
   contenu et le footer. */
#notification_message_bar .notification_message_content {
    max-width: var(--app-max-w, 1400px);
    margin-inline: auto;
}

/* ══════════════════════════════════════════════════════════
   NAVBAR BRAND — style cambatani (icône carrée + texte sobre)
   ══════════════════════════════════════════════════════════ */
.mamiwata-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--ink, #0F172A);
    padding: 6px 4px;
    margin-right: 28px;
    transition: opacity .12s;
}
.mamiwata-brand:hover { color: var(--accent, #0E7C7B); opacity: 1; }
.mamiwata-brand-mark {
    width: 32px;
    height: 32px;
    border-radius: 5px;
    object-fit: contain;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.mamiwata-brand-text {
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: .06em;
}
@media (max-width: 768px) {
    .mamiwata-brand-text { display: none; }
    .mamiwata-brand { margin-right: 12px; }
}

/* ══════════════════════════════════════════════════════════
   DASHBOARD V3 — pattern CMO (hero, KPIs sobres, cards, chart 6 mois)
   ══════════════════════════════════════════════════════════ */
.dashboard-v3 {
    --d-ink:    var(--ink, #0f172a);
    --d-mute:   var(--muted, #64748b);
    --d-line:   var(--line, #e2e8f0);
    --d-surf:   var(--paper, #fff);
    --d-soft:   var(--canvas, #f8fafc);
    --d-softer: var(--line-soft, #f1f5f9);
    --d-accent: var(--accent, #0E7C7B);
    --d-ok:     #15803d;
    --d-warn:   #b45309;
    color: var(--d-ink);
    font-size: 14px;
    line-height: 1.5;
}

/* Hero — une simple salutation, PAS une carte.
   Elle portait un fond dégradé, une bordure et un rayon : trois attributs de
   carte pour une ligne de texte. Une carte annonce un contenu qu'on peut lire,
   comparer ou cliquer ; « Bonjour Daniel » n'est rien de tout cela, et sa boîte
   entrait en concurrence visuelle avec les vraies cartes juste en dessous.
   On garde le rythme vertical (14px) et l'alignement, on retire l'habillage. */
.dashboard-v3 .g-hero {
    display: flex; align-items: center; justify-content: space-between;
    gap: 20px; padding: 4px 2px; margin-bottom: 14px;   /* rythme vertical unique = 14px */
    background: none; border: 0; border-radius: 0;
}
.dashboard-v3 .g-hero-body { min-width: 0; flex: 1; }
.dashboard-v3 .g-hero-greeting {
    font-size: 19px; font-weight: 600; letter-spacing: -0.01em;
    line-height: 1.2; color: var(--d-ink);
}
.dashboard-v3 .g-hero-name { color: var(--d-mute); font-weight: 500; }

/* ── Titre « Tableau de bord » + sélecteur de mois à droite ────────────
   Le sélecteur est injecté dans le .content-title (hors .dashboard-v3),
   d'où des sélecteurs GLOBAUX (pas préfixés .dashboard-v3). */
#requested_content .content-title {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.content-title-month-nav { margin-left: auto; }

/* iManage neutralise les .fa-* dans .content-title (titres sans icône) ;
   ici les chevrons du sélecteur de mois sont légitimes → on les ré-autorise.
   Sélecteur volontairement plus spécifique (#id + 3 classes) pour l'emporter. */
#requested_content .content-title .g-month-nav .fa-solid { display: inline-block !important; }
/* Idem pour le sélecteur de journée d'imputation (Nouvelle commande) : chevrons + icône calendrier légitimes. */
#requested_content .content-title .no3-day-nav .fa-solid { display: inline-block !important; }

.g-month-nav { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }
.g-month-btn {
    width: 30px; height: 30px; padding: 0;
    border: 1px solid var(--line, #e2e8f0); background: var(--paper, #fff);
    border-radius: 5px; cursor: pointer; color: var(--muted, #64748b);
    font-size: 11px; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .15s, border-color .15s, color .15s;
}
.g-month-btn:hover:not(:disabled) {
    background: var(--canvas, #f8fafc); border-color: var(--accent, #0E7C7B); color: var(--accent, #0E7C7B);
}
.g-month-btn:disabled { opacity: .35; cursor: not-allowed; }
.g-month-label {
    min-width: 104px; text-align: center;
    font-weight: 600; font-size: 14px; color: var(--ink, #0f172a);
    text-transform: capitalize; user-select: none; letter-spacing: -.01em;
}
.g-month-today {
    margin-left: 2px; padding: 4px 10px;
    border: 1px solid var(--accent, #0E7C7B); background: transparent;
    color: var(--accent, #0E7C7B); border-radius: 5px;
    font-size: 11px; font-weight: 600; cursor: pointer; line-height: 1.4;
    transition: background .15s, color .15s;
}
.g-month-today:hover { background: var(--accent, #0E7C7B); color: #fff; }
[data-theme="dark"] .g-month-btn { background: var(--bg-surface,#1e293b); border-color: var(--border,#334155); color: var(--text-secondary,#94a3b8); }
[data-theme="dark"] .g-month-label { color: var(--text-primary,#f1f5f9); }

/* ── Rangée 1 : Activité (2/3) · Menu du jour (1/3) ─────────────────── */
.dashboard-v3 .g-row-top {
    display: grid; grid-template-columns: 2fr 1fr;
    gap: 14px; margin-bottom: 14px; align-items: stretch;
}
.dashboard-v3 .g-row-top > * { margin-bottom: 0; height: 100%; }
.dashboard-v3 .g-row-full { margin-bottom: 14px; }

/* ── Layout principal : analytique (2/3) + colonne « du jour » (1/3) ────
   La colonne de droite s'étire jusqu'en bas (align stretch) ; un bloc à
   flex-grow absorbe la hauteur restante pour atteindre le bas. ── */
.dashboard-v3 .g-main2 {
    display: grid; grid-template-columns: 2fr 1fr; gap: 14px; align-items: stretch; margin-bottom: 14px;
}
.dashboard-v3 .g-main-left,
.dashboard-v3 .g-main-right { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.dashboard-v3 .g-main-left > .g-card,
.dashboard-v3 .g-main-right > .g-card { margin-bottom: 0; }
/* Graphe : hauteur fixe (pas d'étirement) pour rester lisible quel que soit
   le voisin. C'est la colonne de droite qui s'étire jusqu'en bas. */
.dashboard-v3 .g-main-left > .g-chart-card { display: flex; flex-direction: column; }
.dashboard-v3 .g-main-left .g-chartjs-wrap { flex: 0 0 auto; height: 280px; min-height: 0; }
.dashboard-v3 .g-main-right > .g-today    { flex: 0 0 auto; }
/* La suggestion ne s'étire PAS à la hauteur de la colonne : taille minimale, puis
   s'adapte à son contenu (l'ardoise garde une belle hauteur même si texte court). */
.dashboard-v3 .g-main-right > .g-daymenu { flex: 0 0 auto; min-height: 340px; }

/* Colonne « du jour » — en-tête : activité du jour (3 mini-stats) */
.dashboard-v3 .g-today-row { display: flex; }
.dashboard-v3 .g-today-stat { flex: 1; padding: 14px 16px; min-width: 0; }
.dashboard-v3 .g-today-stat + .g-today-stat { border-left: 1px solid var(--d-softer); }
.dashboard-v3 .g-today-val { font-size: 18px; font-weight: 600; color: var(--d-ink); line-height: 1.1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dashboard-v3 .g-today-lbl { margin-top: 3px; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--d-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 991.98px) { .dashboard-v3 .g-main2 { grid-template-columns: 1fr; } }

/* Bloc « Activité » : 2 stats (CA · Ticket moyen) ; factures/couverts en small.
   KPIs alignés en haut (la carte s'étire à la hauteur du menu du jour voisin). */
.dashboard-v3 .g-activite { display: flex; flex-direction: column; }
.dashboard-v3 .g-activite .g-stat-row { align-items: flex-start; }
.dashboard-v3 .g-activite .g-stat { justify-content: flex-start; padding-top: 22px; }
.dashboard-v3 .g-stat-trend,
.dashboard-v3 .g-stat-sub { margin-top: 4px; font-size: 11px; color: var(--d-mute); white-space: nowrap; }
.dashboard-v3 .g-stat-row { display: flex; flex: 1; align-items: stretch; }
.dashboard-v3 .g-stat {
    flex: 1; display: flex; flex-direction: column; justify-content: center;
    padding: 14px 18px; min-width: 0;
}
.dashboard-v3 .g-stat + .g-stat { border-left: 1px solid var(--d-softer); }
.dashboard-v3 .g-stat-label {
    font-size: 11px; font-weight: 600; text-transform: uppercase;
    letter-spacing: .05em; color: var(--d-mute); margin-bottom: 6px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dashboard-v3 .g-stat-value {
    font-size: 23px; font-weight: 600; color: var(--d-ink);
    line-height: 1.1; letter-spacing: -.02em; white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
/* Devises (FCFA…) : toujours en small + muted, de façon homogène partout. */
.dashboard-v3 .g-stat-unit { font-size: 11px; font-weight: 400; color: var(--d-mute); opacity: 1; margin-left: 3px; }
.dashboard-v3 .g-attn-card { display: flex; flex-direction: column; }

/* Mobile : la rangée 1 s'empile */
@media (max-width: 767.98px) {
    .dashboard-v3 .g-row-top { grid-template-columns: 1fr; }
    .dashboard-v3 .g-stat-row { flex-wrap: wrap; }
    .dashboard-v3 .g-stat { flex: 1 1 50%; }
    .dashboard-v3 .g-stat:nth-child(odd) { border-left: 0; }
    #requested_content .content-title .content-title-month-nav { margin-left: 0; width: 100%; }
}

/* KPIs — valeur en poids medium (pas gras) */
.dashboard-v3 .g-kpis {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px; margin-bottom: 14px;   /* gap aligné sur le rythme global = 14px */
}
.dashboard-v3 .g-kpi-card {
    background: var(--d-surf); border: 1px solid var(--d-line);
    border-radius: 5px; padding: 15px 18px; display: flex; flex-direction: column;
    transition: box-shadow .15s ease, border-color .15s ease;
}
.dashboard-v3 .g-kpi-card:hover { box-shadow: 0 4px 14px rgba(15,23,42,.05); border-color: color-mix(in srgb, var(--d-accent) 30%, var(--d-line)); }
.dashboard-v3 .g-kpi-head {
    display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; min-width: 0;
}
.dashboard-v3 .g-kpi-label {
    font-size: 11px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.05em; color: var(--d-mute);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.dashboard-v3 .g-kpi-period {
    margin-left: auto; font-size: 10px; color: var(--d-mute);
    font-weight: 500; white-space: nowrap; flex-shrink: 0; text-transform: capitalize;
}
.dashboard-v3 .g-kpi-value {
    font-size: 26px; font-weight: 600; color: var(--d-ink);
    line-height: 1.1; letter-spacing: -0.02em; white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.dashboard-v3 .g-kpi-box-unit { font-size: 11px; font-weight: 400; color: var(--d-mute); opacity: 1; margin-left: 3px; }
.dashboard-v3 .g-kpi-hint { font-size: 12px; color: var(--d-mute); margin-top: 5px; }
/* Tendance : GRAS + VERT (hausse) / ROUGE (baisse) — partout (stats + KPI) */
.dashboard-v3 .g-trend-up   { color: #16a34a; font-weight: 700; }
.dashboard-v3 .g-trend-down { color: #dc2626; font-weight: 700; }
.dashboard-v3 .g-kpi-hint .g-trend-up   { color: #16a34a; font-weight: 700; }
.dashboard-v3 .g-kpi-hint .g-trend-down { color: #dc2626; font-weight: 700; }

/* Cards de section — séparateur d'en-tête léger */
.dashboard-v3 .g-card {
    background: var(--d-surf); border: 1px solid var(--d-line);
    border-radius: 5px; margin-bottom: 14px; overflow: hidden;
}
.dashboard-v3 .g-card-head {
    display: flex; align-items: baseline; gap: 10px;
    padding: 13px 16px 11px;
    border-bottom: 1px solid var(--d-softer);   /* trait fin et clair */
}
.dashboard-v3 .g-card-head h4 { font-size: 13.5px; font-weight: 600; margin: 0; color: var(--d-ink); }
.dashboard-v3 .g-card-note { margin-left: auto; font-size: 11px; color: var(--d-mute); white-space: nowrap; }
.dashboard-v3 .g-pill-sm {
    display: inline-block; padding: 1px 8px; border-radius: 5px;
    font-size: 11px; font-weight: 500;
    background: var(--d-softer); color: var(--d-mute);
}

/* Tables compactes — séparateurs très clairs */
.dashboard-v3 .g-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.dashboard-v3 .g-table tbody td {
    padding: 11px 16px; border-bottom: 1px solid var(--d-softer); vertical-align: middle;
}
.dashboard-v3 .g-table tbody tr:last-child td { border-bottom: 0; }
.dashboard-v3 .g-table tbody tr:hover { background: var(--d-soft); }
.dashboard-v3 .g-kvp-title { font-weight: 500; }

/* État vide */
.dashboard-v3 .g-card-empty {
    display: flex; align-items: center; gap: 12px;
    padding: 22px 16px; color: var(--d-mute); font-size: 13px;
}
.dashboard-v3 .g-empty-ico {
    width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
    background: color-mix(in srgb, var(--d-accent) 10%, transparent);
    color: var(--d-accent); display: inline-flex; align-items: center; justify-content: center; font-size: 13px;
}

/* Barres horizontales — fines, dégradé doux (pas de trait gras) */
.dashboard-v3 .g-bar { height: 5px; background: var(--d-softer); border-radius: 5px; overflow: hidden; }
.dashboard-v3 .g-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, color-mix(in srgb, var(--d-accent) 65%, transparent), var(--d-accent));
    border-radius: 5px; transition: width .9s cubic-bezier(.4,0,.2,1);
}

/* Grille 2 colonnes — blocs de hauteur ÉGALE dans une rangée.
   align-items: stretch (défaut grid) → chaque carte remplit toute la hauteur
   de la rangée. Le gap (14px) gère l'espacement horizontal ; margin-bottom
   sur la grille gère l'espacement rangée → rangée. Même valeur (14px) partout. */
.dashboard-v3 .g-grid-2 {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 14px; margin-bottom: 14px;
    align-items: stretch;
}
/* Les cartes dans la grille remplissent la cellule et n'ajoutent pas de
   marge propre (sinon double espacement). Le rythme est porté par la grille. */
.dashboard-v3 .g-grid-2 > .g-card {
    height: 100%; margin-bottom: 0; display: flex; flex-direction: column;
}
@media (max-width: 767.98px) {
    .dashboard-v3 .g-grid-2 { grid-template-columns: 1fr; }
}

/* ── Présences de la vague : 3 colonnes, défilement PAR GROUPE DE 6 (pause 6 s) ── */
.dashboard-v3 .g-presence-marquee {
    --pres-page-h: 108px;
    position: relative; overflow: hidden; height: var(--pres-page-h); padding: 0 16px;
}
.dashboard-v3 .g-presence { position: relative; }
.dashboard-v3 .g-presence-track { will-change: transform; }
/* Carets ◀ ▶ flottants en bas à droite du container → pagination manuelle */
.dashboard-v3 .g-presence-nav { position: absolute; right: 12px; bottom: 8px; display: flex; gap: 6px; z-index: 3; }
.dashboard-v3 .g-presence-nav button {
    width: 24px; height: 24px; padding: 0; border: 1px solid var(--d-line);
    background: var(--d-surf); color: var(--d-mute); border-radius: 5px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; font-size: 10px;
    transition: color .12s ease, border-color .12s ease;
}
.dashboard-v3 .g-presence-nav button:hover { color: var(--d-ink); border-color: var(--d-accent); }
.dashboard-v3 .g-presence-page {
    height: var(--pres-page-h); box-sizing: border-box; padding-top: 2px;
    display: grid; grid-template-columns: repeat(3, 1fr);
    column-gap: 12px; row-gap: 8px; align-content: start;
}
/* chips sans bordure ni fond : rond coloré (icône user) + nom + heure de badgage */
.dashboard-v3 .g-presence-chip {
    display: flex; align-items: center; gap: 9px; width: 100%; box-sizing: border-box;
    min-height: 46px; padding: 4px 2px; border: 0; background: transparent;
    line-height: 1.2; color: var(--d-ink); overflow: hidden;
}
.dashboard-v3 .g-presence-body { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.dashboard-v3 .g-presence-nm   { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-v3 .g-presence-time { font-size: 11px; color: var(--d-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
/* pastille = rond coloré avec icône utilisateur (blanche) */
.dashboard-v3 .g-presence-dot {
    width: 28px; height: 28px; border-radius: 50%; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 12px;
}
/* convention : VERT = présent, ROUGE = absent */
.dashboard-v3 .g-presence-chip.is-present .g-presence-dot { background: #16a34a; }
.dashboard-v3 .g-presence-chip.is-absent  .g-presence-dot { background: #dc2626; }

/* ── Les plus rentables : un bloc, 3 colonnes (catégorie · emplacement · plats/boissons)
   Listes nom + CA, sans barres ni quantité. ── */
.dashboard-v3 .g-rentables .g-rent-cols {
    display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0; padding: 14px 16px 16px;
}
/* Traits de séparation verticaux entre colonnes (gap nul + padding symétrique
   pour centrer le filet dans l'espace inter-colonnes). */
.dashboard-v3 .g-rent-col { min-width: 0; padding: 0 24px; }
.dashboard-v3 .g-rent-col:first-child { padding-left: 0; }
.dashboard-v3 .g-rent-col:last-child  { padding-right: 0; }
.dashboard-v3 .g-rent-col + .g-rent-col { border-left: 1px solid var(--d-line); }
.dashboard-v3 .g-rent-label {
    font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
    color: var(--d-mute); margin-bottom: 8px;
}
.dashboard-v3 .g-rent-sub { font-size: 12px; font-weight: 600; color: var(--d-ink); margin: 12px 0 4px; }
.dashboard-v3 .g-rent-sub:first-of-type { margin-top: 0; }
.dashboard-v3 .g-rent-list { list-style: none; margin: 0; padding: 0; }
.dashboard-v3 .g-rent-list li {
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
    padding: 6px 0; border-bottom: 1px solid var(--d-softer); font-size: 13px;
}
.dashboard-v3 .g-rent-list li:last-child { border-bottom: 0; }
.dashboard-v3 .g-rent-name { color: var(--d-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-v3 .g-rent-val { white-space: nowrap; font-weight: 600; color: var(--d-ink); font-variant-numeric: tabular-nums; }
.dashboard-v3 .g-rent-val small { font-size: 11px; font-weight: 400; color: var(--d-mute); }
.dashboard-v3 .g-rent-empty { font-size: 12px; color: var(--d-mute); padding: 4px 0; }
@media (max-width: 767.98px) {
    .dashboard-v3 .g-rentables .g-rent-cols { grid-template-columns: 1fr; }
    .dashboard-v3 .g-rent-col { padding: 0; }
    .dashboard-v3 .g-rent-col + .g-rent-col {
        border-left: 0; border-top: 1px solid var(--d-line); margin-top: 14px; padding-top: 14px;
    }
}

/* Top 10 (3ᵉ colonne) : en-tête label + sélecteur Plats/Boissons */
.dashboard-v3 .g-rent-tophead { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.dashboard-v3 .g-rent-tophead .g-rent-label { margin-bottom: 0; }
.dashboard-v3 .g-top-toggle { display: inline-flex; gap: 6px; }   /* pastilles séparées */
.dashboard-v3 .g-top-btn {
    border: 1px solid var(--d-line); border-radius: 5px; background: var(--d-surf); color: var(--d-mute); cursor: pointer;
    font-size: 11px; font-weight: 600; padding: 3px 11px; line-height: 1.4;
    transition: background .15s, color .15s, border-color .15s;
}
.dashboard-v3 .g-top-btn:hover { color: var(--d-ink); border-color: var(--d-mute); }
.dashboard-v3 .g-top-btn.is-active { background: var(--d-accent, #0E7C7B); color: #fff; border-color: var(--d-accent, #0E7C7B); }

/* ── Menu du jour (1/3 à droite, rangée 1) ─────────────────────────── */
.dashboard-v3 .g-daymenu { display: flex; flex-direction: column; }
.dashboard-v3 .g-dm-list {
    list-style: none; margin: 0; padding: 8px 16px 14px; overflow-y: auto; flex: 1; min-height: 0;
}
.dashboard-v3 .g-dm-list li {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    padding: 7px 0; border-bottom: 1px solid var(--d-softer); font-size: 13px;
}
.dashboard-v3 .g-dm-list li:last-child { border-bottom: 0; }
.dashboard-v3 .g-dm-name { color: var(--d-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-v3 .g-dm-price { white-space: nowrap; font-weight: 600; color: var(--d-ink); font-variant-numeric: tabular-nums; }
.dashboard-v3 .g-dm-price small { font-size: 11px; font-weight: 400; color: var(--d-mute); }

/* ── Police « craie » (Caveat, OFL, téléchargée en local) ─────────────── */
@font-face {
    font-family: 'Caveat'; font-style: normal; font-weight: 400 700; font-display: swap;
    src: url(fonts/caveat-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Caveat'; font-style: normal; font-weight: 400 700; font-display: swap;
    src: url(fonts/caveat-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── Menu du jour façon ardoise (chalkboard) ──────────────────────────── */
/* Image de fond en cover + léger voile sombre pour garantir le contraste,
   texte « craie » (Caveat) blanc, centré. */
.dashboard-v3 .g-daymenu {
    display: flex; flex-direction: column; position: relative;
    background: linear-gradient(rgba(18,26,22,.34), rgba(18,26,22,.34)), url(../img/chalkboard.jpeg) center/cover no-repeat;
    color: #fff; text-align: center; border-color: rgba(255,255,255,.18);
}
/* Crayon d'édition — haut-droite du container */
.dashboard-v3 .g-daymenu .g-dm-edit {
    position: absolute; top: 10px; right: 10px; z-index: 2;
    width: 30px; height: 30px; border-radius: 5px; cursor: pointer;
    border: 1px solid rgba(255,255,255,.30); background: rgba(255,255,255,.10); color: #fff;
    display: inline-flex; align-items: center; justify-content: center; font-size: 12px;
    transition: background .15s, border-color .15s;
}
.dashboard-v3 .g-daymenu .g-dm-edit:hover { background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.5); }
.dashboard-v3 .g-daymenu .g-card-head {
    flex-direction: column; align-items: center; justify-content: center; gap: 1px;
    border-bottom-color: rgba(255,255,255,.20);
}
.dashboard-v3 .g-daymenu .g-card-head h4 {
    font-family: 'Caveat', cursive; font-weight: 700; color: #fff; font-size: 25px; letter-spacing: .5px;
    text-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.dashboard-v3 .g-daymenu .g-card-note {
    margin-left: 0; font-family: 'Caveat', cursive; font-weight: 600;
    color: rgba(255,255,255,.85); font-size: 16px;
}
/* Éditeur « ardoise » : contenteditable, chaque ligne centrée, écriture craie blanche */
/* Corps de la suggestion (lecture seule) — écriture craie blanche, centrée */
.dashboard-v3 .g-daymenu .g-dm-body {
    flex: 1 1 auto; min-height: 0; overflow-y: auto;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 16px 18px 18px; gap: 10px;
}
.dashboard-v3 .g-daymenu .g-dm-content {
    font-family: 'Caveat', cursive; font-weight: 600; color: #fff;
    font-size: 22px; line-height: 1.5; text-align: center; text-shadow: 0 1px 2px rgba(0,0,0,.30);
}
.dashboard-v3 .g-daymenu .g-dm-content > div, .dashboard-v3 .g-daymenu .g-dm-content > p { margin: 0; }
.dashboard-v3 .g-daymenu .g-dm-amount {
    font-family: 'Caveat', cursive; font-weight: 700; color: #fff; font-size: 26px;
    margin-top: 4px; text-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.dashboard-v3 .g-daymenu .g-dm-amount small { font-size: 15px; font-weight: 400; color: rgba(255,255,255,.7); }
.dashboard-v3 .g-daymenu .g-dm-empty {
    font-family: 'Caveat', cursive; font-size: 20px; color: rgba(255,255,255,.7); line-height: 1.6; text-align: center;
}
.dashboard-v3 .g-daymenu .g-card-empty { color: rgba(255,255,255,.85); justify-content: center; }
.dashboard-v3 .g-daymenu .g-empty-ico { background: rgba(255,255,255,.15); color: #fff; }

/* Chart Chart.js — le wrap s'étire pour remplir la carte (hauteur égale au
   voisin) ; min-height garantit une lisibilité même si le voisin est court. */
.dashboard-v3 .g-chart-card { margin-bottom: 0; }
.dashboard-v3 .g-chart-card .g-chartjs-wrap { flex: 1; }
.dashboard-v3 .g-chartjs-wrap {
    position: relative; min-height: 220px; padding: 14px 16px 16px;
}

/* ── « À traiter » — alertes groupées en lignes cliquables ─────────── */
.dashboard-v3 .g-attn-list { display: flex; flex-direction: column; }
.dashboard-v3 .g-attn-row {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px; text-decoration: none; color: var(--d-ink);
    border-bottom: 1px solid var(--d-softer);
    transition: background .12s ease;
}
.dashboard-v3 .g-attn-row:last-child { border-bottom: 0; }
.dashboard-v3 .g-attn-row:hover { background: var(--d-soft); }
.dashboard-v3 .g-attn-ico {
    width: 34px; height: 34px; border-radius: 5px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center; font-size: 14px;
}
.dashboard-v3 .g-attn-ico.warn   { background: rgba(245,158,11,.12); color: #b45309; }
.dashboard-v3 .g-attn-ico.danger { background: rgba(220,38,38,.10);  color: #b91c1c; }
.dashboard-v3 .g-attn-val {
    font-size: 20px; font-weight: 600; color: var(--d-ink);
    font-variant-numeric: tabular-nums; flex-shrink: 0; min-width: 28px;
}
.dashboard-v3 .g-attn-lbl { flex: 1; font-size: 13px; color: var(--d-mute); line-height: 1.3; }
.dashboard-v3 .g-attn-go  { color: var(--d-mute); font-size: 11px; opacity: .6; flex-shrink: 0; }
.dashboard-v3 .g-attn-row:hover .g-attn-go { opacity: 1; color: var(--d-accent); }

/* Loader (chargement initial — disparaît au 1er render) */
.dashboard-loader { padding: 14px; text-align: center; color: var(--muted); }
.dashboard-loader-bar {
    height: 3px; background: var(--line-soft, #f1f5f9); border-radius: 5px;
    overflow: hidden; max-width: 220px; margin: 0 auto;
}
.dashboard-loader-fill {
    height: 100%; width: 30%; background: var(--accent);
    border-radius: 5px;
    animation: dashboard-loader-slide 1.2s ease-in-out infinite;
}
@keyframes dashboard-loader-slide {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(330%);  }
}
.dashboard-loader.is-error { color: #b91c1c; }
.dashboard-loader.is-error .dashboard-loader-fill { background: #b91c1c; animation: none; width: 100%; }
.dashboard-loader-msg { font-size: 12px; margin: 8px 0 0; }
[data-state="ready"] + .dashboard-loader { display: none; }

/* ══════════════════════════════════════════════════════════
   TYPOGRAPHIE — taille de base discrète (cambatani-like)
   ══════════════════════════════════════════════════════════ */
body, .card-body, .card-header, .dropdown-item, .list-group-item {
    font-size: 13.5px;
}
.form-control, .form-select { font-size: 13.5px; }
.form-control-sm, .form-select-sm { font-size: 12.5px; }
.btn-sm { font-size: var(--font-size-sm); }
.badge { font-size: 11.5px; padding: 4px 8px; border-radius: 5px; letter-spacing: .02em; }

.content-title {
    /* Échelle du nombre d'or (DESIGN.md §1) : le titre de page vaut R × φ = 21px
       (--font-size-xl). Le projet imposait 18px, une taille que la charte exclut
       — aucun palier n'existe entre 13px (plafond du contenu) et 21px.
       ⚠️ EN ATTENTE D'ARBITRAGE (2026-08-17) : la conformité stricte a été
       appliquée ici, mais la propriétaire n'a PAS tranché — elle demandait au
       contraire de réduire ce qui était trop gros. Ce passage de 18px à 21px
       AGRANDIT tous les titres. À confirmer ou à revenir à 18px. */
    font-size: var(--font-size-xl);
    font-weight: 600;
    letter-spacing: -0.01em;
    margin-bottom: 18px;
}

/* ── Logo de la boîte de connexion ─────────────────────────────
   Le socle (login-box.css:108) contraint .lb-sidebar-logo-img dans un
   CARRÉ de 72×72 : conçu pour une icône carrée (le monogramme « MW »).
   La vraie signature Mami Wata a un rapport de ~5:1 — enfermée dans ce
   carré avec object-fit:contain, elle tombe à 72×14 px et devient
   illisible. On libère la largeur CÔTÉ PROJET plutôt que de modifier le
   socle, partagé avec lemai/matissa/serfin/cambatani dont les logos sont
   carrés et n'ont rien à y gagner. 2026-08-20. */
.lb-sidebar-logo-img {
    width: auto;
    max-width: 150px;
    height: auto;
    max-height: 56px;
    border-radius: 0;
}
.lb-mobile-logo-img {
    width: auto;
    max-width: 120px;
    height: auto;
    max-height: 40px;
    border-radius: 0;
}

/* ── Rangée de titre ───────────────────────────────────────────
   Le motif CANONIQUE est .content-title + .content-title-actions
   (iManage/css/imanage.css) : flex, margin-left:auto sur les actions,
   donc boutons TOUJOURS alignés à droite, et titre à --font-size-xl.
   Les règles .page-header / .page-header-main / .page-title /
   .page-actions vivaient ici pour UN SEUL écran (détail de facture),
   avec un titre à 18px qui violait l'échelle du nombre d'or (aucune
   taille de contenu entre 13px et 21px). Cet écran est passé au motif
   canonique le 2026-08-17 : les règles sont supprimées pour qu'on ne
   réintroduise pas la divergence. */
.page-meta { line-height: 1.5; }

/* Form labels en small caps cambatani-style */
.form-label, .no-form-frame .small.text-uppercase {
    font-size: 12px !important;
    font-weight: 500 !important;
    color: var(--ink-soft, #334155) !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 4px !important;
    opacity: 1 !important;
}

/* Navbar : padding plus serré + nav-link élégant */
.navbar { padding: 6px 0; }
.navbar .nav-link {
    color: var(--ink-soft, #334155) !important;
    font-weight: 500;
    padding: 6px 14px !important;
    font-size: 13.5px;
    border-radius: 5px;
}
.navbar .nav-link:hover { background: rgba(0,0,0,.04); color: var(--ink, #0F172A) !important; }
.navbar .nav-link > .fa-solid,
.navbar .nav-link > .fa-regular {
    margin-right: 6px;
    width: 1.1em;
    text-align: center;
    opacity: .75;
}

/* Dropdown sobre */
.dropdown-menu {
    border: 1px solid var(--line, #E2E8F0);
    border-radius: 5px;
    padding: 6px;
    box-shadow: var(--shadow-md, 0 4px 12px rgba(15,23,42,.06));
}
.dropdown-item {
    padding: 7px 12px;
    border-radius: 5px;
    font-size: 13.5px;
}
.dropdown-item:hover, .dropdown-item:focus {
    background: var(--accent, #0E7C7B);
    color: #fff;
}
.dropdown-header {
    font-weight: 600;
    color: var(--muted, #64748B);
    padding: 7px 12px 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 10.5px;
}
.dropdown-divider { margin: 4px 12px; opacity: .15; }

/* ── Dropdowns sur 2 colonnes (gros menus : Stock & Achats, Administration) ──
   columns:2 (défini dans menu.css) ; on adapte la largeur + le filet à la
   palette Mami Wata, on empêche un item d'être coupé entre 2 colonnes, et on
   gère le saut de colonne explicite via .dropdown-col-break. */
.dropdown-menu-columns {
    min-width: 480px;
    max-width: calc(100vw - 20px);   /* jamais plus large que la fenêtre */
    column-gap: 14px;
    column-rule: 1px solid var(--line, #E2E8F0);
    padding: 6px 8px;
}
.dropdown-menu-columns.cols-3 { columns: 3; min-width: 660px; }
.dropdown-menu-columns > li        { break-inside: avoid; }
.dropdown-menu-columns .dropdown-item { white-space: nowrap; }
/* Marqueur invisible : force la colonne suivante à démarrer ici. */
.dropdown-col-break {
    break-after: column;
    height: 0; margin: 0; padding: 0; border: 0; list-style: none;
}
@media (max-width: 767.98px) {
    /* Sur petit écran, une seule colonne pour rester lisible. */
    .dropdown-menu-columns, .dropdown-menu-columns.cols-3 { min-width: 0; columns: 1; column-rule: none; }
    .dropdown-col-break { display: none; }
}

/* ── Positionnement maîtrisé + flèche vers le menu actif ───────────────
   Avec data-bs-display="static", chaque .dropdown-menu se place en absolu
   sous son <li>. mamiwata_dev.js ajuste .style.left pour qu'il reste dans
   la fenêtre, et pose --caret-x = position du déclencheur. La flèche (carré
   pivoté) pointe vers le menu ouvert. */
.navbar .nav-item.dropdown { position: relative; }
.navbar .dropdown-menu { margin-top: 10px; }      /* espace pour la flèche */
.navbar .dropdown-menu.has-caret { overflow: visible; }
.navbar .dropdown-menu.has-caret::before {
    content: '';
    position: absolute;
    top: -6px;
    left: var(--caret-x, 22px);
    width: 11px; height: 11px;
    transform: translateX(-50%) rotate(45deg);
    background: var(--paper, #fff);
    border-left: 1px solid var(--line, #E2E8F0);
    border-top:  1px solid var(--line, #E2E8F0);
    border-radius: 2px 0 0 0;
}
[data-theme="dark"] .navbar .dropdown-menu.has-caret::before {
    background: var(--bg-surface, #1e293b);
    border-color: var(--border, #334155);
}

/* ══════════════════════════════════════════════════════════
   FOOTER — fixé en bas, 3 colonnes (logo Digits / © / date · heure)
   Aligné sur le standard cambatani / iManage page-footer.
   ══════════════════════════════════════════════════════════ */
#page_footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    min-height: 48px;
    display: flex;
    align-items: center;
    /* Barre pleine largeur ; c'est le .container-fluid interne (.footer-row) qui
       porte le padding --app-px et le cap 1400px → aligné avec menu et contenu. */
    padding: 6px 0;
    border-top: 1px solid var(--line, #E2E8F0);
    background: var(--paper, #fff);
    color: var(--muted, #64748B);
    font-size: 12px;
    letter-spacing: 0.06em;
    /* Au-dessus du login-box (z-index 1060) pour que le demo-switch
       soit toujours accessible même depuis l'écran de connexion. */
    z-index: 1070;
}
#page_footer .footer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
}
/* Colonne gauche — logo Digits */
#page_footer .footer-brand {
    flex: 1;
    display: flex;
    align-items: center;
}
#page_footer .footer-digits-logo {
    height: 18px;
    width: auto;
    pointer-events: none; /* réactivé si le demo-switch s'active */
}
#demo_switch_trigger.footer-digits-logo,
#page_footer #demo_switch_trigger { pointer-events: auto; cursor: pointer; opacity: .85; transition: opacity .12s; }
#demo_switch_trigger.footer-digits-logo:hover,
#page_footer #demo_switch_trigger:hover { opacity: 1; }

/* Colonne centre — copyright */
#page_footer .footer-copy {
    flex: 1;
    text-align: center;
    color: var(--muted, #64748B);
}
/* Colonne droite — date · heure */
#page_footer .footer-datetime {
    flex: 1;
    justify-content: flex-end;
    color: var(--muted, #64748B);
    letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
}
#page_footer .footer-sep { opacity: 0.5; }

/* Mobile : copyright masqué — gain de place pour logo + date/heure */
@media (max-width: 575.98px) {
    #page_footer .footer-copy { display: none; }
}

/* Compensation : 48px réservés au footer fixe + safe-area iOS */
body {
    padding-bottom: calc(48px + env(safe-area-inset-bottom, 0px));
}

/* Print : footer caché (déjà couvert plus bas mais on s'assure du fixed) */
@media print {
    #page_footer { position: static; display: none !important; }
    body { padding-bottom: 0; }
}

/* ══════════════════════════════════════════════════════════
   FORMULAIRE NOUVELLE COMMANDE — variables CSS + dark mode
   ══════════════════════════════════════════════════════════ */
:root {
    --order-surface: #ffffff;
    --order-border:  #e2e8f0;
    --order-text:    #1d2939;
    --order-muted:   #64748B;
    --order-bg-pane: #fafbfc;
    --order-cell-bg: #f8f9fa;
    --order-occupied-bg:     #fdecea;
    --order-occupied-border: #f5b8b1;
    --order-occupied-text:   #b32a1d;
    --order-active-shadow:   rgba(0,0,0,.15);
}
[data-theme="dark"] {
    --order-surface: var(--bg-surface, #1e293b);
    --order-border:  var(--border, #334155);
    --order-text:    var(--text-primary, #f1f5f9);
    --order-muted:   var(--text-secondary, #94a3b8);
    --order-bg-pane: var(--bg-elevated, #0f172a);
    --order-cell-bg: var(--bg-surface, #1e293b);
    --order-occupied-bg:     rgba(220, 53, 69, 0.18);
    --order-occupied-border: rgba(220, 53, 69, 0.55);
    --order-occupied-text:   #fca5a5;
    --order-active-shadow:   rgba(0,0,0,.5);
}

/* Boutons SITE — !important pour neutraliser le user-agent style sur <button> */
#site_buttons .site-btn,
#tables_area .table-btn,
.menu-type-nav .nav-item,
.dish-type-nav .nav-item,
.dish-btn,
.side-section {
    appearance: none;
    -webkit-appearance: none;
}
#site_buttons .site-btn {
    background: var(--order-surface) !important;
    color: var(--order-text) !important;
    border-color: var(--order-border) !important;
}
#site_buttons .site-btn:hover { border-color: var(--accent) !important; }
#site_buttons .site-btn.active {
    background: var(--accent) !important;
    color: #fff !important;
    border-color: var(--accent) !important;
}

/* Tuiles TABLE */
#tables_area .table-btn {
    background: var(--order-surface) !important;
    color: var(--order-text) !important;
    border-color: var(--order-border) !important;
}
#tables_area .table-btn:hover { border-color: var(--accent) !important; }
#tables_area .table-btn.occupied {
    background: var(--order-occupied-bg) !important;
    color: var(--order-occupied-text) !important;
    border-color: var(--order-occupied-border) !important;
}
#tables_area .table-btn.active {
    background: var(--accent) !important;
    color: #fff !important;
    border-color: var(--accent) !important;
    box-shadow: 0 2px 6px var(--order-active-shadow);
}
#tables_area .table-btn.occupied.active {
    background: #dc3545 !important;
    color: #fff !important;
    border-color: #dc3545 !important;
}

/* Menu navigation : tabs et pills */
.menu-type-nav .nav-item,
.dish-type-nav .nav-item {
    color: var(--order-text) !important;
    background: transparent !important;
    text-decoration: none;
}
.menu-type-nav .nav-item:hover,
.dish-type-nav .nav-item:hover {
    background: var(--order-cell-bg) !important;
}
.menu-type-nav .nav-item.active {
    background: var(--accent) !important;
    color: #fff !important;
}
.dish-type-nav .nav-item.active {
    background: var(--accent-dark) !important;
    color: #fff !important;
}
[data-theme="dark"] .menu-type-nav .nav-item:hover,
[data-theme="dark"] .dish-type-nav .nav-item:hover {
    background: rgba(255,255,255,.04);
}

/* Super-catégorie « Ardoise du jour » (Tâche D) : ambre appuyé (--secondary),
   distincte de l'accent sarcelle des autres rubriques. Variables de thème
   uniquement — --secondary n'est pas redéfini en sombre, l'ambre reste
   lisible sur les deux thèmes. */
.menu-type-nav .nav-item.nav-ardoise,
.dish-type-nav .nav-item.nav-ardoise {
    background: var(--secondary) !important;
    color: #fff !important;
    font-weight: 700;
}
.menu-type-nav .nav-item.nav-ardoise:hover,
.dish-type-nav .nav-item.nav-ardoise:hover {
    background: var(--secondary-dark) !important;
}
.menu-type-nav .nav-item.nav-ardoise.active,
.dish-type-nav .nav-item.nav-ardoise.active {
    background: var(--secondary-dark) !important;
    color: #fff !important;
}

/* Pane plats */
.dishes-pane {
    background: var(--order-bg-pane) !important;
    border-radius: var(--radius-sm);
}
.dish-btn {
    background: var(--order-surface) !important;
    color: var(--order-text) !important;
    border-color: var(--order-border) !important;
}
.dish-btn:hover { border-color: var(--accent) !important; }
.dish-btn .dish-name { color: var(--order-text) !important; }
.dish-btn .dish-price { color: var(--accent) !important; }

/* Side panel */
.side-section {
    background: var(--order-surface) !important;
    border-color: var(--order-border) !important;
}
.side-section-title {
    background: var(--order-cell-bg) !important;
    border-bottom-color: var(--order-border) !important;
    color: var(--order-text) !important;
}

/* Titre de la modale + labels + breadcrumb */
.no-form-frame { color: var(--order-text); }
.no-form-frame h4 { color: var(--order-text); }
[data-theme="dark"] .no-form-frame .text-muted,
[data-theme="dark"] .no-form-frame .text-uppercase.text-muted { color: var(--order-muted) !important; }

/* Fil d'Ariane : barre transparente, sans fond ni bordure (se fond dans le canvas) */
/* Filet bas : sépare la barre de navigation du contenu. Le `border: 0` qui
   précède neutralise l'habillage du socle ; on repose ensuite le seul côté
   qu'on veut, avec la même priorité, sinon il serait emporté par le premier. */
#breadcrumb_bar { background: transparent !important; border: 0 !important;
                  border-bottom: 1px solid var(--line) !important; box-shadow: none !important; }
/* Le fil d'Ariane tient la gauche, le sélecteur d'établissement la droite.
   `margin-left:auto` plutôt que `justify-content:space-between` : quand le
   sélecteur est absent — c'est le cas de tous les comptes rattachés, donc de
   la quasi-totalité des employés — le fil d'Ariane reste calé à gauche au lieu
   de se recentrer. Rien ne bouge pour ceux qui n'ont pas de sélecteur. */
#breadcrumb_bar .container-fluid { display: flex; align-items: center; gap: 12px; }
#breadcrumb_bar #restaurant_scope { margin-left: auto; margin-right: 0; }
@media (max-width: 767px) {
    #breadcrumb_bar .container-fluid { flex-wrap: wrap; }
    #breadcrumb_bar #restaurant_scope { margin-left: 0; }
}

/* Cart lines */
#cart_area table { color: var(--order-text); background: transparent; }
/* Lignes du panier : fond et séparateurs retirés (look plat) */
#cart_area .table > :not(caption) > * > * { border-width: 0; box-shadow: none; background-color: transparent; }
#cart_area .cart-line:hover { background: rgba(220, 53, 69, 0.07); }
#cart_area .cart-total {
    background: var(--order-cell-bg);
    color: var(--order-text);
    border-top-color: var(--accent);
}
#cart_area .cart-line .qty-badge { background: var(--accent); color: #fff; }
#cart_area .cart-line .cart-price { color: var(--order-muted); }

/* Opened invoices */
.opened-invoice { border-bottom-color: var(--order-border); color: var(--order-text); }
.opened-invoice .inv-ref { background: var(--order-cell-bg); color: var(--order-text); }
.opened-invoice .inv-total { color: var(--accent); }
.opened-invoice .pay-form {
    background: var(--order-cell-bg);
    border-color: var(--order-border);
}
.opened-invoice .badge-qty {
    background: var(--order-cell-bg);
    color: var(--order-text);
}
[data-theme="dark"] #cart_area .cart-line:hover {
    background: rgba(220, 53, 69, 0.15);
}

/* Inputs et labels du formulaire en dark mode */
[data-theme="dark"] .no-form-frame .form-control,
[data-theme="dark"] .no-form-frame .form-select {
    background: var(--order-surface);
    color: var(--order-text);
    border-color: var(--order-border);
}
[data-theme="dark"] .no-form-frame .form-control::placeholder { color: var(--order-muted); }
[data-theme="dark"] .no-form-frame .input-group-text {
    background: var(--order-cell-bg);
    color: var(--order-text);
    border-color: var(--order-border);
}
[data-theme="dark"] .no-form-frame .text-muted { color: var(--order-muted) !important; }

/* Couleurs des labels de section — bien lisibles en dark mode */
.no-form-frame .small.text-uppercase.text-muted {
    color: var(--order-text) !important;
    opacity: .65;
    font-weight: 600;
}
[data-theme="dark"] .no-form-frame .small.text-uppercase.text-muted {
    color: #cbd5e1 !important;
    opacity: .85;
}

/* Titre Nouvelle commande dans le header de la modale */
[data-theme="dark"] #form_container .form-panel-header h5,
[data-theme="dark"] #form_container_title { color: var(--order-text) !important; }

/* ── Carousel de factures ───────────────────────────────────────────────── */
.invoices-carousel {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius);
}

.invoices-track {
    display: flex;
    transition: transform 300ms ease-in-out;
}

.invoice-card {
    flex: 0 0 100%;
    padding: 1rem;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.invoice-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.invoice-divider {
    margin: 0.75rem 0;
    border: 0;
    border-top: 1px solid var(--line);
}

.invoice-header {
    margin-bottom: 1rem;
}

.invoice-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.invoice-number {
    font-size: var(--font-size-lg);
    font-weight: 600;
}

.invoice-meta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.invoice-total {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--accent);
}

.invoice-date {
    font-size: var(--font-size-sm);
    color: var(--muted);
}

.invoice-body {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.invoice-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font-size-base);
}

.invoice-detail-row span:first-child {
    color: var(--muted);
    font-size: var(--font-size-sm);
}

.invoice-detail-total {
    font-weight: 600;
}

.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--paper);
    color: var(--accent);
    box-shadow: var(--shadow-md);
    transition: opacity 0.15s ease-out;
}

.carousel-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.carousel-btn-prev { left: 0.5rem; }
.carousel-btn-next { right: 0.5rem; }

@media (prefers-reduced-motion: reduce) {
    .invoices-track { transition: none; }
}

/* ── Accessibilité : respect de prefers-reduced-motion ──────────────────────
   Neutralise animations, transitions et défilement animé pour les utilisateurs
   qui demandent une réduction des mouvements (vestibulaire, TDAH…). */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}


/* ── Modale de validation d'antidatage (mw_antidate, js/scripts/mamiwata_dev.js)
   Même motif visuel que .no3-confirm-overlay : calque fixed par-dessus le
   formulaire hôte, qui n'est jamais détruit. */
.mw-antidate-overlay {
    position: fixed; inset: 0; z-index: 1100;
    display: none; align-items: center; justify-content: center;
    background: rgba(15, 23, 42, .45);
}
.mw-antidate-box {
    background: var(--paper); color: var(--ink, #0F172A);
    border-radius: var(--radius); box-shadow: var(--shadow-md);
    width: min(440px, calc(100vw - 32px));
    padding: 16px 18px;
}
.mw-antidate-head {
    font-weight: 700; font-size: 15px; margin-bottom: 10px;
    display: flex; align-items: center; gap: 8px;
}
.mw-antidate-summary {
    border: 1px solid var(--line); border-radius: var(--radius);
    padding: 8px 12px; margin-bottom: 10px; font-size: 13px;
}
.mw-antidate-row { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; }
.mw-antidate-row span { color: var(--muted, #64748B); }
.mw-antidate-warn {
    margin-top: 6px; font-size: 12.5px;
    color: var(--secondary-dark, #B45309);
}
.mw-antidate-mail-note {
    font-size: 12.5px; color: var(--muted, #64748B); margin: 0 0 10px;
}
.mw-antidate-error { font-size: 13px; padding: 6px 10px; margin-bottom: 10px; }
.mw-antidate-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }