/* InfoRepacker — клиентский кабинет биллинга в стиле лендинга.
 *
 * Подключается ПОСЛЕ build/css/huraga.css в layout_default.html.twig и
 * layout_public.html.twig. Собранный CSS темы не правится: откат — убрать
 * подключение этого файла.
 *
 * Токены взяты с лендинга inforepacker.com: графит #070d12 + teal #60dfcf.
 * Правило контраста: на акцентном (teal) фоне ВСЕГДА тёмный текст #06201e —
 * белый на teal даёт 1.6:1 и читается как «светлое на светлом».
 */

:root {
    --ip-bg: #070d12;
    --ip-panel: #0d171e;
    --ip-panel-2: #101b22;
    --ip-line: #22323a;
    --ip-line-strong: #2c4049;
    --ip-fg: #f3f7f8;
    --ip-muted: #a6b9bf;
    --ip-dim: #8ca5ad;
    --ip-accent: #60dfcf;
    --ip-accent-hover: #5be2d2;
    --ip-accent-active: #4fd0c0;
    --ip-accent-fg: #06201e;
    --ip-accent-rgb: 96, 223, 207;
}

/* ---------- тёмная тема: переменные Bootstrap под палитру лендинга ---------- */

:root[data-bs-theme="dark"] {
    color-scheme: dark;

    --bs-body-bg: var(--ip-bg);
    --bs-body-bg-rgb: 7, 13, 18;
    --bs-body-color: var(--ip-fg);
    --bs-body-color-rgb: 243, 247, 248;
    --bs-heading-color: var(--ip-fg);
    --bs-emphasis-color: #ffffff;
    --bs-emphasis-color-rgb: 255, 255, 255;

    --bs-secondary-bg: var(--ip-panel-2);
    --bs-secondary-bg-rgb: 16, 27, 34;
    --bs-tertiary-bg: var(--ip-panel);
    --bs-tertiary-bg-rgb: 13, 23, 30;

    --bs-secondary-color: var(--ip-muted);
    --bs-secondary-color-rgb: 166, 185, 191;
    --bs-tertiary-color: var(--ip-dim);
    --bs-tertiary-color-rgb: 140, 165, 173;

    --bs-border-color: var(--ip-line);
    --bs-border-color-translucent: rgba(34, 50, 58, 0.75);
    --bs-border-color-rgb: 34, 50, 58;

    --bs-primary: var(--ip-accent);
    --bs-primary-rgb: var(--ip-accent-rgb);
    --bs-primary-text-emphasis: #9cefe5;
    --bs-primary-bg-subtle: #0c2b2c;
    --bs-primary-border-subtle: #1b5755;

    --bs-link-color: var(--ip-accent);
    --bs-link-color-rgb: var(--ip-accent-rgb);
    --bs-link-hover-color: var(--ip-accent-hover);
    --bs-link-hover-color-rgb: 91, 226, 210;

    --bs-code-color: #7fe7da;
    --bs-highlight-color: var(--ip-fg);
    --bs-highlight-bg: #1b3a3c;
    --bs-focus-ring-color: rgba(var(--ip-accent-rgb), 0.25);

    --bs-form-valid-color: #6fdca8;
    --bs-form-invalid-color: #ff8f8f;
}

/* ---------- кнопки ---------- */

/* Акцентная кнопка: teal + ТЁМНЫЙ текст (в обеих темах). */
.btn-primary {
    --bs-btn-color: var(--ip-accent-fg);
    --bs-btn-bg: var(--ip-accent);
    --bs-btn-border-color: var(--ip-accent);
    --bs-btn-hover-color: var(--ip-accent-fg);
    --bs-btn-hover-bg: var(--ip-accent-hover);
    --bs-btn-hover-border-color: var(--ip-accent-hover);
    --bs-btn-active-color: var(--ip-accent-fg);
    --bs-btn-active-bg: var(--ip-accent-active);
    --bs-btn-active-border-color: var(--ip-accent-active);
    --bs-btn-disabled-color: var(--ip-accent-fg);
    --bs-btn-disabled-bg: #3f8f85;
    --bs-btn-disabled-border-color: #3f8f85;
    --bs-btn-focus-shadow-rgb: var(--ip-accent-rgb);
}

.btn-outline-primary {
    --bs-btn-color: var(--ip-accent);
    --bs-btn-border-color: var(--ip-accent);
    --bs-btn-hover-color: var(--ip-accent-fg);
    --bs-btn-hover-bg: var(--ip-accent);
    --bs-btn-hover-border-color: var(--ip-accent);
    --bs-btn-active-color: var(--ip-accent-fg);
    --bs-btn-active-bg: var(--ip-accent-active);
    --bs-btn-active-border-color: var(--ip-accent-active);
    --bs-btn-disabled-color: #7d969d;
    --bs-btn-disabled-border-color: #2c4049;
    --bs-btn-focus-shadow-rgb: var(--ip-accent-rgb);
}

/* Кнопка-ссылка: цвет берём из --bs-link-color (перекрашен выше). */
.btn-link {
    --bs-btn-color: var(--ip-accent);
    --bs-btn-hover-color: var(--ip-accent-hover);
    --bs-btn-active-color: var(--ip-accent-active);
    --bs-btn-disabled-color: #7d969d;
}

/* Вторичная кнопка в тёмной теме: панель лендинга + светлый текст. */
:root[data-bs-theme="dark"] .btn-secondary {
    --bs-btn-color: #e8f7f7;
    --bs-btn-bg: var(--ip-panel-2);
    --bs-btn-border-color: #344a52;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: #16262f;
    --bs-btn-hover-border-color: #5be2d2;
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: #1b2f3a;
    --bs-btn-active-border-color: #5be2d2;
    --bs-btn-disabled-color: #8ca5ad;
    --bs-btn-disabled-bg: #101b22;
    --bs-btn-disabled-border-color: #2c4049;
}

/* .btn-light в тёмной теме остаётся светлой кнопкой с тёмным текстом —
   это корректная пара; фиксируем явно, чтобы тема не «перевернула» её. */
:root[data-bs-theme="dark"] .btn-light {
    --bs-btn-color: #06201e;
    --bs-btn-bg: #d9e4e6;
    --bs-btn-border-color: #d9e4e6;
    --bs-btn-hover-color: #06201e;
    --bs-btn-hover-bg: #ffffff;
    --bs-btn-hover-border-color: #ffffff;
    --bs-btn-active-color: #06201e;
    --bs-btn-active-bg: #c6d4d7;
    --bs-btn-active-border-color: #c6d4d7;
    --bs-btn-disabled-color: #2c4049;
    --bs-btn-disabled-bg: #9fb2b6;
    --bs-btn-disabled-border-color: #9fb2b6;
}

:root[data-bs-theme="dark"] .btn-dark {
    --bs-btn-color: #e8f7f7;
    --bs-btn-bg: #101b22;
    --bs-btn-border-color: #344a52;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: #16262f;
    --bs-btn-hover-border-color: #5be2d2;
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: #1b2f3a;
    --bs-btn-active-border-color: #5be2d2;
}

/* ---------- карточки, панели, модальные окна ---------- */

:root[data-bs-theme="dark"] .card,
:root[data-bs-theme="dark"] .modal-content,
:root[data-bs-theme="dark"] .dropdown-menu,
:root[data-bs-theme="dark"] .list-group-item,
:root[data-bs-theme="dark"] .offcanvas,
:root[data-bs-theme="dark"] .toast {
    background-color: var(--ip-panel);
    border-color: var(--ip-line);
    color: var(--ip-fg);
}

:root[data-bs-theme="dark"] .card-header,
:root[data-bs-theme="dark"] .card-footer,
:root[data-bs-theme="dark"] .modal-header,
:root[data-bs-theme="dark"] .modal-footer,
:root[data-bs-theme="dark"] .dropdown-header {
    background-color: var(--ip-panel-2);
    border-color: var(--ip-line);
}

:root[data-bs-theme="dark"] .dropdown-item {
    color: var(--ip-fg);
}

:root[data-bs-theme="dark"] .dropdown-item:hover,
:root[data-bs-theme="dark"] .dropdown-item:focus {
    background-color: #16262f;
    color: #ffffff;
}

/* ---------- формы ---------- */

:root[data-bs-theme="dark"] .form-control,
:root[data-bs-theme="dark"] .form-select,
:root[data-bs-theme="dark"] .input-group-text {
    background-color: var(--ip-panel-2);
    border-color: var(--ip-line-strong);
    color: var(--ip-fg);
}

:root[data-bs-theme="dark"] .form-control::placeholder,
:root[data-bs-theme="dark"] .form-select::placeholder {
    color: #7d969d;
}

:root[data-bs-theme="dark"] .form-control:focus,
:root[data-bs-theme="dark"] .form-select:focus {
    background-color: var(--ip-panel-2);
    border-color: var(--ip-accent);
    color: var(--ip-fg);
    box-shadow: 0 0 0 0.25rem rgba(var(--ip-accent-rgb), 0.25);
}

:root[data-bs-theme="dark"] .form-label,
:root[data-bs-theme="dark"] .form-check-label,
:root[data-bs-theme="dark"] .form-text {
    color: var(--ip-muted);
}

/* ---------- таблицы ---------- */

:root[data-bs-theme="dark"] .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--ip-fg);
    --bs-table-border-color: var(--ip-line);
    --bs-table-striped-bg: #0b141a;
    --bs-table-striped-color: var(--ip-fg);
    --bs-table-hover-bg: #12222b;
    --bs-table-hover-color: #ffffff;
    --bs-table-active-bg: #16262f;
    color: var(--ip-fg);
}

/* ---------- навигация ---------- */

:root[data-bs-theme="dark"] .nav-tabs {
    border-color: var(--ip-line);
}

:root[data-bs-theme="dark"] .nav-tabs .nav-link {
    color: var(--ip-muted);
}

:root[data-bs-theme="dark"] .nav-tabs .nav-link:hover {
    border-color: transparent;
    color: var(--ip-fg);
}

:root[data-bs-theme="dark"] .nav-tabs .nav-link.active {
    background-color: var(--ip-panel);
    border-color: var(--ip-line) var(--ip-line) var(--ip-panel);
    color: var(--ip-accent);
}

/* Боковое меню (offcanvas): тема задаёт `.offcanvas-item>a{color:var(--bs-secondary)}`
   — на графите это 4.16:1, ниже AA. Специфичность темы (0,2,1), поэтому
   поднимаемся до (0,3,1). */
:root[data-bs-theme="dark"] .offcanvas-item > a {
    color: var(--ip-muted);
}

:root[data-bs-theme="dark"] .offcanvas-item:hover > a {
    color: var(--ip-fg);
}

:root[data-bs-theme="dark"] .offcanvas-item.active > .nav-link {
    color: var(--ip-accent) !important;
}

:root[data-bs-theme="dark"] .breadcrumb-item.active {
    color: var(--ip-muted);
}

:root[data-bs-theme="dark"] .pagination {
    --bs-pagination-color: var(--ip-accent);
    --bs-pagination-bg: var(--ip-panel-2);
    --bs-pagination-border-color: var(--ip-line);
    --bs-pagination-hover-color: var(--ip-accent-fg);
    --bs-pagination-hover-bg: var(--ip-accent);
    --bs-pagination-hover-border-color: var(--ip-accent);
    --bs-pagination-active-color: var(--ip-accent-fg);
    --bs-pagination-active-bg: var(--ip-accent);
    --bs-pagination-active-border-color: var(--ip-accent);
    --bs-pagination-disabled-color: #7d969d;
    --bs-pagination-disabled-bg: var(--ip-panel);
    --bs-pagination-disabled-border-color: var(--ip-line);
}

/* ---------- уведомления и бейджи ---------- */

/* huraga.css задаёт `--bs-alert-color: var(--bs-danger)` — базовый (тёмный)
   оттенок, который на тёмном фоне даёт ~1:1. Перекрашиваем светлыми. */
:root[data-bs-theme="dark"] .alert-danger {
    --bs-alert-color: #ffa3a3;
    --bs-alert-bg: rgba(220, 53, 69, 0.15);
    --bs-alert-border-color: rgba(220, 53, 69, 0.4);
}

:root[data-bs-theme="dark"] .alert-warning {
    --bs-alert-color: #ffd666;
    --bs-alert-bg: rgba(255, 193, 7, 0.12);
    --bs-alert-border-color: rgba(255, 193, 7, 0.35);
}

:root[data-bs-theme="dark"] .alert-success {
    --bs-alert-color: #8fe0b0;
    --bs-alert-bg: rgba(25, 135, 84, 0.16);
    --bs-alert-border-color: rgba(25, 135, 84, 0.4);
}

:root[data-bs-theme="dark"] .alert-info {
    --bs-alert-color: #7fe7da;
    --bs-alert-bg: rgba(96, 223, 207, 0.12);
    --bs-alert-border-color: rgba(96, 223, 207, 0.35);
}

:root[data-bs-theme="dark"] .alert-primary {
    --bs-alert-color: #9cefe5;
    --bs-alert-bg: #0c2b2c;
    --bs-alert-border-color: #1b5755;
}

:root[data-bs-theme="dark"] .alert-secondary {
    --bs-alert-color: var(--ip-fg);
    --bs-alert-bg: var(--ip-panel-2);
    --bs-alert-border-color: var(--ip-line);
}

:root[data-bs-theme="dark"] .alert-light {
    --bs-alert-color: #06201e;
    --bs-alert-bg: #d9e4e6;
    --bs-alert-border-color: #c6d4d7;
}

:root[data-bs-theme="dark"] .alert-dark {
    --bs-alert-color: var(--ip-fg);
    --bs-alert-bg: #050a0e;
    --bs-alert-border-color: var(--ip-line);
}

/* Бейджи: светлые варианты получают тёмный текст, тёмные — светлый. */
:root[data-bs-theme="dark"] .badge.text-bg-light {
    color: #06201e !important;
    background-color: #d9e4e6 !important;
}

:root[data-bs-theme="dark"] .badge.text-bg-primary {
    color: var(--ip-accent-fg) !important;
    background-color: var(--ip-accent) !important;
}

:root[data-bs-theme="dark"] .badge.text-bg-warning,
:root[data-bs-theme="dark"] .badge.text-bg-info {
    color: #06201e !important;
}

/* ---------- outline-кнопки в тёмной теме ----------
   Bootstrap рисует их базовым (тёмным) цветом, рассчитанным на светлый фон:
   на графите это 1.3–4.3:1. Берём светлые оттенки. */
:root[data-bs-theme="dark"] .btn-outline-secondary {
    --bs-btn-color: #a6b9bf;
    --bs-btn-border-color: #46595f;
    --bs-btn-hover-color: #06201e;
    --bs-btn-hover-bg: #a6b9bf;
    --bs-btn-hover-border-color: #a6b9bf;
    --bs-btn-active-color: #06201e;
    --bs-btn-active-bg: #8ca5ad;
    --bs-btn-active-border-color: #8ca5ad;
    --bs-btn-disabled-color: #7d969d;
    --bs-btn-disabled-border-color: #2c4049;
}

:root[data-bs-theme="dark"] .btn-outline-success {
    --bs-btn-color: #8fe0b0;
    --bs-btn-border-color: #2f7d55;
    --bs-btn-hover-color: #06201e;
    --bs-btn-hover-bg: #8fe0b0;
    --bs-btn-hover-border-color: #8fe0b0;
    --bs-btn-active-color: #06201e;
    --bs-btn-active-bg: #6fdca8;
    --bs-btn-active-border-color: #6fdca8;
    --bs-btn-disabled-color: #4c7a63;
    --bs-btn-disabled-border-color: #2c4049;
}

:root[data-bs-theme="dark"] .btn-outline-danger {
    --bs-btn-color: #ffa3a3;
    --bs-btn-border-color: #7e3b42;
    --bs-btn-hover-color: #1d0608;
    --bs-btn-hover-bg: #ffa3a3;
    --bs-btn-hover-border-color: #ffa3a3;
    --bs-btn-active-color: #1d0608;
    --bs-btn-active-bg: #ff8f8f;
    --bs-btn-active-border-color: #ff8f8f;
    --bs-btn-disabled-color: #8a5b5f;
    --bs-btn-disabled-border-color: #2c4049;
}

:root[data-bs-theme="dark"] .btn-outline-warning {
    --bs-btn-color: #ffd666;
    --bs-btn-border-color: #7d6420;
    --bs-btn-hover-color: #1f1703;
    --bs-btn-hover-bg: #ffd666;
    --bs-btn-hover-border-color: #ffd666;
    --bs-btn-active-color: #1f1703;
    --bs-btn-active-bg: #ffca3a;
    --bs-btn-active-border-color: #ffca3a;
    --bs-btn-disabled-color: #8a7a45;
    --bs-btn-disabled-border-color: #2c4049;
}

:root[data-bs-theme="dark"] .btn-outline-info {
    --bs-btn-color: #7fe7da;
    --bs-btn-border-color: #2c6f6a;
    --bs-btn-hover-color: #06201e;
    --bs-btn-hover-bg: #7fe7da;
    --bs-btn-hover-border-color: #7fe7da;
    --bs-btn-active-color: #06201e;
    --bs-btn-active-bg: var(--ip-accent);
    --bs-btn-active-border-color: var(--ip-accent);
    --bs-btn-disabled-color: #4f7a76;
    --bs-btn-disabled-border-color: #2c4049;
}

/* btn-outline-dark на тёмном фоне невидим (1.27:1) — делаем светлым. */
:root[data-bs-theme="dark"] .btn-outline-dark {
    --bs-btn-color: #d9e4e6;
    --bs-btn-border-color: #5a6f76;
    --bs-btn-hover-color: #06201e;
    --bs-btn-hover-bg: #d9e4e6;
    --bs-btn-hover-border-color: #d9e4e6;
    --bs-btn-active-color: #06201e;
    --bs-btn-active-bg: #c6d4d7;
    --bs-btn-active-border-color: #c6d4d7;
    --bs-btn-disabled-color: #7d969d;
    --bs-btn-disabled-border-color: #2c4049;
}

/* ---------- ссылки в контенте ---------- */

:root[data-bs-theme="dark"] a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link) {
    color: var(--ip-accent);
}

:root[data-bs-theme="dark"] a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):hover {
    color: var(--ip-accent-hover);
}

/* ---------- светлая тема: акцент тоже перекрашен ----------
 * Переключатель темы остаётся рабочим; в light-режиме кнопки должны иметь
 * тот же контраст, поэтому .btn-primary/.btn-outline-primary заданы выше без
 * привязки к теме (teal + тёмный текст).
 */