/* =====================================
   Locum Calendar
===================================== */

.locum-calendar {
    width:100%;
    margin:20px auto;
    font-family:Arial, sans-serif;
}


.locum-calendar h2 {
    text-align:center;
    margin-bottom:15px;
    color:#333;
}


/* Navigation */

.locum-nav {
    display:flex;
    justify-content:space-between;
    margin-bottom:15px;
}


.locum-nav a {

    background:#2271b1;
    color:white;
    padding:8px 15px;
    border-radius:5px;
    text-decoration:none;

}


.locum-nav a:hover {
    background:#135e96;
}


/* =====================================
   Calendar Table
===================================== */


.locum-table {

    width:100%;
    border-collapse:collapse;
    table-layout:fixed;

}


.locum-table th {

    background:#2271b1;
    color:white;
    padding:10px;
    border:1px solid #ddd;
    text-align:center;

}



.locum-table td {

    height:120px;
    vertical-align:top;
    border:1px solid #ddd;
    background:white;
    padding:5px;

}


.locum-table td:hover {

    background:#f8fbff;

}


/* Today Highlight */

.locum-table td.today {

    background:#fff8dc !important;
    box-shadow:inset 0 0 0 2px #ffc107;

}


.locum-table td.today:hover {

    background:#fff3cd !important;

}


.date-number {

    font-weight:bold;
    font-size:16px;
    color:#333;
    text-align:right;
    margin-bottom:8px;

}


.today .date-number {

    background:#ffc107;
    color:white;
    width:25px;
    height:25px;
    border-radius:50%;
    text-align:center;
    line-height:25px;

}


/* =====================================
   Locum Event
===================================== */


.locum-event {

    cursor:pointer;
    background:#e8f2ff;
    border-left:4px solid #2271b1;
    padding:5px;
    margin-bottom:5px;
    border-radius:4px;
    font-size:13px;

}


.locum-event strong {

    color:#0b4f85;

}


/* Doctor */

.locum-event.dr {

    background:#e8f2ff;
    border-left-color:#2271b1;

}


/* DSA */

.locum-event.dsa {

    background:#e8fff1;
    border-left-color:#198754;

}



.locum-remarks {

    margin-top:5px;
    font-size:12px;
    color:#555;
    font-style:italic;

}



/* =====================================
   Submit Form
===================================== */


.locum-submit {

    margin-top:30px;
    padding:20px;
    border:1px solid #ddd;
    border-radius:8px;
    background:#fafafa;

}



.locum-submit h3 {

    margin-top:0;

}



.locum-submit label {

    display:block;
    margin-top:12px;
    font-weight:bold;

}



.locum-submit input,
.locum-submit textarea {

    width:100%;
    max-width:400px;
    padding:8px;
    margin-top:5px;
    border:1px solid #ccc;
    border-radius:4px;

}


.locum-submit textarea {

    height:80px;

}



.locum-submit button {

    margin-top:15px;
    background:#198754;
    color:white;
    border:none;
    padding:10px 20px;
    border-radius:5px;
    cursor:pointer;

}



.locum-submit button:hover {

    background:#146c43;

}



/* =====================================
   Messages
===================================== */


.locum-message {

    padding:10px;
    margin-bottom:15px;
    border-radius:5px;

}


.locum-message.success {

    background:#d1e7dd;
    color:#0f5132;

}


.locum-message.error {

    background:#f8d7da;
    color:#842029;

}



/* =====================================
   History Button
===================================== */


.locum-history-btn {

    display:inline-block;
    margin-top:15px;
    margin-left:10px;
    background:#6c757d;
    color:white;
    border:none;
    padding:8px 15px;
    border-radius:5px;
    cursor:pointer;
    font-size:14px;

}



.locum-history-btn:hover {

    background:#5a6268;

}



/* =====================================
   History Panel
===================================== */


.locum-history {

    margin-top:25px;
    padding:20px;
    background:white;
    border:1px solid #ddd;
    border-radius:8px;

}



.locum-history h3 {

    margin-top:0;
    color:#333;

}



.locum-history-table {

    width:100%;
    border-collapse:collapse;
    margin-top:15px;

}



.locum-history-table th {

    background:#2271b1;
    color:white;
    padding:10px;
    text-align:left;

}



.locum-history-table td {

    border:1px solid #ddd;
    padding:10px;
    vertical-align:top;

}



.locum-history-table tr:nth-child(even) {

    background:#f8f9fa;

}



.locum-history-table tr:hover {

    background:#eef7ff;

}



/* =====================================
   History Change Detail
===================================== */


.locum-change-table {

    width:100%;
    border-collapse:collapse;

}



.locum-change-table td {

    padding:5px;
    border-bottom:1px solid #eee;

}



.change-field {

    width:120px;
    font-weight:bold;
    color:#333;

}



.change-old {

    color:#dc3545;
    text-decoration:line-through;

}



.change-arrow {

    width:30px;
    text-align:center;
    font-weight:bold;

}



.change-new {

    color:#198754;
    font-weight:bold;

}



.history-created {

    color:#198754;
    font-weight:bold;

}



.history-cancelled {

    color:#dc3545;
    font-weight:bold;

}



/* Animation */

.locum-history {

    animation:locumFade 0.3s ease-in-out;

}


@keyframes locumFade {

    from {

        opacity:0;
        transform:translateY(-10px);

    }


    to {

        opacity:1;
        transform:translateY(0);

    }

}

.locum-change-table{
    width:100%;
    margin-top:8px;
    border-collapse:collapse;
    font-size:13px;
}

.locum-change-table th{
    background:#f5f5f5;
    border:1px solid #ddd;
    padding:6px;
    text-align:left;
    font-weight:600;
}

.locum-change-table td{
    border:1px solid #ddd;
    padding:6px;
    vertical-align:top;
}

.locum-change-table td:nth-child(2){
    color:#dc3545;
    text-decoration:line-through;
}

.locum-change-table td:nth-child(3){
    color:#198754;
    font-weight:bold;
}

/* Mobile */

@media(max-width:768px){

    .locum-table th {

        font-size:12px;

    }


    .locum-table td {

        height:100px;
        padding:3px;

    }


    .locum-event {

        font-size:11px;

    }

}