/* 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;
}
/* Widen the project actions dropdown */
.file-menu-wide {
    min-width: 400px !important; /* ensure overall menu width */
}

/* 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 */
}
/* ===== 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: flex-end; /* align to bottom of rail */
    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 #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: flex-end;  /* place element at bottom of nav row */
    line-height: 1;        /* reduce internal vertical slack */
}

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

/* Position confirmation message lower in modal */
#confirmation-message { margin-top: 60px; }

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

    --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); }
}

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

/* 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 {
    font-size: 0.85rem;
}

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

.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 controls layout - constrain label width slider to match other controls */
.col-auto:has(#node-label-wrap) {
    max-width: 140px;
    /* Similar to other control widths */
    min-width: 120px;
    /* Ensure consistent minimum */
}

/* Fallback for browsers without :has() support */
#node-label-wrap {
    max-width: 120px;
    /* Direct constraint on the slider */
}

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


/* Button icons inherit color from their parent button */
.btn 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;
}

.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;
}

.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;
}

.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="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;
}

#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: 5px 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 */
}

#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%;
}

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

.project-selector-dropdown .selectize-option {
    padding: 12px 15px;
    font-size: 14px;
    color: var(--color-text-primary);
}

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

.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 {
    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;
}

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

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

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

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

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

.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;
    padding-top: 10px;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    box-shadow: 3px 3px 10px 5px rgba(0, 0, 0, 0.1) !important;
}

.text-viewer-header {
    padding: 10px 15px;
    border-bottom: 1px solid #ddd;
    border-radius: 5px;
    border: none;
    flex-shrink: 0;
}

.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-foot {
    position: absolute !important;
    bottom: 0 !important;
}

.causal-overlay {
    font-size: 0.8rem;
    background-color: var(--color-bg-white);
    position: fixed;
    border: 1.5px solid var(--color-green);
    border-radius: 8px;
    padding: 20px;
    padding-bottom: 90px;
    /* leave room for absolute footer */
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    z-index: 10000;
    width: 850px;
    cursor: default;
    user-select: none;
    /* Allow user to resize the overlay while keeping a reasonable minimum size */
    height: 600px;
    /* Enable CSS resize handles (bottom-right corner) */
    /* resize: both; */
    /* Ensure scrollbars appear once the overlay is resized beyond its content size */
    overflow: auto;
}

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

.causal-overlay-header {
    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-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 .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);
}

.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: 60px;
    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);
}

.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 */
.selectize-dropdown-content {
    max-height: inherit;
    overflow-y: inherit;
    overflow-x: hidden;
}

.selectize-dropdown.active {
    display: block !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(--color-text-primary);
    color: white;
    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;
}

.selectize-tag:hover {
    background-color: rgba(31, 31, 54, 0.8);
}

.selectize-tag-remove {
    cursor: pointer;
    font-weight: bold;
    color: rgba(255, 255, 255, 0.8);
}

.selectize-tag-remove:hover {
    color: white;
}

.selectize-clear-btn {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 16px;
    cursor: pointer;
    color: var(--color-text-muted);
    display: none;
    transition: color 0.2s ease;
}

.selectize-container.has-selections .selectize-clear-btn {
    display: block;
}

.selectize-clear-btn:hover {
    color: var(--color-text-primary);
}

.selectize-control.multi .selectize-input [data-value] {
    background-color: var(--color-green) !important;
    background-image: linear-gradient(to bottom, var(--color-green), var(--color-green)) !important;
    background-repeat: repeat-x;
}

.selectize-control.multi .selectize-input [data-value].active {
    background-color: var(--color-blue) !important;
    background-image: linear-gradient(to bottom, var(--color-blue), var(--color-blue)) !important;
    background-repeat: repeat-x;
}

.selectize-dropdown .selected {
    background-color: var(--color-blue);
    color: #fff;
}

.selectize-dropdown .active {
    background-color: var(--color-blue);
    color: #fff;
}

/* =============================================================================
   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: hide all left content by default, show only selected */
    .left-pane #project-selector-header,
    .left-pane #sourcesHeader,
    .left-pane #link-creation-panel { display: none !important; }
    
    /* Show specific left content when mobile view is active */
    .left-pane.show-projects-bar #project-selector-header { display: flex !important; }
    .left-pane.show-sources-bar #sourcesHeader { display: flex !important; }
    .left-pane.show-create-links #link-creation-panel { display: block !important; }
    .left-pane.show-filter-links #link-creation-panel { display: block !important; }
    
    /* 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;
    transition: background-color 0.2s;
    margin-right: 10px;
    margin-left: 10px;
}

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


.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 {
    max-height: 60vh;
    overflow: auto;
    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;
}

.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-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;
    background-color: #e8e9ea;
    border-radius: 4px;
    padding: 4px 8px;
    height: 40px;
}

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

.filter-content-compact {
    margin: 0 12px;
    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;
}

.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: 1050;
    min-width: 200px;
}

.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;
}

/* Zoom filter radio buttons */
.zoom-radio-group {
    padding: 4px 0;
}

.zoom-radio-label {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 6px 10px;
    min-width: 32px;
    min-height: 28px;
    transition: all 0.2s ease;
    user-select: none;
    justify-content: center;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.zoom-radio-label:hover {
    background: #e9ecef;
    border-color: #adb5bd;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.zoom-radio-label:has(input:checked) {
    background: #518756;
    border-color: #518756;
    /* unified */
    color: white;
    box-shadow: 0 2px 4px rgba(0, 123, 255, 0.25);
    transform: translateY(-1px);
}

.zoom-radio-label input[type="radio"] {
    appearance: none;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
}

.zoom-radio-label span {
    font-weight: 600;
    font-size: 12px;
    line-height: 1;
}

/* Match mode radio buttons for label/tag filters - inline style */
.match-radio-group-inline {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin-top: 2px;
}

.match-radio-label-inline {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 3px;
    padding: 1px 4px;
    min-width: 16px;
    min-height: 16px;
    transition: all 0.15s ease;
    user-select: none;
    font-size: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.match-radio-label-inline:hover {
    background: #e9ecef;
    border-color: #adb5bd;
}

.match-radio-label-inline:has(input:checked) {
    background: #518756;
    border-color: #518756;
    /* unified */
    color: white;
    font-weight: 600;
}

.match-radio-label-inline input[type="radio"] {
    appearance: none;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
}

.match-radio-label-inline span {
    font-size: 9px;
    line-height: 1;
    text-align: center;
}

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

/* Bookmarks – yellow */
#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);
}

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

/* Steps radio buttons - match zoom filter style but smaller */
.steps-radio-label {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 3px;
    padding: 2px 4px;
    margin: 0 1px;
    transition: all 0.2s;
    font-size: 10px !important;
}

.steps-radio-label:hover {
    background: #e9ecef;
    border-color: #adb5bd;
}

.steps-radio-label input[type="radio"] {
    display: none;
}

.steps-radio-label input[type="radio"]:checked+span {
    color: #fff;
}

.steps-radio-label:has(input[type="radio"]:checked) {
    background: #518756;
    border-color: #518756;
    /* unified */
    color: #fff;
}

#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-color: #518756 !important;
    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;
}


.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;
}

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

.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;
}

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

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

.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-process-sources-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 */
}


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

.btn-check+.btn-outline-secondary {
    border-color: lightgray !important;
    color: lightgray !important;
}

/* Highlight selected option in our btn-outline-secondary toggle groups */
.btn-check:checked+.btn-outline-secondary,
.btn-outline-secondary.active,
.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
    border-color: var(--color-green) !important;
    color: var(--color-green) !important;
    font-weight: 600 !important;
}

/* Ensure flex wrapping inside filter content so controls don't overflow */
.filter-widget-compact .filter-content-compact {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    /* Prevent overflow by ensuring content wraps and stays within bounds */
    min-width: 0;
    overflow: visible;
}

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

/* =============================================================================
   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 Controls Overlay
   ============================================================================= */
#graph-wrapper {
    position: relative;
}

#graph-wrapper #map-controls {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 100;
    display: flex;
    gap: 6px;
}

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

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

/* =============================================================================
   Modal Positioning - Unified Top Offset
   ============================================================================= */
#project-modal .modal-dialog,
#edit-source-modal .modal-dialog {
    position: fixed;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
}

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

 .modal-content{
top: 100px !important;
}
#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 inside causal overlay - fixed to bottom of overlay */
#causal-overlay-footer {
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 6px;
    background: var(--color-bg-white);
    border-top: 1px solid var(--color-border);
    z-index: 5;
}

/* Smaller chain toggle and extra spacing from Save */
#causal-overlay-footer .form-check.form-switch {
    margin-left: 14px !important;
    /* add space to the left of the toggle */
}

#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;
}

.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;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    border-radius: 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 */
.selectize-input .item .remove {
    display: inline-block;
    width: 16px;
    height: 16px;
    line-height: 14px;
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    color: #666;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 2px;
    margin-left: 4px;
    cursor: pointer;
    vertical-align: middle;
}

.selectize-input .item .remove:hover {
    background: rgba(0, 0, 0, 0.2);
    color: #333;
}

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

/* Ensure causal overlay selectize dropdowns are visible */
.causal-overlay .selectize-control .selectize-dropdown {
    position: absolute !important;
    z-index: 10000 !important;
    background: white !important;
    border: 1px solid #ccc !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
    max-height: 200px !important;
    overflow-y: auto !important;
}

/* === 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(--color-green);
    border-color: var(--color-green);
    color: white;
    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;
}

.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;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

/* AI Coding Header - Sticky at top */
#ai-card .card-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
    background-color: var(--color-bg-white) !important;
    border-bottom: 1px solid var(--color-border) !important;
}

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

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

/* Modal tooltips need higher z-index */
.modal .custom-styled-tooltip {
    z-index: 10015;
    /* Above modal (10010) */
}

/* 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; }
.custom-styled-tooltip.modal-context { z-index: 10015; }

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

.clear-filters-btn-active i {
    color: var(--color-pink) !important;
    font-weight: 900;
}

/* 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,
.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,
.btn-outline-info.contextual-help-btn:hover {
    border-color: var(--color-green) !important;
    color: white !important;
}

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 viewer */
#slide-viewer-content .slide-container {
    height: calc(100vh - 120px);
    max-height: calc(100vh - 120px);
}

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

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

/* --- Login page button colors (specific overrides) --- */
/* Make the three login buttons visually distinct and override broad .btn rules */
#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 button: ensure not caught by .btn[id*="go"] */
#google-login-btn {
    background-color: #4285F4 !important;
    /* Google blue */
    border-color: #4285F4 !important;
    color: #ffffff !important;
}

#google-login-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);
}