/* =====================================================================================================
   JASPER PCOS — UI STYLESHEET
   Design tokens first, then base, shared components, app shell, page layouts, feature blocks, mobile.
   Sizes are px on a fixed scale (never vw — vw text shrank to ~9px on laptops). The font-scale control
   (root-controller.js fontScaleSystem) zooms <body>, which scales all of this uniformly.
   Rules that must hold (see CLAUDE.md "Recurring lessons"):
   - never put `transform` (or a transform animation) on an ancestor of a position:fixed element — modals,
     #notification-bar, the autocomplete dropdowns and #bottom-sheet all rely on the viewport as their
     containing block. Transforms here only ever sit on the fixed element itself or on leaf content.
   - every autocomplete rule stays scoped under #root: root-controller.js moves an open older-system list
     into the page's #root (not <body>), and applications-controller.js positions its shared dropdown with
     inline top/left/width styles that must apply instantly (no transition on those properties).
   ===================================================================================================== */

/* THEME TOKENS (light default) */
:root{
	--page: #F2F5F6;
	--surface: #FFFFFF;
	--sunken: #F6F8F9;
	--hover: #EEF3F4;
	--border: #DFE5E8;
	--border-strong: #C5CFD4;

	--ink: #12191C;
	--ink-2: #45525A;
	--ink-3: #66747B;
	--placeholder: #98A4AA;

	--brand: #1D7488;
	--brand-hover: #176477;
	--brand-press: #125366;
	--brand-text: #1A6A7D;
	--brand-50: #EAF5F7;
	--brand-100: #D2EAEF;
	--brand-200: #A6D4DD;
	--on-brand: #FFFFFF;
	--focus: #1D748866;

	--header: #0E3A45;
	--header-2: #164C59;
	--on-header: #E6F2F4;
	--on-header-muted: #9CC3CC;
	/* Admin/manager/root panel accent — reddish, so management areas read apart from the teal work area */
	--panel-accent: #F4A097;
	--panel-accent-bg: rgba(244, 160, 151, .16);
	--panel-ink: #B8433A;

	/* Pipeline stage colors — tables.ApplicationStatusEnum: 1 Замер (2 folds into it), 3 Продажа,
	   4 Фин. аудит, 5 Завод, 6 Готово */
	--s1-bg: #E8F0FD; --s1-fg: #2458B8; --s1-dot: #3B74DB;
	--s3-bg: #F1ECFC; --s3-fg: #6340B0; --s3-dot: #7C57D1;
	--s4-bg: #FDF3E3; --s4-fg: #95600E; --s4-dot: #D98C18;
	--s5-bg: #E4F3F6; --s5-fg: #155F70; --s5-dot: #1D7488;
	--s6-bg: #E6F5EC; --s6-fg: #1B6E3E; --s6-dot: #22945A;

	--success: #1E8A4E; --success-bg: #E6F5EC;
	--warning: #95600E; --warning-bg: #FDF3E3; --warning-line: #E3A33B;
	--danger: #C2352B; --danger-hover: #A92C23; --danger-bg: #FCECEA;
	--info: #2458B8; --info-bg: #E8F0FD;

	--scrim: rgba(10, 22, 26, .45);
	--shadow-sm: 0 1px 2px rgba(16, 32, 38, .06);
	--shadow-md: 0 2px 4px rgba(16, 32, 38, .04), 0 6px 16px rgba(16, 32, 38, .08);
	--shadow-lg: 0 8px 24px rgba(16, 32, 38, .12), 0 24px 56px rgba(16, 32, 38, .16);

	--r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-pill: 999px;
	--fast: 120ms; --base: 180ms; --slow: 260ms;
	--ease: cubic-bezier(.2, .8, .2, 1);
	--spring: cubic-bezier(.34, 1.36, .64, 1);
	--slower: 360ms;

	--fs-xs: 12px; --fs-sm: 13px; --fs-md: 14px; --fs-lg: 16px; --fs-xl: 18px; --fs-2xl: 22px; --fs-3xl: 28px;

	--header-h: 56px;
	--gutter: 24px;
	--control-h: 36px;
}
/* THEME TOKENS (dark overrides) — applied when the user enables dark mode (user menu in component-header.html) */
:root[data-theme="dark"]{
	color-scheme: dark;
	--page: #0D1214; --surface: #151C1F; --sunken: #1A2327; --hover: #1F2A2F;
	--border: #283338; --border-strong: #3A4850;
	--ink: #E7EDEF; --ink-2: #B4C0C5; --ink-3: #8C9AA0; --placeholder: #66757C;
	--brand: #1F8196; --brand-hover: #2690A6; --brand-press: #1A6F82; --brand-text: #62C3D4;
	--brand-50: #12292F; --brand-100: #173741; --brand-200: #235361; --on-brand: #FFFFFF; --focus: #62C3D466;
	--header: #0A2027; --header-2: #123039; --on-header: #DDEBEE; --on-header-muted: #86AEB7;
	--panel-accent: #F4A097; --panel-accent-bg: rgba(244, 160, 151, .14); --panel-ink: #F08A80;
	--s1-bg: #16233B; --s1-fg: #8DB2F5; --s1-dot: #5C8FEA;
	--s3-bg: #221A38; --s3-fg: #BCA5F2; --s3-dot: #9677E0;
	--s4-bg: #2D2213; --s4-fg: #F0C27A; --s4-dot: #E3A33B;
	--s5-bg: #12292F; --s5-fg: #7FD0DE; --s5-dot: #3FB0C4;
	--s6-bg: #132A1E; --s6-fg: #86D8A8; --s6-dot: #3DBA75;
	--success: #5CCB8D; --success-bg: #132A1E;
	--warning: #F0C27A; --warning-bg: #2D2213; --warning-line: #E3A33B;
	--danger: #F08A80; --danger-hover: #F5A199; --danger-bg: #331A18;
	--info: #8DB2F5; --info-bg: #16233B;
	--scrim: rgba(0, 0, 0, .6);
	--shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
	--shadow-md: 0 2px 6px rgba(0, 0, 0, .3), 0 8px 20px rgba(0, 0, 0, .3);
	--shadow-lg: 0 12px 32px rgba(0, 0, 0, .45), 0 24px 64px rgba(0, 0, 0, .4);
}

/* ===== BASE ===== */
*{
	font-family: "Arimo", "Liberation Sans", Arial, sans-serif;
	font-optical-sizing: auto;
}
body{
	margin: 0;
	padding: 0;
	background: var(--page);
	color: var(--ink);
	font-size: var(--fs-md);
	line-height: 1.45;
	-webkit-font-smoothing: antialiased;
}
/* Form controls don't inherit `color` from the page by default — without this any control that doesn't set
   its own color renders dark text regardless of theme */
input, select, textarea, button{
	color: inherit;
	font-size: inherit;
}
*{
	scrollbar-color: var(--border-strong) transparent;
}
:focus-visible{
	outline: 3px solid var(--focus);
	outline-offset: 1px;
}
::placeholder{
	color: var(--placeholder);
	opacity: 1;
}
hr{
	border: none;
	height: 1px;
	background: var(--border);
}

/* ROUTE TRANSITION — every routed partial's root element is a fresh id="root" node, so this restarts on each
   navigation. Opacity only: #root wraps every fixed-position element on the page (see header note). */
@keyframes route-fade-in{
	from{ opacity: 0; }
	to{ opacity: 1; }
}
ng-view > #root{
	animation: route-fade-in var(--slow) var(--ease) backwards;
}
@keyframes fade-in{
	from{ opacity: 0; }
	to{ opacity: 1; }
}
@keyframes spin{
	to{ transform: rotate(360deg); }
}

/* ===== NOTIFICATION SYSTEM — a single toast card, bottom-right ===== */
#notification-bar{
	position: fixed;
	z-index: 9999;
	right: 16px;
	bottom: 16px;
	display: flex;
	align-items: center;
	gap: 12px;
	width: max-content;
	max-width: min(420px, calc(100vw - 32px));
	box-sizing: border-box;
	padding: 12px 12px 12px 16px;
	background: var(--surface);
	color: var(--ink);
	border: 1px solid var(--border);
	border-left: 4px solid var(--ink-3);
	border-radius: var(--r-md);
	box-shadow: var(--shadow-md);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateX(40px);
	transition: opacity var(--base) var(--ease), transform var(--slower) var(--spring), visibility var(--base);
}
#notification-bar.active{
	opacity: 1;
	visibility: visible;
	transform: none;
}
#notification-bar > i{
	font-size: 18px;
	flex-shrink: 0;
}
#notification-bar p{
	margin: 0;
	padding: 0;
	font-size: var(--fs-md);
	line-height: 1.4;
	font-weight: 500;
}
#notification-bar button{
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	padding: 0;
	margin: 0 0 0 8px;
	border: none;
	border-radius: var(--r-sm);
	background: none;
	color: var(--ink-3);
	font-size: 14px;
	cursor: pointer;
	flex-shrink: 0;
}
#notification-bar button:hover{
	background: var(--hover);
	color: var(--ink);
}
#notification-bar.notification-state-1{ border-left-color: var(--info); }
#notification-bar.notification-state-1 > i{ color: var(--info); }
#notification-bar.notification-state-2{ border-left-color: var(--success); }
#notification-bar.notification-state-2 > i{ color: var(--success); }
#notification-bar.notification-state-3{ border-left-color: var(--warning-line); }
#notification-bar.notification-state-3 > i{ color: var(--warning); }
#notification-bar.notification-state-4{ border-left-color: var(--danger); }
#notification-bar.notification-state-4 > i{ color: var(--danger); }

/* ===== AUTHORIZATION ROUTE ===== */
#root .auth-root{
	display: flex;
	flex-direction: column;
	align-items: center;
	min-height: 100vh;
	box-sizing: border-box;
	padding: 32px 16px;
	background:
		radial-gradient(1200px 500px at 50% -10%, var(--brand-50), transparent 70%),
		var(--page);
}
#root .auth-root > img{
	height: 16px;
	opacity: .8;
}
#root .auth-root form{
	margin-top: auto;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 360px;
	box-sizing: border-box;
	padding: 32px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-md);
	color: var(--ink);
}
#root .auth-root form img{
	height: 36px;
	margin-bottom: 16px;
}
#root .auth-root form img.auth-company-logo{
	height: 64px;
	max-width: 200px;
	align-self: center;
	object-fit: contain;
	border-radius: var(--r-md);
}
#root .auth-root form .auth-company-name{
	margin: -12px 0 20px;
	text-align: center;
	font-size: var(--fs-md);
	font-weight: 500;
	color: var(--brand-text);
}
#root .auth-root form h1{
	margin: 0 0 20px;
	font-size: var(--fs-2xl);
	font-weight: 700;
	text-align: center;
}
#root .auth-root form input{
	width: 100%;
	box-sizing: border-box;
	height: 40px;
	padding: 0 12px;
	margin-bottom: 10px;
	border: 1px solid var(--border-strong);
	border-radius: var(--r-md);
	background: var(--surface);
	color: var(--ink);
	font-size: var(--fs-md);
	transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
#root .auth-root form input:focus{
	outline: none;
	border-color: var(--brand);
	box-shadow: 0 0 0 3px var(--focus);
}
#root .auth-root form font{
	margin-bottom: 10px;
	font-size: var(--fs-sm);
	font-weight: 500;
	text-align: left;
	color: var(--danger);
}
#root .auth-root form button{
	width: 100%;
	height: 42px;
	margin-top: 6px;
	border: none;
	border-radius: var(--r-md);
	font-size: var(--fs-lg);
	font-weight: 700;
	background: var(--brand);
	color: var(--on-brand);
	cursor: pointer;
	box-shadow: var(--shadow-sm);
	transition: background var(--fast) var(--ease);
}
#root .auth-root form button:hover{
	background: var(--brand-hover);
}
#root .auth-root .auth-footer{
	width: 100%;
	max-width: 360px;
	margin-top: auto;
	padding-top: 24px;
	color: var(--ink-3);
	text-align: center;
}
#root .auth-root .auth-footer span{
	font-size: var(--fs-xs);
}
#root .auth-root .auth-footer span a{
	color: var(--ink-3);
}
#root .auth-root .auth-footer .auth-footer-meta{
	margin: 16px auto 0;
	display: flex;
	gap: 16px;
	width: fit-content;
}
#root .auth-root .auth-footer .language-select{
	display: block;
	margin: 12px auto 0;
	height: 32px;
	padding: 0 8px;
	background: var(--surface);
	border: 1px solid var(--border-strong);
	border-radius: var(--r-md);
	font-size: var(--fs-sm);
	color: var(--ink-2);
	cursor: pointer;
}

/* ===== DEFAULT COMPONENTS ===== */
/* Buttons — #confirm-modal lives in root.html outside every #root, so it's listed alongside */
#root .jasper-default-button, #confirm-modal .jasper-default-button{
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: var(--control-h);
	padding: 0 16px;
	box-sizing: border-box;
	border: 1px solid transparent;
	border-radius: var(--r-md);
	background: var(--brand);
	color: var(--on-brand);
	font-size: var(--fs-md);
	font-weight: 500;
	white-space: nowrap;
	cursor: pointer;
	box-shadow: var(--shadow-sm);
	transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease), color var(--fast) var(--ease), box-shadow var(--fast) var(--ease), transform var(--fast) var(--ease);
}
#root .jasper-default-button:hover, #confirm-modal .jasper-default-button:hover{
	background: var(--brand-hover);
}
#root .jasper-default-button:active:not(:disabled), #confirm-modal .jasper-default-button:active:not(:disabled){
	background: var(--brand-press);
	transform: translateY(1px);
}
#root .jasper-default-button.selected{
	background: var(--brand-press);
	box-shadow: inset 0 0 0 1px var(--brand-200);
}
#root .jasper-default-button:disabled, #confirm-modal .jasper-default-button:disabled{
	opacity: .5;
	cursor: not-allowed;
	box-shadow: none;
}
#root .jasper-default-button.jasper-secondary-button, #confirm-modal .jasper-default-button.jasper-secondary-button{
	background: var(--surface);
	color: var(--ink);
	border-color: var(--border-strong);
}
#root .jasper-default-button.jasper-secondary-button:hover:not(:disabled), #confirm-modal .jasper-default-button.jasper-secondary-button:hover:not(:disabled){
	background: var(--hover);
	border-color: var(--ink-3);
}
#root .jasper-default-button.jasper-danger-button, #confirm-modal .jasper-default-button.jasper-danger-button{
	background: var(--surface);
	color: var(--danger);
	border-color: var(--border-strong);
}
#root .jasper-default-button.jasper-danger-button:hover:not(:disabled), #confirm-modal .jasper-default-button.jasper-danger-button:hover:not(:disabled){
	background: var(--danger-bg);
	border-color: var(--danger);
}
#confirm-modal .jasper-default-button.jasper-danger-solid-button{
	background: var(--danger);
	color: #FFFFFF;
}
#confirm-modal .jasper-default-button.jasper-danger-solid-button:hover:not(:disabled){
	background: var(--danger-hover);
}
#root .jasper-default-button i, #confirm-modal .jasper-default-button i{
	font-size: 14px;
}
/* Icon-only square button (overview's regenerate-documents); its label lives in title/aria-label */
#root .jasper-default-button.jasper-icon-button{
	width: var(--control-h);
	padding: 0;
}
/* Loading state keeps the button's width: every button here swaps its label <span ng-hide="loading"> for a
   spinner <i ng-show="loading">; keep the hidden label's box and overlay the spinner instead of collapsing */
#root .jasper-default-button > span.ng-hide:has(+ i.fa-spin){
	display: inline !important;
	visibility: hidden;
}
#root .jasper-default-button > span:has(+ i.fa-spin:not(.ng-hide)) + i.fa-spin{
	position: absolute;
	left: calc(50% - 7px);
	top: calc(50% - 7px);
}

/* Inputs / selects / textareas */
#root .jasper-default-input{
	position: relative;
	box-sizing: border-box;
	height: var(--control-h);
	padding: 0 12px;
	border: 1px solid var(--border-strong);
	border-radius: var(--r-md);
	background: var(--surface);
	color: var(--ink);
	font-size: var(--fs-md);
	transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease), background var(--fast) var(--ease);
}
#root textarea.jasper-default-input{
	height: auto;
	min-height: 80px;
	padding: 8px 12px;
	line-height: 1.45;
	resize: vertical;
}
#root input[type="file"].jasper-default-input{
	height: auto;
	padding: 6px 8px;
	font-size: var(--fs-sm);
}
#root select.jasper-default-input{
	-moz-appearance: none;
	appearance: none;
	padding-right: 32px;
	cursor: pointer;
	background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
	background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%;
	background-size: 5px 5px;
	background-repeat: no-repeat;
}
#root .jasper-default-input:hover:not(:disabled):not(:focus){
	border-color: var(--ink-3);
}
#root .jasper-default-input:focus{
	outline: none;
	border-color: var(--brand);
	box-shadow: 0 0 0 3px var(--focus);
}
#root .jasper-default-input:disabled{
	background-color: var(--sunken);
	color: var(--ink-3);
	border-style: dashed;
	cursor: not-allowed;
	opacity: 1;
}
#root input[type="number"].jasper-default-input{
	-moz-appearance: textfield;
	appearance: textfield;
	font-variant-numeric: tabular-nums;
}
#root input[type="number"].jasper-default-input::-webkit-inner-spin-button,
#root input[type="number"].jasper-default-input::-webkit-outer-spin-button{
	-webkit-appearance: none;
	margin: 0;
}
/* Read-only wrapper around a page's form fields: <fieldset ng-disabled="!canWrite()"> disables every descendant
   control natively, so it must add no chrome of its own. The -stack variant stands in for a flex-column form. */
#root fieldset.permission-fieldset{
	min-width: 0;
	margin: 0;
	padding: 0;
	border: none;
}
#root fieldset.permission-fieldset.permission-fieldset-stack{
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* Checkbox: <label class="jasper-default-checkbox"><input type="checkbox"><span class="checkbox-box"><i></i></span><span class="checkbox-text">...</span></label>
   The native input stays in the DOM (keyboard/ng-model still work) but is visually hidden; .checkbox-box draws the control. */
#root .jasper-default-checkbox{
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 12px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--r-md);
	cursor: pointer;
	user-select: none;
	transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
#root .jasper-default-checkbox:hover{
	border-color: var(--border-strong);
}
/* Row tint via :has() so consumers don't need to mirror ng-model state into a class */
#root .jasper-default-checkbox:has(input[type="checkbox"]:checked){
	background: var(--brand-50);
	border-color: var(--brand-200);
}
#root .jasper-default-checkbox input[type="checkbox"]{
	position: absolute;
	width: 1px;
	min-width: 0;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}
#root .jasper-default-checkbox .checkbox-box{
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	box-sizing: border-box;
	background: var(--surface);
	border: 1.5px solid var(--border-strong);
	border-radius: 5px;
	color: var(--on-brand);
	transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
#root .jasper-default-checkbox .checkbox-box i{
	font-size: 11px;
	visibility: hidden;
}
#root .jasper-default-checkbox input[type="checkbox"]:checked + .checkbox-box{
	background: var(--brand);
	border-color: var(--brand);
}
#root .jasper-default-checkbox input[type="checkbox"]:checked + .checkbox-box i{
	visibility: visible;
}
#root .jasper-default-checkbox input[type="checkbox"]:focus-visible + .checkbox-box{
	outline: 3px solid var(--focus);
	outline-offset: 1px;
}
#root .jasper-default-checkbox input[type="checkbox"]:disabled + .checkbox-box{
	background: var(--sunken);
	border-color: var(--border-strong);
}
#root .jasper-default-checkbox .checkbox-text{
	font-size: var(--fs-sm);
	color: var(--ink);
}
/* A column of rows; each .checkbox-row is a 2-column grid (rows are built by the consumer so related items share one) */
#root .jasper-default-checkbox-grid{
	display: flex;
	flex-direction: column;
	gap: 6px;
}
#root .jasper-default-checkbox-grid .checkbox-row{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 6px;
}
#root .jasper-default-checkbox-hint,
#root .measuring-stage-locked-hint{
	display: flex;
	align-items: flex-start;
	gap: 8px;
	padding: 10px 12px;
	border: 1px solid color-mix(in srgb, var(--warning-line) 45%, transparent);
	border-radius: var(--r-md);
	background: var(--warning-bg);
	color: var(--warning);
	font-size: var(--fs-sm);
	line-height: 1.4;
}
#root .measuring-stage-locked-hint{
	margin: 0 var(--gutter) 12px;
}
/* Plain native checkboxes (tables, modals) follow the brand color */
#root input[type="checkbox"]{
	accent-color: var(--brand);
	width: 16px;
	height: 16px;
	cursor: pointer;
}

/* Suggestion input (pure CSS dropdown under its own input, shown on focus-within) */
#root .jasper-default-suggestion-input{
	display: flex;
	flex-direction: column;
	position: relative;
	width: 100%;
}
#root .jasper-default-suggestion-input .suggestions-list{
	position: absolute;
	z-index: 99;
	top: calc(100% + 4px);
	width: 100%;
	max-height: 260px;
	display: flex;
	flex-direction: column;
	padding: 4px;
	box-sizing: border-box;
	border: 1px solid var(--border);
	border-radius: var(--r-md);
	overflow-y: auto;
	background: var(--surface);
	box-shadow: var(--shadow-md);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity var(--fast) var(--ease), transform var(--fast) var(--ease), visibility var(--fast);
}
#root .jasper-default-suggestion-input .suggestions-list img{
	width: 100%;
	max-height: 120px;
	padding: 8px 0;
	object-fit: contain;
}
#root .jasper-default-suggestion-input .suggestions-list span{
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 8px 10px;
	border-radius: var(--r-sm);
	cursor: pointer;
	font-size: var(--fs-sm);
	flex-shrink: 0;
}
#root .jasper-default-suggestion-input .suggestions-list span:hover,
#root .jasper-default-suggestion-input .suggestions-list span.keyboard-active{
	background: var(--brand-50);
	color: var(--brand-text);
}
#root .jasper-default-suggestion-input .suggestions-list span em{
	margin-left: auto;
}
#root .jasper-default-suggestion-input input:focus-within ~ .suggestions-list{
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* JS-positioned autocomplete dropdowns (applications-form's shared one + the older per-field system).
   Only opacity/visibility/transform animate — top/left/width are inline styles set on every reposition and
   must apply instantly. */
#root .jasper-autocomplete-list{
	transition: opacity var(--fast) var(--ease), visibility var(--fast) var(--ease), transform var(--fast) var(--ease);
	position: fixed;
	z-index: 99;
	max-height: 260px;
	display: flex;
	flex-direction: column;
	padding: 4px;
	box-sizing: border-box;
	margin-top: 4px;
	border: 1px solid var(--border);
	border-radius: var(--r-md);
	overflow-y: auto;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	/* The empty-state <img> has no background of its own — the container must carry it */
	background: var(--surface);
	box-shadow: var(--shadow-md);
}
#root .jasper-autocomplete-list.active{
	visibility: visible;
	opacity: 1;
	transform: translateY(0);
}
/* Nothing to show (no match, no reset/empty-state row) — don't leave an empty box hanging under the field */
#root .jasper-autocomplete-list.active:not(:has(> :not(.ng-hide))){
	visibility: hidden;
	opacity: 0;
}
/* Older per-field system: while open the list is moved up to #root (root-controller.js triggerAutocompleteList) -
   above #general-modal (999), below #notification-bar (9999) */
#root .jasper-autocomplete-list.portaled{
	z-index: 1000;
}
#root .jasper-autocomplete-list img{
	width: 100%;
	max-height: 120px;
	padding: 8px 0;
	object-fit: contain;
	align-self: center;
}
#root .jasper-autocomplete-list span{
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 8px 10px;
	border-radius: var(--r-sm);
	cursor: pointer;
	font-size: var(--fs-sm);
	flex-shrink: 0;
}
#root .jasper-autocomplete-list span:hover,
#root .jasper-autocomplete-list span.keyboard-active{
	background: var(--brand-50);
	color: var(--brand-text);
}

#root .active-audition-icon{
	color: var(--brand);
}

/* Status badges (applications list, overview header) — class "status-badge status-{ApplicationStatusEnum}" */
#root .status-badge{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 24px;
	padding: 0 10px;
	border-radius: var(--r-pill);
	font-size: var(--fs-xs);
	font-weight: 700;
	white-space: nowrap;
	letter-spacing: .01em;
	background: var(--sunken);
	color: var(--ink-3);
}
#root .status-badge::before{
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
}
#root .status-badge.status-1, #root .status-badge.status-2{ background: var(--s1-bg); color: var(--s1-fg); }
#root .status-badge.status-3{ background: var(--s3-bg); color: var(--s3-fg); }
#root .status-badge.status-4{ background: var(--s4-bg); color: var(--s4-fg); }
#root .status-badge.status-5{ background: var(--s5-bg); color: var(--s5-fg); }
#root .status-badge.status-6{ background: var(--s6-bg); color: var(--s6-fg); }
#root .status-badge.status-badge-lg{
	height: 28px;
	padding: 0 12px;
	font-size: var(--fs-sm);
}

/* ===== MODALS (#general-modal / #profile-modal / #logout-modal / #confirm-modal) ===== */
#general-modal, #profile-modal, #logout-modal, #confirm-modal{
	position: fixed;
	z-index: 999;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--base) var(--ease), visibility var(--base);
}
/* Global confirmation (root.html): above an open #general-modal and the portaled autocomplete lists */
#confirm-modal{
	z-index: 1500;
}
#general-modal.active, #profile-modal.active, #logout-modal.active, #confirm-modal.active{
	opacity: 1;
	visibility: visible;
}
#general-modal .cover, #profile-modal .cover, #logout-modal .cover, #confirm-modal .cover{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--scrim);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
}
/* Pop-in for the modal's own visible content box (not the backdrop) — the content box is a leaf here, so the
   transform can't capture any fixed-position descendant */
#general-modal .select-grid, #profile-modal .select-grid,
#general-modal form, #profile-modal form,
#general-modal section, #profile-modal section, #logout-modal section, #confirm-modal section{
	transform: scale(.94) translateY(18px);
	opacity: 0;
	transition: opacity var(--base) var(--ease), transform var(--slower) var(--spring);
}
/* Settles on `none`, not an identity transform: any transform — even scale(1) — makes the box the containing block
   of its position:fixed descendants, and the product modal's per-row autocomplete lists then added ~260px of empty
   scroll space under the form (and would be mispositioned when shown). The pop-in still animates towards `none`. */
#general-modal.active .select-grid, #profile-modal.active .select-grid,
#general-modal.active form, #profile-modal.active form,
#general-modal.active section, #profile-modal.active section, #logout-modal.active section, #confirm-modal.active section{
	transform: none;
	opacity: 1;
}
/* Close button injected into every modal content box by the `modal` directive (root-controller.js) */
.modal-close-button{
	position: absolute;
	z-index: 5;
	top: 12px;
	right: 12px;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: none;
	border-radius: var(--r-sm);
	background: transparent;
	color: var(--ink-3);
	font-size: 16px;
	cursor: pointer;
	transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.modal-close-button:hover{
	background: var(--hover);
	color: var(--ink);
}
#general-modal .select-grid, #profile-modal .select-grid{
	position: relative;
	box-sizing: border-box;
	padding: 0 24px 24px;
	border-radius: var(--r-lg);
	background: var(--surface);
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
	max-width: calc(100vw - 32px);
	max-height: 80vh;
	overflow-y: auto;
	box-shadow: var(--shadow-lg);
}
#general-modal .select-grid h3, #profile-modal .select-grid h3{
	position: sticky;
	top: 0;
	z-index: 3;
	grid-column: span 4;
	margin: 0 -24px 4px;
	padding: 18px 56px 14px 24px;
	background: var(--surface);
	border-bottom: 1px solid var(--border);
	font-size: var(--fs-lg);
	font-weight: 700;
	color: var(--ink);
}
#general-modal .select-grid .grid-card, #profile-modal .select-grid .grid-card{
	width: 130px;
	cursor: pointer;
	overflow: hidden;
	border: 1px solid var(--border);
	border-radius: var(--r-md);
	background: var(--sunken);
	transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
#general-modal .select-grid .grid-card:hover, #profile-modal .select-grid .grid-card:hover{
	border-color: var(--brand);
	box-shadow: 0 0 0 3px var(--focus);
}
#general-modal .select-grid .grid-card img, #profile-modal .select-grid .grid-card img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}
/* Action row under a picker's cards (the opening-logic picker's "Сбросить"), spans every column */
#general-modal .select-grid .select-grid-actions{
	grid-column: 1 / -1;
	display: flex;
	justify-content: flex-end;
	padding-top: 4px;
}
#general-modal form, #profile-modal form{
	position: relative;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: min(480px, calc(100vw - 32px));
	max-width: min(1040px, calc(100vw - 32px));
	max-height: 85vh;
	padding: 0 24px 24px;
	border-radius: var(--r-lg);
	background: var(--surface);
	box-shadow: var(--shadow-lg);
	overflow-y: auto;
}
#general-modal form h3, #profile-modal form h3{
	position: sticky;
	top: 0;
	z-index: 3;
	margin: 0 -24px;
	padding: 18px 56px 14px 24px;
	background: var(--surface);
	border-bottom: 1px solid var(--border);
	font-size: var(--fs-lg);
	font-weight: 700;
	color: var(--ink);
}
#general-modal form > span, #general-modal form > small{
	color: var(--ink-2);
	font-size: var(--fs-md);
}
#general-modal form .grid-container, #profile-modal form .grid-container{
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px 16px;
}
#general-modal form .grid-container hr, #profile-modal form .grid-container hr{
	grid-column: span 2;
	width: 100%;
	margin: 4px 0;
}
#general-modal form .form-group, #profile-modal form .form-group{
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}
#general-modal form .grid-container .form-group.colspan-2, #profile-modal form .grid-container .form-group.colspan-2{
	grid-column: span 2;
}
/* Action cells: buttons keep their natural width — primary actions sit right, destructive ones left */
#general-modal form .form-group:has(> .jasper-default-button), #profile-modal form .form-group:has(> .jasper-default-button){
	flex-direction: row;
	justify-content: flex-end;
	gap: 8px;
	margin-top: 4px;
}
#general-modal form .form-group:has(> .jasper-danger-button), #profile-modal form .form-group:has(> .jasper-danger-button){
	justify-content: flex-start;
}
#general-modal form .form-group:has(> .jasper-default-button) > .jasper-default-button, #profile-modal form .form-group:has(> .jasper-default-button) > .jasper-default-button{
	min-width: 140px;
}
/* The one label-row pattern inside a form-group ("Ресурсы" + add button) stays a normal row */
#general-modal form .form-group .form-group-action-title, #profile-modal form .form-group .form-group-action-title{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}
#general-modal form .form-group .form-group-action-title .jasper-default-button{
	height: 30px;
	padding: 0 12px;
}
#general-modal form .form-group label, #profile-modal form .form-group label,
#general-modal form .form-group .form-group-action-title > span{
	font-size: var(--fs-sm);
	font-weight: 500;
	color: var(--ink-2);
}
#general-modal form .form-group input.jasper-default-input, #profile-modal form .form-group input.jasper-default-input,
#general-modal form .form-group select, #profile-modal form .form-group select,
#general-modal form .form-group textarea, #profile-modal form .form-group textarea{
	width: 100%;
	min-width: 0;
}
#general-modal form .form-group .form-chips-container, #profile-modal form .form-group .form-chips-container{
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
}
#general-modal form .form-group .form-chips-container span, #profile-modal form .form-group .form-chips-container span{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 28px;
	padding: 0 10px;
	background: var(--brand-50);
	border: 1px solid var(--brand-200);
	color: var(--brand-text);
	font-size: var(--fs-sm);
	font-weight: 500;
	cursor: pointer;
	border-radius: var(--r-pill);
	transition: background var(--fast) var(--ease);
}
#general-modal form .form-group .form-chips-container span:hover, #profile-modal form .form-group .form-chips-container span:hover{
	background: var(--brand-100);
}
#general-modal form table, #profile-modal form table{
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid var(--border);
	border-radius: var(--r-md);
	font-size: var(--fs-sm);
}
#general-modal form table th, #profile-modal form table th{
	background: var(--sunken);
	color: var(--ink-3);
	font-size: var(--fs-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	padding: 9px 10px;
	white-space: nowrap;
	border-bottom: 1px solid var(--border);
	text-align: center;
}
#general-modal form table tr:first-child th:first-child, #profile-modal form table tr:first-child th:first-child{ border-top-left-radius: var(--r-md); }
#general-modal form table tr:first-child th:last-child, #profile-modal form table tr:first-child th:last-child{ border-top-right-radius: var(--r-md); }
/* Row-header <th> (qualities picker) reads as a normal cell */
#general-modal form table tr + tr th, #profile-modal form table tr + tr th{
	background: var(--surface);
	color: var(--ink);
	font-size: var(--fs-sm);
	text-transform: none;
	letter-spacing: 0;
	text-align: left;
}
#general-modal form table td, #profile-modal form table td{
	padding: 6px 8px;
	font-size: var(--fs-sm);
	font-weight: 500;
	color: var(--ink);
	text-align: center;
	border-bottom: 1px solid var(--border);
}
#general-modal form table tr:last-child td, #general-modal form table tr:last-child th,
#profile-modal form table tr:last-child td{
	border-bottom: none;
}
#general-modal form table td input.jasper-default-input, #profile-modal form table td input.jasper-default-input{
	width: 100%;
}
#general-modal form .form-group .form-images-container, #profile-modal form .form-group .form-images-container{
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 12px;
	position: relative;
}
#general-modal form .form-group .form-images-container input, #profile-modal form .form-group .form-images-container input{
	display: none;
}
#general-modal form .form-group .form-images-container label, #profile-modal form .form-group .form-images-container label{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	border: 2px dashed var(--border-strong);
	border-radius: var(--r-md);
	color: var(--ink-3);
	font-size: 18px;
	cursor: pointer;
	transition: border-color var(--fast) var(--ease), color var(--fast) var(--ease), background var(--fast) var(--ease);
}
#general-modal form .form-group .form-images-container label:hover, #profile-modal form .form-group .form-images-container label:hover{
	border-color: var(--brand);
	color: var(--brand-text);
	background: var(--brand-50);
}
#general-modal form .form-group .form-images-container .image-card, #profile-modal form .form-group .form-images-container .image-card{
	display: flex;
	flex-direction: column;
	width: 96px;
	gap: 6px;
}
#general-modal form .form-group .form-images-container .image-card .image-card-wrapper, #profile-modal form .form-group .form-images-container .image-card .image-card-wrapper{
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	width: 100%;
	border: 1px solid var(--border);
	border-radius: var(--r-md);
	background: var(--sunken);
	overflow: hidden;
}
#general-modal form .form-group .form-images-container .image-card .image-card-wrapper img, #profile-modal form .form-group .form-images-container .image-card .image-card-wrapper img{
	width: 100%;
	height: 100%;
	aspect-ratio: 1/1;
	object-fit: contain;
}
#general-modal form .form-group .form-images-container .image-card .image-card-wrapper .wrapper-toolbar, #profile-modal form .form-group .form-images-container .image-card .image-card-wrapper .wrapper-toolbar{
	position: absolute;
	left: 0;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	height: 100%;
	background: color-mix(in srgb, var(--surface) 70%, transparent);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--fast) var(--ease), visibility var(--fast);
}
#general-modal form .form-group .form-images-container .image-card .image-card-wrapper .wrapper-toolbar button, #profile-modal form .form-group .form-images-container .image-card .image-card-wrapper .wrapper-toolbar button{
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border: 1px solid var(--border-strong);
	border-radius: var(--r-sm);
	background: var(--surface);
	color: var(--ink);
	cursor: pointer;
}
#general-modal form .form-group .form-images-container .image-card .image-card-wrapper .wrapper-toolbar button:hover{
	color: var(--danger);
	border-color: var(--danger);
}
#general-modal form .form-group .form-images-container .image-card .image-card-wrapper:hover .wrapper-toolbar, #profile-modal form .form-group .form-images-container .image-card .image-card-wrapper:hover .wrapper-toolbar,
#general-modal form .form-group .form-images-container .image-card .image-card-wrapper:focus-within .wrapper-toolbar{
	opacity: 1;
	visibility: visible;
}
#general-modal form .form-group .form-images-container .image-card select, #profile-modal form .form-group .form-images-container .image-card select{
	width: 100%;
	height: 30px;
	font-size: var(--fs-xs);
}
/* Dialog-type content (confirmations, logout) */
#general-modal section, #profile-modal section, #logout-modal section, #confirm-modal section{
	position: relative;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: min(440px, calc(100vw - 32px));
	max-height: 80vh;
	padding: 22px 24px 20px;
	border-radius: var(--r-lg);
	background: var(--surface);
	box-shadow: var(--shadow-lg);
	overflow-y: auto;
}
#general-modal section h3, #profile-modal section h3, #logout-modal section h3, #confirm-modal section h3{
	margin: 0;
	padding-right: 32px;
	font-size: var(--fs-lg);
	font-weight: 700;
	color: var(--ink);
}
#general-modal section small, #logout-modal section small, #confirm-modal section small{
	font-size: var(--fs-md);
	color: var(--ink-2);
	line-height: 1.45;
}
#general-modal section .actions-row, #profile-modal section .actions-row, #logout-modal section .actions-row, #confirm-modal section .actions-row{
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	margin-top: 14px;
}
#confirm-modal section .confirm-icon{
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--danger-bg);
	color: var(--danger);
	font-size: 17px;
	margin-bottom: 4px;
}

/* ===== BOTTOM SHEET (application transaction editor) ===== */
#bottom-sheet{
	position: fixed;
	z-index: 99;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	background: var(--page);
	transform: translateY(100vh);
	visibility: hidden;
	transition: transform 420ms cubic-bezier(.22, 1.1, .36, 1), visibility 420ms;
}
#bottom-sheet.active{
	transform: translateY(0);
	visibility: visible;
}
#bottom-sheet header{
	position: sticky;
	top: 0;
	z-index: 5;
	display: flex;
	align-items: center;
	gap: 16px;
	min-height: 60px;
	box-sizing: border-box;
	padding: 10px var(--gutter);
	background: var(--surface);
	border-bottom: 1px solid var(--border);
	box-shadow: var(--shadow-sm);
}
#bottom-sheet header h2{
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 auto 0 0;
	font-size: var(--fs-xl);
	font-weight: 700;
}
#bottom-sheet header span{
	display: flex;
	align-items: center;
	height: 32px;
	padding: 0 14px;
	border-radius: var(--r-sm);
	font-size: var(--fs-md);
	font-weight: 500;
	color: var(--ink-2);
	cursor: pointer;
	transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
#bottom-sheet header span:hover{
	background: var(--hover);
	color: var(--ink);
}
#bottom-sheet header span.active{
	background: var(--brand-50);
	color: var(--brand-text);
}
/* Only visible while relations.bottomSheet.isMassEdit is true - a plain <small>, not <span>, so it never
   picks up the tab-switcher styling above */
#bottom-sheet header .mass-edit-badge{
	display: flex;
	align-items: center;
	white-space: nowrap;
	height: 26px;
	padding: 0 12px;
	border-radius: var(--r-pill);
	background: var(--s4-bg);
	color: var(--s4-fg);
	font-size: var(--fs-xs);
	font-weight: 700;
}
#bottom-sheet header .header-trailing{
	margin-left: 8px;
	display: flex;
	align-items: center;
	gap: 8px;
}
#bottom-sheet form{
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 16px var(--gutter) 32px;
}
#bottom-sheet form > .measuring-stage-locked-hint{
	margin: 0;
}
#bottom-sheet form hr{
	display: none;
}
#bottom-sheet form > .form-row{
	padding: 16px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-sm);
}
#bottom-sheet form .form-row{
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 12px;
}
#bottom-sheet form .form-row .form-group{
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1 1 120px;
	min-width: 0;
}
#bottom-sheet form .form-row .form-group label{
	display: flex;
	align-items: center;
	gap: 6px;
	min-height: 18px;
	font-size: var(--fs-sm);
	font-weight: 500;
	color: var(--ink-2);
	white-space: nowrap;
}
#bottom-sheet form .form-row .form-group label i{
	cursor: pointer;
	display: grid;
	place-items: center;
	width: 18px;
	height: 18px;
	border-radius: 4px;
	background: var(--brand-50);
	color: var(--brand-text);
	font-size: 10px;
	margin-left: auto;
}
#bottom-sheet form .form-row .form-group label i:hover{
	background: var(--brand);
	color: var(--on-brand);
}
#bottom-sheet form .form-row .form-group input.jasper-default-input,
#bottom-sheet form .form-row .form-group select.jasper-default-input{
	width: 100%;
}
#bottom-sheet form .form-row .form-group .jasper-default-button{
	width: 100%;
	height: var(--control-h);
	padding: 0 8px;
	white-space: normal;
	line-height: 1.1;
	font-size: var(--fs-sm);
}
#bottom-sheet form .form-row .form-group img{
	width: 100%;
	height: 72px;
	object-fit: contain;
	cursor: pointer;
	border-radius: var(--r-sm);
	transition: opacity var(--fast) var(--ease);
}
#bottom-sheet form .form-row .form-group img:hover{
	opacity: .75;
}
#bottom-sheet form .modular-section{
	display: flex;
	flex-direction: column;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-sm);
}
#bottom-sheet form .modular-section .modular-section-switch{
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 16px;
	font-size: var(--fs-lg);
	font-weight: 700;
	color: var(--ink);
	cursor: pointer;
	border-radius: var(--r-lg);
	user-select: none;
	transition: background var(--fast) var(--ease);
}
#bottom-sheet form .modular-section .modular-section-switch:hover{
	background: var(--hover);
}
#bottom-sheet form .modular-section .modular-section-switch i{
	order: -1;
	font-size: 13px;
	color: var(--ink-3);
	transition: transform var(--base) var(--ease);
}
#bottom-sheet form .modular-section .modular-section-switch i.active{
	transform: rotate(90deg);
}
#bottom-sheet form .modular-section .modular-section-content{
	display: flex;
	flex-direction: column;
	gap: 16px;
	opacity: 0;
	visibility: hidden;
	height: 0;
	overflow: hidden;
	transition: opacity var(--base) var(--ease);
}
#bottom-sheet form .modular-section .modular-section-content.active{
	opacity: 1;
	visibility: visible;
	height: fit-content;
	overflow: visible;
	padding: 4px 16px 18px;
	animation: fade-in var(--base) var(--ease);
}
#bottom-sheet form .modular-section .modular-section-content .form-row{
	padding: 0;
}
#bottom-sheet form .modular-section .modular-section-content hr{
	display: block;
	margin: 0;
}
#bottom-sheet section{
	display: flex;
	align-items: flex-start;
	justify-content: center;
	height: 100%;
	width: 100%;
	position: relative;
	overflow-y: auto;
}
#bottom-sheet section #canvas-background{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	background: var(--sunken);
	overflow: hidden;
}
#bottom-sheet section #canvas-background img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
#bottom-sheet section #canvas{
	position: relative;
	z-index: 2;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
#bottom-sheet section #canvas img{
	width: 100%;
	height: 100%;
	object-fit: contain;
	position: absolute;
	top: 0;
	left: 0;
}
#bottom-sheet section .canvas-toolbar{
	display: flex;
	position: absolute;
	z-index: 3;
	box-sizing: border-box;
	padding: 16px;
	background: var(--surface);
	gap: 16px;
}
#bottom-sheet section .left-toolbar,
#bottom-sheet section .right-toolbar{
	flex-direction: column;
	width: 220px;
	height: 100%;
	overflow-y: auto;
}
#bottom-sheet section .left-toolbar{
	top: 0;
	left: 0;
	border-right: 1px solid var(--border);
}
#bottom-sheet section .right-toolbar{
	top: 0;
	right: 0;
	border-left: 1px solid var(--border);
}
#bottom-sheet section .canvas-toolbar .toolbar-group{
	display: flex;
	flex-direction: column;
	gap: 6px;
}
#bottom-sheet section .canvas-toolbar .toolbar-group label{
	font-size: var(--fs-sm);
	font-weight: 500;
	color: var(--ink-2);
}
#bottom-sheet section .canvas-toolbar .toolbar-group select{
	width: 100%;
}
#bottom-sheet section .canvas-toolbar .toolbar-vertical-slider{
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
	min-height: 0;
	height: calc(100% - 16px);
	overflow-y: auto;
}
#bottom-sheet section .canvas-toolbar .toolbar-vertical-slider .item-card{
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
	gap: 6px;
	cursor: pointer;
	border: 1px solid var(--border);
	border-radius: var(--r-md);
	padding-bottom: 8px;
	overflow: hidden;
	transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
#bottom-sheet section .canvas-toolbar .toolbar-vertical-slider .item-card:hover{
	border-color: var(--brand);
	box-shadow: 0 0 0 3px var(--focus);
}
#bottom-sheet section .canvas-toolbar .toolbar-vertical-slider .item-card img{
	width: 100%;
	object-fit: contain;
}
#bottom-sheet section .canvas-toolbar .toolbar-vertical-slider .item-card span{
	font-size: var(--fs-sm);
	text-align: center;
}

/* ===== APP SHELL: header (component-header.html) ===== */
/* The header's own <component ng-include> wrapper is the sticky element: #component's parent box is only as tall
   as the header, so sticking #component itself would never engage. No transform here (fixed descendants). */
#root > component[ng-include*="component-header"]{
	display: block;
	position: sticky;
	top: 0;
	z-index: 90;
}
#component{
	display: flex;
	flex-direction: column;
	position: relative;
}
#component header{
	display: flex;
	align-items: center;
	gap: 20px;
	height: var(--header-h);
	box-sizing: border-box;
	padding: 0 16px;
	background: var(--header);
	color: var(--on-header);
}
#component header .header-leading{
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}
#component header .header-leading a{
	display: flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	color: var(--on-header);
	border-radius: var(--r-sm);
	padding: 4px;
}
#component header .header-leading a:hover{
	opacity: .85;
}
#component header .header-leading a img{
	height: 26px;
}
#component header .header-leading a span{
	font-size: var(--fs-md);
	color: var(--on-header);
	font-weight: 700;
	white-space: nowrap;
}
/* Company logo beside Jasper's (Configuration.pfp_file) — on a light plate so any logo reads on the dark header */
#component header .header-brand-logo{
	display: flex;
	align-items: center;
	height: 34px;
	padding: 0 0 0 12px;
	margin-left: 2px;
	border-left: 1px solid color-mix(in srgb, var(--on-header) 25%, transparent);
}
#component header .header-brand-logo img{
	display: block;
	height: 30px;
	max-width: 120px;
	object-fit: contain;
	border-radius: var(--r-sm);
	background: #FFFFFF;
	padding: 2px;
}
#component header .header-nav{
	display: flex;
	align-items: center;
	gap: 2px;
	min-width: 0;
	overflow-x: auto;
	scrollbar-width: none;
}
#component header .header-nav a{
	display: flex;
	align-items: center;
	gap: 8px;
	height: 36px;
	padding: 0 12px;
	border-radius: var(--r-sm);
	color: var(--on-header-muted);
	font-size: var(--fs-sm);
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
#component header .header-nav a i{
	font-size: 13px;
}
#component header .header-nav a:hover{
	background: var(--header-2);
	color: var(--on-header);
}
#component header .header-nav a.active{
	background: var(--header-2);
	color: #FFFFFF;
	box-shadow: inset 0 -2px 0 var(--brand-200);
}
#component header .header-nav a.header-nav-panel{
	color: var(--panel-accent);
}
#component header .header-nav a.header-nav-panel:hover{
	background: var(--panel-accent-bg);
	color: #FFFFFF;
}
#component header .header-nav a.header-nav-panel.active{
	background: var(--panel-accent-bg);
	color: #FFFFFF;
	box-shadow: inset 0 -2px 0 var(--panel-accent);
}
#component header .header-trailing{
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 8px;
}
/* User menu */
#component .user-menu{
	position: relative;
}
#component .user-menu-trigger{
	display: flex;
	align-items: center;
	gap: 10px;
	height: 44px;
	padding: 0 10px 0 6px;
	border: 1px solid transparent;
	border-radius: var(--r-pill);
	background: transparent;
	color: var(--on-header);
	cursor: pointer;
	text-align: left;
	transition: background var(--fast) var(--ease);
}
#component .user-menu-trigger:hover, #component .user-menu.open .user-menu-trigger{
	background: var(--header-2);
}
#component .user-menu-trigger .avatar{
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--brand-200);
	color: var(--header);
	font-size: var(--fs-xs);
	font-weight: 700;
	text-transform: uppercase;
	flex-shrink: 0;
}
#component .user-menu-trigger .user-menu-identity{
	display: flex;
	flex-direction: column;
	line-height: 1.2;
	max-width: 180px;
}
#component .user-menu-trigger .user-menu-identity b{
	font-size: var(--fs-sm);
	font-weight: 500;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
#component .user-menu-trigger .user-menu-identity small{
	font-size: 11px;
	color: var(--on-header-muted);
	white-space: nowrap;
}
#component .user-menu-trigger > i{
	font-size: 11px;
	color: var(--on-header-muted);
	transition: transform var(--base) var(--ease);
}
#component .user-menu.open .user-menu-trigger > i{
	transform: rotate(180deg);
}
#component .user-menu-panel{
	position: absolute;
	z-index: 95;
	top: calc(100% + 8px);
	right: 0;
	width: 330px;
	box-sizing: border-box;
	padding: 6px;
	background: var(--surface);
	color: var(--ink);
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-lg);
	opacity: 0;
	visibility: hidden;
	transform: scale(.92) translateY(-8px);
	transform-origin: top right;
	transition: opacity var(--base) var(--ease), transform var(--slower) var(--spring), visibility var(--base);
}
#component .user-menu.open .user-menu-panel{
	opacity: 1;
	visibility: visible;
	transform: none;
}
#component .user-menu-panel .user-menu-head{
	display: flex;
	flex-direction: column;
	padding: 10px 10px 12px;
	margin-bottom: 4px;
	border-bottom: 1px solid var(--border);
}
#component .user-menu-panel .user-menu-head b{
	font-size: var(--fs-md);
}
#component .user-menu-panel .user-menu-head small{
	font-size: var(--fs-xs);
	color: var(--ink-3);
}
#component .user-menu-panel .user-menu-item{
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	min-height: 38px;
	box-sizing: border-box;
	padding: 0 10px;
	border: none;
	border-radius: var(--r-sm);
	background: none;
	color: var(--ink);
	font-size: var(--fs-md);
	text-align: left;
	cursor: pointer;
	transition: background var(--fast) var(--ease);
}
#component .user-menu-panel button.user-menu-item:hover{
	background: var(--hover);
}
#component .user-menu-panel .user-menu-item > i{
	width: 18px;
	font-size: 14px;
	color: var(--ink-3);
	text-align: center;
}
#component .user-menu-panel .user-menu-item > span:not(.switch){
	flex: 1;
	white-space: nowrap;
}
#component .user-menu-panel .user-menu-item.danger, #component .user-menu-panel .user-menu-item.danger > i{
	color: var(--danger);
}
#component .user-menu-panel .user-menu-item.danger:hover{
	background: var(--danger-bg);
}
#component .user-menu-panel hr{
	margin: 4px 0;
}
#component .user-menu-panel .switch{
	position: relative;
	width: 34px;
	height: 20px;
	border-radius: var(--r-pill);
	background: var(--border-strong);
	flex: 0 0 34px;
	transition: background var(--base) var(--ease);
}
#component .user-menu-panel .switch::after{
	content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #FFFFFF;
	box-shadow: var(--shadow-sm);
	transition: transform var(--base) var(--ease);
}
#component .user-menu-panel .switch.on{
	background: var(--brand);
}
#component .user-menu-panel .switch.on::after{
	transform: translateX(14px);
}
#component .user-menu-panel .language-select{
	height: 30px;
	max-width: 130px;
	padding: 0 8px;
	border: 1px solid var(--border-strong);
	border-radius: var(--r-sm);
	background: var(--surface);
	color: var(--ink);
	font-size: var(--fs-sm);
	cursor: pointer;
}
#component .font-scale-control{
	display: flex;
	align-items: center;
	gap: 4px;
}
#component .font-scale-control button{
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 1px solid var(--border-strong);
	border-radius: var(--r-sm);
	background: var(--surface);
	color: var(--ink);
	font-size: 12px;
	cursor: pointer;
}
#component .font-scale-control button:hover:not(:disabled){
	background: var(--hover);
}
#component .font-scale-control button:disabled{
	opacity: .4;
	cursor: not-allowed;
}
#component .font-scale-control span{
	min-width: 40px;
	text-align: center;
	font-size: var(--fs-sm);
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	user-select: none;
}
/* Loading bar under the header */
#component progress-bar{
	position: absolute;
	left: 0;
	bottom: -3px;
	display: flex;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 3px;
	background: transparent;
	z-index: 2;
}
#component progress-bar span{
	display: flex;
	height: 100%;
	border-radius: 0 3px 3px 0;
	background: linear-gradient(90deg, var(--brand-200), var(--brand), var(--brand-200));
	background-size: 300% 100%;
	animation: wave-progress 1.6s linear infinite;
	transition: width var(--slow) var(--ease);
}
@keyframes wave-progress{
	0%{ background-position: 0% 0%; }
	100%{ background-position: 100% 0%; }
}

/* ===== PAGE LAYOUT ===== */
#root .content-wrapper{
	display: flex;
	flex-direction: column;
	width: 100%;
	min-height: calc(100vh - var(--header-h));
	padding-bottom: 32px;
	box-sizing: border-box;
}
/* Page header block (title + actions) — a white band on top of the grey page */
#root .content-wrapper .content-header{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px 16px;
	padding: 18px var(--gutter);
	background: var(--surface);
	border-bottom: 1px solid var(--border);
}
#root .content-wrapper .content-header + .content-header{
	padding-top: 12px;
	margin-top: -1px;
	background: var(--sunken);
}
#root .content-wrapper .content-header .header-leading{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	min-width: 0;
}
#root .content-wrapper .content-header .header-leading h2{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	font-size: var(--fs-2xl);
	line-height: 1.25;
	font-weight: 700;
	color: var(--ink);
}
#root .content-wrapper .content-header .header-leading small{
	display: inline-flex;
	gap: 6px;
	font-size: var(--fs-sm);
	color: var(--ink-3);
}
#root .content-wrapper .content-header .header-leading small span{
	font-weight: 700;
	color: var(--ink);
	font-variant-numeric: tabular-nums;
}
#root .content-wrapper .content-header .header-leading .header-meta{
	display: flex;
	flex-wrap: wrap;
	gap: 4px 18px;
	font-size: var(--fs-sm);
	color: var(--ink-3);
}
#root .content-wrapper .content-header .header-leading .header-meta b{
	font-weight: 500;
	color: var(--ink-2);
}
#root .content-wrapper .content-header .header-leading .header-crumbs{
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: var(--fs-xs);
	color: var(--ink-3);
}
#root .content-wrapper .content-header .header-leading .header-crumbs a{
	color: var(--ink-3);
	text-decoration: none;
	cursor: pointer;
}
#root .content-wrapper .content-header .header-leading .header-crumbs a:hover{
	color: var(--brand-text);
}
#root .content-wrapper .content-header .header-leading .header-crumbs i{
	font-size: 9px;
}
#root .content-wrapper .content-header .header-trailing{
	margin-left: auto;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}
#root .content-wrapper .content-header .header-trailing input.jasper-default-input,
#root .content-wrapper .content-header .header-trailing select.jasper-default-input{
	width: 150px;
}
/* Page header + tab strip that stay visible under the app header while scrolling (form + estimation pages).
   Short screens (laptops at 768px) keep it in flow — pinned it would eat a third of the height. */
#root .content-wrapper .page-head-sticky{
	position: sticky;
	top: var(--header-h);
	z-index: 20;
	box-shadow: var(--shadow-sm);
}
@media (max-height: 820px){
	#root .content-wrapper .page-head-sticky{
		position: static;
		box-shadow: none;
	}
}
/* Captioned field inside a header action row (edit page's prepayment/discount row) */
#root .content-wrapper .content-header .header-trailing:has(.inline-field){
	align-items: flex-end;
}
#root .inline-field{
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}
#root .inline-field > span{
	font-size: var(--fs-xs);
	font-weight: 500;
	color: var(--ink-3);
}

/* Pipeline stepper (overview header) */
#root .application-stepper{
	display: flex;
	align-items: center;
	list-style: none;
	margin: 4px 0 0;
	padding: 0;
	overflow-x: auto;
	scrollbar-width: none;
	width: 100%;
}
#root .application-stepper .step{
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: var(--fs-sm);
	color: var(--ink-3);
	white-space: nowrap;
}
#root .application-stepper .step .dot{
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	box-sizing: border-box;
	border-radius: 50%;
	border: 2px solid var(--border-strong);
	background: var(--surface);
	font-size: 11px;
	font-weight: 700;
	color: var(--ink-3);
	flex-shrink: 0;
	transition: background var(--base) var(--ease), border-color var(--base) var(--ease);
}
#root .application-stepper .step.done{
	color: var(--ink-2);
}
#root .application-stepper .step.done .dot{
	background: var(--brand);
	border-color: var(--brand);
	color: #FFFFFF;
	font-size: 10px;
}
/* The next stage to be done (the status is the last one finished) — always the warning orange, whichever stage it is */
#root .application-stepper .step.pending{
	font-weight: 700;
	color: var(--warning);
}
#root .application-stepper .step.pending .dot{
	border-color: currentColor;
	background: color-mix(in srgb, currentColor 14%, var(--surface));
	color: inherit;
}
#root .application-stepper .step-line{
	flex: 1 1 24px;
	min-width: 24px;
	max-width: 96px;
	height: 2px;
	margin: 0 10px;
	background: var(--border);
	border-radius: 2px;
}
#root .application-stepper .step-line.done{
	background: var(--brand);
}

/* Tab strips — primary (page tabs) are an underline row on the white header band */
#root .content-wrapper .content-tabs{
	display: flex;
	align-items: flex-end;
	gap: 4px;
	padding: 0 calc(var(--gutter) - 4px);
	background: var(--surface);
	border-bottom: 1px solid var(--border);
	overflow-x: auto;
	scrollbar-width: none;
}
#root .content-wrapper .content-tabs .tab-button{
	position: relative;
	flex-shrink: 0;
	height: 46px;
	padding: 0 12px;
	border: none;
	background: none;
	color: var(--ink-3);
	font-size: var(--fs-md);
	font-weight: 500;
	white-space: nowrap;
	cursor: pointer;
	transition: color var(--fast) var(--ease);
}
#root .content-wrapper .content-tabs .tab-button::after{
	content: "";
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: 0;
	height: 2px;
	border-radius: 2px 2px 0 0;
	background: var(--brand);
	transform: scaleX(0);
	transition: transform var(--base) var(--ease);
}
#root .content-wrapper .content-tabs .tab-button:hover{
	color: var(--ink);
}
#root .content-wrapper .content-tabs .tab-button span{
	padding: 0;
}
#root .content-wrapper .content-tabs .active-tab{
	color: var(--brand-text);
}
#root .content-wrapper .content-tabs .active-tab::after{
	transform: scaleX(1);
}
/* Admin/manager/root panel menus (component-*-menu.html): the same underline row, as a sub-navigation band */
#root .content-wrapper > component .content-tabs{
	position: sticky;
	top: var(--header-h);
	z-index: 20;
}
#root .content-wrapper > component .content-tabs .active-tab{
	color: var(--panel-ink);
}
#root .content-wrapper > component .content-tabs .tab-button::after{
	background: var(--panel-ink);
}
/* Nested tab strips inside a tab (overview's Замер/Продажа/Карточная, Разработка's department filter):
   a segmented control, so they read as a filter rather than a second page-level navigation */
#root .content-wrapper .content-tab-container .content-tabs,
#root .content-wrapper .table-tab-container .content-tabs{
	display: inline-flex;
	align-self: flex-start;
	flex-wrap: wrap;
	gap: 2px;
	margin: 16px var(--gutter) 0;
	padding: 3px;
	max-width: calc(100% - 2 * var(--gutter));
	box-sizing: border-box;
	background: var(--sunken);
	border: 1px solid var(--border);
	border-radius: var(--r-md);
	overflow: visible;
}
#root .content-wrapper .content-tab-container .content-tabs .tab-button,
#root .content-wrapper .table-tab-container .content-tabs .tab-button{
	height: 30px;
	padding: 0 12px;
	border-radius: var(--r-sm);
	font-size: var(--fs-sm);
	color: var(--ink-2);
	transition: background var(--fast) var(--ease), color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
#root .content-wrapper .content-tab-container .content-tabs .tab-button::after,
#root .content-wrapper .table-tab-container .content-tabs .tab-button::after{
	display: none;
}
#root .content-wrapper .content-tab-container .content-tabs .active-tab,
#root .content-wrapper .table-tab-container .content-tabs .active-tab{
	background: var(--surface);
	color: var(--ink);
	box-shadow: var(--shadow-sm);
}
#root .content-wrapper .content-tab-container,
#root .content-wrapper .table-tab-container{
	display: flex;
	flex-direction: column;
	animation: rise-in var(--slow) var(--ease) backwards;
}
#root .content-wrapper .content-tab-container.ng-hide,
#root .content-wrapper .table-tab-container.ng-hide{
	animation: none;
}
#root .content-wrapper .content-tab-container > hr,
#root .content-wrapper .table-tab-container > hr{
	display: none;
}
#root .content-wrapper .content-tab-container .content-tab-header{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 20px var(--gutter) 0;
}
#root .content-wrapper .content-tab-container .content-tab-header h3{
	margin: 0;
	font-size: var(--fs-xl);
	font-weight: 700;
	color: var(--ink);
}
/* Top-of-tab forms (customer/address/remark rows) — a white card on the page */
#root .content-wrapper .content-tab-container > form,
#root .content-wrapper .content-tab-container > fieldset > form{
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 20px var(--gutter) 0;
	padding: 16px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-sm);
}
#root .content-wrapper .content-tab-container form .form-row{
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 14px 16px;
}
#root .content-wrapper .content-tab-container form .form-row .form-group{
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1 1 180px;
	min-width: 0;
}
#root .content-wrapper .content-tab-container form .form-row .form-group.form-group-wide{
	flex: 1 1 100%;
}
#root .content-wrapper .content-tab-container form .form-row .form-group label{
	font-size: var(--fs-sm);
	font-weight: 500;
	color: var(--ink-2);
}
#root .content-wrapper .content-tab-container form .form-row .form-group .jasper-default-input{
	width: 100%;
}
#root .content-wrapper .content-tab-container form .form-row .form-group img{
	width: 100%;
	cursor: pointer;
}
/* Config page (config-configuration.html / root-configurations.html): a form directly in the wrapper */
#root .content-wrapper > form, #root .content-wrapper > fieldset > form{
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 20px var(--gutter) 0;
	padding: 20px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-sm);
}

/* Brand colour fields (config-configuration.html): Pickr swatch button + hex input */
#root .brand-color-field{
	display: flex;
	align-items: center;
	gap: 8px;
}
#root .brand-color-field .jasper-default-input{
	flex: 1;
	min-width: 0;
	font-family: ui-monospace, "Liberation Mono", monospace;
	text-transform: uppercase;
}
#root .brand-color-field .pickr .pcr-button{
	width: var(--control-h);
	height: var(--control-h);
	border-radius: var(--r-md);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
}
#root .brand-color-hint{
	font-size: var(--fs-xs);
	color: var(--ink-3);
}
#root .brand-color-actions{
	justify-content: flex-end;
	align-self: stretch;
	gap: 8px;
}
#root .brand-color-actions .jasper-default-button{
	align-self: flex-start;
}
/* Pickr's popup lives under <body>, outside #root — above modals (999) and the sticky header */
.pcr-app{
	z-index: 1600 !important;
	border-radius: var(--r-md) !important;
	box-shadow: var(--shadow-lg) !important;
}

/* Read-only definition list (overview Сводка) */
#root .detail-list{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 14px 24px;
	margin: 0;
}
#root .detail-list > div{
	min-width: 0;
}
#root .detail-list dt{
	margin-bottom: 3px;
	font-size: var(--fs-xs);
	color: var(--ink-3);
}
#root .detail-list dd{
	margin: 0;
	font-weight: 500;
	color: var(--ink);
	overflow-wrap: anywhere;
}
#root .content-wrapper .detail-card{
	margin: 20px var(--gutter) 0;
	padding: 16px 18px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-sm);
}

/* ===== LIST PAGES (toolbar + filters + pagination + table) ===== */
#root .content-wrapper .content-toolbar{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	padding: 20px var(--gutter) 0;
}
#root .content-wrapper .content-toolbar .toolbar-leading{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}
#root .content-wrapper .content-toolbar .toolbar-leading button{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: var(--control-h);
	padding: 0 14px;
	border: 1px solid var(--border-strong);
	border-radius: var(--r-md);
	background: var(--surface);
	color: var(--ink);
	font-size: var(--fs-md);
	font-weight: 500;
	cursor: pointer;
	box-shadow: var(--shadow-sm);
	transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
#root .content-wrapper .content-toolbar .toolbar-leading button:hover{
	background: var(--hover);
	border-color: var(--ink-3);
}
#root .content-wrapper .content-toolbar .toolbar-leading button.active{
	background: var(--brand-50);
	border-color: var(--brand-200);
	color: var(--brand-text);
}
#root .content-wrapper .content-toolbar .toolbar-trailing{
	margin-left: auto;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}
#root .content-wrapper .content-toolbar .toolbar-trailing .search-input{
	display: flex;
	align-items: center;
	gap: 8px;
	height: var(--control-h);
	box-sizing: border-box;
	padding: 0 12px;
	background: var(--surface);
	border: 1px solid var(--border-strong);
	border-radius: var(--r-md);
	transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
#root .content-wrapper .content-toolbar .toolbar-trailing .search-input:focus-within{
	border-color: var(--brand);
	box-shadow: 0 0 0 3px var(--focus);
}
#root .content-wrapper .content-toolbar .toolbar-trailing .search-input i{
	color: var(--ink-3);
	font-size: 13px;
}
#root .content-wrapper .content-toolbar .toolbar-trailing .search-input input{
	width: 220px;
	font-size: var(--fs-md);
	border: none;
	background: none;
}
#root .content-wrapper .content-toolbar .toolbar-trailing .search-input input:focus{
	outline: none;
}
/* Filters row — a white strip under the toolbar */
#root .content-wrapper .content-toolbar-emphasized{
	padding-top: 12px;
	animation: fade-in var(--base) var(--ease);
}
#root .content-wrapper .content-toolbar-emphasized.ng-hide{
	animation: none;
}
#root .content-wrapper .content-toolbar-emphasized .toolbar-leading{
	width: 100%;
	box-sizing: border-box;
	padding: 12px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-sm);
}
#root .content-wrapper .content-toolbar-emphasized .toolbar-leading select,
#root .content-wrapper .content-toolbar-emphasized .toolbar-leading input{
	min-width: 140px;
}
#root .content-wrapper .content-toolbar-emphasized .toolbar-leading > span{
	color: var(--ink-3);
}
#root .content-wrapper .content-toolbar-footer{
	padding-bottom: 24px;
}
#root .content-wrapper .content-pagination{
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: 4px;
	padding: 16px var(--gutter) 0;
}
#root .content-wrapper .content-pagination button{
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	height: 32px;
	padding: 0 8px;
	box-sizing: border-box;
	border: 1px solid var(--border);
	border-radius: var(--r-sm);
	background: var(--surface);
	color: var(--ink-2);
	font-size: var(--fs-sm);
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	cursor: pointer;
	transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
#root .content-wrapper .content-pagination button:hover{
	background: var(--hover);
	border-color: var(--border-strong);
	color: var(--ink);
}
#root .content-wrapper .content-pagination button.active-page-button{
	background: var(--brand);
	border-color: var(--brand);
	color: var(--on-brand);
	font-weight: 700;
}
#root .content-wrapper .content-pagination font{
	color: var(--ink-3);
	padding: 0 4px;
}
#root .content-wrapper .content-pagination input{
	width: 64px;
	height: 32px;
	text-align: center;
}
/* Data table card */
#root .content-wrapper .content-table{
	display: flex;
	flex-direction: column;
	padding: 16px var(--gutter) 0;
	min-width: 0;
}
#root .content-wrapper .content-table table{
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-sm);
	font-size: var(--fs-sm);
}
#root .content-wrapper .content-table table th,
#root .content-wrapper .content-table table td{
	border: none;
	border-bottom: 1px solid var(--border);
}
#root .content-wrapper .content-table table th{
	height: 40px;
	padding: 0 14px;
	background: var(--sunken);
	color: var(--ink-3);
	font-size: var(--fs-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	text-align: left;
	white-space: nowrap;
}
#root .content-wrapper .content-table table th:first-child{
	text-align: center;
}
#root .content-wrapper .content-table table .leading-cell,
#root .content-wrapper .content-table table tr:first-child th:first-child{
	border-top-left-radius: var(--r-lg);
}
#root .content-wrapper .content-table table .trailing-cell,
#root .content-wrapper .content-table table tr:first-child th:last-child{
	border-top-right-radius: var(--r-lg);
}
#root .content-wrapper .content-table table tr:last-child td{
	border-bottom: none;
}
#root .content-wrapper .content-table table tr:last-child td:first-child{
	border-bottom-left-radius: var(--r-lg);
}
#root .content-wrapper .content-table table tr:last-child td:last-child{
	border-bottom-right-radius: var(--r-lg);
}
#root .content-wrapper .content-table table td{
	height: 46px;
	padding: 6px 14px;
	box-sizing: border-box;
	font-size: var(--fs-md);
	color: var(--ink);
	cursor: pointer;
	transition: background var(--fast) var(--ease);
}
#root .content-wrapper .content-table table td:first-child{
	color: var(--ink-3);
	font-variant-numeric: tabular-nums;
}
#root .content-wrapper .content-table table tr:hover td{
	background: var(--hover);
}
#root .content-wrapper .content-table table td.amount-cell,
#root .content-wrapper .content-table table th.amount-cell{
	text-align: right;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
#root .content-wrapper .content-table table td.amount-cell{
	font-weight: 500;
}
#root .content-wrapper .content-table table td.muted-cell{
	color: var(--ink-3);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
/* Chip labels → badges */
#root .content-wrapper .content-table table td label.chip-label,
#root label.chip-label{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: fit-content;
	height: 24px;
	padding: 0 10px;
	border: 1px solid transparent;
	border-radius: var(--r-pill);
	font-size: var(--fs-xs);
	font-weight: 700;
	white-space: nowrap;
	cursor: inherit;
}
#root label.chip-label.chip-label-success{
	background: var(--success-bg);
	color: var(--success);
}
#root label.chip-label.chip-label-secondary{
	background: var(--sunken);
	border-color: var(--border);
	color: var(--ink-3);
}
#root label.chip-label.chip-label-info{
	background: var(--info-bg);
	color: var(--info);
}
#root .content-wrapper .content-table table td img{
	display: block;
	width: 80px;
	height: 56px;
	object-fit: contain;
	cursor: pointer;
	border-radius: var(--r-sm);
}
#root .content-wrapper .empty-table-placeholder{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 40px 16px;
}
#root .content-wrapper .empty-table-placeholder img{
	width: 120px;
	opacity: .85;
}
#root .content-wrapper .empty-table-placeholder span{
	font-size: var(--fs-md);
	color: var(--ink-3);
}
/* История tab diff rendering */
#root .content-wrapper .content-table table td .application-history-diff{
	display: flex;
	flex-direction: column;
	cursor: default;
}
#root .content-wrapper .content-table table td .history-diff-row{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	padding: 8px 0;
	border-bottom: 1px dashed var(--border);
}
#root .content-wrapper .content-table table td .history-diff-row:last-child{
	border-bottom: none;
}
#root .content-wrapper .content-table table td .history-diff-label{
	min-width: 200px;
	font-size: var(--fs-sm);
	font-weight: 500;
	color: var(--ink-3);
}
#root .content-wrapper .content-table table td .history-diff-value{
	font-size: var(--fs-sm);
	color: var(--ink);
}
#root .content-wrapper .content-table table td .history-diff-value-old{
	color: var(--ink-3);
	text-decoration: line-through;
}
#root .content-wrapper .content-table table td .history-diff-value-new{
	color: var(--success);
	font-weight: 500;
}
#root .content-wrapper .content-table table td .history-diff-arrow{
	color: var(--ink-3);
	font-size: var(--fs-xs);
}
#root .content-wrapper .content-table table td .history-diff-qualities-list{
	display: flex;
	flex-direction: column;
	gap: 6px;
}
#root .content-wrapper .content-table table td .history-diff-quality-entry{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}
#root .content-wrapper .content-table table td .history-diff-quality-components{
	font-size: var(--fs-sm);
	color: var(--ink-3);
}
#root .content-wrapper .content-table table td .application-history-diff-empty{
	font-size: var(--fs-sm);
	color: var(--ink-3);
	font-style: italic;
	cursor: default;
}

/* ===== APPLICATION TRANSACTION TABLES (form/estimation "constructor") ===== */
#root .content-wrapper .transactions-constructor{
	display: flex;
	flex-direction: column;
	min-width: 0;
}
#root .content-wrapper .transactions-constructor .constructor-header{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	padding: 20px var(--gutter) 12px;
}
#root .content-wrapper .transactions-constructor .constructor-header select{
	min-width: 180px;
}
#root .content-wrapper .transactions-constructor .constructor-header .constructor-header-trailing{
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-left: auto;
}
#root .content-wrapper .transactions-constructor .constructor-table{
	display: flex;
	flex-direction: column;
	padding: 0 var(--gutter);
	min-width: 0;
}
/* A table with no toolbar above it (estimation page's read-only tabs) still needs its gap from the card above */
#root .content-wrapper .transactions-constructor > .constructor-table:first-child{
	padding-top: 16px;
}
#root .content-wrapper .transactions-constructor .constructor-table .table-wrapper{
	display: flex;
	flex-direction: column;
	width: 100%;
	overflow-x: auto;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-sm);
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}
#root .content-wrapper .transactions-constructor .constructor-table table{
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	font-size: var(--fs-sm);
}
#root .content-wrapper .transactions-constructor .constructor-table table td,
#root .content-wrapper .transactions-constructor .constructor-table table th{
	border: none;
	border-right: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
	background: var(--surface);
}
#root .content-wrapper .transactions-constructor .constructor-table table tr > :last-child{
	border-right: none;
}
#root .content-wrapper .transactions-constructor .constructor-table table tr:last-child td{
	border-bottom: none;
}
#root .content-wrapper .transactions-constructor .constructor-table table th{
	height: 38px;
	padding: 0 8px;
	background: var(--sunken);
	color: var(--ink-3);
	font-size: var(--fs-xs);
	font-weight: 700;
	white-space: nowrap;
	text-align: center;
}
#root .content-wrapper .transactions-constructor .constructor-table table td{
	height: 40px;
	padding: 0;
	font-size: var(--fs-sm);
	font-weight: 500;
	color: var(--ink);
	text-align: center;
	transition: background var(--fast) var(--ease);
}
#root .content-wrapper .transactions-constructor .constructor-table table tr:hover td{
	background: var(--hover);
}
/* Cell inputs are borderless fills of their cell; the focused one gets the focus ring */
#root .content-wrapper .transactions-constructor .constructor-table table td select,
#root .content-wrapper .transactions-constructor .constructor-table table td input:not([type="checkbox"]):not([type="file"]){
	width: 20ch;
	height: 32px;
	margin: 3px;
	padding: 0 8px;
	border: 1px solid transparent;
	border-radius: var(--r-sm);
	background-color: var(--sunken);
	font-size: var(--fs-sm);
	box-shadow: none;
}
#root .content-wrapper .transactions-constructor .constructor-table table td select{
	width: 14ch;
	padding-right: 24px;
	background-position: calc(100% - 13px) 50%, calc(100% - 8px) 50%;
}
#root .content-wrapper .transactions-constructor .constructor-table table td select:hover:not(:disabled),
#root .content-wrapper .transactions-constructor .constructor-table table td input:not([type="checkbox"]):hover:not(:disabled){
	border-color: var(--border-strong);
}
#root .content-wrapper .transactions-constructor .constructor-table table td input:not([type="checkbox"]):focus,
#root .content-wrapper .transactions-constructor .constructor-table table td select:focus{
	outline: none;
	border-color: var(--brand);
	background-color: var(--surface);
	box-shadow: 0 0 0 3px var(--focus);
}
/* Locked cells in the estimation page's read-only tables read as plain text. The extra :not() keeps these above
   the base cell-input rule (same shape, two :not()s) so the fill really goes away. */
#root .content-wrapper .transactions-constructor .constructor-table table td select:disabled:not([multiple]),
#root .content-wrapper .transactions-constructor .constructor-table table td input:disabled:not([type="checkbox"]):not([type="file"]){
	border-color: transparent;
	background-color: transparent;
	background-image: none;
	color: var(--ink-2);
	cursor: default;
	opacity: 1;
}
/* Application form: a mix of editable and locked cells (author-locked measuring fields, drafts, per-row rules), so
   a locked one must be recognisable at a glance — hatched fill, dashed border, muted text, "not allowed" cursor */
#root[ng-controller="applications-form"] .content-wrapper .transactions-constructor .constructor-table table td select:disabled:not([multiple]),
#root[ng-controller="applications-form"] .content-wrapper .transactions-constructor .constructor-table table td input:disabled:not([type="checkbox"]):not([type="file"]){
	border: 1px dashed var(--border-strong);
	background-color: var(--sunken);
	background-image: repeating-linear-gradient(-45deg, transparent 0 5px, color-mix(in srgb, var(--border-strong) 55%, transparent) 5px 6px);
	color: var(--ink-3);
	cursor: not-allowed;
	opacity: 1;
}
#root .content-wrapper .transactions-constructor .constructor-table table td button:disabled{
	opacity: .55;
	cursor: not-allowed;
}
/* Text cells fill their column (service names etc.) but never collapse below a readable width */
#root .content-wrapper .transactions-constructor .constructor-table table td input[type="text"]:not([type="checkbox"]):not([type="file"]),
#root .content-wrapper .transactions-constructor .constructor-table table td input.cell-fill:not([type="checkbox"]):not([type="file"]){
	width: calc(100% - 6px);
	min-width: 16ch;
	box-sizing: border-box;
}
#root .content-wrapper .transactions-constructor .constructor-table table td input[type="number"]:not([type="checkbox"]):not([type="file"]){
	-moz-appearance: textfield;
	appearance: textfield;
	font-variant-numeric: tabular-nums;
	width: calc(100% - 6px);
	min-width: 7ch;
	box-sizing: border-box;
}
#root .content-wrapper .transactions-constructor .constructor-table table input[type="checkbox"]{
	width: 16px;
	margin: 0;
}
#root .content-wrapper .transactions-constructor .constructor-table table td input.cell-fill{
	width: calc(100% - 6px);
	box-sizing: border-box;
}
#root .content-wrapper .transactions-constructor .constructor-table table td button{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	height: 32px;
	margin: 3px;
	padding: 0 8px;
	box-sizing: border-box;
	border: 1px solid transparent;
	border-radius: var(--r-sm);
	background: var(--brand-50);
	color: var(--brand-text);
	font-size: var(--fs-xs);
	font-weight: 700;
	line-height: 1.1;
	cursor: pointer;
	transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
#root .content-wrapper .transactions-constructor .constructor-table table td button:hover:not(:disabled){
	background: var(--brand);
	color: var(--on-brand);
}
#root .content-wrapper .transactions-constructor .constructor-table table td button.selected{
	background: var(--brand);
	color: var(--on-brand);
}
#root .content-wrapper .transactions-constructor .constructor-table table td img{
	display: block;
	width: 64px;
	height: 44px;
	margin: 0 auto;
	object-fit: contain;
	cursor: pointer;
	transition: opacity var(--fast) var(--ease);
}
#root .content-wrapper .transactions-constructor .constructor-table table td img:hover{
	opacity: .7;
}
/* Measuring/modelling tables: the first five columns (select, edit, №, audit, location) stay pinned while the
   rest scrolls sideways — fixed widths so each sticky column knows its left offset */
#root #measuring-table tr > :nth-child(-n+4),
#root #modelling-table tr > :nth-child(-n+4){
	position: sticky;
	z-index: 2;
	width: 40px;
	min-width: 40px;
	max-width: 40px;
	box-sizing: border-box;
}
#root #measuring-table tr > :nth-child(1), #root #modelling-table tr > :nth-child(1){ left: 0; }
#root #measuring-table tr > :nth-child(2), #root #modelling-table tr > :nth-child(2){ left: 40px; }
#root #measuring-table tr > :nth-child(3), #root #modelling-table tr > :nth-child(3){ left: 80px; }
#root #measuring-table tr > :nth-child(4), #root #modelling-table tr > :nth-child(4){ left: 120px; }
#root #measuring-table tr > :nth-child(5),
#root #modelling-table tr > :nth-child(5){
	position: sticky;
	z-index: 2;
	left: 160px;
	box-shadow: 4px 0 6px -4px rgba(16, 32, 38, .18);
}
#root #measuring-table tr > :nth-child(5) input.jasper-default-input,
#root #modelling-table tr > :nth-child(5) input.jasper-default-input{
	width: 16ch;
}
#root #measuring-table td:nth-child(2) button,
#root #modelling-table td:nth-child(2) button{
	min-width: 30px;
	width: 30px;
	height: 30px;
	padding: 0;
}

/* Aspect step chips */
#root .step-chip-group{
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
#root .step-chip{
	display: inline-flex;
	align-items: center;
	height: 26px;
	padding: 0 10px;
	border: 1px solid var(--border);
	border-radius: var(--r-pill);
	background: var(--sunken);
	color: var(--ink-2);
	font-size: var(--fs-xs);
	font-weight: 500;
	cursor: pointer;
	transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
#root button.step-chip:hover{
	border-color: var(--border-strong);
}
#root .step-chip.active{
	border-color: var(--brand);
	background: var(--brand);
	color: var(--on-brand);
}
/* read-only display in aspect tables (toggling happens only in the edit modal's <button> chips) */
#root span.step-chip{
	cursor: default;
}
#root span.step-chip.active{
	border-color: var(--brand-200);
	background: var(--brand-50);
	color: var(--brand-text);
}
/* read-only "which qualities apply to this application" note, applications-overview's Накладная and Разработка tabs */
#root .jasper-quality-note{
	margin: 16px var(--gutter) 0;
	padding: 12px 16px;
	border: 1px solid color-mix(in srgb, var(--warning-line) 45%, transparent);
	border-radius: var(--r-md);
	background: var(--warning-bg);
}
#root .jasper-quality-note h4{
	margin: 0 0 6px 0;
	color: var(--warning);
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}
#root .jasper-quality-note-row{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	padding: 5px 0;
	font-size: var(--fs-sm);
	color: var(--ink-2);
}
#root .jasper-quality-note-row + .jasper-quality-note-row{
	border-top: 1px solid color-mix(in srgb, var(--warning-line) 30%, transparent);
}
#root .jasper-quality-note-name{
	font-weight: 700;
	color: var(--ink);
	min-width: 10ch;
}
#root .jasper-quality-note-forecast{
	margin-left: auto;
	color: var(--warning);
	font-weight: 700;
	white-space: nowrap;
}
#root .aspect-gallery{
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	padding: 16px var(--gutter);
}
#root .aspect-gallery img{
	width: 120px;
	height: 90px;
	object-fit: cover;
	border-radius: var(--r-md);
	border: 1px solid var(--border);
	background: var(--sunken);
	cursor: pointer;
	transition: box-shadow var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
#root .aspect-gallery img:hover{
	border-color: var(--brand);
	box-shadow: 0 0 0 3px var(--focus);
}
#root img.aspect-table-thumbnail{
	cursor: zoom-in;
}

/* ===== ASPECT LIGHTBOX ===== */
#aspect-lightbox-modal{
	position: fixed;
	z-index: 999;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--base) var(--ease), visibility var(--base);
}
#aspect-lightbox-modal.active{
	opacity: 1;
	visibility: visible;
}
#aspect-lightbox-modal .cover{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(4, 10, 12, .88);
}
#aspect-lightbox-modal .aspect-lightbox-frame{
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	max-width: 88vw;
	transform: scale(.97);
	opacity: 0;
	transition: opacity var(--base) var(--ease), transform var(--base) var(--ease);
}
#aspect-lightbox-modal.active .aspect-lightbox-frame{
	transform: scale(1);
	opacity: 1;
}
#aspect-lightbox-modal .aspect-lightbox-close{
	position: absolute;
	top: -44px;
	right: 0;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, .12);
	color: #FFFFFF;
	font-size: 18px;
	cursor: pointer;
	transition: background var(--fast) var(--ease);
}
#aspect-lightbox-modal .aspect-lightbox-close:hover{
	background: rgba(255, 255, 255, .24);
}
#aspect-lightbox-modal .aspect-lightbox-stage{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}
#aspect-lightbox-modal .aspect-lightbox-stage img{
	max-width: 88vw;
	max-height: 74vh;
	object-fit: contain;
	border-radius: var(--r-md);
	background: #1A2327;
	animation: fade-in var(--base) var(--ease);
}
#aspect-lightbox-modal .aspect-lightbox-arrow{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: none;
	background: rgba(255, 255, 255, .9);
	color: #0E3A45;
	font-size: 16px;
	cursor: pointer;
	box-shadow: 0 4px 12px rgba(0, 0, 0, .3);
	transition: background var(--fast) var(--ease);
}
#aspect-lightbox-modal .aspect-lightbox-arrow:hover{
	background: #FFFFFF;
}
#aspect-lightbox-modal .aspect-lightbox-arrow-prev{
	left: 12px;
}
#aspect-lightbox-modal .aspect-lightbox-arrow-next{
	right: 12px;
}
#aspect-lightbox-modal .aspect-lightbox-footer{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}
#aspect-lightbox-modal .aspect-lightbox-caption{
	color: #FFFFFF;
	font-size: var(--fs-md);
	text-align: center;
}
#aspect-lightbox-modal .aspect-lightbox-dots{
	display: flex;
	align-items: center;
	gap: 6px;
}
#aspect-lightbox-modal .aspect-lightbox-dot{
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .35);
	cursor: pointer;
	transition: background var(--fast) var(--ease), transform var(--fast) var(--ease);
}
#aspect-lightbox-modal .aspect-lightbox-dot.active{
	background: #FFFFFF;
	transform: scale(1.25);
}
#aspect-lightbox-modal .aspect-lightbox-counter{
	color: rgba(255, 255, 255, .7);
	font-size: var(--fs-sm);
	font-variant-numeric: tabular-nums;
}

/* ===== OVERVIEW: totals + forecast panel ===== */
#root .content-wrapper .forecast-container{
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: 16px;
	align-items: start;
	padding: 16px var(--gutter) 0;
}
#root .content-wrapper .forecast-container .forecast-totals{
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
}
#root .content-wrapper .forecast-container .forecast-total-hero{
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 6px;
	padding: 24px;
	background: var(--brand-50);
	border-right: 1px solid var(--border);
}
#root .content-wrapper .forecast-container .forecast-total-hero span{
	font-size: var(--fs-sm);
	font-weight: 500;
	color: var(--brand-text);
}
#root .content-wrapper .forecast-container .forecast-total-hero strong{
	font-size: 30px;
	line-height: 1.15;
	letter-spacing: -.01em;
	font-variant-numeric: tabular-nums;
	overflow-wrap: anywhere;
}
#root .content-wrapper .forecast-container .forecast-total-hero strong small{
	font-size: var(--fs-lg);
	font-weight: 500;
	color: var(--ink-2);
}
#root .content-wrapper .forecast-container .forecast-breakdown{
	list-style: none;
	margin: 0;
	padding: 12px 20px;
	display: flex;
	flex-direction: column;
}
#root .content-wrapper .forecast-container .forecast-breakdown li{
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 0;
	font-size: var(--fs-sm);
	color: var(--ink-2);
	border-bottom: 1px dashed var(--border);
}
#root .content-wrapper .forecast-container .forecast-breakdown li:last-child{
	border-bottom: none;
}
#root .content-wrapper .forecast-container .forecast-breakdown li b{
	color: var(--ink);
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
#root .content-wrapper .forecast-container .forecast-breakdown li.forecast-breakdown-sum{
	margin-top: 4px;
	padding-top: 10px;
	border-top: 1px solid var(--border-strong);
	border-bottom: none;
	color: var(--ink);
	font-weight: 700;
}
#root .content-wrapper .forecast-container .forecast-breakdown li.forecast-breakdown-sum b{
	font-weight: 700;
}
/* "Итого со скидкой" - a subtotal under the sum, weighted but without the sum's rule */
#root .content-wrapper .forecast-container .forecast-breakdown li.forecast-breakdown-strong{
	color: var(--ink);
	font-weight: 600;
}
#root .content-wrapper .forecast-container .forecast-breakdown li.forecast-breakdown-strong b{
	font-weight: 700;
}
#root .content-wrapper .forecast-container form{
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 0;
	padding: 0 18px 18px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-sm);
}
#root .content-wrapper .forecast-container form .forecast-form-title{
	margin: 0 -18px;
	padding: 14px 18px;
	border-bottom: 1px solid var(--border);
	font-size: var(--fs-lg);
	font-weight: 700;
}
#root .content-wrapper .forecast-container form .form-group{
	display: flex;
	flex-direction: column;
	gap: 6px;
}
#root .content-wrapper .forecast-container form .form-group label{
	font-size: var(--fs-sm);
	font-weight: 500;
	color: var(--ink-2);
}
#root .content-wrapper .forecast-container form .form-group .jasper-default-input,
#root .content-wrapper .forecast-container form .form-group .jasper-default-button{
	width: 100%;
}
#root .content-wrapper .forecast-container form .measuring-stage-locked-hint{
	margin: 0;
}

/* ===== OVERVIEW: invoice cards + department tables ===== */
#root .content-wrapper .invoice-container{
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 16px var(--gutter) 0;
}
#root .content-wrapper .invoice-container .invoice-product-card{
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	gap: 16px;
	padding: 16px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-sm);
}
#root .content-wrapper .invoice-container .invoice-product-card table{
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid var(--border);
	border-radius: var(--r-md);
	font-size: var(--fs-sm);
	align-self: start;
}
#root .content-wrapper .invoice-container .invoice-product-card table th{
	height: 36px;
	padding: 0 12px;
	background: var(--sunken);
	color: var(--ink-3);
	font-size: var(--fs-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	text-align: left;
	border: none;
	border-bottom: 1px solid var(--border);
}
#root .content-wrapper .invoice-container .invoice-product-card table tr:first-child th:first-child{ border-top-left-radius: var(--r-md); }
#root .content-wrapper .invoice-container .invoice-product-card table tr:first-child th:last-child{ border-top-right-radius: var(--r-md); }
#root .content-wrapper .invoice-container .invoice-product-card table td{
	height: 38px;
	padding: 4px 12px;
	font-size: var(--fs-sm);
	font-weight: 500;
	color: var(--ink);
	border: none;
	border-bottom: 1px solid var(--border);
	font-variant-numeric: tabular-nums;
}
#root .content-wrapper .invoice-container .invoice-product-card table tr:last-child td{
	border-bottom: none;
}
#root .content-wrapper .invoice-container .invoice-product-card .invoice-product-card-image{
	position: relative;
	width: 100%;
	height: 380px;
	background: var(--sunken);
	border-radius: var(--r-md);
	overflow: hidden;
}
#root .content-wrapper .invoice-container .invoice-product-card .invoice-product-card-image img{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
}
#root .content-wrapper .table-row-container{
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 16px var(--gutter) 0;
}
#root .content-wrapper .table-row-container.leading{
	padding-top: 16px;
}
/* Overview's Продажа tab: one heading per pricing bucket (production / accessories / services) with its subtotal */
#root .content-wrapper .table-tab-container .table-group-heading{
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin: 28px var(--gutter) 0;
	padding-bottom: 8px;
	border-bottom: 2px solid var(--brand);
}
#root .content-wrapper .table-tab-container .table-group-heading:first-child{
	margin-top: 16px;
}
#root .content-wrapper .table-tab-container .table-group-heading h3{
	margin: 0;
	font-size: var(--fs-xl);
	font-weight: 700;
	color: var(--ink);
}
#root .content-wrapper .table-tab-container .table-group-heading span{
	font-size: var(--fs-lg);
	font-weight: 700;
	color: var(--brand-text);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
#root .content-wrapper .table-row-container .table-row-container-column{
	display: flex;
	flex-direction: column;
	width: 100%;
	min-width: 0;
	gap: 10px;
}
#root .content-wrapper .table-row-container .table-row-container-column h4{
	margin: 0;
	font-size: var(--fs-lg);
	font-weight: 700;
	color: var(--ink);
}
#root .content-wrapper .table-row-container .table-row-container-column table{
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-sm);
	font-size: var(--fs-sm);
	text-align: center;
}
#root .content-wrapper .table-row-container .table-row-container-column table th{
	height: 36px;
	padding: 0 10px;
	background: var(--sunken);
	color: var(--ink-3);
	font-size: var(--fs-xs);
	font-weight: 700;
	border: none;
	border-bottom: 1px solid var(--border);
	border-right: 1px solid var(--border);
}
#root .content-wrapper .table-row-container .table-row-container-column table th:last-child{
	border-right: none;
}
#root .content-wrapper .table-row-container .table-row-container-column table tr:first-child th:first-child{ border-top-left-radius: var(--r-lg); }
#root .content-wrapper .table-row-container .table-row-container-column table tr:first-child th:last-child{ border-top-right-radius: var(--r-lg); }
#root .content-wrapper .table-row-container .table-row-container-column table td{
	height: 38px;
	padding: 4px 10px;
	font-size: var(--fs-sm);
	font-weight: 500;
	color: var(--ink);
	border: none;
	border-bottom: 1px solid var(--border);
	font-variant-numeric: tabular-nums;
}
#root .content-wrapper .table-row-container .table-row-container-column table tr:last-child td{
	border-bottom: none;
}
#root .content-wrapper .table-row-container .table-row-container-column table td .jasper-default-input{
	width: 100%;
	height: 32px;
	box-sizing: border-box;
}

/* ===== MOTION =====
   Entrance choreography. Fill mode is always `backwards`, never `both`/`forwards`: a finished transform animation
   that stays applied holds an identity matrix (Firefox computes translateY(0), not `none`), which would make the
   element a containing block for position:fixed descendants for good. The animations also only run on
   wrappers verified to hold no position:fixed descendant — the modals, lightbox, autocomplete lists and
   #bottom-sheet all live outside .content-wrapper — so none of this can capture a fixed element. */
@keyframes rise-in{
	from{ opacity: 0; transform: translateY(10px); }
	to{ opacity: 1; transform: none; }
}
@keyframes row-in{
	from{ opacity: 0; transform: translateY(6px); }
	to{ opacity: 1; transform: none; }
}
@keyframes pop-in{
	0%{ opacity: 0; transform: scale(.6); }
	70%{ opacity: 1; transform: scale(1.08); }
	100%{ opacity: 1; transform: none; }
}
@keyframes step-pulse{
	0%{ box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 40%, transparent); }
	70%{ box-shadow: 0 0 0 8px transparent; }
	100%{ box-shadow: 0 0 0 0 transparent; }
}
/* Page blocks cascade in on every route change (each routed partial mounts a fresh .content-wrapper) */
#root .content-wrapper > *{
	animation: rise-in var(--slower) var(--ease) backwards;
}
#root .content-wrapper > *:nth-child(2){ animation-delay: 50ms; }
#root .content-wrapper > *:nth-child(3){ animation-delay: 100ms; }
#root .content-wrapper > *:nth-child(4){ animation-delay: 150ms; }
#root .content-wrapper > *:nth-child(5){ animation-delay: 200ms; }
#root .content-wrapper > *:nth-child(n+6){ animation-delay: 250ms; }
#root .content-wrapper > .ng-hide{
	animation: none;
}
/* Cards inside the visible tab follow the tab's own rise, slightly staggered */
#root .content-wrapper .content-tab-container > *,
#root .content-wrapper .forecast-container > *,
#root .content-wrapper .table-row-container > *{
	animation: rise-in var(--slower) var(--ease) backwards;
}
#root .content-wrapper .content-tab-container > *:nth-child(2),
#root .content-wrapper .forecast-container > *:nth-child(2),
#root .content-wrapper .table-row-container > *:nth-child(2){ animation-delay: 60ms; }
#root .content-wrapper .content-tab-container > *:nth-child(3),
#root .content-wrapper .table-row-container > *:nth-child(3){ animation-delay: 120ms; }
#root .content-wrapper .content-tab-container > *:nth-child(n+4){ animation-delay: 160ms; }
/* List rows cascade in (list pages only — never the transaction tables, whose pinned columns are sticky) */
#root .content-wrapper .content-table table tr + tr{
	animation: row-in var(--slow) var(--ease) backwards;
}
#root .content-wrapper .content-table table tr:nth-child(2){ animation-delay: 80ms; }
#root .content-wrapper .content-table table tr:nth-child(3){ animation-delay: 105ms; }
#root .content-wrapper .content-table table tr:nth-child(4){ animation-delay: 130ms; }
#root .content-wrapper .content-table table tr:nth-child(5){ animation-delay: 155ms; }
#root .content-wrapper .content-table table tr:nth-child(6){ animation-delay: 180ms; }
#root .content-wrapper .content-table table tr:nth-child(7){ animation-delay: 205ms; }
#root .content-wrapper .content-table table tr:nth-child(8){ animation-delay: 230ms; }
#root .content-wrapper .content-table table tr:nth-child(9){ animation-delay: 255ms; }
#root .content-wrapper .content-table table tr:nth-child(10){ animation-delay: 280ms; }
#root .content-wrapper .content-table table tr:nth-child(n+11){ animation-delay: 300ms; }
/* Hovered list row: a brand accent bar on its leading edge, in addition to the tint */
#root .content-wrapper .content-table table tr + tr:hover td:first-child{
	box-shadow: inset 3px 0 0 var(--brand);
}
/* Buttons: primary lifts on hover, every button presses in */
#root .jasper-default-button:hover:not(:disabled):not(.jasper-secondary-button):not(.jasper-danger-button){
	transform: translateY(-1px);
	box-shadow: var(--shadow-md);
}
#root .jasper-default-button:active:not(:disabled), #confirm-modal .jasper-default-button:active:not(:disabled){
	transform: scale(.97);
	box-shadow: none;
}
/* The pending pipeline step breathes, so "what does this application wait for" is the first thing the eye lands on */
#root .application-stepper .step.pending .dot{
	animation: step-pulse 2.2s var(--ease) infinite;
}
/* Confirmation icon + checkbox tick pop in */
#confirm-modal.active section .confirm-icon{
	animation: pop-in var(--slower) var(--spring) backwards;
	animation-delay: 80ms;
}
#root .jasper-default-checkbox input[type="checkbox"]:checked + .checkbox-box i{
	animation: pop-in var(--base) var(--spring) backwards;
}
/* Bottom-sheet editor: its cards cascade in behind the sheet's own slide */
#bottom-sheet.active form > *{
	animation: rise-in var(--slower) var(--ease) backwards;
}
#bottom-sheet.active form > *:nth-child(2){ animation-delay: 120ms; }
#bottom-sheet.active form > *:nth-child(3){ animation-delay: 160ms; }
#bottom-sheet.active form > *:nth-child(4){ animation-delay: 200ms; }
#bottom-sheet.active form > *:nth-child(n+5){ animation-delay: 240ms; }

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce){
	*, *::before, *::after{
		animation-duration: 1ms !important;
		animation-delay: 0ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 1ms !important;
	}
}

/* ===== LAPTOP (≤1280px) — tighter gutters ===== */
@media (max-width: 1280px){
	:root{
		--gutter: 16px;
	}
	#component header .header-nav a{
		padding: 0 10px;
	}
}

/* ===== MOBILE (≤640px) — the one phone breakpoint. With px sizing the base scale already reads at phone
   width; this block only restacks layouts and enlarges tap targets. ===== */
@media (max-width: 640px){
	:root{
		--gutter: 12px;
		--control-h: 40px;
	}

	/* Header: logo + icon-only nav + avatar */
	#component header{
		gap: 8px;
		padding: 0 8px;
	}
	#component header .header-leading a span,
	#component header .header-nav a span,
	#component .user-menu-trigger .user-menu-identity,
	#component .user-menu-trigger > i{
		display: none;
	}
	#component header .header-nav a{
		width: 40px;
		padding: 0;
		justify-content: center;
	}
	#component header .header-nav a i{
		font-size: 16px;
	}
	#component .user-menu-trigger{
		padding: 0 4px;
	}
	#component .user-menu-panel{
		position: fixed;
		top: calc(var(--header-h) + 4px);
		right: 8px;
		width: calc(100vw - 16px);
		max-width: 320px;
	}

	/* Notification: full width at the bottom */
	#notification-bar{
		left: 12px;
		right: 12px;
		bottom: 12px;
		width: auto;
		max-width: none;
	}

	/* Modals */
	#general-modal .select-grid, #profile-modal .select-grid{
		grid-template-columns: repeat(2, 1fr);
		padding: 0 16px 16px;
		max-height: 80vh;
	}
	#general-modal .select-grid h3, #profile-modal .select-grid h3{
		grid-column: span 2;
		margin: 0 -16px 4px;
		padding: 16px 52px 12px 16px;
	}
	#general-modal .select-grid .grid-card, #profile-modal .select-grid .grid-card{
		width: 100%;
	}
	#general-modal form, #profile-modal form{
		min-width: 0;
		width: calc(100vw - 24px);
		max-height: 88vh;
		padding: 0 16px 16px;
	}
	#general-modal form h3, #profile-modal form h3{
		margin: 0 -16px;
		padding: 16px 52px 12px 16px;
	}
	#general-modal form .grid-container, #profile-modal form .grid-container{
		grid-template-columns: minmax(0, 1fr);
	}
	#general-modal form .grid-container .form-group.colspan-2, #profile-modal form .grid-container .form-group.colspan-2,
	#general-modal form .grid-container hr, #profile-modal form .grid-container hr{
		grid-column: auto;
	}
	#general-modal form .form-group:has(> .jasper-default-button) > .jasper-default-button, #profile-modal form .form-group:has(> .jasper-default-button) > .jasper-default-button{
		flex: 1;
	}
	#general-modal form table, #profile-modal form table{
		display: block;
		overflow-x: auto;
	}
	#general-modal section .actions-row, #logout-modal section .actions-row, #confirm-modal section .actions-row{
		flex-direction: column-reverse;
		align-items: stretch;
	}

	/* Bottom sheet */
	#bottom-sheet header{
		flex-wrap: wrap;
		gap: 8px;
		padding: 10px var(--gutter);
	}
	#bottom-sheet header h2{
		flex: 1 1 100%;
		font-size: var(--fs-lg);
	}
	#bottom-sheet header .header-trailing{
		margin-left: auto;
	}
	#bottom-sheet form .form-row .form-group{
		flex: 1 1 calc(50% - 6px);
	}

	/* Page headers and toolbars */
	#root .content-wrapper .content-header{
		padding: 14px var(--gutter);
	}
	#root .content-wrapper .content-header .header-leading h2{
		font-size: var(--fs-xl);
	}
	#root .content-wrapper .content-header .header-trailing{
		margin-left: 0;
		width: 100%;
	}
	#root .content-wrapper .content-header .header-trailing > .jasper-default-button{
		flex: 1 1 auto;
	}
	#root .content-wrapper .content-header .header-trailing input.jasper-default-input,
	#root .content-wrapper .content-header .header-trailing select.jasper-default-input{
		flex: 1 1 90px;
		width: auto;
		min-width: 0;
	}
	#root .content-wrapper .content-header .header-trailing input + button,
	#root .content-wrapper .content-header .header-trailing select + button,
	#root .content-wrapper .content-header .header-trailing .inline-field + button{
		flex: 1 1 100%;
	}
	#root .content-wrapper .content-header .header-trailing .inline-field{
		flex: 1 1 90px;
	}
	#root .content-wrapper .content-header .header-trailing .inline-field .jasper-default-input{
		flex: none;
		width: 100%;
	}
	#root .content-wrapper .content-toolbar .toolbar-trailing{
		margin-left: 0;
		width: 100%;
	}
	#root .content-wrapper .content-toolbar .toolbar-trailing .search-input{
		flex: 1;
	}
	#root .content-wrapper .content-toolbar .toolbar-trailing .search-input input{
		width: 100%;
		min-width: 0;
	}
	#root .content-wrapper .content-toolbar-emphasized .toolbar-leading select,
	#root .content-wrapper .content-toolbar-emphasized .toolbar-leading input{
		flex: 1 1 140px;
	}

	/* Tables scroll sideways inside their own container */
	#root .content-wrapper .content-table{
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	#root .content-wrapper .content-table table{
		width: max-content;
		min-width: 100%;
	}
	#root .content-wrapper .content-table table td .history-diff-label{
		min-width: 100%;
	}
	#root .content-wrapper .table-row-container{
		flex-direction: column;
	}
	#root .content-wrapper .table-row-container .table-row-container-column{
		overflow-x: auto;
	}
	/* Only the select + edit columns stay pinned on a phone — five would cover the screen */
	#root #measuring-table tr > :nth-child(n+3):nth-child(-n+5),
	#root #modelling-table tr > :nth-child(n+3):nth-child(-n+5){
		position: static;
		box-shadow: none;
	}

	/* Overview forecast panel + invoice cards stack */
	#root .content-wrapper .forecast-container,
	#root .content-wrapper .forecast-container .forecast-totals,
	#root .content-wrapper .invoice-container .invoice-product-card{
		grid-template-columns: minmax(0, 1fr);
	}
	#root .content-wrapper .forecast-container .forecast-total-hero{
		border-right: none;
		border-bottom: 1px solid var(--border);
		padding: 18px;
	}
	#root .content-wrapper .forecast-container .forecast-total-hero strong{
		font-size: 24px;
	}
	#root .content-wrapper .invoice-container .invoice-product-card .invoice-product-card-image{
		height: 240px;
	}
	#root .content-wrapper .invoice-container .invoice-product-card table{
		display: block;
		overflow-x: auto;
	}

	#root .jasper-default-checkbox-grid .checkbox-row{
		grid-template-columns: 1fr;
	}
	#root .content-wrapper .content-tab-container .content-tabs,
	#root .content-wrapper .table-tab-container .content-tabs{
		flex-wrap: nowrap;
		overflow-x: auto;
	}
	#aspect-lightbox-modal .aspect-lightbox-close{
		top: -44px;
	}
}