/* General Body Styles */
body { 
    font-family: 'Inter', sans-serif; 
    background-color: #f8fafc; 
}

/* Table Styles */
.table-container { 
    overflow-x: auto; 
    -webkit-overflow-scrolling: touch; 
}
table { 
    border-collapse: separate; 
    border-spacing: 0; 
    min-width: 800px; 
}
th, td { 
    white-space: nowrap; 
}

/* Custom Checkbox Styles */
.custom-checkbox { 
    appearance: none; 
    -webkit-appearance: none; 
    height: 1.5rem; 
    width: 1.5rem; 
    border-radius: 0.375rem; 
    border: 2px solid #cbd5e1; 
    cursor: pointer; 
    display: inline-block; 
    position: relative; 
    transition: background-color 0.2s, border-color 0.2s; 
    flex-shrink: 0; 
}
.custom-checkbox:checked { 
    background-color: #4f46e5; 
    border-color: #4f46e5; 
}
.custom-checkbox:checked::after { 
    content: '✔'; 
    font-size: 1rem; 
    color: white; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
}
.custom-checkbox:disabled { 
    background-color: #e2e8f0; 
    border-color: #e2e8f0; 
    cursor: not-allowed; 
}

/* Cell Styles */
.non-teaching-day { 
    background-color: #f8fafc; 
}
.non-teaching-day .custom-checkbox {
    cursor: not-allowed;
}
.attendance-cell { 
    cursor: pointer;
    position: relative;
    transition: background-color 0.2s;
}
.attendance-cell.selected {
    background-color: #e0e7ff; /* indigo-100 */
}
.attendance-cell.selected::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 2px solid #4f46e5; /* indigo-600 */
    border-radius: 2px;
}


/* Note Indicator */
.note-indicator { 
    width: 6px; 
    height: 6px; 
    background-color: #34d399; /* emerald-400 */
    border-radius: 50%; 
    margin-left: 8px; 
    flex-shrink: 0; 
}

/* Chart Styles */
.chart-bar { 
    transition: height 0.3s ease-in-out, opacity 0.2s; 
}
.bar-wrapper .tooltip { 
    position: absolute; 
    top: -2.5rem; 
    left: 50%; 
    transform: translateX(-50%); 
    background-color: #111827; 
    color: white; 
    padding: 0.25rem 0.5rem; 
    border-radius: 0.375rem; 
    font-size: 0.75rem; 
    font-weight: 500; 
    white-space: nowrap; 
    opacity: 0; 
    visibility: hidden; 
    transition: opacity 0.2s, visibility 0.2s; 
    z-index: 20; 
    pointer-events: none; 
}
.chart-bar:hover .tooltip { 
    opacity: 1; 
    visibility: visible; 
}
.chart-y-axis { 
    position: relative; 
    height: 100%; 
    width: 2.5rem; 
    flex-shrink: 0; 
}
.chart-y-axis-label { 
    position: absolute; 
    transform: translateY(50%); 
    right: 0.5rem; 
    font-size: 0.75rem; 
    color: #6b7280; 
}

/* Modal Styles */
.modal-overlay { 
    position: fixed; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    background-color: rgba(17, 24, 39, 0.5); 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    z-index: 50; 
    opacity: 0; 
    visibility: hidden; 
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out; 
}
.modal-overlay.visible { 
    opacity: 1; 
    visibility: visible; 
}
.modal-content { 
    background-color: white; 
    padding: 1.5rem; 
    border-radius: 0.75rem; 
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); 
    width: 90%; 
    max-width: 500px; 
    transform: scale(0.95) translateY(10px); 
    transition: transform 0.3s ease-in-out; 
}
.modal-overlay.visible .modal-content { 
    transform: scale(1) translateY(0); 
}

/* Status Indicator */
.status-indicator { 
    position: fixed; 
    bottom: 1rem; 
    right: 1rem; 
    background-color: #111827; 
    color: white; 
    padding: 0.5rem 1rem; 
    border-radius: 0.5rem; 
    z-index: 100; 
    opacity: 0; 
    visibility: hidden; 
    transition: opacity 0.3s, visibility 0.3s; 
    font-size: 0.875rem; 
}
.status-indicator.show { 
    opacity: 1; 
    visibility: visible; 
}