/*
 * Finance Ops Hub — design tokens & component styles.
 * Loaded after Bootstrap 5.3; overrides happen via Bootstrap CSS variables
 * wherever possible. Rules for using this file: .claude/skills/ui-design/SKILL.md
 */

:root {
    /* Palette — the only colours the app uses. The values here ARE the
       default theme; user themes (end of file) override them wholesale. */
    --fdoh-accent: #0f766e;
    --fdoh-accent-hover: #0b5d57;
    --fdoh-accent-subtle: #e6f4f2;
    --fdoh-on-accent: #ffffff;
    --fdoh-bg: #f4f6f9;
    --fdoh-surface: #ffffff;
    --fdoh-border: #e4e8ee;
    --fdoh-border-strong: #c3ccd9;
    --fdoh-drill-bg: #f6f8fb;
    --fdoh-drill-bg-nested: #eceff5;
    --fdoh-stripe: #f8fafc;
    --fdoh-text: #1c2534;
    --fdoh-text-muted: #64748b;
    --fdoh-focus-ring: rgba(15, 118, 110, 0.15);
    --fdoh-header-bg: #101828;
    --fdoh-header-ink: #ffffff;
    --fdoh-header-muted: #94a3b8;
    --fdoh-header-hover-bg: rgba(255, 255, 255, 0.1);
    --fdoh-header-chip-bg: rgba(255, 255, 255, 0.15);
    --fdoh-sidebar-bg: #1e293b;
    --fdoh-sidebar-text: #94a3b8;
    --fdoh-sidebar-ink: #ffffff;
    --fdoh-sidebar-bright: #cbd5e1;
    --fdoh-sidebar-muted: #64748b;
    --fdoh-sidebar-divider: rgba(255, 255, 255, 0.08);
    --fdoh-sidebar-hover-bg: rgba(255, 255, 255, 0.06);
    --fdoh-sidebar-chip-bg: rgba(255, 255, 255, 0.08);
    --fdoh-sidebar-active-bg: var(--fdoh-accent);
    --fdoh-sidebar-active-ink: #ffffff;
    /* Status colours (badges, callouts, help headers). */
    --fdoh-ok: #177245;
    --fdoh-ok-bg: #e7f6ec;
    --fdoh-warn: #92600a;
    --fdoh-warn-bg: #fdf3e1;
    --fdoh-danger: #b42318;
    --fdoh-danger-bg: #fdeaea;
    --fdoh-neutral: #5b6474;
    --fdoh-neutral-bg: #eef1f5;
    /* Typography — themes may swap these (e.g. serif display). */
    --fdoh-font-body: var(--bs-font-sans-serif);
    --fdoh-font-display: var(--bs-font-sans-serif);

    /* Bridge into Bootstrap. */
    --bs-body-bg: var(--fdoh-bg);
    --bs-body-color: var(--fdoh-text);
    --bs-border-color: var(--fdoh-border);
    --bs-link-color: var(--fdoh-accent);
    --bs-link-hover-color: var(--fdoh-accent-hover);
    --bs-secondary-color: var(--fdoh-text-muted);
}

body {
    background-color: var(--fdoh-bg);
    color: var(--fdoh-text);
    font-size: 0.925rem;
    font-family: var(--fdoh-font-body);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--fdoh-font-display);
}

/* ---------- Shell layout ----------
   Fixed chrome: 56px dark header on top, 44px chat bar at the bottom,
   sidebar + right rail sticky in between. Body padding reserves the space. */

body.fdoh-app {
    padding-top: 56px;
    padding-bottom: 44px;
}

.fdoh-sidebar {
    --bs-offcanvas-width: 250px;
    --bs-offcanvas-bg: var(--fdoh-sidebar-bg);
    width: 250px;
    flex-shrink: 0;
    background: var(--fdoh-sidebar-bg);
}

/* Above the md breakpoint Bootstrap's .offcanvas-md forces transparent
   background, auto width and flex-grow:1 — override all of it so the sidebar
   stays a fixed dark 250px column and the main area keeps the flex growth. */
@media (min-width: 768px) {
    .fdoh-sidebar {
        position: sticky !important;
        top: 56px;
        width: 250px !important;
        height: calc(100vh - 100px) !important;
        flex-grow: 0 !important;
        background-color: var(--fdoh-sidebar-bg) !important;
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
    }
}

.fdoh-content {
    padding: 1.5rem;
}

/* In-page anchor targets (e.g. Booking's section chips) land below the
   fixed 56px topbar instead of underneath it. */
.fdoh-content [id] {
    scroll-margin-top: 72px;
}

@media (min-width: 992px) {
    .fdoh-content {
        padding: 2rem 2.5rem;
    }
}

/* ---------- Header (topbar) ---------- */

.fdoh-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 56px;
    background: var(--fdoh-header-bg);
    z-index: 1030;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0 1rem;
}

.fdoh-header-brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--fdoh-header-ink);
    text-decoration: none;
    min-width: 0;
}

.fdoh-header-brand:hover,
.fdoh-header-brand:focus {
    color: var(--fdoh-header-ink);
}

.fdoh-header-module {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fdoh-header-btn {
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--fdoh-header-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.fdoh-header-btn:hover,
.fdoh-header-btn:focus,
.fdoh-header-btn[aria-expanded="true"] {
    color: var(--fdoh-header-ink);
    background: var(--fdoh-header-hover-bg);
}

.fdoh-quick-add {
    background: var(--fdoh-accent);
    color: var(--fdoh-on-accent);
}

.fdoh-quick-add:hover,
.fdoh-quick-add:focus,
.fdoh-quick-add[aria-expanded="true"] {
    background: var(--fdoh-accent-hover);
    color: var(--fdoh-on-accent);
}

.fdoh-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--fdoh-header-chip-bg);
    color: var(--fdoh-header-ink);
    font-size: 0.78rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Dropdowns opened from the header */

.fdoh-dropdown {
    min-width: 250px;
    border-color: var(--fdoh-border);
    box-shadow: 0 8px 24px rgba(16, 24, 40, 0.12);
}

.fdoh-dropdown .dropdown-item {
    font-size: 0.875rem;
}

.fdoh-soon-light {
    font-size: 0.65rem;
    font-weight: 600;
    padding: 0.1rem 0.45rem;
    border-radius: 99px;
    background: var(--fdoh-neutral-bg);
    color: var(--fdoh-neutral);
}

/* Module-navigation grid (apps button) */

.fdoh-apps-menu {
    width: 340px;
    max-height: 70vh;
    overflow-y: auto;
    padding: 0.75rem;
}

.fdoh-apps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.25rem;
}

.fdoh-app-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 0.6rem 0.25rem;
    border-radius: 0.5rem;
    color: var(--fdoh-text);
    text-decoration: none;
    font-size: 0.72rem;
    text-align: center;
    line-height: 1.2;
}

.fdoh-app-tile:hover,
.fdoh-app-tile:focus {
    background: var(--fdoh-accent-subtle);
    color: var(--fdoh-accent);
}

.fdoh-app-tile i {
    font-size: 1.15rem;
    color: var(--fdoh-accent);
}

/* ---------- Right utility rail ---------- */

.fdoh-rail {
    position: sticky;
    top: 56px;
    height: calc(100vh - 100px);
    width: 48px;
    flex-shrink: 0;
    background: var(--fdoh-surface);
    border-left: 1px solid var(--fdoh-border);
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 0.75rem 0;
}

.fdoh-rail-btn {
    position: relative;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--fdoh-text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
}

.fdoh-rail-btn:hover,
.fdoh-rail-btn:focus {
    background: var(--fdoh-accent-subtle);
    color: var(--fdoh-accent);
}

/* Unread marker on a rail icon (announcements). */
.fdoh-rail-dot {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--fdoh-danger);
    border: 2px solid var(--fdoh-surface);
}

/* ---------- Announcements panel ---------- */

.fdoh-announce {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.fdoh-announce-item {
    border: 1px solid var(--fdoh-border);
    border-radius: 10px;
    padding: 0.75rem 0.9rem;
    background: var(--fdoh-surface);
}

.fdoh-announce-pinned {
    border-color: var(--fdoh-accent);
    background: var(--fdoh-accent-subtle);
}

.fdoh-announce-meta {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    color: var(--fdoh-text-muted);
    margin-bottom: 0.4rem;
}

.fdoh-announce-meta .bi-pin-angle-fill {
    color: var(--fdoh-accent);
}

.fdoh-announce-title {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.fdoh-announce-body {
    font-size: 0.85rem;
}

.fdoh-announce-body p:last-child,
.fdoh-announce-body ul:last-child {
    margin-bottom: 0;
}

/* ---------- Bottom chat bar ---------- */

.fdoh-chatbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 44px;
    background: var(--fdoh-surface);
    border-top: 1px solid var(--fdoh-border);
    z-index: 1030;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0 1rem;
}

.fdoh-chatbar .form-control {
    background: var(--fdoh-bg);
    max-width: 480px;
}

/* ---------- Team chat dock + rooms (C1, 2026-07-22) ----------
   The 44px chat bar is a live dock: recent-conversation chips with unread
   badges and a popup room above the bar. The /chat page reuses the same
   message-stream classes. Colours are tokens only — themes style it free. */

.fdoh-chat-chips {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-grow: 1;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.fdoh-chat-chips::-webkit-scrollbar {
    display: none;
}

.fdoh-chat-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    border: 1px solid var(--fdoh-border);
    border-radius: 999px;
    background: var(--fdoh-surface);
    color: var(--fdoh-text);
    font-size: 0.8125rem;
    padding: 0.125rem 0.625rem;
    white-space: nowrap;
    flex-shrink: 0;
}

.fdoh-chat-chip:hover,
.fdoh-chat-chip.active {
    border-color: color-mix(in srgb, var(--fdoh-accent) 45%, var(--fdoh-border));
    background: var(--fdoh-accent-subtle);
    color: var(--fdoh-text);
}

.fdoh-chat-chip .bi {
    color: var(--fdoh-text-muted);
    font-size: 0.75rem;
}

.fdoh-chat-unread {
    background: var(--fdoh-accent);
    color: var(--fdoh-on-accent);
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.125rem;
    min-width: 1.125rem;
    height: 1.125rem;
    padding: 0 0.3rem;
    text-align: center;
    flex-shrink: 0;
}

/* Presence dot: online = ok token; offline = strong border grey. */
.fdoh-chat-online {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--fdoh-ok);
    flex-shrink: 0;
}

.fdoh-chat-online.fdoh-chat-off {
    background: var(--fdoh-border-strong);
}

/* Popup room above the bar (one at a time; /chat is the full view). */
.fdoh-chat-popup {
    position: fixed;
    right: 1rem;
    bottom: 52px;
    z-index: 1031;
    width: 400px;
    max-width: calc(100vw - 2rem);
    height: min(500px, calc(100vh - 130px));
    display: flex;
    flex-direction: column;
    background: var(--fdoh-surface);
    border: 1px solid var(--fdoh-border);
    border-radius: 0.9rem 0.9rem 0 0;
    box-shadow: 0 10px 30px color-mix(in srgb, var(--fdoh-text) 18%, transparent);
}

.fdoh-chat-popup-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--fdoh-border);
}

/* Message stream — shared by the popup and the /chat page. */
.fdoh-chat-messages {
    flex-grow: 1;
    overflow-y: auto;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.fdoh-chat-msg {
    max-width: 85%;
    border-radius: 0.75rem;
    padding: 0.375rem 0.625rem;
    font-size: 0.875rem;
    line-height: 1.4;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    /* Bidi: Arabic messages flow RTL per line (assistant precedent). */
    unicode-bidi: plaintext;
    text-align: start;
}

.fdoh-chat-msg-mine {
    align-self: flex-end;
    background: var(--fdoh-accent-subtle);
    border: 1px solid color-mix(in srgb, var(--fdoh-accent) 20%, var(--fdoh-border));
}

.fdoh-chat-msg-theirs {
    align-self: flex-start;
    background: var(--fdoh-drill-bg);
    border: 1px solid var(--fdoh-border);
}

.fdoh-chat-msg-meta {
    font-size: 0.6875rem;
    color: var(--fdoh-text-muted);
    margin: 0.35rem 0 0.1rem;
}

.fdoh-chat-msg-meta .fdoh-chat-msg-sender {
    font-weight: 600;
}

.fdoh-chat-composer {
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;
    padding: 0.5rem 0.75rem;
    border-top: 1px solid var(--fdoh-border);
}

.fdoh-chat-composer textarea {
    resize: none;
    max-height: 7rem;
}

/* ---------- /chat page (two panes; details live in an offcanvas) ---------- */

.fdoh-chat-page {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 1rem;
    /* 56px header + content padding + 44px dock */
    height: calc(100vh - 170px);
    min-height: 360px;
}

.fdoh-chat-pane {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.fdoh-chat-list {
    overflow-y: auto;
    flex-grow: 1;
    padding: 0.25rem;
}

.fdoh-chat-list-section {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--fdoh-text-muted);
    padding: 0.6rem 0.5rem 0.2rem;
}

.fdoh-chat-list-item {
    display: flex;
    width: 100%;
    text-align: start;
    gap: 0.5rem;
    align-items: center;
    border: 0;
    background: transparent;
    padding: 0.45rem 0.5rem;
    border-radius: 0.5rem;
    color: var(--fdoh-text);
    font-size: 0.875rem;
}

.fdoh-chat-list-item:hover {
    background: var(--fdoh-drill-bg);
}

.fdoh-chat-list-item.active {
    background: var(--fdoh-accent-subtle);
}

.fdoh-chat-list-main {
    min-width: 0;
    flex-grow: 1;
}

.fdoh-chat-preview {
    font-size: 0.75rem;
    color: var(--fdoh-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fdoh-chat-avatar {
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    background: var(--fdoh-accent-subtle);
    color: var(--fdoh-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    flex-shrink: 0;
}

@media (max-width: 767.98px) {
    .fdoh-chat-page {
        grid-template-columns: 1fr;
    }

    /* Below md one pane shows at a time; JS toggles this class. */
    .fdoh-chat-page.fdoh-chat-in-room .fdoh-chat-pane-list,
    .fdoh-chat-page:not(.fdoh-chat-in-room) .fdoh-chat-pane-room {
        display: none;
    }
}

/* ---------- Team chat C2: rich messaging (2026-07-22) ----------
   Bubbles gain a wrapper (hover actions anchor to it), reactions, threads,
   attachments, mentions, typing and seen lines. Tokens only. */

.fdoh-chat-msg-wrap {
    position: relative;
    max-width: 85%;
    align-self: flex-start;
}

.fdoh-chat-msg-wrap-mine {
    align-self: flex-end;
}

.fdoh-chat-msg-wrap .fdoh-chat-msg {
    max-width: 100%;
}

.fdoh-chat-msg-deleted {
    align-self: flex-start;
    color: var(--fdoh-text-muted);
    font-style: italic;
    background: transparent;
    border: 1px dashed var(--fdoh-border);
}

.fdoh-chat-msg .fdoh-chat-body a {
    overflow-wrap: anywhere;
}

.fdoh-chat-msg code {
    background: var(--fdoh-drill-bg-nested);
    padding: 0.05rem 0.3rem;
    border-radius: 0.25rem;
}

.fdoh-chat-code {
    background: var(--fdoh-drill-bg-nested);
    border: 1px solid var(--fdoh-border);
    border-radius: 0.4rem;
    padding: 0.5rem 0.6rem;
    margin: 0.25rem 0;
    font-size: 0.8125rem;
    overflow-x: auto;
    white-space: pre;
}

.fdoh-chat-edited {
    font-size: 0.6875rem;
    color: var(--fdoh-text-muted);
    margin-inline-start: 0.25rem;
}

.fdoh-chat-mention {
    background: var(--fdoh-accent-subtle);
    color: var(--fdoh-accent);
    border-radius: 0.25rem;
    padding: 0 0.15rem;
    font-weight: 600;
}

.fdoh-chat-mention-me {
    background: var(--fdoh-warn-bg);
    color: var(--fdoh-text);
}

/* Reactions row under a bubble. */
.fdoh-chat-reactions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.fdoh-chat-reactions:not(:empty) {
    margin-top: 0.3rem;
}

.fdoh-chat-reaction {
    border: 1px solid var(--fdoh-border);
    border-radius: 999px;
    background: var(--fdoh-surface);
    font-size: 0.75rem;
    padding: 0 0.45rem;
    line-height: 1.35rem;
    color: var(--fdoh-text);
}

.fdoh-chat-reaction.active {
    border-color: var(--fdoh-accent);
    background: var(--fdoh-accent-subtle);
}

.fdoh-chat-reaction span {
    color: var(--fdoh-text-muted);
    font-size: 0.6875rem;
}

/* Floating emoji picker (one instance, body-level). */
.fdoh-chat-picker {
    position: fixed;
    z-index: 1060;
    display: flex;
    gap: 0.15rem;
    background: var(--fdoh-surface);
    border: 1px solid var(--fdoh-border);
    border-radius: 999px;
    padding: 0.25rem 0.4rem;
    box-shadow: 0 6px 18px color-mix(in srgb, var(--fdoh-text) 14%, transparent);
}

.fdoh-chat-picker button {
    border: 0;
    background: transparent;
    font-size: 1.05rem;
    border-radius: 0.4rem;
    padding: 0.1rem 0.25rem;
}

.fdoh-chat-picker button:hover {
    background: var(--fdoh-accent-subtle);
}

/* Hover action bar, top-end of the bubble. */
.fdoh-chat-actions {
    position: absolute;
    top: -0.8rem;
    inset-inline-end: 0.25rem;
    display: none;
    gap: 0.1rem;
    background: var(--fdoh-surface);
    border: 1px solid var(--fdoh-border);
    border-radius: 999px;
    padding: 0.05rem 0.2rem;
    box-shadow: 0 3px 10px color-mix(in srgb, var(--fdoh-text) 12%, transparent);
}

.fdoh-chat-msg-wrap:hover .fdoh-chat-actions {
    display: flex;
}

.fdoh-chat-action {
    border: 0;
    background: transparent;
    color: var(--fdoh-text-muted);
    font-size: 0.8125rem;
    border-radius: 0.4rem;
    padding: 0.1rem 0.3rem;
}

.fdoh-chat-action:hover {
    background: var(--fdoh-accent-subtle);
    color: var(--fdoh-accent);
}

/* Thread chip on the parent + the slide-over thread panel. */
.fdoh-chat-thread-chip {
    display: block;
    border: 0;
    background: transparent;
    color: var(--fdoh-accent);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.2rem 0 0;
    text-align: start;
}

.fdoh-chat-thread {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    width: min(380px, 100%);
    display: flex;
    flex-direction: column;
    background: var(--fdoh-surface);
    border-inline-start: 1px solid var(--fdoh-border);
    border-radius: 0 var(--bs-card-border-radius, 0.375rem) var(--bs-card-border-radius, 0.375rem) 0;
    box-shadow: -10px 0 24px color-mix(in srgb, var(--fdoh-text) 10%, transparent);
    z-index: 5;
}

.fdoh-chat-thread.d-none {
    display: none !important;
}

/* Attachments: inline image previews and file chips. */
.fdoh-chat-img {
    display: block;
    max-width: min(260px, 100%);
    max-height: 220px;
    border-radius: 0.5rem;
    border: 1px solid var(--fdoh-border);
    margin-top: 0.3rem;
}

.fdoh-chat-file {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.3rem;
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--fdoh-border);
    border-radius: 0.5rem;
    background: var(--fdoh-surface);
    color: var(--fdoh-text);
    font-size: 0.8125rem;
    max-width: 260px;
    text-decoration: none;
}

.fdoh-chat-file:hover {
    border-color: color-mix(in srgb, var(--fdoh-accent) 45%, var(--fdoh-border));
    color: var(--fdoh-text);
}

.fdoh-chat-file-size {
    color: var(--fdoh-text-muted);
    font-size: 0.6875rem;
    flex-shrink: 0;
}

/* Composer helpers: typing line, pending uploads, seen receipt. */
.fdoh-chat-typing {
    padding: 0 0.85rem 0.15rem;
    font-size: 0.75rem;
    color: var(--fdoh-text-muted);
    font-style: italic;
}

.fdoh-chat-pending {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem 0;
    border-top: 1px solid var(--fdoh-border);
}

.fdoh-chat-pending-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    border: 1px solid var(--fdoh-border);
    border-radius: 999px;
    background: var(--fdoh-drill-bg);
    font-size: 0.75rem;
    padding: 0.1rem 0.5rem;
}

.fdoh-chat-pending-chip .btn-close {
    width: 0.5em;
    height: 0.5em;
}

.fdoh-chat-seen {
    align-self: flex-end;
    font-size: 0.6875rem;
    color: var(--fdoh-text-muted);
    margin-top: 0.1rem;
}

/* Mention badge (dock chip + list) and the composer autocomplete. */
.fdoh-chat-unread-mention {
    background: var(--fdoh-danger);
}

.fdoh-chat-mention-menu {
    position: fixed;
    z-index: 1060;
    display: flex;
    flex-direction: column;
    background: var(--fdoh-surface);
    border: 1px solid var(--fdoh-border);
    border-radius: 0.5rem;
    box-shadow: 0 6px 18px color-mix(in srgb, var(--fdoh-text) 14%, transparent);
    padding: 0.25rem;
    max-height: 40vh;
    overflow-y: auto;
}

.fdoh-chat-mention-item {
    display: flex;
    align-items: center;
    border: 0;
    background: transparent;
    color: var(--fdoh-text);
    font-size: 0.875rem;
    text-align: start;
    border-radius: 0.4rem;
    padding: 0.3rem 0.5rem;
}

.fdoh-chat-mention-item.active,
.fdoh-chat-mention-item:hover {
    background: var(--fdoh-accent-subtle);
}

.fdoh-chat-mention-item .fdoh-chat-avatar {
    width: 1.4rem;
    height: 1.4rem;
    font-size: 0.6rem;
}

.fdoh-chat-edit textarea {
    min-width: min(320px, 60vw);
}

/* ---------- Team chat C3: discovery & control (2026-07-22) ---------- */

/* Presence: online (ok) is the base class; away/dnd/off recolour it. */
.fdoh-chat-online.fdoh-chat-away {
    background: var(--fdoh-warn);
}

.fdoh-chat-online.fdoh-chat-dnd {
    background: var(--fdoh-danger);
}

/* Search-hit flash when jumping to a message. */
.fdoh-chat-flash .fdoh-chat-msg {
    background: var(--fdoh-accent-subtle);
    border-color: var(--fdoh-accent);
    transition: background 0.4s ease, border-color 0.4s ease;
}

/* Desktop-notification opt-in strip under the search box. */
.fdoh-chat-notif-prompt {
    border: 0;
    border-bottom: 1px solid var(--fdoh-border);
    background: var(--fdoh-accent-subtle);
    color: var(--fdoh-accent);
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 0.4rem 0.75rem;
    text-align: start;
}

.fdoh-chat-status-menu {
    width: min(300px, 90vw);
}

/* A toggled-on hover action (e.g. an active bookmark). */
.fdoh-chat-action.active {
    color: var(--fdoh-accent);
}

/* ---------- Team chat C4: Hub integration (2026-07-22) ---------- */

/* The assistant launcher yields the corner while a chat overlay is open. */
.fdoh-chat-overlay-open .fdoh-assistant-launcher,
.fdoh-chat-overlay-open .fdoh-assistant-invite {
    display: none;
}

/* Share dialog reuses the popup shell but sizes to its form. */
.fdoh-chat-share {
    height: auto;
    max-height: none;
    border-radius: 0.9rem;
    bottom: 60px;
}

/* Voice notes: compact inline player; recording turns the mic hot. */
.fdoh-chat-audio {
    display: block;
    margin-top: 0.3rem;
    /* Fixed width: a % here resolves against the shrink-to-fit bubble and
       collapses the player to an empty pill (ahmed's screenshot, 2026-07-23). */
    width: 260px;
    max-width: 70vw;
    height: 2.25rem;
}

.fdoh-chat-recording {
    color: var(--fdoh-on-accent) !important;
    background: var(--fdoh-danger) !important;
    border-color: var(--fdoh-danger) !important;
}

/* ---------- Team chat C5: calls (2026-07-23) ---------- */

.fdoh-chat-call {
    border-top: 1px solid var(--fdoh-border);
    background: var(--fdoh-drill-bg);
    padding: 0.5rem 0.75rem;
}

.fdoh-chat-call-tiles {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.fdoh-chat-call-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    width: 132px;
    height: 96px;
    border: 2px solid var(--fdoh-border);
    border-radius: 0.6rem;
    background: var(--fdoh-surface);
    overflow: hidden;
}

.fdoh-chat-call-tile.speaking {
    border-color: var(--fdoh-ok);
}

.fdoh-chat-call-tile.has-video .fdoh-chat-avatar {
    display: none;
}

.fdoh-chat-call-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fdoh-chat-call-name {
    position: relative;
    z-index: 1;
    font-size: 0.6875rem;
    color: var(--fdoh-text-muted);
    background: color-mix(in srgb, var(--fdoh-surface) 80%, transparent);
    border-radius: 0.25rem;
    padding: 0 0.25rem;
    max-width: 95%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fdoh-chat-call-tile.has-video .fdoh-chat-call-name {
    position: absolute;
    bottom: 0.25rem;
}

.fdoh-chat-call-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ---------- Brand ---------- */

/* Company logo. The source PNG (public/images/logo-white.png, 156x91) is white on
   transparent, so chrome placements render it as a CSS mask filled with the
   surrounding ink token — it stays legible on the light-header themes. The box is
   sized to 70:31 so the mask (painted at 100% width, anchored top) crops at source
   row ~70: full wordmark + GROUP kept, the tagline row dropped (illegible at this
   size and it would render as a smudge). */
.fdoh-header-logo {
    width: 70px;
    height: 31px;
    flex-shrink: 0;
    background-color: var(--fdoh-header-ink);
    -webkit-mask: url('../images/logo-white.png') no-repeat top center / 100% auto;
    mask: url('../images/logo-white.png') no-repeat top center / 100% auto;
}

.fdoh-sidebar .fdoh-header-logo {
    background-color: var(--fdoh-sidebar-ink);
}

/* Login page: the auth screen is always the default dark palette (guest pages carry
   no user theme), so the white PNG renders as-is. */
.fdoh-auth-logo {
    height: 72px;
    width: auto;
}

/* ---------- Sidebar navigation ---------- */

/* Module title — the sidebar's first element, larger and brighter than the
   component groups beneath it. */
.fdoh-nav-module {
    color: var(--fdoh-sidebar-ink);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.2;
    padding: 1.1rem 0.75rem 0.5rem;
    border-bottom: 1px solid var(--fdoh-sidebar-divider);
    margin-bottom: 0.35rem;
}

.fdoh-nav-section {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--fdoh-sidebar-muted);
    font-weight: 700;
    padding: 0.4rem 0.75rem;
    margin-top: 1rem;
}

.fdoh-nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    color: var(--fdoh-sidebar-text);
    font-size: 0.875rem;
    padding: 0.45rem 0.75rem;
    border-radius: 0.5rem;
}

.fdoh-nav-link:hover,
.fdoh-nav-link:focus {
    color: var(--fdoh-sidebar-ink);
    background: var(--fdoh-sidebar-hover-bg);
}

.fdoh-nav-link.active {
    color: var(--fdoh-sidebar-active-ink);
    background: var(--fdoh-sidebar-active-bg);
    font-weight: 600;
}

/* Collapsible component group (e.g. Payroll, Gratuity inside HRMS Integration) */

.fdoh-nav-comp {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    border: 0;
    background: transparent;
    color: var(--fdoh-sidebar-bright);
    font-size: 0.875rem;
    font-weight: 600;
    text-align: left;
    padding: 0.5rem 0.75rem;
    margin-top: 0.25rem;
    border-radius: 0.5rem;
}

.fdoh-nav-comp:hover,
.fdoh-nav-comp:focus {
    color: var(--fdoh-sidebar-ink);
    background: var(--fdoh-sidebar-hover-bg);
}

.fdoh-nav-comp.active {
    color: var(--fdoh-sidebar-ink);
}

.fdoh-nav-caret {
    font-size: 0.7rem;
    transition: transform 0.2s ease;
}

.fdoh-nav-comp[aria-expanded="true"] .fdoh-nav-caret {
    transform: rotate(180deg);
}

.fdoh-nav-sub {
    padding-left: 2.15rem;
}

.fdoh-soon {
    font-size: 0.65rem;
    font-weight: 600;
    padding: 0.1rem 0.45rem;
    border-radius: 99px;
    background: var(--fdoh-sidebar-chip-bg);
    color: var(--fdoh-sidebar-text);
}

/* ---------- Page header ---------- */

.fdoh-eyebrow {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--fdoh-text-muted);
    font-weight: 600;
    margin-bottom: 0.15rem;
}

.fdoh-page-title {
    font-size: 1.35rem;
    font-weight: 600;
}

/* ---------- Cards & tables ---------- */

.card {
    --bs-card-bg: var(--fdoh-surface);
    --bs-card-border-color: var(--fdoh-border);
    --bs-card-cap-bg: transparent;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.table {
    --bs-table-striped-bg: var(--fdoh-stripe);
    margin-bottom: 0;
}

.table thead th {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--fdoh-text-muted);
    font-weight: 600;
    white-space: nowrap;
}

.table tbody td {
    font-variant-numeric: tabular-nums;
}

/* ---------- Buttons & forms ---------- */

.btn-primary {
    --bs-btn-bg: var(--fdoh-accent);
    --bs-btn-border-color: var(--fdoh-accent);
    --bs-btn-hover-bg: var(--fdoh-accent-hover);
    --bs-btn-hover-border-color: var(--fdoh-accent-hover);
    --bs-btn-active-bg: var(--fdoh-accent-hover);
    --bs-btn-active-border-color: var(--fdoh-accent-hover);
    --bs-btn-disabled-bg: var(--fdoh-accent);
    --bs-btn-disabled-border-color: var(--fdoh-accent);
    --bs-btn-focus-shadow-rgb: 15, 118, 110;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--fdoh-accent);
    box-shadow: 0 0 0 0.2rem var(--fdoh-focus-ring);
}

/* ---------- Status badges (x-status-badge) ---------- */

.fdoh-badge {
    display: inline-block;
    padding: 0.25em 0.65em;
    border-radius: 99px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: capitalize;
    letter-spacing: 0.01em;
}

.fdoh-badge-success {
    background: var(--fdoh-ok-bg);
    color: var(--fdoh-ok);
}

.fdoh-badge-info {
    background: var(--fdoh-accent-subtle);
    color: var(--fdoh-accent);
}

.fdoh-badge-warning {
    background: var(--fdoh-warn-bg);
    color: var(--fdoh-warn);
}

.fdoh-badge-danger {
    background: var(--fdoh-danger-bg);
    color: var(--fdoh-danger);
}

.fdoh-badge-secondary {
    background: var(--fdoh-neutral-bg);
    color: var(--fdoh-neutral);
}

/* ---------- Document-type tabs (e.g. Booking's JVs / invoice pairs) ----------
   Stronger delineation than Bootstrap's default (ahmed, 2026-07-16): darker
   tab borders and an accent top bar on the active tab. */

.fdoh-doc-tabs {
    --bs-nav-tabs-border-color: var(--fdoh-border-strong);
    --bs-nav-tabs-link-hover-border-color: var(--fdoh-border-strong) var(--fdoh-border-strong) var(--fdoh-border-strong);
    --bs-nav-tabs-link-active-border-color: var(--fdoh-border-strong) var(--fdoh-border-strong) var(--fdoh-surface);
}

.fdoh-doc-tabs {
    gap: 0.35rem;
}

/* Inactive tabs are bordered, tinted "cards" too — not bare labels — so
   every tab reads as clickable; the bottom border stays open so the bar's
   own line runs underneath (ahmed, 2026-07-16). */
.fdoh-doc-tabs .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--fdoh-text-muted);
    font-weight: 500;
    background: var(--fdoh-drill-bg-nested);
    border-color: var(--fdoh-border-strong) var(--fdoh-border-strong) transparent;
    border-top-width: 2px;
}

.fdoh-doc-tabs .nav-link:hover,
.fdoh-doc-tabs .nav-link:focus {
    color: var(--fdoh-text);
    background: var(--fdoh-surface);
    border-color: var(--fdoh-border-strong) var(--fdoh-border-strong) transparent;
}

.fdoh-doc-tabs .nav-link.active {
    color: var(--fdoh-accent);
    font-weight: 600;
    background: var(--fdoh-surface);
    border-top: 2px solid var(--fdoh-accent);
}

/* Tinted strip behind the tab bar so the active (white) tab pops. */
.fdoh-doc-tabs-header {
    background: var(--fdoh-drill-bg);
}

/* ---------- In-place drill levels (expand-in-place subtables) ----------
   A drill and a drill-within-a-drill must read as different depths (ahmed,
   2026-07-16): each level indents, carries a left bar and a progressively
   deeper background tint. */

.fdoh-drill {
    background: var(--fdoh-drill-bg);
    border-left: 3px solid var(--fdoh-accent);
    border-bottom: 1px solid var(--fdoh-border-strong);
}

.fdoh-drill .fdoh-drill {
    background: var(--fdoh-drill-bg-nested);
    border-left-color: var(--fdoh-text-muted);
    border-bottom: 0;
    margin: 0.25rem 0 0.5rem 0.75rem;
    border-radius: 0 6px 6px 0;
}

/* Drill tables sit on the tinted container, not on their own white bg. */
.fdoh-drill table.table {
    --bs-table-bg: transparent;
}

/* Exception queue in-row drill: resolved context on the left, the type's
   help entry on the right (fix-faster round, 2026-07-22). */
.fdoh-exc-details {
    min-width: 16rem;
}

.fdoh-exc-details dt {
    margin-bottom: 0.1rem;
}

.fdoh-exc-help {
    max-width: 46rem;
}

.fdoh-exc-help h1 {
    font-size: 1rem;
    margin-bottom: 0.35rem;
}

.fdoh-exc-help p {
    margin-bottom: 0.4rem;
}

/* Arabic text cells (MOHRE names): proper RTL direction, right-aligned. */
.fdoh-rtl {
    direction: rtl;
    text-align: right;
}

/* WPS fulfilment marks on the MOHRE statement rendering. */
.fdoh-wps-ok {
    color: var(--fdoh-ok);
}

.fdoh-wps-bad {
    color: var(--fdoh-danger);
}

/* Not covered by WPS — the statement's circled-arrow legend mark (↻N). */
.fdoh-wps-nc {
    color: var(--fdoh-warn);
}

/* Superseded SIF versions: kept for audit, visually stepped back. */
.fdoh-superseded > td {
    opacity: 0.55;
}

/* Hold buttons in the transfer drill: one width whatever the label
   ("Hold" / "HR hold too"), so the reason inputs line up down the column. */
.fdoh-hold-btn {
    min-width: 7.5rem;
}

/* Actions cells with inline forms: content WRAPS inside the column
   instead of overflowing past the table edge when columns are resized. */
.fdoh-actions-cell {
    white-space: normal;
    min-width: 14rem;
}

/* Semantic action tiers (ahmed, 2026-07-21): the eye finds the right
   button before reading the label. Green = confirms/advances money or
   data; accent = produces/progresses something; red = undoes/refuses.
   Neutral actions keep btn-outline-secondary. Token-driven — all six
   themes and dark mode follow automatically. */
.fdoh-btn-go,
.fdoh-btn-do,
.fdoh-btn-danger {
    background: transparent;
}

.fdoh-btn-go {
    color: var(--fdoh-ok);
    border-color: color-mix(in srgb, var(--fdoh-ok) 55%, transparent);
}

.fdoh-btn-go:hover,
.fdoh-btn-go:focus-visible {
    color: var(--fdoh-ok);
    background: color-mix(in srgb, var(--fdoh-ok) 12%, transparent);
    border-color: var(--fdoh-ok);
}

.fdoh-btn-do {
    color: var(--fdoh-accent);
    border-color: color-mix(in srgb, var(--fdoh-accent) 55%, transparent);
}

.fdoh-btn-do:hover,
.fdoh-btn-do:focus-visible {
    color: var(--fdoh-accent);
    background: color-mix(in srgb, var(--fdoh-accent) 12%, transparent);
    border-color: var(--fdoh-accent);
}

.fdoh-btn-danger {
    color: var(--fdoh-danger);
    border-color: color-mix(in srgb, var(--fdoh-danger) 55%, transparent);
}

.fdoh-btn-danger:hover,
.fdoh-btn-danger:focus-visible {
    color: var(--fdoh-danger);
    background: color-mix(in srgb, var(--fdoh-danger) 12%, transparent);
    border-color: var(--fdoh-danger);
}

/* Client-side sort on drill tables: clickable heads with a direction caret
   (main tables sort server-side via .fdoh-th-sort links instead). */
th.fdoh-client-sort {
    cursor: pointer;
    user-select: none;
}

th.fdoh-sorted-asc::after,
th.fdoh-sorted-desc::after {
    content: "▴";
    color: var(--fdoh-accent);
    margin-left: 0.25rem;
}

th.fdoh-sorted-desc::after {
    content: "▾";
}

/* ---------- Callout (persistent page-state notice, e.g. rebuild required) ---------- */

.fdoh-callout {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    background: var(--fdoh-surface);
    border: 1px solid var(--fdoh-border);
    border-left: 4px solid var(--fdoh-danger);
    border-radius: 8px;
}

.fdoh-callout .bi {
    font-size: 1.25rem;
    color: var(--fdoh-danger);
}

.fdoh-callout-warning {
    border-left-color: var(--fdoh-warn);
}

.fdoh-callout-warning .bi {
    color: var(--fdoh-warn);
}

.fdoh-callout-success {
    border-left-color: var(--fdoh-accent);
}

.fdoh-callout-success .bi {
    color: var(--fdoh-accent);
}

.fdoh-callout .spinner-border {
    color: var(--fdoh-warn);
    flex-shrink: 0;
}

/* ---------- Empty state (x-empty-state) ---------- */

.fdoh-empty-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--fdoh-accent-subtle);
    color: var(--fdoh-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.fdoh-empty-title {
    font-weight: 600;
    font-size: 1.05rem;
}

.fdoh-empty-text {
    max-width: 36rem;
}

/* ---------- Sortable/filterable table heads (x-th-sort, x-th-filter) ---------- */

.fdoh-th-sort {
    color: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    white-space: nowrap;
}

.fdoh-th-sort:hover,
.fdoh-th-sort:focus,
.fdoh-th-sort.active {
    color: var(--fdoh-accent);
}

.fdoh-th-sort .bi {
    font-size: 0.6rem;
}

.fdoh-th-sort:not(.active) .bi {
    opacity: 0.25;
}

.fdoh-filter-row td {
    background: var(--fdoh-surface);
    padding: 0.35rem 0.5rem;
}

/* Column resize handles + drag-to-reorder (layout's table enhancer). */

.fdoh-content table.table thead tr:first-child th {
    position: relative;
    cursor: grab;
}

/* Drop target while dragging a column head over another. */
.fdoh-content table.table th.fdoh-col-drop {
    box-shadow: inset 3px 0 0 var(--fdoh-accent);
}

/* Column-chooser toolbar injected above every list table. */
.fdoh-table-tools {
    display: flex;
    justify-content: flex-end;
    padding: 0.3rem 0.5rem;
    border-bottom: 1px solid var(--fdoh-border);
}

.fdoh-col-menu {
    min-width: 230px;
    max-height: 60vh;
    overflow-y: auto;
}

.fdoh-col-menu .dropdown-item {
    cursor: pointer;
}

.fdoh-col-resize {
    position: absolute;
    top: 0;
    right: 0;
    width: 10px;
    height: 100%;
    cursor: col-resize;
    user-select: none;
    /* Always-visible grip: a faint column divider so the resize edge is
       findable without fishing; brightens on hover. */
    background: linear-gradient(var(--fdoh-border), var(--fdoh-border)) right 4px top 20% / 1px 60% no-repeat;
}

.fdoh-col-resize:hover {
    background: linear-gradient(var(--fdoh-accent), var(--fdoh-accent)) right 3px top 0 / 3px 100% no-repeat;
}

body.fdoh-resizing {
    cursor: col-resize !important;
    user-select: none;
}

/* Fixed layout after a resize: keep long cell content from breaking rows. */
.fdoh-content table.table td {
    overflow-wrap: break-word;
}

.fdoh-filter-input {
    font-size: 0.78rem;
    min-width: 5.5rem;
}

/* Status badge + flip button rows: equal-width badges keep the buttons
   in a straight vertical line whatever the label says. */
.fdoh-status-toggle .fdoh-badge {
    min-width: 4.5rem;
    text-align: center;
}

/* ---------- Toasts (global flash / validation messages) ---------- */

/* Fixed above the chat bar (44px), bottom-right: visible wherever the user
   has scrolled, never shifts page content the way inline alerts did. */
.fdoh-toast-container {
    position: fixed;
    right: 1rem;
    bottom: calc(44px + 1rem);
    z-index: 1090;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: min(420px, calc(100vw - 2rem));
}

.fdoh-toast {
    width: 100%;
    background: var(--fdoh-surface);
    border: 1px solid var(--fdoh-border);
    box-shadow: 0 6px 24px rgba(16, 24, 40, 0.12);
}

.fdoh-toast .toast-body {
    color: var(--fdoh-text);
}

.fdoh-toast-success {
    border-left: 3px solid var(--fdoh-accent);
}

.fdoh-toast-success .bi {
    color: var(--fdoh-accent);
}

.fdoh-toast-warning {
    border-left: 3px solid var(--bs-warning);
}

.fdoh-toast-warning .bi {
    color: var(--bs-warning);
}

.fdoh-toast-danger {
    border-left: 3px solid var(--bs-danger);
}

.fdoh-toast-danger .bi {
    color: var(--bs-danger);
}

/* ---------- Drill-down chips (badge links between master pages) ---------- */

/* Clickable badge chips: hover = context tooltip, click = open the related
   master list filtered to the chip (work locations, subledgers, ...). */
.fdoh-chip {
    margin: 0.1rem 0.25rem 0.1rem 0;
    text-decoration: none;
    cursor: pointer;
}

.fdoh-chip:hover {
    filter: brightness(0.93);
    text-decoration: underline;
}

/* ---------- Type-to-search lookup menu (data-fdoh-lookup inputs) ---------- */

.fdoh-lookup-menu {
    position: fixed;
    z-index: 1080;
    background: var(--fdoh-surface);
    border: 1px solid var(--fdoh-border);
    border-radius: 0.5rem;
    box-shadow: 0 8px 24px rgba(16, 24, 40, 0.12);
    /* ~10 rows visible; the scrollbar covers the rest of the matches. */
    max-height: 330px;
    overflow-y: auto;
    padding: 0.25rem;
    max-width: 26rem;
}

.fdoh-lookup-item {
    display: flex;
    gap: 0.6rem;
    align-items: baseline;
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
    padding: 0.35rem 0.6rem;
    border-radius: 0.4rem;
    font-size: 0.85rem;
}

.fdoh-lookup-item:hover,
.fdoh-lookup-item.active {
    background: var(--fdoh-accent-subtle);
}

.fdoh-lookup-code {
    font-weight: 600;
    min-width: 3.2rem;
    white-space: nowrap;
}

.fdoh-lookup-label {
    color: var(--fdoh-text-muted);
}

.fdoh-lookup-more {
    padding: 0.35rem 0.6rem;
    font-size: 0.75rem;
    color: var(--fdoh-text-muted);
}

/* ---------- Sync progress (x-sync-progress, x-sync-table-watcher) ---------- */

.fdoh-progress {
    height: 6px;
}

.fdoh-progress .progress-bar {
    background-color: var(--fdoh-accent);
    transition: width 0.6s ease;
}

.fdoh-row-progress {
    max-width: 220px;
}

.fdoh-progress-sm {
    height: 4px;
}

.fdoh-row-syncing {
    background-color: var(--fdoh-accent-subtle) !important;
}

@keyframes fdoh-spin {
    to {
        transform: rotate(360deg);
    }
}

.fdoh-spin {
    display: inline-block;
    animation: fdoh-spin 1s linear infinite;
}

/* ---------- Money (x-money) ---------- */

.fdoh-money {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.fdoh-money-currency {
    font-size: 0.75em;
    color: var(--fdoh-text-muted);
    margin-right: 0.35em;
}

/* ---------- Definition label (key/value rows in cards) ---------- */

.fdoh-label {
    display: inline-block;
    min-width: 5rem;
    color: var(--fdoh-text-muted);
}

/* ---------- Mobile-app install page (QR code, 2026-07-23) ----------
   The QR must stay black-on-white in EVERY theme or camera apps can't scan
   it — literal colours here are a scannability requirement, not theming. */

.fdoh-qr svg {
    display: block;
    background: #ffffff;
    border: 1px solid var(--fdoh-border);
    border-radius: 0.5rem;
}

/* Centre logo badge: the QR is generated at error-correction level H, which
   tolerates 30% occlusion — the badge covers far less than that. */
.fdoh-qr-wrap {
    position: relative;
    display: inline-block;
}

.fdoh-qr-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 58px;
    height: 30px;
    background: #ffffff;
    border-radius: 0.375rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Black like the QR modules. The mask is anchored top and the element height
   crops the source image (156x91) at row 65 — wordmark + GROUP only, the
   "Life. Simplified." tagline at the bottom stays hidden. */
.fdoh-qr-logo::after {
    content: "";
    width: 48px;
    height: 20px;
    background-color: #000000;
    -webkit-mask: url('../images/logo-white.png') no-repeat top center / 100% auto;
    mask: url('../images/logo-white.png') no-repeat top center / 100% auto;
}

/* ---------- Auth (guest layout) ---------- */

.fdoh-auth {
    background: var(--fdoh-header-bg);
    min-height: 100vh;
    display: flex;
    align-items: center;
}

.fdoh-auth-sub {
    color: var(--fdoh-sidebar-text);
    font-size: 0.875rem;
}

/* ---------- In-app help (right-rail panel, rendered + decorated markdown) ---------- */

.fdoh-help-panel {
    --bs-offcanvas-width: 480px;
}

.fdoh-help-eyebrow {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fdoh-accent);
    margin-bottom: 0.15rem;
}

.fdoh-help {
    font-size: 0.875rem;
    line-height: 1.55;
}

.fdoh-help h1 {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0 0 0.4rem;
}

.fdoh-help h1 + p {
    color: var(--fdoh-text-muted);
}

/* Jump chips between the lede and the first section. */
.fdoh-help-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0 0 1rem;
}

.fdoh-help-chips a {
    font-size: 0.75rem;
    padding: 0.2rem 0.65rem;
    border-radius: 99px;
    background: var(--fdoh-bg);
    color: var(--fdoh-text-muted);
    text-decoration: none;
}

.fdoh-help-chips a:hover {
    background: var(--fdoh-accent-subtle);
    color: var(--fdoh-accent);
}

/* Icon-led section headings — one tone per skeleton section. */
.fdoh-help-h {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9375rem;
    font-weight: 600;
    margin: 1.1rem 0 0.5rem;
    scroll-margin-top: 0.5rem;
}

.fdoh-help-ico {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.fdoh-help-ico .bi {
    font-size: 0.9375rem;
}

/* Tones reuse the badge/callout palette already used across the app. */
.fdoh-help-h-usage { color: var(--fdoh-accent); }
.fdoh-help-h-usage .fdoh-help-ico { background: var(--fdoh-accent-subtle); }
.fdoh-help-h-rules { color: var(--fdoh-warn); }
.fdoh-help-h-rules .fdoh-help-ico { background: var(--fdoh-warn-bg); }
.fdoh-help-h-trouble { color: var(--fdoh-danger); }
.fdoh-help-h-trouble .fdoh-help-ico { background: var(--fdoh-danger-bg); }
.fdoh-help-h-dict { color: var(--fdoh-text); }
.fdoh-help-h-dict .fdoh-help-ico { background: var(--fdoh-bg); color: var(--fdoh-text-muted); }

/* Exception-type dictionary accordion — same theme as the article. */
.fdoh-help-dict .accordion-item {
    border-color: var(--fdoh-border);
}

.fdoh-help-dict .accordion-button {
    font-size: 0.8125rem;
    color: var(--fdoh-text);
    background: transparent;
    box-shadow: none;
}

.fdoh-help-dict .accordion-button:not(.collapsed) {
    color: var(--fdoh-accent);
    background: var(--fdoh-accent-subtle);
}

.fdoh-help-dict .accordion-button:focus {
    box-shadow: none;
    border-color: var(--fdoh-border);
}

.fdoh-help-dict code {
    font-size: 0.75rem;
    color: var(--fdoh-text);
    background: var(--fdoh-bg);
    border: 1px solid var(--fdoh-border);
    border-radius: 0.25rem;
    padding: 0.05rem 0.35rem;
}

.fdoh-help-dict .accordion-button:not(.collapsed) code {
    color: var(--fdoh-accent);
    background: var(--fdoh-surface);
}

.fdoh-help-dict .fdoh-badge {
    text-transform: none;
    flex-shrink: 0;
}

/* Bootstrap's chevron (::after) carries margin-left auto of its own — with
   the badge's ms-auto that splits the free space between the two and strands
   the badge mid-row. One auto margin only: the badge takes the space, the
   chevron hugs it. */
.fdoh-help-dict .accordion-button::after {
    margin-left: 0.5rem;
}

.fdoh-help h2:not(.fdoh-help-h),
.fdoh-help h3 {
    font-size: 0.9375rem;
    font-weight: 600;
    margin: 0.9rem 0 0.35rem;
}

.fdoh-help ul,
.fdoh-help ol {
    padding-left: 1.15rem;
    margin-bottom: 0.6rem;
}

.fdoh-help li {
    margin-bottom: 0.3rem;
}

.fdoh-help li strong,
.fdoh-help p strong {
    color: var(--fdoh-accent);
    font-weight: 600;
}

/* Callouts inside help keep their own tone colour, not the accent. */
.fdoh-help .fdoh-callout {
    font-size: 0.8125rem;
    padding: 0.6rem 0.75rem;
    margin: 0.35rem 0 0.9rem;
    align-items: flex-start;
}

.fdoh-help .fdoh-callout strong {
    color: inherit;
}

.fdoh-help .fdoh-callout .bi {
    font-size: 1rem;
    margin-top: 0.1rem;
}

/* Troubleshooting symptom -> fix cards. */
.fdoh-help-card {
    border: 1px solid var(--fdoh-border);
    border-radius: 8px;
    padding: 0.6rem 0.75rem;
    margin-bottom: 0.5rem;
    font-size: 0.8125rem;
}

.fdoh-help-card-title {
    font-weight: 600;
    margin-bottom: 0.15rem;
}

.fdoh-help code {
    color: var(--fdoh-text);
    background: var(--fdoh-bg);
    border: 1px solid var(--fdoh-border);
    border-radius: 0.25rem;
    padding: 0 0.25rem;
}

.fdoh-help .fdoh-badge {
    text-transform: none;
}

.fdoh-help table {
    width: 100%;
    font-size: 0.85em;
    margin-bottom: 0.75rem;
}

.fdoh-help table td,
.fdoh-help table th {
    border: 1px solid var(--fdoh-border);
    padding: 0.25rem 0.4rem;
}

/* ---------- "Ask the Hub" assistant (2026-07-21) ----------
   Floating launcher above the chat bar + slide-over chat panel. All colours
   are tokens so every theme (dark included) styles the chat for free. */

/* Launcher pill — Ask-Microsoft style (ahmed, 2026-07-22): surface pill
   with an accent icon chip, docked above the chat bar. */
.fdoh-assistant-launcher {
    position: fixed;
    right: 1rem;
    bottom: 5px; /* seated INSIDE the 44px bottom bar (ahmed, 2026-07-23) */
    z-index: 1031; /* above the bar it sits in */
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid var(--fdoh-border);
    border-radius: 999px;
    padding: 0.2rem 0.8rem 0.2rem 0.2rem;
    background: var(--fdoh-surface);
    color: var(--fdoh-text);
    font-size: 0.875rem;
    font-weight: 600;
}

.fdoh-assistant-launcher:hover {
    border-color: color-mix(in srgb, var(--fdoh-accent) 45%, var(--fdoh-border));
    color: var(--fdoh-text);
}

/* The bottom bar reserves its right end for the seated launcher, so chat
   chips never slide underneath it. Below sm the pill is icon-only. */
.fdoh-chatbar {
    padding-right: 170px;
}

@media (max-width: 575.98px) {
    .fdoh-chatbar {
        padding-right: 56px;
    }
}

.fdoh-assistant-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 0.5rem;
    background: var(--fdoh-accent);
    color: var(--fdoh-on-accent);
    font-size: 0.85rem;
    flex-shrink: 0;
}

/* One-time invitation card above the launcher (now in the bottom bar). */
.fdoh-assistant-invite {
    position: fixed;
    right: 1rem;
    bottom: 56px;
    z-index: 1030;
    width: min(340px, calc(100vw - 2rem));
    border: 1px solid var(--fdoh-border);
    border-radius: 0.9rem;
    padding: 1rem 1.1rem;
    background: var(--fdoh-surface);
    box-shadow: 0 10px 30px color-mix(in srgb, var(--fdoh-text) 18%, transparent);
    font-size: 0.875rem;
}

.fdoh-assistant-invite-lead {
    font-weight: 600;
}

.fdoh-assistant-panel {
    width: 420px;
    max-width: 100vw;
}

.fdoh-assistant-history {
    max-width: 260px;
}

.fdoh-assistant-messages {
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.fdoh-assistant-msg {
    max-width: 88%;
    border-radius: 0.75rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.45;
    white-space: pre-wrap;
    /* Bidi: Arabic lines flow RTL with punctuation on the correct side,
       per paragraph — mixed-language replies handle themselves. */
    unicode-bidi: plaintext;
    text-align: start;
}

.fdoh-assistant-msg p,
.fdoh-assistant-msg li {
    unicode-bidi: plaintext;
    text-align: start;
}

.fdoh-assistant-msg-user {
    align-self: flex-end;
    background: var(--fdoh-accent-subtle);
    border: 1px solid color-mix(in srgb, var(--fdoh-accent) 20%, var(--fdoh-border));
}

.fdoh-assistant-msg-assistant {
    align-self: flex-start;
    background: var(--fdoh-drill-bg);
    border: 1px solid var(--fdoh-border);
    white-space: normal;
}

.fdoh-assistant-msg-assistant p {
    margin: 0;
}

.fdoh-assistant-msg-assistant ul {
    margin: 0.25rem 0;
    padding-left: 1.2rem;
}

.fdoh-assistant-br {
    display: block;
    height: 0.5rem;
}

.fdoh-assistant-msg-assistant code {
    background: var(--fdoh-drill-bg-nested);
    padding: 0.05rem 0.3rem;
    border-radius: 0.25rem;
}

.fdoh-assistant-error {
    color: var(--fdoh-danger);
}

.fdoh-assistant-status {
    color: var(--fdoh-text-muted);
    font-size: 0.8rem;
}

.fdoh-assistant-status .spinner-border {
    width: 0.7rem;
    height: 0.7rem;
    border-width: 0.12em;
}

.fdoh-assistant-composer {
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;
    padding: 0.75rem 1rem;
    background: var(--fdoh-surface);
}

.fdoh-assistant-composer textarea {
    resize: none;
    font-size: 0.875rem;
}

.fdoh-assistant-composer .btn {
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
}

/* Hands-free conversation mode toggle (headset), lit while active. */
.fdoh-assistant-voice-on {
    color: var(--fdoh-on-accent) !important;
    background: var(--fdoh-accent) !important;
    border-color: var(--fdoh-accent) !important;
}

/* Voice: dictating-mic pulse + per-reply read-aloud button. */
.fdoh-assistant-mic-live {
    color: var(--fdoh-on-accent) !important;
    background: var(--fdoh-accent) !important;
    border-color: var(--fdoh-accent) !important;
    animation: fdoh-assistant-pulse 1.4s infinite;
}

@keyframes fdoh-assistant-pulse {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--fdoh-accent) 45%, transparent); }
    55% { box-shadow: 0 0 0 6px transparent; }
}

/* Curated FAQ chips under the welcome bubble. */
.fdoh-assistant-faq {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
    margin-top: 0.25rem;
}

.fdoh-assistant-faq-title {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--fdoh-text-muted);
}

.fdoh-assistant-faq-chip {
    border: 1px solid var(--fdoh-border);
    border-radius: 999px;
    background: var(--fdoh-surface);
    color: var(--fdoh-text);
    padding: 0.3rem 0.75rem;
    font-size: 0.8rem;
    text-align: start;
}

.fdoh-assistant-faq-chip:hover {
    border-color: color-mix(in srgb, var(--fdoh-accent) 45%, var(--fdoh-border));
    color: var(--fdoh-accent);
}

/* Action row under a reply: read-aloud + thumbs (Ask-Microsoft style). */
.fdoh-assistant-actions {
    display: flex;
    gap: 0.6rem;
    margin-top: 0.35rem;
}

.fdoh-assistant-speak,
.fdoh-assistant-thumb {
    border: 0;
    background: none;
    padding: 0.1rem 0;
    color: var(--fdoh-text-muted);
    font-size: 0.8rem;
    line-height: 1;
}

.fdoh-assistant-speak:hover,
.fdoh-assistant-thumb:hover {
    color: var(--fdoh-accent);
}

.fdoh-assistant-thumb-active {
    color: var(--fdoh-accent);
}

.fdoh-assistant-disclaimer {
    padding: 0.3rem 1rem 0;
    font-size: 0.72rem;
    text-align: end;
}

/* Three-dot typing indicator while the first token streams in. */
.fdoh-assistant-typing {
    display: inline-flex;
    gap: 0.25rem;
    padding: 0.2rem 0;
}

.fdoh-assistant-typing span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--fdoh-text-muted);
    animation: fdoh-assistant-blink 1.2s infinite both;
}

.fdoh-assistant-typing span:nth-child(2) { animation-delay: 0.2s; }
.fdoh-assistant-typing span:nth-child(3) { animation-delay: 0.4s; }

@keyframes fdoh-assistant-blink {
    0%, 80%, 100% { opacity: 0.25; }
    40% { opacity: 1; }
}

/* ---------- Home widget picker (customisable dashboard, 2026-07-23) ---------- */

.fdoh-widget-pick {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.5rem 0.6rem;
    margin-bottom: 0.5rem;
    border: 1px solid var(--fdoh-border);
    border-radius: 0.5rem;
    background: var(--fdoh-surface);
    cursor: grab;
}

.fdoh-widget-pick:active {
    cursor: grabbing;
}

.fdoh-widget-grip {
    color: var(--fdoh-text-muted);
    margin-top: 0.15rem;
}

/* ---------- Roles & access grant cells (editable matrix, 2026-07-24) ---------- */

.fdoh-grant-cell {
    text-decoration: none;
    line-height: 1;
}

.fdoh-grant-cell:hover .fdoh-badge,
.fdoh-grant-cell:focus-visible .fdoh-badge {
    outline: 2px solid var(--fdoh-accent);
    outline-offset: 1px;
}

/* ---------- User themes (Claude Design handoff, 2026-07-17) ----------
   Applied as <html data-fdoh-theme="...">; no attribute = the default
   theme above, untouched. Each block overrides the base tokens; the
   shared [data-fdoh-theme] block derives the secondary tints from them
   so a theme only declares its palette. terminal + midnight are dark
   (the layout also sets data-bs-theme="dark" for Bootstrap's own parts). */

html[data-fdoh-theme] {
    --fdoh-accent-subtle: color-mix(in srgb, var(--fdoh-accent) 10%, var(--fdoh-surface));
    --fdoh-border-strong: color-mix(in srgb, var(--fdoh-text) 22%, var(--fdoh-border));
    --fdoh-drill-bg: color-mix(in srgb, var(--fdoh-text) 4%, var(--fdoh-surface));
    --fdoh-drill-bg-nested: color-mix(in srgb, var(--fdoh-text) 9%, var(--fdoh-surface));
    --fdoh-stripe: color-mix(in srgb, var(--fdoh-text) 3%, var(--fdoh-surface));
    --fdoh-focus-ring: color-mix(in srgb, var(--fdoh-accent) 18%, transparent);
    --fdoh-header-hover-bg: color-mix(in srgb, var(--fdoh-header-ink) 10%, transparent);
    --fdoh-header-chip-bg: color-mix(in srgb, var(--fdoh-header-ink) 16%, transparent);
    --fdoh-sidebar-divider: color-mix(in srgb, var(--fdoh-sidebar-ink) 12%, transparent);
    --fdoh-sidebar-hover-bg: color-mix(in srgb, var(--fdoh-sidebar-ink) 8%, transparent);
    --fdoh-sidebar-chip-bg: color-mix(in srgb, var(--fdoh-sidebar-ink) 10%, transparent);
    --fdoh-neutral-bg: color-mix(in srgb, var(--fdoh-neutral) 14%, var(--fdoh-surface));
}

html[data-fdoh-theme="navy"] {
    --fdoh-accent: #1f3864;
    --fdoh-accent-hover: #2e75b6;
    --fdoh-bg: #eceef1;
    --fdoh-surface: #ffffff;
    --fdoh-border: #d8dce1;
    --fdoh-text: #2a2e35;
    --fdoh-text-muted: #6b7280;
    --fdoh-header-bg: #ffffff;
    --fdoh-header-ink: #2a2e35;
    --fdoh-header-muted: #6b7280;
    --fdoh-sidebar-bg: #1b2436;
    --fdoh-sidebar-text: #c7ccd6;
    --fdoh-sidebar-ink: #ffffff;
    --fdoh-sidebar-bright: #c7ccd6;
    --fdoh-sidebar-muted: #7e879a;
    --fdoh-sidebar-active-bg: #243049;
    --fdoh-sidebar-active-ink: #ffffff;
    --fdoh-ok: #2e7d32; --fdoh-ok-bg: #e9f3ec;
    --fdoh-warn: #b9770e; --fdoh-warn-bg: #fbf1df;
    --fdoh-danger: #c0392b; --fdoh-danger-bg: #fbecea;
    --fdoh-neutral: #6b7280;
    --fdoh-font-body: 'Public Sans', var(--bs-font-sans-serif);
    --fdoh-font-display: 'Public Sans', var(--bs-font-sans-serif);
    color-scheme: light;
}

html[data-fdoh-theme="ledger"] {
    --fdoh-accent: #0e5b43;
    --fdoh-accent-hover: #0b4936;
    --fdoh-on-accent: #f8f6ee;
    --fdoh-bg: #f6f4ef;
    --fdoh-surface: #ffffff;
    --fdoh-border: #e5e1d6;
    --fdoh-text: #26251f;
    --fdoh-text-muted: #6e6959;
    --fdoh-header-bg: #fcfbf8;
    --fdoh-header-ink: #26251f;
    --fdoh-header-muted: #6e6959;
    --fdoh-sidebar-bg: #fcfbf8;
    --fdoh-sidebar-text: #4b4638;
    --fdoh-sidebar-ink: #26251f;
    --fdoh-sidebar-bright: #4b4638;
    --fdoh-sidebar-muted: #a39c88;
    --fdoh-sidebar-active-bg: #0e5b43;
    --fdoh-sidebar-active-ink: #f8f6ee;
    --fdoh-ok: #0e5b43; --fdoh-ok-bg: #e8f1ec;
    --fdoh-warn: #96700f; --fdoh-warn-bg: #f7efd8;
    --fdoh-danger: #a4442e; --fdoh-danger-bg: #f6e7e2;
    --fdoh-neutral: #6e6959;
    --fdoh-font-body: 'IBM Plex Sans', var(--bs-font-sans-serif);
    --fdoh-font-display: 'Source Serif 4', Georgia, serif;
    color-scheme: light;
}

html[data-fdoh-theme="terminal"] {
    --fdoh-accent: #22d3ee;
    --fdoh-accent-hover: #5ee1f2;
    --fdoh-on-accent: #04121a;
    --fdoh-bg: #0d1220;
    --fdoh-surface: #111828;
    --fdoh-border: #1c2537;
    --fdoh-text: #dde3ec;
    --fdoh-text-muted: #8ca0bc;
    --fdoh-header-bg: #0d1220;
    --fdoh-header-ink: #dde3ec;
    --fdoh-header-muted: #8ca0bc;
    --fdoh-sidebar-bg: #0a0f1a;
    --fdoh-sidebar-text: #9db0c9;
    --fdoh-sidebar-ink: #dde3ec;
    --fdoh-sidebar-bright: #9db0c9;
    --fdoh-sidebar-muted: #4a5870;
    --fdoh-sidebar-active-bg: #13202e;
    --fdoh-sidebar-active-ink: #22d3ee;
    --fdoh-ok: #4ade80; --fdoh-ok-bg: #0c1d16;
    --fdoh-warn: #facc15; --fdoh-warn-bg: #1e1706;
    --fdoh-danger: #f26d5f; --fdoh-danger-bg: #2a120e;
    --fdoh-neutral: #8ca0bc;
    --fdoh-font-body: 'IBM Plex Sans', var(--bs-font-sans-serif);
    --fdoh-font-display: 'IBM Plex Sans', var(--bs-font-sans-serif);
    color-scheme: dark;
}

html[data-fdoh-theme="indigo"] {
    --fdoh-accent: #4338ca;
    --fdoh-accent-hover: #3730a3;
    --fdoh-bg: #eef0f6;
    --fdoh-surface: #ffffff;
    --fdoh-border: #dcdfe8;
    --fdoh-text: #22242e;
    --fdoh-text-muted: #6b7280;
    --fdoh-header-bg: #ffffff;
    --fdoh-header-ink: #22242e;
    --fdoh-header-muted: #6b7280;
    --fdoh-sidebar-bg: #26284b;
    --fdoh-sidebar-text: #c9cce4;
    --fdoh-sidebar-ink: #ffffff;
    --fdoh-sidebar-bright: #c9cce4;
    --fdoh-sidebar-muted: #7e82ac;
    --fdoh-sidebar-active-bg: #4338ca;
    --fdoh-sidebar-active-ink: #ffffff;
    --fdoh-ok: #15803d; --fdoh-ok-bg: #e7f3eb;
    --fdoh-warn: #a16207; --fdoh-warn-bg: #fbf1df;
    --fdoh-danger: #b3261e; --fdoh-danger-bg: #f9e9e7;
    --fdoh-neutral: #6b7280;
    --fdoh-font-body: 'Public Sans', var(--bs-font-sans-serif);
    --fdoh-font-display: 'Public Sans', var(--bs-font-sans-serif);
    color-scheme: light;
}

html[data-fdoh-theme="graphite"] {
    --fdoh-accent: #1a1a1a;
    --fdoh-accent-hover: #000000;
    --fdoh-bg: #f2f2f2;
    --fdoh-surface: #ffffff;
    --fdoh-border: #e4e4e4;
    --fdoh-text: #1a1a1a;
    --fdoh-text-muted: #6e6e6e;
    --fdoh-header-bg: #f2f2f2;
    --fdoh-header-ink: #1a1a1a;
    --fdoh-header-muted: #6e6e6e;
    --fdoh-sidebar-bg: #ffffff;
    --fdoh-sidebar-text: #4c4c4c;
    --fdoh-sidebar-ink: #1a1a1a;
    --fdoh-sidebar-bright: #4c4c4c;
    --fdoh-sidebar-muted: #9b9b9b;
    --fdoh-sidebar-active-bg: #1a1a1a;
    --fdoh-sidebar-active-ink: #ffffff;
    --fdoh-ok: #1f7a47; --fdoh-ok-bg: #e9f2ec;
    --fdoh-warn: #8a6d12; --fdoh-warn-bg: #f6f0dc;
    --fdoh-danger: #b3261e; --fdoh-danger-bg: #f8e9e7;
    --fdoh-neutral: #6e6e6e;
    --fdoh-font-body: 'IBM Plex Sans', var(--bs-font-sans-serif);
    --fdoh-font-display: 'IBM Plex Sans', var(--bs-font-sans-serif);
    color-scheme: light;
}

html[data-fdoh-theme="midnight"] {
    --fdoh-accent: #2e75b6;
    --fdoh-accent-hover: #6fa3e0;
    --fdoh-bg: #101b31;
    --fdoh-surface: #16233d;
    --fdoh-border: #1e2a44;
    --fdoh-text: #d7dfec;
    --fdoh-text-muted: #7c8da8;
    --fdoh-header-bg: #101b31;
    --fdoh-header-ink: #d7dfec;
    --fdoh-header-muted: #7c8da8;
    --fdoh-sidebar-bg: #0c1526;
    --fdoh-sidebar-text: #98a8c2;
    --fdoh-sidebar-ink: #ffffff;
    --fdoh-sidebar-bright: #98a8c2;
    --fdoh-sidebar-muted: #4e5f7e;
    --fdoh-sidebar-active-bg: #16233d;
    --fdoh-sidebar-active-ink: #ffffff;
    --fdoh-ok: #57c785; --fdoh-ok-bg: #12291c;
    --fdoh-warn: #d9a62e; --fdoh-warn-bg: #2a2208;
    --fdoh-danger: #f07a6a; --fdoh-danger-bg: #2a1210;
    --fdoh-neutral: #7c8da8;
    --fdoh-font-body: 'Public Sans', var(--bs-font-sans-serif);
    --fdoh-font-display: 'Public Sans', var(--bs-font-sans-serif);
    color-scheme: dark;
}