/* ============================================================
   Global overflow and positioning.
   overflow-x: clip removes any horizontal page scrollbar caused by
   child bleed (negative margins, edge glows, wide content) so every
   page fits the viewport horizontally. overflow-y stays visible so
   vertical glows still paint and the page scrolls vertically as normal.
   `clip` (not hidden) is required: with overflow-x:clip the y axis is
   allowed to remain visible, whereas hidden would force it to auto.
   Intentionally-wide regions scroll inside their own containers
   (.table-responsive, the Kanban board #pipelineBoard), so they are
   unaffected by this clip.
   ============================================================ */
html, body, #omniroq-main-wrap {
    overflow-x: clip !important;
    overflow-y: visible !important;
}

/* ============================================================
   Sidebar z-index — ensure sidebar appears above dropdowns
   ============================================================ */
.offcanvas {
    z-index: 1050 !important;
}

/* ============================================================
   Omniroq brand wordmark — Michroma, split OMNI/ROQ tones
   Used next to the icon in navbar and auth pages.
   ============================================================ */
.omniroq-wordmark {
    font-family: 'Michroma', 'Orbitron', 'Exo 2', Arial, sans-serif;
    font-weight: 400;
    color: var(--omniroq-brand-name-color, #ffffff);
    letter-spacing: 0.01em;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    user-select: none;
    text-transform: uppercase;
    white-space: nowrap;
}

.omniroq-brand-lockup {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    transition: transform var(--o-dur) var(--o-ease), filter var(--o-dur) var(--o-ease);
    transform-origin: center center;
    will-change: transform;
}

.omniroq-brand-lockup {
    transition: transform var(--o-dur) var(--o-ease),
                filter var(--o-dur) var(--o-ease);
    transform-origin: left center;
    will-change: transform, filter;
}

.omniroq-brand-icon,
.omniroq-wordmark,
.omniroq-wordmark-omni,
.omniroq-wordmark-roq {
    transition: color var(--o-dur) var(--o-ease), filter var(--o-dur) var(--o-ease), opacity var(--o-dur) var(--o-ease);
}

.omniroq-brand-lockup:hover,
.omniroq-brand-lockup:focus-within,
.navbar-brand:hover .omniroq-brand-lockup,
.navbar-brand:focus-visible .omniroq-brand-lockup {
    transform: scale(var(--omniroq-hover-pop-scale, 1.03));
    filter: var(--omniroq-hover-glow-filter);
}

.omniroq-brand-icon {
    display: block;
    flex: 0 0 auto;
}

.omniroq-wordmark-omni {
    color: var(--omniroq-brand-name-color, #ffffff);
}

.omniroq-wordmark-roq {
    color: var(--omniroq-brand-name-color, #f1f3f5);
}

/* ============================================================
   Omniroq logo — drawn, not typed (core/brand.py, core/brand_lockup.html).
   --omniroq-logo-ink is the theme accent, or "Brand name color" when one is
   chosen. On a light surface a chosen colour too pale to see gives way to
   the accent: the theme style writes --omniroq-brand-ink-on-light only for
   a colour that reads there.
   ============================================================ */
:root,
[data-bs-theme="dark"] {
    --omniroq-logo-ink: var(--omniroq-brand-name-color, var(--omniroq-accent, var(--bs-primary)));
}

[data-bs-theme="light"] {
    --omniroq-logo-ink: var(--omniroq-brand-ink-on-light, var(--omniroq-accent, var(--bs-primary)));
}

.omniroq-logo {
    display: block;
    flex: 0 0 auto;
    height: var(--omniroq-brand-h, 26px);
    width: auto;
    aspect-ratio: 2010 / 508;
    color: var(--omniroq-logo-ink);
    fill: currentColor;
    overflow: visible;
    transition: color var(--o-dur) var(--o-ease);
}

.omniroq-logo-mark {
    aspect-ratio: 654 / 498;
}

/* A white-labelled name's initial, where the name has no room. */
.omniroq-monogram {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    height: var(--omniroq-brand-h, 26px);
    aspect-ratio: 1;
    border-radius: 28%;
    background: var(--omniroq-logo-ink);
    color: var(--omniroq-accent-contrast, var(--bs-dark));
    font-weight: 700;
    font-size: calc(var(--omniroq-brand-h, 26px) * 0.56);
    line-height: 1;
}

/* The short form stands in where the long one has no room: the collapsed
   sidebar, and a phone where the lockup asks for it (hide_wordmark_mobile). */
.omniroq-brand-short-only {
    display: none !important;
}

body.olsb-collapsed #omniroq-left-sidebar .omniroq-brand-short-only {
    display: block !important;
}

body.olsb-collapsed #omniroq-left-sidebar .omniroq-monogram.omniroq-brand-short-only {
    display: inline-flex !important;
}

body.olsb-collapsed #omniroq-left-sidebar .omniroq-logo-full {
    display: none !important;
}

@media (max-width: 575.98px) {
    .omniroq-brand-short-xs .omniroq-brand-short-only {
        display: block !important;
    }

    .omniroq-brand-short-xs .omniroq-monogram.omniroq-brand-short-only {
        display: inline-flex !important;
    }

    .omniroq-brand-short-xs .omniroq-logo-full {
        display: none !important;
    }
}

/* ── Omniroq unified tooltip style ───────────────────────────────────────── */
.tooltip,
.tooltip.omniroq-tooltip {
    --bs-tooltip-opacity: 1;
    z-index: 5000 !important;
    pointer-events: none;
}

.tooltip.show,
.tooltip.omniroq-tooltip.show {
    opacity: 1;
}

.tooltip .tooltip-inner,
.tooltip.omniroq-tooltip .tooltip-inner {
    background: rgba(12, 14, 18, 0.94);
    color: #e8eef7;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.76rem;
    font-weight: 500;
    border: 1px solid rgba(255,255,255,0.10);
    box-shadow: 0 4px 14px rgba(0,0,0,0.45);
    max-width: none;
    white-space: nowrap;
    letter-spacing: 0;
    line-height: 1.25;
    text-align: left;
    position: relative;
    z-index: 5000;
    --bs-tooltip-bg: rgba(12,14,18,0.94);
    --bs-tooltip-color: #e8eef7;
}

.tooltip .tooltip-arrow,
.tooltip.omniroq-tooltip .tooltip-arrow {
    display: none;
}

body[data-bs-theme="light"] .tooltip .tooltip-inner,
body[data-bs-theme="light"] .tooltip.omniroq-tooltip .tooltip-inner {
    background: rgba(255,255,255,0.96);
    color: #1d2733;
    border-color: rgba(0,0,0,0.10);
    box-shadow: 0 4px 14px rgba(15,23,42,0.12);
    --bs-tooltip-bg: rgba(255,255,255,0.96);
    --bs-tooltip-color: #1d2733;
}

/* ============================================================
   ROOT-LEVEL override of Bootswatch Minty "secondary" palette.
   Redefines CSS custom-properties so EVERY Bootstrap utility
   (border-secondary, bg-secondary, text-secondary …) resolves
   to teal instead of the default pink/salmon #f3969a.
   ============================================================ */
/* ============================================================
   DESIGN TOKENS (Stage 2a) — the single vocabulary every
   component and page style should consume. Raw px/hex values in
   selectors below this block are legacy debt (burned down through
   Stage 11); new CSS must reference tokens.
   ============================================================ */
:root {
    /* Spacing scale (4px base) */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 24px;
    --sp-6: 32px;
    --sp-7: 48px;
    --sp-8: 64px;
    --sp-9: 96px;

    /* Typography scale */
    --fs-xs: 0.75rem;
    --fs-sm: 0.875rem;
    --fs-md: 1rem;
    --fs-lg: 1.125rem;
    --fs-xl: 1.375rem;
    --fs-2xl: 1.75rem;
    --fs-3xl: 2.25rem;
    --fw-normal: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --lh-tight: 1.25;
    --lh-normal: 1.5;
    --lh-loose: 1.75;

    /* Radius (base follows the tenant appearance setting) */
    --radius-sm: calc(var(--omniroq-border-radius, 4px) * 0.5);
    --radius-md: var(--omniroq-border-radius, 4px);
    --radius-lg: calc(var(--omniroq-border-radius, 4px) * 2);
    --radius-pill: 50rem;

    /* Elevation */
    --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.25);
    --shadow-2: 0 4px 14px rgba(0, 0, 0, 0.30);
    --shadow-3: 0 12px 34px rgba(0, 0, 0, 0.40);

    /* Z-index ladder — never invent ad-hoc z-index values */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-overlay: 1040;
    --z-modal: 1055;
    --z-toast: 1090;

    /* Motion — THE app easing + speed. Every transition/animation must use
       these so the tenant "animation speed" setting governs everything.
       --omniroq-hover-transition is set by body.omniroq-speed-* classes. */
    --o-ease: cubic-bezier(.2, .85, .2, 1);
    --o-dur: var(--omniroq-hover-transition, 1s);

    /* Focus ring (Stage 7 a11y completion). The app had ~89 :focus-visible
       rules but almost all of them just reused the *hover* treatment — a
       colour shift and a scale pop. That is not a focus indicator: a keyboard
       user cannot tell "focused" from "the mouse happens to be here", and it
       fails WCAG 2.4.7. This is the one ring, and it is applied as an outline
       so it never affects layout and always sits outside the element's own
       border/background. */
    --o-focus-ring-width: 2px;
    --o-focus-ring-offset: 2px;
    --o-focus-ring-color: var(--omniroq-accent, #78c2ad);

    /* Semantic status colors (icon+color pairs; never color-only) */
    --status-success: #4cd07d;
    --status-success-bg: rgba(76, 208, 125, 0.14);
    --status-warning: #f5b942;
    --status-warning-bg: rgba(245, 185, 66, 0.14);
    /* #ef6461 and #9aa7b5 measured 3.79:1 and 4.36:1 against the status-badge
       tint at 12px/600 — both AA failures. Lightened just enough to clear 4.5. */
    --status-danger: #f2807d;
    --status-danger-bg: rgba(239, 100, 97, 0.14);
    --status-info: #58aef4;
    --status-info-bg: rgba(88, 174, 244, 0.14);
    --status-neutral: #a6b2bf;
    --status-neutral-bg: rgba(154, 167, 181, 0.16);
}

[data-bs-theme="light"] {
    --shadow-1: 0 1px 3px rgba(15, 23, 42, 0.10);
    --shadow-2: 0 4px 14px rgba(15, 23, 42, 0.12);
    --shadow-3: 0 12px 34px rgba(15, 23, 42, 0.16);
    /* Status text sits at 12px/600 on a 12%-alpha tint of its own hue, which is
       a lighter background than plain white — so these have to be darker than
       they look like they need to be. The previous set measured, on /leads/:
       warning 2.61:1, danger 3.30:1, info 3.36:1, neutral 4.25:1 — 45 AA
       failures on one page. Values below clear 4.5:1 against that tint.

       success re-measured: #12703c cleared the tint over a card (4.66:1) but
       came out at 4.32:1 over the darker list-row surface on /clients/. The
       tint is translucent, so the row underneath moves the real backdrop and
       the badge has to clear the darkest one it can land on, not the lightest.
       #0f6034 measures 5.80:1 there, leaving headroom for the other surfaces. */
    --status-success: #0f6034;
    --status-success-bg: rgba(29, 158, 84, 0.12);
    --status-warning: #7a5100;
    --status-warning-bg: rgba(176, 122, 16, 0.12);
    --status-danger: #a52724;
    --status-danger-bg: rgba(202, 63, 60, 0.12);
    --status-info: #1b5da8;
    --status-info-bg: rgba(34, 114, 196, 0.12);
    --status-neutral: #3d4a58;
    --status-neutral-bg: rgba(79, 96, 113, 0.14);
}

:root,
:root[data-bs-theme],
[data-bs-theme="dark"],
[data-bs-theme="light"] {
    --bs-secondary: var(--omniroq-accent, #78c2ad);
    --bs-secondary-rgb: var(--omniroq-accent-rgb, 120, 194, 173);
    /* Fallback ratio, used when the size-normaliser has not run (no JS, or
       the pointer has not reached the element yet). hover_normalise.js replaces
       this per element with a ratio computed from that element's size, so every
       element grows by the same NUMBER OF PIXELS instead of the same
       percentage — see that file for why. */
    --omniroq-hover-pop-scale: 1.02;
    /* Target growth in px for the pop, per hover mode. */
    --o-hover-growth: 6px;
    --omniroq-navbar-pop-scale: 1.03;
    --omniroq-hover-glow-box: none;
    --omniroq-hover-glow-filter: drop-shadow(0 0 10px rgba(var(--omniroq-accent-rgb, 120,194,173),0.28)) drop-shadow(0 0 20px rgba(var(--omniroq-accent-rgb, 120,194,173),0.15));
    --omniroq-dropdown-bg: #212529;
    --omniroq-dropdown-text: #c8cdd3;
    --omniroq-dropdown-border: rgba(160,169,184,0.35);
    --omniroq-dropdown-shadow: 0 6px 20px rgba(0,0,0,0.45);
    --omniroq-light-body-bg: #dde4ec;
    --omniroq-light-surface-1: #e8eef4;
    --omniroq-light-surface-2: #dde5ee;
    --omniroq-light-surface-3: #d1dbe6;
    --omniroq-light-border: rgba(97, 114, 132, 0.34);
    --omniroq-light-border-strong: rgba(97, 114, 132, 0.48);
    --omniroq-light-text: #1d2733;
    --omniroq-light-muted: #4f6071;

    /* The accent as *text*. Identical to the accent on dark surfaces, which is
       what it was designed for; darkened on light ones, where mint measures
       ~1.6:1 against white and fails AA badly. Measured on /leads/ in light
       mode before this existed: every lead-name link 1.63:1, the sidebar
       section labels 1.93:1, the toolbar buttons 1.78:1 — 130 failures on one
       page against 12 in dark. The app was built dark-first and light mode
       inherited a colour that only ever worked on dark.

       Kept as its own token rather than redefining --omniroq-accent, because
       the accent is also used as a *background* (with dark text on top), and
       that pairing is correct in both themes and must not move. */
    --omniroq-accent-text: var(--omniroq-accent, #78c2ad);
}

/* Mixed toward black so accent-coloured text tracks a re-themed accent instead
   of pinning a literal. The mix has to clear 4.5:1 against the DARKEST light
   surface it can sit on, not against white: at 55% the "My Queue ->" links on
   the Service Desk overview measured 4.28:1 over rgb(209,219,230). 46% measures
   5.4:1 there and higher on every lighter surface. */
body.omniroq-light-theme,
[data-bs-theme="light"] {
    --omniroq-accent-text: color-mix(in srgb, var(--omniroq-accent, #78c2ad) 46%, black);
}
/* Dark islands inside a light page — the navbar and the marketing footer both
   hardcode data-bs-theme="dark" — must keep the bright accent, or the fix for
   light mode would break exactly the places that were already correct. */
body.omniroq-light-theme [data-bs-theme="dark"],
[data-bs-theme="light"] [data-bs-theme="dark"] {
    --omniroq-accent-text: var(--omniroq-accent, #78c2ad);
}

/* ── .o-card — THE app surface (Stage 2c) ─────────────────────
   Replaces the pasted `card bg-dark border-secondary` combo.
   Usage: <div class="card o-card">. Theme-aware via tokens; no
   per-page light-mode override needed. */
.card.o-card {
    background-color: var(--bs-dark, #212529);
    border-color: var(--bs-secondary);
    color: var(--bs-body-color);
    border-radius: var(--radius-md);
}
.card.o-card > .card-header,
.card.o-card > .card-footer {
    border-color: var(--bs-secondary);
}
body[data-bs-theme="light"] .card.o-card {
    background-color: var(--omniroq-light-surface-2);
    border-color: var(--omniroq-light-border);
    color: var(--omniroq-light-text);
}
body[data-bs-theme="light"] .card.o-card > .card-header,
body[data-bs-theme="light"] .card.o-card > .card-footer {
    border-color: var(--omniroq-light-border);
}

/* ── Shared components (Stage 2c) — consume tokens only ─────── */

/* Status badge: colour + icon pair, token-driven, theme-aware. */
.o-status {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    padding: 2px var(--sp-2);
    border-radius: var(--radius-pill);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-tight);
    white-space: nowrap;
}
.o-status .bi { font-size: 0.85em; }
/* ── Dashboard section band ──────────────────────────────────
   A section is a heading that groups the widgets under it. With the normal card
   treatment it rendered as a large bordered panel containing one word, so the
   label shouted louder than the data it was introducing. Chrome removed; the
   heading and its rule are drawn by the widget body itself. */
/* Over-specified deliberately: the card_style setting styles `.card` at
   body[data-bs-theme].omniroq-card-* specificity with !important, so a plain
   two-class selector loses and the band kept its 2px accent border. */
body[data-bs-theme] .omniroq-dashboard-cell--section .card.omniroq-dashboard-card {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}
body[data-bs-theme] .omniroq-dashboard-cell--section .card.omniroq-dashboard-card .card-body {
    background: transparent !important;
    padding-inline: 2px !important;
}

/* ── Dashboard widget empty state ────────────────────────────
   Shown when a widget's period genuinely has no records. Sized to sit inside
   whatever grid cell the widget occupies rather than forcing a height, so a
   2-row and a 4-row widget both degrade gracefully. */
.o-widget-empty {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sp-1, 0.25rem);
    padding: var(--sp-3, 0.75rem);
    text-align: center;
    pointer-events: none;
}
.o-widget-empty-icon {
    font-size: 1.35rem;
    line-height: 1;
    margin-bottom: var(--sp-1, 0.25rem);
    color: var(--bs-body-color, #e8eef7);
    opacity: 0.35;
}
.o-widget-empty-title {
    font-size: var(--fs-sm, 0.875rem);
    font-weight: var(--fw-semibold, 600);
    color: var(--bs-body-color, #e8eef7);
    opacity: 0.78;
}
.o-widget-empty-hint {
    font-size: var(--fs-xs, 0.75rem);
    color: var(--bs-body-color, #e8eef7);
    opacity: 0.52;
}

/* ── App footer ──────────────────────────────────────────────
   One quiet line inside the workspace, in place of the four-column marketing
   footer that used to render on all 546 pages. Reads the app's own tokens, so
   it follows theme and section_spacing rather than forcing dark. */
.o-app-footer {
    border-top: 1px solid var(--bs-border-color, rgba(255, 255, 255, 0.08));
    margin-top: var(--sp-6, 2rem);
    padding: var(--sp-3, 0.75rem) 0;
}
.o-app-footer-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2, 0.5rem) var(--sp-4, 1rem);
    padding-inline: var(--sp-4, 1rem);
    font-size: var(--fs-xs, 0.75rem);
    color: var(--bs-secondary-color, #8b96a5);
}
.o-app-footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2, 0.5rem) var(--sp-4, 1rem);
}
.o-app-footer-links a {
    color: inherit;
    text-decoration: none;
}
.o-app-footer-links a:hover,
.o-app-footer-links a:focus-visible {
    color: var(--omniroq-accent-text, #78c2ad);
    text-decoration: underline;
}

/* Accent-tinted marker badge ("Default", "Current", …). Exists so templates
   stop hand-rolling it as an inline style: the dashboard's version pinned
   `color: var(--omniroq-accent)`, which measured 1.49:1 in light mode — the
   worst contrast on the page — because inline styles never saw the
   --omniroq-accent-text switch. */
.o-badge-accent {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    padding: 2px var(--sp-2);
    border-radius: var(--radius-pill);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-tight);
    white-space: nowrap;
    color: var(--omniroq-accent-text, #78c2ad);
    /* 0.16 measured 4.09:1 on dark — mint text on a mint wash is its own worst
       background. Thinner tint, same read. */
    background: rgba(var(--omniroq-accent-rgb, 120, 194, 173), 0.10);
    border: 1px solid rgba(var(--omniroq-accent-rgb, 120, 194, 173), 0.32);
}
/* A lighter tint on light surfaces: the dark accent-text on a 16% mint wash
   measured 4.36:1, just under AA. Thinning the wash lifts it clear. */
body.omniroq-light-theme .o-badge-accent,
[data-bs-theme="light"] .o-badge-accent {
    background: rgba(var(--omniroq-accent-rgb, 120, 194, 173), 0.06);
}

/* Bootstrap's .text-primary resolves to --bs-primary, i.e. the mint accent, and
   measured 2.06:1 on light surfaces. Route it through the AA-safe variant; it
   re-brightens automatically inside data-bs-theme="dark" islands. */
body.omniroq-light-theme .text-primary,
[data-bs-theme="light"] .text-primary {
    color: var(--omniroq-accent-text, #78c2ad) !important;
}

/* `badge bg-danger` sets a background but no colour, so the count inherited the
   sidebar's text colour and rendered dark-on-red at 2.61:1. Bootstrap's own
   pairing utility would be .text-bg-danger; this fixes the markup already in
   place without touching every caller. */
/* `badge bg-danger` set a background but no colour, so the count inherited the
   sidebar's text colour. Forcing white was not enough on its own: bootswatch's
   --bs-danger is a light coral, and white on it still measured 2.61:1. Darkened
   from the existing status token rather than by inventing a red, so it tracks
   the palette and adds no hardcoded colour: white on it is 6.2:1 dark, 12.6:1
   light. */
.olsb-notif-badge {
    color: white !important;
    background-color: color-mix(in srgb, var(--status-danger) 60%, black) !important;
}
.o-status-success { color: var(--status-success); background: var(--status-success-bg); }
.o-status-warning { color: var(--status-warning); background: var(--status-warning-bg); }
.o-status-danger  { color: var(--status-danger);  background: var(--status-danger-bg); }
.o-status-info    { color: var(--status-info);    background: var(--status-info-bg); }
.o-status-neutral { color: var(--status-neutral); background: var(--status-neutral-bg); }

/* Page header (replaces the legacy back.png pattern). */
.o-page-header { min-height: 42px; }
body[data-bs-theme="light"] .o-page-header h1 { color: var(--omniroq-light-text) !important; }

/* Empty state. */
.o-empty-state { color: var(--bs-secondary-color); }
body[data-bs-theme="light"] .o-empty-state .text-light { color: var(--omniroq-light-text) !important; }

/* KPI stat tile. */
.o-stat-tile { min-width: 0; }
.o-stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    font-size: var(--fs-lg);
    flex: 0 0 auto;
}

/* Pagination — mirrors the app's outline buttons; current page = glow ring
   only (no fill), identical in dark and light mode. The current-page pill
   deliberately carries NO .btn class so none of the legacy toolbar
   button-standardization rules can inflate it. */
.o-pagination .o-page-current {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    border: 1px solid var(--omniroq-accent, var(--bs-primary));
    color: var(--omniroq-accent-text, var(--bs-primary));
    box-shadow: 0 0 8px rgba(var(--omniroq-accent-rgb), 0.55),
                0 0 20px rgba(var(--omniroq-accent-rgb), 0.22);
    cursor: default;
}
body[data-bs-theme="light"] .o-pagination .o-page-current {
    background-color: transparent;
    color: var(--omniroq-accent-text, var(--bs-primary));
}

/* Spacing is structural, not margin-based: an explicit flex gap on the
   button row with all child margins zeroed. No legacy toolbar/utility
   margin rule can produce different spacing top vs bottom. */
.o-pagination .o-page-btns {
    display: flex;
    align-items: center;
    gap: 6px;
}
.o-pagination .o-page-btns > * {
    margin: 0 !important;
    flex: 0 0 auto;
}

/* Identical metrics top and bottom. The toolbar standardization rules go up
   to `.list-toolbar .btn.btn-sm` (0,3,0) later in the file — these selectors
   are (0,4,0)+ so they win everywhere, for buttons, anchors and the pill. */
.o-pagination .btn.btn-sm,
.o-pagination .o-page-current,
.list-toolbar .o-pagination .btn.btn-sm,
.list-toolbar .o-pagination a.btn.btn-sm,
.list-toolbar .o-pagination .o-page-current {
    min-height: 0 !important;
    height: auto !important;
    padding: 0.2rem 0.55rem !important;
    font-size: var(--fs-sm) !important;
    font-weight: var(--fw-medium) !important;
    border-radius: var(--radius-md) !important;
    line-height: var(--lh-tight) !important;
    gap: 0 !important;
}
.o-pagination .btn,
.o-pagination .o-page-current,
.o-pagination .form-select {
    transition: transform var(--o-dur) var(--o-ease),
                background-color var(--o-dur) var(--o-ease),
                color var(--o-dur) var(--o-ease),
                border-color var(--o-dur) var(--o-ease),
                box-shadow var(--o-dur) var(--o-ease);
}
.o-pagination .btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Focus/hover glow must not be clipped by neighbouring cells: lift the
   active header cell above its siblings (box-shadow paints in stacking
   order; later DOM siblings otherwise paint over the glow). */
.table thead th { position: relative; }
.table thead th:hover { z-index: 4; }
.table thead th:focus-within { z-index: 5; }

/* Shared-component motion — same easing + tenant speed as everything else. */
.o-status,
.o-stat-tile,
.o-back-btn,
.o-empty-state .btn {
    transition: transform var(--o-dur) var(--o-ease),
                background-color var(--o-dur) var(--o-ease),
                color var(--o-dur) var(--o-ease),
                border-color var(--o-dur) var(--o-ease),
                box-shadow var(--o-dur) var(--o-ease),
                filter var(--o-dur) var(--o-ease);
}

/* Contact-actions cell — compact icon dropdowns (call / message). */
.o-contact-actions .o-contact-btn {
    min-height: 0 !important;
    padding: 0.15rem 0.45rem !important;
    font-size: var(--fs-sm) !important;
    border-radius: var(--radius-md) !important;
    line-height: var(--lh-tight) !important;
}
.o-contact-actions .dropdown-menu {
    min-width: 180px;
    font-size: var(--fs-sm);
}
.o-contact-actions .dropdown-item {
    display: flex;
    align-items: center;
    padding: 0.35rem 0.6rem;
}

/* Bulk-action bar — brand accent, not hardcoded Bootstrap blue. */
.o-bulk-bar {
    background: rgba(var(--omniroq-accent-rgb, 120,194,173), 0.08);
    border: 1px solid rgba(var(--omniroq-accent-rgb, 120,194,173), 0.3);
}

/* Advanced-filter container (was inline-styled per page). */
.o-adv-filter { background: #1f2328; border-color: rgba(160,169,184,0.35) !important; }
body[data-bs-theme="light"] .o-adv-filter {
    background: var(--omniroq-light-surface-2);
    border-color: var(--omniroq-light-border) !important;
}

.Omniroq-theme-toggle-wrap {
    border-color: rgba(var(--omniroq-accent-rgb, 120,194,173), 0.25) !important;
    background: rgba(var(--omniroq-accent-rgb, 120,194,173), 0.06);
}

.Omniroq-theme-toggle-title {
    color: #e8eef7;
}

.Omniroq-theme-toggle-hint,
.Omniroq-theme-toggle-label {
    color: #9aa7b5;
}

html[data-bs-theme="light"],
body[data-bs-theme="light"] {
    color-scheme: light;
}

body[data-bs-theme="light"] {
    background-color: var(--omniroq-light-body-bg) !important;
    color: var(--omniroq-light-text);
}

body[data-bs-theme="light"] {
    --bs-body-bg: var(--omniroq-light-body-bg);
    --bs-body-color: var(--omniroq-light-text);
    --bs-tertiary-bg: var(--omniroq-light-surface-2);
    --bs-secondary-color: var(--omniroq-light-muted);
    --omniroq-hover-glow-box: none;
    --omniroq-hover-glow-filter: drop-shadow(0 0 11px rgba(var(--omniroq-accent-rgb, 120,194,173),0.32)) drop-shadow(0 0 22px rgba(var(--omniroq-accent-rgb, 120,194,173),0.18));
    --omniroq-dropdown-bg: #edf2f7;
    --omniroq-dropdown-text: var(--omniroq-light-text);
    --omniroq-dropdown-border: var(--omniroq-light-border);
    --omniroq-dropdown-shadow: 0 14px 34px rgba(15, 23, 42, 0.12);
}

body[data-bs-theme="light"] .container-fluid.py-4,
body[data-bs-theme="light"] .container-fluid.mt-3.px-3 {
    --crm-app-panel-bg: var(--omniroq-light-surface-1);
    --crm-app-panel-bg-alt: var(--omniroq-light-surface-2);
    --crm-app-panel-border: var(--omniroq-light-border);
    --crm-app-panel-border-strong: var(--omniroq-light-border-strong);
    --crm-app-text: var(--omniroq-light-text);
    --crm-app-muted: var(--omniroq-light-muted);
}

body[data-bs-theme="light"] .navbar.bg-dark,
body[data-bs-theme="light"] .bg-dark,
body[data-bs-theme="light"] .card.bg-dark,
body[data-bs-theme="light"] a.card.bg-dark,
body[data-bs-theme="light"] .modal-content.bg-dark,
body[data-bs-theme="light"] .offcanvas,
body[data-bs-theme="light"] .dropdown-menu,
body[data-bs-theme="light"] .notification-dropdown,
body[data-bs-theme="light"] .toast,
body[data-bs-theme="light"] .list-group-item.bg-dark {
    background-color: var(--omniroq-light-surface-2) !important;
    color: var(--omniroq-light-text) !important;
    border-color: var(--omniroq-light-border) !important;
}
body[data-bs-theme="light"] .navbar.bg-dark {
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
    border-bottom: 1px solid var(--omniroq-light-border) !important;
}

body[data-bs-theme="light"] .card-header,
body[data-bs-theme="light"] .card.bg-dark .card-header,
body[data-bs-theme="light"] .toast-header.bg-dark,
body[data-bs-theme="light"] .notification-dropdown-header,
body[data-bs-theme="light"] .offcanvas-user-header,
body[data-bs-theme="light"] #chartsContainer .card-header {
    background-color: var(--omniroq-light-surface-3) !important;
    color: var(--omniroq-light-text) !important;
    border-color: var(--omniroq-light-border) !important;
}

body[data-bs-theme="light"] .navbar .nav-link,
body[data-bs-theme="light"] .navbar .dropdown-toggle,
body[data-bs-theme="light"] .navbar-brand,
body[data-bs-theme="light"] .offcanvas-title,
body[data-bs-theme="light"] .dropdown-item,
body[data-bs-theme="light"] .dropdown-header,
body[data-bs-theme="light"] .nav-tabs .nav-link,
body[data-bs-theme="light"] .nav-pills .nav-link,
body[data-bs-theme="light"] .text-light,
body[data-bs-theme="light"] .table-dark,
body[data-bs-theme="light"] .table-dark th,
body[data-bs-theme="light"] .table-dark td,
body[data-bs-theme="light"] .table-dark thead th,
body[data-bs-theme="light"] .table-dark tbody td,
body[data-bs-theme="light"] .modal-title,
body[data-bs-theme="light"] .list-group-item,
body[data-bs-theme="light"] .notification-dropdown-header h6,
body[data-bs-theme="light"] .notification-dropdown-item,
body[data-bs-theme="light"] .toast-body,
body[data-bs-theme="light"] .form-label,
body[data-bs-theme="light"] label,
body[data-bs-theme="light"] kbd {
    color: var(--omniroq-light-text) !important;
}

body[data-bs-theme="light"] .text-muted,
body[data-bs-theme="light"] .toast-time,
body[data-bs-theme="light"] .Omniroq-theme-toggle-hint,
body[data-bs-theme="light"] .Omniroq-theme-toggle-label {
    color: var(--omniroq-light-muted) !important;
}

body[data-bs-theme="light"] .Omniroq-theme-toggle-title {
    color: var(--omniroq-light-text) !important;
}

body[data-bs-theme="light"] .Omniroq-theme-toggle-wrap {
    background: rgba(var(--omniroq-accent-rgb, 120,194,173), 0.08);
    border-color: rgba(var(--omniroq-accent-rgb, 120,194,173), 0.28) !important;
}

body[data-bs-theme="light"] .dropdown-divider,
body[data-bs-theme="light"] hr,
body[data-bs-theme="light"] .border,
body[data-bs-theme="light"] .border-secondary,
body[data-bs-theme="light"] .Omniroq-teal-frame,
body[data-bs-theme="light"] .table,
body[data-bs-theme="light"] .table > :not(caption) > * > *,
body[data-bs-theme="light"] .modal-header,
body[data-bs-theme="light"] .modal-footer,
body[data-bs-theme="light"] .offcanvas,
body[data-bs-theme="light"] .notification-dropdown-item,
body[data-bs-theme="light"] .notification-dropdown-header {
    border-color: var(--omniroq-light-border) !important;
}

body[data-bs-theme="light"] .form-control,
body[data-bs-theme="light"] .form-select,
body[data-bs-theme="light"] textarea,
body[data-bs-theme="light"] .input-group-text {
    background-color: #f3f6f9 !important;
    border-color: var(--omniroq-light-border) !important;
    color: var(--omniroq-light-text) !important;
}

body[data-bs-theme="light"] .form-control::placeholder,
body[data-bs-theme="light"] textarea::placeholder {
    color: #8393a4 !important;
}

body[data-bs-theme="light"] .form-control:focus,
body[data-bs-theme="light"] .form-select:focus,
body[data-bs-theme="light"] textarea:focus {
    background-color: #fbfcfd !important;
    border-color: rgba(var(--omniroq-accent-rgb, 120,194,173), 0.75) !important;
    box-shadow: 0 0 0 0.2rem rgba(var(--omniroq-accent-rgb, 120,194,173), 0.18) !important;
    color: var(--omniroq-light-text) !important;
}

body[data-bs-theme="light"] .form-check-input {
    background-color: #eef3f7;
    border-color: var(--omniroq-light-border);
}

/* Checked checkboxes keep Bootstrap's checkmark glyph on the accent bg. */
body[data-bs-theme="light"] .form-check-input:checked[type="checkbox"]:not(.form-switch .form-check-input) {
    background-color: var(--omniroq-accent, #78c2ad);
    border-color: var(--omniroq-accent, #78c2ad);
}

/* The grey knob circle belongs ONLY to switches — putting it on the generic
   rule made every plain checkbox render as a dot in light mode. */
body[data-bs-theme="light"] .form-switch .form-check-input {
    background-color: #eef3f7;
    border-color: rgba(97, 114, 132, 0.40);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2390a0b2'/%3e%3c/svg%3e");
}

body[data-bs-theme="light"] .form-switch .form-check-input:checked {
    background-color: var(--omniroq-accent, #78c2ad);
    border-color: var(--omniroq-accent, #78c2ad);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e");
}

/* ── Fix: remove Bootswatch brightness filter that causes black flash on toggle click ── */
.form-check-input:active,
[data-bs-theme="dark"] .form-check-input:active {
    filter: none !important;
}

body[data-bs-theme="light"] .table.table-dark {
    --bs-table-bg: var(--omniroq-light-surface-1);
    --bs-table-striped-bg: var(--omniroq-light-surface-2);
    --bs-table-hover-bg: #dde5ee;
    --bs-table-border-color: var(--omniroq-light-border);
    --bs-table-color: var(--omniroq-light-text);
}

body[data-bs-theme="light"] .table.table-dark.table-striped tbody tr:nth-of-type(odd) > *,
body[data-bs-theme="light"] .table.table-dark tbody tr:nth-of-type(odd) > * {
    background-color: var(--omniroq-light-surface-2) !important;
}

body[data-bs-theme="light"] .table.table-dark.table-striped tbody tr:nth-of-type(even) > *,
body[data-bs-theme="light"] .table.table-dark tbody tr:nth-of-type(even) > * {
    background-color: var(--omniroq-light-surface-1) !important;
}

body[data-bs-theme="light"] .badge.bg-dark {
    background-color: #d8dee6 !important;
    color: var(--omniroq-light-text) !important;
}

body[data-bs-theme="light"] .btn,
body[data-bs-theme="light"] .btn-outline-primary,
body[data-bs-theme="light"] .btn-outline-secondary,
body[data-bs-theme="light"] .btn-outline-info,
body[data-bs-theme="light"] .btn-outline-success,
body[data-bs-theme="light"] .btn-outline-warning,
body[data-bs-theme="light"] .btn-outline-danger,
body[data-bs-theme="light"] .btn-outline-light,
body[data-bs-theme="light"] .btn-success {
    background-color: var(--omniroq-light-surface-1);
}

body[data-bs-theme="light"] .btn-outline-primary,
body[data-bs-theme="light"] .btn-outline-secondary,
body[data-bs-theme="light"] .btn-outline-info,
body[data-bs-theme="light"] .btn-outline-success,
body[data-bs-theme="light"] .btn-outline-warning,
body[data-bs-theme="light"] .btn-outline-danger,
body[data-bs-theme="light"] .btn-outline-light,
body[data-bs-theme="light"] .btn-success {
    border-width: 1px;
}

body[data-bs-theme="light"] .btn,
body[data-bs-theme="light"] .btn-outline-primary,
body[data-bs-theme="light"] .btn-outline-secondary,
body[data-bs-theme="light"] .btn-outline-info,
body[data-bs-theme="light"] .btn-outline-success,
body[data-bs-theme="light"] .btn-outline-warning,
body[data-bs-theme="light"] .btn-outline-danger,
body[data-bs-theme="light"] .btn-outline-light,
body[data-bs-theme="light"] .btn-success {
    transition: transform var(--o-dur) var(--o-ease), background var(--o-dur) var(--o-ease), color var(--o-dur) var(--o-ease), border-color var(--o-dur) var(--o-ease), box-shadow var(--o-dur) var(--o-ease) !important;
    transform-origin: center center;
    will-change: transform;
}

body[data-bs-theme="light"] .btn-group .btn.active,
body[data-bs-theme="light"] .btn-group .btn:active,
body[data-bs-theme="light"] .btn-outline-primary.active,
body[data-bs-theme="light"] .btn-check:checked + .btn-outline-primary,
body[data-bs-theme="light"] .btn-outline-secondary.active,
body[data-bs-theme="light"] .btn-check:checked + .btn-outline-secondary,
body[data-bs-theme="light"] .btn-outline-info.active,
body[data-bs-theme="light"] .btn-check:checked + .btn-outline-info,
body[data-bs-theme="light"] .btn-outline-success.active,
body[data-bs-theme="light"] .btn-check:checked + .btn-outline-success,
body[data-bs-theme="light"] .btn-outline-warning.active,
body[data-bs-theme="light"] .btn-check:checked + .btn-outline-warning,
body[data-bs-theme="light"] .btn-outline-danger.active,
body[data-bs-theme="light"] .btn-check:checked + .btn-outline-danger,
body[data-bs-theme="light"] .btn-outline-light.active,
body[data-bs-theme="light"] .btn-check:checked + .btn-outline-light,
body[data-bs-theme="light"] .btn-success {
    background-color: var(--omniroq-accent, #78c2ad) !important;
    border-color: var(--omniroq-accent, #78c2ad) !important;
    color: #ffffff !important;
}

body[data-bs-theme="light"] .notification-dropdown {
    box-shadow: 0 12px 34px rgba(15, 23, 42, 0.12);
}

body[data-bs-theme="light"] .notification-dropdown-header {
    background: linear-gradient(135deg, rgba(var(--omniroq-accent-rgb, 120,194,173), 0.12) 0%, rgba(255, 255, 255, 0.12) 100%) !important;
}

body[data-bs-theme="light"] .notification-dropdown-item:hover {
    background-color: transparent !important;
    filter: var(--omniroq-hover-glow-filter);
}

body[data-bs-theme="light"] .toast-close-x {
    color: #b42318;
}

body[data-bs-theme="light"] .toast-close-x:hover {
    color: #b42318;
}

body[data-bs-theme="light"] .sidebar-avatar {
    box-shadow: 0 12px 24px rgba(148, 163, 184, 0.24), inset 0 0 18px rgba(255,255,255,0.75);
}

body[data-bs-theme="light"] .omniroq-wordmark,
body[data-bs-theme="light"] .omniroq-wordmark-omni,
body[data-bs-theme="light"] .omniroq-wordmark-roq {
    color: var(--omniroq-light-text);
}

body[data-bs-theme="light"] .omniroq-brand-lockup:hover,
body[data-bs-theme="light"] .omniroq-brand-lockup:focus-within,
body[data-bs-theme="light"] .navbar-brand:hover .omniroq-brand-lockup,
body[data-bs-theme="light"] .navbar-brand:focus-visible .omniroq-brand-lockup {
    filter: var(--omniroq-hover-glow-filter);
}

body[data-bs-theme="light"] [style*="background:#0d1117"],
body[data-bs-theme="light"] [style*="background: #0d1117"] {
    background: var(--omniroq-light-body-bg) !important;
}

body[data-bs-theme="light"] [style*="background:#161b22"],
body[data-bs-theme="light"] [style*="background: #161b22"] {
    background: var(--omniroq-light-surface-2) !important;
}

body[data-bs-theme="light"] [style*="background:#1f2328"],
body[data-bs-theme="light"] [style*="background: #1f2328"] {
    background: var(--omniroq-light-surface-1) !important;
}

body[data-bs-theme="light"] [style*="rgba(255,255,255,.12)"],
body[data-bs-theme="light"] [style*="rgba(255, 255, 255, .12)"] {
    border-color: var(--omniroq-light-border) !important;
}

body[data-bs-theme="light"] [style*="color:#8b949e"],
body[data-bs-theme="light"] [style*="color:rgba(255,255,255,.5)"],
body[data-bs-theme="light"] [style*="color:rgba(255,255,255,.4)"],
body[data-bs-theme="light"] [style*="color:rgba(255,255,255,.35)"],
body[data-bs-theme="light"] [style*="color:rgba(255,255,255,.3)"] {
    color: var(--omniroq-light-muted) !important;
}

body[data-bs-theme="light"] [style*="color:rgba(255,255,255,.88)"],
body[data-bs-theme="light"] [style*="color:#ffffff"],
body[data-bs-theme="light"] [style*="color: #ffffff"] {
    color: var(--omniroq-light-text) !important;
}

body[data-bs-theme="light"] [style*="background:rgba(255,255,255,.08)"],
body[data-bs-theme="light"] [style*="background: rgba(255,255,255,.08)"] {
    background: var(--omniroq-light-surface-3) !important;
}

/* Comments Timeline */
.comments-timeline {
    position: relative;
    padding: 8px 10px;
    overflow: visible;
}

#myTabContent > .tab-pane#comments {
    overflow: hidden;
}

#myTabContent > .tab-pane#comments.show.active {
    /* height is set dynamically by JS to exactly fill the viewport */
    min-height: 0;
    overflow: hidden;
}

.detail-comments-layout {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    height: 100%;
    min-height: 0;
    overflow: visible;
}

.detail-comments-composer {
    flex: 0 0 auto;
    padding: 0 1.5rem;
}

.detail-comments-list-wrap {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px 2rem 12px 2rem;
}

.detail-comments-list-wrap::-webkit-scrollbar {
    width: 10px;
}

.detail-comments-list-wrap::-webkit-scrollbar-track {
    background: #2c2c2c !important;
}

.detail-comments-list-wrap::-webkit-scrollbar-thumb {
    background: #9f9f9f !important;
    border-radius: 5px;
}

.detail-comments-list-wrap::-webkit-scrollbar-thumb:hover {
    background: #b0b0b0 !important;
}

.detail-comments-list-wrap > .detail-empty-state.notification-dropdown-item {
    border-bottom: none !important;
}

.comments-timeline::before {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 100%;
    background: rgba(var(--omniroq-accent-rgb, 120,194,173), 0.35);
}

.comment-item {
    position: relative;
    margin-bottom: 10px !important;
    overflow: visible;
}

.comment-item .row {
    --bs-gutter-x: 0;
    margin-left: 0;
    margin-right: 0;
}

.comment-item > .row > [class*="col-"] {
    position: relative;
    z-index: 0;
}

.comment-item::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 16px;
    width: 10px;
    height: 10px;
    background: var(--omniroq-accent, #78c2ad);
    border: 2px solid #212529;
    border-radius: 50%;
    transform: translateX(-50%);
    transform-origin: center center;
    transition: transform var(--o-dur) var(--o-ease), filter var(--o-dur) var(--o-ease), background-color var(--o-dur) var(--o-ease), border-color var(--o-dur) var(--o-ease);
    z-index: 1;
}

.comment-item:hover::before,
.comment-item:focus-within::before {
    transform: translateX(-50%) scale(var(--omniroq-hover-pop-scale));
    filter: var(--omniroq-hover-glow-filter);
}

.comments-timeline .comment-entry.notification-dropdown-item {
    display: block;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
    cursor: default;
    transition: transform var(--o-dur) var(--o-ease), background-color var(--o-dur) var(--o-ease), color var(--o-dur) var(--o-ease), border-color var(--o-dur) var(--o-ease), filter var(--o-dur) var(--o-ease) !important;
    transform: scale(1);
    transform-origin: center center;
    will-change: transform, filter;
}

/* Comments always pop from their own center regardless of which side of the tree they sit on */
.comments-timeline .comment-entry.notification-dropdown-item {
    transform-origin: center center;
}

.comments-timeline .comment-item:last-child .comment-entry.notification-dropdown-item {
    border-bottom: none;
}

.comments-timeline .comment-entry.notification-dropdown-item:hover,
.comments-timeline .comment-entry.notification-dropdown-item:focus,
.comments-timeline .comment-entry.notification-dropdown-item:focus-within {
    transform: scale(var(--omniroq-hover-pop-scale));
    background-color: transparent !important;
    box-shadow: none !important;
    filter: var(--omniroq-hover-glow-filter) !important;
    position: relative;
    z-index: 2;
}

.comments-timeline .comment-entry-message {
    color: var(--omniroq-accent-text, #78c2ad) !important;
    font-size: 0.9rem !important;
    line-height: 1.4 !important;
    font-weight: 600 !important;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.comments-timeline .comment-entry-meta {
    margin-top: 4px;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.comments-timeline .comment-entry .notification-item-time,
.comments-timeline .comment-entry .comment-entry-meta,
.comments-timeline .comment-entry .comment-entry-meta strong {
    color: #a0a9b8 !important;
}

.comments-timeline .comment-entry .comment-entry-meta strong {
    font-weight: 650;
}

.detail-pane-section {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.detail-pane-stack {
    gap: 1rem;
}

.detail-info-grid {
    gap: 1rem;
    align-items: stretch;
}

.detail-description-card,
.detail-files-panel,
.detail-files-table-wrap,
.detail-empty-state {
    display: block !important;
    padding: 12px 16px !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transition: transform var(--o-dur) var(--o-ease), background-color var(--o-dur) var(--o-ease), color var(--o-dur) var(--o-ease), border-color var(--o-dur) var(--o-ease), filter var(--o-dur) var(--o-ease) !important;
    transform: scale(1);
    transform-origin: center center;
    will-change: transform, filter;
}

.detail-section-divider {
    border: none !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
    margin: 4px 0 !important;
    opacity: 1 !important;
}

.detail-description-card,
.detail-files-panel {
    border-bottom: none !important;
}

.detail-description-card:hover,
.detail-description-card:focus-within,
.detail-empty-state:hover,
.detail-empty-state:focus-within {
    transform: scale(var(--omniroq-hover-pop-scale));
    background-color: transparent !important;
    box-shadow: none !important;
    filter: var(--omniroq-hover-glow-filter) !important;
    position: relative;
    z-index: 1;
}

.detail-info-grid > .detail-info-card {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

.detail-info-item.notification-dropdown-item {
    display: block !important;
    border-radius: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.detail-info-item.notification-dropdown-item:last-child {
    border-bottom: none !important;
}

/* No trailing divider on the last list item in flat-list tabs */
#myTabContent > .tab-pane > .mx-sm-3 .history-entry.notification-dropdown-item:last-child,
#myTabContent > .tab-pane > .mx-sm-3 > .detail-empty-state.notification-dropdown-item,
#myTabContent > .tab-pane > .mx-sm-3.detail-empty-state,
#myTabContent > .tab-pane .detail-files-panel:last-of-type,
#myTabContent > .tab-pane .detail-files-panel:last-child {
    border-bottom: none !important;
}


.detail-info-card h5,
.detail-description-card h5,
.detail-files-panel h5,
.detail-pane-section > h5.text-primary {
    color: var(--omniroq-accent-text, #78c2ad) !important;
    font-size: 0.95rem !important;
    line-height: 1.35 !important;
    font-weight: 600 !important;
    margin-bottom: 0.35rem !important;
}

.detail-info-card p,
.detail-description-card p,
.detail-empty-state p,
.detail-info-card li,
.detail-info-card .text-light,
.detail-description-card .text-light,
.detail-files-table tbody td,
.detail-files-table tbody td .text-light,
.detail-files-table tbody td .text-primary,
.detail-files-table thead th,
.detail-files-table .text-light,
.detail-files-table .text-primary,
.detail-files-panel .form-label,
.detail-pane-section .text-muted {
    color: #a0a9b8 !important;
}

.detail-info-card p:last-child,
.detail-description-card p:last-child,
.detail-empty-state p:last-child {
    margin-bottom: 0 !important;
}

.detail-info-card a,
.detail-files-table a {
    color: var(--omniroq-accent-text, #78c2ad) !important;
    text-decoration: none;
}

.detail-info-card a:hover,
.detail-files-table a:hover {
    filter: var(--omniroq-hover-glow-filter);
}

.detail-info-card ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.detail-info-card img {
    max-width: 100%;
    height: auto;
    border-radius: 12px !important;
    border: 1px solid rgba(var(--omniroq-accent-rgb, 120,194,173), 0.2) !important;
    margin-top: 0.4rem;
}

.detail-custom-grid {
    row-gap: 1rem;
}

.detail-custom-grid > [class*="col-"] {
    display: flex;
}

.detail-custom-grid .detail-info-card {
    width: 100%;
}

.detail-files-form {
    margin-bottom: 0 !important;
}

.detail-files-panel input[type="file"],
.detail-files-panel .form-control,
.detail-files-panel .form-select,
.detail-files-panel textarea {
    background: rgba(255, 255, 255, 0.03) !important;
    border-color: rgba(var(--omniroq-accent-rgb, 120,194,173), 0.2) !important;
}

.detail-files-table-wrap {
    overflow: hidden !important;
}

.detail-files-table {
    --bs-table-bg: transparent;
    --bs-table-striped-bg: transparent;
    --bs-table-hover-bg: transparent;
    --bs-table-border-color: rgba(255, 255, 255, 0.05);
    margin-bottom: 0 !important;
}

.detail-files-table thead th {
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
    font-weight: 600;
}

.detail-files-table tbody td {
    background: transparent !important;
    border-top-color: rgba(255, 255, 255, 0.05) !important;
    vertical-align: middle;
}

.detail-files-table tbody tr {
    transition: filter var(--o-dur) var(--o-ease), background-color var(--o-dur) var(--o-ease);
}

.detail-files-table tbody tr:hover {
    filter: var(--omniroq-hover-glow-filter);
}

.detail-files-table tbody tr:hover td {
    background: rgba(var(--omniroq-accent-rgb, 120,194,173), 0.02) !important;
}

@media (max-width: 767.98px) {
    .detail-comments-layout {
        height: 100%;
    }

    .detail-info-grid {
        gap: 0.75rem;
    }

    .detail-files-table-wrap {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .comments-timeline .comment-entry-meta {
        flex-direction: column;
        gap: 4px !important;
    }
}

.card-header {
    border-bottom: 1px solid rgba(13, 110, 253, 0.25);
    padding: 0.4rem 0.75rem !important;
}

.card-body {
    padding: 0.5rem !important;
}

#myTabContent,
#myTabContent > .tab-pane,
.timeline,
.timeline-item,
.timeline-content {
    overflow-x: hidden;
}

#myTabContent > .tab-pane#files .d-flex.justify-content-between.align-items-center.border-bottom,
#myTabContent > .tab-pane#history .d-flex.align-items-start.gap-2.mb-2,
#myTabContent > .tab-pane#timeline .d-flex.align-items-start.gap-2.mb-2 {
    border: 1px solid rgba(var(--omniroq-accent-rgb, 120,194,173), 0.22);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
    transition: transform var(--o-dur) var(--o-ease), border-color var(--o-dur) var(--o-ease), box-shadow var(--o-dur) var(--o-ease), filter var(--o-dur) var(--o-ease), background-color var(--o-dur) var(--o-ease);
    transform: scale(1);
    transform-origin: center center;
    will-change: transform, filter;
}

#myTabContent > .tab-pane#history .d-flex.align-items-start.gap-2.mb-2,
#myTabContent > .tab-pane#timeline .d-flex.align-items-start.gap-2.mb-2 {
    padding: 1rem 1.15rem;
}

#myTabContent > .tab-pane#files .d-flex.justify-content-between.align-items-center.border-bottom {
    padding: 0.9rem 1rem !important;
    margin-bottom: 0.5rem;
}

#myTabContent > .tab-pane#files .d-flex.justify-content-between.align-items-center.border-bottom:hover,
#myTabContent > .tab-pane#files .d-flex.justify-content-between.align-items-center.border-bottom:focus-within,
#myTabContent > .tab-pane#history .d-flex.align-items-start.gap-2.mb-2:hover,
#myTabContent > .tab-pane#history .d-flex.align-items-start.gap-2.mb-2:focus-within,
#myTabContent > .tab-pane#timeline .d-flex.align-items-start.gap-2.mb-2:hover,
#myTabContent > .tab-pane#timeline .d-flex.align-items-start.gap-2.mb-2:focus-within {
    transform: scale(var(--omniroq-hover-pop-scale));
    filter: var(--omniroq-hover-glow-filter);
    box-shadow: none;
    border-color: rgba(var(--omniroq-accent-rgb, 120,194,173), 0.55);
    background: rgba(255, 255, 255, 0.05);
    position: relative;
    z-index: 1;
}

#myTabContent > .tab-pane#history .timeline {
    padding: 0;
}

#myTabContent > .tab-pane#history .timeline-item {
    padding-left: 0;
    margin-bottom: 0 !important;
}

#myTabContent > .tab-pane#history .timeline-item::before {
    display: none;
}

#myTabContent > .tab-pane#history .timeline-item > .d-flex,
#myTabContent > .tab-pane#history > .mx-sm-3 > .d-flex.align-items-start.gap-2.mb-2 {
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    background: transparent;
    transition: transform var(--o-dur) var(--o-ease), background-color var(--o-dur) var(--o-ease), color var(--o-dur) var(--o-ease), border-color var(--o-dur) var(--o-ease), filter var(--o-dur) var(--o-ease) !important;
    transform: scale(1);
    transform-origin: center center;
    will-change: transform, filter;
}

#myTabContent > .tab-pane#history .timeline-item:last-child > .d-flex,
#myTabContent > .tab-pane#history > .mx-sm-3 > .d-flex.align-items-start.gap-2.mb-2:last-child {
    border-bottom: none;
}

#myTabContent > .tab-pane#history .timeline-item > .d-flex:hover,
#myTabContent > .tab-pane#history .timeline-item > .d-flex:focus-within,
#myTabContent > .tab-pane#history > .mx-sm-3 > .d-flex.align-items-start.gap-2.mb-2:hover,
#myTabContent > .tab-pane#history > .mx-sm-3 > .d-flex.align-items-start.gap-2.mb-2:focus-within {
    transform: scale(var(--omniroq-hover-pop-scale));
    background-color: transparent !important;
    box-shadow: none !important;
    filter: var(--omniroq-hover-glow-filter) !important;
    position: relative;
    z-index: 1;
}

#myTabContent > .tab-pane#history .timeline-marker {
    min-width: 20px !important;
    width: 20px !important;
    height: 20px !important;
    flex: 0 0 20px !important;
    margin-right: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    color: var(--omniroq-accent-text, #78c2ad) !important;
    font-size: 1rem !important;
    line-height: 1 !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transform: none !important;
    filter: none !important;
}

#myTabContent > .tab-pane#history .timeline-content {
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    transition: none !important;
    transform: none !important;
    filter: none !important;
    box-shadow: none !important;
    min-width: 0;
}

#myTabContent > .tab-pane#history .timeline-content:hover,
#myTabContent > .tab-pane#history .timeline-content:focus,
#myTabContent > .tab-pane#history .timeline-content:focus-within {
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    transform: none !important;
    filter: none !important;
    box-shadow: none !important;
}

#myTabContent > .tab-pane#history .timeline-content > .d-flex {
    gap: 12px;
}

#myTabContent > .tab-pane#history .timeline-content > .d-flex > div:first-child,
#myTabContent > .tab-pane#history > .mx-sm-3 > .d-flex.align-items-start.gap-2.mb-2 > div:last-child {
    min-width: 0;
    flex: 1;
}

#myTabContent > .tab-pane#history .timeline-content h6,
#myTabContent > .tab-pane#history > .mx-sm-3 > .d-flex.align-items-start.gap-2.mb-2 .text-light {
    color: #e8eef7 !important;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.4;
}

#myTabContent > .tab-pane#history .timeline-content p {
    color: #e8eef7;
}

#myTabContent > .tab-pane#history .timeline-content small,
#myTabContent > .tab-pane#history > .mx-sm-3 > .d-flex.align-items-start.gap-2.mb-2 small {
    color: #a0a9b8 !important;
    font-size: 0.75rem;
}

#myTabContent > .tab-pane#history .timeline-content strong,
#myTabContent > .tab-pane#history > .mx-sm-3 > .d-flex.align-items-start.gap-2.mb-2 strong {
    font-weight: 650;
}

#myTabContent > .tab-pane#history .timeline-content > div + div {
    margin-top: 8px !important;
    padding: 8px 10px !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-left: none !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.03) !important;
}

#myTabContent > .tab-pane#history .timeline-content > div + div p {
    color: #a0a9b8 !important;
    font-size: 0.82rem !important;
    line-height: 1.4;
}

#myTabContent > .tab-pane#history,
#myTabContent > .tab-pane#history > .mx-sm-3,
#myTabContent > .tab-pane#history .timeline,
#myTabContent > .tab-pane#history .timeline-item,
#myTabContent > .tab-pane#history .history-entry,
#myTabContent > .tab-pane#history .timeline-content {
    overflow: visible !important;
}

#myTabContent > .tab-pane#history .timeline {
    padding: 6px 0 !important;
}

#myTabContent > .tab-pane#history .timeline-item {
    padding-left: 0 !important;
    margin-bottom: 2px !important;
}

#myTabContent > .tab-pane#history .timeline-item::before {
    display: none !important;
}

#myTabContent > .tab-pane#history .history-entry.notification-dropdown-item {
    padding: 12px 16px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    gap: 12px !important;
    align-items: flex-start !important;
}

#myTabContent > .tab-pane#history .timeline-item:last-child .history-entry.notification-dropdown-item {
    border-bottom: none !important;
}

#myTabContent > .tab-pane#history .history-entry.notification-dropdown-item:hover,
#myTabContent > .tab-pane#history .history-entry.notification-dropdown-item:focus,
#myTabContent > .tab-pane#history .history-entry.notification-dropdown-item:focus-within {
    background-color: transparent !important;
    box-shadow: none !important;
    filter: var(--omniroq-hover-glow-filter) !important;
    transform: scale(var(--omniroq-hover-pop-scale)) !important;
    z-index: 2;
}

#myTabContent > .tab-pane#history .history-entry .timeline-marker.notification-item-icon {
    color: var(--omniroq-accent-text, #78c2ad) !important;
}

#myTabContent > .tab-pane#history .history-entry .notification-item-message {
    color: var(--omniroq-accent-text, #78c2ad) !important;
    font-size: 0.9rem !important;
    line-height: 1.4 !important;
    font-weight: 600 !important;
}

#myTabContent > .tab-pane#history .history-entry .history-entry-meta {
    margin-top: 4px !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

#myTabContent > .tab-pane#history .history-entry .notification-item-time,
#myTabContent > .tab-pane#history .history-entry .history-entry-meta,
#myTabContent > .tab-pane#history .history-entry .history-entry-meta strong {
    color: #a0a9b8 !important;
}

#myTabContent > .tab-pane#history .history-entry .history-entry-meta strong {
    font-weight: 650;
}

#myTabContent > .tab-pane#history .history-entry .history-entry-detail {
    display: none !important;
}

#myTabContent > .tab-pane#history .history-entry .history-entry-detail p {
    display: none !important;
}

@media (max-width: 767.98px) {
    #myTabContent > .tab-pane#history .history-entry .history-entry-meta {
        flex-direction: column;
        gap: 4px !important;
    }
}

#myTabContent > .tab-pane#history > .mx-sm-3 > .d-flex.align-items-start.gap-2.mb-2 .badge {
    min-width: 20px;
    padding: 0;
    border: none;
    background: transparent !important;
    color: var(--omniroq-accent-text, #78c2ad) !important;
    font-size: 0.95rem;
    line-height: 1;
}

@media (max-width: 767.98px) {
    #myTabContent > .tab-pane#history .timeline-content > .d-flex {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 4px;
    }
}

#myTabContent > .tab-pane#comments .card-text,
#myTabContent > .tab-pane#comments p,
#myTabContent > .tab-pane#comments small,
#myTabContent > .tab-pane#files td,
#myTabContent > .tab-pane#files a,
#myTabContent > .tab-pane#files small,
#myTabContent > .tab-pane#history h6,
#myTabContent > .tab-pane#history p,
#myTabContent > .tab-pane#history small,
#myTabContent > .tab-pane#timeline span,
#myTabContent > .tab-pane#timeline small,
#myTabContent > .tab-pane#description p,
#myTabContent > .tab-pane#info p,
#myTabContent > .tab-pane#info li {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Teal section framing (Minty `secondary` borders are pink) */
.Omniroq-teal-frame {
    border: 1px solid rgba(var(--omniroq-accent-rgb, 120,194,173),0.35) !important;
    transition: transform var(--o-dur) var(--o-ease), box-shadow var(--o-dur) var(--o-ease), border-color var(--o-dur) var(--o-ease);
    transform-origin: center center;
    will-change: transform;
}

.Omniroq-teal-frame:hover {
    transform: scale(var(--omniroq-hover-pop-scale, 1.01));
    filter: var(--omniroq-hover-glow-filter, none);
    box-shadow: 0 4px 18px rgba(var(--omniroq-accent-rgb, 120,194,173),0.18);
    border-color: rgba(var(--omniroq-accent-rgb, 120,194,173),0.65) !important;
}

.Omniroq-teal-frame .card-header {
    border-bottom: 1px solid rgba(var(--omniroq-accent-rgb, 120,194,173),0.25) !important;
}

/* ============================================================
   Global overrides — neutralise Bootswatch Minty pink/salmon
   `secondary` (#f3969a) across the entire site.
   Target palette: teal var(--omniroq-accent, #78c2ad)  ·  gold #face66
   ============================================================ */

/* --- borders ------------------------------------------------ */
.border-secondary {
    border-color: rgba(var(--omniroq-accent-rgb, 120,194,173), 0.35) !important;
}

/* --- outline button ----------------------------------------- */
.btn-outline-secondary {
    --bs-btn-color: var(--omniroq-accent-text, #78c2ad);
    --bs-btn-border-color: var(--omniroq-accent, #78c2ad);
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: var(--omniroq-accent, #78c2ad);
    --bs-btn-hover-border-color: var(--omniroq-accent, #78c2ad);
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: var(--omniroq-accent, #78c2ad);
    --bs-btn-active-border-color: var(--omniroq-accent, #78c2ad);
    color: var(--omniroq-accent-text, #78c2ad);
    border-color: var(--omniroq-accent, #78c2ad);
}
.btn-outline-secondary:hover,
.btn-outline-secondary:active,
.btn-outline-secondary.active,
.btn-outline-secondary:focus-visible {
    background-color: var(--omniroq-accent, #78c2ad);
    border-color: var(--omniroq-accent, #78c2ad);
    color: #fff;
}

/* --- solid button ------------------------------------------- */
.btn-secondary {
    --bs-btn-bg: var(--omniroq-accent, #78c2ad);
    --bs-btn-border-color: var(--omniroq-accent, #78c2ad);
    --bs-btn-color: #ffffff;
    --bs-btn-hover-bg: #63b29b;
    --bs-btn-hover-border-color: #63b29b;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-active-bg: #63b29b;
    --bs-btn-active-border-color: #63b29b;
    --bs-btn-active-color: #ffffff;
    background-color: var(--omniroq-accent, #78c2ad);
    border-color: var(--omniroq-accent, #78c2ad);
    color: #fff;
}
.btn-secondary:hover,
.btn-secondary:active,
.btn-secondary.active {
    background-color: #63b29b;
    border-color: #63b29b;
    color: #fff;
}

.btn-success {
    transition: transform var(--o-dur) var(--o-ease), background-color var(--o-dur) var(--o-ease), color var(--o-dur) var(--o-ease), border-color var(--o-dur) var(--o-ease), filter var(--o-dur) var(--o-ease) !important;
    will-change: transform, filter;
    --bs-btn-bg: var(--omniroq-accent, #78c2ad);
    --bs-btn-border-color: var(--omniroq-accent, #78c2ad);
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
    --bs-btn-hover-bg: color-mix(in srgb, var(--omniroq-accent, #78c2ad) 80%, #000);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--omniroq-accent, #78c2ad) 75%, #000);
    --bs-btn-active-bg: color-mix(in srgb, var(--omniroq-accent, #78c2ad) 75%, #000);
    --bs-btn-active-border-color: color-mix(in srgb, var(--omniroq-accent, #78c2ad) 70%, #000);
    background-color: var(--omniroq-accent, #78c2ad);
    border-color: var(--omniroq-accent, #78c2ad);
    color: #fff;
}

.btn-success:hover,
.btn-success:active,
.btn-success.active,
.btn-success:focus-visible {
    background-color: color-mix(in srgb, var(--omniroq-accent, #78c2ad) 80%, #000);
    border-color: color-mix(in srgb, var(--omniroq-accent, #78c2ad) 75%, #000);
    color: #fff;
}

/* --- badges ------------------------------------------------- */
.badge.bg-secondary {
    background-color: #face66 !important;
    color: #212529 !important;
}

/* --- text colour -------------------------------------------- */
.text-secondary {
    color: var(--omniroq-accent-text, #78c2ad) !important;
}

/* --- translucent tinted backgrounds ------------------------- */
.bg-secondary.bg-opacity-25 {
    background-color: rgba(var(--omniroq-accent-rgb, 120,194,173), 0.18) !important;
}
.bg-secondary.bg-opacity-10 {
    background-color: rgba(var(--omniroq-accent-rgb, 120,194,173), 0.08) !important;
}
.bg-secondary {
    background-color: var(--omniroq-accent, #78c2ad) !important;
}

/* --- progress bars using secondary -------------------------- */
.progress .bg-secondary {
    background-color: var(--omniroq-accent, #78c2ad) !important;
}

/* --- card-header with border-secondary ---------------------- */
.card-header.border-secondary,
.card .card-header.border-secondary {
    border-color: rgba(var(--omniroq-accent-rgb, 120,194,173), 0.25) !important;
}

/* --- hr dividers -------------------------------------------- */
hr.border-secondary {
    border-color: rgba(var(--omniroq-accent-rgb, 120,194,173), 0.35) !important;
    opacity: 1;
}

/* --- form-check / form-switch secondary accents ------------- */
.form-check-input:checked {
    background-color: var(--omniroq-accent, #78c2ad);
    border-color: var(--omniroq-accent, #78c2ad);
}

/* Buttons disabled state */
.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Back to top floating button */
#OmniroqBackToTop {
    position: fixed;
    right: 86px;
    bottom: 22px;
    z-index: 2500;
    width: 42px;
    height: 42px;
    border-radius: 999px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(6px);
    transition: opacity var(--o-dur) var(--o-ease), transform var(--o-dur) var(--o-ease), visibility var(--o-dur) var(--o-ease) !important;
}

#OmniroqBackToTop.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

/* Self-contained hover — does NOT use the centralized hover system so it
   never flickers from competing !important rules. Uses the variables so it
   still visually matches the selected hover effect. The position/z-index are
   re-asserted because the universal button-hover rule forces
   position:relative + z-index:1050, which would yank this fixed button out of
   place and cause a rapid appear/disappear flicker. */
#OmniroqBackToTop.show:hover {
    position: fixed !important;
    z-index: 2500 !important;
    transform: translateY(0) scale(var(--omniroq-hover-pop-scale)) !important;
    filter: var(--omniroq-hover-glow-filter) !important;
}

/* Notification Toasts - Using Bootstrap Toasts */
.toast-container {
    z-index: 9999 !important;
    /* top-right, directly under the notification icon in navbar */
    top: 40px !important;
    right: 0px !important;
    left: auto !important;
    bottom: auto !important;
}

/* Left-sidebar layout has no top navbar — move the toast up to fill that space. */
body.omniroq-navbar-left_auto .toast-container {
    top: 10px !important;
}

.toast.Omniroq-toast {
    border: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    /* Dark frame so rounded corners blend into border (no white anti-aliasing) */
    background: #343a40 !important;
    border: 1px solid #2c2c2c !important; /* dark gray border to blend with bottom background */
    border-radius: 4px;
    margin-bottom: 6px;
    overflow: hidden; /* ensure child backgrounds don't show white in corners */
}

/* Small one-line toasts */
.toast.Omniroq-mini-toast {
    min-width: 220px;
    max-width: 320px;
}

/* Larger "Notifications" popup toast */
.toast.Omniroq-notifications-toast {
    min-width: 400px;
    max-width: 520px;
}

/* Configure Dashboard prompt toast */
.toast.Omniroq-dashboard-config-toast {
    width: 80vw;
    max-width: calc(100vw - 24px);
    max-height: 80vh;
    /* Bootstrap sets .toast.show { display: block; } so force flex for scroll layout */
    display: flex !important;
    flex-direction: column;
    overflow: hidden;
}

.toast.Omniroq-dashboard-config-toast .toast-body {
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
}

.toast.Omniroq-toast .toast-header {
    border-bottom: 1px solid #2c2c2c;
    border-radius: 4px 4px 0 0;
    padding: 6px 10px;
    font-size: 0.75rem;
    background-color: #343a40 !important; /* dark gray header/window */
    color: #e8eef7 !important;
}

/* Make the footer match the dark header so rounded corners blend */
.toast.Omniroq-toast .toast-footer {
    background-color: #343a40 !important;
    color: #e8eef7 !important;
    border-top: 1px solid #2c2c2c;
    padding: 10px 16px;
}

.toast.Omniroq-toast .toast-body {
    color: #e8eef7 !important; /* light text for dark background */
    padding: 8px 10px !important;
    font-size: 0.8rem !important;
    line-height: 1.3 !important;
    background-color: #212529 !important; /* match page background */
}

/* ── Global dropdown-menu style (matches cs-dropdown exactly) ───────── */
/* Applies to Bootstrap dropdowns across the app. */
.dropdown-menu {
    background-color: var(--omniroq-dropdown-bg) !important;
    color: var(--omniroq-dropdown-text) !important;
    border: 1px solid var(--omniroq-dropdown-border) !important;
    border-radius: 0.375rem !important;
    box-shadow: var(--omniroq-dropdown-shadow) !important;
    padding: 4px !important;
    font-size: 0.78rem;
}

.dropdown-menu .dropdown-item {
    color: var(--omniroq-dropdown-text) !important;
    background: transparent !important;
    border-radius: 4px !important;
    margin: 1px 2px;
    padding: 0 8px;
    height: 28px;
    line-height: 28px;
    font-size: 0.78rem;
    white-space: nowrap;
    transform-origin: center center;
    transition: transform var(--o-dur) var(--o-ease), background var(--o-dur) var(--o-ease), color var(--o-dur) var(--o-ease), filter var(--o-dur) var(--o-ease);
    will-change: transform;
}

.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
    background: transparent !important;
    color: var(--omniroq-accent-text, #78c2ad) !important;
    filter: var(--omniroq-hover-glow-filter);
}

@media (min-width: 576px) {
    .dropdown-menu .dropdown-item:hover,
    .dropdown-menu .dropdown-item:focus {
        transform: scale(var(--omniroq-hover-pop-scale));
        z-index: 1;
        position: relative;
    }
}

.dropdown-menu .dropdown-item.active,
.dropdown-menu .dropdown-item:active {
    background: rgba(var(--omniroq-accent-rgb, 120,194,173),0.30) !important;
    color: #fff !important;
}

/* Navbar dropdowns – inherit the same cs-dropdown style */
.navbar .dropdown-menu .dropdown-item.active,
.navbar .dropdown-menu .dropdown-item:active {
    background: rgba(var(--omniroq-accent-rgb, 120,194,173),0.30) !important;
    color: #fff !important;
}

/* Top navbar section dropdowns — match left-collapsible flyout styling */
.navbar .dropdown-menu.dropdown-menu-crm {
    width: max-content;
    min-width: 280px !important;
    max-width: min(92vw, 360px);
    overflow-x: hidden !important;
    overflow-y: auto;
    max-height: calc(100vh - 80px);
    background: #1e2329 !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 12px !important;
    padding: 6px 4px !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.58),
                0 0 0 1px rgba(var(--omniroq-accent-rgb,120,194,173), 0.08),
                0 0 18px rgba(var(--omniroq-accent-rgb,120,194,173), 0.06) !important;
    animation: olsbFlyoutIn var(--o-dur) var(--o-ease) both;
}
body[data-bs-theme="light"] .navbar .dropdown-menu.dropdown-menu-crm {
    background: #fff !important;
    border-color: rgba(0,0,0,0.09) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18) !important;
}

.navbar .dropdown-menu.dropdown-menu-crm .dropdown-item {
    display: flex;
    align-items: center;
    gap: 9px;
    width: auto;
    min-width: 100%;
    height: auto;
    line-height: 1.3;
    margin: 1px 4px;
    padding: 7px 14px 7px 12px;
    border-radius: 8px !important;
    white-space: nowrap;
    color: rgba(255,255,255,0.60) !important;
    background: none !important;
    transform-origin: left center;
    transition: color var(--o-dur) var(--o-ease),
                filter var(--o-dur) var(--o-ease),
                transform var(--o-dur) var(--o-ease);
}
.navbar .dropdown-menu.dropdown-menu-crm .dropdown-item i {
    width: 16px;
    font-size: 0.95rem;
    flex-shrink: 0;
    text-align: center;
    color: rgba(255,255,255,0.38) !important;
    transition: color var(--o-dur) var(--o-ease),
                filter var(--o-dur) var(--o-ease),
                transform var(--o-dur) var(--o-ease);
}
.navbar .dropdown-menu.dropdown-menu-crm .dropdown-item:hover,
.navbar .dropdown-menu.dropdown-menu-crm .dropdown-item:focus {
    background: none !important;
    color: rgba(255,255,255,0.92) !important;
    transform: scale(var(--omniroq-hover-pop-scale));
    filter: var(--omniroq-hover-glow-filter);
}
.navbar .dropdown-menu.dropdown-menu-crm .dropdown-item:hover i,
.navbar .dropdown-menu.dropdown-menu-crm .dropdown-item:focus i {
    color: rgba(255,255,255,0.92) !important;
    filter: var(--omniroq-hover-glow-filter);
    transform: scale(var(--omniroq-hover-pop-scale));
}
body[data-bs-theme="light"] .navbar .dropdown-menu.dropdown-menu-crm .dropdown-item {
    color: rgba(0,0,0,0.55) !important;
}
body[data-bs-theme="light"] .navbar .dropdown-menu.dropdown-menu-crm .dropdown-item i {
    color: rgba(0,0,0,0.35) !important;
}
body[data-bs-theme="light"] .navbar .dropdown-menu.dropdown-menu-crm .dropdown-item:hover,
body[data-bs-theme="light"] .navbar .dropdown-menu.dropdown-menu-crm .dropdown-item:focus {
    color: rgba(0,0,0,0.82) !important;
}
body[data-bs-theme="light"] .navbar .dropdown-menu.dropdown-menu-crm .dropdown-item:hover i,
body[data-bs-theme="light"] .navbar .dropdown-menu.dropdown-menu-crm .dropdown-item:focus i {
    color: rgba(0,0,0,0.82) !important;
}

/* Navbar dropdown: show nested submenu to the right */
.dropdown-submenu {
    position: relative;
}
.dropdown-submenu > .dropdown-menu {
    top: 0;
    left: 100%;
    margin-left: 0.05rem;
}

/* Make submenu toggles show a right-pointing caret so they indicate side-opening */
.dropdown-submenu > .dropdown-item.dropdown-toggle::after,
.dropdown-submenu > .dropdown-toggle::after {
    /* Rotate Bootstrap's default caret to point right */
    transform: rotate(-90deg);
    transform-origin: center;
    margin-left: 0.45rem;
}

/* Slightly indent submenu toggle text so caret doesn't overlap */
.dropdown-submenu > .dropdown-item.dropdown-toggle {
    padding-right: 1.1rem;
}

/* ── CRM mega-dropdown ───────────────────────────────────────────────── */
.dropdown-menu-crm {
    max-width: 96vw;
    overflow-x: auto;
}

/* On smaller screens collapse columns to 2 */
@media (max-width: 767px) {
    .dropdown-menu-crm {
        min-width: unset !important;
        width: 98vw;
    }
    .dropdown-menu-crm .row > [class*="col-"] {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* On very small screens single column */
@media (max-width: 479px) {
    .dropdown-menu-crm .row > [class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* Vertical divider between columns (decorative right-border on all but last) */
.dropdown-menu-crm .row > [class*="col-"]:not(:last-child) {
    border-right: 1px solid rgba(144,153,166,0.18);
}

/* Keep dropdown-header readable inside mega panel */
.dropdown-menu-crm .dropdown-header {
    font-size: 0.68rem;
    padding: 4px 8px 2px;
    color: var(--omniroq-accent-text, #78c2ad) !important;
}

/* ── Navbar dropdown items – inherit the global cs-dropdown style */
.navbar .dropdown-menu .dropdown-item {
    transition: transform var(--o-dur) var(--o-ease), background var(--o-dur) var(--o-ease), color var(--o-dur) var(--o-ease), filter var(--o-dur) var(--o-ease);
    background: transparent !important;
    border-radius: 4px !important;
    transform-origin: center center;
    margin: 1px 2px;
    padding: 0 8px;
    height: 28px;
    line-height: 28px;
    font-size: 0.78rem;
}

.navbar .dropdown-menu .dropdown-item:hover,
.navbar .dropdown-menu .dropdown-item:focus {
    background: transparent !important;
    color: var(--omniroq-accent-text, #78c2ad) !important;
    transform: scale(var(--omniroq-hover-pop-scale));
    filter: var(--omniroq-hover-glow-filter);
    box-shadow: none;
    z-index: 1; /* keep hovered item above siblings to avoid clipping */
}

/* Dropdown divider – subtle in dark mode */
.dropdown-menu .dropdown-divider {
    border-color: rgba(160,169,184,0.20);
    margin: 3px 6px;
}

/* Ensure submenu shows on hover for desktop */
@media (min-width: 992px) {
    .dropdown-submenu:hover > .dropdown-menu {
        display: block;
    }
}

/* Responsive: on small screens, stack submenu items vertically instead of opening to the side.
   This prevents the hamburger/collapsed menu from overflowing off the right edge.
*/
@media (max-width: 991.98px) {
    /* Make any dropdown inside the collapsed navbar full-width */
    .navbar .dropdown-menu {
        width: 100% !important;
        box-shadow: none !important;
        border: none !important;
        padding: 0.25rem 0 !important;
    }

    /* Make submenu behave like a regular nested list (stacked) but keep it collapsed
       by default; it will expand when `.submenu-open` is toggled by JS. */
    .dropdown-submenu {
        position: static !important;
    }
    .dropdown-submenu > .dropdown-menu {
        position: static !important;
        left: auto !important;
        top: auto !important;
        margin: 0 !important;
        display: none !important;
        box-shadow: none !important;
    }

    /* When JS toggles this class, show the nested menu */
    .dropdown-submenu.submenu-open > .dropdown-menu {
        display: block !important;
    }

    /* Reset caret to point down on small screens so users expect vertical expansion */
    .dropdown-submenu > .dropdown-item.dropdown-toggle::after,
    .dropdown-submenu > .dropdown-toggle::after {
        transform: rotate(0deg) !important;
        margin-left: 0.6rem;
    }

    /* Make dropdown items fill available width and wrap if necessary */
    .navbar .dropdown-menu .dropdown-item {
        display: block;
        width: 100% !important;
        padding: 0.5rem 1rem !important;
        box-sizing: border-box;
    }

    /* Indent nested submenu items so they are distinguishable from their parent
       Increase indentation for both stacked (mobile) and side-opening (desktop)
    */
    .dropdown-submenu > .dropdown-menu .dropdown-item {
        padding-left: 2rem !important;
    }
    /* Slightly increase indent for a deeper visual hierarchy when mobile stacked */
    .navbar .dropdown-menu .dropdown-submenu > .dropdown-menu .dropdown-item {
        padding-left: 2.25rem !important;
    }

    /* Slightly reduce padding for the collapsed nav container */
    .navbar-collapse {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    /* Use CSS Grid on small screens so brand + icons stay on the top row and the
       collapsed menu occupies a full-width row below. This avoids reflow/jump when
       the collapse toggles.
    */
    .navbar .container-fluid {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto;
        grid-template-areas:
            "brand icons"
            "collapse collapse";
        align-items: center;
        gap: 0.5rem;
        width: 100%;
    }

    .navbar .container-fluid > .navbar-brand {
        grid-area: brand;
        justify-self: start;
    }

    .navbar .container-fluid > .d-flex.ms-auto {
        grid-area: icons;
        justify-self: end;
    }

    .navbar .container-fluid > .collapse {
        grid-area: collapse;
        width: 100%;
    }
}

    /* Ensure navbar is document-flow (not overlay) so the opened collapse pushes page content down.
       This avoids the hamburger menu overlaying the page on small screens.
    */
    .navbar {
        position: relative;
        z-index: 1080;
        overflow: visible !important;
        isolation: isolate;
        padding-bottom: calc(var(--bs-navbar-padding-y, 0.5rem) + 0.22rem);
        margin-bottom: -0.22rem;
    }

    .navbar.Omniroq-navbar-dropdown-open {
        z-index: 1110;
    }

    .navbar .container-fluid,
    .navbar .navbar-collapse,
    .navbar .navbar-nav,
    .navbar .nav-item,
    .navbar .d-flex.ms-auto {
        overflow: visible !important;
    }

    .navbar .dropdown-menu,
    .dropdown-menu-crm {
        z-index: 1090 !important;
    }

    .navbar.Omniroq-navbar-dropdown-open .dropdown-menu,
    .navbar.Omniroq-navbar-dropdown-open .dropdown-menu-crm {
        z-index: 1120 !important;
    }

    /* Make sure collapse panels participate in layout and are not positioned absolutely */
    .navbar .collapse {
        position: static !important;
    }

    .navbar .collapse.show {
        display: block !important;
    }

/* List pages: make the top controls usable on mobile */
@media (max-width: 991.98px) {
    .list-header {
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .list-header h1 {
        font-size: 1.5rem;
        margin-bottom: 0;
    }

    .list-header .container-fluid {
        padding-left: 0;
        padding-right: 0;
        width: 100%;
    }

    .list-header form {
        width: 100%;
    }

    .list-header .btn-group {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .list-toolbar {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    /* Export buttons: allow horizontal scroll instead of crushing */
    .list-toolbar .custom-buttons {
        overflow-x: auto;
        flex-wrap: nowrap;
        max-width: 100%;
        padding-bottom: 0.25rem;
        gap: 0.25rem;
    }

    .list-toolbar .custom-buttons .btn {
        white-space: nowrap;
    }

    /* Tabs: allow horizontal scroll on mobile instead of wrapping/overflow */
    .nav-tabs {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }

    .nav-tabs .nav-link {
        white-space: nowrap;
    }

    .detail-header {
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .detail-actions {
        width: 100%;
        justify-content: flex-start !important;
        gap: 0.5rem;
    }

    .detail-columns {
        flex-direction: column;
        gap: 1rem;
    }
}

.back-button-wrap {
    width: 44px;
    max-width: 44px;
    flex: 0 0 44px;
}

/* Replace image-based back buttons with an accent-aware custom back glyph. */
.back-button-wrap img,
.crm-back-icon-img,
.crm-back-link > img,
.crm-back-link > i,
.crm-back-link > span {
    display: none !important;
}

.back-button-wrap a,
a.crm-back-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    color: var(--omniroq-accent-text, #78c2ad);
    background: transparent;
    border: 1px solid transparent;
    text-decoration: none;
    transition: transform var(--o-dur) var(--o-ease), filter var(--o-dur) var(--o-ease), color var(--o-dur) var(--o-ease), opacity var(--o-dur) var(--o-ease), background-color var(--o-dur) var(--o-ease), border-color var(--o-dur) var(--o-ease);
    will-change: transform, filter;
}

.back-button-wrap a::before,
a.crm-back-link::before,
.detail-header a.hover-zoom::before,
.list-header a.hover-zoom::before,
.container-fluid.mt-3.px-3 a.hover-zoom::before,
.container-fluid.py-4 a.hover-zoom::before,
.container.mt-3 a.hover-zoom::before {
    content: "";
    display: block;
    width: 30px;
    height: 30px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='black' d='M28.6 12.8a3 3 0 0 1 0 4.24L16.64 29H38c11.05 0 20 8.95 20 20a3 3 0 1 1-6 0c0-7.73-6.27-14-14-14H16.88l11.7 11.72a3 3 0 0 1-4.24 4.24l-16.8-16.9a3 3 0 0 1 0-4.22l16.82-16.8a3 3 0 0 1 4.24 0Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='black' d='M28.6 12.8a3 3 0 0 1 0 4.24L16.64 29H38c11.05 0 20 8.95 20 20a3 3 0 1 1-6 0c0-7.73-6.27-14-14-14H16.88l11.7 11.72a3 3 0 0 1-4.24 4.24l-16.8-16.9a3 3 0 0 1 0-4.22l16.82-16.8a3 3 0 0 1 4.24 0Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.back-button-wrap a:hover,
a.crm-back-link:hover,
.back-button-wrap a:focus-visible,
a.crm-back-link:focus-visible {
    color: var(--omniroq-accent-text, #78c2ad);
    background-color: transparent;
    border-color: transparent;
    filter: var(--omniroq-hover-glow-filter, none);
    transform: scale(var(--omniroq-hover-pop-scale, 1.08));
    text-decoration: none;
}

/* ============================================================
   Navbar icon buttons — teal colour, outline→fill cross-fade, pop on hover
   ============================================================ */
.nav-icon-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    transition: transform var(--o-dur) var(--o-ease), filter var(--o-dur) var(--o-ease), opacity var(--o-dur) var(--o-ease), background-color var(--o-dur) var(--o-ease);
    will-change: transform, filter, opacity;
}

.nav-icon-wrap .nav-icon-outline,
.nav-icon-wrap .nav-icon-fill {
    font-size: 1.35rem;
    color: var(--omniroq-accent-text, #78c2ad);
    transition: opacity var(--o-dur) var(--o-ease), transform var(--o-dur) var(--o-ease), filter var(--o-dur) var(--o-ease), color var(--o-dur) var(--o-ease);
    line-height: 1;
}

.nav-icon-wrap .nav-icon-fill {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
}

.nav-icon-wrap .nav-icon-outline {
    opacity: 1;
}

/* On button/link hover — swap to fill icon */
.navbar .nav-link:hover .nav-icon-wrap .nav-icon-fill,
.navbar .nav-link:focus-visible .nav-icon-wrap .nav-icon-fill,
.navbar #notificationBell:hover .nav-icon-wrap .nav-icon-fill,
.navbar #notificationBell:focus-visible .nav-icon-wrap .nav-icon-fill,
.navbar #account-offcanvas-toggle:hover .nav-icon-wrap .nav-icon-fill,
.navbar #account-offcanvas-toggle:focus-visible .nav-icon-wrap .nav-icon-fill {
    opacity: 1;
    transform: scale(1);
}

.navbar .nav-link:hover .nav-icon-wrap .nav-icon-outline,
.navbar .nav-link:focus-visible .nav-icon-wrap .nav-icon-outline,
.navbar #notificationBell:hover .nav-icon-wrap .nav-icon-outline,
.navbar #notificationBell:focus-visible .nav-icon-wrap .nav-icon-outline,
.navbar #account-offcanvas-toggle:hover .nav-icon-wrap .nav-icon-outline,
.navbar #account-offcanvas-toggle:focus-visible .nav-icon-wrap .nav-icon-outline {
    opacity: 0;
    transform: scale(.92);
}

/* ------------------------------------------------------------------
   Unified visual system for the newer app pages.
   These templates commonly use .container-fluid.py-4 or .container-fluid.mt-3.px-3
   wrappers, and we align them to the same dark panel/table language used by
   Leads, Clients, and Inventory.
------------------------------------------------------------------- */
.navbar #notificationBell,
.navbar #account-offcanvas-toggle,
.navbar #notificationBell .nav-icon-wrap,
.navbar #account-offcanvas-toggle .nav-icon-wrap,
.navbar #account-offcanvas-toggle img {
    transition: transform var(--o-dur) var(--o-ease), filter var(--o-dur) var(--o-ease), opacity var(--o-dur) var(--o-ease), box-shadow var(--o-dur) var(--o-ease) !important;
    will-change: transform, filter, opacity;
}

.navbar #notificationBell:hover .nav-icon-wrap,
.navbar #notificationBell:focus-visible .nav-icon-wrap,
.navbar #account-offcanvas-toggle:hover .nav-icon-wrap,
.navbar #account-offcanvas-toggle:focus-visible .nav-icon-wrap,
.navbar #account-offcanvas-toggle:hover img,
.navbar #account-offcanvas-toggle:focus-visible img {
    transform: scale(var(--omniroq-navbar-pop-scale));
    filter: var(--omniroq-hover-glow-filter);
}

.offcanvas,
.offcanvas.showing,
.offcanvas.show:not(.hiding),
.offcanvas.hiding {
    transition: transform var(--o-dur) var(--o-ease), visibility var(--o-dur) var(--o-ease) !important;
    z-index: 1145 !important;
}

.offcanvas-backdrop,
.offcanvas-backdrop.show,
.offcanvas-backdrop.fade {
    transition: opacity var(--o-dur) var(--o-ease) !important;
    z-index: 1140 !important;
}

.offcanvas.offcanvas-end {
    top: var(--omniroq-navbar-offset, 56px) !important;
    height: calc(100vh - var(--omniroq-navbar-offset, 56px)) !important;
    max-height: calc(100vh - var(--omniroq-navbar-offset, 56px)) !important;
}

.offcanvas-backdrop {
    top: var(--omniroq-navbar-offset, 56px) !important;
    height: calc(100vh - var(--omniroq-navbar-offset, 56px)) !important;
}

.container-fluid.mt-3.px-3 {
    padding-left: 8px !important;
    padding-right: 8px !important;
}

/* Remove extra inner margins that list-page toolbars/tables apply via mx-sm-3 */
.container-fluid.mt-3.px-3 .mx-sm-3 {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.container-fluid.py-4,
.container-fluid.mt-3.px-3 {
    --crm-app-panel-bg: #1f2328;
    --crm-app-panel-bg-alt: #161b22;
    --crm-app-panel-border: rgba(160, 169, 184, 0.35);
    --crm-app-panel-border-strong: rgba(255, 255, 255, 0.12);
    --crm-app-text: #e8eef7;
    --crm-app-muted: #9aa7b5;
}

.container-fluid.py-4 > .d-flex.justify-content-between.align-items-center:first-child,
.container-fluid.mt-3.px-3 > .d-flex.justify-content-between.align-items-center:first-child,
.container-fluid.py-4 > .d-flex.justify-content-between.align-items-start:first-child,
.container-fluid.mt-3.px-3 > .d-flex.justify-content-between.align-items-start:first-child {
    margin-left: 1rem;
    margin-right: 1rem;
    padding-bottom: 0.85rem;
    margin-bottom: 1rem !important;
    border-bottom: 1px solid var(--crm-app-panel-border-strong);
}

.container-fluid.py-4 h1,
.container-fluid.py-4 h2,
.container-fluid.py-4 h3,
.container-fluid.py-4 h4,
.container-fluid.mt-3.px-3 h1,
.container-fluid.mt-3.px-3 h2,
.container-fluid.mt-3.px-3 h3,
.container-fluid.mt-3.px-3 h4 {
    color: var(--crm-app-text);
}

.container-fluid.py-4 .card.bg-dark,
.container-fluid.mt-3.px-3 .card.bg-dark,
.container-fluid.py-4 a.card.bg-dark,
.container-fluid.mt-3.px-3 a.card.bg-dark {
    background: var(--crm-app-panel-bg) !important;
    border-color: var(--crm-app-panel-border) !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
    border-radius: 0.85rem;
}

.container-fluid.py-4 .card.bg-dark .card-header,
.container-fluid.mt-3.px-3 .card.bg-dark .card-header {
    background: var(--crm-app-panel-bg-alt) !important;
    border-bottom-color: var(--crm-app-panel-border) !important;
    color: var(--crm-app-text);
    font-weight: 600;
}

.container-fluid.py-4 .table-responsive,
.container-fluid.mt-3.px-3 .table-responsive {
    border-radius: 0.85rem;
    margin-top: 6px;
    /* Prevent resize handle (inside column edge) from ever triggering horizontal scroll */
    overflow-x: clip;
    overflow-y: visible;
}

.container-fluid.py-4 .table.table-dark,
.container-fluid.mt-3.px-3 .table.table-dark {
    --bs-table-bg: var(--crm-app-panel-bg);
    --bs-table-striped-bg: #242b35;
    --bs-table-hover-bg: transparent;
    --bs-table-border-color: var(--crm-app-panel-border);
    margin-bottom: 0;
}

.container-fluid.py-4 .table.table-dark thead th,
.container-fluid.mt-3.px-3 .table.table-dark thead th {
    color: var(--crm-app-text) !important;
    border-bottom-color: var(--crm-app-panel-border) !important;
    font-weight: 600;
}

.container-fluid.py-4 .table.table-dark tbody td,
.container-fluid.mt-3.px-3 .table.table-dark tbody td {
    vertical-align: middle;
}

.container-fluid.py-4 .form-control,
.container-fluid.py-4 .form-select,
.container-fluid.py-4 textarea,
.container-fluid.mt-3.px-3 .form-control,
.container-fluid.mt-3.px-3 .form-select,
.container-fluid.mt-3.px-3 textarea {
    background-color: #11161d;
    border-color: var(--crm-app-panel-border);
    color: var(--crm-app-text);
}

.container-fluid.py-4 .form-control:focus,
.container-fluid.py-4 .form-select:focus,
.container-fluid.py-4 textarea:focus,
.container-fluid.mt-3.px-3 .form-control:focus,
.container-fluid.mt-3.px-3 .form-select:focus,
.container-fluid.mt-3.px-3 textarea:focus {
    background-color: #11161d;
    color: var(--crm-app-text);
    border-color: rgba(13, 110, 253, 0.65);
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.15);
}

.container-fluid.py-4 .text-muted,
.container-fluid.mt-3.px-3 .text-muted,
.container-fluid.py-4 .text-secondary,
.container-fluid.mt-3.px-3 .text-secondary {
    color: var(--crm-app-muted) !important;
}

.container-fluid.py-4 .nav-tabs,
.container-fluid.mt-3.px-3 .nav-tabs {
    border-bottom-color: var(--crm-app-panel-border);
}

.container-fluid.py-4 .nav-tabs .nav-link,
.container-fluid.mt-3.px-3 .nav-tabs .nav-link {
    color: var(--crm-app-muted);
    background: transparent;
    border-color: transparent;
}

.nav-tabs .nav-link,
.nav-pills .nav-link {
    background: transparent !important;
}

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus,
.nav-pills .nav-link:hover,
.nav-pills .nav-link:focus {
    background: transparent !important;
    box-shadow: none !important;
    filter: var(--omniroq-hover-glow-filter);
}

.container-fluid.py-4 .nav-tabs .nav-link.active,
.container-fluid.mt-3.px-3 .nav-tabs .nav-link.active {
    background: var(--crm-app-panel-bg-alt);
    color: var(--crm-app-text);
    border-color: var(--crm-app-panel-border) var(--crm-app-panel-border) transparent;
}

.container-fluid.py-4 .progress,
.container-fluid.mt-3.px-3 .progress {
    background-color: #11161d;
}

.container-fluid.py-4 .badge,
.container-fluid.mt-3.px-3 .badge {
    font-weight: 600;
}

.container-fluid.py-4 .btn-outline-light,
.container-fluid.mt-3.px-3 .btn-outline-light {
    border-color: var(--crm-app-panel-border);
    color: var(--crm-app-text);
}

.container-fluid.py-4 .btn-outline-light:hover,
.container-fluid.mt-3.px-3 .btn-outline-light:hover {
    background-color: rgba(255, 255, 255, 0.08);
    color: #fff;
}

@media (max-width: 991.98px) {
    .container-fluid.py-4 > .d-flex.justify-content-between.align-items-center:first-child,
    .container-fluid.mt-3.px-3 > .d-flex.justify-content-between.align-items-center:first-child,
    .container-fluid.py-4 > .d-flex.justify-content-between.align-items-start:first-child,
    .container-fluid.mt-3.px-3 > .d-flex.justify-content-between.align-items-start:first-child {
        margin-left: 0;
        margin-right: 0;
        gap: 0.75rem;
        flex-wrap: wrap;
    }
}

/* Dynamic tables (e.g. Notifications) should not cause page overflow */
#notificationsContainer {
    overflow-x: auto;
}

/* Make Dashboard configuration toast follow advanced filter color scheme:
   - whole body: solid dark panel (#1f2328)
   - internal framed sections: gray borders instead of white
*/
.toast.Omniroq-dashboard-config-toast .toast-body {
    background-color: #1f2328 !important;
    color: #e8eef7 !important;
}

.toast.Omniroq-dashboard-config-toast .border,
.toast.Omniroq-dashboard-config-toast .card,
.toast.Omniroq-dashboard-config-toast .panel,
.toast.Omniroq-dashboard-config-toast fieldset {
    border-color: rgba(160,169,184,0.35) !important;
}



/* Reusable "pop" hover effect (scale up slightly) used across navbar dropdown items.
   Apply broadly to buttons, navbar links, and tab/pill items so the UI feels cohesive.
*/
.pop-hover {
    transition: transform var(--o-dur) var(--o-ease), opacity var(--o-dur) var(--o-ease);
    will-change: transform;
    transform-origin: center center;
}

@media (prefers-reduced-motion: reduce) {
    .pop-hover,
    .pop-hover:hover,
    .pop-hover:focus {
        transition: none !important;
    }
}

/* Hover/focus visual state: small scale and soft shadow. Limit on very small screens to avoid layout jump. */
@media (min-width: 576px) {
    .pop-hover:hover,
    .pop-hover:focus {
        transform: scale(var(--omniroq-hover-pop-scale, 1.01));
        filter: var(--omniroq-hover-glow-filter, none);
        box-shadow: none;
        z-index: 1050;
    }
}

/* Apply the pop effect to common interactive elements site-wide.
   All interactive elements use transform-origin: center center for a uniform pop animation.
*/
.btn,
.navbar .btn,
.navbar-brand,
.navbar-toggler,
.navbar .nav-link,
.navbar .nav-link .bi,
.navbar .nav-link .nav-icon-wrap,
.navbar .nav-link .nav-icon-wrap .nav-icon-outline,
.navbar .nav-link .nav-icon-wrap .nav-icon-fill,
.nav-tabs .nav-link,
.nav-pills .nav-link,
.navbar .dropdown-toggle {
    /* Use the shared pop animation */
    transition: transform var(--o-dur) var(--o-ease), opacity var(--o-dur) var(--o-ease), color var(--o-dur) var(--o-ease), background-color var(--o-dur) var(--o-ease), border-color var(--o-dur) var(--o-ease), filter var(--o-dur) var(--o-ease);
    will-change: transform, filter;
}

/* Table name/detail links — subtle pop */
.Omniroq-resizable-table td a {
    transition: transform var(--o-dur) var(--o-ease), color var(--o-dur) var(--o-ease);
    transform-origin: left center;
    display: inline-block;
    will-change: transform;
}

/* Sidebar (offcanvas) links — subtle pop */
.offcanvas-body a,
.offcanvas-body .btn {
    transition: transform var(--o-dur) var(--o-ease), color var(--o-dur) var(--o-ease), background-color var(--o-dur) var(--o-ease), border-color var(--o-dur) var(--o-ease), filter var(--o-dur) var(--o-ease), opacity var(--o-dur) var(--o-ease) !important;
    transform-origin: left center;
    display: inline-block;
    will-change: transform, filter;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.offcanvas-body a.text-primary:hover,
.offcanvas-body a.text-primary:focus,
.offcanvas-body a.text-primary:focus-visible {
    color: var(--omniroq-accent-text, #78c2ad) !important;
}

@media (min-width: 576px) {
    .Omniroq-resizable-table td a:hover {
        transform: scale(var(--omniroq-hover-pop-scale, 1.01));
        filter: var(--omniroq-hover-glow-filter, none);
    }

    .offcanvas-body a:hover,
    .offcanvas-body a:focus,
    .offcanvas-body a:focus-visible,
    .offcanvas-body .btn:hover,
    .offcanvas-body .btn:focus,
    .offcanvas-body .btn:focus-visible {
        transform: translateZ(0) scale(var(--omniroq-hover-pop-scale, 1.01)) !important;
        filter: var(--omniroq-hover-glow-filter);
    }

    .btn,
    .navbar .btn,
    .navbar-brand,
    .navbar-toggler,
    .navbar .nav-link,
    .navbar .nav-link .bi,
    .nav-tabs .nav-link,
    .nav-pills .nav-link,
    .navbar .dropdown-toggle {
        transition: transform var(--o-dur) var(--o-ease), background var(--o-dur) var(--o-ease), color var(--o-dur) var(--o-ease), border-color var(--o-dur) var(--o-ease), filter var(--o-dur) var(--o-ease) !important;
        transform-origin: center center;
        will-change: transform, filter;
    }

    .btn:hover,
    .navbar .btn:hover,
    .navbar-brand:hover,
    .navbar-toggler:hover,
    .navbar .nav-link:hover,
    .navbar .nav-link:hover .bi,
    .nav-tabs .nav-link:hover,
    .nav-pills .nav-link:hover,
    .navbar .dropdown-toggle:hover,
    .btn:focus,
    .navbar .btn:focus,
    .navbar-brand:focus,
    .navbar-toggler:focus,
    .navbar .nav-link:focus,
    .navbar .nav-link:focus .bi,
    .nav-tabs .nav-link:focus,
    .nav-pills .nav-link:focus,
    .navbar .dropdown-toggle:focus {
        transform: scale(var(--omniroq-hover-pop-scale, 1.03));
        box-shadow: none;
        z-index: 1050;
    }
}

/* Small screens: disable scale on hover for elements that expand/collapse in-flow (e.g., collapsed navbar)
   to avoid pushing layout unexpectedly. Keep subtle focus outlines for accessibility.
*/
@media (max-width: 575.98px) {
    .btn:hover,
    .navbar-brand:hover,
    .navbar-toggler:hover,
    .navbar .nav-link:hover,
    .nav-tabs .nav-link:hover {
        transform: none;
        box-shadow: none;
    }
}

/* Form controls — teal focus glow + smooth transitions */
.form-control,
.form-select {
    transition: transform var(--o-dur) var(--o-ease), border-color var(--o-dur) var(--o-ease), box-shadow var(--o-dur) var(--o-ease), background var(--o-dur) var(--o-ease), color var(--o-dur) var(--o-ease), filter var(--o-dur) var(--o-ease) !important;
    transform-origin: center center;
    will-change: transform, filter;
}

.form-control:focus,
.form-select:focus {
    border-color: rgba(var(--omniroq-accent-rgb, 120,194,173),0.75) !important;
    box-shadow: 0 0 0 0.2rem rgba(var(--omniroq-accent-rgb, 120,194,173),0.25) !important;
}

.form-check-input {
    cursor: pointer;
    transition: border-color var(--o-dur) var(--o-ease), background-color var(--o-dur) var(--o-ease), box-shadow var(--o-dur) var(--o-ease) !important;
}

.form-check-input:focus {
    box-shadow: 0 0 0 0.2rem rgba(var(--omniroq-accent-rgb, 120,194,173),0.25) !important;
    border-color: rgba(var(--omniroq-accent-rgb, 120,194,173),0.75) !important;
}

/* Notifications: keep row layout static; animate inner interactive elements only. */

/* Interactive pieces inside a notification: badges, links, and inline action icons
   get the pop-scale animation instead of scaling the whole row.
*/
    .notification-row .badge,
    .notification-row .notification-link,
    .notification-row .notif-action {
    transition: transform var(--o-dur) var(--o-ease), opacity var(--o-dur) var(--o-ease), color var(--o-dur) var(--o-ease), filter var(--o-dur) var(--o-ease);
    transform-origin: center center;
    display: inline-block;
    will-change: transform, filter;
}

@media (prefers-reduced-motion: reduce) {
    .notification-row .badge,
    .notification-row .notification-link,
    .notification-row span[title="Mark as Read"],
    .notification-row span[title="Delete"] {
        transition: none !important;
    }
}

@media (min-width: 576px) {
    .notification-row .badge:hover,
    .notification-row .notification-link:hover,
    .notification-row .notif-action:hover,
    .notification-row .badge:focus,
    .notification-row .notification-link:focus,
    .notification-row .notif-action:focus {
        transform: scale(var(--omniroq-hover-pop-scale));
        filter: var(--omniroq-hover-glow-filter);
        z-index: 1050;
    }
}

@media (max-width: 575.98px) {
    .notification-row .badge:hover,
    .notification-row .notification-link:hover,
    .notification-row .notif-action:hover {
        transform: none;
    }
}

/* Clickable hyperlinks: subtle hover transition.
   Removed display:inline-block and aggressive scale(1.12) which
   broke dropdown items, nav-tabs, list-groups, and card links
   by shrinking them to content width and shifting layout. */
a[href] {
    transition: color var(--o-dur) var(--o-ease), opacity var(--o-dur) var(--o-ease);
    text-decoration-skip-ink: auto;
}

@media (prefers-reduced-motion: reduce) {
    a[href],
    a[href]:hover,
    a[href]:focus {
        transition: none !important;
    }
}

.toast.Omniroq-dashboard-config-toast .card,
.toast.Omniroq-dashboard-config-toast .panel {
    background-color: transparent !important;
}

/* Ensure header/footer of the dashboard toast use the dark chrome */
.toast.Omniroq-dashboard-config-toast .toast-header,
.toast.Omniroq-dashboard-config-toast .toast-footer {
    background-color: #343a40 !important;
    color: #e8eef7 !important;
    border-color: rgba(160,169,184,0.12) !important;
}

/* Ensure body inherits the dark page background, not Bootstrap white defaults */
.Omniroq-toast .toast-body {
    background: #212529 !important;
    color: #e8eef7 !important;
}

/* Advanced filter rows: make them slightly lighter than container and use gray frame lines
   to match the dashboard configuration panels */
.adv-row {
    background-color: #343a40 !important;
    border-color: rgba(160,169,184,0.35) !important;
}

/* Ensure inputs/selects inside rows match the darker inner controls */
.adv-row .form-control,
.adv-row .form-select,
.adv-row .adv-multi-toggle {
    background-color: #1f2328 !important;
    color: #e8eef7 !important;
    border-color: rgba(160,169,184,0.35) !important;
}

/* Global dark-theme controls: match list filter / advanced-filter dropdown look everywhere.
   We target both element-level `data-bs-theme="dark"` (what our forms set) and
   container-level `data-bs-theme="dark"`.
*/
.form-control[data-bs-theme="dark"],
.form-select[data-bs-theme="dark"],
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
    background-color: #1f2328 !important;
    color: #e8eef7 !important;
    border-color: rgba(160,169,184,0.35) !important;
}

.form-select[data-bs-theme="dark"] option,
[data-bs-theme="dark"] .form-select option {
    background-color: #212529;
    color: #e0e0e0;
}

/* Pop hover for dropdown/select controls (no slide/translate effects). */
.form-select[data-bs-theme="dark"],
[data-bs-theme="dark"] .form-select {
    transform-origin: center center;
    transition: transform var(--o-dur) var(--o-ease), border-color var(--o-dur) var(--o-ease), filter var(--o-dur) var(--o-ease);
    will-change: transform, filter;
}

@media (min-width: 576px) {
    .form-select[data-bs-theme="dark"]:hover,
    [data-bs-theme="dark"] .form-select:hover {
        transform: scale(var(--omniroq-hover-pop-scale));
        z-index: 1050;
        position: relative;
    }
}

/* Custom-select trigger buttons: keep the hover pop subtle and consistent. */
@media (min-width: 576px) {
    /* Avoid extremely high stacking on hover (can look like a jump). */
    .cs-trigger:hover,
    .cs-trigger:focus {
        transform: scale(var(--omniroq-hover-pop-scale)) !important;
        z-index: 1 !important;
    }
}

/* ============================================================
   Global form-select & form-control styling.
   Match the advanced-filter look everywhere: dark bg,
   teal-tinted border, pop-on-hover animation.
   ============================================================ */
.form-select,
.form-control {
    background-color: #1f2328;
    color: #e8eef7;
    border-color: rgba(160, 169, 184, 0.35);
    transition: transform var(--o-dur) var(--o-ease),
                border-color var(--o-dur) var(--o-ease),
                box-shadow var(--o-dur) var(--o-ease),
                color var(--o-dur) var(--o-ease),
                filter var(--o-dur) var(--o-ease);
}

.form-select:focus,
.form-control:focus {
    background-color: #1f2328;
    color: #e8eef7;
    border-color: var(--omniroq-accent, #78c2ad);
    box-shadow: 0 0 0 0.2rem rgba(var(--omniroq-accent-rgb, 120,194,173), 0.25);
}

.form-select option {
    background-color: #212529;
    color: #e0e0e0;
}

@media (min-width: 576px) {
    .form-select:hover,
    .form-control:hover {
        transform: scale(var(--omniroq-hover-pop-scale));
        z-index: 1;
        position: relative;
        border-color: rgba(var(--omniroq-accent-rgb, 120,194,173), 0.55);
    }
}

/* Dropdown menus: pop-open animation on every dropdown */
.dropdown-menu {
    animation: Omniroq-dropdown-fade 0.16s cubic-bezier(.2,.85,.2,1);
}

@keyframes Omniroq-dropdown-fade {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}

/* Make joiner/spacer and condition wrappers transparent so row color shows */
.adv-row .adv-joiner-wrap,
.adv-row .adv-multi,
.adv-row .adv-condition {
    background: transparent !important;
}

/* List Configuration overlay: panel background should match dashboard toast (#343a40)
   while individual items remain darker so they stand out. */
#OmniroqListConfigList {
    background-color: #343a40 !important;
    padding: 10px !important;
}

.Omniroq-lc-item {
    background-color: #1f2328 !important; /* items stay darker */
    border-color: rgba(160,169,184,0.25) !important;
}

.Omniroq-lc-item span,
.Omniroq-lc-item input[type="checkbox"] {
    vertical-align: middle;
}

/* Red close "X" (matches earlier styling) */
.toast-close-x {
    border: 0;
    background: transparent;
    color: #ff7a59;
    font-size: 1rem;
    line-height: 1;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 0;
    margin-left: 10px;
    opacity: 0.95;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition: transform var(--o-dur) var(--o-ease),
                filter var(--o-dur) var(--o-ease),
                opacity 0.2s ease !important;
}

.toast-close-x:hover {
    color: #ff7a59;
    background: transparent;
    opacity: 1;
    transform: scale(1.15);
    filter: none !important;
}

.toast-close-x .bi {
    line-height: 1;
}

.toast-close-x:focus,
.toast-close-x:focus-visible,
.btn-close:focus,
.btn-close:focus-visible {
    background: transparent !important;
    box-shadow: none !important;
}

.omniroq-notif-action-wrap {
    display: flex;
    gap: 10px;
    align-items: center;
}

.notif-action {
    border: 0;
    background: transparent;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 0;
    cursor: pointer;
    transition: transform var(--o-dur) var(--o-ease), color var(--o-dur) var(--o-ease), background-color var(--o-dur) var(--o-ease), border-color var(--o-dur) var(--o-ease), filter var(--o-dur) var(--o-ease);
}

.notif-action-mark {
    color: var(--omniroq-accent-text, #78c2ad);
}

.notif-action-delete {
    color: #ff7a59;
}

.notif-action .bi {
    font-size: 1rem;
    line-height: 1;
}

.notif-action:hover,
.notif-action:focus-visible {
    background: rgba(var(--omniroq-accent-rgb, 120,194,173),.12);
}

.notif-action-delete:hover,
.notif-action-delete:focus-visible {
    background: transparent;
    transform: scale(var(--omniroq-hover-pop-scale, 1.02));
    filter: drop-shadow(0 0 10px rgba(255,122,89,0.4)) drop-shadow(0 0 20px rgba(255,122,89,0.25));
}

.toast-header.bg-success {
    background-color: #198754 !important;
    color: #fff !important;
}

.toast-header.bg-danger {
    background-color: #dc3545 !important;
    color: #fff !important;
}

.toast-header.bg-warning {
    background-color: #ffc107 !important;
    color: #212529 !important;
}

.toast-header.bg-info {
    background-color: #0d6efd !important;
    color: #fff !important;
}

.toast-header.bg-secondary {
    background-color: #0d6efd !important;
    color: #fff !important;
}

/* Keep any Bootstrap bg-dark headers as dark gray */
.toast-header.bg-dark {
    background-color: #343a40 !important;
    color: #fff !important;
}

/* Smaller close button for toasts */
.toast-header .btn-close {
    width: 0.8rem;
    height: 0.8rem;
    padding: 0;
    margin-left: auto;
}

.btn-close {
    border-radius: 999px;
    background-color: transparent !important;
    box-shadow: none !important;
    transition: transform var(--o-dur) var(--o-ease), filter var(--o-dur) var(--o-ease), opacity var(--o-dur) var(--o-ease), background-color var(--o-dur) var(--o-ease) !important;
    transform-origin: center center;
    will-change: transform, filter;
}

.btn-close:hover,
.btn-close:focus,
.btn-close:focus-visible {
    background-color: transparent !important;
    transform: scale(var(--omniroq-hover-pop-scale, 1.08));
    filter: var(--omniroq-hover-glow-filter);
    opacity: 1;
}

.toast-time {
    font-size: 0.7rem;
    color: #a0aec0;
    margin-top: 2px;
}

/* Notification Badge */
.notification-badge {
    position: relative;
    display: inline-block;
}

.notification-badge .badge {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 20px;
    padding: 0.35rem 0.5rem;
    font-size: 0.75rem;
}

/* Notification Dropdown Bubble */
.notification-dropdown {
    position: fixed;
    top: 80px;
    right: 20px;
    width: 400px;
    max-height: 360px;
    background: #1a1a2e;
    border: 1px solid rgba(var(--omniroq-accent-rgb, 120,194,173), 0.3);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.8);
    z-index: 2000;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: popIn var(--o-dur) var(--o-ease) forwards;
}

@keyframes popIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.notification-dropdown-header {
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, rgba(var(--omniroq-accent-rgb, 120,194,173), 0.12) 0%, transparent 100%);
}

.notification-dropdown-header h6 {
    margin: 0;
    color: #e8eef7;
    font-size: 1rem;
    font-weight: 600;
}

/* Sidebar offcanvas user header */
.offcanvas-user-header {
    padding: 8px 12px;
    text-align: center;
}

.sidebar-avatar {
    width: 128px;
    height: 128px;
    border-radius: 50%;
    object-fit: cover;
    /* Strong fade-out: no visible hard edge */
    -webkit-mask-image: radial-gradient(circle at center, rgba(0,0,0,1) 32%, rgba(0,0,0,0.35) 55%, rgba(0,0,0,0.12) 70%, rgba(0,0,0,0) 100%);
    mask-image: radial-gradient(circle at center, rgba(0,0,0,1) 32%, rgba(0,0,0,0.35) 55%, rgba(0,0,0,0.12) 70%, rgba(0,0,0,0) 100%);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    border: none;
    box-shadow: 0 10px 24px rgba(0,0,0,0.85), inset 0 0 26px rgba(0,0,0,0.55);
}

.sidebar-avatar-default,
.profile-avatar-default {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 50% 35%, rgba(var(--omniroq-accent-rgb, 120,194,173), 0.24) 0%, rgba(var(--omniroq-accent-rgb, 120,194,173), 0.12) 38%, rgba(var(--omniroq-accent-rgb, 120,194,173), 0.03) 68%, transparent 100%),
        rgba(255,255,255,0.04);
}

.sidebar-avatar-default::before,
.profile-avatar-default::before {
    content: "";
    display: block;
    width: 76%;
    height: 76%;
    background-color: var(--omniroq-accent, #78c2ad);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='black' d='M32 7c-8.82 0-16 7.18-16 16 0 5.34 2.63 10.08 6.66 12.99C14.27 39.14 9 46.1 9 54a3 3 0 1 0 6 0c0-9.39 7.61-17 17-17s17 7.61 17 17a3 3 0 1 0 6 0c0-7.9-5.27-14.86-13.66-18.01A15.95 15.95 0 0 0 48 23c0-8.82-7.18-16-16-16Zm0 6c5.51 0 10 4.49 10 10s-4.49 10-10 10-10-4.49-10-10 4.49-10 10-10Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='black' d='M32 7c-8.82 0-16 7.18-16 16 0 5.34 2.63 10.08 6.66 12.99C14.27 39.14 9 46.1 9 54a3 3 0 1 0 6 0c0-9.39 7.61-17 17-17s17 7.61 17 17a3 3 0 1 0 6 0c0-7.9-5.27-14.86-13.66-18.01A15.95 15.95 0 0 0 48 23c0-8.82-7.18-16-16-16Zm0 6c5.51 0 10 4.49 10 10s-4.49 10-10 10-10-4.49-10-10 4.49-10 10-10Z'/%3E%3C/svg%3E") center / contain no-repeat;
    filter: drop-shadow(0 0 12px rgba(var(--omniroq-accent-rgb, 120,194,173), 0.18));
}

.notification-dropdown-list {
    max-height: 310px;
    overflow-y: auto;
    flex: 1;
}

.notification-dropdown-item {
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    cursor: pointer;
    transition: transform var(--o-dur) var(--o-ease), background-color var(--o-dur) var(--o-ease), color var(--o-dur) var(--o-ease), border-color var(--o-dur) var(--o-ease), filter var(--o-dur) var(--o-ease);
    display: flex;
    gap: 12px;
    align-items: flex-start;
    transform-origin: center center;
    will-change: transform, filter;
}

.notification-dropdown-item:hover,
.notification-dropdown-item:focus,
.notification-dropdown-item:focus-within {
    background-color: transparent;
    transform: scale(var(--omniroq-hover-pop-scale));
    filter: var(--omniroq-hover-glow-filter);
    position: relative;
    z-index: 1;
}

/* Clickable notifications without changing appearance */
.notification-link,
.notification-link-row {
    text-decoration: none !important;
    color: inherit !important;
}

.notification-link:hover,
.notification-link-row:hover {
    text-decoration: none !important;
    color: inherit !important;
}

/* Notification rows: no scale/transform on the whole row; only change background on hover. */
.Omniroq-notif-row {
    transition: background-color var(--o-dur) var(--o-ease);
}

.Omniroq-notif-row:hover {
    /* no background hover in toast; keep only inner pop effects */
    background-color: transparent;
}

tr.notification-row {
    transition: background-color var(--o-dur) var(--o-ease);
}

tr.notification-row:hover {
    /* no background hover; inner elements handle hover visuals */
    background-color: transparent;
}

/* Column resize handles for list tables */
.Omniroq-resizable-table {
    table-layout: fixed;
    width: 100% !important;
    max-width: 100% !important;
}

/* Enforce checkbox column width at the colgroup level (most reliable with table-layout: fixed) */
.Omniroq-resizable-table colgroup col:first-child,
table#myTable colgroup col:first-child {
    width: var(--Omniroq-checkbox-col-width) !important;
}

/* Allow columns to shrink (Bootstrap form controls have implicit min widths) */
.Omniroq-resizable-table th,
.Omniroq-resizable-table td {
    min-width: 0 !important;
}

.Omniroq-resizable-table thead input.form-control,
.Omniroq-resizable-table thead select.form-select {
    min-width: 0 !important;
    width: 100%;
    max-width: 100%;
}

/* Keep the filter row from forcing column width. Overflow must stay VISIBLE:
   the inputs are width/max-width 100% + min-width 0 (they cannot widen the
   column), and hidden was clipping the focus/hover glow at the cell edge —
   the glow should overflow into neighbouring cells (the focused cell is
   z-lifted above siblings, see .table thead th:focus-within). */
.Omniroq-resizable-table thead tr:nth-child(2) th {
    overflow: visible;
}

.Omniroq-resizable-table thead tr:nth-child(2) input.form-control,
.Omniroq-resizable-table thead tr:nth-child(2) select.form-select {
    display: block;
}

/* Keep tables fitting the viewport: truncate long text instead of overlapping */
/* Keep body cells clipped for ellipsis */
.Omniroq-resizable-table tbody td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Header cells: overflow clip so text truncates cleanly; handle now lives inside column boundary */
.Omniroq-resizable-table thead tr:first-child th {
    white-space: nowrap;
    overflow: clip;
    text-overflow: ellipsis;
}

/* Checkbox/select column: keep a fixed/min width so checkboxes never get clipped
   and adjacent columns can't visually overlap into this area on narrow screens. */
.Omniroq-resizable-table thead tr:first-child th:first-child,
.Omniroq-resizable-table thead tr:nth-child(2) th:first-child,
.Omniroq-resizable-table tbody td:first-child {
    width: 44px;
    min-width: 44px;
    max-width: 44px;
    padding-left: 10px;
    padding-right: 10px;
    text-align: center;
    vertical-align: middle;
    overflow: hidden;
    text-overflow: clip;
}

/* Checkbox/select column: lock to an exact width and consistent padding across breakpoints.
   Use border-box so padding is included in the measured width and the column appears
   identical when switching between small and large screens. */
.Omniroq-resizable-table thead tr:first-child th:first-child,
.Omniroq-resizable-table thead tr:nth-child(2) th:first-child,
.Omniroq-resizable-table tbody td:first-child {
    width: var(--Omniroq-checkbox-col-width) !important;
    min-width: var(--Omniroq-checkbox-col-width) !important;
    max-width: var(--Omniroq-checkbox-col-width) !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
    text-align: center !important;
    vertical-align: middle !important;
    overflow: visible !important;
    text-overflow: clip !important;
    box-sizing: border-box !important;
}

@media (max-width: 767.98px) {
    .Omniroq-resizable-table thead tr:first-child th:first-child,
    .Omniroq-resizable-table thead tr:nth-child(2) th:first-child,
    .Omniroq-resizable-table tbody td:first-child {
        /* keep identical sizing on small screens */
        width: var(--Omniroq-checkbox-col-width) !important;
        min-width: var(--Omniroq-checkbox-col-width) !important;
        max-width: var(--Omniroq-checkbox-col-width) !important;
        padding-left: 6px !important;
        padding-right: 6px !important;
        overflow: visible !important;
        text-overflow: clip !important;
        box-sizing: border-box !important;
    }
}

/* Make the checkbox itself never get pushed/cropped by Bootstrap spacing */
.Omniroq-resizable-table tbody td:first-child .form-check-input,
.Omniroq-resizable-table thead tr:nth-child(2) th:first-child .form-check-input {
    margin: 0 !important;
    display: inline-block;
    vertical-align: middle;
    pointer-events: auto;
}

.Omniroq-resizable-table tbody td a {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
}

.Omniroq-resizable-table thead th {
    position: relative;
}

/* Disable any hover/focus header "box" effects coming from theme/DataTables */
.Omniroq-resizable-table thead th:hover,
.Omniroq-resizable-table thead th:focus,
.Omniroq-resizable-table thead th:active {
    box-shadow: none !important;
    outline: none !important;
    filter: none !important;
}
/* ...but a sortable header IS keyboard-operable, so it keeps its ring on
   :focus-visible. It was previously stripped along with the mouse-focus
   styling above, leaving column sorting invisible to keyboard users. */
.Omniroq-resizable-table thead th:focus-visible {
    box-shadow: none !important;
    filter: none !important;
    outline: var(--o-focus-ring-width) solid var(--o-focus-ring-color) !important;
    outline-offset: -2px;
}

/* Handle lives entirely within the column (right: 0) so it never adds to scrollable width */
.Omniroq-resizable-table .Omniroq-col-resize-handle {
    position: absolute;
    top: 0;
    right: 0;
    width: 6px;
    height: 100%;
    cursor: col-resize;
    user-select: none;
    z-index: 3;
}

.Omniroq-resizable-table .Omniroq-col-resize-handle::before {
    content: "";
    position: absolute;
    top: 22%;
    bottom: 22%;
    left: 1px;      /* pin to right edge of column since handle is right:0 width:6px → left:1px centers the 1px line */
    width: 1px;
    background: rgba(140, 150, 165, 0.90);
    opacity: 0.35;
    transition: opacity var(--o-dur) var(--o-ease);
}

/* No header highlight/border on hover; only slightly brighten the separator line */
.Omniroq-resizable-table .Omniroq-col-resize-handle:hover {
    background: transparent;
}

.Omniroq-resizable-table .Omniroq-col-resize-handle:hover::before,
.Omniroq-resizable-table .Omniroq-col-resize-handle.dragging::before {
    opacity: 1;
}

.notification-dropdown-item:last-child {
    border-bottom: none;
}

.notification-item-icon {
    min-width: 20px;
    font-weight: bold;
    font-size: 1rem;
    margin-top: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.notification-item-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.notification-item-message {
    color: var(--omniroq-accent-text, #78c2ad);
    font-size: 0.9rem;
    line-height: 1.4;
}

.notification-item-time {
    color: #a0a9b8;
    font-size: 0.75rem;
}

.notification-empty {
    padding: 20px;
    text-align: center;
    color: #a0a9b8;
    font-size: 0.9rem;
}

.table.table-hover tbody tr > *,
.table.dataTable tbody tr > *,
.Omniroq-resizable-table tbody tr > * {
    transition: background-color var(--o-dur) var(--o-ease), color var(--o-dur) var(--o-ease), border-color var(--o-dur) var(--o-ease), box-shadow var(--o-dur) var(--o-ease);
}

@keyframes Omniroq-toast-surface-in {
    0% {
        opacity: 0;
        transform: translateY(18px) scale(0.985);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.toast.Omniroq-toast {
    border-radius: 16px !important;
    border: 1px solid rgba(var(--omniroq-accent-rgb, 120,194,173), 0.18) !important;
    box-shadow: 0 18px 42px rgba(3, 9, 20, 0.34) !important;
    overflow: hidden;
    backdrop-filter: blur(12px);
}

.toast.fade.Omniroq-toast {
    transition: opacity var(--o-dur) var(--o-ease), transform var(--o-dur) var(--o-ease) !important;
    transform: translateY(18px) scale(0.985);
}

.toast.fade.Omniroq-toast.show,
.toast.fade.Omniroq-toast.showing {
    transform: translateY(0) scale(1);
}

.toast.show.Omniroq-toast {
    animation: Omniroq-toast-surface-in var(--o-dur) var(--o-ease);
}

.toast.Omniroq-toast .toast-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.95rem 1rem;
    border-bottom-width: 1px;
}

.toast.Omniroq-toast .toast-body {
    padding: 1rem !important;
}

.toast.Omniroq-toast .toast-footer {
    padding: 0.9rem 1rem;
}

.omniroq-toast-heading {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.omniroq-toast-heading-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.omniroq-toast-title {
    font-size: 0.92rem;
    line-height: 1.1;
}

.omniroq-toast-type-icon,
.omniroq-notif-type-icon {
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    background: rgba(var(--omniroq-accent-rgb, 120,194,173), 0.12);
    border: 1px solid rgba(var(--omniroq-accent-rgb, 120,194,173), 0.20);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03);
}

.notification-item-icon {
    color: var(--omniroq-accent-text, #78c2ad);
    background: rgba(var(--omniroq-accent-rgb, 120,194,173), 0.12);
    border: 1px solid rgba(var(--omniroq-accent-rgb, 120,194,173), 0.20);
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03);
}

.omniroq-toast-type-icon i,
.omniroq-notif-type-icon i,
.notification-item-icon i {
    font-size: 0.95rem;
}

.omniroq-toast-type-icon-success,
.omniroq-notif-type-icon.omniroq-notif-type-icon-success,
.notification-item-icon.omniroq-notif-type-icon-success {
    background: rgba(25, 135, 84, 0.14);
    border-color: rgba(25, 135, 84, 0.22);
}

.omniroq-toast-type-icon-error,
.omniroq-notif-type-icon.omniroq-notif-type-icon-error,
.notification-item-icon.omniroq-notif-type-icon-error {
    background: rgba(220, 53, 69, 0.14);
    border-color: rgba(220, 53, 69, 0.22);
}

.omniroq-toast-type-icon-warning,
.omniroq-notif-type-icon.omniroq-notif-type-icon-warning,
.notification-item-icon.omniroq-notif-type-icon-warning {
    background: rgba(255, 193, 7, 0.14);
    border-color: rgba(255, 193, 7, 0.22);
}

.omniroq-toast-type-icon-info,
.omniroq-notif-type-icon.omniroq-notif-type-icon-info,
.notification-item-icon.omniroq-notif-type-icon-info {
    background: rgba(var(--omniroq-accent-rgb, 120,194,173), 0.14);
    border-color: rgba(var(--omniroq-accent-rgb, 120,194,173), 0.22);
}

.omniroq-toast-message-wrap {
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    padding: 0.9rem 1rem;
    background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.012));
    border: 1px solid rgba(160,169,184,0.16);
}

.omniroq-toast-message {
    position: relative;
    z-index: 1;
    color: inherit;
    line-height: 1.45;
}

.omniroq-toast-accent {
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    border-radius: 999px;
    background: var(--omniroq-accent, #78c2ad);
}

.omniroq-toast-accent-success { background: #198754; }
.omniroq-toast-accent-error { background: #dc3545; }
.omniroq-toast-accent-warning { background: #ffc107; }
.omniroq-toast-accent-info { background: #0d6efd; }
/* Dark scrollbar styling for toast notifications */
.toast-body {
    scrollbar-color: #9f9f9f #2c2c2c !important;
    scrollbar-width: thin !important;
}

.toast-body::-webkit-scrollbar {
    width: 10px !important;
}

/* -------------------------
   Landing Page (Home)  [lp- namespace]
   ------------------------- */

/* ══════════════════════════════════════════════
   LANDING TOKENS
   ══════════════════════════════════════════════
   Surfaces, rules and the accent all resolve through the app's own variables,
   so the marketing page inherits from the same place every other screen does —
   change the accent in appearance settings and this page follows.

   The type roles are the one deliberate divergence. The app has no display
   typography (it has no headlines), so there was nothing to inherit; the three
   roles below are all faces base.html already requests, which is why adding
   them costs zero network. Sora carries headings, Inter carries reading, and
   IBM Plex Mono carries every label and figure. That last one is not styling
   for its own sake: in a CRM, field names and money are set in mono, so using
   mono for the page's labels borrows the product's own vernacular. */
:root {
    --lp-bg:       #0d1117;   /* deepest surface — matches the app shell      */
    --lp-surface:  #161b22;   /* alternating section band                     */
    --lp-raised:   #1a2028;   /* hover state on a ruled cell                  */
    --lp-rule:     rgba(255,255,255,.075);  /* the hairline everything is built from */
    --lp-rule-2:   rgba(255,255,255,.14);   /* emphasis rule                  */
    --lp-ink:      #e8eef7;   /* primary text                                 */
    --lp-muted:    #97a3b2;   /* body copy — 7.4:1 on the section surfaces    */
    /* Labels and captions. The app's #6b7684 measured 3.75–4.1:1 against these
       surfaces, which fails AA for the 10–13px sizes it is used at here, and
       accessibility is a procurement question for this buyer. #8894a4 clears
       5.6:1 everywhere it appears while staying clearly below --lp-muted. */
    --lp-faint:    #8894a4;
    --lp-accent:   var(--omniroq-accent, #78c2ad);
    --lp-accent-rgb: var(--omniroq-accent-rgb, 120, 194, 173);

    /* The app's scale, not a landing-page one. `--omniroq-border-radius`
       defaults to 4px and is what every other surface derives from. */
    --lp-r:    var(--radius-md, 4px);
    --lp-r-lg: var(--radius-lg, 8px);
    --lp-r-pill: var(--radius-pill, 50rem);

    --lp-display: 'Sora', 'Inter', system-ui, sans-serif;
    --lp-body:    'Inter', system-ui, sans-serif;
    --lp-mono:    'IBM Plex Mono', 'JetBrains Mono', ui-monospace, 'Cascadia Code', monospace;

    --lp-gutter:  clamp(64px, 7vw, 112px);   /* vertical section rhythm */
}

/* ── Accent utilities (kept: referenced outside the landing page) ── */
.text-accent   { color: var(--lp-accent) !important; }
.border-accent { border-color: var(--lp-accent) !important; }

.lp-page {
    background: var(--lp-bg);
    font-family: var(--lp-body);
}

/* ══════════════════════════════════════════════
   TYPE ROLES
   ══════════════════════════════════════════════
   These three rules must outrank `body.omniroq-family-* * { font-family:
   inherit !important }` from the appearance-settings block, which is both later
   in the file and more specific than a bare class. Scoping under .lp-page gives
   (0,2,0) against its (0,1,1), so the landing page keeps its typography while
   every other screen still follows the user's chosen family. */
.lp-page .lp-h1,
.lp-page .lp-h2,
.lp-page .lp-h3,
.lp-page .lp-cell-title,
.lp-page .lp-point-title,
.lp-page .lp-pack-name,
.lp-page .lp-row-name,
.lp-page .lp-close-title,
.lp-page .lp-spec-val,
.lp-page .lp-price-amount,
.lp-page .lp-faq .accordion-button {
    font-family: var(--lp-display) !important;
    font-weight: 600;
    letter-spacing: -0.02em;
}
.lp-page .lp-kicker,
.lp-page .lp-eyebrow,
.lp-page .lp-terms,
.lp-page .lp-spec-key,
.lp-page .lp-fields,
.lp-page .lp-int-key,
.lp-page .lp-int-list,
.lp-page .lp-figure-cap,
.lp-page .lp-col-name,
.lp-page .lp-col-meta,
.lp-page .lp-board-name,
.lp-page .lp-board-sum,
.lp-page .lp-board-delta,
.lp-page .lp-deal-line,
.lp-page .lp-panel-key,
.lp-page .lp-panel-note,
.lp-page .lp-row-price,
.lp-page .lp-step-n,
.lp-page .lp-price-unit,
.lp-page .lp-tagline,
.lp-page .lp-checks {
    font-family: var(--lp-mono) !important;
}
.lp-page .lp-deck,
.lp-page .lp-cell-text,
.lp-page .lp-point-text,
.lp-page .lp-pack-desc,
.lp-page .lp-row-desc,
.lp-page .lp-footnote,
.lp-page .lp-faq .accordion-body {
    font-family: var(--lp-body) !important;
}

.lp-h1 {
    font-size: clamp(2.35rem, 4.4vw, 3.5rem);
    line-height: 1.04;
    letter-spacing: -0.035em !important;
    color: var(--lp-ink);
    margin: 0 0 22px;
}
.lp-h1-accent { color: var(--lp-accent); }
.lp-h2 {
    font-size: clamp(1.65rem, 2.7vw, 2.15rem);
    line-height: 1.14;
    letter-spacing: -0.03em !important;
    color: var(--lp-ink);
    margin: 0;
}
.lp-h3 {
    font-size: 1.25rem;
    line-height: 1.25;
    color: var(--lp-ink);
    margin: 0 0 10px;
}
.lp-deck {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--lp-muted);
    max-width: 58ch;
    margin: 14px 0 0;
}
.lp-deck--hero { font-size: 1.06rem; max-width: 46ch; }
.lp-eyebrow,
.lp-kicker {
    font-size: .7rem;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--lp-accent);
    margin: 0;
}
.lp-kicker { color: var(--lp-faint); margin-bottom: 22px; }

/* ══════════════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════════════ */
.lp-btn {
    --bs-btn-focus-shadow-rgb: var(--lp-accent-rgb);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 22px;
    border: 1px solid transparent;
    border-radius: var(--lp-r);
    font-family: var(--lp-body);
    font-size: .92rem;
    font-weight: 500;
    letter-spacing: -0.005em;
    line-height: 1.2;
    transition: background-color .18s var(--o-ease), border-color .18s var(--o-ease), color .18s var(--o-ease);
}
/* The doubled class below is deliberate, not sloppiness. Two rules later in this
   file target `.btn` at (0,2,1) and both beat a single landing class:
     body[data-bs-theme="light"] .btn { background-color: light-surface-1 }
     body[data-bs-theme]         .btn { color: var(--bs-btn-color) !important }
   Left alone they rendered the primary call to action white-on-mint at 1.78:1 in
   dark and grey-on-grey in light — the least readable element on the page was
   the one asking for the click. `.lp-page .lp-btn.lp-btn--solid` is (0,3,0),
   which outranks both, and --bs-btn-color is set as well so the !important rule
   resolves to the right value rather than being fought over. */
.lp-page .lp-btn.lp-btn--solid {
    --bs-btn-color: #0b1014;
    background-color: var(--lp-accent);
    border-color: var(--lp-accent);
    color: #0b1014 !important;
}
.lp-page .lp-btn.lp-btn--solid:hover,
.lp-page .lp-btn.lp-btn--solid:focus-visible {
    background-color: color-mix(in srgb, var(--lp-accent) 88%, #fff);
    border-color: color-mix(in srgb, var(--lp-accent) 88%, #fff);
}
.lp-page .lp-btn.lp-btn--ghost {
    --bs-btn-color: var(--lp-ink);
    background-color: transparent;
    border-color: var(--lp-rule-2);
    color: var(--lp-ink) !important;
}
.lp-page .lp-btn.lp-btn--ghost:hover,
.lp-page .lp-btn.lp-btn--ghost:focus-visible {
    --bs-btn-color: var(--lp-accent);
    border-color: var(--lp-accent);
    background-color: rgba(var(--lp-accent-rgb),.07);
    color: var(--lp-accent) !important;
}
.lp-btn--block { display: flex; width: 100%; }
.lp-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }

/* Measured, not assumed: with the button focused via keyboard, :focus-visible
   matched but computed outline was `0px none` and box-shadow `none`, so tabbing
   through the page moved an invisible cursor. The app's mouse-click focus
   suppression is scoped to :not(:focus-visible) and is not the cause, but
   something upstream clears Bootstrap's focus shadow, so the ring is declared
   here explicitly rather than relied upon. */
.lp-page a:focus-visible,
.lp-page .lp-btn:focus-visible,
.lp-page .lp-pack:focus-visible,
.lp-page .accordion-button:focus-visible {
    outline: 2px solid var(--lp-accent) !important;
    outline-offset: 2px;
    box-shadow: none !important;
}
[data-bs-theme="light"] .lp-page a:focus-visible,
[data-bs-theme="light"] .lp-page .lp-btn:focus-visible,
[data-bs-theme="light"] .lp-page .lp-pack:focus-visible,
[data-bs-theme="light"] .lp-page .accordion-button:focus-visible {
    outline-color: var(--lp-accent-text) !important;
}

/* ══════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════ */
.lp-hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, var(--lp-bg) 0%, #10161d 100%);
    border-bottom: 1px solid var(--lp-rule);
}
/* A ruled backdrop rather than blurred orbs. The cell is 32px — eight times the
   app's 4px base — so the atmosphere behind the hero is on the same grid as the
   software, and it reads as an instrument rather than as ambience. */
.lp-hero-grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(to right,  rgba(255,255,255,.030) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,.030) 1px, transparent 1px);
    background-size: 32px 32px;
    -webkit-mask-image: radial-gradient(ellipse 80% 75% at 50% 25%, #000 10%, transparent 80%);
            mask-image: radial-gradient(ellipse 80% 75% at 50% 25%, #000 10%, transparent 80%);
}
.lp-hero-inner {
    position: relative;
    z-index: 1;
    padding-top: clamp(56px, 7vw, 96px);
    padding-bottom: clamp(56px, 7vw, 96px);
}
.lp-terms {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    list-style: none;
    margin: 26px 0 0;
    padding: 0;
    font-size: .72rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--lp-faint);
}
.lp-terms li { position: relative; }
.lp-terms li + li::before {
    content: "";
    position: absolute;
    left: -10px; top: 50%;
    width: 3px; height: 3px;
    border-radius: 50%;
    background: currentColor;
    opacity: .55;
    transform: translateY(-50%);
}

/* ── The signature: a pipeline in live markup ── */
.lp-board {
    margin: 0;
    border: 1px solid var(--lp-rule-2);
    border-radius: var(--lp-r-lg);
    background: var(--lp-surface);
    overflow: hidden;
    box-shadow: 0 24px 64px rgba(0,0,0,.55);
}
.lp-board-bar {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--lp-rule);
    background: rgba(0,0,0,.22);
}
.lp-board-name {
    font-size: .7rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--lp-faint);
    margin-right: auto;
}
.lp-board-sum {
    font-size: .95rem;
    font-weight: 500;
    color: var(--lp-ink);
    font-variant-numeric: tabular-nums;
}
.lp-board-delta {
    font-size: .7rem;
    font-weight: 500;
    color: var(--status-success);
    font-variant-numeric: tabular-nums;
}
.lp-board-cols {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    background: var(--lp-rule);
}
.lp-col {
    background: var(--lp-surface);
    padding: 14px 12px 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}
.lp-col-head {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding-bottom: 10px;
    margin-bottom: 2px;
    border-bottom: 1px solid var(--lp-rule);
}
.lp-col-name {
    font-size: .68rem;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--lp-muted);
}
.lp-col-meta {
    font-size: .68rem;
    color: var(--lp-faint);
    font-variant-numeric: tabular-nums;
}
.lp-col--won .lp-col-name { color: var(--status-success); }
.lp-deal {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 10px;
    border: 1px solid var(--lp-rule);
    border-radius: var(--lp-r);
    background: var(--lp-bg);
}
.lp-deal-co {
    font-family: var(--lp-body);
    font-size: .78rem;
    font-weight: 500;
    color: var(--lp-ink);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.lp-deal-line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px;
    font-size: .7rem;
    font-variant-numeric: tabular-nums;
}
.lp-deal-line b { font-weight: 500; color: var(--lp-muted); }
.lp-deal-line em { font-style: normal; color: var(--lp-faint); }
/* The confidence meters filling on load are the page's one orchestrated
   moment — it is what a pipeline actually does, so it carries information
   rather than decorating. It runs once and stops. */
.lp-meter {
    display: block;
    height: 2px;
    background: rgba(255,255,255,.07);
    border-radius: 1px;
    overflow: hidden;
}
.lp-meter i {
    display: block;
    height: 100%;
    width: var(--p, 0%);
    background: var(--lp-accent);
    transform: scaleX(0);
    transform-origin: left center;
    animation: lp-fill .85s var(--o-ease) forwards;
    animation-delay: calc(var(--d, 0ms) + 260ms);
}
.lp-col--won .lp-meter i { background: var(--status-success); }
@keyframes lp-fill { to { transform: scaleX(1); } }

.lp-col { animation: lp-rise .6s var(--o-ease) both; animation-delay: var(--d, 0ms); }
@keyframes lp-rise {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .lp-col      { animation: none; }
    .lp-meter i  { animation: none; transform: scaleX(1); }
}

/* ══════════════════════════════════════════════
   SPEC STRIP
   ══════════════════════════════════════════════ */
.lp-spec {
    background: var(--lp-bg);
    border-bottom: 1px solid var(--lp-rule);
}
.lp-spec-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin: 0;
}
.lp-spec-cell {
    padding: 26px 8px 26px 24px;
    border-left: 1px solid var(--lp-rule);
}
.lp-spec-cell:first-child { border-left: 0; padding-left: 0; }
.lp-spec-val {
    font-size: 1.85rem;
    line-height: 1;
    letter-spacing: -0.035em !important;
    color: var(--lp-ink);
    margin: 0 0 8px;
    font-variant-numeric: tabular-nums;
}
.lp-spec-val--accent { color: var(--lp-accent); }
.lp-spec-key {
    font-size: .68rem;
    font-weight: 400;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--lp-faint);
    margin: 0;
}

/* ══════════════════════════════════════════════
   SECTIONS + THE HEADER GRAMMAR
   ══════════════════════════════════════════════
   Every section header is the same two-column band: a mono label in the left
   third, the heading and deck in the right two-thirds, a hairline above. It
   gives the page one consistent grammar without giving every section the same
   silhouette, which is what centred eyebrow-title-deck stacks did. */
.lp-section {
    --lp-cell-bg: var(--lp-bg);
    background: var(--lp-bg);
    padding: var(--lp-gutter) 0;
}
.lp-section--surface {
    --lp-cell-bg: var(--lp-surface);
    background: var(--lp-surface);
}
.lp-head {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: 24px;
    padding-top: 22px;
    border-top: 1px solid var(--lp-rule-2);
    margin-bottom: 44px;
}
.lp-head .lp-eyebrow { padding-top: .35em; }
.lp-head-body { min-width: 0; }
.lp-head .lp-deck { margin-top: 16px; }

/* ══════════════════════════════════════════════
   RULED MATRIX
   ══════════════════════════════════════════════
   Cells are separated by the grid gap showing the container's background
   through as a 1px rule, so six capabilities read as one instrument panel
   instead of six floating stickers. No card borders, no drop shadows, and
   no hover lift — the state change is the surface, not the geometry. */
.lp-matrix {
    display: grid;
    gap: 1px;
    background: var(--lp-rule);
    border: 1px solid var(--lp-rule);
    border-radius: var(--lp-r);
    overflow: hidden;
    list-style: none;
    margin: 0;
    padding: 0;
}
.lp-matrix--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lp-matrix--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lp-cell,
.lp-pack {
    background: var(--lp-cell-bg);
    padding: 30px 26px;
    min-width: 0;
    transition: background-color .18s var(--o-ease);
}
.lp-matrix--tight .lp-pack { padding: 24px 22px; }
.lp-cell:hover,
.lp-pack:hover { background: var(--lp-raised); }
.lp-glyph {
    display: block;
    font-size: 1.05rem;
    color: var(--lp-accent);
    margin-bottom: 18px;
    opacity: .9;
}
.lp-cell-title {
    font-size: 1.02rem;
    color: var(--lp-ink);
    margin: 0 0 9px;
}
.lp-cell-text {
    font-size: .885rem;
    line-height: 1.65;
    color: var(--lp-muted);
    margin: 0;
}
.lp-fields {
    font-size: .68rem;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--lp-faint);
    margin: 16px 0 0;
    padding-top: 14px;
    border-top: 1px solid var(--lp-rule);
    line-height: 1.7;
}

/* ── Steps: numbered because this genuinely is a sequence ── */
.lp-steps .lp-cell { display: block; }
.lp-step-n {
    display: block;
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .14em;
    color: var(--lp-accent);
    margin-bottom: 18px;
}

/* ══════════════════════════════════════════════
   SHOWCASE
   ══════════════════════════════════════════════ */
.lp-showcase-row + .lp-showcase-row { margin-top: clamp(48px, 6vw, 88px); }
.lp-figure {
    margin: 0;
    border: 1px solid var(--lp-rule-2);
    border-radius: var(--lp-r-lg);
    overflow: hidden;
    background: var(--lp-bg);
    box-shadow: 0 20px 52px rgba(0,0,0,.45);
}
/* Each plate keeps its own aspect: the captures are framed to their content,
   so nothing here needs to crop them. `.lp-figure--crop` used to force
   1920/700 with `object-fit: cover`, because the CRM overview capture was
   full-page and spent its bottom ~27% on the app's own footer — directly above
   the real one. Replaced 2026-09-24 by a capture that stops at the dashboard
   (and whose charts have data in them), which is what that rule was waiting
   for. */
.lp-figure-img { display: block; width: 100%; height: auto; }
/* A caption naming the screen, the way a datasheet labels a plate. It replaces
   the fake macOS window chrome — traffic-light dots and a pulsing "Live" badge
   over a static PNG were the page's most templated device and its least honest. */
.lp-figure-cap {
    padding: 9px 14px;
    border-top: 1px solid var(--lp-rule);
    background: rgba(0,0,0,.28);
    font-size: .66rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--lp-faint);
}
.lp-points { list-style: none; margin: 0; padding: 0; }
.lp-points li {
    padding: 20px 0;
    border-top: 1px solid var(--lp-rule);
}
.lp-points li:first-child { border-top: 0; padding-top: 0; }
/* …unless a deck paragraph sits directly above it. Dropping the first item's
   top padding is right when the list opens a column, and wrong here: the deck's
   last line and the first point's title rendered with a 0px gap between them,
   so the lead ran straight into "Stage-by-stage board" as if it were one
   sentence. Only the two optional showcase rows have a deck above their points,
   and their images had never been added — so the rows had never rendered, and
   the collision had never been seen. Measured at 1440px: 0px, now 22px. */
.lp-deck + .lp-points li:first-child {
    border-top: 1px solid var(--lp-rule);
    padding-top: 22px;
}
.lp-points li:last-child { padding-bottom: 0; }
.lp-point-title {
    font-size: .98rem;
    color: var(--lp-ink);
    margin: 0 0 7px;
}
.lp-point-text {
    font-size: .875rem;
    line-height: 1.65;
    color: var(--lp-muted);
    margin: 0;
}

/* ══════════════════════════════════════════════
   INDUSTRY PACKS
   ══════════════════════════════════════════════ */
.lp-pack { display: block; text-decoration: none; }
.lp-pack-name {
    font-size: .92rem;
    color: var(--lp-ink);
    margin: 0 0 5px;
}
.lp-pack-desc {
    font-size: .78rem;
    line-height: 1.55;
    color: var(--lp-faint);
    margin: 0;
}
.lp-pack--more .lp-pack-name,
.lp-pack--more .lp-glyph { color: var(--lp-accent); }
.lp-pack--more:hover .lp-pack-desc { color: var(--lp-muted); }
.lp-tagline {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin: 22px 0 0;
    font-size: .68rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--lp-faint);
}

/* ══════════════════════════════════════════════
   INTEGRATIONS
   ══════════════════════════════════════════════ */
.lp-int-key {
    font-size: .68rem;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--lp-accent);
    margin: 0 0 14px;
}
.lp-int-list {
    font-size: .8rem;
    line-height: 2;
    color: var(--lp-muted);
    margin: 0;
}
.lp-footnote {
    font-size: .82rem;
    line-height: 1.7;
    color: var(--lp-faint);
    max-width: 68ch;
    margin: 26px 0 0;
}
.lp-footnote a { color: var(--lp-accent); text-decoration: none; }
.lp-footnote a:hover { text-decoration: underline; }

/* ══════════════════════════════════════════════
   MODULE PANELS
   ══════════════════════════════════════════════ */
.lp-panel {
    border: 1px solid var(--lp-rule);
    border-radius: var(--lp-r);
    background: var(--lp-cell-bg);
    height: 100%;
    overflow: hidden;
}
.lp-panel-head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--lp-rule-2);
    background: rgba(0,0,0,.22);
}
.lp-panel-key {
    font-size: .7rem;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--lp-ink);
}
.lp-panel-note {
    font-size: .68rem;
    color: var(--lp-faint);
}
.lp-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--lp-rule);
    transition: background-color .15s var(--o-ease);
}
.lp-row:hover { background: rgba(255,255,255,.02); }
.lp-row-main { min-width: 0; }
.lp-row-name {
    display: block;
    font-size: .9rem;
    color: var(--lp-ink);
    line-height: 1.35;
}
.lp-row-desc {
    display: block;
    font-size: .78rem;
    color: var(--lp-faint);
    line-height: 1.5;
    margin-top: 2px;
}
.lp-row-price {
    margin-left: auto;
    flex-shrink: 0;
    font-size: .95rem;
    font-weight: 500;
    color: var(--lp-accent);
    font-variant-numeric: tabular-nums;
}
.lp-row--mark { background: rgba(var(--lp-accent-rgb),.045); }
.lp-row--mark:hover { background: rgba(var(--lp-accent-rgb),.075); }
.lp-panel-foot {
    padding: 16px 20px;
    font-size: .8rem;
    line-height: 1.6;
    color: var(--lp-faint);
}

/* ══════════════════════════════════════════════
   PRICING
   ══════════════════════════════════════════════
   The only real card on the page. Everything else is ruled, so giving the
   price its own enclosed surface is what makes it read as the destination. */
.lp-price {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    border: 1px solid var(--lp-rule-2);
    border-top: 2px solid var(--lp-accent);
    border-radius: var(--lp-r);
    background: var(--lp-surface);
    overflow: hidden;
}
/* Two priced tiers side by side, then the detail column. A two-tier product is
   sold by the comparison, so both prices have to be readable at once rather than
   one sitting in the panel and the other mentioned in prose underneath.
   Declared before the mobile breakpoint below, which resets the grid to a single
   column at equal specificity and therefore still wins inside it. */
.lp-price--duo {
    grid-template-columns: minmax(0, 4fr) minmax(0, 4fr) minmax(0, 7fr);
}
.lp-price-fig {
    padding: 36px 32px;
    border-right: 1px solid var(--lp-rule);
}
/* The recommended tier carries the accent; the other stays quiet. Only one
   thing on a pricing panel should be loud. */
.lp-price-fig--lead .lp-int-key { color: var(--lp-accent); }
.lp-price-amount {
    display: flex;
    align-items: flex-start;
    gap: 2px;
    font-size: 3.4rem;
    line-height: .95;
    letter-spacing: -0.04em !important;
    color: var(--lp-ink);
    margin: 0;
    font-variant-numeric: tabular-nums;
}
.lp-price-amount span {
    font-size: 1.5rem;
    color: var(--lp-accent);
    line-height: 1.1;
}
.lp-price-unit {
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--lp-muted);
    margin: 12px 0 0;
}
.lp-price-note {
    font-size: .8rem;
    color: var(--lp-faint);
    margin: 4px 0 0;
}
.lp-price-fine {
    font-size: .75rem;
    color: var(--lp-faint);
    text-align: center;
    margin: 10px 0 0;
}
.lp-price-fig .lp-btn { margin-top: 26px; }
.lp-price-inc { padding: 36px 32px; }
.lp-checks {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px 28px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.lp-checks li {
    position: relative;
    padding: 6px 0 6px 22px;
    font-size: .8rem;
    color: var(--lp-muted);
}
/* Equal arms rotated 45° draw a "V", not a tick — the arms have to differ. */
.lp-checks li::before {
    content: "";
    position: absolute;
    left: 4px; top: 50%;
    width: 5px; height: 9px;
    margin-top: -6px;
    border-right: 1.5px solid var(--lp-accent);
    border-bottom: 1.5px solid var(--lp-accent);
    transform: rotate(42deg);
}

/* ══════════════════════════════════════════════
   FAQ
   ══════════════════════════════════════════════ */
.lp-faq { --bs-accordion-border-radius: var(--lp-r); }
.lp-faq .accordion-item {
    border: 0;
    border-top: 1px solid var(--lp-rule);
    border-radius: 0 !important;
    background: transparent;
    margin: 0;
}
.lp-faq .accordion-item:last-child { border-bottom: 1px solid var(--lp-rule); }
.lp-faq .accordion-button {
    padding: 20px 40px 20px 0;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--lp-ink);
    font-size: 1rem;
    letter-spacing: -0.015em;
}
.lp-faq .accordion-button:not(.collapsed) { color: var(--lp-accent); }
.lp-faq .accordion-button:focus-visible {
    outline: 2px solid var(--lp-accent);
    outline-offset: -2px;
}
.lp-faq .accordion-button::after {
    width: 12px; height: 12px;
    background-size: 12px;
    filter: invert(1);
    opacity: .5;
}
.lp-faq .accordion-button:not(.collapsed)::after { opacity: 1; }
.lp-faq .accordion-body {
    padding: 0 0 24px;
    max-width: 72ch;
    font-size: .9rem;
    line-height: 1.75;
    color: var(--lp-muted);
    background: transparent;
}

/* ══════════════════════════════════════════════
   CLOSE
   ══════════════════════════════════════════════ */
.lp-close {
    background: var(--lp-bg);
    border-top: 1px solid var(--lp-rule);
    padding: var(--lp-gutter) 0;
}
.lp-close-inner {
    border-left: 2px solid var(--lp-accent);
    padding-left: clamp(24px, 4vw, 48px);
    max-width: 62ch;
}
.lp-close-title {
    font-size: clamp(1.8rem, 3.4vw, 2.6rem);
    line-height: 1.1;
    letter-spacing: -0.035em !important;
    color: var(--lp-ink);
    margin: 0;
}
.lp-deck--close { margin-top: 16px; }

/* ══════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════ */
@media (max-width: 1199px) {
    .lp-checks { gap: 2px 18px; }
}
@media (max-width: 991px) {
    .lp-head {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-bottom: 34px;
    }
    .lp-head .lp-eyebrow { padding-top: 0; }
    .lp-matrix--3,
    .lp-matrix--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* Three steps into two columns leaves the last cell orphaned beside an empty
       one, which reads as a rendering fault rather than a layout. Spanning it
       closes the grid. */
    .lp-steps .lp-cell:last-child { grid-column: 1 / -1; }
    .lp-price { grid-template-columns: 1fr; }
    .lp-price-fig {
        border-right: 0;
        border-bottom: 1px solid var(--lp-rule);
    }
    .lp-deck--hero { max-width: 60ch; }
    /* The board keeps four real columns and scrolls sideways — which is how a
       kanban behaves in the product too, so the constraint stays truthful. */
    .lp-board-cols {
        grid-auto-flow: column;
        grid-auto-columns: minmax(190px, 1fr);
        grid-template-columns: none;
        overflow-x: auto;
        scrollbar-width: thin;
    }
}
@media (max-width: 767px) {
    .lp-spec-row { grid-template-columns: repeat(2, 1fr); }
    .lp-spec-cell {
        padding: 20px 8px 20px 20px;
        border-top: 1px solid var(--lp-rule);
    }
    .lp-spec-cell:nth-child(odd) { border-left: 0; padding-left: 0; }
    .lp-spec-cell:nth-child(-n+2) { border-top: 0; }
    .lp-matrix--3,
    .lp-matrix--4 { grid-template-columns: 1fr; }
    .lp-cell, .lp-pack { padding: 24px 20px; }
    .lp-price-fig, .lp-price-inc { padding: 28px 22px; }
    .lp-checks { grid-template-columns: 1fr; }
    .lp-actions .lp-btn { flex: 1 1 auto; }
}
@media (max-width: 575px) {
    .lp-terms { gap: 6px 18px; }
}


/* ══════════════════════════════════════════════════════════════
   LANDING PAGE — LIGHT MODE
   ══════════════════════════════════════════════════════════════
   Light resolves through the app's own light tokens rather than a second set
   of literals, so the two themes cannot disagree about what "light" means.
   Because every rule above is written against these six variables plus the
   two rule colours, remapping them here is nearly the whole job. */
[data-bs-theme="light"] {
    --lp-bg:      #ffffff;
    --lp-surface: var(--omniroq-light-surface-1, #e8eef4);
    --lp-raised:  var(--omniroq-light-surface-2, #dde5ee);
    --lp-rule:    rgba(29,39,51,.12);
    --lp-rule-2:  rgba(29,39,51,.22);
    --lp-ink:     var(--omniroq-light-text, #1d2733);
    --lp-muted:   #45566a;
    /* Same AA reasoning as the dark theme. #64748a measured 3.2:1 against the
       tinted caption bars, which is a fail at 10-13px; #5a6a7d clears 5:1. */
    --lp-faint:   #5a6a7d;
}
[data-bs-theme="light"] .lp-hero {
    background: linear-gradient(180deg, #ffffff 0%, var(--omniroq-light-surface-1, #e8eef4) 100%);
}
[data-bs-theme="light"] .lp-hero-grid {
    background-image:
        linear-gradient(to right,  rgba(29,39,51,.055) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(29,39,51,.055) 1px, transparent 1px);
}
[data-bs-theme="light"] .lp-board {
    background: #ffffff;
    box-shadow: 0 20px 48px rgba(29,39,51,.14);
}
[data-bs-theme="light"] .lp-board-bar,
[data-bs-theme="light"] .lp-panel-head,
[data-bs-theme="light"] .lp-figure-cap { background: rgba(29,39,51,.045); }
[data-bs-theme="light"] .lp-col { background: #ffffff; }
[data-bs-theme="light"] .lp-deal { background: var(--omniroq-light-surface-1, #e8eef4); }
[data-bs-theme="light"] .lp-meter { background: rgba(29,39,51,.10); }
[data-bs-theme="light"] .lp-figure {
    background: #ffffff;
    box-shadow: 0 16px 40px rgba(29,39,51,.13);
}
/* The mint accent is tuned for dark surfaces; on white it fails contrast as
   text and as a button fill. These two swaps are the only places the landing
   page departs from the accent variable, and they track it via color-mix so a
   re-themed accent still darkens rather than being pinned to a literal. */
[data-bs-theme="light"] {
    --lp-accent-text: color-mix(in srgb, var(--omniroq-accent, #78c2ad) 42%, #0b3d33);
}
[data-bs-theme="light"] .lp-eyebrow,
[data-bs-theme="light"] .lp-int-key,
[data-bs-theme="light"] .lp-step-n,
[data-bs-theme="light"] .lp-glyph,
[data-bs-theme="light"] .lp-row-price,
[data-bs-theme="light"] .lp-h1-accent,
[data-bs-theme="light"] .lp-spec-val--accent,
[data-bs-theme="light"] .lp-price-amount span,
[data-bs-theme="light"] .lp-pack--more .lp-pack-name,
[data-bs-theme="light"] .lp-footnote a,
[data-bs-theme="light"] .lp-faq .accordion-button:not(.collapsed) { color: var(--lp-accent-text); }
[data-bs-theme="light"] .lp-page .lp-btn.lp-btn--solid {
    --bs-btn-color: #ffffff;
    background-color: var(--lp-accent-text);
    border-color: var(--lp-accent-text);
    color: #ffffff !important;
}
[data-bs-theme="light"] .lp-page .lp-btn.lp-btn--solid:hover,
[data-bs-theme="light"] .lp-page .lp-btn.lp-btn--solid:focus-visible {
    background-color: color-mix(in srgb, var(--lp-accent-text) 85%, #000);
    border-color: color-mix(in srgb, var(--lp-accent-text) 85%, #000);
}
[data-bs-theme="light"] .lp-page .lp-btn.lp-btn--ghost {
    background-color: transparent;
}
[data-bs-theme="light"] .lp-page .lp-btn.lp-btn--ghost:hover,
[data-bs-theme="light"] .lp-page .lp-btn.lp-btn--ghost:focus-visible {
    --bs-btn-color: var(--lp-accent-text);
    border-color: var(--lp-accent-text);
    color: var(--lp-accent-text) !important;
    background-color: rgba(var(--lp-accent-rgb),.12);
}
[data-bs-theme="light"] .lp-price { border-top-color: var(--lp-accent-text); }
[data-bs-theme="light"] .lp-close-inner { border-left-color: var(--lp-accent-text); }
[data-bs-theme="light"] .lp-checks li::before {
    border-left-color: var(--lp-accent-text);
    border-bottom-color: var(--lp-accent-text);
}
[data-bs-theme="light"] .lp-row:hover { background: rgba(29,39,51,.03); }
[data-bs-theme="light"] .lp-faq .accordion-button::after { filter: none; }



.toast-body::-webkit-scrollbar-track {
    background: #2c2c2c !important;
}

.toast-body::-webkit-scrollbar-thumb {
    background: #9f9f9f !important;
    border-radius: 5px;
}

.toast-body::-webkit-scrollbar-thumb:hover {
    background: #b0b0b0 !important;
}

/* History Timeline */
.timeline {
    position: relative;
    padding: 20px 0;
}

.timeline-item {
    position: relative;
    padding-left: 60px;
}

/* Global UI variables */
:root {
     --Omniroq-checkbox-col-width: 44px;
}

.timeline-item::before {
    content: '';
    position: absolute;
    left: 12px;
    top: 50px;
    width: 2px;
    height: calc(100% - 50px);
    background: rgba(25, 135, 84, 0.3);
}

.timeline-item:last-child::before {
    display: none;
}

.timeline-marker {
    transition: transform var(--o-dur) var(--o-ease), filter var(--o-dur) var(--o-ease), box-shadow var(--o-dur) var(--o-ease) !important;
    box-shadow: 0 0 0 4px rgba(25, 135, 84, 0.1);
    transform-origin: center center;
    will-change: transform, filter;
}

.timeline-marker:hover {
    transform: scale(var(--omniroq-hover-pop-scale));
    filter: var(--omniroq-hover-glow-filter);
    box-shadow: 0 0 0 4px rgba(25, 135, 84, 0.1);
}

.timeline-content {
    transition: transform var(--o-dur) var(--o-ease), color var(--o-dur) var(--o-ease), background-color var(--o-dur) var(--o-ease), border-color var(--o-dur) var(--o-ease), filter var(--o-dur) var(--o-ease), padding var(--o-dur) var(--o-ease) !important;
    transform-origin: left center;
    will-change: transform, filter;
}

.timeline-content:hover,
.timeline-content:focus,
.timeline-content:focus-within {
    background: transparent !important;
    padding: 0;
    border-radius: 0;
    transform: scale(var(--omniroq-hover-pop-scale));
    filter: var(--omniroq-hover-glow-filter);
}

/* ── Custom Select dropdown (matches calendar datepicker exactly) ── */
.cs-wrap {
    position: relative;
}
.cs-trigger {
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
    width: 100%;
    transition: transform var(--o-dur) var(--o-ease), background var(--o-dur) var(--o-ease), color var(--o-dur) var(--o-ease), border-color var(--o-dur) var(--o-ease), box-shadow var(--o-dur) var(--o-ease), filter var(--o-dur) var(--o-ease);
    transform-origin: center center;
    will-change: transform, filter;
}
.cs-label {
    pointer-events: none;
}
.cs-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 500;
    min-width: 100%;
    margin-top: 2px;
    padding: 4px !important;
    background: var(--omniroq-dropdown-bg) !important;
    color: var(--omniroq-dropdown-text) !important;
    border: 1px solid var(--omniroq-dropdown-border) !important;
    border-radius: 0.375rem !important;
    box-shadow: var(--omniroq-dropdown-shadow) !important;
    max-height: 260px;
    overflow-y: auto;
    font-size: 0.78rem;
}
.cs-option {
    padding: 0 8px;
    height: 28px;
    line-height: 28px;
    cursor: pointer;
    white-space: nowrap;
    font-size: 0.78rem;
    color: var(--omniroq-dropdown-text) !important;
    border-radius: 4px !important;
    margin: 1px 2px;
    text-align: left;
    vertical-align: middle;
    transition: transform var(--o-dur) var(--o-ease),
                background var(--o-dur) var(--o-ease),
                color var(--o-dur) var(--o-ease),
                filter var(--o-dur) var(--o-ease);
    will-change: transform, filter;
}
.cs-option:hover,
.cs-option:focus {
    background: transparent !important;
    color: var(--omniroq-accent-text, #78c2ad) !important;
    transform: scale(var(--omniroq-hover-pop-scale));
    filter: var(--omniroq-hover-glow-filter);
    z-index: 1;
    position: relative;
}
.cs-option.cs-selected {
    background: rgba(var(--omniroq-accent-rgb, 120,194,173),0.30) !important;
    color: #fff !important;
}
/* Keyboard cursor (aria-activedescendant). DOM focus stays on the trigger, so
   without this the arrow keys would move an invisible selection. Uses an inset
   ring rather than a background so it stays legible on .cs-selected. */
.cs-option.cs-active {
    box-shadow: inset 0 0 0 2px var(--omniroq-accent, #78c2ad) !important;
    color: var(--omniroq-accent-text, #78c2ad) !important;
}
.cs-option.cs-active.cs-selected {
    color: #fff !important;
}

/* ── Multi-filter (checkbox) variant ─────────────────────────────── */
.cs-multi-option {
    display: flex !important;
    align-items: center;
    gap: 8px;
    line-height: 1 !important;
    height: 30px !important;
    padding: 0 8px !important;
}
.cs-checkbox {
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    border: 1.5px solid rgba(160,169,184,0.5);
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    line-height: 1;
    color: #1f2328;
    background: transparent;
    transition: background var(--o-dur) var(--o-ease), border-color var(--o-dur) var(--o-ease);
}
.cs-multi-option.cs-selected .cs-checkbox {
    background: rgba(var(--omniroq-accent-rgb, 120,194,173),0.85) !important;
    border-color: var(--omniroq-accent, #78c2ad) !important;
    color: #1f2328 !important;
}
.cs-multi-option:hover .cs-checkbox {
    border-color: var(--omniroq-accent, #78c2ad);
}
.cs-opt-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Status colour as TEXT, from the same --status-* tokens the badges use.

   Bootstrap's .text-success / .text-danger are tuned for their own palette on
   white, not for these surfaces: on the light theme the goal dashboard's stat
   numbers measured 1.71:1 and 2.23:1 against a 3:1 requirement for large text.
   The --status-* tokens already carry a per-theme value that clears AA, so
   semantic numbers should read from those rather than from Bootstrap. */
.o-text-success { color: var(--status-success) !important; }
.o-text-warning { color: var(--status-warning) !important; }
.o-text-danger  { color: var(--status-danger)  !important; }
.o-text-info    { color: var(--status-info)    !important; }
.o-text-neutral { color: var(--status-neutral) !important; }

/* Height-constrained frame for a responsive Chart.js canvas.

   A chart with `responsive: true` and `maintainAspectRatio: false` sizes its
   canvas to the parent's height. If that parent is height:auto, the parent is
   in turn sized by the canvas — so each resize event makes the chart slightly
   taller and the next event reads the larger height. The chart grows down the
   page forever. Chart.js requires a parent with a definite height, which is
   what this provides. `position: relative` is part of the contract: the canvas
   is positioned against this box, not the page. */
.o-chart-frame {
    position: relative;
    height: 260px;
}
.o-chart-frame > canvas {
    /* Never let the canvas drive the box it is measured against. */
    max-height: 100%;
}

/* Says what the next click will do in the date column filter. Sits under the
   calendar, quiet enough not to compete with the dates themselves. */
.date-filter-hint {
    padding: 6px 8px 2px;
    border-top: 1px solid rgba(160, 169, 184, 0.2);
    margin-top: 4px;
    font-size: 0.72rem;
    line-height: 1.3;
    color: var(--omniroq-dropdown-text, #a3aebc);
    opacity: 0.8;
    white-space: nowrap;
}

/* Leading icon in a plain table cell — the counterpart to .cs-opt-icon, for
   columns like Source that carry an icon but are not a status badge. Same
   fixed width and dimming, so a column of them lines up. */
.o-cell-icon {
    display: inline-block;
    width: 1.05rem;
    margin-right: 0.3rem;
    text-align: center;
    opacity: 0.7;
}

/* Leading icon on an option, matching the icon its table cell renders.
   Fixed width so the labels stay on one left edge whether or not a given
   option has an icon, and dimmed because the icon is a hint — the text is
   what identifies the option. */
.cs-opt-icon {
    display: inline-block;
    width: 1.05rem;
    margin-right: 0.15rem;
    text-align: center;
    opacity: 0.75;
}
.cs-multi-clear {
    border-top: 1px solid rgba(160,169,184,0.2);
    margin-top: 4px !important;
    padding-top: 2px !important;
    color: rgba(160,169,184,0.7) !important;
    font-size: 0.74rem !important;
    justify-content: center;
    text-align: center;
}
.cs-multi-clear:hover {
    color: #e0e0e0 !important;
    background: rgba(var(--omniroq-accent-rgb, 120,194,173),0.08) !important;
    transform: none !important;
}

/* Scrollbar styling for the dropdown */
.cs-dropdown::-webkit-scrollbar {
    width: 6px;
}
.cs-dropdown::-webkit-scrollbar-track {
    background: transparent;
}
.cs-dropdown::-webkit-scrollbar-thumb {
    background: rgba(var(--omniroq-accent-rgb, 120,194,173),0.30);
    border-radius: 3px;
}

/* ── Date-range column filter ─────────────────────────────────────── */
.date-filter-wrap {
    position: relative;
}
.date-filter-trigger {
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: transform var(--o-dur) var(--o-ease), background var(--o-dur) var(--o-ease), color var(--o-dur) var(--o-ease), border-color var(--o-dur) var(--o-ease), box-shadow var(--o-dur) var(--o-ease), filter var(--o-dur) var(--o-ease);
    transform-origin: center center;
    will-change: transform, filter;
}
.date-filter-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 2000;
    width: auto;
    margin-top: 2px;
    padding: 4px !important;
    background: var(--omniroq-dropdown-bg) !important;
    color: var(--omniroq-dropdown-text) !important;
    border: 1px solid var(--omniroq-dropdown-border) !important;
    border-radius: 0.375rem !important;
    box-shadow: var(--omniroq-dropdown-shadow) !important;
}
.date-filter-calendar {
    width: auto;
}

/* ── bootstrap-datepicker dark theme overrides ─────────────────────── */
.date-filter-dropdown .datepicker {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}
.datepicker {
    background: var(--omniroq-dropdown-bg) !important;
    border: 0 !important;
    border-radius: 6px !important;
    color: var(--omniroq-dropdown-text) !important;
    padding: 2px !important;
    font-size: 0.78rem;
}
/* Even grid: fixed layout with equal cell sizes */
.datepicker table {
    table-layout: fixed !important;
    width: 100% !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
}
.datepicker table tr td,
.datepicker table tr th {
    color: var(--omniroq-dropdown-text) !important;
    border-radius: 4px !important;
    padding: 0 !important;
    width: 32px !important;
    height: 28px !important;
    text-align: center !important;
    vertical-align: middle !important;
    line-height: 28px !important;
    transition: transform var(--o-dur) var(--o-ease), background var(--o-dur) var(--o-ease), color var(--o-dur) var(--o-ease), filter var(--o-dur) var(--o-ease);
    will-change: transform, filter;
}
/* Hover: light teal (subtle, like the rest of the site) */
.datepicker table tr td:hover,
.datepicker table tr th:hover {
    background: transparent !important;
    color: var(--omniroq-accent-text, #78c2ad) !important;
    transform: scale(var(--omniroq-hover-pop-scale));
    filter: var(--omniroq-hover-glow-filter);
    z-index: 1;
    position: relative;
}
/* Selected / active / focused: darker teal */
.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td.active.active,
.datepicker table tr td.focused,
.datepicker table tr td.focused:hover {
    background: rgba(var(--omniroq-accent-rgb, 120,194,173),0.30) !important;
    color: #fff !important;
    border-color: transparent !important;
    text-shadow: none !important;
}
.datepicker table tr td.today,
.datepicker table tr td.today:hover {
    background: transparent !important;
    color: var(--omniroq-dropdown-text) !important;
    box-shadow: inset 0 0 0 1px rgba(var(--omniroq-accent-rgb, 120,194,173),0.35) !important;
}
.datepicker table tr td.day:hover {
    background: transparent !important;
    color: var(--omniroq-accent-text, #78c2ad) !important;
}
/* ── Month / Year / Decade picker views ─────────────────────────── */
/* Spans inside day-view cells (e.g. range highlighting helper) – full width */
.datepicker-days table tr td span {
    display: inline-block !important;
    width: 100% !important;
    height: 100% !important;
    line-height: 28px !important;
    border-radius: 4px !important;
}
/* Month/Year/Decade spans: grid layout inside a single colspan td */
.datepicker-months table tr td span,
.datepicker-years table tr td span,
.datepicker-decades table tr td span,
.datepicker-centuries table tr td span {
    display: inline-block !important;
    width: 23% !important;
    height: 40px !important;
    line-height: 40px !important;
    margin: 1% !important;
    border-radius: 4px !important;
    cursor: pointer;
    text-align: center !important;
    font-size: 0.78rem;
    color: var(--omniroq-dropdown-text) !important;
    transition: transform var(--o-dur) var(--o-ease), background var(--o-dur) var(--o-ease), color var(--o-dur) var(--o-ease), filter var(--o-dur) var(--o-ease);
    will-change: transform, filter;
}
.datepicker-months table tr td span:hover,
.datepicker-years table tr td span:hover,
.datepicker-decades table tr td span:hover,
.datepicker-centuries table tr td span:hover {
    background: transparent !important;
    color: var(--omniroq-accent-text, #78c2ad) !important;
    transform: scale(var(--omniroq-hover-pop-scale));
    filter: var(--omniroq-hover-glow-filter);
    z-index: 1;
    position: relative;
}
.datepicker-months table tr td span.active,
.datepicker-months table tr td span.active:hover,
.datepicker-months table tr td span.focused,
.datepicker-months table tr td span.focused:hover,
.datepicker-years table tr td span.active,
.datepicker-years table tr td span.active:hover,
.datepicker-years table tr td span.focused,
.datepicker-years table tr td span.focused:hover,
.datepicker-decades table tr td span.active,
.datepicker-decades table tr td span.active:hover,
.datepicker-decades table tr td span.focused,
.datepicker-decades table tr td span.focused:hover,
.datepicker-centuries table tr td span.active,
.datepicker-centuries table tr td span.active:hover,
.datepicker-centuries table tr td span.focused,
.datepicker-centuries table tr td span.focused:hover {
    background: rgba(var(--omniroq-accent-rgb, 120,194,173),0.30) !important;
    color: #fff !important;
    border-color: transparent !important;
    text-shadow: none !important;
}
.datepicker-months table tr td span.disabled,
.datepicker-months table tr td span.disabled:hover,
.datepicker-years table tr td span.disabled,
.datepicker-years table tr td span.disabled:hover,
.datepicker-decades table tr td span.disabled,
.datepicker-decades table tr td span.disabled:hover {
    color: #444 !important;
    background: transparent !important;
    transform: none !important;
    cursor: default;
}
.datepicker-months table tr td span.old,
.datepicker-months table tr td span.new,
.datepicker-years table tr td span.old,
.datepicker-years table tr td span.new,
.datepicker-decades table tr td span.old,
.datepicker-decades table tr td span.new {
    color: var(--lp-faint) !important;
}
/* The single td that holds all month/year spans – no hover effect on the cell itself */
.datepicker-months table tr td,
.datepicker-years table tr td,
.datepicker-decades table tr td,
.datepicker-centuries table tr td {
    width: auto !important;
    height: auto !important;
    line-height: normal !important;
    padding: 0 !important;
    text-align: center !important;
}
.datepicker-months table tr td:hover,
.datepicker-years table tr td:hover,
.datepicker-decades table tr td:hover,
.datepicker-centuries table tr td:hover {
    background: transparent !important;
    transform: none !important;
}
.datepicker table tr td.old,
.datepicker table tr td.new {
    color: var(--lp-faint) !important;
}
.datepicker table tr td.disabled,
.datepicker table tr td.disabled:hover {
    color: #444 !important;
    background: transparent !important;
}
.datepicker .datepicker-switch,
.datepicker .prev,
.datepicker .next {
    color: var(--omniroq-accent-text, #78c2ad) !important;
    font-weight: 600;
    transition: transform var(--o-dur) var(--o-ease);
}
.datepicker .datepicker-switch:hover,
.datepicker .prev:hover,
.datepicker .next:hover {
    background: rgba(var(--omniroq-accent-rgb, 120,194,173),0.18) !important;
    color: var(--omniroq-accent-text, #78c2ad) !important;
    transform: scale(var(--omniroq-hover-pop-scale, 1.12));
    filter: var(--omniroq-hover-glow-filter, none);
}
.datepicker .dow {
    color: var(--bs-dropdown-link-hover-color, var(--omniroq-accent, #78c2ad)) !important;
    font-weight: 600;
    font-size: 0.75rem;
}
.datepicker thead tr:first-child th {
    cursor: pointer;
}
.datepicker tfoot tr th.clear,
.datepicker tfoot tr th.today {
    color: var(--omniroq-accent-text, #78c2ad) !important;
    font-weight: 600;
}
.datepicker tfoot tr th.clear:hover,
.datepicker tfoot tr th.today:hover {
    background: rgba(var(--omniroq-accent-rgb, 120,194,173),0.15) !important;
}
/* Range highlight (in-between days) */
.datepicker table tr td.range,
.datepicker table tr td.range:hover {
    background: rgba(var(--omniroq-accent-rgb, 120,194,173),0.12) !important;
    color: var(--omniroq-accent-text, #78c2ad) !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Explicit start/end styling for our custom range selection */
.datepicker table tr td.range-start,
.datepicker table tr td.range-start:hover,
.datepicker table tr td.range-end,
.datepicker table tr td.range-end:hover {
    background: rgba(var(--omniroq-accent-rgb, 120,194,173),0.30) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: none !important;
    transform: none !important;
}
/* Range-start gets left rounding only, range-end gets right rounding only */
.datepicker table tr td.range-start,
.datepicker table tr td.range-start:hover {
    border-radius: 4px 0 0 4px !important;
}
.datepicker table tr td.range-end,
.datepicker table tr td.range-end:hover {
    border-radius: 0 4px 4px 0 !important;
}
/* When start and end are the same cell, keep full rounding */
.datepicker table tr td.range-start.range-end,
.datepicker table tr td.range-start.range-end:hover {
    border-radius: 4px !important;
}
/* Suppress today ring when it falls inside a range */
.datepicker table tr td.today.range,
.datepicker table tr td.today.range-start,
.datepicker table tr td.today.range-end,
.datepicker table tr td.today.active {
    box-shadow: none !important;
}

/* ------------------------------------------------------------------
   GLOBAL CONSISTENCY RULES
   Applied site-wide to ensure uniform appearance across all apps.
------------------------------------------------------------------- */

/* Standard header shell used across list/detail/form pages. */
.crm-standard-header,
.detail-header,
.list-header,
.container-fluid.mt-3.px-3 > .d-flex.justify-content-between.align-items-center:first-child,
.container-fluid.mt-3.px-3 > .d-flex.justify-content-between.align-items-start:first-child,
.container-fluid.py-4 > .d-flex.justify-content-between.align-items-center:first-child,
.container-fluid.py-4 > .d-flex.justify-content-between.align-items-start:first-child,
.container.mt-3 > .d-flex.justify-content-between.align-items-center:first-child,
.container.mt-3 > .d-flex.justify-content-between.align-items-start:first-child {
    gap: 1rem;
    padding-bottom: 0.85rem;
    margin-bottom: 1rem !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.crm-standard-header,
.detail-header,
.list-header {
    align-items: center !important;
}

.crm-standard-header .crm-header-main,
.detail-header .crm-header-main,
.list-header .crm-header-main,
.detail-header > .d-flex.align-items-center,
.list-header > .d-flex.align-items-center,
.detail-header > .d-flex.align-items-center.gap-3,
.list-header > .d-flex.align-items-center.gap-3 {
    display: flex;
    align-items: center;
    gap: 0.85rem !important;
    min-width: 0;
}

/* One consistent page title size, weight, and spacing everywhere. */
.crm-standard-header h1,
.crm-standard-header h2,
.crm-standard-header h3,
.detail-header h1,
.detail-header h2,
.detail-header h3,
.list-header h1,
.list-header h2,
.list-header h3,
.container-fluid.mt-3.px-3 > .d-flex:first-child h1,
.container-fluid.py-4 > .d-flex:first-child h1,
.container.mt-3 > .d-flex:first-child h1 {
    font-size: 1.75rem !important;
    line-height: 1.2;
    font-weight: 600;
    margin: 0 !important;
    color: #e8eef7 !important;
}

/* Remove mixed page-title icons so all headers follow the same form. */
.crm-standard-header h1 > i:first-child,
.crm-standard-header h2 > i:first-child,
.crm-standard-header h3 > i:first-child,
.detail-header h1 > i:first-child,
.detail-header h2 > i:first-child,
.detail-header h3 > i:first-child,
.list-header h1 > i:first-child,
.list-header h2 > i:first-child,
.list-header h3 > i:first-child {
    display: none !important;
}

/* Standard subtitle styling below page titles. */
.crm-standard-header small,
.crm-standard-header .text-secondary,
.crm-standard-header .text-muted,
.detail-header small,
.detail-header .text-secondary,
.detail-header .text-muted,
.list-header small,
.list-header .text-secondary,
.list-header .text-muted {
    font-size: 0.95rem !important;
    line-height: 1.35;
}

/* Standard back button across all apps. */
.crm-back-link,
.detail-header a.hover-zoom,
.list-header a.hover-zoom,
.container-fluid.mt-3.px-3 a.hover-zoom,
.container-fluid.py-4 a.hover-zoom,
.container.mt-3 a.hover-zoom {
    width: 44px !important;
    height: 44px !important;
    max-width: 44px !important;
    min-width: 44px !important;
    flex: 0 0 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 12px;
    overflow: visible;
    transition: transform var(--o-dur) var(--o-ease), color var(--o-dur) var(--o-ease), background-color var(--o-dur) var(--o-ease), border-color var(--o-dur) var(--o-ease), box-shadow var(--o-dur) var(--o-ease), filter var(--o-dur) var(--o-ease) !important;
    transform-origin: center center;
    will-change: transform, filter;
}

.crm-back-link img,
.detail-header a.hover-zoom img,
.list-header a.hover-zoom img,
.container-fluid.mt-3.px-3 a.hover-zoom img,
.container-fluid.py-4 a.hover-zoom img,
.container.mt-3 a.hover-zoom img {
    display: none !important;
}

.crm-back-link i,
.crm-back-link span,
.crm-back-link .bi {
    display: none !important;
}

.crm-back-link:hover,
.detail-header a.hover-zoom:hover,
.list-header a.hover-zoom:hover,
.container-fluid.mt-3.px-3 a.hover-zoom:hover,
.container-fluid.py-4 a.hover-zoom:hover,
.container.mt-3 a.hover-zoom:hover,
.crm-back-link:focus-visible,
.detail-header a.hover-zoom:focus-visible,
.list-header a.hover-zoom:focus-visible,
.container-fluid.mt-3.px-3 a.hover-zoom:focus-visible,
.container-fluid.py-4 a.hover-zoom:focus-visible,
.container.mt-3 a.hover-zoom:focus-visible {
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    transform: scale(var(--omniroq-hover-pop-scale, 1.08));
    filter: var(--omniroq-hover-glow-filter);
}

.crm-back-link:hover img,
.detail-header a.hover-zoom:hover img,
.list-header a.hover-zoom:hover img,
.container-fluid.mt-3.px-3 a.hover-zoom:hover img,
.container-fluid.py-4 a.hover-zoom:hover img,
.container.mt-3 a.hover-zoom:hover img,
.crm-back-link:focus-visible img,
.detail-header a.hover-zoom:focus-visible img,
.list-header a.hover-zoom:focus-visible img,
.container-fluid.mt-3.px-3 a.hover-zoom:focus-visible img,
.container-fluid.py-4 a.hover-zoom:focus-visible img,
.container.mt-3 a.hover-zoom:focus-visible img {
    filter: var(--omniroq-hover-glow-filter);
}

.detail-actions,
.list-header .btn-group,
.crm-standard-header .detail-actions {
    gap: 0.5rem;
}

/* Hide legacy divider lines that older templates placed directly below headers. */
.crm-standard-header + hr.border-top.border-1.border-light,
.detail-header + hr.border-top.border-1.border-light,
.list-header + hr.border-top.border-1.border-light,
.container-fluid.mt-3.px-3 > hr.border-top.border-1.border-light:first-of-type,
.container-fluid.py-4 > hr.border-top.border-1.border-light:first-of-type {
    display: none !important;
}

/* Toolbar 3-section layout: left | center (truly centered) | right */
/* Three columns, not a centred absolute overlay.
   The pagination used to be `position:absolute; left:50%` inside a flex row, so
   it was out of flow and the export buttons ran straight underneath it: on
   /leads/ at 1440px the PDF and Print buttons rendered on top of « ‹ 1 2 3, and
   both were unclickable where they overlapped. A functional bug, not a cosmetic
   one, and it affected every list page in the product.

   A grid keeps the middle column optically centred while making overlap
   structurally impossible — grid items cannot occupy the same cell. `!important`
   on display is needed because all nine templates that build this toolbar carry
   Bootstrap's `.d-flex`, which is itself `display:flex !important`; fixing it
   here rather than in nine files keeps them consistent by construction. */
.list-toolbar {
    position: relative;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 0.5rem 0.75rem;
}
.list-toolbar > .toolbar-left {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-width: 0;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.list-toolbar > .toolbar-center {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    gap: 4px;
    flex-wrap: wrap;
}
.list-toolbar > .toolbar-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
    flex-wrap: wrap;
    gap: 0.4rem;
}
/* Below this the three groups cannot sit side by side without crushing; stack
   them instead of letting the columns collapse into each other. */
@media (max-width: 1399px) {
    .list-toolbar {
        grid-template-columns: minmax(0, 1fr);
    }
    .list-toolbar > .toolbar-center,
    .list-toolbar > .toolbar-right {
        justify-content: flex-start;
    }
}

/* Standardize old header/list-toolbar buttons to the newer app button system. */
.crm-standard-action,
.crm-standard-header .btn,
.crm-standard-header .btn-group > a,
.crm-standard-header .btn-group > button,
.list-toolbar .btn,
.list-toolbar a.btn,
.custom-buttons .btn,
.custom-buttons a.btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.4rem;
    /* Compact by design. These were 38px tall at 0.95rem with 0.95rem of side
       padding — a full-size button in a bar that routinely holds eight of them,
       which is what pushed page headers onto a second row at ordinary window
       widths. */
    min-height: 32px;
    padding: 0.3rem 0.7rem !important;
    border-radius: 0.55rem !important;
    font-size: 0.86rem !important;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
}

.crm-standard-header .btn.btn-sm,
.crm-standard-header .btn-group > a.btn-sm,
.crm-standard-header .btn-group > button.btn-sm,
.list-toolbar .btn.btn-sm,
.custom-buttons .btn.btn-sm,
.crm-standard-action.btn-sm {
    /* btn-sm used to be overridden to the SAME size as the full button, so
       marking a toolbar button small did nothing at all. It is now genuinely
       smaller than the base above. */
    min-height: 29px;
    font-size: 0.8rem !important;
    padding: 0.22rem 0.58rem !important;
}

.crm-standard-header .btn-group,
.detail-actions,
.list-toolbar .custom-buttons,
.list-toolbar > div,
.list-header .btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.crm-standard-header,
.detail-header,
.list-header,
.crm-standard-header .crm-header-main,
.detail-header .crm-header-main,
.list-header .crm-header-main,
.detail-actions,
.detail-header .dropdown,
.detail-actions .dropdown,
.detail-header .btn,
.detail-actions .btn {
    overflow: visible !important;
}

.crm-standard-header,
.detail-header,
.list-header {
    position: relative;
    /* Above page content, but BELOW the navbar (z 1020) so the nav's dropdowns
       always overlay the page header. */
    z-index: 10;
}

/* While a button inside the header is hovered, lift the header's whole
   stacking context above the navbar (1020) so the button's hover glow
   isn't painted over by the navbar's opaque background. Reverts to
   z-index:10 (below navbar) on mouse-out, preserving the dropdown-overlay
   behavior above. */
.crm-standard-header:has(.btn:hover),
.detail-header:has(.btn:hover),
.list-header:has(.btn:hover) {
    z-index: 1030;
}

.detail-header .dropdown,
.detail-actions .dropdown,
.detail-header .btn,
.detail-actions .btn {
    position: relative;
    z-index: 1;
}

.detail-header .dropdown-toggle,
.detail-actions .dropdown-toggle {
    isolation: isolate;
    z-index: 2;
}

@media (min-width: 576px) {
    .detail-header .btn:hover,
    .detail-header .btn:focus,
    .detail-header .btn:focus-visible,
    .detail-actions .btn:hover,
    .detail-actions .btn:focus,
    .detail-actions .btn:focus-visible,
    .list-header .btn:hover,
    .list-header .btn:focus,
    .list-header .btn:focus-visible,
    .list-header .btn-group > .btn:hover,
    .list-header .btn-group > .btn:focus,
    .list-header .btn-group > .btn:focus-visible,
    .list-header .btn-group > a:hover,
    .list-header .btn-group > a:focus,
    .list-header .btn-group > a:focus-visible {
        position: relative;
        z-index: 12 !important;   /* lift hovered header button above siblings, still below navbar */
        isolation: isolate;
    }
}

.crm-standard-action .bi,
.crm-standard-header .btn .bi,
.crm-standard-header .btn-group > a .bi,
.crm-standard-header .btn-group > button .bi,
.list-toolbar .btn .bi,
.custom-buttons .btn .bi {
    font-size: 0.95em;
    line-height: 1;
    color: inherit !important;
}

body[data-bs-theme] .btn,
body[data-bs-theme] .crm-standard-action,
body[data-bs-theme] .list-toolbar .btn,
body[data-bs-theme] .custom-buttons .btn,
body[data-bs-theme] .dataTables_wrapper .btn,
body[data-bs-theme] .dataTables_wrapper .dt-button {
    color: var(--bs-btn-color, inherit) !important;
}

body[data-bs-theme] .btn-outline-primary,
body[data-bs-theme] .crm-standard-action.btn-outline-primary,
body[data-bs-theme] .list-toolbar .btn-outline-primary,
body[data-bs-theme] .custom-buttons .btn-outline-primary,
body[data-bs-theme] .dataTables_wrapper .btn-outline-primary,
body[data-bs-theme] .dataTables_wrapper .dt-button.btn-outline-primary {
    color: var(--omniroq-accent-text, #78c2ad) !important;
    border-color: var(--omniroq-accent, #78c2ad) !important;
}

/* .crm-btn-prefix removed — now using Bootstrap Icons consistently */

.crm-standard-header .btn-group > a,
.list-header .btn-group > a {
    text-decoration: none;
}

.crm-standard-header .btn-group > a > button,
.list-header .btn-group > a > button {
    display: none !important;
}

/* Restore zebra striping on dark tables, including pages that only use table-hover. */
.table.table-dark.table-hover:not(.table-borderless) tbody tr:nth-of-type(odd) > * {
    background-color: #242b35 !important;
}

.table.table-dark.table-hover:not(.table-borderless) tbody tr:nth-of-type(even) > * {
    background-color: #1f2328 !important;
}

.table.table-dark.table-hover:not(.table-borderless) tbody tr:hover > * {
    background-color: #2a323d !important;
}

.table.table-dark.table-striped tbody tr:nth-of-type(odd) > * {
    background-color: #242b35 !important;
}

.table.table-dark.table-striped tbody tr:nth-of-type(even) > * {
    background-color: #1f2328 !important;
}

/* CRM Dashboard chart widgets: use a darker background to match the
   overall dark theme instead of Bootstrap's default bg-dark shade. */
#chartsContainer .card {
    background-color: #1a1d21 !important;
}
#chartsContainer .card-header {
    background-color: #161a1e !important;
    border-bottom-color: rgba(160, 169, 184, 0.25) !important;
}

/* Light mode final overrides — placed at end so they win over shared/dark defaults. */
body[data-bs-theme="light"] .crm-standard-header,
body[data-bs-theme="light"] .detail-header,
body[data-bs-theme="light"] .list-header,
body[data-bs-theme="light"] .container-fluid.mt-3.px-3 > .d-flex.justify-content-between.align-items-center:first-child,
body[data-bs-theme="light"] .container-fluid.mt-3.px-3 > .d-flex.justify-content-between.align-items-start:first-child,
body[data-bs-theme="light"] .container-fluid.py-4 > .d-flex.justify-content-between.align-items-center:first-child,
body[data-bs-theme="light"] .container-fluid.py-4 > .d-flex.justify-content-between.align-items-start:first-child,
body[data-bs-theme="light"] .container.mt-3 > .d-flex.justify-content-between.align-items-center:first-child,
body[data-bs-theme="light"] .container.mt-3 > .d-flex.justify-content-between.align-items-start:first-child {
    border-bottom-color: var(--omniroq-light-border-strong) !important;
}

body[data-bs-theme="light"] .crm-standard-header h1,
body[data-bs-theme="light"] .crm-standard-header h2,
body[data-bs-theme="light"] .crm-standard-header h3,
body[data-bs-theme="light"] .detail-header h1,
body[data-bs-theme="light"] .detail-header h2,
body[data-bs-theme="light"] .detail-header h3,
body[data-bs-theme="light"] .list-header h1,
body[data-bs-theme="light"] .list-header h2,
body[data-bs-theme="light"] .list-header h3,
body[data-bs-theme="light"] .container-fluid.mt-3.px-3 > .d-flex:first-child h1,
body[data-bs-theme="light"] .container-fluid.py-4 > .d-flex:first-child h1,
body[data-bs-theme="light"] .container.mt-3 > .d-flex:first-child h1 {
    color: var(--omniroq-light-text) !important;
}

body[data-bs-theme="light"] .detail-header small,
body[data-bs-theme="light"] .detail-header .text-secondary,
body[data-bs-theme="light"] .detail-header .text-muted,
body[data-bs-theme="light"] .list-header small,
body[data-bs-theme="light"] .list-header .text-secondary,
body[data-bs-theme="light"] .list-header .text-muted {
    color: var(--omniroq-light-muted) !important;
}

body[data-bs-theme="light"] #chartsContainer .card,
body[data-bs-theme="light"] #chartsContainer .card.bg-dark,
body[data-bs-theme="light"] #chartsContainer .Omniroq-teal-frame {
    background-color: var(--omniroq-light-surface-1) !important;
    border-color: var(--omniroq-light-border) !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08) !important;
}

body[data-bs-theme="light"] #chartsContainer .card-header,
body[data-bs-theme="light"] #chartsContainer .card-header.bg-dark {
    background-color: var(--omniroq-light-surface-3) !important;
    border-bottom-color: var(--omniroq-light-border) !important;
}

body[data-bs-theme="light"] #chartsContainer .card-header .text-light,
body[data-bs-theme="light"] #chartsContainer .card-header .fw-semibold {
    color: var(--omniroq-light-text) !important;
}

body[data-bs-theme="light"] #chartsContainer .card-header .text-secondary {
    color: var(--omniroq-light-muted) !important;
}

body[data-bs-theme="light"] .table.table-dark,
body[data-bs-theme="light"] .table.table-dark.table-hover,
body[data-bs-theme="light"] .table.table-dark.table-striped {
    --bs-table-bg: var(--omniroq-light-surface-1) !important;
    --bs-table-striped-bg: var(--omniroq-light-surface-2) !important;
    --bs-table-hover-bg: #d5dee8 !important;
    --bs-table-border-color: var(--omniroq-light-border) !important;
    --bs-table-color: var(--omniroq-light-text) !important;
    color: var(--omniroq-light-text) !important;
}

body[data-bs-theme="light"] .table.table-dark thead th,
body[data-bs-theme="light"] .table.table-dark tbody td,
body[data-bs-theme="light"] .table.table-dark tbody th {
    color: var(--omniroq-light-text) !important;
    border-color: var(--omniroq-light-border) !important;
}

body[data-bs-theme="light"] .table.table-dark.table-hover:not(.table-borderless) tbody tr:nth-of-type(odd) > *,
body[data-bs-theme="light"] .table.table-dark.table-striped tbody tr:nth-of-type(odd) > *,
body[data-bs-theme="light"] .table.table-dark tbody tr:nth-of-type(odd) > * {
    background-color: var(--omniroq-light-surface-2) !important;
    color: var(--omniroq-light-text) !important;
}

body[data-bs-theme="light"] .table.table-dark.table-hover:not(.table-borderless) tbody tr:nth-of-type(even) > *,
body[data-bs-theme="light"] .table.table-dark.table-striped tbody tr:nth-of-type(even) > *,
body[data-bs-theme="light"] .table.table-dark tbody tr:nth-of-type(even) > * {
    background-color: var(--omniroq-light-surface-1) !important;
    color: var(--omniroq-light-text) !important;
}

body[data-bs-theme="light"] .table.table-dark.table-hover:not(.table-borderless) tbody tr:hover > * {
    background-color: #d5dee8 !important;
    color: var(--omniroq-light-text) !important;
}

body[data-bs-theme="light"] .btn:hover,
body[data-bs-theme="light"] .btn:focus,
body[data-bs-theme="light"] .btn-outline-primary:hover,
body[data-bs-theme="light"] .btn-outline-primary:focus,
body[data-bs-theme="light"] .btn-outline-secondary:hover,
body[data-bs-theme="light"] .btn-outline-secondary:focus,
body[data-bs-theme="light"] .btn-outline-info:hover,
body[data-bs-theme="light"] .btn-outline-info:focus,
body[data-bs-theme="light"] .btn-outline-success:hover,
body[data-bs-theme="light"] .btn-outline-success:focus,
body[data-bs-theme="light"] .btn-outline-warning:hover,
body[data-bs-theme="light"] .btn-outline-warning:focus,
body[data-bs-theme="light"] .btn-outline-light:hover,
body[data-bs-theme="light"] .btn-outline-light:focus,
body[data-bs-theme="light"] .btn-success:hover,
body[data-bs-theme="light"] .btn-success:focus {
    background-color: var(--omniroq-accent, #78c2ad) !important;
    border-color: var(--omniroq-accent, #78c2ad) !important;
    color: #ffffff !important;
}

@media (min-width: 576px) {
    body[data-bs-theme="light"] .btn:hover,
    body[data-bs-theme="light"] .btn:focus {
        transform: scale(var(--omniroq-hover-pop-scale, 1.03));
        filter: var(--omniroq-hover-glow-filter, none);
        box-shadow: none;
        z-index: 1050;
    }
}

body[data-bs-theme="light"] .container-fluid.mt-3.px-3 .card[data-bs-theme="dark"],
body[data-bs-theme="light"] .container-fluid.mt-3.px-3 .alert[data-bs-theme="dark"],
body[data-bs-theme="light"] .container-fluid.mt-3.px-3 .nav-tabs[data-bs-theme="dark"],
body[data-bs-theme="light"] .container-fluid.mt-3.px-3 .table[data-bs-theme="dark"] {
    background-color: transparent !important;
}

body[data-bs-theme="light"] .container-fluid.mt-3.px-3 .card[style*="background:#1f2328"],
body[data-bs-theme="light"] .container-fluid.mt-3.px-3 .card[style*="background: #1f2328"] {
    background: var(--omniroq-light-surface-1) !important;
    border-color: var(--omniroq-light-border) !important;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06) !important;
}

body[data-bs-theme="light"] .container-fluid.mt-3.px-3 .alert.alert-info[data-bs-theme="dark"] {
    background: var(--omniroq-light-surface-1) !important;
    border: 1px solid rgba(var(--omniroq-accent-rgb, 120,194,173), 0.28) !important;
    color: var(--omniroq-light-text) !important;
}

body[data-bs-theme="light"] .container-fluid.mt-3.px-3 .nav-tabs[data-bs-theme="dark"] {
    border-bottom-color: var(--omniroq-light-border) !important;
}

body[data-bs-theme="light"] .container-fluid.mt-3.px-3 .nav-tabs[data-bs-theme="dark"] .nav-link {
    color: var(--omniroq-light-muted) !important;
    border-color: transparent !important;
    background: transparent !important;
}

body[data-bs-theme="light"] .container-fluid.mt-3.px-3 .nav-tabs[data-bs-theme="dark"] .nav-link.active,
body[data-bs-theme="light"] .container-fluid.mt-3.px-3 .nav-tabs[data-bs-theme="dark"] .nav-link.show {
    background: var(--omniroq-light-surface-1) !important;
    color: var(--omniroq-light-text) !important;
    border-color: var(--omniroq-light-border) var(--omniroq-light-border) transparent !important;
}

body[data-bs-theme="light"] .container-fluid.mt-3.px-3 code.text-info,
body[data-bs-theme="light"] .container-fluid.mt-3.px-3 .text-info {
    color: #31708f !important;
}

body[data-bs-theme="light"] .container-fluid.mt-3.px-3 .text-warning {
    color: #a56a00 !important;
}

/* Was #5cae99, a hand-picked mint that measured 2.06:1 on the light surface and
   outranked the global .text-primary fix at (0,4,1). Routed through the token so
   it tracks the accent and stays AA. */
body[data-bs-theme="light"] .container-fluid.mt-3.px-3 .text-primary {
    color: var(--omniroq-accent-text, #5cae99) !important;
}

/* Final light-mode button motion override: keep the same pop animation everywhere. */
body[data-bs-theme="light"] .btn,
body[data-bs-theme="light"] a.btn,
body[data-bs-theme="light"] .btn-group > .btn,
body[data-bs-theme="light"] .btn-group-sm > .btn,
body[data-bs-theme="light"] .btn-toolbar .btn {
    transition: transform var(--o-dur) var(--o-ease), background var(--o-dur) var(--o-ease), color var(--o-dur) var(--o-ease), border-color var(--o-dur) var(--o-ease), filter var(--o-dur) var(--o-ease) !important;
    transform-origin: center center !important;
    will-change: transform, filter !important;
    transform: translateZ(0);
    backface-visibility: hidden;
}

@media (min-width: 576px) {
    body[data-bs-theme="light"] .btn:hover,
    body[data-bs-theme="light"] a.btn:hover,
    body[data-bs-theme="light"] .btn:focus-visible,
    body[data-bs-theme="light"] a.btn:focus-visible,
    body[data-bs-theme="light"] .btn-group > .btn:hover,
    body[data-bs-theme="light"] .btn-group > .btn:focus-visible,
    body[data-bs-theme="light"] .btn-group-sm > .btn:hover,
    body[data-bs-theme="light"] .btn-group-sm > .btn:focus-visible,
    body[data-bs-theme="light"] .btn-toolbar .btn:hover,
    body[data-bs-theme="light"] .btn-toolbar .btn:focus-visible {
        transform: translateZ(0) scale(var(--omniroq-hover-pop-scale, 1.03)) !important;
        box-shadow: none !important;
        z-index: 1050;
    }
}

/* Final shared button behavior: same 0.5s cubic-bezier pop in both themes. */
body[data-bs-theme] .btn,
body[data-bs-theme] a.btn,
body[data-bs-theme] .btn-group > .btn,
body[data-bs-theme] .btn-group-sm > .btn,
body[data-bs-theme] .btn-toolbar .btn {
    transition: transform var(--o-dur) var(--o-ease), background var(--o-dur) var(--o-ease), color var(--o-dur) var(--o-ease), border-color var(--o-dur) var(--o-ease), filter var(--o-dur) var(--o-ease) !important;
    transform-origin: center center !important;
    will-change: transform, filter !important;
    transform: translateZ(0);
    backface-visibility: hidden;
}

@media (min-width: 576px) {
    body[data-bs-theme] .btn:hover,
    body[data-bs-theme] a.btn:hover,
    body[data-bs-theme] .btn:focus-visible,
    body[data-bs-theme] a.btn:focus-visible,
    body[data-bs-theme] .btn-group > .btn:hover,
    body[data-bs-theme] .btn-group > .btn:focus-visible,
    body[data-bs-theme] .btn-group-sm > .btn:hover,
    body[data-bs-theme] .btn-group-sm > .btn:focus-visible,
    body[data-bs-theme] .btn-toolbar .btn:hover,
    body[data-bs-theme] .btn-toolbar .btn:focus-visible {
        transform: translateZ(0) scale(var(--omniroq-hover-pop-scale, 1.01)) !important;
        box-shadow: none !important;
        z-index: 1050;
    }

    body[data-bs-theme] .navbar .btn:hover,
    body[data-bs-theme] .navbar .btn:focus-visible,
    body[data-bs-theme] .navbar-brand:hover,
    body[data-bs-theme] .navbar-brand:focus-visible,
    body[data-bs-theme] .navbar-toggler:hover,
    body[data-bs-theme] .navbar-toggler:focus,
    body[data-bs-theme] .navbar .nav-link:hover,
    body[data-bs-theme] .navbar .nav-link:focus,
    body[data-bs-theme] .navbar .dropdown-toggle:hover,
    body[data-bs-theme] .navbar .dropdown-toggle:focus,
    body[data-bs-theme] .navbar .nav-link:hover .bi,
    body[data-bs-theme] .navbar .nav-link:focus .bi,
    body[data-bs-theme] .navbar .nav-link:hover .nav-icon-wrap,
    body[data-bs-theme] .navbar .nav-link:focus .nav-icon-wrap,
    body[data-bs-theme] .navbar .nav-link:hover .nav-icon-outline,
    body[data-bs-theme] .navbar .nav-link:focus .nav-icon-outline,
    body[data-bs-theme] .navbar .nav-link:hover .nav-icon-fill,
    body[data-bs-theme] .navbar .nav-link:focus .nav-icon-fill {
        transform: translateZ(0) scale(var(--omniroq-navbar-pop-scale)) !important;
    }
}

/* Dark mode: give button surfaces a darker filled base, mirroring the light theme treatment. */
body[data-bs-theme="dark"] .btn-outline-primary,
body[data-bs-theme="dark"] .btn-outline-secondary,
body[data-bs-theme="dark"] .btn-outline-info,
body[data-bs-theme="dark"] .btn-outline-success,
body[data-bs-theme="dark"] .btn-outline-warning,
body[data-bs-theme="dark"] .btn-outline-danger,
body[data-bs-theme="dark"] .btn-outline-light,
body[data-bs-theme="dark"] .btn-outline-dark,
body[data-bs-theme="dark"] .btn-group > .btn:not(.btn-success):not(.btn-primary):not(.btn-secondary):not(.btn-info):not(.btn-warning):not(.btn-danger) {
    background-color: #161b22 !important;
}

body[data-bs-theme="dark"] .btn-outline-primary:hover,
body[data-bs-theme="dark"] .btn-outline-primary:focus,
body[data-bs-theme="dark"] .btn-outline-secondary:hover,
body[data-bs-theme="dark"] .btn-outline-secondary:focus,
body[data-bs-theme="dark"] .btn-outline-info:hover,
body[data-bs-theme="dark"] .btn-outline-info:focus,
body[data-bs-theme="dark"] .btn-outline-success:hover,
body[data-bs-theme="dark"] .btn-outline-success:focus,
body[data-bs-theme="dark"] .btn-outline-warning:hover,
body[data-bs-theme="dark"] .btn-outline-warning:focus,
body[data-bs-theme="dark"] .btn-outline-light:hover,
body[data-bs-theme="dark"] .btn-outline-light:focus,
body[data-bs-theme="dark"] .btn-outline-dark:hover,
body[data-bs-theme="dark"] .btn-outline-dark:focus,
body[data-bs-theme="dark"] .btn-group > .btn:not(.btn-success):not(.btn-primary):not(.btn-secondary):not(.btn-info):not(.btn-warning):not(.btn-danger):not(.btn-outline-danger):hover,
body[data-bs-theme="dark"] .btn-group > .btn:not(.btn-success):not(.btn-primary):not(.btn-secondary):not(.btn-info):not(.btn-warning):not(.btn-danger):not(.btn-outline-danger):focus {
    background-color: var(--omniroq-accent, #78c2ad) !important;
    border-color: var(--omniroq-accent, #78c2ad) !important;
    color: #ffffff !important;
}

body[data-bs-theme] .btn-outline-danger:hover,
body[data-bs-theme] .btn-outline-danger:focus,
body[data-bs-theme] .btn-danger:hover,
body[data-bs-theme] .btn-danger:focus,
body[data-bs-theme] .btn-outline-danger:active,
body[data-bs-theme] .btn-danger:active {
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
    color: #ffffff !important;
}

/* Light mode: force notification dropdown into the light palette even against later dark rules. */
body[data-bs-theme="light"] .notification-dropdown {
    background: var(--omniroq-light-surface-1) !important;
    color: var(--omniroq-light-text) !important;
    border: 1px solid var(--omniroq-light-border) !important;
    box-shadow: 0 12px 34px rgba(15, 23, 42, 0.12) !important;
}

body[data-bs-theme="light"] .notification-dropdown-header {
    background: linear-gradient(135deg, rgba(var(--omniroq-accent-rgb, 120,194,173), 0.12) 0%, rgba(255, 255, 255, 0.12) 100%) !important;
    border-bottom: 1px solid var(--omniroq-light-border) !important;
}

body[data-bs-theme="light"] .notification-dropdown-header h6,
body[data-bs-theme="light"] .notification-dropdown-item,
body[data-bs-theme="light"] .notification-dropdown-item .small,
body[data-bs-theme="light"] .notification-dropdown-item .text-muted,
body[data-bs-theme="light"] .notification-dropdown a {
    color: var(--omniroq-light-text) !important;
}

body[data-bs-theme="light"] .notification-dropdown-item {
    background: transparent !important;
    border-bottom: 1px solid var(--omniroq-light-border) !important;
}

body[data-bs-theme="light"] .notification-dropdown-item:hover {
    background-color: transparent !important;
    filter: var(--omniroq-hover-glow-filter);
}

body[data-bs-theme="light"] .notification-dropdown .btn,
body[data-bs-theme="light"] .notification-dropdown button,
body[data-bs-theme="light"] .notification-dropdown .toast-close-x {
    color: var(--omniroq-light-text) !important;
}

body[data-bs-theme="light"] .toast.Omniroq-toast,
body[data-bs-theme="light"] .toast.Omniroq-notifications-toast {
    background: var(--omniroq-light-surface-1) !important;
    color: var(--omniroq-light-text) !important;
    border: 1px solid var(--omniroq-light-border) !important;
    box-shadow: 0 12px 34px rgba(15, 23, 42, 0.12) !important;
}

body[data-bs-theme="light"] .toast.Omniroq-toast .toast-header,
body[data-bs-theme="light"] .toast.Omniroq-notifications-toast .toast-header,
body[data-bs-theme="light"] .toast.Omniroq-toast .toast-footer,
body[data-bs-theme="light"] .toast.Omniroq-notifications-toast .toast-footer {
    background: var(--omniroq-light-surface-3) !important;
    color: var(--omniroq-light-text) !important;
    border-color: var(--omniroq-light-border) !important;
}

body[data-bs-theme="light"] .toast.Omniroq-toast .toast-body,
body[data-bs-theme="light"] .toast.Omniroq-notifications-toast .toast-body {
    background: var(--omniroq-light-surface-1) !important;
    color: var(--omniroq-light-text) !important;
    scrollbar-color: rgba(97, 114, 132, 0.58) var(--omniroq-light-surface-2) !important;
}

body[data-bs-theme="light"] .toast.Omniroq-toast .toast-body::-webkit-scrollbar-track,
body[data-bs-theme="light"] .toast.Omniroq-notifications-toast .toast-body::-webkit-scrollbar-track {
    background: var(--omniroq-light-surface-2) !important;
}

body[data-bs-theme="light"] .toast.Omniroq-toast .toast-body::-webkit-scrollbar-thumb,
body[data-bs-theme="light"] .toast.Omniroq-notifications-toast .toast-body::-webkit-scrollbar-thumb {
    background: rgba(97, 114, 132, 0.58) !important;
}

body[data-bs-theme="light"] .toast.Omniroq-toast .toast-body::-webkit-scrollbar-thumb:hover,
body[data-bs-theme="light"] .toast.Omniroq-notifications-toast .toast-body::-webkit-scrollbar-thumb:hover {
    background: rgba(97, 114, 132, 0.72) !important;
}

body[data-bs-theme="light"] .Omniroq-notifications-title,
body[data-bs-theme="light"] .omniroq-notif-section-title,
body[data-bs-theme="light"] .omniroq-notif-empty,
body[data-bs-theme="light"] .omniroq-notif-message,
body[data-bs-theme="light"] .omniroq-notif-link,
body[data-bs-theme="light"] .omniroq-notif-confirm-title,
body[data-bs-theme="light"] .toast.Omniroq-toast strong,
body[data-bs-theme="light"] .toast.Omniroq-toast a:not(.btn) {
    color: var(--omniroq-light-text) !important;
}

body[data-bs-theme="light"] .omniroq-notif-time,
body[data-bs-theme="light"] .toast.Omniroq-toast small,
body[data-bs-theme="light"] .toast.Omniroq-toast .text-muted {
    color: var(--omniroq-light-muted) !important;
}

body[data-bs-theme="light"] .Omniroq-toast .Omniroq-notif-row,
body[data-bs-theme="light"] .Omniroq-notifications-toast .Omniroq-notif-row {
    border-bottom-color: var(--omniroq-light-border) !important;
}

body[data-bs-theme="light"] .toast.Omniroq-toast .toast-close-x,
body[data-bs-theme="light"] .toast.Omniroq-notifications-toast .toast-close-x {
    color: #b42318 !important;
}

body[data-bs-theme="light"] .toast.Omniroq-toast .toast-close-x:hover,
body[data-bs-theme="light"] .toast.Omniroq-notifications-toast .toast-close-x:hover {
    color: #b42318 !important;
}

body[data-bs-theme="light"] #advancedFilterContainer,
body[data-bs-theme="light"] #advancedFilterContainer[data-bs-theme="dark"] {
    background: var(--omniroq-light-surface-1) !important;
    border-color: var(--omniroq-light-border) !important;
    color: var(--omniroq-light-text) !important;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06) !important;
}

body[data-bs-theme="light"] #advancedFilterContainer .text-light,
body[data-bs-theme="light"] #advancedFilterContainer label,
body[data-bs-theme="light"] #advancedFilterContainer .small {
    color: var(--omniroq-light-text) !important;
}

body[data-bs-theme="light"] #advancedFilterContainer .text-muted,
body[data-bs-theme="light"] #advancedFilterContainer .small.text-muted {
    color: var(--omniroq-light-muted) !important;
}

body[data-bs-theme="light"] .adv-row {
    background-color: var(--omniroq-light-surface-2) !important;
    border-color: var(--omniroq-light-border) !important;
}

body[data-bs-theme="light"] .adv-row .form-control,
body[data-bs-theme="light"] .adv-row .form-control[data-bs-theme="dark"],
body[data-bs-theme="light"] .adv-row .form-select,
body[data-bs-theme="light"] .adv-row .form-select[data-bs-theme="dark"],
body[data-bs-theme="light"] .adv-row .adv-multi-toggle,
body[data-bs-theme="light"] #advancedFilterContainer [data-bs-theme="dark"] .form-control,
body[data-bs-theme="light"] #advancedFilterContainer [data-bs-theme="dark"] .form-select {
    background-color: #f3f6f9 !important;
    color: var(--omniroq-light-text) !important;
    border-color: var(--omniroq-light-border) !important;
    box-shadow: none !important;
}

body[data-bs-theme="light"] .adv-row .form-select option,
body[data-bs-theme="light"] #advancedFilterContainer [data-bs-theme="dark"] .form-select option {
    background-color: #f3f6f9 !important;
    color: var(--omniroq-light-text) !important;
}

body[data-bs-theme="light"] .adv-row .adv-joiner-wrap,
body[data-bs-theme="light"] .adv-row .adv-multi,
body[data-bs-theme="light"] .adv-row .adv-condition {
    background: transparent !important;
}

body[data-bs-theme="light"] .toast.Omniroq-dashboard-config-toast,
body[data-bs-theme="light"] .toast.Omniroq-dashboard-config-toast.show {
    background: var(--omniroq-light-surface-1) !important;
    color: var(--omniroq-light-text) !important;
    border: 1px solid var(--omniroq-light-border) !important;
    box-shadow: 0 14px 36px rgba(15, 23, 42, 0.12) !important;
}

body[data-bs-theme="light"] .toast.Omniroq-dashboard-config-toast .toast-header,
body[data-bs-theme="light"] .toast.Omniroq-dashboard-config-toast .toast-footer {
    background: var(--omniroq-light-surface-3) !important;
    color: var(--omniroq-light-text) !important;
    border-color: var(--omniroq-light-border) !important;
}

body[data-bs-theme="light"] .toast.Omniroq-dashboard-config-toast .toast-body,
body[data-bs-theme="light"] .toast.Omniroq-dashboard-config-toast .card,
body[data-bs-theme="light"] .toast.Omniroq-dashboard-config-toast .panel,
body[data-bs-theme="light"] .toast.Omniroq-dashboard-config-toast fieldset,
body[data-bs-theme="light"] #OmniroqListConfigList {
    background: var(--omniroq-light-surface-1) !important;
    color: var(--omniroq-light-text) !important;
    border-color: var(--omniroq-light-border) !important;
}

body[data-bs-theme="light"] #OmniroqListConfigList {
    box-shadow: inset 0 0 0 1px rgba(97, 114, 132, 0.06);
}

body[data-bs-theme="light"] .Omniroq-lc-item {
    background: var(--omniroq-light-surface-2) !important;
    border-color: var(--omniroq-light-border) !important;
    color: var(--omniroq-light-text) !important;
}

body[data-bs-theme="light"] .Omniroq-lc-item span,
body[data-bs-theme="light"] .Omniroq-lc-item label,
body[data-bs-theme="light"] .toast.Omniroq-dashboard-config-toast strong,
body[data-bs-theme="light"] .toast.Omniroq-dashboard-config-toast .text-light,
body[data-bs-theme="light"] .toast.Omniroq-dashboard-config-toast .form-check-label {
    color: var(--omniroq-light-text) !important;
}

body[data-bs-theme="light"] .toast.Omniroq-dashboard-config-toast .text-muted,
body[data-bs-theme="light"] .toast.Omniroq-dashboard-config-toast small,
body[data-bs-theme="light"] .toast.Omniroq-dashboard-config-toast [style*="#a0a9b8"] {
    color: var(--omniroq-light-muted) !important;
}

body[data-bs-theme="light"] .toast.Omniroq-dashboard-config-toast .form-control,
body[data-bs-theme="light"] .toast.Omniroq-dashboard-config-toast .form-control[data-bs-theme="dark"],
body[data-bs-theme="light"] .toast.Omniroq-dashboard-config-toast .form-select,
body[data-bs-theme="light"] .toast.Omniroq-dashboard-config-toast .form-select[data-bs-theme="dark"],
body[data-bs-theme="light"] .toast.Omniroq-dashboard-config-toast .form-check-input[data-bs-theme="dark"] {
    background: #f3f6f9 !important;
    color: var(--omniroq-light-text) !important;
    border-color: var(--omniroq-light-border) !important;
}

@media (min-width: 576px) {
    body[data-bs-theme="light"] .form-control:hover,
    body[data-bs-theme="light"] .form-select:hover,
    body[data-bs-theme="light"] .input-group-text:hover,
    body[data-bs-theme="light"] .adv-row .adv-multi-toggle:hover,
    body[data-bs-theme="light"] .adv-row .adv-multi-toggle:focus,
    body[data-bs-theme="light"] .cs-trigger:hover,
    body[data-bs-theme="light"] .cs-trigger:focus,
    body[data-bs-theme="light"] .date-filter-trigger:hover,
    body[data-bs-theme="light"] .date-filter-trigger:focus,
    body[data-bs-theme="light"] .form-select[data-bs-theme="dark"]:hover,
    body[data-bs-theme="light"] [data-bs-theme="dark"] .form-select:hover {
        transform: scale(var(--omniroq-hover-pop-scale, 1.01)) !important;
        filter: var(--omniroq-hover-glow-filter, none) !important;
        box-shadow: none !important;
        z-index: 1;
        position: relative;
    }
}

/* Final control motion pass: inputs, filters, and dropdown triggers use the same 1s hover timing. */
.form-control,
.form-select,
.input-group-text,
.adv-row .adv-multi-toggle,
.cs-trigger,
.date-filter-trigger {
    transition: transform var(--o-dur) var(--o-ease), background-color var(--o-dur) var(--o-ease), color var(--o-dur) var(--o-ease), border-color var(--o-dur) var(--o-ease), box-shadow var(--o-dur) var(--o-ease), filter var(--o-dur) var(--o-ease) !important;
    transform-origin: center center;
    will-change: transform, filter;
}

@media (min-width: 576px) {
    .input-group-text:hover,
    .adv-row .adv-multi-toggle:hover,
    .adv-row .adv-multi-toggle:focus,
    .form-control:hover,
    .form-control:focus,
    .form-select:hover,
    .form-select:focus,
    .cs-trigger:hover,
    .cs-trigger:focus,
    .date-filter-trigger:hover,
    .date-filter-trigger:focus {
        transform: scale(var(--omniroq-hover-pop-scale));
        box-shadow: none;
        z-index: 1;
        position: relative;
    }
}

/* Final button color pass: standard button variants keep their own brand color on hover/focus. */
body[data-bs-theme] .btn-outline-primary:hover,
body[data-bs-theme] .btn-outline-primary:focus,
body[data-bs-theme] .btn-outline-primary:active,
body[data-bs-theme] .btn-outline-secondary:hover,
body[data-bs-theme] .btn-outline-secondary:focus,
body[data-bs-theme] .btn-outline-secondary:active,
body[data-bs-theme] .btn-outline-info:hover,
body[data-bs-theme] .btn-outline-info:focus,
body[data-bs-theme] .btn-outline-info:active,
body[data-bs-theme] .btn-outline-success:hover,
body[data-bs-theme] .btn-outline-success:focus,
body[data-bs-theme] .btn-outline-success:active,
body[data-bs-theme] .btn-outline-warning:hover,
body[data-bs-theme] .btn-outline-warning:focus,
body[data-bs-theme] .btn-outline-warning:active,
body[data-bs-theme] .btn-outline-danger:hover,
body[data-bs-theme] .btn-outline-danger:focus,
body[data-bs-theme] .btn-outline-danger:active,
body[data-bs-theme] .btn-outline-light:hover,
body[data-bs-theme] .btn-outline-light:focus,
body[data-bs-theme] .btn-outline-light:active,
body[data-bs-theme] .btn-outline-dark:hover,
body[data-bs-theme] .btn-outline-dark:focus,
body[data-bs-theme] .btn-outline-dark:active {
    background-color: var(--bs-btn-color) !important;
    border-color: var(--bs-btn-color) !important;
    color: var(--bs-btn-hover-color, #ffffff) !important;
}

body[data-bs-theme] .btn-primary:hover,
body[data-bs-theme] .btn-primary:focus,
body[data-bs-theme] .btn-success:hover,
body[data-bs-theme] .btn-success:focus,
body[data-bs-theme] .btn-secondary:hover,
body[data-bs-theme] .btn-secondary:focus,
body[data-bs-theme] .btn-info:hover,
body[data-bs-theme] .btn-info:focus,
body[data-bs-theme] .btn-warning:hover,
body[data-bs-theme] .btn-warning:focus,
body[data-bs-theme] .btn-danger:hover,
body[data-bs-theme] .btn-danger:focus,
body[data-bs-theme] .btn-light:hover,
body[data-bs-theme] .btn-light:focus,
body[data-bs-theme] .btn-dark:hover,
body[data-bs-theme] .btn-dark:focus {
    background-color: var(--bs-btn-hover-bg, var(--bs-btn-bg)) !important;
    border-color: var(--bs-btn-hover-border-color, var(--bs-btn-border-color)) !important;
    color: var(--bs-btn-hover-color, var(--bs-btn-color, #ffffff)) !important;
}

body[data-bs-theme] .btn-primary:active,
body[data-bs-theme] .btn-primary.active,
body[data-bs-theme] .btn-secondary:active,
body[data-bs-theme] .btn-secondary.active,
body[data-bs-theme] .btn-info:active,
body[data-bs-theme] .btn-info.active,
body[data-bs-theme] .btn-success:active,
body[data-bs-theme] .btn-success.active,
body[data-bs-theme] .btn-warning:active,
body[data-bs-theme] .btn-warning.active,
body[data-bs-theme] .btn-danger:active,
body[data-bs-theme] .btn-danger.active,
body[data-bs-theme] .btn-light:active,
body[data-bs-theme] .btn-light.active,
body[data-bs-theme] .btn-dark:active,
body[data-bs-theme] .btn-dark.active {
    background-color: var(--bs-btn-active-bg, var(--bs-btn-hover-bg, var(--bs-btn-bg))) !important;
    border-color: var(--bs-btn-active-border-color, var(--bs-btn-hover-border-color, var(--bs-btn-border-color))) !important;
    color: var(--bs-btn-active-color, var(--bs-btn-hover-color, var(--bs-btn-color, #ffffff))) !important;
}

body[data-bs-theme] .btn-outline-danger,
body[data-bs-theme] .btn-danger {
    color: var(--bs-danger) !important;
}

body[data-bs-theme] .btn-danger {
    background-color: var(--bs-danger) !important;
    border-color: var(--bs-danger) !important;
    color: #ffffff !important;
}

body[data-bs-theme] .btn-outline-danger {
    border-color: var(--bs-danger) !important;
}

body[data-bs-theme] .btn-outline-danger:hover,
body[data-bs-theme] .btn-outline-danger:focus,
body[data-bs-theme] .btn-outline-danger:active,
body[data-bs-theme] .btn-danger:hover,
body[data-bs-theme] .btn-danger:focus,
body[data-bs-theme] .btn-danger:active {
    background-color: var(--bs-danger) !important;
    border-color: var(--bs-danger) !important;
    color: #ffffff !important;
}

@media (min-width: 576px) {
    .btn:hover,
    .btn:focus,
    .navbar .btn:hover,
    .navbar .btn:focus,
    .navbar-brand:hover,
    .navbar-brand:focus-visible,
    .navbar-toggler:hover,
    .navbar-toggler:focus,
    .navbar .nav-link:hover,
    .navbar .nav-link:focus,
    .navbar .nav-link:hover .bi,
    .navbar .nav-link:focus .bi,
    .nav-tabs .nav-link:hover,
    .nav-tabs .nav-link:focus,
    .nav-pills .nav-link:hover,
    .nav-pills .nav-link:focus,
    .navbar .dropdown-toggle:hover,
    .navbar .dropdown-toggle:focus,
    .dropdown-menu .dropdown-item:hover,
    .dropdown-menu .dropdown-item:focus,
    .Omniroq-resizable-table td a:hover,
    .Omniroq-resizable-table td a:focus,
    .offcanvas-body a:hover,
    .offcanvas-body a:focus,
    .form-control:hover,
    .form-control:focus,
    .form-select:hover,
    .form-select:focus,
    .input-group-text:hover,
    .input-group-text:focus,
    .adv-row .adv-multi-toggle:hover,
    .adv-row .adv-multi-toggle:focus,
    .cs-trigger:hover,
    .cs-trigger:focus,
    .date-filter-trigger:hover,
    .date-filter-trigger:focus,
    .crm-back-link:hover,
    .crm-back-link:focus-visible,
    .detail-header a.hover-zoom:hover,
    .detail-header a.hover-zoom:focus-visible,
    .list-header a.hover-zoom:hover,
    .list-header a.hover-zoom:focus-visible,
    .container-fluid.mt-3.px-3 a.hover-zoom:hover,
    .container-fluid.mt-3.px-3 a.hover-zoom:focus-visible,
    .container-fluid.py-4 a.hover-zoom:hover,
    .container-fluid.py-4 a.hover-zoom:focus-visible,
    .container.mt-3 a.hover-zoom:hover,
    .container.mt-3 a.hover-zoom:focus-visible {
        filter: var(--omniroq-hover-glow-filter);
    }
}

/* Final tab interaction pass: history/detail tabs keep transparent surfaces and use the shared slow pop+glow. */
body[data-bs-theme] .nav.nav-tabs .nav-link,
body[data-bs-theme] .nav.nav-pills .nav-link {
    transition: transform var(--o-dur) var(--o-ease), color var(--o-dur) var(--o-ease), background-color var(--o-dur) var(--o-ease), border-color var(--o-dur) var(--o-ease), filter var(--o-dur) var(--o-ease) !important;
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    will-change: transform, filter;
}

body[data-bs-theme] .detail-header + .nav.nav-tabs .nav-link {
    color: #a0a9b8 !important;
}

/* Tab/pill focus ring — these are keyboard-operable controls, and the
   `outline: none !important` in this block (plus the one on `.nav-link`
   above) stripped their indicator entirely. The transparent background and
   colour shift they use instead is identical to :hover, so a keyboard user
   had nothing to go on. Restored explicitly, at matching specificity. */
body[data-bs-theme] .nav.nav-pills .nav-link:focus-visible,
body[data-bs-theme] .nav.nav-tabs .nav-link:focus-visible {
    outline: var(--o-focus-ring-width) solid var(--o-focus-ring-color) !important;
    outline-offset: var(--o-focus-ring-offset);
}

body[data-bs-theme] .nav.nav-tabs .nav-link.active,
body[data-bs-theme] .nav.nav-pills .nav-link.active,
body[data-bs-theme] .nav.nav-tabs .nav-link.active:focus,
body[data-bs-theme] .nav.nav-tabs .nav-link.active:focus-visible,
body[data-bs-theme] .nav.nav-pills .nav-link.active:focus,
body[data-bs-theme] .nav.nav-pills .nav-link.active:focus-visible {
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    /* `outline: none !important` was here. It out-specified the ring rule
       above, so the *active* tab — the one a keyboard user lands on first —
       was the only one with no focus indicator. Removed; the ring rule now
       applies to active and inactive alike. */
    color: var(--omniroq-accent-text, #78c2ad) !important;
    transform: scale(var(--omniroq-hover-pop-scale)) !important;
    filter: var(--omniroq-hover-glow-filter) !important;
}

@media (min-width: 576px) {
    body[data-bs-theme] .nav.nav-tabs .nav-link:hover,
    body[data-bs-theme] .nav.nav-tabs .nav-link:focus,
    body[data-bs-theme] .nav.nav-pills .nav-link:hover,
    body[data-bs-theme] .nav.nav-pills .nav-link:focus {
        transform: scale(var(--omniroq-hover-pop-scale)) !important;
        background-color: transparent !important;
        border-color: transparent !important;
        box-shadow: none !important;
        filter: var(--omniroq-hover-glow-filter) !important;
    }

    body[data-bs-theme] .detail-header + .nav.nav-tabs .nav-link:hover,
    body[data-bs-theme] .detail-header + .nav.nav-tabs .nav-link:focus,
    body[data-bs-theme] .detail-header + .nav.nav-tabs .nav-link:focus-visible {
        color: #e8eef7 !important;
    }

    body[data-bs-theme] .nav.nav-tabs .nav-link.active:hover,
    body[data-bs-theme] .nav.nav-tabs .nav-link.active:focus,
    body[data-bs-theme] .nav.nav-pills .nav-link.active:hover,
    body[data-bs-theme] .nav.nav-pills .nav-link.active:focus,
    body[data-bs-theme] .nav.nav-tabs .nav-link.show:hover,
    body[data-bs-theme] .nav.nav-tabs .nav-link.show:focus,
    body[data-bs-theme] .nav.nav-pills .nav-link.show:hover,
    body[data-bs-theme] .nav.nav-pills .nav-link.show:focus {
        color: var(--omniroq-accent-text, #78c2ad) !important;
        filter: var(--omniroq-hover-glow-filter) !important;
        box-shadow: none !important;
    }
}

/* Final notification interaction pass: rows and actions in notification toasts/dropdowns get glow-only hover. */
body[data-bs-theme] .toast.Omniroq-notifications-list-toast .Omniroq-notif-row,
body[data-bs-theme] .toast.Omniroq-notifications-list-toast .notification-link,
body[data-bs-theme] .toast.Omniroq-notifications-list-toast .notif-action,
body[data-bs-theme] .notification-dropdown .notification-dropdown-item,
body[data-bs-theme] .notification-dropdown .notification-link,
body[data-bs-theme] .notification-dropdown .notif-action {
    transition: transform var(--o-dur) var(--o-ease), color var(--o-dur) var(--o-ease), background-color var(--o-dur) var(--o-ease), border-color var(--o-dur) var(--o-ease), filter var(--o-dur) var(--o-ease) !important;
    background-color: transparent !important;
    box-shadow: none !important;
    will-change: transform, filter;
}

@media (min-width: 576px) {
    body[data-bs-theme] .toast.Omniroq-notifications-list-toast .Omniroq-notif-row:hover,
    body[data-bs-theme] .toast.Omniroq-notifications-list-toast .Omniroq-notif-row:focus-within,
    body[data-bs-theme] .toast.Omniroq-notifications-list-toast .notification-link:hover,
    body[data-bs-theme] .toast.Omniroq-notifications-list-toast .notification-link:focus,
    body[data-bs-theme] .toast.Omniroq-notifications-list-toast .notif-action:hover,
    body[data-bs-theme] .toast.Omniroq-notifications-list-toast .notif-action:focus,
    body[data-bs-theme] .notification-dropdown .notification-dropdown-item:hover,
    body[data-bs-theme] .notification-dropdown .notification-dropdown-item:focus,
    body[data-bs-theme] .notification-dropdown .notification-dropdown-item:focus-within,
    body[data-bs-theme] .notification-dropdown .notification-link:hover,
    body[data-bs-theme] .notification-dropdown .notification-link:focus,
    body[data-bs-theme] .notification-dropdown .notif-action:hover,
    body[data-bs-theme] .notification-dropdown .notif-action:focus {
        transform: scale(var(--omniroq-hover-pop-scale)) !important;
        background-color: transparent !important;
        box-shadow: none !important;
        filter: var(--omniroq-hover-glow-filter) !important;
    }
}

/* ------------------------------------------------------------------
   KEYBOARD FOCUS RING — the one ring, restored over Bootstrap
   ------------------------------------------------------------------
   The global `a:focus-visible, button:focus-visible { outline: … }` rule is
   (0,1,1) and loses to Bootstrap's own `.btn:focus { outline: 0 }` at (0,2,0).
   The symptom was subtle: outline computed to `none 0px rgb(120,194,173)` —
   width and style stripped, colour left as currentColor — so the tokens looked
   correct while nothing was drawn.

   Measured by walking the real tab order (script-driven .focus() does NOT match
   :focus-visible on a <button>, so it has to be actual Tab presses): 12 stops on
   /dashboard/ and 72 on /leads/ had no visible indicator. That is WCAG 2.4.7 and
   it made the app unusable without a mouse — B2 in DECISIONS_NEEDED.md.

   Same shape as the nav-pill and table-header fixes further down: restate the
   ring at a specificity that wins, on :focus-visible only, so mouse clicks stay
   quiet. Outline (not box-shadow) so it never affects layout.
------------------------------------------------------------------- */
body[data-bs-theme] a:focus-visible,
body[data-bs-theme] .btn:focus-visible,
body[data-bs-theme] a.btn:focus-visible,
body[data-bs-theme] button:focus-visible,
body[data-bs-theme] summary:focus-visible,
body[data-bs-theme] [tabindex]:not([tabindex="-1"]):focus-visible,
body[data-bs-theme] .form-control:focus-visible,
body[data-bs-theme] .form-select:focus-visible,
body[data-bs-theme] .form-check-input:focus-visible {
    outline: var(--o-focus-ring-width) solid var(--o-focus-ring-color) !important;
    outline-offset: var(--o-focus-ring-offset) !important;
}

/* ------------------------------------------------------------------
   MOUSE-CLICK FOCUS SUPPRESSION
   Remove visible focus ring when a button is activated by mouse/touch
   (pointer device). Keyboard navigation retains :focus-visible styling.
------------------------------------------------------------------- */
.btn:focus:not(:focus-visible),
a.btn:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
    transform: none !important;
    filter: none !important;
    background-color: var(--bs-btn-bg, inherit) !important;
    border-color: var(--bs-btn-border-color, inherit) !important;
    color: var(--bs-btn-color, inherit) !important;
}

/* Dropdown toggle: keep open state looking active when menu is shown */
.btn.show:focus:not(:focus-visible),
a.btn.show:focus:not(:focus-visible) {
    background-color: var(--bs-btn-hover-bg, var(--bs-btn-bg, inherit)) !important;
    border-color: var(--bs-btn-hover-border-color, var(--bs-btn-border-color, inherit)) !important;
    color: var(--bs-btn-hover-color, var(--bs-btn-color, inherit)) !important;
}

/* ============================================================
   APPEARANCE SETTINGS — body class overrides
   Applied via context processor + base.html inline script.
   ============================================================ */

/* ── Company logo in navbar ──────────────────────────────── */
.company-logo-img {
    max-height: 34px;
    max-width: 160px;
    object-fit: contain;
    image-rendering: -webkit-optimize-contrast;
}

/* ── Font size ───────────────────────────────────────────── */
/* rem is anchored to :root/html, not body — must scale html font-size to affect all rem values */
:root:has(body.omniroq-font-small) {
    font-size: 13px !important;  /* default is 16px; 13px = ~81% */
}
:root:has(body.omniroq-font-large) {
    font-size: 18px !important;  /* default is 16px; 18px = 112.5% */
}

/* ── Font family ─────────────────────────────────────────── */
body.omniroq-family-system,
body.omniroq-family-system * { font-family: inherit !important; }
body.omniroq-family-michroma,
body.omniroq-family-michroma * { font-family: 'Michroma', system-ui, sans-serif !important; }
body.omniroq-family-inter,
body.omniroq-family-inter * { font-family: 'Inter', system-ui, sans-serif !important; }

/* ── Brand/company name font (separate from body font) ─────────────────────── */
body.omniroq-brand-system .navbar-brand,
body.omniroq-brand-system .omniroq-brand-lockup,
body.omniroq-brand-system .omniroq-wordmark,
body.omniroq-brand-system .omniroq-wordmark-omni,
body.omniroq-brand-system .omniroq-wordmark-roq { font-family: inherit !important; }
body.omniroq-brand-michroma .navbar-brand,
body.omniroq-brand-michroma .omniroq-brand-lockup,
body.omniroq-brand-michroma .omniroq-wordmark,
body.omniroq-brand-michroma .omniroq-wordmark-omni,
body.omniroq-brand-michroma .omniroq-wordmark-roq { font-family: 'Michroma', system-ui, sans-serif !important; }
body.omniroq-brand-inter .navbar-brand,
body.omniroq-brand-inter .omniroq-brand-lockup,
body.omniroq-brand-inter .omniroq-wordmark,
body.omniroq-brand-inter .omniroq-wordmark-omni,
body.omniroq-brand-inter .omniroq-wordmark-roq { font-family: 'Inter', system-ui, sans-serif !important; }
body.omniroq-brand-roboto .navbar-brand,
body.omniroq-brand-roboto .omniroq-brand-lockup,
body.omniroq-brand-roboto .omniroq-wordmark,
body.omniroq-brand-roboto .omniroq-wordmark-omni,
body.omniroq-brand-roboto .omniroq-wordmark-roq { font-family: 'Roboto', system-ui, sans-serif !important; }
body.omniroq-brand-open-sans .navbar-brand,
body.omniroq-brand-open-sans .omniroq-brand-lockup,
body.omniroq-brand-open-sans .omniroq-wordmark,
body.omniroq-brand-open-sans .omniroq-wordmark-omni,
body.omniroq-brand-open-sans .omniroq-wordmark-roq { font-family: 'Open Sans', system-ui, sans-serif !important; }
body.omniroq-brand-lato .navbar-brand,
body.omniroq-brand-lato .omniroq-brand-lockup,
body.omniroq-brand-lato .omniroq-wordmark,
body.omniroq-brand-lato .omniroq-wordmark-omni,
body.omniroq-brand-lato .omniroq-wordmark-roq { font-family: 'Lato', system-ui, sans-serif !important; }
body.omniroq-brand-montserrat .navbar-brand,
body.omniroq-brand-montserrat .omniroq-brand-lockup,
body.omniroq-brand-montserrat .omniroq-wordmark,
body.omniroq-brand-montserrat .omniroq-wordmark-omni,
body.omniroq-brand-montserrat .omniroq-wordmark-roq { font-family: 'Montserrat', system-ui, sans-serif !important; }
body.omniroq-brand-poppins .navbar-brand,
body.omniroq-brand-poppins .omniroq-brand-lockup,
body.omniroq-brand-poppins .omniroq-wordmark,
body.omniroq-brand-poppins .omniroq-wordmark-omni,
body.omniroq-brand-poppins .omniroq-wordmark-roq { font-family: 'Poppins', system-ui, sans-serif !important; }
body.omniroq-brand-nunito .navbar-brand,
body.omniroq-brand-nunito .omniroq-brand-lockup,
body.omniroq-brand-nunito .omniroq-wordmark,
body.omniroq-brand-nunito .omniroq-wordmark-omni,
body.omniroq-brand-nunito .omniroq-wordmark-roq { font-family: 'Nunito', system-ui, sans-serif !important; }
body.omniroq-brand-raleway .navbar-brand,
body.omniroq-brand-raleway .omniroq-brand-lockup,
body.omniroq-brand-raleway .omniroq-wordmark,
body.omniroq-brand-raleway .omniroq-wordmark-omni,
body.omniroq-brand-raleway .omniroq-wordmark-roq { font-family: 'Raleway', system-ui, sans-serif !important; }
body.omniroq-brand-ubuntu .navbar-brand,
body.omniroq-brand-ubuntu .omniroq-brand-lockup,
body.omniroq-brand-ubuntu .omniroq-wordmark,
body.omniroq-brand-ubuntu .omniroq-wordmark-omni,
body.omniroq-brand-ubuntu .omniroq-wordmark-roq { font-family: 'Ubuntu', system-ui, sans-serif !important; }
body.omniroq-brand-barlow .navbar-brand,
body.omniroq-brand-barlow .omniroq-brand-lockup,
body.omniroq-brand-barlow .omniroq-wordmark,
body.omniroq-brand-barlow .omniroq-wordmark-omni,
body.omniroq-brand-barlow .omniroq-wordmark-roq { font-family: 'Barlow', system-ui, sans-serif !important; }
body.omniroq-brand-dm-sans .navbar-brand,
body.omniroq-brand-dm-sans .omniroq-brand-lockup,
body.omniroq-brand-dm-sans .omniroq-wordmark,
body.omniroq-brand-dm-sans .omniroq-wordmark-omni,
body.omniroq-brand-dm-sans .omniroq-wordmark-roq { font-family: 'DM Sans', system-ui, sans-serif !important; }
body.omniroq-brand-manrope .navbar-brand,
body.omniroq-brand-manrope .omniroq-brand-lockup,
body.omniroq-brand-manrope .omniroq-wordmark,
body.omniroq-brand-manrope .omniroq-wordmark-omni,
body.omniroq-brand-manrope .omniroq-wordmark-roq { font-family: 'Manrope', system-ui, sans-serif !important; }
body.omniroq-brand-outfit .navbar-brand,
body.omniroq-brand-outfit .omniroq-brand-lockup,
body.omniroq-brand-outfit .omniroq-wordmark,
body.omniroq-brand-outfit .omniroq-wordmark-omni,
body.omniroq-brand-outfit .omniroq-wordmark-roq { font-family: 'Outfit', system-ui, sans-serif !important; }
body.omniroq-brand-sora .navbar-brand,
body.omniroq-brand-sora .omniroq-brand-lockup,
body.omniroq-brand-sora .omniroq-wordmark,
body.omniroq-brand-sora .omniroq-wordmark-omni,
body.omniroq-brand-sora .omniroq-wordmark-roq { font-family: 'Sora', system-ui, sans-serif !important; }
body.omniroq-brand-plus-jakarta-sans .navbar-brand,
body.omniroq-brand-plus-jakarta-sans .omniroq-brand-lockup,
body.omniroq-brand-plus-jakarta-sans .omniroq-wordmark,
body.omniroq-brand-plus-jakarta-sans .omniroq-wordmark-omni,
body.omniroq-brand-plus-jakarta-sans .omniroq-wordmark-roq { font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important; }
body.omniroq-brand-josefin-sans .navbar-brand,
body.omniroq-brand-josefin-sans .omniroq-brand-lockup,
body.omniroq-brand-josefin-sans .omniroq-wordmark,
body.omniroq-brand-josefin-sans .omniroq-wordmark-omni,
body.omniroq-brand-josefin-sans .omniroq-wordmark-roq { font-family: 'Josefin Sans', system-ui, sans-serif !important; }
body.omniroq-brand-playfair-display .navbar-brand,
body.omniroq-brand-playfair-display .omniroq-brand-lockup,
body.omniroq-brand-playfair-display .omniroq-wordmark,
body.omniroq-brand-playfair-display .omniroq-wordmark-omni,
body.omniroq-brand-playfair-display .omniroq-wordmark-roq { font-family: 'Playfair Display', Georgia, serif !important; }
body.omniroq-brand-merriweather .navbar-brand,
body.omniroq-brand-merriweather .omniroq-brand-lockup,
body.omniroq-brand-merriweather .omniroq-wordmark,
body.omniroq-brand-merriweather .omniroq-wordmark-omni,
body.omniroq-brand-merriweather .omniroq-wordmark-roq { font-family: 'Merriweather', Georgia, serif !important; }
body.omniroq-brand-lora .navbar-brand,
body.omniroq-brand-lora .omniroq-brand-lockup,
body.omniroq-brand-lora .omniroq-wordmark,
body.omniroq-brand-lora .omniroq-wordmark-omni,
body.omniroq-brand-lora .omniroq-wordmark-roq { font-family: 'Lora', Georgia, serif !important; }
body.omniroq-brand-pt-serif .navbar-brand,
body.omniroq-brand-pt-serif .omniroq-brand-lockup,
body.omniroq-brand-pt-serif .omniroq-wordmark,
body.omniroq-brand-pt-serif .omniroq-wordmark-omni,
body.omniroq-brand-pt-serif .omniroq-wordmark-roq { font-family: 'PT Serif', Georgia, serif !important; }
body.omniroq-brand-noto-serif .navbar-brand,
body.omniroq-brand-noto-serif .omniroq-brand-lockup,
body.omniroq-brand-noto-serif .omniroq-wordmark,
body.omniroq-brand-noto-serif .omniroq-wordmark-omni,
body.omniroq-brand-noto-serif .omniroq-wordmark-roq { font-family: 'Noto Serif', Georgia, serif !important; }
body.omniroq-brand-source-serif-4 .navbar-brand,
body.omniroq-brand-source-serif-4 .omniroq-brand-lockup,
body.omniroq-brand-source-serif-4 .omniroq-wordmark,
body.omniroq-brand-source-serif-4 .omniroq-wordmark-omni,
body.omniroq-brand-source-serif-4 .omniroq-wordmark-roq { font-family: 'Source Serif 4', Georgia, serif !important; }
body.omniroq-brand-jetbrains-mono .navbar-brand,
body.omniroq-brand-jetbrains-mono .omniroq-brand-lockup,
body.omniroq-brand-jetbrains-mono .omniroq-wordmark,
body.omniroq-brand-jetbrains-mono .omniroq-wordmark-omni,
body.omniroq-brand-jetbrains-mono .omniroq-wordmark-roq { font-family: 'JetBrains Mono', 'Cascadia Code', monospace !important; }
body.omniroq-brand-fira-code .navbar-brand,
body.omniroq-brand-fira-code .omniroq-brand-lockup,
body.omniroq-brand-fira-code .omniroq-wordmark,
body.omniroq-brand-fira-code .omniroq-wordmark-omni,
body.omniroq-brand-fira-code .omniroq-wordmark-roq { font-family: 'Fira Code', 'Cascadia Code', monospace !important; }
body.omniroq-brand-ibm-plex-mono .navbar-brand,
body.omniroq-brand-ibm-plex-mono .omniroq-brand-lockup,
body.omniroq-brand-ibm-plex-mono .omniroq-wordmark,
body.omniroq-brand-ibm-plex-mono .omniroq-wordmark-omni,
body.omniroq-brand-ibm-plex-mono .omniroq-wordmark-roq { font-family: 'IBM Plex Mono', 'Cascadia Code', monospace !important; }
body.omniroq-family-roboto,
body.omniroq-family-roboto * { font-family: 'Roboto', system-ui, sans-serif !important; }
body.omniroq-family-open-sans,
body.omniroq-family-open-sans * { font-family: 'Open Sans', system-ui, sans-serif !important; }
body.omniroq-family-lato,
body.omniroq-family-lato * { font-family: 'Lato', system-ui, sans-serif !important; }
body.omniroq-family-montserrat,
body.omniroq-family-montserrat * { font-family: 'Montserrat', system-ui, sans-serif !important; }
body.omniroq-family-poppins,
body.omniroq-family-poppins * { font-family: 'Poppins', system-ui, sans-serif !important; }
body.omniroq-family-nunito,
body.omniroq-family-nunito * { font-family: 'Nunito', system-ui, sans-serif !important; }
body.omniroq-family-raleway,
body.omniroq-family-raleway * { font-family: 'Raleway', system-ui, sans-serif !important; }
body.omniroq-family-ubuntu,
body.omniroq-family-ubuntu * { font-family: 'Ubuntu', system-ui, sans-serif !important; }
body.omniroq-family-barlow,
body.omniroq-family-barlow * { font-family: 'Barlow', system-ui, sans-serif !important; }
body.omniroq-family-dm-sans,
body.omniroq-family-dm-sans * { font-family: 'DM Sans', system-ui, sans-serif !important; }
body.omniroq-family-manrope,
body.omniroq-family-manrope * { font-family: 'Manrope', system-ui, sans-serif !important; }
body.omniroq-family-outfit,
body.omniroq-family-outfit * { font-family: 'Outfit', system-ui, sans-serif !important; }
body.omniroq-family-sora,
body.omniroq-family-sora * { font-family: 'Sora', system-ui, sans-serif !important; }
body.omniroq-family-plus-jakarta-sans,
body.omniroq-family-plus-jakarta-sans * { font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important; }
body.omniroq-family-josefin-sans,
body.omniroq-family-josefin-sans * { font-family: 'Josefin Sans', system-ui, sans-serif !important; }
body.omniroq-family-playfair-display,
body.omniroq-family-playfair-display * { font-family: 'Playfair Display', Georgia, serif !important; }
body.omniroq-family-merriweather,
body.omniroq-family-merriweather * { font-family: 'Merriweather', Georgia, serif !important; }
body.omniroq-family-lora,
body.omniroq-family-lora * { font-family: 'Lora', Georgia, serif !important; }
body.omniroq-family-pt-serif,
body.omniroq-family-pt-serif * { font-family: 'PT Serif', Georgia, serif !important; }
body.omniroq-family-noto-serif,
body.omniroq-family-noto-serif * { font-family: 'Noto Serif', Georgia, serif !important; }
body.omniroq-family-source-serif-4,
body.omniroq-family-source-serif-4 * { font-family: 'Source Serif 4', Georgia, serif !important; }
body.omniroq-family-jetbrains-mono,
body.omniroq-family-jetbrains-mono * { font-family: 'JetBrains Mono', 'Cascadia Code', monospace !important; }
body.omniroq-family-fira-code,
body.omniroq-family-fira-code * { font-family: 'Fira Code', 'Cascadia Code', monospace !important; }
body.omniroq-family-ibm-plex-mono,
body.omniroq-family-ibm-plex-mono * { font-family: 'IBM Plex Mono', 'Cascadia Code', monospace !important; }

/* ── Button style (visual appearance) ───────────────────── */
/* Seven styles mirroring the card-style set so they can be combined freely.
   Only .btn-* colour/state classes are targeted — btn-link, btn-close, and
   any non-button element carrying a btn class are intentionally untouched. */

/* ── Outline (default) — Bootstrap native: btn-outline-* stays transparent
   with a coloured border; btn-* (solid) stays filled. No overrides needed. */

/* ── Shared transition — smooth animation for all 7 styles ─────────── */
body[data-bs-theme].omniroq-btn-outline .btn-primary,    body[data-bs-theme].omniroq-btn-outline .btn-outline-primary,
body[data-bs-theme].omniroq-btn-filled .btn-primary,     body[data-bs-theme].omniroq-btn-filled .btn-outline-primary,
body[data-bs-theme].omniroq-btn-elevated .btn-primary,   body[data-bs-theme].omniroq-btn-elevated .btn-outline-primary,
body[data-bs-theme].omniroq-btn-glass .btn-primary,      body[data-bs-theme].omniroq-btn-glass .btn-outline-primary,
body[data-bs-theme].omniroq-btn-gradient .btn-primary,   body[data-bs-theme].omniroq-btn-gradient .btn-outline-primary,
body[data-bs-theme].omniroq-btn-flat .btn-primary,       body[data-bs-theme].omniroq-btn-flat .btn-outline-primary,
body[data-bs-theme].omniroq-btn-bordered .btn-primary,   body[data-bs-theme].omniroq-btn-bordered .btn-outline-primary {
    transition: background-color var(--o-dur) var(--o-ease), background var(--o-dur) var(--o-ease),
                border-color var(--o-dur) var(--o-ease), color var(--o-dur) var(--o-ease),
                filter var(--o-dur) var(--o-ease),
                transform var(--o-dur) var(--o-ease) !important;
}

/* ── Filled — every button (including outline variants) gets a solid opaque
   fill in its semantic colour, matching the Filled card surface treatment.
   body[data-bs-theme] prefix is required to beat the specificity of the
   body[data-bs-theme] .dataTables_wrapper .btn-outline-primary rule above. */
body[data-bs-theme].omniroq-btn-filled .btn-primary,
body[data-bs-theme].omniroq-btn-filled .btn-outline-primary {
    background-color: var(--omniroq-accent, #78c2ad) !important;
    border-color: var(--omniroq-accent, #78c2ad) !important;
    color: var(--omniroq-accent-contrast, #1f2328) !important;
}
body[data-bs-theme].omniroq-btn-filled .btn-primary:hover,
body[data-bs-theme].omniroq-btn-filled .btn-outline-primary:hover {
    background-color: color-mix(in srgb, var(--omniroq-accent, #78c2ad) 82%, #000) !important;
    border-color: color-mix(in srgb, var(--omniroq-accent, #78c2ad) 82%, #000) !important;
    color: var(--omniroq-accent-contrast, #1f2328) !important;
}
body[data-bs-theme].omniroq-btn-filled .btn-outline-success,
body[data-bs-theme].omniroq-btn-filled .btn-success {
    background-color: var(--bs-success) !important;
    border-color: var(--bs-success) !important;
    color: #fff !important;
}
body[data-bs-theme].omniroq-btn-filled .btn-outline-success:hover,
body[data-bs-theme].omniroq-btn-filled .btn-success:hover {
    background-color: color-mix(in srgb, var(--bs-success) 82%, #000) !important;
    border-color: color-mix(in srgb, var(--bs-success) 82%, #000) !important;
}
body[data-bs-theme].omniroq-btn-filled .btn-outline-danger,
body[data-bs-theme].omniroq-btn-filled .btn-danger {
    background-color: var(--bs-danger) !important;
    border-color: var(--bs-danger) !important;
    color: #fff !important;
}
body[data-bs-theme].omniroq-btn-filled .btn-outline-danger:hover,
body[data-bs-theme].omniroq-btn-filled .btn-danger:hover {
    background-color: color-mix(in srgb, var(--bs-danger) 82%, #000) !important;
    border-color: color-mix(in srgb, var(--bs-danger) 82%, #000) !important;
}
body[data-bs-theme].omniroq-btn-filled .btn-outline-secondary,
body[data-bs-theme].omniroq-btn-filled .btn-secondary {
    background-color: var(--bs-secondary) !important;
    border-color: var(--bs-secondary) !important;
    color: #fff !important;
}
body[data-bs-theme].omniroq-btn-filled .btn-outline-secondary:hover,
body[data-bs-theme].omniroq-btn-filled .btn-secondary:hover {
    background-color: color-mix(in srgb, var(--bs-secondary) 82%, #000) !important;
    border-color: color-mix(in srgb, var(--bs-secondary) 82%, #000) !important;
}
body[data-bs-theme].omniroq-btn-filled .btn-outline-warning,
body[data-bs-theme].omniroq-btn-filled .btn-warning {
    background-color: var(--bs-warning) !important;
    border-color: var(--bs-warning) !important;
    color: #000 !important;
}
body[data-bs-theme].omniroq-btn-filled .btn-outline-info,
body[data-bs-theme].omniroq-btn-filled .btn-info {
    background-color: var(--bs-info) !important;
    border-color: var(--bs-info) !important;
    color: #000 !important;
}

/* ── Elevated — mirrors the Elevated card: rgba(255,255,255,0.08) lifted
   surface + heavy drop shadow scaled to button size. Shadow opacities match
   the card's 0.62/0.45 values, spread values are ~1/3 of the card's. */
body[data-bs-theme].omniroq-btn-elevated .btn-primary,
body[data-bs-theme].omniroq-btn-elevated .btn-outline-primary {
    background-color: rgba(255,255,255,0.08) !important;
    border: 1px solid rgba(var(--omniroq-accent-rgb, 120,194,173), 0.38) !important;
    color: var(--omniroq-accent-text, #78c2ad) !important;
    box-shadow: 0 6px 16px rgba(0,0,0,0.58), 0 2px 6px rgba(0,0,0,0.42) !important;
}
body[data-bs-theme].omniroq-btn-elevated .btn-outline-success, body[data-bs-theme].omniroq-btn-elevated .btn-success,
body[data-bs-theme].omniroq-btn-elevated .btn-outline-danger,  body[data-bs-theme].omniroq-btn-elevated .btn-danger,
body[data-bs-theme].omniroq-btn-elevated .btn-outline-secondary, body[data-bs-theme].omniroq-btn-elevated .btn-secondary,
body[data-bs-theme].omniroq-btn-elevated .btn-outline-warning, body[data-bs-theme].omniroq-btn-elevated .btn-warning,
body[data-bs-theme].omniroq-btn-elevated .btn-outline-info,    body[data-bs-theme].omniroq-btn-elevated .btn-info {
    background-color: rgba(255,255,255,0.08) !important;
    box-shadow: 0 6px 16px rgba(0,0,0,0.58), 0 2px 6px rgba(0,0,0,0.42) !important;
}
/* Light theme — white surface + lighter shadow, same as elevated card light variant */
body[data-bs-theme].omniroq-btn-elevated.omniroq-light-theme .btn-primary,
body[data-bs-theme].omniroq-btn-elevated.omniroq-light-theme .btn-outline-primary {
    background-color: #ffffff !important;
    border: 1px solid rgba(var(--omniroq-accent-rgb, 120,194,173), 0.35) !important;
    box-shadow: 0 6px 16px rgba(15,23,42,0.18), 0 2px 6px rgba(15,23,42,0.11) !important;
}
body[data-bs-theme].omniroq-btn-elevated.omniroq-light-theme .btn-outline-success, body[data-bs-theme].omniroq-btn-elevated.omniroq-light-theme .btn-success,
body[data-bs-theme].omniroq-btn-elevated.omniroq-light-theme .btn-outline-danger,  body[data-bs-theme].omniroq-btn-elevated.omniroq-light-theme .btn-danger,
body[data-bs-theme].omniroq-btn-elevated.omniroq-light-theme .btn-outline-secondary, body[data-bs-theme].omniroq-btn-elevated.omniroq-light-theme .btn-secondary,
body[data-bs-theme].omniroq-btn-elevated.omniroq-light-theme .btn-outline-warning, body[data-bs-theme].omniroq-btn-elevated.omniroq-light-theme .btn-warning,
body[data-bs-theme].omniroq-btn-elevated.omniroq-light-theme .btn-outline-info,    body[data-bs-theme].omniroq-btn-elevated.omniroq-light-theme .btn-info {
    background-color: #ffffff !important;
    box-shadow: 0 6px 16px rgba(15,23,42,0.18), 0 2px 6px rgba(15,23,42,0.11) !important;
}

/* ── Glass — frosted semi-transparent surface with a glassy border, matching
   the Glass card style's backdrop-filter treatment. */
body[data-bs-theme].omniroq-btn-glass .btn-primary,
body[data-bs-theme].omniroq-btn-glass .btn-outline-primary {
    background-color: rgba(var(--omniroq-accent-rgb, 120,194,173), 0.14) !important;
    border: 1px solid rgba(var(--omniroq-accent-rgb, 120,194,173), 0.45) !important;
    color: var(--omniroq-accent-text, #78c2ad) !important;
    backdrop-filter: blur(8px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(8px) saturate(160%) !important;
}
body[data-bs-theme].omniroq-btn-glass .btn-primary:hover,
body[data-bs-theme].omniroq-btn-glass .btn-outline-primary:hover {
    background-color: rgba(var(--omniroq-accent-rgb, 120,194,173), 0.28) !important;
    border-color: rgba(var(--omniroq-accent-rgb, 120,194,173), 0.65) !important;
    color: var(--omniroq-accent-text, #78c2ad) !important;
}
body[data-bs-theme].omniroq-btn-glass .btn-outline-success, body[data-bs-theme].omniroq-btn-glass .btn-success {
    background-color: rgba(var(--bs-success-rgb), 0.14) !important;
    border: 1px solid rgba(var(--bs-success-rgb), 0.45) !important;
    color: var(--bs-success) !important;
    backdrop-filter: blur(8px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(8px) saturate(160%) !important;
}
body[data-bs-theme].omniroq-btn-glass .btn-outline-success:hover, body[data-bs-theme].omniroq-btn-glass .btn-success:hover {
    background-color: rgba(var(--bs-success-rgb), 0.28) !important;
    border-color: rgba(var(--bs-success-rgb), 0.65) !important;
    color: var(--bs-success) !important;
}
body[data-bs-theme].omniroq-btn-glass .btn-outline-danger, body[data-bs-theme].omniroq-btn-glass .btn-danger {
    background-color: rgba(var(--bs-danger-rgb), 0.14) !important;
    border: 1px solid rgba(var(--bs-danger-rgb), 0.45) !important;
    color: var(--bs-danger) !important;
    backdrop-filter: blur(8px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(8px) saturate(160%) !important;
}
body[data-bs-theme].omniroq-btn-glass .btn-outline-danger:hover, body[data-bs-theme].omniroq-btn-glass .btn-danger:hover {
    background-color: rgba(var(--bs-danger-rgb), 0.28) !important;
    border-color: rgba(var(--bs-danger-rgb), 0.65) !important;
    color: var(--bs-danger) !important;
}
body[data-bs-theme].omniroq-btn-glass .btn-outline-secondary, body[data-bs-theme].omniroq-btn-glass .btn-secondary {
    background-color: rgba(var(--bs-secondary-rgb), 0.14) !important;
    border: 1px solid rgba(var(--bs-secondary-rgb), 0.45) !important;
    color: var(--bs-secondary) !important;
    backdrop-filter: blur(8px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(8px) saturate(160%) !important;
}
body[data-bs-theme].omniroq-btn-glass .btn-outline-secondary:hover, body[data-bs-theme].omniroq-btn-glass .btn-secondary:hover {
    background-color: rgba(var(--bs-secondary-rgb), 0.28) !important;
    border-color: rgba(var(--bs-secondary-rgb), 0.65) !important;
    color: var(--bs-secondary) !important;
}

/* ── Gradient — diagonal accent-to-body-bg gradient matching the Gradient
   card style. Outline variants are also converted so the whole UI shifts. */
body[data-bs-theme].omniroq-btn-gradient .btn-primary,
body[data-bs-theme].omniroq-btn-gradient .btn-outline-primary {
    background: linear-gradient(135deg,
        var(--omniroq-accent, #78c2ad) 0%,
        color-mix(in srgb, var(--omniroq-accent, #78c2ad) 55%, var(--bs-body-bg, #0b0f14)) 100%) !important;
    border: 1px solid rgba(var(--omniroq-accent-rgb, 120,194,173), 0.50) !important;
    color: var(--omniroq-accent-contrast, #1f2328) !important;
}
body[data-bs-theme].omniroq-btn-gradient .btn-primary:hover,
body[data-bs-theme].omniroq-btn-gradient .btn-outline-primary:hover {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--omniroq-accent, #78c2ad) 88%, #000) 0%,
        color-mix(in srgb, var(--omniroq-accent, #78c2ad) 45%, var(--bs-body-bg, #0b0f14)) 100%) !important;
    color: var(--omniroq-accent-contrast, #1f2328) !important;
}
body[data-bs-theme].omniroq-btn-gradient .btn-outline-success, body[data-bs-theme].omniroq-btn-gradient .btn-success {
    background: linear-gradient(135deg, var(--bs-success) 0%, color-mix(in srgb, var(--bs-success) 55%, var(--bs-body-bg, #0b0f14)) 100%) !important;
    border: 1px solid rgba(var(--bs-success-rgb), 0.50) !important;
    color: #fff !important;
}
body[data-bs-theme].omniroq-btn-gradient .btn-outline-success:hover, body[data-bs-theme].omniroq-btn-gradient .btn-success:hover {
    background: linear-gradient(135deg, color-mix(in srgb, var(--bs-success) 88%, #000) 0%, color-mix(in srgb, var(--bs-success) 45%, var(--bs-body-bg, #0b0f14)) 100%) !important;
}
body[data-bs-theme].omniroq-btn-gradient .btn-outline-danger, body[data-bs-theme].omniroq-btn-gradient .btn-danger {
    background: linear-gradient(135deg, var(--bs-danger) 0%, color-mix(in srgb, var(--bs-danger) 55%, var(--bs-body-bg, #0b0f14)) 100%) !important;
    border: 1px solid rgba(var(--bs-danger-rgb), 0.50) !important;
    color: #fff !important;
}
body[data-bs-theme].omniroq-btn-gradient .btn-outline-danger:hover, body[data-bs-theme].omniroq-btn-gradient .btn-danger:hover {
    background: linear-gradient(135deg, color-mix(in srgb, var(--bs-danger) 88%, #000) 0%, color-mix(in srgb, var(--bs-danger) 45%, var(--bs-body-bg, #0b0f14)) 100%) !important;
}
body[data-bs-theme].omniroq-btn-gradient .btn-outline-secondary, body[data-bs-theme].omniroq-btn-gradient .btn-secondary {
    background: linear-gradient(135deg, var(--bs-secondary) 0%, color-mix(in srgb, var(--bs-secondary) 55%, var(--bs-body-bg, #0b0f14)) 100%) !important;
    border: 1px solid rgba(var(--bs-secondary-rgb), 0.50) !important;
    color: #fff !important;
}
body[data-bs-theme].omniroq-btn-gradient .btn-outline-secondary:hover, body[data-bs-theme].omniroq-btn-gradient .btn-secondary:hover {
    background: linear-gradient(135deg, color-mix(in srgb, var(--bs-secondary) 88%, #000) 0%, color-mix(in srgb, var(--bs-secondary) 45%, var(--bs-body-bg, #0b0f14)) 100%) !important;
}

/* ── Flat — minimal tinted fill, no border, no shadow, matching the Flat
   card style's stripped-back surface. Hover deepens the tint only. */
body[data-bs-theme].omniroq-btn-flat .btn-primary,
body[data-bs-theme].omniroq-btn-flat .btn-outline-primary {
    background-color: rgba(var(--omniroq-accent-rgb, 120,194,173), 0.16) !important;
    border: none !important;
    color: var(--omniroq-accent-text, #78c2ad) !important;
    box-shadow: none !important;
}
body[data-bs-theme].omniroq-btn-flat .btn-primary:hover,
body[data-bs-theme].omniroq-btn-flat .btn-outline-primary:hover {
    background-color: rgba(var(--omniroq-accent-rgb, 120,194,173), 0.30) !important;
    box-shadow: none !important;
}
body[data-bs-theme].omniroq-btn-flat .btn-outline-success, body[data-bs-theme].omniroq-btn-flat .btn-success {
    background-color: rgba(var(--bs-success-rgb), 0.16) !important;
    border: none !important;
    color: var(--bs-success) !important;
    box-shadow: none !important;
}
body[data-bs-theme].omniroq-btn-flat .btn-outline-success:hover, body[data-bs-theme].omniroq-btn-flat .btn-success:hover {
    background-color: rgba(var(--bs-success-rgb), 0.30) !important;
}
body[data-bs-theme].omniroq-btn-flat .btn-outline-danger, body[data-bs-theme].omniroq-btn-flat .btn-danger {
    background-color: rgba(var(--bs-danger-rgb), 0.16) !important;
    border: none !important;
    color: var(--bs-danger) !important;
    box-shadow: none !important;
}
body[data-bs-theme].omniroq-btn-flat .btn-outline-danger:hover, body[data-bs-theme].omniroq-btn-flat .btn-danger:hover {
    background-color: rgba(var(--bs-danger-rgb), 0.30) !important;
}
body[data-bs-theme].omniroq-btn-flat .btn-outline-secondary, body[data-bs-theme].omniroq-btn-flat .btn-secondary {
    background-color: rgba(var(--bs-secondary-rgb), 0.16) !important;
    border: none !important;
    color: var(--bs-secondary) !important;
    box-shadow: none !important;
}
body[data-bs-theme].omniroq-btn-flat .btn-outline-secondary:hover, body[data-bs-theme].omniroq-btn-flat .btn-secondary:hover {
    background-color: rgba(var(--bs-secondary-rgb), 0.30) !important;
}
body[data-bs-theme].omniroq-btn-flat .btn-outline-warning, body[data-bs-theme].omniroq-btn-flat .btn-warning {
    background-color: rgba(var(--bs-warning-rgb), 0.16) !important;
    border: none !important;
    color: var(--bs-warning) !important;
    box-shadow: none !important;
}
body[data-bs-theme].omniroq-btn-flat .btn-outline-warning:hover, body[data-bs-theme].omniroq-btn-flat .btn-warning:hover {
    background-color: rgba(var(--bs-warning-rgb), 0.30) !important;
}

/* ── Bordered — thick border with faint tint and inner+outer accent glow,
   matching the Bordered card style's double-frame treatment. Hover fills solid. */
body[data-bs-theme].omniroq-btn-bordered .btn-primary,
body[data-bs-theme].omniroq-btn-bordered .btn-outline-primary {
    border: 2px solid var(--omniroq-accent, #78c2ad) !important;
    background-color: rgba(var(--omniroq-accent-rgb, 120,194,173), 0.07) !important;
    color: var(--omniroq-accent-text, #78c2ad) !important;
    box-shadow: inset 0 0 0 1px rgba(var(--omniroq-accent-rgb, 120,194,173), 0.30),
                0 0 0 1px rgba(var(--omniroq-accent-rgb, 120,194,173), 0.15) !important;
}
body[data-bs-theme].omniroq-btn-bordered .btn-primary:hover,
body[data-bs-theme].omniroq-btn-bordered .btn-outline-primary:hover {
    background-color: var(--omniroq-accent, #78c2ad) !important;
    color: var(--omniroq-accent-contrast, #1f2328) !important;
    box-shadow: inset 0 0 0 1px rgba(var(--omniroq-accent-rgb, 120,194,173), 0.50),
                0 0 0 2px rgba(var(--omniroq-accent-rgb, 120,194,173), 0.25) !important;
}
body[data-bs-theme].omniroq-btn-bordered .btn-outline-success, body[data-bs-theme].omniroq-btn-bordered .btn-success {
    border: 2px solid var(--bs-success) !important;
    background-color: rgba(var(--bs-success-rgb), 0.07) !important;
    color: var(--bs-success) !important;
    box-shadow: inset 0 0 0 1px rgba(var(--bs-success-rgb), 0.30), 0 0 0 1px rgba(var(--bs-success-rgb), 0.15) !important;
}
body[data-bs-theme].omniroq-btn-bordered .btn-outline-success:hover, body[data-bs-theme].omniroq-btn-bordered .btn-success:hover {
    background-color: var(--bs-success) !important;
    color: #fff !important;
}
body[data-bs-theme].omniroq-btn-bordered .btn-outline-danger, body[data-bs-theme].omniroq-btn-bordered .btn-danger {
    border: 2px solid var(--bs-danger) !important;
    background-color: rgba(var(--bs-danger-rgb), 0.07) !important;
    color: var(--bs-danger) !important;
    box-shadow: inset 0 0 0 1px rgba(var(--bs-danger-rgb), 0.30), 0 0 0 1px rgba(var(--bs-danger-rgb), 0.15) !important;
}
body[data-bs-theme].omniroq-btn-bordered .btn-outline-danger:hover, body[data-bs-theme].omniroq-btn-bordered .btn-danger:hover {
    background-color: var(--bs-danger) !important;
    color: #fff !important;
}
body[data-bs-theme].omniroq-btn-bordered .btn-outline-secondary, body[data-bs-theme].omniroq-btn-bordered .btn-secondary {
    border: 2px solid var(--bs-secondary) !important;
    background-color: rgba(var(--bs-secondary-rgb), 0.07) !important;
    color: var(--bs-secondary) !important;
    box-shadow: inset 0 0 0 1px rgba(var(--bs-secondary-rgb), 0.30), 0 0 0 1px rgba(var(--bs-secondary-rgb), 0.15) !important;
}
body[data-bs-theme].omniroq-btn-bordered .btn-outline-secondary:hover, body[data-bs-theme].omniroq-btn-bordered .btn-secondary:hover {
    background-color: var(--bs-secondary) !important;
    color: #fff !important;
}

/* ── Shared hover — wired to the hover-effect CSS variables so every button
   responds to the Hover Effect setting the same way all other elements do.
   --omniroq-hover-pop-scale: 1.0 = no pop; 1.02+ = visible scale-up.
   --omniroq-hover-glow-filter: none = no glow/shadow; accent drop-shadow = glow;
     dark drop-shadow = shadow mode. */
body[data-bs-theme].omniroq-btn-outline .btn-primary:hover,    body[data-bs-theme].omniroq-btn-outline .btn-outline-primary:hover,
body[data-bs-theme].omniroq-btn-filled .btn-primary:hover,     body[data-bs-theme].omniroq-btn-filled .btn-outline-primary:hover,
body[data-bs-theme].omniroq-btn-elevated .btn-primary:hover,   body[data-bs-theme].omniroq-btn-elevated .btn-outline-primary:hover,
body[data-bs-theme].omniroq-btn-glass .btn-primary:hover,      body[data-bs-theme].omniroq-btn-glass .btn-outline-primary:hover,
body[data-bs-theme].omniroq-btn-gradient .btn-primary:hover,   body[data-bs-theme].omniroq-btn-gradient .btn-outline-primary:hover,
body[data-bs-theme].omniroq-btn-flat .btn-primary:hover,       body[data-bs-theme].omniroq-btn-flat .btn-outline-primary:hover,
body[data-bs-theme].omniroq-btn-bordered .btn-primary:hover,   body[data-bs-theme].omniroq-btn-bordered .btn-outline-primary:hover {
    transform: scale(var(--omniroq-hover-pop-scale, 1.02)) !important;
    filter: var(--omniroq-hover-glow-filter) !important;
    box-shadow: none !important;
}

/* ── Shared active — snap back for all 7 styles ── */
body[data-bs-theme].omniroq-btn-outline .btn-primary:active,    body[data-bs-theme].omniroq-btn-outline .btn-outline-primary:active,
body[data-bs-theme].omniroq-btn-filled .btn-primary:active,     body[data-bs-theme].omniroq-btn-filled .btn-outline-primary:active,
body[data-bs-theme].omniroq-btn-elevated .btn-primary:active,   body[data-bs-theme].omniroq-btn-elevated .btn-outline-primary:active,
body[data-bs-theme].omniroq-btn-glass .btn-primary:active,      body[data-bs-theme].omniroq-btn-glass .btn-outline-primary:active,
body[data-bs-theme].omniroq-btn-gradient .btn-primary:active,   body[data-bs-theme].omniroq-btn-gradient .btn-outline-primary:active,
body[data-bs-theme].omniroq-btn-flat .btn-primary:active,       body[data-bs-theme].omniroq-btn-flat .btn-outline-primary:active,
body[data-bs-theme].omniroq-btn-bordered .btn-primary:active,   body[data-bs-theme].omniroq-btn-bordered .btn-outline-primary:active {
    transform: scale(0.98) !important;
    box-shadow: none !important;
}

/* ── Button radius (corner rounding) ────────────────────── */
body.omniroq-btn-shape-sharp .btn  { border-radius: 0 !important; }
body.omniroq-btn-shape-subtle .btn { border-radius: 4px !important; }
body.omniroq-btn-shape-rounded .btn { border-radius: 8px !important; }
body.omniroq-btn-shape-pill .btn   { border-radius: 16px !important; }

/* ── Shadow/Glow intensity ──────────────────────────────── */
/* Sets --omniroq-card-shadow variable that card styles reference via var() */
body.omniroq-shadow-none  { --omniroq-card-shadow: none; }
body.omniroq-shadow-light { --omniroq-card-shadow: 0 2px 8px rgba(0,0,0,0.15); }
body.omniroq-shadow-normal { --omniroq-card-shadow: 0 8px 28px rgba(0,0,0,0.42); }
body.omniroq-shadow-heavy { --omniroq-card-shadow: 0 12px 40px rgba(0,0,0,0.55); }
body.omniroq-shadow-heavy.omniroq-light-theme { --omniroq-card-shadow: 0 10px 30px rgba(0,0,0,0.18); }
/* Non-card UI elements still use direct box-shadow */
body.omniroq-shadow-none .settings-card,
body.omniroq-shadow-none .dropdown-menu,
body.omniroq-shadow-none .modal-content,
body.omniroq-shadow-none .offcanvas,
body.omniroq-shadow-none .toast { box-shadow: none !important; }
body.omniroq-shadow-light .settings-card { box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important; }
body.omniroq-shadow-light .dropdown-menu,
body.omniroq-shadow-light .modal-content,
body.omniroq-shadow-light .offcanvas { box-shadow: 0 2px 8px rgba(0,0,0,0.12) !important; }
body.omniroq-shadow-normal .settings-card { box-shadow: 0 4px 16px rgba(0,0,0,0.25) !important; }
body.omniroq-shadow-normal .dropdown-menu,
body.omniroq-shadow-normal .modal-content,
body.omniroq-shadow-normal .offcanvas { box-shadow: 0 6px 20px rgba(0,0,0,0.30) !important; }
body.omniroq-shadow-heavy .settings-card { box-shadow: 0 12px 40px rgba(0,0,0,0.45) !important; }
body.omniroq-shadow-heavy .dropdown-menu,
body.omniroq-shadow-heavy .modal-content,
body.omniroq-shadow-heavy .offcanvas { box-shadow: 0 16px 48px rgba(0,0,0,0.55) !important; }
body.omniroq-shadow-heavy.omniroq-light-theme .settings-card { box-shadow: 0 10px 30px rgba(0,0,0,0.15) !important; }

/* ── Navbar sticky ───────────────────────────────────────── */
body.omniroq-navbar-sticky #omniroq-main-navbar {
    position: sticky; top: 0; z-index: 1020;
    overflow: visible !important;
}
/* Give the content area breathing room so button glows (box-shadow) don't
   visually clip behind the sticky navbar's opaque background. */
body.omniroq-navbar-sticky #omniroq-main-wrap {
    padding-top: 10px;
}
body.omniroq-navbar-not-sticky #omniroq-main-navbar {
    position: relative;
    /* Establish a stacking context above page content so nav dropdowns overlay
       the page even when the navbar isn't sticky. */
    z-index: 1020;
    overflow: visible !important;
}
body.omniroq-navbar-not-sticky #omniroq-main-wrap {
    padding-top: 10px;
}

/* ── Hover effects ──────────────────────────────────────── */
/* Architecture: two CSS variables drive every hover effect.
   --omniroq-hover-pop-scale: scale() factor on hover (1.0 = no pop).
   --omniroq-hover-glow-filter: filter() on hover (none = no effect).
   Mode blocks below set the variable values; the Universal hover block
   further down applies them to every interactive element site-wide. */

/* ── Mode variable blocks ─────────────────────────────────────────────────
   Each block sets --omniroq-hover-pop-scale and --omniroq-hover-glow-filter
   on BOTH the body AND any descendant [data-bs-theme] elements.
   The [data-bs-theme] variant is required because lines 118-140 define these
   variables directly on every [data-bs-theme] element (specificity 0,0,1,0),
   which beats the inherited body value. The descendant selector achieves
   specificity (0,0,2,1) — enough to override those direct declarations. */

/* none — no motion, no effect */
body.omniroq-hover-none,
body.omniroq-hover-none [data-bs-theme] {
    --o-hover-growth: 0px;
    --omniroq-hover-pop-scale: 1.0;
    --omniroq-hover-glow-filter: none;
}

/* pop — scale only, no filter effect */
body.omniroq-hover-pop,
body.omniroq-hover-pop [data-bs-theme] {
    --o-hover-growth: 8px;
    --omniroq-hover-pop-scale: 1.04;
    --omniroq-hover-glow-filter: none;
}

/* glow — accent drop-shadow only, no scale */
body.omniroq-hover-glow,
body.omniroq-hover-glow [data-bs-theme] {
    --o-hover-growth: 0px;
    --omniroq-hover-pop-scale: 1.0;
}

/* shadow — neutral dark drop-shadow on ALL interactive elements, no scale */
body.omniroq-hover-shadow,
body.omniroq-hover-shadow [data-bs-theme] {
    --o-hover-growth: 0px;
    --omniroq-hover-pop-scale: 1.0;
    --omniroq-hover-glow-filter: drop-shadow(0 6px 18px rgba(0,0,0,0.60))
                                  drop-shadow(0 2px 8px rgba(0,0,0,0.38));
}

/* pop-shadow — scale + neutral dark drop-shadow */
body.omniroq-hover-pop-shadow,
body.omniroq-hover-pop-shadow [data-bs-theme] {
    --o-hover-growth: 6px;
    --omniroq-hover-pop-scale: 1.03;
    --omniroq-hover-glow-filter: drop-shadow(0 6px 18px rgba(0,0,0,0.60))
                                  drop-shadow(0 2px 8px rgba(0,0,0,0.38));
}

/* pop-glow (default) — inherits :root values; no override needed */

/* ── Universal hover transition ───────────────────────────────────────────
   Applies the same cubic-bezier(.2,.85,.2,1) animation (duration driven by
   --omniroq-hover-transition) to every interactive element across the site.
   Verbose selectors kept for maximum browser compatibility. */
body.omniroq-hover-pop a, body.omniroq-hover-pop button, body.omniroq-hover-pop .btn, body.omniroq-hover-pop .card,
body.omniroq-hover-pop .nav-link, body.omniroq-hover-pop .dropdown-item,
body.omniroq-hover-pop .page-link, body.omniroq-hover-pop .badge,
body.omniroq-hover-pop .settings-nav-item,
body.omniroq-hover-pop .nav-item, body.omniroq-hover-pop .breadcrumb-item, body.omniroq-hover-pop .navbar-brand,
body.omniroq-hover-pop .btn-close, body.omniroq-hover-pop .accordion-button, body.omniroq-hover-pop .form-check-label, body.omniroq-hover-pop .form-check-input,
body.omniroq-hover-pop .carousel-control-prev, body.omniroq-hover-pop .carousel-control-next,
body.omniroq-hover-pop input[type="submit"], body.omniroq-hover-pop input[type="button"], body.omniroq-hover-pop input[type="reset"],
body.omniroq-hover-pop .pagination .page-link, body.omniroq-hover-pop .nav-tabs .nav-link, body.omniroq-hover-pop .nav-pills .nav-link,
body.omniroq-hover-pop .table-hover tbody tr, body.omniroq-hover-pop .alert-dismissible .btn-close,
body.omniroq-hover-pop .form-select, body.omniroq-hover-pop .form-control,
body.omniroq-hover-glow a, body.omniroq-hover-glow button, body.omniroq-hover-glow .btn, body.omniroq-hover-glow .card,
body.omniroq-hover-glow .nav-link, body.omniroq-hover-glow .dropdown-item,
body.omniroq-hover-glow .page-link, body.omniroq-hover-glow .badge,
body.omniroq-hover-glow .settings-nav-item,
body.omniroq-hover-glow .nav-item, body.omniroq-hover-glow .breadcrumb-item, body.omniroq-hover-glow .navbar-brand,
body.omniroq-hover-glow .btn-close, body.omniroq-hover-glow .accordion-button, body.omniroq-hover-glow .form-check-label, body.omniroq-hover-glow .form-check-input,
body.omniroq-hover-glow .carousel-control-prev, body.omniroq-hover-glow .carousel-control-next,
body.omniroq-hover-glow input[type="submit"], body.omniroq-hover-glow input[type="button"], body.omniroq-hover-glow input[type="reset"],
body.omniroq-hover-glow .pagination .page-link, body.omniroq-hover-glow .nav-tabs .nav-link, body.omniroq-hover-glow .nav-pills .nav-link,
body.omniroq-hover-glow .table-hover tbody tr, body.omniroq-hover-glow .alert-dismissible .btn-close,
body.omniroq-hover-glow .form-select, body.omniroq-hover-glow .form-control,
body.omniroq-hover-shadow a, body.omniroq-hover-shadow button, body.omniroq-hover-shadow .btn, body.omniroq-hover-shadow .card,
body.omniroq-hover-shadow .nav-link, body.omniroq-hover-shadow .dropdown-item,
body.omniroq-hover-shadow .page-link, body.omniroq-hover-shadow .badge,
body.omniroq-hover-shadow .settings-nav-item,
body.omniroq-hover-shadow .nav-item, body.omniroq-hover-shadow .breadcrumb-item, body.omniroq-hover-shadow .navbar-brand,
body.omniroq-hover-shadow .btn-close, body.omniroq-hover-shadow .accordion-button, body.omniroq-hover-shadow .form-check-label, body.omniroq-hover-shadow .form-check-input,
body.omniroq-hover-shadow .carousel-control-prev, body.omniroq-hover-shadow .carousel-control-next,
body.omniroq-hover-shadow input[type="submit"], body.omniroq-hover-shadow input[type="button"], body.omniroq-hover-shadow input[type="reset"],
body.omniroq-hover-shadow .pagination .page-link, body.omniroq-hover-shadow .nav-tabs .nav-link, body.omniroq-hover-shadow .nav-pills .nav-link,
body.omniroq-hover-shadow .table-hover tbody tr, body.omniroq-hover-shadow .alert-dismissible .btn-close,
body.omniroq-hover-shadow .form-select, body.omniroq-hover-shadow .form-control,
body.omniroq-hover-pop-shadow a, body.omniroq-hover-pop-shadow button, body.omniroq-hover-pop-shadow .btn, body.omniroq-hover-pop-shadow .card,
body.omniroq-hover-pop-shadow .nav-link, body.omniroq-hover-pop-shadow .dropdown-item,
body.omniroq-hover-pop-shadow .page-link, body.omniroq-hover-pop-shadow .badge,
body.omniroq-hover-pop-shadow .settings-nav-item,
body.omniroq-hover-pop-shadow .nav-item, body.omniroq-hover-pop-shadow .breadcrumb-item, body.omniroq-hover-pop-shadow .navbar-brand,
body.omniroq-hover-pop-shadow .btn-close, body.omniroq-hover-pop-shadow .accordion-button, body.omniroq-hover-pop-shadow .form-check-label, body.omniroq-hover-pop-shadow .form-check-input,
body.omniroq-hover-pop-shadow .carousel-control-prev, body.omniroq-hover-pop-shadow .carousel-control-next,
body.omniroq-hover-pop-shadow input[type="submit"], body.omniroq-hover-pop-shadow input[type="button"], body.omniroq-hover-pop-shadow input[type="reset"],
body.omniroq-hover-pop-shadow .pagination .page-link, body.omniroq-hover-pop-shadow .nav-tabs .nav-link, body.omniroq-hover-pop-shadow .nav-pills .nav-link,
body.omniroq-hover-pop-shadow .table-hover tbody tr, body.omniroq-hover-pop-shadow .alert-dismissible .btn-close,
body.omniroq-hover-pop-shadow .form-select, body.omniroq-hover-pop-shadow .form-control,
body.omniroq-hover-pop-glow a, body.omniroq-hover-pop-glow button, body.omniroq-hover-pop-glow .btn, body.omniroq-hover-pop-glow .card,
body.omniroq-hover-pop-glow .nav-link, body.omniroq-hover-pop-glow .dropdown-item,
body.omniroq-hover-pop-glow .page-link, body.omniroq-hover-pop-glow .badge,
body.omniroq-hover-pop-glow .settings-nav-item,
body.omniroq-hover-pop-glow .nav-item, body.omniroq-hover-pop-glow .breadcrumb-item, body.omniroq-hover-pop-glow .navbar-brand,
body.omniroq-hover-pop-glow .btn-close, body.omniroq-hover-pop-glow .accordion-button, body.omniroq-hover-pop-glow .form-check-label, body.omniroq-hover-pop-glow .form-check-input,
body.omniroq-hover-pop-glow .carousel-control-prev, body.omniroq-hover-pop-glow .carousel-control-next,
body.omniroq-hover-pop-glow input[type="submit"], body.omniroq-hover-pop-glow input[type="button"], body.omniroq-hover-pop-glow input[type="reset"],
body.omniroq-hover-pop-glow .pagination .page-link, body.omniroq-hover-pop-glow .nav-tabs .nav-link, body.omniroq-hover-pop-glow .nav-pills .nav-link,
body.omniroq-hover-pop-glow .table-hover tbody tr, body.omniroq-hover-pop-glow .alert-dismissible .btn-close,
body.omniroq-hover-pop-glow .form-select, body.omniroq-hover-pop-glow .form-control {
    transition: transform       var(--o-dur) var(--o-ease),
                filter          var(--o-dur) var(--o-ease),
                box-shadow      var(--o-dur) var(--o-ease),
                color           var(--o-dur) var(--o-ease),
                background-color var(--o-dur) var(--o-ease),
                border-color    var(--o-dur) var(--o-ease) !important;
}

/* ── Universal hover transform + filter (UNCONDITIONAL) ────────────────────
   Uses CSS variables set by mode blocks — no body class condition needed.
   Applies to ALL interactive elements regardless of what hover mode is active.
   CSS variable values are:
   - body.omniroq-hover-pop: scale 1.04, glow none
   - body.omniroq-hover-glow: scale 1.0, glow accent drop-shadow
   - body.omniroq-hover-shadow: scale 1.0, glow dark drop-shadow
   - body.omniroq-hover-pop-shadow: scale 1.03, glow dark drop-shadow
   - body.omniroq-hover-pop-glow (default): scale 1.02, glow accent drop-shadow (from :root)
   - body.omniroq-hover-none: scale 1.0, glow none (+ transition: none for full kill) */
a:hover, button:hover, .btn:hover,
.nav-link:hover, .dropdown-item:hover,
.page-link:hover, .badge:hover,
.settings-nav-item:hover,
.nav-item:hover, .breadcrumb-item:hover, .navbar-brand:hover,
.btn-close:hover, .accordion-button:hover, .form-check-label:hover, .form-check-input:hover,
.carousel-control-prev:hover, .carousel-control-next:hover,
input[type="submit"]:hover, input[type="button"]:hover, input[type="reset"]:hover,
.pagination .page-link:hover, .nav-tabs .nav-link:hover, .nav-pills .nav-link:hover,
.alert-dismissible .btn-close:hover,
.form-select:hover, .form-control:hover, .cs-trigger:hover, .cs-trigger:focus,
.dropdown-menu .dropdown-item:hover, .dropdown-menu .dropdown-item:focus,
.navbar .dropdown-menu .dropdown-item:hover, .navbar .dropdown-menu .dropdown-item:focus,
.cs-option:hover, .cs-option:focus, .cs-multi-option:hover, .cs-multi-option:focus {
    transform: scale(var(--omniroq-hover-pop-scale)) !important;
    filter: var(--omniroq-hover-glow-filter) !important;
}

/* None — kill transitions and hard-reset all hover state */
body.omniroq-hover-none a, body.omniroq-hover-none button, body.omniroq-hover-none .btn, body.omniroq-hover-none .card,
body.omniroq-hover-none .nav-link, body.omniroq-hover-none .dropdown-item,
body.omniroq-hover-none .page-link, body.omniroq-hover-none .badge,
body.omniroq-hover-none .settings-nav-item,
body.omniroq-hover-none .nav-item, body.omniroq-hover-none .breadcrumb-item, body.omniroq-hover-none .navbar-brand,
body.omniroq-hover-none .btn-close, body.omniroq-hover-none .accordion-button, body.omniroq-hover-none .form-check-label, body.omniroq-hover-none .form-check-input,
body.omniroq-hover-none .carousel-control-prev, body.omniroq-hover-none .carousel-control-next,
body.omniroq-hover-none input[type="submit"], body.omniroq-hover-none input[type="button"], body.omniroq-hover-none input[type="reset"],
body.omniroq-hover-none .pagination .page-link, body.omniroq-hover-none .nav-tabs .nav-link, body.omniroq-hover-none .nav-pills .nav-link,
body.omniroq-hover-none .table-hover tbody tr, body.omniroq-hover-none .alert-dismissible .btn-close,
body.omniroq-hover-none .form-select, body.omniroq-hover-none .form-control {
    transition: none !important;
}
body.omniroq-hover-none a:hover, body.omniroq-hover-none button:hover, body.omniroq-hover-none .btn:hover, body.omniroq-hover-none .card:hover,
body.omniroq-hover-none .nav-link:hover, body.omniroq-hover-none .dropdown-item:hover,
body.omniroq-hover-none .page-link:hover, body.omniroq-hover-none .badge:hover,
body.omniroq-hover-none .settings-nav-item:hover,
body.omniroq-hover-none .nav-item:hover, body.omniroq-hover-none .breadcrumb-item:hover, body.omniroq-hover-none .navbar-brand:hover,
body.omniroq-hover-none .btn-close:hover, body.omniroq-hover-none .accordion-button:hover, body.omniroq-hover-none .form-check-label:hover, body.omniroq-hover-none .form-check-input:hover,
body.omniroq-hover-none .carousel-control-prev:hover, body.omniroq-hover-none .carousel-control-next:hover,
body.omniroq-hover-none input[type="submit"]:hover, body.omniroq-hover-none input[type="button"]:hover, body.omniroq-hover-none input[type="reset"]:hover,
body.omniroq-hover-none .pagination .page-link:hover, body.omniroq-hover-none .nav-tabs .nav-link:hover, body.omniroq-hover-none .nav-pills .nav-link:hover,
body.omniroq-hover-none .table-hover tbody tr:hover, body.omniroq-hover-none .alert-dismissible .btn-close:hover,
body.omniroq-hover-none .form-select:hover, body.omniroq-hover-none .form-control:hover {
    transform: none !important;
    filter: none !important;
    box-shadow: inherit !important;
}

/* ── Animation speed ─────────────────────────────────────── */
/* CSS variable drives the universal transition block so all explicitly
   listed interactive elements animate at the chosen speed with
   cubic-bezier(.2,.85,.2,1). Speed "none" also uses a wildcard
   (see below) to kill all remaining transitions site-wide. */
:root                       { --omniroq-hover-transition: 1s; }
body.omniroq-speed-none     { --omniroq-hover-transition: 0s; }
body.omniroq-speed-fast     { --omniroq-hover-transition: 0.5s; }
body.omniroq-speed-slow     { --omniroq-hover-transition: 2s; }
/* --o-dur is declared on :root as var(--omniroq-hover-transition), and a custom
   property resolves where it is declared: on :root, before body's speed class
   above has set anything. So "fast", "slow" and "none" never reached the 161
   rules that time themselves with --o-dur, and everything ran at one second.
   Re-declared on body, it resolves after the speed class. (Fixed 2026-10-01,
   for both interfaces.) */
body { --o-dur: var(--omniroq-hover-transition, 1s); }

/* Speed "none" kills ALL transitions and animations site-wide for a truly
   instant UI. The normal/fast/slow speeds are driven purely by the
   --omniroq-hover-transition CSS variable used in the transition block above,
   so no wildcard is needed for those speeds. */
body.omniroq-speed-none * { transition-duration: 0s !important; animation-duration: 0s !important; transition-delay: 0s !important; }

/* ── Button & interactive element transitions ────────────────────────
   Apply smooth transitions to buttons and interactive elements based on
   the animation speed setting (--omniroq-hover-transition). */
button, .btn, input[type="submit"], input[type="button"], input[type="reset"],
.btn-close, .accordion-button, .form-check-label, .form-check-input, .form-select, .form-control,
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="date"], input[type="time"], textarea, select {
    transition: transform var(--o-dur) var(--o-ease),
                filter var(--o-dur) var(--o-ease),
                color var(--o-dur) var(--o-ease),
                background-color var(--o-dur) var(--o-ease),
                border-color var(--o-dur) var(--o-ease),
                box-shadow var(--o-dur) var(--o-ease),
                opacity var(--o-dur) var(--o-ease) !important;
}

/* ── Button and interactive transitions ────────────────────────────
   Override Bootstrap defaults to respect animation speed setting. */
.btn, button, input[type="button"], input[type="submit"], input[type="reset"],
.btn-close, .accordion-button, .form-check-label, .form-check-input,
.form-select, .form-control, input[type="text"], input[type="email"],
input[type="password"], input[type="number"], input[type="date"],
input[type="time"], textarea, select, a, .nav-link, .dropdown-item {
    transition: all var(--o-dur) var(--o-ease) !important;
}

/* Ensure button glows appear above navbar */
.btn:hover, button:hover, input[type="button"]:hover, input[type="submit"]:hover,
input[type="reset"]:hover, .btn-close:hover, .accordion-button:hover,
.form-check-label:hover, .form-check-input:hover, .form-select:hover,
.form-control:hover, a:hover, .nav-link:hover, .dropdown-item:hover {
    position: relative !important;
    z-index: 1050 !important;
}

/* Keep deliberately-positioned interactive elements anchored on hover.
   The z-index bump above forces position:relative, which would pull
   absolutely/fixed-positioned buttons (e.g. the account-sidebar close-x) out
   of place — the element jumps away from the cursor, un-hovers, snaps back,
   and flickers. Re-asserting the positioning keeps the glow/z-index intent
   while holding the element still. */
button.position-absolute:hover, .btn.position-absolute:hover,
a.position-absolute:hover, .toast-close-x.position-absolute:hover {
    position: absolute !important;
}
button.position-fixed:hover, .btn.position-fixed:hover, a.position-fixed:hover {
    position: fixed !important;
}

/* Speed "none" – kill all transitions */
body.omniroq-speed-none .btn, body.omniroq-speed-none button,
body.omniroq-speed-none input[type="button"], body.omniroq-speed-none input[type="submit"],
body.omniroq-speed-none input[type="reset"], body.omniroq-speed-none .btn-close,
body.omniroq-speed-none .form-check-label, body.omniroq-speed-none .form-check-input,
body.omniroq-speed-none .form-select, body.omniroq-speed-none .form-control {
    transition: none !important;
}

/* ── Section spacing ─────────────────────────────────────── */
body.omniroq-spacing-compact .card,
body.omniroq-spacing-compact .settings-card { margin-bottom: 0.3rem !important; }
body.omniroq-spacing-compact .row { row-gap: 0 !important; }
body.omniroq-spacing-normal .card,
body.omniroq-spacing-normal .settings-card { margin-bottom: 1rem !important; }
body.omniroq-spacing-spacious .card,
body.omniroq-spacing-spacious .settings-card { margin-bottom: 2.5rem !important; }
body.omniroq-spacing-spacious .row { row-gap: 1.5rem !important; }
body.omniroq-spacing-spacious .container-fluid { padding-top: 1rem; padding-bottom: 1rem; }

/* ── Navbar menu alignment ───────────────────────────────── */
/* Aligns the top navigation links (CRM, Finance, Sales, etc.) within the navbar.
   Bootstrap's me-auto class on .navbar-nav normally left-aligns items;
   we override the margin to reposition within the available flex space. */
body.omniroq-navmenu-start #omniroq-main-navbar .navbar-nav {
    margin-left: 0 !important;
    margin-right: auto !important;
}
body.omniroq-navmenu-center #omniroq-main-navbar .navbar-nav {
    margin-left: auto !important;
    margin-right: auto !important;
}
body.omniroq-navmenu-end #omniroq-main-navbar .navbar-nav {
    margin-left: auto !important;
    margin-right: 0 !important;
}

/* ── Animations disabled ─────────────────────────────────── */
body.omniroq-anim-disabled *,
body.omniroq-anim-disabled *::before,
body.omniroq-anim-disabled *::after {
    animation-duration: 0s !important;
    animation-delay: 0s !important;
    transition-duration: 0s !important;
    transition-delay: 0s !important;
}
/* Also kill hover effects entirely — same as omniroq-hover-none */
body.omniroq-anim-disabled a:hover, body.omniroq-anim-disabled button:hover,
body.omniroq-anim-disabled .btn:hover, body.omniroq-anim-disabled .card:hover,
body.omniroq-anim-disabled .nav-link:hover, body.omniroq-anim-disabled .dropdown-item:hover,
body.omniroq-anim-disabled .list-group-item:hover, body.omniroq-anim-disabled .page-link:hover,
body.omniroq-anim-disabled .badge:hover, body.omniroq-anim-disabled tr:hover,
body.omniroq-anim-disabled .nav-item:hover, body.omniroq-anim-disabled .breadcrumb-item:hover,
body.omniroq-anim-disabled .navbar-brand:hover, body.omniroq-anim-disabled .btn-close:hover,
body.omniroq-anim-disabled .accordion-button:hover, body.omniroq-anim-disabled .form-check-label:hover,
body.omniroq-anim-disabled .carousel-control-prev:hover, body.omniroq-anim-disabled .carousel-control-next:hover,
body.omniroq-anim-disabled input[type="submit"]:hover, body.omniroq-anim-disabled input[type="button"]:hover,
body.omniroq-anim-disabled input[type="reset"]:hover,
body.omniroq-anim-disabled .pagination .page-link:hover,
body.omniroq-anim-disabled .form-select:hover, body.omniroq-anim-disabled .form-control:hover,
body.omniroq-anim-disabled .cs-trigger:hover, body.omniroq-anim-disabled .cs-trigger:focus,
body.omniroq-anim-disabled .dropdown-menu .dropdown-item:hover,
body.omniroq-anim-disabled .navbar .dropdown-menu .dropdown-item:hover,
body.omniroq-anim-disabled .cs-option:hover, body.omniroq-anim-disabled .cs-option:focus,
body.omniroq-anim-disabled .cs-multi-option:hover, body.omniroq-anim-disabled .cs-multi-option:focus,
body.omniroq-anim-disabled .settings-nav-item:hover,
body.omniroq-anim-disabled .apf-lock:hover,
body.omniroq-anim-disabled .form-switch:hover {
    transform: none !important;
    filter: none !important;
}

/* ── Table density ───────────────────────────────────────── */
body.omniroq-table-compact td,
body.omniroq-table-compact th {
    padding: 0.2rem 0.5rem !important;
}
body.omniroq-table-compact .table > :not(caption) > * > * {
    padding: 0.2rem 0.5rem !important;
}
body.omniroq-table-spacious td,
body.omniroq-table-spacious th {
    padding: 0.75rem 1.25rem !important;
}
body.omniroq-table-spacious .table > :not(caption) > * > * {
    padding: 0.75rem 1.25rem !important;
}

/* ── Card style ──────────────────────────────────────────────────────────
   Each variant has a distinct visual identity. IMPORTANT architecture note:
   the Shadow-Intensity setting always sets --omniroq-card-shadow on <body>
   (default = normal), so a `var(--omniroq-card-shadow, X)` FALLBACK never
   fires. Styles whose identity is the *ambient* shadow simply read the var
   and therefore track the user's shadow-intensity choice. Styles whose
   identity REQUIRES a specific shadow (Elevated) set box-shadow explicitly so
   they stay recognisable regardless of the global shadow-intensity setting.
   ─────────────────────────────────────────────────────────────────────── */

/* Outline (DEFAULT) — standard accent border over a transparent surface.
   This is the baseline; leave it as the plain "bordered card" reference. */
body.omniroq-card-outline .card {
    border: 2px solid rgba(var(--omniroq-accent-rgb, 120,194,173), 0.70) !important;
    background: transparent !important;
    box-shadow: var(--omniroq-card-shadow, none) !important;
}
body.omniroq-card-outline.omniroq-light-theme .card {
    border: 2px solid rgba(var(--omniroq-accent-rgb, 120,194,173), 0.65) !important;
    background: rgba(255,255,255,0.75) !important;
}

/* Filled — the card surface itself IS the accent colour (solid fill).
   The baseline rule `.container-fluid.mt-3.px-3 .card.bg-dark { ... !important }`
   has specificity (0,5,0) — 5 classes. To beat it (not just match it) the
   override below repeats `.omniroq-card-filled` so the body selector alone
   already contributes 2 classes, landing at (0,5,1)/(0,5,2) once combined
   with `.container-fluid .card.bg-dark` / `.container-fluid a.card.bg-dark`.
   This is the standard "duplicate the class" specificity-boost technique. */
body.omniroq-card-filled .card,
body.omniroq-card-filled.omniroq-card-filled .container-fluid .card.bg-dark,
body.omniroq-card-filled.omniroq-card-filled .container-fluid a.card.bg-dark {
    background: var(--omniroq-accent, #78c2ad) !important;
    border: none !important;
    box-shadow: var(--omniroq-card-shadow, none) !important;
}
body.omniroq-card-filled.omniroq-light-theme .card,
body.omniroq-card-filled.omniroq-card-filled.omniroq-light-theme .container-fluid .card.bg-dark,
body.omniroq-card-filled.omniroq-card-filled.omniroq-light-theme .container-fluid a.card.bg-dark {
    background: var(--omniroq-accent, #78c2ad) !important;
    border: none !important;
}
/* The card body copy (`text-light`/`text-secondary`/`text-muted`) was authored for the
   old dark fill and goes near-invisible on a light accent colour. `--omniroq-accent-contrast`
   is computed at runtime (base.html) as whichever of dark/light ink has the better contrast
   ratio against the user's chosen accent, so this stays readable for any accent they pick.
   The whole app runs with `data-bs-theme="dark"` on <body>, so a generic
   `[data-bs-theme="dark"] *` guard would (wrongly) match everything; `.table *` is the
   actual nested dark "island" here — Bootstrap tables paint their own `--bs-table-bg`
   surface (e.g. Recent Transactions forces `table-dark`), and that copy already reads
   fine against its own dark backdrop, so we leave it alone. */
body.omniroq-card-filled .card.bg-dark:not(.table):not(.table *),
body.omniroq-card-filled .card.bg-dark .card-body:not(.table):not(.table *),
body.omniroq-card-filled .card.bg-dark .text-light:not(.table):not(.table *),
body.omniroq-card-filled .card.bg-dark h1:not(.table *),
body.omniroq-card-filled .card.bg-dark h2:not(.table *),
body.omniroq-card-filled .card.bg-dark h3:not(.table *),
body.omniroq-card-filled .card.bg-dark h4:not(.table *),
body.omniroq-card-filled .card.bg-dark h5:not(.table *),
body.omniroq-card-filled .card.bg-dark h6:not(.table *) {
    color: var(--omniroq-accent-contrast, #1f2328) !important;
}
body.omniroq-card-filled .card.bg-dark .text-secondary:not(.table):not(.table *),
body.omniroq-card-filled .card.bg-dark .text-muted:not(.table):not(.table *) {
    color: rgba(var(--omniroq-accent-contrast-rgb, 31, 35, 40), 0.65) !important;
}
/* Stat-card accent icons (`rounded-circle bg-{success|danger|primary} bg-opacity-25`
   wrapping a `text-{…}` icon) are tuned for the old dark fill — both the translucent
   disc and the icon's semantic colour wash out against the accent background. Re-ink
   both with the same adaptive contrast colour so the icon stays visible no matter
   which accent the user picks; the disc becomes a soft "frosted" badge behind it. */
body.omniroq-card-filled .card.bg-dark .rounded-circle[class*="bg-opacity-"]:not(.table *) {
    background-color: rgba(var(--omniroq-accent-contrast-rgb, 31, 35, 40), 0.16) !important;
}
body.omniroq-card-filled .card.bg-dark .rounded-circle [class*="text-"]:not(.table *) {
    color: var(--omniroq-accent-contrast, #1f2328) !important;
}

/* `.text-primary` and `.bg-primary` are BOTH remapped to the user's chosen accent
   colour (see the `.text-primary`/`.bg-primary` overrides in base.html), so a
   `rounded-circle bg-primary bg-opacity-25` badge wrapping a `text-primary` icon
   paints the glyph in the *exact same* solid colour as its own backdrop — a
   perfect 1:1 collision that erases the icon in every card style except "Filled"
   (already handled above, where the whole disc gets re-inked). Re-ink just the
   glyph with the same adaptive contrast colour so it reads clearly against the
   solid accent disc, no matter which accent the user picks. */
.rounded-circle.bg-primary[class*="bg-opacity-"] .text-primary {
    color: var(--omniroq-accent-contrast, #1f2328) !important;
}

/* Elevated — clearly lifted off the page with a large, soft drop shadow.
   Shadow is set EXPLICITLY (not via the intensity var) so the card always
   reads as raised; values are tuned separately for dark and light themes. */
body.omniroq-card-elevated .card,
body.omniroq-card-elevated.omniroq-card-elevated .container-fluid .card.bg-dark,
body.omniroq-card-elevated.omniroq-card-elevated .container-fluid a.card.bg-dark {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 18px 42px rgba(0,0,0,0.62), 0 6px 16px rgba(0,0,0,0.45) !important;
}
body.omniroq-card-elevated.omniroq-light-theme .card,
body.omniroq-card-elevated.omniroq-card-elevated.omniroq-light-theme .container-fluid .card.bg-dark,
body.omniroq-card-elevated.omniroq-card-elevated.omniroq-light-theme .container-fluid a.card.bg-dark {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    box-shadow: 0 18px 38px rgba(15,23,42,0.20), 0 6px 14px rgba(15,23,42,0.12) !important;
}

/* Glass — frosted glassmorphism: fully transparent surface (content behind
   shows through blurred) with the same soft border the style had before. */
body.omniroq-card-glass .card,
body.omniroq-card-glass.omniroq-card-glass .container-fluid .card.bg-dark,
body.omniroq-card-glass.omniroq-card-glass .container-fluid a.card.bg-dark {
    background: transparent !important;
    backdrop-filter: blur(16px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    box-shadow: var(--omniroq-card-shadow, 0 8px 32px rgba(0,0,0,0.35)) !important;
}
body.omniroq-card-glass.omniroq-light-theme .card,
body.omniroq-card-glass.omniroq-card-glass.omniroq-light-theme .container-fluid .card.bg-dark,
body.omniroq-card-glass.omniroq-card-glass.omniroq-light-theme .container-fluid a.card.bg-dark {
    background: transparent !important;
    backdrop-filter: blur(14px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(160%) !important;
    border: 1px solid rgba(255, 255, 255, 0.70) !important;
}

/* Gradient — true two-colour diagonal gradient that runs from the accent
   colour into the page's actual current background colour, so it always
   blends naturally with whatever theme/background is active. */
body.omniroq-card-gradient .card,
body.omniroq-card-gradient.omniroq-card-gradient .container-fluid .card.bg-dark,
body.omniroq-card-gradient.omniroq-card-gradient .container-fluid a.card.bg-dark {
    background: linear-gradient(135deg,
        rgba(var(--omniroq-accent-rgb, 120,194,173), 0.85) 0%,
        var(--bs-body-bg, #0b0f14) 100%) !important;
    border: 1px solid rgba(var(--omniroq-accent-rgb, 120,194,173), 0.45) !important;
    box-shadow: var(--omniroq-card-shadow, none) !important;
}
body.omniroq-card-gradient.omniroq-light-theme .card,
body.omniroq-card-gradient.omniroq-card-gradient.omniroq-light-theme .container-fluid .card.bg-dark,
body.omniroq-card-gradient.omniroq-card-gradient.omniroq-light-theme .container-fluid a.card.bg-dark {
    background: linear-gradient(135deg,
        rgba(var(--omniroq-accent-rgb, 120,194,173), 0.65) 0%,
        var(--bs-body-bg, #ffffff) 100%) !important;
    border: 1px solid rgba(var(--omniroq-accent-rgb, 120,194,173), 0.40) !important;
}

/* Flat — completely minimal; no borders, no background, no shadow. */
body.omniroq-card-flat .card,
body.omniroq-card-flat.omniroq-card-flat .container-fluid .card.bg-dark,
body.omniroq-card-flat.omniroq-card-flat .container-fluid a.card.bg-dark {
    box-shadow: none !important;
    border: none !important;
    background: transparent !important;
}

/* Bordered — strong border-focused identity: a thick, full-opacity accent
   frame plus an inset hairline and outer accent glow give a "double border"
   feel that is unmistakably heavier than Outline's single thin border.
   NOTE: `.notification-dropdown-item` is reused as a generic hover-glow base
   class far beyond the actual notification dropdown — detail-page info cells,
   comment/history timeline entries, custom-field cards, etc. all carry it.
   Scoping to `.notification-dropdown .notification-dropdown-item` (the same
   scoping already used elsewhere for this class, e.g. around line 5212) keeps
   the bordered treatment on the real notification panel only, instead of
   slapping a thick accent frame on every detail-page field box in the app. */
body.omniroq-card-bordered .card,
body.omniroq-card-bordered .notification-dropdown .notification-dropdown-item,
body.omniroq-card-bordered.omniroq-card-bordered .container-fluid .card.bg-dark,
body.omniroq-card-bordered.omniroq-card-bordered .container-fluid a.card.bg-dark {
    border: 3px solid var(--omniroq-accent, #78c2ad) !important;
    background: rgba(var(--omniroq-accent-rgb, 120,194,173), 0.07) !important;
    box-shadow: inset 0 0 0 1px rgba(var(--omniroq-accent-rgb, 120,194,173), 0.35),
                0 0 0 1px rgba(var(--omniroq-accent-rgb, 120,194,173), 0.20) !important;
}
body.omniroq-card-bordered.omniroq-light-theme .card,
body.omniroq-card-bordered.omniroq-card-bordered.omniroq-light-theme .container-fluid .card.bg-dark,
body.omniroq-card-bordered.omniroq-card-bordered.omniroq-light-theme .container-fluid a.card.bg-dark {
    border: 3px solid var(--omniroq-accent, #78c2ad) !important;
    background: rgba(var(--omniroq-accent-rgb, 120,194,173), 0.05) !important;
}

/* ── Input style ─────────────────────────────────────────── */
/* Seven styles mirroring the card-style / button-style set.
   Outline is the account default. Each style targets .form-control
   and .form-select; Bootstrap native applies when no class is set. */

/* ── Outline (default) — same dark body-bg surface as Bootstrap's default
   dark input, distinguished by a prominent accent border. var(--bs-body-bg)
   resolves correctly inside the element's own data-bs-theme="dark" scope,
   producing the same solid dark shade as unoverridden form controls. */
body.omniroq-input-outline .form-control,
body.omniroq-input-outline .form-select {
    background-color: var(--bs-body-bg) !important;
    border: 2px solid rgba(var(--omniroq-accent-rgb, 120,194,173), 0.65) !important;
}
body.omniroq-input-outline .form-control:focus,
body.omniroq-input-outline .form-select:focus {
    background-color: var(--bs-body-bg) !important;
    border-color: var(--omniroq-accent, #78c2ad) !important;
    box-shadow: 0 0 0 0.2rem rgba(var(--omniroq-accent-rgb, 120,194,173), 0.20) !important;
}

/* ── Filled — solid accent fill + contrast text, matching the Filled button */
body.omniroq-input-filled .form-control,
body.omniroq-input-filled .form-select {
    background-color: var(--omniroq-accent, #78c2ad) !important;
    border-color: var(--omniroq-accent, #78c2ad) !important;
    color: var(--omniroq-accent-contrast, #1f2328) !important;
}
body.omniroq-input-filled .form-control::placeholder {
    color: color-mix(in srgb, var(--omniroq-accent-contrast, #1f2328) 55%, transparent) !important;
}
body.omniroq-input-filled .form-control:focus,
body.omniroq-input-filled .form-select:focus {
    background-color: color-mix(in srgb, var(--omniroq-accent, #78c2ad) 82%, #000) !important;
    border-color: color-mix(in srgb, var(--omniroq-accent, #78c2ad) 82%, #000) !important;
    color: var(--omniroq-accent-contrast, #1f2328) !important;
    box-shadow: 0 0 0 0.2rem rgba(var(--omniroq-accent-rgb, 120,194,173), 0.35) !important;
}

/* ── Elevated — rgba(255,255,255,0.08) lifted surface + heavy shadow,
   mirroring the Elevated card values scaled to input size */
body.omniroq-input-elevated .form-control,
body.omniroq-input-elevated .form-select {
    background-color: rgba(255,255,255,0.08) !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.50), 0 1px 4px rgba(0,0,0,0.30) !important;
}
body.omniroq-input-elevated.omniroq-light-theme .form-control,
body.omniroq-input-elevated.omniroq-light-theme .form-select {
    background-color: #ffffff !important;
    border: 1px solid rgba(0,0,0,0.08) !important;
    box-shadow: 0 4px 12px rgba(15,23,42,0.16), 0 1px 4px rgba(15,23,42,0.10) !important;
}
body.omniroq-input-elevated .form-control:focus,
body.omniroq-input-elevated .form-select:focus {
    border-color: var(--omniroq-accent, #78c2ad) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.50),
                0 0 0 0.2rem rgba(var(--omniroq-accent-rgb, 120,194,173), 0.22) !important;
}

/* ── Glass — frosted semi-transparent, matching the Glass card/button */
body.omniroq-input-glass .form-control,
body.omniroq-input-glass .form-select {
    background-color: rgba(var(--omniroq-accent-rgb, 120,194,173), 0.07) !important;
    border: 1px solid rgba(var(--omniroq-accent-rgb, 120,194,173), 0.28) !important;
    backdrop-filter: blur(8px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(8px) saturate(160%) !important;
}
body.omniroq-input-glass.omniroq-light-theme .form-control,
body.omniroq-input-glass.omniroq-light-theme .form-select {
    background-color: rgba(var(--omniroq-accent-rgb, 120,194,173), 0.05) !important;
    border: 1px solid rgba(var(--omniroq-accent-rgb, 120,194,173), 0.25) !important;
}
body.omniroq-input-glass .form-control:focus,
body.omniroq-input-glass .form-select:focus {
    background-color: rgba(var(--omniroq-accent-rgb, 120,194,173), 0.12) !important;
    border-color: rgba(var(--omniroq-accent-rgb, 120,194,173), 0.65) !important;
    box-shadow: 0 0 0 0.2rem rgba(var(--omniroq-accent-rgb, 120,194,173), 0.18) !important;
}

/* ── Gradient — diagonal accent-to-transparent tint, matching Gradient card */
body.omniroq-input-gradient .form-control,
body.omniroq-input-gradient .form-select {
    background: linear-gradient(135deg,
        rgba(var(--omniroq-accent-rgb, 120,194,173), 0.14) 0%,
        rgba(var(--omniroq-accent-rgb, 120,194,173), 0.03) 100%) !important;
    border: 1px solid rgba(var(--omniroq-accent-rgb, 120,194,173), 0.30) !important;
}
body.omniroq-input-gradient.omniroq-light-theme .form-control,
body.omniroq-input-gradient.omniroq-light-theme .form-select {
    background: linear-gradient(135deg,
        rgba(var(--omniroq-accent-rgb, 120,194,173), 0.10) 0%,
        rgba(var(--omniroq-accent-rgb, 120,194,173), 0.02) 100%) !important;
}
body.omniroq-input-gradient .form-control:focus,
body.omniroq-input-gradient .form-select:focus {
    background: linear-gradient(135deg,
        rgba(var(--omniroq-accent-rgb, 120,194,173), 0.22) 0%,
        rgba(var(--omniroq-accent-rgb, 120,194,173), 0.07) 100%) !important;
    border-color: var(--omniroq-accent, #78c2ad) !important;
    box-shadow: 0 0 0 0.2rem rgba(var(--omniroq-accent-rgb, 120,194,173), 0.18) !important;
}

/* ── Flat — accent tint fill, no border (matches Flat card/button) */
body.omniroq-input-flat .form-control,
body.omniroq-input-flat .form-select {
    background-color: rgba(var(--omniroq-accent-rgb, 120,194,173), 0.09) !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
}
body.omniroq-input-flat.omniroq-light-theme .form-control,
body.omniroq-input-flat.omniroq-light-theme .form-select {
    background-color: rgba(var(--omniroq-accent-rgb, 120,194,173), 0.07) !important;
}
body.omniroq-input-flat .form-control:focus,
body.omniroq-input-flat .form-select:focus {
    background-color: rgba(var(--omniroq-accent-rgb, 120,194,173), 0.16) !important;
    border-color: var(--omniroq-accent, #78c2ad) !important;
    box-shadow: none !important;
}

/* ── Bordered — 2px accent border + faint tint + inner glow,
   matching the Bordered card/button double-frame treatment */
body.omniroq-input-bordered .form-control,
body.omniroq-input-bordered .form-select {
    background-color: rgba(var(--omniroq-accent-rgb, 120,194,173), 0.05) !important;
    border: 2px solid var(--omniroq-accent, #78c2ad) !important;
    box-shadow: inset 0 0 0 1px rgba(var(--omniroq-accent-rgb, 120,194,173), 0.15),
                0 0 0 1px rgba(var(--omniroq-accent-rgb, 120,194,173), 0.08) !important;
}
body.omniroq-input-bordered.omniroq-light-theme .form-control,
body.omniroq-input-bordered.omniroq-light-theme .form-select {
    background-color: rgba(var(--omniroq-accent-rgb, 120,194,173), 0.04) !important;
}
body.omniroq-input-bordered .form-control:focus,
body.omniroq-input-bordered .form-select:focus {
    border-color: var(--omniroq-accent, #78c2ad) !important;
    box-shadow: inset 0 0 0 1px rgba(var(--omniroq-accent-rgb, 120,194,173), 0.25),
                0 0 0 0.25rem rgba(var(--omniroq-accent-rgb, 120,194,173), 0.22) !important;
}

/* ── Card & Layout border radius ─────────────────────────── */
/* Controls corner rounding for cards, modals, dropdowns, inputs, and badges.
   Button corners are controlled separately by the Button Shape setting. */
body.omniroq-radius-sharp .card,
body.omniroq-radius-sharp .form-control,
body.omniroq-radius-sharp .form-select,
body.omniroq-radius-sharp .badge,
body.omniroq-radius-sharp .modal-content,
body.omniroq-radius-sharp .dropdown-menu,
body.omniroq-radius-sharp .input-group > * {
    border-radius: 0 !important;
}
body.omniroq-radius-subtle .card,
body.omniroq-radius-subtle .form-control,
body.omniroq-radius-subtle .form-select,
body.omniroq-radius-subtle .badge,
body.omniroq-radius-subtle .modal-content,
body.omniroq-radius-subtle .dropdown-menu {
    border-radius: 4px !important;
}
body.omniroq-radius-rounded .card,
body.omniroq-radius-rounded .form-control,
body.omniroq-radius-rounded .form-select,
body.omniroq-radius-rounded .badge,
body.omniroq-radius-rounded .modal-content,
body.omniroq-radius-rounded .dropdown-menu {
    border-radius: 8px !important;
}
body.omniroq-radius-pill .badge {
    border-radius: 50rem !important;
}
body.omniroq-radius-pill .form-control,
body.omniroq-radius-pill .form-select {
    border-radius: 16px !important;
}
body.omniroq-radius-pill .card,
body.omniroq-radius-pill .modal-content,
body.omniroq-radius-pill .dropdown-menu {
    border-radius: 16px !important;
}

/* ── Navbar layout ───────────────────────────────────────── */

/* ── Top modes: compact ─────────────────────────────────── */
body.omniroq-navbar-top_compact #omniroq-main-navbar {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    min-height: 40px;
}
body.omniroq-navbar-top_compact #omniroq-main-navbar .navbar-brand {
    padding-top: 0.2rem !important;
    padding-bottom: 0.2rem !important;
}
body.omniroq-navbar-top_compact #omniroq-main-navbar .navbar-nav .nav-link {
    padding: 0.2rem 0.45rem !important;
    font-size: 0.8rem !important;
    letter-spacing: -0.01em;
}

/* ── Top modes: icons only ──────────────────────────────── */
body.omniroq-navbar-top_icons #omniroq-main-navbar .navbar-nav .nav-link {
    font-size: 0 !important;
    padding-left: 0.45rem !important;
    padding-right: 0.45rem !important;
    position: relative;
}
body.omniroq-navbar-top_icons #omniroq-main-navbar .navbar-nav .nav-link i {
    font-size: 1.15rem !important;
    margin-right: 0 !important;
}
body.omniroq-navbar-top_icons #omniroq-main-navbar .navbar-nav .nav-link.dropdown-toggle::after {
    display: none !important;
}
/* Top-icons labels use the shared Bootstrap tooltip styling/JS so they match sidebar and sitewide tooltips. */

/* ── Top modes: wrap the MENU onto a second row instead of overflowing ──
   Keep the outer row (brand | menu | icons) on a single line so their
   alignment is preserved; only the list of links wraps when it runs out of
   width, growing the navbar's height. */
body.omniroq-navbar-top #omniroq-main-navbar,
body.omniroq-navbar-top #omniroq-main-navbar > .container-fluid,
body.omniroq-navbar-top_compact #omniroq-main-navbar,
body.omniroq-navbar-top_compact #omniroq-main-navbar > .container-fluid,
body.omniroq-navbar-top_icons #omniroq-main-navbar,
body.omniroq-navbar-top_icons #omniroq-main-navbar > .container-fluid {
    flex-wrap: nowrap !important;
    align-items: center;
}
/* The collapse holds the menu — let it shrink so the menu wraps (not overflow). */
body.omniroq-navbar-top #omniroq-main-navbar .navbar-collapse,
body.omniroq-navbar-top_compact #omniroq-main-navbar .navbar-collapse,
body.omniroq-navbar-top_icons #omniroq-main-navbar .navbar-collapse {
    flex: 1 1 auto !important;
    min-width: 0;
}
/* Only the link list wraps onto additional rows. */
body.omniroq-navbar-top #omniroq-main-navbar .navbar-nav,
body.omniroq-navbar-top_compact #omniroq-main-navbar .navbar-nav,
body.omniroq-navbar-top_icons #omniroq-main-navbar .navbar-nav {
    flex-wrap: wrap !important;
    row-gap: 2px;
    min-width: 0;
}

/* ── Top modes: brand (logo + wordmark) fills its area, centred, slight padding ── */
body.omniroq-navbar-top #omniroq-main-navbar .navbar-brand,
body.omniroq-navbar-top_compact #omniroq-main-navbar .navbar-brand,
body.omniroq-navbar-top_icons #omniroq-main-navbar .navbar-brand {
    display: flex;
    align-items: center;
    align-self: stretch;          /* span the navbar height; lockup centres within */
    padding: 4px 10px 4px 0;
    flex-shrink: 0;
}
body.omniroq-navbar-top #omniroq-main-navbar .navbar-brand .omniroq-brand-lockup,
body.omniroq-navbar-top_compact #omniroq-main-navbar .navbar-brand .omniroq-brand-lockup,
body.omniroq-navbar-top_icons #omniroq-main-navbar .navbar-brand .omniroq-brand-lockup {
    height: 100%;
    align-items: center;
}
body.omniroq-navbar-top #omniroq-main-navbar .navbar-brand .omniroq-brand-icon,
body.omniroq-navbar-top_icons #omniroq-main-navbar .navbar-brand .omniroq-brand-icon {
    height: 36px !important;
}
body.omniroq-navbar-top #omniroq-main-navbar .navbar-brand .omniroq-wordmark,
body.omniroq-navbar-top_icons #omniroq-main-navbar .navbar-brand .omniroq-wordmark {
    font-size: 1.3rem !important;
}
/* Compact mode keeps the brand a touch smaller to match the denser bar */
body.omniroq-navbar-top_compact #omniroq-main-navbar .navbar-brand .omniroq-brand-icon {
    height: 28px !important;
}
body.omniroq-navbar-top_compact #omniroq-main-navbar .navbar-brand .omniroq-brand-lockup {
    --omniroq-brand-h: 24px !important;
}
body.omniroq-navbar-top_compact #omniroq-main-navbar .navbar-brand .omniroq-wordmark {
    font-size: 1.12rem !important;
}

/* ── Left sidebar: shared base ──────────────────────────── */
#omniroq-left-sidebar {
    display: none; /* hidden in top modes */
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    width: 230px;
    flex-direction: column;
    background: #181c20;
    border-right: 1px solid rgba(255,255,255,0.07);
    z-index: 1031;
    overflow: hidden;
    transition: width var(--o-dur) var(--o-ease);
}
body[data-bs-theme="light"] #omniroq-left-sidebar {
    background: #f5f7fa;
    border-right-color: rgba(0,0,0,0.09);
}

/* Only left_auto mode now */
body.omniroq-navbar-left_auto #omniroq-left-sidebar {
    display: flex;
}

/* Hide top navbar in left_auto mode */
body.omniroq-navbar-left_auto #omniroq-main-navbar {
    display: none !important;
}

/* Shift main content to the right */
body.omniroq-navbar-left_auto #omniroq-main-wrap {
    margin-left: 230px;
    transition: margin-left var(--o-dur) var(--o-ease);
}

/* ── Left sidebar: header ───────────────────────────────── */
.olsb-header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem 0.5rem 0.2rem 0.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
    min-height: 50px;
    gap: 0.3rem;
    overflow: hidden;
    transition: padding var(--o-dur) var(--o-ease);
}
body[data-bs-theme="light"] .olsb-header { border-bottom-color: rgba(0,0,0,0.07); }

.olsb-toggle-row {
    display: flex;
    justify-content: stretch;
    padding: 0.28rem 0.6rem 0.42rem;
    flex-shrink: 0;
}

/* Brand area — fades out on collapse, scales to fit on expand */
.olsb-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    overflow: visible;
    flex: 0 0 auto;
    min-width: 0;
    opacity: 1;
    transition: opacity var(--o-dur) var(--o-ease);
    max-width: 100%;
}
/* Suppress the global lockup:hover rule inside sidebar — we control it via higher-specificity rule below */
#omniroq-left-sidebar .omniroq-brand-lockup:hover,
#omniroq-left-sidebar .omniroq-brand-lockup:focus-within {
    transform: none;
    filter: none;
}
/* Single controlled hover: subtle brightness only — no scale, no heavy glow */
#omniroq-left-sidebar .olsb-brand:hover .omniroq-brand-lockup {
    transform: none;
    filter: brightness(1.15);
}
.olsb-brand > * {
    flex-shrink: 1;
    min-width: 0;
}
/* Brand lockup — flex row, centred */
.olsb-brand .omniroq-brand-lockup {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    overflow: visible;
    min-width: 0;
    flex-shrink: 0;
    max-width: 100%;
    width: auto;
}
/* Logo image — fit within header height */
.olsb-brand img,
.olsb-brand .omniroq-brand-icon img,
.olsb-brand .company-logo {
    max-height: 32px;
    max-width: 60px;
    width: auto;
    height: auto;
    object-fit: contain;
    flex-shrink: 0;
}
/* Wordmark text */
.olsb-brand .omniroq-wordmark,
.olsb-brand .omniroq-wordmark-omni,
.olsb-brand .omniroq-wordmark-roq,
.olsb-brand .company-name-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    font-size: 0.92rem !important;
    line-height: 1.05;
    flex-shrink: 1;
    min-width: 0;
}

/* Toggle sidebar button — pop+glow like the rest of the site */
.olsb-toggle-btn {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    /* 0.38 was ~2.8:1 on the sidebar; 0.62 clears AA while still reading as
       secondary (WCAG 1.4.3). */
    color: rgba(255,255,255,0.62);
    cursor: pointer;
    padding: 0.48rem 0.7rem;
    border-radius: 12px;
    font-size: 1rem;
    flex-shrink: 0;
    min-width: 0;
    width: 100%;
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
    transition: color var(--o-dur) var(--o-ease),
                background-color var(--o-dur) var(--o-ease),
                border-color var(--o-dur) var(--o-ease),
                filter var(--o-dur) var(--o-ease),
                transform var(--o-dur) var(--o-ease);
    transform-origin: left center;
    will-change: transform, filter;
    line-height: 1;
    text-align: left;
}
.olsb-toggle-btn:hover {
    color: rgba(255,255,255,0.92);
    background: rgba(255,255,255,0.055);
    border-color: rgba(255,255,255,0.14);
    filter: none;
    transform: scale(var(--omniroq-hover-pop-scale, 1.01));
}
.olsb-toggle-icon {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    background: rgba(var(--omniroq-accent-rgb, 120,194,173), 0.08);
    border: 1px solid rgba(var(--omniroq-accent-rgb, 120,194,173), 0.12);
    transition: background-color var(--o-dur) var(--o-ease),
                border-color var(--o-dur) var(--o-ease),
                transform var(--o-dur) var(--o-ease),
                filter var(--o-dur) var(--o-ease);
}
.olsb-toggle-btn:hover .olsb-toggle-icon {
    background: rgba(var(--omniroq-accent-rgb, 120,194,173), 0.12);
    border-color: rgba(var(--omniroq-accent-rgb, 120,194,173), 0.2);
}
.olsb-toggle-icon i {
    flex: 0 0 auto;
    width: 16px;
    text-align: center;
    transition: color var(--o-dur) var(--o-ease),
                filter var(--o-dur) var(--o-ease),
                transform var(--o-dur) var(--o-ease);
}
.olsb-toggle-btn:hover .olsb-toggle-icon i {
    color: rgba(255,255,255,0.92);
    filter: var(--omniroq-hover-glow-filter);
    transform: scale(var(--omniroq-hover-pop-scale, 1.01));
}
.olsb-toggle-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    line-height: 1.1;
    flex: 1 1 auto;
}
.olsb-toggle-label {
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: rgba(255,255,255,0.78);
    transition: color var(--o-dur) var(--o-ease), opacity var(--o-dur) var(--o-ease);
}
.olsb-toggle-hint {
    font-size: 0.64rem;
    /* Small text needs ≥4.5:1; 0.42 failed, 0.6 clears it (WCAG 1.4.3). */
    color: rgba(255,255,255,0.6);
    transition: color var(--o-dur) var(--o-ease), opacity var(--o-dur) var(--o-ease);
}
.olsb-toggle-indicator {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.34);
    transition: color var(--o-dur) var(--o-ease),
                transform var(--o-dur) var(--o-ease),
                opacity var(--o-dur) var(--o-ease);
}
.olsb-toggle-indicator i {
    font-size: 0.82rem;
    line-height: 1;
}
.olsb-toggle-btn:hover .olsb-toggle-label {
    color: rgba(255,255,255,0.92);
}
.olsb-toggle-btn:hover .olsb-toggle-hint {
    color: rgba(255,255,255,0.58);
}
.olsb-toggle-btn:hover .olsb-toggle-indicator {
    color: rgba(255,255,255,0.66);
    transform: translateX(-1px);
}
body[data-bs-theme="light"] .olsb-toggle-btn { color: rgba(0,0,0,0.32); }
body[data-bs-theme="light"] .olsb-toggle-btn {
    background: rgba(255,255,255,0.55);
    border-color: rgba(0,0,0,0.08);
}
body[data-bs-theme="light"] .olsb-toggle-btn:hover {
    background: rgba(255,255,255,0.82);
    border-color: rgba(0,0,0,0.12);
}
body[data-bs-theme="light"] .olsb-toggle-icon {
    background: rgba(var(--omniroq-accent-rgb, 120,194,173), 0.08);
    border-color: rgba(var(--omniroq-accent-rgb, 120,194,173), 0.16);
}
body[data-bs-theme="light"] .olsb-toggle-label { color: rgba(0,0,0,0.64); }
body[data-bs-theme="light"] .olsb-toggle-hint { color: rgba(0,0,0,0.42); }
body[data-bs-theme="light"] .olsb-toggle-indicator { color: rgba(0,0,0,0.28); }
body[data-bs-theme="light"] .olsb-toggle-btn:hover { color: rgba(0,0,0,0.82); }
body[data-bs-theme="light"] .olsb-toggle-btn:hover .olsb-toggle-icon i { color: rgba(0,0,0,0.82); }
body[data-bs-theme="light"] .olsb-toggle-btn:hover .olsb-toggle-label { color: rgba(0,0,0,0.82); }
body[data-bs-theme="light"] .olsb-toggle-btn:hover .olsb-toggle-hint { color: rgba(0,0,0,0.58); }
body[data-bs-theme="light"] .olsb-toggle-btn:hover .olsb-toggle-indicator { color: rgba(0,0,0,0.5); }

/* ── Left sidebar: nav area ─────────────────────────────── */
.olsb-nav-wrap {
    flex: 1;
    overflow-y: auto;
    overflow-x: clip;
    padding: 0.45rem 0;
}
.olsb-nav-wrap::-webkit-scrollbar { width: 4px; }
.olsb-nav-wrap::-webkit-scrollbar-track { background: transparent; }
.olsb-nav-wrap::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.11); border-radius: 4px; }

.olsb-nav {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Section group header — accent color uppercase */
.olsb-group-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    background: none;
    border: none;
    color: var(--omniroq-accent-text, #78c2ad);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    padding: 0.65rem 1.1rem 0.3rem;
    cursor: pointer;
    transition: color var(--o-dur) var(--o-ease),
                filter var(--o-dur) var(--o-ease),
                transform var(--o-dur) var(--o-ease);
    transform-origin: left center;
    will-change: transform, filter;
    white-space: nowrap;
    overflow: hidden;
}
.olsb-group-btn:hover {
    color: rgba(255,255,255,0.92);
    filter: none;
    transform: scale(var(--omniroq-hover-pop-scale, 1.01));
}
.olsb-group-btn:hover i {
    filter: var(--omniroq-hover-glow-filter);
    transform: scale(var(--omniroq-hover-pop-scale, 1.01));
}
body[data-bs-theme="light"] .olsb-group-btn:hover {
    color: rgba(0,0,0,0.82);
    filter: none;
}
body[data-bs-theme="light"] .olsb-group-btn:hover i {
    filter: var(--omniroq-hover-glow-filter);
}
body[data-bs-theme="light"] .olsb-group-btn { color: var(--omniroq-accent-text, #78c2ad); }

/* Text label inside group btn — fades with sidebar */
.olsb-group-btn .olsb-label,
.olsb-label {
    transition: opacity var(--o-dur) var(--o-ease);
    opacity: 1;
}

.olsb-chevron {
    font-size: 0.6rem;
    margin-left: auto;
    transition: transform var(--o-dur) var(--o-ease), opacity var(--o-dur) var(--o-ease);
    opacity: 0.55;
}
.olsb-group-btn[aria-expanded="false"] .olsb-chevron { transform: rotate(-90deg); }

.olsb-subgroup { padding-bottom: 0.2rem; }

/* ── Nav items: pop + glow on hover ─────────────────────── */
.olsb-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 12px 7px 14px;
    margin: 1px 8px;
    border-radius: 10px;
    color: rgba(255,255,255,0.58);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: visible;
    transition: color var(--o-dur) var(--o-ease),
                filter var(--o-dur) var(--o-ease),
                transform var(--o-dur) var(--o-ease);
    transform-origin: left center;
    will-change: transform, filter;
}
.olsb-item:hover {
    background: none;
    color: rgba(255,255,255,0.92);
    transform: scale(var(--omniroq-hover-pop-scale, 1.01));
    filter: none;
    text-decoration: none;
}
.olsb-item.active,
.olsb-item[aria-current="page"] {
    background: rgba(var(--omniroq-accent-rgb, 120,194,173), 0.11);
    color: var(--omniroq-accent-text, #78c2ad);
    font-weight: 600;
}
.olsb-item.active:hover,
.olsb-item[aria-current="page"]:hover {
    background: none;
}
.olsb-item i {
    font-size: 0.95rem;
    flex-shrink: 0;
    width: 16px;
    text-align: center;
    color: rgba(255,255,255,0.38);
    transition: color var(--o-dur) var(--o-ease);
}
.olsb-item:hover i {
    color: rgba(255,255,255,0.92);
    filter: var(--omniroq-hover-glow-filter);
    transform: scale(var(--omniroq-hover-pop-scale, 1.01));
}
.olsb-item.active i,
.olsb-item[aria-current="page"] i { color: var(--omniroq-accent-text, #78c2ad); }

body[data-bs-theme="light"] .olsb-item { color: rgba(0,0,0,0.55); }
body[data-bs-theme="light"] .olsb-item i { color: rgba(0,0,0,0.35); }
body[data-bs-theme="light"] .olsb-item:hover { color: rgba(0,0,0,0.82); filter: none; }
body[data-bs-theme="light"] .olsb-item:hover i { color: rgba(0,0,0,0.82); filter: var(--omniroq-hover-glow-filter); }

/* top-level standalone items share same margin */
li > .olsb-item { margin: 1px 8px; }

.olsb-divider {
    height: 1px;
    background: rgba(255,255,255,0.06);
    margin: 0.35rem 1rem;
    transition: margin var(--o-dur) var(--o-ease), width var(--o-dur) var(--o-ease), opacity var(--o-dur) var(--o-ease);
}
body[data-bs-theme="light"] .olsb-divider { background: rgba(0,0,0,0.07); }

/* ── Left sidebar: footer ───────────────────────────────── */
.olsb-footer {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 0.4rem 0.5rem;
    border-top: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
    gap: 0.15rem;
    transition: padding var(--o-dur) var(--o-ease),
                flex-direction 0s;
}
body[data-bs-theme="light"] .olsb-footer { border-top-color: rgba(0,0,0,0.07); }

.olsb-footer-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: none;
    border: none;
    color: rgba(255,255,255,0.45);
    font-size: 1rem;
    cursor: pointer;
    position: relative;
    text-decoration: none;
    transition: color var(--o-dur) var(--o-ease),
                filter var(--o-dur) var(--o-ease),
                transform var(--o-dur) var(--o-ease);
    transform-origin: center;
    will-change: transform, filter;
}
.olsb-footer-btn:hover {
    background: none;
    color: rgba(255,255,255,0.45);
    filter: var(--omniroq-hover-glow-filter);
    transform: scale(var(--omniroq-navbar-pop-scale, 1.03));
}
body[data-bs-theme="light"] .olsb-footer-btn { color: rgba(0,0,0,0.45); }
body[data-bs-theme="light"] .olsb-footer-btn:hover { color: rgba(0,0,0,0.45); }

/* Sidebar footer notification/account hover — match top navbar icon behaviour */
.olsb-footer-btn .nav-icon-wrap,
.olsb-footer-btn img {
    transition: transform var(--o-dur) var(--o-ease), filter var(--o-dur) var(--o-ease), opacity var(--o-dur) var(--o-ease), box-shadow var(--o-dur) var(--o-ease) !important;
    will-change: transform, filter, opacity;
}
.olsb-footer-btn:hover .nav-icon-wrap,
.olsb-footer-btn:focus-visible .nav-icon-wrap,
.olsb-footer-btn:hover img,
.olsb-footer-btn:focus-visible img {
    transform: scale(var(--omniroq-navbar-pop-scale));
    filter: var(--omniroq-hover-glow-filter);
}
.olsb-footer-btn:hover .nav-icon-wrap .nav-icon-fill,
.olsb-footer-btn:focus-visible .nav-icon-wrap .nav-icon-fill {
    opacity: 1;
    transform: scale(1);
}
.olsb-footer-btn:hover .nav-icon-wrap .nav-icon-outline,
.olsb-footer-btn:focus-visible .nav-icon-wrap .nav-icon-outline {
    opacity: 0;
    transform: scale(.92);
}

/* ── Left collapsible: collapsed state ──────────────────── */
body.omniroq-navbar-left_auto.olsb-collapsed #omniroq-left-sidebar { width: 56px; }
body.omniroq-navbar-left_auto.olsb-collapsed #omniroq-main-wrap { margin-left: 56px; }

/* Collapsed top area shows logo icon only; toggle stays above footer separator */
body.olsb-collapsed #omniroq-left-sidebar .olsb-header {
    justify-content: center;
    padding: 0.35rem 0 0.25rem;
    min-height: 52px;
}
body.olsb-collapsed #omniroq-left-sidebar .olsb-brand {
    opacity: 1;
    pointer-events: auto;
    flex: 0 0 auto;
    overflow: visible;
    max-width: 40px;
    justify-content: center;
}
body.olsb-collapsed #omniroq-left-sidebar .olsb-brand .omniroq-brand-lockup {
    justify-content: center;
    width: 40px;
    gap: 0;
}
body.olsb-collapsed #omniroq-left-sidebar .olsb-brand .omniroq-brand-icon,
body.olsb-collapsed #omniroq-left-sidebar .olsb-brand img,
body.olsb-collapsed #omniroq-left-sidebar .olsb-brand .company-logo {
    max-width: 28px;
    max-height: 28px;
}
body.olsb-collapsed #omniroq-left-sidebar .olsb-brand .omniroq-wordmark,
body.olsb-collapsed #omniroq-left-sidebar .olsb-brand .omniroq-wordmark-omni,
body.olsb-collapsed #omniroq-left-sidebar .olsb-brand .omniroq-wordmark-roq,
body.olsb-collapsed #omniroq-left-sidebar .olsb-brand .company-name-text {
    display: none !important;
}
body.olsb-collapsed #omniroq-left-sidebar .olsb-toggle-row {
    display: flex;
    justify-content: center;
    padding: 0.2rem 0 0.35rem;
}
body.olsb-collapsed #omniroq-left-sidebar .olsb-toggle-btn {
    width: 28px;
    min-width: 28px;
    height: 28px;
    min-height: 28px;
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    justify-content: center;
    gap: 0;
    transform-origin: center;
}
body.olsb-collapsed #omniroq-left-sidebar .olsb-toggle-icon {
    width: auto;
    height: auto;
    border: none;
    background: none;
    border-radius: 0;
}
body.olsb-collapsed #omniroq-left-sidebar .olsb-toggle-copy {
    display: none !important;
}
body.olsb-collapsed #omniroq-left-sidebar .olsb-toggle-indicator {
    display: none !important;
}

/* Hide subgroups (flyout JS will show them on demand) */
body.olsb-collapsed #omniroq-left-sidebar .olsb-subgroup {
    display: none !important;
}

/* Collapsed nav: nav wrapper becomes a centered column */
body.olsb-collapsed #omniroq-left-sidebar .olsb-nav-wrap {
    padding: 0.3rem 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}
body.olsb-collapsed #omniroq-left-sidebar .olsb-nav {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
body.olsb-collapsed #omniroq-left-sidebar .olsb-nav > li {
    width: 100%;
    display: flex;
    justify-content: center;
}

/* ── ALL items and group buttons: identical 40×40 centered square ── */
body.olsb-collapsed #omniroq-left-sidebar .olsb-group-btn,
body.olsb-collapsed #omniroq-left-sidebar .olsb-item {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    margin: 1px 0 !important;
    gap: 0 !important;
    border-radius: 8px !important;
    flex-shrink: 0;
    white-space: nowrap;
    overflow: visible !important;
    font-size: 0 !important;
    letter-spacing: 0;
    color: rgba(255,255,255,0.68) !important;
    transform-origin: center;
    transition: color var(--o-dur) var(--o-ease),
                filter var(--o-dur) var(--o-ease),
                transform var(--o-dur) var(--o-ease);
    position: relative;
}
body.olsb-collapsed #omniroq-left-sidebar .olsb-group-btn:hover,
body.olsb-collapsed #omniroq-left-sidebar .olsb-item:hover {
    color: rgba(255,255,255,0.92) !important;
    filter: none !important;
    transform: scale(var(--omniroq-navbar-pop-scale, 1.03));
    background: none !important;
}
body[data-bs-theme="light"].olsb-collapsed #omniroq-left-sidebar .olsb-group-btn,
body[data-bs-theme="light"].olsb-collapsed #omniroq-left-sidebar .olsb-item {
    color: rgba(0,0,0,0.5) !important;
}
body[data-bs-theme="light"].olsb-collapsed #omniroq-left-sidebar .olsb-group-btn:hover,
body[data-bs-theme="light"].olsb-collapsed #omniroq-left-sidebar .olsb-item:hover {
    color: rgba(0,0,0,0.82) !important;
}

/* Icons inside: inherit color, centered, consistent size */
body.olsb-collapsed #omniroq-left-sidebar .olsb-group-btn i,
body.olsb-collapsed #omniroq-left-sidebar .olsb-item i {
    font-size: 1.15rem !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    color: inherit !important;
    line-height: 1;
    flex-shrink: 0;
    transition: color var(--o-dur) var(--o-ease),
                filter var(--o-dur) var(--o-ease),
                transform var(--o-dur) var(--o-ease);
}
body.olsb-collapsed #omniroq-left-sidebar .olsb-group-btn:hover i,
body.olsb-collapsed #omniroq-left-sidebar .olsb-item:hover i {
    filter: var(--omniroq-hover-glow-filter);
    transform: scale(var(--omniroq-navbar-pop-scale, 1.03));
}

/* Hide all text inside collapsed sidebar */
body.olsb-collapsed #omniroq-left-sidebar .olsb-label,
body.olsb-collapsed #omniroq-left-sidebar .olsb-chevron {
    display: none !important;
}

/* Collapsed icon tooltips — handled by Bootstrap JS (see sidebar script) to escape overflow:hidden.
   Light/dark styling is applied via the global .tooltip .tooltip-inner override above. */

/* Footer: stack vertically when collapsed */
body.olsb-collapsed #omniroq-left-sidebar .olsb-footer {
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.4rem 0;
}
body.olsb-collapsed #omniroq-left-sidebar .olsb-divider {
    display: block !important;
    width: 24px;
    height: 1px;
    margin: 0.45rem auto !important;
    background: rgba(255,255,255,0.12);
    opacity: 1;
    flex: 0 0 auto;
}
body[data-bs-theme="light"].olsb-collapsed #omniroq-left-sidebar .olsb-divider {
    background: rgba(0,0,0,0.14);
}

/* Toggle icon flip when collapsed */
body.olsb-collapsed #omniroq-left-sidebar .olsb-toggle-icon i {
    transform: scaleX(-1);
    display: inline-block;
}

/* ── Flyout panel — rendered as DIRECT child of <body> by JS ── */
/* (must live outside the sidebar stacking context to layer correctly) */
.olsb-flyout-panel {
    /* Hidden while inside sidebar; JS clones+appends to body */
    display: none;
}

/* Active flyout clone appended to <body> */
.olsb-flyout-clone {
    position: fixed;
    left: 60px;
    top: 0; /* overridden by JS */
    background: #1e2329;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 6px 4px;
    z-index: 2000;
    min-width: 180px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.58),
                0 0 0 1px rgba(var(--omniroq-accent-rgb,120,194,173), 0.08),
                0 0 18px rgba(var(--omniroq-accent-rgb,120,194,173), 0.06);
    animation: olsbFlyoutIn var(--o-dur) var(--o-ease) both;
}
body[data-bs-theme="light"] .olsb-flyout-clone {
    background: #fff;
    border-color: rgba(0,0,0,0.09);
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
}
@keyframes olsbFlyoutIn {
    from { opacity: 0; transform: translateX(-6px) scale(0.97); }
    to   { opacity: 1; transform: translateX(0) scale(1); }
}

/* Flyout section title */
.olsb-flyout-clone .olsb-flyout-title {
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--omniroq-accent-text, #78c2ad);
    padding: 4px 10px 4px 12px;
    opacity: 0.85;
}

/* Flyout items: full label row with pop+glow */
.olsb-flyout-clone .olsb-item {
    display: flex !important;
    align-items: center;
    justify-content: flex-start !important;
    gap: 9px !important;
    margin: 1px 4px;
    padding: 7px 14px 7px 12px;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    color: rgba(255,255,255,0.60);
    text-decoration: none;
    white-space: nowrap;
    transform-origin: left center;
    transition: color var(--o-dur) var(--o-ease),
                filter var(--o-dur) var(--o-ease),
                transform var(--o-dur) var(--o-ease);
    will-change: transform, filter;
}
.olsb-flyout-clone .olsb-item i {
    width: 16px;
    font-size: 0.95rem;
    flex-shrink: 0;
    text-align: center;
    color: rgba(255,255,255,0.38);
    transition: color var(--o-dur) var(--o-ease);
}
.olsb-flyout-clone .olsb-item:hover {
    background: none;
    color: inherit;
    transform: scale(var(--omniroq-hover-pop-scale, 1.01));
    filter: var(--omniroq-hover-glow-filter);
    text-decoration: none;
}
.olsb-flyout-clone .olsb-item:hover i { color: inherit; }
body[data-bs-theme="light"] .olsb-flyout-clone .olsb-item { color: rgba(0,0,0,0.55); }
body[data-bs-theme="light"] .olsb-flyout-clone .olsb-item i { color: rgba(0,0,0,0.35); }
body[data-bs-theme="light"] .olsb-flyout-clone .olsb-item:hover { color: rgba(0,0,0,0.55); }
body[data-bs-theme="light"] .olsb-flyout-clone .olsb-item:hover i { color: rgba(0,0,0,0.35); }

/* ── Accent color propagation (via CSS vars set in head) ─── */
/* These reference --omniroq-accent set by the inline style block in base.html */
.btn-outline-primary {
    --bs-btn-color: var(--omniroq-accent-text, #78c2ad);
    --bs-btn-border-color: var(--omniroq-accent, #78c2ad);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--omniroq-accent, #78c2ad);
    --bs-btn-hover-border-color: var(--omniroq-accent, #78c2ad);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--omniroq-accent, #78c2ad);
    --bs-btn-active-border-color: var(--omniroq-accent, #78c2ad);
}
.btn-primary {
    --bs-btn-bg: var(--omniroq-accent, #78c2ad);
    --bs-btn-border-color: var(--omniroq-accent, #78c2ad);
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
    --bs-btn-hover-bg: var(--omniroq-accent, #78c2ad);
    --bs-btn-hover-border-color: var(--omniroq-accent, #78c2ad);
}
a { color: var(--omniroq-accent-text, #78c2ad); }
a:hover { color: var(--omniroq-accent-text, #78c2ad); filter: var(--omniroq-hover-glow-filter, none); }
.text-primary { color: var(--omniroq-accent-text, #78c2ad) !important; }
.border-primary { border-color: var(--omniroq-accent, #78c2ad) !important; }
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    color: var(--omniroq-accent-text, #78c2ad) !important;
}

/* ── Accent Color Swatch Picker ────────────────────────────────────── */
.accent-palette-wrap {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 10px;
    padding: 14px 16px;
    max-width: 100%;
}
.accent-selected-row {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.78rem;
    letter-spacing: .02em;
    min-height: 18px;
}
.accent-selected-dot {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.25);
    flex-shrink: 0;
    display: inline-block;
    transition: background .2s;
}
.accent-selected-name {
    color: rgba(255,255,255,.75);
    font-weight: 500;
}
.accent-selected-hex {
    color: rgba(255,255,255,.35);
    font-family: monospace;
    font-size: 0.74rem;
}
/* swatch grid */
.accent-swatch-grid {
    display: flex;
    flex-wrap: nowrap;
    gap: 7px;
    align-items: center;
}
.accent-swatch {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid transparent;
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
    transition: transform var(--o-dur) var(--o-ease), box-shadow var(--o-dur) var(--o-ease);
    box-shadow: 0 1px 4px rgba(0,0,0,.4);
}
/* Accent swatches are a colour-only control, so the focus ring is the ONLY
   way a keyboard user can tell which one they are on. `outline: none` was
   set unconditionally here, which removed it. */
.accent-swatch:focus-visible {
    outline: var(--o-focus-ring-width) solid #fff;
    outline-offset: var(--o-focus-ring-offset);
}
.accent-swatch:hover {
    transform: scale(1.22);
    box-shadow: 0 0 0 3px rgba(255,255,255,.2), 0 3px 10px rgba(0,0,0,.5);
    z-index: 1;
}
.accent-swatch-active {
    transform: scale(1.14);
    box-shadow: 0 0 0 2.5px #fff, 0 3px 10px rgba(0,0,0,.45) !important;
    z-index: 2;
}
/* custom (+) swatch */
.accent-custom-anchor {
    position: relative;
    display: inline-block;
}
.accent-swatch-custom {
    background: rgba(255,255,255,.07) !important;
    color: rgba(255,255,255,.6);
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px dashed rgba(255,255,255,.35);
    box-shadow: none;
}
.accent-swatch-custom:hover {
    background: rgba(255,255,255,.14) !important;
    color: #fff;
    border-color: rgba(255,255,255,.6);
    transform: scale(1.18);
    box-shadow: none;
}
.accent-swatch-custom.accent-swatch-active {
    border-color: rgba(255,255,255,.85);
    box-shadow: 0 0 0 2px rgba(255,255,255,.35) !important;
}
/* popover */
.accent-custom-popover {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 1080;
    min-width: 210px;
    background: #1f2328;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 10px;
    box-shadow: 0 12px 36px rgba(0,0,0,.6), 0 3px 10px rgba(0,0,0,.4);
    padding: 12px 14px 14px;
}
.accent-custom-popover .acp-arrow {
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 11px;
    height: 11px;
    background: #1f2328;
    border-left: 1px solid rgba(255,255,255,.12);
    border-top: 1px solid rgba(255,255,255,.12);
    transform: translateX(-50%) rotate(45deg);
}
.acp-preview-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.acp-preview-swatch {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,.18);
    display: inline-block;
    flex-shrink: 0;
    transition: background .15s;
}
.acp-preview-label {
    font-family: monospace;
    font-size: 0.8rem;
    color: rgba(255,255,255,.6);
    flex: 1;
}
.acp-open-wheel {
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 5px;
    color: rgba(255,255,255,.55);
    padding: 2px 7px;
    font-size: 0.75rem;
    cursor: pointer;
    transition: background .15s, color .15s;
    flex-shrink: 0;
}
.acp-open-wheel:hover {
    background: rgba(255,255,255,.15);
    color: #fff;
}
.acp-hex-input {
    font-family: monospace;
    font-size: 0.82rem;
    background: rgba(255,255,255,.06) !important;
    border-color: rgba(255,255,255,.15) !important;
    color: rgba(255,255,255,.88) !important;
    width: 100%;
}
.acp-hex-input::placeholder { color: rgba(255,255,255,.3) !important; }
/* hidden color wheel — triggered programmatically */
.accent-color-wheel {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
}
/* light theme */
body[data-bs-theme="light"] .accent-palette-wrap {
    background: rgba(0,0,0,.03);
    border-color: rgba(0,0,0,.12);
}
body[data-bs-theme="light"] .accent-selected-name { color: rgba(0,0,0,.7); }
body[data-bs-theme="light"] .accent-selected-hex  { color: rgba(0,0,0,.4); }
body[data-bs-theme="light"] .accent-selected-dot  { border-color: rgba(0,0,0,.2); }
body[data-bs-theme="light"] .accent-swatch:hover  { box-shadow: 0 0 0 3px rgba(0,0,0,.15), 0 3px 10px rgba(0,0,0,.2); }
body[data-bs-theme="light"] .accent-swatch-active {
    box-shadow: 0 0 0 2.5px #333, 0 3px 10px rgba(0,0,0,.2) !important;
}
body[data-bs-theme="light"] .accent-swatch-custom {
    background: rgba(0,0,0,.06) !important;
    color: rgba(0,0,0,.5);
    border-color: rgba(0,0,0,.3);
}
body[data-bs-theme="light"] .accent-custom-popover {
    background: #ffffff;
    border-color: rgba(0,0,0,.14);
    box-shadow: 0 12px 36px rgba(0,0,0,.15), 0 3px 10px rgba(0,0,0,.08);
}
body[data-bs-theme="light"] .accent-custom-popover .acp-arrow {
    background: #ffffff;
    border-color: rgba(0,0,0,.14);
}
body[data-bs-theme="light"] .acp-preview-swatch { border-color: rgba(0,0,0,.18); }
body[data-bs-theme="light"] .acp-preview-label  { color: rgba(0,0,0,.5); }
body[data-bs-theme="light"] .acp-open-wheel {
    background: rgba(0,0,0,.06);
    border-color: rgba(0,0,0,.15);
    color: rgba(0,0,0,.5);
}
body[data-bs-theme="light"] .acp-open-wheel:hover { background: rgba(0,0,0,.1); color: #000; }
body[data-bs-theme="light"] .acp-hex-input {
    background: #f5f7fa !important;
    border-color: rgba(0,0,0,.18) !important;
    color: #333 !important;
}
body[data-bs-theme="light"] .acp-hex-input::placeholder { color: rgba(0,0,0,.35) !important; }

/* ============================================================
   CHAT — full-page inbox, floating widget, navbar preview
   ============================================================ */
:root {
    --omniroq-chat-surface: #1f2328;
    --omniroq-chat-surface-alt: #161b22;
    --omniroq-chat-border: rgba(160, 169, 184, 0.22);
    --omniroq-chat-text: #e8eef7;
    --omniroq-chat-muted: #9aa7b5;
    --omniroq-chat-accent: var(--omniroq-accent, #78c2ad);
    --omniroq-chat-accent-rgb: var(--omniroq-accent-rgb, 120, 194, 173);
}

/* ── Full-page shell ── */
.chat-shell {
    display: flex;
    height: calc(100vh - 150px);
    min-height: 480px;
    border: 1px solid var(--omniroq-chat-border);
    border-radius: 10px;
    overflow: hidden;
    background: var(--omniroq-chat-surface);
}
.chat-sidebar {
    width: 320px;
    flex-shrink: 0;
    border-right: 1px solid var(--omniroq-chat-border);
    display: flex;
    flex-direction: column;
    background: var(--omniroq-chat-surface-alt);
}
.chat-sidebar-head {
    padding: 10px;
    border-bottom: 1px solid var(--omniroq-chat-border);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.chat-sidebar-actions { display: flex; gap: 6px; }
.chat-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.chat-search-wrap > .bi {
    position: absolute;
    left: 10px;
    color: var(--omniroq-chat-muted);
    pointer-events: none;
}
.chat-search {
    width: 100%;
    padding: 7px 10px 7px 30px;
    border-radius: 7px;
    border: 1px solid var(--omniroq-chat-border);
    background: var(--omniroq-chat-surface);
    color: var(--omniroq-chat-text);
    font-size: 0.86rem;
}
.chat-search:focus { outline: none; border-color: var(--omniroq-chat-accent); }
.chat-convo-list { flex: 1; overflow-y: auto; }
.chat-convo {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: none;
    border: none;
    border-bottom: 1px solid rgba(160,169,184,0.08);
    text-align: left;
    cursor: pointer;
    color: var(--omniroq-chat-text);
}
.chat-convo:hover { background: rgba(255,255,255,0.04); }
.chat-convo.active { background: rgba(var(--omniroq-chat-accent-rgb), 0.14); }
.chat-convo-avatar {
    width: 38px; height: 38px; flex-shrink: 0;
    border-radius: 50%;
    background: rgba(var(--omniroq-chat-accent-rgb), 0.18);
    color: var(--omniroq-chat-accent);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.05rem;
}
.chat-convo-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.chat-convo-title { font-weight: 600; font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-convo-preview { font-size: 0.8rem; color: var(--omniroq-chat-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-convo-meta { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: 0.7rem; color: var(--omniroq-chat-muted); }
.chat-convo.unread .chat-convo-title { font-weight: 700; }
.chat-convo-badge, .ocw-li-badge {
    background: var(--omniroq-chat-accent);
    color: #06231c;
    border-radius: 10px;
    padding: 1px 7px;
    font-size: 0.68rem;
    font-weight: 700;
}
.chat-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.chat-empty-state {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    color: var(--omniroq-chat-muted); gap: 10px;
}
.chat-empty-state .bi { font-size: 2.6rem; opacity: 0.5; }
.chat-thread-wrap { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.chat-thread-head {
    padding: 12px 16px;
    border-bottom: 1px solid var(--omniroq-chat-border);
    background: var(--omniroq-chat-surface-alt);
}
.chat-thread-title { display: flex; align-items: center; gap: 12px; }
.chat-thread-avatar {
    width: 40px; height: 40px; border-radius: 50%;
    background: rgba(var(--omniroq-chat-accent-rgb), 0.18); color: var(--omniroq-chat-accent);
    display: flex; align-items: center; justify-content: center; font-size: 1.1rem;
}
.chat-thread-name { font-weight: 600; color: var(--omniroq-chat-text); }
.chat-thread-sub { font-size: 0.78rem; color: var(--omniroq-chat-muted); }
.chat-messages {
    flex: 1; overflow-y: auto; padding: 18px;
    display: flex; flex-direction: column; gap: 8px;
}
.chat-compose {
    display: flex; align-items: flex-end; gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--omniroq-chat-border);
    background: var(--omniroq-chat-surface-alt);
}
.chat-compose textarea {
    flex: 1; resize: none; border-radius: 18px;
    border: 1px solid var(--omniroq-chat-border);
    background: var(--omniroq-chat-surface); color: var(--omniroq-chat-text);
    padding: 9px 14px; max-height: 120px; font-size: 0.9rem; line-height: 1.4;
}
.chat-compose textarea:focus { outline: none; border-color: var(--omniroq-chat-accent); }
.chat-compose-attach {
    cursor: pointer; color: var(--omniroq-chat-muted); font-size: 1.2rem;
    padding: 6px; display: flex; align-items: center;
}
.chat-compose-attach:hover { color: var(--omniroq-chat-accent); }
.chat-compose-send { border-radius: 50%; width: 40px; height: 40px; flex-shrink: 0; padding: 0; }

/* ── Message bubbles (shared by full page + widget) ── */
.ocw-msg { max-width: 78%; padding: 8px 12px; border-radius: 14px; font-size: 0.88rem; line-height: 1.4; word-wrap: break-word; }
.ocw-in { align-self: flex-start; background: rgba(255,255,255,0.06); color: var(--omniroq-chat-text); border-bottom-left-radius: 4px; }
.ocw-out { align-self: flex-end; background: var(--omniroq-chat-accent); color: #06231c; border-bottom-right-radius: 4px; }
.ocw-msg-sender { font-size: 0.72rem; font-weight: 700; opacity: 0.8; margin-bottom: 2px; }
.ocw-msg-body { white-space: pre-wrap; }
.ocw-msg-time { font-size: 0.65rem; opacity: 0.65; margin-top: 3px; text-align: right; }
.ocw-msg-file { display: inline-flex; align-items: center; gap: 4px; font-size: 0.8rem; margin-top: 4px; text-decoration: underline; color: inherit; }
.ocw-sys { align-self: center; font-size: 0.75rem; color: var(--omniroq-chat-muted); background: rgba(255,255,255,0.04); padding: 4px 12px; border-radius: 12px; }
.ocw-loading, .ocw-empty { text-align: center; color: var(--omniroq-chat-muted); padding: 24px 14px; font-size: 0.85rem; }

/* ── Contact picker (new-conversation modal) ── */
.chat-contact-list { max-height: 320px; overflow-y: auto; border: 1px solid var(--omniroq-chat-border); border-radius: 8px; }
.chat-contact-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; cursor: pointer; border-bottom: 1px solid rgba(160,169,184,0.08); margin: 0; }
.chat-contact-row:hover { background: rgba(255,255,255,0.04); }
.chat-contact-avatar { width: 30px; height: 30px; border-radius: 50%; overflow: hidden; background: rgba(var(--omniroq-chat-accent-rgb),0.18); color: var(--omniroq-chat-accent); display: flex; align-items: center; justify-content: center; }
.chat-contact-avatar img { width: 100%; height: 100%; object-fit: cover; }
.chat-contact-name { font-size: 0.88rem; }

/* ── Navbar preview toast (Messages) — clickable rows get the same
   hover pop/glow as notification dropdown items ── */
.chat-toast-row {
    cursor: pointer;
    transition: transform var(--o-dur) var(--o-ease), filter var(--o-dur) var(--o-ease);
    transform-origin: center center;
    will-change: transform, filter;
}
.chat-toast-row:hover,
.chat-toast-row:focus-within {
    transform: scale(var(--omniroq-hover-pop-scale));
    filter: var(--omniroq-hover-glow-filter);
    position: relative;
    z-index: 1;
}

/* ── Floating widget ── */
/* Tucked closer into the corner than the old 22px so the gutter below can be
   smaller. 44px is the minimum comfortable touch target, so this is as small as
   the bubble can honestly go. */
/* The root is a positioning wrapper and nothing else, so it must not eat
   clicks: with `pointer-events` left at `auto` it intercepted them itself, and
   making only the bubble click-through fixed nothing — measured as "corner
   hits div.ocw-root" with the row button still unreachable beneath it. Its
   two real children opt back in below. */
.ocw-root { position: fixed; right: 14px; bottom: 14px; z-index: 1090;
            pointer-events: none; }

/* NO right-hand gutter here.
   A previous version reserved 58px on the right of every list table so the chat
   bubble could not cover the row-action buttons. It worked, but it cost every
   list page a visibly asymmetric margin — the tables already truncate their
   headers, and paying 58px of width on all of them to protect four buttons in
   one corner is the wrong trade. Removed; padding is symmetric again.

   The occlusion it addressed was real: measured 2026-09-25 at 1440x900, the
   bubble covered a row's "Message …" button on /contacts/ and on /leads/, and
   that button could not be clicked. **Fixed in chat.js**, as this note said it
   should be — see `proximity` there. The rules below are its other half. */
.ocw-bubble {
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--omniroq-chat-accent); color: #06231c;
    border: none; font-size: 1.5rem; cursor: pointer;
    box-shadow: 0 6px 20px rgba(0,0,0,0.35); position: relative;
    display: flex; align-items: center; justify-content: center;
    pointer-events: auto;   /* opts back in; the root is click-through */
    transition: transform var(--o-dur) var(--o-ease),
                opacity var(--o-dur) var(--o-ease);
}
.ocw-bubble:hover { transform: scale(1.06); }

/* Stepping aside, rather than fading.
   The first attempt at this faded the bubble and made it click-through while
   the pointer was elsewhere, waking it again on proximity. It defeated itself:
   `mousemove` reaches the corner before the click does, so the bubble was
   always awake at exactly the moment somebody was trying to click the row
   button beneath it. Proved by clicking rather than by hit-testing — the hit
   test said the button was reachable and the click still opened chat.

   Every timing variant has the same hole somewhere, so there is no mode now.
   The bubble stays solid and clickable, and `chat.js` keeps it off interactive
   controls by lifting it when it would cover one. */
.ocw-root { transition: transform var(--o-dur) var(--o-ease); }
@media (prefers-reduced-motion: reduce) {
    .ocw-root { transition: none; }
}
.ocw-bubble-badge {
    position: absolute; top: -2px; right: -2px;
    background: #e74c3c; color: #fff; border-radius: 10px;
    font-size: 0.66rem; font-weight: 700; padding: 1px 6px; min-width: 18px;
}
.ocw-panel {
    position: absolute; right: 0; bottom: 70px;
    width: 360px; height: 520px; max-height: calc(100vh - 120px);
    background: var(--omniroq-chat-surface);
    border: 1px solid var(--omniroq-chat-border);
    border-radius: 12px; overflow: hidden;
    box-shadow: 0 12px 40px rgba(0,0,0,0.45);
    display: flex; flex-direction: column;
    opacity: 0; transform: translateY(12px) scale(0.98); pointer-events: none;
    transition: opacity var(--o-dur) var(--o-ease), transform var(--o-dur) var(--o-ease);
}
.ocw-root.ocw-open .ocw-panel { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.ocw-root.ocw-min .ocw-panel { opacity: 0; pointer-events: none; }
.ocw-head {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 12px; background: var(--omniroq-chat-surface-alt);
    border-bottom: 1px solid var(--omniroq-chat-border);
}
.ocw-head-title { flex: 1; font-weight: 600; color: var(--omniroq-chat-text); font-size: 0.95rem; }
.ocw-head-actions { display: flex; gap: 2px; }
.ocw-icon-btn, .ocw-back {
    background: none; border: none; color: var(--omniroq-chat-muted);
    cursor: pointer; padding: 4px 6px; font-size: 0.95rem; border-radius: 6px;
    display: inline-flex; align-items: center; text-decoration: none;
}
.ocw-icon-btn:hover, .ocw-back:hover { background: rgba(255,255,255,0.08); color: var(--omniroq-chat-text); }
.ocw-body { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.ocw-list { flex: 1; overflow-y: auto; }
.ocw-li { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: none; border: none; border-bottom: 1px solid rgba(160,169,184,0.08); text-align: left; cursor: pointer; color: var(--omniroq-chat-text); }
.ocw-li:hover { background: rgba(255,255,255,0.04); }
.ocw-li.ocw-unread .ocw-li-title { font-weight: 700; }
.ocw-li-avatar { width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%; background: rgba(var(--omniroq-chat-accent-rgb),0.18); color: var(--omniroq-chat-accent); display: flex; align-items: center; justify-content: center; }
.ocw-li-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ocw-li-title { font-size: 0.86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ocw-li-preview { font-size: 0.76rem; color: var(--omniroq-chat-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ocw-li-meta { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; font-size: 0.66rem; color: var(--omniroq-chat-muted); }
.ocw-thread { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.ocw-msgs { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.ocw-compose { display: flex; align-items: flex-end; gap: 6px; padding: 8px 10px; border-top: 1px solid var(--omniroq-chat-border); background: var(--omniroq-chat-surface-alt); }
.ocw-compose textarea { flex: 1; resize: none; border-radius: 16px; border: 1px solid var(--omniroq-chat-border); background: var(--omniroq-chat-surface); color: var(--omniroq-chat-text); padding: 7px 12px; max-height: 90px; font-size: 0.85rem; }
.ocw-compose textarea:focus { outline: none; border-color: var(--omniroq-chat-accent); }
.ocw-attach { cursor: pointer; color: var(--omniroq-chat-muted); padding: 5px; font-size: 1.05rem; }
.ocw-attach:hover { color: var(--omniroq-chat-accent); }
.ocw-send { border: none; background: var(--omniroq-chat-accent); color: #06231c; width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; cursor: pointer; }

@media (max-width: 600px) {
    .ocw-panel { width: calc(100vw - 32px); height: calc(100vh - 110px); }
    .chat-sidebar { width: 100%; }
}

/* ============================================================
   EMAIL — Outlook-style 3-pane mailbox
   ============================================================ */
.email-shell {
    display: flex;
    height: calc(100vh - 160px);
    min-height: 480px;
    border: 1px solid var(--omniroq-chat-border);
    border-radius: 10px;
    overflow: hidden;
    background: var(--omniroq-chat-surface);
}
.email-folders {
    width: 200px; flex-shrink: 0;
    border-right: 1px solid var(--omniroq-chat-border);
    background: var(--omniroq-chat-surface-alt);
    padding: 8px; overflow-y: auto;
}
.email-folder {
    width: 100%; display: flex; align-items: center; gap: 9px;
    padding: 8px 10px; border-radius: 7px; background: none; border: none;
    color: var(--omniroq-chat-text); cursor: pointer; font-size: 0.88rem; text-align: left;
}
.email-folder:hover { background: rgba(255,255,255,0.05); }
.email-folder.active { background: rgba(var(--omniroq-chat-accent-rgb), 0.16); color: var(--omniroq-chat-accent); }
.email-folder-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.email-folder-count { font-size: 0.7rem; background: rgba(var(--omniroq-chat-accent-rgb),0.25); color: var(--omniroq-chat-accent); border-radius: 9px; padding: 1px 7px; font-weight: 700; }
.email-list-pane { width: 360px; flex-shrink: 0; border-right: 1px solid var(--omniroq-chat-border); display: flex; flex-direction: column; background: var(--omniroq-chat-surface-alt); }
.email-list-head { padding: 10px; border-bottom: 1px solid var(--omniroq-chat-border); }
.email-search-wrap { width: 100%; }
.email-list { flex: 1; overflow-y: auto; }
.email-row {
    width: 100%; display: flex; flex-direction: column; gap: 3px;
    padding: 10px 14px; background: none; border: none;
    border-bottom: 1px solid rgba(160,169,184,0.08);
    border-left: 3px solid transparent;
    text-align: left; cursor: pointer; color: var(--omniroq-chat-text);
}
.email-row:hover { background: rgba(255,255,255,0.04); }
.email-row.selected { background: rgba(var(--omniroq-chat-accent-rgb),0.12); border-left-color: var(--omniroq-chat-accent); }
.email-row.unread { border-left-color: var(--omniroq-chat-accent); }
.email-row.unread .email-row-from, .email-row.unread .email-row-subject { font-weight: 700; }
.email-row-top { display: flex; justify-content: space-between; gap: 8px; }
.email-row-from { font-size: 0.86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.email-row-date { font-size: 0.72rem; color: var(--omniroq-chat-muted); flex-shrink: 0; }
.email-row-subject { font-size: 0.84rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.email-row-snippet { font-size: 0.78rem; color: var(--omniroq-chat-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.email-row-star { color: #f1c40f; }
.email-read-pane { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.email-read { flex: 1; overflow-y: auto; padding: 20px 24px; }
.email-read-subject { font-size: 1.3rem; color: var(--omniroq-chat-text); margin-bottom: 10px; }
.email-read-meta { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.email-read-from { font-weight: 600; color: var(--omniroq-chat-text); }
.email-read-actions { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.email-read-attachments { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.email-attachment { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border: 1px solid var(--omniroq-chat-border); border-radius: 7px; font-size: 0.8rem; color: var(--omniroq-chat-text); text-decoration: none; }
.email-attachment:hover { border-color: var(--omniroq-chat-accent); }
.email-read-body { color: var(--omniroq-chat-text); line-height: 1.55; }
.email-text-body { white-space: pre-wrap; font-family: inherit; font-size: 0.9rem; margin: 0; color: var(--omniroq-chat-text); }
/* A contract clause keeps the line breaks it was written with. */
.contract-clause-text { white-space: pre-wrap; }
.email-html-frame { width: 100%; min-height: 420px; border: none; background: #fff; border-radius: 8px; }
.email-refresh .bi.spin { display: inline-block; animation: ocw-spin 0.8s linear infinite; }
@keyframes ocw-spin { to { transform: rotate(360deg); } }

@media (max-width: 900px) {
    .email-folders { width: 56px; }
    .email-folder-name, .email-folder-count { display: none; }
    .email-list-pane { width: 240px; }
}

/* ── Light theme adjustments ── */
body[data-bs-theme="light"] .chat-shell,
body[data-bs-theme="light"] .email-shell,
body[data-bs-theme="light"] .ocw-panel {
    --omniroq-chat-surface: #ffffff;
    --omniroq-chat-surface-alt: #f0f4f8;
    --omniroq-chat-border: rgba(0,0,0,0.10);
    --omniroq-chat-text: #1a202c;
    --omniroq-chat-muted: #5a6270;
}

/* ============================================================
   Accessibility baseline (Phase 12.3) — WCAG 2.1 AA.
   ============================================================ */

/* Skip link (WCAG 2.4.1 Bypass Blocks). Off-screen until focused rather
   than display:none — a hidden element is not focusable, so it could never
   be reached by the keyboard users it exists for. */
.omniroq-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100000;
    padding: 0.65rem 1.1rem;
    background: #0d6efd;
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    border-radius: 0 0 0.4rem 0;
}
.omniroq-skip-link:focus,
.omniroq-skip-link:focus-visible {
    left: 0;
    outline: 3px solid #fff;
    outline-offset: -3px;
}

/* The main landmark takes focus from the skip link; never paint a focus
   ring around the whole page when it does. */
#omniroq-main-content:focus,
#omniroq-main-content:focus-visible {
    outline: none;
}

/* Visible keyboard focus (WCAG 2.4.7 Focus Visible). Uses :focus-visible so
   pointer users don't get rings on click, while keyboard users always do.
   Bootstrap's default ring is easily lost against the dark theme. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
    outline: 2px solid #58aef4;
    outline-offset: 2px;
    border-radius: 2px;
}
body[data-bs-theme="light"] a:focus-visible,
body[data-bs-theme="light"] button:focus-visible,
body[data-bs-theme="light"] input:focus-visible,
body[data-bs-theme="light"] select:focus-visible,
body[data-bs-theme="light"] textarea:focus-visible {
    outline-color: #0a58ca;
}

/* Respect prefers-reduced-motion (WCAG 2.3.3). The UI leans on transitions
   and the back-to-top scroll; neither should animate for users who asked
   the OS to stop. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================================
   RTL layout (Phase 12.3). Driven by dir="rtl" on <html>, which
   base.html sets from Django's LANGUAGE_BIDI for ar/he/fa/ur/…

   Scope note: this flips the *structural* layout — the fixed sidebar and
   the main-content offset that pairs with it, plus the skip link. It is
   deliberately not a full audit of every directional rule in this
   stylesheet; per-component polish (icon nudges, text-align on individual
   widgets) is follow-up work best driven by a native-script reviewer.
   ============================================================ */

/* Fixed sidebar moves to the right edge; its divider border follows. */
[dir="rtl"] #omniroq-left-sidebar {
    left: auto;
    right: 0;
    border-right: none;
    border-left: 1px solid rgba(255, 255, 255, 0.07);
}

/* The main-content offset must pair with whichever edge the sidebar is on,
   otherwise content sits underneath it. */
[dir="rtl"] body.omniroq-navbar-left_auto #omniroq-main-wrap,
body.omniroq-navbar-left_auto[dir="rtl"] #omniroq-main-wrap {
    margin-left: 0;
    margin-right: 230px;
    transition: margin-right var(--o-dur) var(--o-ease);
}
[dir="rtl"] body.omniroq-navbar-left_auto.olsb-collapsed #omniroq-main-wrap,
body.omniroq-navbar-left_auto.olsb-collapsed[dir="rtl"] #omniroq-main-wrap {
    margin-left: 0;
    margin-right: 56px;
}

/* Skip link slides in from the right in RTL. */
[dir="rtl"] .omniroq-skip-link {
    left: auto;
    right: -9999px;
    border-radius: 0 0 0 0.4rem;
}
[dir="rtl"] .omniroq-skip-link:focus,
[dir="rtl"] .omniroq-skip-link:focus-visible {
    left: auto;
    right: 0;
}

/* @mention highlight in ticket conversations (Phase 4.6). Uses the accent the
   theme already maps .text-primary to, so it inherits a user's chosen accent
   rather than hardcoding teal. Weight + tint carry the emphasis, so the cue
   does not rely on colour alone. */
.o-mention {
    font-weight: 600;
    color: var(--omniroq-accent-text, #78c2ad);
    background: rgba(120, 194, 173, 0.14);
    border-radius: 4px;
    padding: 0 0.22em;
}
body[data-bs-theme="light"] .o-mention {
    /* The accent teal is too light on white; darken for readable contrast. */
    color: #1f6b57;
    background: rgba(31, 107, 87, 0.10);
}

/* Rich-text composer + inline images (Phase 4.7). */
.o-composer-surface {
    min-height: 6.5rem;
    max-height: 22rem;
    overflow-y: auto;
    white-space: pre-wrap;
    cursor: text;
}
.o-composer-surface:empty::before {
    /* Placeholder: contenteditable has no `placeholder` attribute. */
    content: attr(aria-label);
    opacity: 0.55;
    pointer-events: none;
}
.o-composer-surface img,
.o-message-body img {
    /* Never let a wide screenshot blow out the conversation column. */
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    display: block;
    margin: 0.4rem 0;
}
.o-message-body table {
    max-width: 100%;
    overflow-x: auto;
    display: block;
}

/* ── Global search spotlight (Stage 7) ─────────────────────────────────────── */
#spotlight-overlay { position:fixed; inset:0; z-index:4000; display:none;
  background:rgba(0,0,0,.5); backdrop-filter:blur(2px); padding-top:12vh; }
#spotlight-overlay.show { display:block; }
#spotlight-box { width:min(640px,92vw); margin:0 auto; background:#161b22;
  border:1px solid rgba(255,255,255,.14); border-radius:14px; overflow:hidden;
  box-shadow:0 24px 70px rgba(0,0,0,.55); }
body[data-bs-theme="light"] #spotlight-box { background:#fff; border-color:rgba(0,0,0,.12); }
#spotlight-inputwrap { display:flex; align-items:center; gap:10px; padding:14px 16px;
  border-bottom:1px solid rgba(255,255,255,.1); }
body[data-bs-theme="light"] #spotlight-inputwrap { border-bottom-color:rgba(0,0,0,.08); }
#spotlight-inputwrap .bi-search { opacity:.6; }
#spotlight-input { flex:1; border:none; background:transparent; color:inherit;
  font-size:1.05rem; outline:none; }
#spotlight-inputwrap kbd, #spotlight-hint kbd { font-size:.7rem; padding:1px 5px;
  border:1px solid rgba(255,255,255,.2); border-radius:5px; opacity:.7; }
#spotlight-results { list-style:none; margin:0; padding:6px; max-height:52vh; overflow:auto; }
.spotlight-item { display:flex; align-items:center; gap:10px; padding:9px 12px;
  border-radius:8px; cursor:pointer; }
.spotlight-item.active { background:rgba(120,194,173,.18); }
.spotlight-item .bi { opacity:.75; width:1.1em; text-align:center; }
.spotlight-title { flex:0 1 auto; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.spotlight-sub { flex:1; opacity:.6; font-size:.85rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.spotlight-type { margin-left:auto; font-size:.7rem; opacity:.55; text-transform:uppercase; letter-spacing:.04em; }
.spotlight-empty { padding:16px; text-align:center; opacity:.6; }
#spotlight-hint { padding:8px 14px; border-top:1px solid rgba(255,255,255,.08);
  font-size:.72rem; opacity:.55; }
body[data-bs-theme="light"] #spotlight-hint { border-top-color:rgba(0,0,0,.06); }

/* ── Keyboard shortcut cheatsheet (Stage 7) ────────────────────────────────── */
#kbd-help-overlay { position:fixed; inset:0; z-index:4000; display:none;
  background:rgba(0,0,0,.5); backdrop-filter:blur(2px); }
#kbd-help-overlay.show { display:flex; align-items:center; justify-content:center; }
#kbd-help-box { width:min(460px,92vw); background:#161b22; color:#e6edf3;
  border:1px solid rgba(255,255,255,.14); border-radius:14px; overflow:hidden;
  box-shadow:0 24px 70px rgba(0,0,0,.55); }
body[data-bs-theme="light"] #kbd-help-box { background:#fff; color:#212529; border-color:rgba(0,0,0,.12); }
.kbd-help-h { padding:14px 18px; font-weight:600; border-bottom:1px solid rgba(255,255,255,.1); }
body[data-bs-theme="light"] .kbd-help-h { border-bottom-color:rgba(0,0,0,.08); }
.kbd-grid { padding:10px 18px; display:flex; flex-direction:column; gap:8px; }
.kbd-row { display:flex; justify-content:space-between; align-items:center; font-size:.9rem; }
.kbd-row kbd { font-size:.72rem; padding:1px 6px; border:1px solid rgba(128,128,128,.4);
  border-radius:5px; margin:0 1px; }
.kbd-row span:last-child { opacity:.75; }
.kbd-help-f { padding:10px 18px; border-top:1px solid rgba(255,255,255,.08); font-size:.72rem; opacity:.55; }
body[data-bs-theme="light"] .kbd-help-f { border-top-color:rgba(0,0,0,.06); }

/* ── Focus ring baseline (Stage 7 a11y completion) ──────────────────────
   One visible indicator for every keyboard-reachable control, in both
   themes. :focus-visible (not :focus) so a mouse click never paints it —
   the existing `.btn:focus:not(:focus-visible)` rule already relies on that
   distinction. Kept low-specificity so a component can still opt into a
   custom ring; the two `outline:none !important` overrides that used to
   strip it from genuinely interactive elements are fixed below. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
[role="option"]:focus-visible,
[role="tab"]:focus-visible,
[contenteditable="true"]:focus-visible {
    outline: var(--o-focus-ring-width) solid var(--o-focus-ring-color);
    outline-offset: var(--o-focus-ring-offset);
}
/* Elements flush against a panel edge would clip an offset ring. */
.cs-dropdown [tabindex]:focus-visible,
.dropdown-menu a:focus-visible,
.dropdown-menu button:focus-visible {
    outline-offset: -1px;
}

/* ── Breadcrumbs (Stage 7) ──────────────────────────────────────────────
   Derived inside _page_header.html from back_url/back_label, so this styles
   every page with a back button. Deliberately quiet: it is orientation, not
   navigation chrome, and must not compete with the page title below it. */
.o-breadcrumb .breadcrumb {
    font-size: var(--fs-xs);
    margin-bottom: var(--sp-1);
    padding: 0;
    background: transparent;
}
.o-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    color: var(--bs-secondary-color, #8b95a5);
}
.o-breadcrumb .breadcrumb-item a {
    color: #a0a9b8;
    text-decoration: none;
}
.o-breadcrumb .breadcrumb-item a:hover,
.o-breadcrumb .breadcrumb-item a:focus-visible {
    color: var(--omniroq-accent-text, #78c2ad);
    text-decoration: underline;
}
.o-breadcrumb .breadcrumb-item.active {
    color: #8b95a5;
}
body[data-bs-theme="light"] .o-breadcrumb .breadcrumb-item a { color: #5a6472; }
body[data-bs-theme="light"] .o-breadcrumb .breadcrumb-item.active { color: #6c757d; }

/* Long titles must not push the trail into a second line of scroll. */
@media (max-width: 575.98px) {
    .o-breadcrumb .breadcrumb-item.active { display: none; }
}

/* ============================================================
   BUTTON EMPHASIS LAYER
   Lives at the end of the file on purpose. These modifiers tie on specificity
   with the .btn-outline-primary rules around line 5600 — (0,3,1) against
   (0,3,1) — so source order decides, and anywhere earlier they silently lose.
   The first attempt sat near the top and the quiet buttons kept rendering mint.
   ============================================================ */
/* ── Button emphasis: .o-btn-key / .o-btn-quiet ──────────────
   Every toolbar in the app renders as a row of identically-weighted buttons —
   nine on /leads/, nine on /dashboard/ — so the action you almost always want
   ("Add Lead", "New Dashboard") is indistinguishable from "Import" or from the
   five CSV/PDF export utilities beside it.

   This is not a template oversight. The button_style setting maps .btn-primary
   and .btn-outline-primary to the SAME treatment in all seven of its modes, so
   emphasis cannot be expressed by picking one class over the other — the knob
   flattens them back together.

   So emphasis is expressed orthogonally to fill:
     * where the ambient style does not already fill (outline, flat, bordered,
       glass, elevated), the key action takes the accent fill;
     * where it does fill everything (filled, gradient), a fill would be
       invisible, so the key action takes a ring instead.
   Either way there is exactly one loud control per toolbar, in all seven modes,
   and the tenant's chosen style still governs everything else. */
/* Scoped, not bare. `.o-btn-key { font-weight: 600 }` is (0,1,0) and
   `.crm-standard-header .btn { font-weight: 500 }` is (0,2,0), so on every page
   that uses the standard header — which is every list page — the bare rule
   lost and the key action was never bolded. Only the fill was applying. The
   colour rules below were given `body[data-bs-theme]` for exactly this reason;
   this one was left behind. Measured on /contacts/ before the fix: computed
   font-weight 500 against a declared 600. */
body[data-bs-theme] .btn.o-btn-key { font-weight: 600; }

body[data-bs-theme]:not(.omniroq-btn-filled):not(.omniroq-btn-gradient) .btn.o-btn-key {
    background-color: var(--omniroq-accent, #78c2ad) !important;
    border-color: var(--omniroq-accent, #78c2ad) !important;
    color: var(--omniroq-accent-contrast, #1f2328) !important;
}
body[data-bs-theme]:not(.omniroq-btn-filled):not(.omniroq-btn-gradient) .btn.o-btn-key:hover,
body[data-bs-theme]:not(.omniroq-btn-filled):not(.omniroq-btn-gradient) .btn.o-btn-key:focus-visible {
    background-color: color-mix(in srgb, var(--omniroq-accent, #78c2ad) 82%, #000) !important;
    border-color: color-mix(in srgb, var(--omniroq-accent, #78c2ad) 82%, #000) !important;
}
/* Already-filled modes: a ring, since another fill would say nothing. */
body[data-bs-theme].omniroq-btn-filled .btn.o-btn-key,
body[data-bs-theme].omniroq-btn-gradient .btn.o-btn-key {
    box-shadow: 0 0 0 2px var(--bs-body-bg, #0d1117),
                0 0 0 4px rgba(var(--omniroq-accent-rgb, 120, 194, 173), 0.85) !important;
}

/* The quiet end — for genuinely secondary controls that opt in with
   .o-btn-quiet.

   The list toolbar's export group used to be included here by container
   (`.list-toolbar .custom-buttons .btn`), on the reasoning that Copy/Print/
   Export are utilities rather than decisions. In place that read as broken
   rather than restrained: Copy, Print and Export sit in the same bar as
   Advanced Filter and List Configuration, which are equally utilities, and the
   two halves of one toolbar rendered in two different styles. A toolbar reads
   as one thing, so its buttons look like one set — the export group now
   inherits btn-outline-primary and the shared .o-toolbar-btn hover like every
   other control in the bar.

   Explicit greys, not --bs-secondary-*: this theme aliases --bs-secondary to
   the accent (see the :root block), so the "muted" Bootstrap variables render
   mint here and the quiet buttons came out looking exactly like the loud ones.
   Both values clear AA against their own surface (7.4:1 dark, 7.5:1 light). */
body[data-bs-theme] .btn.o-btn-quiet {
    background-color: transparent !important;
    border-color: rgba(255, 255, 255, 0.16) !important;
    color: #a3aebc !important;
    font-weight: 400;
}
body[data-bs-theme].omniroq-light-theme .btn.o-btn-quiet,
[data-bs-theme="light"] .btn.o-btn-quiet {
    border-color: rgba(29, 39, 51, 0.20) !important;
    color: #45566a !important;
}
body[data-bs-theme] .btn.o-btn-quiet:hover,
body[data-bs-theme] .btn.o-btn-quiet:focus-visible {
    border-color: var(--omniroq-accent, #78c2ad) !important;
    color: var(--omniroq-accent-text, #78c2ad) !important;
}


/* ============================================================
   APPEARANCE — CARD EDGE, FOCUS RING, TABLE ROWS, CONTENT WIDTH
   Four settings added on top of the existing appearance system. Each is driven
   by a body class emitted from base.html, exactly like the knobs before it, so
   the tenant setting and the per-user override both reach it for free.
   ============================================================ */

/* ── The animated angle ──────────────────────────────────────
   @property is what makes an angle animatable at all — a plain custom property
   interpolates as a string and the gradient simply jumps. Where it is
   unsupported the angle stays at its initial value, which is why every edge
   treatment below is designed to look finished when static: the rotation is an
   enhancement, never the thing carrying the design. */
@property --o-edge-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}
@keyframes o-edge-spin { to { --o-edge-angle: 360deg; } }

:root {
    /* Duration is a variable so the animation_speed setting can drive it. */
    --o-edge-duration: 6s;
    /* The solid colour painted *inside* the gradient border. The two-layer
       background-clip trick needs an opaque inner fill; it is a variable so the
       card_style setting (filled/glass/gradient) can substitute its own. */
    --o-card-surface: #212529;
}
[data-bs-theme="light"] { --o-card-surface: #ffffff; }

body.omniroq-speed-fast   { --o-edge-duration: 3s; }
body.omniroq-speed-normal { --o-edge-duration: 6s; }
body.omniroq-speed-slow   { --o-edge-duration: 11s; }

/* ── Rotating glow ───────────────────────────────────────────
   A conic gradient painted into the border box, with the card's own surface
   painted over the padding box on top of it — so the gradient is visible only
   in the border ring. Cheaper and far more robust than a blurred pseudo-element
   behind the card, which needs a negative z-index and breaks the moment any
   ancestor creates a stacking context. */
body[data-bs-theme].omniroq-cardedge-rotating .card,
body[data-bs-theme].omniroq-cardedge-rotating .o-card,
body[data-bs-theme].omniroq-cardedge-rotating .omniroq-dashboard-card {
    border: 2px solid transparent !important;
    background-image:
        linear-gradient(var(--o-card-surface), var(--o-card-surface)),
        /* Two narrow comets 180deg apart, each with a near-white core.
           A broad two-stop sweep was the first attempt and read as a border
           that merely breathed — at 2px on a dark surface a wide gradient has
           nowhere to show its travel. Concentrating the light into short arcs
           makes the movement legible, and opposing them keeps the card evenly
           lit instead of looking half-on. */
        conic-gradient(from var(--o-edge-angle),
            rgba(var(--omniroq-accent-rgb, 120, 194, 173), 0.10)   0deg,
            rgba(var(--omniroq-accent-rgb, 120, 194, 173), 1)     36deg,
            rgba(255, 255, 255, 0.92)                             50deg,
            rgba(var(--omniroq-accent-rgb, 120, 194, 173), 1)     64deg,
            rgba(var(--omniroq-accent-rgb, 120, 194, 173), 0.10) 110deg,
            rgba(var(--omniroq-accent-rgb, 120, 194, 173), 0.10) 216deg,
            rgba(var(--omniroq-accent-rgb, 120, 194, 173), 1)    244deg,
            rgba(255, 255, 255, 0.92)                            258deg,
            rgba(var(--omniroq-accent-rgb, 120, 194, 173), 1)    272deg,
            rgba(var(--omniroq-accent-rgb, 120, 194, 173), 0.10) 318deg,
            rgba(var(--omniroq-accent-rgb, 120, 194, 173), 0.10) 360deg) !important;
    background-origin: border-box !important;
    background-clip: padding-box, border-box !important;
    animation: o-edge-spin var(--o-edge-duration) linear infinite;
}

/* ── Static glow ── the same ring, not moving. */
body[data-bs-theme].omniroq-cardedge-glow .card,
body[data-bs-theme].omniroq-cardedge-glow .o-card,
body[data-bs-theme].omniroq-cardedge-glow .omniroq-dashboard-card {
    border-color: rgba(var(--omniroq-accent-rgb, 120, 194, 173), 0.45) !important;
    /* !important because shadow_intensity styles .card shadows at matching
       specificity; without it the glow silently lost to the card's own shadow. */
    box-shadow: 0 0 0 1px rgba(var(--omniroq-accent-rgb, 120, 194, 173), 0.18),
                0 0 18px -4px rgba(var(--omniroq-accent-rgb, 120, 194, 173), 0.45) !important;
}

/* ── Gradient edge ── fixed angle, no animation. */
body[data-bs-theme].omniroq-cardedge-gradient .card,
body[data-bs-theme].omniroq-cardedge-gradient .o-card,
body[data-bs-theme].omniroq-cardedge-gradient .omniroq-dashboard-card {
    border: 2px solid transparent !important;
    background-image:
        linear-gradient(var(--o-card-surface), var(--o-card-surface)),
        linear-gradient(135deg,
            rgba(var(--omniroq-accent-rgb, 120, 194, 173), 0.9),
            rgba(var(--omniroq-accent-rgb, 120, 194, 173), 0.05)) !important;
    background-origin: border-box !important;
    background-clip: padding-box, border-box !important;
}

/* ── Accent top rule ── the quietest option, and the one that scales to a
   dense page: a 2px accent edge on the top of each card only. */
body[data-bs-theme].omniroq-cardedge-accent-top .card,
body[data-bs-theme].omniroq-cardedge-accent-top .o-card,
body[data-bs-theme].omniroq-cardedge-accent-top .omniroq-dashboard-card {
    border-top: 2px solid var(--omniroq-accent, #78c2ad) !important;
}

/* Motion is opt-out in two directions and both must win: the tenant's
   "animations enabled" switch, and the OS-level reduced-motion preference.
   The gradient stays — only the rotation stops — so the card still looks
   deliberate rather than losing its treatment entirely. */
body[data-bs-theme].omniroq-anim-disabled.omniroq-cardedge-rotating .card,
body[data-bs-theme].omniroq-anim-disabled.omniroq-cardedge-rotating .o-card,
body[data-bs-theme].omniroq-anim-disabled.omniroq-cardedge-rotating .omniroq-dashboard-card {
    animation: none !important;
}
@media (prefers-reduced-motion: reduce) {
    body[data-bs-theme].omniroq-cardedge-rotating .card,
    body[data-bs-theme].omniroq-cardedge-rotating .o-card,
    body[data-bs-theme].omniroq-cardedge-rotating .omniroq-dashboard-card {
        animation: none !important;
    }
}

/* ── Focus ring weight ───────────────────────────────────────
   Weight only. There is deliberately no "off": the ring is a WCAG 2.4.7
   requirement, and it was already missing app-wide once. */
body.omniroq-focusring-thick  { --o-focus-ring-width: 3px; }
body.omniroq-focusring-offset { --o-focus-ring-width: 2px; --o-focus-ring-offset: 4px; }
body.omniroq-focusring-glow   { --o-focus-ring-width: 2px; --o-focus-ring-offset: 2px; }
body.omniroq-focusring-glow a:focus-visible,
body.omniroq-focusring-glow .btn:focus-visible,
body.omniroq-focusring-glow button:focus-visible,
body.omniroq-focusring-glow .form-control:focus-visible,
body.omniroq-focusring-glow .form-select:focus-visible {
    box-shadow: 0 0 0 4px rgba(var(--omniroq-accent-rgb, 120, 194, 173), 0.30) !important;
}

/* ── Table row separation ────────────────────────────────────
   Uses colour-mix against the row's own surface rather than a fixed overlay, so
   it reads the same on either theme without a second rule. */
body.omniroq-stripe-zebra table tbody tr:nth-child(even) > * {
    background-color: color-mix(in srgb, currentColor 4%, transparent);
}
body.omniroq-stripe-lines table tbody tr > * {
    border-bottom: 1px solid var(--bs-border-color, rgba(128, 128, 128, 0.22));
}

/* ── Content width ───────────────────────────────────────────
   Long measures are the most common way a full-width app reads as unfinished:
   a table is fine at 2560px, a form is not. Applies only above the widest
   breakpoint, so nothing changes on a laptop. */
@media (min-width: 1400px) {
    body.omniroq-width-wide main > .container-fluid,
    body.omniroq-width-wide main > .container {
        max-width: 1600px;
        margin-inline: auto;
    }
    body.omniroq-width-comfortable main > .container-fluid,
    body.omniroq-width-comfortable main > .container {
        max-width: 1320px;
        margin-inline: auto;
    }
}


/* ============================================================
   APPEARANCE — DENSITY, TYPE WEIGHT, TRACKING, DIVIDERS
   ============================================================ */

/* ── Navigation density ── sidebar/nav item rhythm. The sidebar's items are
   .olsb-item; .olsb-link alone never matched one, so the setting skipped the
   sidebar it was named for. */
body.omniroq-navdensity-compact  :is(.olsb-link, .olsb-item), body.omniroq-navdensity-compact  .nav-link { padding-top: .28rem; padding-bottom: .28rem; }
body.omniroq-navdensity-normal   :is(.olsb-link, .olsb-item), body.omniroq-navdensity-normal   .nav-link { padding-top: .45rem; padding-bottom: .45rem; }
body.omniroq-navdensity-spacious :is(.olsb-link, .olsb-item), body.omniroq-navdensity-spacious .nav-link { padding-top: .70rem; padding-bottom: .70rem; }

/* ── Heading weight ──
   Scoped to real headings and the app's own page-title class, not to a blanket
   element selector, so it cannot reach into cards and tables. */
body.omniroq-headweight-normal   h1, body.omniroq-headweight-normal   h2,
body.omniroq-headweight-normal   h3, body.omniroq-headweight-normal   .o-page-header h1 { font-weight: 500; }
body.omniroq-headweight-semibold h1, body.omniroq-headweight-semibold h2,
body.omniroq-headweight-semibold h3, body.omniroq-headweight-semibold .o-page-header h1 { font-weight: 600; }
body.omniroq-headweight-bold     h1, body.omniroq-headweight-bold     h2,
body.omniroq-headweight-bold     h3, body.omniroq-headweight-bold     .o-page-header h1 { font-weight: 700; }

/* ── Letter spacing ──
   Headings take a negative track (tighter reads as more deliberate at large
   sizes); uppercase micro-labels take a positive one, because uppercase at
   10-11px is unreadable without it. The two move together but never in the
   same direction — that is the whole point of tracking as a setting. */
body.omniroq-tracking-tight  h1, body.omniroq-tracking-tight  h2, body.omniroq-tracking-tight  h3 { letter-spacing: -0.03em; }
body.omniroq-tracking-normal h1, body.omniroq-tracking-normal h2, body.omniroq-tracking-normal h3 { letter-spacing: -0.015em; }
body.omniroq-tracking-wide   h1, body.omniroq-tracking-wide   h2, body.omniroq-tracking-wide   h3 { letter-spacing: 0; }
body.omniroq-tracking-tight  .olsb-label, body.omniroq-tracking-tight  .settings-card-title { letter-spacing: .04em; }
body.omniroq-tracking-normal .olsb-label, body.omniroq-tracking-normal .settings-card-title { letter-spacing: .09em; }
body.omniroq-tracking-wide   .olsb-label, body.omniroq-tracking-wide   .settings-card-title { letter-spacing: .16em; }

/* ── Divider weight ──
   Drives the Bootstrap border token, so every rule, table line, card edge and
   input border in the app follows without listing them. */
body.omniroq-divider-hairline { --bs-border-color: rgba(128, 128, 128, 0.20); }
body.omniroq-divider-soft     { --bs-border-color: rgba(128, 128, 128, 0.12); }
body.omniroq-divider-strong   { --bs-border-color: rgba(128, 128, 128, 0.38); }
body.omniroq-divider-strong hr,
body.omniroq-divider-strong .border-top,
body.omniroq-divider-strong .border-bottom { border-color: var(--bs-border-color) !important; }


/* ============================================================
   APPEARANCE PRESET GALLERY
   ============================================================ */
.o-preset-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(228px, 1fr));
    gap: 10px;
}
.o-preset {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px;
    text-align: left;
    border: 1px solid var(--bs-border-color, rgba(128, 128, 128, 0.22));
    border-radius: var(--radius-lg, 8px);
    background: transparent;
    color: inherit;
    cursor: pointer;
    transition: border-color .16s var(--o-ease), background-color .16s var(--o-ease);
}
.o-preset:hover { border-color: var(--omniroq-accent, #78c2ad); }
.o-preset.is-active {
    border-color: var(--omniroq-accent, #78c2ad);
    background: rgba(var(--omniroq-accent-rgb, 120, 194, 173), 0.08);
}
.o-preset-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.o-preset-name { font-size: .84rem; font-weight: 600; }
.o-preset-mood {
    font-size: .62rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--omniroq-accent-text, #78c2ad);
}
.o-preset-desc { font-size: .72rem; line-height: 1.45; color: var(--bs-secondary-color, #97a3b2); opacity: .92; }

/* Each swatch is a miniature of what the preset does — a card edge, a control
   and two rules — so the gallery can be read at a glance instead of by
   applying every option in turn. */
.o-preset-swatch {
    flex: 0 0 auto;
    width: 46px; height: 46px;
    border-radius: 6px;
    border: 1px solid rgba(128, 128, 128, 0.30);
    background: rgba(128, 128, 128, 0.10);
    display: flex; flex-direction: column; justify-content: center;
    gap: 4px; padding: 7px;
    overflow: hidden;
}
.o-preset-chip { display: block; height: 7px; width: 60%; border-radius: 4px; background: var(--omniroq-accent, #78c2ad); }
.o-preset-bar  { display: block; height: 3px; width: 100%; border-radius: 2px; background: currentColor; opacity: .28; }
.o-preset-bar--short { width: 66%; }

/* Per-preset swatch cues. Only the traits that read at 46px are expressed:
   corner radius, edge treatment and fill weight. */
.o-preset-swatch--midnight,
.o-preset-swatch--compact-pro,
.o-preset-swatch--terminal,
.o-preset-swatch--blueprint,
.o-preset-swatch--editorial { border-radius: 0; }
.o-preset-swatch--midnight .o-preset-chip,
.o-preset-swatch--compact-pro .o-preset-chip,
.o-preset-swatch--terminal .o-preset-chip,
.o-preset-swatch--blueprint .o-preset-chip { border-radius: 0; }
.o-preset-swatch--studio,
.o-preset-swatch--neon,
.o-preset-swatch--warmth,
.o-preset-swatch--aurora { border-radius: 14px; }
.o-preset-swatch--studio .o-preset-chip,
.o-preset-swatch--neon .o-preset-chip,
.o-preset-swatch--warmth .o-preset-chip,
.o-preset-swatch--aurora .o-preset-chip { border-radius: 50rem; }
.o-preset-swatch--aurora,
.o-preset-swatch--neon {
    border-color: rgba(var(--omniroq-accent-rgb, 120, 194, 173), 0.85);
    box-shadow: 0 0 10px -2px rgba(var(--omniroq-accent-rgb, 120, 194, 173), 0.7);
}
.o-preset-swatch--high-contrast,
.o-preset-swatch--executive { border-width: 2px; border-color: rgba(128, 128, 128, 0.62); }
.o-preset-swatch--daylight,
.o-preset-swatch--warmth,
.o-preset-swatch--editorial,
.o-preset-swatch--executive { background: rgba(255, 255, 255, 0.82); color: #1d2733; }


/* ============================================================
   HOVER: WHAT REACTS, AND BY HOW MUCH
   ============================================================
   Two rules were being broken before this block.

   1. EVERYTHING reacted. `.card` was in the universal hover selector, so every
      panel, settings section and static container lifted and glowed when the
      pointer crossed it — including surfaces where hovering does nothing at
      all. Motion that does not signal anything is just noise, and when it is
      everywhere it stops meaning "this is interactive".

   2. The amount depended on SIZE. The effect was `scale()`, which is
      multiplicative: at 1.04 a 30px badge grows about one pixel while a 1200px
      dashboard card grows nearly fifty and rides over its neighbours. Same
      setting, wildly different result.

   The fix for both: a surface reacts only if hovering it DOES something, and
   the reaction is measured in fixed pixels so it looks the same everywhere.
   `.card` is no longer in the universal selector; the surfaces below opt in. */

/* Surfaces that genuinely respond to being hovered: dashboard widgets (they
   drill through to records), and anything explicitly marked interactive —
   a linked card, a card with a button role, or one tagged .o-hover-surface. */
.omniroq-dashboard-card,
a.card,
.card[role="button"],
.card[data-href],
.o-hover-surface {
    transition: transform var(--o-dur, .28s) var(--o-ease),
                box-shadow var(--o-dur, .28s) var(--o-ease),
                border-color var(--o-dur, .28s) var(--o-ease);
}
body:not(.omniroq-hover-none):not(.omniroq-anim-disabled) .omniroq-dashboard-card:hover,
body:not(.omniroq-hover-none):not(.omniroq-anim-disabled) a.card:hover,
body:not(.omniroq-hover-none):not(.omniroq-anim-disabled) .card[role="button"]:hover,
body:not(.omniroq-hover-none):not(.omniroq-anim-disabled) .card[data-href]:hover,
body:not(.omniroq-hover-none):not(.omniroq-anim-disabled) .o-hover-surface:hover {
    transform: scale(var(--omniroq-hover-pop-scale, 1.02));
    box-shadow: 0 10px 26px -8px rgba(0, 0, 0, .55),
                0 0 0 1px rgba(var(--omniroq-accent-rgb, 120, 194, 173), .28);
}

/* ── hover_effect: rotating-glow ──────────────────────────────
   The same travelling-light treatment as card_edge, fired on hover instead of
   held permanently. Deliberately shares the --o-edge-angle property and the
   o-edge-spin keyframes so the two settings cannot drift apart: if the edge
   look changes, the hover look changes with it.

   The gradient is painted on hover only, so a board full of cards is not
   running fourteen conic animations at rest. */
body.omniroq-hover-rotating-glow .omniroq-dashboard-card,
body.omniroq-hover-rotating-glow a.card,
body.omniroq-hover-rotating-glow .card[role="button"],
body.omniroq-hover-rotating-glow .o-hover-surface {
    border: 2px solid transparent;
}
body[data-bs-theme].omniroq-hover-rotating-glow:not(.omniroq-anim-disabled) .omniroq-dashboard-card:hover,
body[data-bs-theme].omniroq-hover-rotating-glow:not(.omniroq-anim-disabled) a.card:hover,
body[data-bs-theme].omniroq-hover-rotating-glow:not(.omniroq-anim-disabled) .card[role="button"]:hover,
body[data-bs-theme].omniroq-hover-rotating-glow:not(.omniroq-anim-disabled) .o-hover-surface:hover {
    background-image:
        linear-gradient(var(--o-card-surface), var(--o-card-surface)),
        conic-gradient(from var(--o-edge-angle),
            rgba(var(--omniroq-accent-rgb, 120, 194, 173), 0.10)   0deg,
            rgba(var(--omniroq-accent-rgb, 120, 194, 173), 1)     36deg,
            rgba(255, 255, 255, 0.92)                             50deg,
            rgba(var(--omniroq-accent-rgb, 120, 194, 173), 1)     64deg,
            rgba(var(--omniroq-accent-rgb, 120, 194, 173), 0.10) 110deg,
            rgba(var(--omniroq-accent-rgb, 120, 194, 173), 0.10) 216deg,
            rgba(var(--omniroq-accent-rgb, 120, 194, 173), 1)    244deg,
            rgba(255, 255, 255, 0.92)                            258deg,
            rgba(var(--omniroq-accent-rgb, 120, 194, 173), 1)    272deg,
            rgba(var(--omniroq-accent-rgb, 120, 194, 173), 0.10) 318deg,
            rgba(var(--omniroq-accent-rgb, 120, 194, 173), 0.10) 360deg) !important;
    background-origin: border-box !important;
    background-clip: padding-box, border-box !important;
    animation: o-edge-spin var(--o-edge-duration) linear infinite;
    transform: scale(var(--omniroq-hover-pop-scale, 1.02));
}
@media (prefers-reduced-motion: reduce) {
    body.omniroq-hover-rotating-glow .omniroq-dashboard-card:hover,
    body.omniroq-hover-rotating-glow a.card:hover,
    body.omniroq-hover-rotating-glow .card[role="button"]:hover,
    body.omniroq-hover-rotating-glow .o-hover-surface:hover { animation: none !important; }
}

/* A plain container never reacts, whatever the hover setting says. Listed
   explicitly because several older rules still name .card:hover directly. */
.settings-card:hover,
.o-app-footer:hover {
    transform: none !important;
    translate: none !important;
    filter: none !important;
}


/* ============================================================
   TOOLBAR BUTTONS — COMPACT, AND COLLAPSIBLE
   ============================================================ */

/* Icon + label, with the label able to drop out under pressure. */
.o-toolbar-btn { gap: 0.38rem; }
.o-toolbar-btn .bi { font-size: 0.92em; line-height: 1; }

/* Below this the toolbar cannot hold icon+label for every control without
   wrapping, so the labels go and the icons stay. This is only tolerable because
   every one of these buttons now carries a tooltip — see static/js/tooltips.js.
   Without that, hiding the labels would just make the toolbar unreadable. */
@media (max-width: 1200px) {
    .list-toolbar .o-toolbar-btn .o-toolbar-btn-label { display: none; }
    .list-toolbar .o-toolbar-btn { padding-inline: 0.5rem !important; }
    /* A dropdown caret next to a bare icon reads as clutter at this size; the
       icon plus its tooltip already says "there is a menu here". */
    .list-toolbar .o-toolbar-btn.dropdown-toggle::after { display: none; }
}

/* The export menu inherits the app's dropdown treatment rather than Bootstrap's
   default white panel. */
.custom-buttons .dropdown-menu {
    min-width: 11rem;
    padding: 0.3rem;
}
.custom-buttons .dropdown-item {
    display: flex;
    align-items: center;
    border-radius: var(--radius-md, 4px);
    font-size: 0.84rem;
    padding: 0.4rem 0.6rem;
}

/* Header action buttons: same compact scale, so a page header with a search
   field and three actions stays on one line. */
.o-page-header .btn,
.crm-standard-header .btn {
    min-height: 32px;
    font-size: 0.86rem !important;
    padding: 0.3rem 0.72rem !important;
}
@media (max-width: 1050px) {
    .o-page-header .btn .o-toolbar-btn-label { display: none; }
}

/* Tooltip carrier for controls that already own a Bootstrap component.
   Bootstrap allows one component instance per element, so a dropdown or modal
   toggle cannot also hold a tooltip — its Data.set() logs an error and drops
   the second registration, which silently costs the control its real behaviour.
   The title moves to this wrapper instead. inline-flex so it disappears into
   flex toolbars rather than becoming a layout participant of its own. */
.o-tip-wrap {
    display: inline-flex;
    align-items: center;
}

/* Org chart rows.
   The hierarchy is the entire content of this page, so it is drawn rather than
   implied: each level indents by a fixed step and carries an L-shaped rail to
   its parent. Depth is capped at six because a chart deeper than that has
   stopped being readable as a table, and an uncapped rule would need one class
   per level for ever. */
.o-org-name {
    display: flex;
    align-items: center;
    min-height: 1.5rem;
}
.o-org-rail {
    flex: 0 0 auto;
    width: 0.85rem;
    height: 1.1rem;
    border-left: 1px solid rgba(var(--omniroq-accent-rgb, 120, 194, 173), 0.45);
    border-bottom: 1px solid rgba(var(--omniroq-accent-rgb, 120, 194, 173), 0.45);
    border-bottom-left-radius: 5px;
    margin-right: 0.5rem;
    align-self: flex-start;
    margin-top: -0.15rem;
}
.o-org-d1 { margin-left: 0.75rem; }
.o-org-d2 { margin-left: 2.25rem; }
.o-org-d3 { margin-left: 3.75rem; }
.o-org-d4 { margin-left: 5.25rem; }
.o-org-d5 { margin-left: 6.75rem; }
.o-org-d6 { margin-left: 8.25rem; }

/* Hiring board.
   A horizontal strip of fixed-width columns that scrolls inside itself. The
   grid alternative reflows columns onto a second row as the pipeline widens,
   which turns a left-to-right process into a wrapped paragraph and loses the
   one thing the layout is carrying. */
.o-board {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    align-items: flex-start;
}
.o-board-col {
    flex: 0 0 15rem;
    min-height: 7rem;
}
.o-board-card {
    border: 1px solid rgba(var(--omniroq-accent-rgb, 120, 194, 173), 0.22);
    border-radius: var(--radius-md, 4px);
    padding: 0.5rem 0.65rem;
    transition: border-color 0.12s ease-in-out;
}
.o-board-card:hover,
.o-board-card:focus-visible {
    border-color: rgba(var(--omniroq-accent-rgb, 120, 194, 173), 0.6);
}

/* ── Narrow numeric field ────────────────────────────────────────────────
   A two- or three-digit box sitting inline among wider controls: the
   shop-floor "log time" entry in a routing row, an agent's max-open-tickets
   cap. Left to the grid each stretches to its cell and reads like the row's
   main field. Width only — colour and border come from .form-control as
   everywhere else. */
.o-num-narrow {
    max-width: 6rem;
}

/* ── Hover pop stays sharp ───────────────────────────────────────────────────
   Most hover-pop rules above declared `will-change: transform` (often with
   `filter`) permanently. That asks the browser to keep the element as a
   pre-rendered bitmap — so when the pop scales it, it scales the bitmap, and
   text and logos go soft and stay soft while hovered. Without the hint the
   browser still animates the scale, then re-renders the element crisp at its
   final size. The hint earns its keep on things that move continuously; a
   control that grows by a few pixels on hover is not one of them. */
:is(a, button, .btn, .nav-link, .dropdown-item, .page-link, .badge,
    .settings-nav-item, .nav-item, .breadcrumb-item, .navbar-brand, .btn-close,
    .accordion-button, .form-check-label, .form-select, .form-control,
    .omniroq-dashboard-card, .card, .omniroq-brand-lockup, .nav-icon-wrap,
    .detail-description-card, .detail-files-panel, .detail-files-table-wrap,
    .detail-empty-state, .comment-entry, .Omniroq-teal-frame, .o-hover-surface) {
    will-change: auto !important;
}