:root {
    --fc-non-business-color: #0003;
}

.frx-booking-page {
    max-width: 800px; margin: 0 auto;
    &:not([frx-role*="frx_instructor"], [frx-role*="administrator"]) {
        #events-table tr:has(.event-status-Available, .event-status-Rejected),
        #frx_calendar_modal[frx-action="update"] :is(.frx-select-container, .frx-date-container, #frx_calendar_modal_delete)
			{display: none!important}
    }
    &[frx-role*="frx_instructor"]:not([frx-role*="administrator"]) {
        #frx_calendar_modal[frx-action=add] .frx-select-container {display: none!important}
        .event-instructor-calendar-div {display: none!important}
        #frx_calendar_modal[frx-action="update"] .frx-select-container {
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            label:has(.instructor) {display: none!important}
        }
    }
    #hours-input, #event-instructor-calendar {width: fit-content; border: 0}
    #hours-input {margin-right: 10px}
    button {border: 0}
    select, input {
        border-radius: 10px; padding: 12px 16px; border: 0; background: #0001;
    }
    .hours_left {
        display: flex; padding: 6px 12px; background: #387ADF20; color: #387ADF;
        font-weight: 500; width: fit-content; border-radius: 50px;
    }
	.hours-management-container, .events-management-container {
        .frx-header {display: flex; gap: 15px; align-items: center; place-content: space-between;
            button, .update-hours-btn {padding: 10px 18px!important; line-height: 1}
        }
    }
	.hours-management-container .student-hours {
        padding: 0!important;
        input {background: transparent!important; margin: 0; border-radius: 0!important; height: 52px; border: 0}
    }
}
table {width: 100%; border-collapse: collapse}
th {background-color: #f2f2f2}

a.fc-event {cursor: pointer!important}

#frx_calendar_modal, #event-modal {
    &[open] {display: flex;}
    flex-direction: column; gap: 15px; align-items: center; place-content: center;
    padding: 30px 0; border: 0; width: 100%; max-width: 600px; height: fit-content;
    text-align: center; background: #fff; border-radius: 20px;
    box-shadow: 0 0 0 5000px #0003, 0 0 50px #0003;
    > * {padding-left: 40px; padding-right: 40px}
    .date {font-weight: bold}
    .buttons {
        display: flex; gap: 15px; width: 100%; border-top: 1px solid #0001; padding-top: 20px; margin-top: 10px;
        button:not(#frx_calendar_modal_close) {width: 100%}
        #frx_calendar_modal_close {background: #000}
        #frx_calendar_modal_delete {background: #f00}
    }
    button {border: 0!important}
    .frx-select-container {
        display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 15px; width: 100%;
        label, select {width: 100%; margin: 0}
    }
    .frx-date-container {
        display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 15px; width: 100%;
        label, input {width: 100%; margin: 0}
    }
    label {display: flex; flex-direction: column; gap: 10px; align-items: start}

    &[frx-action=add] {
        :is(#frx_calendar_modal_delete, label:has(.status), .status) {display: none!important}
        .frx-select-container {grid-template-columns: repeat(auto-fill, minmax(250px, 1fr))!important}
    }
}

#event-form {
    width: 100%;
    label:has(#event-name) {position: absolute; opacity: 0; pointer-events: none!important}
    #cancel-event-modal {background: #000}
    button[type=submit] {width: 100%}
    div:has(#cancel-event-modal) {margin-top: 20px; display: flex; gap: 15px;}
    label {margin-bottom: 10px}
}

#calendar, #calendar2 {
	margin: 30px 0!important;
    /* .fc-event-past {opacity: 0.3} */
    .fc-toolbar-chunk {
        .fc-button:first-of-type {border-radius: 10px 0 0 10px}
    	.fc-button:last-of-type {border-radius: 0 10px 10px 0}
        .fc-button-primary {background: #000}
    }
}

#calendar2 {
    .fc-list {
    	position: relative!important;
    }
    :is(.fc-view-harness, .fc-list) {
		height: fit-content!important;   
    }
}

#events-table, #students-table {
    border-collapse: separate; border-spacing: 0;
    border-radius: 10px; overflow: hidden;

    &, th, td {border: 1px solid #0003}
    td, th {padding: 10px}
    thead, tbody {border: none;}
    tr:first-child th {border-top: none; border-bottom: none; border-right: none}
    tr td {border-bottom: none; border-right: none;
        div {align-self: center; place-self: center; display: flex ; padding: 11px 0 9px 0}
    }
    tr td:first-child, tr th:first-child {border-left: none}
    tr td:last-child, tr th:last-child {border-right: none}
    td.actions {
    	button {
            display: inline-block;
            border: 0; padding: 10px 18px!important; border-radius: 50px; line-height: 1;
            &:not(:first-of-type) {margin-left: 8px}
        }
    }
    .event-status-Available, .event-status-Pending, .event-status-Accepted, .event-status-Rejected, .event-status-Completed {
        align-items: center; place-content: center;
        div {padding: 11px 15px 9px 15px; border-radius: 50px; line-height: 1;}
    }
    .event-status-Available div {background: #DBFF7F; color: #000}
    .event-status-Pending div {background: #FFEE00; color: #000}
    .event-status-Accepted div {background: #00FF1E; color: #000}
    .event-status-Rejected div {background: #FF0000; color: #fff}
    .event-status-Completed div {background: #000; color: #fff}
}

table tbody>tr:nth-child(odd)>td, table tbody>tr:nth-child(odd)>th {background: oklch(0 0 0 / 0.02)!important}

.student-plans .plans-container {display: flex; flex-wrap: wrap; gap: 5px; align-items: center}

.plan-item {
    padding: 10px 18px !important; line-height: 1!important;
    display: flex; align-items: center;
    background: #0001; border-radius: 50px;
    .plan-text {margin-right: 5px}
}

.remove-plan {
    padding: 0 !important; line-height: 1!important;
    width: 20px; height: 20px;
    background: #f00!important; border: none; color: #fff;
    font-weight: bold;
    display: flex; align-items: center; place-content: center;
}

.add-plan {border-radius: 50px; padding: 10px 13px !important; line-height: 1!important}