:root {
    --brand:      #0172CC;
    --brand-dark: #00589F;
    --ink:        #2A3340;
    --text:       #2A3340;
    --muted:      #5B6B81;
    --tint:       #F1F4FD;
    --bg-soft:    #F7F9FF;
    --border:     #D6DAE9;

    --error-bg: #fdecea;
    --error-text: #8a1f11;
}

* {
    box-sizing: border-box;
}

[x-cloak] {
    display: none !important;
}

body {
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    color: var(--text);
    line-height: 1.45;
}

h1, h2, h3, h4, h5, h6 {
    margin: 1.5em 0 0.5em;
    color: var(--ink);
    font-weight: 600;
    line-height: 1.25;
}

h1:first-child, h2:first-child, h3:first-child,
h4:first-child, h5:first-child, h6:first-child {
    margin-top: 0;
}

a {
    color: var(--brand);
    text-decoration: none;
}

a:visited {
    color: var(--brand);
}

a:hover {
    color: var(--brand-dark);
    text-decoration: underline;
}

:focus {
    outline: 2px solid var(--brand);
    outline-offset: 1px;
}

.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border);
}

.site-header .brand {
    font-weight: 600;
    text-decoration: none;
    color: inherit;
}

.content {
    max-width: 28rem;
    margin: 2rem auto;
    padding: 0 1rem;
    flex: 1 0 auto;
    width: 100%;
}

.flash {
    padding: 0.75rem 1rem;
    border-radius: 4px;
    margin-bottom: 1rem;
}

.flash-error {
    background: var(--error-bg);
    color: var(--error-text);
}

.form label {
    display: block;
    margin-bottom: 0.75rem;
}

.form input {
    display: block;
    width: 100%;
    margin-top: 0.25rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    font: inherit;
}

/* Чекбокс у .form (наразі один — "Публічний доступ до даташитів",
   admin/settings.html): попереднє правило .form input розтягувало його на
   всю ширину рядка (display:block; width:100%), відриваючи позначку від
   підпису — той самий рядок, що й у звичайних текстових полів, для
   чекбокса не годиться. */
.form input[type="checkbox"] {
    display: inline-block;
    width: auto;
    margin: 0 0.4rem 0 0;
    vertical-align: middle;
}

.form button,
.form-inline button {
    padding: 0.5rem 1.25rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--brand);
    color: #fff;
    font: inherit;
    cursor: pointer;
}

.form button:hover,
.form-inline button:hover {
    background: var(--brand-dark);
}

dl dt {
    color: var(--muted);
    font-size: 0.875rem;
    margin-top: 0.75rem;
}

dl dd {
    margin: 0;
}

/* --- шапка/підвал каталогу (SPEC_stage4.md §6) --- */

.site-header {
    flex-wrap: wrap;
    gap: 1rem;
}

.brand-block {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.brand-logo {
    display: block;
    height: 40px;
    width: auto;
}

.brand-tagline {
    font-size: 0.75rem;
    color: var(--muted);
}

.site-search {
    display: flex;
    gap: 0.5rem;
    flex: 1;
    max-width: 28rem;
}

.site-search input {
    flex: 1;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    font: inherit;
}

.site-search button {
    padding: 0.5rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: #fff;
    font: inherit;
    cursor: pointer;
}

.site-account a {
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 0.9rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--ink);
    font-weight: 500;
    text-decoration: none;
}

.site-account a:hover {
    border-color: var(--brand);
    color: var(--brand);
    text-decoration: none;
}

.site-footer {
    display: flex;
    flex-shrink: 0;
    gap: 1.5rem;
    flex-wrap: wrap;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-size: 0.75rem;
}

.site-footer a {
    color: inherit;
}

/* --- каталог (SPEC_stage4.md §6, §7) --- */

.content.catalog-page,
.content.item-page {
    max-width: none;
    margin: 1.5rem auto;
    padding: 0 1.5rem;
}

.catalog-layout {
    display: grid;
    grid-template-columns: 18rem 1fr;
    gap: 1.5rem;
    align-items: start;
}

.catalog-filters,
.catalog-table {
    font-size: 13px;
}

.catalog-filters details.filter-section {
    margin: 0;
}

.catalog-filters details.filter-section > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    cursor: pointer;
    list-style: none;
    color: var(--ink);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.02em;
    margin: 1.25rem 0 0.4rem;
}

.catalog-filters details.filter-section > summary::-webkit-details-marker {
    display: none;
}

.catalog-filters details.filter-section > summary::after {
    content: "";
    flex: none;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid var(--muted);
    transition: transform 0.15s ease;
}

.catalog-filters details.filter-section[open] > summary::after {
    transform: rotate(180deg);
}

.catalog-filters label,
.checkbox-line {
    display: block;
    font-size: 0.9rem;
    margin: 0.15rem 0;
}

/* Мітки з лічильником (дерево, base_material, наявність, тільки з ціною) —
   лічильник притиснутий до правого краю панелі й не переноситься разом з
   підписом: підпис і поле чекбоксу — анонімні flex-елементи, лічильник —
   іменований, margin-left: auto забирає весь вільний простір першого рядка.
   Клас .count-label проставлений у розмітці (не :has()) — без :has() правило
   деградує гірше вихідного дефекту: воно не спрацьовує частково, а випадає
   цілком, і лічильник провалюється на окремий рядок замість того, щоб лишитись
   інлайн (перевірено 23.08.2026, DECISIONS.md). */
.catalog-filters .count-label {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
}

.catalog-filters .count-label input[type="checkbox"] {
    flex: none;
    margin-top: 0.2em;
}

.filter-subhead {
    margin: 0.6rem 0 0.2rem;
    color: var(--muted);
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.filter-subhead:first-child {
    margin-top: 0;
}

.catalog-filters ul.tree,
.catalog-filters ul.tree ul {
    list-style: none;
    margin: 0;
    padding-left: 0;
}

.catalog-filters ul.tree ul {
    padding-left: 1.1rem;
}

.catalog-filters .count {
    flex: none;
    margin-left: auto;
    padding-left: 0.5rem;
    white-space: nowrap;
    color: var(--muted);
    font-size: 0.8rem;
}

.catalog-filters .dim-field {
    display: block;
    color: var(--muted);
    font-size: 12px;
    margin: 0.5rem 0 0.15rem;
}

.catalog-filters input[type="number"] {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    font: inherit;
}

/* "Очистити фільтри" — прямий нащадок aside, а не .filter-subhead (той теж
   <p>, але живе всередині details.filter-section) — вихід зі стану фільтрів,
   не кнопка над даними; колір --brand успадкований від глобального `a`. */
.catalog-filters > p {
    margin: 1.25rem 0 0;
}

/* Глобальний `:focus` (на всю ширину рядка для чекбоксів і <summary>) читається
   як розділювач, а не як фокус — клік мишею залишає його висіти. Клавіатурний
   фокус лишається видимим через :focus-visible; глобальне правило поза лівою
   панеллю не чіпається. */
.catalog-filters input[type="checkbox"]:focus,
.catalog-filters details.filter-section > summary:focus {
    outline: none;
}

.catalog-filters input[type="checkbox"]:focus-visible,
.catalog-filters details.filter-section > summary:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 1px;
}

.catalog-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1rem;
    padding: 0.6rem 1rem;
    background: var(--brand);
    border-radius: 4px;
    font-size: 0.9rem;
}

.catalog-toolbar label {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    color: #fff;
}

.catalog-toolbar select {
    display: block;
    margin-top: 0.2rem;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: #fff;
    color: var(--text);
    font: inherit;
}

.catalog-total {
    margin: 0.25rem 0 1rem;
    color: var(--muted);
    font-size: 0.9rem;
}

.catalog-table {
    width: 100%;
    border-collapse: collapse;
}

.catalog-table th,
.catalog-table td {
    padding: 6px 10px;
    text-align: left;
}

.catalog-table thead th,
.catalog-table tfoot th {
    background: var(--brand);
    color: #fff;
    font-weight: 600;
    font-size: 12px;
    border-bottom: 1px solid var(--border);
}

/* --- Чекпойнт 5 (SPEC_stage7.md §6.1): позиція — окремий <tbody
   class="item-pair"> з двома <tr> (item-head: мініатюра rowspan=2 +
   артикул · назва; item-cols: матеріал/колір/товщина/вага/наявність/ціни).
   Угруповання по <tbody>, а не по class-модифікатору на кожному <tr>,
   навмисне: :hover природно спливає з будь-якої комірки-нащадка на
   батьківський <tbody> (стандартна поведінка псевдокласу, не хак), тож
   ховер підсвічує пару цілком без JS і без :has() — останній прибраний з
   цього файлу на чекпойнті 4 (DECISIONS.md 23.08.2026) через деградацію
   в браузерах без підтримки. Зебра тим самим прийомом — :nth-of-type(even)
   на <tbody>, не на <tr>: подвоєння кількості <tr> на позицію більше не
   збиває фарбування смугами через одну позицію. */
.catalog-table tbody.item-pair:nth-of-type(even) tr {
    background: var(--tint);
}

.catalog-table tbody.item-pair:hover tr {
    background: var(--border);
}

/* Межа відділяє пару від пари, всередині пари її нема: border-bottom лише
   на нижньому рядку (item-cols) і на комірці мініатюри (rowspan=2 — її
   нижній край фізично збігається з нижнім краєм item-cols).

   Чекпойнт 6 (SPEC_stage7.md §7): item-detail (третя <tr>, розкривний блок)
   отримує той самий border-bottom безумовно — коли рядок закритий (x-show),
   він display:none і межа не рендериться, тому нічого не змінюється
   візуально. Коли розкритий, ця межа стає справжнім нижнім краєм пари, а
   межа на item-cols лишається як внутрішній розділювач між компактними
   колонками і розкритим блоком (:has() для умовного вимкнення не
   заводиться — прибраний з файлу на чекпойнті 4, деградація в браузерах
   без підтримки). */
.catalog-table .item-cols td,
.catalog-table .item-detail td,
.catalog-table .catalog-thumb-cell {
    border-bottom: 1px solid var(--border);
}

.catalog-table .catalog-thumb-cell {
    vertical-align: middle;
}

.catalog-table .item-title {
    font-weight: 500;
}

.catalog-table .item-title .item-sep {
    color: var(--muted);
    margin: 0 0.35em;
}

/* --- Прив'язано до фактичного складу й порядку колонок нижнього рівня
   (SPEC_stage7.md §6.1: матеріал, колір, товщина/Ø, вага, наявність,
   ціна/шт, ціна/кг). Нумерація в .item-cols рахує від 1 усередині свого
   <tr> (мініатюра туди не входить — вона в іншому рядку), тому в
   thead/tfoot, де мініатюрі відповідає порожній перший <th>, той самий
   стовпець — на одну позицію правіше. Наступна правка складу колонок
   вимагає узгодженої правки в обох групах селекторів. --- */
.catalog-table .item-cols td:nth-child(3),
.catalog-table thead th:nth-child(4),
.catalog-table tfoot th:nth-child(4) {
    white-space: nowrap;
}

.catalog-table .item-cols td:nth-child(4),
.catalog-table .item-cols td:nth-child(6),
.catalog-table .item-cols td:nth-child(7),
.catalog-table thead th:nth-child(5),
.catalog-table thead th:nth-child(7),
.catalog-table thead th:nth-child(8),
.catalog-table tfoot th:nth-child(5),
.catalog-table tfoot th:nth-child(7),
.catalog-table tfoot th:nth-child(8) {
    text-align: right;
    white-space: nowrap;
}

/* Об'єднана комірка (colspan="2", state != "ok" — «Ціна за запитом» /
   «Ціни тимчасово недоступні») стосується обох цінових колонок одразу —
   вирівнюється по центру своєї ширини, а не успадковує праве вирівнювання
   nth-child(6) вище: притиснутий праворуч текст читався як значення саме
   «Ціна за кг» (SPEC_stage7.md §6.1, чекпойнт 5, хвіст, власник за
   скріншотом). Іде після правила вище навмисно — однакова специфічність,
   перемагає порядок у файлі. */
.catalog-table .item-cols td[colspan="2"] {
    text-align: center;
}

/* Шеврон розкривного блоку (SPEC_stage7.md §7, чекпойнт 6) — та сама
   технікa CSS-трикутника, що й у лівій панелі (details.filter-section
   summary::after): без SVG і без іконочних шрифтів. Стан бере не [open]
   деталей, а атрибут aria-expanded, який виставляє Alpine. */
.catalog-table .row-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4em;
    height: 1.4em;
    margin-left: 0.4em;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    vertical-align: middle;
}

.catalog-table .row-toggle::after {
    content: "";
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid var(--muted);
    transition: transform 0.15s ease;
}

.catalog-table .row-toggle[aria-expanded="true"]::after {
    transform: rotate(180deg);
}

.catalog-table .row-toggle:focus {
    outline: none;
}

.catalog-table .row-toggle:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

.catalog-table .item-detail td {
    background: var(--bg-soft);
    padding: 10px 10px 12px;
}

.item-detail-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 2rem;
    margin: 0 0 0.6rem;
}

.item-detail-grid dt {
    font-size: 11px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.item-detail-grid dd {
    margin: 0.1rem 0 0;
}

.item-detail-grid .compliance-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0.1rem 0 0;
    padding: 0;
    list-style: none;
}

.item-detail-link {
    margin-left: 0.75rem;
}

.catalog-thumb {
    width: 48px;
    height: 36px;
    object-fit: contain;
    background: var(--tint);
    border: 1px solid var(--border);
    border-radius: 2px;
}

/* --- Образок кольору (SPEC_stage7.md §6.1): відповідність color_code →
   колір кружка задається класами тут, окремого поля в базі нема. Базовий
   фон — --muted: покриває MUL (мультиколірний, свідомо не вигадується
   окремий вигляд — SPEC_stage7.md §5.6) і будь-яке непередбачене значення
   кольору нейтральним кружком без окремого правила. --- */
.color-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--muted);
    vertical-align: middle;
    margin-right: 5px;
}

.color-dot--NAT { background: #EDE6D6; }
.color-dot--BLK { background: #22262B; }
.color-dot--GRN { background: #3B8C3B; }
.color-dot--BLU { background: #2A5CAA; }
.color-dot--GRY { background: #9AA0A6; }
.color-dot--WHT { background: #FFFFFF; }
.color-dot--YEL { background: #E8C547; }
.color-dot--CREME { background: #F3E3C3; }

.pagination {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-top: 1.5rem;
    font-size: 0.9rem;
}

.pagination a {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--brand);
    text-decoration: none;
}

.pagination a:hover {
    color: var(--brand-dark);
    text-decoration: none;
}

/* SPEC_stage9.md, задача 5: контрол «На сторінці» переїхав із .catalog-toolbar
   (де select стилізувався правилом .catalog-toolbar select) у пагінацію —
   тут свого стилю в select не було зовсім, підхоплюємо той самий вигляд. */
.pagination label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-left: auto;
    color: var(--muted);
}

.pagination select {
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: #fff;
    color: var(--text);
    font: inherit;
}

/* --- картка товару (SPEC_stage4.md §8) --- */

.item-layout {
    display: grid;
    grid-template-columns: 16rem 1fr;
    gap: 2rem;
}

.item-image,
.item-image-placeholder {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    background: var(--tint);
    border: 1px solid var(--border);
    border-radius: 4px;
}

.item-description-en {
    font-size: 0.8rem;
    color: var(--muted);
}

.item-specs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 2rem;
    margin: 1rem 0;
}

.item-specs > div {
    min-width: 11rem;
}

.item-specs dt {
    color: var(--muted);
    font-size: 0.8rem;
}

.item-specs dd {
    margin: 0.1rem 0 0;
}

.compliance-badges {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1rem 0;
}

.compliance-badges .badge {
    padding: 0.25rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 0.75rem;
}

.item-price {
    display: inline-block;
    margin: 1.25rem 0;
    padding: 1rem 1.5rem;
    background: var(--tint);
    border-radius: 6px;
}

.price-pc {
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--ink);
    margin: 0;
}

.price-kg {
    font-size: 1rem;
    color: var(--muted);
    margin: 0.25rem 0 0;
}

.btn {
    display: inline-block;
    padding: 0.5rem 1.25rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--brand);
    color: #fff;
    text-decoration: none;
    cursor: pointer;
}

.btn:hover {
    background: var(--brand-dark);
    text-decoration: none;
}

.btn[disabled] {
    background: #fff;
    border-color: var(--border);
    color: var(--muted);
    cursor: default;
}

.btn-datasheet {
    background: #fff;
    border-color: var(--brand);
    color: var(--brand);
}

.btn-datasheet:hover {
    background: var(--tint);
    color: var(--brand-dark);
    border-color: var(--brand-dark);
}

.similar-items ul {
    list-style: none;
    padding: 0;
}

.similar-items li {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0.6rem;
    border-bottom: 1px solid var(--border);
}

.similar-items li:nth-child(even) {
    background: var(--tint);
}

.similar-items li:hover {
    background: var(--bg-soft);
}

.similar-items span {
    color: var(--muted);
}

/* --- адмін-панель (SPEC_stage5.md §11) --- */

.content.admin-page {
    max-width: none;
    margin: 1.5rem auto;
    padding: 0 1.5rem;
}

.admin-layout {
    display: grid;
    grid-template-columns: 14rem 1fr;
    gap: 2rem;
    align-items: start;
}

.admin-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.admin-menu li {
    margin-bottom: 0.2rem;
}

.admin-menu a,
.admin-menu-disabled {
    display: block;
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    text-decoration: none;
    color: inherit;
}

.admin-menu a:hover {
    background: #f2f2f2;
    text-decoration: none;
}

.admin-menu a.active {
    background: var(--brand);
    color: #fff;
}

.admin-menu-disabled {
    color: var(--muted);
    cursor: default;
}

.admin-content {
    min-width: 0;
}

.admin-hint {
    color: var(--muted);
    font-size: 0.875rem;
}

.admin-cards {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.admin-card {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    min-width: 10rem;
}

.admin-card-label {
    color: var(--muted);
    font-size: 0.8125rem;
}

.admin-card-value {
    font-size: 1.5rem;
    font-weight: 600;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0.5rem 0 1.5rem;
}

.admin-table th,
.admin-table td {
    text-align: left;
    padding: 0.4rem 0.6rem;
    border-bottom: 1px solid var(--border);
}

/* Той самий візуальний язик, що .catalog-table (SPEC_stage4.md §6):
   шапка --brand/білий текст, зебра --tint, ховер --border — дев'ятий
   токен під ховер не заводиться (docs/DECISIONS.md, чекпойнт 3 каталогу). */
.admin-table th {
    background: var(--brand);
    color: #fff;
    font-weight: 600;
    font-size: 0.8125rem;
}

.admin-table tbody tr:nth-child(even) {
    background: var(--tint);
}

.admin-table tbody tr:hover {
    background: var(--border);
}

.admin-row-stale td {
    color: var(--error-text);
}

/* --- Вирівнювання числових колонок (SPEC_stage7.md §10, чекпойнт 8).
   .admin-table — один клас на всі розділи адмінки, і без хука на конкретну
   сторінку позиція «3-я колонка» означає різне на різних екранах (число на
   одних, текст на інших) — на відміну від .catalog-table, де числові
   колонки завжди відрізняються власними класами. Хук — модифікатор
   content_class у восьми шаблонах екранів (app/templates/admin/*.html,
   `{{ super() }}` зберігає базовий "admin-page"), навмисне виключення з
   межі «тільки app.css» цього чекпойнта (узгоджено з власником).
   Відхилений варіант: вирівнювати лише там, де позиція збігається
   випадково (dashboard/rate/profiles/dealers, всюди 3-я колонка числова) —
   дає результат, який не можна пояснити структурою сторінки, і наступна
   правка (users/audit/datasheets) або зламає його, або "доробить" на око.
   Повний перелік числових колонок за екранами — docs/DECISIONS.md. */
.admin-page--dashboard .admin-table th:nth-child(3),
.admin-page--dashboard .admin-table td:nth-child(3),
.admin-page--dashboard .admin-table th:nth-child(4),
.admin-page--dashboard .admin-table td:nth-child(4),
.admin-page--rate .admin-table:nth-of-type(1) th:nth-child(3),
.admin-page--rate .admin-table:nth-of-type(1) td:nth-child(3),
.admin-page--rate .admin-table:nth-of-type(2) th:nth-child(1),
.admin-page--rate .admin-table:nth-of-type(2) td:nth-child(1),
.admin-page--profiles .admin-table th:nth-child(3),
.admin-page--profiles .admin-table td:nth-child(3),
.admin-page--profiles .admin-table th:nth-child(4),
.admin-page--profiles .admin-table td:nth-child(4),
.admin-page--profiles .admin-table th:nth-child(6),
.admin-page--profiles .admin-table td:nth-child(6),
.admin-page--dealers .admin-table th:nth-child(3),
.admin-page--dealers .admin-table td:nth-child(3),
.admin-page--audit .admin-table th:nth-child(5),
.admin-page--audit .admin-table td:nth-child(5),
.rule-preview .admin-table th:nth-child(n+3),
.rule-preview .admin-table td:nth-child(n+3) {
    text-align: right;
    white-space: nowrap;
}

/* --- /admin/audit виїжджав за праву межу вікна: Payload (ip, довгий
   user_agent без пробілів для переносу) розтягував колонку понад ширину
   сторінки в auto-розкладці таблиці (docs/DECISIONS.md, чекпойнт 8, хвіст).
   table-layout: fixed примусово ділить ширину за колонками нижче,
   overflow-wrap переносить довгі токени всередині клітинки замість
   розтягування. --- */
.admin-page--audit .admin-table {
    table-layout: fixed;
}

.admin-page--audit .admin-table th,
.admin-page--audit .admin-table td {
    overflow-wrap: break-word;
    word-break: break-word;
}

.admin-page--audit .admin-table th:nth-child(1) { width: 13%; }
.admin-page--audit .admin-table th:nth-child(2) { width: 15%; }
.admin-page--audit .admin-table th:nth-child(3) { width: 9%; }
.admin-page--audit .admin-table th:nth-child(4) { width: 9%; }
.admin-page--audit .admin-table th:nth-child(5) {
    width: 10%;
    /* Числове вирівнювання §10 задає th:nth-child(5) white-space: nowrap
       вище — заголовок "Ідентифікатор" довший за колонку й напливав на
       "Payload". Значення в td (номер або "—") короткі, nowrap там лишається. */
    white-space: normal;
}
.admin-page--audit .admin-table th:nth-child(6) { width: 44%; }

.rule-preview-panel:empty {
    display: none;
}

.rule-preview {
    margin-top: 0.5rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 4px;
}

.rule-preview-empty {
    border-color: var(--error-text);
    color: var(--error-text);
}

.rule-preview-count {
    margin: 0 0 0.4rem;
    font-weight: 500;
}

.flash-success {
    background: #e9f7ec;
    color: #1e5e2e;
}

/* --- Адмінка: повідомлення текстовим акцентом, не заливкою (SPEC_stage7.md
   §10, чекпойнт 8). .flash/.flash-success/.flash-error — спільні класи з
   формами входу/реєстрації/кабінету (app/routers/auth.py::_render_form),
   тому перевизначення скопійовано під .admin-page (базовий клас з
   base_admin.html, є на кожному екрані адмінки без додаткової правки), а
   не в самому класі — вітрини цей чекпойнт не торкається. --- */
.admin-page .flash {
    background: none;
    padding: 0.25rem 0 0.25rem 0.75rem;
    border-left: 3px solid currentColor;
    margin-bottom: 1rem;
}

.admin-page .flash-success {
    color: #1e5e2e;
}

.admin-page .flash-error {
    color: var(--error-text);
}

/* --- Другорядні дії: фільтри (GET-форми) контурні, як .pagination a, а не
   залиті --brand — атрибут method="get" вже є в розмітці фільтрів
   (audit.html, users.html), нового класу не потрібно. --- */
.admin-page form[method="get"] button {
    background: #fff;
    border-color: var(--brand);
    color: var(--brand);
}

.admin-page form[method="get"] button:hover {
    background: var(--tint);
    color: var(--brand-dark);
    border-color: var(--brand-dark);
}

/* --- Небезпечні дії: контурна кнопка з акцентом --error-text, не червона
   заливка (SPEC_stage7.md §10, чекпойнт 8, погоджений перелік — див.
   docs/DECISIONS.md). Хук — атрибути, вже наявні в розмітці (action кожної
   форми, значення прихованого form_action), нового класу не додано:
   - form[action$="/delete"]           — видалення правила й профілю;
   - form[action$="/default"]          — призначення профілю за замовчуванням;
   - form[action$="/deactivate"]       — деактивація даташита (URL з
     суфіксом; дилер/користувач деактивуються тим самим POST, що й
     активація, розрізнення — лише значенням прихованого form_action, тому
     нижче окремий селектор через ~);
   - form[action$="/sync"]             — синхронізація даташитів;
   - form[action$="/reset-password"]   — скидання пароля;
   - form[action$="/replace"]          — заміна файлу даташита (одна форма
     на "перше завантаження" й "перезапис", розрізнити немає можливості без
     атрибута в розмітці — свідомо небезпечна для обох випадків, дешевше
     зайвого акценту на порожньому рядку, ніж пропущеного на існуючому;
     docs/SPEC_stage7.md §13);
   - input[name="form_action"][value="deactivate"] ~ button — деактивація
     дилера й користувача (та сама форма, що активація — активація не
     небезпечна, тому селектор саме на value="deactivate", не на форму
     цілком);
   - input[name="form_action"][value="role"] ~ button — зміна ролі:
     формально відновна, але наслідки дій під підвищеною роллю відновленню
     не підлягають. --- */
.admin-page form[action$="/delete"] button,
.admin-page form[action$="/default"] button,
.admin-page form[action$="/deactivate"] button,
.admin-page form[action$="/sync"] button,
.admin-page form[action$="/reset-password"] button,
.admin-page form[action$="/replace"] button,
.admin-page input[name="form_action"][value="deactivate"] ~ button,
.admin-page input[name="form_action"][value="role"] ~ button {
    background: #fff;
    border-color: var(--error-text);
    color: var(--error-text);
}

.admin-page form[action$="/delete"] button:hover,
.admin-page form[action$="/default"] button:hover,
.admin-page form[action$="/deactivate"] button:hover,
.admin-page form[action$="/sync"] button:hover,
.admin-page form[action$="/reset-password"] button:hover,
.admin-page form[action$="/replace"] button:hover,
.admin-page input[name="form_action"][value="deactivate"] ~ button:hover,
.admin-page input[name="form_action"][value="role"] ~ button:hover {
    background: var(--error-bg);
}