/* custom-select.css — app-branded dropdowns (see custom-select.js). Gives every
   <select> a uniform trigger + floating popup that looks identical across every
   OS, replacing the native option list the browser would otherwise draw.

   Consumes the app's design tokens with fallbacks so it degrades on pages that
   don't define a :root palette. custom-select.css is linked LAST, so `.cs-trigger`
   (single-class) wins shared properties over the classes copied from the native
   select; those copied classes still contribute what the base leaves unset
   (e.g. `.status-select` max-width) and, crucially, the higher-specificity
   `.status-select[data-value="…"]` colour rules still win. */

/* --- wrapper + hidden native ---------------------------------------------- */
.cs {
  position: relative;
  display: block;
}

.cs-native {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none; /* the trigger handles interaction */
}

/* --- trigger button ------------------------------------------------------- */
.cs-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 100%;
  min-height: var(--field-height, 34px);
  box-sizing: border-box;
  padding: 7px 34px 7px 10px; /* right pad reserves room for the chevron */
  border: 1px solid var(--border, #dddbd8);
  border-radius: var(--radius-sm, 8px);
  background-color: var(--surface, #fff);
  background-image: none; /* suppress any chevron image from copied classes */
  color: var(--text, #0f172a);
  font-family: 'Inter', 'Libre Franklin', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  transition:
    border-color 140ms ease,
    box-shadow 140ms ease,
    background-color 140ms ease;
}

.cs-value {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cs-trigger.is-placeholder .cs-value {
  color: var(--muted, #94a3b8);
}

.cs-chevron {
  position: absolute;
  right: 10px;
  top: 50%;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  /* App token, with an inline fallback for pages that don't define it. */
  background: var(--select-chevron, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%235f6b76' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")) no-repeat center / 16px 16px;
  pointer-events: none;
}

.cs-trigger:hover {
  border-color: var(--border-strong, rgba(46, 41, 78, 0.2));
}

.cs-trigger:focus-visible,
.cs-trigger[aria-expanded="true"] {
  outline: none;
  border-color: rgba(221, 217, 42, 0.7);
  box-shadow: 0 0 0 3px rgba(221, 217, 42, 0.2);
}

.cs-trigger:disabled {
  cursor: not-allowed;
  background-color: var(--surface-3, #e8e7e4);
  color: var(--muted, #94a3b8);
}

/* Compact contexts keep their smaller footprint (specificity beats the base). */
.cs-trigger.status-select,
.cs-trigger.link-select {
  min-height: 30px;
  padding: 3px 24px 3px 8px;
  font-size: 12px;
  font-weight: 600;
}
.cs-trigger.status-select .cs-chevron,
.cs-trigger.link-select .cs-chevron {
  right: 6px;
  width: 14px;
  height: 14px;
  background-size: 14px 14px;
}

/* Inline "Manage" button row: let the wrapper flex like the old select did. */
.system-select-row .cs {
  flex: 1 1 auto;
  min-width: 0;
}

/* --- floating popup ------------------------------------------------------- */
.cs-popup {
  position: fixed;
  z-index: 10001; /* above drawers (60); coexists with the account menu (9999) */
  box-sizing: border-box;
  padding: 4px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #dddbd8);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(15, 23, 42, 0.16);
  color: var(--text, #0f172a);
  font-family: 'Inter', 'Libre Franklin', system-ui, sans-serif;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}
.cs-popup[hidden] {
  display: none;
}

.cs-list {
  outline: none;
}

.cs-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.3;
  color: var(--text, #0f172a);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cs-option[hidden] {
  display: none;
}
.cs-option.is-active {
  background: var(--primary-bg, rgba(221, 217, 42, 0.18));
}
.cs-option.is-selected {
  font-weight: 600;
}
.cs-option.is-selected::after {
  content: '✓';
  margin-left: auto;
  color: var(--primary-2, #b8b520);
}
.cs-option[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
}

/* --- search box (long lists) --------------------------------------------- */
.cs-search-wrap {
  position: sticky;
  top: 0;
  padding: 2px 2px 6px;
  background: var(--surface, #fff);
}
.cs-search {
  box-sizing: border-box;
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--border, #dddbd8);
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  color: var(--text, #0f172a);
  outline: none;
}
.cs-search:focus {
  border-color: rgba(221, 217, 42, 0.7);
  box-shadow: 0 0 0 3px rgba(221, 217, 42, 0.2);
}