/*
|--------------------------------------------------------------------------
| Production Schedule
|--------------------------------------------------------------------------
| Pleasance Production Management
|--------------------------------------------------------------------------
*/


/*
|--------------------------------------------------------------------------
| Schedule Card
|--------------------------------------------------------------------------
*/

.schedule-card {

    background-color: var(--white);

    border: 1px solid var(--border);

    box-shadow:
        0 2px 10px
        rgba(0, 0, 0, 0.06);

}


/*
|--------------------------------------------------------------------------
| Toolbar
|--------------------------------------------------------------------------
*/

.schedule-toolbar {

    padding: 18px 20px;

    background-color: var(--black);

    color: var(--white);

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

}


.schedule-toolbar-title {

    font-weight: 800;

    font-size: 1.1rem;

}


.schedule-toolbar-count {

    color: #BBBBBB;

    font-size: 0.8rem;

    margin-top: 2px;

}


/*
|--------------------------------------------------------------------------
| Add Schedule Button
|--------------------------------------------------------------------------
*/

.schedule-add-button {

    display: inline-block;

    background-color: var(--yellow);

    color: var(--black);

    text-decoration: none;

    font-size: 0.8rem;

    font-weight: 800;

    padding: 8px 12px;

    border: 0;

}


.schedule-add-button:hover {

    background-color: var(--yellow-dark);

    color: var(--black);

}


/*
|--------------------------------------------------------------------------
| Scroll Area
|--------------------------------------------------------------------------
*/

.schedule-scroll {

    max-height: 700px;

    overflow-y: auto;

    overflow-x: auto;

}


/*
|--------------------------------------------------------------------------
| Day Heading
|--------------------------------------------------------------------------
*/

.schedule-day {

    background-color: var(--yellow);

    color: var(--black);

    position: sticky;

    top: 0;

    z-index: 10;

    border-bottom:
        2px solid var(--black);

}


.schedule-day-inner {

    display: flex;

    align-items: center;

    gap: 15px;

    padding: 12px 20px;

}


/*
|--------------------------------------------------------------------------
| Day Name
|--------------------------------------------------------------------------
*/

.schedule-day-name {

    font-size: 1rem;

    font-weight: 900;

    text-transform: uppercase;

}


/*
|--------------------------------------------------------------------------
| Day Number
|--------------------------------------------------------------------------
*/

.schedule-day-date {

    font-size: 1.8rem;

    font-weight: 900;

    line-height: 1;

}


/*
|--------------------------------------------------------------------------
| Month
|--------------------------------------------------------------------------
*/

.schedule-day-month {

    font-size: 0.8rem;

    font-weight: 800;

    text-transform: uppercase;

}


/*
|--------------------------------------------------------------------------
| Year
|--------------------------------------------------------------------------
*/

.schedule-day-year {

    font-size: 0.8rem;

    font-weight: 700;

}


/*
|--------------------------------------------------------------------------
| Schedule Table
|--------------------------------------------------------------------------
*/

.schedule-table {

    width: 100%;

    min-width: 900px;

    margin: 0;

    border-collapse: collapse;

}


/*
|--------------------------------------------------------------------------
| Table Header
|--------------------------------------------------------------------------
*/

.schedule-table thead {

    background-color: #EEEEEE;

}


.schedule-table th {

    padding: 10px 15px;

    font-size: 0.7rem;

    text-transform: uppercase;

    letter-spacing: 0.5px;

    font-weight: 800;

    color: #555;

    border-bottom:
        1px solid var(--border);

    white-space: nowrap;

}


/*
|--------------------------------------------------------------------------
| Table Cells
|--------------------------------------------------------------------------
*/

.schedule-table td {

    padding: 13px 15px;

    vertical-align: middle;

    border-bottom:
        1px solid var(--border);

    font-size: 0.9rem;

}


/*
|--------------------------------------------------------------------------
| Table Hover
|--------------------------------------------------------------------------
*/

.schedule-table tbody tr:hover {

    background-color: #FAFAFA;

}


/*
|--------------------------------------------------------------------------
| Time
|--------------------------------------------------------------------------
*/

.schedule-time {

    font-weight: 800;

    white-space: nowrap;

    width: 130px;

}


/*
|--------------------------------------------------------------------------
| Title
|--------------------------------------------------------------------------
*/

.schedule-title {

    font-weight: 800;

    color: var(--black);

}


/*
|--------------------------------------------------------------------------
| Company
|--------------------------------------------------------------------------
*/

.schedule-company {

    font-weight: 600;

}


/*
|--------------------------------------------------------------------------
| Event Type
|--------------------------------------------------------------------------
*/

.schedule-type {

    display: inline-block;

    background-color: var(--black);

    color: var(--white);

    padding: 4px 7px;

    font-size: 0.65rem;

    font-weight: 800;

    text-transform: uppercase;

    white-space: nowrap;

}


/*
|--------------------------------------------------------------------------
| Location
|--------------------------------------------------------------------------
*/

.schedule-location {

    color: #555;

}


/*
|--------------------------------------------------------------------------
| Status
|--------------------------------------------------------------------------
*/

.schedule-status {

    display: inline-block;

    padding: 4px 8px;

    font-size: 0.65rem;

    font-weight: 800;

    text-transform: uppercase;

    white-space: nowrap;

}


/*
|--------------------------------------------------------------------------
| Scheduled
|--------------------------------------------------------------------------
*/

.status-scheduled {

    background-color: #EEEEEE;

    color: var(--black);

}


/*
|--------------------------------------------------------------------------
| Confirmed
|--------------------------------------------------------------------------
*/

.status-confirmed {

    background-color: var(--black);

    color: var(--white);

}


/*
|--------------------------------------------------------------------------
| In Progress
|--------------------------------------------------------------------------
*/

.status-in-progress {

    background-color: var(--yellow);

    color: var(--black);

}


/*
|--------------------------------------------------------------------------
| Completed
|--------------------------------------------------------------------------
*/

.status-completed {

    background-color: #D8D8D8;

    color: var(--black);

}


/*
|--------------------------------------------------------------------------
| Cancelled
|--------------------------------------------------------------------------
*/

.status-cancelled {

    background-color: #222222;

    color: var(--white);

    text-decoration: line-through;

}


/*
|--------------------------------------------------------------------------
| Postponed
|--------------------------------------------------------------------------
*/

.status-postponed {

    background-color: #E8E8E8;

    color: #555;

}


/*
|--------------------------------------------------------------------------
| No Events
|--------------------------------------------------------------------------
*/

.no-events {

    text-align: center;

    padding: 60px 20px;

    color: #666;

}


.no-events strong {

    display: block;

    color: var(--black);

    font-size: 1.1rem;

    margin-bottom: 5px;

}


/*
|--------------------------------------------------------------------------
| Database Error
|--------------------------------------------------------------------------
*/

.schedule-error {

    padding: 50px 20px;

    text-align: center;

    color: #A00000;

}


/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 767px) {


    /*
    |--------------------------------------------------------------------------
    | Toolbar
    |--------------------------------------------------------------------------
    */

    .schedule-toolbar {

        align-items: flex-start;

    }


    .schedule-toolbar-title {

        font-size: 1rem;

    }


    /*
    |--------------------------------------------------------------------------
    | Scroll Area
    |--------------------------------------------------------------------------
    */

    .schedule-scroll {

        max-height: 600px;

    }


    /*
    |--------------------------------------------------------------------------
    | Day Header
    |--------------------------------------------------------------------------
    */

    .schedule-day-inner {

        padding: 10px 15px;

        gap: 10px;

    }


    .schedule-day-date {

        font-size: 1.5rem;

    }


    .schedule-day-name {

        font-size: 0.85rem;

    }

}