/*
 * solusi-responsif.css — lembar gaya penimpa (dimuat PALING AKHIR) untuk solusinasional.com.
 * Tujuan: situs publik rapi di ponsel (360–430 px), tablet (768 px) dan desktop; dasbor layak di ponsel.
 * Prinsip: tampilan desktop tidak diubah (hampir semua aturan berada di dalam @media lebar maksimum),
 * kecuali batas bawah ukuran huruf 12 px untuk lencana kecil.
 * Ukuran sasaran sentuh minimum 44 px (pedoman Apple/Google; batas uji 40 px).
 */

/* ------------------------------------------------------------------ */
/* 1. SITUS PUBLIK                                                     */
/* ------------------------------------------------------------------ */

/* 1a. Cegah halaman melebar ke samping: hiasan bulat (::before/::after) di #sn-page dan animasi
       AOS geser-kiri/kanan sempat mendorong lebar dokumen (registrasi +72 px, hubungi kami +112 px). */
#sn-page,
#sn-home {
    overflow-x: hidden;
    overflow-x: clip;
}

/* Lencana kecil (Populer / Terpopuler) di beranda: 10,4 px -> 12 px */
.mod-badge,
.sn-terpopuler-badge {
    font-size: 12px !important;
    line-height: 1.3;
}

/* Logo di kaki halaman masuk/lupa sandi memakai w-100 + mx-4 sehingga melewati tepi kanan. */
div.footer-logo.w-100.mx-4 {
    width: auto !important;
    max-width: calc(100% - 3rem);
}

@media (max-width: 991.98px) {
    /* AOS: di layar sempit animasi masuk dari samping diganti naik-ringan (tidak melebarkan halaman) */
    [data-aos="fade-left"]:not(.aos-animate),
    [data-aos="fade-right"]:not(.aos-animate),
    [data-aos="fade-up-left"]:not(.aos-animate),
    [data-aos="fade-up-right"]:not(.aos-animate),
    [data-aos="fade-down-left"]:not(.aos-animate),
    [data-aos="fade-down-right"]:not(.aos-animate) {
        transform: translate3d(0, 24px, 0) !important;
    }

    /* Menu ponsel (offcanvas) tidak boleh lebih lebar dari layar; tombol tutup selalu terlihat. */
    .header-section .offcanvas.offcanvas-start,
    .header-section .offcanvas.offcanvas-end {
        width: min(400px, 100vw) !important;
        max-width: 100vw;
    }

    /* Tombol menu (hamburger) & logo kepala halaman: sasaran sentuh >= 44 px */
    .header-section .navbar-toggler {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .header-section .header-logo {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        min-width: 44px;
    }

    .header-section .offcanvas .btn-close,
    .header-section .offcanvas [data-bs-dismiss="offcanvas"] {
        min-width: 44px;
        min-height: 44px;
    }

    /* Tombol bahasa di kepala halaman */
    .header-section .language-btn {
        min-height: 44px;
    }

    /* Remah roti (breadcrumb) */
    .sn-breadcrumb a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    /* Tautan "Kunjungi" di kartu portofolio & tautan kontak */
    .sn-feat-card > a,
    .sn-contact-info-item a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    /* Kaki halaman: tautan daftar, logo, lencana toko aplikasi, ikon sosial */
    .footer-section li > a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        min-width: 44px;
    }

    .footer-section .first-list,
    .footer-section .second-list,
    .footer-section ul.flex-column {
        gap: 0 !important;
    }

    .footer-section .col-lg-5 > a,
    .footer-section .footer-play-store > a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    .footer-section .social-link a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
    }

    /* Halaman masuk / lupa sandi */
    .sn-login-options a,
    .sn-login-links a,
    .back-to-login a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    .sn-login-options .custom-control-label {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    .sn-login-options .custom-control-input {
        width: 20px;
        height: 20px;
    }

    /* Kotak isian publik: tinggi nyaman untuk jari & huruf 16 px agar iPhone tidak memperbesar halaman */
    #sn-page input.form-control,
    #sn-page select.form-control,
    #sn-page textarea.form-control,
    #sn-page .form-select,
    .sn-login input.form-control {
        min-height: 44px;
        font-size: 16px;
    }
}

@media (max-width: 575.98px) {
    /* Jarak antar kolom g-5 (3rem) lebih besar dari padding container -> baris melewati tepi. */
    #sn-page .container > .row.g-5,
    #sn-home .container > .row.g-5,
    #sn-page .container > .row.gx-5,
    #sn-home .container > .row.gx-5 {
        --bs-gutter-x: 1.5rem;
    }
}

/* ------------------------------------------------------------------ */
/* 2. DASBOR (super admin & pengguna bisnis)                           */
/* ------------------------------------------------------------------ */

/* Lencana kecil di dasbor (mis. "Baru" di menu samping, jumlah data, status): minimal 12 px */
.side-bar .badge,
.section-container .badge,
.erp-table-section .badge,
.table .badge {
    font-size: max(12px, 0.75em) !important;
}

/* Penomoran halaman tidak boleh melebar keluar kartu */
.pagination {
    flex-wrap: wrap;
}

@media (max-width: 991.98px) {
    /* Menu samping: sebagian halaman (tata letak admin.layouts.app) hanya mengubah kelas .active
       lewat theme.js, sedangkan layout-modern.css menyembunyikannya dengan transform. */
    .side-bar.active {
        transform: translateX(0) !important;
    }

    .sidebar-opner {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

    /* Tombol, kotak isian, pilihan: sasaran sentuh >= 44 px */
    .section-container .btn,
    .section-container .theme-btn,
    .section-container .btn-sm,
    .erp-table-section .btn,
    .erp-table-section .theme-btn {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .section-container .form-control,
    .section-container .form-select,
    .section-container select,
    .section-container input[type="text"],
    .section-container input[type="email"],
    .section-container input[type="number"],
    .section-container input[type="date"],
    .section-container input[type="password"],
    .section-container input[type="search"],
    .section-container input[type="tel"],
    .section-container input[type="url"] {
        min-height: 44px;
        font-size: 16px;
    }

    .section-container textarea.form-control {
        min-height: 88px;
    }

    /* Kotak centang & tombol pilihan: kotak lebih besar + label setinggi 44 px */
    .section-container .form-check {
        min-height: 44px;
        display: flex;
        align-items: center;
        gap: 8px;
        padding-left: 0;
    }

    .section-container .form-check .form-check-input {
        width: 22px;
        height: 22px;
        margin: 0;
        float: none;
        flex: 0 0 auto;
    }

    .section-container .form-switch .form-check-input {
        width: 40px;
    }

    .section-container .form-check-label {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        flex: 1 1 auto;
        min-width: 0;
        width: auto;
        overflow-wrap: anywhere;
    }

    /* Tautan teks di dalam sel tabel (mis. alamat situs di Portofolio) */
    .section-container td a:not(.btn):not(.theme-btn):not(.dropdown-item) {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        overflow-wrap: anywhere;
    }

    /* Tautan di kepala dasbor ("Lihat Situs Web"), remah roti, penomoran halaman */
    .header-wrapper a,
    .section-container .breadcrumb a,
    .section-container .page-link,
    .section-container .pagination a,
    .section-container .pagination span {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        min-width: 44px;
    }

    /* Deret tombol (filter, ekspor) boleh turun baris */
    .section-container .d-flex.gap-2,
    .section-container .d-flex.gap-3,
    .section-container .table-header {
        flex-wrap: wrap;
    }

    /* Tabel lebar: gulir di dalam kartu, bukan seluruh halaman */
    .section-container .responsive-table,
    .section-container .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }
}