/* ══ Theme tokens ══ */
/* Every color in the app comes from these variables. Light values live on :root, the dark theme overrides them on html.lk-dark. Future per-user customization = injecting per-user values for these same variables — no other CSS changes. */
:root {
	--lk-bg:            #f4f5f7;
	--lk-text:          #333;
	--lk-text-muted:    #777;
	--lk-panel-bg:      #fff;
	--lk-head-bg:       #f0f0f0;
	--lk-border:        #ddd;
	--lk-border-soft:   #eee;
	--lk-navbar-bg:     #f8f8f8;
	--lk-navbar-border: #e7e7e7;
	--lk-sticky-top:    51px;   /* высота навбара: от неё отсчитываются все липкие элементы */
	--lk-focus-border:  #66afe9;
	--lk-focus-glow:    rgba(102, 175, 233, 0.5);
}

html.lk-dark {
	--lk-bg:            #1d2126;
	--lk-text:          #d6d9dd;
	--lk-text-muted:    #8b919a;
	--lk-panel-bg:      #272c33;
	--lk-head-bg:       #2f353d;
	--lk-border:        #3b424b;
	--lk-border-soft:   #343b43;
	--lk-navbar-bg:     #272c33;
	--lk-navbar-border: #3b424b;
	--lk-focus-border:  #4a90d9;
	--lk-focus-glow:    rgba(74, 144, 217, 0.45);

	/* Полосы прокрутки (страница и любые блоки с overflow) — в цветах темы: иначе браузер рисует их светлыми поверх тёмного фона */
	scrollbar-color: var(--lk-border) var(--lk-bg);
}

/* ── Utilities ── */
.lk-hidden {
	display: none !important;
}

.lk-status-off {
	color: var(--lk-text-muted);
}

/* Smooth recolor while switching themes — html gets .lk-anim only for the toggle */
html.lk-anim body,
html.lk-anim * {
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;
}

/* ══ Base + Bootstrap mapping to tokens ══ */
body {
	background-color: var(--lk-bg);
	color: var(--lk-text);
}

.text-muted {
	color: var(--lk-text-muted);
}

code {
	background-color: var(--lk-head-bg);
}

/* Навбар остаётся на экране при прокрутке страницы */
.navbar {
	position: sticky;
	top: 0;
	z-index: 1030;
}

.navbar-default {
	background-color: var(--lk-navbar-bg);
	border-color: var(--lk-navbar-border);
}

.navbar-default .navbar-brand,
.navbar-default .navbar-nav > li > a {
	color: var(--lk-text);
}

.navbar-default .navbar-brand:hover,
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
	color: var(--lk-text-muted);
}

.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
	background-color: var(--lk-head-bg);
	color: var(--lk-text);
}

.dropdown-menu {
	background-color: var(--lk-panel-bg);
	border-color: var(--lk-border);
}

.dropdown-menu > li > a {
	color: var(--lk-text);
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
	background-color: var(--lk-head-bg);
	color: var(--lk-text);
}

.panel {
	background-color: var(--lk-panel-bg);
}

.panel-default {
	border-color: var(--lk-border);
}

.panel-default > .panel-heading {
	background-color: var(--lk-head-bg);
	border-color: var(--lk-border);
	color: var(--lk-text);
}

.form-control {
	background-color: var(--lk-panel-bg);
	border-color: var(--lk-border);
	color: var(--lk-text);
}

.btn-default {
	background-color: var(--lk-panel-bg);
	border-color: var(--lk-border);
	color: var(--lk-text);
}

.btn-default:hover,
.btn-default:focus,
.btn-default:active {
	background-color: var(--lk-head-bg);
	border-color: var(--lk-border);
	color: var(--lk-text);
}

/* ── Buttons: success + disabled/focus fixes ── */
/* Status-button tokens — the green stays calmer in dark mode */
:root {
	--lk-success-bg:           #5cb85c;
	--lk-success-border:       #4cae4c;
	--lk-success-bg-hover:     #449d44;
	--lk-success-border-hover: #398439;
}

html.lk-dark {
	--lk-success-bg:           #35743c;
	--lk-success-border:       #2c6132;
	--lk-success-bg-hover:     #3e8746;
	--lk-success-border-hover: #35743c;
}

.btn-success {
	background-color: var(--lk-success-bg);
	border-color: var(--lk-success-border);
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active {
	background-color: var(--lk-success-bg-hover);
	border-color: var(--lk-success-border-hover);
}

/* Disabled (incl. the App.showLoader state): Bootstrap resets hovered disabled buttons to its own colors — keep them on the theme tokens instead. */
.btn-default.disabled,
.btn-default[disabled],
.btn-default[disabled]:hover,
.btn-default[disabled]:focus {
	background-color: var(--lk-panel-bg);
	border-color: var(--lk-border);
	color: var(--lk-text-muted);
}

.btn-success.disabled,
.btn-success[disabled],
.btn-success[disabled]:hover,
.btn-success[disabled]:focus {
	background-color: var(--lk-success-bg);
	border-color: var(--lk-success-border);
}

/* No focus ring ("black border") on clicked buttons */
.btn:focus,
.btn:active,
.btn:active:focus,
.btn.active:focus {
	outline: none;
}

/* ── Alerts in dark mode ── */
/* The `alert` component (alert-info/success/warning/danger): light mode keeps Bootstrap's defaults; dark gets muted versions. Toasts use the same classes. */
html.lk-dark .alert-info {
	background-color: #1e3a4c;
	border-color: #295069;
	color: #9fd3f0;
}

html.lk-dark .alert-success {
	background-color: #204026;
	border-color: #2c5834;
	color: #a5dcaa;
}

html.lk-dark .alert-warning {
	background-color: #46391b;
	border-color: #615024;
	color: #e6cf8f;
}

html.lk-dark .alert-danger {
	background-color: #462222;
	border-color: #613030;
	color: #eba7a7;
}

/* ══ Cards — the app-wide bordered box with a greyed header ══ */
.lk-card {
	border: 1px solid var(--lk-border);
	border-radius: 4px;
	background-color: var(--lk-panel-bg);
	overflow: hidden;
}

.lk-card-head {
	padding: 8px 10px;
	background-color: var(--lk-head-bg);
	border-bottom: 1px solid var(--lk-border);
}

/* ══ Theme toggle (navbar) ══ */
.lk-theme-icon-light {
	display: none;
}

html.lk-dark .lk-theme-icon-dark {
	display: none;
}

html.lk-dark .lk-theme-icon-light {
	display: inline-block;
}

html.lk-anim #lk-theme-toggle i {
	animation: lk-theme-spin 0.4s ease;
}

@keyframes lk-theme-spin {
	from { transform: rotate(-180deg); opacity: 0.2; }
	to   { transform: rotate(0deg);    opacity: 1; }
}

/* ── Login page ── */
.lk-login-wrapper {
	min-height: calc(100vh - 60px);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.lk-login-box {
	width: 100%;
	max-width: 480px;
	text-align: center;
	position: relative;
}

.lk-login-title {
	margin-bottom: 20px;
}

/* Floats above the login box (out of the flow) — appearing never shifts the form */
.lk-login-error {
	position: absolute;
	bottom: 100%;
	left: 0;
	right: 0;
	margin-bottom: 12px;
	text-align: left;
}

/* Label + input side by side — like MIS */
.lk-form-row {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 10px;
}

.lk-label {
	width: 70px;
	text-align: right;
	font-weight: bold;
	flex-shrink: 0;
	padding-right: 8px;
	font-size: 14px;
}

.lk-input {
	flex: 1;
	max-width: 300px;
}

/* ── Toast notifications (App.notify) ── */
.lk-toast {
	position: fixed;
	top: 65px;   /* below the 50px navbar */
	right: 50px;
	z-index: 9999;
	width: min(360px, calc(100vw - 30px));
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	font-size: 14px;
	padding: 12px 16px;
	word-wrap: break-word;
}

/* ── Responsive: stack on small screens ── */
@media (max-width: 480px) {
	.lk-form-row {
		flex-direction: column;
		align-items: stretch;
	}
	.lk-label {
		width: auto;
		text-align: left;
		padding-right: 0;
		margin-bottom: 4px;
	}
	.lk-input {
		max-width: 100%;
	}
}

/* ── Read-only page treatment ── */
/* Content wrapper gets .lk-readonly when the user can view but not edit the page. Only ACTION controls hide — searches, filters, and selectors stay usable; the user_data drawer switches its fields to disabled itself (read_only context). .lk-own-perm marks controls gated by their OWN feature permission (org_add, role_add): the server renders them only when that permission is granted, so page-level read-only must not hide them. */
.lk-readonly .btn-success:not(.lk-own-perm),
.lk-readonly button[type="submit"]:not(.lk-own-perm),
.lk-readonly input[type="submit"]:not(.lk-own-perm),
.lk-readonly .lk-edit-only {
	display: none;
}

/* Disabled controls, themed (Bootstrap's grey doesn't fit dark mode) */
.form-control[disabled] {
	background-color: var(--lk-head-bg);
	color: var(--lk-text-muted);
}

.lk-select-off .lk-chip i {
	display: none;
}

/* ── Permission cards (/permissions) ── */
/* Responsive grid: as many ~280px cards per row as fit the screen. Card visuals come from .lk-card / .lk-card-head; these add only layout. */
.lk-perm-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 15px;
	margin-bottom: 15px;
}

.lk-perm-head {
	display: flex;
	align-items: center;
	font-size: 11px;
	color: var(--lk-text-muted);
}

.lk-perm-title {
	flex: 1;
	min-width: 0;
	font-size: 14px;
	font-weight: bold;
	color: var(--lk-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.lk-perm-row {
	display: flex;
	align-items: center;
	padding: 6px 10px;
	border-top: 1px solid var(--lk-border-soft);
}

.lk-perm-row:first-of-type {
	border-top: none;
}

.lk-perm-label {
	flex: 1;
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Fixed-width columns so header words and checkboxes align vertically */
.lk-perm-cell {
	width: 64px;
	flex-shrink: 0;
	text-align: center;
}

.lk-perm-cell input[type="checkbox"] {
	margin: 0;
}

/* ── Site settings page ── */
.lk-schema-result {
	margin-top: 15px;
}

/* Короткое сообщение шириной по собственному тексту, а не во всю страницу */
.lk-alert-fit {
	width: fit-content;
	max-width: 100%;
}

/* ── Permission page controls ── */
.lk-perm-target {
	min-width: 240px;
	margin-left: 10px;
}

.lk-perm-status {
	margin-left: 10px;
}

/* ── Focus glow (themed) ── */
:root {
	--lk-focus-border: #66afe9;
	--lk-focus-glow:   rgba(102, 175, 233, 0.6);
}

html.lk-dark {
	--lk-focus-border: #4a7ba6;
	--lk-focus-glow:   rgba(74, 123, 166, 0.55);
}

.form-control:focus {
	border-color: var(--lk-focus-border);
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px var(--lk-focus-glow);
	outline: none;
}

/* ── Split layout: sticky side list + main content ── */
.lk-split {
	display: flex;
	align-items: flex-start;
}

.lk-split-side {
	min-width: 250px;
	max-width: 450px;
	flex-shrink: 0;
	margin-right: 15px;
	position: sticky;
	top: calc(var(--lk-sticky-top) + 15px);
}

.lk-split-main {
	flex: 1;
	min-width: 0;
}

/* ── LkTable ── */
/* Прокручивается САМА таблица, а не страница: полоса прокрутки принадлежит таблице (сужает только её и подвал), шапка и подвал липнут к краям контейнера, а строки обрезаются по его скруглённым углам. Высоту задаёт колонка .lk-fill. */
.lk-table {
	overflow: auto;
	border: 1px solid var(--lk-border);
	border-radius: 4px;
	background-color: var(--lk-panel-bg);
}

/* Страница с таблицей — колонка на всю высоту окна: верхние блоки (заголовок, кнопки — какие есть) занимают своё место, а .lk-fill-main АВТОМАТИЧЕСКИ получает остаток. Кнопка скрыта правами — таблица выше; добавятся новые контролы — таблица сама станет ниже. Страница не прокручивается. */
.lk-fill {
	display: flex;
	flex-direction: column;
	height: calc(100vh - var(--lk-sticky-top) - 20px);
	padding-bottom: 15px;
}

.lk-fill-main {
	flex: 1;
	min-height: 0;
}

.lk-split.lk-fill-main {
	align-items: stretch;
}

.lk-fill .lk-split-main {
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.lk-fill .lk-table {
	max-height: 100%;
}

.lk-table table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
}

.lk-table th,
.lk-table td {
	padding: 7px 10px;
	border-bottom: 1px solid var(--lk-border-soft);
	text-align: left;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 260px;
}

/* Шапка целиком (названия столбцов + строка поиска) остаётся у верхнего края таблицы; фон непрозрачный, строки под ней не просвечивают */
.lk-table thead {
	position: sticky;
	top: 0;
	z-index: 3;
}

.lk-table thead th {
	background-color: var(--lk-head-bg);
}

.lk-table-th {
	cursor: pointer;
	user-select: none;
}

.lk-table-arrow {
	color: var(--lk-text-muted);
	margin-left: 4px;
}

.lk-table-search th {
	padding: 4px 6px;
}

.lk-table tbody tr:hover {
	background-color: var(--lk-head-bg);
}

.lk-table-empty td {
	color: var(--lk-text-muted);
	text-align: center;
}

/* Пагинация остаётся у нижнего края таблицы при её прокрутке */
.lk-table-footer {
	position: sticky;
	bottom: 0;
	z-index: 3;
	display: flex;
	align-items: center;
	padding: 8px 10px;
	border-top: 1px solid var(--lk-border);
	background-color: var(--lk-panel-bg);
}

.lk-table-pages button {
	margin-right: 4px;
	min-width: 34px;
}

.lk-table-info {
	margin-left: auto;
	margin-right: 10px;
}

.lk-table-size {
	width: auto;
}

/* ── LkList (side list) ── */
.lk-side-tools {
	padding: 8px 10px;
	border-bottom: 1px solid var(--lk-border-soft);
}

.lk-side-btns {
	margin-top: 6px;
	font-size: 12px;
}

.lk-side-btns a {
	margin-right: 12px;
}

.lk-side-options {
	max-height: 60vh;
	overflow-y: auto;
}

.lk-side-option {
	padding: 6px 10px;
	cursor: pointer;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.lk-side-option:hover {
	background-color: var(--lk-head-bg);
}

.lk-side-option .fa-check {
	visibility: hidden;
	margin-right: 4px;
	color: var(--lk-success-bg);
}

.lk-side-option.lk-selected .fa-check {
	visibility: visible;
}

.lk-side-empty {
	padding: 10px;
	color: var(--lk-text-muted);
}

/* ── LkSelect (searchable dropdown, single/multi with chips) ── */
.lk-select {
	position: relative;
}

.lk-select-box {
	position: relative;
}

.lk-select-box .lk-select-search {
	padding-right: 24px;
}

.lk-select-box .caret {
	position: absolute;
	right: 10px;
	top: 50%;
	margin-top: -2px;
	color: var(--lk-text-muted);
	pointer-events: none;
}

.lk-chip {
	background-color: var(--lk-head-bg);
	border: 1px solid var(--lk-border);
	border-radius: 3px;
	padding: 1px 6px;
	margin: 2px 4px 2px 0;
	font-size: 12px;
	white-space: nowrap;
}

.lk-chip i {
	cursor: pointer;
	color: var(--lk-text-muted);
	margin-left: 3px;
}

.lk-chip i:hover {
	color: var(--lk-text);
}

.lk-select-menu {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 100;
	margin-top: 2px;
	background-color: var(--lk-panel-bg);
	border: 1px solid var(--lk-border);
	border-radius: 4px;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
	padding: 6px;
}

.lk-select-options {
	max-height: 220px;
	overflow-y: auto;
}

.lk-select-option {
	padding: 5px 8px;
	cursor: pointer;
	border-radius: 3px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.lk-select-option:hover {
	background-color: var(--lk-head-bg);
}

.lk-select-option .fa-check {
	visibility: hidden;
	margin-right: 4px;
	color: var(--lk-success-bg);
}

.lk-select-option.lk-selected .fa-check {
	visibility: visible;
}

/* ── Drawer (user_data screen) ── */
.lk-drawer-backdrop {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.4);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
	z-index: 1040;
}

.lk-drawer-backdrop.lk-open {
	opacity: 1;
	pointer-events: auto;
}

.lk-drawer {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: 420px;
	max-width: 92vw;
	background-color: var(--lk-panel-bg);
	border-left: 1px solid var(--lk-border);
	box-shadow: -4px 0 16px rgba(0, 0, 0, 0.25);
	transform: translateX(100%);
	transition: transform 0.3s ease;
	z-index: 1050;
	display: flex;
	flex-direction: column;
}

.lk-drawer.lk-open {
	transform: translateX(0);
}

.lk-drawer-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 15px;
	background-color: var(--lk-head-bg);
	border-bottom: 1px solid var(--lk-border);
	font-size: 15px;
	font-weight: bold;
}

.lk-drawer-close {
	cursor: pointer;
	color: var(--lk-text-muted);
	font-size: 18px;
	padding: 0 4px;
}

.lk-drawer-close:hover {
	color: var(--lk-text);
}

.lk-drawer-body {
	padding: 15px;
	overflow-y: auto;
	flex: 1;
}

.lk-drawer-footer {
	padding: 12px 15px;
	border-top: 1px solid var(--lk-border);
}

.lk-drawer-reset {
	margin-top: 20px;
	padding-top: 15px;
	border-top: 1px solid var(--lk-border-soft);
}

/* ── Forced password change overlay ── */
.lk-force-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.6);
	z-index: 2000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.lk-force-card {
	width: 100%;
	max-width: 380px;
}

.lk-force-body {
	padding: 15px;
}

.lk-force-body .form-control {
	margin-bottom: 10px;
}

/* ── Side list: option layout, delete icon, add mini-form ── */
.lk-side-option {
	display: flex;
	align-items: center;
}

.lk-side-option-label {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

.lk-side-del {
	margin-left: 6px;
	color: var(--lk-text-muted);
}

.lk-side-del:hover {
	color: #c9302c;   /* status color, like the alerts */
}

.lk-side-add {
	margin-top: 10px;
}

.lk-side-add .form-control {
	margin-bottom: 6px;
}

/* ── User settings drawer ── */
.lk-us-divider {
	margin: 20px 0 10px;
	padding-top: 15px;
	border-top: 1px solid var(--lk-border-soft);
	font-weight: bold;
}

/* ── Forced password change: inline error ── */
.lk-force-error {
	text-align: left;
}

/* ── Required-field highlight (App.requireFilled) ── */
.lk-field-error,
.lk-field-error:focus {
	border-color: #d9534f;   /* status color, like the alerts */
	box-shadow: 0 0 6px rgba(217, 83, 79, 0.45);
}

/* ── Wide drawer (patient view) + treatment rows ── */
.lk-drawer-wide {
	width: 560px;
}

/* Content-fitted drawer: default width as the floor, stretches only when a row (date + status + button) doesn't fit; the 92vw cap then wraps the status text. */
.lk-drawer-fit {
	width: max-content;
	min-width: 420px;
}

.lk-treatment-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 0;
	border-top: 1px solid var(--lk-border-soft);
}

.lk-treatment-row:first-of-type {
	border-top: none;
}

/* ── Document modal (A4 viewer) ── */
/* The document is paper: it stays white with black text in BOTH themes — the literal colors here are intentional, not a token violation. */
.lk-doc-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.6);
	z-index: 1800;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
}

.lk-doc-box {
	width: calc(210mm + 18px);
	max-width: 96vw;
	height: 94vh;
	background-color: #fff;
	border-radius: 4px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

/* The page is a fixed-width A4 sheet (content exactly 180mm — same as print, so overlay coordinates and line wrapping match the printed document); the scroll lives on the wrapper so the scrollbar can't eat page width. */
.lk-doc-scroll {
	flex: 1;
	overflow-y: auto;
}

.lk-doc-page {
	width: 210mm;
	padding: 12mm 15mm;
	background-color: #fff;
	color: #000;
}

.lk-doc-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 15px;
	border-top: 1px solid #ddd;
	background-color: #f5f5f5;
}

.lk-doc-actions .btn {
	margin-left: 6px;
}

/* ── Template editor ── */
.lk-tpl-html {
	height: 48vh;
	font-family: Consolas, monospace;
	font-size: 12px;
	resize: vertical;
	white-space: pre;
}

/* Dark theme: Word-style dark document — dark page, light text. Templates carry inline colors (#000 text, #272727 borders), hence the !important overrides. PDF capture simply drops the lk-dark class for its duration — no capture CSS needed. */
html.lk-dark .lk-doc-box,
html.lk-dark .lk-doc-page {
	background-color: #26282c;
}

html.lk-dark .lk-doc-page,
html.lk-dark .lk-doc-page * {
	color: #dfe2e6 !important;
	border-color: #6a6e75 !important;
}

html.lk-dark .lk-doc-footer {
	background-color: var(--lk-head-bg);
	border-color: var(--lk-border);
}


/* ── Navbar link spacing ── */
/* Bootstrap's .nav > li > a is padding: 10px 15px — Tima prefers 10px horizontal. */
.navbar-nav > li > a {
	padding-left: 10px;
	padding-right: 10px;
}

/* ── LkSelect multi: chips above the search row ── */
/* Full-width wrap: short chips share a line, a long name takes its own and wraps inside the chip. Empty wrap collapses. */
.lk-select-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-bottom: 4px;
}

.lk-select-chips:empty {
	display: none;
	margin-bottom: 0;
}

.lk-select-chips .lk-chip {
	max-width: 100%;
	white-space: normal;
	word-break: break-word;
}


/* ── Treatment status in the patient drawer ── */
/* Status colors are deliberately literal (the token exemption): green = fit, red = problem, neutral codes stay default text. */
.lk-treatment-date {
	white-space: nowrap;
}

.lk-treatment-status {
	flex: 1;
	margin: 0 10px;
	text-align: center;
}

.lk-st-ok {
	color: #2e9e5b;
}

.lk-st-bad {
	color: #d9534f;
}

/* ── Индикатор несохранённых изменений ── */
/* Изменённое, но не сохранённое поле в контейнере с data-dirty-track: янтарное кольцо — приглушённое без фокуса, полной яркости в фокусе (янтарь заменяет голубое фокусное свечение); красная ошибка валидации приоритетнее всего. */
.form-control.lk-dirty:not(.lk-field-error) {
	border-color: rgba(240, 173, 78, 0.65);
	box-shadow: 0 0 0 3px rgba(240, 173, 78, 0.12);
}

.form-control.lk-dirty:not(.lk-field-error):focus {
	border-color: #f0ad4e;
	box-shadow: 0 0 0 3px rgba(240, 173, 78, 0.25);
}

/* ── Состояния строк (глобальная конвенция) ── */
/* Новая, ещё не сохранённая строка — лаймовое кольцо вокруг ВСЕЙ строки (.lk-row-new); изменение существующей записи подсвечивается янтарём на самом изменённом контроле (.lk-dirty). */
.lk-row-new {
	border-radius: 4px;
	background-color: rgba(139, 195, 74, 0.06);
	box-shadow: 0 0 0 3px rgba(139, 195, 74, 0.3);
}

/* ── Гранты lk_reader (/site_settings) ── */
/* Строки без рамок; между строками — тонкий разделитель на теме-адаптивном токене границы. Прокрутка при длинном списке; внутренний отступ — чтобы кольца строк не резались overflow'ом. */
.lk-grants-box {
	max-height: 340px;
	overflow-y: auto;
	margin-top: 10px;
	padding: 4px;
}

.lk-grants-new {
	margin-top: 10px;
	padding: 4px;
}

.lk-grants-new:empty {
	margin-top: 0;
	padding: 0;
}

.lk-grant-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 7px 8px;
	border-bottom: 1px solid var(--lk-border);
}

.lk-grant-row:last-child {
	border-bottom: none;
}

.lk-grant-row.lk-row-new {
	border-bottom: none;
	margin-bottom: 6px;
}

.lk-grant-table {
	flex: 1;
	word-break: break-word;
}

.lk-grant-type {
	width: 220px;
}

/* Помеченная на отзыв строка */
.lk-row-del {
	opacity: 0.55;
}

.lk-row-del .lk-grant-table {
	color: #d9534f;
	text-decoration: line-through;
}
/* ── Меню «Все документы» в списке осмотров ── */
.lk-doc-more {
	position: relative;
	display: inline-block;
	margin-left: 6px;
}

.lk-doc-menu {
	position: absolute;
	right: 0;
	top: calc(100% + 4px);
	z-index: 10;
	min-width: 280px;
	padding: 4px 0;
	border: 1px solid var(--lk-border);
	border-radius: 4px;
	background-color: var(--lk-panel-bg);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.lk-doc-menu-item {
	display: block;
	padding: 6px 12px;
	cursor: pointer;
	white-space: nowrap;
}

.lk-doc-menu-item:hover {
	background-color: var(--lk-head-bg);
}