/* Бэк-офис «Хоббитон»: стандартная админка Django в стиле сайта (sites/hobbiv2/assets/css/style.css) и форм
   (reg.css). Подключается последним (templates/admin/base_site.html). Сначала переменные Django — в тех же
   селекторах, что у base.css и dark_mode.css, затем точечные правила.
   Шрифты: Forum — заголовки, PT Sans — таблицы и поля (на 14–15 px читается лучше PT Serif), PT Serif — текст писем.
   Золото — только фон кнопок с тёмным текстом и акценты, не цвет мелкого текста (контраст WCAG AA). */

/* ---------- светлая тема: пергамент и лес ---------- */
html[data-theme="light"],
:root {
    --hob-page: #f7f0e0;
    --hob-field: #fffdf8;
    --hob-line: #d9c8a4;
    --hob-title: #243a1e;
    --hob-label: #2f4a26;
    --hob-band: #2f4a26;
    --hob-band-fg: #f6edd6;
    --hob-gold-line: #cf9020;
    --hob-focus: #2f4a26;
    --hob-ring: rgba(224, 163, 46, 0.35);
    --hob-outline: #3c5e30;
    --hob-outline-fg: #243a1e;
    --hob-outline-hover: rgba(60, 94, 48, 0.1);
    --hob-check: #3c5e30;
    --hob-shadow: 0 2px 8px rgba(40, 30, 12, 0.08);
    --hob-shadow-lg: 0 10px 30px rgba(40, 30, 12, 0.16);
    --hob-spot-leaf: rgba(122, 150, 80, 0.18);
    --hob-spot-gold: rgba(224, 163, 46, 0.14);
    --hob-ok: #2f5a22;
    --hob-ok-bg: #e2ebd2;
    --hob-wait: #5c4108;
    --hob-wait-bg: #f6e3b5;
    --hob-bad: #8a3217;
    --hob-bad-bg: #f5dccb;
    --hob-none-bg: #ece3cf;

    --primary: #4f7639;
    --secondary: #2f4a26;
    --accent: #e0a32e;
    --primary-fg: #f6edd6;

    --body-fg: #2b2317;
    --body-bg: #fbf6ea;
    --body-quiet-color: #5f4f38;
    --body-medium-color: #43382a;
    --body-loud-color: #1a140b;

    --header-color: #e9dfc4;
    --header-branding-color: #f6edd6;
    --header-bg: #1c2e1b;
    --header-link-color: #f6edd6;

    --breadcrumbs-fg: #5a4a35;
    --breadcrumbs-link-fg: #9a4620;
    --breadcrumbs-bg: #efe3c9;

    --link-fg: #9a4620;
    --link-hover-color: #6f2f10;
    --link-selected-fg: #2f4a26;

    --hairline-color: #e6d9bd;
    --border-color: #806d4e;

    --error-fg: #a1391a;

    --message-debug-bg: #ece3cf;
    --message-info-bg: #e8e6d3;
    --message-success-bg: #e2ebd2;
    --message-warning-bg: #f6e3b5;
    --message-error-bg: #f5dccb;

    --darkened-bg: #f3ead6;
    --selected-bg: #eadcbf;
    --selected-row: #f6e3b5;

    --button-fg: #f6edd6;
    --button-bg: #3c5e30;
    --button-hover-bg: #2f4a26;
    --default-button-bg: #3c5e30;
    --default-button-hover-bg: #2f4a26;
    --close-button-bg: #5f4f38;
    --close-button-hover-bg: #43382a;
    --delete-button-bg: #a94c20;
    --delete-button-hover-bg: #8a3c19;

    --object-tools-fg: #f6edd6;
    --object-tools-bg: #3c5e30;
    --object-tools-hover-bg: #2f4a26;

    --font-family-primary: "PT Sans", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
    --hob-display: "Forum", "PT Serif", Georgia, serif;
    --hob-serif: "PT Serif", Georgia, "Times New Roman", serif;
}

/* ---------- тёмная тема: глубокий лес, кремовый текст и золото (как тёмная тема памятки) ----------
   Два одинаковых блока, как у Django: «как в системе» при тёмной системе и явный выбор «тёмная». */
@media (prefers-color-scheme: dark) {
    :root {
        --hob-page: #121b13;
        --hob-field: #111a12;
        --hob-line: #34452f;
        --hob-title: #d6e6c0;
        --hob-label: #b9d39a;
        --hob-band: #2a3f24;
        --hob-band-fg: #f3e8cc;
        --hob-focus: #f3d287;
        --hob-ring: rgba(232, 178, 74, 0.35);
        --hob-outline: #8fb86a;
        --hob-outline-fg: #d6e6c0;
        --hob-outline-hover: rgba(143, 184, 106, 0.14);
        --hob-check: #8fb86a;
        --hob-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
        --hob-shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.45);
        --hob-spot-leaf: rgba(122, 150, 80, 0.1);
        --hob-spot-gold: rgba(224, 163, 46, 0.06);
        --hob-ok: #c9e3a8;
        --hob-ok-bg: #26402a;
        --hob-wait: #f3d287;
        --hob-wait-bg: #3d3316;
        --hob-bad: #f5b597;
        --hob-bad-bg: #452418;
        --hob-none-bg: #26332a;

        --primary: #4f7639;
        --secondary: #3c5e30;
        --accent: #e8b24a;
        --primary-fg: #f6edd6;

        --body-fg: #efe6d0;
        --body-bg: #1a251b;
        --body-quiet-color: #cdbf9f;
        --body-medium-color: #e2d6b9;
        --body-loud-color: #fffaf0;

        --header-color: #e2d6b9;
        --header-branding-color: #f6edd6;
        --header-bg: #0c140d;
        --header-link-color: #efe6d0;

        --breadcrumbs-fg: #cdbf9f;
        --breadcrumbs-link-fg: #e8956a;
        --breadcrumbs-bg: #172118;

        --link-fg: #e8956a;
        --link-hover-color: #f4b48f;
        --link-selected-fg: #b9d39a;

        --hairline-color: #2b3a2c;
        --border-color: #7d9275;

        --error-fg: #f19276;

        --message-debug-bg: #26332a;
        --message-info-bg: #1f2c2a;
        --message-success-bg: #203a22;
        --message-warning-bg: #3a3014;
        --message-error-bg: #3d2016;

        --darkened-bg: #202d21;
        --selected-bg: #283828;
        --selected-row: #3b3418;

        --button-fg: #f6edd6;
        --button-bg: #3c5e30;
        --button-hover-bg: #4f7639;
        --default-button-bg: #3c5e30;
        --default-button-hover-bg: #4f7639;
        --close-button-bg: #3b4a3a;
        --close-button-hover-bg: #4d5f4b;
        --delete-button-bg: #a94c20;
        --delete-button-hover-bg: #8a3c19;

        --object-tools-fg: #f6edd6;
        --object-tools-bg: #3c5e30;
        --object-tools-hover-bg: #4f7639;
    }
}

html[data-theme="dark"] {
    --hob-page: #121b13;
    --hob-field: #111a12;
    --hob-line: #34452f;
    --hob-title: #d6e6c0;
    --hob-label: #b9d39a;
    --hob-band: #2a3f24;
    --hob-band-fg: #f3e8cc;
    --hob-focus: #f3d287;
    --hob-ring: rgba(232, 178, 74, 0.35);
    --hob-outline: #8fb86a;
    --hob-outline-fg: #d6e6c0;
    --hob-outline-hover: rgba(143, 184, 106, 0.14);
    --hob-check: #8fb86a;
    --hob-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    --hob-shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.45);
    --hob-spot-leaf: rgba(122, 150, 80, 0.1);
    --hob-spot-gold: rgba(224, 163, 46, 0.06);
    --hob-ok: #c9e3a8;
    --hob-ok-bg: #26402a;
    --hob-wait: #f3d287;
    --hob-wait-bg: #3d3316;
    --hob-bad: #f5b597;
    --hob-bad-bg: #452418;
    --hob-none-bg: #26332a;

    --primary: #4f7639;
    --secondary: #3c5e30;
    --accent: #e8b24a;
    --primary-fg: #f6edd6;

    --body-fg: #efe6d0;
    --body-bg: #1a251b;
    --body-quiet-color: #cdbf9f;
    --body-medium-color: #e2d6b9;
    --body-loud-color: #fffaf0;

    --header-color: #e2d6b9;
    --header-branding-color: #f6edd6;
    --header-bg: #0c140d;
    --header-link-color: #efe6d0;

    --breadcrumbs-fg: #cdbf9f;
    --breadcrumbs-link-fg: #e8956a;
    --breadcrumbs-bg: #172118;

    --link-fg: #e8956a;
    --link-hover-color: #f4b48f;
    --link-selected-fg: #b9d39a;

    --hairline-color: #2b3a2c;
    --border-color: #7d9275;

    --error-fg: #f19276;

    --message-debug-bg: #26332a;
    --message-info-bg: #1f2c2a;
    --message-success-bg: #203a22;
    --message-warning-bg: #3a3014;
    --message-error-bg: #3d2016;

    --darkened-bg: #202d21;
    --selected-bg: #283828;
    --selected-row: #3b3418;

    --button-fg: #f6edd6;
    --button-bg: #3c5e30;
    --button-hover-bg: #4f7639;
    --default-button-bg: #3c5e30;
    --default-button-hover-bg: #4f7639;
    --close-button-bg: #3b4a3a;
    --close-button-hover-bg: #4d5f4b;
    --delete-button-bg: #a94c20;
    --delete-button-hover-bg: #8a3c19;

    --object-tools-fg: #f6edd6;
    --object-tools-bg: #3c5e30;
    --object-tools-hover-bg: #4f7639;
}

/* ---------- основа ---------- */
body {
    font-size: 0.9375rem;
    line-height: 1.45;
    background-color: var(--hob-page);
    background-image:
        radial-gradient(circle at 12% -8%, var(--hob-spot-leaf), transparent 42%),
        radial-gradient(circle at 92% 4%, var(--hob-spot-gold), transparent 38%);
    background-repeat: no-repeat;
    -webkit-font-smoothing: antialiased;
}

a:link,
a:visited {
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

::selection {
    background: var(--hob-ring);
}

:focus-visible {
    outline: 2px solid var(--hob-focus);
    outline-offset: 2px;
}

input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--hob-check);
}

li,
dt,
dd {
    font-size: 0.875rem;
    line-height: 1.4;
}

p {
    line-height: 1.5;
}

/* ---------- шапка как у сайта: лес, золотая линия, логотип ---------- */
#header {
    background: var(--header-bg);
    border-bottom: 2px solid var(--hob-gold-line);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    padding: 8px 40px;
    gap: 12px 24px;
    position: relative;
    z-index: 30;
}

#site-name {
    font: 400 1.5rem/1.1 var(--hob-display);
    letter-spacing: 0.5px;
    margin: 0;
    margin-inline-end: 12px;
}

#site-name a:link,
#site-name a:visited {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--header-branding-color);
    text-decoration: none;
}

#site-name img {
    width: auto;
    height: 46px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}

#branding {
    align-items: center;
    gap: 8px;
}

#user-tools,
#logout-form button {
    font-size: 0.875rem;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

#user-tools {
    color: var(--header-color);
    line-height: 1.6;
}

#user-tools strong {
    color: var(--header-link-color);
    font-weight: 700;
}

#user-tools a,
#logout-form button {
    border-bottom: 1px solid rgba(246, 237, 214, 0.4);
}

#header :focus-visible {
    outline-color: #f3d287;
}

.skip-to-content-link:focus {
    z-index: 31;
}

.theme-toggle svg {
    height: 1.4rem;
    width: 1.4rem;
}

/* ---------- хлебные крошки: светлая полоса под шапкой ---------- */
ol.breadcrumbs {
    padding: 10px 40px;
    border-bottom: 1px solid var(--hob-line);
}

ol.breadcrumbs li {
    font-size: 0.875rem;
}

ol.breadcrumbs li:not([aria-current="page"])::after {
    color: var(--body-quiet-color);
}

/* ---------- заголовки страниц ---------- */
.titles h1,
.login #content h1 {
    font: 400 2rem/1.15 var(--hob-display);
    color: var(--hob-title);
    margin: 0 0 16px;
}

.titles h2 {
    font: 400 1.35rem/1.2 var(--hob-display);
    color: var(--body-quiet-color);
    margin: -8px 0 16px;
}

#content {
    padding: 24px 40px;
}

/* ---------- карточки вместо «модулей»: пергамент, рамка, скругление, как разделы формы ---------- */
.module {
    background: var(--body-bg);
    border: 1px solid var(--hob-line);
    border-radius: 14px;
    box-shadow: var(--hob-shadow);
    overflow: hidden;
    margin-bottom: 20px;
}

/* вложенные модули и служебные обёртки — без второй рамки */
.module .module,
#changelist.module,
#nav-sidebar .module {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
    margin-bottom: 0;
}

#changelist.module {
    background: transparent;
}

/* полосы заголовков блоков: лес и Forum вместо синей плашки капсом */
.module h2,
.module caption,
.inline-group h2,
fieldset .fieldset-heading,
fieldset .inline-heading,
:not(.inline-related) .collapse summary {
    background: var(--hob-band);
    color: var(--hob-band-fg);
    border: 0;
    font: 400 1.2rem/1.25 var(--hob-display);
    letter-spacing: 0.3px;
    text-transform: none;
    padding: 10px 16px;
}

.module caption a.section:link,
.module caption a.section:visited {
    color: var(--hob-band-fg);
}

.collapse summary .fieldset-heading,
.collapse summary .inline-heading {
    padding: 0;
    font: inherit;
}

:not(.inline-related) .collapse summary::marker {
    color: #f3d287;
}

.module caption a:focus-visible {
    outline-color: var(--hob-band-fg);
}

.module details > summary:focus-visible {
    outline: 2px solid var(--hob-band-fg);
    outline-offset: -4px;
}

/* ---------- таблицы ---------- */
td,
th {
    font-size: 0.875rem;
    line-height: 1.35;
    padding: 9px 12px;
}

thead th,
tfoot td {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--body-quiet-color);
}

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

table thead th .text a,
table thead th .text span {
    padding: 9px 12px;
}

/* ---------- формы ---------- */
input:not([type]),
input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="number"],
input[type="tel"],
input[type="search"],
textarea,
select,
.vTextField {
    font-family: var(--font-family-primary);
    font-size: 0.9375rem;
    color: var(--body-fg);
    background-color: var(--hob-field);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 7px 10px;
}

select {
    height: auto;
    min-height: 2.35rem;
}

select[multiple] {
    min-height: 150px;
}

textarea {
    line-height: 1.45;
}

input[type="password"] {
    width: 20em;
    max-width: 100%;
}

textarea.vLargeTextField {
    field-sizing: content;
    min-height: 4.5em;
    max-height: 30em;
}

input:not([type]):focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus,
.vTextField:focus {
    outline: none;
    border-color: var(--hob-focus);
    box-shadow: 0 0 0 1px var(--hob-focus), 0 0 0 4px var(--hob-ring);
}

label,
legend {
    font-size: 0.875rem;
    color: var(--hob-label);
}

.required label,
label.required {
    font-weight: 700;
}

.help,
p.help,
form p.help,
div.help,
form div.help,
div.help li,
.timezonewarning {
    font-size: 0.8125rem;
    color: var(--body-quiet-color);
}

.form-row {
    padding: 9px 16px;
    font-size: 0.875rem;
}

.aligned label + div.readonly,
div.readonly {
    font-size: 0.9375rem;
    color: var(--body-fg);
}

/* поля карточки: подпись слева, поле справа — вдвое короче страница, чем подписи над полями.
   С 1025 px: на планшете с открытой боковой панелью полю справа не хватает места */
@media (min-width: 1025px) {
    .aligned .form-row > .flex-container:not(.fieldBox) {
        display: grid;
        grid-template-columns: 220px minmax(0, 1fr);
        column-gap: 20px;
        row-gap: 4px;
        align-items: start;
    }

    .aligned .form-row > .flex-container:not(.fieldBox) > * {
        grid-column: 2;
        justify-self: start;
        max-width: 100%;
    }

    .aligned .form-row > .flex-container:not(.fieldBox) > label {
        grid-column: 1;
        grid-row: 1;
        padding-top: 7px;
        justify-self: stretch;
    }

    .aligned .form-row > .flex-container:not(.fieldBox) > div.readonly {
        padding: 7px 0;
    }

    .aligned .form-row > .flex-container.checkbox-row > .checkbox {
        grid-column: 2;
    }

    /* файл (счёт) Django выводит как fieldset с legend — ставим так же слева */
    .aligned .form-row > fieldset > legend {
        width: 220px;
        margin-right: 20px;
        padding: 7px 0 0;
    }

    .aligned .form-row > fieldset > .flex-container {
        width: auto;
        padding-top: 4px;
    }
}

.aligned .vCheckboxLabel {
    color: var(--body-fg);
    font-weight: 400;
}

/* имя файла счёта — длинный код без пробелов */
.aligned .file-upload {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.aligned input[type="file"] {
    max-width: 100%;
}

.errornote {
    font-size: 0.9375rem;
    color: var(--error-fg);
    background: var(--message-error-bg);
    border: 0;
    border-left: 4px solid var(--error-fg);
    border-radius: 0 12px 12px 0;
    padding: 12px 16px;
}

ul.errorlist {
    background: transparent;
    font-weight: 700;
}

ul.errorlist li {
    font-size: 0.875rem;
}

.errors input,
.errors select,
.errors textarea {
    border-color: var(--error-fg);
}

/* ---------- кнопки как у сайта: «пилюли» ---------- */
.button,
input[type="submit"],
input[type="button"],
.submit-row input,
a.button {
    font: 700 0.9375rem/1.15 var(--font-family-primary);
    border-radius: 999px;
    padding: 10px 22px;
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.12);
    transition: transform 0.15s ease, background 0.2s;
}

.button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
a.button:hover {
    transform: translateY(-1px);
}

.button:active,
input[type="submit"]:active,
input[type="button"]:active {
    transform: translateY(1px);
    box-shadow: none;
}

/* главная кнопка экрана — золотая, тёмный текст (5.5:1) */
.submit-row input.default,
.submit-row input[type="submit"]:only-of-type,
.changelist-footer input.default,
.login .submit-row input {
    background: linear-gradient(180deg, #eab548, #dd9a23);
    color: #402d09;
    font-weight: 700;
    text-transform: none;
}

.submit-row input.default:hover,
.submit-row input.default:focus,
.changelist-footer input.default:hover,
.changelist-footer input.default:focus,
.submit-row input[type="submit"]:only-of-type:hover,
.submit-row input[type="submit"]:only-of-type:focus,
.login .submit-row input:hover,
.login .submit-row input:focus {
    background: linear-gradient(180deg, #f1c25f, #e3a32c);
    color: #402d09;
}

/* остальные в строке сохранения — контурные */
.submit-row input:not(.default):not(:only-of-type),
.submit-row a.closelink,
.delete-confirmation form .cancel-link {
    background: transparent;
    color: var(--hob-outline-fg);
    border: 1.5px solid var(--hob-outline);
    box-shadow: none;
}

.submit-row input:not(.default):not(:only-of-type):hover,
.submit-row input:not(.default):not(:only-of-type):focus,
.submit-row a.closelink:hover,
.submit-row a.closelink:focus,
.delete-confirmation form .cancel-link:hover,
.delete-confirmation form .cancel-link:focus {
    background: var(--hob-outline-hover);
    color: var(--hob-outline-fg);
}

.submit-row input {
    height: auto;
    line-height: 1.15;
}

.submit-row a.deletelink,
.submit-row a.closelink,
.delete-confirmation form .cancel-link,
.delete-confirmation form input[type="submit"] {
    height: auto;
    line-height: 1.15;
    padding: 10px 22px;
    border-radius: 999px;
    font-weight: 700;
    text-decoration: none;
}

.submit-row a.deletelink,
.delete-confirmation form input[type="submit"] {
    color: #fff4e8;
}

.submit-row {
    background: var(--body-bg);
    border: 1px solid var(--hob-line);
    border-radius: 14px;
    box-shadow: var(--hob-shadow);
    padding: 14px 16px;
    align-items: center;
}

.object-tools a:link,
.object-tools a:visited {
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: none;
    padding: 6px 16px;
}

.object-tools a {
    border-radius: 999px;
}

.object-tools a.addlink,
.object-tools a.viewsitelink {
    padding-right: 30px;
}

/* ---------- главная: «Ждут вас» и разделы ---------- */
.dashboard #content {
    width: 640px;
}

.todo {
    margin: 0 0 24px;
}

.todo h2 {
    font: 400 1.5rem/1.2 var(--hob-display);
    color: var(--hob-title);
    margin: 0 0 12px;
}

.todo ul {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
}

.todo li {
    list-style: none;
    padding: 0;
    font-size: inherit;
    line-height: inherit;
}

.todo a:link,
.todo a:visited {
    display: flex;
    flex-direction: column;
    gap: 6px;
    box-sizing: border-box;
    height: 100%;
    padding: 14px 16px 16px;
    background: var(--body-bg);
    border: 1px solid var(--hob-line);
    border-top: 4px solid var(--hob-line);
    border-radius: 14px;
    box-shadow: var(--hob-shadow);
    color: var(--body-fg);
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.2s;
}

.todo a.has {
    border-top-color: var(--accent);
}

.todo a:hover {
    transform: translateY(-2px);
    box-shadow: var(--hob-shadow-lg);
}

.todo b {
    font: 400 2.5rem/1 var(--hob-display);
    color: var(--hob-title);
}

.todo span {
    font-weight: 700;
    color: var(--link-fg);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.todo a:hover span {
    color: var(--link-hover-color);
}

.app-list .module th a,
#nav-sidebar .module th a {
    font-weight: 700;
}

#content-related {
    background: transparent;
}

#content-related .module {
    background: var(--body-bg);
}

#content-related .module h2 {
    font: 400 1.25rem/1.2 var(--hob-display);
    color: var(--hob-title);
    border-bottom-color: var(--hob-line);
}

/* ---------- список заявок ---------- */
#toolbar {
    background: var(--body-bg);
    border: 1px solid var(--hob-line);
    border-radius: 14px;
    padding: 10px 14px;
    margin-bottom: 12px;
}

#toolbar #searchbar {
    height: auto;
    width: 22em;
    padding: 7px 10px;
    font-size: 0.9375rem;
    border-radius: 8px;
}

#toolbar form input[type="submit"],
.actions .button {
    height: auto;
    font-size: 0.875rem;
    padding: 7px 16px;
    background: transparent;
    color: var(--hob-outline-fg);
    border: 1.5px solid var(--hob-outline);
    box-shadow: none;
}

#toolbar form input[type="submit"]:hover,
#toolbar form input[type="submit"]:focus,
.actions .button:hover,
.actions .button:focus {
    background: var(--hob-outline-hover);
    border-color: var(--hob-outline);
}

.actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    padding: 4px 2px 12px;
    background: transparent;
    font-size: 0.875rem;
}

.actions label {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
    max-width: 100%;
}

.actions select {
    margin: 0;
    min-width: 0;
    max-width: 100%;
    flex: 1 1 auto;
}

.actions .button {
    margin: 0;
}

.actions label,
.actions span.all,
.actions span.action-counter,
.actions span.clear,
.actions span.question {
    font-size: 0.875rem;
    color: var(--body-quiet-color);
}

.actions select {
    height: auto;
    min-height: 2.2rem;
    padding: 5px 8px;
    font-size: 0.875rem;
    background-color: var(--hob-field);
    border-radius: 8px;
}

#changelist-form .results {
    background: var(--body-bg);
    border: 1px solid var(--hob-line);
    border-radius: 14px;
    box-shadow: var(--hob-shadow);
}

#changelist table thead th {
    background: var(--darkened-bg);
}

#changelist table thead th.sorted {
    background: var(--selected-bg);
}

#result_list tbody tr:hover {
    background: var(--selected-bg);
}

#result_list td,
#result_list th {
    padding: 8px 10px;
    vertical-align: middle;
}

#result_list tbody th a {
    font-weight: 700;
}

#result_list td.field-full_name {
    min-width: 9em;
}

#changelist .changelist-footer {
    border: 0;
    padding: 10px 4px;
}

#changelist .changelist-footer .paginator,
#changelist .paginator {
    background: transparent;
    font-size: 0.875rem;
}

.paginator a:link,
.paginator a:visited {
    border-radius: 999px;
    padding: 2px 10px;
}

.paginator a:not([aria-current="page"], .showall):is(:hover, :focus) {
    color: var(--button-fg);
    background: var(--button-hover-bg);
}

#changelist-filter {
    background: var(--body-bg);
    border: 1px solid var(--hob-line);
    border-radius: 14px;
    box-shadow: var(--hob-shadow);
    overflow: hidden;
    align-self: flex-start;
}

#changelist-filter h2 {
    font: 400 1.2rem/1.25 var(--hob-display);
    letter-spacing: 0.3px;
    text-transform: none;
    padding: 10px 16px;
    margin-bottom: 8px;
}

#changelist-filter h3,
#changelist-filter details summary {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--hob-label);
    padding: 0 16px;
}

#changelist-filter details > summary::before {
    color: var(--hob-outline);
}

#changelist-filter ul {
    padding: 0 16px 12px;
}

#changelist-filter li {
    font-size: 0.875rem;
    padding: 2px 0;
}

#changelist-filter a:link,
#changelist-filter a:visited {
    color: var(--body-quiet-color);
}

#changelist-filter li.selected {
    border-left: 4px solid var(--accent);
    padding-left: 12px;
    margin-left: -16px;
}

#changelist-filter li.selected a:link,
#changelist-filter li.selected a:visited {
    color: var(--link-selected-fg);
    font-weight: 700;
}

#changelist-filter a:focus,
#changelist-filter a:hover {
    color: var(--link-hover-color);
}

/* статусы в списках: цветные «пилюли» (reg/admin.py, status_pill) */
.pill {
    display: inline-block;
    padding: 1px 9px;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.5;
    white-space: nowrap;
    color: var(--body-medium-color);
    background: var(--hob-none-bg);
}

.pill.ok {
    color: var(--hob-ok);
    background: var(--hob-ok-bg);
}

.pill.wait {
    color: var(--hob-wait);
    background: var(--hob-wait-bg);
}

.pill.bad {
    color: var(--hob-bad);
    background: var(--hob-bad-bg);
}

/* ---------- вложенные блоки карточки: «Приватное», дети, фото ---------- */
.inline-group {
    margin-bottom: 20px;
}

.inline-related h3 {
    font-size: 0.875rem;
    color: var(--body-quiet-color);
    background: var(--darkened-bg);
    border-color: var(--hairline-color);
    padding: 8px 16px;
    margin: 0;
    column-gap: 0.3em;
}

.inline-related h3 b {
    color: var(--hob-label);
}

.inline-group .tabular td {
    font-size: 0.9375rem;
}

/* поля в строках детей — по ширине колонки, чтобы таблица не уезжала вбок */
.inline-group .tabular td input.vTextField,
.inline-group .tabular td textarea {
    width: 100%;
    min-width: 9em;
}

.inline-group .tabular td textarea {
    min-width: 14em;
}

.inline-group .tabular td.original p {
    font-size: 0.8125rem;
    color: var(--body-quiet-color);
}

.inline-group div.add-row,
.inline-group .tabular tr.add-row td {
    background: var(--body-bg);
    padding: 12px 16px;
}

.inline-group div.add-row a,
.inline-group .tabular tr.add-row td a {
    display: inline-block;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--hob-outline-fg);
    text-decoration: none;
    border: 1.5px solid var(--hob-outline);
    border-radius: 999px;
    padding: 6px 16px 6px 34px;
    background-position: 14px 50%;
}

.inline-group div.add-row a:hover,
.inline-group .tabular tr.add-row td a:hover {
    background-color: var(--hob-outline-hover);
}

.inline-deletelink {
    filter: saturate(0.7);
}

.field-preview img,
.field-photos img {
    border-radius: 10px;
    border: 1px solid var(--hob-line);
    box-shadow: var(--hob-shadow);
    margin: 2px 6px 6px 0;
}

/* текст письма в очереди — как письмо, PT Serif */
.field-text div.readonly {
    font-family: var(--hob-serif);
    font-size: 1rem;
    line-height: 1.6;
    white-space: pre-line;
    max-width: 70ch;
}

/* ---------- сообщения ---------- */
ul.messagelist li {
    font-size: 0.9375rem;
    border-left: 4px solid var(--hob-outline);
    border-radius: 0 12px 12px 0;
    padding: 12px 16px 12px 46px;
    background-position: 16px 50%;
    color: var(--body-fg);
}

ul.messagelist li.success {
    border-left-color: #4f7639;
}

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

ul.messagelist li.error {
    border-left-color: #bf5f2b;
}

/* ---------- удаление, история ---------- */
.delete-confirmation h2 {
    font: 400 1.35rem/1.2 var(--hob-display);
    color: var(--hob-title);
}

.delete-confirmation ul li {
    list-style-type: disc;
}

/* ---------- календарь в поле даты ---------- */
.calendarbox,
.clockbox {
    border: 1px solid var(--hob-line);
    border-radius: 12px;
    box-shadow: var(--hob-shadow-lg);
}

.calendar table {
    background: var(--body-bg);
}

.calendar caption,
.calendarbox h2 {
    background: var(--hob-band);
    color: var(--hob-band-fg);
    font: 400 1rem/1.4 var(--hob-display);
}

.calendar td.today a {
    color: var(--link-fg);
}

.calendar td a:focus,
.calendar td a:hover,
.timelist a:focus,
.timelist a:hover {
    background: var(--primary);
    color: #fffaf0;
}

.calendar td.selected a {
    background: var(--secondary);
    color: #f6edd6;
}

/* 6. стрелки месяцев из calendar-icons.svg чёрные — на зелёной полосе белые */
.calendarbox .calendarnav-previous,
.calendarbox .calendarnav-next {
    filter: brightness(0) invert(1);
}

.calendar-cancel,
.calendar-cancel a {
    color: #f6edd6;
}

.selector-chosen .list-footer-display,
.selector-chosen .list-footer-display__clear {
    color: var(--primary-fg);
}

/* ---------- боковая панель ---------- */
.toggle-nav-sidebar {
    color: var(--link-fg);
}

#nav-sidebar .current-model {
    background: var(--selected-row);
}

#nav-filter {
    border-radius: 8px;
    padding: 6px 10px;
    margin: 8px 0;
}

/* ---------- вход и установка пароля ---------- */
body.login {
    background-color: var(--hob-page);
}

.login #container {
    background: var(--body-bg);
    border: 1px solid var(--hob-line);
    border-radius: 18px;
    box-shadow: var(--hob-shadow-lg);
    width: 30em;
}

.login #header {
    padding: 16px 20px;
    gap: 8px;
}

.login #content {
    padding: 24px 28px 28px;
}

.login .form-row label {
    font-weight: 700;
    color: var(--hob-label);
}

.login .form-row #id_username,
.login .form-row #id_password {
    padding: 10px 12px;
    font-size: 1rem;
}

.login .submit-row {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 1.25em 0 0;
}

.login .submit-row input {
    width: 100%;
    padding: 12px 22px;
    font-size: 1rem;
}

/* ---------- планшет и телефон: отступы как у контента Django ---------- */
@media (max-width: 1024px) {
    #header {
        padding: 12px 20px;
        align-items: flex-start;
    }

    ol.breadcrumbs {
        padding: 10px 20px;
    }

    #content {
        padding: 18px 20px 24px;
    }

    #site-name {
        margin: 0;
    }

    #toolbar #searchbar {
        width: 0;
    }

    .dashboard #content {
        width: auto;
        max-width: 640px;
    }
}

@media (max-width: 767px) {
    #header {
        padding: 10px 15px;
    }

    #site-name {
        font-size: 1.3rem;
    }

    #site-name img {
        height: 38px;
    }

    ol.breadcrumbs {
        padding: 10px 15px;
    }

    #content {
        padding: 15px;
    }

    .titles h1 {
        font-size: 1.65rem;
    }

    .login #container {
        width: auto;
    }

    .login #content {
        padding: 18px 16px 20px;
    }

    /* Django считает ширину поля от окна (100vw − 30px), без отступов карточки */
    .aligned .form-row,
    .aligned .form-row > div {
        width: auto;
        max-width: 100%;
    }

    .submit-row {
        align-items: stretch;
    }

    #change-history {
        overflow-x: auto;
    }

    #change-history table tbody th {
        width: auto;
    }
}