/* =====================================================================================
   Legasum design system layer
   -------------------------------------------------------------------------------------
   Loaded AFTER the WowDash theme (style.css) and normalizes it into one consistent
   product language. The theme ships many ad hoc sizes (7 different button heights,
   3 input heights, every heading at 24px), so this file defines the tokens once and
   applies them to the shared Bootstrap/WowDash class names already used by every page.

   Scope: rules that change sizing are limited to `.lg-app` (the authenticated content
   area of the customer app, admin console and client portal) so auth, onboarding,
   public forms and the website builder keep their own deliberate layouts.

   Tokens
     Type:     page title 20 / section 16 / card title 15 / body 14 / secondary 13 / caption 12
     Spacing:  4 8 12 16 20 24 32 40 48 64 (theme utilities: p-4 ... p-64, gap-*, mb-*)
     Controls: 40px default, 36px small, 48px large; 8px radius
     Surfaces: 12px card radius, 1px hairline border, near-flat shadow
   ===================================================================================== */

:root {
  --lg-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --lg-fs-page-title: 1.25rem;   /* 20px */
  --lg-fs-section: 1rem;         /* 16px */
  --lg-fs-card-title: 0.9375rem; /* 15px */
  --lg-fs-body: 0.875rem;        /* 14px */
  --lg-fs-secondary: 0.8125rem;  /* 13px */
  --lg-fs-caption: 0.75rem;      /* 12px */

  --lg-control-h: 2.5rem;        /* 40px */
  --lg-control-h-sm: 2.25rem;    /* 36px */
  --lg-control-h-lg: 3rem;       /* 48px */
  --lg-radius-sm: 6px;
  --lg-radius: 8px;
  --lg-radius-lg: 12px;

  --lg-surface: #ffffff;
  --lg-surface-muted: #F9FAFB;
  --lg-table-head: #F4F5F8;
  --lg-page-bg: #F5F6FA;
  --lg-border: #E5E7EB;
  --lg-border-strong: #D1D5DB;
  --lg-text: #111827;
  --lg-text-secondary: #4B5563;
  --lg-text-muted: #6B7280;
  --lg-primary: #487FFF;
  --lg-primary-hover: #3A6EEB;
  --lg-primary-soft: #EEF4FF;
  --lg-focus-ring: 0 0 0 3px rgba(72, 127, 255, 0.18);

  --lg-shadow-card: 0 1px 2px rgba(16, 24, 40, 0.04);
  --lg-shadow-hover: 0 4px 12px rgba(16, 24, 40, 0.08);
  --lg-shadow-pop: 0 12px 32px rgba(16, 24, 40, 0.14);

  /* Semantic status tones: [fg, bg, border] */
  --lg-success-fg: #067647; --lg-success-bg: #ECFDF3; --lg-success-bd: #ABEFC6;
  --lg-warning-fg: #B54708; --lg-warning-bg: #FFFAEB; --lg-warning-bd: #FEDF89;
  --lg-danger-fg: #B42318;  --lg-danger-bg: #FEF3F2;  --lg-danger-bd: #FECDCA;
  --lg-info-fg: #175CD3;    --lg-info-bg: #EFF8FF;    --lg-info-bd: #B2DDFF;
  --lg-neutral-fg: #344054; --lg-neutral-bg: #F2F4F7; --lg-neutral-bd: #E4E7EC;
  --lg-violet-fg: #5925DC;  --lg-violet-bg: #F4F3FF;  --lg-violet-bd: #D9D6FE;
}

[data-theme="dark"] {
  --lg-surface: #273142;
  --lg-surface-muted: #222B39;
  --lg-table-head: #222B39;
  --lg-page-bg: #1B2431;
  --lg-border: #364152;
  --lg-border-strong: #4B5563;
  --lg-text: #F5F6FA;
  --lg-text-secondary: #D1D5DB;
  --lg-text-muted: #9CA3AF;
  --lg-primary-soft: rgba(72, 127, 255, 0.14);
  --lg-shadow-card: none;
  --lg-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.3);

  --lg-success-fg: #75E0A7; --lg-success-bg: rgba(23, 178, 106, 0.14); --lg-success-bd: rgba(23, 178, 106, 0.35);
  --lg-warning-fg: #FEC84B; --lg-warning-bg: rgba(247, 144, 9, 0.14);  --lg-warning-bd: rgba(247, 144, 9, 0.35);
  --lg-danger-fg: #FDA29B;  --lg-danger-bg: rgba(240, 68, 56, 0.14);  --lg-danger-bd: rgba(240, 68, 56, 0.35);
  --lg-info-fg: #84CAFF;    --lg-info-bg: rgba(46, 144, 250, 0.14);   --lg-info-bd: rgba(46, 144, 250, 0.35);
  --lg-neutral-fg: #D0D5DD; --lg-neutral-bg: rgba(152, 162, 179, 0.14); --lg-neutral-bd: rgba(152, 162, 179, 0.3);
  --lg-violet-fg: #BDB4FE;  --lg-violet-bg: rgba(122, 90, 248, 0.14); --lg-violet-bd: rgba(122, 90, 248, 0.35);
}

/* ---------------------------------------------------------------- Base */
body {
  font-family: var(--lg-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.lg-app {
  /* The theme sizes headings as `hN { font-size: var(--hN) !important }` with viewport clamps (h6 grew to 24px);
     inside the app they are a fixed product scale instead. */
  --h1: 1.75rem;
  --h2: 1.5rem;
  --h3: 1.375rem;
  --h4: 1.25rem;
  --h5: 1.125rem;
  --h6: 1rem;
  font-size: var(--lg-fs-body);
  color: var(--lg-text);
}

:where(.lg-app) :focus-visible {
  outline: 2px solid var(--lg-primary);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------- Typography
   Pages use h6 for page titles, section titles and card titles alike, all at the theme's
   24px. Inside the app, an h6 is a section heading (16px); the page title is set
   by the PageHeader component (.lg-page-title). */
.lg-app :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) { line-height: 1.35; letter-spacing: -0.01em; }
.lg-app .card-header { --h6: var(--lg-fs-card-title); --h5: var(--lg-fs-section); }
.lg-app .card-title { font-size: var(--lg-fs-card-title); font-weight: 600; }

.lg-page-title {
  font-size: var(--lg-fs-page-title) !important;
  line-height: 1.3 !important;
  font-weight: 600 !important;
  letter-spacing: -0.015em;
  color: var(--lg-text);
  margin: 0;
}
.lg-page-description {
  font-size: var(--lg-fs-secondary);
  color: var(--lg-text-muted);
  margin: 4px 0 0;
}
.lg-section-title {
  font-size: var(--lg-fs-section) !important;
  font-weight: 600;
  line-height: 1.4 !important;
  margin: 0;
  color: var(--lg-text);
}
.lg-caption { font-size: var(--lg-fs-caption); color: var(--lg-text-muted); }

.lg-app .form-label {
  font-size: var(--lg-fs-secondary);
  font-weight: 500;
  color: var(--lg-text-secondary);
  margin-bottom: 6px;
}
.lg-app .form-text { font-size: var(--lg-fs-caption); color: var(--lg-text-muted); margin-top: 4px; }

/* ---------------------------------------------------------------- Page header */
.lg-page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  margin-bottom: 24px;
  min-height: var(--lg-control-h);
}
.lg-page-header__main { min-width: 0; }
.lg-page-header__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

.lg-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  list-style: none;
  padding: 0;
  margin: 0 0 6px;
  font-size: var(--lg-fs-caption);
  color: var(--lg-text-muted);
}
.lg-breadcrumb a { color: var(--lg-text-muted); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.lg-breadcrumb a:hover { color: var(--lg-primary); }
.lg-breadcrumb__sep { color: var(--lg-border-strong); font-size: 14px; line-height: 1; display: inline-flex; }
.lg-breadcrumb [aria-current="page"] { color: var(--lg-text-secondary); font-weight: 500; }

/* ---------------------------------------------------------------- Buttons
   One height scale for every button: 40 / 36 (btn-sm) / 48 (btn-lg). Theme utilities
   such as py-11 or px-20 previously set each button's height individually; the
   !important here (with higher specificity) brings them back onto the scale. */
.lg-app .btn:not(.btn-link):not(.btn-close),
.lg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--lg-control-h);
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 16px;
  padding-right: 16px;
  font-size: var(--lg-fs-body) !important;
  font-weight: 500;
  line-height: 1.25;
  border-radius: var(--lg-radius);
  white-space: nowrap;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.lg-app .btn.btn-sm:not(.btn-link),
.lg-app .btn.btn-xs:not(.btn-link) {
  min-height: var(--lg-control-h-sm);
  padding-left: 12px;
  padding-right: 12px;
  font-size: var(--lg-fs-secondary) !important;
  gap: 6px;
}
.lg-app .btn.btn-xs:not(.btn-link) { min-height: 1.625rem; padding-left: 8px; padding-right: 8px; font-size: var(--lg-fs-caption) !important; }
.lg-app .btn.btn-lg:not(.btn-link) { min-height: var(--lg-control-h-lg); padding-left: 20px; padding-right: 20px; font-weight: 600; }
.lg-app .btn > iconify-icon, .lg-app .btn > i { font-size: 1.125em; line-height: 1; flex-shrink: 0; }
.lg-app .btn.btn-sm > iconify-icon, .lg-app .btn.btn-sm > i { font-size: 1em; }
/* Buttons used as square icon buttons (w-xx-px h-xx-px) keep their declared size. */
.lg-app .btn[class*="w-"][class*="h-"][class*="-px"] { padding-left: 0; padding-right: 0; min-height: 0; }
/* Text that wraps inside a narrow button (rare) stays readable instead of overflowing. */
.lg-app .btn.text-wrap, .lg-app .btn.w-100 { white-space: normal; }
.lg-app .btn-group > .btn { border-radius: 0; }
.lg-app .btn-group > .btn:first-child { border-top-left-radius: var(--lg-radius); border-bottom-left-radius: var(--lg-radius); }
.lg-app .btn-group > .btn:last-child { border-top-right-radius: var(--lg-radius); border-bottom-right-radius: var(--lg-radius); }
.lg-app .btn:focus-visible { box-shadow: var(--lg-focus-ring); outline: none; }
.lg-app .btn:disabled, .lg-app .btn.disabled { opacity: 0.55; cursor: not-allowed; }

/* Primary */
.lg-app .btn-primary, .lg-app .btn-primary-600 {
  background-color: var(--lg-primary);
  border-color: var(--lg-primary);
  color: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
}
.lg-app .btn-primary:hover, .lg-app .btn-primary-600:hover,
.lg-app .btn-primary:active, .lg-app .btn-primary-600:active {
  background-color: var(--lg-primary-hover);
  border-color: var(--lg-primary-hover);
  color: #fff;
}
/* Secondary / outline-neutral */
.lg-app .btn-outline-secondary, .lg-app .btn-light, .lg-app .btn-secondary {
  background-color: var(--lg-surface);
  border: 1px solid var(--lg-border-strong);
  color: var(--lg-text-secondary);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}
.lg-app .btn-outline-secondary:hover, .lg-app .btn-light:hover, .lg-app .btn-secondary:hover,
.lg-app .btn-outline-secondary:active, .lg-app .btn-outline-secondary.active {
  background-color: var(--lg-surface-muted);
  border-color: var(--lg-border-strong);
  color: var(--lg-text);
}
.lg-app .btn-check:checked + .btn-outline-secondary,
.lg-app .btn-outline-secondary.active {
  background-color: var(--lg-primary-soft);
  border-color: var(--lg-primary);
  color: var(--lg-primary);
}
/* Outline primary = tinted secondary action */
.lg-app .btn-outline-primary {
  background-color: var(--lg-surface);
  border: 1px solid var(--lg-primary);
  color: var(--lg-primary);
}
.lg-app .btn-outline-primary:hover, .lg-app .btn-outline-primary:active, .lg-app .btn-outline-primary.active {
  background-color: var(--lg-primary-soft);
  border-color: var(--lg-primary);
  color: var(--lg-primary);
}
/* Destructive */
.lg-app .btn-danger, .lg-app .btn-danger-600 { background-color: #D92D20; border-color: #D92D20; color: #fff; }
.lg-app .btn-danger:hover, .lg-app .btn-danger-600:hover { background-color: #B42318; border-color: #B42318; color: #fff; }
.lg-app .btn-outline-danger { background-color: var(--lg-surface); border: 1px solid var(--lg-danger-bd); color: var(--lg-danger-fg); }
.lg-app .btn-outline-danger:hover { background-color: var(--lg-danger-bg); border-color: var(--lg-danger-fg); color: var(--lg-danger-fg); }
.lg-app .btn-success { background-color: #079455; border-color: #079455; color: #fff; }
.lg-app .btn-success:hover { background-color: #067647; border-color: #067647; color: #fff; }
.lg-app .btn-outline-success { background-color: var(--lg-surface); border: 1px solid var(--lg-success-bd); color: var(--lg-success-fg); }
.lg-app .btn-outline-success:hover { background-color: var(--lg-success-bg); color: var(--lg-success-fg); }
.lg-app .btn-outline-warning { background-color: var(--lg-surface); border: 1px solid var(--lg-warning-bd); color: var(--lg-warning-fg); }
.lg-app .btn-outline-warning:hover { background-color: var(--lg-warning-bg); color: var(--lg-warning-fg); }
/* Ghost */
.lg-app .btn-ghost, .lg-app .btn-link.lg-ghost {
  background: transparent;
  border: 1px solid transparent;
  color: var(--lg-text-secondary);
}
.lg-app .btn-ghost:hover { background: var(--lg-surface-muted); color: var(--lg-text); }
.lg-app .btn-link { font-size: inherit; text-decoration: none; }
.lg-app .btn-link:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- Form controls
   Heights are locked (!important) because pages also pass h-40-px / h-44-px / h-56-px utilities that pulled inputs in
   the same row to different heights. Selects get line-height = inner height so their text sits centred. */
.lg-app .form-control,
.lg-app .form-select,
.lg-app select.form-control {
  min-height: 0;
  height: var(--lg-control-h) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 12px;
  font-size: var(--lg-fs-body) !important;
  line-height: 1.4;
  color: var(--lg-text);
  background-color: var(--lg-surface);
  border: 1px solid var(--lg-border-strong);
  border-radius: var(--lg-radius) !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.03);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.lg-app select.form-control, .lg-app .form-select { padding-right: 32px; line-height: calc(var(--lg-control-h) - 2px) !important; }
/* -sm controls are 36px, except where the page explicitly asked for 40 (WowDash list toolbars use form-select-sm h-40-px). */
.lg-app .form-control-sm:not(.h-40-px), .lg-app .form-select-sm:not(.h-40-px) {
  height: var(--lg-control-h-sm) !important;
  font-size: var(--lg-fs-secondary) !important;
  padding-left: 10px;
}
.lg-app select.form-control-sm:not(.h-40-px), .lg-app .form-select-sm:not(.h-40-px) { line-height: calc(var(--lg-control-h-sm) - 2px) !important; }
.lg-app .form-control-lg { height: var(--lg-control-h-lg) !important; }
.lg-app textarea.form-control {
  height: auto !important;
  min-height: 5rem;
  line-height: 1.5 !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}
.lg-app select[multiple].form-control, .lg-app select[multiple].form-select, .lg-app select[size].form-select {
  height: auto !important;
  line-height: 1.5 !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}
.lg-app textarea.form-control[rows="1"], .lg-app textarea.form-control[rows="2"] { min-height: 3.5rem; }
.lg-app input[type="file"].form-control { padding-left: 0; line-height: calc(var(--lg-control-h) - 2px); }
.lg-app input[type="file"].form-control::file-selector-button { height: 100%; margin-right: 12px; }
.lg-app input[type="color"].form-control { padding: 4px !important; width: 3rem; }
.lg-app .form-control::placeholder { color: #98A2B3; opacity: 1; }
.lg-app .form-control:hover:not(:disabled):not(:focus),
.lg-app .form-select:hover:not(:disabled):not(:focus) { border-color: #98A2B3; }
.lg-app .form-control:focus, .lg-app .form-select:focus {
  border-color: var(--lg-primary);
  box-shadow: var(--lg-focus-ring);
  outline: none;
}
.lg-app .form-control:disabled, .lg-app .form-control[readonly],
.lg-app .form-select:disabled {
  background-color: var(--lg-surface-muted);
  color: var(--lg-text-muted);
  box-shadow: none;
}
.lg-app .form-control.is-invalid, .lg-app .form-select.is-invalid { border-color: #F04438; }
.lg-app .form-control.is-invalid:focus { box-shadow: 0 0 0 3px rgba(240, 68, 56, 0.15); }
.lg-app .invalid-feedback { font-size: var(--lg-fs-caption); }

.lg-app .input-group > .form-control, .lg-app .input-group > .form-select { border-radius: 0 !important; }
.lg-app .input-group > :first-child { border-top-left-radius: var(--lg-radius) !important; border-bottom-left-radius: var(--lg-radius) !important; }
.lg-app .input-group > :last-child { border-top-right-radius: var(--lg-radius) !important; border-bottom-right-radius: var(--lg-radius) !important; }
.lg-app .input-group-text {
  min-height: var(--lg-control-h);
  font-size: var(--lg-fs-body);
  background: var(--lg-surface-muted);
  border-color: var(--lg-border-strong);
  color: var(--lg-text-muted);
}
.lg-app .input-group-sm > .input-group-text { min-height: var(--lg-control-h-sm); font-size: var(--lg-fs-secondary); }

.lg-app .form-check { min-height: 1.25rem; display: flex; align-items: center; gap: 8px; padding-left: 0; }
.lg-app .form-check .form-check-input { float: none; margin: 0; flex-shrink: 0; }
.lg-app .form-check-label { font-size: var(--lg-fs-body); color: var(--lg-text-secondary); cursor: pointer; }
.lg-app .form-check-input { width: 1rem; height: 1rem; border-color: var(--lg-border-strong); cursor: pointer; }
.lg-app .form-check-input:checked { background-color: var(--lg-primary); border-color: var(--lg-primary); }
.lg-app .form-check-input:focus { box-shadow: var(--lg-focus-ring); border-color: var(--lg-primary); }
.lg-app .form-switch { padding-left: 0; }
.lg-app .form-switch .form-check-input { width: 2.25rem; height: 1.25rem; border-radius: 999px; }

/* Search inputs drawn with a leading icon (theme pattern: .navbar-search / icon + input) */
.lg-search { position: relative; display: flex; align-items: center; }
.lg-search > iconify-icon { position: absolute; left: 12px; color: var(--lg-text-muted); pointer-events: none; font-size: 1rem; }
.lg-search > .form-control { padding-left: 36px; }

/* ---------------------------------------------------------------- Cards */
.lg-app .card {
  background-color: var(--lg-surface);
  border: 1px solid var(--lg-border) !important;
  border-radius: var(--lg-radius-lg) !important;
  box-shadow: var(--lg-shadow-card) !important;
}
.lg-app .card .card { box-shadow: none !important; }
.lg-app .card-header {
  background-color: transparent;
  border-bottom: 1px solid var(--lg-border) !important;
  padding: 16px 20px;
  border-top-left-radius: var(--lg-radius-lg) !important;
  border-top-right-radius: var(--lg-radius-lg) !important;
}
.lg-app .card-body { padding: 20px; }
.lg-app .card-footer {
  background-color: transparent;
  border-top: 1px solid var(--lg-border);
  padding: 12px 20px;
}
.lg-app a.card:hover, .lg-app .card.lg-card-clickable:hover, .lg-app .card.cursor-pointer:hover {
  border-color: var(--lg-border-strong) !important;
  box-shadow: var(--lg-shadow-hover) !important;
}
/* Inner rounded boxes built with radius utilities follow the same scale. */
.lg-app .radius-16, .lg-app .radius-12 { border-radius: var(--lg-radius-lg) !important; }

/* ---------------------------------------------------------------- Tables
   Business-density defaults: 14px cells, 12px/16px padding, quiet uppercase headers. */
.lg-app .table { color: var(--lg-text); margin-bottom: 0; font-size: var(--lg-fs-body); }
.lg-app .table > :not(caption) > * > * { border-bottom-color: var(--lg-border); }
.lg-app .table thead th,
.lg-app .bordered-table thead th,
.lg-app .basic-border-table thead th {
  font-size: var(--lg-fs-caption) !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--lg-text-muted) !important;
  background-color: var(--lg-table-head) !important;
  padding: 10px 16px !important;
  white-space: nowrap;
  vertical-align: middle;
  border-bottom: 1px solid var(--lg-border) !important;
}
.lg-app .table tbody td,
.lg-app .bordered-table tbody td {
  font-size: var(--lg-fs-body) !important;
  padding: 12px 16px !important;
  vertical-align: middle;
  color: var(--lg-text-secondary);
}
.lg-app .table.sm-table tbody td, .lg-app .table-sm tbody td { padding: 8px 12px !important; }
.lg-app .table.sm-table thead th, .lg-app .table-sm thead th { padding: 8px 12px !important; }
.lg-app .table tbody tr:last-child td { border-bottom: 0; }
.lg-app .table-hover tbody tr:hover > *,
.lg-app .bordered-table tbody tr:hover > * { background-color: var(--lg-surface-muted); }
.lg-app .table tbody td:first-child { color: var(--lg-text); }
.lg-app .table tfoot td, .lg-app .table tfoot th { font-size: var(--lg-fs-body); padding: 12px 16px; font-weight: 600; }
/* A table's single full-width "No X yet." row reads as an empty state, not a stray cell. */
.lg-app .table tbody tr:only-child > td[colspan] {
  padding: 40px 16px !important;
  text-align: center;
  color: var(--lg-text-muted);
  background: transparent !important;
}
.lg-app .table-responsive { border-radius: inherit; }
.lg-app .card > .table-responsive:first-child .table thead th:first-child { border-top-left-radius: var(--lg-radius-lg); }
.lg-app .card > .table-responsive:first-child .table thead th:last-child { border-top-right-radius: var(--lg-radius-lg); }
.lg-app .bordered-table { border: 0; }
.lg-app .bordered-table thead tr th:first-child, .lg-app .bordered-table tbody tr td:first-child { padding-left: 20px !important; }
.lg-app .bordered-table thead tr th:last-child, .lg-app .bordered-table tbody tr td:last-child { padding-right: 20px !important; }

/* ---------------------------------------------------------------- Badges & status */
/* Doubled class + !important: module code still passes theme utilities (px-12 py-2 radius-4 ...) alongside
   the badge class, and those utilities are !important themselves. */
.lg-badge.lg-badge {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  height: 1.375rem;
  padding: 0 8px !important;
  font-size: var(--lg-fs-caption) !important;
  font-weight: 500 !important;
  line-height: 1;
  border-radius: 999px !important;
  border: 1px solid var(--lg-neutral-bd) !important;
  background: var(--lg-neutral-bg) !important;
  color: var(--lg-neutral-fg) !important;
  white-space: nowrap;
  vertical-align: middle;
}
.lg-badge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.lg-badge.lg-badge--success { color: var(--lg-success-fg) !important; background: var(--lg-success-bg) !important; border-color: var(--lg-success-bd) !important; }
.lg-badge.lg-badge--warning { color: var(--lg-warning-fg) !important; background: var(--lg-warning-bg) !important; border-color: var(--lg-warning-bd) !important; }
.lg-badge.lg-badge--danger  { color: var(--lg-danger-fg) !important;  background: var(--lg-danger-bg) !important;  border-color: var(--lg-danger-bd) !important; }
.lg-badge.lg-badge--info    { color: var(--lg-info-fg) !important;    background: var(--lg-info-bg) !important;    border-color: var(--lg-info-bd) !important; }
.lg-badge.lg-badge--violet  { color: var(--lg-violet-fg) !important;  background: var(--lg-violet-bg) !important;  border-color: var(--lg-violet-bd) !important; }
.lg-badge.lg-badge--neutral { color: var(--lg-neutral-fg) !important; background: var(--lg-neutral-bg) !important; border-color: var(--lg-neutral-bd) !important; }

/* Bootstrap .badge used ad hoc across pages: same pill geometry as .lg-badge. */
.lg-app .badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px !important;
  font-size: var(--lg-fs-caption) !important;
  font-weight: 500;
  line-height: 1.1;
  border-radius: 999px !important;
}

/* ---------------------------------------------------------------- Alerts */
.lg-app .alert {
  border-radius: var(--lg-radius);
  font-size: var(--lg-fs-body);
  padding: 12px 16px;
  border-width: 1px !important;
}
.lg-app .alert-danger  { color: var(--lg-danger-fg);  background: var(--lg-danger-bg);  border-color: var(--lg-danger-bd) !important; }
.lg-app .alert-warning { color: var(--lg-warning-fg); background: var(--lg-warning-bg); border-color: var(--lg-warning-bd) !important; }
.lg-app .alert-success { color: var(--lg-success-fg); background: var(--lg-success-bg); border-color: var(--lg-success-bd) !important; }
.lg-app .alert-info    { color: var(--lg-info-fg);    background: var(--lg-info-bg);    border-color: var(--lg-info-bd) !important; }

/* ---------------------------------------------------------------- Tabs (nav-tabs / nav-pills) */
.lg-app .nav-tabs { border-bottom: 1px solid var(--lg-border); gap: 4px; }
.lg-app .nav-tabs .nav-link {
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 10px 12px;
  font-size: var(--lg-fs-body);
  font-weight: 500;
  color: var(--lg-text-muted);
  background: transparent;
  margin-bottom: -1px;
}
.lg-app .nav-tabs .nav-link:hover { color: var(--lg-text); }
.lg-app .nav-tabs .nav-link.active { color: var(--lg-primary); border-bottom-color: var(--lg-primary); background: transparent; }

/* ---------------------------------------------------------------- Modals & dropdowns */
.lg-app .modal-content, .modal .modal-content {
  border: 1px solid var(--lg-border);
  border-radius: var(--lg-radius-lg);
  box-shadow: var(--lg-shadow-pop);
}
.modal .modal-header { padding: 16px 20px; border-bottom: 1px solid var(--lg-border); }
.modal .modal-title { font-size: var(--lg-fs-section); font-weight: 600; }
.modal .modal-body { padding: 20px; }
.modal .modal-footer { padding: 12px 20px; border-top: 1px solid var(--lg-border); gap: 8px; }
.modal .modal-footer > * { margin: 0; }
.modal-backdrop.show { opacity: 0.4; }
.lg-app .dropdown-menu, .navbar-header .dropdown-menu {
  border: 1px solid var(--lg-border);
  border-radius: var(--lg-radius);
  box-shadow: var(--lg-shadow-pop);
  font-size: var(--lg-fs-body);
}

/* ---------------------------------------------------------------- Pagination */
.lg-app .pagination { gap: 4px; }
.lg-app .page-link {
  min-width: var(--lg-control-h-sm);
  height: var(--lg-control-h-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  font-size: var(--lg-fs-secondary);
  border-radius: var(--lg-radius) !important;
  border: 1px solid var(--lg-border);
  color: var(--lg-text-secondary);
}
.lg-app .page-item.active .page-link { background: var(--lg-primary); border-color: var(--lg-primary); color: #fff; }

/* ---------------------------------------------------------------- Empty / loading states */
.lg-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 24px;
  gap: 4px;
}
.lg-empty__icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--lg-primary-soft);
  color: var(--lg-primary);
  font-size: 24px;
  margin-bottom: 12px;
}
.lg-empty__title { font-size: var(--lg-fs-section) !important; line-height: 1.4 !important; font-weight: 600 !important; color: var(--lg-text); margin: 0; }
.lg-empty__text { font-size: var(--lg-fs-body); color: var(--lg-text-muted); margin: 0; max-width: 28rem; }
.lg-empty__action { margin-top: 16px; display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.lg-empty--compact { padding: 24px 16px; }

.lg-skeleton {
  display: block;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--lg-neutral-bg) 0%, var(--lg-surface-muted) 50%, var(--lg-neutral-bg) 100%);
  background-size: 200% 100%;
  animation: lg-shimmer 1.2s ease-in-out infinite;
}
@keyframes lg-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .lg-skeleton { animation: none; } }

/* Full-screen boot state while the auth guard resolves the session (was a blank page). */
.lg-boot {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  background: var(--lg-page-bg);
}
.lg-boot img { height: 32px; width: auto; }
.lg-boot__bar { width: 120px; height: 3px; border-radius: 3px; background: var(--lg-border); overflow: hidden; position: relative; }
.lg-boot__bar::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 40%;
  border-radius: inherit;
  background: var(--lg-primary);
  animation: lg-boot 1s ease-in-out infinite;
}
@keyframes lg-boot { 0% { transform: translateX(-100%); } 100% { transform: translateX(260%); } }

/* ---------------------------------------------------------------- KPI / stat cards */
.lg-stat {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 16px 20px 18px;
}
.lg-stat__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.lg-stat__icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--lg-primary-soft);
  color: var(--lg-primary);
  font-size: 18px;
}
.lg-stat__label { font-size: var(--lg-fs-secondary); color: var(--lg-text-muted); font-weight: 500; line-height: 1.35; padding-top: 6px; }
.lg-stat__value { font-size: 1.5rem; font-weight: 600; line-height: 1.25; letter-spacing: -0.02em; color: var(--lg-text); margin-top: 8px; font-variant-numeric: tabular-nums; }
.lg-stat__meta { font-size: var(--lg-fs-caption); color: var(--lg-text-muted); margin-top: 4px; }
.lg-kpi-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  margin-bottom: 24px;
}

/* ---------------------------------------------------------------- Toolbar (filters + actions above a list) */
.lg-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--lg-border);
}
.lg-toolbar__group { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* ---------------------------------------------------------------- Application shell
   Customer app shell (WowDash .sidebar / .navbar-header / .dashboard-main). */
.dashboard-main { background-color: var(--lg-page-bg); }
.dashboard-main-body.lg-app { padding: 24px 16px; }
@media (min-width: 768px) { .dashboard-main-body.lg-app { padding: 24px; } }
@media (min-width: 1400px) { .dashboard-main-body.lg-app { padding: 28px 32px; } }

.navbar-header {
  height: 4rem;
  padding: 0 16px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--lg-border);
  background-color: var(--lg-surface);
}
@media (min-width: 768px) { .navbar-header { padding: 0 24px; } }
.navbar-header > .row { width: 100%; margin: 0; }
.navbar-header > .row > * { padding: 0; }

.sidebar { border-right: 1px solid var(--lg-border); background-color: var(--lg-surface); }
.sidebar-logo { height: 4rem !important; border-bottom: 1px solid var(--lg-border) !important; }
.sidebar-menu-area { padding: 8px 12px 24px !important; }
.sidebar-menu { font-family: var(--lg-font); }
.sidebar-menu > li { margin-bottom: 2px; }
.sidebar-menu li a {
  min-height: 2.25rem;
  padding: 8px 10px !important;
  font-size: var(--lg-fs-body) !important;
  font-weight: 500;
  color: var(--lg-text-secondary);
  border-radius: var(--lg-radius);
  gap: 10px;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.sidebar-menu li.dropdown > a { padding-right: 28px !important; }
.sidebar-menu li a .menu-icon,
.sidebar-menu li a > i:first-child {
  font-size: 1.125rem !important;
  width: 1.25rem !important;
  margin: 0 !important;
  display: inline-flex;
  justify-content: center;
  flex-shrink: 0;
  color: var(--lg-text-muted);
}
.sidebar-menu li a:hover { background-color: var(--lg-surface-muted); color: var(--lg-text); }
.sidebar-menu li a:hover .menu-icon, .sidebar-menu li a:hover > i:first-child { color: var(--lg-text-secondary); }
/* Active page: soft tint, not a solid block, so the open section and the active page read differently. */
.sidebar-menu li > a.active-page,
.sidebar-menu li > a.active-page:hover {
  background-color: var(--lg-primary-soft) !important;
  color: var(--lg-primary) !important;
  font-weight: 600;
}
.sidebar-menu li > a.active-page .menu-icon, .sidebar-menu li > a.active-page > i:first-child { color: var(--lg-primary) !important; }
.sidebar-menu li.dropdown.open > a,
.sidebar-menu li.dropdown.dropdown-open > a {
  background-color: transparent !important;
  color: var(--lg-text) !important;
}
.sidebar-menu li.dropdown.open > a .menu-icon, .sidebar-menu li.dropdown.open > a > i:first-child { color: var(--lg-primary); }
.sidebar-menu li.dropdown > a::after { color: var(--lg-text-muted); font-size: 1rem !important; }
.sidebar-menu .sidebar-submenu {
  padding: 2px 0 6px 0 !important;
  margin-left: 19px;
  border-left: 1px solid var(--lg-border);
}
.sidebar-menu .sidebar-submenu li a {
  min-height: 2rem;
  padding: 6px 10px 6px 14px !important;
  font-size: var(--lg-fs-secondary) !important;
  font-weight: 500;
  margin-left: -1px;
  border-left: 2px solid transparent;
  border-radius: 0 var(--lg-radius) var(--lg-radius) 0;
}
/* Leaf bullets: the theme's orange arrows become nothing; the rail line does the job. */
.sidebar-menu .sidebar-submenu li a > i.ri-arrow-right-s-line { display: none !important; }
.sidebar-menu .sidebar-submenu li a .menu-icon,
.sidebar-menu .sidebar-submenu li a > i:first-child { font-size: 1rem !important; width: 1rem !important; }
.sidebar-menu .sidebar-submenu li > a.active-page {
  border-left-color: var(--lg-primary);
  background-color: var(--lg-primary-soft) !important;
}
.sidebar-menu .sidebar-submenu .sidebar-submenu { margin-left: 14px; }
.sidebar-menu .menu-label { line-height: 1.3; }
.sidebar-menu .sidebar-menu-group-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lg-text-muted);
  padding: 16px 10px 6px;
}

.d-footer {
  padding: 16px 24px !important;
  border-top: 1px solid var(--lg-border);
  background-color: var(--lg-surface);
  font-size: var(--lg-fs-caption);
  color: var(--lg-text-muted);
}
.d-footer p { font-size: var(--lg-fs-caption); margin: 0; color: var(--lg-text-muted); }

/* Admin + portal shells (flex layouts with their own <aside>) */
main.lg-app:not(.dashboard-main-body) { padding: 24px 16px !important; background-color: var(--lg-page-bg) !important; }
@media (min-width: 768px) { main.lg-app:not(.dashboard-main-body) { padding: 28px 32px !important; } }

/* ---------------------------------------------------------------- Responsive helpers */
@media (max-width: 767.98px) {
  .lg-page-header { align-items: flex-start; }
  .lg-page-header__actions { width: 100%; }
  .lg-page-header__actions > .btn-primary:only-child { flex: 1; }
  .lg-app .card-body, .lg-app .p-24 { padding: 16px !important; }
  .lg-app .px-24 { padding-left: 16px !important; padding-right: 16px !important; }
  .lg-toolbar { padding: 12px 16px; }
}
.min-w-0 { min-width: 0; }
/* Wrappers left empty by conditional content (e.g. <div className="mb-16"><BranchScopeNote /></div> when no branch
   is picked) must not leave a stray gap in the page rhythm. */
.lg-app div.mb-16:empty, .lg-app div.mb-24:empty, .lg-app div.mb-12:empty { display: none; }

/* ---------------------------------------------------------------- Pagination (components/ui/Pagination.tsx) */
.lg-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  font-size: var(--lg-fs-secondary);
  color: var(--lg-text-muted);
}
.lg-pagination__pages { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.lg-pagination__pages button {
  min-width: 2rem;
  height: 2rem;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--lg-border);
  border-radius: var(--lg-radius);
  background: var(--lg-surface);
  color: var(--lg-text-secondary);
  font-size: var(--lg-fs-secondary);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.lg-pagination__pages button:hover:not(:disabled):not([aria-current]) { background: var(--lg-surface-muted); border-color: var(--lg-border-strong); }
.lg-pagination__pages button[aria-current="page"] { background: var(--lg-primary); border-color: var(--lg-primary); color: #fff; }
.lg-pagination__pages button:disabled { opacity: 0.45; cursor: not-allowed; }
.lg-pagination__gap { padding: 0 4px; color: var(--lg-text-muted); }
.lg-card-footer-pagination .lg-pagination { margin-top: 0; }

/* ---------------------------------------------------------------- Table loading / empty rows (TableStates.tsx) */
.lg-app .table tbody td.lg-table-skeleton-cell { padding: 14px 20px !important; }
.lg-app .table tbody tr.lg-table-empty > td { padding: 0 !important; background: transparent !important; }
.lg-app .table tbody tr.lg-table-empty:hover > td { background: transparent !important; }

/* ---------------------------------------------------------------- Row action icon buttons
   Every list renders row actions as 40px coloured circles (green edit, red delete, blue view). In a dense table that
   is the loudest thing on the page. They become 32px neutral icon buttons; colour appears on hover, red only for
   delete, so destructive intent is still signalled where it matters. */
.lg-app .table td :is(a, button).rounded-circle:is(.w-40-px, .w-32-px, .w-36-px):is(.h-40-px, .h-32-px, .h-36-px) {
  width: 2rem !important;
  height: 2rem !important;
  border-radius: var(--lg-radius) !important;
  background: transparent !important;
  border: 1px solid transparent;
  color: var(--lg-text-muted) !important;
  font-size: 1rem;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.lg-app .table td :is(a, button).rounded-circle:is(.w-40-px, .w-32-px, .w-36-px):hover {
  background: var(--lg-surface-muted) !important;
  border-color: var(--lg-border);
  color: var(--lg-primary) !important;
}
.lg-app .table td :is(a, button).rounded-circle.bg-danger-focus:hover {
  background: var(--lg-danger-bg) !important;
  border-color: var(--lg-danger-bd);
  color: var(--lg-danger-fg) !important;
}
.lg-app .table td :is(a, button).rounded-circle .menu-icon,
.lg-app .table td :is(a, button).rounded-circle iconify-icon { font-size: 1rem !important; margin: 0 !important; }
.lg-app .table td .d-flex.gap-10 { gap: 4px !important; }

/* Theme search box (form.navbar-search > input + icon) used in list toolbars: same control as .form-control. */
.lg-app .navbar-search input {
  height: var(--lg-control-h) !important;
  border: 1px solid var(--lg-border-strong) !important;
  border-radius: var(--lg-radius) !important;
  background: var(--lg-surface) !important;
  font-size: var(--lg-fs-body) !important;
  padding-left: 36px !important;
  min-width: 14rem;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.03);
}
.lg-app .navbar-search input:focus { border-color: var(--lg-primary) !important; box-shadow: var(--lg-focus-ring); outline: none; }
.lg-app .navbar-search .icon { left: 12px !important; color: var(--lg-text-muted); font-size: 1rem !important; }

/* Standard list card: toolbar in the header, table flush to the card edges, pagination in the footer. */
.lg-app .card.lg-list-card { overflow: hidden; }
.lg-app .card.lg-list-card > .card-header { padding: 16px 20px !important; }
.lg-app .card.lg-list-card > .lg-list-card__body { padding: 0; }
.lg-app .card.lg-list-card .lg-list-card__footer { padding: 12px 20px; border-top: 1px solid var(--lg-border); }
.lg-app .card.lg-list-card .lg-list-card__footer:empty { display: none; }
.lg-app .card.lg-list-card .lg-list-card__footer .lg-pagination { margin-top: 0; }

/* Small icon tile beside a section/card title (FormSectionCard and friends) — same shape as the KPI icon. */
.lg-icon-tile {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--lg-primary-soft);
  color: var(--lg-primary);
  font-size: 18px;
}

/* ---------------------------------------------------------------- Navbar icon buttons
   Ghost 36px square buttons (theme toggle, notifications, sidebar toggles) instead of filled grey circles. Display is
   left to the theme for the two sidebar toggles, which it shows/hides per breakpoint. */
.lg-icon-btn {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--lg-radius);
  border: 1px solid transparent;
  background: transparent;
  color: var(--lg-text-secondary);
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.lg-icon-btn:not(.sidebar-toggle):not(.sidebar-mobile-toggle) { display: inline-flex; }
.lg-icon-btn.sidebar-toggle, .lg-icon-btn.sidebar-mobile-toggle { padding: 0; }
@media (min-width: 1200px) { .lg-icon-btn.sidebar-toggle { display: inline-flex; } }
@media (max-width: 1199.98px) { .lg-icon-btn.sidebar-mobile-toggle { display: inline-flex; } }
.lg-icon-btn:hover { background: var(--lg-surface-muted); border-color: var(--lg-border); }
.lg-icon-btn:focus-visible { outline: 2px solid var(--lg-primary); outline-offset: 2px; }
.lg-icon-btn iconify-icon, .lg-icon-btn .icon { font-size: 1.25rem !important; }
/* Light/dark switch (components/ui/ThemeToggle.tsx): both icons are in the markup, the theme on <html> picks one, so it is right before hydration. */
.lg-theme-toggle i { font-size: 1.25rem; line-height: 1; }
.lg-theme-toggle__to-light { display: none; }
[data-theme="dark"] .lg-theme-toggle__to-dark { display: none; }
[data-theme="dark"] .lg-theme-toggle__to-light { display: inline; }
/* Native controls, scrollbars and autofill follow the theme too. */
:root { color-scheme: light; }
[data-theme="dark"] { color-scheme: dark; }
/* Unread dot on the bell (the theme's .has-indicator only draws the dropdown caret). */
.navbar-header .lg-icon-btn.has-indicator::after {
  content: "";
  position: absolute;
  top: 6px;
  right: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #F04438;
  box-shadow: 0 0 0 2px var(--lg-surface);
}

/* ---------------------------------------------------------------- Choice cards & chips
   Selectable option tiles (one of many) and chips (any of many). Real radio / checkbox inputs sit inside the label,
   visually hidden, so keyboard and screen readers get native behaviour; :focus-within draws the ring. */
.lg-choice-grid { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
.lg-choice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--lg-border-strong);
  border-radius: var(--lg-radius);
  background: var(--lg-surface);
  cursor: pointer;
  margin: 0;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.lg-choice:hover { border-color: #98A2B3; }
.lg-choice.is-selected { border-color: var(--lg-primary); background: var(--lg-primary-soft); box-shadow: 0 0 0 1px var(--lg-primary); }
.lg-choice:focus-within { box-shadow: var(--lg-focus-ring); border-color: var(--lg-primary); }
.lg-choice__icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--lg-neutral-bg);
  color: var(--lg-text-secondary);
  font-size: 18px;
}
.lg-choice.is-selected .lg-choice__icon { background: var(--lg-primary); color: #fff; }
.lg-choice__body { display: flex; flex-direction: column; min-width: 0; }
.lg-choice__title { font-size: var(--lg-fs-body); font-weight: 600; color: var(--lg-text); line-height: 1.35; }
.lg-choice__text { font-size: var(--lg-fs-caption); color: var(--lg-text-muted); line-height: 1.4; margin-top: 2px; }
.lg-choice-grid--compact { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }

.lg-chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.lg-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 2rem;
  padding: 0 12px;
  border: 1px solid var(--lg-border-strong);
  border-radius: 999px;
  background: var(--lg-surface);
  color: var(--lg-text-secondary);
  font-size: var(--lg-fs-secondary);
  font-weight: 500;
  cursor: pointer;
  margin: 0;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.lg-chip:hover { border-color: #98A2B3; }
.lg-chip.is-selected { border-color: var(--lg-primary); background: var(--lg-primary-soft); color: var(--lg-primary); }
.lg-chip:focus-within { box-shadow: var(--lg-focus-ring); }
.lg-chip iconify-icon { font-size: 1rem; }

.lg-branch-picker { display: flex; flex-direction: column; gap: 16px; }
.lg-branch-picker__group { border: 0; padding: 0; margin: 0; min-width: 0; }
.lg-branch-picker__group > legend { float: none; width: auto; padding: 0; }
.lg-branch-picker__group:disabled { opacity: 0.6; }

/* ---------------------------------------------------------------- Onboarding wizard */
.lg-onboarding { min-height: 100vh; background: var(--lg-page-bg); padding: 32px 16px 64px; }
.lg-onboarding__inner { max-width: 880px; margin: 0 auto; }
.lg-onboarding__logo { display: block; height: 30px; width: auto; margin: 0 auto 28px; }
.lg-onboarding__card { padding: 24px; }
@media (min-width: 768px) { .lg-onboarding__card { padding: 32px; } }
.lg-onboarding__title { font-size: 1.375rem !important; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 4px; }
.lg-onboarding__lead { font-size: var(--lg-fs-body); color: var(--lg-text-muted); margin: 0 0 24px; }
.lg-onboarding__footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--lg-border); }
.lg-field { margin-bottom: 16px; }
.lg-field__error { font-size: var(--lg-fs-caption); color: var(--lg-danger-fg); margin: 4px 0 0; }

.lg-stepper { display: flex; align-items: flex-start; justify-content: center; list-style: none; padding: 0; margin: 0 0 28px; }
.lg-stepper__step { display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; flex: 1 1 0; max-width: 180px; min-width: 0; }
.lg-stepper__step + .lg-stepper__step::before {
  content: "";
  position: absolute;
  top: 14px;
  right: calc(50% + 20px);
  width: calc(100% - 40px);
  height: 2px;
  background: var(--lg-border);
}
.lg-stepper__step.is-done::before, .lg-stepper__step.is-current::before { background: var(--lg-primary); }
.lg-stepper__dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--lg-fs-secondary);
  font-weight: 600;
  background: var(--lg-surface);
  border: 2px solid var(--lg-border-strong);
  color: var(--lg-text-muted);
  position: relative;
  z-index: 1;
}
.lg-stepper__step.is-current .lg-stepper__dot { border-color: var(--lg-primary); color: var(--lg-primary); }
.lg-stepper__step.is-done .lg-stepper__dot { background: var(--lg-primary); border-color: var(--lg-primary); color: #fff; }
.lg-stepper__label { font-size: var(--lg-fs-caption); font-weight: 500; color: var(--lg-text-muted); text-align: center; }
.lg-stepper__step.is-current .lg-stepper__label { color: var(--lg-text); font-weight: 600; }

.lg-branch-card { border: 1px solid var(--lg-border); border-radius: var(--lg-radius-lg); padding: 16px; margin-bottom: 12px; background: var(--lg-surface); }
.lg-branch-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.lg-branch-card__title { font-size: var(--lg-fs-card-title) !important; font-weight: 600; margin: 0; color: var(--lg-text); display: flex; align-items: center; }

/* ---------------------------------------------------------------- Admin console shell (components/admin/AdminShell.tsx)
   Dark sidebar + red ADMIN tag on purpose: the console must never be mistaken for the customer app. Sections with
   headings instead of collapsed menus, the signed-in admin at the bottom, an off-canvas drawer under 992px. */
.lg-admin { display: flex; min-height: 100vh; background: var(--lg-page-bg); }
.lg-admin__sidebar {
  --adm-bg: #111827;
  --adm-border: rgba(255, 255, 255, 0.08);
  --adm-text: #9CA3AF;
  --adm-text-strong: #F9FAFB;
  width: 248px;
  flex-shrink: 0;
  background: var(--adm-bg);
  color: var(--adm-text);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}
.lg-admin__brand { display: flex; align-items: center; gap: 8px; height: 4rem; padding: 0 20px; border-bottom: 1px solid var(--adm-border); text-decoration: none; flex-shrink: 0; }
.lg-admin__brand-name { color: #fff; font-weight: 600; font-size: 1rem; letter-spacing: -0.01em; }
.lg-admin__brand-tag {
  display: inline-flex;
  align-items: center;
  height: 1.25rem;
  padding: 0 6px;
  border-radius: 4px;
  background: #D92D20;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.lg-admin__nav { flex: 1 1 auto; overflow-y: auto; padding: 12px 12px 16px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.15) transparent; }
.lg-admin__section + .lg-admin__section { margin-top: 16px; }
.lg-admin__section ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.lg-admin__section-title { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #6B7280; padding: 0 10px 6px; }
.lg-admin__link {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 2.25rem;
  padding: 6px 10px;
  border-radius: var(--lg-radius);
  color: var(--adm-text);
  font-size: var(--lg-fs-body);
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.lg-admin__link iconify-icon, .lg-admin__link i { font-size: 1.125rem; width: 1.25rem; display: inline-flex; justify-content: center; flex-shrink: 0; line-height: 1; }
.lg-admin__link:hover { background: rgba(255, 255, 255, 0.06); color: var(--adm-text-strong); }
.lg-admin__link.is-active { background: rgba(72, 127, 255, 0.18); color: #fff; }
.lg-admin__link.is-active iconify-icon, .lg-admin__link.is-active i { color: #8FB0FF; }
.lg-admin__link:focus-visible { outline: 2px solid #8FB0FF; outline-offset: 1px; }
.lg-admin__link.is-danger { color: #FDA29B; }
.lg-admin__link.is-danger:hover, .lg-admin__link.is-danger.is-active { background: rgba(240, 68, 56, 0.16); color: #FECDCA; }
.lg-admin__link.is-danger.is-active iconify-icon { color: #FDA29B; }
.lg-admin__account { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--adm-border); flex-shrink: 0; }
.lg-admin__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: var(--lg-fs-caption);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.lg-admin__who { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; line-height: 1.3; }
.lg-admin__who-name { color: #fff; font-size: var(--lg-fs-secondary); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-admin__who-role { font-size: var(--lg-fs-caption); color: var(--adm-text); }
.lg-admin__logout {
  width: 2rem;
  height: 2rem;
  border-radius: var(--lg-radius);
  border: 1px solid var(--adm-border);
  background: transparent;
  color: var(--adm-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.lg-admin__logout:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.lg-admin__logout:focus-visible { outline: 2px solid #8FB0FF; outline-offset: 1px; }
.lg-admin__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.lg-admin__topbar { display: none; align-items: center; gap: 10px; height: 3.5rem; padding: 0 16px; background: var(--lg-surface); border-bottom: 1px solid var(--lg-border); position: sticky; top: 0; z-index: 5; }
.lg-admin__scrim { display: none; }
@media (max-width: 991.98px) {
  .lg-admin__topbar { display: flex; }
  .lg-admin__sidebar { position: fixed; inset: 0 auto 0 0; z-index: 20; transform: translateX(-100%); transition: transform 0.2s ease; box-shadow: var(--lg-shadow-pop); }
  .lg-admin__sidebar.is-open { transform: translateX(0); }
  .lg-admin__scrim { display: block; position: fixed; inset: 0; z-index: 19; background: rgba(16, 24, 40, 0.5); border: 0; }
}
@media (prefers-reduced-motion: reduce) { .lg-admin__sidebar { transition: none; } }

/* Definition-style facts row (label over value), e.g. the admin dashboard's system build. */
.lg-facts { display: flex; flex-wrap: wrap; gap: 16px 40px; margin: 0; }
.lg-facts > div { min-width: 0; }
.lg-facts dt { font-size: var(--lg-fs-caption); font-weight: 500; color: var(--lg-text-muted); margin-bottom: 2px; }
.lg-facts dd { font-size: var(--lg-fs-body); font-weight: 600; color: var(--lg-text); margin: 0; }

/* Admin pages that open with a bare <h4>/<h5> title and a grey paragraph: read as the standard page header
   (title 20px, description 13px, 24px before the content) without touching each page's markup. */
.lg-admin main.lg-app > :is(h4, h5):first-child {
  font-size: var(--lg-fs-page-title) !important;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin-bottom: 24px !important;
}
.lg-admin main.lg-app > :is(h4, h5):first-child:has(+ p) { margin-bottom: 4px !important; }
.lg-admin main.lg-app > :is(h4, h5):first-child + p {
  font-size: var(--lg-fs-secondary);
  color: var(--lg-text-muted) !important;
  max-width: 80ch;
  margin-bottom: 24px !important;
}
.lg-admin main.lg-app > .d-flex:first-child > :is(h4, h5) { font-size: var(--lg-fs-page-title) !important; letter-spacing: -0.015em; }

/* Input with a leading icon (theme .icon-field): keep room for the icon and centre it on the 40px control. */
.lg-app .icon-field .form-control { padding-left: 38px; }
.lg-app .icon-field .icon { top: 50% !important; transform: translateY(-50%); width: 38px; font-size: 1rem; color: var(--lg-text-muted); pointer-events: none; }
.lg-app .icon-field .icon.translate-middle-y { transform: translateY(-50%) !important; }

/* KPI rows built with Bootstrap columns (most module overview pages): one 16px gutter in both directions, so cards
   never touch when the columns stack on tablet/mobile. */
.lg-app .row:has(> [class*="col"] > .card > .lg-stat) { --bs-gutter-x: 16px; --bs-gutter-y: 0px; row-gap: 16px; }
.lg-app .row:has(> [class*="col"] > .card > .lg-stat) > [class*="col"] { margin-top: 0; margin-bottom: 0 !important; }

/* Empty table rows that carry their own icon (<iconify-icon class="d-block"> above the message): centre it in the
   same soft tile the EmptyState component uses. */
.lg-app .table tbody tr:only-child > td[colspan] > iconify-icon.d-block {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin: 0 auto 12px !important;
  border-radius: 12px;
  background: var(--lg-primary-soft);
  color: var(--lg-primary);
  font-size: 24px !important;
}

/* ---------------------------------------------------------------- Admin sign-in / forgot / reset pages
   Same dark surface and red ADMIN tag as the console sidebar, so the realm is recognisable before signing in. */
.lg-admin-auth { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; background: #111827; }
.lg-admin-auth__card { width: 100%; max-width: 400px; padding: 32px; border-radius: var(--lg-radius-lg); background: var(--lg-surface); box-shadow: var(--lg-shadow-pop); }
.lg-admin-auth__card h5 { --h5: 1.125rem; }
.lg-admin-auth__card > p { font-size: var(--lg-fs-secondary); color: var(--lg-text-muted) !important; }
.lg-app .btn-dark { background-color: #111827; border-color: #111827; color: #fff; }
.lg-app .btn-dark:hover, .lg-app .btn-dark:active { background-color: #1F2937; border-color: #1F2937; color: #fff; }

/* Customer sidebar section headings (Sidebar.tsx). A heading is hidden when nothing visible follows it before the
   next heading, and when the sidebar is collapsed to icons. */
.sidebar-menu > li.sidebar-menu-group-title { margin: 0; cursor: default; user-select: none; }
.sidebar-menu > li.sidebar-menu-group-title:has(+ li.sidebar-menu-group-title),
.sidebar-menu > li.sidebar-menu-group-title:last-child { display: none; }
.sidebar.active:not(:hover) .sidebar-menu > li.sidebar-menu-group-title { display: none; }

/* ---------------------------------------------------------------- Branch "clouds" gallery (BranchBusinessPicker.tsx)
   One card per product a branch can switch on. A real checkbox drives each card (visually hidden, the label's ::after
   stretches over the whole card so anywhere on it toggles); --cloud-accent colours the icon tile and selected state. */
.lg-clouds { border: 0; padding: 0; margin: 0; min-width: 0; }
.lg-clouds > legend { float: none; width: auto; padding: 0; font-size: var(--lg-fs-body); font-weight: 600; color: var(--lg-text); margin-bottom: 2px; }
.lg-clouds:disabled { opacity: 0.65; }
.lg-clouds__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); }
.lg-cloud {
  --cloud-accent: var(--lg-primary);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 14px 12px;
  border: 1px solid var(--lg-border-strong);
  border-radius: var(--lg-radius-lg);
  background: var(--lg-surface);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.lg-cloud:hover:not(.is-locked) { border-color: var(--cloud-accent); box-shadow: var(--lg-shadow-hover); }
.lg-cloud.is-selected {
  border-color: var(--cloud-accent);
  box-shadow: 0 0 0 1px var(--cloud-accent);
  background: color-mix(in srgb, var(--cloud-accent) 6%, var(--lg-surface));
}
.lg-cloud.is-locked { background: var(--lg-surface-muted); border-style: dashed; }
.lg-cloud.is-locked .lg-cloud__icon, .lg-cloud.is-locked .lg-cloud__name, .lg-cloud.is-locked .lg-cloud__tagline { opacity: 0.6; }
.lg-cloud__input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; pointer-events: none; }
.lg-cloud:has(.lg-cloud__input:focus-visible) { outline: 2px solid var(--cloud-accent); outline-offset: 2px; }
.lg-cloud__face { display: flex; flex-direction: column; gap: 10px; margin: 0; cursor: pointer; }
.lg-cloud__face::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.lg-cloud.is-locked .lg-cloud__face { cursor: not-allowed; }
.lg-cloud__top { display: flex; align-items: flex-start; justify-content: space-between; }
.lg-cloud__icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: var(--cloud-accent);
  background: color-mix(in srgb, var(--cloud-accent) 12%, transparent);
}
.lg-cloud.is-selected .lg-cloud__icon { background: var(--cloud-accent); color: #fff; }
.lg-cloud__check { font-size: 20px; color: var(--cloud-accent); opacity: 0; transform: scale(0.8); transition: opacity 0.15s ease, transform 0.15s ease; }
.lg-cloud.is-selected .lg-cloud__check { opacity: 1; transform: scale(1); }
.lg-cloud__name { font-size: var(--lg-fs-card-title); font-weight: 600; color: var(--lg-text); line-height: 1.3; }
.lg-cloud__about { display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; }
.lg-cloud__tagline { font-size: var(--lg-fs-caption); color: var(--lg-text-muted); line-height: 1.45; margin: 0; }
.lg-cloud__features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.lg-cloud__features li { position: relative; padding-left: 14px; font-size: var(--lg-fs-caption); color: var(--lg-text-secondary); line-height: 1.4; }
.lg-cloud__features li::before { content: ""; position: absolute; left: 2px; top: 0.55em; width: 5px; height: 5px; border-radius: 50%; background: var(--cloud-accent); opacity: 0.7; }
.lg-cloud__foot { display: flex; align-items: center; gap: 8px; min-height: 1.5rem; margin-top: 2px; }
.lg-cloud__foot:empty { display: none; }
.lg-cloud__main-btn {
  position: relative; /* above the label's stretched ::after, so it is clickable on its own */
  z-index: 1;
  border: 0;
  background: transparent;
  padding: 2px 0;
  font-size: var(--lg-fs-caption);
  font-weight: 600;
  color: var(--cloud-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.lg-cloud__main-btn:focus-visible { outline: 2px solid var(--cloud-accent); outline-offset: 2px; border-radius: 4px; }
.lg-clouds__summary {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: var(--lg-radius);
  background: var(--lg-surface-muted);
  border: 1px solid var(--lg-border);
  font-size: var(--lg-fs-body);
  color: var(--lg-text);
}
.lg-clouds__summary-menus { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
@media (prefers-reduced-motion: reduce) { .lg-cloud, .lg-cloud__check { transition: none; } }

/* ---------------------------------------------------------------- Sidebar: organisation + branch block
   Was a grey bordered box with a blue heading, a 12px company button and a 32px native select with inline styles.
   Now: quiet caption labels, and the company and branch controls as two matching 36px fields. */
.organisation_details_sidebar {
  padding: 12px 12px 14px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--lg-border);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.organisation_details_sidebar_head { display: flex; align-items: center; justify-content: space-between; margin: 0; }
.organisation_details_sidebar_title,
label.organisation_details_sidebar_title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lg-text-muted);
  margin: 0;
  padding: 0 2px;
}
.organisation_details_sidebar_link a {
  font-size: var(--lg-fs-caption);
  font-weight: 500;
  color: var(--lg-primary);
  text-decoration: none;
  padding: 0 2px;
}
.organisation_details_sidebar_link a:hover { text-decoration: underline; }
.organisation_details_sidebar_company_name,
.lg-side-select {
  min-height: 2.25rem;
  border: 1px solid var(--lg-border-strong);
  border-radius: var(--lg-radius);
  background: var(--lg-surface);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
  font-size: var(--lg-fs-secondary);
  font-weight: 500;
  color: var(--lg-text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.organisation_details_sidebar_company_name { padding: 0 10px; }
.organisation_details_sidebar_company_name iconify-icon { color: var(--lg-text-muted); font-size: 1rem; }
.organisation_details_sidebar_company_name:hover, .lg-side-select:hover { border-color: #98A2B3; }
.organisation_details_sidebar_company_name:focus-visible { outline: none; border-color: var(--lg-primary); box-shadow: var(--lg-focus-ring); }
.lg-side-branch { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.lg-side-select { position: relative; display: flex; align-items: center; }
.lg-side-select:focus-within { border-color: var(--lg-primary); box-shadow: var(--lg-focus-ring); }
.lg-side-select select {
  appearance: none;
  -webkit-appearance: none;
  flex: 1 1 auto;
  min-width: 0;
  height: calc(2.25rem - 2px);
  line-height: calc(2.25rem - 2px) !important; /* !important: the `font: inherit` below would otherwise reset it */
  padding: 0 30px 0 32px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  outline: none;
  text-overflow: ellipsis;
  border-radius: inherit;
}
.lg-side-select__icon, .lg-side-select__caret { position: absolute; color: var(--lg-text-muted); pointer-events: none; font-size: 1rem; }
.lg-side-select__icon { left: 10px; color: var(--lg-primary); }
.lg-side-select__caret { right: 10px; font-size: 0.875rem; }
/* Collapsed (icon-only) sidebar: the block has no room, so it hides until the sidebar is hovered open. */
.sidebar.active:not(:hover) .organisation_details_sidebar { display: none; }
/* The company switcher dropdown carried light-only inline colours. */
.organisation_details_sidebar > div[style*="z-index: 1050"] {
  background: var(--lg-surface) !important;
  border-color: var(--lg-border) !important;
  border-radius: var(--lg-radius) !important;
  box-shadow: var(--lg-shadow-pop) !important;
  color: var(--lg-text);
  left: 12px !important;
  right: 12px !important;
}

/* My Companies: the branches of the active company, one tile each. */
.lg-branch-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.lg-branch-tile { display: flex; flex-direction: column; gap: 8px; padding: 14px; border: 1px solid var(--lg-border); border-radius: var(--lg-radius-lg); background: var(--lg-surface); }
.lg-branch-tile__name { display: flex; align-items: center; gap: 8px; font-size: var(--lg-fs-body); font-weight: 600; color: var(--lg-text); }
.lg-branch-tile__name iconify-icon { color: var(--lg-primary); font-size: 1.125rem; flex-shrink: 0; }
.lg-branch-tile__meta { font-size: var(--lg-fs-caption); color: var(--lg-text-muted); }
.lg-branch-tile__tags { display: flex; flex-wrap: wrap; gap: 4px; }

/* Small caption heading inside a card body (e.g. "Branches" inside an organisation card). */
.lg-card-subhead { font-size: 11px !important; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--lg-text-muted); margin: 0 0 10px; line-height: 1.4 !important; }

/* The card for the thing you are currently in (the company you are working in on My Companies): an accent edge and a tint, so it is
   never confused with the others in the list. */
.lg-app .card.lg-card-current { border-color: var(--lg-primary) !important; box-shadow: 0 0 0 1px var(--lg-primary) !important; }
.lg-app .card.lg-card-current > .card-header { background: var(--lg-primary-soft); }

/* ---------------------------------------------------------------- Lumi (the in-app assistant)
   components/lumi/*. Lumi has its own accent (a violet-to-blue gradient mark) so it reads as a distinct presence inside the
   Legasum system, while every surface, radius, border and type size comes from the same tokens as the rest of the app. */
:root { --lumi-a: #7C5CFF; --lumi-b: #487FFF; --lumi-soft: #F3F0FF; --lumi-panel-w: 420px; }
[data-theme="dark"] { --lumi-soft: rgba(124, 92, 255, 0.16); }

.lg-lumi-mark {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
  font-size: 14px;
  background: linear-gradient(135deg, var(--lumi-a), var(--lumi-b));
}
.lg-lumi-mark--lg { width: 36px; height: 36px; border-radius: 10px; font-size: 20px; }
.lg-lumi-mark--xl { width: 52px; height: 52px; border-radius: 16px; font-size: 28px; }

/* Header button */
.lg-lumi-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 2.25rem;
  padding: 0 12px 0 6px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--lumi-a) 30%, var(--lg-border));
  background: var(--lumi-soft);
  color: var(--lg-text);
  font-size: var(--lg-fs-secondary);
  font-weight: 600;
  white-space: nowrap;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.lg-lumi-btn:hover { border-color: var(--lumi-a); box-shadow: 0 2px 10px color-mix(in srgb, var(--lumi-a) 22%, transparent); }
.lg-lumi-btn:focus-visible, .lg-lumi-pill:focus-visible { outline: 2px solid var(--lumi-a); outline-offset: 2px; }
@media (max-width: 575.98px) { .lg-lumi-btn { padding: 0 6px; } .lg-lumi-btn__label { display: none; } }

/* Minimised pill */
.lg-lumi-pill {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1040;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 2.75rem;
  padding: 0 16px 0 10px;
  border-radius: 999px;
  border: 1px solid var(--lg-border);
  background: var(--lg-surface);
  color: var(--lg-text);
  font-size: var(--lg-fs-body);
  font-weight: 600;
  box-shadow: var(--lg-shadow-pop);
}

/* Drawer */
.lg-lumi { position: fixed; inset: 0; z-index: 1050; display: flex; justify-content: flex-end; }
.lg-lumi[hidden] { display: none; }
.lg-lumi__scrim { position: absolute; inset: 0; border: 0; padding: 0; background: rgba(16, 24, 40, 0.28); animation: lg-lumi-fade 0.18s ease both; cursor: default; }
.lg-lumi__panel {
  position: relative;
  width: min(100%, var(--lumi-panel-w));
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--lg-surface);
  border-left: 1px solid var(--lg-border);
  box-shadow: var(--lg-shadow-pop);
  font-family: var(--lg-font);
  font-size: var(--lg-fs-body);
  color: var(--lg-text);
  animation: lg-lumi-slide 0.22s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@media (max-width: 575.98px) { .lg-lumi__panel { width: 100%; border-left: 0; } }
@keyframes lg-lumi-slide { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes lg-lumi-fade { from { opacity: 0; } to { opacity: 1; } }

.lg-lumi__head { display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 16px; border-bottom: 1px solid var(--lg-border); flex-shrink: 0; }
.lg-lumi__title { min-width: 0; flex: 1 1 auto; }
.lg-lumi__title h2 { font-size: var(--lg-fs-section) !important; font-weight: 600; line-height: 1.25 !important; margin: 0; color: var(--lg-text); }
.lg-lumi__title p { font-size: var(--lg-fs-caption); color: var(--lg-text-muted); margin: 0; }
.lg-lumi__actions { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.lg-lumi__actions .lg-icon-btn { display: inline-flex; width: 2rem; height: 2rem; }
.lg-lumi__actions .lg-icon-btn iconify-icon { font-size: 1.125rem !important; }

.lg-lumi__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 16px 0; scroll-behavior: smooth; }
.lg-lumi__subhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 12px 8px 8px; }
.lg-lumi .btn-ghost { background: transparent; border: 1px solid transparent; color: var(--lg-text-secondary); display: inline-flex; align-items: center; gap: 6px; min-height: 2rem; padding: 0 8px; font-size: var(--lg-fs-secondary); border-radius: var(--lg-radius); }
.lg-lumi .btn-ghost:hover { background: var(--lg-surface-muted); color: var(--lg-text); }

/* Welcome */
.lg-lumi__welcome { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 24px 20px 8px; }
.lg-lumi__welcome h3 { font-size: 1.25rem !important; font-weight: 600; letter-spacing: -0.015em; line-height: 1.3 !important; margin: 8px 0 0; color: var(--lg-text); }
.lg-lumi__welcome p { font-size: var(--lg-fs-body); color: var(--lg-text-muted); margin: 0 0 8px; line-height: 1.5; }
.lg-lumi__prompts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; width: 100%; }
.lg-lumi__prompts button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--lg-border);
  border-radius: var(--lg-radius);
  background: var(--lg-surface);
  color: var(--lg-text);
  font-size: var(--lg-fs-body);
  text-align: left;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.lg-lumi__prompts button:hover:not(:disabled) { border-color: var(--lumi-a); background: var(--lumi-soft); }
.lg-lumi__prompts button iconify-icon { color: var(--lg-text-muted); flex-shrink: 0; }
.lg-lumi__prompts button:focus-visible, .lg-lumi__history button:focus-visible, .lg-lumi__send:focus-visible { outline: 2px solid var(--lumi-a); outline-offset: 2px; }

/* Messages */
.lg-lumi__messages { list-style: none; margin: 0; padding: 0 16px; display: flex; flex-direction: column; gap: 16px; }
.lg-lumi-msg { display: flex; gap: 10px; align-items: flex-start; animation: lg-lumi-fade 0.2s ease both; }
.lg-lumi-msg--user { justify-content: flex-end; }
.lg-lumi-msg__bubble { min-width: 0; max-width: 100%; line-height: 1.55; overflow-wrap: anywhere; }
.lg-lumi-msg--user .lg-lumi-msg__bubble { max-width: 85%; padding: 8px 12px; border-radius: 14px 14px 4px 14px; background: var(--lg-primary); color: #fff; }
.lg-lumi-msg--assistant .lg-lumi-msg__bubble { flex: 1 1 auto; padding-top: 2px; }
.lg-lumi-msg__text { margin: 0; white-space: pre-wrap; }
.lg-lumi-msg__error { display: flex; align-items: flex-start; gap: 6px; margin: 6px 0 0; font-size: var(--lg-fs-secondary); color: var(--lg-danger-fg); }
.lg-lumi-md > :first-child { margin-top: 0; }
.lg-lumi-md > :last-child { margin-bottom: 0; }
.lg-lumi-md p { margin: 0 0 10px; }
.lg-lumi-md__h { font-weight: 600; }
.lg-lumi-md ul, .lg-lumi-md ol { margin: 0 0 10px; padding-left: 20px; }
.lg-lumi-md ul { list-style: disc; }
.lg-lumi-md ol { list-style: decimal; }
.lg-lumi-md li { margin: 2px 0; }
.lg-lumi-md code { font-size: 0.9em; padding: 1px 5px; border-radius: 4px; background: var(--lg-neutral-bg); color: var(--lg-text); }
.lg-lumi-md pre { margin: 0 0 10px; padding: 10px 12px; border-radius: var(--lg-radius); background: var(--lg-neutral-bg); overflow-x: auto; }
.lg-lumi-md pre code { padding: 0; background: transparent; }
.lg-lumi-md a { color: var(--lg-primary); text-decoration: underline; text-underline-offset: 2px; }

.lg-lumi-tools { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.lg-lumi-tools li { display: flex; align-items: center; gap: 6px; font-size: var(--lg-fs-caption); color: var(--lg-text-muted); }
.lg-lumi-tools li.is-running iconify-icon { animation: lg-lumi-spin 1s linear infinite; color: var(--lumi-a); }
.lg-lumi-tools li.is-done iconify-icon { color: var(--lg-success-fg); }
.lg-lumi-tools li.is-error { color: var(--lg-danger-fg); }
@keyframes lg-lumi-spin { to { transform: rotate(360deg); } }

.lg-lumi-thinking { display: inline-flex; align-items: center; gap: 8px; font-size: var(--lg-fs-secondary); color: var(--lg-text-muted); }
.lg-lumi-dots { display: inline-flex; gap: 4px; }
.lg-lumi-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--lumi-a); animation: lg-lumi-bounce 1.2s ease-in-out infinite; }
.lg-lumi-dots i:nth-child(2) { animation-delay: 0.15s; }
.lg-lumi-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes lg-lumi-bounce { 0%, 80%, 100% { opacity: 0.3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

/* History */
.lg-lumi__history { list-style: none; margin: 0; padding: 0 12px; display: flex; flex-direction: column; gap: 2px; }
.lg-lumi__history button { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px; border: 0; border-radius: var(--lg-radius); background: transparent; color: var(--lg-text); text-align: left; font-size: var(--lg-fs-body); }
.lg-lumi__history button:hover:not(:disabled), .lg-lumi__history button[aria-current="true"] { background: var(--lg-surface-muted); }
.lg-lumi__history-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Composer */
.lg-lumi__composer { position: relative; flex-shrink: 0; padding: 12px 16px 12px; border-top: 1px solid var(--lg-border); background: var(--lg-surface); }
.lg-lumi__composer textarea {
  display: block;
  width: 100%;
  min-height: 2.75rem;
  max-height: 10rem;
  padding: 11px 48px 11px 12px;
  border: 1px solid var(--lg-border-strong);
  border-radius: 12px;
  background: var(--lg-surface);
  color: var(--lg-text);
  font: inherit;
  line-height: 1.45;
  resize: none;
  field-sizing: content;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.lg-lumi__composer textarea:focus { outline: none; border-color: var(--lumi-a); box-shadow: 0 0 0 3px color-mix(in srgb, var(--lumi-a) 20%, transparent); }
.lg-lumi__composer textarea::placeholder { color: #98A2B3; }
.lg-lumi__send {
  position: absolute;
  right: 22px;
  top: 18px;
  width: 2rem;
  height: 2rem;
  border-radius: 10px;
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1rem;
  background: linear-gradient(135deg, var(--lumi-a), var(--lumi-b));
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.lg-lumi__send:disabled { opacity: 0.35; cursor: not-allowed; }
.lg-lumi__send:not(:disabled):hover { transform: translateY(-1px); }
.lg-lumi__send.is-stop { background: var(--lg-text); }
.lg-lumi__hint { margin: 8px 2px 0; font-size: 11px; line-height: 1.4; color: var(--lg-text-muted); }

@media (prefers-reduced-motion: reduce) {
  .lg-lumi__panel, .lg-lumi__scrim, .lg-lumi-msg, .lg-lumi-dots i, .lg-lumi-tools li.is-running iconify-icon { animation: none; }
  .lg-lumi__body { scroll-behavior: auto; }
}
.lg-lumi__history li { display: flex; align-items: center; gap: 4px; }
.lg-lumi__history .lg-lumi__history-open { flex: 1 1 auto; min-width: 0; }
.lg-lumi__history .lg-icon-btn { display: inline-flex; width: 2rem; height: 2rem; padding: 0; flex-shrink: 0; }
.lg-lumi__history .lg-icon-btn:hover { background: var(--lg-danger-bg); color: var(--lg-danger-fg); border-color: var(--lg-danger-bd); }

/* ---------------------------------------------------------------- Admin > Lumi */
.lg-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--lg-border); margin-bottom: 24px; overflow-x: auto; }
.lg-tabs__tab { border: 0; border-bottom: 2px solid transparent; background: transparent; padding: 10px 14px; margin-bottom: -1px; font-size: var(--lg-fs-body); font-weight: 500; color: var(--lg-text-muted); white-space: nowrap; }
.lg-tabs__tab:hover { color: var(--lg-text); }
.lg-tabs__tab.is-active { color: var(--lg-primary); border-bottom-color: var(--lg-primary); font-weight: 600; }
.lg-tabs__tab:focus-visible { outline: 2px solid var(--lg-primary); outline-offset: -2px; border-radius: 4px; }

.lg-provider-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); align-items: start; }
.lg-keyfield { padding: 12px; border: 1px dashed var(--lg-border-strong); border-radius: var(--lg-radius); background: var(--lg-surface-muted); }
.lg-keyfield__set { display: inline-flex; align-items: center; gap: 6px; font-size: var(--lg-fs-body); font-weight: 600; color: var(--lg-text); margin-right: auto; }
.lg-keyfield__set iconify-icon { color: var(--lg-success-fg); }

.lg-setup { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.lg-setup li { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: 1px solid var(--lg-border); border-radius: var(--lg-radius-lg); background: var(--lg-surface); }
.lg-setup li.is-done { background: var(--lg-success-bg); border-color: var(--lg-success-bd); }
.lg-setup__n { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: var(--lg-fs-secondary); font-weight: 600; background: var(--lg-primary-soft); color: var(--lg-primary); }
.lg-setup li.is-done .lg-setup__n { background: var(--lg-success-fg); color: #fff; }
.lg-setup__title { display: block; font-size: var(--lg-fs-body); font-weight: 600; color: var(--lg-text); }
.lg-setup__text { display: block; font-size: var(--lg-fs-caption); color: var(--lg-text-muted); line-height: 1.45; margin-top: 2px; }

.lg-bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.lg-bars li { display: grid; grid-template-columns: 56px 1fr 56px; align-items: center; gap: 10px; font-size: var(--lg-fs-caption); color: var(--lg-text-muted); }
.lg-bars__track { height: 8px; border-radius: 4px; background: var(--lg-neutral-bg); overflow: hidden; }
.lg-bars__fill { display: block; height: 100%; border-radius: inherit; background: var(--lg-primary); }
.lg-bars__value { text-align: right; color: var(--lg-text); font-weight: 600; font-variant-numeric: tabular-nums; }

.lg-app .table tbody tr.lg-detail-row > td { background: var(--lg-surface-muted) !important; padding: 16px 20px !important; }
.lg-code-inline { font-size: 12px; padding: 1px 5px; border-radius: 4px; background: var(--lg-neutral-bg); color: var(--lg-text); word-break: break-all; }

/* ================================================================ Dark theme corrections
   The tokens above carry most of dark mode. These are the places where the theme or Bootstrap hard-code a light-theme colour
   that becomes unreadable on a dark surface. Found by measuring text contrast on real screens, not by guesswork: keep each
   rule tied to the thing it fixes. */
[data-theme="dark"] {
  --lg-link: #8FB0FF; /* primary as TEXT on a dark surface; --lg-primary stays the fill colour for buttons */
  --bs-link-color: #8FB0FF;
  --bs-link-color-rgb: 143, 176, 255;
  --bs-link-hover-color: #B4CBFF;
  --bs-link-hover-color-rgb: 180, 203, 255;
}
/* Plain Bootstrap tables (without the theme's .bordered-table) kept white cells. */
[data-theme="dark"] .table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--lg-text);
  --bs-table-border-color: var(--lg-border);
  --bs-table-striped-bg: rgba(255, 255, 255, 0.03);
  --bs-table-striped-color: var(--lg-text);
  --bs-table-hover-bg: rgba(255, 255, 255, 0.05);
  --bs-table-hover-color: var(--lg-text);
  color: var(--lg-text);
}
/* Links and link-style buttons: Bootstrap's and the theme's blues are too dark to read here. */
[data-theme="dark"] .btn-link,
[data-theme="dark"] .text-primary-600,
[data-theme="dark"] .text-primary { color: var(--lg-link) !important; }
[data-theme="dark"] .sidebar-menu li > a.active-page,
[data-theme="dark"] .sidebar-menu li > a.active-page .menu-icon,
[data-theme="dark"] .sidebar-menu li > a.active-page > i:first-child,
[data-theme="dark"] .sidebar-menu .sidebar-submenu li > a.active-page { color: var(--lg-link) !important; }
[data-theme="dark"] .lg-setup__n { color: var(--lg-link); }
[data-theme="dark"] .lg-setup li.is-done .lg-setup__n { color: #0B2A1B; }
/* The theme's coloured text utilities (required-field asterisks, old-style badges, amounts). */
[data-theme="dark"] .text-danger-600, [data-theme="dark"] .text-danger-main, [data-theme="dark"] .text-danger { color: var(--lg-danger-fg) !important; }
[data-theme="dark"] .text-success-600, [data-theme="dark"] .text-success-main, [data-theme="dark"] .text-success { color: var(--lg-success-fg) !important; }
[data-theme="dark"] .text-warning-600, [data-theme="dark"] .text-warning-main, [data-theme="dark"] .text-warning { color: var(--lg-warning-fg) !important; }
[data-theme="dark"] .text-info-600, [data-theme="dark"] .text-info-main, [data-theme="dark"] .text-info { color: var(--lg-info-fg) !important; }
/* Checkboxes, radios and switches were white boxes. */
[data-theme="dark"] .form-check-input:not(:checked) { background-color: var(--lg-surface-muted); border-color: var(--lg-border-strong); }
/* Bootstrap's fixed light utilities, used here and there for tiles, drawers and tables. */
[data-theme="dark"] .bg-white { background-color: var(--lg-surface) !important; }
[data-theme="dark"] .bg-light { background-color: var(--lg-surface-muted) !important; }
[data-theme="dark"] .text-dark { color: var(--lg-text) !important; }
/* Bootstrap components whose own variables stay light: menus, list groups, side panels, accordions, pagers, tabs. */
[data-theme="dark"] .dropdown-menu {
  --bs-dropdown-bg: var(--lg-surface);
  --bs-dropdown-color: var(--lg-text);
  --bs-dropdown-link-color: var(--lg-text);
  --bs-dropdown-link-hover-color: var(--lg-text);
  --bs-dropdown-link-hover-bg: var(--lg-surface-muted);
  --bs-dropdown-border-color: var(--lg-border);
  --bs-dropdown-divider-bg: var(--lg-border);
  color: var(--lg-text);
}
[data-theme="dark"] .list-group {
  --bs-list-group-bg: var(--lg-surface);
  --bs-list-group-color: var(--lg-text);
  --bs-list-group-border-color: var(--lg-border);
  --bs-list-group-action-color: var(--lg-text);
  --bs-list-group-action-hover-color: var(--lg-text);
  --bs-list-group-action-hover-bg: var(--lg-surface-muted);
}
[data-theme="dark"] .offcanvas { --bs-offcanvas-bg: var(--lg-surface); --bs-offcanvas-color: var(--lg-text); --bs-offcanvas-border-color: var(--lg-border); }
[data-theme="dark"] .accordion {
  --bs-accordion-bg: var(--lg-surface);
  --bs-accordion-color: var(--lg-text);
  --bs-accordion-btn-color: var(--lg-text);
  --bs-accordion-btn-bg: var(--lg-surface);
  --bs-accordion-active-color: var(--lg-link);
  --bs-accordion-active-bg: var(--lg-primary-soft);
  --bs-accordion-border-color: var(--lg-border);
}
[data-theme="dark"] .accordion-item { color: var(--lg-text); }
[data-theme="dark"] .pagination {
  --bs-pagination-bg: var(--lg-surface);
  --bs-pagination-color: var(--lg-text-secondary);
  --bs-pagination-border-color: var(--lg-border);
  --bs-pagination-hover-bg: var(--lg-surface-muted);
  --bs-pagination-hover-color: var(--lg-text);
  --bs-pagination-disabled-bg: var(--lg-surface);
  --bs-pagination-disabled-color: var(--lg-text-muted);
}
[data-theme="dark"] .nav-tabs .nav-link.active, [data-theme="dark"] .nav-pills .nav-link:not(.active) { color: var(--lg-link); }