/* ---------------------------------------------------------------------------
 * Bootstrap 5 plugin & legacy-class override sheet.
 *
 * This file contains:
 *   1. Aliases for BS3 class names that legacy JS plugins (bootbox, etc.)
 *      still generate.
 *   2. Shims for Limitless theme utility classes (.text-semibold,
 *      .position-right, .content-divider, .page-container, etc.) that are
 *      still present in our markup but no longer defined by core.css /
 *      components.css.
 *   3. Plugin alignment patches (select2, chosen).
 *
 * Loaded AFTER bootstrap.min.css in header.php / index.php / index_2fa.php /
 * challenge.php.
 * -------------------------------------------------------------------------- */


/* ------- BS3 class aliases (for plugin-generated HTML we don't control) --- */

/* bootbox.js still emits .btn-default for its Cancel buttons. Map it to BS5
 * btn-secondary's visual treatment without changing the class attribute. */
.btn-default {
	color: #fff;
	background-color: #6c757d;
	border-color: #6c757d;
}
.btn-default:hover,
.btn-default:focus {
	color: #fff;
	background-color: #5c636a;
	border-color: #565e64;
}

/* BS3-style close button ("×" inside <button class="close">) sometimes shows
 * up in plugin output. Keep it functional and looking close-to-BS5. */
.close {
	float: right;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1;
	color: #000;
	opacity: 0.5;
	background: none;
	border: 0;
	padding: 0.25rem;
}
.close:hover {
	opacity: 0.75;
}

/* BS3 label inline-tag. Treat anything still emitted as `.label` as a badge. */
.label {
	display: inline-block;
	padding: 0.35em 0.65em;
	font-size: 0.75em;
	font-weight: 700;
	line-height: 1;
	color: #fff;
	text-align: center;
	white-space: nowrap;
	vertical-align: baseline;
	border-radius: 0.375rem;
	background-color: #6c757d;
}


/* ------- Limitless utility shims (used throughout the codebase) ---------- */

.text-semibold {
	font-weight: 500;
}
.text-bold {
	font-weight: 700;
}
.text-regular {
	font-weight: 400;
}

.position-right {
	margin-left: 7px;
}
.position-left {
	margin-right: 7px;
}

.content-divider {
	text-align: center;
	position: relative;
	z-index: 1;
	margin-bottom: 15px;
}
.content-divider > span {
	background-color: #f5f5f5;
	display: inline-block;
	padding-left: 12px;
	padding-right: 12px;
}
.content-divider:before {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	height: 1px;
	background-color: #ddd;
	z-index: -1;
}

.content-group {
	margin-bottom: 20px;
}

.has-feedback-left .form-control {
	padding-left: 36px;
}


/* ------- Login page chrome (Limitless .login-container) ------------------ */

body.login-container {
	background-color: #f5f5f5;
}
.login-container .page-container {
	padding-top: 40px;
}
.login-container .login-form {
	width: 320px;
	margin: 0 auto 20px auto;
}
@media (max-width: 480px) {
	.login-container .login-form {
		width: 100%;
	}
}


/* ------- Topbar: white logo block + dark navbar to its right ------------- */

/* Topbar background matches the navbar's dark colour. The logo sits inside
 * a white block; everything else in the topbar (including the area that
 * appears beside the logo when the mobile menu opens) inherits the dark
 * navbar colour rather than stretching the white logo block down. */
.tpark-topbar {
	background-color: #212529; /* matches Bootstrap .bg-dark */
	position: relative;
}
.tpark-logo {
	display: inline-flex;
	align-items: center;
	padding: 4px 14px;
	background-color: #fff;
	flex-shrink: 0;
	text-decoration: none;
	align-self: flex-start; /* don't stretch when the collapsed menu opens */
}
.tpark-logo img {
	height: 40px;
	display: block;
}
/* Keep menu links on one line — without nowrap, "Utilizatori Bip" wraps to
 * two lines when the navbar is cramped (e.g. ~1200–1300 px viewport). */
.tpark-topbar .navbar-nav .nav-link {
	white-space: nowrap;
}


/* ------- Logged-in layout chrome ----------------------------------------- */

.page-container,
.page-content,
.content-wrapper,
.content {
	display: block;
}
.content {
	padding: 20px;
}
/* The page-header heading is hoisted into the top navbar by header.php's
 * inline script, so we hide the in-page heading container to reclaim the
 * vertical space. We keep .page-header itself visible because some pages
 * render alert messages alongside the heading inside it. */
.page-header-content {
	display: none;
}
.page-header {
	margin: 0;
	padding: 0;
}

/* Page title hoisted into the dark navbar. Anchored to the viewport center
 * (via .tpark-topbar's positioning context) rather than the flex space
 * between the menus, so it reads as a true page heading. Only shown at
 * xxl+ widths where there's actual room beside the menu items + right-side
 * widgets; at narrower widths it would collide with Status sistem / Suport,
 * and the browser tab title already carries the page name. */
.tpark-page-title {
	display: none;
}
@media (min-width: 1400px) {
	.tpark-page-title {
		display: block;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		color: #fff;
		font-weight: 700;
		font-size: 1.05rem;
		letter-spacing: 0.01em;
		padding: 0 1rem;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		max-width: 32vw;
		pointer-events: none;
		z-index: 1;
	}

	/* Collision fallback: when the menu items (or the right-side widgets) grow
	 * wide enough to reach the centered title, JS adds .is-notched and we drop
	 * the title into a small tab that hangs just below the navbar, clear of the
	 * menu. Only the horizontal position is left untouched, so the JS overlap
	 * measurement stays stable across states (no flicker). */
	.tpark-page-title.is-notched {
		top: 100%;
		transform: translate(-50%, 0);
		max-width: 50vw;
		background-color: #212529; /* matches .tpark-topbar */
		padding: 3px 18px 5px;
		border-radius: 0 0 9px 9px;
		box-shadow: 0 5px 6px -3px rgba(0, 0, 0, 0.25);
		/* Below Bootstrap's dropdown menus (--bs-dropdown-zindex: 1000) so an
		 * open submenu renders over the notch tab, but still above page content. */
		z-index: 999;
	}
}


/* Right-side topbar widgets (Status sistem + Suport). Visible on every page
 * via header.php; hidden under lg breakpoint where the navbar collapses. */
.tpark-topbar-widgets {
	gap: 0.5rem;
	margin-right: 0.5rem;
}
.tpark-widget {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.25rem 0.65rem;
	background-color: #4caf50;
	color: #fff;
	border-radius: 4px;
	line-height: 1.15;
	white-space: nowrap;
}
.tpark-widget-icon {
	font-size: 1.15rem;
	flex-shrink: 0;
}
.tpark-widget-text {
	display: flex;
	flex-direction: column;
}
.tpark-widget-title {
	font-weight: 600;
	font-size: 0.78rem;
}
.tpark-widget-sub {
	opacity: 0.92;
	font-size: 0.7rem;
}
/* Status-state colour variants applied by the AJAX poll. */
.tpark-widget-status.is-info { background-color: #2196f3; }
.tpark-widget-status.is-warn { background-color: #ff9800; }
.tpark-widget-status.is-bad  { background-color: #f44336; }
.tpark-page-title:empty {
	display: none !important;
}


/* ------- Plugin alignment with BS5 form controls ------------------------- */

/* Select2 v3 container height doesn't match BS5 form-control height. */
.select2-container .select2-choice {
	height: calc(1.5em + 0.75rem + 2px);
	padding: 0.375rem 0.75rem;
	line-height: 1.5;
	border: 1px solid #ced4da;
	border-radius: 0.375rem;
}

/* Chosen single-select container height alignment. */
.chosen-container-single .chosen-single {
	height: calc(1.5em + 0.75rem + 2px);
	line-height: calc(1.5em + 0.75rem);
	border: 1px solid #ced4da;
	border-radius: 0.375rem;
	box-shadow: none;
	background: #fff;
}

/* Bootstrap-datepicker dropdown sits inside BS5 — preserve its own border. */
.datepicker.dropdown-menu {
	padding: 4px;
}

/* iCheck wraps inputs in custom DOM — make sure its label text stays inline
 * inside BS5 .form-check (we didn't migrate .form-check structure since the
 * jQuery plugin manages its own DOM). */
.icheckbox_square-blue + label,
.iradio_square-blue + label {
	display: inline-block;
	margin-left: 6px;
	vertical-align: middle;
}


/* ------- Misc legacy class shims ----------------------------------------- */

/* .alert-bordered (Limitless) — used in adminguid / notificari for alerts. */
.alert-bordered {
	border-width: 2px;
}

/* .retina-ready was a no-op marker class for image src-swapping — keep as
 * inline-block so the wrapper height matches. */
.retina-ready {
	display: inline-block;
}

/* Heavy-traffic indicator chrome used in stats.php cards. */
.bg-danger-700 {
	color: #fff;
	background-color: #c62828;
}


/* ------- Dashboard card chrome (stats.php) ------------------------------- *
 * Cards use a coloured .card-header (bg-success / bg-primary / bg-danger);
 * heading-elements (date stamp, collapse chevron) need to sit at the right
 * edge of that header. Limitless used to do this via `position: absolute`
 * on `.heading-elements`; we keep the same effect with flexbox. */
.card-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
.card-header .heading-elements {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 8px;
}
.card-header .heading-elements .icons-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 8px;
}
.card-header .heading-elements .icons-list a {
	color: inherit;
	text-decoration: none;
	opacity: 0.85;
}
.card-header .heading-elements .icons-list a:hover {
	opacity: 1;
}
.card-header .heading-elements .icons-list a .rotate-180 {
	display: inline-block;
	transform: rotate(180deg);
	transition: transform 0.2s ease;
}

/* Statistici astăzi stat cells: icon + number on one row, label below. */
.current-day-statistics h5 {
	margin: 0;
	font-size: 1.05rem;
}
.current-day-statistics h5 i {
	margin-right: 6px;
	color: #607D8B; /* Limitless text-slate fallback */
}
.current-day-statistics .text-muted {
	font-size: 0.78rem;
}
/* Between lg and xxl the Statistici card sits in col-lg-4 (~330–460px wide).
 * Four cells at 25% each squeeze the labels "valoare tranz. cu TVA" into
 * three lines — too cramped. Drop to 2-up there. xxl+ gets enough room
 * for 4-up; below lg the card is full-width so 4-up is fine too. */
@media (min-width: 992px) and (max-width: 1399.98px) {
	.current-day-statistics .col-md-3 {
		flex: 0 0 50%;
		max-width: 50%;
		margin-bottom: 8px;
	}
}

/* ------- Result tables: zebra-striped rows ------------------------------ *
 * Legacy code paints alternating <tr bgcolor="#ffffff"/"#f5f5f5"> manually;
 * HTML bgcolor is a presentational hint with the lowest CSS priority, so
 * a single-selector CSS rule overrides it. We target .card .table so this
 * applies only to result/data tables (not the layout tables a few legacy
 * report pages still use). */
.card .table > tbody > tr {
	background-color: #fff;
}
.card .table > tbody > tr:nth-of-type(odd) {
	background-color: #f0f2f5;
}
.card .table-hover > tbody > tr:hover {
	background-color: #dde2e7;
}
/* Make sure cells inherit the row background instead of an opaque white
 * that would mask the stripe. */
.card .table > tbody > tr > td {
	background-color: transparent;
}


/* "Parcari active acum" footer line — keep label and badge on one row. */
.current-active-parking {
	display: flex;
	align-items: center;
	gap: 8px;
}
.current-active-parking .badge {
	margin-left: auto;
}


/* ------- Filter bar (grid-snapped filter row used on report pages) ------- *
 * Pattern ported from C:\work2\monitor. The form sits as a single horizontal
 * bar above the result table:
 *   .filter-bar
 *     .filter-fields  — grid of fixed-width cells, inputs snap to the grid
 *       .ff           — one filter (label + control), spans 1 grid cell
 *       .ff-2 / ff-3  — explicit span overrides
 *       .ff-auto      — DB-driven <select>; js/filter-bar.js measures the
 *                       longest option text and sets ff-1 / ff-2 / ff-3.
 *     .filter-actions — buttons, always flush right (submit is last).
 * The base cell is 10rem so a 10–11 char date or 8 char time input lives in a
 * single cell with breathing room. Multi-input groups (date + time) span 2.
 */
.filter-bar {
	/* Two-row grid: filter-fields top-left, filter-actions top-right,
	 * optional .filter-bar-extras spanning the full width on row 2.
	 * Pages without extras simply render an empty row 2 with no height.
	 * --ff-track (1.15rem ≈ 18.4 px) + 2 px column-gap puts a default
	 * .ff at ~120 px — enough for "01/05/2026" plus the calendar icon. */
	--ff-track: 1.15rem;
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-rows: auto auto;
	gap: 4px 12px;
	align-items: start;
	width: 100%;
	box-sizing: border-box;
	background: #fff;
	border: 1px solid #e0e0e0;
	border-radius: 5px;
	padding: 8px 12px;
	margin-bottom: 10px;
}
.filter-bar .filter-fields {
	grid-column: 1;
	grid-row: 1;
	display: grid;
	grid-template-columns: repeat(auto-fill, var(--ff-track));
	grid-auto-flow: row dense; /* pack narrower cells into gaps left by ff-2/ff-3 */
	gap: 4px 2px;             /* small column-gap keeps cells distinct without bloating each span */
	align-items: end;
	min-width: 0;
}
.filter-bar .filter-bar-extras {
	grid-column: 1 / -1;
	grid-row: 2;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 18px;
	padding-top: 4px;
	border-top: 1px solid #f0f0f0;
	margin-top: 4px;
}
.filter-bar .filter-bar-extras .ff-toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
	font-size: 0.82rem;
}
.filter-bar .filter-bar-extras .ff-toggle label {
	margin: 0;
	cursor: pointer;
}
.filter-bar .filter-bar-extras .ff-toggle input[type="checkbox"] {
	margin: 0;
}
.filter-bar .ff {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	grid-column: span 6;      /* 6×1.25rem + 5×4px gaps ≈ 140px usable cell */
}
.filter-bar .ff-2 { grid-column: span 12; }
.filter-bar .ff-3 { grid-column: span 18; }
.filter-bar .ff-4 { grid-column: span 24; }
.filter-bar .ff-tight  { grid-column: span 4; }  /* 5rem  ≈ 8 chars (e.g. Curs) */
.filter-bar .ff-narrow { grid-column: span 3; }  /* 3.75rem ≈ 6 chars (e.g. TVA %) */
.filter-bar .ff > label {
	font-size: 0.75rem;
	font-weight: 500;
	color: #555;
	margin: 0;
	white-space: nowrap;
}
/* Label row that also carries a small modifier (e.g. an "exact match"
 * checkbox that only affects this field). Used in place of `<label>` so
 * the field title and the modifier share the cell's first row. */
.filter-bar .ff .ff-label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.75rem;
	line-height: 1.4;
}
.filter-bar .ff .ff-label > label {
	font-weight: 500;
	color: #555;
	margin: 0;
	white-space: nowrap;
}
.filter-bar .ff .ff-label .ff-label-extra {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-weight: 400;
	color: #777;
}
.filter-bar .ff .ff-label .ff-label-extra input[type="checkbox"] {
	margin: 0;
}
.filter-bar .ff .ff-label .ff-label-extra label {
	margin: 0;
	white-space: nowrap;
	font-weight: 400;
	color: #777;
}
.filter-bar .ff .form-control,
.filter-bar .ff .form-select {
	font-size: 0.82rem;
	width: 100%;
	min-width: 0;
	padding: 0.25rem 0.5rem;
	height: auto;
	line-height: 1.4;
}
.filter-bar .ff .input-group {
	flex-wrap: nowrap;
}
.filter-bar .ff .input-group .input-group-text {
	padding: 0.25rem 0.45rem;
	font-size: 0.82rem;
}
.filter-bar .ff .input-group .form-control {
	min-width: 0;
}
/* Inline checkbox aligned next to its label. */
.filter-bar .ff-check {
	flex-direction: row;
	align-items: center;
	gap: 6px;
	padding-bottom: 4px;
}
.filter-bar .ff-check input[type="checkbox"] {
	margin: 0;
}
.filter-bar .ff-check > label {
	margin: 0;
}
/* Right-aligned button column. padding-top skips label + gap so the buttons
 * baseline-align with the input row, matching monitor's filter bar. */
.filter-bar .filter-actions {
	grid-column: 2;
	grid-row: 1;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 4px;
	align-items: flex-start;
	padding-top: 19px;
}
.filter-bar .filter-actions .btn {
	white-space: nowrap;
}


/* ------- jQuery UI datepicker core layout patch -------------------------- *
 * css/plugins/jquery-ui/smoothness/jquery-ui.css (v1.10) ships only the
 * multi-month and RTL datepicker rules — the base layout rules for the
 * single-month popup (header, prev/next positioning, title centering,
 * calendar grid) are missing. Without these, the popup renders with the
 * prev/next arrows stacked above an oversized title. Restoring the 1.10
 * defaults verbatim. */
.ui-datepicker {
	width: 17em;
	padding: .2em .2em 0;
	display: none;
}
.ui-datepicker .ui-datepicker-header {
	position: relative;
	padding: .2em 0;
}
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
	position: absolute;
	top: 2px;
	width: 1.8em;
	height: 1.8em;
}
.ui-datepicker .ui-datepicker-prev-hover,
.ui-datepicker .ui-datepicker-next-hover {
	top: 1px;
}
.ui-datepicker .ui-datepicker-prev {
	left: 2px;
}
.ui-datepicker .ui-datepicker-next {
	right: 2px;
}
.ui-datepicker .ui-datepicker-prev-hover {
	left: 1px;
}
.ui-datepicker .ui-datepicker-next-hover {
	right: 1px;
}
.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
	display: block;
	position: absolute;
	left: 50%;
	margin-left: -8px;
	top: 50%;
	margin-top: -8px;
}
.ui-datepicker .ui-datepicker-title {
	margin: 0 2.3em;
	line-height: 1.8em;
	text-align: center;
	font-size: 1rem;
	font-weight: 600;
}
.ui-datepicker .ui-datepicker-title select {
	font-size: 1em;
	margin: 1px 0;
}
.ui-datepicker select.ui-datepicker-month-year {
	width: 100%;
}
.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
	width: 49%;
}
.ui-datepicker table {
	width: 100%;
	font-size: .9em;
	border-collapse: collapse;
	margin: 0 0 .4em;
}
.ui-datepicker th {
	padding: .5em .3em;
	text-align: center;
	font-weight: 600;
	border: 0;
}
.ui-datepicker td {
	border: 0;
	padding: 1px;
}
.ui-datepicker td span,
.ui-datepicker td a {
	display: block;
	padding: .2em;
	text-align: right;
	text-decoration: none;
}
.ui-datepicker .ui-datepicker-buttonpane {
	background-image: none;
	margin: .7em 0 0 0;
	padding: 0 .2em;
	border-left: 0;
	border-right: 0;
	border-bottom: 0;
}
.ui-datepicker .ui-datepicker-buttonpane button {
	float: right;
	margin: .5em .2em .4em;
	cursor: pointer;
	padding: .2em .6em .3em .6em;
	width: auto;
	overflow: visible;
}
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
	float: left;
}


/* ------- Full-page loader overlay (LoaderOverlay.js) -------------------- *
 * Covers the viewport with a translucent backdrop + spinning ring while
 * a navigation, form submit, or jQuery AJAX call is pending.
 *
 * Why CSS-driven rather than setTimeout(show, 400): on stage / production
 * the server buffers the entire PHP response. When the user clicks a link,
 * the browser starts navigation and freezes the outgoing page's JS
 * timers — so a setTimeout-based reveal never fires. Adding the `.show`
 * class is *synchronous* on click, and the keyframe animation that
 * follows is driven by the rendering engine, which keeps running even
 * while the page is in the navigating-away state. Result: spinner
 * appears reliably ~400 ms after the click, regardless of when the new
 * page actually arrives.
 *
 * The animation holds opacity at 0 for ~400 ms then fades to 1 over
 * 150 ms. If the navigation completes faster than that, the old DOM is
 * replaced by the new page (whose .overlay starts without .show) and
 * the spinner is never seen. */
.overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
	z-index: 2147483647;
	display: none;
	justify-content: center;
	align-items: center;
	backdrop-filter: blur(2px);
	opacity: 0;
}
.overlay.show {
	display: flex;
	animation: tpark-loader-appear 0.55s linear forwards;
}
.overlay .loader {
	width: 88px;
	height: 88px;
	border: 12px solid rgba(255, 255, 255, 0.35);
	border-top-color: #3498db;
	border-radius: 50%;
	animation: tpark-loader-spin 0.9s linear infinite;
}
@keyframes tpark-loader-spin {
	0%   { transform: rotate(0deg);   }
	100% { transform: rotate(360deg); }
}
@keyframes tpark-loader-appear {
	/* Invisible for the first ~400 ms (72% of 550 ms), then fade in
	 * over the remaining 150 ms. */
	0%, 72% { opacity: 0; }
	100%    { opacity: 1; }
}


/* ------- Print styles ----------------------------------------------------- *
 * Ported from C:\work2\monitor with adjustments for the plus markup
 * (.tpark-topbar instead of #header, .filter-bar instead of report toolbar).
 * Goal: the printed page reads like a compact snapshot of the on-screen
 * view, fits A4 portrait, and preserves badge / status colours. */
@media print {
	@page { size: A4 portrait; margin: 10mm; }

	html { font-size: 100%; }
	body {
		overflow: visible !important;
		background: #fff !important;
		font-size: 11px;
	}

	/* Hide chrome that doesn't belong on paper. */
	.tpark-topbar,
	.modal,
	.modal-backdrop,
	.modal-loading,
	#modal-user,
	.page-header,
	.filter-bar .filter-actions,
	.filter-bar .filter-bar-extras,
	.heading-elements .icons-list,
	.card-footer .heading-elements-toggle,
	.no-print,
	.d-print-none {
		display: none !important;
	}

	/* Result-page action buttons that follow the table (Export Excel,
	 * Printează, Export CSV, the PDF link in the filter bar) are useless
	 * on paper — strip them. */
	.content > a.btn,
	.content > .btn,
	.content > .row a.btn,
	.filter-bar .filter-actions a.btn,
	.heading-elements-toggle {
		display: none !important;
	}

	/* Let content flow naturally. */
	#content,
	#main,
	.container-fluid,
	.content,
	.page-container,
	.page-content,
	.content-wrapper {
		padding: 0 !important;
		margin: 0 !important;
		overflow: visible !important;
		width: auto !important;
		max-width: none !important;
		display: block !important;
	}

	/* Filter-bar: keep the filter values as a compact context strip but
	 * strip its background/border/inputs-chrome so it reads like a caption
	 * instead of a form. */
	.filter-bar {
		display: block !important;
		background: transparent !important;
		border: none !important;
		border-bottom: 1px solid #ccc !important;
		padding: 0 0 4px 0 !important;
		margin: 0 0 8px 0 !important;
		page-break-inside: avoid;
	}
	.filter-bar .filter-fields {
		display: flex !important;
		flex-wrap: wrap !important;
		gap: 2px 14px !important;
		align-items: baseline;
	}
	.filter-bar .ff {
		flex: 0 0 auto !important;
		display: inline-flex !important;
		flex-direction: row !important;
		align-items: baseline;
		gap: 4px;
		padding: 0 !important;
	}
	.filter-bar .ff > label,
	.filter-bar .ff .ff-label > label {
		font-size: 10px !important;
		color: #555 !important;
		font-weight: normal !important;
	}
	.filter-bar .ff .form-control,
	.filter-bar .ff .form-select {
		border: none !important;
		background: transparent !important;
		padding: 0 !important;
		font-weight: bold;
		font-size: 11px !important;
		height: auto !important;
		min-width: 0 !important;
		width: auto !important;
	}
	.filter-bar .ff .input-group {
		display: inline-flex !important;
		width: auto !important;
	}
	.filter-bar .ff .input-group .input-group-text {
		display: none !important;
	}
	/* Hide empty inputs to avoid confusing blanks */
	.filter-bar .ff input.form-control[value=""] {
		display: none !important;
	}
	.filter-bar .ff:has(input.form-control[value=""]) {
		display: none !important;
	}
	.filter-bar .ff .ff-label-extra {
		display: none !important; /* "cautare exactă" toggle is page state */
	}

	/* Result cards: drop borders/shadows so the table reads as the main
	 * content; keep the coloured card-header as a section title. */
	.card {
		border: none !important;
		box-shadow: none !important;
		background: transparent !important;
		page-break-inside: auto;
	}
	.card-header {
		padding: 3px 0 !important;
		margin-bottom: 2px;
		border: none !important;
		border-bottom: 1px solid #999 !important;
		background: transparent !important;
		color: #000 !important;
	}
	.card-header h6 {
		font-size: 12px !important;
		font-weight: bold !important;
		color: #000 !important;
		margin: 0 !important;
	}
	.card-body { padding: 0 !important; }
	.card-footer {
		padding: 4px 0 !important;
		background: transparent !important;
		border: none !important;
	}

	/* Force panel-collapsed cards to show their body when printing. */
	.card.panel-collapsed > .card-header ~ * {
		display: block !important;
	}

	/* Tables: compact, repeat header on every page, avoid row splits. */
	.table-responsive { overflow: visible !important; }
	table {
		font-size: 10px !important;
		width: 100% !important;
		page-break-inside: auto;
		border-collapse: collapse !important;
	}
	table thead { display: table-header-group; }
	table tfoot { display: table-footer-group; }
	table tr { page-break-inside: avoid; page-break-after: auto; }
	.table td, .table th {
		padding: 0.15rem 0.3rem !important;
		border-color: #ddd !important;
	}
	.table > tbody > tr:nth-of-type(odd) {
		background-color: #f5f5f5 !important;
	}

	/* Keep badges / status pills coloured when printed. */
	* {
		-webkit-print-color-adjust: exact !important;
		print-color-adjust: exact !important;
	}
	.badge {
		padding: 0.15em 0.4em !important;
		font-size: 9px !important;
	}

	/* Don't orphan section headings on the previous page. Scope this to real
	 * headings only: this app wraps every table-cell value in <h6 class="no-margin">
	 * (e.g. <h6>0.00</h6>), so applying page-break-after:avoid to those chains
	 * across the whole table and makes the entire content block unbreakable —
	 * Chrome then pushes it all to the next page, leaving a blank first page.
	 * Firefox tolerates the chain, which is why it only reproduced in Chrome. */
	h1, h2, h3, h4, h5, h6 { page-break-after: avoid; }
	.table h6, td h6, th h6 { page-break-after: auto !important; }

	/* Strip URL appendices that some browsers add after anchor text. */
	a, a:visited { color: inherit; text-decoration: none; }
}