/* ============================================================
   ABSENIN — GLOBAL RESPONSIVE CSS
   Covers: Mobile (< 480px), Tablet (481–768px), Laptop (769–1024px)
   Include di semua layout: <link rel="stylesheet" href="{{ asset('css/responsive.css') }}">
   ============================================================ */

/* ── BREAKPOINTS ──
   xs  : max 480px  → HP kecil
   sm  : max 768px  → HP besar / tablet portrait
   md  : max 1024px → tablet landscape / laptop kecil
   ── */


/* ============================================================
   1. SIDEBAR & MAIN LAYOUT (dashboard)
   ============================================================ */

@media (max-width: 1024px) {
    .sidebar {
        width: 200px;
        min-width: 200px;
    }

    .main {
        margin-left: 200px;
    }
}

@media (max-width: 768px) {

    /* Sidebar jadi drawer */
    .sidebar {
        transform: translateX(-100%);
        width: 240px !important;
        min-width: 240px !important;
        box-shadow: 4px 0 20px rgba(0, 0, 0, 0.4);
        z-index: 999;
    }

    .sidebar.open {
        transform: translateX(0);
    }

    /* Overlay gelap saat sidebar terbuka */
    .sidebar-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 998;
    }

    .sidebar-overlay.show {
        display: block;
    }

    .main {
        margin-left: 0 !important;
    }

    .hamburger {
        display: block !important;
    }

    .content {
        padding: 14px !important;
    }

    .topbar {
        padding: 12px 16px !important;
    }

    .topbar-title {
        font-size: 14px !important;
    }

    /* Sembunyikan tanggal di topbar kalau kepanjangan */
    #tanggal-now {
        display: none;
    }
}

@media (max-width: 480px) {
    .content {
        padding: 10px !important;
    }
}


/* ============================================================
   2. STAT CARDS (dashboard)
   ============================================================ */

@media (max-width: 1024px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 480px) {
    .stats-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    .stat-card {
        padding: 12px 14px !important;
    }

    .stat-value {
        font-size: 18px !important;
    }

    .stat-label {
        font-size: 10px !important;
        margin-bottom: 4px !important;
    }

    .stat-sub {
        font-size: 9.5px !important;
    }
}


/* ============================================================
   3. DASHBOARD MAIN GRID (chart + ringkasan)
   ============================================================ */

@media (max-width: 1024px) {
    .dashboard-main-grid {
        grid-template-columns: 1fr !important;
    }
}


/* ============================================================
   4. KELAS GRID
   ============================================================ */

@media (max-width: 768px) {
    .kelas-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 480px) {
    .kelas-grid {
        grid-template-columns: 1fr !important;
    }

    .kelas-card {
        padding: 14px !important;
    }
}


/* ============================================================
   5. TABEL — scroll horizontal di HP
   ============================================================ */

@media (max-width: 768px) {
    .card-dark {
        overflow-x: auto;
    }

    .table-dark-custom th,
    .table-dark-custom td {
        padding: 10px 12px !important;
        font-size: 12px !important;
        white-space: nowrap;
    }

    /* Sembunyikan kolom yang tidak penting di HP */
    .table-dark-custom .col-hide-sm {
        display: none !important;
    }
}

@media (max-width: 480px) {

    .table-dark-custom th,
    .table-dark-custom td {
        padding: 8px 10px !important;
        font-size: 11px !important;
    }
}


/* ============================================================
   6. ABSENSI REALTIME (kamera + rekap)
   ============================================================ */

@media (max-width: 1024px) {
    .absensi-layout {
        grid-template-columns: 360px 1fr !important;
    }
}

@media (max-width: 768px) {
    .absensi-layout {
        grid-template-columns: 1fr !important;
    }

    /* Rekap list lebih pendek di HP */
    #rekap-list {
        max-height: 300px !important;
    }

    /* Counter font lebih kecil */
    #count-hadir,
    #count-belum {
        font-size: 22px !important;
    }
}

@media (max-width: 480px) {

    /* Oval absensi sedikit lebih kecil */
    #oval-guide {
        width: 160px !important;
        height: 210px !important;
    }
}


/* ============================================================
   7. DAFTAR WAJAH (kamera + antrian)
   ============================================================ */

@media (max-width: 1024px) {
    .wajah-wrap {
        grid-template-columns: 1fr 260px !important;
    }
}

@media (max-width: 768px) {
    .wajah-wrap {
        grid-template-columns: 1fr !important;
    }

    /* Oval wajah */
    #oval-guide {
        width: 42% !important;
        max-width: 180px !important;
    }

    /* Pose overlay lebih kecil */
    #instruksi-text {
        font-size: 10px !important;
    }

    .pose-dot {
        width: 18px !important;
        height: 18px !important;
        font-size: 8px !important;
    }

    .pose-label {
        font-size: 7px !important;
        max-width: 42px !important;
    }

    .pose-connector {
        width: 16px !important;
    }
}

@media (max-width: 480px) {
    #oval-guide {
        width: 50% !important;
        max-width: 160px !important;
    }

    #cam-overlay-top {
        padding: 6px 10px !important;
    }

    #cam-nama-siswa {
        font-size: 10px !important;
    }

    #pose-overlay {
        padding: 5px 10px 8px !important;
    }

    .pose-dot {
        width: 16px !important;
        height: 16px !important;
    }

    .pose-connector {
        width: 12px !important;
    }

    .cam-actions {
        grid-template-columns: 1fr auto !important;
        gap: 8px !important;
    }
}


/* ============================================================
   8. LAPORAN
   ============================================================ */

@media (max-width: 1024px) {
    .lap-grid {
        grid-template-columns: 1fr !important;
    }

    .laporan-stats {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 768px) {
    .bulan-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }

    .laporan-stats {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
}

@media (max-width: 480px) {
    .bulan-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 6px !important;
    }

    .bulan-card {
        padding: 10px 8px !important;
    }

    .bulan-card div:first-child {
        font-size: 11px !important;
    }

    .tab-btn {
        padding: 5px 10px !important;
        font-size: 11px !important;
    }
}


/* ============================================================
   9. FORM — modal, edit pages
   ============================================================ */

@media (max-width: 768px) {
    .modal-dark {
        padding: 22px 20px !important;
        margin: 12px !important;
    }

    .modal-overlay {
        align-items: flex-end !important;
    }

    .modal-dark {
        border-radius: 16px 16px 0 0 !important;
        max-width: 100% !important;
    }
}

@media (max-width: 480px) {

    /* Form halaman edit full width */
    .content>div[style*="max-width"] {
        max-width: 100% !important;
    }
}


/* ============================================================
   10. CHART WRAP
   ============================================================ */

@media (max-width: 768px) {
    .chart-wrap {
        height: 180px !important;
        padding: 14px !important;
    }
}

@media (max-width: 480px) {
    .chart-wrap {
        height: 150px !important;
        padding: 10px !important;
    }
}


/* ============================================================
   11. AUTH PAGES (login & register)
   ============================================================ */

/* Register — split layout */
@media (max-width: 768px) {

    /* Halaman register: stack vertikal */
    body.page-register {
        flex-direction: column !important;
    }

    body.page-register .left-panel {
        min-height: 220px !important;
        padding: 32px 24px !important;
        align-items: center !important;
        text-align: center !important;
    }

    body.page-register .left-title {
        font-size: 22px !important;
        margin-bottom: 16px !important;
    }

    body.page-register .right-panel {
        width: 100% !important;
        min-width: unset !important;
        padding: 28px 24px 36px !important;
        min-height: auto !important;
    }

    body.page-register .illus-placeholder {
        height: 140px !important;
    }
}

@media (max-width: 480px) {
    body.page-register .left-panel {
        min-height: 180px !important;
        padding: 24px 16px !important;
    }

    body.page-register .right-panel {
        padding: 24px 16px 32px !important;
    }

    /* Login card */
    .login-card {
        padding: 28px 20px !important;
    }
}


/* ============================================================
   12. LANDING PAGE
   ============================================================ */

@media (max-width: 768px) {

    /* Hero split jadi stack */
    .hero .row {
        flex-direction: column !important;
    }

    .hero h1 {
        font-size: 22px !important;
    }

    .hero p {
        font-size: 13px !important;
    }

    /* Fitur grid */
    #fitur .row .col-6 {
        width: 50% !important;
    }

    /* Stats bar */
    .hero-stats {
        gap: 20px !important;
    }
}

@media (max-width: 480px) {
    #fitur .row .col-6 {
        width: 100% !important;
    }

    #fitur .row .col-md-4 {
        width: 100% !important;
    }

    .hero h1 {
        font-size: 20px !important;
    }
}


/* ============================================================
   13. UTILITY — helper classes
   ============================================================ */

/* Sembunyikan di HP */
@media (max-width: 768px) {
    .hidden-sm {
        display: none !important;
    }
}

@media (max-width: 480px) {
    .hidden-xs {
        display: none !important;
    }
}

/* Tampilkan hanya di HP */
@media (min-width: 769px) {
    .show-sm-only {
        display: none !important;
    }
}

/* Text truncate di HP */
@media (max-width: 768px) {
    .truncate-sm {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 120px;
    }
}

/* Button full width di HP */
@media (max-width: 480px) {
    .btn-full-xs {
        width: 100% !important;
    }
}

/* Sembunyikan label teks, sisakan icon */
@media (max-width: 480px) {
    .label-hide-xs {
        display: none !important;
    }
}