/* ============================================================================
   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}

/* ---------------------------------------------------------------------------
   6. THE EDITABLE SELECT
   A select marked data-custom-input lets you type a value that is not in the
   list -- "Parameter name" on the sensor form is the one that matters. For
   those, bootstrap-select puts a real <input class="bs-input form-control">
   INSIDE the toggle button.

   Both carry .form-control, so every field skin in the app paints them both:
   a bordered, rounded, filled box sitting inside another bordered, rounded,
   filled box. That is the double pill reported on Add sensor.

   Section 1 above flattens the WRAPPER for the same reason. This is the same
   problem one level deeper: the button is the field, and the input inside it
   is only where the text goes.

   It belongs in THIS file, not in the admin sheet, because this file owns the
   widget's internals and loads after it -- a rule for it anywhere earlier is
   overruled here and silently does nothing.
   --------------------------------------------------------------------------- */
/* .bs-input.form-control, both named: the rule this has to beat is
   `body.trakzo-admin:not(#_) .modal .modal-content input.form-control`, which
   has exactly the same weight, and ties are decided by source order -- too
   fragile to rely on when a stylesheet gets reordered. Naming both of the
   element's classes settles it outright. */
body.trakzo:not(#_) .bootstrap-select .dropdown-toggle > input.bs-input.form-control,
body.trakzo:not(#_) .bootstrap-select .dropdown-toggle > input.bs-input{
  flex:1 1 auto !important;min-width:0 !important;width:100% !important;
  background:transparent !important;background-image:none !important;
  /* longhands: the shorthands alone were losing to the field skins, which set
     these per-side. Same reason the radius is spelled out corner by corner. */
  border-width:0 !important;border-style:none !important;
  border-top-width:0 !important;border-right-width:0 !important;
  border-bottom-width:0 !important;border-left-width:0 !important;
  border-top-left-radius:0 !important;border-top-right-radius:0 !important;
  border-bottom-left-radius:0 !important;border-bottom-right-radius:0 !important;
  box-shadow:none !important;outline:0 !important;
  height:auto !important;min-height:0 !important;padding:0 !important;margin:0 !important;
  font:inherit !important;color:inherit !important}
body.trakzo:not(#_) .bootstrap-select .dropdown-toggle > input.bs-input::placeholder{
  color:var(--fg3) !important;opacity:1 !important}