/* ==========================
MAIN CONTENT
========================== */

.main-content{
    height:100vh;
    overflow-y:auto;
}

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

.header{
    display:flex;
    justify-content:flex-end;
    align-items:center;
}

/* ==========================
HEADING
========================== */

.heading{
    margin-bottom:16px;
}

.heading h1{
    font-size:45px;
    line-height:42px;
    font-weight:700;
    color:#000;
    margin-bottom:4px;
    font-family: 'Poppins', sans-serif;
}

.heading p{
    font-size:14px;
    line-height:22px;
    color:#98A2B3;
}

/* ==========================
HERO CARD
========================== */

.hero-card{
    width:100%;
    min-height:250px;

    border-radius:26px;

    background:linear-gradient(
        90deg,
        #056C7B 0%,
        #39C5AE 100%
    );

    padding:22px 28px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    margin-bottom:18px;

    box-shadow:0px 6px 16px rgba(0,0,0,0.08);
}

.hero-left{
    display:flex;
    flex-direction:column;
}

.hero-status{
    font-family: 'Poppins', sans-serif;
    display:flex;
    align-items:center;
    gap:10px;

    color:#FFFFFF;

    font-size:14px;
    font-weight:500;

    margin-bottom:10px;
}

.hero-status span{
    width:8px;
    height:8px;
    border-radius:50%;
    background:#63F0C5;
}

.hero-left h1{
    font-family: 'Poppins', sans-serif;
    font-size:102px;
    line-height:92px;
    font-weight:800;
    color:#fff;
}

.hero-left h2{
    font-family: 'Poppins', sans-serif;
    font-size:22px;
    line-height:30px;
    margin-top:6px;
    font-weight:700;
    color:#fff;
}

.resep{
    margin-top:10px;

    width:116px;
    height:30px;

    border-radius:8px;

    background:#4FD5B6;

    display:flex;
    align-items:center;
    justify-content:center;

    color:#fff;
    font-family: 'Poppins', sans-serif;
    font-size:12px;
    font-weight:550;
}

.hero-actions{
    font-family: 'Poppins', sans-serif;
    display:flex;
    align-items:center;
    gap:16px;
}

.hero-btn{
    width:158px;
    height:146px;

    border:none;
    outline:none;

    border-radius:14px;

    background:rgba(255,255,255,0.08);

    backdrop-filter:blur(6px);

    color:#fff;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    gap:12px;

    cursor:pointer;

    box-shadow:0px 6px 12px rgba(0,0,0,0.10);

    transition:0.25s ease;
}

.hero-btn:hover{
    transform:translateY(-3px);
}

.hero-btn img{
    width:42px;
    height:42px;
    object-fit:contain;
}

.hero-btn span{
    font-size:18px;
    line-height:28px;
    text-align:center;
    font-weight:700;
}

.skip-btn{
    width:152px;
    height:146px;

    border:none;
    outline:none;

    border-radius:14px;

    background:#FF2A23;

    color:#fff;

    font-size:28px;
    font-weight:700;

    cursor:pointer;

    box-shadow:0px 10px 18px rgba(255,42,35,0.35);
}

/* ==========================
STATS
========================== */

.stats{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
    margin-bottom:18px;
}

.stat-card{
    font-family: 'Poppins', sans-serif;
    height:138px;

    background:#fff;

    border-radius:20px;

    padding:20px;

    display:flex;
    justify-content:space-between;
    align-items:center;

    box-shadow:0px 4px 14px rgba(0,0,0,0.06);
}

.stat-card p{
    font-size:14px;
    line-height:20px;
    font-weight:500;
}

.stat-card h3{
    font-size:40px;
    line-height:44px;
    font-weight:800;

    margin-top:8px;
    margin-bottom:6px;

    color:#0B7C86;
}

.stat-card span{
    font-size:12px;
    color:#B1B7C0;
}

.orange{
    color:#FF9800 !important;
}

.blue{
    color:#3182CE !important;
}

.purple{
    color:#D66EFF !important;
}

.stat-icon{
    width:64px;
    height:64px;

    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;
}

.stat-icon img{
    width:28px;
    height:28px;
}

.teal{
    background:#E7F7F4;
}

.orange-bg{
    background:#FFF4E1;
}

.blue-bg{
    background:#E8F1FB;
}

.purple-bg{
    background:#F7E8FF;
}

/* ==========================
QUEUE SECTION
========================== */

.queue-layout{
    display:grid;
    grid-template-columns:1fr 275px;
    gap:18px;
}

.queue-left{
    background:#fff;

    border-radius:20px;

    padding:18px;

    box-shadow:0px 4px 14px rgba(0,0,0,0.06);
}

.queue-title{
    font-family: 'Poppins', sans-serif;
    display:flex;
    justify-content:space-between;
    align-items:center;

    margin-bottom:14px;
}

.queue-title h2{
    font-family: 'Poppins', sans-serif;
    font-size:18px;
    line-height:28px;
    font-weight:700;
}

.badge-green{

    width:114px;
    height:32px;

    border-radius:6px;

    background:#46D1AF;

    color:#fff;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:14px;
    font-weight:600;
}

.queue-item{
    font-family: 'Poppins', sans-serif;
    width:100%;
    min-height:96px;

    border-radius:14px;

    background:#F9FAFB;

    border:1px solid #ECEFF3;

    padding:16px 18px;

    display:flex;
    align-items:center;

    gap:18px;

    margin-bottom:14px;
}

.queue-item.active{
    background:#F7FFFD;
}

.queue-number{
    font-family: 'Poppins', sans-serif;
    width:68px;
    height:68px;

    border-radius:4px;

    background:#0B7C86;

    color:#fff;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:30px;
    font-weight:700;
}

.queue-info{
    flex:1;
}

.queue-info h3{
    font-size:16px;
    line-height:24px;

    font-weight:700;

    color:#065F6A;

    margin-bottom:2px;
}

.queue-info p{
    font-size:14px;
    line-height:22px;

    color:#39C5AE;
}

.queue-status{
    min-width:84px;
    height:26px;

    border-radius:6px;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:12px;
    font-weight:600;
}

.active-status{
    background:#DFF7F1;
    color:#0B7C86;
}

.waiting-status{
    background:#FFF3D8;
    color:#F59E0B;
}

.eye{
    width:26px;
    height:26px;
    object-fit:contain;
    opacity:0.7;
}

/* RIGHT */

.queue-right{
    background:#fff;

    border-radius:20px;

    padding:16px;

    box-shadow:0px 4px 14px rgba(0,0,0,0.06);
}

.skip-header{
    width:74px;
    height:28px;

    border-radius:6px;

    background:#FF2A23;

    color:#fff;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:13px;
    font-weight:600;

    margin-bottom:12px;
}

.skip-card{
    font-family: 'Poppins', sans-serif;
    width:100%;

    background:#F9FAFB;

    border-radius:14px;

    border:1px solid #ECEFF3;

    padding:14px;

    display:flex;
    align-items:center;

    gap:14px;
}

/* ==========================
SCROLLBAR
========================== */

.main-content::-webkit-scrollbar{
    width:8px;
}

.main-content::-webkit-scrollbar-thumb{
    background:#D0D5DD;
    border-radius:10px;
}

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

@media(max-width:1400px){

    .stats{
        grid-template-columns:repeat(2,1fr);
    }

    .queue-layout{
        grid-template-columns:1fr;
    }
}

@media(max-width:1200px){

    .hero-card{
        flex-direction:column;
        align-items:flex-start;
        height:auto;
        gap:24px;
    }

    .hero-actions{
        width:100%;
        flex-wrap:wrap;
    }
}

@media(max-width:768px){

    .stats{
        grid-template-columns:1fr;
    }

    .hero-actions{
        flex-direction:column;
        width:100%;
    }

    .hero-btn,
    .skip-btn{
        width:100%;
    }

    .queue-item{
        flex-direction:column;
        align-items:flex-start;
    }
}

.admin-profile{
    display:flex;
    align-items:center;
    gap:12px;

    text-decoration:none;
    color:inherit;
    cursor:pointer;
}

.admin-profile:hover{
    opacity:0.85;
}

/* ==========================================
MODAL PANGGIL ULANG
========================================== */

.recall-modal{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.55);

    display:none;
    align-items:center;
    justify-content:center;

    z-index:9999;
}

.modal-content{
    width:430px;
    background:#fff;

    border-radius:28px;

    padding:30px;

    position:relative;

    box-shadow:0 20px 50px rgba(0,0,0,.18);
}

.close-modal{
    position:absolute;
    top:18px;
    right:18px;

    border:none;
    background:none;

    font-size:28px;
    cursor:pointer;

    color:#98A2B3;
}

.modal-icon{
    width:130px;
    height:130px;

    border-radius:50%;

    background:#DFF7F1;

    display:flex;
    align-items:center;
    justify-content:center;

    margin:0 auto 20px;
}

.modal-icon img{
    width:65px;
    height:65px;
    object-fit:contain;
}

.modal-content h2{
    text-align:center;

    font-size:24px;
    font-weight:700;

    margin-bottom:20px;

    color:#065F6A;
}

.modal-queue{
    display:flex;
    align-items:center;
    gap:18px;

    background:#F9FAFB;

    border:1px solid #ECEFF3;

    border-radius:16px;

    padding:16px;
}

.recall-btn{
    width:100%;
    height:56px;

    border:none;
    outline:none;

    border-radius:12px;

    background:#0B7C86;
    color:#fff;

    margin-top:20px;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    font-size:16px;
    font-weight:700;

    cursor:pointer;

    transition:.25s ease;
}

.recall-btn:hover{
    transform:translateY(-2px);
}

.recall-btn img{
    width:20px;
    height:20px;
    object-fit:contain;
}

/* ==========================================
EMPTY SKIP
========================================== */

.empty-skip{
    font-family: 'Poppins', sans-serif;
    width:100%;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    text-align:center;

    padding:35px 10px;
}

.empty-skip img{
    width:120px;
    height:auto;

    margin-bottom:14px;
}

.empty-skip h3{
    font-family: 'Poppins', sans-serif;
    font-size:15px;
    font-weight:700;

    color:#667085;

    margin-bottom:6px;
}

.empty-skip p{
    font-family: 'Poppins', sans-serif;
    font-size:12px;
    line-height:18px;

    color:#98A2B3;
}

/* ==========================================
SKIP CARD
========================================== */

.skip-card{
    margin-bottom:12px;
}

.skip-eye{
    cursor:pointer;
}

.skip-eye:hover{
    opacity:1;
}

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

@media(max-width:768px){

    .modal-content{
        width:90%;
        padding:24px;
    }

    .modal-icon{
        width:100px;
        height:100px;
    }

    .modal-icon img{
        width:50px;
        height:50px;
    }

}
.finished-status{
    background:#F4E8FF !important;
    color:#A855F7 !important;
}