/* =====================================
   JADWAL DOKTER PAGE
===================================== */
.jadwal-mingguan{
    max-width:1180px;
    margin:auto;
}

/* ================= BREADCRUMB ================= */
.jadwal-breadcrumb{
    display:flex;
    align-items:center;
    gap:8px;
    margin-top:-80px;
    margin-bottom:0;
    margin-left:-37px;
    transform:translateY(-45px);
    color:#ffffff;
    font-size:14px;
    font-weight:500;
}

.jadwal-breadcrumb i{
    font-size:9px;
    opacity:.8;
}

.jadwal-breadcrumb a{
    color:#fff;
    text-decoration:none;
    font-weight:600;
}

.jadwal-breadcrumb a:hover{
    color:#98d733;
    text-decoration:none;
}

.jadwal-breadcrumb span{
    font-weight:750;
    color:#caf5f2;
    text-decoration:none;   
}

/* ================= HERO ================= */
.jadwal-hero{
    height:400px;
    position:relative;
    overflow:hidden;
    background-image:url("/static/img/profil/hero.jpg");
    background-size:cover;
    background-position:right center;
    display:flex;
    align-items:center;
    z-index: 1;
}

.jadwal-hero .container {
    padding-left:80px;
}

/* RED GRADIENT */
.jadwal-hero-overlay{
    position:absolute;
    inset:0;
    background:
    linear-gradient(
        90deg,
        rgba(190,0,0,0.95) 0%,
        rgba(205,0,0,0.75) 35%,
        rgba(205,0,0,0.25) 70%,
        rgba(252, 251, 251, 0.05)
    );
}

/* DOT */
.jadwal-hero::before{
    content:"";
    position:absolute;
    top:25px;
    left:35px;
    width:120px;
    height:120px;
    background-image:
    radial-gradient(
        rgba(255,255,255,.8) 2px,
        transparent 2px
    );
    background-size:16px 16px;
    opacity:.5;
    z-index:3;
}

/* CONTENT */
.jadwal-hero-container{
    position:relative;
    z-index:2;
    width:100%;
}

.jadwal-hero-content{
    max-width:800px;
    color:white;
    transform:translateY(20px);
    padding-left:100px;
    padding-bottom: 110px;
}

.jadwal-label{
    color:white;
    font-size:52px;
    font-weight:700;
    margin:0 0 16px;
    line-height:1.15;
}

.jadwal-hero p{
    font-size:18px;
    line-height:1.6;
    color:white;
    max-width: 620px;
    margin-bottom: 0;
}

/* =========================================================
   SOFT FADE BAGIAN BAWAH HERO
========================================================= */
.jadwal-hero::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:120px;
    z-index:5;
    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,0) 0%,
            rgba(255,255,255,.35) 35%,
            rgba(255,255,255,.75) 65%,
            #ffffff 100%
        );
    pointer-events:none;
}


/* =====================================
   FILTER
===================================== */

.jadwal-filter{

    margin:30px 0;

    background:#fff;

    padding:20px;

    border-radius:18px;

    box-shadow:
        0 10px 30px rgba(0,0,0,.06);
}

.jadwal-filter label{

    font-weight:600;

    margin-right:10px;
}

.jadwal-filter select{

    padding:12px 20px;

    border-radius:12px;

    border:1px solid #ddd;

    min-width:250px;
}


/* =====================================
   HARI
===================================== */

.jadwal-hari{

    margin-top:45px;
}

.jadwal-hari h2{

    color:#1769c2;

    font-size:28px;

    margin-bottom:20px;
}


/* =====================================
   PC SCHEDULE
===================================== */

.schedule-full-pc-list{

    display:block;

    width:100%;
}


.schedule-full-pc-card{

    width:100%;

    background:#fff;

    border-radius:18px;

    overflow:hidden;

    margin-bottom:18px;

    box-shadow:
        0 8px 20px rgba(0,0,0,.06);

    border:1px solid #f1f1f1;

    transition:.2s;

    color:inherit;
    cursor:pointer;
    transition:.2s ease;
}


.schedule-full-pc-card:hover{
    transform:translateY(-2px);
    box-shadow:0 12px 28px rgba(0,0,0,.10);
    
}

/* =====================================
   CARD JADWAL CLICKABLE
===================================== */

.schedule-full-pc-card,
.schedule-full-mobile-card{
    text-decoration:none !important;
    color:inherit !important;
    cursor:pointer;
}

.schedule-full-pc-card:hover,
.schedule-full-pc-card:focus,
.schedule-full-pc-card:active,
.schedule-full-pc-card:visited,

.schedule-full-mobile-card:hover,
.schedule-full-mobile-card:focus,
.schedule-full-mobile-card:active,
.schedule-full-mobile-card:visited{
    text-decoration:none !important;
    color:inherit !important;
}

/* HILANGKAN GARIS PADA SEMUA ISI CARD */
.schedule-full-pc-card *,
.schedule-full-mobile-card *{
    text-decoration:none !important;
}

/* HEADER */

.schedule-full-pc-header{

    background:#d71920;

    color:#fff;

    padding:14px 24px;

    font-size:18px;

    font-weight:700;

    display:flex;

    align-items:center;

    gap:10px;
}


/* BODY */

.schedule-full-pc-body{

    display:grid;

    grid-template-columns:
        90px
        1.4fr
        1.3fr
        180px
        180px;

    align-items:center;

    gap:20px;

    min-height:105px;

    padding:18px 24px;
}


/* FOTO */

.schedule-full-pc-photo{

    width:80px;

    height:80px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#f8fafc;

    overflow:hidden;
}

.schedule-full-pc-photo img{

    width:80px;

    height:80px;

    object-fit:contain;

    border-radius:50%;
}


/* DOKTER */

.schedule-full-pc-doctor{

    min-width:0;
}

.schedule-full-pc-doctor strong{

    display:block;

    font-size:18px;

    line-height:1.4;

    color:#1f2937;
}


/* SPESIALIS */

.schedule-full-pc-specialist{

    color:#64748b;

    font-size:15px;

    line-height:1.4;
}


/* JAM */

.schedule-full-pc-time{

    color:#334155;

    font-size:16px;

    font-weight:500;

    text-align:center;

    white-space:nowrap;
}


/* STATUS */

.schedule-full-pc-status{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:6px;
}


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

.schedule-full-mobile-list{

    display:none;
}

/* STATUS */
.status-cell {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    justify-content: center;
    min-height: 48px;
}

.badge {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    padding: 4px 8px;
    color: #fff;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:92px;
    height:36px;
    border-radius:999px;
    font-size:14px;
    font-weight:700;
}

.badge-active {
    background-color: #2563eb;
    color: #fff;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
}

.badge-praktik {
    background:#dcfce7;
    color:#15803d;
}

.badge-belum{
    background:#fef3c7;
    color:#b45309;
}

.badge-selesai{
    background:#e5e7eb;
    color:#4b5563;
}

.badge-libur {
    background:#fee2e2;
    color:#b91c1c;
}

.badge-cuti {
    background:#ffedd5;
    color:#c2410c;
}

.note{
    font-size:12px;
    color:#64748b;
}

/* EMPTY */
.jadwal-empty{
    background:#f8fafc;
    padding:20px;
    border-radius:15px;
}

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

@media(max-width:600px){
    /* =====================================================
       HERO MOBILE
    ===================================================== */
    .jadwal-hero{
        height:300px;
        position:relative;
        overflow:hidden;
        align-items:flex-start;
        background-position:68% center;
    }

    /* -----------------------------------------------------
       OVERLAY MOBILE
    ----------------------------------------------------- */
    .jadwal-hero-overlay{
        background:
        linear-gradient(
            90deg,
            rgba(190,0,0,.94) 0%,
            rgba(205,0,0,.72) 42%,
            rgba(205,0,0,.25) 75%,
            rgba(255,255,255,.05) 100%
        );
    }

    /* -----------------------------------------------------
       DOT PATTERN
    ----------------------------------------------------- */
    .jadwal-hero::before{
        top:22px;
        left:18px;
        width:90px;
        height:90px;
        background-size:13px 13px;
        opacity:.45;
    }

    /* -----------------------------------------------------
       CONTENT
    ----------------------------------------------------- */
    .jadwal-hero-container{
        width:100%;
    }

    .jadwal-hero-content{
        max-width:none;
        padding-left:20px;
        padding-right:20px;
        padding-top:-10px;
        padding-bottom:0;
        transform:none;
    }
    
    /* -----------------------------------------------------
       BREADCRUMB
    ----------------------------------------------------- */
    .jadwal-breadcrumb{
        display:none;

    }

    /* -----------------------------------------------------
       JUDUL
    ----------------------------------------------------- */
    .jadwal-label{
        font-size:30px;
        line-height:1.15;
        font-weight:800;
        margin:0 0 12px;
        color:#fff;
   }

    /* -----------------------------------------------------
       DESKRIPSI
    ----------------------------------------------------- */
    .jadwal-hero p{
        font-size:14px;
        line-height:1.55;
        max-width:330px;
        margin:0;
        color:#fff;
    }

    /* =====================================================
       SOFT FADE BAWAH HERO
    ===================================================== */
    .jadwal-hero::after{
        height:100px;
        background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,0) 0%,
            rgba(255,255,255,.18) 25%,
            rgba(255,255,255,.65) 65%,
            #fff 100%
        );
        z-index:5;
        pointer-events:none;
    }

    /* ===============================
       PC HIDDEN
    ================================ */

    .schedule-full-pc-list{

        display:none;
    }


    /* ===============================
       MOBILE SHOW
    ================================ */

    .schedule-full-mobile-list{

        display:block;

        width:100%;
    }


    /* ===============================
       FILTER
    ================================ */

    .jadwal-filter{

        margin:20px 0;

        padding:18px;

    }

    .jadwal-filter label{

        display:block;

        margin-bottom:8px;

    }

    .jadwal-filter select{

        width:100%;

        min-width:0;

    }


    /* ===============================
       HARI
    ================================ */

    .jadwal-hari{

        margin-top:30px;
    }

    .jadwal-hari h2{

        font-size:24px;

        margin-bottom:15px;
    }


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

    .schedule-full-mobile-card{

        width:100%;

        background:#fff;

        border-radius:18px;

        overflow:hidden;

        margin-bottom:18px;

        box-shadow:
            0 8px 20px rgba(0,0,0,.06);

        border:1px solid #f1f1f1;

        text-decoration:none;
        color:inherit;
        cursor:pointer;
        transition:.2s ease;
    }

    .schedule-full-mobile-card:hover{
        transform:translateY(-2px);
        box-shadow:0 12px 28px rgba(0,0,0,.10);
    }

    /* HEADER */

    .schedule-full-mobile-header{

        background:#d71920;

        color:#fff;

        padding:12px 18px;

        font-size:16px;

        font-weight:700;

        display:flex;

        align-items:center;

        gap:10px;
    }


    /* BODY */

    .schedule-full-mobile-body{

        display:flex;

        align-items:center;

        padding:18px;

        gap:15px;
    }


    /* FOTO */

    .schedule-full-mobile-photo{

        flex:0 0 60px;

        width:60px;

        height:60px;

        display:flex;

        align-items:center;

        justify-content:center;

        border-radius:50%;

        background:#f8fafc;

        overflow:hidden;
    }

    .schedule-full-mobile-photo img{

        width:60px;

        height:60px;

        object-fit:contain;

        border-radius:50%;
    }


    /* INFO */

    .schedule-full-mobile-info{

        flex:1;

        min-width:0;
    }

    .schedule-full-mobile-info strong{

        display:block;

        font-size:16px;

        line-height:1.35;

        color:#1f2937;

        margin-bottom:4px;
    }

    .schedule-full-mobile-info span{

        display:block;

        color:#64748b;

        font-size:14px;
    }


    /* TIME */

    .schedule-full-mobile-time{

        flex:0 0 auto;

        display:flex;

        flex-direction:column;

        align-items:flex-end;

        gap:8px;

        text-align:right;
    }

    .schedule-full-mobile-time > span:first-child{

        color:#334155;

        font-size:14px;

        white-space:nowrap;
    }

}