/* ==========================================================================
   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;
    /* UIUX PHASE 1 / BATCH 2 (P0B-P2-004) — the phone bottom bar's height,
       declared once: the bar sizes its links from it and floating controls
       (the intelligence orb) offset themselves from it, so the two can never
       disagree about where the bar ends. Excludes the bar's safe-area
       padding, which consumers add with env(safe-area-inset-bottom). */
    --omx-mobile-nav-height: 56px;
}

/* ---------- 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; }

/* ---------- 4a. Topbar containment ----------
   UIUX PHASE 1 / BATCH 2 (P0B-P1-001). The right-hand cluster could not
   shrink, so the platform shell overflowed the document from 320px to 1280px
   (worst +273px at 1024px) and the tenant shell at 320px, 360px and 1024px.
   Rationale and the per-width contract are documented in
   resources/views/components/topbar.blade.php. No overflow is hidden here:
   every rule makes the bar's content genuinely fit. */
.omx-topbar { min-width: 0; }
/* The search field is the one element with slack. Its shrink weight is set
   far above the cluster's so, when the bar is tight, width comes out of the
   search field first instead of squeezing buttons past the edge; the cluster
   and the account control remain shrinkable as the last resort. */
.omx-topbar-search { flex: 0 1000 auto; min-width: 0; }
.omx-topbar-search .omx-search { max-width: 100%; }
.omx-topbar-actions { flex: 0 1 auto; min-width: 0; }
.omx-topbar-actions > * { flex-shrink: 0; }
.omx-topbar-actions > .omx-topbar-account-wrap { flex-shrink: 1; min-width: 0; }
.omx-topbar-account { min-width: 0; }
/* Name and role truncate rather than dictate the bar's width. */
.omx-topbar-identity { min-width: 0; max-width: 10rem; }
.omx-topbar-identity > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.omx-topbar-context-label {
    display: inline-block;
    max-width: 11rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}
.omx-topbar-account-summary .dropdown-header { max-width: 18rem; white-space: normal; }
@media (min-width: 1400px) {
    .omx-topbar-identity { max-width: 13rem; }
}
/* Below 1200px — where the identity text also steps into the account menu —
   the text-and-icon buttons become icon-only. From 992px to 1199px the 264px
   sidebar leaves the bar at most 888px, which the labelled platform cluster
   and a usable search field cannot share. The label stays in the
   accessibility tree (visually hidden), so each button keeps its name. */
@media (max-width: 1199.98px) {
    .omx-topbar-actions .omx-topbar-label {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important;
        max-width: none;
    }
    .omx-topbar-actions .btn > .bi.me-1 { margin-right: 0 !important; }
    .omx-topbar-actions > .me-2 { margin-right: 0 !important; }
}
/* Phones: tighter bar spacing, and the two platform shortcuts move to the
   navigation drawer (Overview and Companies are both listed there). */
@media (max-width: 575.98px) {
    .omx-topbar { gap: 0.5rem !important; padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
    .omx-topbar-actions { gap: 0.25rem !important; }
    .omx-topbar-actions > .omx-topbar-shortcut { display: none !important; }
    .omx-topbar-actions > .omx-topbar-account-wrap { margin-left: 0 !important; }
}
.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; }
}
/* UIUX PHASE 1 / BATCH 4 (U5) — the dimmed page includes the bottom bar.
   The overlay and .omx-mobile-nav both sat at 1030, and the bar is painted
   later, so it stayed bright while the drawer was open: it looked tappable and
   did nothing (it is correctly inert, Batch 3). 1038 covers the bar (1030) and
   the orb root (1035) while staying below the drawer itself (1040) and any
   modal (Bootstrap's 1055), so the closed-drawer stacking order is unchanged. */
.omx-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(13, 20, 36, 0.55);
    z-index: 1038;
}
.omx-overlay.show { display: block; }

/* UIUX PHASE 1 / BATCH 3 (Track D) — sign-in form targets of at least 24px.
   Measured before: the Remember-me checkbox was 15×15px beside a 20px-tall
   label, and "Forgot password?" was 20px tall. The label now wraps the
   checkbox, so the whole row item is one target. Typography is unchanged. */
.omx-auth-remember {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 24px;
    min-width: 24px;
    margin: 0;
    cursor: pointer;
    font-size: var(--omx-fs-sm);
}
/* The checkbox keeps a 1rem box (it would otherwise shrink to the label's
   smaller font size): visually aligned with the text, never smaller than before. */
.omx-auth-remember .form-check-input { width: 1rem; height: 1rem; margin: 0; flex-shrink: 0; cursor: pointer; }
.omx-auth-link {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    font-size: var(--omx-fs-sm);
    color: var(--omx-accent-hover);
}

/* UIUX PHASE 1 / BATCH 3 (Track B) — a closed drawer is not an interactive
   surface. Moving it off-screen by margin left every link in the Tab order and
   in the accessibility tree. The drawer controller in layouts/app makes the
   closed drawer `inert` and aria-hidden; this is the CSS half, and the
   fallback before script runs: visibility:hidden removes a closed drawer from
   focus and from assistive technology. The visibility change is delayed by
   the slide duration when closing and immediate when opening, so the slide
   animation is unchanged. Desktop (992px+) is untouched. */
@media (max-width: 991.98px) {
    .omx-sidebar:not(.show) {
        visibility: hidden;
        transition: margin-left 0.25s ease, visibility 0s linear 0.25s;
    }
    .omx-sidebar.show {
        visibility: visible;
        transition: margin-left 0.25s ease, visibility 0s linear 0s;
    }
}

/* ==========================================================================
   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.

   UIUX PHASE 1 / BATCH 1 (UX-P2-005) — the ring colour is --omx-gold-strong,
   not --omx-accent. Measured: --omx-accent (#be9b3e) is 2.64:1 against white
   and 2.42:1 against --omx-bg (#f6f5f1), below the 3:1 that WCAG 1.4.11 /
   2.4.11 require of a focus indicator. --omx-gold-strong (#8a6d1e) measures
   4.90:1 and 4.49:1 on those same surfaces.
   The DARK SIDEBAR IS UNCHANGED: --omx-accent already measures 6.72:1 against
   --omx-brand-800, so the sidebar's own :focus-visible rules below (.omx-nav-link,
   .omx-nav-group__head, .omx-nav-tool, .omx-nav-pin, .omx-sidebar-collapse)
   keep the lighter gold deliberately. Brand colours are untouched; only this
   one outline colour changed, and no hover, active or selected state moved. */
.omx-app :focus-visible {
    outline: 3px solid var(--omx-gold-strong, #8a6d1e);
    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: var(--omx-mobile-nav-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;
}


/* ==========================================================================
   DESIGN DIRECTION C — dense executive layout, current Omexis One colours.
   Founder decision: C's structure, NO colour changes. Every value below is an
   existing token; this layer changes shape, density and hierarchy only, and
   sits last so it wins without !important.
   ========================================================================== */

/* Page header — one confident title, the primary action on the right. */
#omx-main .omx-page-title { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; }
#omx-main .omx-page-subtitle { margin-top: 0.3rem; max-width: 75ch; }

/* Every data table reads like .omx-table: small uppercase header on the alt
   surface, hairline rows, a quiet hover. Scoped to the main content so no
   widget outside it (the orb, palettes) changes. */
#omx-main .table { --bs-table-bg: transparent; margin-bottom: 0; }
#omx-main .table > thead > tr > th {
    font-size: 0.7rem;
    font-weight: 600;
    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.65rem 1rem;
    white-space: nowrap;
    vertical-align: middle;
}
#omx-main .table > tbody > tr > td {
    padding: 0.7rem 1rem;
    border-bottom: 1px solid var(--omx-border);
    font-size: var(--omx-fs-sm);
    color: var(--omx-text);
    vertical-align: middle;
}
#omx-main .table-sm > thead > tr > th { padding: 0.5rem 0.85rem; }
#omx-main .table-sm > tbody > tr > td { padding: 0.55rem 0.85rem; }
#omx-main .table > tbody > tr:last-child > td { border-bottom: 0; }
#omx-main .table > tbody > tr:hover > td { background: var(--omx-surface-2); }
#omx-main .table .text-end { font-variant-numeric: tabular-nums; }

/* Links in content: brand gold, no browser-blue underline. Only anchors that
   carry no class of their own — buttons, cards and nav keep their styles. */
#omx-main a:not([class]) { color: var(--omx-gold-strong); text-decoration: none; font-weight: 500; }
#omx-main a:not([class]):hover { color: var(--omx-gold-hover); text-decoration: underline; }

/* Figures strip — .omx-kpi and .omx-stat read as C's KPI tiles: small
   uppercase label, one large number, a quiet line of context. */
#omx-main .omx-kpi__label,
#omx-main .omx-stat-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--omx-text-muted);
}
#omx-main .omx-kpi__value,
#omx-main .omx-stat-value { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }

/* Cards and widgets — one radius, one hairline, one shadow. */
#omx-main .omx-card,
#omx-main .omx-widget { border-radius: var(--omx-radius-md); border: 1px solid var(--omx-border); box-shadow: var(--omx-shadow-sm); }

/* Sidebar — the active row is a soft gold wash with a gold edge. */
.omx-nav-link.active {
    background: var(--omx-gold-soft);
    box-shadow: inset 3px 0 0 var(--omx-gold);
    border-left-color: transparent;
}

/* Status pills — C's weight. */
#omx-main .omx-badge { font-weight: 600; letter-spacing: 0.01em; }

/* Direction C — allowance meter: how much is LEFT, in the brand gold. */
.omx-meter { height: 6px; border-radius: var(--omx-radius-pill); background: var(--omx-surface-2); box-shadow: inset 0 0 0 1px var(--omx-border); overflow: hidden; }
.omx-meter > span { display: block; height: 100%; border-radius: inherit; background: var(--omx-gold); }
/* Direction C — a figures strip that spans the page: tiles share the width. */
.omx-kpi-grid--fill { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
/* Direction C — headings over a list of row-forms, matching table headers. */
#omx-main .omx-list-head {
    font-size: 0.7rem; font-weight: 600; 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.5rem 0; margin: 0;
}
/* Direction C — a strip of many small figures (e.g. every pipeline stage) stays on one row. */
.omx-kpi-grid--dense { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); }
.omx-kpi-grid--dense .omx-kpi { min-height: 88px; }

/* UIUX PHASE 1 / BATCH 4 (U3) — A FILTER SHOWS THE OPTION IT IS SET TO.
   The People directory filters sat in fixed col-md-2 columns. Inside the
   shell at 1024px that is a 106px control, and "All departments" needs 132px,
   "All locations" 108px and "In or out — either" 143px before the chevron —
   so the reader could not see what they had filtered by. The fields now size
   to content from lg upward with a floor wide enough for the longest option,
   wrapping onto another row rather than clipping; below lg they take a half
   row, and on a phone a full one. Field names, values and the submitted query
   string are untouched. */
.omx-filter-field { min-width: 11.5rem; }
.omx-filter-field--search { min-width: 15rem; }
@media (max-width: 575.98px) {
    .omx-filter-field,
    .omx-filter-field--search { min-width: 100%; }
}

/* ==========================================================================
   PRINT — a scroll container is a SCREEN affordance. On paper there is no
   scrolling, so Bootstrap's `.table-responsive { overflow-x: auto }` silently
   CLIPS every column past the page edge. A statement or payslip that prints
   with its right-hand amounts missing is worse than one that prints ugly.

   This lets a table be horizontally scrollable on a phone AND print whole,
   so the two requirements stop being a trade-off.
   ========================================================================== */
@media print {
    .table-responsive {
        overflow: visible !important;
    }

    /* Chrome in particular needs the table itself released, not just the
       wrapper, or the layout stays at the on-screen width. */
    .table-responsive > .table {
        width: 100% !important;
    }

    /* Navigation is not part of a document anyone wants on paper. */
    .omx-sidebar,
    .omx-mobile-nav,
    .omx-topbar,
    .omx-overlay,
    .omx-skip-link {
        display: none !important;
    }

    .omx-main {
        margin: 0 !important;
    }
}

/* ==========================================================================
   NARROW SCREENS — A ROW BECOMES A BLOCK.

   A sideways-scrolling table is the least-bad desktop fallback, not a phone
   design: the columns that matter most on a phone (price, status, the action)
   are exactly the ones pushed past the right edge, and nothing on screen tells
   you they are there.

   OPT-IN, by `.omx-table--stack`. It is deliberately not applied to every
   table: Batch 2 (P0B-P2-007) established four surfaces whose horizontal
   scroll is runtime-proven evidence, and a blanket rule would silently
   redefine them.

   A stacked cell loses its column heading, so each one carries `data-label`
   and prints it above the value. A cell with no label is treated as a
   continuation of the one above it, which is how an actions cell or a second
   line of an identity cell should read.

   The breakpoint is 991.98px — the same boundary the sidebar drawer and the
   phone nav bar already use. One boundary for the whole system, not three.
   ========================================================================== */
@media (max-width: 991.98px) {
    /* The heading row still exists for a screen reader; it is only taken out
       of the visual flow. display:none would remove it from the accessibility
       tree as well, which a sighted-user layout change has no business doing. */
    .omx-table--stack thead {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .omx-table--stack,
    .omx-table--stack tbody,
    .omx-table--stack tr,
    .omx-table--stack td {
        display: block;
        width: 100%;
    }

    .omx-table--stack tr {
        background: var(--omx-surface);
        border: 1px solid var(--omx-border);
        border-radius: var(--omx-radius-md);
        box-shadow: var(--omx-shadow-sm);
        padding: 0.8rem 0.9rem;
        margin-bottom: 0.6rem;
    }

    .omx-table--stack td {
        border: 0;
        padding: 0.18rem 0;
    }

    .omx-table--stack td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-size: var(--omx-fs-xs);
        color: var(--omx-text-muted);
        line-height: 1.3;
    }

    /* The first cell is the record's identity, so it leads. */
    .omx-table--stack td:first-child {
        font-size: var(--omx-fs-md);
        font-weight: 600;
        padding-top: 0;
    }

    /* Actions sit together at the foot of the block, thumb-sized. */
    .omx-table--stack td:last-child {
        padding-top: 0.6rem;
        text-align: left !important;
    }

    .omx-table--stack td:last-child .omx-icon-btn {
        width: 40px !important;
        height: 40px !important;
    }

    /* Call / WhatsApp are the point of the block on a lead or a prospect, so
       they get thumb-sized targets rather than the dense list-row sizing the
       desktop table uses. */
    .omx-table--stack td:last-child .btn-sm,
    .omx-table--stack td:last-child .omx-comm-actions .btn {
        min-height: 40px;
        padding-left: 0.85rem;
        padding-right: 0.85rem;
    }

    .omx-table--stack td:last-child > .d-inline-flex,
    .omx-table--stack td:last-child .omx-comm-actions {
        flex-wrap: wrap;
        gap: 0.4rem !important;
    }

    /* A cell hidden for narrow screens must not leave its label behind. */
    .omx-table--stack td.d-none {
        display: none !important;
    }

    /* A stacked table has nothing to scroll sideways, and leaving the scroll
       container live swallows the horizontal half of a swipe. */
    .table-responsive:has(> .omx-table--stack) {
        overflow-x: visible;
    }

    /* ----------------------------------------------------------------------
       THE OPENING SCREEN.

       On a desktop the greeting costs nothing — there is room to spare. On a
       phone the title, the role/date subtitle and the orientation line together
       consumed the first fifth of the screen before a single piece of work
       appeared, and the one sentence that answers "what needs me now?" was the
       smallest, greyest thing on it.

       So on phones only: the greeting steps back, and the orientation sentence
       steps forward to normal reading size and normal text colour. Nothing
       here changes a single pixel at 992px and above.
       ---------------------------------------------------------------------- */
    #omx-main .omx-page-title {
        font-size: 1.3rem;
        line-height: 1.25;
    }

    .omx-orientation {
        font-size: var(--omx-fs-md) !important;
        color: var(--omx-text) !important;
        line-height: 1.45;
    }

    /* Tappable targets inside the sentence, without turning it into a row of
       buttons — it is still a sentence. */
    .omx-orientation a {
        text-decoration: underline;
        text-underline-offset: 3px;
    }
}

/* ==========================================================================
   Home screen — hero, setup strip, work rows
   RC-HOME. Three additions, all additive: no existing selector is changed, so
   every other screen renders exactly as it did. Each sits with the tokens it
   uses rather than inventing new colours.
   ========================================================================== */

/* The one figure read first. Flex, not grid, so the actions drop below the
   detail on a phone instead of being squeezed beside it. */
.omx-hero {
    display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 1.75rem;
    padding: 1.5rem 1.75rem;
}
.omx-hero__figure { display: flex; align-items: baseline; gap: 0.6rem; }
.omx-hero__value {
    font-size: 3rem; font-weight: 700; line-height: 1; letter-spacing: -0.03em;
}
.omx-hero__label { font-size: var(--omx-fs-lg); font-weight: 600; }
.omx-hero__detail {
    flex: 1 1 16rem; min-width: 0;
    font-size: var(--omx-fs-sm); color: var(--omx-text-muted);
}
/* The orientation sentence is this hero's caption now, so it carries no
   margin of its own here. */
.omx-hero__detail .omx-orientation { margin-bottom: 0 !important; }
.omx-hero__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-left: auto; }

@media (max-width: 575.98px) {
    .omx-hero { padding: 1.25rem; gap: 0.85rem; }
    .omx-hero__value { font-size: 2.5rem; }
    /* On a phone the actions are the point of the card: full width, thumb-sized,
       and never tucked into a corner where the hand does not reach. */
    .omx-hero__actions { margin-left: 0; width: 100%; }
    .omx-hero__actions .btn { flex: 1 1 10rem; }
}

/* Setup: one strip where three stacked blocks used to be. */
.omx-setup-strip {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem;
    padding: 0.9rem 1.25rem;
    background: var(--omx-gold-soft);
    border-color: var(--omx-gold-border);
}
.omx-setup-strip__body { flex: 1 1 20rem; min-width: 0; }
.omx-setup-strip__bar {
    height: 5px; border-radius: var(--omx-radius-pill); margin: 0.5rem 0 0.4rem;
    background: rgba(190, 155, 62, 0.22); overflow: hidden;
}
.omx-setup-strip__bar > span { display: block; height: 100%; background: var(--omx-gold-strong); }
.omx-setup-strip__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.omx-setup-strip__all > summary {
    cursor: pointer; font-size: var(--omx-fs-xs); color: var(--omx-text-muted);
    min-height: 44px; display: inline-flex; align-items: center;
}
/* A full-width disclosure inside a wrapping flex row: the steps list needs the
   whole strip, not the column the summary happens to sit in. */
.omx-setup-strip__all[open] { flex: 1 1 100%; }

/* A row of work that can be acted on. The link grows; the actions keep their
   own hit area beside it and are never nested inside the link. */
.omx-work-row { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.omx-work-row__link {
    display: flex; align-items: center; gap: 0.5rem; flex: 1 1 auto; min-width: 0;
    text-decoration: none; color: var(--omx-text); font-size: var(--omx-fs-sm);
    min-height: 44px;
}
.omx-work-row__link:hover { color: var(--omx-accent-hover); }
.omx-work-row .omx-comm-actions { flex: 0 0 auto; }