/* Shared Vehicle Manager Pro form styles (sale page, customer dialog). Use inside an element with class="vui". */
.vui {
	/* Follows the app theme (css/vmp_theme.css). */
	--shell: var(--rg-bg);
	--surface: var(--rg-surface);
	--field: var(--rg-input-bg);
	--field-hover: var(--rg-surface-2);
	--line: var(--rg-border);
	--text: var(--rg-text);
	--muted: var(--rg-muted);
	--accent: var(--rg-accent);
	--accent-text: var(--rg-accent-text);
	--warn: var(--rg-warn-text);
	--danger: var(--rg-danger-text);
	--ok: var(--rg-success-text);
	--paper: #ffffff;
	--ink: #1b1e25;
	--radius: 8px;
	font-feature-settings: "tnum";
}
.vui *:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Buttons */
.vui .btn-d { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 15px; border-radius: var(--radius);
	border: 1px solid var(--line); background: var(--surface); color: var(--text); font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; white-space: nowrap; text-decoration: none; }
.vui .btn-d:hover { background: var(--shell); border-color: var(--rg-slate-300); color: var(--text); }
.vui .btn-d:disabled { opacity: 0.5; cursor: default; }
.vui .btn-d.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.vui .btn-d.primary:hover { background: var(--rg-accent-hover); border-color: var(--rg-accent-hover); color: #fff; }
.vui .btn-d.small { height: 32px; padding: 0 12px; font-size: 0.85rem; }
.vui .btn-d.ghost { background: transparent; border-color: transparent; color: var(--accent-text); }
.vui .btn-d.ghost:hover { background: var(--rg-accent-soft); border-color: transparent; }
.vui .btn-d.danger { color: var(--danger); }

/* Segmented control */
.vui .seg { display: inline-flex; flex-wrap: wrap; background: var(--rg-slate-100); border: 1px solid var(--line); border-radius: var(--radius); padding: 3px; gap: 3px; }
.vui .seg button { border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 0.85rem; font-weight: 600; padding: 6px 12px; border-radius: 6px; cursor: pointer; }
.vui .seg button:hover { color: var(--text); }
.vui .seg button.on { background: var(--surface); color: var(--text); box-shadow: var(--rg-shadow); }
/* Fields */
.vui .fields { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.vui .c1 { grid-column: span 1; } .vui .c2 { grid-column: span 2; } .vui .c3 { grid-column: span 3; } .vui .c4 { grid-column: span 4; } .vui .c6 { grid-column: span 6; }
@media (max-width: 760px) { .vui .fields { grid-template-columns: 1fr 1fr; } .vui .c2, .vui .c3, .vui .c4, .vui .c6 { grid-column: span 2; } .vui .c2.half { grid-column: span 1; } }
.vui .f { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.vui .f-label { font-size: 0.7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); display: flex; justify-content: space-between; gap: 8px; }
.vui .f-label .req { color: var(--warn); }
.vui .f-label button { border: 0; background: none; color: var(--accent-text); font: inherit; letter-spacing: 0; text-transform: none; font-weight: 600; padding: 0; cursor: pointer; }
.vui .f-input, .vui .f-wrap { height: 40px; width: 100%; background: var(--field); border: 1px solid var(--line); border-radius: var(--radius); color: var(--text);
	font: inherit; padding: 0 12px; }
.vui input.f-input[type=date] { background: var(--field); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius); padding: 0 12px; }
.vui textarea.f-input { height: auto; min-height: 76px; padding: 10px 12px; resize: vertical; }
.vui select.f-input { appearance: auto; }
.vui .f-input:hover, .vui .f-wrap:hover { border-color: var(--rg-slate-300); }
.vui .f-input:focus, .vui .f-wrap:focus-within { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent); }
.vui .f-wrap { display: flex; align-items: center; gap: 6px; }
.vui .f-wrap input { flex: 1; min-width: 0; height: 100%; background: transparent; border: 0; color: inherit; font: inherit; outline: none; }
.vui .f-wrap .affix { color: var(--muted); }
.vui .f-wrap.money input { text-align: right; }
.vui .mono { font-family: var(--rg-mono); letter-spacing: 0.04em; }
.vui .hint { font-size: 0.8rem; color: var(--muted); margin: 0; }
.vui .hint.warn { color: var(--warn); }
.vui .hint.ok { color: var(--ok); }

/* Validation */
.vui .f.invalid .f-input, .vui .f.invalid .f-wrap, .vui .f.invalid .sp-display { border-color: var(--rg-danger); }
.vui .f-error { font-size: 0.78rem; color: var(--danger); }
.vui .banner { padding: 10px 12px; border-radius: var(--radius); font-size: 0.9rem; }
.vui .banner.error { background: color-mix(in srgb, var(--rg-danger) 7%, transparent); border: 1px solid color-mix(in srgb, var(--rg-danger) 25%, transparent); color: var(--rg-danger-ink); }

/* Toggle */
.vui .switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.vui .switch input { position: absolute; opacity: 0; }
.vui .switch .track { width: 38px; height: 22px; border-radius: 999px; background: var(--rg-slate-300); position: relative; transition: background 0.15s; }
.vui .switch .track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(16, 24, 40, .35); transition: transform 0.15s; }
.vui .switch input:checked + .track { background: var(--accent); }
.vui .switch input:checked + .track::after { transform: translateX(16px); }
.vui .switch input:focus-visible + .track { outline: 2px solid var(--accent); outline-offset: 2px; }