/* =====================================================================
   Vehicle Movement - the module's palette and type scale, defined once.

   Loaded by all four pages BEFORE their own stylesheet; both page stylesheets
   use these --vmx-* tokens directly, so the register and the log cannot drift.

   THE RULES
     1. Surfaces stay white. Blocks - cards, panels, tiles, rows, dialogs,
        form sections - get NO background fill. They are separated by 1px
        borders, never by tints.
     2. Colour lives on:
          - buttons (primary = blue fill, destructive = red fill)
          - ICONS, each area keeping its own accent hue, so the page reads
            as colourful without a single coloured block
          - status: green = success (Active, Returned, at base)
                    blue  = in progress (Out, on a trip)
        A status is coloured text plus a coloured border or dot - not a fill.
     3. Red is kept for errors and destructive actions only (validation
        messages, the required-field asterisk, Delete).

   TYPE: the module sets no font-family of its own, so every page uses the
   application's standard face. Weights are deliberately restrained - 600 is
   the heaviest used anywhere; headings are 600, labels 500, body text normal.
   No 700/800 "thick" text.

   Two deliberate exceptions to rule 1, both overlays rather than blocks: the
   dimmed backdrop behind an open dialog, and the dark full-screen photo
   viewer. Without them a white dialog sits on a white page and disappears.
   ===================================================================== */

:root {
	/* ---- buttons ---- */
	--vmx-brand:        #2563eb;
	--vmx-brand-dark:   #1d4ed8;
	--vmx-focus:        rgba(37,99,235,.18);   /* focus ring on inputs - an outline, not a fill */

	/* ---- status ---- */
	--vmx-success:      #16a34a;
	--vmx-success-text: #15803d;
	--vmx-progress:     #2563eb;
	--vmx-progress-text:#1d4ed8;

	/* ---- errors + destructive ---- */
	--vmx-danger:       #dc2626;
	--vmx-danger-dark:  #b91c1c;

	/* ---- icon accents ----
	   Each area of the module keeps one hue so icons are recognisable at a
	   glance: vehicles blue, drivers teal, types amber, counts/metrics violet. */
	--vmx-blue:   #2563eb;
	--vmx-teal:   #0d9488;
	--vmx-amber:  #d97706;
	--vmx-violet: #7c3aed;

	/* ---- surfaces + text ---- */
	--vmx-white:  #ffffff;
	--vmx-ink:    #111827;
	--vmx-body:   #374151;
	--vmx-muted:  #6b7280;
	--vmx-faint:  #9ca3af;
	--vmx-line:   #e5e7eb;
	--vmx-line2:  #f3f4f6;
	--vmx-hover:  #f9fafb;   /* hover on a BUTTON only - never on a block */

	/* ---- type scale (no font-family: the app's own face is inherited) ---- */
	--vmx-fw-head:  600;   /* headings, numbers, emphasised names */
	--vmx-fw-label: 500;   /* field labels, table headers, captions, buttons */

	/* ---- shape ---- */
	--vmx-r:   12px;
	--vmx-r-s: 9px;

	/* ---- overlays (the two exceptions above) ---- */
	--vmx-overlay:    rgba(17,24,39,.40);
	--vmx-viewer:     rgba(17,24,39,.90);
	--vmx-shadow-pop: 0 16px 44px rgba(17,24,39,.14);   /* things that float: dialogs, popovers, toasts */
}

/* ---------------------------------------------------------- module nav
   Pill links between the register and the log. The active link is a button,
   so it is the one filled element here; the idle link shows its icon in
   colour instead. */
.vm-modnav {
	display: flex; gap: 4px; flex-wrap: wrap; background: var(--vmx-white);
	border: 1px solid var(--vmx-line); border-radius: 999px; padding: 4px;
	margin-bottom: 18px; max-width: max-content;
}
.vm-modnav a {
	display: inline-flex; align-items: center; gap: 8px; padding: 8px 17px; border-radius: 999px;
	font-size: 13px; font-weight: var(--vmx-fw-label); color: var(--vmx-body); text-decoration: none;
}
.vm-modnav a i { color: var(--vmx-blue); }
.vm-modnav a:hover { color: var(--vmx-brand); text-decoration: none; }
.vm-modnav a.active { background: var(--vmx-brand); color: #fff; }
.vm-modnav a.active i,
.vm-modnav a.active:hover { color: #fff; }

@media (max-width: 620px) {
	.vm-modnav { max-width: none; }
	.vm-modnav a { flex: 1 1 0; justify-content: center; padding: 9px 12px; }
}

/* =====================================================================
   Date range picker - bootstrap-daterangepicker 2.1.25

   Lives here, not in a page stylesheet, because the plugin appends its markup
   to <body> (so no page wrapper can reach it) and because two pages now use
   it: the movement log and the activity log. Rules only bite when the plugin
   is actually on the page, so the other pages are unaffected.
   ===================================================================== */

/* The plugin marks its container .dropdown-menu and relies on Bootstrap's
   `.dropdown-menu { display: none }` to keep it hidden until opened - which couples it to
   the theme's CSS load order and leaves the panel sitting open on the page if that rule
   ever loses. Own the default here instead. No !important: the plugin shows and hides
   through jQuery .show()/.hide(), whose inline display then correctly wins over this. */
.daterangepicker { display: none; }

.daterangepicker {
	border: 1px solid var(--vmx-line) !important; border-radius: var(--vmx-r) !important;
	box-shadow: var(--vmx-shadow-pop) !important; font-family: inherit !important;
	padding: 0 !important; overflow: hidden; background: var(--vmx-white) !important;
}
.daterangepicker:before, .daterangepicker:after { display: none !important; }

/* Keep the preset list beside the two calendars rather than wrapping under them.
   The plugin floats .ranges and .calendar but sets no container width, so the three
   columns only just fail to fit and the list drops below - hence the explicit floats
   and a min-width that comfortably holds 168px of list plus both calendars. */
.daterangepicker.show-calendar { min-width: 772px; }
.daterangepicker.ltr .ranges, .daterangepicker.ltr .calendar { float: left !important; }

.daterangepicker .calendar { margin: 10px !important; max-width: none !important; }
.daterangepicker .calendar-table { border: 0 !important; padding: 0 !important; background: var(--vmx-white) !important; }
.daterangepicker th, .daterangepicker td { font-family: inherit !important; }
.daterangepicker th.month { font-size: 13.5px !important; font-weight: var(--vmx-fw-head) !important; color: var(--vmx-ink) !important; }
.daterangepicker th { font-size: 11px !important; font-weight: var(--vmx-fw-label) !important; color: var(--vmx-muted) !important; text-transform: uppercase; }
.daterangepicker td { font-size: 12.5px !important; color: var(--vmx-body) !important; }
/* the days between the two ends read as the selection through blue text, not a fill */
.daterangepicker td.available:hover, .daterangepicker th.available:hover { background: transparent !important; color: var(--vmx-brand) !important; }
.daterangepicker td.in-range { background: transparent !important; color: var(--vmx-brand-dark) !important; font-weight: var(--vmx-fw-label) !important; }
/* the two ends are what you clicked, so they are drawn like buttons */
.daterangepicker td.active, .daterangepicker td.active:hover {
	background: var(--vmx-brand) !important; color: #fff !important; border-radius: 50% !important;
}
.daterangepicker td.off, .daterangepicker td.off.in-range { color: #d1d5db !important; background: transparent !important; font-weight: 400 !important; }
.daterangepicker .ranges { margin: 0 !important; border-right: 1px solid var(--vmx-line); }
.daterangepicker .ranges ul { width: 168px !important; padding: 10px !important; margin: 0 !important; }

/* The from/to text boxes the plugin puts above the left calendar - kept (typing an exact
   date is quicker than paging the calendar) but restyled to match the pages' inputs. */
.daterangepicker .daterangepicker_input { padding: 0 0 4px !important; }
.daterangepicker .daterangepicker_input input {
	border: 1px solid var(--vmx-line) !important; border-radius: var(--vmx-r-s) !important;
	padding: 8px 10px 8px 30px !important; font-size: 12.5px !important; background: var(--vmx-white) !important;
	color: var(--vmx-ink) !important; font-family: inherit !important; height: auto !important;
}
.daterangepicker .daterangepicker_input input:focus { outline: none; border-color: var(--vmx-brand) !important; }
.daterangepicker .daterangepicker_input i { color: var(--vmx-blue) !important; }
.daterangepicker .ranges li {
	border: 0 !important; border-radius: var(--vmx-r-s) !important; padding: 11px 13px !important;
	font-size: 12.5px !important; font-weight: var(--vmx-fw-label) !important; color: var(--vmx-body) !important;
	background: transparent !important; margin-bottom: 3px !important;
}
.daterangepicker .ranges li:hover { background: transparent !important; color: var(--vmx-brand) !important; }
.daterangepicker .ranges li.active { background: var(--vmx-brand) !important; color: #fff !important; }
.daterangepicker .range_inputs { padding: 0 10px 10px !important; }
.daterangepicker .applyBtn, .daterangepicker .cancelBtn {
	border-radius: var(--vmx-r-s) !important; font-size: 12.5px !important; font-weight: var(--vmx-fw-label) !important;
	padding: 9px 15px !important; border: 1px solid transparent !important; font-family: inherit !important;
}
.daterangepicker .applyBtn { background: var(--vmx-brand) !important; color: #fff !important; }
.daterangepicker .applyBtn:hover { background: var(--vmx-brand-dark) !important; }
.daterangepicker .cancelBtn { background: var(--vmx-white) !important; color: var(--vmx-body) !important; border-color: var(--vmx-line) !important; }
.daterangepicker .cancelBtn:hover { background: var(--vmx-hover) !important; }

@media (max-width: 620px) {
	/* the plugin's two-month view does not fit a phone - one month, full width.
	   The desktop min-width must go, or the panel would force a sideways scroll. */
	.daterangepicker, .daterangepicker.show-calendar { min-width: 0 !important; }
	.daterangepicker { width: auto !important; max-width: calc(100vw - 20px) !important; }
	.daterangepicker .ranges { border-right: 0; border-bottom: 1px solid var(--vmx-line); float: none !important; }
	.daterangepicker .ranges ul { width: 100% !important; }
	.daterangepicker .calendar { float: none !important; }
	.daterangepicker.show-calendar .calendar.right { display: none !important; }
}

/* =====================================================================
   Zone > Cluster > Building picker - vm_buildingtree.jsp

   Lives here, not in a page stylesheet, because all three page groups use it -
   the register, the movement log and the dashboard - and it has to look the
   same on every one of them. It carries its own button and dialog classes
   rather than borrowing a page's, since the three name theirs differently
   (vm-btn / vl-btn / vd-btn).

   Rendered only on an account holding BUILDCECPT, so on every other account
   these rules simply never match anything.

   Theme note: the tree is a list of rows, and a row is a block - so rows get no
   fill, only borders and hover. The one filled element is the checkbox itself,
   which is a control rather than a block, and is what a tick has to look like.
   The dim backdrop is the palette's documented exception: without it a white
   dialog sits on a white page and disappears.
   ===================================================================== */

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

.vm-bt-trigger .fa-building-o { color: var(--vmx-violet); }
.vm-bt-trigger .fa-angle-down { color: var(--vmx-faint); }
/* filtering to particular buildings: outlined in blue, never filled */
.vm-bt-trigger.is-on { border-color: var(--vmx-brand); color: var(--vmx-brand-dark); }
.vm-bt-trigger.is-on .fa-building-o, .vm-bt-trigger.is-on .fa-angle-down { color: var(--vmx-brand); }

/* ---------------------------------------------------------- dialog */
.vm-bt-shell {
	display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1560;
	background: var(--vmx-overlay); padding: 22px;
	align-items: flex-start; justify-content: center; overflow-y: auto;
}
.vm-bt-shell.open { display: flex; }
.vm-bt-shell * { box-sizing: border-box; }
.vm-bt-dialog {
	background: var(--vmx-white); border-radius: 14px; width: 100%; max-width: 560px;
	box-shadow: var(--vmx-shadow-pop); margin: auto; animation: vmbtpop .18s ease-out;
	display: flex; flex-direction: column; max-height: calc(100vh - 44px);
}
@keyframes vmbtpop { from { opacity: 0; transform: translateY(10px) scale(.99); } to { opacity: 1; transform: none; } }

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

.vm-bt-title { display: flex; align-items: flex-start; gap: 11px; min-width: 0; }
.vm-bt-ico {
	width: 36px; height: 36px; flex: 0 0 36px; border-radius: var(--vmx-r-s);
	border: 1px solid var(--vmx-line); color: var(--vmx-teal);
	display: inline-flex; align-items: center; justify-content: center; font-size: 15px;
}

.vm-bt-tools { display: flex; gap: 8px; flex-wrap: wrap; padding: 14px 22px 0; flex: 0 0 auto; }

.vm-bt-search { position: relative; padding: 12px 22px 0; flex: 0 0 auto; }
.vm-bt-search i {
	position: absolute; left: 34px; top: calc(50% + 6px); transform: translateY(-50%);
	color: var(--vmx-blue); font-size: 12.5px; pointer-events: none;
}
.vm-bt-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;
}
.vm-bt-search input:focus { outline: none; border-color: var(--vmx-brand); }

/* the tree is the only scrolling part, so the tools and the footer stay put */
.vm-bt-body { padding: 14px 22px 18px; overflow-y: auto; flex: 1 1 auto; }
.vm-bt-foot {
	display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
	padding: 14px 22px 18px; border-top: 1px solid var(--vmx-line); flex: 0 0 auto;
}
.vm-bt-note { flex: 1 1 auto; font-size: 12.5px; color: var(--vmx-muted); }

/* ---------------------------------------------------------- the tree */
.vm-bt-tree { display: flex; flex-direction: column; gap: 8px; }
.vm-bt-row {
	display: flex; align-items: center; gap: 10px; padding: 10px 12px;
	border-radius: var(--vmx-r-s); cursor: pointer; min-width: 0;
}
/* a zone is the outer level, so it gets the border; clusters and buildings sit inside it */
.vm-bt-node.is-zone > .vm-bt-row { border: 1px solid var(--vmx-line); }
.vm-bt-row:hover { background: var(--vmx-hover); }
.vm-bt-node.is-zone > .vm-bt-row:hover { border-color: #d1d5db; }
.vm-bt-row.is-leaf { padding: 8px 12px; }
.vm-bt-name { flex: 1 1 auto; min-width: 0; font-size: 13px; color: var(--vmx-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vm-bt-node.is-zone > .vm-bt-row .vm-bt-name { font-weight: var(--vmx-fw-label); }
.vm-bt-row.is-leaf .vm-bt-name { font-size: 12.5px; color: var(--vmx-body); }

/* how many buildings sit under this branch - outlined, in the level's own hue */
.vm-bt-badge {
	flex: 0 0 auto; min-width: 24px; text-align: center; border-radius: 999px;
	border: 1px solid var(--vmx-line); padding: 1px 8px; font-size: 11.5px;
	font-weight: var(--vmx-fw-label); color: var(--vmx-violet);
}
.vm-bt-node.is-cluster > .vm-bt-row .vm-bt-badge { color: var(--vmx-teal); }

.vm-bt-toggle {
	flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%;
	border: 1px solid var(--vmx-line); background: var(--vmx-white);
	color: var(--vmx-muted); cursor: pointer; font-size: 12px;
	display: inline-flex; align-items: center; justify-content: center; padding: 0;
}
.vm-bt-toggle .fa { transition: transform .15s; transform: rotate(180deg); }
.vm-bt-toggle.is-open .fa { transform: none; }
.vm-bt-toggle:hover { color: var(--vmx-ink); border-color: #d1d5db; }

.vm-bt-kids { padding: 4px 0 4px 22px; display: flex; flex-direction: column; gap: 2px; }
.vm-bt-node.is-cluster { border-left: 2px solid var(--vmx-line2); padding-left: 6px; }

/* the checkbox: a control, so it is allowed to fill when ticked - blue for every
   building under the branch, a lighter blue for only some of them */
.vm-bt-box {
	flex: 0 0 auto; width: 18px; height: 18px; border-radius: 5px;
	border: 1px solid #cbd5e1; background: var(--vmx-white);
	display: inline-flex; align-items: center; justify-content: center;
	color: #fff; font-size: 10px;
}
.vm-bt-box.on   { background: var(--vmx-brand); border-color: var(--vmx-brand); }
.vm-bt-box.part { background: var(--vmx-blue); border-color: var(--vmx-blue); opacity: .55; }

.vm-bt-none { padding: 26px 10px; text-align: center; font-size: 12.5px; color: var(--vmx-muted); }
.vm-bt-wait { padding: 34px 10px; text-align: center; font-size: 12.5px; color: var(--vmx-muted); }
.vm-bt-spin {
	width: 24px; height: 24px; margin: 0 auto 11px; border-radius: 50%;
	border: 3px solid var(--vmx-line); border-top-color: var(--vmx-progress);
	animation: vmbtspin .7s linear infinite;
}
@keyframes vmbtspin { to { transform: rotate(360deg); } }


/* ---------------------------------------------------------- single-choice variant
   The same dialog serving a FORM's building field (vm_buildingpick.jsp). A record
   belongs to one building, so a zone or a cluster row only opens and closes here -
   it is not a choice - and the leaf carries a radio rather than a checkbox. */

/* the trigger that replaces the form's select; full width, like the inputs around it */
.vm-bp-trigger { width: 100%; justify-content: flex-start; padding: 11px 13px; }
.vm-bp-trigger .fa-building-o { color: var(--vmx-violet); }
.vm-bp-trigger .vm-bp-text { flex: 1 1 auto; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vm-bp-trigger .fa-angle-down { color: var(--vmx-faint); }
/* nothing picked yet reads as placeholder text, the way an empty select does */
.vm-bp-trigger:not(.is-on) .vm-bp-text { color: var(--vmx-faint); }
.vm-bp-trigger.is-on { color: var(--vmx-ink); }
/* the form puts .err on the hidden select; the trigger wears it instead */
.vm-bp-trigger.err { border-color: var(--vmx-danger); }
.vm-bp-trigger.err .fa-building-o { color: var(--vmx-danger); }

/* a branch is navigation here, not a choice, so it gets no box and its whole row opens it */
.vm-bp-shell .vm-bt-row.is-branch { gap: 10px; }
.vm-bp-shell .vm-bt-toggle { pointer-events: none; }   /* the row already handles the click */
.vm-bp-shell .vm-bt-row.is-leaf.is-picked .vm-bt-name { color: var(--vmx-brand-dark); font-weight: var(--vmx-fw-label); }

.vm-bp-radio {
	flex: 0 0 auto; width: 16px; height: 16px; border-radius: 50%;
	border: 1px solid #cbd5e1; background: var(--vmx-white);
	display: inline-flex; align-items: center; justify-content: center;
}
.vm-bp-radio.on { border-color: var(--vmx-brand); border-width: 5px; }

.vm-bt-btn[disabled] { opacity: .5; cursor: not-allowed; }
.vm-bt-btn[disabled]:hover { background: var(--vmx-brand); border-color: var(--vmx-brand); }
@media (max-width: 620px) {
	.vm-bt, .vm-bt-trigger { width: 100%; }
	.vm-bt-trigger { justify-content: center; }
	.vm-bt-shell { padding: 12px; }
	.vm-bt-head, .vm-bt-body, .vm-bt-foot, .vm-bt-tools, .vm-bt-search { padding-left: 14px; padding-right: 14px; }
	.vm-bt-search i { left: 26px; }
	.vm-bt-tools .vm-bt-btn { flex: 1 1 calc(50% - 4px); }
	.vm-bt-kids { padding-left: 12px; }
	.vm-bt-foot .vm-bt-btn { flex: 1 1 auto; }
	.vm-bt-note { flex: 1 1 100%; }
}