/* Visitr dark navy CMS theme.
   Loads last (see layout/_head.blade.php); overrides StartUI/Bootstrap light surfaces.
   Palette + chrome vars. */
:root {
    --vt-navy: #0A0F1C;
    --vt-navy-2: #0C1120;
    --vt-surface: #141B30;
    --vt-surface-2: #1C2440;
    --vt-border: rgba(255, 255, 255, .07);
    --vt-text: #E8ECF4;
    --vt-text-muted: #8B93AD;
    --vt-brand: #4B4DED;
    --vt-brand-light: #8F90FF;
    --vt-accent: #31D0AA;
}

/* ===== Base type scale =====
   Slightly smaller UI text overall (~1pt): the StartUI template sizes most
   type in rem off html, so shrinking the root scales the whole dashboard. */
html {
    font-size: 93.75%; /* 15px */
}

/* ===== Brand (both modes) ===== */
.dashboard .side-menu-list li.active a {
    background-color: var(--vt-brand);
    color: #fff !important;
    border-radius: 0;
}
.dashboard .side-menu-list li.active i,
.dashboard .side-menu-list li.active span {
    color: #fff;
}
.dashboard .side-menu-list li.active .current-menu-border {
    display: none;
}
.dashboard .side-menu-list li.active {
    font-weight: 700;
}
.dashboard__header__content .logo {
    height: 38px;
    width: auto;
}
.dashboard__header__content .logo-for-dark {
    display: none;
}
html[data-theme="dark"] .dashboard__header__content .logo {
    display: none;
}
html[data-theme="dark"] .dashboard__header__content .logo-for-dark {
    display: inline;
    height: 38px;
    width: auto;
}

/* Icon-only logo: only shown while the nav is wrapped (narrow sidebar) */
.dashboard__header__content .logo-icon,
.dashboard__header__content .logo-icon-for-dark {
    display: none;
}

/* Wrapped nav (media query lives in app.css): swap the wordmark for the
   icon-only logo, and center logo + menu icons in the 64px rail.
   The template expands the rail on :hover — the collapsed-state fixes are
   scoped with :not(:hover) so the expanded hover layout keeps its design. */
@media screen and (max-width: 1650px) {
    .dashboard {
        grid-template-columns: 64px 1fr !important;
    }
    .dashboard__header__content {
        justify-content: center;
        padding-left: 0;
    }
    /* The base template keeps these at 280px (!important), which pushes
       centered content out of the narrow rail. */
    .dashboard__nav:not(:hover),
    .dashboard__nav:not(:hover) .dashboard__navbar,
    .dashboard__nav:not(:hover) .container-fluid,
    .dashboard__nav:not(:hover) .side-menu-list li {
        width: 64px !important;
    }
    .dashboard__header__content .logo,
    html[data-theme="dark"] .dashboard__header__content .logo,
    .dashboard__header__content .logo-for-dark,
    html[data-theme="dark"] .dashboard__header__content .logo-for-dark {
        display: none;
    }
    /* Expanded rail (hover) shows the full wordmark again */
    .dashboard__nav:hover .dashboard__header__content .logo {
        display: inline;
    }
    .dashboard__nav:hover .dashboard__header__content .logo-for-dark {
        display: none;
    }
    html[data-theme="dark"] .dashboard__nav:hover .dashboard__header__content .logo {
        display: none;
    }
    html[data-theme="dark"] .dashboard__nav:hover .dashboard__header__content .logo-for-dark {
        display: inline;
    }
    .dashboard__header__content .logo-icon {
        display: inline;
        height: 38px;
        width: auto;
    }
    html[data-theme="dark"] .dashboard__header__content .logo-icon {
        display: none;
    }
    html[data-theme="dark"] .dashboard__header__content .logo-icon-for-dark {
        display: inline;
        height: 38px;
        width: auto;
    }
    .dashboard__nav:hover .dashboard__header__content .logo-icon,
    .dashboard__nav:hover .dashboard__header__content .logo-icon-for-dark {
        display: none;
    }
    /* Base style pads links 40px left; in the rail the icons must be centered */
    .dashboard__nav:not(:hover) .side-menu-list li {
        margin: 0 auto;
        text-align: center;
    }
    .dashboard__nav:not(:hover) .side-menu-list li > a span {
        display: none;
    }
    .dashboard__nav:not(:hover) .side-menu-list li > a {
        display: flex !important;
        justify-content: center;
        padding-left: 8px !important;
    }
    .dashboard__nav:not(:hover) .side-menu-list li > a i {
        margin-right: 0;
    }
    /* Logout: same rail width, icon centered, label hidden */
    .dashboard__nav:not(:hover) .dashboard__logout {
        width: 64px;
    }
    .dashboard__nav:not(:hover) .dashboard__logout #logout-btn {
        display: flex;
        justify-content: center;
        width: 100%;
    }
    .dashboard__nav:not(:hover) .dashboard__logout #logout-btn span {
        display: none;
    }
    /* Separators: small and centered in the rail, collapsed and on hover */
    .dashboard__nav hr {
        width: 24px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    /* Below the hamburger breakpoint both the icon logo and the toggle must
       share the 64px rail — shrink paddings and logo so both fit. */
    .dashboard__header__content > a {
        flex-shrink: 0;
    }
    @media screen and (max-width: 767px) {
        .dashboard__nav .container-fluid {
            padding-left: 4px;
            padding-right: 4px;
        }
        .dashboard__header__content .logo-icon,
        html[data-theme="dark"] .dashboard__header__content .logo-icon-for-dark {
            height: 24px;
        }
        .dashboard__header__content .bars-wrapper i {
            padding: 4px;
        }
    }
}

/* Refined dashboard type scale (root stays 15px): sidebar and chrome
   read one step lighter for a more modern feel. */
.dashboard .side-menu-list li a,
.dashboard .side-menu-list li a span {
    font-size: 13.5px;
}
.dashboard .side-menu-list li a i {
    font-size: 15px;
}
.dashboard .section-header .title {
    font-size: 20px;
    padding: 12px 38px 12px 26px;
}
.dashboard .form-control,
.dashboard select.form-control,
.dashboard input.form-control {
    font-size: 14px;
}

/* Sidebar alignment: every link is a flex row with a fixed 20px icon
   column, so icons and labels line up regardless of glyph width. */
.dashboard .side-menu-list li > a {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 11px 8px 11px 26px !important;
}
.dashboard .side-menu-list li > a > i {
    display: inline-flex;
    justify-content: center;
    flex-shrink: 0;
    width: 18px;
    font-size: 13px;
    margin-right: 0 !important;
}
/* Form items (location/team selectors): pin the control to the text column */
.dashboard .side-menu-list li.form-li > a > span.form-box {
    left: 56px; /* 26 padding + 20 icon + 10 gap */
    width: calc(100% - 64px);
}
/* Logout matches the menu rhythm */
.dashboard__logout #logout-btn {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    padding: 11px 8px 11px 26px !important;
    font-size: 13.5px;
}
.dashboard__logout #logout-btn i {
    display: inline-flex;
    justify-content: center;
    width: 18px;
    font-size: 13px;
}

/* Dashboard topbar: theme switch + language select, pinned to the page's
   top-right (same band as the sidebar logo, above the main content). */
.dashboard-topbar {
    align-items: center;
    display: flex;
    gap: 12px;
    position: absolute;
    right: 28px;
    top: 34px;
    z-index: 1001;
}
.dashboard-lang-select {
    appearance: none;
    background-color: rgba(255, 255, 255, .95);
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-position: right 10px center;
    background-repeat: no-repeat;
    background-size: 16px;
    border: 1px solid rgba(0, 0, 0, .1);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .05);
    color: #333;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    height: 32px;
    line-height: 30px;
    padding: 0 36px 0 14px;
}
html[data-theme="dark"] .dashboard-lang-select {
    background-color: var(--vt-navy-2);
    border-color: var(--vt-border);
    box-shadow: none;
    color: #fff;
}
.section-header .title h3,
.section-header h3.title,
header.section-header .title,
.tbl-cell-title h3,
.auth .form-box .title {
    font-family: 'Fraunces', Georgia, serif;
    letter-spacing: -0.01em;
}

/* ===== 1. Chrome ===== */
html[data-theme="dark"] body {
    background-color: var(--vt-navy-2);
    color: var(--vt-text);
}
html[data-theme="dark"] #app.dashboard {
    background-color: var(--vt-navy-2);
    color: var(--vt-text);
}
html[data-theme="dark"] .dashboard__main {
    background-color: var(--vt-navy-2);
}
html[data-theme="dark"] .dashboard__main__content {
    /* transparent so the atlas grid + brand glows on .dashboard__main show through */
    background-color: transparent;
}
html[data-theme="dark"] .dashboard__header {
    background-color: transparent;
    border-bottom: none;
    box-shadow: none;
}
html[data-theme="dark"] .dashboard__nav {
    background-color: #0A1826;
    box-shadow: none;
}

/* Modern dashboard backdrop: faint atlas grid + brand glows.
   Replaces the obsolete subtract-bg-top/bottom PNGs (set with !important
   in _main.scss), so these need !important too. */
.dashboard .dashboard__main {
    background-image:
        linear-gradient(rgba(8, 25, 43, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(8, 25, 43, .05) 1px, transparent 1px),
        radial-gradient(52rem 40rem at 88% -12%, rgba(75, 77, 237, .24), transparent 65%),
        radial-gradient(44rem 36rem at -12% 112%, rgba(49, 208, 170, .20), transparent 65%) !important;
    background-size: 42px 42px, 42px 42px, auto, auto !important;
    background-repeat: repeat, repeat, no-repeat, no-repeat !important;
    background-position: 0 0, 0 0, right top, left bottom !important;
}
html[data-theme="dark"] .dashboard__main {
    background-image:
        linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px),
        radial-gradient(52rem 40rem at 88% -12%, rgba(75, 77, 237, .32), transparent 65%),
        radial-gradient(44rem 36rem at -12% 112%, rgba(49, 208, 170, .20), transparent 65%) !important;
}
html[data-theme="dark"] .dashboard__nav,
html[data-theme="dark"] .dashboard__nav a {
    color: rgba(220, 230, 238, .7);
}
html[data-theme="dark"] .dashboard__nav i {
    color: var(--vt-text-muted);
}
html[data-theme="dark"] .dashboard__nav hr {
    border-top-color: var(--vt-border) !important;
    opacity: 1 !important;
}
html[data-theme="dark"] .dashboard__nav .text-center small,
html[data-theme="dark"] .dashboard__nav small {
    color: var(--vt-text-muted);
}
html[data-theme="dark"] .dashboard .side-menu-list a {
    color: rgba(220, 230, 238, .7);
}
html[data-theme="dark"] .side-menu-list li a:hover,
html[data-theme="dark"] .side-menu-list .with-sub:hover,
html[data-theme="dark"] .side-menu-list .with-sub:hover i,
html[data-theme="dark"] .side-menu-list .with-sub:hover span {
    background-color: var(--vt-surface-2);
    color: var(--vt-text);
}
html[data-theme="dark"] .dashboard__logout #logout-btn {
    color: var(--vt-text-muted);
}
html[data-theme="dark"] .dashboard__logout #logout-btn:hover,
html[data-theme="dark"] .dashboard__logout #logout-btn:hover i {
    color: var(--vt-accent);
}
html[data-theme="dark"] .tbl-cell-title h1,
html[data-theme="dark"] .tbl-cell-title h2,
html[data-theme="dark"] .tbl-cell-title h3,
html[data-theme="dark"] .box-typical .box-typical-header .tbl-cell.tbl-cell-title h1,
html[data-theme="dark"] .box-typical .box-typical-header .tbl-cell.tbl-cell-title h2,
html[data-theme="dark"] .box-typical .box-typical-header .tbl-cell.tbl-cell-title h3 {
    color: #fff;
}

/* ===== 2. Cards / panels ===== */
html[data-theme="dark"] .box-typical,
html[data-theme="dark"] .dashboard__box,
html[data-theme="dark"] .tabs-section > .tab-content:not(.no-styled),
html[data-theme="dark"] .widget-tabs-content {
    background-color: var(--vt-surface);
    border: 1px solid var(--vt-border);
    border-radius: 8px;
}
html[data-theme="dark"] .box-typical {
    border: 1px solid var(--vt-border);
    border-radius: 8px;
}
html[data-theme="dark"] .box-typical .box-typical-header.box-typical-header-bordered,
html[data-theme="dark"] .box-typical .box-typical-header-sm.bordered {
    border-bottom-color: var(--vt-border);
}
html[data-theme="dark"] .box-typical .box-typical-footer {
    background-color: var(--vt-navy-2);
    border-top-color: var(--vt-border);
}
html[data-theme="dark"] .dashboard__box__title {
    border-bottom-color: var(--vt-border);
    color: #fff;
}

/* ===== 3. Tables ===== */
html[data-theme="dark"] .table,
html[data-theme="dark"] .bootstrap-table .table,
html[data-theme="dark"] .fixed-table-body .table {
    background-color: transparent;
    color: var(--vt-text);
}
html[data-theme="dark"] .table thead th,
html[data-theme="dark"] .bootstrap-table .table thead th,
html[data-theme="dark"] .fixed-table-body .table thead th,
html[data-theme="dark"] .tbl-typical th {
    background-color: rgba(255, 255, 255, .04);
    border-bottom: none;
    color: var(--vt-text-muted);
    font-size: .8125rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}
html[data-theme="dark"] .table td,
html[data-theme="dark"] .table th,
html[data-theme="dark"] .bootstrap-table .table td,
html[data-theme="dark"] .bootstrap-table .table th,
html[data-theme="dark"] .fixed-table-body .table td,
html[data-theme="dark"] .fixed-table-body .table th {
    border-top-color: var(--vt-border);
}
html[data-theme="dark"] .bootstrap-table .table td,
html[data-theme="dark"] .bootstrap-table .table > thead > tr > th {
    border-top-color: var(--vt-border) !important;
}
html[data-theme="dark"] .table-bordered td,
html[data-theme="dark"] .table-bordered th {
    border-color: var(--vt-border) !important;
}
html[data-theme="dark"] .table-hover tbody tr:hover {
    background-color: rgba(75, 77, 237, .08);
    color: var(--vt-text);
}
html[data-theme="dark"] .table-striped tbody tr:nth-of-type(even) {
    background-color: rgba(255, 255, 255, .02);
}
html[data-theme="dark"] .table .table-date,
html[data-theme="dark"] .table .table-icon-cell {
    color: var(--vt-text-muted);
}
html[data-theme="dark"] .table a {
    color: var(--vt-accent);
    border-bottom-color: rgba(49, 208, 170, .4);
}
html[data-theme="dark"] .table a:hover {
    border-bottom-color: transparent;
}
html[data-theme="dark"] .action-table {
    color: var(--vt-accent);
}
html[data-theme="dark"] .dashboard .box-typical .action-table:hover i {
    color: var(--vt-accent) !important;
}
html[data-theme="dark"] .tbl-typical tr:nth-child(even) td {
    background: rgba(255, 255, 255, .02);
}

/* ===== 4. Forms ===== */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] select.form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] .custom-select,
html[data-theme="dark"] .select2-container--bootstrap .select2-selection {
    background-color: var(--vt-navy-2);
    border-color: var(--vt-border);
    color: #fff;
}
html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] select.form-control:focus,
html[data-theme="dark"] .custom-select:focus,
html[data-theme="dark"] .form-select:focus,
html[data-theme="dark"] .select2-container--bootstrap.select2-container--focus .select2-selection,
html[data-theme="dark"] .select2-container--bootstrap.select2-container--open .select2-selection {
    background-color: var(--vt-navy-2);
    border-color: var(--vt-brand);
    box-shadow: 0 0 0 .2rem rgba(75, 77, 237, .25);
    color: #fff;
}
html[data-theme="dark"] .form-control::placeholder {
    color: var(--vt-text-muted);
}
html[data-theme="dark"] .form-control:disabled,
html[data-theme="dark"] .form-control[readonly],
html[data-theme="dark"] .custom-select:disabled {
    background-color: var(--vt-surface);
    color: var(--vt-text-muted);
}
html[data-theme="dark"] .input-group-text {
    background-color: var(--vt-surface-2);
    border-color: var(--vt-border);
    color: var(--vt-text-muted);
}
html[data-theme="dark"] .dashboard label,
html[data-theme="dark"] .section-form-tabs label {
    color: var(--vt-text);
}
html[data-theme="dark"] .custom-select {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5'%3E%3Cpath fill='%238CA3B8' d='M2 0 0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E");
}

/* ===== 5. Buttons ===== */
html[data-theme="dark"] .btn-primary {
    background-color: var(--vt-brand);
    border-color: var(--vt-brand);
    color: #fff;
}
html[data-theme="dark"] .btn-primary:hover,
html[data-theme="dark"] .btn-primary:focus,
html[data-theme="dark"] .btn-primary:not(:disabled):not(.disabled).active,
html[data-theme="dark"] .btn-primary:not(:disabled):not(.disabled):active,
html[data-theme="dark"] .show > .btn-primary.dropdown-toggle {
    background-color: #3b3de0;
    border-color: #3b3de0;
    color: #fff;
}
html[data-theme="dark"] .btn-primary:focus,
html[data-theme="dark"] .btn-primary:not(:disabled):not(.disabled).active:focus,
html[data-theme="dark"] .btn-primary:not(:disabled):not(.disabled):active:focus,
html[data-theme="dark"] .show > .btn-primary.dropdown-toggle:focus {
    box-shadow: 0 0 0 .2rem rgba(75, 77, 237, .35);
}
html[data-theme="dark"] .btn-secondary {
    background-color: var(--vt-surface-2);
    border-color: var(--vt-border);
    color: var(--vt-text);
}
html[data-theme="dark"] .btn-secondary:hover,
html[data-theme="dark"] .btn-secondary:focus,
html[data-theme="dark"] .btn-secondary:not(:disabled):not(.disabled).active,
html[data-theme="dark"] .btn-secondary:not(:disabled):not(.disabled):active,
html[data-theme="dark"] .show > .btn-secondary.dropdown-toggle {
    background-color: #1d3f5e;
    border-color: var(--vt-border);
    color: #fff;
}
html[data-theme="dark"] .btn-light {
    background-color: var(--vt-surface-2);
    border-color: var(--vt-border);
    color: var(--vt-text);
}
html[data-theme="dark"] .btn-light:hover,
html[data-theme="dark"] .btn-light:focus,
html[data-theme="dark"] .btn-light:not(:disabled):not(.disabled).active,
html[data-theme="dark"] .btn-light:not(:disabled):not(.disabled):active,
html[data-theme="dark"] .show > .btn-light.dropdown-toggle {
    background-color: #1d3f5e;
    border-color: var(--vt-border);
    color: #fff;
}
html[data-theme="dark"] .btn-outline-primary {
    border-color: var(--vt-brand-light);
    color: var(--vt-brand-light);
}
html[data-theme="dark"] .btn-outline-primary:hover,
html[data-theme="dark"] .btn-outline-primary:not(:disabled):not(.disabled).active,
html[data-theme="dark"] .btn-outline-primary:not(:disabled):not(.disabled):active,
html[data-theme="dark"] .show > .btn-outline-primary.dropdown-toggle {
    background-color: var(--vt-brand);
    border-color: var(--vt-brand);
    color: #fff;
}
html[data-theme="dark"] .btn-outline-secondary {
    border-color: var(--vt-accent);
    color: var(--vt-accent);
}
html[data-theme="dark"] .btn-outline-secondary:hover,
html[data-theme="dark"] .btn-outline-secondary:not(:disabled):not(.disabled).active,
html[data-theme="dark"] .btn-outline-secondary:not(:disabled):not(.disabled):active,
html[data-theme="dark"] .show > .btn-outline-secondary.dropdown-toggle {
    background-color: var(--vt-accent);
    border-color: var(--vt-accent);
    color: var(--vt-navy);
}

/* ===== 6. Tabs ===== */
html[data-theme="dark"] .nav-pills .nav-link {
    color: var(--vt-text-muted);
    border-radius: 50rem;
}
html[data-theme="dark"] .nav-pills .nav-link:hover {
    background-color: var(--vt-surface-2);
    color: var(--vt-text);
}
html[data-theme="dark"] .nav-pills .nav-link.active,
html[data-theme="dark"] .nav-pills .show > .nav-link,
html[data-theme="dark"] .dashboard .section-form-tabs .nav-pills .nav-item .nav-link.active,
html[data-theme="dark"] .dashboard .section-form-tabs .nav-pills .nav-item .active {
    background-color: var(--vt-brand);
    box-shadow: none;
    color: #fff;
}
html[data-theme="dark"] .dashboard .section-form-tabs .nav-pills .nav-item a {
    color: var(--vt-text-muted);
}
html[data-theme="dark"] .nav-tabs {
    border-bottom-color: var(--vt-border);
}
html[data-theme="dark"] .nav-tabs .nav-link {
    color: var(--vt-text-muted);
}
html[data-theme="dark"] .nav-tabs .nav-link:focus,
html[data-theme="dark"] .nav-tabs .nav-link:hover {
    border-color: var(--vt-surface-2) var(--vt-surface-2) var(--vt-border);
    color: var(--vt-text);
}
html[data-theme="dark"] .nav-tabs .nav-item.show .nav-link,
html[data-theme="dark"] .nav-tabs .nav-link.active,
html[data-theme="dark"] .tab-panel-languages .nav-link.active {
    background-color: var(--vt-surface);
    border-color: var(--vt-border) var(--vt-border) var(--vt-surface);
    color: #fff;
}
html[data-theme="dark"] .dashboard .section-form-tabs .nav-tabs .nav-item .nav-link {
    background-color: var(--vt-surface-2);
    color: var(--vt-text-muted);
}
html[data-theme="dark"] .dashboard .section-form-tabs .nav-tabs .nav-item .nav-link:hover {
    background-color: #1d3f5e;
}
html[data-theme="dark"] .dashboard .section-form-tabs .nav-tabs .nav-item .active {
    background-color: var(--vt-surface) !important;
    border-bottom-color: var(--vt-surface);
    box-shadow: none;
    color: #fff;
}
html[data-theme="dark"] .tabs-section-nav {
    border-top-color: var(--vt-border);
}
html[data-theme="dark"] .tabs-section-nav .nav-item {
    background-color: rgba(255, 255, 255, .03);
}
html[data-theme="dark"] .tabs-section-nav .nav-link {
    color: var(--vt-text-muted);
}
html[data-theme="dark"] .tabs-section-nav .nav-link.active {
    background-color: var(--vt-surface);
    color: #fff;
}
html[data-theme="dark"] .tabs-section-nav .nav-link.active .nav-link-in {
    border-top-color: var(--vt-brand);
}
html[data-theme="dark"] .dashboard .section-form-tabs .vertical-divider {
    border-left-color: rgba(255, 255, 255, .12);
}

/* ===== 7. Floating components ===== */
html[data-theme="dark"] .modal-content {
    background-color: var(--vt-surface);
    border-color: var(--vt-border);
}
html[data-theme="dark"] .modal-header {
    border-bottom-color: var(--vt-border);
}
html[data-theme="dark"] .modal-footer {
    border-top-color: var(--vt-border);
}
html[data-theme="dark"] .modal-title,
html[data-theme="dark"] .close {
    color: #fff;
}
html[data-theme="dark"] .dropdown-menu {
    background-color: var(--vt-surface);
    border-color: var(--vt-border);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .45);
}
html[data-theme="dark"] .dropdown-item {
    color: var(--vt-text);
}
html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus {
    background-color: var(--vt-surface-2);
    color: #fff;
}
html[data-theme="dark"] .dropdown-divider {
    border-top-color: var(--vt-border);
}
html[data-theme="dark"] .select2-dropdown {
    background-color: var(--vt-surface);
    border-color: var(--vt-border);
}
html[data-theme="dark"] .select2-container--bootstrap .select2-search--dropdown .select2-search__field {
    background-color: var(--vt-navy-2);
    border-color: var(--vt-border);
    color: #fff;
}
html[data-theme="dark"] .select2-container--bootstrap .select2-selection--single .select2-selection__rendered {
    color: #fff;
}
html[data-theme="dark"] .select2-container--bootstrap .select2-selection--single .select2-selection__placeholder,
html[data-theme="dark"] .select2-container--bootstrap .select2-selection--multiple .select2-selection__placeholder {
    color: var(--vt-text-muted);
}
html[data-theme="dark"] .select2-container--bootstrap .select2-selection--multiple {
    background-color: var(--vt-navy-2);
}
html[data-theme="dark"] .select2-container--bootstrap .select2-selection--multiple .select2-selection__choice {
    background-color: var(--vt-surface-2);
    border-color: var(--vt-border);
    color: var(--vt-text);
}
html[data-theme="dark"] .select2-container--bootstrap .select2-selection--multiple .select2-selection__choice__remove,
html[data-theme="dark"] .select2-container--bootstrap .select2-selection__clear {
    color: var(--vt-text-muted);
}
html[data-theme="dark"] .select2-container--bootstrap .select2-results__option[aria-selected=true],
html[data-theme="dark"] .select2-container--default .select2-results__option--selected {
    background-color: var(--vt-surface-2);
    color: var(--vt-accent);
}
html[data-theme="dark"] .select2-container--bootstrap .select2-results__option--highlighted[aria-selected],
html[data-theme="dark"] .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable,
html[data-theme="dark"] .select2-container--arrow .select2-results__option--highlighted[aria-selected],
html[data-theme="dark"] .select2-container--white .select2-results__option--highlighted[aria-selected] {
    background-color: var(--vt-brand);
    color: #fff;
}
html[data-theme="dark"] .select2-results__option {
    color: var(--vt-text);
}
html[data-theme="dark"] .select2-results__option:hover,
html[data-theme="dark"] .select2-results__option[aria-selected=true] {
    color: var(--vt-accent);
}
html[data-theme="dark"] .select2-container--bootstrap .select2-results__option[aria-disabled=true],
html[data-theme="dark"] .select2-container--bootstrap .select2-results__group {
    color: var(--vt-text-muted);
}
html[data-theme="dark"] .select2-container--bootstrap.select2-container--disabled .select2-selection {
    background-color: var(--vt-surface);
}
html[data-theme="dark"] .ui-datepicker {
    background-color: var(--vt-surface);
    border: 1px solid var(--vt-border);
}
html[data-theme="dark"] .ui-datepicker-calendar > thead > tr {
    background-color: rgba(255, 255, 255, .04);
}
html[data-theme="dark"] .ui-datepicker th,
html[data-theme="dark"] .ui-datepicker .ui-datepicker-title {
    color: var(--vt-text);
}
html[data-theme="dark"] .ui-datepicker td a,
html[data-theme="dark"] .ui-datepicker td span {
    color: var(--vt-text);
}
html[data-theme="dark"] .alert-primary {
    background-color: rgba(75, 77, 237, .15);
    border-color: rgba(75, 77, 237, .35);
    color: #C6C8FF;
}
html[data-theme="dark"] .alert-secondary {
    background-color: rgba(49, 208, 170, .12);
    border-color: rgba(49, 208, 170, .3);
    color: #8FE8D2;
}
html[data-theme="dark"] .alert-success {
    background-color: rgba(40, 167, 69, .15);
    border-color: rgba(40, 167, 69, .35);
    color: #8FDFA9;
}
html[data-theme="dark"] .alert-info {
    background-color: rgba(23, 162, 184, .15);
    border-color: rgba(23, 162, 184, .35);
    color: #9BDCE8;
}
html[data-theme="dark"] .alert-warning {
    background-color: rgba(255, 193, 7, .12);
    border-color: rgba(255, 193, 7, .3);
    color: #FFE08A;
}
html[data-theme="dark"] .alert-danger {
    background-color: rgba(220, 53, 69, .15);
    border-color: rgba(220, 53, 69, .35);
    color: #F5A9B1;
}
html[data-theme="dark"] .alert-light {
    background-color: var(--vt-surface-2);
    border-color: var(--vt-border);
    color: var(--vt-text);
}
html[data-theme="dark"] .alert-dark {
    background-color: rgba(0, 0, 0, .3);
    border-color: rgba(255, 255, 255, .1);
    color: var(--vt-text);
}
html[data-theme="dark"] .alert .alert-link {
    color: #fff;
}
html[data-theme="dark"] .page-link {
    background-color: var(--vt-surface);
    border-color: var(--vt-border);
    color: var(--vt-text);
}
html[data-theme="dark"] .page-link:hover {
    background-color: var(--vt-surface-2);
    border-color: var(--vt-border);
    color: #fff;
}
html[data-theme="dark"] .page-link:focus {
    box-shadow: 0 0 0 .2rem rgba(75, 77, 237, .25);
}
html[data-theme="dark"] .page-item.active .page-link {
    background-color: var(--vt-brand);
    border-color: var(--vt-brand);
    color: #fff;
}
html[data-theme="dark"] .page-item.disabled .page-link {
    background-color: var(--vt-surface);
    border-color: var(--vt-border);
    color: var(--vt-text-muted);
}
html[data-theme="dark"] .badge-primary {
    background-color: var(--vt-brand);
    color: #fff;
}
html[data-theme="dark"] .badge-secondary {
    background-color: var(--vt-surface-2);
    color: var(--vt-text);
}
html[data-theme="dark"] .badge-success {
    background-color: #1e7e34;
    color: #fff;
}
html[data-theme="dark"] .badge-info {
    background-color: #117a8b;
    color: #fff;
}
html[data-theme="dark"] .badge-warning {
    background-color: #cc9a06;
    color: #08192B;
}
html[data-theme="dark"] .badge-danger {
    background-color: #bd2130;
    color: #fff;
}
html[data-theme="dark"] .badge-light {
    background-color: var(--vt-surface-2);
    color: var(--vt-text-muted);
}
html[data-theme="dark"] .badge-dark {
    background-color: #000;
    color: var(--vt-text);
}
html[data-theme="dark"] .text-muted {
    color: var(--vt-text-muted) !important;
}

/* ===== 8. Header / search ===== */
html[data-theme="dark"] .dashboard .section-header .title {
    background: linear-gradient(100deg, var(--vt-brand), #6A6CF0);
    color: #fff;
}
html[data-theme="dark"] .dashboard .section-header .search-container .input-group {
    background-color: var(--vt-surface);
    border: 1px solid var(--vt-border);
    box-shadow: none;
}
html[data-theme="dark"] .dashboard .section-header .search-container .input-group input {
    background-color: transparent;
    color: #fff;
}
html[data-theme="dark"] .dashboard .section-header .search-container .input-group input::placeholder {
    color: var(--vt-text-muted);
}
html[data-theme="dark"] .dashboard .section-header .search-container .input-group .search-button {
    background: transparent;
}
html[data-theme="dark"] .dashboard .section-header .search-container .input-group .search-button i {
    color: var(--vt-text-muted);
}
html[data-theme="dark"] .box-typical .box-typical-header .tbl-cell.tbl-cell-action-bordered {
    border-left-color: var(--vt-border);
}
html[data-theme="dark"] .box-typical .box-typical-header .action-btn {
    color: var(--vt-text-muted);
}
html[data-theme="dark"] .box-typical .box-typical-header .action-btn:hover,
html[data-theme="dark"] .box-typical .box-typical-header-sm .slider-arrs button:hover {
    color: var(--vt-accent);
}
html[data-theme="dark"] .dashboard .breadcrumb li a {
    color: var(--vt-text-muted);
}
html[data-theme="dark"] .dashboard .breadcrumb li.active:last-child {
    color: #fff;
}

/* ===== 9. Auth pages (atlas atmosphere) ===== */
html[data-theme="dark"] #app:not(.dashboard) {
    background-color: var(--vt-navy);
    min-height: 100vh;
    overflow: hidden;
    position: relative;
}
html[data-theme="dark"] #app:not(.dashboard)::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(ellipse 75% 65% at 50% 45%, #000 30%, transparent 75%);
    mask-image: radial-gradient(ellipse 75% 65% at 50% 45%, #000 30%, transparent 75%);
    pointer-events: none;
}
html[data-theme="dark"] #app:not(.dashboard)::after {
    content: '';
    position: absolute;
    width: 34rem;
    height: 34rem;
    top: -14rem;
    left: -12rem;
    border-radius: 50%;
    background: rgba(75, 77, 237, .35);
    filter: blur(110px);
    pointer-events: none;
    animation: vt-glow-drift 11s ease-in-out infinite alternate;
}
html[data-theme="dark"] .auth {
    position: relative;
}
html[data-theme="dark"] .auth::before {
    content: '';
    position: absolute;
    width: 30rem;
    height: 30rem;
    bottom: -16rem;
    right: -10rem;
    border-radius: 50%;
    background: rgba(49, 208, 170, .22);
    filter: blur(110px);
    pointer-events: none;
    animation: vt-glow-drift-r 13s ease-in-out infinite alternate-reverse;
}
@keyframes vt-glow-drift {
    from { transform: translate(0, 0) scale(1); }
    to   { transform: translate(3rem, 2rem) scale(1.12); }
}
@keyframes vt-glow-drift-r {
    from { transform: translate(0, 0) scale(1); }
    to   { transform: translate(-3rem, -2rem) scale(1.12); }
}
html[data-theme="dark"] .auth .form-box {
    background-color: var(--vt-surface);
    border: 1px solid var(--vt-border);
    border-radius: 12px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}
html[data-theme="dark"] .auth .form-box .title {
    background: linear-gradient(100deg, #fff 25%, #8F90FF 55%, #31D0AA 90%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #fff;
}
html[data-theme="dark"] .auth .form-box .subtitle {
    color: var(--vt-text-muted);
}
html[data-theme="dark"] .auth .form-box .input,
html[data-theme="dark"] .auth .form-box .input-icon,
html[data-theme="dark"] .auth .step-container .team-input,
html[data-theme="dark"] .auth .step-plan-container .team-input {
    background-color: var(--vt-navy-2);
    border-color: var(--vt-border);
    color: #fff;
}
html[data-theme="dark"] .auth .form-box .input::placeholder,
html[data-theme="dark"] .auth .form-box .input-icon input::placeholder {
    color: var(--vt-text-muted);
}
html[data-theme="dark"] .auth .form-box .input-icon i {
    color: var(--vt-text-muted);
}
html[data-theme="dark"] .auth .form-box .main-button {
    background: linear-gradient(100deg, var(--vt-brand), #6A6CF0);
    border: none;
    border-radius: 50rem;
    color: #fff;
    transition: all .2s ease;
}
html[data-theme="dark"] .auth .form-box .main-button:hover {
    box-shadow: 0 10px 30px rgba(75, 77, 237, .35);
    filter: brightness(1.1);
}
/* Auth form heading sizes: slightly smaller than the base 42px/24px */
.auth .form-box .title {
    font-size: 34px;
}
.auth .form-box .subtitle {
    font-size: 18px;
    margin-bottom: 32px;
}
/* Wider, roomier auth form box (base: 520px container, 38px 32px padding).
   The box is a centered flex item, so without width:100% it only ever
   spanned its content (~330px) no matter how wide the container was. */
.auth .form-container {
    max-width: 560px;
}
.auth .form-box {
    padding: 44px 40px;
    width: 100%;
}
html[data-theme="dark"] .auth .social {
    background-color: var(--vt-navy-2);
    border-color: var(--vt-border);
    color: var(--vt-text);
}
html[data-theme="dark"] .auth .social:hover {
    background-color: var(--vt-surface-2);
    color: #fff;
    text-decoration: none;
}
html[data-theme="dark"] .auth .divider {
    background: var(--vt-border);
}
html[data-theme="dark"] .auth .text-green {
    color: var(--vt-accent);
}
html[data-theme="dark"] .auth .text-grey-dark,
html[data-theme="dark"] .auth .text-grey-darkest {
    color: var(--vt-text-muted);
}
html[data-theme="dark"] .auth .text-black {
    color: var(--vt-text);
}
html[data-theme="dark"] .auth .checkbox {
    accent-color: var(--vt-accent);
}
html[data-theme="dark"] .auth .form-box .actions input {
    color: var(--vt-accent);
}

/* ===== 10. Motion preferences ===== */
@media (prefers-reduced-motion: reduce) {
html[data-theme="dark"]     #app:not(.dashboard)::after,
html[data-theme="dark"]     .auth::before {
        animation: none;
    }
}

/* === Contrast & surface fixes — validated with axe-core via Playwright === */

/* Light mode: darken low-contrast grays on white surfaces */
html[data-theme="light"] .text-muted {
    color: #6b7c88 !important;
}
html[data-theme="light"] .btn-tertiary,
html[data-theme="light"] .btn-cancel {
    color: #5f6b76;
}
html[data-theme="light"] .section-form-tabs .nav-link,
html[data-theme="light"] .tab-panel-languages .nav-link {
    color: #5f6b76;
}
html[data-theme="light"] .dashboard__navbar small,
html[data-theme="light"] .dashboard__logout small {
    color: #6e7f8a;
}
.m-0px a {
    color: #4B4DED;
}

/* Dark mode: white surfaces left over from the base theme */
html[data-theme="dark"] .table {
    background: var(--vt-surface);
    color: var(--vt-text);
}
html[data-theme="dark"] .table thead th {
    background: rgba(255, 255, 255, 0.04);
    color: var(--vt-text-muted);
}
html[data-theme="dark"] .inner-form-container {
    background-color: var(--vt-surface);
    color: var(--vt-text);
    box-shadow: none;
}
html[data-theme="dark"] .tab-content-container {
    background-color: var(--vt-surface);
}

/* Dark mode: input/select text was dark-on-dark (base theme uses !important) */
html[data-theme="dark"] .form-control {
    color: #fff !important;
}
html[data-theme="dark"] .select2-container--bootstrap .select2-selection,
html[data-theme="dark"] .select2-container--bootstrap .select2-selection__rendered,
html[data-theme="dark"] .select2-container--bootstrap .select2-selection--single .select2-selection__placeholder {
    color: #fff !important;
}
html[data-theme="dark"] .select2-search--dropdown .select2-search__field {
    color: #fff;
}

/* Dark mode: cancel/tertiary buttons were white-on-white */
html[data-theme="dark"] .btn-tertiary,
html[data-theme="dark"] .btn-cancel {
    background: var(--vt-surface-2);
    color: var(--vt-text);
    border: 1px solid var(--vt-border);
}

/* === Round 2: beat .dashboard-scoped rules from app.css minified block === */

/* Dark: white table cells (.dashboard .box-typical table tr td/th) */
html[data-theme="dark"] .dashboard .box-typical table tr td,
html[data-theme="dark"] .dashboard .box-typical table tr th {
    background-color: transparent;
}
html[data-theme="dark"] .dashboard .box-typical table tr:hover td {
    background-color: rgba(75, 77, 237, .08);
}
html[data-theme="dark"] .dashboard .box-typical table td a {
    color: var(--vt-accent);
}

/* Menu tree (menu_items): white branch pills -> dark surface, readable text/icons */
html[data-theme="dark"] #menu-tree .tree-branch .branch-wrapper {
    background: var(--vt-navy-2);
    border-color: var(--vt-border);
    color: var(--vt-text);
}
html[data-theme="dark"] #menu-tree .ui-sortable-handle {
    color: var(--vt-text);
}
html[data-theme="dark"] #menu-tree .ui-sortable-handle:hover {
    color: var(--vt-text-muted);
}
html[data-theme="dark"] #menu-tree .right-sidebar i {
    color: var(--vt-text-muted);
}
html[data-theme="dark"] #menu-tree .sortable-placeholder {
    border-color: var(--vt-border);
}

/* Dark: white form container (.dashboard .section-form-page .inner-form-container) */
html[data-theme="dark"] .dashboard .section-form-page .inner-form-container {
    background-color: var(--vt-surface);
    color: var(--vt-text);
    box-shadow: none;
}

/* Dark: pagination + table action icons */
html[data-theme="dark"] .dashboard .pagination .active .page-link {
    background-color: var(--vt-brand) !important;
    color: #fff;
}
html[data-theme="dark"] .dashboard .box-typical table .td-icon i {
    color: var(--vt-text-muted) !important;
}

/* Dark: cancel/tertiary buttons — force over any residual white */
html[data-theme="dark"] .dashboard .btn-tertiary,
html[data-theme="dark"] .dashboard .btn-cancel,
html[data-theme="dark"] .dashboard a.btn-cancel {
    background-color: var(--vt-surface-2) !important;
    border: 1px solid var(--vt-border) !important;
    color: var(--vt-text) !important;
}

/* Light mode: cancel/tertiary + language tab links + form hints (#8e8e8e fails 4.5:1) */
html[data-theme="light"] .dashboard .btn.btn-tertiary,
html[data-theme="light"] .dashboard a.btn.btn-tertiary.btn-cancel {
    color: #5f6b76 !important;
}
html[data-theme="light"] .dashboard .section-form-tabs .nav-tabs .nav-item .nav-link,
html[data-theme="light"] .dashboard .section-form-tabs .nav-pills .nav-item a {
    color: #5f6b76 !important;
}
html[data-theme="light"] .dashboard .section-form-page .mt-2,
html[data-theme="light"] .dashboard .btn-action {
    color: #5f6b76 !important;
}

/* Dark mode: upload/action buttons were white-on-dark */
html[data-theme="dark"] .dashboard .btn-action,
html[data-theme="dark"] .dashboard label.btn-action {
    background-color: var(--vt-surface-2) !important;
    border: 1px solid var(--vt-border) !important;
    color: var(--vt-text) !important;
}

/* Light mode: darken muted grays to pass 4.5:1 on white */
html[data-theme="light"] .text-muted {
    color: #5c6b78 !important;
}
html[data-theme="light"] .dashboard__navbar small,
html[data-theme="light"] .dashboard__logout small {
    color: #5c6b78;
}

/* === Round 3: old-brand leftovers (lime banner, gray login button, lime links) === */

/* Page title banner: lime -> brand indigo (both modes, keeps the slanted clip) */
.dashboard .section-header .title {
    background-color: #4B4DED;
    color: #fff;
}

/* Auth pages: gray login button -> brand (dark-mode gradient rule still wins) */
.auth .form-box .main-button {
    background: #4B4DED;
    border-radius: 50rem;
    color: #fff;
}
.auth .form-box .main-button:hover {
    background: #3B3DE0;
}

/* Auth lime links -> accent teal */
.auth .text-green {
    color: #31D0AA;
}

/* select2 multi-select chips: lime -> brand tint */
.select2-selection__choice {
    background-color: #e3e4ff !important;
    color: #2c2ea8;
}

/* === Round 4: login password field + hero logo overlay === */

/* The outer .input-icon box already gets dark styling from the .input rule above
   (that selector is more specific, so "transparent" here never applied). Make the
   nested password input transparent so the field looks like the email input. */
html[data-theme="dark"] .auth .form-box .input-icon {
    align-items: center;
    display: flex;
}
html[data-theme="dark"] .auth .form-box .input-icon input {
    background: transparent;
    border: none;
    color: #fff;
    height: auto;
    padding: 0;
}
html[data-theme="dark"] .auth .form-box .input-icon input::placeholder {
    color: var(--vt-text-muted);
}
html[data-theme="dark"] .auth .form-box .input-icon input:focus {
    outline: none;
}
html[data-theme="dark"] .auth .form-box .input-icon i {
    color: var(--vt-text-muted);
}

/* === Round 5: Dashdark-style refinement — depth, soft borders, no grid tables === */

/* Cards float on the page with a hairline border and generous radius */
html[data-theme="dark"] .box-typical,
html[data-theme="dark"] .dashboard .section-form-page .inner-form-container,
html[data-theme="dark"] .tab-content-container {
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
}

/* Sidebar separation */
html[data-theme="dark"] .dashboard__nav {
    border-right: 1px solid rgba(255, 255, 255, .06);
    box-shadow: none;
}

/* Tables: no grid — rows breathe on the card surface with hairline separators */
html[data-theme="dark"] .table {
    background: transparent;
}
html[data-theme="dark"] .table-bordered td,
html[data-theme="dark"] .table-bordered th {
    border-color: transparent !important;
}
html[data-theme="dark"] .table td,
html[data-theme="dark"] .table th {
    border-top: 1px solid rgba(255, 255, 255, .05);
}
html[data-theme="dark"] .table thead th {
    background: transparent;
    border-top: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}
html[data-theme="dark"] .table-hover tbody tr:hover {
    background-color: rgba(255, 255, 255, .03);
}

/* Forms: inset depth, soft border, brand focus glow */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .navbarSelector,
html[data-theme="dark"] .select2-container--bootstrap .select2-selection {
    background-color: #0F1526;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 8px;
}
html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .navbarSelector:focus,
html[data-theme="dark"] .select2-container--bootstrap.select2-container--focus .select2-selection,
html[data-theme="dark"] .select2-container--bootstrap.select2-container--open .select2-selection {
    border-color: var(--vt-brand);
    box-shadow: 0 0 0 3px rgba(75, 77, 237, .22);
}
html[data-theme="dark"] .select2-dropdown {
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 8px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .45);
    overflow: hidden;
}

/* Buttons: consistent radius */
html[data-theme="dark"] .btn {
    border-radius: 8px;
}
html[data-theme="dark"] .btn-primary {
    background-color: var(--vt-brand);
    border-color: var(--vt-brand);
    color: #fff;
}
html[data-theme="dark"] .btn-primary:hover {
    background-color: #3B3DE0;
    border-color: #3B3DE0;
}

/* Language/data tabs: inactive = ghost, active = brand pill */
html[data-theme="dark"] .tab-panel-languages .nav-link,
html[data-theme="dark"] .section-form-tabs .nav-pills .nav-item a {
    border-radius: 50rem;
    color: var(--vt-text-muted);
}
html[data-theme="dark"] .tab-panel-languages .nav-link.active {
    background-color: var(--vt-brand) !important;
    border: none;
    border-radius: 50rem;
    box-shadow: none;
    color: #fff !important;
}
html[data-theme="dark"] .section-form-tabs .nav-tabs .nav-item .nav-link:hover,
html[data-theme="dark"] .tab-panel-languages .nav-link:hover {
    background-color: rgba(255, 255, 255, .05);
    color: var(--vt-text);
}

/* Pagination: ghost items, brand active pill */
html[data-theme="dark"] .dashboard .pagination .page-link {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--vt-text-muted);
}
html[data-theme="dark"] .dashboard .pagination .page-link:hover {
    background: rgba(255, 255, 255, .05);
    color: var(--vt-text);
}
html[data-theme="dark"] .dashboard .pagination .active .page-link {
    background-color: var(--vt-brand) !important;
    border-radius: 8px;
    color: #fff;
}

/* === Round 6: row separator source + save button fill === */
html[data-theme="dark"] .dashboard .box-typical table tr {
    border-bottom-color: rgba(255, 255, 255, .05);
}
html[data-theme="dark"] .btn.action-table.btn-primary,
html[data-theme="dark"] .btn.btn-primary.submit-btn,
html[data-theme="dark"] .dashboard .submit-btn {
    background-color: var(--vt-brand) !important;
    border-color: var(--vt-brand) !important;
    color: #fff !important;
}

/* === Round 7: home featured sortable list === */
html[data-theme="dark"] .list-group-item,
html[data-theme="dark"] .home-widget .featured {
    background-color: #0F1526;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 8px;
    color: var(--vt-text);
    margin-bottom: 8px;
}
html[data-theme="dark"] .list-group-item a,
html[data-theme="dark"] .home-widget .featured a {
    color: var(--vt-accent);
}