/* ==================================================================
   Задача №407. Оформление кабинета: режим, цветовая тема, защита глаз.

   Режим (светлый / тёмный / как в телефоне) отвечает за освещение,
   цветовая тема — за акцент и оттенок поверхностей. Это разные вещи:
   тёплую тему одинаково хотят и днём, и вечером.

   Всё оформление кабинета собрано на переменных, поэтому смена темы —
   это подмена значений, а не отдельные наборы правил. Ниже — только
   переменные и те места, где MDB задаёт свои цвета жёстко.
   ================================================================== */

/* ---------- Цветовая тема: акцент и оттенки ---------- */

body[data-theme="classic"] {
    --mc-accent2-light: #7d9cf7;
    --mc-deep-light: #2450c8;
    --mc-soft-surface-dark: #242a3c;
    --mc-warm-surface-dark: #242229;
    --mc-accent-light: #3b6ef2;
    --mc-accent-dark: #6d97ff;
    --mc-soft-light: #eaf0ff;
    --mc-soft-dark: #222c47;
    --mc-paper-light: #f4f6fa;
    --mc-paper-dark: #12151f;
    --mc-card-dark: #1b2030;
    --mc-line-dark: #2c3448;
}

body[data-theme="mint"] {
    --mc-accent2-light: #4cc79b;
    --mc-deep-light: #0b7a53;
    --mc-soft-surface-dark: #1f2f28;
    --mc-warm-surface-dark: #232a24;
    --mc-accent-light: #12a06f;
    --mc-accent-dark: #34c48c;
    --mc-soft-light: #e2f6ec;
    --mc-soft-dark: #16302a;
    --mc-paper-light: #f2faf6;
    --mc-paper-dark: #101b17;
    --mc-card-dark: #17251f;
    --mc-line-dark: #26382f;
}

body[data-theme="sunset"] {
    --mc-accent2-light: #eda45f;
    --mc-deep-light: #b05a17;
    --mc-soft-surface-dark: #2f2820;
    --mc-warm-surface-dark: #312720;
    --mc-accent-light: #d9752b;
    --mc-accent-dark: #e2914e;
    --mc-soft-light: #fbead9;
    --mc-soft-dark: #2e2318;
    --mc-paper-light: #fdf6f0;
    --mc-paper-dark: #1d1712;
    --mc-card-dark: #26201a;
    --mc-line-dark: #3a3026;
}

body[data-theme="berry"] {
    --mc-accent2-light: #a184e4;
    --mc-deep-light: #5c34ad;
    --mc-soft-surface-dark: #28223e;
    --mc-warm-surface-dark: #2a2338;
    --mc-accent-light: #7a52d1;
    --mc-accent-dark: #a58bf0;
    --mc-soft-light: #efe9fb;
    --mc-soft-dark: #241d3a;
    --mc-paper-light: #f7f4fd;
    --mc-paper-dark: #171426;
    --mc-card-dark: #1f1b33;
    --mc-line-dark: #2f2947;
}

body[data-theme="graphite"] {
    --mc-accent2-light: #8b93a3;
    --mc-deep-light: #414855;
    --mc-soft-surface-dark: #282a30;
    --mc-warm-surface-dark: #2a2823;
    --mc-accent-light: #5c6473;
    --mc-accent-dark: #9aa4b8;
    --mc-soft-light: #eceef2;
    --mc-soft-dark: #2a2d34;
    --mc-paper-light: #f4f5f7;
    --mc-paper-dark: #17181c;
    --mc-card-dark: #202227;
    --mc-line-dark: #33363d;
}

body[data-theme="ocean"] {
    --mc-accent2-light: #3fb0c7;
    --mc-deep-light: #0a7186;
    --mc-soft-surface-dark: #1c3037;
    --mc-warm-surface-dark: #25302f;
    --mc-accent-light: #0e8fa8;
    --mc-accent-dark: #45bcd4;
    --mc-soft-light: #ddf1f6;
    --mc-soft-dark: #122a31;
    --mc-paper-light: #f1f9fb;
    --mc-paper-dark: #101c20;
    --mc-card-dark: #16262b;
    --mc-line-dark: #22383f;
}

/* ---------- Светлая основа ---------- */

body[data-theme] {
    color-scheme: light;
    --mc-bg: var(--mc-paper-light);
    --mc-surface: #ffffff;
    --mc-surface-soft: #f5f7fb;
    --mc-line: #e3e7f0;
    --mc-ink: #1f2440;
    --mc-ink-soft: #5f6b86;
    --mc-ink-mute: #8b95ab;
    --mc-brand: var(--mc-accent-light);
    --mc-brand-soft: var(--mc-soft-light);
    background: var(--mc-bg);
    color: var(--mc-ink);
}

/* ---------- Тёмная основа ----------
   Один набор значений на два случая: выбран тёмный режим или выбрано
   «как в телефоне», а телефон сейчас в тёмной теме. */

body[data-mode="dark"] {
    color-scheme: dark;
    --mc-bg: var(--mc-paper-dark);
    --mc-surface: var(--mc-card-dark);
    --mc-surface-soft: var(--mc-soft-surface-dark);
    --mc-line: var(--mc-line-dark);
    --mc-ink: #eef1f8;
    --mc-ink-soft: #b3bccd;
    --mc-ink-mute: #8d97a9;
    --mc-brand: var(--mc-accent-dark);
    --mc-brand-soft: var(--mc-soft-dark);
    --mc-good: #34c48c;
    --mc-good-soft: #16302a;
    --mc-warn: #e5a44f;
    --mc-warn-soft: #33291a;
    --mc-bad: #f0757f;
    --mc-bad-soft: #341f24;
    --mc-shadow: 0 2px 10px rgba(0, 0, 0, .45);
    --mc-shadow-up: 0 -2px 16px rgba(0, 0, 0, .5);
    --mc-shadow-pop: 0 12px 32px rgba(0, 0, 0, .6);
}

@media (prefers-color-scheme: dark) {
    body[data-mode="auto"] {
        color-scheme: dark;
        --mc-bg: var(--mc-paper-dark);
        --mc-surface: var(--mc-card-dark);
        --mc-surface-soft: var(--mc-soft-surface-dark);
        --mc-line: var(--mc-line-dark);
        --mc-ink: #eef1f8;
        --mc-ink-soft: #b3bccd;
        --mc-ink-mute: #8d97a9;
        --mc-brand: var(--mc-accent-dark);
        --mc-brand-soft: var(--mc-soft-dark);
        --mc-good: #34c48c;
        --mc-good-soft: #16302a;
        --mc-warn: #e5a44f;
        --mc-warn-soft: #33291a;
        --mc-bad: #f0757f;
        --mc-bad-soft: #341f24;
        --mc-shadow: 0 2px 10px rgba(0, 0, 0, .45);
        --mc-shadow-up: 0 -2px 16px rgba(0, 0, 0, .5);
        --mc-shadow-pop: 0 12px 32px rgba(0, 0, 0, .6);
    }
}

/* ==================================================================
   Тёмная основа для готовой вёрстки MDB.

   Кабинет собран на бутстраповских карточках и списках, у которых свои
   цвета текста и фона. Без этих правил в тёмном режиме страницы
   оставались белыми пятнами, а часть текста — нечитаемой.
   ================================================================== */

body[data-mode="dark"],
body[data-mode="dark"] main,
body[data-mode="dark"] .container,
body[data-mode="dark"] .container-fluid { background: var(--mc-bg); color: var(--mc-ink); }

body[data-mode="dark"] h1,
body[data-mode="dark"] h2,
body[data-mode="dark"] h3,
body[data-mode="dark"] h4,
body[data-mode="dark"] h5,
body[data-mode="dark"] b,
body[data-mode="dark"] strong,
body[data-mode="dark"] label,
body[data-mode="dark"] p,
body[data-mode="dark"] li,
body[data-mode="dark"] span,
body[data-mode="dark"] div,
body[data-mode="dark"] summary,
body[data-mode="dark"] td,
body[data-mode="dark"] th { color: inherit; }

body[data-mode="dark"] .card,
body[data-mode="dark"] .review-card,
body[data-mode="dark"] .list-group-item,
body[data-mode="dark"] .accordion-item,
body[data-mode="dark"] .accordion-button,
body[data-mode="dark"] .accordion-body,
body[data-mode="dark"] .modal-content,
body[data-mode="dark"] .dropdown-menu,
body[data-mode="dark"] .card-actions-menu,
body[data-mode="dark"] .app-drawer,
body[data-mode="dark"] .assistant-panel,
body[data-mode="dark"] .mc-card,
body[data-mode="dark"] .auth section {
    background: var(--mc-surface);
    color: var(--mc-ink);
    border-color: var(--mc-line);
}

body[data-mode="dark"] .card-details .detail,
body[data-mode="dark"] .detail { border-color: var(--mc-line); }
body[data-mode="dark"] .detail-label { color: var(--mc-ink-mute); }
body[data-mode="dark"] .detail-value { color: var(--mc-ink); }
body[data-mode="dark"] .text-muted,
body[data-mode="dark"] .text-secondary,
body[data-mode="dark"] small { color: var(--mc-ink-soft) !important; }

body[data-mode="dark"] .review-content,
body[data-mode="dark"] .review-comment,
body[data-mode="dark"] .mentor__step,
body[data-mode="dark"] .mentor__tip,
body[data-mode="dark"] .ru-drop {
    background: var(--mc-surface-soft);
    color: var(--mc-ink);
    border-color: var(--mc-line);
}

body[data-mode="dark"] .form-control,
body[data-mode="dark"] .form-select,
body[data-mode="dark"] textarea,
body[data-mode="dark"] input[type="text"],
body[data-mode="dark"] input[type="search"],
body[data-mode="dark"] input[type="number"],
body[data-mode="dark"] input[type="date"],
body[data-mode="dark"] input[type="password"] {
    background: var(--mc-surface-soft);
    color: var(--mc-ink);
    border-color: var(--mc-line);
}

body[data-mode="dark"] .form-control::placeholder { color: var(--mc-ink-mute); }
body[data-mode="dark"] .form-label,
body[data-mode="dark"] .form-outline .form-label { color: var(--mc-ink-soft); }

body[data-mode="dark"] .btn-light,
body[data-mode="dark"] .btn-outline-primary,
body[data-mode="dark"] .btn-secondary {
    background: var(--mc-surface-soft);
    color: var(--mc-ink);
    border-color: var(--mc-line);
}

body[data-mode="dark"] table,
body[data-mode="dark"] .table { color: var(--mc-ink); }
body[data-mode="dark"] .table > :not(caption) > * > * { background: var(--mc-surface); color: var(--mc-ink); }

/* То же самое, когда режим «как в телефоне», а телефон в тёмной теме. */
@media (prefers-color-scheme: dark) {
    body[data-mode="auto"],
    body[data-mode="auto"] main,
    body[data-mode="auto"] .container,
    body[data-mode="auto"] .container-fluid { background: var(--mc-bg); color: var(--mc-ink); }

    body[data-mode="auto"] .card,
    body[data-mode="auto"] .review-card,
    body[data-mode="auto"] .list-group-item,
    body[data-mode="auto"] .accordion-item,
    body[data-mode="auto"] .accordion-button,
    body[data-mode="auto"] .accordion-body,
    body[data-mode="auto"] .modal-content,
    body[data-mode="auto"] .dropdown-menu,
    body[data-mode="auto"] .card-actions-menu,
    body[data-mode="auto"] .app-drawer,
    body[data-mode="auto"] .assistant-panel,
    body[data-mode="auto"] .mc-card,
    body[data-mode="auto"] .auth section {
        background: var(--mc-surface);
        color: var(--mc-ink);
        border-color: var(--mc-line);
    }

    body[data-mode="auto"] .detail-label { color: var(--mc-ink-mute); }
    body[data-mode="auto"] .detail-value { color: var(--mc-ink); }
    body[data-mode="auto"] .text-muted,
    body[data-mode="auto"] .text-secondary,
    body[data-mode="auto"] small { color: var(--mc-ink-soft) !important; }

    body[data-mode="auto"] .review-content,
    body[data-mode="auto"] .review-comment,
    body[data-mode="auto"] .ru-drop {
        background: var(--mc-surface-soft);
        color: var(--mc-ink);
        border-color: var(--mc-line);
    }

    body[data-mode="auto"] .form-control,
    body[data-mode="auto"] .form-select,
    body[data-mode="auto"] textarea,
    body[data-mode="auto"] input[type="text"],
    body[data-mode="auto"] input[type="search"],
    body[data-mode="auto"] input[type="number"],
    body[data-mode="auto"] input[type="date"],
    body[data-mode="auto"] input[type="password"] {
        background: var(--mc-surface-soft);
        color: var(--mc-ink);
        border-color: var(--mc-line);
    }

    body[data-mode="auto"] .table > :not(caption) > * > * { background: var(--mc-surface); color: var(--mc-ink); }
}

/* ==================================================================
   Меню-шторка и шапка тоже подчиняются теме
   ================================================================== */

body[data-theme] .app-navbar.bg-primary,
body[data-theme] .navbar.bg-primary { background: var(--mc-brand) !important; }

body[data-theme] .btn-primary {
    background: var(--mc-brand) !important;
    border-color: var(--mc-brand) !important;
    box-shadow: none;
}

body[data-theme] .text-primary { color: var(--mc-brand) !important; }
body[data-theme] .badge.bg-primary { background: var(--mc-brand) !important; }

body[data-theme] .app-drawer {
    background: var(--mc-surface);
    color: var(--mc-ink);
}

body[data-theme] .app-drawer-head {
    background: linear-gradient(120deg, var(--mc-brand), var(--mc-accent2-light));
    color: #fff;
}

body[data-theme] .app-drawer-head .name,
body[data-theme] .app-drawer-head .role { color: #fff; }

body[data-theme] .app-drawer-avatar {
    background: rgba(255, 255, 255, .22);
    color: #fff;
}

body[data-theme] .app-drawer-item {
    color: var(--mc-ink);
    border-radius: 10px;
}

body[data-theme] .app-drawer-item i { color: var(--mc-brand); }
body[data-theme] .app-drawer-item:hover,
body[data-theme] .app-drawer-item:active { background: var(--mc-brand-soft); }
body[data-theme] .app-drawer-item.danger,
body[data-theme] .app-drawer-item.danger i { color: var(--mc-bad); }
body[data-theme] .app-drawer-badge { background: var(--mc-bad); color: #fff; }

body[data-theme] .app-drawer-close { color: #fff; }

body[data-theme] .chat-fab,
body[data-theme] .assistant-fab {
    background: linear-gradient(135deg, var(--mc-brand), var(--mc-deep-light));
}

body[data-theme] .assistant-head { background: var(--mc-brand); }

/* ==================================================================
   Защита глаз
   ================================================================== */

body.mc-eye-care::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    pointer-events: none;
    background: rgba(255, 176, 92, .14);
    mix-blend-mode: multiply;
}

body.mc-eye-care {
    --mc-surface: #fbf7f1;
    --mc-surface-soft: #f6f0e8;
    --mc-shadow: 0 2px 10px rgba(84, 62, 40, .08);
}

body.mc-eye-care[data-mode="dark"] {
    --mc-surface: var(--mc-warm-surface-dark);
    --mc-surface-soft: var(--mc-soft-surface-dark);
}

body.mc-eye-care[data-mode="dark"]::after {
    background: rgba(255, 168, 80, .1);
    mix-blend-mode: soft-light;
}

@media (prefers-color-scheme: dark) {
    body.mc-eye-care[data-mode="auto"] {
        --mc-surface: var(--mc-warm-surface-dark);
        --mc-surface-soft: var(--mc-soft-surface-dark);
    }

    body.mc-eye-care[data-mode="auto"]::after {
        background: rgba(255, 168, 80, .1);
        mix-blend-mode: soft-light;
    }
}

/* ==================================================================
   Цветные плашки в тёмном режиме

   Бейджи MDB рисуются светлым фоном, а текст в них наследуется от
   страницы — в тёмном режиме он становился светлым на светлом.
   Возвращаем им собственный тёмный текст.
   ================================================================== */

body[data-mode="dark"] .badge-warning,
body[data-mode="dark"] .badge-success,
body[data-mode="dark"] .badge-info,
body[data-mode="dark"] .badge-danger,
body[data-mode="dark"] .badge-primary,
body[data-mode="dark"] .badge-secondary,
body[data-mode="dark"] .badge-light,
body[data-mode="dark"] .alert-success,
body[data-mode="dark"] .alert-warning,
body[data-mode="dark"] .alert-info,
body[data-mode="dark"] .alert-danger,
body[data-mode="dark"] .alert-primary { color: #22262f !important; }

/* Ссылка «Отзыв №…» и подписи в карточке должны читаться на тёмном. */
body[data-mode="dark"] .review-id,
body[data-mode="dark"] .review-id a,
body[data-mode="dark"] .card-actions .btn { color: var(--mc-brand); }
body[data-mode="dark"] .review-client { color: var(--mc-ink); }

body[data-mode="dark"] .card-actions > summary,
body[data-mode="dark"] .card-action {
    background: var(--mc-surface-soft);
    color: var(--mc-ink);
}

@media (prefers-color-scheme: dark) {
    body[data-mode="auto"] .badge-warning,
    body[data-mode="auto"] .badge-success,
    body[data-mode="auto"] .badge-info,
    body[data-mode="auto"] .badge-danger,
    body[data-mode="auto"] .badge-primary,
    body[data-mode="auto"] .badge-secondary,
    body[data-mode="auto"] .badge-light,
    body[data-mode="auto"] .alert-success,
    body[data-mode="auto"] .alert-warning,
    body[data-mode="auto"] .alert-info,
    body[data-mode="auto"] .alert-danger,
    body[data-mode="auto"] .alert-primary { color: #22262f !important; }

    body[data-mode="auto"] .review-id,
    body[data-mode="auto"] .review-id a { color: var(--mc-brand); }
    body[data-mode="auto"] .review-client { color: var(--mc-ink); }

    body[data-mode="auto"] .card-actions > summary,
    body[data-mode="auto"] .card-action {
        background: var(--mc-surface-soft);
        color: var(--mc-ink);
    }
}


/* ==================================================================
   Тёмный режим для разделов со своим оформлением

   База знаний, чат, уведомления, наставник и статистика написаны
   с жёстко заданными белыми фонами: в тёмном режиме они оставались
   светлыми пятнами, а текст на них — белым по белому.
   ================================================================== */

body[data-mode="dark"] .kb-item,
body[data-mode="dark"] .kb-search,
body[data-mode="dark"] .kb-answer,
body[data-mode="dark"] .notification-card,
body[data-mode="dark"] .notif-row,
body[data-mode="dark"] .notification-comment,
body[data-mode="dark"] .mentor-page,
body[data-mode="dark"] .mentor-lesson,
body[data-mode="dark"] .mentor-card,
body[data-mode="dark"] .mentor-warn,
body[data-mode="dark"] .mentor__step,
body[data-mode="dark"] .mentor__tips,
body[data-mode="dark"] .mentor__tip,
body[data-mode="dark"] .chat-shell,
body[data-mode="dark"] .chat-pane,
body[data-mode="dark"] .chat-sidebar,
body[data-mode="dark"] .chat-sidebar-head,
body[data-mode="dark"] .chat-topbar,
body[data-mode="dark"] .chat-body,
body[data-mode="dark"] .chat-form,
body[data-mode="dark"] .chat-shell .chat-form,
body[data-mode="dark"] .chat-shell .chat-messages,
body[data-mode="dark"] .chat-shell .chat-empty,
body[data-mode="dark"] .chats-messages-item,
body[data-mode="dark"] .chat-message,
body[data-mode="dark"] .chat-search,
body[data-mode="dark"] .stats-kpi,
body[data-mode="dark"] .stats-kpi-card,
body[data-mode="dark"] .stats-tab,
body[data-mode="dark"] .mc-why__card,
body[data-mode="dark"] .mc-why__item,
body[data-mode="dark"] .mc-offers__recent,
body[data-mode="dark"] .news-card,
body[data-mode="dark"] .news-item {
    background: var(--mc-surface);
    color: var(--mc-ink);
    border-color: var(--mc-line);
}

body[data-mode="dark"] .kb-search input,
body[data-mode="dark"] .chat-search input,
body[data-mode="dark"] .chat-form textarea,
body[data-mode="dark"] .chat-form input,
body[data-mode="dark"] .chat-shell .chat-form textarea {
    background: var(--mc-surface-soft);
    color: var(--mc-ink);
    border-color: var(--mc-line);
}

body[data-mode="dark"] .kb-question,
body[data-mode="dark"] .kb-answer,
body[data-mode="dark"] .kb-category-title,
body[data-mode="dark"] .kb-item,
body[data-mode="dark"] .notification-text,
body[data-mode="dark"] .notification-date,
body[data-mode="dark"] .notif-main,
body[data-mode="dark"] .mentor-lesson__ttl,
body[data-mode="dark"] .mentor-card__count,
body[data-mode="dark"] .mentor-card__label,
body[data-mode="dark"] .mentor-page__note,
body[data-mode="dark"] .chat-sidebar-title,
body[data-mode="dark"] .chat-message .content,
body[data-mode="dark"] .chats-messages-item,
body[data-mode="dark"] .stats-kpi-card,
body[data-mode="dark"] .chat-topbar {
    color: var(--mc-ink);
}

body[data-mode="dark"] .kb-category-title,
body[data-mode="dark"] .notification-date,
body[data-mode="dark"] .mentor-card__label,
body[data-mode="dark"] .chat-sidebar-title {
    color: var(--mc-ink-soft);
}

body[data-mode="dark"] .chat-message.my {
    background: var(--mc-brand-soft);
    color: var(--mc-ink);
}

body[data-mode="dark"] .kb-chevron,
body[data-mode="dark"] .notif-dot {
    color: var(--mc-ink-mute);
}

body[data-mode="dark"] .notifications,
body[data-mode="dark"] .mentor-page,
body[data-mode="dark"] .kb-category {
    background: transparent;
}

@media (prefers-color-scheme: dark) {
    body[data-mode="auto"] .kb-item,
    body[data-mode="auto"] .kb-search,
    body[data-mode="auto"] .kb-answer,
    body[data-mode="auto"] .notification-card,
    body[data-mode="auto"] .notif-row,
    body[data-mode="auto"] .notification-comment,
    body[data-mode="auto"] .mentor-page,
    body[data-mode="auto"] .mentor-lesson,
    body[data-mode="auto"] .mentor-card,
    body[data-mode="auto"] .mentor-warn,
    body[data-mode="auto"] .mentor__step,
    body[data-mode="auto"] .mentor__tips,
    body[data-mode="auto"] .mentor__tip,
    body[data-mode="auto"] .chat-shell,
    body[data-mode="auto"] .chat-pane,
    body[data-mode="auto"] .chat-sidebar,
    body[data-mode="auto"] .chat-sidebar-head,
    body[data-mode="auto"] .chat-topbar,
    body[data-mode="auto"] .chat-body,
    body[data-mode="auto"] .chat-form,
    body[data-mode="auto"] .chat-shell .chat-form,
    body[data-mode="auto"] .chat-shell .chat-messages,
    body[data-mode="auto"] .chat-shell .chat-empty,
    body[data-mode="auto"] .chats-messages-item,
    body[data-mode="auto"] .chat-message,
    body[data-mode="auto"] .chat-search,
    body[data-mode="auto"] .stats-kpi,
    body[data-mode="auto"] .stats-kpi-card,
    body[data-mode="auto"] .stats-tab,
    body[data-mode="auto"] .mc-why__card,
    body[data-mode="auto"] .mc-why__item,
    body[data-mode="auto"] .mc-offers__recent,
    body[data-mode="auto"] .news-card,
    body[data-mode="auto"] .news-item {
        background: var(--mc-surface);
        color: var(--mc-ink);
        border-color: var(--mc-line);
    }

    body[data-mode="auto"] .kb-search input,
    body[data-mode="auto"] .chat-search input,
    body[data-mode="auto"] .chat-form textarea,
    body[data-mode="auto"] .chat-form input,
    body[data-mode="auto"] .chat-shell .chat-form textarea {
        background: var(--mc-surface-soft);
        color: var(--mc-ink);
        border-color: var(--mc-line);
    }

    body[data-mode="auto"] .kb-question,
    body[data-mode="auto"] .kb-answer,
    body[data-mode="auto"] .kb-category-title,
    body[data-mode="auto"] .kb-item,
    body[data-mode="auto"] .notification-text,
    body[data-mode="auto"] .notification-date,
    body[data-mode="auto"] .notif-main,
    body[data-mode="auto"] .mentor-lesson__ttl,
    body[data-mode="auto"] .mentor-card__count,
    body[data-mode="auto"] .mentor-card__label,
    body[data-mode="auto"] .mentor-page__note,
    body[data-mode="auto"] .chat-sidebar-title,
    body[data-mode="auto"] .chat-message .content,
    body[data-mode="auto"] .chats-messages-item,
    body[data-mode="auto"] .stats-kpi-card,
    body[data-mode="auto"] .chat-topbar {
        color: var(--mc-ink);
    }

    body[data-mode="auto"] .kb-category-title,
    body[data-mode="auto"] .notification-date,
    body[data-mode="auto"] .mentor-card__label,
    body[data-mode="auto"] .chat-sidebar-title {
        color: var(--mc-ink-soft);
    }

    body[data-mode="auto"] .chat-message.my {
        background: var(--mc-brand-soft);
        color: var(--mc-ink);
    }

    body[data-mode="auto"] .kb-chevron,
    body[data-mode="auto"] .notif-dot {
        color: var(--mc-ink-mute);
    }

    body[data-mode="auto"] .notifications,
    body[data-mode="auto"] .mentor-page,
    body[data-mode="auto"] .kb-category {
        background: transparent;
    }

}

/* Оставшиеся светлые плитки разделов: показатели наставника, шаги пути,
   служебные подложки. */
body[data-mode="dark"] .mentor-fig,
body[data-mode="dark"] .mentor-hero__day,
body[data-mode="dark"] .mentor-links a,
body[data-mode="dark"] .mentor__bar,
body[data-mode="dark"] .mc-why__card,
body[data-mode="dark"] .kb-search,
body[data-mode="dark"] .stats-tab,
body[data-mode="dark"] .notif-icon {
    background: var(--mc-surface-soft);
    color: var(--mc-ink);
    border-color: var(--mc-line);
}

body[data-mode="dark"] .mentor-fig b,
body[data-mode="dark"] .mentor-fig span,
body[data-mode="dark"] .mentor-links a { color: var(--mc-ink); }

@media (prefers-color-scheme: dark) {
    body[data-mode="auto"] .mentor-fig,
    body[data-mode="auto"] .mentor-hero__day,
    body[data-mode="auto"] .mentor-links a,
    body[data-mode="auto"] .mentor__bar,
    body[data-mode="auto"] .mc-why__card,
    body[data-mode="auto"] .kb-search,
    body[data-mode="auto"] .stats-tab,
    body[data-mode="auto"] .notif-icon {
        background: var(--mc-surface-soft);
        color: var(--mc-ink);
        border-color: var(--mc-line);
    }

    body[data-mode="auto"] .mentor-fig b,
    body[data-mode="auto"] .mentor-fig span,
    body[data-mode="auto"] .mentor-links a { color: var(--mc-ink); }
}

/* Круглые кнопки чата: у них своя светлая заливка. */
body[data-mode="dark"] .chat-icon-btn,
body[data-mode="dark"] .chat-back-btn,
body[data-mode="dark"] .chat-send-btn {
    background: var(--mc-surface-soft);
    color: var(--mc-ink);
    border-color: var(--mc-line);
}

body[data-mode="dark"] .chat-send-btn { background: var(--mc-brand); color: #fff; }

@media (prefers-color-scheme: dark) {
    body[data-mode="auto"] .chat-icon-btn,
    body[data-mode="auto"] .chat-back-btn,
    body[data-mode="auto"] .chat-send-btn {
        background: var(--mc-surface-soft);
        color: var(--mc-ink);
        border-color: var(--mc-line);
    }

    body[data-mode="auto"] .chat-send-btn { background: var(--mc-brand); color: #fff; }
}

/* Точечные места, оставшиеся светлыми: списки чата, недоступные поля,
   вкладки статистики и значки наставника. */
body[data-mode="dark"] .chat-side-item .chat-side-title,
body[data-mode="dark"] .chat-side-item .chat-side-sub,
body[data-mode="dark"] .chat-side-item span,
body[data-mode="dark"] .chat-side-item b { color: var(--mc-ink); }

body[data-mode="dark"] .chat-side-item.active { background: var(--mc-brand-soft); }
body[data-mode="dark"] .chat-side-item.active .chat-side-title,
body[data-mode="dark"] .chat-side-item.active .chat-side-sub { color: var(--mc-ink); }
body[data-mode="dark"] .chat-side-item:hover { background: var(--mc-surface-soft); }
body[data-mode="dark"] .chat-side-avatar { background: var(--mc-surface-soft); color: var(--mc-brand); }

/* Поле, которое нельзя менять: MDB красит его светло-серым. */
body[data-mode="dark"] .form-control:disabled,
body[data-mode="dark"] .form-control[readonly],
body[data-mode="dark"] .form-control.active:disabled,
body[data-mode="dark"] input:disabled,
body[data-mode="dark"] textarea:disabled {
    background: var(--mc-surface-soft) !important;
    color: var(--mc-ink-soft) !important;
    border-color: var(--mc-line);
}

/* Вкладки статистики: выбранная должна отличаться цветом, а не только рамкой. */
body[data-mode="dark"] .stats-tab { background: var(--mc-surface-soft); color: var(--mc-ink-soft); border-color: var(--mc-line); }
body[data-mode="dark"] .stats-tab.active { background: var(--mc-brand); color: #fff; border-color: transparent; }

/* Значок «сколько уроков пройдено» на карточке наставника. */
body[data-mode="dark"] .mentor-card__count { background: var(--mc-surface-soft); color: var(--mc-ink); }
body[data-mode="dark"] .mentor-hero__day { background: rgba(255, 255, 255, .16); color: #fff; }
body[data-mode="dark"] .mentor-hero__ava { background: rgba(255, 255, 255, .2); color: #fff; }

@media (prefers-color-scheme: dark) {

    /* Точечные места, оставшиеся светлыми: списки чата, недоступные поля,
       вкладки статистики и значки наставника. */
    body[data-mode="auto"] .chat-side-item .chat-side-title,
    body[data-mode="auto"] .chat-side-item .chat-side-sub,
    body[data-mode="auto"] .chat-side-item span,
    body[data-mode="auto"] .chat-side-item b { color: var(--mc-ink); }

    body[data-mode="auto"] .chat-side-item.active { background: var(--mc-brand-soft); }
    body[data-mode="auto"] .chat-side-item.active .chat-side-title,
    body[data-mode="auto"] .chat-side-item.active .chat-side-sub { color: var(--mc-ink); }
    body[data-mode="auto"] .chat-side-item:hover { background: var(--mc-surface-soft); }
    body[data-mode="auto"] .chat-side-avatar { background: var(--mc-surface-soft); color: var(--mc-brand); }

    /* Поле, которое нельзя менять: MDB красит его светло-серым. */
    body[data-mode="auto"] .form-control:disabled,
    body[data-mode="auto"] .form-control[readonly],
    body[data-mode="auto"] .form-control.active:disabled,
    body[data-mode="auto"] input:disabled,
    body[data-mode="auto"] textarea:disabled {
        background: var(--mc-surface-soft) !important;
        color: var(--mc-ink-soft) !important;
        border-color: var(--mc-line);
    }

    /* Вкладки статистики: выбранная должна отличаться цветом, а не только рамкой. */
    body[data-mode="auto"] .stats-tab { background: var(--mc-surface-soft); color: var(--mc-ink-soft); border-color: var(--mc-line); }
    body[data-mode="auto"] .stats-tab.active { background: var(--mc-brand); color: #fff; border-color: transparent; }

    /* Значок «сколько уроков пройдено» на карточке наставника. */
    body[data-mode="auto"] .mentor-card__count { background: var(--mc-surface-soft); color: var(--mc-ink); }
    body[data-mode="auto"] .mentor-hero__day { background: rgba(255, 255, 255, .16); color: #fff; }
    body[data-mode="auto"] .mentor-hero__ava { background: rgba(255, 255, 255, .2); color: #fff; }

}

/* Заголовки сворачиваемых блоков, подписи площадок и аватары чата:
   у них свой цвет текста из готовой вёрстки, в тёмном режиме он
   оказывался тёмным на тёмном. */
body[data-mode="dark"] .accordion-button,
body[data-mode="dark"] .accordion-button.collapsed,
body[data-mode="dark"] .accordion-header,
body[data-mode="dark"] .accordion-button h6,
body[data-mode="dark"] .list-filter .accordion-button {
    color: var(--mc-ink);
    background: transparent;
}

body[data-mode="dark"] .accordion-button::after { filter: invert(1) brightness(1.6); }

body[data-mode="dark"] .order-info-area,
body[data-mode="dark"] .order-info-area a,
body[data-mode="dark"] .order-info-address,
body[data-mode="dark"] .order-hero-city,
body[data-mode="dark"] .review-id,
body[data-mode="dark"] .card-details .detail-label { color: var(--mc-ink-soft); }

body[data-mode="dark"] .order-info-area b,
body[data-mode="dark"] .order-info-title { color: var(--mc-ink); }

/* Поля-выпадашки: подпись поля и выбранное значение. */
body[data-mode="dark"] .form-outline .form-label,
body[data-mode="dark"] .select-input,
body[data-mode="dark"] .select-fake-value,
body[data-mode="dark"] .form-select,
body[data-mode="dark"] .select-wrapper input { color: var(--mc-ink); }

body[data-mode="dark"] .select-dropdown-container .select-option,
body[data-mode="dark"] .select-dropdown-container {
    background: var(--mc-surface);
    color: var(--mc-ink);
}

/* Аватар чата: светлый кружок с иконкой — иконке нужен тёмный цвет. */
body[data-mode="dark"] .chat-ava { background: var(--mc-brand-soft); }
body[data-mode="dark"] .chat-ava i,
body[data-mode="dark"] .chat-ava svg { color: var(--mc-brand); }
body[data-mode="dark"] .chat-side-arrow { color: var(--mc-ink-mute); }

@media (prefers-color-scheme: dark) {

    /* Заголовки сворачиваемых блоков, подписи площадок и аватары чата:
       у них свой цвет текста из готовой вёрстки, в тёмном режиме он
       оказывался тёмным на тёмном. */
    body[data-mode="auto"] .accordion-button,
    body[data-mode="auto"] .accordion-button.collapsed,
    body[data-mode="auto"] .accordion-header,
    body[data-mode="auto"] .accordion-button h6,
    body[data-mode="auto"] .list-filter .accordion-button {
        color: var(--mc-ink);
        background: transparent;
    }

    body[data-mode="auto"] .accordion-button::after { filter: invert(1) brightness(1.6); }

    body[data-mode="auto"] .order-info-area,
    body[data-mode="auto"] .order-info-area a,
    body[data-mode="auto"] .order-info-address,
    body[data-mode="auto"] .order-hero-city,
    body[data-mode="auto"] .review-id,
    body[data-mode="auto"] .card-details .detail-label { color: var(--mc-ink-soft); }

    body[data-mode="auto"] .order-info-area b,
    body[data-mode="auto"] .order-info-title { color: var(--mc-ink); }

    /* Поля-выпадашки: подпись поля и выбранное значение. */
    body[data-mode="auto"] .form-outline .form-label,
    body[data-mode="auto"] .select-input,
    body[data-mode="auto"] .select-fake-value,
    body[data-mode="auto"] .form-select,
    body[data-mode="auto"] .select-wrapper input { color: var(--mc-ink); }

    body[data-mode="auto"] .select-dropdown-container .select-option,
    body[data-mode="auto"] .select-dropdown-container {
        background: var(--mc-surface);
        color: var(--mc-ink);
    }

    /* Аватар чата: светлый кружок с иконкой — иконке нужен тёмный цвет. */
    body[data-mode="auto"] .chat-ava { background: var(--mc-brand-soft); }
    body[data-mode="auto"] .chat-ava i,
    body[data-mode="auto"] .chat-ava svg { color: var(--mc-brand); }
    body[data-mode="auto"] .chat-side-arrow { color: var(--mc-ink-mute); }

}

/* Реферальная программа: карточки, таблица и калькулятор нарисованы
   светлыми — в тёмном режиме текст на них пропадал. */
body[data-mode="dark"] .ref-card,
body[data-mode="dark"] .ref-stat,
body[data-mode="dark"] .ref-people,
body[data-mode="dark"] .ref-calc,
body[data-mode="dark"] .ref-offer,
body[data-mode="dark"] .ref-offer-modal,
body[data-mode="dark"] .ref-offer-modal__body,
body[data-mode="dark"] .ref-table,
body[data-mode="dark"] .ref-calc__field,
body[data-mode="dark"] .ref-calc select,
body[data-mode="dark"] .ref-calc input {
    background: var(--mc-surface);
    color: var(--mc-ink);
    border-color: var(--mc-line);
}

body[data-mode="dark"] .ref-stat__value,
body[data-mode="dark"] .ref-people__title,
body[data-mode="dark"] .ref-calc__title,
body[data-mode="dark"] .ref-offer-modal__title,
body[data-mode="dark"] .ref-table b,
body[data-mode="dark"] .ref-table td,
body[data-mode="dark"] .ref-table th { color: var(--mc-ink); }

body[data-mode="dark"] .ref-stat__label,
body[data-mode="dark"] .ref-calc__label,
body[data-mode="dark"] .ref-calc__hint,
body[data-mode="dark"] .ref-calc__note,
body[data-mode="dark"] .ref-people__empty,
body[data-mode="dark"] .ref-offer__hint { color: var(--mc-ink-soft); }

body[data-mode="dark"] .ref-table tr { border-color: var(--mc-line); }

/* Заголовки сворачиваемых блоков: у готовой вёрстки цвет задан жёстко. */
body[data-mode="dark"] .accordion-button,
body[data-mode="dark"] .accordion-button.collapsed,
body[data-mode="dark"] .accordion-button h6 { color: var(--mc-ink) !important; }

@media (prefers-color-scheme: dark) {

    /* Реферальная программа: карточки, таблица и калькулятор нарисованы
       светлыми — в тёмном режиме текст на них пропадал. */
    body[data-mode="auto"] .ref-card,
    body[data-mode="auto"] .ref-stat,
    body[data-mode="auto"] .ref-people,
    body[data-mode="auto"] .ref-calc,
    body[data-mode="auto"] .ref-offer,
    body[data-mode="auto"] .ref-offer-modal,
    body[data-mode="auto"] .ref-offer-modal__body,
    body[data-mode="auto"] .ref-table,
    body[data-mode="auto"] .ref-calc__field,
    body[data-mode="auto"] .ref-calc select,
    body[data-mode="auto"] .ref-calc input {
        background: var(--mc-surface);
        color: var(--mc-ink);
        border-color: var(--mc-line);
    }

    body[data-mode="auto"] .ref-stat__value,
    body[data-mode="auto"] .ref-people__title,
    body[data-mode="auto"] .ref-calc__title,
    body[data-mode="auto"] .ref-offer-modal__title,
    body[data-mode="auto"] .ref-table b,
    body[data-mode="auto"] .ref-table td,
    body[data-mode="auto"] .ref-table th { color: var(--mc-ink); }

    body[data-mode="auto"] .ref-stat__label,
    body[data-mode="auto"] .ref-calc__label,
    body[data-mode="auto"] .ref-calc__hint,
    body[data-mode="auto"] .ref-calc__note,
    body[data-mode="auto"] .ref-people__empty,
    body[data-mode="auto"] .ref-offer__hint { color: var(--mc-ink-soft); }

    body[data-mode="auto"] .ref-table tr { border-color: var(--mc-line); }

    /* Заголовки сворачиваемых блоков: у готовой вёрстки цвет задан жёстко. */
    body[data-mode="auto"] .accordion-button,
    body[data-mode="auto"] .accordion-button.collapsed,
    body[data-mode="auto"] .accordion-button h6 { color: var(--mc-ink) !important; }

}

/* Таблица рефералов и итог калькулятора: шапка, строка «Итого»
   и блок с расчётом рисуются светлыми поверх карточки. */
body[data-mode="dark"] .ref-table thead th,
body[data-mode="dark"] .ref-table__head,
body[data-mode="dark"] .ref-table tfoot td,
body[data-mode="dark"] .ref-table__total,
body[data-mode="dark"] .ref-table__total td,
body[data-mode="dark"] .ref-calc__result {
    background: var(--mc-surface-soft);
    color: var(--mc-ink);
    border-color: var(--mc-line);
}

body[data-mode="dark"] .ref-table td,
body[data-mode="dark"] .ref-table th,
body[data-mode="dark"] .ref-table__num,
body[data-mode="dark"] .ref-calc__row,
body[data-mode="dark"] .ref-calc__row--total,
body[data-mode="dark"] .ref-calc__row b,
body[data-mode="dark"] .ref-calc__row span { color: var(--mc-ink); }

body[data-mode="dark"] .ref-table td[data-label]::before,
body[data-mode="dark"] .ref-people__hint,
body[data-mode="dark"] .ref-calc__note { color: var(--mc-ink-soft); }

body[data-mode="dark"] .ref-table tr { border-color: var(--mc-line); }
body[data-mode="dark"] .ref-calc__range { accent-color: var(--mc-brand); }

@media (prefers-color-scheme: dark) {

    /* Таблица рефералов и итог калькулятора: шапка, строка «Итого»
       и блок с расчётом рисуются светлыми поверх карточки. */
    body[data-mode="auto"] .ref-table thead th,
    body[data-mode="auto"] .ref-table__head,
    body[data-mode="auto"] .ref-table tfoot td,
    body[data-mode="auto"] .ref-table__total,
    body[data-mode="auto"] .ref-table__total td,
    body[data-mode="auto"] .ref-calc__result {
        background: var(--mc-surface-soft);
        color: var(--mc-ink);
        border-color: var(--mc-line);
    }

    body[data-mode="auto"] .ref-table td,
    body[data-mode="auto"] .ref-table th,
    body[data-mode="auto"] .ref-table__num,
    body[data-mode="auto"] .ref-calc__row,
    body[data-mode="auto"] .ref-calc__row--total,
    body[data-mode="auto"] .ref-calc__row b,
    body[data-mode="auto"] .ref-calc__row span { color: var(--mc-ink); }

    body[data-mode="auto"] .ref-table td[data-label]::before,
    body[data-mode="auto"] .ref-people__hint,
    body[data-mode="auto"] .ref-calc__note { color: var(--mc-ink-soft); }

    body[data-mode="auto"] .ref-table tr { border-color: var(--mc-line); }
    body[data-mode="auto"] .ref-calc__range { accent-color: var(--mc-brand); }

}

/* Липкая строка «Итого» и шапка таблицы держат свой фон — перекрываем. */
body[data-mode="dark"] .ref-table tfoot,
body[data-mode="dark"] .ref-table thead { background: var(--mc-surface-soft) !important; }

@media (prefers-color-scheme: dark) {
    body[data-mode="auto"] .ref-table tfoot,
    body[data-mode="auto"] .ref-table thead { background: var(--mc-surface-soft) !important; }
}