/* ==========================================================================
   AIRA REMINDER — PROJECT SKIN
   Retints the Aira template from its own custom properties instead of
   overriding component rules, so theme updates keep working.

   Load AFTER assets/css/app.min.css.

   Specificity note: the template declares its palettes in [data-bs-theme=…],
   [data-menu-color=…] and [data-topbar-color=…] blocks (0,1,0). Every block
   here is prefixed with `html` (0,1,1) so it wins without !important, and
   each colour scheme is scoped so the light block never leaks into dark.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · PALETTE
   -------------------------------------------------------------------------- */
html[data-bs-theme="light"],
html:not([data-bs-theme="dark"]) {
    /* brand */
    --aira-indigo: #4A40E8;
    --aira-violet: #8B3BFF;
    --aira-cyan: #00A0DC; /* the logo blue */
    --aira-grad: linear-gradient(100deg, #4A40E8 0%, #8B3BFF 100%);
    --aira-grad-soft: linear-gradient(120deg, #EEEDFE 0%, #F5EDFF 100%);
    /* surfaces */
    --aira-app-bg: #F2F3FC;
    --aira-surface: #FFFFFF;
    --aira-surface-2: #F7F8FE;
    --aira-topbar-bg: #FFFFFF;
    --aira-sidenav-bg: linear-gradient(180deg, #211F63 0%, #17164A 52%, #121237 100%);
    --aira-border: #D7DAF0;
    /* ink — indigo-biased, never a flat grey */
    --aira-ink: #191D3E;
    --aira-muted: #4B5484;
    --aira-faint: #757EAF;
    --aira-shadow: 0 1px 2px rgba(35, 32, 90, .05), 0 10px 28px -14px rgba(35, 32, 90, .28);
    --aira-shadow-lg: 0 2px 4px rgba(35, 32, 90, .07), 0 24px 52px -22px rgba(35, 32, 90, .38);
}

html[data-bs-theme="dark"] {
    --aira-indigo: #8B84FF;
    --aira-violet: #B98BFF;
    --aira-cyan: #3FC4F0;
    --aira-grad: linear-gradient(100deg, #5A50FF 0%, #9B54FF 100%);
    --aira-grad-soft: linear-gradient(120deg, #1A1D4A 0%, #241A4D 100%);
    --aira-app-bg: #070A1C;
    --aira-surface: #0E1330;
    --aira-surface-2: #141A3C;
    --aira-topbar-bg: #0B1029;
    --aira-sidenav-bg: linear-gradient(180deg, #141845 0%, #0D1132 100%);
    --aira-border: #2C3574;
    --aira-ink: #EDEFFF;
    --aira-muted: #AAB2E6;
    --aira-faint: #7F88BE;
    --aira-shadow: 0 1px 2px rgba(0,0,0,.45), 0 10px 28px -14px rgba(0,0,0,.7);
    --aira-shadow-lg: 0 2px 4px rgba(0,0,0,.5), 0 24px 52px -22px rgba(0,0,0,.8);
}

/* --------------------------------------------------------------------------
   2 · MAP THE PALETTE ONTO THE TEMPLATE TOKENS
   -------------------------------------------------------------------------- */
html[data-bs-theme="light"],
html:not([data-bs-theme="dark"]) {
    --ins-primary: #4A40E8;
    --ins-primary-rgb: 74,64,232;
    --ins-primary-text-emphasis: #2A1FB4;
    --ins-primary-bg-subtle: #E1DEFE;
    --ins-primary-border-subtle: #BAB4F6;
    --ins-secondary: #8B3BFF;
    --ins-secondary-rgb: 139,59,255;
    --ins-secondary-text-emphasis: #5E14C6;
    --ins-secondary-bg-subtle: #EDDDFF;
    --ins-secondary-border-subtle: #DCC3FF;
    --ins-info: #00A0DC;
    --ins-info-rgb: 0,160,220;
    --ins-info-text-emphasis: #00618A;
    --ins-info-bg-subtle: #D2EFFC;
    --ins-info-border-subtle: #B0E3F7;
    --ins-success: #12B76A;
    --ins-success-rgb: 18,183,106;
    --ins-success-text-emphasis: #056E3D;
    --ins-success-bg-subtle: #CDF2DF;
    --ins-success-border-subtle: #A9EDC9;
    --ins-warning: #F79009;
    --ins-warning-rgb: 247,144,9;
    --ins-warning-text-emphasis: #8F4B00;
    --ins-warning-bg-subtle: #FDE6BC;
    --ins-warning-border-subtle: #FBD79B;
    --ins-danger: #F04438;
    --ins-danger-rgb: 240,68,56;
    --ins-danger-text-emphasis: #9A1B12;
    --ins-danger-bg-subtle: #FDD8D5;
    --ins-danger-border-subtle: #FBBFBA;

    --ins-body-bg: var(--aira-app-bg);
    --ins-body-bg-rgb: 242,243,252;
    --ins-body-color: var(--aira-ink);
    --ins-body-color-rgb: 46,51,96;
    --ins-secondary-bg: var(--aira-surface);
    --ins-secondary-bg-rgb: 255,255,255;
    --ins-tertiary-bg: var(--aira-surface-2);
    --ins-border-color: var(--aira-border);
    --ins-border-color-translucent: var(--aira-border);
    --ins-link-color: #4A40E8;
    --ins-link-color-rgb: 74,64,232;
    --ins-link-hover-color: #8B3BFF;
    --ins-link-hover-color-rgb: 139,59,255;
    --ins-secondary-color: var(--aira-muted);
    --ins-tertiary-color: var(--aira-faint);
}

html[data-bs-theme="dark"] {
    --ins-primary: #8B84FF;
    --ins-primary-rgb: 139,132,255;
    --ins-primary-text-emphasis: #ADA6FF;
    --ins-primary-bg-subtle: rgba(139,132,255,.24);
    --ins-primary-border-subtle: rgba(139,132,255,.45);
    --ins-secondary: #B98BFF;
    --ins-secondary-rgb: 185,139,255;
    --ins-secondary-text-emphasis: #CBA9FF;
    --ins-secondary-bg-subtle: rgba(185,139,255,.24);
    --ins-secondary-border-subtle: rgba(185,139,255,.45);
    --ins-info: #3FC4F0;
    --ins-info-rgb: 63,196,240;
    --ins-info-bg-subtle: rgba(63,196,240,.24);
    --ins-info-border-subtle: rgba(63,196,240,.45);
    --ins-success: #32D583;
    --ins-success-rgb: 50,213,131;
    --ins-success-bg-subtle: rgba(50,213,131,.24);
    --ins-success-border-subtle: rgba(50,213,131,.45);
    --ins-warning: #FDB022;
    --ins-warning-rgb: 253,176,34;
    --ins-warning-bg-subtle: rgba(253,176,34,.24);
    --ins-warning-border-subtle: rgba(253,176,34,.45);
    --ins-danger: #FF6B60;
    --ins-danger-rgb: 255,107,96;
    --ins-danger-bg-subtle: rgba(255,107,96,.24);
    --ins-danger-border-subtle: rgba(255,107,96,.45);

    --ins-body-bg: var(--aira-app-bg);
    --ins-body-bg-rgb: 7,10,28;
    --ins-body-color: var(--aira-ink);
    --ins-body-color-rgb: 221,225,247;
    --ins-secondary-bg: var(--aira-surface);
    --ins-secondary-bg-rgb: 14,19,48;
    --ins-tertiary-bg: var(--aira-surface-2);
    --ins-border-color: var(--aira-border);
    --ins-border-color-translucent: var(--aira-border);
    --ins-link-color: #ADA6FF;
    --ins-link-color-rgb: 173,166,255;
    --ins-link-hover-color: #CBA9FF;
    --ins-link-hover-color-rgb: 203,169,255;
    --ins-secondary-color: var(--aira-muted);
    --ins-tertiary-color: var(--aira-faint);
}

/* --------------------------------------------------------------------------
   3 · CHROME — sidebar and topbar
   `html[…]` beats the template's own [data-menu-color] / [data-topbar-color].
   -------------------------------------------------------------------------- */
html[data-menu-color] {
    --ins-sidenav-bg: var(--aira-sidenav-bg);
    --ins-sidenav-border-color: transparent;
    --ins-sidenav-item-color: rgba(255,255,255,.84);
    --ins-sidenav-item-hover-color: #FFFFFF;
    --ins-sidenav-item-hover-bg: rgba(255,255,255,.07);
    --ins-sidenav-item-active-color: #FFFFFF;
    --ins-sidenav-item-active-bg: rgba(255,255,255,.12);
}

html[data-topbar-color] {
    --ins-topbar-bg: var(--aira-topbar-bg);
    --ins-topbar-item-color: var(--aira-muted);
    --ins-topbar-item-hover-color: var(--ins-primary);
    --ins-topbar-search-bg: var(--aira-surface-2);
    --ins-topbar-search-border: var(--aira-border);
}


/* The theme re-declares both of these under html[data-bs-theme=dark][data-menu-color=…],
   which is (0,2,1) and beats the html[data-menu-color] blocks above. Without matching
   that weight the sidebar and topbar fall back to the stock grey in dark mode - the
   brand palette only ever applied in light. */
html[data-bs-theme="dark"][data-menu-color],
html[data-bs-theme="dark"][data-menu-color="dark"] {
    --ins-sidenav-bg: var(--aira-sidenav-bg);
    --ins-sidenav-border-color: transparent;
    --ins-sidenav-item-color: rgba(255,255,255,.84);
    --ins-sidenav-item-hover-color: #FFFFFF;
    --ins-sidenav-item-hover-bg: rgba(255,255,255,.09);
    --ins-sidenav-item-active-color: #FFFFFF;
    --ins-sidenav-item-active-bg: rgba(255,255,255,.14);
}

html[data-bs-theme="dark"][data-topbar-color],
html[data-bs-theme="dark"][data-topbar-color="light"] {
    --ins-topbar-bg: var(--aira-topbar-bg);
    --ins-topbar-item-color: var(--aira-muted);
    --ins-topbar-item-hover-color: var(--ins-primary);
    --ins-topbar-search-bg: var(--aira-surface-2);
    --ins-topbar-search-border: var(--aira-border);
}
.app-topbar { border-bottom: 1px solid var(--aira-border); }

/* --- one-click theme toggle: sun while light, moon while dark --- */
.theme-toggle { position: relative; border: 0; background: transparent; }
.theme-toggle svg { width: 20px; height: 20px; display: block; }
.theme-toggle .ico-sun,
.theme-toggle .ico-moon { transition: transform .25s ease, opacity .2s ease; }

html:not([data-bs-theme="dark"]) .theme-toggle .ico-moon { display: none; }
html[data-bs-theme="dark"] .theme-toggle .ico-sun { display: none; }

.theme-toggle:hover .ico-sun { transform: rotate(35deg); }
.theme-toggle:hover .ico-moon { transform: rotate(-18deg); }
.theme-toggle:active svg { transform: scale(.88); }

/* Suppress the sidebar's load-time motion. The theme re-applies the active state
   after DOMContentLoaded and animates the submenu open; since the markup already
   renders open and highlighted, that animation is pure flicker on every page load.
   The class is removed once the page has settled, so user clicks still animate. */
body.nav-preload .sidenav-menu .collapse,
body.nav-preload .sidenav-menu .collapsing,
body.nav-preload .sidenav-menu .sub-menu,
body.nav-preload .side-nav-link,
body.nav-preload .menu-arrow {
    transition: none !important;
    animation: none !important;
}

/* the active menu item gets a real marker, not just a tint */
.side-nav .side-nav-item > .side-nav-link { position: relative; border-radius: 8px; }
.side-nav .side-nav-item > .side-nav-link.active::before,
.side-nav .side-nav-item > .side-nav-link[aria-expanded="true"]::before {
    content: "";
    position: absolute;
    inset-block: 22%;
    left: -10px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(180deg, #8B84FF, #4A40E8);
}
.side-nav-title {
    color: rgba(255,255,255,.38);
    letter-spacing: .12em;
    text-transform: uppercase;
    font-size: 10.5px;
    font-weight: 700;
}
.sidenav-user { border-bottom: 1px solid rgba(255,255,255,.08); }
.sidenav-user .sidenav-user-name { color: #fff; }

/* --------------------------------------------------------------------------
   4 · SURFACES
   -------------------------------------------------------------------------- */
.card {
    border: 1px solid var(--aira-border);
    border-radius: 12px;
    box-shadow: var(--aira-shadow);
}
.card-header { background: transparent; border-bottom: 1px solid var(--aira-border); }

.page-title-head { padding-block: 4px 2px; }
.page-title-head h4 { letter-spacing: -.015em; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--aira-faint); }

/* --------------------------------------------------------------------------
   5 · CONTROLS
   -------------------------------------------------------------------------- */
.btn-primary {
    --ins-btn-bg: transparent;
    --ins-btn-border-color: transparent;
    --ins-btn-hover-bg: transparent;
    --ins-btn-hover-border-color: transparent;
    --ins-btn-active-bg: transparent;
    --ins-btn-active-border-color: transparent;
    background-image: var(--aira-grad);
    box-shadow: 0 6px 16px -8px rgba(74,64,232,.65);
    font-weight: 600;
}
.btn-primary:hover, .btn-primary:focus-visible { background-image: var(--aira-grad); filter: brightness(1.08); }
.btn-primary:active { filter: brightness(.96); }

.btn { border-radius: 8px; font-weight: 500; }
.btn-soft-primary { background-color: var(--ins-primary-bg-subtle); color: var(--ins-primary); border-color: transparent; }
.btn-soft-primary:hover { background-color: var(--ins-primary); color: #fff; }
.btn-soft-danger { background-color: var(--ins-danger-bg-subtle); color: var(--ins-danger-text-emphasis, var(--ins-danger)); border-color: transparent; }
.btn-soft-danger:hover { background-color: var(--ins-danger); color: #fff; }

.form-control, .form-select {
    border-radius: 8px;
    border-color: var(--aira-border);
    background-color: var(--aira-surface);
    color: var(--aira-ink);
}
.form-control:focus, .form-select:focus {
    border-color: var(--ins-primary);
    box-shadow: 0 0 0 3px rgba(var(--ins-primary-rgb), .16);
}
.form-control::placeholder { color: var(--aira-faint); }
.form-check-input:checked { background-color: var(--ins-primary); border-color: var(--ins-primary); }

:focus-visible { outline: 2px solid var(--ins-primary); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   6 · DATA — tables, pagination, badges
   -------------------------------------------------------------------------- */
.table > thead th {
    background: var(--aira-surface-2);
    color: var(--aira-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--aira-border);
}
.table > tbody td { border-color: var(--aira-border); vertical-align: middle; }
.table-hover > tbody > tr:hover > * { background-color: var(--ins-primary-bg-subtle); }
.table td, .table th { font-variant-numeric: tabular-nums; }

.page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding-inline: 10px;
    border-radius: 8px;
    border-color: var(--aira-border);
    color: var(--aira-muted);
    background: var(--aira-surface);
    margin-inline: 2px;
}
.page-link > i { font-size: 15px; line-height: 1; }
.page-item.active .page-link {
    background-image: var(--aira-grad);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 4px 12px -6px rgba(74,64,232,.7);
}
.page-item.disabled .page-link { color: var(--aira-faint); opacity: .6; }

.badge { font-weight: 600; letter-spacing: .02em; border-radius: 6px; }
.badge-soft-primary { background: var(--ins-primary-bg-subtle); color: var(--ins-primary-text-emphasis, var(--ins-primary)); }
.badge-soft-success { background: var(--ins-success-bg-subtle); color: var(--ins-success-text-emphasis, var(--ins-success)); }
.badge-soft-warning { background: var(--ins-warning-bg-subtle); color: var(--ins-warning-text-emphasis, var(--ins-warning)); }
.badge-soft-danger  { background: var(--ins-danger-bg-subtle);  color: var(--ins-danger-text-emphasis,  var(--ins-danger)); }
.badge-soft-secondary { background: var(--ins-secondary-bg-subtle); color: var(--ins-secondary-text-emphasis, var(--ins-secondary)); }

/* --------------------------------------------------------------------------
   7 · NOTIFICATIONS
   One fixed stack in the bottom-right corner. The stack itself is transparent
   to clicks — only the toasts inside it are interactive — so an empty stack
   can never swallow clicks on whatever sits underneath.
   -------------------------------------------------------------------------- */
.app-notify-stack {
    position: fixed;
    right: 0;
    bottom: 0;
    z-index: 1085;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 10px;
    padding: 20px;
    width: min(400px, calc(100vw - 24px));
    max-height: 100vh;
    overflow: hidden;
    pointer-events: none;
}
.app-notify-stack > * { display: contents; }
.app-notify-stack .app-toast { pointer-events: auto; }

.app-toast {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 13px 14px;
    border-radius: 10px;
    color: #fff;
    box-shadow: 0 8px 26px -8px rgba(16, 12, 60, .45), 0 2px 6px rgba(16, 12, 60, .2);
    text-shadow: 0 1px 2px rgba(0, 0, 0, .16);
    animation: toastIn .28s cubic-bezier(.2, .9, .3, 1);
}
.app-toast.is-leaving { animation: toastOut .22s ease-in forwards; }

@keyframes toastIn  { from { opacity: 0; transform: translateX(26px) scale(.97); } }
@keyframes toastOut { to   { opacity: 0; transform: translateX(26px) scale(.97); } }

/* filled with the semantic colour — a gradient keeps it vivid while the
   darker end holds the contrast for white text */
.app-toast.is-success { background-image: linear-gradient(100deg, #0E9F6E, #067647); }
.app-toast.is-danger  { background-image: linear-gradient(100deg, #F04438, #B42318); }
.app-toast.is-warning { background-image: linear-gradient(100deg, #F79009, #B54708); }
.app-toast.is-info    { background-image: linear-gradient(100deg, #00A0DC, #026AA2); }
.app-toast.is-primary { background-image: linear-gradient(100deg, #6E63FF, #4A2FD6); }

.app-toast-ico {
    flex: none;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    background: rgba(255, 255, 255, .2);
    display: grid;
    place-items: center;
}
.app-toast-ico svg { width: 15px; height: 15px; display: block; }

.app-toast-body { flex: 1; min-width: 0; }
.app-toast-body b {
    display: block;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: .005em;
}
.app-toast-body span {
    display: block;
    font-size: 13px;
    line-height: 1.45;
    color: rgba(255, 255, 255, .92);
    overflow-wrap: anywhere;
}

.app-toast-x {
    flex: none;
    width: 22px;
    height: 22px;
    margin: -1px -2px 0 0;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: rgba(255, 255, 255, .75);
    display: grid;
    place-items: center;
    cursor: pointer;
}
.app-toast-x:hover { background: rgba(255, 255, 255, .18); color: #fff; }
.app-toast-x svg { width: 13px; height: 13px; display: block; }

@media (prefers-reduced-motion: reduce) {
    .app-toast, .app-toast.is-leaving { animation: none; }
}

/* =====================================================================
   SEARCHABLE SELECTS  (Choices.js, wrapped by js/common/search-select.js)
   The theme ships Choices' base CSS in app.min.css; this makes it read as a
   Bootstrap form-select and follow the sun/moon tokens.
   ===================================================================== */
/* `auto`, not `100%`.

   Choices hides the <select> and wraps it in this div, so any width class on the
   select itself - w-auto included - is left on an element nobody can see. A hard
   100% here made every wrapper fill its line, which is invisible in a form column
   (a block box at `auto` fills its container anyway) but takes the whole toolbar
   when the wrapper is a flex item: the Sync User filter landed on its own row
   above the buttons because of this one declaration.

   `auto` renders identically in a column and shrinks to its content in a toolbar,
   which is what every caller actually wants. */
.choices { margin-bottom: 0; width: auto; }

.choices:focus { outline: none; }

.choices__inner {
    background-color: var(--ins-secondary-bg);
    border: var(--ins-border-width) solid var(--ins-border-color);
    border-radius: var(--ins-border-radius);
    color: var(--ins-body-color);
    min-height: calc(1.5em + .9rem + calc(var(--ins-border-width) * 2));
    padding: .45rem .75rem;
    font-size: .875rem;
    line-height: 1.5;
}

.choices.is-focused .choices__inner,
.choices.is-open .choices__inner {
    border-color: var(--ins-primary);
    box-shadow: 0 0 0 .2rem rgba(var(--ins-primary-rgb), .18);
}

.choices[data-type*="select-one"] .choices__inner { padding-bottom: .45rem; }

/* the caret */
.choices[data-type*="select-one"]::after {
    border-color: var(--ins-secondary-color) transparent transparent;
    right: .75rem;
}

.choices[data-type*="select-one"].is-open::after { border-color: transparent transparent var(--ins-primary); }

/* compact variant, to sit beside .form-select-sm controls */
.choices.choices-sm .choices__inner {
    min-height: calc(1.5em + .5rem + calc(var(--ins-border-width) * 2));
    padding: .25rem .625rem;
    font-size: .8125rem;
}

.choices__list--single { padding: 0 1.25rem 0 0; }

.choices__placeholder { opacity: .6; }

/* ---- the dropdown ----
   app.min.css carries Choices' skin but none of its show / hide rules - the theme
   never initialises Choices, so that half was never needed and never bundled.
   Without these a closed dropdown renders permanently open, so they live here.
   Choices marks the open panel with .is-active and aria-expanded; either will do. */
.choices { position: relative; }

.choices__list--dropdown { display: none; }

.choices__list--dropdown.is-active,
.choices__list--dropdown[aria-expanded="true"] { display: block; }

.choices__list--dropdown.is-active,
.choices__list--dropdown[aria-expanded="true"] {
    position: absolute;
    top: calc(100% + .25rem);
    left: 0;
    width: 100%;
}

.choices__list--dropdown .choices__list { overflow-y: auto; }

.choices__list--dropdown,
.choices__list[aria-expanded] {
    background-color: var(--ins-secondary-bg);
    border: var(--ins-border-width) solid var(--ins-border-color);
    border-radius: var(--ins-border-radius);
    box-shadow: var(--ins-box-shadow, 0 .5rem 1rem rgba(0, 0, 0, .15));
    z-index: 1080;                      /* above a modal's content, below its backdrop-less toasts */
    margin-top: .25rem;
    overflow: hidden;
}

.choices__list--dropdown .choices__item,
.choices__list[aria-expanded] .choices__item {
    color: var(--ins-body-color);
    font-size: .8125rem;
    padding: .5rem .75rem;
}

.choices__list--dropdown .choices__item--selectable.is-highlighted,
.choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
    background-color: rgba(var(--ins-primary-rgb), .12);
    color: var(--ins-emphasis-color);
}

/* ---- the search box, the point of all this ---- */
.choices__list--dropdown .choices__input,
.choices__list[aria-expanded] .choices__input {
    background-color: var(--ins-body-bg);
    border-bottom: var(--ins-border-width) solid var(--ins-border-color);
    color: var(--ins-body-color);
    /* the theme sets this shorthand with !important, so this has to match it */
    padding: .5rem .75rem !important;
    font-size: .8125rem;
    /* Choices sizes the cloned input to its content; a search box should fill the row */
    width: 100% !important;
}

.choices__list--dropdown .choices__input:focus,
.choices__list[aria-expanded] .choices__input:focus { outline: none; }

.choices__input { background-color: transparent; }

.choices.is-disabled .choices__inner {
    background-color: var(--ins-tertiary-bg);
    cursor: not-allowed;
    opacity: .7;
}

/* ---- the + inside the dropdown, at the end of the search row ----
   The dropdown's children are [search input, item list, + button]. Laying the
   dropdown out as a wrapping flex row puts the button beside the search box and
   drops the list onto its own line, with no hard-coded offsets to drift. */
.choices__list--dropdown.has-add-btn.is-active,
.choices__list--dropdown.has-add-btn[aria-expanded="true"] {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

.choices__list--dropdown.has-add-btn > .choices__input--cloned {
    order: 1;
    /* Choices sizes the cloned input to its own content and writes that width inline.
       Left on auto the input claims the whole row and pushes the + onto a second line,
       so the basis is pinned to 0 and the row is shared by ratio instead. */
    flex: 1 1 0;
    width: auto !important;
    min-width: 0;
    margin-bottom: 0 !important;
    border-bottom: 0;               /* the separator moves under the whole row */
}

.choices__list--dropdown.has-add-btn > .choices-add-btn { order: 2; }

.choices__list--dropdown.has-add-btn > .choices__list {
    order: 3;
    flex: 0 0 100%;
    width: 100%;
    border-top: var(--ins-border-width) solid var(--ins-border-color);
}

.choices-add-btn {
    flex: 0 0 auto;
    align-self: center;
    width: 1.9rem;
    height: 1.9rem;
    margin: 0 .45rem;
    padding: 0;
    border: 0;
    border-radius: .375rem;
    background: var(--ins-primary);
    color: #fff;
    font-size: .95rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color .15s ease, transform .1s ease;
}

.choices-add-btn:hover { background: var(--ins-primary); filter: brightness(1.12); }
.choices-add-btn:active { transform: scale(.94); }

.choices-add-btn:focus-visible {
    outline: 2px solid var(--ins-primary);
    outline-offset: 2px;
}

/* ---- two-line options: name on top, muted detail under it ---- */
.choices__list--dropdown .choices__item .ss-main,
.choices__list[aria-expanded] .choices__item .ss-main,
.choices__list--single .choices__item .ss-main {
    display: block;
    color: var(--ins-emphasis-color);
    font-weight: 500;
    line-height: 1.3;
}

.choices__list--dropdown .choices__item .ss-sub,
.choices__list[aria-expanded] .choices__item .ss-sub,
.choices__list--single .choices__item .ss-sub {
    display: block;
    color: var(--ins-secondary-color);
    font-size: .6875rem;
    line-height: 1.3;
}

.choices__list--dropdown .choices__item .ss-sub:empty,
.choices__list--single .choices__item .ss-sub:empty { display: none; }

/* the chosen row reads as one line in the closed control */
.choices__list--single .choices__item .ss-main,
.choices__list--single .choices__item .ss-sub { display: inline; }
.choices__list--single .choices__item .ss-sub::before { content: " · "; }