/* Contrast and maintenance utilities. */
.u-surface,
.surface,
.panel-surface {
    color: var(--text-primary);
    background: var(--surface-elevated);
}

.u-soft-surface,
.surface-soft {
    color: var(--text-primary);
    background: var(--surface);
}

.u-blue-surface,
.is-blue-surface {
    color: var(--on-primary);
    background: var(--primary);
}

/* Dashboard navigation active states only. Keep generic active classes component-owned. */
.panel-body :where(.dashboard-section-tab.is-active,
    .panel-topnav > a.active-link,
    .panel-dropdown.active-link > summary,
    .panel-dropdown[open] > summary,
    .panel-sidebar .panel-nav a.active-link) {
    color: var(--on-primary) !important;
    background: var(--primary) !important;
    border-color: var(--primary) !important;
}

.u-blue-surface :where(h1, h2, h3, h4, h5, h6, p, span, strong, small, em, b, svg),
.is-blue-surface :where(h1, h2, h3, h4, h5, h6, p, span, strong, small, em, b, svg) {
    color: var(--on-primary) !important;
    stroke: currentColor;
}

:where(.btn-primary,
    .nav-cta,
    .chatbot-toggle,
    .chatbot-form button) :where(span, strong, small, em, b, svg),
.panel-body :where(.dashboard-section-tab.is-active,
    .panel-topnav > a.active-link,
    .panel-dropdown.active-link > summary,
    .panel-dropdown[open] > summary,
    .panel-sidebar .panel-nav a.active-link) :where(span, strong, small, em, b, svg) {
    color: var(--on-primary) !important;
    stroke: currentColor;
}

:where(.card,
    .admin-table-card,
    .admin-form-section,
    .admin-report-card,
    .admin-feed-card,
    .admin-quick-panel,
    .admin-health-panel,
    .stat-card,
    .admin-metric-card,
    .customer-command-card,
    .dashboard-row,
    .panel-dropdown-menu,
    .panel-user-menu-panel) :where(h1, h2, h3, h4, h5, h6, strong, b, label, th, td, li) {
    color: var(--text-primary);
}

:where(.card,
    .admin-table-card,
    .admin-form-section,
    .admin-report-card,
    .admin-feed-card,
    .admin-quick-panel,
    .admin-health-panel,
    .stat-card,
    .admin-metric-card,
    .customer-command-card,
    .dashboard-row,
    .panel-dropdown-menu,
    .panel-user-menu-panel) :where(p, small, em, .muted, .help-text, .form-hint) {
    color: var(--text-secondary);
}

:where([style*="--hero-image"]) {
    color: var(--text-primary);
}

:where([style*="width:"]) {
    max-width: 100%;
}

:where(.progress-line span,
    .report-bar i,
    .progress-bar i,
    .course-progress-bar i) {
    background: var(--primary);
}

:where(.progress-line,
    .report-bar,
    .progress-bar,
    .course-progress-bar) {
    background: var(--primary-soft);
}

:where(.modal-close,
    .panel-sidebar-close,
    .chatbot-head button,
    .chatbot-lead-head button) {
    color: var(--primary);
    border-color: color-mix(in srgb, var(--primary) 16%, var(--border));
    background: #FFFFFF;
}

:where(.modal-close:hover,
    .panel-sidebar-close:hover,
    .chatbot-head button:hover,
    .chatbot-lead-head button:hover) {
    color: #FFFFFF;
    border-color: var(--primary);
    background: var(--primary);
}

@media (max-width: 760px) {
    :where(.dashboard-section-tabs, .panel-topnav) {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}