/* Automatic system theme. The light palette remains defined by base.css/ui-kit.css. */

@media screen and (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;

        --basic-100: #171e2c;
        --basic-200: #1d2637;
        --basic-300: #273247;
        --basic-400: #34415a;
        --basic-500: #71809a;
        --basic-600: #a9b5c8;
        --basic-700: #ccd5e3;
        --basic-800: #e5eaf2;
        --basic-900: #f7f9fc;

        --primary-500: #7c9cff;
        --primary-600: #9ab3ff;
        --primary-700: #bfd0ff;
        --success-500: #35c995;
        --success-600: #6be0b5;
        --info-500: #58b5ff;
        --warning-500: #f4b849;
        --danger-500: #ff6d98;
        --danger-600: #ff91b0;
        --danger-700: #ffabc2;

        --ui-canvas: #0d121c;
        --ui-surface: #171e2c;
        --ui-surface-muted: #1d2637;
        --ui-surface-selected: #24365d;
        --ui-border: #34415a;
        --ui-border-strong: #465570;
        --ui-text: #f7f9fc;
        --ui-text-secondary: #ccd5e3;
        --ui-text-muted: #a9b5c8;
        --ui-focus: rgba(124, 156, 255, 0.42);
        --ui-primary-solid: #4165d6;
        --ui-primary-solid-hover: #3557c2;
        --ui-shadow-panel: 0 4px 8px rgba(0, 0, 0, 0.24);
        --ui-shadow-popover: 0 6px 12px rgba(0, 0, 0, 0.36);

        --border-color: var(--ui-border);
        --surface-color: var(--ui-surface);
        --text-color: var(--ui-text);
        --text-muted: var(--ui-text-muted);
        --shadow-soft: var(--ui-shadow-panel);
        --shadow-card: none;
    }

    html {
        background: var(--ui-canvas);
    }

    body.ui-app {
        color: var(--ui-text);
        background:
            radial-gradient(circle at top right, rgba(76, 111, 220, 0.16), transparent 30%),
            linear-gradient(180deg, #111824 0%, var(--ui-canvas) 100%);
    }

    ::selection {
        background: rgba(124, 156, 255, 0.32);
        color: var(--ui-text);
    }

    input,
    textarea,
    select {
        border-color: var(--ui-border-strong);
        background: var(--ui-surface);
        color: var(--ui-text);
    }

    option {
        background: var(--ui-surface);
        color: var(--ui-text);
    }

    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus {
        -webkit-text-fill-color: var(--ui-text);
        box-shadow: 0 0 0 1000px var(--ui-surface) inset;
    }

    .app-nav,
    .panel,
    .section-card,
    .card,
    .stat-card,
    .mini-card,
    .fold-card,
    .table-shell,
    .summary-pill,
    .file-picker-summary,
    .help-trigger {
        border-color: var(--ui-border);
        background: var(--ui-surface);
    }

    .mini-card,
    .mini-card.current {
        background: var(--ui-surface);
    }

    .mini-card.current,
    .summary-pill.primary {
        border-color: rgba(124, 156, 255, 0.38);
        background: var(--ui-surface-selected);
    }

    .fold-summary,
    th,
    .notice,
    .ui-split-aside,
    .ui-segmented,
    .web-tabs {
        background: var(--ui-surface-muted);
    }

    .upload-surface {
        border-color: rgba(124, 156, 255, 0.46);
        background: linear-gradient(180deg, rgba(124, 156, 255, 0.1), var(--ui-surface));
    }

    .help-popover,
    .ui-tooltip {
        border-color: var(--ui-border-strong);
        background: #202a3c;
        color: var(--ui-text-secondary);
        box-shadow: var(--ui-shadow-popover);
    }

    .help-popover::after {
        border-color: var(--ui-border-strong);
        background: #202a3c;
    }

    .button:not(.secondary):not(.ghost):not(.danger),
    .nav-link.active,
    .nav-link[aria-current="page"] {
        background: var(--ui-primary-solid);
        color: #ffffff;
    }

    .button:not(.secondary):not(.ghost):not(.danger):hover {
        background: var(--ui-primary-solid-hover);
    }

    .button.secondary {
        border-color: rgba(124, 156, 255, 0.5);
        background: var(--ui-surface);
        color: var(--primary-600);
    }

    .button.secondary:hover,
    .button.ghost:hover,
    .nav-link:hover {
        background: var(--ui-surface-muted);
        color: var(--ui-text);
    }

    .button.danger,
    .notice.error {
        border-color: rgba(255, 109, 152, 0.36);
        background: rgba(255, 109, 152, 0.12);
        color: var(--danger-600);
    }

    .notice.success {
        border-color: rgba(53, 201, 149, 0.34);
        background: rgba(53, 201, 149, 0.11);
    }

    .notice.info {
        border-color: rgba(88, 181, 255, 0.34);
        background: rgba(88, 181, 255, 0.11);
    }

    .badge.success,
    .summary-pill.success,
    .tone-success,
    .cv-status-success,
    .cv-chip-success {
        background: rgba(53, 201, 149, 0.14);
        color: #79e7bd;
    }

    .badge.warning,
    .summary-pill.warning,
    .tone-warning,
    .cv-status-warning,
    .cv-chip-warning,
    .trace-warning,
    .source-record-warning {
        border-color: rgba(244, 184, 73, 0.36);
        background: rgba(244, 184, 73, 0.14);
        color: #ffd27a;
    }

    .badge.danger,
    .summary-pill.danger,
    .tone-danger,
    .cv-status-danger {
        background: rgba(255, 109, 152, 0.14);
        color: #ffabc2;
    }

    /* B2B search, taxonomies, similarity and geography. */
    .b2b-filter-section,
    .b2b-taxonomy-card,
    .b2b-search-mode-option,
    .b2b-similarity-policy,
    .b2b-map-data-filters {
        border-color: var(--ui-border);
        background: var(--ui-surface);
    }

    .b2b-pinned-section {
        background: var(--ui-surface-muted);
    }

    .b2b-pin-button,
    .b2b-help::after,
    .b2b-okved-options,
    .b2b-okved-tree,
    .b2b-similarity-chips span,
    .b2b-similarity-reasons span,
    .b2b-seed-audit-row,
    .b2b-similarity-pagination a,
    .b2b-geo-trigger,
    .b2b-geo-popover {
        border-color: var(--ui-border-strong);
        background: var(--ui-surface);
        color: var(--ui-text-secondary);
    }

    .b2b-taxonomy-summary {
        border-color: var(--ui-border);
        background: linear-gradient(180deg, #1c2942, var(--ui-surface) 140px);
    }

    .b2b-search-mode-option:has(input:checked),
    .b2b-similarity-pagination a:hover,
    .b2b-similarity-pagination a:focus-visible,
    .b2b-geo-trigger:hover,
    .b2b-geo-trigger:focus-visible,
    .b2b-geo-trigger[aria-expanded="true"],
    .b2b-geo-option[aria-selected="true"],
    .b2b-geo-clear:hover,
    .b2b-geo-clear:focus-visible {
        border-color: rgba(124, 156, 255, 0.5);
        background: var(--ui-surface-selected);
    }

    .b2b-geo-clear,
    .b2b-geo-option:hover,
    .b2b-geo-option:focus-visible,
    .b2b-okved-option:hover,
    .b2b-okved-option:focus-visible {
        background: var(--ui-surface-muted);
    }

    .taxonomy-master-row:hover,
    .taxonomy-master-row.is-active,
    .cv-table tbody tr:hover > td {
        background: var(--ui-surface-muted);
    }

    /* B2C workspace, map cards and relationship graph. */
    .b2c-workspace {
        color-scheme: dark;
        --ink: var(--ui-text);
        --ink-2: var(--ui-text-secondary);
        --muted: var(--ui-text-muted);
        --line: var(--ui-border);
        --line-strong: var(--ui-border-strong);
        --canvas: var(--ui-surface-muted);
        --surface: var(--ui-surface);
        --accent: var(--primary-600);
        --accent-hover: var(--primary-700);
        --signal: var(--primary-600);
        --signal-soft: var(--ui-surface-selected);
        --danger: var(--danger-600);
        --focus: var(--primary-500);
    }

    .file-trigger span,
    .unpin-filter,
    .pin-filter,
    .advanced-panel,
    .dataset-picker,
    .dataset-option,
    .map-data-filters,
    .entity-fact,
    .entity-coordinate,
    .rel-graph-legend {
        border-color: var(--ui-border);
        background: var(--ui-surface);
        color: var(--ui-text-secondary);
    }

    .pinned-filters,
    .advanced-content,
    .advanced-panel > summary:hover,
    .dataset-picker > summary:hover,
    .trace-section > header,
    .source-record-item > summary:hover {
        background: var(--ui-surface-muted);
    }

    .trace-origin {
        border-color: rgba(124, 156, 255, 0.36);
        background: linear-gradient(115deg, rgba(124, 156, 255, 0.16), var(--ui-surface) 58%);
    }

    .map-submit-dock {
        border-color: var(--ui-border-strong);
        background: rgba(23, 30, 44, 0.97);
    }

    .map-metrics > div {
        background: rgba(23, 30, 44, 0.96);
    }

    .is-loading .result-surface {
        background: linear-gradient(100deg, #1d2637 20%, #29364c 40%, #1d2637 60%);
        background-size: 200% 100%;
    }

    .entity-facts {
        background: var(--ui-border);
    }

    .rel-graph-node > rect:first-child {
        fill: var(--ui-surface);
        stroke: var(--ui-border-strong);
    }

    .rel-graph-node:hover > rect:first-child,
    .rel-graph-node:focus-visible > rect:first-child,
    .rel-graph-node.is-selected > rect:first-child,
    .rel-graph-node.is-cluster > rect:first-child {
        fill: var(--ui-surface-selected);
    }

    .rel-graph-value {
        fill: var(--ui-text);
    }

    .rel-graph-kind {
        fill: var(--ui-text-muted);
    }

    /* Imports and bulk enrichment. */
    .imports-shell .field input,
    .imports-shell .field select,
    .rule-mark,
    .summary-link,
    .source-option,
    .output-mode-grid label,
    .field-picker label span {
        border-color: var(--ui-border-strong);
        background: var(--ui-surface);
        color: var(--ui-text-secondary);
    }

    .batch-row:hover,
    .input-switch button.is-active,
    .preset-row button:hover,
    .format-switch label:has(input:checked) span {
        background: var(--ui-surface-muted);
    }

    .source-option:has(input:checked),
    .output-mode-grid label:has(input:checked),
    .field-picker label:has(input:checked) span {
        background: var(--ui-surface-selected);
    }

    /* Map search and MapLibre chrome. */
    .map-status,
    .time-chip span,
    .map-inline-note,
    .map-kpi-card,
    .detail-stat {
        border-color: var(--ui-border);
        background: var(--ui-surface-muted);
        color: var(--ui-text-secondary);
    }

    .maplibregl-popup-content,
    .maplibregl-ctrl-group {
        background: var(--ui-surface);
        color: var(--ui-text);
    }

    .maplibregl-popup-tip {
        border-top-color: var(--ui-surface);
        border-bottom-color: var(--ui-surface);
    }

    .maplibregl-ctrl-group button + button {
        border-color: var(--ui-border);
    }

    .maplibregl-ctrl button .maplibregl-ctrl-icon {
        filter: invert(1) brightness(1.45);
    }

    .maplibregl-canvas {
        filter: brightness(0.72) saturate(0.78) contrast(1.08);
    }

    /* Web enrichment and shared status tones. */
    .web-status-running,
    .web-status-queued,
    .web-status-pending,
    .tone-info {
        background: rgba(124, 156, 255, 0.15);
        color: #aac0ff;
    }

    .web-status-completed,
    .web-status-succeeded,
    .web-status-no_data {
        background: rgba(53, 201, 149, 0.14);
        color: #79e7bd;
    }

    .web-status-partial,
    .web-status-rate_limited,
    .web-status-not_scheduled {
        background: rgba(244, 184, 73, 0.14);
        color: #ffd27a;
    }

    .web-status-failed,
    .web-status-error,
    .web-status-timeout,
    .web-status-blocked,
    .web-status-schema_drift,
    .web-status-captcha {
        background: rgba(255, 109, 152, 0.14);
        color: #ffabc2;
    }
}


/* Browser-audit fixes: contrast, dark surfaces, and compact mobile navigation. */
@media screen and (prefers-color-scheme: dark) {
    .skip-link {
        background: #f7f9fc;
        color: #101626;
        border-color: rgba(255, 255, 255, 0.72);
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.42);
    }

    .bulk-step-marker.is-active span,
    .bulk-step-marker.is-complete span {
        background: #456bd9;
        color: #ffffff;
    }

    .b2b-pin-button.is-pinned {
        border-color: rgba(124, 156, 255, 0.62);
        background: rgba(72, 112, 229, 0.24);
        color: #dce6ff;
    }

    .b2b-okved-toggle {
        color: #a9bdff;
    }

    .b2b-wb-index-status {
        border-color: rgba(244, 184, 73, 0.34);
        background: rgba(244, 184, 73, 0.12);
        color: #ffd27a;
    }

    .b2b-wb-index-status[data-state="ready"] {
        border-color: rgba(53, 201, 149, 0.34);
        background: rgba(53, 201, 149, 0.11);
        color: #79e7bd;
    }

    .b2b-wb-index-status[data-state="error"] {
        border-color: rgba(255, 123, 139, 0.34);
        background: rgba(255, 123, 139, 0.11);
        color: #ffb0bb;
    }

    .b2b-wb-index-status[data-state="disabled"] {
        border-color: var(--ui-border);
        background: rgba(142, 157, 181, 0.08);
        color: var(--ui-text-muted);
    }
}

@media screen and (max-width: 640px) {
    .app-header .app-nav {
        display: grid !important;
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        gap: 4px !important;
        width: 100%;
        padding: 5px !important;
    }

    .app-header .app-nav .nav-link {
        width: 100%;
        min-width: 0;
        min-height: 34px;
        padding: 8px 2px !important;
        font-size: clamp(0.68rem, 3vw, 0.72rem);
        line-height: 1.15;
        letter-spacing: 0;
        white-space: nowrap;
    }
}


/* High-specificity fixes for page styles loaded after the shared theme. */
@media screen and (prefers-color-scheme: dark) {
    html .skip-link {
        background: #2f4f9f !important;
        color: #ffffff !important;
        border-color: rgba(169, 189, 255, 0.72) !important;
    }

    html .b2b-okved-toggle {
        color: #a9bdff !important;
    }

    html .b2b-wb-index-status {
        border-color: rgba(244, 184, 73, 0.34) !important;
        background: rgba(244, 184, 73, 0.12) !important;
        color: #ffd27a !important;
    }

    html .b2b-wb-index-status[data-state="ready"] {
        border-color: rgba(53, 201, 149, 0.34) !important;
        background: rgba(53, 201, 149, 0.11) !important;
        color: #79e7bd !important;
    }

    html .b2b-wb-index-status[data-state="error"] {
        border-color: rgba(255, 123, 139, 0.34) !important;
        background: rgba(255, 123, 139, 0.11) !important;
        color: #ffb0bb !important;
    }

    html .b2b-wb-index-status[data-state="disabled"] {
        border-color: var(--ui-border) !important;
        background: rgba(142, 157, 181, 0.08) !important;
        color: var(--ui-text-muted) !important;
    }
}


@media screen and (prefers-color-scheme: light) {
    html .b2b-pin-button:not(.is-pinned) {
        border-color: #8998af !important;
        background: #ffffff !important;
        color: #52627c !important;
    }
}


/* Dark interaction states audited on populated B2B results. */
@media screen and (prefers-color-scheme: dark) {
    ::selection {
        background: #3157a4;
        color: #ffffff;
        text-shadow: none;
    }

    ::-moz-selection {
        background: #3157a4;
        color: #ffffff;
        text-shadow: none;
    }

    html .b2b-taxonomy-name {
        color: #f0f4ff !important;
    }

    html .b2b-taxonomy-name-fill {
        background: rgba(78, 116, 222, 0.34) !important;
    }

    html .b2b-rich-link,
    html .b2b-rich-link:visited {
        color: #9bb7ff !important;
        text-decoration-color: rgba(155, 183, 255, 0.58);
        text-underline-offset: 0.14em;
    }

    html .b2b-rich-link:hover {
        color: #c7d5ff !important;
        text-decoration-color: currentColor;
    }

    html .b2b-rich-link:focus-visible {
        color: #dbe4ff !important;
        outline: 2px solid #8eabff;
        outline-offset: 2px;
        border-radius: 2px;
    }

    html .b2b-preview-separator {
        color: #aab8d0 !important;
    }
}


@media screen and (prefers-color-scheme: dark) {
    html .b2b-table tbody tr:hover > td {
        background: rgba(80, 112, 190, 0.10) !important;
        color: var(--ui-text) !important;
    }
}