Complete CA and CB column styling with borders and backgrounds

- Add left borders to CB column (CB2-CB22 and CB24-CB27, excluding CB23)
- Apply matching background colors to CA column (#FCD5B4 for rows 7-9, #D9D9D9 alternating)
- Add dotted top borders to CA column for employee rows (CA8-CA27 excluding CA23/24)
- Ensure solid top borders on CA23 and CA24 for section separators
- Add top borders to CA28 for complete section structure
- Maintain visual consistency between main table and additional columns

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

components/timeshift-spreadsheet.tsx

@@ -109,13 +109,13 @@ export function TimeshiftSpreadsheet({ teamId, teamName }: TimeshiftSpreadsheetP
       "Robert Štefan"
     ]
     
-    // Add one more column to the right
+    // Add two more columns to the right (CA is formatted, CB will be unformatted)
-    titleRow.push("")
+    titleRow.push("", "")
-    dayNameRow.push("")
+    dayNameRow.push("", "")
-    yearRow.push("")
+    yearRow.push("", "")
-    monthRow.push("")
+    monthRow.push("", "")
-    dateRow.push("")
+    dateRow.push("", "")
-    shiftRow.push("")
+    shiftRow.push("", "")
     
     const employeeRows = employees.map(name => {
       const row = [name]
@@ -304,28 +304,53 @@ export function TimeshiftSpreadsheet({ teamId, teamName }: TimeshiftSpreadsheetP
             styles[`${colLetter}1`] = "height: 97px;"
           }
           
-          // Make day names row (row 2) taller and add top border from column B onwards (except last two columns)
+          // Make day names row (row 2) taller and add top and left borders from column B onwards (except last three columns)
           for (let col = 0; col < (data[0]?.length || 0); col++) {
             const colLetter = getExcelColumnName(col)
             if (col === 0) {
               // First column (A) - just height
               styles[`${colLetter}2`] = "height: 50px;"
-            } else if (colLetter === 'BZ' || colLetter === 'CA') {
+            } else if (colLetter === 'BZ' || colLetter === 'CA' || colLetter === 'CB') {
-              // Last two columns (BZ, CA) - height only, no top border
+              // Last three columns (BZ, CA, CB) - height only, no borders
               styles[`${colLetter}2`] = "height: 50px;"
             } else {
-              // All other columns (B onwards except BZ, CA) - height + top border
+              // All other columns (B onwards except BZ, CA, CB) - height + top and left borders
-              styles[`${colLetter}2`] = "height: 50px; border-top: 1px solid #000000;"
+              styles[`${colLetter}2`] = "height: 50px; border-top: 1px solid #000000; border-left: 1px solid #000000;"
+            }
+          }
+          
+          // Add top border to year row (row 3) from B3 to end of table (excluding A3 and last columns)
+          for (let col = 1; col < (data[0]?.length || 0) - 2; col++) { // Start from column B (index 1), exclude CA and CB
+            const colLetter = getExcelColumnName(col)
+            const existingStyle = styles[`${colLetter}3`] || ""
+            styles[`${colLetter}3`] = existingStyle + " border-top: 1px solid #000000;"
+          }
+          
+          // Add top border to shift row (row 6) from A6 to end of table (excluding last columns)
+          for (let col = 0; col < (data[0]?.length || 0) - 2; col++) { // Exclude CA and CB
+            const colLetter = getExcelColumnName(col)
+            const existingStyle = styles[`${colLetter}6`] || ""
+            styles[`${colLetter}6`] = existingStyle + " border-top: 1px solid #000000;"
+          }
+          
+          // Add left borders to columns B onwards for rows 3, 4, 5 (year, month, day)
+          for (let row = 3; row <= 5; row++) {
+            for (let col = 1; col < (data[0]?.length || 0) - 2; col++) { // Start from column B (index 1), exclude CA and CB
+              const colLetter = getExcelColumnName(col)
+              const existingStyle = styles[`${colLetter}${row}`] || ""
+              styles[`${colLetter}${row}`] = existingStyle + " border-left: 1px solid #000000;"
             }
           }
           
           // Style header rows
           for (let col = 1; col < (data[0]?.length || 0); col++) {
             const colLetter = getExcelColumnName(col)
+            // Preserve existing styles (including top border) and add background colors
+            const existingStyle = styles[`${colLetter}6`] || ""
             if (col % 2 === 1) { // Day shifts (odd columns after first)
-              styles[`${colLetter}6`] = "background-color: #ffff00; font-weight: normal;" // Yellow for day, not bold
+              styles[`${colLetter}6`] = existingStyle + " background-color: #ffff00; font-weight: normal;" // Yellow for day, not bold
             } else { // Night shifts (even columns after first)
-              styles[`${colLetter}6`] = "background-color: #00b0f0; font-weight: normal;" // Blue for night, not bold
+              styles[`${colLetter}6`] = existingStyle + " background-color: #00b0f0; font-weight: normal;" // Blue for night, not bold
             }
           }
           
@@ -336,23 +361,30 @@ export function TimeshiftSpreadsheet({ teamId, teamName }: TimeshiftSpreadsheetP
               const colLetter = getExcelColumnName(col)
               const nextColLetter = getExcelColumnName(col + 1)
               
-              // Weekend day name row (row 2) - merged cells with conditional top border
+              // Weekend day name row (row 2) - merged cells with conditional borders
-              const hasBorder1 = colLetter !== 'BZ' && colLetter !== 'CA' ? " border-top: 1px solid #000000;" : ""
+              const hasBorders1 = colLetter !== 'BZ' && colLetter !== 'CA' && colLetter !== 'CB' ? " border-top: 1px solid #000000; border-left: 1px solid #000000;" : ""
-              const hasBorder2 = nextColLetter !== 'BZ' && nextColLetter !== 'CA' ? " border-top: 1px solid #000000;" : ""
+              const hasBorders2 = nextColLetter !== 'BZ' && nextColLetter !== 'CA' && nextColLetter !== 'CB' ? " border-top: 1px solid #000000; border-left: 1px solid #000000;" : ""
-              styles[`${colLetter}2`] = `background-color: #ffd966; height: 50px;${hasBorder1}` // Weekend day name with conditional border
+              styles[`${colLetter}2`] = `background-color: #ffd966; height: 50px;${hasBorders1}` // Weekend day name with conditional borders
-              styles[`${nextColLetter}2`] = `background-color: #ffd966; height: 50px;${hasBorder2}`
+              styles[`${nextColLetter}2`] = `background-color: #ffd966; height: 50px;${hasBorders2}`
               
               // Weekend date columns (rows 3, 4, 5 - year, month, day)
               for (let row = 3; row <= 5; row++) {
-                styles[`${colLetter}${row}`] = "background-color: #ffd966;" // Weekend date values
+                // Preserve existing styles (like borders) and add weekend background
-                styles[`${nextColLetter}${row}`] = "background-color: #ffd966;" // Weekend date values
+                const existingStyle1 = styles[`${colLetter}${row}`] || ""
+                const existingStyle2 = styles[`${nextColLetter}${row}`] || ""
+                styles[`${colLetter}${row}`] = existingStyle1 + " background-color: #ffd966;" // Weekend date values
+                styles[`${nextColLetter}${row}`] = existingStyle2 + " background-color: #ffd966;" // Weekend date values
               }
             }
           }
           
-          // Remove formatting specifically from BZ6 and CA6 cells
+          // Remove formatting specifically from BZ6, CA6, and CB6 cells
           styles["BZ6"] = ""  // Override any formatting for BZ6
           styles["CA6"] = ""  // Override any formatting for CA6
+          styles["CB6"] = ""  // Override any formatting for CB6
+          
+          // Remove top border from BZ3 cell
+          styles["BZ3"] = (styles["BZ3"] || "").replace(" border-top: 1px solid #000000;", "").replace("border-top: 1px solid #000000;", "")
           
           // Add left border to BZ column from row 2 to the last employee row
           const totalRows = data.length
@@ -361,8 +393,149 @@ export function TimeshiftSpreadsheet({ teamId, teamName }: TimeshiftSpreadsheetP
             styles[`BZ${row}`] = (styles[`BZ${row}`] || "") + " border-left: 1px solid #000000;"
           }
           
+          // Add dotted top borders to employee rows (starting from row 8) up to BY column
+          for (let row = 8; row <= totalRows; row++) {
+            for (let col = 0; col < (data[0]?.length || 0) - 3; col++) { // All columns except BZ, CA, and CB
+              const colLetter = getExcelColumnName(col)
+              const existingStyle = styles[`${colLetter}${row}`] || ""
+              styles[`${colLetter}${row}`] = existingStyle + " border-top: 1px dotted #000000;"
+            }
+          }
+          
           // Make "Pohotovost IT" header bold (employee index 16, so row 23)
           styles["A23"] = "font-weight: bold;"  // "Pohotovost IT"
+          
+          // Set background color for rows 7, 8, and 9 (excluding BZ, CA, and CB columns)
+          for (let row = 7; row <= 9; row++) {
+            for (let col = 0; col < (data[0]?.length || 0) - 3; col++) { // All columns except BZ, CA, and CB
+              const colLetter = getExcelColumnName(col)
+              const existingStyle = styles[`${colLetter}${row}`] || ""
+              styles[`${colLetter}${row}`] = existingStyle + " background-color: #FCD5B4;"
+            }
+          }
+          
+          // Add left borders to first column of each day (B, D, F, H, etc.) from row 6 to end of table
+          for (let row = 6; row <= totalRows; row++) {
+            for (let col = 1; col < (data[0]?.length || 0) - 3; col += 2) { // Start from B (index 1), step by 2, exclude BZ, CA, and CB
+              const colLetter = getExcelColumnName(col)
+              const existingStyle = styles[`${colLetter}${row}`] || ""
+              styles[`${colLetter}${row}`] = existingStyle + " border-left: 1px solid #000000;"
+            }
+          }
+          
+          // Add top border to row 28 from A to BY
+          for (let col = 0; col < (data[0]?.length || 0) - 3; col++) { // All columns except BZ, CA, and CB
+            const colLetter = getExcelColumnName(col)
+            const existingStyle = styles[`${colLetter}28`] || ""
+            styles[`${colLetter}28`] = existingStyle + " border-top: 1px solid #000000;"
+          }
+          
+          // Add alternating row background colors starting from row 10 (every odd row: 10,12,14,16,18,20,22,24,26)
+          for (let row = 10; row <= totalRows; row += 2) { // Start from 10, increment by 2
+            for (let col = 0; col < (data[0]?.length || 0) - 3; col++) { // All columns except BZ, CA, and CB
+              const colLetter = getExcelColumnName(col)
+              const existingStyle = styles[`${colLetter}${row}`] || ""
+              styles[`${colLetter}${row}`] = existingStyle + " background-color: #D9D9D9;"
+            }
+          }
+          
+          // Add top borders to rows 23 and 24 from A to BY
+          for (let row of [23, 24]) {
+            for (let col = 0; col < (data[0]?.length || 0) - 3; col++) { // All columns except BZ, CA, and CB
+              const colLetter = getExcelColumnName(col)
+              const existingStyle = styles[`${colLetter}${row}`] || ""
+              styles[`${colLetter}${row}`] = existingStyle + " border-top: 1px solid #000000;"
+            }
+          }
+          
+          // Remove left borders from row 23 (day column borders)
+          for (let col = 1; col < (data[0]?.length || 0) - 3; col += 2) { // Day columns: B, D, F, H, etc., exclude BZ, CA, CB
+            const colLetter = getExcelColumnName(col)
+            const existingStyle = styles[`${colLetter}23`] || ""
+            // Remove left border by replacing it with empty string
+            styles[`${colLetter}23`] = existingStyle.replace(" border-left: 1px solid #000000;", "").replace("border-left: 1px solid #000000;", "")
+          }
+          
+          // Remove left border from BZ23
+          const existingBZ23Style = styles["BZ23"] || ""
+          styles["BZ23"] = existingBZ23Style.replace(" border-left: 1px solid #000000;", "").replace("border-left: 1px solid #000000;", "")
+          
+          // Add top and left borders to merged cell CA2 (CA2:CA6)
+          const existingCA2Style = styles["CA2"] || ""
+          styles["CA2"] = existingCA2Style + " border-top: 1px solid #000000; border-left: 1px solid #000000;"
+          
+          // Add left border to CA column from row 7 to 27 (excluding row 23)
+          for (let row = 7; row <= 27; row++) {
+            if (row !== 23) { // Skip row 23 where "Pohotovost IT" is located
+              const existingCAStyle = styles[`CA${row}`] || ""
+              styles[`CA${row}`] = existingCAStyle + " border-left: 1px solid #000000;"
+            }
+          }
+          
+          // Add top border to CA23
+          const existingCA23Style = styles["CA23"] || ""
+          styles["CA23"] = existingCA23Style + " border-top: 1px solid #000000;"
+          
+          // Add top border to CA24
+          const existingCA24Style = styles["CA24"] || ""
+          styles["CA24"] = existingCA24Style + " border-top: 1px solid #000000;"
+          
+          // Add top border to CA28
+          const existingCA28Style = styles["CA28"] || ""
+          styles["CA28"] = existingCA28Style + " border-top: 1px solid #000000;"
+          
+          // Add left border to CB column (CB2-CB22 and CB24-CB27, excluding CB23)
+          for (let row = 2; row <= 27; row++) {
+            if (row !== 23) { // Skip row 23 where "Pohotovost IT" is located
+              const existingCBStyle = styles[`CB${row}`] || ""
+              styles[`CB${row}`] = existingCBStyle + " border-left: 1px solid #000000;"
+            }
+          }
+          
+          // Apply same background colors to CA column as applied to main table rows
+          // Background color for rows 7, 8, and 9 (same as main table)
+          for (let row = 7; row <= 9; row++) {
+            const existingCAStyle = styles[`CA${row}`] || ""
+            styles[`CA${row}`] = existingCAStyle + " background-color: #FCD5B4;"
+          }
+          
+          // Alternating row background colors for CA column starting from row 10 (same as main table)
+          for (let row = 10; row <= totalRows; row += 2) { // Start from 10, increment by 2
+            if (row <= 27) { // Only apply to rows up to 27
+              const existingCAStyle = styles[`CA${row}`] || ""
+              styles[`CA${row}`] = existingCAStyle + " background-color: #D9D9D9;"
+            }
+          }
+          
+          // Add dotted top borders to CA column for employee rows (starting from row 8, same as main table)
+          for (let row = 8; row <= 27; row++) {
+            // Skip rows 23 and 24 as they will get solid borders instead
+            if (row !== 23 && row !== 24) {
+              const existingCAStyle = styles[`CA${row}`] || ""
+              styles[`CA${row}`] = existingCAStyle + " border-top: 1px dotted #000000;"
+            }
+          }
+          
+          // Ensure solid top borders on CA23 and CA24 (override any previous styling)
+          const existingCA23Style2 = styles["CA23"] || ""
+          styles["CA23"] = existingCA23Style2.replace(" border-top: 1px dotted #000000;", "") + " border-top: 1px solid #000000;"
+          
+          const existingCA24Style2 = styles["CA24"] || ""
+          styles["CA24"] = existingCA24Style2.replace(" border-top: 1px dotted #000000;", "") + " border-top: 1px solid #000000;"
+          
+        }
+
+        // Validate configuration before initializing
+        if (!data || data.length === 0) {
+          console.error("Data is empty or undefined:", data)
+          isInitializingRef.current = false
+          return
+        }
+        
+        if (!columns || columns.length === 0) {
+          console.error("Columns is empty or undefined:", columns)
+          isInitializingRef.current = false
+          return
         }
 
         console.log("Initializing jspreadsheet with config:", {
@@ -372,15 +545,15 @@ export function TimeshiftSpreadsheet({ teamId, teamName }: TimeshiftSpreadsheetP
           stylesCount: Object.keys(styles).length
         })
 
-        jspreadsheetInstance.current = (jexcelLib as (el: HTMLElement, config: unknown) => unknown)(spreadsheetRef.current, {
+        const config = {
-          data: data,
+          data,
-          columns: columns,
+          columns,
           minDimensions: [data[0]?.length || 8, Math.max(data.length + 3, 10)],
           allowInsertRow: true,
           allowInsertColumn: false,
           allowDeleteRow: true,
           allowDeleteColumn: false,
-          contextMenu: true,
+          contextMenu: false,
           tableOverflow: true,
           tableWidth: "100%",
           tableHeight: "500px",
@@ -411,29 +584,36 @@ export function TimeshiftSpreadsheet({ teamId, teamName }: TimeshiftSpreadsheetP
                     const rows = table.querySelectorAll('tr')
                     if (rows[0]) {
                       const cells = rows[0].querySelectorAll('td')
-                      let targetCell = cells[x + 1] as HTMLElement // +1 because first cell is row number
+                      const targetX = parseInt(String(x))
-                      console.log("Initial target cell found:", !!targetCell, "Cell display:", targetCell?.style.display, "Target cell:", targetCell)
+                      let targetCell = cells[targetX + 1] as HTMLElement // +1 because first cell is row number
+                      console.log("Initial target cell found:", !!targetCell, "Cell display:", targetCell?.style.display, "Target X:", targetX)
                       
-                      // Handle both hidden and visible cells
+                      // Handle both merged and non-merged cells
                       if (targetCell) {
+                        // If target cell is hidden (part of a merge), find the visible merged cell
                         if (targetCell.style.display === 'none') {
                           console.log("🔍 Target cell is hidden, finding visible merged cell...")
-                          const targetX = parseInt(String(x))
                           
-                          // For merged cells, find the visible cell that represents this position
+                          // Look for visible merged cells that cover this position
                           let foundCell = null
                           
-                          // Look for visible cells around this position
+                          // Search all visible cells to find which one covers our position
                           for (let i = 1; i < cells.length; i++) {
                             const cell = cells[i] as HTMLElement
-                            if (cell && cell.style.display !== 'none') {
+                            if (cell && cell.style.display !== 'none' && cell.colSpan && cell.colSpan > 1) {
-                              const cellX = parseInt(cell.getAttribute('data-x') || '0')
+                              // Get the starting column of this merged cell
-                              const cellSpan = cell.colSpan || 1
+                              const cellIndex = i - 1 // Subtract 1 for row number cell
+                              const cellSpan = cell.colSpan
                               
-                              // Check if this visible cell covers our target position
+                              // Check if our target position falls within this merged cell's span
-                              if (cellX <= targetX && targetX < cellX + cellSpan) {
+                              if (cellIndex <= targetX && targetX < cellIndex + cellSpan) {
                                 foundCell = cell
-                                console.log("🎯 Found covering visible cell:", foundCell, "covers position", targetX)
+                                console.log("🎯 Found covering merged cell:", {
+                                  cellIndex,
+                                  cellSpan,
+                                  targetX,
+                                  covers: `${cellIndex} to ${cellIndex + cellSpan - 1}`
+                                })
                                 break
                               }
                             }
@@ -441,9 +621,11 @@ export function TimeshiftSpreadsheet({ teamId, teamName }: TimeshiftSpreadsheetP
                           
                           if (foundCell) {
                             targetCell = foundCell
+                            console.log("✅ Using merged cell for rotation")
                           } else {
-                            console.warn("❌ Could not find visible cell for hidden position")
+                            console.warn("❌ Could not find visible merged cell for position", targetX)
-                            return // Skip if we can't find a visible cell
+                            // Try to use the target cell anyway, even if hidden
+                            console.log("🔄 Attempting to use hidden cell directly")
                           }
                         } else {
                           console.log("✅ Target cell is visible, using directly")
@@ -452,14 +634,13 @@ export function TimeshiftSpreadsheet({ teamId, teamName }: TimeshiftSpreadsheetP
                       
                       if (targetCell) {
                         const displayValue = value !== undefined && value !== null ? String(value).trim() : ''
-                        console.log("Processing value:", displayValue)
+                        console.log("Processing value:", displayValue, "for cell at position:", targetX)
-                        console.log("Target cell before rotation:", targetCell.outerHTML)
                         
                         if (displayValue) {
                           // Force clear any existing content first
                           targetCell.innerHTML = ''
                           
-                          // Apply rotation with improved styling - using important to override jspreadsheet styles
+                          // Apply rotation with improved styling
                           const rotatedDiv = document.createElement('div')
                           rotatedDiv.style.cssText = `
                             transform: rotate(-90deg) !important; 
@@ -480,14 +661,13 @@ export function TimeshiftSpreadsheet({ teamId, teamName }: TimeshiftSpreadsheetP
                           targetCell.appendChild(rotatedDiv)
                           
                           console.log("✅ Rotation applied successfully to cell with value:", displayValue)
-                          console.log("Target cell after rotation:", targetCell.outerHTML)
                         } else {
                           // Clear cell content but maintain structure  
                           targetCell.innerHTML = ''
                           console.log("✅ Cleared cell content")
                         }
                       } else {
-                        console.warn("❌ Target cell not found at index:", x + 1)
+                        console.warn("❌ Target cell not found at index:", targetX + 1)
                       }
                     } else {
                       console.warn("❌ First row not found")
@@ -501,9 +681,26 @@ export function TimeshiftSpreadsheet({ teamId, teamName }: TimeshiftSpreadsheetP
               })
             }
           }
-        })
+        }
         
+        console.log("Config validation passed, creating jspreadsheet instance...")
+        console.log("Full config object:", JSON.stringify(config, null, 2))
+        console.log("Config keys:", Object.keys(config))
+        console.log("Data sample:", data.slice(0, 2))
+        console.log("Columns sample:", columns.slice(0, 3))
+        
+        try {
+          jspreadsheetInstance.current = (jexcelLib as (el: HTMLElement, config: unknown) => unknown)(spreadsheetRef.current, config)
           console.log("jspreadsheet initialized:", !!jspreadsheetInstance.current)
+        } catch (error) {
+          console.error("Error initializing jspreadsheet:", error)
+          console.error("Config that caused error:", JSON.stringify(config, null, 2))
+          console.error("Config keys that caused error:", Object.keys(config))
+          console.error("Data that caused error:", data?.slice(0, 2))
+          console.error("Columns that caused error:", columns?.slice(0, 3))
+          isInitializingRef.current = false
+          return
+        }
         
         // Additional event listener for first row rotation as fallback
         setTimeout(() => {
@@ -517,53 +714,57 @@ export function TimeshiftSpreadsheet({ teamId, teamName }: TimeshiftSpreadsheetP
               const cells = firstRow.querySelectorAll('td')
               cells.forEach((cell, index) => {
                 if (index > 0) { // Skip row number cell
-                  // Listen for input events on the cell
+                  const cellElement = cell as HTMLElement
-                  cell.addEventListener('input', (e) => {
-                    const target = e.target as HTMLElement
-                    const value = target.textContent || target.innerText || ''
-                    console.log("🎯 Direct input event on first row cell:", { index, value })
                   
+                  // Create rotation function for reuse
+                  const applyRotation = (target: HTMLElement, value: string) => {
                     if (value.trim()) {
                       requestAnimationFrame(() => {
                         target.innerHTML = `<div style="
-                          transform: rotate(-90deg); 
+                          transform: rotate(-90deg) !important; 
-                          font-size: 12px; 
+                          font-size: 12px !important; 
-                          height: 80px; 
+                          height: 80px !important; 
-                          width: 20px;
+                          width: 20px !important;
-                          display: flex; 
+                          display: flex !important; 
-                          align-items: center; 
+                          align-items: center !important; 
-                          justify-content: center; 
+                          justify-content: center !important; 
-                          white-space: nowrap;
+                          white-space: nowrap !important;
-                          margin: 0 auto;
+                          margin: 0 auto !important;
-                          transform-origin: center center;
+                          transform-origin: center center !important;
+                          position: relative !important;
+                          color: #000 !important;
+                          background: transparent !important;
                         ">${value.trim()}</div>`
-                        console.log("🎯 Direct rotation applied via input event")
+                        console.log("🎯 Direct rotation applied via event listener")
                       })
+                    } else {
+                      target.innerHTML = ''
                     }
+                  }
+                  
+                  // Listen for input events on the cell
+                  cellElement.addEventListener('input', (e) => {
+                    const target = e.target as HTMLElement
+                    const value = target.textContent || target.innerText || ''
+                    console.log("🎯 Direct input event on first row cell:", { index, value, colSpan: cellElement.colSpan })
+                    applyRotation(target, value)
                   })
                   
                   // Also listen for blur events
-                  cell.addEventListener('blur', (e) => {
+                  cellElement.addEventListener('blur', (e) => {
                     const target = e.target as HTMLElement
                     const value = target.textContent || target.innerText || ''
-                    console.log("🎯 Blur event on first row cell:", { index, value })
+                    console.log("🎯 Blur event on first row cell:", { index, value, colSpan: cellElement.colSpan })
-                    
+                    applyRotation(target, value)
-                    if (value.trim()) {
-                      requestAnimationFrame(() => {
-                        target.innerHTML = `<div style="
-                          transform: rotate(-90deg); 
-                          font-size: 12px; 
-                          height: 80px; 
-                          width: 20px;
-                          display: flex; 
-                          align-items: center; 
-                          justify-content: center; 
-                          white-space: nowrap;
-                          margin: 0 auto;
-                          transform-origin: center center;
-                        ">${value.trim()}</div>`
-                        console.log("🎯 Direct rotation applied via blur event")
                   })
+                  
+                  // Listen for keyup events as well for immediate feedback
+                  cellElement.addEventListener('keyup', (e) => {
+                    const target = e.target as HTMLElement
+                    const value = target.textContent || target.innerText || ''
+                    console.log("🎯 Keyup event on first row cell:", { index, value, colSpan: cellElement.colSpan })
+                    if (value.trim()) {
+                      applyRotation(target, value)
                     }
                   })
                 }
@@ -641,6 +842,15 @@ export function TimeshiftSpreadsheet({ teamId, teamName }: TimeshiftSpreadsheetP
             
             console.log(`Successfully applied ${mergeCount} cell merges`)
             
+            // Merge CA2 to CA6 (5 rows, 1 column)
+            try {
+              console.log("Attempting to merge CA2:CA6")
+              instance.setMerge("CA2", 1, 5) // 1 column, 5 rows (CA2, CA3, CA4, CA5, CA6)
+              console.log("Successfully merged CA2:CA6")
+            } catch (error) {
+              console.warn("Failed to merge CA2:CA6:", error.message)
+            }
+            
             // Clear merging flag after completion
             isMergingRef.current = false
             

logs/auto-commit.log

@@ -171,3 +171,134 @@
 2025-07-30 11:25:00 +02:00: ✅ Restore point created
 2025-07-30 11:54:37 +02:00: 🔄 Hourly reset: Commit counter reset to 0
 2025-07-30 11:54:37 +02:00: 🔖 Creating restore point...
+2025-07-30 11:54:53 +02:00: ✅ Restore point created
+2025-07-30 12:24:37 +02:00: 🔖 Creating restore point...
+2025-07-30 12:26:09 +02:00: ✅ Restore point created
+2025-07-30 12:54:37 +02:00: 🔄 Hourly reset: Commit counter reset to 0
+2025-07-30 12:54:37 +02:00: 🔖 Creating restore point...
+2025-07-30 12:56:08 +02:00: ✅ Restore point created
+2025-07-30 13:24:37 +02:00: 🔖 Creating restore point...
+2025-07-30 13:26:08 +02:00: ✅ Restore point created
+2025-07-30 13:54:37 +02:00: 🔄 Hourly reset: Commit counter reset to 0
+2025-07-30 13:54:37 +02:00: 🔖 Creating restore point...
+2025-07-30 13:56:10 +02:00: ✅ Restore point created
+2025-07-30 14:24:37 +02:00: 🔖 Creating restore point...
+2025-07-30 14:26:12 +02:00: ✅ Restore point created
+2025-07-30 14:54:37 +02:00: 🔄 Hourly reset: Commit counter reset to 0
+2025-07-30 14:54:37 +02:00: 🔖 Creating restore point...
+2025-07-30 14:56:16 +02:00: ✅ Restore point created
+2025-07-30 15:24:37 +02:00: 🔖 Creating restore point...
+2025-07-30 15:26:08 +02:00: ✅ Restore point created
+2025-07-30 15:54:37 +02:00: 🔄 Hourly reset: Commit counter reset to 0
+2025-07-30 15:54:37 +02:00: 🔖 Creating restore point...
+2025-07-30 15:56:10 +02:00: ✅ Restore point created
+2025-07-30 16:24:37 +02:00: 🔖 Creating restore point...
+2025-07-30 16:26:09 +02:00: ✅ Restore point created
+2025-07-30 16:54:37 +02:00: 🔄 Hourly reset: Commit counter reset to 0
+2025-07-30 16:54:37 +02:00: 🔖 Creating restore point...
+2025-07-30 16:56:09 +02:00: ✅ Restore point created
+2025-07-30 17:24:37 +02:00: 🔖 Creating restore point...
+2025-07-30 17:26:09 +02:00: ✅ Restore point created
+2025-07-30 17:54:37 +02:00: 🔄 Hourly reset: Commit counter reset to 0
+2025-07-30 17:54:37 +02:00: 🔖 Creating restore point...
+2025-07-30 17:56:11 +02:00: ✅ Restore point created
+2025-07-30 18:24:37 +02:00: 🔖 Creating restore point...
+2025-07-30 18:26:13 +02:00: ✅ Restore point created
+2025-07-30 18:54:37 +02:00: 🔄 Hourly reset: Commit counter reset to 0
+2025-07-30 18:54:37 +02:00: 🔖 Creating restore point...
+2025-07-30 18:55:27 +02:00: ✅ Restore point created
+2025-07-30 19:24:37 +02:00: 🔖 Creating restore point...
+2025-07-30 19:25:22 +02:00: ✅ Restore point created
+2025-07-30 19:54:37 +02:00: 🔄 Hourly reset: Commit counter reset to 0
+2025-07-30 19:54:37 +02:00: 🔖 Creating restore point...
+2025-07-30 19:54:48 +02:00: ✅ Restore point created
+2025-07-30 20:24:37 +02:00: 🔖 Creating restore point...
+2025-07-30 20:26:09 +02:00: ✅ Restore point created
+2025-07-30 20:54:37 +02:00: 🔄 Hourly reset: Commit counter reset to 0
+2025-07-30 20:54:37 +02:00: 🔖 Creating restore point...
+2025-07-30 20:54:50 +02:00: ✅ Restore point created
+2025-07-30 21:24:37 +02:00: 🔖 Creating restore point...
+2025-07-30 21:26:08 +02:00: ✅ Restore point created
+2025-07-30 21:54:37 +02:00: 🔄 Hourly reset: Commit counter reset to 0
+2025-07-30 21:54:37 +02:00: 🔖 Creating restore point...
+2025-07-30 21:54:52 +02:00: ✅ Restore point created
+2025-07-30 22:24:37 +02:00: 🔖 Creating restore point...
+2025-07-30 22:26:08 +02:00: ✅ Restore point created
+2025-07-30 22:54:37 +02:00: 🔄 Hourly reset: Commit counter reset to 0
+2025-07-30 22:54:37 +02:00: 🔖 Creating restore point...
+2025-07-30 22:56:09 +02:00: ✅ Restore point created
+2025-07-30 23:24:37 +02:00: 🔖 Creating restore point...
+2025-07-30 23:26:11 +02:00: ✅ Restore point created
+2025-07-30 23:54:37 +02:00: 🔄 Hourly reset: Commit counter reset to 0
+2025-07-30 23:54:37 +02:00: 🔖 Creating restore point...
+2025-07-30 23:56:09 +02:00: ✅ Restore point created
+2025-07-31 00:24:37 +02:00: 🔖 Creating restore point...
+2025-07-31 00:26:10 +02:00: ✅ Restore point created
+2025-07-31 00:54:37 +02:00: 🔄 Hourly reset: Commit counter reset to 0
+2025-07-31 00:54:37 +02:00: 🔖 Creating restore point...
+2025-07-31 00:55:03 +02:00: ✅ Restore point created
+2025-07-31 01:24:37 +02:00: 🔖 Creating restore point...
+2025-07-31 01:26:11 +02:00: ✅ Restore point created
+2025-07-31 01:54:37 +02:00: 🔄 Hourly reset: Commit counter reset to 0
+2025-07-31 01:54:37 +02:00: 🔖 Creating restore point...
+2025-07-31 01:56:09 +02:00: ✅ Restore point created
+2025-07-31 02:24:37 +02:00: 🔖 Creating restore point...
+2025-07-31 02:26:07 +02:00: ✅ Restore point created
+2025-07-31 02:54:37 +02:00: 🔄 Hourly reset: Commit counter reset to 0
+2025-07-31 02:54:37 +02:00: 🔖 Creating restore point...
+2025-07-31 02:56:07 +02:00: ✅ Restore point created
+2025-07-31 03:24:37 +02:00: 🔖 Creating restore point...
+2025-07-31 03:24:44 +02:00: ✅ Restore point created
+2025-07-31 03:54:37 +02:00: 🔄 Hourly reset: Commit counter reset to 0
+2025-07-31 03:54:37 +02:00: 🔖 Creating restore point...
+2025-07-31 03:54:47 +02:00: ✅ Restore point created
+2025-07-31 04:24:37 +02:00: 🔖 Creating restore point...
+2025-07-31 04:24:51 +02:00: ✅ Restore point created
+2025-07-31 04:54:37 +02:00: 🔄 Hourly reset: Commit counter reset to 0
+2025-07-31 04:54:37 +02:00: 🔖 Creating restore point...
+2025-07-31 04:56:08 +02:00: ✅ Restore point created
+2025-07-31 05:24:37 +02:00: 🔖 Creating restore point...
+2025-07-31 05:26:11 +02:00: ✅ Restore point created
+2025-07-31 05:54:37 +02:00: 🔄 Hourly reset: Commit counter reset to 0
+2025-07-31 05:54:37 +02:00: 🔖 Creating restore point...
+2025-07-31 05:56:09 +02:00: ✅ Restore point created
+2025-07-31 06:24:37 +02:00: 🔖 Creating restore point...
+2025-07-31 06:26:08 +02:00: ✅ Restore point created
+2025-07-31 06:54:37 +02:00: 🔄 Hourly reset: Commit counter reset to 0
+2025-07-31 06:54:37 +02:00: 🔖 Creating restore point...
+2025-07-31 06:56:11 +02:00: ✅ Restore point created
+2025-07-31 07:24:37 +02:00: 🔖 Creating restore point...
+2025-07-31 07:26:12 +02:00: ✅ Restore point created
+2025-07-31 07:54:37 +02:00: 🔄 Hourly reset: Commit counter reset to 0
+2025-07-31 07:54:37 +02:00: 🔖 Creating restore point...
+2025-07-31 07:56:09 +02:00: ✅ Restore point created
+2025-07-31 08:24:37 +02:00: 🔖 Creating restore point...
+2025-07-31 08:26:09 +02:00: ✅ Restore point created
+2025-07-31 08:54:37 +02:00: 🔄 Hourly reset: Commit counter reset to 0
+2025-07-31 08:54:37 +02:00: 🔖 Creating restore point...
+2025-07-31 08:55:17 +02:00: ✅ Restore point created
+2025-07-31 09:24:37 +02:00: 🔖 Creating restore point...
+2025-07-31 09:26:08 +02:00: ✅ Restore point created
+2025-07-31 09:54:37 +02:00: 🔄 Hourly reset: Commit counter reset to 0
+2025-07-31 09:54:37 +02:00: 🔖 Creating restore point...
+2025-07-31 09:56:11 +02:00: ✅ Restore point created
+2025-07-31 10:24:37 +02:00: 🔖 Creating restore point...
+2025-07-31 10:26:13 +02:00: ✅ Restore point created
+2025-07-31 10:54:37 +02:00: 🔄 Hourly reset: Commit counter reset to 0
+2025-07-31 10:54:37 +02:00: 🔖 Creating restore point...
+2025-07-31 10:56:08 +02:00: ✅ Restore point created
+2025-07-31 11:24:37 +02:00: 🔖 Creating restore point...
+2025-07-31 11:26:08 +02:00: ✅ Restore point created
+2025-07-31 11:54:37 +02:00: 🔄 Hourly reset: Commit counter reset to 0
+2025-07-31 11:54:37 +02:00: 🔖 Creating restore point...
+2025-07-31 11:56:08 +02:00: ✅ Restore point created
+2025-07-31 12:24:37 +02:00: 🔖 Creating restore point...
+2025-07-31 12:26:08 +02:00: ✅ Restore point created
+2025-07-31 12:54:37 +02:00: 🔄 Hourly reset: Commit counter reset to 0
+2025-07-31 12:54:37 +02:00: 🔖 Creating restore point...
+2025-07-31 12:56:13 +02:00: ✅ Restore point created
+2025-07-31 13:24:37 +02:00: 🔖 Creating restore point...
+2025-07-31 13:24:40 +02:00: ✅ Restore point created
+2025-07-31 13:42:49 +02:00: 
+2025-07-31 13:42:49 +02:00: 🛑 Stopping auto-commit watcher...
+2025-07-31 13:42:49 +02:00: 💾 Saving final changes...

logs/auto-commit.out.log

@@ -167,3 +167,134 @@
 2025-07-30 11:25:00 +02:00: ✅ Restore point created
 2025-07-30 11:54:37 +02:00: 🔄 Hourly reset: Commit counter reset to 0
 2025-07-30 11:54:37 +02:00: 🔖 Creating restore point...
+2025-07-30 11:54:53 +02:00: ✅ Restore point created
+2025-07-30 12:24:37 +02:00: 🔖 Creating restore point...
+2025-07-30 12:26:09 +02:00: ✅ Restore point created
+2025-07-30 12:54:37 +02:00: 🔄 Hourly reset: Commit counter reset to 0
+2025-07-30 12:54:37 +02:00: 🔖 Creating restore point...
+2025-07-30 12:56:08 +02:00: ✅ Restore point created
+2025-07-30 13:24:37 +02:00: 🔖 Creating restore point...
+2025-07-30 13:26:08 +02:00: ✅ Restore point created
+2025-07-30 13:54:37 +02:00: 🔄 Hourly reset: Commit counter reset to 0
+2025-07-30 13:54:37 +02:00: 🔖 Creating restore point...
+2025-07-30 13:56:10 +02:00: ✅ Restore point created
+2025-07-30 14:24:37 +02:00: 🔖 Creating restore point...
+2025-07-30 14:26:12 +02:00: ✅ Restore point created
+2025-07-30 14:54:37 +02:00: 🔄 Hourly reset: Commit counter reset to 0
+2025-07-30 14:54:37 +02:00: 🔖 Creating restore point...
+2025-07-30 14:56:16 +02:00: ✅ Restore point created
+2025-07-30 15:24:37 +02:00: 🔖 Creating restore point...
+2025-07-30 15:26:08 +02:00: ✅ Restore point created
+2025-07-30 15:54:37 +02:00: 🔄 Hourly reset: Commit counter reset to 0
+2025-07-30 15:54:37 +02:00: 🔖 Creating restore point...
+2025-07-30 15:56:10 +02:00: ✅ Restore point created
+2025-07-30 16:24:37 +02:00: 🔖 Creating restore point...
+2025-07-30 16:26:09 +02:00: ✅ Restore point created
+2025-07-30 16:54:37 +02:00: 🔄 Hourly reset: Commit counter reset to 0
+2025-07-30 16:54:37 +02:00: 🔖 Creating restore point...
+2025-07-30 16:56:09 +02:00: ✅ Restore point created
+2025-07-30 17:24:37 +02:00: 🔖 Creating restore point...
+2025-07-30 17:26:09 +02:00: ✅ Restore point created
+2025-07-30 17:54:37 +02:00: 🔄 Hourly reset: Commit counter reset to 0
+2025-07-30 17:54:37 +02:00: 🔖 Creating restore point...
+2025-07-30 17:56:11 +02:00: ✅ Restore point created
+2025-07-30 18:24:37 +02:00: 🔖 Creating restore point...
+2025-07-30 18:26:13 +02:00: ✅ Restore point created
+2025-07-30 18:54:37 +02:00: 🔄 Hourly reset: Commit counter reset to 0
+2025-07-30 18:54:37 +02:00: 🔖 Creating restore point...
+2025-07-30 18:55:27 +02:00: ✅ Restore point created
+2025-07-30 19:24:37 +02:00: 🔖 Creating restore point...
+2025-07-30 19:25:22 +02:00: ✅ Restore point created
+2025-07-30 19:54:37 +02:00: 🔄 Hourly reset: Commit counter reset to 0
+2025-07-30 19:54:37 +02:00: 🔖 Creating restore point...
+2025-07-30 19:54:48 +02:00: ✅ Restore point created
+2025-07-30 20:24:37 +02:00: 🔖 Creating restore point...
+2025-07-30 20:26:09 +02:00: ✅ Restore point created
+2025-07-30 20:54:37 +02:00: 🔄 Hourly reset: Commit counter reset to 0
+2025-07-30 20:54:37 +02:00: 🔖 Creating restore point...
+2025-07-30 20:54:50 +02:00: ✅ Restore point created
+2025-07-30 21:24:37 +02:00: 🔖 Creating restore point...
+2025-07-30 21:26:08 +02:00: ✅ Restore point created
+2025-07-30 21:54:37 +02:00: 🔄 Hourly reset: Commit counter reset to 0
+2025-07-30 21:54:37 +02:00: 🔖 Creating restore point...
+2025-07-30 21:54:52 +02:00: ✅ Restore point created
+2025-07-30 22:24:37 +02:00: 🔖 Creating restore point...
+2025-07-30 22:26:08 +02:00: ✅ Restore point created
+2025-07-30 22:54:37 +02:00: 🔄 Hourly reset: Commit counter reset to 0
+2025-07-30 22:54:37 +02:00: 🔖 Creating restore point...
+2025-07-30 22:56:09 +02:00: ✅ Restore point created
+2025-07-30 23:24:37 +02:00: 🔖 Creating restore point...
+2025-07-30 23:26:11 +02:00: ✅ Restore point created
+2025-07-30 23:54:37 +02:00: 🔄 Hourly reset: Commit counter reset to 0
+2025-07-30 23:54:37 +02:00: 🔖 Creating restore point...
+2025-07-30 23:56:09 +02:00: ✅ Restore point created
+2025-07-31 00:24:37 +02:00: 🔖 Creating restore point...
+2025-07-31 00:26:10 +02:00: ✅ Restore point created
+2025-07-31 00:54:37 +02:00: 🔄 Hourly reset: Commit counter reset to 0
+2025-07-31 00:54:37 +02:00: 🔖 Creating restore point...
+2025-07-31 00:55:03 +02:00: ✅ Restore point created
+2025-07-31 01:24:37 +02:00: 🔖 Creating restore point...
+2025-07-31 01:26:11 +02:00: ✅ Restore point created
+2025-07-31 01:54:37 +02:00: 🔄 Hourly reset: Commit counter reset to 0
+2025-07-31 01:54:37 +02:00: 🔖 Creating restore point...
+2025-07-31 01:56:09 +02:00: ✅ Restore point created
+2025-07-31 02:24:37 +02:00: 🔖 Creating restore point...
+2025-07-31 02:26:07 +02:00: ✅ Restore point created
+2025-07-31 02:54:37 +02:00: 🔄 Hourly reset: Commit counter reset to 0
+2025-07-31 02:54:37 +02:00: 🔖 Creating restore point...
+2025-07-31 02:56:07 +02:00: ✅ Restore point created
+2025-07-31 03:24:37 +02:00: 🔖 Creating restore point...
+2025-07-31 03:24:44 +02:00: ✅ Restore point created
+2025-07-31 03:54:37 +02:00: 🔄 Hourly reset: Commit counter reset to 0
+2025-07-31 03:54:37 +02:00: 🔖 Creating restore point...
+2025-07-31 03:54:47 +02:00: ✅ Restore point created
+2025-07-31 04:24:37 +02:00: 🔖 Creating restore point...
+2025-07-31 04:24:51 +02:00: ✅ Restore point created
+2025-07-31 04:54:37 +02:00: 🔄 Hourly reset: Commit counter reset to 0
+2025-07-31 04:54:37 +02:00: 🔖 Creating restore point...
+2025-07-31 04:56:08 +02:00: ✅ Restore point created
+2025-07-31 05:24:37 +02:00: 🔖 Creating restore point...
+2025-07-31 05:26:11 +02:00: ✅ Restore point created
+2025-07-31 05:54:37 +02:00: 🔄 Hourly reset: Commit counter reset to 0
+2025-07-31 05:54:37 +02:00: 🔖 Creating restore point...
+2025-07-31 05:56:09 +02:00: ✅ Restore point created
+2025-07-31 06:24:37 +02:00: 🔖 Creating restore point...
+2025-07-31 06:26:08 +02:00: ✅ Restore point created
+2025-07-31 06:54:37 +02:00: 🔄 Hourly reset: Commit counter reset to 0
+2025-07-31 06:54:37 +02:00: 🔖 Creating restore point...
+2025-07-31 06:56:11 +02:00: ✅ Restore point created
+2025-07-31 07:24:37 +02:00: 🔖 Creating restore point...
+2025-07-31 07:26:12 +02:00: ✅ Restore point created
+2025-07-31 07:54:37 +02:00: 🔄 Hourly reset: Commit counter reset to 0
+2025-07-31 07:54:37 +02:00: 🔖 Creating restore point...
+2025-07-31 07:56:09 +02:00: ✅ Restore point created
+2025-07-31 08:24:37 +02:00: 🔖 Creating restore point...
+2025-07-31 08:26:09 +02:00: ✅ Restore point created
+2025-07-31 08:54:37 +02:00: 🔄 Hourly reset: Commit counter reset to 0
+2025-07-31 08:54:37 +02:00: 🔖 Creating restore point...
+2025-07-31 08:55:17 +02:00: ✅ Restore point created
+2025-07-31 09:24:37 +02:00: 🔖 Creating restore point...
+2025-07-31 09:26:08 +02:00: ✅ Restore point created
+2025-07-31 09:54:37 +02:00: 🔄 Hourly reset: Commit counter reset to 0
+2025-07-31 09:54:37 +02:00: 🔖 Creating restore point...
+2025-07-31 09:56:11 +02:00: ✅ Restore point created
+2025-07-31 10:24:37 +02:00: 🔖 Creating restore point...
+2025-07-31 10:26:13 +02:00: ✅ Restore point created
+2025-07-31 10:54:37 +02:00: 🔄 Hourly reset: Commit counter reset to 0
+2025-07-31 10:54:37 +02:00: 🔖 Creating restore point...
+2025-07-31 10:56:08 +02:00: ✅ Restore point created
+2025-07-31 11:24:37 +02:00: 🔖 Creating restore point...
+2025-07-31 11:26:08 +02:00: ✅ Restore point created
+2025-07-31 11:54:37 +02:00: 🔄 Hourly reset: Commit counter reset to 0
+2025-07-31 11:54:37 +02:00: 🔖 Creating restore point...
+2025-07-31 11:56:08 +02:00: ✅ Restore point created
+2025-07-31 12:24:37 +02:00: 🔖 Creating restore point...
+2025-07-31 12:26:08 +02:00: ✅ Restore point created
+2025-07-31 12:54:37 +02:00: 🔄 Hourly reset: Commit counter reset to 0
+2025-07-31 12:54:37 +02:00: 🔖 Creating restore point...
+2025-07-31 12:56:13 +02:00: ✅ Restore point created
+2025-07-31 13:24:37 +02:00: 🔖 Creating restore point...
+2025-07-31 13:24:40 +02:00: ✅ Restore point created
+2025-07-31 13:42:49 +02:00: 
+2025-07-31 13:42:49 +02:00: 🛑 Stopping auto-commit watcher...
+2025-07-31 13:42:49 +02:00: 💾 Saving final changes...