:root {
    --logo-module: #e0871f;
}

* {
    box-sizing: border-box;
}

html,
body {
    min-height: 100%;
}

body {
    margin: 0;
}

[v-cloak] {
    display: none;
}

.app-content {
    min-height: 100vh;
}

.app-content.loaded {
    display: block;
}

.bark-layout {
    display: flex;
    min-height: 100vh;
}

.bark-sidebar {
    flex: 0 0 244px;
    height: 100vh;
    position: sticky;
    top: 0;
    align-self: flex-start;
    overflow: hidden; /* скроллится только меню (.bark-sidebar__scroll) */
}

/* меню занимает свободную высоту и скроллится внутри;
   лого сверху и блок тема+футер снизу закреплены */
.bark-sidebar__scroll {
    display: flex;
    flex-direction: column;
    gap: 22px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    margin-right: -8px;   /* скроллбар ближе к краю, пункты на месте */
    padding-right: 8px;
}
.bark-sidebar__bottom {
    display: flex;
    flex: none;
    flex-direction: column;
    gap: 10px;
}

.bark-main {
    align-content: normal;
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0;
    min-width: 0;
    padding: 0;
}

.bark-topbar {
    align-items: center;
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    border-bottom: 1px solid var(--line);
    display: flex;
    gap: var(--space-4);
    justify-content: space-between;
    min-height: 76px;
    padding: var(--space-4) var(--space-6);
    position: sticky;
    top: 0;
    z-index: 30;
}

.bark-topbar__title {
    min-width: 0;
}

.bark-topbar__meta {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    justify-content: flex-end;
}

.bark-page {
    display: grid;
    gap: var(--space-5);
    padding: var(--space-6);
    width: 100%;
    max-width: 1640px;
    margin-inline: auto;
}

.bark-page-title {
    align-items: center;
    display: flex;
    gap: var(--space-4);
    justify-content: space-between;
    margin-bottom: var(--space-5);
}

.bark-section-kicker {
    color: var(--muted);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 1;
    margin: 0 0 var(--space-2);
    text-transform: uppercase;
}

.bark-user-chip {
    align-items: center;
    background: var(--chip);
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--ink2);
    display: inline-flex;
    font-size: 13px;
    font-weight: 600;
    gap: var(--space-2);
    min-height: 36px;
    padding: 0 var(--space-3);
}

.bark-user-chip::before {
    background: var(--accent);
    border-radius: 999px;
    content: "";
    height: 8px;
    width: 8px;
}

.bark-auth {
    align-items: center;
    display: flex;
    justify-content: center;
    min-height: 100vh;
    padding: var(--space-6);
}

.bark-auth-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-panel);
    box-shadow: var(--shadow-up);
    display: grid;
    gap: var(--space-6);
    max-width: 420px;
    padding: var(--space-8);
    width: 100%;
}

.bark-auth-card .bark-logo {
    justify-content: center;
}

/* Кнопка входа должна занимать всю ширину карточки, как поля ввода.
   Перебивает media-правило .bark-btn--block (≥640px делает кнопку узкой). */
.bark-auth-card .bark-btn--block {
    width: 100%;
    min-width: 0;
    max-width: none;
}

.bark-form-stack {
    display: grid;
    gap: var(--space-4);
}

.bark-auth-status,
.bark-auth-error {
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    color: var(--ink2);
    font-size: 13px;
    line-height: 1.45;
    margin: 0;
    padding: var(--space-3);
}

.bark-auth-status {
    background: var(--chip);
}

.bark-auth-error {
    background: var(--bad-soft);
    border-color: color-mix(in srgb, var(--bad) 32%, var(--line));
    color: var(--bad);
}

.bark-auth-local {
    border-top: 1px solid var(--line);
    padding-top: var(--space-4);
}

.bark-auth-local summary {
    color: var(--muted);
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    list-style-position: inside;
}

.bark-auth-local[open] summary {
    margin-bottom: var(--space-4);
}

.section {
    min-width: 0;
}

.bark-panel,
.bg-white.shadow-md,
.bg-white.shadow-lg {
    background: var(--surface) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--radius-panel) !important;
    box-shadow: var(--shadow-card) !important;
}

.bark-table-panel {
    overflow-x: auto;
    overflow-y: hidden;
}

.bark-table-panel > table {
    min-width: 720px;
}

.bark-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    justify-content: flex-end;
}

.bark-filter-grid {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.bark-filter-grid--checks {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* фильтры дашборда (6 штук) — умещаем в один ряд на десктопе, перенос на мобиле */
.bark-filter-grid--dash {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="date"],
select,
textarea {
    background: var(--field) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--radius-control) !important;
    color: var(--ink) !important;
    font: 500 14px/1.35 var(--sans) !important;
    min-height: 40px;
    outline: none;
    transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

textarea {
    min-height: auto;
}

/* ---- Multi-select (Должности): branded rows instead of native OS blue ---- */
select[multiple] {
    min-height: 120px;
    padding: var(--space-1);
}
select[multiple] option {
    padding: 6px 8px;
    border-radius: 6px;
}
select[multiple] option:checked {
    background: var(--accent-soft);
    color: var(--accent);
}

input::placeholder {
    color: var(--faint);
}

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

input:focus,
select:focus,
textarea:focus,
.c-focus-primary:focus {
    border-color: var(--accent-line) !important;
    box-shadow: 0 0 0 3px var(--accent-soft) !important;
    outline: none !important;
}

label,
.text-gray-700 {
    color: var(--ink2) !important;
}

.text-gray-900 {
    color: var(--ink) !important;
}

.text-gray-600,
.text-gray-500,
.text-gray-400 {
    color: var(--muted) !important;
}

.text-primary {
    color: var(--accent) !important;
}

.text-primary-dark {
    color: var(--ink) !important;
}

.border-primary {
    border-color: var(--accent-line) !important;
}

.border-primary-light,
.border-gray-200,
.border-gray-300 {
    border-color: var(--line) !important;
}

.bg-primary {
    background: var(--accent) !important;
}

.bg-primary-light {
    background: var(--surface-2) !important;
}

.bg-primary-dark,
.hover\:bg-primary-dark:hover {
    background: var(--accent) !important;
    filter: brightness(1.06);
}

.bg-gray-50,
.bg-gray-100 {
    background: var(--surface-2) !important;
}

.bg-gray-300 {
    background: var(--chip) !important;
}

.bg-gray-600 {
    background: var(--ink) !important;
}

.bg-white {
    background: var(--surface) !important;
}

.hover\:bg-gray-50:hover,
.hover\:bg-gray-100:hover,
.hover\:bg-gray-200:hover {
    background: var(--chip) !important;
}

.shadow-sm,
.shadow-md,
.shadow-lg {
    box-shadow: var(--shadow-card) !important;
}

.rounded-md,
.rounded-lg {
    border-radius: var(--radius-control) !important;
}

button,
a {
    transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease, filter 160ms ease, transform 80ms ease;
}

button:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

button.bg-primary,
.bark-btn {
    align-items: center;
    background: var(--accent-solid, var(--accent)) !important;
    border: 1px solid transparent !important;
    border-radius: var(--radius-control) !important;
    color: #fff !important;
    cursor: pointer;
    display: inline-flex;
    font: 600 14px/1 var(--sans) !important;
    gap: var(--space-2);
    min-height: 40px;
    justify-content: center;
    padding: 0 var(--space-4) !important;
    white-space: nowrap;
}

button.bg-primary:hover,
.bark-btn:hover {
    filter: brightness(1.06);
}

button.bg-white,
button.bg-gray-300,
.bark-btn--ghost {
    align-items: center;
    background: transparent !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--radius-control) !important;
    color: var(--ink2) !important;
    display: inline-flex;
    font: 600 14px/1 var(--sans) !important;
    min-height: 40px;
    justify-content: center;
    padding: 0 var(--space-4) !important;
    white-space: nowrap;
}

button.bg-white:hover,
button.bg-gray-300:hover,
.bark-btn--ghost:hover {
    background: var(--chip) !important;
    filter: none;
}

table {
    border-collapse: separate;
    border-spacing: 0;
    color: var(--ink);
    font-size: 14px;
    width: 100%;
}

.bark-data-table {
    table-layout: fixed;
}

.bark-data-table th,
.bark-data-table td {
    overflow-wrap: anywhere;
    padding: var(--space-3) var(--space-4);
}

.bark-data-table th:nth-child(1) { width: 23%; }
.bark-data-table th:nth-child(2) { width: 18%; }
.bark-data-table th:nth-child(3) { width: 20%; }
.bark-data-table th:nth-child(4) { width: 17%; }
.bark-data-table th:nth-child(5) { width: 12%; }
.bark-data-table th:nth-child(6) { width: 104px; }

/* Seven employee columns: keep dates and row actions readable after adding KKZ. */
.bark-data-table--employees {
    min-width: 1040px;
}

.bark-data-table--employees th:nth-child(1) { width: 21%; }
.bark-data-table--employees th:nth-child(2) { width: 16%; }
.bark-data-table--employees th:nth-child(3) { width: 18%; }
.bark-data-table--employees th:nth-child(4) { width: 15%; }
.bark-data-table--employees th:nth-child(5) { width: 68px; }
.bark-data-table--employees th:nth-child(6) { width: 124px; }
.bark-data-table--employees th:nth-child(7) { width: 104px; }

.bark-data-table--employees th:nth-child(n + 5),
.bark-data-table--employees td:nth-child(n + 5) {
    overflow-wrap: normal;
    word-break: normal;
}

.bark-data-table--employees th:nth-child(n + 5),
.bark-data-table--employees td:nth-child(6) .bark-cell-stack {
    white-space: nowrap;
}

.bark-data-table--employees th:nth-child(5),
.bark-data-table--employees td:nth-child(5),
.bark-data-table--employees th:nth-child(6),
.bark-data-table--employees td:nth-child(6) {
    padding-inline: 12px;
}

.bark-data-table--employees th:nth-child(7),
.bark-data-table--employees td:nth-child(7) {
    padding-inline: 8px;
}

.bark-data-table--transfers th:nth-child(1) { width: 96px; }
.bark-data-table--transfers th:nth-child(2) { width: 20%; }
.bark-data-table--transfers th:nth-child(3) { width: 24%; }
.bark-data-table--transfers th:nth-child(4) { width: 20%; }
.bark-data-table--transfers th:nth-child(5) { width: 18%; }
.bark-data-table--transfers th:nth-child(6) { width: 100px; }

thead,
thead.bg-primary-light {
    background: var(--surface-2) !important;
}

.bark-data-table thead th,
.bark-recon-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--surface-2);
}

th {
    border-bottom: 1px solid var(--line);
    color: var(--muted) !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase;
}

td {
    border-bottom: 1px solid var(--line-2);
    color: var(--ink2);
    vertical-align: top;
}

tbody,
tbody.bg-white {
    background: var(--surface) !important;
}

tbody tr,
tbody tr.bg-white,
tbody tr.bg-gray-50 {
    background: var(--surface) !important;
}

tbody tr:hover,
tbody tr.hover\:bg-primary-light:hover {
    background: var(--surface-2) !important;
}

.divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
    border-color: var(--line) !important;
}

.bark-data,
.font-mono {
    font-family: var(--mono) !important;
}

.bg-green-100 {
    background: var(--ok-soft) !important;
}

.text-green-700,
.text-green-800,
.text-green-900 {
    color: var(--ok) !important;
}

.bg-yellow-100 {
    background: var(--warn-soft) !important;
}

.text-yellow-700,
.text-yellow-800,
.text-yellow-900 {
    color: var(--warn) !important;
}

.bg-red-50,
.bg-red-100 {
    background: var(--bad-soft) !important;
}

.text-red-500,
.text-red-700,
.text-red-800 {
    color: var(--bad) !important;
}

.border-red-200,
.border-red-300 {
    border-color: color-mix(in srgb, var(--bad) 32%, transparent) !important;
}

.bg-blue-100 {
    background: color-mix(in srgb, var(--info) 13%, transparent) !important;
}

.text-blue-700,
.text-blue-800 {
    color: var(--info) !important;
}

.fixed.inset-0 {
    background: var(--scrim) !important;
    z-index: 60;
}

.fixed.inset-0 > .relative {
    background: var(--surface) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--radius-panel) !important;
    box-shadow: var(--shadow-pop) !important;
    overflow: hidden;
}

.fixed.inset-0 > .relative > .bg-primary-light {
    background: var(--surface-2) !important;
    border-bottom: 1px solid var(--line);
    border-radius: 0 !important;
    padding: var(--space-4) var(--space-5) !important;
}

.fixed.inset-0 > .relative > .mt-3,
.fixed.inset-0 > .relative > form.mt-3 {
    margin-top: 0 !important;
    padding: var(--space-5);
}

.border-b {
    border-color: var(--line) !important;
}

.border-b-2 {
    border-bottom-width: 1px !important;
}

nav[aria-label="Tabs"] button {
    border-bottom-width: 2px;
    min-height: 44px;
}

nav[aria-label="Tabs"] button.border-primary {
    border-color: var(--accent) !important;
    color: var(--accent) !important;
}

.bark-theme-switch button {
    min-height: 34px;
}

.bark-sidebar__item {
    border: 0;
    cursor: pointer;
    width: 100%;
}

.bark-sidebar__item--active {
    background: var(--accent-soft) !important;
    color: var(--accent) !important;
}

.bark-sidebar__item--active svg {
    color: var(--accent);
}

.bark-sidebar__footer strong {
    color: var(--ink2);
    font-weight: 700;
}

.view-mode-notice {
    align-items: center;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    color: var(--muted);
    display: flex;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
    padding: var(--space-2) var(--space-3);
}

.view-only-mode input:disabled,
.view-only-mode select:disabled,
.view-only-mode textarea:disabled {
    background: var(--surface-2) !important;
    border-color: var(--line) !important;
    color: var(--muted) !important;
    cursor: not-allowed;
}

.bark-drawer-backdrop {
    align-items: flex-start;
    display: flex;
    justify-content: center;
    overflow-y: auto;
    padding: var(--space-6);
}

.bark-employee-drawer {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-panel);
    box-shadow: var(--shadow-pop);
    margin: auto;
    max-width: 980px;
    /* фиксированная высота: карточка не «прыгает» при переключении вкладок —
       рамка стабильна, скроллится только содержимое */
    height: calc(100vh - 48px);
    height: calc(100dvh - 48px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    width: min(96vw, 980px);
}

.bark-transfer-modal {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-panel);
    box-shadow: var(--shadow-pop);
    max-height: calc(100vh - 48px);
    max-height: calc(100dvh - 48px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    max-width: 720px;
    width: min(94vw, 720px);
}

.bark-report-modal {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-panel);
    box-shadow: var(--shadow-pop);
    display: flex;
    flex-direction: column;
    margin: auto;
    max-height: calc(100vh - 48px);
    max-height: calc(100dvh - 48px);
    max-width: 920px;
    overflow: hidden;
    width: min(96vw, 920px);
}

.bark-report-modal__head {
    align-items: center;
    background: var(--surface-2);
    border-bottom: 1px solid var(--line);
    display: grid;
    flex: none;
    gap: var(--space-4);
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding: var(--space-5);
}

.bark-report-modal__head .bark-caption {
    margin-top: var(--space-1);
    max-width: 680px;
}

.bark-report-modal__icon {
    align-items: center;
    background: var(--accent-soft);
    border-radius: var(--radius-control);
    color: var(--accent);
    display: inline-flex;
    height: 48px;
    justify-content: center;
    width: 48px;
}

.bark-report-modal__icon .bark-ico {
    height: 22px;
    width: 22px;
}

.bark-report-modal__body {
    display: grid;
    gap: var(--space-5);
    overflow-y: auto;
    padding: var(--space-5);
}

.bark-report-selection {
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-panel);
    padding: var(--space-4);
}

.bark-report-selection__head,
.bark-report-columns-head {
    align-items: center;
    display: flex;
    gap: var(--space-3);
    justify-content: space-between;
}

.bark-report-format {
    background: var(--ok-soft);
    border: 1px solid color-mix(in srgb, var(--ok) 30%, transparent);
    border-radius: 999px;
    color: var(--ok);
    font: 700 12px/1 var(--body-font);
    padding: 7px 10px;
    text-transform: uppercase;
}

.bark-report-filter-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: var(--space-3) 0 var(--space-2);
}

.bark-report-count {
    align-items: center;
    background: var(--accent-soft);
    border-radius: 999px;
    color: var(--accent);
    display: inline-flex;
    font-size: 12px;
    height: 24px;
    justify-content: center;
    margin-left: 5px;
    min-width: 24px;
    padding: 0 7px;
    vertical-align: middle;
}

.bark-report-column-actions,
.bark-report-presets {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.bark-report-presets {
    margin: var(--space-3) 0;
}

.bark-report-presets button {
    background: var(--surface-2);
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    color: var(--ink2);
    cursor: pointer;
    font: 700 13px/1 var(--body-font);
    padding: 9px 13px;
    transition: border-color 150ms ease, color 150ms ease, background 150ms ease;
}

.bark-report-presets button:hover {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
}

.bark-report-field-grid {
    display: grid;
    gap: var(--space-2);
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.bark-report-field {
    align-items: center;
    background: var(--field);
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    cursor: pointer;
    display: flex;
    gap: var(--space-3);
    min-height: 62px;
    padding: 11px 12px;
    transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

.bark-report-field:hover {
    border-color: var(--line-strong);
}

.bark-report-field--selected {
    background: var(--accent-soft);
    border-color: var(--accent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent);
}

.bark-report-field input {
    flex: none;
    height: 18px;
    margin: 0;
    width: 18px;
}

.bark-report-field span {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.bark-report-field strong {
    color: var(--ink);
    font-size: 13px;
    line-height: 1.25;
}

.bark-report-field small {
    color: var(--muted);
    font-size: 11px;
}

.bark-report-modal__footer {
    align-items: center;
    background: var(--surface);
    border-top: 1px solid var(--line);
    display: flex;
    flex: none;
    gap: var(--space-3);
    justify-content: flex-end;
    padding: var(--space-4) var(--space-5);
}

.bark-report-warning {
    color: var(--bad);
    font-size: 13px;
    font-weight: 650;
    margin-right: auto;
}

@media (max-width: 900px) {
    .bark-report-field-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .bark-report-modal {
        max-height: calc(100dvh - 16px);
        width: calc(100vw - 16px);
    }

    .bark-report-modal__head {
        gap: var(--space-3);
        grid-template-columns: minmax(0, 1fr) auto;
        padding: var(--space-4);
    }

    .bark-report-modal__icon {
        display: none;
    }

    .bark-report-modal__body {
        padding: var(--space-4);
    }

    .bark-report-columns-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .bark-report-field-grid {
        grid-template-columns: 1fr;
    }

    .bark-report-modal__footer {
        align-items: stretch;
        flex-wrap: wrap;
        padding: var(--space-3) var(--space-4);
    }

    .bark-report-modal__footer .bark-btn,
    .bark-report-modal__footer .bark-btn--ghost {
        flex: 1 1 auto;
        justify-content: center;
    }

    .bark-report-warning {
        flex-basis: 100%;
        margin: 0;
    }
}

.bark-employee-drawer__hero {
    align-items: center;
    background: var(--surface-2);
    border-bottom: 1px solid var(--line);
    display: grid;
    flex: none;
    gap: var(--space-4);
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding: var(--space-5);
}

.bark-employee-avatar {
    align-items: center;
    background: var(--banner);
    border-radius: var(--radius-panel);
    color: #fff;
    display: inline-flex;
    font: 700 18px/1 var(--logo-font);
    height: 52px;
    justify-content: center;
    width: 52px;
}

.bark-employee-drawer__title {
    min-width: 0;
}

.bark-employee-meta {
    align-items: center;
    color: var(--muted);
    display: flex;
    flex-wrap: wrap;
    font-size: 13px;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.bark-employee-meta span {
    align-items: center;
    display: inline-flex;
    gap: var(--space-2);
}

.bark-employee-meta span:not(:last-child)::after {
    background: var(--line);
    border-radius: 999px;
    content: "";
    height: 4px;
    margin-left: var(--space-2);
    width: 4px;
}

.bark-employee-drawer__actions {
    align-items: center;
    display: flex;
    gap: var(--space-2);
}

.bark-icon-button {
    align-items: center;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    color: var(--ink2);
    display: inline-flex;
    height: 40px;
    justify-content: center;
    padding: 0;
    width: 40px;
}

.bark-icon-button:hover {
    background: var(--chip);
}

.bark-icon-button svg {
    height: 18px;
    width: 18px;
}

.bark-employee-drawer__body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* The form fills the body and owns the scroll/footer split (footer pins). */
.bark-employee-drawer__body > form {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Scrollable content region; the footer sits outside it so it never scrolls away. */
.bark-drawer-scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: var(--space-5);
}

.bark-tabs-wrap {
    border-bottom: 1px solid var(--line);
    margin-bottom: var(--space-5);
    overflow-x: auto;
    position: sticky;
    top: 0;
    background: var(--surface);
    z-index: 1;
}

.bark-tabs {
    align-items: center;
    display: flex;
    gap: var(--space-2);
    min-width: max-content;
}

.bark-tabs__item {
    align-items: center;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--muted);
    display: inline-flex;
    font: 700 13px/1 var(--sans);
    gap: var(--space-2);
    min-height: 44px;
    padding: 0 var(--space-2);
    transition: color 160ms ease, border-color 160ms ease;
}

.bark-tabs__item:hover {
    color: var(--ink2);
}

.bark-tabs__item--active {
    border-color: var(--accent);
    color: var(--accent);
}

.bark-tabs__count {
    background: var(--chip);
    border-radius: 999px;
    color: var(--muted);
    font: 500 11px/1.4 var(--mono);
    padding: 2px var(--space-2);
}

.bark-tabs__item--active .bark-tabs__count {
    background: var(--accent-soft);
    color: var(--accent);
}

.bark-history-panel {
    display: grid;
    gap: var(--space-4);
}

.bark-history-panel__head {
    align-items: center;
    display: flex;
    gap: var(--space-4);
    justify-content: space-between;
}

.bark-history-summary {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.bark-history-summary > div {
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    display: grid;
    gap: 2px;
    padding: var(--space-4);
}

.bark-history-summary strong {
    color: var(--ink);
    font: 600 24px/1 var(--mono);
}

.bark-history-summary span {
    color: var(--muted);
    font-size: 12px;
}

.bark-history-empty {
    align-items: center;
    background: var(--surface-2);
    border: 1px dashed var(--line);
    border-radius: var(--radius-control);
    color: var(--muted);
    display: flex;
    justify-content: center;
    min-height: 120px;
    padding: var(--space-5);
    text-align: center;
}

.bark-history-empty--error {
    background: var(--bad-soft);
    border-color: color-mix(in srgb, var(--bad) 32%, transparent);
    color: var(--bad);
}

.bark-timeline {
    display: grid;
    gap: var(--space-3);
    list-style: none;
    margin: 0;
    padding: 0;
}

.bark-history-item {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: 16px minmax(0, 1fr);
}

.bark-history-item__dot {
    background: var(--muted);
    border: 3px solid var(--surface);
    border-radius: 999px;
    box-shadow: 0 0 0 1px var(--line);
    height: 12px;
    margin-top: var(--space-4);
    width: 12px;
}

.bark-history-item--ok .bark-history-item__dot { background: var(--ok); }
.bark-history-item--info .bark-history-item__dot { background: var(--info); }
.bark-history-item--warn .bark-history-item__dot { background: var(--warn); }
.bark-history-item--bad .bark-history-item__dot { background: var(--bad); }

.bark-history-item__body {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    padding: var(--space-4);
}

.bark-history-item__top {
    align-items: flex-start;
    display: flex;
    gap: var(--space-4);
    justify-content: space-between;
}

.bark-history-item__source {
    color: var(--faint);
    display: block;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.1em;
    margin-bottom: var(--space-1);
    text-transform: uppercase;
}

.bark-history-item h5 {
    color: var(--ink);
    font: 700 14px/1.3 var(--sans);
    margin: 0;
}

.bark-history-item time {
    color: var(--muted);
    flex: none;
    font: 600 12px/1.2 var(--mono);
}

.bark-history-item__user {
    color: var(--muted);
    font-size: 12px;
    margin: var(--space-2) 0 0;
}

.bark-history-details {
    color: var(--ink2);
    display: grid;
    font-size: 13px;
    gap: var(--space-1);
    list-style: none;
    margin: var(--space-3) 0 0;
    padding: 0;
}

.bark-form-footer {
    align-items: center;
    border-top: 1px solid var(--line);
    display: flex;
    flex: none;
    gap: var(--space-3);
    justify-content: flex-end;
    padding: var(--space-4) var(--space-5);
}
.bark-wizard-progress {
    color: var(--muted);
    font: 500 13px/1 var(--sans);
    margin-right: auto; /* прижимает кнопки навигации вправо */
}

/* Степпер мастера заведения */
.bark-wizard-steps {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    padding: var(--space-4) var(--space-5) 0;
}
.bark-wizard-step {
    align-items: center;
    background: none;
    border: none;
    border-bottom: 2px solid var(--line);
    color: var(--muted);
    cursor: pointer;
    display: flex;
    flex: 1 1 0;
    gap: var(--space-2);
    min-width: 140px;
    padding: 0 var(--space-2) var(--space-3);
    text-align: left;
}
.bark-wizard-step.is-active { border-bottom-color: var(--accent); color: var(--ink); }
.bark-wizard-step.is-done { border-bottom-color: color-mix(in srgb, var(--ok) 55%, var(--line)); }
.bark-wizard-step__num {
    align-items: center;
    background: var(--chip);
    border-radius: 50%;
    color: var(--ink2);
    display: inline-flex;
    flex: none;
    font: 700 12px/1 var(--sans);
    height: 26px;
    justify-content: center;
    width: 26px;
}
.bark-wizard-step.is-active .bark-wizard-step__num { background: var(--accent); color: #fff; }
.bark-wizard-step.is-done .bark-wizard-step__num { background: var(--ok); color: #fff; }
.bark-wizard-step__label { display: flex; flex-direction: column; font: 600 13px/1.2 var(--sans); }
.bark-wizard-step__hint { color: var(--muted); font: 400 11px/1.3 var(--sans); }
@media (max-width: 640px) {
    .bark-wizard-step__hint { display: none; }
    .bark-wizard-step { min-width: 96px; }
}

.bark-btn--sm,
.bark-btn.bark-btn--sm,
.bark-btn--ghost.bark-btn--sm {
    font-size: 13px !important;
    min-height: 32px;
    padding: 0 var(--space-3) !important;
}

.bark-mobile-nav-button {
    display: none;
    margin-bottom: var(--space-2);
}

.bark-nav-backdrop {
    background: var(--scrim);
    bottom: 0;
    display: none;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 48;
}

.bark-filter-panel {
    padding: var(--space-4);
}

.bark-dashboard {
    display: grid;
    gap: var(--space-5);
}

.bark-dashboard-hero {
    align-items: stretch;
    background: var(--banner);
    border-radius: var(--radius-panel);
    box-shadow: var(--shadow-card);
    color: #fff;
    display: grid;
    gap: var(--space-6);
    grid-template-columns: minmax(0, 1.1fr) minmax(200px, 0.7fr) minmax(280px, 0.9fr);
    overflow: hidden;
    padding: var(--space-5) var(--space-6);
}

.bark-dashboard-hero .bark-section-kicker {
    color: color-mix(in srgb, #fff 62%, transparent);
}

.bark-dashboard-hero h2 {
    font: 800 26px/1.15 var(--logo-font);
    letter-spacing: 0;
    margin: 0;
}

.bark-dashboard-hero__value {
    color: #fff;
    font: 600 44px/1 var(--mono);
    letter-spacing: 0;
    margin-top: var(--space-3);
}

.bark-dashboard-hero__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-4);
}

.bark-dashboard-hero__chips span {
    background: color-mix(in srgb, var(--accent) 22%, transparent);
    border: 1px solid color-mix(in srgb, #fff 10%, transparent);
    border-radius: var(--radius-control);
    color: color-mix(in srgb, #fff 86%, transparent);
    font: 700 12px/1 var(--sans);
    padding: var(--space-2) var(--space-3);
}

.bark-dashboard-hero__side {
    align-items: center;
    border-left: 1px solid color-mix(in srgb, #fff 14%, transparent);
    display: grid;
    gap: var(--space-5);
    grid-template-columns: 108px minmax(0, 1fr);
    padding-left: var(--space-6);
}

.bark-dashboard-hero__side p {
    color: color-mix(in srgb, #fff 74%, transparent);
    font-size: 14px;
    margin: 0 0 var(--space-2);
}

.bark-dashboard-hero__side strong {
    color: #fff;
}

.bark-dashboard-ring {
    align-items: center;
    border: 10px solid color-mix(in srgb, var(--accent) 42%, transparent);
    border-radius: 999px;
    display: flex;
    flex-direction: column;
    height: 108px;
    justify-content: center;
    width: 108px;
}

.bark-dashboard-ring strong {
    font: 600 24px/1 var(--mono);
}

.bark-dashboard-ring span {
    color: color-mix(in srgb, #fff 70%, transparent);
    font-size: 12px;
}

.bark-kpi-grid {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.bark-kpi-grid--compact {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.bark-kpi-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-panel);
    box-shadow: var(--shadow-card);
    display: grid;
    gap: var(--space-1);
    min-height: 78px;
    padding: var(--space-3) var(--space-4);
    text-align: left;
    align-content: center;
}

.bark-kpi-card span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.bark-kpi-card strong {
    color: var(--ink);
    font: 600 28px/1 var(--mono);
}

.bark-kpi-card--button {
    cursor: pointer;
}

.bark-kpi-card--active {
    border-color: var(--accent-line);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.bark-dashboard-grid {
    /* карточки ряда равной высоты (stretch); внутри контент прижат кверху
       (align-content:start у панелей), а длинные списки скроллятся в своей зоне */
    display: grid;
    gap: var(--space-4);
    grid-template-columns: minmax(0, 1.4fr) minmax(320px, 0.8fr);
}

.bark-analytics-panel {
    align-content: start; /* не растягивать ряды при выравнивании высоты с соседом */
    display: grid;
    gap: var(--space-4);
    padding: var(--space-5);
}

.bark-panel-head {
    align-items: center;
    display: flex;
    gap: var(--space-4);
    justify-content: space-between;
}

.bark-panel-head--table {
    border-bottom: 1px solid var(--line);
    padding: var(--space-4);
}

.bark-flow-list,
.bark-dept-list,
.bark-check-list {
    display: grid;
    gap: var(--space-3);
}

.bark-flow-row {
    align-items: center;
    display: grid;
    gap: var(--space-3);
    grid-template-columns: 58px minmax(0, 1fr) 92px;
}

.bark-flow-row__label,
.bark-flow-row__meta {
    color: var(--muted);
    font: 600 12px/1.2 var(--mono);
}

.bark-flow-row__meta {
    text-align: right;
}

.bark-flow-bars {
    display: grid;
    gap: var(--space-1);
}

.bark-flow-bar {
    border-radius: var(--radius-control);
    display: block;
    height: var(--space-2);
    min-width: 4px;
}

.bark-flow-bar--ok { background: var(--ok); }
.bark-flow-bar--bad { background: var(--bad); }
.bark-flow-bar--info { background: var(--info); }

/* ---- Flow-chart legend (colour → meaning key) ---- */
.bark-flow-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-bottom: var(--space-2);
}
.bark-flow-legend__item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--muted);
    font: 600 12px/1 var(--sans);
}
.bark-flow-swatch {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    flex: none;
}

.bark-check-summary,
.bark-pill-stack,
.bark-row-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.bark-issue-row {
    align-items: center;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    color: var(--ink2);
    display: grid;
    gap: var(--space-3);
    grid-template-columns: auto minmax(0, 1fr);
    padding: var(--space-3);
    text-align: left;
}

.bark-issue-row:hover {
    background: var(--surface-2);
}

.bark-issue-row strong,
.bark-issue-row small {
    display: block;
}

.bark-issue-row small,
.bark-muted-line {
    color: var(--muted);
    font-size: 12px;
    margin-top: var(--space-1);
}

.bark-gender-meter {
    background: var(--chip);
    border-radius: 999px;
    display: flex;
    height: 12px;
    overflow: hidden;
}

.bark-gender-meter span {
    display: block;
    min-width: 0;
}

.bark-gender-meter__female { background: var(--female); }
.bark-gender-meter__male { background: var(--male); }
.bark-gender-meter__unknown { background: var(--faint); }

.bark-gender-list {
    display: grid;
    gap: var(--space-2);
}

.bark-gender-list span,
.bark-dept-row {
    align-items: center;
    color: var(--muted);
    display: flex;
    font-size: 13px;
    gap: var(--space-3);
    justify-content: space-between;
}

.bark-gender-list strong,
.bark-dept-row strong {
    color: var(--ink);
}

.bark-cell-main,
.bark-cell-stack {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.bark-cell-main strong {
    color: var(--ink);
    font-weight: 500; /* имена — medium, по указанию Владимира */
}

.bark-cell-stack span {
    color: var(--ink);
    font-weight: 500; /* данные (телефон/дата): RHD плотный, 500 = спокойный medium */
}

.bark-cell-main span,
.bark-cell-stack small {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.35;
}

/* mono шире Onest — длинные email не ломаем посреди адреса, а обрезаем с «…» */
.bark-cell-stack.bark-data small {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bark-mobile-list {
    display: none;
}

.bark-mobile-employee {
    border-top: 1px solid var(--line);
    display: grid;
    gap: var(--space-3);
    padding: var(--space-4);
}

.bark-mobile-employee__head {
    align-items: flex-start;
    display: flex;
    gap: var(--space-3);
    justify-content: space-between;
}

.bark-mobile-employee__head strong,
.bark-mobile-employee__head span,
.bark-mobile-employee__body span {
    display: block;
}

.bark-mobile-employee__head strong {
    color: var(--ink);
}

.bark-mobile-employee__head span,
.bark-mobile-employee__body {
    color: var(--muted);
    font-size: 13px;
}

.bark-mobile-employee__body {
    display: grid;
    gap: var(--space-1);
}

.bark-transfer-path {
    align-items: center;
    display: grid;
    gap: var(--space-1);
}

.bark-transfer-path span:first-child {
    color: var(--muted);
    font-size: 12px;
}

.bark-transfer-path span:last-child {
    color: var(--ink);
    font-weight: 700;
}

.bark-transfer-path span:last-child::before {
    color: var(--accent);
    content: "-> ";
}

.bark-check-item {
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-panel);
    box-shadow: var(--shadow-card);
    display: grid;
    gap: var(--space-4);
    grid-template-columns: minmax(0, 1fr) auto;
    padding: var(--space-4);
}

.bark-check-item__main {
    display: grid;
    gap: var(--space-2);
    min-width: 0;
}

/* плашка приоритета — компактный чип слева, а не полоса во всю карточку
   (в грид-контейнере inline-flex по умолчанию растягивается на всю колонку) */
.bark-check-item__main > .bark-pill { justify-self: start; }

.bark-check-item h3 {
    color: var(--ink);
    font: 700 15px/1.3 var(--sans);
    margin: 0;
}

.bark-check-item p,
.bark-check-item small {
    color: var(--muted);
    margin: 0;
}

.bark-empty {
    align-items: center;
    background: var(--surface);
    border: 1px dashed var(--line);
    border-radius: var(--radius-panel);
    color: var(--muted);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    justify-content: center;
    min-height: 116px;
    padding: var(--space-5);
    text-align: center;
}
.bark-empty p { margin: 0; }

.bark-empty--error {
    background: var(--bad-soft);
    border-color: color-mix(in srgb, var(--bad) 34%, transparent);
    color: var(--bad);
}

.bark-skeleton-grid {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.bark-skeleton {
    background: linear-gradient(90deg, var(--surface) 0%, var(--surface-2) 45%, var(--surface) 90%);
    border: 1px solid var(--line);
    border-radius: var(--radius-panel);
    height: 112px;
    overflow: hidden;
}

@media (max-width: 900px) {
    .bark-layout {
        display: block;
    }

    .bark-sidebar {
        bottom: 0;
        box-shadow: var(--shadow-pop);
        left: 0;
        overflow-y: auto;
        position: fixed;
        top: 0;
        transform: translateX(-105%);
        transition: transform 180ms ease, visibility 0s linear 180ms;
        visibility: hidden;
        width: min(82vw, 320px);
        z-index: 50;
    }

    .bark-sidebar--open {
        transform: translateX(0);
        transition: transform 180ms ease;
        visibility: visible;
    }

    .bark-nav-backdrop {
        display: block;
    }

    .bark-mobile-nav-button {
        display: inline-flex;
    }

    .bark-sidebar__group {
        display: grid;
        gap: 2px;
    }

    .bark-sidebar__group-label {
        flex-basis: 100%;
    }

    .bark-sidebar__item {
        width: 100%;
    }

    /* мобильный аппбар: [☰] [Заголовок…] … [Выйти] в одну строку, без переносов и наездов */
    .bark-topbar {
        align-items: center;
        flex-direction: row;
        gap: var(--space-3);
        min-height: 60px;
        padding: var(--space-3) var(--space-4);
        position: sticky;
        top: 0;
        z-index: 30;
    }

    .bark-topbar .bark-user-chip {
        display: none;
    }

    .bark-topbar__title {
        align-items: center;
        display: flex;
        flex: 1 1 auto;
        gap: var(--space-3);
        min-width: 0;
    }

    .bark-topbar__title .bark-section-kicker {
        display: none; /* группу раздела на мобиле прячем — экономим высоту */
    }

    .bark-topbar__title .bark-h1 {
        grid-column: auto;
        font-size: 19px;
        line-height: 1.2;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .bark-topbar__meta {
        flex: 0 0 auto;
        justify-content: flex-end;
        width: auto;
    }

    .bark-page {
        padding: var(--space-4);
    }

    .bark-dashboard-hero,
    .bark-dashboard-grid {
        grid-template-columns: 1fr;
    }

    .bark-dashboard-hero__side {
        border-left: 0;
        border-top: 1px solid color-mix(in srgb, #fff 14%, transparent);
        padding-left: 0;
        padding-top: var(--space-5);
    }

    .bark-kpi-grid,
    .bark-kpi-grid--compact,
    .bark-skeleton-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bark-employee-drawer__hero {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .bark-employee-drawer__actions {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }

    .bark-employee-drawer .grid.grid-cols-2,
    .bark-employee-drawer .grid.grid-cols-3,
    .bark-transfer-modal .grid.grid-cols-2,
    .bark-transfer-modal .grid.grid-cols-3 {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 640px) {
    .bark-page-title,
    .bark-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .bark-filter-grid {
        grid-template-columns: 1fr;
    }

    .bark-dashboard-hero {
        padding: var(--space-5);
    }

    .bark-dashboard-hero__value {
        font-size: 42px;
    }

    .bark-dashboard-hero__side {
        grid-template-columns: 1fr;
    }

    .bark-kpi-grid,
    .bark-kpi-grid--compact,
    .bark-skeleton-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bark-kpi-card {
        min-height: 64px;
    }

    .bark-data-table:not(.bark-data-table--transfers) {
        display: none;
    }

    .bark-mobile-list {
        display: grid;
    }

    .bark-data-table--transfers {
        min-width: 760px;
    }

    .bark-table-panel {
        overflow-x: auto;
    }

    .bark-check-item {
        align-items: stretch;
        grid-template-columns: 1fr;
    }

    .bark-flow-row {
        grid-template-columns: 52px minmax(0, 1fr);
    }

    .bark-flow-row__meta {
        grid-column: 2;
        text-align: left;
    }

    .fixed.inset-0 > .relative {
        left: auto;
        max-width: calc(100vw - 24px);
        top: 12px;
        width: calc(100vw - 24px) !important;
    }

    .bark-drawer-backdrop {
        padding: var(--space-3);
    }

    .bark-employee-drawer {
        width: calc(100vw - 24px);
    }

    .bark-employee-drawer__hero,
    .bark-employee-drawer__body {
        padding: var(--space-4);
    }

    .bark-history-summary {
        grid-template-columns: 1fr;
    }

    .bark-history-item__top,
    .bark-form-footer {
        align-items: stretch;
        flex-direction: column;
    }
}

/* ---- Dashboard charts (Looker-style): line charts, donuts, dept table ---- */
.bark-panel--wide { grid-column: 1 / -1; }

.bark-chart-panel { min-width: 0; }
.bark-chart-legend {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}
.bark-chart-legend span {
    align-items: center;
    color: var(--muted);
    display: inline-flex;
    font: 600 12px/1 var(--sans);
    gap: var(--space-2);
}
.bark-chart-legend i {
    border-radius: 2px;
    display: inline-block;
    height: 10px;
    width: 10px;
}
.bark-linechart {
    display: block;
    height: 160px;
    margin-top: var(--space-3);
    overflow: visible;
    width: 100%;
}
.bark-chart-xaxis {
    color: var(--faint);
    display: flex;
    font: 500 10.5px/1 var(--mono);
    justify-content: space-between;
    margin-top: var(--space-2);
}
.bark-chart-xaxis span {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bark-chart-xaxis span:first-child { text-align: left; }
.bark-chart-xaxis span:last-child { text-align: right; }

.bark-donut-wrap {
    align-items: center;
    display: flex;
    gap: var(--space-5);
    margin-top: var(--space-3);
}
.bark-donut {
    display: grid;
    flex: none;
    height: 116px;
    place-items: center;
    position: relative;
    width: 116px;
    border-radius: 50%;
}
.bark-donut::before {
    background: var(--surface);
    border-radius: 50%;
    content: "";
    inset: 25%;
    position: absolute;
}
.bark-donut span {
    color: var(--ink);
    font: 600 22px/1 var(--mono);
    position: relative;
}
.bark-donut-legend {
    display: grid;
    gap: var(--space-2);
    list-style: none;
    margin: 0;
    min-width: 0;
    padding: 0;
}
.bark-donut-legend li {
    align-items: center;
    color: var(--ink2);
    display: flex;
    font-size: 13px;
    gap: var(--space-2);
}
.bark-donut-legend i {
    border-radius: 3px;
    flex: none;
    height: 11px;
    width: 11px;
}
.bark-donut-legend strong { color: var(--ink); }

.bark-dept-table-wrap { margin-top: var(--space-2); overflow-x: auto; }
.bark-dept-table {
    border-collapse: collapse;
    font-size: 13px;
    width: 100%;
}
.bark-dept-table th {
    border-bottom: 1px solid var(--line);
    color: var(--muted);
    font: 700 11px/1 var(--sans);
    letter-spacing: 0.02em;
    padding: var(--space-2) var(--space-3);
    text-align: right;
    text-transform: uppercase;
}
.bark-dept-table th:first-child { text-align: left; }
.bark-dept-table td {
    border-bottom: 1px solid var(--line-2);
    color: var(--ink2);
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
    padding: var(--space-2) var(--space-3);
    text-align: right;
}
.bark-dept-table td:first-child { color: var(--ink); font-family: var(--sans); text-align: left; }
.bark-dept-table tbody tr:last-child td { border-bottom: 0; }
.bark-dept-table tbody tr:hover { background: var(--surface-2); }

/* ---- Row-action icon buttons: larger, clearer, square ---- */
.bark-btn--action { padding: 0; width: 40px; height: 40px; min-height: 40px; flex: none; }
.bark-btn--action .bark-ico { width: 20px; height: 20px; flex: none; color: var(--ink2); }
.bark-btn--action:hover .bark-ico { color: var(--accent); }
.bark-row-actions { flex-wrap: nowrap; }

/* Найти / Сбросить — одинаковая ширина, ровно ---- */
.bark-filter-actions { gap: var(--space-2); }
.bark-filter-actions .bark-btn { flex: 1 1 0; min-width: 96px; }

/* ---- Clickable telegram usernames ---- */
.bark-tg-link { color: var(--accent); text-decoration: none; }
.bark-tg-link:hover { text-decoration: underline; }

/* ---- Theme switch moved into the sidebar, full width above the footer ---- */
.bark-sidebar__theme {
    margin: 0;
    padding: 0;
}
.bark-theme-switch--full {
    display: flex;
    width: 100%;
}
.bark-theme-switch--full button {
    flex: 1 1 0;
    justify-content: center;
}
.bark-sidebar__footer {
    margin-top: 0; /* близость к тумблеру задаёт gap нижнего блока */
    padding-top: var(--space-3);
    border-top: 1px solid var(--line);
}
/* barkhr wordmark colour per guideline: bark = ink, hr = product colour */
.bark-sidebar__footer strong { color: var(--ink2); font-weight: 800; }
.bark-sidebar__footer .bark-logo__module { color: var(--logo-module); }

/* ---- Chart hover tooltip (custom popup with values) ---- */
.bark-chart-hover { position: relative; }
.bark-chart-guide {
    position: absolute; top: 12px; bottom: 10px; width: 1px;
    background: var(--line); pointer-events: none;
}
.bark-chart-dot {
    position: absolute; width: 10px; height: 10px; border-radius: 50%;
    border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--line);
    transform: translate(-50%, -50%); pointer-events: none; z-index: 4;
}
.bark-chart-tip {
    position: absolute; top: -6px; transform: translateX(-50%);
    background: var(--raised); color: var(--ink); border: 1px solid var(--line); border-radius: 8px;
    padding: 8px 10px; font-size: 12px; line-height: 1.3; white-space: nowrap;
    pointer-events: none; z-index: 6; display: grid; gap: 3px;
    box-shadow: var(--shadow-pop);
}
.bark-chart-tip--right { transform: translateX(-92%); }
.bark-chart-tip strong { font-size: 11px; font-weight: 600; opacity: 0.7; }
.bark-chart-tip span { display: flex; align-items: center; gap: 6px; }
.bark-chart-tip i { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.bark-chart-tip b { margin-left: auto; padding-left: 10px; font-weight: 700; }

/* ---- Employee card: summary tab ---- */
.bark-summary { display: grid; gap: var(--space-5); padding-top: var(--space-2); }
.bark-summary-stats {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}
.bark-summary-stat {
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-panel);
    display: grid;
    gap: var(--space-1);
    padding: var(--space-3) var(--space-4);
}
.bark-summary-stat span { color: var(--muted); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; }
.bark-summary-stat strong { color: var(--ink); font: 600 18px/1.2 var(--mono); }
.bark-summary-cols {
    display: grid;
    gap: var(--space-4) var(--space-6);
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.bark-summary-list { display: grid; gap: 0; margin: 0; }
.bark-summary-list > div {
    align-items: baseline;
    border-bottom: 1px solid var(--line-2);
    display: flex;
    gap: var(--space-4);
    justify-content: space-between;
    padding: var(--space-2) 0;
}
.bark-summary-list > div:last-child { border-bottom: 0; }
.bark-summary-list dt { color: var(--muted); font-size: 13px; margin: 0; flex: none; }
.bark-summary-list dd { color: var(--ink); font-size: 13px; font-weight: 500; margin: 0; text-align: right; min-width: 0; overflow-wrap: anywhere; }

/* ---- Сверка с чатом («источник правды») ---- */
/* Статусные цвета — только токены (--bad/--warn/--ok/--info/--banner), тинты через color-mix:
   блок автоматически следует тёмной теме. */
.bark-recon-badge{margin-left:auto;background:var(--bad);color:#fff;font:600 11px/1.4 var(--mono);
  border-radius:999px;padding:1px 7px;min-width:20px;text-align:center;font-variant-numeric:tabular-nums}
.bark-recon-intro{color:var(--muted);font-size:13px;max-width:70ch;margin:0 0 var(--space-3,12px)}
.bark-recon-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:var(--space-3,12px)}
.bark-recon-chip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);
  background:var(--surface);border-radius:999px;padding:6px 10px;cursor:pointer;font-size:12.5px;font-weight:600;
  color:var(--ink);transition:box-shadow .12s,border-color .12s}
.bark-recon-chip:hover{box-shadow:var(--shadow-card)}
.bark-recon-chip b{font-family:var(--mono);font-weight:600}
.bark-recon-chip:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.bark-recon-chip b{font-variant-numeric:tabular-nums;background:var(--field);color:var(--ink);border-radius:999px;padding:1px 7px;font-size:12px}
.bark-recon-chip.is-active{border-color:currentColor;box-shadow:inset 0 0 0 1px currentColor}
.bark-recon-chip.tier-crit{color:var(--bad)}.bark-recon-chip.tier-warn{color:var(--warn)}
.bark-recon-chip.tier-ok{color:var(--ok)}.bark-recon-chip.tier-info{color:var(--info)}
.bark-recon-chip.tier-violet{color:var(--banner)}
.bark-recon-chip .lbl{color:var(--ink)}
.bark-recon-toolbar{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.bark-recon-toolbar input{flex:1;min-width:180px;max-width:340px}
.bark-recon-tablewrap{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-panel,12px);overflow-x:auto}
.bark-recon-table{width:100%;border-collapse:collapse;font-size:13px}
.bark-recon-table thead th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--muted);font-weight:700;padding:10px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
.bark-recon-table td{padding:11px 14px;border-bottom:1px solid color-mix(in srgb, var(--line) 55%, transparent);vertical-align:top}
.bark-recon-table tbody tr:last-child td{border-bottom:0}
.bark-recon-table tbody tr:hover{background:var(--field)}
.bark-recon-table td.who{border-left:3px solid var(--line);font-weight:600;min-width:160px}
.bark-recon-table tr.tier-crit td.who{border-left-color:var(--bad)}
.bark-recon-table tr.tier-warn td.who{border-left-color:var(--warn)}
.bark-recon-table tr.tier-ok td.who{border-left-color:var(--ok)}
.bark-recon-table tr.tier-info td.who{border-left-color:var(--info)}
.bark-recon-table tr.tier-violet td.who{border-left-color:var(--banner)}
.bark-recon-table td.who small{display:block;font-size:11px;color:var(--faint);font-weight:500;margin-top:1px}
.bark-recon-tag{display:inline-block;font-size:10.5px;font-weight:700;padding:2px 9px;border-radius:999px;white-space:nowrap}
.bark-recon-tag.tier-crit{background:color-mix(in srgb, var(--bad) 13%, var(--surface));color:var(--bad)}
.bark-recon-tag.tier-warn{background:color-mix(in srgb, var(--warn) 15%, var(--surface));color:var(--warn)}
.bark-recon-tag.tier-ok{background:color-mix(in srgb, var(--ok) 13%, var(--surface));color:var(--ok)}
.bark-recon-tag.tier-info{background:color-mix(in srgb, var(--info) 13%, var(--surface));color:var(--info)}
.bark-recon-tag.tier-violet{background:color-mix(in srgb, var(--banner) 13%, var(--surface));color:var(--banner)}
.bark-recon-table td.diff{min-width:200px}
.bark-recon-table td.diff .fld{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.bark-recon-table td.diff .from{color:var(--muted)}
.bark-recon-table td.diff .arr{color:var(--faint)}
.bark-recon-table td.diff .to{color:var(--ink);font-weight:700}
.bark-recon-table td.ev{color:var(--muted);font-size:12.5px;max-width:320px}
.bark-recon-table td.ev small{display:block;font-size:11px;color:var(--faint);margin-top:3px}
.bark-recon-table td.act{white-space:nowrap;text-align:right}
.bark-recon-table td.act .bark-recon-ok{color:var(--ok);border-color:color-mix(in srgb, var(--ok) 35%, var(--line))}
.bark-recon-table td.act button+button{margin-left:6px}
.bark-recon-note{margin:0 0 var(--space-2,8px);color:var(--muted);font-size:12.5px}

/* ---- Структура компании ---- */
.bark-org-actions{display:flex;align-items:center;gap:var(--space-3,12px);flex-wrap:wrap}
.bark-org-mode{display:inline-flex;background:var(--field);border:1px solid var(--line);border-radius:var(--radius-control,8px);padding:2px;gap:2px}
.bark-org-mode__btn{border:0;background:transparent;color:var(--muted);font:600 13px/1 var(--sans);padding:7px 12px;border-radius:6px;cursor:pointer}
.bark-org-mode__btn.is-active{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-card)}
.bark-org-mode__btn:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.bark-org-toolbar{display:flex;gap:var(--space-3,12px);align-items:center;justify-content:space-between;flex-wrap:wrap}
.bark-org-toolbar input{flex:1;min-width:220px;max-width:420px}
.bark-org-toolbar__group{display:flex;gap:8px}

.bark-org-tree{display:grid;gap:var(--space-2,8px)}
.bark-org-node{position:relative}
.bark-org-children{margin-left:34px;padding-left:14px;border-left:1px solid var(--line);display:grid;gap:var(--space-1,4px);margin-top:var(--space-1,4px)}
.bark-org-card{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-panel,12px);padding:8px 12px;min-height:52px}
.bark-org-card.is-branch{border-color:var(--accent-line,var(--line))}
.bark-org-card.is-match{box-shadow:inset 0 0 0 2px var(--accent)}
.bark-org-toggle{flex:none;width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;border:0;background:transparent;color:var(--muted);border-radius:6px;cursor:pointer;padding:0}
.bark-org-toggle:hover{background:var(--field);color:var(--ink)}
.bark-org-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.bark-org-toggle .bark-ico{width:16px;height:16px;flex:none}
.bark-org-toggle--leaf{cursor:default}
.bark-org-avatar{flex:none;width:32px;height:32px;border-radius:50%;background:var(--accent-soft);color:var(--accent);font:700 12px/32px var(--sans);text-align:center;letter-spacing:.02em}
.bark-org-node--d0 > .bark-org-card .bark-org-avatar{background:var(--accent);color:#fff}
.bark-org-info{min-width:0;display:grid;gap:1px}
.bark-org-info strong{font-size:13.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bark-org-info span{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bark-org-count{flex:none;margin-left:auto;background:var(--accent-soft);color:var(--accent);font:600 11.5px/1 var(--mono);font-variant-numeric:tabular-nums;border-radius:999px;padding:5px 9px}
.bark-org-count--soft{background:var(--field);color:var(--muted)}

.bark-org-depts{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--space-4,16px);align-items:start}
.bark-org-dept{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-panel,12px);overflow:hidden}
.bark-org-dept header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line);background:var(--field)}
.bark-org-dept h3{margin:0;font:700 14px/1.2 var(--sans);color:var(--ink)}
.bark-org-dept ul{list-style:none;margin:0;padding:6px 8px;display:grid;gap:2px}
.bark-org-dept li{display:flex;align-items:center;gap:10px;padding:6px;border-radius:8px}
.bark-org-dept li:hover{background:var(--field)}
.bark-org-dept li.is-lead .bark-org-avatar{background:var(--accent);color:#fff}

.bark-org-printhead{display:none}

/* ---- Печать структуры (Экспорт в PDF) ---- */
@media print {
    @page{size:A4;margin:12mm}
    [data-print="structure"] .bark-sidebar,
    [data-print="structure"] .bark-topbar,
    [data-print="structure"] .bark-nav-backdrop,
    [data-print="structure"] .bark-org-controls{display:none !important}
    [data-print="structure"] .bark-main{margin:0 !important;width:100% !important}
    [data-print="structure"] .bark-page{padding:0 !important}
    [data-print="structure"]{background:#fff !important}
    [data-print="structure"] .bark-org-printhead{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:0 0 10px;margin-bottom:12px;border-bottom:2px solid #16386e;font:400 11px/1.4 var(--sans);color:#5d7178}
    [data-print="structure"] .bark-org-printhead strong{font:800 18px/1 var(--sans);color:#122a31}
    [data-print="structure"] .bark-org-card,
    [data-print="structure"] .bark-org-dept li{break-inside:avoid;page-break-inside:avoid}
    [data-print="structure"] .bark-org-dept{break-inside:avoid;page-break-inside:avoid;border:1px solid #d7e0e3}
    [data-print="structure"] .bark-org-card{border:1px solid #d7e0e3;background:#fff;min-height:auto;padding:5px 10px}
    [data-print="structure"] .bark-org-children{border-left-color:#c3ced2}
    [data-print="structure"] .bark-org-toggle{display:none}
    [data-print="structure"] .bark-org-children{margin-left:22px}
    [data-print="structure"] .bark-org-avatar{width:24px;height:24px;line-height:24px;font-size:10px;-webkit-print-color-adjust:exact;print-color-adjust:exact}
    [data-print="structure"] .bark-org-count{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}


/* ---- Мобильные уточнения (аудит) ---- */
@media (max-width: 640px) {
    /* 16px в полях отключает автозум iOS Safari */
    input, select, textarea {
        font-size: 16px !important;
    }
}

@media (max-width: 900px) {
    /* тач-мишени не меньше 40px */
    .bark-btn--sm,
    .bark-btn.bark-btn--sm,
    .bark-btn--ghost.bark-btn--sm {
        min-height: 40px;
    }
    .bark-theme-switch button {
        min-height: 40px;
        min-width: 40px;
    }
}

/* ---- Числа в таблицах — табличные цифры везде ---- */
td, th {
    font-variant-numeric: tabular-nums;
}

/* ---- Ошибочные состояния: red-палитра Tailwind → статусные токены ---- */
.text-red-500, .text-red-600, .text-red-700 {
    color: var(--bad) !important;
}
.bg-red-50, .bg-red-100 {
    background: color-mix(in srgb, var(--bad) 10%, var(--surface)) !important;
}
.border-green-200 {
    border-color: color-mix(in srgb, var(--ok) 32%, transparent) !important;
}
.bg-green-100 {
    background: color-mix(in srgb, var(--ok) 12%, var(--surface)) !important;
}

/* ---- Тосты: непрозрачная подложка поверх любой темы ---- */
.bark-toast, .notification-item {
    box-shadow: var(--shadow-pop);
}

/* ---- Аудит: формы и мобильные фильтры ---- */
.bark-req { color: var(--bad); font-weight: 700; }

/* чекбокс-список должностей (вместо select multiple) */
.bark-checklist {
    background: var(--field);
    border: 1px solid var(--line);
    border-radius: var(--radius-control, 8px);
    display: grid;
    gap: 2px;
    max-height: 180px;
    overflow-y: auto;
    padding: 6px;
}
.bark-checklist__item {
    align-items: center;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    font-size: 13px;
    gap: 8px;
    margin: 0 !important;
    padding: 5px 8px;
}
.bark-checklist__item:hover { background: var(--surface); }
.bark-checklist__item input { flex: none; margin: 0; }
.bark-checklist__item span { color: var(--ink); }

/* кнопка «Фильтры» видна только на мобиле */
.bark-filter-toggle { display: none; margin-bottom: var(--space-2); }
@media (max-width: 640px) {
    .bark-filter-toggle { display: inline-flex; }
    .bark-filter-grid--hidden-mobile { display: none !important; }
}

/* кликабельная зона кнопки очистки поиска */
.bark-focus-ring { min-width: 28px; min-height: 28px; display: inline-flex; align-items: center; justify-content: center; }

/* Тёмная тема: тёмный текст на светлом акценте кнопок (перебиваем #fff !important выше) */
:root[data-theme="dark"] button.bg-primary,
:root[data-theme="dark"] .bark-btn {
    color: #062a2e !important;
}
:root[data-theme="dark"] .bark-btn--ghost,
:root[data-theme="dark"] .bark-btn.bark-btn--ghost,
:root[data-theme="dark"] button.bg-primary.bark-btn--ghost {
    color: var(--ink2) !important;
}


/* ---- HR-метрики дашборда ---- */
.bark-mini-kpis {
    border-top: 1px solid var(--line-2);
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    padding-top: var(--space-4);
}
.bark-mini-kpi { display: grid; gap: 2px; }
.bark-mini-kpi span { color: var(--muted); font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.bark-mini-kpi strong { color: var(--ink); font: 600 20px/1.2 var(--mono); font-variant-numeric: tabular-nums; }

.bark-subcharts {
    border-top: 1px solid var(--line-2);
    display: grid;
    gap: var(--space-5);
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    padding-top: var(--space-4);
}
.bark-linechart--sub { height: 110px; }

.bark-hbars { display: grid; gap: 6px; margin-top: var(--space-2); }
.bark-hbar { align-items: center; display: grid; gap: 10px; grid-template-columns: minmax(90px, 150px) 1fr 32px; }
.bark-hbar__label { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bark-hbar__track { background: var(--field); border-radius: 999px; height: 8px; overflow: hidden; }
.bark-hbar__track i { background: var(--accent); border-radius: 999px; display: block; height: 100%; }
.bark-hbar b { color: var(--ink); font: 600 12.5px var(--mono); font-variant-numeric: tabular-nums; text-align: right; }
.bark-subcharts .bark-hbar__track i { background: var(--bad); }

.bark-initiators { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--space-3); }
.bark-initiators b { font-variant-numeric: tabular-nums; }

.bark-demography {
    align-items: start;
    display: grid;
    gap: var(--space-5);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.bark-agebars__head { align-items: baseline; display: flex; gap: 10px; justify-content: space-between; margin-bottom: var(--space-1); }

@media (max-width: 900px) {
    .bark-subcharts, .bark-demography { grid-template-columns: 1fr; }
}


/* ---- Адаптация: тренеры и наставники ---- */
.bark-adaptation-panel { grid-column: 1 / -1; }
.bark-subcharts--flat { border-top: 0; padding-top: 0; }
.bark-hbar--adapt { grid-template-columns: minmax(90px, 150px) 1fr 32px 72px; }
.bark-hbar--adapt .bark-pill { justify-content: center; }
.bark-adaptation-panel .bark-hbar__track i { background: var(--accent); }
.bark-adaptation {
    display: grid;
    gap: var(--space-4);
}
.bark-adaptation-table {
    min-width: 980px;
}
.bark-adaptation-table th:last-child,
.bark-adaptation-table td:last-child {
    width: 54px;
}
.bark-adaptation-progress {
    display: grid;
    gap: 6px;
    min-width: 150px;
}
.bark-adaptation-progress__bar {
    background: var(--field);
    border-radius: 999px;
    height: 8px;
    overflow: hidden;
}
.bark-adaptation-progress__bar i {
    background: var(--accent);
    border-radius: inherit;
    display: block;
    height: 100%;
    min-width: 6px;
}
.bark-adaptation-progress small {
    color: var(--muted);
    font-size: 12px;
}
.bark-adaptation-checks {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-width: 300px;
}
/* в мобильной карточке чипы занимают всю ширину карточки,
   и увеличены до нормального тап-таргета (~44px) — это единственный вход в модалку */
.bark-mobile-adaptation .bark-adaptation-checks { max-width: none; gap: 8px; }
.bark-mobile-adaptation .bark-adaptation-check { height: 40px; min-width: 48px; padding: 0 12px; font-size: 13px; }
.bark-mobile-adaptation .bark-mobile-employee__head .bark-pill { margin-left: auto; flex: none; }
.bark-mobile-adaptation .bark-adaptation-progress { display: grid; gap: 4px; }
.bark-adaptation-check {
    align-items: center;
    background: var(--chip);
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--muted);
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 800;
    gap: 4px;
    height: 28px;
    justify-content: center;
    line-height: 1;
    min-width: 34px;
    padding: 0 7px;
    white-space: nowrap;
}
.bark-adaptation-check:hover {
    background: var(--surface);
    border-color: var(--accent-line);
    color: var(--accent);
}
.bark-adaptation-check:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.bark-adaptation-check .bark-ico {
    height: 14px;
    width: 14px;
}
.bark-adaptation-check b {
    font: inherit;
    letter-spacing: 0;
}
.bark-adaptation-check--ok {
    background: var(--ok-soft);
    border-color: color-mix(in srgb, var(--ok) 28%, transparent);
    color: var(--ok-text, var(--ok));
}
.bark-adaptation-check--info {
    background: color-mix(in srgb, var(--info) 13%, transparent);
    border-color: color-mix(in srgb, var(--info) 26%, transparent);
    color: var(--info-text, var(--info));
}
.bark-adaptation-check--warn {
    background: var(--warn-soft);
    border-color: color-mix(in srgb, var(--warn) 28%, transparent);
    color: var(--warn-text, var(--warn));
}
.bark-adaptation-check--neutral {
    background: var(--chip);
    border-color: var(--line);
    color: var(--muted);
}
.bark-adaptation-actions {
    text-align: right;
    white-space: nowrap;
}
.bark-adaptation-card-action {
    vertical-align: middle;
}
.bark-adapt-modal {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-panel);
    box-shadow: var(--shadow-pop);
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 48px);
    max-height: calc(100dvh - 48px);
    max-width: 1040px;
    overflow: hidden;
    width: min(96vw, 1040px);
}
.bark-adapt-modal__head {
    align-items: flex-start;
    background: var(--surface-2);
    border-bottom: 1px solid var(--line);
    display: flex;
    gap: var(--space-4);
    justify-content: space-between;
    padding: var(--space-5);
}
.bark-adapt-modal__title {
    min-width: 0;
}
.bark-adapt-modal__body {
    display: grid;
    gap: var(--space-4);
    overflow: auto;
    padding: var(--space-5);
}
.bark-adapt-modal__summary {
    display: grid;
    gap: var(--space-2);
    /* карточек 3–4 в зависимости от фокуса — растягиваем на всю ширину без дыр */
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.bark-adapt-modal__grid {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.bark-adapt-modal__grid--focused {
    grid-template-columns: 1fr;
}
.bark-adapt-modal__section {
    border: 1px solid var(--line);
    border-radius: 8px;
    min-width: 0;
    padding: var(--space-4);
}
.bark-adapt-modal__section--wide {
    grid-column: 1 / -1;
}
.bark-adapt-modal__section-head {
    align-items: center;
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}
.bark-adapt-modal__section-head h4 {
    font-size: 15px;
    font-weight: 800;
    margin: 0;
}
.bark-adapt-modal__section-head span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}
.bark-adapt-stage-list {
    display: grid;
    gap: var(--space-2);
    list-style: none;
    margin: 0;
    max-height: 360px;
    overflow: auto;
    padding: 0;
}
.bark-adapt-modal-stage {
    border-left: 3px solid var(--line);
    display: grid;
    gap: 6px;
    padding: 8px 0 8px 12px;
}
.bark-adapt-modal-stage > div {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.bark-adapt-modal-stage strong {
    font-size: 13px;
}
.bark-adapt-modal-stage span,
.bark-adapt-modal-stage p {
    color: var(--muted);
    font-size: 12.5px;
}
.bark-adapt-modal-stage p {
    margin: 0;
    white-space: pre-wrap;
}
.bark-adapt-modal-stage--done { border-left-color: var(--ok); }
.bark-adapt-modal-stage--current { border-left-color: var(--accent); }
.bark-adapt-modal-stage--pending { border-left-color: var(--line); }
.bark-adapt-poll-list {
    display: grid;
    gap: var(--space-2);
    max-height: 420px;
    overflow: auto;
}
.bark-adapt-poll {
    border: 1px solid var(--line);
    border-radius: 8px;
    display: grid;
    gap: 8px;
    padding: var(--space-3);
}
.bark-adapt-poll__top {
    align-items: center;
    display: flex;
    gap: var(--space-2);
    justify-content: space-between;
}
.bark-adapt-poll__top strong {
    font-size: 13px;
}
.bark-adapt-poll__top span {
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    padding: 4px 8px;
}
.bark-adapt-poll p {
    color: var(--ink2);
    font-size: 13px;
    margin: 0;
}
.bark-adapt-poll dl {
    display: grid;
    gap: 6px;
    margin: 0;
}
.bark-adapt-poll dl div {
    display: grid;
    gap: 6px;
    grid-template-columns: 82px minmax(0, 1fr);
}
.bark-adapt-poll dt {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}
.bark-adapt-poll dd {
    color: var(--ink);
    font-size: 12.5px;
    margin: 0;
}
.bark-adapt-poll--ok .bark-adapt-poll__top span { background: var(--ok-soft); color: var(--ok-text, var(--ok)); }
.bark-adapt-poll--bad .bark-adapt-poll__top span { background: var(--bad-soft); color: var(--bad-text, var(--bad)); }
.bark-adapt-poll--empty .bark-adapt-poll__top span { background: var(--chip); color: var(--muted); }
.bark-adapt-checklist-days {
    display: grid;
    gap: var(--space-2);
    max-height: 360px;
    overflow: auto;
}
.bark-adapt-day {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px 12px;
}
.bark-adapt-day summary {
    cursor: pointer;
    font-size: 13px;
    font-weight: 800;
}
.bark-adapt-day summary span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    margin-left: 8px;
}
.bark-adapt-answer {
    border-top: 1px solid var(--line-2);
    display: grid;
    gap: 8px;
    grid-template-columns: 72px minmax(0, 1fr);
    padding: 8px 0 0;
    margin-top: 8px;
}
.bark-adapt-answer strong {
    color: var(--muted);
    font-size: 12px;
}
.bark-adapt-answer span {
    color: var(--ink);
    font-size: 12.5px;
    white-space: pre-wrap;
}
.bark-adapt-checkpoints {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}
.bark-adapt-facts {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
}
.bark-adapt-facts div {
    background: var(--field);
    border: 1px solid var(--line-2);
    border-radius: 8px;
    display: grid;
    gap: 4px;
    min-width: 0;
    padding: 10px 12px;
}
.bark-adapt-facts dt {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}
.bark-adapt-facts dd {
    color: var(--ink);
    font-size: 13px;
    font-weight: 700;
    margin: 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
@media (max-width: 900px) {
    .bark-adapt-modal__summary,
    .bark-adapt-modal__grid {
        grid-template-columns: 1fr;
    }
    .bark-adapt-facts {
        grid-template-columns: 1fr;
    }
}

/* сабграфики: компактнее подписи оси, чтобы не толкались в пол-ширины */
.bark-subcharts .bark-chart-xaxis { font-size: 9.5px; }


/* подсказка действия в очереди сверки */
.bark-recon-actions { display: flex; gap: 6px; justify-content: flex-end; }
.bark-recon-hint { color: var(--faint); display: block; font-size: 10.5px; margin-top: 4px; margin-left: auto; max-width: 190px; text-align: right; white-space: normal; /* td.act даёт nowrap — без этого подсказка лезет за край */ }
.bark-recon-table td.act button + button { margin-left: 0; }


/* увольнения по отделам в карточке «Динамика» */
.bark-deptfired { border-top: 1px solid var(--line-2); padding-top: var(--space-4); }
.bark-deptfired .bark-hbars { display: grid; gap: 6px 24px; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); margin-top: var(--space-2); }
.bark-hbars--fired .bark-hbar__track i { background: var(--bad); }


/* средняя колонка хиро: сводка по команде */
.bark-dashboard-hero__mid {
    align-content: center;
    border-left: 1px solid color-mix(in srgb, #fff 14%, transparent);
    display: grid;
    gap: var(--space-3);
    padding-left: var(--space-6);
}
.bark-dashboard-hero__mid > div { display: grid; gap: 2px; }
.bark-dashboard-hero__mid span {
    color: color-mix(in srgb, #fff 62%, transparent);
    font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
}
.bark-dashboard-hero__mid strong { font: 700 18px/1.2 var(--sans); font-variant-numeric: tabular-nums; }

@media (max-width: 900px) {
    .bark-dashboard-hero { grid-template-columns: 1fr; }
    .bark-dashboard-hero__mid { border-left: 0; border-top: 1px solid color-mix(in srgb, #fff 14%, transparent); grid-template-columns: repeat(3, 1fr); padding: var(--space-4) 0 0; }
}


/* ---- Фото сотрудников ---- */
.bark-avatar {
    border-radius: 50%;
    flex: none;
    height: 36px;
    object-fit: cover;
    width: 36px;
}
.bark-avatar--initials {
    background: var(--accent-soft);
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font: 700 12px/1 var(--sans);
}
.bark-avatar--lg { height: 48px; width: 48px; }
.bark-cell-person { align-items: center; display: flex; gap: 10px; min-width: 0; }
.bark-cell-person .bark-cell-main { min-width: 0; }
.bark-org-avatar--img { object-fit: cover; line-height: normal; }
.bark-employee-drawer__head .bark-avatar--lg { margin-right: 12px; }
.bark-employee-avatar--img { object-fit: cover; padding: 0; }


/* зверь-фолбэк (канон barkone: глиф 64% по центру на пастели; контейнеры у нас круглые) */
.bark-avatar--animal {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    overflow: hidden;
}
.bark-avatar--animal img {
    height: 64%;
    object-fit: contain;
    width: 64%;
}


/* ---- Путь в компании (саммари) ---- */
.bark-path { border-top: 1px solid var(--line-2); margin-top: var(--space-4); padding-top: var(--space-4); }
.bark-path__list { display: grid; gap: var(--space-2); margin-top: var(--space-2); }
.bark-path__period { background: var(--field); border-left: 3px solid var(--faint); border-radius: 8px; padding: 10px 12px; }
.bark-path__period.is-open { border-left-color: var(--ok); }
.bark-path__head { align-items: center; display: flex; gap: 10px; justify-content: space-between; }
.bark-path__head strong { font-size: 13.5px; font-variant-numeric: tabular-nums; }
.bark-path__transfers { color: var(--muted); display: grid; font-size: 12px; gap: 2px; margin-top: 6px; }
.bark-path__gap { color: var(--faint); font: 600 11px var(--sans); padding: 0 4px; text-align: center; } /* «перерыв N мес» — кириллица */

/* ---- Повторный приём ---- */
.bark-rehire-box {
    align-items: center;
    background: color-mix(in srgb, var(--ok) 8%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--ok) 30%, var(--line));
    border-radius: var(--radius-panel);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    justify-content: space-between;
    margin-bottom: var(--space-4);
    padding: var(--space-4);
}
.bark-rehire-box__controls { display: flex; gap: var(--space-2); }
.bark-rehire-box__controls input { width: auto; }


/* Документы сотрудника */
.bark-doc-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    list-style: none;
    margin: 0;
    padding: 0;
}
.bark-doc-list__item {
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-panel);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    justify-content: space-between;
    padding: var(--space-3) var(--space-4);
}
.bark-doc-list__info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.bark-doc-list__title {
    background: none;
    border: none;
    color: var(--accent);
    cursor: pointer;
    font: 600 14px/1.3 var(--sans);
    padding: 0;
    text-align: left;
    word-break: break-word;
}
.bark-doc-list__title:hover { text-decoration: underline; }
.bark-doc-list__actions { display: flex; gap: var(--space-2); }
.bark-doc-list__delete { color: var(--bad) !important; }


/* Тосты — поверх любых модалок и скримов (скрим модалок z-60, моб. навигация z-100) */
.bark-toasts { z-index: 300 !important; }


/* ── География команды ── */
.bark-geo-layout {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: 1fr 300px;
}
/* Блок карты — flex-колонка той же высоты, что панель; карта внутри тянется,
   подпись снизу. Так левый и правый блоки совпадают ровно по высоте. */
.bark-geo-map-panel {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 320px);
    min-height: 460px;
    position: relative; /* якорь для .bark-loader--overlay поверх карты */
}
.bark-geo-map {
    border: 1px solid var(--line);
    border-radius: var(--radius-panel);
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    position: relative; /* карта внутри — absolute, чтобы её контент не тянул высоту контейнера */
    width: 100%;
    z-index: 1; /* панели карты не должны перекрывать шапку/модалки */
}
/* Яндекс-карта заполняет контейнер абсолютно — иначе её высота зациклит ResizeObserver */
.bark-geo-map > ymaps,
.bark-geo-map > * { inset: 0; position: absolute; }
.bark-geo-map .leaflet-container { font: inherit; }
/* «пузырь»-маркер города на Яндекс-карте: оранжевый barkHR с белой обводкой */
.bark-geo-dot { background: #f97316; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 1px 4px rgba(0,0,0,.35); cursor: pointer; }
/* Высота как у карты (grid-stretch не ограничивает панель, если её контент выше —
   поэтому задаём явно), внутри flex-колонка со скроллом списка */
.bark-geo-side {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 320px);
    min-height: 460px;
    padding: var(--space-4); /* .bark-panel паддинг не задаёт — добавляем явно */
}
.bark-geo-side__head {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}
.bark-geo-side__title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bark-geo-top__row:focus-visible,
.bark-geo-person:focus-visible,
.bark-geo-nocity:focus-visible,
.bark-geo-back:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}
.bark-geo-side__head .bark-h3 { margin: 0; }
.bark-geo-side__badge {
    background: var(--chip);
    border-radius: 999px;
    color: var(--ink2);
    font: 600 11px/1 var(--mono);
    margin-left: auto;
    padding: var(--space-1) var(--space-2);
}
.bark-geo-back {
    background: var(--chip);
    border: none;
    border-radius: var(--radius-control);
    color: var(--ink2);
    cursor: pointer;
    font: 700 15px/1 var(--sans);
    height: 30px;
    width: 30px;
}
.bark-geo-back:hover { background: color-mix(in srgb, var(--accent) 14%, var(--chip)); }
.bark-geo-top__row { cursor: pointer; border-radius: 8px; }
.bark-geo-top__row:hover { background: var(--chip); }
.bark-geo-nocity {
    align-items: center;
    background: none;
    border: 1px solid var(--faint);
    border-radius: var(--radius-control);
    color: var(--ink2);
    cursor: pointer;
    display: flex;
    flex: 0 0 auto;
    font: 600 13px/1.3 var(--sans);
    gap: var(--space-2);
    justify-content: space-between;
    margin-top: auto; /* всегда прижата к низу панели */
    padding: 10px var(--space-3);
    width: 100%;
}
.bark-geo-nocity:hover { background: var(--chip); }
.bark-geo-people {
    display: flex;
    flex-direction: column;
    gap: 2px;
    list-style: none;
    margin: 0;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 0 4px 0 0; /* буфер справа от скроллбара */
}
.bark-geo-person {
    align-items: center;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    gap: var(--space-2);
    padding: var(--space-2);
}
.bark-geo-person:hover { background: var(--chip); }
.bark-geo-person__ava {
    border-radius: 50%;
    flex: none;
    height: 34px;
    object-fit: cover;
    width: 34px;
}
.bark-geo-person__ava.bark-avatar--animal { align-items: center; display: inline-flex; justify-content: center; overflow: hidden; }
.bark-geo-person__ava.bark-avatar--animal img { height: 70%; width: 70%; }
.bark-geo-person__info { display: flex; flex-direction: column; min-width: 0; }
.bark-geo-person__info strong { color: var(--ink); font: 600 13px/1.25 var(--sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bark-geo-top {
    display: flex;
    flex-direction: column;
    list-style: none;
    margin: 0;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 0 4px 0 0; /* буфер справа от скроллбара */
}
.bark-geo-top li {
    align-items: center;
    border-bottom: 1px solid var(--line);
    display: flex;
    gap: var(--space-2);
    padding: var(--space-2);
}
.bark-geo-top li:last-child { border-bottom: none; }
.bark-geo-top__rank {
    color: var(--ink2);
    flex: none;
    font: 500 12px/1.3 var(--mono);
    font-variant-numeric: tabular-nums;
    min-width: 22px;
    text-align: right;
}
.bark-geo-top__city {
    color: var(--ink);
    font: 500 13px/1.35 var(--sans);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bark-geo-top__country { color: var(--muted); font-size: 11px; }
.bark-geo-top__count {
    color: var(--accent);
    font: 600 13px/1.3 var(--mono);
    font-variant-numeric: tabular-nums;
    margin-left: auto;
}
@media (max-width: 900px) {
    .bark-geo-layout { grid-template-columns: 1fr; }
    .bark-geo-map-panel { height: 52vh; min-height: 360px; }
    /* панель под картой — задаём высоту явно, иначе flex-колонка не даст скролл */
    .bark-geo-side { max-width: 100%; height: 60vh; min-height: 360px; }
}

/* Комбо города с подсказками */
.bark-city-combo { position: relative; }
.bark-city-combo__list {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    box-shadow: var(--shadow-pop);
    list-style: none;
    margin: 4px 0 0;
    max-height: 260px;
    overflow-y: auto;
    padding: 4px;
    position: absolute;
    left: 0;
    right: 0;
    z-index: 40;
}
.bark-city-combo__list li {
    border-radius: 8px;
    color: var(--ink);
    cursor: pointer;
    font: 500 13px/1.3 var(--sans);
    padding: 8px 10px;
}
.bark-city-combo__list li:hover { background: var(--chip); }
.bark-chat-people__head {
    color: var(--muted) !important;
    cursor: default !important;
    font: 600 11px/1.3 var(--sans) !important;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.bark-chat-people__head:hover { background: transparent !important; }
.bark-chat-suggestions {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-soft);
    display: grid;
    gap: 4px;
    margin: 0 0 var(--space-4);
    max-height: 260px;
    overflow: auto;
    padding: 8px;
}
.bark-chat-suggestions__head {
    align-items: center;
    color: var(--muted);
    display: flex;
    font: 700 11px/1.3 var(--sans);
    justify-content: space-between;
    letter-spacing: .04em;
    padding: 4px 6px 6px;
    text-transform: uppercase;
}
.bark-chat-suggestions__head strong {
    background: var(--chip);
    border-radius: 999px;
    color: var(--accent);
    font: 800 12px/1 var(--mono);
    padding: 4px 7px;
}
.bark-chat-suggestions__item {
    background: transparent;
    border: 0;
    border-radius: 8px;
    color: var(--ink);
    cursor: pointer;
    display: grid;
    gap: 2px;
    padding: 9px 10px;
    text-align: left;
}
.bark-chat-suggestions__item:hover { background: var(--chip); }
.bark-chat-suggestions__item span {
    font: 700 13px/1.25 var(--sans);
}
.bark-chat-suggestions__item small {
    color: var(--muted);
    font: 500 12px/1.35 var(--sans);
    overflow-wrap: anywhere;
}


/* ── Оргсхема (d3-org-chart) ── */
.bark-orgchart { position: relative; }
.bark-orgchart-canvas {
    background:
        radial-gradient(color-mix(in srgb, var(--ink2) 14%, transparent) 1px, transparent 1px) 0 0 / 22px 22px,
        var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-panel);
    height: calc(100vh - 330px);
    min-height: 520px;
    overflow: hidden;
    width: 100%;
}
/* SVG всегда заполняет контейнер: CSS-размер главнее атрибутов width/height,
   иначе низ холста остаётся «мёртвой зоной» и схема обрезается */
.bark-orgchart-canvas svg { display: block; height: 100% !important; width: 100% !important; }
.bark-orgchart-canvas .link { stroke: color-mix(in srgb, var(--ink2) 70%, transparent) !important; stroke-width: 1.8px !important; }
.bark-orgchart-tools {
    display: flex;
    gap: var(--space-1);
    position: absolute;
    right: var(--space-3);
    top: var(--space-3);
    z-index: 5;
}
.bark-orgchart-tools button {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    color: var(--ink2);
    cursor: pointer;
    font: 600 13px/1 var(--sans);
    min-height: 34px;
    min-width: 34px;
    padding: 0 var(--space-2);
}
.bark-orgchart-tools button:hover { background: var(--chip); }
.bark-orgchart-hint { margin-top: var(--space-2); }

.bark-orgchart-node {
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .08);
    box-sizing: border-box;
    display: flex;
    gap: 10px;
    height: 100%;
    padding: 12px;
    position: relative;
    width: 100%;
}
.bark-orgchart-node.is-hit {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent);
}
.bark-orgchart-node--company {
    align-items: center;
    /* фиксированный графит: белое лого читается в обеих темах */
    background: #14161d;
    border-color: #2a2d38;
    flex-direction: column;
    gap: 4px;
    justify-content: center;
}
.bark-orgchart-company-logo { color: #fff; font: 800 20px/1 var(--sans); }
.bark-orgchart-company-logo span { color: #e0871f; }
.bark-orgchart-company-sub { color: rgba(255, 255, 255, .75); font: 500 11px/1.2 var(--sans); }
.bark-orgchart-ava {
    border-radius: 50%;
    flex: none;
    height: 44px;
    object-fit: cover;
    width: 44px;
}
.bark-orgchart-ava--animal {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    overflow: hidden;
}
.bark-orgchart-ava--animal img { height: 72%; width: 72%; }
.bark-orgchart-info { min-width: 0; }
.bark-orgchart-name {
    color: var(--ink);
    font: 700 13px/1.25 var(--sans);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bark-orgchart-pos {
    color: var(--ink2);
    font: 500 11px/1.3 var(--sans);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bark-orgchart-dept {
    color: var(--muted);
    font: 500 10px/1.3 var(--sans);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bark-orgchart-badge {
    background: color-mix(in srgb, var(--accent) 14%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
    border-radius: 999px;
    color: var(--accent);
    font: 700 10px/1 var(--sans);
    padding: 3px 7px;
    position: absolute;
    right: 8px;
    top: 8px;
}
.bark-orgchart-toggle {
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--ink2);
    display: inline-flex;
    font: 700 11px/1 var(--sans);
    gap: 3px;
    margin: 0 auto;
    padding: 4px 9px;
    width: max-content;
}
.bark-orgchart-toggle span { color: var(--muted); font-weight: 600; }

@media (max-width: 820px) {
    .bark-orgchart-canvas { height: calc(100vh - 300px); min-height: 420px; }
    .bark-orgchart-tools { flex-wrap: wrap; justify-content: flex-end; left: var(--space-3); }
}

.bark-orgcircles-canvas {
    align-items: center;
    display: flex;
    justify-content: center;
}
.bark-orgcircles-canvas text {
    paint-order: stroke;
    stroke: var(--surface);
    stroke-width: 3px;
    stroke-linejoin: round;
}

@media print {
    .bark-orgchart { display: none !important; }
}


/* История версий мотивации */
.bark-motivation-history { margin-top: var(--space-6); }
.bark-motivation-history__title {
    color: var(--ink);
    font: 700 14px/1.3 var(--sans);
    margin: 0 0 var(--space-3);
}
.bark-motivation-history__type {
    align-items: center;
    color: var(--ink);
    display: inline-flex;
    font: 600 14px/1.3 var(--sans);
    gap: var(--space-2);
}
.bark-motivation-history__current {
    border-color: color-mix(in srgb, var(--ok) 45%, var(--line)) !important;
}


/* Бонус: значение + единица (₽/%) + основание «за что / от чего» */
.bark-bonus-row {
    display: grid;
    gap: var(--space-2);
    grid-template-columns: 140px 76px 1fr;
}
@media (max-width: 640px) {
    .bark-bonus-row {
        grid-template-columns: 1fr 76px;
    }
    .bark-bonus-row input[type="text"] {
        grid-column: 1 / -1;
    }
}


/* Кнопка в состоянии сохранения: спиннер + защита от повторных кликов */
.bark-btn--loading,
button.bark-btn--loading {
    cursor: wait !important;
    opacity: .75;
    pointer-events: none;
}
.bark-btn__spinner {
    animation: bark-spin .7s linear infinite;
    border: 2px solid rgba(255, 255, 255, .35);
    border-radius: 50%;
    border-top-color: #fff;
    display: inline-block;
    flex: none;
    height: 14px;
    width: 14px;
}
@keyframes bark-spin {
    to { transform: rotate(360deg); }
}

/* ── Единый лоадер barkHR: кольцо на бренд-токенах + подпись Onest.
   .bark-spin — кольцо; .bark-loader — кольцо+текст; --panel — по центру блока. ── */
.bark-spin {
    animation: bark-spin .8s linear infinite;
    border: 2px solid var(--line);
    border-radius: 50%;
    border-top-color: var(--accent);
    display: inline-block;
    flex: none;
    height: 16px;
    width: 16px;
}
.bark-spin--lg {
    border-width: 3px;
    height: 26px;
    width: 26px;
}
.bark-loader {
    align-items: center;
    color: var(--muted);
    display: inline-flex;
    font: 600 14px/1 var(--sans);
    gap: 10px;
}
.bark-loader--panel {
    display: flex;
    justify-content: center;
    min-height: 120px;
    width: 100%;
}
/* оверлей поверх карты/канвы: полупрозрачная вуаль + кольцо по центру */
.bark-loader--overlay {
    align-items: center;
    background: color-mix(in srgb, var(--surface) 55%, transparent);
    border-radius: inherit;
    display: flex;
    inset: 0;
    justify-content: center;
    position: absolute;
    z-index: 5;
}
@media (prefers-reduced-motion: reduce) {
    .bark-btn__spinner, .bark-spin { animation-duration: 1.6s; }
}


/* дата увольнения — жирно красным, чтобы не терялась глазом */
.bark-fired-strong { color: var(--bad) !important; font-weight: 700 !important; }
/* «работает» — спокойный зелёный, парный статус к «уволен» в очереди и проверках */
.bark-status-work { color: var(--ok); font-weight: 600; }

/* Открытки для поздравлений — галерея */
.bark-bday-toolbar { align-items: center; display: flex; gap: var(--space-3); }
.bark-bday-upload { cursor: pointer; }
.bark-bday-upload input[type="file"] { display: none; }
.bark-bday-grid {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    margin-top: var(--space-4);
}
.bark-bday-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-panel);
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    margin: 0;
    overflow: hidden;
}
.bark-bday-card.is-off { opacity: 0.5; }
.bark-bday-card img {
    aspect-ratio: 1 / 1;
    background: var(--chip);
    display: block;
    object-fit: cover;
    width: 100%;
}
.bark-bday-card figcaption {
    align-items: center;
    display: flex;
    gap: var(--space-2);
    justify-content: space-between;
    padding: var(--space-2) var(--space-3);
}
.bark-bday-uses { color: var(--muted); font: 500 12px/1.4 var(--mono); white-space: nowrap; }
.bark-bday-actions { align-items: center; display: flex; gap: 4px; }
.bark-bday-block { margin-top: var(--space-2); }
.bark-bday-blocktitle { margin: var(--space-5) 0 var(--space-2); }
.bark-bday-card figcaption.bark-bday-figcol { align-items: stretch; flex-direction: column; gap: 4px; }
.bark-bday-name { color: var(--ink); font: 600 13px/1.2 var(--sans); }
.bark-bday-sub { color: var(--muted); font-size: 12px; }
.bark-bday-row { align-items: center; display: flex; gap: var(--space-2); justify-content: space-between; margin-top: 2px; }
/* ближайшие ДР */
.bark-bday-upcoming { display: grid; gap: 6px; }
.bark-bday-up { align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-panel); display: grid; gap: var(--space-3); grid-template-columns: 54px minmax(0, 1fr) auto; padding: 8px 14px; }
.bark-bday-up.is-today { background: var(--accent-soft); border-color: var(--accent-line); }
.bark-bday-up__date { color: var(--ink); font-variant-numeric: tabular-nums; font-family: var(--mono); font-weight: 600; }
.bark-bday-up__who { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.bark-bday-up__name { color: var(--ink); font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bark-bday-up__dept { color: var(--muted); font-size: 12px; }
.bark-bday-up__in { color: var(--muted); font-size: 12px; justify-self: end; white-space: nowrap; }
/* кликабельная открытка */
.bark-bday-card--clickable { cursor: pointer; transition: transform 120ms ease, box-shadow 120ms ease; }
.bark-bday-card--clickable:hover { box-shadow: var(--shadow-card-hover, 0 8px 24px rgba(0,0,0,.12)); transform: translateY(-2px); }
/* модалка открытки */
.bark-bday-scrim { align-items: center; background: rgba(0,0,0,.55); display: flex; inset: 0; justify-content: center; padding: var(--space-4); position: fixed; z-index: 400; }
.bark-bday-modal { background: var(--surface); border-radius: var(--radius-panel); box-shadow: var(--shadow-card); max-height: 92vh; max-width: 520px; overflow: auto; position: relative; width: 100%; }
.bark-bday-modal > img { border-radius: var(--radius-panel) var(--radius-panel) 0 0; display: block; width: 100%; }
.bark-bday-modal__body { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); }
.bark-bday-modal__wish { color: var(--ink); margin: 0; }
.bark-bday-modal__link { align-self: flex-start; margin-top: var(--space-2); text-decoration: none; }
.bark-bday-modal__close { align-items: center; background: rgba(0,0,0,.5); border: none; border-radius: 999px; color: #fff; cursor: pointer; display: flex; height: 32px; justify-content: center; position: absolute; right: 10px; top: 10px; width: 32px; }


/* «Принять повторно» в шапке карточки уволенного — зелёная, заметная */
.bark-btn--rehire,
button.bark-btn.bark-btn--rehire {
    background: var(--ok) !important;
    color: #fff !important;
}
.bark-btn--rehire:hover { filter: brightness(1.08); }
:root[data-theme="dark"] .bark-btn--rehire { color: #04281a !important; }


/* «Качество»: стабильная высота — список проблем скроллится внутри карточки */
.bark-quality-panel {
    display: flex;
    flex-direction: column;
}
.bark-issue-feed {
    display: grid;
    flex: 1;
    gap: var(--space-3);
    align-content: start;
    min-height: 200px;
    overflow-y: auto;
}

/* ── Постер «География команды» для газеты (модалка + превью PNG) ── */
.bark-poster-backdrop {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-5);
    z-index: 420;
}
.bark-poster-modal {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-panel);
    box-shadow: var(--shadow-pop);
    width: min(96vw, 1200px);
    max-height: calc(100vh - 40px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.bark-poster-modal__head {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--line);
}
.bark-poster-modal__title { margin-right: auto; }
.bark-poster-modal__title h2 { margin: 0; }
.bark-poster-seg {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    background: var(--chip);
    border-radius: var(--radius-control);
}
.bark-poster-seg__btn {
    border: 0;
    background: transparent;
    color: var(--ink2);
    font: 600 13px/1 var(--sans);
    padding: 7px 13px;
    border-radius: 6px;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.bark-poster-seg__btn.is-on {
    background: var(--raised, var(--surface));
    color: var(--ink);
    box-shadow: var(--shadow-card);
}
.bark-poster-close { flex: none; }
.bark-poster-modal__stage {
    position: relative;
    flex: 1 1 auto;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-5);
    background: var(--surface-2);
    overflow: auto;
}
.bark-poster-img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 12px 44px rgba(10, 14, 18, .30);
    animation: barkPosterReveal .55s cubic-bezier(.2, .7, .2, 1);
}
@keyframes barkPosterReveal {
    from { opacity: 0; transform: translateY(10px) scale(.985); clip-path: inset(0 100% 0 0); }
    to   { opacity: 1; transform: none;                          clip-path: inset(0 0 0 0); }
}
.bark-poster-modal__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--line);
}
@media (max-width: 640px) {
    .bark-poster-modal__head { flex-wrap: wrap; }
    .bark-poster-seg { order: 3; width: 100%; }
    .bark-poster-seg__btn { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .bark-poster-img { animation: none; }
}

/* ── Вкладка «AI-портрет» в карточке сотрудника ── */
.bark-ai-portrait__text {
    color: var(--ink2);
    font-size: 14px;
    line-height: 1.65;
    max-width: 72ch;
}
.bark-ai-portrait__text strong { color: var(--ink); }
.bark-ai-portrait__meta { margin-top: var(--space-3); }

/* искорка «есть AI-портрет» рядом с именем */
.bark-ai-mark {
    background: none;
    border: 0;
    color: var(--accent);
    cursor: pointer;
    display: inline-flex;
    margin-left: 6px;
    padding: 0;
    vertical-align: -2px;
}
.bark-ai-mark .bark-ico { height: 14px; width: 14px; }
.bark-ai-mark:hover { color: var(--accent-solid); }

/* Управление доступом */
.bark-access-page {
    display: grid;
    gap: var(--space-5);
}

.bark-access-head {
    align-items: flex-end;
    display: flex;
    gap: var(--space-4);
    justify-content: space-between;
}

.bark-segmented {
    align-items: center;
    background: var(--chip);
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    width: fit-content;
}

.bark-segmented button {
    background: transparent;
    border: 0;
    border-radius: 5px;
    color: var(--ink2);
    cursor: pointer;
    font: 600 13px/1 var(--sans);
    min-height: 34px;
    padding: 0 14px;
}

.bark-segmented button[aria-selected="true"] {
    background: var(--surface);
    box-shadow: var(--shadow-card);
    color: var(--ink);
}

.bark-access-table {
    min-width: 860px;
}

.bark-access-table th,
.bark-access-table td {
    border-bottom: 1px solid var(--line);
    padding: 13px 16px;
    text-align: left;
    vertical-align: middle;
}

.bark-access-table th {
    background: var(--surface-2);
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.bark-access-table tbody tr:last-child td {
    border-bottom: 0;
}

.bark-access-role-list,
.bark-access-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.bark-access-date {
    color: var(--muted);
    display: block;
    font-size: 11px;
    margin-top: 6px;
}

.bark-access-danger {
    color: var(--bad);
}

.bark-access-modal {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-panel);
    box-shadow: var(--shadow-up);
    display: flex;
    flex-direction: column;
    max-height: min(880px, calc(100vh - 32px));
    max-width: 620px;
    overflow: hidden;
    width: calc(100% - 32px);
}

.bark-access-modal--wide {
    max-width: 900px;
}

.bark-access-modal__head {
    align-items: center;
    border-bottom: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    padding: var(--space-5);
}

.bark-access-form {
    display: grid;
    gap: var(--space-4);
    overflow-y: auto;
    padding: var(--space-5);
}

.bark-access-form > label,
.bark-access-grid > label {
    color: var(--ink2);
    display: grid;
    font-size: 13px;
    font-weight: 600;
    gap: 7px;
}

.bark-access-form input[type="text"],
.bark-access-form input[type="email"] {
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    color: var(--ink);
    font: 500 14px/1.3 var(--sans);
    min-height: 42px;
    padding: 0 12px;
    width: 100%;
}

.bark-access-form input:focus-visible {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
    outline: 0;
}

.bark-access-grid {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.bark-toggle-row {
    align-items: center;
    display: flex !important;
    gap: 10px !important;
    min-height: 40px;
}

.bark-access-role-fieldset {
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    display: grid;
    gap: 8px;
    margin: 0;
    padding: var(--space-4);
}

.bark-access-role-fieldset legend {
    color: var(--ink);
    font-size: 13px;
    font-weight: 700;
    padding: 0 6px;
}

.bark-access-check {
    align-items: flex-start;
    cursor: pointer;
    display: flex;
    gap: 10px;
    min-width: 0;
}

.bark-access-check input {
    flex: none;
    margin-top: 3px;
}

.bark-access-check span {
    color: var(--ink2);
    display: grid;
    font-size: 13px;
    gap: 2px;
    min-width: 0;
}

.bark-access-check strong {
    color: var(--ink);
}

.bark-access-check small {
    color: var(--muted);
    line-height: 1.35;
}

.bark-access-permissions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.bark-access-permission-group {
    display: grid;
    gap: 8px;
}

.bark-access-permission-group h4 {
    color: var(--ink);
    font-size: 12px;
    font-weight: 700;
    margin: 4px 0;
    text-transform: uppercase;
}

@media (max-width: 720px) {
    .bark-access-head {
        align-items: stretch;
        flex-direction: column;
    }

    .bark-access-head .bark-btn,
    .bark-access-tabs {
        width: 100%;
    }

    .bark-access-tabs button {
        flex: 1;
    }

    .bark-access-grid,
    .bark-access-permissions {
        grid-template-columns: 1fr;
    }

    .bark-access-modal {
        max-height: calc(100vh - 16px);
        width: calc(100% - 16px);
    }
}

/* Помощь кадровому сотруднику */
.bark-help {
    display: grid;
    gap: var(--space-5);
    margin-inline: auto;
    max-width: 1120px;
    width: 100%;
}

.bark-help-intro {
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 4px solid var(--accent);
    border-radius: var(--radius-control);
    box-shadow: var(--shadow-card);
    display: flex;
    gap: var(--space-6);
    justify-content: space-between;
    padding: var(--space-6);
}

.bark-help-intro > div:first-child {
    min-width: 0;
}

.bark-help-intro h2 {
    color: var(--ink);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
}

.bark-help-intro p:last-child {
    color: var(--ink2);
    font-size: 15px;
    line-height: 1.55;
    margin: var(--space-3) 0 0;
    max-width: 720px;
}

.bark-help-intro__actions {
    display: flex;
    flex: none;
    flex-wrap: wrap;
    gap: var(--space-2);
    justify-content: flex-end;
}

.bark-help-section {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    box-shadow: var(--shadow-card);
    padding: var(--space-6);
}

.bark-help-section__head {
    align-items: center;
    display: flex;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}

.bark-help-section__number {
    align-items: center;
    background: var(--accent-soft);
    border: 1px solid var(--accent-line);
    border-radius: 50%;
    color: var(--accent);
    display: inline-flex;
    flex: none;
    font: 700 14px/1 var(--mono);
    height: 34px;
    justify-content: center;
    width: 34px;
}

.bark-help-section__head .bark-section-kicker {
    margin-bottom: 5px;
}

.bark-help-steps {
    counter-reset: bark-help-step;
    list-style: none;
    margin: 0;
    padding: 0;
}

.bark-help-steps li {
    align-items: start;
    border-top: 1px solid var(--line-2);
    counter-increment: bark-help-step;
    display: grid;
    gap: 4px var(--space-3);
    grid-template-columns: 28px minmax(0, 1fr);
    padding: var(--space-4) 0;
}

.bark-help-steps li:first-child {
    border-top: 0;
    padding-top: 0;
}

.bark-help-steps li:last-child {
    padding-bottom: 0;
}

.bark-help-steps li::before {
    align-items: center;
    background: var(--chip);
    border-radius: 50%;
    color: var(--ink2);
    content: counter(bark-help-step);
    display: inline-flex;
    font: 600 12px/1 var(--mono);
    grid-row: 1 / span 2;
    height: 26px;
    justify-content: center;
    width: 26px;
}

.bark-help-steps strong,
.bark-help-blockers strong {
    color: var(--ink);
    font-size: 14px;
    line-height: 1.4;
}

.bark-help-steps span,
.bark-help-blockers span {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.5;
}

.bark-help-field-columns,
.bark-help-auto-grid {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.bark-help-field-group,
.bark-help-auto-grid > div {
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    min-width: 0;
    padding: var(--space-4);
}

.bark-help-field-group--required {
    border-top: 3px solid var(--bad);
}

.bark-help-field-group--optional {
    border-top: 3px solid var(--warn);
}

.bark-help-field-group__title {
    align-items: flex-start;
    display: grid;
    gap: var(--space-2);
}

.bark-help-field-group__title .bark-pill {
    justify-self: start;
}

.bark-help-field-group__title strong {
    color: var(--ink);
    font-size: 14px;
}

.bark-help-field-list {
    display: grid;
    margin: var(--space-4) 0 0;
}

.bark-help-field-list > div {
    border-top: 1px solid var(--line);
    display: grid;
    gap: var(--space-2);
    grid-template-columns: 110px minmax(0, 1fr);
    padding: var(--space-3) 0;
}

.bark-help-field-list > div:last-child {
    padding-bottom: 0;
}

.bark-help-field-list dt {
    color: var(--ink);
    font-size: 13px;
    font-weight: 700;
}

.bark-help-field-list dd {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
}

.bark-help-note {
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    margin-top: var(--space-4);
    padding: var(--space-4);
}

.bark-help-note--warning {
    background: var(--warn-soft);
    border-color: color-mix(in srgb, var(--warn) 34%, var(--line));
}

.bark-help-note--accent {
    background: var(--accent-soft);
    border-color: var(--accent-line);
}

.bark-help-note strong {
    color: var(--ink);
    display: block;
    font-size: 14px;
}

.bark-help-note p {
    color: var(--ink2);
    font-size: 14px;
    line-height: 1.5;
    margin: 6px 0 0;
}

.bark-help-details-list {
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    overflow: hidden;
}

.bark-help-details-list details {
    background: var(--surface-2);
    border-top: 1px solid var(--line);
}

.bark-help-details-list details:first-child {
    border-top: 0;
}

.bark-help-details-list summary {
    color: var(--ink);
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    padding: var(--space-4);
}

.bark-help-details-list summary::marker {
    color: var(--accent);
}

.bark-help-details-list details[open] summary {
    border-bottom: 1px solid var(--line);
}

.bark-help-details-list p {
    color: var(--ink2);
    font-size: 14px;
    line-height: 1.55;
    margin: 0;
    padding: var(--space-4);
}

.bark-help-auto-grid .bark-pill {
    margin-bottom: var(--space-3);
}

.bark-help-auto-grid ul {
    color: var(--ink2);
    display: grid;
    font-size: 14px;
    gap: var(--space-2);
    line-height: 1.5;
    margin: 0;
    padding-left: 20px;
}

.bark-help-blockers {
    display: grid;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}

.bark-help-blockers li {
    border-top: 1px solid var(--line-2);
    display: grid;
    gap: 4px;
    padding: var(--space-4) 0;
}

.bark-help-blockers li:first-child {
    border-top: 0;
    padding-top: 0;
}

.bark-help-blockers li:last-child {
    padding-bottom: 0;
}

.bark-digital-access {
    align-items: center;
    background: color-mix(in srgb, var(--accent) 7%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line-2));
    border-radius: var(--radius-lg);
    display: grid;
    gap: var(--space-3);
    grid-template-columns: minmax(190px, 1fr) repeat(2, minmax(190px, auto));
    padding: var(--space-4);
}

.bark-digital-access strong {
    color: var(--ink);
    display: block;
    font-size: 14px;
    margin-bottom: 3px;
}

.bark-digital-access p {
    margin: 0;
}

.bark-digital-access label {
    align-items: center;
    color: var(--ink2);
    cursor: pointer;
    display: flex;
    font-size: 13px;
    font-weight: 600;
    gap: var(--space-2);
    line-height: 1.35;
}

.bark-digital-access input {
    accent-color: var(--accent);
    flex: none;
    height: 18px;
    margin: 0;
    width: 18px;
}

input:disabled,
select:disabled {
    cursor: not-allowed;
    opacity: 0.7;
}

@media (max-width: 820px) {
    .bark-help-intro {
        align-items: stretch;
        flex-direction: column;
    }

    .bark-help-intro__actions {
        justify-content: flex-start;
    }

    .bark-help-field-columns,
    .bark-help-auto-grid {
        grid-template-columns: 1fr;
    }

    .bark-digital-access {
        align-items: start;
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .bark-help-intro,
    .bark-help-section {
        padding: var(--space-4);
    }

    .bark-help-intro h2 {
        font-size: 20px;
    }

    .bark-help-intro__actions .bark-btn,
    .bark-help-intro__actions .bark-btn--ghost {
        justify-content: center;
        width: 100%;
    }

    .bark-help-field-list > div {
        grid-template-columns: 1fr;
    }
}

/* ---- Bark UI v4.0.0 shell, feedback and loading contract ---- */
.bark-route-progress {
    flex: none;
    top: 76px;
}

.bark-sidebar__meta {
    color: var(--muted);
    font: 500 10.5px/1.4 var(--sans);
    letter-spacing: 0.01em;
}

.bark-sidebar__user .bark-avatar {
    grid-column: auto;
}

.bark-sidebar__logout .bark-ico {
    height: 18px;
    width: 18px;
}

.bark-feedback-form,
.bark-feedback-kinds {
    display: grid;
    gap: var(--space-3);
}

.bark-feedback-kinds .bark-toggle-chip {
    justify-content: flex-start;
    min-height: 40px;
    text-align: left;
    white-space: normal;
    width: 100%;
}

.bark-feedback-form .bark-alert {
    margin: 0;
}

@media (max-width: 900px) {
    .bark-route-progress {
        top: 60px;
    }
}

@media print {
    .bark-bug-btn,
    .bark-modal-backdrop,
    .bark-route-progress {
        display: none !important;
    }
}