/* ===================================================================================================================
   GRC Owl - LIGHT theme (Edit Profile > Theme > Light, the default). Loaded after app.css; the <html> element carries
   class "theme-light" and every rule below is scoped to it, so the Dark theme (app.css on its own) is never touched.

   Look (design review 2026-10-15): the owl's own colours. NAVY does the work (primary buttons, links, focus, selected
   tabs); COPPER marks "you are here" only (the active sidebar item, the unread dot). Neutrals are cool greys with a slight
   navy bias; blocks are separated by hairline borders, and shadows are kept for things that float (menus, dialogs, the
   Ask Owl panel). Every colour is a token in the first block; rules below only read tokens. Native CSS nesting.
   =================================================================================================================== */
html.theme-light {
  /* ---- palette ---- */
  --x-primary: #12335e;        /* navy: primary actions, links, focus */
  --x-primary-dark: #0b2545;   /* hover/pressed navy - the logo's own */
  --x-primary-tint: #e7edf7;   /* selected rows/items, soft chips */
  --x-primary-tint-2: #d3deef; /* borders of tinted things */
  --x-copper: #a8552b;         /* the owl's rust: "you are here" */
  --x-copper-tint: #f7ebe3;
  --x-head: #0f1d33;           /* headings and data */
  --x-text: #2f3c52;           /* body text */
  --x-muted: #5d6a80;          /* labels, meta */
  --x-faint: #8a95a8;          /* group labels, placeholders */
  --x-bg: #f5f6f8;             /* canvas */
  --x-card: #ffffff;
  --x-sunk: #fafbfc;           /* table heads, input groups */
  --x-hover: #f2f5f9;          /* row/item hover */
  --x-line: #e2e6ec;           /* borders */
  --x-line-2: #eef1f5;         /* inner dividers */
  --x-input: #d5dbe4;          /* form control borders */
  --x-focus: rgba(18, 51, 94, 0.16);
  --x-float: 0 1px 2px rgba(15, 29, 51, 0.06), 0 12px 32px -8px rgba(15, 29, 51, 0.22);

  /* ---- one status map: every pill, bar, chart and legend uses these six tones ---- */
  --st-good: #1d7048;    --st-good-bg: #e3f2ea;    --st-good-fill: #2f9a64;
  --st-warn: #8d5b06;    --st-warn-bg: #fbefd6;    --st-warn-fill: #e3a630;
  --st-bad: #b3261e;     --st-bad-bg: #fbe6e3;     --st-bad-fill: #d6544a;
  --st-info: #24589f;    --st-info-bg: #e6eefa;    --st-info-fill: #4a7fd0;
  --st-neutral: #4c5970; --st-neutral-bg: #eef0f4; --st-neutral-fill: #c3cad6;
  --st-na: #6b778c;

  /* risk heat bands (score <=4, <=9, <=15, >15): tinted cells with dark numbers, only the top band solid;
     the -fill values are for charts, where a tint would be too pale */
  --heat-1: #e3f2ea; --heat-2: #f8edcd; --heat-3: #f8dcc6; --heat-4: #d6544a;
  --heat-1-ink: #1d7048; --heat-2-ink: #7a5806; --heat-3-ink: #8a4513; --heat-4-ink: #ffffff;
  --heat-1-fill: #5fb98a; --heat-2-fill: #e3bb4a; --heat-3-fill: #e3925f; --heat-4-fill: #d6544a;

  /* ---- app.css palette -> this set (every app.css rule that reads these retints) ---- */
  --ink: var(--x-primary);
  --ink-2: var(--x-text);
  --ink-dark: var(--x-primary-dark);
  --ink-soft: #5b78a6;
  --rust: var(--x-copper);
  --rust-dark: #8a4422;
  --rust-tint: var(--x-primary-tint);
  --rust-tint-strong: var(--x-primary-tint-2);
  --cream: #ffffff;
  --cream-deep: var(--x-line);
  --cream-soft: var(--x-sunk);

  --bs-body-bg: var(--x-card);   /* Bootstrap paints list groups, menus, modals with this - white; the canvas is set on body */
  --bs-body-color: var(--x-text);
  --bs-emphasis-color: var(--x-head);
  --bs-secondary-color: var(--x-muted);
  --bs-link-color: var(--x-primary);
  --bs-link-color-rgb: 18, 51, 94;
  --bs-link-hover-color: var(--x-primary-dark);
  --bs-link-hover-color-rgb: 11, 37, 69;
  --bs-border-color: var(--x-line);
  --bs-border-radius: 0.4375rem;
  --bs-border-radius-sm: 0.375rem;
  --bs-border-radius-lg: 0.5rem;
  --bs-focus-ring-color: var(--x-focus);

  --cs-open: var(--st-neutral-fill);
  --cs-in_progress: var(--st-info-fill);
  --cs-pending_auditor_review: var(--st-warn-fill);
  --cs-clarification_requested: var(--st-bad-fill);
  --cs-closed: var(--st-good-fill);
  --cs-not_applicable: #dde1e8;
  --cs-overdue: var(--st-bad-fill);
  --viz-track: #edf0f4;
  --viz-ink: var(--x-head);
  --viz-ink-2: var(--x-muted);
  --viz-muted: var(--x-faint);
  --viz-hairline: var(--x-line);

  background: var(--x-bg);

  body, body.app-body { background: var(--x-bg); color: var(--x-text); font-size: 0.9375rem; }
  h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--x-head); font-weight: 600; letter-spacing: -0.005em; }
  h3 { font-size: 1.6rem; }
  .text-muted { color: var(--x-muted) !important; }
  ::selection { background: var(--x-primary-tint-2); }
  ::-webkit-scrollbar-thumb { background: #d3d9e2; }
  ::-webkit-scrollbar-thumb:hover { background: #b9c1cd; }
  a:not(.btn):not(.dropdown-item):not(.nav-link) { text-decoration: none; }
  a:not(.btn):not(.dropdown-item):not(.nav-link):not(.x-brand):hover { text-decoration: underline; text-underline-offset: 2px; }
  :focus-visible { outline-color: var(--x-primary); }

  /* ---------- shell: white sidebar (owl on top) + white top bar + grey canvas ---------- */
  .x-shell { display: flex; min-height: 100vh; }
  .x-side {
    width: 232px; flex: 0 0 232px; background: var(--x-card); border-right: 1px solid var(--x-line);
    padding: 16px 12px 18px; overflow-y: auto; scrollbar-width: none;
  }
  .x-side::-webkit-scrollbar { width: 0; height: 0; }
  .x-brand { display: flex; align-items: center; gap: 9px; padding: 2px 6px 18px; text-decoration: none; }
  .x-brand img { width: 34px; height: 34px; object-fit: contain; flex: none; }
  .x-brand .x-name { font-size: 1.1rem; font-weight: 700; color: var(--x-head); letter-spacing: -0.01em; line-height: 1; white-space: nowrap; }
  .x-brand .instance-badge { margin-left: auto; }
  .instance-badge {
    background: var(--st-warn-bg) !important; color: var(--st-warn) !important; border: 0 !important;
    border-radius: 4px !important; font-weight: 700; font-size: 0.64rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.25em 0.5em;
  }

  .app-sidebar { width: auto; background: transparent; color: var(--x-text); overflow: visible; }
  .sidebar-inner { padding: 0; }
  .sidebar-group { margin-bottom: 0.85rem; }
  .sidebar-group-label { color: var(--x-faint); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.09em; padding: 0.15rem 0.6rem 0.3rem; }
  .app-sidebar .nav-link {
    position: relative; color: #3d4a60; padding: 0.42rem 0.6rem; border-left: 0; border-radius: 6px; gap: 0.6rem; font-weight: 500; font-size: 0.9rem; margin-bottom: 1px;
  }
  .app-sidebar .nav-link .bi { font-size: 1rem; color: #7b879b; }
  .app-sidebar .nav-link:hover { background: var(--x-hover); color: var(--x-head); }
  .app-sidebar .nav-link.active { background: var(--x-primary-tint); color: var(--x-primary); font-weight: 600; border-left: 0; }
  .app-sidebar .nav-link.active::before { content: ""; position: absolute; left: -12px; top: 7px; bottom: 7px; width: 3px; border-radius: 0 3px 3px 0; background: var(--x-copper); }
  .app-sidebar .nav-link.active .bi, .app-sidebar .nav-link:hover .bi { color: var(--x-primary); }
  .sidebar-edge-toggle { background: var(--x-card); color: var(--x-muted); border-color: var(--x-line); box-shadow: 0 1px 2px rgba(15, 29, 51, 0.1); }
  .sidebar-edge-toggle:hover { background: var(--x-hover); color: var(--x-primary); }

  .x-col { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
  .x-top {
    height: 60px; flex: 0 0 60px; display: flex; align-items: center; gap: 8px; padding: 0 28px;
    background: var(--x-card); border-bottom: 1px solid var(--x-line); position: relative; z-index: 20;
  }
  .x-toggler { border: 1px solid var(--x-line); background: var(--x-card); border-radius: 7px; color: var(--x-head); font-size: 1.3rem; line-height: 1; padding: 0.3rem 0.55rem; }
  .app-main { padding: 24px 28px 88px; }   /* bottom room so the Ask Owl button never covers the last row */
  .app-main > .container-fluid { padding-left: 0; padding-right: 0; max-width: 1440px; }

  /* page titles: the serif, used for this one role only */
  .app-main h3 { font-family: var(--font-serif); font-weight: 600; font-size: 1.75rem; letter-spacing: -0.01em; line-height: 1.2; }

  /* top-bar tools: search, bell, account */
  .app-search { margin-left: 0; flex: 1 1 320px; max-width: 440px; }
  .app-search-icon { color: var(--x-faint); left: 0.75rem; }
  .app-search-input.form-control {
    height: 38px; padding-left: 2.2rem; color: var(--x-head); background: var(--x-bg); border: 1px solid var(--x-line); border-radius: 7px; font-size: 0.9rem;
  }
  .app-search-input.form-control::placeholder { color: var(--x-faint); }
  .app-search-input.form-control:focus { background: var(--x-card); border-color: var(--x-primary); box-shadow: 0 0 0 0.2rem var(--x-focus); color: var(--x-head); }
  .app-search-panel { border-radius: 8px; box-shadow: var(--x-float); }
  .app-search-item:hover, .app-search-item.active { background: var(--x-primary-tint); }
  .btn-navbar-icon {
    color: #4c5970; border: 0; background: transparent; border-radius: 7px; display: inline-flex; align-items: center; gap: 0.55rem; font-size: 1.05rem;
  }
  .btn-navbar-icon:hover, .btn-navbar-icon:focus, .btn-navbar-icon.show { color: var(--x-primary); background: var(--x-hover); border: 0; }
  .btn-navbar-icon.dropdown-toggle { padding: 3px 8px 3px 3px; border-radius: 999px; color: var(--x-head); font-weight: 600; font-size: 0.875rem; }
  .btn-navbar-icon.dropdown-toggle::after { color: var(--x-muted); }
  .x-avatar {
    width: 32px; height: 32px; border-radius: 50%; background: var(--x-primary); color: #fff;
    display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.75rem;
  }
  .navbar-avatar { width: 32px; height: 32px; margin: 0; vertical-align: middle; }
  .x-uname { display: inline-block; text-align: left; line-height: 1.15; }
  .x-uname small { display: block; font-weight: 500; color: var(--x-muted); font-size: 0.72rem; }

  /* collapsed sidebar: a slim strip with just the owl and the icons */
  body.sidebar-collapsed .x-side { width: 68px; flex-basis: 68px; padding-left: 10px; padding-right: 10px; }
  body.sidebar-collapsed .x-brand { justify-content: center; padding-left: 0; padding-right: 0; }
  body.sidebar-collapsed .x-brand img { width: 32px; height: 32px; }
  body.sidebar-collapsed .x-brand .x-name, body.sidebar-collapsed .x-brand .instance-badge { display: none; }
  body.sidebar-collapsed .app-sidebar { width: auto; }
  body.sidebar-collapsed .app-sidebar .nav-link.active::before { left: -10px; }

  /* ---------- cards: hairline border, no resting shadow ---------- */
  .card { background: var(--x-card); border: 1px solid var(--x-line); border-radius: 8px; box-shadow: none; }
  .card:hover { box-shadow: none; }
  .card-body { padding: 1.1rem 1.25rem; }
  .card-header { background: transparent; border-bottom: 1px solid var(--x-line-2); font-weight: 600; color: var(--x-head); padding: 0.75rem 1.25rem; }
  .card-footer { background: transparent; border-top: 1px solid var(--x-line-2); }
  .card-title, .viz-title { color: var(--x-head); font-weight: 600; font-size: 1rem; }
  .card-treatment { background: var(--x-card); border: 1px solid var(--x-line); border-left: 3px solid var(--x-primary); }
  .card-treatment .card-title { color: var(--x-primary); }
  .modal-content { border: 1px solid var(--x-line); border-radius: 10px; box-shadow: var(--x-float); }

  /* ---------- dashboard: KPI tiles (label, big tabular number), heatmap, chart ---------- */
  /* each tile has a tone (risks red, action items blue, issues amber, audits violet) shown by its icon badge */
  .kpi-card, .kpi-bg-1, .kpi-bg-2, .kpi-bg-3, .kpi-bg-4 { background: var(--x-card) !important; color: var(--x-head); position: relative; padding: 1rem 4.5rem 1rem 1.25rem !important; border-radius: 12px; box-shadow: 0 1px 2px rgba(15, 29, 51, 0.05), 0 4px 14px -6px rgba(15, 29, 51, 0.12); transition: border-color .15s, box-shadow .15s, transform .15s; }
  .kpi-bg-1 { --kpi-fg: var(--st-bad);  --kpi-bg: var(--st-bad-bg); }
  .kpi-bg-2 { --kpi-fg: var(--st-info); --kpi-bg: var(--st-info-bg); }
  .kpi-bg-3 { --kpi-fg: var(--st-warn); --kpi-bg: var(--st-warn-bg); }
  .kpi-bg-4 { --kpi-fg: #6941c6;        --kpi-bg: #efeafb; }
  .kpi-card .kpi-label { color: var(--x-muted); opacity: 1; font-size: 0.9rem; font-weight: 500; }
  .kpi-card .kpi-value { color: var(--x-head); font-size: 2.25rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; margin-top: 0.15rem; font-variant-numeric: tabular-nums; }
  .kpi-card:hover { border-color: var(--x-primary-tint-2); box-shadow: 0 2px 4px rgba(15, 29, 51, 0.06), 0 10px 24px -8px rgba(15, 29, 51, 0.2); transform: translateY(-1px); }
  .kpi-ico { display: flex; align-items: center; justify-content: center; position: absolute; top: 1rem; right: 1.1rem; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--kpi-bg); color: var(--kpi-fg); font-size: 1.25rem; }
  @media (prefers-reduced-motion: reduce) { .kpi-card { transition: none; } .kpi-card:hover { transform: none; } }
  .heatmap-table { border-spacing: 3px; }
  .heatmap-cell { border-radius: 4px; width: 56px; height: 38px; font-weight: 600; font-variant-numeric: tabular-nums; }
  .heatmap-cell:not(:has(a)) { opacity: 0.4; }   /* empty cells recede, so the eye goes to where the risks are */
  .chart-box { max-width: 280px; margin: 0 auto; }

  /* page header (title + actions): wraps instead of squeezing the title into the date or buttons */
  .app-main > .container-fluid > .d-flex:has(> h3) { flex-wrap: wrap; gap: 0.75rem 1rem; }
  .app-main > .container-fluid > .d-flex:has(> h3) > .d-flex { flex-wrap: wrap; justify-content: flex-end; }
  .app-main > .container-fluid > .d-flex:has(> h3) .btn { white-space: nowrap; }

  /* ---------- buttons: primary / secondary / ghost / danger; no glow, no lift ---------- */
  .btn { border-radius: 7px; font-weight: 600; }
  .btn-primary { --bs-btn-bg: var(--x-primary); --bs-btn-border-color: var(--x-primary); --bs-btn-hover-bg: var(--x-primary-dark); --bs-btn-hover-border-color: var(--x-primary-dark); --bs-btn-active-bg: var(--x-primary-dark); --bs-btn-active-border-color: var(--x-primary-dark); --bs-btn-disabled-bg: var(--x-primary); --bs-btn-disabled-border-color: var(--x-primary); box-shadow: none; }
  .btn-primary:hover:not(:disabled) { transform: none; }
  .btn-outline-primary, .btn-outline-secondary, .btn-outline-dark, .btn-light {
    --bs-btn-color: var(--x-head); --bs-btn-bg: var(--x-card); --bs-btn-border-color: var(--x-input);
    --bs-btn-hover-bg: var(--x-hover); --bs-btn-hover-color: var(--x-head); --bs-btn-hover-border-color: #c3cad6;
    --bs-btn-active-bg: var(--x-primary-tint); --bs-btn-active-color: var(--x-primary); --bs-btn-active-border-color: var(--x-primary-tint-2);
    --bs-btn-disabled-color: var(--x-faint); --bs-btn-disabled-bg: var(--x-card); --bs-btn-disabled-border-color: var(--x-line);
  }
  .btn-outline-danger { --bs-btn-color: var(--st-bad); --bs-btn-bg: var(--x-card); --bs-btn-border-color: #efc3bd; --bs-btn-hover-bg: var(--st-bad-bg); --bs-btn-hover-color: var(--st-bad); --bs-btn-hover-border-color: #e8aaa2; --bs-btn-active-bg: var(--st-bad-bg); --bs-btn-active-color: var(--st-bad); }
  .btn-outline-success { --bs-btn-color: var(--st-good); --bs-btn-bg: var(--x-card); --bs-btn-border-color: #bcdcc9; --bs-btn-hover-bg: var(--st-good-bg); --bs-btn-hover-color: var(--st-good); --bs-btn-hover-border-color: #a3cfb5; --bs-btn-active-bg: var(--st-good-bg); --bs-btn-active-color: var(--st-good); }
  .btn-outline-warning { --bs-btn-color: var(--st-warn); --bs-btn-bg: var(--x-card); --bs-btn-border-color: #ecd49b; --bs-btn-hover-bg: var(--st-warn-bg); --bs-btn-hover-color: var(--st-warn); --bs-btn-hover-border-color: #e3c47a; }
  /* workflow transitions (Mark as resolved, Close issue, Submit, Approve) are next steps: they share the primary style */
  .btn-success, .btn-dark, .btn-info { --bs-btn-color: #fff; --bs-btn-bg: var(--x-primary); --bs-btn-border-color: var(--x-primary); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--x-primary-dark); --bs-btn-hover-border-color: var(--x-primary-dark); --bs-btn-active-bg: var(--x-primary-dark); --bs-btn-active-border-color: var(--x-primary-dark); }
  .btn-danger { --bs-btn-bg: var(--st-bad); --bs-btn-border-color: var(--st-bad); --bs-btn-hover-bg: #93201a; --bs-btn-hover-border-color: #93201a; --bs-btn-active-bg: #93201a; }
  .btn-warning { --bs-btn-bg: var(--st-warn-fill); --bs-btn-border-color: var(--st-warn-fill); --bs-btn-hover-bg: #cf9420; --bs-btn-hover-border-color: #cf9420; --bs-btn-color: #3d2700; --bs-btn-hover-color: #3d2700; }
  .btn-link { --bs-btn-color: var(--x-primary); --bs-btn-hover-color: var(--x-primary-dark); }
  .btn-sm { border-radius: 6px; }

  /* ---------- forms ---------- */
  .form-control, .form-select { border: 1px solid var(--x-input); border-radius: 7px; background-color: var(--x-card); color: var(--x-head); }
  .form-control:disabled, .form-select:disabled { background-color: var(--x-sunk); }
  .form-control:focus, .form-select:focus { border-color: var(--x-primary); box-shadow: 0 0 0 0.2rem var(--x-focus); }
  .form-control::placeholder { color: var(--x-faint); }
  .form-label, .filter-bar label { color: var(--x-muted); font-weight: 600; }
  .form-label { font-size: 0.85rem; }
  .filter-bar label { font-size: 0.7rem; }
  .form-check-input:checked { background-color: var(--x-primary); border-color: var(--x-primary); }
  .input-group-text { background: var(--x-sunk); border-color: var(--x-input); color: var(--x-muted); }
  .tagpicker, .richtext-editor { border-color: var(--x-input); border-radius: 7px; }
  .filedrop-zone { background: var(--x-sunk); border-color: var(--x-input); border-radius: 8px; }

  /* ---------- tables: quiet heads, tabular numbers, resize handles only on hover ---------- */
  .table { --bs-table-bg: transparent; --bs-table-color: var(--x-text); --bs-table-border-color: var(--x-line-2); --bs-table-hover-bg: var(--x-hover); --bs-table-striped-bg: var(--x-sunk); margin-bottom: 0; font-variant-numeric: tabular-nums; }
  .table > :not(caption) > * > * { padding: 0.55rem 0.6rem; border-bottom-color: var(--x-line-2); }
  .table thead th, .table > thead > tr > th { color: var(--x-muted); font-weight: 600; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; background: var(--x-sunk); border-bottom: 1px solid var(--x-line); white-space: nowrap; }
  .table thead.table-light th, .table-light { --bs-table-bg: var(--x-sunk); --bs-table-color: var(--x-muted); }
  .table tbody tr:last-child > * { border-bottom: 0; }
  .table td a:not(.btn):not(.badge) { font-weight: 600; }
  .card > .table-responsive, .card > .table, .card .table-responsive { border-radius: 0 0 8px 8px; }
  .catalogue-table thead th { background: var(--x-sunk); }
  .catalogue-table tbody tr:hover { background: var(--x-hover); }
  .grid-resizer::after { background: transparent; }
  th:hover > .grid-resizer::after, .grid-resizer.is-active::after { background: var(--x-primary); }

  /* ---------- badges / pills: the status map's tints with strong text ---------- */
  .badge { font-weight: 600; border-radius: 999px; padding: 0.34em 0.75em; font-size: 0.72rem; letter-spacing: 0.01em; }
  .badge.text-bg-success, .badge.bg-success { background: var(--st-good-bg) !important; color: var(--st-good) !important; }
  .badge.text-bg-danger, .badge.bg-danger { background: var(--st-bad-bg) !important; color: var(--st-bad) !important; }
  .badge.text-bg-warning, .badge.bg-warning { background: var(--st-warn-bg) !important; color: var(--st-warn) !important; }
  .badge.text-bg-primary, .badge.bg-primary, .badge.text-bg-info, .badge.bg-info { background: var(--st-info-bg) !important; color: var(--st-info) !important; }
  .badge.text-bg-secondary, .badge.bg-secondary, .badge.text-bg-light, .badge.text-bg-dark, .badge.bg-dark { background: var(--st-neutral-bg) !important; color: var(--st-neutral) !important; }
  .badge.badge-treat-accept { background: #efe9f8 !important; color: #5b3a96 !important; } /* Accept: violet, so it never reads as Mitigate's blue */
  .badge.text-bg-light.border { border: 1px solid var(--x-line) !important; }
  .badge.text-dark { color: var(--st-neutral) !important; }
  .cs-badge { border: 0; font-weight: 600; font-size: 0.74rem; padding: 0.2rem 0.7rem; background: var(--st-neutral-bg); color: var(--st-neutral); }
  .cs-badge .cs-dot { width: 0.4rem; height: 0.4rem; background: currentColor !important; }
  .cs-open { background: var(--st-neutral-bg); color: var(--st-neutral); }
  .cs-in_progress { background: var(--st-info-bg); color: var(--st-info); }
  .cs-pending_auditor_review, .cs-pending { background: var(--st-warn-bg); color: var(--st-warn); }
  .cs-clarification_requested, .cs-overdue { background: var(--st-bad-bg); color: var(--st-bad); }
  .cs-closed, .cs-resolved, .cs-completed, .cs-approved { background: var(--st-good-bg); color: var(--st-good); }
  .cs-not_applicable { background: transparent; color: var(--st-na); box-shadow: inset 0 0 0 1px var(--x-input); }
  .cl-chip { border: 1px solid var(--x-line); background: var(--x-card); border-radius: 999px; }
  .cl-chip:hover { background: var(--x-hover); }
  .cl-chip.is-active { background: var(--x-primary); border-color: var(--x-primary); color: #fff; }
  .mention, .richtext-view .mention, .tagpicker-chip { background: var(--x-primary-tint); color: var(--x-primary); }

  /* ---------- tabs, pills, pagination, dropdowns, alerts, progress ---------- */
  .nav-tabs { border-bottom: 1px solid var(--x-line); gap: 0.25rem; }
  .nav-tabs .nav-link { border: 0; border-bottom: 2px solid transparent; color: var(--x-muted); font-weight: 600; padding: 0.6rem 0.9rem; border-radius: 0; background: transparent; }
  .nav-tabs .nav-link:hover { color: var(--x-head); border-bottom-color: var(--x-line); }
  .nav-tabs .nav-link.active { color: var(--x-head); background: transparent; border-bottom-color: var(--x-primary); }
  .nav-pills { --bs-nav-pills-link-active-bg: var(--x-primary); }
  .nav-pills .nav-link { border-radius: 7px; color: var(--x-muted); font-weight: 600; }
  .nav-pills .nav-link:hover { background: var(--x-hover); color: var(--x-head); }
  .nav-pills .nav-link.active, .nav-pills .show > .nav-link { background: var(--x-primary); color: #fff; }
  .nav-pills .nav-link.active .badge { background: rgba(255, 255, 255, 0.2) !important; color: #fff !important; }
  .pagination { --bs-pagination-active-bg: var(--x-primary); --bs-pagination-active-border-color: var(--x-primary); --bs-pagination-color: var(--x-primary); --bs-pagination-border-color: var(--x-line); --bs-pagination-border-radius: 7px; --bs-pagination-hover-bg: var(--x-hover); }
  .dropdown-menu { border: 1px solid var(--x-line); border-radius: 8px; box-shadow: var(--x-float); --bs-dropdown-link-active-bg: var(--x-primary); --bs-dropdown-link-hover-bg: var(--x-hover); }
  .alert { border-radius: 8px; border: 1px solid transparent; }
  .alert-info, .alert-primary { background: var(--st-info-bg); color: var(--st-info); border-color: #cddcf3; }
  .alert-warning { background: var(--st-warn-bg); color: var(--st-warn); border-color: #f1dca8; }
  .alert-success { background: var(--st-good-bg); color: var(--st-good); border-color: #c4e2d0; }
  .alert-danger { background: var(--st-bad-bg); color: var(--st-bad); border-color: #f2c9c3; }
  .alert-secondary, .alert-light { background: var(--x-sunk); color: var(--x-text); border-color: var(--x-line); }
  .list-group-item { border-color: var(--x-line-2); }
  .progress { background: var(--viz-track); border-radius: 999px; height: 0.5rem; }
  .progress-bar { background: var(--x-primary); }
  .viz-tile { border-radius: 8px; background: var(--x-card); border: 1px solid var(--x-line); }
  .viz-tile-value, .viz-hero, .viz-row-value, .custom-chart-number-value { font-variant-numeric: tabular-nums; }
  .viz-meter, .viz-meter-fill { border-radius: 999px; }
  .viz-meter-fill.is-evidence { background: var(--x-primary); }
  .viz-stack { height: 10px; }
  .viz-seg:last-child { border-radius: 0 999px 999px 0; }
  .viz-stack .viz-seg:first-child { border-radius: 999px 0 0 999px; }
  .viz-stack .viz-seg:only-child { border-radius: 999px; }
  .profile-avatar { border-color: var(--x-line); }
  code, kbd { font-family: var(--font-mono); color: var(--x-head); background: var(--st-neutral-bg); border-radius: 4px; padding: 0.1em 0.35em; font-size: 0.86em; }
  hr { border-color: var(--x-line); opacity: 1; }
  .border, .border-top, .border-bottom, .border-start, .border-end { border-color: var(--x-line) !important; }
  .bg-light { background: var(--x-sunk) !important; }
  .comment-avatar { background: var(--x-primary-tint); color: var(--x-primary); }
  .comment-main { background: var(--x-sunk); border-color: var(--x-line); }
  .upc-list, .upc-empty { border-radius: 8px; }
  .upc-row:hover .upc-title { color: var(--x-primary); }
  .upc-date.upc-later { background: var(--x-primary-tint); color: var(--x-primary); }

  /* ---------- Ask Owl: a smaller button that doesn't sit on the table ---------- */
  .owl-fab { width: 48px; height: 48px; border: 1px solid var(--x-line); background: var(--x-card); box-shadow: var(--x-float); }
  .owl-fab:hover { border-color: var(--x-primary); box-shadow: var(--x-float); }
  .owl-fab img { width: 32px; height: 32px; }
  .owl-panel { border-color: var(--x-line); border-radius: 10px; box-shadow: var(--x-float); }
  .owl-head { background: var(--x-primary); }
  .owl-log { background: var(--x-bg); }
  .owl-msg.me { background: var(--x-primary); }
  .owl-msg.owl { border-color: var(--x-line); color: var(--x-text); }
  .owl-item { border-color: var(--x-line); border-left-color: var(--x-copper); }
  .owl-item:hover { background: var(--x-hover); }
  .owl-item small, .owl-typing, .owl-ai-note, .owl-page-hint { color: var(--x-muted); }
  .owl-chip { border-color: var(--x-input); color: var(--x-primary); }
  .owl-chip:hover { background: var(--x-primary); color: #fff; }
  .owl-form { border-top-color: var(--x-line); }
  .owl-input { border-color: var(--x-input); }
  .owl-input:focus { border-color: var(--x-primary); box-shadow: 0 0 0 3px var(--x-focus); }
  .owl-send { background: var(--x-primary); }
}

/* ---------- desktop: the top bar stays put; only the page (and the sidebar, if it is tall) scrolls ---------- */
@media (min-width: 992px) {
  html.theme-light .x-shell { flex: 1 1 auto; min-height: 0; overflow: hidden; }
  html.theme-light .x-col { min-height: 0; }
  html.theme-light .x-side { height: auto; }
  html.theme-light .app-main { flex: 1 1 auto; min-height: 0; }
}
/* ---------- phones and tablets: the sidebar stacks above the page and opens with the menu button ---------- */
@media (max-width: 991.98px) {
  html.theme-light .x-shell { flex-direction: column; min-height: 0; }
  html.theme-light .x-side { width: auto; flex: none; border-right: 0; border-bottom: 1px solid var(--x-line); padding: 12px 14px; }
  html.theme-light .x-brand { padding-bottom: 8px; }
  html.theme-light .x-top { padding: 0 16px; height: auto; flex-basis: auto; min-height: 56px; flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; }
  html.theme-light .app-main { padding: 16px 16px 80px; }
  html.theme-light .app-search { flex: 1 1 160px; }
}
@media (max-width: 767.98px) {
  html.theme-light .x-uname { display: none; }
}

/* ---------- sign-in, forgot/reset password, 2FA, vendor portal (no signed-in user): plain canvas, white card ---------- */
html.theme-light .auth-wrapper { background: var(--x-bg); }
html.theme-light .auth-card { border: 1px solid var(--x-line); border-radius: 10px; box-shadow: 0 1px 2px rgba(15, 29, 51, 0.05), 0 20px 48px -24px rgba(15, 29, 51, 0.25) !important; }
html.theme-light .auth-card .btn { padding: 0.6rem 1rem; }
html.theme-light .auth-card .form-control { padding: 0.6rem 0.8rem; }