/* ==========================
   GLOBAL
========================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
}

body{
    background:#f4f7fb;
    color:#222;
}

/* ==========================
   CONTAINER
========================== */

.app{

    max-width:430px;

    margin:auto;

    min-height:100vh;

    background:#fff;

    position:relative;

    overflow:visible;

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

}

.content{

    padding:20px;

    padding-bottom:120px;

}

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

.top-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:25px;

}

.top-header h2{

    font-size:22px;

    font-weight:700;

}

.top-header p{

    color:#777;

    font-size:14px;

}

/* ==========================
   CARD GRID
========================== */

.cards{

    display:grid;

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

    gap:15px;

}

.card-dashboard{

    background:#fff;

    border-radius:18px;

    padding:18px;

    box-shadow:0 4px 18px rgba(0,0,0,.08);

}

.card-dashboard h5{

    color:#666;

    font-size:13px;

    font-weight:500;

}

.card-dashboard h2{

    margin-top:8px;

    font-size:24px;

    font-weight:700;

}

/* ==========================
BOTTOM NAV
========================== */


.bottom-nav{
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    width: 100%;
    max-width: 430px;
    background: #fff;
    display: flex;
    justify-content: space-around;
    padding: 14px 0;
    box-shadow: 0 -5px 15px rgba(0,0,0,.08);
    z-index: 9999;
}

.bottom-nav a{

    text-decoration:none;

    color:#666;

    display:flex;

    flex-direction:column;

    align-items:center;

    font-size:12px;

}

.bottom-nav i{

    font-size:22px;

    margin-bottom:5px;

}

.card-icon{
    width:42px;
    height:42px;
    border-radius:14px;
    display:flex;
    justify-content:center;
    align-items:center;
    margin-bottom:12px;
    font-size:20px;
}

.blue{
    background:#dbeafe;
    color:#2563eb;
}

.green{
    background:#dcfce7;
    color:#16a34a;
}

.orange{
    background:#ffedd5;
    color:#ea580c;
}

.purple{
    background:#ede9fe;
    color:#7c3aed;
}

/* ==========================
   UPCOMING BOOKING
========================== */

.upcoming-card{
    background:#fff;
    border-radius:18px;
    padding:15px;
    box-shadow:0 4px 18px rgba(0,0,0,.07);
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:12px;
}

.date-box{
    width:52px;
    height:52px;
    border-radius:16px;
    background:#2563eb;
    color:#fff;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    flex-shrink:0;
}

.date-box span{
    font-size:18px;
    font-weight:700;
    line-height:18px;
}

.date-box small{
    font-size:11px;
    font-weight:500;
}

.upcoming-info{
    flex:1;
}

.upcoming-info h5{
    font-size:14px;
    font-weight:600;    
    margin-bottom:4px;
}

.upcoming-info p{
    font-size:12px;
    color:#777;
    margin:0;
}

.upcoming-card i{
    color:#aaa;
}

.section-title{
    margin-top:26px;
    margin-bottom:14px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.section-title h4{
    font-size:18px;
    font-weight:700;
    margin:0;
}

.section-title a{
    text-decoration:none;
    font-size:13px;
    color:#2563eb;
    font-weight:500;
}

.booking-list{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.booking-card{
    background:#fff;
    border-radius:18px;
    padding:15px;
    box-shadow:0 4px 18px rgba(0,0,0,.07);
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.booking-left{
    display:flex;
    align-items:center;
    gap:12px;
}

.guest-icon{
    width:42px;
    height:42px;
    border-radius:50%;
    background:#eef2ff;
    color:#4f46e5;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-shrink:0;
}

.booking-card h5{
    font-size:14px;
    font-weight:600;
    margin-bottom:4px;
}

.booking-card p{
    font-size:12px;
    color:#777;
    margin:0;
}

.badge-status{
    background:#fef3c7;
    color:#d97706;
    padding:6px 10px;
    border-radius:20px;
    font-size:11px;
    font-weight:600;
}

.badge-status.paid{
    background:#dcfce7;
    color:#16a34a;
}

/* ==========================
   HOMESTAYS PAGE
========================== */

.btn-add{
    width:44px;
    height:44px;
    border:none;
    border-radius:14px;
    background:#2563eb;
    color:#fff;
    font-size:20px;
    display:flex;
    justify-content:center;
    align-items:center;
}

.homestay-list{
    display:flex;
    flex-direction:column;
    gap:15px;
}

.homestay-card{
    background:#fff;
    border-radius:20px;
    padding:18px;
    box-shadow:0 4px 18px rgba(0,0,0,.07);
}

.homestay-top{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    margin-bottom:18px;
}

.homestay-code{
    display:inline-block;
    background:#eef2ff;
    color:#2563eb;
    padding:5px 10px;
    border-radius:20px;
    font-size:12px;
    font-weight:600;
    margin-bottom:8px;
}

.homestay-card h4{
    font-size:17px;
    font-weight:700;
    margin:0;
}

.status-badge{
    background:#dcfce7;
    padding:6px 10px;
    border-radius:20px;
    font-size:11px;
    font-weight:600;
}

.price-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    margin-bottom:16px;
}

.price-row div{
    background:#f8fafc;
    border-radius:15px;
    padding:12px;
}

.price-row small{
    font-size:11px;
    color:#777;
}

.price-row h5{
    font-size:14px;
    font-weight:700;
    margin-top:5px;
    margin-bottom:0;
}

.action-row{
    display:flex;
    gap:10px;
}

.action-row a{
    flex:1;
    text-decoration:none;
    padding:10px;
    border-radius:14px;
    text-align:center;
    font-size:13px;
    font-weight:600;
}

.edit-btn{
    background:#eff6ff;
    color:#2563eb;
}   

.bottom-nav .nav-main{
    width:58px;
    height:58px;
    background:#2563eb;
    color:#fff;
    border-radius:50%;
    margin-top:-34px;
    display:flex;
    justify-content:center;
    align-items:center;
    box-shadow:0 8px 20px rgba(37,99,235,.35);

    position: relative;
    z-index: 10000;
}
.bottom-nav .nav-main i{
    font-size:28px;
    margin:0;
}

.custom-modal{
    border-radius:22px;
    border:none;
}

.custom-modal .modal-header{
    border-bottom:none;
    padding:20px 20px 10px;
}

.custom-modal .modal-body{
    padding:10px 20px;
}

.custom-modal .modal-footer{
    border-top:none;
    padding:10px 20px 20px;
}

.custom-modal label{
    font-size:13px;
    font-weight:600;
    margin-bottom:6px;
}

.custom-modal .form-control{
    border-radius:14px;
    padding:11px 13px;
    font-size:14px;
}

.action-row button{
    flex:1;
    border:none;
    padding:10px;
    border-radius:14px;
    text-align:center;
    font-size:13px;
    font-weight:600;
}

.form-card{
    background:#fff;
    border-radius:22px;
    padding:20px;
    box-shadow:0 4px 18px rgba(0,0,0,.07);
}

.form-card label{
    font-size:13px;
    font-weight:600;
    margin-bottom:6px;
}

.form-card .form-control{
    border-radius:14px;
    padding:12px 14px;
    font-size:14px;
}

.btn-submit{
    width:100%;
    border:none;
    border-radius:16px;
    background:#2563eb;
    color:#fff;
    padding:14px;
    font-weight:600;
    font-size:15px;
    margin-top:5px;
}

.calendar-card{
    background:#fff;
    border-radius:22px;
    padding:12px;
    box-shadow:0 4px 18px rgba(0,0,0,.07);
}

.fc{
    font-size:13px;
}

.fc .fc-toolbar-title{
    font-size:18px;
    font-weight:700;
}

.fc .fc-button{
    background:#2563eb;
    border:none;
    border-radius:10px;
    font-size:12px;
}

.fc-event{
    border:none;
    border-radius:8px;
    padding:2px 4px;
    font-size:11px;
}

.detail-row{
    display:flex;
    justify-content:space-between;
    gap:15px;
    padding:12px 0;
    border-bottom:1px solid #eef2f7;
}

.detail-row span,
.detail-note span{
    font-size:13px;
    color:#777;
}

.detail-row strong{
    font-size:13px;
    text-align:right;
}

.detail-note{
    padding-top:12px;
}

.detail-note p{
    margin-top:6px;
    font-size:13px;
    color:#222;
}

.summary-box{
    background:#f8f9fc;
    border-radius:25px;
    padding:18px;
}

.summary-box div{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:15px;
    padding:12px 0;
    border-bottom:1px solid #e5e5e5;
}

.summary-box div:last-child{
    border-bottom:none;
}

.summary-box span{
    color:#666;
    flex:1;
}

.summary-box strong{
    flex:1;
    text-align:right;
    font-weight:600;
    word-break:break-word;
}

.booking-actions{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:8px;
}

.small-edit,
.small-delete{
    width:34px;
    height:34px;
    border-radius:12px;
    display:flex;
    justify-content:center;
    align-items:center;
    text-decoration:none;
    font-size:15px;
}

.small-edit{
    background:#eff6ff;
    color:#2563eb;
}

.small-delete{
    background:#fef2f2;
    color:#dc2626;
}

.detail-actions{
    display:flex;
    gap:10px;
    margin-top:18px;
}

.detail-actions a{
    flex:1;
    text-decoration:none;
    text-align:center;
    padding:12px;
    border-radius:14px;
    font-size:13px;
    font-weight:600;
}

.btn-detail-edit{
    background:#eff6ff;
    color:#2563eb;
}

.btn-detail-cancel{
    background:#fef2f2;
    color:#dc2626;
}

.empty-card{
    background:#fff;
    border-radius:18px;
    padding:18px;
    color:#777;
    font-size:13px;
    text-align:center;
    box-shadow:0 4px 18px rgba(0,0,0,.07);
}

.status-live{
    margin-top:15px;
    padding:14px;
    background:#f8fafc;
    border-radius:16px;
}

.live-badge{
    display:inline-block;
    padding:6px 12px;
    border-radius:30px;
    font-size:12px;
    font-weight:600;
    margin-bottom:10px;
}

.occupied{
    background:#dcfce7;
    color:#15803d;
}

.available{
    background:#f3f4f6;
    color:#6b7280;
}

.booking-count{
    margin-top:12px;
    display:flex;
    justify-content:space-between;
    font-size:13px;
    padding-top:10px;
    border-top:1px solid #e5e7eb;
}

.report-card{
    background:#fff;
    border-radius:20px;
    padding:20px;
    margin-bottom:16px;
    box-shadow:0 8px 20px rgba(0,0,0,.08);
}

.report-card h5{
    color:#777;
    font-size:13px;
}

.report-card h2{
    margin-top:8px;
    font-size:26px;
    font-weight:700;
}

.report-card p{
    color:#666;
    margin-top:8px;
}
.filter-report{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-bottom:18px;
}

.filter-report .form-control{
    border-radius:14px;
    padding:11px;
    font-size:13px;
}

.btn-filter{
    grid-column:1 / 3;
    border:none;
    border-radius:14px;
    padding:12px;
    background:#2563eb;
    color:#fff;
    font-weight:600;
}

.occupancy-card{
    background:#2563eb;
    color:#fff;
    border-radius:24px;
    padding:20px;
    margin-bottom:18px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    box-shadow:0 8px 20px rgba(37,99,235,.25);
}

.occupancy-card h5{
    font-size:13px;
    opacity:.85;
    margin:0;
}

.occupancy-card h2{
    font-size:28px;
    font-weight:700;
    margin:8px 0 4px;
}

.occupancy-card p{
    font-size:13px;
    opacity:.85;
    margin:0;
}

.occupancy-circle{
    width:72px;
    height:72px;
    border-radius:50%;
    background:rgba(255,255,255,.18);
    display:flex;
    justify-content:center;
    align-items:center;
    font-weight:700;
    font-size:18px;
}

.action-row{
    display:flex;
    gap:10px;
    margin-top:16px;
}

.action-row button,
.action-row a{
    flex:1;
    border:none;
    padding:10px;
    border-radius:14px;
    text-align:center;
    font-size:13px;
    font-weight:600;
    text-decoration:none;
}

.edit-btn{
    background:#eff6ff;
    color:#2563eb;
}

.delete-btn{
    background:#fef2f2;
    color:#dc2626;
}

.status-badge{
    padding:6px 14px;
    border-radius:20px;
    font-size:12px;
    font-weight:600;
}

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

.status-badge.Nonaktif{
    background:#fee2e2;
    color:#dc2626;
}

.status-badge.Aktif{
    background:#dcfce7 !important;
    color:#15803d !important;
}

.status-badge.Nonaktif{
    background:#fee2e2 !important;
    color:#dc2626 !important;
}

/* STATUS PEMBAYARAN */
.payment-status{
    display:inline-block;
    padding:7px 12px;
    border-radius:20px;
    font-size:12px;
    font-weight:600;
}

.payment-belum{
    background:#fee2e2;
    color:#dc2626;
}

.payment-dp{
    background:#fef3c7;
    color:#ecec2f;
}

.payment-lunas{
    background:#dcfce7;
    color:#22c55e;
}

.payment-selesai{
    background:#dcfce7;
    color:#6b7280';
}   

.homestay-report-list{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.btn-print-report i{
    font-size:20px;
}

.btn-print-report:hover{

    transform:translateY(-3px);

    color:#fff;

    box-shadow:0 15px 35px rgba(37,99,235,.35);

    text-decoration:none;

}

.btn-print-report:active{

    transform:scale(.98);

}

.homestay-report-list{
    display:flex;
    flex-direction:column;
    gap:12px;
    margin-top:10px;
}

.homestay-report-card{
    background:#fff;
    border-radius:18px;
    padding:16px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    box-shadow:0 4px 18px rgba(0,0,0,.07);
}

.report-left h5{
    font-size:16px;
    font-weight:700;
    margin:8px 0 0;
}

.report-right{
    text-align:right;
}

.report-right strong{
    display:block;
    font-size:22px;
    font-weight:700;
}

.report-right small{
    font-size:12px;
    color:#777;
}

.homestay-code{
    display:inline-block;
    background:#eef2ff;
    color:#2563eb;
    padding:5px 11px;
    border-radius:20px;
    font-size:12px;
    font-weight:700;
}

.btn-print-report{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;
    width:100%;
    margin:19px 0 80px;
    padding:15px;
    border-radius:18px;
    background:#d21c1c; 
    color:#fff;
    text-decoration:none;
    font-size:15px;
    font-weight:600;
    box-shadow:0 8px 20px rgba(37,99,235,.25);
}

.btn-print-report:hover{
    color:#fff;
    text-decoration:none;
}

.clickable-card{
    text-decoration:none;
    color:inherit;
}

.clickable-card:hover{
    color:inherit;
}

.-page{
    min-height:100vh;
    background:#f4f7fb;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:20px;
}

.login-page{
    min-height:100vh;
    background:linear-gradient(180deg,#2563eb,#3b82f6);
    display:flex;
    justify-content:center;
    align-items:center;
    padding:20px;
}

.login-card{
    width:100%;
    max-width:370px;
    background:#fff;
    border-radius:28px;
    padding:40px 28px;
    box-shadow:0 15px 35px rgba(0,0,0,.18);
}

.login-logo{
    width:120px;
    height:120px;
    display:block;
    margin:0 auto 18px;
}

.login-card h2{
    font-size:30px;
    text-align:center;
    margin-bottom:8px;
}

.login-card p{
    text-align:center;
    color:#666;
    font-size:15px;
    margin-bottom:28px;
}

.login-card label{
    display:block;
    margin-bottom:8px;
    font-weight:600;
    font-size:14px;
}

.login-card input{
    width:100%;
    height:58px;
    border-radius:15px;
    font-size:16px;
    padding:0 18px;
    margin-bottom:18px;
}

.login-card input:focus{
    outline:none;
    border-color:#2563eb;
}

.login-card button{
    width:100%;
    height:58px;
    border-radius:16px;
    font-size:17px;
    font-weight:600;
}

.login-card button:hover{
    background:#1d4ed8;
}

.login-error{
    background:#fee2e2;
    color:#dc2626;
    padding:12px;
    border-radius:12px;
    text-align:center;
    margin-bottom:18px;
}

@media(max-width:430px){

.login-page{
    padding:20px;
}

.login-card{
    max-width:100%;
    padding:38px 24px;
}

.login-logo{
    width:110px;
    height:110px;
}

.login-card h2{
    font-size:26px;
}

}

.profile{
    width:48px;
    height:48px;
    background:#eb2525;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    color:#fff;
    text-decoration:none;
    font-size:20px;
    transition:.2s;
}

.profile:hover{
    color:#fff;
    background:#d81d1d;
    transform:scale(1.05);
}

.profile{
    width:48px !important;
    height:48px !important;
    background:#ef4444 !important;
    border-radius:50% !important;
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    color:#fff !important;
    text-decoration:none !important;
    font-size:21px !important;
    box-shadow:0 8px 18px rgba(239,68,68,.25);
}

.profile i{
    margin:0 !important;
}

.profile:hover{
    background:#dc2626 !important;
    color:#fff !important;
}

.logout{
    width:48px;
    height:48px;
    background:#ff0000;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    color:#fff;
    text-decoration:none;
    font-size:21px;
    box-shadow:0 8px 18px rgba(239,68,68,.25);
}

.logout i{
    margin:0;
}

.logout:hover{
    background:#ff0000;
    color:#fff;
    text-decoration:none;
}

.price-row{
    display:flex;
    gap:10px;
    margin-top:12px;
}

.price-item{
    flex:1;
    min-width:0;
    background:#f8fafc;
    border:1px solid #e5e7eb;
    border-radius:12px;
    padding:12px 8px;
    text-align:center;
}

.price-item small{
    display:block;
    font-size:12px;
    color:#64748b;
    margin-bottom:6px;
}

.price-item h5{
    margin:0;
    font-size:18px;
    font-weight:700;
    color:#1e293b;

    /* Tambahan */
    word-break: break-word;
    overflow-wrap: break-word;
    line-height:1.3;
}

.price-item h5{
    font-size:11px;
    font-weight:700;
    margin:0;
}
.ftodayc-day- {
    background-color: #5379ae !important;
}

.disabled-nav{
    color:#bdbdbd !important;
    pointer-events:none;
    cursor:default;
    opacity:.6;
}