:root {
    --forge-page-bg: #f5f6fa;
    --forge-card-bg: #ffffff;
    --forge-card-bg-soft: #f8fafc;
    --forge-card-border: rgba(148, 163, 184, 0.18);
    --forge-card-shadow: 0 10px 28px rgba(15, 23, 42, 0.04);
    --forge-text: #0f172a;
    --forge-text-soft: #334155;
    --forge-text-muted: #64748b;
    --forge-input-bg: #ffffff;
    --forge-input-border: #dcdee4;
    --forge-input-text: #283c50;
    --forge-input-placeholder: #94a3b8;
    --forge-table-bg: #ffffff;
    --forge-table-header-bg: #f8fafc;
    --forge-table-filter-bg: #ffffff;
    --forge-table-border: rgba(148, 163, 184, 0.18);
    --forge-hover-bg: #f1f5f9;
    --forge-accent: #3454d1;
    --forge-accent-soft: rgba(52, 84, 209, 0.12);
}

html.app-skin-dark {
    --forge-page-bg: #0f172a;
    --forge-card-bg: #121a2d;
    --forge-card-bg-soft: #0f172a;
    --forge-card-border: #1b2436;
    --forge-card-shadow: none;
    --forge-text: #f8fafc;
    --forge-text-soft: #e2e8f0;
    --forge-text-muted: #b1b4c0;
    --forge-input-bg: #0f172a;
    --forge-input-border: #1b2436;
    --forge-input-text: #f8fafc;
    --forge-input-placeholder: #64748b;
    --forge-table-bg: #121a2d;
    --forge-table-header-bg: #121a2d;
    --forge-table-filter-bg: #0f172a;
    --forge-table-border: #1b2436;
    --forge-hover-bg: #172033;
    --forge-accent: #8ea2ff;
    --forge-accent-soft: rgba(129, 140, 248, 0.16);
}

.forge-surface {
    background: var(--forge-card-bg);
    border: 1px solid var(--forge-card-border);
    color: var(--forge-text-soft);
    box-shadow: var(--forge-card-shadow);
}

.forge-surface-soft {
    background: var(--forge-card-bg-soft);
    border: 1px solid var(--forge-card-border);
    color: var(--forge-text-soft);
}

.forge-theme-text {
    color: var(--forge-text) !important;
}

.forge-theme-muted {
    color: var(--forge-text-muted) !important;
}

.forge-theme-border {
    border-color: var(--forge-card-border) !important;
}

html.app-skin-dark body {
    background-color: var(--forge-page-bg);
    color: var(--forge-text-soft);
}

html.app-skin-dark .card,
html.app-skin-dark .modal-content,
html.app-skin-dark .dropdown-menu,
html.app-skin-dark .list-group-item {
    background-color: var(--forge-card-bg);
    border-color: var(--forge-card-border);
    color: var(--forge-text-soft);
}

html.app-skin-dark .card-header,
html.app-skin-dark .card-footer,
html.app-skin-dark .modal-header,
html.app-skin-dark .modal-footer {
    background-color: var(--forge-card-bg);
    border-color: var(--forge-card-border);
    color: var(--forge-text);
}

html.app-skin-dark .dropdown-item,
html.app-skin-dark .card-title,
html.app-skin-dark .modal-title,
html.app-skin-dark .text-dark,
html.app-skin-dark .fw-semibold.text-dark {
    color: var(--forge-text) !important;
}

html.app-skin-dark .dropdown-item:hover,
html.app-skin-dark .dropdown-item:focus {
    background-color: var(--forge-hover-bg);
    color: var(--forge-text) !important;
}

html.app-skin-dark .text-muted,
html.app-skin-dark .form-text {
    color: var(--forge-text-muted) !important;
}

html.app-skin-dark .form-control,
html.app-skin-dark .form-select,
html.app-skin-dark .input-group-text,
html.app-skin-dark .dataTables_wrapper .dataTables_filter input,
html.app-skin-dark .dataTables_wrapper .dataTables_length select {
    background-color: var(--forge-input-bg);
    border-color: var(--forge-input-border);
    color: var(--forge-input-text);
}

html.app-skin-dark .form-control::placeholder {
    color: var(--forge-input-placeholder);
}

html.app-skin-dark .form-control:focus,
html.app-skin-dark .form-select:focus {
    background-color: var(--forge-input-bg);
    border-color: rgba(129, 140, 248, 0.55);
    color: var(--forge-input-text);
    box-shadow: 0 0 0 0.2rem rgba(52, 84, 209, 0.18);
}

html.app-skin-dark .form-select option {
    background-color: var(--forge-input-bg);
    color: var(--forge-input-text);
}

html.app-skin-dark .table {
    --bs-table-bg: var(--forge-table-bg);
    --bs-table-color: var(--forge-text-soft);
    --bs-table-border-color: var(--forge-table-border);
    --bs-table-hover-bg: var(--forge-hover-bg);
    --bs-table-hover-color: var(--forge-text);
    color: var(--forge-text-soft);
    border-color: var(--forge-table-border);
}

html.app-skin-dark .table > :not(caption) > * > * {
    background-color: transparent;
    border-color: var(--forge-table-border);
    color: inherit;
}

html.app-skin-dark table.dataTable thead th,
html.app-skin-dark table.dataTable thead td {
    background-color: var(--forge-table-header-bg);
    color: var(--forge-text);
    border-color: var(--forge-table-border);
}

html.app-skin-dark table.dataTable thead .datatable-filters th,
html.app-skin-dark table.dataTable thead .column-search th,
html.app-skin-dark table.dataTable thead .column-filter th {
    background-color: var(--forge-table-filter-bg);
}

html.app-skin-dark .dataTables_wrapper .dataTables_length,
html.app-skin-dark .dataTables_wrapper .dataTables_filter,
html.app-skin-dark .dataTables_wrapper .dataTables_info,
html.app-skin-dark .dataTables_wrapper .dataTables_paginate,
html.app-skin-dark .dataTables_wrapper .dataTables_empty {
    color: var(--forge-text-muted);
}

html.app-skin-dark .page-link {
    background-color: var(--forge-input-bg);
    border-color: var(--forge-input-border);
    color: var(--forge-text-soft);
}

html.app-skin-dark .page-link:hover,
html.app-skin-dark .page-link:focus {
    background-color: var(--forge-hover-bg);
    border-color: var(--forge-input-border);
    color: var(--forge-text);
}

html.app-skin-dark .page-item.active .page-link {
    background-color: var(--forge-accent);
    border-color: var(--forge-accent);
    color: #ffffff;
}

html.app-skin-dark .select2-container--default .select2-selection--single,
html.app-skin-dark .select2-container--default .select2-selection--multiple {
    background-color: var(--forge-input-bg);
    border-color: var(--forge-input-border);
    color: var(--forge-input-text);
}

html.app-skin-dark .select2-container--default .select2-selection--single .select2-selection__rendered,
html.app-skin-dark .select2-container--default .select2-selection--multiple .select2-selection__choice {
    color: var(--forge-input-text);
}

html.app-skin-dark .select2-dropdown,
html.app-skin-dark .select2-results__option {
    background-color: var(--forge-card-bg);
    color: var(--forge-input-text);
}

html.app-skin-dark .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--forge-accent);
    color: #ffffff;
}

html.app-skin-dark .project-workspace-shell,
html.app-skin-dark .project-module-card,
html.app-skin-dark .project-overview-list,
html.app-skin-dark .project-overview-progress,
html.app-skin-dark .project-overview-item,
html.app-skin-dark .project-overview-description,
html.app-skin-dark .project-reports-shell,
html.app-skin-dark .project-reports-section-card,
html.app-skin-dark .project-reports-task-summary-card,
html.app-skin-dark .project-reports-task-summary-unavailable,
html.app-skin-dark .task-list-card,
html.app-skin-dark .task-detail-hint,
html.app-skin-dark .notes-card,
html.app-skin-dark .note-preview-card,
html.app-skin-dark .tag-summary-card,
html.app-skin-dark .note-structure-panel,
html.app-skin-dark .note-structure-line,
html.app-skin-dark .note-view-shell,
html.app-skin-dark .note-path-line,
html.app-skin-dark .note-structure-card,
html.app-skin-dark .vault-entity-card,
html.app-skin-dark .vault-explorer-sidebar,
html.app-skin-dark .vault-explorer-main,
html.app-skin-dark .vault-explorer-toolbar,
html.app-skin-dark .vault-result-header,
html.app-skin-dark .vault-empty-state,
html.app-skin-dark .vault-folder-create,
html.app-skin-dark .vault-secret-form-shell,
html.app-skin-dark .vault-secret-view-shell,
html.app-skin-dark .vault-secret-detail-card,
html.app-skin-dark .project-notes-table-shell,
html.app-skin-dark .project-tasks-table-shell,
html.app-skin-dark .task-view-shell,
html.app-skin-dark .task-meta-card,
html.app-skin-dark .task-section-card,
html.app-skin-dark .task-description-card,
html.app-skin-dark .task-summary-item,
html.app-skin-dark .task-metadata-panel,
html.app-skin-dark .task-relationship-item,
html.app-skin-dark .task-relationship-context,
html.app-skin-dark .task-form-shell,
html.app-skin-dark .task-form-card-header,
html.app-skin-dark .task-relationship-card,
html.app-skin-dark .client-projects-shell,
html.app-skin-dark .client-workspace-card,
html.app-skin-dark .client-module-card {
    background: var(--forge-card-bg);
    border-color: var(--forge-card-border);
    color: var(--forge-text-soft);
    box-shadow: var(--forge-card-shadow);
}

html.app-skin-dark .project-status-breakdown-card,
html.app-skin-dark .project-task-kanban-column,
html.app-skin-dark .project-task-kanban-empty,
html.app-skin-dark .project-task-kanban-column-empty,
html.app-skin-dark .project-task-kanban-status-toggle,
html.app-skin-dark .project-kanban-column,
html.app-skin-dark .project-kanban-card,
html.app-skin-dark .project-kanban-empty,
html.app-skin-dark .project-kanban-column-empty,
html.app-skin-dark .project-kanban-status-toggle,
html.app-skin-dark .task-relationship-empty,
html.app-skin-dark .forge-attachment-dropzone,
html.app-skin-dark .forge-attachment-preview,
html.app-skin-dark .forge-attachment-inspector-preview,
html.app-skin-dark .forge-project-visual,
html.app-skin-dark .project-visual-choice-panel {
    background: var(--forge-card-bg-soft);
    border-color: var(--forge-card-border);
    color: var(--forge-text-soft);
}

html.app-skin-dark .project-workspace-tab,
html.app-skin-dark .note-tree-toggle,
html.app-skin-dark .note-chip,
html.app-skin-dark .project-note-tag,
html.app-skin-dark .vault-tag-pill {
    background: var(--forge-card-bg-soft);
    border-color: var(--forge-card-border);
    color: var(--forge-text);
}

html.app-skin-dark .project-workspace-tab.active,
html.app-skin-dark .note-chip.active {
    background: var(--forge-accent);
    border-color: var(--forge-accent);
    color: #ffffff;
}

html.app-skin-dark .project-task-kanban-column-header {
    background: rgba(18, 26, 45, 0.96);
    border-color: var(--forge-card-border);
}

html.app-skin-dark .project-kanban-column-header {
    background: rgba(18, 26, 45, 0.96);
    border-color: var(--forge-card-border);
}

html.app-skin-dark .project-action-btn,
html.app-skin-dark .project-action-btn.primary,
html.app-skin-dark .project-action-btn.secondary,
html.app-skin-dark .project-action-btn.subtle,
html.app-skin-dark .project-actions-group .project-action-btn.small.subtle {
    background: var(--forge-card-bg);
    border-color: var(--forge-card-border);
    color: var(--forge-text);
}

html.app-skin-dark .project-action-btn:hover,
html.app-skin-dark .project-action-btn:focus {
    background: var(--forge-hover-bg);
    color: var(--forge-text);
}

html.app-skin-dark .project-action-btn small,
html.app-skin-dark .client-module-status,
html.app-skin-dark .client-module-helper,
html.app-skin-dark .project-actions-text,
html.app-skin-dark .project-actions-group-label,
html.app-skin-dark .project-overview-empty,
html.app-skin-dark .project-task-kanban-summary,
html.app-skin-dark .project-kanban-summary,
html.app-skin-dark .project-kanban-meta,
html.app-skin-dark .note-tree-meta,
html.app-skin-dark .note-tree-summary,
html.app-skin-dark .notes-quick-create-help,
html.app-skin-dark .table-meta-line,
html.app-skin-dark .table-meta-label,
html.app-skin-dark .table-timeline,
html.app-skin-dark .vault-entity-meta,
html.app-skin-dark .project-description-preview,
html.app-skin-dark .forge-attachment-meta,
html.app-skin-dark .forge-attachment-detail-label {
    color: var(--forge-text-muted);
}

html.app-skin-dark .project-actions-title,
html.app-skin-dark .client-module-card h5,
html.app-skin-dark .table-primary-link,
html.app-skin-dark .table-meta-line a,
html.app-skin-dark .forge-user-link,
html.app-skin-dark .note-tree-button,
html.app-skin-dark .note-tree-title,
html.app-skin-dark .note-child-link,
html.app-skin-dark .note-related-task-link,
html.app-skin-dark .note-view-content,
html.app-skin-dark .note-view-content blockquote,
html.app-skin-dark .task-rich-text,
html.app-skin-dark .task-rich-text *:not(a),
html.app-skin-dark .task-timeline-item strong,
html.app-skin-dark .workspace-meta-value,
html.app-skin-dark .forge-attachment-name,
html.app-skin-dark .forge-attachment-detail-value {
    color: var(--forge-text) !important;
}

html.app-skin-dark .client-next-step {
    background: rgba(14, 165, 233, 0.12);
    border-color: rgba(125, 211, 252, 0.22);
}

html.app-skin-dark .client-next-step-label,
html.app-skin-dark .client-module-icon {
    color: #7dd3fc;
}

html.app-skin-dark .client-next-step-body {
    color: var(--forge-text-soft);
}

html.app-skin-dark .client-module-icon {
    background: rgba(14, 165, 233, 0.16);
}

/* Forge-owned sidebar behavior overrides. Keep these after NobleUI theme CSS. */
.nxl-navigation .nxl-submenu.forge-submenu-open {
    display: block;
}

.nxl-navigation .nxl-link {
    min-width: 0;
}

.forge-sidebar-rail-actions {
    display: none;
}

.forge-mobile-nav-close,
.forge-mobile-nav-context {
    display: none;
}

html.minimenu .nxl-navigation {
    width: 76px !important;
    box-shadow: 8px 0 24px rgba(15, 23, 42, 0.05);
}

html.minimenu .nxl-header {
    left: 76px !important;
    width: calc(100% - 76px);
}

html.minimenu .nxl-container {
    margin-left: 76px !important;
}

html.minimenu .page-header {
    left: 76px !important;
}

html.minimenu .nxl-navigation .navbar-wrapper,
html.minimenu .nxl-navigation .navbar-content,
html.minimenu .nxl-navigation .nxl-navbar {
    width: 76px !important;
    overflow-x: hidden;
}

html.minimenu .nxl-navigation .navbar-content {
    padding-top: 6px;
}

html.minimenu .nxl-navigation .m-header {
    width: 76px !important;
    height: 64px;
    min-height: 64px;
    padding: 12px 0 4px !important;
    justify-content: center;
}

html.minimenu .nxl-navigation .m-header .b-brand {
    width: 44px;
    height: 44px;
    justify-content: center;
    border-radius: 14px;
}

html.minimenu .nxl-navigation .logo-lg {
    display: none !important;
}

html.minimenu .nxl-navigation .logo-sm {
    display: inline-block !important;
    max-width: 34px;
    max-height: 34px;
}

html.minimenu .forge-sidebar-rail-actions {
    display: flex;
    width: 76px;
    justify-content: center;
    padding: 2px 0 8px;
}

.forge-sidebar-rail-expand {
    display: none;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--forge-card-border);
    border-radius: 13px;
    background: var(--forge-card-bg-soft);
    color: var(--forge-text-soft);
    align-items: center;
    justify-content: center;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}

html.minimenu .forge-sidebar-rail-expand {
    display: inline-flex;
}

.forge-sidebar-rail-expand:hover,
.forge-sidebar-rail-expand:focus {
    background: var(--forge-accent-soft);
    border-color: rgba(52, 84, 209, 0.26);
    color: var(--forge-accent);
    transform: translateX(1px);
}

html.minimenu .nxl-navigation .nxl-caption,
html.minimenu .nxl-navigation .nxl-mtext,
html.minimenu .nxl-navigation .nxl-arrow,
html.minimenu .nxl-navigation .nxl-submenu {
    display: none !important;
}

html.minimenu .nxl-navigation .nxl-caption {
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

html.minimenu .nxl-navigation .nxl-item {
    width: 76px !important;
    margin: 0 !important;
    padding: 0 !important;
}

html.minimenu .nxl-navigation .nxl-item > .nxl-link {
    position: relative;
    width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    margin: 3px auto !important;
    border-radius: 14px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 0;
    overflow: hidden;
    white-space: nowrap;
    color: var(--forge-text-muted);
}

html.minimenu .nxl-navigation .nxl-item > .nxl-link:hover,
html.minimenu .nxl-navigation .nxl-item > .nxl-link:focus {
    background: var(--forge-hover-bg);
    color: var(--forge-text);
}

html.minimenu .nxl-navigation .nxl-micon {
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

html.minimenu .nxl-navigation .nxl-micon i {
    margin: 0 !important;
    font-size: 1.08rem;
}

html.minimenu .nxl-navigation .nxl-item.active > .nxl-link,
html.minimenu .nxl-navigation .nxl-item.nxl-trigger > .nxl-link,
html.minimenu .nxl-navigation .nxl-item.forge-flyout-open > .nxl-link {
    background: rgba(52, 84, 209, 0.12);
    color: #3454d1;
}

html.minimenu .nxl-navigation .nxl-item.active > .nxl-link::before,
html.minimenu .nxl-navigation .nxl-item.nxl-trigger > .nxl-link::before {
    content: "";
    position: absolute;
    left: 0;
    top: 11px;
    width: 3px;
    height: 22px;
    border-radius: 0 999px 999px 0;
    background: currentColor;
}

html.minimenu .nxl-navigation .nxl-item.active > .nxl-link::after,
html.minimenu .nxl-navigation .nxl-item.nxl-trigger > .nxl-link::after {
    display: none !important;
}

.forge-sidebar-flyout {
    position: fixed;
    z-index: 1080;
    width: 238px;
    max-width: calc(100vw - 96px);
    padding: 10px;
    border: 1px solid var(--forge-card-border);
    border-radius: 8px;
    background: var(--forge-card-bg);
    color: var(--forge-text-soft);
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.16);
}

.forge-sidebar-flyout-title {
    padding: 6px 8px 10px;
    color: var(--forge-text);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
}

.forge-sidebar-flyout-list {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.forge-sidebar-flyout-link {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 34px;
    padding: 8px 9px;
    border-radius: 7px;
    color: var(--forge-text-soft);
    font-size: 13px;
    font-weight: 600;
}

.forge-sidebar-flyout-link:hover,
.forge-sidebar-flyout-link:focus,
.forge-sidebar-flyout-link.active {
    background: var(--forge-accent-soft);
    color: var(--forge-accent);
}

.forge-sidebar-flyout-link i {
    width: 16px;
    min-width: 16px;
    text-align: center;
}

#menu-mini-button,
#menu-expend-button,
#mobile-collapse {
    cursor: pointer;
}

.forge-sidebar-overlay {
    display: none;
}

@media (max-width: 1024px) {
    html,
    body {
        overflow-x: hidden;
    }

    html.minimenu .nxl-header,
    html.minimenu .nxl-container,
    .nxl-header,
    .nxl-container {
        left: 0 !important;
        margin-left: 0 !important;
        width: 100% !important;
    }

    html.minimenu .page-header,
    .page-header {
        left: 0 !important;
    }

    .nxl-navigation {
        position: fixed !important;
        top: 0;
        bottom: auto;
        left: 0 !important;
        width: min(300px, calc(100vw - 3rem));
        max-width: 86vw;
        height: 100vh;
        height: 100dvh;
        overflow: hidden !important;
        z-index: 1060;
        border-radius: 0 22px 22px 0;
        box-shadow: none;
        pointer-events: auto;
        transform: translate3d(-105%, 0, 0);
        transition: transform 180ms cubic-bezier(.2, .8, .2, 1), box-shadow 180ms cubic-bezier(.2, .8, .2, 1);
        will-change: transform;
        backface-visibility: hidden;
    }

    .nxl-navigation .navbar-wrapper {
        display: flex;
        flex-direction: column;
        height: 100%;
        min-height: 0;
        overflow: hidden !important;
        border-radius: inherit;
    }

    .nxl-navigation .m-header {
        flex: 0 0 auto;
        position: sticky;
        top: 0;
        z-index: 2;
        width: 100%;
        min-height: 70px;
        padding-right: 14px;
        border-bottom: 1px solid rgba(148, 163, 184, 0.16);
    }

    .forge-mobile-nav-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        margin-left: auto;
        padding: 0;
        border: 1px solid var(--forge-card-border);
        border-radius: 14px;
        background: var(--forge-card-bg-soft);
        color: var(--forge-text-soft);
        transition: background-color .15s ease, color .15s ease, border-color .15s ease;
    }

    .forge-mobile-nav-close:hover,
    .forge-mobile-nav-close:focus {
        background: var(--forge-accent-soft);
        border-color: rgba(52, 84, 209, 0.26);
        color: var(--forge-accent);
    }

    .forge-mobile-nav-context {
        display: flex;
        flex: 0 0 auto;
        flex-direction: column;
        gap: 2px;
        padding: 12px 20px 10px;
        border-bottom: 1px solid rgba(148, 163, 184, 0.12);
    }

    .forge-mobile-nav-context span {
        color: var(--forge-text-muted);
        font-size: 11px;
        font-weight: 700;
        line-height: 1.2;
        text-transform: uppercase;
    }

    .forge-mobile-nav-context strong {
        color: var(--forge-text);
        font-size: 13px;
        font-weight: 700;
        line-height: 1.3;
        overflow-wrap: anywhere;
    }

    .nxl-navigation .navbar-content {
        flex: 1 1 auto;
        min-height: 0;
        height: auto !important;
        max-height: none !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior-y: contain;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
        padding: 10px 10px calc(1.5rem + env(safe-area-inset-bottom, 0px));
    }

    .nxl-navigation .nxl-navbar {
        min-height: 0 !important;
        height: auto !important;
        overflow: visible !important;
        padding-bottom: 0;
    }

    .nxl-navigation.mob-navigation-active {
        transform: translate3d(0, 0, 0);
        box-shadow: 8px 0 28px rgba(15, 23, 42, 0.20);
    }

    .nxl-navigation.mob-navigation-active .nxl-submenu.forge-submenu-open,
    .nxl-navigation.mob-navigation-active .nxl-item.nxl-trigger > .nxl-submenu {
        display: block;
    }

    .nxl-navigation .nxl-caption {
        margin: 14px 0 6px;
        padding: 0 10px;
    }

    .nxl-navigation .nxl-caption label {
        color: var(--forge-text-muted);
        font-size: 11px;
        letter-spacing: 0;
    }

    .nxl-navigation .nxl-item > .nxl-link {
        min-height: 44px;
        margin: 2px 0;
        border-radius: 12px;
        color: var(--forge-text-soft);
    }

    .nxl-navigation .nxl-item > .nxl-link .nxl-micon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .nxl-navigation .nxl-item > .nxl-link:hover,
    .nxl-navigation .nxl-item > .nxl-link:focus {
        background: var(--forge-hover-bg);
        color: var(--forge-text);
    }

    .nxl-navigation .nxl-item.active > .nxl-link,
    .nxl-navigation .nxl-item.nxl-trigger > .nxl-link {
        background: rgba(52, 84, 209, 0.12);
        color: #3454d1;
    }

    .nxl-navigation .nxl-item.active > .nxl-link {
        box-shadow: inset 3px 0 0 currentColor;
    }

    .nxl-navigation .nxl-submenu {
        padding: 2px 0 7px 15px;
    }

    .nxl-navigation .nxl-submenu .nxl-link {
        min-height: 40px;
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .forge-sidebar-overlay {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1050;
        width: 100vw;
        height: 100vh;
        padding: 0;
        border: 0;
        background: rgba(15, 23, 42, 0.36);
        cursor: default;
        touch-action: manipulation;
    }

    .forge-sidebar-overlay[hidden] {
        display: none !important;
    }

    html.forge-sidebar-mobile-open,
    body.forge-sidebar-mobile-open {
        overflow: hidden !important;
        overscroll-behavior: none;
    }

    .forge-sidebar-flyout {
        display: none !important;
    }
}

@media (min-width: 1024.02px) {
    html:not(.minimenu) .nxl-navigation .nxl-submenu.forge-submenu-open {
        display: block;
    }

    html:not(.minimenu) .forge-sidebar-overlay {
        display: none !important;
    }
}

html.app-skin-dark.minimenu .nxl-navigation .nxl-item.active > .nxl-link,
html.app-skin-dark.minimenu .nxl-navigation .nxl-item.nxl-trigger > .nxl-link,
html.app-skin-dark.minimenu .nxl-navigation .nxl-item.forge-flyout-open > .nxl-link {
    background: rgba(96, 165, 250, 0.18);
    color: #bfdbfe;
}

html.app-skin-dark .forge-sidebar-rail-expand {
    border-color: var(--forge-card-border);
    background: var(--forge-hover-bg);
    color: var(--forge-text-soft);
}

html.app-skin-dark .forge-sidebar-rail-expand:hover,
html.app-skin-dark .forge-sidebar-rail-expand:focus {
    background: rgba(96, 165, 250, 0.18);
    border-color: rgba(147, 197, 253, 0.34);
    color: #bfdbfe;
}

html.app-skin-dark .forge-mobile-nav-close {
    background: var(--forge-hover-bg);
    border-color: var(--forge-card-border);
    color: var(--forge-text-soft);
}

html.app-skin-dark .forge-mobile-nav-close:hover,
html.app-skin-dark .forge-mobile-nav-close:focus {
    background: rgba(96, 165, 250, 0.18);
    border-color: rgba(147, 197, 253, 0.34);
    color: #bfdbfe;
}

@media (max-width: 1024px) {
    html.app-skin-dark .nxl-navigation .nxl-item.active > .nxl-link,
    html.app-skin-dark .nxl-navigation .nxl-item.nxl-trigger > .nxl-link {
        background: rgba(96, 165, 250, 0.18);
        color: #bfdbfe;
    }
}

html.app-skin-dark .forge-sidebar-flyout {
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.38);
}

html.app-skin-dark .forge-sidebar-flyout-link:hover,
html.app-skin-dark .forge-sidebar-flyout-link:focus,
html.app-skin-dark .forge-sidebar-flyout-link.active {
    background: rgba(96, 165, 250, 0.18);
    color: #bfdbfe;
}

html.app-skin-dark .forge-sidebar-overlay {
    background: rgba(2, 6, 23, 0.64);
}

html.app-skin-dark .comment-body,
html.app-skin-dark .note-preview-content,
html.app-skin-dark .project-overview-description,
html.app-skin-dark .task-rich-text {
    color: var(--forge-text-soft);
}

html.app-skin-dark .comment-mention-menu,
html.app-skin-dark .comment-mention-option,
html.app-skin-dark .forge-attachment-card,
html.app-skin-dark .forge-attachment-inspector {
    background: var(--forge-card-bg);
    border-color: var(--forge-card-border);
    color: var(--forge-text-soft);
}

html.app-skin-dark .comment-mention-option {
    border-bottom-color: var(--forge-card-border);
}

html.app-skin-dark .comment-mention-option.active,
html.app-skin-dark .comment-mention-option:hover {
    background: var(--forge-hover-bg);
}

html.app-skin-dark .comment-mention-option-name {
    color: var(--forge-text);
}

html.app-skin-dark .comment-mention-option-role {
    color: var(--forge-text-muted);
}

html.app-skin-dark .forge-attachment-inspector-header,
html.app-skin-dark .forge-attachment-inspector-footer,
html.app-skin-dark .forge-attachment-card,
html.app-skin-dark .forge-attachment-preview,
html.app-skin-dark .forge-attachment-inspector-preview {
    border-color: var(--forge-card-border);
}

html.app-skin-dark .project-reports-row-count-badge {
    background: var(--forge-card-bg-soft);
    border-color: var(--forge-card-border);
    color: var(--forge-text);
}

/* =========================================================
   DESKTOP CONTEXTUAL TOPBAR ACTIONS
   Keep page-specific actions next to the sidebar toggle on desktop,
   while preserving the existing two-row mobile action rail behavior.
   ========================================================= */
@media (min-width: 768px) {
    .nxl-header .header-wrapper.forge-mobile-header-wrapper {
        display: flex !important;
        align-items: center;
        flex-wrap: nowrap;
        gap: 0.85rem;
    }

    .nxl-header .forge-mobile-primary-bar {
        display: contents !important;
    }

    .nxl-header .header-left {
        order: 1;
        flex: 0 0 auto;
    }

    .nxl-header .forge-mobile-action-rail {
        order: 2;
        flex: 0 1 auto;
        width: auto;
        min-width: 0;
        max-width: min(58vw, 860px);
        margin: 0 auto 0 0;
        overflow: hidden;
    }

    .nxl-header .forge-mobile-action-rail .forge-topbar-actions {
        justify-content: flex-start;
        width: auto;
        max-width: 100%;
        padding: 0;
    }

    .nxl-header .header-right {
        order: 3;
        flex: 0 0 auto;
        margin-left: auto !important;
    }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
    .nxl-header .forge-mobile-action-rail {
        max-width: min(48vw, 620px);
    }
}

/* =========================================================
   COMPACT MAIN CONTENT SPACING
   Reduce default shell padding so cards and tables sit closer
   to the page edges without touching full-content layouts.
   ========================================================= */
.nxl-container .nxl-content:not(.nxl-full-content) .main-content {
    padding: 5px 5px 5px;
}
