/* =========================================================
   TEACHER TIMETABLE SUMMARY
========================================================= */
.summary {
    font-size: 12px;
}

.summary-title {
    margin-bottom: 5px;
}

.summary-items {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 3px;
}

.summary .badge {
    font-size: 10px;
    font-weight: 600;
}

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

.timetable-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    margin-bottom: 10px;
}
@media screen and (max-width: 767.98px) {

    .summary {
        font-size: 10px;
    }

    .summary-items {
        gap: 2px;
    }

    .summary .badge {
        font-size: 8px;
        margin-right: 2px !important;
        margin-bottom: 2px !important;
    }

}

/* =========================================================
   MAIN CONTAINER
========================================================= */

.timetable-container {
    border: 2px solid #d4af37 !important;
    border-radius: 6px;
    margin-left: auto;
    margin-right: auto;
}


/* =========================================================
   TIMETABLE TABLE
========================================================= */

.teacher-timetable {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    margin-bottom: 0;
}


/* =========================================================
   TABLE HEADERS
========================================================= */

.teacher-timetable th {
    font-size: 10px;
    font-weight: 600;
    vertical-align: middle;
    text-align: center;
}

.teacher-timetable th small {
    font-size: 10px;
    font-weight: 400;
}


/* =========================================================
   DAY COLUMN
========================================================= */

.teacher-timetable .day-column {
    width: 60px;
    min-width: 60px;
    max-width: 60px;

    text-align: center;

    font-size: 12px;
    font-weight: 700;
}


/* =========================================================
   PERIOD COLUMNS
========================================================= */

.teacher-timetable .period-column {
    width: 85px;
    min-width: 85px;
    max-width: 85px;

    text-align: center;

    font-size: 12px;
    font-weight: 700;

    white-space: nowrap;
}

.teacher-timetable .period-column small,
.teacher-timetable .special-header small {
    display: inline-block;

    margin-top: 2px;

    font-size: 9px;
    font-weight: 500;
}


/* =========================================================
   SPECIAL COLUMNS
========================================================= */

.teacher-timetable .special-header {
    width: 45px;
    min-width: 45px;
    max-width: 45px;

    padding: 3px;

    text-align: center;

    font-size: 9px;
    font-weight: 700;
}

.teacher-timetable .break-column,
.teacher-timetable .lunch-column,
.teacher-timetable .study-column {
    width: 45px;
    min-width: 45px;
    max-width: 45px;

    padding: 4px 2px !important;

    text-align: center;
    vertical-align: middle !important;

    font-size: 10px;
    font-weight: 600;

    line-height: 1.1;
}


/* =========================================================
   LESSON CELLS
========================================================= */

.teacher-timetable .lesson-cell {
    width: 85px;
    min-width: 85px;
    max-width: 85px;

    height: 62px;

    padding: 3px;

    text-align: center !important;
    vertical-align: middle !important;
}


/* =========================================================
   LESSON BOX
========================================================= */

.teacher-timetable .lesson-box {
    width: 100%;

    min-height: 48px;

    display: flex;

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

    margin: 0 auto;

    padding: 3px;

    box-sizing: border-box;

    text-align: center !important;

    line-height: 1;

    overflow: hidden;
}


/* =========================================================
   LESSON LABEL
========================================================= */

.teacher-timetable .lesson-label {
    display: inline-block !important;

    width: auto !important;

    margin: 0 auto;

    white-space: nowrap !important;

    text-align: center !important;

    font-size: 8px;

    line-height: 1;

    overflow: hidden;
}


/* =========================================================
   SUBJECT CODE
========================================================= */

.teacher-timetable .lesson-label strong {
    display: inline !important;

    font-size: inherit;

    font-weight: 700;
}


/* =========================================================
   FREE PERIOD
========================================================= */

.teacher-timetable .free {
    color: #6c757d;

    font-size: 14px;

    font-weight: 600;
}


/* =========================================================
   BODY HEADERS
========================================================= */

.teacher-timetable tbody th {
    font-size: 11px;
    font-weight: 700;

    text-align: center;
}

.teacher-timetable thead th {
    vertical-align: middle;
    text-align: center;
}


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

.teacher-timetable tbody tr:hover td,
.teacher-timetable tbody tr:hover th {
    background-color: inherit;
}


/* =========================================================
   HORIZONTAL SCROLL WRAPPER
========================================================= */

.teacher-timetable-wrapper {
    width: 100%;
    max-width: 100%;

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

    -webkit-overflow-scrolling: touch;

    margin: 0;

    padding: 0 0 6px 0;
}


/* =========================================================
   PRINT BUTTON
========================================================= */

.no-print .btn {
    font-size: 12px;
    padding: 5px 10px;
}


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

@media screen and (max-width: 767.98px) {

    html,
    body {
        width: 100%;
        max-width: 100%;

        margin: 0;
        padding: 0;

        overflow-x: hidden;
    }


    /* -----------------------------------------------------
       MOBILE PAGE
    ----------------------------------------------------- */

    .mobile-page {
        width: 100%;
        max-width: 100%;

        margin: 0;
        padding: 0;
    }


    /* -----------------------------------------------------
       OUTER CONTAINER
    ----------------------------------------------------- */

    .timetable-container {
        width: 94%;
        max-width: 94%;

        margin: 8px auto !important;
        padding: 8px !important;

        box-sizing: border-box;

        border: 2px solid #d4af37 !important;

        border-radius: 6px;
    }


    /* -----------------------------------------------------
       TABLE SCROLL AREA
    ----------------------------------------------------- */

    .teacher-timetable-wrapper {
        display: block;

        width: 100%;
        max-width: 100%;

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

        -webkit-overflow-scrolling: touch;

        overscroll-behavior-x: contain;

        margin: 0;
        padding: 0 0 6px 0;

        scrollbar-width: auto;
    }


    /* -----------------------------------------------------
       MOBILE TABLE
    ----------------------------------------------------- */

    .teacher-timetable {
        width: max-content !important;

        min-width: 700px !important;

        max-width: none !important;

        table-layout: fixed;

        border-collapse: collapse;

        margin: 0;

        font-size: 8px;
    }


    /* -----------------------------------------------------
       MOBILE HEADERS
    ----------------------------------------------------- */

    .teacher-timetable th {
        font-size: 8px !important;

        line-height: 1.05;

        padding: 3px 2px !important;

        text-align: center;

        vertical-align: middle;

        white-space: normal;
    }

    .teacher-timetable th small {
        font-size: 7px !important;

        line-height: 1;
    }


    /* -----------------------------------------------------
       MOBILE DAY COLUMN
    ----------------------------------------------------- */

    .teacher-timetable .day-column {
        width: 45px !important;
        min-width: 45px !important;
        max-width: 45px !important;
    }


    /* -----------------------------------------------------
       MOBILE PERIOD COLUMNS
    ----------------------------------------------------- */

    .teacher-timetable .period-column {
        width: 75px !important;
        min-width: 75px !important;
        max-width: 75px !important;
    }


    /* -----------------------------------------------------
       MOBILE SPECIAL COLUMNS
    ----------------------------------------------------- */

    .teacher-timetable .break-column,
    .teacher-timetable .lunch-column,
    .teacher-timetable .study-column {

        width: 32px !important;
        min-width: 32px !important;
        max-width: 32px !important;

        padding: 2px 1px !important;

        font-size: 8px !important;

        font-weight: 600;

        line-height: 1.05;

        text-align: center;

        vertical-align: middle !important;
    }


    /* -----------------------------------------------------
       MOBILE LESSON CELL
    ----------------------------------------------------- */

    .teacher-timetable .lesson-cell {

        width: 75px !important;
        min-width: 75px !important;
        max-width: 75px !important;

        height: 30px;

        padding: 2px !important;

        text-align: center !important;

        vertical-align: middle !important;
    }


    /* -----------------------------------------------------
       MOBILE LESSON BOX
    ----------------------------------------------------- */

    .teacher-timetable .lesson-box {

        width: 100%;

        min-height: 0;

        display: flex;

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

        margin: 0 auto;

        padding: 1px;

        box-sizing: border-box;

        text-align: center !important;

        line-height: 1;

        overflow: hidden;
    }


    /* -----------------------------------------------------
       MOBILE LESSON LABEL

       Keeps:

           CHI-1A

       on ONE LINE.
    ----------------------------------------------------- */

    .teacher-timetable .lesson-label {

        display: inline-block !important;

        width: auto !important;

        margin: 0 auto;

        white-space: nowrap !important;

        text-align: center !important;

        font-size: 7px !important;

        line-height: 1 !important;

        overflow: hidden;
    }


    /* -----------------------------------------------------
       MOBILE SUBJECT CODE
    ----------------------------------------------------- */

    .teacher-timetable .lesson-label strong {

        display: inline !important;

        font-size: inherit !important;

        font-weight: 700;
    }


    /* -----------------------------------------------------
       MOBILE FREE PERIOD
    ----------------------------------------------------- */

    .teacher-timetable .free {
        font-size: 8px;
    }


    /* -----------------------------------------------------
       MOBILE ROW HEIGHT
    ----------------------------------------------------- */

    .teacher-timetable tbody tr {
        height: 30px;
    }


    /* -----------------------------------------------------
       MOBILE HOVER
    ----------------------------------------------------- */

    .teacher-timetable tbody tr:hover {
        background-color: inherit;
    }

}


/* =========================================================
   PRINT
========================================================= */

@media print {

    .mobile-page {
        position: static !important;

        width: auto !important;
        height: auto !important;

        transform: none !important;

        overflow: visible !important;
    }


    .teacher-timetable-wrapper {
        width: 100% !important;

        overflow: visible !important;

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

}


/* =========================================================
   MOBILE PRINT — A5 LANDSCAPE
========================================================= */

@media print and (max-width: 767.98px) {

    @page {
        size: A5 landscape;
        margin: 4mm;
    }


    /* -----------------------------------------------------
       HIDE CONTROLS
    ----------------------------------------------------- */

    .no-print,
    form,
    hr,
    button {
        display: none !important;
    }


    /* -----------------------------------------------------
       PAGE
    ----------------------------------------------------- */

    html,
    body {
        width: 100%;

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

        overflow: visible !important;

        font-size: 7px;
    }


    /* -----------------------------------------------------
       CONTAINER
    ----------------------------------------------------- */

    .timetable-container {

        width: 100% !important;
        max-width: none !important;

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

        border: none !important;

        box-shadow: none !important;
    }


    /* -----------------------------------------------------
       PRINT AREA
    ----------------------------------------------------- */

    #printArea {

        width: 100% !important;

        min-height: 0 !important;

        position: static !important;

        transform: none !important;

        left: auto !important;

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

        overflow: visible !important;
    }


    #printArea > .my-3 {

        margin-top: 0 !important;

        margin-bottom: 2mm !important;
    }


    #printArea > .my-3 small {

        font-size: 7px !important;

        line-height: 1;
    }


    /* -----------------------------------------------------
       PRINT TABLE WRAPPER
    ----------------------------------------------------- */

    #printArea .teacher-timetable-wrapper {

        width: 100% !important;

        overflow: visible !important;

        margin: 0 !important;

        padding: 0 !important;
    }


    /* -----------------------------------------------------
       PRINT TABLE
    ----------------------------------------------------- */

    #printArea .teacher-timetable {

        width: 100% !important;

        min-width: 0 !important;

        max-width: none !important;

        table-layout: fixed;

        border-collapse: collapse;

        margin: 0 !important;

        font-size: 6px !important;
    }


    /* -----------------------------------------------------
       PRINT HEADERS
    ----------------------------------------------------- */

    #printArea .teacher-timetable th {

        font-size: 6px !important;

        font-weight: 600;

        line-height: 1;

        padding: 1px !important;
    }


    #printArea .teacher-timetable th small {

        font-size: 5px !important;
    }


    /* -----------------------------------------------------
       PRINT DAY COLUMN
    ----------------------------------------------------- */

    #printArea .teacher-timetable .day-column {

        width: 25px !important;

        min-width: 25px !important;

        max-width: 25px !important;
    }


    /* -----------------------------------------------------
       PRINT PERIOD COLUMNS
    ----------------------------------------------------- */

    #printArea .teacher-timetable .period-column {

        width: auto !important;

        min-width: 0 !important;

        max-width: none !important;
    }


    /* -----------------------------------------------------
       PRINT SPECIAL COLUMNS
    ----------------------------------------------------- */

    #printArea .teacher-timetable .break-column,
    #printArea .teacher-timetable .lunch-column,
    #printArea .teacher-timetable .study-column {

        width: 16px !important;

        min-width: 16px !important;

        max-width: 16px !important;

        padding: 1px !important;

        font-size: 6px !important;

        line-height: 1;
    }


    /* -----------------------------------------------------
       PRINT LESSON CELLS
    ----------------------------------------------------- */

    #printArea .teacher-timetable .lesson-cell {

        width: auto !important;

        min-width: 0 !important;

        max-width: none !important;

        height: auto !important;

        padding: 1px !important;

        text-align: center !important;

        vertical-align: middle !important;
    }


    /* -----------------------------------------------------
       PRINT LESSON BOX
    ----------------------------------------------------- */

    #printArea .lesson-box {

        width: 100% !important;

        min-height: 14px !important;

        display: flex;

        align-items: center;

        justify-content: center;

        margin: 0 !important;

        padding: 1px !important;

        line-height: 1;

        text-align: center !important;

        overflow: hidden;
    }


    /* -----------------------------------------------------
       PRINT LESSON LABEL
    ----------------------------------------------------- */

    #printArea .lesson-label {

        display: inline-block !important;

        width: auto !important;

        margin: 0 auto;

        white-space: nowrap !important;

        text-align: center !important;

        font-size: 5px !important;

        line-height: 1 !important;
    }


    /* -----------------------------------------------------
       PRINT SUBJECT CODE
    ----------------------------------------------------- */

    #printArea .lesson-label strong {

        display: inline !important;

        font-size: inherit !important;

        font-weight: 700;
    }


    /* -----------------------------------------------------
       PRINT FREE PERIOD
    ----------------------------------------------------- */

    #printArea .free {

        font-size: 6px !important;
    }


    /* -----------------------------------------------------
       PREVENT ROW SPLITTING
    ----------------------------------------------------- */

    #printArea .teacher-timetable tr {

        page-break-inside: avoid;

        break-inside: avoid;
    }

}