/* =========================================================
   GMAHSSA FINAL LAUNCH RESPONSIVE SYSTEM
   Public + Student + Admin
   ========================================================= */


/* =========================================================
   1. GLOBAL RESPONSIVE SAFETY
   ========================================================= */

html {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
}

body {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

img,
svg,
video,
canvas,
iframe {
    max-width: 100%;
    height: auto;
}

input,
select,
textarea,
button {
    max-width: 100%;
}

.row > *,
[class*="col-"] {
    min-width: 0;
}


/* =========================================================
   2. PUBLIC NAVBAR - GLOBAL
   ========================================================= */

.public-main-navbar {
    width: 100%;
    max-width: 100%;
}

.public-main-navbar .container {
    width: calc(100% - 32px) !important;
    max-width: 1380px !important;
    min-width: 0 !important;
}

.public-main-navbar .navbar-brand {
    min-width: 0 !important;
    flex: 0 1 auto !important;
}

.public-main-navbar .navbar-brand > * {
    min-width: 0 !important;
}

.public-main-navbar .brand-title {
    max-width: 100% !important;
}

.public-main-navbar .navbar-collapse,
.public-main-navbar .navbar-nav,
.public-main-navbar .nav-item {
    min-width: 0 !important;
}

.navbar-action-area {
    flex-shrink: 0 !important;
}


/* =========================================================
   3. 13-INCH / 14-INCH LAPTOP NAVBAR
   ========================================================= */

@media (min-width: 1200px) and (max-width: 1399.98px) {

    .public-main-navbar {
        padding-top: 12px !important;
        padding-bottom: 12px !important;
    }

    .public-main-navbar .container {
        width: calc(100% - 20px) !important;
        max-width: 1320px !important;
    }

    .public-main-navbar .navbar-brand {
        margin-right: 8px !important;
    }

    .public-main-navbar .brand-title {
        font-size: 16px !important;
        line-height: 1.15 !important;
        white-space: nowrap !important;
    }

    .public-main-navbar .logo-circle {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
    }

    .public-main-navbar .navbar-nav {
        gap: 0 !important;
    }

    .public-main-navbar .nav-link {
        font-size: 13.5px !important;

        padding-left: 7px !important;
        padding-right: 7px !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        white-space: nowrap !important;
    }

    .public-main-navbar .navbar-action-area {
        margin-left: 8px !important;
        gap: 7px !important;
    }

    .public-main-navbar
    .navbar-action-area > .btn {
        padding: 8px 14px !important;
        min-width: auto !important;
    }

    .public-main-navbar .student-profile-btn {
        padding: 8px 11px !important;
    }

    .public-main-navbar
    .student-profile-info strong {
        max-width: 115px !important;
    }
}


/* =========================================================
   4. TABLET + SMALL LAPTOP NAVBAR
   Collapse below 1200px so association name cannot overlap.
   ========================================================= */

@media (max-width: 1199.98px) {

    .public-main-navbar {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }

    .public-main-navbar .container {
        width: calc(100% - 24px) !important;
        max-width: 100% !important;

        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
    }

    .public-main-navbar .navbar-brand {
        max-width: calc(100% - 65px) !important;

        margin-right: 0 !important;

        min-width: 0 !important;
    }

    .public-main-navbar .brand-title {
        max-width: 100% !important;

        font-size: clamp(
            15px,
            2vw,
            18px
        ) !important;

        line-height: 1.15 !important;

        white-space: normal !important;
        overflow-wrap: break-word !important;
    }

    .public-main-navbar .logo-circle {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
    }

    .public-main-navbar .navbar-toggler {
        display: block !important;

        margin-left: auto !important;

        flex-shrink: 0 !important;
    }

    .public-main-navbar .navbar-collapse {
        flex-basis: 100% !important;
        flex-grow: 1 !important;

        width: 100% !important;

        margin-top: 14px !important;
        padding-top: 14px !important;

        border-top:
            1px solid
            rgba(15, 23, 42, 0.08) !important;
    }

    .public-main-navbar
    .navbar-collapse.collapse:not(.show) {
        display: none !important;
    }

    .public-main-navbar
    .navbar-collapse.collapse.show {
        display: block !important;
    }

    .public-main-navbar .navbar-nav {
        width: 100% !important;

        flex-direction: column !important;
        align-items: stretch !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        padding-bottom: 12px !important;

        gap: 5px !important;
    }

    .public-main-navbar
    .navbar-nav .nav-item {
        width: 100% !important;
    }

    .public-main-navbar .nav-link {
        width: 100% !important;
        display: block !important;

        margin: 0 !important;
        padding: 11px 14px !important;

        border-radius: 13px !important;

        font-size: 15px !important;

        white-space: normal !important;
    }

    .public-main-navbar
    .navbar-action-area {
        width: 100% !important;

        margin: 0 !important;
        padding-top: 12px !important;

        display: grid !important;
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            ) !important;

        gap: 10px !important;

        border-top:
            1px solid
            rgba(15, 23, 42, 0.08) !important;
    }

    .public-main-navbar
    .navbar-action-area > .btn {
        width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;

        display: flex !important;
        justify-content: center !important;
    }

    .public-main-navbar
    .student-profile-dropdown {
        width: 100% !important;

        grid-column: 1 / -1 !important;
    }

    .public-main-navbar
    .student-profile-btn {
        width: 100% !important;
        max-width: 100% !important;

        justify-content: flex-start !important;
    }

    .public-main-navbar
    .student-profile-info {
        min-width: 0 !important;
        flex: 1 1 auto !important;
    }

    .public-main-navbar
    .student-profile-info strong {
        max-width: 100% !important;

        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .public-main-navbar
    .student-profile-btn
    .fa-chevron-down {
        margin-left: auto !important;
    }

    .public-main-navbar
    .student-dropdown-menu {
        width: 100% !important;
        min-width: 100% !important;

        position: static !important;
        transform: none !important;

        margin-top: 8px !important;
    }
}


/* =========================================================
   5. PHONE NAVBAR
   ========================================================= */

@media (max-width: 575.98px) {

    .public-main-navbar .container {
        width: calc(100% - 18px) !important;
    }

    .public-main-navbar .navbar-brand {
        max-width: calc(100% - 56px) !important;
    }

    .public-main-navbar .brand-title {
        font-size: 13.5px !important;
        line-height: 1.15 !important;
    }

    .public-main-navbar .logo-circle {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
    }

    .public-main-navbar
    .navbar-action-area {
        grid-template-columns: 1fr !important;
    }
}


/* =========================================================
   6. PUBLIC WEBSITE FLUID SYSTEM
   ========================================================= */

.hero-section,
.stats-section,
.events-section,
.gallery-preview,
.home-achievements-section,
.testimonials-section,
.cta-section,
.premium-footer {
    width: 100%;
    max-width: 100%;
}

.hero-section .container,
.stats-section .container,
.events-section .container,
.gallery-preview .container,
.home-achievements-section .container,
.testimonials-section .container,
.cta-section .container,
.premium-footer .container {
    min-width: 0;
}

.hero-title {
    font-size:
        clamp(
            38px,
            5vw,
            72px
        ) !important;
}

.hero-card,
.stat-card,
.home-event-card,
.achievement-card,
.gallery-card,
.testimonial-card,
.cta-box {
    min-width: 0 !important;
    max-width: 100% !important;
}


/* =========================================================
   7. PUBLIC TABLET
   ========================================================= */

@media (max-width: 991.98px) {

    .hero-section .hero-row {
        row-gap: 28px !important;
    }

    .hero-section .hero-card {
        max-width: 720px !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }

    .stats-section .row > * {
        min-width: 0 !important;
    }
}


/* =========================================================
   8. PUBLIC MOBILE
   ========================================================= */

@media (max-width: 767.98px) {

    .hero-title {
        font-size:
            clamp(
                36px,
                11vw,
                52px
            ) !important;
    }

    .hero-section,
    .stats-section,
    .events-section,
    .gallery-preview,
    .home-achievements-section,
    .testimonials-section,
    .cta-section {
        overflow-x: clip !important;
    }
}


/* =========================================================
   9. STUDENT DASHBOARD GLOBAL
   ========================================================= */

.student-dashboard-page,
.student-dashboard-page .container,
.student-dashboard-hero,
.dashboard-grid,
.dashboard-card,
.student-details-card,
.membership-card,
.subscription-card,
.notifications-card,
.payment-history-card,
.documents-card,
.certificates-card,
.announcement-card {
    min-width: 0 !important;
    max-width: 100% !important;
}

.student-profile-summary,
.student-profile-summary > div,
.student-info-grid,
.student-info-grid > div {
    min-width: 0 !important;
}

.student-profile-summary h1,
.student-profile-summary p,
.student-info-grid strong,
.student-info-grid span,
.membership-details,
.membership-profile,
.document-item,
.certificate-item {
    overflow-wrap: anywhere !important;
}


/* =========================================================
   10. STUDENT TABLET / SMALL LAPTOP
   ========================================================= */

@media (max-width: 1199.98px) {

    .student-dashboard-page {
        padding-top: 32px !important;
        padding-bottom: 32px !important;
    }

    .student-dashboard-page .container {
        width: 100% !important;
        max-width: 100% !important;

        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .student-dashboard-hero {
        flex-wrap: wrap !important;
        align-items: flex-start !important;
    }

    .student-profile-summary {
        min-width: 0 !important;
        flex: 1 1 580px !important;
    }

    .student-hero-actions {
        width: 100% !important;
        flex: 1 1 100% !important;
    }

    .dashboard-grid {
        width: 100% !important;

        grid-template-columns:
            minmax(0, 1fr) !important;

        gap: 22px !important;
    }

    .dashboard-card,
    .student-details-card,
    .membership-card,
    .subscription-card,
    .notifications-card,
    .payment-history-card,
    .documents-card,
    .certificates-card,
    .announcement-card {
        width: 100% !important;
        max-width: 100% !important;

        grid-column: auto !important;
    }
}


/* =========================================================
   11. STUDENT MOBILE
   ========================================================= */

@media (max-width: 767.98px) {

    .student-dashboard-page .container {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .student-dashboard-hero {
        padding: 21px !important;
        border-radius: 22px !important;
    }

    .student-profile-summary {
        width: 100% !important;

        flex-direction: column !important;
        align-items: flex-start !important;

        gap: 16px !important;
    }

    .student-profile-summary h1 {
        font-size:
            clamp(
                24px,
                8vw,
                31px
            ) !important;
    }

    .student-hero-actions {
        width: 100% !important;

        display: grid !important;
        grid-template-columns: 1fr !important;
    }

    .student-hero-actions
    .dashboard-btn {
        width: 100% !important;
    }

    .dashboard-card {
        padding: 19px !important;
        border-radius: 20px !important;
    }

    .student-info-grid {
        grid-template-columns:
            minmax(0, 1fr) !important;

        gap: 13px !important;
    }

    .subscription-status,
    .membership-card-top,
    .document-item,
    .certificate-item {
        flex-wrap: wrap !important;
    }
}


/* =========================================================
   12. ADMIN GLOBAL
   ========================================================= */

.admin-page,
.admin-dashboard-page,
.admin-layout,
.admin-main {
    max-width: 100%;
}

.admin-main {
    min-width: 0 !important;
}

.admin-card,
.students-card,
.students-table-card,
.membership-table-card,
.payments-card,
.events-card,
.resources-card,
.announcements-card,
.content-card,
.settings-card,
.admin-page-hero,
.students-hero-card,
.membership-header,
.payments-header,
.events-header,
.resources-header,
.announcements-header,
.content-header,
.settings-header {
    min-width: 0 !important;
    max-width: 100% !important;
}

.admin-systembar,
.admin-topbar,
.admin-system-actions,
.admin-topbar-actions,
.admin-profile-chip {
    min-width: 0 !important;
}


/* =========================================================
   13. ADMIN 13-INCH LAPTOP
   ========================================================= */

@media (max-width: 1399.98px) {

    .admin-main {
        padding: 20px !important;
    }

    .admin-stats-grid,
    .membership-stats,
    .payments-stats,
    .events-stats,
    .resources-stats,
    .announcements-stats,
    .content-stats,
    .settings-stats {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            ) !important;
    }

    .admin-page-hero,
    .students-hero-card,
    .membership-header,
    .payments-header,
    .events-header,
    .resources-header,
    .announcements-header,
    .content-header,
    .settings-header {
        padding: 26px !important;
    }
}


/* =========================================================
   14. ADMIN TABLET
   ========================================================= */

@media (max-width: 1050px) {

    .admin-main {
        width: 100% !important;
        max-width: 100% !important;

        margin-left: 0 !important;

        padding: 17px !important;
    }

    .admin-systembar,
    .admin-topbar {
        flex-wrap: wrap !important;
    }

    .admin-page-hero,
    .students-hero-card,
    .membership-header,
    .payments-header,
    .events-header,
    .resources-header,
    .announcements-header,
    .content-header,
    .settings-header {
        min-height: auto !important;

        flex-direction: column !important;
        align-items: flex-start !important;

        gap: 16px !important;
    }

    .admin-page-hero > *,
    .students-hero-card > *,
    .membership-header > *,
    .payments-header > *,
    .events-header > *,
    .resources-header > *,
    .announcements-header > *,
    .content-header > *,
    .settings-header > * {
        max-width: 100% !important;
    }
}


/* =========================================================
   15. ADMIN TABLE SAFETY
   ========================================================= */

.table-responsive,
.students-table-wrap,
.membership-table-wrap,
.payments-table-wrap,
.events-table-wrap,
.resources-table-wrap,
.announcements-table-wrap,
.admin-table-wrap,
.payment-table-wrap {
    width: 100% !important;
    max-width: 100% !important;

    overflow-x: auto !important;
    overflow-y: hidden;

    -webkit-overflow-scrolling: touch;
}


/* =========================================================
   16. MODALS ABOVE ADMIN SIDEBAR
   Sidebar uses z-index 1200.
   ========================================================= */

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

.modal-backdrop {
    z-index: 4990 !important;
}

.modal {
    z-index: 5000 !important;
}


/* =========================================================
   17. ADMIN MODAL SIZE
   ========================================================= */

.admin-page .modal-dialog,
.admin-dashboard-page .modal-dialog {
    width:
        min(
            960px,
            calc(100vw - 48px)
        ) !important;

    max-width:
        min(
            960px,
            calc(100vw - 48px)
        ) !important;

    margin:
        20px auto !important;
}

.admin-page .modal-content,
.admin-dashboard-page .modal-content {
    width: 100% !important;

    max-height:
        calc(
            100dvh - 40px
        ) !important;

    display: flex !important;
    flex-direction: column !important;

    overflow: hidden !important;
}

.admin-page .modal-header,
.admin-dashboard-page .modal-header,
.admin-page .modal-footer,
.admin-dashboard-page .modal-footer {
    flex: 0 0 auto !important;
}

.admin-page .modal-body,
.admin-dashboard-page .modal-body {
    flex: 1 1 auto !important;

    min-height: 0 !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.admin-page .modal-body .row > *,
.admin-dashboard-page .modal-body .row > * {
    min-width: 0 !important;
}

.admin-page .modal-footer,
.admin-dashboard-page .modal-footer {
    display: flex !important;
    flex-wrap: wrap !important;

    justify-content: flex-end !important;

    gap: 9px !important;
}

.admin-page .modal-footer > *,
.admin-dashboard-page .modal-footer > * {
    margin: 0 !important;
}


/* =========================================================
   18. ADMIN MOBILE
   ========================================================= */

@media (max-width: 767.98px) {

    .admin-main {
        padding: 11px !important;
    }

    .admin-stats-grid,
    .membership-stats,
    .payments-stats,
    .events-stats,
    .resources-stats,
    .announcements-stats,
    .content-stats,
    .settings-stats {
        grid-template-columns:
            minmax(0, 1fr) !important;
    }

    .admin-page-hero,
    .students-hero-card,
    .membership-header,
    .payments-header,
    .events-header,
    .resources-header,
    .announcements-header,
    .content-header,
    .settings-header {
        padding: 19px !important;
        border-radius: 19px !important;
    }

    .admin-page .modal-dialog,
    .admin-dashboard-page .modal-dialog {
        width:
            calc(
                100vw - 14px
            ) !important;

        max-width:
            calc(
                100vw - 14px
            ) !important;

        margin:
            7px auto !important;
    }

    .admin-page .modal-content,
    .admin-dashboard-page .modal-content {
        max-height:
            calc(
                100dvh - 14px
            ) !important;

        border-radius: 17px !important;
    }

    .admin-page .modal-header,
    .admin-dashboard-page .modal-header {
        padding: 15px 17px !important;
    }

    .admin-page .modal-body,
    .admin-dashboard-page .modal-body {
        padding: 17px !important;
    }

    .admin-page .modal-footer,
    .admin-dashboard-page .modal-footer {
        padding: 13px 17px !important;
    }

    .admin-page .modal-footer .btn,
    .admin-dashboard-page .modal-footer .btn,
    .admin-page .modal-footer button,
    .admin-dashboard-page .modal-footer button {
        flex: 1 1 165px !important;
    }

    .admin-profile-chip h4,
    .admin-profile-chip h5,
    .admin-profile-chip p {
        max-width: 145px;

        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}


/* =========================================================
   19. VERY SMALL PHONE
   ========================================================= */

@media (max-width: 420px) {

    .admin-main {
        padding-left: 9px !important;
        padding-right: 9px !important;
    }

    .dashboard-card {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}


/* =========================================================
   20. SHORT LAPTOP HEIGHT
   ========================================================= */

@media (min-width: 1051px) and (max-height: 760px) {

    .admin-sidebar-card,
    .sidebar-card,
    .sidebar-helper {
        display: none !important;
    }

    .admin-sidebar {
        padding-top: 14px !important;
        padding-bottom: 14px !important;
    }
}