/* Grid Cell Component Styles */

.grid-cell-container {
    width: var(--cell-width, 100px);
    min-width: var(--cell-width, 100px);
    height: 58px;
    border-right: 1px solid #f1f5f9;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: background 0.1s ease;
}

.grid-cell-container:hover:not(.grid-cell-not-allowed) { 
    background-color: #f8fafc; 
}

.grid-cell-compact { 
    height: 42px; 
}

.grid-cell-weekend { 
    background-color: #f1f5f9 !important; 
}

.grid-cell-not-allowed {
    cursor: not-allowed !important;
}

.grid-cell-pointer {
    cursor: pointer;
}

.grid-cell-reading-mode {
    background-color: #fff9c4 !important; 
}

.grid-cell-reading-intersection {
    background-color: #fff176 !important; 
}

.grid-cell-col-hovered {
    background-color: var(--highlight-bg, rgba(99, 102, 241, 0.12)) !important;
    box-shadow: inset 1px 0 0 var(--highlight-border, rgba(99, 102, 241, 0.5)), inset -1px 0 0 var(--highlight-border, rgba(99, 102, 241, 0.5));
    z-index: 1;
}

.grid-cell-shift-badge {
    font-size: 9px;
    font-weight: 800;
    padding: 2px 4px;
    border-radius: 4px;
    width: 90%;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
    border: 1px solid rgba(0,0,0,0.05);
}

.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;
}

.grid-cell-lock-tooltip {
    background: #374151;
    color: white;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    padding: 8px 12px;
}

.grid-cell-indicators {
    position: absolute;
    bottom: 4px;
    right: 4px;
    display: flex;
    flex-direction: row;
    gap: 2px;
}

.grid-cell-comment-icon {
    cursor: help;
    opacity: 0.6;
}

.grid-cell-note-icon {
    cursor: help;
    opacity: 0.7;
}

.grid-cell-comment-tooltip,
.grid-cell-note-tooltip {
    background: white;
    color: #374151;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    padding: 10px 12px;
    max-width: 220px;
}

.grid-cell-tooltip-content {
    display: flex;
    flex-direction: column;
}

.grid-cell-tooltip-header {
    font-weight: bold;
    font-size: 11px;
    color: #3730a3;
    margin-bottom: 4px;
}

.grid-cell-note-header {
    color: #f59e0b !important;
}

.grid-cell-tooltip-text {
    font-size: 11px;
    color: #6b7280;
}