/* ==========================================================================
   Techmin selection lists (list-group + dropdown menus)
   light: Figma node 9:2603 · dark: Figma node 9:21989 — card "Example with
   list-group" (9:5035 / 9:24544)

   The mockup draws one component: a stack of rows in a 1px frame, square
   corners, rows separated by a single shared line, the selected row filled
   with the accent. That is Bootstrap's `.list-group`, so the same geometry is
   mapped onto `.dropdown-menu` — in this CRM the dropdown IS the selection
   list (the header menus, the "more" menus on cards); a native <select>
   opens an OS popup that CSS cannot reach.

   Both components are token-driven in Bootstrap 5.3, so the markup needs no
   new classes. Selectors are single-class (0,1,0) — the weight `main.css`
   uses for `.list-group` and `.dropdown-menu` — and win on load order alone.
   Load this file last and do not add `!important`.

   Row pitch in the mockup is 46px and the first row is 47px: 21px of text
   (14 x 1.5) + 2 x 12px of padding + the 1px line, with adjacent rows sharing
   that line. The export reads 12/13px because it folds the collapsed border
   into the padding.
   ========================================================================== */

/* --- Light theme --- */
:root {
  --ls-bg: #fff;
  --ls-border: rgba(0, 0, 0, .2);
  --ls-text: #000;
  --ls-hover: #f2f2f2;
  --ls-accent: #007aff;
  --ls-on-accent: #fff;
  --ls-pad-y: 12px;
  --ls-pad-x: 20.2px;
}

/* --- Dark theme --- */
[data-bs-theme="dark"] {
  --ls-bg: #0a0a0a;
  --ls-border: #262626;
  --ls-text: #f1f1f1;
  --ls-hover: #171717;
}

/* --------------------------------------------------------------------------
   list-group — the component the mockup actually draws
   -------------------------------------------------------------------------- */

.list-group {
  --bs-list-group-color: var(--ls-text);
  --bs-list-group-bg: var(--ls-bg);
  --bs-list-group-border-color: var(--ls-border);
  --bs-list-group-border-width: 1px;
  --bs-list-group-border-radius: 0;
  --bs-list-group-item-padding-y: var(--ls-pad-y);
  --bs-list-group-item-padding-x: var(--ls-pad-x);
  --bs-list-group-action-color: var(--ls-text);
  --bs-list-group-action-hover-color: var(--ls-text);
  --bs-list-group-action-hover-bg: var(--ls-hover);
  --bs-list-group-action-active-color: var(--ls-text);
  --bs-list-group-action-active-bg: var(--ls-hover);
  --bs-list-group-active-color: var(--ls-on-accent);
  --bs-list-group-active-bg: var(--ls-accent);
  --bs-list-group-active-border-color: var(--ls-accent);

  font-family: Poppins, "Noto Sans", sans-serif;
  font-size: 14px;
  line-height: 21px;
}

/* --------------------------------------------------------------------------
   Dropdown menus — same frame and the same rows
   `--bs-dropdown-padding-y: 0` so the rows sit against the frame, exactly as
   the list does in the mockup.
   -------------------------------------------------------------------------- */

.dropdown-menu {
  --bs-dropdown-color: var(--ls-text);
  --bs-dropdown-bg: var(--ls-bg);
  --bs-dropdown-border-color: var(--ls-border);
  --bs-dropdown-border-width: 1px;
  --bs-dropdown-border-radius: 0;
  --bs-dropdown-inner-border-radius: 0;
  --bs-dropdown-divider-bg: var(--ls-border);
  --bs-dropdown-box-shadow: none;
  --bs-dropdown-padding-y: 0;
  --bs-dropdown-padding-x: 0;
  --bs-dropdown-font-size: 14px;
  --bs-dropdown-item-padding-y: var(--ls-pad-y);
  --bs-dropdown-item-padding-x: var(--ls-pad-x);
  --bs-dropdown-link-color: var(--ls-text);
  --bs-dropdown-link-hover-color: var(--ls-text);
  --bs-dropdown-link-hover-bg: var(--ls-hover);
  --bs-dropdown-link-active-color: var(--ls-on-accent);
  --bs-dropdown-link-active-bg: var(--ls-accent);

  font-family: Poppins, "Noto Sans", sans-serif;
  line-height: 21px;
  border: 1px solid var(--ls-border);
  border-radius: 0;
  box-shadow: none;
}

/* The rows carry the shared line themselves, so the rule survives any wrapper
   the markup puts around them (`<li>`, `<div>`, or the link on its own) —
   `.dropdown-item + .dropdown-item` would not. */
.dropdown-item {
  border-top: 1px solid var(--ls-border);
}

.dropdown-menu > :first-child,
.dropdown-menu > :first-child .dropdown-item {
  border-top: 0;
}

/* Every row is already separated by a line, so the explicit divider would
   only add a second one. */
.dropdown-divider {
  display: none;
}

/* --------------------------------------------------------------------------
   Header menus
   `main.css` and `dark-theme.css` reach these through
   `.top-header .navbar .dropdown-menu`, so the frame has to be restated at
   that depth. The prefix mirrors `header-techmin.css`.
   -------------------------------------------------------------------------- */

[data-bs-theme] body .top-header .navbar .dropdown-menu {
  border: 1px solid var(--ls-border);
  border-radius: 0;
  box-shadow: none;
}

/* --------------------------------------------------------------------------
   The select widget (assets/js/select-techmin.js)
   A native <select> opens an OS popup, so the control is rebuilt as a
   dropdown: the toggle carries `.form-select` and therefore the field
   geometry from `forms-techmin.css`, the menu is the list above.
   -------------------------------------------------------------------------- */

.ts-select {
  position: relative;
  display: block;
}

/* the real <select> stays in the DOM — pages read and write it — but leaves
   the layout to the widget */
.ts-select-native {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: 0;
  overflow: hidden;
  clip-path: inset(50%);
  border: 0;
  opacity: 0;
  pointer-events: none;
}

/* only what a <button> does differently from a <select> */
.ts-select-toggle {
  display: flex;
  align-items: center;
  width: 100%;
  overflow: hidden;
  text-align: left;
}

.ts-select-label {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ts-select-menu {
  min-width: 100%;
  max-height: 320px;
  overflow-y: auto;
}

/* <optgroup> label — a caption row, not a choice */
.ts-select-group {
  padding: var(--ls-pad-y) var(--ls-pad-x);
  font-weight: 600;
  color: var(--ls-text);
  border-top: 1px solid var(--ls-border);
}

/* an input-group lays out its own children, and the widget is one now */
.input-group > .ts-select {
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
}

/* "Show N entries" sits inside a sentence: that one stays inline and keeps
   the geometry `tables-techmin.css` gives the native control */
.ts-select-inline {
  display: inline-block;
  width: auto;
  vertical-align: middle;
}

.dt-techmin .dataTables_length .ts-select-toggle {
  min-width: 80px;
  height: 31.33px;
  margin: 0 5px;
  padding: 0 30px 0 12.8px;
  font-size: 13.6px;
  line-height: 20.4px;
  color: var(--dt-text);
  background-color: var(--dt-bg);
  border: 1px solid var(--dt-border);
}

.dt-techmin .dataTables_length .ts-select-toggle:focus {
  border-color: var(--dt-accent);
  box-shadow: none;
}