/* =========================================================
   🎓 GLSMI FRANCHISE — STUDENT CSS
   ========================================================= */

/* =========================================================
   STUDENT HEADER
   ========================================================= */

#studentHeaderWrapper {
    width: 100% !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    gap: 20px !important;

    margin: 20px 0 !important;
    padding: 0 !important;

    flex-wrap: nowrap !important;
}


/* =========================================================
   STUDENT TITLE BOX
   ========================================================= */

#studentHeaderWrapper .student-title-box {
    display: flex !important;

    align-items: center !important;
    justify-content: space-between !important;

    gap: 20px !important;

    flex: 1 1 auto !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;
}


/* =========================================================
   TITLE CONTENT
   ========================================================= */

#studentHeaderWrapper .student-title-box > div:first-child {
    display: flex !important;

    flex-direction: column !important;

    align-items: flex-start !important;

    gap: 4px !important;

    flex: 1 !important;
}


/* =========================================================
   SUBTITLE
   ========================================================= */

#studentHeaderWrapper .student-page-subtitle {
    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    font-family: 'Poppins', sans-serif !important;

    font-size: 12px !important;

    line-height: 1.4 !important;

    font-weight: 400 !important;

    color: #9ca3af !important;
}


/* =========================================================
   ADD STUDENT BUTTON
   ========================================================= */

#studentHeaderWrapper .add-student-btn {
    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    gap: 8px !important;

    width: auto !important;
    min-width: 155px !important;

    height: 44px !important;

    margin: 0 !important;
    padding: 0 18px !important;

    border: none !important;

    border-radius: 10px !important;

    background: #111827 !important;

    color: #ffffff !important;

    font-family: 'Poppins', sans-serif !important;

    font-size: 13px !important;

    font-weight: 600 !important;

    line-height: 1 !important;

    cursor: pointer !important;

    white-space: nowrap !important;

    box-shadow:
        0 5px 14px rgba(15, 23, 42, 0.12) !important;

    transition:
        background .2s ease,
        transform .2s ease,
        box-shadow .2s ease !important;
}


#studentHeaderWrapper .add-student-btn i {
    font-size: 13px !important;
}


#studentHeaderWrapper .add-student-btn:hover {
    background: #1f2937 !important;

    transform: translateY(-2px) !important;

    box-shadow:
        0 8px 18px rgba(15, 23, 42, 0.18) !important;
}


#studentHeaderWrapper .add-student-btn:active {
    transform: translateY(0) !important;
}


/* =========================================================
   STUDENT LIST TITLE
   IMPORTANT: Elementor/theme override protection
   ========================================================= */

#studentHeaderWrapper h3#studentListTitle,
#studentListTitle {
    display: flex !important;
    align-items: center !important;

    width: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    font-family: 'Poppins', sans-serif !important;

    font-size: 28px !important;
    line-height: 1.2 !important;

    font-weight: 700 !important;

    color: #111827 !important;

    letter-spacing: 0 !important;

    text-transform: none !important;

    white-space: nowrap !important;

    background: transparent !important;

    border: none !important;

    box-shadow: none !important;
}


/* =========================================================
   SEARCH AREA
   ========================================================= */

#studentHeaderWrapper .student-search-bar {
    display: flex !important;

    align-items: center !important;
    justify-content: flex-end !important;

    gap: 10px !important;

    flex: 1 1 auto !important;

    width: auto !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* =========================================================
   SEARCH INPUT
   ========================================================= */

#studentHeaderWrapper .student-search-bar input,
#studentSearchInput {
    width: 320px !important;
    max-width: 320px !important;

    height: 46px !important;

    margin: 0 !important;
    padding: 0 15px !important;

    border: 1px solid #dbe2ea !important;

    border-radius: 12px !important;

    background: #ffffff !important;

    color: #1e293b !important;

    font-family: 'Poppins', sans-serif !important;

    font-size: 14px !important;

    font-weight: 400 !important;

    outline: none !important;

    box-shadow: none !important;

    box-sizing: border-box !important;
}


/* SEARCH INPUT FOCUS */

#studentHeaderWrapper .student-search-bar input:focus,
#studentSearchInput:focus {
    border-color: #2563eb !important;

    outline: none !important;

    box-shadow:
        0 0 0 4px rgba(37, 99, 235, 0.10) !important;
}


/* =========================================================
   SEARCH BUTTON
   ========================================================= */

#studentHeaderWrapper .student-search-bar button {
    width: auto !important;
    min-width: 90px !important;

    height: 46px !important;

    margin: 0 !important;
    padding: 0 18px !important;

    border: none !important;

    border-radius: 12px !important;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #1d4ed8
        ) !important;

    color: #ffffff !important;

    font-family: 'Poppins', sans-serif !important;

    font-size: 14px !important;

    font-weight: 700 !important;

    cursor: pointer !important;

    box-shadow:
        0 6px 15px rgba(37, 99, 235, 0.20) !important;

    transition: 0.25s ease !important;
}

#studentHeaderWrapper .student-search-bar button:hover {
    transform: translateY(-2px) !important;

    box-shadow:
        0 10px 20px rgba(37, 99, 235, 0.25) !important;
}




/* =========================================================
   STUDENT TABLE WRAPPER
   ========================================================= */

.table-responsive {
    width: 100% !important;

    overflow-x: auto !important;

    background: #ffffff !important;

    padding: 18px !important;

    border-radius: 18px !important;

    box-shadow:
        0 8px 22px rgba(15, 23, 42, 0.07) !important;

    box-sizing: border-box !important;
}


/* =========================================================
   STUDENT TABLE
   ========================================================= */

#studentListTable {
    width: 100% !important;

    min-width: 750px !important;

    border-collapse: separate !important;

    border-spacing: 0 !important;

    background: #ffffff !important;

    border: 1px solid #e2e8f0 !important;

    border-radius: 12px !important;

    overflow: hidden !important;
}


/* =========================================================
   TABLE HEADER
   ========================================================= */

#studentListTable thead th {
    height: 50px !important;

    padding: 14px 12px !important;

    background:
        linear-gradient(
            135deg,
            #1e3a8a,
            #2563eb
        ) !important;

    color: #ffffff !important;

    font-family: 'Poppins', sans-serif !important;

    font-size: 14px !important;

    font-weight: 700 !important;

    text-align: left !important;

    vertical-align: middle !important;

    border: none !important;

    white-space: nowrap !important;
}


/* =========================================================
   TABLE BODY
   ========================================================= */

#studentListTable tbody td {
    padding: 13px 12px !important;

    background: #ffffff !important;

    color: #334155 !important;

    font-family: 'Poppins', sans-serif !important;

    font-size: 14px !important;

    font-weight: 500 !important;

    text-align: left !important;

    vertical-align: middle !important;

    border-bottom: 1px solid #e2e8f0 !important;
}


/* =========================================================
   ROW HOVER
   ========================================================= */

#studentListTable tbody tr:hover td {
    background: #f8fbff !important;
}


/* =========================================================
   LAST ROW
   ========================================================= */

#studentListTable tbody tr:last-child td {
    border-bottom: none !important;
}


/* =========================================================
   STATUS
   ========================================================= */

#studentListTable .status-badge {
    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    min-width: 75px !important;

    padding: 5px 10px !important;

    border-radius: 20px !important;

    font-size: 12px !important;

    font-weight: 700 !important;
}


/* =========================================================
   ACTION BUTTONS
   ========================================================= */

#studentListTable button {
    border: none !important;

    border-radius: 8px !important;

    padding: 7px 12px !important;

    font-family: 'Poppins', sans-serif !important;

    font-size: 12px !important;

    font-weight: 700 !important;

    cursor: pointer !important;

    margin: 2px !important;
}


/* =========================================================
   PAGINATION
   ========================================================= */

#pagination {
    width: 100% !important;

    display: flex !important;

    justify-content: center !important;

    align-items: center !important;

    flex-wrap: wrap !important;

    gap: 8px !important;

    margin-top: 20px !important;

    padding: 0 !important;
}

#pagination button {
    min-width: 42px !important;

    height: 42px !important;

    padding: 0 12px !important;

    border: none !important;

    border-radius: 10px !important;

    background: #ffffff !important;

    color: #1e293b !important;

    font-size: 13px !important;

    font-weight: 700 !important;

    cursor: pointer !important;

    box-shadow:
        0 4px 12px rgba(15, 23, 42, 0.08) !important;
}

#pagination button.active {
    background: #2563eb !important;

    color: #ffffff !important;
}

/* =========================================================
   STUDENT PROFILE MODAL
========================================================= */

.profile-modal {

    display: none;

    position: fixed;

    inset: 0;

    width: 100%;
    height: 100%;

    background: rgba(0, 0, 0, 0.55);

    z-index: 99999;

    align-items: center;

    justify-content: center;

    padding: 20px;

    box-sizing: border-box;

}


/* =========================================================
   PROFILE CONTAINER
========================================================= */

.profile-container {

    width: 100%;

    max-width: 850px;

    max-height: 90vh;

    overflow-y: auto;

    background: #ffffff;

    border-radius: 16px;

    padding: 25px;

    box-sizing: border-box;

    box-shadow:
        0 20px 60px
        rgba(0,0,0,0.25);

}

/* =========================================================
   GLSMI - STUDENT MODAL FINAL FIX
========================================================= */

#studentModal.student-modal {
    display: none !important;
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    margin: 0 !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(15, 23, 42, 0.72) !important;
    z-index: 9999999 !important;
    overflow-y: auto !important;
}

#studentModal.student-modal.glsmi-modal-open {
    display: flex !important;
}


/* =========================================================
   ACTUAL INNER CONTENT
   HTML CLASS = modal-content
========================================================= */

#studentModal.student-modal > .modal-content {

    display: grid !important;

    width: min(1100px, 92vw) !important;

    min-width: 0 !important;

    max-width: 1100px !important;

    height: auto !important;

    max-height: 92vh !important;

    margin: auto !important;

    padding: 0 0 20px 0 !important;

    box-sizing: border-box !important;

    background: linear-gradient(
        145deg,
        #ffffff,
        #f8fbff
    ) !important;

    border-radius: 28px !important;

    overflow-y: auto !important;

    position: relative !important;

    flex: 0 1 auto !important;

    visibility: visible !important;

    opacity: 1 !important;

    transform: none !important;
}


/* =========================================================
   HEADER
========================================================= */

#studentModal.student-modal > .modal-content > h3 {

    grid-column: 1 / -1 !important;

    width: 100% !important;

    box-sizing: border-box !important;

    margin: 0 !important;

    padding: 28px 35px !important;

    font-size: 30px !important;

    font-weight: 800 !important;

    color: #fff !important;

    background: linear-gradient(
        135deg,
        #2563eb,
        #4f46e5,
        #7c3aed
    ) !important;

}


/* =========================================================
   SECTION TITLES
========================================================= */

#studentModal .modal-section-title {

    grid-column: 1 / -1 !important;

}


/* =========================================================
   FULL WIDTH
========================================================= */

#studentModal #stu_address,
#studentModal #stu_subject,
#studentModal #stu_session {

    grid-column: 1 / -1 !important;

}


/* =========================================================
   DOCUMENT ROW
========================================================= */

#studentModal .documents-row {

    grid-column: 1 / -1 !important;

}


/* =========================================================
   ACTIONS
========================================================= */

#studentModal .modal-actions {

    grid-column: 1 / -1 !important;

}





/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 766px) {

    #studentHeaderWrapper {
        flex-direction: column !important;

        align-items: stretch !important;

        gap: 12px !important;
    }

    #studentHeaderWrapper h3#studentListTitle,
    #studentListTitle {
        font-size: 24px !important;

        line-height: 1.25 !important;
    }

    #studentHeaderWrapper .student-search-bar {
        width: 100% !important;

        justify-content: stretch !important;
    }

    #studentHeaderWrapper .student-search-bar input,
    #studentSearchInput {
        width: 100% !important;

        max-width: none !important;

        flex: 1 !important;
    }
    
    #studentModal.student-modal > .modal-content {

        width: 96vw !important;

        grid-template-columns: 1fr !important;

        border-radius: 18px !important;

    }

    #studentModal .modal-section-title,
    #studentModal #stu_address,
    #studentModal #stu_subject,
    #studentModal #stu_session,
    #studentModal .documents-row,
    #studentModal .modal-actions {

        grid-column: 1 !important;

    }

    #studentModal .documents-row {

        grid-template-columns: 1fr !important;

    }



}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    #studentHeaderWrapper {
        margin: 15px 0 !important;
    }

    #studentHeaderWrapper h3#studentListTitle,
    #studentListTitle {
        font-size: 21px !important;
    }

    #studentHeaderWrapper .student-search-bar {
        display: flex !important;

        flex-direction: row !important;
    }

    #studentHeaderWrapper .student-search-bar input {
        min-width: 0 !important;
    }

    #studentHeaderWrapper .student-search-bar button {
        min-width: 80px !important;
    }

    .table-responsive {
        padding: 10px !important;

        border-radius: 14px !important;
    }

}