* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* ==========  DAY SWAPPING - PHASE 1 ========== */
        /* Day swap selection highlight */
        .day-name.day-selected-for-swap {
            background: rgba(59, 130, 246, 0.2) !important;
            padding: 2px 6px !important;
            border-radius: 4px !important;
            box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.4);
            transition: all 0.2s ease;
        }

        .day-name {
            cursor: pointer;
            user-select: none;
        }

        /* Day swap container highlight - PHASE 3 enhancement */
        .stripboard-day.day-selected-for-swap-container {
            background: rgba(59, 130, 246, 0.05) !important;
            border: 5px solid rgba(59, 130, 246, 0.3) !important;
            border-radius: 8px !important;
            transition: all 0.2s ease;
        }

        /* GREEN highlight for SECOND day (shift-clicked target) */
        .day-name.day-selected-for-swap-second {
            background: rgba(34, 197, 94, 0.2) !important;
            padding: 2px 6px !important;
            border-radius: 4px !important;
            box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.4);
            transition: all 0.2s ease;
        }

        .stripboard-day.day-selected-for-swap-container-second {
            background: rgba(34, 197, 94, 0.05) !important;
            border: 5px solid rgba(34, 197, 94, 0.3) !important;
            border-radius: 8px !important;
            transition: all 0.2s ease;
        }

        /* ==========  DAY SWAP POPUP - PHASE 4 ========== */
        #daySwapPopup {
            transition: opacity 0.2s ease;
        }

        #daySwapPopupHeader:hover {
            opacity: 0.95;
        }

        #closeSwapPopup:hover {
            opacity: 1 !important;
            transform: scale(1.1);
        }

        #cancelSwapBtn:hover {
            background: #666;
        }

        #confirmSwapBtn:hover {
            transform: scale(1.02);
            box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
        }

        #confirmSwapBtn:active {
            transform: scale(0.98);
        }

        /* HORIZONTAL LAYOUT: Manage Blocks Button - Cyan hover like Master */
        .manage-blocks-btn-horizontal {
            flex: 1 !important;
            padding: 10px 12px !important;
            margin: 0 !important;
            background: #2a2a2a !important;
            border: 2px solid #00D9FF !important;
            border-radius: 6px !important;
            color: white !important;
            font-size: 13px !important;
            font-weight: bold !important;
            cursor: pointer !important;
            transition: all 0.15s ease !important;
            box-shadow: 0 0 10px rgba(0, 217, 255, 0.3) !important;
        }

        .manage-blocks-btn-horizontal:hover {
            background: rgba(6, 182, 212, 0.35) !important;
            border: 2px solid rgba(6, 182, 212, 0.6) !important;
            box-shadow: 0 0 15px rgba(0, 217, 255, 0.5) !important;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8) !important;
        }

        .manage-blocks-btn-horizontal:active {
            transform: scale(0.98) !important;
            box-shadow: 0 0 8px rgba(0, 217, 255, 0.6) !important;
        }

        /* HORIZONTAL LAYOUT: Master Shotlist Tab (right side, 50%) - Header tab style */
        .master-shotlist-tab:not(.active):hover {
            background: #3a3a3a !important;
            border-color: rgba(6, 182, 212, 0.2) !important;
        }

        .master-shotlist-tab:active {
            transform: scale(0.98) !important;
        }

        .master-shotlist-tab.active {
            background: rgba(6, 182, 212, 0.35) !important;
            border: 1px solid rgba(6, 182, 212, 0.6) !important;
        }

        /* PHASE 2 STYLING V4: Add Block Button - Clean like Cast modal */
        .add-block-btn {
            width: auto !important;
            padding: 8px 24px !important;
            margin: 0 auto 16px auto !important;
            display: block !important;
            background: #0066cc !important;
            border: none !important;
            border-radius: 6px !important;
            color: white !important;
            font-size: 13px !important;
            font-weight: bold !important;
            cursor: pointer !important;
            transition: all 0.15s ease !important;
        }

        .add-block-btn:hover {
            background: #0052a3 !important;
        }

        .add-block-btn:active {
            transform: scale(0.98) !important;
        }

        .add-block-btn:focus {
            outline: none !important;
            box-shadow: none !important;
        }

        /* Override for header placement - don't use flex: 1 */
        #stripboard-header .manage-blocks-btn-horizontal {
            flex: 0 0 auto !important;
        }

        /* Responsive lightbox image sizing */
        #lightbox-image {
            width: 90vw !important; 
            height: 80vh !important;
        }
        
        @media (min-width: 768px) {
            #lightbox-image {
                width: 95vw !important; 
                height: 90vh !important;
            }
        }

        html, body {
            height: 100%;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: #0f0f0f;
            color: #e0e0e0;
            display: flex;
            flex-direction: column;
            transition: margin-left 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), margin-right 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), margin-top 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

        body.header-hidden {
            margin-top: -120px;
        }

        /* Stripboard header - full width viewport, flush to edges */
        #stripboard-header {
            padding: 14px 20px;
            transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

        /* Stripboard header hidden state - slide upward while staying sticky */
        #stripboard-page.stripboard-header-hidden #stripboard-header {
            transform: translateY(-100%);
        }

        body.sidebar-open {
            margin-left: var(--sidebar-width, 260px);
        }

        body.right-sidebar-open {
            margin-right: var(--right-sidebar-width, 400px);
        }

        body.screening-sidebar-open {
            margin-left: var(--screening-sidebar-width, 350px);
        }

        /* Global dark scrollbar styling */
        * {
            scrollbar-width: thin;
            scrollbar-color: #444 #1a1a1a;
        }

        *::-webkit-scrollbar {
            width: 12px;
            height: 12px;
        }

        *::-webkit-scrollbar-track {
            background: #1a1a1a;
        }

        *::-webkit-scrollbar-thumb {
            background: #444;
            border-radius: 6px;
            border: 2px solid #1a1a1a;
        }

        *::-webkit-scrollbar-thumb:hover {
            background: #555;
        }

        #dailies-page {
            transition: margin-left 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), width 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

        /* ====== SIDEBAR ====== */
        .sidebar {
            position: fixed;
            left: calc(-1 * var(--sidebar-width, 260px));
            top: 0;
            width: var(--sidebar-width, 260px);
            height: 100vh;
            background: #1f1f1f;
            border-right: 1px solid #444;
            transition: left 0.3s ease;
            z-index: 1000;
            display: flex;
            flex-direction: column;
            overflow-y: auto;
            resize: horizontal;
            min-width: 200px;
            max-width: 700px;
        }


        .sidebar.open { 
            left: 0; 
        }

        .sidebar-header {
            padding: 12px;
            font-weight: 600;
            letter-spacing: 0.5px;
            border-bottom: 1px solid #444;
            background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }

        .sidebar-title {
            flex: 1;
            text-align: left;
            font-size: 13px;
            padding-left: 40px; /* Position next to X button */
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            padding-right: 260px; /* Leave space for zoom slider with gap */
        }

        .sidebar-close-btn {
            position: absolute;
            right: 8px;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            border: none;
            background: transparent;
            color: #e0e0e0;
            font-size: 16px;
            font-weight: 500;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background-color 0.2s ease;
        }

        .sidebar-close-btn:hover {
            background-color: rgba(255, 140, 100, 0.2);
        }

        /* ====== HEADER SIDEBAR BUTTONS ====== */
        .header-sidebar-buttons {
            display: flex;
            gap: 8px;
            margin-right: 10px;
        }

        .header-sidebar-btn {
            width: 35px;
            height: 35px;
            border-radius: 50%;
            background: rgba(31, 31, 31, 0.9);
            border: 1px solid #444;
            color: #e0e0e0;
            font-size: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
            backdrop-filter: blur(10px);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        }

        .header-sidebar-btn:hover {
            background: rgba(59, 130, 246, 0.2);
            border-color: #3b82f6;
            transform: scale(1.05);
        }

        .sidebar-button-label {
            position: absolute;
            top: 40px;
            left: 0;
            background: rgba(0, 0, 0, 0.9);
            color: #e0e0e0;
            padding: 6px 12px;
            border-radius: 4px;
            font-size: 12px;
            white-space: nowrap;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.2s ease;
            z-index: 1000;
            border: 1px solid #444;
        }

        .sidebar-button-label.show {
            opacity: 1;
        }

        .header-sidebar-buttons {
            position: relative;
        }

        /* ====== SAVE PROJECT PACKAGE DIALOG ====== */
        .save-package-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.7);
            z-index: 10000;
            display: flex;
            align-items: center;
            justify-content: center;
            backdrop-filter: blur(4px);
        }

        .save-package-dialog {
            background: #1a1a1a;
            border: 1px solid #444;
            border-radius: 8px;
            padding: 24px;
            min-width: 400px;
            max-width: 500px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
        }

        .save-package-dialog h3 {
            margin: 0 0 20px 0;
            color: #e0e0e0;
            font-size: 18px;
            font-weight: 600;
        }

        .save-package-field {
            margin-bottom: 16px;
        }

        .save-package-field label {
            display: block;
            margin-bottom: 6px;
            color: #ccc;
            font-size: 14px;
        }

        .save-package-input {
            width: 100%;
            padding: 10px;
            background: #2a2a2a;
            border: 1px solid #555;
            border-radius: 4px;
            color: #e0e0e0;
            font-size: 14px;
            box-sizing: border-box;
        }

        .save-package-input:focus {
            outline: none;
            border-color: #3b82f6;
            background: #333;
        }

        .folder-picker-section {
            margin-bottom: 20px;
        }

        .folder-picker-btn {
            background: #444;
            border: 1px solid #666;
            color: #e0e0e0;
            padding: 8px 16px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            margin-right: 12px;
        }

        .folder-picker-btn:hover {
            background: #555;
            border-color: #777;
        }

        .selected-folder {
            color: #ccc;
            font-size: 12px;
            font-style: italic;
        }

        .save-package-buttons {
            display: flex;
            gap: 12px;
            justify-content: flex-end;
            margin-top: 24px;
        }

        .save-package-btn {
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 500;
        }

        .save-package-btn.primary {
            background: #3b82f6;
            color: white;
        }

        .save-package-btn.primary:hover {
            background: #2563eb;
        }

        .save-package-btn.secondary {
            background: #444;
            color: #e0e0e0;
            border: 1px solid #666;
        }

        .save-package-btn.secondary:hover {
            background: #555;
        }


        .sidebar-tabs {
            display: flex;
            flex-wrap: wrap;
        }

        .sidebar-tabs button {
            flex: 1 1 auto;
            min-width: 0;
            padding: 8px;
            background: #333;
            border: none;
            color: #e0e0e0;
            cursor: pointer;
            font-size: 12px;
            border-right: 1px solid rgba(255,255,255,0.1);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            box-shadow: inset 1px 1px 2px rgba(255,255,255,0.1), inset -1px -1px 2px rgba(0,0,0,0.3);
            transition: all 0.2s ease;
            position: relative;
        }

        .sidebar-tabs button.active {
            background: #555;
            box-shadow: inset -1px -1px 2px rgba(255,255,255,0.1), inset 1px 1px 2px rgba(0,0,0,0.3);
            border-radius: 4px 4px 0 0;
        }

        .sidebar-tabs button.active::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: currentColor;
        }

        .sidebar-tabs button:hover {
            /* Removed transform to fix popup positioning */
            /* transform: translateY(-1px); */
        }

        .sidebar-tabs button[data-tab="types"] {
            background: rgba(59, 130, 246, 0.15);
            color: #e0e0e0;
            border-left: 2px solid rgba(59, 130, 246, 0.4);
        }
        
        .sidebar-tabs button[data-tab="types"].active {
            background: rgba(59, 130, 246, 0.6);
            color: #ffffff;
            border-left: 2px solid rgba(59, 130, 246, 1);
        }
        
        .sidebar-tabs button[data-tab="focalLengths"] {
            background: rgba(147, 51, 234, 0.15);
            color: #e0e0e0;
            border-left: 2px solid rgba(147, 51, 234, 0.4);
        }
        
        .sidebar-tabs button[data-tab="focalLengths"].active {
            background: rgba(147, 51, 234, 0.6);
            color: #ffffff;
            border-left: 2px solid rgba(147, 51, 234, 1);
        }
        
        .sidebar-tabs button[data-tab="equipment"] {
            background: rgba(251, 146, 60, 0.15);
            color: #e0e0e0;
            border-left: 2px solid rgba(251, 146, 60, 0.4);
        }
        
        .sidebar-tabs button[data-tab="equipment"].active {
            background: rgba(251, 146, 60, 0.6);
            color: #ffffff;
            border-left: 2px solid rgba(251, 146, 60, 1);
        }
        
        .sidebar-tabs button[data-tab="angles"] {
            background: rgba(34, 197, 94, 0.15);
            color: #e0e0e0;
            border-left: 2px solid rgba(34, 197, 94, 0.4);
        }
        
        .sidebar-tabs button[data-tab="angles"].active {
            background: rgba(34, 197, 94, 0.6);
            color: #ffffff;
            border-left: 2px solid rgba(34, 197, 94, 1);
        }
        
        .sidebar-tabs button[data-tab="status"] {
            background: rgba(239, 68, 68, 0.15);
            color: #e0e0e0;
            border-left: 2px solid rgba(239, 68, 68, 0.4);
        }
        
        .sidebar-tabs button[data-tab="status"].active {
            background: rgba(239, 68, 68, 0.6);
            color: #ffffff;
            border-left: 2px solid rgba(239, 68, 68, 1);
        }

        .sidebar-tabs button[data-tab="locations"] {
            background: rgba(20, 184, 166, 0.15);
            color: #e0e0e0;
            border-left: 2px solid rgba(20, 184, 166, 0.4);
        }
        
        .sidebar-tabs button[data-tab="locations"].active {
            background: rgba(20, 184, 166, 0.6);
            color: #ffffff;
            border-left: 2px solid rgba(20, 184, 166, 1);
        }

        .sidebar-tabs button[data-tab="addresses"] {
            background: rgba(254, 240, 138, 0.15);
            color: #e0e0e0;
            border-left: 2px solid rgba(254, 240, 138, 0.4);
        }
        
        .sidebar-tabs button[data-tab="addresses"].active {
            background: rgba(254, 240, 138, 0.6);
            color: #ffffff;
            border-left: 2px solid rgba(254, 240, 138, 1);
        }

        .sidebar-tabs button[data-tab="contacts"] {
            background: rgba(147, 197, 253, 0.15);
            color: #e0e0e0;
            border-left: 2px solid rgba(147, 197, 253, 0.4);
        }

        .sidebar-tabs button[data-tab="contacts"].active {
            background: rgba(147, 197, 253, 0.6);
            color: #ffffff;
            border-left: 2px solid rgba(147, 197, 253, 1);
        }

        .sidebar-tabs button[data-tab="timeOfDay"] {
            background: rgba(236, 72, 153, 0.15);
            color: #e0e0e0;
            border-left: 2px solid rgba(236, 72, 153, 0.4);
        }
        
        .sidebar-tabs button[data-tab="timeOfDay"].active {
            background: rgba(236, 72, 153, 0.6);
            color: #ffffff;
            border-left: 2px solid rgba(236, 72, 153, 1);
        }
        
        /* FIX #2E: Tab Color - Change to cyan #06B6D4 for visual distinction */
        .sidebar-tabs button[data-tab="banners"] {
            background: rgba(6, 182, 212, 0.15);
            color: #e0e0e0;
            border-left: 2px solid rgba(6, 182, 212, 0.4);
        }
        
        .sidebar-tabs button[data-tab="banners"].active {
            background: rgba(6, 182, 212, 0.6);
            color: #ffffff;
            border-left: 2px solid rgba(6, 182, 212, 1);
        }

        .sidebar-resize-handle {
            position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
            width: 4px;
            background: transparent;
            cursor: ew-resize;
            z-index: 1001;
        }

        .sidebar-resize-handle:hover {
            background: #667eea;
        }

        /* ====== RIGHT SIDEBAR ====== */
        
        /* View row hover effects */
        .view-tab-row:hover {
            background: #3a3a3a !important;
        }
        
        .view-tab-row:hover .view-edit-btn {
            opacity: 1 !important;
        }
        
        .view-tab-row.active {
            background: rgba(0, 122, 255, 0.15) !important;
            border-left: 3px solid #007AFF;
        }
        
        .view-tab-row.active .view-edit-btn {
            opacity: 1 !important;
        }
        
        .right-sidebar {
            position: fixed;
            right: calc(-1 * var(--right-sidebar-width, 600px));
            top: 0;
            width: var(--right-sidebar-width, 600px);
            height: 100vh;
            background: #1f1f1f;
            border-left: 1px solid #444;
            transition: right 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), width 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            z-index: 1000;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            resize: horizontal;
            min-width: 200px;
            max-width: 700px;
        }


        .right-sidebar.open {
            right: 0;
        }

        /* Animation protection for conflicts tab */
        .right-sidebar.animating .right-sidebar-resize-handle {
            pointer-events: none;
        }

        /* Two-column layout for conflicts tab - High specificity to override general rule */
        .right-sidebar[data-tab="conflicts"] .conflicts-container {
            display: flex !important;
            gap: 16px;
            height: 100%;
            padding: 12px; /* Override the general padding rule */
        }

        .right-sidebar[data-tab="conflicts"] .conflicts-column {
            flex: 1;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        .right-sidebar[data-tab="conflicts"] .conflicts-column-header {
            padding: 12px 16px;
            font-weight: 600;
            font-size: 14px;
            border-bottom: 1px solid #444;
            background: #2a2a2a;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .right-sidebar[data-tab="conflicts"] .conflicts-column-content {
            flex: 1;
            overflow-y: auto;
            padding: 12px;
        }

        .right-sidebar[data-tab="conflicts"] .column-divider {
            width: 1px;
            background: #444;
            margin: 0 8px;
        }

        .right-sidebar[data-tab="conflicts"] .collapse-btn {
            background: none;
            border: none;
            color: #888;
            cursor: pointer;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
        }

        .right-sidebar[data-tab="conflicts"] .collapse-btn:hover {
            background: #444;
            color: #fff;
        }

        .right-sidebar-header {
            padding: 12px;
            font-weight: 600;
            letter-spacing: 0.5px;
            border-bottom: 1px solid #444;
            background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }

        .right-sidebar-header .sidebar-close-btn {
            position: absolute;
            left: 8px;
        }

        .dual-mode-btn {
            position: absolute;
            right: 8px;
            background: rgba(255, 193, 7, 0.15);
            border: 1px solid rgba(255, 193, 7, 0.4);
            color: #ffc107;
            font-size: 18px;
            width: 32px;
            height: 32px;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0;
        }

        .dual-mode-btn:hover {
            background: rgba(255, 193, 7, 0.25);
            border-color: rgba(255, 193, 7, 0.6);
            transform: scale(1.05);
        }

        .dual-mode-btn.active {
            background: rgba(255, 193, 7, 0.3);
            border-color: #ffc107;
            box-shadow: 0 0 12px rgba(255, 193, 7, 0.5);
            color: #ffeb3b;
        }

        .dual-mode-btn.active:hover {
            background: rgba(255, 193, 7, 0.4);
            transform: scale(1.05);
        }

        /* Scale Slider & Reset Button */
        #stripboard-scale-slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: #4ade80;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        #stripboard-scale-slider::-webkit-slider-thumb:hover {
            background: #22c55e;
            transform: scale(1.2);
        }

        #stripboard-scale-slider::-moz-range-thumb {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: #4ade80;
            cursor: pointer;
            border: none;
            transition: all 0.2s ease;
        }

        #stripboard-scale-slider::-moz-range-thumb:hover {
            background: #22c55e;
            transform: scale(1.2);
        }

        #scale-reset-btn:hover {
            background: rgba(255, 255, 255, 0.2);
            border-color: #888;
            color: #fff;
            transform: rotate(180deg);
        }

        .right-sidebar-tabs {
            display: flex;
            flex-wrap: wrap;
        }

        .right-sidebar-tabs button {
            flex: 1 1 auto;
            min-width: 0;
            padding: 8px;
            background: #333;
            border: none;
            color: #e0e0e0;
            cursor: pointer;
            font-size: 12px;
            border-right: 1px solid rgba(255,255,255,0.1);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            box-shadow: inset 1px 1px 2px rgba(255,255,255,0.1), inset -1px -1px 2px rgba(0,0,0,0.3);
            transition: all 0.2s ease;
            position: relative;
        }

        .right-sidebar-tabs button.active {
            background: #555;
            box-shadow: inset -1px -1px 2px rgba(255,255,255,0.1), inset 1px 1px 2px rgba(0,0,0,0.3);
            border-radius: 4px 4px 0 0;
        }

        .right-sidebar-tabs button.active::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: currentColor;
        }

        .right-sidebar-tabs button:hover {
            transform: translateY(-1px);
        }

        .right-sidebar-tabs button[data-tab="views"] {
            background: rgba(6, 182, 212, 0.15);
            color: #e0e0e0;
            border-left: 2px solid rgba(6, 182, 212, 0.4);
        }
        
        .right-sidebar-tabs button[data-tab="views"].active {
            background: rgba(6, 182, 212, 0.6);
            color: #ffffff;
            border-left: 2px solid rgba(6, 182, 212, 1);
        }

        .right-sidebar-tabs button[data-tab="scenes"] {
            background: rgba(59, 130, 246, 0.15);
            color: #e0e0e0;
            border-left: 2px solid rgba(59, 130, 246, 0.4);
        }
        
        .right-sidebar-tabs button[data-tab="scenes"].active {
            background: rgba(59, 130, 246, 0.6);
            color: #ffffff;
            border-left: 2px solid rgba(59, 130, 246, 1);
        }
        
        .right-sidebar-tabs button[data-tab="scenes"].inactive {
            opacity: 0.5;
            cursor: not-allowed;
        }

        .right-sidebar-tabs button[data-tab="graveyard"] {
            background: rgba(115, 115, 115, 0.15);
            color: #e0e0e0;
            border-left: 2px solid rgba(115, 115, 115, 0.4);
        }

        .right-sidebar-tabs button[data-tab="graveyard"].active {
            background: rgba(115, 115, 115, 0.6);
            color: #ffffff;
            border-left: 2px solid rgba(115, 115, 115, 1);
        }

        .right-sidebar-tabs button[data-tab="conflicts"] {
            background: rgba(220, 38, 38, 0.15);
            color: #e0e0e0;
            border-left: 2px solid rgba(220, 38, 38, 0.4);
        }

        .right-sidebar-tabs button[data-tab="conflicts"].active {
            background: rgba(220, 38, 38, 0.6);
            color: #ffffff;
            border-left: 2px solid rgba(220, 38, 38, 1);
        }

        .graveyard-container {
            padding: 16px;
        }

        .graveyard-header {
            margin-bottom: 16px;
            padding-bottom: 8px;
            border-bottom: 1px solid #444;
        }

        .graveyard-header h3 {
            margin-bottom: 4px;
            color: #ccc;
        }

        .graveyard-info {
            color: #888;
            font-size: 14px;
        }

        .graveyard-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            padding: 16px 12px;
            margin: 12px 0;
            background: #333;
            border-radius: 8px;
            border-left: 3px solid #666;
            min-height: 120px;
            justify-content: space-between;
        }

        .graveyard-view-info {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            width: 100%;
        }

        .graveyard-view-name {
            display: block;
            font-weight: bold;
            font-size: 16px;
            color: #ddd;
            margin-bottom: 8px;
        }

        .graveyard-view-scene-count {
            display: block;
            font-size: 14px;
            color: #aaa;
            margin-bottom: 8px;
        }

        .graveyard-view-date {
            display: block;
            font-size: 12px;
            color: #888;
            margin-bottom: 12px;
        }

        .graveyard-actions {
            display: flex;
            gap: 8px;
            width: 100%;
            justify-content: center;
        }

        .graveyard-actions button {
            padding: 8px 16px;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-weight: bold;
            font-size: 12px;
            line-height: 1.2;
            text-align: center;
            min-width: 80px;
            transition: all 0.2s ease;
        }

        .restore-btn {
            background: linear-gradient(135deg, #2e7d32 0%, #1b5e20 100%) !important;
            color: white !important;
            box-shadow: 
                inset 0 1px 0 rgba(255,255,255,0.15),
                inset 0 -1px 0 rgba(0,0,0,0.2),
                0 2px 4px rgba(0,0,0,0.3),
                0 1px 2px rgba(0,0,0,0.4) !important;
            border-bottom: 2px solid #0d4f14 !important;
            border-top: 1px solid rgba(255,255,255,0.1) !important;
        }

        .restore-btn:hover {
            background: linear-gradient(135deg, #1b5e20 0%, #0d4f14 100%) !important;
            transform: translateY(-1px);
            box-shadow: 
                inset 0 1px 0 rgba(255,255,255,0.2),
                inset 0 -1px 0 rgba(0,0,0,0.3),
                0 4px 8px rgba(0,0,0,0.4),
                0 2px 4px rgba(0,0,0,0.5) !important;
        }

        .delete-permanently-btn {
            background: linear-gradient(135deg, #a91b3d 0%, #8b1538 100%) !important;
            color: white !important;
            box-shadow: 
                inset 0 1px 0 rgba(255,255,255,0.15),
                inset 0 -1px 0 rgba(0,0,0,0.2),
                0 2px 4px rgba(0,0,0,0.3),
                0 1px 2px rgba(0,0,0,0.4) !important;
            border-bottom: 2px solid #6d0e2a !important;
            border-top: 1px solid rgba(255,255,255,0.1) !important;
        }

        .delete-permanently-btn:hover {
            background: linear-gradient(135deg, #8b1538 0%, #6d0e2a 100%) !important;
            transform: translateY(-1px);
            box-shadow: 
                inset 0 1px 0 rgba(255,255,255,0.2),
                inset 0 -1px 0 rgba(0,0,0,0.3),
                0 4px 8px rgba(0,0,0,0.4),
                0 2px 4px rgba(0,0,0,0.5) !important;
        }

        /* ====== CONFLICTS TAB STYLES ====== */
        .conflicts-container {
            padding: 16px;
        }

        /* Column visibility control panel */
        .conflicts-column-controls {
            padding: 12px 16px !important;
            background: #2a2a2a !important;
            border-bottom: 1px solid #444 !important;
            display: flex !important;
            align-items: center !important;
            gap: 16px !important;
        }

        .conflicts-column-controls label {
            display: flex !important;
            align-items: center !important;
            gap: 6px !important;
            cursor: pointer !important;
            color: #e0e0e0 !important;
            font-size: 13px !important;
        }

        .conflicts-column-controls input[type="checkbox"] {
            cursor: pointer !important;
        }

        .conflicts-column-controls input[type="checkbox"]:disabled {
            cursor: not-allowed !important;
            opacity: 0.5 !important;
        }

        /* FULL VERTICAL: 3-column layout for conflicts tab - using flexbox for dynamic resizing */
        .conflicts-container {
            display: flex !important;
            height: calc(100% - 45px) !important;
            padding: 0 !important;
        }

        .left-column,
        .middle-column,
        .right-column,
        .conflict-log-column {
            display: flex !important;
            flex-direction: column !important;
            overflow: hidden !important;
            background: transparent !important;
            min-width: 150px !important;
        }

        .left-column {
            flex: var(--castIssues-flex, 1) !important;
        }

        .middle-column {
            flex: var(--doubleBooked-flex, 1) !important;
        }

        .right-column {
            flex: var(--unscheduled-flex, 1) !important;
        }

        .conflict-log-column {
            flex: var(--conflictLog-flex, 1) !important;
        }

        /* Conflict Log DaVinci Resolve styling */
        .undock-btn:hover {
            background: rgba(245, 158, 11, 0.2) !important;
            border-color: rgba(245, 158, 11, 0.5) !important;
            box-shadow: 0 0 8px rgba(245, 158, 11, 0.3);
            transform: scale(1.05);
        }

        .log-entry.active {
            animation: pulse 2s ease-in-out infinite;
        }

        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.85; }
        }

        .conflict-log-content::-webkit-scrollbar {
            width: 8px;
        }

        .conflict-log-content::-webkit-scrollbar-track {
            background: #0a0a0a;
        }

        .conflict-log-content::-webkit-scrollbar-thumb {
            background: #f59e0b;
            border-radius: 4px;
        }

        .conflict-log-content::-webkit-scrollbar-thumb:hover {
            background: #fb923c;
        }

        /* Floating Conflict Log Window */
        #floating-conflict-log {
            position: fixed;
            background: linear-gradient(135deg, #1a1a1a 0%, #222 100%);
            border: 2px solid rgba(245, 158, 11, 0.5);
            border-radius: 8px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 20px rgba(245, 158, 11, 0.2);
            z-index: 10000;
            display: none;
            min-width: 300px;
            min-height: 250px;
        }

        #floating-conflict-log.visible {
            display: flex;
            flex-direction: column;
        }

        .floating-log-header {
            background: linear-gradient(135deg, #1e1e1e 0%, #2a2a2a 100%);
            border-bottom: 2px solid #f59e0b;
            padding: 12px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            cursor: move;
            user-select: none;
            border-radius: 6px 6px 0 0;
        }

        .floating-log-content {
            flex: 1;
            overflow-y: auto;
            padding: 12px;
            background: #1a1a1a;
        }

        .floating-log-footer {
            padding: 10px;
            background: #1e1e1e;
            border-top: 1px solid #333;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-radius: 0 0 6px 6px;
        }

        .floating-resize-handle {
            position: absolute;
            bottom: 0;
            right: 0;
            width: 20px;
            height: 20px;
            cursor: nwse-resize;
            background: linear-gradient(135deg, transparent 0%, transparent 50%, #f59e0b 50%, #f59e0b 100%);
            border-radius: 0 0 6px 0;
        }

        /* Script Sidebar Styles */
        .script-sidebar {
            position: fixed;
            right: 0;
            top: 0;
            height: 100vh;
            width: 50%;
            min-width: 500px;
            max-width: 100%;
            background: linear-gradient(135deg, #1a1a1a 0%, #222 100%);
            border-left: 2px solid rgba(245, 158, 11, 0.3);
            box-shadow: -4px 0 32px rgba(0, 0, 0, 0.5);
            z-index: 10001;
            transform: translateX(100%);
            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            display: flex;
            flex-direction: column;
        }

        .script-sidebar.open {
            transform: translateX(0);
        }

        .script-sidebar-resize-handle {
            position: absolute;
            left: 0;
            top: 0;
            width: 6px;
            height: 100%;
            cursor: col-resize;
            background: rgba(245, 158, 11, 0.2);
            transition: background 0.2s ease;
            z-index: 10;
        }

        .script-sidebar-resize-handle:hover {
            background: rgba(245, 158, 11, 0.4);
        }

        .script-sidebar-header {
            padding: 12px;
            background: linear-gradient(135deg, #1e1e1e 0%, #2a2a2a 100%);
            border-bottom: 2px solid rgba(245, 158, 11, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }

        .script-sidebar-header .sidebar-close-btn {
            position: absolute;
            left: 8px;
        }

        .script-sidebar-header .script-controls {
            position: absolute;
            right: 12px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .manage-drafts-btn {
            background: linear-gradient(135deg, rgba(245, 158, 11, 0.18) 0%, rgba(245, 158, 11, 0.12) 100%);
            border: 1px solid rgba(245, 158, 11, 0.4);
            color: #f59e0b;
            padding: 6px 14px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 12px;
            font-weight: 600;
            letter-spacing: 0.3px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.1);
            transition: all 0.15s ease;
        }

        .manage-drafts-btn:hover {
            background: linear-gradient(135deg, rgba(245, 158, 11, 0.25) 0%, rgba(245, 158, 11, 0.18) 100%);
            border-color: rgba(245, 158, 11, 0.6);
            box-shadow: 0 3px 8px rgba(245, 158, 11, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.15);
            transform: translateY(-1px);
        }

        .manage-drafts-btn:active {
            transform: translateY(1px);
            box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4), inset 0 1px 2px rgba(0, 0, 0, 0.3);
            background: linear-gradient(135deg, rgba(245, 158, 11, 0.12) 0%, rgba(245, 158, 11, 0.08) 100%);
        }

        .script-manage-section {
            background: rgba(0, 0, 0, 0.2);
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        }

        .script-manage-header {
            padding: 12px 20px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: space-between;
            transition: background 0.2s ease;
        }

        .script-manage-header:hover {
            background: rgba(255, 255, 255, 0.02);
        }

        .script-manage-content {
            padding: 12px 20px;
            border-top: 1px solid rgba(255, 255, 255, 0.05);
        }

        .script-viewer-content {
            flex: 1;
            overflow-y: auto;
            background: #1a1a1a;
        }

        .script-viewer-content.light {
            background: #ffffff;
        }

        .script-empty-state {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
        }

        #scriptPDFViewer {
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .pdf-page-wrapper {
            margin: 0 auto 20px auto;
        }

        /* PDF Canvas styling for light mode inversion */
        #pdfCanvasContainer canvas {
            transition: filter 0.3s ease;
        }

        /* Light mode: invert the canvas to turn black text white and white background black */
        .script-viewer-content.light #pdfCanvasContainer canvas {
            filter: invert(1);
        }

        /* Draft Item Styles */
        .draft-item {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 6px;
            padding: 12px;
            display: flex;
            align-items: center;
            gap: 10px;
            transition: all 0.2s ease;
        }

        .draft-item:hover {
            background: rgba(255, 255, 255, 0.05);
            border-color: rgba(245, 158, 11, 0.3);
        }

        .draft-item.deleting {
            background: rgba(239, 68, 68, 0.1);
            border-color: rgba(239, 68, 68, 0.4);
        }

        .draft-item-name {
            flex: 1;
            font-size: 13px;
            color: #fff;
            font-weight: 500;
        }

        .draft-item-actions {
            display: flex;
            gap: 6px;
        }

        .draft-item-btn {
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            color: #aaa;
            padding: 4px 8px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 11px;
            transition: all 0.2s ease;
        }

        .draft-item-btn:hover {
            background: rgba(255, 255, 255, 0.1);
            color: #fff;
        }

        .draft-item-btn.delete {
            color: #ef4444;
            border-color: rgba(239, 68, 68, 0.3);
        }

        .draft-item-btn.delete:hover {
            background: rgba(239, 68, 68, 0.15);
        }

        .draft-item-btn.confirm {
            color: #22c55e;
            border-color: rgba(34, 197, 94, 0.3);
        }

        .draft-item-btn.confirm:hover {
            background: rgba(34, 197, 94, 0.15);
        }

        /* Manage Drafts Modal Styles */
        .manage-drafts-modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.7);
            z-index: 10002; /* Higher than Script Sidebar */
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .manage-drafts-modal {
            position: absolute;
            width: 600px;
            height: 400px;
            min-width: 400px;
            min-height: 300px;
            background: linear-gradient(135deg, #1e1e1e 0%, #2a2a2a 100%);
            border: 2px solid rgba(245, 158, 11, 0.4);
            border-radius: 8px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        .manage-drafts-modal-header {
            background: linear-gradient(135deg, #252525 0%, #2f2f2f 100%);
            border-bottom: 2px solid rgba(245, 158, 11, 0.5);
            padding: 12px 16px;
            cursor: move;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            user-select: none;
        }

        .modal-close-btn {
            position: absolute;
            left: 8px;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            color: #fff;
            width: 28px;
            height: 28px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 20px;
            line-height: 1;
            transition: all 0.2s ease;
        }

        .modal-close-btn:hover {
            background: rgba(239, 68, 68, 0.2);
            border-color: rgba(239, 68, 68, 0.4);
            color: #ef4444;
        }

        .modal-title {
            font-size: 14px;
            font-weight: 700;
            color: #f0f0f0;
        }

        .manage-drafts-tabs {
            display: flex;
            background: rgba(0, 0, 0, 0.2);
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        .manage-drafts-tab {
            flex: 1;
            padding: 10px 16px;
            background: transparent;
            border: none;
            border-bottom: 2px solid transparent;
            color: #888;
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .manage-drafts-tab:hover {
            background: rgba(255, 255, 255, 0.03);
            color: #aaa;
        }

        .manage-drafts-tab.active {
            color: #f59e0b;
            border-bottom-color: #f59e0b;
            background: rgba(245, 158, 11, 0.05);
        }

        .manage-drafts-tab-content {
            display: none;
            flex: 1;
            flex-direction: column;
            overflow: hidden;
        }

        .manage-drafts-tab-content.active {
            display: flex;
        }

        .add-draft-btn {
            margin: 12px 16px;
            padding: 10px 16px;
            background: linear-gradient(135deg, rgba(245, 158, 11, 0.18) 0%, rgba(245, 158, 11, 0.12) 100%);
            border: 1px solid rgba(245, 158, 11, 0.4);
            border-radius: 6px;
            color: #f59e0b;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
        }

        .add-draft-btn:hover {
            background: linear-gradient(135deg, rgba(245, 158, 11, 0.25) 0%, rgba(245, 158, 11, 0.18) 100%);
            border-color: rgba(245, 158, 11, 0.6);
            box-shadow: 0 3px 8px rgba(245, 158, 11, 0.3);
            transform: translateY(-1px);
        }

        .add-draft-btn:active {
            transform: translateY(1px);
            box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);
        }

        .drafts-list {
            flex: 1;
            overflow-y: auto;
            padding: 0 16px 16px 16px;
        }

        /* Dark scrollbar for modal */
        .drafts-list::-webkit-scrollbar {
            width: 10px;
        }

        .drafts-list::-webkit-scrollbar-track {
            background: rgba(0, 0, 0, 0.3);
        }

        .drafts-list::-webkit-scrollbar-thumb {
            background: rgba(245, 158, 11, 0.3);
            border-radius: 5px;
        }

        .drafts-list::-webkit-scrollbar-thumb:hover {
            background: rgba(245, 158, 11, 0.5);
        }

        .drafts-empty-state {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
        }

        .manage-drafts-resize-handle {
            position: absolute;
            bottom: 0;
            right: 0;
            width: 16px;
            height: 16px;
            cursor: nwse-resize;
            background: linear-gradient(135deg, transparent 0%, transparent 50%, rgba(245, 158, 11, 0.4) 50%, rgba(245, 158, 11, 0.4) 100%);
            border-bottom-right-radius: 6px;
        }

        .manage-drafts-resize-handle:hover {
            background: linear-gradient(135deg, transparent 0%, transparent 50%, rgba(245, 158, 11, 0.6) 50%, rgba(245, 158, 11, 0.6) 100%);
        }

        /* Manage Quick Filters Modal Styles */
        .manage-quick-filters-modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.7);
            z-index: 10004;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .manage-quick-filters-modal {
            position: absolute;
            width: 650px;
            height: 500px;
            min-width: 450px;
            min-height: 350px;
            background: linear-gradient(135deg, #1e1e1e 0%, #2a2a2a 100%);
            border: 2px solid rgba(59, 130, 246, 0.4);
            border-radius: 8px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        .manage-quick-filters-modal-header {
            background: linear-gradient(135deg, #252525 0%, #2f2f2f 100%);
            border-bottom: 2px solid rgba(59, 130, 246, 0.5);
            padding: 12px 16px;
            cursor: move;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            user-select: none;
        }

        .manage-quick-filters-modal-content {
            display: flex;
            flex-direction: column;
            flex: 1;
            overflow: hidden;
        }

        .add-category-btn {
            margin: 12px 16px;
            padding: 10px 16px;
            background: linear-gradient(135deg, rgba(59, 130, 246, 0.18) 0%, rgba(59, 130, 246, 0.12) 100%);
            border: 1px solid rgba(59, 130, 246, 0.4);
            border-radius: 6px;
            color: #3b82f6;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
        }

        .add-category-btn:hover {
            background: linear-gradient(135deg, rgba(59, 130, 246, 0.25) 0%, rgba(59, 130, 246, 0.18) 100%);
            border-color: rgba(59, 130, 246, 0.6);
            box-shadow: 0 3px 8px rgba(59, 130, 246, 0.3);
            transform: translateY(-1px);
        }

        .add-category-btn:active {
            transform: translateY(1px);
            box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);
        }

        .filters-list {
            flex: 1;
            overflow-y: auto;
            padding: 0 16px 16px 16px;
        }

        .filters-list::-webkit-scrollbar {
            width: 10px;
        }

        .filters-list::-webkit-scrollbar-track {
            background: rgba(0, 0, 0, 0.3);
        }

        .filters-list::-webkit-scrollbar-thumb {
            background: #444;
            border-radius: 5px;
        }

        .filters-list::-webkit-scrollbar-thumb:hover {
            background: #555;
        }

        .category-item {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 6px;
            margin-bottom: 8px;
            overflow: hidden;
        }

        .category-header {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 10px 12px;
            background: rgba(0, 0, 0, 0.2);
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        .category-expand-btn {
            background: transparent;
            border: none;
            color: #aaa;
            cursor: pointer;
            font-size: 14px;
            padding: 0;
            width: 20px;
            text-align: center;
        }

        .category-expand-btn:hover {
            color: #fff;
        }

        .category-name {
            flex: 1;
            color: #fff;
            font-size: 13px;
            font-weight: 600;
        }

        .category-name input {
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 4px;
            color: #fff;
            padding: 4px 8px;
            font-size: 13px;
            font-weight: 600;
            width: 100%;
        }

        .category-actions {
            display: flex;
            gap: 4px;
        }

        .reorder-btn {
            background: #333;
            border: 1px solid #555;
            color: #e0e0e0;
            padding: 4px 6px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 12px;
            line-height: 1;
            transition: all 0.15s ease;
            min-width: 18px;
            text-align: center;
        }

        .reorder-btn:hover {
            background: #444;
            border-color: #666;
        }

        .reorder-btn:disabled {
            opacity: 0.3;
            cursor: not-allowed;
        }

        .delete-btn {
            background: rgba(239, 68, 68, 0.1);
            border: 1px solid rgba(239, 68, 68, 0.3);
            color: #ef4444;
            padding: 4px 8px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 11px;
            font-weight: 600;
            transition: all 0.15s ease;
        }

        .delete-btn:hover {
            background: rgba(239, 68, 68, 0.2);
            border-color: rgba(239, 68, 68, 0.5);
        }

        .category-buttons {
            padding: 8px 12px 8px 32px;
            display: none;
        }

        .category-item.expanded .category-buttons {
            display: block;
        }

        .category-item.expanded .category-expand-btn {
            transform: rotate(90deg);
        }

        .filter-button-item {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px;
            background: rgba(255, 255, 255, 0.02);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 4px;
            margin-bottom: 6px;
        }

        .filter-button-item:hover {
            background: rgba(255, 255, 255, 0.04);
            border-color: rgba(255, 255, 255, 0.12);
        }

        .filter-button-label {
            flex: 1;
            color: #e0e0e0;
            font-size: 12px;
        }

        .filter-button-label input {
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 4px;
            color: #fff;
            padding: 4px 8px;
            font-size: 12px;
            width: 100%;
        }

        .filter-button-query {
            color: #888;
            font-size: 11px;
            font-style: italic;
        }

        .filter-button-actions {
            display: flex;
            gap: 4px;
        }

        .edit-btn {
            background: rgba(59, 130, 246, 0.1);
            border: 1px solid rgba(59, 130, 246, 0.3);
            color: #3b82f6;
            padding: 4px 8px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 11px;
            font-weight: 600;
            transition: all 0.15s ease;
        }

        .edit-btn:hover {
            background: rgba(59, 130, 246, 0.2);
            border-color: rgba(59, 130, 246, 0.5);
        }

        .add-button-btn {
            width: 100%;
            padding: 8px;
            background: rgba(59, 130, 246, 0.08);
            border: 1px dashed rgba(59, 130, 246, 0.3);
            border-radius: 4px;
            color: #3b82f6;
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
            margin-top: 4px;
        }

        .add-button-btn:hover {
            background: rgba(59, 130, 246, 0.12);
            border-color: rgba(59, 130, 246, 0.5);
        }

        .manage-quick-filters-resize-handle {
            position: absolute;
            bottom: 0;
            right: 0;
            width: 20px;
            height: 20px;
            cursor: nwse-resize;
            background: linear-gradient(135deg, transparent 0%, transparent 50%, rgba(59, 130, 246, 0.3) 50%, rgba(59, 130, 246, 0.3) 100%);
        }

        .manage-quick-filters-resize-handle:hover {
            background: linear-gradient(135deg, transparent 0%, transparent 50%, rgba(59, 130, 246, 0.6) 50%, rgba(59, 130, 246, 0.6) 100%);
        }

        .filters-empty-state {
            text-align: center;
            padding: 40px 20px;
            color: #888;
        }

        .filters-empty-state div:first-child {
            font-size: 36px;
            margin-bottom: 12px;
        }

        .filters-empty-state div:last-child {
            font-size: 14px;
        }

        /* Upload Draft Modal Styles */
        .upload-draft-modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.8);
            z-index: 10003; /* Higher than Manage Drafts Modal */
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .upload-draft-modal {
            width: 500px;
            background: linear-gradient(135deg, #1e1e1e 0%, #2a2a2a 100%);
            border: 2px solid rgba(245, 158, 11, 0.4);
            border-radius: 8px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
            overflow: hidden;
        }

        .upload-draft-modal-header {
            background: linear-gradient(135deg, #252525 0%, #2f2f2f 100%);
            border-bottom: 2px solid rgba(245, 158, 11, 0.5);
            padding: 12px 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }

        .upload-draft-modal-content {
            padding: 24px;
        }

        .select-file-btn {
            width: 100%;
            padding: 14px 20px;
            background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(245, 158, 11, 0.08) 100%);
            border: 2px dashed rgba(245, 158, 11, 0.4);
            border-radius: 8px;
            color: #f59e0b;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .select-file-btn:hover {
            background: linear-gradient(135deg, rgba(245, 158, 11, 0.22) 0%, rgba(245, 158, 11, 0.15) 100%);
            border-color: rgba(245, 158, 11, 0.6);
            transform: translateY(-1px);
        }

        .select-file-btn:active {
            transform: translateY(0);
        }

        .upload-actions {
            display: flex;
            gap: 12px;
            margin-top: 24px;
            justify-content: flex-end;
        }

        .upload-cancel-btn {
            padding: 10px 20px;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 6px;
            color: #aaa;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .upload-cancel-btn:hover {
            background: rgba(255, 255, 255, 0.1);
            color: #fff;
        }

        .upload-confirm-btn {
            padding: 10px 24px;
            background: linear-gradient(135deg, rgba(245, 158, 11, 0.18) 0%, rgba(245, 158, 11, 0.12) 100%);
            border: 1px solid rgba(245, 158, 11, 0.4);
            border-radius: 6px;
            color: #f59e0b;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
        }

        .upload-confirm-btn:hover:not(:disabled) {
            background: linear-gradient(135deg, rgba(245, 158, 11, 0.25) 0%, rgba(245, 158, 11, 0.18) 100%);
            border-color: rgba(245, 158, 11, 0.6);
            box-shadow: 0 3px 8px rgba(245, 158, 11, 0.3);
            transform: translateY(-1px);
        }

        .upload-confirm-btn:active:not(:disabled) {
            transform: translateY(1px);
            box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);
        }

        .upload-confirm-btn:disabled {
            opacity: 0.4;
            cursor: not-allowed;
        }

        /* During drag, use pixel widths instead of flex */
        .left-column.dragging-width,
        .middle-column.dragging-width,
        .right-column.dragging-width,
        .conflict-log-column.dragging-width {
            flex: none !important;
        }

        .column-divider {
            background: #444 !important;
            width: 5px !important;
            cursor: col-resize !important;
            position: relative !important;
            flex-shrink: 0 !important;
            transition: background 0.2s ease !important;
        }

        .column-divider:hover {
            background: #007AFF !important;
        }

        .column-divider.dragging {
            background: #007AFF !important;
        }

        .column-header {
            padding: 12px 16px !important;
            font-weight: 600 !important;
            font-size: 14px !important;
            border-bottom: 1px solid #444 !important;
            background: #2a2a2a !important;
            display: flex !important;
            justify-content: space-between !important;
            align-items: center !important;
        }

        .column-content {
            flex: 1 !important;
            overflow-y: auto !important;
            padding: 16px !important;
            background: #1a1a1a !important;
        }

        .collapse-btn {
            background: none !important;
            border: none !important;
            color: #888 !important;
            cursor: pointer !important;
            padding: 4px 8px !important;
            border-radius: 4px !important;
            font-size: 12px !important;
        }

        .collapse-btn:hover {
            background: #555 !important;
            color: #fff !important;
        }

        /* Collapsed column styles - completely hide */
        .left-column.collapsed,
        .middle-column.collapsed,
        .right-column.collapsed {
            display: none !important;
        }

        /* Hide divider next to collapsed column */
        .left-column.collapsed + .column-divider,
        .middle-column.collapsed + .column-divider {
            display: none !important;
        }

        /* Show expand buttons in remaining visible columns */
        .column-header .expand-collapsed-btn {
            background: #444 !important;
            border: none !important;
            color: #aaa !important;
            cursor: pointer !important;
            padding: 4px 8px !important;
            border-radius: 4px !important;
            font-size: 11px !important;
            margin-left: 8px !important;
        }

        .column-header .expand-collapsed-btn:hover {
            background: #555 !important;
            color: #fff !important;
        }

        /* Column resize handles */
        .column-resize-handle {
            position: relative;
            cursor: col-resize;
            width: 8px;
            margin: 0 -4px;
            background: transparent;
            z-index: 10;
            transition: background 0.2s;
        }

        .column-resize-handle:hover {
            background: #666;
        }

        .column-resize-handle.resizing {
            background: #888;
        }

        /* SCENES TAB: Control panel and two-column layout (Conflicts pattern) */
        .scenes-column-controls {
            padding: 6px 12px !important;
            background: #2a2a2a !important;
            border-bottom: 1px solid #444 !important;
            display: flex !important;
            align-items: center !important;
            gap: 10px !important;
            font-size: 13px !important;
        }

        .scenes-column-controls label {
            display: flex !important;
            align-items: center !important;
            gap: 4px !important;
            cursor: pointer !important;
            color: #fff !important;
            font-size: 13px !important;
        }

        .scenes-column-controls span {
            font-size: 12px !important;
        }

        .scenes-column-controls button {
            font-size: 11px !important;
            padding: 3px 10px !important;
        }

        .scenes-container {
            display: flex !important;
            height: calc(100% - 30px) !important;
            padding: 0 !important;
        }

        .scenes-left-column,
        .scenes-right-column {
            display: flex !important;
            flex-direction: column !important;
            overflow: hidden !important;
            background: transparent !important;
            min-width: 150px !important;
        }

        .scenes-left-column {
            flex: var(--quickFilters-flex, 1) !important;
        }

        .scenes-right-column {
            flex: var(--sceneList-flex, 1) !important;
        }

        .scenes-left-column.dragging-width,
        .scenes-right-column.dragging-width {
            flex: none !important;
        }

        .scenes-column-divider {
            background: #444 !important;
            width: 5px !important;
            cursor: col-resize !important;
            flex-shrink: 0 !important;
            transition: background 0.2s ease !important;
        }

        .scenes-column-divider:hover {
            background: #007AFF !important;
        }

        .scenes-column-divider.dragging {
            background: #007AFF !important;
        }

        .scenes-column-header {
            padding: 12px 16px !important;
            font-weight: 600 !important;
            font-size: 14px !important;
            border-bottom: 1px solid #444 !important;
            background: #2a2a2a !important;
            display: flex !important;
            justify-content: space-between !important;
            align-items: center !important;
        }

        .scenes-column-content {
            flex: 1 !important;
            overflow-y: auto !important;
            padding: 16px !important;
            background: #1a1a1a !important;
        }

        .conflicts-header {
            margin-bottom: 20px;
        }

        .conflicts-header h3 {
            margin: 0 0 8px 0;
            color: #ef4444;
            font-size: 16px;
        }

        .conflicts-info {
            margin: 0;
            color: #aaa;
            font-size: 12px;
        }

        .no-conflicts {
            text-align: center;
            padding: 40px 20px;
            color: #aaa;
        }

        .no-conflicts p:first-child {
            color: #10b981;
            font-size: 14px;
            margin-bottom: 8px;
        }

        .conflicts-help {
            font-size: 11px;
            color: #666;
        }

        .conflicts-list {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        .conflict-item {
            background: #2a2a2a;
            border: 1px solid #444;
            border-left: 4px solid #ef4444;
            border-radius: 6px;
            padding: 12px;
        }

        .conflict-scene {
            margin-bottom: 8px;
            color: #e0e0e0;
            font-size: 13px;
        }

        .conflict-days {
            margin-bottom: 12px;
            color: #aaa;
            font-size: 11px;
        }

        .conflict-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
        }

        .remove-from-day-btn {
            padding: 4px 8px;
            background: #dc2626;
            border: none;
            border-radius: 3px;
            color: white;
            font-size: 10px;
            cursor: pointer;
            transition: background 0.2s ease;
        }

        .remove-from-day-btn:hover {
            background: #b91c1c;
        }

        .right-sidebar-resize-handle {
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 4px;
            background: transparent;
            cursor: ew-resize;
            z-index: 1001;
        }

        .right-sidebar-resize-handle:hover {
            background: #667eea;
        }

        /* ====== BOTTOM SIDEBAR ====== */
        .bottom-sidebar {
            position: fixed;
            bottom: calc(-1 * var(--bottom-sidebar-height, 300px));
            left: 0;
            width: 100%;
            height: var(--bottom-sidebar-height, 300px);
            background: #1a1a1a;
            border-top: 1px solid #444;
            z-index: 999;
            transition: bottom 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            display: flex;
            flex-direction: column;
            min-height: 150px;
            max-height: 80vh;
        }

        .bottom-sidebar.open {
            bottom: 0;
        }

        body.bottom-sidebar-open .main-content {
            height: calc(100vh - var(--bottom-sidebar-height, 300px));
            transition: height 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

        .bottom-sidebar-resize-handle {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 5px;
            background: #444;
            cursor: ns-resize;
            z-index: 1001;
            transition: background 0.2s ease;
        }

        .bottom-sidebar-resize-handle:hover {
            background: #667eea;
        }

        .bottom-sidebar-header {
            padding: 12px;
            font-weight: 600;
            letter-spacing: 0.5px;
            border-bottom: 1px solid #444;
            background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }

        .bottom-sidebar-header .sidebar-close-btn {
            position: absolute;
            right: 8px;
        }

        .bottom-sidebar-tabs {
            display: flex;
            flex-wrap: wrap;
            border-bottom: 1px solid #444;
            background: #1a1a1a;
        }

        .bottom-sidebar-tabs button {
            flex: 1 1 auto;
            min-width: 80px;
            padding: 10px 15px;
            border: none;
            background: #2a2a2a;
            color: #ccc;
            cursor: pointer;
            font-size: 12px;
            font-weight: 500;
            text-align: center;
            border-bottom: 2px solid transparent;
            transition: all 0.2s ease;
            position: relative;
        }

        .bottom-sidebar-tabs button.active {
            background: #555;
            box-shadow: inset -1px -1px 2px rgba(255,255,255,0.1), inset 1px 1px 2px rgba(0,0,0,0.3);
            border-radius: 4px 4px 0 0;
        }

        .bottom-sidebar-tabs button:hover {
            transform: translateY(-1px);
        }

        .bottom-sidebar-content {
            flex: 1;
            overflow-y: auto;
            padding: 16px;
            background: #1a1a1a;
        }

        /* ====== SCREENING ROOM SIDEBAR ====== */
        .screening-sidebar {
            position: fixed;
            left: calc(-1 * var(--screening-sidebar-width, 350px));
            top: 0;
            width: var(--screening-sidebar-width, 350px);
            height: 100vh;
            background: #1f1f1f;
            border-right: 1px solid #444;
            transition: left 0.3s ease;
            z-index: 1000;
            display: flex;
            flex-direction: column;
            overflow-y: auto;
            min-width: 200px;
            max-width: 800px;
        }

        .screening-sidebar.open {
            left: 0;
        }

        .screening-sidebar-resize-handle {
            position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
            width: 4px;
            background: transparent;
            cursor: ew-resize;
            z-index: 1001;
        }

        .screening-sidebar-resize-handle:hover {
            background: #667eea;
        }

        .right-sidebar-content {
            display: flex;
            flex-direction: column;
            overflow: hidden;
            padding: 10px;
            width: 100% !important;
            box-sizing: border-box !important;
        }

        /* Force layout reset for each container type */
        .right-sidebar-content > * {
            width: 100% !important;
            box-sizing: border-box !important;
        }

        /* ====== VIEWS TAB STYLES ====== */
        .views-container {
            display: flex;
            flex-direction: column;
            flex: 1 1 auto;
            min-height: 0;
            overflow-y: auto;
            gap: 15px;
        }

        .view-tabs {
            display: flex;
            flex-direction: column;
            gap: 5px;
        }

        .view-tab-row {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .view-checkbox {
            flex-shrink: 0;
            width: 16px;
            height: 16px;
        }

        .view-checkbox:disabled {
            opacity: 0.5;
        }

        .view-tab {
            flex: 1;
            padding: 8px 12px;
            background: #333;
            border: none;
            color: #e0e0e0;
            cursor: pointer;
            border-radius: 4px;
            transition: all 0.2s ease;
            border-left: 3px solid transparent;
        }

        .view-tab:hover {
            background: #444;
            transform: translateX(2px);
        }

        .view-tab.active {
            background: rgba(255, 255, 255, 0.15);
            color: #ffffff;
            border-left: 3px solid rgba(255, 255, 255, 0.8);
            font-weight: 600;
            box-shadow: 0 0 8px rgba(255, 255, 255, 0.2);
        }

        .add-view-btn {
            padding: 8px 12px;
            background: rgba(34, 197, 94, 0.2);
            border: 2px dashed rgba(34, 197, 94, 0.5);
            color: #22c55e;
            cursor: pointer;
            border-radius: 4px;
            transition: all 0.2s ease;
            text-align: center;
            font-weight: 500;
        }

        .add-view-btn:hover {
            background: rgba(34, 197, 94, 0.3);
            border-color: rgba(34, 197, 94, 0.8);
            transform: scale(1.02);
        }

        .current-view-info {
            background: #2a2a2a;
            padding: 12px;
            border-radius: 6px;
            border: 1px solid #444;
        }

        .current-view-info h3 {
            margin: 0 0 8px 0;
            color: #ffffff;
            font-size: 14px;
        }

        .current-view-info p {
            margin: 0;
            color: #aaa;
            font-size: 12px;
        }

        /* ====== SCENES TAB STYLES ====== */
        /* REMOVED - Using new two-column layout defined earlier */

        .scenes-header {
            background: #2a2a2a;
            padding: 12px;
            border-radius: 6px;
            border: 1px solid #444;
        }

        .scenes-header h3 {
            margin: 0 0 8px 0;
            color: #ffffff;
            font-size: 14px;
        }

        .scene-info {
            margin: 4px 0;
            color: #aaa;
            font-size: 12px;
        }

        .scene-info.inactive {
            color: #666;
            font-style: italic;
        }
        
        .scene-instruction {
            margin: 6px 0;
            color: #888;
            font-size: 11px;
            font-style: italic;
        }
        
        /* Quick filter buttons */
        .quick-filters {
            margin: 12px 0;
            padding: 8px 0;
            border-top: 1px solid #444;
        }
        
        .filter-group {
            display: inline-block;
            margin-right: 20px;
            margin-bottom: 8px;
        }
        
        .filter-btn {
            background: #333;
            border: 1px solid #555;
            color: #ccc;
            padding: 4px 12px;
            margin-right: 4px;
            border-radius: 4px;
            font-size: 11px;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        
        .filter-btn:hover {
            background: #444;
            border-color: #666;
        }
        
        .filter-btn.active {
            background: #2d83ff;
            border-color: #2d83ff;
            color: #ffffff;
        }
        
        .filter-group-label {
            color: #aaa;
            font-size: 10px;
            margin-right: 6px;
            font-weight: bold;
        }

        .collapsible-label {
            cursor: pointer;
            user-select: none;
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }

        .collapsible-label:hover {
            color: #3b82f6;
        }

        .collapse-arrow {
            display: inline-block;
            font-size: 9px;
            transition: transform 0.2s ease;
        }

        .custom-filter-category.collapsed .collapse-arrow {
            transform: rotate(0deg);
        }

        .custom-filter-category:not(.collapsed) .collapse-arrow {
            transform: rotate(0deg);
        }
        
        .filter-section-divider {
            border-top: 1px dotted #555;
            margin: 6px 0;
        }
        
        .filter-section {
            margin: 4px 0;
        }
        
        .match-mode {
            margin-top: 8px;
            font-size: 11px;
            color: #888;
        }
        
        .match-mode-btn {
            background: #2a2a2a;
            border: 1px solid #555;
            color: #ccc;
            padding: 3px 8px;
            margin-left: 6px;
            border-radius: 3px;
            font-size: 10px;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        
        .match-mode-btn.active {
            background: #2d83ff;
            color: #ffffff;
            border-color: #2d83ff;
        }

        .select-scenes-btn {
            margin-top: 8px;
            padding: 6px 12px;
            background: rgba(59, 130, 246, 0.2);
            border: 1px solid rgba(59, 130, 246, 0.5);
            color: #60a5fa;
            border-radius: 4px;
            cursor: pointer;
            font-size: 12px;
            transition: all 0.2s ease;
        }

        .select-scenes-btn:hover {
            background: rgba(59, 130, 246, 0.3);
            border-color: rgba(59, 130, 246, 0.8);
        }

        #scene-selection-list {
            max-height: 400px;
            overflow-y: auto;
            background: #1a1a1a;
            border: 1px solid #333;
            border-radius: 4px;
            padding: 8px;
        }

        .scene-selection-item {
            display: flex;
            align-items: flex-start;
            gap: 8px;
            padding: 6px;
            margin: 2px 0;
            border-radius: 4px;
            transition: background 0.2s ease;
        }

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

        .scene-checkbox {
            margin-top: 2px;
            flex-shrink: 0;
        }

        .scene-label {
            flex: 1;
            font-size: 12px;
            line-height: 1.4;
            cursor: pointer;
        }


        .scenes-container .scene-number {
            color: #60a5fa;
            font-weight: 600;
        }

        /* Embedded arrow buttons - ALWAYS VISIBLE */
        .embedded-arrows {
            width: 48px;
            opacity: 1;
            padding: 6px;
            user-select: none;
            cursor: grab;
            display: flex;
            align-items: center;
            gap: 4px;
            transition: all 0.3s ease;
            background: rgba(30, 30, 30, 0.9);
            border-radius: 4px;
            margin-right: 8px;
        }

        .embedded-arrows.group {
            width: 60px;
            padding: 8px;
        }

        .embedded-arrow-btn {
            background: #333;
            border: 1px solid #555;
            color: #e0e0e0;
            padding: 4px 6px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 12px;
            line-height: 1;
            transition: all 0.15s ease;
            min-width: 18px;
            text-align: center;
        }

        .embedded-arrow-btn:hover {
            background: #444;
            border-color: #666;
        }

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

        .embedded-arrow-btn.group {
            padding: 3px 6px;
            font-size: 12px;
            font-weight: bold;
            min-width: 18px;
        }

        /* FILMED Toggle Switch */
        .toggle-switch input:checked + .toggle-slider {
            background-color: #f59e0b; /* Warm amber when ON */
            box-shadow: 0 0 10px rgba(245, 158, 11, 0.5);
        }

        .toggle-switch input:checked + .toggle-slider:before {
            transform: translateX(20px);
            background-color: #4ade80; /* Bright green circle when ON */
            box-shadow: 0 0 6px rgba(74, 222, 128, 0.8);
        }

        .toggle-slider:before {
            position: absolute;
            content: "";
            height: 14px;
            width: 14px;
            left: 3px;
            bottom: 3px;
            background-color: white;
            transition: 0.3s;
            border-radius: 50%;
        }

        /* Scene selection highlighting - Electric blue borders + 20% background fill */
        .scene-banner.scene-selected {
            background: rgba(0, 122, 255, 0.2) !important;
            border-color: #007AFF !important;
            border-left-color: #007AFF !important;
            box-shadow: 0 0 0 5px #007AFF, inset 0 0 0 2px #007AFF, 0 4px 16px rgba(0, 122, 255, 0.3);
            transform: translateX(3px);
            transition: all 0.2s ease;
        }

        .scene-banner.scene-selected .scene-neon-outline {
            border-color: #007AFF !important;
            background: transparent !important;
            box-shadow: 0 0 12px rgba(0, 122, 255, 0.6);
        }
        
        .scene-banner.scene-selected td {
            background: rgba(0, 122, 255, 0.2) !important;
            color: white !important;
            font-weight: 600 !important;
            position: relative;
            z-index: 1;
        }
        
        /* Override colored scenes for selection */
        .scene-banner.scene-selected.colored {
            background: rgba(0, 122, 255, 0.2) !important;
            border-color: #007AFF !important;
        }
        
        .scene-banner.scene-selected.colored td {
            background: rgba(0, 122, 255, 0.2) !important;
            color: white !important;
            position: relative;
            z-index: 1;
        }
        
        /* Selection hover feedback */
        .scene-banner:not(.scene-selected):hover {
            box-shadow: 0 0 0 1px rgba(0, 122, 255, 0.4);
            background: transparent !important;
        }

        .scene-location {
            color: #e0e0e0;
        }

        .scene-time {
            color: #a0a0a0;
        }

        .scene-desc {
            color: #888;
            font-style: italic;
            white-space: normal;
            word-wrap: break-word;
            line-height: 1.3;
        }

        /* ====== SCENE SEARCH STYLES ====== */
        .scene-search-container {
            padding: 10px 0 0 0;
        }
        
        .scene-bulk-actions {
            padding: 8px 0;
            border-bottom: 1px solid #333;
            margin-bottom: 10px;
            display: flex;
            gap: 8px;
        }
        
        .bulk-action-btn {
            background: #333;
            border: 1px solid #555;
            color: #ccc;
            padding: 6px 12px;
            border-radius: 4px;
            font-size: 11px;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        
        .bulk-action-btn:hover {
            background: #444;
            border-color: #666;
            color: #fff;
        }

        .scene-search-input {
            width: 100%;
            padding: 8px 12px;
            background: #2a2a2a;
            border: 1px solid #444;
            border-radius: 4px;
            color: #e0e0e0;
            font-size: 12px;
            margin-bottom: 8px;
        }

        .scene-search-input:focus {
            outline: none;
            border-color: #667eea;
            background: #333;
        }


        .select-all-filtered-btn, .deselect-all-filtered-btn, .clear-search-btn {
            padding: 6px 12px;
            margin-right: 8px;
            background: #667eea;
            border: none;
            border-radius: 4px;
            color: white;
            font-size: 11px;
            cursor: pointer;
            transition: background 0.2s ease;
        }

        .select-all-filtered-btn:hover, .deselect-all-filtered-btn:hover, .clear-search-btn:hover {
            background: #5a6fd8;
        }

        .deselect-all-filtered-btn {
            background: #dc2626;
        }

        .deselect-all-filtered-btn:hover {
            background: #b91c1c;
        }

        .clear-search-btn {
            background: #666;
        }

        .clear-search-btn:hover {
            background: #777;
        }

        .scene-selection-item.filtered-out,
        .scene-selection-item.filter-hidden {
            display: none;
        }

        .scene-count-badge {
            display: inline-block;
            background: rgba(255, 255, 255, 0.2);
            color: #ffffff;
            padding: 2px 6px;
            border-radius: 10px;
            font-size: 11px;
            font-weight: 600;
            margin-left: 6px;
        }

        .header-tab .scene-count-badge {
            background: rgba(0, 0, 0, 0.3);
        }

        .header-tab.active .scene-count-badge {
            background: rgba(0, 0, 0, 0.4);
        }

        .scene-list {
            max-height: none;
            height: auto;
            overflow-y: visible;
            background: #1a1a1a;
            border: 1px solid #333;
            border-radius: 4px;
            padding: 8px;
        }

        .scene-list.master-view {
            opacity: 0.7;
            background: #151515;
        }

        .scene-selection-item.disabled {
            opacity: 0.6;
            cursor: not-allowed;
        }

        .scene-bullet {
            display: inline-block;
            width: 16px;
            height: 16px;
            text-align: center;
            line-height: 16px;
            color: #666;
            font-size: 12px;
            flex-shrink: 0;
            margin-top: 2px;
        }

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

        .option-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 4px 0;
            background: #333;
            padding: 6px;
            border-radius: 4px;
            cursor: move;
            transition: all 0.2s ease;
            position: relative;
        }

        .option-item:hover {
            background: #404040;
            /* Removed transform to fix popup positioning */
            /* transform: translateY(-1px); */
            box-shadow: 0 2px 4px rgba(0,0,0,0.3);
        }

        .option-item.dragging {
            opacity: 0.5;
            transform: rotate(5deg);
            z-index: 1000;
        }

        .option-item.drag-over {
            border-top: 3px solid #2d83ff;
            background: rgba(45, 131, 255, 0.1);
            transform: translateY(-2px);
        }

        /* Main dropdown menu styles */
        .dropdown-menu {
            position: relative;
            display: inline-block;
        }

        .dropdown-content {
            display: none;
            position: absolute;
            left: 0;
            top: 100%;
            background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
            border: 1px solid rgba(255,255,255,0.1);
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.5);
            min-width: 180px;
            z-index: 1000;
            margin-top: 5px;
        }

        .dropdown-content button {
            background: none;
            border: none;
            color: #e0e0e0;
            padding: 12px 16px;
            text-align: left;
            width: 100%;
            cursor: pointer;
            font-size: 14px;
            border-radius: 0;
            transition: background-color 0.2s;
        }

        .dropdown-content button:first-child {
            border-top-left-radius: 8px;
            border-top-right-radius: 8px;
        }

        .dropdown-content button:last-child {
            border-bottom-left-radius: 8px;
            border-bottom-right-radius: 8px;
        }

        .dropdown-content button:hover {
            background: rgba(45, 131, 255, 0.2);
            color: #ffffff;
        }

        .menu-separator {
            height: 1px;
            background: rgba(255,255,255,0.1);
            margin: 4px 0;
        }

        .menu-btn {
            font-size: 16px;
            padding: 8px 12px !important;
        }

        .drop-zone-indicator {
            height: 4px;
            background: linear-gradient(90deg, #2d83ff, #60a5fa);
            margin: 2px 0;
            border-radius: 2px;
            opacity: 0;
            transform: scaleX(0);
            transition: all 0.2s ease;
        }

        .drop-zone-indicator.active {
            opacity: 1;
            transform: scaleX(1);
        }

        .sidebar-content {
            position: relative;
        }

        .drag-handle {
            cursor: grab;
            color: #666;
            margin-right: 8px;
            font-size: 14px;
        }

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

        .option-item input {
            background: transparent;
            border: none;
            color: #e0e0e0;
            flex: 1;
            font-size: 14px;
        }

        .option-item input:focus {
            outline: none;
        }

        .option-item button {
            background: none;
            border: none;
            color: #aaa;
            cursor: pointer;
            margin-left: 6px;
            font-size: 16px;
        }

        .option-item button:hover { 
            color: #fff; 
        }

        .delete-warning {
            background: #dc2626;
            color: #fff;
            padding: 6px 8px;
            margin: 4px 0 0 0;
            border-radius: 4px;
            font-size: 11px;
            font-weight: 500;
            display: none;
            width: 100%;
            box-sizing: border-box;
            text-align: center;
            border-left: 3px solid #991b1b;
            animation: slideDown 0.2s ease-out;
        }

        @keyframes slideDown {
            from { 
                opacity: 0; 
                transform: translateY(-5px); 
            }
            to { 
                opacity: 1; 
                transform: translateY(0); 
            }
        }
        
        @keyframes pulseHighlight {
            0% {
                background-color: rgba(45, 131, 255, 0.5);
                transform: scale(1);
            }
            50% {
                background-color: rgba(45, 131, 255, 0.3);
                transform: scale(1.01);
            }
            100% {
                background-color: transparent;
                transform: scale(1);
            }
        }

        @keyframes fadeOut {
            0% {
                opacity: 1;
            }
            100% {
                opacity: 0;
            }
        }

        .add-option-btn {
            width: 100%;
            padding: 8px;
            background: #444;
            border: none;
            color: #e0e0e0;
            cursor: pointer;
            border-radius: 4px;
            margin-top: 10px;
        }

        .add-option-btn:hover {
            background: #555;
        }

        /* Inline editing */
        .editable {
            cursor: pointer;
            padding: 2px;
            border-radius: 3px;
            transition: background-color 0.2s;
        }

        .editable:hover {
            background-color: rgba(255,255,255,0.1);
        }

        /* INT/EXT Toggle Styles */
        .int-ext-toggle {
            cursor: pointer;
            display: inline-block;
            padding: 2px 4px;
            border-radius: 3px;
            transition: all 0.2s ease;
            position: relative;
            user-select: none;
        }

        .int-ext-toggle:hover {
            opacity: 0.8;
            border-bottom: 1px dotted rgba(255, 255, 255, 0.3);
        }

        .int-ext-toggle.animating {
            animation: togglePop 0.15s ease;
        }

        @keyframes togglePop {
            0% { transform: scale(1); }
            50% { transform: scale(0.95); }
            100% { transform: scale(1); }
        }

        .scene-title-wrapper.needs-selection .int-ext-toggle {
            animation: pulseHighlight 1.5s ease-in-out infinite;
        }

        @keyframes pulseHighlight {
            0%, 100% { background-color: transparent; }
            50% { background-color: rgba(255, 255, 255, 0.1); }
        }

        /* Chapter marker pulsing animation */
        @keyframes pulseChapterMarker {
            0%, 100% { transform: scale(1); opacity: 0.7; }
            50% { transform: scale(1.3); opacity: 1; }
        }

        /* Scene trading places animation */
        .scene-trading-up {
            transform: translateY(-100%);
            transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
            z-index: 10;
        }

        .scene-trading-down {
            transform: translateY(100%);
            transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
            z-index: 10;
        }

        /* Location Dropdown Styles */
        .location-dropdown {
            position: relative;
            display: inline-block;
        }

        .location-display {
            cursor: pointer;
            display: inline-block;
            position: relative;
            padding: 2px 4px;
            border-radius: 3px;
            transition: all 0.2s ease;
            user-select: none;
        }

        .location-display:hover {
            background-color: rgba(255, 255, 255, 0.1);
        }

        .location-display:hover .dropdown-arrow {
            opacity: 1;
            width: 16px;
            margin-left: 4px;
        }

        .time-display {
            cursor: pointer;
            display: inline-block;
            position: relative;
            padding: 2px 4px;
            border-radius: 3px;
            transition: all 0.2s ease;
            user-select: none;
        }

        .time-display:hover {
            background-color: rgba(255, 255, 255, 0.1);
        }

        .time-display:hover .dropdown-arrow {
            opacity: 1;
            width: 16px;
            margin-left: 4px;
        }

        .dropdown-arrow {
            font-size: 12px;
            opacity: 0;
            color: rgba(255, 255, 255, 0.6);
            display: inline-block;
            width: 0;
            overflow: hidden;
            transition: opacity 0.2s ease, width 0.2s ease, margin-left 0.2s ease;
        }

        .location-dropdown-menu {
            position: absolute;
            top: 100%;
            left: 0;
            background: #2a2a2a;
            border: 1px solid #444;
            border-radius: 6px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
            z-index: 1000;
            min-width: 200px;
            max-height: 300px;
            overflow-y: auto;
            display: none;
        }

        .location-dropdown-menu.show {
            display: block;
        }

        .location-dropdown-item {
            padding: 8px 12px;
            cursor: pointer;
            color: #e0e0e0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            transition: background-color 0.2s ease;
        }

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

        .location-dropdown-item:hover {
            background-color: rgba(20, 184, 166, 0.2);
        }

        .location-dropdown-item.new-location {
            font-weight: bold;
            color: rgba(20, 184, 166, 1);
        }

        .location-dropdown-item.recent {
            color: #fbbf24;
        }

        /* Address Dropdown Styles (same as location) */
        .address-dropdown {
            position: relative;
            display: inline-block;
        }

        .address-display {
            cursor: pointer;
            transition: color 0.2s ease;
        }

        .address-dropdown-item.new-address {
            font-weight: bold;
            color: rgba(20, 184, 166, 1);
        }

        .address-dropdown-item.recent {
            color: #fbbf24;
        }

        .address-dropdown-item.current {
            color: #888;
            font-style: italic;
        }

        .location-input {
            background: transparent;
            border: none;
            color: #e0e0e0;
            font-size: inherit;
            font-weight: inherit;
            outline: none;
            width: 100%;
            min-width: 100px;
        }

        .location-deleted-warning {
            display: inline-block;
            color: #fbbf24;
            font-size: 12px;
            margin-left: 8px;
        }

        .location-deleted-warning button {
            background: none;
            border: 1px solid #fbbf24;
            color: #fbbf24;
            padding: 2px 6px;
            margin: 0 2px;
            border-radius: 3px;
            cursor: pointer;
            font-size: 11px;
        }

        .location-deleted-warning button:hover {
            background: #fbbf24;
            color: #000;
        }

        .editable[contenteditable="true"] {
            background-color: #222;
            outline: 2px solid #667eea;
            cursor: text;
        }

        /* Selection styles */
        .shot, .setup, .scene {
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .shot:not(.colored):hover, .setup:not(.colored):hover {
            background-color: rgba(255,255,255,0.05);
        }

        /* Multi-selection styles */
        .shot.multi-selected {
            background-color: rgba(45, 131, 255, 0.3) !important;
            outline: 2px solid #2d83ff;
            outline-offset: -1px;
        }

        .shot.multi-selected td {
            background-color: transparent !important;
        }

        .shot.dragging-multiple {
            opacity: 0.5;
        }

        /* Drop target feedback for setup rows */
        .setup.drop-target {
            background-color: rgba(45, 131, 255, 0.2) !important;
            outline: 2px dashed #2d83ff;
            outline-offset: -1px;
        }
        
        .shot.colored, .setup.colored, .scene.colored {
            background: var(--persistent-color) !important;
        }
        
        .shot.colored:hover, .setup.colored:hover {
            background: var(--persistent-color) !important;
        }

        /* FIX: Make persistent colors visible by applying to cells too */
        .shot.colored td, .setup.colored td, .scene.colored td {
            background: var(--persistent-color) !important;
        }
        
        /* Clean setup strips without dark overlay */
        .setup.colored {
            /* Removed dark inset box-shadow */
        }
        
        /* Colored shots keep their bevel effect */
        .shot.colored {
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4),
                        inset 0 1px 2px rgba(255, 255, 255, 0.2);
        }
        .shot.colored:hover {
            box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5),
                        inset 0 1px 3px rgba(255, 255, 255, 0.25);
            transform: translateY(-1px);
        }

        .shot.selected, .setup.selected, .scene.selected {
            background-color: rgba(102, 126, 234, 0.2) !important;
            outline: 2px solid #667eea;
            outline-offset: -2px;
        }
        
        /* Multi-select styling - distinct from single select */
        .scene.multi-selected {
            background-color: rgba(255, 193, 7, 0.15) !important;
            outline: 2px dashed #ffc107;
            outline-offset: -2px;
        }
        
        .scene.multi-selected .scene-neon-outline {
            border-color: #ffc107 !important;
            border-left-color: #ffc107 !important;
            background: rgba(255, 193, 7, 0.05);
        }

        .shot.selected td:first-child {
            background-color: rgba(102, 126, 234, 0.4) !important;
            color: white;
            font-weight: bold;
        }

        /* Status-based row coloring */
        .shot.completed {
            background-color: #22c55e !important;
        }

        .shot.completed td {
            color: white;
            font-weight: bold;
        }

        /* Preview drag and drop styles */
        .shot[draggable="true"], .setup[draggable="true"], .scene[draggable="true"] {
            cursor: grab;
        }

        .shot.dragging, .setup.dragging, .scene.dragging, .option-item.dragging {
            opacity: 0.3;
        }

        .option-item.drop-above {
            box-shadow: 0 -2px 0 0 #14b8a6; /* Turquoise indicator */
        }

        .option-item.drop-below {
            box-shadow: 0 2px 0 0 #14b8a6; /* Turquoise indicator */
        }

        .shot.preview-above, .setup.preview-above, .scene.preview-above {
            box-shadow: 0 -3px 0 0 #667eea;
        }

        .shot.preview-below, .setup.preview-below, .scene.preview-below {
            box-shadow: 0 3px 0 0 #667eea;
        }

        .shot.will-move-up, .setup.will-move-up, .scene.will-move-up {
            transform: translateY(-2px);
            transition: transform 0.2s ease;
        }

        .shot.will-move-down, .setup.will-move-down, .scene.will-move-down {
            transform: translateY(2px);
            transition: transform 0.2s ease;
        }

        /* Context menu */
        .context-menu {
            position: fixed;
            background: #2a2a2a;
            border: 1px solid #555;
            border-radius: 6px;
            padding: 4px 0;
            z-index: 1000;
            min-width: 150px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
            display: none;
        }

        .context-menu-item {
            padding: 8px 12px;
            cursor: pointer;
            font-size: 14px;
            color: #e0e0e0;
        }

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

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

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

        /* Submenu styles */
        .context-menu-item.has-submenu {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .submenu-arrow {
            margin-left: 12px;
            font-size: 10px;
            color: #888;
        }

        .context-submenu {
            position: absolute;
            left: 100%;
            top: 0;
            background: #2a2a2a;
            border: 1px solid #555;
            border-radius: 6px;
            padding: 4px 0;
            min-width: 150px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
            display: none;
            z-index: 1001;
        }

        .context-menu-item.has-submenu:hover .context-submenu {
            display: block;
        }

        /* Export submenu styles for DOOD File menu */
        .dropdown-content .export-parent {
            position: relative;
        }

        .export-submenu {
            position: absolute;
            left: calc(100% - 2px);
            top: -5px;
            background: #2a2a2a;
            border: 1px solid #555;
            border-radius: 6px;
            padding: 4px 0;
            min-width: 220px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
            display: none;
            z-index: 1001;
            margin-left: 0;
        }

        .export-parent:hover .export-submenu {
            display: block;
        }

        .export-submenu:hover {
            display: block;
        }

        .export-submenu button {
            width: 100%;
            text-align: left;
            padding: 8px 16px;
            background: transparent;
            border: none;
            color: white;
            font-size: 14px;
            cursor: pointer;
            border-radius: 0;
        }

        .export-submenu button:hover {
            background: #3a3a3a;
        }

        .header {
            background: #1a1a1a;
            padding: 14px 20px 0 20px;
            border-bottom: 1px solid #333;
            display: flex;
            flex-direction: column;
            gap: 14px;
        }

        .header h1 {
            color: #fff;
            font-size: 24px;
            font-weight: 600;
        }
        
        #projectName:hover {
            background-color: rgba(255, 255, 255, 0.05);
        }
        
        #projectName.editing {
            background-color: #2a2a2a;
            border: 2px solid #667eea;
            outline: none;
        }

        /* ====== MASTER SHOTLIST BUTTON ====== */
        .master-shotlist-btn {
            padding: 8px 16px;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: #e0e0e0;
            border-radius: 6px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 600;
            transition: all 0.2s ease;
            white-space: nowrap;
            margin-right: 15px;
        }

        .master-shotlist-btn:hover {
            background: rgba(255, 255, 255, 0.15);
            border-color: rgba(255, 255, 255, 0.3);
        }

        .master-shotlist-btn.active {
            background: rgba(6, 182, 212, 0.6);
            border-color: rgba(6, 182, 212, 1);
            color: #ffffff;
            box-shadow: 0 2px 8px rgba(6, 182, 212, 0.4);
        }

        /* ====== HEADER TABS - Browser Style ====== */
        .header-tabs {
            display: flex;
            gap: 4px;
            align-items: flex-end;
            overflow-x: scroll;
            overflow-y: visible;
            padding-bottom: 6px;
            padding-top: 8px;
            margin-top: -8px;
            margin-bottom: -1px;
            scrollbar-width: thin;
            scrollbar-color: #555 #1a1a1a;
        }

        .header-tabs::-webkit-scrollbar {
            height: 6px;
            -webkit-appearance: none;
        }

        .header-tabs::-webkit-scrollbar-track {
            background: #1a1a1a;
        }

        .header-tabs::-webkit-scrollbar-thumb {
            background: #555;
            border-radius: 3px;
            min-width: 40px;
        }

        .header-tabs::-webkit-scrollbar-thumb:hover {
            background: #666;
        }

        .header-tabs::-webkit-scrollbar-corner {
            background: #1a1a1a;
        }

        .header-tab {
            padding: 6px 10px;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-bottom: none;
            color: #e0e0e0;
            border-radius: 8px 8px 0 0;
            cursor: pointer;
            font-size: 12px;
            font-weight: 600;
            transition: all 0.2s ease;
            white-space: nowrap;
            position: relative;
            box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.3);
            flex-shrink: 0;
        }

        .header-tab:hover {
            background: rgba(255, 255, 255, 0.15);
            border-color: rgba(255, 255, 255, 0.3);
            transform: translateY(-2px);
            box-shadow: 0 -3px 6px rgba(0, 0, 0, 0.4);
        }

        .header-tab.active {
            background: rgba(6, 182, 212, 0.6);
            border-color: rgba(6, 182, 212, 1);
            color: #ffffff;
            font-weight: 600;
            transform: translateY(-2px);
            box-shadow: 0 -4px 8px rgba(6, 182, 212, 0.4);
            z-index: 1;
        }

        .header-tab.two-line {
            padding: 6px 12px;
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 8px;
        }

        .header-tab .tab-line-1 {
            font-size: 12px;
            font-weight: 600;
            line-height: 1;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .header-tab .tab-line-2 {
            font-size: 11px;
            line-height: 1;
            display: flex;
            align-items: center;
            gap: 4px;
            opacity: 0.9;
        }

        .header-controls {
            display: flex;
            gap: 10px;
        }
        
        /* Search bar styles */
        .search-container {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        
        .search-bar {
            width: 500px;
            padding: 8px 15px;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 20px;
            color: #fff;
            font-size: 14px;
            outline: none;
            transition: all 0.2s ease;
        }
        
        .search-bar:focus {
            background: rgba(255, 255, 255, 0.15);
            border-color: rgba(102, 126, 234, 0.6);
            box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
        }
        
        .search-bar::placeholder {
            color: rgba(255, 255, 255, 0.6);
        }

        .search-results-badge {
            background: rgba(102, 126, 234, 0.2);
            border: 1px solid rgba(102, 126, 234, 0.4);
            border-radius: 12px;
            padding: 4px 8px;
            font-size: 12px;
            color: #a3b3ff;
            white-space: nowrap;
        }

        .search-icon {
            color: rgba(255, 255, 255, 0.6);
            font-size: 18px;
            user-select: none;
        }

        /* ====== HEADER TOGGLE BUTTON ====== */
        .header-toggle-btn {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 8px 12px;
            background: rgba(103, 126, 234, 0.15);
            border: 1px solid rgba(103, 126, 234, 0.3);
            border-radius: 6px;
            color: #a3b3ff;
            cursor: pointer;
            font-size: 13px;
            font-weight: 500;
            transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            white-space: nowrap;
            position: relative;
            z-index: 10000;
        }

        .header-toggle-btn:hover {
            background: rgba(103, 126, 234, 0.25);
            border-color: rgba(103, 126, 234, 0.5);
            transform: scale(1.05);
        }

        .header-toggle-icon {
            font-size: 14px;
            transition: transform 0.2s ease;
        }

        .header-toggle-text {
            opacity: 0;
            max-width: 0;
            overflow: hidden;
            transition: all 0.2s ease;
        }

        .header-toggle-btn:hover .header-toggle-text {
            opacity: 1;
            max-width: 50px;
        }

        /* Thin bar to show header when hidden */
        .header-toggle-bar {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 4px;
            background: linear-gradient(180deg, rgba(103, 126, 234, 0.6) 0%, rgba(103, 126, 234, 0.3) 100%);
            cursor: pointer;
            z-index: 10000;
            box-shadow: 0 2px 8px rgba(103, 126, 234, 0.4);
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), height 0.2s ease;
        }

        body.header-hidden .header-toggle-bar {
            opacity: 1;
            pointer-events: auto;
        }

        .header-toggle-bar:hover {
            height: 6px;
            background: linear-gradient(180deg, rgba(103, 126, 234, 0.9) 0%, rgba(103, 126, 234, 0.6) 100%);
            box-shadow: 0 2px 12px rgba(103, 126, 234, 0.6);
        }

        /* Text below bar with background */
        .header-toggle-bar::after {
            content: '▾ Click to expand';
            position: absolute;
            top: 8px;
            left: 50%;
            transform: translateX(-50%);
            color: #fff;
            font-size: 13px;
            font-weight: bold;
            line-height: 1;
            white-space: nowrap;
            opacity: 0;
            transition: opacity 0.2s ease;
            background: rgba(0, 0, 0, 0.85);
            padding: 6px 12px;
            border-radius: 4px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
        }

        .header-toggle-bar:hover::after {
            opacity: 1;
        }

        /* Hide original button when right sidebar open */
        body.right-sidebar-open .header-toggle-btn {
            display: none;
        }

        /* Scene navigation highlight animation */
        @keyframes pulseHighlight {
            0% {
                box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);
                background: rgba(59, 130, 246, 0.1);
            }
            50% {
                box-shadow: 0 0 0 10px rgba(59, 130, 246, 0.3);
                background: rgba(59, 130, 246, 0.2);
            }
            100% {
                box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
                background: rgba(59, 130, 246, 0);
            }
        }

        /* Search filter animations */
        .search-filter-exit {
            animation: slideOutFade 0.4s ease-in-out forwards;
        }

        @keyframes slideOutFade {
            0% {
                opacity: 1;
                transform: translateX(0) scale(1);
                max-height: 100px;
            }
            50% {
                opacity: 0.3;
                transform: translateX(-20px) scale(0.95);
            }
            100% {
                opacity: 0;
                transform: translateX(-40px) scale(0.9);
                max-height: 0;
                margin: 0;
                padding: 0;
            }
        }
        
        @keyframes slideIn {
            from {
                transform: translateX(100px);
                opacity: 0;
            }
            to {
                transform: translateX(0);
                opacity: 1;
            }
        }
        
        @keyframes fadeOut {
            from {
                opacity: 1;
            }
            to {
                opacity: 0;
            }
        }

        .btn {
            padding: 8px 16px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 500;
            transition: all 0.3s ease;
        }

        .btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
        }

        .btn.secondary {
            background: #444;
            color: #e0e0e0;
        }

        .btn.secondary:hover {
            background: #555;
            box-shadow: 0 4px 12px rgba(68, 68, 68, 0.4);
        }

        /* Full height table structure */
        .main-content {
            flex: 1;
            display: flex;
            flex-direction: column;
            overflow: auto;
        }
        
        .table-container {
            flex: 1;
            overflow-x: auto;
            overflow-y: visible;
            height: auto !important;
            border: none;
            margin: 5px;
            background: #0f0f0f;
            /* Smooth horizontal scrolling */
            scroll-behavior: smooth;
        }

        table {
            border-collapse: separate;
            border-spacing: 0 12px;  /* Increased vertical spacing between rows from 6px to 12px */
            width: max-content;  /* Let table expand to natural width */
            min-width: 100%;
            padding: 0 10px 10px 10px;
            table-layout: auto;  /* Let columns size naturally */
        }

        th, td {
            border: none;  /* Remove hard borders */
            padding: 12px 16px;
            vertical-align: middle;  /* Center align all content vertically */
            white-space: nowrap;  /* Default: prevent text wrapping */
        }
        
        /* Ensure rows have proper min-height for content */
        tbody tr {
            min-height: 60px;
        }
        
        tbody tr.shot-row {
            min-height: 70px;  /* Shot rows slightly taller for descriptions */
        }
        
        /* Ensure content in shot rows is vertically centered */
        tbody tr.shot-row td {
            vertical-align: middle;
            height: auto;
            position: relative;
        }
        
        /* Make shot number cells use flexbox for vertical centering */
        tbody tr.shot-row td:first-child > div {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100%;
            min-height: 60px;
        }
        
        /* Ensure all cells properly center their content */
        tbody tr.shot-row td {
            height: 100%;
        }
        
        tbody tr.shot-row td > * {
            vertical-align: middle;
        }
        
        /* SMART TEXT WRAPPING for text-heavy columns */
        th:nth-child(3), td:nth-child(3),   /* Description column */
        .setup-notes,                        /* Setup notes */
        .scene-description {                 /* Scene descriptions */
            white-space: normal !important;  /* Allow text wrapping */
            word-wrap: break-word;           /* Break long words */
            word-break: break-word;          /* Enhanced word breaking */
            overflow-wrap: break-word;       /* Modern word breaking */
            max-width: 400px;               /* Reasonable max width for readability */
        }
        
        /* Column minimum widths for good UX */
        th:nth-child(1), td:nth-child(1) { min-width: 80px; }   /* Shot */
        th:nth-child(2), td:nth-child(2) { min-width: 100px; }  /* Size */
        th:nth-child(3), td:nth-child(3) { min-width: 300px; }  /* Description - expandable */
        th:nth-child(4), td:nth-child(4) { min-width: 120px; }  /* Focal Length */
        th:nth-child(5), td:nth-child(5) { min-width: 100px; }  /* Height */
        th:nth-child(6), td:nth-child(6) { min-width: 120px; }  /* Equipment */
        th:nth-child(10), td:nth-child(10) { min-width: 100px; } /* Status */

        /* Time columns - fixed tightened widths with !important to override table-layout: auto */
        th:nth-child(7), td:nth-child(7) { /* Setup Time */
            width: 180px !important;
            min-width: 180px !important;
            max-width: 180px !important;
        }
        th:nth-child(8), td:nth-child(8) { /* Shoot Time */
            width: 180px !important;
            min-width: 180px !important;
            max-width: 180px !important;
        }
        th:nth-child(9), td:nth-child(9) { /* Total Time */
            width: 110px !important;
            min-width: 110px !important;
            max-width: 110px !important;
            background: #2a2a2a;
            color: #e0e0e0;
            position: relative;
            white-space: normal;
            word-wrap: break-word;
            word-break: break-word;
            overflow-wrap: break-word;
        }

        /* Default column widths - resizable */
        th:nth-child(1) { width: 80px; }   /* Shot */
        th:nth-child(2) { width: 140px; }  /* Type */
        th:nth-child(3) { width: 300px; }  /* Description - wider by default */
        th:nth-child(4) { width: 140px; }  /* Focal Length */
        th:nth-child(5) { width: 120px; }  /* Height */
        th:nth-child(6) { width: 130px; }  /* Equipment */
        th:nth-child(10) { width: 120px; } /* Status */

        /* Column resize handles */
        th {
            position: relative;
        }

        th:not(:last-child):after {
            content: '';
            position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
            width: 6px;
            cursor: col-resize;
            background: transparent;
            z-index: 10;
        }

        th:not(:last-child):hover:after {
            background: rgba(102, 126, 234, 0.3);
        }

        /* Text wrapping in cells */
        td {
            white-space: normal;
            overflow-wrap: break-word;
        }

        /* Sticky header - freeze on scroll */
        thead {
            position: sticky;
            top: 0;
            z-index: 10;
            transition: top 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

        body.header-hidden thead {
            top: 4px;
        }
        
        thead th {
            position: relative;
            color: #fff;
            font-weight: 600;
            text-align: center;
            font-size: 13px;
            border-right: 1px solid rgba(255, 255, 255, 0.1);
            padding: 12px 8px;
        }
        
        /* Alternating header colors */
        thead th:nth-child(odd) {
            background: #2c3e50; /* Dark slate blue */
        }
        
        thead th:nth-child(even) {
            background: #384556; /* Lighter slate blue */
        }
        
        /* Remove border from last column */
        thead th:last-child {
            border-right: none;
        }
        
        thead tr {
            margin-left: 12px;
        }

        /* SANDWICH STRUCTURE - Scene banners (Blue) - True hollow design with outline only */
        .scene-banner {
            background: transparent !important;
            border: 2px solid #2d83ff !important;
            border-left: 6px solid #2d83ff !important;
            font-weight: bold;
            border-radius: 6px !important;
            margin: 16px 0 4px 0;
            margin-left: -24px;
            margin-right: -12px;
            box-shadow: 0 4px 12px rgba(45, 131, 255, 0.2);
            transition: all 0.2s;
            overflow: hidden;
        }
        
        .scene-banner:hover {
            transform: translateX(4px);
            box-shadow: 0 6px 16px rgba(45, 131, 255, 0.3);
        }
        
        .scene-banner td {
            background: transparent !important; /* Hollow design */
            color: white !important;
            font-weight: 600;
            padding: 12px 16px;
            font-size: 15px;
            border: none;
            border-radius: 0;
            position: relative;
        }
        
        /* Override persistent coloring for scene banners - keep hollow but use color for border */
        .scene-banner.colored {
            background: transparent !important;
            border-color: var(--persistent-color) !important;
        }
        
        .scene-banner.colored td {
            background: transparent !important;
            color: white !important; /* Keep white text */
        }
        
        /* Color picker controls outline color of the neon div */
        .scene-banner.colored .scene-neon-outline {
            border-color: var(--persistent-color) !important;
        }
        
        /* Left-side scene color pickers - invisible until hover */
        .scene-banner .scene-left-thick,
        .scene-banner .scene-left-thin {
            background: transparent !important;
        }
        
        .scene-banner:hover .scene-left-thick,
        .scene-banner:hover .scene-left-thin {
            background: var(--persistent-color) !important;
        }
        
        /* Scene footer hover states */
        .scene-footer .scene-left-thick,
        .scene-footer .scene-left-thin {
            background: transparent !important;
        }
        
        .scene-footer:hover .scene-left-thick,
        .scene-footer:hover .scene-left-thin {
            background: transparent !important;
        }
        .scene-banner td:first-child {
            border-radius: 0;
        }
        .scene-banner td:last-child {
            border-radius: 0;
        }

        .scene-banner .description {
            font-weight: normal;
            font-size: 13px;
            color: #dbeafe;
            display: block;
            margin-top: 4px;
        }

        /* Scene color pill - match Master Shotlist exactly */
        .scene-banner .color-pill {
            width: 18px;
            height: 18px;
            border-radius: 50%;
            border: 2px solid #fff;
            cursor: pointer;
            display: inline-block;
            margin-right: 8px;
            box-shadow: 0 0 0 2px rgba(0,0,0,0.3);
            transition: transform 0.2s ease;
            position: absolute;
            left: 6px;
            top: 50%;
            transform: translateY(-50%);
            z-index: 10;
        }

        .scene-banner .color-pill:hover {
            transform: scale(1.2) translateY(-50%);
        }

        .scene-controls {
            float: right;
            opacity: 0;
            transition: opacity 0.2s ease;
        }

        .scene-banner:hover .scene-controls {
            opacity: 1;
        }

        .scene-btn {
            background: rgba(255,255,255,0.2);
            border: none;
            color: #fff;
            padding: 4px 8px;
            margin-left: 4px;
            border-radius: 3px;
            cursor: pointer;
            font-size: 12px;
        }

        .scene-btn:hover {
            background: rgba(255,255,255,0.3);
        }

        /* SANDWICH STRUCTURE - Setup banners (Purple) - Rounded and beveled */
        .setup-banner {
            cursor: move;
            border-radius: 0;
            overflow: hidden;
            margin-bottom: 8px;
            margin-top: 8px;
            margin-left: -12px;
            clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%);
            box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4),
                        inset 0 2px 4px rgba(255, 255, 255, 0.2);
        }
        .setup-banner td {
            color: #fff;
            font-weight: bold;
            padding: 10px 12px;
            font-size: 14px;
            border: none;
            position: relative;
            transition: all 0.2s ease;
        }
        .setup-banner td:first-child {
            border-radius: 0;
        }
        .setup-banner td:last-child {
            border-radius: 0;
        }
        .setup-banner:hover {
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5),
                        inset 0 2px 5px rgba(255, 255, 255, 0.25);
            transform: translateY(-1px);
        }
        .setup-banner:hover td {
            transform: translateX(2px);
        }

        .setup-controls {
            float: right;
            opacity: 0;
            transition: opacity 0.2s ease;
        }

        .setup-banner:hover .setup-controls {
            opacity: 1;
        }

        .setup-btn {
            background: rgba(255,255,255,0.2);
            border: none;
            color: #fff;
            padding: 4px 8px;
            margin-left: 4px;
            border-radius: 3px;
            cursor: pointer;
            font-size: 12px;
        }

        .setup-btn:hover {
            background: rgba(255,255,255,0.3);
        }

        /* Color Picker Styles */
        .color-pill {
            width: 18px;
            height: 18px;
            border-radius: 50%;
            border: 2px solid rgba(255,255,255,0.3);
            cursor: pointer;
            margin-left: 8px;
            display: inline-block;
            background: #7c3aed;
            transition: all 0.2s ease;
        }

        .color-pill:hover {
            transform: scale(1.2);
            border-color: #2d83ff;
            box-shadow: 0 0 0 3px rgba(45,131,255,0.3);
        }

        /* Scene 11 Clean Header Styles */
        .scene-header {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-bottom: 8px;
        }

        .scene-title {
            font-weight: 700;
            font-size: 1.2em;
            margin-bottom: 4px;
        }

        .color-picker-wrapper {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .color-picker-wrapper input[type="color"] {
            appearance: none;
            width: 16px;
            height: 16px;
            border: none;
            border-radius: 50%;
            cursor: pointer;
            background: transparent;
            padding: 0;
            outline: none;
        }

        .scene-banner,
        .color-picker-wrapper {
            transition: all 0.2s ease;
        }

        /* Scene 11 Left Column Color Picker */
        .scene-label-wrapper {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
        }

        .scene-label-wrapper .scene-label {
            font-weight: 700;
        }

        .scene-color-wrapper input[type="color"] {
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            width: 14px;
            height: 14px;
            border: 2px solid rgba(0, 0, 0, 0.5) !important; /* Will be updated dynamically to darker shade */
            border-radius: 50%;
            cursor: pointer;
            padding: 0;
            /* 3D effect with drop shadow and inner highlight */
            box-shadow:
                0 2px 4px rgba(0, 0, 0, 0.4),           /* Outer shadow for depth */
                inset 0 1px 1px rgba(255, 255, 255, 0.3) !important; /* Inner highlight on top */
            transition: transform 0.1s ease, box-shadow 0.1s ease;
        }

        /* Hide the default browser color picker UI */
        .scene-color-wrapper input[type="color"]::-webkit-color-swatch-wrapper {
            padding: 0;
        }

        .scene-color-wrapper input[type="color"]::-webkit-color-swatch {
            border: none;
            border-radius: 50%;
        }

        .scene-color-wrapper input[type="color"]::-moz-color-swatch {
            border: none;
            border-radius: 50%;
        }

        .scene-color-wrapper input[type="color"]:hover {
            transform: translateY(-1px);
            box-shadow:
                0 3px 6px rgba(0, 0, 0, 0.5),
                inset 0 1px 1px rgba(255, 255, 255, 0.4) !important;
        }

        .scene-color-wrapper input[type="color"]:active {
            transform: translateY(0);
            box-shadow:
                0 1px 2px rgba(0, 0, 0, 0.3),
                inset 0 1px 1px rgba(255, 255, 255, 0.2) !important;
        }

        /* Height chip styles with colored borders */
        .angle-chip {
            display: inline-block;
            padding: 4px 8px;
            margin: 2px;
            background: rgba(0, 0, 0, 0.5);
            border: 2px solid;
            border-radius: 6px;
            font-size: 12px;
            font-weight: 500;
            transition: all 0.2s ease;
        }

        .angle-chip:hover {
            transform: translateY(-1px);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
            background: rgba(0, 0, 0, 0.7);
        }
        
        .color-picker {
            position: absolute;
            visibility: hidden;
            width: 0;
            height: 0;
        }
        
        /* UX Polish */
        /* Shots - Soft rounded with bevel effect - INDENTED */
        .shot {
            cursor: move;
            border-radius: 10px;
            overflow: hidden;
            margin-bottom: 6px;
            margin-left: 25px;
            margin-right: 12px;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3),  /* Drop shadow for depth */
                        inset 0 1px 2px rgba(255, 255, 255, 0.1);  /* Top highlight for bevel */
        }
        .shot td {
            transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
            background: #2a2a2a;
        }
        
        /* Alternating column backgrounds for colored shots - matches header pattern */
        /* Fill extends to Status column (last column) */
        .shot.colored td:nth-child(odd):not(:last-child) {
            background: var(--light-color) !important;
        }
        
        .shot.colored td:nth-child(even):not(:last-child) {
            background: var(--dark-color) !important;
        }
        
        /* Status column gets the dark fill */
        .shot.colored td:last-child {
            background: var(--dark-color) !important;
        }
        .shot td:first-child {
            border-top-left-radius: 10px;
            border-bottom-left-radius: 10px;
            padding-left: 8px;
        }
        .shot td:last-child {
            border-top-right-radius: 10px;
            border-bottom-right-radius: 10px;
        }
        .shot:not(.colored):hover {
            box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4),
                        inset 0 1px 3px rgba(255, 255, 255, 0.15);
            transform: translateY(-1px);
        }
        .shot:not(.colored):hover td {
            background: rgba(255,255,255,0.05);
        }
        
        .dragging {
            opacity: 0.5;
        }
        
        /* Scene footer - True hollow design with outline only */
        .scene-footer {
            background: transparent !important;
            border: 2px solid #22c55e !important;
            border-left: 6px solid #22c55e !important;
            font-weight: bold;
            border-radius: 6px !important;
            margin: 4px 0 16px 0;
            margin-left: -24px;
            margin-right: -12px;
            box-shadow: 0 4px 12px rgba(34, 197, 94, 0.2);
            transition: all 0.2s;
            overflow: hidden;
        }
        
        .scene-footer:hover {
            transform: translateX(2px);
            box-shadow: 0 6px 16px rgba(34, 197, 94, 0.3);
        }
        
        .scene-footer td {
            background: transparent !important; /* Hollow design */
            color: white !important;
            font-weight: 600;
            padding: 12px 16px;
            font-size: 14px;
            border: none;
            border-radius: 0;
            position: relative;
        }
        
        /* Override persistent coloring for scene footers - keep hollow but use color for border */
        .scene-footer.colored {
            background: transparent !important;
            border-color: var(--persistent-color) !important;
        }
        
        .scene-footer.colored td {
            background: transparent !important;
            color: white !important; /* Keep white text */
        }
        
        /* Color picker controls outline color of the neon div */
        .scene-footer.colored .scene-footer-neon-outline {
            border-color: var(--persistent-color) !important;
        }

        .scene-footer .scene-time {
            font-size: 16px;
            color: #22c55e;
            font-weight: bold;
        }
        
        /* Neon Badge Styles for Scene Footer Stats */
        .neon-badge {
            display: inline-block;
            padding: 8px 16px;
            border-radius: 20px;
            font-weight: bold;
            font-size: 16px;
            margin: 0 8px;
            border: 2px solid;
            background: rgba(0, 0, 0, 0.3);
            transition: all 0.3s ease;
        }
        
        .neon-badge.shots {
            color: #60a5fa;
            border-color: #3b82f6;
            text-shadow: none;
            box-shadow: 0 0 15px rgba(59, 130, 246, 0.5), inset 0 0 15px rgba(59, 130, 246, 0.1);
        }
        
        .neon-badge.setups {
            color: #a78bfa;
            border-color: #8b5cf6;
            text-shadow: none;
            box-shadow: 0 0 15px rgba(139, 92, 246, 0.5), inset 0 0 15px rgba(139, 92, 246, 0.1);
        }
        
        .neon-badge.total {
            color: #4ade80;
            border-color: #22c55e;
            text-shadow: none;
            box-shadow: 0 0 15px rgba(34, 197, 94, 0.5), inset 0 0 15px rgba(34, 197, 94, 0.1);
            font-size: 18px;
            padding: 10px 20px;
        }
        
        .neon-badge:hover {
            transform: translateY(-2px);
            filter: brightness(1.2);
        }

        /* End of Day Summary */
        .eod-summary {
            position: fixed;
            bottom: 20px;
            left: 20px;
            background: rgba(0, 0, 0, 0.9);
            border: 1px solid #444;
            border-radius: 8px;
            padding: 15px;
            min-width: 250px;
            z-index: 100;
        }

        .eod-summary h3 {
            color: #fff;
            font-size: 16px;
            margin-bottom: 8px;
            border-bottom: 1px solid #444;
            padding-bottom: 4px;
        }

        .eod-stat {
            display: flex;
            justify-content: space-between;
            margin: 4px 0;
            font-size: 14px;
        }

        .eod-stat .label {
            color: #ccc;
        }

        .eod-stat .value {
            color: #22c55e;
            font-weight: bold;
        }

        .eod-time {
            font-size: 18px !important;
            color: #667eea !important;
            border-top: 1px solid #444;
            padding-top: 8px;
            margin-top: 8px;
        }

        /* Shot rows */
        .shot td:first-child {
            font-weight: bold;
            text-align: center;
            width: 60px;
            background: #3a3a3a;
        }

        /* Form elements */
        select, input[type="number"] {
            width: 100%;
            padding: 8px 12px;
            border: 1px solid #444;
            border-radius: 8px;
            background: #333;
            color: #e0e0e0;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s ease;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            appearance: none;
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23e0e0e0' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
            background-position: right 8px center;
            background-repeat: no-repeat;
            background-size: 16px;
            padding-right: 32px;
        }

        select:hover {
            border-color: #666;
            background-color: #3a3a3a;
            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
        }

        select:focus, input[type="number"]:focus {
            outline: none;
            border-color: #667eea;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2), 0 3px 8px rgba(0, 0, 0, 0.2);
        }

        input[type="text"], textarea {
            width: 100%;
            padding: 4px;
            border: 1px solid #555;
            border-radius: 4px;
            background: #2a2a2a;
            color: #e0e0e0;
            font-size: 14px;
        }

        input[type="text"]:focus, input[type="number"]:focus {
            outline: none;
            border-color: #2d83ff;
        }

        /* Better blended textarea styling */
        textarea {
            resize: vertical;
            min-height: 40px;
            overflow-y: auto;
            line-height: 1.5;
            border: 1px solid transparent;
            background: rgba(255, 255, 255, 0.03);
            color: #f0f0f0;
            font-size: 14px;
            padding: 8px;
            border-radius: 4px;
            transition: all 0.2s ease;
            font-family: inherit;
        }
        
        textarea:hover {
            background: rgba(255, 255, 255, 0.05);
            border-color: rgba(255, 255, 255, 0.1);
        }
        
        textarea:focus {
            outline: none;
            background: rgba(255, 255, 255, 0.07);
            border-color: rgba(45, 131, 255, 0.3);
            box-shadow: 0 0 0 2px rgba(45, 131, 255, 0.1);
        }
        
        /* Description column specific textarea styling */
        td:nth-child(3) textarea {
            background: rgba(255, 255, 255, 0.08);  /* Darker background for better contrast */
            border: 1px dashed rgba(255, 255, 255, 0.15);  /* Subtle dashed border */
            border-radius: 6px;  /* Beveled corners */
            padding: 10px 12px;  /* More padding to prevent text clipping */
            color: #ffffff;  /* Bold white text for readability */
            font-weight: 500;  /* Semi-bold */
            font-size: 13px;
            letter-spacing: 0.3px;
            transition: all 0.2s ease;
            vertical-align: middle;  /* Center in cell */
        }
        
        td:nth-child(3) textarea::placeholder {
            color: rgba(255, 255, 255, 0.3);
            font-weight: normal;
            font-style: italic;
        }
        
        td:nth-child(3) textarea:hover {
            background: rgba(255, 255, 255, 0.10);  /* Slightly lighter on hover */
            border-color: rgba(255, 255, 255, 0.2);
            border-style: solid;
        }
        
        td:nth-child(3) textarea:focus {
            background: rgba(255, 255, 255, 0.10);  /* Keep darker background on focus */
            border: 1px solid rgba(45, 131, 255, 0.3);
            border-style: solid;
            box-shadow: 0 0 0 1px rgba(45, 131, 255, 0.1);
        }
        
        /* Highlighted capitalized words styling */
        .caps-highlight {
            color: #ff8c00;  /* Bold orange */
            font-weight: 700;  /* Extra bold */
            text-shadow: 2px 2px 0 #000, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 0 2px 0 #000, 0 -2px 0 #000, 2px 0 0 #000, -2px 0 0 #000;  /* Enhanced black stroke effect (+1px) */
        }
        
        /* Stacked Family Animations */
        .stacked-family {
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .family-content {
            overflow: hidden;
            transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
        }
        
        .family-content.collapsed {
            max-height: 0 !important;
            opacity: 0;
        }
        
        .family-content.expanded {
            opacity: 1;
        }
        
        .card-stack {
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .card-layer {
            transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
            transform-origin: bottom center;
        }
        
        .card-layer img {
            transition: all 0.4s ease;
        }
        
        .stacked-family.expanded .card-layer {
            transform: none !important;
            position: relative !important;
            top: 0 !important;
            left: 0 !important;
            opacity: 1 !important;
            margin-bottom: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.4) !important;
        }
        
        .expand-btn {
            transition: all 0.3s ease;
        }
        
        .expand-btn.expanded {
            transform: rotate(180deg);
        }
        
        /* Dark custom scrollbar for textareas */
        textarea::-webkit-scrollbar {
            width: 6px;
        }
        
        textarea::-webkit-scrollbar-track {
            background: rgba(0, 0, 0, 0.3);
            border-radius: 3px;
        }
        
        textarea::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, 0.2);
            border-radius: 3px;
        }
        
        textarea::-webkit-scrollbar-thumb:hover {
            background: rgba(255, 255, 255, 0.3);
        }
        
        /* Hide scrollbar by default, only show when resizing smaller */
        textarea {
            overflow-y: hidden;
        }
        
        textarea:focus {
            overflow-y: auto;
        }
        
        textarea.being-resized {
            overflow-y: auto;
        }
        
        /* Auto-resize textareas for description column - conservative default */
        td:nth-child(3) textarea {
            min-height: 60px;  /* Minimum height for usability */
            max-height: 200px; /* Conservative default for non-shot textareas */
        }
        
        /* Shot description textareas: Auto-size to content (no height limit) */
        .shot td:nth-child(3) textarea {
            min-height: 60px;           /* Minimum height for usability */
            max-height: none !important; /* Remove height restriction entirely */
            height: auto;               /* Let content determine height */
            overflow-y: hidden;         /* Hide scrollbar since no height limit */
            resize: vertical;           /* Allow manual resize if needed */
        }

        /* Modern Multi-select system */
        .multi-select-container {
            position: relative;
            width: 100%;
        }

        .multi-select-container input {
            cursor: pointer;
            padding: 8px 12px;
            border: 1px solid #444;
            border-radius: 8px;
            background: #333;
            color: #e0e0e0;
            font-size: 14px;
            font-weight: 500;
            transition: all 0.2s ease;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .multi-select-container input:hover {
            border-color: #666;
            background-color: #3a3a3a;
            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
        }

        .multi-select-container input:focus {
            outline: none;
            border-color: #667eea;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2), 0 3px 8px rgba(0, 0, 0, 0.2);
        }

        /* Pill display for selected items */
        .pill-display {
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
            justify-content: center;
            align-items: center;
            min-height: 40px;
            padding: 4px;
            cursor: pointer;
            border-radius: 4px;
            transition: background 0.2s;
        }
        
        .pill-display:hover {
            background: rgba(255,255,255,0.05);
        }
        
        .pill-display .pill {
            padding: 6px 12px;
            border-radius: 16px;
            font-size: 13px;
            font-weight: 500;
            color: #fff;
            white-space: nowrap;
            min-height: 30px;
            display: flex;
            align-items: center;
            border: 1px solid rgba(255,255,255,0.1);
        }
        
        .pill-display .placeholder {
            color: #999;
            font-size: 12px;
            font-style: italic;
        }
        
        /* Inline dropdown styles */
        .inline-dropdown {
            display: none;
            position: absolute;
            background: #2a2a2a;
            border: 1px solid #444;
            border-radius: 8px;
            padding: 8px;
            min-width: 200px;
            max-height: 200px;
            overflow-y: auto;
            box-shadow: 0 4px 12px rgba(0,0,0,0.5);
            z-index: 1000;
        }
        
        .inline-dropdown.active {
            display: block;
        }
        
        .dropdown-option {
            display: flex;
            align-items: center;
            padding: 6px;
            border-radius: 4px;
            cursor: pointer;
            transition: background 0.2s;
        }
        
        .dropdown-option:hover {
            background: rgba(255,255,255,0.1);
        }
        
        .dropdown-option input[type="checkbox"] {
            margin-right: 8px;
            cursor: pointer;
        }
        
        .dropdown-option label {
            cursor: pointer;
            flex: 1;
            display: flex;
            align-items: center;
            font-size: 13px;
        }
        
        .dropdown-option .color-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            margin-left: auto;
        }
        
        /* Scene insertion warning popup */
        .scene-warning-popup {
            position: fixed;
            background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
            border: 1px solid #444;
            border-radius: 8px;
            padding: 16px;
            z-index: 10000;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
            color: #e0e0e0;
            font-size: 13px;
            max-width: 300px;
            min-width: 280px;
        }

        .scene-warning-popup .warning-header {
            display: flex;
            align-items: center;
            margin-bottom: 12px;
            font-weight: 600;
            color: #fbbf24;
        }

        .scene-warning-popup .warning-icon {
            margin-right: 8px;
            font-size: 16px;
        }

        .scene-warning-popup .warning-message {
            margin-bottom: 16px;
            line-height: 1.4;
            color: #d1d5db;
        }

        .scene-warning-popup .renaming-list {
            background: rgba(0, 0, 0, 0.3);
            border-radius: 4px;
            padding: 8px 12px;
            margin: 8px 0;
            font-family: monospace;
            font-size: 12px;
            border-left: 3px solid #fbbf24;
        }

        .scene-warning-popup .warning-buttons {
            display: flex;
            gap: 8px;
            justify-content: flex-end;
        }

        .scene-warning-popup .warning-button {
            padding: 8px 16px;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-size: 12px;
            font-weight: 500;
            transition: all 0.2s ease;
        }

        .scene-warning-popup .warning-button.continue {
            background: #2563eb;
            color: white;
        }

        .scene-warning-popup .warning-button.continue:hover {
            background: #1d4ed8;
        }

        .scene-warning-popup .warning-button.cancel {
            background: transparent;
            color: #9ca3af;
            border: 1px solid #4b5563;
        }

        .scene-warning-popup .warning-button.cancel:hover {
            background: rgba(75, 85, 99, 0.3);
            color: #e5e7eb;
        }

        /* Calendar popup styles */
        .calendar-popup {
            position: fixed;
            background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
            border: 1px solid #444;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.5);
            z-index: 9999;
            min-width: 280px;
            padding: 16px;
            color: #e0e0e0;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        }
        
        .calendar-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 16px;
            padding: 0 8px;
        }
        
        .calendar-nav-btn {
            background: none;
            border: none;
            color: #e0e0e0;
            cursor: pointer;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 16px;
            transition: background-color 0.2s;
        }
        
        .calendar-nav-btn:hover {
            background: rgba(45, 131, 255, 0.2);
        }
        
        .calendar-month-year {
            font-weight: 600;
            font-size: 16px;
            color: #ffffff;
        }
        
        .calendar-grid {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 2px;
            margin-bottom: 12px;
        }
        
        .calendar-day-header {
            text-align: center;
            padding: 8px 4px;
            font-size: 12px;
            font-weight: 600;
            color: #888;
            text-transform: uppercase;
        }
        
        .calendar-day {
            background: none;
            border: none;
            color: #e0e0e0;
            padding: 8px 4px;
            text-align: center;
            cursor: pointer;
            border-radius: 4px;
            font-size: 14px;
            transition: background-color 0.2s;
            min-height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .calendar-day:hover {
            background: rgba(45, 131, 255, 0.2);
        }
        
        .calendar-day.other-month {
            color: #555;
        }
        
        .calendar-day.today {
            background: rgba(45, 131, 255, 0.3);
            font-weight: 600;
        }
        
        .calendar-day.selected {
            background: rgba(45, 131, 255, 0.6);
            color: #ffffff;
            font-weight: 600;
        }
        
        .calendar-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-top: 12px;
            border-top: 1px solid #444;
        }
        
        .calendar-today-btn {
            background: none;
            border: 1px solid #444;
            color: #e0e0e0;
            padding: 6px 12px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 12px;
            transition: all 0.2s;
        }
        
        .calendar-today-btn:hover {
            background: rgba(45, 131, 255, 0.2);
            border-color: rgba(45, 131, 255, 0.6);
        }
        
        .calendar-clear-btn {
            background: none;
            border: 1px solid #666;
            color: #ccc;
            padding: 6px 12px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 12px;
            transition: all 0.2s;
        }
        
        .calendar-clear-btn:hover {
            background: rgba(255, 99, 99, 0.2);
            border-color: rgba(255, 99, 99, 0.6);
            color: #fff;
        }
        
        .calendar-done-btn {
            background: #3b82f6;
            border: 1px solid #3b82f6;
            color: #ffffff;
            padding: 6px 12px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 12px;
            transition: all 0.2s ease;
        }
        
        .calendar-done-btn:hover {
            background: #2563eb;
            border-color: #2563eb;
        }
        
        .multi-select-display .selected-item {
            display: inline-block;
            padding: 4px 8px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 500;
            color: #fff;
            background: #2d83ff;
            white-space: nowrap;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
        }

        .multi-select-display:hover {
            border-color: #666;
            background-color: #3a3a3a;
            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
        }

        .multi-select-display:focus-within {
            outline: none;
            border-color: #667eea;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2), 0 3px 8px rgba(0, 0, 0, 0.2);
        }

        .selected-item {
            color: #e0e0e0;
            font-size: 14px;
            line-height: 1.3;
        }

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

        .multi-options {
            position: fixed;
            background: #333;
            border: 1px solid #444;
            border-radius: 8px;
            margin-top: 4px;
            max-height: 200px;
            overflow-y: auto;
            z-index: 10000;
            min-width: 150px;
            display: none;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
            backdrop-filter: blur(12px);
        }

        .multi-option {
            padding: 10px 12px;
            cursor: pointer;
            color: #e0e0e0;
            transition: all 0.15s ease;
            border-radius: 6px;
            margin: 2px;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .multi-option:hover {
            background: #444;
            color: #fff;
        }

        .multi-option.selected {
            background: #667eea;
            color: #fff;
        }

        .multi-option.selected:hover {
            background: #5a6fd8;
        }

        .checkbox {
            width: 16px;
            height: 16px;
            border: 1px solid #666;
            border-radius: 3px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 11px;
            font-weight: bold;
            transition: all 0.2s ease;
        }

        .multi-option.selected .checkbox {
            background: #fff;
            color: #667eea;
            border-color: #fff;
        }

        /* Allow rows to expand naturally for stacked content */
        .shot td {
            vertical-align: top;
            padding: 12px 16px;
        }

        .save-indicator {
            padding: 5px 10px;
            background: #22c55e;
            color: white;
            border-radius: 4px;
            font-size: 12px;
            opacity: 0;
            transition: opacity 0.3s;
        }

        .save-indicator.show {
            opacity: 1;
        }

        /* Keyboard shortcuts help */
        .shortcuts-help {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background: rgba(42, 42, 42, 0.9);
            border: 1px solid #555;
            border-radius: 6px;
            padding: 10px;
            font-size: 12px;
            opacity: 0;
            transition: opacity 0.3s ease;
            pointer-events: none;
            max-width: 200px;
        }

        .shortcuts-help.show {
            opacity: 1;
        }

        .shortcut-item {
            display: flex;
            justify-content: space-between;
            margin: 2px 0;
        }

        .shortcut-key {
            background: #555;
            padding: 2px 6px;
            border-radius: 3px;
            font-family: monospace;
            font-size: 11px;
        }

        /* Timing columns */
        .timing-input {
            width: 60px !important;
            font-size: 12px;
            padding: 2px 4px;
        }

        /* Takes field */
        .takes-input {
            width: 40px !important;
            font-size: 12px;
            padding: 2px 4px;
            text-align: center;
        }
        
        /* Improved time input styling */
        .time-input-group {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            white-space: nowrap;
        }
        
        .time-input-wrapper {
            display: inline-flex;
            align-items: center;
            position: relative;
        }
        
        .time-input {
            width: 60px;
            padding: 4px 24px 4px 8px;
            background: #2a2a2a;
            border: 1px solid #555;
            color: #ffffff;
            text-align: center;
            font-size: 14px;
            font-weight: 600;
            border-radius: 4px;
            -moz-appearance: textfield;
        }
        
        .time-input::-webkit-inner-spin-button,
        .time-input::-webkit-outer-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
        
        .time-input:focus {
            outline: none;
            border-color: #667eea;
            background: #333;
        }
        
        .time-arrows {
            position: absolute;
            right: 2px;
            top: 50%;
            transform: translateY(-50%);
            display: flex;
            flex-direction: column;
            gap: 0;
        }
        
        .time-arrow {
            width: 18px;
            height: 14px;
            background: #3a3a3a;
            border: 1px solid #555;
            color: #bbb;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 10px;
            font-weight: bold;
            line-height: 1;
            padding: 0;
            transition: all 0.1s;
            user-select: none;
        }
        
        .time-arrow:first-child {
            border-radius: 2px 2px 0 0;
            border-bottom: none;
        }
        
        .time-arrow:last-child {
            border-radius: 0 0 2px 2px;
        }
        
        .time-arrow:hover {
            background: #667eea;
            color: #ffffff;
            border-color: #667eea;
        }
        
        .time-arrow:active {
            background: #5a6fd8;
        }

        /* CSS-based arrow visibility on hover */
        .time-segment .time-arrow {
            opacity: 0;
            transition: opacity 0.15s ease;
        }

        .time-segment:hover .time-arrow {
            opacity: 1;
        }

        .time-label {
            color: #999;
            font-size: 13px;
            font-weight: 600;
            margin-left: 2px;
        }
        
        /* Total time badge styling */
        .total-time-badge {
            display: inline-block;
            padding: 6px 16px;
            background: linear-gradient(135deg, #3a3a3a, #2a2a2a);
            border: 1px solid #555;
            border-radius: 20px;
            color: #ffd700;
            font-size: 15px;
            font-weight: 700;
            box-shadow: 0 2px 4px rgba(0,0,0,0.3);
            text-shadow: 0 1px 2px rgba(0,0,0,0.5);
            white-space: nowrap;
            min-width: 90px;
            text-align: center;
        }

        /* ====== SIMPLE HOVER FOOTER ====== */
        .simple-footer {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            height: 37px;
            background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
            border-top: 1px solid #444;
            display: flex;
            align-items: center;
            padding: 0 16px;
            z-index: 999;
            box-shadow: 0 -2px 8px rgba(0,0,0,0.3);
        }

        .footer-left {
            flex: 1;
            display: flex;
            align-items: center;
        }

        .footer-center {
            display: flex;
            align-items: center;
            gap: 16px;
        }

        .footer-right {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: flex-end;
        }

        .project-stats-compact {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 12px;
            color: #a0a0a0;
        }

        .stat-item {
            font-weight: 500;
        }

        .stat-separator {
            opacity: 0.5;
        }

        .page-nav-btn {
            position: relative;
            background: transparent;
            border: none;
            color: #e0e0e0;
            cursor: pointer;
            padding: 8px 12px;
            border-radius: 8px;
            transition: all 0.2s ease;
            font-size: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .page-nav-btn:hover {
            background: rgba(59, 130, 246, 0.2);
            color: #3b82f6;
        }

        .page-nav-btn.active {
            background: rgba(59, 130, 246, 0.3);
            color: #ffffff;
        }

        /* Hover Tooltips */
        .page-nav-btn .tooltip {
            position: absolute;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(0, 0, 0, 0.9);
            color: #fff;
            padding: 6px 12px;
            border-radius: 6px;
            font-size: 12px;
            font-weight: 500;
            white-space: nowrap;
            opacity: 0;
            visibility: hidden;
            transition: all 0.2s ease;
            pointer-events: none;
            margin-bottom: 8px;
            border: 1px solid #444;
            box-shadow: 0 4px 12px rgba(0,0,0,0.4);
        }

        .page-nav-btn .tooltip::after {
            content: '';
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%);
            width: 0;
            height: 0;
            border-left: 6px solid transparent;
            border-right: 6px solid transparent;
            border-top: 6px solid rgba(0, 0, 0, 0.9);
        }

        .page-nav-btn:hover .tooltip {
            opacity: 1;
            visibility: visible;
        }

        /* ====== DOOD PAGE STYLES ====== */
        .page-container {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 37px; /* Account for footer */
            background: #0f0f0f;
            overflow-y: auto;
            padding: 20px;
        }

        .dood-page-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 24px;
            padding-bottom: 16px;
            border-bottom: 1px solid #444;
            position: relative;
        }
        
        .dood-header-left {
            flex: 1;
            display: flex;
            justify-content: flex-start;
        }

        .dood-page-header h2 {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            margin: 0;
            color: #e0e0e0;
            font-size: 24px;
            font-weight: 600;
        }

        .dood-tabs {
            flex: 1;
            display: flex;
            justify-content: center;
            gap: 8px;
        }

        .dood-tab-btn {
            padding: 8px 16px;
            background: transparent;
            border: 1px solid #444;
            border-radius: 6px;
            color: #e0e0e0;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .dood-tab-btn:hover {
            background: rgba(59, 130, 246, 0.2);
            border-color: #3b82f6;
        }

        .dood-tab-btn.active {
            background: #3b82f6;
            border-color: #3b82f6;
            color: #ffffff;
        }

        .dood-content {
            flex: 1;
        }

        .dood-tab-content {
            display: none;
        }

        .dood-tab-content.active {
            display: block;
        }

        .cast-table-placeholder,
        .crew-table-placeholder {
            background: #1a1a1a;
            border: 1px solid #444;
            border-radius: 8px;
            padding: 24px;
            color: #e0e0e0;
        }

        .cast-table-placeholder ul,
        .crew-table-placeholder ul {
            margin-left: 20px;
            margin-top: 12px;
        }

        .cast-table-placeholder li,
        .crew-table-placeholder li {
            margin: 6px 0;
        }

        /* ====== CAST DOOD TABLE STYLES ====== */
        .cast-dood-controls {
            margin-bottom: 16px;
            display: flex;
            justify-content: flex-start;
        }

        .add-cast-btn {
            background: #3b82f6;
            border: 1px solid #3b82f6;
            color: #ffffff;
            padding: 8px 16px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 500;
            transition: all 0.2s ease;
        }

        .add-cast-btn:hover {
            background: #2563eb;
            border-color: #2563eb;
        }

        .cast-dood-table-container {
            overflow-x: auto;
            border: 1px solid #444;
            border-radius: 8px;
            background: #1a1a1a;
        }

        .cast-dood-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 13px;
            color: #e0e0e0;
            font-weight: bold;
        }

        .cast-dood-table thead th {
            color: #ffffff;
            padding: 12px 8px;
            text-align: center;
            font-weight: 600;
            border-right: 1px solid rgba(255, 255, 255, 0.1);
            border-bottom: 1px solid #444;
            position: sticky;
            top: 0;
            z-index: 10;
            font-size: 13px;
        }
        
        /* Alternating header colors to match Production page */
        .cast-dood-table thead th:nth-child(odd) {
            background: #2c3e50; /* Dark slate blue */
        }
        
        .cast-dood-table thead th:nth-child(even) {
            background: #384556; /* Lighter slate blue */
        }
        
        /* Remove border from last column */
        .cast-dood-table thead th:last-child {
            border-right: none;
        }

        .cast-dood-table tbody tr {
            transition: background-color 0.2s ease;
        }

        .cast-dood-table tbody tr:nth-child(odd) {
            background: #1a1a1a;
        }

        .cast-dood-table tbody tr:nth-child(even) {
            background: #222222;
        }

        .cast-dood-table tbody tr:hover {
            background: rgba(59, 130, 246, 0.1);
        }

        /* Cast row color system - solid character color background */
        .cast-dood-table tbody tr.colored {
            background: var(--persistent-color) !important;
        }

        .cast-dood-table tbody tr.colored:hover {
            background: var(--persistent-color) !important;
        }

        .cast-dood-table tbody tr.colored td {
            background: var(--persistent-color) !important;
        }

        .cast-dood-table tbody td {
            padding: 10px 8px;
            border-bottom: 1px solid #333;
            vertical-align: middle;
        }

        .character-cell {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .character-color-dot {
            width: 16px;
            height: 16px;
            border-radius: 50%;
            border: 2px solid #444;
            cursor: pointer;
            transition: all 0.2s ease;
            position: relative;
        }

        .character-color-dot:hover {
            border-color: #3b82f6;
            transform: scale(1.1);
        }

        .character-name-input,
        .cast-name-input,
        .phone-input,
        .email-input,
        .day-rate-input,
        .total-rate-input,
        .allergies-input {
            background: #2a2a2a;
            border: 1px solid transparent;
            color: #e0e0e0;
            padding: 4px 6px;
            border-radius: 4px;
            font-size: 13px;
            font-weight: bold;
            width: 100%;
        }

        .character-name-input:focus,
        .cast-name-input:focus,
        .phone-input:focus,
        .email-input:focus,
        .day-rate-input:focus,
        .total-rate-input:focus,
        .allergies-input:focus {
            border-color: #3b82f6;
            background: #2a2a2a;
            outline: none;
        }

        .filming-days-cell {
            text-align: center;
            font-weight: 600;
            color: #3b82f6;
        }

        .filming-days-display {
            font-weight: 900;
            font-size: 16px;
            color: white;
            text-align: center;
            padding: 4px;
            background: rgba(59, 130, 246, 0.1);
            border-radius: 4px;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
            font-family: 'Arial Black', Arial, sans-serif;
        }

        .total-rate-cell {
            position: relative;
        }

        .total-rate-calculated {
            background: #1a1a1a !important;
            color: #ffffff !important;
            border: 1px solid #444 !important;
            font-weight: 600;
        }

        .total-rate-manual {
            background: #4d3a2a !important;
            color: #f59e0b !important;
            border: 1px solid #f59e0b !important;
            font-weight: 500;
        }

        .total-rate-container {
            position: relative;
            display: inline-block;
            width: 100%;
        }

        .calc-indicator {
            position: absolute;
            right: 2px;
            top: 2px;
            color: #10b981;
            font-size: 10px;
            pointer-events: none;
            background: rgba(16, 185, 129, 0.1);
            border-radius: 2px;
            padding: 1px 2px;
        }

        .blackout-dates-cell {
            position: relative;
        }

        .blackout-dates-btn {
            background: transparent;
            border: 1px solid #444;
            color: #e0e0e0;
            padding: 6px 12px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 12px;
            transition: all 0.2s ease;
            width: 100%;
        }

        .blackout-dates-btn:hover {
            border-color: #3b82f6;
            background: rgba(59, 130, 246, 0.1);
        }

        .conflicts-cell {
            color: #ef4444;
            font-weight: 500;
            text-align: center;
        }

        .conflicts-cell.no-conflicts {
            color: #10b981;
        }

        .actions-cell {
            text-align: center;
        }

        .delete-cast-btn {
            background: transparent;
            border: 1px solid #ef4444;
            color: #ef4444;
            padding: 4px 8px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 11px;
            transition: all 0.2s ease;
        }

        .delete-cast-btn:hover {
            background: #ef4444;
            color: #ffffff;
        }

        .crew-coming-soon {
            text-align: center;
            padding: 60px 20px;
            color: #a0a0a0;
        }

        /* Inline editing styles for Cast DOOD */
        .inline-edit-input {
            background: #2a2a2a;
            border: 1px solid transparent;
            color: #e0e0e0;
            padding: 4px 6px;
            border-radius: 3px;
            width: 100%;
            min-width: 80px;
            font-size: 13px;
            font-weight: bold;
            transition: all 0.2s ease;
        }

        .inline-edit-input:focus {
            outline: none;
            border-color: #3b82f6;
            background: #2a2a2a;
        }

        .inline-edit-input:hover {
            border-color: #555;
            background: rgba(255, 255, 255, 0.05);
        }

        .inline-edit-textarea {
            background: #2a2a2a;
            border: 1px solid transparent;
            color: #e0e0e0;
            padding: 4px 6px;
            border-radius: 3px;
            width: 100%;
            min-width: 100px;
            min-height: 40px;
            font-size: 13px;
            font-weight: bold;
            resize: vertical;
            font-family: inherit;
            transition: all 0.2s ease;
        }

        .inline-edit-textarea::placeholder {
            color: rgba(224, 224, 224, 0.5);
            font-weight: normal;
        }

        .inline-edit-textarea:focus {
            outline: none;
            border-color: #3b82f6;
            background: rgba(59, 130, 246, 0.1);
        }

        .inline-edit-textarea:hover {
            border-color: #555;
            background: rgba(255, 255, 255, 0.05);
        }

        .filming-days-display {
            background: #2a2a2a;
            border-radius: 4px;
            color: #10b981;
            font-weight: 500;
            text-align: center;
            padding: 4px;
            cursor: help;
        }

        .blackout-dates-display {
            cursor: pointer;
            padding: 6px 8px;
            border-radius: 4px;
            background: #5c1a1a;
            color: #ffffff;
            font-weight: bold;
            border: 1px solid #4a1515;
            text-shadow: 1px 1px 0 #000000, -1px -1px 0 #000000, 1px -1px 0 #000000, -1px 1px 0 #000000;
            box-shadow:
                inset 1px 1px 2px rgba(255,255,255,0.1),
                inset -1px -1px 2px rgba(0,0,0,0.3),
                0 2px 4px rgba(0,0,0,0.2);
            text-align: center;
            font-size: 12px;
            transition: all 0.2s ease;
            word-wrap: break-word;
            white-space: normal;
            line-height: 1.3;
            min-height: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .blackout-dates-display:hover {
            background: #6b1515;
            border-color: #5c1a1a;
            box-shadow:
                inset 1px 1px 3px rgba(255,255,255,0.15),
                inset -1px -1px 3px rgba(0,0,0,0.4),
                0 3px 6px rgba(0,0,0,0.3);
            transform: translateY(-1px);
        }

        .conflicts-display {
            text-align: center;
            padding: 6px 10px;
            border-radius: 6px;
            font-size: 12px;
            font-weight: 600;
            letter-spacing: 0.5px;
            text-transform: uppercase;
            transition: all 0.2s ease;
            position: relative;
            overflow: hidden;
        }

        .conflicts-display.has-conflicts {
            background: rgba(0, 0, 0, 0.8);
            color: #ffffff;
            border: 2px solid #ff4444;
            font-weight: 600;
            box-shadow: 0 2px 8px rgba(255, 68, 68, 0.3);
            animation: conflictGlow 2s ease-in-out infinite alternate;
        }

        @keyframes conflictGlow {
            0% {
                box-shadow: 0 2px 8px rgba(255, 68, 68, 0.3), 0 0 0 0 rgba(255, 68, 68, 0.4);
            }
            100% {
                box-shadow: 0 2px 8px rgba(255, 68, 68, 0.5), 0 0 0 3px rgba(255, 68, 68, 0.1);
            }
        }

        .conflicts-display:not(.has-conflicts) {
            background: rgba(0, 40, 0, 0.6);
            color: #4ade80;
            border: 1px solid rgba(74, 222, 128, 0.4);
            font-weight: 500;
        }

        .conflicts-display:not(.has-conflicts):hover {
            background: rgba(0, 50, 0, 0.7);
            color: #6ee7b7;
            transform: translateY(-1px);
            box-shadow: 0 2px 8px rgba(74, 222, 128, 0.2);
        }

        .conflicts-display.has-conflicts:hover {
            background: rgba(0, 0, 0, 0.9);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(255, 68, 68, 0.4);
            border-color: #ff6666;
            transition: all 0.2s ease;
        }

        /* Cast DOOD table column sizing for better proportions */
        .cast-dood-table th:nth-child(1),
        .cast-dood-table td:nth-child(1) {
            width: 50px;
            min-width: 50px;
        }

        .cast-dood-table th:nth-child(2),
        .cast-dood-table td:nth-child(2) {
            width: 120px;
            min-width: 120px;
        }

        .cast-dood-table th:nth-child(3),
        .cast-dood-table td:nth-child(3) {
            width: 180px;
            min-width: 180px;
        }

        .cast-dood-table th:nth-child(4),
        .cast-dood-table td:nth-child(4) {
            width: 140px;
            min-width: 140px;
        }

        .cast-dood-table th:nth-child(5),
        .cast-dood-table td:nth-child(5) {
            width: 160px;
            min-width: 160px;
        }

        .cast-dood-table th:nth-child(6),
        .cast-dood-table td:nth-child(6) {
            width: 80px;
            min-width: 80px;
        }

        .cast-dood-table th:nth-child(7),
        .cast-dood-table td:nth-child(7) {
            width: 100px;
            min-width: 100px;
        }

        .cast-dood-table th:nth-child(8),
        .cast-dood-table td:nth-child(8) {
            min-width: 120px;
        }

        .cast-dood-table th:nth-child(9),
        .cast-dood-table td:nth-child(9) {
            width: 140px;
            min-width: 140px;
        }

        .cast-dood-table th:nth-child(10),
        .cast-dood-table td:nth-child(10) {
            width: 120px;
            min-width: 120px;
        }

        .cast-dood-table th:nth-child(11),
        .cast-dood-table td:nth-child(11) {
            width: 150px;
            min-width: 150px;
        }

        .cast-dood-table th:nth-child(12),
        .cast-dood-table td:nth-child(12) {
            width: 60px;
            min-width: 60px;
        }
        
        /* Character number cell with integrated color picker */
        .character-number-cell {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 4px;
        }
        
        .character-number-input {
            flex: 0 0 auto;
        }
        
        .character-color-dot {
            flex: 0 0 auto;
            border: 1px solid rgba(255, 255, 255, 0.2);
            transition: all 0.2s ease;
        }
        
        .character-color-dot:hover {
            transform: scale(1.1);
            border-color: rgba(255, 255, 255, 0.4);
        }

        .crew-coming-soon h3 {
            color: #e0e0e0;
            margin-bottom: 16px;
            font-size: 24px;
        }

        .crew-coming-soon p {
            margin: 8px 0;
            font-size: 16px;
        }

        /* Color Picker Popup */
        .color-picker-popup {
            position: absolute;
            top: 100%;
            left: 0;
            background: #2a2a2a;
            border: 1px solid #444;
            border-radius: 8px;
            padding: 12px;
            z-index: 1000;
            box-shadow: 0 4px 12px rgba(0,0,0,0.4);
            display: none;
        }

        .color-picker-grid {
            display: grid;
            grid-template-columns: repeat(8, 1fr);
            gap: 6px;
            margin-bottom: 12px;
        }

        .color-option {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            border: 2px solid #444;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .color-option:hover {
            border-color: #ffffff;
            transform: scale(1.1);
        }

        .color-option.selected {
            border-color: #3b82f6;
            border-width: 3px;
        }

        .custom-color-input {
            width: 100%;
            height: 32px;
            border: 1px solid #444;
            border-radius: 4px;
            background: transparent;
            cursor: pointer;
        }

        /* Adjust main content to account for footer */
        body {
            padding-bottom: 37px;
        }

        /* ===== CHARACTER TAGGING STYLES ===== */
        .character-pill {
            transition: opacity 0.2s ease;
        }

        .character-pill:hover {
            opacity: 0.8;
        }

        .character-pill .character-remove:hover {
            opacity: 1;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 50%;
        }

        .character-add-btn:hover {
            background: #16a34a !important;
            transform: translateY(-1px);
        }

        .character-picker-modal .character-picker-list div:hover:not([style*="opacity: 0.6"]) {
            background: #3a3a3a !important;
            border-left: 4px solid #4ade80 !important;
        }

        /* ====== CONFLICT MIRRORING STYLES ====== */
        .has-conflicts {
            position: relative;
            background-color: rgba(255, 68, 68, 0.08) !important;
            border-left: 4px solid #ff4444 !important;
            box-shadow: inset 0 0 0 1px rgba(255, 68, 68, 0.1);
        }

        .has-conflicts:hover {
            background-color: rgba(255, 68, 68, 0.12) !important;
            box-shadow: inset 0 0 0 1px rgba(255, 68, 68, 0.2);
        }

        .conflict-warning {
            margin-left: 8px;
            color: #ff4444;
            font-size: 16px;
            cursor: pointer;
            animation: pulse 2s infinite;
            display: inline-block;
            vertical-align: middle;
            background: rgba(0, 0, 0, 0.7);
            padding: 2px 6px;
            border-radius: 4px;
            border: 1px solid rgba(255, 68, 68, 0.4);
        }

        .conflict-warning:hover {
            color: #ffffff;
            background: rgba(255, 68, 68, 0.8);
            border-color: #ff4444;
            transform: scale(1.05);
        }

        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.6; }
        }

        .conflict-details-row {
            background-color: rgba(255, 107, 107, 0.05) !important;
            border-left: 4px solid #ff6b6b !important;
        }

        .conflict-details {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        }

        .conflict-details h4 {
            margin: 0 0 12px 0;
            color: #ff6b6b;
            font-size: 14px;
            font-weight: 600;
        }

        .conflict-item {
            margin: 8px 0;
            padding: 8px;
            background: rgba(255, 107, 107, 0.1);
            border-radius: 4px;
            border-left: 3px solid #ff6b6b;
            font-size: 13px;
            line-height: 1.4;
        }

        .conflict-item strong {
            color: #ff6b6b;
        }

        .conflict-item small {
            color: #888;
            font-size: 11px;
        }

        .conflict-item button {
            margin-left: 12px;
            padding: 4px 8px;
            background: #4ade80;
            border: none;
            border-radius: 4px;
            color: white;
            cursor: pointer;
            font-size: 11px;
            font-weight: 500;
            transition: background-color 0.2s ease;
        }

        .conflict-item button:hover {
            background: #22c55e;
        }

        .conflict-row-expanded {
            border-bottom: none !important;
        }

        .conflict-status-indicator {
            display: inline-block;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            margin-right: 6px;
            vertical-align: middle;
        }

        .conflict-status-indicator.clear {
            background-color: #4ade80;
        }

        .conflict-status-indicator.conflict {
            background-color: #ff6b6b;
        }

        /* ====== CONFLICT TOOLTIP STYLES ====== */
        .conflict-tooltip {
            position: fixed;
            background: rgba(0, 0, 0, 0.95);
            color: #ffffff;
            border: 2px solid #ff4444;
            border-radius: 8px;
            padding: 12px 16px;
            font-size: 13px;
            line-height: 1.5;
            font-weight: 500;
            max-width: 350px;
            min-width: 280px;
            z-index: 10000;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 0 4px 16px rgba(255, 68, 68, 0.3);
            pointer-events: none;
            opacity: 0;
            transform: translateY(10px);
            transition: all 0.2s ease;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        }

        .conflict-tooltip.show {
            opacity: 1;
            transform: translateY(0);
        }

        .conflict-tooltip-header {
            display: flex;
            align-items: center;
            margin-bottom: 12px;
            font-weight: 600;
            color: #ff4444;
            font-size: 14px;
        }

        .conflict-tooltip-header .warning-icon {
            margin-right: 8px;
            font-size: 16px;
        }

        .conflict-tooltip-content {
            color: #e0e0e0;
        }

        .conflict-tooltip-item {
            margin: 8px 0;
            padding-left: 16px;
            position: relative;
        }

        .conflict-tooltip-item:before {
            content: '•';
            position: absolute;
            left: 0;
            color: #ff4444;
            font-weight: bold;
        }

        .conflict-tooltip-tip {
            margin-top: 12px;
            padding-top: 12px;
            border-top: 1px solid rgba(255, 68, 68, 0.3);
            font-size: 12px;
            color: #aaa;
            font-style: italic;
        }

        /* Split Scene Animation */
        @keyframes slideUp {
            from {
                transform: translateY(0);
            }
            to {
                transform: translateY(-8px);
            }
        }

        @keyframes slideDown {
            from {
                transform: translateY(0);
            }
            to {
                transform: translateY(8px);
            }
        }

        .split-scene-before {
            animation: slideUp 0.5s ease-out forwards;
            margin-bottom: 8px;
        }

        .split-scene-after {
            animation: slideDown 0.5s ease-out forwards;
            margin-top: 8px;
        }

        /* PDF Text Layer Styling - Make text selectable */
        .pdf-page-wrapper {
            position: relative;
            margin-bottom: 20px;
        }

        .pdf-page-wrapper canvas {
            display: block;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
        }

        .pdf-page-wrapper .textLayer {
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            overflow: hidden;
            opacity: 0.2;
            line-height: 1.0;
        }

        .pdf-page-wrapper .textLayer > span {
            color: transparent;
            position: absolute;
            white-space: pre;
            cursor: text;
            transform-origin: 0% 0%;
        }

        .pdf-page-wrapper .textLayer ::selection {
            background: rgba(0, 123, 255, 0.3);
        }

/* Conflict Item Animations - Slide up when removed */
.conflict-item {
    transition: max-height 0.5s ease-out, opacity 0.5s ease-out, margin-bottom 0.5s ease-out, transform 0.5s ease-out;
    max-height: 500px;
    opacity: 1;
    overflow: hidden;
}

.conflict-item-removing {
    max-height: 0 !important;
    opacity: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    transform: translateY(-10px) !important;
}

@keyframes slideUpAndFade {
    0% {
        max-height: 500px;
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        max-height: 0;
        opacity: 0;
        margin-bottom: 0;
        padding-top: 0;
        padding-bottom: 0;
        transform: translateY(-10px);
    }
}

/* ====== STRIPBOARD PAGE STYLES ====== */
#stripboard-page {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0a0a0a;
    z-index: 100;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding: 0; /* Override .page-container padding - header should be flush */
}

.stripboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    background: #0f0f0f;
    border-bottom: 1px solid #444;
    position: sticky;
    top: 0;
    z-index: 10;
}

.stripboard-header h2 {
    margin: 0;
    color: #e0e0e0;
    font-size: 24px;
    font-weight: 600;
}

.stripboard-controls {
    display: flex;
    gap: 12px;
    align-items: center;
}

#block-filter {
    padding: 8px 12px;
    background: #2a2a2a;
    border: 1px solid #444;
    border-radius: 6px;
    color: #e0e0e0;
    font-size: 14px;
    cursor: pointer;
    outline: none;
}

#block-filter:hover {
    border-color: #666;
}

#add-day-btn {
    padding: 8px 16px;
    background: #3b82f6;
    border: 1px solid #3b82f6;
    border-radius: 6px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

#add-day-btn:hover {
    background: #2563eb;
    border-color: #2563eb;
}

.stripboard-content {
    padding: 20px 24px;
    background: #0a0a0a;
    flex: 1;
    overflow-y: auto;
}

.stripboard-block {
    margin-bottom: 24px;
    background: #1a1a1a;
    border-radius: 8px;
    overflow: hidden;
    /* border set dynamically per block via JavaScript */
}

.block-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: #1a1a1a;
    cursor: pointer;
}

.block-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.block-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #999;
}

.summary-item {
    color: #ccc;
}

.summary-separator {
    color: #555;
}

.block-collapse-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
}

.block-collapse-btn svg {
    transition: transform 0.2s ease;
    transform: rotate(0deg);
}

.block-collapse-btn.collapsed svg {
    transform: rotate(-90deg);
}

.block-collapse-btn:hover {
    transform: scale(1.15);
}

.block-header h3 {
    margin: 0;
    color: #e0e0e0;
    font-size: 18px;
    font-weight: 600;
}

.block-content {
    padding: 12px;
}

.stripboard-day {
    margin-bottom: 12px;
    background: #1a1a1a;
    border-radius: 6px;
    overflow: hidden;
    /* border set dynamically per day via JavaScript */
}

.day-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: #252525;
    cursor: pointer;
    transition: background 0.2s ease;
}

.day-header:hover {
    background: #2a2a2a;
}

.day-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.day-expand-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
}

.day-expand-btn svg {
    transition: transform 0.2s ease;
    transform: rotate(0deg);
}

.day-expand-btn.collapsed svg {
    transform: rotate(-90deg);
}

.day-expand-btn:hover {
    transform: scale(1.15);
}

.day-name {
    color: #e0e0e0;
    font-size: 15px;
    font-weight: 500;
}

.day-header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.scene-count {
    color: #999;
    font-size: 13px;
}

.day-content {
    padding: 8px;
}

/* Stripboard Strip Cards - Classic Production Strip Style */
.stripboard-strip {
    background: #1a1a1a;
    /* border set dynamically per scene via JavaScript (full colored stroke) */
    border-radius: 4px;
    padding: 12px 16px;
    margin-bottom: 8px;
    cursor: grab;
    transition: all 0.2s ease;
}

.stripboard-strip:hover {
    background: #222;
    border-color: #444;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.stripboard-strip.dragging {
    opacity: 0.5;
    cursor: grabbing;
}

.stripboard-strip:active {
    cursor: grabbing;
}

.strip-content {
    pointer-events: none;
}

/* Cast Conflict Badge - Right-Click Resolve Conflicts Feature */
.cast-conflict-badge {
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    background: #eab308;
    color: #1f2937;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    z-index: 10;
    letter-spacing: 0.3px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    transition: all 0.2s ease;
}

.cast-conflict-badge:hover {
    background: #fbbf24;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

/* Custom tooltip for conflict badge - appears instantly */
.cast-conflict-badge::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    background: #1f2937;
    color: #fff;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 400;
    white-space: pre-line;
    opacity: 0;
    pointer-events: none;
    z-index: 1000;
    min-width: 300px;
    max-width: 400px;
    text-align: left;
    line-height: 1.4;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    transition: opacity 0.1s ease;
}

.cast-conflict-badge:hover::after {
    opacity: 1;
}

/* Stripboard-specific scene styling - scoped to avoid affecting Production page */
#stripboard-page .scene-number {
    min-width: 40px;
    color: #3b82f6;
    font-weight: 600;
    font-size: 14px;
}

#stripboard-page .scene-details {
    flex: 1;
}

#stripboard-page .scene-heading {
    color: #e0e0e0;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 4px;
}

#stripboard-page .scene-description {
    color: #999;
    font-size: 13px;
}

#stripboard-page .scene-pages {
    color: #999;
    font-size: 13px;
    min-width: 50px;
    text-align: right;
}

/* PHASE 2 - Conflict Log Resolved Animation */
@keyframes flipToResolved {
    0% {
        transform: rotateY(0deg);
        opacity: 1;
    }
    50% {
        transform: rotateY(90deg);
        opacity: 0.5;
    }
    100% {
        transform: rotateY(0deg);
        opacity: 1;
    }
}

/* Conflict log item styling for resolved conflicts */
.conflict-log-item[data-type="resolved"] {
    background-color: rgba(34, 197, 94, 0.1) !important;
    border-left: 4px solid #22c55e !important;
}

.conflict-log-item[data-type="resolved"] .conflict-log-icon {
    color: #22c55e !important;
}


/* ========== STRIPBOARD SCENES SIDEBAR (V21) ========== */

/* Sidebar container - slides in from right */
.stripboard-scenes-sidebar {
    position: fixed;
    right: -450px; /* Hidden by default */
    top: 0;
    width: 450px;
    height: 100vh;
    background: #1a1a1a;
    border-left: 1px solid #333;
    z-index: 100;
    display: flex;
    flex-direction: column;
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: -4px 0 12px rgba(0, 0, 0, 0.4);
}

/* Sidebar open state */
.stripboard-scenes-sidebar.open {
    right: 0;
}

/* When sidebar is open, push stripboard page left and scale down */
#stripboard-page.sidebar-open #stripboard-content {
    margin-right: 450px;
    transition: margin-right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Sidebar header */
.stripboard-scenes-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #2a2a2a;
    border-bottom: 1px solid #444;
}

.stripboard-scenes-sidebar-header h3 {
    margin: 0;
    font-size: 16px;
    color: #e0e0e0;
    font-weight: 600;
}

.close-sidebar-btn {
    background: transparent;
    border: none;
    color: #999;
    font-size: 20px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.close-sidebar-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

/* Sidebar content area */
.stripboard-scenes-sidebar-content {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Two-column layout */
.scene-sidebar-columns {
    display: flex;
    height: 100%;
    background: #1a1a1a;
    position: relative;
}

.scene-sidebar-left {
    flex-basis: 300px;
    flex-shrink: 0;
    flex-grow: 0;
    background: #1a1a1a;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.sidebar-column-divider {
    width: 5px;
    background: #333;
    cursor: col-resize;
    flex-shrink: 0;
    transition: background 0.2s ease;
    position: relative;
}

.sidebar-column-divider:hover {
    background: #444;
}

.sidebar-column-divider.dragging {
    background: #3b82f6;
}

.scene-sidebar-right {
    flex: 1;
    background: #1a1a1a;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Section headers */
.scene-sidebar-section-header {
    padding: 8px 12px;
    background: #2a2a2a;
    border-bottom: 1px solid #444;
    font-size: 12px;
    font-weight: 600;
    color: #999;
}

/* Search filters */
.scene-search-filters {
    padding: 12px;
    background: #222;
    border-bottom: 1px solid #333;
}

.scene-search-group {
    margin-bottom: 8px;
}

.scene-search-group:last-child {
    margin-bottom: 0;
}

.scene-search-group label {
    display: block;
    font-size: 11px;
    color: #999;
    margin-bottom: 4px;
    font-weight: 500;
}

.scene-search-input {
    width: 100%;
    padding: 6px 8px;
    background: #1a1a1a;
    border: 1px solid #444;
    border-radius: 4px;
    color: #e0e0e0;
    font-size: 12px;
    transition: border-color 0.2s ease;
}

.scene-search-input:focus {
    outline: none;
    border-color: #3b82f6;
}

.scene-search-input::placeholder {
    color: #666;
}

/* Toggle switch */
.scene-sidebar-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: #222;
    border-bottom: 1px solid #333;
    font-size: 12px;
    color: #ccc;
}

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 20px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #555;
    transition: 0.3s;
    border-radius: 20px;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
}

.toggle-switch input:checked + .toggle-slider {
    background-color: #3b82f6;
}

.toggle-switch input:checked + .toggle-slider:before {
    transform: translateX(20px);
}

/* Scene strips list */
.scene-strips-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}

/* Individual scene strip (will be styled like stripboard strips) */
.scene-strip-item {
    padding: 8px 10px;
    margin-bottom: 4px;
    background: #0a0a0a;
    border-left: 5px solid #666;
    border-radius: 4px;
    cursor: move;
    user-select: none;
    transition: all 0.2s ease;
}

.scene-strip-item:hover {
    background: #333;
    transform: translateX(-2px);
}

.scene-strip-item.selected {
    background: rgba(59, 130, 246, 0.2);
    border-left-color: #3b82f6;
}

.scene-strip-item.scheduled {
    background: rgba(251, 191, 36, 0.1);
    border-left-color: #fbbf24;
}

.scene-strip-number {
    font-weight: bold;
    color: #e0e0e0;
    margin-right: 8px;
}

.scene-strip-location {
    color: #ccc;
    font-size: 12px;
}

.scene-strip-description {
    color: #888;
    font-size: 11px;
    margin-top: 2px;
}

/* Quick filters (will copy from Production page) */
.scene-quick-filters {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
}

/* Scrollbar styling for sidebar */
.scene-strips-list::-webkit-scrollbar,
.scene-quick-filters::-webkit-scrollbar {
    width: 8px;
}

.scene-strips-list::-webkit-scrollbar-track,
.scene-quick-filters::-webkit-scrollbar-track {
    background: #1a1a1a;
}

.scene-strips-list::-webkit-scrollbar-thumb,
.scene-quick-filters::-webkit-scrollbar-thumb {
    background: #444;
    border-radius: 4px;
}

.scene-strips-list::-webkit-scrollbar-thumb:hover,
.scene-quick-filters::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Column visibility controls in sidebar header */
.sidebar-column-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.sidebar-column-controls label {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    color: #ccc;
    transition: color 0.2s ease;
}

.sidebar-column-controls label:hover {
    color: #fff;
}

/* Quick Filters Section Styling */
.scene-quick-filters {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.filter-match-mode {
    padding: 8px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 4px;
    margin-bottom: 4px;
}

.match-mode-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 11px;
    color: #aaa;
}

.match-mode-toggle input[type="checkbox"] {
    cursor: pointer;
}

.match-mode-label {
    user-select: none;
}

.filter-section {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.filter-section-divider {
    height: 1px;
    background: #333;
    margin: 4px 0;
}

.filter-group-label {
    font-size: 11px;
    color: #888;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.filter-buttons-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.3s ease;
}

.filter-buttons-group.collapsed {
    max-height: 0 !important;
    opacity: 0;
}

.custom-filter-category .filter-category-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    padding: 2px 0;
}

.custom-filter-category .filter-category-header:hover .filter-group-label {
    color: #aaa;
}

.collapse-icon {
    font-size: 10px;
    color: #666;
    transition: transform 0.2s ease;
}

/* Scene strip styling enhancements */
.scene-strip-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.scene-strip-header {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.scene-strip-time {
    font-size: 10px;
    color: #777;
}

.scene-strip-cast {
    font-size: 10px;
    color: #666;
    margin-top: 2px;
}

.scene-strip-item.scene-scheduled {
    background: rgba(251, 191, 36, 0.15);
    border-left-color: #fbbf24;
}

.scene-strip-item.scene-scheduled:hover {
    background: rgba(251, 191, 36, 0.25);
}

/* Hide columns when toggled off */
.scene-sidebar-columns.single-column .scene-sidebar-left:not(.hidden) {
    flex: 1;
    max-width: 100%;
}

.scene-sidebar-columns.single-column .scene-sidebar-right:not(.hidden) {
    flex: 1;
    max-width: 100%;
}

.sidebar-column-controls label:hover {
    color: #fff;
}

.sidebar-column-controls input[type="checkbox"] {
    cursor: pointer;
}

/* Hide columns when unchecked */
.scene-sidebar-left.hidden {
    display: none;
}

/* ========== DRAG AND DROP STYLING ========== */

/* Dragging state for scene strips */
.scene-strip-item.dragging {
    opacity: 0.5;
}

.scene-strip-item.filter-hidden {
    display: none;
}

/* Drag ghost */
.scene-drag-ghost {
    background: #2a2a2a;
    border: 2px solid #3b82f6;
    border-radius: 4px;
    padding: 8px 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

/* Drop zone states on stripboard days */
.stripboard-day.drop-zone-active {
    outline: 2px dashed rgba(59, 130, 246, 0.3);
    outline-offset: 2px;
    transition: outline 0.2s ease;
}

.stripboard-day.drop-zone-hover {
    outline: 2px solid #3b82f6;
    background: rgba(59, 130, 246, 0.05);
}

/* Keep existing .scene-sidebar-left.hidden */
.scene-sidebar-left.hidden {
    display: none;
}

.scene-sidebar-right.hidden {
    display: none;
}

/* When only one column visible, take full width */
.scene-sidebar-columns.single-column .scene-sidebar-left,
.scene-sidebar-columns.single-column .scene-sidebar-right {
    flex: 1;
}