/*
 * Шапка сайта и меню разделов — единый стиль для всего сайта, как в сервисных поступлениях.
 * Переменные --site-* — общая палитра сайта, её используют и стили страниц (например, css/mismatch.css).
 *  - Шапка: createHeader() в lib/main.lib.php (и шапка страниц входа/регистрации).
 *  - Меню: createMenu() в lib/main.lib.php, логика — js/site_navigation.js.
 */

:root {
    --site-bg: light-dark(#f4f2ec, #1f1e1d);
    --site-paper: light-dark(#fefdfa, #2a2926);
    --site-ink: light-dark(#1f1e1d, #ece9e1);
    --site-muted: light-dark(#6b6960, #a8a59c);
    --site-line: light-dark(#e6e3da, #3b3a36);
    --site-accent: light-dark(#b95a37, #e08a6a);
    --site-accent-hover: light-dark(#a24d2e, #ea9c7e);
    --site-on-accent: light-dark(#ffffff, #1f1e1d);
    --site-active: light-dark(#f5e5dc, #3e2f28);
    --site-head: light-dark(#efece5, #33312d);
    --site-success: light-dark(#4a7a4c, #9cc59a);
    --site-success-bg: light-dark(#e8efe1, #2c3a2b);
    --site-warning: light-dark(#8a5a16, #e8c07a);
    --site-warning-bg: light-dark(#f6ead3, #3f3421);
    --site-danger: light-dark(#b0392e, #f1a095);
    --site-danger-bg: light-dark(#f8e3dd, #45292a);
}

/* Ночной режим основного интерфейса (переключатель на главной) */
body.dark {
    --site-bg: #1f1e1d;
    --site-paper: #2a2926;
    --site-ink: #ece9e1;
    --site-muted: #a8a59c;
    --site-line: #3b3a36;
    --site-accent: #e08a6a;
    --site-accent-hover: #ea9c7e;
    --site-on-accent: #1f1e1d;
    --site-active: #3e2f28;
    --site-head: #33312d;
    --site-success: #9cc59a;
    --site-success-bg: #2c3a2b;
    --site-warning: #e8c07a;
    --site-warning-bg: #3f3421;
    --site-danger: #f1a095;
    --site-danger-bg: #45292a;
}

/* Место под полосу прокрутки резервируется всегда. Иначе, когда страница становится
   то длиннее, то короче окна (например, при смене действия на универсальной панели),
   полоса прокрутки появляется и исчезает — и шапка, логотип и содержимое сдвигаются вбок. */
html {
    scrollbar-gutter: stable;
}

/* ============================== Шапка ============================== */

/* Шапка во всю ширину окна — убираем стандартный отступ у body */
body:has(> header.app-header),
body:has(> header.auth-header) {
    margin: 0;
}

header.app-header,
header.auth-header {
    position: relative;
    z-index: 1000;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    height: auto;
    min-height: var(--app-header-height);
    margin: 0 0 16px;
    padding: 7px 14px;
    border: 0;
    border-bottom: 1px solid var(--site-line);
    border-radius: 0;
    background: var(--site-paper);
    box-shadow: none;
    backdrop-filter: none;
    color: var(--site-ink);
    font: 14px/1.4 'Segoe UI', Arial, sans-serif;
}

header.app-header *,
header.auth-header * {
    box-sizing: border-box;
}

header.app-header .part,
header.auth-header .part {
    min-width: 0;
    min-height: 0;
    color: inherit;
}

header.app-header .part.left,
header.auth-header .part.left {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
}

header.app-header .part.central,
header.auth-header .part.central {
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
    padding: 0 12px;
}

header.app-header .part.central a {
    position: static;
    display: flex;
    align-items: center;
    border-radius: 4px;
}

header.app-header .part.central a:focus-visible {
    outline: 2px solid var(--site-accent);
    outline-offset: 4px;
}

header.app-header .part.central img,
header.auth-header .part.central img {
    display: block;
    width: auto;
    height: var(--app-header-logo-height);
    filter: none;
    user-select: none;
}

header.app-header .part.right,
header.auth-header .part.right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

header.app-header .part.right p,
header.auth-header .part.right p {
    margin: 0;
    padding: 0 4px 0 6px;
    color: var(--site-ink);
    font-size: 13px;
    line-height: 1.25;
    white-space: nowrap;
}

/* Кнопки действий справа (например, ночной режим на главной) */
header.app-header .header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

header.app-header .header-actions a,
header.app-header .header-actions button,
header.app-header .part .main-header-theme {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 7px 10px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    box-shadow: none;
    color: var(--site-ink);
    font: 13px/1.25 'Segoe UI', Arial, sans-serif;
    white-space: nowrap;
    cursor: pointer;
}

header.app-header .header-actions a:hover,
header.app-header .header-actions button:hover,
header.app-header .part .main-header-theme:hover {
    border: 0;
    background: var(--site-bg);
    box-shadow: none;
}

header.app-header .header-actions a:focus-visible,
header.app-header .header-actions button:focus-visible,
header.app-header .part .main-header-theme:focus-visible {
    outline: 2px solid var(--site-accent);
    outline-offset: 2px;
}

/* Поиск по серийному номеру в шапке */
header.app-header .serialSearch.widget {
    margin-left: 0;
}

header.app-header .serialSearch .serialSearch-input {
    border: 1px solid var(--site-line);
    border-radius: 7px;
    background: var(--site-paper);
    box-shadow: none;
    color: var(--site-ink);
}

/* на главной в ночном режиме у всех input фон задан с !important — перекрываем для поля в шапке */
body.dark header.app-header .serialSearch .serialSearch-input {
    background: var(--site-paper) !important;
}

header.app-header .serialSearch .serialSearch-input::placeholder {
    color: var(--site-muted);
}

header.app-header .serialSearch .serialSearch-input:focus {
    border-color: var(--site-accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--site-accent) 22%, transparent);
}

header.app-header .serialSearch .serialSearch-go {
    border: 1px solid var(--site-accent);
    border-radius: 7px;
    background: var(--site-accent);
    box-shadow: none;
    color: var(--site-on-accent);
}

header.app-header .serialSearch .serialSearch-go:hover {
    border-color: var(--site-accent-hover);
    background: var(--site-accent-hover);
    box-shadow: none;
    transform: none;
}

header.app-header .serialSearch .serialSearch-settings-btn,
header.app-header .serialSearch .serialSearch-settings-btn:hover,
header.app-header .serialSearch.settings-open .serialSearch-settings-btn {
    border: 0;
    background: transparent;
    color: var(--site-muted);
}

header.app-header .serialSearch .serialSearch-settings-btn:hover,
header.app-header .serialSearch.settings-open .serialSearch-settings-btn {
    color: var(--site-accent);
}

header.app-header .serialSearch .serialSearch-settings {
    border: 1px solid var(--site-line);
    border-radius: 8px;
    background: var(--site-paper);
    box-shadow: 0 10px 24px #1f1e1d1f;
    color: var(--site-ink);
}

header.app-header .serialSearch .serialSearch-settings label {
    color: var(--site-ink);
}

header.app-header .serialSearch .serialSearch-settings input[type="radio"] {
    accent-color: var(--site-accent);
}

@media (max-width: 720px) {
    header.app-header .part.right p {
        display: none;
    }
}

@media (max-width: 560px) {
    header.app-header {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    header.app-header .part.central {
        display: none;
    }
}

/* ============================== Меню ============================== */

/* Кнопка меню */
.site-menu-toggle {
    display: grid;
    place-items: center;
    box-sizing: border-box;
    width: 40px;
    height: 38px;
    margin: 0;
    padding: 8px;
    border: 1px solid transparent;
    border-radius: 7px;
    background: var(--site-paper);
    cursor: pointer;
}

.site-menu-toggle:hover,
.site-menu-toggle[aria-expanded="true"] {
    border-color: var(--site-line);
    background: var(--site-active);
}

.site-menu-toggle:focus-visible {
    outline: 2px solid var(--site-accent);
    outline-offset: 2px;
}

.site-menu-toggle img {
    display: block;
    width: 21px;
    height: 21px;
    object-fit: contain;
    filter: none;
    opacity: 1;
}

/* Панель */
.site-nav {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 2010;
    display: block;
    box-sizing: border-box;
    width: 248px;
    max-width: calc(100vw - 40px);
    padding: 0 12px 18px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    visibility: hidden;
    background: var(--site-paper);
    box-shadow: 12px 0 28px #1f1e1d18;
    color: var(--site-ink);
    font: 14px/1.4 'Segoe UI', Arial, sans-serif;
    text-align: left;
    pointer-events: none;
    transform: translateX(-100%);
    transition: transform 180ms ease, visibility 180ms ease;
}

.site-nav *,
.site-nav *::before,
.site-nav *::after {
    box-sizing: border-box;
}

html.site-nav-open .site-nav {
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0);
    /* при открытии панель видна сразу, чтобы на неё можно было перевести фокус */
    transition: transform 180ms ease, visibility 0s;
}

.site-nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: #17161544;
    cursor: pointer;
}

.site-nav-backdrop[hidden] {
    display: none;
}

html.site-nav-open,
html.site-nav-open body {
    overflow: hidden;
}

/* Кнопка закрытия внутри панели: скрипт ставит её точно на место кнопки меню */
.site-nav__top {
    padding: var(--site-nav-toggle-top, 8px) 0 14px calc(var(--site-nav-toggle-left, 14px) - 12px);
}

.site-nav .site-nav__close {
    width: var(--site-nav-toggle-width, 40px);
    height: var(--site-nav-toggle-height, 38px);
    border-color: var(--site-line);
    background: var(--site-active);
}

/* Пункты */
.site-nav__list {
    display: grid;
    gap: 2px;
}

.site-nav__current + .site-nav__list {
    padding-top: 9px;
    border-top: 1px solid var(--site-line);
}

.site-nav a {
    display: block;
    padding: 9px 11px;
    border-radius: 7px;
    color: var(--site-ink);
    text-decoration: none;
    overflow-wrap: anywhere;
}

.site-nav a:hover {
    background: var(--site-active);
    color: var(--site-accent);
}

.site-nav a:focus-visible {
    outline: 2px solid var(--site-accent);
    outline-offset: 2px;
}

.site-nav .site-nav__current {
    margin-bottom: 9px;
    background: var(--site-active);
    color: var(--site-accent);
    font-weight: 600;
}

.site-nav .site-nav__exit {
    margin-top: 9px;
    border-top: 1px solid var(--site-line);
    border-radius: 0;
}

@media (max-width: 900px) {
    .site-nav {
        border-right: 1px solid var(--site-line);
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-nav {
        transition: none;
    }
}