*
{
	box-sizing: border-box;
}
[hidden]
{
	display: none !important;
}
.product-row
{
	display: flex;
	align-items: center;
	gap: 10px;
}
.product-row select
{
	flex: 0 1 50%;
	max-width: 50%;
	min-width: 0;
	width: auto;
}
.product-row .remove-item
{
	flex: 0 0 auto;
	white-space: nowrap;
}
body
{
	margin: 0;
	background: #f4f5f7;
	color: #222;
	font-family: Arial,
		Helvetica,
		sans-serif;
}
.topbar
{
	height: 64px;
	padding: 0 24px;
	background: #20252b;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.logo
{
	color: white;
	text-decoration: none;
	font-size: 24px;
	font-weight: bold;
}
nav
{
	display: flex;
	gap: 20px;
}
nav a
{
	color: white;
	text-decoration: none;
}
.container
{
	max-width: 1200px;
	margin: 0 auto;
	padding: 30px 20px;
}
h1
{
	margin-top: 0;
}
.cards
{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin: 25px 0;
}
.card
{
	background: white;
	border: 1px solid #ddd;
	border-radius: 10px;
	padding: 24px;
}
.card-title
{
	color: #666;
	font-size: 15px;
}
.card-value
{
	margin-top: 10px;
	font-size: 36px;
	font-weight: bold;
}
.panel
{
	background: white;
	border: 1px solid #ddd;
	border-radius: 6px;
	padding: 8px;
}
.login-box
{
	width: 100%;
	max-width: 420px;
	margin: 60px auto;
	background: white;
	border: 1px solid #ddd;
	border-radius: 10px;
	padding: 30px;
}

label
{
	display: block;
}

input
{
	display: block;
	width: 100%;
	padding: 10px;
	border: 1px solid #bbb;
	border-radius: 6px;
	font-size: 16px;
}
.button
{
	display: inline-block;
	padding: 11px 18px;
	border: none;
	border-radius: 7px;
	background: #20252b;
	color: white;
	cursor: pointer;
	text-decoration: none;
	font-size: 15px;
}

.button-with-icon
{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	line-height: 1;
}

.button-with-icon svg
{
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
}

@media (max-width: 700px) 
{
	.topbar
	{
		height: auto;
		padding: 15px 20px;
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}
	.cards
	{
		grid-template-columns: 1fr;
	}
	nav
	{
		flex-wrap: wrap;
	}
}
/* Клиенты и формы */
.page-header
{
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	margin-bottom: 24px;
}
.page-header p,
.muted
{
	color: #777;
}
.button,
button
{
	display: inline-block;
	border: 0;
	border-radius: 8px;
	padding: 11px 16px;
	background: #2457c5;
	color: #fff;
	text-decoration: none;
	cursor: pointer;
	font: inherit;
}
.button:hover,
button:hover
{
	background: #19449f;
}
.search-form
{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-bottom: 20px;
}
.search-form input
{
	flex: 1;
	min-width: 220px;
}
input,
textarea
{
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 11px 12px;
	border: 1px solid #ccc;
	border-radius: 7px;
	font: inherit;
	background: #fff;
	color: #222;
}
.form-panel
{
	max-width: 700px;
}
.form-panel label:not(.role-card)
{
	display: block;
	margin: 18px 0 7px;
	font-weight: 600;
}
.form-panel input,
.form-panel textarea
{
	margin-bottom: 12px;
}
.form-actions
{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 24px;
}
.form-actions a,
.search-form a
{
	color: #2457c5;
}
.error-message
{
	padding: 12px;
	margin-bottom: 16px;
	border-radius: 7px;
	background: #fff0f0;
	color: #a00000;
}
.table-wrapper table
{
	width: 100%;
	table-layout: auto;
}
table
{
	width: 100%;
	border-collapse: collapse;
}
th,
td
{
	padding: 8px;
	text-align: left;
	border-bottom: 1px solid #e5e5e5;
	vertical-align: top;
}
th
{
	font-weight: 600;
	background: #f7f7f7;
}
.materials-table .actions-cell
{
	text-align: center;
	white-space: nowrap;
}
.icon-button
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 8px;
	background: #eef3ff;
	color: #2457c5;
	text-decoration: none;
	transition: background-color .15s, color .15s, transform .15s;
}
.icon-button:hover
{
	background: #2457c5;
	color: #fff;
}
.icon-button:focus-visible
{
	outline: 2px solid #2457c5;
	outline-offset: 2px;
}
.icon-button:active
{
	transform: scale(.96);
}
/* Заголовок над строкой управления */
.page-header.materials-header
{
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 18px;
}
.page-header.materials-header h1
{
	margin: 0;
}
/* Поиск и кнопки в одной строке */
.materials-header .materials-actions
{
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 24px;
	width: 100%;
}
/* Поиск слева */
.materials-header .search-form
{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	gap: 10px;
	margin: 0;
	min-width: 0;
}
.materials-header .search-form input
{
	flex: 0 1 360px;
	width: 360px;
	min-width: 0;
	height: 42px;
	margin: 0;
}
/* Три кнопки справа */
.materials-header .materials-buttons
{
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 10px;
	margin-left: auto;
}
.materials-header button,
.materials-header .materials-buttons .button
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	height: 42px;
	margin-top: 0;
	margin-bottom: 0;
	white-space: nowrap;
}
.movements-filter
{
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	/* выравниваем по нижнему краю: label сверху, поле снизу */
	gap: 16px;
}
.movements-filter__field
{
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 220px;
	/* чтобы селект не сжимался в точку */
	flex: 1 1 240px;
	/* растягиваются, но с базовой шириной */
}
.movements-filter__field label
{
	margin: 0;
	font-weight: 600;
	font-size: 14px;
}
.movements-filter__field select
{
	width: 100%;
	margin: 0;
	/* перебиваем общее input { margin-bottom } если оно есть */
}
.movements-filter__actions
{
	display: flex;
	align-items: center;
	gap: 10px;
	margin-left: auto;
	/* кнопки прижимаются вправо */
}
@media (max-width: 720px) 
{
	.movements-filter__actions
	{
		margin-left: 0;
		width: 100%;
	}
	.movements-filter__field
	{
		flex: 1 1 100%;
	}
}
/* ---------- Кастомный выпадающий список красок ---------- */
.paint-picker
{
	position: relative;
	width: 100%;
}
.paint-picker__trigger
{
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	padding: 10px 12px;
	border: 1px solid #ccc;
	border-radius: 7px;
	background: #fff;
	color: #222;
	font: inherit;
	text-align: left;
	cursor: pointer;
}
.paint-picker__trigger:hover
{
	border-color: #2457c5;
}
.paint-picker__value
{
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.paint-picker__arrow
{
	margin-left: 8px;
	color: #666;
}
.paint-picker__dropdown
{
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	z-index: 100;
	max-height: 380px;
	overflow-y: auto;
	background: #fff;
	border: 1px solid #ccc;
	border-radius: 7px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.paint-picker__row
{
	display: grid;
	grid-template-columns: 60px minmax(180px, 1fr) 130px 160px 130px 90px;
	gap: 8px;
	width: 100%;
	padding: 8px 12px;
	border: 0;
	border-bottom: 1px solid #eee;
	background: transparent;
	color: #222;
	font: inherit;
	font-size: 14px;
	text-align: left;
	cursor: pointer;
}
.paint-picker__row:last-child
{
	border-bottom: 0;
}
.paint-picker__row:hover
{
	background: #f2f6ff;
}
.paint-picker__row[aria-selected="true"]
{
	background: #e6efff;
	font-weight: 600;
}
.paint-picker__row--head
{
	position: sticky;
	top: 0;
	z-index: 1;
	background: #f7f7f7;
	font-weight: 700;
	color: #555;
	cursor: default;
}
.paint-picker__cell--full
{
	grid-column: 1 / -1;
	color: #777;
}
.paint-picker__cell--code
{
	overflow-wrap: anywhere;
	font-family: "Consolas", "Courier New", monospace;
}
.paint-picker__cell--stock
{
	text-align: right;
	white-space: nowrap;
}
@media (max-width: 900px) 
{
	.paint-picker__row
	{
		grid-template-columns: 50px minmax(140px, 1fr) 110px 130px 110px 80px;
		font-size: 13px;
	}
}
@media (max-width: 600px) 
{
	.page-header
	{
		align-items: flex-start;
		flex-direction: column;
	}
	.search-form
	{
		align-items: stretch;
		flex-direction: column;
	}
	.search-form input
	{
		width: 100%;
	}
	.roles-grid
	{
		grid-template-columns: 1fr;
	}

	.roles-fieldset
	{
		padding: 14px 14px 16px;
	}
}
/* Заказы */
.order-item-row
{
	border: 1px solid #ddd;
	border-radius: 10px;
	padding: 18px;
	margin-bottom: 16px;
}
.order-item-row h3
{
	margin: 0;
}
.order-item-row label
{
	display: block;
	margin: 14px 0 6px;
	font-weight: 600;
}
select
{
	box-sizing: border-box;
	padding: 10px;
	border: 1px solid #ccc;
	border-radius: 7px;
	font: inherit;
}
/* Позиции заказа: fieldset оформлен как карточка */
.order-item-row
{
	border: 1px solid #ddd;
	border-radius: 10px;
	padding: 18px;
	margin: 0 0 16px;
	min-width: 0;
	/* чтобы flex/grid-дети не растягивали fieldset */
}
.order-item-legend
{
	padding: 0 8px;
	font-weight: 700;
	font-size: 17px;
}
.order-item-actions
{
	display: flex;
	justify-content: flex-end;
	margin-bottom: 12px;
}
.order-item-row h3
{
	/* h3 больше нет — оставлено на случай, если где-то ещё используется */
	margin: 0;
}

/*
#order-items
{
	padding-bottom: 200px;
}
*/

/* Окно «О программе» */
.about-menu-button
{
	padding: 7px 11px;
	border: 1px solid rgba(255,255,255,.28);
	border-radius: 6px;
	background: transparent;
	color: #fff;
	font: inherit;
	cursor: pointer;
}
.about-menu-button:hover
{
	background: rgba(255,255,255,.12);
}
.about-dialog
{
	width: min(560px, calc(100% - 32px));
	max-width: 560px;
	padding: 0;
	border: 1px solid #7b8490;
	border-radius: 9px;
	box-shadow: 0 18px 55px rgba(0,0,0,.35);
	color: #222;
	background: #f4f5f7;
}
.about-dialog::backdrop
{
	background: rgba(12,18,28,.58);
}
.about-dialog__titlebar
{
	min-height: 42px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 7px 10px 7px 15px;
	background: #20252b;
	color: #fff;
}
.about-dialog__close
{
	width: 30px;
	height: 30px;
	padding: 0;
	border-radius: 5px;
	background: transparent;
	color: #fff;
	font-size: 23px;
	line-height: 1;
}
.about-dialog__close:hover
{
	background: #b83232;
}
.about-dialog__body
{
	display: flex;
	align-items: flex-start;
	gap: 20px;
	padding: 24px;
}
.about-photo-placeholder
{
	width: 180px;
	height: 220px;
	overflow: hidden;
	border-radius: 8px;
	flex-shrink: 0;
}
.about-photo-placeholder img
{
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	object-position: center;
}
.about-dialog__text h2
{
	margin: 0 0 12px;
}
.about-dialog__text p
{
	margin: 8px 0;
	line-height: 1.45;
}
.about-version
{
	margin-top: 18px !important;
	color: #737373;
	font-size: 13px;
}
@media (max-width: 520px) 
{
	.about-dialog__body
	{
		flex-direction: column;
	}
	.about-photo-placeholder
	{
		width: 132px;
	}
}
/* Unified application interface — monitor.css is intentionally independent. */
:root
{
	--ui-bg: #f3f5f8;
	--ui-surface: #ffffff;
	--ui-border: #dce2ea;
	--ui-text: #202938;
	--ui-muted: #667085;
	--ui-primary: #2457c5;
	--ui-primary-hover: #1947a8;
	--ui-radius: 12px;
	--ui-shadow: 0 5px 18px rgba(25, 39, 60, .06);
}
body
{
	background: var(--ui-bg);
	color: var(--ui-text);
}
.topbar
{
	min-height: 64px;
	height: auto;
	gap: 18px;
}
.topbar nav
{
	align-items: center;
	flex-wrap: wrap;
	gap: 10px 18px;
}
.topbar nav a
{
	padding: 8px 2px;
	border-bottom: 2px solid transparent;
}
.topbar nav a:hover, .topbar nav a:focus-visible
{
	color: #dce8ff;
	border-bottom-color: #8fb2ff;
}
.container
{
	width: min(100%, 1440px);
	padding: 28px clamp(14px, 2.5vw, 32px) 48px;
}
.container h1
{
	font-size: clamp(1.55rem, 2.2vw, 2rem);
	line-height: 1.2;
	color: #172033;
}
.container h2
{
	font-size: 1.2rem;
}
.page-header
{
	align-items: flex-start;
	flex-wrap: wrap;
}
.page-header p, .muted
{
	color: var(--ui-muted);
}
.panel, .card, .login-box
{
	background: var(--ui-surface);
	border: 1px solid var(--ui-border);
	border-radius: var(--ui-radius);
	box-shadow: var(--ui-shadow);
}
/*
.panel
{
	padding: clamp(14px, 2vw, 22px);
}
*/
.container .button, .container button:not(.paint-picker__row)
{
	min-height: 40px;
	border-radius: 8px;
	background: var(--ui-primary);
	transition: background .15s ease, transform .15s ease;
}
.container .button:hover, .container button:not(.paint-picker__row):hover
{
	background: var(--ui-primary-hover);
}
.container .button:active, .container button:not(.paint-picker__row):active
{
	transform: translateY(1px);
}
.button-secondary
{
	background: #eef2f7;
	color: #273449;
	border: 1px solid var(--ui-border);
}
.button-secondary:hover
{
	background: #e2e8f0;
}
.button-small
{
	min-height: 32px;
	padding: 6px 10px;
	font-size: .9rem;
}
input, select, textarea
{
	max-width: 100%;
	min-height: 42px;
	border: 1px solid #cbd3df;
	border-radius: 8px;
	background: #fff;
	color: var(--ui-text);
	font: inherit;
	padding: 9px 11px;
}
input:focus, select:focus, textarea:focus
{
	outline: 3px solid rgba(36, 87, 197, .15);
	border-color: var(--ui-primary);
}
label
{
	margin: 12px 0 6px;
	color: #344054;
	font-weight: 600;
}
.form-panel
{
	max-width: 860px;
	padding: clamp(16px, 2.5vw, 28px);
}
.form-panel form.form-grid
{
	display: grid;
	grid-template-columns: minmax(150px, 230px) minmax(0, 1fr);
	align-items: center;
	gap: 10px 18px;
}
.form-panel form.form-grid label
{
	margin: 0;
}
.form-panel form.form-grid .form-actions, .form-panel form.form-grid .error-message, .form-panel form.form-grid .form-section
{
	grid-column: 1 / -1;
}
.form-actions
{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 12px;
}
.search-form
{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 18px;
}
.search-form input
{
	flex: 1 1 240px;
}
.search-form select
{
	flex: 0 1 220px;
}
.table-wrapper
{
	width: 100%;
	overflow-x: auto;
	overscroll-behavior-x: contain;
}
.table-wrapper table
{
	width: 100%;
	border-collapse: collapse;
}
.table-wrapper th
{
	background: #f6f8fb;
	color: #475467;
	font-size: .86rem;
	font-weight: 700;
	white-space: nowrap;
}
.table-wrapper th, .table-wrapper td
{
/*	padding: 11px 12px; */
	border-bottom: 1px solid #e8ecf2;
	text-align: left;
	vertical-align: middle;
}
/* Katalog barev: pevné proporce sloupců a zalamování dlouhých názvů. */
.table-wrapper .paints-table
{
	width: 100%;
	min-width: 0;
	table-layout: fixed;
}
.paints-table .col-ral
{
	width: 8%;
}
.paints-table .col-product-code
{
	width: 11%;
}
.paints-table .col-gloss
{
	width: 10%;
}
.paints-table .col-surface
{
	width: 12%;
}
.paints-table .col-manufacturer
{
	width: 11%;
}
.paints-table .col-curing
{
	width: 16%;
}
.paints-table .col-min-stock
{
	width: 10%;
}
.paints-table .col-current-stock
{
	width: 12%;
}
.paints-table .col-actions
{
	width: 10%;
}
.table-wrapper .paints-table th,
.table-wrapper .paints-table td
{
	white-space: normal;
	overflow-wrap: anywhere;
	word-break: normal;
}
.table-wrapper .paints-table th
{
	line-height: 1.3;
}
.table-wrapper .paints-table td.actions-cell
{
	text-align: center;
}
.table-wrapper tbody tr:hover
{
	background: #fafbfd;
}
.error-message
{
	padding: 11px 14px;
	margin-bottom: 14px;
	border: 1px solid #f2b8b5;
	border-radius: 8px;
	background: #fff3f2;
	color: #a12d28;
}
.status-active
{
	color: #167044;
	font-weight: 600;
}
.status-inactive
{
	color: #667085;
}
.checkbox-label
{
	display: flex;
	align-items: center;
	gap: 9px;
	font-weight: 400;
}
.checkbox-label input
{
	width: 18px;
	min-height: 18px;
}

/* ---------- Пагинация ---------- */

.pagination {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 2px 2px;
	margin: 10px 0 5px;
	padding: 6px 6px;
	border: 1px solid var(--ui-border);
	border-radius: var(--ui-radius);
	background: var(--ui-surface);
	box-shadow: var(--ui-shadow);
}

.pagination-summary {
	color: var(--ui-muted);
	font-size: 14px;
	white-space: nowrap;
}

.pagination-size {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
}

.pagination-size label {
	margin: 0;
	font-weight: 600;
	font-size: 14px;
	color: #344054;
}

.pagination-size select {
	min-height: 34px;
	padding: 4px 10px;
}

.pagination-pages {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px;
}

.pagination-page,
.pagination-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 10px;
	border: 1px solid var(--ui-border);
	border-radius: 8px;
	background: #fff;
	color: var(--ui-text);
	text-decoration: none;
	font-weight: 600;
	font-size: 14px;
	line-height: 1;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.pagination-page:hover,
.pagination-arrow:hover {
	border-color: var(--ui-primary);
	color: var(--ui-primary);
	background: #eef3ff;
}

.pagination-page.is-current {
	border-color: var(--ui-primary);
	background: var(--ui-primary);
	color: #fff;
	cursor: default;
}

.pagination-arrow.is-disabled {
	opacity: .4;
	cursor: not-allowed;
}

.pagination-gap {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	height: 36px;
	color: var(--ui-muted);
	font-weight: 600;
}

@media (max-width: 600px) {
	.pagination {
		grid-template-columns: 1fr;
		text-align: center;
	}

	.pagination-size {
		justify-content: center;
	}
}

.page-size-form
{
	display: flex;
	align-items: center;
	gap: 8px;
}
.page-size-form label
{
	margin: 0;
}
.page-size-form select
{
	min-height: 34px;
	padding: 4px 8px;
}
@media (max-width: 760px) 
{
	.materials-header .materials-actions
	{
		flex-wrap: wrap;
		align-items: stretch;
		gap: 12px;
	}
	.materials-header .search-form
	{
		flex: 1 1 100%;
		flex-wrap: wrap;
		width: 100%;
	}
	.materials-header .search-form input
	{
		flex: 1 1 100%;
		width: 100%;
	}
	.materials-header .materials-buttons
	{
		width: 100%;
		margin-left: 0;
		flex-wrap: wrap;
	}
	.topbar
	{
		padding: 12px 16px;
		align-items: flex-start;
		flex-direction: column;
	}
	.logo
	{
		font-size: 22px;
	}
	.topbar nav
	{
		width: 100%;
		flex-wrap: nowrap;
		overflow-x: auto;
		gap: 8px 16px;
		padding-bottom: 4px;
		-webkit-overflow-scrolling: touch;
	}
	.topbar nav a
	{
		flex: 0 0 auto;
		font-size: .92rem;
	}
	.container
	{
		padding: 20px 12px 36px;
	}
	.page-header
	{
		flex-direction: column;
		align-items: stretch;
	}
	.page-header > .button, .page-header > a.button
	{
		align-self: flex-start;
	}
	.form-panel
	{
		max-width: none;
	}
	.form-panel form.form-grid
	{
		grid-template-columns: minmax(0, 1fr);
		gap: 7px;
	}
	.form-panel form.form-grid label
	{
		margin-top: 8px;
	}
	.form-actions
	{
		margin-top: 14px;
	}
	.search-form
	{
		align-items: stretch;
	}
	.search-form input, .search-form select, .search-form button
	{
		flex: 1 1 100%;
		width: 100%;
	}
	.table-wrapper
	{
		margin-left: -2px;
		width: calc(100% + 4px);
	}
	.table-wrapper table
	{
		min-width: 680px;
	}
	.pagination
	{
		align-items: flex-start;
		flex-direction: column;
	}
	.pagination-controls
	{
		width: 100%;
		justify-content: space-between;
	}
}
@media (max-width: 420px) 
{
	.container h1
	{
		font-size: 1.45rem;
	}
	.panel
	{
		padding: 12px;
	}
	.container .button, .container button:not(.paint-picker__row)
	{
		padding: 10px 13px;
	}
	.pagination-controls
	{
		gap: 8px;
	}
}
.container > form:not(.search-form):not(#order-form)
{
	max-width: 900px;
	padding: clamp(16px, 2.5vw, 28px);
	background: var(--ui-surface);
	border: 1px solid var(--ui-border);
	border-radius: var(--ui-radius);
	box-shadow: var(--ui-shadow);
}
.container .form-group
{
	margin-bottom: 14px;
}
.container .form-group label
{
	margin: 0 0 6px;
}
.container .form-group input, .container .form-group select, .container .form-group textarea
{
	width: 100%;
}
@media (orientation: landscape) and (max-height: 520px) and (max-width: 950px) 
{
	.topbar
	{
		min-height: 54px;
		padding: 8px 14px;
	}
	.topbar nav
	{
		flex-wrap: nowrap;
		overflow-x: auto;
	}
	.container
	{
		padding: 16px 14px 28px;
	}
	.form-panel form.form-grid
	{
		grid-template-columns: minmax(130px, 190px) minmax(0, 1fr);
	}
	.table-wrapper
	{
		overflow-x: auto;
	}
}
.container .button.button-secondary
{
	background: #eef2f7;
	color: #273449;
	border: 1px solid var(--ui-border);
}
.container .button.button-secondary:hover
{
	background: #e2e8f0;
}
.container .button.button-small
{
	min-height: 32px;
	padding: 6px 10px;
	font-size: .9rem;
}
.form-panel form.form-grid > p
{
	grid-column: 1 / -1;
	margin: 4px 0;
}
/* ================================================================
   Shared forms
   ================================================================ */
.form-panel
{
	width: 100%;
	max-width: 860px;
	padding: clamp(16px, 2.5vw, 28px);
}
.form-panel > form
{
	width: 100%;
}
.form-panel form.form-grid
{
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 18px;
}
.form-section
{
	display: grid;
	gap: 14px;
	min-width: 0;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--ui-border);
}
.form-section h2
{
	margin: 0;
}
.form-fields-grid
{
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px 18px;
}
.form-field
{
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}
.form-field-full
{
	grid-column: 1 / -1;
}
.form-field label
{
	margin: 0;
}
.form-field input,
.form-field select,
.form-field textarea
{
	width: 100%;
	min-width: 0;
	margin: 0;
}
.form-field textarea
{
	resize: vertical;
}
.form-actions
{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 0;
}
.phone-input-group
{
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: 8px;
	width: 100%;
	min-width: 0;
}
.phone-input-group select
{
	flex: 0 0 112px;
	width: 112px;
	min-width: 112px;
	max-width: 112px;
}
.phone-input-group input[type="tel"]
{
	flex: 1 1 0;
	width: 0;
	min-width: 0;
}
/* ================================================================
   Select menus and custom paint picker
   ================================================================ */
select option
{
	background: #fff;
	color: var(--ui-text);
}
select option:checked,
select option:hover
{
	background: #e8f1fb;
	color: var(--ui-text);
}
.container button.paint-picker__trigger,
.container button.paint-picker__trigger:hover,
.container button.paint-picker__trigger:focus,
.container button.paint-picker__trigger:active
{
	background: #fff;
	color: var(--ui-text);
}
.container .paint-picker__row
{
	min-height: 0;
	border-radius: 0;
	background: #fff;
	color: var(--ui-text);
	transform: none;
}
.container .paint-picker__row:hover,
.container .paint-picker__row:focus-visible
{
	background: #e8f1fb;
	color: var(--ui-text);
}
.container .paint-picker__row[aria-selected="true"]
{
	background: #dceaf8;
	color: var(--ui-text);
}
.container .paint-picker__row--head,
.container .paint-picker__row--head:hover
{
	background: #f3f5f8;
	color: #475467;
	cursor: default;
}
@media (max-width: 760px) 
{
	.form-fields-grid
	{
		grid-template-columns: minmax(0, 1fr);
	}
	.form-field-full
	{
		grid-column: auto;
	}
}

.form-footer
{
	background: #f8fafc;
	padding: 10px 10px;
	border-top: 1px solid var(--border);
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
}
    
.btn
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 42px;
	padding: 0 20px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	cursor: pointer;
	transition: all 0.15s ease;
	border: 1px solid transparent;
}

.btn-secondary
{
	background: #ffffff;
	border-color: var(--border);
	color: #334155;
}
    
.btn-secondary:hover
{
	background: #f1f5f9;
	border-color: #cbd5e1;
}

.btn-primary
{
	background: var(--primary);
	color: #ffffff;
}

.btn-primary:hover
{
	background: var(--primary-hover);
	box-shadow: 0 2px 4px rgba(37, 99, 235, 0.2);
}

/* ---------- Блок выбора ролей ---------- */

.roles-fieldset
{
	margin: 0 0 18px;
	padding: 18px 20px 20px;
	border: 1px solid var(--ui-border);
	border-radius: var(--ui-radius);
	background: #f8fafc;
}

.roles-fieldset legend
{
	padding: 0 8px;
	color: #344054;
	font-weight: 700;
	font-size: 15px;
}

.roles-grid
{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 10px;
}

.role-card {
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	padding: 12px 14px;
	border: 1px solid #cbd3df;
	border-radius: 9px;
	background: #fff;
	color: var(--ui-text);
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

.role-card:hover {
	border-color: var(--ui-primary);
	box-shadow: 0 2px 8px rgba(36, 87, 197, .08);
}

.role-card input[type="checkbox"] {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	min-height: 18px;
	margin: 0;
	padding: 0;
	accent-color: var(--ui-primary);
	cursor: pointer;
}

.role-card__body {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
	line-height: 1.25;
}

.role-card__name
{
	font-weight: 600;
	font-size: 14px;
	line-height: 1.2;
}

.role-card__code
{
	color: var(--ui-muted);
	font-size: 12px;
	line-height: 1.2;
	letter-spacing: .02em;
}

/* Выбранная роль */

.role-card:has(input:checked)
{
	border-color: var(--ui-primary);
	background: #eef3ff;
	box-shadow: 0 0 0 2px rgba(36, 87, 197, .12);
}

.role-card:has(input:checked)
.role-card__name
{
	color: var(--ui-primary);
}

.role-card:has(input:focus-visible)
{
	outline: 3px solid rgba(36, 87, 197, .25);
	outline-offset: 2px;
}

.roles-hint
{
	margin: 0 0 12px;
	color: var(--ui-muted);
	font-size: 14px;
	line-height: 1.45;
}

/* ---------- Форма новой краски ---------- */

.paint-form {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.paint-form__row {
	display: grid;
	gap: 16px;
	min-width: 0;
}

.paint-form__row--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.paint-form__row .form-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.paint-form__row .form-field label {
	margin: 0;
}

.paint-form__row .form-field input,
.paint-form__row .form-field select {
	width: 100%;
	min-width: 0;
	margin: 0;
}

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

@media (max-width: 600px) {
	.paint-form__row--3 {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Строка "код страны + телефон" */
.phone-row {
	display: flex;
	align-items: stretch;
	gap: 8px;
	width: 100%;
	min-width: 0;
}

.phone-row__code {
	flex: 0 0 96px;       /* хватает для "🇨🇿 +420" */
	width: 96px;
	min-width: 96px;
	max-width: 96px;
	padding-left: 8px;
	padding-right: 4px;
}

.phone-row__input {
	flex: 1 1 0;
	width: 0;
	min-width: 0;
}

.form-field--hint {
	justify-content: flex-end;
}

.form-field--hint p {
	margin: 0;
	font-size: 13px;
	line-height: 1.4;
}

.nowrap
{
	white-space: nowrap;
}

/* Таблица сотрудников: неактивные записи приглушены */
.employees-table tbody tr.is-inactive td {
	color: #8a94a6;
	background: #fafbfd;
}

.employees-table tbody tr.is-inactive strong {
	color: #8a94a6;
	font-weight: 600;
}

.employees-table tbody tr.is-inactive .icon-button {
	opacity: 1;
	background: #eef2f7;
	color: #56617a;
}

.employees-table tbody tr.is-inactive .icon-button:hover {
	background: #2457c5;
	color: #fff;
}

.employees-table tbody tr.is-inactive:hover td {
	background: #f4f6fa;
}

/* Разделитель между активными и неактивными — опционально */
.employees-table tbody tr.is-inactive:first-of-type td,
.employees-table tbody tr:not(.is-inactive) + tr.is-inactive td {
	border-top: 2px solid #e4e9f1;
}

/* Таблица клиентов: неактивные записи приглушены */
.clients-table tbody tr.is-inactive td {
	color: #8a94a6;
	background: #fafbfd;
}

.clients-table tbody tr.is-inactive strong {
	color: #8a94a6;
	font-weight: 600;
}

.clients-table tbody tr.is-inactive .icon-button {
	background: #eef2f7;
	color: #56617a;
}

.clients-table tbody tr.is-inactive .icon-button:hover {
	background: #2457c5;
	color: #fff;
}

.clients-table tbody tr.is-inactive:hover td {
	background: #f4f6fa;
}

.clients-table tbody tr:not(.is-inactive) + tr.is-inactive td {
	border-top: 2px solid #e4e9f1;
}

/* Таблица типов výrobků: неактивные записи приглушены */
.products-table tbody tr.is-inactive td {
	color: #8a94a6;
	background: #fafbfd;
}

.products-table tbody tr.is-inactive strong {
	color: #8a94a6;
	font-weight: 600;
}

.products-table tbody tr.is-inactive .icon-button {
	background: #eef2f7;
	color: #56617a;
}

.products-table tbody tr.is-inactive .icon-button:hover {
	background: #2457c5;
	color: #fff;
}

.products-table tbody tr.is-inactive:hover td {
	background: #f4f6fa;
}

.products-table tbody tr:not(.is-inactive) + tr.is-inactive td {
	border-top: 2px solid #e4e9f1;
}

/* Низкий остаток краски */
.stock-low {
	color: #c0392b;
}

.stock-low-warning {
	margin-left: 4px;
	color: #c0392b;
}

/* Таблица красок: неактивные записи приглушены */
.paints-table tbody tr.is-inactive td {
	color: #8a94a6;
	background: #fafbfd;
}

.paints-table tbody tr.is-inactive .stock-low,
.paints-table tbody tr.is-inactive .stock-low-warning {
	color: #b97d78;
}

.paints-table tbody tr.is-inactive .icon-button {
	background: #eef2f7;
	color: #56617a;
}

.paints-table tbody tr.is-inactive .icon-button:hover {
	background: #2457c5;
	color: #fff;
}

.paints-table tbody tr.is-inactive:hover td {
	background: #f4f6fa;
}

.paints-table tbody tr:not(.is-inactive) + tr.is-inactive td {
	border-top: 2px solid #e4e9f1;
}

/* Таблица материалов: неактивные записи приглушены */
.materials-catalog-table tbody tr.is-inactive td {
	color: #8a94a6;
	background: #fafbfd;
}

.materials-catalog-table tbody tr.is-inactive strong {
	color: #8a94a6;
	font-weight: 600;
}

.materials-catalog-table tbody tr.is-inactive .stock-low,
.materials-catalog-table tbody tr.is-inactive .stock-low-warning {
	color: #b97d78;
}

.materials-catalog-table tbody tr.is-inactive .icon-button {
	background: #eef2f7;
	color: #56617a;
}

.materials-catalog-table tbody tr.is-inactive .icon-button:hover {
	background: #2457c5;
	color: #fff;
}

.materials-catalog-table tbody tr.is-inactive:hover td {
	background: #f4f6fa;
}

.materials-catalog-table tbody tr:not(.is-inactive) + tr.is-inactive td {
	border-top: 2px solid #e4e9f1;
}

/* ---------- Меню пользователя в шапке ---------- */

.user-menu {
	position: relative;
	display: inline-flex;
	align-items: center;
}

.user-menu__trigger {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 12px;
	border: 1px solid rgba(255, 255, 255, .25);
	border-radius: 7px;
	background: transparent;
	color: #fff;
	font: inherit;
	font-size: .95rem;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease;
}

.user-menu__trigger:hover,
.user-menu__trigger:focus-visible {
	background: rgba(255, 255, 255, .12);
	border-color: rgba(255, 255, 255, .45);
}

.user-menu__name {
	max-width: 180px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.user-menu__arrow {
	font-size: .7rem;
	line-height: 1;
	opacity: .8;
	transition: transform .15s ease;
}

.user-menu__trigger[aria-expanded="true"] .user-menu__arrow {
	transform: rotate(180deg);
}

.user-menu__dropdown {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	min-width: 180px;
	padding: 6px;
	background: #fff;
	border: 1px solid var(--ui-border, #dce2ea);
	border-radius: 9px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
	z-index: 50;
}

.user-menu__dropdown[hidden] {
	display: none;
}

.user-menu__logout {
	display: block;
	width: 100%;
	padding: 9px 12px;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: #a12d28;
	font: inherit;
	font-weight: 600;
	text-align: left;
	cursor: pointer;
}

.user-menu__logout:hover,
.user-menu__logout:focus-visible {
	background: #fff1f0;
}

/* На узких экранах меню не выходит за край */
@media (max-width: 760px) {
	.user-menu__dropdown {
		right: auto;
		left: 0;
	}
}