/* =====================================================================
   Vehicle Movement - register pages (vehicles, drivers, vehicle types)
     admin/c_a_vehicle_config.jsp
     user/c_u_vehicle_config.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.

   Icon hues here: vehicles blue, drivers teal, vehicle types amber.

   Every rule is namespaced .vm-* / #vm* so nothing leaks into the theme.
   The tables collapse into stacked cards below 900px (see "responsive").
   ===================================================================== */

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

/* ---------------------------------------------------------- page heading */
.vm-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);
}
.vm-hero-l { display: flex; align-items: center; gap: 14px; }
.vm-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;
}
.vm-hero h2 { margin: 0; font-size: 19px; font-weight: var(--vmx-fw-head); color: var(--vmx-ink); }
.vm-hero p  { margin: 3px 0 0; font-size: 13px; color: var(--vmx-muted); }
.vm-hero-r { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ---------------------------------------------------------- buttons */
.vm-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;
}
.vm-btn i { font-size: 12px; }
.vm-btn:focus { outline: 2px solid var(--vmx-focus); outline-offset: 1px; }
.vm-btn[disabled] { opacity: .55; cursor: not-allowed; }
.vm-btn-primary { background: var(--vmx-brand); color: #fff; }
.vm-btn-primary:hover:not([disabled]) { background: var(--vmx-brand-dark); color: #fff; }
.vm-btn-ghost { background: var(--vmx-white); color: var(--vmx-body); border-color: var(--vmx-line); }
.vm-btn-ghost:hover:not([disabled]) { background: var(--vmx-hover); color: var(--vmx-ink); border-color: #d1d5db; }
.vm-btn-danger { background: var(--vmx-danger); color: #fff; }
.vm-btn-danger:hover:not([disabled]) { background: var(--vmx-danger-dark); color: #fff; }
.vm-btn-sm { padding: 6px 12px; font-size: 12px; }

/* icon-only row actions: outline buttons whose icon colour says what they do */
.vm-ibtn {
	width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--vmx-line);
	background: var(--vmx-white); color: var(--vmx-muted); cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 12.5px; transition: color .15s, border-color .15s; padding: 0;
}
.vm-ibtn                { color: var(--vmx-blue); }
.vm-ibtn.is-on          { color: var(--vmx-success); }
.vm-ibtn.is-off         { color: var(--vmx-amber); }
.vm-ibtn.is-del         { color: var(--vmx-danger); }
.vm-ibtn:hover          { border-color: var(--vmx-brand); }
.vm-ibtn.is-on:hover    { border-color: var(--vmx-success); }
.vm-ibtn.is-off:hover   { border-color: var(--vmx-amber); }
.vm-ibtn.is-del:hover   { border-color: var(--vmx-danger); }

/* ---------------------------------------------------------- stat tiles */
.vm-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.vm-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 */
.vm-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;
}
.vm-stat.is-veh  .vm-stat-ico { color: var(--vmx-blue); }
.vm-stat.is-drv  .vm-stat-ico { color: var(--vmx-teal); }
.vm-stat.is-type .vm-stat-ico { color: var(--vmx-amber); }
.vm-stat-k { font-size: 11px; font-weight: var(--vmx-fw-label); letter-spacing: .4px; text-transform: uppercase; color: var(--vmx-muted); }
.vm-stat-v { font-size: 24px; font-weight: var(--vmx-fw-head); color: var(--vmx-ink); line-height: 1.2; margin: 3px 0 1px; }
.vm-stat-s { font-size: 12px; color: var(--vmx-muted); }
/* the "N active" count is a success indication */
.vm-stat-s span { color: var(--vmx-success-text); font-weight: var(--vmx-fw-label); }

/* ---------------------------------------------------------- panel + tabs */
.vm-panel { background: var(--vmx-white); border: 1px solid var(--vmx-line); border-radius: var(--vmx-r); overflow: hidden; }
.vm-tabs {
	display: flex; gap: 4px; padding: 6px 14px 0; border-bottom: 1px solid var(--vmx-line);
	overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.vm-tab {
	appearance: none; background: none; border: 0; border-bottom: 2px solid transparent;
	padding: 12px 14px; font-size: 13px; font-weight: var(--vmx-fw-label); color: var(--vmx-muted);
	cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
	white-space: nowrap; font-family: inherit; transition: color .15s, border-color .15s;
}
/* each tab keeps its area's hue on the icon, so the row is colourful even when idle */
.vm-tab[data-tab="vehicles"] i { color: var(--vmx-blue); }
.vm-tab[data-tab="drivers"] i  { color: var(--vmx-teal); }
.vm-tab[data-tab="types"] i    { color: var(--vmx-amber); }
.vm-tab:hover { color: var(--vmx-ink); }
.vm-tab.active { color: var(--vmx-ink); border-bottom-color: var(--vmx-brand); }
.vm-tab .vm-pill {
	border: 1px solid var(--vmx-line); color: var(--vmx-muted); border-radius: 999px;
	padding: 1px 8px; font-size: 11px; font-weight: var(--vmx-fw-label);
}
.vm-tab.active .vm-pill { border-color: var(--vmx-brand); color: var(--vmx-brand); }

.vm-toolbar {
	display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
	padding: 14px; border-bottom: 1px solid var(--vmx-line);
}
.vm-search { position: relative; flex: 1 1 240px; min-width: 190px; }
.vm-search i {
	position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
	color: var(--vmx-blue); font-size: 12.5px; pointer-events: none;
}
.vm-search input {
	width: 100%; padding: 9px 12px 9px 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;
}
.vm-search input:focus { outline: none; border-color: var(--vmx-brand); }

/* building filter, shown only when the account holds BUILDCECPT */
.vm-fsel { position: relative; }
.vm-fsel select {
	appearance: none; -webkit-appearance: none; -moz-appearance: none;
	padding: 9px 30px 9px 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: 220px; text-overflow: ellipsis;
}
.vm-fsel select:focus { outline: none; border-color: var(--vmx-brand); }
.vm-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 */
.vm-fsel select.on { border-color: var(--vmx-brand); color: var(--vmx-brand-dark); }

/* segmented All / Active / Inactive - the chosen segment is a filled button */
.vm-segs { display: inline-flex; border: 1px solid var(--vmx-line); border-radius: 999px; padding: 3px; background: var(--vmx-white); }
.vm-seg {
	appearance: none; border: 0; background: none; border-radius: 999px;
	padding: 6px 14px; font-size: 12px; font-weight: var(--vmx-fw-label); color: var(--vmx-muted);
	cursor: pointer; font-family: inherit; white-space: nowrap;
}
.vm-seg:hover { color: var(--vmx-ink); }
.vm-seg.active { background: var(--vmx-brand); color: #fff; }

/* ---------------------------------------------------------- table */
.vm-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.vm-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.vm-table thead th {
	text-align: left; padding: 11px 14px; 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;
}
.vm-table tbody td {
	padding: 13px 14px; border-bottom: 1px solid var(--vmx-line2);
	color: var(--vmx-body); vertical-align: middle;
}
.vm-table tbody tr:last-child td { border-bottom: 0; }
/* a deactivated row reads quieter through its text, not through a fill */
.vm-table tbody tr.is-off td { color: var(--vmx-faint); }
.vm-table tbody tr.is-off .vm-primary-cell b { color: var(--vmx-muted); }
.vm-table tbody tr.is-off .vm-avatar { color: var(--vmx-faint); }

.vm-primary-cell { display: flex; align-items: center; gap: 11px; }
.vm-avatar {
	width: 36px; height: 36px; flex: 0 0 36px; border-radius: var(--vmx-r-s);
	border: 1px solid var(--vmx-line); color: var(--vmx-blue);
	display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: var(--vmx-fw-label);
}
.vm-avatar.is-drv { color: var(--vmx-teal); }
.vm-primary-cell b { display: block; color: var(--vmx-ink); font-weight: var(--vmx-fw-head); font-size: 13.5px; }
.vm-primary-cell small { display: block; color: var(--vmx-muted); font-size: 12px; margin-top: 1px; }
.vm-dash { color: #d1d5db; }

/* chips are outlined - green marks a success state, the rest keep their area's hue */
.vm-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;
}
.vm-chip .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.vm-chip.is-active   { border-color: var(--vmx-success); color: var(--vmx-success-text); }
.vm-chip.is-inactive { color: var(--vmx-muted); }
.vm-chip.is-type     { border-color: #fcd9a4; color: var(--vmx-amber); }
.vm-chip.is-build    { border-color: #d8c7f7; color: var(--vmx-violet); }

.vm-when { white-space: nowrap; font-size: 12.5px; }
.vm-when b { display: block; color: var(--vmx-body); font-weight: var(--vmx-fw-label); }
.vm-when small { color: var(--vmx-muted); font-size: 11.5px; }

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

/* ---------------------------------------------------------- empty + loading */
.vm-empty { padding: 54px 22px; text-align: center; }
.vm-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;
}
.vm-empty h4 { margin: 0 0 5px; font-size: 15px; font-weight: var(--vmx-fw-head); color: var(--vmx-ink); }
.vm-empty p { margin: 0 auto 16px; font-size: 13px; color: var(--vmx-muted); max-width: 380px; line-height: 1.6; }

.vm-loading { padding: 46px 20px; text-align: center; color: var(--vmx-muted); font-size: 13px; }
.vm-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: vmspin .7s linear infinite;
}
@keyframes vmspin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------- modals */
.vm-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;
}
.vm-modal-shell.open { display: flex; }
/* The type dialog can be opened from inside the vehicle dialog, so it has to sit above it;
   the confirm dialog sits above everything. */
#vmTypeModal { z-index: 1550; }
#vmConfirmModal { z-index: 1600; }
.vm-modal {
	background: var(--vmx-white); border-radius: 14px; width: 100%; max-width: 560px;
	box-shadow: var(--vmx-shadow-pop); margin: auto; animation: vmpop .18s ease-out;
	display: flex; flex-direction: column; max-height: calc(100vh - 44px);
}
.vm-modal.sm { max-width: 420px; }
@keyframes vmpop { from { opacity: 0; transform: translateY(10px) scale(.99); } to { opacity: 1; transform: none; } }

.vm-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;
}
.vm-modal-head h3 { margin: 0; font-size: 16.5px; font-weight: var(--vmx-fw-head); color: var(--vmx-ink); }
.vm-modal-head p  { margin: 4px 0 0; font-size: 13px; color: var(--vmx-muted); line-height: 1.55; }
.vm-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;
}
.vm-x:hover { color: var(--vmx-ink); border-color: #d1d5db; }

.vm-modal-body { padding: 20px 22px; overflow-y: auto; flex: 1 1 auto; }
.vm-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 */
.vm-field { margin-bottom: 16px; }
.vm-field:last-child { margin-bottom: 0; }
.vm-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
/* sentence case at a normal weight - the old uppercase bold labels read as shouting */
.vm-label {
	display: block; font-size: 12.5px; font-weight: var(--vmx-fw-label);
	color: var(--vmx-body); margin-bottom: 6px;
}
.vm-label span { color: var(--vmx-muted); font-weight: 400; font-size: 12px; }
.vm-label .req { color: var(--vmx-danger); }

.vm-input, .vm-select, .vm-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;
}
.vm-textarea { min-height: 74px; resize: vertical; line-height: 1.6; }
.vm-input:focus, .vm-select:focus, .vm-textarea:focus {
	outline: none; border-color: var(--vmx-brand); box-shadow: 0 0 0 3px var(--vmx-focus);
}
.vm-input.err, .vm-select.err { border-color: var(--vmx-danger); }
.vm-input::placeholder, .vm-textarea::placeholder { color: var(--vmx-faint); }
.vm-hint { margin: 6px 0 0; font-size: 12px; color: var(--vmx-muted); line-height: 1.55; }
.vm-err { margin: 6px 0 0; font-size: 12px; color: var(--vmx-danger); font-weight: var(--vmx-fw-label); display: none; }
.vm-err.show { display: block; }

/* the building field that leads the form on a building-scoped account: set apart by a
   divider underneath, since everything below it belongs to that building */
.vm-scope-field { padding-bottom: 16px; margin-bottom: 18px; border-bottom: 1px solid var(--vmx-line); }
.vm-scope-field:last-child { margin-bottom: 0; }

/* type picker: a select plus an inline "New type" button, so a missing type can be
   created without leaving the vehicle form */
.vm-with-add { display: flex; gap: 8px; align-items: stretch; }
.vm-with-add .vm-select { flex: 1 1 auto; }
.vm-add-inline {
	flex: 0 0 auto; padding: 0 14px; border-radius: var(--vmx-r-s);
	border: 1px solid var(--vmx-brand); background: var(--vmx-white); color: var(--vmx-brand);
	font-size: 12.5px; font-weight: var(--vmx-fw-label); cursor: pointer; white-space: nowrap; font-family: inherit;
	display: inline-flex; align-items: center; gap: 6px; transition: background .15s, color .15s;
}
.vm-add-inline:hover { background: var(--vmx-brand); color: #fff; }

/* Active / Inactive switch used on all three forms: Active is a success state */
.vm-toggle { display: flex; gap: 8px; }
.vm-toggle-btn {
	flex: 1 1 0; padding: 10px 12px; border-radius: var(--vmx-r-s);
	border: 1px solid var(--vmx-line); background: var(--vmx-white); cursor: pointer;
	font-size: 12.5px; font-weight: var(--vmx-fw-label); color: var(--vmx-muted); font-family: inherit;
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	transition: border-color .15s, color .15s;
}
.vm-toggle-btn .dot { width: 8px; height: 8px; border-radius: 50%; background: #d1d5db; }
.vm-toggle-btn:hover { border-color: #d1d5db; color: var(--vmx-body); }
.vm-toggle-btn.on[data-v="1"] { border-color: var(--vmx-success); color: var(--vmx-success-text); }
.vm-toggle-btn.on[data-v="1"] .dot { background: var(--vmx-success); }
.vm-toggle-btn.on[data-v="0"] { border-color: var(--vmx-muted); color: var(--vmx-ink); }
.vm-toggle-btn.on[data-v="0"] .dot { background: var(--vmx-muted); }

/* ---------------------------------------------------------- toasts */
.vm-toasts { position: fixed; right: 18px; bottom: 18px; z-index: 1700; display: flex; flex-direction: column; gap: 9px; }
.vm-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: 380px; animation: vmslide .2s ease-out;
}
.vm-toast i { font-size: 15px; color: var(--vmx-success); }
.vm-toast.err i  { color: var(--vmx-danger); }
.vm-toast.warn i { color: var(--vmx-amber); }
@keyframes vmslide { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------- responsive
   Below 900px each table row becomes its own card: 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: 1100px) {
	.vm-stats { gap: 10px; }
	.vm-stat { padding: 13px; gap: 11px; }
	.vm-stat-v { font-size: 22px; }
}

@media (max-width: 900px) {
	.vm-stats { grid-template-columns: 1fr; }
	.vm-stat { padding: 12px 14px; }
	.vm-stat-v { font-size: 21px; }

	.vm-table-wrap { overflow-x: visible; }
	.vm-table { display: block; width: 100%; }
	.vm-table tbody, .vm-table tr, .vm-table td { display: block; width: auto; }
	.vm-table thead { display: none; }
	.vm-table tbody tr {
		border: 1px solid var(--vmx-line); border-radius: var(--vmx-r); margin: 12px 14px;
		background: var(--vmx-white); overflow: hidden;
	}
	.vm-table tbody td {
		border-bottom: 1px solid var(--vmx-line2); padding: 10px 14px;
		display: flex; align-items: center; justify-content: space-between; gap: 14px;
	}
	.vm-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);
	}
	/* the first cell is the card's heading - no label, full width, divider underneath */
	.vm-table tbody td.vm-cell-main { display: block; padding: 14px; border-bottom-color: var(--vmx-line); }
	.vm-table tbody td.vm-cell-main:before { content: none; }
	.vm-table tbody td.vm-actions-cell { justify-content: flex-end; border-bottom: 0; }
	.vm-table tbody td.vm-actions-cell:before { margin-right: auto; }
	.vm-when { text-align: right; }
}

@media (max-width: 620px) {
	.vm-hero-r { width: 100%; }
	.vm-hero-r .vm-btn { flex: 1 1 auto; }
	.vm-toolbar { padding: 12px; }
	.vm-search { flex: 1 1 100%; }
	.vm-fsel { flex: 1 1 100%; }
	.vm-fsel select { width: 100%; max-width: none; }
	.vm-segs { width: 100%; }
	.vm-seg { flex: 1 1 0; padding: 8px 6px; }
	.vm-toolbar > .vm-btn { width: 100%; }
	.vm-row2 { grid-template-columns: 1fr; gap: 0; }
	.vm-row2 .vm-field { margin-bottom: 16px; }
	.vm-modal-shell { padding: 0; }
	.vm-modal { max-width: none; border-radius: 14px 14px 0 0; margin: auto 0 0; max-height: 94vh; }
	.vm-modal-foot { border-radius: 0; }
	.vm-modal-foot .vm-btn { flex: 1 1 0; }
	.vm-toasts { left: 14px; right: 14px; bottom: 14px; }
	.vm-toast { max-width: none; }
	.vm-with-add { flex-wrap: wrap; }
	.vm-with-add .vm-select { flex: 1 1 100%; }
	.vm-add-inline { width: 100%; justify-content: center; padding: 10px; }
}

/* =====================================================================
   Activity log (admin/c_a_vehicle_activity.jsp)

   The page reuses everything above - hero, stat tiles, panel, toolbar,
   table, chips - and adds only the action badge. Same rules as the rest of
   the module: outlined, never filled.
   ===================================================================== */

/* what happened, in one word: green created/completed, blue changed or on the
   road, amber switched off, red removed */
.vm-act {
	display: inline-flex; align-items: center; 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;
}
.vm-act-ok       { border-color: var(--vmx-success);  color: var(--vmx-success-text); }
.vm-act-progress { border-color: var(--vmx-progress); color: var(--vmx-progress-text); }
.vm-act-warn     { border-color: #fcd9a4;             color: var(--vmx-amber); }
.vm-act-danger   { border-color: #f5b5b5;             color: var(--vmx-danger); }

/* which register the row belongs to - the module's usual area hues
   (.is-type is already defined above and is the amber one) */
.vm-chip.is-vehicle { border-color: #b9ccf7; color: var(--vmx-blue); }
.vm-chip.is-driver  { border-color: #a9ddd7; color: var(--vmx-teal); }
.vm-chip.is-trip    { border-color: #d8c7f7; color: var(--vmx-violet); }

/* the log is wide: let the long columns wrap rather than stretch the table */
#vaTableWrap .vm-table td { vertical-align: top; }
#vaTableWrap .vm-table td:nth-child(4),
#vaTableWrap .vm-table td:nth-child(6) { white-space: normal; min-width: 170px; }
#vaTableWrap .vm-table td:last-child { color: var(--vmx-muted); font-size: 12px; max-width: 220px; white-space: normal; }

@media (max-width: 900px) {
	/* the card heading is the timestamp, so give it room to read as one */
	#vaTableWrap .vm-table td.vm-cell-main .vm-when b { font-size: 13.5px; }
	#vaTableWrap .vm-table td:nth-child(4),
	#vaTableWrap .vm-table td:nth-child(6),
	#vaTableWrap .vm-table td:last-child { min-width: 0; max-width: none; text-align: right; }
}