/* ==========================================================================
   Дизайн-система сайта. Тёплая «архивная» палитра: пергаментный фон,
   сургучно-бордовый акцент, латунный вторичный акцент; парадный serif
   для заголовков, чтобы сохранить строгий, документальный тон сайта.
   Подключается на каждой странице через main/layout.html.
   ========================================================================== */

:root {
    color-scheme: light;
    --ink: #262220;
    --ink-soft: #5b544c;
    --paper: #f7f1e6;
    --paper-panel: #fffdf8;
    --line: #ddd1ba;
    --accent: #7a2e2e;
    --accent-dark: #5c2020;
    --accent-soft: #f1e2d6;
    --gold: #96742f;
    --gold-dark: #7a5d24;
    --success: #3f6b46;
    --danger: #8c3232;
    --danger-dark: #702727;
    --radius: 6px;
    --shadow: 0 1px 3px rgba(38, 34, 32, .1), 0 1px 2px rgba(38, 34, 32, .06);
    --font-heading: 'PT Serif', Georgia, 'Times New Roman', serif;
    --font-body: 'Segoe UI', system-ui, -apple-system, Tahoma, Geneva, Verdana, sans-serif;
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --ink: #ccc8bf;
    --ink-soft: #b0aa9e;
    --paper: #181407;
    --paper-panel: #23211b;
    --line: #665e49;
    --accent: #984740;
    --accent-dark: #803a34;
    --accent-soft: #342923;
    --gold: #c2a66b;
    --gold-dark: #c2a66b;
    --success: #82b18a;
    --danger: #b55c56;
    --danger-dark: #e1a09a;
    --shadow: 0 1px 4px rgba(0, 0, 0, .25);
    --bs-body-color: var(--ink);
    --bs-body-bg: var(--paper-panel);
    --bs-border-color: var(--line);
    --bs-secondary-color: var(--ink-soft);
}

:root[data-theme="dark"] a { color: #d6a29a; }
:root[data-theme="dark"] a:hover { color: #e9bdb5; }
:root[data-theme="dark"] .site-brand,
:root[data-theme="dark"] .site-nav a { color: var(--ink); }
:root[data-theme="dark"] .table {
    --bs-table-color: var(--ink);
    --bs-table-striped-color: var(--ink);
    --bs-table-hover-color: var(--ink);
}
:root[data-theme="dark"] .messages .success { background: #243429; color: #b5d5b9; }
:root[data-theme="dark"] .messages .error { background: #3b2523; color: #e1a09a; }
:root[data-theme="dark"] .btn-danger { --bs-btn-border-color: var(--danger); --bs-btn-hover-bg: #91443f; --bs-btn-hover-border-color: #b55c56; --bs-btn-active-bg: #91443f; --bs-btn-active-border-color: #b55c56; }
:root[data-theme="dark"] a.btn { color: #fff; }

.theme-control {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .65rem 1.25rem;
    color: var(--ink-soft);
    font-size: .85rem;
}
.theme-control:has([hidden]) { display: none; }
.theme-switch {
    width: 36px;
    height: 22px;
    padding: 2px;
    flex: none;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--accent-soft);
    cursor: pointer;
}
.theme-switch__thumb {
    display: block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--ink-soft);
    transition: transform .18s ease;
}
.theme-switch[aria-checked="true"] .theme-switch__thumb { transform: translateX(14px); background: var(--gold); }
.theme-switch:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .theme-switch__thumb { transition: none; } }
@media (min-width: 900px) { .theme-control { padding: 0 .5rem; } }

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

html, body { height: 100%; }

/* Полоса прокрутки всегда резервирует место, даже когда страница короткая
   и не скроллится — иначе центрированная шапка/контент едут на ширину
   скроллбара при переходе между «длинными» и «короткими» страницами. */
html { overflow-y: scroll; }

body {
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.65;
}

img { max-width: 100%; }

a { color: var(--accent); }
a:hover { color: var(--accent-dark); }

.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

h1, h2, h3, h4 { font-family: var(--font-heading); color: var(--ink); font-weight: 700; }

h1 {
    font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2.1rem);
    border-bottom: 2px solid var(--accent);
    padding-bottom: .5rem;
    margin: 0 0 1.5rem;
}

h2 { font-size: 1.3rem; margin: 1.75rem 0 .75rem; }
h3 { font-size: 1.1rem; margin: 1.5rem 0 .75rem; }

/* ---------- Шапка ---------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--paper-panel);
    border-bottom: 3px solid var(--accent);
    box-shadow: var(--shadow);
}

.site-header__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: .6rem 1rem;
}

.site-brand {
    display: flex;
    align-items: center;
    gap: .65rem;
    text-decoration: none;
    color: var(--ink);
    min-width: 0;
}

.site-brand img {
    width: 40px;
    height: 48px;
    object-fit: cover;
    display: block;
    flex: none;
    border-radius: 3px;
}

.site-brand span {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.2;
    font-size: .95rem;
}

.nav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 42px;
    height: 38px;
    flex: none;
    background: var(--paper-panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    cursor: pointer;
}

.nav-toggle span {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--ink);
    border-radius: 2px;
}

.site-nav {
    max-height: 0;
    overflow: hidden;
    background: var(--paper-panel);
    border-top: 1px solid transparent;
    transition: max-height .25s ease;
}

.site-nav.is-open {
    max-height: 480px;
    border-top-color: var(--line);
}

.site-nav ul {
    list-style: none;
    margin: 0;
    padding: .25rem 1rem;
}

.site-nav__links li,
.site-nav__account li {
    border-bottom: 1px solid var(--line);
}

.site-nav a {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .8rem .25rem;
    color: var(--ink);
    text-decoration: none;
    font-size: 1rem;
}

.site-nav a:hover { color: var(--accent); }
.site-nav i { width: 1.1em; text-align: center; color: var(--gold-dark); }

/* ---------- Основной контент ---------- */

.site-main {
    flex: 1;
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    padding: 1.75rem 1rem 3rem;
}

/* ---------- Информационные карточки (главная, о проекте, разделы) ---------- */

.project-description, .features, .recent-changes {
    margin: 0 auto 1.5rem;
    padding: 1.5rem;
    max-width: 100%;
    background: var(--paper-panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.project-description h2, .recent-changes h3 { margin-top: 0; }

.project-description p, .recent-changes ul li { line-height: 1.7; margin-bottom: 1rem; }

.recent-changes ul { list-style: none; padding-left: 0; margin: 0; }
.recent-changes ul li a { text-decoration: none; }
.recent-changes ul li a:hover { text-decoration: underline; }
.recent-changes__meta { color: var(--ink-soft); font-size: .85em; }

/* Галерея портретов — переносится на несколько строк на узких экранах */
.portrait-gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-bottom: 20px;
}

.portrait-gallery img {
    width: 100px;
    height: 130px;
    object-fit: cover;
    border: 2px solid var(--line);
    border-radius: 3px;
}

/* ---------- Список разделов веб-архива ---------- */

.archive {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0;
    max-width: 100%;
    background: var(--paper-panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.archive li {
    border-bottom: 1px solid var(--line);
    transition: background-color .2s ease;
}

.archive li:last-child { border-bottom: none; }

.archive li a {
    display: block;
    padding: 1rem 1.25rem;
    text-decoration: none;
    color: var(--ink);
    font-weight: 600;
}

.archive li a:hover {
    text-decoration: none;
    color: var(--accent);
    background: var(--accent-soft);
}

/* ---------- Футер ---------- */

.site-footer {
    border-top: 2px solid var(--line);
    background: var(--paper-panel);
    padding: 1.5rem 1rem;
}

.site-footer__inner {
    max-width: 960px;
    margin: 0 auto;
    text-align: center;
}

.site-footer h5 {
    margin: 0 0 .5rem;
    font-size: 1rem;
}

.site-footer p { margin: .25rem 0; color: var(--ink-soft); }
.site-footer a { color: var(--ink-soft); }
.site-footer .site-footer__version { font-size: .85em; opacity: .7; white-space: nowrap; }

/* ---------- Сообщения (django.contrib.messages) ---------- */

.messages { list-style: none; padding: 0; margin: 0 0 1.25rem; }

.messages li, .messages p {
    padding: .75rem 1rem;
    margin: 0 0 .5rem;
    border-radius: var(--radius);
    border: 1px solid transparent;
}

.messages .success { background: #eaf3ec; border-color: var(--success); color: #234a2b; }
.messages .error { background: #f7e7e7; border-color: var(--danger); color: var(--danger-dark); }

/* ---------- Формы (используется на всех страницах: логин, регистрация,
   добавление источника/записи библиотеки/профиль и т.д.) ---------- */

form {
    max-width: 640px;
    padding: 1.5rem;
    background-color: var(--paper-panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: var(--shadow);
}

form p { margin: 0 0 1rem; }

form label {
    display: block;
    margin-bottom: .35rem;
    font-weight: 600;
    color: var(--ink);
}

form input:not(.form-control):not(.code-square):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]),
form textarea:not(.form-control),
form select:not(.form-control) {
    display: block;
    width: 100%;
    padding: .6rem .75rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper-panel);
    color: var(--ink);
    font: inherit;
}

form textarea:not(.form-control) { min-height: 110px; resize: vertical; }

form input:focus, form textarea:focus, form select:focus {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
    border-color: var(--accent);
}

/* Поля, использующие класс Bootstrap .form-control (логин, регистрация) —
   подсвечиваем фокус в тон общей палитре. */
.form-control:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 .2rem var(--accent-soft);
}

/* Формы входа, регистрации, ввода кода и повторной отправки письма: у полей Bootstrap
   .form-control нет нижнего отступа, и следующая подпись или кнопка прилипает к полю. */
.auth-form .form-control { margin-bottom: 1rem; }

/* Шесть маленьких прямоугольников в один ряд под 6-значный код на странице ввода
   кода из письма. Пустой прямоугольник показывает серую точку; после ввода цифры
   фокус перескакивает на следующий. Прямоугольники сжимаются на узких экранах,
   но всегда остаются в одной строке. */
.code-inputs {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: .5rem;
    margin: .5rem 0 1.5rem;
}
.code-inputs .code-square {
    flex: 1 1 0;
    min-width: 0;
    max-width: 2.75rem;
    height: 2.5rem;
    margin: 0;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background-color: var(--paper-panel);
    color: var(--ink);
    font: inherit;
    font-size: 1.2rem;
    font-weight: 700;
    text-align: center;
}
.code-inputs .code-square::placeholder { color: var(--ink-soft); }
.code-inputs .code-square:focus {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
    border-color: var(--accent);
}
@media (min-width: 900px) {
    .code-inputs .code-square {
        max-width: 3rem;
        height: 2.75rem;
        font-size: 1.4rem;
    }
}

/* Вторичное действие под карточкой формы (например, «Отправить код ещё раз»). */
.form-secondary { margin: 1rem 0 .75rem; }

/* Поле фото (виджет main.widgets.PhotoInput; эти же правила пока есть и в edit_servant.css): миниатюра слева, галочка и выбор файла справа */
.photo-input {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1rem;
}

.photo-input__preview img {
    display: block;
    width: 110px;
    height: 140px;
    object-fit: cover;
    border: 2px solid var(--line);
    border-radius: 6px;
}

.photo-input__controls { display: flex; flex-direction: column; gap: .5rem; }

form .photo-input__clear {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-weight: 400;
    margin: 0;
}

.photo-input__hint { color: var(--ink-soft); font-size: .9rem; }

/* Маленькие формы-кнопки внутри таблиц/карточек (например, "Удалить"
   рядом с другой кнопкой) не должны получать вид отдельной карточки. */
form.inline-form {
    display: inline;
    max-width: none;
    padding: 0;
    margin: 0;
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

form ul.errorlist {
    list-style: none;
    padding: 0;
    margin: -.5rem 0 .75rem;
    color: var(--danger-dark);
    font-size: .9rem;
}

/* Единая кнопочная палитра поверх Bootstrap-классов, которыми пользуются
   шаблоны (btn btn-primary/success/danger/secondary) — переопределяем
   локальные CSS-переменные компонентов Bootstrap 5.3. Контур делаем на
   тон темнее заливки (а не «в цвет», как по умолчанию у Bootstrap) —
   так кнопка не сливается с фоном и заметнее. */

.btn-primary, .btn-success, .btn-danger, .btn-secondary {
    --bs-btn-font-weight: 600;
    --bs-btn-border-width: 2px;
}

.btn-primary {
    --bs-btn-bg: var(--accent);
    --bs-btn-border-color: var(--accent-dark);
    --bs-btn-hover-bg: var(--accent-dark);
    --bs-btn-hover-border-color: var(--accent-dark);
    --bs-btn-active-bg: var(--accent-dark);
    --bs-btn-active-border-color: var(--accent-dark);
    --bs-btn-disabled-bg: var(--accent);
    --bs-btn-disabled-border-color: var(--accent-dark);
}

.btn-success {
    --bs-btn-bg: var(--success);
    --bs-btn-border-color: #2f5637;
    --bs-btn-hover-bg: #2f5637;
    --bs-btn-hover-border-color: #24422a;
    --bs-btn-active-bg: #2f5637;
    --bs-btn-active-border-color: #24422a;
}

.btn-danger {
    --bs-btn-bg: var(--danger);
    --bs-btn-border-color: var(--danger-dark);
    --bs-btn-hover-bg: var(--danger-dark);
    --bs-btn-hover-border-color: var(--danger-dark);
    --bs-btn-active-bg: var(--danger-dark);
    --bs-btn-active-border-color: var(--danger-dark);
}

.btn-secondary {
    --bs-btn-bg: #6b6157;
    --bs-btn-border-color: #554d45;
    --bs-btn-hover-bg: #554d45;
    --bs-btn-hover-border-color: #443d36;
    --bs-btn-active-bg: #554d45;
    --bs-btn-active-border-color: #443d36;
}

@media (min-width: 900px) {
    .btn-primary, .btn-success, .btn-danger, .btn-secondary {
        --bs-btn-font-size: 1.05rem;
        --bs-btn-padding-x: 1.15rem;
        --bs-btn-padding-y: .5rem;
    }
}

/* Таблицы (библиотека, источники) — используют встроенные CSS-переменные
   таблиц Bootstrap 5.3, поэтому достаточно переопределить их один раз. */

.table {
    --bs-table-bg: var(--paper-panel);
    --bs-table-striped-bg: var(--accent-soft);
    --bs-table-hover-bg: var(--accent-soft);
    --bs-table-border-color: var(--line);
}

.table thead th {
    font-family: var(--font-heading);
    color: var(--ink);
}

.table-responsive { margin-bottom: 1.5rem; }

/* Длинные слова без пробелов (ссылки, неразрывные пробелы из Word/Access)
   не должны растягивать таблицу за пределы экрана. Режим `anywhere` (рвёт
   где угодно и учитывается при расчёте ширины столбцов) включаем только
   для третьего, «длинного» столбца: если применить его ко всем, браузер
   сожмёт узкие столбцы почти до нуля. Остальные переносятся по словам. */
.table td:nth-child(3) {
    overflow-wrap: anywhere;
}

/* Выключная (по ширине) вёрстка длинных текстовых блоков — биографии,
   библиографические описания, характеристики фондов — только для
   десктопа: на узких экранах выключка растягивает межсловные пробелы
   и ухудшает читаемость, поэтому на мобильных оставляем текст по левому
   краю. */
@media (min-width: 900px) {
    .project-description p,
    .recent-changes p,
    .table td {
        text-align: justify;
        hyphens: auto;
    }
}

@media (max-width: 599px) {
    .site-main { padding: 1.25rem .75rem 2.5rem; }
    .project-description, .features, .recent-changes, .archive { padding: 1.1rem; }
}

/* ==========================================================================
   Десктоп (от 900px): панель навигации переезжает налево (как было в
   первой версии сайта) и растягивается на всю высоту, контент — справа,
   подвал — во всю ширину внизу. Плюс более крупные шрифты и просторные
   карточки — на широком экране сайт не должен выглядеть мелко и пусто.
   Блок стоит в конце файла намеренно: он переопределяет базовые правила
   выше, а при равной специфичности в CSS побеждает более позднее правило.
   Мобильная вёрстка (всё, что выше) не меняется.
   ========================================================================== */
@media (min-width: 900px) {
    body {
        display: grid;
        grid-template-columns: 280px 1fr;
        grid-template-rows: 1fr auto;
        height: auto;
        min-height: 100vh;
        font-size: 18px;
    }

    h1 { font-size: clamp(2rem, 1.1rem + 2.3vw, 3.1rem); }
    h2 { font-size: 1.75rem; }
    h3 { font-size: 1.4rem; }

    .site-header {
        grid-column: 1;
        grid-row: 1;
        position: static;
        display: flex;
        flex-direction: column;
        border-bottom: none;
        border-right: 3px solid var(--accent);
        padding: 2.5rem 1.5rem;
    }

    .nav-toggle { display: none; }

    .site-header__bar {
        display: block;
        max-width: none;
        margin: 0 0 2rem;
        padding: 0;
    }

    .site-brand {
        flex-direction: column;
        text-align: center;
        gap: .85rem;
    }

    .site-brand img { width: 96px; height: 115px; margin: 0 auto; }
    .site-brand span { font-size: 1.2rem; }

    .site-nav {
        max-height: none;
        overflow: visible;
        display: flex;
        flex-direction: column;
        flex: 1;
        gap: 2rem;
        margin-left: 0;
    }

    .site-nav ul {
        display: flex;
        flex-direction: column;
        padding: 0;
        gap: .6rem;
    }

    .site-nav__links li,
    .site-nav__account li { border-bottom: none; }

    /* Регистрация/Войти (или Профиль/Выход) — прижаты к низу панели */
    .site-nav__account { margin-top: auto; }

    /* Пункты меню — заметные кнопки с контуром, а не просто ссылки */
    .site-nav a {
        justify-content: center;
        padding: .65rem 1rem;
        font-size: 1.05rem;
        font-weight: 600;
        border: 1.5px solid var(--line);
        border-radius: 999px;
        transition: background-color .2s ease, border-color .2s ease, color .2s ease;
    }

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

    .site-nav__account a {
        border-color: var(--accent);
        color: var(--accent);
    }

    .site-nav__account a:hover {
        background: var(--accent);
        color: #fff;
    }

    .site-main {
        grid-column: 2;
        grid-row: 1;
        max-width: 1250px;
        padding: 3rem 2.5rem 4.5rem;
    }

    .site-footer {
        grid-column: 1 / span 2;
        grid-row: 2;
    }

    .site-footer__inner { max-width: 1250px; }

    .project-description, .features, .recent-changes, .archive, form {
        padding: 2.5rem 3rem;
    }

    .portrait-gallery img { width: 140px; height: 178px; }

    .archive li a { padding: 1.25rem 1.75rem; font-size: 1.1rem; }
}