/*==========================================================
SHIFT PANEL
==========================================================*/

.shift-panel{

    padding:30px;

    display:flex;

    flex-direction:column;

    gap:25px;

}


/*==========================================================
HEADER
==========================================================*/

.shift-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.shift-header h2{

    margin:0;

    color:#D4AF37;

    font-size:28px;

}

.shift-header p{

    margin-top:6px;

    color:#9FA8C5;

}


/*==========================================================
GRID
==========================================================*/

.shift-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:24px;
    width:100%;
}


/*==========================================================
CARDS
==========================================================*/

.shift-card{

    background:#0F1C35;

    border:1px solid rgba(212,175,55,.25);

    border-radius:16px;

    padding:22px;

    display:flex;

    flex-direction:column;

    gap:18px;

    box-shadow:
        0 8px 25px rgba(0,0,0,.18);

}

.shift-card h3{

    margin:0;

    color:#D4AF37;

}


/*==========================================================
LABELS
==========================================================*/

.shift-card label{

    color:#C8D3F0;

    font-weight:600;

}


/*==========================================================
INPUTS
==========================================================*/

.shift-card input,

.shift-card textarea,

.shift-card select,

#shiftShopSelect{

    width:100%;

    padding:14px;

    border-radius:10px;

    border:1px solid rgba(212,175,55,.30);

    background:#16284A;

    color:white;

    font-size:15px;

    outline:none;

}

.shift-card input:focus,

.shift-card textarea:focus,

#shiftShopSelect:focus{

    border-color:#D4AF37;

    box-shadow:0 0 8px rgba(212,175,55,.25);

}


/*==========================================================
SUMMARY
==========================================================*/

.summary-box{

    margin-top:auto;

    background:#16284A;

    border-radius:12px;

    padding:18px;

    text-align:center;

}

.summary-box span{

    color:#9FA8C5;

}

.summary-box h2{

    margin-top:10px;

    color:#D4AF37;

    font-size:30px;

}


/*==========================================================
READONLY
==========================================================*/

#totalCashSales{

    text-align:center;

    font-size:22px;

    font-weight:bold;

    color:#D4AF37;

}


/*==========================================================
NOTES
==========================================================*/

.notes-card textarea{

    resize:none;

    height:120px;

}


/*==========================================================
FORM
==========================================================*/

#shiftForm{

    display:flex;

    flex-direction:column;

    gap:22px;

}


/*==========================================================
RESPONSIVE
==========================================================*/

@media(max-width:900px){

    .shift-grid{

        grid-template-columns:1fr;

    }

}