/*
==================================================
JADWAL DOKTER
Version 1.0
==================================================
*/

#jadwal-dokter{
    width:100%;
    margin:20px 0;
    font-family:Arial,Helvetica,sans-serif;
    color:#333;
}

/* ==========================
   TABLE DESKTOP
========================== */

.jd-table{
    width:100%;
    border-collapse:collapse;
    background:#fff;
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 4px 12px rgba(0,0,0,.08);
}

.jd-table thead{
    background:#1565c0;
    color:#fff;
}

.jd-table th{
    padding:12px;
    text-align:left;
    font-size:14px;
}

.jd-table td{
    padding:12px;
    border-bottom:1px solid #eee;
    font-size:14px;
    vertical-align:top;
}

.jd-table tbody tr:hover{
    background:#f7fbff;
}

/* Lebar Kolom */

.jd-table th:nth-child(1),
.jd-table td:nth-child(1){
    width:110px;
}

.jd-table th:nth-child(2),
.jd-table td:nth-child(2){
    width:190px;
}

.jd-table th:nth-child(6),
.jd-table td:nth-child(6){
    width:110px;
    text-align:center;
}

.jd-table th:nth-child(7),
.jd-table td:nth-child(7){
    min-width:260px;
}

/* ==========================
   STATUS BADGE
========================== */

.jd-badge{

    display:inline-block;

    padding:6px 12px;

    border-radius:20px;

    color:#fff;

    font-size:12px;

    font-weight:bold;

    white-space:nowrap;

}

.jd-green{

    background:#2e7d32;

}

.jd-red{

    background:#c62828;

}

.jd-orange{

    background:#ef6c00;

}

.jd-gray{

    background:#616161;

}

/* ==========================
   MOBILE CARD
========================== */

.jd-mobile{

    display:none;

}

.jd-card{

    background:#fff;

    border:1px solid #e5e5e5;

    border-radius:14px;

    padding:16px;

    margin-bottom:16px;

    box-shadow:0 3px 10px rgba(0,0,0,.08);

    transition:.25s;

}

.jd-card:hover{

    transform:translateY(-2px);

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

}

.jd-card-header{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:10px;

}

.jd-card-dokter{

    font-size:17px;

    font-weight:bold;

    color:#222;

}

.jd-card-spesialis{

    color:#666;

    font-size:14px;

    margin-top:2px;

}

.jd-card-rs{

    color:#1565c0;

    margin-top:6px;

    font-size:13px;

}

.jd-card-body{

    margin-top:12px;

    font-size:14px;

    line-height:1.8;

}

.jd-card-footer{

    margin-top:12px;

    padding-top:10px;

    border-top:1px dashed #ddd;

    color:#666;

    font-size:13px;

}

/* ==========================
   INFO
========================== */

.jd-empty,
.jd-error{

    padding:20px;

    background:#fff3cd;

    border:1px solid #ffeeba;

    border-radius:10px;

    color:#856404;

    text-align:center;

}

.jd-error{

    background:#fdecea;

    border-color:#f5c6cb;

    color:#b71c1c;

}

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

@media(max-width:768px){

    .jd-desktop{

        display:none;

    }

    .jd-mobile{

        display:block;

    }

}

@media(min-width:769px){

    .jd-desktop{

        display:block;

    }

    .jd-mobile{

        display:none;

    }

}