/* Default system palette layer: colors only, no layout or typography changes. */
body {
    background-color: var(--brand-page-bg, var(--bg-light)) !important;
    color: var(--brand-text, var(--text-main)) !important;
}

body.msar-shell.msar-classic .main-form,
body.msar-shell.msar-classic .dashboard {
    background: var(--brand-page-bg) !important;
    color: var(--brand-text) !important;
}

body.msar-shell.msar-classic .side-info {
    background: var(--brand-sidebar-bg) !important;
    background: linear-gradient(180deg, var(--brand-sidebar-bg) 0%, var(--brand-navy) 100%) !important;
    color: var(--brand-sidebar-text) !important;
}

body.msar-shell.msar-classic .main-topbar,
body.msar-shell.msar-classic .module-switcher-wrap,
body.msar-shell.msar-classic .breadcrumb-bar,
body.msar-shell.msar-classic .app-footer,
body.msar-shell.msar-classic .footer {
    background: var(--brand-surface) !important;
    border-color: var(--brand-border) !important;
    color: var(--brand-text) !important;
}

body.msar-shell.msar-classic .breadcrumb-bar,
body.msar-shell.msar-classic .breadcrumb,
body.msar-shell.msar-classic .module-page-title {
    background: var(--brand-breadcrumb-bg) !important;
    color: var(--brand-breadcrumb-text) !important;
}

.card,
.ui-card,
.app-card,
.dashboard-card,
.analytics-card,
.chart-card,
.kpi,
.kpi-card,
.metric-card,
.stat-card,
.info-card,
.filter-card,
.msar-filter-section,
.advanced-filter,
.search-card,
.panel,
.box {
    background: var(--brand-surface) !important;
    border-color: var(--brand-border) !important;
    color: var(--brand-text) !important;
    box-shadow: var(--shadow-sm) !important;
}

.card-header,
.section-head,
.section-title,
.module-page-title h1,
.module-page-title h2,
h1,
h2,
h3,
h4,
h5,
strong {
    color: var(--brand-text) !important;
}

.muted,
.text-muted,
.hint,
.help-text,
.card-title-section p,
.section-head p,
.analytics-label,
.analytics-sub,
.metric-label,
.stat-label,
small {
    color: var(--brand-muted) !important;
}

table,
.table,
.card-table table,
.data-table {
    color: var(--brand-text) !important;
    border-color: var(--brand-border) !important;
}

table th,
.table th,
.card-table th,
.data-table th {
    background: var(--brand-surface-soft) !important;
    color: var(--brand-text) !important;
    border-color: var(--brand-border) !important;
}

table td,
.table td,
.card-table td,
.data-table td {
    border-color: var(--brand-border-soft) !important;
}

table tbody tr:hover,
.table tbody tr:hover,
.data-table tbody tr:hover {
    background: var(--brand-surface-soft) !important;
}

.input,
.input-ctrl,
.select,
.textarea,
input,
select,
textarea {
    background: var(--brand-surface) !important;
    border-color: var(--brand-border) !important;
    color: var(--brand-text) !important;
}

.input:focus,
.input-ctrl:focus,
.select:focus,
.textarea:focus,
input:focus,
select:focus,
textarea:focus {
    border-color: var(--brand-primary) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 14%, transparent) !important;
}

.btn-primary,
button.btn-primary,
input[type="submit"].btn-primary {
    background: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
    color: var(--brand-button-text) !important;
}

.btn-primary:hover,
button.btn-primary:hover {
    background: var(--brand-primary-dark) !important;
    border-color: var(--brand-primary-dark) !important;
}

.btn-light,
.btn-ghost,
.btn-secondary {
    background: var(--brand-surface) !important;
    border-color: var(--brand-border) !important;
    color: var(--brand-text) !important;
}

.btn-light:hover,
.btn-ghost:hover,
.btn-secondary:hover {
    background: var(--brand-surface-soft) !important;
    border-color: var(--brand-border) !important;
}

.btn-warning,
.badge-soft,
.pill,
.tag,
.chip {
    background: color-mix(in srgb, var(--brand-gold) 18%, var(--brand-surface)) !important;
    border-color: color-mix(in srgb, var(--brand-gold) 38%, var(--brand-border)) !important;
    color: var(--brand-ink) !important;
}

.btn-warning {
    background: var(--brand-orange) !important;
    border-color: var(--brand-orange) !important;
    color: #fff !important;
}

.btn-danger {
    background: var(--brand-danger) !important;
    border-color: var(--brand-danger) !important;
    color: #fff !important;
}

.btn-success {
    background: var(--brand-success) !important;
    border-color: var(--brand-success) !important;
    color: #fff !important;
}

.alert-success {
    background: color-mix(in srgb, var(--brand-success) 10%, var(--brand-surface)) !important;
    color: var(--brand-success) !important;
    border-color: color-mix(in srgb, var(--brand-success) 30%, var(--brand-border)) !important;
}

.alert-error,
.alert-danger {
    background: color-mix(in srgb, var(--brand-danger) 10%, var(--brand-surface)) !important;
    color: var(--brand-danger) !important;
    border-color: color-mix(in srgb, var(--brand-danger) 30%, var(--brand-border)) !important;
}

body.msar-shell.msar-classic .module-tab,
body.msar-shell.msar-classic .module-sidebar-nav a,
body.msar-shell.msar-classic .sidebar-nav a {
    color: var(--brand-muted) !important;
}

body.msar-shell.msar-classic .module-tab.active,
body.msar-shell.msar-classic .module-tab:hover,
body.msar-shell.msar-classic .module-sidebar-nav a.active,
body.msar-shell.msar-classic .module-sidebar-nav a:hover,
body.msar-shell.msar-classic .sidebar-nav a.active,
body.msar-shell.msar-classic .sidebar-nav a:hover {
    color: var(--brand-text) !important;
    border-color: var(--brand-accent) !important;
    background: color-mix(in srgb, var(--brand-accent) 14%, var(--brand-surface)) !important;
}

body.msar-shell.msar-classic .side-info .module-sidebar-nav a,
body.msar-shell.msar-classic .side-info .sidebar-nav a {
    color: var(--brand-sidebar-text) !important;
}

body.msar-shell.msar-classic .side-info .module-sidebar-nav a.active,
body.msar-shell.msar-classic .side-info .module-sidebar-nav a:hover,
body.msar-shell.msar-classic .side-info .sidebar-nav a.active,
body.msar-shell.msar-classic .side-info .sidebar-nav a:hover {
    background: var(--brand-sidebar-active) !important;
    color: var(--brand-sidebar-text) !important;
    border-color: color-mix(in srgb, var(--brand-accent) 52%, transparent) !important;
}

body.msar-shell.msar-classic .module-tab.active :where(.fa, .fas, .far, .fab, .fa-solid, .fa-regular, .fa-brands, .msar-fa-svg, .msar-module-icon),
body.msar-shell.msar-classic .module-tab:hover :where(.fa, .fas, .far, .fab, .fa-solid, .fa-regular, .fa-brands, .msar-fa-svg, .msar-module-icon) {
    color: var(--brand-primary) !important;
}

body.msar-shell.msar-classic .side-info {
    background: var(--brand-sidebar-bg) !important;
    background: linear-gradient(180deg, var(--brand-sidebar-bg) 0%, var(--brand-navy) 100%) !important;
    border-left-color: color-mix(in srgb, var(--brand-gold) 18%, transparent) !important;
    box-shadow: -8px 0 24px rgba(10, 25, 47, .14) !important;
}

body.msar-shell.msar-classic .side-info > .admin-sidebar-toggle,
body.msar-shell.msar-classic .msar-sidebar-brand,
body.msar-shell.msar-classic .side-info > .msar-sidebar-scroll > .brand-inline {
    background: var(--brand-navy) !important;
    background: linear-gradient(180deg, var(--brand-navy) 0%, var(--brand-sidebar-bg) 100%) !important;
    border-color: color-mix(in srgb, var(--brand-gold) 20%, transparent) !important;
    color: var(--brand-sidebar-text) !important;
}

body.msar-shell.msar-classic .side-info > .admin-sidebar-toggle:hover,
body.msar-shell.msar-classic .side-info > .admin-sidebar-toggle:focus-visible {
    background: var(--brand-gold-dark) !important;
    color: var(--brand-navy) !important;
}

body.msar-shell.msar-classic .side-info .brand-title,
body.msar-shell.msar-classic .module-sidebar-group-title,
body.msar-shell.msar-classic .module-sidebar-group-title .msar-section-text,
body.msar-shell.msar-classic .module-sidebar-group-title .msar-section-icon,
body.msar-shell.msar-classic .module-sidebar-group-title .msar-section-chevron {
    color: var(--brand-sidebar-text) !important;
}

body.msar-shell.msar-classic .side-info .brand-subtitle,
body.msar-shell.msar-classic .side-footer,
body.msar-shell.msar-classic .msar-sidebar-profile-meta,
body.msar-shell.msar-classic .msar-sidebar-module-desc,
body.msar-shell.msar-classic .msar-sidebar-empty-desc,
body.msar-shell.msar-classic .module-sidebar-card .small-muted {
    color: color-mix(in srgb, var(--brand-sidebar-text) 72%, transparent) !important;
}

body.msar-shell.msar-classic .module-sidebar-group-title::before,
body.msar-shell.msar-classic .module-sidebar-group-title::after {
    color: color-mix(in srgb, var(--brand-sidebar-text) 78%, transparent) !important;
}

body.msar-shell.msar-classic .module-sidebar-group-title::before {
    background: var(--brand-gold) !important;
}

body.msar-shell.msar-classic .module-sidebar-group.has-active > .module-sidebar-group-title,
body.msar-shell.msar-classic .module-sidebar-group.is-open > .module-sidebar-group-title {
    background: var(--brand-sidebar-active) !important;
    border-right-color: var(--brand-blue) !important;
}

body.msar-shell.msar-classic .module-sidebar-nav {
    background: var(--brand-sidebar-active) !important;
}

body.msar-shell.msar-classic .side-info .module-sidebar-nav::before {
    background: color-mix(in srgb, var(--brand-gold) 55%, transparent) !important;
}

body.msar-shell.msar-classic .side-info .sidebar-nav a,
body.msar-shell.msar-classic .side-info .module-sidebar-nav a,
body.msar-shell.msar-classic .side-info .sidebar-nav a:hover,
body.msar-shell.msar-classic .side-info .sidebar-nav a:focus-visible,
body.msar-shell.msar-classic .side-info .sidebar-nav a.active,
body.msar-shell.msar-classic .side-info .module-sidebar-nav a:hover,
body.msar-shell.msar-classic .side-info .module-sidebar-nav a:focus-visible,
body.msar-shell.msar-classic .side-info .module-sidebar-nav a.active {
    background: transparent !important;
    color: var(--brand-sidebar-text) !important;
}

body.msar-shell.msar-classic .side-info .sidebar-nav a:hover,
body.msar-shell.msar-classic .side-info .sidebar-nav a:focus-visible,
body.msar-shell.msar-classic .side-info .module-sidebar-nav a:hover,
body.msar-shell.msar-classic .side-info .module-sidebar-nav a:focus-visible {
    background: color-mix(in srgb, var(--brand-navy-soft) 72%, transparent) !important;
}

body.msar-shell.msar-classic .side-info .sidebar-nav a .nav-text,
body.msar-shell.msar-classic .side-info .module-sidebar-nav a .nav-text {
    color: var(--brand-sidebar-text) !important;
}

body.msar-shell.msar-classic .side-info .sidebar-nav a .nav-icon,
body.msar-shell.msar-classic .side-info .module-sidebar-nav a .nav-icon {
    background: var(--brand-gold) !important;
}

body.msar-shell.msar-classic .side-footer {
    background: color-mix(in srgb, var(--brand-navy) 88%, var(--brand-gold) 12%) !important;
    border-top-color: color-mix(in srgb, var(--brand-gold) 18%, transparent) !important;
}

body.msar-shell.msar-classic .msar-sidebar-scroll {
    scrollbar-color: color-mix(in srgb, var(--brand-gold) 52%, transparent) transparent !important;
}

body.msar-shell.msar-classic .msar-sidebar-scroll::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--brand-gold) 52%, transparent) !important;
}

.chart-bar,
.metric-bar,
.bar {
    background: var(--brand-soft) !important;
}

.chart-bar span,
.metric-bar span,
.bar span {
    background: linear-gradient(90deg, var(--brand-primary), var(--brand-accent)) !important;
}

body.auth-page {
    background: linear-gradient(135deg, rgba(10, 25, 47, 1) 0%, rgba(10, 25, 47, .95) 58%, rgba(197, 160, 89, .92) 100%) !important;
}

body.auth-page .auth-card,
body.auth-page .dashboard {
    background: rgba(255, 255, 255, .98) !important;
    border-color: rgba(255, 255, 255, .45) !important;
    box-shadow: var(--shadow-lg) !important;
}