/* Soludevi Mailbox - styles V1 */

/* Variables CSS injectees via wp_add_inline_style (cf visuel/visuel-base.php).
   Les defauts ici servent de fallback si le inline-style n'est pas charge.
   color-mix() (hover) demande Chrome 111+ / Firefox 113+ / Safari 16.2+. */

:root {
    --mailbox-color-primary: #2271b1;
    --mailbox-color-accent: #4caf50;
    --mailbox-color-menu-bg: #f6f7f9;
    --mailbox-color-menu-text: #333333;
    /* Dimensions configurables (page Apparence > Dimensions). Surchargees au chargement
       par wp_add_inline_style. --mailbox-spacing est un multiplicateur (1 = defaut) applique
       en calc() aux paddings/marges cles (wrapper, sidebar, sections, tableaux). */
    --mailbox-font-size: 13px;
    --mailbox-line-height: 1.4;
    --mailbox-spacing: 1;
}

/* ---------- layout app ---------- */

.mailbox-wrapper {
    display: flex;
    gap: calc(1.5em * var(--mailbox-spacing, 1));
    max-width: 1280px;
    margin: 2em auto;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #222;
    /* Taille de base epinglee : sans elle, le wrapper herite du contexte (13px en
       wp-admin, 16px dans le theme front) et tout l'UI, exprime en em, grossit d'autant
       sur le front. On s'aligne sur la compacite du back-office (13px / interligne 1.4)
       pour un rendu identique partout. L'admin etant deja a 13px, c'est sans effet la-bas.
       Pilotees par la page Apparence > Dimensions (variables avec fallback aux 13px / 1.4). */
    font-size: var(--mailbox-font-size, 13px);
    line-height: var(--mailbox-line-height, 1.4);
}

/* Echelle des titres de l'app, epinglee en em (relative aux 13px ci-dessus) pour ne plus
   dependre du theme : sinon le h1 du theme (32px, en rem) reste enorme sur le front.
   Valeurs calees sur le rendu back-office (h1 ~23px). */
.mailbox-wrapper h1 { font-size: 1.77em; line-height: 1.3; margin: 0 0 0.6em; }
.mailbox-wrapper h2 { font-size: 1.4em;  line-height: 1.3; }
.mailbox-wrapper h3 { font-size: 1.15em; line-height: 1.3; }

.mailbox-sidebar {
    flex: 0 0 200px;
    background: var(--mailbox-color-menu-bg, #f6f7f9);
    border-radius: 8px;
    padding: calc(1em * var(--mailbox-spacing, 1)) 0;
}

.mailbox-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mailbox-nav-item {
    display: block;
    padding: calc(0.6em * var(--mailbox-spacing, 1)) 1.2em;
    color: var(--mailbox-color-menu-text, #333333);
    text-decoration: none;
    border-left: 3px solid transparent;
    font-size: 0.95em;
}

/* icone (emoji) devant le libelle du menu : largeur fixe pour aligner les labels */
.mailbox-nav-icone {
    display: inline-block;
    width: 1.5em;
    text-align: center;
    margin-right: 0.3em;
    font-style: normal;
}

.mailbox-nav-item:hover {
    background: color-mix(in srgb, var(--mailbox-color-menu-bg, #f6f7f9) 85%, #000);
    text-decoration: none;
}

.mailbox-nav-item-actif {
    background: #fff;
    border-left-color: var(--mailbox-color-primary, #2271b1);
    font-weight: 600;
    color: var(--mailbox-color-primary, #2271b1);
}

/* items prioritaires (Reception, Envoi simple, Envoi groupe) : en gras pour mettre
   les actions principales en avant visuellement. */
.mailbox-nav-item-prioritaire {
    font-weight: 600;
}

/* badge "non lu" affiche a cote de "Reception" dans la sidebar (X mails non lus,
   tous comptes IMAP confondus). Compact, couleur principale du theme. */
.mailbox-nav-badge {
    display: inline-block;
    margin-left: 0.4em;
    padding: 0.1em 0.55em;
    font-size: 0.8em;
    font-weight: 600;
    line-height: 1.4;
    color: #fff;
    background: var(--mailbox-color-primary, #2271b1);
    border-radius: 10px;
    min-width: 1.4em;
    text-align: center;
}

.mailbox-main {
    flex: 1;
    min-width: 0;
}

.mailbox-section {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: calc(1.5em * var(--mailbox-spacing, 1)) calc(2em * var(--mailbox-spacing, 1));
}

.mailbox-section h1 {
    margin-top: 0;
}

.mailbox-acces-refuse {
    background: #fff4e5;
    border: 1px solid #f0b429;
    border-radius: 6px;
    padding: 1em 1.5em;
    color: #6b4d00;
}

/* ---------- config ---------- */

.mailbox-config-wrapper {
    max-width: 100%;
}

.mailbox-config-form {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: calc(1.5em * var(--mailbox-spacing, 1)) calc(2em * var(--mailbox-spacing, 1));
}

.mailbox-config-section {
    margin: 1.5em 0;
    padding: 1em 0;
    border-top: 1px solid #eee;
}

.mailbox-config-section:first-of-type {
    border-top: none;
}

.mailbox-config-section h2 {
    margin-top: 0;
    font-size: 1.1em;
    color: var(--mailbox-color-primary, #2271b1);
}

.mailbox-config-section label {
    display: block;
    margin: 0.8em 0;
    font-weight: 500;
}

.mailbox-config-section input[type=text],
.mailbox-config-section input[type=password],
.mailbox-config-section input[type=number],
.mailbox-config-section select {
    display: block;
    margin-top: 0.3em;
    padding: 0.4em 0.6em;
    border: 1px solid #ccc;
    border-radius: 4px;
    min-width: 280px;
    font: inherit;
}

.mailbox-textarea-large {
    display: block;
    margin-top: 0.3em;
    width: 100%;
    max-width: 600px;
    padding: 0.5em;
    border: 1px solid #ccc;
    border-radius: 4px;
    font: inherit;
}

.mailbox-note {
    font-size: 0.85em;
    color: #666;
    margin: 0.3em 0 1em;
}

.mailbox-table-permissions {
    border-collapse: collapse;
    margin: 1em 0;
    width: 100%;
}

.mailbox-table-permissions th,
.mailbox-table-permissions td {
    border: 1px solid #ddd;
    padding: 0.5em 0.8em;
    font-size: 0.9em;
}

.mailbox-table-permissions thead th {
    background: #f6f7f9;
    text-align: left;
}

.mailbox-config-actions {
    margin-top: 1.5em;
    text-align: right;
}

.mailbox-btn-primary {
    background: var(--mailbox-color-primary, #2271b1);
    color: #fff;
    border: none;
    padding: 0.6em 1.4em;
    border-radius: 4px;
    font-size: 1em;
    cursor: pointer;
}

.mailbox-btn-primary:hover {
    background: color-mix(in srgb, var(--mailbox-color-primary, #2271b1) 85%, #000);
}

.mailbox-btn-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ---------- toasts ---------- */

#mailbox-toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}

.mailbox-toast {
    padding: 0.8em 1.4em;
    border-radius: 4px;
    color: #fff;
    font-size: 0.95em;
    opacity: 0;
    transform: translateX(20px);
    transition: opacity 0.3s, transform 0.3s;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.mailbox-toast-show {
    opacity: 1;
    transform: translateX(0);
}

.mailbox-toast-success {
    background: var(--mailbox-color-accent, #4caf50);
}

.mailbox-toast-error {
    background: #d32f2f;
}

/* ---------- spinner ---------- */

.mailbox-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: mailbox-spin 0.7s linear infinite;
    vertical-align: middle;
}

@keyframes mailbox-spin {
    to { transform: rotate(360deg); }
}

.mailbox-ajax-loading {
    pointer-events: none;
    opacity: 0.6;
}

/* ---------- list / table ---------- */

.mailbox-list-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1em;
    flex-wrap: wrap;
    margin-bottom: 0.5em;
}

.mailbox-list-head h1 {
    margin: 0;
}

.mailbox-list-actions {
    display: flex;
    gap: 0.6em;
    align-items: center;
}

.mailbox-inline-filter {
    display: flex;
    gap: 0.4em;
    align-items: center;
}

.mailbox-inline-filter input[type=search] {
    padding: 0.4em 0.7em;
    border: 1px solid #ccc;
    border-radius: 4px;
    font: inherit;
    min-width: 220px;
}

.mailbox-meta {
    color: #666;
    font-size: 0.9em;
    margin: 0.3em 0 1em;
}

.mailbox-meta-inline {
    color: #888;
    font-size: 0.85em;
}

.mailbox-empty {
    padding: 2em;
    text-align: center;
    color: #888;
    background: #fafafa;
    border-radius: 6px;
}

.mailbox-empty-small {
    color: #888;
    font-size: 0.9em;
    padding: 0.5em;
}

.mailbox-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1em 0;
    font-size: 0.92em;
}

.mailbox-table th,
.mailbox-table td {
    border-bottom: 1px solid #eee;
    padding: calc(0.6em * var(--mailbox-spacing, 1)) 0.8em;
    text-align: left;
    vertical-align: top;
}

.mailbox-table thead th {
    background: #f6f7f9;
    font-weight: 600;
    border-bottom: 2px solid #ddd;
}

.mailbox-table tbody tr:hover {
    background: #fafbfc;
}

.mailbox-row-actions a {
    color: var(--mailbox-color-primary, #2271b1);
    text-decoration: none;
    cursor: pointer;
}

.mailbox-row-actions a:hover {
    text-decoration: underline;
}

.mailbox-link-danger {
    color: #b32d2e !important;
}

/* ---------- forms ---------- */

.mailbox-form {
    max-width: 720px;
}

.mailbox-form label {
    display: block;
    margin: 0.8em 0;
    font-weight: 500;
}

.mailbox-form input[type=text],
.mailbox-form input[type=email],
.mailbox-form input[type=password],
.mailbox-form input[type=number],
.mailbox-form input[type=search],
.mailbox-form select,
.mailbox-form textarea {
    display: block;
    margin-top: 0.3em;
    padding: 0.5em 0.7em;
    border: 1px solid #ccc;
    border-radius: 4px;
    font: inherit;
    width: 100%;
    max-width: 420px;
    box-sizing: border-box;
}

.mailbox-form-row {
    display: flex;
    gap: 1em;
    flex-wrap: wrap;
}

.mailbox-form-row label {
    flex: 1;
    min-width: 220px;
}

.mailbox-form-actions {
    display: flex;
    gap: 0.6em;
    margin-top: 1.5em;
    justify-content: flex-end;
}

.mailbox-btn-secondary {
    background: #fff;
    color: var(--mailbox-color-primary, #2271b1);
    border: 1px solid var(--mailbox-color-primary, #2271b1);
    padding: 0.55em 1.2em;
    border-radius: 4px;
    font-size: 0.95em;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}

.mailbox-btn-secondary:hover {
    background: color-mix(in srgb, var(--mailbox-color-primary, #2271b1) 8%, #fff);
}

/* ---------- pagination ---------- */

.mailbox-pagination {
    display: flex;
    align-items: center;
    gap: 1em;
    justify-content: center;
    margin: 1.5em 0;
}

.mailbox-pagination-form {
    display: inline;
}

.mailbox-pagination-current {
    color: #555;
    font-size: 0.95em;
}

/* ---------- selecteur de membres ---------- */

.mailbox-selecteur-membres {
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 1em;
    margin: 1em 0;
}

.mailbox-selecteur-membres legend {
    font-weight: 600;
    color: var(--mailbox-color-primary, #2271b1);
    padding: 0 0.5em;
}

.mailbox-selecteur-membres details {
    margin: 0.8em 0;
}

.mailbox-selecteur-membres summary {
    cursor: pointer;
    padding: 0.4em 0;
    font-weight: 500;
}

.mailbox-selecteur-block {
    max-height: 280px;
    overflow-y: auto;
    padding: 0.5em;
    background: #fafafa;
    border-radius: 4px;
    margin-top: 0.3em;
}

.mailbox-check {
    display: block;
    padding: 0.3em 0.5em;
    font-size: 0.9em;
}

.mailbox-check:hover {
    background: #fff;
}

.mailbox-check input {
    margin-right: 0.5em;
}

/* ---------- filtres utilisateurs ---------- */

.mailbox-filtres {
    background: #f6f7f9;
    padding: 0.8em 1em;
    border-radius: 6px;
    margin-bottom: 1em;
    display: flex;
    flex-wrap: wrap;
    gap: 0.8em;
    align-items: center;
}

.mailbox-filtres input[type=search] {
    padding: 0.4em 0.7em;
    border: 1px solid #ccc;
    border-radius: 4px;
    font: inherit;
    min-width: 240px;
}

.mailbox-filtres-roles {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7em;
    align-items: center;
}

.mailbox-check-inline {
    font-size: 0.9em;
    color: #444;
}

.mailbox-check-inline input {
    margin-right: 0.3em;
}

/* ---------- composer ---------- */

.mailbox-section-composer {
    max-width: 100%;
}

.mailbox-form-block {
    display: block;
    margin: 1.2em 0;
}

.mailbox-form-label {
    display: block;
    font-weight: 600;
    color: var(--mailbox-color-primary, #2271b1);
    margin-bottom: 0.3em;
}

.mailbox-input-sujet {
    display: block;
    width: 100%;
    padding: 0.55em 0.8em;
    border: 1px solid #ccc;
    border-radius: 4px;
    font: inherit;
    box-sizing: border-box;
}

/* ---------- composer : entete compacte (Expediteur / Destinataire / Cc / Cci / Sujet) ----------
   Grille 2 colonnes : ligne 1 = Expediteur + Destinataire, ligne 2 = Cc + Cci, ligne 3 = Sujet
   (pleine largeur). Marges verticales resserrees : cette zone prenait beaucoup trop de hauteur
   avec un bloc par ligne. align-items:start pour que 2 blocs de hauteurs differentes (un champ
   avec des chips en apercu a cote d'un champ vide) restent colles en haut. */
.mailbox-composer-entete {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 0.5em 1.2em;
    margin: 0.8em 0 1em;
}

.mailbox-composer-entete .mailbox-form-block,
.mailbox-composer-entete .mailbox-entete-cell {
    margin: 0;
    min-width: 0;
}

/* cellule composite (champ + apercu hors label) : compte pour une seule case de grille */
.mailbox-composer-entete .mailbox-entete-cell > .mailbox-form-block {
    margin: 0;
}

.mailbox-composer-entete .mailbox-form-label {
    margin-bottom: 0.15em;
    font-size: 0.92em;
}

/* le sujet occupe les 2 colonnes */
.mailbox-composer-entete .mailbox-entete-full {
    grid-column: 1 / -1;
}

/* champs de l'entete : meme largeur / meme allure d'une ligne a l'autre */
.mailbox-composer-entete .mailbox-select-expediteur,
.mailbox-composer-entete .mailbox-dest-libre-input,
.mailbox-composer-entete .mailbox-copie-input {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    font: inherit;
}

/* ligne "champ + bouton Ajouter" : flex pour que le bouton ne deborde jamais de la colonne */
.mailbox-composer-entete .mailbox-dest-libre-row {
    display: flex;
    align-items: center;
    gap: 0.4em;
}

.mailbox-composer-entete .mailbox-dest-libre-row input {
    flex: 1 1 auto;
    min-width: 0;
}

.mailbox-composer-entete .mailbox-dest-libre-row .mailbox-btn-secondary {
    flex: 0 0 auto;
    margin-left: 0;
    white-space: nowrap;
}

/* apercus (chips) sous les champs : colles au champ, pas d'espace mort */
.mailbox-composer-entete .mailbox-dest-libre-apercu,
.mailbox-composer-entete .mailbox-copie-apercu {
    margin-top: 0.25em;
}

.mailbox-composer-entete .mailbox-dest-libre-apercu:empty,
.mailbox-composer-entete .mailbox-copie-apercu:empty {
    margin-top: 0;
}

/* mobile / colonne etroite : on repasse a 1 champ par ligne */
@media (max-width: 700px) {
    .mailbox-composer-entete {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------- Apparence : color picker (Couleurs) + sliders (Dimensions) ---------- */

.mailbox-input-color {
    vertical-align: middle;
    width: 50px;
    height: 32px;
    padding: 0;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    min-width: 0;
}

/* Dimensions : un slider + la valeur courante affichee a cote, sur la meme ligne.
   Le label parent est en display:block (cf .mailbox-config-section label). */
.mailbox-dimension-row {
    display: inline-flex;
    align-items: center;
    gap: 0.7em;
    margin-top: 0.3em;
}

.mailbox-input-dimension {
    width: 240px;
    max-width: 60vw;
    min-width: 0;
    vertical-align: middle;
    accent-color: var(--mailbox-color-primary, #2271b1);
    cursor: pointer;
}

.mailbox-dimension-value {
    min-width: 3.5em;
    display: inline-block;
    font-weight: 600;
    color: #444;
}

textarea.mailbox-tinymce {
    width: 100%;
    min-height: 200px;
    padding: 0.6em;
    border: 1px solid #ccc;
    border-radius: 4px;
    font: inherit;
    box-sizing: border-box;
}

.mailbox-notice-warning {
    background: #fff4e5;
    border: 1px solid #f0b429;
    border-radius: 6px;
    padding: 0.8em 1.2em;
    margin: 1em 0;
    color: #6b4d00;
    font-size: 0.92em;
}

.mailbox-composer-actions {
    display: flex;
    gap: 1em;
    align-items: center;
    margin-top: 1.5em;
    padding-top: 1em;
    border-top: 1px solid #eee;
}

.mailbox-composer-note {
    color: #888;
    font-size: 0.85em;
}

/* ---------- pj widget ---------- */

.mailbox-pj-widget {
    border: 1px dashed #ccc;
    border-radius: 6px;
    padding: 1em;
    background: #fafafa;
}

.mailbox-pj-add {
    cursor: pointer;
    display: inline-block;
}

.mailbox-pj-input {
    display: none;
}

.mailbox-pj-liste {
    list-style: none;
    margin: 1em 0 0;
    padding: 0;
}

.mailbox-pj-liste li {
    display: flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.4em 0;
    border-bottom: 1px solid #eee;
}

.mailbox-pj-liste li:last-child {
    border-bottom: none;
}

.mailbox-pj-liste a {
    color: var(--mailbox-color-primary, #2271b1);
    text-decoration: none;
    flex: 1;
}

.mailbox-pj-liste a:hover {
    text-decoration: underline;
}

.mailbox-pj-remove {
    background: #fff;
    color: #b32d2e;
    border: 1px solid #b32d2e;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    line-height: 1;
    cursor: pointer;
    font-size: 16px;
    padding: 0;
}

.mailbox-pj-cumul {
    margin-top: 0.6em;
    font-size: 0.85em;
    color: #666;
}

.mailbox-pj-cumul-valeur {
    font-weight: 600;
}

.mailbox-pj-cumul-depasse {
    color: #b32d2e;
}

/* ---------- bandeau "images bloquees" dans l inbox (pattern Outlook) ---------- */

.mailbox-inbox-images-banner {
    margin: 0 0 1em;
    padding: 0.7em 1em;
    background: #fff8e1;
    border: 1px solid #f0c97c;
    border-radius: 4px;
}

.mailbox-inbox-images-banner p {
    margin: 0 0 0.4em;
}

.mailbox-inbox-images-banner p:last-child {
    margin-bottom: 0;
}

/* image bloquee dans le body : carre 22px avec icone "image bloquee" (style Outlook).
   Les attributs width/height de l'img source ont ete retires cote PHP pour que ces
   regles puissent contraindre la taille. !important pour battre d'eventuels styles
   inline survivants. */
/* email-queue genere un <h2>Historique des Emails</h2> dans la page historique,
   doublon avec notre <h1>Suivi des envois</h1>. Comme on ne modifie pas
   email-queue depuis ce projet, on le cache cote CSS. Le selector vise le premier
   h2 enfant direct de la section (les autres h2 eventuels du tableau ne sont pas
   en enfant direct). */
.mailbox-section-historique > h2:first-of-type {
    display: none;
}

.mailbox-inbox-img-bloquee {
    display: inline-block !important;
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    max-width: 22px !important;
    max-height: 22px !important;
    vertical-align: middle;
    border: 1px dashed #b0b0b0;
    border-radius: 3px;
    background: #f5f5f5 url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Cpath%20fill%3D'%23999'%20d%3D'M21%2019V5c0-1.1-.9-2-2-2H5c-1.1%200-2%20.9-2%202v14c0%201.1.9%202%202%202h14c1.1%200%202-.9%202-2zM8.5%2013.5l2.5%203.01L14.5%2012l4.5%206H5l3.5-4.5z'%2F%3E%3C/svg%3E") center/14px no-repeat;
    cursor: help;
}

/* ---------- destinataires (tabs + panier) ---------- */

.mailbox-destinataires {
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 1em;
    background: #fff;
}

.mailbox-panier {
    background: #f6f7f9;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 0.7em 1em;
    margin-bottom: 1em;
}

.mailbox-panier-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1em;
    margin-bottom: 0.5em;
}

.mailbox-panier-liste {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 120px;
    overflow-y: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4em;
}

.mailbox-panier-liste li {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    padding: 0.2em 0.5em 0.2em 0.7em;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 16px;
    font-size: 0.85em;
}

/* ligne champ destinataire libre + bouton Ajouter (mode envoi simple) :
   un peu d'espace entre l'input et le bouton. Meme regle pour les champs Cc / Cci. */
.mailbox-dest-libre-ajouter,
.mailbox-copie-ajouter {
    margin-left: 0.6em;
}

/* apercu des destinataires sous le champ libre (mode envoi simple) : memes chips
   que le panier, sans cadre/fond — c est juste un rappel visuel immediat.
   Idem pour les apercus Cc / Cci. */
.mailbox-dest-libre-apercu,
.mailbox-copie-apercu {
    list-style: none;
    margin: 0.4em 0 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4em;
}

.mailbox-dest-libre-apercu li,
.mailbox-copie-apercu li {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    padding: 0.2em 0.5em 0.2em 0.7em;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 16px;
    font-size: 0.85em;
}

.mailbox-panier-remove,
.mailbox-copie-remove {
    background: transparent;
    border: none;
    color: #999;
    cursor: pointer;
    padding: 0 0 0 0.2em;
    font-size: 18px;
    line-height: 1;
}

.mailbox-panier-remove:hover,
.mailbox-copie-remove:hover {
    color: #b32d2e;
}

.mailbox-btn-link {
    background: none;
    border: none;
    color: var(--mailbox-color-primary, #2271b1);
    cursor: pointer;
    font: inherit;
    padding: 0;
    text-decoration: underline;
    font-size: 0.85em;
}

/* mode standalone : footer "de remplacement" affiche sous l'accueil (le footer du theme
   n'est plus rendu en plein ecran). Discret, centre, separe par un filet. */
.mailbox-standalone-footer {
    margin-top: 2.5em;
    padding-top: 1.2em;
    border-top: 1px solid #e0e0e0;
    text-align: center;
    color: #777;
    font-size: 0.85em;
}
.mailbox-standalone-footer p {
    margin: 0.2em 0;
}
.mailbox-standalone-footer a {
    color: var(--mailbox-color-primary, #2271b1);
}

/* liste a puces du bloc "Version standalone" (page Accès) */
.mailbox-standalone-liste {
    margin: 0.4em 0 0.8em 1.2em;
    padding: 0;
    list-style: disc;
}
.mailbox-standalone-liste li {
    margin: 0.2em 0;
}

.mailbox-tabs {
    border: 1px solid #ddd;
    border-radius: 6px;
}

.mailbox-tabs-nav {
    display: flex;
    background: #f6f7f9;
    border-bottom: 1px solid #ddd;
    border-radius: 6px 6px 0 0;
    overflow: hidden;
}

.mailbox-tab {
    flex: 1;
    background: transparent;
    border: none;
    padding: 0.7em 1em;
    cursor: pointer;
    font: inherit;
    font-weight: 500;
    color: #555;
    border-right: 1px solid #ddd;
}

.mailbox-tab:last-child {
    border-right: none;
}

.mailbox-tab:hover {
    background: #ebeef2;
}

.mailbox-tab-actif {
    background: #fff;
    color: var(--mailbox-color-primary, #2271b1);
    border-bottom: 2px solid var(--mailbox-color-primary, #2271b1);
    margin-bottom: -1px;
}

.mailbox-tab-count {
    display: inline-block;
    margin-left: 0.3em;
    background: #ccc;
    color: #fff;
    border-radius: 10px;
    padding: 0 0.5em;
    font-size: 0.75em;
}

.mailbox-tab-actif .mailbox-tab-count {
    background: var(--mailbox-color-primary, #2271b1);
}

.mailbox-tab-content {
    display: none;
    padding: 1em;
    max-height: 360px;
    overflow-y: auto;
}

.mailbox-tab-content-actif {
    display: block;
}

.mailbox-tab-search {
    width: 100%;
    padding: 0.5em 0.7em;
    border: 1px solid #ccc;
    border-radius: 4px;
    font: inherit;
    margin-bottom: 0.7em;
    box-sizing: border-box;
}

.mailbox-tab-filtres {
    margin-bottom: 0.7em;
}

.mailbox-dest-liste {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mailbox-dest-liste li {
    padding: 0.3em 0;
    border-bottom: 1px solid #f0f0f0;
}

.mailbox-dest-liste li:last-child {
    border-bottom: none;
}

.mailbox-dest-checkbox {
    margin-right: 0.5em;
}

/* ---------- bulk selection tools (Tout cocher / par role) ---------- */

.mailbox-selecteur-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2em;
    align-items: center;
    padding: 0.4em 0;
    margin-bottom: 0.4em;
    font-size: 0.85em;
    border-bottom: 1px solid #eee;
}

.mailbox-tools-sep {
    color: #ccc;
    font-size: 0.85em;
    margin: 0 0.1em;
}

.mailbox-action-tous,
.mailbox-action-role {
    background: none;
    border: none;
    color: var(--mailbox-color-primary, #2271b1);
    cursor: pointer;
    font: inherit;
    padding: 0.15em 0.3em;
    text-decoration: none;
    font-size: 0.85em;
}

.mailbox-action-tous:hover,
.mailbox-action-role:hover {
    text-decoration: underline;
    background: color-mix(in srgb, var(--mailbox-color-primary, #2271b1) 8%, #fff);
    border-radius: 3px;
}

/* ---------- signature ---------- */

.mailbox-signature-defaut {
    margin: 1em 0;
    padding: 0.7em 1em;
    background: #fafafa;
    border-radius: 6px;
    border: 1px solid #eee;
}

.mailbox-signature-defaut summary {
    cursor: pointer;
    font-size: 0.9em;
    color: #555;
}

.mailbox-signature-defaut-preview {
    margin-top: 0.7em;
    padding: 0.7em;
    background: #fff;
    border: 1px dashed #ccc;
    border-radius: 4px;
}

/* ---------- progression envoi ---------- */

.mailbox-progression {
    display: none;
    background: #fff;
    border: 2px solid var(--mailbox-color-primary, #2271b1);
    border-radius: 8px;
    padding: 1em 1.5em;
    margin: 1em 0;
}

.mailbox-progression-active {
    display: block;
}

.mailbox-progression-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.6em;
}

.mailbox-progression-titre {
    color: var(--mailbox-color-primary, #2271b1);
    font-size: 1.05em;
}

.mailbox-progression-bar {
    width: 100%;
    height: 20px;
    border-radius: 10px;
    background: #f0f0f0;
    border: none;
}

.mailbox-progression-bar::-webkit-progress-bar {
    background-color: #f0f0f0;
    border-radius: 10px;
}

.mailbox-progression-bar::-webkit-progress-value {
    background-color: var(--mailbox-color-primary, #2271b1);
    border-radius: 10px;
    transition: width 0.3s ease;
}

.mailbox-progression-bar::-moz-progress-bar {
    background-color: var(--mailbox-color-primary, #2271b1);
    border-radius: 10px;
}

.mailbox-progression-text {
    margin: 0.5em 0 0;
    color: #555;
    font-size: 0.95em;
    text-align: center;
}

/* ---------- encart de reprise ---------- */

.mailbox-reprise-encart {
    background: #fff4e5;
    border: 1px solid #f0b429;
    border-radius: 6px;
    padding: 1em 1.4em;
    margin-bottom: 1em;
    color: #6b4d00;
}

.mailbox-reprise-actions {
    display: flex;
    gap: 0.6em;
    margin-top: 0.8em;
}

/* ---------- widget queue email-queue dans le composer ---------- */

.mailbox-email-queue-widget {
    background: #f6f7f9;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 0.7em 1em;
    margin-bottom: 1em;
    font-size: 0.9em;
}

.mailbox-email-queue-widget #email-queue-status p {
    margin: 0.2em 0;
}

.mailbox-email-queue-widget #email-queue-status progress {
    width: 200px;
    vertical-align: middle;
}

/* titre present dans le HTML mais retire de l'affichage (ecrans d'envoi) : la page garde
   un <h1> pour les lecteurs d'ecran et le sommaire du document, sans occuper de place.
   Technique standard (clip + 1px) : le texte reste lisible par les technologies
   d'assistance, contrairement a display:none ou visibility:hidden. */
.mailbox-titre-invisible {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* variante repliee du widget (ecrans d'envoi) : une seule ligne cliquable tant qu'on
   ne l'ouvre pas. Padding reduit par rapport a la version deployee de l'historique. */
.mailbox-quotas-details {
    padding: 0.35em 0.8em;
    margin-bottom: 0.8em;
}

.mailbox-quotas-details > summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--mailbox-color-primary, #2271b1);
    list-style: revert; /* garde le triangle natif, y compris la ou un reset l'enleve */
}

.mailbox-quotas-details > summary:hover {
    text-decoration: underline;
}

.mailbox-quotas-contenu {
    margin-top: 0.5em;
    padding-top: 0.5em;
    border-top: 1px solid #ddd;
}

.mailbox-dark .mailbox-quotas-contenu {
    border-top-color: #3a3e46;
}

/* ---------- preview signature dans composer ---------- */

.mailbox-signature-preview {
    background: #f6f7f9;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 0.6em 1em;
    margin: 0.5em 0 1em;
}

.mailbox-signature-preview summary {
    cursor: pointer;
    color: #555;
    font-size: 0.9em;
}

.mailbox-signature-preview-content {
    margin-top: 0.7em;
    padding: 0.7em;
    background: #fff;
    border: 1px dashed #ccc;
    border-radius: 4px;
    font-size: 0.92em;
}

/* ---------- page Signatures (CRUD) ---------- */
/* case a cocher "signature par defaut" dans le formulaire create/edit */
.mailbox-form-check {
    display: flex;
    align-items: center;
    gap: 0.5em;
    margin: 1em 0;
    font-weight: 500;
    cursor: pointer;
}
.mailbox-form-check input[type="checkbox"] {
    width: auto;
    margin: 0;
}
/* badge "par defaut" dans la liste des signatures */
.mailbox-badge-defaut {
    display: inline-block;
    padding: 0.15em 0.6em;
    border-radius: 12px;
    background: color-mix(in srgb, var(--mailbox-color-accent, #4caf50) 18%, #fff);
    color: color-mix(in srgb, var(--mailbox-color-accent, #4caf50) 60%, #000);
    font-size: 0.85em;
    font-weight: 600;
}

/* ---------- historique : filtres + statuts badge ---------- */

.mailbox-historique-filtres select,
.mailbox-historique-filtres input[type=date] {
    padding: 0.4em 0.7em;
    border: 1px solid #ccc;
    border-radius: 4px;
    font: inherit;
}

.mailbox-historique-date {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    font-size: 0.9em;
}

.mailbox-statut-badge {
    display: inline-block;
    padding: 0.15em 0.7em;
    border-radius: 12px;
    font-size: 0.82em;
    font-weight: 500;
    color: #fff;
    background: #888;
}

.mailbox-statut-pending { background: #f0b429; color: #6b4d00; }
.mailbox-statut-sent    { background: var(--mailbox-color-accent, #4caf50); }
.mailbox-statut-open    { background: #2196f3; }
.mailbox-statut-click   { background: #9c27b0; }
.mailbox-statut-failed  { background: #d32f2f; }

/* ====== Inbox IMAP ====== */
.mailbox-table-inbox td {
    vertical-align: top;
}
.mailbox-table-inbox a {
    color: inherit;
    text-decoration: none;
    display: block;
}
.mailbox-table-inbox a:hover {
    color: var(--mailbox-color-primary, #2271b1);
}
.mailbox-col-statut {
    width: 24px;
    text-align: center;
}
.mailbox-col-taille {
    width: 80px;
    text-align: right;
    white-space: nowrap;
    color: #888;
    font-size: 12px;
}
.mailbox-inbox-row-nonlue td {
    font-weight: 600;
    background: rgba(34, 113, 177, 0.03);
}
.mailbox-pastille-nonlue {
    display: inline-block;
    color: var(--mailbox-color-primary, #2271b1);
    font-size: 22px;
    line-height: 1;
}
.mailbox-inbox-headers {
    background: #f6f7f9;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    padding: 12px 16px;
    margin: 8px 0 16px;
}
.mailbox-inbox-headers p {
    margin: 4px 0;
    font-size: 13px;
}
.mailbox-inbox-body {
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    padding: 16px;
    background: #fff;
    max-width: 900px;
    overflow-x: auto;
}
.mailbox-inbox-body img {
    max-width: 100%;
    height: auto;
}
/* corps de l'email en IFRAME ISOLEE (cf visuel-inbox.php) : l'element n'est que le "cadre"
   blanc ; le contenu (email) vit dans son propre document, insensible a la CSS de l'app.
   La hauteur est posee par mailbox-composer.js (auto, pas de scroll interne). color-scheme:light
   empeche le navigateur d'appliquer un rendu sombre a l'iframe (form controls, fond par defaut)
   quand l'OS est en dark. Aucune regle .mailbox-dark ne cible cette classe -> le mail reste
   identique en clair et en sombre. */
.mailbox-inbox-iframe {
    display: block;
    width: 100%;
    max-width: 900px;
    min-height: 120px;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    background: #fff;
    color-scheme: light;
}
/* emails generes par Word/Outlook : le <style> d'origine (qu'on strippe au
   nettoyage) mettait p.MsoNormal a margin:0, les lignes vides venant uniquement
   des <p>&nbsp;</p>. Sans lui, la marge par defaut du theme s'ajoute a chaque
   paragraphe ET aux paragraphes vides -> double espacement. On reproduit le
   reset Word, cible sur les seules classes Mso pour ne pas toucher les autres
   emails. */
.mailbox-inbox-body p.MsoNormal,
.mailbox-inbox-body p.MsoPlainText,
.mailbox-inbox-body p.MsoListParagraph {
    margin: 0;
}
.mailbox-inbox-body-texte {
    white-space: pre-wrap;
    font-family: ui-monospace, "SF Mono", "Cascadia Code", "Consolas", monospace;
    font-size: 13px;
    margin: 0;
    background: transparent;
}
.mailbox-inbox-pj {
    margin-top: 16px;
    padding: 12px 16px;
    background: #fff8e6;
    border: 1px solid #f0d97b;
    border-radius: 4px;
}
.mailbox-inbox-pj h3 {
    margin-top: 0;
    font-size: 14px;
}
.mailbox-inbox-pj ul {
    margin: 8px 0 0;
    list-style: none;
    padding-left: 0;
}
.mailbox-inbox-pj li {
    margin: 4px 0;
}
.mailbox-pj-download {
    color: var(--mailbox-color-primary, #2271b1);
    text-decoration: none;
    font-weight: 500;
    padding: 2px 4px;
    border-radius: 3px;
}
.mailbox-pj-download:hover {
    text-decoration: underline;
    background: rgba(34, 113, 177, 0.06);
}

/* ---------- selecteur de compte dans Recus/Envoyes : volontairement mis en
   avant pour qu'on voie tout de suite quelle boite on consulte (n'apparait
   que si plusieurs comptes IMAP sont configures) ---------- */
.mailbox-inbox-compte-selecteur {
    display: flex;
    align-items: center;
    gap: 0.6em;
    margin: 0 0 16px;
    padding: 0.8em 1.1em;
    background: color-mix(in srgb, var(--mailbox-color-primary, #2271b1) 7%, #fff);
    border: 2px solid var(--mailbox-color-primary, #2271b1);
    border-radius: 8px;
}
.mailbox-inbox-compte-selecteur > label {
    display: flex;
    align-items: center;
    gap: 0.6em;
    flex-wrap: wrap;
    width: 100%;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--mailbox-color-primary, #2271b1);
}
.mailbox-inbox-compte-selecteur > label::before {
    content: "\1F4EC"; /* boite aux lettres */
    font-size: 1.25em;
    text-transform: none;
}
.mailbox-inbox-compte-select {
    flex: 1;
    min-width: 220px;
    padding: 0.6em 0.8em;
    border: 1px solid var(--mailbox-color-primary, #2271b1);
    border-radius: 6px;
    font: inherit;
    font-weight: 600;
    background: #fff;
    color: var(--mailbox-color-primary, #2271b1);
    cursor: pointer;
}
.mailbox-inbox-compte-select:focus {
    outline: 2px solid var(--mailbox-color-primary, #2271b1);
    outline-offset: 1px;
}

/* selecteur de dossiers IMAP (chips horizontales) */
.mailbox-inbox-folders {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0 20px;
}
.mailbox-folder-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid #d4d7dc;
    border-radius: 16px;
    background: #fff;
    color: #444;
    text-decoration: none;
    font-size: 13px;
    transition: all 0.15s;
}
.mailbox-folder-item:hover {
    border-color: var(--mailbox-color-primary, #2271b1);
    color: var(--mailbox-color-primary, #2271b1);
}
.mailbox-folder-actif {
    background: var(--mailbox-color-primary, #2271b1);
    border-color: var(--mailbox-color-primary, #2271b1);
    color: #fff;
}
.mailbox-folder-actif:hover {
    color: #fff;
    opacity: 0.9;
}
.mailbox-folder-nonlue:not(.mailbox-folder-actif) {
    border-color: var(--mailbox-color-primary, #2271b1);
    font-weight: 600;
}
.mailbox-folder-count {
    font-size: 11px;
    opacity: 0.8;
}
/* ---------- toolbar de la page Brouillons (compteur + vider) ---------- */
.mailbox-brouillons-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0 0 14px;
}

/* ---------- banniere "nouveaux messages" (auto-refresh) ---------- */
/* [hidden] doit l'emporter sur display:flex (sinon la banniere reste visible) */
.mailbox-inbox-newbanner[hidden] {
    display: none;
}
.mailbox-inbox-newbanner {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 14px;
    padding: 10px 16px;
    background: color-mix(in srgb, var(--mailbox-color-primary, #2271b1) 12%, #fff);
    border: 1px solid var(--mailbox-color-primary, #2271b1);
    border-radius: 6px;
    font-weight: 600;
}

/* ---------- snackbar "Annuler" (undo) ---------- */
.mailbox-undo-snackbar {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%) translateY(20px);
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 20px;
    background: #23282d;
    color: #fff;
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
    z-index: 100000;
    opacity: 0;
    transition: opacity 0.25s, transform 0.25s;
    font-size: 14px;
}
.mailbox-undo-snackbar.mailbox-undo-show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.mailbox-undo-btn {
    background: transparent;
    border: 1px solid #fff;
    color: #fff;
    border-radius: 4px;
    padding: 4px 12px;
    cursor: pointer;
    font-weight: 600;
}
.mailbox-undo-btn:hover {
    background: #fff;
    color: #23282d;
}

/* ---------- badge "contact" + bouton mini (vue detail) ---------- */
.mailbox-badge-contact {
    display: inline-block;
    margin-left: 8px;
    padding: 0.1em 0.55em;
    border-radius: 12px;
    font-size: 0.8em;
    font-weight: 600;
    vertical-align: middle;
}
.mailbox-badge-contact-ok {
    background: color-mix(in srgb, var(--mailbox-color-accent, #4caf50) 18%, #fff);
    color: color-mix(in srgb, var(--mailbox-color-accent, #4caf50) 60%, #000);
}
/* "mini" : variante COMPACTE d'un bouton, conçue pour se composer avec
   .mailbox-btn-secondary / .mailbox-btn-danger (ne fournit QUE la taille, pas le look).
   Selecteurs composes pour l'emporter sur le padding/taille des variants (sinon
   .mailbox-btn-danger, defini plus bas, regagnerait son padding -> hauteurs inegales). */
.mailbox-btn-mini,
.mailbox-btn-secondary.mailbox-btn-mini,
.mailbox-btn-danger.mailbox-btn-mini {
    padding: 4px 10px;
    font-size: 0.82em;
    line-height: 1.3;
    border-radius: 4px;
    vertical-align: middle;
    white-space: nowrap; /* le libelle ne se coupe pas en 2 lignes dans une colonne etroite */
}
.mailbox-btn-mini:disabled {
    opacity: 0.5;
    cursor: default;
}

/* conteneur des boutons d'action dans une cellule de tableau : flex avec retour a la
   ligne propre. On NE met PAS le <td> lui-meme en flex (ca le sortirait du modele de
   colonnes du tableau -> largeur de colonne cassee + debordement). On enveloppe donc
   les boutons dans ce div interne. */
.mailbox-cell-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

/* lien "Aperçu" d'une piece jointe */
.mailbox-pj-apercu {
    margin-left: 8px;
    font-size: 0.85em;
}

/* sentinelle infinite scroll */
.mailbox-inbox-scroll-sentinel {
    padding: 14px;
    text-align: center;
}

/* ---------- deplacer vers un dossier (barre de selection + vue detail) ---------- */
.mailbox-inbox-deplacer-groupe {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.mailbox-inbox-deplacer-groupe .mailbox-inbox-deplacer-select {
    max-width: 200px;
}

/* ---------- page "Dossiers" (gestion des dossiers IMAP) ---------- */
/* form de creation : champ + bouton sur une ligne */
.mailbox-dossiers-creer-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 12px 0 20px;
}
.mailbox-dossiers-input {
    padding: 7px 10px;
    border: 1px solid #d4d7dc;
    border-radius: 6px;
    font-size: 14px;
    min-width: 220px;
}
.mailbox-dossiers-input:focus {
    outline: 2px solid var(--mailbox-color-primary, #2271b1);
    outline-offset: 1px;
    border-color: var(--mailbox-color-primary, #2271b1);
}
.mailbox-dossiers-input-inline {
    min-width: 150px;
}
/* nom technique du dossier (INBOX.xxx) sous le label FR */
.mailbox-dossier-brut {
    font-size: 11px;
    font-family: monospace;
    opacity: 0.7;
}
/* badges Systeme / Personnalise */
.mailbox-badge-dossier {
    display: inline-block;
    padding: 0.15em 0.6em;
    border-radius: 12px;
    font-size: 0.8em;
    font-weight: 600;
    white-space: nowrap;
}
.mailbox-badge-systeme {
    background: #eceff1;
    color: #607d8b;
}
.mailbox-badge-perso {
    background: color-mix(in srgb, var(--mailbox-color-primary, #2271b1) 15%, #fff);
    color: color-mix(in srgb, var(--mailbox-color-primary, #2271b1) 65%, #000);
}
/* colonne actions du tableau : forms renommer + supprimer alignes via le wrapper
   .mailbox-cell-actions (le <td> reste une cellule de tableau normale). */
.mailbox-dossier-renommer-form,
.mailbox-dossier-supprimer-form {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}

/* zone de retour du bouton "Tester la connexion IMAP" */
.mailbox-imap-test-result {
    margin-top: 12px;
    padding: 12px 16px;
    border-radius: 4px;
    background: #f6f7f9;
    border: 1px solid #e5e7eb;
}
.mailbox-imap-test-summary {
    margin: 0 0 8px;
    font-weight: 500;
}
.mailbox-imap-test-summary.ok {
    color: #1b5e20;
}
.mailbox-imap-test-summary.ko {
    color: #b71c1c;
}
.mailbox-imap-test-folders {
    margin: 0 0 8px;
    padding-left: 20px;
    font-size: 13px;
    font-family: ui-monospace, "SF Mono", "Cascadia Code", "Consolas", monospace;
}
.mailbox-imap-test-folders li {
    margin: 2px 0;
}

/* ====== Inbox V2.A : bulkbar, checkboxes, toggle lu, supprimer ====== */
.mailbox-inbox-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin: 8px 0 12px;
}
.mailbox-btn-refresh-inbox {
    font-size: 13px;
    padding: 4px 10px;
}
.mailbox-inbox-bulkbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    margin-bottom: 8px;
    background: var(--mailbox-color-menu-bg, #f6f7f9);
    border: 1px solid #d4d7dc;
    border-radius: 4px;
    position: sticky;
    top: 32px; /* sous l'admin bar WP */
    z-index: 10;
}
.mailbox-inbox-bulkbar[hidden] {
    display: none; /* override le display:flex quand l'attribut HTML hidden est present */
}
.mailbox-bulkbar-count {
    font-size: 13px;
    margin-right: 8px;
}
.mailbox-col-check {
    width: 32px;
    text-align: center;
}
.mailbox-col-check input[type="checkbox"] {
    cursor: pointer;
}
.mailbox-col-actions {
    width: 40px;
    text-align: center;
}
.mailbox-inbox-toggle-lu {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 3px;
    line-height: 1;
}
.mailbox-inbox-toggle-lu:hover {
    background: rgba(0, 0, 0, 0.05);
}
.mailbox-pastille-lue {
    display: inline-block;
    color: #ccc;
    font-size: 16px;
    line-height: 1;
}
.mailbox-btn-icon {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 3px;
    font-size: 16px;
    line-height: 1;
    color: #888;
}
.mailbox-btn-icon:hover {
    background: #fee;
    color: #c33;
}
.mailbox-btn-danger {
    background: #c33;
    color: #fff;
    border: 1px solid #a22;
    padding: 6px 12px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 13px;
}
.mailbox-btn-danger:hover:not(:disabled) {
    background: #a22;
}
.mailbox-btn-danger:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ====== Inbox V2.C : form recherche + filtres ====== */
.mailbox-inbox-search-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 12px 0;
    padding: 12px 16px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
}
.mailbox-input-search {
    flex: 1 1 240px;
    min-width: 200px;
    padding: 6px 10px;
    border: 1px solid #c4c7cc;
    border-radius: 3px;
    font-size: 14px;
}
.mailbox-inbox-filter-checkbox,
.mailbox-inbox-filter-date {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #444;
    white-space: nowrap;
}
.mailbox-inbox-filter-date input[type="date"] {
    padding: 5px 8px;
    border: 1px solid #c4c7cc;
    border-radius: 3px;
    font-size: 13px;
}
.mailbox-inbox-search-form .mailbox-btn-primary,
.mailbox-inbox-search-form .mailbox-btn-secondary {
    flex-shrink: 0;
}

/* ====== V2.D : Repondre / Transferer ====== */
.mailbox-inbox-actions-mail {
    display: flex;
    gap: 8px;
    margin: 12px 0 16px;
}
.mailbox-encart-reply {
    margin: 12px 0;
    padding: 10px 14px;
    background: rgba(34, 113, 177, 0.06);
    border-left: 3px solid var(--mailbox-color-primary, #2271b1);
    border-radius: 3px;
    font-size: 14px;
}

/* ====== V3.A : Favori (etoile) ====== */
.mailbox-col-favori {
    width: 28px;
    text-align: center;
}
.mailbox-inbox-toggle-favori {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 3px;
    line-height: 1;
    font-size: 18px;
}
.mailbox-inbox-toggle-favori:hover {
    background: rgba(0, 0, 0, 0.05);
}
.mailbox-etoile-pleine {
    color: #f0b429;
}
.mailbox-etoile-vide {
    color: #ccc;
}
.mailbox-inbox-toggle-favori:hover .mailbox-etoile-vide {
    color: #f0b429;
}

/* ---------- modale (choix d'un modele depuis TinyMCE) ---------- */

.mailbox-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 100000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 5vh 1rem;
    overflow-y: auto;
}

.mailbox-modal {
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
    width: 100%;
    max-width: 640px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
}

.mailbox-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.8em 1.2em;
    border-bottom: 1px solid #e2e4e7;
}

.mailbox-modal-head h2 {
    margin: 0;
    font-size: 1.1em;
}

.mailbox-modal-close {
    background: none;
    border: none;
    font-size: 1.6em;
    line-height: 1;
    cursor: pointer;
    color: #666;
    padding: 0 0.2em;
}

.mailbox-modal-close:hover {
    color: #000;
}

.mailbox-modal-body {
    padding: 1em 1.2em;
    overflow-y: auto;
}

/* pied de modale (boutons d'action), ex. confirmation "ajouté à la file d'envoi" */
.mailbox-modal-foot {
    padding: 0.8em 1.2em;
    border-top: 1px solid #e2e4e7;
    display: flex;
    justify-content: flex-end;
}

.mailbox-modal-confirm-msg {
    font-size: 1.05em;
    margin: 0 0 0.6em;
}

.mailbox-modal-confirm-ko {
    color: #b32d2e;
    margin: 0 0 0.6em;
}

.mailbox-modeles-choix {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}

.mailbox-modele-choix-item {
    display: block;
    width: 100%;
    text-align: left;
    background: #f6f7f9;
    border: 1px solid #e2e4e7;
    border-radius: 5px;
    padding: 0.7em 0.9em;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.mailbox-modele-choix-item:hover {
    background: #fff;
    border-color: var(--mailbox-color-primary, #2271b1);
}

.mailbox-modele-choix-item:disabled {
    opacity: 0.6;
    cursor: progress;
}

.mailbox-modele-choix-nom {
    display: block;
    font-weight: bold;
}

.mailbox-modele-choix-extrait {
    display: block;
    color: #555;
    font-size: 0.9em;
    margin-top: 0.2em;
}

.mailbox-modele-choix-images {
    display: inline-block;
    margin-top: 0.35em;
    font-size: 0.8em;
    color: var(--mailbox-color-primary, #2271b1);
}

/* ============ MODE DARK (standalone) — calque additif, scope .mailbox-dark ============ */
/* Aucune regle claire existante n'est modifiee. Chaque selecteur est prefixe par
   `.mailbox-dark ` (une classe de plus) pour surpasser la specificite des regles claires.
   Palette : fond app #17181c, surfaces #22242a, panneaux secondaires #2b2e35,
   bordures #3a3e46, texte #e6e8ec, texte attenue #9aa0aa. */

.mailbox-dark { background: #17181c; color: #e6e8ec; }
.mailbox-dark .mailbox-wrapper { background: #17181c; color: #e6e8ec; }

/* NB : on ne force AUCUNE couleur sur h1/h2/h3 (ils heritent deja de #e6e8ec via le wrapper).
   Une regle generique `.mailbox-wrapper h1` teindrait aussi les titres a l'INTERIEUR d'un
   email ouvert (les emails utilisent h1/h2/h3) -> le contenu du mail serait altere. Le contenu
   email doit rester strictement intact : voir la zone .mailbox-inbox-body plus bas. */

/* --- Sidebar / menu --- */
.mailbox-dark .mailbox-sidebar {
    background: #2b2e35;
}
.mailbox-dark .mailbox-nav-item {
    color: #cdd2d9;
}
.mailbox-dark .mailbox-nav-item:hover {
    background: #34383f;
}
.mailbox-dark .mailbox-nav-item-actif {
    background: #22242a;
    border-left-color: var(--mailbox-color-primary, #2271b1);
    color: #4a9eea;
}
.mailbox-dark .mailbox-nav-badge {
    color: #fff;
    background: var(--mailbox-color-primary, #2271b1);
}

/* --- Sections & cartes --- */
.mailbox-dark .mailbox-section,
.mailbox-dark .mailbox-config-form {
    background: #22242a;
    border-color: #3a3e46;
    color: #e6e8ec;
}
.mailbox-dark .mailbox-config-section {
    border-top-color: #3a3e46;
}
.mailbox-dark .mailbox-config-section h2 {
    color: #4a9eea;
}
.mailbox-dark .mailbox-config-section label {
    color: #e6e8ec;
}

/* --- Acces refuse (warning teinte) --- */
.mailbox-dark .mailbox-acces-refuse {
    background: #3a2f1a;
    border-color: #7a5a1a;
    color: #f0d9a8;
}

/* --- Inputs / selects / textarea --- */
.mailbox-dark .mailbox-config-section input[type=text],
.mailbox-dark .mailbox-config-section input[type=password],
.mailbox-dark .mailbox-config-section input[type=number],
.mailbox-dark .mailbox-config-section select,
.mailbox-dark .mailbox-textarea-large,
.mailbox-dark .mailbox-form input[type=text],
.mailbox-dark .mailbox-form input[type=email],
.mailbox-dark .mailbox-form input[type=password],
.mailbox-dark .mailbox-form input[type=number],
.mailbox-dark .mailbox-form input[type=search],
.mailbox-dark .mailbox-form select,
.mailbox-dark .mailbox-form textarea,
.mailbox-dark .mailbox-input-sujet,
.mailbox-dark textarea.mailbox-tinymce,
.mailbox-dark .mailbox-inline-filter input[type=search],
.mailbox-dark .mailbox-filtres input[type=search],
.mailbox-dark .mailbox-tab-search,
.mailbox-dark .mailbox-input-search,
.mailbox-dark .mailbox-historique-filtres select,
.mailbox-dark .mailbox-historique-filtres input[type=date],
.mailbox-dark .mailbox-inbox-filter-date input[type="date"],
.mailbox-dark .mailbox-dossiers-input {
    background: #22242a;
    color: #e6e8ec;
    border-color: #3a3e46;
}
.mailbox-dark .mailbox-input-color {
    background: #22242a;
    border-color: #3a3e46;
}
.mailbox-dark input::placeholder,
.mailbox-dark textarea::placeholder { color: #9aa0aa; }
.mailbox-dark .mailbox-config-section input[type=text]:focus,
.mailbox-dark .mailbox-config-section input[type=password]:focus,
.mailbox-dark .mailbox-config-section input[type=number]:focus,
.mailbox-dark .mailbox-config-section select:focus,
.mailbox-dark .mailbox-textarea-large:focus,
.mailbox-dark .mailbox-form input:focus,
.mailbox-dark .mailbox-form select:focus,
.mailbox-dark .mailbox-form textarea:focus,
.mailbox-dark .mailbox-input-sujet:focus,
.mailbox-dark textarea.mailbox-tinymce:focus,
.mailbox-dark .mailbox-tab-search:focus,
.mailbox-dark .mailbox-input-search:focus {
    border-color: var(--mailbox-color-primary, #2271b1);
    outline-color: var(--mailbox-color-primary, #2271b1);
}

/* --- Notes / meta / textes attenues --- */
.mailbox-dark .mailbox-note,
.mailbox-dark .mailbox-meta,
.mailbox-dark .mailbox-meta-inline,
.mailbox-dark .mailbox-empty,
.mailbox-dark .mailbox-empty-small,
.mailbox-dark .mailbox-pagination-current,
.mailbox-dark .mailbox-composer-note,
.mailbox-dark .mailbox-pj-cumul,
.mailbox-dark .mailbox-progression-text,
.mailbox-dark .mailbox-check-inline,
.mailbox-dark .mailbox-signature-defaut summary,
.mailbox-dark .mailbox-signature-preview summary,
.mailbox-dark .mailbox-quotas-details > summary,
.mailbox-dark .mailbox-inbox-filter-checkbox,
.mailbox-dark .mailbox-inbox-filter-date {
    color: #9aa0aa;
}

/* --- Tableaux --- */
.mailbox-dark .mailbox-table th,
.mailbox-dark .mailbox-table td {
    border-bottom-color: #3a3e46;
}
.mailbox-dark .mailbox-table thead th {
    background: #2b2e35;
    border-bottom-color: #3a3e46;
    color: #e6e8ec;
}
.mailbox-dark .mailbox-table tbody tr:hover {
    background: #2f333b;
}
.mailbox-dark .mailbox-table-permissions th,
.mailbox-dark .mailbox-table-permissions td {
    border-color: #3a3e46;
}
.mailbox-dark .mailbox-table-permissions thead th {
    background: #2b2e35;
}
.mailbox-dark .mailbox-empty {
    background: #2b2e35;
}

/* --- Liens d'action --- */
.mailbox-dark .mailbox-row-actions a,
.mailbox-dark .mailbox-btn-link,
.mailbox-dark .mailbox-action-tous,
.mailbox-dark .mailbox-action-role,
.mailbox-dark .mailbox-pj-liste a,
.mailbox-dark .mailbox-pj-download,
.mailbox-dark .mailbox-standalone-footer a,
.mailbox-dark .mailbox-modele-choix-images {
    color: #4a9eea;
}
.mailbox-dark .mailbox-link-danger { color: #f0827f !important; } /* bat le !important de la regle claire */

/* --- Boutons --- */
.mailbox-dark .mailbox-btn-primary { color: #fff; } /* garde la couleur de marque */
.mailbox-dark .mailbox-btn-secondary {
    background: #22242a;
    color: #4a9eea;
    border-color: var(--mailbox-color-primary, #2271b1);
}
.mailbox-dark .mailbox-btn-secondary:hover {
    background: #2b3340;
}

/* --- Selecteur de membres --- */
.mailbox-dark .mailbox-selecteur-membres {
    border-color: #3a3e46;
}
.mailbox-dark .mailbox-selecteur-membres legend {
    color: #4a9eea;
}
.mailbox-dark .mailbox-selecteur-block {
    background: #2b2e35;
}
.mailbox-dark .mailbox-check:hover {
    background: #34383f;
}
.mailbox-dark .mailbox-selecteur-tools {
    border-bottom-color: #3a3e46;
}
.mailbox-dark .mailbox-tools-sep {
    color: #5a5f68;
}

/* --- Filtres --- */
.mailbox-dark .mailbox-filtres {
    background: #2b2e35;
}

/* --- Composer --- */
.mailbox-dark .mailbox-form-label {
    color: #4a9eea;
}
.mailbox-dark .mailbox-dimension-value {
    color: #e6e8ec;
}
.mailbox-dark .mailbox-composer-actions {
    border-top-color: #3a3e46;
}
.mailbox-dark .mailbox-notice-warning {
    background: #3a2f1a;
    border-color: #7a5a1a;
    color: #f0d9a8;
}

/* --- Piece jointe widget --- */
.mailbox-dark .mailbox-pj-widget {
    background: #2b2e35;
    border-color: #3a3e46;
}
.mailbox-dark .mailbox-pj-liste li {
    border-bottom-color: #3a3e46;
}
.mailbox-dark .mailbox-pj-remove {
    background: #22242a;
    color: #f0827f;
    border-color: #a83a3a;
}
.mailbox-dark .mailbox-pj-cumul-depasse { color: #f0827f; }

/* --- Bandeau images bloquees (inbox) : notice de l'app (au-dessus du mail) --- */
.mailbox-dark .mailbox-inbox-images-banner {
    background: #3a2f1a;
    border-color: #7a5a1a;
    color: #f0d9a8;
}
/* NB : PAS de regle sur .mailbox-inbox-img-bloquee : ces placeholders d'images bloquees sont
   DANS le corps de l'email (fond blanc) et doivent rester identiques au mode clair (gris).
   Toute regle dark ici alterait le rendu du mail. */

/* --- Destinataires : tabs + panier + chips --- */
.mailbox-dark .mailbox-destinataires {
    border-color: #3a3e46;
    background: #22242a;
}
.mailbox-dark .mailbox-panier {
    background: #2b2e35;
    border-color: #3a3e46;
}
.mailbox-dark .mailbox-panier-liste li,
.mailbox-dark .mailbox-dest-libre-apercu li,
.mailbox-dark .mailbox-copie-apercu li {
    background: #22242a;
    border-color: #3a3e46;
    color: #e6e8ec;
}
.mailbox-dark .mailbox-panier-remove,
.mailbox-dark .mailbox-copie-remove {
    color: #9aa0aa;
}
.mailbox-dark .mailbox-panier-remove:hover,
.mailbox-dark .mailbox-copie-remove:hover {
    color: #f0827f;
}

/* --- Footer standalone --- */
.mailbox-dark .mailbox-standalone-footer {
    border-top-color: #3a3e46;
    color: #9aa0aa;
}

/* --- Onglets --- */
.mailbox-dark .mailbox-tabs {
    border-color: #3a3e46;
}
.mailbox-dark .mailbox-tabs-nav {
    background: #2b2e35;
    border-bottom-color: #3a3e46;
}
.mailbox-dark .mailbox-tab {
    color: #9aa0aa;
    border-right-color: #3a3e46;
}
.mailbox-dark .mailbox-tab:hover {
    background: #34383f;
}
.mailbox-dark .mailbox-tab-actif {
    background: #22242a;
    color: #4a9eea;
    border-bottom-color: var(--mailbox-color-primary, #2271b1);
}
.mailbox-dark .mailbox-tab-count {
    background: #4a4f58;
    color: #fff;
}
.mailbox-dark .mailbox-dest-liste li {
    border-bottom-color: #3a3e46;
}

/* --- Signature --- */
.mailbox-dark .mailbox-signature-defaut {
    background: #2b2e35;
    border-color: #3a3e46;
}
.mailbox-dark .mailbox-signature-preview {
    background: #2b2e35;
    border-color: #3a3e46;
}
/* apercu de signature = rendu d'un contenu qui partira dans l'email : fond blanc + texte
   sombre, comme en clair, pour un apercu fidele (on n'altere pas le rendu email). */
.mailbox-dark .mailbox-signature-defaut-preview,
.mailbox-dark .mailbox-signature-preview-content {
    background: #fff;
    border-color: #e5e7eb;
    color: #222;
}

/* --- Progression envoi (barre) --- */
.mailbox-dark .mailbox-progression {
    background: #22242a;
    border-color: var(--mailbox-color-primary, #2271b1);
}
.mailbox-dark .mailbox-progression-titre {
    color: #4a9eea;
}
.mailbox-dark .mailbox-progression-bar {
    background: #2b2e35;
}
.mailbox-dark .mailbox-progression-bar::-webkit-progress-bar {
    background-color: #2b2e35;
}

/* --- Encart de reprise (warning teinte) --- */
.mailbox-dark .mailbox-reprise-encart {
    background: #3a2f1a;
    border-color: #7a5a1a;
    color: #f0d9a8;
}

/* --- Widget queue email-queue + preview --- */
.mailbox-dark .mailbox-email-queue-widget {
    background: #2b2e35;
    border-color: #3a3e46;
}

/* --- Badge "par defaut" (succes teinte) --- */
.mailbox-dark .mailbox-badge-defaut,
.mailbox-dark .mailbox-badge-contact-ok {
    background: #1e3325;
    color: #7bd39a;
}

/* --- Historique : statuts badge (fonds semantiques adaptes) --- */
.mailbox-dark .mailbox-statut-badge {
    color: #fff;
    background: #4a4f58;
}
.mailbox-dark .mailbox-statut-pending { background: #4a3a12; color: #f0d9a8; }
.mailbox-dark .mailbox-statut-failed  { background: #3a1f1f; color: #f0a8a8; }

/* ====== Inbox IMAP ====== */
.mailbox-dark .mailbox-table-inbox a:hover {
    color: #4a9eea;
}
.mailbox-dark .mailbox-col-taille {
    color: #9aa0aa;
}
.mailbox-dark .mailbox-inbox-row-nonlue td {
    background: rgba(74, 158, 234, 0.08);
}
/* L'EMAIL OUVERT n'est JAMAIS re-colorise par le mode sombre : on restaure exactement le
   rendu clair (fond blanc, texte sombre, memes bordures) pour ne rien alterer du message ni
   de ses styles propres. Le contenu HTML du mail s'affiche comme en clair, sur fond blanc. */
.mailbox-dark .mailbox-inbox-headers {
    background: #f6f7f9;
    border-color: #e5e7eb;
    color: #222;
}
.mailbox-dark .mailbox-inbox-headers strong,
.mailbox-dark .mailbox-inbox-headers p {
    color: #222;
}
/* Le corps de l'email : fond blanc + couleur de texte EXACTEMENT celle du mode clair (#222,
   heritee en clair). Ainsi le texte sans couleur propre s'affiche a l'identique, et les
   elements ayant leur couleur propre (email) ne sont jamais surcharges (aucune regle
   generique du theme sombre ne cible l'interieur de cette zone). */
.mailbox-dark .mailbox-inbox-body {
    background: #fff;
    border-color: #e5e7eb;
    color: #222;
}
/* PAS de regle dark sur .mailbox-inbox-pj : le bloc "Pieces jointes" fait partie de la ZONE
   DE LECTURE (document clair) et doit rester identique au mode clair. En prime, certains
   emails au HTML malforme "aspirent" ce bloc a l'interieur du corps : le garder clair evite
   toute fuite du theme dans le rendu du mail. */

/* --- Selecteur de compte (recus/envoyes) --- */
.mailbox-dark .mailbox-inbox-compte-selecteur {
    background: #22303c;
    border-color: var(--mailbox-color-primary, #2271b1);
}
.mailbox-dark .mailbox-inbox-compte-selecteur > label {
    color: #4a9eea;
}
.mailbox-dark .mailbox-inbox-compte-select {
    background: #22242a;
    color: #4a9eea;
    border-color: var(--mailbox-color-primary, #2271b1);
}

/* --- Chips dossiers IMAP --- */
.mailbox-dark .mailbox-folder-item {
    background: #22242a;
    border-color: #3a3e46;
    color: #cdd2d9;
}
.mailbox-dark .mailbox-folder-item:hover {
    border-color: var(--mailbox-color-primary, #2271b1);
    color: #4a9eea;
}
.mailbox-dark .mailbox-folder-actif {
    background: var(--mailbox-color-primary, #2271b1);
    border-color: var(--mailbox-color-primary, #2271b1);
    color: #fff;
}

/* --- Banniere "nouveaux messages" --- */
.mailbox-dark .mailbox-inbox-newbanner {
    background: #22303c;
    border-color: var(--mailbox-color-primary, #2271b1);
    color: #e6e8ec;
}

/* --- Snackbar undo (deja sombre, on renforce) --- */
.mailbox-dark .mailbox-undo-snackbar {
    background: #0f1013;
    color: #e6e8ec;
    box-shadow: 0 4px 16px rgba(0,0,0,0.6);
}
.mailbox-dark .mailbox-undo-btn {
    border-color: #e6e8ec;
    color: #e6e8ec;
}
.mailbox-dark .mailbox-undo-btn:hover {
    background: #e6e8ec;
    color: #0f1013;
}

/* --- Badges dossier (systeme / perso) --- */
.mailbox-dark .mailbox-badge-systeme {
    background: #2b2e35;
    color: #9aa0aa;
}

/* --- Boutons icone / danger (inbox) --- */
.mailbox-dark .mailbox-btn-icon {
    color: #9aa0aa;
}
.mailbox-dark .mailbox-btn-icon:hover {
    background: #3a1f1f;
    color: #f0827f;
}
.mailbox-dark .mailbox-inbox-toggle-lu:hover,
.mailbox-dark .mailbox-inbox-toggle-favori:hover {
    background: rgba(255, 255, 255, 0.06);
}
.mailbox-dark .mailbox-pastille-lue,
.mailbox-dark .mailbox-etoile-vide {
    color: #5a5f68;
}

/* --- Bulkbar --- */
.mailbox-dark .mailbox-inbox-bulkbar {
    background: #2b2e35;
    border-color: #3a3e46;
}

/* --- Form recherche inbox --- */
.mailbox-dark .mailbox-inbox-search-form {
    background: #22242a;
    border-color: #3a3e46;
}

/* --- Encart reply --- */
.mailbox-dark .mailbox-encart-reply {
    background: rgba(74, 158, 234, 0.10);
    border-left-color: var(--mailbox-color-primary, #2271b1);
    color: #e6e8ec;
}

/* --- Zone test IMAP --- */
.mailbox-dark .mailbox-imap-test-result {
    background: #2b2e35;
    border-color: #3a3e46;
}
.mailbox-dark .mailbox-imap-test-summary.ok { color: #7bd39a; }
.mailbox-dark .mailbox-imap-test-summary.ko { color: #f0a8a8; }

/* --- Modale --- */
.mailbox-dark .mailbox-modal-overlay {
    background: rgba(0, 0, 0, 0.65);
}
.mailbox-dark .mailbox-modal {
    background: #22242a;
    color: #e6e8ec;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
}
.mailbox-dark .mailbox-modal-head {
    border-bottom-color: #3a3e46;
}
.mailbox-dark .mailbox-modal-close {
    color: #9aa0aa;
}
.mailbox-dark .mailbox-modal-close:hover {
    color: #e6e8ec;
}
.mailbox-dark .mailbox-modal-foot {
    border-top-color: #3a3e46;
}
.mailbox-dark .mailbox-modal-confirm-ko { color: #f0827f; }
.mailbox-dark .mailbox-modele-choix-item {
    background: #2b2e35;
    border-color: #3a3e46;
    color: #e6e8ec;
}
.mailbox-dark .mailbox-modele-choix-item:hover {
    background: #34383f;
    border-color: var(--mailbox-color-primary, #2271b1);
}
.mailbox-dark .mailbox-modele-choix-extrait {
    color: #9aa0aa;
}

/* --- Scrollbars sombres (WebKit + Firefox) sur les zones scrollables --- */
.mailbox-dark .mailbox-selecteur-block,
.mailbox-dark .mailbox-panier-liste,
.mailbox-dark .mailbox-tab-content,
.mailbox-dark .mailbox-inbox-body,
.mailbox-dark .mailbox-modal,
.mailbox-dark .mailbox-modal-body {
    scrollbar-color: #4a4f58 #22242a;
}
.mailbox-dark ::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}
.mailbox-dark ::-webkit-scrollbar-track {
    background: #22242a;
}
.mailbox-dark ::-webkit-scrollbar-thumb {
    background: #4a4f58;
    border-radius: 6px;
    border: 3px solid #22242a;
}
.mailbox-dark ::-webkit-scrollbar-thumb:hover {
    background: #5a5f68;
}