/*
 * Mentis shared component layer — phase 1.
 * No page-specific selectors and no literal colors belong in this file.
 */

html,
body {
    background: var(--color-bg);
    color: var(--color-text);
}

body {
    background-image: none;
}

.app-main {
    background: transparent;
}

.text-muted,
.text-secondary {
    color: var(--color-text-muted) !important;
}

/* Accessible global focus treatment. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 2px;
    box-shadow: var(--shadow-focus);
}

/* Buttons */
.btn-primary {
    --bs-btn-color: var(--color-on-primary);
    --bs-btn-bg: var(--color-primary);
    --bs-btn-border-color: var(--color-primary);
    --bs-btn-hover-color: var(--color-on-primary);
    --bs-btn-hover-bg: var(--color-primary-hover);
    --bs-btn-hover-border-color: var(--color-primary-hover);
    --bs-btn-active-color: var(--color-on-primary);
    --bs-btn-active-bg: var(--color-primary-active);
    --bs-btn-active-border-color: var(--color-primary-active);
    --bs-btn-disabled-color: var(--color-disabled-text);
    --bs-btn-disabled-bg: var(--color-disabled-bg);
    --bs-btn-disabled-border-color: var(--color-disabled-bg);
    color: var(--color-on-primary);
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:focus-visible {
    color: var(--color-on-primary);
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}

.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle {
    color: var(--color-on-primary);
    background: var(--color-primary-active);
    border-color: var(--color-primary-active);
}

.btn-outline-primary {
    --bs-btn-color: var(--color-primary);
    --bs-btn-border-color: var(--color-border-strong);
    --bs-btn-hover-color: var(--color-primary-active);
    --bs-btn-hover-bg: var(--color-primary-soft);
    --bs-btn-hover-border-color: var(--color-primary);
    --bs-btn-active-color: var(--color-primary-active);
    --bs-btn-active-bg: var(--color-primary-soft);
    --bs-btn-active-border-color: var(--color-primary);
    color: var(--color-primary);
    background: var(--color-surface);
    border-color: var(--color-border-strong);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:focus-visible,
.btn-outline-primary:active,
.btn-outline-primary.active {
    color: var(--color-primary-active);
    background: var(--color-primary-soft);
    border-color: var(--color-primary);
}

.btn-secondary,
.btn-outline-secondary {
    --bs-btn-color: var(--color-text-secondary);
    --bs-btn-bg: var(--color-surface);
    --bs-btn-border-color: var(--color-border-strong);
    --bs-btn-hover-color: var(--color-text);
    --bs-btn-hover-bg: var(--color-surface-secondary);
    --bs-btn-hover-border-color: var(--color-border-strong);
    color: var(--color-text-secondary);
    background: var(--color-surface);
    border-color: var(--color-border-strong);
}

.btn-danger {
    --bs-btn-color: var(--color-on-danger);
    --bs-btn-bg: var(--color-danger);
    --bs-btn-border-color: var(--color-danger);
    --bs-btn-hover-color: var(--color-on-danger);
    --bs-btn-hover-bg: color-mix(in srgb, var(--color-danger) 86%, var(--color-text));
    --bs-btn-hover-border-color: color-mix(in srgb, var(--color-danger) 86%, var(--color-text));
    color: var(--color-on-danger);
    background: var(--color-danger);
    border-color: var(--color-danger);
}

.btn-outline-danger {
    --bs-btn-color: var(--color-danger);
    --bs-btn-border-color: var(--color-danger);
    --bs-btn-hover-color: var(--color-danger);
    --bs-btn-hover-bg: var(--color-danger-soft);
    --bs-btn-hover-border-color: var(--color-danger);
    color: var(--color-danger);
    background: var(--color-surface);
    border-color: var(--color-danger);
}

.btn:disabled,
.btn.disabled {
    color: var(--color-disabled-text);
    background: var(--color-disabled-bg);
    border-color: var(--color-disabled-bg);
    opacity: 1;
}

.btn-link {
    color: var(--color-primary);
}

.btn-link:hover {
    color: var(--color-primary-hover);
}

/* Ordinary shared cards and KPI components are neutral. */
.app-main :is(
    .panel,
    .metric-card,
    .stat-card,
    .cost-card,
    .overview-card,
    .overview-metric,
    .context-metric,
    .decision-panel
) {
    color: var(--color-text);
    background: var(--color-surface);
    background-image: none;
    border-color: var(--color-border);
    box-shadow: var(--shadow-card);
}

.app-main :is(.metric-card, .stat-card, .cost-card, .overview-card, .overview-metric, .context-metric)::before,
.app-main :is(.metric-card, .stat-card, .cost-card, .overview-card, .overview-metric, .context-metric)::after {
    content: none;
}

.app-main :is(.metric-card, .stat-card, .cost-card, .overview-card, .overview-metric, .context-metric):hover {
    background: var(--color-surface);
    border-color: var(--color-border);
    box-shadow: var(--shadow-card);
    transform: none;
}

.app-main :is(.stat-card-link, a.stat-card, a.metric-card):hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-card-hover);
}

.app-main :is(
    .metric-value,
    .stat-value,
    .cost-value,
    .overview-value,
    .context-metric-value,
    .kpi-value
) {
    color: var(--color-text);
}

.app-main :is(
    .metric-label,
    .stat-label,
    .cost-label,
    .overview-label,
    .context-metric-label,
    .kpi-label
) {
    color: var(--color-text-secondary);
}

.app-main :is(
    .metric-note,
    .stat-note,
    .cost-note,
    .overview-note,
    .context-metric-note,
    .kpi-note
) {
    color: var(--color-text-muted);
}

/* Accent utility classes no longer decorate ordinary cards. */
:is(.accent-teal, .accent-blue, .accent-mint, .accent-green, .accent-coral, .accent-amber, .accent-purple) {
    --card-accent: var(--color-border-strong);
    --mobile-card-accent: var(--color-border);
    --accent-soft: var(--color-surface-secondary);
    --accent-line: var(--color-border);
}

/* Ordinary card icons are neutral; state containers can opt into semantic icons. */
.app-main :is(.metric-card, .stat-card, .cost-card, .overview-card, .overview-metric, .context-metric) :is(.icon, .stat-icon, .metric-icon) {
    color: var(--color-text-secondary);
    background: var(--color-surface-secondary);
    background-image: none;
    border-color: var(--color-border);
    box-shadow: none;
    filter: none;
}

.app-main :is(.metric-card, .stat-card, .cost-card, .overview-card, .overview-metric, .context-metric) :is(.icon, .stat-icon, .metric-icon) i {
    color: inherit;
    filter: none;
}

/* Badges and pills */
:is(.badge, .status-pill, .data-reliability-badge, .security-badge, .action-pill, .source-badge, .demo-status) {
    color: var(--color-text-secondary);
    background: var(--color-surface-secondary);
    border-color: var(--color-border);
    box-shadow: none;
}

:is(.badge, .status-pill, .data-reliability-badge, .source-badge, .demo-status):is(.status-good, .tone-good, .is-good, .bg-success) {
    color: var(--color-success) !important;
    background: var(--color-success-soft) !important;
    border-color: color-mix(in srgb, var(--color-success) 30%, var(--color-border)) !important;
}

:is(.badge, .status-pill, .data-reliability-badge, .source-badge, .demo-status):is(.status-warn, .tone-warning, .is-warning, .bg-warning) {
    color: var(--color-warning) !important;
    background: var(--color-warning-soft) !important;
    border-color: color-mix(in srgb, var(--color-warning) 30%, var(--color-border)) !important;
}

:is(.badge, .status-pill, .data-reliability-badge, .source-badge, .demo-status):is(.status-bad, .tone-danger, .is-danger, .bg-danger) {
    color: var(--color-danger) !important;
    background: var(--color-danger-soft) !important;
    border-color: color-mix(in srgb, var(--color-danger) 30%, var(--color-border)) !important;
}

:is(.badge, .status-pill, .data-reliability-badge, .source-badge, .demo-status):is(.status-info, .tone-info, .is-info, .bg-info) {
    color: var(--color-info) !important;
    background: var(--color-info-soft) !important;
    border-color: color-mix(in srgb, var(--color-info) 30%, var(--color-border)) !important;
}

.status-pill:is(.status-good, .tone-good, .is-good)::before {
    content: "✓";
}

.status-pill:is(.status-warn, .tone-warning, .is-warning)::before {
    content: "!";
}

.status-pill:is(.status-bad, .tone-danger, .is-danger)::before {
    content: "×";
}

.status-pill:is(.status-info, .tone-info, .is-info)::before {
    content: "i";
}

.status-pill::before {
    font-weight: 850;
}

.demo-mode-banner,
.demo-login-notice {
    color: var(--color-info);
    background: var(--color-info-soft);
    background-image: none;
    border: 1px solid color-mix(in srgb, var(--color-info) 28%, var(--color-border));
    box-shadow: none;
}

.demo-mode-banner span,
.demo-login-notice span {
    color: var(--color-text-secondary);
    opacity: 1;
}

/* Progress indicators are primary by default; semantics require explicit classes. */
:is(.progress, .progress-track, .mini-progress, .bar-track) {
    background: var(--color-surface-secondary);
}

:is(.progress, .progress-track, .mini-progress, .bar-track) > :is(.progress-bar, span) {
    background: var(--color-primary);
    background-image: none;
}

:is(.progress, .progress-track, .mini-progress, .bar-track).status-good > :is(.progress-bar, span) {
    background: var(--color-success);
}

:is(.progress, .progress-track, .mini-progress, .bar-track).status-warn > :is(.progress-bar, span) {
    background: var(--color-warning);
}

:is(.progress, .progress-track, .mini-progress, .bar-track).status-bad > :is(.progress-bar, span) {
    background: var(--color-danger);
}

/* Shared icon controls */
:is(.info-dot, .auto-info-dot) {
    color: var(--color-info);
    background: var(--color-info-soft);
    border-color: color-mix(in srgb, var(--color-info) 28%, var(--color-border));
}

/* Desktop navigation */
.app-sidebar {
    background: var(--color-surface);
    background-image: none;
    border-right-color: var(--color-border);
    box-shadow: var(--shadow-navigation);
}

.brand-block,
.app-sidebar .brand-block {
    background: var(--color-surface);
    background-image: none;
    border-bottom-color: var(--color-border);
}

.brand-name {
    color: var(--color-text);
}

.nav-section {
    color: var(--color-text-muted);
}

.side-nav a,
.nav-form button {
    color: var(--color-text-secondary);
    background: transparent;
    border-color: transparent;
}

.side-nav a:hover,
.nav-form button:hover {
    color: var(--color-primary-active);
    background: var(--color-primary-soft);
    border-color: var(--color-border);
}

.side-nav a.is-active,
.nav-form button.is-active {
    color: var(--color-primary-active);
    background: var(--color-primary-soft);
    border-color: color-mix(in srgb, var(--color-primary) 28%, var(--color-border));
    box-shadow: inset 3px 0 0 var(--color-primary);
}

.nav-icon,
.side-nav a:hover .nav-icon,
.nav-form button:hover .nav-icon,
.side-nav a.is-active .nav-icon {
    color: var(--color-text-secondary);
    background: var(--color-surface-secondary);
    background-image: none;
    box-shadow: none;
}

.side-nav a.is-active .nav-icon,
.nav-form button.is-active .nav-icon {
    color: var(--color-primary);
    background: var(--color-primary-soft);
}

/* Global top navigation */
.topbar {
    color: var(--color-on-primary);
    background: var(--color-primary);
    background-image: none;
    border-bottom-color: var(--color-primary-active);
    box-shadow: var(--shadow-navigation);
}

.topbar :is(.topbar-chip, .topbar-nav-btn, .topbar-form .btn) {
    color: var(--color-on-primary);
    background: var(--color-on-primary-soft);
    border-color: var(--color-on-primary-border);
}

.topbar :is(.topbar-chip, .topbar-nav-btn, .topbar-form .btn):hover,
.topbar :is(.topbar-chip, .topbar-nav-btn, .topbar-form .btn):focus-visible {
    color: var(--color-on-primary);
    background: color-mix(in srgb, var(--color-on-primary) 20%, transparent);
    border-color: color-mix(in srgb, var(--color-on-primary) 36%, transparent);
}

.topbar :is(.topbar-chip, .topbar-nav-btn, .topbar-form .btn) i {
    color: inherit;
}

.topbar .topbar-chip :is(i, span) {
    color: inherit;
}

.topbar-chip.notification-chip strong,
.mobile-nav-badge {
    color: var(--color-on-danger);
    background: var(--color-danger);
    border-color: var(--color-surface);
}

.mobile-topbar-brand img {
    filter: none;
}

.mobile-nav-close {
    color: var(--color-primary);
    background: var(--color-primary-soft);
    border-color: var(--color-border);
}

.app-sidebar-backdrop {
    background: var(--color-overlay);
}

/* Mobile persistent navigation */
.mobile-bottom-nav {
    background: var(--color-surface);
    border-color: var(--color-border);
    box-shadow: var(--shadow-navigation);
}

.mobile-bottom-nav :is(a, button) {
    color: var(--color-text-muted);
    background: transparent;
}

.mobile-bottom-nav :is(a, button):hover {
    color: var(--color-primary);
    background: var(--color-primary-soft);
}

.mobile-bottom-nav :is(a.is-active, button.is-active) {
    color: var(--color-primary);
    background: var(--color-primary-soft);
    box-shadow: inset 0 -3px 0 var(--color-primary);
}

.analysis-subnav {
    background: var(--color-surface-secondary);
    border-color: var(--color-border);
}

.analysis-subnav a {
    color: var(--color-text-secondary);
}

.analysis-subnav a:hover {
    color: var(--color-primary);
    background: var(--color-primary-soft);
}

.analysis-subnav a.is-active {
    color: var(--color-primary-active);
    background: var(--color-surface);
    box-shadow: inset 0 -3px 0 var(--color-primary);
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}