:root {
	--color-bg: #f5f4f0;
	--color-surface: #ffffff;
	--color-surface-alt: #f7f7f4;
	--color-border: #e0e2dc;
	--color-text: #242b2a;
	--color-text-muted: #66706c;
	--color-accent: #d1b05b;
	--color-accent-light: #e5cc8b;
	--color-accent-dark: #76591f;
	--color-info: #365d74;
	--color-success: #247350;
	--color-danger: #a93636;
	--radius: 0.875rem;
	--shadow: 0 2px 4px rgba(27, 39, 34, 0.02), 0 8px 28px rgba(27, 39, 34, 0.045);
	--control-radius: 0.5rem;
	--control-height: 2.75rem;
	--focus-ring: 0 0 0 3px rgba(177, 139, 56, 0.18);
}

* { box-sizing: border-box; }

body {
	margin: 0;
	font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	background: var(--color-bg);
	color: var(--color-text);
	font-size: 15px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

::selection { background: #ede0bb; color: #242b2a; }
a { color: var(--color-info); text-decoration: none; text-underline-offset: 0.2em; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--color-accent-dark); outline-offset: 3px; }

h1, h2, h3 { font-weight: 600; margin: 0 0 1rem; letter-spacing: -0.025em; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.2rem; }

/* Layout: retain the existing full-width canvas and component placement. */
.app-header {
	background: linear-gradient(115deg, #202c29, #18221f);
	color: #fff;
	padding: 0.9rem 1.5rem;
	box-shadow: inset 0 -1px rgba(229, 204, 139, 0.24), 0 3px 16px rgba(20, 31, 25, 0.08);
}
.header-row { display: flex; align-items: center; justify-content: space-between; }
.app-header .brand { font-weight: 700; letter-spacing: 0.03em; color: var(--color-accent-light); }
.header-panel { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.app-header nav { display: flex; gap: 1.1rem; flex: 1; flex-wrap: wrap; }
.app-header nav a {
	color: #d4dcd7;
	font-size: 0.92rem;
	padding: 0.2rem 0;
	text-decoration: none;
	transition: color 150ms ease, box-shadow 150ms ease;
}
.app-header nav a:hover { color: #fff; box-shadow: inset 0 -2px rgba(229, 204, 139, 0.4); }
.app-header nav a.active { color: var(--color-accent-light); font-weight: 600; box-shadow: inset 0 -2px var(--color-accent-light); }
.app-header .user-box { display: flex; align-items: center; gap: 0.8rem; font-size: 0.9rem; color: #b8c6be; }
.app-header .user-box a { color: #e0e8e3; }
.app-header .lang-switch a { color: #b8c6be; margin-left: 0.35rem; font-size: 0.8rem; font-weight: 600; text-decoration: none; }
.app-header .lang-switch a:hover { color: #fff; }
.app-header .lang-switch a.active { color: var(--color-accent-light); }
.app-header a:focus-visible, .nav-toggle:focus-visible { outline-color: var(--color-accent-light); }
.nav-toggle {
	display: none;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.2);
	color: #fff;
	font: inherit;
	font-size: 1.2rem;
	line-height: 1;
	padding: 0.35rem 0.65rem;
	border-radius: var(--control-radius);
	cursor: pointer;
}
.nav-toggle:hover { background: rgba(255, 255, 255, 0.1); }

.app-main { padding: 1.75rem 1.5rem 3rem; }

.card {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 1.25rem 1.5rem;
	margin-bottom: 1.5rem;
}

.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.filters { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: end; }
.filters .field { display: flex; flex-direction: column; gap: 0.25rem; }
.filters label { font-size: 0.78rem; color: var(--color-text-muted); }

/* Forms */
label { display: block; font-size: 0.85rem; font-weight: 600; color: #53605a; margin-bottom: 0.3rem; }
input, select, textarea {
	font-family: inherit;
	font-size: 0.92rem;
	line-height: 1.5;
	padding: 0.5rem 0.65rem;
	border: 1px solid #d4d9d2;
	border-radius: var(--control-radius);
	background: #fff;
	color: var(--color-text);
	width: 100%;
	min-width: 140px;
	box-shadow: inset 0 1px 2px rgba(27, 39, 34, 0.025);
	transition: border-color 150ms ease, box-shadow 150ms ease;
}
input:not([type="hidden"]), select { min-height: var(--control-height); }
input::placeholder, textarea::placeholder { color: #707970; opacity: 1; }
input:hover, select:hover, textarea:hover { border-color: #aeb9ae; }
input:focus, select:focus, textarea:focus { outline: none; border-color: #a88537; box-shadow: var(--focus-ring); }
input:disabled, select:disabled, textarea:disabled { background: #f0f2ee; color: var(--color-text-muted); cursor: not-allowed; box-shadow: none; }
input[type="checkbox"], input[type="radio"] { width: auto; min-width: 0; min-height: 0; accent-color: var(--color-accent-dark); }
textarea { resize: vertical; }
.form-row { margin-bottom: 0.9rem; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 0.9rem 1.2rem; }
fieldset { min-width: 0; border: 1px solid var(--color-border); border-radius: var(--radius); margin: 0 0 1.2rem; padding: 1rem 1.1rem; background: #fbfcfa; }
fieldset fieldset { background: var(--color-surface); }
legend { padding: 0 0.5rem; font-weight: 600; font-size: 0.88rem; color: var(--color-accent-dark); }
#transfer-price-preview { color: var(--color-accent-dark); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* One shared font, line height and size for links and native buttons. */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	vertical-align: middle;
	gap: 0.4rem;
	min-height: var(--control-height);
	padding: 0.55rem 1.1rem;
	border-radius: var(--control-radius);
	border: 1px solid transparent;
	font-family: inherit;
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1.5;
	cursor: pointer;
	text-decoration: none;
	box-shadow: 0 1px 2px rgba(27, 39, 34, 0.06);
	transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}
.btn:hover { text-decoration: none; }
.btn:active { box-shadow: inset 0 1px 3px rgba(27, 39, 34, 0.12); }
.btn svg { flex-shrink: 0; }
.btn-primary { background: linear-gradient(180deg, #e5cc8b, #d1b05b); border-color: #c8a750; color: #362b14; }
.btn-primary:hover { background: linear-gradient(180deg, #ead59d, #dabd70); border-color: #b89540; box-shadow: 0 3px 8px rgba(139, 106, 31, 0.13); }
.btn-secondary { background: #fff; border-color: #d4d9d2; color: #3b4841; }
.btn-secondary:hover { background: #f3f5f1; border-color: #abb8ac; box-shadow: 0 2px 5px rgba(27, 39, 34, 0.06); }
.btn-danger { background: #fff2f1; border-color: #eccdca; color: var(--color-danger); }
.btn-danger:hover { background: #fbe4e1; border-color: #dbaaa4; }
.btn-success { background: #eaf5ee; border-color: #bddcc9; color: #206343; }
.btn-success:hover { background: #dceee2; border-color: #96c5a9; }
.btn-sm { min-height: 2.25rem; padding: 0.32rem 0.7rem; font-size: 0.8rem; }
.toolbar .btn-sm { min-height: var(--control-height); padding: 0.55rem 1.1rem; font-size: 0.9rem; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }

/* Tables retain their columns and horizontal scrolling. */
table { width: 100%; border-collapse: collapse; font-size: 0.88rem; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: 0.6rem 0.7rem; border-bottom: 1px solid var(--color-border); vertical-align: top; white-space: nowrap; }
th { color: #5e6a63; background: #f3f5f1; font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.045em; }
tbody tr { transition: background-color 150ms ease; }
tbody tr:nth-child(even) { background: #fcfdfa; }
tbody tr:hover { background: #f4f6f0; }
tbody tr:last-child td { border-bottom: 0; }
tfoot th { border-top: 1px solid var(--color-border); border-bottom: 0; color: var(--color-text); }
.table-wrap { overflow-x: auto; border-radius: var(--control-radius); scrollbar-color: #c2cbbf #f3f5f1; scrollbar-width: thin; }
.table-wrap tbody td:first-child { font-weight: 600; }
.table-wrap td input, .table-wrap td select { font-weight: 400; }
.details-table td:first-child { color: var(--color-text-muted); }
.details-table td:last-child { font-weight: 600; }
.details-table strong { color: var(--color-accent-dark); }

/* Status and edit markers: readable text with restrained semantic colours. */
.badge { display: inline-block; padding: 0.2rem 0.6rem; border-radius: 999px; font-size: 0.76rem; font-weight: 600; line-height: 1.5; color: #53605a; background: #eef1ed; box-shadow: inset 0 0 0 1px rgba(27, 39, 34, 0.08); white-space: nowrap; }
.badge::before { content: ""; display: inline-block; width: 0.35rem; height: 0.35rem; margin-right: 0.4rem; border-radius: 50%; background: currentColor; vertical-align: 0.08em; }
.badge-edited { background: #fbf0d2; color: #77591c; }
.badge-edited[hidden] { display: none; }
.badge-new { background: #eaf0f6; color: #365d74; }
.badge-accepted { background: #eaf5ee; color: #206343; }
.badge-declined { background: #fbecea; color: #a03636; }
.badge-completed { background: #e8f2f0; color: #286b60; }
.badge-not_completed { background: #eef0ee; color: #606963; }

.flash { padding: 0.75rem 1rem; border-radius: var(--control-radius); margin-bottom: 1.2rem; font-size: 0.9rem; box-shadow: 0 2px 6px rgba(27, 39, 34, 0.02); }
.flash-success { background: #eef7f1; color: #206343; border: 1px solid #c9e2d1; }
.flash-error { background: #fff1ef; color: #963931; border: 1px solid #eccdc7; }

/* Login: same centred form, with a quieter branded background. */
.login-screen { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at 18% 12%, rgba(210, 179, 103, 0.12), transparent 48%), radial-gradient(ellipse at 85% 88%, rgba(87, 116, 92, 0.08), transparent 48%), var(--color-bg); }
.login-box { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: 0 3px 10px rgba(27, 39, 34, 0.03), 0 24px 64px rgba(27, 39, 34, 0.09); padding: 2.5rem 2.25rem; width: 100%; max-width: 340px; position: relative; }
.login-box::before { content: ""; position: absolute; top: -1px; left: 2.25rem; right: 2.25rem; height: 3px; background: linear-gradient(90deg, #c2a051, #e5cc8b, #c2a051); border-radius: 0 0 3px 3px; }
.login-box .brand { text-align: center; font-weight: 700; letter-spacing: 0.03em; color: #334139; margin-bottom: 1.5rem; font-size: 1.1rem; }
.login-box .btn { width: 100%; justify-content: center; margin-top: 0.5rem; }

.text-muted { color: var(--color-text-muted); }
.mt-0 { margin-top: 0; }

/* Existing mobile layout and menu behaviour. */
@media (max-width: 780px) {
	body { font-size: 14px; }
	.nav-toggle { display: inline-flex; }
	.header-panel {
		display: none;
		flex-direction: column;
		align-items: stretch;
		gap: 1rem;
		width: 100%;
		margin-top: 1rem;
	}
	.header-panel.open { display: flex; }
	.app-header nav { flex-direction: column; gap: 0.85rem; }
	.app-header nav a { padding: 0.4rem 0; font-size: 1rem; }
	.app-header .lang-switch { order: 2; }
	.app-header .lang-switch a { margin-left: 0; margin-right: 1rem; font-size: 1rem; }
	.app-header .user-box { order: 3; justify-content: space-between; border-top: 1px solid rgba(255, 255, 255, 0.15); padding-top: 0.8rem; }

	.app-main { padding: 1.1rem 0.9rem 2.5rem; }
	.card { padding: 1rem; }

	h1 { font-size: 1.25rem; }

	/* 16px prevents iOS Safari zooming when a field receives focus. */
	input, select, textarea { font-size: 16px; }

	.toolbar { flex-direction: column; align-items: stretch; }
	.toolbar > div { display: flex; flex-wrap: wrap; gap: 0.5rem; }
	.filters { flex-direction: column; align-items: stretch; }
	.filters .field { width: 100%; }

	.btn { min-height: var(--control-height); white-space: nowrap; }
	table { font-size: 0.82rem; }
	th, td { padding: 0.5rem 0.45rem; white-space: nowrap; }

	.login-box { padding: 2rem 1.5rem; }
}

/* Detail values wrap, without turning the card into a scrolling list. */
.details-table td { white-space: normal; overflow-wrap: anywhere; }
.details-table td:first-child { width: 1%; white-space: nowrap; }
@media (max-width: 480px) {
	.details-table td:first-child { white-space: normal; overflow-wrap: normal; width: 38%; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; }
}

/* Keep documents clean, independent of the screen theme. */
@media print {
	.app-header, .no-print { display: none !important; }
	.app-main { max-width: none; padding: 0; }
	.card { box-shadow: none; border: none; border-radius: 0; }
	body { background: #fff; color: #191919; -webkit-print-color-adjust: economy; print-color-adjust: economy; }
	th, td { background: transparent; border-color: #ddd; }
	tbody tr, tbody tr:nth-child(even), tbody tr:hover { background: transparent; }
	.details-table td:first-child, .details-table strong { color: inherit; }
	.badge { background: transparent; color: #191919; box-shadow: none; }
	.badge::before { display: none; }
}

/* Voucher visibility continues to be controlled by the existing print mode. */
.voucher-only { display: none; }
@media print {
	body.print-voucher .voucher-hide { display: none !important; }
	body.print-voucher .voucher-only { display: revert; }
}