/* TuitionE Admin Responsive Improvements */

/* Prevent the page from becoming wider than the screen */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

#container,
#appbody,
#content {
    min-width: 0;
}

/* Question table responsive container */
.question-table-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto !important;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
}

.question-table-scroll {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto !important;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

.question-table-scroll #table {
    width: 1400px !important;
    min-width: 1400px;
    margin: 0;
    table-layout: auto;
}

.question-table-scroll th,
.question-table-scroll td {
    white-space: nowrap;
}

.question-table-scroll th,
.question-table-scroll td {
    white-space: nowrap;
    vertical-align: middle !important;
    padding: 9px 12px !important;
}

.question-table-scroll th:nth-child(3),
.question-table-scroll td:nth-child(3) {
    min-width: 250px;
    max-width: 350px;
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Panel toolbar */
.question-panel .panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.question-panel .panel-heading::before,
.question-panel .panel-heading::after {
    display: none;
}

.question-panel .panel-heading .pull-left,
.question-panel .panel-heading .pull-right {
    float: none !important;
}

.question-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.question-actions .btn {
    margin: 0;
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1199px) {

    #header {
        min-height: 55px;
    }

    #header .navbar-brand img {
        max-width: 155px;
        max-height: 40px;
        width: auto;
        height: auto;
    }

    #header .branchname {
        font-size: 16px;
        line-height: 20px;
    }

    #header .profileBox {
        flex-shrink: 0;
    }

    #content .container-fluid {
        padding-left: 12px;
        padding-right: 12px;
    }

    .question-panel .panel-body {
        padding: 12px;
    }

    .question-panel .panel-title {
        font-size: 15px;
    }
}

/* Mobile */
@media (max-width: 767px) {

    #header .navbar-brand img {
        max-width: 110px;
        max-height: 35px;
    }

    #header .branchname {
        font-size: 13px;
    }

    .question-panel .panel-heading {
        align-items: stretch;
    }

    .question-panel .panel-heading .pull-left,
    .question-panel .panel-heading .pull-right {
        width: 100%;
    }

    .question-actions {
        display: flex;
        width: 100%;
    }

    .question-actions .btn {
        flex: 1;
        font-size: 12px;
        padding: 8px 6px;
    }

    .question-panel .panel-body {
        padding: 8px;
    }

    .question-table-scroll #table {
        min-width: 1300px;
    }
}

@media (min-width: 768px) and (max-width: 1199px) {

    #header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between;
        flex-wrap: nowrap !important;
        min-height: 60px;
        height: auto;
        padding: 5px 12px;
    }

    #header .navbar-header {
        display: flex;
        align-items: center;
        flex-shrink: 0;
        float: none !important;
    }

    #header .navbar-brand img {
        max-width: 145px;
        max-height: 38px;
        object-fit: contain;
    }

    #header .header-middle {
        display: flex !important;
        flex: 1;
        min-width: 0;
        align-items: center;
        justify-content: space-between;
        flex-wrap: nowrap !important;
    }

    #header .tricker {
        flex: 1;
        min-width: 0;
    }

    #header .branchname {
        font-size: 16px;
        margin: 0;
        white-space: nowrap;
    }

    #header .profileBox {
        display: flex;
        align-items: center;
        flex-shrink: 0;
        margin-left: auto;
    }

    #header .profileBox img {
        width: 32px;
        height: 32px;
    }

    #header .profile_right h6 {
        font-size: 12px;
        margin: 0;
    }

    #header .profile_right small {
        font-size: 11px;
    }
}

.question-panel .panel-heading {
    display: flex !important;
    visibility: visible !important;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

.question-panel .question-actions {
    display: flex !important;
    visibility: visible !important;
    flex-wrap: wrap;
    gap: 6px;
}