/* Google Font & Variable Reset */
:root {
    --primary-color: #4f46e5;
    --primary-hover: #4338ca;
    --bg-body: #f8fafc;
    --text-main: #0f172a;
}

body {
    background-color: var(--bg-body);
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: var(--text-main);
    overflow-x: hidden; /* Mencegah layar geser horizontal di HP */
}

/* Header & Navigation Topbar */
.navbar-top {
    backdrop-filter: blur(10px);
    background-color: rgba(255, 255, 255, 0.95) !important;
}

.btn-menu-toggle {
    border: none;
    background: transparent;
    padding: 0;
    transition: transform 0.2s;
}

.btn-menu-toggle:hover {
    transform: scale(1.1);
}

.avatar-circle {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Custom Offcanvas Sidebar Navigation */
.offcanvas {
    max-width: 280px; /* Lebar sidebar ideal untuk HP & Tablet */
}

.nav-link-custom {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    color: #475569;
    font-weight: 500;
    border-radius: 10px;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
}

.nav-link-custom i {
    font-size: 1.25rem;
}

.nav-link-custom:hover {
    background-color: #f1f5f9;
    color: var(--primary-color);
    transform: translateX(4px);
}

.nav-link-custom.active {
    background-color: var(--primary-color);
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
}

/* Welcome Banner Dashboard */
.welcome-banner {
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    border: none;
}

/* Stat Cards */
.stat-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.06) !important;
}

.stat-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Status Badges untuk Laporan & Dashboard */
.status-badge {
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 20px;
    display: inline-block;
    font-size: 0.825rem;
}

.bg-hadir { background-color: #d1fae5; color: #065f46; border: 1px solid #a7f3d0; }
.bg-izin { background-color: #fef3c7; color: #92400e; border: 1px solid #fde68a; }
.bg-sakit { background-color: #ffedd5; color: #9a3412; border: 1px solid #fed7aa; }
.bg-alpha { background-color: #ffe4e6; color: #9f1239; border: 1px solid #fecdd3; text-decoration: line-through; }

/* -----------------------------------------------------------------------------
 * 📱 MOBILE RESPONSIVE OPTIMIZATION (MEDIA QUERIES FOR SMARTPHONES)
 * ----------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    /* 1. Kurangi Padding Container Utama di HP */
    .container-fluid {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* 2. Penyesuaian Tipografi / Ukuran Font */
    h2, .display-6 {
        font-size: 1.35rem !important;
    }
    h3 {
        font-size: 1.15rem !important;
    }
    h4 {
        font-size: 1rem !important;
    }

    /* 3. Mencegah Auto-Zoom Browser HP saat Mengetik Input/Textarea */
    input[type="text"],
    input[type="date"],
    select,
    textarea {
        font-size: 16px !important;
    }

    /* 4. Penyesuaian Card & Padding di Layar Kecil */
    .card, .welcome-banner {
        padding: 1rem !important;
        border-radius: 12px !important;
    }

    /* 5. Stat Cards Statik lebih compact di HP */
    .stat-card {
        padding: 0.85rem !important;
    }
    .stat-icon {
        width: 44px;
        height: 44px;
        font-size: 1.2rem;
    }

    /* 6. Optimasi Tabel di Layar HP (Bisa di-Scroll Horizontal) */
    .table-responsive {
        border-radius: 8px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .table td, .table th {
        white-space: nowrap;
        padding: 0.5rem 0.65rem !important;
        font-size: 0.85rem;
    }
    
    /* Pengecualian Textarea Dalam Tabel Agar Tidak Terpotong */
    .table textarea {
        white-space: normal !important;
        min-width: 200px;
    }

    /* 7. Tombol-tombol Full Width di HP agar Mudah Diklik Jari */
    .btn-mobile-full {
        width: 100% !important;
        margin-bottom: 6px;
    }

    /* 8. Cetak ID Card Portrait di HP (Rata Tengah & Pas Layar) */
    .id-card-portrait {
        width: 100% !important;
        max-width: 220px;
        margin: 0 auto 12px auto !important;
        display: block !important;
    }
    .id-card-container {
        justify-content: center !important;
    }
}

/* Cetak ID Card Standard Print Rules */
@media print {
    .no-print, header, .offcanvas, .btn, form {
        display: none !important;
    }
    body { background-color: #fff; }
}