/* ─────────────────────────────────────────────────────────────────────────────
   Тема админки под стиль voltera.kz.

   Палитра, шрифт и радиусы сняты с сайта: Inter, индиго #6366f1, slate-серые
   границы и текст, белые карточки на светлом фоне, радиус 8px.

   Работает переопределением CSS-переменных Django (они объявлены в base.css в
   :root / html[data-theme="light"]), а не переписыванием правил: так админка
   переживает обновление Django, а мы правим только то, что действительно нужно.

   Тема только светлая. Значения продублированы для html[data-theme="dark"] и
   для @media (prefers-color-scheme: dark) — иначе тёмная тема прилетит из
   dark_mode.css тем, у кого она включена в системе или сохранена в браузере.
   Переключатель убран отдельно: templates/admin/color_theme_toggle.html.
   ───────────────────────────────────────────────────────────────────────────── */

html[data-theme="light"],
html[data-theme="dark"],
:root {
    /* Фоны заголовков модулей и таблиц светлые, индиго остаётся акцентом. */
    --primary: #f1f5f9;
    --primary-fg: #ffffff;
    --secondary: #6366f1;
    --accent: #6366f1;

    --body-fg: #0f172a;
    --body-bg: #ffffff;
    --body-quiet-color: #64748b;
    --body-medium-color: #475569;
    --body-loud-color: #0f172a;

    /* Шапка белая с тонкой границей — как sticky-заголовок на сайте. */
    --header-color: #64748b;
    --header-bg: #ffffff;
    --header-branding-color: #1e293b;
    --header-link-color: #1e293b;

    --breadcrumbs-fg: #64748b;
    --breadcrumbs-link-fg: #475569;
    --breadcrumbs-bg: #f8fafc;

    --link-fg: #4f46e5;
    --link-hover-color: #3730a3;
    --link-selected-fg: #4338ca;

    --hairline-color: #e2e8f0;
    --border-color: #e2e8f0;

    --error-fg: #dc2626;
    --message-success-bg: #dcfce7;
    --message-warning-bg: #fef3c7;
    --message-error-bg: #fee2e2;

    --darkened-bg: #f8fafc;
    --selected-bg: #eef2ff;
    --selected-row: #e0e7ff;

    --button-fg: #ffffff;
    --button-bg: #6366f1;
    --button-hover-bg: #4f46e5;
    --default-button-bg: #4f46e5;
    --default-button-hover-bg: #4338ca;
    --close-button-bg: #64748b;
    --close-button-hover-bg: #475569;
    --delete-button-bg: #ef4444;
    --delete-button-hover-bg: #dc2626;
    --object-tools-fg: #ffffff;
    --object-tools-bg: #64748b;
    --object-tools-hover-bg: #475569;

    --font-family-primary: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, Arial, sans-serif;

    /* Своё: используем ниже, чтобы не плодить магические значения. */
    --voltera-ground: #eef1f4;
    --voltera-radius: 8px;
    --voltera-ring: rgba(99, 102, 241, 0.18);
    --voltera-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);

    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    /* Дубль светлых значений: перебиваем dark_mode.css у тех, у кого тёмная
       тема стоит в системе. */
    :root {
        --primary: #f1f5f9;
        --primary-fg: #ffffff;
        --secondary: #6366f1;
        --accent: #6366f1;
        --body-fg: #0f172a;
        --body-bg: #ffffff;
        --body-quiet-color: #64748b;
        --body-medium-color: #475569;
        --body-loud-color: #0f172a;
        --header-color: #64748b;
        --header-bg: #ffffff;
        --header-branding-color: #1e293b;
        --header-link-color: #1e293b;
        --breadcrumbs-fg: #64748b;
        --breadcrumbs-link-fg: #475569;
        --breadcrumbs-bg: #f8fafc;
        --link-fg: #4f46e5;
        --link-hover-color: #3730a3;
        --link-selected-fg: #4338ca;
        --hairline-color: #e2e8f0;
        --border-color: #e2e8f0;
        --darkened-bg: #f8fafc;
        --selected-bg: #eef2ff;
        --selected-row: #e0e7ff;
        --button-bg: #6366f1;
        --button-hover-bg: #4f46e5;
        --default-button-bg: #4f46e5;
        --default-button-hover-bg: #4338ca;
        color-scheme: light;
    }
}

/* ── Полотно и карточки ───────────────────────────────────────────────────── */
/* На сайте контент — белые карточки на светлом фоне; в админке по умолчанию
   всё белое встык. */
body {
    background: var(--voltera-ground);
    font-size: 0.875rem;
}

#content {
    padding: 24px 32px 40px;
}

.module,
.inline-group,
#changelist,
#changelist-filter,
.dashboard #content-main .module {
    background: var(--body-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--voltera-radius);
    box-shadow: var(--voltera-shadow);
    overflow: hidden;
}

.module h2,
.module caption,
.inline-group h2 {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--body-quiet-color);
    background: var(--darkened-bg);
    border-bottom: 1px solid var(--border-color);
    padding: 10px 14px;
}

/* ── Шапка ────────────────────────────────────────────────────────────────── */
#header {
    background: var(--header-bg);
    border-bottom: 1px solid var(--border-color);
    color: var(--header-color);
    padding: 10px 32px;
}

#branding h1,
#branding h1 a:link,
#branding h1 a:visited {
    color: var(--header-branding-color);
    font-weight: 700;
}

#user-tools {
    font-size: 0.8125rem;
    color: var(--body-quiet-color);
}

#user-tools a {
    border-bottom: none;
    color: var(--link-fg);
}

#user-tools a:hover {
    color: var(--link-hover-color);
}

div.breadcrumbs {
    background: var(--breadcrumbs-bg);
    border-bottom: 1px solid var(--border-color);
    color: var(--breadcrumbs-fg);
    padding: 10px 32px;
    font-size: 0.8125rem;
}

/* ── Кнопки ───────────────────────────────────────────────────────────────── */
.button,
input[type="submit"],
input[type="button"],
.submit-row input,
a.button {
    border-radius: var(--voltera-radius);
    padding: 8px 16px;
    font-weight: 500;
    border: 1px solid transparent;
    transition: background 0.15s, border-color 0.15s;
}

.button:focus-visible,
input[type="submit"]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--voltera-ring);
}

/* Второстепенные кнопки на сайте — контурные, не залитые. */
.button.cancel-link,
.deletelink-box a,
a.closelink {
    border-radius: var(--voltera-radius);
}

/* Django вытягивает блок действий наверх отрицательным margin, и он ложится
   поверх заголовка — на длинных русских заголовках текст уезжает под кнопку.
   Это поведение самого Django (проверено с отключённой темой), но раз мы всё
   равно переоформляем админку — ставим действия отдельной строкой справа. */
.object-tools {
    float: none;
    margin: 0 0 14px;
    padding-left: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.object-tools li {
    float: none;
    margin: 0;
    list-style: none;
}

.object-tools a {
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    padding: 5px 14px;
}

/* ── Поля ─────────────────────────────────────────────────────────────────── */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="number"],
input[type="tel"],
input[type="date"],
input[type="time"],
textarea,
select,
.vTextField {
    border: 1px solid var(--border-color);
    border-radius: var(--voltera-radius);
    padding: 7px 10px;
    background: var(--body-bg);
    color: var(--body-fg);
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus,
.vTextField:focus {
    outline: none;
    border-color: var(--secondary);
    box-shadow: 0 0 0 3px var(--voltera-ring);
}

.aligned label {
    color: var(--body-medium-color);
    font-weight: 500;
}

.help,
.form-row .help,
div.help {
    color: var(--body-quiet-color);
    font-size: 0.75rem;
}

/* ── Автодополнение (autocomplete_fields) ─────────────────────────────────── */
/* autocomplete.css красит подсвеченный пункт в --primary с текстом --primary-fg.
   У нас --primary светлый (фон шапок модулей), а --primary-fg белый — текст
   сливался с фоном. Подсветка идёт акцентом, как выделение в других местах.
   html в селекторе нужен для веса: autocomplete.css приходит из media формы,
   то есть после темы, и при равной специфичности выиграл бы он. */
html .select2-container--admin-autocomplete
    .select2-results__option--highlighted[aria-selected] {
    background: var(--secondary);
    color: #ffffff;
}

/* ── Таблицы ──────────────────────────────────────────────────────────────── */
#result_list thead th,
.results thead th,
table thead th {
    background: var(--darkened-bg);
    border-bottom: 1px solid var(--border-color);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--body-quiet-color);
}

#result_list thead th a:link,
#result_list thead th a:visited {
    color: var(--body-quiet-color);
}

#result_list tbody tr:hover > * {
    background: var(--darkened-bg);
}

#result_list tbody td,
#result_list tbody th {
    border-bottom: 1px solid var(--hairline-color);
}

.paginator {
    border-top: 1px solid var(--border-color);
    background: var(--body-bg);
    padding: 12px 14px;
    font-size: 0.8125rem;
}

.paginator a:link,
.paginator a:visited {
    background: var(--darkened-bg);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--link-fg);
    padding: 3px 9px;
}

.paginator .this-page {
    background: var(--secondary);
    border-radius: 6px;
    color: var(--primary-fg);
    padding: 3px 9px;
}

/* ── Строка сохранения ────────────────────────────────────────────────────── */
.submit-row {
    background: var(--body-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--voltera-radius);
    box-shadow: var(--voltera-shadow);
    padding: 14px 16px;
    margin-top: 20px;
}

/* ── Сообщения ────────────────────────────────────────────────────────────── */
ul.messagelist li {
    border-radius: var(--voltera-radius);
    border-left: 3px solid var(--secondary);
    padding: 12px 16px;
    font-size: 0.8125rem;
    background-image: none;
    padding-left: 16px;
}

ul.messagelist li.success {
    border-left-color: #16a34a;
}

ul.messagelist li.warning {
    border-left-color: #d97706;
}

ul.messagelist li.error {
    border-left-color: var(--error-fg);
}

.errornote,
.errorlist li {
    border-radius: var(--voltera-radius);
}

/* ── Вход ─────────────────────────────────────────────────────────────────── */
body.login {
    background: var(--voltera-ground);
}

.login #container {
    border: 1px solid var(--border-color);
    border-radius: calc(var(--voltera-radius) * 1.5);
    box-shadow: 0 12px 32px -18px rgba(15, 23, 42, 0.25);
    overflow: hidden;
}

.login #header {
    border-bottom: 1px solid var(--border-color);
}

.login .submit-row {
    border: none;
    box-shadow: none;
    margin-top: 0;
}

/* ── Мелочи ───────────────────────────────────────────────────────────────── */
/* Переключатель темы убран из разметки, но правило страхует от остатков в
   кэшированных страницах. */
.theme-toggle {
    display: none !important;
}

fieldset.module {
    margin-bottom: 20px;
}

.selector-chosen h2 {
    background: var(--secondary);
    color: var(--primary-fg);
}

.calendarbox,
.clockbox {
    border-radius: var(--voltera-radius);
}