/* --- Global & Premium Variables --- */
:root {
    --primary-blue: #2563eb;
    --text-dark: #1e293b;
    --text-light: #64748b;
    --bg-light: #f8fafc;
    --border-color: #e2e8f0;
    
    /* Status Colors */
    --c-green: #10b981;
    --c-red: #ef4444;
    --c-purple: #8b5cf6;
}

/* --- Modern Header --- */
.modern-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    position: sticky;
    top: 0;
    z-index: 100;
}
.header-left, .header-right { display: flex; align-items: center; gap: 15px; }
.icon-btn { background: none; border: none; font-size: 20px; color: var(--text-dark); cursor: pointer; }
.delete-btn { color: var(--c-red); }
.btn-edit-text { background: none; border: 1px solid var(--border-color); padding: 5px 12px; border-radius: 20px; font-weight: 600; cursor: pointer; display: flex; gap: 5px; align-items: center; }

/* --- Overview Section --- */
.overview-section { padding: 15px 20px; background: #fff; }
.overview-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.section-title { font-size: 14px; font-weight: 600; color: var(--text-light); }
.month-picker-container { display: flex; align-items: center; gap: 8px; border: 1px solid var(--border-color); padding: 5px 10px; border-radius: 8px; }
.smart-select { border: none; font-weight: 700; font-size: 15px; background: transparent; outline: none; }

.stats-card { position: relative; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; text-align: center; transition: all 0.3s ease; }
.stat-item { display: flex; flex-direction: column; gap: 4px; }
.stat-val { font-size: 17px; font-weight: 800; }
.stat-label { font-size: 11px; color: var(--text-light); font-weight: 500; }
.text-green { color: var(--c-green); }
.text-red { color: var(--c-red); }
.text-blue { color: var(--primary-blue); }
.hidden { display: none !important; }

.expand-grid-btn { width: 100%; background: none; border: none; text-align: right; padding-top: 10px; color: var(--primary-blue); cursor: pointer; font-size: 16px; }

/* --- Open Report Button --- */
.report-btn-wrapper { text-align: center; padding: 10px 0 20px; background: #fff; border-bottom: 1px solid var(--border-color); }
.btn-open-report { background: #eff6ff; color: var(--primary-blue); border: none; padding: 8px 20px; border-radius: 20px; font-weight: 700; font-size: 14px; cursor: pointer; display: inline-flex; gap: 8px; align-items: center; }

/* --- Attendance Table / List --- */
.attendance-table-container { background: #fff; padding-bottom: 30px; }
.table-header-row { display: grid; grid-template-columns: 60px 1fr 80px; padding: 15px 20px; border-bottom: 1px solid var(--border-color); font-weight: 700; font-size: 14px; color: var(--text-dark); }
.list-row { display: grid; grid-template-columns: 60px 1fr 80px; padding: 12px 20px; border-bottom: 1px solid var(--bg-light); align-items: center; }

/* Column: Date */
.col-date { text-align: center; line-height: 1.2; }
.col-date strong { font-size: 16px; font-weight: 800; color: var(--text-dark); display: block; }
.col-date span { font-size: 12px; color: var(--text-light); }

/* Column: Attendance Badges */
.col-attendance { display: flex; justify-content: space-between; align-items: center; padding: 0 10px; }
.badges-group { display: flex; gap: 8px; }
.badge { display: flex; justify-content: center; align-items: center; font-size: 12px; font-weight: 800; width: 28px; height: 28px; }

/* Badge Shapes & Colors */
.badge-p { border-radius: 50%; border: 1.5px solid var(--c-green); color: var(--c-green); }
.badge-p.solid { background: var(--c-green); color: white; }

.badge-a { border-radius: 50%; border: 1.5px solid var(--c-red); color: var(--c-red); }
.badge-a.solid { background: var(--c-red); color: white; }

.badge-ot { border-radius: 8px; border: 1.5px solid var(--c-purple); color: var(--c-purple); }
.badge-ot.solid { background: var(--c-purple); color: white; }

.dots { color: #cbd5e1; font-size: 18px; cursor: pointer; }

/* Column: Notes / Money */
.col-notes { display: flex; justify-content: space-between; align-items: center; color: var(--text-light); }
.rupee-icon { font-size: 14px; font-weight: 600; }
.arrow { font-size: 12px; }