body {
    font-family: 'Segoe UI', system-ui, sans-serif;
}

.card {
    border: none;
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}

.stat-card {
    border-radius: 14px;
    color: #fff;
    padding: 1.25rem;
}

.stat-card h3 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0;
}

.bg-hadir { background: linear-gradient(135deg,#198754,#20c997); }
.bg-izin  { background: linear-gradient(135deg,#0d6efd,#6ea8fe); }
.bg-sakit { background: linear-gradient(135deg,#fd7e14,#ffc107); }
.bg-alpha { background: linear-gradient(135deg,#dc3545,#f06a6a); }
.bg-total { background: linear-gradient(135deg,#495057,#868e96); }

.login-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.badge-status-Hadir { background-color:#198754; }
.badge-status-Izin  { background-color:#0d6efd; }
.badge-status-Sakit { background-color:#fd7e14; }
.badge-status-Alpha { background-color:#dc3545; }

/* ---------- Foto siswa ---------- */
.foto-thumb {
    border-radius: 50%;
    object-fit: cover;
    object-position: top center;
    cursor: zoom-in;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.25);
    background: #e9ecef;
    vertical-align: middle;
    flex: 0 0 auto;
}
.foto-inisial {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #dee2e6;
    color: #495057;
    font-weight: 600;
    vertical-align: middle;
    flex: 0 0 auto;
}
.foto-preview {
    width: 140px; height: 140px; border-radius: 12px;
    object-fit: cover; object-position: top center;
    background: #e9ecef; border: 1px solid #dee2e6;
}

.toast-body { white-space: pre-line; }

/* ---------- Rekap ---------- */
.cell-status { min-width: 30px; display: inline-block; text-align: center; }

@media print {
    .navbar, .no-print, footer, .btn, .toast-container { display: none !important; }
    body { background: #fff !important; }
    .card { box-shadow: none !important; }
    .container { max-width: 100% !important; }
    .table { font-size: 11px; }
    .foto-thumb, .foto-inisial { width: 28px !important; height: 28px !important; box-shadow: none; }
}

/* SweetAlert2: foto bulat */
.swal-foto { border-radius: 50%; object-fit: cover; object-position: top center; }