/* ==========================================================================
   Navitrack CRM — v2 additions (load AFTER navitrack-crm-tokens.css)
   2026-09-27 · Vire · no new colours: new tokens below are aliases of v1 tokens
   ========================================================================== */

/* ---------- 1. Brand block = Admin menu button ---------- */
/* Replaces <a class="brand"> … <span class="brand__sub">. Remove .brand__sub markup entirely. */
.brand-menu { position: relative; flex: none; }
.brand-menu__btn {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  height: 64px; padding: 0 var(--sp-3) 0 var(--sp-1); margin-left: calc(var(--sp-1) * -1);
  border: var(--bw) solid transparent; border-radius: var(--r-lg);
  background: none; color: var(--text); font: inherit; cursor: pointer;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.brand-menu__btn:hover { background: var(--surface-3); }
.brand-menu__btn[aria-expanded="true"] { background: var(--surface-3); border-color: var(--border); }
.brand-menu__btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.brand-menu__btn .brand__logo { height: 56px; }
.brand-menu__btn .brand__name { font-size: 17px; line-height: 24px; font-weight: var(--fw-bold); letter-spacing: -0.015em; white-space: nowrap; }
.brand-menu__chev {
  width: 24px; height: 24px; display: grid; place-items: center; margin-left: calc(var(--sp-1) * -1);
  border-radius: var(--r-sm); color: var(--text-muted); transition: transform var(--dur) var(--ease), color var(--dur-fast);
}
.brand-menu__btn:hover .brand-menu__chev { color: var(--text); }
.brand-menu__btn[aria-expanded="true"] .brand-menu__chev { transform: rotate(180deg); color: var(--text); }

/* Admin dropdown (extends .menu; class name kept) */
.menu--settings { left: 0; top: calc(100% + 6px); width: 320px; padding: var(--sp-2) var(--sp-1); }
.menu__group + .menu__group { margin-top: var(--sp-1); padding-top: var(--sp-2); border-top: var(--bw) solid var(--border); }
.menu__heading {
  padding: var(--sp-1) var(--sp-3) 6px; font-size: var(--fs-xs); line-height: var(--lh-xs);
  font-weight: var(--fw-semibold); letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted);
}
.menu__item--rich { height: auto; min-height: 52px; padding: var(--sp-2) var(--sp-3); align-items: flex-start; text-align: left; }
.menu__item--rich > .icon { margin-top: 2px; }
.menu__text { display: grid; gap: 2px; flex: 1; min-width: 0; }
.menu__label { font-weight: var(--fw-semibold); color: var(--text); line-height: var(--lh-md); }
.menu__desc { font-size: var(--fs-xs); line-height: var(--lh-xs); color: var(--text-muted); font-weight: var(--fw-regular); }
.menu__item:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.menu__item[aria-current="page"] { background: var(--brand-50); }
.menu__item[aria-current="page"] .menu__label, .menu__item[aria-current="page"] > .icon { color: var(--brand-700); }
.menu__item[aria-disabled="true"] { cursor: default; }
.menu__item[aria-disabled="true"]:hover { background: transparent; }
.menu__item[aria-disabled="true"].is-active { background: var(--surface-2); } /* keyboard focus on a disabled item */
.menu__item[aria-disabled="true"] .menu__label,
.menu__item[aria-disabled="true"] > .icon { color: var(--text-disabled); }
.tag-soon {
  flex: none; align-self: center; height: 20px; padding: 0 var(--sp-2); display: inline-flex; align-items: center;
  border-radius: var(--r-full); background: var(--surface-3); color: var(--text-2);
  font-size: 11px; line-height: 16px; font-weight: var(--fw-semibold); white-space: nowrap;
}

/* Breadcrumb segment that is not a link (e.g. "Admin") */
.breadcrumb__static { color: var(--text-muted); font-weight: var(--fw-medium); }

/* ---------- 2. Forms: sub-groups, VAT, billing ---------- */
.form-subhead {
  grid-column: 1 / -1; display: flex; align-items: center; gap: var(--sp-3);
  font-size: var(--fs-xs); line-height: var(--lh-xs); font-weight: var(--fw-semibold);
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted);
}
.form-subhead::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.form-subhead:not(:first-child) { margin-top: var(--sp-2); }
.form-section__tag { display: inline-block; margin-left: var(--sp-2); vertical-align: 1px; }

/* VAT field: full row so hint/errors get width; input itself stays short */
.input--vat { max-width: 240px; text-transform: uppercase; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.input--vat::placeholder { text-transform: none; letter-spacing: 0; }
.field__row { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.lock-note { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); line-height: var(--lh-xs); color: var(--text-muted); }
.lock-note .icon { width: 14px; height: 14px; }
.hint strong, .normalized { color: var(--text-2); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.error-msg a { color: var(--danger); text-decoration: underline; text-underline-offset: 2px; font-weight: var(--fw-semibold); }
.error-msg a:hover { color: var(--danger-hover); }
.error-msg--block { align-items: flex-start; }
.error-msg--block .icon { margin-top: 1px; }

/* "Same as company address" collapsed state */
.address-summary {
  grid-column: 1 / -1; display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); border: var(--bw) dashed var(--border-strong); border-radius: var(--r-md);
  background: var(--surface-2); color: var(--text-2); font-size: var(--fs-sm); line-height: var(--lh-sm);
}
.address-summary .icon { color: var(--text-muted); margin-top: 1px; }

/* ---------- 3. Related-record cards (Contacts / Devices) ---------- */
.card__title-row { display: flex; align-items: center; gap: var(--sp-2); }
.list__item--actions { position: relative; grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
.list__head { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.list__sub { font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--text-muted); }
.list__contact { display: flex; flex-wrap: wrap; gap: 2px var(--sp-3); margin-top: 2px; font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--text-2); }
.list__contact span { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.list__contact .icon { width: 14px; height: 14px; color: var(--text-muted); }
.list__actions { display: flex; gap: 2px; margin: -4px -8px 0 0; }
.list__actions .btn--ghost { --_fg: var(--text-muted); }
.list__actions .btn--ghost:hover { --_fg: var(--text); }
.list__item.is-hover { background: #f4f8fb; }
.card__note {
  display: flex; gap: var(--sp-2); padding: var(--sp-3) var(--sp-5); border-top: var(--bw) solid var(--border);
  background: var(--surface-2); font-size: var(--fs-xs); line-height: var(--lh-xs); color: var(--text-muted);
}
.card__note .icon { width: 14px; height: 14px; color: var(--brand-600); margin-top: 1px; }
.card__note + .card__footer { border-radius: 0 0 var(--r-lg) var(--r-lg); }
.card__link-footer { display: flex; justify-content: center; padding: var(--sp-3) var(--sp-5); border-top: var(--bw) solid var(--border); }
.card__link-footer a { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-sm); font-weight: var(--fw-semibold); }

/* Contact type badges */
.badge--person { background: var(--surface); color: var(--text-2); border-color: var(--border-strong); }
.badge--alert { background: var(--info-bg); color: var(--brand-700); border-color: var(--info-border); }
.badge .icon { width: 12px; height: 12px; stroke-width: 2; }

/* Compact empty state inside a card */
.empty--compact { padding: var(--sp-8) var(--sp-5); gap: var(--sp-1); }
.empty--compact .empty__icon { width: 40px; height: 40px; margin-bottom: var(--sp-1); }
.empty--compact .empty__title { font-size: var(--fs-md); line-height: var(--lh-md); }
.empty--compact .empty__text { font-size: var(--fs-sm); line-height: var(--lh-sm); max-width: 260px; margin-bottom: var(--sp-3); }

/* Locked select (customer prefilled on "Add contact") */
.locked-value {
  display: flex; align-items: center; gap: var(--sp-2); height: var(--control-h); padding: 0 var(--sp-3);
  border: var(--bw) solid var(--border); border-radius: var(--r-md); background: var(--surface-2); color: var(--text-2);
}
.locked-value .icon { color: var(--text-muted); }

/* Mobile jump links under the page title (≤900px only) */
.jump-links { display: none; }

/* ---------- 4. Fix for Dev build: keep Save/Cancel right-aligned ---------- */
/* Remove `.form-footer__actions { margin-right: 444px }` from index.html. Lift toasts instead: */
@media (min-width: 901px) {
  body:has(.form-footer) .toast-region { bottom: 88px; }
}

/* ---------- Responsive ≤ 900px ---------- */
@media (max-width: 900px) {
  .brand-menu__btn { height: 52px; gap: var(--sp-2); padding-right: var(--sp-2); }
  .brand-menu__btn .brand__logo { height: 40px; }
  .brand-menu__btn .brand__name { font-size: var(--fs-lg); }
  .menu--settings { position: fixed; left: var(--sp-3); right: var(--sp-3); top: 64px; width: auto; }
  .menu__item--rich { min-height: 56px; }
  .input--vat { max-width: none; }
  .jump-links { display: flex; gap: var(--sp-2); overflow-x: auto; margin: 0 0 var(--sp-4); }
  .jump-links a { flex: none; }
}

/* Base fix seen in Dev at ≤900px: pagination overflowed the card footer */
@media (max-width: 900px) {
  .table-footer { flex-wrap: wrap; row-gap: var(--sp-2); }
  .pagination { flex-wrap: wrap; }
}


/* ==========================================================================
   5. Archive (replaces every Delete)
   ========================================================================== */
:root {
  /* Archived = "put away", not an error: neutral greys, dashed outline to differ from Inactive */
  --archived-fg:     var(--text-2);      /* #3e5468 */
  --archived-bg:     var(--surface-3);   /* #eef2f5 */
  --archived-border: var(--border-input);/* #8595a6, dashed */
  --archived-row-bg: var(--surface-2);   /* #f7f9fb */
  /* Archive button: solid navy. Reversible, so never red; not brand blue (= create/save) */
  --archive-btn:        var(--navy-900); /* #0c2340 */
  --archive-btn-hover:  #1b3a5e;
  --archive-btn-active: #07172b;
}
.badge--archived { background: var(--archived-bg); color: var(--archived-fg); border: var(--bw) dashed var(--archived-border); }
.badge--archived .icon { width: 12px; height: 12px; }

.btn--archive { --_bg: var(--archive-btn); --_fg: #fff; --_bd: var(--archive-btn); box-shadow: var(--shadow-xs); }
.btn--archive:hover { --_bg: var(--archive-btn-hover); --_bd: var(--archive-btn-hover); color: #fff; }
.btn--archive:active { --_bg: var(--archive-btn-active); --_bd: var(--archive-btn-active); }

/* Archived rows in tables and lists */
.table tbody tr.is-archived { background: var(--archived-row-bg); }
.table tbody tr.is-archived td { color: var(--text-muted); }
.table tbody tr.is-archived .cell-primary, .table tbody tr.is-archived .cell-primary a { color: var(--text-2); }
.table tbody tr.is-archived:hover { background: var(--surface-3); }
.archived-date { white-space: nowrap; color: var(--text-muted); }
.list__item.is-archived { background: var(--archived-row-bg); }
.list__item.is-archived .list__title { color: var(--text-2); }
.list__item.is-archived .list__contact { color: var(--text-muted); }

/* Toolbar: filters + divider + switch */
.toolbar__group { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.toolbar__divider { width: 1px; height: 24px; background: var(--border); }

/* Archived record banner (top of a read-only record) */
.archived-banner {
  display: flex; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-6);
  padding: var(--sp-4) var(--sp-5); background: var(--surface); border: var(--bw) solid var(--border-strong);
  border-left: 4px solid var(--navy-900); border-radius: var(--r-lg); box-shadow: var(--shadow-xs);
}
.archived-banner__icon { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: var(--r-md); background: var(--archived-bg); color: var(--navy-900); }
.archived-banner__text { flex: 1; min-width: 0; }
.archived-banner__title { font-weight: var(--fw-semibold); color: var(--text); }
.archived-banner__sub { font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--text-2); margin-top: 2px; }

/* Read-only record: values as text, not disabled inputs (disabled text fails contrast) */
.field--static .static-value { min-height: 24px; padding: 2px 0; color: var(--text); overflow-wrap: anywhere; }
.field--static .static-value.is-empty { color: var(--text-muted); }
.form--readonly .form-section { padding-top: var(--sp-5); padding-bottom: var(--sp-5); }
.form--readonly .form-grid { row-gap: var(--sp-4); }

/* Dialog icon variants */
.dialog__icon--warning { background: var(--warning-bg); color: var(--warning); }
.dialog__icon--neutral { background: var(--archived-bg); color: var(--navy-900); }
.dialog .alert { margin-top: var(--sp-4); }
.dialog .check { margin-top: var(--sp-4); }

/* ==========================================================================
   6. Switch, segmented choice, Navitrack access, tooltip
   ========================================================================== */
/* <button type="button" role="switch" aria-checked="false" class="switch"><span class="switch__track"></span>Label</button> */
.switch {
  display: inline-flex; align-items: center; gap: 10px; padding: 0; border: 0; background: none;
  color: var(--text-2); font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-medium); cursor: pointer; white-space: nowrap;
}
.switch__track {
  position: relative; flex: none; width: 36px; height: 20px; border-radius: var(--r-full);
  background: var(--border-input); transition: background var(--dur) var(--ease);
}
.switch__track::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(12, 35, 64, 0.3); transition: transform var(--dur) var(--ease);
}
.switch[aria-checked="true"] .switch__track { background: var(--brand-600); }
.switch[aria-checked="true"] .switch__track::after { transform: translateX(16px); }
.switch:hover .switch__track { background: var(--text-muted); }
.switch[aria-checked="true"]:hover .switch__track { background: var(--brand-700); }
.switch:focus-visible { outline: none; }
.switch:focus-visible .switch__track, .switch.is-focus .switch__track { outline: 2px solid var(--focus); outline-offset: 2px; }
.switch:disabled { cursor: not-allowed; color: var(--text-disabled); }
.switch:disabled .switch__track { background: var(--border); }
.switch__count { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.switch--lg { font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--text); }

/* Segmented radio (contact type) */
.segmented { display: inline-flex; padding: 3px; gap: 3px; border: var(--bw) solid var(--border-input); border-radius: var(--r-md); background: var(--surface-2); }
.segmented label { position: relative; }
.segmented input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.segmented span { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 var(--sp-4); border-radius: 6px; color: var(--text-2); font-weight: var(--fw-medium); }
.segmented span .icon { width: 14px; height: 14px; }
.segmented input:checked + span { background: var(--surface); color: var(--text); font-weight: var(--fw-semibold); box-shadow: var(--shadow-sm); }
.segmented input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 1px; }

/* Navitrack access indicator (lists) */
.access-mark { display: inline-grid; place-items: center; width: 22px; height: 22px; flex: none; border-radius: var(--r-full); background: var(--brand-50); color: var(--brand-700); box-shadow: inset 0 0 0 1px var(--brand-100); position: relative; }
.access-mark .icon { width: 14px; height: 14px; stroke-width: 2; }
.access-none { color: var(--text-muted); }
.table .col-access { width: 72px; text-align: center; }

/* Tooltip (hover/focus). Mockups force it with .is-shown */
.tooltip {
  position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); z-index: var(--z-dropdown);
  padding: 6px 10px; border-radius: var(--r-sm); background: var(--navy-900); color: #fff; white-space: nowrap;
  font-size: var(--fs-xs); line-height: var(--lh-xs); font-weight: var(--fw-medium); box-shadow: var(--shadow-md);
  opacity: 0; pointer-events: none; transition: opacity var(--dur-fast);
}
.tooltip::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border: 5px solid transparent; border-top-color: var(--navy-900); }
.access-mark:hover .tooltip, .access-mark:focus-visible .tooltip, .tooltip.is-shown { opacity: 1; }

/* ==========================================================================
   7. Admin menu (brand button) + Admin › List values page
   ========================================================================== */
/* The brand dropdown is now the Admin menu. .menu--settings stays as the class name. */
.menu__title { padding: var(--sp-2) var(--sp-3) var(--sp-2); display: grid; gap: 2px; }
.menu__title strong { font-size: var(--fs-md); line-height: var(--lh-md); font-weight: var(--fw-bold); color: var(--text); }
.menu__title span { font-size: var(--fs-xs); line-height: var(--lh-xs); color: var(--text-muted); }
.menu__title + .menu__group { margin-top: var(--sp-1); padding-top: var(--sp-2); border-top: var(--bw) solid var(--border); }
.menu__count { margin-left: auto; font-size: var(--fs-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; font-weight: var(--fw-medium); }
.menu__item[aria-current="page"] .menu__count { color: var(--brand-700); }
.menu__item.is-active:not([aria-disabled="true"]) { background: var(--surface-3); outline: 2px solid var(--focus); outline-offset: -2px; } /* mockup = :focus-visible */

/* List values page: value-set nav + table */
.admin-split { display: grid; grid-template-columns: 248px minmax(0, 1fr); gap: var(--sp-6); align-items: start; }
.vnav { display: grid; gap: 2px; padding: var(--sp-2); }
.vnav__item {
  display: flex; align-items: center; gap: var(--sp-2); height: 40px; padding: 0 var(--sp-3); border-radius: var(--r-md);
  color: var(--text-2); font-weight: var(--fw-medium); text-decoration: none;
}
.vnav__item:hover { background: var(--surface-3); color: var(--text); text-decoration: none; }
.vnav__item[aria-current="page"] { background: var(--brand-50); color: var(--brand-700); font-weight: var(--fw-semibold); box-shadow: inset 3px 0 0 var(--brand-600); }
.vnav__count { margin-left: auto; font-size: var(--fs-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.vnav__item[aria-current="page"] .vnav__count { color: var(--brand-700); }
.vnav__item:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.usage-link { font-variant-numeric: tabular-nums; }
.usage-zero { color: var(--text-muted); }
.row-btns { display: flex; justify-content: flex-end; gap: 2px; }
.row-btns .btn--ghost { --_fg: var(--text-2); }
.tag-new { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: var(--r-full); background: var(--success-bg); color: var(--success); font-size: 11px; font-weight: var(--fw-semibold); }
/* Inline rename inside a table row */
.table tbody tr.is-editing { background: var(--brand-50); }
.rename { display: grid; gap: 4px; }
.rename__row { display: flex; align-items: center; gap: var(--sp-2); }
.rename .input { height: var(--control-h-sm); max-width: 320px; }

/* ==========================================================================
   8. Combobox: select an existing value or add a new one
   ========================================================================== */
/*
<div class="combobox">
  <div class="combobox__control">
    <input class="input combobox__input" role="combobox" aria-autocomplete="list" aria-expanded="true"
           aria-controls="sa-list" aria-activedescendant="sa-add">
    <div class="combobox__btns"><button class="combobox__clear" tabindex="-1" aria-label="Clear">…</button>
      <button class="combobox__toggle" tabindex="-1" aria-label="Show service areas">…</button></div>
  </div>
  <ul class="combobox__listbox" role="listbox" id="sa-list"> <li role="option" class="combobox__option">…</li> … </ul>
</div>
*/
.combobox { position: relative; }
.combobox__control { position: relative; }
.combobox__input { padding-right: 44px; text-overflow: ellipsis; }
.combobox__input.has-clear { padding-right: 76px; }
.combobox__btns { position: absolute; top: 4px; right: 4px; bottom: 4px; display: flex; align-items: center; gap: 2px; }
.combobox__toggle, .combobox__clear {
  width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: 0; border-radius: var(--r-sm);
  background: none; color: var(--text-muted); cursor: pointer;
}
.combobox__clear .icon { width: 14px; height: 14px; }
.combobox__toggle:hover, .combobox__clear:hover { background: var(--surface-3); color: var(--text); }
.combobox__toggle .icon { transition: transform var(--dur) var(--ease); }
.combobox.is-open .combobox__toggle .icon { transform: rotate(180deg); color: var(--text); }
.combobox.is-open .combobox__input { border-color: var(--brand-600); box-shadow: var(--focus-ring); }
.combobox__input:disabled ~ .combobox__btns button { color: var(--text-disabled); cursor: not-allowed; }
.combobox__input[readonly] { background: var(--surface); color: var(--text); border-color: var(--brand-600); } /* while adding */
.combobox__tag { position: absolute; right: 44px; top: 50%; transform: translateY(-50%); pointer-events: none; }

.combobox__listbox {
  position: absolute; left: 0; top: calc(100% + 4px); z-index: var(--z-dropdown);
  width: max(100%, 280px); max-width: min(400px, calc(100vw - 32px)); max-height: 304px; overflow-y: auto; margin: 0; padding: var(--sp-1); list-style: none;
  background: var(--surface); border: var(--bw) solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-md);
}
.combobox__option {
  display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 6px 10px 6px var(--sp-3);
  border-radius: var(--r-sm); color: var(--text); cursor: pointer; line-height: var(--lh-md);
}
.combobox__option:hover { background: var(--surface-3); }
.combobox__option.is-active { background: var(--brand-50); box-shadow: inset 3px 0 0 var(--brand-600); }  /* = aria-activedescendant */
.combobox__opt-text { flex: 1; min-width: 0; display: grid; }
.combobox__opt-sub { font-size: var(--fs-xs); line-height: var(--lh-xs); color: var(--text-muted); }
.combobox__check { width: 16px; height: 16px; color: var(--brand-600); visibility: hidden; flex: none; }
.combobox__option[aria-selected="true"] .combobox__check { visibility: visible; }
.combobox__option[aria-selected="true"] { font-weight: var(--fw-semibold); }
.combobox__option mark { background: var(--brand-100); color: var(--text); font-weight: var(--fw-semibold); border-radius: 3px; padding: 0 1px; }
/* "+ Add" and "Restore" options: last, after a separator */
.combobox__sep { height: 1px; margin: var(--sp-1) calc(var(--sp-1) * -1); background: var(--border); }
.combobox__option--add, .combobox__option--restore { color: var(--brand-700); font-weight: var(--fw-semibold); }
.combobox__option--add > .icon, .combobox__option--restore > .icon { color: var(--brand-600); }
.combobox__option--add q, .combobox__option--restore q { color: var(--text); quotes: "\201C" "\201D"; overflow-wrap: anywhere; }
.combobox__option.is-busy { cursor: progress; color: var(--text-2); }
.combobox__option.is-busy .spinner { width: 14px; height: 14px; color: var(--brand-600); }
.combobox__note { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); font-size: var(--fs-xs); line-height: var(--lh-xs); color: var(--text-muted); }
.combobox__note--hint { display: block; }
.combobox__note--hint a { font-weight: var(--fw-semibold); }
.combobox__note .spinner { width: 14px; height: 14px; }
.combobox__note .icon { width: 14px; height: 14px; flex: none; }
.combobox__note strong { color: var(--text-2); font-weight: var(--fw-semibold); }
/* Field messages under a combobox */
.field-ok { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); line-height: var(--lh-xs); font-weight: var(--fw-medium); color: var(--success); }
.field-ok .icon { width: 14px; height: 14px; }
.hint-info { display: flex; align-items: flex-start; gap: 6px; font-size: var(--fs-xs); line-height: var(--lh-xs); color: var(--text-2); }
.hint-info .icon { width: 14px; height: 14px; flex: none; color: var(--brand-600); margin-top: 1px; }

@media (max-width: 900px) {
  .admin-split { grid-template-columns: 1fr; }
  .vnav { display: flex; overflow-x: auto; }
  .vnav__item { flex: none; }
  .combobox__listbox { max-height: 50vh; }
  .combobox__option { min-height: 44px; }
}