/* --- Basic Styling --- */
body {
    font-family: sans-serif;
    margin: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden; /* Prevent body scrollbars */
}
/* Style to prevent text selection during splitter drag */
body.resizing, body.resizing * {
    cursor: col-resize !important;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}
/* Style during column resizing */
body.col-resizing, body.col-resizing * {
    cursor: col-resize !important; /* Force cursor globally */
    user-select: none; /* Prevent text selection */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* ========================================
   FIXED OVERLAY SIDEBAR
   ======================================== */
.left-sidebar {
    position: fixed; /* 🔑 KEY: Outside layout flow */
    left: 0;
    top: 32px; /* Below minimal-toolbar (32px height) */
    bottom: 0;
    width: 250px;
    background: #1e2139; /* Wrike dark navy background */
    color: #d3dae3;
    display: flex;
    flex-direction: column;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
    overflow-y: auto; /* Scroll sidebar content if needed */
    overflow-x: hidden;
    z-index: 1000; /* Above gantt, below modals */
    transform: translateX(0); /* Visible by default (pinned open) */
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 6px 0; /* Consistent 6px top/bottom padding */
}

/* Collapsed sidebar state - Completely hidden */
.left-sidebar.collapsed {
    transform: translateX(-100%);
}

/* Hover trigger shows sidebar temporarily when collapsed */
.left-sidebar.collapsed.hover-visible {
    transform: translateX(0);
}

/* Left edge hover trigger zone */
.sidebar-hover-trigger {
    position: fixed;
    left: 0;
    top: 32px; /* Below minimal-toolbar */
    bottom: 0;
    width: 5px; /* Thin trigger zone */
    z-index: 999; /* Below sidebar but above content */
    background: transparent;
    cursor: pointer;
}

/* Show text labels when hovering (collapsed state) */
.left-sidebar.collapsed.hover-visible .sidebar-brand,
.left-sidebar.collapsed.hover-visible .section-title,
.left-sidebar.collapsed.hover-visible .nav-label,
.left-sidebar.collapsed.hover-visible .project-name,
.left-sidebar.collapsed.hover-visible .btn-new-project,
.left-sidebar.collapsed.hover-visible .btn-icon-small {
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.2s ease 0.1s;
}

/* Toggle button - Professional style */
.sidebar-toggle {
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #ffffff;
    font-size: 14px;
    font-weight: bold;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

.sidebar-toggle:hover {
    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
}

.sidebar-toggle:active {
    transform: scale(0.95);
}

/* Toggle button icon - Chevron SVG */
.sidebar-toggle .toggle-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.sidebar-toggle svg {
    color: #ffffff;
}

/* Icon animates on hover */
.sidebar-toggle:hover .toggle-icon {
    transform: scale(1.1);
}

/* Hide text when collapsed */
.left-sidebar.collapsed .sidebar-brand,
.left-sidebar.collapsed .section-title,
.left-sidebar.collapsed .nav-label,
.left-sidebar.collapsed .project-name,
.left-sidebar.collapsed .btn-new-project,
.left-sidebar.collapsed .btn-icon-small {
    opacity: 0;
    pointer-events: none;
}

/* ❌ REMOVED: Show labels on hover - confusing UX
   Now labels only show when sidebar is expanded via toggle button */
/* .left-sidebar.collapsed:hover .sidebar-brand,
.left-sidebar.collapsed:hover .section-title,
.left-sidebar.collapsed:hover .nav-label,
.left-sidebar.collapsed:hover .project-name,
.left-sidebar.collapsed:hover .btn-new-project,
.left-sidebar.collapsed:hover .btn-icon-small {
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.2s ease 0.1s;
} */

/* Keep icons visible when collapsed */
.left-sidebar.collapsed .nav-icon,
.left-sidebar.collapsed .project-icon {
    margin: 0;
    font-size: 20px; /* Larger icon when collapsed */
}

.left-sidebar.collapsed .nav-item {
    justify-content: center;
}

/* Center project items when collapsed */
.left-sidebar.collapsed .project-item {
    justify-content: center;
    padding-left: 0;
}

/* Hide empty state messages when collapsed */
.left-sidebar.collapsed .empty-state,
.left-sidebar.collapsed .empty-state-small {
    display: none;
}

/* Adjust sidebar brand when collapsed */
.left-sidebar.collapsed .sidebar-brand {
    justify-content: center;
}

/* Prevent text wrapping during collapse transition */
.left-sidebar .sidebar-brand,
.left-sidebar .section-title,
.left-sidebar .nav-label,
.left-sidebar .project-name {
    white-space: nowrap;
    overflow: hidden;
}

.sidebar-header {
    padding: 4px 6px 4px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.sidebar-org-switcher {
    flex: 1;
    min-width: 0;
}

.sidebar-brand {
    font-size: 15px;
    font-weight: 500;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: 0.02em;
}

.sidebar-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Scrollbar styling for sidebar */
.sidebar-content::-webkit-scrollbar {
    width: 6px;
}

.sidebar-content::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
}

.sidebar-content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

.sidebar-content::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* ========================================
   PROJECTS DROPDOWN (Wrike-style)
   ======================================== */

.projects-dropdown-container {
    margin: 16px 12px 20px 12px;
    position: relative;
}

/* Collapsed state - Trigger button */
.projects-dropdown-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: #d3dae3;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 14px;
}

.projects-dropdown-trigger:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.15);
}

.projects-dropdown-trigger .project-icon {
    flex-shrink: 0;
    color: #00BCD4;
}

.projects-dropdown-trigger .project-name {
    flex: 1;
    text-align: left;
    font-weight: 500;
}

.projects-dropdown-trigger .dropdown-chevron {
    flex-shrink: 0;
    transition: transform 0.2s ease;
    color: #8a94a6;
}

.projects-dropdown-trigger .dropdown-chevron.open {
    transform: rotate(180deg);
}

/* Expanded state - Dropdown panel */
.projects-dropdown-panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    z-index: 2000;
    display: none;
    flex-direction: column;
    max-height: 400px;
    overflow-y: auto;
}

.projects-dropdown-panel.open {
    display: flex;
}

.dropdown-section-header {
    padding: 12px 16px 8px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6c757d;
}

/* Project items (Personal, NYD Projects) */
.project-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    cursor: pointer;
    transition: background 0.15s ease;
    color: #212529;
}

.project-item:hover {
    background: #f8f9fa;
}

.project-item.selected {
    background: #e0f7fa;
    border: 1px solid #00BCD4;
    border-left: none;
    border-right: none;
}

.project-item-icon {
    flex-shrink: 0;
}

.project-item-name {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
}

.project-item-menu {
    flex-shrink: 0;
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: #6c757d;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.project-item:hover .project-item-menu {
    opacity: 1;
}

.project-item-menu:hover {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 4px;
}

/* Divider */
.dropdown-divider {
    height: 1px;
    background: #e9ecef;
    margin: 8px 0;
}

/* Action items (Shared with me, Blueprints, etc.) */
.project-action-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: none;
    border: none;
    cursor: pointer;
    transition: background 0.15s ease;
    color: #495057;
    font-size: 14px;
    text-align: left;
    width: 100%;
}

.project-action-item:hover {
    background: #f8f9fa;
}

.project-action-item .action-icon {
    flex-shrink: 0;
    color: #6c757d;
}

.project-action-item.add-new {
    color: #00BCD4;
    font-weight: 500;
}

.project-action-item.add-new .action-icon {
    color: #00BCD4;
}

/* Sidebar Sections */
.sidebar-section {
    padding: 0; /* Removed - let children handle spacing */
    border-bottom: none;
}

/* Section divider for consistent gaps between sections */
.section-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.06);
    margin: 6px 12px; /* Consistent 6px vertical spacing */
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px 8px;
}

.section-title {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: #d3dae3;
}

.btn-icon-small {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    color: #ecf0f1;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.btn-icon-small:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

/* Navigation Items */
.nav-item {
    display: flex;
    align-items: center;
    padding: 3px 12px; /* Consistent 3px vertical (matches section headers) */
    height: 22px; /* Fixed height for consistent row rhythm */
    cursor: pointer;
    position: relative;
    transition: all 0.2s;
    color: #b8c2cf;
    font-size: 14px;
}

/* Icon positioning for items WITHOUT chevron */
.nav-item:not(.has-children) .item-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: #8b9aad;
    margin-left: 22px; /* Same position as chevrons (12px chevron + 10px margin = 22px) */
    margin-right: 12px;
}

/* Item chevron for expandable nav items - aligned exactly with section chevrons */
.nav-item.has-children {
    position: relative;
    padding-left: 12px; /* Match section header padding */
}

/* Remove extra padding for sub-items with children to align with siblings */
.nav-sub-items > .nav-item.nav-sub-item.has-children {
    padding-left: 50px; /* Same as siblings without has-children */
}

.item-chevron {
    font-size: 10px; /* Slightly smaller for solid triangles */
    font-weight: normal;
    color: #8b9aad;
    width: 12px;
    flex-shrink: 0;
    display: inline-block;
    text-align: center;
    margin-right: 10px; /* Space after chevron */
    cursor: pointer;
}

.nav-item.has-children .item-icon {
    margin-left: 0; /* Icon comes right after chevron */
    margin-right: 12px;
}

/* Nav sub-items container with collapse/expand */
.nav-sub-items {
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.nav-sub-items.expanded {
    max-height: 10000px; /* Increased from 1000px to support deep nesting */
}

.nav-sub-items.collapsed {
    max-height: 0;
}

/* Sub-items proper indentation - nested under parent items */
.nav-sub-items .nav-item.nav-sub-item {
    padding-left: 50px; /* Base indentation for all sub-items */
}

/* Level 0 categories under Single Trades - extra indentation */
.nav-sub-items .nav-sub-items .nav-item.nav-sub-item.has-children {
    padding-left: 65px; /* Core and shell nested under Single Trades */
}

.nav-sub-items .nav-item.nav-sub-item .item-icon {
    margin-left: 0; /* Icon comes first in sub-items */
    margin-right: 12px;
}

/* Double-nested items (Level 1 children like Foundation) */
.nav-sub-items .nav-sub-items .nav-item.nav-sub-sub-item {
    padding-left: 85px; /* Foundation etc. nested under Core and shell */
}

/* Emoji icons for look-ahead items */
.nav-sub-items .nav-item.nav-sub-item .item-icon-text {
    display: inline-block;
    margin-left: 0;
    margin-right: 12px;
    font-size: 14px;
    line-height: 1;
    vertical-align: middle;
}

/* --- Filter Indicator Styles --- */
/* ========================================
   TOAST NOTIFICATION SYSTEM (Bottom-Right)
   ======================================== */

.toast-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none; /* Allow clicking through container */
}

.filter-toast {
    pointer-events: all; /* Toast itself is clickable */
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 300px;
    max-width: 400px;
    opacity: 0;
    transform: translateX(100px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.filter-toast.show {
    opacity: 1;
    transform: translateX(0);
}

.filter-toast.hide {
    opacity: 0;
    transform: translateX(100px);
}

.toast-icon {
    font-size: 24px;
    flex-shrink: 0;
}

.toast-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.toast-title {
    font-size: 14px;
    font-weight: 600;
    color: #212529;
}

.toast-subtitle {
    font-size: 12px;
    color: #6c757d;
}

.toast-close {
    background: none;
    border: none;
    font-size: 24px;
    color: #adb5bd;
    cursor: pointer;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: color 0.2s;
}

.toast-close:hover {
    color: #495057;
}

/* Badge for filtered item counts */
.nav-badge {
    display: inline-block;
    background: rgba(52, 152, 219, 0.3);
    color: #3498db;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 10px;
    margin-left: 6px;
    line-height: 1;
    vertical-align: middle;
}

/* Visual highlighting for filtered tasks */
tr.filter-match {
    background: rgba(52, 152, 219, 0.08) !important; /* Subtle blue tint */
    border-left: 2px solid #3498db; /* Blue accent */
}

tr.filter-match:hover {
    background: rgba(52, 152, 219, 0.15) !important;
}

/* Urgency level highlighting */
tr.urgency-urgent {
    border-left-color: #e74c3c !important; /* Red for urgent (1 week) */
}

tr.urgency-medium {
    border-left-color: #f39c12 !important; /* Orange for medium (2 weeks) */
}

tr.urgency-normal {
    border-left-color: #2ecc71 !important; /* Green for normal (3-4 weeks) */
}

.nav-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.nav-item.active {
    background: rgba(70, 134, 255, 0.12); /* Wrike-style blue tint */
}

.nav-item.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: #4686ff;
}

.nav-label {
    flex: 1;
    font-weight: 400; /* Lighter weight like Wrike */
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #d3dae3;
}

/* Navigation Section Styles (Wrike-style) */
.nav-section {
    border-bottom: none;
    margin: 0;
}

.section-header.expandable {
    display: flex;
    align-items: center;
    padding: 3px 12px; /* Consistent 3px vertical */
    height: 22px; /* Fixed height (same as nav-item) */
    cursor: pointer;
    transition: background 0.2s;
    color: #d3dae3;
}

.section-header.expandable:hover {
    background: rgba(255, 255, 255, 0.05);
}

/* Chevron on far left with consistent positioning */
.expand-chevron {
    font-size: 10px; /* Slightly smaller for solid triangles */
    font-weight: normal;
    color: #8b9aad;
    width: 12px;
    flex-shrink: 0;
    display: inline-block;
    text-align: center;
    margin-right: 10px;
}

/* Section icons aligned after chevron */
.section-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: #8b9aad;
    margin-right: 12px;
}

.section-header.expandable .section-title {
    font-size: 14px;
    font-weight: 500;
    color: #d3dae3;
    letter-spacing: 0.02em;
    flex: 1;
}

.nav-items {
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.nav-items.expanded {
    max-height: 5000px;
}

.nav-items.collapsed {
    max-height: 0;
}

/* Removed duplicate .item-icon styles - now defined with nav-item styles */

/* Workspaces List */
.workspaces-list {
    display: flex;
    flex-direction: column;
    background: transparent !important;
}

.workspace-item {
    margin-bottom: 0;
    background: transparent !important;
}

.workspace-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    cursor: pointer;
    transition: all 0.2s;
    color: #ecf0f1;
    background: transparent !important;
}

.workspace-header:hover {
    background: rgba(255, 255, 255, 0.05) !important;
}

.workspace-item.active .workspace-header {
    background: transparent !important;
}

.workspace-item .expand-icon {
    font-size: 10px;
    color: #95a5a6;
    transition: transform 0.2s;
    width: 14px;
    flex-shrink: 0;
}

.workspace-item .expand-icon.expanded {
    transform: rotate(0deg);
}

.workspace-item .workspace-info {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.workspace-item .workspace-color {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.workspace-item .workspace-name {
    font-size: 13px;
    font-weight: 600;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.workspace-item .workspace-meta {
    font-size: 11px;
    color: #95a5a6;
    flex-shrink: 0;
}

/* Project List */
.sidebar-section .project-list {
    background: transparent !important; /* Clean, no background box */
    padding: 4px 0;
    border-top: none;
}

.sidebar-section .project-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    cursor: pointer;
    transition: all 0.2s;
    border-left: 3px solid transparent;
}

.sidebar-section .project-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.sidebar-section .project-item.active {
    background: rgba(52, 152, 219, 0.3);
    border-left-color: #3498db;
}

.sidebar-section .project-icon {
    font-size: 14px;
    color: #95a5a6;
    flex-shrink: 0;
}

.sidebar-section .project-name {
    font-size: 13px;
    font-weight: 400;
    color: #ecf0f1;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Sidebar Create Project Button */
.sidebar-section .btn-new-project {
    width: calc(100% - 32px);
    margin: 4px 16px 4px 40px;
    padding: 6px 10px;
    background: transparent; /* Clean, minimal look */
    border: none;
    border-radius: 4px;
    color: #95a5a6;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
}

.sidebar-section .btn-new-project:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #ecf0f1;
}

.empty-state,
.empty-state-small {
    padding: 16px;
    text-align: center;
    color: #95a5a6;
    font-size: 12px;
    font-style: italic;
}

.empty-state-small {
    padding: 12px 16px 12px 40px;
    font-size: 11px;
}

/* --- Main Content Area --- */
.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
    position: relative;
    width: 100%; /* Take full width of remaining space */
    padding-left: 16px; /* Add spacing between sidebar and content */
    transition: padding-left 0.3s ease; /* Smooth transition when sidebar changes */
}

/* Adjust padding when sidebar is collapsed */
.left-sidebar.collapsed ~ .main-content {
    padding-left: 12px; /* Slightly less padding when sidebar is collapsed */
}

/* --- Breadcrumb Navigation --- */
.breadcrumb-container {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: #ffffff;
    border-bottom: 1px solid #e1e5e9;
    font-size: 13px;
    flex-shrink: 0;
    min-height: 36px;
}

.breadcrumb-item {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #495057;
    cursor: pointer;
    transition: all 0.2s;
    padding: 4px 8px;
    border-radius: 4px;
}

.breadcrumb-item:hover {
    background: #f8f9fa;
    color: #007bff;
}

.breadcrumb-item.active {
    color: #212529;
    font-weight: 600;
    cursor: default;
}

.breadcrumb-item.active:hover {
    background: transparent;
}

.breadcrumb-item .workspace-color {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.breadcrumb-separator {
    color: #adb5bd;
    font-size: 14px;
    user-select: none;
}

.breadcrumb-empty {
    color: #adb5bd;
    font-style: italic;
}

/* --- Minimal Toolbar --- */
.minimal-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
    padding: 0;
    min-height: 32px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    flex-shrink: 0;
}

.toolbar-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.toolbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Zoom Controls Group */
.zoom-group {
    display: flex;
    align-items: center;
    gap: 1px;
    border: 1px solid #e1e5e9;
    border-radius: 4px;
    background: white;
}

.icon-btn {
    width: 28px;
    height: 28px;
    border: none;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 12px;
    color: #495057;
}

.zoom-group .icon-btn:first-child {
    border-radius: 3px 0 0 3px;
}

.zoom-group .icon-btn:last-child {
    border-radius: 0 3px 3px 0;
}

.icon-btn:hover {
    background: #f1f3f5;
}

.icon-btn:active {
    background: #e9ecef;
}

.icon-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Zoom button icons with CSS */
#zoom-out-btn {
    position: relative;
    font-size: 10px;
}

#zoom-out-btn::after {
    content: "−";
    position: absolute;
    bottom: 2px;
    right: 2px;
    font-size: 8px;
    font-weight: bold;
    color: #666;
}

#zoom-in-btn {
    position: relative;
    font-size: 10px;
}

#zoom-in-btn::after {
    content: "+";
    position: absolute;
    bottom: 2px;
    right: 2px;
    font-size: 8px;
    font-weight: bold;
    color: #666;
}

/* Zoom to fit - frame icon using CSS */
#zoom-fit-btn {
    position: relative;
    font-size: 8px;
}

#zoom-fit-btn::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 8px;
    border: 1.5px solid #666;
    border-radius: 1px;
}

#zoom-fit-btn::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 4px;
    border: 1px solid #666;
    border-radius: 0.5px;
}

.toolbar-divider {
    width: 1px;
    height: 20px;
    background: #e1e5e9;
}

/* User Profile Section */
.user-profile {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 8px;
}

/* Compact user profile in minimal-toolbar */
.minimal-toolbar .user-profile-btn {
    padding: 4px 8px;
    gap: 6px;
}

.minimal-toolbar .user-avatar {
    width: 24px;
    height: 24px;
    font-size: 11px;
}

.minimal-toolbar .user-name {
    font-size: 12px;
}

.minimal-toolbar .dropdown-arrow {
    font-size: 8px;
}

.user-email {
    font-size: 12px;
    color: #495057;
    font-weight: 500;
}

#logout-btn {
    width: 28px;
    height: 28px;
    border: 1px solid #e1e5e9;
    border-radius: 4px;
}

#logout-btn:hover {
    background: #ffebee;
    color: #d32f2f;
    border-color: #ef9a9a;
}

/* Workspace Selector */
.workspace-selector {
    position: relative;
}

.workspace-selector-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background: white;
    border: 1px solid #e1e5e9;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    color: #333;
    transition: all 0.2s;
}

.workspace-selector-btn:hover {
    background: #f8f9fa;
    border-color: #6A4CFF;
}

.workspace-icon {
    font-size: 14px;
}

.workspace-name {
    font-weight: 500;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dropdown-arrow {
    font-size: 10px;
    color: #666;
}

.workspace-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 8px;
    background: white;
    border: 1px solid #e1e5e9;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    min-width: 280px;
    z-index: 1000;
}

.workspace-list {
    max-height: 300px;
    overflow-y: auto;
}

/* Removed duplicate - using sidebar-section .workspace-item instead */

.workspace-color {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.workspace-info {
    flex: 1;
}

.workspace-item-name {
    font-size: 13px;
    font-weight: 500;
    color: #333;
}

.workspace-item-meta {
    font-size: 11px;
    color: #666;
}

.check-mark {
    color: #6A4CFF;
    font-weight: bold;
}

.workspace-dropdown-footer {
    border-top: 1px solid #e1e5e9;
    padding: 8px;
}

.btn-new-workspace {
    width: 100%;
    padding: 8px 12px;
    background: white;
    border: 1px dashed #6A4CFF;
    border-radius: 6px;
    color: #6A4CFF;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-new-workspace:hover {
    background: #f0f3ff;
    border-color: #5538E8;
}

.btn-new-workspace span {
    font-size: 16px;
    margin-right: 4px;
}

/* Workspace Group with Projects */
.workspace-group {
    border-bottom: 1px solid #f0f0f0;
}

.workspace-group:last-child {
    border-bottom: none;
}

.expand-icon {
    font-size: 10px;
    color: #666;
    cursor: pointer;
    padding: 4px;
    transition: transform 0.2s;
    user-select: none;
}

.expand-icon:hover {
    color: #6A4CFF;
}

/* Project List - Clean, no background */
.project-list {
    background: transparent !important;
    padding: 0;
    border-top: none;
}

.project-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    cursor: pointer;
    transition: all 0.2s;
}

.project-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.project-item.active {
    background: rgba(52, 152, 219, 0.3);
}

.project-name {
    font-size: 13px;
    font-weight: 400;
    color: #ecf0f1;
    flex: 1;
}

.project-meta {
    font-size: 10px;
    color: #666;
    margin-top: 2px;
}

.btn-new-project {
    width: calc(100% - 24px);
    margin: 8px 12px 8px 32px;
    padding: 6px 10px;
    background: white;
    border: 1px dashed #6A4CFF;
    border-radius: 4px;
    color: #6A4CFF;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-new-project:hover {
    background: #f0f3ff;
    border-color: #5538E8;
}

.btn-new-project span {
    font-size: 14px;
    margin-right: 4px;
}

/* Scale Options Mini */
.scale-options-mini {
    display: flex;
    align-items: center;
    gap: 2px;
}

.scale-option-mini {
    cursor: pointer;
    padding: 0;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 500;
    transition: all 0.2s ease;
    color: #6c757d;
    border: 1px solid transparent;
}

.scale-option-mini:hover {
    background: #f8f9fa;
    border-color: #dee2e6;
}

.scale-option-mini input[type="radio"] {
    display: none;
}

.scale-option-mini:has(input[type="radio"]:checked) {
    background: #007bff;
    color: white;
    border-color: #007bff;
}

/* Search Box */
.search-box {
    border: 1px solid #e1e5e9;
    border-radius: 4px;
    padding: 5px 10px;
    font-size: 12px;
    width: 180px;
    background: white;
    color: #495057;
}

.search-box:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0,123,255,0.1);
}

.search-box::placeholder {
    color: #adb5bd;
}

/* Action Buttons (replaced Settings Dropdown) */
.action-buttons {
    display: flex;
    align-items: center;
    gap: 8px;
}

.action-btn {
    background: #f8f9fa;
    border: 1px solid #e1e5e9;
    border-radius: 4px;
    padding: 5px 10px;
    cursor: pointer;
    font-size: 11px;
    color: #495057;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s ease;
    font-weight: 500;
    white-space: nowrap;
}

.action-btn:hover {
    background: #e9ecef;
    border-color: #adb5bd;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.action-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.action-btn.active {
    background: #007bff;
    color: white;
    border-color: #0056b3;
}

.action-btn.disabled {
    background: #6c757d;
    color: #adb5bd;
    border-color: #6c757d;
    opacity: 0.7;
    cursor: default;
}

.action-btn.disabled:hover {
    background: #6c757d;
    color: #adb5bd;
    border-color: #6c757d;
    transform: none;
    box-shadow: none;
}


/* Settings Dropdown */
.settings-dropdown {
    position: relative;
}

.settings-btn {
    background: #f8f9fa;
    border: 1px solid #e1e5e9;
    border-radius: 4px;
    padding: 5px 10px;
    cursor: pointer;
    font-size: 11px;
    color: #495057;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s ease;
    font-weight: 500;
}

.settings-btn:hover {
    background: #e9ecef;
    border-color: #adb5bd;
}

/* Trade Layout Button */
.toolbar-btn {
    background: #f8f9fa;
    border: 1px solid #e1e5e9;
    border-radius: 4px;
    padding: 5px 10px;
    cursor: pointer;
    font-size: 11px;
    color: #495057;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.toolbar-btn:hover {
    background: #e9ecef;
    border-color: #adb5bd;
}

.toolbar-btn.active {
    background: #007bff;
    color: white;
    border-color: #0056b3;
}

.toolbar-btn .icon {
    font-size: 14px;
}

.settings-menu {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 2px;
    background: white;
    border: 1px solid #e1e5e9;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    min-width: 160px;
    z-index: 1000;
    display: none;
}

.settings-menu.show {
    display: block;
}

.menu-item {
    padding: 8px 12px;
    cursor: pointer;
    font-size: 12px;
    color: #495057;
    border-bottom: 1px solid #f8f9fa;
    transition: background 0.2s ease;
}

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

.menu-item:hover {
    background: #f8f9fa;
}

/* Right-Click Context Menu */
.context-menu {
    position: fixed;
    background: white;
    border: 1px solid #e1e5e9;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    min-width: 180px;
    z-index: 2500; /* Higher than modal z-index */
    display: none;
    padding: 4px 0;
}

.context-menu.show {
    display: block;
}

.context-menu-item {
    padding: 8px 12px;
    cursor: pointer;
    font-size: 12px;
    color: #495057;
    transition: background 0.2s ease;
    user-select: none;
}

.context-menu-item:hover {
    background: #f8f9fa;
}

.context-menu-item:active {
    background: #e9ecef;
}

.context-menu-separator {
    height: 1px;
    background: #e1e5e9;
    margin: 4px 0;
}

.context-menu-item.disabled {
    color: #adb5bd;
    cursor: not-allowed;
}

.context-menu-item.disabled:hover {
    background: transparent;
}

/* Show Columns Modal Specific Styles */
.columns-container {
    max-height: 400px;
    overflow-y: auto;
}

.column-group h4 {
    margin: 0 0 15px 0;
    color: #495057;
    font-size: 14px;
    font-weight: 600;
}

.column-checkboxes {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.column-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 13px;
    color: #495057;
    user-select: none;
}

.column-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.column-checkbox span {
    flex: 1;
}

.column-checkbox:hover {
    color: #007bff;
}

.modal-footer {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #e1e5e9;
}

.btn {
    padding: 8px 16px;
    border: 1px solid;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.btn-secondary {
    background: #f8f9fa;
    border-color: #e1e5e9;
    color: #495057;
}

.btn-secondary:hover {
    background: #e9ecef;
    border-color: #adb5bd;
}

.btn-primary {
    background: #007bff;
    border-color: #007bff;
    color: white;
}

.btn-primary:hover {
    background: #0056b3;
    border-color: #0056b3;
}

/* Modal */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 20000; /* 🔧 FIX: Increased from 2000 - must be higher than dependency popup (10000) */
    display: none;
    align-items: center;
    justify-content: center;
}

/* ========================================
   DRAG & DROP ROW REORDERING (PHASE 3)
   ======================================== */

/* Drag handle icon in ID cell */
.drag-handle {
    display: inline-block;
    font-size: 12px;
    color: #999;
    margin-right: 4px;
    user-select: none;
    vertical-align: middle;
}

/* ID cell with drag handle (draggable) */
.drag-handle-cell {
    cursor: grab;
    user-select: none;
    white-space: nowrap; /* Prevent wrapping - keep icon and number on same line */
    overflow: hidden; /* Hide overflow if content exceeds width */
    text-overflow: clip; /* Don't show ellipsis for ID numbers */
}

.drag-handle-cell:active {
    cursor: grabbing;
}

.drag-handle-cell:hover .drag-handle {
    color: #007bff;
}

/* Row being dragged (class applied via JavaScript) */
tr.drag-in-progress {
    opacity: 0.6;
    background-color: #f0f0f0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Row that is the drop target (class applied via JavaScript) */
tr.drop-target {
    background-color: #e8f4fd;
    border-top: 3px solid #007bff;
    border-bottom: 3px solid #007bff;
    box-shadow: inset 0 2px 4px rgba(0, 123, 255, 0.1);
}

.modal-overlay.show {
    display: flex;
}

.modal-content {
    background: white;
    border-radius: 8px;
    max-width: 500px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px 16px;
    border-bottom: 1px solid #e1e5e9;
}

.modal-title {
    font-size: 16px;
    font-weight: 600;
    color: #212529;
}

.close-btn {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: #6c757d;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.close-btn:hover {
    background: #f8f9fa;
    color: #212529;
}

.modal-body {
    padding: 20px 24px 24px;
}

/* Form Groups */
.form-group {
    margin-bottom: 16px;
}

.form-group label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 500;
    color: #495057;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group input[type="date"],
.form-group input[type="color"],
.form-group textarea {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    font-size: 13px;
    color: #495057;
    background: white;
    box-sizing: border-box;
    transition: border-color 0.2s ease;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

.form-group textarea {
    resize: vertical;
    font-family: inherit;
}

.form-group input[type="color"] {
    height: 40px;
    padding: 4px;
    cursor: pointer;
}

.error-message {
    color: #dc3545;
    font-size: 12px;
    margin-top: 8px;
    padding: 8px 12px;
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    border-radius: 4px;
}

.file-upload-container {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.upload-button-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    z-index: -1;
}

.upload-button {
    background: #007bff;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.2s;
    display: inline-block;
    text-decoration: none;
    position: relative;
}

.upload-button:hover {
    background: #0056b3;
}

.file-name {
    color: #6c757d;
    font-style: italic;
}

.import-progress {
    margin-bottom: 15px;
}

.progress-bar {
    width: 100%;
    height: 20px;
    background: #e9ecef;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 5px;
}

.progress-fill {
    height: 100%;
    background: #28a745;
    transition: width 0.3s ease;
    width: 0%;
}

.progress-text {
    font-size: 12px;
    color: #6c757d;
}

.worksheet-selection {
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 15px;
    background: white;
}

.worksheet-selection h4 {
    margin: 0 0 10px 0;
    color: #495057;
}

.worksheet-list {
    max-height: 200px;
    overflow-y: auto;
    margin-bottom: 15px;
}

.worksheet-item {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    margin-bottom: 5px;
    background: #f8f9fa;
}

.worksheet-item input[type="checkbox"] {
    margin-right: 10px;
}

.worksheet-item.essential {
    border-color: #28a745;
    background: #d4edda;
}

.worksheet-info {
    flex-grow: 1;
}

.worksheet-name {
    font-weight: bold;
    color: #495057;
}

.worksheet-details {
    font-size: 12px;
    color: #6c757d;
}

.import-button {
    background: #28a745;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.2s;
}

.import-button:hover:not(:disabled) {
    background: #1e7e34;
}

.import-button:disabled {
    background: #6c757d;
    cursor: not-allowed;
}

/* --- Sortable Column Headers --- */
th.sortable {
    cursor: pointer;
    user-select: none;
    position: relative;
}

th.sortable:hover {
    background: #e6e6e6;
}

.sort-indicator {
    margin-left: 5px;
    font-size: 0.8em;
    color: #999;
}

th.sortable.sort-asc .sort-indicator:after {
    content: "▲";
    color: #007bff;
}

th.sortable.sort-desc .sort-indicator:after {
    content: "▼";
    color: #007bff;
}

/* --- Gantt Controls --- */
.gantt-controls {
    position: absolute;
    top: 2px;
    right: 10px;
    z-index: 10;
    background: rgba(255, 255, 255, 0.9);
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid #ddd;
    font-size: 12px;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    margin: 0;
    font-weight: normal;
}

.checkbox-label input[type="checkbox"] {
    margin: 0;
}


/* --- Compact Gantt Controls --- */
.gantt-controls-compact {
    position: absolute;
    top: 2px;
    right: 10px;
    z-index: 10;
    background: rgba(255, 255, 255, 0.85);
    padding: 2px 6px;
    border-radius: 3px;
    border: 1px solid #ddd;
    font-size: 10px;
}

.checkbox-label-compact {
    display: flex;
    align-items: center;
    gap: 3px;
    cursor: pointer;
    margin: 0;
    font-weight: normal;
    color: #666;
}

.checkbox-label-compact input[type="checkbox"] {
    margin: 0;
    scale: 0.8;
}

/* --- UNIFIED Timeline Design System --- */

/* Base Timeline Units - Modern Professional Design */
.timeline-unit {
    background: linear-gradient(to bottom, #ffffff 0%, #f8f9fa 100%);
    border-right: 1px solid #e1e5e9;
    font-size: 0.71em; /* Optimized typography */
    font-weight: 500;
    color: #495057;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    letter-spacing: 0.01em;
    position: relative;
}

.timeline-unit:hover {
    background: #f8f9fa;
}

/* Base Major Labels - Premium Styling */
.month-year-label {
    background: linear-gradient(to bottom, #fafbfc 0%, #f4f6f8 100%);
    color: #2c3e50;
    font-weight: 600;
    font-size: 0.72em; /* Refined typography */
    border-bottom: 1px solid #e1e5e9;
    border-right: 1px solid #e1e5e9;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    letter-spacing: 0.02em;
    text-shadow: 0 0.5px 1px rgba(255,255,255,0.8);
}

.month-year-label:hover {
    background: linear-gradient(to bottom, #f0f0f0, #e0e0e0);
}

/* Remove all zoom-specific styling - unified professional approach */
.timeline-unit.quarter-unit,
.timeline-unit.month-unit,
.timeline-unit.week-unit,
.timeline-unit.week-start-unit,
.timeline-unit.day-unit,
.timeline-unit.day-number-unit,
.timeline-unit.hour-unit {
    /* All inherit modern professional .timeline-unit styling */
    background: linear-gradient(to bottom, #ffffff 0%, #f8f9fa 100%);
    border-right: 1px solid #e1e5e9;
    font-size: 0.71em;
    font-weight: 500;
    color: #495057;
    letter-spacing: 0.01em;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hour units - subtle differentiation for readability */
.timeline-unit.hour-unit {
    font-size: 0.68em;
    opacity: 0.85;
    color: #6c757d;
}

/* All label variants inherit premium styling */
.month-year-label.year-label,
.month-year-label.quarter-label,
.month-year-label.week-label,
.month-year-label.week-month-label,
.month-year-label.day-label,
.month-year-label.day-week-label {
    background: linear-gradient(to bottom, #fafbfc 0%, #f4f6f8 100%);
    color: #2c3e50;
    font-weight: 600;
    font-size: 0.72em;
    border-bottom: 1px solid #e1e5e9;
    border-right: 1px solid #e1e5e9;
    letter-spacing: 0.02em;
    text-shadow: 0 0.5px 1px rgba(255,255,255,0.8);
}

/* Professional hover states that match grid headers */
.timeline-unit:hover {
    background: #f8f9fa;
}

.month-year-label:hover {
    background: linear-gradient(to bottom, #f0f0f0, #e0e0e0);
}

/* --- Activity Name Labels --- */
.activity-name-label {
    position: absolute;
    font-size: 11px;
    color: #333;
    white-space: nowrap;
    overflow: visible; /* Allow text to extend beyond bounds */
    text-overflow: clip; /* Remove ellipsis to show full text */
    pointer-events: none;
    background: transparent;
    padding: 0;
    border: none;
    z-index: 15; /* Above dependency arrows (z-index: 5) and task bars (z-index: 10) */
    transition: all 0.2s ease; /* Smooth transitions when repositioning */
}

/* Activity names placed inside task bars */
.activity-name-label.inside {
    color: #ffffff !important;
    font-weight: 500;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

/* Activity names placed above task bars */
.activity-name-label.above {
    background: rgba(255,255,255,0.95) !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    font-size: 10px !important;
    border: 1px solid #ddd !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    font-weight: 500;
}

/* Activity names positioned precisely at dependency line end */
.activity-name-label.precise-right {
    color: #333 !important;
    font-weight: 400;
    background: rgba(255,255,255,0.85) !important;
    padding: 1px 4px !important;
    border-radius: 2px !important;
    border: 1px solid rgba(200,200,200,0.8) !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}

/* Enhanced styling for WBS group/summary bar labels */
.summary-name-label {
    color: #2c3e50;  /* Slightly darker blue-gray for WBS groups */
    font-weight: 600; /* Bolder font weight */
    font-size: 12px;  /* Slightly larger font */
    max-width: 1250px; /* 5x more than 250px - allow very long WBS names */
    overflow: visible; /* Allow text to extend beyond bounds */
    text-overflow: clip; /* Remove ellipsis to show full text */
    z-index: 11; /* Ensure summary labels appear above regular task labels */
}

/* --- Virtual Scrolling --- */
.virtual-spacer,
.virtual-top-spacer,
.virtual-bottom-spacer {
    background: transparent;
    pointer-events: none;
    width: 100%;
}

/* Performance optimization for large datasets */
.gantt-container.large-dataset {
    contain: layout style paint;
}

.gantt-container.large-dataset .gantt-rows {
    contain: layout style paint;
}

.gantt-container {
    display: flex;
    flex: 1; /* Take remaining vertical space with proper flex */
    border: 1px solid #ccc;
    overflow: hidden; /* Important for layout */
    min-height: 0; /* Allow flex children to shrink properly */
    margin-left: 0; /* Default: no sidebar */
    transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ✅ Push content right when sidebar is pinned open */
.gantt-container.sidebar-open {
    margin-left: 250px;
}

/* --- Grid Section (Left) --- */
.grid-section {
    display: flex;
    flex-direction: column;
    overflow: visible; /* Allow horizontal scrollbar to be visible */
    position: relative; /* Needed for fill handle */
    flex-shrink: 0; /* Prevent shrinking beyond explicit width */
    flex-grow: 0; /* Prevent growing beyond explicit width */
    width: 640px; /* Initial default; overridden by autoPositionSplitter() */
    min-width: 200px; /* Prevent grid from becoming too small */
}

/* --- Grid Header Container: Scrollable but hidden scrollbar --- */
.grid-header-container {
    overflow-x: auto; /* 🔑 Scrollable to sync with grid-body */
    overflow-y: hidden;
    width: calc(100% - 17px); /* 🔧 FIXED: Account for grid-body vertical scrollbar to sync scroll range */
    flex-shrink: 0; /* Don't shrink header */
    position: relative;
    box-sizing: border-box;
}

/* Hide the header's horizontal scrollbar visually */
.grid-header-container::-webkit-scrollbar {
    width: 0px;
    height: 0px; /* 🔑 Hide horizontal scrollbar */
}

.grid-header-container {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}

/* --- Grid Body Container: Just a wrapper, grid-body handles scrolling --- */
.grid-body-container {
    flex: 1; /* Take remaining space */
    width: 100%;
    overflow: hidden; /* 🔑 REVERTED: grid-body handles both scrollbars */
    position: relative;
    box-sizing: border-box;
}

/* WebKit browsers: Style grid-body horizontal scrollbar */
.grid-body::-webkit-scrollbar {
    width: 17px; /* Standard vertical scrollbar width */
    height: 22px; /* Thick horizontal scrollbar - matches Gantt */
}

.grid-body::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 6px;
    border: 1px solid #e0e0e0;
}

.grid-body::-webkit-scrollbar-thumb {
    background: #888888; /* Grey color - matches Gantt */
    border-radius: 6px;
    border: 1px solid #f1f1f1;
    min-width: 30px; /* Ensure minimum horizontal thumb size */
    min-height: 30px; /* Ensure minimum vertical thumb size */
}

.grid-body::-webkit-scrollbar-thumb:hover {
    background: #666666; /* Darker grey on hover */
}

.grid-body::-webkit-scrollbar-corner {
    background: #f1f1f1; /* Corner where scrollbars meet */
}

/* Firefox: Style scrollbars */
.grid-body {
    scrollbar-width: auto; /* Show both scrollbars */
    scrollbar-color: #888888 #f1f1f1; /* Grey thumb, light track */
}

/* --- Splitter Styles --- */
.splitter {
    width: 6px;
    background-color: #ccc;
    cursor: col-resize;
    flex-shrink: 0;
    position: relative;
    z-index: 30;
    border-left: 1px solid #bbb;
    border-right: 1px solid #bbb;
    box-sizing: border-box;
}

/* --- Splitter Styles --- */
.splitter {
    width: 6px;
    background-color: #ccc;
    cursor: col-resize;
    flex-shrink: 0;
    position: relative;
    z-index: 30;
    border-left: 1px solid #bbb;
    border-right: 1px solid #bbb;
    box-sizing: border-box;
}

/* Style to prevent text selection during splitter drag */
body.resizing, body.resizing * {
    cursor: col-resize !important;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* --- Gantt Chart Section (Right) --- */
.gantt-section {
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Hide internal overflow - ORIGINAL WORKING CONFIG */
    flex: 1; /* FIXED: Use flex: 1 instead of flex-grow + height: 100% to prevent bottom gap */
    min-width: 200px; /* Prevent gantt from becoming too small */
    min-height: 0; /* CRITICAL: Allow flex item to shrink for scrollbar positioning */
}

/* --- Grid Header --- */
/* 🎯 CENTRALIZED: Uses CSS variable --header-height set by utils.js */
.grid-header {
    background-color: #f2f2f2;
    border-bottom: 1px solid #ccc;
    padding: 0;
    padding-right: 10px; /* 🔧 FIXED: Match grid-body padding for scroll sync alignment */
    font-weight: bold;
    flex-shrink: 0;
    width: fit-content; /* 🔑 Expand to table width for horizontal scroll */
    min-width: 100%; /* But at least fill container */
    min-height: var(--header-height, 41px); /* 🎯 Dynamic header height with fallback */
    height: var(--header-height, 41px); /* 🎯 Synced with Gantt timeline header */
    box-sizing: border-box;
    overflow-x: visible; /* FIXED: Allow sticky columns - container handles scroll */
    position: relative; /* 🔑 CRITICAL FIX: Create stacking context */
    z-index: 50; /* 🔑 CRITICAL FIX: Stay above scrolling grid body */
}

/* --- Grid Body --- */
.grid-body {
    overflow-y: auto; /* 🔑 Vertical scroll */
    overflow-x: auto; /* 🔑 Horizontal scroll */
    height: 100%; /* Fill body container */
    width: 100%; /* 🔑 FIXED: Constrained to container width = vertical scrollbar at edge */
    padding-right: 10px; /* Space for fill handle on last column */
    box-sizing: border-box;
    position: relative;
    z-index: 1;
    /* FIX 3 (PHASE 9): CSS containment to isolate layout calculations during scroll */
    contain: layout style;
}


/* --- Grid Table Common Styles --- */
.grid-table {
    width: max-content; /* Table expands to fit all columns naturally */
    border-collapse: separate; /* FIXED: Separate borders for consistent heights */
    border-spacing: 0; /* No gap between cells */
    table-layout: fixed; /* CRUCIAL for colgroup widths */
    min-width: fit-content; /* Ensure table doesn't shrink below column widths */
    font-size: 13px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    /* FORCE INTEGER PIXELS FOR ENTIRE TABLE */
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* FORCE INTEGER PIXELS FOR ALL TABLE ROWS */
/* 🎯 CENTRALIZED: Uses CSS variable --row-height set by script.js from utils.js ROW_HEIGHT */
.grid-table tr {
    transform: translateZ(0);
    backface-visibility: hidden;
    height: var(--row-height); /* Controlled by utils.js ROW_HEIGHT */
}

/* Virtual spacer rows: JS inline height drives sizing, CSS --row-height must not interfere */
.grid-table tr.virtual-top-spacer,
.grid-table tr.virtual-bottom-spacer {
    transform: none;
    backface-visibility: visible;
}
.grid-table tr.virtual-top-spacer td,
.grid-table tr.virtual-bottom-spacer td {
    overflow: visible;
    border: none;
    padding: 0;
}

/* --- Grid Column Widths (Defined on COL) --- */
/* No min-width constraints - allow user to resize to any width */
col.col-id { width: 50px; }
col.col-name { width: 200px; }
col.col-duration { width: 60px; }
col.col-start { width: 80px; }
col.col-finish { width: 80px; }
col.col-progress { width: 95px; } /* 🔧 Increased from 75px to fit "Percentage Complete" at larger fonts */
col.col-predecessors { width: 120px; }
col.col-successors { width: 120px; }
/* Notes column (Phase 5 GanttGrid Migration) */
col.col-notes { width: 200px; }

/* 🎯 Notes Column - Fixed row height mode (GanttGrid)
 * Allow multi-line content to overflow visibly beyond cell borders
 * Row heights are fixed to maintain alignment with Gantt chart
 * Content is visible on hover and during editing
 */
#grid-table-body td.col-notes {
    overflow: visible;
    white-space: nowrap;
    text-overflow: clip;
    position: relative;
    z-index: 1;
}

/* Notes content appears above adjacent cells on hover for readability */
#grid-table-body td.col-notes:hover {
    z-index: 10;
    background-color: #fffef7;
}

/* 🔑 CRITICAL FIX: Hide commonly-hidden columns by default to prevent flash on page load */
/* JavaScript will set display:'' for visible columns based on user's default column settings */
col.col-id,
th.col-id,
td.col-id,
col.col-predecessors,
th.col-predecessors,
td.col-predecessors,
col.col-successors,
th.col-successors,
td.col-successors {
    display: none;
}

/* --- Grid Table Header Cells (TH) --- */
/* 🎯 CENTRALIZED: Uses CSS variable --header-height set by utils.js */
.grid-table th {
    background: linear-gradient(to bottom, #f8f8f8, #e8e8e8);
    position: sticky; /* Stick to top of grid-header */
    top: 0;
    z-index: 10; /* Above table body content */
    height: var(--header-height, 41px); /* 🎯 Dynamic header height with fallback */
    min-height: var(--header-height, 41px); /* 🎯 Ensure minimum height */
    vertical-align: middle; /* 🔧 FIXED: Center text vertically */
    padding: 4px 4px; /* Vertical + horizontal padding for text spacing */
    text-align: center; /* 🔧 FIXED: Center text horizontally */
    font-weight: 500;
    color: #333;
    font-size: 12px; /* 🔧 FIXED: Base font size in px - will be overridden by toolbar */
    white-space: normal; /* 🔧 CHANGED: Allow text wrapping for multi-line headers */
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
    border-right: 1px solid #d0d0d0;
    border-bottom: 1px solid #d0d0d0;
    border-top: none;
    border-left: none;
    position: relative; /* For resize handle positioning */
    /* 🔧 FIX: Prevent text selection in headers */
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    line-height: 1.2; /* 🔧 Better line height for wrapped text */
}
.grid-table th:first-child { border-left: none; }

/* --- Filter Row Cells (compact height) --- */
/* Override the 41px height for filter row cells */
.grid-table .filter-row th {
    height: 28px !important; /* Compact filter row */
    min-height: 28px !important;
    max-height: 28px !important;
    padding: 2px 4px !important;
    vertical-align: middle !important;
    background: #f8f9fa !important;
    border-bottom: 1px solid #ddd !important;
}

/* Filter input styling */
.grid-table .filter-row .column-filter {
    width: 100%;
    padding: 3px 22px 3px 4px; /* Right padding for icon */
    border: 1px solid #ddd;
    border-radius: 3px;
    font-size: 11px;
    box-sizing: border-box;
    height: 22px;
}

.grid-table .filter-row .filter-cell-wrapper {
    display: flex;
    align-items: center;
    width: 100%;
    position: relative;
    height: 100%;
}

/* --- Grid Table Data Cells (TD) --- */
/* 🎯 CENTRALIZED: Uses CSS variable --row-height-content set by script.js */
.grid-table td {
    border-right: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
    border-top: none;
    border-left: none;
    padding: 0;
    height: var(--row-height-content); /* Controlled by utils.js ROW_HEIGHT - 1 */
    /* FORCE INTEGER PIXELS - Eliminate fractional rendering */
    transform: translateZ(0);
    will-change: transform;
    box-sizing: border-box;
    backface-visibility: hidden; /* Force GPU layer */
    /* ❌ REMOVED: image-rendering: pixelated; - This caused text to appear bolder after DOM recreation */
    /* FIX: image-rendering is meant for images, not text. When combined with GPU acceleration
       properties and DOM recreation via innerHTML, it causes font-weight to appear different.
       Remove this property to maintain consistent text rendering during collapse/expand operations. */
    text-align: left;
    font-size: 0.85em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    position: relative;
    background: white;
    /* ✅ ADD: Explicit font smoothing to maintain consistent text rendering */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* 🔧 FIX: Prevent text selection - select cells instead (like Excel/ExcelGridBase) */
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.grid-table td:hover {
    background-color: #f5f5f5;
}

/* REMOVED: First row border-top to ensure consistent 31.0px height for all rows 
.grid-table tr:first-child td {
    border-top: 1px solid #e0e0e0;
}
*/
.grid-table td:first-child { border-left: none; }

/* Left align Task Name column (has hierarchy indentation) */
.grid-table th.col-name,
.grid-table td.col-name {
    text-align: left;
}

/* Center align specific columns */
.grid-table th.col-duration,
.grid-table td.col-duration,
.grid-table th.col-start,
.grid-table td.col-start,
.grid-table th.col-finish,
.grid-table td.col-finish,
.grid-table th.col-progress,
.grid-table td.col-progress {
    text-align: center;
}

/* Enable text wrapping for progress column header */
/* 🔧 FIX: Removed hardcoded font-size: 10px - now inherits from table/toolbar
   Header height is controlled by --header-height CSS variable */
.grid-table th.col-progress {
    white-space: pre-line !important; /* Allow text wrapping and respect line breaks */
    overflow: hidden; /* Keep within bounds - header height handles expansion */
    text-overflow: clip !important; /* No ellipsis - text wraps instead */
    word-wrap: break-word; /* Break long words if needed */
    word-break: break-word; /* Force break on long words */
    line-height: 1.2; /* Slightly more spacing for readability */
    padding: 4px 2px; /* Vertical + horizontal padding */
    /* font-size: inherit from th or toolbar - no override */
    /* height: inherit from --header-height CSS variable - no override */
    vertical-align: middle;
    text-align: center;
}

/* Column-specific cell content alignment */
.number-cell .cell-content {
    justify-content: flex-end;
    padding-right: 6px;
}

.number-cell .cell-input {
    text-align: right;
}

.date-cell .cell-content {
    justify-content: center;
}

.date-cell .cell-input {
    text-align: center;
}

/* --- WBS/Hierarchy Styles --- */
.gantt-toggle-icon {
    display: inline-block;
    width: 1em;
    margin-right: 5px;
    cursor: pointer;
    text-align: center;
    font-family: monospace;
    color: #333;
    flex-shrink: 0; /* Prevent icon from shrinking */
    /* 🎯 CENTRALIZED: Uses CSS variable --row-height-content */
    line-height: var(--row-height-content) !important;
    height: var(--row-height-content) !important;
    max-height: var(--row-height-content) !important;
    overflow: hidden !important;
    vertical-align: top !important;
}
.gantt-toggle-icon:hover { color: #000; }

/* Project Row Styling in Grid */
/* 🎯 CENTRALIZED: Uses CSS variable --row-height-content */
.project-row {
    font-weight: 600;
    background-color: #f8f8f8;
    height: var(--row-height-content) !important;
    max-height: var(--row-height-content) !important;
    min-height: var(--row-height-content) !important;
    line-height: var(--row-height-content) !important;
    overflow: hidden !important;
}

.project-row td {
    background-color: #f8f8f8;
    height: 22px !important; /* Inner cell - intentionally smaller */
    max-height: var(--row-height-content) !important;
    min-height: var(--row-height-content) !important;
    line-height: var(--row-height-content) !important;
    overflow: hidden !important;
}

.project-row:hover td {
    background-color: #f0f0f0;
}

.grid-table tbody tr[data-task-type="project"] {
    font-weight: 600;
    background-color: #f8f8f8;  /* Default fallback */
}
.grid-table tbody tr[data-task-type="project"] td {
    cursor: default;
    background-color: #f8f8f8;  /* Default fallback */
    height: var(--row-height-content); /* 🎯 CENTRALIZED: Uses CSS variable */
}

/* WBS Hierarchical Colors - Ocean Teal Palette (Grid Rows) */
/* Level-based color coding for easy hierarchy identification */
.grid-table tbody tr[data-task-type="project"][data-level="0"] {
    background-color: #22577A !important;  /* Deep Ocean Blue - Root WBS Groups */
    color: white;
}
.grid-table tbody tr[data-task-type="project"][data-level="0"] td {
    background-color: #22577A !important;
    color: white;
}

.grid-table tbody tr[data-task-type="project"][data-level="1"] {
    background-color: #38A3A5 !important;  /* Teal - Major Sub-Groups */
    color: white;
}
.grid-table tbody tr[data-task-type="project"][data-level="1"] td {
    background-color: #38A3A5 !important;
    color: white;
}

.grid-table tbody tr[data-task-type="project"][data-level="2"] {
    background-color: #57CC99 !important;  /* Sea Green - Detail Groups */
    color: white;
}
.grid-table tbody tr[data-task-type="project"][data-level="2"] td {
    background-color: #57CC99 !important;
    color: white;
}

.grid-table tbody tr[data-task-type="project"][data-level="3"] {
    background-color: #80ED99 !important;  /* Light Green - Minor Groups */
    color: #1a1a1a;  /* Darker text for readability */
}
.grid-table tbody tr[data-task-type="project"][data-level="3"] td {
    background-color: #80ED99 !important;
    color: #1a1a1a;
}

.grid-table tbody tr[data-task-type="project"][data-level="4"] {
    background-color: #C7F9CC !important;  /* Mint - Lowest Level Groups */
    color: #1a1a1a;  /* Darker text for readability */
}
.grid-table tbody tr[data-task-type="project"][data-level="4"] td {
    background-color: #C7F9CC !important;
    color: #1a1a1a;
}

/* Hover states for hierarchical grid rows */
.grid-table tbody tr[data-task-type="project"][data-level="0"]:hover td {
    background-color: #2a6a95 !important;
}

.grid-table tbody tr[data-task-type="project"][data-level="1"]:hover td {
    background-color: #42bcc0 !important;
}

.grid-table tbody tr[data-task-type="project"][data-level="2"]:hover td {
    background-color: #65e0b0 !important;
}

.grid-table tbody tr[data-task-type="project"][data-level="3"]:hover td {
    background-color: #95ffad !important;
}

.grid-table tbody tr[data-task-type="project"][data-level="4"]:hover td {
    background-color: #d9ffe0 !important;
}

/* Activity Code columns in project rows - removed conflicting heights */
.grid-table tbody tr[data-task-type="project"] td[class^="col-"]:not(.col-id):not(.col-name):not(.col-duration):not(.col-start):not(.col-finish):not(.col-progress):not(.col-predecessors):not(.col-successors) {
    /* Height inherited from general td rule: 30px */
}

/* FIXED: Consistent height for all row types - no special project row heights */
/* All rows inherit 30px height from .grid-table td rule */

.grid-table tbody tr[data-task-type="project"]:hover td {
    background-color: #f0f0f0;
}

/* ULTRA-SPECIFIC FIX: Force normal height for P6 collapsed project rows */
/* 🎯 CENTRALIZED: Uses CSS variable --row-height-content */
.grid-table tbody tr[data-task-type="project"] {
    line-height: var(--row-height-content) !important;
    display: table-row !important;
}

.grid-table tbody tr[data-task-type="project"] * {
    line-height: var(--row-height-content) !important;
}

/* P6 Activity Code columns - height inherited from general rules */
.grid-table tbody tr[data-task-type="project"] td[class*="col-floors"],
.grid-table tbody tr[data-task-type="project"] td[class*="col-area"],
.grid-table tbody tr[data-task-type="project"] td[data-field*="FLOORS"],
.grid-table tbody tr[data-task-type="project"] td[data-field*="floors"] {
    /* Height inherited from .grid-table td: 30px */
    vertical-align: top;
}

/* ✅ SUB-WBS GROUP STYLING - Heights inherited from general td rule */
.grid-table tbody tr[data-task-type="summary"],
.grid-table tbody tr[data-task-type="group"],
.grid-table tbody tr[data-task-type="wbs"],
.grid-table tbody tr[data-task-type="phase"],
.grid-table tbody tr.expandable,
.grid-table tbody tr.has-children,
.grid-table tbody tr.group-row,
.grid-table tbody tr.summary-row,
.grid-table tbody tr.parent-row {
    font-weight: 600;
    background-color: #f8f8f8;
}

.grid-table tbody tr[data-task-type="summary"] td,
.grid-table tbody tr[data-task-type="group"] td,
.grid-table tbody tr[data-task-type="wbs"] td,
.grid-table tbody tr[data-task-type="phase"] td,
.grid-table tbody tr.expandable td,
.grid-table tbody tr.has-children td,
.grid-table tbody tr.group-row td,
.grid-table tbody tr.summary-row td,
.grid-table tbody tr.parent-row td {
    background-color: #f8f8f8;
    /* Height inherited from .grid-table td: 30px */
}

/* Removed duplicate padding rules - all inherited from general rules */

/* Ensure name text doesn't overflow when icon is present */
.grid-table td.col-name {
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Icon and text container for proper alignment */
.grid-table td.col-name .name-content {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
}

.grid-table td.col-name .name-content > span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-grow: 1;
}


/* --- Column Resize Handle Styles --- */
.resize-handle {
    position: absolute;
    top: 0;
    right: -2px; /* Position over the border */
    bottom: 0;
    width: 4px; /* Smaller clickable area */
    cursor: col-resize;
    z-index: 15;
    background-color: transparent;
}
.resize-handle:hover {
    background-color: rgba(0, 122, 204, 0.3); /* Simple hover effect */
}

/* --- Cell Content Structure --- */
/* 🎯 CENTRALIZED: Uses CSS variable --row-height-content */
.cell-content {
    padding: 0;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    min-height: var(--row-height-content);
    cursor: cell;
}

/* --- Cell Editing --- */
.cell-input {
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: inherit;
    padding: 0;
    box-sizing: border-box;
    margin: 0;
}

.cell-input:focus {
    background: white;
}

.grid-table td input[type="number"] {
    text-align: right;
    -moz-appearance: textfield;
}
.grid-table td input[type="number"]::-webkit-outer-spin-button,
.grid-table td input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* --- Cell Selection & Fill Handle --- */
.grid-table td.selected {
    background-color: #e6f3ff;
    outline: 2px solid #4a90e2;
    outline-offset: -2px;
    /* 🔧 FIX: Removed z-index: 10 - was causing visual "pop-up" effect
       Outline doesn't affect layout, so z-index isn't needed for selection visual */
}

.grid-table td.editing {
    background-color: white;
    outline: 2px solid #4a90e2;
    outline-offset: -2px;
    z-index: 10;
}

/* 🔧 FIX: Use outline instead of border for range-selected to prevent cell height expansion
   The original 'border: 1px solid' added top/left borders that weren't there before,
   causing visual expansion. Outline doesn't affect layout. */
/* 🎨 COLOR: Matches single cell selection (#e6f3ff light blue, #4a90e2 outline) */
.grid-table td.range-selected {
    background-color: #e6f3ff;
    outline: 1px solid #4a90e2;
    outline-offset: -1px;
}

.grid-table td.selected.range-selected {
    outline: 2px solid #4a90e2;
    outline-offset: -2px;
    background-color: #e6f3ff;
    /* Removed border - outline is sufficient and doesn't affect layout */
}

/* 🔧 FIX: Use outline instead of border for fill-preview to prevent cell height expansion */
.grid-table td.fill-preview {
    background-color: #fff3cd;
    outline: 1px solid #ffc107;
    outline-offset: -1px;
}

#fill-handle {
    position: absolute;
    width: 8px;
    height: 8px;
    background-color: #3498db;
    border: 1px solid white;
    cursor: crosshair;
    z-index: 25; /* Above selected cell */
    display: none; /* Hidden by default */
}
.fill-dragging-overlay {
    position: absolute;
    border: 2px dashed #4a90e2;
    background-color: transparent;
    pointer-events: none;
    z-index: 20; /* Below fill handle */
    display: none;
    box-sizing: border-box;
}

/* --- Modern Professional Timeline Header --- */
/* 🎯 CENTRALIZED: Uses CSS variable --header-height set by utils.js */
.timeline-header {
    background: linear-gradient(to bottom, #fdfdfd 0%, #f6f7f8 50%, #eef1f3 100%);
    border-bottom: 1px solid #d4d8dd;
    font-weight: 500;
    white-space: nowrap;
    overflow-x: auto; /* Allow horizontal scrolling for sync */
    overflow-y: hidden; /* Hide vertical scrollbar */
    flex-shrink: 0;
    position: relative; /* For weekend shading positioning */
    z-index: 5; /* Above gantt body content */
    height: var(--header-height, 41px); /* 🎯 Synced with Grid header via CSS variable */
    box-sizing: border-box;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

/* Hide scrollbar in timeline header while keeping scroll functionality */
.timeline-header::-webkit-scrollbar {
    display: none;
}
.timeline-header {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* Timeline content wrapper for proper scrolling */
.timeline-content-wrapper {
    position: relative;
    height: 100%;
    min-width: 100%;
}

/* Top Header Row - Professional Styling */
#timeline-month-year {
    position: relative;
    height: 18px; /* Optimized height for readability */
    border-bottom: 1px solid #e1e5e9;
    box-sizing: border-box;
    overflow: hidden;
    background: linear-gradient(to bottom, #fafbfc 0%, #f4f6f8 100%);
}

.month-year-label {
    position: absolute;
    bottom: 0;
    padding: 1px 6px;
    font-size: 0.72em; /* Refined typography */
    font-weight: 600;
    letter-spacing: 0.02em;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-right: 1px solid #e1e5e9;
    box-sizing: border-box;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2c3e50;
    text-shadow: 0 0.5px 1px rgba(255,255,255,0.8);
    transition: all 0.15s ease;
}
/* Removed: .month-year-label:first-child { border-right: none; } - caused missing border between first and second major units in top row */

/* Modern hover effects for timeline headers */
.month-year-label:hover {
    background: linear-gradient(to bottom, #f0f3f6 0%, #e8eef3 100%);
    color: #1a252f;
    transform: translateY(-0.5px);
    box-shadow: inset 0 1px 2px rgba(255,255,255,0.8);
}

.timeline-unit:hover {
    background: linear-gradient(to bottom, #f2f5f8 0%, #e6ecf1 100%);
    color: #2c3e50;
    transform: translateY(-0.5px);
    box-shadow: inset 0 1px 2px rgba(255,255,255,0.7);
}

/* Weekend highlighting in timeline header */
.timeline-unit.weekend {
    background: linear-gradient(to bottom, #f9f2f4 0%, #f0e6ea 100%);
    color: #6b5b73;
}

.timeline-unit.weekend:hover {
    background: linear-gradient(to bottom, #f5eaf0 0%, #eadde5 100%);
    color: #5a4a5f;
}

/* Current day highlighting */
.timeline-unit.today {
    background: linear-gradient(to bottom, #e3f2fd 0%, #bbdefb 100%);
    color: #0d47a1;
    font-weight: 600;
    box-shadow: inset 0 0 3px rgba(13,71,161,0.3);
}

.month-year-label.current-period {
    background: linear-gradient(to bottom, #e8f5e8 0%, #c8e6c9 100%);
    color: #1b5e20;
    font-weight: 700;
}

/* Bottom Header Row - Refined Design */
.timeline-scale {
    display: flex;
    position: relative;
    height: 22px; /* Optimized for balance */
    background: linear-gradient(to bottom, #f8f9fa 0%, #eceff2 100%);
}
.timeline-unit {
    flex-shrink: 0;
    text-align: center;
    border-right: 1px solid #e1e5e9;
    font-size: 0.71em; /* Refined typography */
    font-weight: 500;
    letter-spacing: 0.01em;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #495057;
    transition: all 0.15s ease;
    position: relative;
}
/* Removed: .timeline-unit:first-child { border-right: none; } - caused missing border between first and second units */

/* Professional typography for timeline units */
.timeline-unit.day-number {
    font-variant-numeric: tabular-nums; /* Monospace numbers for alignment */
}

.timeline-unit.week-start {
    border-left: 2px solid #007bff;
    font-weight: 600;
    color: #0056b3;
}

/* Enhanced borders for visual separation */
.timeline-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(to right, transparent 0%, #adb5bd 50%, transparent 100%);
    opacity: 0.6;
}

/* Subtle animation for interactive elements */
@keyframes timelineGlow {
    0% { box-shadow: inset 0 1px 2px rgba(255,255,255,0.7); }
    50% { box-shadow: inset 0 1px 4px rgba(255,255,255,0.9); }
    100% { box-shadow: inset 0 1px 2px rgba(255,255,255,0.7); }
}

.timeline-unit:active,
.month-year-label:active {
    animation: timelineGlow 0.3s ease;
    transform: translateY(0.5px);
}

/* Weekend Shading in Header */
#weekend-shading-header {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: -1; /* Behind text */
    pointer-events: none;
}

/* --- Gantt Body Container - CONSOLIDATED RULES --- */
/* 🚨 CRITICAL: DO NOT MODIFY WITHOUT UNDERSTANDING CHROME SCROLLBAR POSITIONING 🚨
 * This CSS rule works in conjunction with fixChromeScrollbarPositioning() JavaScript function
 * to ensure horizontal scrollbar appears at the absolute bottom of the Gantt chart in all browsers.
 * 
 * WHY THIS IS NECESSARY:
 * - Chrome has different flexbox height calculations than Edge/Firefox
 * - Without these exact settings, Chrome shows gaps below the horizontal scrollbar
 * - Edge works perfectly with CSS alone, Chrome requires JavaScript assistance
 * - Previous versions had 4 conflicting rules that caused inconsistent behavior
 * 
 * KEY REQUIREMENTS FOR CHROME HORIZONTAL SCROLLBAR ALIGNMENT:
 * 1. box-sizing: border-box - Predictable height calculations
 * 2. padding: 0; margin: 0 - No interference with scrollbar positioning  
 * 3. min-height: 0 - Allow flexbox to shrink the container as needed
 * 4. flex-grow: 1 - Take remaining space, but JavaScript will override with exact flexBasis
 * 5. scrollbar-gutter: stable - Reserve consistent space for scrollbars
 * 
 * DO NOT ADD: padding-right/margin-right hacks, explicit height constraints, or content-box
 */
.gantt-body-container {
    /* Layout Properties - Required for Chrome scrollbar positioning */
    flex-grow: 1; /* Take remaining vertical space - overridden by JavaScript in Chrome */
    position: relative; /* For absolute positioning of rows/bars */
    min-height: 0; /* CRITICAL: Allow flex item to shrink below content size */
    /* max-height: 100%; - REMOVED: Was cutting off scrollbar */

    /* Scrolling Properties - Essential for horizontal scrollbar appearance */
    overflow-x: scroll !important; /* Always show horizontal scrollbar */
    overflow-y: hidden; /* Hide vertical scrollbar - grid handles vertical scrolling */

    /* Box Model - CRITICAL for Chrome scrollbar alignment */
    box-sizing: border-box; /* REQUIRED: Predictable height calculations */
    padding: 0; /* REQUIRED: No padding interference with scrollbar */
    margin: 0; /* REQUIRED: No margin interference with scrollbar */

    /* Scrollbar Space Management - Prevents layout shift */
    scrollbar-gutter: stable; /* Reserve consistent scrollbar space */

    /* Firefox Scrollbar Styling - Cross-browser consistency */
    scrollbar-width: auto; /* Show scrollbars in Firefox */
    scrollbar-color: #888888 #f1f1f1; /* Grey thumb, light track to match Chrome */

    /* FIX 3 (PHASE 9): CSS containment to isolate layout calculations during scroll */
    contain: layout style;
}

/* WebKit browsers: Show thick horizontal, hide vertical */
.gantt-body-container::-webkit-scrollbar {
    width: 0px; /* Hide vertical scrollbar */
    height: 22px; /* Thick horizontal scrollbar */
}

.gantt-body-container::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 6px;
    border: 1px solid #e0e0e0;
}

.gantt-body-container::-webkit-scrollbar-thumb {
    background: #888888; /* Grey color as requested */
    border-radius: 6px;
    border: 1px solid #f1f1f1;
    min-width: 30px; /* Ensure minimum thumb size */
}

.gantt-body-container::-webkit-scrollbar-thumb:hover {
    background: #666666; /* Darker grey on hover */
}

.gantt-body-container::-webkit-scrollbar-corner {
    background: #f1f1f1;
}

/* NOTE: Firefox scrollbar styling already included in consolidated rule above */
.gantt-rows {
    position: relative; /* Container for all rows/bars/shading - ORIGINAL CONFIG */
    height: auto; /* Allow height to grow dynamically based on content - ORIGINAL CONFIG */
    min-height: 100%; /* Ensure it's at least as tall as container - ORIGINAL CONFIG */
    width: auto; /* FIXED: Allow JS to set explicit width for horizontal scrolling */
    min-width: 100%; /* Ensure minimum width fills container */
    /* FIX 3 (PHASE 9): CSS containment to isolate layout calculations */
    contain: layout style;
}

/* Ensure task bars appear above grid overlay */
.gantt-rows .task-bar,
.gantt-rows .milestone,
.gantt-rows .project-bar,
.gantt-rows .baseline-bar,
.gantt-rows .activity-name-label {
    z-index: 1;
    position: relative;
}

/* Dependency lines above task bars */
#highperf-dependency-overlay {
    z-index: 10 !important;
}

/* ========================================
   PHASE 7: Repeating Tile Grid Overlay
   Timeline grid lines using CSS background tiling
   ======================================== */

/* Container for the tile overlay - ensures it's behind task bars */
[id^="rto-"][id$="-element"] {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 0;
}

/* Ensure task elements appear above the grid overlay */
.gantt-rows .task-bar,
.gantt-rows .milestone,
.gantt-rows .project-bar,
.gantt-rows .baseline-bar,
.gantt-rows .activity-name-label {
    z-index: 1;
    position: relative;
}

/* Dependency SVG overlay above task bars */
.gantt-rows #highperf-dependency-overlay {
    z-index: 2;
}

/* Weekend Shading in Body (inside #weekend-shading-body) */
.weekend-shade {
    position: absolute;
    top: 0; bottom: 0; /* Span full height */
    height: 100%; /* Ensure full height coverage */
    background-color: rgba(180, 180, 180, 0.2);
}

/* Task Bars - Modern Design */
.task-bar {
    position: absolute;
    height: 16px; /* Slightly thinner for modern look */
    background: linear-gradient(135deg, #27AE60 0%, #229954 100%); /* GREEN = Remaining work */
    border: none; /* Remove border for cleaner look */
    border-radius: 8px; /* More rounded corners */
    font-size: 0.7em;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    padding-left: 8px;
    padding-right: 4px;
    box-sizing: border-box;
    cursor: grab;
    z-index: 1;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    /* FIX 3 (PHASE 9): Limit transition to hover-specific properties only
       'transition: all' was forcing browser to check all properties on scroll */
    transition: box-shadow 0.2s ease, background 0.2s ease;
    font-weight: 500;
    /* FIX 3 (PHASE 9): Hint GPU compositor for better scroll performance */
    will-change: transform;
    contain: layout style;
}

.task-bar:hover {
    transform: translateY(-1px); /* Slight lift on hover */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    background: linear-gradient(135deg, #2ECC71 0%, #27AE60 100%); /* Lighter green on hover */
}

.task-bar .progress {
    position: absolute;
    left: 0; 
    top: 0;
    height: 100%;
    background: linear-gradient(135deg, #4A90E2 0%, #357ABD 100%); /* BLUE = Completed work */
    border-radius: 8px 0 0 8px; /* Match parent border radius */
    z-index: 1; /* Put progress (blue) on top of task bar (green) */
    transition: width 0.3s ease;
}

/* Progress indicator stripe effect for visual appeal */
.task-bar .progress::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: repeating-linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.1) 0px,
        rgba(255, 255, 255, 0.1) 2px,
        transparent 2px,
        transparent 6px
    );
    border-radius: 8px 0 0 8px;
}

/* Project Summary Bars - Sleek Design */
.project-bar {
    background: linear-gradient(135deg, #B0B0B0 0%, #909090 100%); /* Soft grey gradient */
    border: none;
    height: 8px !important; /* Thinner, sleeker design */
    border-radius: 2px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow: visible !important;
    cursor: default;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    transition: all 0.2s ease;
    position: absolute;
}

.project-bar:hover {
    background: linear-gradient(135deg, #C0C0C0 0%, #A0A0A0 100%);
    transform: translateY(-0.5px);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}

/* Sleek project bar start/end indicators */
.summary-bracket-start,
.summary-bracket-end {
    position: absolute;
    top: -2px;
    width: 2px;
    height: 12px;
    background: linear-gradient(135deg, #808080 0%, #606060 100%);
    border-radius: 1px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
.summary-bracket-start { 
    left: -1px; 
}
.summary-bracket-end {
    right: -1px;
}

/* Milestones - Modern Design */
.milestone {
    position: absolute;
    width: 14px;
    height: 14px;
    background: linear-gradient(135deg, #E74C3C 0%, #C0392B 100%);
    border: none;
    transform: rotate(45deg);
    transform-origin: center center;
    z-index: 2;
    cursor: pointer;
    box-sizing: border-box;
    border-radius: 2px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease;
}

.milestone:hover {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    background: linear-gradient(135deg, #EC7063 0%, #E74C3C 100%);
}

/* Add a subtle inner glow to milestones */
.milestone::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 1px;
}

/* --- Task Dependency Links --- */
.dependency-links-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Allow clicks to pass through to task bars */
    z-index: 10; /* Above task bars but below tooltips */
    /* CRITICAL FIX: Ensure dependencies move with virtual scrolling */
    transform-origin: top left;
    will-change: transform;
}

.dependency-link {
    stroke: #666;
    stroke-width: 2;
    fill: none;
    marker-end: url(#arrowhead);
}

.dependency-link.critical-path {
    stroke: #E74C3C;
    stroke-width: 3;
}

.dependency-link:hover {
    stroke: #333;
    stroke-width: 3;
}

/* Link type specific styling */
.dependency-link.fs { stroke-dasharray: none; }
.dependency-link.ss { stroke-dasharray: 5,5; }
.dependency-link.ff { stroke-dasharray: 10,5; }
.dependency-link.sf { stroke-dasharray: 3,3; }

/* --- NEW DEPENDENCY LINK STYLES (FROM TEST FILE) --- */
#dependency-links-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Allows clicks to pass through to task bars */
    z-index: 5; /* Behind task bars (which are z-index: 10+) */
    overflow: visible;
    /* CRITICAL FIX: Ensure dependencies move with virtual scrolling */
    transform-origin: top left;
    will-change: transform;
}

/* highperf dependency overlay specific styles */
#highperf-dependency-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
    overflow: visible;
    /* CRITICAL FIX: Ensure dependencies move with virtual scrolling */
    transform-origin: top left;
    will-change: transform;
}

.dependency-path {
    stroke-width: 1; /* Ultra-thin modern lines */
    fill: none;
    transition: all .3s ease;
    pointer-events: stroke;
    cursor: pointer;
    opacity: 0.7; /* Semi-transparent for cleaner look */
}

.dependency-path:hover {
    stroke-width: 1.5; /* Subtle hover effect */
    opacity: 1; /* Full opacity on hover */
    filter: drop-shadow(0 0 2px rgba(0,0,0,0.2)); /* Subtle glow */
}

/* Dependency Highlighting Styles */
.dependency-highlighted {
    transition: all 0.2s ease !important;
    cursor: pointer !important;
}

/* Outgoing dependencies (from selected task to successors) - Darker Purple */
.dependency-from-selected {
    stroke: #7c3aed !important;  /* Darker purple for successors */
    stroke-width: 2.5 !important;
    opacity: 0.9 !important;
    filter: drop-shadow(0 0 3px rgba(124, 58, 237, 0.5));
}

/* Incoming dependencies (to selected task from predecessors) - Vibrant Green */
.dependency-to-selected {
    stroke: #22c55e !important;  /* Green for predecessors */
    stroke-width: 2 !important;
    opacity: 0.8 !important;
    filter: drop-shadow(0 0 3px rgba(16, 185, 129, 0.5));
}

/* ============================================ */
/* Full Row Highlighting System                 */
/* ============================================ */

/* Highlight overlays for Gantt rows */
.row-highlight-overlay {
    position: absolute;
    left: 0;
    width: 100%;
    pointer-events: none;
    transition: background-color 0.3s ease;
    z-index: 1; /* Below task bars (z-index: 2) */
}

/* Selected task row - Soft blue background */
.row-highlight-selected {
    background-color: rgba(59, 130, 246, 0.15); /* Soft blue with 15% opacity */
    border-top: 1px solid rgba(59, 130, 246, 0.3);
    border-bottom: 1px solid rgba(59, 130, 246, 0.3);
}

/* Predecessor task rows - Soft green background */
.row-highlight-predecessor {
    background-color: rgba(34, 197, 94, 0.12); /* Soft green with 12% opacity */
    border-top: 1px solid rgba(34, 197, 94, 0.2);
    border-bottom: 1px solid rgba(34, 197, 94, 0.2);
}

/* Successor task rows - Soft purple background */
.row-highlight-successor {
    background-color: rgba(168, 85, 247, 0.12); /* Soft purple with 12% opacity */
    border-top: 1px solid rgba(168, 85, 247, 0.2);
    border-bottom: 1px solid rgba(168, 85, 247, 0.2);
}

/* Grid section row highlighting - MAXIMUM SPECIFICITY */
#grid-body .grid-table tbody tr.row-selected,
#grid-table-body tbody tr.row-selected,
.grid-body .grid-table tbody tr.row-selected,
.grid-table tbody tr.row-selected,
.grid-table tbody tr.row-selected[data-task-type],
.grid-table tbody tr.row-selected[data-task-type="project"],
.grid-table tbody tr.row-selected[data-task-type="summary"],
.grid-table tbody tr.row-selected.expandable {
    background: rgba(59, 130, 246, 0.25) !important;
    background-color: rgba(59, 130, 246, 0.25) !important;
    position: relative !important;
    box-shadow: inset 0 2px 0 rgba(59, 130, 246, 0.5),
                inset 0 -2px 0 rgba(59, 130, 246, 0.5) !important;
}

#grid-body .grid-table tbody tr.row-selected td,
#grid-table-body tbody tr.row-selected td,
.grid-table tbody tr.row-selected td,
.grid-table tbody tr.row-selected[data-task-type] td,
.grid-table tbody tr.row-selected[data-task-type="project"] td,
.grid-table tbody tr.row-selected[data-task-type="summary"] td {
    background: transparent !important;
    background-color: transparent !important;
}

/* Predecessor highlighting - MAXIMUM SPECIFICITY */
#grid-body .grid-table tbody tr.row-predecessor,
#grid-table-body tbody tr.row-predecessor,
.grid-body .grid-table tbody tr.row-predecessor,
.grid-table tbody tr.row-predecessor,
.grid-table tbody tr.row-predecessor[data-task-type],
.grid-table tbody tr.row-predecessor[data-task-type="project"],
.grid-table tbody tr.row-predecessor[data-task-type="summary"],
.grid-table tbody tr.row-predecessor.expandable {
    background: rgba(34, 197, 94, 0.20) !important;
    background-color: rgba(34, 197, 94, 0.20) !important;
    position: relative !important;
    box-shadow: inset 0 2px 0 rgba(34, 197, 94, 0.4),
                inset 0 -2px 0 rgba(34, 197, 94, 0.4) !important;
}

#grid-body .grid-table tbody tr.row-predecessor td,
#grid-table-body tbody tr.row-predecessor td,
.grid-table tbody tr.row-predecessor td,
.grid-table tbody tr.row-predecessor[data-task-type] td,
.grid-table tbody tr.row-predecessor[data-task-type="project"] td,
.grid-table tbody tr.row-predecessor[data-task-type="summary"] td {
    background: transparent !important;
    background-color: transparent !important;
}

/* Successor highlighting - MAXIMUM SPECIFICITY */
#grid-body .grid-table tbody tr.row-successor,
#grid-table-body tbody tr.row-successor,
.grid-body .grid-table tbody tr.row-successor,
.grid-table tbody tr.row-successor,
.grid-table tbody tr.row-successor[data-task-type],
.grid-table tbody tr.row-successor[data-task-type="project"],
.grid-table tbody tr.row-successor[data-task-type="summary"],
.grid-table tbody tr.row-successor.expandable {
    background: rgba(168, 85, 247, 0.20) !important;
    background-color: rgba(168, 85, 247, 0.20) !important;
    position: relative !important;
    box-shadow: inset 0 2px 0 rgba(168, 85, 247, 0.4),
                inset 0 -2px 0 rgba(168, 85, 247, 0.4) !important;
}

#grid-body .grid-table tbody tr.row-successor td,
#grid-table-body tbody tr.row-successor td,
.grid-table tbody tr.row-successor td,
.grid-table tbody tr.row-successor[data-task-type] td,
.grid-table tbody tr.row-successor[data-task-type="project"] td,
.grid-table tbody tr.row-successor[data-task-type="summary"] td {
    background: transparent !important;
    background-color: transparent !important;
}

/* Keep task bars clean without filters */
.task-selected,
.task-connected {
    opacity: 1 !important;
}

/* Enhance task bar visibility on highlighted rows */
.row-highlight-selected .task-bar,
.row-highlight-selected .milestone,
.row-highlight-selected .project-bar {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Gantt rows container positioning */
#gantt-rows {
    position: relative;
}

/* Grid and Gantt sync highlighting animation */
.row-highlight-overlay,
.grid-table tbody tr {
    transition: background-color 0.25s ease-in-out;
}

/* Dim non-related dependencies when highlighting */
.gantt-rows:has(.dependency-highlighted) .dependency-path:not(.dependency-highlighted),
.gantt-rows:has(.dependency-highlighted) .highperf-dependency:not(.dependency-highlighted) {
    opacity: 0.2 !important;
}

/* ========================================
   ADVANCED DEPENDENCY POPUP - TABLE LAYOUT
   ======================================== */

.dependency-popup {
    position: fixed !important;
    z-index: 100000 !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    pointer-events: auto !important;
    display: block !important;
    visibility: visible !important;
    min-height: 200px !important;
    min-width: 1070px !important;  /* 2 tables × 530px (490px cols + 40px padding) + 4px divider */
    background: white !important;
}

.dependency-popup-content {
    background: #ffffff !important;
    border-radius: 8px 8px 0 0;
    box-shadow:
        0 -10px 25px -5px rgba(0, 0, 0, 0.1),
        0 -5px 10px -5px rgba(0, 0, 0, 0.04),
        0 0 0 1px rgba(0, 0, 0, 0.05);
    overflow: visible !important;
    display: flex !important;
    flex-direction: column;
    min-height: 180px !important;
    width: 100% !important;
}

/* Header */
.dependency-popup-header {
    background: linear-gradient(to right, #f0f9ff, #f8fafc) !important;
    border-bottom: 2px solid #e0f2fe;
    padding: 5px 16px !important;
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    min-height: 25px !important;
}

.popup-task-name {
    margin: 0;
    font-size: 0.9em;
    font-weight: 700;
    color: #0c4a6e;
    line-height: 1.3;
    word-wrap: break-word;
    flex: 1;
}

.popup-task-duration {
    font-weight: 500;
    color: #64748b;
    font-size: 0.9em;
    margin-left: 4px;
}

.popup-close-btn {
    background: none;
    border: none;
    color: #64748b;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s ease;
    font-size: 20px;
    line-height: 1;
    margin-left: 12px;
    flex-shrink: 0;
}

.popup-close-btn:hover {
    background: #dc2626;
    color: white;
}

/* Body */
.dependency-popup-body {
    padding: 0;
    overflow: visible !important;
    flex: 1;
    background: #f8fafc;
    min-height: 100px !important;
    display: block !important;
}

/* Two-column layout */
.dependency-columns {
    display: flex !important;
    flex: 1;
    min-height: 80px !important;
}

.dependency-column {
    flex: 1;
    display: flex !important;
    flex-direction: column;
    overflow: visible !important;
}

.column-divider {
    width: 2px;
    background: linear-gradient(to bottom, #e2e8f0, #cbd5e1);
    margin: 0 1px;
}

/* Column Headers */
.column-header {
    background: linear-gradient(to bottom, #ffffff, #f8fafc);
    border-bottom: 1px solid #e2e8f0;
    padding: 5px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.column-header h4 {
    margin: 0;
    font-size: 0.85em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #1e40af;
}

/* Table Container */
.table-container {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0;
    display: block !important;
}

/* Dependency Table */
.dependency-table {
    width: 100% !important;
    border-collapse: collapse;
    font-size: 0.75em;
    table-layout: fixed;
    display: table !important;
}

.dependency-table thead {
    position: sticky;
    top: 0;
    background: #f1f5f9;
    z-index: 1;
}

.dependency-table th {
    text-align: left;
    padding: 6px 4px;
    font-weight: 600;
    color: #475569;
    border-bottom: 1px solid #cbd5e1;
    font-size: 0.7em;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Task Name column fixed 290px, other columns fixed width */
.dependency-table th:nth-child(1) { width: 290px; min-width: 290px; }
.dependency-table td:nth-child(1) { width: 290px; min-width: 290px; }
.dependency-table th:nth-child(2) { width: 40px; text-align: center; }
.dependency-table th:nth-child(3) { width: 40px; text-align: center; }
.dependency-table th:nth-child(4) { width: 55px; text-align: center; }
.dependency-table th:nth-child(5) { width: 65px; text-align: center; }  /* Date column - MM/DD/YY */

/* Center Type, Lag, Duration, Date columns in body cells */
.dependency-table td:nth-child(2),
.dependency-table td:nth-child(3),
.dependency-table td:nth-child(4),
.dependency-table td:nth-child(5) {
    text-align: center;
}

/* Date column styling - matches other columns */
.dependency-table .date-cell {
    white-space: nowrap;
}

.dependency-table tbody tr {
    border-bottom: 1px solid #e2e8f0;
    transition: all 0.2s ease;
    cursor: pointer;
}

.dependency-table tbody tr:hover {
    background-color: #e0f2fe;
    transform: scale(1.01);
}

.dependency-table tbody tr.clickable-row:active {
    background-color: #bae6fd;
    transform: scale(0.99);
}

/* Tasks not in current PERT filter - greyed out and unclickable */
.dependency-table tbody tr.not-in-filter {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: #f1f5f9;
    position: relative;
}

.dependency-table tbody tr.not-in-filter:hover {
    background-color: #fee2e2;
    transform: none;
}

.dependency-table tbody tr.not-in-filter .clickable-task {
    color: #94a3b8;
    cursor: not-allowed;
}

.dependency-table tbody tr.not-in-filter .task-name-cell::after {
    content: ' (not in filter)';
    color: #ef4444;
    font-size: 0.75em;
    font-style: italic;
}

.dependency-table td {
    padding: 6px 4px;
    color: #1e293b;
}

/* ========================================
   DRIVING INDICATOR - LEFT BORDER + TOOLTIP
   Design: Option 3 (Left Border) + Option 8 (Tooltip on Hover)
   Reference: tests/driving-indicator-design-options.html
   Added: 2026-01-22
   ======================================== */

/* Row positioning for tooltip */
.dependency-table tbody tr.clickable-row {
    position: relative;
}

/* LEFT BORDER INDICATOR (Option 3) */
.dependency-table tbody tr.driving-row {
    border-left: 4px solid #dc2626 !important;
    background-color: #fef2f2;
}

.dependency-table tbody tr.driving-row:hover {
    background-color: #fee2e2;
}

.dependency-table tbody tr.non-driving-row {
    border-left: 4px solid transparent;
}

/* TOOLTIP ON HOVER (Option 8) */
.dependency-table .driving-tooltip {
    display: none;
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    background: #1e293b;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 0.75em;
    white-space: nowrap;
    z-index: 100;
    margin-left: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Tooltip arrow pointing left */
.dependency-table .driving-tooltip::before {
    content: '';
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    border: 6px solid transparent;
    border-right-color: #1e293b;
}

/* Show tooltip on row hover */
.dependency-table tbody tr.clickable-row:hover .driving-tooltip {
    display: block;
}

/* Ensure tooltip doesn't get cut off */
.dependency-table tbody tr.clickable-row:hover {
    z-index: 10;
}

/* Driving row visual enhancement */
.dependency-table tbody tr.driving-row .task-name-cell .clickable-task {
    font-weight: 600;
}

/* Override for not-in-filter rows - keep dimmed even if driving */
.dependency-table tbody tr.not-in-filter.driving-row {
    border-left-color: #fca5a5;
    background-color: #fef2f2;
    opacity: 0.6;
}

/* Cell-specific styles */
.task-name-cell {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    position: relative; /* For tooltip positioning */
}

.clickable-task {
    color: #0c4a6e;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
    font-weight: 600;
}

.clickable-task:hover {
    color: #2563eb;
    text-decoration: none;
}

.type-cell {
    width: 40px;
    text-align: center;
    font-weight: 600;
    color: #64748b;
}

.lag-cell {
    width: 50px;
    text-align: right;
    color: #059669;
    font-weight: 600;
}

.duration-cell {
    width: 60px;
    text-align: right;
    color: #7c3aed;
    font-weight: 600;
}

.no-data {
    text-align: center;
    color: #94a3b8;
    font-style: italic;
    padding: 20px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .dependency-popup {
        left: 10px !important;
        right: 10px !important;
        width: auto !important;
        bottom: 10px !important;
    }

    .dependency-columns {
        flex-direction: column;
    }

    .column-divider {
        width: 100%;
        height: 2px;
        margin: 1px 0;
    }

    .dependency-column {
        max-height: 150px;
    }

    .task-name-cell {
        max-width: 150px;
    }
}

/* Animation Classes - Slide Up from Bottom */
.dependency-popup-enter {
    opacity: 0;
    transform: translateY(100%);
}

.dependency-popup-enter-active {
    opacity: 1;
    transform: translateY(0);
    transition: all 300ms ease-out;
}

.dependency-popup-exit {
    opacity: 1;
    transform: translateY(0);
}

.dependency-popup-exit-active {
    opacity: 0;
    transform: translateY(100%);
    transition: all 200ms ease-in;
}

/* Shake animation for not-in-filter tasks */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
    20%, 40%, 60%, 80% { transform: translateX(4px); }
}

/* ========================================
   PROJECTS DASHBOARD STYLES
   ======================================== */

.dashboard-container {
    padding: 24px;
    height: 100%;
    overflow-y: auto;
    background: #F8F9FA;
}

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

.dashboard-header h1 {
    font-size: 28px;
    font-weight: 600;
    color: #2c3e50;
    margin: 0;
}

.dashboard-header .btn-primary {
    background: #6A4CFF;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.dashboard-header .btn-primary:hover {
    background: #5538E8;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(106, 76, 255, 0.3);
}

/* Projects Grid */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
    padding-bottom: 24px;
}

/* Project Card */
.project-card {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid #E0E0E0;
}

.project-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    border-color: #6A4CFF;
}

.project-card-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}

.project-color {
    width: 4px;
    height: 48px;
    border-radius: 2px;
    flex-shrink: 0;
}

.project-title-area {
    flex: 1;
    min-width: 0;
}

.project-title {
    font-size: 18px;
    font-weight: 600;
    color: #2c3e50;
    margin: 0 0 6px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.project-status {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    text-transform: capitalize;
}

.status-active {
    background: #E8F5E9;
    color: #4CAF50;
}

.status-archived {
    background: #F5F5F5;
    color: #757575;
}

.status-on_hold {
    background: #FFF3E0;
    color: #FF9800;
}

.project-description {
    color: #666;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 16px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Progress Section */
.project-progress {
    margin-bottom: 16px;
}

.progress-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.progress-label {
    font-size: 13px;
    color: #666;
    font-weight: 500;
}

.progress-percentage {
    font-size: 14px;
    font-weight: 600;
    color: #2c3e50;
}

.progress-bar-container {
    height: 8px;
    background: #E0E0E0;
    border-radius: 4px;
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
}

/* Project Stats */
.project-stats {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 0;
    border-top: 1px solid #F0F0F0;
    border-bottom: 1px solid #F0F0F0;
}

.stat-item {
    flex: 1;
    text-align: center;
}

.stat-value {
    display: block;
    font-size: 20px;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 4px;
}

.stat-label {
    display: block;
    font-size: 12px;
    color: #666;
}

.stat-warning .stat-value {
    color: #F44336;
}

.stat-success .stat-value {
    color: #4CAF50;
}

/* Project Meta */
.project-meta {
    display: flex;
    gap: 16px;
    margin-top: 12px;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #666;
}

.meta-icon {
    font-size: 14px;
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 80px 40px;
}

.empty-state-icon {
    font-size: 64px;
    margin-bottom: 16px;
}

.empty-state h2 {
    font-size: 24px;
    font-weight: 600;
    color: #2c3e50;
    margin: 0 0 8px 0;
}

.empty-state p {
    font-size: 16px;
    color: #666;
    margin: 0 0 24px 0;
}

.empty-state .btn-primary {
    background: #6A4CFF;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.empty-state .btn-primary:hover {
    background: #5538E8;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(106, 76, 255, 0.3);
}

/* Error State */
.error-state {
    text-align: center;
    padding: 80px 40px;
}

.error-icon {
    font-size: 64px;
    margin-bottom: 16px;
}

.error-state h2 {
    font-size: 24px;
    font-weight: 600;
    color: #F44336;
    margin: 0 0 8px 0;
}

.error-state p {
    font-size: 16px;
    color: #666;
    margin: 0 0 24px 0;
}

.error-state .btn-secondary {
    background: #E0E0E0;
    color: #333;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.error-state .btn-secondary:hover {
    background: #D0D0D0;
}

/* Loading Spinner */
.loading-spinner {
    text-align: center;
    padding: 40px;
    color: #666;
    font-size: 16px;
}

/* View Toggle - Hide/Show Dashboard vs Gantt */
.view-container {
    display: none;
}

.view-container.active {
    display: flex;  /* CRITICAL FIX: Use flex to maintain flex chain from main-content */
    flex-direction: column;  /* Stack children vertically */
    width: 100%;
    height: 100%;
    flex: 1;  /* Take remaining space from main-content */
    min-height: 0;  /* Allow proper flex shrinking for scrollbars */
}

/* ========================================
   USER PROFILE DROPDOWN STYLES
   ======================================== */

.user-profile-dropdown {
    position: relative;
    display: inline-block;
}

.user-profile-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: white;
    border: 1px solid #E0E0E0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 14px;
    color: #2c3e50;
}

.user-profile-btn:hover {
    background: #F8F9FA;
    border-color: #6A4CFF;
}

.user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6A4CFF 0%, #8B72FF 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 13px;
}

.user-name {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dropdown-arrow {
    font-size: 10px;
    color: #666;
    transition: transform 0.2s;
}

.user-profile-btn:hover .dropdown-arrow {
    transform: translateY(1px);
}

/* Profile Dropdown Menu */
.profile-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 280px;
    background: white;
    border: 1px solid #E0E0E0;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
    z-index: 1000;
}

.profile-dropdown-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.profile-menu-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #6A4CFF 0%, #8B72FF 100%);
    border-radius: 12px 12px 0 0;
}

.profile-menu-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: white;
    color: #6A4CFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 18px;
    flex-shrink: 0;
}

.profile-menu-info {
    flex: 1;
    min-width: 0;
    color: white;
}

.profile-menu-name {
    font-weight: 600;
    font-size: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 4px;
}

.profile-menu-email {
    font-size: 13px;
    opacity: 0.9;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-admin-badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.2);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 500;
    margin-top: 4px;
}

.profile-menu-divider {
    height: 1px;
    background: #E0E0E0;
    margin: 0;
}

.profile-menu-items {
    padding: 8px 0;
}

.profile-menu-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border: none;
    background: none;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 14px;
    color: #2c3e50;
    text-align: left;
}

.profile-menu-item:hover {
    background: #F8F9FA;
}

.profile-menu-item .menu-icon {
    font-size: 18px;
    width: 24px;
    text-align: center;
}

.logout-item {
    color: #F44336;
}

.logout-item:hover {
    background: #FFEBEE;
}
.trades-view-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%; /* Force full width inside horizontal flexbox parent */
    background: #f5f7fa;
    padding: 0;
    gap: 0;
}

/* Header section */
.trades-view-header {
    padding: 24px;
    background: white;
    border-bottom: 1px solid #e9ecef;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.trades-view-header h1 {
    font-size: 28px;
    font-weight: 700;
    color: #212529;
    margin: 0 0 4px 0;
}

.trades-view-header p {
    font-size: 14px;
    color: #6c757d;
    margin: 0;
}

/* Main content area */
.trades-view-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 24px;
    overflow: hidden;
}

/* Table wrapper */
.table-wrapper {
    flex: 1;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    margin-bottom: 24px;
}

.table-scroll {
    flex: 1;
    overflow-y: auto;
}

/* Table styles */
.table-wrapper table {
    width: 100%;
    border-collapse: collapse;
}

.table-wrapper th {
    padding: 12px 16px;
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    color: #495057;
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
    position: sticky;
    top: 0;
    z-index: 10;
}

.table-wrapper td {
    padding: 12px 16px;
    font-size: 13px;
    color: #212529;
    border-bottom: 1px solid #e9ecef;
}

.table-wrapper tbody tr:last-child td {
    border-bottom: none;
}

/* Group Row (Level 0 - Categories) */
.group-row {
    background: #f8f9fa;
    font-weight: 600;
}

.group-row:hover {
    background: #f0f1f3 !important;
}

/* Trade Row (Level 1) */
.trade-row {
    background: white;
}

.trade-row:hover {
    background: #f8f9fa;
}

.trade-row td:first-child {
    padding-left: 56px;
}

.trade-name {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #212529;
}

.trade-icon {
    display: none;
}

/* Checkbox styling */
.table-wrapper input[type="checkbox"] {
    width: 14px;
    height: 14px;
    cursor: pointer;
    accent-color: #0d6efd;
    margin: 0;
}

/* Progress bar */
.progress-cell {
    display: flex;
    align-items: center;
    gap: 8px;
}

.progress-bar {
    flex: 1;
    height: 6px;
    background: #e9ecef;
    border-radius: 3px;
    overflow: hidden;
    min-width: 80px;
}

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

.progress-label {
    font-size: 12px;
    font-weight: 600;
    color: #0d6efd;
    min-width: 35px;
    text-align: right;
}

/* Status badges */
.badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.badge-completed {
    background: #d1e7dd;
    color: #0f5132;
}

.badge-in_progress {
    background: #fff3cd;
    color: #856404;
}

.badge-pending {
    background: #f8d7da;
    color: #842029;
}

/* Footer section */
.trades-view-footer {
    padding: 16px 24px;
    background: white;
    border-top: 1px solid #e9ecef;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.05);
}

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

.selection-count {
    font-weight: 700;
    color: #212529;
}

.footer-actions {
    display: flex;
    gap: 12px;
}

.btn {
    padding: 8px 16px;
    border-radius: 4px;
    border: none;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-primary {
    background: #0d6efd;
    color: white;
}

.btn-primary:hover:not(:disabled) {
    background: #0b5ed7;
}

.btn-primary:disabled {
    background: #cfe2ff;
    color: #084298;
    cursor: not-allowed;
}

.btn-secondary {
    background: #e9ecef;
    color: #212529;
}

.btn-secondary:hover {
    background: #dee2e6;
}

/* ============================================
 * TRADE SCHEDULE FILTER INDICATOR STYLES
 * Displays when a trade filter is active
 * ============================================ */

.trade-filter-indicator {
    width: 100%;
    background: linear-gradient(90deg, #fff3cd 0%, #fffacd 100%);
    border-bottom: 2px solid #ffc107;
    padding: 12px 16px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 14px;
    font-weight: 500;
    color: #856404;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    animation: slideDown 0.3s ease-in-out;
}

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

.trade-filter-indicator.hiding {
    animation: slideUp 0.3s ease-in-out;
}

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

.trade-filter-content {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 100%;
}

.trade-filter-icon {
    font-size: 18px;
    flex-shrink: 0;
}

.trade-filter-label {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.trade-filter-label strong {
    color: #333;
    font-weight: 600;
}

.trade-filter-count {
    color: #666;
    font-size: 13px;
    font-weight: 400;
    white-space: nowrap;
}

.trade-filter-clear-btn {
    background: #ffc107;
    color: #333;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.trade-filter-clear-btn:hover {
    background: #ffb300;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    transform: scale(1.05);
}

.trade-filter-clear-btn:active {
    transform: scale(0.95);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .trade-filter-indicator {
        padding: 10px 12px;
        font-size: 13px;
    }

    .trade-filter-label {
        flex-wrap: wrap;
        gap: 4px;
    }

    .trade-filter-count {
        flex-basis: 100%;
        margin-left: 28px;
    }
}

/* Trade Layout Filter Dropdown */
.trade-layout-filter-dropdown {
    position: relative;
    display: inline-block;
}

#trade-layout-filter-btn {
    position: relative;
}

.filter-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    min-width: 250px;
    max-height: 400px;
    overflow-y: auto;
    margin-top: 4px;
}

.filter-dropdown-content {
    padding: 8px 0;
}

/* Hide padding when empty to prevent empty white box */
.filter-dropdown-content:empty {
    padding: 0;
    display: none;
}

.filter-dropdown-item {
    padding: 8px 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background-color 0.2s ease;
    border: none;
    width: 100%;
    text-align: left;
    background: none;
    font-size: 12px;
    color: #333;
}

.filter-dropdown-item:hover {
    background-color: #f5f5f5;
}

.filter-dropdown-item:active {
    background-color: #e8e8e8;
}

.filter-dropdown-item-name {
    font-weight: 500;
    font-size: 12px;
}

.filter-dropdown-item-count {
    font-size: 11px;
    color: #999;
    margin-left: 8px;
}

/* Checkbox item styling */
.filter-dropdown-checkbox-item {
    padding: 7px 14px;
}

.filter-dropdown-checkbox-item:hover {
    background-color: #f0f7ff;
}

/* Checkbox input styling */
.filter-trade-checkbox {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: #2196F3;
}

.filter-trade-checkbox:hover {
    opacity: 0.8;
}

/* Action buttons container */
.filter-dropdown-actions {
    position: sticky;
    bottom: 0;
    background: #fafafa;
    border-top: 1px solid #ddd;
}

.filter-action-btn {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    transition: all 0.2s ease;
}

.filter-action-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.filter-action-btn:active:not(:disabled) {
    transform: translateY(0);
}

.filter-apply-btn:hover:not(:disabled) {
    background-color: #1976D2;
}

.filter-clear-btn:hover {
    background-color: #f5f5f5;
}

/* Disabled state for Filter Trade dropdown */
.filter-disabled {
    opacity: 0.5;
    pointer-events: none;
    filter: grayscale(60%);
}

.filter-disabled .trade-layout-filter-button {
    cursor: not-allowed;
    background-color: #e0e0e0;
}

/* ========================================
   WBS COLOR SETTINGS MODAL
   ======================================== */

.wbs-color-modal {
    max-width: 800px;
    max-height: 90vh;
    overflow-y: auto;
}

.palette-section {
    margin-bottom: 30px;
}

.palette-section h3 {
    margin-bottom: 15px;
    color: #333;
    font-size: 1.1em;
}

.palette-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
}

.palette-button {
    background: white;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    padding: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.palette-button:hover {
    border-color: #667eea;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
    transform: translateY(-2px);
}

.palette-name {
    font-weight: 600;
    margin-bottom: 8px;
    font-size: 0.9em;
}

.palette-colors {
    display: flex;
    gap: 4px;
    height: 30px;
}

.palette-swatch {
    flex: 1;
    border-radius: 4px;
}

.custom-colors-section {
    margin-bottom: 30px;
}

.custom-colors-section h3 {
    margin-bottom: 15px;
    color: #333;
    font-size: 1.1em;
}

.color-inputs {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.color-input-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    background: #f8f8f8;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
}

.level-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.level-label {
    font-weight: 600;
    font-size: 0.95em;
    color: #333;
}

.level-description {
    font-size: 0.85em;
    color: #666;
}

.color-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.color-picker {
    width: 50px;
    height: 40px;
    border: 2px solid #e0e0e0;
    border-radius: 6px;
    cursor: pointer;
    padding: 2px;
}

.color-picker:hover {
    border-color: #667eea;
}

.color-text-input {
    width: 100px;
    padding: 8px 12px;
    border: 2px solid #e0e0e0;
    border-radius: 6px;
    font-family: 'Courier New', monospace;
    font-size: 0.9em;
    text-transform: uppercase;
}

.color-text-input:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.color-preview {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    border: 2px solid #e0e0e0;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}

.preview-section {
    margin-bottom: 20px;
}

.preview-section h3 {
    margin-bottom: 15px;
    color: #333;
    font-size: 1.1em;
}

.preview-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: #f0f0f0;
    padding: 15px;
    border-radius: 8px;
}

.preview-row {
    padding: 10px 15px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.preview-row:hover {
    transform: translateX(5px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.preview-icon {
    font-size: 0.8em;
    opacity: 0.8;
}

.preview-text {
    flex: 1;
}

/* Toolbar button styling */
#wbs-color-settings-btn {

/* ============================================================================
   PROCUREMENT ANALYSIS MODULE STYLES
   Follows same patterns as gantt-container and grid sections
   ============================================================================ */

/* --- Main Procurement Container --- INSIDE GANTT-CONTAINER */
.procurement-container {
    display: none; /* Hidden by default, shown when view is active */
    flex-direction: column; /* CRITICAL: Stack children vertically */
    flex: 1; /* Fill gantt-container */
    width: 100%;
    height: 100%;
    background: #f8f9fa;
    overflow-y: auto;
}

/* --- Inner Content Box --- */
.procurement-content {
    background: #ffffff;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* --- Procurement Header --- */
.procurement-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    background: white;
    border-bottom: 2px solid #dee2e6;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.procurement-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #2c3e50;
    margin: 0;
}

.procurement-toolbar {
    display: flex;
    gap: 12px;
    align-items: center;
}

/* --- Procurement Toolbar Buttons --- */
.procurement-toolbar button {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    background: white;
    color: #495057;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.procurement-toolbar button:hover {
    background: #f8f9fa;
    border-color: #007bff;
    color: #007bff;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,123,255,0.2);
}

.procurement-toolbar button:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0,123,255,0.2);
}

.procurement-toolbar button svg {
    width: 16px;
    height: 16px;
}

/* Specific button colors */
.btn-procurement-refresh:hover {
    border-color: #28a745;
    color: #28a745;
}

.btn-procurement-export:hover {
    border-color: #17a2b8;
    color: #17a2b8;
}

.btn-procurement-close:hover {
    border-color: #dc3545;
    color: #dc3545;
}

/* --- Procurement Grid Container --- */
.procurement-grid-container {
    flex: 1;  /* CRITICAL: Fill remaining space */
    display: flex;  /* CRITICAL: Make it a flex container */
    flex-direction: column;  /* CRITICAL: Stack children vertically */
    overflow: auto;
    padding: 20px;
    background: #f8f9fa;
    min-height: 0;  /* CRITICAL: Allow flex shrinking */
}

/* --- FORCE GRID VISIBILITY --- */
.procurement-grid-container .grid-table {
    border-collapse: collapse;
    width: 100%;
}

.procurement-grid-container .grid-table tbody tr {
    display: table-row !important;
    height: 28px !important;
    min-height: 28px !important;
    visibility: visible !important;
}

.procurement-grid-container .grid-table tbody td {
    display: table-cell !important;
    padding: 4px 8px !important;
    border: 1px solid #dee2e6 !important;
    background: white !important;
    color: #333 !important;
    font-size: 13px !important;
    visibility: visible !important;
}

.procurement-grid-container .grid-table tbody td .cell-content {
    display: block !important;
    visibility: visible !important;
    color: #333 !important;
}

/* --- Procurement Grid Wrapper --- */
.procurement-grid-wrapper {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    overflow: hidden;
}

/* --- Procurement Table --- */
.procurement-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    table-layout: auto; /* Allow columns to size based on content */
}

/* --- Procurement Header Row --- */
.procurement-header-row {
    background: linear-gradient(180deg, #f8f9fa 0%, #e9ecef 100%);
    border-bottom: 2px solid #dee2e6;
}

.procurement-header-cell {
    padding: 12px 16px;
    font-weight: 600;
    color: #495057;
    text-align: center;
    border-right: 1px solid #dee2e6;
    position: relative;
    white-space: nowrap;
    user-select: none;
}

.procurement-header-cell:last-child {
    border-right: none;
}

/* Sticky first column */
.procurement-header-cell.sticky-col {
    position: sticky;
    left: 0;
    z-index: 10;
    background: linear-gradient(180deg, #f8f9fa 0%, #e9ecef 100%);
    box-shadow: 2px 0 4px rgba(0,0,0,0.05);
}

/* --- Procurement Data Rows --- */
#procurement-table tbody tr {
    border-bottom: 1px solid #e9ecef;
    transition: background-color 0.15s ease;
}

#procurement-table tbody tr:hover {
    background-color: #f1f3f5;
}

#procurement-table tbody tr.zebra-even {
    background-color: #fafbfc;
}

#procurement-table tbody tr.zebra-even:hover {
    background-color: #f1f3f5;
}

/* --- Procurement Cells --- */
.procurement-cell {
    padding: 10px 16px;
    border-right: 1px solid #e9ecef;
    position: relative;
    vertical-align: middle;
}

.procurement-cell:last-child {
    border-right: none;
}

/* Sticky first column for data cells */
.procurement-cell.sticky-col {
    position: sticky;
    left: 0;
    z-index: 5;
    background: white;
    font-weight: 500;
    box-shadow: 2px 0 4px rgba(0,0,0,0.05);
}

#procurement-table tbody tr:hover .procurement-cell.sticky-col {
    background-color: #f1f3f5;
}

#procurement-table tbody tr.zebra-even .procurement-cell.sticky-col {
    background-color: #fafbfc;
}

#procurement-table tbody tr.zebra-even:hover .procurement-cell.sticky-col {
    background-color: #f1f3f5;
}

/* --- Editable Cell Styling --- */
.procurement-cell.editable {
    cursor: text;
    position: relative;
}

.procurement-cell.editable:hover {
    background-color: #e7f3ff;
    outline: 1px solid #007bff;
    outline-offset: -1px;
}

.procurement-cell.editable:focus-within {
    background-color: #fff;
    outline: 2px solid #007bff;
    outline-offset: -2px;
    box-shadow: inset 0 0 0 1px #007bff;
}

/* --- Cell Selection --- */
.procurement-cell.selected {
    background-color: #e7f3ff !important;
    outline: 2px solid #007bff;
    outline-offset: -2px;
}

/* --- Cell Editor (Input) --- */
.procurement-cell .cell-editor {
    width: 100%;
    padding: 4px 8px;
    border: 2px solid #007bff;
    border-radius: 3px;
    font-size: 14px;
    font-family: inherit;
    outline: none;
    background: white;
}

.procurement-cell .cell-editor:focus {
    border-color: #0056b3;
    box-shadow: 0 0 0 3px rgba(0,123,255,0.1);
}

/* --- Empty Cell Placeholder --- */
.empty-cell {
    color: #adb5bd;
    font-style: italic;
}

/* --- Variance Color Coding --- */
.procurement-cell.variance-ahead {
    background-color: #d4edda !important;
    color: #155724;
    font-weight: 600;
}

.procurement-cell.variance-behind {
    background-color: #f8d7da !important;
    color: #721c24;
    font-weight: 600;
}

.procurement-cell.variance-ontrack {
    background-color: #e2e3e5 !important;
    color: #383d41;
    font-weight: 500;
}

/* Hover effects for variance cells */
#procurement-table tbody tr:hover .procurement-cell.variance-ahead {
    background-color: #c3e6cb !important;
}

#procurement-table tbody tr:hover .procurement-cell.variance-behind {
    background-color: #f5c6cb !important;
}

#procurement-table tbody tr:hover .procurement-cell.variance-ontrack {
    background-color: #d6d8db !important;
}

/* --- Loading State --- */
.procurement-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 400px;
    color: #6c757d;
    font-size: 1.1rem;
}

.procurement-loading::before {
    content: "⏳";
    margin-right: 8px;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* --- Empty State --- */
.procurement-empty {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 400px;
    color: #6c757d;
    padding: 40px;
    text-align: center;
}

.procurement-empty svg {
    width: 64px;
    height: 64px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.procurement-empty h3 {
    margin: 0 0 8px 0;
    font-size: 1.25rem;
    color: #495057;
}

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

/* --- Responsive Adjustments --- */
@media (max-width: 1200px) {
    .procurement-header {
        padding: 12px 16px;
    }

    .procurement-title {
        font-size: 1.25rem;
    }

    .procurement-toolbar button {
        padding: 6px 12px;
        font-size: 13px;
    }
}

@media (max-width: 768px) {
    .procurement-toolbar {
        gap: 8px;
    }

    .procurement-toolbar button span {
        display: none; /* Hide button text on mobile, keep icons */
    }

    .procurement-cell,
    .procurement-header-cell {
        padding: 8px 12px;
        font-size: 13px;
    }
}

/* --- Print Styles --- */
@media print {
    .procurement-container {
        position: static;
        display: block !important;
        margin: 0;
        background: white;
    }

    .procurement-header {
        page-break-after: avoid;
    }

    .procurement-toolbar {
        display: none;
    }

    #procurement-table tbody tr {
        page-break-inside: avoid;
    }

    .procurement-cell.sticky-col,
    .procurement-header-cell.sticky-col {
        position: static;
        box-shadow: none;
    }
}

/* ============================================================
   BASELINE FEATURE STYLES
   Added: 2026-01-07
   Purpose: Baseline comparison columns and Gantt chart bars
   ============================================================ */

/* --- Baseline Column Styles --- */
.col-baseline-start,
.col-baseline-finish,
.col-baseline-duration,
.col-variance {
    min-width: 85px;
    width: 85px;
    text-align: center;
    /* Hidden by default - shown when baseline is selected */
    display: none !important;
}

/* When baseline is active, show baseline columns */
.baseline-active .col-baseline-start,
.baseline-active .col-baseline-finish,
.baseline-active .col-baseline-duration,
.baseline-active .col-variance {
    display: table-cell !important;
}

/* Baseline column header styling */
th.col-baseline-start,
th.col-baseline-finish,
th.col-baseline-duration,
th.col-variance {
    background: #f5f5f5;
    color: #666;
    font-weight: 500;
    border-left: 1px solid #e0e0e0;
}

/* Baseline cell styling - subtle grey text */
td.col-baseline-start .cell-content,
td.col-baseline-finish .cell-content,
td.col-baseline-duration .cell-content {
    color: #757575;
}

/* Variance column styling */
td.col-variance .cell-content {
    font-weight: 500;
}

/* --- Multi-Baseline Grid Columns (Phase 6) --- */
/* BL1-4 Variance columns */
col.col-bl1-variance, col.col-bl2-variance,
col.col-bl3-variance, col.col-bl4-variance,
th.col-bl1-variance, th.col-bl2-variance,
th.col-bl3-variance, th.col-bl4-variance,
td.col-bl1-variance, td.col-bl2-variance,
td.col-bl3-variance, td.col-bl4-variance {
    min-width: 70px;
    width: 70px;
    text-align: center;
    /* Hidden by default - shown when multi-baseline is selected */
    display: none;
}

/* BL Finish columns slightly wider */
col.col-bl1-finish, col.col-bl2-finish,
col.col-bl3-finish, col.col-bl4-finish,
th.col-bl1-finish, th.col-bl2-finish,
th.col-bl3-finish, th.col-bl4-finish,
td.col-bl1-finish, td.col-bl2-finish,
td.col-bl3-finish, td.col-bl4-finish {
    min-width: 85px;
    width: 85px;
    text-align: center;
    display: none;
}

/* Multi-baseline column headers - color coded */
th.col-bl1-finish, th.col-bl1-variance { background: #f5f5f5; border-left: 2px solid #757575; }
th.col-bl2-finish, th.col-bl2-variance { background: #e3f2fd; border-left: 2px solid #2196F3; }
th.col-bl3-finish, th.col-bl3-variance { background: #fff3e0; border-left: 2px solid #FF9800; }
th.col-bl4-finish, th.col-bl4-variance { background: #f3e5f5; border-left: 2px solid #9C27B0; }

/* Multi-baseline cell styling */
td.col-bl1-finish .cell-content, td.col-bl1-variance .cell-content { color: #757575; }
td.col-bl2-finish .cell-content, td.col-bl2-variance .cell-content { color: #1976D2; }
td.col-bl3-finish .cell-content, td.col-bl3-variance .cell-content { color: #F57C00; }
td.col-bl4-finish .cell-content, td.col-bl4-variance .cell-content { color: #7B1FA2; }

/* Variance columns bold */
td.col-bl1-variance .cell-content,
td.col-bl2-variance .cell-content,
td.col-bl3-variance .cell-content,
td.col-bl4-variance .cell-content {
    font-weight: 600;
}

/* --- Baseline Bar in Gantt Chart --- */
/* Matches .task-bar styling pattern exactly */
.baseline-bar {
    position: absolute !important;
    height: 4px !important;
    background: #757575 !important;  /* Dark grey for visibility */
    background-color: #757575 !important;
    border-radius: 2px;
    z-index: 2;  /* Same as task bars */
    pointer-events: auto;
    box-sizing: border-box;
    cursor: pointer;
}

.baseline-bar:hover {
    background: #424242;  /* Darker on hover */
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* Baseline milestone marker */
.baseline-bar.baseline-milestone {
    border-radius: 1px;
    width: 8px !important;
}

/* Phase 6: Multi-Baseline Color Coding */
/* Baseline 1: Grey (default) */
.baseline-bar[data-baseline-index="0"] {
    background: #757575 !important;
    background-color: #757575 !important;
}
.baseline-bar[data-baseline-index="0"]:hover {
    background: #616161 !important;
}

/* Baseline 2: Blue */
.baseline-bar[data-baseline-index="1"] {
    background: #2196F3 !important;
    background-color: #2196F3 !important;
}
.baseline-bar[data-baseline-index="1"]:hover {
    background: #1976D2 !important;
}

/* Baseline 3: Orange */
.baseline-bar[data-baseline-index="2"] {
    background: #FF9800 !important;
    background-color: #FF9800 !important;
}
.baseline-bar[data-baseline-index="2"]:hover {
    background: #F57C00 !important;
}

/* Baseline 4: Purple */
.baseline-bar[data-baseline-index="3"] {
    background: #9C27B0 !important;
    background-color: #9C27B0 !important;
}
.baseline-bar[data-baseline-index="3"]:hover {
    background: #7B1FA2 !important;
}

/* --- Baseline Modal Styles --- */
#baseline-btn.active {
    background: #e3f2fd !important;
    border-color: #2196f3 !important;
    color: #1565c0 !important;
}

.baseline-modal-desc {
    margin: 0 0 16px 0;
    color: #666;
    font-size: 14px;
}

.baseline-version-list {
    max-height: 350px;
    overflow-y: auto;
    border: 1px solid #e1e5e9;
    border-radius: 6px;
    background: #fff;
}

.baseline-version-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
    transition: background 0.15s ease;
    background: #fff;
}

.baseline-version-item:last-child {
    border-bottom: none;
}

.baseline-version-item:hover {
    background: #f0f7ff;
}

.baseline-version-item.selected {
    background: #e3f2fd;
    border-left: 4px solid #2196f3;
}

.baseline-version-item.disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background: #f9f9f9;
}

.baseline-version-item.disabled:hover {
    background: #f9f9f9;
}

.baseline-version-name {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    display: flex;
    align-items: center;
    gap: 8px;
}

.baseline-version-meta {
    font-size: 13px;
    color: #666;
    margin-top: 2px;
}

.baseline-version-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    padding: 3px 8px;
    background: #e0e0e0;
    color: #555;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.baseline-version-badge.selected {
    background: #2196f3;
    color: #fff;
}

.baseline-version-loading,
.baseline-version-empty {
    padding: 40px 16px;
    text-align: center;
    color: #888;
    font-size: 14px;
}

/* --- Show Columns Modal: Baseline Group --- */
.baseline-columns-group {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px dashed #ddd;
}

.baseline-columns-group h4 {
    color: #666;
}

.baseline-columns-group .column-checkbox {
    opacity: 0.6;
}

.baseline-columns-group.baseline-active .column-checkbox {
    opacity: 1;
}

.baseline-note {
    font-size: 11px;
    color: #999;
    font-style: italic;
    margin-top: 8px;
    margin-bottom: 0;
}

.baseline-columns-group.baseline-active .baseline-note {
    display: none;
}

/* Baseline dropdown states */
.baseline-loading,
.baseline-error,
.baseline-empty {
    padding: 20px 14px;
    text-align: center;
    color: #666;
    font-size: 13px;
}

.baseline-loading {
    color: #1976d2;
}

.baseline-error {
    color: #d32f2f;
}

.baseline-empty {
    color: #888;
    font-style: italic;
}