/* ========================================
   DevFlow Design System
   ======================================== */

:root {
    --df-primary: #4f46e5;
    --df-primary-hover: #4338ca;
    --df-primary-light: #eef2ff;
    /* The soft border that pairs with each -light tint on a chip, callout or
       active pill. Full-strength --df-* is too heavy there. In dark these go
       translucent, like the tints they sit on. */
    --df-primary-border: #c7d2fe;
    --df-success: #059669;
    --df-success-light: #ecfdf5;
    --df-success-border: #a7f3d0;
    --df-warning: #d97706;
    --df-warning-light: #fffbeb;
    --df-warning-border: #fde68a;
    --df-danger: #dc2626;
    --df-danger-light: #fef2f2;
    --df-danger-border: #fecaca;
    --df-info: #0891b2;
    --df-info-light: #ecfeff;
    --df-info-border: #a5f3fc;
    /* The secondary accent (the old .bg-purple), for a category that must read as
       distinct from the primary — entity kinds, file types, avatar palettes. */
    --df-purple: #7c3aed;
    --df-purple-light: #f5f3ff;
    --df-purple-border: #ddd6fe;
    /* The editor's one text marker (<mark>, .rte-hl). A pasted literal yellow is
       unreadable under light text, so highlights are drawn from this instead. */
    --df-highlight: #fef08a;
    /* Diff viewer. The rows are built in Razor, so these are referenced from inline
       style= attributes — a var() in an inline style still resolves against the
       cascade, which is how an inline style can be made theme-aware at all. */
    --df-diff-add-bg: #dafbe1;
    --df-diff-add-gutter: #ccffd8;
    --df-diff-add-fg: #1a7f37;
    --df-diff-del-bg: #ffebe9;
    --df-diff-del-gutter: #ffd7d5;
    --df-diff-del-fg: #cf222e;
    --df-diff-gutter-fg: #656d76;
    --df-diff-rule: #d0d7de;
    --df-text: #1e293b;
    --df-text-muted: #64748b;
    --df-border: #e2e8f0;
    --df-bg: #f8fafc;
    /* The raised surface a card, modal or popover sits on, against --df-bg.
       Use this rather than #fff so it flips with the dark theme. */
    --df-surface: #ffffff;
    --df-card-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --df-card-shadow-hover: 0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
    --df-radius: 0.625rem;
    --df-transition: 0.2s ease;
    /* z-index tier for inline overlay menus (assignment / badge dropdowns).
       Sits above Bootstrap's tooltip layer (1080) so a stacking context on a
       sibling card can't shove it behind the tabs. The matching overlay is
       `var(--df-z-dropdown) - 1`. */
    --df-z-dropdown: 1090;
}

html, body {
    font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    color: var(--df-text);
    background-color: var(--df-bg);
}

/* Set by toggleMobileNav() while the phone drawer is open. The page behind a drawer must not
   scroll — on iOS, that is the difference between a menu and a menu that slides the article
   around underneath it. Global rather than scoped because nothing else can reach <body>. */
body.nav-locked {
    overflow: hidden;
}

/* ── Phone: one list language ────────────────────────────────────────────────
   Four surfaces became lists on a phone — tickets, a ticket's tasks, timecards,
   alerts — and each was adapted on its own, so each ended up with its own row
   height, type sizes and separator. Read together they looked like four apps.

   These are the shared values. Each surface still writes its own layout, but it
   takes the rhythm from here, which is what makes them look like one product.
   Phone-only: nothing above 640.98px reads them. */
@media (max-width: 640.98px) {
    :root {
        --df-row-pad-y: 12px;
        --df-row-pad-x: 14px;
        --df-row-gap: 6px;
        /* The leading inset a separator starts at, so the rules line up under the text rather
           than cutting the full width — the detail that reads as "designed" on iOS. */
        --df-row-rule-inset: 14px;
        --df-row-title: 0.92rem;
        --df-row-meta: 0.76rem;
        --df-row-min-h: 62px;
    }

    /* Taps get an answer. Without this a row either flashes the OS's grey box over your whole
       card or, with the usual `tap-highlight-color: transparent` reset, does nothing at all and
       the app feels broken rather than fast. */
    a, button, [role="button"], tr {
        -webkit-tap-highlight-color: rgba(79, 70, 229, 0.10);
    }

    /* Rotating the phone must not resize the text. */
    html {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    /* The home indicator sits over the last row of a scrolled list. */
    article.content {
        padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px)) !important;
    }
}

/* ── Phone: fields never smaller than 16px ───────────────────────────────────
   Safari zooms the whole page in when a focused field's text is under 16px, and it does not zoom
   back out. Every .form-control-sm on a filter bar, every date input on the timecard and the
   nav's own search box was doing it — you tap a field and the layout lurches sideways. The fix
   has to be blunt and global, because the offenders are Bootstrap's size modifiers rather than
   anything this app writes per page. */
@media (max-width: 640.98px) {
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea,
    .form-control,
    .form-control-sm,
    .form-select,
    .form-select-sm {
        font-size: 16px;
    }
}

/* ========== Login ========== */
.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--df-surface);
}

.login-card {
    width: 300px;
    text-align: center;
}

.login-title {
    font-size: 1.375rem;
    font-weight: 600;
    color: #111;
    margin: 0 0 0.2rem;
}

.login-subtitle {
    font-size: 0.72rem;
    color: #999;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 0 0 2rem;
}

.login-field {
    margin-bottom: 0.625rem;
}

.login-input {
    display: block;
    width: 100%;
    padding: 0.6rem 0;
    font-size: 0.875rem;
    font-family: inherit;
    color: #111;
    background: transparent;
    border: none;
    border-bottom: 1px solid #ddd;
    border-radius: 0;
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.login-input::placeholder {
    color: #bbb;
}

.login-input:focus {
    border-bottom-color: #111;
}

.login-error {
    padding: 0.5rem 0;
    margin-bottom: 0.5rem;
    color: #e00;
    font-size: 0.78rem;
    text-align: left;
}

.login-remember {
    margin-top: 1rem;
    font-size: 0.78rem;
    color: #888;
}

.login-remember label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
}

.login-remember input[type="checkbox"] {
    accent-color: #111;
    cursor: pointer;
}

.login-btn {
    display: block;
    width: 100%;
    padding: 0.6rem;
    margin-top: 1.5rem;
    font-size: 0.78rem;
    font-weight: 600;
    font-family: inherit;
    color: #fff;
    background: #111;
    border: none;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: background 0.15s;
}

.login-btn:hover {
    background: #333;
}

.login-forgot {
    display: inline-block;
    margin-top: 1rem;
    font-size: 0.72rem;
    color: #aaa;
    text-decoration: none;
}

.login-forgot:hover {
    color: #111;
}

a, .btn-link {
    color: var(--df-primary);
    transition: color var(--df-transition);
}

a:hover {
    color: var(--df-primary-hover);
}

/* ---- Buttons ---- */
.btn {
    border-radius: 0.5rem;
    font-weight: 500;
    transition: all var(--df-transition);
    letter-spacing: 0.01em;
}

.btn-primary {
    color: #fff;
    background-color: var(--df-primary);
    border-color: var(--df-primary);
}

.btn-primary:hover, .btn-primary:focus {
    background-color: var(--df-primary-hover);
    border-color: var(--df-primary-hover);
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
}

.btn-success {
    background-color: var(--df-success);
    border-color: var(--df-success);
}

.btn-danger {
    background-color: var(--df-danger);
    border-color: var(--df-danger);
}

.btn-outline-primary {
    color: var(--df-primary);
    border-color: var(--df-primary);
}

.btn-outline-primary:hover {
    background-color: var(--df-primary);
    border-color: var(--df-primary);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.2rem rgba(79, 70, 229, 0.2);
}

/* ---- Content & Layout ---- */
.content {
    padding-top: 1.5rem;
}

h1:focus {
    outline: none;
}

h3, h4, h5, h6 {
    font-weight: 600;
    color: var(--df-text);
}

/* ---- Cards ---- */
.card {
    border: 1px solid var(--df-border);
    border-radius: var(--df-radius);
    box-shadow: var(--df-card-shadow);
    transition: box-shadow var(--df-transition);
    overflow: hidden;
}

.card:hover {
    box-shadow: var(--df-card-shadow-hover);
}

.card-header {
    background-color: var(--df-surface);
    border-bottom: 1px solid var(--df-border);
    padding: 0.875rem 1.25rem;
    font-weight: 600;
}

.card-body {
    padding: 1.25rem;
}

/* ---- Forms ---- */
.form-control, .form-select {
    border-radius: 0.5rem;
    border-color: var(--df-border);
    transition: border-color var(--df-transition), box-shadow var(--df-transition);
}

.form-control:focus, .form-select:focus {
    border-color: var(--df-primary);
    box-shadow: 0 0 0 0.2rem rgba(79, 70, 229, 0.15);
}

.form-label {
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--df-text);
    margin-bottom: 0.375rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--df-success);
}

.invalid {
    outline: 1px solid var(--df-danger);
}

.validation-message {
    color: var(--df-danger);
    font-size: 0.78rem;
    margin-top: 0.25rem;
}

/* ---- Tables ---- */
.table {
    --bs-table-hover-bg: rgba(79, 70, 229, 0.04);
    font-size: 0.9rem;
}

.table > thead {
    border-bottom: 2px solid var(--df-border);
}

.table > thead th {
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--df-text-muted);
    padding: 0.75rem 1rem;
    white-space: nowrap;
}

.table > tbody > tr > td {
    padding: 0.75rem 1rem;
    vertical-align: middle;
}

.table-hover > tbody > tr {
    cursor: default;
    transition: background-color 0.15s ease;
}

.table-hover tbody tr[style*="cursor"] td {
    transition: background-color 0.15s;
}

/* ---- Badges ---- */
.badge {
    font-weight: 500;
    font-size: 0.78rem;
    padding: 0.35em 0.65em;
    border-radius: 50rem;
    letter-spacing: 0.02em;
}

.bg-purple {
    background-color: #7c3aed !important;
}

.bg-purple.text-white {
    color: #fff !important;
}

/* ---- Alerts ---- */
.alert {
    border-radius: var(--df-radius);
    border: none;
    font-size: 0.9rem;
}

/* ---- Modals ---- */
.modal-content {
    border: none;
    border-radius: 0.75rem;
    box-shadow: 0 20px 60px rgba(0,0,0,0.15), 0 4px 16px rgba(0,0,0,0.1);
}

.modal-header {
    border-bottom: 1px solid var(--df-border);
    padding: 1rem 1.5rem;
}

.modal-body {
    padding: 1.5rem;
}

.modal-footer {
    border-top: 1px solid var(--df-border);
    padding: 1rem 1.5rem;
}

.modal-title {
    font-weight: 600;
}

/* ---- Page Header ---- */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.75rem;
}

.page-header h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
}

/* ---- Loading State ---- */
.loading-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    color: var(--df-text-muted);
}

.loading-placeholder .spinner-border {
    width: 2rem;
    height: 2rem;
    margin-bottom: 0.75rem;
    color: var(--df-primary);
}

/* ---- Empty State ---- */
.empty-state {
    text-align: center;
    padding: 3rem 1.5rem;
    color: var(--df-text-muted);
}

.empty-state-icon {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
    opacity: 0.5;
}

.empty-state p {
    margin-bottom: 0;
    font-size: 0.95rem;
}

/* The second line of an empty state: *why* it is empty, when that is knowable. "No results"
   on its own reads as something broken; "3 filters are narrowing this list" reads as
   something you did, and points at the way out. Wins over `.empty-state p` on specificity,
   which is why it is written with the block. */
.empty-state .empty-state-hint {
    margin: 0.4rem 0 0;
    font-size: 0.85rem;
    color: var(--df-text-muted);
}

.empty-state .empty-state-hint + .btn {
    margin-top: 1.1rem;
}

/* ---- Stat Cards ---- */
.stat-card .card-body {
    padding: 1rem 1.25rem;
}

.stat-card .stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
}

.stat-card .stat-label {
    font-size: 0.78rem;
    color: var(--df-text-muted);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 0.125rem;
}

/* ---- Progress Bars ---- */
.progress {
    border-radius: 50rem;
    background-color: var(--df-border);
}

/* ---- Error Boundary ---- */
.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
    border-radius: var(--df-radius);
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ---- Rich Text Editor ---- */
.rich-text-editor .editor-content {
    border: 1px solid var(--df-border);
    border-radius: 0.5rem;
    padding: 0.75rem;
    background: var(--df-surface);
    min-height: 120px;
}

.textarea-zoom-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.textarea-zoom-bar {
    display: flex;
    gap: 0.25rem;
    justify-content: flex-end;
}

.textarea-zoom-btn {
    padding: 0.1rem 0.45rem;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.4;
    border-radius: 0.35rem;
}

.textarea-zoom-btn:nth-child(2) {
    font-size: 0.78rem;
}

.textarea-zoom-btn:nth-child(3) {
    font-size: 0.875rem;
}

.rich-text-editor .editor-content:focus {
    border-color: var(--df-primary);
    box-shadow: 0 0 0 0.2rem rgba(79, 70, 229, 0.15);
    outline: none;
}

.rich-text-editor .editor-content ul,
.rich-text-editor .editor-content ol {
    padding-left: 1.5rem;
    margin: 0;
}

.rich-text-editor .editor-content ul ul,
.rich-text-editor .editor-content ul ol,
.rich-text-editor .editor-content ol ul,
.rich-text-editor .editor-content ol ol {
    padding-left: 1.5rem;
}

.rich-text-editor {
    position: relative;
}

.rich-text-editor .editor-content img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    margin: 0.5rem 0;
}

.rich-text-editor .editor-content img:hover {
    cursor: pointer;
}

.rich-text-editor .editor-content img.rte-img-selected {
    outline: 2px solid var(--df-primary);
    outline-offset: 1px;
}

.rich-text-editor .rte-img-resize-handle {
    position: absolute;
    display: none;
    width: 12px;
    height: 12px;
    background: var(--df-primary);
    border: 2px solid var(--df-surface);
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    cursor: nwse-resize;
    z-index: 20;
}

/* Toolbar active state */
.rich-text-editor .btn.active {
    background-color: rgba(79, 70, 229, 0.1);
    border-color: var(--df-primary);
    color: var(--df-primary);
}

/* Text style dropdown */
.rich-text-editor .rte-block-select {
    width: auto;
    min-width: 120px;
    height: calc(1.5em + 0.5rem + 2px);
}

/* The image button is a <label> around a hidden file input. */
.rich-text-editor label.btn {
    margin-bottom: 0;
    cursor: pointer;
}

.rich-text-editor .rte-phone-only {
    display: none;
}

/* On the desktop the toolbar stays in view while a long description scrolls under it. (The
   phone pins its bar to the bottom instead — see the phone block below.) */
@media (min-width: 641px) {
    .rich-text-editor .btn-toolbar {
        position: sticky;
        top: 0;
        z-index: 4;
        background: var(--df-surface);
    }
}

/* ⋯ menu. Closed it is nothing; on a phone its items are dealt into the sheet instead. */
.rich-text-editor .rte-menu-wrap {
    position: relative;
}

.rich-text-editor .rte-menu {
    display: none;
}

.rich-text-editor .rte-menu-scrim {
    position: fixed;
    inset: 0;
    z-index: calc(var(--df-z-dropdown) - 1);
}

@media (min-width: 641px) {
    .rich-text-editor .rte-menu.open {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: calc(100% + 4px);
        left: 0;
        z-index: var(--df-z-dropdown);
        min-width: 290px;
        padding: 0.375rem;
        background: var(--df-surface);
        border: 1px solid var(--df-border);
        border-radius: 0.5rem;
        box-shadow: var(--df-card-shadow-hover);
    }

    .rich-text-editor .rte-menu .btn {
        display: flex;
        align-items: center;
        gap: 0.625rem;
        width: 100%;
        padding: 0.375rem 0.625rem;
        border: 0;
        background: none;
        color: var(--df-text);
        font-size: 0.875rem;
        font-weight: 400;
        text-align: left;
    }

    .rich-text-editor .rte-menu .btn:hover,
    .rich-text-editor .rte-menu .btn:focus-visible {
        background: var(--df-primary-light);
        color: var(--df-text);
    }

    .rich-text-editor .rte-menu .btn > i {
        width: 1rem;
        color: var(--df-text-muted);
    }
}

.rich-text-editor .rte-menu-label {
    flex: 1;
}

.rich-text-editor .rte-menu-divider {
    height: 1px;
    margin: 0.25rem;
    background: var(--df-border);
}

.rich-text-editor kbd {
    padding: 0 0.3rem;
    font-size: 0.75rem;
    color: var(--df-text);
    background: var(--df-bg);
    border: 1px solid var(--df-border);
    border-radius: 0.25rem;
}

.rich-text-editor .rte-menu-kbd {
    padding: 0;
    color: var(--df-text-muted);
    background: none;
    border: 0;
}

/* "This text has formatting from Outlook" — offered when content loads with foreign styling. */
.rich-text-editor .rte-banner {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 0.625rem;
    margin-bottom: 0.25rem;
    padding: 0.5rem 0.75rem;
    background: var(--df-warning-light);
    border: 1px solid var(--df-warning-border);
    border-radius: 0.5rem;
    color: var(--df-text);
    font-size: 0.875rem;
}

.rich-text-editor .rte-banner-icon {
    margin-top: 0.125rem;
    color: var(--df-warning);
}

.rich-text-editor .rte-banner-text {
    display: flex;
    flex: 1 1 16rem;
    flex-direction: column;
    min-width: 0;
}

.rich-text-editor .rte-banner-text span {
    color: var(--df-text-muted);
}

.rich-text-editor .rte-banner-actions {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.rich-text-editor .rte-banner-done {
    align-items: center;
    background: var(--df-success-light);
    border-color: var(--df-success-border);
}

.rich-text-editor .rte-banner-done .rte-banner-icon {
    margin-top: 0;
    color: var(--df-success);
}

/* "Pasted from Word" — shown for a few seconds after a paste that needed cleaning. Inverted
   from the editor (text color as the ground) so it reads as a passing notice in both themes. */
.rich-text-editor .rte-toast {
    position: absolute;
    left: 50%;
    bottom: 2.25rem;
    z-index: 25;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    width: max-content;
    max-width: calc(100% - 1.5rem);
    padding: 0.4375rem 0.5rem 0.4375rem 0.75rem;
    transform: translateX(-50%);
    background: var(--df-text);
    color: var(--df-surface);
    border-radius: 0.5rem;
    box-shadow: var(--df-card-shadow-hover);
    font-size: 0.875rem;
}

.rich-text-editor .rte-toast-icon {
    color: var(--df-success);
}

.rich-text-editor .rte-toast-action {
    padding: 0.125rem 0.5rem;
    border: 0;
    border-radius: 0.25rem;
    background: none;
    color: inherit;
    font-weight: 600;
    transition: background var(--df-transition);
}

.rich-text-editor .rte-toast-action:hover {
    background: color-mix(in srgb, currentColor 16%, transparent);
}

.rich-text-editor .rte-toast-action:focus-visible {
    outline: 2px solid var(--df-primary);
    outline-offset: 1px;
}

/* Highlight — <mark> from the toolbar, .rte-hl from an older pasted background color. */
.rich-text-editor .editor-content mark,
.rich-text-editor .editor-content .rte-hl,
.rendered-html mark,
.rendered-html .rte-hl {
    padding: 0 0.125rem;
    background: var(--df-highlight);
    color: inherit;
    border-radius: 0.125rem;
}

.rich-text-editor .editor-content .rte-upload,
.rendered-html .rte-upload {
    color: var(--df-text-muted);
    font-style: italic;
}

.rich-text-editor .editor-content .rte-upload-failed,
.rendered-html .rte-upload-failed {
    color: var(--df-danger);
}

/* The overflow button and the sheet's scrim are the phone's alone. Hidden at the
   base and turned on by the phone block below — the scrim can only be rendered
   from a sheet the desktop cannot open, but a window dragged narrow and back out
   again leaves it in the markup, and phone-only markup left to default styling is
   how the week strip ended up on the desktop My Notes. */
.rich-text-editor .rte-more,
.rich-text-editor .rte-tools-scrim {
    display: none;
}

/* ── Phone: six controls, then a sheet ───────────────────────────────────────
   The toolbar has 20 controls. At 390px they wrap into several rows sitting on top
   of the note, and the alternative — one row that scrolls sideways — is the thing
   a whole commit went into removing elsewhere: a strip that scrolls hides its own
   contents behind a gesture nobody is told about.

   So six stay on the bar (bold, italic, bullets, checklist, link, undo — what you
   use writing a note on a phone) and the rest move into a sheet. Nothing is
   removed, and the bar sits at the *bottom* of the editor, near the thumb, rather
   than between you and the text. */
@media (max-width: 640.98px) {
    /* Order 2 puts the bar under the content in the wrapper's flex column; sticky
       keeps it on screen while the note scrolls under it. */
    .rich-text-editor .btn-toolbar {
        order: 2;
        position: sticky;
        bottom: 0;
        z-index: 3;
        margin: 0;
        padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
        gap: 2px !important;
        flex-wrap: nowrap;
        background: var(--df-surface);
        border-top: 1px solid var(--df-border);
    }

    /* Dissolve the groups so the six survivors become items of the bar itself —
       hiding a .btn-group would take its children with it whatever they are. */
    .rich-text-editor .btn-toolbar .btn-group {
        display: contents;
    }

    /* Scoped to "sheet closed" rather than overridden again when it opens: the un-hiding rule
       below would otherwise have to out-specify this one, and a specificity race is a thing that
       looks fine until somebody adds a class. */
    .rich-text-editor:not(.rte-tools-open) .btn-toolbar .btn:not(.rte-key):not(.rte-more),
    .rich-text-editor:not(.rte-tools-open) .btn-toolbar .rte-block-select {
        display: none;
    }

    .rich-text-editor .btn-toolbar .btn.rte-key,
    .rich-text-editor .rte-more {
        display: grid;
        place-items: center;
        flex: 1 1 0;
        min-width: 0;
        height: 44px;
        border-color: transparent;
        background: none;
        color: var(--df-text);
        font-size: 1rem;
    }

    .rich-text-editor .rte-more {
        color: var(--df-primary);
    }

    .rich-text-editor .btn-toolbar .btn.rte-key.active {
        background-color: var(--df-primary-light);
        color: var(--df-primary);
    }

    .rich-text-editor .editor-content {
        order: 1;
    }

    /* The word count and the paste hint are desktop furniture; on a phone they sit
       between the note and the toolbar for no reason. */
    .rich-text-editor > .d-flex.justify-content-between {
        display: none !important;
    }

    /* ── The rest ─────────────────────────────────────────────────────────────── */
    .rich-text-editor .rte-tools-scrim {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1054;
        background: rgba(15, 23, 42, 0.45);
    }

    .rich-text-editor.rte-tools-open .btn-toolbar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1055;
        max-height: 70vh;
        overflow-y: auto;
        flex-wrap: wrap;
        gap: 6px !important;
        padding: 16px 14px calc(18px + env(safe-area-inset-bottom, 0px));
        border-top: 0;
        border-radius: 1rem 1rem 0 0;
        box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.22);
    }

    /* The grab handle, so the sheet reads as one — matched to the month sheet's. */
    .rich-text-editor.rte-tools-open .btn-toolbar::before {
        content: "";
        flex: 0 0 100%;
        width: 38px;
        height: 4px;
        margin: 0 auto 6px;
        border-radius: 50rem;
        background: var(--df-border);
    }

    /* Everything comes back, at a size a thumb can hit. */
    .rich-text-editor.rte-tools-open .btn-toolbar .btn {
        display: inline-grid;
        place-items: center;
        flex: 0 0 auto;
        width: 52px;
        height: 46px;
        border-color: var(--df-border);
        background: var(--df-surface);
    }

    .rich-text-editor.rte-tools-open .btn-toolbar .rte-block-select {
        display: block;
        width: 100%;
        min-width: 0;
        height: 46px;
        font-size: 16px;   /* under 16px, Safari zooms the page and never zooms back */
    }

    /* The ⋯ menu's items join the sheet as plain icon buttons; its own toggle, and the
       undo/redo the bar already carries, stay out. */
    .rich-text-editor .btn-toolbar .rte-menu-wrap,
    .rich-text-editor .btn-toolbar .rte-menu {
        display: contents;
    }

    .rich-text-editor .btn-toolbar .btn.rte-menu-toggle,
    .rich-text-editor .btn-toolbar .btn.rte-desktop-only,
    .rich-text-editor .rte-menu-label,
    .rich-text-editor .rte-menu-kbd,
    .rich-text-editor .rte-menu-divider,
    .rich-text-editor .rte-menu-scrim {
        display: none;
    }
}

/* Blockquote */
.rich-text-editor .editor-content blockquote,
.rendered-html blockquote {
    border-left: 3px solid var(--df-primary);
    margin: 0.5rem 0;
    padding: 0.4rem 0.75rem;
    color: var(--df-text-muted);
    background: rgba(79, 70, 229, 0.05);
    border-radius: 0 4px 4px 0;
}

/* Inline code */
.rich-text-editor .editor-content code,
.rendered-html code {
    background: #f1f5f9;
    color: #be185d;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    font-size: 0.85em;
}

/* Headings in editor */
.rich-text-editor .editor-content h2 { font-size: 1.4rem; font-weight: 600; margin: 0.5rem 0; }
.rich-text-editor .editor-content h3 { font-size: 1.2rem; font-weight: 600; margin: 0.5rem 0; }
.rich-text-editor .editor-content h4 { font-size: 1.05rem; font-weight: 600; margin: 0.5rem 0; }

/* Horizontal rule */
.rich-text-editor .editor-content hr {
    border: none;
    border-top: 2px solid var(--df-border);
    margin: 0.75rem 0;
}

/* Link input bar */
.rich-text-editor .rte-link-input,
.rich-text-editor .rte-table-input {
    max-width: 420px;
}

/* Code block (pre > code) */
.rich-text-editor .editor-content pre,
.rendered-html pre {
    background: var(--df-text);
    color: var(--df-border);
    padding: 0.75rem 1rem;
    border-radius: 6px;
    font-size: 0.85em;
    overflow-x: auto;
    margin: 0.5rem 0;
}

.rich-text-editor .editor-content pre code,
.rendered-html pre code {
    background: transparent;
    color: inherit;
    padding: 0;
    border-radius: 0;
    font-size: inherit;
}

/* Tables */
.rich-text-editor .editor-content table.rte-table,
.rendered-html table {
    width: 100%;
    border-collapse: collapse;
    margin: 0.5rem 0;
    font-size: 0.9em;
}

.rich-text-editor .editor-content table.rte-table th,
.rich-text-editor .editor-content table.rte-table td,
.rendered-html table th,
.rendered-html table td {
    border: 1px solid var(--df-border);
    padding: 0.4rem 0.6rem;
    text-align: left;
    vertical-align: top;
    min-width: 60px;
}

.rich-text-editor .editor-content table.rte-table th,
.rendered-html table th {
    background: var(--df-bg);
    font-weight: 600;
}

/* Collapsible section — e.g. the Loom transcript appended by TicketLoomTranscriptService */
.rich-text-editor .editor-content details,
.rendered-html details {
    margin: 0.5rem 0;
}

.rich-text-editor .editor-content details > summary,
.rendered-html details > summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--df-text);
}

.rich-text-editor .editor-content details > p,
.rendered-html details > p {
    color: var(--df-text-muted);
}

/* Checklist */
.rich-text-editor .editor-content ul.rte-checklist,
.rendered-html ul.rte-checklist {
    list-style: none;
    padding-left: 0.25rem;
}

.rich-text-editor .editor-content ul.rte-checklist li,
.rendered-html ul.rte-checklist li {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    padding: 0.15rem 0;
}

.rich-text-editor .editor-content ul.rte-checklist li.checked > span,
.rendered-html ul.rte-checklist li.checked > span {
    text-decoration: line-through;
    color: var(--df-text-muted);
}

.rich-text-editor .editor-content ul.rte-checklist input[type="checkbox"],
.rendered-html ul.rte-checklist input[type="checkbox"] {
    margin-top: 0.3rem;
    accent-color: var(--df-primary);
    cursor: pointer;
    flex-shrink: 0;
}

/* Fullscreen mode */
.rich-text-editor.rte-fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1050;
    background: var(--df-surface);
    padding: 1rem;
    border-radius: 0;
}

.rich-text-editor.rte-fullscreen .editor-content {
    min-height: unset !important;
    flex: 1;
}

/* ---- Rendered HTML ---- */
.rendered-html img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
}

/* ========== Public (anonymous) pages ========== */
.public-page {
    min-height: 100vh;
    background: var(--df-surface);
    padding: 1.5rem 2rem;
}

/* Inline images on the public shared-ticket view must render at their
   original dimensions instead of being constrained to the parent width. */
.public-page .rendered-html img {
    max-width: none !important;
    height: auto;
    border-radius: 0;
}

/* ---- AI Results Styling ---- */
.ai-results {
    font-size: 0.9rem;
    line-height: 1.7;
}

.ai-results h4,
.ai-results h5 {
    margin-top: 1.25rem;
    margin-bottom: 0.5rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid var(--df-border);
    color: var(--df-text);
}

.ai-results h4:first-child,
.ai-results h5:first-child {
    margin-top: 0;
}

.ai-results ul {
    padding-left: 1.25rem;
    margin-bottom: 0.75rem;
}

.ai-results li {
    margin-bottom: 0.35rem;
}

.ai-results code {
    background: #f1f5f9;
    color: #be185d;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    font-size: 0.85em;
}

.ai-results strong {
    color: #334155;
}

/* ---- List Group ---- */
.list-group-item {
    border-color: var(--df-border);
    transition: background-color 0.15s ease;
}

.list-group-item:hover {
    background-color: var(--df-primary-light);
}

/* ---- Misc Utilities ---- */
.text-primary {
    color: var(--df-primary) !important;
}

.border-start.border-3 {
    border-color: var(--df-primary) !important;
}

/* Scrollbar styling */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* ---- Nav Section Cards ---- */
.nav-section {
    margin: 0;
    padding: 0.55rem 0 0.65rem;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.nav-section + .nav-section {
    border-top: 1px solid #eef0f4;
}

.nav-section:first-child {
    margin-top: 0.25rem;
}

.nav-section-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 1.2rem 0.35rem;
    color: #8a94a4;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: none;
    white-space: nowrap;
    overflow: hidden;
}

.nav-section-header:hover {
    color: #475569;
}

.nav-section-title {
    opacity: 1;
    font-weight: 600;
}

.nav-section-icon {
    opacity: 0.75;
    flex-shrink: 0;
    width: 0.9rem !important;
    height: 0.9rem !important;
    margin-right: 0 !important;
}

/* ---- Section Collapse ---- */
.nav-section-header {
    cursor: pointer;
    user-select: none;
}

.nav-section-chevron {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    opacity: 0.45;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
    flex-shrink: 0;
}

.nav-section-chevron::after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-top: 4px solid currentColor;
}

.nav-section-header:hover .nav-section-chevron {
    opacity: 0.6;
}

.nav-section.section-collapsed .nav-section-chevron {
    transform: rotate(-90deg);
}

.nav-section.section-collapsed .nav-section-items {
    display: none;
}

/* Override section collapse during search */
.nav-scrollable.nav-searching .nav-section-items {
    display: block !important;
}

.nav-scrollable.nav-searching .nav-section-chevron {
    display: none;
}

/* ---- Dark nav theme ---- */
html.nav-theme-dark .sidebar,
html.nav-theme-dark .page .sidebar {
    background: #0f172a !important;
    border-right: 1px solid #1e293b !important;
}

html.nav-theme-dark .sidebar .top-row {
    background: transparent !important;
    border-bottom-color: #1e293b !important;
}

html.nav-theme-dark .sidebar .nav-scrollable,
html.nav-theme-dark .sidebar .nav-section,
html.nav-theme-dark .sidebar .nav-section-items,
html.nav-theme-dark .sidebar .nav-section-header {
    background: transparent !important;
    border-color: #1e293b !important;
}

html.nav-theme-dark .sidebar .nav-section + .nav-section {
    border-top: 1px solid #1e293b !important;
}

.nav-theme-dark .nav-section-header {
    color: #94a3b8;
}

.nav-theme-dark .nav-section-header:hover {
    color: #cbd5e1;
}

.nav-theme-dark .nav-section-chevron {
    opacity: 0.55;
}

html.nav-theme-dark .sidebar .navbar-brand {
    color: #f1f5f9 !important;
}

html.nav-theme-dark .sidebar .brand-sub {
    color: #94a3b8;
}

html.nav-theme-dark .sidebar .bi {
    filter: brightness(0) saturate(100%) invert(82%) sepia(6%) saturate(340%) hue-rotate(181deg) brightness(95%) contrast(88%);
    opacity: 0.8;
}

html.nav-theme-dark .sidebar .nav-item .nav-link {
    color: #cbd5e1;
}

html.nav-theme-dark .sidebar .nav-item .nav-link:hover {
    background-color: rgba(255,255,255,0.06);
    color: #f1f5f9;
}

html.nav-theme-dark .sidebar .nav-item a.active {
    background: rgba(99,102,241,0.22);
    color: #c7d2fe;
}

html.nav-theme-dark .sidebar .nav-item a.active .bi {
    filter: brightness(0) saturate(100%) invert(78%) sepia(30%) saturate(900%) hue-rotate(210deg) brightness(98%) contrast(92%);
    opacity: 1;
}

html.nav-theme-dark .sidebar .nav-search-input {
    background-color: #1e293b;
    border-color: transparent;
    color: #e2e8f0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2364748b' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3E%3C/svg%3E");
}

html.nav-theme-dark .sidebar .nav-search-input::placeholder {
    color: #64748b;
}

html.nav-theme-dark .sidebar .nav-search-input:focus {
    border-color: #475569;
    background-color: #334155;
    box-shadow: 0 0 0 3px rgba(255,255,255,0.05);
}

html.nav-theme-dark .sidebar .nav-scrollable::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.12);
}

html.nav-theme-dark .sidebar .nav-scrollable::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.24);
}

html.nav-theme-dark .sidebar .nav-footer {
    border-top-color: #1e293b;
}

html.nav-theme-dark .sidebar .nav-version {
    color: #64748b;
}

html.nav-theme-dark .sidebar .nav-fav-btn {
    color: rgba(241,245,249,0.3);
}

html.nav-theme-dark .sidebar .nav-fav-btn:hover,
html.nav-theme-dark .sidebar .nav-fav-btn.is-fav {
    color: #fbbf24;
}

/* ---- Tickets page dark theme ---- */
html.nav-theme-dark .tickets-page-container {
    background-color: #0b1220;
    color: #e2e8f0;
}

html.nav-theme-dark .tickets-page-container .tickets-title,
html.nav-theme-dark .tickets-page-container h3,
html.nav-theme-dark .tickets-page-container h4,
html.nav-theme-dark .tickets-page-container h5 {
    color: #f1f5f9;
}

html.nav-theme-dark .tickets-page-container .card {
    background-color: #0f172a;
    border-color: #1e293b;
    color: #e2e8f0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

html.nav-theme-dark .tickets-page-container .card-header,
html.nav-theme-dark .tickets-page-container .card-footer,
html.nav-theme-dark .tickets-page-container .card-body {
    background-color: #0f172a;
    border-color: #1e293b;
    color: #e2e8f0;
}

html.nav-theme-dark .tickets-page-container .card-footer {
    border-top-color: #1e293b;
}

html.nav-theme-dark .tickets-page-container .table {
    color: #e2e8f0;
    --bs-table-bg: transparent;
    --bs-table-color: #e2e8f0;
    --bs-table-striped-color: #e2e8f0;
    --bs-table-striped-bg: rgba(255,255,255,0.02);
    --bs-table-hover-color: #f1f5f9;
    --bs-table-hover-bg: rgba(255,255,255,0.05);
    --bs-table-border-color: #1e293b;
}

html.nav-theme-dark .tickets-page-container .table > :not(caption) > * > * {
    background-color: transparent;
    color: #e2e8f0;
    border-bottom-color: #1e293b;
}

html.nav-theme-dark .tickets-page-container .tickets-table-section thead,
html.nav-theme-dark .tickets-page-container .tickets-table-section thead th {
    background-color: #1e293b !important;
    color: #e2e8f0;
    border-bottom-color: #334155 !important;
}

html.nav-theme-dark .tickets-page-container tbody tr:hover,
html.nav-theme-dark .tickets-page-container tbody tr:hover > td {
    background-color: rgba(255,255,255,0.05);
    color: #f1f5f9;
}

html.nav-theme-dark .tickets-page-container tr.table-active,
html.nav-theme-dark .tickets-page-container tr.table-active > td {
    background-color: rgba(99,102,241,0.18) !important;
    color: #e0e7ff;
}

html.nav-theme-dark .tickets-page-container tbody tr.table-active:hover,
html.nav-theme-dark .tickets-page-container tbody tr.table-active:hover > td {
    background-color: rgba(99,102,241,0.28) !important;
}

html.nav-theme-dark .tickets-page-container .sortable-header:hover {
    background-color: rgba(255,255,255,0.06) !important;
}

html.nav-theme-dark .tickets-page-container .form-control,
html.nav-theme-dark .tickets-page-container .form-select {
    background-color: #1e293b;
    border-color: #334155;
    color: #e2e8f0;
}

html.nav-theme-dark .tickets-page-container .form-control::placeholder {
    color: #64748b;
}

html.nav-theme-dark .tickets-page-container .form-control:focus,
html.nav-theme-dark .tickets-page-container .form-select:focus {
    background-color: #1e293b;
    border-color: #475569;
    color: #f1f5f9;
    box-shadow: 0 0 0 0.2rem rgba(99,102,241,0.25);
}

html.nav-theme-dark .tickets-page-container .input-group-text {
    background-color: #1e293b;
    border-color: #334155;
    color: #cbd5e1;
}

html.nav-theme-dark .tickets-page-container .btn-outline-secondary {
    color: #cbd5e1;
    border-color: #334155;
}

html.nav-theme-dark .tickets-page-container .btn-outline-secondary:hover {
    background-color: rgba(255,255,255,0.06);
    color: #f1f5f9;
    border-color: #475569;
}

html.nav-theme-dark .tickets-page-container .btn-outline-primary {
    color: #c7d2fe;
    border-color: rgba(99,102,241,0.55);
}

html.nav-theme-dark .tickets-page-container .btn-outline-primary:hover {
    background-color: rgba(99,102,241,0.22);
    color: #e0e7ff;
    border-color: rgba(99,102,241,0.75);
}

html.nav-theme-dark .tickets-page-container .btn-outline-info {
    color: #67e8f9;
    border-color: rgba(34,211,238,0.45);
}

html.nav-theme-dark .tickets-page-container .btn-outline-info:hover {
    background-color: rgba(34,211,238,0.18);
    color: #a5f3fc;
}

html.nav-theme-dark .tickets-page-container .btn-link {
    color: #c7d2fe;
}

html.nav-theme-dark .tickets-page-container .text-muted {
    color: #94a3b8 !important;
}

html.nav-theme-dark .tickets-page-container .filter-chip {
    background: rgba(99,102,241,0.20);
    color: #c7d2fe;
}

html.nav-theme-dark .tickets-page-container .filter-chip .chip-key {
    color: #94a3b8;
}

html.nav-theme-dark .tickets-page-container .filter-chip.chip-mine {
    background: rgba(16,185,129,0.20);
    color: #6ee7b7;
}

html.nav-theme-dark .tickets-page-container .chip-close:hover {
    background: rgba(255,255,255,0.12);
}

html.nav-theme-dark .tickets-page-container .more-menu-dropdown,
html.nav-theme-dark .tickets-page-container .column-chooser-dropdown {
    background: #1e293b;
    border-color: #334155;
    color: #e2e8f0;
    box-shadow: 0 6px 20px rgba(0,0,0,0.5);
}

html.nav-theme-dark .tickets-page-container .more-menu-item {
    color: #e2e8f0;
}

html.nav-theme-dark .tickets-page-container .more-menu-item:hover:not(:disabled) {
    background: rgba(99,102,241,0.20);
    color: #c7d2fe;
}

html.nav-theme-dark .tickets-page-container .column-chooser-header {
    border-bottom-color: #334155;
    color: #f1f5f9;
}

html.nav-theme-dark .tickets-page-container .column-chooser-item {
    color: #e2e8f0;
}

html.nav-theme-dark .tickets-page-container .column-chooser-item:hover {
    background-color: rgba(99,102,241,0.16);
}

html.nav-theme-dark .tickets-page-container .modal-content,
html.nav-theme-dark .tickets-page-container .filter-modal {
    background-color: #0f172a;
    border: 1px solid #1e293b;
    color: #e2e8f0;
}

html.nav-theme-dark .tickets-page-container .modal-header,
html.nav-theme-dark .tickets-page-container .modal-footer {
    border-color: #1e293b;
}

html.nav-theme-dark .tickets-page-container .modal-title {
    color: #f1f5f9;
}

html.nav-theme-dark .tickets-page-container .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

html.nav-theme-dark .tickets-page-container .filter-modal-section-label {
    color: #94a3b8;
    border-bottom-color: #334155;
}

html.nav-theme-dark .tickets-page-container .filter-modal-field-label {
    color: #cbd5e1;
}

html.nav-theme-dark .tickets-page-container .assignment-chip {
    background: #312e81;
    color: #c7d2fe;
    border-color: #0f172a;
    box-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

/* ---- Main layout dark theme ---- */
html.nav-theme-dark body {
    background-color: #0b1220;
    color: #e2e8f0;
}

html.nav-theme-dark .page main {
    background-color: #0b1220;
    color: #e2e8f0;
}

html.nav-theme-dark .page .top-row {
    background-color: #0f172a;
    border-bottom-color: #1e293b;
}

html.nav-theme-dark .page .top-row a,
html.nav-theme-dark .page .top-row .btn-link {
    color: #cbd5e1;
}

html.nav-theme-dark .page .top-row a:hover,
html.nav-theme-dark .page .top-row .btn-link:hover {
    color: #5eead4;
}

html.nav-theme-dark .page .sidebar-toggle-btn:hover {
    background-color: rgba(255,255,255,0.06);
}

html.nav-theme-dark .page .toggle-bar {
    background-color: #cbd5e1;
}

html.nav-theme-dark .page .content {
    color: #e2e8f0;
}

html.nav-theme-dark .page .content h1,
html.nav-theme-dark .page .content h2,
html.nav-theme-dark .page .content h3,
html.nav-theme-dark .page .content h4,
html.nav-theme-dark .page .content h5,
html.nav-theme-dark .page .content h6 {
    color: #f1f5f9;
}

html.nav-theme-dark .page .content .text-muted {
    color: #94a3b8 !important;
}

html.nav-theme-dark .page .content .card {
    background-color: #0f172a;
    border-color: #1e293b;
    color: #e2e8f0;
}

html.nav-theme-dark .page .content .card-header,
html.nav-theme-dark .page .content .card-footer {
    background-color: #0f172a;
    border-color: #1e293b;
    color: #e2e8f0;
}

/* Top-bar component bits — keep them visible on dark chrome */
html.nav-theme-dark .page .top-row .alert-bell-btn {
    color: #cbd5e1;
    border-color: #334155;
}

html.nav-theme-dark .page .top-row .alert-bell-btn:hover {
    background: rgba(255,255,255,0.06);
    border-color: #475569;
    color: #f1f5f9;
}

html.nav-theme-dark .page .top-row .fav-empty,
html.nav-theme-dark .page .top-row .fav-empty-text {
    color: #94a3b8;
}

html.nav-theme-dark .page .top-row .fav-link {
    color: #cbd5e1;
}

html.nav-theme-dark .page .top-row .fav-link:hover {
    color: #c7d2fe;
    background: rgba(99,102,241,0.15);
    border-color: rgba(99,102,241,0.30);
}

html.nav-theme-dark .page .top-row .fav-link.active {
    color: #c7d2fe;
    background: rgba(99,102,241,0.20);
    border-color: rgba(99,102,241,0.35);
}

/* Favorite dropdowns — chip, panel and the name/icon form */
html.nav-theme-dark .page .top-row .fav-chip {
    color: #e2e8f0;
}

html.nav-theme-dark .page .top-row .fav-chip-open {
    color: #c7d2fe;
    background: rgba(99,102,241,0.20);
    border-color: rgba(99,102,241,0.35);
}

html.nav-theme-dark .fav-panel {
    background: #0f172a;
    border-color: #1e293b;
    box-shadow: 0 10px 28px rgba(0,0,0,0.55), 0 2px 6px rgba(0,0,0,0.40);
}

html.nav-theme-dark .fav-panel-item {
    color: #e2e8f0;
}

html.nav-theme-dark .fav-panel-item:hover {
    color: #c7d2fe;
    background: rgba(99,102,241,0.18);
}

html.nav-theme-dark .fav-panel-divider {
    background: #1e293b;
}

html.nav-theme-dark .fav-panel-empty {
    border-color: #1e293b;
    color: #94a3b8;
}

html.nav-theme-dark .fav-panel-action:hover {
    color: #c7d2fe;
    background: rgba(99,102,241,0.18);
}

html.nav-theme-dark .fav-form-input {
    background: #0b1220;
    border-color: #1e293b;
    color: #e2e8f0;
}

html.nav-theme-dark .fav-icon-opt:hover {
    background: rgba(148,163,184,0.12);
}

html.nav-theme-dark .fav-form-btn {
    border-color: #1e293b;
    color: #94a3b8;
}

html.nav-theme-dark .fav-form-btn:hover {
    background: rgba(148,163,184,0.12);
    color: #e2e8f0;
}

/* ============================================
   Global dark theme — variable + Bootstrap overrides
   Scoped per-page CSS using var(--df-*) flips automatically.
   ============================================ */

html.nav-theme-dark {
    --df-text: #e2e8f0;
    --df-text-muted: #94a3b8;
    --df-border: #1e293b;
    --df-bg: #0b1220;
    --df-surface: #0f172a;
    --df-primary-light: rgba(99,102,241,0.18);
    --df-primary-border: rgba(99,102,241,0.45);
    --df-success-light: rgba(16,185,129,0.18);
    --df-success-border: rgba(16,185,129,0.45);
    --df-warning-light: rgba(245,158,11,0.18);
    --df-warning-border: rgba(245,158,11,0.45);
    --df-danger-light: rgba(239,68,68,0.18);
    --df-danger-border: rgba(239,68,68,0.45);
    --df-info-light: rgba(34,211,238,0.18);
    --df-info-border: rgba(34,211,238,0.45);
    --df-purple: #a78bfa;
    --df-purple-light: rgba(124,58,237,0.22);
    --df-purple-border: rgba(124,58,237,0.45);
    --df-highlight: rgba(250,204,21,0.30);
    --df-diff-add-bg: rgba(46,160,67,0.18);
    --df-diff-add-gutter: rgba(46,160,67,0.30);
    --df-diff-add-fg: #7ee787;
    --df-diff-del-bg: rgba(248,81,73,0.15);
    --df-diff-del-gutter: rgba(248,81,73,0.28);
    --df-diff-del-fg: #ffa198;
    --df-diff-gutter-fg: #8b949e;
    --df-diff-rule: #30363d;
    --df-card-shadow: 0 1px 3px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.4);
    --df-card-shadow-hover: 0 4px 12px rgba(0,0,0,0.55), 0 2px 4px rgba(0,0,0,0.4);

    /* Bootstrap variables — anything reading var(--bs-*) flips automatically */
    --bs-body-bg: #0b1220;
    --bs-body-color: #e2e8f0;
    --bs-border-color: #1e293b;
    --bs-border-color-translucent: rgba(255,255,255,0.1);
    --bs-secondary-bg: #1e293b;
    --bs-tertiary-bg: #0f172a;
    --bs-secondary-color: #cbd5e1;
    --bs-tertiary-color: #94a3b8;
    --bs-emphasis-color: #f1f5f9;
    --bs-link-color: #93c5fd;
    --bs-link-hover-color: #bfdbfe;
    --bs-light: #1e293b;
    --bs-light-rgb: 30, 41, 59;
    --bs-dark: #f1f5f9;
    --bs-dark-rgb: 241, 245, 249;
    --bs-primary-bg-subtle: rgba(99,102,241,0.18);
    --bs-secondary-bg-subtle: #1e293b;
    --bs-success-bg-subtle: rgba(16,185,129,0.15);
    --bs-info-bg-subtle: rgba(34,211,238,0.15);
    --bs-warning-bg-subtle: rgba(245,158,11,0.15);
    --bs-danger-bg-subtle: rgba(239,68,68,0.15);
    --bs-light-bg-subtle: #1e293b;

    /* Text-emphasis variants — Bootstrap's defaults are dark blues / greens
       designed for the light *-bg-subtle backgrounds. On a translucent dark
       backdrop they become unreadable, so map them to their lighter pairs. */
    --bs-primary-text-emphasis: #c7d2fe;
    --bs-secondary-text-emphasis: #cbd5e1;
    --bs-success-text-emphasis: #6ee7b7;
    --bs-info-text-emphasis: #67e8f9;
    --bs-warning-text-emphasis: #fcd34d;
    --bs-danger-text-emphasis: #fca5a5;
    --bs-light-text-emphasis: #e2e8f0;
    --bs-dark-text-emphasis: #94a3b8;

    /* Border-subtle variants — match the new bg/text pairing. */
    --bs-primary-border-subtle: rgba(99,102,241,0.45);
    --bs-secondary-border-subtle: #334155;
    --bs-success-border-subtle: rgba(16,185,129,0.45);
    --bs-info-border-subtle: rgba(34,211,238,0.45);
    --bs-warning-border-subtle: rgba(245,158,11,0.45);
    --bs-danger-border-subtle: rgba(239,68,68,0.45);
    --bs-light-border-subtle: #334155;
}

/* ---- Bootstrap surfaces ---- */
html.nav-theme-dark .card,
html.nav-theme-dark .card-header,
html.nav-theme-dark .card-body,
html.nav-theme-dark .card-footer {
    background-color: #0f172a;
    border-color: var(--df-border);
    color: var(--df-text);
}

html.nav-theme-dark .modal-content {
    background-color: #0f172a;
    border: 1px solid var(--df-border);
    color: var(--df-text);
}

html.nav-theme-dark .modal-header,
html.nav-theme-dark .modal-footer {
    background-color: #0f172a;
    border-color: var(--df-border);
    color: var(--df-text);
}

html.nav-theme-dark .modal-body {
    background-color: #0f172a;
    color: var(--df-text);
}

html.nav-theme-dark .modal-title,
html.nav-theme-dark .modal h1,
html.nav-theme-dark .modal h2,
html.nav-theme-dark .modal h3,
html.nav-theme-dark .modal h4,
html.nav-theme-dark .modal h5,
html.nav-theme-dark .modal h6 {
    color: #f1f5f9;
}

html.nav-theme-dark .modal label,
html.nav-theme-dark .modal .form-label {
    color: #cbd5e1;
}

html.nav-theme-dark .modal .text-muted {
    color: var(--df-text-muted) !important;
}

html.nav-theme-dark .modal .form-text {
    color: var(--df-text-muted);
}

html.nav-theme-dark .modal hr {
    border-color: var(--df-border);
    opacity: 1;
}

/* Inline-style backdrop the app uses (style="background-color: rgba(0,0,0,0.5)") */
html.nav-theme-dark .modal.fade.show.d-block {
    background-color: rgba(0,0,0,0.7) !important;
}

html.nav-theme-dark .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

html.nav-theme-dark .list-group-item {
    background-color: #0f172a;
    border-color: var(--df-border);
    color: var(--df-text);
}

html.nav-theme-dark .list-group-item-action:hover,
html.nav-theme-dark .list-group-item-action:focus {
    background-color: rgba(255,255,255,0.04);
    color: #f1f5f9;
}

/* ---- Tables ---- */
html.nav-theme-dark .table {
    color: var(--df-text);
    --bs-table-bg: transparent;
    --bs-table-color: var(--df-text);
    --bs-table-border-color: var(--df-border);
    --bs-table-striped-bg: rgba(255,255,255,0.03);
    --bs-table-striped-color: var(--df-text);
    --bs-table-hover-bg: rgba(255,255,255,0.05);
    --bs-table-hover-color: #f1f5f9;
}

html.nav-theme-dark .table > :not(caption) > * > * {
    background-color: transparent;
    color: var(--df-text);
    border-bottom-color: var(--df-border);
}

html.nav-theme-dark .table thead th {
    color: var(--df-text);
    border-bottom-color: #334155;
}

html.nav-theme-dark .table-active,
html.nav-theme-dark .table-active > td,
html.nav-theme-dark .table-active > th {
    background-color: rgba(99,102,241,0.18) !important;
    color: #e0e7ff;
}

/* ---- Forms ---- */
html.nav-theme-dark .form-control,
html.nav-theme-dark .form-select,
html.nav-theme-dark textarea.form-control {
    background-color: #1e293b;
    border-color: #334155;
    color: var(--df-text);
}

html.nav-theme-dark .form-control::placeholder {
    color: #64748b;
}

html.nav-theme-dark .form-control:focus,
html.nav-theme-dark .form-select:focus,
html.nav-theme-dark textarea.form-control:focus {
    background-color: #1e293b;
    border-color: #475569;
    color: #f1f5f9;
    box-shadow: 0 0 0 0.2rem rgba(99,102,241,0.25);
}

html.nav-theme-dark .form-control:disabled,
html.nav-theme-dark .form-select:disabled {
    background-color: #0f172a;
    color: #64748b;
}

html.nav-theme-dark .input-group-text {
    background-color: #1e293b;
    border-color: #334155;
    color: #cbd5e1;
}

html.nav-theme-dark .form-check-input {
    background-color: #1e293b;
    border-color: #475569;
}

html.nav-theme-dark .form-check-input:checked {
    background-color: var(--df-primary);
    border-color: var(--df-primary);
}

html.nav-theme-dark .form-label,
html.nav-theme-dark label,
html.nav-theme-dark .col-form-label {
    color: #cbd5e1;
}

/* ---- Text utilities ---- */
html.nav-theme-dark .text-muted {
    color: var(--df-text-muted) !important;
}

html.nav-theme-dark .text-dark,
html.nav-theme-dark .text-body {
    color: var(--df-text) !important;
}

html.nav-theme-dark .bg-white,
html.nav-theme-dark .bg-light {
    background-color: #0f172a !important;
    color: var(--df-text);
}

/* ---- Outline buttons ---- */
html.nav-theme-dark .btn-outline-secondary {
    color: #cbd5e1;
    border-color: #334155;
}
html.nav-theme-dark .btn-outline-secondary:hover {
    background-color: rgba(255,255,255,0.06);
    color: #f1f5f9;
    border-color: #475569;
}

html.nav-theme-dark .btn-outline-primary {
    color: #c7d2fe;
    border-color: rgba(99,102,241,0.55);
}
html.nav-theme-dark .btn-outline-primary:hover {
    background-color: rgba(99,102,241,0.22);
    color: #e0e7ff;
    border-color: rgba(99,102,241,0.75);
}

html.nav-theme-dark .btn-outline-info {
    color: #67e8f9;
    border-color: rgba(34,211,238,0.45);
}
html.nav-theme-dark .btn-outline-info:hover {
    background-color: rgba(34,211,238,0.18);
    color: #a5f3fc;
}

html.nav-theme-dark .btn-outline-success {
    color: #6ee7b7;
    border-color: rgba(16,185,129,0.45);
}
html.nav-theme-dark .btn-outline-success:hover {
    background-color: rgba(16,185,129,0.20);
    color: #a7f3d0;
}

html.nav-theme-dark .btn-outline-danger {
    color: #fca5a5;
    border-color: rgba(239,68,68,0.45);
}
html.nav-theme-dark .btn-outline-danger:hover {
    background-color: rgba(239,68,68,0.20);
    color: #fecaca;
}

html.nav-theme-dark .btn-outline-warning {
    color: #fcd34d;
    border-color: rgba(245,158,11,0.45);
}
html.nav-theme-dark .btn-outline-warning:hover {
    background-color: rgba(245,158,11,0.20);
    color: #fde68a;
}

html.nav-theme-dark .btn-link {
    color: #c7d2fe;
}

html.nav-theme-dark .btn-light {
    background-color: #1e293b;
    border-color: #334155;
    color: var(--df-text);
}
html.nav-theme-dark .btn-light:hover {
    background-color: #334155;
    color: #f1f5f9;
}

/* ---- Dropdowns / popovers / tooltips ---- */
html.nav-theme-dark .dropdown-menu {
    background-color: #1e293b;
    border-color: #334155;
    color: var(--df-text);
}

html.nav-theme-dark .dropdown-item {
    color: #e2e8f0;
}

html.nav-theme-dark .dropdown-item:hover,
html.nav-theme-dark .dropdown-item:focus {
    background-color: rgba(99,102,241,0.18);
    color: #c7d2fe;
}

html.nav-theme-dark .dropdown-divider {
    border-top-color: #334155;
}

html.nav-theme-dark .dropdown-header {
    color: var(--df-text-muted);
}

html.nav-theme-dark .popover {
    background-color: #1e293b;
    border-color: #334155;
    color: var(--df-text);
}

html.nav-theme-dark .popover-header {
    background-color: #0f172a;
    border-bottom-color: #334155;
    color: #f1f5f9;
}

html.nav-theme-dark .popover-body {
    color: var(--df-text);
}

html.nav-theme-dark .tooltip-inner {
    background-color: #1e293b;
    color: var(--df-text);
}

/* ---- Tabs / pills / pagination ---- */
html.nav-theme-dark .nav-tabs {
    border-bottom-color: var(--df-border);
}
html.nav-theme-dark .nav-tabs .nav-link {
    color: #cbd5e1;
    border-color: transparent;
}
html.nav-theme-dark .nav-tabs .nav-link:hover {
    border-color: #334155 #334155 transparent;
    background-color: rgba(255,255,255,0.04);
}
html.nav-theme-dark .nav-tabs .nav-link.active {
    background-color: #0f172a;
    border-color: var(--df-border) var(--df-border) #0f172a;
    color: #f1f5f9;
}

html.nav-theme-dark .nav-pills .nav-link {
    color: #cbd5e1;
}
html.nav-theme-dark .nav-pills .nav-link.active {
    background-color: var(--df-primary);
    color: #fff;
}

html.nav-theme-dark .page-link {
    background-color: #0f172a;
    border-color: var(--df-border);
    color: #cbd5e1;
}
html.nav-theme-dark .page-link:hover {
    background-color: rgba(255,255,255,0.06);
    color: #f1f5f9;
}
html.nav-theme-dark .page-item.active .page-link {
    background-color: var(--df-primary);
    border-color: var(--df-primary);
    color: #fff;
}
html.nav-theme-dark .page-item.disabled .page-link {
    background-color: #0f172a;
    color: #475569;
}

/* ---- Alerts / badges ---- */
html.nav-theme-dark .alert {
    background-color: #1e293b;
    border-color: #334155;
    color: var(--df-text);
}
html.nav-theme-dark .alert-info {
    background-color: rgba(34,211,238,0.12);
    border-color: rgba(34,211,238,0.35);
    color: #a5f3fc;
}
html.nav-theme-dark .alert-success {
    background-color: rgba(16,185,129,0.12);
    border-color: rgba(16,185,129,0.35);
    color: #a7f3d0;
}
html.nav-theme-dark .alert-warning {
    background-color: rgba(245,158,11,0.12);
    border-color: rgba(245,158,11,0.35);
    color: #fde68a;
}
html.nav-theme-dark .alert-danger {
    background-color: rgba(239,68,68,0.12);
    border-color: rgba(239,68,68,0.35);
    color: #fecaca;
}

html.nav-theme-dark .badge.bg-light {
    background-color: #334155 !important;
    color: var(--df-text);
}
html.nav-theme-dark .badge.bg-secondary {
    background-color: #475569 !important;
}
/* --bs-dark is flipped to a near-white above so text-dark/border-dark read correctly, but
   Bootstrap keeps .badge.bg-dark on white text — which lands white-on-white. Give it the
   darkest rung of the neutral ladder (dark < light < secondary) so all three stay distinct. */
html.nav-theme-dark .badge.bg-dark {
    background-color: #1e293b !important;
    color: var(--df-text) !important;
    box-shadow: inset 0 0 0 1px #334155;
}

/* ---- Misc ---- */
html.nav-theme-dark hr {
    border-color: var(--df-border);
    opacity: 1;
}

html.nav-theme-dark .border,
html.nav-theme-dark .border-top,
html.nav-theme-dark .border-bottom,
html.nav-theme-dark .border-start,
html.nav-theme-dark .border-end {
    border-color: var(--df-border) !important;
}

html.nav-theme-dark .rich-text-editor .editor-content code,
html.nav-theme-dark .rendered-html code,
html.nav-theme-dark .ai-results code {
    color: #fbbf24;
}

html.nav-theme-dark code {
    background-color: #1e293b;
    color: #fbbf24;
}

html.nav-theme-dark pre {
    background-color: #0f172a;
    color: var(--df-text);
    border: 1px solid var(--df-border);
}

html.nav-theme-dark a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.list-group-item):not(.fp-tk) {
    color: #93c5fd;
}
html.nav-theme-dark a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.list-group-item):not(.fp-tk):hover {
    color: #bfdbfe;
}

/* Bootstrap modal backdrop is already dark; no override needed */

/* ---- Upload zones / drag handles (rendered inside scoped components, but
       targeted globally because ::deep + html selector doesn't compose) ---- */
html.nav-theme-dark .upload-zone {
    border-color: #334155;
    background: #0f172a;
    color: #cbd5e1;
}

html.nav-theme-dark .upload-zone:hover,
html.nav-theme-dark .upload-zone.drag-over {
    border-color: #6366f1;
    background: rgba(99,102,241,0.10);
}

html.nav-theme-dark .upload-label {
    color: #cbd5e1;
}

html.nav-theme-dark .pending-file-item {
    border-bottom-color: #1e293b;
}

html.nav-theme-dark .drag-handle-cell {
    color: #64748b;
}
html.nav-theme-dark .drag-handle-cell:hover {
    color: #cbd5e1;
}

/* ---- Home page user-group rows ---- */
html.nav-theme-dark .user-group-header {
    background-color: rgba(99,102,241,0.10) !important;
    border-left-color: #818cf8 !important;
}

html.nav-theme-dark .user-group-header td,
html.nav-theme-dark .user-group-header th {
    color: #e2e8f0 !important;
}

html.nav-theme-dark .subtotal-row {
    background-color: rgba(255,255,255,0.03) !important;
    border-top-color: #334155 !important;
}

html.nav-theme-dark .subtotal-row td {
    color: #cbd5e1 !important;
}

/* ---- Files page ---- */
html.nav-theme-dark .tree-node:hover {
    background-color: rgba(255,255,255,0.05) !important;
}

html.nav-theme-dark .tree-node.active {
    background-color: rgba(99,102,241,0.20) !important;
    color: #c7d2fe !important;
}

html.nav-theme-dark .tree-chevron:hover {
    background-color: rgba(255,255,255,0.10);
}

html.nav-theme-dark .new-folder-bar {
    background: rgba(245,158,11,0.10);
    border-color: rgba(245,158,11,0.35);
}

html.nav-theme-dark .row-clickable:hover td {
    background-color: rgba(99,102,241,0.10) !important;
}

html.nav-theme-dark .action-btn:hover {
    background-color: rgba(255,255,255,0.06);
    color: #f1f5f9;
}

html.nav-theme-dark .action-btn-danger:hover {
    background-color: rgba(239,68,68,0.15);
    color: #fca5a5;
}

html.nav-theme-dark .action-btn-locked:hover {
    background-color: rgba(245,158,11,0.15);
    color: #fde68a;
}

/* File icon badges — desaturate light pastel bgs for dark theme */
html.nav-theme-dark .file-icon-pdf  { background: rgba(239,68,68,0.18); color: #fca5a5; }
html.nav-theme-dark .file-icon-img  { background: rgba(168,85,247,0.18); color: #d8b4fe; }
html.nav-theme-dark .file-icon-vid  { background: rgba(236,72,153,0.18); color: #f9a8d4; }
html.nav-theme-dark .file-icon-aud  { background: rgba(20,184,166,0.18); color: #5eead4; }
html.nav-theme-dark .file-icon-xls  { background: rgba(16,185,129,0.18); color: #6ee7b7; }
html.nav-theme-dark .file-icon-doc  { background: rgba(59,130,246,0.18); color: #93c5fd; }
html.nav-theme-dark .file-icon-zip  { background: rgba(245,158,11,0.18); color: #fcd34d; }
html.nav-theme-dark .file-icon-txt  { background: #1e293b; color: #94a3b8; }
html.nav-theme-dark .file-icon-gen  { background: #1e293b; color: #cbd5e1; }
html.nav-theme-dark .file-icon-folder { color: #fcd34d; }

/* ---- Weekly Measurements page ---- */
html.nav-theme-dark .measurements-grid thead th,
html.nav-theme-dark .measurements-grid thead th.sticky-col,
html.nav-theme-dark .measurements-grid thead th.sticky-col-2,
html.nav-theme-dark .measurements-grid thead th.sticky-col-3 {
    background: #111c33 !important;
    color: #cbd5e1;
}

html.nav-theme-dark .measurements-grid th.sticky-col,
html.nav-theme-dark .measurements-grid td.sticky-col,
html.nav-theme-dark .measurements-grid th.sticky-col-2,
html.nav-theme-dark .measurements-grid td.sticky-col-2,
html.nav-theme-dark .measurements-grid th.sticky-col-3,
html.nav-theme-dark .measurements-grid td.sticky-col-3 {
    background: #0f172a;
    color: #e2e8f0;
}

html.nav-theme-dark .measurements-grid td.sticky-col-3 {
    box-shadow: 1px 0 0 #1e293b;
}

html.nav-theme-dark .measurements-grid .cell-input {
    color: #e2e8f0;
}

html.nav-theme-dark .measurements-grid .cell-input:hover {
    border-color: #334155;
}

html.nav-theme-dark .measurements-grid .cell-input:focus {
    border-color: #6366f1;
    background: #1e293b;
}

html.nav-theme-dark .measurements-grid .cell-saving .cell-input {
    border-color: #f59e0b;
}

html.nav-theme-dark .measurements-grid .cell-saved .cell-input {
    border-color: #10b981;
}

html.nav-theme-dark .measurements-grid .cell-error .cell-input {
    border-color: #ef4444;
    background: rgba(239,68,68,0.10);
}

html.nav-theme-dark .measurements-grid th.current-week {
    background: rgba(99,102,241,0.25) !important;
    color: #c7d2fe;
}

html.nav-theme-dark .measurements-grid td.current-week {
    background: rgba(99,102,241,0.10) !important;
}

html.nav-theme-dark .measurements-grid .metric-clickable:hover,
html.nav-theme-dark .measurements-grid tbody tr.metric-row:hover .sticky-col,
html.nav-theme-dark .measurements-grid tbody tr.metric-row:hover .sticky-col-2,
html.nav-theme-dark .measurements-grid tbody tr.metric-row:hover .sticky-col-3 {
    background: rgba(255,255,255,0.05) !important;
}

html.nav-theme-dark .measurements-grid .metric-row-expanded .sticky-col,
html.nav-theme-dark .measurements-grid .metric-row-expanded .sticky-col-2,
html.nav-theme-dark .measurements-grid .metric-row-expanded .sticky-col-3 {
    background: rgba(245,158,11,0.10) !important;
}

html.nav-theme-dark .measurements-grid .expand-caret {
    color: #94a3b8;
}

html.nav-theme-dark .measurements-grid .metric-name-tip {
    border-bottom-color: #475569;
}

html.nav-theme-dark .measurements-grid .target-badge {
    background: rgba(245,158,11,0.15);
    color: #fcd34d;
    border-color: rgba(245,158,11,0.30);
}

html.nav-theme-dark .metric-chart-card {
    background: #0f172a;
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

/* ---- Release Notes page ---- */
html.nav-theme-dark .rn-release::before {
    background: #0f172a;
}

html.nav-theme-dark .rn-release.rn-release-older::before {
    box-shadow: 0 0 0 3px #1e293b;
}

html.nav-theme-dark .rn-card {
    background: #0f172a;
    border-color: #1e293b;
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
html.nav-theme-dark .rn-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.55);
}

html.nav-theme-dark .rn-body {
    background: #111c33;
    color: #cbd5e1;
    border-top-color: #1e293b;
}

html.nav-theme-dark .rn-commits {
    border-top-color: #1e293b;
}

html.nav-theme-dark .rn-commit {
    border-top-color: #1e293b;
}

html.nav-theme-dark .rn-commit:hover {
    background: rgba(255,255,255,0.04);
}

html.nav-theme-dark .rn-subject {
    color: #e2e8f0;
}

html.nav-theme-dark .rn-latest-pill {
    border-color: rgba(16,185,129,0.35);
}

html.nav-theme-dark .rn-hash {
    color: #cbd5e1;
    background: #1e293b;
    border-color: #334155;
}

/* ---- Alerts page (mailbox) ---- */
html.nav-theme-dark .mailbox {
    background: #0f172a;
    border-color: #1e293b;
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

html.nav-theme-dark .mailbox-header {
    background: #111c33;
    border-bottom-color: #1e293b;
}
html.nav-theme-dark .mailbox-header h3 { color: #f1f5f9; }
html.nav-theme-dark .mailbox-header .sub { color: #94a3b8; }

html.nav-theme-dark .filter-pill-group {
    background: #1e293b;
    border-color: #334155;
}
html.nav-theme-dark .filter-pill-group button {
    color: #cbd5e1;
    border-right-color: #334155;
}
html.nav-theme-dark .filter-pill-group button:hover {
    background: rgba(255,255,255,0.06);
    color: #f1f5f9;
}
html.nav-theme-dark .filter-pill-group button.active {
    background: #4f46e5;
    color: #fff;
}
html.nav-theme-dark .filter-pill-group button .badge-count {
    background: rgba(255,255,255,0.10);
    color: #cbd5e1;
}
html.nav-theme-dark .filter-pill-group button.active .badge-count {
    background: rgba(255,255,255,0.25);
    color: #fff;
}

html.nav-theme-dark .mark-all {
    border-color: #334155;
    color: #cbd5e1;
}
html.nav-theme-dark .mark-all:hover:not(:disabled) {
    background: rgba(255,255,255,0.06);
    color: #f1f5f9;
}

html.nav-theme-dark .mail-row {
    border-bottom-color: #1e293b;
}
html.nav-theme-dark .mail-row:hover {
    background: rgba(255,255,255,0.04);
}
html.nav-theme-dark .mail-row.unread {
    background: rgba(99,102,241,0.06);
}
html.nav-theme-dark .mail-row.unread:hover {
    background: rgba(99,102,241,0.12);
}
html.nav-theme-dark .mail-row.unread::before {
    background: #818cf8;
}

html.nav-theme-dark .mail-row .title { color: #94a3b8; }
html.nav-theme-dark .mail-row.unread .title { color: #f1f5f9; }
html.nav-theme-dark .mail-row a.title:hover { color: #93c5fd; }

html.nav-theme-dark .mail-row .preview { color: #94a3b8; }
html.nav-theme-dark .mail-row .preview .dash { color: #475569; }

html.nav-theme-dark .mail-row .time { color: #94a3b8; }
html.nav-theme-dark .mail-row.unread .time { color: #93c5fd; }

html.nav-theme-dark .mail-row .actions button {
    background: #1e293b;
    border-color: #334155;
    color: #cbd5e1;
}
html.nav-theme-dark .mail-row .actions button:hover {
    background: rgba(255,255,255,0.06);
    color: #f1f5f9;
    border-color: #475569;
}
html.nav-theme-dark .mail-row .actions .danger:hover {
    color: #fca5a5;
    border-color: rgba(239,68,68,0.5);
    background: rgba(239,68,68,0.10);
}

html.nav-theme-dark .day-label {
    color: #94a3b8;
    background: #111c33;
    border-top-color: #1e293b;
    border-bottom-color: #1e293b;
}

html.nav-theme-dark .empty-mailbox {
    color: #94a3b8;
}

/* ---- Absence calendar cells ---- */
.cal-day-holiday {
    background-color: #fff3cd;
}

.cal-day-other {
    background-color: #f8f9fa;
}

html.nav-theme-dark .cal-day-holiday {
    background-color: rgba(245,158,11,0.15) !important;
}

html.nav-theme-dark .cal-day-other {
    background-color: rgba(255,255,255,0.02) !important;
}

/* ---- Nav Icons (global so chips & sidebar can both use them) ---- */
.bi-house-door-fill-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-folder-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-folder2' viewBox='0 0 16 16'%3E%3Cpath d='M1 3.5A1.5 1.5 0 0 1 2.5 2h2.764c.958 0 1.76.56 2.311 1.184C7.985 3.648 8.48 4 9 4h4.5A1.5 1.5 0 0 1 15 5.5v7a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 1 12.5v-9zM2.5 3a.5.5 0 0 0-.5.5V6h12v-.5a.5.5 0 0 0-.5-.5H9c-.964 0-1.71-.629-2.174-1.154C6.374 3.334 5.82 3 5.264 3H2.5zM14 7H2v5.5a.5.5 0 0 0 .5.5h11a.5.5 0 0 0 .5-.5V7z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-kanban' viewBox='0 0 16 16'%3E%3Cpath d='M13.5 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zm-11-1a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zM6.5 3a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5zM11 3a.5.5 0 0 0-.5.5v7a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.5-.5zM3.5 3a.5.5 0 0 0-.5.5v5a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-5A.5.5 0 0 0 4.5 3z'/%3E%3C/svg%3E");
}

.bi-kanban-board-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M13.5 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zm-11-1a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z'/%3E%3Cpath d='M6.5 3a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5zm4.5 0a.5.5 0 0 0-.5.5v7a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.5-.5zm-8 0a.5.5 0 0 0-.5.5v5a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-5A.5.5 0 0 0 4.5 3z'/%3E%3C/svg%3E");
}

.bi-clock-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M8 3.5a.5.5 0 0 0-1 0V8a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 7.71V3.5z'/%3E%3Cpath d='M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0z'/%3E%3C/svg%3E");
}

.bi-activity-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M6 2a.5.5 0 0 1 .47.33L10 12.036l1.53-4.208A.5.5 0 0 1 12 7.5h3.5a.5.5 0 0 1 0 1h-3.15l-1.88 5.17a.5.5 0 0 1-.94 0L6 3.964 4.47 8.171A.5.5 0 0 1 4 8.5H.5a.5.5 0 0 1 0-1h3.15l1.88-5.17A.5.5 0 0 1 6 2z'/%3E%3C/svg%3E");
}

.bi-calendar-check-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M10.854 7.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 9.793l2.646-2.647a.5.5 0 0 1 .708 0z'/%3E%3Cpath d='M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z'/%3E%3C/svg%3E");
}

.bi-journal-text-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M5 10.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5zm0-2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0-2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0-2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5z'/%3E%3Cpath d='M3 0h10a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2zm0 1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H3z'/%3E%3C/svg%3E");
}

.bi-bug-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M4.355.522a.5.5 0 0 1 .623.333l.291.956A4.979 4.979 0 0 1 8 1c1.007 0 1.946.298 2.731.811l.29-.956a.5.5 0 1 1 .957.29l-.41 1.352A4.985 4.985 0 0 1 13 6h.5a.5.5 0 0 0 .5-.5V5a.5.5 0 0 1 1 0v.5A1.5 1.5 0 0 1 13.5 7H13v1h1.5a.5.5 0 0 1 0 1H13v1h.5a1.5 1.5 0 0 1 1.5 1.5v.5a.5.5 0 1 1-1 0v-.5a.5.5 0 0 0-.5-.5H13a5 5 0 0 1-10 0h-.5a.5.5 0 0 0-.5.5v.5a.5.5 0 1 1-1 0v-.5A1.5 1.5 0 0 1 2.5 10H3V9H1.5a.5.5 0 0 1 0-1H3V7h-.5A1.5 1.5 0 0 1 1 5.5V5a.5.5 0 0 1 1 0v.5a.5.5 0 0 0 .5.5H3c0-1.364.547-2.601 1.432-3.503l-.41-1.352a.5.5 0 0 1 .333-.623zM4 7v4a4 4 0 0 0 3.5 3.97V7H4zm4.5 0v7.97A4 4 0 0 0 12 11V7H8.5zM12 6a3.989 3.989 0 0 0-1.334-2.982A3.983 3.983 0 0 0 8 2a3.983 3.983 0 0 0-2.667 1.018A3.989 3.989 0 0 0 4 6h8z'/%3E%3C/svg%3E");
}

.bi-graph-up-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M0 0h1v15h15v1H0V0Zm14.817 3.113a.5.5 0 0 1 .07.704l-4.5 5.5a.5.5 0 0 1-.74.037L7.06 6.767l-3.656 5.027a.5.5 0 0 1-.808-.588l4-5.5a.5.5 0 0 1 .758-.06l2.609 2.61 4.15-5.073a.5.5 0 0 1 .704-.07Z'/%3E%3C/svg%3E");
}

.bi-database-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M4.318 2.687C5.234 2.271 6.536 2 8 2s2.766.27 3.682.687C12.644 3.125 13 3.627 13 4c0 .374-.356.875-1.318 1.313C10.766 5.729 9.464 6 8 6s-2.766-.27-3.682-.687C3.356 4.875 3 4.373 3 4c0-.374.356-.875 1.318-1.313ZM13 5.698V7c0 .374-.356.875-1.318 1.313C10.766 8.729 9.464 9 8 9s-2.766-.27-3.682-.687C3.356 7.875 3 7.373 3 7V5.698c.271.202.58.378.904.525C4.978 6.711 6.427 7 8 7s3.022-.289 4.096-.777A4.92 4.92 0 0 0 13 5.698ZM14 4c0-1.007-.875-1.755-1.904-2.223C11.022 1.289 9.573 1 8 1s-3.022.289-4.096.777C2.875 2.245 2 2.993 2 4v9c0 1.007.875 1.755 1.904 2.223C4.978 15.71 6.427 16 8 16s3.022-.289 4.096-.777C13.125 14.755 14 14.007 14 13V4Zm-1 4.698V10c0 .374-.356.875-1.318 1.313C10.766 11.729 9.464 12 8 12s-2.766-.27-3.682-.687C3.356 10.875 3 10.373 3 10V8.698c.271.202.58.378.904.525C4.978 9.711 6.427 10 8 10s3.022-.289 4.096-.777A4.92 4.92 0 0 0 13 8.698ZM13 11.698V13c0 .374-.356.875-1.318 1.313C10.766 14.729 9.464 15 8 15s-2.766-.27-3.682-.687C3.356 13.875 3 13.373 3 13v-1.302c.271.202.58.378.904.525C4.978 12.711 6.427 13 8 13s3.022-.289 4.096-.777A4.92 4.92 0 0 0 13 11.698Z'/%3E%3C/svg%3E");
}

.bi-bell-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M8 16a2 2 0 0 0 2-2H6a2 2 0 0 0 2 2zM8 1.918l-.797.161A4.002 4.002 0 0 0 4 6c0 .628-.134 2.197-.459 3.742-.16.767-.376 1.566-.663 2.258h10.244c-.287-.692-.502-1.49-.663-2.258C12.134 8.197 12 6.628 12 6a4.002 4.002 0 0 0-3.203-3.92L8 1.917zM14.22 12c.223.447.481.801.78 1H1c.299-.199.557-.553.78-1C2.68 10.2 3 6.88 3 6c0-2.42 1.72-4.44 4.005-4.901a1 1 0 1 1 1.99 0A5.002 5.002 0 0 1 13 6c0 .88.32 4.2 1.22 6z'/%3E%3C/svg%3E");
}

.bi-tag-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M6 4.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z'/%3E%3Cpath d='M2 1a1 1 0 0 0-1 1v4.586a1 1 0 0 0 .293.707l7 7a1 1 0 0 0 1.414 0l4.586-4.586a1 1 0 0 0 0-1.414l-7-7A1 1 0 0 0 6.586 1H2zm0 1h4.586L14 9.414 9.414 14 2 6.586V2z'/%3E%3C/svg%3E");
}

.bi-rocket-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M8 8c.828 0 1.5-.895 1.5-2S8.828 4 8 4s-1.5.895-1.5 2S7.172 8 8 8z'/%3E%3Cpath d='M11.953 8.81c-.195-3.388-.968-5.507-1.777-6.819C9.707 1.233 9.23.751 8.857.454a3.495 3.495 0 0 0-.463-.315A2.19 2.19 0 0 0 8.25.064.546.546 0 0 0 8 0a.549.549 0 0 0-.266.073 2.312 2.312 0 0 0-.142.08 3.67 3.67 0 0 0-.459.33c-.37.308-.844.803-1.31 1.57-.805 1.322-1.577 3.433-1.774 6.756l-1.497 1.826-.004.005A2.5 2.5 0 0 0 2 12.202V15.5a.5.5 0 0 0 .9.3l1.125-1.5c.166-.222.42-.4.752-.57.214-.108.414-.192.625-.281l.198-.084c.7.428 1.55.635 2.4.635s1.7-.207 2.4-.635c.067.03.132.056.196.083.213.09.413.174.627.282.332.17.586.348.752.57l1.125 1.5a.5.5 0 0 0 .9-.3v-3.298a2.5 2.5 0 0 0-.548-1.562l-1.499-1.83z'/%3E%3C/svg%3E");
}

.bi-people-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M15 14s1 0 1-1-1-4-5-4-5 3-5 4 1 1 1 1zm-7.978-1A.261.261 0 0 1 7 12.996c.001-.264.167-1.03.76-1.72C8.312 10.629 9.282 10 11 10c1.717 0 2.687.63 3.24 1.276.593.69.758 1.457.76 1.72l-.008.002a.274.274 0 0 1-.014.002H7.022zM11 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4m3-2a3 3 0 1 1-6 0 3 3 0 0 1 6 0M6.936 9.28a5.88 5.88 0 0 0-1.23-.247A7.35 7.35 0 0 0 5 9c-4 0-5 3-5 4 0 .667.333 1 1 1h4.216A2.238 2.238 0 0 1 5 13c0-.779.357-1.85 1.084-2.79.243-.314.52-.6.852-.862zM4.92 10A5.493 5.493 0 0 0 4 13H1c0-.26.164-1.03.76-1.724.545-.636 1.492-1.256 3.16-1.275zM1.5 5.5a3 3 0 1 1 6 0 3 3 0 0 1-6 0m3-2a2 2 0 1 0 0 4 2 2 0 0 0 0-4'/%3E%3C/svg%3E");
}

.bi-gear-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492zM5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0z'/%3E%3Cpath d='M9.796 1.343c-.527-1.79-3.065-1.79-3.592 0l-.094.319a.873.873 0 0 1-1.255.52l-.292-.16c-1.64-.892-3.433.902-2.54 2.541l.159.292a.873.873 0 0 1-.52 1.255l-.319.094c-1.79.527-1.79 3.065 0 3.592l.319.094a.873.873 0 0 1 .52 1.255l-.16.292c-.892 1.64.901 3.434 2.541 2.54l.292-.159a.873.873 0 0 1 1.255.52l.094.319c.527 1.79 3.065 1.79 3.592 0l.094-.319a.873.873 0 0 1 1.255-.52l.292.16c1.64.893 3.434-.902 2.54-2.541l-.159-.292a.873.873 0 0 1 .52-1.255l.319-.094c1.79-.527 1.79-3.065 0-3.592l-.319-.094a.873.873 0 0 1-.52-1.255l.16-.292c.893-1.64-.902-3.433-2.541-2.54l-.292.159a.873.873 0 0 1-1.255-.52l-.094-.319zm-2.633.283c.246-.835 1.428-.835 1.674 0l.094.319a1.873 1.873 0 0 0 2.693 1.115l.291-.16c.764-.415 1.6.42 1.184 1.185l-.159.292a1.873 1.873 0 0 0 1.116 2.692l.318.094c.835.246.835 1.428 0 1.674l-.319.094a1.873 1.873 0 0 0-1.115 2.693l.16.291c.415.764-.42 1.6-1.185 1.184l-.291-.159a1.873 1.873 0 0 0-2.693 1.116l-.094.318c-.246.835-1.428.835-1.674 0l-.094-.319a1.873 1.873 0 0 0-2.692-1.115l-.292.16c-.764.415-1.6-.42-1.184-1.185l.159-.291A1.873 1.873 0 0 0 1.945 8.93l-.319-.094c-.835-.246-.835-1.428 0-1.674l.319-.094A1.873 1.873 0 0 0 3.06 4.377l-.16-.292c-.415-.764.42-1.6 1.185-1.184l.292.159a1.873 1.873 0 0 0 2.692-1.115l.094-.319z'/%3E%3C/svg%3E");
}

.bi-envelope-open-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M8.47 1.318a1 1 0 0 0-.94 0l-6 3.2A1 1 0 0 0 1 5.4v.817l5.75 3.45L8 8.917l1.25.75L15 6.217V5.4a1 1 0 0 0-.53-.882zM15 7.383l-4.778 2.867L15 13.117zm-.035 6.88L8 10.082l-6.965 4.18A1 1 0 0 0 2 15h12a1 1 0 0 0 .965-.738zM1 13.116l4.778-2.867L1 7.383zm7-11.351L2.053 4.964 8 8.583l5.947-3.62z'/%3E%3C/svg%3E");
}

.bi-envelope-slash-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 1.5A.5.5 0 0 1 2 1h12a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.128.334L10 8.692V13.5a.5.5 0 0 1-.342.474l-3 1A.5.5 0 0 1 6 14.5V8.692L1.628 3.834A.5.5 0 0 1 1.5 3.5zm1 .5v1.308l4.372 4.858A.5.5 0 0 1 7 8.5v5.306l2-.666V8.5a.5.5 0 0 1 .128-.334L13.5 3.308V2z'/%3E%3C/svg%3E");
}

.bi-chat-square-text-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M14 1a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1h-2.5a2 2 0 0 0-1.6.8L8 14.333 6.1 11.8a2 2 0 0 0-1.6-.8H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2.5a1 1 0 0 1 .8.4l1.9 2.533a1 1 0 0 0 1.6 0l1.9-2.533a1 1 0 0 1 .8-.4H14a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z'/%3E%3Cpath d='M3 3.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zM3 6a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9A.5.5 0 0 1 3 6zm0 2.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

/* Loop — conversations. Used by the Overview > Loop menu row. */
.bi-chat-dots-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M5 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm4 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm3 1a1 1 0 1 0 0-2 1 1 0 0 0 0 2z'/%3E%3Cpath d='m2.165 15.803.02-.004c1.83-.363 2.948-.842 3.468-1.105A9.06 9.06 0 0 0 8 15c4.418 0 8-3.134 8-7s-3.582-7-8-7-8 3.134-8 7c0 1.76.743 3.37 1.97 4.6a10.437 10.437 0 0 1-.524 2.318l-.003.011a10.722 10.722 0 0 1-.244.637c-.079.186.074.394.273.362a21.673 21.673 0 0 0 .693-.125zm.8-3.108a1 1 0 0 0-.287-.801C1.618 10.83 1 9.468 1 8c0-3.192 3.004-6 7-6s7 2.808 7 6c0 3.193-3.004 6-7 6a8.06 8.06 0 0 1-2.088-.272 1 1 0 0 0-.711.074c-.387.196-1.24.57-2.634.893a10.97 10.97 0 0 0 .398-2z'/%3E%3C/svg%3E");
}

.bi-box-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M8.186 1.113a.5.5 0 0 0-.372 0L1.846 3.5 8 5.961 14.154 3.5zM15 4.239l-6.5 2.6v7.922l6.5-2.6V4.24zM7.5 14.762V6.838L1 4.239v7.923zM7.443.184a1.5 1.5 0 0 1 1.114 0l7.129 2.852A.5.5 0 0 1 16 3.5v8.662a1 1 0 0 1-.629.928l-7.185 2.874a.5.5 0 0 1-.372 0L.63 13.09a1 1 0 0 1-.63-.928V3.5a.5.5 0 0 1 .314-.464z'/%3E%3C/svg%3E");
}

.bi-diagram-3-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M6 3.5A1.5 1.5 0 0 1 7.5 2h1A1.5 1.5 0 0 1 10 3.5v1A1.5 1.5 0 0 1 8.5 6v1H14a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-1 0V8h-5v.5a.5.5 0 0 1-1 0V8h-5v.5a.5.5 0 0 1-1 0v-1A.5.5 0 0 1 2 7h5.5V6A1.5 1.5 0 0 1 6 4.5zm-6 8A1.5 1.5 0 0 1 1.5 10h1A1.5 1.5 0 0 1 4 11.5v1A1.5 1.5 0 0 1 2.5 14h-1A1.5 1.5 0 0 1 0 12.5zm6 0A1.5 1.5 0 0 1 7.5 10h1a1.5 1.5 0 0 1 1.5 1.5v1A1.5 1.5 0 0 1 8.5 14h-1A1.5 1.5 0 0 1 6 12.5zm6 0a1.5 1.5 0 0 1 1.5-1.5h1a1.5 1.5 0 0 1 1.5 1.5v1a1.5 1.5 0 0 1-1.5 1.5h-1a1.5 1.5 0 0 1-1.5-1.5z'/%3E%3C/svg%3E");
}

.bi-display-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M0 4s0-2 2-2h12s2 0 2 2v6s0 2-2 2h-4c0 .667.083 1.167.25 1.5H11a.5.5 0 0 1 0 1H5a.5.5 0 0 1 0-1h.75c.167-.333.25-.833.25-1.5H2s-2 0-2-2V4zm1.398-.855a.758.758 0 0 0-.254.302A1.46 1.46 0 0 0 1 4.01V10c0 .325.078.502.145.602.07.105.17.188.302.254a1.464 1.464 0 0 0 .538.143L2.01 11H14c.325 0 .502-.078.602-.145a.758.758 0 0 0 .254-.302 1.464 1.464 0 0 0 .143-.538L15 9.99V4c0-.325-.078-.502-.145-.602a.757.757 0 0 0-.302-.254A1.46 1.46 0 0 0 13.99 3H2.01a1.464 1.464 0 0 0-.612.145z'/%3E%3C/svg%3E");
}

.bi-telephone-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M3.654 1.328a.678.678 0 0 0-1.015-.063L1.605 2.3c-.483.484-.661 1.169-.45 1.77a17.568 17.568 0 0 0 4.168 6.608 17.569 17.569 0 0 0 6.608 4.168c.601.211 1.286.033 1.77-.45l1.034-1.034a.678.678 0 0 0-.063-1.015l-2.307-1.794a.678.678 0 0 0-.58-.122l-2.19.547a1.745 1.745 0 0 1-1.657-.459L5.482 8.062a1.745 1.745 0 0 1-.46-1.657l.548-2.19a.678.678 0 0 0-.122-.58L3.654 1.328zM1.884.511a1.745 1.745 0 0 1 2.612.163L6.29 2.98c.329.423.445.974.315 1.494l-.547 2.19a.678.678 0 0 0 .178.643l2.457 2.457a.678.678 0 0 0 .644.178l2.189-.547a1.745 1.745 0 0 1 1.494.315l2.306 1.794c.829.645.905 1.87.163 2.611l-1.034 1.034c-.74.74-1.846 1.065-2.877.702a18.634 18.634 0 0 1-7.01-4.42 18.634 18.634 0 0 1-4.42-7.009c-.362-1.03-.037-2.137.703-2.877L1.885.511z'/%3E%3C/svg%3E");
}

/* Stacked panes — the block-composed home page. */
.bi-grid-1x2-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M6 1H1v14h5V1zm9 0h-5v5h5V1zm0 9v5h-5v-5h5zM0 1a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V1zm9 0a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V1zm0 9a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1v-5z'/%3E%3C/svg%3E");
}

.bi-clipboard-data-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M4 11a1 1 0 1 1 2 0v1a1 1 0 1 1-2 0v-1zm6-4a1 1 0 1 1 2 0v5a1 1 0 1 1-2 0V7zM7 9a1 1 0 0 1 2 0v3a1 1 0 1 1-2 0V9z'/%3E%3Cpath d='M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z'/%3E%3Cpath d='M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z'/%3E%3C/svg%3E");
}

.bi-cash-stack-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M1 3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1H1zm7 8a2 2 0 1 0 0-4 2 2 0 0 0 0 4z'/%3E%3Cpath d='M0 5a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V5zm3 0a2 2 0 0 1-2 2v4a2 2 0 0 1 2 2h10a2 2 0 0 1 2-2V7a2 2 0 0 1-2-2H3z'/%3E%3C/svg%3E");
}

.bi-cloud-arrow-up-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M7.646 5.146a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 6.707V10.5a.5.5 0 0 1-1 0V6.707L6.354 7.854a.5.5 0 1 1-.708-.708l2-2z'/%3E%3Cpath d='M4.406 3.342A5.53 5.53 0 0 1 8 2c2.69 0 4.923 2 5.166 4.579C14.758 6.804 16 8.137 16 9.773 16 11.569 14.502 13 12.687 13H3.781C1.708 13 0 11.366 0 9.318c0-1.763 1.266-3.223 2.942-3.593.143-.863.698-1.723 1.464-2.383zm.653.757c-.757.653-1.153 1.44-1.153 2.056v.448l-.445.049C2.064 6.805 1 7.952 1 9.318 1 10.785 2.23 12 3.781 12h8.906C13.98 12 15 10.988 15 9.773c0-1.216-1.02-2.228-2.313-2.228h-.5v-.5C12.188 4.825 10.328 3 8 3a4.53 4.53 0 0 0-2.941 1.099z'/%3E%3C/svg%3E");
}

.bi-list-check-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M5 11.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zM3.854 2.146a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 1 1 .708-.708L2 3.293l1.146-1.147a.5.5 0 0 1 .708 0zm0 4a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 1 1 .708-.708L2 7.293l1.146-1.147a.5.5 0 0 1 .708 0zm0 4a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 0 1 .708-.708l.146.147 1.146-1.147a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E");
}

.bi-link-45deg-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1.002 1.002 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4.018 4.018 0 0 1-.128-1.287z'/%3E%3Cpath d='M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243L6.586 4.672z'/%3E%3C/svg%3E");
}

/* ========== Follow-up timeline (ticket detail) ========== */
/* Vertical contact history. Channel colours reuse the existing semantic tokens — the icon
   inside each dot carries the meaning, so the colour is never load-bearing on its own. */

.followup-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
}

.followup-timeline > li {
    position: relative;
    padding: 0 0 1rem 1.9rem;
}

.followup-timeline > li::before {
    content: "";
    position: absolute;
    left: 0.56rem;
    top: 1.3rem;
    bottom: 0;
    width: 1px;
    background: var(--df-border);
}

.followup-timeline > li:last-child {
    padding-bottom: 0;
}

.followup-timeline > li:last-child::before {
    display: none;
}

.followup-dot {
    position: absolute;
    left: 0;
    top: 0.1rem;
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 0.65rem;
    color: #fff;
    background: var(--df-text-muted);
}

.followup-dot.fu-email { background: var(--df-info); }
.followup-dot.fu-phone { background: var(--df-success); }
.followup-dot.fu-person { background: #7c3aed; }
.followup-dot.fu-chat { background: var(--df-text-muted); }
.followup-dot.fu-other { background: var(--df-text-muted); }

/* Automated correspondence is deliberately washed out: it is context, not a response. */
.followup-dot.fu-auto {
    background: var(--df-border);
    color: var(--df-text-muted);
}

/* ========== Async agent (items + queue) ========== */
/* Built entirely from existing --df-* tokens: no new hues, radii, shadows or transitions. */

.agent-items-page,
.agent-queue-page {
    padding: 1.5rem;
}

.agent-items-header,
.agent-queue-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.agent-items-title,
.agent-queue-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0;
}

.agent-items-subtitle,
.agent-queue-subtitle {
    color: var(--df-text-muted);
    font-size: 0.875rem;
    margin: 0.25rem 0 0;
}

.agent-items-filters {
    display: flex;
    gap: 0.5rem;
}

.agent-items-empty,
.agent-queue-empty {
    background: var(--df-surface);
    border: 1px solid var(--df-border);
    border-radius: var(--df-radius);
    box-shadow: var(--df-card-shadow);
    padding: 3rem 1.5rem;
    text-align: center;
    color: var(--df-text-muted);
}

.agent-items-empty i,
.agent-queue-empty i {
    font-size: 2rem;
    display: block;
    margin-bottom: 0.75rem;
}

/* The healthy steady state of the items page is empty, so it reads as success. */
.agent-items-empty-good {
    background: var(--df-success-light);
    border-color: var(--df-success);
    color: var(--df-text);
}

.agent-items-empty-good i {
    color: var(--df-success);
}

.agent-items-layout {
    display: grid;
    grid-template-columns: minmax(18rem, 22rem) 1fr;
    gap: 1.25rem;
    align-items: start;
}

.agent-items-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 70vh;
    overflow-y: auto;
}

.agent-item-row {
    width: 100%;
    text-align: left;
    background: var(--df-surface);
    border: 1px solid var(--df-border);
    border-left: 3px solid var(--df-border);
    border-radius: var(--df-radius);
    box-shadow: var(--df-card-shadow);
    padding: 0.75rem;
    transition: box-shadow var(--df-transition), border-color var(--df-transition);
}

.agent-item-row:hover {
    box-shadow: var(--df-card-shadow-hover);
}

.agent-item-row.is-selected {
    border-left-color: var(--df-info);
}

.agent-item-row-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.375rem;
}

.agent-item-badge {
    font-size: 0.6875rem;
    font-weight: 500;
}

.agent-item-age,
.agent-queue-muted {
    color: var(--df-text-muted);
    font-size: 0.75rem;
}

.agent-item-row-body {
    font-size: 0.875rem;
    margin-bottom: 0.375rem;
}

.agent-item-row-meta {
    display: flex;
    gap: 0.625rem;
    flex-wrap: wrap;
    color: var(--df-text-muted);
    font-size: 0.75rem;
}

.agent-item-detail {
    background: var(--df-surface);
    border: 1px solid var(--df-border);
    border-radius: var(--df-radius);
    box-shadow: var(--df-card-shadow);
    padding: 1.25rem;
}

.agent-item-detail-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--df-border);
    margin-bottom: 1rem;
}

.agent-item-ticket-link {
    font-weight: 500;
}

.agent-item-run,
.agent-item-detail-task {
    color: var(--df-text-muted);
    font-size: 0.8125rem;
}

.agent-item-detail-body {
    white-space: pre-wrap;
    font-size: 0.9375rem;
    line-height: 1.6;
    margin-bottom: 1.25rem;
}

.agent-item-options {
    border: 1px solid var(--df-border);
    border-radius: var(--df-radius);
    padding: 0.875rem 1rem;
    margin-bottom: 1rem;
    transition: opacity var(--df-transition);
}

.agent-item-options legend {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--df-text-muted);
    padding: 0 0.375rem;
    width: auto;
    margin: 0;
}

/* Free text overrides the options entirely, so the option list visibly de-emphasises rather
   than silently losing. */
.agent-item-options.is-overridden .agent-item-option {
    opacity: 0.5;
}

.agent-item-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0;
    font-size: 0.875rem;
}

.agent-item-override-note {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.5rem 0 0;
    font-size: 0.8125rem;
    color: var(--df-warning);
}

.agent-item-freetext label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0.375rem;
}

.agent-item-freetext-hint {
    font-weight: 400;
    color: var(--df-text-muted);
}

.agent-item-error {
    margin: 1rem 0 0;
    font-size: 0.875rem;
}

.agent-item-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1rem;
}

.agent-item-actions-hint {
    color: var(--df-text-muted);
    font-size: 0.75rem;
}

/* Wide tables scroll inside their own container rather than the page body. */
.agent-queue-table-wrap {
    overflow-x: auto;
    background: var(--df-surface);
    border: 1px solid var(--df-border);
    border-radius: var(--df-radius);
    box-shadow: var(--df-card-shadow);
}

.agent-queue-table {
    margin: 0;
    font-size: 0.875rem;
}

.agent-queue-position {
    font-variant-numeric: tabular-nums;
    color: var(--df-text-muted);
}

.agent-queue-branch {
    font-family: 'Cascadia Code', 'Consolas', monospace;
    font-size: 0.8125rem;
}

/* A run that looks alive but is not is the worst outcome, so a problem row is tinted as well as
   badged — never colour alone. */
.agent-queue-row-problem > td {
    background: var(--df-danger-light);
}

.agent-queue-reason {
    color: var(--df-danger);
    font-size: 0.75rem;
    margin-top: 0.25rem;
    max-width: 22rem;
}

.agent-queue-stale {
    color: var(--df-danger);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.agent-queue-alive {
    color: var(--df-success);
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.agent-queue-reorder {
    display: flex;
    gap: 0.25rem;
    justify-content: flex-end;
}

@media (max-width: 900px) {
    .agent-items-layout {
        grid-template-columns: 1fr;
    }

    .agent-items-list {
        max-height: none;
    }
}

.bi-question-circle-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16'/%3E%3Cpath d='M5.255 5.786a.237.237 0 0 0 .241.247h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.312.343 1.312 1.166 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.288m1.557 5.763c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-robot-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M6 12.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5ZM3 8.062C3 6.76 4.235 5.765 5.53 5.886a26.58 26.58 0 0 0 4.94 0C11.765 5.765 13 6.76 13 8.062v1.157a.933.933 0 0 1-.765.935c-.845.147-2.34.346-4.235.346-1.895 0-3.39-.2-4.235-.346A.933.933 0 0 1 3 9.219V8.062Zm4.542-.827a.25.25 0 0 0-.217.068l-.92.9a24.767 24.767 0 0 1-1.871-.183.25.25 0 0 0-.068.495c.55.076 1.232.149 2.02.193a.25.25 0 0 0 .189-.071l.754-.736.847 1.71a.25.25 0 0 0 .404.062l.932-.97a25.286 25.286 0 0 0 1.922-.188.25.25 0 0 0-.068-.495c-.538.074-1.207.145-1.98.189a.25.25 0 0 0-.166.076l-.754.785-.842-1.7a.25.25 0 0 0-.182-.135Z'/%3E%3Cpath d='M8.5 1.866a1 1 0 1 0-1 0V3h-2A4.5 4.5 0 0 0 1 7.5V8a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1v1.5A2.5 2.5 0 0 0 3.5 16h9a2.5 2.5 0 0 0 2.5-2.5V12a1 1 0 0 0 1-1V9a1 1 0 0 0-1-1v-.5A4.5 4.5 0 0 0 10.5 3h-2V1.866ZM14 7.5V13.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 13.5v-6A3.5 3.5 0 0 1 5.5 4h5A3.5 3.5 0 0 1 14 7.5Z'/%3E%3C/svg%3E");
}

.bi-stars-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M7.657 6.247c.11-.33.576-.33.686 0l.645 1.937a2.89 2.89 0 0 0 1.829 1.828l1.936.645c.33.11.33.576 0 .686l-1.937.645a2.89 2.89 0 0 0-1.828 1.829l-.645 1.936a.361.361 0 0 1-.686 0l-.645-1.937a2.89 2.89 0 0 0-1.828-1.828l-1.937-.645a.361.361 0 0 1 0-.686l1.937-.645a2.89 2.89 0 0 0 1.828-1.828l.645-1.937zM3.794 1.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387A1.734 1.734 0 0 0 4.593 5.69l-.387 1.162a.217.217 0 0 1-.412 0L3.407 5.69A1.734 1.734 0 0 0 2.31 4.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387A1.734 1.734 0 0 0 3.407 2.31l.387-1.162zM10.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732L9.1 2.137a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L10.863.1z'/%3E%3C/svg%3E");
}

.bi-play-circle-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E%3Cpath d='M6.271 5.055a.5.5 0 0 1 .52.038l3.5 2.5a.5.5 0 0 1 0 .814l-3.5 2.5A.5.5 0 0 1 6 10.5v-5a.5.5 0 0 1 .271-.445z'/%3E%3C/svg%3E");
}

/* ---- User Avatar ---- */
.user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--df-primary);
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    font-weight: 600;
}

/* ---- Dependency Flow Chart ---- */
.flow-card {
    overflow: visible;
}

.flow-legend {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 1.25rem;
    background: var(--df-primary-light);
    border-bottom: 1px solid var(--df-border);
    font-size: 0.78rem;
    color: var(--df-text-muted);
    flex-wrap: wrap;
}

.flow-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    white-space: nowrap;
}

.flow-legend-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 600;
}

.flow-legend-move {
    background: var(--df-primary);
    color: #fff;
}

.flow-legend-port {
    background: var(--df-primary);
    color: #fff;
    font-size: 0.65rem;
}

.flow-legend-edge {
    background: var(--df-danger-light);
    color: var(--df-danger);
}

.flow-legend-divider {
    width: 1px;
    height: 16px;
    background: var(--df-border);
}

.flow-canvas-wrapper {
    position: relative;
}

.flow-canvas {
    background: var(--df-surface);
    min-height: 300px;
    border-radius: 0 0 var(--df-radius) var(--df-radius);
}

.flow-zoom-controls {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 2px;
    z-index: 10;
    background: var(--df-surface);
    border: 1px solid var(--df-border);
    border-radius: 8px;
    box-shadow: var(--df-card-shadow);
    overflow: hidden;
}

.flow-zoom-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: var(--df-surface);
    color: var(--df-text);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--df-transition);
    line-height: 1;
}

.flow-zoom-btn:hover {
    background: var(--df-primary-light);
    color: var(--df-primary);
}

.flow-zoom-btn:active {
    background: var(--df-primary);
    color: #fff;
}

.flow-zoom-btn + .flow-zoom-btn {
    border-top: 1px solid var(--df-border);
}

/* Node hover glow */
.flow-node .flow-node-rect {
    transition: filter 0.15s ease;
}

.flow-node:hover .flow-node-rect {
    filter: url(#nodeShadow) brightness(1.15);
}

/* Port pulse animation */
.node-port {
    transition: r 0.15s ease;
}

.node-port:hover {
    r: 9;
}

@keyframes portPulse {
    0%, 100% { opacity: 0.4; r: 12; }
    50% { opacity: 0; r: 18; }
}

.flow-node .node-port::after {
    animation: portPulse 2s infinite;
}

/* Edge hover cursor */
.edge-hit {
    cursor: pointer;
}

.edge-hit:hover ~ .edge-visible {
    stroke-width: 3;
}

/* ---- Dependency Flow dark theme ---- */
html.nav-theme-dark .flow-canvas {
    background: #0b1220;
}

html.nav-theme-dark .flow-canvas #dotGrid circle,
html.nav-theme-dark .flow-canvas svg pattern circle {
    fill: #334155;
}

html.nav-theme-dark .flow-zoom-controls {
    background: #0f172a;
    border-color: #1e293b;
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

html.nav-theme-dark .flow-zoom-btn {
    background: #0f172a;
    color: #cbd5e1;
}

html.nav-theme-dark .flow-zoom-btn:hover {
    background: rgba(99,102,241,0.18);
    color: #c7d2fe;
}

html.nav-theme-dark .flow-zoom-btn + .flow-zoom-btn {
    border-top-color: #1e293b;
}

html.nav-theme-dark .flow-legend {
    background: rgba(99,102,241,0.10);
    border-bottom-color: #1e293b;
    color: #cbd5e1;
}

/* Email thread body — images always on their own line */
.email-body img {
    display: block;
    max-width: 100%;
    margin: 0.5rem 0;
}

/* Email autocomplete input */
.email-tags-input:focus-within {
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, .25);
}

.email-autocomplete-input {
    background: transparent;
}

.email-autocomplete-input::placeholder {
    color: #adb5bd;
}

/* ----- Task assignment chip + dropdown (shared by Ticket and Project task lists) ----- */
.assignment-cell {
    position: relative;
}

.assignment-avatars {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
}

.assignment-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #e0e7ff;
    color: #3730a3;
    font-weight: 600;
    font-size: 0.65rem;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s, margin 0.15s;
    overflow: hidden;
    border: 2px solid var(--df-surface);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    margin-left: -8px;
    position: relative;
}

.assignment-chip:first-child {
    margin-left: 0;
}

.assignment-chip:hover {
    transform: scale(1.15);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
    z-index: 2;
}

.assignment-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.assignment-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.assignment-add-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px dashed #cbd5e1;
    background: var(--df-surface);
    color: #94a3b8;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
    padding: 0;
    line-height: 1;
    margin-left: 2px;
    flex-shrink: 0;
}

.assignment-add-btn:hover {
    border-color: #0d6efd;
    color: #0d6efd;
    background: #eff6ff;
}

.assignment-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    /* Sit above nav-tabs, sticky headers, and tab content. The parent
       .meta-item also gets a matching z-index when the dropdown is open so
       its stacking context can't trap the popup. !important because some
       legacy inline styles in TicketDetail still set lower z-index values. */
    z-index: 9999 !important;
    background: var(--df-surface);
    border: 1px solid #dee2e6;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    width: 220px;
    padding: 6px;
    margin-top: 4px;
}

.assignment-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* One below the dropdown so click-outside catches first. */
    z-index: 9998 !important;
    background: transparent;
    cursor: default;
}

.assignment-dropdown-list {
    max-height: 180px;
    overflow-y: auto;
}

.assignment-dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 8px;
    border: none;
    background: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.875rem;
    color: #334155;
    transition: background 0.12s;
    text-align: left;
}

.assignment-dropdown-item:hover {
    background: #f1f5f9;
}

.assignment-dropdown-item .assignment-initials {
    width: 24px;
    height: 24px;
    min-width: 24px;
    border-radius: 50%;
    background: #e0e7ff;
    color: #3730a3;
    font-size: 0.65rem;
}

.assignment-dropdown-item .assignment-avatar-img {
    width: 24px;
    height: 24px;
    min-width: 24px;
}

.assignment-dropdown-item.linked {
    background-color: #dcfce7;
}

/* ----- Search input inside an assignment-dropdown ----- */
.assignment-dropdown .form-control {
    background-color: var(--df-surface);
    color: var(--df-text);
    border-color: #dee2e6;
}
.assignment-dropdown .form-control::placeholder {
    color: #94a3b8;
}

/* ----- BadgeDropdown (Status / Priority pickers in TicketDetail) -----
   Light styles. Dark variants live in the dark-theme block further below. */
.badge-dropdown-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 180px;
    z-index: 9999 !important;
    background: var(--df-surface);
    border: 1px solid #dee2e6;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    padding: 6px;
    margin: 0;
    list-style: none;
}

.badge-dropdown-item {
    padding: 4px 8px;
    color: #334155;
    font-size: 0.875rem;
}

.badge-dropdown-item:hover:not(:disabled) {
    background: #f1f5f9;
    color: var(--df-text);
}

.badge-dropdown-item:disabled {
    opacity: 0.7;
}

/* ---- Dark theme overrides for ticket-detail dropdowns ----
   Keep this block right next to the light styles above so any future change
   forces a paired update. The CSS theme-coverage tests in DevFlow.Tests
   enforce that every color-bearing rule has a dark counterpart. */
html.nav-theme-dark .assignment-add-btn {
    background: #0f172a;
    border-color: #334155;
    color: #94a3b8;
}
html.nav-theme-dark .assignment-add-btn:hover {
    border-color: #6366f1;
    color: #c7d2fe;
    background: rgba(99, 102, 241, 0.15);
}

html.nav-theme-dark .assignment-dropdown {
    background: #0f172a;
    border-color: #1e293b;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
    color: #e2e8f0;
}
html.nav-theme-dark .assignment-dropdown-item {
    color: #cbd5e1;
}
html.nav-theme-dark .assignment-dropdown-item:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #f1f5f9;
}
html.nav-theme-dark .assignment-dropdown-item .assignment-initials {
    background: #312e81;
    color: #c7d2fe;
}
html.nav-theme-dark .assignment-dropdown-item.linked {
    background-color: rgba(16, 185, 129, 0.18);
    color: #6ee7b7;
}
html.nav-theme-dark .assignment-dropdown .form-control {
    background-color: #0b1220;
    border-color: #334155;
    color: #e2e8f0;
}
html.nav-theme-dark .assignment-dropdown .form-control::placeholder {
    color: #64748b;
}

html.nav-theme-dark .badge-dropdown-menu {
    background: #0f172a;
    border-color: #1e293b;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
}
html.nav-theme-dark .badge-dropdown-item {
    color: #cbd5e1;
}
html.nav-theme-dark .badge-dropdown-item:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.05);
    color: #f1f5f9;
}

/* ----- Due date: the header chip, its popover, and the list/board pill -----
   Shared vocabulary so a due date reads identically on the ticket, in the list and on the board.
   The chip is deliberately quiet until the date matters: no colour when unset or comfortably
   ahead, and colour is always paired with the 📅 glyph and a word ("Due today", "Overdue 3d")
   so it never depends on hue alone. */
.due-chip-anchor {
    position: relative;
    display: inline-flex;
}

.due-chip-empty {
    background: transparent;
    border: 1px dashed var(--df-border);
    color: var(--df-text-muted);
    font-weight: 500;
}

.due-chip-empty:hover {
    border-color: var(--df-primary);
    color: var(--df-primary);
    background: var(--df-primary-light);
}

/* Ticket header Todos chip — sized like its Follow-up / Due neighbours, tinted primary, and
   filled solid while its drawer is open so the chip reads as the drawer's toggle. */
.todo-chip {
    cursor: pointer;
    padding: 0.45em 0.7em;
    font-size: 0.85em;
    background: var(--df-primary-light);
    border: 1px solid var(--df-primary-border);
    color: var(--df-primary);
    transition: all var(--df-transition);
}

.todo-chip:hover,
.todo-chip.open {
    background: var(--df-primary);
    border-color: var(--df-primary);
    color: #fff;
}

html.nav-theme-dark .todo-chip:not(:hover):not(.open) {
    color: #c7d2fe;
}

.due-pop {
    width: 230px;
    padding: 8px;
    text-align: left;
}

.due-pop-head {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #94a3b8;
    margin-bottom: 6px;
}

.due-preset-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
}

.due-preset {
    font-size: 0.72rem;
    font-weight: 500;
    padding: 0.25rem 0.3rem;
    border: 1px solid var(--df-border);
    border-radius: 0.375rem;
    background: var(--df-surface);
    color: var(--df-text);
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--df-transition);
}

.due-preset:hover {
    border-color: var(--df-primary);
    color: var(--df-primary);
    background: var(--df-primary-light);
}

.due-pop-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px solid var(--df-border);
}

.due-clear {
    font-size: 0.72rem;
    font-weight: 600;
    border: 0;
    background: transparent;
    color: var(--df-danger);
    cursor: pointer;
    padding: 0;
}

/* Compact form used in the ticket list and on Kanban cards. */
.due-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.5rem;
    border-radius: 50rem;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

.due-pill.due-overdue {
    background: var(--df-danger-light);
    color: var(--df-danger);
}

.due-pill.due-soon {
    background: var(--df-warning-light);
    color: var(--df-warning);
}

.due-pill.due-ok,
.due-pill.due-done {
    background: transparent;
    color: var(--df-text-muted);
    font-weight: 500;
}

html.nav-theme-dark .due-chip-empty {
    border-color: #334155;
    color: #94a3b8;
}

html.nav-theme-dark .due-preset {
    background: #0b1220;
    border-color: #334155;
    color: #e2e8f0;
}

html.nav-theme-dark .due-pop-foot {
    border-top-color: #1e293b;
}

/* ----- Meta-grid (entity info panels: Assigned, Product, Time, History) ----- */
.meta-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.meta-group {
    background: var(--df-surface);
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 0;
    overflow: visible;
}

.meta-group-header {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #94a3b8;
    padding: 0.35rem 0.75rem 0.2rem;
    border-bottom: 1px solid #f1f5f9;
    background: var(--df-bg);
    border-radius: 10px 10px 0 0;
}

.meta-group-items {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
}

.meta-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0.4rem 0.75rem;
    min-width: 0;
    flex: 1 1 auto;
}

.meta-label {
    font-size: 0.65rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    margin-bottom: 3px;
}

.meta-value {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--df-text);
    white-space: nowrap;
    line-height: 1.25;
}

.meta-date {
    font-size: 0.65rem;
    color: #94a3b8;
    margin-top: 1px;
    line-height: 1.25;
}

.meta-inline-cell {
    display: flex;
    align-items: center;
    gap: 4px;
    position: relative;
}

.meta-chip {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 8px;
    border-radius: 12px;
    background: #e0e7ff;
    color: #3730a3;
    font-weight: 500;
    font-size: 0.78rem;
    cursor: pointer;
    white-space: nowrap;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
}

.meta-chip:hover {
    background: var(--df-primary-border);
}

.meta-chip.sprint {
    background: #dbeafe;
    color: #1e40af;
}

.meta-chip.sprint:hover {
    background: #bfdbfe;
}

.meta-add-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px dashed #d1d5db;
    background: transparent;
    color: #9ca3af;
    font-size: 0.78rem;
    cursor: pointer;
    transition: all 0.15s;
}

.meta-add-btn:hover {
    border-color: #3b82f6;
    color: #3b82f6;
    background: #eff6ff;
}

.meta-progress {
    display: inline-block;
    width: 50px;
    height: 4px;
    background: #e5e7eb;
    border-radius: 2px;
    margin-left: 6px;
    vertical-align: middle;
    overflow: hidden;
}

.meta-progress-bar {
    display: block;
    height: 100%;
    background: #22c55e;
    border-radius: 2px;
    transition: width 0.3s;
}

.meta-progress-bar.over {
    background: #ef4444;
}

@media (max-width: 1200px) {
    .meta-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .meta-grid {
        grid-template-columns: 1fr;
    }
}

/* ---- Meta-group cards dark theme (global — used by Tickets and Projects) ---- */
html.nav-theme-dark .meta-group {
    background: #0f172a;
    border-color: #1e293b;
    color: #e2e8f0;
}

html.nav-theme-dark .meta-group-header {
    background: #111c33;
    border-bottom-color: #1e293b;
    color: #94a3b8;
}

html.nav-theme-dark .meta-value {
    color: #e2e8f0;
}

html.nav-theme-dark .meta-label,
html.nav-theme-dark .meta-date {
    color: #94a3b8;
}

html.nav-theme-dark .meta-chip {
    background: rgba(99,102,241,0.20);
    color: #c7d2fe;
}
html.nav-theme-dark .meta-chip:hover {
    background: rgba(99,102,241,0.30);
}
html.nav-theme-dark .meta-chip.sprint {
    background: rgba(59,130,246,0.20);
    color: #93c5fd;
}
html.nav-theme-dark .meta-chip.sprint:hover {
    background: rgba(59,130,246,0.30);
}

html.nav-theme-dark .meta-add-btn {
    border-color: #334155;
    color: #94a3b8;
}
html.nav-theme-dark .meta-add-btn:hover {
    border-color: #6366f1;
    color: #c7d2fe;
    background: rgba(99,102,241,0.15);
}

html.nav-theme-dark .meta-progress {
    background: #334155;
}

/* ----- Upload zone (drop target for file attachments) ----- */
.upload-zone {
    position: relative;
    border: 2px dashed #cbd5e1;
    border-radius: 8px;
    padding: 1.25rem 1rem;
    text-align: center;
    transition: border-color 0.2s, background-color 0.2s;
    background: var(--df-bg);
}

.upload-zone.compact {
    padding: 0.5rem 1rem;
}

.upload-zone:hover,
.upload-zone.drag-over {
    border-color: #0d6efd;
    background: #eff6ff;
}

.upload-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

.upload-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    pointer-events: none;
    color: var(--df-text-muted);
    font-size: 0.9rem;
}

.pending-file-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid #f1f5f9;
}

.pending-file-item:last-child {
    border-bottom: none;
}

/* ----- Column chooser (list-view user-preference column toggle) ----- */
.column-chooser-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 1050;
    min-width: 220px;
    background: var(--df-surface);
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    margin-top: 4px;
    padding: 0;
    animation: columnChooserFadeIn 0.15s ease-out;
}

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

.column-chooser-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 0.85rem;
    border-bottom: 1px solid #e9ecef;
    font-size: 0.78rem;
}

.column-chooser-list {
    padding: 0.35rem 0;
    max-height: 340px;
    overflow-y: auto;
}

.column-chooser-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.85rem;
    cursor: pointer;
    font-size: 0.875rem;
    transition: background-color 0.1s ease;
    margin: 0;
}

.column-chooser-item:hover {
    background-color: #f0f4ff;
}

.column-chooser-item.disabled {
    opacity: 0.5;
    cursor: default;
}

.column-chooser-item.disabled:hover {
    background-color: transparent;
}

.column-chooser-item .form-check-input {
    margin: 0;
    cursor: pointer;
}

.column-chooser-item.disabled .form-check-input {
    cursor: default;
}

/* Raise the top-row stacking context when the Timecard modal is open so it overlays the sidebar */
.top-row:has(.tc-modal-dialog) {
    z-index: 1100 !important;
}

.kpi-spark,
.kpi-spark-placeholder {
    height: 32px;
    margin-top: 6px;
    position: relative;
}

.kpi-spark canvas {
    width: 100% !important;
    height: 100% !important;
    display: block;
}

/* ==========================================================================
   Right-click menus — shared "not placed yet" state.

   Every cursor-positioned menu renders at the click point and is then pulled
   back inside the viewport by clampMenuToViewport() (/js/assignment-dropdown.js)
   on the next render. Over a Blazor circuit that correction is a round trip, so
   the menu would visibly appear off-edge and jump. Hide it until the clamp lands
   and clears this attribute. The delayed animation is a safety net: if the
   interop call never arrives, the menu still shows itself rather than staying
   invisible.
   ========================================================================== */

[data-menu-unpositioned] {
    visibility: hidden;
    animation: df-menu-reveal 0s linear 250ms forwards;
}

@keyframes df-menu-reveal {
    to {
        visibility: visible;
    }
}

/* ==========================================================================
   Side panel resize handle — shared by every edge-docked panel.

   Global rather than scoped because more than one component draws it
   (SidePanel.razor, LoopPanel.razor) and a drag grip that looks different
   from panel to panel reads as a different control. /js/side-panel-resize.js
   drives any handle with this class inside a [data-resizable-panel]
   ancestor, so the .side-panel-resize-handle and .dragging names are a
   contract with that file — keep them stable.
   ========================================================================== */

.side-panel-resize-handle {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 10px;
    cursor: ew-resize;
    background: transparent;
    z-index: 3;
}

/* The grip itself is invisible until you go looking for it — the panel is
   for reading, and a permanent vertical bar down its edge competes with the
   content. */
.side-panel-resize-handle::before {
    content: "";
    position: absolute;
    left: 3px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 40px;
    border-radius: 3px;
    background: #cbd5e1;
    opacity: 0;
    transition: opacity 0.18s ease, height 0.18s ease, background 0.18s ease;
}

.side-panel-resize-handle:hover::before {
    opacity: 1;
    height: 64px;
    background: #94a3b8;
}

.side-panel-resize-handle.dragging::before {
    opacity: 1;
    height: 100%;
    border-radius: 0;
    width: 2px;
    left: 4px;
    background: var(--df-text-muted);
}

html.nav-theme-dark .side-panel-resize-handle::before {
    background: #475569;
}

html.nav-theme-dark .side-panel-resize-handle:hover::before {
    background: #94a3b8;
}

html.nav-theme-dark .side-panel-resize-handle.dragging::before {
    background: #cbd5e1;
}

@media (prefers-reduced-motion: reduce) {
    .side-panel-resize-handle::before {
        transition: none;
    }
}
/* ==========================================================================
   Spell check (spellcheck.js) — every box in the app you type prose into

   The wavy underline over a textarea is drawn by a "mirror" element holding the same text in
   transparent ink, laid over the box — the only way to underline part of a textarea. The two
   must lay text out identically or the underline drifts a word off: spellcheck.js copies the
   font and padding across at runtime, and everything that decides *wrapping* is pinned here.

   The mirror sits *over* the box, not behind it. Behind, the box has to be made transparent
   for the squiggle to show through, which is fine for the Loop composer and wrong for every
   .form-control in the app: they are white on a grey page, and going transparent turns each
   one grey.

   These rules are global rather than scoped to a component because the marks and the
   suggestion popup are created in JavaScript, so they never carry a scope attribute.
   ========================================================================== */

.df-sc-wrap {
    position: relative;
}

.df-sc-mirror {
    position: absolute;
    z-index: 2;
    overflow: hidden;
    box-sizing: content-box;
    pointer-events: none;
    color: transparent;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    margin: 0;
}

.df-sc-wrap textarea {
    position: relative;
    z-index: 1;
}

/* Wrapping a textarea puts a div between it and its parent, so where the textarea *was* the
   flex item, the wrapper now is. These two hand the sizing back down to it — the box is the
   thing that has to grow, not the box's new wrapper. */
.df-sc-flex {
    display: flex;
    flex: 1;
    min-width: 0;
}

.df-sc-flex > textarea {
    flex: 1;
    min-width: 0;
}

.df-sc-flexcol {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.df-sc-flexcol > textarea {
    flex: 1;
    min-height: 0;
}

/* A rich text editor's text is real DOM, so it needs no mirror: the Custom Highlight API
   paints this straight over the editor's own words without touching a single node. */
::highlight(df-spell) {
    text-decoration: underline wavy var(--df-warning);
    text-decoration-skip-ink: none;
    text-underline-offset: 2px;
}

.df-sc-hit {
    background: none;
    color: transparent;
    text-decoration: underline wavy var(--df-warning);
    text-decoration-skip-ink: none;
    text-underline-offset: 2px;
}

/* Semantic colour never travels alone: the chip carries a warning glyph, a count, and the
   words themselves in its tooltip. */
.df-sc-flag {
    border: none;
    background: var(--df-warning-light);
    color: var(--df-warning);
    border-radius: 6px;
    padding: 3px 8px;
    margin-left: 4px;
    font-size: 0.71rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}

.df-sc-flag:hover {
    filter: brightness(0.97);
}

/* On a form field the chip has no toolbar to sit in, so it goes under the box — in the gap
   the form already leaves between fields, and only when there is something to say. */
.df-sc-flag-field {
    display: inline-block;
    margin: 4px 0 0;
}

.df-sc-pop {
    position: absolute;
    z-index: 30;
    display: flex;
    flex-direction: column;
    min-width: 132px;
    padding: 4px;
    background: var(--df-surface);
    border: 1px solid var(--df-border);
    border-radius: var(--df-radius);
    box-shadow: var(--df-card-shadow-hover);
}

/* A rich editor scrolls, goes fullscreen and lives inside modals; its popup is placed
   against the window so none of those can clip it. */
.df-sc-pop-fixed {
    position: fixed;
    z-index: 2100;
}

.df-sc-pop-h {
    font-size: 0.68rem;
    color: var(--df-text-muted);
    padding: 3px 8px 5px;
    border-bottom: 1px solid var(--df-border);
    margin-bottom: 3px;
}

.df-sc-pop button {
    border: none;
    background: none;
    text-align: left;
    padding: 5px 8px;
    border-radius: 6px;
    font-size: 0.78rem;
    color: var(--df-text);
    cursor: pointer;
}

.df-sc-pop button:hover {
    background: var(--df-bg);
}

.df-sc-pop .df-sc-ignore {
    font-size: 0.71rem;
    color: var(--df-text-muted);
    border-top: 1px solid var(--df-border);
    border-radius: 0;
    margin-top: 3px;
}

html.nav-theme-dark .df-sc-pop {
    background: #1e293b;
    border-color: #334155;
}

html.nav-theme-dark .df-sc-pop button {
    color: #e2e8f0;
}

html.nav-theme-dark .df-sc-pop button:hover {
    background: #334155;
}

html.nav-theme-dark .df-sc-pop-h,
html.nav-theme-dark .df-sc-pop .df-sc-ignore {
    border-color: #334155;
    color: #94a3b8;
}

/* Dark theme — the light values above are literals so
   light mode is untouched; these repaint them for dark. */
html.nav-theme-dark .login-title {
    color: var(--df-text);
}
html.nav-theme-dark .login-input {
    color: var(--df-text);
}
html.nav-theme-dark .login-forgot:hover {
    color: var(--df-text);
}
html.nav-theme-dark .rich-text-editor .editor-content code, .rendered-html code {
    background: var(--df-bg);
}
html.nav-theme-dark .ai-results code {
    background: var(--df-bg);
}
html.nav-theme-dark ::-webkit-scrollbar-thumb {
    background: var(--df-border);
}
html.nav-theme-dark .meta-group-header {
    border-bottom: 1px solid var(--df-border);
}
html.nav-theme-dark .pending-file-item {
    border-bottom: 1px solid var(--df-border);
}
html.nav-theme-dark .column-chooser-header {
    border-bottom: 1px solid var(--df-border);
}

/* ==========================================================================
   Feature Plans — shared by the list page, the item panel and its dialogs.
   Global rather than scoped because four components render these pieces.
   ========================================================================== */

/* Pills: soft tint + matching border + strong text, always with a dot, icon or label */
.fp-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.05rem 0.5rem;
    border: 1px solid;
    border-radius: 50rem;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.fp-dot {
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.fp-danger { color: var(--df-danger); background: var(--df-danger-light); border-color: var(--df-danger-border); }
.fp-warning { color: var(--df-warning); background: var(--df-warning-light); border-color: var(--df-warning-border); }
.fp-info { color: var(--df-info); background: var(--df-info-light); border-color: var(--df-info-border); }
.fp-primary { color: var(--df-primary); background: var(--df-primary-light); border-color: var(--df-primary-border); }
.fp-success { color: var(--df-success); background: var(--df-success-light); border-color: var(--df-success-border); }
.fp-purple { color: var(--df-purple); background: var(--df-purple-light); border-color: var(--df-purple-border); }
.fp-muted { color: var(--df-text-muted); background: var(--df-bg); border-color: var(--df-border); }

/* Company tag: which customer asked for an item. Neutral on purpose — a company is not a state,
   so it never borrows a semantic colour; the building icon carries the meaning. */
.fp-co {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    max-width: 16rem;
    padding: 0 0.4rem;
    border: 1px solid var(--df-border);
    border-radius: 0.35rem;
    background: var(--df-bg);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--df-text);
    white-space: nowrap;
}

.fp-co i {
    font-size: 0.7rem;
    color: var(--df-text-muted);
}

.fp-co span {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* An item's product: the same tag shape as a customer, tinted so the two read apart. */
.fp-co.fp-prod {
    background: var(--df-primary-light);
    border-color: var(--df-primary-border);
    color: var(--df-primary);
}

.fp-co.fp-prod i {
    color: var(--df-primary);
}

/* Indigo text on the dark tint is too faint at tag size; the tint and icon still carry the hue. */
html.nav-theme-dark .fp-co.fp-prod {
    color: var(--df-text);
}


.fp-co-more {
    color: var(--df-text-muted);
}

.fp-cos {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    min-width: 0;
}

.fp-tid {
    font-weight: 700;
    color: var(--df-primary);
    text-decoration: none;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Linked-ticket tag on a list row: the customer tag's shape on the plain surface, so it reads as
   a link rather than a property. A closed ticket is muted and swaps its icon for a green check. */
.fp-tks {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.fp-tk {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0 0.4rem;
    border: 1px solid var(--df-border);
    border-radius: 0.35rem;
    background: var(--df-surface);
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--df-text);
    text-decoration: none;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    transition: background var(--df-transition), border-color var(--df-transition);
}

.fp-tk i {
    font-size: 0.7rem;
    color: var(--df-text-muted);
}

a.fp-tk:hover,
a.fp-tk:focus-visible {
    border-color: var(--df-primary-border);
    background: var(--df-primary-light);
    color: var(--df-text);
}

.fp-tk.fp-tk-closed {
    color: var(--df-text-muted);
}

.fp-tk.fp-tk-closed i {
    color: var(--df-success);
}

.fp-tk.fp-co-more {
    font-weight: 600;
    color: var(--df-text-muted);
}

.fp-tt {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fp-count {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.72rem;
    color: var(--df-text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.fp-bar {
    display: block;
    width: 96px;
    height: 5px;
    border-radius: 50rem;
    background: var(--df-border);
    overflow: hidden;
}

.fp-bar > span {
    display: block;
    height: 100%;
    background: var(--df-success);
}

.fp-iconbtn {
    display: inline-flex;
    padding: 0.3rem;
    border: 0;
    border-radius: 0.5rem;
    background: none;
    color: var(--df-text-muted);
    text-decoration: none;
    transition: background var(--df-transition), color var(--df-transition);
}

.fp-iconbtn:hover {
    background: var(--df-primary-light);
    color: var(--df-primary);
}

.fp-iconbtn.fp-del:hover {
    background: var(--df-danger-light);
    color: var(--df-danger);
}

/* Linked-ticket list */
.fp-linked {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.fp-linked li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    gap: 0.5rem;
    align-items: center;
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--df-border);
    border-radius: 0.5rem;
    background: var(--df-surface);
    font-size: 0.78rem;
}

/* Quick-search results under a search box */
.fp-results {
    margin-top: 0.35rem;
    max-height: 220px;
    overflow: auto;
    border: 1px solid var(--df-border);
    border-radius: 0.5rem;
}

.fp-results button {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.5rem;
    align-items: center;
    width: 100%;
    padding: 0.4rem 0.55rem;
    border: 0;
    border-bottom: 1px solid var(--df-border);
    background: none;
    text-align: left;
    font-size: 0.78rem;
    color: var(--df-text);
}

.fp-results button:last-child {
    border-bottom: 0;
}

.fp-results button:hover {
    background: var(--df-primary-light);
}

.fp-results-empty {
    padding: 0.6rem;
    text-align: center;
    font-size: 0.78rem;
    color: var(--df-text-muted);
}

/* Rendered descriptions, including pasted screenshots */
.fp-richtext {
    font-size: 0.875rem;
    max-width: 75ch;
    overflow-wrap: anywhere;
}

.fp-richtext p,
.fp-richtext ul,
.fp-richtext ol {
    margin: 0 0 0.45rem;
}

.fp-richtext > :last-child {
    margin-bottom: 0;
}

.fp-richtext img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0.35rem 0;
    border: 1px solid var(--df-border);
    border-radius: 0.5rem;
}


/* Ticket Todos drawer, pinned: make room in the layout so it doesn't cover the page.
   TodosDrawer toggles the class on <html>; the drawer is 360px wide, inset 12px from the edge.
   Below 1200px there isn't room for both, so a pinned drawer overlays instead. */
@media (min-width: 1200px) {
    html.td-todos-docked article.content {
        padding-right: calc(360px + 12px + 1.5rem) !important;
    }
}