/* ==================================================================
         * PATCH: RAPIKAN IKON MENU DI HP + PEMBEDA WARNA SUBMENU
         * ------------------------------------------------------------------
         * Sidebar mobile sudah diubah jadi panel ramping di sisi kiri (lihat
         * "PATCH: SIDEBAR MOBILE MENJADI PANEL KIRI" di atas), strukturnya
         * kini sama seperti versi desktop -- daftar vertikal, bukan lagi bar
         * ikon horizontal di bawah layar. Tapi setiap tombol menunya MASIH
         * memakai gaya lama "ikon di atas, label di bawah, semua di-tengah"
         * (flex-col + items-center, dirancang untuk bar ikon horizontal),
         * yang di dalam daftar vertikal ramping ini membuat posisi ikon
         * naik-turun tidak presisi (tergantung label 1 atau 2 baris).
         *
         * Di bawah ini dipaksa memakai tata letak SATU BARIS per menu (ikon
         * di kiri dengan lebar tetap, label di kanan rata kiri) -- seperti
         * versi desktop -- supaya semua ikon berbaris lurus PERSIS pada
         * posisi X yang sama dari menu paling atas sampai paling bawah.
         *
         * Submenu (grup dropdown seperti "Bimbingan Khusus", "Tahfidz",
         * "Kegiatan Lapangan") tetap disusun vertikal satu tombol per baris,
         * dengan tambahan garis aksen biru di kiri + latar sedikit lebih
         * gelap, supaya jelas terlihat sebagai SUB-menu -- beda dari menu
         * utama di atasnya.
         * ================================================================== */
        @media (max-width: 767.98px) {
            #main-nav>button,
            #main-nav>div[id^="menu-"]>button {
                flex-direction: row !important;
                align-items: center !important;
                justify-content: flex-start !important;
                text-align: left !important;
                padding-top: 10px !important;
                padding-bottom: 10px !important;
                gap: 12px;
            }

            #main-nav>button>i.fas,
            #main-nav>div[id^="menu-"]>button>i.fas {
                width: 22px !important;
                height: 22px !important;
                margin: 0 !important;
                font-size: 16px !important;
                line-height: 22px !important;
                flex-shrink: 0;
            }

            #main-nav>button>span,
            #main-nav>div[id^="menu-"]>button>span {
                text-align: left !important;
                white-space: normal !important;
                display: block !important;
                -webkit-line-clamp: unset !important;
                -webkit-box-orient: unset !important;
                overflow: visible !important;
                min-height: 0 !important;
                padding: 0 !important;
                line-height: 1.25 !important;
            }

            /* Submenu tetap satu kolom vertikal + pembeda warna.
               PERBAIKAN: sebelumnya "display: flex !important" di sini
               dipasang tanpa syarat, sehingga MENGALAHKAN class "hidden"
               bawaan Tailwind (display:none) yang dipakai untuk
               menyembunyikan submenu saat tertutup -- akibatnya semua
               submenu selalu terbuka dan tidak bisa disembunyikan lagi.
               Sekarang ditambah ":not(.hidden)" supaya aturan tata letak
               ini HANYA berlaku saat submenu sedang ditampilkan; saat
               class "hidden" masih terpasang, submenu tetap benar-benar
               tersembunyi seperti seharusnya. */
            .submenu-panel:not(.hidden),
            #main-nav [id^="sub_"]:not(.hidden) {
                display: flex !important;
                flex-direction: column !important;
            }

            .submenu-panel>button,
            #main-nav [id^="sub_"]>button {
                display: flex !important;
                align-items: center !important;
                border-left: 3px solid #3c8dbc;
                background-color: #171f23;
            }

            .submenu-panel>button:hover,
            #main-nav [id^="sub_"]>button:hover,
            .submenu-panel>button:active,
            #main-nav [id^="sub_"]>button:active {
                background-color: #20303a !important;
            }

            /* PERBAIKAN: samakan ukuran font label menu induk dengan label
               submenu -- sebelumnya menu induk 9px sedangkan submenu 10px,
               jadi tampak tidak seragam. */
            #main-nav>button>span,
            #main-nav>div[id^="menu-"]>button>span,
            .submenu-panel>button,
            #main-nav [id^="sub_"]>button {
                font-size: 12px !important;
            }
        }