.report-item.dragging {
    opacity: 0.6;
    box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.35);
    cursor: grabbing;
}

/* Z-index scale: navbar 9999 | filters waiter 10000 | edit-modal 10010 (legacy fullscreen) | MapCat centre 10100 | #confirmation-modal 90000 (JS) | tooltip over confirm 90100 */

/* Global status column: busy + bookmark + Project Details — structure lives in index.html; JS only toggles visibility/state. */
.app-global-status-shell {
    position: fixed;
    top: 120px;
    left: 50%;
    transform: translateX(-50%) translateY(0);
    /* One width for busy + bookmark + Project Details so dismissing a block doesn’t shrink the column. */
    width: min(920px, 98vw);
    box-sizing: border-box;
    max-height: 80vh;
    overflow-y: auto;
    background-color: rgba(255, 255, 255, 0.97);
    border: 1px solid #dee2e6;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 10000;
    transition: opacity 0.78s ease, transform 0.78s ease, visibility 0s linear 0.78s;
}
.app-global-status-shell.app-status-shell--open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
    transition: opacity 0.78s ease, transform 0.78s ease, visibility 0s linear 0s;
}
.app-global-status-shell.app-status-shell--closed {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-50%) translateY(-14px);
}
#app-status-inner,
.app-status-inner-stack {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    box-sizing: border-box;
    gap: 0.5rem;
}
/* Busy / bookmark / modal each own a bordered band so Project Details doesn’t read as continuation of the spinner. */
.app-status-segment {
    width: 100%;
    max-width: 100%;
    flex: 0 0 auto;
    align-self: stretch;
    box-sizing: border-box;
}
.app-status-busy-panel {
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 0.375rem;
    overflow: hidden;
    background-color: rgba(248, 249, 250, 0.92);
}
#app-status-info-card {
    width: 100%;
    box-sizing: border-box;
}
/* Busy / bookmark strips: smooth height + fade (no display toggles in JS). */
#app-status-busy-core.app-status-reveal:not(.app-status-reveal--on),
#app-status-info-section.app-status-reveal:not(.app-status-reveal--on) {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    margin: 0 !important;
    padding: 0 !important;
    border-width: 0 !important;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-10px);
    transition: max-height 0.88s ease, opacity 0.68s ease, transform 0.68s ease, margin 0.68s ease, padding 0.68s ease, border-width 0.62s ease, visibility 0s linear 0.75s;
}
#app-status-busy-core.app-status-reveal.app-status-reveal--on,
#app-status-info-section.app-status-reveal.app-status-reveal--on {
    max-height: 2400px;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition: max-height 0.92s ease, opacity 0.72s ease, transform 0.72s ease, margin 0.72s ease, padding 0.72s ease, border-width 0.65s ease, visibility 0s linear 0s;
}
.app-status-info-body-fill {
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    background-color: color-mix(in srgb, var(--color-yellow) 30%, white);
}

/* Project Details sits inside the shell (no separate fullscreen modal/backdrop). */
#pipeline-busy-indicator #edit-project-modal {
    position: static;
    z-index: auto !important;
    padding: 0 !important;
    /* Docked modal: match shell pacing */
    --bs-modal-transition: transform 0.78s ease-out, opacity 0.78s ease-out;
}
#pipeline-busy-indicator #edit-project-modal .modal-dialog {
    position: relative;
    transform: none !important;
    margin: 0;
    max-width: none;
    width: 100%;
}
#pipeline-busy-indicator #edit-project-modal .modal-content {
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 0.375rem;
    box-sizing: border-box;
    max-height: min(75vh, 720px);
    overflow-y: auto;
}
#pipeline-busy-indicator:has(#edit-project-modal.show) {
    max-height: 90vh;
}
.report-item.drag-over-before::before,
.report-item.drag-over-after::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 3px;
    background: #34d399;
}

.report-item.drag-over-before::before {
    top: -1px;
}

.report-item.drag-over-after::after {
    bottom: -1px;
}

.left-content.report-mode #report-left-panel {
    display: block !important;
}

.left-content.report-mode>*:not(#emptyAccordion):not(#report-left-panel) {
    opacity: 0.45;
    pointer-events: none;
    filter: grayscale(25%);
}

.left-content.report-mode #sourcesHeader,
.left-content.report-mode #source-preloader-container,
.left-content.report-mode #source-preloader-backdrop {}

.report-accordion {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.report-item {
    border: 1px solid rgba(31, 31, 54, 0.08);
    border-radius: 0.75rem;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    box-shadow: 0 4px 12px rgba(17, 24, 39, 0.08);
    transition: box-shadow 180ms ease, transform 180ms ease;
}

.report-item:hover {
    box-shadow: 0 8px 18px rgba(17, 24, 39, 0.12);
    transform: translateY(-2px);
}

.report-item.dragging {
    opacity: 0.6;
    box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.35);
}

.report-item-header {
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    gap: 0.85rem;
    padding: 0.9rem 1.1rem;
    border-bottom: 1px solid rgba(31, 31, 54, 0.08);
    cursor: pointer;
    align-items: center;
}

.report-item-header button {
    cursor: pointer;
}

.report-item-drag {
    cursor: grab;
    color: #9aa0ac;
    font-size: 1.1rem;
}

/* Wrapper for bookmark images with ID overlay - prevents parent overflow from clipping */
.bookmark-image-wrapper {
    position: relative;
    display: inline-block;
    overflow: visible;
}

/* Small bookmark ID overlay on thumbnail images (bottom-right) */
.bookmark-id-overlay {
    position: absolute;
    bottom: 2px;
    right: 2px;
    font-size: 10px;
    font-weight: 600;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    padding: 1px 4px;
    border-radius: 2px;
    pointer-events: none;
    z-index: 10;
}

.report-item-thumbnail {
    width: 70px;
    height: 55px;
    object-fit: cover;
    border-radius: 0.35rem;
    border: 1px solid rgba(31, 31, 54, 0.08);
    background: linear-gradient(135deg, #eef2ff, #e0f2f1);
}

.report-item-info {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.report-item-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0;
    color: #1f1f36;
    outline: none;
    min-height: 1.25rem;
}

.report-title-prefix {
    color: #9ca3af;
    font-weight: 600;
    margin-right: 0.4rem;
}

.report-item-title-inline {
    font-size: 0.95rem;
    color: #475569;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.report-item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    font-size: 0.85rem;
    color: #6c757d;
}

.report-item-controls {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.report-item-body {
    display: none;
    padding: 1.1rem 1.1rem 1.2rem;
    background: #ffffff;
    border-bottom-left-radius: 0.75rem;
    border-bottom-right-radius: 0.75rem;
}

.report-item.expanded .report-item-body {
    display: block;
}

.report-item-toggle {
    border: none;
    background: transparent;
    color: #838aa3;
    padding: 0.25rem;
    font-size: 0.95rem;
}

.report-item.expanded .report-item-toggle i {
    transform: rotate(180deg);
}

.report-item img.report-item-full {
    width: 100%;
    height: auto;
    border-radius: 0.35rem;
    border: 1px solid rgba(31, 31, 54, 0.08);
    background: radial-gradient(circle at top, #f3f4ff 0%, #ffffff 60%);
}

.report-item-full {
    margin-top: 1rem;
}

.report-item-legend {
    margin-top: 0.75rem;
    font-size: 0.9rem;
    white-space: pre-wrap;
    background: linear-gradient(135deg, #f8fafc 0%, #eef2f7 100%);
    border-radius: 0.35rem;
    padding: 0.75rem;
    border: 1px solid rgba(31, 31, 54, 0.06);
    color: #475569;
}

.report-variant-controls {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.report-variant-controls select,
.report-variant-controls .selectize-control {
    min-width: 200px;
}

.report-variant-controls .selectize-control {
    margin-bottom: 0;
}

.report-variant-controls .selectize-input {
    padding: 0.35rem 0.5rem;
}

.report-variant-controls .btn-group label {
    cursor: pointer;
}

/* Keep modal action buttons visible on small screens */
.modal-content-viewport {
    max-height: calc(100vh - 2rem);
    /* never taller than viewport */
}

.modal-content-viewport .modal-body {
    overflow-y: auto;
    /* scroll long content inside modal */
}

/* Modal busy overlay: covers content while async apply/delete runs */
.modal-busy-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.85);
    z-index: 10;
    pointer-events: auto;
}

.modal-footer.modal-footer-sticky {
    position: sticky;
    /* keep footer buttons visible while body scrolls */
    bottom: 0;
    background: var(--bs-modal-bg, #fff);
    z-index: 2;
}

/* Links Bulk Tags editor: show citation counts without changing editor text */
#links-bulk-tags-ace .ace_line[data-cm-citations]::after {
    content: " (" attr(data-cm-citations) ")";
    color: #6c757d;
    opacity: 0.75;
    pointer-events: none;
}

/* Bookmark edit modal: fixed height, scroll body, footer always visible (like project-modal) */
#bookmark-edit-modal .modal-dialog {
    position: fixed;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    max-height: calc(100vh - 80px);
    height: auto;
}

#bookmark-edit-modal .modal-content {
    height: calc(100vh - 80px);
    display: flex;
    flex-direction: column;
}

#bookmark-edit-modal .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

#bookmark-edit-modal .modal-footer {
    flex-shrink: 0;
}

.report-item-description {
    font-size: 1.05rem;
    font-weight: 500;
    color: #1f1f36;
}

.report-item-title-editor {
    margin-top: 0.4rem;
}

.report-title-hint {
    margin-top: 0.15rem;
}

.report-item-description h1,
.report-item-description h2,
.report-item-description h3 {
    font-weight: 600;
    margin-bottom: 0.35rem;
}

.report-item-description p {
    margin-bottom: 0.35rem;
}

.report-item-description ul,
.report-item-description ol {
    padding-left: 1.4rem;
    margin-bottom: 0.4rem;
}

.report-filter-group .form-control {
    min-width: 200px;
}

.report-variant-summary {
    border-left: 3px solid rgba(76, 175, 80, 0.35);
    background: rgba(76, 175, 80, 0.06);
    padding: 0.6rem 0.75rem;
    border-radius: 0.5rem;
    color: #1f2937;
}

.report-variant-title {
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.report-variant-values {
    font-size: 0.9rem;
    color: #374151;
}

.report-slide-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.report-slide-id {
    background: rgba(31, 31, 54, 0.08);
    color: #1f1f36;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.85rem;
}

/* Soft Relabel hint visibility (CSS-only, no JS): fade in when any NEW cell is focused */
.softRelabelWrap .softRelabelHint {
    opacity: 0;
    transition: opacity 160ms ease;
    height: 16px;
    line-height: 16px;
    pointer-events: none;
    color: #6c757d;
    font-size: 11px;
}

.softRelabelWrap:focus-within .softRelabelHint {
    opacity: 0.66;
}

/* File menu: section headers and pill cards (single column, compact) */
.file-menu-wide .dropdown-section {
    list-style: none;
}
.file-menu-wide .dropdown-section-header {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--bs-secondary);
    padding: 0.35rem 0.5rem 0.15rem;
}
.file-menu-wide .dropdown-section-pills {
    padding-top: 0;
}
.file-menu-wide .dropdown-pill-card {
    display: flex !important;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.5rem;
    padding: 0.35rem 0.5rem;
    border-radius: 0.35rem;
    border: 1px solid var(--bs-border-color);
    background: var(--bs-body-bg);
    color: inherit;
    text-decoration: none;
    text-align: left;
    font-size: 0.875rem;
    transition: background-color 0.15s, border-color 0.15s;
    cursor: pointer;
}
.file-menu-wide .dropdown-pill-card:hover {
    background: var(--bs-light);
    border-color: var(--bs-primary);
}
/* Icon column: span wrapper is the fixed-width flex item */
.file-menu-wide .dropdown-pill-card > .pill-icon,
.file-menu-wide .dropdown-pill-card > .icon-green-bg {
    flex: 0 0 1.5rem;
    width: 1.5rem;
    text-align: center;
    font-size: 0.85rem;
    align-self: center;
}
.file-menu-wide .dropdown-pill-card > div {
    flex: 1 1 auto;
    min-width: 0;
}
.file-menu-wide .dropdown-pill-card .icon-green-bg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 0.2rem;
    background: var(--bs-success);
    color: white;
    font-size: 0.65rem;
}
.file-menu-wide .dropdown-pill-card small {
    display: block;
    font-size: 0.7rem;
    margin-top: 0.05rem;
}

/* File menu Help footer */
.file-menu-wide .file-menu-help {
    padding: 0.35rem 0.5rem;
}
.file-menu-wide .file-menu-help .contextual-help-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.5rem;
    font-size: 0.8rem;
    border-radius: 0.5rem;
    background: rgba(13, 110, 253, 0.08);
    border: 1px solid rgba(13, 110, 253, 0.2);
    color: var(--bs-info);
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s;
}
.file-menu-wide .file-menu-help .contextual-help-btn:hover {
    background: rgba(13, 110, 253, 0.15);
    border-color: var(--bs-info);
    color: var(--bs-info);
}
.file-menu-wide .file-menu-help .contextual-help-btn i {
    font-size: 0.9rem;
}

/* Widen the project actions dropdown */
.file-menu-wide {
    min-width: 320px !important;
    /* ensure overall menu width */
    max-height: calc(80vh - 60px) !important;
    /* limit height to viewport minus navbar */
    overflow-y: auto !important;
    /* enable scrolling when content exceeds max-height */
    margin-top: 8px !important;
    /* gap from button to prevent navbar overlap */
    z-index: 10000 !important;
    /* above navbar (9999) */
}

/* Sources table: widen ID column to fit ~13 chars */
#sources-table-container .tabulator-col[tabulator-field="id"],
#sources-table-container .tabulator-cell[tabulator-field="id"] {
    min-width: 150px;
    /* ~13ch + padding; Tabulator uses px */
    width: 150px;
}

/* Allow multiline text in dropdown items (override Bootstrap nowrap) */
.dropdown-menu .dropdown-item {
    white-space: normal;
    /* enable wrapping of long descriptions */
}

/* Prevent dropdown menus from extending beyond viewport */
.dropdown-menu {
    max-height: calc(80vh - 60px) !important;
    /* account for navbar height */
    overflow-y: auto !important;
    z-index: 10000 !important;
    /* above navbar (9999) */
    /* Constrain dropdown positioning to stay below navbar */
    top: max(var(--bs-dropdown-top, 0), 60px) !important;
}

/* Factor label set: native input + datalist (no selectize in this control) */
.factor-label-set-row-outer {
    display: inline-flex;
    align-items: center;
    line-height: 1.2;
}
/* Toolbar layout: label set sits under sources bar, flush right */
.factor-label-set-below-sources {
    width: 100%;
    padding-top: 0;
}
/* More than default + one alternate: draw attention (shared-row semantics) */
.factor-label-set-below-sources.factor-label-set-below-sources--multi {
    padding: 0.2rem 0.5rem;
    margin: 0.1rem 0 0;
    border-radius: 0.35rem;
    background: linear-gradient(90deg, rgba(13, 110, 253, 0.1), rgba(25, 135, 84, 0.09));
    border: 1px solid rgba(13, 110, 253, 0.18);
}
.factor-label-set-below-sources .factor-label-set-panel {
    left: auto;
    right: 0;
}
.factor-label-set-anchor {
    position: relative;
    display: inline-block;
}
.factor-label-set-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    color: inherit;
    cursor: pointer;
    text-decoration: none;
}
.factor-label-set-trigger:hover {
    text-decoration: underline;
}
.factor-label-set-panel {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    z-index: 10050;
    min-width: min(300px, 92vw);
    padding: 6px 8px;
    background: var(--color-bg-white, #fff);
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 6px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.1);
}
.factor-label-set-panel-inner {
    display: flex;
    align-items: stretch;
    gap: 6px;
    flex-wrap: nowrap;
}
.factor-label-set-select-wrap {
    flex: 1 1 auto;
    min-width: 0;
    width: min(100%, 280px);
    display: flex;
    flex-direction: column;
    gap: 0;
}
/* Scrollable list in document flow (hint stays below) */
.factor-label-set-suggestions {
    margin-top: 4px;
    max-height: 200px;
    overflow-y: auto;
    background: var(--color-bg-white, #fff);
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 6px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}
.factor-label-set-suggestions-row {
    display: flex;
    align-items: stretch;
    gap: 2px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.factor-label-set-suggestions-row:last-child {
    border-bottom: none;
}
.factor-label-set-suggestions-item {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 6px 8px;
    border: none;
    background: none;
    text-align: left;
    font-size: 0.8125rem;
    cursor: pointer;
    color: var(--color-text-primary, #212529);
}
.factor-label-set-suggestions-item:hover,
.factor-label-set-suggestions-item:focus {
    background: rgba(13, 110, 253, 0.08);
    outline: none;
}
.factor-label-set-suggestions-delete {
    flex-shrink: 0;
    width: 1.75rem;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--color-text-muted, #6c757d);
    font-size: 0.75rem;
    cursor: pointer;
    opacity: 0.65;
    align-self: stretch;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.factor-label-set-suggestions-delete:hover,
.factor-label-set-suggestions-delete:focus {
    color: #b02a37;
    opacity: 1;
    outline: none;
}
.factor-label-set-suggestions-empty {
    padding: 8px 10px;
    font-size: 0.75rem;
    color: var(--color-text-muted, #6c757d);
}
.factor-label-set-hint {
    font-size: 0.7rem;
    color: var(--color-text-muted, #6c757d);
    margin-top: 5px;
    line-height: 1.3;
}
.factor-label-set-hint kbd {
    font-size: 0.65rem;
    padding: 0 0.25em;
    border: 1px solid rgba(0, 0, 0, 0.18);
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.04);
    font-family: inherit;
}
.factor-label-set-overflow-wrap {
    position: relative;
    flex-shrink: 0;
}
.factor-label-set-overflow-btn {
    padding: 0 5px;
    margin: 0;
    border: 1px solid rgba(0, 0, 0, 0.15);
    background: var(--color-bg-white, #fff);
    border-radius: 4px;
    cursor: pointer;
    line-height: 1.35;
    font-size: 0.75rem;
    color: var(--color-text-secondary, #555);
}
.factor-label-set-overflow-btn:hover {
    background: rgba(0, 0, 0, 0.04);
}
.factor-label-set-overflow-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    min-width: 11rem;
    padding: 4px 0;
    background: var(--color-bg-white, #fff);
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 6px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
    z-index: 10060;
}
.factor-label-set-overflow-menu-item {
    display: block;
    width: 100%;
    margin: 0;
    padding: 6px 10px;
    border: none;
    background: none;
    text-align: left;
    font-size: 0.8125rem;
    cursor: pointer;
    color: var(--color-text-primary, #212529);
}
.factor-label-set-overflow-menu-item:hover {
    background: rgba(0, 0, 0, 0.05);
}
.factor-label-set-panel .factor-label-set-help-btn {
    flex-shrink: 0;
    margin: 0;
    padding: 0 0.2rem;
    border: none;
    background: none;
    color: var(--color-text-muted, #6c757d);
    font-size: 0.85rem;
    line-height: 1;
    cursor: pointer;
    align-self: center;
}
.factor-label-set-panel .factor-label-set-help-btn:hover {
    color: var(--color-text-primary, #212529);
}
.factor-label-set-inline-value.factor-label-set-inline-value--nondefault {
    display: inline-block;
    font-weight: 650;
    color: var(--bs-body-color);
    border-radius: 0.3rem;
    padding: 0.05rem 0.35rem;
    background: linear-gradient(180deg, rgba(255, 193, 7, 0.45), rgba(255, 152, 0, 0.35));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 1px 2px rgba(0, 0, 0, 0.12);
    border: 1px solid rgba(200, 130, 0, 0.4);
}

/* ===== Unified Filter Header Controls ===== */
.filter-header-compact {
    display: flex;
    align-items: center;
}

.filter-header-compact .header-controls {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

.filter-header-compact .header-controls .form-check.form-switch {
    margin: 0;
    padding: 0;
    height: 28px;
    /* match btn-sm height */
    display: flex;
    align-items: center;
}

.filter-header-compact .header-controls .form-check-input {
    margin: 0;
    position: static;
    /* avoid odd vertical offset */
    transform: translateY(0);
}

.node-action-modal,
.link-chooser-modal {
    z-index: 99999;
}

/* CausalMap Web App Styles */

/* =============================================================================
   Base Font Sizing - Smaller Overall Size
   ============================================================================= */

html {
    font-size: 14px;
    /* Reduced from browser default 16px */
}

body {
    font-size: 0.875rem;
    /* 14px equivalent */
    line-height: 1.4;
    /* Slightly tighter line height */
    color: var(--color-text-primary);
}

#navBrand {
    /* font-size: x-large; */
}

.container-fluid {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.navbar,
#main-app {
    padding-left: 10px !important;
    padding-right: 10px !important;
}

.navbar {
    box-shadow: 3px 3px 10px 5px rgba(0, 0, 0, 0.1) !important;
    z-index: 9999 !important;
    /* background-color: var(--color-border) !important; 
    margin-left:0 !important;
    padding-left:0 !important;
    color: var(--color-white) !important; */
}

/* =============================
   Navbar: unify height/alignment
   ============================= */
.navbar .navbar-nav {
    align-items: center;
    /* vertically align all navbar widgets on the same line */
    gap: 8px;
    /* consistent spacing between items */
}

/* Neutralize ad-hoc margins (e.g., me-2/me-3) for consistent spacing */
.navbar .navbar-nav>* {
    margin: 0 !important;
}

/* Fixed control height for consistency across buttons/links/badges */
.navbar .btn-sm,
.navbar .nav-link,
.navbar #public-project-warning-badge,
.navbar #private-expiry-warning-badge,
.navbar #subscription-badges {
    height: 28px;
    /* match brand icon height */
    display: inline-flex;
    /* center icon + text */
    align-items: center;
    padding-top: 0;
    /* avoid vertical drift */
    padding-bottom: 0;
}

/* Bottom-align smaller text blocks (gating badges) */
.navbar #subscription-badges {
    align-items: center;
    /* internal centering */
    align-self: center;
    /* keep aligned with other widgets */
    line-height: 1;
    /* reduce internal vertical slack */
}

/* Ensure our PUBLIC warning badge text sits visually centered like buttons/badges */
.navbar #public-project-warning-badge .badge,
.navbar #private-expiry-warning-badge .badge,
.navbar #subscription-badges .badge {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    height: 28px;
    box-sizing: border-box;
    padding-top: 0;
    padding-bottom: 0;
}

/* Make the entire badges area feel clickable */
.navbar #subscription-badges {
    cursor: pointer;
}

/* User email inside dropdown toggle */
#user-email {
    color: var(--color-text-secondary);
    font-weight: 500;
}


/* Make overall navbar spacing consistent, including left group */
.navbar .container-fluid {
    gap: 8px;
    /* unify spacing between brand, about, install, and right group */
}



/* Ensure dropdown toggles and outline variants follow the same sizing */
.navbar .dropdown-toggle.btn-sm {
    height: 28px;
}

/* Keep brand icon aligned with control height */
.navbar .navbar-brand img {
    height: 28px;
}

#main-app {
    margin-top: 8px;
}

/* =============================================================================
   Professional Color Palette - Subtle and Modern
   ============================================================================= */

:root {
    /* Our professional color palette */
    --color-pink: #e5b8b8;
    --color-text-primary: #518756;
    --color-green: #518756;
    --color-green-light: #00ffaf;
    /* unified green/blue */
    --color-yellow: #f7ed73;
    --color-orange: #ddc666;
    --color-purple: #1f1f36;
    --color-text-secondary: #1f1f36;
    --color-blue: #518756;
    /* unified */
    --color-lightblue: #76f7ff;
    /* unified */
    --sources-colour: rgba(50, 90, 180, 0.3);
    --projects-colour: rgba(81, 135, 86, 0.5);

    /* Subtle background variants */
    --color-purple-light: rgba(31, 31, 54, 0.05);
    --color-purple-medium: rgba(31, 31, 54, 0.1);
    --color-purple-panel: rgba(31, 31, 54, 0.03);
    --color-text-primary-panel: rgba(81, 135, 86, 0.5);

    /* Professional neutrals */
    /* unified */
    --color-text-muted: #718096;
    --color-border: #e2e8f0;
    --color-border-hover: #cbd5e0;
    --color-bg-subtle: #f7fafc;
    --color-bg-white: #ffffff;

    /* Toggle/radio selected state - pale green fill, green text (used by btn-check, steps, zoom, match) */
    --toggle-selected-bg: rgba(81, 135, 86, 0.12);
    --toggle-selected-text: var(--color-green);

    --bs-nav-tabs-link-active-border-color: #518756 !important;

    /* Override Bootstrap CSS custom properties */
    --bs-primary: var(--color-blue);
    --bs-primary-rgb: 81, 135, 86;
    /* unified */
    --bs-secondary: var(--color-text-secondary);
    --bs-secondary-rgb: 74, 85, 104;
    --bs-success: var(--color-green);
    --bs-success-rgb: 81, 135, 86;
    /* unified */
    --bs-info: var(--color-blue);
    --bs-info-rgb: 81, 135, 86;
    /* unified */
    --bs-warning: var(--color-yellow);
    --bs-warning-rgb: 247, 237, 115;
    --bs-danger: var(--color-pink);
    --bs-danger-rgb: 255, 143, 184;
    --bs-light: var(--color-bg-subtle);
    --bs-light-rgb: 247, 250, 252;
    --bs-dark: var(--color-text-primary);
    --bs-dark-rgb: 45, 55, 72;

    /* Help drawer "cusp" colours (match app tabs) */
    --help-cusp-default: #d7dde5;
    --help-cusp-outputs: #e5b8b8;
    /* pink */
}

/* Pulse animation for processing state */
.pulse-pink {
    animation: pulsePink 1s ease-in-out infinite;
}

@keyframes pulsePink {
    0% {
        background-color: rgba(229, 184, 184, 0.35);
    }

    50% {
        background-color: rgba(229, 184, 184, 0.8);
    }

    100% {
        background-color: rgba(229, 184, 184, 0.35);
    }
}

/* AI simple: Auto-code (muted blue-gray), Revise codebook (amber), Recode (teal) */
#ai-simple-process-btn.btn-ai-simple-autocode {
    background-color: #64748b !important;
    border-color: #64748b !important;
    color: #fff !important;
}
#ai-simple-process-btn.btn-ai-simple-autocode:hover {
    background-color: #475569 !important;
    border-color: #475569 !important;
    color: #fff !important;
}
#ai-simple-factor-suggest-btn.btn-ai-simple-revise {
    background-color: #ca8a04 !important;
    border-color: #ca8a04 !important;
    color: #fff !important;
}
#ai-simple-factor-suggest-btn.btn-ai-simple-revise:hover {
    background-color: #a16207 !important;
    border-color: #a16207 !important;
    color: #fff !important;
}
#ai-simple-factor-output-recode-btn.btn-ai-simple-recode {
    background-color: #0d9488 !important;
    border-color: #0d9488 !important;
    color: #fff !important;
}
#ai-simple-factor-output-recode-btn.btn-ai-simple-recode:hover {
    background-color: #0f766e !important;
    border-color: #0f766e !important;
    color: #fff !important;
}
/* AI simple: strong pulse when active — dark text for readability on light pulse phases */
.ai-simple-go-btn.btn-pulse-running {
    position: relative;
    background: transparent !important;
    border-width: 2px !important;
    color: #1a1a1a !important;
    padding-right: 26px !important;
}
.ai-simple-go-btn.btn-pulse-running i {
    color: inherit !important;
}
#ai-simple-runner-go-btn.btn-pulse-running {
    border-color: rgba(13, 110, 253, 0.9) !important;
    color: #fff !important;
    animation: btnPulseRunningGlowBlue 1.8s ease-in-out infinite;
}
#ai-simple-runner-go-btn.btn-pulse-running i {
    color: #fff !important;
}
#ai-simple-process-btn.btn-pulse-running {
    border-color: rgba(25, 135, 84, 0.9) !important;
    animation: btnPulseRunningGlowGreen 0.6s ease-in-out infinite;
}
#ai-simple-factor-suggest-btn.btn-pulse-running {
    border-color: rgba(202, 138, 4, 0.9) !important;
    animation: btnPulseRunningGlowAmber 0.6s ease-in-out infinite;
}
#ai-simple-factor-output-recode-btn.btn-pulse-running {
    border-color: rgba(13, 148, 136, 0.9) !important;
    animation: btnPulseRunningGlowTeal 0.6s ease-in-out infinite;
}
@keyframes btnPulseRunningGlowBlue {
    0%, 100% { box-shadow: 0 0 6px rgba(13, 110, 253, 0.4); }
    50% { box-shadow: 0 0 16px 2px rgba(13, 110, 253, 0.9); }
}
@keyframes btnPulseRunningGlowGreen {
    0%, 100% { box-shadow: 0 0 6px rgba(25, 135, 84, 0.4); }
    50% { box-shadow: 0 0 16px 2px rgba(25, 135, 84, 0.9); }
}
@keyframes btnPulseRunningGlowAmber {
    0%, 100% { box-shadow: 0 0 6px rgba(202, 138, 4, 0.4); }
    50% { box-shadow: 0 0 16px 2px rgba(202, 138, 4, 0.9); }
}
@keyframes btnPulseRunningGlowTeal {
    0%, 100% { box-shadow: 0 0 6px rgba(13, 148, 136, 0.4); }
    50% { box-shadow: 0 0 16px 2px rgba(13, 148, 136, 0.9); }
}
.ai-simple-go-btn.btn-pulse-running::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    z-index: -1;
}
#ai-simple-runner-go-btn.btn-pulse-running::before {
    background-color: rgba(13, 110, 253, 0.6);
    animation: btnPulseRunningBgBlue 1.8s ease-in-out infinite;
}
#ai-simple-process-btn.btn-pulse-running::before {
    background-color: rgba(25, 135, 84, 0.6);
    animation: btnPulseRunningBgGreen 0.6s ease-in-out infinite;
}
#ai-simple-factor-suggest-btn.btn-pulse-running::before {
    background-color: rgba(202, 138, 4, 0.6);
    animation: btnPulseRunningBgAmber 0.6s ease-in-out infinite;
}
#ai-simple-factor-output-recode-btn.btn-pulse-running::before {
    background-color: rgba(13, 148, 136, 0.6);
    animation: btnPulseRunningBgTeal 0.6s ease-in-out infinite;
}
@keyframes btnPulseRunningBgBlue {
    0%, 100% { background-color: rgba(13, 110, 253, 0.65); }
    50% { background-color: rgba(13, 110, 253, 1); }
}
@keyframes btnPulseRunningBgGreen {
    0%, 100% { background-color: rgba(25, 135, 84, 0.65); }
    50% { background-color: rgba(25, 135, 84, 1); }
}
@keyframes btnPulseRunningBgAmber {
    0%, 100% { background-color: rgba(202, 138, 4, 0.65); }
    50% { background-color: rgba(202, 138, 4, 1); }
}
@keyframes btnPulseRunningBgTeal {
    0%, 100% { background-color: rgba(13, 148, 136, 0.65); }
    50% { background-color: rgba(13, 148, 136, 1); }
}
/* spinner circle inside pulsing buttons */
.ai-simple-go-btn.btn-pulse-running::after {
    content: '';
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid rgba(17,24,39,0.25);
    border-top-color: #111827;
    animation: btnSpinner 0.7s linear infinite;
    z-index: 2;
}
@keyframes btnSpinner {
    to { transform: translateY(-50%) rotate(360deg); }
}

/* Strong pulse for AI running (Expand/Ask, vignette Run) — ::before so inline/Bootstrap bg doesn't override */
.btn.btn-pulse-running {
    position: relative;
    background: transparent !important;
    border-color: rgba(229, 184, 184, 0.85) !important;
}

.btn.btn-pulse-running::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-color: rgba(229, 184, 184, 0.5);
    animation: btnPulseRunningBg 0.7s ease-in-out infinite;
    z-index: -1;
}

@keyframes btnPulseRunningBg {

    0%,
    100% {
        background-color: rgba(229, 184, 184, 0.5);
    }

    50% {
        background-color: rgba(229, 184, 184, 0.95);
    }
}

/* MapCat: slightly whimsical cat wiggle while thinking */
.docs-bot-cat-icon.docs-bot-cat-thinking {
    display: inline-block;
    transform-origin: 60% 80%;
    animation: mapcatWiggle 0.75s ease-in-out infinite;
}

@keyframes mapcatWiggle {
    0% {
        transform: rotate(0deg) translateY(0);
    }

    18% {
        transform: rotate(-10deg) translateY(-1px);
    }

    36% {
        transform: rotate(10deg) translateY(-1px);
    }

    54% {
        transform: rotate(-7deg) translateY(0);
    }

    72% {
        transform: rotate(7deg) translateY(0);
    }

    100% {
        transform: rotate(0deg) translateY(0);
    }
}

/* =============================================================================
   Compact UI Components - Smaller Sizing
   ============================================================================= */

/* Smaller buttons */
.btn {
    padding: 0.25rem 0.5rem;
    /* Reduced from Bootstrap default */
    font-size: 0.8rem;
    /* Smaller text */
}

.btn-sm {
    padding: 0.2rem 0.4rem;
    font-size: 0.75rem;
}

/* btn-xs already defined later in file */

/* Smaller form controls */
.form-control {
    padding: 0.25rem 0.5rem;
    font-size: 1rem;
}

/* Remove form-control padding when converted to selectize */
.selectize-control .selectize-input.form-control {
    padding: 10px 8px !important;
    font-size: 14px !important;
    border: none !important;
    background: transparent !important;
}

.form-control-sm {
    padding: 0.2rem 0.4rem;
    font-size: .9rem;
}

.form-select {
    padding: 0.25rem 1.5rem 0.25rem 0.5rem;
    font-size: 0.8rem;
}

.form-select-sm {
    padding: 0.2rem 1.3rem 0.2rem 0.4rem;
    font-size: 0.75rem;
    max-height: none;
}

/* Ensure native select dropdown lists are scrollable (browser default applies).
   We keep select height auto and allow the popup to scroll. */
/* Allow native select to expand; scroll handled by UA menu */
select.form-select,
select.form-select-sm {
    height: auto;
}

/* Prevent prompt-history selects from expanding their containers */
select[id$="prompt-history-select"],
select[id^="hclust-prompt-history-"],
select[id^="dev-soft-recode-prompt-history-"] {
    max-width: 240px;
    /* cap control width so it can’t blow out flex rows */
    white-space: nowrap;
    /* keep selected label on one line */
    overflow: hidden;
    /* hide overflowed label text */
    text-overflow: ellipsis;
    /* show … for long labels */
}


/* Subscriptions table styling */
.subs-table {
    font-size: 1.25rem;
    /* Increased further from 1.1rem */
}

.subs-table tbody tr {
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
}

.subs-table tbody tr>td {
    padding: 1.2rem 0.75rem;
    /* Increased padding for better spacing */
}

/* Alternating subtle brand-inspired backgrounds (apply to cells to override table defaults) */
.subs-table tbody tr:nth-child(1)>td {
    background-color: rgba(118, 247, 255, 0.08) !important;
}

.subs-table tbody tr:nth-child(2)>td {
    background-color: rgba(109, 196, 200, 0.10) !important;
}

.subs-table tbody tr:nth-child(3)>td {
    background-color: rgba(128, 170, 156, 0.10) !important;
}

.subs-table tbody tr:nth-child(4)>td {
    background-color: rgba(128, 170, 156, 0.14) !important;
}

.subs-table tbody tr:nth-child(5)>td {
    background-color: rgba(128, 170, 156, 0.18) !important;
}

.subs-table .plan-name strong {
    font-size: 1.4rem;
    /* Increased further from 1.2rem */
}

/* Billing buttons vertical layout */
.billing-buttons-vertical {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.billing-buttons-vertical .billing-btn {
    width: 100%;
    text-align: center;
}

/* Smaller input groups */
.input-group>.form-control,
.input-group>.form-select {
    font-size: 0.8rem;
}

/* Smaller badges */
.badge {
    font-size: 0.7rem;
    padding: 0.2rem 0.4rem;
}

/* Smaller table text */
.table {
    font-size: 0.8rem;
}

.table-sm {
    font-size: 0.75rem;
}

/* Smaller modal content */
.modal-body {
    /* Modals were too small (esp bullets). Keep modals readable. */
    font-size: 1rem;
}

/* Bootstrap `.small` inside modals was ending up tiny; keep it only slightly smaller than body text */
.modal-body .small,
.modal-body small {
    font-size: 0.95rem;
}

/* infoModal: plain text preserves line breaks; HTML (markdown) uses normal flow */
.info-modal-body {
    white-space: pre-wrap;
}

.info-modal-body--html {
    white-space: normal;
}

.info-modal-body--html p {
    margin-bottom: 0.5rem;
}

.info-modal-body--html p:last-child {
    margin-bottom: 0;
}

/* Smaller card content */
.card-body {
    font-size: 0.85rem;
    padding: 0.75rem;
}

/* Smaller navigation */
.nav-link {
    padding: 0.25rem 0.5rem;
    font-size: 0.8rem;
}

/* Smaller accordion */
.accordion-button {
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
}

/* Sources panel accordion headers - make them prominent like h5 elements */
#sources-accordion .accordion-button h5 {
    color: var(--color-text-primary);
    font-weight: 600;
    font-size: 1.1rem;
}

#sources-accordion .accordion-button:not(.collapsed) h5 {
    color: var(--color-green);
}

#sources-accordion .accordion-button {
    padding: 1rem 1.25rem;
    background-color: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
}

/* Application-specific compact sizing */
.vertical-tab {
    font-size: 0.8rem;
}

.vertical-tab .tab-header {
    font-size: 0.85rem;
}

.vertical-tab .tab-subtitle {
    font-size: 0.7rem;
}

.selectize-input {
    font-size: 0.8rem;
    min-height: 28px;
    box-shadow: none !important;
    /* Remove inset inner border from selectize default CSS */
}
.selectize-input.focus,
.selectize-input:focus-within {
    box-shadow: none !important;
}

.selectize-dropdown {
    font-size: 0.8rem;
}

.causal-overlay .form-group {
    margin-bottom: 0.75rem;
    /* Reduced spacing */
}

.text-viewer-header h6 {
    font-size: 0.9rem;
}

.help-drawer {
    font-size: 0.85rem;
}

.filter-pipeline-widget {
    font-size: 0.8rem;
}

/* Map formatting control sizing is handled in the Map Formatting pill rules below. */

/* =============================================================================
   Unified Professional Button System
   ============================================================================= */

/* Base button styles - apply to ALL buttons in the app */
.btn {
    background-color: var(--color-bg-white) !important;
    border: 1px solid var(--color-border) !important;
    color: var(--color-text-primary) !important;
    font-weight: 500;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    border-radius: 4px !important;
    /* Compact sizing already defined above */
}

.btn:hover {
    background-color: var(--color-bg-subtle) !important;
    border-color: var(--color-border-hover) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

.btn:focus {
    outline: none !important;
    box-shadow: 0 0 0 0.2rem rgba(81, 135, 86, 0.25) !important;
}

/* DANGER BUTTONS - Pink background */
.btn-danger,
.btn-outline-danger,
.btn[class*="danger"] {
    background-color: var(--color-pink) !important;
    border-color: var(--color-pink) !important;
    color: white !important;
}

.btn-danger:hover,
.btn-outline-danger:hover,
.btn[class*="danger"]:hover {
    background-color: #e17ca4 !important;
    border-color: #e17ca4 !important;
    color: white !important;
}

/* SAVE/GO/ACCEPT BUTTONS - Green background */
.btn-success,
.btn-primary.confirm-style,
.btn[id*="save"],
.btn[id*="confirm"],
.btn[id*="accept"],
.btn[id*="go"] {
    background-color: var(--color-green-light) !important;
    border-color: var(--color-green-light) !important;
    color: black !important;
}

.btn-success:hover,
.btn-primary.confirm-style:hover,
.btn[id*="save"]:hover,
.btn[id*="confirm"]:hover,
.btn[id*="accept"]:hover,
.btn[id*="go"]:hover {
    background-color: #3d6b41 !important;
    border-color: #3d6b41 !important;
    color: white !important;
}

/* Disabled state for all confirm-style/save/accept/go buttons → greyed out */
.btn-primary.confirm-style:disabled,
.btn-primary.confirm-style.disabled,
.confirm-style:disabled,
.confirm-style.disabled,
.btn[id*="save"]:disabled,
.btn[id*="confirm"]:disabled,
.btn[id*="accept"]:disabled,
.btn[id*="go"]:disabled {
    background-color: #e9ecef !important;
    border-color: #ced4da !important;
    color: #6c757d !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
}

/* LOAD BUTTONS - Primary color background with white text/icons */
.btn-primary:has(.fa-external-link-alt):not(#download-map-png-btn):not(#download-map-png-file-btn),
.btn-primary[title*="Load"]:not(#download-map-png-btn):not(#download-map-png-file-btn),
.btn[id*="load"]:not(.btn-outline-primary):not(#download-map-png-btn):not(#download-map-png-file-btn),
.btn-outline-primary[id*="load"]:not(#download-map-png-btn):not(#download-map-png-file-btn),
.btn-outline-primary[title*="Load"]:not(#download-map-png-btn):not(#download-map-png-file-btn),
.btn-outline-primary:has(.fa-external-link-alt):not(#download-map-png-btn):not(#download-map-png-file-btn) {
    background-color: var(--color-green) !important;
    border-color: var(--color-green) !important;
    color: white !important;
}

.btn-primary:has(.fa-external-link-alt):not(#download-map-png-btn):not(#download-map-png-file-btn):hover,
.btn-primary[title*="Load"]:not(#download-map-png-btn):not(#download-map-png-file-btn):hover,
.btn[id*="load"]:not(.btn-outline-primary):not(#download-map-png-btn):not(#download-map-png-file-btn):hover,
.btn-outline-primary[id*="load"]:not(#download-map-png-btn):not(#download-map-png-file-btn):hover,
.btn-outline-primary[title*="Load"]:not(#download-map-png-btn):not(#download-map-png-file-btn):hover,
.btn-outline-primary:has(.fa-external-link-alt):not(#download-map-png-btn):not(#download-map-png-file-btn):hover {
    background-color: #3d6b41 !important;
    border-color: #3d6b41 !important;
    color: white !important;
}

.btn-primary:has(.fa-external-link-alt):not(#download-map-png-btn):not(#download-map-png-file-btn) i,
.btn-primary[title*="Load"]:not(#download-map-png-btn):not(#download-map-png-file-btn) i,
.btn[id*="load"]:not(.btn-outline-primary):not(#download-map-png-btn):not(#download-map-png-file-btn) i,
.btn-outline-primary[id*="load"]:not(#download-map-png-btn):not(#download-map-png-file-btn) i,
.btn-outline-primary[title*="Load"]:not(#download-map-png-btn):not(#download-map-png-file-btn) i,
.btn-outline-primary:has(.fa-external-link-alt):not(#download-map-png-btn):not(#download-map-png-file-btn) i {
    color: white !important;
}

/* Button icons inherit color from their parent button */
.btn i {
    /* color: inherit !important; */
}

/* Download XLSX buttons: force white bg (override any dark green) */
#pivot-download-xlsx-btn,
#export-links-xlsx-btn,
#export-sources-xlsx-btn {
    background-color: var(--color-bg-white) !important;
    border-color: var(--color-border) !important;
    color: var(--color-green) !important;
}
#pivot-download-xlsx-btn:hover,
#export-links-xlsx-btn:hover,
#export-sources-xlsx-btn:hover {
    background-color: var(--toggle-selected-bg) !important;
    border-color: var(--color-border-hover) !important;
    color: var(--color-green) !important;
}

/* btn-outline-success → normal style (white bg, green text, light border) like Refresh/Copy */
.btn-outline-success,
.btn-outline-success:active,
.btn-outline-success.active,
.btn-outline-success:focus {
    background-color: var(--color-bg-white) !important;
    border-color: var(--color-border) !important;
    color: var(--color-green) !important;
}
.btn-outline-success:hover {
    background-color: var(--toggle-selected-bg) !important;
    border-color: var(--color-border-hover) !important;
    color: var(--color-green) !important;
}
.btn-outline-success i {
    color: inherit !important;
}

/* Outline buttons use the unified system - special cases only */
.btn-outline-info:not(.contextual-help-btn) {
    background-color: var(--color-bg-white) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text-primary) !important;
}

.btn-outline-info:not(.contextual-help-btn):hover {
    background-color: var(--color-bg-subtle) !important;
    border-color: var(--color-border-hover) !important;
    color: var(--color-text-primary) !important;
}

/* Bootstrap badge colors - Text only, no colored backgrounds */
.badge.bg-primary {
    background-color: transparent !important;
    color: var(--color-text-primary) !important;
    border: 1px solid var(--color-border) !important;
}

.badge.bg-success {
    background-color: transparent !important;
    color: var(--color-green) !important;
    border: 1px solid var(--color-border) !important;
}

/* AI ON badge in navbar: bright green background */
#subscription-badges .badge.ai-badge-on {
    background-color: var(--color-green-light) !important;
    color: #1f1f36 !important;
    border: none !important;
}

.badge.bg-info {
    background-color: transparent !important;
    color: var(--color-blue) !important;
    border: 1px solid var(--color-border) !important;
}

.badge.bg-warning {
    background-color: var(--color-yellow) !important;
    color: var(--color-text-primary) !important;
    border: 1px solid var(--color-border) !important;
}

.badge.bg-danger {
    background-color: transparent !important;
    color: var(--color-pink) !important;
    border: 1px solid var(--color-border) !important;
}

.badge.bg-secondary {
    background-color: var(--color-yellow) !important;
    color: var(--color-text-secondary) !important;
    border: 1px solid var(--color-border) !important;
}

.badge.bg-light {
    background-color: transparent !important;
    color: var(--color-text-muted) !important;
    border: 1px solid var(--color-border) !important;
}

.badge.bg-dark {
    background-color: transparent !important;
    color: var(--color-text-primary) !important;
    border: 1px solid var(--color-border) !important;
}

/* Extra small button size with professional styling */
.btn-xs {
    padding: 0.125rem 0.25rem !important;
    font-size: 0.75rem !important;
    line-height: 1.5 !important;
    border-radius: 0.2rem !important;
}

/* =============================================================================
   Form Elements - Professional Styling Using Our Color Palette
   ============================================================================= */

/* Range sliders using our purple color */
.form-range {
    -webkit-appearance: none;
    background: transparent;
    cursor: pointer;
}

/* Stronger override for range slider tracks across browsers */
input[type="range"].form-range::-webkit-slider-runnable-track {
    background: var(--color-border-hover) !important;
    /* Chrome, Safari, Edge */
    height: 6px;
    border-radius: 3px;
}

input[type="range"].form-range::-webkit-slider-track {
    background: var(--color-border-hover) !important;
    /* Older WebKit */
    height: 6px;
    border-radius: 3px;
}

input[type="range"].form-range::-moz-range-track {
    background: var(--color-border-hover) !important;
    /* Firefox */
    height: 6px;
    border-radius: 3px;
}

input[type="range"].form-range::-ms-track {
    background: var(--color-border-hover) !important;
    /* IE */
    height: 6px;
    border-radius: 3px;
}

.form-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    height: 18px;
    width: 18px;
    border-radius: 50%;
    background: var(--color-text-primary);
    border: 2px solid var(--color-bg-white);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: all 0.2s ease;
}

.form-range::-webkit-slider-thumb:hover {
    background: rgba(31, 31, 54, 0.8);
    transform: scale(1.1);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
}

.form-range::-webkit-slider-thumb:active {
    background: var(--color-text-primary);
    transform: scale(1.05);
}

/* Firefox */
input[type="range"].form-range::-moz-range-track {
    background: var(--color-border-hover) !important;
    background-color: var(--color-border-hover) !important;
    height: 6px;
    border-radius: 3px;
    border: none;
}

.form-range::-moz-range-thumb {
    border: 2px solid var(--color-bg-white);
    height: 18px;
    width: 18px;
    border-radius: 50%;
    background: var(--color-text-primary);
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
}

.form-range::-moz-range-thumb:hover {
    background: rgba(31, 31, 54, 0.8);
    transform: scale(1.1);
}

/* Progress bars using our color palette */
.progress-bar {
    background-color: var(--color-text-primary);
}

.progress-bar.bg-success {
    background-color: var(--color-green) !important;
}

.progress-bar.bg-info {
    background-color: var(--color-blue) !important;
    height: 20px;
}

.progress-bar.bg-warning {
    background-color: var(--color-yellow) !important;
}

.progress-bar.bg-danger {
    background-color: var(--color-pink) !important;
}

/* Checkboxes and radio buttons */
.form-check-input:checked {
    background-color: var(--color-text-primary);
    border-color: var(--color-text-primary);
}

.form-check-input:focus {
    border-color: var(--color-text-primary);
    box-shadow: 0 0 0 0.2rem rgba(31, 31, 54, 0.15);
}


/* Bootstrap text color utilities using our palette */
.text-primary {
    color: var(--color-text-primary) !important;
}

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

.text-success {
    color: var(--color-green) !important;
}

.text-info {
    color: var(--color-blue) !important;
}

.text-warning {
    color: var(--color-text-primary) !important;
}

.text-danger {
    color: var(--color-pink) !important;
    font-size: larger;
}

.text-light {
    color: var(--color-bg-subtle) !important;
}

.text-dark {
    color: var(--color-text-primary) !important;
}

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

/* Bootstrap background color utilities - Only for specific cases that need actual backgrounds */
.bg-light {
    background-color: var(--color-bg-subtle) !important;
    color: var(--color-text-primary) !important;
}

.bg-dark {
    background-color: var(--color-text-primary) !important;
    color: white !important;
}

/* Note: For most UI elements, use colored text instead of colored backgrounds 
   Following our design principle of no colored backgrounds */

/* =============================================================================
   Professional Panel Backgrounds - Subtle Purple Variants
   ============================================================================= */

.project-selector-container,
[data-tab="projects"] {
    background-color: rgba(50, 180, 90, 0.3) !important;
}

#bookmark-toggle-btn {
    background-color: var(--color-yellow) !important;
    min-width: 2.35rem;
    padding-left: 0.55rem;
    padding-right: 0.55rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.text-viewer-nav-buttons {}

.sources-bar,
[data-tab="sources"] {
    background-color: var(--sources-colour) !important;
}

/* 
#sourcesHeader, [data-tab="sources"] {
background-color:  var(--sources-colour) !important;
} */
[data-tab="map"] {
    background-color: var(--color-pink) !important;
}

[data-tab="factors"] {
    background-color: var(--color-pink) !important;
}

[data-tab="report"] {
    background-color: var(--color-yellow) !important;
}

/* DEPRECATED: Old bookmarks tab styling - now using report tab */
/* [data-tab="bookmarks"] {
    background-color: var(--color-yellow) !important;
} */

[data-tab="links"] {
    background-color: var(--color-pink) !important;
}

[data-tab="pivot"] {
    background-color: var(--color-pink) !important;
}

/* Summary / All-by-all: sensible width, not full container */
#overview-container,
#pivot-allbyall-output {
    max-width: min(90%, 800px);
}
#overview-container table,
#pivot-allbyall-output table {
    width: auto;
}
#overview-container .pivot-col-header,
#pivot-allbyall-output .pivot-col-header,
#overview-container th.pivot-col-header,
#pivot-allbyall-output th.pivot-col-header {
    padding: 0.4em 0.6em;
}

#link-tabs-content {
    background-color: var(--color-orange) !important;
}

.project-selector-container,
#sources-selector-panel {
    border: 1.5px solid var(--color-green) !important;
    border-radius: 8px;
    padding: 2px 10px !important;
    cursor: pointer;
    margin: 0 0 10px 0;
    box-shadow: 3px 3px 10px 5px rgba(0, 0, 0, 0.1) !important;
}

.manage-panel {
    background-color: var(--color-text-primary-light);
    border: 1px solid var(--color-border);
    border-radius: 8px;
}

.help-drawer {
    background-color: var(--color-bg-white);
    border-left: 1px solid var(--color-border);
}


/* =============================================================================
   Project Selector - Professional Styling
   ============================================================================= */

/* Rotated vertical label for Project bar */
/* Adds a rotated "Project" label just outside the left edge */
#project-selector-header {
    position: relative;
    /* anchor for pseudo-element */
}

#emptyAccordion #project-selector-header::before {
    content: "Project";
    /* label text */
    position: absolute;
    left: -40px;
    /* place outside left edge without shifting bar */
    top: 50%;
    transform: translateY(-50%) rotate(-90deg);
    /* rotate 90 degrees */
    transform-origin: center;
    font-size: 12px;
    letter-spacing: 1px;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    pointer-events: none;
    /* avoid intercepting clicks */
}

/* Rotated vertical label for Sources bar */
#sourcesHeader {
    position: relative;
    /* anchor for pseudo-element */
}

/* collapsed label: hidden by default, shown only in ai-simple mode */
#sourcesHeader .sources-bar-collapsed-label {
    display: none;
}
#emptyAccordion #sourcesHeader::before {
    content: "Sources";
    /* label text */
    position: absolute;
    left: -40px;
    /* place outside left edge without shifting bar */
    top: 50%;
    transform: translateY(-50%) rotate(-90deg);
    transform-origin: center;
    font-size: 12px;
    letter-spacing: 1px;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    pointer-events: none;
}

.project-selector-dropdown {
    width: 100%;
    border: none;
}

.project-selector-native-wrap {
    position: relative;
    border: none;
    border-radius: 6px;

}
.project-selector-native-wrap::after {
    content: "";
    position: absolute;
    right: 10px;
    top: 50%;
    width: 7px;
    height: 7px;
    border-right: 1.5px solid rgba(0, 0, 0, 0.35);
    border-bottom: 1.5px solid rgba(0, 0, 0, 0.35);
    transform: translateY(-60%) rotate(45deg);
    pointer-events: none;
}

.project-selector-native-input {
    min-height: 25px;
    height: 25px;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-right: 28px;
    font-size: 15px;
    font-weight: 500;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-bg-white);
    color: var(--color-text-primary);
}

.project-selector-native-input:focus {
    border-color: var(--color-text-primary);
    box-shadow: 0 0 0 0.2rem rgba(31, 31, 54, 0.15);
}

.project-selector-suggestions {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    z-index: 10050;
    border: 1px solid var(--color-border);
    border-radius: 0 0 6px 6px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    background: var(--color-bg-white);
    max-height: 320px;
    overflow-y: auto;
}

.project-selector-suggestions-item {
    width: 100%;
    border: 0;
    background: transparent;
    padding: 6px 10px;
    text-align: left;
    font-size: 13px;
    color: var(--color-text-primary);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.project-selector-suggestions-item:hover {
    background: #3f6e45;
    color: #fff;
}
.project-selector-suggestions-item.is-active {
    background: var(--color-green);
    color: #fff;
}

.project-selector-option-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.project-selector-option-badge {
    flex-shrink: 0;
    font-size: 12px;
    line-height: 1;
    color: #6c757d;
}
.project-selector-suggestions-item.is-active .project-selector-option-badge {
    color: #ffd54f;
}

.project-selector-suggestions-empty {
    padding: 8px 10px;
    font-size: 13px;
    color: var(--color-text-secondary);
}

/* #project-selector-dropdown::after {
    content: "Current Project";
    font-size: 11px;
    color: var(--color-text-secondary);
    position: absolute;
    top: 9px;
    right: 120px;
    padding: 1px 1px;
    z-index: 1200;;
} */

/* Edit Project modal: code-style project name in header */
#edit-project-name {
    display: inline-block;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    background-color: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 2px 6px;
    line-height: 1.2;
    color: var(--color-text-primary);
}

.project-selector-dropdown .selectize-input {
    min-height: 42px;
    font-size: 16px;
    font-weight: 500;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-bg-white);
    color: var(--color-text-primary);
}

.project-selector-dropdown .selectize-input:focus {
    border-color: var(--color-text-primary);
    box-shadow: 0 0 0 0.2rem rgba(31, 31, 54, 0.15);
}

/* Project bar: single-mode chip uses [data-value] (not .multi); match sources pill tokens exactly */
#project-selector-dropdown .selectize-input [data-value] {
    background-color: var(--toggle-selected-bg) !important;
    background-image: none !important;
    border: 1px solid var(--color-green) !important;
    color: var(--toggle-selected-text) !important;
    text-shadow: none !important;
    box-shadow: none !important;
    border-radius: 3px;
    padding: 1px 9px !important;
    /* tight chip; was 3×10, user asked −2 vertical / −1 horizontal */
}

/* Sources bar: same compact height with or without pills (empty was taller due to 42px min-height) */
#sources-selector-dropdown .selectize-control.form-control {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

#sources-selector-dropdown .selectize-input {
    min-height: auto !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

/* Viewer-active source pill: fa-pen-to-square; icon appended in JS */
#sources-selector-dropdown .selectize-input .item .source-pill-viewer-indicator {
    font-size: 0.75em;
    opacity: 0.85;
    vertical-align: middle;
}

.project-selector-dropdown .selectize-dropdown {
    border: 1px solid var(--color-border);
    border-top: none;
    border-radius: 0 0 6px 6px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    background-color: var(--color-bg-white);
}

/* Option rows: also target direct children so padding applies with custom render (Selectize may use .option not .selectize-option) */
.project-selector-dropdown .selectize-dropdown .selectize-dropdown-content > div,
.project-selector-dropdown .selectize-option {
    padding: 12px 15px;
    font-size: 14px;
    color: var(--color-text-primary);
}

.project-selector-dropdown .selectize-dropdown .selectize-dropdown-content > div:hover,
.project-selector-dropdown .selectize-option:hover {
    background: var(--color-bg-subtle);
}

.project-selector-dropdown .selectize-dropdown .selectize-dropdown-content > div.selected,
.project-selector-dropdown .selectize-option.selected {
    background: var(--color-text-primary);
    color: white;
}

/* =============================================================================
   Layout & Navigation - Professional Colors
   ============================================================================= */

/* Navbar Embedding Progress Bar */
.embedding-progress-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: 20px;
    padding: 6px 12px;
    background: rgba(13, 110, 253, 0.1);
    border: 1px solid rgba(13, 110, 253, 0.2);
    border-radius: 20px;
    font-size: 12px;
    color: #0d6efd;
    animation: fadeIn 0.3s ease-in;
}

.embedding-progress-bar .progress-text {
    display: flex;
    align-items: center;
    white-space: nowrap;
    font-weight: 500;
}

.embedding-progress-bar .progress-bar-container {
    width: 120px;
    height: 8px;
    background: rgba(13, 110, 253, 0.2);
    border-radius: 4px;
    overflow: hidden;
}

.embedding-progress-bar .progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #0d6efd, #0b5ed7);
    border-radius: 4px;
    transition: width 0.3s ease;
    width: 0%;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#graph-container {
    position: relative;
    width: 100%;
    height: calc(100vh - 260px);
    border: 1px solid #ddd;
    border-radius: 8px;
    background: white;
}

.sidebar {
    height: 100vh;
    overflow-y: auto;
}

/* Vertical Tabs - Professional Design with Icon Colors Only */
.vertical-tab {
    transition: all 0.2s ease;
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    padding: 10px 5px;
    margin-bottom: 2px;
    border-radius: 8px 0 0 8px;
    cursor: pointer;
    text-align: center;
    font-weight: 500;
    max-height: 300vh;
    min-height: 80px;
    width: 35px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.vertical-tab-narrow {
    min-height: 30px;
}

.vertical-tab.active {
    background: var(--color-bg-white);
    border-color: var(--color-text-primary);
    border-right-width: 5px;
    color: var(--color-text-primary);
    font-weight: 700;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    transform: translateX(3px);
}

.left-tabs .vertical-tab.active {
    transform-origin: right;
}

.right-tabs .vertical-tab.active {
    transform-origin: left;
    /* Make active right-side tab unmistakable at a glance */
    background: rgba(81, 135, 86, 0.16);
    border-color: var(--color-green);
    border-right-width: 1px;
    color: #2f5f33;
    box-shadow: inset -2px 0 0 var(--color-green), 0 4px 8px rgba(0, 0, 0, 0.1);
}

.left-tabs .vertical-tab.hover {
    transform-origin: right;
}

.right-tabs .vertical-tab.hover {
    transform-origin: left;
}

.vertical-tab:not(.active) {
    opacity: 0.8;
}

/* De-emphasize non-active right-tab labels without dimming icons too much */
.right-tabs .vertical-tab:not(.active) .tab-header {
    opacity: 0.62;
    font-weight: 400;
}

.vertical-tab:hover {
    background: var(--color-bg-subtle);
    border-color: var(--color-border-hover);
    opacity: 1;
    transform: translateX(1px);
}

/* Right pane tabs: hover should nearly match active state */
.right-tabs .vertical-tab:hover {
    background: rgba(81, 135, 86, 0.14);
    border-color: var(--color-green);
    color: #2f5f33;
    box-shadow: inset -2px 0 0 var(--color-green), 0 4px 8px rgba(0, 0, 0, 0.1);
    transform: translateX(2px);
}

.right-tabs .vertical-tab:hover .tab-header {
    opacity: 0.9;
    font-weight: 500;
}

/* Tab Icon Colors - Using Professional Palette */
.vertical-tab[data-tab="projects"] i {
    color: var(--color-green);
}

.vertical-tab[data-tab="sources"] i {
    color: var(--color-text-primary);
}

.vertical-tab[data-tab="links"] i {
    color: var(--color-text-primary);
}

.vertical-tab[data-tab="filters"] i {
    color: var(--color-blue);
}

.vertical-tab[data-tab="factors"] i {
    color: var(--color-green);
}

.vertical-tab[data-tab="report"] i {
    color: var(--color-text-secondary) !important;
}

/* DEPRECATED: Old bookmarks tab icon styling */
/* .vertical-tab[data-tab="bookmarks"] i {
    color: var(--color-text-yellow) !important;
} */

.vertical-tab[data-tab="map"] i {
    color: var(--color-pink);
}

.vertical-tab[data-tab="tables"] i {
    color: var(--color-lightblue);
}

.vertical-tab[data-tab="settings"] i {
    color: var(--color-text-secondary);
}

.vertical-tab[data-tab="admin"] i {
    color: var(--color-text-primary);
}

/* Admin nav metrics: C|D|L|U|R. R = stacked bar + OOM strip. Power-scale 24h (50%≈10min, 25%≈1h). */
.admin-nav-metrics {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.admin-metric-bar {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    width: 32px;
    height: 6px;
    background: #e5e7eb;
    border-radius: 3px;
    overflow: hidden;
}
.admin-nav-ram {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    width: 32px;
}
.admin-nav-ram .admin-metric-letter { align-self: center; }
.admin-nav-ram-col {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
    min-width: 0;
}
.admin-nav-ram-stacked {
    display: flex;
    min-width: 0;
    height: 5px;
    border-radius: 2px;
    overflow: hidden;
}
.admin-nav-ram-stacked span { min-width: 0; height: 100%; }
.admin-nav-ram-oom {
    display: flex;
    min-width: 0;
    height: 4px;
    border-radius: 2px;
    overflow: hidden;
    background: #e5e7eb;
}
.admin-nav-ram-oom .admin-metric-segment { min-width: 1px; height: 100%; }
.admin-metric-letter {
    font-size: 9px;
    font-weight: 600;
    color: #6b7280;
    flex-shrink: 0;
    line-height: 1;
}
.admin-metric-history {
    display: flex;
    flex: 1;
    min-width: 0;
    height: 100%;
}
.admin-metric-segment {
    flex: 1;
    min-width: 1px;
    height: 100%;
}
.admin-metric-fill {
    display: block;
    height: 100%;
    border-radius: 3px;
    min-width: 2px;
    transition: width 0.3s ease, background 0.2s ease;
}

/* Admin panel latency card: 10-min time-series strip (x=time, color=load) */
.admin-panel-metric-history {
    display: flex;
    height: 6px;
    border-radius: 3px;
    overflow: hidden;
    background: #e5e7eb;
}
.admin-panel-metric-history .admin-metric-segment {
    flex: 1;
    min-width: 2px;
}

/* Admin panel RAM card: stacked bar (Used | Cache+Buffer | Free), max 8 GB */
.admin-ram-stacked-bar {
    display: flex;
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
    background: #e5e7eb;
}
.admin-ram-stacked-bar span {
    height: 100%;
    min-width: 0;
}

.left-tabs .vertical-tab[data-tab="links"] {
    width: 70px;
}

/* Tab Content */
.tab-header {
    font-size: 12px;
    margin-bottom: 5px;
}

.tab-subtitle {
    font-size: 10px;
    opacity: 0.8;
}

/* Hide subtitle in right pane tabs */
.right-tabs .tab-subtitle {
    display: none;
}

/* =============================================================================
   Sources Panel Layout
   ============================================================================= */

.sources-table-section {
    height: 50%;
    overflow-y: auto;
    border-bottom: 1px solid #ddd;
    padding-bottom: 15px;
    margin-bottom: 15px;
}

.text-viewer-section {
    display: flex;
    padding: 5px;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    box-shadow: 3px 3px 10px 5px rgba(0, 0, 0, 0.1) !important;
    /* One scrollport for whole column so Y scrollbar runs full height (not only below toolbar) */
    overflow-x: hidden;
    overflow-y: auto;
}

/* Create Links: inset scroll column from green frame so scrollbar/track don’t hug border */
#create-link-content .text-viewer-section {
    margin: 6px 6px 8px;
    padding: 4px 4px 6px;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}

.text-viewer-header {
    padding: 0;
    /* inner row uses same cap padding as .card-header (was 10px + p-2 = double vertical) */
    border-bottom: 1px solid #ddd;
    border-radius: 5px;
    border: none;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 12;
    background-color: var(--color-bg-white);
}

.text-viewer-header > .d-flex {
    padding: var(--bs-card-cap-padding-y, 0.5rem) var(--bs-card-cap-padding-x, 1rem);
}

.text-viewer-header h6 {
    margin: 0;
    font-weight: 600;
    color: #495057;
}

.text-viewer-content {
    flex: 1;
    padding: 15px;
    overflow-y: visible;
    background-color: #fafafa;
    font-size: 14px;
    line-height: 1.6;
    color: #555;
    white-space: pre-wrap;
    font-family: inherit;
}

/* =============================================================================
   Tables & Data Display
   ============================================================================= */

.project-row:hover {
    background-color: #f8f9fa !important;
}

.source-row {
    cursor: pointer;
}

.source-title-link {
    text-decoration: underline;
    color: #518756;
    /* unified */
    cursor: pointer;
}

/* Source ID tags for separate styling */
.source-id-tag {
    display: inline-block;
    background-color: #e3f2fd;
    color: #1976d2;
    padding: 3px 8px;
    margin: 2px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
    border: 1px solid #bbdefb;
}

/* Panel filter styling for selectize in content areas */
.panel-filter {
    margin-bottom: 15px;
}

.form-label {
    font-weight: 700;
}

.panel-filter .form-label {
    font-weight: 600;
    margin-bottom: 8px;
}

/* =============================================================================
   Causal Mapping Overlay - Adapted from Chrome extension overlay.js
   ============================================================================= */


.causal-overlay {
    font-size: 0.8rem;
    background-color: var(--color-bg-white);
    position: fixed;
    display: flex;
    flex-direction: column;
    border: 1.5px solid var(--color-green);
    border-radius: 8px;
    padding: 20px;
    padding-bottom: 20px;
    /* body scrolls; footer stays pinned in normal flow */
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    z-index: 10000;
    box-sizing: border-box;
    width: 850px;
    min-width: 850px;
    max-width: calc(100vw - 16px);
    cursor: default;
    user-select: none;
    height: 650px;
    min-height: 650px;
    max-height: calc(100vh - 16px);
    resize: both;
    /* Keep scrolling inside the body area so footer stays visible */
    overflow: hidden;
}

.causal-overlay.dragging {
    z-index: 10001;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
    transform: scale(1.01);
}

/* Selectize menus for overlay use dropdownParent: body; keep above overlay + graph */
body > .selectize-dropdown {
    z-index: 10050 !important;
}

.causal-overlay-header {
    flex-shrink: 0;
    cursor: move;
    user-select: none;
    margin: -20px -20px 15px -20px;
    padding: 15px 20px;
    background: var(--color-text-primary-panel);
    border-bottom: 1px solid var(--color-border);
    border-radius: 6px 6px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#causal-overlay-body {
    flex: 1 1 auto;
    min-height: 0;
    /* Single vertical scroll region for everything above the footer */
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 4px;
}

.causal-overlay-title {
    margin: 0;
    color: white;
    font-size: 16px;
    font-weight: 600;
}

.causal-overlay-drag-handle {
    color: var(--color-text-muted);
    font-size: 14px;
}

/* Ensure chain checkbox looks like a standard checkbox */
input#overlay-chain-toggle {
    -webkit-appearance: checkbox;
    appearance: checkbox;
    width: 18px;
    height: 18px;
    border-radius: 2px;
}

#overlay-chain-toggle i {
    color: var(--color-text-secondary) !important;
    position: relative;
    z-index: 2;
    transition: all 0.3s ease;
    font-size: 14px;
    margin-left: 32px;
}

#overlay-chain-toggle:hover {
    transform: scale(1.05);
}

/* Favorites buttons */
.favorite-btn {
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin-left: 4px;
    transition: all 0.3s ease;
    background: #f8f9fa !important;
    /* Light grey background by default */
    border: 1px solid var(--color-border) !important;
    opacity: 1;
}

.favorite-btn i {
    font-size: 14px;
    transition: all 0.3s ease;
}

.favorite-btn:hover {
    transform: scale(1.1);
    opacity: 0.7;
    background: var(--color-bg-subtle) !important;
}

.favorite-btn.active {
    opacity: 1;
    transform: scale(1.05);
    background: rgba(109, 196, 200, 0.2) !important;
    /* Pale blue background */
    border-color: var(--color-blue) !important;
}

.favorite-btn.active:hover {
    background: rgba(109, 196, 200, 0.3) !important;
    /* Slightly stronger pale blue on hover */
}

#overlay-favorite-heart i {
    color: var(--color-pink) !important;
}

#overlay-favorite-exclaim i {
    color: var(--color-purple) !important;
}

#overlay-favorite-star i {
    color: var(--color-yellow) !important;
}

.causal-overlay h5 {
    margin: 0 0 15px 0;
    color: var(--color-text-primary);
    font-size: 16px;
}

.causal-overlay .form-group {
    margin-bottom: 15px;
}

.causal-overlay label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
    color: var(--color-text-secondary);
}

.causal-overlay input:not(.form-check-input) {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    font-size: 14px;
    background: var(--color-bg-white);
    color: var(--color-text-primary);
}

.causal-overlay input:focus {
    outline: none;
    border-color: var(--color-text-primary);
    box-shadow: 0 0 0 0.2rem rgba(31, 31, 54, 0.15);
}

/* Causal overlay: Selectize uses an internal search <input> inside .selectize-input.
   Our broad ".causal-overlay input" styles above break Selectize backspace-to-edit pills (restore_on_backspace).
   Keep the wrapper styled, but reset the internal search input to Selectize defaults. */
.causal-overlay .selectize-input input,
.causal-overlay .selectize-input input:focus {
    width: auto !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    background: transparent !important;
}

.causal-overlay .btn {
    padding: 8px 16px;
    border: 1px solid var(--color-border) !important;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    color: var(--color-text-primary) !important;
    transition: all 0.2s ease;
}

.causal-overlay .btn:hover {
    border-color: var(--color-border-hover) !important;
}

.causal-overlay .btn-primary i {
    color: var(--color-text-primary) !important;
}

.causal-overlay .btn-secondary i {
    color: var(--color-text-secondary) !important;
}

.causal-overlay .btn-danger i {
    color: var(--color-pink) !important;
}

.causal-overlay .selected-text {
    background: var(--color-text-primary-light);
    padding: 12px;
    border-radius: 6px;
    border-left: 3px solid var(--color-text-primary);
    border: 1px solid var(--color-border);
}

/* Let the overlay body handle scrolling; avoid nested quote scrollbars */
.causal-overlay .overlay-quote-section {
    overflow: visible;
    max-height: none;
}

/* Cap quote height so Causes/Effects stay in view; scroll inside the quote */
.causal-overlay .overlay-quote-view {
    max-height: 300px;
    overflow-y: auto;
}

.causal-overlay .selected-text textarea {
    width: 100%;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    font-size: 13px;
    padding: 8px 10px;
    resize: vertical;
    min-height: 120px;
    font-family: inherit;
    background: var(--color-bg-white);
    color: var(--color-text-primary);
}

.causal-overlay .selected-text textarea:focus {
    outline: none;
    border-color: var(--color-text-primary);
    box-shadow: 0 0 0 0.2rem rgba(31, 31, 54, 0.15);
}

.causal-overlay .selected-text .form-text {
    margin-top: 6px;
    font-size: 11px;
    color: var(--color-text-muted);
}

/* =============================================================================
   Highlighting Styles - Adapted from Chrome extension highlighting
   ============================================================================= */

.causal-highlight {
    background-color: rgba(118, 247, 255, 0.3);
    border-bottom: 2px solid var(--color-lightblue);
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 1px 2px;
    border-radius: 2px;
}

.causal-highlight:hover {
    background-color: rgba(118, 247, 255, 0.5);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

/* Different intensities for overlapping highlights - Professional Palette */
.causal-highlight.intensity-1 {
    background-color: rgba(118, 247, 255, 0.25);
    border-bottom: 2px solid var(--color-lightblue);
    box-shadow: 0 1px 2px rgba(118, 247, 255, 0.2);
}

.causal-highlight.intensity-2 {
    background-color: rgba(81, 135, 86, 0.4);
    border-bottom: 3px solid var(--color-blue);
    font-weight: 500;
    box-shadow: 0 2px 3px rgba(81, 135, 86, 0.3);
}

.causal-highlight.intensity-3 {
    background-color: rgba(31, 31, 54, 0.15);
    border-bottom: 4px solid var(--color-text-primary);
    font-weight: 600;
    color: var(--color-text-primary);
    box-shadow: 0 3px 4px rgba(31, 31, 54, 0.2);
}

.causal-highlight.intensity-4 {
    background-color: rgba(255, 143, 184, 0.4);
    border-bottom: 5px solid var(--color-pink);
    font-weight: bold;
    color: var(--color-text-primary);
    box-shadow: 0 4px 6px rgba(255, 143, 184, 0.3);
}

/* Enhanced hover effects for different intensities */
.causal-highlight.intensity-1:hover {
    background-color: rgba(118, 247, 255, 0.4);
    transform: translateY(-1px);
}

.causal-highlight.intensity-2:hover {
    background-color: rgba(81, 135, 86, 0.6);
    transform: translateY(-1px);
}

.causal-highlight.intensity-3:hover {
    background-color: rgba(31, 31, 54, 0.25);
    transform: translateY(-1px);
}

.causal-highlight.intensity-4:hover {
    background-color: rgba(255, 143, 184, 0.6);
    transform: translateY(-1px);
}

/* =============================================================================
   Selectize Styles - Adapted from Chrome extension selectize.js patterns
   ============================================================================= */

.selectize-container {
    position: relative;
    width: 100%;
}

.selectize-input-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-height: 42px;
    padding: 8px 12px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-bg-white);
    cursor: text;
    transition: all 0.2s ease;
}

.selectize-input-wrapper:focus-within {
    outline: none;
    border-color: var(--color-text-primary);
    box-shadow: 0 0 0 0.2rem rgba(31, 31, 54, 0.15);
}

.selectize-input {
    flex: 1;
    min-width: 120px;
    border: none;
    outline: none;
    background: transparent;
    font-size: 14px;
    padding: 10px 8px;
    color: var(--color-text-primary);
    background-image: none !important;
}

.selectize-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-top: none;
    border-radius: 0 0 6px 6px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 1001;
    display: none;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Ensure selectize dropdown content has proper structure */
/* FIX: Prevent double scrollbar by only allowing scroll on content, not wrapper */
.selectize-dropdown {
    overflow: visible !important;
    overflow-y: visible !important;
    overflow-x: visible !important;
}

.selectize-dropdown-content {
    max-height: 200px;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

.selectize-dropdown.active {
    display: block !important;
}

/* Node selector in map controls - initial width 100px, expandable to 500px when typing */
#node-selector {
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

#node-selector+.selectize-control {
    width: 100px !important;
    min-width: 100px !important;
    max-width: 100px !important;
    position: relative !important;
    flex-shrink: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    transition: width 0.2s ease, transform 0.2s ease;
    z-index: 10 !important;
}

#node-selector+.selectize-control>* {
    box-sizing: border-box !important;
}

#node-selector+.selectize-control .selectize-input {
    width: 100% !important;
    min-width: 100px !important;
    max-width: 100px !important;
    box-sizing: border-box !important;
    padding: 2px 8px !important;
    overflow: visible !important;
}

/* When expanded, allow width to grow */
#node-selector+.selectize-control[style*="width: 500px"] .selectize-input {
    max-width: 500px !important;
}

#node-selector+.selectize-control .selectize-input>* {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Hide node-selector in print/graphviz view (layout=dot) */
.layout-dot #node-selector,
.layout-dot #node-selector+.selectize-control {
    display: none !important;
}

#node-selector+.selectize-control .selectize-input {
    background-image: none !important;
    background: var(--color-bg-white) !important;
}

#node-selector+.selectize-control .selectize-dropdown {
    width: 500px !important;
    min-width: 500px !important;
    background-image: none !important;
    background: var(--color-bg-white) !important;
}

.selectize-option {
    padding: 10px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-primary);
    transition: background-color 0.2s ease;
}

.selectize-option:hover {
    background: var(--color-bg-subtle);
}

.selectize-option.highlighted {
    background: var(--color-text-primary);
    color: white;
}

.selectize-option.create {
    color: var(--color-text-primary);
    font-style: italic;
}

.selectize-tags {
    display: contents;
}

.selectize-tag {
    background-color: var(--toggle-selected-bg);
    color: var(--toggle-selected-text);
    border: 1px solid var(--color-green);
    padding: 2px 3px;
    border-radius: 14px;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    gap: 1px;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background-color 0.2s ease;
    text-shadow: none;
}

.selectize-tag:hover {
    background-color: rgba(81, 135, 86, 0.2);
}

.selectize-tag-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    min-width: 18px;
    height: 18px;
    cursor: pointer;
    font-weight: bold;
    color: var(--color-green);
    background: none;
    border: none;
    padding: 0;
    opacity: 0.8;
}

.selectize-tag-remove:hover {
    color: var(--color-green);
    opacity: 1;
}

/* Native clear_button plugin: small X inside selectize at top-right */
/* Override plugin's display:none – it hides on init before value is restored (e.g. URL state) */
.selectize-control.plugin-clear_button .selectize-input.has-items ~ .clear {
    display: flex !important;
}
.selectize-control.plugin-clear_button .selectize-input:not(.has-items) ~ .clear {
    display: none !important;
}
.selectize-control.plugin-clear_button .clear {
    position: absolute !important;
    right: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 14px !important;
    width: 20px !important;
    min-width: 20px !important;
    color: var(--color-text-muted) !important;
    opacity: 0.6 !important;
}
.selectize-control.plugin-clear_button .clear:hover {
    color: var(--color-green) !important;
    opacity: 1 !important;
}

/* Selectize pills - no text shadow, pale green style */
.selectize-input .item,
.selectize-tag,
.selectize-control.multi .selectize-input [data-value] {
    text-shadow: none !important;
}

.selectize-control.multi .selectize-input [data-value] {
    background-color: var(--toggle-selected-bg) !important;
    background-image: none !important;
    border: 1px solid var(--color-green) !important;
    color: var(--toggle-selected-text) !important;
}

.selectize-control.multi .selectize-input [data-value].active {
    background-color: var(--toggle-selected-bg) !important;
    border-color: var(--color-green) !important;
    color: var(--toggle-selected-text) !important;
}

.selectize-dropdown .selected,
.selectize-dropdown .active {
    background-color: var(--toggle-selected-bg) !important;
    color: var(--toggle-selected-text) !important;
}

/* =============================================================================
   PDF Upload & File Handling
   ============================================================================= */

.pdf-dropzone {
    border: 2px dashed var(--color-border);
    border-radius: 8px;
    padding: 30px 20px;
    text-align: center;
    margin-bottom: 30px;
    background-color: var(--sources-colour);
    cursor: pointer;
    transition: all 0.2s ease;
}

.pdf-dropzone:hover {
    border-color: var(--color-text-primary);
    background-color: var(--color-text-primary-medium);
}

.pdf-dropzone-icon {
    color: var(--color-text-primary);
    font-size: 48px;
    margin-bottom: 15px;
}

.pdf-dropzone-title {
    margin-bottom: 10px;
    font-weight: 600;
}

.pdf-dropzone-subtitle {
    color: var(--color-text-muted);
    margin: 0;
}

.pdf-dropzone.dragover {
    border-color: #0d6efd;
    background-color: #e7f1ff;
}

/* =============================================================================
   Content Areas & Panels
   ============================================================================= */

.main-content {
    flex: 1;
    padding: 10px 20px;
    overflow-y: auto;
}

.tab-panel {
    /* Base styles for all tab panels */
}

.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.no-project-message {
    text-align: center;
    margin-top: 100px;
}

.no-project-message h5 {
    /* Bootstrap will handle this */
}

.no-project-message p {
    color: #6c757d;
}

/* Panel headers with spacing */
.panel-header {
    margin-bottom: 20px;
}

/* =============================================================================
   Navigation & Container Layout
   ============================================================================= */

.main-container {
    display: flex;
    height: 100vh;
}

.tabs-container {
    width: 35px;
    background-color: #f8f9fa;
    padding: 5px 2px;
    border-right: 1px solid #ddd;

}

/* Move right pane tabs to the right side */
.right-tabs {
    order: 2;
    border-right: none;
    border-left: 1px solid #ddd;
    flex-shrink: 0;
    /* Prevent tabs from shrinking */
    margin-left: 0 !important;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
    margin-right: 10px !important;
    margin-top: 10px !important;
    z-index: 1000;
}

.right-tabs .vertical-tab {
    border-radius: 0 15px 15px 0;
}

.right-content {
    order: 1;
    flex: 1;
    /* Take up remaining space */
}

.left-tabs {
    width: 70px;
    padding: 5px 4px;
}

.left-tabs .vertical-tab {
    width: 70px;
}

/* Left pane tabs - horizontal text (0 degrees) */
.left-tabs .tab-header,
.left-tabs .tab-subtitle {
    writing-mode: horizontal-tb;
    text-orientation: upright;
}

.tab-header {
    font-size: 16px !important;
}

/* Right pane tabs - vertical text (270 degrees) */
.right-tabs .vertical-tab,
.right-tabs .tab-header,
.right-tabs .tab-subtitle {
    writing-mode: vertical-lr;
    text-orientation: mixed;
}

/* =============================================================================
   Responsive Design
   ============================================================================= */


/* =============================================================================
   Two-Pane Layout
   ============================================================================= */

.two-pane-container {
    display: flex;
    height: calc(100vh - 60px);
    /* Account for navbar height */
    width: 100%;
    overflow: hidden;
    /* Prevent content from causing layout issues */
}

.left-pane {
    /* flex set dynamically by pane resizer JavaScript */
    min-width: 400px;
    display: flex;
    flex-direction: column;
    overflow-y: hidden;
    /* Prevent overall left pane scroll */
}

.right-pane {
    /* flex set dynamically by pane resizer JavaScript */
    min-width: 300px;
    display: flex;
    flex-direction: column;
    overflow-y: auto !important;
}

/* Mobile: use offcanvas for right pane and hide desktop resizer */
@media (max-width: 991.98px) {

    /* Make offcanvas take full viewport width/height on mobile */
    #right-pane-offcanvas.offcanvas {
        width: 100vw !important;
        max-width: 100vw !important;
    }

    /* Hide the resizer on small screens */
    #pane-resizer {
        display: none !important;
    }

    /* Optionally hide right tabs bar when commanded */
    #right-pane-offcanvas.hide-right-tabs .right-tabs {
        display: none !important;
    }

    /* Mobile: left pane shows combined "Load & Filter" layout like desktop (no single-section hiding). */

    /* Mobile: help drawer full width */
    .help-drawer {
        width: 70vw !important;
        right: -70vw !important;
    }

    .help-drawer.open {
        right: 0 !important;
    }

    .help-drawer.left {
        left: -70vw !important;
        right: auto !important;
    }

    .help-drawer.left.open {
        left: 0 !important;
    }
}

/* Desktop: behave like a normal pane (disable offcanvas visuals) */
@media (min-width: 992px) {
    #right-pane-offcanvas.offcanvas {
        position: static;
        transform: none !important;
        visibility: visible !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        transition: none !important;
    }

    /* Hide the offcanvas header on desktop (guarded by d-lg-none) */
    #right-pane-offcanvas .offcanvas-header {
        display: none !important;
    }
}

.pane-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

/* Right pane content needs horizontal layout for tabs on the right */
.right-pane .pane-content {
    flex-direction: row;
}

.pane-resizer {
    width: 3px;
    border-right: 1px dashed gray;
    border-left: 1px dashed gray;
    cursor: ew-resize;
    position: relative;
    /* Required for touchscreen dragging (prevents scroll/pan gesture stealing the drag). */
    touch-action: none;
    transition: background-color 0.2s;
    margin-right: 10px;
    margin-left: 10px;
}

.pane-resizer:hover {
    background-color: #aaa;
    transform: scaleX(2);
}

/* Prompt blocks: one rule — wrapper is the div whose direct child is the titled prompt textarea */
div:has(> textarea[data-prompt-title]) {
    background: var(--color-purple-light);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 0.5rem 0.65rem;
}
/* Simple Auto-code: retries select (digits 0–5) — wider than default auto width */
#ai-simple-auto-retries.form-select {
    min-width: 5.25rem;
}

/* each section: one bordered shell so header + panel read as a single accordion */
.ai-simple-section {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-bottom: 8px;
    border: 1px solid #cfbc7e;
    border-radius: 10px;
    overflow: hidden;
    background: var(--color-bg-white);
}
.ai-simple-section:last-child {
    margin-bottom: 0;
}
/* Inside AI Coding runner: stack Background / Auto-code / Revise / Recode flush (no vertical gap) */
#ai-simple-runner-settings-collapse > .ai-simple-section {
    margin-bottom: 0;
    border-radius: 0;
}
#ai-simple-runner-settings-collapse > .ai-simple-section + .ai-simple-section {
    border-top: none;
}
/* Flush under Run all card: no double top border */
#ai-simple-background-container {
    border-top: none;
}
/* Single rounded bottom for the whole stack */
#ai-simple-factor-output-widget {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}
/* section heading row: label + action (button/tick) on one line */
.ai-simple-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    width: 100%;
    background: linear-gradient(180deg, #f4f1e0 0%, #eae2c6 100%);
    border: none;
    border-radius: 0;
    border-bottom: 1px solid #d5c79a;
    box-shadow: 0 2px 7px rgba(31, 41, 55, 0.14);
    position: relative;
    z-index: 1;
}
/* Open section: stronger active tint and shadow than closed headers */
.ai-simple-section--open > .ai-simple-section-header {
    background: linear-gradient(180deg, #efe5c5 0%, #e3d4a5 100%);
    border-bottom: 1px solid #c9b377;
    box-shadow: 0 4px 10px rgba(90, 74, 28, 0.24);
}
/* Runner stays default gold header; inner steps (Background → Recode) keep accent stripes */
#ai-simple-background-container {
    border-left: 4px solid #78716c;
}
#ai-simple-background-container > .ai-simple-section-header {
    background: linear-gradient(180deg, #f5f5f4 0%, #e7e5e4 100%);
    border-bottom-color: #a8a29e;
}
#ai-simple-background-container.ai-simple-section--open > .ai-simple-section-header {
    background: linear-gradient(180deg, #e7e5e4 0%, #d6d3d1 100%);
    border-bottom-color: #57534e;
    box-shadow: 0 4px 10px rgba(87, 83, 78, 0.12);
}
#ai-simple-background-container > .ai-simple-section-toggle:hover {
    background: linear-gradient(180deg, #efeeec 0%, #ddd9d6 100%);
}
#ai-simple-widget {
    border-left: 4px solid #64748b;
}
#ai-simple-widget > .ai-simple-section-header {
    background: linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 100%);
    border-bottom-color: #94a3b8;
}
#ai-simple-widget.ai-simple-section--open > .ai-simple-section-header {
    background: linear-gradient(180deg, #e2e8f0 0%, #cbd5e1 100%);
    border-bottom-color: #475569;
    box-shadow: 0 4px 10px rgba(71, 85, 105, 0.14);
}
#ai-simple-widget > .ai-simple-section-toggle:hover {
    background: linear-gradient(180deg, #e8edf4 0%, #d8dee9 100%);
}
#ai-simple-factor-suggest-widget {
    border-left: 4px solid #ca8a04;
}
#ai-simple-factor-suggest-widget > .ai-simple-section-header {
    background: linear-gradient(180deg, #fdf6e3 0%, #f0e2bd 100%);
    border-bottom-color: #d4a82a;
}
#ai-simple-factor-suggest-widget.ai-simple-section--open > .ai-simple-section-header {
    background: linear-gradient(180deg, #fcefc0 0%, #e8cf80 100%);
    border-bottom-color: #b8860b;
    box-shadow: 0 4px 10px rgba(154, 118, 12, 0.2);
}
#ai-simple-factor-suggest-widget > .ai-simple-section-toggle:hover {
    background: linear-gradient(180deg, #f9ecd0 0%, #e6d49d 100%);
}
#ai-simple-factor-output-widget {
    border-left: 4px solid #0d9488;
}
#ai-simple-factor-output-widget > .ai-simple-section-header {
    background: linear-gradient(180deg, #e8f7f5 0%, #cceee9 100%);
    border-bottom-color: #5fb3aa;
}
#ai-simple-factor-output-widget.ai-simple-section--open > .ai-simple-section-header {
    background: linear-gradient(180deg, #d0f0ea 0%, #9dd9ce 100%);
    border-bottom-color: #0f766e;
    box-shadow: 0 4px 10px rgba(13, 116, 109, 0.18);
}
#ai-simple-factor-output-widget > .ai-simple-section-toggle:hover {
    background: linear-gradient(180deg, #daf5f1 0%, #b8e8df 100%);
}
.ai-simple-section-header h6 {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-primary, #212529);
    text-transform: none;
    letter-spacing: 0;
}
/* AI Coding title uses h5 — match subsection title weight/size */
.ai-simple-section-header h5 {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text-primary, #212529);
}
/* Nested Summarise under Auto-code: violet accent (distinct from slate Auto-code stripe) */
.ai-simple-summarise-panel {
    background: linear-gradient(180deg, #f5f3ff 0%, #ede9fe 100%);
    border-color: #c4b5fd !important;
    border-left: 4px solid #7c3aed !important;
}
.ai-simple-summarise-panel > #ai-simple-summarise-header.ai-simple-section-header {
    background: linear-gradient(180deg, #ede9fe 0%, #ddd6fe 100%);
    border-bottom: 1px solid #a78bfa;
    box-shadow: none;
}
.ai-simple-summarise-panel:has(#ai-simple-summarise-settings-collapse.show) > #ai-simple-summarise-header.ai-simple-section-header {
    background: linear-gradient(180deg, #ddd6fe 0%, #c4b5fd 100%);
    border-bottom-color: #7c3aed;
    box-shadow: 0 3px 8px rgba(124, 58, 237, 0.14);
}
#ai-simple-summarise-header.ai-simple-section-toggle:hover {
    background: linear-gradient(180deg, #e9e5ff 0%, #dcd6ff 100%);
}
.ai-simple-summarise-panel #ai-simple-summarise-settings-collapse > .card {
    background: rgba(255, 255, 255, 0.42);
}
.ai-simple-summarise-panel #ai-simple-summarise-settings-collapse .card-body {
    background: transparent;
}
.ai-simple-go-btn {
    min-width: 78px;
    justify-content: center;
    margin-left: auto;
}
.ai-simple-header-help-btn {
    margin-left: 8px;
    padding: 0.15rem 0.4rem;
    line-height: 1;
}
.ai-simple-coded-bar {
    width: 50px;
    height: 6px;
    display: flex;
    background: var(--bs-secondary-bg, #e9ecef);
    border-radius: 3px;
    overflow: hidden;
}
.ai-simple-coded-bar-fill {
    width: 0%;
    background: var(--bs-success, #198754);
    transition: width 0.2s ease;
}
.ai-simple-recode-bar {
    width: 64px;
}
.ai-simple-recode-empty {
    background: var(--bs-secondary-bg, #e9ecef);
}
.ai-simple-recode-same {
    background: var(--bs-warning, #ffc107);
}
.ai-simple-recode-changed {
    background: var(--bs-success, #198754);
}
/* After Revise codebook fills the codebook box: short green pulse */
@keyframes ai-simple-codebook-glow {
    0%,
    100% {
        box-shadow: 0 0 0 0 transparent;
        outline-color: transparent;
    }
    50% {
        box-shadow: 0 0 12px 2px rgba(81, 135, 86, 0.45);
        outline-color: rgba(81, 135, 86, 0.85);
    }
}
textarea#ai-simple-factor-output.ai-simple-codebook-pulse {
    outline: 2px solid transparent;
    outline-offset: 2px;
    animation: ai-simple-codebook-glow 0.55s ease-in-out 2;
}
/* clickable section headers with inline chevron */
.ai-simple-section-toggle {
    cursor: pointer;
    border-radius: 0;
    transition: background-color 0.2s ease;
    line-height: 1;
    color: var(--color-text-muted, #6c757d);
    width: 100%;
    text-align: left;
}
.ai-simple-section-toggle:hover {
    background: linear-gradient(180deg, #f1ead0 0%, #e6dbb5 100%);
}
.ai-simple-header-chevron {
    margin-left: 8px;
    flex: 0 0 auto;
    opacity: 0.9;
    transition: transform 0.2s ease;
}
.ai-simple-runner-disabled-note {
    margin: 4px 10px 2px;
    font-size: 0.78rem;
    color: var(--bs-danger, #dc3545);
}
/* panel body: fills section shell (no second outer box) */
#ai-simple-panel .ai-simple-panel-wrapper .card {
    background-color: #f8fafc;
    border: none;
    border-radius: 0;
    width: 100%;
    margin-top: 0;
}
/* Slightly roomier vertical rhythm between widget rows (overrides utility py-2 / mb-2 in markup) */
#ai-simple-panel .ai-simple-panel-wrapper .card.card-body {
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
}
#ai-simple-panel .ai-simple-panel-wrapper .card.card-body .mb-2 {
    margin-bottom: 0.75rem !important;
}
#ai-simple-panel .ai-simple-panel-wrapper .card.card-body .mt-2 {
    margin-top: 0.75rem !important;
}
/* AI coding panel lives under Create links (above source text) */
#ai-simple-panel {
    display: block;
}
.sources-simple-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 4px;
}
/* Override global .project-selector-container { margin-bottom: 10px } — label set row sits directly under */
#sourcesHeader.project-selector-container {
    margin-bottom: 2px !important;
}
.sources-simple-wrapper #sourcesHeader {
    transition: opacity 0.25s ease, background-color 0.25s ease, border-color 0.25s ease, min-height 0.25s ease, padding 0.25s ease;
}
.left-content {
    /* Inherits from .main-content */
    min-width: 400px;
    overflow-y: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.right-content {
    /* Inherits from .main-content */
}

/* =============================================================================
   Custom Columns Widget
   ============================================================================= */

.custom-columns-widget {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 12px;
    margin-bottom: 15px;
}

.custom-columns-widget h6 {
    margin: 0 0 10px 0;
    font-size: 14px;
    font-weight: 600;
    color: #495057;
}

.custom-columns-controls {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}

.custom-columns-controls .btn {
    font-size: 10px;
    padding: 2px 6px;
    font-weight: 600;
    min-width: 20px;
    line-height: 1;
}

.columns-display {
    font-size: 12px;
    color: #6c757d;
    font-style: italic;
}

/* =============================================================================
   Sources Panel Buttons
   ============================================================================= */

.sources-panel-buttons {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 0;
    padding: 10px 15px;
    background-color: var(--color-bg-subtle);
    border-radius: 6px;
    margin-bottom: 15px;
    margin-top: 0;
    border: 1px solid var(--color-green) !important;
    min-height: 48px;
    /* normalize row height */
}

/* Ensure nested inline-flex rows align consistently */
#links-button-bar .sources-panel-buttons {
    align-items: center;
}

/* Compact row (row3) still uses the same min-height for alignment */
#links-controls-row3.sources-panel-buttons {
    min-height: 48px;
}

.sources-panel-left {
    display: flex;
    align-items: center;
    gap: 0;
}

.sources-panel-right {
    display: flex;
    align-items: center;
}

/* Unified button sizing for all panel buttons */
.sources-btn,
#links-button-bar .btn,
.sources-panel-buttons .btn {
    min-width: 36px !important;
    height: 32px !important;
    padding: 6px 10px !important;
    font-size: 14px !important;
    line-height: 1 !important;
    border-radius: 4px !important;
    transition: all 0.2s ease !important;
    /* Use unified button system */
    background-color: var(--color-bg-white);
    border: 1px solid var(--color-border) !important;
    color: var(--color-text-primary) !important;
}

/* Button groups with clean borders */
.btn-group,
.sources-btn-group {
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.btn-group .btn:first-child,
.sources-btn-group .sources-btn:first-child {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.btn-group .btn:last-child,
.sources-btn-group .sources-btn:last-child {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.btn-group .btn:not(:first-child):not(:last-child),
.sources-btn-group .sources-btn:not(:first-child):not(:last-child) {
    border-radius: 0 !important;
}

.btn-group .btn:not(:last-child),
.sources-btn-group .sources-btn:not(:last-child) {
    border-right: none !important;
}

/* Ensure proper border connection in groups */
.btn-group .btn+.btn,
.sources-btn-group .sources-btn+.sources-btn {
    margin-left: 0 !important;
}

.sources-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* Consistent icon width for all buttons */
.sources-btn i {
    width: 14px;
    text-align: center;
    display: inline-block;
}

/* Sources table styling improvements */
#sources-table-container {
    border: 1px solid #dee2e6;
    border-radius: 4px;
    width: 85vw;
}

/* Bulk delete button margin */
#bulk-delete-sources-btn {
    margin-right: 30px;
}

#sources-table-container table {
    margin-bottom: 0;
}

#sources-table-container th {
    font-size: 12px;
    font-weight: 600;
    color: #495057;
}

#sources-table-container td {
    font-size: 12px;
}

#sources-table-container .form-control-sm {
    min-height: 24px;
    line-height: 1.2;
}

/* Keyboard navigation highlighting */
#sources-table-container input:focus {
    box-shadow: 0 0 0 2px rgba(81, 135, 86, 0.25);
    border-color: #518756;
}

/* =============================================================================
   Enhanced Tables with Integrated Filters
   ============================================================================= */

/* Enhanced table filters in headers */
.table-secondary th {
    background-color: #e9ecef !important;
    border-bottom: 2px solid #dee2e6 !important;
    vertical-align: middle;
}

.table-secondary th input,
.table-secondary th select {
    border: 1px solid #ced4da;
    background-color: white;
}

.table-secondary th input:focus,
.table-secondary th select:focus {
    border-color: #80bdff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* Sort icons */
.sort-icon {
    margin-left: 5px;
    font-size: 12px;
}

/* Pagination styling */
.table-pagination {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #dee2e6;
}

.pagination-info {
    font-size: 14px;
    color: #6c757d;
}

/* Table row selection */
.table tbody tr.table-primary {
    background-color: rgba(13, 110, 253, 0.1) !important;
}

.table tbody tr:hover {
    background-color: rgba(0, 0, 0, 0.05) !important;
    cursor: pointer;
}

/* Clickable headers */
.table th[onclick] {
    cursor: pointer;
    user-select: none;
}

.table th[onclick]:hover {
    background-color: #e9ecef !important;
}

#source-preloader-container {
    border: 2px solid var(--color-green);
    border-radius: 8px;
    padding: 15px;
}


/* =============================================================================
   Filter Pipeline Widget
   ============================================================================= */
#link-creation-panel {
    /* height: calc(100vh - 340px); */
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.filter-content-scrollable {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

/* Individual tab panels with box-shadow and border-radius */
#create-link-content,
#filter-link-content {
    /* box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
        border-radius: 0.375rem; */
}

.filter-pipeline-widget {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 15px;
}

.filter-pipeline-header h6 {
    color: #495057;
    font-weight: 600;
}

/* Keep top-level pipeline enabled switch vertically aligned with btn-xs buttons */
.filter-pipeline-master-toggle {
    min-height: 28px;
    vertical-align: middle;
}

.filter-pipeline-master-toggle .form-check-input {
    margin-top: 0;
}

.filter-pipeline-master-toggle .form-check-label {
    margin-bottom: 0;
    line-height: 1;
}

.filter-pipeline-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

/* Compact filter styles */
.filter-widget-compact {
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 8px 12px;
    min-height: 40px;
    transition: all 0.2s ease;
    width: 100%;
    margin-bottom: 0 !important;
}

.filter-widget-compact:hover {
    border-color: #7c3aed;
    box-shadow: 0 2px 4px rgba(124, 58, 237, 0.1);
}

/* Filter Links subtab nav: mark when pipeline is off or every filter row is disabled */
#filter-link-tab.filter-links-tab-inactive .fa-filter {
    position: relative;
    opacity: 0.6;
}
#filter-link-tab.filter-links-tab-inactive .fa-filter::after {
    content: '';
    position: absolute;
    left: -1px;
    right: -1px;
    top: 50%;
    height: 2px;
    background: currentColor;
    transform: translateY(-50%) rotate(-20deg);
    border-radius: 1px;
    pointer-events: none;
}

/* Master pipeline-off state for quick visual feedback in Filter Links panel */
.filter-pipeline-disabled .filter-pipeline-container {
    opacity: 0.55;
}

.filter-pipeline-disabled .filter-widget-compact {
    border-style: dashed;
}

.filter-header-compact {
    display: flex;
    align-items: center;
    margin-right: 6px;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    font-size: 12px;
    font-weight: 600;
    color: #495057;
    cursor: move;
    /* Allow touch drag-to-reorder without scroll stealing the gesture */
    touch-action: none;
    background-color: #e8e9ea;
    border-radius: 4px;
    padding: 4px 8px;
    min-height: 40px;
    height: auto;
    flex-wrap: wrap;
    row-gap: 4px;
}

.filter-header-compact .header-controls {
    flex-wrap: wrap;
    justify-content: flex-end;
    max-width: 100%;
}

.filter-title-compact {
    white-space: nowrap;
}

.filter-content-compact {
    margin: 0;
    padding: 8px 8px 0 8px;
    position: relative;
}

.filter-remove-compact {
    width: 22px;
    height: 22px;
    padding: 0 !important;
    font-size: 12px;
    border: 1px solid #f5c6cb !important;
    background: #f8d7da !important;
    color: #dc3545 !important;
}

.filter-remove-compact:hover {
    background: #f1b0b7 !important;
    color: #bd2130 !important;
}

/* Enable-toggle alignment inside filter header */
.filter-header-compact .form-check.form-switch {
    transform: translateY(-50%);
    top: 50%;
}

/* Filter widget compact styling */
.filter-widget-compact {
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 8px 12px;
    margin-bottom: 8px;
}


.filter-title-compact {
    font-size: 12px;
    font-weight: 500;
    color: #495057;
}

.filter-content-compact {
    position: relative;
    /* padding inherited from rule above; margin 0 for consistency */
}

.selectize-tags-compact {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
    min-height: 0;
}

.selectize-tags-compact .selectize-tag {
    font-size: 10px;
    padding: 2px 6px;
}

.pipeline-step {
    background: white;
    border: 2px solid #dee2e6;
    border-radius: 6px;
    padding: 12px 16px;
    min-width: 250px;
    text-align: center;
    transition: all 0.2s ease;
}

.pipeline-step.pipeline-fixed {
    border-color: #6c757d;
    background: #f1f3f4;
}

.pipeline-step.pipeline-draggable {
    border-color: #7c3aed;
    cursor: move;
    background: #fff;
}

.pipeline-step.pipeline-draggable:hover {
    border-color: #5b21b6;
    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.2);
    transform: translateY(-1px);
}

.pipeline-step.pipeline-output {
    border-color: #518756;
    background: #f8fff9;
}

.step-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 500;
}

.step-header i {
    width: 16px;
    text-align: center;
}

.pipeline-arrow {
    color: #6c757d;
    font-size: 18px;
    font-weight: bold;
    margin: 5px 0;
}

.pipeline-arrow.final-arrow {
    color: #518756;
}

/* Label Filter Specific */
.label-filter-content {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #e9ecef;
}

.label-filter-selectize {
    margin-bottom: 0;
}

.filter-remove-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #dc3545;
    color: white;
    border: none;
    font-size: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.filter-remove-btn:hover {
    background: #c82333;
}

.pipeline-step.pipeline-draggable {
    position: relative;
}

/* Drag and drop states */
.pipeline-step.drag-over {
    border-color: #ffc107;
    background: #fff3cd;
}

.pipeline-step.dragging {
    opacity: 0.5;
    transform: rotate(3deg);
}

/* Filter counter */
.filter-counter {
    font-size: 11px;
    color: #6c757d;
    margin-top: 4px;
}

#draggable-filters-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

#draggable-filters-container:empty::before {
    content: "Add filters above to build your pipeline";
    color: #6c757d;
    font-style: italic;
    font-size: 14px;
    padding: 20px;
    text-align: center;
}

/* Filter type menu */
.filter-type-menu {
    position: absolute;
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 10020;
    min-width: 200px;
    max-height: calc(80vh - 60px) !important;
    /* limit height to viewport minus navbar */
    overflow-y: auto !important;
    /* enable scrolling when content exceeds max-height */
}

.filter-type-option {
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid #f8f9fa;
    transition: background-color 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.filter-type-option:last-child {
    border-bottom: none;
}

.filter-type-option:hover {
    background-color: #f8f9fa;
}

.filter-type-option i {
    width: 16px;
    margin-right: 8px;
    flex-shrink: 0;
}

.filter-type-title {
    font-weight: 500;
    color: #495057;
    margin-right: 4px;
    flex-shrink: 0;
}

.filter-type-desc {
    font-size: 12px;
    color: #6c757d;
    margin-top: 2px;
    flex: 1;
}

.filter-menu-separator {
    height: 1px;
    background: #dee2e6;
    margin: 8px 0;
}

.text-viewer-header.sticky-top {
    z-index: 500 !important;
}

#project-selector-input {
    border: 1px solid #518756 !important;
    /* unified */
}

/* Citation Filter Specific */
.citation-filter-content {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #e9ecef;
}

.citation-slider-container {
    margin-bottom: 0;
}

.citation-slider {
    width: 100%;
    margin: 5px 0;
}

.citation-value-display {
    font-weight: 500;
    color: #495057;
    text-align: center;
    margin-top: 2px;
    font-size: 12px;
}

/* Prevent dragging on slider elements */
.no-drag,
.form-range,
input[type="range"] {
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
    pointer-events: auto !important;
}

/* Ensure slider containers don't interfere with drag events */
.filter-content-compact {
    pointer-events: auto;
}

.filter-content-compact .no-drag {
    pointer-events: auto !important;
}

/* Match mode Start/Anywhere/Exact - horizontal btn-group, same as Min/Top, Sources/Citations */
.match-radio-group .btn-check+.btn-outline-secondary~.btn-check+.btn-outline-secondary {
    margin-left: -1px;
}

/* =============================================================================
   Help Drawer
   ============================================================================= */

.help-drawer {
    position: fixed;
    top: 0;
    right: -33.333vw;
    /* Hidden initially, 1/3 of viewport width */
    width: 33.333vw;
    height: 100vh;
    background: white;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
    z-index: 9999;
    transition: right 1s ease-in-out, left 1s ease-in-out;
    /* border-left: 1px solid #e5e7eb;.help-drawer-header {.help-drawer-header { */
    border: 1px solid var(--color-lightblue);
    display: flex;
    flex-direction: column;
}

.help-drawer.open {
    right: 0;
}

/* Left-sided help drawer behavior */
.help-drawer.left {
    right: auto;
    left: -33.333vw;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
}

.help-drawer.left.open {
    left: 0;
}

/* Screen crossing animation when flipping sides */
.help-drawer.crossing {
    transition: transform 1s ease-in-out;
}

.help-drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.2);
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

.help-drawer-overlay.active {
    opacity: 1;
    visibility: visible;
}

.help-drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    border-bottom: 1px solid #e5e7eb;
    background: var(--color-lightblue) !important;
    color: var(--color-green);
}

.help-drawer-search {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #e5e7eb;
    background: #f9fafb;
}

.help-drawer-external-link {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #e5e7eb;
    background: #f9fafb;
}

.help-drawer-external-link .btn {
    font-size: 0.9rem;
    border-color: #d1d5db;
    color: #6b7280;
}

.help-drawer-external-link .btn:hover {
    background-color: #f3f4f6;
    border-color: #9ca3af;
    color: #374151;
}

.help-search-btn {
    background-color: var(--color-green-light);
    border-color: var(--color-green-light);
    color: #1f1f36;
}

.help-search-btn:hover {
    background-color: #00e199;
    border-color: #00e199;
    color: #1f1f36;
}

.help-search-btn:focus {
    box-shadow: 0 0 0 0.2rem rgba(0, 255, 175, 0.25);
}

#help-search-input {
    font-size: 1.1rem;
}

#help-search-input:focus {
    border-color: var(--color-green-light);
    box-shadow: 0 0 0 0.2rem rgba(0, 255, 175, 0.25);
}

.help-search-highlight {
    background-color: #f7ed73;
    color: #1f1f36;
    padding: 0;
    font-weight: 500;
}

/* Current match highlighting - darker orange */
.help-search-highlight.help-search-current-match {
    background-color: #f97316;
    color: white;
    font-weight: 600;
}

.help-drawer-title {
    margin: 0;
    color: #374151;
    font-weight: 600;
}

.help-drawer-content {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

#help-content {
    padding: 1rem;
    font-size: 16px;
    /* Increased base font size for better readability in help drawer */
    line-height: 1.6;
}

/* Help content tree styles */
.help-section {
    margin-bottom: 0.5rem;
    scroll-margin-top: 100px;
    /* Account for help drawer search header */
}

/* Internal help links styling */
.internal-help-link {
    color: var(--color-blue) !important;
    text-decoration: none;
    border-bottom: 1px dotted var(--color-blue);
    transition: all 0.2s ease;
}

.internal-help-link:hover {
    color: var(--color-purple) !important;
    border-bottom-color: var(--color-purple);
    text-decoration: none;
}

/* Mermaid diagram styling */
.mermaid-diagram {
    margin: 1.5rem 0;
    text-align: center;
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 1rem;
    overflow-x: auto;
}

.mermaid-diagram.mermaid-rendered {
    background: transparent;
    border: none;
    padding: 0.5rem;
}

.mermaid-diagram svg {
    max-width: 100%;
    height: auto;
}

.help-section-header {
    cursor: pointer;
    padding: 0.75rem;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 0.375rem;
    margin-bottom: 0.25rem;
    transition: background-color 0.2s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.help-section-header:hover {
    background: #e9ecef;
}

.help-section-header.expanded {
    background: #e7f3ff;
    border-color: #0891b2;
}

.help-section-title {
    font-weight: 600;
    margin: 0;
    color: #374151;
}

.help-section-title.h1 {
    font-size: 1.25rem;
    color: #1f2937;
}

.help-section-title.h2 {
    font-size: 1.1rem;
    color: #374151;
}

/* Help drawer H2 cusp: left rounded coloured bar */
.help-section-title.h2 {
    position: relative;
    padding-left: 1.25rem;
    /* space for cusp */
}

.help-section-title.h2::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 8px;
    background: var(--help-cusp-default);
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}

/* Map special colours by README anchor IDs present on headers */
/* Files/Projects */
#project-selector-header>.help-section-title.h2::before,
#projects-panel>.help-section-title.h2::before {
    background: var(--projects-colour);
}

/* Sources */
#sourcesHeader>.help-section-title.h2::before,
#sources-panel>.help-section-title.h2::before {
    background: var(--sources-colour);
}

/* Actions (Create/Filter Links) */
#create-link-tab>.help-section-title.h2::before,
#filter-link-tab>.help-section-title.h2::before {
    background: var(--color-orange);
}

/* Outputs */
#map-panel>.help-section-title.h2::before,
#factors-panel>.help-section-title.h2::before,
#links-panel>.help-section-title.h2::before,
#pivot-panel>.help-section-title.h2::before,
#answers-panel>.help-section-title.h2::before,
#responses-panel>.help-section-title.h2::before {
    background: var(--help-cusp-outputs);
}

/* Standalone help page cusps (scoped to docs page containers) */
.docs-content h2.help-section-title {
    position: relative;
    padding-left: 1.75rem;
}

.docs-content h2.help-section-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 10px;
    background: var(--help-cusp-default);
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}

#edit-project-description {
    border: 2px solid var(--color-green) !important;
    font-size: large !important;
}

/* Standalone help: map colours by README anchor IDs */
#project-selector-header>h2.help-section-title::before,
#projects-panel>h2.help-section-title::before {
    background: var(--projects-colour);
}

#sourcesHeader>h2.help-section-title::before,
#sources-panel>h2.help-section-title::before {
    background: var(--sources-colour);
}

#create-link-tab>h2.help-section-title::before,
#filter-link-tab>h2.help-section-title::before {
    background: var(--color-orange);
}

#map-panel>h2.help-section-title::before,
#factors-panel>h2.help-section-title::before,
#links-panel>h2.help-section-title::before,
#pivot-panel>h2.help-section-title::before {
    background: var(--color-pink);
}

/* Report Builder – yellow */
#report-panel>h2.help-section-title::before {
    background: var(--color-yellow);
}

/* DEPRECATED: Old bookmarks panel cusp styling */
/* #bookmarks-panel>h2.help-section-title::before {
    background: var(--color-yellow);
} */

/* AI answers and Responses – default grey */
#answers-panel>h2.help-section-title::before,
#responses-panel>h2.help-section-title::before {
    background: var(--help-cusp-default);
}

/* Responses table: single-line rows, truncated cells with tooltips */
#responses-table {
    table-layout: fixed;
}
#responses-table tbody td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0.25rem 0.35rem;
    line-height: 1.3;
}
#responses-table tbody td:first-child,
#responses-table tbody td[colspan] {
    max-width: none;
    overflow: visible;
    white-space: normal;
}
#responses-table tbody td:first-child {
    padding: 0.15rem 0.25rem;
}

/* Standalone help TOC cusps */
.toc-container .toc-link {
    position: relative;
    padding-left: 1.25rem;
}

.toc-container .toc-link::before {
    content: "";
    position: absolute;
    left: 0.5rem;
    top: 0.2rem;
    bottom: 0.2rem;
    width: 6px;
    background: var(--help-cusp-default);
    border-radius: 6px;
}

.toc-container a.toc-link[href="#project-selector-header"]::before,
.toc-container a.toc-link[href="#projects-panel"]::before {
    background: var(--projects-colour);
}

.toc-container a.toc-link[href="#sourcesHeader"]::before,
.toc-container a.toc-link[href="#sources-panel"]::before {
    background: var(--sources-colour);
}

.toc-container a.toc-link[href="#create-link-tab"]::before,
.toc-container a.toc-link[href="#filter-link-tab"]::before {
    background: var(--color-orange);
}

.toc-container a.toc-link[href="#map-panel"]::before,
.toc-container a.toc-link[href="#factors-panel"]::before,
.toc-container a.toc-link[href="#links-panel"]::before,
.toc-container a.toc-link[href="#pivot-panel"]::before {
    background: var(--color-pink);
}

/* Bookmarks – yellow */
.toc-container a.toc-link[href="#bookmarks-panel"]::before {
    background: var(--color-yellow);
}

/* AI answers and Responses – default grey */
.toc-container a.toc-link[href="#answers-panel"]::before,
.toc-container a.toc-link[href="#responses-panel"]::before {
    background: var(--help-cusp-default);
}

.help-section-title.h3 {
    font-size: 1rem;
    color: #4b5563;
}

/* Provide sizes for h4/h5 in help drawer */
.help-section-title.h4 {
    font-size: 0.95rem;
    color: #4b5563;
}

.help-section-title.h5 {
    font-size: 0.9rem;
    color: #4b5563;
}

.help-expand-icon {
    transition: transform 0.2s ease;
    color: #6b7280;
}

.help-expand-icon.expanded {
    transform: rotate(90deg);
}

.help-section-content {
    display: none;
    padding: 1rem;
    background: white;
    border: 1px solid #e9ecef;
    border-top: none;
    border-radius: 0 0 0.375rem 0.375rem;
    margin-bottom: 0.25rem;
}

.help-section-content.expanded {
    display: block;
}

.help-section-content p {
    margin-bottom: 0.75rem;
    line-height: 1.6;
    color: #374151;
}

.help-section-content ul,
.help-section-content ol {
    margin-bottom: 0.75rem;
    padding-left: 1.5rem;
}

.help-section-content li {
    margin-bottom: 0.25rem;
    line-height: 1.5;
    color: #374151;
}

/* Nested list styling */
.help-section-content ul ul,
.help-section-content ol ol,
.help-section-content ul ol,
.help-section-content ol ul {
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
    padding-left: 1.25rem;
}

/* Different bullet styles for nested lists */
.help-section-content ul {
    list-style-type: disc;
}

.help-section-content ul ul {
    list-style-type: circle;
}

.help-section-content ul ul ul {
    list-style-type: square;
}

/* Ordered list styling */
.help-section-content ol {
    list-style-type: decimal;
}

.help-section-content ol ol {
    list-style-type: lower-alpha;
}

.help-section-content ol ol ol {
    list-style-type: lower-roman;
}

/* Help anchor links */
.help-anchor-link {
    color: inherit;
    text-decoration: none;
}

.help-anchor-link:hover {
    color: var(--accent-color, #3498db);
    text-decoration: none;
}

.help-section-header:hover .help-anchor-link::after {
    content: " \f0c1";
    /* FontAwesome link icon */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.7em;
    color: #888;
    margin-left: 0.25rem;
    transition: color 0.2s ease;
}

.help-section-header:hover .help-anchor-link:hover::after {
    color: var(--accent-color, #3498db);
}

.help-section-content code {
    background: #f3f4f6;
    padding: 0.125rem 0.25rem;
    border-radius: 0.25rem;
    font-size: 0.875rem;
    color: #1f2937;
}

.help-section-content pre {
    background: #f3f4f6;
    padding: 0.75rem;
    border-radius: 0.375rem;
    overflow-x: auto;
    font-size: 0.875rem;
    margin-bottom: 0.75rem;
}

/* Nested sections */
.help-section .help-section {
    margin-left: 1rem;
}

.help-section .help-section .help-section-header {
    background: #ffffff;
    border-color: #d1d5db;
}

.help-section .help-section .help-section-header:hover {
    background: #f9fafb;
}

.help-section .help-section .help-section-header.expanded {
    background: #f0f9ff;
    border-color: #0891b2;
}

.contextual-help-btn i {
    font-size: 1.2em;
    color: inherit;
    font-weight: 900;
}


/* (removed legacy panelGlow animation – unified glow handled in JS) */

/* =============================================================================
   Filter Badge for Tabs
   ============================================================================= */

.filter-badge {
    margin-top: 2px;
    font-size: 10px;
    max-width: 100%;
}

.filter-badge .badge {
    font-size: 9px;
    padding: 2px 6px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: normal;
    word-wrap: break-word;
    line-height: 1.2;
    display: inline-block;
    max-width: 100%;
}

.filter-badge .badge:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 4px var(--color-pink);
}

/* =============================================================================
   Highlight Navigation Styling
   ============================================================================= */

/* Active highlight styling */
.active-highlight {
    background-color: #ffff00 !important;
    border: 2px solid #ffc107 !important;
    border-radius: 4px !important;
    box-shadow: 0 0 8px rgba(255, 193, 7, 0.5) !important;
    position: relative;
    z-index: 5;
}

/* Focused factor highlighting */
.factor-focused {
    border: 2px solid #7dccdd !important;
    box-shadow: 0 0 4px rgba(125, 204, 221, 0.5) !important;
}

/* For cytoscape nodes */
.cy-node-focused {
    border-width: 3px !important;
    border-color: #7dccdd !important;
}

#ai-submit-btn {
    width: 80px !important;
}

/* =============================================================================
   Manage Panel Animation
   ============================================================================= */

/* Collapsible manage panels animation */
.manage-panel {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.8s ease, opacity 0.8s ease;

}


.manage-panel.open {
    max-height: 2000px;
    background-color: #f8cccc;
    /* large enough */
    opacity: 1;
    padding-bottom: 20px;
    margin-bottom: 30px;
    padding-top: 10px;
    padding-right: 10px;
    border-radius: 10px;
    border: 2px solid #ff8fb8;
    margin-left: 5px;
    margin-right: 5px;
}



.manage-panel {
    padding-left: 10px;
}

/* Toggle buttons for slide-down panels */
.toggle-panel-btn {
    background-color: #fff !important;
    border: none;
    color: #518756 !important;
    transition: all 0.3s ease;
}

.toggle-panel-btn:hover {
    background-color: #518756 !important;
    color: white !important;
}

.toggle-panel-btn.active {
    background-color: #ff8fb8 !important;
    color: white !important;
    border-color: #ff8fb8 !important;
}

.toggle-panel-btn.active:hover {
    background-color: #e17ca4 !important;
    border-color: #e17ca4 !important;
}

#new-accordion {
    margin-top: 0 !important;
}

/* Fullscreen functionality removed */

/* Removed - using unified button system */

/* =============================================================================
   Enhanced Tabulator Styling
   ============================================================================= */

/* Grouping controls styling */
#links-grouping-controls {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 12px 16px;
}

#links-grouping-controls .form-label {
    font-weight: 600;
    color: #495057;
}

#links-group-select {
    min-width: 150px;
}

/* Tabulator table enhancements */
.tabulator {
    border: 1px solid var(--color-green) !important;
    border-radius: 6px !important;
    overflow: hidden;
    display: flex !important;
    flex-direction: column !important;
}

/* Prevent flexbox from shrinking the header/footer (can clip header filters on redraw) */
.tabulator .tabulator-header,
.tabulator .tabulator-footer {
    flex-shrink: 0 !important;
}


.tabulator .tabulator-header {
    max-height: 150px !important;
    border-bottom: 2px solid #dee2e6 !important;
}

.tabulator .tabulator-col {
    border-right: 1px solid #e9ecef !important;
}

.tabulator .tabulator-col-title {
    font-weight: 600 !important;
    color: #495057 !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
}

/* Group headers */
.tabulator .tabulator-group {
    background: #e9ecef !important;
    border-bottom: 1px solid #dee2e6 !important;
}

.tabulator .tabulator-group .tabulator-group-header {
    padding: 10px 15px !important;
    font-size: 14px !important;
}

.tabulator .tabulator-group .tabulator-group-header:hover {
    background: #e2e6ea !important;
    cursor: pointer;
}

/* Row styling */
.tabulator .tabulator-row {
    border-bottom: 1px solid #f1f3f4 !important;
    /* Tabulator theme sets a min-height on rows; unset it so padding/rowHeight can control density */
    min-height: unset !important;
}

/* Striped rows - subtle alternating background */
.tabulator .tabulator-row:nth-child(even) {
    background: rgba(0, 0, 0, 0.015) !important;
    /* Very subtle stripe - half as dark as typical Bootstrap stripes */
}

/* Extra-specific override: ensure theme row min-height never wins */
.tabulator .tabulator-tableholder .tabulator-table .tabulator-row {
    min-height: unset !important;
}

.tabulator-row.tabulator-selected,
.tabulator-row.tabulator-selected.hover,
.tabulator-row:nth-child(even).tabulator-selected,
.tabulator-row.tabulator-selected:hover,
.tabulator-row.tabulator-selected.active {
    background-color: var(--color-yellow) !important;
}

.tabulator .tabulator-row:hover {
    background-color: var(--color-yellow) !important;

}

.tabulator .tabulator-row .tabulator-cell {
    border-right: 1px solid #f1f3f4 !important;
    vertical-align: middle !important;
    /* Compact Tabulator rows: reduce vertical whitespace */
    min-height: unset !important;
    /* override Tabulator theme min-height */
    padding-left: 8px !important;
    padding-right: 8px !important;
    padding-top: 1px !important;
    padding-bottom: 1px !important;
    line-height: 1.1 !important;
}

/* Conditional formatting cell overrides */
.tabulator .tabulator-row .tabulator-cell .numeric-cell {
    font-family: 'Courier New', monospace;
    text-align: center;
}

/* Pagination styling */
.tabulator .tabulator-footer {
    background: #f8f9fa !important;
    border-top: 1px solid #dee2e6 !important;
    padding: 10px 15px !important;
}

.tabulator .tabulator-paginator {
    color: var(--color-green) !important;
}

.tabulator .tabulator-page {
    background: white !important;
    border: 1px solid #dee2e6 !important;
    color: #495057 !important;
}

.tabulator .tabulator-page:hover {
    background: #e9ecef !important;
}

.tabulator .tabulator-page.active {
    background: #88aa9b !important;
    border-color: #88aa9b !important;
    color: white !important;
}

/* Admin Logs table filters - visually align with columns */
.admin-logs-filters-row {
    display: grid;
    grid-template-columns: minmax(150px, 1.2fr) minmax(180px, 1.5fr) minmax(180px, 1.5fr) minmax(150px, 1.1fr) minmax(160px, 1.1fr) minmax(220px, 2fr);
    column-gap: 8px;
    align-items: center;
}

.admin-logs-filter-cell {
    display: flex;
    align-items: center;
}

.admin-logs-filters-row .form-control,
.admin-logs-filters-row .form-select {
    height: 32px;
    font-size: 0.875rem;
}

/* Admin Logs scope toggle - add a small tick on the active button */
#logs-scope-toggle .btn.active::before {
    content: '✓';
    margin-right: 0.35rem;
}

/* Move pagination controls to top left */
.tabulator .tabulator-footer {
    justify-content: flex-start !important;
    order: -1 !important;
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
}

/* Ensure paginator appears right after page counter */
.tabulator .tabulator-paginator {
    margin-left: 0 !important;
    order: 2 !important;
}

.tabulator .tabulator-page-counter {
    order: 1 !important;
    margin-right: 15px !important;
    padding-top: 5px !important;

}

.tabulator {}

/* Ensure table header stays visible above everything */
.tabulator .tabulator-header {
    position: relative !important;
    z-index: 10 !important;
    background: white !important;
}

/* Header filter styling */
.tabulator .tabulator-header-filter input {
    border: 1px solid #ced4da !important;
    border-radius: 4px !important;
    padding: 4px 8px !important;
    font-size: 12px !important;
}

.tabulator .tabulator-header-filter input:focus {
    border-color: #88aa9b !important;
    box-shadow: 0 0 0 0.1rem rgba(136, 170, 155, 0.25) !important;
}

/* Header filter active (non-empty) styling */
.tabulator .tabulator-header-filter input:not(:placeholder-shown) {
    background-color: var(--projects-colour) !important;
    color: #fff !important;
    border-color: var(--projects-colour) !important;
}

.tabulator .tabulator-header-filter select:has(option:checked:not([value=""])) {
    background-color: var(--projects-colour) !important;
    color: #fff !important;
    border-color: var(--projects-colour) !important;
}

/* Your subscriptions table: prevent header wrap, keep columns readable */
#subs-status-table .tabulator-col-title {
    white-space: nowrap !important;
    word-wrap: normal !important;
}
#subs-status-table .tabulator {
    min-width: 900px;
}

.tabs-container.right-tabs>div:nth-child(3) {
    margin-top: 25px;

}

.tabs-container.right-tabs>div:nth-child(7) {
    margin-top: 25px;

}

/* Highlight active source filter button */
#toggle-source-preloader.active-filter i {
    color: var(--color-green) !important;
}

/* Ensure Steps Up/Down radio button rows wrap within their container */
.steps-radio-group {
    flex-wrap: wrap;
}

#overlay-save,
#save-project-btn,
#import-cm3-confirm,
#create-project-confirm,
#import-project-confirm,
#clone-project-confirm,
#ai-simple-process-btn {
    background-color: var(--color-green-light) !important;
    color: black !important;
}



#link-tabs {
    margin-bottom: 0;
}

/* Only the active tab should overlap the bottom border */
#link-tabs .nav-item {
    margin-bottom: 0;
    /* reset */
}

#link-tabs .nav-link {
    border: 2px solid transparent;
    border-bottom: none;
    background-color: #f8f9fa;
    color: #6c757d;
    font-weight: 500;
    transition: all 0.2s ease;
    border-radius: 0.375rem 0.375rem 0 0;
    margin-right: 2px;
}

#link-tabs .nav-link:hover {
    background-color: #e9ecef;
    color: #495057;
    border-color: #adb5bd #adb5bd transparent;
}

#link-tabs .nav-link.active {
    background-color: #ffffff;
    color: #518756;
    border-color: #518756 #518756 #ffffff;
    border-bottom: 2px solid #ffffff;
    font-weight: 600;
    position: relative;
    z-index: 10;
    margin-bottom: -2px;
    /* overlap container border */
}

/* After Run all applies post-run filters, briefly draw attention to Filter links tab */
@keyframes filter-link-tab-pulse-kf {
    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(81, 135, 86, 0);
    }
    50% {
        box-shadow: 0 0 0 4px rgba(81, 135, 86, 0.4);
    }
}
#filter-link-tab.filter-link-tab-pulse {
    position: relative;
    z-index: 12;
    animation: filter-link-tab-pulse-kf 0.75s ease-in-out 4;
}

/* Bigger subpanel tabs for sources panel */
.nav-link {
    padding: 0.4rem 0.75rem !important;
    font-size: 1.1rem !important;
    font-weight: 500 !important;
    color: var(--color-green) !important;
}


/* === Confirm buttons === */
.confirm-style {
    border: 2px solid var(--bs-primary);
    background-color: rgba(109, 196, 200, 0.15) !important;
    /* match light blue brand tint */
    color: var(--bs-primary);
}

.confirm-style:hover {
    background-color: rgba(109, 196, 200, 0.25);
}

/* === BEGIN Link Frequency Filter Tweaks === */
/* Make range sliders inside compact filter widgets fill available width */
.filter-widget-compact .form-range {
    flex: 1 1 160px;
    min-width: 120px;
}

/* Toggle/radio unselected: white bg, grey border, green text */
.btn-check+.btn-outline-secondary {
    border-color: #dee2e6 !important;
    color: var(--color-green) !important;
    background-color: var(--color-bg-white) !important;
}

/* Toggle/radio selected: pale green fill, green border/text */
.btn-check:checked+.btn-outline-secondary,
.btn-outline-secondary.active {
    border-color: var(--color-green) !important;
    color: var(--toggle-selected-text) !important;
    font-weight: 600 !important;
    background-color: var(--toggle-selected-bg) !important;
}

/* Hover/focus: subtle preview */
.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
    border-color: var(--color-green) !important;
    color: var(--color-green) !important;
}

/* Filter row: simple horizontal flex, wraps when needed */
.filter-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.filter-row:last-child {
    margin-bottom: 0;
}
.filter-input-wrap {
    flex: 1;
    min-width: 120px;
}
.filter-input-wrap .selectize-control {
    width: 100% !important;
}
/* Stack rows vertically when using filter-row layout */
.filter-content-compact:has(.filter-row) {
    display: flex;
    flex-direction: column;
    gap: 0;
}
/* Filters using Bootstrap flex utilities (link-frequency, factor-frequency) need flex container */
.filter-content-compact.flex-column {
    display: flex;
}

/* === END Link Frequency Filter Tweaks === */

/* === BEGIN Link Frequency Wrapper === */
.link-frequency-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    /* Allow shrinking but never overflow container */
    flex: 0 1 auto;
    min-width: 0;
}

/* === END Link Frequency Wrapper === */

/* Individual button groups should shrink if needed */
.link-frequency-options .btn-group {
    flex: 0 0 auto;
    white-space: nowrap;
    /* Ensure buttons don't break out even in tiny spaces */
    min-width: min-content;
}

/* Consistent inner borders: overlap adjacent buttons in btn-group (Min|Top, Sources|Citations) */
.btn-group .btn-check+.btn-outline-secondary~.btn-check+.btn-outline-secondary {
    margin-left: -1px;
}

/* =============================================================================
   Map Controls Spacing
   ============================================================================= */
#map-panel .row.align-items-center>.col-auto {
    margin-bottom: 5px;
}

#map-panel .row.align-items-center>.col-auto:not(:last-child) {
    margin-right: 5px;
}

/* =============================================================================
   Map Formatting Panel (subtle grouping pills)
   ============================================================================= */
#map-formatting-panel #map-formatting-groups .cmf-pill {
    /* Very subtle sectioning, compact and wrap-friendly */
    background-color: rgba(248, 249, 250, 0.75);
    border: 1px solid rgba(33, 37, 41, 0.08);
    border-radius: 12px;
    padding: 6px 10px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px;
    /* a bit more breathing room between controls */
}

#map-formatting-panel #map-formatting-groups .cmf-title {
    /* Small muted "chip" title to orient the user */
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #6c757d;
    align-self: center;
    margin-right: 2px;
}

/* Inside a pill, we don't want Bootstrap grid gutters */
#map-formatting-panel #map-formatting-groups .cmf-pill .col-auto {
    padding-left: 0;
    padding-right: 0;
}

/* Switches should sit nicely on the baseline */
#map-formatting-panel #map-formatting-groups .cmf-pill .form-check {
    margin-bottom: 0;
}

/* Bootstrap .form-switch uses negative margins that can overlap pill titles in flex layouts */
#map-formatting-panel #map-formatting-groups .cmf-pill .form-switch {
    padding-left: 0;
    /* remove reserved left gutter */
}

#map-formatting-panel #map-formatting-groups .cmf-pill .form-switch .form-check-input {
    margin-left: 0;
    /* kill negative margin that causes overlap */
    margin-top: 0;
    /* align nicely in flex */
    margin-right: 6px;
}

/* Keep sliders/selects from forcing vertical stacking inside pills */
#map-formatting-panel #map-formatting-groups .cmf-pill input.form-range {
    /* Force a real width (avoids odd % sizing in nested flex + col-auto) */
    /* ~2/3 of the previous smallest slider width */
    width: 120px !important;
    min-width: 110px;
    flex: 0 0 120px;
    max-width: 160px;
}

#map-formatting-panel #map-formatting-groups .cmf-pill select.form-select:not(#links-highlight-mode) {
    /* Keep selects compact inside pills */
    width: 100px;
    /* ~30% narrower */
    min-width: 85px;
    max-width: 140px;
}

/* Keep Links highlight readable (often long option text) */
#map-formatting-panel #map-formatting-groups #links-highlight-mode.form-select {
    width: 180px;
    /* ~30% narrower */
    min-width: 160px;
}

/* Wide groups (Factor) should size like Links (use full row space) */
#map-formatting-panel #map-formatting-groups .cmf-group-wide .cmf-pill {
    width: 100%;
}

/* =============================================================================
   Map Controls Overlay
   ============================================================================= */
#graph-wrapper {
    position: relative;
}

#graph-wrapper #map-controls {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 120;
    display: flex;
    gap: 6px;
    overflow: visible !important;
}

/* Ensure buttons inside overlay keep compact spacing */
#graph-wrapper #map-controls .btn {
    padding: 0.2rem 0.4rem;
}

#graph-wrapper #map-animation-frame-indicator {
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    z-index: 105;
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px solid #cfd4da;
    background: rgba(255, 255, 255, 0.9);
    color: #212529;
    font-size: 24px;
    font-weight: 600;
    max-width: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
    text-align: left;
}

#graph-container.map-loop-dim {
    opacity: 0.65;
    transition: opacity 180ms ease-in-out;
}

#graph-container.map-restart-blank {
    opacity: 0.0;
    transition: opacity 180ms ease-in-out;
}

/* TextViewer section heading style */
.section-heading {
    display: block;
    font-weight: 600;
    background-color: var(--color-yellow);
    color: var(--color-purple);
    padding: 2px 4px;
    margin-top: 15px;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
}

/* Sources delimiter preview styling */
#sources-delimiter-preview {
    max-height: 200px;
    overflow-y: auto;
    font-size: 0.8rem;
}

#sources-delimiter-preview h6 {
    color: var(--color-blue);
    margin-bottom: 8px;
    font-weight: 600;
}

#sources-delimiter-preview-content {
    line-height: 1.3;
}

#sources-delimiter-preview-content .mb-2 {
    padding: 4px 8px;
    border-radius: 3px;
    background-color: rgba(81, 135, 86, 0.05);
    border-left: 2px solid var(--color-blue);
}

#sources-delimiter-preview-content .text-success {
    color: var(--color-blue) !important;
    font-weight: 600;
    padding: 6px 8px;
    background-color: rgba(81, 135, 86, 0.1);
    border-radius: 4px;
    border: 1px solid rgba(81, 135, 86, 0.2);
}

#sources-delimiter-preview-content .text-muted {
    color: var(--color-text-muted) !important;
    font-size: 0.75rem;
    padding-left: 8px;
}

/* Upload modal enhancements */
.modal-lg .modal-body {
    max-height: 90vh;
    overflow-y: auto;
}

/* Upload confirm modal: make unchecked checkbox clearly visible + keep bullets readable */
#upload-confirmation-modal .form-check-input {
    border: 2px solid #6c757d;
    width: 1.15rem;
    height: 1.15rem;
}

#upload-confirmation-modal .form-check-input:focus {
    box-shadow: 0 0 0 0.2rem rgba(217, 122, 0, 0.25);
}

#upload-confirmation-modal ul.small {
    font-size: 1rem;
}

/* =============================================================================
   Modal Positioning - Unified Top Offset
   ============================================================================= */
/* Standard top offset for all modals */
.modal-dialog {
    margin-top: 100px;
}

/* Ensure Versions Management modal stacks above navbar */
#version-management-modal {
    z-index: 10000 !important;
    /* navbar is 9999 */
}

/* Project and edit source modals - keep fixed positioning for height control */
#project-modal .modal-dialog,
#edit-source-modal .modal-dialog {
    position: fixed;
    top: 100px;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
}

#project-modal .modal-dialog {
    width: 50vw;
    max-width: 50vw;
}


#project-modal .modal-content,
#edit-source-modal .modal-content {
    height: 90vh;
}

/* Edit Project collapsible headers: full-width click area, no white background */
#edit-details-card .card-header,
#edit-sharing-card .card-header,
#edit-project-bookmarks-card .card-header {
    background-color: transparent !important;
    /* lose white background */
    border-bottom: 1px solid var(--color-border, #e5e7eb);
}

#edit-details-card .card-header .btn,
#edit-sharing-card .card-header .btn,
#edit-project-bookmarks-card .card-header .btn {
    width: 100%;
    text-align: left;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

#edit-details-card .card-header .btn:focus,
#edit-details-card .card-header .btn:hover,
#edit-details-card .card-header .btn:active,
#edit-sharing-card .card-header .btn:focus,
#edit-sharing-card .card-header .btn:hover,
#edit-sharing-card .card-header .btn:active,
#edit-project-bookmarks-card .card-header .btn:focus,
#edit-project-bookmarks-card .card-header .btn:hover,
#edit-project-bookmarks-card .card-header .btn:active {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

#upload-files-table .badge {
    font-size: 0.65rem;
    padding: 0.15rem 0.3rem;
}

#upload-files-table .table-success {
    background-color: rgba(81, 135, 86, 0.1);
}

#upload-files-table .table-success td {
    border-color: rgba(81, 135, 86, 0.2);
}

/* Sources delimiter input area */
#sources-delimiter-input {
    font-family: 'Courier New', monospace;
    font-size: 0.8rem;
    background-color: rgba(81, 135, 86, 0.03);
    border: 1px solid rgba(81, 135, 86, 0.2);
}

#sources-delimiter-input:focus {
    background-color: rgba(81, 135, 86, 0.05);
    border-color: var(--color-blue);
    box-shadow: 0 0 0 0.2rem rgba(81, 135, 86, 0.1);
}

/* Footer stays visible while the overlay body scrolls above it */
#causal-overlay-footer {
    position: relative;
    flex-shrink: 0;
    margin-top: 12px;
    padding-top: 10px;
    background: var(--color-bg-white);
    border-top: 1px solid var(--color-border);
    z-index: 5;
}

.causal-overlay-footer-layout {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.causal-overlay-footer-fields {
    flex: 1 1 420px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.causal-overlay-footer-row {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.causal-overlay-footer-field {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.causal-overlay-tags-field {
    flex: 1 1 280px;
}

.causal-overlay-tags-field .form-label,
.causal-overlay-plain-field .form-label,
.causal-overlay-sentiment-field .form-label {
    flex: 0 0 auto;
    margin-bottom: 0;
}

.causal-overlay-tags-field .selectize-control {
    flex: 1 1 auto;
    min-width: 220px;
}

.causal-overlay-sentiment-field {
    flex-wrap: wrap;
}

.causal-overlay-footer-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}

.causal-overlay-footer-tools {
    display: flex;
    align-items: center;
    gap: 10px;
}

#causal-overlay-footer .causal-overlay-footer-tools .form-check.form-switch,
#causal-overlay-footer .causal-overlay-plain-field .form-check.form-switch {
    margin-left: 0 !important;
}

#causal-overlay-footer .form-check.form-switch .form-check-input {
    width: 2.2rem;
    /* slightly smaller than default */
    height: 1.1rem;
    /* reduce visual bulk */
    background-color: #e9ecef;
    /* visible when off */
    border-color: #cfd4da;
}

#causal-overlay-footer .form-check.form-switch .form-check-input:focus {
    box-shadow: 0 0 0 0.15rem rgba(81, 135, 86, 0.25);
}

#causal-overlay-footer .form-check.form-switch .form-check-input:checked {
    background-color: var(--color-green-light);
    border-color: var(--color-green-light);
}

.fa-grip-vertical {
    color: white !important;
}

.fa-pencil {
    /* use primary brand colour for edit and external-link icons */
    color: var(--color-text-primary) !important;
    background-color: var(--color-green-light) !important;
}

.fa-external-link-alt {
    color: var(--color-purple) !important;
}

/* Load buttons - override icon color to white when inside primary buttons */
.btn-primary:not(#download-map-png-btn):not(#download-map-png-file-btn) .fa-external-link-alt,
.btn-primary[title*="Load"]:not(#download-map-png-btn):not(#download-map-png-file-btn) .fa-external-link-alt,
.btn[id*="load"]:not(.btn-outline-primary):not(#download-map-png-btn):not(#download-map-png-file-btn) .fa-external-link-alt,
.btn-outline-primary[id*="load"]:not(#download-map-png-btn):not(#download-map-png-file-btn) .fa-external-link-alt,
.btn-outline-primary[title*="Load"]:not(#download-map-png-btn):not(#download-map-png-file-btn) .fa-external-link-alt,
.btn-outline-primary:not(#download-map-png-btn):not(#download-map-png-file-btn) .fa-external-link-alt {
    color: white !important;
}

.brackets-icon {
    width: 16px;
    margin-right: 8px;
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 600;
    color: #6c757d;
    text-align: center;
    font-family: monospace;
}

/* Larger checkboxes specifically for the Links Tabulator table */
#links-table-container input[type="checkbox"] {
    transform: scale(1.4);
    cursor: pointer;
}

#link-tabs-content {
    border: 1.5px solid var(--color-green) !important;
    /* Single soft shadow (avoid “double line” with inner content shadows) */
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
    /* Flat top edge: rounded top-left/right caused a 1px gap vs tab bottom; only round bottom corners */
    border-radius: 0 0 0.375rem 0.375rem;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

#link-tabs-content .tab-pane {
    /* keep Bootstrap's default display:none for inactive panes */
}

#link-tabs-content .tab-pane.active {
    display: flex !important;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* Removed problematic custom selectize multi input styling that caused green highlighting */

/* Real Selectize.js Integration */
.selectize-control {
    width: 100% !important;
    /* Fill the parent container completely */
    background-color: transparent !important;
}

.selectize-control.multi .selectize-input {
    width: 100% !important;
    /* Fill the selectize control */
}

/* Real Selectize.js delete buttons - centered X, standard style */
.selectize-input .item .remove,
.selectize-control.multi .selectize-input [data-value] .remove {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 18px;
    height: 18px;
    min-width: 18px;
    font-size: 14px;
    font-weight: bold;
    color: var(--color-green);
    background: none;
    border: none;
    border-radius: 2px;
    margin-left: 4px;
    cursor: pointer;
    opacity: 0.8;
}

.selectize-input .item .remove:hover {
    color: var(--color-green);
    opacity: 1;
}

/* Target the parent div that has flex-grow: 1 */
.filter-content-compact div[style*="flex-grow: 1"] {
    display: flex !important;
    /* Ensure it's a flex container */
    flex: 1;
    /* Take all available space */
    min-width: 0;
    /* Allow shrinking */
}

/* Make sure selectize fills its flex parent */
.filter-content-compact div[style*="flex-grow: 1"] .selectize-control {
    width: 100% !important;
    flex: 1;
    /* Fill the parent */
}

/* Fix double scrollbar issue - prevent duplicate overflow rules */
.selectize-control .selectize-dropdown {
    position: absolute !important;
    z-index: 9999 !important;
    /* Remove duplicate overflow-y rule to prevent double scrollbars */
}

/* Fix double scrollbar issue - selectize dropdowns with form-control class */
.selectize-dropdown.form-control {
    overflow: visible !important;
    overflow-y: visible !important;
    overflow-x: visible !important;
    height: auto !important;
    padding: 0 !important;
}

/* The actual scrolling should only happen on the dropdown content */
.selectize-dropdown.form-control .selectize-dropdown-content {
    max-height: 200px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* Fix double scrollbar issue for grouping controls specifically */
#sources-grouping-controls .selectize-dropdown,
#links-groupby-controls .selectize-dropdown {
    overflow: visible !important;
    overflow-y: visible !important;
    overflow-x: visible !important;
    height: auto !important;
    max-height: none !important;
}

/* Only the dropdown content should scroll for grouping controls */
#sources-grouping-controls .selectize-dropdown .selectize-dropdown-content,
#links-groupby-controls .selectize-dropdown .selectize-dropdown-content {
    max-height: 200px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* Grouping controls are now in unified button bars, no special margins needed */

/* Ensure grouping and bulk action icons are properly aligned */
#sources-grouping-controls .form-label,
#links-groupby-controls .form-label {
    white-space: nowrap !important;
}

/* Links button bar inherits from sources panel styling */
#links-button-bar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 10px;
}

/* Unified label styling for all button bars */
.sources-panel-buttons .form-label,
#links-button-bar .form-label {
    font-weight: 600;
    color: var(--color-text-primary);
    white-space: nowrap !important;
    margin-bottom: 0 !important;
    margin-right: 8px !important;
}

/* Form switches in button bars */
.sources-panel-buttons .form-check-label {
    font-size: 0.8rem;
    color: var(--color-text-primary);
    font-weight: 500;
    margin-bottom: 0;
}

.sources-panel-buttons .form-check-input {}

/* Limit selected pills area height in sources selector and enable vertical scroll */
.project-selector-dropdown .selectize-control.multi .selectize-input {
    max-height: 200px !important;
    overflow-y: auto !important;
}

/* === Layout direction radio buttons in dagre and dot controls === */
#dagre-controls .d-flex.gap-1 .form-check,
#dot-controls .d-flex.gap-1 .form-check {
    margin: 0;
    padding: 0;
}

#dagre-controls .d-flex.gap-1 .form-check-label,
#dot-controls .d-flex.gap-1 .form-check-label {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 0;
    padding: 6px 12px;
    min-width: 32px;
    min-height: 28px;
    transition: all 0.2s ease;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-weight: 600;
    font-size: 12px;
    color: #495057;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    margin: 0;
}

#dagre-controls .d-flex.gap-1 .form-check-label:hover,
#dot-controls .d-flex.gap-1 .form-check-label:hover {
    background: #e9ecef;
    border-color: #adb5bd;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#dagre-controls .d-flex.gap-1 .form-check-input,
#dot-controls .d-flex.gap-1 .form-check-input {
    appearance: none;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
    position: absolute;
    opacity: 0;
}

#dagre-controls .d-flex.gap-1 .form-check-input:checked+.form-check-label,
#dot-controls .d-flex.gap-1 .form-check-input:checked+.form-check-label {
    background: var(--toggle-selected-bg);
    border-color: var(--color-green);
    color: var(--toggle-selected-text);
    box-shadow: 0 2px 4px rgba(0, 255, 175, 0.25);
    transform: translateY(-1px);
}

#dagre-controls .d-flex.gap-1 .form-check-input:focus+.form-check-label,
#dot-controls .d-flex.gap-1 .form-check-input:focus+.form-check-label {
    outline: 2px solid var(--color-blue);
    outline-offset: 2px;
}

/* === Sentiment radio buttons in causal overlay === */
#overlay-sentiment-group {
    display: flex;
    gap: 1px;
}

#overlay-sentiment-group .form-check {
    margin: 0;
    padding: 0;
}

#overlay-sentiment-group .form-check-label {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 6px 12px;
    min-width: 32px;
    min-height: 28px;
    transition: all 0.2s ease;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-weight: 600;
    font-size: 12px;
    color: #495057;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    margin: 0;
}

#overlay-sentiment-group .form-check-label:hover {
    background: #e9ecef;
    border-color: #adb5bd;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#overlay-sentiment-group .form-check-input {
    appearance: none;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
    position: absolute;
    opacity: 0;
}

#overlay-sentiment-group .form-check-input:checked+.form-check-label {
    background: var(--toggle-selected-bg);
    border-color: var(--color-green);
    color: var(--toggle-selected-text);
    box-shadow: 0 2px 4px rgba(0, 255, 175, 0.25);
    transform: translateY(-1px);
}

#overlay-sentiment-group .form-check-input:focus+.form-check-label {
    outline: 2px solid var(--color-blue);
    outline-offset: 2px;
}

/* =============================================================================
   Edge Handles Styling - Minimal, subtle handles using Cytoscape styling
   ============================================================================= */

/* Apply minimal styling directly to cytoscape elements with edge handle classes */
#graph-container .eh-ghost-edge {
    /* Ghost edge - the line that follows the cursor */
    stroke-width: 1px !important;
    stroke: #ccc !important;
    stroke-dasharray: 2, 2 !important;
    opacity: 0.4 !important;
    /* Remove arrow completely for ghost edge */
    marker-end: none !important;
    target-arrow-shape: none !important;
}

#graph-container .eh-ghost-node {
    /* Ghost node - the small circle that follows cursor */
    width: 2px !important;
    height: 2px !important;
    background-color: #ccc !important;
    border: none !important;
    border-radius: 50% !important;
    opacity: 0.6 !important;
}

#graph-container .eh-preview {
    /* Preview edge before completion */
    stroke-width: 1px !important;
    stroke: var(--color-blue) !important;
    opacity: 0.4 !important;
    /* Remove arrows from preview */
    marker-end: none !important;
    target-arrow-shape: none !important;
}

/* Subtle visual feedback on nodes */
#graph-container .eh-presumptive-target {
    border: 1px solid var(--color-blue) !important;
    box-shadow: 0 0 4px rgba(81, 135, 86, 0.2) !important;
}

#graph-container .eh-hover {
    border: 1px solid var(--color-green) !important;
    box-shadow: 0 0 6px rgba(81, 135, 86, 0.3) !important;
}

#graph-container .eh-source {
    border: 1px solid var(--color-lightblue) !important;
    box-shadow: 0 0 8px rgba(118, 247, 255, 0.3) !important;
}

/* Custom red dot edge handle - must be above cytoscape canvas */
.custom-edge-handle {
    position: absolute !important;
    z-index: 99999 !important;
    pointer-events: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.fa-file-powerpoint {
    color: purple !important;
}

.fa-folder-open,
.fas-folder-plus {
    color: var(--color-green-light) !important;
}

/* Removed #highlight-progress-overlay styles - now using notification system instead */
/* Collapse toggle styling */
.filter-collapse-toggle {
    width: 24px !important;
    height: 22px !important;
    padding: 0 !important;
    border: 1px solid var(--color-border) !important;
    background: var(--color-bg-subtle) !important;
    color: var(--color-text-primary) !important;
}

.filter-collapse-toggle:hover {
    background: var(--color-bg-white) !important;
}

/* Context menu styling */
.context-menu {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
    font-size: 13px;
}

.context-menu-item {
    transition: background-color 0.1s ease;
}

.context-menu-item:hover {
    background-color: #f8f9fa !important;
}

.context-menu-item i {
    width: 16px;
    margin-right: 8px;
    text-align: center;
}

.user-guide-callout {
    background-color: #eee;
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 10px;
    font-size: 14px;
    line-height: 1.5;
    color: #333;
    border-left: 4px solid #007bff;
    padding-left: 10px;
}

/* =============================================================================
   PivotTable.js UI Overrides
   ============================================================================= */
.pvtUi,
.pvtRendererArea,
.pvtVals {
    font-family: inherit;
    background-color: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 0.5rem 0.75rem;
}

.pvtAxisContainer,
.pvtVals {
    background-color: var(--color-bg-subtle);
    border: 1px dashed var(--color-border);
    min-height: 26px;
    padding: 0.25rem;
}

.pvtAxisContainer li {
    background-color: var(--color-bg-subtle);
    color: var(--color-text-primary);
    font-weight: 700;
    border: none;
    padding: 0 4px;
    margin: 2px;
    border-radius: 3px;
    font-size: 0.75rem;
}

.pvtAxisContainer li:hover {
    background-color: var(--color-blue);
    color: #fff;
    cursor: move;
}

.pvtAxisContainer,
.pvtVals {
    background-color: var(--color-bg-subtle) !important;
}

.pvtRendererArea select,
.pvtRendererArea input,
.pvtVals select,
.pvtAggregator select {
    font-size: 0.8rem;
    padding: 0.15rem 0.4rem;
    border-radius: 3px;
    border: 1px solid var(--color-border);
}

.pvtUi table.pvtTable {
    font-size: 0.75rem;
    border-collapse: collapse;
}

.pvtUi table.pvtTable th,
.pvtUi table.pvtTable td {
    border: 1px solid var(--color-green);
    padding: 2px 4px;
}

/* Heatmap cells (overridden colors already in JS) - add subtle border */
.pvtTable .pvtVal,
.pvtTable .pvtTotal {
    border: 1px solid var(--color-border);
}

/* 🆕 Sources Selector Compact Display Styling */
.selectize-control .compact-indicator {
    background: linear-gradient(135deg, #e3f2fd 0%, #f3e5f5 100%) !important;
    border: 1px solid #2196f3 !important;
    border-radius: 6px !important;
    padding: 4px 12px !important;
    margin: 2px !important;
    font-size: 12px !important;
    color: #1976d2 !important;
    cursor: default !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-weight: 500 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.2s ease !important;
}

.selectize-control .compact-indicator:hover {
    background: linear-gradient(135deg, #e8f5e8 0%, #f0f4ff 100%) !important;
    border-color: #4caf50 !important;
    color: #2e7d32 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
}

.selectize-control .compact-indicator i {
    font-size: 11px !important;
    opacity: 0.8 !important;
}

.selectize-control .compact-indicator small {
    font-size: 10px !important;
    opacity: 0.7 !important;
    font-weight: 400 !important;
}

/* Enhanced styling for truncated source items */
.selectize-control .item[title] {
    cursor: help !important;
    max-width: 200px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Performance optimization for large lists */
.selectize-dropdown .option {
    padding: 8px 12px !important;
    border-bottom: 1px solid #f0f0f0 !important;
}

.selectize-dropdown .option:last-child {
    border-bottom: none !important;
}

/* Compact mode indicator in dropdown */
.selectize-dropdown.compact-mode {
    max-height: 300px !important;
    overflow-y: auto !important;
}

.selectize-dropdown.compact-mode::before {
    content: "📋 Large list - type to search" !important;
    display: block !important;
    padding: 8px 12px !important;
    background: #f8f9fa !important;
    border-bottom: 1px solid #e9ecef !important;
    font-size: 12px !important;
    color: #6c757d !important;
    font-style: italic !important;
}

.text-viewer-scrollable-content {
    border-radius: 5px !important;
    /* height from content; parent .text-viewer-section scrolls */
    flex: 0 0 auto;
    overflow: visible;
    /* Small strip of column (gold) background between AI Coding and Source text */
    margin-top: 10px;
}

/* Source text accordion: clickable header except its widget controls. */
#source-text-accordion-header {
    display: block;
    padding: 8px 10px;
    width: 100%;
    background: linear-gradient(180deg, #f4f1e0 0%, #eae2c6 100%);
    border: none;
    border-radius: 0;
    border-bottom: 1px solid #d5c79a;
    box-shadow: 0 2px 7px rgba(31, 41, 55, 0.14);
    position: relative;
    z-index: 1;
    cursor: pointer;
}
#source-text-section.ai-simple-section--open > #source-text-accordion-header {
    background: linear-gradient(180deg, #efe5c5 0%, #e3d4a5 100%);
    border-bottom: 1px solid #c9b377;
    box-shadow: 0 4px 10px rgba(90, 74, 28, 0.24);
}
#source-text-accordion-header .source-text-header-top {
    width: 100%;
}
#source-text-accordion-toggle {
    display: inline-block;
}

/* Keep Source text card corners rounded; when collapsed, round header bottom too. */
.text-viewer-scrollable-content .card {
    border-radius: 10px;
    overflow: hidden;
}
/* Source text card: overflow visible so highlight toolbar can position:sticky to .text-viewer-section scrollport */
.text-viewer-scrollable-content #source-text-section.card {
    border: 1px solid #cfbc7e;
    border-radius: 10px;
    overflow: visible;
}
.text-viewer-highlight-toolbar {
    position: sticky;
    top: 0;
    z-index: 9;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
    border-radius: 0.375rem;
}
.text-viewer-highlight-toolbar .btn {
    border-radius: 0.375rem;
}
/* Collapsed: only the header shows — round all four corners to match Recode / card */
.text-viewer-scrollable-content .card:has(> #source-text-body-collapse:not(.show)) > #source-text-accordion-header {
    border-radius: 10px;
}
/* Expanded: card is overflow:visible for sticky toolbar — round header top + body bottom explicitly */
.text-viewer-scrollable-content .card:has(> #source-text-body-collapse.show) > #source-text-accordion-header {
    border-radius: 10px 10px 0 0;
}
.text-viewer-scrollable-content #source-text-body-collapse.collapse.show #text-viewer-content {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

/* =============================================================================
   Enhanced Bootstrap Tooltips - Professional Styling
   
   NOTE: Nav tabs (.nav-link, [data-bs-toggle="tab"], [role="tab"]) and dropdowns 
   ([data-bs-toggle="dropdown"]) are EXCLUDED from the fancy tooltip system to 
   prevent Bootstrap conflicts. These elements use standard browser tooltips only.
   ============================================================================= */

/* =============================================================================
   Hints system (Bootstrap Popover) - lightweight, in-session guidance
   ============================================================================= */

.hint-popover.popover {
    max-width: 340px;
    border: 4px solid var(--color-green);
    /* thicker border to match more-visible pointer */
    box-shadow: 0 14px 34px rgba(17, 24, 39, 0.22);
    z-index: 10050 !important;
    /* above causal overlay (10000/10001) */
    /* Make the arrow/pointer larger and higher-contrast */
    --bs-popover-border-color: var(--color-green);
    --bs-popover-border-width: 3px;
    --bs-popover-bg: var(--color-bg-white);
    --bs-popover-arrow-width: 2.4rem;
    --bs-popover-arrow-height: 1.75rem;
}

.hint-popover.popover .popover-arrow {
    filter: drop-shadow(0 6px 10px rgba(17, 24, 39, 0.22));
}

/* Hint pointer:
   Use Bootstrap's built-in placement logic (top/bottom/left/right), but make it a solid triangle
   by hiding the inner arrow and keeping only the border arrow. */
.hint-popover.popover .popover-arrow::after {
    display: none;
}

.hint-popover .popover-header {
    background: rgba(109, 196, 200, 0.15);
    /* subtle blue */
    color: var(--color-text-primary);
    font-weight: 700;
    border-bottom: 1px solid var(--color-border);
}

.hint-popover .popover-body {
    color: var(--color-text-primary);
    font-size: 0.9rem;
    line-height: 1.35;
}

.hint-popover .hint-popover-learn-more {
    font-weight: 600;
    text-decoration: underline;
    text-decoration-style: dotted;
}

.hint-popover .hint-popover-dont-show {
    font-weight: 500;
    font-size: 0.85rem;
    color: var(--color-text-muted);
    text-decoration: underline;
    text-decoration-style: dotted;
}

.hint-popover .hint-popover-close {
    line-height: 1;
    padding: 0 0.45rem;
}

/* Custom styled tooltips with professional appearance */
.custom-styled-tooltip {
    font-family: inherit;
}

.custom-styled-tooltip .tooltip-inner {
    background-color: var(--color-text-primary);
    color: var(--color-bg-white);
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.4;
    max-width: 300px;
    text-align: left;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border: 1px solid var(--color-border);
}

.custom-styled-tooltip .tooltip-arrow::before {
    border-color: var(--color-text-primary) transparent;
}

/* Enhanced tooltip for buttons */
.btn[title]+.custom-styled-tooltip .tooltip-inner {
    background-color: var(--color-text-primary);
    color: white;
    font-weight: 600;
}

/* Enhanced tooltip for form controls */
.form-control[title]+.custom-styled-tooltip .tooltip-inner,
.form-select[title]+.custom-styled-tooltip .tooltip-inner {
    background-color: var(--color-blue);
    color: white;
}

/* Enhanced tooltip for icons */
i[title]+.custom-styled-tooltip .tooltip-inner {
    background-color: var(--color-green);
    color: white;
    font-size: 0.75rem;
}

/* Enhanced tooltip for badges */
.badge[title]+.custom-styled-tooltip .tooltip-inner {
    background-color: var(--color-purple);
    color: white;
    font-size: 0.75rem;
}

/* Contextual help tooltips */
.contextual-help-btn[title]+.custom-styled-tooltip .tooltip-inner {
    background-color: var(--color-green);
    color: white;
    max-width: 400px;
    text-align: left;
}

/* Tooltip animation improvements */
.custom-styled-tooltip {
    transition: opacity 0.15s ease-in-out;
    pointer-events: none;
    /* Prevent tooltips from interfering with mouse events */
}

.custom-styled-tooltip.fade {
    transition: opacity 0.15s linear;
}

.custom-styled-tooltip.show {
    opacity: 0.95;
    pointer-events: none;
    /* Ensure tooltips don't block mouse events */
}

/* Force hide for tooltips that are stuck */
.custom-styled-tooltip:not(.show) {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Improved hiding behavior */
.custom-styled-tooltip.fade:not(.show) {
    opacity: 0 !important;
    transition: opacity 0.1s ease-out !important;
}

/* Special styling for table header tooltips */
th[title]+.custom-styled-tooltip .tooltip-inner {
    background-color: var(--color-text-secondary);
    color: white;
    font-size: 0.75rem;
    max-width: 250px;
}

/* Tooltip z-index management */
.custom-styled-tooltip {
    z-index: 10010;
}

/* If a tooltip were ever inside .modal DOM; delegated tooltips use .modal-context on body */
.modal .custom-styled-tooltip {
    z-index: 90100 !important;
}

/* Overlay tooltips need even higher z-index */
.causal-overlay .custom-styled-tooltip {
    z-index: 10020;
}

/* Context markers from delegated handler to force correct stacking when container=body */
.custom-styled-tooltip.overlay-context {
    z-index: 10020;
}

/* Above #confirmation-modal (JS sets z-index 90000) and its backdrop */
.custom-styled-tooltip.modal-context {
    z-index: 90100 !important;
}

/* =============================================================================
   Clear Filter Button States - Dynamic prominence based on filter status
   ============================================================================= */

/* Clear filter buttons when no filters are active - disabled state */
.clear-filters-btn-disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

/* Clear filter buttons when filters are active - prominent state */
.clear-filters-btn-active {
    background-color: var(--color-pink) !important;
    border-color: var(--color-pink) !important;
    color: white !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 6px rgba(229, 184, 184, 0.4) !important;
    animation: subtle-pulse 2s infinite !important;
}

.clear-filters-btn-active:hover {
    background-color: #e17ca4 !important;
    border-color: #e17ca4 !important;
    color: white !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(229, 184, 184, 0.6) !important;
    animation: none !important;
}


/* Subtle pulsing animation for active clear filter buttons */
@keyframes subtle-pulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.9;
        transform: scale(1.2);
    }
}

.tabulator-title-editor {
    background-color: var(--color-bg-subtle) !important;
    border: 1px dotted gray !important;
}

/* HELP BUTTONS - Green background */
.contextual-help-btn,
#help-btn,
#help-docs-btn,
.support-nav-btn,
.btn-outline-info.contextual-help-btn {
    background-color: var(--color-lightblue) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    color: var(--color-text-primary) !important;
}

.contextual-help-btn:hover,
#help-btn:hover,
#help-docs-btn:hover,
.support-nav-btn:hover,
.btn-outline-info.contextual-help-btn:hover {
    border-color: var(--color-green) !important;
    color: white !important;
}

/* Support navbar button: match height + thicker bright-blue border */
.support-nav-btn {
    border: 2px solid var(--color-blue) !important;
    box-sizing: border-box;
    height: 31px;
    /* keep aligned with other btn-sm nav buttons */
    padding-top: 0;
    padding-bottom: 0;
    display: inline-flex;
    align-items: center;
}

/* Support navbar button: flash + unread badge */
.support-nav-btn.support-unread {
    animation: support-unread-flash 1.1s infinite;
}

@keyframes support-unread-flash {
    0% {
        background-color: var(--color-lightblue);
    }

    50% {
        background-color: var(--color-yellow);
    }

    100% {
        background-color: var(--color-lightblue);
    }
}

#support-unread-badge {
    background-color: var(--color-blue);
    color: white;
    font-size: 12px;
    line-height: 1;
}

button.nav-item.active {
    border: 1.5px solid var(--color-green) !important;
    border-radius: 5px !important;
}

/* =============================================================================
   URL Editor Modal Styling
   ============================================================================= */

.url-editor-modal .form-label {
    color: var(--color-text-primary);
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.url-editor-modal .form-control,
.url-editor-modal .form-select {
    border: 1px solid var(--color-border);
    background-color: var(--color-bg-white);
    color: var(--color-text-primary);
    font-size: 0.875rem;
}

.url-editor-modal .form-control[readonly],
.url-editor-modal .form-select[disabled] {
    background-color: var(--color-bg-subtle);
    border-color: var(--color-border);
    color: var(--color-text-secondary);
}

.url-editor-modal .text-primary {
    color: var(--color-green) !important;
}

.url-editor-modal .text-warning {
    color: var(--color-yellow) !important;
}

.url-editor-modal .border-bottom {
    border-color: var(--color-border) !important;
}

.url-editor-modal code {
    background-color: var(--color-purple-light);
    color: var(--color-text-primary);
    padding: 0.125rem 0.25rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
}

.url-editor-modal .alert {
    border-radius: 0.375rem;
    font-size: 0.875rem;
}

.url-editor-modal .form-check-input:checked {
    background-color: var(--color-green);
    border-color: var(--color-green);
}

/* Parameter group icons */
.url-editor-modal h6 i {
    color: var(--color-green);
}

.url-editor-modal h6.text-warning i {
    color: var(--color-yellow);
}

.url-editor-modal h6.text-success i {
    color: var(--color-green);
}

/* Filter cards styling */
.url-editor-modal .card {
    border-radius: 0.375rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.url-editor-modal .card-header {
    background-color: var(--color-bg-subtle) !important;
    border-bottom: 1px solid var(--color-border);
    font-size: 0.875rem;
}

.url-editor-modal .card-body {
    background-color: var(--color-bg-white);
    font-size: 0.8rem;
}

.url-editor-modal .badge {
    font-size: 0.7rem;
    padding: 0.25rem 0.5rem;
}

.url-editor-modal .border-success {
    border-color: var(--color-green) !important;
}

.url-editor-modal .border-secondary {
    border-color: var(--color-border) !important;
}

.url-editor-modal .bg-success {
    background-color: var(--color-green) !important;
}

.url-editor-modal .text-success {
    color: var(--color-green) !important;
}

/* =============================================================================
   Slide Deck Layouts and Themes
   ============================================================================= */

/* Base slide container - A4 Landscape aspect ratio (1.414:1) */
.slide-container {
    width: 100%;
    aspect-ratio: 1.414 / 1;
    /* A4 landscape ratio: 297mm / 210mm */
    padding: 2rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    background: white;
}

/* Slide Layouts */

/* Initial Slide Layout */
.slide-layout-initial-slide {
    justify-content: center;
    align-items: center;
    text-align: center;
}

.slide-layout-initial-slide .slide-h1 {
    font-size: 3.5rem;
    font-weight: bold;
    margin-bottom: 1.5rem;
}

.slide-layout-initial-slide .slide-h2 {
    /* make h2 clearly larger */
    font-size: 2.5rem;
    margin-bottom: 2rem;
}

.slide-layout-initial-slide .slide-text1,
.slide-layout-initial-slide .slide-text2 {
    /* larger body text */
    font-size: 1.5rem;
    margin-bottom: 1rem;
    max-width: 800px;
}

/* Section Slide Layout */
.slide-layout-section-slide {
    justify-content: flex-start;
    padding-top: 4rem;
}

.slide-layout-section-slide .slide-h1 {
    font-size: 3rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
    border-bottom: 4px solid;
    padding-bottom: 1rem;
    width: 100%;
}

.slide-layout-section-slide .slide-h2 {
    /* emphasise subheading */
    font-size: 2rem;
    margin-bottom: 2rem;
    opacity: 0.8;
}

.slide-layout-section-slide .slide-text1 {
    font-size: 1.375rem;
    margin-top: 2rem;
}

/* keep images in section-slide within bounds */
.slide-layout-section-slide .slide-bookmark-content {
    margin-top: 1rem;
    max-height: 65%;
    /* larger image area but still constrained */
    display: flex;
    align-items: center;
    justify-content: center;
}

.slide-layout-section-slide .slide-bookmark-content img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    /* preserve aspect ratio */
    height: auto;
    /* preserve aspect ratio */
    object-fit: contain;
}

/* Two Columns Layout */
.slide-layout-two-columns {
    justify-content: flex-start;
}

.slide-layout-two-columns .slide-header {
    width: 100%;
    margin-bottom: 2rem;
    text-align: center;
}

.slide-layout-two-columns .slide-h1 {
    font-size: 2.5rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
}

.slide-layout-two-columns .slide-h2 {
    font-size: 1.75rem;
    opacity: 0.8;
}

.slide-layout-two-columns .slide-content {
    display: flex;
    flex: 1;
    gap: 3rem;
}

.slide-layout-two-columns .slide-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.slide-layout-two-columns .slide-column .slide-bookmark-content {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.slide-layout-two-columns .slide-column .slide-bookmark-content img {
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.slide-layout-two-columns .slide-h3 {
    font-size: 1.875rem;
    font-weight: bold;
    margin-bottom: 1rem;
}

.slide-layout-two-columns .slide-text1,
.slide-layout-two-columns .slide-text2 {
    font-size: 1.25rem;
    line-height: 1.6;
    margin-bottom: 1rem;
}

/* Large Image Right Layout (2/3 width) */
.slide-layout-image-right-large {
    justify-content: flex-start;
}

.slide-layout-image-right-large .slide-content {
    display: flex;
    flex: 1;
    gap: 2rem;
    align-items: flex-start;
}

.slide-layout-image-right-large .slide-left {
    flex: 1;
    max-width: 400px;
}

.slide-layout-image-right-large .slide-right {
    flex: 2;
    display: flex;
    align-items: stretch;
    /* fill height */
    justify-content: center;
    min-height: 600px;
}

.slide-layout-image-right-large .slide-h1 {
    font-size: clamp(1.5rem, 4vw, 3rem);
    font-weight: bold;
    margin-bottom: 1rem;
    max-height: 120px;
    overflow: hidden;
}

.slide-layout-image-right-large .slide-h2 {
    font-size: clamp(1.25rem, 3vw, 2.5rem);
    margin-bottom: 1.5rem;
    opacity: 0.8;
    max-height: 100px;
    overflow: hidden;
}

.slide-layout-image-right-large .slide-text1,
.slide-layout-image-right-large .slide-text2 {
    font-size: clamp(1.1rem, 2.2vw, 1.8rem);
    line-height: 1.4;
    margin-bottom: 1rem;
    max-height: 240px;
    overflow: hidden;
}

/* Small Image Right Layout (1/3 width) */
.slide-layout-image-right-small {
    justify-content: flex-start;
}

.slide-layout-image-right-small .slide-content {
    display: flex;
    flex: 1;
    gap: 2rem;
    align-items: flex-start;
}

.slide-layout-image-right-small .slide-left {
    flex: 2;
    max-width: 800px;
}

.slide-layout-image-right-small .slide-right {
    flex: 1;
    display: flex;
    align-items: stretch;
    /* fill height */
    justify-content: center;
    min-height: 400px;
}

/* Ensure bookmark images fill their column cleanly */
.slide-right .slide-bookmark-content,
.slide-right .slide-bookmark-content img {
    width: 100%;
    height: 100%;
}

.slide-right .slide-bookmark-content img {
    object-fit: contain;
    /* contain both dimensions so images never overflow */
}

.slide-layout-image-right-small .slide-h1 {
    font-size: clamp(2rem, 5vw, 4rem);
    font-weight: bold;
    margin-bottom: 1rem;
    max-height: 150px;
    overflow: hidden;
}

.slide-layout-image-right-small .slide-h2 {
    font-size: clamp(1.5rem, 3.5vw, 3rem);
    margin-bottom: 1.5rem;
    opacity: 0.8;
    max-height: 120px;
    overflow: hidden;
}

.slide-layout-image-right-small .slide-text1,
.slide-layout-image-right-small .slide-text2 {
    font-size: clamp(1.25rem, 3vw, 2.25rem);
    line-height: 1.5;
    margin-bottom: 1rem;
    max-height: 340px;
    overflow: hidden;
}

/* Maximum Image with Overlay Text Layout */
.slide-layout-image-overlay {
    position: relative;
    justify-content: center;
    align-items: center;
    padding: 0;
}

.slide-layout-image-overlay .slide-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

.slide-layout-image-overlay .slide-overlay {
    position: relative;
    z-index: 2;
    background: rgba(0, 0, 0, 0.55);
    /* dark translucent background over image */
    color: #fff;
    /* light text for contrast */
    padding: 3rem;
    border-radius: 12px;
    backdrop-filter: blur(10px);
    max-width: 600px;
    text-align: center;
    margin: auto;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* Initial slide: image behind text, fully contained */
.slide-layout-initial-slide {
    position: relative;
    padding: 0;
}

.slide-layout-initial-slide .slide-background {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.slide-layout-initial-slide .slide-background img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* contain so it fits both dimensions */
}

.slide-layout-initial-slide .slide-overlay {
    position: relative;
    z-index: 2;
    /* ensure text is above image */
    padding: 2rem;
    background: rgba(0, 0, 0, 0.35);
    /* semi-transparent dark layer behind text */
    color: #fff;
    /* light text for contrast */
    border-radius: 10px;
}

.slide-layout-image-overlay .slide-h1 {
    font-size: clamp(2rem, 5vw, 4rem);
    font-weight: bold;
    margin-bottom: 1rem;
    max-height: 150px;
    overflow: hidden;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.slide-layout-image-overlay .slide-h2 {
    font-size: clamp(1.6rem, 3.5vw, 3rem);
    margin-bottom: 1.5rem;
    opacity: 0.9;
    max-height: 130px;
    overflow: hidden;
}

.slide-layout-image-overlay .slide-text1,
.slide-layout-image-overlay .slide-text2 {
    font-size: clamp(1.25rem, 3vw, 2.1rem);
    line-height: 1.5;
    margin-bottom: 1rem;
    max-height: 240px;
    overflow: hidden;
}

/* Slide Themes */

/* Default Theme */
.slide-theme-default {
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    color: #333;
}

.slide-theme-default .slide-h1 {
    color: var(--color-purple);
}

.slide-theme-default .slide-h2 {
    color: var(--color-blue);
}

.slide-theme-default .slide-layout-section-slide .slide-h1 {
    border-bottom-color: var(--color-blue);
}

/* Professional Theme */
.slide-theme-professional {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.slide-theme-professional .slide-h1 {
    color: white;
}

.slide-theme-professional .slide-h2 {
    color: rgba(255, 255, 255, 0.9);
}

.slide-theme-professional .slide-layout-section-slide .slide-h1 {
    border-bottom-color: rgba(255, 255, 255, 0.7);
}

/* Modern Theme */
.slide-theme-modern {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #2d3748;
}

.slide-theme-modern .slide-h1 {
    color: var(--color-purple);
    background: linear-gradient(45deg, var(--color-blue), var(--color-purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.slide-theme-modern .slide-h2 {
    color: var(--color-blue);
}

.slide-theme-modern .slide-layout-section-slide .slide-h1 {
    border-bottom-color: var(--color-blue);
}

/* Minimal Theme */
.slide-theme-minimal {
    background: white;
    color: #2d3748;
}

.slide-theme-minimal .slide-h1 {
    color: #1a202c;
}

.slide-theme-minimal .slide-h2 {
    color: #4a5568;
}

.slide-theme-minimal .slide-layout-section-slide .slide-h1 {
    border-bottom-color: #e2e8f0;
}

/* Academic Theme */
.slide-theme-academic {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    color: #212529;
    font-family: 'Times New Roman', serif;
}

.slide-theme-academic .slide-h1 {
    color: #1a365d;
    font-weight: 600;
}

.slide-theme-academic .slide-h2 {
    color: #2d3748;
    font-style: italic;
}

.slide-theme-academic .slide-layout-section-slide .slide-h1 {
    border-bottom-color: #1a365d;
}

/* IT Theme */
.slide-theme-it {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    color: #e2e8f0;
    font-family: 'Courier New', monospace;
}

.slide-theme-it .slide-h1 {
    color: #22d3ee;
    text-shadow: 0 0 10px rgba(34, 211, 238, 0.3);
}

.slide-theme-it .slide-h2 {
    color: #a78bfa;
}

.slide-theme-it .slide-layout-section-slide .slide-h1 {
    border-bottom-color: #22d3ee;
}

/* Dramatic Theme */
/* Corporate Theme */
.slide-theme-corporate {
    background: linear-gradient(180deg, #ffffff 0%, #f2f5f8 100%);
    color: #1f2937;
}

.slide-theme-corporate .slide-h1 {
    color: #0f766e;
}

.slide-theme-corporate .slide-h2 {
    color: #2563eb;
}

.slide-theme-corporate .slide-layout-section-slide .slide-h1 {
    border-bottom-color: #2563eb;
}

/* Emerald Theme */
.slide-theme-emerald {
    background: linear-gradient(180deg, #ecfdf5 0%, #d1fae5 100%);
    color: #065f46;
}

.slide-theme-emerald .slide-h1 {
    color: #047857;
}

.slide-theme-emerald .slide-h2 {
    color: #0ea5e9;
}

.slide-theme-emerald .slide-layout-section-slide .slide-h1 {
    border-bottom-color: #047857;
}

/* Charcoal Theme */
.slide-theme-charcoal {
    background: #111827;
    color: #e5e7eb;
}

.slide-theme-charcoal .slide-h1 {
    color: #f9fafb;
}

.slide-theme-charcoal .slide-h2 {
    color: #93c5fd;
}

.slide-theme-charcoal .slide-layout-section-slide .slide-h1 {
    border-bottom-color: #374151;
}

/* Sand Theme */
.slide-theme-sand {
    background: linear-gradient(180deg, #fff7ed 0%, #ffedd5 100%);
    color: #4b5563;
}

.slide-theme-sand .slide-h1 {
    color: #b45309;
}

.slide-theme-sand .slide-h2 {
    color: #0284c7;
}

.slide-theme-sand .slide-layout-section-slide .slide-h1 {
    border-bottom-color: #f59e0b;
}

/* Ocean Theme */
.slide-theme-ocean {
    background: linear-gradient(180deg, #e0f2fe 0%, #bfdbfe 100%);
    color: #0c4a6e;
}

.slide-theme-ocean .slide-h1 {
    color: #075985;
}

.slide-theme-ocean .slide-h2 {
    color: #0ea5e9;
}

.slide-theme-ocean .slide-layout-section-slide .slide-h1 {
    border-bottom-color: #0ea5e9;
}

.slide-theme-dramatic {
    background: #7c2d12;
    /* solid, no diagonal fade */
    color: #fef2f2;
}

.slide-theme-dramatic .slide-h1 {
    color: #fbbf24;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    font-weight: bold;
}

.slide-theme-dramatic .slide-h2 {
    color: #fed7aa;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.slide-theme-dramatic .slide-layout-section-slide .slide-h1 {
    border-bottom-color: #fbbf24;
}

/* Bookmark placeholders in slides */
.slide-bookmark-placeholder {
    border: 2px dashed #ccc;
    border-radius: 8px;
    padding: 2rem;
    text-align: center;
    background: rgba(255, 255, 255, 0.1);
    margin: 1rem 0;
}

.slide-bookmark-placeholder .placeholder-text {
    color: #666;
    font-style: italic;
}

/* =============================================================================
   Slide Sorter Layout
   ============================================================================= */

/* Slide sorter grid - 4 slides per row */
.slide-sorter-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1rem;
    min-height: 400px;
}

.slide-sorter-item {
    width: calc(25% - 0.75rem);
    min-width: 250px;
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    cursor: grab;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.slide-sorter-item:active {
    cursor: grabbing;
}

.slide-sorter-item.dragging {
    opacity: 0.5;
    transform: rotate(5deg);
    z-index: 1000;
}

.slide-sorter-item:hover {
    border-color: var(--color-blue);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

/* Selection checkbox at top-right */
.slide-sorter-select {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 11;
}

.slide-sorter-select .form-check-input {
    width: 1.25rem;
    height: 1.25rem;
    cursor: pointer;
    border: 2px solid #333;
    border-radius: 3px;
}

/* Slide preview within sorter item - maintains A4 landscape aspect ratio */
.slide-sorter-preview {
    width: 100%;
    aspect-ratio: 1.414 / 1;
    /* A4 landscape ratio */
    overflow: hidden;
    position: relative;
    background: #f8f9fa;
    border-bottom: 1px solid #e2e8f0;
    border: 2px solid #e2e8f0;
    border-radius: 4px;
}

.slide-sorter-preview .slide-container {
    width: 100%;
    height: 100%;
    transform: scale(1);
    transform-origin: center;
    pointer-events: none;
    font-size: 0.6rem;
    /* Scale down fonts for sorter */
}

/* Scale down all text elements in sorter preview */
.slide-sorter-preview .slide-h1 {
    font-size: 0.8rem !important;
}

.slide-sorter-preview .slide-h2 {
    font-size: 0.6rem !important;
}

.slide-sorter-preview .slide-h3 {
    font-size: 0.5rem !important;
}

.slide-sorter-preview .slide-text1,
.slide-sorter-preview .slide-text2,
.slide-sorter-preview .slide-text3,
.slide-sorter-preview .slide-text4 {
    font-size: 0.4rem !important;
}

/* Slide controls now appear as a footer under each slide */
.slide-sorter-controls {
    position: static;
    z-index: auto;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    gap: 6px;
    padding: 6px 8px 0 8px;
}

.slide-sorter-controls .btn {
    padding: 3px 6px;
    font-size: 0.7rem;
    border-radius: 3px;
    opacity: 0.8;
    transition: all 0.2s ease;
}

.slide-sorter-controls .btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.slide-sorter-item:hover .slide-sorter-controls .btn {
    opacity: 1;
}

/* Slide info */
.slide-sorter-info-panel {
    padding: 0.75rem;
    background: white;
}

.slide-sorter-title {
    font-size: 0.8rem;
    font-weight: bold;
    margin-bottom: 0.25rem;
    color: var(--color-purple);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.slide-sorter-meta {
    font-size: 0.7rem;
    color: var(--color-text-muted);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Drag placeholder */
.slide-sorter-placeholder {
    width: calc(25% - 0.75rem);
    min-width: 250px;
    height: 200px;
    border: 2px dashed var(--color-blue);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(109, 196, 200, 0.05);
    color: var(--color-blue);
    font-style: italic;
}

/* Responsive adjustments */
@media (max-width: 1200px) {

    .slide-sorter-item,
    .slide-sorter-placeholder {
        width: calc(33.333% - 0.67rem);
    }
}

@media (max-width: 768px) {

    .slide-sorter-item,
    .slide-sorter-placeholder {
        width: calc(50% - 0.5rem);
    }
}

@media (max-width: 480px) {

    .slide-sorter-item,
    .slide-sorter-placeholder {
        width: 100%;
    }
}

/* =============================================================================
   Slide Viewer Navigation
   ============================================================================= */

/* Navigation buttons for fullscreen slide viewer */
.slide-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1000;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    opacity: 0.8;
    transition: all 0.3s ease;
    border: none;
}

.slide-nav-btn:hover {
    opacity: 1;
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

.slide-nav-prev {
    left: 20px;
}

.slide-nav-next {
    right: 20px;
}

/* Edit button for fullscreen slide viewer */
.slide-edit-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 1000;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    opacity: 0.8;
    transition: all 0.3s ease;
    background: rgba(0, 0, 0, 0.5);
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.slide-edit-btn:hover {
    opacity: 1;
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
    background: rgba(0, 0, 0, 0.7);
    border-color: rgba(255, 255, 255, 0.5);
}

/* Hide navigation on very small screens */
@media (max-width: 480px) {
    .slide-nav-btn {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .slide-nav-prev {
        left: 10px;
    }

    .slide-nav-next {
        right: 10px;
    }

    .slide-edit-btn {
        width: 40px;
        height: 40px;
        font-size: 1rem;
        top: 10px;
        right: 10px;
    }
}

/* Ensure nav buttons render inline when inside modal header */
.modal-header .slide-nav-btn {
    position: static;
    /* override absolute positioning */
    top: auto;
    left: auto;
    right: auto;
    transform: none;
    /* no translate in header */
    box-shadow: none;
    width: auto;
    height: auto;
    border-radius: 0.25rem;
}

/* Slide preview in edit modal - A4 landscape aspect ratio */
#slide-preview {
    width: 100%;
    max-width: 800px;
    /* Reasonable max width for modal */
    aspect-ratio: 1.414 / 1;
    /* A4 landscape ratio */
    margin: 0 auto;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    background: #f8f9fa;
}

#slide-preview .slide-container {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 1rem;
    /* Adjusted padding for better preview */
}

/* Ensure slide scales to viewport in fullscreen viewer (preserve aspect ratio) */
#slide-viewer-content .slide-container {
    width: min(100%, calc((100vh - 120px) * 1.414));
    height: auto;
    max-height: calc(100vh - 120px);
    aspect-ratio: 1.414 / 1;
}

/* Slide editor navigation buttons */
.slide-editor-nav {
    display: flex;
    gap: 5px;
    margin: 0 10px;
}

.slide-editor-nav .btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    .slide-sorter-item {
        width: calc(50% - 0.5rem);
        min-width: 200px;
    }

    #slide-preview {
        max-width: 95%;
    }

    .slide-container {
        padding: 1rem;
    }
}

@media (max-width: 480px) {
    .slide-sorter-item {
        width: 100%;
        min-width: auto;
    }

    .slide-container {
        padding: 0.5rem;
    }
}

/* Editor preview uses same aspect ratio as everything else */
#slide-preview .slide-sorter-preview .slide-container {
    width: 100%;
    height: 100%;
    transform: scale(1);
    transform-origin: center;
    font-size: 0.8rem;
    /* Scale down fonts for editor preview */
}

/* Scale down all text elements in editor preview */
#slide-preview .slide-h1 {
    font-size: 1.2rem !important;
}

#slide-preview .slide-h2 {
    font-size: 1rem !important;
}

#slide-preview .slide-h3 {
    font-size: 0.9rem !important;
}

#slide-preview .slide-text1,
#slide-preview .slide-text2,
#slide-preview .slide-text3,
#slide-preview .slide-text4 {
    font-size: 0.7rem !important;
}

/* Standardized slide controls positioning */
.slide-controls-bottom-right {
    position: absolute;
    bottom: 10px;
    right: 10px;
    display: flex;
    gap: 6px;
    z-index: 10;
}

.slide-controls-bottom-right .btn {
    opacity: 0.8;
    transition: opacity 0.2s ease;
}

.slide-controls-bottom-right:hover .btn {
    opacity: 1;
}

/* Slideshow edit panel */
.slideshow-edit-panel {
    width: 300px;
    background: #f8f9fa;
    border-left: 1px solid #dee2e6;
    overflow-y: auto;
    flex-shrink: 0;
}

.slideshow-main-area {
    transition: transform 0.3s ease;
    max-height: calc(100vh - 80px);
    /* keep within viewport minus header */
    overflow: hidden;
}

/* Fullscreen slide viewer: center slide and scale to fit viewport */
#slide-viewer-modal .slideshow-main-area {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
}

/* When edit panel is open, shrink the main area slightly */
.slideshow-edit-open .slideshow-main-area {
    transform: scale(0.85);
    transform-origin: center;
}

.slideshow-edit-panel .form-label {
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0.25rem;
}

.slideshow-edit-panel .form-control,
.slideshow-edit-panel .form-select {
    font-size: 0.875rem;
}

/* Very subtle font scaling for text content based on length */
.slide-h1.text-long {
    font-size: 98% !important;
}

.slide-h1.text-very-long {
    font-size: 96% !important;
}

.slide-h2.text-long {
    font-size: 98% !important;
}

.slide-h2.text-very-long {
    font-size: 96% !important;
}

.slide-text1.text-long,
.slide-text2.text-long,
.slide-text3.text-long,
.slide-text4.text-long {
    font-size: 99% !important;
    line-height: 1.4 !important;
}

.slide-text1.text-very-long,
.slide-text2.text-very-long,
.slide-text3.text-very-long,
.slide-text4.text-very-long {
    font-size: 97% !important;
    line-height: 1.3 !important;
}

/* Slide metadata positioning */

.slide-legend-text {
    position: absolute;
    bottom: 8px;
    right: 8px;
    font-size: 0.75rem;
    color: rgba(0, 0, 0, 0.8);
    max-width: 35%;
    text-align: right;
    line-height: 1.25;
    z-index: 5;
    background: rgba(255, 255, 255, 0.8);
    padding: 6px 8px;
    border-radius: 6px;
}

/* Consistent preview wrapper inside editor uses same rules as sorter preview */
#slide-preview .slide-sorter-preview {
    width: 100%;
    aspect-ratio: 1.414 / 1;
    /* A4 landscape ratio */
    background: white;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    overflow: hidden;
}

/* --- Auth section: larger text, readable layout --- */
#auth-section .auth-title {
    font-size: 1.35rem;
}
#auth-section .form-label {
    font-size: 1.1rem;
}
#auth-section .form-control {
    font-size: 1.05rem;
}
#auth-section .btn {
    font-size: 1.05rem;
}
#auth-section .form-text,
#auth-section .text-danger,
#auth-section .text-success,
#auth-section .alert {
    font-size: 1rem;
}
#auth-section .auth-divider {
    font-size: 0.95rem;
    color: var(--bs-secondary);
}

/* Auth choice header: current action first, then Or, then other option */
#auth-section .auth-choice-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
}
#auth-section .auth-choice-current {
    font-size: 1.25rem;
    font-weight: 600;
}
#auth-section .auth-choice-divider {
    font-size: 1rem;
    color: var(--bs-secondary);
    font-weight: 500;
}
#auth-section .auth-choice-other {
    font-size: 0.95rem;
    padding: 0;
    color: var(--bs-secondary);
    text-decoration: none;
}
#auth-section .auth-choice-other:hover {
    color: var(--color-blue, #0d6efd);
    text-decoration: underline;
}

/* Forgot password link – prominent, easy to tap */
#auth-section .forgot-password-link {
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--color-blue, #0d6efd);
}
#auth-section .forgot-password-link:hover {
    text-decoration: underline;
    color: var(--color-blue, #0d6efd);
}

/* --- Login page button colors (specific overrides) --- */
#signup-btn {
    background-color: var(--color-blue) !important;
    /* blue */
    border-color: var(--color-blue) !important;
    color: #ffffff !important;
}

#signup-btn:hover {
    background-color: #0b5ed7 !important;
    border-color: #0a58ca !important;
}

/* Login submit button inside auth form */
#auth-form .btn-success {
    background-color: var(--color-orange) !important;
    /* --color-orange      */
    border-color: var(--color-orange) !important;
    color: #ffffff !important;
}

#auth-form .btn-success:hover {
    background-color: #218838 !important;
    border-color: #1e7e34 !important;
}

/* Google OAuth buttons */
#google-login-btn,
#google-signup-btn {
    background-color: #4285F4 !important;
    border-color: #4285F4 !important;
    color: #ffffff !important;
}
#google-login-btn:hover,
#google-signup-btn:hover {
    background-color: var(--color-blue) !important;
    border-color: var(--color-blue) !important;
}

#links-button-bar {
    gap: 10px;
}

#links-button-bar .sources-panel-buttons {
    margin: 0 !important;
    min-height: 48px;
    align-items: center;
}

.oldCell {
    border-bottom: 1px solid var(--color-green);
}

clear-filters-btn-active i {
    color: white !important;
    font-weight: 900;
}

#subs-emails-modal .modal-dialog {
    margin-top: 100px;
}

.modal.confirm-modal .modal-dialog {
    margin-top: 100px;
}

#graph-wrapper #map-controls {
    background-color: #efefef55;
    padding: 7px;
    border-radius: 7px;
    border: 1px solid #dedede;
}

/* Vignette markdown formatting */
#vignette-result {
    line-height: 1.6;
}

/* Standard markdown heading spacing for rendered markdown panels */
#vignette-result h1,
#vignette-result h2,
#vignette-result h3,
#vignette-result h4,
#vignette-result h5,
#rag-answer-content h1,
#rag-answer-content h2,
#rag-answer-content h3,
#rag-answer-content h4,
#rag-answer-content h5 {
    margin-top: 1rem;
    margin-bottom: 0.25rem;
    font-weight: 600;
}

#rag-answer-content h4 {
    font-size: 1.05rem;
}

#rag-answer-content h5 {
    font-size: 0.95rem;
}

#vignette-status {
    display: block;
    min-height: 1.5rem;
    padding: 0.25rem 0;
}

#vignette-status.fw-bold {
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }
}

#vignette-result h1 {
    font-size: 1.5rem;
}

#vignette-result h2 {
    font-size: 1.3rem;
}

#vignette-result h3 {
    font-size: 1.1rem;
}

#vignette-result h4 {
    font-size: 1.0rem;
}

#vignette-result h5 {
    font-size: 0.9rem;
}

#vignette-result ul,
#vignette-result ol {
    margin: 0.5rem 0;
    padding-left: 1.5rem;
}

#vignette-result li {
    margin: 0.25rem 0;
}

#vignette-result blockquote.vignette-callout {
    margin: 0.75rem 0;
    padding: 0.5rem 1rem;
    border-left: 3px solid #6c757d;
    background-color: #f8f9fa;
    font-size: inherit;
    /* Same font size as body text, not larger */
}

#vignette-result code {
    background-color: #f1f3f5;
    padding: 0.125rem 0.25rem;
    border-radius: 3px;
    font-size: 0.9em;
}

#vignette-result pre {
    background-color: #f1f3f5;
    padding: 0.75rem;
    border-radius: 4px;
    overflow-x: auto;
    margin: 0.5rem 0;
}

#vignette-result pre code {
    background-color: transparent;
    padding: 0;
}

/* --- Docs chat widget (bottom-right) --- */
.docs-bot-toggle {
    position: fixed;
    right: 50px;
    bottom: 16px;
    z-index: 1050;
    border-radius: 999px;
    font-size: 2.1rem;
    padding: 0.5rem 0.6rem;
    background-color: #fff;
    border: 1px solid #dee2e6;
    color: inherit;
}

/* Bottom notification bar — slides up over content when a toast is active */
.notification-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10050;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 1.2rem;
    font-size: 0.92rem;
    animation: notifBarIn 0.2s ease;
}

@keyframes notifBarIn {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

.notification-bar-msg { flex: 1; }

.notification-bar-close {
    background: none;
    border: none;
    font-size: 1rem;
    opacity: 0.6;
    cursor: pointer;
    margin-left: 1rem;
    padding: 0;
    line-height: 1;
}

.notification-bar-close:hover { opacity: 1; }

.notification-bar--success { background: var(--bs-success-bg-subtle, #d1e7dd); color: var(--bs-success-text-emphasis, #0a3622); border-top: 2px solid var(--bs-success, #198754); }
.notification-bar--danger  { background: var(--bs-danger-bg-subtle,  #f8d7da); color: var(--bs-danger-text-emphasis,  #58151c); border-top: 2px solid var(--bs-danger,  #dc3545); }
.notification-bar--warning { background: var(--bs-warning-bg-subtle, #fff3cd); color: var(--bs-warning-text-emphasis, #664d03); border-top: 2px solid var(--bs-warning, #ffc107); }
.notification-bar--info,
.notification-bar--process { background: var(--bs-info-bg-subtle,    #cff4fc); color: var(--bs-info-text-emphasis,    #055160); border-top: 2px solid var(--bs-info,    #0dcaf0); }

/* MapCat: nudge pulse/wobble — only the cat emoji animates, not the button/pill */
.docs-bot-toggle.docs-bot-toggle--nudge .docs-bot-toggle-cat {
    display: inline-block;
    animation: mapcatNudgePulse 1.05s ease-in-out infinite;
}

@keyframes mapcatNudgePulse {

    0%,
    100% {
        transform: translateY(0) rotate(0deg) scale(1);
    }

    20% {
        transform: translateY(-3px) rotate(-9deg) scale(1.12);
    }

    50% {
        transform: translateY(0) rotate(9deg) scale(1.12);
    }

    80% {
        transform: translateY(-2px) rotate(-6deg) scale(1.08);
    }
}

.docs-bot-panel {
    position: fixed;
    right: 50px;
    bottom: 72px;
    /* sit above the toggle button */
    width: 380px;
    max-width: calc(100vw - 32px);
    z-index: 1050;
    font-size: 1.3em;
    /* ~30% bigger base font inside the bot */
    border: 2px solid var(--color-blue);
    border-radius: 10px;
    padding: 10px;

    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
}

/* Centre-screen welcome state (single CSS positioning system) */
.docs-bot-panel.docs-bot-panel--centre {
    position: fixed;
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    transform: translate(-50%, -50%);
    width: min(92vw, 920px);
    height: min(78vh, 740px);
    min-height: 500px;
    z-index: 10100;
    display: flex;
    flex-direction: column;
    animation: mapcatCentreIn 0.35s ease;
}

@keyframes mapcatCentreIn {
    from { opacity: 0; transform: translate(-50%, -50%) scale(0.95); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* Exit animation: shrink toward bottom-right corner */
.docs-bot-panel--exiting {
    animation: mapcatCentreOut 0.4s ease forwards;
    pointer-events: none;
}

@keyframes mapcatCentreOut {
    from { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    to   { opacity: 0; transform: translate(40vw, 80vh) scale(0.15); }
}

/* Stretch history to fill available height in centre mode */
.docs-bot-panel.docs-bot-panel--centre #docs-bot-history {
    flex: 1;
    min-height: 0;
    max-height: none;
}

/* In centre mode, card body must fill panel so history can grow */
.docs-bot-panel.docs-bot-panel--centre .card-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.docs-bot-panel .card-header {
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
    font-size: 1.05em;
    /* slightly larger header */
}

/* MapCat header tidy: compact Pro toggle + grouped window controls */
.docs-bot-model-toggle-wrap .form-check-input {
    margin-top: 0;
}

.docs-bot-model-toggle-wrap .small {
    margin-left: 0.05rem;
}

.docs-bot-window-controls .docs-bot-window-btn {
    border-radius: 0;
}

.docs-bot-window-controls .docs-bot-window-btn:first-child {
    border-top-left-radius: 0.375rem;
    border-bottom-left-radius: 0.375rem;
}

.docs-bot-window-controls .docs-bot-window-btn:last-child {
    border-top-right-radius: 0.375rem;
    border-bottom-right-radius: 0.375rem;
}

.docs-bot-panel .card-body {
    /* Allow expanded mode to use available height cleanly */
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.docs-bot-window-btn.docs-bot-window-btn--active {
    border-color: var(--color-blue);
    background: rgba(40, 129, 194, 0.08);
}

/* Pulse layout icons when MapCat open, so user knows they can minimise or change layout */
.docs-bot-window-btn.docs-bot-window-btn--pulse {
    animation: docsBotLayoutPulse 1.2s ease-in-out infinite;
}

@keyframes docsBotLayoutPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.docs-bot-history {
    max-height: 260px;
    overflow: auto;
    flex: 1 1 auto;
    min-height: 120px;
}

.docs-bot-panel.docs-bot-panel--expanded {
    width: min(840px, calc(100vw - 32px));
    height: min(78vh, 760px);
}

.docs-bot-panel.docs-bot-panel--expanded .docs-bot-history {
    max-height: none;
    /* let flex + panel height control it */
}

.docs-bot-history h1,
.docs-bot-history h2,
.docs-bot-history h3,
.docs-bot-history h4,
.docs-bot-history h5,
.docs-bot-history h6 {
    margin-top: 0.9rem;
    /* more space above headings */
    margin-bottom: 0.4rem;
}

.docs-bot-history h1:first-child,
.docs-bot-history h2:first-child,
.docs-bot-history h3:first-child,
.docs-bot-history h4:first-child,
.docs-bot-history h5:first-child,
.docs-bot-history h6:first-child {
    margin-top: 0;
    /* avoid extra gap at very top of a message */
}

/* MapCat markdown lists: remove "blank line" spacing between bullets */
.docs-bot-history li>p {
    margin: 0;
}

.docs-bot-history ul,
.docs-bot-history ol {
    margin-bottom: 0.5rem;
}

.docs-bot-history li {
    margin-bottom: 0.25rem;
}

.docs-bot-msg {
    margin-bottom: 10px;
    border: 1px solid var(--color-blue);
    border-radius: 10px;
}

.docs-bot-msg .who {
    font-weight: 600;
    font-size: 1.2rem;
    color: white;
    margin-bottom: 2px;
    background-color: var(--color-blue);
    padding: 2px 6px;
    border-radius: 4px;
}

/* User msg header: blue bar with "You" + edit btn (both on blue so white icon visible) */
.docs-bot-msg.user .docs-bot-msg-header {
    background-color: var(--color-blue);
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    margin-bottom: 2px;
}
.docs-bot-msg.user .docs-bot-msg-header .who {
    background: none;
    margin-bottom: 0;
    padding: 0;
}
.docs-bot-msg.user .docs-bot-edit-btn {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9rem;
}
.docs-bot-msg.user .docs-bot-edit-btn:hover {
    color: #fff;
}

.docs-bot-msg .bubble {
    border-radius: 10px;
    padding: 8px 10px;
    white-space: pre-wrap;
    font-size: 1.1rem;
}

.docs-bot-msg.user .bubble {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.docs-bot-msg.bot .bubble {
    background: #f8f9fa;
    border: 1px solid rgba(0, 0, 0, 0.06);
}