/* =========================================================================
   ALSTA ADMIN — tema "Night shift"
   Sidebar cărbune + accent chihlimbar (far), workspace gri-hârtie, carduri
   albe cu hairline. Titluri: Barlow Semi Condensed. UI: IBM Plex Sans.
   Clasele legacy (cs-*, .booking-list, .waiting etc.) rămân funcționale.
   Backup-ul temei vechi: style.legacy.css
   ========================================================================= */

:root {
	/* neutre */
	--ink: #1C1F26;
	--paper: #F2F3F5;
	--card: #FFFFFF;
	--line: #E3E6EB;
	--line-strong: #D3D8DF;
	--muted: #66707F;
	--faint: #98A1AE;

	/* noaptea (sidebar) */
	--night: #15181E;
	--night-2: #1D212A;
	--night-ink: #9AA2B0;
	--night-line: #262B34;

	/* accent far */
	--amber: #E3A13C;
	--amber-deep: #B47A17;
	--amber-soft: #FCF1DC;
	--focus: rgba(227, 161, 60, .5);

	/* statusuri */
	--st-grey-bg: #EEF1F4;   --st-grey: #4A5568;
	--st-amber-bg: #FCF1DC;  --st-amber: #8A5A00;
	--st-orange-bg: #FDEBE1; --st-orange: #B03D12;
	--st-green-bg: #E4F4EA;  --st-green: #136B41;
	--st-blue-bg: #E7EFF8;   --st-blue: #2A5580;
	--st-red-bg: #FBE9E9;    --st-red: #B02A2A;
	--st-slate-bg: #ECEDF0;  --st-slate: #4E5560;

	/* tipografie */
	--font-ui: 'IBM Plex Sans', -apple-system, 'Segoe UI', Roboto, sans-serif;
	--font-display: 'Barlow Semi Condensed', var(--font-ui);
	--font-mono: ui-monospace, 'Cascadia Mono', 'Consolas', monospace;

	/* umbre */
	--shadow-sm: 0 1px 2px rgba(16, 20, 28, .06);
	--shadow-md: 0 10px 30px rgba(16, 20, 28, .14);
}

/* =============================== BAZÄ‚ =================================== */
@keyframes animatezoom { from { transform: scale(0) } to { transform: scale(1) } }

html { scroll-behavior: smooth; }

*, *::before, *::after { box-sizing: border-box; }

body {
	font-size: 14px;
	font-family: var(--font-ui);
	margin: 0;
	padding: 0;
	background: var(--paper);
	color: var(--ink);
	-webkit-font-smoothing: antialiased;
}

a { text-decoration: none; color: inherit; cursor: pointer; }
button { cursor: pointer; font-family: var(--font-ui); }
pre { white-space: pre-wrap; font-family: var(--font-ui); }

h2 { font-family: var(--font-display); font-weight: 600; letter-spacing: .01em; }

label {
	display: block;
	margin: 4px 0;
	font-size: 13px;
	font-weight: 500;
	color: var(--ink);
}

::placeholder { color: var(--faint); opacity: 1; }

input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-calendar-picker-indicator { display: none; -webkit-appearance: none; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

.ui-datepicker td.selected a { background: var(--ink) !important; color: white !important; }

/* ============================ UTILITARE cs-* ============================= */
.cs-font-poppins { font-family: var(--font-ui); }
.cs-font-montserrat { font-family: var(--font-display); }
.cs-font-12 { font-size: 12px; } .cs-font-14 { font-size: 14px; } .cs-font-16 { font-size: 16px; }
.cs-font-18 { font-size: 18px; } .cs-font-20 { font-size: 20px; } .cs-font-22 { font-size: 22px; }
.cs-font-24 { font-size: 24px; } .cs-font-26 { font-size: 26px; } .cs-font-28 { font-size: 28px; }
.cs-font-30 { font-size: 30px; } .cs-font-32 { font-size: 32px; }
.cs-text-right { text-align: right; } .cs-text-left { text-align: left; }
.cs-text-center { text-align: center; } .cs-center { text-align: center; }
.cs-weight-400 { font-weight: 400; } .cs-weight-500 { font-weight: 500; } .cs-weight-600 { font-weight: 600; }
.cs-bold { font-weight: 600; }
.cs-p0 { padding: 0px; } .cs-p8 { padding: 8px; } .cs-p12 { padding: 12px; }
.cs-p16 { padding: 16px; } .cs-p32 { padding: 32px; } .cs-pr32 { padding-right: 32px; }
.cs-p8-0 { padding: 8px 0; } .cs-p16-32 { padding: 16px 32px; } .cs-p16-8 { padding: 16px 8px; }
.cs-p0-32 { padding: 0 32px; } .cs-p0-6 { padding: 0 6px; }
.cs-w24 { width: 24%; } .cs-w32 { width: 32%; } .cs-w33 { width: 33.3333%; }
.cs-w40 { width: 40%; } .cs-w49 { width: 49%; } .cs-w50 { width: 50%; }
.cs-w66 { width: 66.6666%; } .cs-w100 { width: 100%; }
.cs-m0 { margin: 0; } .cs-mt0 { margin-top: 0; }
.cs-mt4 { margin-top: 4px; } .cs-mb4 { margin-bottom: 4px; } .cs-ml4 { margin-left: 4px; } .cs-mr4 { margin-right: 4px; }
.cs-mt8 { margin-top: 8px; } .cs-mb8 { margin-bottom: 8px; } .cs-ml8 { margin-left: 8px; } .cs-mr8 { margin-right: 8px; }
.cs-mt16 { margin-top: 16px; } .cs-mb16 { margin-bottom: 16px; } .cs-ml16 { margin-left: 16px; } .cs-mr16 { margin-right: 16px; }
.cs-mt32 { margin-top: 32px; } .cs-mb32 { margin-bottom: 32px; } .cs-ml32 { margin-left: 32px; } .cs-mr32 { margin-right: 32px; }
.cs-mt64 { margin-top: 64px; }
.cs-mtb16 { margin: 16px 0; } .cs-mtb24 { margin: 24px 0; } .cs-mtb32 { margin: 32px 0; }
.cs-flex { display: flex; } .cs-block { display: block; }
.cs-flex-align-center { align-items: center; }
.cs-justify-content-space-b { justify-content: space-between; }
.cs-justify-center { justify-content: center; }
.cs-flex-grow { flex-grow: 1; }
.cs-flex-align-items-center { align-items: center; }
.cs-flex-start { align-items: flex-start; }
.cs-flex-wrap { flex-wrap: wrap; }
.cs-bg-black { background-color: var(--night); }
.cs-text-white { color: #FFFFFF; } .cs-text-black { color: var(--ink); }
.cs-round-8 { border-radius: 10px; } .cs-round-16 { border-radius: 16px; }
.hide-desktop { display: none; }
.cs-custom-border { height: 1px; background: linear-gradient(to right, transparent, var(--line-strong) 30%, var(--line-strong) 70%, transparent); }
.cs-color-gray { color: var(--muted); }
.cs-mono { font-family: var(--font-mono); font-size: .95em; }

@media only screen and (max-width: 768px) {
	.cs-w24, .cs-w32, .cs-w33, .cs-w40, .cs-w49, .cs-w50, .cs-w66 { width: 100%; }
	.cs-mt32-m { margin-top: 32px; }
	.cs-mb32-m { margin-bottom: 32px; }
	.cs-mb64-m { margin-bottom: 64px; }
	.cs-mtb32-m { margin: 32px 0; }
	.cs-p0-32-m { padding: 0 32px; }
	.cs-w32-m { width: 32% !important; }
	.cs-w100-m { width: 100% !important; display: block; }
	.statistic { width: 100% }
	.cs-text-center-m { text-align: center; }
}

.form-error { background-color: var(--st-red); color: white; border-radius: 6px; }

/* select2 în formulare */
form .select2-container { margin-top: 2px; margin-bottom: 12px; }
form .select2-container--default .select2-selection--single { border: 1px solid var(--line-strong); height: 36px; border-radius: 8px; font-size: 14px; }
form .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--ink); line-height: 34px; }
form .select2-container--default .select2-selection--single .select2-selection__arrow b { margin-top: 2px; }
form .select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--faint); }

/* =============================== LOGIN ================================== */
.login-page {
	min-height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	background:
		radial-gradient(1000px 480px at 85% -10%, rgba(227, 161, 60, .16), transparent 60%),
		var(--night);
	padding: 24px;
}

.login-form {
	width: 440px;
	border-radius: 14px;
	padding: 40px 44px;
	background: var(--card);
	box-shadow: var(--shadow-md);
	border-top: 3px solid var(--amber);
}

.login-form p.cs-bold {
	font-family: var(--font-display);
	font-weight: 600;
	letter-spacing: .02em;
}

.login-form label { margin: 6px 0; color: var(--muted); font-size: 13px; }
.login-form .password-container { position: relative; }
.login-form .password-container i {
	position: absolute; bottom: 23px; right: 1px;
	cursor: pointer; background-color: white; padding: 10px;
}

.login-button {
	width: 100%;
	border: none;
	background-color: var(--ink);
	color: white;
	font-weight: 600;
	padding: 14px;
	margin-top: 20px;
	margin-bottom: 16px;
	border-radius: 10px;
	cursor: pointer;
	font-size: 15px;
	transition: background .15s;
}
.login-button:hover { background-color: #000000; }

.login-input {
	width: 100%;
	padding: 12px;
	border-radius: 10px;
	margin-top: 6px;
	margin-bottom: 16px;
	resize: vertical;
	background: white;
	font-size: 15px;
	font-family: var(--font-ui);
	border: 1px solid var(--line-strong);
	transition: border-color .15s;
}
.login-input:focus { border-color: var(--amber); outline: none; box-shadow: 0 0 0 3px var(--focus); }

.login-message { font-size: 13px; }
.error-message {
	font-size: 13px; color: var(--st-red);
	background: var(--st-red-bg); border-radius: 8px;
	padding: 8px 12px; margin: 4px 0;
}

@media only screen and (max-width: 600px) {
	.login-form { width: 100%; padding: 32px 28px; }
}

/* ============================ INPUT CUSTOM =============================== */
.cs-input {
	width: 100%;
	height: 36px;
	font-size: 14px;
	padding: 6px 10px;
	border-radius: 8px;
	margin-top: 2px;
	margin-bottom: 12px;
	resize: vertical;
	background: white;
	border: 1px solid var(--line-strong);
	font-family: var(--font-ui);
	color: var(--ink);
	transition: border-color .15s;
}
.cs-input:focus { border-color: var(--amber); outline: none; box-shadow: 0 0 0 3px var(--focus); }
/* disabled IDENTIC pe iOS/Android/Desktop - Safari pe iOS spală singur textul
   (opacity + -webkit-text-fill-color proprii) și arăta diferit față de desktop */
.cs-input:disabled {
	background-color: #F3F4F6;
	color: var(--muted);
	-webkit-text-fill-color: var(--muted);
	opacity: 1;
	border-color: var(--line);
	cursor: not-allowed;
}
/* cs-m0 trebuie să bată marginile lui .cs-input (altfel inputurile inline
   din barele flex nu se aliniază pe mijloc - ex. selectorul de lună din Reports) */
.cs-input.cs-m0 { margin: 0; }

/* validare per câmp */
.cs-input--error { border-color: var(--st-red) !important; }
.field-error {
	display: block;
	color: var(--st-red);
	font-size: 12px;
	margin: -8px 0 10px;
}

/* =============================== TOPNAV ================================= */
/* Zone: [toggle mobil] [brand] [dispatch strip — flexibil, scrollabil] [user + logout — fix] */
.topnav {
	width: 100%;
	background-color: var(--card);
	color: var(--ink);
	font-weight: 500;
	height: 60px;
	position: sticky;
	top: 0;
	z-index: 5;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0 12px 0 0;
	border-bottom: 1px solid var(--line);
	box-shadow: var(--shadow-sm);
}

.nav-toggle {
	display: none;
	background: none;
	border: none;
	padding: 8px 12px;
	color: var(--ink);
	flex-shrink: 0;
}
.nav-toggle i { font-size: 22px; color: var(--ink); }

/* wordmark */
.brand {
	display: flex;
	align-items: center;
	width: 240px;
	min-width: 240px;
	align-self: stretch;
	padding: 0 20px;
	background: var(--night);
	font-family: var(--font-display);
	font-size: 21px;
	font-weight: 700;
	letter-spacing: .14em;
	color: #FFFFFF;
	flex-shrink: 0;
}

/* dispatch strip — counterele operaționale; se comprimă și scrollează
   orizontal, nu împinge niciodată user/logout în afara ecranului */
.dispatch-strip {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-left: 8px;
	flex: 1 1 auto;
	min-width: 0;
	overflow-x: auto;
	scrollbar-width: none;
}
.dispatch-strip::-webkit-scrollbar { display: none; }

.dispatch-chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 12px;
	font-weight: 500;
	color: var(--muted);
	border: 1px solid var(--line);
	border-radius: 999px;
	padding: 4px 12px 4px 6px;
	white-space: nowrap;
	transition: border-color .15s, background .15s;
}
.dispatch-chip:hover { border-color: var(--line-strong); background: var(--paper); }

.dispatch-chip .dc-num {
	min-width: 22px;
	height: 22px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	font-weight: 600;
	font-size: 12px;
	padding: 0 6px;
	font-variant-numeric: tabular-nums;
	color: #fff;
}
.dc--pending .dc-num { background: var(--st-grey); }
.dc--last-minute .dc-num { background: var(--st-orange); }
.dc--waiting .dc-num { background: var(--amber-deep); }
.dc--upcoming .dc-num { background: var(--st-green); }

.topnav-right {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-left: auto;
	flex-shrink: 0;
}
/* switch "Hide prices" — bifat = toate sumele mascate (persistă în sesiune) */
.price-toggle {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 12px;
	font-weight: 500;
	color: var(--muted);
	cursor: pointer;
	padding: 0 8px;
	white-space: nowrap;
	margin: 0;
}
.price-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.pt-track {
	width: 34px;
	height: 20px;
	border-radius: 999px;
	background: var(--line-strong);
	position: relative;
	transition: background .15s;
	flex-shrink: 0;
}
.pt-thumb {
	position: absolute;
	top: 2px;
	left: 2px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #fff;
	box-shadow: var(--shadow-sm);
	transition: left .15s;
}
.price-toggle input:checked + .pt-track { background: var(--ink); }
.price-toggle input:checked + .pt-track .pt-thumb { left: 16px; }
.price-toggle input:focus-visible + .pt-track { outline: 2px solid var(--focus); outline-offset: 1px; }

/* mascarea sumelor: orice element cu .price / .ron / .eur devine ilizibil */
body.prices-hidden .price,
body.prices-hidden .ron,
body.prices-hidden .eur,
body.prices-hidden .bl-pill--price {
	filter: blur(7px);
	user-select: none;
	pointer-events: none;
}

.topnav-user { font-size: 13px; color: var(--muted); padding: 0 8px; white-space: nowrap; }
.topnav-logout {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 8px;
	transition: background .15s;
}
.topnav-logout i { font-size: 19px; color: var(--muted); transition: color .15s; }
.topnav-logout:hover { background: var(--paper); }
.topnav-logout:hover i { color: var(--ink); }

/* backdrop pentru meniul off-canvas (mobil) */
.nav-backdrop {
	display: none;
	position: fixed;
	inset: 0;
	top: 60px;
	background: rgba(17, 20, 26, .45);
	z-index: 3;
}
body.nav-open .nav-backdrop { display: block; }

/* =============================== SIDENAV ================================ */
.sidenav {
	width: 240px;
	height: 100%;
	position: fixed;
	z-index: 4;
	top: 60px;
	left: 0;
	background-color: var(--night);
	overflow: auto;
	transition: left .2s;
	padding-top: 12px;
	padding-bottom: 84px;
	scrollbar-width: thin;
	scrollbar-color: var(--night-line) transparent;
}

body.nav-open .sidenav { left: 0; }

.sidenav a {
	position: relative;
	padding: 10px 14px;
	text-decoration: none;
	font-size: 14px;
	font-weight: 450;
	color: var(--night-ink);
	display: block;
	border-left: 3px solid transparent;
	transition: color .12s, background .12s;
}

.sidenav a:hover { color: #FFFFFF; background: var(--night-2); }

/* marcajul de bandă: bară chihlimbar pe itemul activ */
.sidenav a.active {
	background: var(--night-2);
	border-left: 3px solid var(--amber);
	color: #FFFFFF;
	font-weight: 500;
}
.sidenav a.active i { color: var(--amber); }

.sidenav i {
	font-size: 14px;
	padding-right: 6px;
	vertical-align: middle;
	padding-bottom: 3px;
	width: 24px;
	color: var(--faint);
	transition: color .12s;
}
.sidenav a:hover i { color: var(--night-ink); }

.menu-subitem {
	max-height: 0;
	overflow: hidden;
	transition: max-height .3s ease;
	background: #101319;
}
.menu-subitem-inner { padding: 6px 0; }
.menu-item.open .menu-subitem { max-height: 400px; }

.sidenav .menu-subitem a {
	border-left: none;
	margin-left: 40px;
	padding: 6px 8px;
	font-size: 13px;
	color: var(--night-ink);
}
.sidenav .menu-subitem a.active {
	border-left: none;
	color: var(--amber);
	font-weight: 600;
	background-color: unset;
}

/* ============================== CONTAINER ================================ */
.container {
	margin-left: 256px;
	margin-right: auto;
	margin-bottom: 24px;
	margin-top: 20px;
	padding: 0 20px;
	overflow: visible;
}

.page-header {
	font-size: 15px;
	padding: 4px 0 16px;
	min-height: 54px;
	margin-bottom: 6px;
	color: var(--ink);
	gap: 8px;
}

.page-header .title {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 26px;
	letter-spacing: .01em;
}

.page-header button {
	color: var(--ink);
	background-color: var(--card);
	border-radius: 8px;
	border: 1px solid var(--line-strong);
	padding: 7px 16px;
	font-size: 13px;
	font-weight: 500;
	transition: background .15s, border-color .15s;
}
.page-header button:hover { background: var(--paper); }

/* taburi — nu depășesc niciodată containerul: conținutul scrollează orizontal */
.tabs {
	font-size: 13px;
	margin-bottom: 16px;
	color: var(--ink);
	display: inline-flex;
	max-width: 100%;
	background-color: var(--card);
	border: 1px solid var(--line);
	border-radius: 10px;
	box-shadow: var(--shadow-sm);
}

.tabs .content {
	padding: 5px;
	display: flex;
	gap: 2px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.tabs .content::-webkit-scrollbar { display: none; }

.tabs a {
	padding: 6px 12px;
	display: flex;
	align-items: center;
	border-radius: 7px;
	color: var(--muted);
	font-weight: 500;
	white-space: nowrap;
	flex-shrink: 0;
	transition: color .12s, background .12s;
}
.tabs a:hover { color: var(--ink); }

.tabs a .count {
	background-color: var(--paper);
	font-weight: 600;
	font-size: 11px;
	border-radius: 999px;
	padding: 1px 7px;
	margin-left: 7px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-variant-numeric: tabular-nums;
	color: var(--muted);
}

.tabs .active {
	font-weight: 600;
	background-color: var(--ink);
	color: #FFFFFF;
	border-radius: 7px;
}
.tabs .active .count { background-color: rgba(255, 255, 255, .18); color: #fff; }

/* carduri */
.inner-container {
	background-color: var(--card);
	padding: 14px 16px;
	margin-bottom: 16px;
	border: 1px solid var(--line);
	box-shadow: var(--shadow-sm);
	border-radius: 10px;
}

.box {
	background-color: var(--card);
	border: 1px solid var(--line);
	box-shadow: var(--shadow-sm);
	border-radius: 10px;
	overflow: hidden;
}

.container-title {
	font-family: var(--font-display);
	font-size: 17px;
	font-weight: 600;
	margin-bottom: 14px;
	color: var(--ink);
	letter-spacing: .01em;
}

.inner-container .title { border-bottom: 1px solid var(--line); font-size: 16px; padding-bottom: 8px; }

/* filtre */
#showFilters { cursor: pointer; }
.filters {
	position: absolute; top: 42px; left: 0;
	width: 400px;
	background-color: var(--card);
	border: 1px solid var(--line);
	border-radius: 10px;
	padding: 16px;
	z-index: 6;
	box-shadow: var(--shadow-md);
}
.filters .filter { width: 100% !important; margin-bottom: 10px; }
.filters input { cursor: pointer; height: 38px; vertical-align: middle; padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: 8px; font-size: 14px; font-family: var(--font-ui); }
.filters select { cursor: pointer; height: 38px; vertical-align: middle; padding: 8px 6px; border: 1px solid var(--line-strong); border-radius: 8px; font-size: 14px; background: white; color: var(--ink); font-family: var(--font-ui); }
.filters .select2-container--default .select2-selection--single { border: 1px solid var(--line-strong); height: 38px; border-radius: 8px; }
.filters .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--ink); line-height: 38px; }
.filters .select2-container--default .select2-selection--single .select2-selection__arrow b { margin-top: 3px; }
.filters .select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--faint); }
.filters button {
	color: var(--ink); background-color: var(--card); cursor: pointer;
	width: 49.3%; height: 36px;
	border: 1px solid var(--line-strong); border-radius: 8px;
	padding: 5px; margin-top: 10px; font-weight: 500;
	transition: background .15s;
}
.filters button:hover { background: var(--paper); }

.annex_menu {
	position: absolute; top: 42px; left: 0;
	background-color: var(--card);
	border: 1px solid var(--line);
	border-radius: 10px;
	padding: 16px;
	z-index: 6;
	box-shadow: var(--shadow-md);
}
.annex_menu a:not(:last-child) { display: block; margin-bottom: 10px; }

/* ============================ LISTE / TABELE ============================= */
.booking-list:first-child { margin-top: 6px; }
.booking-list:last-child { border-bottom: none; }
.booking-list { padding: 13px 12px; color: var(--ink); border-bottom: 1px solid var(--line); transition: background .1s; }
.booking-list:hover { background: #FAFBFC; }
.booking-list .top { display: flex; flex-direction: row; align-items: flex-start; }
.booking-list .date { font-size: 15px; font-weight: 600; line-height: 1.3; font-variant-numeric: tabular-nums; }
.booking-list .name { line-height: 1.3; }
/* countdown discret: text simplu, chihlimbar; roșu doar când e ACUM */
/* chip de countdown - plin, saturat: TREBUIE să sară în ochi în listă */
.countdown {
	display: inline-block;
	align-self: flex-start;
	background: var(--st-orange);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	padding: 4px 9px;
	border-radius: 999px;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.countdown--now {
	background: var(--st-red);
	color: #fff;
	text-transform: uppercase;
	letter-spacing: .04em;
	animation: countdown-pulse 1.6s ease-in-out infinite;
}
@keyframes countdown-pulse { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .countdown--now { animation: none; } }
.booking-list .locations { display: flex; align-items: center; flex-wrap: wrap; }
.booking-list .arrow { margin-left: 20px; color: var(--faint); font-size: 14px; }
.booking-list .pickup { font-size: 14px; margin-top: 6px; margin-left: 20px; }
.booking-list .dropoff { font-size: 14px; margin-left: 20px; margin-top: 6px; }
.booking-list .ron { text-align: right; font-weight: 600; color: var(--st-green); font-size: 15px; line-height: 1.3; font-variant-numeric: tabular-nums; }
.booking-list .eur { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.booking-list .veh-type { text-align: right; font-weight: 400; font-size: 13px; line-height: 1.3; color: var(--muted); }
.booking-list .assigned { margin-top: 6px; }
.booking-list .assigned i { margin-right: 7px; color: var(--amber-deep); }

.list-items { width: 100%; padding: 12px 0; margin: 0; border-bottom: 1px solid var(--line); display: block; }
.list-items:last-child { border-bottom: none }

.quick-actions .qa { background: transparent; border: 0; padding: 6px; margin: 0 4px; cursor: pointer; color: var(--muted); transition: color .12s; }
.quick-actions .qa:hover { color: var(--ink); }
.quick-actions button.disabled { opacity: 0.5; pointer-events: none; }
.quick-actions .qa i { pointer-events: none; }

.list { width: 100%; display: table; text-align: left; border-collapse: collapse; }
.list tr { border-bottom: 1px solid var(--line); }
.list tr:last-child { border-bottom: none; }
.list th {
	display: table-cell;
	/* ALINIAT cu td si cu titlurile il-head (16px lateral) - "ca in armata" */
	padding: 10px 16px;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--muted);
}
.list td { display: table-cell; padding: 10px 16px; font-variant-numeric: tabular-nums; }
.list th:last-child { text-align: right; }
.list td:last-child { text-align: right; }
.list tbody tr:hover, .list tr:hover { background: #FAFBFC; }

/* ========================= CARDURI SEARCHES (bl-*) ======================= */
.bl-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px }
.bl-id { display: flex; flex-direction: column; gap: 2px; flex-grow: 1 }
.bl-ip { font-size: 14px; font-weight: 600 }
.bl-loc { font-size: 12px; color: var(--faint) }
.bl-status { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 999px; white-space: nowrap }
.bl-status.s-book { background: #C7DEFC; color: #0B4FA8 }
.bl-status.s-paid { background: var(--st-green-bg); color: var(--st-green) }
.bl-status.s-chk { background: var(--st-amber-bg); color: var(--st-amber) }
.bl-status.s-srch { background: var(--st-grey-bg); color: var(--st-grey) }

.bl-route { display: flex; gap: 10px; margin: 12px 0 }
.bl-rail { display: flex; flex-direction: column; align-items: center; padding-top: 6px; padding-bottom: 6px }
.bl-dot { width: 8px; height: 8px; border-radius: 50% }
.bl-dot--from { background: var(--amber-deep) }
.bl-dot--to { background: var(--ink) }
.bl-bar { width: 2px; flex: 1; min-height: 16px; background: var(--line-strong); margin: 3px 0 }
.bl-places { display: flex; flex-direction: column; justify-content: space-between; gap: 14px; font-size: 14px; line-height: 1.35 }

.bl-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px }
.bl-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 4px 9px; background: var(--paper); border-radius: 8px; color: var(--ink) }
.bl-pill i { font-size: 13px; color: var(--faint) }
.bl-pill--price { background: var(--amber-soft); color: var(--amber-deep); font-weight: 600 }
.bl-pill--price i { color: var(--amber-deep) }

.bl-steps { position: relative; display: flex }
.bl-track { position: absolute; left: 6px; right: 6px; top: 5px; height: 2px; background: var(--line-strong) }
.bl-progress { position: absolute; left: 6px; top: 5px; height: 2px; background: var(--st-green) }
.bl-step { position: relative; z-index: 1; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 2px }
.bl-step.s-left { align-items: flex-start; text-align: left }
.bl-step.s-mid { align-items: center; text-align: center }
.bl-step.s-right { align-items: flex-end; text-align: right }
.bl-step-dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--line-strong); background: #fff; margin-bottom: 6px }
.bl-step.done .bl-step-dot { border-color: var(--st-green); background: var(--st-green) }
.bl-step-label { font-size: 12px; font-weight: 600; color: var(--ink) }
.bl-step.pending .bl-step-label { color: var(--faint) }
.bl-step-time { font-size: 11px; color: var(--muted) }

/* ============================ BADGE-URI STATUS =========================== */
/* Sistem nou: <span class="badge badge--upcoming">Upcoming</span>
   (generat de booking_status_badge() din helpers) */
.badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 600;
	padding: 3px 10px;
	border-radius: 999px;
	white-space: nowrap;
	line-height: 1.5;
	/* REGULĂ: badge-urile au aceeași lățime, nu se redimensionează după text */
	min-width: 120px;
}
.badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.badge--pending { background: var(--st-grey-bg); color: var(--st-grey); }
.badge--waiting-payment { background: var(--st-amber-bg); color: var(--st-amber); }
.badge--last-minute { background: var(--st-orange-bg); color: var(--st-orange); }
.badge--upcoming { background: var(--st-green-bg); color: var(--st-green); }
.badge--ongoing { background: var(--st-green-bg); color: var(--st-green); }
.badge--completed { background: var(--st-blue-bg); color: var(--st-blue); }
.badge--cancelled { background: var(--st-red-bg); color: var(--st-red); }
.badge--no-show { background: var(--st-red-bg); color: var(--st-red); }
.badge--refunded { background: var(--st-slate-bg); color: var(--st-slate); }
.badge--rejected { background: var(--st-orange-bg); color: var(--st-orange); }
.badge--slate { background: var(--st-slate-bg); color: var(--st-slate); }
/* badge informativ (ex: categorii) - fără punct colorat */
.badge--slate::before { display: none; }

/* clase legacy de status — primesc același tratament, numele rămân */
.waiting, .last-minute, .waiting-payment, .upcoming,
.completed, .cancelled, .refunded, .rejected {
	background: none;
	padding: 3px 10px;
	border-radius: 999px;
	min-width: 120px;
	text-align: center;
	display: inline-block;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.5;
}
.waiting { background-color: var(--st-grey-bg); color: var(--st-grey); }
.last-minute { background-color: var(--st-orange-bg); color: var(--st-orange); }
.waiting-payment { background-color: var(--st-amber-bg); color: var(--st-amber); }
.upcoming { background-color: var(--st-green-bg); color: var(--st-green); }
.completed { background-color: var(--st-blue-bg); color: var(--st-blue); }
.cancelled { background-color: var(--st-red-bg); color: var(--st-red); }
.refunded { background-color: var(--st-slate-bg); color: var(--st-slate); }
.rejected { background-color: var(--st-orange-bg); color: var(--st-orange); }

/* chip-uri plăți */
.payment_paid, .payment_term_ok, .payment_term_passed, .payment_storned {
	font-weight: 600; font-size: 12px; padding: 2px 0; width: 120px;
	border-radius: 999px; text-align: center; display: inline-block;
	border: none; line-height: 1.6;
}
.payment_paid { background: var(--st-green-bg); color: var(--st-green); }
.payment_term_ok { background: var(--st-blue-bg); color: var(--st-blue); }
.payment_term_passed { background: var(--st-red-bg); color: var(--st-red); }
.payment_storned { background: var(--st-slate-bg); color: var(--st-slate); }

/* =========================== MODAL PLÄ‚ÈšI ================================ */
.payment-overlay {
	position: fixed; inset: 0;
	background: rgba(17, 20, 26, 0.6);
	z-index: 9999;
	display: flex; align-items: center; justify-content: center;
	padding: 24px;
}

.payment-modal {
	width: 100%; max-width: 520px;
	background: var(--card);
	border-radius: 14px;
	padding: 24px;
	box-shadow: var(--shadow-md);
}

.payment-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.payment-head h3 { margin: 0; font-size: 20px; font-family: var(--font-display); font-weight: 600; }
.payment-close { border: 0; background: none; font-size: 28px; cursor: pointer; line-height: 1; color: var(--muted); }
.payment-close:hover { color: var(--ink); }

.payment-info {
	display: grid; grid-template-columns: 1fr; gap: 8px;
	margin-bottom: 20px; padding: 14px 16px;
	background: var(--paper); border-radius: 10px;
}

.payment-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 20px; }
.payment-actions button {
	color: var(--ink); background-color: var(--card);
	border-radius: 8px; border: 1px solid var(--line-strong);
	padding: 7px 16px; font-weight: 500;
	transition: background .15s;
}
.payment-actions button:hover { background: var(--paper); }

.payment-message { margin-bottom: 16px; padding: 12px 14px; border-radius: 10px; font-size: 14px; }
.payment-message.error { background: var(--st-red-bg); color: var(--st-red); }
.payment-message.success { background: var(--st-green-bg); color: var(--st-green); }

/* ========================== CUSTOMER VIEW =============================== */
.bv-tools__danger { background: none; border: none; padding: 0; }
.bv-tools__danger i { color: var(--st-red); font-size: 17px; }
.bv-tools form { display: flex; }
.bv-tools button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 8px;
	cursor: pointer;
	transition: background .12s;
}
.bv-tools button:hover { background: var(--st-red-bg); }

/* trei carduri egale, aceeași înălțime (regula 11 — fără coloane orfane) */
.cv-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	align-items: stretch;
}
@media only screen and (max-width: 900px) {
	.cv-cards { grid-template-columns: 1fr; }
}

.cv-filterbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cv-filterbar .tabs { margin-bottom: 0; }
.cv-datefilter { display: flex; align-items: center; gap: 8px; }
.cv-datefilter .filter {
	height: 36px;
	padding: 8px 10px;
	border: 1px solid var(--line-strong);
	border-radius: 8px;
	font-size: 13px;
	background: var(--card);
	cursor: pointer;
	width: 210px;
}
.cv-datefilter button {
	height: 36px;
	padding: 0 14px;
	border: 1px solid var(--line-strong);
	border-radius: 8px;
	background: var(--card);
	font-weight: 500;
	transition: background .15s;
}
.cv-datefilter button:hover { background: var(--paper); }

.t-when .bookingCheckbox { width: 16px; height: 16px; margin-bottom: 4px; cursor: pointer; }
.cv-row .t-main { color: inherit; }

.cv-actionbar {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	position: sticky;
	bottom: 12px;
	z-index: 3;
	box-shadow: var(--shadow-md);
}
.cv-selectall { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 500; }
.cv-selectall input { width: 16px; height: 16px; }
.cv-selcount { font-size: 12.5px; font-variant-numeric: tabular-nums; }
.cv-btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 36px;
	padding: 0 14px;
	border: 1px solid var(--line-strong);
	border-radius: 8px;
	background: var(--card);
	color: var(--ink);
	text-decoration: none;
	font-weight: 500;
	font-size: 13px;
	transition: background .15s, opacity .15s;
}
.cv-btn:hover { background: var(--paper); }
.cv-btn:disabled { opacity: .45; cursor: not-allowed; }
.cv-btn--primary { background: var(--ink); border-color: var(--ink); color: #fff; }
.cv-btn--primary:hover { background: #000; }

@media only screen and (max-width: 768px) {
	.cv-filterbar { align-items: stretch; flex-direction: column; }
	.cv-datefilter .filter { flex: 1; width: auto; }
	.cv-actionbar { position: static; }
	.cv-actionbar .cv-btn { flex: 1 1 45%; justify-content: center; }
}

/* ========================= BILLING / RECEIVABLES ========================= */
.rcv-item {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, auto) 130px;
	gap: 12px;
	align-items: center;
	padding: 12px 14px;
	border-bottom: 1px solid var(--line);
	transition: background .1s;
}
.rcv-item:last-child { border-bottom: none; }
.rcv-item:hover { background: #FAFBFC; }
.rcv-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rcv-aging { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.rcv-aging .badge { font-variant-numeric: tabular-nums; }
.rcv-total { text-align: right; }
.rcv-total .ron { display: block; font-weight: 600; color: var(--st-green); font-variant-numeric: tabular-nums; }

@media only screen and (max-width: 768px) {
	.rcv-item {
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas:
			"main total"
			"aging aging";
		row-gap: 8px;
	}
	.rcv-main { grid-area: main; }
	.rcv-total { grid-area: total; }
	.rcv-aging { grid-area: aging; justify-content: flex-start; }
}

/* ============================== P&L TABLE ================================ */
.pl-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.pl-table th {
	text-align: left;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--muted);
	padding: 8px 10px;
	border-bottom: 1px solid var(--line-strong);
}
.pl-table td { padding: 8px 10px; border-bottom: 1px solid var(--line); }
.pl-table td:nth-child(2) { text-align: right; white-space: nowrap; width: 130px; }
.pl-table td:nth-child(3), .pl-table th:nth-child(3) { text-align: right; color: var(--muted); width: 90px; white-space: nowrap; }
.pl-section td {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--muted);
	background: var(--paper);
	padding: 6px 10px;
}
.pl-subtotal td { font-weight: 600; border-top: 1px solid var(--line-strong); }
/* rand de defalcare sub o linie ("of which ..."): indentat si mai sters, ca sa
   se vada ca descompune randul de deasupra, nu ca se adauga la el */
td.pl-indent { padding-left: 26px; color: var(--muted); }
/* varianta cu DOUA coloane de SUME (in/out), nu suma + nota: a treia coloana
   se aliniaza si se coloreaza ca a doua, nu ca o nota secundara */
.pl-table--inout td:nth-child(3), .pl-table--inout th:nth-child(3) { width: 130px; color: inherit; }

/* GHID PLIABIL in modale (<details> nativ, fara JS): ghidul de categorii din
   modalul de tranzactii. Nu se foloseste help_tip fiindca bubble-ul are
   max-width 260px, prea mic pentru o lista de 14 intrari. */
.tx-guide { margin: 0 0 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); }
.tx-guide > summary {
	cursor: pointer;
	padding: 8px 12px;
	font-size: 12px;
	font-weight: 600;
	color: var(--muted);
	list-style: none;
}
.tx-guide > summary::-webkit-details-marker { display: none; }
.tx-guide > summary::before { content: "? "; font-weight: 700; }
.tx-guide[open] > summary { border-bottom: 1px solid var(--line); }
.tx-guide dl { margin: 0; padding: 10px 12px; max-height: 300px; overflow-y: auto; }
.tx-guide dt { font-size: 12px; font-weight: 600; color: var(--ink); margin-top: 8px; }
.tx-guide dt:first-child { margin-top: 0; }
.tx-guide dd { margin: 2px 0 0; font-size: 12px; line-height: 1.5; color: var(--muted); }
.pl-margin td { background: var(--st-blue-bg); }
.pl-total td {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 16px;
	border-top: 2px solid var(--ink);
	border-bottom: none;
	padding-top: 12px;
}
.pl-total--pos td:nth-child(2) { color: var(--st-green); }
.pl-total--neg td:nth-child(2) { color: var(--st-red); }
.pl-notes { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.6; color: var(--ink); }
.pl-notes li { margin-bottom: 8px; }
.pl-est { font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--amber-deep); text-transform: uppercase; letter-spacing: .05em; margin-left: 4px; }
.pl-provisional {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	background: var(--amber-soft);
	border: 1px solid var(--amber);
	border-radius: 10px;
	padding: 12px 16px;
	margin-bottom: 16px;
	font-size: 13.5px;
	line-height: 1.5;
}
.pl-provisional i { color: var(--amber-deep); margin-top: 2px; }

/* ============================ ACTIVITY LOG =============================== */
.log-item {
	display: grid;
	grid-template-columns: 76px minmax(0, 1fr) 96px;
	gap: 10px;
	align-items: center;
	padding: 10px 14px;
	border-bottom: 1px solid var(--line);
}
.log-item:last-child { border-bottom: none; }
.log-when { display: flex; flex-direction: column; gap: 1px; }
.log-when strong { font-family: var(--font-display); font-weight: 600; font-size: 15px; font-variant-numeric: tabular-nums; }
.log-when span { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.log-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.log-desc { overflow-wrap: anywhere; }
.log-meta { font-size: 12px; color: var(--muted); }
.log-entity { color: var(--muted); }
a.log-entity:hover { color: var(--ink); text-decoration: underline; }
.log-badge { display: flex; justify-content: flex-end; }

@media only screen and (max-width: 768px) {
	.log-item {
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas:
			"when badge"
			"main main";
		row-gap: 6px;
	}
	.log-when { grid-area: when; flex-direction: row; align-items: baseline; gap: 6px; }
	.log-main { grid-area: main; }
	.log-badge { grid-area: badge; }
}

/* ========================== BOOKING VIEW ================================ */
.bv-when {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	margin-bottom: 12px;
	flex-wrap: wrap;
}
.bv-when i { color: var(--muted); }
.bv-when strong { font-family: var(--font-display); font-weight: 600; }

.bv-route {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 10px 12px;
	background: var(--paper);
	border-radius: 8px;
	margin-bottom: 14px;
}
.bv-route .t-stop { font-size: 13.5px; color: var(--ink); white-space: normal; overflow-wrap: anywhere; }

.bv-notes {
	background: var(--amber-soft);
	border-radius: 8px;
	padding: 10px 12px;
	font-size: 13.5px;
	margin: 6px 0 10px;
}

.bv-total {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-weight: 600;
	font-size: 17px;
	border-top: 1px solid var(--line);
	margin-top: 12px;
	padding-top: 10px;
	font-variant-numeric: tabular-nums;
}

.bv-tools { display: flex; gap: 4px; }
.bv-tools a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 8px;
	font-size: 17px;
	color: var(--muted);
	transition: background .12s, color .12s;
}
.bv-tools a:hover { background: var(--paper); color: var(--ink); }

/* ============================ DIVERSE UI ================================ */
.bd-name { font-size: 14px; color: var(--muted); font-weight: 600; }

.pagination select { padding: 6px 8px; color: var(--ink); background: white; border: 1px solid var(--line-strong); border-radius: 8px; font-family: var(--font-ui); }

.action-select {
	width: 100%;
	height: 40px;
	padding: 8px 10px;
	border-radius: 8px;
	margin: 6px 0;
	resize: vertical;
	background: white;
	font-size: 14px;
	font-family: var(--font-ui);
	border: 1px solid var(--line-strong);
	color: var(--ink);
}
.action-select:focus { border-color: var(--amber); outline: none; box-shadow: 0 0 0 3px var(--focus); }

.action-button {
	width: 100%;
	height: 36px;
	border-radius: 8px;
	margin: 6px 0;
	background: var(--ink);
	font-size: 14px;
	font-weight: 600;
	font-family: var(--font-ui);
	border: none;
	color: #FFFFFF;
	transition: background .15s;
}
.action-button:hover { background: #000000; }
.action-button:disabled { opacity: .45; cursor: not-allowed; }
.action-button:disabled:hover { background: var(--ink); }

.edit-booking-buttons { font-size: 18px; margin-right: 12px; }

.report-card { min-height: 186px; }

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll > table { min-width: 100%; }

/* buton generic (aceeași înfățișare ca butoanele din page-header, dar
   utilizabil oriunde) + varianta destructivă */
.btn {
	padding: 8px 14px;
	border-radius: 8px;
	border: 1px solid var(--line-strong);
	background: var(--card);
	color: var(--ink);
	font-size: 13.5px;
	font-weight: 500;
	transition: background .15s, border-color .15s;
}
.btn:hover { background: var(--paper); }
.btn--danger { color: var(--st-red); border-color: var(--st-red); }
.btn--danger:hover { background: var(--st-red-bg); }

.file-upload input[type="file"] { display: none; }
/* varianta inline (modalul de plată): buton + numele fișierului pe un rând */
.file-upload--inline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.upload-btn {
	background: var(--ink);
	color: #fff;
	padding: 8px 16px;
	border-radius: 8px;
	cursor: pointer;
	font-size: 14px;
	font-weight: 500;
	transition: background .15s;
}
.upload-btn:hover { background: #000000; }

/* ========================== TOOLTIP DE AJUTOR ============================ */
.help-tip {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 1px solid var(--line-strong);
	background: var(--card);
	color: var(--muted);
	font-size: 11px;
	font-weight: 600;
	font-family: var(--font-ui);
	cursor: help;
	margin-left: 6px;
	vertical-align: middle;
	flex-shrink: 0;
}
.help-tip::before { content: "?"; }

/* bubble-ul global (creat de tooltip.js pe <body>, fixed — nu poate fi
   tăiat de overflow-ul cardurilor) */
.tooltip-bubble {
	position: fixed;
	display: none;
	max-width: 260px;
	background: var(--night);
	color: #FFFFFF;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.5;
	padding: 9px 12px;
	border-radius: 8px;
	box-shadow: var(--shadow-md);
	z-index: 10000;
	text-align: left;
	pointer-events: none;
	white-space: normal;
}

/* listă lungă: scrollează în card, nu lungește coloana */
.scroll-y { max-height: 430px; overflow-y: auto; scrollbar-width: thin; }

/* ============================== DASHBOARD ================================ */
.page-header__date { color: var(--muted); font-size: 13px; }

/* "needs attention" — countere cu acțiune */
/* flex cu grow: rândurile se umplu ÎNTOTDEAUNA complet, fără celule goale */
.attn-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 20px;
}
.attn { flex: 1 1 220px; }
.attn {
	display: flex;
	align-items: center;
	gap: 12px;
	background: var(--card);
	border: 1px solid var(--line);
	border-left: 3px solid var(--st-grey);
	border-radius: 10px;
	padding: 12px 14px;
	box-shadow: var(--shadow-sm);
	transition: background .12s;
}
.attn:hover { background: #FAFBFC; }
.attn__num { font-family: var(--font-display); font-size: 24px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.attn__label { font-size: 12.5px; color: var(--muted); line-height: 1.35; }
.attn--red    { border-left-color: var(--st-red); }    .attn--red .attn__num    { color: var(--st-red); }
.attn--orange { border-left-color: var(--st-orange); } .attn--orange .attn__num { color: var(--st-orange); }
.attn--amber  { border-left-color: var(--amber-deep); }.attn--amber .attn__num  { color: var(--amber-deep); }
.attn--grey   { border-left-color: var(--st-grey); }   .attn--grey .attn__num   { color: var(--st-grey); }
.attn--blue   { border-left-color: var(--st-blue); }   .attn--blue .attn__num   { color: var(--st-blue); }

/* KPI */
.kpi-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 12px;
	margin-bottom: 20px;
}
.kpi { padding: 14px 16px; }
.kpi__label { font-size: 12.5px; color: var(--muted); margin-bottom: 6px; }
.kpi__value { font-family: var(--font-display); font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* grila principală a dashboard-ului */
.dash-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 20px; }
/* coloanele NU au voie să se umfle peste viewport (min-width:auto implicit) */
.dash-grid > * { min-width: 0; }
@media (max-width: 1000px) { .dash-grid { grid-template-columns: 1fr; } }

/* rând de cursă (azi / ultimele) — GRID cu coloane fixe: totul la linie
   (regula 11): oră | client+rută | status | șofer | preț */
.t-item {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr) 128px 132px;
	gap: 10px;
	align-items: center;
	padding: 11px 14px;
	border-bottom: 1px solid var(--line);
	transition: background .1s;
}
.t-item--simple { grid-template-columns: minmax(0, 1fr) 128px 96px; }
/* varianta pentru listele bookings: coloana "când" are dată + oră + countdown */
.t-item--book { grid-template-columns: 92px minmax(0, 1fr) 128px 132px}
/* confirmed: șoferul + mașina stau în coloana principală (lată) => fără coloana de șofer */
.t-item--dispatch { grid-template-columns: 92px minmax(0, 1fr) 128px 110px; }
.t-dispatchline { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 16px; min-width: 0; margin-top: 2px; }
/* iconița stă pe coloana bulinelor de la adrese, textul începe la același x (15px) */
.t-dispatchline .t-driver { min-width: 0; position: relative; padding-left: 15px; }
.t-dispatchline .t-driver > i:first-child { position: absolute; left: -2px; top: 50%; transform: translateY(-50%); }
.t-when { display: flex; flex-wrap: wrap; gap: 1px; min-width: 0; }
.t-when strong { font-family: var(--font-display); font-weight: 600; font-size: 18px; font-variant-numeric: tabular-nums; }
/* :not(.countdown): data e gri, dar chip-ul de countdown NU moștenește gri pe portocaliu */
.t-when span:not(.countdown) { font-size: 14px;  font-weight: 600; font-variant-numeric: tabular-nums; }
.t-fare .t-veh { display: block; font-weight: 400; font-size: 12px; color: var(--muted); }
.t-fare .eur { display: block; font-weight: 400; font-size: 12px; color: var(--muted); }
.t-name i { color: var(--amber-deep); font-size: 12px; margin-left: 4px; }
.t-item:last-child { border-bottom: none; }
.t-item:hover { background: #FAFBFC; }
.t-time { font-family: var(--font-display); font-weight: 600; font-size: 16px; font-variant-numeric: tabular-nums; }
.t-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.t-name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-route { font-size: 13.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* preluare/destinație: rânduri separate cu marcaj — chihlimbar = pickup,
   negru = destinație (aceeași semantică ca .bl-dot--from/--to) */
.t-route:has(.t-stop) { display: flex; flex-direction: column; gap: 2px; }
.t-stop {
	position: relative;
	padding-left: 15px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
}
.t-stop::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 50%;
	transform: translateY(-50%);
	width: 7px;
	height: 7px;
	border-radius: 50%;
}
.t-stop--from::before { background: var(--amber-deep); }
.t-stop--to::before { background: var(--ink); }
.t-status { display: flex; }
.t-status .badge { width: 100%; justify-content: center; }
.t-driver-cell { min-width: 0; }
.t-driver { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 5px; min-width: 0; }
.t-driver i { font-size: 11px; flex-shrink: 0; }
.t-driver-name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-driver--none { color: var(--st-orange); font-weight: 600; }
.t-fare { text-align: right; font-weight: 600; color: var(--st-green); font-variant-numeric: tabular-nums; }
.t-item--past { opacity: .55; }

/* vehicul în tabele: desktop "B 101 ALS · Mercedes E-Class", mobil modelul
   trece complet sub numărul de înmatriculare */
.v-model { color: var(--muted); white-space: nowrap; }
.v-model::before { content: "·"; margin: 0 6px; color: var(--faint); }
@media only screen and (max-width: 768px) {
	.v-model { display: block; white-space: normal; }
	.v-model::before { content: none; }
}

/* empty state generic (refolosibil în toate modulele) */
.empty-state { padding: 28px 16px; text-align: center; color: var(--muted); font-size: 13.5px; }

/* MOBIL (regula 7: una sub alta, nimic nu iese din view):
   oră + preț pe primul rând, nume, adresa COMPLETĂ (se rupe cu
   overflow-wrap), apoi status + șofer aliniate pe același rând */
@media only screen and (max-width: 768px) {
	.t-item,
	.t-item--simple,
	.t-item--book {
		/* minmax(0,...): track-urile nu se pot umfla peste container */
		grid-template-columns: minmax(0, 1fr) minmax(0, auto);
		grid-template-areas:
			"time fare"
			"main main"
			"status driver";
		row-gap: 6px;
		align-items: start;
	}
	.t-item--simple {
		grid-template-areas:
			"main main"
			"status fare";
	}
	/* confirmed nu are coloană de șofer - statusul ia tot rândul */
	.t-item--dispatch {
		grid-template-areas:
			"time fare"
			"main main"
			"status status";
	}
	.t-time { grid-area: time; }
	.t-when { grid-area: time; align-items: center; gap: 6px; }
	.t-fare { grid-area: fare; min-width: 0; align-self: center; text-align: right; }
	.t-main { grid-area: main; min-width: 0; }
	.t-status { min-width: 0; }
	.t-driver-cell { min-width: 0; max-width: 100%; }
	.t-name { white-space: normal; overflow-wrap: anywhere; }
	.t-route { white-space: normal; overflow-wrap: anywhere; }
	.t-stop { white-space: normal; overflow-wrap: anywhere; }
	.t-stop::before { top: 6px; transform: none; }
	.t-status { grid-area: status; }
	.t-status .badge { width: auto; }
	.attn { flex-basis: 100%; padding: 10px 14px; }
	.attn__num { font-size: 20px; }
	/* pe mobil NU există scroll în card — lista curge natural în pagină */
	.scroll-y { max-height: none; overflow-y: visible; }
}

/* =============================== CALENDAR =============================== */
.cal-toolbar {
	display: flex; align-items: center; gap: 12px;
	padding: 8px 12px; background: var(--card);
	border: 1px solid var(--line);
	border-radius: 10px;
	margin-bottom: 16px;
}
.cal-toolbar .cal-title { font-weight: 600; font-size: 16px; flex-grow: 1; text-align: center; font-family: var(--font-display); }
.cal-toolbar a { text-decoration: none; color: var(--ink); padding: 4px 10px; border-radius: 6px; }
.cal-toolbar a:hover { background: var(--paper); }
.cal-toolbar .cal-today, .cal-toolbar .cal-listview { border: 1px solid var(--line-strong); }

.cal-grid {
	display: grid; grid-template-columns: repeat(7, 1fr);
	gap: 1px; background: var(--line); border: 1px solid var(--line);
	border-radius: 10px; overflow: auto;
}
.cal-weekday {
	background: var(--paper); text-align: center; padding: 8px 0;
	font-size: 11px; font-weight: 600; color: var(--muted);
	text-transform: uppercase; letter-spacing: .05em;
}
.cal-day { background: var(--card); min-height: 110px; padding: 6px; display: flex; flex-direction: column; }
.cal-empty { background: #FAFBFC; }
/* zilele trecute se estompează - calendarul e pentru ce URMEAZĂ */
.cal-day--past { background: #FAFBFC; }
.cal-day--past .cal-daynum { color: var(--muted); }
.cal-day--past .cal-events { opacity: .55; }
.cal-today-cell { background: var(--amber-soft); box-shadow: inset 0 0 0 2px var(--amber); }
.cal-today-cell .cal-daynum {
	background: var(--amber); color: var(--night); border-radius: 50%;
	width: 24px; height: 24px; display: inline-flex;
	align-items: center; justify-content: center;
}
.cal-daynum { font-size: 13px; font-weight: 600; margin-bottom: 4px; font-variant-numeric: tabular-nums; }
.cal-events { display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
.cal-event {
	display: flex; gap: 4px; align-items: center;
	background: var(--st-blue-bg); color: var(--st-blue);
	padding: 2px 6px; border-radius: 4px;
	font-size: 11px; text-decoration: none;
	overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.cal-event:hover { background: var(--st-blue); color: #fff; }
.cal-time { font-weight: 600; font-variant-numeric: tabular-nums; }
.cal-name { overflow: hidden; text-overflow: ellipsis; }

.cal-event-assigned { background: var(--st-green-bg); color: var(--st-green); }
.cal-event-assigned:hover { background: var(--st-green); color: #fff; }

.cal-event-conflict { background: var(--st-red-bg) !important; color: var(--st-red) !important; }
.cal-event-conflict:hover { background: var(--st-red) !important; color: #fff !important; }

.cal-event-completed { background: var(--st-slate-bg) !important; color: var(--st-slate) !important; }
.cal-event-completed:hover { background: var(--st-slate) !important; color: #fff !important; }

/* legenda de sub calendar */
.cal-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin-top: 10px; font-size: 12px; }
.cal-legend i { font-size: 11px; margin-right: 3px; }
.cal-dot {
	display: inline-block; width: 10px; height: 10px;
	border-radius: 3px; margin-right: 5px; vertical-align: -1px;
	border: 1px solid transparent;
}
.cal-dot--open     { background: var(--st-blue-bg);  border-color: var(--st-blue); }
.cal-dot--assigned { background: var(--st-green-bg); border-color: var(--st-green); }
.cal-dot--conflict { background: var(--st-red-bg);   border-color: var(--st-red); }
.cal-dot--done     { background: var(--st-slate-bg); border-color: var(--st-slate); }

@media (max-width: 768px) {
	/* grila de 7 zile NU încape în 390px: scroll orizontal, nu coloane tăiate */
	.cal-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
	.cal-grid { min-width: 640px; }
	.cal-day { min-height: 70px; font-size: 10px; }
	.cal-name { display: none; }
}

/* ========================== RESPONSIVE MOBIL ============================= */
@media only screen and (max-width: 768px) {
	/* topnav: toggle | brand | strip (scrollabil) | logout — nimic nu se suprapune */
	.nav-toggle { display: flex; align-items: center; }
	.brand {
		width: auto;
		min-width: 0;
		background: none;
		color: var(--ink);
		padding: 0 4px 0 0;
		font-size: 18px;
		letter-spacing: .1em;
	}
	.brand::after { color: var(--amber-deep); }
	.topnav-user { display: none; }
	.pt-label { display: none; }

	/* chips compacte: doar numărul colorat */
	.dispatch-strip { margin-left: 4px; gap: 6px; }
	.dispatch-chip { padding: 2px; border: none; }
	.dispatch-chip:hover { background: none; }
	.dispatch-chip .dc-label { display: none; }

	/* sidenav off-canvas + backdrop (vezi .nav-backdrop) */
	.sidenav { left: -260px; top: 60px; box-shadow: var(--shadow-md); }
	body.nav-open .sidenav { left: 0; }

	.container { width: 100%; border: 0; border-radius: 0; margin: 10px 0 10px 0; padding: 2px 8px; }
	.page-header { margin: 0 0 10px 0; padding: 12px 8px; flex-wrap: wrap; gap: 8px; }
	.tabs { display: flex; margin: 0 0 16px 0; }
	.booking-list .arrow { display: none; }
	.report-card { min-height: auto; }
}

/* ---------- Invoice view: lista de actiuni etichetate ---------- */
.iv-actions { display: flex; flex-direction: column; gap: 2px; }
.iv-actions a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 10px;
	border-radius: 8px;
	color: var(--ink);
	text-decoration: none;
	font-size: 14px;
}
.iv-actions a:hover { background: var(--paper); }
.iv-actions a i { width: 18px; text-align: center; color: var(--muted); }
.iv-actions a[style*="--st-green"] i { color: inherit; }

/* pe mobil, sumarul si actiunile inaintea PDF-ului (iframe-ul e cat un ecran) */
@media only screen and (max-width: 768px) {
	.iv-side { order: -1; }
	.iv-pdf iframe { height: 80vh; }
}

/* ---------- Payments: directie + sume semnate ---------- */
.pmt-dir { font-size: 16px; opacity: .85; }
.pmt-dir--in { color: var(--st-green); }
.pmt-dir--out { color: var(--st-red); }
.pmt-amount--in { color: var(--st-green); font-weight: 600; }
.pmt-amount--out { color: var(--st-red); font-weight: 600; }
.pmt-delete { background: none; border: none; cursor: pointer; color: var(--muted); padding: 2px 4px; }
.pmt-delete:hover { color: var(--st-red); }

/* eticheta documentului dinaintea badge-ului de expirare: latime fixa,
   ca badge-urile sa se alinieze pe coloana (regula 21) */
.doc-label {
	display: inline-block;
	width: 60px;
	font-size: 12px;
	color: var(--muted);
}

/* ---------- Reviews: card de recenzie + stele + actiuni rapide ---------- */
.rv-item { padding: 14px 16px; border-bottom: 1px solid var(--line); }
.rv-item:last-child { border-bottom: none; }
.rv-star { color: var(--line-strong); margin-right: 2px; font-size: 13px; }
.rv-star--on { color: var(--amber); }
.rv-comment { margin-top: 8px; color: var(--muted); line-height: 1.5; }
.quick-actions .qa {
	background: none; border: 1px solid var(--line-strong); border-radius: 8px;
	padding: 5px 9px; color: var(--muted); cursor: pointer;
}
.quick-actions .qa:hover { color: var(--ink); border-color: var(--ink); }
.quick-actions .qa.disabled { opacity: .35; cursor: default; }
.quick-actions .qa[data-action="delete"]:hover { color: var(--st-red); border-color: var(--st-red); }

/* confirmed: clientul notificat (mail cu datele soferului) + masina trimisa */
.t-notified { color: var(--st-green); }
.t-vehline { font-variant-numeric: tabular-nums; }

/* ============================== BANKING ================================= */
.cs-color-orange { color: var(--st-orange); }
.bk-row {
	display: grid;
	grid-template-columns: 110px minmax(0, 1fr) 150px 128px 190px;
	gap: 4px 10px;
	align-items: center;
	padding: 11px 14px;
	border-bottom: 1px solid var(--line);
}
.bk-row:last-child { border-bottom: none; }
.bk-when { display: flex; flex-direction: column; gap: 1px; font-variant-numeric: tabular-nums; }
.bk-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bk-type { font-weight: 500; font-size: 13px; }
.bk-desc { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-sug { font-size: 12px; color: var(--amber-deep); }
.bk-sug i { margin-right: 3px; }
.bk-sug--done { color: var(--muted); }
.bk-sug--done a { font-weight: 600; }
.bk-amount { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bk-amount .cs-font-12 { display: block; font-weight: 400; }
.bk-in { color: var(--st-green); }
.bk-out { color: var(--st-red); }
.bk-status { display: flex; }
.bk-status .badge { width: 100%; justify-content: center; }
.bk-actions { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.bk-panel { grid-column: 1 / -1; background: var(--paper); border-radius: 8px; padding: 10px 12px; }
/* grupurile de acțiuni din panoul de match: fiecare cutie = o singură decizie */
.bk-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; align-items: stretch; }
.bk-act {
	display: flex; flex-direction: column; gap: 6px;
	background: var(--card); border: 1px solid var(--line-strong);
	border-radius: 8px; padding: 8px 10px;
}
.bk-act__label { font-size: 11.5px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; display: flex; align-items: center; gap: 4px; }
.bk-act form { display: flex; align-items: center; gap: 6px; }

/* fișele conturilor interne (Banking -> Internal accounts) */
/* .box nu are padding propriu - headerul secțiunii și-l aduce singur */
.il-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 14px 16px 4px; }
.il-head--sub { padding-top: 20px; }
.il-note { padding: 0 16px 8px; }
.il-year {
	font-size: 12px; color: var(--muted);
	background: var(--paper); border: 1px solid var(--line);
	border-radius: 999px; padding: 3px 10px;
	font-variant-numeric: tabular-nums; white-space: nowrap;
}
.il-year .price { font-weight: 600; color: var(--ink); }
.il-empty { padding: 6px 16px 14px; color: var(--muted); font-size: 13px; }
.il-del { background: transparent; border: 0; padding: 4px 6px; cursor: pointer; color: var(--muted); transition: color .12s; }
.il-del:hover { color: var(--st-red); }

/* rândurile fișei - grid ca la bookings/logs, NU <table> (mobilul le restrânge) */
.il-hd, .il-item {
	display: grid;
	grid-template-columns: 92px 64px minmax(0, 1fr) 150px 32px;
	gap: 10px;
	align-items: center;
	padding: 10px 16px;
}
.il-hd--pay, .il-item--pay { grid-template-columns: 92px minmax(0, 1fr) 150px; }
.il-hd {
	padding-bottom: 6px;
	font-size: 11px; font-weight: 600;
	text-transform: uppercase; letter-spacing: .05em;
	color: var(--muted);
}
.il-item { border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.il-item:last-child { border-bottom: none; }
.il-item:hover { background: #FAFBFC; }
.il-date { white-space: nowrap; }
.il-det { min-width: 0; overflow-wrap: anywhere; }
.il-amt { text-align: right; white-space: nowrap; font-weight: 600; }
.il-x { text-align: right; }

/* carnetul mașinii (vehicles/view -> Service log) - grid ca il-item */
.vl-hd, .vl-item {
	display: grid;
	grid-template-columns: 100px 110px minmax(0, 1fr) 120px 40px;
	gap: 10px;
	align-items: center;
	padding: 10px 16px;
}
.vl-hd {
	padding-bottom: 6px;
	font-size: 11px; font-weight: 600;
	text-transform: uppercase; letter-spacing: .05em;
	color: var(--muted);
}
.vl-item { border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.vl-item:last-child { border-bottom: none; }
.vl-item:hover { background: #FAFBFC; }
.vl-date { white-space: nowrap; }
.vl-km { white-space: nowrap; }
.vl-det { min-width: 0; overflow-wrap: anywhere; }
.vl-cost { text-align: right; white-space: nowrap; font-weight: 600; }
.vl-x { text-align: right; }
/* varianta read-only (pagina vehiculului, ultimele 5) - fără coloana de acțiuni */
.vl-hd--ro, .vl-item--ro { grid-template-columns: 100px 110px minmax(0, 1fr) 120px; }
/* footer cu butonul spre carnetul complet */
.vl-more { padding: 12px 16px; border-top: 1px solid var(--line); }

@media only screen and (max-width: 768px) {
	/* regula 7: una sub alta, nimic nu iese din view */
	.page-header { flex-wrap: wrap; }
	.il-hd { display: none; }
	.il-item, .il-item--pay {
		grid-template-columns: minmax(0, auto) minmax(0, auto) minmax(0, 1fr) auto;
		grid-template-areas:
			"date badge amt x"
			"det  det   det det";
		row-gap: 6px;
	}
	.il-date { grid-area: date; font-weight: 600; }
	.il-badge { grid-area: badge; }
	.il-amt { grid-area: amt; }
	.il-x { grid-area: x; }
	.il-det { grid-area: det; }
	.il-settle .cs-input { width: 100% !important; flex: 1 1 100%; }
	.il-settle .cv-btn { flex: 1; justify-content: center; }

	/* carnetul mașinii: form full-width + rânduri pe arii */
	.vl-form .cs-input { width: 100% !important; flex: 1 1 100%; }
	.vl-form .vl-oil { flex: 1 1 100%; }
	.vl-form .cv-btn { flex: 1; justify-content: center; }
	.vl-hd { display: none; }
	.vl-item {
		grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto;
		grid-template-areas:
			"date km  x"
			"det  det det"
			"cost cost cost";
		row-gap: 6px;
	}
	.vl-date { grid-area: date; font-weight: 600; }
	.vl-km { grid-area: km; }
	.vl-det { grid-area: det; }
	.vl-cost { grid-area: cost; text-align: left; }
	.vl-x { grid-area: x; }

	/* filtrele din coadă: una sub alta, pe toată lățimea */
	.bk-filterbar { align-items: stretch; flex-direction: column; }
	.bk-filterbar .cs-input { width: 100% !important; }
	.bk-filterbar .cv-btn { justify-content: center; }
	.bk-sum { text-align: left; }

	/* cutiile de decizie din panoul de match: una sub alta */
	.bk-acts { flex-direction: column; }
	.bk-act form { flex-wrap: wrap; }
	.bk-act .cs-input { flex: 1 1 100%; width: 100% !important; }
	.bk-act .cv-btn { flex: 1; justify-content: center; }
}

/* ghidul Banking: buton plutitor + modal cu RO/EN */
.bkh-fab {
	position: fixed; right: 18px; bottom: 18px; z-index: 900;
	display: inline-flex; align-items: center; gap: 7px;
	background: var(--ink); color: #fff; border: 0; border-radius: 999px;
	padding: 10px 16px; font-family: var(--font-ui); font-size: 13px; font-weight: 600;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .25); cursor: pointer;
}
.bkh-fab:hover { background: #000; }
.bkh-overlay {
	position: fixed; inset: 0; z-index: 1000;
	background: rgba(21, 24, 30, .55);
	display: flex; align-items: center; justify-content: center; padding: 18px;
}
.bkh-modal {
	background: var(--card); border-radius: 12px; box-shadow: var(--shadow-sm);
	width: 100%; max-width: 680px; max-height: 86vh;
	display: flex; flex-direction: column;
}
.bkh-top {
	display: flex; align-items: center; gap: 10px;
	padding: 14px 16px; border-bottom: 1px solid var(--line);
}
.bkh-title { font-family: var(--font-display); font-size: 17px; font-weight: 600; flex: 1; }
.bkh-title i { color: var(--amber-deep); margin-right: 4px; }
.bkh-langs { display: flex; gap: 4px; }
.bkh-lang {
	background: var(--paper); border: 1px solid var(--line-strong); border-radius: 8px;
	padding: 5px 10px; font-size: 12px; font-weight: 600; cursor: pointer; color: var(--muted);
}
.bkh-lang--on { background: var(--ink); border-color: var(--ink); color: #fff; }
.bkh-close { background: transparent; border: 0; font-size: 17px; color: var(--muted); cursor: pointer; padding: 4px 6px; }
.bkh-close:hover { color: var(--ink); }
.bkh-body { overflow-y: auto; padding: 4px 18px 18px; }
.bkh-sec h4 { font-family: var(--font-display); font-size: 14.5px; margin: 16px 0 6px; }
.bkh-sec p, .bkh-sec li { font-size: 13px; line-height: 1.55; color: var(--ink); }
.bkh-sec ul { margin: 6px 0; padding-left: 18px; }
.bkh-sec li { margin-bottom: 5px; }
@media only screen and (max-width: 768px) {
	/* pe telefon: foaie de jos, pe toată lățimea */
	.bkh-overlay { align-items: flex-end; padding: 0; }
	.bkh-modal { max-width: none; max-height: 88vh; border-radius: 12px 12px 0 0; }
}
.bk-candidates { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: var(--muted); }
.bk-cand {
	text-align: left; background: var(--card);
	border: 1px solid var(--line-strong); border-radius: 8px;
	padding: 7px 10px; cursor: pointer;
	font-size: 12.5px; font-family: var(--font-ui); color: var(--ink);
}
.bk-cand:hover { border-color: var(--amber); background: var(--amber-soft); }
/* split match: alocările salvate + candidații cu sumă/fee editabile */
.bk-split-row { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 12.5px; }
.bk-split-row .price { margin-left: auto; white-space: nowrap; font-weight: 600; }
.bk-scand {
	display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
	background: var(--card); border: 1px solid var(--line-strong);
	border-radius: 8px; padding: 6px 10px;
}
.bk-scand__label { font-size: 12.5px; color: var(--ink); min-width: 0; flex: 1 1 240px; overflow-wrap: anywhere; }
@media only screen and (max-width: 768px) {
	/* arii EXPLICITE, fix ca la t-item (oră+PREȚ pe primul rând): data
	   sus-stânga, SUMA sus-dreapta, descrierea pe toată lățimea, statusul
	   jos-stânga, acțiunile jos-dreapta - fără arii, auto-plasarea arunca
	   suma și Match spre mijlocul cardului */
	.bk-row {
		grid-template-columns: minmax(0, 1fr) minmax(0, auto);
		grid-template-areas:
			"when   amount"
			"main   main"
			"status actions";
		row-gap: 8px;
	}
	.bk-when { grid-area: when; flex-direction: row; gap: 8px; align-items: baseline; }
	.bk-main { grid-area: main; }
	.bk-amount { grid-area: amount; }
	.bk-amount .cs-font-12 { display: inline; margin-left: 6px; }
	.bk-status { grid-area: status; justify-self: start; }
	.bk-status .badge { width: auto; }
	.bk-actions { grid-area: actions; }
	/* pe mobil descrierea se RUPE și se citește întreagă (ca adresele la
	   bookings) - ellipsis-ul e doar pentru desktop, unde e loc pe un rând */
	.bk-desc { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
	.bk-status { justify-self: start; }
	.bk-actions { justify-content: flex-end; }
}