/*
 * 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-*).
 */

:root {
    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: #002768;
    --sm-text: #17334a;
    --sm-text-strong: #0f172a;
    --sm-text-muted: #64748b;
    --sm-text-subtle: #8a9aae;
    --sm-text-on-primary: #ffffff;
    --sm-text-inverse: #ffffff;
    --sm-border: #dce5ef;
    --sm-border-strong: #b8c8d9;

    /* Identite et actions */
    --sm-primary: #002768;
    --sm-primary-hover: #001d4f;
    --sm-primary-soft: #e6eef9;
    --sm-primary-tint: rgba(0, 39, 104, 0.08);
    --sm-primary-tint-strong: rgba(0, 39, 104, 0.12);
    --sm-accent: #e8b338;
    --sm-accent-hover: #d79e17;
    --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-soft: #fdecee;
    --sm-info: #1769aa;
    --sm-info-soft: #e8f3fb;

    /* 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(0, 39, 104, 0.22);
    --sm-overlay: rgba(15, 35, 55, 0.46);
}

:root[data-sm-theme="dark"] {
    color-scheme: dark;

    --sm-canvas: #101925;
    --sm-surface: #172332;
    --sm-surface-raised: #1d2b3b;
    --sm-surface-muted: #243548;
    --sm-surface-hover: #203043;
    --sm-surface-selected: #294565;
    --sm-surface-inverse: #0b1624;
    --sm-text: #edf4fb;
    --sm-text-strong: #ffffff;
    --sm-text-muted: #b4c2d2;
    --sm-text-subtle: #8799ac;
    --sm-text-on-primary: #ffffff;
    --sm-text-inverse: #ffffff;
    --sm-border: #31465c;
    --sm-border-strong: #4b637b;

    --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: #f0c85c;
    --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-soft: #4a252d;
    --sm-info: #7dc5fa;
    --sm-info-soft: #183b59;

    --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);
}

/* 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: #101925;
        --sm-surface: #172332;
        --sm-surface-raised: #1d2b3b;
        --sm-surface-muted: #243548;
        --sm-surface-hover: #203043;
        --sm-surface-selected: #294565;
        --sm-surface-inverse: #0b1624;
        --sm-text: #edf4fb;
        --sm-text-strong: #ffffff;
        --sm-text-muted: #b4c2d2;
        --sm-text-subtle: #8799ac;
        --sm-text-on-primary: #ffffff;
        --sm-text-inverse: #ffffff;
        --sm-border: #31465c;
        --sm-border-strong: #4b637b;
        --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: #f0c85c;
        --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-soft: #4a252d;
        --sm-info: #7dc5fa;
        --sm-info-soft: #183b59;
        --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);
    }
}

/* 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) !important;
    color: var(--sm-text-on-primary) !important;
}

:root[data-sm-theme="dark"] .auto-sync-hint-card::before {
    background: var(--sm-primary) !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;
}

: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"] .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"] .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"] .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;
    }
}