/* date-header — single column header for a date */ .date-header-root { width: var(--cell-width); min-width: var(--cell-width); display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; height: var(--h-dates); border-right: 1px solid #f1f5f9; transition: background 0.15s ease; padding-top: 6px; } /* Colored top bar */ .date-header-top-bar { position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: 0 0 2px 2px; } /* Event indicator */ .date-header-event-dot { position: absolute; top: 6px; right: 6px; } /* Weekday label */ .date-header-weekday { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; color: #94a3b8; margin-bottom: 1px; } /* TODAY label */ .date-header-today-label { font-size: 10px; font-weight: 800; letter-spacing: 0.08em; color: #2563eb; margin-bottom: 1px; } /* Date text */ .date-header-date { font-size: 13px; font-weight: 700; color: var(--text-primary); line-height: 1.2; } .date-header-date-today { color: #2563eb !important; } /* Weekend styling */ .date-header-bg-weekend { background-color: #f8fafc !important; } .date-header-text-weekend { color: #cbd5e1 !important; } /* Today column */ .date-header-today { background-color: #eff6ff !important; } .date-header-today .date-header-top-bar { height: 4px; } /* Reading mode highlight */ .date-header-reading-active { background-color: #fef08a !important; border-bottom: 2px solid #eab308; } /* Crosshair hover */ .date-header-col-hovered { background-color: var(--highlight-bg) !important; box-shadow: inset 1px 0 0 var(--highlight-border), inset -1px 0 0 var(--highlight-border); z-index: 1; } /* Highlight button - hidden by default, shown on hover */ .date-header-highlight-btn { position: absolute; bottom: 2px; right: 2px; opacity: 0; transition: opacity 0.2s; } .date-header-root:hover .date-header-highlight-btn, .date-header-highlight-btn.date-header-is-active { opacity: 1; }