/* ==============================================================
   Mobile Responsive - SI Inventaris Puskesmas Kenali Besar
   ============================================================== */

/* ===== Cegah horizontal scroll di seluruh aplikasi ===== */
html, body {
    overflow-x: hidden;
    max-width: 100%;
}
.wrapper, .content-page, .container-fluid {
    max-width: 100%;
}

/* ===== Default notification dropdown size (desktop) ===== */
.notification-dropdown {
    width: 340px;
    max-height: 420px;
    overflow-y: auto;
}

/* ===== Hamburger button: pastikan klikable ===== */
#sidebarToggle {
    position: relative;
    z-index: 1031 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* ===== Mobile saja (<= 768px) ===== */
@media (max-width: 768px) {
    body { font-size: 0.85rem; }

    /* === Navbar tetap satu baris === */
    .navbar { padding: 0.4rem 0.6rem !important; flex-wrap: nowrap !important; }
    .navbar .container-fluid {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
        flex-wrap: nowrap !important;
        gap: 0;
    }
    .navbar-brand-wrapper {
        flex: 1 1 auto;
        min-width: 0;
    }
    .navbar-brand-wrapper h4 {
        font-size: 0.88rem !important;
        margin: 0 !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .navbar .ms-auto {
        flex-shrink: 0;
        gap: 0.4rem !important;
    }
    .navbar .search-box { display: none !important; }
    .navbar .user-info-small { display: none !important; }
    #sidebarToggle {
        padding: 4px 8px !important;
        margin-right: 4px;
        flex-shrink: 0;
    }
    #sidebarToggle .fs-4 { font-size: 1.4rem !important; }
    .btn-user { padding: 0.15rem 0.35rem !important; gap: 0.3rem !important; }
    .btn-user img,
    .btn-user .user-avatar-small {
        width: 30px !important;
        height: 30px !important;
        border-radius: 8px !important;
    }
    .btn-icon { padding: 0.4rem !important; }
    .btn-icon i { font-size: 1.05rem !important; }

    /* === Container utama compact === */
    .container-fluid { padding-left: 12px !important; padding-right: 12px !important; }
    .container-fluid.py-4 { padding-top: 12px !important; padding-bottom: 12px !important; }
    .container-fluid.py-3 { padding-top: 10px !important; padding-bottom: 10px !important; }
    .container-fluid.px-4 { padding-left: 12px !important; padding-right: 12px !important; }

    /* === Heading compact === */
    .container-fluid h1, .container-fluid h2 { font-size: 1.05rem !important; }
    .container-fluid h3 { font-size: 0.95rem !important; }
    .container-fluid h4 { font-size: 0.9rem !important; }
    .container-fluid h5 { font-size: 0.85rem !important; }
    .container-fluid h6 { font-size: 0.78rem !important; }
    .container-fluid p.text-muted { font-size: 0.75rem !important; }

    /* === Card compact === */
    .card-body { padding: 0.75rem !important; }
    .card-header { padding: 0.6rem 0.75rem !important; }
    .card.mb-3, .card.mb-4 { margin-bottom: 0.75rem !important; }
    .row.mb-3, .row.mb-4 { margin-bottom: 0.75rem !important; }

    /* === Form === */
    .form-control-sm, .form-select-sm {
        font-size: 0.78rem !important;
        padding: 0.35rem 0.55rem !important;
    }
    .form-label { font-size: 0.74rem !important; margin-bottom: 0.2rem !important; }

    /* === Tabel === */
    table.table { font-size: 0.74rem; }
    table.table th, table.table td { padding: 0.45rem 0.55rem !important; white-space: nowrap; }
    .table-responsive { -webkit-overflow-scrolling: touch; }

    /* === Stat icon === */
    .stat-icon { width: 36px !important; height: 36px !important; min-width: 36px; border-radius: 8px !important; }
    .stat-icon i { font-size: 0.95rem !important; }

    /* === Badge === */
    .badge { padding: 0.2rem 0.4rem !important; font-size: 0.65rem !important; }

    /* === Tombol === */
    .btn-sm { font-size: 0.72rem !important; padding: 0.3rem 0.5rem !important; }
    .btn-group-sm > .btn { padding: 0.25rem 0.4rem !important; font-size: 0.7rem !important; }

    /* === Modal === */
    .modal-dialog { margin: 0.5rem !important; max-width: calc(100vw - 1rem) !important; }
    .modal-header, .modal-footer { padding: 0.6rem 0.85rem !important; }
    .modal-body { padding: 0.85rem !important; }

    /* === Stat cards 2 kolom (50/50), forced === */
    .row > [class*="col-xl-3"],
    .row > [class*="col-xl-2"],
    .row > [class*="col-md-3"] {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        padding-left: 6px !important;
        padding-right: 6px !important;
    }
    /* Card di dalam stat row tidak boleh overflow */
    .row > [class*="col-"] > .card { width: 100%; min-width: 0; }
    .row > [class*="col-"] > .card .card-body { min-width: 0; }
    .row > [class*="col-"] .card h4,
    .row > [class*="col-"] .card h3,
    .row > [class*="col-"] .card h5 {
        word-break: break-word;
        font-size: 0.95rem !important;
    }

    /* === Filter form: stack vertikal === */
    form .row.g-2 > [class*="col-md-"],
    form .row.g-3 > [class*="col-md-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* === Chart container max-height === */
    div[style*="height:280px"],
    div[style*="height: 280px"],
    div[style*="height:260px"],
    div[style*="height: 260px"],
    div[style*="height:240px"],
    div[style*="height: 240px"],
    div[style*="height:220px"],
    div[style*="height: 220px"] {
        height: 200px !important;
    }

    /* === Notification & user dropdown === */
    .notification-dropdown {
        width: 92vw !important;
        max-width: 360px !important;
        right: 8px !important;
        left: auto !important;
    }
    .user-dropdown { width: 240px !important; right: 8px !important; left: auto !important; }
    .navbar .dropdown-menu { max-height: 70vh !important; overflow-y: auto !important; }

    /* === Login responsive === */
    .login-container { flex-direction: column !important; }
    .login-left { min-height: 28vh !important; padding: 1.5rem !important; }
    .login-right { padding: 1.25rem !important; }
    .login-form-header h2 { font-size: 1.6rem !important; }
    .login-left-content .logo-container { width: 70px !important; height: 70px !important; }
    .login-left-content h1 { font-size: 1.8rem !important; }
    .feature-list { display: none !important; }

    /* === Signup responsive === */
    .signup-card { grid-template-columns: 1fr !important; max-width: 95vw !important; }
    .signup-side { padding: 16px !important; text-align: center; }
    .signup-side h1 { font-size: 1.4rem !important; }
    .signup-feats { display: none !important; }
    .signup-form { padding: 16px !important; }
    .form-grid { grid-template-columns: 1fr !important; }

    /* === DataTable === */
    .dataTables_length, .dataTables_filter { font-size: 0.72rem; }
    .dataTables_paginate .paginate_button { padding: 0.25rem 0.5rem !important; font-size: 0.7rem !important; }
    .dataTables_info { font-size: 0.68rem !important; }
}

/* ===== HP kecil (<= 380px) ===== */
@media (max-width: 380px) {
    .container-fluid { padding-left: 10px !important; padding-right: 10px !important; }
    .navbar-brand-wrapper h4 { font-size: 0.78rem !important; }
    .stat-icon { width: 32px !important; height: 32px !important; min-width: 32px; }
    .row > [class*="col-xl-3"],
    .row > [class*="col-xl-2"],
    .row > [class*="col-md-3"] {
        padding-left: 4px !important;
        padding-right: 4px !important;
    }
}

/* ===== iOS safe area + smooth scroll ===== */
@supports (padding: max(0px)) {
    body { padding-bottom: env(safe-area-inset-bottom); }
}
.table-responsive, .modal-body, .sidebar-menu { -webkit-overflow-scrolling: touch; }
button, .btn, a { touch-action: manipulation; }