/* ==========================================================================
   S-DEGAN Global Mobile-First & Android Responsive Stylesheet
   ========================================================================== */

/* 1. Global Touch & Box Model */
* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: rgba(91, 228, 168, 0.2);
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden;
    font-family: 'Poppins', Arial, sans-serif;
}

body.sidebar-open {
    overflow: hidden !important;
}

/* 2. Mobile Topbar Header & Backdrop Overlay */
.mobile-topbar {
    display: none;
}

.modal {
    display: none;
    position: fixed;
    z-index: 999999 !important;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transition: opacity 0.2s ease;
}

.modal.show {
    display: flex !important;
    align-items: center;
    justify-content: center;
    opacity: 1 !important;
}

.modal .modal-content,
.modal.show .modal-content {
    background-color: #ffffff !important;
    margin: auto !important;
    padding: 28px 24px !important;
    border-radius: 14px !important;
    max-height: 90vh;
    overflow-y: auto;
    width: 90% !important;
    max-width: 500px !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    transform: none !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3) !important;
    z-index: 1000000 !important;
}

.mobile-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.35);
    /* Tidak ada backdrop-filter blur agar halaman tidak nge-blur */
    z-index: 9998;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.mobile-overlay.active {
    display: block;
    opacity: 1;
}

/* Overlay hanya aktif di mobile */
@media (min-width: 768px) {
    .mobile-overlay {
        display: none !important;
    }
}

/* 3. Form Controls & Touch Targets for Android */
input, select, button, textarea {
    font-family: inherit;
    font-size: 16px; /* Prevents auto-zoom on Android/iOS WebKit */
}

input[type="text"],
input[type="password"],
input[type="date"],
select {
    min-height: 44px;
    border-radius: 8px;
    padding: 8px 12px;
}

button, .submit-btn, .dashboard-btn, #filter-button, #download-pdf {
    min-height: 44px;
    touch-action: manipulation;
}

/* 4. Table Mobile Responsiveness */
.table-responsive, .container-besar {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 10px;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.table-responsive table, .container-besar table {
    width: 100%;
    min-width: 650px;
}

/* 5. Responsive Media Queries for Smartphone Screens (max-width: 768px) */
@media (max-width: 768px) {
    /* Mobile Fixed Header Bar */
    .mobile-topbar {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 56px;
        background: linear-gradient(135deg, #D5F8E4 0%, #A5D9C7 100%);
        padding: 0 16px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
        z-index: 9997;
    }

    .mobile-hamburger-btn {
        background: #5BE4A8;
        border: none;
        color: #1b4d3e;
        width: 42px;
        height: 42px;
        border-radius: 10px;
        font-size: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        box-shadow: 0 2px 6px rgba(0,0,0,0.15);
        transition: transform 0.2s ease, background 0.2s ease;
    }

    .mobile-hamburger-btn:active {
        transform: scale(0.92);
        background: #45c490;
    }

    .mobile-topbar-brand {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .mobile-topbar-logo {
        height: 32px;
        width: auto;
        object-fit: contain;
    }

    .mobile-topbar-title {
        font-size: 16px;
        font-weight: 700;
        color: #222;
        letter-spacing: 0.5px;
    }

    /* Container & Layout spacing */
    .container {
        margin-left: 0 !important;
        width: 100% !important;
        padding: 68px 12px 20px 12px !important;
        transition: none !important;
    }

    .container.shifted, .sidebar-hidden .container {
        margin-left: 0 !important;
    }

    /* Off-Canvas Navigation Drawer for Mobile Android */
    .navbar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        height: 100vh !important;
        width: 280px !important;
        max-width: 85vw !important;
        z-index: 9999 !important;
        background: linear-gradient(180deg, #D5F8E4 0%, #ffffff 100%) !important;
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        box-shadow: 4px 0 25px rgba(0, 0, 0, 0.3) !important;
        overflow-y: auto;
        padding: 25px 20px !important;
    }

    .navbar.visible, .navbar.show {
        transform: translateX(0) !important;
    }

    .toggle-btn {
        display: none !important;
    }

    /* Filter Bar on Mobile */
    .filter-bar {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
        margin: 10px 0 !important;
        padding: 15px !important;
        width: 100% !important;
    }

    .filter-bar label {
        margin-bottom: 2px !important;
        font-size: 14px !important;
    }

    .filter-bar select,
    .filter-bar input[type="date"],
    .filter-bar input[type="text"] {
        width: 100% !important;
        min-width: 0 !important;
    }

    .filter-bar button, .filter-bar input[type="submit"] {
        width: 100% !important;
        margin-left: 0 !important;
        margin-top: 5px !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        font-size: 16px !important;
    }

    /* Content & Cards Layout */
    .content-container {
        margin-left: 0 !important;
        margin-right: 0 !important;
        gap: 15px !important;
    }

    .container-kiri .cards,
    .container-kanan .cards {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .card {
        padding: 12px 15px !important;
    }

    .card h3 {
        font-size: 15px !important;
    }

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

    /* Chart Container on Mobile */
    .chart-row {
        margin: 10px 0 !important;
    }

    .container-stat, .container-statall {
        height: 300px !important;
        padding: 10px !important;
    }

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

    /* Login Page Mobile */
    .left-side img {
        max-width: 140px !important;
    }

    .login-container {
        padding: 25px 15px !important;
        max-width: 100% !important;
    }
}

/* Fix for Chart.js Container */
.chart-wrapper, .chart-container {
    position: relative !important;
    width: 100% !important;
    flex: 1 !important;          /* Isi sisa ruang dalam container-stat */
    min-height: 0 !important;   /* Penting agar flex bekerja */
}

canvas#myChart, canvas#chartCanvas {
    width: 100% !important;
    height: 100% !important;
}

@media (max-width: 767px) {
    .chart-wrapper, .chart-container {
        min-height: 160px !important;
    }
}