/*
 * Socle visuel SymbioMail.
 *
 * Les composants ne doivent pas y ajouter de mise en page specifique : ce
 * fichier porte exclusivement les decisions communes de design. Les valeurs
 * sont consumees par les vues Blade et les composants Vue via var(--sm-*).
 */

/* .sm-day : pendant de .sm-night, un bloc reste en jetons clairs quel que soit le thème
 * (contenu posé dans une fenêtre qui reste claire en mode sombre, comme AppModal). */
:root,
.sm-day {
    color-scheme: light;

    /* Surfaces et contenu */
    --sm-canvas: #f5f7fb;
    --sm-surface: #ffffff;
    --sm-surface-raised: #ffffff;
    --sm-surface-muted: #eef3f8;
    --sm-surface-hover: #f8fafc;
    --sm-surface-selected: #e8f0fb;
    --sm-surface-inverse: #06142e;
    --sm-text: #17334a;
    --sm-text-strong: #0f172a;
    --sm-text-muted: #64748b;
    --sm-text-subtle: #8a9aae;
    --sm-text-secondary: #475569;
    --sm-text-secondary-strong: #334155;
    --sm-text-disabled: #94a3b8;
    --sm-text-on-primary: #ffffff;
    /* Texte pose sur un fond plein danger / succes / alerte : blanc en clair,
     * bleu nuit en sombre ou ces trois couleurs s'eclaircissent. */
    --sm-text-on-danger: #ffffff;
    --sm-text-on-success: #ffffff;
    --sm-text-on-warning: #ffffff;
    --sm-text-inverse: #ffffff;
    --sm-border: #dce5ef;
    --sm-border-strong: #b8c8d9;
    --sm-border-subtle: #edf1f6;
    --sm-border-soft: #dbe3ef;
    --sm-border-light: #e2e8f0;
    --sm-border-primary: #bfdbfe;
    --sm-border-success: #bbf7d0;
    --sm-border-warning: #fed7aa;
    --sm-border-danger: #fecaca;
    --sm-border-tick: #cbd5e1;
    --sm-table-header: #f8fafc;
    --sm-surface-soft: #f8fbff;
    --sm-leads-shadow-card: 0 1px 2px color-mix(in srgb, var(--sm-surface-inverse) 4%, transparent), 0 10px 30px -12px color-mix(in srgb, var(--sm-primary-fixed) 14%, transparent);
    --sm-leads-shadow-pop: 0 18px 40px -12px color-mix(in srgb, var(--sm-primary-fixed) 28%, transparent), 0 2px 6px color-mix(in srgb, var(--sm-surface-inverse) 6%, transparent);

    /* Identite et actions */
    --sm-primary: #1f438f;
    --sm-primary-hover: #244a9a;
    --sm-primary-soft: #e9ecf4;
    --sm-primary-tint: rgba(31, 67, 143, 0.08);
    --sm-primary-tint-strong: rgba(31, 67, 143, 0.12);
    /* Bleu profond identique en clair et en sombre : boutons pleins a texte
     * blanc, et composants qui restent clairs en mode sombre. --sm-primary y
     * passerait en bleu clair, illisible sous du blanc ou sur fond blanc.
     * Jamais redefini dans les blocs sombres. */
    --sm-primary-fixed: #1f438f;
    --sm-primary-fixed-hover: #244a9a;
    --sm-accent: #f2c230;
    --sm-accent-hover: #e6b321;
    --sm-accent-soft: #fff5d9;

    /* Etats metier */
    --sm-success: #17805f;
    --sm-success-soft: #e8f6ef;
    --sm-warning: #a96800;
    --sm-warning-soft: #fff4dc;
    --sm-danger: #c53b45;
    --sm-danger-hover: #b91c1c;
    --sm-danger-pressed: #991b1b;
    --sm-danger-soft: #fdecee;
    --sm-warning-text: #92400e;
    --sm-info: #1769aa;
    --sm-info-soft: #e8f3fb;

    /* Score de pertinence. La charte n'a pas de couleur d'alerte : haut = or,
     * bas = rouge du passeport de marque, moyen = provisoire (a confirmer).
     * high/mid/low = jauge, barre, pastille ; -on = texte pose dessus ;
     * -soft = fond doux, avec le texte courant par-dessus. */
    --sm-score-high: var(--sm-accent);
    --sm-score-high-soft: var(--sm-accent-soft);
    --sm-score-high-on: var(--sm-surface-inverse);
    --sm-score-track: #e9edf3;
    --sm-score-mid: var(--sm-warning);
    --sm-score-mid-soft: var(--sm-warning-soft);
    --sm-score-mid-on: #ffffff;
    --sm-score-low: #e63946;
    --sm-score-low-soft: rgba(230, 57, 70, 0.12);
    --sm-score-low-on: #ffffff;
    /* Palier intermediaire entre moyen et bas (vues a 4 paliers : 80 / 50 / 20).
     * Derive de mid et low : il suit donc le mode sombre sans redefinition. */
    --sm-score-fair: color-mix(in srgb, var(--sm-score-mid) 50%, var(--sm-score-low));
    --sm-score-fair-soft: color-mix(in srgb, var(--sm-score-mid-soft) 45%, var(--sm-score-low-soft));

    /* Visages de valeur percue d'un expediteur : echelle produit du plus bas au
     * plus haut, une teinte distincte par niveau (haut du degrade = -light).
     * Fixe en clair comme en sombre : un visage clair avec des traits bleu nuit.
     * -ink = traits du visage « non evalue ». */
    --sm-value-unrated-light: #cbd5e1;
    --sm-value-unrated: #94a3b8;
    --sm-value-unrated-ink: #334155;
    --sm-value-face-ink: #0f172a;
    --sm-value-state-idle: #d9e2ef;
    --sm-value-very-low-light: #f87171;
    --sm-value-very-low: var(--sm-interest-indifferent);
    --sm-value-low-light: #fb923c;
    --sm-value-low: var(--sm-interest-distant);
    --sm-value-neutral-light: #fde68a;
    --sm-value-neutral: #fbbf24;
    --sm-value-good-light: #bef264;
    --sm-value-good: var(--sm-interest-interesse);
    --sm-value-very-good-light: #4ade80;
    --sm-value-very-good: var(--sm-interest-engage);
    --sm-value-excellent-light: #34d399;
    --sm-value-excellent: var(--sm-interest-strategique);

    /* Niveaux d'interet d'un expediteur : code couleur produit, du rejet (rouge) a
     * l'expediteur strategique (vert emeraude), le meme partout (onboarding,
     * tableau « Mise en place », Ordre du jour). Fixe en clair comme en sombre. */
    --sm-interest-indifferent: #ef4444;
    --sm-interest-indifferent-soft: #fdeced;
    --sm-interest-distant: #f97316;
    --sm-interest-distant-soft: #fff2e8;
    --sm-interest-curieux: #eab308;
    --sm-interest-curieux-soft: #fefbe8;
    --sm-interest-interesse: #84cc16;
    --sm-interest-interesse-soft: #f5fce8;
    --sm-interest-engage: #22c55e;
    --sm-interest-engage-soft: #e9fbef;
    --sm-interest-strategique: #10b981;
    --sm-interest-strategique-soft: #e7f8f2;

    /* Les 7 filtres de la methode M.E.S.S.@.G.E (memes teintes que
     * config/message_method.php) et les familles d'expediteurs qui les
     * traversent. Fixes en clair comme en sombre. */
    --sm-step-m: #3b82f6;
    --sm-step-e1: #ef4444;
    --sm-step-s1: #8b5cf6;
    --sm-step-s2: #f59e0b;
    --sm-step-at: #e8b338;
    --sm-step-g: #06b6d4;
    --sm-step-e2: #22c55e;
    --sm-fam-vip: #7c3aed;
    --sm-fam-collab: #2563eb;
    --sm-fam-prospect: #db2777;
    --sm-fam-admin: #475569;
    --sm-fam-tools: #0d9488;
    --sm-fam-purchase: #ea580c;
    --sm-fam-news: #94a3b8;
    --sm-fam-family: #e11d48;
    --sm-fam-watch: #a16207;
    --sm-fam-other: #64748b;

    /* Couleurs d'identification des avatars générés. Elles ne représentent
     * ni un statut ni un niveau d'intérêt : leur palette reste indépendante. */
    --sm-avatar-red: #ef4444;
    --sm-avatar-green: #10b981;
    --sm-avatar-amber: #f59e0b;
    --sm-avatar-violet: #8b5cf6;
    --sm-avatar-blue: #3b82f6;
    --sm-avatar-brand-blue: var(--sm-primary-fixed);
    --sm-avatar-sky: #0ea5e9;
    --sm-avatar-cyan: #06b6d4;
    --sm-avatar-pink: #ec4899;
    --sm-avatar-orange: #f97316;
    --sm-avatar-teal: #14b8a6;
    --sm-avatar-indigo: #6366f1;
    --sm-avatar-muted: #cbd5e1;

    /* Statuts de confiance du badge expéditeur : palette distincte des niveaux
     * d'intérêt, même lorsque deux niveaux partagent aujourd'hui une teinte. */
    --sm-trust-unrated: #94a3b8;
    --sm-trust-verified: #10b981;
    --sm-trust-very-good: #22c55e;
    --sm-trust-good: #84cc16;
    --sm-trust-medium: #fbbf24;
    --sm-trust-low: #f97316;
    --sm-trust-very-low: #ef4444;

    /* Accents des vues rapides /tasks et paliers de priorité. Chaque jeton
     * garde l'identité de son filtre ou de son palier. */
    --sm-task-view-essential: var(--sm-accent);
    --sm-task-view-action: #2b8fd6;
    --sm-task-view-review: #d97706;
    --sm-task-view-quarantine: #dc2626;
    --sm-task-view-unanswered: #db2777;
    --sm-task-view-today: #0f9f78;
    --sm-task-view-attachments: #0891b2;
    --sm-task-view-retain: #7c6bd6;
    --sm-task-view-archive: #475569;
    --sm-task-view-trash: #9a3412;
    --sm-task-view-pinned: #4f5fd6;
    --sm-task-priority-critical: #dc2626;
    --sm-task-priority-high: #d97706;
    --sm-task-priority-normal: #16a34a;
    --sm-task-priority-low: #2563eb;
    --sm-task-priority-other: #9333ea;
    --sm-filter-tone-lime: #a3b82a;

    /* La matrice et les vues HTML gardent leur surface bleu nuit. */
    --sm-email-view-surface: #1a2238;
    --sm-email-view-toolbar: color-mix(in srgb, var(--sm-surface-inverse) 88%, transparent);
    --sm-email-view-text: #f8f9fc;
    --sm-email-view-text-muted: #c8ccd6;
    --sm-email-view-text-soft: #b8c0d4;
    --sm-email-view-text-subtle: #8a90a0;
    --sm-email-action-view: #38bdf8;
    --sm-email-action-reply: #3cc78f;
    --sm-email-action-move: #a78bfa;

    /* Palette fonctionnelle /leads : avatars, statuts de cycle et activité. */
    --sm-leads-avatar-navy: #1d4ea3;
    --sm-leads-avatar-gold: #9a6608;
    --sm-leads-avatar-green: #17805f;
    --sm-leads-avatar-rose: #c0395a;
    --sm-leads-avatar-violet: #6d4ed1;
    --sm-leads-avatar-teal: #0e7c8a;
    --sm-leads-status-lime-bg: #eef8d9;
    --sm-leads-status-lime-fg: #3f6212;
    --sm-leads-status-lime-dot: #65a30d;
    --sm-leads-status-brown-bg: #f6ece1;
    --sm-leads-status-brown-fg: #7c4a1e;
    --sm-leads-status-brown-dot: #a0612b;
    --sm-leads-activity-cooling: #c2620f;
    --sm-leads-activity-dormant: #315e9d;

    /* Etats de messages et d'interaction conserves comme roles explicites. */
    --sm-status-online: #10b981;
    --sm-action-restore: #0f766e;
    --sm-action-restore-border: #99f6e4;
    --sm-task-archive-accent: #f97316;
    --sm-task-interaction-score: #335d9b;
    --sm-task-interaction-track: #dde7f4;
    --sm-task-interaction-active: #30599a;
    --sm-task-priority-surface: #fdfbf7;
    --sm-relevance-warning-surface: #fff9ec;
    --sm-relevance-warning-border: #ead29b;
    --sm-relevance-warning-text: #73551b;
    --sm-relevance-close-surface: #f2f6fc;
    --sm-relevance-close-hover: #e7eefb;

    /* Palette de conversation WhatsApp, distincte du statut de succès. */
    --sm-whatsapp-surface: #f0fdf4;
    --sm-whatsapp-surface-outgoing: #dcfce7;
    --sm-whatsapp-border: #bbf7d0;
    --sm-whatsapp-border-outgoing: #86efac;
    --sm-whatsapp-text: #166534;
    --sm-whatsapp-text-body: #14532d;
    --sm-whatsapp-text-party: #4b6b57;
    --sm-whatsapp-text-time: #5b7c66;
    --sm-whatsapp-text-outgoing: #173d23;
    --sm-whatsapp-action: #16a34a;
    --sm-whatsapp-action-hover: #15803d;
    --sm-task-unsubscribe-surface: #f0fdf4;
    --sm-task-unsubscribe-selected: #dcfce7;
    --sm-task-unsubscribe-border: #bbf7d0;
    --sm-task-unsubscribe-checked: #16a34a;
    --sm-text-quiet: #c0cad8;

    /* Geometrie et elevation */
    --sm-radius-sm: 6px;
    --sm-radius-md: 10px;
    --sm-radius-lg: 16px;
    --sm-shadow-sm: 0 1px 2px rgba(15, 35, 55, 0.06);
    --sm-shadow-md: 0 8px 24px rgba(15, 35, 55, 0.10);
    --sm-focus-ring: 0 0 0 3px rgba(31, 67, 143, 0.22);
    --sm-overlay: rgba(15, 35, 55, 0.46);

    /* Typographie (charte SymbioteK). Les @font-face sont dans
     * symbiotek-fonts.css. Une feuille chargee sans ce socle ecrit
     * var(--sm-font-text, <meme pile>) pour garder le bon repli.
     * title : titres, boutons, menus, labels, badges, grands chiffres
     * text  : texte courant et champs
     * mono  : surtitres en capitales espacees et code, jamais un prix
     * quote : citations signees Sebastien, en italique */
    --sm-font-title: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
    --sm-font-text: Nunito, "Segoe UI", Arial, sans-serif;
    --sm-font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
    --sm-font-quote: Alegreya, Georgia, serif;

    /* Mascotte : illustration de marque (bleu profond, bleu nuit, or du logo), fixe en
     * clair comme en sombre, comme le logo. Jamais redéfinie dans les blocs sombres. */
    --sm-mascot-body-light: #5b82d8;
    --sm-mascot-body: #2a50a3;
    --sm-mascot-body-dark: #16336f;
    --sm-mascot-limb: #1d3f85;
    --sm-mascot-foot: #132c63;
    --sm-mascot-ink: #0b1d45;
    --sm-mascot-eye: #ffffff;
    --sm-mascot-pupil: #06142e;
    --sm-mascot-cheek: #ff9db0;
    --sm-mascot-tongue: #ff7d93;
    --sm-mascot-gold: #f2c230;
    --sm-mascot-gold-light: #ffe79a;
    --sm-mascot-gold-dark: #d39c12;
    --sm-mascot-gold-vein: #b5830b;
    --sm-mascot-shadow: 0 10px 14px rgba(6, 20, 46, 0.18);
}

/* .sm-night : un bloc reste en jetons sombres quel que soit le thème choisi
 * (fenêtres du parcours d'onboarding posées sur le ciel de nuit). */
:root[data-sm-theme="dark"],
.sm-night {
    color-scheme: dark;

    --sm-canvas: #06142e;
    --sm-surface: #172332;
    --sm-surface-raised: #1d2b3b;
    --sm-surface-muted: #243548;
    --sm-surface-hover: #203043;
    --sm-surface-selected: #294565;
    --sm-surface-inverse: #06142e;
    --sm-text: #edf4fb;
    --sm-text-strong: #ffffff;
    --sm-text-muted: #b4c2d2;
    --sm-text-subtle: #8799ac;
    --sm-text-secondary: #c0cad8;
    --sm-text-secondary-strong: #c0cad8;
    --sm-text-disabled: #8799ac;
    --sm-text-on-primary: #ffffff;
    --sm-text-on-danger: var(--sm-surface-inverse);
    --sm-text-on-success: var(--sm-surface-inverse);
    --sm-text-on-warning: var(--sm-surface-inverse);
    --sm-text-inverse: #ffffff;
    --sm-border: #31465c;
    --sm-border-strong: #4b637b;
    --sm-border-subtle: #26384b;
    --sm-border-soft: #31465c;
    --sm-border-light: #31465c;
    --sm-border-primary: #4b637b;
    --sm-border-success: #2e6b55;
    --sm-border-warning: #76552a;
    --sm-border-danger: #7e3b47;
    --sm-border-tick: #4b637b;
    --sm-table-header: #1a2837;
    --sm-surface-soft: #1d2b3b;
    --sm-leads-shadow-card: 0 1px 2px color-mix(in srgb, var(--sm-surface-inverse) 30%, transparent), 0 14px 34px -16px color-mix(in srgb, var(--sm-surface-inverse) 50%, transparent);
    --sm-leads-shadow-pop: 0 20px 44px -12px color-mix(in srgb, var(--sm-surface-inverse) 60%, transparent), 0 2px 6px color-mix(in srgb, var(--sm-surface-inverse) 30%, transparent);

    --sm-primary: #8cb9ff;
    --sm-primary-hover: #b3d1ff;
    --sm-primary-soft: #203c5d;
    --sm-primary-tint: rgba(140, 185, 255, 0.14);
    --sm-primary-tint-strong: rgba(140, 185, 255, 0.22);
    --sm-accent: #f2c230;
    --sm-accent-hover: #f7d87f;
    --sm-accent-soft: #4b3d18;

    --sm-success: #58c99d;
    --sm-success-soft: #173f36;
    --sm-warning: #f0be63;
    --sm-warning-soft: #4a3818;
    --sm-danger: #fa8790;
    --sm-danger-hover: #b4232e;
    --sm-danger-pressed: #8f1e2a;
    --sm-danger-soft: #4a252d;
    --sm-warning-text: #e9c9a3;
    --sm-info: #7dc5fa;
    --sm-info-soft: #183b59;

    --sm-score-mid-on: var(--sm-surface-inverse);
    --sm-score-low-soft: rgba(230, 57, 70, 0.20);

    --sm-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.24);
    --sm-shadow-md: 0 12px 30px rgba(0, 0, 0, 0.30);
    --sm-focus-ring: 0 0 0 3px rgba(140, 185, 255, 0.32);
    --sm-overlay: rgba(0, 0, 0, 0.56);

    --sm-leads-avatar-navy: #8cb9ff;
    --sm-leads-avatar-gold: #f0c85c;
    --sm-leads-avatar-green: #58c99d;
    --sm-leads-avatar-rose: #f48aa6;
    --sm-leads-avatar-violet: #b7a3ff;
    --sm-leads-avatar-teal: #5fd0dc;
    --sm-leads-status-lime-bg: #2a3a14;
    --sm-leads-status-lime-fg: #c5ec7e;
    --sm-leads-status-lime-dot: #9ad045;
    --sm-leads-status-brown-bg: #3b2c1f;
    --sm-leads-status-brown-fg: #e9c9a3;
    --sm-leads-status-brown-dot: #c98b52;
    --sm-leads-activity-cooling: #f0a35e;
    --sm-leads-activity-dormant: #8fb3e6;
}

/* Les visiteurs qui n'ont pas encore choisi de mode suivront l'OS. */
@media (prefers-color-scheme: dark) {
    :root[data-sm-theme="system"] {
        color-scheme: dark;
        --sm-canvas: #06142e;
        --sm-surface: #172332;
        --sm-surface-raised: #1d2b3b;
        --sm-surface-muted: #243548;
        --sm-surface-hover: #203043;
        --sm-surface-selected: #294565;
        --sm-surface-inverse: #06142e;
        --sm-text: #edf4fb;
        --sm-text-strong: #ffffff;
        --sm-text-muted: #b4c2d2;
        --sm-text-subtle: #8799ac;
        --sm-text-secondary: #c0cad8;
        --sm-text-secondary-strong: #c0cad8;
        --sm-text-disabled: #8799ac;
        --sm-text-on-primary: #ffffff;
        --sm-text-on-danger: var(--sm-surface-inverse);
        --sm-text-on-success: var(--sm-surface-inverse);
        --sm-text-on-warning: var(--sm-surface-inverse);
        --sm-text-inverse: #ffffff;
        --sm-border: #31465c;
        --sm-border-strong: #4b637b;
        --sm-border-subtle: #26384b;
        --sm-border-soft: #31465c;
        --sm-border-light: #31465c;
        --sm-border-primary: #4b637b;
        --sm-border-success: #2e6b55;
        --sm-border-warning: #76552a;
        --sm-border-danger: #7e3b47;
        --sm-border-tick: #4b637b;
        --sm-table-header: #1a2837;
        --sm-surface-soft: #1d2b3b;
        --sm-leads-shadow-card: 0 1px 2px color-mix(in srgb, var(--sm-surface-inverse) 30%, transparent), 0 14px 34px -16px color-mix(in srgb, var(--sm-surface-inverse) 50%, transparent);
        --sm-leads-shadow-pop: 0 20px 44px -12px color-mix(in srgb, var(--sm-surface-inverse) 60%, transparent), 0 2px 6px color-mix(in srgb, var(--sm-surface-inverse) 30%, transparent);
        --sm-primary: #8cb9ff;
        --sm-primary-hover: #b3d1ff;
        --sm-primary-soft: #203c5d;
        --sm-primary-tint: rgba(140, 185, 255, 0.14);
        --sm-primary-tint-strong: rgba(140, 185, 255, 0.22);
        --sm-accent: #f2c230;
        --sm-accent-hover: #f7d87f;
        --sm-accent-soft: #4b3d18;
        --sm-success: #58c99d;
        --sm-success-soft: #173f36;
        --sm-warning: #f0be63;
        --sm-warning-soft: #4a3818;
        --sm-danger: #fa8790;
        --sm-danger-hover: #b4232e;
        --sm-danger-pressed: #8f1e2a;
        --sm-danger-soft: #4a252d;
        --sm-warning-text: #e9c9a3;
        --sm-info: #7dc5fa;
        --sm-info-soft: #183b59;
        --sm-score-mid-on: var(--sm-surface-inverse);
        --sm-score-low-soft: rgba(230, 57, 70, 0.20);
        --sm-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.24);
        --sm-shadow-md: 0 12px 30px rgba(0, 0, 0, 0.30);
        --sm-focus-ring: 0 0 0 3px rgba(140, 185, 255, 0.32);
        --sm-overlay: rgba(0, 0, 0, 0.56);
        --sm-leads-avatar-navy: #8cb9ff;
        --sm-leads-avatar-gold: #f0c85c;
        --sm-leads-avatar-green: #58c99d;
        --sm-leads-avatar-rose: #f48aa6;
        --sm-leads-avatar-violet: #b7a3ff;
        --sm-leads-avatar-teal: #5fd0dc;
        --sm-leads-status-lime-bg: #2a3a14;
        --sm-leads-status-lime-fg: #c5ec7e;
        --sm-leads-status-lime-dot: #9ad045;
        --sm-leads-status-brown-bg: #3b2c1f;
        --sm-leads-status-brown-fg: #e9c9a3;
        --sm-leads-status-brown-dot: #c98b52;
        --sm-leads-activity-cooling: #f0a35e;
        --sm-leads-activity-dormant: #8fb3e6;
    }
}

/* Pont commun pour les modales Blade, Vue et SweetAlert. Les composants
 * conservent leur mise en page, mais ne recreent plus une palette locale. */
html[data-sm-theme] body#main-body {
    background: var(--sm-canvas);
    color: var(--sm-text);
}

.modal-content,
.select2-dropdown,
.swal2-popup {
    background: var(--sm-surface-raised);
    color: var(--sm-text);
    border-color: var(--sm-border);
}

.modal-header,
.modal-footer {
    border-color: var(--sm-border);
}

.modal-title,
.swal2-title {
    color: var(--sm-text-strong);
}

.modal-content .form-control,
.modal-content .select2-selection,
.swal2-input,
.swal2-textarea {
    background: var(--sm-surface);
    color: var(--sm-text);
    border-color: var(--sm-border);
}

.modal-content .form-control:focus,
.modal-content .select2-selection:focus,
.swal2-input:focus,
.swal2-textarea:focus {
    border-color: var(--sm-primary);
    box-shadow: var(--sm-focus-ring);
}

.modal-backdrop,
.swal2-container {
    background: var(--sm-overlay);
}

/* Compatibilite des ecrans Vue historiques. Cette couche ne definit aucune
 * couleur : elle raccorde leurs conteneurs aux jetons communs le temps que les
 * ecrans soient progressivement simplifies. Les couleurs de statut restent
 * volontairement locales (danger, succes, priorite). */
:root[data-sm-theme="dark"] .sender-filter-console,
:root[data-sm-theme="dark"] .sender-filter-control,
:root[data-sm-theme="dark"] .sender-filter-dropdown-menu,
:root[data-sm-theme="dark"] .mini-card,
:root[data-sm-theme="dark"] .stat-card,
:root[data-sm-theme="dark"] .user-row,
:root[data-sm-theme="dark"] .email-row,
:root[data-sm-theme="dark"] .html-view-stage,
:root[data-sm-theme="dark"] .task-html-card,
:root[data-sm-theme="dark"] .auto-sync-alert-card,
:root[data-sm-theme="dark"] .mailbox-reconnect-item,
:root[data-sm-theme="dark"] .gmail-permission-modal,
:root[data-sm-theme="dark"] .compose-email-modal,
:root[data-sm-theme="dark"] .compose-modal,
:root[data-sm-theme="dark"] .emails-modal,
:root[data-sm-theme="dark"] .sender-automation-modal {
    background: var(--sm-surface-raised) !important;
    color: var(--sm-text) !important;
    border-color: var(--sm-border) !important;
}

:root[data-sm-theme="dark"] .sender-filter-search,
:root[data-sm-theme="dark"] .sender-filter-dropdown-menu::before,
:root[data-sm-theme="dark"] .sender-filter-control__badge,
:root[data-sm-theme="dark"] .mini-card__icon,
:root[data-sm-theme="dark"] .html-view-toolbar select,
:root[data-sm-theme="dark"] .auto-sync-alert-card__meta-item,
:root[data-sm-theme="dark"] .gmail-permission-modal__email,
:root[data-sm-theme="dark"] .gmail-permission-modal__close {
    background: var(--sm-surface-muted) !important;
    color: var(--sm-text) !important;
    border-color: var(--sm-border) !important;
}

:root[data-sm-theme="dark"] .sender-filter-console *,
:root[data-sm-theme="dark"] .sender-filter-control *,
:root[data-sm-theme="dark"] .mini-card *,
:root[data-sm-theme="dark"] .stat-card *,
:root[data-sm-theme="dark"] .html-view-stage *,
:root[data-sm-theme="dark"] .auto-sync-alert-card *,
:root[data-sm-theme="dark"] .mailbox-reconnect-item *,
:root[data-sm-theme="dark"] .gmail-permission-modal * {
    border-color: var(--sm-border);
}

:root[data-sm-theme="dark"] .sender-filter-console input,
:root[data-sm-theme="dark"] .sender-filter-control,
:root[data-sm-theme="dark"] .sender-filter-control__value,
:root[data-sm-theme="dark"] .mini-card__value,
:root[data-sm-theme="dark"] .html-view-stage,
:root[data-sm-theme="dark"] .toolbar-label,
:root[data-sm-theme="dark"] .auto-sync-alert-card__title,
:root[data-sm-theme="dark"] .auto-sync-alert-card__text,
:root[data-sm-theme="dark"] .mailbox-reconnect-item__email,
:root[data-sm-theme="dark"] .gmail-permission-modal__title,
:root[data-sm-theme="dark"] .gmail-permission-modal__text {
    color: var(--sm-text) !important;
}

:root[data-sm-theme="dark"] .sender-filter-search input::placeholder,
:root[data-sm-theme="dark"] .sender-filter-control__label,
:root[data-sm-theme="dark"] .mini-card__label,
:root[data-sm-theme="dark"] .mini-card__meta,
:root[data-sm-theme="dark"] .stat-card__head,
:root[data-sm-theme="dark"] .toolbar-label,
:root[data-sm-theme="dark"] .auto-sync-alert-card__meta-value,
:root[data-sm-theme="dark"] .mailbox-reconnect-item__reason {
    color: var(--sm-text-muted) !important;
}

:root[data-sm-theme="dark"] .sender-filter-search:focus-within,
:root[data-sm-theme="dark"] .mailbox-reconnect-item:hover {
    background: var(--sm-surface-hover) !important;
    border-color: var(--sm-border-strong) !important;
}

:root[data-sm-theme="dark"] .sender-filter-search__submit,
:root[data-sm-theme="dark"] .mailbox-reconnect-item__open,
:root[data-sm-theme="dark"] .gmail-permission-modal__primary,
:root[data-sm-theme="dark"] .auto-sync-hint-card {
    background: var(--sm-primary-fixed) !important;
    color: var(--sm-text-on-primary) !important;
}

:root[data-sm-theme="dark"] .auto-sync-hint-card::before {
    background: var(--sm-primary-fixed) !important;
}

/* Le theme d'origine force tout <strong> en bleu profond (!important) : sur
 * fond sombre, le gras devenait illisible. Il reprend la couleur du texte
 * autour ; :where garde la specificite de la regle d'origine, un composant
 * qui colore son gras garde sa couleur. */
:where(:root[data-sm-theme="dark"]) strong {
    color: inherit !important;
}

/* E-mails : les anciens widgets sont hors du scope CSS de Vue. Ils doivent
 * donc etre relies ici, au niveau de leur conteneur Blade, pour eviter un
 * panneau clair au milieu du mode sombre. */
:root[data-sm-theme="dark"] .page-wrapper,
:root[data-sm-theme="dark"] .content-task {
    background: var(--sm-canvas) !important;
}

:root[data-sm-theme="dark"] .page-titles,
:root[data-sm-theme="dark"] .page-titles h1,
:root[data-sm-theme="dark"] .page-titles h2,
:root[data-sm-theme="dark"] .page-titles h3,
:root[data-sm-theme="dark"] .active-bread-crumb {
    color: var(--sm-text-strong) !important;
}

:root[data-sm-theme="dark"] .modern-stat-card,
:root[data-sm-theme="dark"] .search-input-wrapper.premium-glass,
:root[data-sm-theme="dark"] .fts-switch,
:root[data-sm-theme="dark"] .quick-view,
:root[data-sm-theme="dark"] .quick-view-item,
:root[data-sm-theme="dark"] .tasks-filters-container .form-control,
:root[data-sm-theme="dark"] .tasks-filters-container input,
:root[data-sm-theme="dark"] .tasks-filters-container select {
    background: var(--sm-surface-raised) !important;
    color: var(--sm-text) !important;
    border-color: var(--sm-border) !important;
    box-shadow: var(--sm-shadow-sm) !important;
}

:root[data-sm-theme="dark"] .modern-stat-card *,
:root[data-sm-theme="dark"] .search-input-wrapper.premium-glass input,
:root[data-sm-theme="dark"] .tasks-filters-container input::placeholder,
:root[data-sm-theme="dark"] .fts-switch-btn {
    color: var(--sm-text-muted) !important;
}

:root[data-sm-theme="dark"] .modern-stat-card .stat-number,
:root[data-sm-theme="dark"] .modern-stat-card .stat-label,
:root[data-sm-theme="dark"] .search-input-wrapper.premium-glass input:focus,
:root[data-sm-theme="dark"] .fts-switch-btn.active {
    color: var(--sm-text-strong) !important;
}

:root[data-sm-theme="dark"] .modern-stat-card:hover,
:root[data-sm-theme="dark"] .modern-stat-card.active,
:root[data-sm-theme="dark"] .fts-switch-btn.active {
    background: var(--sm-surface-hover) !important;
    border-color: var(--sm-border-strong) !important;
}

/* Expediteurs (/users) : le pont couvrait deja les lignes, mais laissait clairs
   le cadre du tableau, l'entete, la colonne collante et plusieurs controles de
   filtre. On les raccorde ici ; les couleurs de statut (emojis notes) restent
   locales et ne sont pas touchees. */
:root[data-sm-theme="dark"] .table-wrapper.premium-card {
    background: var(--sm-surface-raised) !important;
    border-color: var(--sm-border) !important;
}

:root[data-sm-theme="dark"] .col-user {
    background: var(--sm-surface-raised) !important;
}

:root[data-sm-theme="dark"] .header-row,
:root[data-sm-theme="dark"] .header-row .header-cell,
:root[data-sm-theme="dark"] .header-row .col-user {
    background: var(--sm-surface-muted) !important;
    color: var(--sm-text-muted) !important;
    border-color: var(--sm-border) !important;
}

:root[data-sm-theme="dark"] .sender-status__trigger,
:root[data-sm-theme="dark"] .sender-date-filter,
:root[data-sm-theme="dark"] .sender-clear-all,
:root[data-sm-theme="dark"] .header-action-btn,
:root[data-sm-theme="dark"] .demo-blur-toggle {
    background: var(--sm-surface) !important;
    color: var(--sm-text) !important;
    border-color: var(--sm-border) !important;
}

:root[data-sm-theme="dark"] .sender-filter-console__bottom,
:root[data-sm-theme="dark"] .trust-donut__center {
    background: var(--sm-surface-raised) !important;
}

/* Les compteurs des statistiques Expéditeurs doivent rester des repères forts,
   indépendamment des couleurs locales de chaque carte. */
:root[data-sm-theme="dark"] .stat-card__head strong,
:root[data-sm-theme="dark"] .face-row strong,
:root[data-sm-theme="dark"] .trust-row strong,
:root[data-sm-theme="dark"] .interaction-row strong,
:root[data-sm-theme="dark"] .trust-donut__center {
    color: var(--sm-text-strong) !important;
}

/* Les tableaux partagent le meme markup de skeleton : un seul rendu sombre,
   animé et contrasté évite les lignes blanches ou figées selon la vue. */
:root[data-sm-theme="dark"] .skeleton-row td {
    background: var(--sm-surface-raised) !important;
    border-color: var(--sm-border) !important;
}

:root[data-sm-theme="dark"] .skeleton-bar {
    background: linear-gradient(
        100deg,
        var(--sm-surface-muted) 20%,
        color-mix(in srgb, var(--sm-primary) 24%, var(--sm-surface-hover)) 45%,
        var(--sm-surface-muted) 70%
    ) !important;
    background-size: 260% 100% !important;
    animation: sm-table-skeleton-shimmer 1.25s ease-in-out infinite !important;
}

:root[data-sm-theme="dark"] .value-current-unrated {
    background: var(--sm-surface-muted) !important;
    color: var(--sm-text) !important;
}

/* Barre superieure : les icones restent des commandes lisibles, pas des
 * pictogrammes sombres poses sur un fond sombre. Ces regles restent globales
 * car la navigation Vue est scopee et cohabite avec les styles legacy. */
:root[data-sm-theme="dark"] .premium-topbar,
:root[data-sm-theme="dark"] .premium-topbar .top-navbar {
    background: var(--sm-surface-inverse) !important;
    border-color: var(--sm-border) !important;
}

:root[data-sm-theme="dark"] .premium-topbar .nav-link:not(.profile-pic),
:root[data-sm-theme="dark"] .premium-topbar .nav-link:not(.profile-pic) i,
:root[data-sm-theme="dark"] .premium-topbar .nav-link:not(.profile-pic) svg {
    color: var(--sm-text) !important;
}

:root[data-sm-theme="dark"] .premium-topbar .nav-link:not(.profile-pic) {
    background: var(--sm-surface-muted) !important;
    border: 1px solid var(--sm-border) !important;
}

:root[data-sm-theme="dark"] .premium-topbar .nav-link:not(.profile-pic):hover,
:root[data-sm-theme="dark"] .premium-topbar .nav-link:not(.profile-pic):focus {
    background: var(--sm-surface-selected) !important;
    border-color: var(--sm-border-strong) !important;
    color: var(--sm-primary) !important;
}

:root[data-sm-theme="dark"] .premium-topbar .nav-link:not(.profile-pic):hover i,
:root[data-sm-theme="dark"] .premium-topbar .nav-link:not(.profile-pic):focus i,
:root[data-sm-theme="dark"] .premium-topbar .nav-link:not(.profile-pic):hover svg,
:root[data-sm-theme="dark"] .premium-topbar .nav-link:not(.profile-pic):focus svg {
    color: var(--sm-primary) !important;
}

:root[data-sm-theme="dark"] .premium-topbar .premium-dropdown,
:root[data-sm-theme="dark"] .premium-topbar .premium-dropdown .dropdown-user,
:root[data-sm-theme="dark"] .premium-topbar .premium-dropdown .dw-user-box {
    background: var(--sm-surface-raised) !important;
    color: var(--sm-text) !important;
    border-color: var(--sm-border) !important;
}

/* Le shell Vue utilise l'etat Bootstrap 4 `show`, tandis que le socle legacy
   ne rendait que l'etat Bootstrap 3 `open`. Sans ce pont, le menu est ouvert
   semantiquement mais reste masque. */
.premium-topbar .nav-item.dropdown.show > .premium-dropdown {
    display: block;
}

:root[data-sm-theme="dark"] .premium-topbar .premium-dropdown .dropdown-item,
:root[data-sm-theme="dark"] .premium-topbar .premium-dropdown .dropdown-item i,
:root[data-sm-theme="dark"] .premium-topbar .premium-dropdown .dropdown-user h4,
:root[data-sm-theme="dark"] .premium-topbar .premium-dropdown .dropdown-user p {
    color: var(--sm-text) !important;
}

:root[data-sm-theme="dark"] .premium-topbar .premium-dropdown .dropdown-item:hover,
:root[data-sm-theme="dark"] .premium-topbar .premium-dropdown .dropdown-item:focus {
    background: var(--sm-surface-hover) !important;
    color: var(--sm-primary) !important;
}

:root[data-sm-theme="dark"] .premium-topbar .profile-pic + .premium-dropdown .dropdown-user > li > a:not(.premium-btn-blue):not(.text-danger) {
    color: var(--sm-text) !important;
}

:root[data-sm-theme="dark"] .premium-topbar .profile-pic + .premium-dropdown .dropdown-user > li > a:not(.premium-btn-blue):not(.text-danger):hover {
    background: var(--sm-surface-hover);
    color: var(--sm-primary) !important;
}

:root[data-sm-theme="dark"] .premium-topbar .premium-dropdown .dropdown-divider,
:root[data-sm-theme="dark"] .premium-topbar .premium-dropdown li {
    border-color: var(--sm-border) !important;
}

/* Le socle legacy repeint la barre en blanc au scroll (#main-top-nav-bar.scrolled,
   custom.css) et garde une boite logo claire (.navbar-header). Ces surfaces
   n'existaient que pour le mode clair : on les raccorde a la barre en sombre. */
:root[data-sm-theme="dark"] #main-top-nav-bar.scrolled,
:root[data-sm-theme="dark"] .premium-topbar .navbar-header {
    background: var(--sm-surface-inverse) !important;
}

:root[data-sm-theme="dark"] .premium-topbar .navbar-header {
    border-color: var(--sm-border);
}

/* Les logos configures sont des JPEG a fond clair integre. En sombre, on affiche
   le meme logo detoure (PNG derive de ce JPEG, seul le fond #f7f7f7 retire) dans
   la meme boite : le JPEG est sorti de son cadre (object-position) et le PNG pose
   en fond, ce qui reste compatible avec tous les navigateurs (content: url() sur
   <img> ne l'est pas). Un lisere clair de 0.6px rend lisible le bleu marque sur la
   barre. Le ciblage par nom de fichier laisse intact tout futur logo personnalise. */
:root[data-sm-theme="dark"] .premium-topbar .logo-wrapper .logo-large[src*="L5YJ5J7MA2Z2646E8RM7455WD982FVLF87B72XN5logo-small.jpeg"] {
    object-position: -99999px 0;
    background: url("/storage/logos/app/L5YJ5J7MA2Z2646E8RM7455WD982FVLF87B72XN5logo-small-transparent.png") center / cover no-repeat;
    filter: drop-shadow(0 0 0.6px var(--sm-text)) drop-shadow(0 0 0.6px var(--sm-text));
}

:root[data-sm-theme="dark"] .premium-topbar .logo-wrapper .logo-small[src*="MF37298922B96369K543LWYVY8B522ECFR49J26Dlogo-small.jpeg"] {
    object-position: -99999px 0;
    background: url("/storage/logos/app/MF37298922B96369K543LWYVY8B522ECFR49J26Dlogo-small-transparent.png") center / contain no-repeat;
    filter: drop-shadow(0 0 0.6px var(--sm-text)) drop-shadow(0 0 0.6px var(--sm-text));
}

:root[data-sm-theme="dark"] .smart-view-pill {
    background: var(--sm-surface-raised) !important;
    border-color: var(--sm-border) !important;
    color: var(--sm-text) !important;
}

:root[data-sm-theme="dark"] .smart-view-pill__label {
    color: var(--sm-text) !important;
}

@media (prefers-color-scheme: dark) {
    :root[data-sm-theme="system"] .sender-filter-console,
    :root[data-sm-theme="system"] .sender-filter-control,
    :root[data-sm-theme="system"] .sender-filter-dropdown-menu,
    :root[data-sm-theme="system"] .mini-card,
    :root[data-sm-theme="system"] .stat-card,
    :root[data-sm-theme="system"] .user-row,
    :root[data-sm-theme="system"] .email-row,
    :root[data-sm-theme="system"] .html-view-stage,
    :root[data-sm-theme="system"] .task-html-card,
    :root[data-sm-theme="system"] .auto-sync-alert-card,
    :root[data-sm-theme="system"] .mailbox-reconnect-item,
    :root[data-sm-theme="system"] .gmail-permission-modal,
    :root[data-sm-theme="system"] .compose-email-modal,
    :root[data-sm-theme="system"] .compose-modal,
    :root[data-sm-theme="system"] .emails-modal,
    :root[data-sm-theme="system"] .sender-automation-modal {
        background: var(--sm-surface-raised) !important;
        color: var(--sm-text) !important;
        border-color: var(--sm-border) !important;
    }

    :root[data-sm-theme="system"] .page-wrapper,
    :root[data-sm-theme="system"] .content-task {
        background: var(--sm-canvas) !important;
    }

    :root[data-sm-theme="system"] .modern-stat-card,
    :root[data-sm-theme="system"] .search-input-wrapper.premium-glass,
    :root[data-sm-theme="system"] .fts-switch,
    :root[data-sm-theme="system"] .quick-view,
    :root[data-sm-theme="system"] .quick-view-item,
    :root[data-sm-theme="system"] .tasks-filters-container .form-control,
    :root[data-sm-theme="system"] .tasks-filters-container input,
    :root[data-sm-theme="system"] .tasks-filters-container select {
        background: var(--sm-surface-raised) !important;
        color: var(--sm-text) !important;
        border-color: var(--sm-border) !important;
    }

    :root[data-sm-theme="system"] .modern-stat-card *,
    :root[data-sm-theme="system"] .search-input-wrapper.premium-glass input,
    :root[data-sm-theme="system"] .tasks-filters-container input::placeholder,
    :root[data-sm-theme="system"] .fts-switch-btn {
        color: var(--sm-text-muted) !important;
    }

    :root[data-sm-theme="system"] .modern-stat-card .stat-number,
    :root[data-sm-theme="system"] .modern-stat-card .stat-label,
    :root[data-sm-theme="system"] .fts-switch-btn.active {
        color: var(--sm-text-strong) !important;
    }

    :root[data-sm-theme="system"] .table-wrapper.premium-card {
        background: var(--sm-surface-raised) !important;
        border-color: var(--sm-border) !important;
    }

    :root[data-sm-theme="system"] .col-user {
        background: var(--sm-surface-raised) !important;
    }

    :root[data-sm-theme="system"] .header-row,
    :root[data-sm-theme="system"] .header-row .header-cell,
    :root[data-sm-theme="system"] .header-row .col-user {
        background: var(--sm-surface-muted) !important;
        color: var(--sm-text-muted) !important;
        border-color: var(--sm-border) !important;
    }

    :root[data-sm-theme="system"] .sender-status__trigger,
    :root[data-sm-theme="system"] .sender-date-filter,
    :root[data-sm-theme="system"] .sender-clear-all,
    :root[data-sm-theme="system"] .header-action-btn,
    :root[data-sm-theme="system"] .demo-blur-toggle {
        background: var(--sm-surface) !important;
        color: var(--sm-text) !important;
        border-color: var(--sm-border) !important;
    }

    :root[data-sm-theme="system"] .sender-filter-console__bottom,
    :root[data-sm-theme="system"] .trust-donut__center {
        background: var(--sm-surface-raised) !important;
    }

    :root[data-sm-theme="system"] .stat-card__head strong,
    :root[data-sm-theme="system"] .face-row strong,
    :root[data-sm-theme="system"] .trust-row strong,
    :root[data-sm-theme="system"] .interaction-row strong,
    :root[data-sm-theme="system"] .trust-donut__center {
        color: var(--sm-text-strong) !important;
    }

    :root[data-sm-theme="system"] .skeleton-row td {
        background: var(--sm-surface-raised) !important;
        border-color: var(--sm-border) !important;
    }

    :root[data-sm-theme="system"] .skeleton-bar {
        background: linear-gradient(
            100deg,
            var(--sm-surface-muted) 20%,
            color-mix(in srgb, var(--sm-primary) 24%, var(--sm-surface-hover)) 45%,
            var(--sm-surface-muted) 70%
        ) !important;
        background-size: 260% 100% !important;
        animation: sm-table-skeleton-shimmer 1.25s ease-in-out infinite !important;
    }

    :root[data-sm-theme="system"] .value-current-unrated {
        background: var(--sm-surface-muted) !important;
        color: var(--sm-text) !important;
    }

    :root[data-sm-theme="system"] .premium-topbar,
    :root[data-sm-theme="system"] .premium-topbar .top-navbar {
        background: var(--sm-surface-inverse) !important;
        border-color: var(--sm-border) !important;
    }

    :root[data-sm-theme="system"] .premium-topbar .nav-link:not(.profile-pic),
    :root[data-sm-theme="system"] .premium-topbar .nav-link:not(.profile-pic) i,
    :root[data-sm-theme="system"] .premium-topbar .nav-link:not(.profile-pic) svg {
        color: var(--sm-text) !important;
    }

    :root[data-sm-theme="system"] .premium-topbar .nav-link:not(.profile-pic) {
        background: var(--sm-surface-muted) !important;
        border: 1px solid var(--sm-border) !important;
    }

    :root[data-sm-theme="system"] .premium-topbar .nav-link:not(.profile-pic):hover,
    :root[data-sm-theme="system"] .premium-topbar .nav-link:not(.profile-pic):focus {
        background: var(--sm-surface-selected) !important;
        border-color: var(--sm-border-strong) !important;
        color: var(--sm-primary) !important;
    }

    :root[data-sm-theme="system"] .premium-topbar .nav-link:not(.profile-pic):hover i,
    :root[data-sm-theme="system"] .premium-topbar .nav-link:not(.profile-pic):focus i,
    :root[data-sm-theme="system"] .premium-topbar .nav-link:not(.profile-pic):hover svg,
    :root[data-sm-theme="system"] .premium-topbar .nav-link:not(.profile-pic):focus svg {
        color: var(--sm-primary) !important;
    }

    :root[data-sm-theme="system"] .premium-topbar .premium-dropdown,
    :root[data-sm-theme="system"] .premium-topbar .premium-dropdown .dropdown-user,
    :root[data-sm-theme="system"] .premium-topbar .premium-dropdown .dw-user-box {
        background: var(--sm-surface-raised) !important;
        color: var(--sm-text) !important;
        border-color: var(--sm-border) !important;
    }

    :root[data-sm-theme="system"] .premium-topbar .premium-dropdown .dropdown-item,
    :root[data-sm-theme="system"] .premium-topbar .premium-dropdown .dropdown-item i,
    :root[data-sm-theme="system"] .premium-topbar .premium-dropdown .dropdown-user h4,
    :root[data-sm-theme="system"] .premium-topbar .premium-dropdown .dropdown-user p {
        color: var(--sm-text) !important;
    }

    :root[data-sm-theme="system"] .premium-topbar .premium-dropdown .dropdown-item:hover,
    :root[data-sm-theme="system"] .premium-topbar .premium-dropdown .dropdown-item:focus {
        background: var(--sm-surface-hover) !important;
        color: var(--sm-primary) !important;
    }

    :root[data-sm-theme="system"] .premium-topbar .profile-pic + .premium-dropdown .dropdown-user > li > a:not(.premium-btn-blue):not(.text-danger) {
        color: var(--sm-text) !important;
    }

    :root[data-sm-theme="system"] .premium-topbar .profile-pic + .premium-dropdown .dropdown-user > li > a:not(.premium-btn-blue):not(.text-danger):hover {
        background: var(--sm-surface-hover);
        color: var(--sm-primary) !important;
    }

    :root[data-sm-theme="system"] #main-top-nav-bar.scrolled,
    :root[data-sm-theme="system"] .premium-topbar .navbar-header {
        background: var(--sm-surface-inverse) !important;
    }

    :root[data-sm-theme="system"] .premium-topbar .navbar-header {
        border-color: var(--sm-border);
    }

    :root[data-sm-theme="system"] .premium-topbar .logo-wrapper .logo-large[src*="L5YJ5J7MA2Z2646E8RM7455WD982FVLF87B72XN5logo-small.jpeg"] {
        object-position: -99999px 0;
        background: url("/storage/logos/app/L5YJ5J7MA2Z2646E8RM7455WD982FVLF87B72XN5logo-small-transparent.png") center / cover no-repeat;
        filter: drop-shadow(0 0 0.6px var(--sm-text)) drop-shadow(0 0 0.6px var(--sm-text));
    }

    :root[data-sm-theme="system"] .premium-topbar .logo-wrapper .logo-small[src*="MF37298922B96369K543LWYVY8B522ECFR49J26Dlogo-small.jpeg"] {
        object-position: -99999px 0;
        background: url("/storage/logos/app/MF37298922B96369K543LWYVY8B522ECFR49J26Dlogo-small-transparent.png") center / contain no-repeat;
        filter: drop-shadow(0 0 0.6px var(--sm-text)) drop-shadow(0 0 0.6px var(--sm-text));
    }

    :root[data-sm-theme="system"] .smart-view-pill {
        background: var(--sm-surface-raised) !important;
        border-color: var(--sm-border) !important;
        color: var(--sm-text) !important;
    }

    :root[data-sm-theme="system"] .smart-view-pill__label {
        color: var(--sm-text) !important;
    }

    :where(:root[data-sm-theme="system"]) strong {
        color: inherit !important;
    }
}

@keyframes sm-table-skeleton-shimmer {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}