.bed-dashboard{

    min-height:100vh;

    padding:80px 0;

    background:
        radial-gradient(
            circle at top left,
            rgba(255,255,255,.12),
            transparent 35%
        ),

        linear-gradient(
            135deg,
            #19A99B 0%,
            #0E9F8D 45%,
            #08796D 100%
        );

    position:relative;

    overflow:hidden;
}
.bed-dashboard::before{

    content:'';

    position:absolute;

    inset:0;

    background-image:
        radial-gradient(
            rgba(255,255,255,.12) 2px,
            transparent 2px
        );

    background-size:28px 28px;

    pointer-events:none;
}
.dashboard-wrapper{

    position:relative;

    z-index:2;

    background:
        rgba(255,255,255,.04);

    backdrop-filter:blur(8px);

    border:1px solid
        rgba(255,255,255,.15);

    border-radius:32px;

    padding:24px;

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

.bed-dashboard::after{

    content:'';

    position:absolute;

    width:600px;

    height:600px;

    left:-250px;

    top:-250px;

    background:
        radial-gradient(
            rgba(255,255,255,.15),
            transparent 70%
        );

    pointer-events:none;
}

.dashboard-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:30px;

    color:#fff;
}

.dashboard-label{

    font-size:12px;

    font-weight:700;

    letter-spacing:1px;
}

.dashboard-header h1{

    font-size:52px;

    font-weight:800;

    margin:10px 0;
}

.dashboard-header p{

    opacity:.9;
}

.dashboard-action button{

    border:none;

    background:
    rgba(255,255,255,.15);

    color:#fff;

    padding:14px 24px;

    border-radius:999px;
}


/* STAT */

.stat-grid{

    display:grid;

    grid-template-columns:
    repeat(4,1fr);

    gap:20px;

    margin-bottom:30px;
}

.stat-card{

    background:#fff;

    border-radius:24px;

    padding:24px;

    display:flex;

    align-items:center;

    gap:18px;
    width: 100%;
    min-width: 0; /* 🔥 penting banget */
}

.stat-card i{

    width:55px;

    height:55px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#EAFBF8;

    color:#0E9F8D;
}

.stat-card h3{

    font-size:36px;

    margin:0;
}

.warning i{

    background:#FFF4E5;

    color:#F59E0B;
}

.success i{

    background:#E8FFF0;

    color:#22C55E;
}


/* BOR */

.bor-card{

    background:
    rgba(255,255,255,.15);

    backdrop-filter:blur(10px);

    border-radius:24px;

    padding:25px;

    margin-bottom:30px;

    color:#fff;
}

.bor-top{

    display:flex;

    justify-content:space-between;

    margin-bottom:15px;
}

.progress-custom{

    height:12px;

    background:
    rgba(255,255,255,.25);

    border-radius:999px;

    overflow:hidden;
}

.progress-value{

    height:100%;

    background:#fff;

    border-radius:999px;
}


/* ROOM */

.room-grid{

    display:grid;

    grid-template-columns:
    repeat(4,1fr);

    gap:20px;
}

.room-card{

    background:#fff;

    border-radius:24px;

    padding:24px;
}

.room-header{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    margin-bottom:20px;
}

.status{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:8px 14px;

    border-radius:999px;

    font-size:12px;

    font-weight:700;

    line-height:1;

    min-width:80px;
}

.available{

    background:#DCFCE7;

    color:#15803D;
}

.limited{

    background:#FEF3C7;

    color:#B45309;
}

.room-info{

    display:flex;

    justify-content:space-between;
}

.room-info span{

    display:block;

    color:#6B7280;

    font-size:12px;
}

.room-info strong{

    font-size:24px;
}


/* MOBILE */

@media(max-width:768px){

    .dashboard-header{

        flex-direction:column;

        align-items:flex-start;
    }

    .dashboard-header h1{

        font-size:34px;
    }

    .stat-grid{

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

    .room-grid{

        grid-template-columns:1fr;
    }

}