/* grid-cell — individual shift cell with time ranges */ .grid-cell-root { width: var(--cell-width); min-width: var(--cell-width); height: 76px; border-right: 1px solid #f1f5f9; border-bottom: 1px solid #f8fafc; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; transition: background 0.1s ease; padding: 3px 4px; gap: 2px; } .grid-cell-root:hover:not(.cursor-not-allowed) { background-color: #f8fafc; } .grid-cell-compact { height: 50px; } /* Today column background */ .grid-cell-today { background-color: #fafcff; } /* Shift entry (time + activity) */ .grid-cell-shift { display: flex; flex-direction: column; align-items: center; width: 100%; gap: 1px; } .grid-cell-shift-second { margin-top: 1px; padding-top: 2px; border-top: 1px dashed #e2e8f0; } /* Time label */ .grid-cell-time { font-size: 11px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.01em; white-space: nowrap; } /* Activity badge */ .grid-cell-activity-badge { font-size: 9px; font-weight: 700; padding: 1px 8px; border-radius: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 95%; text-align: center; letter-spacing: 0.01em; } /* Special status (sick leave, off) */ .grid-cell-special { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 92%; padding: 4px 6px; border-radius: 8px; border: 1px solid; gap: 0; } .grid-cell-special-emoji { font-size: 14px; line-height: 1.2; } .grid-cell-special-label { font-size: 10px; font-weight: 700; white-space: nowrap; } .grid-cell-special-sub { font-size: 8px; font-weight: 600; opacity: 0.7; } /* Lock overlay */ .grid-cell-locked-overlay { position: absolute; inset: 0; background: rgba(241, 245, 249, 0.5); display: flex; align-items: center; justify-content: center; z-index: 5; backdrop-filter: blur(1px); } /* Comment/Note indicators */ .grid-cell-indicators { position: absolute; bottom: 2px; right: 3px; display: flex; gap: 2px; } /* Tooltip */ .grid-cell-tooltip { padding: 10px 12px; max-width: 220px; border: 1px solid #e2e8f0; box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1); } /* Weekend */ .grid-cell-bg-weekend { background-color: #f8fafc !important; } /* Reading mode highlights */ .grid-cell-bg-reading-mode { background-color: #fff9c4 !important; } .grid-cell-bg-reading-mode-intersection { background-color: #fff176 !important; } /* Crosshair column hover */ .grid-cell-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; }