/* =============================================================================
   SAXUM — the shell both clients share: the nav rail, the list/detail panes and their splitter, the toolbar,
   the data grid, tags, form fields, tabs, buttons, the searchable combo, the extended filter panel, the paged
   list with its pager and options popover, and the detail pane's own toolbar.

   It lives in Lom.Client.Core and both apps load it as _content/Lom.Client.Core/shell.css. The DataList
   component is shared between them, and a shared component whose styling is copied into two stylesheets drifts
   apart within a week. Each app keeps its own app.css for what is genuinely its own — the office's pages, the
   quarry's stations and its weighbridge console.
   ============================================================================= */

/* ----- App shell: collapsible left nav rail + content -------------------- */

.app-shell { display: flex; height: 100vh; overflow: hidden; }

.rail {
	flex: 0 0 auto;
	width: 208px;
	background: var(--surface);
	border-right: 1px solid var(--hairline);
	display: flex;
	flex-direction: column;
	transition: width .12s ease;
}
.rail.collapsed { width: 72px; }

.rail-head {
	display: flex; align-items: center; gap: 10px;
	height: 48px; padding: 0 12px;
	border-bottom: 1px solid var(--hairline);
}
.rail-brand { font-weight: 700; letter-spacing: .04em; font-size: 15px; }
.rail.collapsed .rail-brand,
.rail.collapsed .nav-text { display: none; }

.rail-toggle {
	margin-left: auto; border: none; background: none; cursor: pointer;
	color: var(--ink-muted); font-size: 16px; line-height: 1; padding: 4px;
}
.rail.collapsed .rail-toggle { margin: 0 auto; }

.nav { padding: 8px 0; overflow-y: auto; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.nav-item {
	display: flex; align-items: center; gap: 12px;
	padding: 8px 14px; color: var(--ink-muted);
	border-left: 2px solid transparent; cursor: pointer;
	white-space: nowrap;
}
/* Expandable group header (e.g. Finance) rendered as a button. */
.nav-group-head {
	width: 100%; border: none; background: none; font: inherit; text-align: left;
}
.nav-caret { margin-left: auto; display: inline-flex; align-items: center; color: var(--ink-faint); }
.nav-caret svg { width: 15px; height: 15px; display: block; transition: transform .12s ease; transform: rotate(-90deg); }
.nav-caret.open svg { transform: rotate(0); }
/* Child items of a group: indented. */
.nav-sub { padding-left: 30px; }
.rail.collapsed .nav-caret { display: none; }
.rail.collapsed .nav-sub { padding-left: 14px; }
/* Pin an item (Nastavení) to the bottom of the rail. */
.nav-bottom { margin-top: auto; }
/* How many are waiting (K revizi). Rides on the right of the item, and goes with the text when the rail
   is collapsed — a bare number beside an icon says nothing. */
.nav-badge {
	margin-left: auto; min-width: 18px; padding: 0 5px; font-size: 11px; line-height: 17px;
	text-align: center; color: #fff; background: var(--accent); border-radius: 9px;
}
.rail.collapsed .nav-badge { display: none; }
/* "Not read yet" bar at the head of a detail pane: the hint, with the way to end it on the right. */
.review-bar { display: flex; align-items: center; gap: 12px; }
.review-bar > span { flex: 1; }
.nav-item:hover { background: var(--surface-alt); color: var(--ink); text-decoration: none; }
.nav-item.active {
	color: var(--ink); background: var(--selected);
	border-left-color: var(--go); font-weight: 500;
}
.nav-icon {
	width: 36px; height: 36px; flex: 0 0 auto; font-size: 30px; line-height: 1;
	display: inline-flex; align-items: center; justify-content: center;
}
.nav-icon svg { width: 34px; height: 34px; display: block; }
.nav-icon img { width: 36px; height: 36px; object-fit: contain; display: block; }
.nav-icon img.tight { width: 30px; height: 30px; }

.content { flex: 1 1 auto; min-width: 0; overflow: auto; display: flex; flex-direction: column; }

/* ----- Reading-pane layout: list on top, detail below -------------------- */

.pane-split { display: flex; flex-direction: column; height: 100%; }
.pane-list { flex: 0 0 45%; min-height: 120px; overflow: auto; }
.pane-detail { flex: 1 1 auto; min-height: 120px; overflow: auto; background: var(--surface-alt); }

/* Full-screen detail: hide the list pane + splitter so the detail fills the height. */
.pane-split.detail-full .pane-list,
.pane-split.detail-full .splitter { display: none; }

/* Draggable divider between list and detail panes. */
.splitter {
	flex: 0 0 7px; cursor: row-resize; background: var(--surface);
	border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
	position: relative;
}
.splitter::after {
	content: ""; position: absolute; left: 50%; top: 50%;
	width: 34px; height: 3px; transform: translate(-50%, -50%);
	border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
}
.splitter:hover, .splitter.dragging { background: var(--accent-weak); }
body.splitter-dragging { cursor: row-resize; user-select: none; }

.toolbar {
	display: flex; align-items: center; gap: 10px;
	padding: 10px 16px; background: var(--surface);
	border-bottom: 1px solid var(--hairline); position: sticky; top: 0; z-index: 30;
}
.toolbar h2 { font-size: 15px; }
.toolbar .spacer { flex: 1 1 auto; }
.count { color: var(--ink-faint); font-size: 12px; }

/* ----- Tables ------------------------------------------------------------ */

table.grid { width: 100%; border-collapse: collapse; }
table.grid th, table.grid td {
	text-align: left; padding: 7px 12px;
	border-bottom: 1px solid var(--hairline-soft); white-space: nowrap;
	/* Baseline so a taller row (e.g. a movement with extra priced lines under the material)
	   keeps every other cell aligned to the material name's first line, not vertically centered. */
	vertical-align: baseline;
}
table.grid th {
	position: sticky; top: 0; background: var(--surface);
	font-weight: 500; font-size: 12px; color: var(--ink-muted);
	text-transform: uppercase; letter-spacing: .03em; z-index: 1;
}
table.grid th.mark, table.grid td.mark { padding-right: 0; text-align: center; }
table.grid:not(.fixed-cols) th.mark, table.grid:not(.fixed-cols) td.mark { width: 1%; }
.blocked-mark { color: var(--stop); font-weight: 700; font-family: var(--font-mono); }
/* The right-hand edge of a column, to drag its width by. Narrow and invisible until the pointer finds
   it: a line drawn down every header would be a ruled table nobody asked for. */
table.grid th .col-grip {
	position: absolute; top: 0; right: 0; bottom: 0; width: 7px;
	cursor: col-resize; user-select: none; touch-action: none;
}
table.grid th .col-grip:hover { background: var(--accent-weak); }
/* In force once a width has been dragged. A column narrower than its text then has to clip it — that is
   what asking for a narrow column means. */
/* Exactly as wide as its columns add up to — no more and, above all, no less. Stretching it to fill the
   pane (min-width: 100 %) handed the slack back to the columns, so a column dragged narrow grew again on
   its own: once a width has been dragged it is the width, and blank space to the right of the last column
   is what asking for narrow columns looks like.

   The width itself is written on the element, by the component and by the drag, and deliberately not left
   to max-content: an intrinsic width is measured from the cells, so the engine was free to find the table
   wider than the columns asked for and to hand the difference back to them — which put a floor under a
   column at the width of its own text. A column may now be dragged narrower than what it holds, and what
   does not fit is clipped with an ellipsis, because seeing the first few characters is often the whole
   point of making it narrow. */
table.grid.fixed-cols { table-layout: fixed; }
table.grid.fixed-cols th, table.grid.fixed-cols td { overflow: hidden; text-overflow: ellipsis; }
table.grid th { user-select: none; }
table.grid th.sortable { cursor: pointer; }
table.grid th.sortable:hover { color: var(--ink); }
table.grid tbody tr { cursor: pointer; }
table.grid tbody tr:hover { background: var(--surface-alt); }
table.grid tbody tr.selected { background: var(--accent-weak); }
/* Accent bar on the first cell — box-shadow on <tr> is ignored by Safari with border-collapse. */
table.grid tbody tr.selected td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
table.grid td.num { text-align: left; }

/* Row-click grids (Sklad detail): only rows tagged .click are actionable; the rest
   are inert (no pointer, no hover) even though the base grid marks every row clickable. */
table.grid.rowclick tbody tr { cursor: default; }
table.grid.rowclick tbody tr:hover { background: transparent; }
table.grid.rowclick tbody tr.click { cursor: pointer; }
table.grid.rowclick tbody tr.click:hover { background: var(--surface-alt); }

/* Report run page (Sestavy): parameter row + rendered result table. */
.report-run { padding: 12px 16px; display: flex; flex-direction: column; gap: 12px; }
.report-params { align-items: flex-end; }
.report-actions { display: flex; gap: 8px; }
.report-preamble { margin: 8px 0 4px; font-size: 13px; color: var(--ink-muted); }
.report-preamble > div { padding: 1px 0; }
.report-table-scroll { overflow: auto; }
/* The rendered report is read-only — undo the base grid's clickable-row affordance. */
table.grid.report-table tbody tr { cursor: default; }
table.grid.report-table tbody tr:hover { background: transparent; }
/* Size columns to their content instead of stretching across the full page width. */
table.grid.report-table { width: auto; max-width: 100%; }
/* Breathing room between a text column and the next so content-sized columns don't touch. */
table.grid.report-table th, table.grid.report-table td { padding-right: 28px; }
table.grid.report-table th:last-child, table.grid.report-table td:last-child { padding-right: 12px; }
table.grid.report-table tbody tr.report-group td { background: var(--surface-alt); }
/* A group's closing line: bold, like every other total on the sheet. */
table.grid.report-table tbody tr.report-subtotal td { font-weight: 600; border-top: 1px solid var(--border); }
table.grid.report-table tbody tr.report-grouptotal td { color: var(--ink-muted); border-top: 1px solid var(--border); }
/* Gap between top-level groups (the "-----" separator). */
table.grid.report-table tbody tr.report-sep td { padding: 0; height: 10px; border: 0; }
table.grid.report-table tbody tr.report-total td { font-weight: 600; border-top: 2px solid var(--border); }

/* Action column: absorb slack and pin the buttons to the row's right edge — until the operator has
   dragged widths, from when on the columns are what they were dragged to and nothing absorbs anything. */
table.grid th.actions, table.grid td.actions { text-align: right; }
table.grid:not(.fixed-cols) th.actions, table.grid:not(.fixed-cols) td.actions { width: 100%; }
table.grid td.actions .row-actions { display: inline-flex; }

/* ----- Role / status tags (square, hairline, no pills) ------------------- */

.tag {
	display: inline-block; font-size: 11px; font-weight: 600;
	padding: 1px 5px; border: 1px solid var(--hairline);
	border-radius: 2px; color: var(--ink-muted); background: var(--surface);
	margin-right: 4px;
}
.tag.cust { color: var(--accent); border-color: var(--accent-weak); background: var(--accent-weak); }
.tag.trans { color: var(--back); border-color: #efe1c6; background: #f6ecd6; }
.tag.ok { color: var(--go); border-color: #c6e0cd; background: #e7f2ea; }
.tag.stop { color: var(--stop); border-color: #e3c4c4; background: #fbe9e9; }
.tag.back { color: var(--back); border-color: #e8d4ad; background: #faf1df; }

/* ----- Credit gauge (Firmy list): unpaid balance vs credit limit ---------- */
.credit-gauge {
	position: relative; width: 96px; height: 12px;
	border: 1px solid var(--hairline); border-radius: 2px;
	background: var(--surface); overflow: hidden;
}
.credit-gauge.no-limit { background: repeating-linear-gradient(135deg, transparent, transparent 3px, #f0f0ec 3px, #f0f0ec 4px); }
.credit-fill { height: 100%; background: var(--accent); }
.credit-fill.over { background: var(--stop); }

/* ----- Forms ------------------------------------------------------------- */

/* The fields keep a readable width; the bar below them does not — see .form-footer. */
.form { padding: 16px 18px; }
.form > * { max-width: 920px; }
/* Sticky action bar along the bottom of the detail pane, the full width of it like .detail-bar at its top.
   The destructive action sits at the left end, as far from Uložit in the right corner as the bar allows. */
.form-footer {
	position: sticky; bottom: 0; z-index: 5;
	display: flex; justify-content: flex-end; align-items: center; gap: 8px;
	padding: 12px 18px; margin: 14px -18px -16px; max-width: none;
	background: var(--surface); border-top: 1px solid var(--hairline);
}
.form-footer .btn.danger { order: -1; margin-right: auto; }
/* Fill the detail pane so the sticky footer sits at the bottom even when the form
   is short (otherwise it would float right below the content, mid-screen). */
.pane-detail .form { min-height: 100%; display: flex; flex-direction: column; }
.pane-detail .form > .form-footer { margin-top: auto; }

.ov-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; min-height: 26px; }
.ov-head .ov-count { font-size: 12px; color: var(--ink-muted); }
.ov-head .spacer { flex: 1 1 auto; }

.form-section { margin-bottom: 20px; }
.form-section > .legend {
	font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
	color: var(--ink-muted); margin-bottom: 8px; padding-bottom: 4px;
	border-bottom: 1px solid var(--hairline-soft);
}
.grid-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 16px; max-width: 720px; }
.grid3 .field.wide { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: 3px; }
.field.wide { grid-column: 1 / -1; }
.field > label { font-size: 12px; color: var(--ink-muted); }

/* Flow layout with per-field widths, so short fields don't stretch. */
.fields { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: flex-end; }
.fields .field { flex: 0 0 auto; }
.field.w-full { flex: 1 1 100%; }
.field.w-sm { width: 150px; }
.field.w-md { width: 220px; }
.field.grow { flex: 1 1 200px; min-width: 200px; }
/* A picker with a small button beside it ("+ Nová"): the picker takes the room, the button keeps its size. */
.with-add { display: flex; gap: 6px; align-items: stretch; }
.with-add > :first-child { flex: 1 1 auto; min-width: 0; }
.with-add > .btn { flex: 0 0 auto; white-space: nowrap; }
.role-row { display: flex; align-items: center; gap: 20px; }
.role-row .check { margin: 0; }
/* Keep each checkbox caption on a single line (don't wrap in a narrow field). */
.role-row .check label { white-space: nowrap; }
.check-list { display: flex; flex-direction: column; gap: 6px; max-height: 220px; overflow-y: auto; padding: 2px; }
.check-list .check { margin: 0; }

/* ----- Tabs (folder style) ----------------------------------------------- */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--hairline); margin: 18px 0 14px; }
.tab {
	padding: 7px 14px; cursor: pointer; color: var(--ink-muted);
	border: 1px solid transparent; border-bottom: none; background: none;
	font-family: var(--font-sans); font-size: 13px; font-weight: 500;
	border-radius: var(--radius) var(--radius) 0 0;
}
.tab:hover { color: var(--ink); }
.tab.active {
	color: var(--ink); background: var(--surface);
	border-color: var(--hairline); margin-bottom: -1px; border-bottom: 1px solid var(--surface);
}
.tab-panel { min-height: 80px; }
/* Full-screen editor page body. */
.editor-page { padding: 16px 20px; max-width: 1100px; }
/* Page-level tabs sit under the top bar, lined up with the page content below them. */
.page-tabs { padding: 0 20px; }
.page-tabs .tabs { margin: 12px 0 0; }
.page-tabs + .editor-page, .page-tabs + .empty { padding-top: 12px; }
.editor {
	margin-top: 14px; border: 1px solid var(--hairline);
	border-radius: var(--radius); padding: 12px; background: var(--surface);
}
/* Inline row editor: replaces a table row in place. */
table.grid tr.editing td { background: var(--accent-weak); padding: 10px 12px; }

input[type=text], input[type=email], input[type=number], input[type=password], input[type=date], select, textarea {
	font-family: var(--font-sans); font-size: 14px; color: var(--ink);
	background: var(--surface); border: 1px solid var(--hairline);
	border-radius: var(--radius); padding: 6px 8px; width: 100%;
}
/* Match select height to text inputs (native selects use the OS control height). */
input[type=text], input[type=email], input[type=number], input[type=password], input[type=date], select {
	height: 33px; line-height: 1.2;
}
select {
	appearance: none; -webkit-appearance: none; padding-right: 26px;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M1 1l4 4 4-4' fill='none' stroke='%236c6b63' stroke-width='1.5'/></svg>");
	background-repeat: no-repeat; background-position: right 9px center;
}
input.mono { font-family: var(--font-mono); }
input:focus, select:focus, textarea:focus {
	outline: none; border-color: var(--accent);
	box-shadow: 0 0 0 2px var(--accent-weak);
}
textarea { resize: vertical; min-height: 56px; }

.check { display: flex; align-items: center; gap: 7px; }
.check input { width: auto; }

/* ----- Buttons ----------------------------------------------------------- */

.btn {
	font-family: var(--font-sans); font-size: 13px; font-weight: 500;
	border: 1px solid var(--hairline); background: var(--surface); color: var(--ink);
	border-radius: var(--radius); padding: 6px 12px; cursor: pointer;
}
.btn:hover { background: var(--surface-alt); }
.btn:disabled { opacity: .5; cursor: default; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { background: #2c4358; }
.btn.danger { color: var(--stop); border-color: #e3c4c4; }
.btn.danger:hover { background: #f6e9e9; }
.btn.small { padding: 3px 8px; font-size: 12px; }

/* ----- Popup menu (report layouts) --------------------------------------- */
.menu-wrap { position: relative; }
.menu-backdrop { position: fixed; inset: 0; z-index: 65; }
.menu-pop {
	position: absolute; right: 0; top: calc(100% + 6px); z-index: 70;
	min-width: 240px; max-width: 340px;
	background: var(--surface); border: 1px solid var(--hairline); border-radius: 8px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16); padding: 6px;
}
.menu-sep { height: 1px; background: var(--hairline); margin: 6px 4px; }
.menu-label { font-size: 11px; color: var(--ink-faint); padding: 6px 10px 2px; text-transform: uppercase; letter-spacing: .04em; }
.menu-empty { padding: 4px 10px 6px; color: var(--ink-faint); font-size: 12px; }
.menu-row { display: flex; align-items: stretch; }
.menu-item {
	flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px;
	text-align: left; background: none; border: 0; border-radius: 6px;
	padding: 8px 10px; cursor: pointer; font-size: 13px; color: var(--ink);
}
.menu-item:hover { background: var(--surface-alt); }
.menu-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-tag { margin-left: auto; color: var(--ink-faint); font-size: 11px; white-space: nowrap; }
.menu-dots {
	flex: 0 0 auto; background: none; border: 0; border-radius: 6px;
	padding: 0 8px; cursor: pointer; color: var(--ink-muted); font-size: 16px; line-height: 1;
}
.menu-dots:hover { background: var(--surface-alt); }

/* ----- Report group header (per-group totals on the header line) --------- */
.rep-group-head { display: flex; align-items: center; gap: 12px; width: 100%; }
.rep-group-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rep-group-tot { flex: 0 0 auto; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.rep-group-tot.tons { width: 110px; padding-right: 8px; }
.rep-group-tot.money { width: 130px; padding-right: 8px; }
.grp-tools { display: inline-flex; gap: 4px; align-items: center; margin-left: 6px; }
.asof { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-muted); white-space: nowrap; }
.asof input {
	width: auto;
	font-family: var(--font-sans); font-size: 13px; color: var(--ink); background: var(--surface);
	border: 1px solid var(--hairline); border-radius: var(--radius); height: 33px; padding: 0 8px;
}
/* The buttons next to an as-of date line up with it: same height as the date field. */
.asof ~ .btn { height: 33px; display: inline-flex; align-items: center; text-decoration: none; }

/* Non-material priced lines (transport…) under a movement's material in the Odběry list */
.extra-lines { margin-top: 2px; display: flex; flex-direction: column; gap: 1px; }
.extra-line { display: flex; justify-content: space-between; gap: 10px; font-size: 11px; color: var(--ink-faint); }
.extra-line span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.extra-line span:first-child::before { content: "+ "; }

.search {
	max-width: 260px; padding: 6px 9px; border: 1px solid var(--hairline);
	border-radius: var(--radius); background: var(--surface);
}

/* ----- Extended filter panel (DataList) ---------------------------------- */
.filter-toggle {
	position: relative; display: inline-flex; align-items: center; justify-content: center;
	width: 30px; height: 28px; padding: 0; cursor: pointer;
	border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--surface);
	color: var(--ink-muted);
}
.filter-toggle:hover { background: var(--surface-alt); color: var(--ink); }
.filter-toggle svg { width: 17px; height: 17px; display: block; }
.filter-toggle.on { border-color: var(--accent); color: var(--accent); background: var(--accent-weak); }
.filter-badge {
	position: absolute; top: -6px; right: -6px; min-width: 15px; height: 15px; padding: 0 3px;
	font-size: 10px; line-height: 15px; text-align: center; color: #fff; background: var(--accent);
	border-radius: 8px; border: 1.5px solid var(--surface);
}
.filter-chip {
	display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--ink-muted);
	padding: 2px 4px 2px 8px; background: var(--selected); border-radius: 10px; white-space: nowrap;
}
.filter-chip b { font-weight: 500; color: var(--ink); }
.filter-chip button {
	border: none; background: none; cursor: pointer; color: var(--ink-faint);
	font-size: 14px; line-height: 1; padding: 0 2px;
}
.filter-chip button:hover { color: var(--stop); }
.filter-panel {
	flex: 0 0 auto; padding: 12px 16px; background: var(--surface-alt);
	border-bottom: 1px solid var(--hairline);
}
.filter-grid {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px 14px;
}
.filter-field { display: flex; flex-direction: column; }
.filter-field.wide { grid-column: 1 / -1; }
.filter-field > label {
	font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
	color: var(--ink-muted); margin-bottom: 3px;
}
.filter-field input, .filter-field select {
	width: 100%; height: 32px; padding: 0 9px; border: 1px solid var(--hairline);
	border-radius: var(--radius); background: var(--surface);
}
.filter-checks { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; min-height: 32px; }
.filter-checks .check input { width: auto; height: auto; }
.filter-range { display: flex; gap: 6px; }
.filter-range input { width: 50%; }
.filter-actions {
	display: flex; align-items: center; margin-top: 12px; padding-top: 10px;
	border-top: 1px solid var(--hairline-soft);
}
.filter-actions .spacer { flex: 1 1 auto; }

/* Read-only value (mirrors an input's box metrics without the control). */
.ro { padding: 6px 0; color: var(--ink); min-height: 20px; overflow-wrap: anywhere; }
.ro.over-limit { color: var(--stop); font-weight: 600; }
.audit-changed td { background: #fdf4e3; }
.audit-changed td:last-child { font-weight: 600; }
.right { text-align: right; }
.muted { color: var(--ink-faint); }
table.grid th.right, table.grid td.right { text-align: right; }

/* Searchable select (combobox). */
.combo { position: relative; }
.combo-list {
	position: absolute; z-index: 20; left: 0; top: 100%;
	min-width: 100%; width: max-content; max-width: 420px;
	margin-top: 2px; background: var(--surface); border: 1px solid var(--hairline);
	border-radius: var(--radius); max-height: 260px; overflow-y: auto; overflow-x: hidden;
	box-shadow: 0 6px 16px rgba(0, 0, 0, .10);
}
/* Open upward (fields near the bottom of a modal, where a downward list is clipped by the footer). */
.combo.up .combo-list { top: auto; bottom: 100%; margin-top: 0; margin-bottom: 3px; }
/* Let the dropdown grow wider than the field so labels fit on one line. */
.combo-item { padding: 6px 9px; cursor: pointer; white-space: nowrap; }
.combo-item:hover { background: var(--surface-alt); }
.combo-item.sel { background: var(--selected); font-weight: 500; }
/* The item Tab / Enter would take (typed match or arrow keys). */
.combo-item.hi { background: var(--accent-weak); }
/* Run out, still offered: a contract past its end date, and the option for one in a plain select. */
.combo-item.expired, option.expired { font-style: italic; }
.combo-empty { padding: 6px 9px; color: var(--ink-faint); }
.combo-divider { border-top: 1px solid var(--hairline); margin: 4px 0; }

/* List panel with a fixed pager pinned to the bottom (table scrolls between). */
.pane-list.paged { display: flex; flex-direction: column; overflow: hidden; }
.pane-list.paged .list-scroll { flex: 1 1 auto; overflow: auto; min-height: 0; }
/* The list takes keyboard focus (row navigation); no box around it, keyboard users see the moving selection. */
.list-scroll:focus { outline: none; }
.pane-list.paged .pager { flex: 0 0 auto; }
.pager {
	display: flex; align-items: center; gap: 12px;
	padding: 8px 14px; border-top: 1px solid var(--hairline); background: var(--surface);
}
.pager .spacer { flex: 1 1 auto; }
/* The summary of the whole filtered list, held between the two spacers. It is read, not operated, so it is
   quiet; it never wraps and gives way before the pager does when the pane is narrow. */
.pager-summary { flex: 0 1 auto; min-width: 0; color: var(--ink-muted); white-space: nowrap;
	overflow: hidden; text-overflow: ellipsis; }

/* List-options popover (page size now; column picker later) next to the pager buttons */
.list-options-wrap { position: relative; display: inline-flex; }
.pager .opts-btn { padding: 3px 7px; display: inline-flex; align-items: center; }
.pager .opts-btn svg { width: 14px; height: 14px; display: block; }
.pager .send-btn svg { width: 13px; height: 13px; vertical-align: -2px; margin-right: 4px; }
.list-options-backdrop { position: fixed; inset: 0; z-index: 40; }
.list-options-panel {
	position: absolute; bottom: calc(100% + 6px); right: 0; z-index: 41;
	min-width: 170px; padding: 10px 12px;
	background: var(--surface); border: 1px solid var(--hairline);
	border-radius: 4px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
}
.list-options-panel .opt-label {
	font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase;
	color: var(--ink-faint); margin-bottom: 7px;
}
.opt-sizes { display: flex; gap: 5px; flex-wrap: nowrap; }
.opt-size {
	border: 1px solid var(--hairline); background: var(--surface); color: var(--ink);
	border-radius: 3px; padding: 3px 10px; cursor: pointer; font: inherit; font-size: 12px;
}
.opt-size:hover:not(.active):not(:disabled) { background: var(--accent-weak); }
.opt-size.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.opt-size:disabled { opacity: .4; cursor: not-allowed; }

/* Column config (show/hide + order) */
.list-options-panel .opt-cols-label {
	margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--hairline);
}
.opt-cols { display: flex; flex-direction: column; gap: 2px; max-height: 260px; overflow-y: auto; }
.opt-col { display: flex; align-items: center; gap: 8px; padding: 1px 0; font-size: 12px; color: var(--ink);
	user-select: none; }
.opt-col-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opt-col.hidden-col .opt-col-name { text-decoration: line-through; color: var(--ink-faint); }
.opt-eye {
	border: none; background: none; padding: 0; flex: none; cursor: pointer;
	color: var(--ink-faint); display: inline-flex; align-items: center; justify-content: center;
}
.opt-eye svg { width: 16px; height: 16px; display: block; }
.opt-eye:hover { color: var(--accent); }
.opt-col:not(.hidden-col) .opt-eye { color: var(--accent); }
/* The handle a row is dragged by to set the order of the columns. touch-action: none so a finger on the
   handle drags the row instead of scrolling the list under it. */
.opt-grip {
	flex: none; margin-left: auto; padding: 0 3px; cursor: grab;
	color: var(--ink-faint); font-size: 13px; line-height: 1;
	user-select: none; touch-action: none;
}
.opt-grip:hover { color: var(--accent); }
.opt-col.dragging { opacity: .5; }
.opt-col.dragging .opt-grip { cursor: grabbing; }
/* Where the row in hand would land. */
.opt-col.drop-above { box-shadow: inset 0 2px 0 var(--accent); }
.opt-col.drop-below { box-shadow: inset 0 -2px 0 var(--accent); }
.opt-cols-reset { margin-top: 10px; align-self: flex-start; }

/* Supplier images (logo / razítko / podpis) */
.asset-blocks { display: flex; flex-wrap: wrap; gap: 16px; }
.asset-block {
	flex: 1 1 200px; min-width: 200px; border: 1px solid var(--hairline); border-radius: 4px; padding: 10px;
}
.asset-title { font-weight: 600; font-size: 13px; margin-bottom: 6px; }
.asset-preview {
	height: 90px; display: flex; align-items: center; justify-content: center;
	background: var(--surface-alt); border: 1px dashed var(--hairline); border-radius: 3px; overflow: hidden;
	background-image: linear-gradient(45deg, #eee 25%, transparent 25%), linear-gradient(-45deg, #eee 25%, transparent 25%),
		linear-gradient(45deg, transparent 75%, #eee 75%), linear-gradient(-45deg, transparent 75%, #eee 75%);
	background-size: 14px 14px; background-position: 0 0, 0 7px, 7px -7px, -7px 0;
}
.asset-preview img { max-height: 88px; max-width: 100%; object-fit: contain; }
.asset-actions { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.asset-actions input[type=file] { font-size: 11px; max-width: 100%; }

/* Invoice image attachments */
.attach-list { list-style: none; margin: 0 0 2px 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.attach-list li { display: flex; align-items: center; gap: 8px; }
.attach-list .link-btn {
	border: none; background: none; padding: 0; color: var(--accent); cursor: pointer;
	font: inherit; text-decoration: underline; text-align: left;
}
.attach-list .muted { font-size: 11px; }

/* Billing-status badge (movements list) */
.bstat {
	display: inline-block; padding: 1px 7px; border-radius: 10px; font-size: 11px; white-space: nowrap;
	border: 1px solid var(--hairline); background: var(--surface); color: var(--ink-faint);
}
.bstat-unbilled { color: var(--ink-faint); }
.bstat-paid_at_exit { color: #0a6; border-color: #0a6; background: rgba(0,170,102,0.08); }
.bstat-invoiced { color: #d98a00; border-color: #d98a00; background: rgba(217,138,0,0.08); }
.bstat-partially_paid { color: #d98a00; border-color: #d98a00; background: rgba(217,138,0,0.08); }
.bstat-paid { color: #0a6; border-color: #0a6; background: rgba(0,170,102,0.10); }

/* Disk usage bar (status page) */
.disk-bar {
	margin-top: 10px; height: 10px; border-radius: 5px; overflow: hidden;
	background: var(--accent-weak); border: 1px solid var(--hairline);
}
.disk-bar-fill { height: 100%; background: var(--accent); transition: width .2s ease; }
.disk-bar-fill.warn { background: #d98a00; }
.disk-bar-fill.crit { background: #c8371f; }

/* Modal dialog (e.g. e-mail compose) */
/* Loader provisioning QR code: large enough for a tablet camera at arm's length, on a white quiet zone. */
.qr-provision { width: 320px; max-width: 100%; margin: 4px auto 14px; background: #fff; }
.qr-provision svg { width: 100%; height: auto; display: block; }

.modal-backdrop {
	position: fixed; inset: 0; z-index: 60;
	/* It covers the window, so no width a container happens to impose may apply to it — a modal opened from
	   inside a form would otherwise be dimmed only as far as that form is wide (.form > * is capped). */
	max-width: none; max-height: none;
	background: rgba(0, 0, 0, 0.35); display: flex; align-items: center; justify-content: center;
}
.modal {
	width: 560px; max-width: calc(100vw - 32px); max-height: calc(100vh - 64px);
	display: flex; flex-direction: column;
	background: var(--surface); border: 1px solid var(--hairline);
	border-radius: 6px; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.28);
}
/* Wider variant (e.g. the movement-edit modal) so rows of three fields fit on one line. */
.modal.wide { width: 900px; }
.modal-head { padding: 14px 16px; border-bottom: 1px solid var(--hairline); }
.modal-head h3 { margin: 0; font-size: 15px; }
.modal-body { padding: 16px; overflow: auto; display: flex; flex-direction: column; gap: 12px; }
/* A picker opens over the edge of its dialog, not inside it. The body scrolls, so an open list was
   clipped to it and the dialog grew a scrollbar under the names — the list jumping about as it filtered.
   While a list is open the body stops clipping and the names hang over the dialog's edge; it goes back to
   scrolling the moment the list closes. */
.modal-body:has(.combo.open) { overflow: visible; }
.modal-foot { padding: 12px 16px; border-top: 1px solid var(--hairline); display: flex; align-items: center; gap: 8px; }
.modal-foot .spacer { flex: 1 1 auto; }
.modal .field label.check { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
.modal .field label.check input { width: auto; }


/* Detail-pane toolbar (top of the detail pane, below the splitter) */
.pane-detail.barred { display: flex; flex-direction: column; overflow: hidden; }
.pane-detail.barred .detail-scroll { flex: 1 1 auto; overflow: auto; min-height: 0; }
.detail-bar {
	display: flex; align-items: center; gap: 10px;
	padding: 6px 14px; border-bottom: 1px solid var(--hairline); background: var(--surface);
	min-height: 34px;
}
.detail-bar .spacer { flex: 1 1 auto; }
.detail-bar .bar-label { font-size: 12px; color: var(--ink-muted); }
.detail-bar .bar-title { font-size: 13px; font-weight: 600; color: var(--ink); }
.detail-bar .icon-btn { padding: 2px 8px; font-size: 15px; line-height: 1; }


/* The detail pane's furniture: a heading row, the label and value grid, and the quiet note under it. */
.hint { color: var(--ink-faint); font-size: 12px; padding: 8px 0; }
.subhead { display: flex; align-items: center; gap: 10px; margin: 4px 0 8px; }
.subhead .spacer { flex: 1 1 auto; }
.detail-grid { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 16px; padding: 10px 14px; align-items: baseline; }
.detail-grid > .muted { color: var(--ink-muted); }

/* Blazor's own crash bar: fixed to the foot of the window in both apps, or it lands at the end of the
   page where a screen that fills the window never shows it. */
#blazor-error-ui {
	background: #fbe9e9; color: var(--stop); border-top: 1px solid #e3c4c4;
	bottom: 0; display: none; left: 0; padding: 10px 16px; position: fixed;
	width: 100%; z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 14px; top: 10px; }

/* A list that is the whole page — nothing under it to split with, so it takes the height instead of the
   top 45 % a split would give it. */
.pane-only { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.pane-only > .pane-list { flex: 1 1 auto; min-height: 0; }

/* A free-text note in a grid: as wide as this and no wider, whatever somebody wrote. The cell keeps the
   whole text (the title shows it, a copy takes it); the column keeps the list readable. */
table.grid td.note-cell { max-width: 22rem; overflow: hidden; text-overflow: ellipsis; }
/* The note's own save button, with the space its answer needs kept free beside it so saying "Uloženo"
   moves nothing. */
.note-actions { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.note-state { min-width: 8rem; display: inline-block; font-size: 11px; }

/* "Uloženo", for a moment, in the corner. Fixed, so it is over the page and nothing moves to make room;
   it cannot be clicked, so it never swallows a press meant for what is underneath it. */
.save-notice {
	position: fixed; right: 18px; bottom: 52px; z-index: 60; pointer-events: none;
	background: var(--ink); color: var(--surface);
	padding: 7px 14px; border-radius: 4px; font-size: 13px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
	animation: save-notice-in .12s ease-out;
}
/* The movement only. Opacity is deliberately not animated: an animation that never gets to run — a page
   the browser has stopped painting, a machine that drops frames — would leave the notice invisible at its
   first frame, and a confirmation nobody sees is worse than none. Sliding 4 px is what is lost instead. */
@keyframes save-notice-in { from { transform: translateY(4px); } to { transform: none; } }

/* ---------- camera snapshots in the movement detail ---------- */
/* The gap above the strip lives here rather than on the element, so a screen that puts the pictures
   somewhere other than under the data — beside it, say — can say so in its own stylesheet. */
.movement-images { margin-top: 12px; }
.movement-images .img-group { margin-top: 8px; }
.movement-images .img-group-head { font-size: 12px; color: var(--ink-muted); margin-bottom: 6px; }
.movement-images .img-strip { display: flex; flex-wrap: wrap; gap: 12px; }
.img-card { margin: 0; width: 240px; max-width: 100%; display: flex; flex-direction: column; gap: 4px; }
.img-card figcaption { display: flex; flex-direction: column; font-size: 12px; color: var(--ink-muted); line-height: 1.35; }
.img-card figcaption span:first-child { color: var(--ink); }
.img-thumb { padding: 0; border: 1px solid var(--hairline); border-radius: 3px; background: var(--surface-alt); cursor: zoom-in; display: block; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; }
.img-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.img-thumb:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.img-missing { width: 100%; aspect-ratio: 16 / 10; border: 1px dashed var(--hairline); border-radius: 3px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 10px; font-size: 12px; color: var(--ink-muted); background: var(--surface-alt); }
.img-missing.error { color: var(--stop); border-color: #e3c4c4; }
.img-zoom { cursor: zoom-out; }
.img-zoom-card { margin: auto; max-width: min(1200px, 94vw); background: var(--surface); padding: 8px; border-radius: 4px; cursor: default; display: flex; flex-direction: column; gap: 6px; }
.img-zoom-card img { max-width: 100%; max-height: 82vh; object-fit: contain; display: block; margin: 0 auto; }
.img-zoom-card figcaption { display: flex; align-items: center; gap: 12px; justify-content: space-between; font-size: 13px; color: var(--ink-muted); }
/* The gate console keeps this frame standing from the moment a movement is picked, so the pictures
   coming in do not move the detail under the operator's hand. One row of cards' worth of height. */
.movement-images.reserved { min-height: 212px; }
.img-none { font-size: 12px; color: var(--ink-muted); padding: 4px 0; }