/*
 * Панель в цветах витрины sensey.
 *
 * Подключается в <head> страницы панели шаблоном
 * views/administration/index.html.twig — а НЕ JS-плагином: скрипты плагинов
 * Shopware грузит только после входа, и экран входа остался бы синим.
 *
 * Два слоя:
 *   1. этот файл — переменные Meteor (ими окрашено всё новое в панели 6.7:
 *      кнопки, поля, переключатели, ссылки, фоны), шрифт, меню, экран входа;
 *   2. admin-hardcoded-colors.css — то, что старая часть панели держит числом
 *      (меню целиком и мелочи). Сгенерирован из собранной панели скриптом
 *      app/shopware/tools/admin-theme-gen.mjs; после обновления Shopware —
 *      перегенерировать, иначе новые места останутся синими.
 *
 * Палитра — из витрины (storefront/public/css/tokens.css):
 *   сливочный #f7f4ef · бумага #f1ece3 · графит #3b3b3b / #252525
 *   песочный #e8decf · золотистый #c8b08f
 *
 * Золотистый #c8b08f на белом даёт контраст ~2:1 — для ТЕКСТА не годится.
 * Для ссылок и значков взят тёмный оттенок #7a6444 (~5,5:1), золотистый —
 * только для заливок и отметок.
 */

/* --- Шрифт: свой, не с Google — адреса тех, кто работает в панели, наружу не уходят */
@font-face {
    font-family: 'Onest';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('fonts/onest-cyrillic.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: 'Onest';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('fonts/onest-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
        U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
        U+FEFF, U+FFFD;
}

/* --- Переменные. :not([data-theme=dark]) весомее исходного :root и не
 * задевает тёмный набор Shopware, если его когда-нибудь включат. */
:root:not([data-theme='dark']) {
    --font-family-body: 'Onest', 'Inter', Arial, sans-serif;
    --font-family-headings: 'Onest', 'Inter', Arial, sans-serif;

    /* Основное действие: кнопки «Сохранить», переключатели, флажки */
    --color-interaction-primary-default: #3b3b3b;
    --color-interaction-primary-hover: #252525;
    --color-interaction-primary-pressed: #111111;
    --color-interaction-primary-disabled: #b9b3a9;

    /* Рамка выбранного и фокуса — графит: должна быть видна на любом фоне */
    --color-border-brand-default: #3b3b3b;
    --color-border-brand-selected: #3b3b3b;

    /* Ссылки и значки — тёмное золото, читаемое на белом */
    --color-text-brand-default: #7a6444;
    --color-text-brand-hover: #5c4a31;
    --color-icon-brand-default: #7a6444;

    /* «Новое», подсказки — вместо фиолетового */
    --color-text-accent-default: #7a6444;
    --color-icon-accent-default: #8a7350;

    /* Фоны: страница сливочная, выделенное — «бумага» */
    --color-background-brand-default: #f1ece3;
    --color-background-secondary-default: #fbf9f5;
    --color-background-tertiary-default: #f7f4ef;
}

/* --- Шрифт там, где Inter зашит в правило, а не взят из переменной
 * (найдено в собранной панели 6.7.14.2: body, таблицы, всплывающие списки) */
html body,
html .mt-data-table *,
html .mt-data-table__table-wrapper-table-head.is--drag-element,
html .mt-popover-item *,
html input,
html textarea,
html select,
html button {
    font-family: var(--font-family-body);
}

/* --- Меню: отметка активного пункта золотистой полосой */
html .sw-admin-menu .sw-admin-menu__navigation-link.router-link-active {
    box-shadow: inset 3px 0 0 #c8b08f;
}

/* --- Логотип в меню: монограмма S вместо значка Shopware */
html .sw-admin-menu .sw-admin-menu__header-logo {
    background: url('img/sensey-mark.svg') no-repeat center / contain;
}

/* --- Экран входа (разметка Shopware 6.7.15) --------------------------------
 *
 * В 6.7.15 вход переделан: боковой картинки (.sw-login__image) и подписей
 * больше нет — логотип над карточкой с формой, всё в одной колонке по центру.
 * Прежние правила (картинка, «Панель sensey», значок над формой) стали
 * пустыми и убраны. Теперь:
 *   - фон всей страницы — наш снимок с затемнением (панель не ходит за
 *     картинкой к Shopware);
 *   - логотип Shopware над формой заменён белым логотипом sensey;
 *   - форма на белой карточке, чтобы читалась поверх снимка.
 */
html .sw-login {
    background-color: #252525;
    background-image:
        linear-gradient(180deg, rgba(37, 37, 37, 0.35) 0%, rgba(37, 37, 37, 0.75) 100%),
        url('img/login.jpg');
    background-position: center, 70% center;
    background-size: cover, cover;
}

/* Подмена картинки у <img> через content: шаблон входа без скриптов плагинов
 * не переопределить (они грузятся только после входа). */
html .sw-login .sw-login__logo {
    content: url('img/sensey-white.png');
    height: 40px;
    width: auto;
}

html .sw-login .sw-login__card {
    padding: 40px;
    background: #fff;
    border: 0;
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
}

/* Ссылки под карточкой («Забыли пароль?», «Назад») лежат на снимке */
html .sw-login .sw-login__forgot-password-action,
html .sw-login .sw-login__back-link {
    color: #f7f4ef;
}

@media (max-width: 600px) {
    html .sw-login .sw-login__card {
        padding: 24px 20px;
    }
}

/* --- Экран входа в тёмной теме -----------------------------------------------
 *
 * Тему панель берёт из localStorage `mt-theme` (light/dark/system) и ставит
 * <html data-theme>; на входе она та же, что выбрана в профиле. В тёмной теме
 * Meteor переключает переменные на тёмный набор, а наши — только для светлой:
 * получалась белая карточка со светлым текстом и тёмными полями, кнопка, фокус
 * и звёздочки — синие Shopware.
 *
 * Здесь — тёмный вариант той же палитры: графитовая карточка, сливочный текст,
 * золотистые отметки (на графите золотистый читается, ~7:1), кнопка «бумага» с
 * графитовым текстом — светлый вход наоборот. Переменные заданы на .sw-login,
 * а не на :root: остальную тёмную панель это не трогает.
 */
:root[data-theme='dark'] .sw-login {
    --font-family-body: 'Onest', 'Inter', Arial, sans-serif;
    --font-family-headings: 'Onest', 'Inter', Arial, sans-serif;

    --color-text-primary-default: #f1ece3;
    --color-text-secondary-default: #a39d93;
    --color-background-primary-default: #1c1c1c;
    --color-background-tertiary-default: #2e2d2b;
    --color-border-primary-default: #4a4640;

    --color-interaction-primary-default: #f1ece3;
    --color-interaction-primary-hover: #ffffff;
    --color-interaction-primary-pressed: #e8decf;
    --color-interaction-primary-disabled: #4a4640;

    --color-border-brand-default: #c8b08f;
    --color-border-brand-selected: #c8b08f;
    --color-text-brand-default: #d9c4a3;
    --color-text-brand-hover: #e8decf;
    --color-icon-brand-default: #c8b08f;
}

html[data-theme='dark'] .sw-login .sw-login__card {
    background: #252525;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(241, 236, 227, 0.08);
}

/* Текст кнопки Meteor — всегда белый (--color-static-white): на светлой
 * кнопке он пропадает. Графит, а у выключенной — приглушённый сливочный. */
html[data-theme='dark'] .sw-login .mt-button--primary,
html[data-theme='dark'] .sw-login .mt-button--primary .mt-icon {
    color: #252525;
}
html[data-theme='dark'] .sw-login .mt-button--primary:disabled,
html[data-theme='dark'] .sw-login .mt-button--primary.mt-button--disabled,
html[data-theme='dark'] .sw-login .mt-button--primary:disabled .mt-icon,
html[data-theme='dark'] .sw-login .mt-button--primary.mt-button--disabled .mt-icon {
    color: #a39d93;
}

/* Галочка «Оставайтесь в системе» — цвета кнопки */
html[data-theme='dark'] .sw-login .mt-field--checkbox__container .mt-field--checkbox .mt-field__checkbox input[type='checkbox']:checked ~ .mt-field__checkbox-state .mt-icon {
    color: #252525;
}