/* ================================================================
   Kartu Gradien — satu sumber kebenaran (gaya Slip Gaji / Rekap)
   Dipakai oleh halaman slip-gaji, rekap-presensi-guru, dan semua
   komponen kartu gradien di proyek ini.
   ================================================================ */

/* Grid statistik: 4 kartu per baris di desktop (rapat seperti Kalender). */
.stat-grid { display: grid; gap: 1rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1023px) { .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px)  { .stat-grid { grid-template-columns: 1fr; } }

/* Variasi 7 kartu per baris (Laporan Absensi): 7 → 4 → 2 → 1. */
.stat-grid--7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
@media (max-width: 1279px) { .stat-grid--7 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 767px)  { .stat-grid--7 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px)  { .stat-grid--7 { grid-template-columns: 1fr; } }

/* Grid filter: default 4 kolom; 3 kolom via .filter-grid--3 (Rekap). */
.filter-grid { display: grid; gap: 16px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.filter-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1023px) { .filter-grid, .filter-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .filter-grid, .filter-grid--3 { grid-template-columns: 1fr; } }

/* Efek angkat saat hover pada kartu statistik. */
.hover-lift { transition: transform 150ms ease, box-shadow 150ms ease; }
.hover-lift:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -8px rgb(0 0 0 / 0.20); z-index: 5; }

/* Saat dicetak: kartu statistik tetap 4 per baris. */
@media print {
    .stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}