/**
 *
 * You can write your CSS code here, DO NOT touch the default JavaScript file
 * because it will make it harder for you to update.
 *
 */

/* Responsive page gutters (was a fixed inline 7% that left almost no room on phones) */
.main-wrapper {
    margin-left: 7%;
    margin-right: 7%;
}

@media (max-width: 991.98px) {
    .main-wrapper {
        margin-left: 4%;
        margin-right: 4%;
    }
}

@media (max-width: 575.98px) {
    .main-wrapper {
        margin-left: 3%;
        margin-right: 3%;
    }
}

/* Responsive header padding (was a fixed inline 10%) */
.navbar-main-responsive {
    padding-left: 10%;
    padding-right: 10%;
}

/* The old admin dashboard theme has a leftover rule (style.css, "@media
   (max-width: 1024px) { .navbar { left: 5px; right: 0; } }") meant for a
   sidebar layout we don't use here. It makes the navbar sit asymmetrically
   (5px inset on the left, flush on the right) so the mobile toggle button
   ends up misaligned with the page content below it. Force it back to a
   symmetric 0/0 so the header lines up with .main-wrapper's gutters. */
.navbar {
    left: 0;
    right: 0;
}

@media (max-width: 991.98px) {
    .navbar-main-responsive {
        padding-left: 3%;
        padding-right: 3%;
    }

    /* The theme's base .navbar rule is position:fixed with a hard-coded
       100px height, built for a desktop dashboard bar. On mobile that fights
       a real vertical hamburger menu: a fixed element can't grow to make
       room for its own expanded content, so the menu either overlaps the
       page or has to become its own floating, independently-scrolling box.
       Taking the header out of fixed positioning on mobile lets the menu
       behave like a normal vertical list: tapping the toggle simply pushes
       the rest of the page down, and everything scrolls together as one
       page — no nested scroll box, no overlap. */
    .navbar-main-responsive {
        position: static;
        height: auto;
    }

    .navbar-main-responsive .navbar-collapse {
        width: 100%;
    }

    .navbar-main-responsive .navbar-nav {
        width: 100%;
    }

    /* Bootstrap's dropdown-menu is absolutely positioned by default, which
       would still float submenus (e.g. "Menu" -> Chat Admin/Tentang
       Kami/FAQ) outside the normal list instead of expanding it in place.
       Make them render inline, like a normal vertical mobile nav. */
    .navbar-main-responsive .navbar-collapse .dropdown-menu {
        position: static;
        float: none;
        width: 100%;
        margin: 0;
        border: none;
        box-shadow: none;
        padding-left: 1rem;
    }
}

/* Bootstrap's pagination is a plain flex row that doesn't wrap, so a book
   catalog with many pages overflows sideways on narrow screens and the
   early page numbers (including "1") end up scrolled out of view. Let it
   wrap onto multiple lines instead so every page number stays reachable
   without horizontal scrolling. */
@media (max-width: 767.98px) {
    .pagination {
        flex-wrap: wrap;
        justify-content: center;
    }
}

/*# sourceMappingURL=custom.css.map */