/* Metrix UI tokens (tz-full.md section 11). Fonts come from Google Fonts <link> in each page head. */
:root {
	--color-page: #edeeeb;
	--color-surface: #fdfdfc;
	--color-inset: #f2f3f0;
	--color-text: #35383a;
	--color-muted: #63686b;
	--color-border: #e3e4e1;
	--color-border-strong: #d2d4d0;
	--color-control-border: #8d918c;
	--color-accent: #a8e812;
	--color-accent-text: #35383a;
	--color-positive: #4e6b00;
	--color-negative: #b3392f;
	--color-warning: #8a5a08;
	--font-text: 'Onest', system-ui, sans-serif;
	--font-display: 'Unbounded', system-ui, sans-serif;
	--radius: 8px;
	--radius-card: 18px;
	--shadow-card: 0 1px 2px rgb(31 34 35 / 6%), 0 12px 28px -18px rgb(31 34 35 / 50%);
	--shadow-pop: 0 2px 6px rgb(31 34 35 / 8%), 0 26px 60px -26px rgb(31 34 35 / 55%);
	--control-height: 38px;
	--head-row-height: 34px;
	--space: 12px;
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	background: var(--color-page);
	color: var(--color-text);
	font-family: var(--font-text);
	font-size: 14px;
	-webkit-font-smoothing: antialiased;
}

a {
	color: var(--color-text);
	text-decoration: underline;
	text-decoration-color: var(--color-accent);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

::selection {
	background: var(--color-accent);
	color: var(--color-accent-text);
}

/* Keyboard focus ring: graphite on the light page; negative offset keeps it inside clipped scroll areas. */
:focus-visible {
	outline: 2px solid var(--color-text);
	outline-offset: 2px;
}

th button:focus-visible,
.warehouse-summary:focus-visible {
	outline-offset: -2px;
}

.toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space);
	padding: 14px clamp(16px, 4vw, 44px);
	border-bottom: 1px solid var(--color-border);
	background: #fbfbfa;
}

.toolbar h1 {
	margin: 0 auto 0 0;
	font-family: var(--font-display);
	font-size: 20px;
	font-weight: 600;
	letter-spacing: -0.03em;
}

main {
	padding: var(--space) clamp(16px, 4vw, 44px) calc(var(--space) * 2);
}

button {
	min-height: var(--control-height);
	padding: 0 14px;
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius);
	background: var(--color-surface);
	color: var(--color-text);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

button:hover:not(:disabled) {
	background: var(--color-inset);
}

button:disabled {
	cursor: default;
	opacity: 0.6;
}

button.primary {
	border-color: var(--color-accent);
	background: var(--color-accent);
	color: var(--color-accent-text);
}

button.primary:hover:not(:disabled) {
	background: #9bd810;
}

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

.error {
	padding: var(--space);
	border: 1px solid var(--color-negative);
	border-radius: var(--radius);
	background: var(--color-surface);
	color: var(--color-negative);
	white-space: pre-line;
}

.notice {
	padding: calc(var(--space) * 2);
	text-align: center;
	color: var(--color-muted);
}

.filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space) calc(var(--space) * 2);
	margin-bottom: var(--space);
}

.filters input[type='search'],
.field input,
.inline-form input,
.inline-form select {
	min-height: var(--control-height);
	padding: 0 12px;
	border: 1px solid var(--color-control-border);
	border-radius: var(--radius);
	background: var(--color-surface);
	color: var(--color-text);
	font: inherit;
}

.filters input[type='search'] {
	min-width: 260px;
}

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

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

.table-scroll {
	max-height: calc(100vh - 160px);
	overflow: auto;
	border-radius: var(--radius-card);
	background: var(--color-surface);
	box-shadow: var(--shadow-card);
}

table {
	border-collapse: separate;
	border-spacing: 0;
	width: max-content;
	min-width: 100%;
}

th,
td {
	padding: 6px 10px;
	border-bottom: 1px solid var(--color-border);
	text-align: left;
	vertical-align: top;
	white-space: nowrap;
	background: var(--color-surface);
}

/* Fixed row heights let the second header row and «Итого» stick right under the previous one. */
thead th,
.totals-row td {
	height: var(--head-row-height);
	padding-block: 0;
	vertical-align: middle;
	position: sticky;
	z-index: 1;
}

thead th {
	background: var(--color-inset);
	color: var(--color-muted);
	font-size: 13px;
}

thead tr:first-child th {
	top: 0;
}

/* Second header row: the warehouse subcolumns. */
thead tr:nth-child(2) th {
	top: var(--head-row-height);
}

.totals-row td {
	top: calc(var(--head-row-height) * 2);
	background: var(--color-inset);
	color: var(--color-text);
	font-family: var(--font-display);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: -0.02em;
	border-bottom: 2px solid var(--color-border-strong);
}

.group-start {
	border-left: 1px solid var(--color-border);
}

.group-title {
	text-align: center;
	font-weight: 600;
}

/* Without warehouses the header is one row. */
.single-row .totals-row td {
	top: var(--head-row-height);
}

td.depleted {
	color: var(--color-negative);
}

th button {
	min-height: 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font-weight: 600;
	text-align: inherit;
}

th button:hover:not(:disabled) {
	background: none;
	color: var(--color-text);
}

/* Numbers (and their «—»/«нет продаж» placeholders) right, with the header over them; text and dates stay left. */
th.numeric,
td.numeric {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

/* Wide scrolling tables: thin column separators, a stronger one between warehouse groups. */
.table-scroll :is(th, td) + :is(th, td) {
	border-left: 1px solid var(--color-border);
}

.table-scroll .group-start {
	border-left-color: var(--color-border-strong);
}

/* The frozen first column draws its own edge, so the next cell needs none. */
.table-scroll .sticky-column + :is(th, td) {
	border-left: 0;
}

/* Article stays visible on horizontal scroll; the opaque background hides cells beneath. */
.sticky-column {
	position: sticky;
	left: 0;
	z-index: 1;
	border-right: 1px solid var(--color-border-strong);
}

thead .sticky-column,
.totals-row .sticky-column {
	z-index: 3;
}

.warning {
	cursor: help;
}

/* The glyph is drawn by CSS so copied cell text does not pick up «!». */
.mark::before {
	content: '!';
}

#show-more {
	display: block;
	margin: var(--space) auto 0;
}

tbody tr[data-product-id] {
	cursor: pointer;
}

/* Zebra rows, between surface and inset; opaque so the frozen column still hides what scrolls under it. */
.table-scroll tbody tr:nth-child(even) td {
	background: #f8f8f6;
}

tbody tr[data-product-id]:hover td {
	background: var(--color-inset);
}

/* Section 8 panel: text wraps to the panel width, no horizontal scroll. */
.product-panel {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 10;
	width: min(640px, 100vw);
	padding: var(--space) calc(var(--space) * 1.5);
	overflow-x: hidden;
	overflow-y: auto;
	background: var(--color-surface);
	border-radius: var(--radius-card) 0 0 var(--radius-card);
	box-shadow: var(--shadow-pop);
	overflow-wrap: anywhere;
}

.panel-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--space);
}

.panel-header h2 {
	margin: 0;
	font-family: var(--font-display);
	font-size: 17px;
	font-weight: 600;
	letter-spacing: -0.03em;
}

.panel-header button {
	flex: none;
	width: 32px;
	min-height: 32px;
	padding: 0;
	border: 0;
	background: var(--color-inset);
	font-size: 18px;
	line-height: 1;
}

.panel-header p {
	margin: 4px 0 0;
}

.panel-section h3 {
	margin: calc(var(--space) * 1.5) 0 6px;
	font-size: 15px;
}

.panel-section h4 {
	margin: var(--space) 0 4px;
	font-size: 13px;
}

.panel-headline {
	margin: 6px 0;
	font-weight: 600;
}

.panel-note {
	color: var(--color-muted);
	font-size: 12px;
}

.panel-table th {
	background: var(--color-inset);
}

.panel-table {
	width: 100%;
	min-width: 0;
	table-layout: fixed;
	font-size: 12px;
}

.panel-table th,
.panel-table td {
	position: static;
	height: auto;
	padding: 4px 6px;
	white-space: normal;
}

.panel-table th.numeric,
.panel-table td.numeric {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.batch-used td {
	color: var(--color-muted);
}

.batch-in-stock td {
	font-weight: 600;
}

.warehouse {
	border-bottom: 1px solid var(--color-border);
	padding: 6px 0;
}

.warehouse-summary {
	display: flex;
	gap: 6px;
	list-style: none;
	cursor: pointer;
}

.warehouse-summary::-webkit-details-marker {
	display: none;
}

.warehouse-summary::before {
	content: '▸';
}

.warehouse[open] > .warehouse-summary::before {
	content: '▾';
}

.warehouse-summary-grid {
	display: grid;
	flex: 1;
	min-width: 0;
	grid-template-columns: 1fr repeat(3, auto);
	gap: 2px var(--space);
}

.warehouse-summary-grid .warehouse-name {
	font-weight: 600;
}

.warehouse-summary-grid > :last-child {
	grid-column: 1 / -1;
	justify-self: start;
	font-size: 12px;
}

.verdict {
	margin: 4px 0;
}

.history {
	margin: 0;
	padding-left: 18px;
}

[hidden] {
	display: none !important;
}

.urgency-critical {
	color: var(--color-negative);
}

.urgency-warning {
	color: var(--color-warning);
}

/* Status badges (mockup: 12px/600 text, 5px radius, tinted background). */
.badge,
.warning,
.verdict,
.converges,
.diverges,
#warehouses-hint {
	display: inline-block;
	padding: 2px 7px;
	border-radius: 5px;
	background: var(--color-inset);
	color: var(--color-muted);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	white-space: normal;
}

.badge-negative {
	background: rgb(179 57 47 / 10%);
	color: var(--color-negative);
}

.badge-positive,
.converges {
	background: rgb(168 232 18 / 25%);
	color: var(--color-positive);
}

.warning,
.diverges,
.verdict.uncovered {
	background: rgb(138 90 8 / 12%);
	color: var(--color-warning);
}

/* Notes between panel lines stay on their own line. */
p.verdict {
	display: block;
	width: fit-content;
}

/* Status mark next to a value: a small round «!» on the value's line, the text on hover.
   Fixed size and vertical-align keep the row one line tall. */
.mark {
	display: inline-block;
	width: 14px;
	height: 14px;
	margin-inline: 6px;
	border-radius: 50%;
	font-size: 10px;
	font-weight: 700;
	line-height: 14px;
	text-align: center;
	vertical-align: 1px;
	cursor: help;
}

/* Before a right-aligned number the gap goes on the number's side only. */
td.numeric > .mark:first-child {
	margin-left: 0;
}

td:not(.numeric) > .mark:last-child {
	margin-right: 0;
}

.mark-negative {
	background: var(--color-negative);
	color: var(--color-surface);
}

.mark-warning {
	background: var(--color-warning);
	color: var(--color-surface);
}

.mark:focus-visible {
	outline: 2px solid var(--color-text);
	outline-offset: 1px;
}

/* The padding must not push the figure off the column's right edge. */
.numeric > .badge {
	margin-right: -7px;
}

/* A badge in place of a table value (e.g. «закончился») must not make the row taller. */
/* Scoped to the data tables: badges in other tables (users page) keep their padding. */
.table-scroll td > .badge {
	padding-block: 0;
	vertical-align: top;
}

.picker {
	position: relative;
}

.popover {
	position: absolute;
	z-index: 10;
	top: 100%;
	left: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 220px;
	max-height: 60vh;
	margin-top: 4px;
	padding: var(--space);
	overflow-y: auto;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-card);
	background: var(--color-surface);
	box-shadow: var(--shadow-pop);
}

.popover-actions {
	display: flex;
	gap: var(--space);
}

.popover p {
	margin: 0;
	max-width: 280px;
}

/* Signed-in user, «Доступ» and «Выйти» in the page header. */
.user-nav {
	display: flex;
	align-items: center;
	gap: var(--space);
}

.card {
	margin-bottom: calc(var(--space) * 2);
	padding: calc(var(--space) * 2);
	border-radius: var(--radius-card);
	background: var(--color-surface);
	box-shadow: var(--shadow-card);
}

.card h1,
.card h2 {
	margin: 0 0 var(--space);
	font-weight: 700;
	letter-spacing: -0.03em;
}

.auth-card h1 {
	font-family: var(--font-display);
	font-weight: 600;
}

.field {
	display: flex;
	flex-direction: column;
	gap: 4px;
	color: var(--color-muted);
	font-weight: 500;
}

.inline-form {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--space);
}

/* Sign-in page: one centred card. */
.auth-page main {
	display: flex;
	justify-content: center;
	padding-top: 15vh;
}

.auth-card {
	display: flex;
	flex-direction: column;
	gap: var(--space);
	width: min(360px, 100%);
}

.access-page {
	max-width: 900px;
}

.users-table {
	width: 100%;
}

.users-table th {
	background: var(--color-inset);
	color: var(--color-muted);
	font-size: 13px;
}

.row-actions > * + * {
	margin-left: var(--space);
}

.disabled-user td:not(.row-actions) {
	color: var(--color-muted);
}

/* «Юнит-экономика»: column headers with a formula in the tooltip. */
th.hint {
	cursor: help;
	text-decoration: underline dotted;
	text-underline-offset: 3px;
}

.unit-section {
	margin-top: calc(var(--space) * 2);
	max-width: 1240px;
}

.unit-table {
	width: 100%;
	min-width: 0;
}

/* The totals table is wider than the other sections: the card grows with it up to the page width and scrolls beyond that, instead of the table spilling out of the card. */
.unit-totals {
	width: fit-content;
	max-width: 100%;
	overflow-x: auto;
}

.unit-name {
	max-width: 280px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.unit-table th {
	background: var(--color-inset);
	color: var(--color-muted);
	font-size: 13px;
}

.unit-table .total-line td {
	font-weight: 700;
	border-top: 2px solid var(--color-border-strong);
}

#moysklad-note {
	margin: 0 0 var(--space);
}

/* Profit columns while Ozon Performance ads are not counted: a small line under the title. */
.header-note {
	display: block;
	color: var(--color-warning);
	font-size: 12px;
	font-weight: 500;
	cursor: help;
}

td.negative-value {
	color: var(--color-negative);
}

/* Loss-making products: a red tint over the zebra, a red edge on the first cell. */
.table-scroll tbody tr.loss td {
	background: #fbeeec;
}

.table-scroll tbody tr.loss td:first-child {
	box-shadow: inset 3px 0 0 var(--color-negative);
}

.legend {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.legend-loss {
	display: inline-block;
	width: 14px;
	height: 14px;
	border-radius: 3px;
	background: #fbeeec;
	box-shadow: inset 3px 0 0 var(--color-negative);
}

/* «Юнит-экономика»: the owner's tax rates above the table; compact, the table is what matters. */
.rates-card {
	width: fit-content;
	max-width: 100%;
}

.rates-card .field input {
	width: 7em;
}

.rates-card p {
	margin: var(--space) 0 0;
}

/* Task 05: matching an unmatched Ozon offer_id to a MoySklad product. The search form wraps when the
   page is narrow; table cells do not, so these sections scroll beyond that instead of the table
   spilling out of the card (as .unit-totals). */
#unmatched-section,
#links-section {
	overflow-x: auto;
}

/* «товар МойСклад не найден: удалён или в архиве, привяжите заново» and the search status are long:
   they wrap, the numbers do not. */
.unit-reason {
	min-width: 12em;
	white-space: normal;
}

.link-cell {
	white-space: normal;
}

.link-form {
	align-items: center;
}

.link-form input {
	width: 14em;
}

.link-form select {
	max-width: 22em;
}