/* ═══════════════════════════════════════════════════════════
   THEMED SELECT
   Replaces the native browser dropdown panel with a custom
   popover that matches the Syncoy dark/gold theme.
   Used by /js/themed-select.js. Safe to include on any page.
   ═══════════════════════════════════════════════════════════ */

.ts-wrap {
  position: relative;
  display: inline-block;
  min-width: 120px;
  /* Do NOT default to 100% — otherwise a narrow sort select stretches across
     its grid cell. Pages that WANT full width already set width on the select
     or use flex/grid parents that constrain it. */
  width: auto;
  max-width: 100%;
}
/* Inside .field groups (invoice editor fields) and .modal-field (admin modals),
   the native select was width:100% — mirror that on the wrap. */
.field .ts-wrap,
.modal-field .ts-wrap,
.rail__section .ts-wrap,
.ap-select-wrap.ts-wrap,
.ip-wrap .ts-wrap,
.cal-modal .ts-wrap,
.bank-select-wrap .ts-wrap,
form .ts-wrap {
  width: 100%;
}
.ts-wrap select.ts-native {
  position: absolute; inset: 0;
  opacity: 0;
  pointer-events: none;
  width: 100%; height: 100%;
  border: none; margin: 0; padding: 0;
}
.ts-trigger {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  width: 100%;
  background: var(--input-bg, rgba(255,255,255,0.04));
  border: 1px solid var(--input-border, var(--border, rgba(255,255,255,0.08)));
  border-radius: 8px;
  color: var(--text, #f0ede8);
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  font-weight: 500;
  padding: 9px 12px;
  cursor: pointer;
  user-select: none;
  line-height: 1.3;
  transition: border-color 0.18s, background 0.18s;
  text-align: left;
}
.ts-trigger:hover { border-color: rgba(200,169,126,0.35); }
.ts-trigger.is-open { border-color: rgba(200,169,126,0.5); background: rgba(200,169,126,0.04); }
.ts-trigger:focus { outline: none; border-color: rgba(200,169,126,0.5); }
.ts-trigger[disabled], .ts-wrap.is-disabled .ts-trigger {
  opacity: 0.55; cursor: not-allowed;
}
.ts-trigger-label {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ts-trigger-label.ts-placeholder { color: rgba(240,237,232,0.4); }
.ts-trigger-chevron {
  flex-shrink: 0;
  color: var(--gold, #C8A97E);
  transition: transform 0.18s;
  width: 12px; height: 12px;
  display: flex; align-items: center; justify-content: center;
}
.ts-trigger.is-open .ts-trigger-chevron { transform: rotate(180deg); }

.ts-menu {
  position: fixed;
  z-index: 10050;
  min-width: 160px;
  max-height: 280px;
  overflow-y: auto;
  background: #14141a;
  border: 1px solid rgba(200,169,126,0.25);
  border-radius: 8px;
  padding: 4px;
  box-shadow: 0 14px 40px rgba(0,0,0,0.55);
  animation: ts-menu-in 0.14s cubic-bezier(0.22, 1, 0.36, 1) both;
  font-family: 'Poppins', sans-serif;
}
@keyframes ts-menu-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ts-menu::-webkit-scrollbar { width: 8px; }
.ts-menu::-webkit-scrollbar-track { background: transparent; }
.ts-menu::-webkit-scrollbar-thumb { background: rgba(200,169,126,0.25); border-radius: 4px; }

.ts-option {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  border-radius: 5px;
  font-size: 12px;
  color: #f0ede8;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  line-height: 1.4;
}
.ts-option:hover, .ts-option.is-focused {
  background: rgba(200,169,126,0.1);
  color: #f0ede8;
}
.ts-option.is-current {
  background: rgba(200,169,126,0.08);
  color: var(--gold, #C8A97E);
  font-weight: 600;
}
.ts-option.is-current::before {
  content: '';
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--gold, #C8A97E);
  flex-shrink: 0;
}
.ts-option.is-disabled { opacity: 0.4; cursor: not-allowed; }
.ts-optgroup-label {
  padding: 8px 12px 4px;
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(200,169,126,0.6);
}
.ts-optgroup-label:not(:first-child) {
  border-top: 1px solid rgba(255,255,255,0.04);
  margin-top: 4px;
  padding-top: 10px;
}
.ts-menu-empty {
  padding: 16px 12px;
  text-align: center;
  color: rgba(240,237,232,0.35);
  font-size: 11px;
  font-style: italic;
}

/* Light-theme variant (invoice editor) */
[data-theme="light"] .ts-menu {
  background: #ffffff;
  border-color: rgba(0,0,0,0.12);
  box-shadow: 0 14px 40px rgba(0,0,0,0.18);
}
[data-theme="light"] .ts-option { color: #1a1714; }
[data-theme="light"] .ts-option:hover,
[data-theme="light"] .ts-option.is-focused { background: rgba(200,169,126,0.18); color: #1a1714; }
[data-theme="light"] .ts-option.is-current { background: rgba(200,169,126,0.15); color: #8c6d3e; }
[data-theme="light"] .ts-option.is-current::before { background: #8c6d3e; }
[data-theme="light"] .ts-trigger {
  background: #f6f3ed;
  border-color: rgba(0,0,0,0.1);
  color: #1a1714;
}
[data-theme="light"] .ts-trigger-label.ts-placeholder { color: rgba(26,23,20,0.4); }
[data-theme="light"] .ts-optgroup-label { color: rgba(140,109,62,0.8); }