/* =========================================================
   DEWPOINT STAFF BOOKINGS
   ========================================================= */

.staff-bookings-page{
    display:flex;
    flex-direction:column;
    gap:16px;
}


/* HEADER */

.staff-bookings-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:24px;

    padding:22px 24px;

    border:
        1px solid
        #e1e8ee;

    border-radius:17px;

    background:
        linear-gradient(
            135deg,
            #fff 0%,
            var(--dp-theme-faint) 100%
        );

    box-shadow:
        0 8px 24px
        rgba(15,23,42,.045);
}

.staff-bookings-head > div:first-child > b{
    display:block;

    margin-bottom:4px;

    font-size:10px;
    font-weight:900;
    letter-spacing:.13em;

    color:
        var(--dp-accent-text);
}

.staff-bookings-head h2{
    margin:0;

    font-size:24px;
    line-height:1.15;

    color:#172033;
}

.staff-bookings-head p{
    margin:6px 0 0;

    font-size:12px;

    color:#718096;
}


/* SUMMARY */

.staff-booking-summary{
    display:flex;
    gap:8px;
}

.staff-booking-summary > span{
    min-width:88px;

    padding:11px 13px;

    text-align:center;

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

    border-radius:12px;

    background:#fff;
}

.staff-booking-summary strong{
    display:block;

    font-size:20px;
    line-height:1;

    color:
        var(--dp-accent-text);
}

.staff-booking-summary small{
    display:block;

    margin-top:4px;

    font-size:9px;
    font-weight:800;
    letter-spacing:.04em;

    color:#7b8796;
}


/* TABS */

.staff-booking-tabs{
    display:flex;
    gap:7px;

    padding:5px;

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

    border:
        1px solid
        #e1e8ee;

    border-radius:12px;

    background:#f8fafc;
}

.staff-booking-tabs button{
    padding:10px 17px;

    border:0;
    border-radius:9px;

    background:transparent;

    color:#64748b;

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

    cursor:pointer;

    transition:
        color .18s ease,
        background .18s ease,
        box-shadow .18s ease;
}

.staff-booking-tabs button:hover{
    color:
        var(--dp-accent-text);

    background:
        var(--dp-theme-faint);
}

.staff-booking-tabs button.active{
    color:#fff;

    background:
        linear-gradient(
            90deg,
            var(--dp-accent),
            var(--dp-accent-2)
        );

    box-shadow:
        0 5px 14px
        color-mix(
            in srgb,
            var(--dp-accent) 18%,
            transparent
        );
}


/* TABLE */

.staff-bookings-table-card{
    padding:0;

    overflow:hidden;

    border:
        1px solid
        #e1e8ee;

    border-radius:17px;

    box-shadow:
        0 8px 24px
        rgba(15,23,42,.045);
}

.staff-bookings-table-wrap{
    width:100%;
    overflow-x:auto;
}

.staff-bookings-table thead{
    background:
        var(--dp-theme-faint);
}

.staff-bookings-table th{
    padding:14px 16px;

    text-align:left;

    border-bottom:
        1px solid
        #e6ebef;

    font-size:10px;
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;

    color:#6b7788;
}

.staff-bookings-table td{
    padding:16px;

    border-bottom:
        1px solid
        #edf1f4;

    font-size:12px;

    color:#4b5563;

    vertical-align:middle;
}

.staff-bookings-table tbody tr:last-child td{
    border-bottom:0;
}

.staff-bookings-table td:first-child b{
    display:block;

    color:#253044;

    font-size:12px;
}

.staff-bookings-table td:first-child small{
    display:block;

    margin-top:3px;

    color:#8a96a5;

    font-size:10px;
}

.staff-bookings-table td strong{
    color:#253044;
}


/* BOOKING TYPE BADGE */

.staff-booking-type{
    display:inline-flex;
    align-items:center;

    padding:5px 8px;

    border-radius:999px;

    font-size:9px;
    font-weight:800;

    color:
        var(--dp-accent-text);

    background:
        var(--dp-theme-soft);
}


/* PAYMENT STATUS */

.staff-payment-status{
    display:inline-flex;
    align-items:center;
    gap:5px;

    padding:5px 8px;

    border-radius:999px;

    font-size:9px;
    font-weight:900;
    letter-spacing:.03em;
}

.staff-payment-status::before{
    content:"";

    width:6px;
    height:6px;

    border-radius:50%;
}

.staff-payment-status.paid{
    color:#047857;
    background:#ecfdf5;
}

.staff-payment-status.paid::before{
    background:#10b981;
}

.staff-payment-status.pending{
    color:#b45309;
    background:#fff7ed;
}

.staff-payment-status.pending::before{
    background:#f59e0b;
}


/* EMPTY STATE */

.staff-bookings-table-card > .empty-state{
    padding:48px 20px;
}


/* RESPONSIVE */

@media (max-width:900px){

    .staff-bookings-head{
        flex-direction:column;
        align-items:flex-start;
    }

    .staff-booking-summary{
        width:100%;
    }

    .staff-booking-summary > span{
        flex:1;
    }

}

@media (max-width:600px){

    .staff-bookings-head{
        padding:18px;
    }

    .staff-bookings-head h2{
        font-size:21px;
    }

    .staff-booking-summary{
        display:grid;
        grid-template-columns:
            repeat(3,minmax(0,1fr));
    }

    .staff-booking-summary > span{
        min-width:0;
        padding:10px 7px;
    }

    .staff-booking-tabs{
        width:100%;
    }

    .staff-booking-tabs button{
        flex:1;
        padding:9px 7px;
    }

}