/* ==========================================================
   custom.css — project-specific overrides
   Loaded last, after every other stylesheet, so anything written
   here always wins. Use this file (never the files above) for
   one-off tweaks so future upgrades to variables.css / layout.css /
   components.css don't get overwritten or conflict with your changes.
   Keep entries small and commented with the date and reason.
   ========================================================== */

/* 2026-07-15 — Login page visual refresh.
   Original .brand-logo sat in a flat white rectangle that looked
   harsh against the gradient panel, and the whole screen felt flat.
   This adds a frosted glass badge for the logo, a subtle dot-grid
   texture, a floating form card, nicer inputs/button, and a gentle
   entrance animation — no structural HTML changes required. */

.login-shell{
  background:var(--body-bg);
  position:relative;
}

.login-brand-panel{
  position:relative;
}

/* subtle dot-grid texture over the gradient, premium SaaS feel */
.login-brand-panel::before{
  content:"";
  position:absolute; inset:0;
  background-image:radial-gradient(rgba(255,255,255,.16) 1px, transparent 1px);
  background-size:22px 22px;
  opacity:.5;
  pointer-events:none;
}
.login-brand-panel::after{
  content:"";
  position:absolute; right:-120px; bottom:-120px; width:360px; height:360px;
  background:radial-gradient(circle, rgba(255,255,255,.14) 0%, transparent 70%);
  pointer-events:none;
}
.login-brand-panel > *{ position:relative; z-index:1; }

/* Logo: frosted glass badge instead of a flat white rectangle */
.login-brand-panel .brand-logo{
  height:auto;
  width:auto;
  max-width:230px;
  background:rgba(255,255,255,.97);
  border-radius:16px;
  padding:14px 18px;
  margin-bottom:34px;
  box-shadow:0 10px 30px rgba(6,12,35,.35), 0 1px 0 rgba(255,255,255,.6) inset;
  border:1px solid rgba(255,255,255,.5);
  display:block;
  animation:slh-fade-in-up .5s ease both;
}

.login-brand-panel .brand-eyebrow{
  display:inline-block;
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#bcd2ff;
  margin-bottom:10px;
  animation:slh-fade-in-up .5s .04s ease both;
}

.login-brand-panel h1{
  animation:slh-fade-in-up .5s .08s ease both;
  letter-spacing:-.015em;
}
.login-brand-panel p{ animation:slh-fade-in-up .5s .14s ease both; }
.login-brand-panel .feature-list{ animation:slh-fade-in-up .5s .2s ease both; }

.login-brand-panel .feature-list .item{
  padding:10px 12px;
  border-radius:12px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  transition:background-color .2s ease, transform .2s ease;
}
.login-brand-panel .feature-list .item:hover{
  background:rgba(255,255,255,.1);
  transform:translateX(2px);
}
.login-brand-panel .feature-list .item i{
  background:rgba(255,255,255,.18);
  box-shadow:0 2px 6px rgba(0,0,0,.15) inset;
}

/* Form panel: soft patterned backdrop with a floating card */
.login-form-panel{
  background:
    radial-gradient(circle at 100% 0%, rgba(47,111,237,.06) 0%, transparent 40%),
    radial-gradient(circle at 0% 100%, rgba(15,37,85,.05) 0%, transparent 40%),
    var(--body-bg);
}

.login-form-inner{
  background:var(--card-bg);
  border-radius:20px;
  padding:40px 36px;
  box-shadow:0 20px 50px rgba(16,24,55,.1), 0 2px 8px rgba(16,24,55,.06);
  border:1px solid var(--border-color);
  animation:slh-fade-in-up .5s .1s ease both;
}

.login-form-inner h2{
  font-size:25px;
  background:linear-gradient(120deg, var(--primary-color), var(--accent-color));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  display:inline-block;
}

.login-form-inner .form-label{
  font-weight:600;
  font-size:13px;
  color:var(--text-muted);
  text-transform:uppercase;
  letter-spacing:.03em;
}

.login-form-inner .form-control{
  border-radius:11px;
  border:1.5px solid var(--border-color);
  padding:11px 14px;
  font-size:14.5px;
  background:#fbfcfe;
  transition:border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.login-form-inner .form-control:focus{
  border-color:var(--accent-color);
  background:#fff;
  box-shadow:0 0 0 4px rgba(47,111,237,.14);
}

.login-form-inner .btn-primary{
  background:linear-gradient(120deg, var(--primary-color), var(--accent-color));
  border:none;
  border-radius:11px;
  letter-spacing:.01em;
  box-shadow:0 10px 24px rgba(30,58,138,.28);
  transition:transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.login-form-inner .btn-primary:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 30px rgba(30,58,138,.34);
  filter:brightness(1.05);
}
.login-form-inner .btn-primary:active{ transform:translateY(0); }

.login-form-inner .alert-danger{
  border-radius:10px;
  border:1px solid #fecaca;
  background:#fef2f2;
}

@keyframes slh-fade-in-up{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:translateY(0); }
}

/* Stack panels gracefully on small screens (no prior rule existed) */
@media (max-width: 900px){
  .login-shell{ flex-direction:column; }
  .login-brand-panel{ flex:none; padding:40px 28px 32px; }
  .login-brand-panel h1{ font-size:26px; }
  .login-brand-panel .feature-list{ display:none; }
  .login-form-panel{ flex:none; padding:28px 20px 48px; }
  .login-form-inner{ padding:28px 22px; }
}

/* 2026-07-15 — Excel-style inline "Add Row" for Purchase Entry.
   Replaces the old Add Purchase popup: typing happens directly in a
   highlighted table row, no modal. Keep this scoped to .inline-add-row
   so it never affects normal read-only table rows. */
.inline-add-row{
  background:rgba(47,111,237,.06) !important;
  box-shadow:inset 3px 0 0 var(--accent-color);
}
.inline-add-row td{
  vertical-align:middle;
  padding:6px 8px !important;
}
.inline-add-row .form-control,
.inline-add-row .form-select{
  font-size:13px;
  padding:5px 8px;
}
.inline-add-row .inl-category-cell{
  white-space:nowrap;
}

@media (prefers-reduced-motion: reduce){
  .login-brand-panel .brand-logo,
  .login-brand-panel h1,
  .login-brand-panel p,
  .login-brand-panel .feature-list,
  .login-form-inner{ animation:none !important; }
}

/* 2026-07-15 — App-wide professional polish pass (dashboard + general layout).
   Chart.js was failing to load on every page (wrong cdnjs path in header.php,
   fixed separately) which left the dashboard's two chart panels blank —
   that alone made the whole app read as unfinished. This block fixes the
   knock-on layout issues and tightens alignment/spacing across cards,
   tables, filters and the sidebar so nothing reads as default/basic. */

/* Chart panels: give the canvas a real, fixed box so it never collapses to
   0 height (which is what produced the empty white rectangles) and never
   grows unbounded once Chart.js is actually loaded. */
.section-card{ position:relative; }
.section-card canvas{ max-height:280px; width:100% !important; }
#monthlyChart, #categoryChart{ min-height:220px; }

/* Dashboard welcome header: consistent baseline with the rest of the app's
   card spacing instead of sitting flush against the topbar. */
.content > .d-flex.justify-content-between.align-items-end{ margin-bottom:20px !important; }
.content h4.font-display{ font-size:22px; letter-spacing:-.02em; }

/* Stat cards: align icon/value baseline, avoid ragged card heights when
   sub-text wraps to two lines on narrow columns. */
.stat-card{ display:flex; flex-direction:column; justify-content:center; min-height:104px; }
.stat-card .stat-sub{ min-height:15px; }

/* Section cards: consistent vertical rhythm when stacked, and a slightly
   crisper divider so charts/tables don't feel like they float. */
.row.g-3 > [class^="col-"] > .section-card,
.row.g-3 > [class*=" col-"] > .section-card{ margin-bottom:0; }
.section-card + .section-card{ margin-top:0; }

/* Filter bars: force every field to the same height/vertical alignment —
   native <input type="date"> renders a couple px taller than <select> in
   most browsers, which was the main source of the "misaligned" look. */
.filter-bar .form-control-sm, .filter-bar .form-select-sm{ height:34px; line-height:1.3; }
.filter-bar label.form-label{ font-size:11.5px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.04em; font-weight:700; }

/* Tables: subtle zebra striping + tighter header so dense data grids read
   as a finished product rather than a raw Bootstrap table. */
table.slh-table tbody tr:nth-child(even){ background:color-mix(in srgb, var(--body-bg) 55%, var(--card-bg)); }
table.slh-table tbody tr:nth-child(even):hover{ background:color-mix(in srgb, var(--accent-color) 4%, var(--card-bg)); }
table.slh-table thead th{ letter-spacing:.06em; }

/* Sidebar: crisper active-state and section spacing. */
.sidebar-nav .nav-section:first-child{ padding-top:4px; }
.sidebar .brand img{ object-fit:contain; }
.sidebar .brand{ gap:9px; padding-left:14px; padding-right:10px; }
.sidebar .brand img{ height:30px; width:auto; max-width:90px; flex-shrink:0; }
.sidebar .brand-text{ flex:1 1 auto; min-width:0; font-size:13.5px; line-height:1.2; }
.sidebar .brand-text small{ font-size:10px; }

/* Topbar: slightly larger page title weight so it reads as a real app
   header rather than a generic bootstrap heading. */
.topbar .page-title{ letter-spacing:-.01em; }

/* Buttons: unify icon-button sizing inside table action cells so rows of
   view/edit/verify/delete icons line up pixel-perfect. */
td.no-print.text-nowrap .btn-icon{ margin-right:2px; }
td.no-print.text-nowrap .btn-icon:last-child{ margin-right:0; }

/* Empty states inside dashboard summary tables were using a plain
   "No data" text row instead of the shared empty-state component — make
   plain fallback text consistent with the rest of the app. */
.slh-table td.text-center.text-muted{ padding:34px 16px !important; font-size:13px; }

/* 2026-07-15 — Searchable dropdowns everywhere (Select2 theming) +
   Excel-style drag-to-resize table columns.
   Select2 ships completely unstyled out of the box (chunky Bootstrap-3
   look, no radius, mismatched height) — that mismatch against our own
   rounded form-control styling was reading as "basic". This reskins
   every Select2 instance across the whole app (Vendor/Product pickers
   in the Purchase Entry filter bar, the inline Add Row, and the
   Edit/Duplicate modal) to match .form-control exactly, and adds the
   little drag handle used by table-resize.js. */

.select2-container{ width:100% !important; }
.select2-container--default .select2-selection--single{
  height:auto;
  min-height:40px;
  display:flex;
  align-items:center;
  border-radius:calc(var(--border-radius) - 3px);
  border:1.5px solid var(--border-color);
  background:var(--card-bg);
  padding:2px 4px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single{
  border-color:var(--accent-color);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent-color) 16%, transparent);
}
.select2-container--default .select2-selection--single .select2-selection__rendered{
  line-height:1.3;
  padding-left:8px;
  color:var(--text-color);
  font-size:13.8px;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder{ color:var(--text-muted); }
.select2-container--default .select2-selection--single .select2-selection__arrow{ height:38px; right:8px; }
.select2-dropdown{
  border-radius:10px;
  border:1px solid var(--border-color);
  box-shadow:var(--shadow-lg);
  overflow:hidden;
  z-index:1090;
}
.select2-search--dropdown{ padding:8px; }
.select2-search--dropdown .select2-search__field{
  border-radius:8px;
  border:1.5px solid var(--border-color);
  padding:7px 10px;
  font-size:13.5px;
}
.select2-search--dropdown .select2-search__field:focus{ outline:none; border-color:var(--accent-color); }
.select2-results__option{ font-size:13.6px; padding:8px 12px; color:var(--text-color); background:var(--card-bg); }
/* 2026-07-16 — The "selected row" background rule and the "keyboard/mouse
   highlighted row" background rule below had EQUAL CSS specificity. Whichever
   was declared later in the file always won for the property it set, which
   meant a row that was both selected AND highlighted (the normal case when a
   dropdown opens on its current value) kept the white text from the
   highlighted rule but lost the solid accent background to the lighter
   selected-row rule underneath it — white text on a near-white background,
   invisible. Forcing the highlighted state with !important guarantees it
   always wins regardless of source order, matching how the dark-mode
   override further down already behaves. */
.select2-container--default .select2-results__option[aria-selected="true"]{ background:color-mix(in srgb, var(--accent-color) 12%, var(--card-bg)); color:var(--text-color); }
.select2-container--default .select2-results__option--highlighted[aria-selected]{ background:var(--accent-color) !important; color:#fff !important; }

/* 2026-07-15 — Fix Select2 dropdown looking like two disconnected floating
   boxes (closed "Select vendor" pill + a second search box + list, with a
   visible gap between them). Standard fix: when the dropdown is open, flatten
   the touching edges of the selection box and the dropdown panel so they
   read as one continuous control, and remove the gap between them. */
.select2-container--open .select2-dropdown--below{
  margin-top: -1px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-top-color: transparent;
}
.select2-container--open .select2-dropdown--above{
  margin-top: 1px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-color: transparent;
}
.select2-container--default.select2-container--open .select2-selection--single{
  border-color: var(--accent-color);
}
.select2-container--default.select2-container--open.select2-container--below .select2-selection--single{
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.select2-container--default.select2-container--open.select2-container--above .select2-selection--single{
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
/* The search field's own border was fighting the dropdown's border, doubling
   the boxed look — make it borderless-flat instead of a second nested box. */
.select2-search--dropdown{ padding: 8px 8px 4px; }
.select2-search--dropdown .select2-search__field{
  border: none;
  border-bottom: 1.5px solid var(--border-color);
  border-radius: 0;
  padding: 6px 4px;
}
.select2-search--dropdown .select2-search__field:focus{ border-bottom-color: var(--accent-color); }
.select2-results__option[aria-selected]{ border-top: 1px solid color-mix(in srgb, var(--border-color) 60%, transparent); }
.select2-results__option:first-child{ border-top: none; }

/* Compact variant inside the Excel-style inline Add Row / any dense table cell */
.inline-add-row .select2-container--default .select2-selection--single{
  min-height:30px;
  border-radius:7px;
  padding:0 2px;
}
.inline-add-row .select2-container--default .select2-selection--single .select2-selection__rendered{
  font-size:13px;
  padding-left:6px;
}
.inline-add-row .select2-container--default .select2-selection--single .select2-selection__arrow{ height:28px; right:4px; }

/* Excel-style column resize handles (paired with table-resize.js) */
table.slh-table thead th.col-resizable{ position:relative; padding-right:16px; }
.col-resize-handle{
  position:absolute;
  top:0; right:0; bottom:0;
  width:8px;
  cursor:col-resize;
  user-select:none;
  touch-action:none;
}
.col-resize-handle::after{
  content:"";
  position:absolute;
  top:20%; bottom:20%; right:3px;
  width:2px;
  border-radius:2px;
  background:color-mix(in srgb, var(--primary-dark) 35%, transparent);
  opacity:0;
  transition:opacity .12s ease;
}
.col-resize-handle:hover::after,
body.col-resizing .col-resize-handle::after{ opacity:1; background:var(--accent-color); }
body.col-resizing{ cursor:col-resize !important; }
body.col-resizing *{ user-select:none !important; }

/* 2026-07-15 — Fix dark mode: content invisible/unreadable across the portal.
   variables.css only ever redefined the APP's own tokens (--body-bg,
   --card-bg, --text-color, etc.) for body[data-theme="dark"]. It never
   touched Bootstrap's OWN CSS variables (--bs-table-bg, --bs-modal-bg,
   --bs-dropdown-bg, --bs-pagination-bg...), which ship hardcoded to light
   values inside bootstrap.min.css. Result: every raw Bootstrap component —
   table cells, modals, the user-menu/row-actions dropdowns, pagination —
   kept rendering with a white background no matter the theme, so dark-mode
   text (light-colored, inherited from body) landed on a white cell and
   became unreadable, or vice versa. This remaps every Bootstrap surface
   color variable to the app's existing dark tokens whenever dark mode is
   on, so nothing needs a separate hardcoded dark color to maintain. */
body[data-theme="dark"]{
  --bs-body-bg: var(--body-bg);
  --bs-body-color: var(--text-color);
  --bs-border-color: var(--border-color);
  --bs-border-color-translucent: var(--border-color);

  --bs-table-bg: transparent;
  --bs-table-color: var(--text-color);
  --bs-table-border-color: var(--border-color);
  --bs-table-striped-bg: color-mix(in srgb, var(--body-bg) 55%, var(--card-bg));
  --bs-table-striped-color: var(--text-color);
  --bs-table-hover-bg: color-mix(in srgb, var(--accent-color) 8%, var(--card-bg));
  --bs-table-hover-color: var(--text-color);

  --bs-modal-bg: var(--card-bg);
  --bs-modal-color: var(--text-color);
  --bs-modal-header-border-color: var(--border-color);
  --bs-modal-footer-border-color: var(--border-color);

  --bs-dropdown-bg: var(--card-bg);
  --bs-dropdown-color: var(--text-color);
  --bs-dropdown-border-color: var(--border-color);
  --bs-dropdown-divider-bg: var(--border-color);
  --bs-dropdown-link-color: var(--text-color);
  --bs-dropdown-link-hover-color: var(--text-color);
  --bs-dropdown-link-hover-bg: color-mix(in srgb, var(--accent-color) 12%, var(--card-bg));
  --bs-dropdown-link-active-color: #fff;
  --bs-dropdown-link-active-bg: var(--accent-color);
  --bs-dropdown-header-color: var(--text-muted);

  --bs-pagination-bg: var(--card-bg);
  --bs-pagination-color: var(--text-color);
  --bs-pagination-border-color: var(--border-color);
  --bs-pagination-hover-bg: color-mix(in srgb, var(--accent-color) 10%, var(--card-bg));
  --bs-pagination-hover-color: var(--text-color);
  --bs-pagination-hover-border-color: var(--border-color);
  --bs-pagination-disabled-bg: var(--card-bg);
  --bs-pagination-disabled-border-color: var(--border-color);

  --bs-list-group-bg: var(--card-bg);
  --bs-list-group-color: var(--text-color);
  --bs-list-group-border-color: var(--border-color);
  --bs-list-group-action-hover-color: var(--text-color);
  --bs-list-group-action-hover-bg: color-mix(in srgb, var(--accent-color) 10%, var(--card-bg));

  --bs-card-bg: var(--card-bg);
  --bs-card-color: var(--text-color);
  --bs-card-border-color: var(--border-color);

  --bs-tooltip-bg: #1f2937;
  --bs-tooltip-color: #f3f4f6;

  --bs-breadcrumb-divider-color: var(--text-muted);
  --bs-secondary-bg: color-mix(in srgb, var(--card-bg) 70%, #000 8%);
  --bs-secondary-color: var(--text-muted);
}

/* Disabled/readonly inputs (e.g. the auto-filled Category field in the
   Purchase Entry Edit modal) were hardcoded to Bootstrap's light gray
   #e9ecef regardless of theme — stood out like a hole in the dark modal. */
body[data-theme="dark"] .form-control:disabled,
body[data-theme="dark"] .form-control[readonly],
body[data-theme="dark"] .form-select:disabled{
  background-color: var(--bs-secondary-bg);
  color: var(--text-muted);
  border-color: var(--border-color);
}

/* Select2 in dark mode: it inherits our .select2-container CSS (which
   already uses variables), but a couple of Bootstrap-driven surfaces
   underneath it also need the same remap so an open dropdown never shows
   white. */
body[data-theme="dark"] .select2-dropdown{ background: var(--card-bg) !important; border-color: var(--border-color) !important; }
body[data-theme="dark"] .select2-results,
body[data-theme="dark"] .select2-results__options,
body[data-theme="dark"] .select2-results__option{
  background: var(--card-bg) !important;
  color: var(--text-color) !important;
}
body[data-theme="dark"] .select2-results__option[aria-selected="true"]{
  background: color-mix(in srgb, var(--accent-color) 18%, var(--card-bg)) !important;
}
body[data-theme="dark"] .select2-results__option--highlighted[aria-selected]{
  background: var(--accent-color) !important;
  color: #fff !important;
}
body[data-theme="dark"] .select2-search--dropdown{ background: var(--card-bg) !important; }
body[data-theme="dark"] .select2-search--dropdown .select2-search__field{
  background: var(--card-bg) !important;
  color: var(--text-color) !important;
  border-bottom-color: var(--border-color) !important;
}

/* Empty-state icon and skeleton loaders were tuned for a white background
   only — keep them legible on dark cards too. */
body[data-theme="dark"] .empty-state i{ color: color-mix(in srgb, var(--accent-color) 30%, var(--card-bg)); }
body[data-theme="dark"] .skeleton{ background: linear-gradient(90deg, #232838 25%, #2b3143 37%, #232838 63%); background-size: 400% 100%; }

/* 2026-07-16 — Dark mode: EVERY table header on EVERY page (Purchase Entry,
   Vendor Master, Item Master, Category Master, Payment Out, Party Ledger,
   Reports) was rendering unreadable. Root cause: table.slh-table thead th
   in components.css uses `color:var(--primary-dark, var(--primary-color))`,
   and --primary-dark (#0f2555) is a near-black navy that was never
   redefined for dark mode — so header labels sat almost invisible against
   the dark card background. Left --primary-dark itself untouched (it's
   also used for the brand login gradient and the primary button's hover
   state, which should stay a fixed brand color, not flip with the theme)
   and instead override the header specifically for dark mode. */
body[data-theme="dark"] table.slh-table thead th{
  color: var(--text-color);
  background: color-mix(in srgb, var(--accent-color) 10%, var(--card-bg));
}

/* 2026-07-16 — Dark mode: Party Ledger's "Opening Balance" / "Closing
   Balance" rows use Bootstrap's `.table-light` variant class, which
   hardcodes its OWN --bs-table-bg (#f8f9fa) and expects dark text — a
   separate variable from the generic --bs-table-bg we already remapped, so
   it slipped through untouched: light-gray row background with light text
   inherited from the dark theme, i.e. near-invisible. Override both the
   Bootstrap variables Bootstrap itself reads and the text color directly. */
body[data-theme="dark"] .table-light{
  --bs-table-bg: color-mix(in srgb, var(--body-bg) 55%, var(--card-bg));
  --bs-table-color: var(--text-color);
  color: var(--text-color) !important;
}
body[data-theme="dark"] .table-light > *{ color: var(--text-color) !important; }

/* 2026-07-16 — Native <input type="file"> "Choose file" button (Attach
   Bill/Invoice on the Purchase Entry Add/Edit form) ignores our
   .form-control theming entirely — browsers render its button with their
   own default white/gray chrome, which looked like an unstyled leftover
   next to every other themed field, and read as barely-visible pale text
   on dark backgrounds. Give it the same rounded, accent-tinted treatment
   as the rest of the app in both themes. */
input[type="file"].form-control{ padding:6px 10px; }
input[type="file"].form-control::file-selector-button{
  margin-right:12px;
  padding:6px 12px;
  border-radius:7px;
  border:1px solid var(--border-color);
  background:color-mix(in srgb, var(--accent-color) 10%, var(--card-bg));
  color:var(--text-color);
  font-size:12.5px;
  font-weight:600;
  transition:background-color .15s ease;
}
input[type="file"].form-control::file-selector-button:hover{
  background:color-mix(in srgb, var(--accent-color) 20%, var(--card-bg));
}

/* 2026-07-15 — Select2: make the dropdown's open/close arrow and the
   checkmark on the currently-selected option clearly visible (both were
   too faint against the themed selection box to notice at a glance). */
.select2-container--default .select2-selection--single .select2-selection__arrow b{
  border-color: var(--text-muted) transparent transparent transparent;
  border-width: 5px 4px 0 4px;
}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b{
  border-color: transparent transparent var(--accent-color) transparent;
  border-width: 0 4px 5px 4px;
}
.select2-results__option[aria-selected="true"]{
  position: relative;
  padding-right: 30px;
  font-weight: 600;
}
.select2-results__option[aria-selected="true"]::after{
  content: "\2713";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--accent-color);
  font-weight: 700;
}
/* When a selected row is also the highlighted (hover/keyboard) row, its
   background switches to solid accent-color — the checkmark above would be
   the same blue on the same blue and disappear, same bug as the text-color
   issue fixed above. Force it white to match the highlighted row's text. */
.select2-results__option--highlighted[aria-selected="true"]::after{
  color: #fff !important;
}

.currency-locked{ background:var(--light-bg,#f3f4f6); cursor:not-allowed; opacity:.85; }