/*
 * The renewed user interface (UiVersion::NEW, views_v2/page.twig).
 *
 * Bootstrap 5.3 stays: its variables are set to the BrewOS palette here, so
 * the page templates shared with the classic interface (views/) take the new
 * look without changes. Colours as on brewos.fi: navy frame, hop-yellow
 * highlight, blue for actions.
 */

:root {
	--v2-navy: #0f2a44;
	--v2-navy-2: #17395b;
	--v2-navy-text: #b9cddd;
	--v2-navy-muted: #7f98ad;
	--v2-amber: #ffc107;
	--v2-blue: #0d6efd;
	--v2-blue-ink: #0a58ca;
	--v2-ink: #1d2b36;
	--v2-muted: #5d6f7d;
	--v2-line: #dfe7ee;
	--v2-bg: #f4f8fb;
	--v2-surface: #ffffff;
	--v2-hover: #f1f6fb;
	--v2-side-width: 232px;
}

/* The page behind the frame. The frame itself carries .ui-v2, so a page that
   replaces the whole body (the public front page) keeps its own look. */
body:has(> .v2-shell) { margin: 0; padding: 0; background-color: var(--v2-bg); }

.ui-v2 {
	--bs-body-font-family: Roboto, "Helvetica Neue", Arial, sans-serif;
	--bs-body-font-size: 0.9375rem;
	--bs-body-color: var(--v2-ink);
	--bs-body-bg: var(--v2-bg);
	--bs-border-color: var(--v2-line);
	--bs-secondary-color: var(--v2-muted);
	--bs-link-color: var(--v2-blue-ink);
	--bs-link-color-rgb: 10, 88, 202;
	--bs-link-hover-color: #084298;
	--bs-link-hover-color-rgb: 8, 66, 152;
	--bs-border-radius: 0.4375rem;
	--bs-font-monospace: "Roboto Mono", SFMono-Regular, Menlo, Consolas, monospace;
	background-color: var(--v2-bg);
	color: var(--v2-ink);
	font-family: var(--bs-body-font-family);
	font-size: var(--bs-body-font-size);
	-webkit-font-smoothing: antialiased;
}

/* ------------------------------------------------- rules every page relies on
   (carried over from the classic frame's own style block) */
.ui-v2 .material-icons { vertical-align: middle; }
.ui-v2 a { text-decoration: none; }
.ui-v2 a:hover { text-decoration: none; }
.ui-v2 .document { max-width: 750px; margin: 0 auto; }
.ui-v2 .document h1 { font-size: 1.6rem; }
.ui-v2 .document h2 { font-size: 1.4rem; }
.ui-v2 .document h3 { font-size: 1.2rem; }
.ui-v2 .document h4 { font-size: 1rem; margin-left: 1em; }
.ui-v2 .document p,
.ui-v2 .document li { margin-left: 45px; }
.ui-v2 .document p { margin-right: 20px; text-align: left; }
.ui-v2 .clickable:hover { cursor: pointer; background-color: var(--v2-hover); }
.ui-v2 [data-href]:focus-visible { outline: 2px solid var(--v2-blue); outline-offset: -2px; }
.ui-v2 .thumbnail { width: 64px; height: 48px; }
.ui-v2 .avatar { border-radius: 20%; text-align: center; padding: 0; margin: 0; border: solid 1px rgba(0,0,0,0.6); background-color: #007bff; color: #ffffff; }
.ui-v2 .bg-info { background-color: #a8d8e8 !important; }
.ui-v2 .bg-warning { background-color: #e6a817 !important; }
.ui-v2 .btn-outline-warning {
	--bs-btn-color: #c47f00;
	--bs-btn-border-color: #c47f00;
	--bs-btn-hover-bg: #c47f00;
	--bs-btn-hover-border-color: #c47f00;
	--bs-btn-active-bg: #c47f00;
	--bs-btn-active-border-color: #c47f00;
}

/* ------------------------------------------------------------- typography */
.ui-v2 h1, .ui-v2 h2, .ui-v2 h3, .ui-v2 h4 {
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--v2-ink);
	text-wrap: balance;
}
.ui-v2 h1 { font-size: 1.6rem; line-height: 1.2; }
.ui-v2 h2 { font-size: 1.3rem; }
.ui-v2 h3 { font-size: 1.1rem; }
.ui-v2 h4 { font-size: 1rem; }
.ui-v2 code, .ui-v2 kbd, .ui-v2 pre, .ui-v2 samp { font-family: var(--bs-font-monospace); }
.ui-v2 .text-muted { color: var(--v2-muted) !important; }
.ui-v2 td, .ui-v2 th { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ shell */
.v2-shell { display: flex; min-height: 100vh; }
.v2-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.v2-content { flex: 1 0 auto; min-width: 0; overflow-x: auto; }
.v2-content > article { min-height: 70vh; max-width: 100%; }
/* The pages with tabs (product, recipe, production batch, warehouse...) put
   their heading, facts table and tabs in a frame of their own without side
   padding: give it some, so nothing touches the side menu. */
.ui-v2 article .container-xl > .bg-light { background: transparent !important; padding: 0 0.5rem; }

/* side menu */
.v2-side {
	flex: none;
	width: var(--v2-side-width);
	background: var(--v2-navy);
	color: var(--v2-navy-text);
	position: sticky;
	top: 0;
	height: 100vh;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	padding: 14px 10px 16px;
	z-index: 50;
}
.v2-brand { display: block; padding: 4px 10px 14px; }
.v2-brand img { filter: brightness(0) invert(1); opacity: 0.95; }
.v2-account {
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--v2-navy-2);
	border-radius: 8px;
	padding: 8px 10px;
	margin-bottom: 10px;
	color: #ffffff;
	font-weight: 500;
	line-height: 1.25;
	min-width: 0;
}
.v2-account:hover { color: #ffffff; background: #1d4569; }
.v2-account-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v2-account-logo { width: 30px; height: 30px; border-radius: 50%; flex: none; object-fit: cover; background: #ffffff; }
.v2-initials { display: inline-grid; place-items: center; font-weight: 700; font-size: 12px; }
.v2-account .v2-initials { background: #f5e6c8; color: #6b4a00; }
.v2-account-admin .v2-initials { background: var(--v2-amber); color: var(--v2-navy); }
.v2-account-admin .v2-initials .material-icons { font-size: 18px; }

.v2-side ul.nav { flex: 1 0 auto; flex-wrap: nowrap; gap: 1px; }
.v2-side .nav-link {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 10px;
	border-radius: 6px;
	color: #d5e2ec;
	white-space: nowrap;
}
.v2-side .nav-link .material-icons { font-size: 19px; color: #8fa9be; flex: none; }
.v2-side .nav-link:hover { background: rgba(255, 255, 255, 0.06); color: #ffffff; }
.v2-side .nav-link:focus-visible { outline: 2px solid var(--v2-amber); outline-offset: -2px; }
.v2-side .selected > .nav-link { background: rgba(255, 255, 255, 0.10); color: #ffffff; box-shadow: inset 3px 0 0 var(--v2-amber); }
.v2-side .selected > .nav-link .material-icons { color: var(--v2-amber); }
/* The labels are lower case (they are shared with the classic menu): the
   first letter is raised here. One line in every language: a label that
   would not fit ends in an ellipsis. */
.v2-side .nav-label { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.v2-side .nav-label::first-letter { text-transform: uppercase; }
.v2-group {
	font-size: 0.68rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--v2-navy-muted);
	padding: 12px 10px 4px;
}
.v2-spacer { flex: 1 0 12px; }

/* top bar */
.v2-top {
	position: sticky;
	top: 0;
	z-index: 40;
	background: var(--v2-surface);
	border-bottom: 1px solid var(--v2-line);
}
.v2-top .header-bar { display: flex; align-items: center; gap: 2px; min-height: 52px; padding: 0 16px; white-space: nowrap; }
.v2-top .header-brand { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; }
.v2-top .header-brand img { display: block; }
.v2-top-account { color: var(--v2-ink); font-weight: 500; overflow: hidden; text-overflow: ellipsis; display: none; }
.v2-top .header-item { display: flex; align-items: center; margin: 0; }
.v2-top .header-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 10px;
	border-radius: 7px;
	color: var(--v2-muted);
	font-size: 0.875rem;
	background: none;
	border: 0;
	line-height: 1.4;
}
.v2-top .header-link:hover { background: var(--v2-hover); color: var(--v2-ink); }
.v2-top .header-link .material-icons { font-size: 20px; }
.v2-top .language-menu { padding: 0 6px; color: var(--v2-muted); }
.v2-top .language-menu select { border-color: var(--v2-line); }
.v2-avatar { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex: none; }
.v2-avatar.v2-initials { background: #dfe9f1; color: var(--v2-navy); font-size: 11px; }
.v2-menu-button {
	display: none;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	margin-right: 8px;
	border: 1px solid var(--v2-line);
	border-radius: 8px;
	background: var(--v2-surface);
	color: var(--v2-ink);
}
.v2-backdrop { position: fixed; inset: 0; background: rgba(10, 25, 40, 0.45); z-index: 1035; }

/* Below 992 px the side menu is a drawer over the page, opened from the top
   bar; the bar shows the account's name in its place, and its links show just
   their icons (the text stays their accessible name). */
@media (max-width: 991.98px) {
	.v2-side {
		position: fixed;
		left: 0;
		top: 0;
		bottom: 0;
		height: auto;
		z-index: 1040;
		transform: translateX(-100%);
		visibility: hidden;
		transition: transform 160ms ease, visibility 0s linear 160ms;
		box-shadow: 0 0 40px rgba(10, 25, 40, 0.35);
	}
	body.sidemenu-open .v2-side { transform: none; visibility: visible; transition: transform 160ms ease; }
	.v2-menu-button { display: inline-flex; }
	.v2-top-account { display: block; }
	.v2-top .header-label,
	.v2-top .language-menu > label { display: none !important; }
	.v2-top .header-link { padding: 6px 8px; }
}
@media (max-width: 576px) {
	.v2-top .header-bar { padding: 0 8px; }
	.v2-top-account { display: none; }
	.v2-top .language-menu select { max-width: 6.5rem; }
}
@media (prefers-reduced-motion: reduce) {
	.v2-side, body.sidemenu-open .v2-side { transition: none; }
}

/* footer */
.v2-footer { border-top: 1px solid var(--v2-line); background: var(--v2-surface); color: var(--v2-muted); font-size: 0.8125rem; padding: 18px 0 22px; margin-top: 24px; }
.v2-footer-links { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-bottom: 10px; }
.v2-footer-links a { color: var(--v2-muted); }
.v2-footer-links a:hover { color: var(--v2-ink); }
.v2-footer-meta { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.v2-reading { padding: 0 4px; border-radius: 3px; }
.v2-reading-ok { background: rgba(25, 135, 84, 0.12); }
.v2-reading-warn { background: rgba(255, 193, 7, 0.18); }
.v2-reading-bad { background: rgba(220, 53, 69, 0.12); }

/* ------------------------------------------------------------- components */
.ui-v2 .btn {
	--bs-btn-font-weight: 500;
	--bs-btn-border-radius: 0.4375rem;
	background-image: none !important;
	box-shadow: none !important;
}
.ui-v2 .btn:focus-visible { outline: 2px solid var(--v2-blue); outline-offset: 2px; }
.ui-v2 .btn-outline-secondary { --bs-btn-color: var(--v2-ink); --bs-btn-border-color: #c5d2dc; --bs-btn-hover-bg: var(--v2-hover); --bs-btn-hover-color: var(--v2-ink); --bs-btn-hover-border-color: #b2c2cf; }

.ui-v2 .form-control,
.ui-v2 .form-select { border-color: #cfdae3; border-radius: 0.4375rem; }
.ui-v2 .form-control:focus,
.ui-v2 .form-select:focus { border-color: #86b7fe; box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.15); }

.ui-v2 .card { --bs-card-border-color: var(--v2-line); --bs-card-border-radius: 10px; --bs-card-cap-bg: #fafcfd; }
.ui-v2 .alert { --bs-alert-border-radius: 10px; }
.ui-v2 .badge { font-weight: 500; }

/* Tables: white on the light page, rows divided by hairlines; the bordered
   variant drops its vertical lines. Headers are small and muted. */
.ui-v2 .table {
	--bs-table-bg: var(--v2-surface);
	--bs-table-border-color: var(--v2-line);
	--bs-table-hover-bg: var(--v2-hover);
	box-shadow: 0 0 0 1px var(--v2-line);
}
.ui-v2 .table > :not(caption) > * > * { padding: 0.5rem 0.75rem; }
.ui-v2 .table-sm > :not(caption) > * > * { padding: 0.35rem 0.6rem; }
.ui-v2 .table-bordered > :not(caption) > * > * { border-left-width: 0; border-right-width: 0; }
.ui-v2 .table-bordered > :not(caption) > * { border-left-width: 0; border-right-width: 0; }
.ui-v2 .table > thead th,
.ui-v2 .table > thead td { font-size: 0.8125rem; font-weight: 500; color: var(--v2-muted); background: #fafcfd; }
.ui-v2 tr[data-href] { cursor: pointer; }
/* A muted row (a draft or cancelled invoice): the table's own text colour
   would win over .text-muted on the row. */
.ui-v2 .table tr.text-muted > * { color: var(--v2-muted); }
.ui-v2 .table tr.text-muted .v2-who-name { font-weight: 400; }
.ui-v2 tr[data-href]:hover > * { background-color: var(--v2-hover); }

/* Tabs: an underline under the current one instead of folder tabs. */
.ui-v2 .nav-tabs { --bs-nav-tabs-border-color: var(--v2-line); gap: 4px 20px; padding: 0 0.5rem; }
.ui-v2 .nav-tabs .nav-item.ms-1 { margin-left: 0 !important; }
.ui-v2 .nav-tabs .nav-link {
	border: 0;
	border-radius: 0;
	padding: 0.5rem 0.1rem;
	margin-bottom: -1px;
	color: var(--v2-muted);
	background: none;
}
.ui-v2 .nav-tabs .nav-link:hover { color: var(--v2-ink); }
.ui-v2 .nav-tabs .nav-link.active { color: var(--v2-ink); background: none; font-weight: 500; box-shadow: inset 0 -2px 0 var(--v2-navy); }

/* Pagination in the navy of the frame. */
.ui-v2 .pagination { --bs-pagination-active-bg: var(--v2-navy); --bs-pagination-active-border-color: var(--v2-navy); --bs-pagination-color: var(--v2-ink); --bs-pagination-border-color: var(--v2-line); }

/* State pills (views_v2/components/shipment_state.twig): the colour of the
   state on a small pill instead of a filled cell. */
.ui-state { padding: 0.3rem 0.6rem; }
.ui-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 24px;
	padding: 0 10px 0 8px;
	border-radius: 12px;
	font-size: 0.8125rem;
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
}
.ui-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.ui-pill-draft { background: #eceff2; color: #46525d; }
.ui-pill-waiting_warehouse { background: #fff1c2; color: #6e4f00; }
.ui-pill-waiting_delivery { background: #ddeefa; color: #0b4f7c; }
.ui-pill-delivered { background: #dcf1e4; color: #11613b; }
.ui-pill-cancelled { background: #f9e3e6; color: #8f1f2c; }

/* ------------------------------------------------------- page building blocks
   (the renewed pages in views_v2/pages/) */

/* Page head: title (with the state) on the left, the page's actions on the
   right; the actions wrap under the title on a narrow screen. */
.v2-page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin-bottom: 18px; }
.v2-page-head h1 { margin: 0; }
.v2-page-title { min-width: 0; }
.v2-title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.v2-title-row .ui-state { padding: 0; }
.v2-page-sub { color: var(--v2-muted); font-size: 0.875rem; margin-top: 3px; }
.v2-page-sub::first-letter { text-transform: uppercase; }
.v2-page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.v2-page-actions .btn .material-icons { font-size: 18px; vertical-align: -4px; }
.v2-page-actions .v2-more { padding-left: 8px; padding-right: 8px; }
.ui-v2 .dropdown-menu { --bs-dropdown-border-color: var(--v2-line); --bs-dropdown-border-radius: 9px; --bs-dropdown-link-active-bg: var(--v2-hover); --bs-dropdown-link-active-color: var(--v2-ink); box-shadow: 0 14px 30px -12px rgba(15, 42, 68, 0.35); padding: 6px; }
.ui-v2 .dropdown-item { border-radius: 6px; padding: 6px 10px; display: flex; flex-direction: column; }
.ui-v2 .dropdown-menu form .dropdown-item,
.ui-v2 .dropdown-menu button.dropdown-item { flex-direction: row; align-items: center; gap: 8px; }
.ui-v2 .dropdown-item .material-icons { font-size: 18px; color: var(--v2-muted); }
.ui-v2 .dropdown-item.text-danger .material-icons { color: inherit; }

.v2-chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border: 1px solid var(--v2-line); border-radius: 5px; background: var(--v2-bg); color: var(--v2-muted); font-size: 0.8125rem; white-space: nowrap; }
.v2-chip .material-icons { font-size: 15px; }
.v2-chip-warn { color: #8f5b00; border-color: #f0d58a; background: #fff8e1; }
.v2-chip-danger { color: #8f1f2c; border-color: #e4a6ad; background: #f9e3e6; }

/* Tiles: a whole card as one link. */
.v2-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.v2-tile { display: grid; gap: 6px; padding: 14px 16px; background: var(--v2-surface); border: 1px solid var(--v2-line); border-radius: 10px; color: var(--v2-ink); }
.v2-tile:hover { border-color: #9cbad3; color: var(--v2-ink); box-shadow: 0 6px 16px -10px rgba(15, 42, 68, 0.35); }
.v2-tile-top { display: flex; align-items: center; justify-content: space-between; }
.v2-tile-top .ui-state { padding: 0; }
.v2-tile-top .material-icons { color: #9fb0bd; }
.v2-tile-num { font-size: 1.65rem; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.v2-tile-sub { color: var(--v2-muted); font-variant-numeric: tabular-nums; font-size: 0.875rem; }

.v2-attention { display: flex; align-items: center; gap: 10px; }
.v2-attention-text { flex: 1 1 auto; min-width: 0; }
.v2-attention .btn { flex: none; border-color: #ecd27c; }

/* Dashboard: the work on the left, updates on the right. */
.v2-dash-cols { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 1199.98px) { .v2-dash-cols { grid-template-columns: minmax(0, 1fr); } }
.v2-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.v2-card-head h2 { font-size: 0.95rem; font-weight: 500; margin: 0; letter-spacing: 0; }
.v2-card-head .material-icons { font-size: 19px; color: var(--v2-muted); }
.v2-dl-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 6.5rem; align-items: center; gap: 4px 14px; }
.v2-dl-row.is-done .v2-dl-label a { color: var(--v2-muted); }
.v2-dl-label a { font-weight: 500; }
.v2-dl-state { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.v2-dl-date { text-align: right; font-variant-numeric: tabular-nums; }

.v2-notes { display: grid; }
.v2-note { border-bottom: 1px solid var(--v2-line); }
.v2-note:last-child { border-bottom: 0; }
.v2-note > summary { list-style: none; cursor: pointer; padding: 10px 16px; display: grid; gap: 2px; }
.v2-note > summary::-webkit-details-marker { display: none; }
.v2-note > summary:hover { background: var(--v2-hover); }
.v2-note > summary:focus-visible { outline: 2px solid var(--v2-blue); outline-offset: -2px; }
.v2-note-when { display: flex; align-items: center; gap: 8px; color: var(--v2-muted); font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.v2-note-new { background: var(--v2-amber); color: var(--v2-navy); font-weight: 700; font-size: 0.68rem; padding: 1px 6px; border-radius: 3px; letter-spacing: 0.04em; text-transform: uppercase; }
.v2-note-title { font-weight: 500; }
.v2-note[open] > summary .v2-note-title { color: var(--v2-blue-ink); }
/* The note itself is a self-contained classic card: drop its frame, date and
   heading, which the summary already shows. */
.v2-note-body { padding: 0 16px 12px; font-size: 0.9rem; }
.v2-note-body > div { border: 0 !important; padding: 0 !important; margin: 0 !important; background: none !important; display: block !important; }
.v2-note-body .rn-date,
.v2-note-body > div > h4:first-of-type { display: none; }
.v2-note-body .ribbon-wrapper { display: none; }

/* List toolbar: the state filter as links with counts. */
.v2-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; margin-bottom: 14px; }
.v2-seg { display: flex; flex-wrap: wrap; gap: 2px; padding: 3px; background: var(--v2-surface); border: 1px solid var(--v2-line); border-radius: 9px; }
.v2-seg a { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 6px; color: var(--v2-muted); font-size: 0.875rem; white-space: nowrap; }
.v2-seg a:hover { background: var(--v2-hover); color: var(--v2-ink); }
.v2-seg a.is-current { background: var(--v2-navy); color: #ffffff; }
.v2-seg-count { font-size: 0.75rem; color: #8394a1; font-variant-numeric: tabular-nums; }
.v2-seg a.is-current .v2-seg-count { color: var(--v2-navy-text); }

.v2-list-table > thead th { white-space: nowrap; }
.v2-list-table td { vertical-align: middle; }
.v2-col-id { width: 90px; }
.v2-col-state { width: 190px; }
.v2-col-state .ui-state { padding: 0; }
.v2-col-date { width: 120px; white-space: nowrap; }
.v2-col-invoice { width: 130px; }
.v2-col-sum { width: 120px; white-space: nowrap; }
.v2-id { font-family: var(--bs-font-monospace); font-weight: 500; font-size: 0.875rem; }
.v2-who-name { display: block; font-weight: 500; }
.v2-who-sub { display: block; color: var(--v2-muted); font-size: 0.8125rem; }
.v2-sort { color: inherit; }
.v2-sort:hover, .v2-sort.is-sorted { color: var(--v2-ink); }
.v2-preview-row > td { background: #fafcfd !important; padding-top: 0 !important; }
.v2-preview-table { box-shadow: none !important; --bs-table-bg: transparent; }
.v2-pager { display: flex; justify-content: flex-end; margin-top: 12px; }
.v2-pager .pagination { margin: 0; }
.v2-empty { text-align: center; padding: 40px 16px; color: var(--v2-muted); background: var(--v2-surface); border: 1px dashed var(--v2-line); border-radius: 10px; }
.v2-empty .material-icons { font-size: 36px; color: #9fb0bd; }
.v2-empty p { max-width: 48ch; margin: 8px auto 14px; }

/* State chain of a shipment. */
.v2-stepper { list-style: none; margin: 0 0 12px; padding: 14px 18px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); background: var(--v2-surface); border: 1px solid var(--v2-line); border-radius: 10px; }
.v2-step { position: relative; display: grid; gap: 6px; justify-items: start; padding-right: 10px; color: var(--v2-muted); font-size: 0.8125rem; }
.v2-step::after { content: ""; position: absolute; top: 11px; left: 26px; right: 2px; height: 2px; background: #dbe4ea; }
.v2-step:last-child::after { display: none; }
.v2-step-dot { position: relative; z-index: 1; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--v2-surface); border: 2px solid #c9d5de; color: #ffffff; }
.v2-step-dot .material-icons { font-size: 15px; }
.v2-step.is-done .v2-step-dot { background: #11613b; border-color: #11613b; }
.v2-step.is-done::after { background: #11613b; }
.v2-step.is-current { color: var(--v2-ink); font-weight: 500; }
.v2-step.is-current .v2-step-dot { background: var(--v2-amber); border-color: #d9a000; color: var(--v2-navy); }
.v2-step-label::first-letter { text-transform: uppercase; }
.v2-step-label small { display: block; font-weight: 400; color: var(--v2-muted); font-size: 0.75rem; font-variant-numeric: tabular-nums; }
@media (max-width: 767.98px) {
	.v2-stepper { grid-template-columns: minmax(0, 1fr); gap: 8px; }
	.v2-step { grid-template-columns: 24px 1fr; align-items: center; justify-items: stretch; gap: 10px; }
	.v2-step::after { display: none; }
}
.v2-inline-form { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 16px; }
.v2-inline-form .input-group { width: auto; max-width: 100%; }
.v2-inline-form .form-control { max-width: 10rem; }
.v2-confirm { max-width: 40em; margin: 0 0 16px; padding: 16px; background: var(--v2-surface); border: 1px solid #e4a6ad; border-radius: 10px; box-shadow: 0 14px 30px -12px rgba(15, 42, 68, 0.35); }

/* Frames of the tabbed pages (recipe, production batch, product,
   warehouse): head, facts and tabs on top, the tab's page below. */
.v2-frame { padding: 1rem 1rem 0; }
.v2-frame-body { padding: 1rem; }
@media (min-width: 992px) { .v2-frame { padding: 1.5rem 1.5rem 0; } .v2-frame-body { padding: 1.25rem 1.5rem 1.5rem; } }
.v2-frame .nav-tabs { margin-bottom: 0; }

.v2-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin: 0 0 16px; background: var(--v2-surface); border: 1px solid var(--v2-line); border-radius: 10px; }
.v2-facts > div { padding: 10px 16px; border-left: 1px solid var(--v2-line); min-width: 0; }
.v2-facts > div:first-child { border-left: 0; }
.v2-facts-wide { grid-column: span 2; }
@media (max-width: 575.98px) { .v2-facts-wide { grid-column: auto; } .v2-facts > div { border-left: 0; border-top: 1px solid var(--v2-line); } .v2-facts > div:first-child { border-top: 0; } }
.v2-facts dt { font-size: 0.75rem; font-weight: 400; color: var(--v2-muted); margin-bottom: 2px; }
.v2-facts dd { margin: 0; font-weight: 500; font-variant-numeric: tabular-nums; }
.v2-facts dd small { display: block; font-weight: 400; color: var(--v2-muted); }
.v2-facts dd .v2-chip small { display: inline; }

.v2-seg .material-icons { font-size: 17px; }

.v2-section-head { display: flex; align-items: baseline; gap: 12px; margin: 8px 0 10px; }
.v2-section-head h2 { font-size: 1.05rem; margin: 0; }
.v2-section-head a { font-size: 0.875rem; }

/* Batch cards: name, size and a bar of the time gone from start to end. */
.v2-batch { gap: 8px; }
.v2-batch.is-planned { border-style: dashed; background: #fbfdfe; }
.v2-batch-name { font-weight: 500; }
.v2-batch-name small { display: block; color: var(--v2-muted); font-weight: 400; font-size: 0.8125rem; }
.v2-progress { display: block; height: 8px; border-radius: 4px; background: #e3eaf0; overflow: hidden; }
.v2-progress > span { display: block; height: 100%; background: #e0a800; border-radius: 4px; }
.v2-batch.is-planned .v2-progress > span { background: #b8c7d3; }
.v2-batch-dates { display: flex; justify-content: space-between; color: var(--v2-muted); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.v2-menu-scroll { max-height: 60vh; overflow-y: auto; }

.v2-calendar { overflow-x: auto; background: var(--v2-surface); border: 1px solid var(--v2-line); border-radius: 10px; }
.v2-calendar svg { display: block; }

/* A card that folds (the product's details). */
.v2-details-card > summary { list-style: none; cursor: pointer; }
.v2-details-card > summary::-webkit-details-marker { display: none; }
.v2-details-card > summary:focus-visible { outline: 2px solid var(--v2-blue); outline-offset: -2px; }
.v2-details-caret { margin-left: auto; transition: transform 120ms ease; }
.v2-details-card[open] .v2-details-caret { transform: rotate(180deg); }
.v2-details-card:not([open]) > summary { border-bottom: 0; border-radius: 10px; }
@media (prefers-reduced-motion: reduce) { .v2-details-caret { transition: none; } }

/* Label / control pairs of a form card. */
.v2-form-grid { display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: 12px 20px; align-items: start; }
.v2-form-grid > label, .v2-form-grid > span { padding-top: 7px; color: var(--v2-muted); font-size: 0.875rem; }
.v2-form-grid > div { min-width: 0; }
@media (max-width: 767.98px) { .v2-form-grid { grid-template-columns: minmax(0, 1fr); gap: 4px; } .v2-form-grid > div { margin-bottom: 10px; } }
.v2-input-short { max-width: 12rem; }

/* Warehouse cards. */
.v2-warehouses { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.v2-warehouse { gap: 10px; }
.v2-warehouse.is-passive { opacity: 0.75; }
.v2-warehouse-name { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 1.05rem; color: var(--v2-ink); }
.v2-warehouse-name .material-icons { color: var(--v2-muted); }
.v2-warehouse-values { margin: 0; display: grid; gap: 6px; }
.v2-warehouse-values > div { display: flex; justify-content: space-between; gap: 10px; border-top: 1px dashed var(--v2-line); padding-top: 6px; }
.v2-warehouse-values dt { font-weight: 400; color: var(--v2-muted); font-size: 0.8125rem; }
.v2-warehouse-values dd { margin: 0; font-weight: 500; font-variant-numeric: tabular-nums; }
.v2-warehouse-links { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 0.875rem; }

/* A warehouse's product list (warehouse2/products_home.twig, shared): the
   row actions "astioi uudelleen" and "korjaa saldo" show on the row under the
   pointer or holding the focus, as small buttons, instead of as two blue
   links on every row. Always shown where there is no hover (touch). */
.ui-v2 td > a[href*="/valmisteet/uudelleenastioi/"],
.ui-v2 td > a[href*="/valmisteet/korjaa_saldo/"] {
	font-size: 0.8125rem;
	padding: 1px 8px;
	border: 1px solid var(--v2-line);
	border-radius: 6px;
	background: var(--v2-surface);
	color: var(--v2-ink);
}
.ui-v2 td > a[href*="/valmisteet/uudelleenastioi/"]:hover,
.ui-v2 td > a[href*="/valmisteet/korjaa_saldo/"]:hover { background: var(--v2-hover); }
@media (hover: hover) {
	.ui-v2 tr td > a[href*="/valmisteet/uudelleenastioi/"],
	.ui-v2 tr td > a[href*="/valmisteet/korjaa_saldo/"] { opacity: 0; transition: opacity 100ms ease; }
	.ui-v2 tr:hover td > a[href*="/valmisteet/uudelleenastioi/"],
	.ui-v2 tr:hover td > a[href*="/valmisteet/korjaa_saldo/"],
	.ui-v2 tr:focus-within td > a[href*="/valmisteet/uudelleenastioi/"],
	.ui-v2 tr:focus-within td > a[href*="/valmisteet/korjaa_saldo/"] { opacity: 1; }
}

/* Product list (views_v2/pages/account/products.twig). */
.v2-search { display: flex; align-items: center; }
.v2-search > .material-icons { position: absolute; left: 12px; color: #8394a1; pointer-events: none; }
.v2-search .form-control { padding-left: 40px; height: 42px; }
.v2-search-loading { position: absolute; right: 12px; display: flex; align-items: center; gap: 8px; color: var(--v2-muted); font-size: 0.8125rem; }
.v2-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.v2-toolbar .v2-search .form-control { height: 38px; }
.v2-filters .form-select { width: auto; max-width: 100%; }
.v2-product-table tr.v2-group-row > td { background: #f7fafc; padding-top: 10px; padding-bottom: 8px; }
.v2-group-name { font-weight: 600; }
.v2-product-table tr.v2-sub-row > td:first-child { padding-left: 2rem; }
.v2-stock { color: var(--v2-ink); font-variant-numeric: tabular-nums; }
.v2-stock.is-empty { color: #a5b3be; }
.v2-price { cursor: pointer; white-space: nowrap; font-variant-numeric: tabular-nums; }
.v2-price .material-icons { font-size: 15px; color: #9fb0bd; margin-left: 6px; opacity: 0; }
.v2-price:hover, .v2-price:focus-visible { background: var(--v2-hover); }
.v2-price:hover .material-icons, .v2-price:focus-visible .material-icons { opacity: 1; }
.v2-price:focus-visible { outline: 2px solid var(--v2-blue); outline-offset: -2px; }
.v2-pager { align-items: center; gap: 10px; }
.v2-pager .btn { padding: 2px 6px; }

/* Recipe steps, each with its ingredients (views_v2/pages/account/recipe/home.twig). */
.v2-steps { list-style: none; margin: 0 0 12px; padding: 0; background: var(--v2-surface); border: 1px solid var(--v2-line); border-radius: 10px; }
.v2-step-card { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 0 12px; padding: 12px 16px; border-bottom: 1px solid var(--v2-line); }
.v2-step-card:last-child { border-bottom: 0; }
.v2-step-no { width: 26px; height: 26px; border-radius: 50%; background: var(--v2-navy); color: #ffffff; display: grid; place-items: center; font: 600 12px var(--bs-font-monospace); }
.v2-step-head { display: flex; align-items: center; gap: 10px; min-height: 26px; }
.v2-step-name { font-weight: 500; }
.v2-step-dur { margin-left: auto; color: var(--v2-muted); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.v2-drag { color: #9fb0bd; cursor: grab; }
.v2-step-head .v2-drag:first-of-type { margin-left: auto; }
.v2-step-dur + .v2-drag { margin-left: 0; }
.v2-step-remove { padding: 0 2px; line-height: 1; }
.v2-step-remove .material-icons { font-size: 16px; }
.v2-step-ingredients { width: 100%; margin-top: 6px; font-size: 0.875rem; }
.v2-step-ingredients td { padding: 4px 0; border-top: 1px dashed var(--v2-line); font-variant-numeric: tabular-nums; }
.v2-step-ingredients td .material-icons { font-size: 16px; }
.v2-step-none { color: #9aaab6; font-size: 0.8125rem; margin-top: 4px; }

/* Picking, made for a phone in the warehouse (views_v2/pages/account/shipment/pick_by_source.twig). */
.v2-pick { padding-bottom: 76px; }
.v2-pick-auto { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.v2-pick-card { background: var(--v2-surface); border: 1px solid var(--v2-line); border-radius: 12px; margin-bottom: 12px; overflow: hidden; }
.v2-pick-head { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.v2-pick-name { flex: 1 1 auto; min-width: 0; font-weight: 500; }
.v2-pick-count { flex: none; text-align: right; font-variant-numeric: tabular-nums; }
.v2-pick-count [data-needed] { font-size: 1.35rem; font-weight: 700; }
.v2-pick-count [data-needed]:empty::before { content: "0"; color: #a5b3be; }
.v2-pick-count [data-needed].text-success { color: #11613b !important; }
.v2-pick-count small { color: var(--v2-muted); font-size: 0.875rem; }
.v2-pick-warehouse { border-top: 1px solid var(--v2-line); }
.v2-pick-wh-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; padding: 8px 14px; background: #fafcfd; font-size: 0.875rem; font-weight: 500; }
.v2-pick-wh-head .material-icons { font-size: 17px; color: var(--v2-muted); }
.v2-pick-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 5.5rem; align-items: center; gap: 8px 10px; padding: 8px 14px; border-top: 1px dashed var(--v2-line); }
.v2-pick-source { min-width: 0; font-size: 0.875rem; }
.v2-pick-source small { display: block; color: var(--v2-muted); font-size: 0.75rem; }
.v2-pick-all, .v2-pick-input { min-height: 44px; }
.v2-pick-all { display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; }
.v2-pick-all .material-icons { font-size: 16px; }
.v2-pick-input { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.v2-pick-none { padding: 10px 14px; border-top: 1px solid var(--v2-line); color: #8f1f2c; background: #fdf1f2; font-size: 0.875rem; }
.v2-pick-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 10px max(16px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); background: rgba(255, 255, 255, 0.96); border-top: 1px solid var(--v2-line); box-shadow: 0 -8px 20px -14px rgba(15, 42, 68, 0.4); }
@media (min-width: 992px) { .v2-pick-bar { left: var(--v2-side-width); } }
.v2-pick-bar .btn-primary { min-height: 44px; }
@media (max-width: 575.98px) {
	.v2-pick-bar .btn { flex: 1 1 auto; }
	.v2-pick-bar .btn-primary { flex-basis: 100%; order: -1; }
}

/* Reports, accounts, files, event log. */
.v2-crumb { font-size: 0.875rem; margin-bottom: 4px; }
.v2-crumb .material-icons { font-size: 17px; }
.v2-report-tiles { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.v2-report { gap: 4px; }
.v2-report-title { display: flex; justify-content: space-between; align-items: center; font-weight: 500; color: var(--v2-blue-ink); }
.v2-report-title .material-icons { color: #9fb0bd; }
.v2-section-head .material-icons { font-size: 19px; }
.v2-accounts { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.v2-account-tile-name { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; min-width: 0; }
.v2-account-tile .v2-account-logo { background: #f5e6c8; color: #6b4a00; }
.v2-files { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.v2-file { gap: 6px; }
.v2-file-thumb { display: block; aspect-ratio: 4 / 3; max-width: 100%; border-radius: 6px; overflow: hidden; background: var(--v2-bg); }
.v2-file-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v2-file-name { font-weight: 500; overflow-wrap: anywhere; }
.v2-log { list-style: none; margin: 0; padding: 0; background: var(--v2-surface); border: 1px solid var(--v2-line); border-radius: 10px; }
.v2-log-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 4px 12px; align-items: start; padding: 10px 16px; border-bottom: 1px solid var(--v2-line); }
.v2-log-row:last-child { border-bottom: 0; }
.v2-log-objects { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.v2-log-time { color: var(--v2-muted); font-size: 0.8125rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 575.98px) { .v2-log-row { grid-template-columns: 28px minmax(0, 1fr); } .v2-log-time { grid-column: 2; } }

/* Production-area pages (views_v2/pages/account/production, recipe, ingredient). */
.v2-section-head h2 a { font-size: inherit; }
.ui-v2 .v2-list-table > tfoot > tr > * { background: #fafcfd; font-weight: 500; }

/* Tank map (views_v2/pages/account/productions_assets.twig, components/tank_visual.twig). */
.v2-liquid-ferment { fill: #e0a800; background: #e0a800; }
.v2-liquid-secondary { fill: #c77d1f; background: #c77d1f; }
.v2-liquid-cold { fill: #5b9bd5; background: #5b9bd5; }
.v2-liquid-carb { fill: #3fb0a4; background: #3fb0a4; }
.v2-liquid-sour { fill: #b0569e; background: #b0569e; }
.v2-liquid-other { fill: #8d9aa6; background: #8d9aa6; }
.v2-liquid.is-unknown { fill-opacity: 0.45; }
.v2-stage { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 0.8125rem; font-weight: 500; white-space: nowrap; background: #eef2f5; color: var(--v2-ink); }
.v2-stage-ferment { background: #fff1c2; color: #6e4f00; }
.v2-stage-secondary { background: #f8e2c6; color: #7a4508; }
.v2-stage-cold { background: #ddeefa; color: #0b4f7c; }
.v2-stage-carb { background: #d8f1ee; color: #0e5a52; }
.v2-stage-sour { background: #f4def0; color: #74285f; }
.v2-stage-other { background: #eef2f5; color: #3e4f5c; }
.v2-tank-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 0 0 14px; font-size: 0.8125rem; color: var(--v2-muted); }
.v2-tank-legend i { display: inline-block; width: 11px; height: 11px; border-radius: 3px; vertical-align: -1px; margin-right: 3px; }
.v2-tanks { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.v2-tank { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; background: var(--v2-surface); border: 1px solid var(--v2-line); border-radius: 10px; min-width: 0; transition: border-color 0.12s, box-shadow 0.12s; }
.v2-tank.is-cip { border-color: #f0d58a; background: #fffcf2; }
.v2-tank.is-maintenance { border-color: #e4a6ad; background: #fff8f9; }
.v2-tank.is-dragging { opacity: 0.6; }
.v2-tank.is-picked { border-color: var(--v2-blue); box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.18); }
.v2-list-table tr.is-picked > td { background: rgba(13, 110, 253, 0.06); }
.v2-tank.is-drop-target { border-color: var(--v2-blue); box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.18); }
.v2-tank-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.v2-tank-title { min-width: 0; }
.v2-tank-title h3 { font-size: 1rem; font-weight: 600; margin: 0; overflow-wrap: anywhere; }
.v2-tank-meta { color: var(--v2-muted); font-size: 0.8125rem; }
.v2-more { padding: 0 4px; line-height: 1; }
.v2-more .material-icons { font-size: 20px; vertical-align: middle; }
.v2-tank-visual { display: flex; justify-content: center; align-items: flex-end; min-height: 116px; }
.v2-tank-svg { display: block; max-width: 100%; height: auto; }
.v2-tank-visual[data-liquid-drag] .v2-liquid { cursor: grab; }
.v2-tank-visual[data-liquid-drag] .v2-liquid:active { cursor: grabbing; }
.v2-tank-batch { display: grid; gap: 4px; padding: 8px 10px; margin: 0 -4px; border-radius: 8px; background: var(--v2-bg); cursor: grab; }
.v2-tank-batch:active { cursor: grabbing; }
.v2-tank-stage { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
.v2-tank-recipe { font-weight: 500; overflow-wrap: anywhere; }
.v2-tank-figures { color: var(--v2-muted); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.v2-tank-warning { display: flex; gap: 6px; align-items: flex-start; padding: 6px 8px; border-radius: 6px; background: #fff8e1; border: 1px solid #f0d58a; color: #6e4f00; font-size: 0.8125rem; }
.v2-tank-warning .material-icons { font-size: 17px; }
.v2-tank-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.v2-tank-empty { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.v2-tank-next { flex-basis: 100%; font-size: 0.8125rem; color: var(--v2-muted); }
.v2-tank-foot { margin-top: auto; font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.v2-tank-foot:empty { display: none; }
.ui-v2 .dropdown-item[aria-current="true"] { font-weight: 600; }

/* The page's prompt (Prompt, views_v2/page.twig): a white card under the top
   bar, the type's colour on its left edge and icon. It sits outside .ui-v2,
   so it sets its own font. */
.v2-toast {
	--v2-toast-accent: var(--v2-blue);
	position: fixed; top: 64px; right: 20px; z-index: 1090;
	display: flex; align-items: flex-start; gap: 10px;
	width: 380px; max-width: calc(100vw - 32px);
	padding: 12px 12px 12px 14px;
	background: var(--v2-surface); color: var(--v2-ink);
	border: 1px solid var(--v2-line); border-left: 4px solid var(--v2-toast-accent); border-radius: 10px;
	box-shadow: 0 14px 30px -12px rgba(15, 42, 68, 0.35);
	font-family: Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 0.9375rem; line-height: 1.4;
	-webkit-font-smoothing: antialiased;
}
.v2-toast.show { animation: v2-toast-in 0.18s ease-out; }
.v2-toast-icon { flex: none; font-size: 22px; color: var(--v2-toast-accent); }
.v2-toast-text { flex: 1 1 auto; min-width: 0; padding-top: 1px; overflow-wrap: anywhere; }
.v2-toast-title { font-weight: 600; margin-bottom: 1px; }
.v2-toast-close { flex: none; margin: 2px 0 0 4px; font-size: 0.75rem; }
.v2-toast-confirmation { --v2-toast-accent: #1a7f4b; }
.v2-toast-alert { --v2-toast-accent: #c0392b; background: #fff7f8; border-color: #efc7cc; border-left-color: var(--v2-toast-accent); }
.v2-toast-warning { --v2-toast-accent: #b07a00; background: #fffbeb; border-color: #f0d58a; border-left-color: var(--v2-toast-accent); }
@keyframes v2-toast-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (max-width: 575.98px) { .v2-toast { top: 60px; right: 16px; left: 16px; width: auto; max-width: none; } }
@media (prefers-reduced-motion: reduce) { .v2-toast.show { animation: none; } }

/* Small icon buttons for row actions (save, delete) and file thumbnails in tables. */
.v2-icon-btn { padding: 1px 4px; line-height: 1; }
.v2-icon-btn .material-icons { font-size: 18px; vertical-align: middle; }
.v2-thumb { display: block; object-fit: cover; border-radius: 4px; }
.v2-list-table td a > .material-icons { font-size: 17px; color: var(--v2-muted); vertical-align: -3px; }
.v2-code { display: inline-block; padding: 8px 10px; border: 1px solid var(--v2-line); border-radius: 6px; background: var(--v2-bg); font-family: var(--bs-font-monospace); font-size: 0.875rem; overflow-wrap: anywhere; }

/* Reading layout of the public documents and the developer guide
   (views_v2/pages/outside/document.twig, developer_webshop_api.twig). */
.v2-doc { line-height: 1.6; overflow-wrap: break-word; }
.v2-doc > :first-child { margin-top: 0; }
.v2-doc h1 { margin-bottom: 1rem; }
.v2-doc h2 { margin-top: 2rem; }
.v2-doc h3, .v2-doc h4 { margin-top: 1.5rem; }
.v2-doc img { max-width: 100%; height: auto; }
.v2-doc pre { background: var(--v2-bg); border: 1px solid var(--v2-line); border-radius: 6px; padding: .75rem 1rem; overflow-x: auto; font-size: .85rem; }
.v2-doc :not(pre) > code { background: var(--v2-bg); padding: .1rem .3rem; border-radius: .25rem; font-size: .875em; }
.v2-doc table { width: 100%; margin-bottom: 1rem; border-collapse: collapse; font-size: .9rem; }
.v2-doc th, .v2-doc td { border-bottom: 1px solid var(--v2-line); padding: .4rem .6rem; vertical-align: top; text-align: left; }
.v2-doc th { background: #fafcfd; color: var(--v2-muted); font-weight: 500; font-size: .8125rem; }
.v2-doc blockquote { border-left: 3px solid var(--v2-amber); background: #fffbeb; padding: .5rem 1rem; margin: 1rem 0; border-radius: 0 6px 6px 0; }
.v2-doc blockquote p:last-child { margin-bottom: 0; }
.v2-doc-guide h2 { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--v2-line); scroll-margin-top: 64px; }
.v2-doc-guide h3 { margin-top: 1.75rem; scroll-margin-top: 64px; }
.v2-doc-guide p, .v2-doc-guide ul, .v2-doc-guide ol { max-width: 72ch; }
.devdoc-toc { position: sticky; top: 64px; font-size: .875rem; }
.devdoc-toc a, .devdoc-toc-list a { display: block; padding: .25rem 0; color: var(--v2-muted); }
.devdoc-toc a:hover, .devdoc-toc-list a:hover { color: var(--v2-ink); }
.devdoc-toc-title { font-size: .8125rem; font-weight: 500; color: var(--v2-ink); text-transform: uppercase; letter-spacing: .04em; margin-bottom: .5rem; }
#matches:empty { display: none; }

/* ------------------------------------------------------------------ print */
@media print {
	.v2-side, .v2-top, .v2-footer, .v2-backdrop, .exclude-print, nav, header, footer { display: none !important; }
	.v2-shell { display: block; }
	body:has(> .v2-shell), .ui-v2, .v2-content { background: #ffffff; }
	.v2-facts, .v2-list-table tr, .card { break-inside: avoid; }
	.ui-v2 .table { box-shadow: none; }
}