/* ==========================================================================
   Holo design system for the Metronic admin — the same look as Market Intelligence.

   One source of truth for the whole platform: Holoship, the HoloShop admin and
   Market Intelligence share these tokens (mi/src/app/globals.css), one sidebar,
   one top bar, one table, one form, one card, one button. This file restyles
   Metronic's markup only — no template or JavaScript changes, so every behaviour
   (menus, modals, drawers, data tables, select2, date pickers) keeps working.
   Loaded last, after override.css, in Holoship and (from Holoship) in HoloShop.
   ========================================================================== */

:root,
[data-bs-theme=light] {
  /* ink: the one text colour, in steps of transparency */
  --holo-ink: #1b1b1b;
  --holo-ink-90: rgba(27, 27, 27, 0.9);
  --holo-ink-70: rgba(27, 27, 27, 0.7);
  --holo-ink-50: rgba(27, 27, 27, 0.5);
  --holo-ink-30: rgba(27, 27, 27, 0.3);
  --holo-ink-20: rgba(27, 27, 27, 0.2);
  --holo-ink-15: rgba(27, 27, 27, 0.15);
  --holo-ink-12: rgba(27, 27, 27, 0.12);
  --holo-ink-8: rgba(27, 27, 27, 0.08);
  --holo-ink-4: rgba(27, 27, 27, 0.04);
  /* surface: the page, cards, inputs and cells; on-ink: text on an ink-coloured element */
  --holo-surface: #ffffff;
  --holo-on-ink: #ffffff;
  /* accent: the lime that marks the primary action and the current place */
  --holo-accent: #c0fb50;
  --holo-accent-hover: #b4f03f;
  --holo-accent-30: rgba(192, 251, 80, 0.3);
  --holo-accent-15: rgba(192, 251, 80, 0.15);
  --holo-signal-dark: #274D1F;
  --holo-signal-forest: #30602F;
  --holo-signal-green: #4A963F;
  /* semantic tones, soft background + readable text */
  --holo-positive: #316B31;
  --holo-positive-soft: #EAF7E5;
  --holo-warning: #A96117;
  --holo-warning-soft: #FFF2DC;
  --holo-negative: #C64040;
  --holo-negative-soft: #FDE8E8;
  --holo-info: #1565C0;
  --holo-info-soft: #E3F2FD;
  --holo-table-head: #f8f8f8;
  --holo-row-hover: #f5f5f5;
  --holo-radius-sm: 6px;
  --holo-radius: 8px;
  --holo-radius-lg: 12px;
  --holo-font: "Geist", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --holo-aside-width: 224px;
  --holo-aside-width-min: 56px;
  --holo-header-height: 48px;

  /* Bootstrap / Metronic variables the components read */
  --bs-font-sans-serif: var(--holo-font);
  --bs-body-font-family: var(--holo-font);
  --bs-body-font-size: 0.8125rem;
  --bs-body-color: var(--holo-ink);
  --bs-body-color-rgb: 27, 27, 27;
  --bs-body-bg: var(--holo-surface);
  --bs-page-bg: var(--holo-surface);
  --bs-app-bg-color: var(--holo-surface);
  --bs-primary: var(--holo-signal-green);
  --bs-primary-rgb: 74, 150, 63;
  --bs-primary-active: var(--holo-signal-forest);
  --bs-primary-light: var(--holo-accent-15);
  --bs-primary-clarity: var(--holo-accent-15);
  --bs-text-primary: var(--holo-signal-dark);
  --bs-link-color: var(--holo-signal-dark);
  --bs-link-color-rgb: 39, 77, 31;
  --bs-link-hover-color: var(--holo-signal-forest);
  --bs-link-hover-color-rgb: 48, 96, 47;
  --bs-component-active-bg: var(--holo-accent-30);
  --bs-component-active-color: var(--holo-signal-dark);
  --bs-component-hover-bg: var(--holo-ink-4);
  --bs-component-hover-color: var(--holo-ink);
  --bs-menu-link-color-hover: var(--holo-ink);
  --bs-menu-link-color-active: var(--holo-signal-dark);
  --bs-menu-link-bg-color-active: var(--holo-accent-30);
  --bs-menu-link-bg-color-hover: var(--holo-ink-4);
  --bs-success: var(--holo-positive);
  --bs-success-rgb: 49, 107, 49;
  --bs-success-light: var(--holo-positive-soft);
  --bs-text-success: var(--holo-positive);
  --bs-warning: var(--holo-warning);
  --bs-warning-rgb: 169, 97, 23;
  --bs-warning-light: var(--holo-warning-soft);
  --bs-text-warning: var(--holo-warning);
  --bs-danger: var(--holo-negative);
  --bs-danger-rgb: 198, 64, 64;
  --bs-danger-light: var(--holo-negative-soft);
  --bs-text-danger: var(--holo-negative);
  --bs-info: var(--holo-info);
  --bs-info-rgb: 21, 101, 192;
  --bs-info-light: var(--holo-info-soft);
  --bs-text-info: var(--holo-info);
  --bs-secondary: #f3f3f3;
  --bs-secondary-rgb: 243, 243, 243;
  --bs-light: #fafafa;
  --bs-light-rgb: 250, 250, 250;
  --bs-dark: var(--holo-ink);
  --bs-dark-rgb: 27, 27, 27;
  --bs-gray-100: var(--holo-ink-4);
  --bs-gray-200: var(--holo-ink-8);
  --bs-gray-300: var(--holo-ink-12);
  --bs-gray-400: var(--holo-ink-20);
  --bs-gray-500: var(--holo-ink-30);
  --bs-gray-600: var(--holo-ink-50);
  --bs-gray-700: var(--holo-ink-70);
  --bs-gray-800: var(--holo-ink-90);
  --bs-gray-900: var(--holo-ink);
  --bs-text-gray-400: var(--holo-ink-30);
  --bs-text-gray-500: var(--holo-ink-30);
  --bs-text-gray-600: var(--holo-ink-50);
  --bs-text-gray-700: var(--holo-ink-70);
  --bs-text-gray-800: var(--holo-ink);
  --bs-text-gray-900: var(--holo-ink);
  --bs-text-muted: var(--holo-ink-30);
  --bs-border-color: var(--holo-ink-8);
  --bs-border-dashed-color: var(--holo-ink-8);
  --bs-border-radius: var(--holo-radius);
  --bs-border-radius-sm: var(--holo-radius-sm);
  --bs-border-radius-lg: var(--holo-radius-lg);
  --bs-card-box-shadow: none;
  --bs-card-border-color: var(--holo-ink-8);
  --bs-card-border-radius: var(--holo-radius-lg);
  --bs-header-desktop-fixed-bg-color: var(--holo-surface);
  --bs-header-desktop-fixed-box-shadow: none;
  --bs-header-tablet-and-mobile-fixed-bg-color: var(--holo-surface);
  --bs-header-tablet-and-mobile-fixed-box-shadow: none;
  --bs-aside-bg-color: var(--holo-surface);
  --bs-aside-logo-bg-color: var(--holo-surface);
  --bs-aside-box-shadow: none;
  --bs-scrolltop-bg-color: var(--holo-ink);
  --bs-scrolltop-bg-color-hover: var(--holo-ink-90);
  --bs-input-bg: var(--holo-surface);
  --bs-input-solid-bg: var(--holo-surface);
  --bs-input-solid-bg-focus: var(--holo-surface);
  --bs-input-solid-color: var(--holo-ink);
  --bs-input-solid-placeholder-color: var(--holo-ink-20);
  --bs-input-border-color: var(--holo-ink-8);
  --bs-input-focus-border-color: var(--holo-ink-30);
  --bs-input-color: var(--holo-ink);
  --bs-input-placeholder-color: var(--holo-ink-20);
  --bs-table-border-color: var(--holo-ink-8);
  --bs-table-hover-bg: var(--holo-ink-4);
  --bs-table-striped-bg: transparent;
  --bs-pagination-border-radius: var(--holo-radius-sm);
  --bs-btn-border-radius: var(--holo-radius);
}

/* ── Dark theme (Metronic's switch sets data-bs-theme=dark; mi keeps the same choice) ──
   The same tokens with dark values: ink becomes light, the surface near-black, the greens one step
   lighter so links and primary actions read; every rule above reads them, so nothing else changes. */
[data-bs-theme=dark] {
  --holo-ink: #ececec;
  --holo-ink-90: rgba(236, 236, 236, 0.9);
  --holo-ink-70: rgba(236, 236, 236, 0.7);
  --holo-ink-50: rgba(236, 236, 236, 0.5);
  --holo-ink-30: rgba(236, 236, 236, 0.3);
  --holo-ink-20: rgba(236, 236, 236, 0.2);
  --holo-ink-15: rgba(236, 236, 236, 0.15);
  --holo-ink-12: rgba(236, 236, 236, 0.12);
  --holo-ink-8: rgba(236, 236, 236, 0.08);
  --holo-ink-4: rgba(236, 236, 236, 0.04);
  --holo-surface: #161616;
  --holo-on-ink: #161616;
  --holo-signal-dark: #8fd46a;
  --holo-signal-forest: #79c35c;
  --holo-signal-green: #7ed95c;
  --holo-positive: #8fd48a;
  --holo-positive-soft: #1b3320;
  --holo-warning: #f0b35a;
  --holo-warning-soft: #3a2a12;
  --holo-negative: #f08080;
  --holo-negative-soft: #3d1f1f;
  --holo-info: #7fb6f0;
  --holo-info-soft: #17283a;
  --holo-table-head: #1c1c1c;
  --holo-row-hover: #222222;
  --bs-secondary: #262626;
  --bs-light: #1d1d1d;
  --bs-body-color: var(--holo-ink);
  --bs-body-color-rgb: 236, 236, 236;
  --bs-body-bg: var(--holo-surface);
  --bs-page-bg: var(--holo-surface);
  --bs-app-bg-color: var(--holo-surface);
  --bs-dark-inverse: var(--holo-on-ink);
  color-scheme: dark;
}

/* --------------------------------------------------------------------------
   Base typography
   -------------------------------------------------------------------------- */
html { font-size: 16px; }
body,
.btn,
.form-control,
.form-select,
.table,
.menu,
.modal,
.dropdown-menu,
.popover,
.tooltip,
.select2-container {
  font-family: var(--holo-font) !important;
}
body {
  font-size: 13px;
  color: var(--holo-ink);
  background: var(--holo-surface) !important;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--holo-ink); font-weight: 600; }
a { color: var(--holo-signal-dark); }
a:hover { color: var(--holo-signal-forest); }
.text-gray-900, .text-gray-800, .text-dark { color: var(--holo-ink) !important; }
.text-gray-700 { color: var(--holo-ink-70) !important; }
.text-gray-600 { color: var(--holo-ink-50) !important; }
.text-gray-500, .text-gray-400, .text-muted { color: var(--holo-ink-30) !important; }
.text-primary { color: var(--holo-signal-dark) !important; }
.text-success { color: var(--holo-positive) !important; }
.text-warning { color: var(--holo-warning) !important; }
.text-danger { color: var(--holo-negative) !important; }
.text-info { color: var(--holo-info) !important; }
.bg-light { background-color: var(--holo-ink-4) !important; }
.bg-light-primary { background-color: var(--holo-accent-15) !important; }
.bg-light-success { background-color: var(--holo-positive-soft) !important; }
.bg-light-warning { background-color: var(--holo-warning-soft) !important; }
.bg-light-danger { background-color: var(--holo-negative-soft) !important; }
.bg-light-info { background-color: var(--holo-info-soft) !important; }
.bg-primary { background-color: var(--holo-accent) !important; color: var(--holo-signal-dark) !important; }
.border-gray-200, .border-gray-300, .border-gray-400, .border-gray-500, .border, .border-dashed { border-color: var(--holo-ink-8) !important; }
.separator { border-bottom-color: var(--holo-ink-8) !important; }
.separator.separator-dashed { border-bottom-style: solid !important; }
.fw-bold, .fw-bolder { font-weight: 600 !important; }
.fw-semibold { font-weight: 500 !important; }

/* --------------------------------------------------------------------------
   Layout: 48px white top bar, 224px white sidebar, white page
   -------------------------------------------------------------------------- */
.header {
  height: var(--holo-header-height) !important;
  min-height: var(--holo-header-height) !important;
  background: var(--holo-surface) !important;
  border-bottom: 1px solid var(--holo-ink-8);
  box-shadow: none !important;
}
.header-fixed[data-kt-sticky-header=on] .wrapper { padding-top: var(--holo-header-height) !important; }
.aside-fixed .wrapper { padding-left: var(--holo-aside-width) !important; padding-right: 0 !important; }
.aside-fixed[data-kt-aside-minimize=on] .wrapper { padding-left: var(--holo-aside-width-min) !important; }
.aside-fixed[data-kt-sticky-header=on] .header { left: var(--holo-aside-width) !important; }
.aside-fixed[data-kt-sticky-header=on][data-kt-aside-minimize=on] .header { left: var(--holo-aside-width-min) !important; }
.header .container-fluid { padding-left: 16px !important; padding-right: 16px !important; }
.header .header-search .form-control { height: 32px !important; min-height: 32px !important; font-size: 12px !important; border-radius: var(--holo-radius) !important; }
.header .btn.btn-icon { width: 28px !important; height: 28px !important; color: var(--holo-ink-30); }
.header .btn.btn-icon:hover { color: var(--holo-ink); background: var(--holo-ink-4) !important; }
.header .symbol > img, .header .symbol .symbol-label { width: 28px !important; height: 28px !important; border-radius: 9999px !important; }
.header img[alt="Logo"] { height: 22px !important; }
.toolbar {
  background: var(--holo-surface) !important;
  border-bottom: 1px solid var(--holo-ink-8);
  box-shadow: none !important;
}
.content { padding: 16px 0 !important; }
.container-xxl, .container-fluid { padding-left: 24px; padding-right: 24px; }
.content .container-fluid.sticky-top, .content .container-fluid.py-4.px-10 {
  padding: 12px 24px !important;
  background: var(--holo-surface);
  border-bottom: 1px solid var(--holo-ink-8);
}
.page-title h1, .page-title .h1, .page-heading h1 { font-size: 16px !important; font-weight: 600 !important; color: var(--holo-ink); }
.scrolltop { background: var(--holo-ink) !important; border-radius: var(--holo-radius); }

/* Sidebar */
.aside {
  width: var(--holo-aside-width) !important;
  background: var(--holo-surface) !important;
  border-right: 1px solid var(--holo-ink-8) !important;
  box-shadow: none !important;
}
[data-kt-aside-minimize=on] .aside { width: var(--holo-aside-width-min) !important; }
.aside .aside-logo {
  height: var(--holo-header-height) !important;
  min-height: var(--holo-header-height) !important;
  padding: 0 16px !important;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--holo-ink-8);
}
.aside .aside-logo img.logo-default { max-height: 22px !important; }
.aside .aside-logo img.logo-minimize { height: 24px !important; }
.aside-menu { height: calc(100vh - var(--holo-header-height)) !important; padding: 0 !important; }
.aside-menu .menu { padding: 8px 0 !important; }
.aside .menu .menu-section { padding: 0 0 4px; }
.aside .menu .menu-section + .menu-section { border-top: 1px solid var(--holo-ink-8); margin-top: 6px; padding-top: 8px; }
.aside .menu .menu-section .menu-content { padding: 4px 16px 2px; }
.aside .menu .menu-section .menu-content span {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--holo-ink-30) !important;
}
.aside .menu .menu-item { padding: 0 !important; }
.aside .menu .menu-item .menu-link {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 1px 8px !important;
  padding: 6px 8px !important;
  min-height: 0 !important;
  border-radius: var(--holo-radius-sm) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--holo-ink) !important;
  transition: background-color 0.15s ease;
}
.aside .menu .menu-item .menu-link:hover { background: var(--holo-ink-4) !important; color: var(--holo-ink) !important; }
.aside .menu .menu-item .menu-link.active,
.aside .menu .menu-item.here > .menu-link,
.aside .menu .menu-item.show > .menu-link.active {
  background: var(--holo-accent-30) !important;
  color: var(--holo-signal-dark) !important;
}
.aside .menu .menu-item .menu-link .menu-title { color: inherit !important; font-weight: inherit !important; font-size: inherit !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aside .menu .menu-item .menu-link .menu-icon { width: 15px !important; min-width: 15px; margin-right: 0 !important; color: inherit !important; display: inline-flex; justify-content: center; }
.aside .menu .menu-item .menu-link .menu-icon i { font-size: 15px !important; color: inherit !important; }
.aside .menu .menu-item .menu-link .menu-icon img { width: 15px !important; height: 15px !important; }
.aside .menu .menu-item .menu-link .menu-arrow { width: 12px; height: 12px; margin-left: auto; opacity: 0.4; }
.aside .menu .menu-sub-accordion { padding: 2px 0 4px !important; }
.aside .menu .menu-sub-accordion .menu-item .menu-link {
  font-size: 12px !important;
  font-weight: 400 !important;
  padding: 4px 8px 4px 32px !important;
  margin: 0 8px !important;
}
.aside .menu .menu-sub-accordion .menu-sub-accordion .menu-item .menu-link { padding-left: 48px !important; }
.aside .menu .menu-sub-accordion .menu-item .menu-link.active,
.aside .menu .menu-sub-accordion .menu-item.here > .menu-link {
  background: var(--holo-accent-15) !important;
  color: var(--holo-signal-dark) !important;
  font-weight: 500 !important;
}
.aside .menu .menu-item .menu-link .badge { margin-left: auto; }
.aside .hover-scroll-y { margin: 0 !important; }

/* --------------------------------------------------------------------------
   Buttons — 13px medium, 8px radius; primary is lime with dark-green text
   -------------------------------------------------------------------------- */
.btn {
  border-radius: var(--holo-radius) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  padding: 0.45rem 0.85rem !important;
  box-shadow: none !important;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn.btn-sm { font-size: 12px !important; padding: 0.35rem 0.7rem !important; }
.btn.btn-lg { font-size: 14px !important; padding: 0.6rem 1.1rem !important; }
.btn.btn-icon { width: 32px !important; height: 32px !important; padding: 0 !important; }
.btn.btn-icon.btn-sm { width: 28px !important; height: 28px !important; }
.btn.btn-primary, .btn.btn-primary:focus { background: var(--holo-accent) !important; border-color: var(--holo-accent) !important; color: var(--holo-signal-dark) !important; }
.btn.btn-primary:hover, .btn.btn-primary:active, .btn.btn-primary.active { background: var(--holo-accent-hover) !important; border-color: var(--holo-accent-hover) !important; color: var(--holo-signal-dark) !important; }
.btn.btn-primary i, .btn.btn-primary .svg-icon { color: var(--holo-signal-dark) !important; }
.btn.btn-light-primary, .btn.btn-active-light-primary.active, .btn.btn-active-light-primary:hover { background: var(--holo-accent-15) !important; border-color: transparent !important; color: var(--holo-signal-dark) !important; }
.btn.btn-light-primary i { color: var(--holo-signal-dark) !important; }
.btn.btn-light, .btn.btn-secondary, .btn.btn-outline-secondary, .btn.btn-light-dark, .btn.btn-active-light {
  background: var(--holo-surface) !important;
  border: 1px solid var(--holo-ink-8) !important;
  color: var(--holo-ink) !important;
}
.btn.btn-light:hover, .btn.btn-secondary:hover, .btn.btn-outline-secondary:hover, .btn.btn-light-dark:hover { background: var(--holo-ink-4) !important; color: var(--holo-ink) !important; }
.btn.btn-light i, .btn.btn-secondary i { color: var(--holo-ink-50) !important; }
.btn.btn-dark { background: var(--holo-ink) !important; border-color: var(--holo-ink) !important; color: var(--holo-on-ink) !important; }
.btn.btn-dark:hover { background: var(--holo-ink-90) !important; }
.btn.btn-danger { background: var(--holo-negative) !important; border-color: var(--holo-negative) !important; color: var(--holo-on-ink) !important; }
.btn.btn-light-danger { background: var(--holo-negative-soft) !important; color: var(--holo-negative) !important; border-color: transparent !important; }
.btn.btn-success { background: var(--holo-positive) !important; border-color: var(--holo-positive) !important; color: var(--holo-on-ink) !important; }
.btn.btn-light-success { background: var(--holo-positive-soft) !important; color: var(--holo-positive) !important; border-color: transparent !important; }
.btn.btn-warning, .btn.btn-light-warning { background: var(--holo-warning-soft) !important; border-color: transparent !important; color: var(--holo-warning) !important; }
.btn.btn-info, .btn.btn-light-info { background: var(--holo-info-soft) !important; border-color: transparent !important; color: var(--holo-info) !important; }
.btn.btn-link { color: var(--holo-signal-dark) !important; padding: 0 !important; }
.btn-check:checked + .btn, .btn-check:active + .btn { background: var(--holo-accent-30) !important; color: var(--holo-signal-dark) !important; border-color: transparent !important; }
.btn-close { opacity: 0.4; }
.btn-close:hover { opacity: 0.8; }

/* --------------------------------------------------------------------------
   Forms — white fields, 1px ink border, 8px radius, 13px text
   -------------------------------------------------------------------------- */
.form-control,
.form-select,
.form-control.form-control-solid,
.form-select.form-select-solid,
.form-control.form-control-flush,
.form-control.form-control-transparent {
  background-color: var(--holo-surface) !important;
  border: 1px solid var(--holo-ink-8) !important;
  border-radius: var(--holo-radius) !important;
  color: var(--holo-ink) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  padding: 0.5rem 0.75rem !important;
  min-height: 36px;
  box-shadow: none !important;
}
.form-select { padding-right: 2.25rem !important; }
.form-control:focus, .form-select:focus, .form-control.form-control-solid:focus, .form-select.form-select-solid:focus { border-color: var(--holo-ink-30) !important; outline: 0; }
.form-control::placeholder { color: var(--holo-ink-20) !important; }
.form-control:disabled, .form-select:disabled, .form-control[readonly] { background-color: var(--holo-ink-4) !important; color: var(--holo-ink-50) !important; }
.form-control.form-control-sm, .form-select.form-select-sm { min-height: 32px; padding: 0.35rem 0.6rem !important; font-size: 12px !important; }
.form-control.form-control-lg, .form-select.form-select-lg { min-height: 40px; font-size: 14px !important; }
textarea.form-control { min-height: 80px; }
.form-label, label.form-label, .fs-6.fw-semibold.form-label, .fw-semibold.fs-6.mb-2 {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--holo-ink-50) !important;
  margin-bottom: 4px !important;
}
.form-label.required::after { color: var(--holo-negative) !important; }
.form-text { font-size: 11px; color: var(--holo-ink-30); }
.input-group .input-group-text { background: var(--holo-surface) !important; border: 1px solid var(--holo-ink-8) !important; border-radius: var(--holo-radius) !important; font-size: 12px; color: var(--holo-ink-50); }
.input-group > .form-control:not(:first-child), .input-group > .form-select:not(:first-child) { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }
.input-group > .form-control:not(:last-child), .input-group > .form-select:not(:last-child) { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.form-check .form-check-input { border: 1px solid var(--holo-ink-15); border-radius: 4px; width: 1rem; height: 1rem; background-color: var(--holo-surface); }
.form-check .form-check-input:checked { background-color: var(--holo-signal-green) !important; border-color: var(--holo-signal-green) !important; }
.form-check .form-check-input:focus { box-shadow: none; border-color: var(--holo-ink-30); }
.form-check-label { font-size: 13px; color: var(--holo-ink); }
.form-switch .form-check-input { width: 2.25rem !important; height: 1.25rem !important; border-radius: 9999px !important; background-color: var(--holo-ink-15); border-color: transparent; }
.form-switch .form-check-input:checked { background-color: var(--holo-signal-green) !important; }
.form-check.form-check-solid .form-check-input { background-color: var(--holo-ink-8); }
.form-check.form-check-solid .form-check-input:checked { background-color: var(--holo-signal-green) !important; }
/* select2 (Metronic's dropdowns) */
.select2-container--bootstrap5 .select2-selection {
  background: var(--holo-surface) !important;
  border: 1px solid var(--holo-ink-8) !important;
  border-radius: var(--holo-radius) !important;
  min-height: 36px !important;
  font-size: 13px !important;
  color: var(--holo-ink) !important;
  box-shadow: none !important;
}
.select2-container--bootstrap5.select2-container--focus .select2-selection, .select2-container--bootstrap5.select2-container--open .select2-selection { border-color: var(--holo-ink-30) !important; }
.select2-container--bootstrap5 .select2-selection--single .select2-selection__rendered { color: var(--holo-ink) !important; font-size: 13px !important; padding: 0.5rem 2rem 0.5rem 0.75rem !important; line-height: 1.4 !important; }
.select2-container--bootstrap5 .select2-selection--multiple .select2-selection__choice { background: var(--holo-ink-4) !important; border: 1px solid var(--holo-ink-8) !important; border-radius: 9999px !important; font-size: 12px !important; color: var(--holo-ink) !important; }
.select2-container--bootstrap5 .select2-dropdown { border: 1px solid var(--holo-ink-8) !important; border-radius: var(--holo-radius) !important; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important; }
.select2-container--bootstrap5 .select2-dropdown .select2-results__option { font-size: 13px !important; padding: 0.4rem 0.75rem !important; border-radius: var(--holo-radius-sm); margin: 0 4px; }
.select2-container--bootstrap5 .select2-dropdown .select2-results__option.select2-results__option--highlighted { background: var(--holo-ink-4) !important; color: var(--holo-ink) !important; }
.select2-container--bootstrap5 .select2-dropdown .select2-results__option.select2-results__option--selected { background: var(--holo-accent-15) !important; color: var(--holo-signal-dark) !important; }
.select2-container--bootstrap5 .select2-search .select2-search__field { border: 1px solid var(--holo-ink-8) !important; border-radius: var(--holo-radius-sm) !important; font-size: 13px !important; }
/* date pickers */
.flatpickr-calendar, .daterangepicker { border: 1px solid var(--holo-ink-8) !important; border-radius: var(--holo-radius) !important; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1) !important; font-family: var(--holo-font) !important; }
.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange, .daterangepicker td.active { background: var(--holo-accent) !important; border-color: var(--holo-accent) !important; color: var(--holo-signal-dark) !important; }

/* --------------------------------------------------------------------------
   Cards and containers — 1px border, 12px radius, no shadow
   -------------------------------------------------------------------------- */
.card {
  border: 1px solid var(--holo-ink-8) !important;
  border-radius: var(--holo-radius-lg) !important;
  box-shadow: none !important;
  background: var(--holo-surface);
}
.card .card-header {
  border-bottom: 1px solid var(--holo-ink-8) !important;
  min-height: 52px !important;
  padding: 0 20px !important;
  background: transparent;
}
.card .card-header .card-title, .card .card-header .card-title h2, .card .card-header .card-title h3, .card .card-header .card-label {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--holo-ink) !important;
}
.card .card-header .card-title .text-muted, .card .card-header .card-title .fs-7 { font-size: 12px !important; font-weight: 400 !important; }
.card .card-body { padding: 20px !important; }
.card .card-footer { border-top: 1px solid var(--holo-ink-8) !important; padding: 16px 20px !important; }
.card.card-bordered, .card.card-dashed { border-style: solid !important; }
.card.hover-elevate-up:hover { transform: none; box-shadow: none !important; }
.accordion .accordion-item { border: 1px solid var(--holo-ink-8) !important; border-radius: var(--holo-radius) !important; margin-bottom: 8px; }
.accordion .accordion-button { font-size: 13px !important; font-weight: 500 !important; padding: 12px 16px !important; background: var(--holo-surface) !important; color: var(--holo-ink) !important; box-shadow: none !important; }
.accordion .accordion-button:not(.collapsed) { background: var(--holo-ink-4) !important; }
.accordion .accordion-body { padding: 16px !important; }

/* --------------------------------------------------------------------------
   Tables — 13px rows, 11px uppercase headers, 1px row lines, hover tint
   -------------------------------------------------------------------------- */
.table {
  font-size: 13px !important;
  color: var(--holo-ink);
  margin-bottom: 0;
  --bs-table-bg: transparent;
}
.table > :not(caption) > * > * {
  padding: 10px 12px !important;
  background-color: transparent;
  border-bottom: 1px solid var(--holo-ink-8) !important;
  vertical-align: middle;
}
.table > thead > tr > th, .table thead th, .table .table-header th {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: var(--holo-ink-30) !important;
  background: var(--holo-surface) !important;
  border-bottom: 1px solid var(--holo-ink-8) !important;
  white-space: nowrap;
}
.table.table-row-dashed tr, .table.table-row-bordered tr, .table.table-row-gray-300 tr { border-bottom: 1px solid var(--holo-ink-8) !important; border-bottom-style: solid !important; }
.table.table-row-dashed > :not(caption) > * > *, .table.table-row-bordered > :not(caption) > * > * { border-bottom-style: solid !important; }
.table > tbody > tr:last-child > * { border-bottom-color: transparent !important; }
.table.table-striped > tbody > tr:nth-of-type(odd) > * { background-color: transparent !important; }
.table > tbody > tr:hover > * { background-color: var(--holo-ink-4) !important; }
.table .fw-bold, .table .fw-bolder, .table .text-gray-800.fw-bold { font-weight: 500 !important; }
.table .text-hover-primary:hover { color: var(--holo-signal-dark) !important; }
.table .symbol-label { font-size: 11px; }
.table-responsive { border-radius: 0; }
/* DataTables */
.dataTables_wrapper .dataTables_length select, .dataTables_wrapper .dataTables_filter input { min-height: 32px !important; padding: 0.35rem 0.6rem !important; font-size: 12px !important; }
.dataTables_wrapper .dataTables_info { font-size: 11px !important; color: var(--holo-ink-30) !important; }
.dataTables_wrapper .dataTables_paginate { margin-top: 8px; }
table.dataTable thead .sorting:before, table.dataTable thead .sorting:after, table.dataTable thead .sorting_asc:before, table.dataTable thead .sorting_asc:after, table.dataTable thead .sorting_desc:before, table.dataTable thead .sorting_desc:after { opacity: 0.35; }
/* Pagination */
.pagination { gap: 2px; }
.pagination .page-item .page-link {
  min-width: 28px !important;
  height: 28px !important;
  padding: 0 8px !important;
  font-size: 12px !important;
  font-weight: 500;
  line-height: 28px;
  border-radius: var(--holo-radius-sm) !important;
  color: var(--holo-ink-50) !important;
  background: var(--holo-surface) !important;
  border: 1px solid var(--holo-ink-8) !important;
}
.pagination .page-item .page-link:hover { background: var(--holo-ink-4) !important; color: var(--holo-ink) !important; }
.pagination .page-item.active .page-link { background: var(--holo-accent-30) !important; color: var(--holo-signal-dark) !important; border-color: transparent !important; }
.pagination .page-item.disabled .page-link { opacity: 0.4; }

/* --------------------------------------------------------------------------
   Pills, labels and tabs
   -------------------------------------------------------------------------- */
.badge {
  border-radius: 9999px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  padding: 3px 8px !important;
  letter-spacing: 0;
}
.badge.badge-light-success, .badge.badge-success { background: var(--holo-positive-soft) !important; color: var(--holo-positive) !important; }
.badge.badge-light-warning, .badge.badge-warning { background: var(--holo-warning-soft) !important; color: var(--holo-warning) !important; }
.badge.badge-light-danger, .badge.badge-danger { background: var(--holo-negative-soft) !important; color: var(--holo-negative) !important; }
.badge.badge-light-info, .badge.badge-info { background: var(--holo-info-soft) !important; color: var(--holo-info) !important; }
.badge.badge-light-primary, .badge.badge-primary { background: var(--holo-accent-30) !important; color: var(--holo-signal-dark) !important; }
.badge.badge-light, .badge.badge-light-secondary, .badge.badge-secondary, .badge.badge-light-dark { background: var(--holo-ink-8) !important; color: var(--holo-ink-70) !important; }
.badge.badge-dark { background: var(--holo-ink) !important; color: var(--holo-on-ink) !important; }
.badge.badge-circle, .badge.badge-square { padding: 0 !important; }
.nav-tabs, .nav-line-tabs { border-bottom: 1px solid var(--holo-ink-8) !important; gap: 0; }
.nav-tabs .nav-item .nav-link, .nav-line-tabs .nav-item .nav-link, .nav-tabs .nav-link, .nav-line-tabs .nav-link {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--holo-ink-50) !important;
  padding: 8px 0 !important;
  margin: 0 24px 0 0 !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
}
.nav-tabs .nav-link:hover, .nav-line-tabs .nav-link:hover { color: var(--holo-ink) !important; }
.nav-tabs .nav-link.active, .nav-line-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { color: var(--holo-ink) !important; border-bottom-color: var(--holo-ink) !important; }
.nav-pills .nav-link { font-size: 13px !important; font-weight: 500 !important; border-radius: var(--holo-radius) !important; color: var(--holo-ink-50) !important; padding: 6px 12px !important; }
.nav-pills .nav-link.active { background: var(--holo-accent-30) !important; color: var(--holo-signal-dark) !important; }
.nav-group.nav-group-fluid, .nav-group { background: var(--holo-ink-4) !important; border-radius: var(--holo-radius) !important; }

/* --------------------------------------------------------------------------
   Overlays: modals, drawers, dropdown menus, alerts, toasts, tooltips
   -------------------------------------------------------------------------- */
.modal .modal-content { border: 1px solid var(--holo-ink-8) !important; border-radius: var(--holo-radius-lg) !important; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important; }
.modal .modal-header { border-bottom: 1px solid var(--holo-ink-8) !important; padding: 16px 24px !important; }
.modal .modal-header .modal-title, .modal .modal-header h2, .modal .modal-header h3 { font-size: 16px !important; font-weight: 600 !important; color: var(--holo-ink); }
.modal .modal-body { padding: 24px !important; }
.modal .modal-footer { border-top: 1px solid var(--holo-ink-8) !important; padding: 16px 24px !important; }
.modal-backdrop { background-color: var(--holo-ink) !important; }
.modal-backdrop.show { opacity: 0.3 !important; }
.drawer { box-shadow: -8px 0 24px rgba(0, 0, 0, 0.08) !important; border-left: 1px solid var(--holo-ink-8); }
.menu-sub-dropdown, .dropdown-menu {
  border: 1px solid var(--holo-ink-8) !important;
  border-radius: var(--holo-radius) !important;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
  padding: 4px !important;
}
.menu-sub-dropdown .menu-item .menu-link, .dropdown-menu .dropdown-item { font-size: 12px !important; border-radius: var(--holo-radius-sm) !important; padding: 6px 10px !important; color: var(--holo-ink) !important; }
.menu-sub-dropdown .menu-item .menu-link:hover, .dropdown-menu .dropdown-item:hover { background: var(--holo-ink-4) !important; color: var(--holo-ink) !important; }
.menu-sub-dropdown .menu-item .menu-link.active { background: var(--holo-accent-15) !important; color: var(--holo-signal-dark) !important; }
.menu-sub-dropdown .menu-item .menu-link .menu-title { color: inherit !important; }
.alert { border-radius: var(--holo-radius) !important; border: 1px solid var(--holo-ink-8) !important; font-size: 13px !important; padding: 12px 16px !important; }
.alert.alert-success, .alert.alert-light-success { background: var(--holo-positive-soft) !important; color: var(--holo-positive) !important; border-color: transparent !important; }
.alert.alert-warning, .alert.alert-light-warning { background: var(--holo-warning-soft) !important; color: var(--holo-warning) !important; border-color: transparent !important; }
.alert.alert-danger, .alert.alert-light-danger { background: var(--holo-negative-soft) !important; color: var(--holo-negative) !important; border-color: transparent !important; }
.alert.alert-info, .alert.alert-light-info, .alert.alert-primary, .alert.alert-light-primary { background: var(--holo-info-soft) !important; color: var(--holo-info) !important; border-color: transparent !important; }
.toast { border-radius: var(--holo-radius) !important; border: 1px solid var(--holo-ink-8) !important; font-size: 13px; }
.tooltip .tooltip-inner { background: var(--holo-ink); font-size: 11px; border-radius: var(--holo-radius-sm); }
.popover { border: 1px solid var(--holo-ink-8) !important; border-radius: var(--holo-radius) !important; font-size: 12px; }
.swal2-popup { border-radius: var(--holo-radius-lg) !important; font-family: var(--holo-font) !important; }
.swal2-popup .swal2-styled.swal2-confirm { background: var(--holo-accent) !important; color: var(--holo-signal-dark) !important; border-radius: var(--holo-radius) !important; font-size: 13px !important; font-weight: 500 !important; }
.swal2-popup .swal2-styled.swal2-cancel { background: var(--holo-surface) !important; color: var(--holo-ink) !important; border: 1px solid var(--holo-ink-8) !important; border-radius: var(--holo-radius) !important; font-size: 13px !important; font-weight: 500 !important; }

/* --------------------------------------------------------------------------
   Small parts: avatars, progress, spinners, notices
   -------------------------------------------------------------------------- */
.symbol > img, .symbol .symbol-label { border-radius: 9999px !important; }
.symbol .symbol-label { background: var(--holo-signal-green) !important; color: var(--holo-on-ink) !important; font-size: 11px !important; font-weight: 600 !important; }
.symbol.symbol-square > img, .symbol.symbol-square .symbol-label { border-radius: var(--holo-radius) !important; }
.progress { background: var(--holo-ink-8) !important; border-radius: 9999px !important; height: 6px !important; }
.progress .progress-bar { background: var(--holo-signal-green) !important; border-radius: 9999px; }
.spinner-border { border-width: 2px; }
.notice { border-radius: var(--holo-radius) !important; border: 1px solid var(--holo-ink-8) !important; border-style: solid !important; }
.stepper .stepper-item .stepper-icon { border-radius: var(--holo-radius) !important; }
.stepper .stepper-item.current .stepper-icon { background: var(--holo-accent-30) !important; }
.stepper .stepper-item.current .stepper-icon .stepper-number { color: var(--holo-signal-dark) !important; }
.image-input .image-input-wrapper { border-radius: var(--holo-radius) !important; }
.ki-duotone, .bi { vertical-align: middle; }
/* Scrollbars, like the app */
.hover-scroll-y::-webkit-scrollbar, .scroll-y::-webkit-scrollbar, .table-responsive::-webkit-scrollbar { width: 6px; height: 6px; }
.hover-scroll-y::-webkit-scrollbar-thumb, .scroll-y::-webkit-scrollbar-thumb, .table-responsive::-webkit-scrollbar-thumb { background: var(--holo-ink-12); border-radius: 9999px; }

/* --------------------------------------------------------------------------
   Fixes after the first pass: icon padding in search fields, inline select2
   search, and the strip Metronic paints above the content
   -------------------------------------------------------------------------- */
.form-control.ps-9, .form-select.ps-9 { padding-left: 2.25rem !important; }
.form-control.ps-10, .form-select.ps-10 { padding-left: 2.5rem !important; }
.form-control.ps-11, .form-select.ps-11 { padding-left: 2.75rem !important; }
.form-control.ps-12, .form-select.ps-12 { padding-left: 3rem !important; }
.form-control.ps-13, .form-select.ps-13 { padding-left: 3.25rem !important; }
.form-control.ps-14, .form-select.ps-14 { padding-left: 3.5rem !important; }
.form-control.pe-10, .form-select.pe-10 { padding-right: 2.5rem !important; }
.header .header-search .form-control { padding-left: 2.5rem !important; }
.header .header-search .search-icon { left: 0; margin-left: 0.85rem !important; font-size: 14px !important; }
.select2-container--bootstrap5 .select2-selection--multiple .select2-search__field,
.select2-container--bootstrap5 .select2-selection--multiple .select2-search--inline .select2-search__field {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  min-height: 0;
  margin: 0;
  font-size: 13px !important;
  color: var(--holo-ink) !important;
}
.select2-container--bootstrap5 .select2-selection--multiple .select2-search__field::placeholder { color: var(--holo-ink-20) !important; }
.select2-container--bootstrap5 .select2-selection--multiple { padding: 0.25rem 0.5rem !important; }
.select2-container--bootstrap5 .select2-selection--single .select2-selection__placeholder { color: var(--holo-ink-20) !important; }
.content > .container-fluid.sticky-top, .content .container-fluid.sticky-top { background: var(--holo-surface) !important; }
.bg-body { background-color: var(--holo-surface) !important; }
.bg-gray-100, .bg-gray-200, .bg-secondary { background-color: var(--holo-ink-4) !important; }
.toolbar, .app-toolbar, .toolbar .container-fluid { background: var(--holo-surface) !important; }
.card.bg-light, .card .card-header.bg-light { background: var(--holo-surface) !important; }
.sticky-top { z-index: 96; }
.content, .app-content, .wrapper, .page { background: var(--holo-surface) !important; }

/* --------------------------------------------------------------------------
   Lists: the same cell typography and image sizes as Market Intelligence
   (names 13px medium, secondary 12px, images 24px, flags 20px, pills 10px)
   -------------------------------------------------------------------------- */
.table > :not(caption) > * > * { padding: 12px 20px !important; }
.table > thead > tr > th, .table thead th { padding: 12px 20px !important; }
.table tbody td { font-size: 13px !important; font-weight: 400 !important; line-height: 1.45; color: var(--holo-ink); }
.table tbody td a, .table tbody td .fs-4, .table tbody td .fs-5, .table tbody td .fs-6,
.table tbody td .text-gray-800, .table tbody td .text-gray-900, .table tbody td .fw-bold, .table tbody td .fw-bolder, .table tbody td .fw-semibold,
.table tbody td .text-hover-primary {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--holo-ink) !important;
  line-height: 1.45 !important;
}
.table tbody td a:hover, .table tbody td .text-hover-primary:hover { color: var(--holo-signal-dark) !important; }
.table tbody td .fs-7, .table tbody td .fs-8, .table tbody td small, .table tbody td .text-muted, .table tbody td .text-gray-400, .table tbody td .text-gray-500, .table tbody td .text-gray-600, .table tbody td .fw-light {
  font-size: 12px !important;
  font-weight: 400 !important;
  color: var(--holo-ink-50) !important;
}
.table tbody td .text-success, .table tbody td .text-danger, .table tbody td .text-warning, .table tbody td .text-info { font-weight: 500 !important; }
/* every image, logo and avatar in a list is 24px round, like the app's entity images */
.table .symbol, .table .symbol.symbol-30px, .table .symbol.symbol-35px, .table .symbol.symbol-40px, .table .symbol.symbol-45px, .table .symbol.symbol-50px, .table .symbol.symbol-60px, .table .symbol.symbol-75px {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  flex: 0 0 24px;
}
.table .symbol > img, .table .symbol .symbol-label, .table .symbol img.w-100 {
  width: 24px !important;
  height: 24px !important;
  border-radius: 9999px !important;
  object-fit: cover !important;
  font-size: 10px !important;
  background-color: var(--holo-surface);
  border: 1px solid var(--holo-ink-8);
}
.table .symbol .symbol-label { background-color: var(--holo-signal-green) !important; color: var(--holo-on-ink) !important; border: 0; }
.table .symbol.symbol-square > img, .table .symbol.symbol-square .symbol-label { border-radius: var(--holo-radius-sm) !important; }
.table .symbol-group .symbol { margin-left: -6px; }
.table tbody td img:not(.symbol img):not(.w-100) { max-height: 24px; }
.table tbody td img[src*="flags/"], .table tbody td img.flag, .table tbody td .fi { width: 20px !important; height: 20px !important; border-radius: 9999px; object-fit: cover; }
/* counters pinned on an image (products in an order) */
.table .symbol .badge.position-absolute, .table .position-relative > .badge.position-absolute {
  min-width: 16px !important;
  height: 16px !important;
  padding: 0 4px !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  line-height: 16px !important;
  background: var(--holo-accent-30) !important;
  color: var(--holo-signal-dark) !important;
}
/* pills inside lists */
.table tbody .badge { font-size: 10px !important; font-weight: 600 !important; padding: 2px 8px !important; line-height: 1.3 !important; }
/* icon actions in lists */
.table tbody td .btn.btn-icon, .table tbody td .btn-icon { width: 26px !important; height: 26px !important; }
.table tbody td .btn-icon i, .table tbody td .btn-icon .svg-icon { font-size: 14px !important; }
.table tbody td .btn.btn-sm:not(.btn-icon) { font-size: 12px !important; padding: 4px 10px !important; }
.table tbody td .form-check-input { width: 16px; height: 16px; }

/* --------------------------------------------------------------------------
   Type scale — the exact steps Market Intelligence uses
   32/24 hero · 20 page title · 16 section · 15 title bar · 14 card title ·
   13 body · 12 secondary · 11 labels · 10 pills · 9 counters
   -------------------------------------------------------------------------- */
h1, .h1 { font-size: 20px !important; font-weight: 700 !important; line-height: 1.3 !important; letter-spacing: -0.01em; }
h2, .h2 { font-size: 16px !important; font-weight: 600 !important; line-height: 1.35 !important; }
h3, .h3 { font-size: 14px !important; font-weight: 600 !important; line-height: 1.4 !important; }
h4, .h4, h5, .h5 { font-size: 13px !important; font-weight: 600 !important; line-height: 1.4 !important; }
h6, .h6 { font-size: 12px !important; font-weight: 600 !important; line-height: 1.4 !important; }
.fs-3x, .fs-3qx, .fs-3hx, .fs-4x { font-size: 24px !important; line-height: 1.2 !important; }
.fs-2x, .fs-2qx, .fs-2hx, .fs-2tx, .fs-1 { font-size: 20px !important; line-height: 1.3 !important; }
.fs-2 { font-size: 18px !important; line-height: 1.3 !important; }
.fs-3 { font-size: 16px !important; line-height: 1.35 !important; }
.fs-4 { font-size: 15px !important; line-height: 1.4 !important; }
.fs-5 { font-size: 14px !important; line-height: 1.4 !important; }
.fs-6 { font-size: 13px !important; line-height: 1.45 !important; }
.fs-7 { font-size: 12px !important; line-height: 1.45 !important; }
.fs-8 { font-size: 11px !important; line-height: 1.4 !important; }
.fs-9 { font-size: 10px !important; line-height: 1.4 !important; }
.fs-base { font-size: 13px !important; }
/* icons keep their own size regardless of the text scale */
i.fs-1, .svg-icon.svg-icon-1 { font-size: 20px !important; }
i.fs-2, .svg-icon.svg-icon-2 { font-size: 18px !important; }
i.fs-3, .svg-icon.svg-icon-3 { font-size: 16px !important; }
i.fs-4, i.fs-5, i.fs-6 { font-size: 14px !important; }
i.fs-7, i.fs-8 { font-size: 12px !important; }
.fw-bold, .fw-bolder { font-weight: 600 !important; }
.fw-semibold { font-weight: 500 !important; }
.fw-normal { font-weight: 400 !important; }
.text-uppercase.fs-8, .fs-8.text-uppercase, .text-uppercase.fs-9, .text-uppercase.text-muted {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em;
  color: var(--holo-ink-30) !important;
}
.card .card-title, .card .card-title h2, .card .card-title h3, .card .card-title .fs-3, .card .card-title .fs-4, .card .card-title .fs-5 { font-size: 14px !important; font-weight: 600 !important; }
.page-title h1, .page-title .h1, .page-heading h1, .toolbar h1 { font-size: 15px !important; font-weight: 600 !important; }
.modal .modal-header .modal-title, .modal .modal-header h2, .modal .modal-header h3 { font-size: 16px !important; font-weight: 600 !important; }
/* links in content: coloured, underlined on hover — never in menus, tabs or buttons */
.card a:not(.btn):not(.menu-link):not(.nav-link):not(.badge):not(.symbol):not(.page-link):not(.text-gray-800):not(.text-hover-primary):not([class*="btn"]) { color: var(--holo-signal-green); }
.card a:not(.btn):not(.menu-link):not(.nav-link):not(.badge):not(.symbol):not(.page-link):not([class*="btn"]):hover { text-decoration: underline; text-underline-offset: 2px; }
.table tbody td a:hover { text-decoration: underline; text-underline-offset: 2px; }
.text-hover-primary:hover { color: var(--holo-signal-dark) !important; }
/* a logo or avatar next to text: 10px apart, like the app's cells */
.table .symbol.me-2, .table .symbol.me-3, .table .symbol.me-4, .table .symbol.me-5, .symbol.me-3, .symbol.me-5 { margin-right: 10px !important; }
.d-flex.align-items-center > .symbol + div, .d-flex.align-items-center > .symbol + a, .d-flex.align-items-center > .symbol + span { margin-left: 0; }
/* paragraphs and descriptions */
p, .text-muted p { font-size: 13px; line-height: 1.5; }
.form-text, .text-muted.fs-7, .fs-7.text-muted { font-size: 12px !important; color: var(--holo-ink-50) !important; }
label:not(.form-label):not(.form-check-label):not(.btn) { font-size: 12px; font-weight: 500; color: var(--holo-ink-50); }
hr { border-color: var(--holo-ink-8); opacity: 1; }

/* --------------------------------------------------------------------------
   Primary action, like the app: lime with dark-green text (the app's 19 lime
   buttons: Add, Run, Save, Start); ink buttons are the dark variant; the
   deep-green "Analyze with Holo" style is available as .btn-dark-green
   -------------------------------------------------------------------------- */
.btn.btn-primary, .btn.btn-primary:focus { background: var(--holo-accent) !important; border-color: var(--holo-accent) !important; color: var(--holo-signal-dark) !important; }
.btn.btn-primary:hover, .btn.btn-primary:active, .btn.btn-primary.active { background: var(--holo-accent-hover) !important; border-color: var(--holo-accent-hover) !important; color: var(--holo-signal-dark) !important; }
.btn.btn-primary i, .btn.btn-primary .svg-icon, .btn.btn-primary .spinner-border { color: var(--holo-signal-dark) !important; }
.btn.btn-primary:disabled, .btn.btn-primary.disabled { opacity: 0.4; }
.btn.btn-light-primary, .btn.btn-active-light-primary.active, .btn.btn-active-light-primary:hover, .btn-check:checked + .btn { background: var(--holo-accent-15) !important; border-color: transparent !important; color: var(--holo-signal-dark) !important; }
.btn.btn-dark-green { background: var(--holo-signal-dark) !important; border-color: var(--holo-signal-dark) !important; color: var(--holo-accent) !important; }
.swal2-popup .swal2-styled.swal2-confirm { background: var(--holo-accent) !important; color: var(--holo-signal-dark) !important; }
.bg-primary { background-color: var(--holo-accent) !important; color: var(--holo-signal-dark) !important; }
.badge.badge-light-primary, .badge.badge-primary { background: var(--holo-accent-30) !important; color: var(--holo-signal-dark) !important; }
.pagination .page-item.active .page-link { background: var(--holo-accent-30) !important; color: var(--holo-signal-dark) !important; }

/* --------------------------------------------------------------------------
   Sidebar icons and chevrons are the app's own SVGs (generated from mi's
   nav-icons.tsx); Metronic's font glyphs and background-image arrows are off.
   -------------------------------------------------------------------------- */
.aside .menu .menu-item .menu-link .menu-icon svg, .aside .menu .menu-item .menu-link .menu-icon img { width: 15px !important; height: 15px !important; display: block; }
.aside .menu .menu-item .menu-link .menu-arrow { width: 12px !important; height: 12px !important; margin-left: auto; opacity: 1 !important; display: inline-flex; align-items: center; justify-content: center; color: var(--holo-ink-30); transition: transform 0.15s ease; }
.aside .menu .menu-item .menu-link .menu-arrow::after { display: none !important; }
.aside .menu .menu-item.show > .menu-link .menu-arrow, .aside .menu .menu-item.showing > .menu-link .menu-arrow { transform: rotate(180deg); }
.aside .menu .menu-item.here > .menu-link .menu-arrow, .aside .menu .menu-item .menu-link.active .menu-arrow { color: var(--holo-signal-dark); }
.aside .menu .menu-sub-accordion .menu-item .menu-link .menu-arrow { width: 12px !important; height: 12px !important; }
/* the inner menu follows the sidebar's width (Metronic keeps its 300px), so chevrons and badges stay inside it */
.aside, .aside .aside-menu, .aside .aside-menu .menu, .aside .aside-menu .hover-scroll-y, .aside .aside-menu .menu-section { max-width: 100% !important; box-sizing: border-box; }
.aside .aside-menu { width: var(--holo-aside-width) !important; padding-left: 0 !important; padding-right: 0 !important; }
.aside .aside-menu .menu { width: 100% !important; }
.aside .aside-menu .hover-scroll-y { width: auto !important; margin: 0 !important; }
.aside .menu .menu-item .menu-link { width: calc(100% - 16px); }
[data-kt-aside-minimize=on] .aside .aside-menu { width: var(--holo-aside-width-min) !important; }

/* --------------------------------------------------------------------------
   Button states — Metronic's hover/active/focus rules carry !important with a
   higher specificity than plain hover selectors, so each state is restated at
   that specificity with the app's own behaviour: lime stays lime (a shade
   darker), white goes faintly grey, ink stays ink, text never disappears.
   -------------------------------------------------------------------------- */
:root, [data-bs-theme=light] {
  --bs-primary-active: var(--holo-accent-hover);
  --bs-primary-inverse: var(--holo-signal-dark);
  --bs-light-active: var(--holo-ink-4);
  --bs-light-inverse: var(--holo-ink);
  --bs-secondary-active: var(--holo-ink-4);
  --bs-secondary-inverse: var(--holo-ink);
  --bs-dark-active: var(--holo-ink-90);
  --bs-dark-inverse: var(--holo-on-ink);
}
.btn-check:active + .btn.btn-primary, .btn-check:checked + .btn.btn-primary, .btn.btn-primary.active, .btn.btn-primary.show,
.btn.btn-primary:active:not(.btn-active), .btn.btn-primary:focus:not(.btn-active), .btn.btn-primary:hover:not(.btn-active), .show > .btn.btn-primary {
  color: var(--holo-signal-dark) !important;
  border-color: var(--holo-accent-hover) !important;
  background-color: var(--holo-accent-hover) !important;
}
.btn.btn-primary:hover:not(.btn-active) i, .btn.btn-primary:hover:not(.btn-active) .svg-icon, .btn.btn-primary:focus:not(.btn-active) i, .btn.btn-primary:active:not(.btn-active) i, .btn.btn-primary.active i, .btn.btn-primary.show i { color: var(--holo-signal-dark) !important; }
.btn-check:active + .btn.btn-light, .btn-check:checked + .btn.btn-light, .btn.btn-light.active, .btn.btn-light.show,
.btn.btn-light:active:not(.btn-active), .btn.btn-light:focus:not(.btn-active), .btn.btn-light:hover:not(.btn-active), .show > .btn.btn-light,
.btn-check:active + .btn.btn-secondary, .btn-check:checked + .btn.btn-secondary, .btn.btn-secondary.active, .btn.btn-secondary.show,
.btn.btn-secondary:active:not(.btn-active), .btn.btn-secondary:focus:not(.btn-active), .btn.btn-secondary:hover:not(.btn-active), .show > .btn.btn-secondary,
.btn.btn-outline-secondary:hover:not(.btn-active), .btn.btn-light-dark:hover:not(.btn-active), .btn.btn-active-light:hover:not(.btn-active), .btn.btn-active-light.active {
  color: var(--holo-ink) !important;
  border-color: var(--holo-ink-8) !important;
  background-color: var(--holo-ink-4) !important;
}
.btn.btn-light:hover:not(.btn-active) i, .btn.btn-light.active i, .btn.btn-secondary:hover:not(.btn-active) i, .btn.btn-light:hover:not(.btn-active) .svg-icon { color: var(--holo-ink) !important; }
.btn-check:active + .btn.btn-light-primary, .btn-check:checked + .btn.btn-light-primary, .btn.btn-light-primary.active, .btn.btn-light-primary.show,
.btn.btn-light-primary:active:not(.btn-active), .btn.btn-light-primary:focus:not(.btn-active), .btn.btn-light-primary:hover:not(.btn-active), .show > .btn.btn-light-primary,
.btn-check:active + .btn.btn-active-light-primary, .btn-check:checked + .btn.btn-active-light-primary, .btn.btn-active-light-primary.active, .btn.btn-active-light-primary.show,
.btn.btn-active-light-primary:active:not(.btn-active), .btn.btn-active-light-primary:focus:not(.btn-active), .btn.btn-active-light-primary:hover:not(.btn-active), .show > .btn.btn-active-light-primary {
  color: var(--holo-signal-dark) !important;
  border-color: transparent !important;
  background-color: var(--holo-accent-30) !important;
}
.btn.btn-light-primary:hover:not(.btn-active) i, .btn.btn-light-primary.active i, .btn.btn-active-light-primary:hover:not(.btn-active) i, .btn.btn-active-light-primary.active i, .btn.btn-active-light-primary:hover:not(.btn-active) .svg-icon, .btn.btn-light-primary:hover:not(.btn-active) .svg-icon { color: var(--holo-signal-dark) !important; }
.btn.btn-active-color-primary:hover:not(.btn-active), .btn.btn-active-color-primary.active, .btn.btn-active-color-primary:focus:not(.btn-active), .btn.btn-active-color-primary:active:not(.btn-active), .btn.btn-active-color-primary.show { color: var(--holo-signal-dark) !important; background-color: var(--holo-ink-4) !important; }
.btn.btn-active-color-primary:hover:not(.btn-active) i, .btn.btn-active-color-primary.active i, .btn.btn-active-color-primary:hover:not(.btn-active) .svg-icon { color: var(--holo-signal-dark) !important; }
.btn.btn-active-icon-primary:hover:not(.btn-active) i, .btn.btn-active-icon-primary.active i { color: var(--holo-signal-dark) !important; }
.btn.btn-dark:hover:not(.btn-active), .btn.btn-dark:focus:not(.btn-active), .btn.btn-dark:active:not(.btn-active), .btn.btn-dark.active { color: var(--holo-on-ink) !important; background-color: var(--holo-ink-90) !important; border-color: var(--holo-ink-90) !important; }
.btn.btn-danger:hover:not(.btn-active), .btn.btn-danger:focus:not(.btn-active), .btn.btn-danger:active:not(.btn-active), .btn.btn-danger.active { color: var(--holo-on-ink) !important; background-color: #b53838 !important; border-color: #b53838 !important; }
.btn.btn-success:hover:not(.btn-active), .btn.btn-success:focus:not(.btn-active), .btn.btn-success:active:not(.btn-active), .btn.btn-success.active { color: var(--holo-on-ink) !important; background-color: #2a5c2a !important; border-color: #2a5c2a !important; }
.btn.btn-light-danger:hover:not(.btn-active), .btn.btn-light-danger:focus:not(.btn-active), .btn.btn-light-danger.active { color: var(--holo-negative) !important; background-color: #f9d6d6 !important; border-color: transparent !important; }
.btn.btn-light-success:hover:not(.btn-active), .btn.btn-light-success:focus:not(.btn-active), .btn.btn-light-success.active { color: var(--holo-positive) !important; background-color: #d9efd1 !important; border-color: transparent !important; }
.btn.btn-warning:hover:not(.btn-active), .btn.btn-light-warning:hover:not(.btn-active), .btn.btn-warning:focus:not(.btn-active), .btn.btn-light-warning:focus:not(.btn-active), .btn.btn-warning.active, .btn.btn-light-warning.active { color: var(--holo-warning) !important; background-color: #fde6bf !important; border-color: transparent !important; }
.btn.btn-info:hover:not(.btn-active), .btn.btn-light-info:hover:not(.btn-active), .btn.btn-info:focus:not(.btn-active), .btn.btn-light-info:focus:not(.btn-active), .btn.btn-info.active, .btn.btn-light-info.active { color: var(--holo-info) !important; background-color: #cfe5fb !important; border-color: transparent !important; }
.btn.btn-danger:hover:not(.btn-active) i, .btn.btn-success:hover:not(.btn-active) i, .btn.btn-dark:hover:not(.btn-active) i { color: var(--holo-on-ink) !important; }
.btn.btn-light-danger:hover:not(.btn-active) i { color: var(--holo-negative) !important; }
.btn.btn-light-success:hover:not(.btn-active) i { color: var(--holo-positive) !important; }
.btn.btn-warning:hover:not(.btn-active) i, .btn.btn-light-warning:hover:not(.btn-active) i { color: var(--holo-warning) !important; }
.btn.btn-info:hover:not(.btn-active) i, .btn.btn-light-info:hover:not(.btn-active) i { color: var(--holo-info) !important; }
.btn.btn-link:hover { color: var(--holo-signal-forest) !important; text-decoration: underline; }
.btn:focus-visible { outline: 2px solid var(--holo-ink-30) !important; outline-offset: 2px; box-shadow: none !important; }
/* form labels keep 12px even when the template also sets a size step */
.form-label, label.form-label, .form-label.fs-6, .form-label.fs-5, .form-label.fs-7, .fs-6.form-label, .fw-semibold.form-label, .form-label.fw-bold, .form-label.fw-semibold { font-size: 12px !important; font-weight: 500 !important; color: var(--holo-ink-50) !important; }
/* the impersonation bar: the same soft red strip in Holoship and the shop admin */
.alert.alert-danger.p-1.text-center { border-radius: 0 !important; margin: 0 !important; padding: 10px 16px !important; font-size: 12px !important; border: 0 !important; border-bottom: 1px solid rgba(198, 64, 64, 0.15) !important; }
.alert.alert-danger.p-1.text-center a { color: var(--holo-negative) !important; text-decoration: underline; text-underline-offset: 2px; }

/* --------------------------------------------------------------------------
   The company block at the top of the sidebar — identical to the app's:
   24px lime avatar with initials, 14px semibold name, 11px muted second line
   -------------------------------------------------------------------------- */
.aside .aside-company { display: flex; align-items: center; gap: 8px; padding: 12px 20px 8px; min-width: 0; }
.aside .aside-company-avatar { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex: 0 0 24px; border-radius: 8px; background: var(--holo-accent); color: var(--holo-signal-dark); font-size: 9px; font-weight: 700; letter-spacing: 0; }
.aside .aside-company-text { display: flex; flex-direction: column; min-width: 0; }
.aside .aside-company-name { display: block; font-size: 14px; font-weight: 600; line-height: 1.15; color: var(--holo-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aside .aside-company-sub { display: block; font-size: 11px; color: var(--holo-ink-50); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-kt-aside-minimize=on] .aside .aside-company { padding: 12px 16px 8px; justify-content: center; }
[data-kt-aside-minimize=on] .aside .aside-company-text { display: none; }
.aside-menu { height: calc(100vh - var(--holo-header-height) - 52px) !important; }

/* --------------------------------------------------------------------------
   The identity block of the top bar — identical to the app's header: the dark
   "Exit impersonation" button, the pill with a status dot, the small
   marketspace badge inside it (templates/admin/sidebar/left/_identity.html.twig)
   -------------------------------------------------------------------------- */
/* The Hola mark (templates/admin/ai/_hola_mark.html.twig): a speech bubble with a spark, the one
   logo of the AI chat — dark on light ground ('ink'), white on a dark disc ('light'). */
.hola-mark { display: block; flex: 0 0 auto; }
.hola-mark-ink .hola-mark-bubble { fill: var(--holo-ink); }
.hola-mark-ink .hola-mark-spark { fill: var(--holo-accent); }
.hola-mark-ink .hola-mark-spark-small { fill: #ffffff; }
.hola-mark-light .hola-mark-bubble { fill: #ffffff; }
.hola-mark-light .hola-mark-spark { fill: var(--holo-signal-dark); }
.hola-mark-light .hola-mark-spark-small { fill: var(--holo-accent); }

.holo-identity { display: flex; align-items: center; gap: 8px; margin-right: 12px; min-width: 0; }
/* The block is centred on the top-bar row itself (between the search box and Hola) and stays
   put whatever Hola's bubble or the right-hand controls measure; it yields to them on narrow
   rows by shrinking its label, never by moving. */
.header .holo-topbar-row { position: relative; }
.header .holo-identity-slot { position: absolute; left: 50%; top: 0; bottom: 0; transform: translateX(-50%); max-width: 46%; z-index: 1; }
.header .holo-identity-slot .holo-identity { margin-right: 0; }
.holo-identity-exit {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; flex: 0 0 auto;
  border-radius: var(--holo-radius); background: var(--holo-ink); color: var(--holo-on-ink) !important;
  font-size: 12px; font-weight: 500; line-height: 1; text-decoration: none !important; white-space: nowrap;
  transition: background-color 0.15s ease;
}
.holo-identity-exit:hover { background: var(--holo-ink-90); color: var(--holo-on-ink) !important; }
.holo-identity-exit svg { width: 14px; height: 14px; flex: 0 0 14px; }
.holo-identity-pill {
  display: inline-flex; align-items: center; gap: 8px; height: 32px; max-width: 300px; padding: 0 12px; min-width: 0;
  border: 1px solid var(--holo-ink-8); border-radius: var(--holo-radius); background: var(--holo-surface);
  font-size: 12px; font-weight: 500; line-height: 1; color: var(--holo-ink); white-space: nowrap;
}
.holo-identity-pill.is-away { border-color: var(--holo-accent); background: var(--holo-accent-30); color: var(--holo-signal-dark); }
.holo-identity-dot { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 9999px; background: var(--holo-signal-green); }
.holo-identity-pill.is-away .holo-identity-dot { background: var(--holo-signal-dark); }
.holo-identity-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.holo-identity-badge { flex: 0 0 auto; border-radius: 4px; background: var(--holo-ink-4); padding: 3px 6px; font-size: 10px; font-weight: 400; color: var(--holo-ink-50); }
@media (max-width: 991.98px) { .holo-identity-pill { display: none; } }

/* --------------------------------------------------------------------------
   Tables — identical to the app's DataTable (mi/src/components/data-table):
   edge to edge inside the content area, no card chrome around the list,
   one 1px ink-8 line under every cell and between columns, 11px uppercase
   ink-30 headers (12px 20px), 13px cells (14px 20px), hover tint, and a
   compact 11px pager strip. The toolbar above the rows is the card header.
   -------------------------------------------------------------------------- */
.table { border-collapse: collapse !important; width: 100%; }
.table > :not(caption) > * > * { border-bottom: 1px solid var(--holo-ink-8) !important; }
.table > :not(caption) > * > *:not(:last-child) { border-right: 1px solid var(--holo-ink-8) !important; }
.table > tbody > tr:last-child > * { border-bottom-color: var(--holo-ink-8) !important; }
.table > tbody > tr > td { padding: 14px 20px !important; }
.table > thead > tr > th, .table thead th { padding: 12px 20px !important; vertical-align: middle; background: var(--holo-surface) !important; }
.table.table-row-dashed > :not(caption) > * > *, .table.table-row-bordered > :not(caption) > * > *, .table.table-row-gray-300 > :not(caption) > * > * { border-bottom: 1px solid var(--holo-ink-8) !important; }
.table.gy-5 > :not(caption) > * > *, .table.gy-4 > :not(caption) > * > *, .table.gy-3 > :not(caption) > * > *, .table.gs-0 > :not(caption) > * > * { padding: 14px 20px !important; }
.table.gy-5 > thead > tr > th, .table.gy-4 > thead > tr > th, .table.gy-3 > thead > tr > th, .table.gs-0 > thead > tr > th { padding: 12px 20px !important; }
.table-responsive { border: 0; }
/* the list card: no border or radius, its header is the toolbar, its body is the rows */
.container-fluid > .card:has(.table), .container-xxl > .card:has(.table), .content > .container-fluid > .card:has(.table), .card.card-flush:has(.table) {
  border: 0 !important; border-radius: 0 !important; margin-left: -24px; margin-right: -24px; background: var(--holo-surface);
}
.container-fluid > .card:has(.table) > .card-header, .container-xxl > .card:has(.table) > .card-header, .card.card-flush:has(.table) > .card-header {
  min-height: 56px !important; padding: 8px 24px !important; border-bottom: 1px solid var(--holo-ink-8) !important;
}
.container-fluid > .card:has(.table) > .card-body, .container-xxl > .card:has(.table) > .card-body, .card.card-flush:has(.table) > .card-body { padding: 0 !important; }
.container-fluid > .card:has(.table) > .card-body > .table-responsive, .container-xxl > .card:has(.table) > .card-body > .table-responsive { margin: 0; }
.container-fluid > .card:has(.table) > .card-footer, .container-xxl > .card:has(.table) > .card-footer { padding: 10px 24px !important; }
.card .card-header .card-title .form-control, .card .card-header .card-toolbar .form-control, .card .card-header .form-select { min-height: 32px; font-size: 12px !important; }
/* the rows' pager strip, like the app's Pagination: 11px, small bordered arrows */
.dataTables_wrapper > .row:last-child, .dataTables_wrapper .dataTables_paginate { margin: 0 !important; }
.dataTables_wrapper > .row:last-child { align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--holo-ink-8); }
.dataTables_wrapper > .row:last-child > div { padding: 0; }
.dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_length label { font-size: 11px !important; color: var(--holo-ink-30) !important; padding: 0; }
.dataTables_wrapper .dataTables_length select { min-height: 26px !important; padding: 0.2rem 1.6rem 0.2rem 0.5rem !important; font-size: 11px !important; }
.dataTables_wrapper .dataTables_paginate .pagination { margin: 0; gap: 2px; }
.pagination .page-item .page-link { min-width: 24px !important; height: 24px !important; line-height: 22px !important; padding: 0 6px !important; font-size: 11px !important; border-radius: var(--holo-radius-sm) !important; }
.pagination .page-item .page-link .previous, .pagination .page-item .page-link .next { font-size: 11px; }
/* The DataTables "processing" notice, on every list that reloads its rows (explorer pages and the
   plain lists alike): a fixed layer over the content area, above the sidebar (z 98) and the header
   (z 97), never inside a scrolling or clipped container — the page behind it only slightly blurred,
   the notice itself (spinner + text, what the list's script passes as language.processing) as a
   small card in the middle of the area. DataTables shows and hides the layer with an inline
   display, so nothing here touches `display`. */
.dataTables_wrapper .dataTables_processing, div.dataTables_processing {
  position: fixed !important; top: var(--holo-header-height) !important; right: 0 !important; bottom: 0 !important; left: 0 !important;
  width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; transform: none !important;
  text-align: center; font-size: 13px; color: var(--holo-ink-70);
  background: color-mix(in srgb, var(--holo-surface) 35%, transparent) !important; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  border: 0 !important; box-shadow: none !important; z-index: 1060 !important;
}
/* the notice card (our markup: a .d-flex row of spinner and text) */
.dataTables_wrapper .dataTables_processing > div.d-flex, div.dataTables_processing > div.d-flex {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: auto; height: auto; margin: 0; padding: 14px 20px !important;
  background: var(--holo-surface); border: 1px solid var(--holo-ink-8); border-radius: 10px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.10); white-space: nowrap;
}
.dataTables_processing > div.d-flex .spinner-border { width: 18px; height: 18px; border-width: 2px; color: var(--holo-signal-green) !important; }
/* DataTables' own four-dot loader (a page that passes no markup): centred, its size kept */
div.dataTables_processing > div:last-child:not(.d-flex) { position: absolute; top: 50%; left: 50%; margin: 0; transform: translate(-50%, -50%); }
.aside-fixed .dataTables_wrapper .dataTables_processing, .aside-fixed div.dataTables_processing { left: var(--holo-aside-width) !important; }
.aside-fixed[data-kt-aside-minimize=on] .dataTables_wrapper .dataTables_processing, .aside-fixed[data-kt-aside-minimize=on] div.dataTables_processing { left: var(--holo-aside-width-min) !important; }
/* the rows of a list always sit on white */
.table > tbody > tr > td, .table > tbody > tr > th { background-color: var(--holo-surface); }
.table > tbody > tr:hover > td, .table > tbody > tr:hover > th { background-color: var(--holo-ink-4) !important; }
.table > tbody > tr.variant-row > td, .table > tbody > tr.parent-expanded + tr > td { background-color: var(--holo-surface); }

/* --------------------------------------------------------------------------
   The marketspace switch under the company block — the same control in every
   application: a quiet 12px button with a dot, the marketspace name and its
   country count, opening a dropdown of the company's marketspaces
   -------------------------------------------------------------------------- */
.aside .aside-marketspace { position: relative; padding: 0 20px 10px; }
.aside .aside-marketspace-toggle {
  display: flex; align-items: center; gap: 6px; width: 100%; height: 28px; padding: 0 8px;
  border: 1px solid var(--holo-ink-8); border-radius: var(--holo-radius-sm); background: var(--holo-surface);
  font-size: 12px; font-weight: 500; color: var(--holo-ink); text-align: left; cursor: pointer;
  transition: background-color 0.15s ease;
}
.aside .aside-marketspace-toggle:hover { background: var(--holo-ink-4); }
.aside .aside-marketspace-dot { width: 6px; height: 6px; flex: 0 0 6px; border-radius: 9999px; background: var(--holo-signal-green); }
.aside .aside-marketspace-name { min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aside .aside-marketspace-count, .aside-marketspace-menu .aside-marketspace-count { flex: 0 0 auto; border-radius: 4px; background: var(--holo-ink-4); padding: 1px 5px; font-size: 10px; color: var(--holo-ink-50); }
.aside .aside-marketspace-chevron { width: 12px; height: 12px; flex: 0 0 12px; color: var(--holo-ink-30); }
.aside-marketspace-menu .aside-marketspace-heading { font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--holo-ink-30); }
.aside-marketspace-menu .menu-item .menu-link { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.aside-marketspace-menu .menu-item .menu-link .menu-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aside-marketspace-menu .aside-marketspace-default { margin-left: 4px; font-size: 10px; color: var(--holo-ink-30); }
[data-kt-aside-minimize=on] .aside .aside-marketspace { display: none; }
.aside-menu { height: calc(100vh - var(--holo-header-height) - 90px) !important; }
/* a company without a marketspace yet: the control stays, leading to where one is created */
.aside .aside-marketspace-toggle.is-empty { text-decoration: none !important; color: var(--holo-ink-50); }
.aside .aside-marketspace-toggle.is-empty .aside-marketspace-dot { background: var(--holo-ink-20); }
.aside .aside-marketspace-toggle.is-empty:hover { color: var(--holo-ink); }

/* --------------------------------------------------------------------------
   Lists, second pass against the app's explorer (mi /intelligence/markets):
   ink cell text, a line under the last row too, a 56px title bar, 32px
   toolbar controls, and the app's compact pager (page / total, arrows)
   -------------------------------------------------------------------------- */
/* cell text is ink; only what is explicitly muted stays grey */
.table > tbody > tr > td, .table > tbody.text-gray-600 > tr > td, .table > tbody.fw-semibold > tr > td { color: var(--holo-ink) !important; font-weight: 400 !important; }
.table > tbody > tr > td .text-muted, .table > tbody > tr > td .text-gray-500, .table > tbody > tr > td .text-gray-400, .table > tbody > tr > td small { color: var(--holo-ink-50) !important; }
.table > tbody > tr > td a:not(.btn):not(.badge) { color: var(--holo-ink) !important; font-weight: 500 !important; }
/* every row keeps its line, the last one included (Metronic drops it on dashed tables) */
.table > tbody > tr:last-child > td, .table > tbody > tr:last-child > th, .table.table-row-dashed > tbody > tr:last-child > td { border-bottom: 1px solid var(--holo-ink-8) !important; }
/* the page title bar: 56px, 15px semibold title, 12px breadcrumb, no extra band */
.toolbar { min-height: 56px !important; padding: 8px 0 !important; }
.toolbar .page-title, .toolbar .d-flex.flex-column { gap: 2px; }
.toolbar h1, .toolbar .page-title h1, .toolbar .text-gray-900 { font-size: 15px !important; font-weight: 600 !important; margin: 0 !important; line-height: 1.3 !important; }
.toolbar .breadcrumb, .toolbar .breadcrumb .breadcrumb-item, .toolbar .breadcrumb a { font-size: 12px !important; color: var(--holo-ink-50) !important; margin: 0; }
.toolbar .breadcrumb .breadcrumb-item a { color: var(--holo-signal-dark) !important; }
.toolbar + .container-fluid, .toolbar + .post { padding-top: 0 !important; }
/* the toolbar row above the rows: 32px controls, like the app's Filters / Sort / Search / Columns */
.card > .card-header .form-control, .card > .card-header .form-select, .card > .card-header .btn:not(.btn-icon), .card > .card-header .select2-container--bootstrap5 .select2-selection {
  height: 32px !important; min-height: 32px !important; padding-top: 0 !important; padding-bottom: 0 !important; font-size: 12px !important; line-height: 30px !important;
}
.card > .card-header .btn:not(.btn-icon) { padding-left: 12px !important; padding-right: 12px !important; display: inline-flex; align-items: center; gap: 6px; }
.card > .card-header .form-control.w-250px { width: 240px !important; }
.card > .card-header .select2-container--bootstrap5 .select2-selection--single .select2-selection__rendered { line-height: 30px !important; padding-top: 0 !important; padding-bottom: 0 !important; }
.card > .card-header .card-title, .card > .card-header .card-toolbar { margin: 0 !important; gap: 8px; }
.card > .card-header .card-title > * + * { margin-left: 8px; }
/* the app's pager: prev / "page / total" / next on the left, the page-length select beside it, 11px text */
.dataTables_wrapper > .row:last-child { padding: 8px 12px; gap: 8px; }
.dataTables_wrapper .dataTables_paginate .pagination .page-item:not(.previous):not(.next):not(.active) { display: none; }
.dataTables_wrapper .dataTables_paginate .pagination .page-item.active .page-link { background: transparent !important; border-color: transparent !important; color: var(--holo-ink) !important; font-size: 11px !important; font-weight: 500 !important; min-width: 0 !important; padding: 0 6px !important; }
.dataTables_wrapper .dataTables_paginate .pagination .page-item.active .page-link::after { content: " / " attr(data-dt-pages); }
.dataTables_wrapper .dataTables_paginate .pagination .page-item.previous .page-link, .dataTables_wrapper .dataTables_paginate .pagination .page-item.next .page-link { width: 24px !important; min-width: 24px !important; height: 24px !important; padding: 0 !important; display: inline-flex; align-items: center; justify-content: center; color: var(--holo-ink-30) !important; }
.dataTables_wrapper .dataTables_paginate .pagination .page-item.previous .page-link:hover, .dataTables_wrapper .dataTables_paginate .pagination .page-item.next .page-link:hover { color: var(--holo-ink) !important; background: var(--holo-ink-4) !important; }
.dataTables_wrapper .dataTables_paginate .pagination .page-item.disabled .page-link { opacity: 0.3; }
.dataTables_wrapper .dataTables_length { display: inline-flex; align-items: center; }
.dataTables_wrapper .dataTables_length select.form-select { width: auto !important; min-width: 56px; }
/* the checkbox column, like the app's sticky checkbox cell */
.table > thead > tr > th:has(> .form-check), .table > tbody > tr > td:has(> .form-check), .table th.w-10px, .table td.w-10px { width: 44px !important; padding: 12px 12px !important; }
.table .form-check .form-check-input { width: 14px !important; height: 14px !important; border-radius: 3px; }
/* the pager strip reads left to right like the app's: arrows, page / pages, "1 - 10 of 97", then the page length */
.dataTables_wrapper > .row:last-child { display: flex !important; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 12px; margin: 0 !important; }
.dataTables_wrapper > .row:last-child > [class*="col"] { flex: 0 0 auto !important; width: auto !important; max-width: none !important; padding: 0 !important; display: inline-flex; align-items: center; gap: 12px; }
.dataTables_wrapper > .row:last-child > [class*="col"]:last-child { order: -1; }
.dataTables_wrapper .dataTables_info { padding: 0 !important; margin: 0; }
.dataTables_wrapper .dataTables_length label { margin: 0; display: inline-flex; align-items: center; gap: 6px; }
.dataTables_wrapper .dataTables_paginate .pagination { margin: 0 !important; align-items: center; }
.toolbar { padding: 6px 0 !important; }

/* --------------------------------------------------------------------------
   Full-page lists: Metronic centres admin content in a 1320px container, so
   on a wide screen a list floats in white space. The admin uses the whole
   width like the app, and a list is framed on its left and right edges too.
   -------------------------------------------------------------------------- */
.content .container-xxl, .content .container-xl, .content .container-lg, .content .container-md, .content .container,
.toolbar .container-xxl, .toolbar .container-xl, .toolbar .container-lg, .toolbar .container-md, .toolbar .container,
.post .container-xxl, .post .container-xl, .app-content .container-xxl, .app-content .container-xl {
  max-width: 100% !important; width: 100% !important; padding-left: 24px !important; padding-right: 24px !important; margin-left: 0 !important; margin-right: 0 !important;
}
.table > :not(caption) > * > *:first-child { border-left: 1px solid var(--holo-ink-8) !important; }
.table > :not(caption) > * > *:last-child { border-right: 1px solid var(--holo-ink-8) !important; }
/* flush against the sidebar, the list's left edge shares the sidebar's line instead of doubling it */
.container-fluid > .card:has(.table), .container-xxl > .card:has(.table), .content > .container-fluid > .card:has(.table), .card.card-flush:has(.table) { margin-left: -25px; }

/* --------------------------------------------------------------------------
   Two-pane pages (a 300px tree or list column beside the detail, e.g. the
   shop's categories), like the app's explorer: the column sits flush against
   the sidebar with one line to its right, nothing is rounded, the tree reads
   like the app's secondary navigation, and the detail pane is square.
   -------------------------------------------------------------------------- */
.post > .container-xxl.d-flex.flex-lg-row, .content > .container-xxl.d-flex.flex-lg-row, .post > .container-fluid.d-flex.flex-lg-row { padding: 0 !important; gap: 0 !important; }
.post > .container-xxl.d-flex.flex-lg-row > .w-lg-300px, .content > .container-xxl.d-flex.flex-lg-row > .w-lg-300px, .post > .container-fluid.d-flex.flex-lg-row > .w-lg-300px {
  width: 300px !important; flex: 0 0 300px !important; margin: 0 !important; border-right: 1px solid var(--holo-ink-8); min-height: calc(100vh - var(--holo-header-height) - 56px); background: var(--holo-surface);
}
.post > .container-xxl.d-flex.flex-lg-row > .w-lg-300px > .card, .content > .container-xxl.d-flex.flex-lg-row > .w-lg-300px > .card, .post > .container-fluid.d-flex.flex-lg-row > .w-lg-300px > .card { border: 0 !important; border-radius: 0 !important; background: transparent; }
.post > .container-xxl.d-flex.flex-lg-row > .w-lg-300px > .card > .card-header { min-height: 56px !important; padding: 0 20px !important; border-bottom: 1px solid var(--holo-ink-8) !important; }
.post > .container-xxl.d-flex.flex-lg-row > .w-lg-300px > .card > .card-header .card-title, .post > .container-xxl.d-flex.flex-lg-row > .w-lg-300px > .card > .card-header h2, .post > .container-xxl.d-flex.flex-lg-row > .w-lg-300px > .card > .card-header h3 { font-size: 15px !important; font-weight: 600 !important; }
.post > .container-xxl.d-flex.flex-lg-row > .w-lg-300px > .card > .card-body { padding: 8px 12px !important; }
.post > .container-xxl.d-flex.flex-lg-row > .flex-lg-row-fluid, .post > .container-xxl.d-flex.flex-lg-row > .flex-row-fluid { gap: 0 !important; min-width: 0; }
.post > .container-xxl.d-flex.flex-lg-row > .flex-lg-row-fluid > .card, .post > .container-xxl.d-flex.flex-lg-row > .flex-row-fluid > .card { border: 0 !important; border-radius: 0 !important; margin: 0 !important; }
.post > .container-xxl.d-flex.flex-lg-row > .flex-lg-row-fluid > .card.h-50 { height: auto !important; min-height: 320px; padding: 48px 24px !important; }
.post > .container-xxl.d-flex.flex-lg-row > .flex-lg-row-fluid > .card .card-header { padding: 0 24px !important; min-height: 56px !important; }
.post > .container-xxl.d-flex.flex-lg-row > .flex-lg-row-fluid > .card .card-body { padding: 24px !important; }
/* the tree: the app's secondary nav items — 13px ink rows, hover tint, lime when current, no connector lines */
.jstree-default .jstree-node, .jstree-default .jstree-children, .jstree-default > .jstree-container-ul > .jstree-node { background-image: none !important; margin-left: 16px; }
.jstree-default > .jstree-container-ul > .jstree-node { margin-left: 0; }
.jstree-default .jstree-node { min-height: 0; line-height: 28px; }
.jstree-default .jstree-anchor { display: inline-flex !important; align-items: center; gap: 6px; height: 28px !important; line-height: 28px !important; padding: 0 8px !important; border-radius: var(--holo-radius-sm); font-size: 13px !important; font-weight: 500; color: var(--holo-ink) !important; transition: background-color 0.15s ease; }
.jstree-default .jstree-anchor:hover, .jstree-default .jstree-hovered { background: var(--holo-ink-4) !important; box-shadow: none !important; }
.jstree-default .jstree-clicked { background: var(--holo-accent-15) !important; color: var(--holo-signal-dark) !important; box-shadow: none !important; }
.jstree-default .jstree-icon, .jstree-default .jstree-anchor > .jstree-icon { font-size: 14px !important; color: var(--holo-ink-50) !important; line-height: 28px; }
.jstree-default .jstree-clicked > .jstree-icon { color: var(--holo-signal-dark) !important; }
.jstree-default .jstree-ocl { background-image: none !important; width: 16px; height: 28px; line-height: 28px; color: var(--holo-ink-30); font-size: 10px; }
.jstree-default .jstree-closed > .jstree-ocl::before { content: "▸"; }
.jstree-default .jstree-open > .jstree-ocl::before { content: "▾"; }
.jstree-default .jstree-leaf > .jstree-ocl::before { content: ""; }

/* --------------------------------------------------------------------------
   A page's top-level card is the page itself, like the app's explorer: edge
   to edge, square, one line below; its header is the toolbar row. Cards in
   columns and rows (form sections, tiles) keep their frame but lose the
   rounding; the payments rows take the app's 8px input corners.
   -------------------------------------------------------------------------- */
.post > .container-xxl > .card, .post > .container-fluid > .card, .content > .container-xxl > .card, .content > .container-fluid > .card,
.post > .container-xxl > form > .card, .post > .container-fluid > form > .card, .content > .container-xxl > form > .card, .content > .container-fluid > form > .card {
  border: 0 !important; border-bottom: 1px solid var(--holo-ink-8) !important; border-radius: 0 !important; margin-left: -25px; margin-right: -24px; box-shadow: none !important;
}
.post > .container-xxl > .card > .card-header, .post > .container-fluid > .card > .card-header, .content > .container-xxl > .card > .card-header, .content > .container-fluid > .card > .card-header,
.post > .container-xxl > form > .card > .card-header, .post > .container-fluid > form > .card > .card-header, .content > .container-xxl > form > .card > .card-header, .content > .container-fluid > form > .card > .card-header {
  min-height: 56px !important; padding: 8px 24px !important; border-radius: 0 !important;
}
.post > .container-xxl > .card > .card-body, .post > .container-fluid > .card > .card-body, .content > .container-xxl > .card > .card-body, .content > .container-fluid > .card > .card-body,
.post > .container-xxl > form > .card > .card-body, .post > .container-fluid > form > .card > .card-body, .content > .container-xxl > form > .card > .card-body, .content > .container-fluid > form > .card > .card-body { padding: 24px !important; }
.post > .container-xxl > .card .accordion .accordion-item, .post > .container-fluid > .card .accordion .accordion-item, .content > .container-fluid > .card .accordion .accordion-item, .content > .container-xxl > .card .accordion .accordion-item {
  border-left: 0 !important; border-right: 0 !important; border-radius: 0 !important; margin: 0 -24px !important;
}
.post > .container-xxl > .card .accordion .accordion-button, .post > .container-fluid > .card .accordion .accordion-button, .content > .container-fluid > .card .accordion .accordion-button { padding: 12px 24px !important; border-radius: 0 !important; }
.post > .container-xxl > .card .accordion .accordion-body, .post > .container-fluid > .card .accordion .accordion-body, .content > .container-fluid > .card .accordion .accordion-body { padding: 0 !important; }
.card .card-header, .card .card-footer { border-radius: 0 !important; }
.post .row > [class*="col"] > .card, .content .row > [class*="col"] > .card, .post .d-flex > [class*="col"] > .card { border-radius: 0 !important; box-shadow: none !important; }
.card .rounded-pill.p-3 { border-radius: var(--holo-radius) !important; border: 1px solid var(--holo-ink-8) !important; padding: 10px 12px !important; margin: 8px 0 !important; max-width: 560px; }
.card .rounded-pill.p-3 .fw-bold, .card .rounded-pill.p-3 .fs-5 { font-size: 13px !important; font-weight: 500 !important; }
.jstree-default > .jstree-container-ul > .jstree-node, .jstree-default .jstree-container-ul > .jstree-node { margin-left: 0 !important; }
.jstree-default .jstree-node { margin-left: 16px !important; }

/* tooltips: a small ink bubble with white 11px text and a matching arrow (Metronic kept its own text colour on the ink ground) */
.tooltip { --bs-tooltip-bg: var(--holo-ink); --bs-tooltip-color: var(--holo-surface); --bs-tooltip-opacity: 1; --bs-tooltip-font-size: 11px; --bs-tooltip-padding-x: 8px; --bs-tooltip-padding-y: 4px; --bs-tooltip-border-radius: var(--holo-radius-sm); }
.tooltip .tooltip-inner { background: var(--holo-ink) !important; color: var(--holo-on-ink) !important; font-size: 11px !important; font-weight: 500; line-height: 1.4; padding: 4px 8px !important; border-radius: var(--holo-radius-sm) !important; box-shadow: none !important; }
.tooltip.bs-tooltip-top .tooltip-arrow::before, .tooltip.bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before { border-top-color: var(--holo-ink) !important; }
.tooltip.bs-tooltip-bottom .tooltip-arrow::before, .tooltip.bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before { border-bottom-color: var(--holo-ink) !important; }
.tooltip.bs-tooltip-start .tooltip-arrow::before, .tooltip.bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow::before { border-left-color: var(--holo-ink) !important; }
.tooltip.bs-tooltip-end .tooltip-arrow::before, .tooltip.bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow::before { border-right-color: var(--holo-ink) !important; }
/* a list's rows start right under the toolbar row: no body padding, no table margins (the page-card rule above gave the body 24px back) */
.post > .container-xxl > .card:has(.table) > .card-body, .post > .container-fluid > .card:has(.table) > .card-body, .content > .container-xxl > .card:has(.table) > .card-body, .content > .container-fluid > .card:has(.table) > .card-body,
.post > .container-xxl > form > .card:has(.table) > .card-body, .content > .container-fluid > form > .card:has(.table) > .card-body { padding: 0 !important; }
.dataTables_wrapper table.dataTable, .card > .card-body > .table, .card > .card-body > .table-responsive > .table { margin-top: 0 !important; margin-bottom: 0 !important; }
.dataTables_wrapper > .row:first-child:empty, .dataTables_wrapper > .row:first-child:not(:has(.dataTables_length, .dataTables_filter, .dataTables_info, .dataTables_paginate)) { display: none; }
.dataTables_wrapper > .row:first-child { margin: 0 !important; }

/* a filter row above a list (the shop's coupons): one line of 32px controls with 11px labels, padded like the toolbar row */
.card > .card-body.holo-list-filters { padding: 8px 24px 12px !important; border-bottom: 1px solid var(--holo-ink-8) !important; overflow-x: auto; }
.holo-list-filters .row { margin: 0 !important; gap: 12px; align-items: flex-end; }
.holo-list-filters .row > [class*="col"] { padding: 0 !important; flex: 0 0 auto; }
.holo-list-filters .form-label { font-size: 11px !important; font-weight: 600 !important; letter-spacing: 0.05em; text-transform: uppercase; color: var(--holo-ink-30) !important; margin-bottom: 4px !important; white-space: nowrap; }
.holo-list-filters .form-control, .holo-list-filters .form-select, .holo-list-filters .select2-container--bootstrap5 .select2-selection { height: 32px !important; min-height: 32px !important; padding-top: 0 !important; padding-bottom: 0 !important; font-size: 12px !important; line-height: 30px !important; }
.holo-list-filters .select2-container--bootstrap5 .select2-selection--single .select2-selection__rendered { line-height: 30px !important; padding-top: 0 !important; padding-bottom: 0 !important; font-size: 12px !important; }
.holo-list-filters .select2-container { width: 100% !important; }
.holo-list-filters .btn.btn-sm { height: 32px !important; padding: 0 12px !important; display: inline-flex; align-items: center; }
.holo-list-filters .w-90px { width: 90px !important; } .holo-list-filters .w-110px { width: 110px !important; } .holo-list-filters .w-130px { width: 130px !important; } .holo-list-filters .w-140px { width: 140px !important; } .holo-list-filters .w-150px { width: 150px !important; } .holo-list-filters .w-170px { width: 170px !important; }
.post > .container-xxl > .card > .card-body.holo-list-filters, .post > .container-fluid > .card > .card-body.holo-list-filters, .content > .container-xxl > .card > .card-body.holo-list-filters, .content > .container-fluid > .card > .card-body.holo-list-filters,
.post > .container-xxl > .card:has(.table) > .card-body.holo-list-filters, .content > .container-fluid > .card:has(.table) > .card-body.holo-list-filters { padding: 8px 24px 12px !important; }

/* --------------------------------------------------------------------------
   Explorer pages — identical to the app's explorer (mi /intelligence/markets,
   mi/src/app/intelligence/markets/page.tsx): a 300px secondary sidebar (56px
   module header, nav items, collapsible filter sections), a 56px title bar
   with the count and the actions, a toolbar row (Filters / Sort / chips /
   Search / Columns) and the rows edge to edge below. Markup comes from
   templates/admin/includes/explorer/_page.html.twig; behaviour from
   public/preCompiledAssets/admin/js/holo-mi-explorer.js.
   -------------------------------------------------------------------------- */
.holo-explorer { display: flex; height: calc(100vh - var(--holo-header-height)); overflow: hidden; background: var(--holo-surface); font-family: var(--holo-font); color: var(--holo-ink); }
.holo-explorer svg { flex: 0 0 auto; }
/* secondary sidebar */
.holo-explorer-side { width: 300px; flex: 0 0 300px; border-right: 1px solid var(--holo-ink-8); overflow-y: auto; scrollbar-width: none; background: var(--holo-surface); }
.holo-explorer-side::-webkit-scrollbar { display: none; }
.holo-explorer[data-filters-hidden] .holo-explorer-side { display: none; }
.holo-explorer-side-head { position: relative; display: flex; align-items: center; justify-content: space-between; height: 56px; padding: 0 16px; border-bottom: 1px solid var(--holo-ink-8); }
.holo-explorer-side-title { font-size: 14px; font-weight: 600; color: var(--holo-ink); background: none; border: 0; padding: 0; cursor: pointer; }
.holo-explorer-side-icons { display: flex; align-items: center; gap: 6px; }
.holo-explorer-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: 0; border-radius: 4px; padding: 0; background: none; color: var(--holo-ink-30); cursor: pointer; transition: color 0.15s ease; }
.holo-explorer-iconbtn:hover { color: var(--holo-ink); }
.holo-explorer-iconbtn svg, .holo-explorer-section-toggle .chev, .holo-explorer-columns-btn .chev { transition: transform 0.15s ease; }
.holo-explorer-modules { display: none; position: absolute; left: 16px; right: 16px; top: 100%; z-index: 50; margin-top: 4px; border: 1px solid var(--holo-ink-8); border-radius: var(--holo-radius-lg); background: var(--holo-surface); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); overflow: hidden; }
.holo-explorer-modules.is-open { display: block; }
.holo-explorer-modules a { display: flex; align-items: center; padding: 10px 16px; font-size: 13px; color: var(--holo-ink); text-decoration: none !important; transition: background-color 0.15s ease; }
.holo-explorer-modules a + a { border-top: 1px solid var(--holo-ink-8); }
.holo-explorer-modules a:hover { background: var(--holo-ink-4); color: var(--holo-ink); }
.holo-explorer-modules a.is-current { font-weight: 500; color: var(--holo-signal-dark); }
.holo-explorer-nav { padding: 8px; border-bottom: 1px solid var(--holo-ink-8); }
.holo-explorer-nav a { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 12px; border-radius: var(--holo-radius); font-size: 13px; color: var(--holo-ink); text-decoration: none !important; transition: background-color 0.15s ease; }
.holo-explorer-nav a:hover { background: var(--holo-ink-4); color: var(--holo-ink); }
.holo-explorer-nav a.is-active { background: rgba(192, 251, 80, 0.10); font-weight: 500; color: var(--holo-signal-dark); }
.holo-explorer-nav a svg { width: 14px; height: 14px; color: var(--holo-ink-30); }
.holo-explorer-nav a.is-active svg { color: var(--holo-signal-dark); }
.holo-explorer-count { margin-left: auto; font-size: 11px; color: var(--holo-ink-30); font-variant-numeric: tabular-nums; }
.holo-explorer-filters-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; }
.holo-explorer-filters-head.is-collapsed { border-bottom: 1px solid var(--holo-ink-8); }
.holo-explorer-filters-head > div { display: flex; align-items: center; gap: 6px; }
.holo-explorer-filters-title { font-size: 13px; font-weight: 600; color: var(--holo-ink); background: none; border: 0; padding: 0; cursor: pointer; }
.holo-explorer-badge { border-radius: 9999px; background: var(--holo-accent-15); padding: 2px 8px; font-size: 10px; font-weight: 600; color: var(--holo-signal-dark); }
.holo-explorer-badge:empty { display: none; }
.holo-explorer-filters { padding: 16px; }
.holo-explorer-filters-head.is-collapsed + .holo-explorer-filters { display: none; }
.holo-explorer-clear { display: inline-block; margin-bottom: 12px; font-size: 12px; color: var(--holo-ink-50); background: none; border: 0; padding: 0; text-decoration: none !important; cursor: pointer; transition: color 0.15s ease; }
.holo-explorer-clear:hover { color: var(--holo-ink); }
.holo-explorer-section { border: 1px solid var(--holo-ink-8); border-radius: var(--holo-radius); margin-bottom: 8px; background: var(--holo-surface); }
.holo-explorer-section-toggle { display: flex; width: 100%; align-items: center; gap: 8px; padding: 10px 12px; text-align: left; background: none; border: 0; font-size: 13px; color: var(--holo-ink); cursor: pointer; }
.holo-explorer-section-toggle > svg.icon { width: 14px; height: 14px; color: var(--holo-ink-30); }
.holo-explorer-section-label { flex: 1; font-size: 13px; font-weight: 500; color: var(--holo-ink); }
.holo-explorer-section-toggle .chev { width: 12px; height: 12px; color: var(--holo-ink-30); }
.holo-explorer-section.is-open > .holo-explorer-section-toggle .chev { transform: rotate(180deg); }
.holo-explorer-section-body { display: none; padding: 0 12px 12px 30px; }
.holo-explorer-section.is-open > .holo-explorer-section-body { display: block; }
.holo-explorer-section-body > * + * { margin-top: 6px; }
.holo-explorer-check { display: flex; align-items: center; gap: 8px; width: 100%; padding: 4px 0; margin: 0; font-size: 12px; color: var(--holo-ink-70); background: none; border: 0; text-align: left; cursor: pointer; }
.holo-explorer-check .box { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; flex: 0 0 16px; border: 1px solid var(--holo-ink-12); border-radius: 4px; background: var(--holo-surface); transition: background-color 0.15s ease, border-color 0.15s ease; }
.holo-explorer-check .box svg { display: none; width: 10px; height: 10px; color: var(--holo-signal-dark); }
.holo-explorer-check.is-active .box { background: var(--holo-accent); border-color: var(--holo-accent); }
.holo-explorer-check.is-active .box svg { display: block; }
.holo-explorer-check .holo-explorer-count { margin-left: auto; }
.holo-explorer-check[hidden] { display: none; }
.holo-explorer-section .form-label { display: block; margin: 8px 0 4px; font-size: 11px !important; font-weight: 600 !important; letter-spacing: 0.05em; text-transform: uppercase; color: var(--holo-ink-30) !important; }
.holo-explorer-section .form-label:first-child { margin-top: 0; }
.holo-explorer-section .form-control, .holo-explorer-section .form-select, .holo-explorer-section .select2-container--bootstrap5 .select2-selection, .holo-explorer-section .tagify { height: 32px !important; min-height: 32px !important; padding: 0 8px !important; font-size: 12px !important; line-height: 30px !important; border: 1px solid var(--holo-ink-8) !important; border-radius: var(--holo-radius-sm) !important; background: var(--holo-surface) !important; color: var(--holo-ink); box-shadow: none !important; }
.holo-explorer-section .form-control:focus, .holo-explorer-section .form-select:focus { border-color: var(--holo-ink-30) !important; }
.holo-explorer-section .form-control::placeholder { color: var(--holo-ink-20); }
.holo-explorer-section .form-control.has-value, .holo-explorer-section .form-select.has-value { border-color: var(--holo-accent) !important; background: rgba(192, 251, 80, 0.05) !important; }
.holo-explorer-section .input-group { flex-wrap: nowrap; }
.holo-explorer-section .input-group > .form-control { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.holo-explorer-section .input-group-text { height: 32px; padding: 0 8px; font-size: 12px; color: var(--holo-ink-30); background: var(--holo-surface); border: 1px solid var(--holo-ink-8); border-left: 0; border-radius: 0 var(--holo-radius-sm) var(--holo-radius-sm) 0; }
.holo-explorer-section .input-group-text i { font-size: 11px; }
.holo-explorer-section .select2-container { width: 100% !important; }
.holo-explorer-section .select2-container--bootstrap5 .select2-selection--multiple { height: auto !important; min-height: 32px !important; padding: 2px 6px !important; line-height: 1.4 !important; }
.holo-explorer-section .select2-container--bootstrap5 .select2-selection--multiple .select2-selection__choice { margin: 2px 4px 2px 0; font-size: 11px; }
.holo-explorer-section .tagify { height: auto !important; min-height: 32px !important; line-height: 1.4 !important; padding: 2px 6px !important; }
.holo-explorer-range { display: flex; align-items: center; gap: 8px; }
.holo-explorer-range > * { flex: 1 1 0; min-width: 0; }
.holo-explorer-range > svg { flex: 0 0 12px; width: 12px; height: 12px; color: var(--holo-ink-30); }
.holo-explorer-range .input-group { width: auto; }
/* a date range stacks (From above To) so a full "dd.mm.yyyy hh:mm" fits the 300px sidebar; the arrow goes */
.holo-explorer-range.is-stacked { flex-direction: column; align-items: stretch; gap: 6px; }
.holo-explorer-range.is-stacked > * { flex: 0 0 auto; width: 100%; }
.holo-explorer-range.is-stacked > svg { display: none; }
.holo-explorer-range.is-stacked .input-group > .form-control { flex: 1 1 auto; min-width: 0; }
.holo-explorer-list-search { margin-bottom: 6px !important; }
.holo-explorer-scroll { max-height: 240px; overflow-y: auto; }
.holo-explorer-switch { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 0; font-size: 12px; color: var(--holo-ink-70); }
.holo-explorer-switch .form-check-input { width: 28px !important; height: 16px !important; margin: 0; }
.holo-explorer-form-foot { display: flex; align-items: center; gap: 12px; padding: 4px 0 0; }
/* main pane */
.holo-explorer-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.holo-explorer-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 56px; flex: 0 0 56px; padding: 0 24px; border-bottom: 1px solid var(--holo-ink-8); }
.holo-explorer-title h1 { margin: 0; font-size: 15px !important; font-weight: 600 !important; color: var(--holo-ink); line-height: 1.5; letter-spacing: normal; }
.holo-explorer-title-left { display: flex; align-items: center; gap: 8px; min-width: 0; }
.holo-explorer-dot { position: relative; display: inline-block; width: 8px; height: 8px; }
.holo-explorer-dot::before { content: ""; position: absolute; inset: 0; border-radius: 9999px; background: var(--holo-accent); opacity: 0.75; animation: holo-explorer-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; }
.holo-explorer-dot::after { content: ""; position: absolute; inset: 0; border-radius: 9999px; background: var(--holo-accent); }
@keyframes holo-explorer-ping { 75%, 100% { transform: scale(2); opacity: 0; } }
.holo-explorer-title-count { font-size: 13px; color: var(--holo-ink-30); font-variant-numeric: tabular-nums; }
.holo-explorer-actions { display: flex; align-items: center; gap: 8px; }
.holo-explorer-btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border: 1px solid var(--holo-ink-8); border-radius: var(--holo-radius); background: var(--holo-surface); font-size: 13px; font-weight: 500; line-height: 30px; color: var(--holo-ink); text-decoration: none !important; cursor: pointer; white-space: nowrap; transition: background-color 0.15s ease; }
.holo-explorer-btn:hover { background: var(--holo-ink-4); color: var(--holo-ink); }
.holo-explorer-btn svg { width: 14px; height: 14px; }
.holo-explorer-btn.is-muted { color: var(--holo-ink-50); font-weight: 400; padding: 0 12px; }
.holo-explorer-btn.is-muted:hover { color: var(--holo-ink-50); }
.holo-explorer-btn.is-primary { background: var(--holo-signal-dark); border-color: var(--holo-signal-dark); color: var(--holo-on-ink); font-weight: 600; }
.holo-explorer-btn.is-primary:hover { background: var(--holo-signal-forest); color: var(--holo-on-ink); }
.holo-explorer-btn.is-icon { width: 34px; padding: 0; justify-content: center; }
.holo-explorer-btn.is-icon i { font-size: 13px; color: var(--holo-ink-50); }
.holo-explorer-btn [data-selected-orders] { font-size: 11px; color: var(--holo-ink-50); }
.holo-explorer-btn.is-primary [data-selected-orders] { color: color-mix(in srgb, var(--holo-on-ink) 70%, transparent); }
.holo-explorer-btn .spinner-border { width: 12px; height: 12px; border-width: 2px; }
.holo-explorer-toolbar { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; padding: 8px 24px; border-bottom: 1px solid var(--holo-ink-8); }
.holo-explorer-chips { display: flex; align-items: center; gap: 8px; flex: 0 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
.holo-explorer-chips::-webkit-scrollbar { display: none; }
.holo-explorer-chips:empty { display: none; }
.holo-explorer-chip { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; border: 0; border-radius: 9999px; background: var(--holo-ink-4); padding: 4px 10px; font-size: 12px; font-weight: 500; line-height: 1.5; color: var(--holo-ink-50); white-space: nowrap; cursor: pointer; transition: background-color 0.15s ease; }
.holo-explorer-chip:hover { background: var(--holo-ink-8); }
.holo-explorer-chip.is-accent { background: var(--holo-accent-15); color: var(--holo-signal-dark); }
.holo-explorer-chip.is-accent:hover { background: rgba(192, 251, 80, 0.25); }
.holo-explorer-chip svg { width: 12px; height: 12px; }
.holo-explorer-chip-clear { flex: 0 0 auto; font-size: 12px; color: var(--holo-ink-30); background: none; border: 0; padding: 0; white-space: nowrap; cursor: pointer; }
.holo-explorer-chip-clear:hover { color: var(--holo-ink); }
.holo-explorer-toolbar-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.holo-explorer-search { position: relative; }
.holo-explorer-search > svg { position: absolute; left: 10px; top: 50%; width: 14px; height: 14px; transform: translateY(-50%); color: var(--holo-ink-30); pointer-events: none; }
.holo-explorer-search input { width: 212px; height: 34px; padding: 0 12px 0 32px; border: 1px solid var(--holo-ink-8); border-radius: var(--holo-radius); background: var(--holo-surface); font-size: 13px; color: var(--holo-ink); box-shadow: none; outline: 0; }
.holo-explorer-search input::placeholder { color: var(--holo-ink-30); }
.holo-explorer-search input:focus { border-color: var(--holo-accent); box-shadow: 0 0 0 1px var(--holo-accent); }
.holo-explorer-columns { position: relative; }
.holo-explorer-columns-btn { display: inline-flex; align-items: stretch; height: 34px; padding: 0; border: 1px solid var(--holo-ink-8); border-radius: var(--holo-radius); background: var(--holo-surface); font-size: 13px; overflow: hidden; cursor: pointer; transition: background-color 0.15s ease; }
.holo-explorer-columns-btn:hover { background: var(--holo-ink-4); }
.holo-explorer-columns-btn > span { display: inline-flex; align-items: center; }
.holo-explorer-columns-btn > span:first-child { padding: 0 12px; color: var(--holo-ink); }
.holo-explorer-columns-btn > span:last-child { gap: 4px; padding: 0 10px; border-left: 1px solid var(--holo-ink-8); color: var(--holo-ink-50); font-variant-numeric: tabular-nums; }
.holo-explorer-columns.is-open .holo-explorer-columns-btn .chev { transform: rotate(180deg); }
.holo-explorer-columns-menu { display: none; position: absolute; right: 0; top: 100%; z-index: 50; width: 256px; margin-top: 4px; padding: 8px; border: 1px solid var(--holo-ink-8); border-radius: var(--holo-radius-lg); background: var(--holo-surface); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); text-align: left; }
.holo-explorer-columns.is-open .holo-explorer-columns-menu { display: block; }
.holo-explorer-columns-menu p { margin: 0; padding: 8px 8px 6px; font-size: 10px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--holo-ink-30); }
.holo-explorer-columns-menu .holo-explorer-scroll { max-height: 256px; }
.holo-explorer-columns-menu .holo-explorer-check { padding: 6px 8px; border-radius: var(--holo-radius); font-size: 13px; color: var(--holo-ink-70); transition: background-color 0.15s ease; }
.holo-explorer-columns-menu .holo-explorer-check:hover { background: var(--holo-ink-4); }
/* the rows: the app's DataTable rules above apply; the list's left edge is the sidebar's line */
.holo-explorer-rows { flex: 1 1 auto; min-height: 0; overflow: auto; position: relative; }
.holo-explorer-rows .table > :not(caption) > * > *:first-child { border-left: 0 !important; }
.holo-explorer-rows .table > thead > tr > th { white-space: nowrap; font-size: 11px !important; font-weight: 600 !important; letter-spacing: 0.05em; line-height: 18px; text-transform: uppercase; color: var(--holo-ink-30) !important; }
.holo-explorer-rows .table > thead > tr > th:first-child, .holo-explorer-rows .table > tbody > tr > td:first-child { width: 1%; white-space: nowrap; padding: 12px 12px !important; }
.holo-explorer-rows .table > thead > tr > th:first-child .form-check { margin: 0; }
.holo-explorer-rows .dataTables_wrapper { min-width: 100%; }
.holo-explorer-rows .dataTables_wrapper > .row:last-child { padding: 8px 24px; }
.holo-explorer-rows .table-responsive { overflow: visible; }
.holo-explorer-empty { padding: 48px 24px; text-align: center; color: var(--holo-ink-30); font-size: 13px; }

/* --------------------------------------------------------------------------
   List cells shared by the explorer pages (products first) — the app's cells:
   the expand box next to the checkbox, the variant counter on an image, catalog
   pills, the overlapping platform circles, mono identifiers, tabular numbers,
   and the four small row actions.
   -------------------------------------------------------------------------- */
.holo-expand { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; padding: 0; border: 1px solid var(--holo-ink-12); border-radius: 4px; background: var(--holo-surface); color: var(--holo-ink-50); cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease; }
.holo-expand:hover { border-color: var(--holo-ink-30); color: var(--holo-ink); }
.holo-expand svg { width: 8px; height: 8px; transition: transform 0.15s ease; }
.holo-expand.is-open svg { transform: rotate(45deg); }
.holo-expand-cell { width: 1%; white-space: nowrap; padding-right: 0 !important; }
.holo-cell { display: flex; align-items: center; gap: 10px; min-width: 0; }
.holo-cell-title { font-size: 13px !important; font-weight: 600 !important; color: var(--holo-ink) !important; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the entity image: 32px like the app's entity cells (mi Markets), 28px for a company logo beside a name */
.holo-avatar-wrap { position: relative; flex: 0 0 32px; }
.holo-avatar { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: 0 0 32px; border-radius: 9999px; border: 1px solid var(--holo-ink-8); background: var(--holo-surface); object-fit: cover; font-size: 11px; font-weight: 700; color: var(--holo-ink-30); overflow: hidden; }
.holo-avatar.is-initials { background: var(--holo-ink-8); }
.holo-avatar.is-company { width: 28px; height: 28px; flex: 0 0 28px; font-size: 10px; }
.holo-variant-badge { position: absolute; top: -6px; right: -10px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9999px; background: var(--holo-accent-30); color: var(--holo-signal-dark); font-size: 10px; font-weight: 600; line-height: 18px; text-align: center; }
.holo-pill { display: inline-block; margin: 1px 4px 1px 0; padding: 2px 8px; border-radius: 9999px; background: var(--holo-ink-4); color: var(--holo-ink-50); font-size: 11px; font-weight: 500; line-height: 16px; white-space: nowrap; }
.holo-stack { display: inline-flex; align-items: center; }
.holo-stack-item { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 9999px; border: 2px solid var(--holo-surface); background: var(--holo-ink-4); overflow: hidden; margin-left: -6px; }
.holo-stack-item:first-child { margin-left: 0; }
.holo-stack-item img { width: 100%; height: 100%; object-fit: cover; }
.holo-stack-item.is-off { opacity: 0.45; }
.holo-stack-more { display: inline-flex; align-items: center; justify-content: center; height: 24px; min-width: 24px; padding: 0 6px; border-radius: 9999px; border: 2px solid var(--holo-surface); background: var(--holo-ink-4); margin-left: -6px; font-size: 10px; font-weight: 600; color: var(--holo-ink-50); }
.holo-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; }
.holo-num { font-variant-numeric: tabular-nums; }
.holo-row-actions { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
.holo-row-actions a, .holo-row-actions button { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--holo-ink-30) !important; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; }
.holo-row-actions a:hover, .holo-row-actions button:hover { background: var(--holo-ink-8); color: var(--holo-ink) !important; text-decoration: none !important; }
.holo-row-actions .is-danger:hover { color: var(--holo-negative) !important; }
.holo-row-actions svg { width: 14px; height: 14px; }
.holo-explorer-btn.is-danger { color: var(--holo-negative) !important; }
.holo-explorer-rows .table > tbody > tr.holo-variant-row > td { background: var(--holo-ink-2, #fafafa); }
.holo-explorer-rows .table > tbody > tr.holo-variant-row .holo-cell { padding-left: 26px; }

/* Settings: mi's /settings layout — a 224px bordered sidebar beside the page (SettingsSidebar.tsx) */
.holo-settings { display: flex; min-height: calc(100vh - 120px); }
.holo-settings-nav { width: 224px; flex-shrink: 0; padding: 16px 0; background: var(--holo-surface); border-left: 1px solid var(--holo-ink-8); border-right: 1px solid var(--holo-ink-8); }
.holo-settings-nav h2 { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0 20px 16px; font-size: 14px; font-weight: 600; color: var(--holo-ink); }
.holo-settings-nav .nav-link { display: block; padding: 6px 20px; border: 0; border-radius: 0; font-size: 13px; font-weight: 400 !important; color: var(--holo-ink-50); background: transparent; }
.holo-settings-nav .nav-link i { display: none; }
.holo-settings-nav .nav-link:hover { color: var(--holo-ink); background: var(--holo-ink-4); }
.holo-settings-nav .nav-link.active { color: var(--holo-signal-green); font-weight: 500 !important; background: transparent; }
.holo-settings-main { flex: 1; min-width: 0; padding: 24px 32px; }
.holo-settings-main > h1 { margin: 0 0 24px; font-size: 20px; font-weight: 700; color: var(--holo-ink); }
.holo-settings-main .tab-content > .tab-pane > .mt-10 { margin-top: 0 !important; }