/* ==========================================================================
   Omexis One — Design System
   Tokens + component styles. Light/dark via [data-bs-theme].
   ========================================================================== */

/* ---------- 1. Design tokens ---------- */
:root {
    /* Brand — RC47 Refined Omexis Gold (light, premium, restrained) */
    --omx-brand-900: #0d1424;
    --omx-brand-800: #101828;
    --omx-brand-700: #1d2939;
    --omx-gold:        #be9b3e;                /* refined gold — accents, active indicator, icons */
    --omx-gold-strong: #8a6d1e;                /* deeper gold — primary buttons + white text (AA) */
    --omx-gold-hover:  #71581a;                /* button hover */
    --omx-gold-soft:   rgba(190, 155, 62, 0.10); /* soft gold tint — hover/active surfaces */
    --omx-gold-border: rgba(190, 155, 62, 0.30);
    /* Back-compat aliases: components already reference --omx-accent* */
    --omx-accent:       var(--omx-gold);
    --omx-accent-hover: var(--omx-gold-hover);
    --omx-accent-soft:  var(--omx-gold-soft);

    /* Semantic surfaces — light, warm neutral */
    --omx-bg: #f6f5f1;             /* soft off-white app background */
    --omx-surface: #ffffff;        /* cards / content */
    --omx-surface-2: #faf9f6;      /* elevated / alt surface */
    --omx-border: #e6e3dc;         /* soft warm-neutral border */
    --omx-text: #1f2430;           /* dark charcoal primary text */
    --omx-text-muted: #6b7280;     /* medium neutral secondary text */
    /* RC52 W1: the sidebar palette is NO LONGER an unconditional :root
       authority. It paints from [data-omx-sidebar-theme], which the server
       emits in the first response — see the omx-dark block below. */
    --omx-sidebar-text: #c7ccd6;   /* light readable nav text on dark */
    --omx-sidebar-muted: #7b8496;  /* section labels */

    /* Status */
    --omx-success: #12855f;
    --omx-success-soft: rgba(18, 133, 95, 0.12);
    --omx-warning: #d97706;          /* amber — clearly distinct from gold */
    --omx-warning-soft: rgba(247, 144, 9, 0.14);
    --omx-danger: #d92d20;
    --omx-danger-soft: rgba(217, 45, 32, 0.12);
    --omx-info: #175cd3;
    --omx-info-soft: rgba(23, 92, 211, 0.12);
    --omx-neutral: #475467;
    --omx-neutral-soft: rgba(71, 84, 103, 0.12);

    /* Radius */
    --omx-radius-sm: 0.375rem;
    --omx-radius-md: 0.625rem;
    --omx-radius-lg: 1rem;
    --omx-radius-pill: 100rem;

    /* Shadows */
    --omx-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
    --omx-shadow-md: 0 4px 12px -2px rgba(16, 24, 40, 0.10);
    --omx-shadow-lg: 0 16px 40px -8px rgba(16, 24, 40, 0.18);

    /* Typography */
    --omx-font: 'Inter', system-ui, -apple-system, sans-serif;
    --omx-fs-xs: 0.72rem;
    --omx-fs-sm: 0.84rem;
    --omx-fs-md: 0.95rem;
    --omx-fs-lg: 1.15rem;
    --omx-fs-xl: 1.5rem;

    /* Spacing scale */
    --omx-sp-1: 0.25rem;
    --omx-sp-2: 0.5rem;
    --omx-sp-3: 1rem;
    --omx-sp-4: 1.5rem;
    --omx-sp-5: 2.5rem;

    /* Layout */
    --omx-sidebar-width: 264px;
    --omx-topbar-height: 64px;
}

/* ---------- Dark theme overrides ---------- */
[data-bs-theme="dark"] {
    --omx-bg: #0b0f1a;
    --omx-surface: #121826;
    --omx-surface-2: #182032;
    --omx-border: #232d42;
    --omx-text: #e7ecf4;
    --omx-text-muted: #8a94a8;
    --omx-sidebar-bg: #12161f;
    --omx-sidebar-text: #c7ccd6;
    --omx-sidebar-muted: #7a828f;
    --omx-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --omx-shadow-md: 0 4px 12px -2px rgba(0, 0, 0, 0.5);
    --omx-shadow-lg: 0 16px 40px -8px rgba(0, 0, 0, 0.65);
}

/* ---------- 2. Base ---------- */
body.omx-app {
    font-family: var(--omx-font);
    background: var(--omx-bg);
    color: var(--omx-text);
    min-height: 100vh;
    font-size: var(--omx-fs-md);
}

.omx-app ::-webkit-scrollbar { width: 8px; height: 8px; }
.omx-app ::-webkit-scrollbar-thumb { background: var(--omx-border); border-radius: var(--omx-radius-pill); }

/* ---------- 3. Sidebar ---------- */
.omx-sidebar {
    width: var(--omx-sidebar-width);
    min-height: 100vh;
    background: var(--omx-sidebar-bg);
    border-right: 1px solid var(--omx-border);
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 1040;
    display: flex;
    flex-direction: column;
    transition: margin-left 0.25s ease;
}
.omx-sidebar .omx-brand {
    height: var(--omx-topbar-height);
    display: flex;
    align-items: center;
    padding: 0 1.5rem;
    border-bottom: 1px solid var(--omx-border);
}
.omx-sidebar .omx-brand a {
    color: var(--omx-text);
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-decoration: none;
}
.omx-sidebar .omx-brand a span { color: var(--omx-accent); }
.omx-nav { flex: 1; overflow-y: auto; padding: 0.75rem 0 1rem; }
.omx-nav-label {
    font-size: var(--omx-fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--omx-sidebar-muted);
    padding: 1.1rem 1.5rem 0.35rem;
}
.omx-nav-link {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.6rem 1.5rem;
    color: var(--omx-sidebar-text);
    font-size: var(--omx-fs-sm);
    font-weight: 500;
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: background 0.15s, color 0.15s;
}
.omx-nav-link i { width: 1.3rem; text-align: center; font-size: 1.02rem; }
.omx-nav-link:hover { color: var(--omx-text); background: var(--omx-gold-soft); }
.omx-nav-link.active {
    color: var(--omx-text);
    background: var(--omx-gold-soft);
    border-left-color: var(--omx-gold);
    font-weight: 600;
}
.omx-nav-link.active i { color: var(--omx-gold); }
.omx-sidebar-footer {
    padding: 0.9rem 1.5rem;
    border-top: 1px solid var(--omx-border);
    color: var(--omx-sidebar-muted);
    font-size: var(--omx-fs-xs);
}

/* ---------- 4. Main / Topbar ---------- */
.omx-main { margin-left: var(--omx-sidebar-width); transition: margin-left 0.25s ease; }
.omx-topbar {
    height: var(--omx-topbar-height);
    background: var(--omx-surface);
    border-bottom: 1px solid var(--omx-border);
    position: sticky;
    top: 0;
    z-index: 1020;
}
.omx-search {
    background: var(--omx-surface-2);
    border: 1px solid var(--omx-border);
    border-radius: var(--omx-radius-pill);
    color: var(--omx-text);
    font-size: var(--omx-fs-sm);
    padding: 0.45rem 1rem 0.45rem 2.4rem;
    width: 280px;
    transition: width 0.2s ease, border-color 0.15s;
}
.omx-search:focus { outline: none; border-color: var(--omx-accent); width: 340px; }
.omx-icon-btn {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--omx-border);
    border-radius: var(--omx-radius-md);
    background: var(--omx-surface);
    color: var(--omx-text-muted);
    position: relative;
    transition: color 0.15s, border-color 0.15s;
}
.omx-icon-btn:hover { color: var(--omx-accent-hover); border-color: var(--omx-accent); }
.omx-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--omx-brand-800);
    color: var(--omx-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: var(--omx-fs-sm);
}

/* ---------- 5. Cards & panels ---------- */
.omx-card {
    background: var(--omx-surface);
    border: 1px solid var(--omx-border);
    border-radius: var(--omx-radius-lg);
    box-shadow: var(--omx-shadow-sm);
}
.omx-card .omx-card-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--omx-border);
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.omx-card-clickable { transition: transform 0.12s ease, border-color 0.15s, box-shadow 0.15s; }
.omx-card-clickable:hover {
    transform: translateY(-2px);
    border-color: var(--omx-accent);
    box-shadow: var(--omx-shadow-md);
}

/* Stat card */
.omx-stat { padding: 1.25rem; display: flex; align-items: flex-start; gap: 1rem; }
.omx-stat-icon {
    width: 46px;
    height: 46px;
    border-radius: var(--omx-radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}
.omx-stat-value { font-size: var(--omx-fs-xl); font-weight: 700; line-height: 1.2; }
.omx-stat-label { color: var(--omx-text-muted); font-size: var(--omx-fs-sm); }
.omx-trend { font-size: var(--omx-fs-xs); font-weight: 600; border-radius: var(--omx-radius-pill); padding: 0.15rem 0.5rem; }
.omx-trend.up { color: var(--omx-success); background: var(--omx-success-soft); }
.omx-trend.down { color: var(--omx-danger); background: var(--omx-danger-soft); }

/* Status badge */
.omx-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: var(--omx-fs-xs);
    font-weight: 600;
    padding: 0.28rem 0.65rem;
    border-radius: var(--omx-radius-pill);
    text-transform: capitalize;
    white-space: nowrap;
}
.omx-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.omx-badge-success { color: var(--omx-success); background: var(--omx-success-soft); }
.omx-badge-warning { color: var(--omx-warning); background: var(--omx-warning-soft); }
.omx-badge-danger { color: var(--omx-danger); background: var(--omx-danger-soft); }
.omx-badge-info { color: var(--omx-info); background: var(--omx-info-soft); }
.omx-badge-neutral { color: var(--omx-neutral); background: var(--omx-neutral-soft); }
.omx-badge-accent { color: var(--omx-accent-hover); background: var(--omx-accent-soft); }
[data-bs-theme="dark"] .omx-badge-neutral { color: #a9b3c6; }

/* ---------- 6. Tables ---------- */
.omx-table { margin: 0; --bs-table-bg: transparent; }
.omx-table thead th {
    font-size: var(--omx-fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--omx-text-muted);
    background: var(--omx-surface-2);
    border-bottom: 1px solid var(--omx-border);
    padding: 0.7rem 1.25rem;
    white-space: nowrap;
}
.omx-table tbody td {
    padding: 0.85rem 1.25rem;
    border-bottom: 1px solid var(--omx-border);
    vertical-align: middle;
    color: var(--omx-text);
    font-size: var(--omx-fs-sm);
}
.omx-table tbody tr:last-child td { border-bottom: 0; }
.omx-table tbody tr:hover td { background: var(--omx-surface-2); }

/* ---------- 7. Page header & breadcrumbs ---------- */
.omx-page-title { font-size: 1.45rem; font-weight: 700; margin: 0; }
.omx-page-subtitle { color: var(--omx-text-muted); font-size: var(--omx-fs-sm); margin: 0.15rem 0 0; }
.omx-breadcrumbs { font-size: var(--omx-fs-xs); color: var(--omx-text-muted); }
.omx-breadcrumbs a { color: var(--omx-text-muted); text-decoration: none; }
.omx-breadcrumbs a:hover { color: var(--omx-accent-hover); }
.omx-breadcrumbs .sep { margin: 0 0.4rem; opacity: 0.5; }

/* ---------- 8. Buttons ---------- */
.btn-omx {
    background: var(--omx-gold-strong);
    border: 1px solid var(--omx-gold-strong);
    color: #fff;
    font-weight: 600;
    font-size: var(--omx-fs-sm);
    border-radius: var(--omx-radius-md);
    padding: 0.5rem 1rem;
}
.btn-omx:hover { background: var(--omx-accent-hover); border-color: var(--omx-accent-hover); color: #fff; }
.btn-omx-outline {
    background: transparent;
    border: 1px solid var(--omx-border);
    color: var(--omx-text);
    font-weight: 500;
    font-size: var(--omx-fs-sm);
    border-radius: var(--omx-radius-md);
    padding: 0.5rem 1rem;
}
.btn-omx-outline:hover { border-color: var(--omx-accent); color: var(--omx-accent-hover); }

/* Quick action */
.omx-quick-action {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 1.1rem;
    background: var(--omx-surface);
    border: 1px solid var(--omx-border);
    border-radius: var(--omx-radius-md);
    color: var(--omx-text);
    font-size: var(--omx-fs-sm);
    font-weight: 500;
    text-decoration: none;
    box-shadow: var(--omx-shadow-sm);
    transition: transform 0.12s ease, border-color 0.15s, box-shadow 0.15s;
}
.omx-quick-action i { color: var(--omx-accent-hover); font-size: 1.05rem; }
.omx-quick-action:hover {
    transform: translateY(-1px);
    border-color: var(--omx-accent);
    box-shadow: var(--omx-shadow-md);
    color: var(--omx-text);
}

/* ---------- 9. Filter panel ---------- */
.omx-filter-panel {
    background: var(--omx-surface);
    border: 1px solid var(--omx-border);
    border-radius: var(--omx-radius-lg);
    padding: 1rem 1.25rem;
}
.omx-filter-panel .form-label { font-size: var(--omx-fs-xs); font-weight: 600; color: var(--omx-text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.omx-filter-panel .form-control,
.omx-filter-panel .form-select {
    background: var(--omx-surface-2);
    border-color: var(--omx-border);
    color: var(--omx-text);
    font-size: var(--omx-fs-sm);
    border-radius: var(--omx-radius-md);
}

/* ---------- 10. Empty state ---------- */
.omx-empty {
    text-align: center;
    padding: var(--omx-sp-5) var(--omx-sp-4);
    color: var(--omx-text-muted);
}
.omx-empty-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background: var(--omx-accent-soft);
    color: var(--omx-accent-hover);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
}
.omx-empty-title { color: var(--omx-text); font-weight: 600; font-size: var(--omx-fs-lg); margin-bottom: 0.25rem; }

/* ---------- 11. Timeline ---------- */
.omx-timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.omx-timeline::before {
    content: '';
    position: absolute;
    left: 17px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: var(--omx-border);
}
.omx-timeline-item { position: relative; padding: 0 0 1.4rem 3rem; }
.omx-timeline-item:last-child { padding-bottom: 0.25rem; }
.omx-timeline-dot {
    position: absolute;
    left: 0;
    top: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--omx-surface);
    border: 1px solid var(--omx-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    z-index: 1;
}
.omx-timeline-time { font-size: var(--omx-fs-xs); color: var(--omx-text-muted); }
.omx-timeline-title { font-weight: 600; font-size: var(--omx-fs-sm); }
.omx-timeline-body { font-size: var(--omx-fs-sm); color: var(--omx-text-muted); }

/* ---------- 12. Responsive ---------- */
@media (max-width: 991.98px) {
    .omx-sidebar { margin-left: calc(-1 * var(--omx-sidebar-width)); }
    .omx-sidebar.show { margin-left: 0; box-shadow: var(--omx-shadow-lg); }
    .omx-main { margin-left: 0; }
    .omx-search { width: 170px; }
    .omx-search:focus { width: 200px; }
}
.omx-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(13, 20, 36, 0.55);
    z-index: 1030;
}
.omx-overlay.show { display: block; }

/* ==========================================================================
   RC28 — Experience & Workspace Programme
   CORE-014 mobile navigation · CORE-015 dark mode + density
   CORE-016 accessibility · ANA-001 evidence widgets
   ========================================================================== */

/* CORE-016 — the skip link. Invisible until focused, then unmissable. */
/* RC49 B4 (audit D2) — the touch-target minimum is a DESIGN TOKEN, not an
   inline style repeated per button. Existing inline min-heights are now
   redundant duplicates (harmless) and stop being required on new screens. */
.btn-omx, .btn-omx-outline { min-height: 44px; }
.btn-omx.btn-sm, .btn-omx-outline.btn-sm { min-height: 31px; }

.omx-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 2000;
    padding: 0.75rem 1.25rem;
    background: var(--omx-accent, #0d6efd);
    color: #fff;
    font-weight: 600;
    border-radius: 0 0 8px 0;
}

.omx-skip-link:focus {
    left: 0;
    outline: 3px solid #fff;
    outline-offset: -3px;
}

/* CORE-016 — a visible focus ring everywhere. Never remove it: a keyboard user
   who cannot see where they are is a user who cannot use the product. */
.omx-app :focus-visible {
    outline: 3px solid var(--omx-accent, #0d6efd);
    outline-offset: 2px;
    border-radius: 4px;
}

/* CORE-014 — the phone. Fixed, thumb-reachable, 44px targets, five items. */
.omx-mobile-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    display: flex;
    background: var(--omx-surface, #fff);
    border-top: 1px solid var(--omx-border, #e5e7eb);
    padding-bottom: env(safe-area-inset-bottom, 0);
}

.omx-mobile-nav-link {
    flex: 1 1 0;
    min-height: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    text-decoration: none;
    color: var(--omx-text-muted, #6b7280);
    font-size: var(--omx-fs-xs, 0.75rem);
}

.omx-mobile-nav-link i {
    font-size: 1.15rem;
}

.omx-mobile-nav-link.active {
    color: var(--omx-accent, #0d6efd);
    font-weight: 600;
    box-shadow: inset 0 2px 0 0 var(--omx-accent, #0d6efd);
}

/* The bar must never cover the last row of a list. */
@media (max-width: 991.98px) {
    .omx-app .omx-main > main {
        padding-bottom: 5.5rem !important;
    }
}

@media (min-width: 992px) {
    .omx-mobile-nav {
        display: none;
    }
}

/* ANA-001 — evidence widgets are equal-height cards; the action sits at the
   bottom so a row of them reads as one instrument panel, not a ransom note. */
.omx-evidence {
    display: flex;
    flex-direction: column;
}

/* CORE-015 — density. A compact user fits roughly a third more rows on screen;
   it changes spacing only, never the 44px hit target of an interactive control. */
[data-omx-density="compact"] .omx-table > :not(caption) > * > * {
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
}

[data-omx-density="compact"] .omx-card-header {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

[data-omx-density="compact"] .omx-page-title {
    font-size: 1.35rem;
}

/* CORE-015 — dark mode is a first-class surface, not an inverted afterthought:
   the tokens below are what every card, table and badge already consumes. */
[data-bs-theme="dark"] {
    --omx-surface: #16181d;
    --omx-surface-2: #1e2128;
    --omx-border: #2b2f38;
    --omx-text: #e8eaed;
    --omx-text-muted: #9aa1ab;
}

/* ==========================================================================
   RC30.1 (Programme A) — Platform ↔ Tenant workspace context banner
   ========================================================================== */
/* RC51 D1 (HP-4): banner → 32px amber STRIP. Icon · name · exit; nothing
   else. Height is the contract (Playbook DoD: ≤40px). Amber = caution
   context, dark text on soft amber for DC-grade contrast. */
.omx-context-banner {
    display: flex;
    align-items: center;
    gap: .6rem;
    height: 32px;
    margin: -0.25rem 0 1rem;
    padding: 0 .75rem;
    border-radius: 8px;
    color: var(--omx-text, #1f2937);
    background: var(--omx-warning-soft);
    border: 1px solid rgba(217, 119, 6, .35);
}
.omx-context-banner__icon { font-size: .95rem; color: var(--omx-warning); flex-shrink: 0; }
.omx-context-banner__name {
    font-size: .85rem;
    font-weight: 600;
    letter-spacing: .01em;
    min-width: 0;
    flex-grow: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.omx-context-banner__exit {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    flex-shrink: 0;
    font-size: .78rem;
    font-weight: 600;
    color: inherit;
    text-decoration: none;
    padding: .1rem .5rem;
    border-radius: 6px;
    border: 1px solid rgba(217, 119, 6, .35);
}
.omx-context-banner__exit:hover { background: rgba(217, 119, 6, .12); color: inherit; }

/* ==========================================================================
   RC30.2.1 — Premium Experience layer
   Expandable nav groups · calmer surfaces · intentional motion · Attention Centre
   ========================================================================== */

/* ---- Sidebar: premium expandable groups ---- */
.omx-nav-group { margin-top: 0.35rem; }
.omx-nav-group__head {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    background: transparent;
    border: 0;
    color: #64748b;
    font-size: var(--omx-fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    padding: 0.85rem 1.5rem 0.4rem;
    cursor: pointer;
    transition: color 0.15s ease;
}
.omx-nav-group__head:hover { color: var(--omx-text); }
.omx-nav-group__chev { font-size: 0.7rem; transition: transform 0.22s ease; opacity: 0.7; }
.omx-nav-group:not(.is-open) .omx-nav-group__chev { transform: rotate(-90deg); }
.omx-nav-group__items {
    overflow: hidden;
    /* RC49 B1 Correction 1: the fixed 40rem cap is gone — the engine animates
       max-height to the MEASURED content height and releases it after the
       transition, so closing has no dead time, tall groups are never clipped
       mid-open, and the motion always matches the real geometry. */
    opacity: 1;
    transition: max-height 0.28s ease, opacity 0.2s ease;
}
.omx-nav-group:not(.is-open) .omx-nav-group__items { max-height: 0; opacity: 0; }
/* RC48 staging scroll fix — during initial restore the group heights must be
   FINAL synchronously: scrollTop set while max-height is still ramping gets
   CLAMPED to the tiny interim scrollHeight (≈0), which is then persisted at
   the next unload — the poisoned-zero cycle. The engine removes the preload
   class one frame AFTER the scroll restore, so user toggles still animate. */
.omx-nav-preload .omx-nav-group__items { transition: none !important; }

/* Nav links: slightly more air + smoother, premium hover */
.omx-nav-link {
    border-radius: 0 var(--omx-radius-pill) var(--omx-radius-pill) 0;
    margin-right: 0.75rem;
    transition: background 0.18s ease, color 0.18s ease, transform 0.12s ease;
}
.omx-nav-link:hover { transform: translateX(2px); }
.omx-nav-link.active { box-shadow: inset 0 0 0 1px var(--omx-gold-border); }

/* ---- Global micro-interactions & calmer surfaces ---- */
.btn { transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease; }
.btn:active { transform: translateY(1px); }
.omx-card, .omx-widget {
    border-radius: var(--omx-radius-lg);
    transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.14s ease;
}
.omx-page-title { letter-spacing: -0.01em; }

/* ---- Skeleton loader utility ---- */
.omx-skeleton {
    position: relative; overflow: hidden;
    background: var(--omx-surface-2);
    border-radius: var(--omx-radius-md);
    min-height: 1rem;
}
.omx-skeleton::after {
    content: ""; position: absolute; inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.45), transparent);
    animation: omx-shimmer 1.3s infinite;
}
[data-bs-theme="dark"] .omx-skeleton::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent); }
@keyframes omx-shimmer { 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
    .omx-skeleton::after { animation: none; }
    .omx-nav-group__items, .omx-nav-group__chev, .omx-nav-link, .btn, .omx-card { transition: none; }
}

/* ---- Attention Centre ---- */
.omx-attention-group__head {
    display: flex; align-items: center; gap: 0.6rem;
    margin: 0 0 0.6rem; font-weight: 650; font-size: var(--omx-fs-md);
}
.omx-attention-group__count {
    margin-left: 0.25rem; font-size: var(--omx-fs-xs); font-weight: 600;
    color: var(--omx-text-muted); background: var(--omx-surface-2);
    border-radius: var(--omx-radius-pill); padding: 0.05rem 0.5rem;
}
.omx-attention-dot { width: 0.6rem; height: 0.6rem; border-radius: 50%; display: inline-block; }
.omx-attention-dot--danger { background: var(--omx-danger); }
.omx-attention-dot--warning { background: var(--omx-warning); }
.omx-attention-list { display: flex; flex-direction: column; gap: 0.6rem; }
.omx-attention-row {
    display: flex; align-items: center; gap: 0.9rem;
    background: var(--omx-surface); border: 1px solid var(--omx-border);
    border-radius: var(--omx-radius-lg); padding: 0.85rem 1rem;
    transition: box-shadow 0.18s ease, transform 0.12s ease, border-color 0.18s ease;
}
.omx-attention-row:hover { box-shadow: var(--omx-shadow-md); transform: translateY(-1px); }
.omx-attention-row__icon {
    flex: 0 0 auto; width: 2.4rem; height: 2.4rem; border-radius: var(--omx-radius-md);
    display: grid; place-items: center; font-size: 1.1rem;
}
.omx-attention-row__icon--danger { background: var(--omx-danger-soft); color: var(--omx-danger); }
.omx-attention-row__icon--warning { background: var(--omx-warning-soft); color: var(--omx-warning); }
.omx-attention-row__body { flex: 1 1 auto; min-width: 0; }
.omx-attention-row__label { font-weight: 600; display: flex; align-items: center; gap: 0.5rem; }
.omx-attention-row__count {
    font-size: var(--omx-fs-xs); font-weight: 600; color: var(--omx-text-muted);
    background: var(--omx-surface-2); border-radius: var(--omx-radius-pill); padding: 0.02rem 0.45rem;
}
.omx-attention-row__why { color: var(--omx-text-muted); font-size: var(--omx-fs-sm); margin-top: 0.1rem; }
.omx-attention-row__action { flex: 0 0 auto; white-space: nowrap; }
.omx-attention-empty__mark {
    width: 3.5rem; height: 3.5rem; margin-inline: auto; border-radius: 50%;
    display: grid; place-items: center; font-size: 1.6rem;
    color: var(--omx-success); background: var(--omx-success-soft);
}
@media (max-width: 640px) {
    .omx-attention-row { flex-wrap: wrap; }
    .omx-attention-row__action { width: 100%; margin-top: 0.4rem; }
}

/* ==========================================================================
   RC31 — Premium motion layer (subtle, fast, never in the way)
   Sidebar · dropdowns · cards · context banner · command palette · workspace switch
   ========================================================================== */

/* Dropdowns: a quiet lift-in instead of a hard pop */
.dropdown-menu.show {
    animation: omx-menu-in 0.14s ease-out;
    transform-origin: top;
}
@keyframes omx-menu-in {
    from { opacity: 0; transform: translateY(-4px) scale(0.99); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Context banner (platform ↔ workspace): a calm slide-down so the switch reads */
.omx-context-banner { animation: omx-banner-in 0.22s ease-out; }
@keyframes omx-banner-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Command palette: soft fade + rise of the panel */
#omxPalette:not(.d-none) { animation: omx-fade 0.12s ease-out; }
#omxPalette .omx-card { animation: omx-rise 0.16s ease-out; }
@keyframes omx-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes omx-rise {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Cards / widgets: a barely-there hover lift for a tactile, premium feel */
.omx-card:hover { box-shadow: var(--omx-shadow-md); }

/* Main content: a gentle entrance on navigation (workspace switching) */
.omx-main > .container-fluid, .omx-main > .container { animation: omx-content-in 0.2s ease-out; }
@keyframes omx-content-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Respect user motion preferences — premium means considerate */
@media (prefers-reduced-motion: reduce) {
    .dropdown-menu.show, .omx-context-banner, #omxPalette:not(.d-none),
    #omxPalette .omx-card, .omx-main > .container-fluid, .omx-main > .container {
        animation: none;
    }
}

/* ---- RC31 — premium KPI / evidence widget hierarchy (#3, #10) ---- */
.omx-kpi__label { font-size: var(--omx-fs-sm); color: var(--omx-text-muted); font-weight: 500; }
.omx-kpi__value {
    font-weight: 680;
    font-size: 2rem;
    line-height: 1.15;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    margin-top: 0.15rem;
}
.omx-kpi__dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; margin-top: 0.35rem; flex: 0 0 auto; }
.omx-kpi__dot--good { background: var(--omx-success); }
.omx-kpi__dot--warn { background: var(--omx-warning); }
.omx-kpi__dot--bad { background: var(--omx-danger); }
.omx-kpi__dot--neutral { background: var(--omx-border); }
.omx-evidence:hover { box-shadow: var(--omx-shadow-md); }

/* ---- RC31 — navigation tiers (Core Platform / Business Modules / Administration) ---- */
.omx-nav-tier {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #46536b;
    padding: 1.2rem 1.5rem 0.15rem;
    margin-top: 0.2rem;
    border-top: 1px solid var(--omx-border);
}
.omx-nav > .omx-nav-tier:first-child { border-top: 0; margin-top: 0; padding-top: 0.6rem; }

/* ==========================================================================
   RC32 — Navigation engine UI (toolbar · pin/favourites · recent · focus)
   ========================================================================== */
.omx-nav-toolbar {
    display: flex; justify-content: flex-end; gap: 0.25rem;
    padding: 0.4rem 0.9rem 0; 
}
.omx-nav-tool {
    background: transparent; border: 0; color: #64748b; cursor: pointer;
    width: 1.9rem; height: 1.9rem; border-radius: var(--omx-radius-sm);
    font-size: 0.8rem; transition: background 0.15s ease, color 0.15s ease;
}
.omx-nav-tool:hover { background: var(--omx-gold-soft); color: var(--omx-text); }

/* nav rows carry a pin toggle that appears on hover/focus */
.omx-nav-row { position: relative; display: flex; align-items: center; }
.omx-nav-row .omx-nav-link { flex: 1 1 auto; }
.omx-nav-pin {
    position: absolute; right: 0.9rem; top: 50%; transform: translateY(-50%);
    background: transparent; border: 0; color: var(--omx-sidebar-muted); cursor: pointer;
    padding: 0.15rem; font-size: 0.8rem; opacity: 0; transition: opacity 0.15s ease, color 0.15s ease;
}
.omx-nav-row:hover .omx-nav-pin,
.omx-nav-pin:focus-visible,
.omx-nav-pin.is-pinned { opacity: 1; }
.omx-nav-pin:hover { color: var(--omx-accent); }
.omx-nav-pin.is-pinned { color: var(--omx-accent); }

/* Favourites / Recent dynamic blocks reuse the tier heading style */
.omx-nav-dyn__items { display: flex; flex-direction: column; }

/* Epic 8 — clear keyboard focus indicators (accessibility) */
.omx-nav-link:focus-visible,
.omx-nav-group__head:focus-visible,
.omx-nav-tool:focus-visible {
    outline: 2px solid var(--omx-accent);
    outline-offset: -2px;
    border-radius: var(--omx-radius-sm);
}
@media (prefers-reduced-motion: reduce) {
    .omx-nav-tool, .omx-nav-pin { transition: none; }
}

/* RC32.1 — the pin control is keyboard-focusable; give it a clear focus ring */
.omx-nav-pin:focus-visible {
    opacity: 1;
    outline: 2px solid var(--omx-accent);
    outline-offset: 1px;
    border-radius: var(--omx-radius-sm);
}

/* ==========================================================================
   RC35 — Responsive sidebar: pin / collapse-to-rail (desktop), remembered
   ========================================================================== */
.omx-sidebar .omx-brand { justify-content: space-between; }
.omx-sidebar-collapse {
    background: transparent; border: 0; color: #64748b; cursor: pointer;
    width: 1.9rem; height: 1.9rem; border-radius: var(--omx-radius-sm);
    display: inline-flex; align-items: center; justify-content: center;
    transition: background 0.15s ease, color 0.15s ease, transform 0.2s ease;
}
.omx-sidebar-collapse:hover { background: var(--omx-gold-soft); color: var(--omx-text); }
.omx-sidebar-collapse:focus-visible { outline: 2px solid var(--omx-accent); outline-offset: 1px; }

@media (min-width: 992px) {
    :root { --omx-rail-width: 76px; }
    /* --- Premium collapsed rail (RC35.1, Founder Issue 2) --- */
    .omx-app.omx-nav-collapsed .omx-sidebar { width: var(--omx-rail-width); }
    .omx-app.omx-nav-collapsed .omx-main { margin-left: var(--omx-rail-width); }

    /* Brand: hide the wordmark entirely (no cropping); the toggle becomes the
       single, centred mark that also expands the rail. */
    .omx-app.omx-nav-collapsed .omx-brand { justify-content: center; padding-inline: 0; }
    .omx-app.omx-nav-collapsed .omx-brand > a { display: none; }
    .omx-app.omx-nav-collapsed .omx-sidebar-collapse {
        margin: 0 auto; width: 2.4rem; height: 2.4rem; color: var(--omx-text);
        background: var(--omx-gold-soft); border-radius: var(--omx-radius-md);
    }
    .omx-app.omx-nav-collapsed .omx-sidebar-collapse i { transform: rotate(180deg); font-size: 1rem; }

    /* Hide every label surface; keep icons. No partial text anywhere. */
    .omx-app.omx-nav-collapsed .omx-nav-text,
    .omx-app.omx-nav-collapsed .omx-nav-group__head span,
    .omx-app.omx-nav-collapsed .omx-nav-group__chev,
    .omx-app.omx-nav-collapsed .omx-nav-tier,
    .omx-app.omx-nav-collapsed .omx-nav-pin,
    .omx-app.omx-nav-collapsed .omx-nav-toolbar,
    .omx-app.omx-nav-collapsed .omx-sidebar-footer,
    .omx-app.omx-nav-collapsed .omx-nav-dyn .omx-nav-tier { display: none; }

    /* Group headings collapse to a thin divider; items stay reachable. */
    .omx-app.omx-nav-collapsed .omx-nav-group { margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid rgba(255,255,255,0.05); }
    .omx-app.omx-nav-collapsed .omx-nav-group__head { display: none; }
    .omx-app.omx-nav-collapsed .omx-nav-group__items { max-height: none !important; opacity: 1 !important; }

    /* Icons: centred, comfortable target, obvious active state. */
    .omx-app.omx-nav-collapsed .omx-nav-row { justify-content: center; }
    .omx-app.omx-nav-collapsed .omx-nav-link {
        justify-content: center; padding: 0.7rem 0; margin: 0 0.6rem; border-left: 0;
        border-radius: var(--omx-radius-md);
    }
    .omx-app.omx-nav-collapsed .omx-nav-link i { width: auto; font-size: 1.2rem; }
    .omx-app.omx-nav-collapsed .omx-nav-link:hover { transform: none; }
    .omx-app.omx-nav-collapsed .omx-nav-link.active {
        background: var(--omx-gold-soft); color: var(--omx-text); box-shadow: inset 0 0 0 1px var(--omx-gold-border);
    }
    .omx-app.omx-nav-collapsed .omx-nav { padding-top: 0.5rem; }
}
@media (prefers-reduced-motion: reduce) { .omx-sidebar-collapse { transition: none; } }

/* ==========================================================================
   RC47 Phase 3 — "Jump Back In" (recent pages, relocated from the sidebar).
   Compact chip strip on Home. Uses design tokens only.
   ========================================================================== */
.omx-jbi { padding: .75rem 1rem; margin-bottom: 1rem; }
.omx-jbi__head {
    display: flex; align-items: center; gap: .4rem;
    font-size: .75rem; font-weight: 600; letter-spacing: .04em;
    text-transform: uppercase; color: var(--omx-muted, #6b7280);
    margin-bottom: .6rem;
}
.omx-jbi__head i { color: var(--omx-gold); }
.omx-jbi__items { display: flex; flex-wrap: wrap; gap: .5rem; }
.omx-jbi__chip {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .35rem .7rem; border: 1px solid var(--omx-border);
    border-radius: 999px; background: #fff; color: var(--omx-text);
    font-size: .85rem; line-height: 1; text-decoration: none;
    transition: background .12s ease, border-color .12s ease;
}
.omx-jbi__chip i { color: var(--omx-gold); font-size: .9rem; }
.omx-jbi__chip:hover { background: var(--omx-gold-soft); border-color: var(--omx-gold-border); color: var(--omx-text); }
.omx-jbi__chip:focus-visible { outline: 2px solid var(--omx-gold-strong); outline-offset: 2px; }

/* ==========================================================================
   RC47 Phase 4 — Dashboard experience: standardized KPI cards, lighter visual
   hierarchy, and fast, professional micro-interactions. Gold identity only.
   ========================================================================== */

/* ---- KPI card: compact, consistent height, subtle border, gold accent ---- */
.omx-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: .75rem;
}
.omx-kpi {
    display: flex; flex-direction: column; gap: .15rem;
    min-height: 104px; padding: .8rem .9rem;
    background: var(--omx-surface, #fff);
    border: 1px solid var(--omx-border, #e6e3dc);
    border-radius: var(--omx-radius-md, .625rem);
    box-shadow: 0 1px 2px rgba(31, 36, 48, .04);
    text-decoration: none; color: var(--omx-text, #1f2430);
    position: relative; overflow: hidden;
    transition: box-shadow .12s ease, border-color .12s ease, transform .12s ease;
}
.omx-kpi::before {                     /* the gold identity accent */
    content: ""; position: absolute; inset: 0 auto 0 0; width: 3px;
    background: var(--omx-gold); opacity: .0; transition: opacity .12s ease;
}
.omx-kpi--link:hover {
    border-color: var(--omx-gold-border);
    box-shadow: 0 4px 14px rgba(31, 36, 48, .08);
    transform: translateY(-1px);
}
.omx-kpi--link:hover::before { opacity: 1; }
.omx-kpi--link:focus-visible { outline: 2px solid var(--omx-gold-strong); outline-offset: 2px; }
.omx-kpi__top { display: flex; align-items: center; justify-content: space-between; }
.omx-kpi__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 8px;
    background: var(--omx-gold-soft); color: var(--omx-gold-strong); font-size: .95rem;
}
.omx-kpi__value { font-size: 1.5rem; font-weight: 700; line-height: 1.1; letter-spacing: -.01em; }
.omx-kpi__label { font-size: .78rem; color: var(--omx-text-muted, #6b7280); }
.omx-kpi__sub { font-size: .72rem; color: var(--omx-text-muted, #6b7280); opacity: .85; }
.omx-kpi__trend {
    display: inline-flex; align-items: center; gap: .05rem;
    font-size: .72rem; font-weight: 600; padding: .1rem .35rem; border-radius: 999px;
    background: var(--omx-gold-soft); color: var(--omx-gold-strong);
}
.omx-kpi__trend.is-up { background: rgba(22,163,74,.10); color: #15803d; }
.omx-kpi__trend.is-down { background: rgba(220,38,38,.10); color: #b91c1c; }
.omx-kpi__spark {
    margin-top: auto; height: 20px; border-radius: 4px;
    background:
        linear-gradient(90deg, transparent 0 100%),
        repeating-linear-gradient(90deg, var(--omx-gold-soft) 0 6px, transparent 6px 12px);
    opacity: .6;
}

/* ---- Lighter hierarchy: trim oversized card chrome on dashboards ---- */
.omx-dash .omx-card { box-shadow: 0 1px 2px rgba(31,36,48,.04); }
.omx-dash .omx-card-header { padding-top: .7rem; padding-bottom: .7rem; font-size: .9rem; }
.omx-section-title {
    font-size: .78rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
    color: var(--omx-text-muted, #6b7280); margin: 0 0 .5rem;
}

/* ---- Quick actions: compact gold pill grid ---- */
.omx-qa-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .5rem; }
.omx-qa {
    display: flex; align-items: center; gap: .5rem; padding: .6rem .75rem;
    border: 1px solid var(--omx-border); border-radius: var(--omx-radius-md, .625rem);
    background: var(--omx-surface, #fff); color: var(--omx-text); text-decoration: none;
    font-size: .85rem; font-weight: 500; min-height: 44px;
    transition: background .12s ease, border-color .12s ease, transform .12s ease;
}
.omx-qa i { color: var(--omx-gold-strong); font-size: 1rem; }
.omx-qa:hover { background: var(--omx-gold-soft); border-color: var(--omx-gold-border); transform: translateY(-1px); color: var(--omx-text); }
.omx-qa:focus-visible { outline: 2px solid var(--omx-gold-strong); outline-offset: 2px; }

/* ---- Pinned workspaces strip (client-side, mirrors Jump back in) ---- */
.omx-pins { display: flex; flex-wrap: wrap; gap: .5rem; }
.omx-pins__chip {
    display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .7rem;
    border: 1px solid var(--omx-gold-border); border-radius: 999px;
    background: var(--omx-gold-soft); color: var(--omx-text); font-size: .85rem;
    text-decoration: none; transition: background .12s ease;
}
.omx-pins__chip i { color: var(--omx-gold-strong); }
.omx-pins__chip:hover { background: rgba(190,155,62,.18); color: var(--omx-text); }

/* ---- Attention urgency tiers ---- */
.omx-att-tier { margin-bottom: 1rem; }
.omx-att-tier__head {
    display: flex; align-items: center; gap: .4rem; font-size: .78rem; font-weight: 700;
    letter-spacing: .04em; text-transform: uppercase; margin-bottom: .5rem;
}
.omx-att-tier--critical .omx-att-tier__head { color: #b91c1c; }
.omx-att-tier--high .omx-att-tier__head { color: #c2410c; }
.omx-att-tier--medium .omx-att-tier__head { color: var(--omx-gold-strong); }
.omx-att-tier--low .omx-att-tier__head { color: var(--omx-text-muted, #6b7280); }
.omx-att-item {
    display: flex; gap: .75rem; align-items: flex-start; padding: .7rem .85rem;
    border: 1px solid var(--omx-border); border-radius: var(--omx-radius-md, .625rem);
    background: var(--omx-surface, #fff); margin-bottom: .5rem;
}
.omx-att-item__badge {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 34px; height: 34px; border-radius: 8px; background: var(--omx-gold-soft);
    color: var(--omx-gold-strong); font-size: 1rem;
}
.omx-att-tier--critical .omx-att-item__badge { background: rgba(220,38,38,.10); color: #b91c1c; }
.omx-att-tier--high .omx-att-item__badge { background: rgba(234,88,12,.10); color: #c2410c; }
.omx-att-item__body { flex: 1 1 auto; min-width: 0; }
.omx-att-item__problem { font-weight: 600; }
.omx-att-item__reason { font-size: .82rem; color: var(--omx-text-muted, #6b7280); }

/* ==========================================================================
   RC47.1 — SIDEBAR THEME FRAMEWORK (Founder Acceptance Refinement)
   A premium DARK enterprise sidebar, inspired by the Platform strip colour,
   with gold retained as the primary accent. 100% CSS-variable driven: adding a
   new theme changes ONLY the palette — layout and components are identical.
   Default theme = "Omexis Dark". Selection persists per user (localStorage).
   ========================================================================== */
:root {
    /* Sidebar-scoped tokens — DEFAULT = Omexis Dark (platform-strip inspired). */
    --omx-sidebar-bg:          #101828;   /* platform-strip charcoal-navy */
    --omx-sidebar-elev:        #0b111c;
    --omx-sidebar-text:        #c7ccd6;
    --omx-sidebar-muted:       #7b8496;
    --omx-sidebar-brand:       #f4f5f7;
    --omx-sidebar-border:      rgba(255, 255, 255, 0.07);
    --omx-sidebar-hover-bg:    rgba(255, 255, 255, 0.05);
    --omx-sidebar-active-bg:   rgba(190, 155, 62, 0.16);
    --omx-sidebar-active-text: #ecd9a3;   /* light gold — AA on dark */
    --omx-sidebar-accent:      var(--omx-gold);
}

/* RC52 W1 — every palette, including the system default, is keyed off the
   SERVER-EMITTED attribute. No palette is applied after first paint. */
[data-omx-sidebar-theme="omx-dark"]       { --omx-sidebar-bg:#101828; --omx-sidebar-elev:#0b1220; }

/* Alternate themes — palette only. Apply via [data-omx-sidebar-theme]. */
[data-omx-sidebar-theme="deep-navy"]      { --omx-sidebar-bg:#0f1b3d; --omx-sidebar-elev:#0a1430; }
[data-omx-sidebar-theme="slate-grey"]     { --omx-sidebar-bg:#20242c; --omx-sidebar-elev:#171a20; }
[data-omx-sidebar-theme="midnight-black"] { --omx-sidebar-bg:#0a0a0b; --omx-sidebar-elev:#050506; }
[data-omx-sidebar-theme="forest-green"]   { --omx-sidebar-bg:#10231a; --omx-sidebar-elev:#0a1811; }
[data-omx-sidebar-theme="coffee-brown"]   { --omx-sidebar-bg:#241a12; --omx-sidebar-elev:#1a120b; }
[data-omx-sidebar-theme="burgundy"]       { --omx-sidebar-bg:#2a0f16; --omx-sidebar-elev:#1e0a10; }
[data-omx-sidebar-theme="royal-purple"]   { --omx-sidebar-bg:#1e1330; --omx-sidebar-elev:#150d23; }
[data-omx-sidebar-theme="teal-blue"]      { --omx-sidebar-bg:#0d2226; --omx-sidebar-elev:#08181b; }

/* Sidebar surfaces consume the sidebar-scoped tokens (dark-appropriate). */
.omx-sidebar {
    background: linear-gradient(180deg, var(--omx-sidebar-bg) 0%, var(--omx-sidebar-elev) 100%);
    border-right: 1px solid var(--omx-sidebar-border);
}
.omx-sidebar .omx-brand { border-bottom: 1px solid var(--omx-sidebar-border); }
.omx-sidebar .omx-brand a { color: var(--omx-sidebar-brand); }
.omx-sidebar .omx-brand a span { color: var(--omx-sidebar-accent); }

.omx-nav-label,
.omx-nav-tier { color: var(--omx-sidebar-muted); border-color: var(--omx-sidebar-border); }

.omx-nav-group__head { color: var(--omx-sidebar-muted); }
.omx-nav-group__head:hover { color: var(--omx-sidebar-active-text); }

.omx-nav-link { color: var(--omx-sidebar-text); padding: 0.6rem 1.4rem; }
.omx-nav-link:hover {
    background: var(--omx-sidebar-hover-bg);
    color: var(--omx-sidebar-active-text);
    transform: none;                       /* calmer, enterprise feel */
}
.omx-nav-link:hover i { color: var(--omx-sidebar-accent); }
.omx-nav-link.active {
    background: var(--omx-sidebar-active-bg);
    color: var(--omx-sidebar-active-text);
    border-left-color: var(--omx-sidebar-accent);
    box-shadow: none;
    font-weight: 600;
}
.omx-nav-link.active i { color: var(--omx-sidebar-accent); }

/* Indent items nested under a collapsible group for clearer hierarchy. */
.omx-nav-group__items .omx-nav-link { padding-left: 2.55rem; }

.omx-sidebar-footer { border-top: 1px solid var(--omx-sidebar-border); color: var(--omx-sidebar-muted); }

.omx-sidebar-collapse { color: var(--omx-sidebar-muted); }
.omx-sidebar-collapse:hover { background: var(--omx-sidebar-hover-bg); color: var(--omx-sidebar-active-text); }

.omx-nav-pin { color: var(--omx-sidebar-muted); }
.omx-nav-pin:hover,
.omx-nav-pin.is-pinned { color: var(--omx-sidebar-accent); }

/* Favourites/Jump chips inside the dark sidebar keep gold on dark. */
.omx-sidebar .omx-nav-dyn .omx-nav-tier { color: var(--omx-sidebar-muted); }

/* ==========================================================================
   RC47.1b — Sidebar footer utility row + Sidebar Appearance picker.
   Matches the Founder reference: a compact footer icon row (Appearance / Help /
   Log out) and a slide-in Appearance panel to choose the sidebar theme, text
   size, density and active-highlight. All per-user, persisted in localStorage,
   instant apply, no reload, no layout shift. Presentation only.
   ========================================================================== */

/* Footer utility row */
.omx-sidebar-tools {
    display: flex; align-items: center; gap: .25rem;
    padding: .55rem 1rem; border-top: 1px solid var(--omx-sidebar-border);
}
.omx-sidebar-tool {
    flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center;
    height: 36px; border: 0; border-radius: 8px; background: transparent;
    color: var(--omx-sidebar-muted); cursor: pointer; font-size: 1.02rem;
    transition: background .12s ease, color .12s ease;
}
.omx-sidebar-tool:hover { background: var(--omx-sidebar-hover-bg); color: var(--omx-sidebar-active-text); }
.omx-sidebar-tool:focus-visible { outline: 2px solid var(--omx-sidebar-accent); outline-offset: 1px; }

/* Sidebar option effects (data-attributes set by the Appearance picker) */
.omx-sidebar[data-omx-sidebar-text="sm"] .omx-nav-link { font-size: .8rem; }
.omx-sidebar[data-omx-sidebar-text="lg"] .omx-nav-link { font-size: .95rem; }
.omx-sidebar[data-omx-sidebar-density="compact"] .omx-nav-link { padding-top: .42rem; padding-bottom: .42rem; }
.omx-sidebar[data-omx-sidebar-density="compact"] .omx-nav-label,
.omx-sidebar[data-omx-sidebar-density="compact"] .omx-nav-group__head { padding-top: .6rem; }
.omx-sidebar[data-omx-highlight="off"] .omx-nav-link.active { background: transparent; }

/* Appearance panel (off-canvas, left) */
.omx-appearance-backdrop {
    position: fixed; inset: 0; background: rgba(9, 12, 20, .45);
    opacity: 0; visibility: hidden; transition: opacity .18s ease; z-index: 1090;
}
.omx-appearance-backdrop.is-open { opacity: 1; visibility: visible; }
.omx-appearance {
    position: fixed; top: 0; left: 0; bottom: 0; width: 320px; max-width: 88vw;
    background: var(--omx-surface, #fff); color: var(--omx-text, #1f2430);
    box-shadow: var(--omx-shadow-lg, 0 16px 40px -8px rgba(0,0,0,.35));
    transform: translateX(-102%); transition: transform .2s ease; z-index: 1091;
    display: flex; flex-direction: column; overflow-y: auto;
}
.omx-appearance.is-open { transform: translateX(0); }
.omx-appearance__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1rem 1.15rem; border-bottom: 1px solid var(--omx-border);
}
.omx-appearance__head h2 { font-size: 1rem; margin: 0; font-weight: 700; }
.omx-appearance__close { background: transparent; border: 0; font-size: 1.2rem; color: var(--omx-text-muted); cursor: pointer; }
.omx-appearance__body { padding: 1rem 1.15rem; flex: 1 1 auto; }
.omx-appearance__label { font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--omx-text-muted); margin: 1.1rem 0 .55rem; }
.omx-appearance__label:first-child { margin-top: 0; }

.omx-swatches { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.omx-swatch { border: 0; background: transparent; cursor: pointer; text-align: center; padding: 0; }
.omx-swatch__chip {
    height: 46px; border-radius: 10px; border: 2px solid var(--omx-border);
    display: flex; align-items: center; justify-content: center; color: #ecd9a3; font-size: 1rem;
    transition: border-color .12s ease, transform .12s ease;
}
.omx-swatch:hover .omx-swatch__chip { transform: translateY(-1px); }
.omx-swatch.is-active .omx-swatch__chip { border-color: var(--omx-gold-strong); }
.omx-swatch__name { display: block; font-size: .68rem; color: var(--omx-text-muted); margin-top: .3rem; }

.omx-seg { display: inline-flex; border: 1px solid var(--omx-border); border-radius: 8px; overflow: hidden; }
.omx-seg button { border: 0; background: var(--omx-surface); color: var(--omx-text); padding: .4rem .8rem; font-size: .82rem; cursor: pointer; }
.omx-seg button.is-active { background: var(--omx-gold-soft); color: var(--omx-gold-strong); font-weight: 600; }

.omx-optrow { display: flex; align-items: center; justify-content: space-between; padding: .5rem 0; font-size: .88rem; }
.omx-switch { position: relative; width: 40px; height: 22px; }
.omx-switch input { opacity: 0; width: 0; height: 0; }
.omx-switch span { position: absolute; inset: 0; background: #cfd3da; border-radius: 999px; cursor: pointer; transition: background .15s ease; }
.omx-switch span::before { content: ""; position: absolute; height: 16px; width: 16px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform .15s ease; }
.omx-switch input:checked + span { background: var(--omx-gold-strong); }
.omx-switch input:checked + span::before { transform: translateX(18px); }

.omx-appearance__foot { display: flex; gap: .5rem; padding: 1rem 1.15rem; border-top: 1px solid var(--omx-border); }
.omx-appearance__foot .btn { flex: 1; }

/* ==========================================================================
   RC47.1c — LIGHT sidebar themes. Unlike the dark palettes (which only swap the
   background), light themes flip the full token set to dark text on a light
   surface, keeping gold as the accent (dark-gold for active text/readability).
   ========================================================================== */
[data-omx-sidebar-theme="pearl"],
[data-omx-sidebar-theme="champagne"],
[data-omx-sidebar-theme="sage"],
[data-omx-sidebar-theme="blush"],
[data-omx-sidebar-theme="mist"],
[data-omx-sidebar-theme="lavender"] {
    --omx-sidebar-text:        #3f4654;
    --omx-sidebar-muted:       #8b90a0;
    --omx-sidebar-brand:       #1f2430;
    --omx-sidebar-border:      rgba(31, 36, 48, 0.09);
    --omx-sidebar-hover-bg:    rgba(190, 155, 62, 0.10);
    --omx-sidebar-active-bg:   rgba(190, 155, 62, 0.16);
    --omx-sidebar-active-text: #8a6d1e;   /* dark gold — AA on light */
    --omx-sidebar-accent:      var(--omx-gold-strong);
}
[data-omx-sidebar-theme="pearl"]     { --omx-sidebar-bg:#faf9f6; --omx-sidebar-elev:#f2f0ea; } /* warm off-white */
[data-omx-sidebar-theme="champagne"] { --omx-sidebar-bg:#f7f1e3; --omx-sidebar-elev:#efe6d1; } /* cream + gold hint */
[data-omx-sidebar-theme="sage"]      { --omx-sidebar-bg:#eef1ec; --omx-sidebar-elev:#e4e9e1; } /* soft green-grey */
[data-omx-sidebar-theme="blush"]     { --omx-sidebar-bg:#f8eef0; --omx-sidebar-elev:#f0e2e5; } /* warm rosé */
[data-omx-sidebar-theme="mist"]      { --omx-sidebar-bg:#eef2f7; --omx-sidebar-elev:#e2e8f0; } /* pale cool grey */
[data-omx-sidebar-theme="lavender"]  { --omx-sidebar-bg:#f4f1fa; --omx-sidebar-elev:#eae4f4; } /* pale lilac */

/* ==========================================================================
   RC47.1d — Sidebar navigation control polish (Founder final review).
   Collapsed rail: stack the footer utility tools vertically (icons only) so
   they fit the 76px rail instead of squishing. Behaviour/logic unchanged.
   ========================================================================== */
@media (min-width: 992px) {
    .omx-app.omx-nav-collapsed .omx-sidebar-tools {
        flex-direction: column; gap: .2rem; padding: .5rem .4rem;
    }
    .omx-app.omx-nav-collapsed .omx-sidebar-tools .omx-sidebar-tool,
    .omx-app.omx-nav-collapsed .omx-sidebar-tools form { width: 100%; }
}

/* RC47.1.2 — Keep the authenticated-user topbar avatar aligned with Omexis Gold. */
.omx-topbar-avatar {
    color: var(--omx-gold-strong);
    border: 1px solid var(--omx-gold-strong);
}

/* ==========================================================================
   RC47.2 (C1) — global navigation controls, themed via sidebar tokens so they
   are correct in the dark default AND every light/dark alternate theme.
   ========================================================================== */
.omx-sidebar .omx-nav-toolbar {
    display: flex; gap: .25rem; padding: .45rem .9rem 0;
    border-bottom: 0;
}
.omx-sidebar .omx-nav-tool {
    color: var(--omx-sidebar-muted);
    border-radius: 8px; min-width: 34px; min-height: 34px;
}
.omx-sidebar .omx-nav-tool:hover {
    background: var(--omx-sidebar-hover-bg);
    color: var(--omx-sidebar-active-text);
}
.omx-sidebar .omx-nav-tool:focus-visible {
    outline: 2px solid var(--omx-sidebar-accent); outline-offset: 1px;
}

/* RC47.5 (P4) — contextual help link. */
.omx-help-link {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 8px; color: var(--omx-text-muted);
    text-decoration: none; transition: background .12s ease, color .12s ease;
}
.omx-help-link:hover { background: var(--omx-gold-soft); color: var(--omx-gold-strong); }
.omx-help-link:focus-visible { outline: 2px solid var(--omx-gold-strong); outline-offset: 1px; }

/* ==========================================================================
   RC50 Batch 1 — SIDEBAR VISUAL HIERARCHY v2 (Navigation Excellence).
   CSS ONLY: the RC48 persistence engine, its markup hooks and every state
   contract are untouched. Objectives: calm rhythm, unmistakable hierarchy
   (groups ≠ children), a decisive active state, premium motion, and a
   collapsed rail you can genuinely work in.
   ========================================================================== */

/* Rhythm: clear air between groups; a whisper of a divider, never a wall. */
.omx-nav-group { margin-top: 1.1rem; }
.omx-nav-group + .omx-nav-group { border-top: 1px solid rgba(255, 255, 255, 0.04); padding-top: 0.55rem; }

/* Group heads: quiet, uppercase, clearly NOT pages. */
.omx-nav-group__head {
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 600;
    opacity: 0.72;
    padding-top: 0.15rem;
    padding-bottom: 0.15rem;
    transition: opacity 0.18s ease-out;
}
.omx-nav-group__head:hover { opacity: 1; }

/* Children: indented, lighter — visibly subordinate to their group. */
.omx-nav-group__items .omx-nav-link { padding-left: 2.1rem; font-weight: 400; }
.omx-nav-group__items .omx-nav-link i { font-size: 0.92em; opacity: 0.85; }

/* Hover: calm — a soft surface, no movement. */
.omx-nav-link { transition: background-color 0.16s ease-out, color 0.16s ease-out; }
.omx-nav-link:hover { transform: none; }

/* ACTIVE: users must know where they are at a glance — accent bar,
   surface tint, confident weight. One place, one look, everywhere. */
.omx-nav-link.active {
    font-weight: 600;
    background: linear-gradient(90deg, var(--omx-gold-soft, rgba(212, 175, 55, 0.14)) 0%, transparent 90%);
    border-left-width: 3px;
}
.omx-nav-link.active i { opacity: 1; }

/* Keyboard: focus is as visible as hover (accessibility review). */
.omx-nav-link:focus-visible,
.omx-nav-group__head:focus-visible,
.omx-nav-pin:focus-visible {
    outline: 2px solid var(--omx-accent);
    outline-offset: -2px;
    border-radius: var(--omx-radius-sm, 4px);
}

/* Premium motion: one timing voice for the whole sidebar. */
.omx-nav-group__items { transition: max-height 0.24s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.18s ease-out; }
.omx-nav-group__chev { transition: transform 0.2s cubic-bezier(0.22, 0.61, 0.36, 1); }

/* Collapsed rail: a real working mode — centred icons, a clear active dot,
   native tooltips (every link carries title=label). */
@media (min-width: 992px) {
    .omx-app.omx-nav-collapsed .omx-nav-link { border-radius: var(--omx-radius-md); transition: background-color 0.16s ease-out; }
    .omx-app.omx-nav-collapsed .omx-nav-link.active {
        background: var(--omx-gold-soft, rgba(212, 175, 55, 0.18));
        position: relative;
    }
    .omx-app.omx-nav-collapsed .omx-nav-link.active::after {
        content: '';
        position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
        width: 4px; height: 4px; border-radius: 50%;
        background: var(--omx-accent);
    }
}

/* Reduced motion: the sidebar respects the OS everywhere, not just in JS. */
@media (prefers-reduced-motion: reduce) {
    .omx-nav-group__items, .omx-nav-group__chev, .omx-nav-link, .omx-sidebar { transition: none !important; }
}

/* ==========================================================================
   RC50 Batch 1 REVISION A — the operating-console pass.
   Tiered importance, read-free active recognition, page-header rhythm,
   empty-state presence. Engine contracts remain untouched.
   ========================================================================== */

/* TIERED IMPORTANCE — not every item competes equally. The registry has
   always known each group's tier; now the eye does too. Administration and
   utility knowledge recede until needed; daily work stays forward. */
.omx-nav-group[data-omx-tier="admin"] { opacity: 0.78; }
.omx-nav-group[data-omx-tier="admin"]:hover,
.omx-nav-group[data-omx-tier="admin"]:focus-within { opacity: 1; }
.omx-nav-group[data-omx-tier="admin"] .omx-nav-link { font-size: 0.86em; padding-top: 0.45rem; padding-bottom: 0.45rem; }
.omx-nav-group[data-omx-group="knowledge"] { opacity: 0.85; }
.omx-nav-group[data-omx-group="knowledge"]:hover,
.omx-nav-group[data-omx-group="knowledge"]:focus-within { opacity: 1; }

/* READ-FREE ACTIVE RECOGNITION — shape (bar) + colour (icon) + surface,
   perceivable before any label is read, expanded or collapsed. */
.omx-nav-link.active i { color: var(--omx-accent); }

/* Rail comfort: generous targets, calm icon presence. */
@media (min-width: 992px) {
    .omx-app.omx-nav-collapsed .omx-nav-link { padding-top: 0.7rem; padding-bottom: 0.7rem; }
    .omx-app.omx-nav-collapsed .omx-nav-link i { font-size: 1.08rem; }
}

/* PAGE-HEADER RHYTHM — one voice on every screen: title scale, subtitle
   tone, breadcrumb quiet, action alignment, consistent air below. */
.omx-breadcrumbs { font-size: var(--omx-fs-xs); opacity: 0.75; }
.omx-breadcrumbs .sep { opacity: 0.5; padding: 0 0.35rem; }
.omx-page-header, .omx-card > .omx-card-header { letter-spacing: 0.01em; }

/* EMPTY STATES ARE NAVIGATION — presence without noise. */
.omx-empty { max-width: 460px; margin-inline: auto; padding: 2.2rem 1rem; text-align: center; }
.omx-empty-icon { font-size: 1.9rem; opacity: 0.55; margin-bottom: 0.5rem; }
.omx-empty-title { font-weight: 600; margin-bottom: 0.25rem; }


/* ==========================================================================
   RC51 D2 (QW-6) — whole-card click targets.
   The shared widget grows an optional href: one stretched link makes the
   entire card the target (native anchor = native Enter activation), and the
   focus ring draws around the WHOLE card via the stretched ::after box —
   never a naked "Open →" text row again.
   ========================================================================== */
.omx-card--linked { transition: border-color .15s ease, box-shadow .15s ease; }
.omx-card--linked:hover { border-color: var(--omx-accent, #0d6efd); box-shadow: 0 4px 14px rgba(15, 23, 42, .10); }
.omx-card-link:focus-visible { outline: none; }
.omx-card-link:focus-visible::after {
    outline: 3px solid var(--omx-accent, #0d6efd);
    outline-offset: 2px;
    border-radius: 12px;
}