/* ============================================================
   Brand override
   - Font: Inter (both modes)
   - Primary: #3B3F8C (both modes)
   - Dark surface: only when body.mode-dark
   - Light/white theme preserved as-is
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
    --brand-primary: #3B3F8C;
    --brand-primary-hover: #2F3372;
    --brand-primary-active: #262960;
    --brand-primary-soft: rgba(59, 63, 140, 0.12);

    /* Portal palette */
    --portal-bg: #F8FAFC;
    --portal-surface: #FFFFFF;
    --portal-border: #E5E7EB;
    --portal-text: #111827;
    --portal-text-muted: #6B7280;

    /* Dark UI base (used by sidebar/topbar even in light mode) */
    --ui-dark: #111827;
    --ui-dark-elev: #1F2937;
    --ui-dark-border: #1F2937;
    --ui-dark-text: #F3F4F6;
    --ui-dark-text-muted: #9CA3AF;
}

body.mode-dark {
    --brand-bg: #0B1220;
    --brand-bg-elev: #111827;
    --brand-bg-card: #1F2937;
    --brand-border: #1F2937;
    --brand-text: #F3F4F6;
    --brand-text-muted: #9CA3AF;
}

/* Portal background — light slate everywhere except dark mode */
html, body { background-color: var(--portal-bg); }
body:not(.mode-dark) { background-color: var(--portal-bg) !important; color: var(--portal-text); }

/* ============================================================
   TYPOGRAPHY (both modes)
   ============================================================ */
html, body,
.font-default,
input, select, textarea, button,
.dataTables_wrapper, .select2-container, .CodeMirror,
.tooltipster-base, .swal2-popup, .modal, .dropdown-menu,
table, .table, .navbar, .sidebar, .card, .alert, .btn {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body { letter-spacing: -0.005em; }

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.page-title h1, .page-title h2,
.headline, .display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    font-family: 'Manrope', 'Inter', sans-serif !important;
    font-weight: 700;
    letter-spacing: -0.018em;
    color: var(--portal-text);
}

/* ============================================================
   PRIMARY COLOR — applied in BOTH light and dark modes
   ============================================================ */
.btn-primary,
.btn-info,
.bg-primary,
button.btn-primary {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
    color: #fff !important;
}
.btn-primary:hover, .btn-info:hover,
.btn-primary:focus, .btn-primary:active, .btn-primary.active,
.btn-info:focus,   .btn-info:active {
    background-color: var(--brand-primary-hover) !important;
    border-color: var(--brand-primary-hover) !important;
    color: #fff !important;
}
.btn-primary:disabled, .btn-primary.disabled {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
    opacity: .55;
}
.btn-outline-primary {
    color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
    background-color: transparent !important;
}
.btn-outline-primary:hover {
    background-color: var(--brand-primary) !important;
    color: #fff !important;
}
.btn-link { color: var(--brand-primary) !important; }
.btn-link:hover { color: var(--brand-primary-hover) !important; }

.text-primary, a.text-primary { color: var(--brand-primary) !important; }
a { color: var(--brand-primary); }
a:hover { color: var(--brand-primary-hover); }

.badge-primary,
.badge.bg-primary {
    background-color: var(--brand-primary) !important;
    color: #fff !important;
}

.nav-tabs .nav-link.active,
.nav-pills .nav-link.active {
    color: var(--brand-primary) !important;
}
.nav-tabs .nav-link:hover { color: var(--brand-primary) !important; }

.progress-bar { background-color: var(--brand-primary) !important; }

.page-item.active .page-link,
.pagination .active a {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
    color: #fff !important;
}

/* Replace legacy teal primary used in Acelle */
[style*="#00838F"] { background-color: var(--brand-primary) !important; color: #fff !important; }
[style*="#006d77"] { background-color: var(--brand-primary-hover) !important; }

.bg-teal,
.bg-teal-400, .bg-teal-500, .bg-teal-600, .bg-teal-700, .bg-teal-800 {
    background-color: var(--brand-primary) !important;
    color: #fff !important;
}
.text-teal,
.text-teal-400, .text-teal-500, .text-teal-600, .text-teal-700, .text-teal-800 {
    color: var(--brand-primary) !important;
}

input[type="checkbox"]:checked,
input[type="radio"]:checked,
.form-check-input:checked {
    accent-color: var(--brand-primary) !important;
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
}

.form-control:focus,
.form-select:focus,
.select2-container--focus .select2-selection,
input:focus, textarea:focus, select:focus {
    border-color: var(--brand-primary) !important;
    box-shadow: 0 0 0 .15rem var(--brand-primary-soft) !important;
}

::selection { background: var(--brand-primary); color: #fff; }

/* ============================================================
   Bootstrap modals (used by Acelle's Dialog class for "Are you sure?",
   "Alert", etc.) — guarantee readable text in BOTH themes.
   ============================================================ */

/* Light theme: white modal with solid dark text */
.modal .modal-content {
    background-color: #ffffff !important;
    color: #1f2330 !important;
    border-color: #e6e8ec !important;
}
.modal .modal-header,
.modal .modal-footer {
    background-color: #ffffff !important;
    border-color: #e6e8ec !important;
}
.modal .modal-title,
.modal .modal-body,
.modal .modal-body p,
.modal .modal-body label,
.modal .modal-header h1,
.modal .modal-header h2,
.modal .modal-header h3,
.modal .modal-header h4,
.modal .modal-header h5,
.modal .modal-header h6 {
    color: #1f2330 !important;
    opacity: 1 !important;
}
.modal .alert-icon,
.modal .material-icons-outlined {
    color: #555 !important;
}
.modal .btn-close {
    filter: none !important;
    opacity: 0.7 !important;
}

/* Dark theme overrides the above with dark surface + light text */
body.mode-dark .modal .modal-content,
.mode-dark .modal .modal-content {
    background-color: #1F2937 !important;
    color: #F3F4F6 !important;
    border-color: #1F2937 !important;
}
body.mode-dark .modal .modal-header,
body.mode-dark .modal .modal-footer,
.mode-dark .modal .modal-header,
.mode-dark .modal .modal-footer {
    background-color: #1F2937 !important;
    border-color: #1F2937 !important;
}
body.mode-dark .modal .modal-title,
body.mode-dark .modal .modal-body,
body.mode-dark .modal .modal-body p,
body.mode-dark .modal .modal-body label,
body.mode-dark .modal .modal-header h1,
body.mode-dark .modal .modal-header h2,
body.mode-dark .modal .modal-header h3,
body.mode-dark .modal .modal-header h4,
body.mode-dark .modal .modal-header h5,
body.mode-dark .modal .modal-header h6,
.mode-dark .modal .modal-title,
.mode-dark .modal .modal-body,
.mode-dark .modal .modal-body p,
.mode-dark .modal .modal-body label,
.mode-dark .modal .modal-header h1,
.mode-dark .modal .modal-header h2,
.mode-dark .modal .modal-header h3,
.mode-dark .modal .modal-header h4,
.mode-dark .modal .modal-header h5,
.mode-dark .modal .modal-header h6 {
    color: #F3F4F6 !important;
    opacity: 1 !important;
}
body.mode-dark .modal .alert-icon,
body.mode-dark .modal .material-icons-outlined,
.mode-dark .modal .alert-icon,
.mode-dark .modal .material-icons-outlined {
    color: #c8c8d0 !important;
}
body.mode-dark .modal .btn-close,
.mode-dark .modal .btn-close {
    filter: invert(1) grayscale(1) !important;
    opacity: 0.8 !important;
}

/* Outlined Material Icons (used by Dialog `alert-icon`) — keep them visible
   while still hiding the raw text node for the swap script. */
.material-icons-outlined {
    font-family: 'Material Icons Outlined', 'Material Icons' !important;
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}

/* ============================================================
   SweetAlert2 popups — readable in both light AND dark mode
   ============================================================ */
.swal2-popup {
    background-color: #ffffff !important;
    color: #1f2330 !important;
    border-radius: 14px !important;
}
.swal2-title,
.swal2-html-container,
.swal2-content {
    color: #1f2330 !important;
}
.swal2-icon-content,
.swal2-icon.swal2-question,
.swal2-icon.swal2-warning,
.swal2-icon.swal2-info,
.swal2-icon.swal2-error,
.swal2-icon.swal2-success {
    color: #555 !important;
}
.swal2-close {
    color: #555 !important;
}
.swal2-actions .swal2-cancel,
.swal2-actions .btn-link,
.swal2-actions a {
    color: var(--brand-primary) !important;
}
.swal2-actions .swal2-confirm {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
    color: #fff !important;
}

/* Dark mode: swap to dark surface so it matches the rest of the UI */
body.mode-dark ~ .swal2-container .swal2-popup,
body.mode-dark .swal2-popup,
.mode-dark .swal2-popup {
    background-color: #1F2937 !important;
    color: #F3F4F6 !important;
}
body.mode-dark .swal2-title,
body.mode-dark .swal2-html-container,
body.mode-dark .swal2-content,
.mode-dark .swal2-title,
.mode-dark .swal2-html-container,
.mode-dark .swal2-content {
    color: #F3F4F6 !important;
}
body.mode-dark .swal2-icon-content,
body.mode-dark .swal2-icon,
body.mode-dark .swal2-close,
.mode-dark .swal2-icon-content,
.mode-dark .swal2-icon,
.mode-dark .swal2-close {
    color: #F3F4F6 !important;
}
body.mode-dark .swal2-input,
body.mode-dark .swal2-textarea,
body.mode-dark .swal2-select,
.mode-dark .swal2-input,
.mode-dark .swal2-textarea,
.mode-dark .swal2-select {
    background-color: #0B1220 !important;
    border-color: #1F2937 !important;
    color: #F3F4F6 !important;
}

/* Brand area: enough vertical room for the larger logo, no clipping.
   Acelle's default margin-top/margin-bottom on .navbar-brand is preserved. */
.leftbar .navbar-brand,
.leftbar:not(.leftbar-closed) .navbar-brand,
.navbar-main .navbar-brand {
    min-height: 60px !important;
    display: flex !important;
    align-items: center !important;
}

/* The actual logo image inside the SIDEBAR brand area only.
   Scoped to .leftbar so other navbars (e.g. .automation-header) keep their
   own logo sizing and don't get a clipped oversized logo. */
.leftbar .navbar-brand .logo,
.leftbar .navbar-brand > img,
.leftbar .navbar-main .navbar-brand img.logo,
.leftbar .navbar-main .navbar-brand .logo,
.leftbar .navbar-main .navbar-brand img {
    height: 70px !important;
    max-height: 70px !important;
    max-width: none !important;   /* override .leftbar .navbar-brand > img { max-width: 120px } */
    width: auto !important;
    object-fit: contain;
    display: block !important;
}

/* Automation editor top bar — its brand area is 55px tall; constrain the
   logo so it never gets clipped by my sidebar logo rule above. */
.automation-header .navbar-brand.left-logo {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.automation-header .navbar-brand.left-logo img,
.automation-header .navbar-brand img.logo,
.automation-header .navbar-brand .logo {
    height: 32px !important;
    max-height: 32px !important;
    width: auto !important;
    max-width: 140px !important;
    object-fit: contain;
    display: block !important;
}

/* Lift the bottom group (Activities + notifications + user) off the bottom edge
   without changing Acelle's existing block layout. */
.leftbar .navbar-main .navbar-right,
.leftbar:not(.leftbar-closed) .navbar-main .navbar-right {
    padding-bottom: 16px !important;
}

/* Hide raw icon name text while the swap script runs */
.material-symbols-rounded,
.material-icons {
    font-size: 0 !important;
    line-height: 1 !important;
    color: transparent !important;
}

/* Inherit color and sizing for swapped Font Awesome icons */
i.fas, i.fa, i.far, i.fab {
    color: inherit;
    line-height: 1;
}

/* Page heading icon (e.g. campaigns/lists/templates page title) — only
   when it has been swapped to a Font Awesome <i>. We deliberately do NOT
   override .material-symbols-rounded here because that would un-hide
   un-swapped icons and reveal "tofu" / missing-glyph boxes. */
.page-title h1 i.fas,
.page-title h1 i.fa,
.page-title h1 i.far,
.page-title h1 i.fab,
.page-title h2 i.fas,
.page-title h3 i.fas {
    font-size: 22px !important;
    line-height: 1 !important;
    color: var(--brand-primary) !important;
    margin-right: 10px !important;
    display: inline-block !important;
    vertical-align: -2px !important;
    opacity: 1 !important;
}

/* ============================================================
   SIDEBAR + TOP NAVBAR — always dark, even in light/white theme
   ============================================================ */
.sidebar,
.sidebar-main,
.sidebar-light,
.sidebar-dark,
.sidebar-secondary,
.navbar,
.navbar-light,
.navbar-dark,
.navbar-expand,
.navbar-expand-md,
.navbar-expand-lg,
.page-header,
.page-header-content,
.page-header-light,
.page-header-dark,
.header-elements,
.top-navbar,
.topbar {
    background-color: #64748B !important;
    border-color: #475569 !important;
    color: #F1F5F9 !important;
}

/* Light text inside dark navbar/sidebar/page-header — but NOT for elements
   that already have their own button/badge color (.btn, .badge), otherwise
   we end up with white text on white buttons. */
.sidebar a:not(.btn):not(.badge),
.sidebar .nav-link,
.sidebar .nav-item > a:not(.btn),
.sidebar .nav-item-header,
.sidebar .sidebar-section-header,
.sidebar .sidebar-user-material .media-title,
.sidebar .sidebar-user-material .text-muted,
.navbar a:not(.btn):not(.badge),
.navbar .nav-link,
.navbar-brand,
.navbar-text,
.page-header a:not(.btn):not(.badge),
.page-header .breadcrumb a,
.page-header .breadcrumb-item,
.page-header .breadcrumb-item.active,
.page-header h1, .page-header h2, .page-header h3,
.page-header h4, .page-header h5, .page-header h6,
.page-header .text-muted {
    color: #F3F4F6 !important;
}

/* Buttons inside a dark navbar keep their own colors */
.navbar .btn-default,
.navbar .btn-default span,
.navbar a.btn-default,
.navbar a.btn-default span {
    color: #000 !important;
}
.navbar .btn-primary,
.navbar .btn-primary span,
.navbar .btn-secondary,
.navbar .btn-secondary span {
    color: #fff !important;
}

.sidebar .nav-link i,
.sidebar .nav-link svg,
.sidebar .nav-link .material-symbols-rounded,
.sidebar .nav-link .navbar-icon svg path,
.sidebar .nav-link .navbar-icon svg .st0,
.navbar .nav-link i,
.navbar .nav-link svg,
.navbar .nav-link .material-symbols-rounded,
.navbar .navbar-icon svg path,
.navbar .navbar-icon svg .st0,
.page-header .material-symbols-rounded,
.page-header i {
    color: #F3F4F6 !important;
    fill: #F3F4F6 !important;
}

.sidebar .nav-link:hover,
.sidebar .nav-link.active,
.sidebar .nav-item.active > a,
.navbar .nav-link:hover,
.navbar .nav-link.active,
.navbar .nav-item.active > a {
    background-color: #3B3F8C !important;
    color: #FFFFFF !important;
}

.sidebar .nav-link:hover i,
.sidebar .nav-link:hover svg,
.sidebar .nav-link:hover svg path,
.sidebar .nav-link:hover svg .st0,
.sidebar .nav-link.active i,
.sidebar .nav-link.active svg,
.sidebar .nav-link.active svg path,
.sidebar .nav-link.active svg .st0,
.navbar .nav-link:hover i,
.navbar .nav-link:hover svg,
.navbar .nav-link:hover svg path,
.navbar .nav-link:hover svg .st0,
.navbar .nav-link.active i,
.navbar .nav-link.active svg,
.navbar .nav-link.active svg path,
.navbar .nav-link.active svg .st0 {
    color: #FFFFFF !important;
    fill: #FFFFFF !important;
}

.sidebar hr,
.sidebar .border,
.sidebar .border-top,
.sidebar .border-bottom,
.navbar hr,
.page-header hr,
.page-header .border,
.page-header .border-bottom {
    border-color: #475569 !important;
}

.sidebar .sidebar-section-body,
.sidebar .nav-group-sub {
    background-color: #64748B !important;
}

/* Dropdown menus that hang off the dark navbar */
.navbar .dropdown-menu,
.page-header .dropdown-menu {
    background-color: #475569 !important;
    border-color: #475569 !important;
    color: #F3F4F6 !important;
}
.navbar .dropdown-menu .dropdown-item,
.page-header .dropdown-menu .dropdown-item {
    color: #F3F4F6 !important;
}
.navbar .dropdown-menu .dropdown-item:hover,
.page-header .dropdown-menu .dropdown-item:hover {
    background-color: #3B3F8C !important;
    color: #FFFFFF !important;
}

/* User profile dropdown (top-right) — Velora secondary, both modes */
.top-user-menus,
.top-user-menus li,
.top-user-menus .dropdown-item {
    background-color: #64748B !important;
    color: #F1F5F9 !important;
}
.top-user-menus .backdrop,
.top-user-menus .backdrop-backend,
.top-user-menus .backdrop-frontend {
    background-color: #64748B !important;
    background-image: none !important;
}
.top-user-menus a,
.top-user-menus .user-menu-titles a,
.top-user-menus .user-menu-titles p,
.top-user-menus .fs-6,
.top-user-menus .fw-600,
.top-user-menus .dropdown-item {
    color: #F3F4F6 !important;
}
.top-user-menus .text-muted,
.top-user-menus .small.text-muted {
    color: #9CA3AF !important;
}
.top-user-menus .dropdown-item:hover,
.top-user-menus li:hover .dropdown-item {
    background-color: #3B3F8C !important;
    color: #FFFFFF !important;
}
.top-user-menus .dropdown-item i,
.top-user-menus .dropdown-item svg,
.top-user-menus .dropdown-item svg path,
.top-user-menus .dropdown-item svg .st0,
.top-user-menus .navbar-icon svg path,
.top-user-menus .navbar-icon svg .st0 {
    color: #F3F4F6 !important;
    fill: #F3F4F6 !important;
}
.top-user-menus .dropdown-item:hover i,
.top-user-menus .dropdown-item:hover svg,
.top-user-menus .dropdown-item:hover svg path,
.top-user-menus .dropdown-item:hover svg .st0 {
    color: #FFFFFF !important;
    fill: #FFFFFF !important;
}
.top-user-menus .divider,
.top-user-menus li.divider,
.top-user-menus .border-bottom {
    background-color: rgba(255,255,255,0.12) !important;
    border-color: rgba(255,255,255,0.12) !important;
}

/* Search inputs in topbar */
.navbar input,
.navbar .form-control,
.page-header input,
.page-header .form-control {
    background-color: #334155 !important;
    border-color: #475569 !important;
    color: #F3F4F6 !important;
}
.navbar input::placeholder,
.page-header input::placeholder {
    color: #9CA3AF !important;
}

/* ============================================================
   DARK SURFACE — ONLY when body has mode-dark
   ============================================================ */
body.mode-dark {
    background-color: var(--brand-bg) !important;
    color: var(--brand-text) !important;
}

body.mode-dark .content-wrapper,
body.mode-dark .page-content,
body.mode-dark .content,
body.mode-dark main {
    background-color: var(--brand-bg) !important;
}

body.mode-dark .card,
body.mode-dark .panel,
body.mode-dark .box,
body.mode-dark .list-group-item,
body.mode-dark .modal-content,
body.mode-dark .dropdown-menu,
body.mode-dark .popover,
body.mode-dark .tooltipster-sidetip .tooltipster-box {
    background-color: var(--brand-bg-card) !important;
    border-color: var(--brand-border) !important;
    color: var(--brand-text) !important;
}

body.mode-dark .card-header,
body.mode-dark .modal-header,
body.mode-dark .modal-footer,
body.mode-dark .panel-heading {
    background-color: var(--brand-bg-elev) !important;
    border-color: var(--brand-border) !important;
    color: var(--brand-text) !important;
}

body.mode-dark .navbar,
body.mode-dark .navbar-light,
body.mode-dark .navbar-expand-md,
body.mode-dark .page-header,
body.mode-dark .sidebar,
body.mode-dark .sidebar-dark,
body.mode-dark .sidebar-light,
body.mode-dark .sidebar-main {
    background-color: var(--brand-bg-elev) !important;
    border-color: var(--brand-border) !important;
    color: var(--brand-text) !important;
}

body.mode-dark .sidebar a,
body.mode-dark .sidebar .nav-link,
body.mode-dark .navbar .nav-link {
    color: var(--brand-text) !important;
}

body.mode-dark .sidebar .nav-link:hover,
body.mode-dark .sidebar .nav-link.active,
body.mode-dark .navbar .nav-link:hover {
    background-color: var(--brand-primary-soft) !important;
    color: var(--brand-primary) !important;
}

body.mode-dark hr,
body.mode-dark .border,
body.mode-dark .border-top, body.mode-dark .border-bottom,
body.mode-dark .border-left, body.mode-dark .border-right {
    border-color: var(--brand-border) !important;
}

body.mode-dark .table,
body.mode-dark table.dataTable {
    color: var(--brand-text) !important;
    background-color: transparent !important;
}
body.mode-dark .table th,
body.mode-dark table.dataTable thead th {
    background-color: var(--brand-bg-elev) !important;
    color: var(--brand-text) !important;
    border-color: var(--brand-border) !important;
}
body.mode-dark .table td,
body.mode-dark table.dataTable tbody td {
    background-color: transparent !important;
    border-color: var(--brand-border) !important;
    color: var(--brand-text) !important;
}
body.mode-dark .table tbody tr:hover,
body.mode-dark table.dataTable tbody tr:hover {
    background-color: rgba(255,255,255,0.03) !important;
}

body.mode-dark .form-control,
body.mode-dark .form-select,
body.mode-dark .select2-selection,
body.mode-dark .select2-selection--single,
body.mode-dark .select2-selection--multiple,
body.mode-dark input[type="text"],
body.mode-dark input[type="email"],
body.mode-dark input[type="password"],
body.mode-dark input[type="number"],
body.mode-dark input[type="search"],
body.mode-dark input[type="url"],
body.mode-dark input[type="date"],
body.mode-dark input[type="time"],
body.mode-dark input[type="datetime-local"],
body.mode-dark textarea,
body.mode-dark select {
    background-color: var(--brand-bg-elev) !important;
    border-color: var(--brand-border) !important;
    color: var(--brand-text) !important;
}
body.mode-dark .form-control::placeholder { color: var(--brand-text-muted) !important; }
body.mode-dark label, body.mode-dark .form-label { color: var(--brand-text) !important; }

body.mode-dark .btn-secondary {
    background-color: var(--brand-bg-elev) !important;
    border-color: var(--brand-border) !important;
    color: var(--brand-text) !important;
}
body.mode-dark .btn-secondary:hover {
    background-color: var(--brand-bg-card) !important;
    border-color: var(--brand-primary) !important;
    color: var(--brand-primary) !important;
}

body.mode-dark .progress { background-color: var(--brand-bg-elev) !important; }

body.mode-dark .page-link {
    background-color: var(--brand-bg-elev) !important;
    border-color: var(--brand-border) !important;
    color: var(--brand-text) !important;
}
body.mode-dark .page-link:hover {
    background-color: var(--brand-primary-soft) !important;
    color: var(--brand-primary) !important;
}

body.mode-dark pre, body.mode-dark code,
body.mode-dark kbd, body.mode-dark samp {
    background-color: var(--brand-bg-elev) !important;
    color: var(--brand-text) !important;
    border-color: var(--brand-border) !important;
}

body.mode-dark .alert {
    background-color: var(--brand-bg-elev);
    border-color: var(--brand-border);
    color: var(--brand-text);
}
body.mode-dark .alert-success { border-left: 3px solid #22c55e; }
body.mode-dark .alert-danger,
body.mode-dark .alert-error  { border-left: 3px solid #ef4444; }
body.mode-dark .alert-warning { border-left: 3px solid #f59e0b; }
body.mode-dark .alert-info    { border-left: 3px solid var(--brand-primary); }

body.mode-dark ::-webkit-scrollbar { width: 10px; height: 10px; }
body.mode-dark ::-webkit-scrollbar-track { background: var(--brand-bg); }
body.mode-dark ::-webkit-scrollbar-thumb { background: var(--brand-border); border-radius: 6px; }
body.mode-dark ::-webkit-scrollbar-thumb:hover { background: var(--brand-primary); }