/* ═══════════════════════════════════════════════════════════════
   LAYOUT
   ═══════════════════════════════════════════════════════════════ */

html,
body {
  height: 100%;
}

/* Keep the scrollbar's space reserved so opening a modal (which hides the scrollbar) does not make the
   navbar/header backgrounds change width and shift. With the gutter always reserved, the padding Bootstrap
   adds to compensate for the vanishing scrollbar is not needed anymore (both were 0 to begin with). */
html {
  scrollbar-gutter: stable;
}

.la-app--backend.modal-open,
.la-app--backend.modal-open .fixed-top {
  padding-right: 0 !important;
}

.navbar-expand-lg .navbar-nav .nav-link {
  padding-right: 1rem !important;
  padding-left: 1rem !important;
}

.slot-order-status-complete {
  background-color: #0f4a36;
  color: white;
  padding: 5px;
  border: 1px solid #172b17;
  border-radius: 5px;
  margin: 5px;
}

.slot-order-status-part {
  background-color: #9c5a2b;
  color: white;
  padding: 5px;
  border: 1px solid #3a2a1c;
  border-radius: 5px;
  margin: 5px;
}


.slot-order-status-new {
  background-color: #1f6373;
  color: white;
  padding: 5px;
  border: 1px solid #143143;
  border-radius: 5px;
  margin: 5px;
}


.slot-order-status {
  background-color: #8e8e8e;
  color: white;
  padding: 5px;
  border: 1px solid #222222;
  border-radius: 5px;
  margin: 5px;
}


.la-logo {
  width: 290px;
}

.wrap {
  min-height: 100%;
  height: auto;
  margin: 0 auto -60px;
  /* 60px reserved for the (sticky) footer + 30px breathing room above it */
  padding: 0 0 90px;
}

.wrap > .jumbotron {
  padding: 108px 22px 14px;
}

/* ═══════════════════════════════════════════════════════════════
   TYPOGRAPHY & LINKS
   ═══════════════════════════════════════════════════════════════ */

a {
  color: var(--la-text-link);
  text-decoration: none;
  font-weight: bold;
}

.page-link {
  color: var(--la-text-link);
}

.hint-block {
  display: block;
  margin-top: 5px !important;
  color: var(--la-text-muted);
}

.not-set {
  color: #c55;
  font-style: italic;
}

/* ═══════════════════════════════════════════════════════════════
   COMPONENTS
   ═══════════════════════════════════════════════════════════════ */

/* ─── Panel ─────────────────────────────────────────────────────── */

.panel {
  background-color: var(--la-bg-surface);
  border: 1px solid var(--la-border);
  padding: 10px 14px;
  border-radius: var(--bs-border-radius);
  margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: box-shadow 0.2s ease;
}

.panel:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
}

/* ─── Card (form section grouping) ──────────────────────────────── */

/* Only the inner section cards (General / Settings / addresses on the forms) get a
   lift. The outermost layout wrapper card — `.container > .card` in layouts/main.php,
   which wraps the entire page body including every grid — must stay flat so grids
   don't sit in a big drop-shadowed box. */
.card-body .card {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

.container > .card {
  border: none;
  box-shadow: none;
}

.card-title {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--la-text-heading);
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--la-border);
}

/* Dynamic-form row panels (see wbraganca/tricktrick DynamicFormWidget usages) - these were
   all '.item' until it was renamed per-form to avoid colliding with TomSelect's own '.item'
   chip class, which broke row indexing in the dynamicform JS. */
.item-ean-item.panel,
.reception-order-line-item.panel,
.stock-item.panel,
.order-line-item.panel,
.cart-location-item.panel {
  background-color: var(--la-bg-surface);
}

.panel-heading {
  font-weight: bold;
}

/* Dynamic forms (order, reception order, cart, item, location, pick profile): the outer
   "lines" panel and the per-row panels inside it are flat -- no drop shadow, no hover lift --
   and the heading (with its floated "Add" button) gets breathing room above the first row
   instead of sitting glued to it. Scoped via the widgetBody containers so the detail screens
   that also use .panel keep their look. */
.panel:has(.container-items, .container-stockpolicies, .container-pickprofilerules),
.container-items .panel,
.container-stockpolicies .panel,
.container-pickprofilerules .panel {
  box-shadow: none;
}

.panel:has(.container-items, .container-stockpolicies, .container-pickprofilerules):hover,
.container-items .panel:hover,
.container-stockpolicies .panel:hover,
.container-pickprofilerules .panel:hover {
  box-shadow: none;
}

/* The widget may sit between the panel and its heading, so match any heading below the
   panel that isn't part of a row panel. */
.panel:has(.container-items, .container-stockpolicies, .container-pickprofilerules)
  .panel-heading:not(.container-items .panel-heading,
    .container-stockpolicies .panel-heading,
    .container-pickprofilerules .panel-heading) {
  display: flow-root;
  margin-bottom: 14px;
}

/* ─── Footer ─────────────────────────────────────────────────────── */

.footer {
  height: 60px;
  background: linear-gradient(90deg, var(--la-bg-page) 0%, #f6f8fa 100%);
  border-top: none;
  padding-top: 20px;
  box-shadow: none;
}

/* ─── Nav link active state ──────────────────────────────────────── */

.nav-link.active {
  color: var(--la-bg-surface) !important;
  background-color: rgba(255, 255, 255, 0.12) !important;
  border-radius: var(--bs-border-radius-sm);
}

/* ─── Tables ─────────────────────────────────────────────────────── */

.table {
  --bs-table-bg: var(--la-bg-surface);
  --bs-table-hover-bg: var(--la-bg-hover);
  --bs-table-border-color: var(--la-border-table);
  border-radius: var(--bs-border-radius);
  overflow: hidden;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.07);
}

.table thead th {
  background: var(--la-bg-subtle);
  color: var(--la-text-heading);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-bottom: 2px solid var(--la-accent-teal);
  padding: 12px 12px;
}

.table thead th a,
.table thead th a:hover,
.kv-table-header th a,
.kv-table-header th a:hover {
  color: var(--la-text-heading);
  text-decoration: none;
}

.table thead th a:hover,
.kv-table-header th a:hover {
  color: var(--la-accent-teal);
}

/* Sliding accent bar + soft inner glow on the leading cell */
.table tbody tr:hover > td,
.table tbody tr:hover > th {
  --bs-table-bg-state: var(--bs-table-hover-bg);
}

.table tbody tr:hover {
  cursor: pointer;
}

.table thead tr:hover > th,
.table thead tr:hover > td {
  --bs-table-bg-state: initial;
  cursor: default;
}

/* ─── GridView ───────────────────────────────────────────────────── */

.grid-view {
  background: var(--la-bg-surface);
  border-radius: var(--bs-border-radius-lg);
  overflow: hidden;
}

/* kartik-v wraps its own panel in a Bootstrap .card (with a .border-default outline),
   nested directly inside the .grid-view box above -- that's a border drawn around a
   border. The outer .grid-view shadow already marks the boundary, so drop the inner one. */
.grid-view .card.border-default {
  border: none;
  box-shadow: none;
}

/* kartik renders the results-summary ("Showing 1-50 of N") in its own grey .card-header
   band above the toolbar. On its own that reads as an empty white/grey strip (the summary
   only occupies the right edge). Make it blend: no grey fill, tight padding, so the count
   sits just above the toolbar instead of in a separate box. */
.grid-view .card-header {
  background: transparent !important;
  border-bottom: none;
  padding: 0 12px;
}

.grid-view .card-header .summary {
  font-size: 12px;
  color: var(--la-text-muted);
}

.grid-view th {
  white-space: nowrap;
}

/* Flatten the kartik panel chrome: no drop shadow under the table (the global .table shadow),
   no divider lines around the toolbar ("before") and the empty "after" slot, and no empty
   grey footer box. The footer is only dropped when it holds no pager, so paginated grids
   keep their pagination links. */
.grid-view .table {
  box-shadow: none;
}

.grid-view .table > tbody > tr:last-child > td,
.grid-view .table > tbody > tr:last-child > th {
  border-bottom: none;
}

.grid-view .kv-panel-before {
  border-bottom: none;
}

.grid-view .kv-panel-after {
  border-top: none;
}

.grid-view .card-footer {
  border-top: none;
}

.grid-view .kv-panel-after:empty,
.grid-view .card-footer:not(:has(.pagination)) {
  display: none;
}

/* Inline-edit pen buttons (kartik Editable, FORMAT_BUTTON): borderless, with a soft tint (the
   same blue as the row rollover) so they read as a button without the loud round outline.
   Hovering the button itself deepens the tint, so it still stands out on a hovered row. */
.kv-editable-button.btn {
  background: var(--la-bg-hover);
  border-color: transparent;
  box-shadow: none;
  color: #6b92ab;
  transform: none;
  filter: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.kv-editable-button.btn:hover,
.kv-editable-button.btn:focus {
  background: var(--la-jumbotron-from);
  border-color: transparent;
  box-shadow: none;
  color: var(--la-primary-dark);
  transform: none;
  filter: none;
}

.kv-grid-container {
  padding: 10px;
}

/* ─── Grid view-control buttons (filter/sort/personalize/toggle/export) ─ */

/* These icon-only buttons are generated by kartik-v/yii2-grid / -dynagrid for
   the `{dynagridFilter} {dynagridSort} {dynagrid}` / `{toggleData} {export}`
   toolbar tokens (see LogiactionHelper::toolbarButtons()/
   toolbarExportButtons()) — always rendered as `.btn-outline-secondary`
   (filter/sort/toggle/export) or `.btn-light.border-secondary` (the
   "personalize grid" gear, kartik's own BS5 default for
   `DynaGrid::$toggleButtonGrid`), inside the grid's `.kv-grid-toolbar`
   wrapper. That same wrapper also holds the view's own New/Transaction/
   CSV/... buttons (rendered via separate `.btn-success`/`.btn-danger`
   classes), so scoping to these two button classes — not `.kv-grid-toolbar
   .btn` — restyles only the view-control icons and leaves those untouched.
   One rule, applies to every DynaGrid in the app. */
.kv-grid-toolbar .btn-group {
  margin-right: 6px;
}

/* kartik packs the funnel/sort/gear (and toggle/export) icons into a single Bootstrap
   .btn-group, so by default they butt right up against each other. Override the negative
   margin BS uses to collapse grouped buttons, and give each pill its own breathing room. */
.kv-grid-toolbar .btn-group > .btn-outline-secondary,
.kv-grid-toolbar .btn-group > .btn-light.border-secondary {
  margin-left: 4px !important;
}

.kv-grid-toolbar .btn-group > .btn-outline-secondary:first-child,
.kv-grid-toolbar .btn-group > .btn-light.border-secondary:first-child {
  margin-left: 0 !important;
}

.kv-grid-toolbar .btn-outline-secondary,
.kv-grid-toolbar .btn-light.border-secondary {
  border: none !important;
  background: var(--la-bg-subtle) !important;
  color: var(--la-primary-dark);
  border-radius: 999px !important;
  min-width: 36px;
  height: 36px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: none !important;
}

.kv-grid-toolbar .btn-outline-secondary:hover,
.kv-grid-toolbar .btn-light.border-secondary:hover {
  background: var(--la-bg-hover) !important;
  color: var(--la-accent-teal);
  box-shadow: none !important;
}

.kv-grid-toolbar .dropdown-menu {
  border-radius: var(--bs-border-radius);
  border-color: var(--la-border);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14);
}

/* ─── Row action icons (grid ActionColumn) ──────────────────────────
   One colour per function, applied wherever these icons appear inside a
   grid body cell. Scoped to `.table td` so it only ever touches plain
   icon links in grid rows — never the matching icon inside a solid
   `.btn-success`/`.btn-danger` toolbar button (those live in
   `.kv-panel-before`, outside any `<table>`), where white-on-colour
   contrast must stay intact. Covers kartik-v/yii2-grid's own ActionColumn
   defaults (view/update/delete, used by virtually every grid) plus the
   handful of custom RowHelper button icons shared across grids. */
.table td a.fa-eye,
.table td a .fa-eye,
.table td a.fa-cubes,
.table td a .fa-cubes,
.table td a.fa-refresh,
.table td a .fa-refresh,
.table td a.fa-arrows-rotate,
.table td a .fa-arrows-rotate {
  color: #16a34a;
}

.table td a.fa-pencil-alt,
.table td a .fa-pencil-alt,
.table td a.fa-pen,
.table td a .fa-pen {
  color: #f97316;
}

.table td a.fa-trash-alt,
.table td a .fa-trash-alt,
.table td a.fa-trash,
.table td a .fa-trash {
  color: #e74c3c;
}

.table td a.fa-list,
.table td a .fa-list {
  color: #8b5cf6;
}

/* Breathing room between action icons -- plain whitespace between adjacent <a> tags in
   the generated markup isn't enough once FontAwesome icon glyphs are involved. */
.table td a:has(> .fas),
.table td a.fas {
  margin: 0 3px;
}

/* ─── Forms ──────────────────────────────────────────────────────── */

.form-group {
  padding-bottom: 10px;
  padding-top: 10px;
}

.form-control {
  border: 1px solid transparent;
  background-color: var(--la-bg-subtle);
  border-radius: 6px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.form-control:focus {
  border-color: var(--la-accent-teal);
  background-color: var(--la-bg-surface);
  box-shadow: 0 0 0 3px rgba(46, 160, 200, 0.15);
}

/* ─── Tom Select ─────────────────────────────────────────────────── */

/* Tom Select fields (grid filters, forms) look like the regular .form-control / dropdowns:
   soft tinted fill, no visible border until focus, same radius and focus ring. A wrapper that
   already carries .form-control/.form-select (Tom Select copies those classes from the original
   <select>) is styled by those rules, so its inner control is made transparent. */
.ts-wrapper:not(.form-control):not(.form-select) .ts-control {
  background-color: var(--la-bg-subtle);
  border: 1px solid transparent;
  border-radius: 6px;
  box-shadow: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.ts-wrapper.form-control .ts-control,
.ts-wrapper.form-select .ts-control {
  background-color: transparent;
  border: none;
  box-shadow: none;
}

.ts-wrapper.focus:not(.form-control):not(.form-select) .ts-control,
.ts-wrapper.form-control.focus,
.ts-wrapper.form-select.focus {
  border-color: var(--la-accent-teal);
  background-color: var(--la-bg-surface);
  box-shadow: 0 0 0 3px rgba(46, 160, 200, 0.15);
}

.ts-wrapper.focus.form-control .ts-control,
.ts-wrapper.focus.form-select .ts-control {
  background-color: transparent;
}

.ts-control input::placeholder {
  color: var(--la-text-muted);
}

/* Selected values: soft tinted chips instead of grey pills */
.ts-wrapper.multi .ts-control > div,
.ts-wrapper.plugin-remove_button .item {
  background: var(--la-bg-hover);
  color: var(--la-primary-dark);
  border: none;
  border-radius: 4px;
}

/* Dropdown list: same rounded, lifted look as the other dropdown menus. The Tom Select theme
   is loaded after this file, so these selectors carry an extra `body` to win on specificity. */
body .ts-dropdown,
body .ts-dropdown.form-control,
body .ts-dropdown.form-select {
  border: 1px solid var(--la-border);
  border-radius: 6px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14);
  overflow: hidden;
  margin-top: 4px;
}

body .ts-dropdown .option,
body .ts-dropdown .no-results,
body .ts-dropdown .create {
  padding: 6px 12px;
}

body .ts-dropdown .active {
  background-color: var(--la-bg-hover);
  color: var(--la-text-heading);
}

/* ─── Error summary ──────────────────────────────────────────────── */

.error-summary {
  color: #a94442;
  background: linear-gradient(90deg, #fdf7f7 0%, var(--la-bg-surface) 100%);
  border-left: 4px solid #e74c3c;
  border-radius: 0 var(--bs-border-radius-sm) var(--bs-border-radius-sm) 0;
  padding: 10px 20px;
  margin: 0 0 15px;
  box-shadow: 0 2px 6px rgba(231, 76, 60, 0.10);
}

/* ─── Badges ─────────────────────────────────────────────────────── */

.badge {
  --bs-badge-border-radius: var(--bs-border-radius-sm);
  --bs-badge-font-size: 11px;
  --bs-badge-padding-x: 7px;
  --bs-badge-padding-y: 3px;
  --bs-badge-font-weight: 600;
  letter-spacing: 0.03em;
}

/* ─── Pagination ─────────────────────────────────────────────────── */

.pagination {
  --bs-pagination-color: var(--la-primary-navy);
  --bs-pagination-border-color: #d8e6ef;
  --bs-pagination-hover-bg: var(--la-bg-subtle);
  --bs-pagination-hover-color: var(--la-text-heading);
  --bs-pagination-active-color: var(--la-bg-surface);
  --bs-pagination-active-bg: var(--la-primary-dark);
  --bs-pagination-active-border-color: var(--la-primary-dark);
}

.pagination .page-item.active .page-link {
  background: linear-gradient(135deg, var(--la-primary-dark) 0%, var(--la-primary) 100%);
}

/* ─── Buttons ────────────────────────────────────────────────────── */

.btn-group {
  margin-right: 5px;
}

/* ─── URN info badges ────────────────────────────────────────────── */

.urn-info {
  padding: 0 2px;
  font-weight: bold;
  color: white;
  background: gray;
}

.urn-info[data-urn^=R] {
  background: var(--la-crate-r-bg);
}

.urn-info[data-urn^=G] {
  background: var(--la-crate-g-bg);
}

.urn-info[data-urn^=B] {
  background: var(--la-crate-b-bg);
}

.urn-info[data-urn^=Y] {
  color: var(--la-crate-y-color);
  background: var(--la-crate-y-bg);
}

[data-box-ship-packing-id] {
  cursor: pointer;
}

/* ─── Scrollbar (webkit) ─────────────────────────────────────────── */

::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

::-webkit-scrollbar-track {
  background: var(--la-scrollbar-track);
}

::-webkit-scrollbar-thumb {
  background: var(--la-border-muted);
  border-radius: var(--bs-border-radius-sm);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--la-primary);
}

/* ─── Modal z-index ──────────────────────────────────────────────── */

/* Ensure KrajeeDialog confirm/alert boxes appear above DynaGrid settings modals */
.bootstrap-dialog.modal {
  z-index: 1065 !important;
}

.modal-backdrop ~ .modal-backdrop {
  z-index: 1060 !important;
}

/* ═══════════════════════════════════════════════════════════════
   SORTWALL OVERVIEW GRID
   ═══════════════════════════════════════════════════════════════ */

.sw-grid {
  display: grid;
  gap: 8px;
  margin-top: 16px;
}

.sw-slot {
  border: 2px solid #ccc;
  border-radius: 6px;
  padding: 10px 8px;
  text-align: center;
  font-size: 13px;
  min-height: 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}

.sw-slot.free {
  background-color: #d4edda;
  border-color: #28a745;
}

.sw-slot.occupied {
  background-color: #fff3cd;
  border-color: #ffc107;
}

.sw-slot .slot-container {
  font-weight: bold;
  font-size: 14px;
}

.sw-slot .slot-order {
  color: #6c757d;
  font-size: 11px;
}

.sw-slot .slot-status {
  font-size: 11px;
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════
   ARTICLE SEARCH
   ═══════════════════════════════════════════════════════════════ */

.la-search-panel {
  margin: 14px 0 8px;
}

.la-search-panel.la-search-inline {
  margin: 0;
  display: inline-block;
  vertical-align: middle;
}

.la-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  max-width: 520px;
  background: var(--la-bg-subtle);
  border: 1.5px solid transparent;
  border-radius: 6px;
  box-shadow: none;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.la-search-inline .la-search-wrap {
  max-width: 280px;
  height: 38px;
  border: 1px solid transparent;
  border-radius: 4px;
  box-shadow: none;
}

.la-search-inline .la-search-input {
  padding: 6px 6px 6px 0;
  font-size: 14px;
}

.la-search-wrap:focus-within {
  border-color: var(--la-accent-teal);
  box-shadow: 0 0 0 3px rgba(46, 160, 200, 0.15);
  background: var(--la-bg-surface);
}

.la-search-icon {
  flex: 0 0 auto;
  padding: 0 10px 0 13px;
  font-size: 13px;
  color: #b0bac6;
  pointer-events: none;
  transition: color .18s ease;
}

.la-search-wrap:focus-within .la-search-icon {
  color: #3c8dbc;
}

.la-search-input {
  flex: 1 1 auto;
  border: none;
  outline: none;
  background: transparent;
  padding: 8px 6px 8px 0;
  font-size: 13.5px;
  color: #2d3748;
  font-family: inherit;
  line-height: 1.4;
  min-width: 0;
}

.la-search-input::placeholder {
  color: #a0aab8;
  font-style: italic;
}

.la-search-clear {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-right: 5px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: #a0aab8;
  font-size: 11px;
  cursor: pointer;
  transition: background .14s ease, color .14s ease;
  padding: 0;
}

.la-search-clear:hover {
  background: #f0f4f8;
  color: #e74c3c;
}

.la-search-hint {
  display: none;
}

mark.la-highlight {
  background: #f8d7da;
  color: #c0392b;
  padding: 1px 3px;
  border-radius: 3px;
  font-weight: 600;
}

.kv-expand-header-cell .kv-expand-header-icon {
  color: var(--la-text-heading);
}

/* Subtle disclosure chevron (see LogiactionHelper::expandRowColumn()) instead of
   kartik-v's default boxed fa-plus-square/fa-minus-square glyph, and a soft tint
   instead of the vendor's hardcoded bright-blue hover square. */
.kv-expand-icon-cell {
  color: var(--la-text-muted);
  font-size: 1em !important;
}

.kv-expand-icon-cell:hover,
.kv-expand-icon-cell:focus {
  color: var(--la-accent-teal) !important;
  background-color: var(--la-bg-hover) !important;
}

/* PHPInfo iframe */
.phpinfo-frame {
  width: 100%;
  height: 420px;
  border: none;
  display: block;
  scrollbar-width: thin;
  scrollbar-color: #90a4ae #e8ecef;
}

.phpinfo-frame::-webkit-scrollbar {
  width: 8px;
}

.phpinfo-frame::-webkit-scrollbar-track {
  background: #e8ecef;
  border-radius: 4px;
}

.phpinfo-frame::-webkit-scrollbar-thumb {
  background: #90a4ae;
  border-radius: 4px;
}

.phpinfo-frame::-webkit-scrollbar-thumb:hover {
  background: #607d8b;
}

/* ─── Item image thumbnail ──────────────────────────────────────── */

.item-thumb {
  height: 40px;
  width: auto;
  cursor: pointer;
  border-radius: 3px;
}

.item-thumb-popup {
  max-width: 300px;
  max-height: 300px;
}

/* ─── Boxpacker 3D visualisation back button ────────────────────── */

.back-button {
  position: fixed;
  top: 1em;
  left: 1em;
  z-index: 10;
  pointer-events: all;
}

/* ─── Tooltip (Bootstrap, see js/tooltip.js) ───────────────────── */

.tooltip {
  --bs-tooltip-bg: var(--la-primary-darker);
  --bs-tooltip-color: #fff;
  --bs-tooltip-font-size: 12.5px;
  --bs-tooltip-max-width: 260px;
  --bs-tooltip-padding-x: 12px;
  --bs-tooltip-padding-y: 7px;
  --bs-tooltip-border-radius: 8px;
  --bs-tooltip-opacity: 1;
  --bs-tooltip-arrow-width: 0.8rem;
  --bs-tooltip-arrow-height: 0.4rem;
}

.tooltip-inner {
  position: relative;
  padding-left: 14px;
  line-height: 1.4;
  letter-spacing: 0.01em;
  text-align: left;
  box-shadow:
    0 6px 18px rgba(16, 56, 66, 0.22),
    0 1px 3px rgba(16, 56, 66, 0.2);
}

/* Thin teal accent on the leading edge */
.tooltip-inner::after {
  content: '';
  position: absolute;
  inset: 7px auto 7px 0;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--la-accent-teal);
}

/*
 * kartik popover-x (inline edit) hides itself with `.popover-x { display: none }`. In right-to-left
 * languages Bootstrap's RTL build is registered after that stylesheet and its `.popover { display: block }`
 * wins, so every closed popover would be shown at the page edge. Two classes beat it; kartik still opens
 * a popover with an inline `display: block`, which wins over this rule.
 */
.popover.popover-x {
  display: none;
}