/* =====================================================================
   Vehicle Movement - movement log pages
     admin/c_a_vehicle_log.jsp
     user/c_u_vehicle_log.jsp

   See the rules at the top of vehiclemovement_theme.css, which every page in
   the module loads first: white surfaces with no block fills, colour carried
   by buttons, icons and status, and restrained font weights on the
   application's own typeface.

   Status colours here: blue = in progress (Out / on a trip),
                        green = success (Returned / at base).
   Icon hues: movements violet, out blue, returned green, distance amber.

   Everything is namespaced .vl-* / #vl* so nothing leaks into the theme. The
   date-range picker's own restyle lives in vehiclemovement_theme.css, since
   the activity log uses the same picker.
   ===================================================================== */

#main-container .content { background: var(--vmx-white); }
.vl-wrap { max-width: 1680px; margin: 0 auto; }
.vl-wrap *, .vl-modal-shell * { box-sizing: border-box; }

/* ---------------------------------------------------------- page heading */
.vl-hero {
	display: flex; align-items: center; justify-content: space-between; gap: 18px;
	flex-wrap: wrap; margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--vmx-line);
}
.vl-hero-l { display: flex; align-items: center; gap: 14px; }
.vl-hero-ico {
	width: 42px; height: 42px; border-radius: var(--vmx-r-s); flex: 0 0 42px;
	border: 1px solid var(--vmx-line); color: var(--vmx-blue);
	display: inline-flex; align-items: center; justify-content: center; font-size: 17px;
}
.vl-hero h2 { margin: 0; font-size: 19px; font-weight: var(--vmx-fw-head); color: var(--vmx-ink); }
.vl-hero p  { margin: 3px 0 0; font-size: 13px; color: var(--vmx-muted); }
.vl-hero-r { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ---------------------------------------------------------- buttons */
.vl-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 7px;
	padding: 9px 16px; border-radius: var(--vmx-r-s); border: 1px solid transparent;
	font-size: 13px; font-weight: var(--vmx-fw-label); line-height: 1.3; cursor: pointer;
	transition: background .15s, border-color .15s, color .15s;
	white-space: nowrap; font-family: inherit;
}
.vl-btn i { font-size: 12px; }
.vl-btn:focus { outline: 2px solid var(--vmx-focus); outline-offset: 1px; }
.vl-btn[disabled] { opacity: .55; cursor: not-allowed; }
.vl-btn-primary { background: var(--vmx-brand); color: #fff; }
.vl-btn-primary:hover:not([disabled]) { background: var(--vmx-brand-dark); color: #fff; }
.vl-btn-ghost { background: var(--vmx-white); color: var(--vmx-body); border-color: var(--vmx-line); }
.vl-btn-ghost:hover:not([disabled]) { background: var(--vmx-hover); color: var(--vmx-ink); border-color: #d1d5db; }
.vl-btn-danger { background: var(--vmx-danger); color: #fff; }
.vl-btn-danger:hover:not([disabled]) { background: var(--vmx-danger-dark); color: #fff; }
.vl-btn-sm { padding: 6px 12px; font-size: 12px; }

.vl-ibtn {
	width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--vmx-line);
	background: var(--vmx-white); color: var(--vmx-blue); cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 12.5px; transition: color .15s, border-color .15s; padding: 0;
}
.vl-ibtn:hover        { border-color: var(--vmx-brand); }
.vl-ibtn.is-del       { color: var(--vmx-danger); }
.vl-ibtn.is-del:hover { border-color: var(--vmx-danger); }

/* ---------------------------------------------------------- stat tiles */
.vl-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.vl-stat {
	background: var(--vmx-white); border: 1px solid var(--vmx-line); border-radius: var(--vmx-r);
	padding: 15px 16px; display: flex; align-items: center; gap: 14px;
}
/* the icon carries the tile's colour - an outlined square, never a filled one.
   Out and Returned use the status hues; the other two are just accents. */
.vl-stat-ico {
	width: 40px; height: 40px; flex: 0 0 40px; border-radius: var(--vmx-r-s);
	border: 1px solid currentColor; color: var(--vmx-muted);
	display: flex; align-items: center; justify-content: center; font-size: 16px;
}
.vl-stat.is-all  .vl-stat-ico { color: var(--vmx-violet); }
.vl-stat.is-out  .vl-stat-ico { color: var(--vmx-progress); }
.vl-stat.is-back .vl-stat-ico { color: var(--vmx-success); }
.vl-stat.is-km   .vl-stat-ico { color: var(--vmx-amber); }
.vl-stat-k { font-size: 11px; font-weight: var(--vmx-fw-label); letter-spacing: .4px; text-transform: uppercase; color: var(--vmx-muted); }
.vl-stat-v { font-size: 24px; font-weight: var(--vmx-fw-head); color: var(--vmx-ink); line-height: 1.2; margin: 3px 0 1px; }
.vl-stat-v small { font-size: 13px; font-weight: var(--vmx-fw-label); color: var(--vmx-muted); margin-left: 2px; }
.vl-stat-s { font-size: 12px; color: var(--vmx-muted); }

/* ---------------------------------------------------------- filter bar */
.vl-filters {
	background: var(--vmx-white); border: 1px solid var(--vmx-line); border-radius: var(--vmx-r);
	padding: 13px 14px; margin-bottom: 16px;
	display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.vl-search { position: relative; flex: 1 1 260px; min-width: 190px; }
.vl-search i {
	position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
	color: var(--vmx-blue); font-size: 12.5px; pointer-events: none;
}
.vl-search input {
	width: 100%; padding: 10px 12px 10px 33px; border: 1px solid var(--vmx-line);
	border-radius: var(--vmx-r-s); font-size: 13px; color: var(--vmx-body);
	background: var(--vmx-white); font-family: inherit;
}
.vl-search input:focus { outline: none; border-color: var(--vmx-brand); }

/* the date-range trigger opens a picker, so it is a button - and a filled one, since the
   range is the filter that decides which rows exist at all */
.vl-range {
	display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
	padding: 10px 14px; border-radius: var(--vmx-r-s); border: 1px solid transparent;
	background: var(--vmx-brand); color: #fff; font-size: 13px; font-weight: var(--vmx-fw-label); white-space: nowrap;
}
.vl-range:hover { background: var(--vmx-brand-dark); }
.vl-range i.fa-angle-down { opacity: .8; margin-left: 1px; }

.vl-fsel { position: relative; }
.vl-fsel select {
	appearance: none; -webkit-appearance: none; -moz-appearance: none;
	padding: 10px 30px 10px 12px; border: 1px solid var(--vmx-line); border-radius: var(--vmx-r-s);
	font-size: 13px; color: var(--vmx-body); background: var(--vmx-white); font-family: inherit;
	cursor: pointer; max-width: 200px; text-overflow: ellipsis;
}
.vl-fsel select:focus { outline: none; border-color: var(--vmx-brand); }
.vl-fsel:after {
	content: "\f107"; font-family: FontAwesome; position: absolute; right: 11px; top: 50%;
	transform: translateY(-50%); color: var(--vmx-violet); font-size: 13px; pointer-events: none;
}
/* a filter that is narrowing something: blue border and text, no fill */
.vl-fsel select.on { border-color: var(--vmx-brand); color: var(--vmx-brand-dark); }

.vl-clear {
	display: inline-flex; align-items: center; gap: 7px; padding: 10px 14px;
	border-radius: var(--vmx-r-s); border: 1px dashed #d1d5db;
	background: var(--vmx-white); color: var(--vmx-muted); font-size: 12.5px; font-weight: var(--vmx-fw-label);
	cursor: pointer; font-family: inherit; white-space: nowrap;
}
.vl-clear i { color: var(--vmx-amber); }
.vl-clear:hover { border-style: solid; border-color: var(--vmx-danger); color: var(--vmx-danger); }
.vl-clear:hover i { color: var(--vmx-danger); }

/* ---------------------------------------------------------- panel + table */
.vl-panel { background: var(--vmx-white); border: 1px solid var(--vmx-line); border-radius: var(--vmx-r); overflow: hidden; }
.vl-panel-head {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	flex-wrap: wrap; padding: 14px; border-bottom: 1px solid var(--vmx-line);
}
.vl-panel-head h3 {
	margin: 0; font-size: 14px; font-weight: var(--vmx-fw-head); color: var(--vmx-ink);
	display: inline-flex; align-items: center; gap: 9px;
}
.vl-panel-head h3 i { color: var(--vmx-blue); }
.vl-count { font-size: 12.5px; color: var(--vmx-muted); }

.vl-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.vl-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.vl-table thead th {
	text-align: left; padding: 11px 13px; font-size: 11px; font-weight: var(--vmx-fw-label);
	letter-spacing: .4px; text-transform: uppercase; color: var(--vmx-muted);
	background: var(--vmx-white); border-bottom: 1px solid var(--vmx-line); white-space: nowrap;
}
.vl-table thead th.num, .vl-table tbody td.num { text-align: right; }
.vl-table tbody td {
	padding: 12px 13px; border-bottom: 1px solid var(--vmx-line2);
	color: var(--vmx-body); vertical-align: middle; white-space: nowrap;
}
.vl-table tbody td.wrap { white-space: normal; min-width: 150px; }
.vl-table tbody tr:last-child td { border-bottom: 0; }
/* an Out trip is flagged by its blue status chip - the row itself stays white */

.vl-vnum { font-weight: var(--vmx-fw-head); color: var(--vmx-ink); }
.vl-sub { display: block; font-size: 11.5px; color: var(--vmx-muted); margin-top: 2px; }
.vl-dash { color: #d1d5db; }

/* chips are outlined: blue for Out, green for Returned, accents elsewhere */
.vl-chip {
	display: inline-flex; align-items: center; gap: 6px; border-radius: 999px;
	padding: 3px 10px; font-size: 12px; font-weight: var(--vmx-fw-label); white-space: nowrap;
	border: 1px solid var(--vmx-line); color: var(--vmx-body); background: transparent;
}
.vl-chip .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.vl-chip.is-out   { border-color: var(--vmx-progress); color: var(--vmx-progress-text); }
.vl-chip.is-back  { border-color: var(--vmx-success);  color: var(--vmx-success-text); }
.vl-chip.is-carry { color: var(--vmx-muted); }
.vl-chip.is-type  { border-color: #fcd9a4; color: var(--vmx-amber); }
/* same violet the register uses for a building, so the two pages read alike */
.vl-chip.is-build { border-color: #d8c7f7; color: var(--vmx-violet); }
.vl-chip.is-km    { border-color: #d8c7f7; color: var(--vmx-violet); }

.vl-actions { display: flex; gap: 6px; justify-content: flex-end; }
.vl-table td.vl-actions-cell { text-align: right; }

/* ---------------------------------------------------------- empty + loading */
.vl-empty { padding: 54px 22px; text-align: center; }
.vl-empty-ico {
	width: 58px; height: 58px; border-radius: 16px; margin: 0 auto 14px;
	border: 1px solid var(--vmx-line); color: var(--vmx-violet);
	display: flex; align-items: center; justify-content: center; font-size: 22px;
}
.vl-empty h4 { margin: 0 0 5px; font-size: 15px; font-weight: var(--vmx-fw-head); color: var(--vmx-ink); }
.vl-empty p { margin: 0 auto 16px; font-size: 13px; color: var(--vmx-muted); max-width: 400px; line-height: 1.6; }

.vl-loading { padding: 46px 20px; text-align: center; color: var(--vmx-muted); font-size: 13px; }
.vl-spin {
	width: 26px; height: 26px; margin: 0 auto 12px; border-radius: 50%;
	border: 3px solid var(--vmx-line); border-top-color: var(--vmx-progress);
	animation: vlspin .7s linear infinite;
}
@keyframes vlspin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------- modals */
.vl-modal-shell {
	display: none; position: fixed; inset: 0; z-index: 1500;
	background: var(--vmx-overlay); padding: 22px;
	align-items: flex-start; justify-content: center; overflow-y: auto;
}
.vl-modal-shell.open { display: flex; }
#vlConfirmModal { z-index: 1600; }
#vlPhotoModal { z-index: 1650; }
.vl-modal {
	background: var(--vmx-white); border-radius: 14px; width: 100%; max-width: 640px;
	box-shadow: var(--vmx-shadow-pop); margin: auto; animation: vlpop .18s ease-out;
	display: flex; flex-direction: column; max-height: calc(100vh - 44px);
}
.vl-modal.sm { max-width: 440px; }
@keyframes vlpop { from { opacity: 0; transform: translateY(10px) scale(.99); } to { opacity: 1; transform: none; } }

.vl-modal-head {
	display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
	padding: 20px 22px 16px; border-bottom: 1px solid var(--vmx-line); flex: 0 0 auto;
}
.vl-modal-head h3 { margin: 0; font-size: 16.5px; font-weight: var(--vmx-fw-head); color: var(--vmx-ink); }
.vl-modal-head p  { margin: 4px 0 0; font-size: 13px; color: var(--vmx-muted); line-height: 1.55; }
.vl-x {
	width: 32px; height: 32px; flex: 0 0 32px; border-radius: 8px; border: 1px solid var(--vmx-line);
	background: var(--vmx-white); color: var(--vmx-muted); cursor: pointer; font-size: 13px;
	display: inline-flex; align-items: center; justify-content: center;
}
.vl-x:hover { color: var(--vmx-ink); border-color: #d1d5db; }

.vl-modal-body { padding: 20px 22px; overflow-y: auto; flex: 1 1 auto; }
.vl-modal-foot {
	display: flex; justify-content: flex-end; gap: 9px; padding: 15px 22px;
	border-top: 1px solid var(--vmx-line); background: var(--vmx-white);
	border-radius: 0 0 14px 14px; flex: 0 0 auto;
}

/* ---------------------------------------------------------- form fields */
.vl-field { margin-bottom: 15px; }
.vl-field:last-child { margin-bottom: 0; }
.vl-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
/* sentence case at a normal weight - the old uppercase bold labels read as shouting */
.vl-label {
	display: block; font-size: 12.5px; font-weight: var(--vmx-fw-label);
	color: var(--vmx-body); margin-bottom: 6px;
}
.vl-label span { color: var(--vmx-muted); font-weight: 400; font-size: 12px; }
.vl-label .req { color: var(--vmx-danger); }

.vl-input, .vl-select, .vl-textarea {
	width: 100%; padding: 10px 13px; border: 1px solid var(--vmx-line);
	border-radius: var(--vmx-r-s); font-size: 13.5px; color: var(--vmx-ink);
	background: var(--vmx-white); font-family: inherit; transition: border-color .15s, box-shadow .15s;
}
.vl-textarea { min-height: 70px; resize: vertical; line-height: 1.6; }
.vl-input:focus, .vl-select:focus, .vl-textarea:focus {
	outline: none; border-color: var(--vmx-brand); box-shadow: 0 0 0 3px var(--vmx-focus);
}
.vl-input.err, .vl-select.err { border-color: var(--vmx-danger); }
/* read-only reads as read-only through a dashed border and quieter text, not a grey fill */
.vl-input[readonly] { border-style: dashed; color: var(--vmx-muted); cursor: default; }
.vl-select[disabled] { color: var(--vmx-muted); border-style: dashed; cursor: not-allowed; }
.vl-input::placeholder, .vl-textarea::placeholder { color: var(--vmx-faint); }
.vl-hint { margin: 6px 0 0; font-size: 12px; color: var(--vmx-muted); line-height: 1.5; }
.vl-err { margin: 6px 0 0; font-size: 12px; color: var(--vmx-danger); font-weight: var(--vmx-fw-label); display: none; }
.vl-err.show { display: block; }

/* the building field that leads the form on a building-scoped account: set apart by a
   divider underneath, since the vehicle and driver lists below it depend on it */
.vl-scope-field { padding-bottom: 16px; margin-bottom: 18px; border-bottom: 1px solid var(--vmx-line); }

/* "where is this vehicle right now" - a bordered white box whose text and border carry
   the indication: green when at base, blue while it is out on a trip */
.vl-status {
	border-radius: var(--vmx-r-s); padding: 12px 14px; margin-bottom: 16px;
	background: var(--vmx-white); border: 1px solid var(--vmx-line);
}
.vl-status-k { font-size: 11px; font-weight: var(--vmx-fw-label); letter-spacing: .4px; text-transform: uppercase; color: var(--vmx-muted); }
.vl-status-v { font-size: 13.5px; font-weight: var(--vmx-fw-head); margin-top: 3px; color: var(--vmx-body); }
.vl-status.is-free { border-color: var(--vmx-success); }
.vl-status.is-free .vl-status-v { color: var(--vmx-success-text); }
.vl-status.is-out  { border-color: var(--vmx-progress); }
.vl-status.is-out  .vl-status-v { color: var(--vmx-progress-text); }

/* leg heading - DEPARTURE / RETURN */
.vl-leg {
	display: flex; align-items: center; gap: 10px; margin: 20px 0 14px;
	font-size: 12px; font-weight: var(--vmx-fw-head); letter-spacing: .4px; text-transform: uppercase;
	color: var(--vmx-body);
}
.vl-leg:after { content: ""; flex: 1 1 auto; height: 1px; background: var(--vmx-line); }

/* round-trip checkbox: ticking it outlines the row in blue */
.vl-check {
	display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
	padding: 13px 14px; border-radius: var(--vmx-r-s);
	border: 1px solid var(--vmx-line); background: var(--vmx-white); margin-top: 18px;
}
.vl-check:hover { border-color: #d1d5db; }
.vl-check.on { border-color: var(--vmx-brand); }
.vl-check input { margin: 1px 0 0; width: 16px; height: 16px; flex: 0 0 16px; accent-color: var(--vmx-brand); cursor: pointer; }
.vl-check b { display: block; font-size: 13px; font-weight: var(--vmx-fw-label); color: var(--vmx-ink); }
.vl-check small { display: block; font-size: 12px; color: var(--vmx-muted); margin-top: 2px; line-height: 1.5; }

/* photo picker: an outline button */
.vl-photo { display: flex; align-items: center; gap: 12px; }
.vl-photo-pick {
	flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 12px; border-radius: var(--vmx-r-s); border: 1px dashed #d1d5db;
	background: var(--vmx-white); color: var(--vmx-brand); font-size: 12.5px; font-weight: var(--vmx-fw-label);
	cursor: pointer; font-family: inherit;
}
.vl-photo-pick:hover { border-style: solid; border-color: var(--vmx-brand); }
.vl-photo-prev {
	width: 54px; height: 54px; flex: 0 0 54px; border-radius: var(--vmx-r-s);
	border: 1px solid var(--vmx-line); background: var(--vmx-white) center/cover no-repeat;
	display: none; position: relative;
}
.vl-photo-prev.on { display: block; }
.vl-photo-prev button {
	position: absolute; top: -7px; right: -7px; width: 21px; height: 21px; border-radius: 50%;
	border: 0; background: var(--vmx-danger); color: #fff; font-size: 10px; cursor: pointer;
	display: flex; align-items: center; justify-content: center; padding: 0;
}

/* ---------------------------------------------------------- detail view */
.vl-dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.vl-dl-item { min-width: 0; }
.vl-dl-k { font-size: 11px; font-weight: var(--vmx-fw-label); letter-spacing: .4px; text-transform: uppercase; color: var(--vmx-muted); }
.vl-dl-v { font-size: 13.5px; color: var(--vmx-ink); margin-top: 3px; word-break: break-word; }
.vl-dl-item.wide { grid-column: 1 / -1; }
.vl-thumb {
	margin-top: 8px; width: 100%; max-width: 220px; border-radius: var(--vmx-r-s);
	border: 1px solid var(--vmx-line); cursor: zoom-in; display: block;
}

/* full-size photo viewer - one of the two overlay exceptions */
.vl-photo-shell {
	display: none; position: fixed; inset: 0; z-index: 1650; background: var(--vmx-viewer);
	align-items: center; justify-content: center; padding: 26px;
}
.vl-photo-shell.open { display: flex; }
.vl-photo-shell img { max-width: 100%; max-height: 100%; border-radius: 10px; }
.vl-photo-x {
	position: absolute; top: 18px; right: 18px; width: 40px; height: 40px; border-radius: 50%;
	border: 1px solid rgba(255,255,255,.4); background: transparent; color: #fff; font-size: 16px; cursor: pointer;
}

/* ---------------------------------------------------------- toasts */
.vl-toasts { position: fixed; right: 18px; bottom: 18px; z-index: 1700; display: flex; flex-direction: column; gap: 9px; }
.vl-toast {
	display: flex; align-items: center; gap: 10px; background: var(--vmx-white); color: var(--vmx-ink);
	border: 1px solid var(--vmx-line); padding: 12px 16px; border-radius: var(--vmx-r-s); font-size: 13px;
	box-shadow: var(--vmx-shadow-pop); max-width: 390px; animation: vlslide .2s ease-out;
}
.vl-toast i { font-size: 15px; color: var(--vmx-success); }
.vl-toast.err i  { color: var(--vmx-danger); }
.vl-toast.warn i { color: var(--vmx-amber); }
@keyframes vlslide { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }

/* The bootstrap-daterangepicker restyle moved to vehiclemovement_theme.css - the activity
   log uses the same picker, and the plugin appends its markup to <body> anyway. */

/* ---------------------------------------------------------- responsive
   Below 1000px the table becomes stacked cards: the header cells are
   re-projected as labels through data-label, so nothing scrolls sideways.
   NOTE: tr/td width stays auto - a block-level tr at width:100% plus its
   horizontal margin would be wider than the panel and push the page across. */
@media (max-width: 1240px) {
	.vl-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1000px) {
	.vl-table-wrap { overflow-x: visible; }
	.vl-table { display: block; width: 100%; }
	.vl-table tbody, .vl-table tr, .vl-table td { display: block; width: auto; }
	.vl-table thead { display: none; }
	.vl-table tbody tr {
		border: 1px solid var(--vmx-line); border-radius: var(--vmx-r); margin: 12px 14px;
		background: var(--vmx-white); overflow: hidden;
	}
	/* an Out trip's card gets a blue outline - an indication, drawn as a border */
	.vl-table tbody tr.is-out { border-color: var(--vmx-progress); }
	.vl-table tbody td {
		border-bottom: 1px solid var(--vmx-line2); padding: 10px 14px;
		display: flex; align-items: center; justify-content: space-between; gap: 14px;
		white-space: normal; text-align: right;
	}
	.vl-table tbody td:before {
		content: attr(data-label); flex: 0 0 auto; font-size: 11px; font-weight: var(--vmx-fw-label);
		letter-spacing: .4px; text-transform: uppercase; color: var(--vmx-muted); text-align: left;
	}
	.vl-table tbody td.vl-cell-main { display: block; padding: 14px; text-align: left; border-bottom-color: var(--vmx-line); }
	.vl-table tbody td.vl-cell-main:before { content: none; }
	.vl-table tbody td.num { text-align: right; }
	.vl-table tbody td.vl-actions-cell { justify-content: flex-end; border-bottom: 0; }
	.vl-table tbody td.vl-actions-cell:before { margin-right: auto; }
}

@media (max-width: 620px) {
	.vl-stats { grid-template-columns: 1fr; }
	.vl-hero-r { width: 100%; }
	.vl-hero-r .vl-btn { flex: 1 1 auto; }
	.vl-filters { padding: 12px; }
	.vl-search { flex: 1 1 100%; }
	.vl-range { flex: 1 1 100%; justify-content: center; }
	.vl-fsel { flex: 1 1 calc(50% - 5px); }
	.vl-fsel select { width: 100%; max-width: none; }
	.vl-clear { flex: 1 1 100%; justify-content: center; }
	.vl-row2 { grid-template-columns: 1fr; gap: 0; }
	.vl-row2 .vl-field { margin-bottom: 15px; }
	.vl-dl { grid-template-columns: 1fr; }
	.vl-modal-shell { padding: 0; }
	.vl-modal { max-width: none; border-radius: 14px 14px 0 0; margin: auto 0 0; max-height: 94vh; }
	.vl-modal-foot { border-radius: 0; }
	.vl-modal-foot .vl-btn { flex: 1 1 0; }
	.vl-toasts { left: 14px; right: 14px; bottom: 14px; }
	.vl-toast { max-width: none; }
}