:root,
html[data-theme="light"] {
    --theme-bg: #f5f7fa;
    --theme-surface: #ffffff;
    --theme-surface-elevated: #ffffff;
    --theme-surface-muted: #f8fafc;
    --theme-control-bg: #ffffff;
    --theme-text: #1f2933;
    --theme-muted: #52606d;
    --theme-border: #d9e2ec;
    --theme-border-strong: #bcccdc;
    --theme-input-bg: #ffffff;
    --theme-hover-bg: #eef4f8;
    --theme-shadow: rgba(15, 23, 42, 0.08);
    --theme-focus-ring: rgba(0, 178, 147, 0.16);
    --theme-table-cell: #ffffff;
    --theme-table-sticky: #ffffff;
    --theme-table-sticky-strong: #eef2f6;
    --theme-table-header: #eaf4f1;
    --theme-table-row-hover: #f8fafc;
    --theme-selected-bg: #d1e7dd;
    --theme-selected-border: #0c5a44;
    --theme-danger-bg: #fff5f5;
    --theme-danger-border: #dc3545;
    --theme-danger-text: #b42318;
    --theme-danger-hover-bg: #ffe3e3;
    --theme-danger-hover-text: #8a1c13;
    --theme-error-bg: #f8d7da;
    --theme-error-border: #f5c2c7;
    --theme-error-text: #842029;
    --theme-message-bg: #d1e7dd;
    --theme-message-border: #c3e6cb;
    --theme-message-text: #0c5a44;
    --theme-warning-bg: #fff7ed;
    --theme-warning-border: #f59e0b;
    --theme-warning-text: #92400e;
    --theme-favorite-bg: #fff7ed;
    --theme-favorite-border: #f59e0b;
    --theme-favorite-text: #b45309;
    --theme-primary-bg: #00b293;
    --theme-primary-hover-bg: #097a66;
    --theme-primary-text: #ffffff;
    --theme-link: #097a66;
    --theme-link-hover: #075f50;
    --accent: #00b293;
    --accent-dark: #097a66;
    --border: var(--theme-border);
    --border-soft: #e6edf3;
    --text: var(--theme-text);
    --muted: var(--theme-muted);
    --bg: var(--theme-bg);
    --panel: var(--theme-surface);
}

html[data-theme="dark"] {
    color-scheme: dark;
    --theme-bg: #1e1f22;
    --theme-surface: #2b2d30;
    --theme-surface-elevated: #313335;
    --theme-surface-muted: #252629;
    --theme-control-bg: #2b2d30;
    --theme-text: #dfe1e5;
    --theme-muted: #a8adba;
    --theme-border: #3c3f41;
    --theme-border-strong: #4e5157;
    --theme-input-bg: #1e1f22;
    --theme-hover-bg: #34363a;
    --theme-shadow: rgba(0, 0, 0, 0.42);
    --theme-focus-ring: rgba(53, 116, 240, 0.28);
    --theme-table-cell: #202124;
    --theme-table-sticky: #2b2d30;
    --theme-table-sticky-strong: #303236;
    --theme-table-header: #313335;
    --theme-table-row-hover: #2a2c30;
    --theme-selected-bg: #25324a;
    --theme-selected-border: #3574f0;
    --theme-danger-bg: #3b2628;
    --theme-danger-border: #8b3a42;
    --theme-danger-text: #ffccd2;
    --theme-danger-hover-bg: #4a2d31;
    --theme-danger-hover-text: #ffe0e3;
    --theme-error-bg: #3b2628;
    --theme-error-border: #8b3a42;
    --theme-error-text: #ffccd2;
    --theme-message-bg: #222b3d;
    --theme-message-border: #375a8c;
    --theme-message-text: #c7d7ff;
    --theme-warning-bg: #3a2f1d;
    --theme-warning-border: #8d6e2f;
    --theme-warning-text: #f3d18a;
    --theme-favorite-bg: #3a2f1d;
    --theme-favorite-border: #9a7a35;
    --theme-favorite-text: #f3d18a;
    --theme-primary-bg: #2f65ca;
    --theme-primary-hover-bg: #2858b8;
    --theme-primary-text: #ffffff;
    --theme-link: #6ea6ff;
    --theme-link-hover: #9ec1ff;
    --accent: #3574f0;
    --accent-dark: #6ea6ff;
    --border: var(--theme-border);
    --border-soft: #34363a;
    --text: var(--theme-text);
    --muted: var(--theme-muted);
    --bg: var(--theme-bg);
    --panel: var(--theme-surface);
}

body {
    background: var(--theme-bg) !important;
    color: var(--theme-text) !important;
}

.login,
.modal,
.panel,
.project-card,
.favorite-template-card,
.calculator-card,
.calculator-sidebar,
.calculator-panel,
.calculator-result,
.result-metric,
.group-card,
.variant,
.entity-card,
.user-card,
.help-section,
.note,
.table-wrap,
.backup-item,
.checkbox-list,
.selected-users,
.project-user-suggestions,
.modal-window,
.page-tabs,
.variant-template-card,
.toc,
.example,
.workflow,
.sheet-header-scroll,
.section,
.summary,
.presence-panel,
.readonly-note,
.icon-action-group,
.modal-window,
.settings-panel,
.tab-panel,
.role-list,
.management-form,
.role-summary,
.project-create-panel,
.backup-list,
.filters,
.upload-form {
    border-color: var(--theme-border) !important;
    background: var(--theme-surface) !important;
    color: var(--theme-text) !important;
}

.project-settings,
.custom-groups-panel,
.template-option,
.selected-user-chip,
.tab-button,
.role-badge,
.tag,
.empty,
.intro,
.modal-body,
.wizard-progress,
.group-dropdown .checkbox-list,
.project-template-nav,
.variant-template-nav,
.template-pagination,
.deal-input-row,
.saved-calculation-item,
.settings-row,
.section-head,
.visibility-form,
.copy-mode-list,
.formula-panel,
.comparison,
.history-item,
.filter-chip,
.presence-user,
.file-picker,
.settings-tabs,
.settings-tab,
.page-tab,
.role-summary-main,
.group-card-body,
.group-user-list,
.toggle-row,
.template-card,
.webhook-card,
.token-card,
.reference-card,
.metric-card,
.list-card,
.comment-card,
.version-item,
.management-row,
.management-chip,
.secret-box,
.code-box,
.list-row,
.warning,
code,
pre {
    border-color: var(--theme-border) !important;
    background: var(--theme-surface-muted) !important;
    color: var(--theme-text) !important;
}

input,
select,
textarea,
summary,
.user-switch-select,
button:not(.primary):not(.danger):not(.active):not(.theme-button):not(.appnav-btn):not(.card-ghost):not(.project-title-button):not(.variant-title-button):not(.group-text-button),
.button:not(.primary):not(.danger):not(.active):not(.card-ghost) {
    border-color: var(--theme-border-strong) !important;
    background: var(--theme-input-bg) !important;
    color: var(--theme-text) !important;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--accent) !important;
    outline-color: var(--theme-focus-ring) !important;
}

input:disabled,
textarea:disabled,
select:disabled {
    color: var(--theme-muted) !important;
    -webkit-text-fill-color: var(--theme-muted);
}

input::placeholder,
textarea::placeholder {
    color: var(--theme-muted) !important;
    opacity: 1;
}

.brand-link,
.project-title-button,
.variant-title-button,
.variant-title-text,
.card-title,
h1,
h2,
h3,
th,
td,
label,
.wizard-field,
.check-row,
.group-search,
.variant-user-search,
.selected-list,
.formula-hint {
    color: var(--theme-text) !important;
}

.page-title,
.user,
.meta,
.status,
.muted,
.subtitle,
.variant-meta,
.project-meta,
.calculator-meta,
.project-template-nav-title,
.presence-title,
.presence-cell,
.presence-empty,
.file-picker-meta,
.history-meta,
.comparison-diff,
.visibility-status {
    color: var(--theme-muted) !important;
}

.favorite-template-type {
    color: var(--theme-muted) !important;
}

html[data-theme="dark"] .intro,
html[data-theme="dark"] .help-section {
    background: var(--theme-surface) !important;
    color: var(--theme-text) !important;
}

html[data-theme="dark"] .intro {
    border-left-color: var(--accent) !important;
}

html[data-theme="dark"] .help-section p,
html[data-theme="dark"] .help-section ul,
html[data-theme="dark"] .help-section ol,
html[data-theme="dark"] .help-section li {
    color: var(--theme-text) !important;
}

html[data-theme="dark"] .intro .lead,
html[data-theme="dark"] .help-section .lead {
    color: var(--theme-muted) !important;
}

html[data-theme="dark"] .note strong,
html[data-theme="dark"] .example strong,
html[data-theme="dark"] .workflow strong,
html[data-theme="dark"] .help-section strong {
    color: var(--theme-text) !important;
}

html[data-theme="dark"] .warning,
html[data-theme="dark"] .warning p,
html[data-theme="dark"] .warning ul,
html[data-theme="dark"] .warning ol,
html[data-theme="dark"] .warning li,
html[data-theme="dark"] .warning strong {
    color: var(--theme-warning-text) !important;
}

a:not(.button):not(.brand-link):not(.variant-tab):not(.appnav-link) {
    color: var(--theme-link) !important;
}

a:not(.button):not(.brand-link):not(.variant-tab):not(.appnav-link):hover {
    color: var(--theme-link-hover) !important;
}

table,
th,
td,
.formula-table,
.role-table {
    border-color: var(--theme-border) !important;
}

table {
    background: var(--theme-table-cell) !important;
}

th {
    background: var(--theme-table-header) !important;
}

td {
    background: var(--theme-table-cell) !important;
}

.sheet-header-table th,
.column-header,
.product-head {
    background: var(--theme-table-header) !important;
}

.corner-head,
.row-number-cell {
    background: var(--theme-table-sticky-strong) !important;
}

.product-cell {
    background: var(--theme-table-sticky) !important;
}

tr:hover td,
tbody tr:hover td,
tbody tr:hover th,
.suggestion-button:hover,
.file-picker:hover,
.button:not(.primary):not(.danger):hover,
button:not(.primary):not(.danger):not(.theme-button):not(.appnav-btn):not(.project-title-button):not(.variant-title-button):not(.group-text-button):hover {
    background: var(--theme-hover-bg) !important;
}

.button:not(.primary):not(.danger):not(.card-ghost):hover,
button:not(.primary):not(.danger):not(.theme-button):not(.appnav-btn):not(.card-ghost):not(.project-title-button):not(.variant-title-button):hover {
    border-color: var(--accent) !important;
    color: var(--accent-dark) !important;
}

html[data-theme="dark"] input[type="checkbox"],
html[data-theme="dark"] input[type="radio"] {
    accent-color: var(--accent) !important;
}

.row-number,
.column-letter,
.drag-handle {
    border-color: var(--theme-border-strong) !important;
    background: var(--theme-surface-muted) !important;
    color: var(--theme-muted) !important;
}

.value-cell.selected {
    border-color: var(--theme-selected-border) !important;
    background: var(--theme-selected-bg) !important;
    color: var(--theme-text) !important;
    box-shadow: inset 0 0 0 2px var(--theme-selected-border) !important;
}

.value-cell.selected.remote-active {
    box-shadow: inset 0 0 0 2px var(--theme-selected-border), inset 0 0 0 4px var(--presence-color, #2563eb) !important;
}

.filter-apply.active {
    border-color: var(--theme-selected-border) !important;
    background: var(--theme-selected-bg) !important;
    color: var(--theme-text) !important;
}

.cell-history-button {
    color: var(--theme-muted) !important;
}

.cell-history-button:hover {
    border-color: var(--theme-border) !important;
    background: var(--theme-hover-bg) !important;
    color: var(--accent-dark) !important;
}

.cell-presence-badge {
    border-color: var(--theme-table-cell) !important;
}

#sticky-period-header,
#sticky-period-header .header-row {
    background: var(--theme-primary-bg) !important;
    color: var(--theme-primary-text) !important;
}

#sticky-period-header .header-cell,
.section-header {
    border-color: var(--theme-primary-hover-bg) !important;
    background: var(--theme-primary-bg) !important;
    color: var(--theme-primary-text) !important;
}

#sticky-period-header .header-cell:hover,
#sticky-period-header .header-cell.active,
.active-header,
.dim-header {
    border-color: var(--theme-primary-hover-bg) !important;
    background: var(--theme-primary-hover-bg) !important;
    color: var(--theme-primary-text) !important;
}

.section-subheader,
.table-section-header {
    border-color: var(--theme-border) !important;
    background: var(--theme-table-header) !important;
    color: var(--theme-text) !important;
}

.highlight-col,
.selected-cell {
    border-color: var(--theme-selected-border) !important;
    background: var(--theme-selected-bg) !important;
    color: var(--theme-text) !important;
}

.dim,
.dim-row {
    background: var(--theme-surface-muted) !important;
    color: var(--theme-muted) !important;
    filter: none !important;
}

.total {
    border-color: var(--theme-message-border) !important;
    background: var(--theme-message-bg) !important;
    color: var(--theme-message-text) !important;
}

.total strong {
    color: var(--accent-dark) !important;
}

html[data-theme="dark"] [style*="color: #000000"],
html[data-theme="dark"] [style*="color:#000000"],
html[data-theme="dark"] [style*="color: black"],
html[data-theme="dark"] [style*="color:black"] {
    color: var(--theme-text) !important;
}

html[data-theme="dark"] [style*="color: #d32f2f"],
html[data-theme="dark"] [style*="color:#d32f2f"] {
    color: var(--theme-danger-text) !important;
}

html[data-theme="dark"] [style*="color: #097a66"],
html[data-theme="dark"] [style*="color:#097a66"] {
    color: var(--accent-dark) !important;
}

html[data-theme="dark"] [style*="color: #00b293"],
html[data-theme="dark"] [style*="color:#00b293"] {
    color: var(--accent) !important;
}

html[data-theme="dark"] [style*="border-bottom"] {
    border-bottom-color: var(--accent) !important;
}

.summary-total,
.formula-result,
.comparison-title,
.brand-link:hover,
.variant-title-button:hover,
.project-title-button:hover {
    color: var(--accent-dark) !important;
}

button.primary,
.button.primary,
.variant-tab.active,
.page-tab.active,
.settings-tab.active,
.wizard-step-button.active,
.project-template-nav-link.active,
.variant-template-nav-link.active,
.theme-button.active {
    border-color: var(--theme-primary-bg) !important;
    background: var(--theme-primary-bg) !important;
    color: var(--theme-primary-text) !important;
}

button.primary:hover,
.button.primary:hover,
.variant-tab.active:hover,
.page-tab.active:hover,
.settings-tab.active:hover,
.wizard-step-button.active:hover,
.project-template-nav-link.active:hover,
.variant-template-nav-link.active:hover {
    border-color: var(--theme-primary-hover-bg) !important;
    background: var(--theme-primary-hover-bg) !important;
    color: var(--theme-primary-text) !important;
}

.message {
    border-color: var(--theme-message-border) !important;
    background: var(--theme-message-bg) !important;
    color: var(--theme-message-text) !important;
}

/* Пройденный шаг маршрута согласования. Цвет живёт здесь, а не на странице:
   `.list-row` выше красится темой через !important, и правило страницы до
   строки маршрута не дотянулось бы. */
.route-step.is-signed {
    border-color: var(--theme-message-border) !important;
    background: var(--theme-message-bg) !important;
}

.error {
    border-color: var(--theme-error-border) !important;
    background: var(--theme-error-bg) !important;
    color: var(--theme-error-text) !important;
}

button.danger,
.button.danger {
    border-color: var(--theme-danger-border) !important;
    background: var(--theme-danger-bg) !important;
    color: var(--theme-danger-text) !important;
}

button.danger:hover,
.button.danger:hover {
    border-color: var(--theme-danger-border) !important;
    background: var(--theme-danger-hover-bg) !important;
    color: var(--theme-danger-hover-text) !important;
}

.lock-button.locked {
    border-color: var(--theme-warning-border) !important;
    background: var(--theme-warning-bg) !important;
    color: var(--theme-warning-text) !important;
}

.favorite-button.active {
    border-color: var(--theme-favorite-border) !important;
    background: var(--theme-favorite-bg) !important;
    color: var(--theme-favorite-text) !important;
}

.favorite-button.active .button-icon {
    fill: currentColor;
}

.warning {
    border-color: var(--theme-warning-border) !important;
    background: var(--theme-warning-bg) !important;
    color: var(--theme-warning-text) !important;
}

.modal-backdrop {
    background: rgba(4, 8, 7, 0.72) !important;
}

.theme-control {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    min-height: 40px;
    padding: 3px;
    border: 1px solid var(--theme-border);
    border-radius: 8px;
    background: var(--theme-control-bg);
    box-shadow: 0 1px 2px var(--theme-shadow);
}

.user .theme-control {
    margin-left: auto;
}

.theme-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 6px !important;
    background: transparent !important;
    color: var(--theme-muted) !important;
    box-shadow: none !important;
    cursor: pointer;
}

.theme-button:hover {
    background: var(--theme-hover-bg) !important;
    color: var(--theme-text) !important;
}

.theme-button.active {
    background: var(--theme-primary-bg) !important;
    color: var(--theme-primary-text) !important;
}

.theme-button svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    pointer-events: none;
}

.theme-button svg .theme-fill {
    fill: currentColor;
    stroke: none;
}

.theme-corner {
    position: fixed;
    top: 18px;
    right: 18px;
    z-index: 20;
}

/* Подпись только для скринридеров. Правило жило в dashboard.css, из-за чего на других
   страницах (например, на доске RoadMAP) текст показывался как обычный. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}