/* ============================================================================
   TEZTRAK DROPDOWN — the one select and the one menu (2026-09-18)

   WHY THIS FILE EXISTS
   Same story as the checkbox. The dropdown was described over and over, once per
   screen that happened to need it: the closed control was declared three times
   in dialogs alone (height auto, then 40px, then 39px, last one winning), and the
   open panel seven more times — header, events tab, dialog, sidebar history form,
   dataTables, admin pages, admin dialogs — each restating background, radius,
   item height and hover in slightly different values.

   This file is now the only description of both parts. Change a dropdown HERE.

   THE TWO PARTS
   1. THE CONTROL  .bootstrap-select > .dropdown-toggle — the field you click.
      bootstrap-select builds it from a <select>; the <select> itself stays in the
      DOM (that is the library's own technique) and must not be display:none.
   2. THE MENU     .dropdown-menu — the panel that opens. It is shared: the same
      element serves a select's option list, a row's action menu and the header
      account menu, so it is themed once for all three.

   WHAT IS NOT HERE
   Placement and behaviour: width, position, z-index, portal handling
   (data-position="fixed" is driven by app.js), how many columns a multi-select
   panel uses, how tall it may grow inside a given dialog. Those differ by screen
   for real reasons, and they live with the screen — exactly as checkbox spacing
   does. If you are tempted to restate a COLOUR or a RADIUS in a screen's file,
   that is this file's job instead.

   TOKENS
   The admin shell, for one, wants a slightly rounder field than the map. It sets
   the token (see trakzo-admin.css) rather than re-declaring the control:

       body.trakzo-admin{--tz-field-radius:10px}

   ABOUT body.trakzo:not(#_)
   The previous developer's skin (assets/custom/css.css) loads AFTER this file on
   admin pages and declares e.g. `.bootstrap-select.btn-group .dropdown-menu` with
   !important — three classes, which outranks a plain `body.trakzo .dropdown-menu`.
   The harmless `:not(#_)` adds one pseudo-class of specificity so the component
   wins wherever it is loaded, without needing to touch that file.

   DEPENDS ON
   trakzo-checkbox.css — a multi-select's tick is the checkbox, and reuses its
   tokens so the two cannot drift apart. Load order: checkbox, then this.
   ============================================================================ */

body.trakzo{
  --tz-field-h:39px;
  --tz-field-radius:8px;
  --tz-field-bg:var(--raised);
  --tz-field-border:var(--line);
  --tz-field-fg:var(--fg);
  --tz-field-placeholder:var(--fg3);

  --tz-menu-bg:var(--panel);
  --tz-menu-radius:12px;
  --tz-menu-pad:6px;
  --tz-menu-shadow:0 18px 44px -20px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.06);
  --tz-item-h:34px;
  --tz-search-h:34px;
  --tz-item-radius:8px;
  --tz-item-fg:var(--fg2);
  --tz-item-hover-bg:var(--hover);
  --tz-item-hover-fg:var(--fg);
  --tz-item-on-bg:var(--lime-s);
  --tz-item-on-fg:var(--fg);
}

/* ---------------------------------------------------------------------------
   1. THE WRAPPER
   bootstrap-select copies the <select>'s classes onto its wrapper, so the
   wrapper often carries .form-control and gets painted as a field itself — a
   second box behind the real one. It is a positioning box and nothing else.
   --------------------------------------------------------------------------- */
body.trakzo:not(#_) .bootstrap-select,
body.trakzo:not(#_) .bootstrap-select.form-control{
  position:relative !important;
  background:transparent !important;background-image:none !important;
  border:0 !important;box-shadow:none !important;
  height:auto !important;min-height:0 !important;padding:0 !important;
  border-radius:0 !important}

/* the original <select> must stay reachable for form submit — bootstrap-select
   parks it off-view rather than hiding it, and hiding it breaks the library */
body.trakzo:not(#_) .bootstrap-select > select{
  position:absolute !important;bottom:0 !important;left:50% !important;
  display:block !important;width:.5px !important;height:100% !important;
  min-height:0 !important;padding:0 !important;opacity:0 !important;
  border:0 !important;background:transparent !important;box-shadow:none !important}

/* ---------------------------------------------------------------------------
   2. THE CONTROL
   One field, the same metrics as an <input>, whatever screen it is on.
   --------------------------------------------------------------------------- */
body.trakzo:not(#_) .bootstrap-select > .dropdown-toggle,
body.trakzo:not(#_) .bootstrap-select > .dropdown-toggle.btn-default{
  display:flex !important;align-items:center !important;gap:8px !important;
  /* Bootstrap floats a .btn inside a .btn-group, and bootstrap-select's wrapper
     IS a .btn-group. A floated only child leaves the wrapper 0px tall, so the
     next element in the form was laid out alongside the float instead of below
     it — which is how "Device type:" ended up outside the dialog with its label
     squeezed to zero width. The field is a block in a form, never a float. */
  float:none !important;
  width:100% !important;height:var(--tz-field-h) !important;
  padding:0 34px 0 12px !important;margin:0 !important;
  background:var(--tz-field-bg) !important;background-image:none !important;
  border:1.5px solid var(--tz-field-border) !important;
  border-radius:var(--tz-field-radius) !important;
  color:var(--tz-field-fg) !important;
  font:13.5px var(--sans) !important;text-align:left !important;
  box-shadow:none !important;text-shadow:none !important;
  -webkit-backdrop-filter:none !important;backdrop-filter:none !important;
  outline:0;transition:border-color .12s ease, background-color .12s ease}

body.trakzo:not(#_) .bootstrap-select > .dropdown-toggle .filter-option{
  flex:1 1 auto !important;min-width:0 !important;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  text-align:left !important;color:inherit !important}

/* nothing selected yet reads as a prompt, not as a value */
body.trakzo:not(#_) .bootstrap-select.bs-placeholder > .dropdown-toggle .filter-option,
body.trakzo:not(#_) .bootstrap-select > .dropdown-toggle.bs-placeholder .filter-option{
  color:var(--tz-field-placeholder) !important}

/* open is not focus: the panel being down must not paint a focus ring */
body.trakzo:not(#_) .bootstrap-select.open > .dropdown-toggle{
  background:var(--bg) !important;border-color:var(--line-strong) !important}
body.trakzo:not(#_) .bootstrap-select > .dropdown-toggle:focus-visible{
  border-color:var(--lime) !important;box-shadow:0 0 0 3px var(--lime-s) !important}
body.trakzo:not(#_) .bootstrap-select.disabled > .dropdown-toggle,
body.trakzo:not(#_) .bootstrap-select > .dropdown-toggle[disabled]{opacity:.55 !important;cursor:default}

/* The caret: ONE chevron that rotates on open.

   bootstrap-select ships a CSS border-triangle, the old skin adds an icon-font
   glyph on ::before, and this theme used to draw both in different places. It is
   a masked SVG here so it does not depend on the icon font being loaded, and it
   is drawn on .caret whether or not the library wrapped it in .bs-caret. */
body.trakzo:not(#_) .bootstrap-select > .dropdown-toggle > .bs-caret{
  position:absolute !important;right:12px;top:50%;transform:translateY(-50%);
  width:14px;height:14px;margin:0;display:grid;place-items:center;pointer-events:none}
body.trakzo:not(#_) .bootstrap-select > .dropdown-toggle > .caret{
  position:absolute !important;right:12px;top:50%;margin:0 !important;
  transform:translateY(-50%)}
body.trakzo:not(#_) .bootstrap-select > .dropdown-toggle .caret{
  width:14px !important;height:14px !important;
  border:0 !important;background-color:var(--fg3) !important;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") center/contain no-repeat;
  transition:transform .15s ease, background-color .12s ease}
body.trakzo:not(#_) .bootstrap-select > .dropdown-toggle > .bs-caret > .caret{position:static !important;transform:none}
body.trakzo:not(#_) .bootstrap-select > .dropdown-toggle .caret::before,
body.trakzo:not(#_) .bootstrap-select > .dropdown-toggle .caret::after{content:none !important;display:none !important}
body.trakzo:not(#_) .bootstrap-select.open > .dropdown-toggle .caret{
  background-color:var(--fg) !important;transform:rotate(180deg)}
body.trakzo:not(#_) .bootstrap-select.open > .dropdown-toggle > .caret{transform:translateY(-50%) rotate(180deg)}

/* ---------------------------------------------------------------------------
   3. THE MENU
   Shared by selects, row action menus and the header menus.
   --------------------------------------------------------------------------- */
body.trakzo:not(#_) .dropdown-menu{
  /* a menu never inherits the typography of whatever it opened from. The bulk
     menu in a table header sat inside a <th>, so it was picking up the header's
     uppercase + letter-spacing and reading as three shouted labels. */
  text-transform:none !important;letter-spacing:normal !important;
  background:var(--tz-menu-bg) !important;background-image:none !important;
  border:1px solid var(--line) !important;
  border-radius:var(--tz-menu-radius) !important;
  padding:var(--tz-menu-pad) !important;margin:4px 0 0 !important;
  color:var(--tz-item-fg) !important;
  box-shadow:var(--tz-menu-shadow) !important;
  -webkit-backdrop-filter:none !important;backdrop-filter:none !important}

/* the inner list of a select is not a second panel — it is the list inside one */
body.trakzo:not(#_) .dropdown-menu.inner{
  background:transparent !important;border:0 !important;
  border-radius:0 !important;padding:0 !important;margin:0 !important;
  box-shadow:none !important}

body.trakzo:not(#_) .dropdown-menu > li > a,
body.trakzo:not(#_) .dropdown-menu.inner > li > a{
  display:flex !important;align-items:center !important;gap:10px !important;
  min-height:var(--tz-item-h) !important;padding:0 12px !important;margin:1px 0 !important;
  border-radius:var(--tz-item-radius) !important;
  background:transparent !important;
  color:var(--tz-item-fg) !important;
  font:400 13.5px/1.35 var(--sans) !important;text-shadow:none !important;
  white-space:normal;overflow-wrap:anywhere}
body.trakzo:not(#_) .dropdown-menu > li > a:hover,
body.trakzo:not(#_) .dropdown-menu > li > a:focus,
body.trakzo:not(#_) .dropdown-menu.inner > li > a:hover,
body.trakzo:not(#_) .dropdown-menu.inner > li > a:focus,
body.trakzo:not(#_) .dropdown-menu > li.active > a{
  background:var(--tz-item-hover-bg) !important;color:var(--tz-item-hover-fg) !important}
body.trakzo:not(#_) .dropdown-menu > li.selected > a,
body.trakzo:not(#_) .dropdown-menu.inner > li.selected > a{
  background:var(--tz-item-on-bg) !important;color:var(--tz-item-on-fg) !important;font-weight:600 !important}
body.trakzo:not(#_) .dropdown-menu > li > a .text,
body.trakzo:not(#_) .dropdown-menu.inner > li > a .text{color:inherit !important}
/* the legacy skin draws an icon-font glyph in front of an option's label, which
   showed up as a second white square next to the tick on the admin's multi-selects.
   The mark on .check-mark is the only mark an option has. */
body.trakzo:not(#_) .dropdown-menu > li > a .text::before,
body.trakzo:not(#_) .dropdown-menu > li > a .text::after,
body.trakzo:not(#_) .dropdown-menu.inner > li > a .text::before,
body.trakzo:not(#_) .dropdown-menu.inner > li > a .text::after{content:none !important;display:none !important}
body.trakzo:not(#_) .dropdown-menu > li.disabled > a{opacity:.5 !important;cursor:default}

body.trakzo:not(#_) .dropdown-menu > li.divider,
body.trakzo:not(#_) .dropdown-menu.inner > li.divider{
  height:1px !important;margin:6px 4px !important;padding:0 !important;
  background:var(--line) !important;overflow:hidden}

body.trakzo:not(#_) .dropdown-menu > li.dropdown-header,
body.trakzo:not(#_) .dropdown-menu.inner > li.dropdown-header{
  padding:8px 12px 6px !important;
  color:var(--fg3) !important;font:600 11.5px/1.2 var(--sans) !important;
  text-transform:uppercase;letter-spacing:.04em}

/* ---------------------------------------------------------------------------
   4. THE SELECT PANEL'S OWN PARTS
   Search field, Select all / Deselect All, "no results", and the tick a
   multi-select shows — which is the checkbox, borrowed from its component.
   --------------------------------------------------------------------------- */
body.trakzo:not(#_) .bootstrap-select .bs-searchbox{padding:6px 6px 8px !important}
body.trakzo:not(#_) .bootstrap-select .bs-searchbox input{
  height:var(--tz-search-h) !important;padding:0 12px !important;
  background:var(--raised) !important;color:var(--fg) !important;
  border:1px solid var(--line) !important;border-radius:8px !important;
  font:13.5px var(--sans) !important;box-shadow:none !important}
body.trakzo:not(#_) .bootstrap-select .bs-searchbox input:focus{border-color:var(--lime) !important}

body.trakzo:not(#_) .bootstrap-select .bs-actionsbox{padding:6px 6px 0 !important}
body.trakzo:not(#_) .bootstrap-select .bs-actionsbox .btn{
  height:32px !important;padding:0 12px !important;border-radius:8px !important;
  background:var(--raised) !important;border:1px solid var(--line) !important;
  color:var(--fg2) !important;font:500 12.5px var(--sans) !important;box-shadow:none !important}
body.trakzo:not(#_) .bootstrap-select .bs-actionsbox .btn:hover{
  background:var(--hover) !important;color:var(--fg) !important}

body.trakzo:not(#_) .bootstrap-select .no-results{
  padding:10px 12px !important;margin:0 !important;
  background:transparent !important;color:var(--fg3) !important;font-size:12.5px !important}

/* the tick: same box as a checkbox, from trakzo-checkbox.css's tokens */
body.trakzo:not(#_) .bootstrap-select.show-tick .dropdown-menu.inner > li > a .check-mark{
  flex:0 0 var(--tz-check-size) !important;order:-1;
  width:var(--tz-check-size) !important;height:var(--tz-check-size) !important;
  position:relative !important;left:auto !important;right:auto !important;
  top:auto !important;bottom:auto !important;float:none !important;margin:0 !important;
  display:block !important;opacity:1 !important;
  border:0 !important;border-radius:var(--tz-check-radius) !important;
  background-color:var(--tz-check-bg) !important;background-image:none !important;
  background-repeat:no-repeat !important;background-position:50% 50% !important;
  background-size:var(--tz-check-mark-size) var(--tz-check-mark-size) !important;
  box-shadow:inset 0 0 0 1.5px var(--tz-check-ring) !important;
  font-size:0 !important;color:transparent !important}
body.trakzo:not(#_) .bootstrap-select.show-tick .dropdown-menu.inner > li > a .check-mark::before,
body.trakzo:not(#_) .bootstrap-select.show-tick .dropdown-menu.inner > li > a .check-mark::after{
  content:none !important;display:none !important}
body.trakzo:not(#_) .bootstrap-select.show-tick .dropdown-menu.inner > li.selected > a .check-mark{
  background-color:var(--tz-check-on) !important;
  background-image:var(--tz-check-tick) !important;
  box-shadow:none !important}
/* a single-select has no boxes — its tick is a mark, not a control */
body.trakzo:not(#_) .bootstrap-select:not(.show-tick) .dropdown-menu.inner > li > a .check-mark{
  background:none !important;box-shadow:none !important;border:0 !important;
  color:var(--lime) !important;font-size:inherit !important}

/* a selected row in a multi-select is not "filled" — the tick already says so */
body.trakzo:not(#_) .bootstrap-select.show-tick .dropdown-menu.inner > li.selected > a{
  background:transparent !important;color:var(--fg) !important;font-weight:400 !important}
body.trakzo:not(#_) .bootstrap-select.show-tick .dropdown-menu.inner > li.selected > a:hover{
  background:var(--tz-item-hover-bg) !important}

/* ---------------------------------------------------------------------------
   5. SIZES
   --------------------------------------------------------------------------- */
body.trakzo:not(#_) .tz-select--sm .dropdown-toggle{--tz-field-h:32px;font-size:13px !important}
body.trakzo:not(#_) .tz-select--lg .dropdown-toggle{--tz-field-h:44px}