/* Business settings are the final authority over legacy theme layers.
   Status colors (success, warning and danger) retain their semantic meaning. */
.button.primary, .btn.primary, .dashboard-actions .button.primary,
.mobile-cart-dock, .password-submit, .mode-button {
    background: var(--brand) !important;
    color: var(--brand-contrast) !important;
    box-shadow: 0 8px 18px var(--brand-ring) !important;
}
.button.primary:hover, .btn.primary:hover, .dashboard-actions .button.primary:hover,
.password-submit:hover, .password-submit:focus-visible,
.mode-button:hover, .mode-button:focus-visible, .mode-button.is-active {
    background: var(--brand) !important;
    color: var(--brand-contrast) !important;
    filter: brightness(.92);
}
.sidebar .nav-section a.active, .sidebar .nav-section a:hover,
.sidebar .nav-section a.active .nav-icon, .sidebar .nav-section a:hover .nav-icon {
    background: var(--brand-soft) !important;
    color: var(--brand-dark) !important;
}
.sidebar .nav-section a.active {
    box-shadow: inset 3px 0 0 var(--brand) !important;
}
.sidebar .nav-section a.active .nav-icon {
    box-shadow: inset 0 0 0 1px var(--brand-border) !important;
}
.button.secondary:hover, .button:not(.primary):not(.danger):not(.small):hover {
    background: var(--brand-soft) !important;
    border-color: var(--brand-border) !important;
    color: var(--brand-dark) !important;
}
.content input:focus, .content select:focus, .content textarea:focus,
.login-form input:focus, .field input:focus {
    border-color: var(--brand) !important;
    box-shadow: 0 0 0 4px var(--brand-ring) !important;
    outline: none !important;
}
input[type=checkbox], input[type=radio], input[type=range] { accent-color: var(--brand); }
.eyebrow, .panel-head a, .text-button, .mobile-cart-dock > span b {
    color: var(--brand-dark) !important;
}
.eyebrow:before { color: var(--accent) !important; }
.stat-card:after { background: linear-gradient(90deg, var(--brand), var(--accent)) !important; }
.table-panel tbody tr:hover, .panel tbody tr:hover, .list-row:hover.link-row,
.mobile-bottom-nav .active span, .key:hover, .key:focus-visible {
    background: var(--brand-soft) !important;
}
.mobile-bottom-nav .active, .mobile-bottom-nav .active span { color: var(--brand-dark) !important; }
.mobile-bottom-nav button.active span { background: var(--brand) !important; color: var(--brand-contrast) !important; }
.product-card:hover { border-color: var(--brand) !important; box-shadow: 0 8px 18px var(--brand-ring) !important; }
.loading-spinner, .platform-loader-spinner { border-top-color: var(--brand) !important; }
.settings-nav > a.active, .settings-subnav a.active {
    color: var(--brand-dark) !important;
    background: var(--brand-soft) !important;
    border-left-color: var(--brand) !important;
}

/* Overview and account controls have their own legacy component styles. */
.user-pill > span, .account-summary > span, .ov-nav a.active,
.ov-nav a.active:hover {
    background: var(--brand) !important;
    color: var(--brand-contrast) !important;
    box-shadow: 0 6px 14px var(--brand-ring) !important;
}
.ov-top, .account-summary {
    background: linear-gradient(120deg, var(--brand-soft), #fff 70%) !important;
    border-color: var(--brand-border) !important;
    box-shadow: 0 6px 18px var(--brand-ring) !important;
}
.ov-nav a:hover, .account-dropdown > a:hover,
.account-dropdown form button:hover, .account-dropdown > a:hover b {
    background: var(--brand-soft) !important;
    color: var(--brand-dark) !important;
}
.ov-panel .ov-head a, .ov-kpi.ov-link:hover .ov-kpi-go,
.account-meta strong {
    color: var(--brand-dark) !important;
}
.ov-kpi.ov-link:hover { border-color: var(--brand-border) !important; }