:root{

    --theme:#ff6a00;
    --theme2:#ff0066;

    --dark:#0f172a;
    --dark2:#111827;

    --light:#f8fafc;

    --border:#e5e7eb;

    --text:#475569;

    --success:#16a34a;
    --danger:#dc2626;

    --shadow:
    0 12px 35px rgba(0,0,0,.08);

    --sidebar-width:280px;

    --topbar-height:88px;
}

/* =================================================
RESET
================================================= */

*{

    margin:0;
    padding:0;

    box-sizing:border-box;
}

html,
body{

    width:100%;

    overflow-x:hidden;
}

body{

    font-family:
    Poppins,
    Arial,
    sans-serif;

    background:#f1f5f9;

    color:var(--text);
}

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

.hotel-admin-layout{

    width:100%;

    min-height:100vh;
}

/* =================================================
SIDEBAR
================================================= */

.hotel-sidebar{

    position:fixed;

    top:0;
    left:0;

    width:var(--sidebar-width);

    height:100vh;

    background:
    linear-gradient(
        180deg,
        #020617,
        #0f172a
    );

    overflow-y:auto;

    overflow-x:hidden;

    z-index:1200;

    transition:.3s ease;
}

/* =================================================
SIDEBAR LOGO
================================================= */

.hotel-sidebar-logo{

    padding:24px;

    border-bottom:
    1px solid rgba(255,255,255,.06);

    display:flex;

    align-items:center;

    gap:16px;
}

.hotel-sidebar-logo img{

    width:62px;
    height:62px;

    border-radius:18px;

    object-fit:cover;

    background:#fff;

    padding:8px;
}

.hotel-sidebar-logo-text{

    flex:1;
}

.hotel-sidebar-logo-text h2{

    font-size:18px;

    font-weight:800;

    color:#fff;

    line-height:1.2;
}

.hotel-sidebar-logo-text p{

    margin-top:6px;

    font-size:13px;

    color:rgba(255,255,255,.55);
}

/* =================================================
SIDEBAR MENU
================================================= */

.hotel-sidebar-menu{

    padding:22px 14px 30px;
}

.hotel-sidebar-menu ul{

    list-style:none;
}

.hotel-sidebar-menu li{

    margin-bottom:10px;
}

.hotel-sidebar-menu a{

    display:flex;

    align-items:center;

    gap:14px;

    padding:16px 18px;

    text-decoration:none;

    color:#fff;

    border-radius:20px;

    transition:.25s ease;

    position:relative;
}

.hotel-sidebar-menu a:hover,
.hotel-sidebar-menu a.active{

    background:
    linear-gradient(
        135deg,
        rgba(255,106,0,.18),
        rgba(255,0,102,.18)
    );
}

.hotel-sidebar-menu a i{

    width:22px;

    min-width:22px;

    text-align:center;

    font-size:18px;
}

.hotel-sidebar-menu a span{

    flex:1;

    font-size:15px;

    font-weight:600;
}

/* =================================================
MAIN AREA
================================================= */

.hotel-main,
.hotel-main-wrapper,
.hotel-admin-main{

    margin-left:var(--sidebar-width);

    width:calc(100% - var(--sidebar-width));

    min-height:100vh;

    transition:.3s ease;
}

/* =================================================
TOPBAR
================================================= */

.hotel-topbar{

    position:fixed;

    top:0;

    right:0;

    width:calc(100% - var(--sidebar-width));

    height:var(--topbar-height);

    background:#ffffff;

    border-bottom:
    1px solid var(--border);

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    padding:0 30px;

    z-index:1100;

    box-shadow:
    0 4px 20px rgba(0,0,0,.04);
}

/* =================================================
TOPBAR LEFT
================================================= */

.hotel-topbar-left{

    display:flex;

    align-items:center;

    gap:18px;

    flex:1;
}

/* =================================================
SEARCH
================================================= */

.topbar-search{

    position:relative;

    width:100%;

    max-width:760px;
}

.topbar-search input{

    width:100%;

    height:56px;

    border:
    2px solid #f1f5f9;

    border-radius:22px;

    background:#fff;

    padding:
    0 150px 0 58px;

    font-size:15px;

    outline:none;

    transition:.3s ease;
}

.topbar-search input:focus{

    border-color:
    rgba(255,106,0,.25);

    box-shadow:
    0 0 0 4px rgba(255,106,0,.08);
}

.search-icon{

    position:absolute;

    left:22px;

    top:50%;

    transform:translateY(-50%);

    color:#64748b;

    font-size:19px;
}

.topbar-search-btn{

    position:absolute;

    top:7px;
    right:7px;

    height:42px;

    padding:0 28px;

    border:none;

    border-radius:16px;

    background:
    linear-gradient(
        135deg,
        var(--theme),
        var(--theme2)
    );

    color:#fff;

    font-size:14px;

    font-weight:700;

    cursor:pointer;

    box-shadow:
    0 10px 20px rgba(255,0,102,.18);
}

/* =================================================
TOPBAR RIGHT
================================================= */

.hotel-topbar-right{

    display:flex;

    align-items:center;

    gap:14px;
}

/* =================================================
ICON BUTTON
================================================= */

.topbar-icon-btn{

    width:52px;
    height:52px;

    border:none;

    border-radius:18px;

    background:#f8fafc;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    position:relative;

    font-size:19px;

    transition:.25s ease;
}

.topbar-icon-btn:hover{

    background:#fff;

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

/* =================================================
NOTIFICATION COUNT
================================================= */

.notification-count{

    position:absolute;

    top:-4px;
    right:-4px;

    width:24px;
    height:24px;

    border-radius:50%;

    background:#ef4444;

    color:#fff;

    font-size:11px;

    font-weight:700;

    display:flex;

    align-items:center;

    justify-content:center;

    border:3px solid #fff;
}

/* =================================================
PROFILE
================================================= */

.hotel-profile{

    display:flex;

    align-items:center;

    gap:12px;
}

.hotel-profile-avatar{

    width:54px;
    height:54px;

    border-radius:18px;

    overflow:hidden;

    background:#fff;

    border:
    2px solid #f1f5f9;
}

.hotel-profile-avatar img{

    width:100%;
    height:100%;

    object-fit:cover;
}

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

.hotel-page,
.hotel-content,
.hotel-content-area{

    width:100%;

    padding:
    calc(var(--topbar-height) + 28px)
    30px
    30px;

    overflow:hidden;
}

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

.stats-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(260px,1fr));

    gap:22px;
}

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

.stats-card{

    background:#fff;

    border-radius:28px;

    padding:28px;

    box-shadow:var(--shadow);

    position:relative;

    overflow:hidden;
}

.stats-card h4{

    font-size:15px;

    color:#64748b;
}

.stats-card h2{

    margin-top:16px;

    font-size:42px;

    color:var(--dark);

    font-weight:800;
}

.stats-card p{

    margin-top:10px;

    font-size:14px;

    color:var(--success);
}

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

.table-card{

    background:#fff;

    border-radius:28px;

    margin-top:24px;

    overflow:hidden;

    box-shadow:var(--shadow);
}

.table-header{

    padding:24px 26px;

    border-bottom:
    1px solid var(--border);

    display:flex;

    align-items:center;

    justify-content:space-between;
}

.table-header h3{

    font-size:22px;

    color:var(--dark);

    font-weight:700;
}

.table-responsive{

    width:100%;

    overflow-x:auto;
}

table{

    width:100%;

    border-collapse:collapse;
}

table th{

    background:#f8fafc;

    padding:18px;

    text-align:left;

    font-size:13px;

    color:#64748b;
}

table td{

    padding:18px;

    border-top:
    1px solid var(--border);

    font-size:14px;
}

/* =================================================
BUTTON
================================================= */

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    padding:12px 20px;

    border:none;

    border-radius:16px;

    text-decoration:none;

    cursor:pointer;

    transition:.3s ease;
}

.btn-primary{

    background:
    linear-gradient(
        135deg,
        var(--theme),
        var(--theme2)
    );

    color:#fff;
}

/* =================================================
MOBILE MENU BUTTON
================================================= */

.mobile-menu-btn{

    width:52px;
    height:52px;

    border:none;

    border-radius:18px;

    background:
    linear-gradient(
        135deg,
        var(--theme),
        var(--theme2)
    );

    color:#fff;

    font-size:24px;

    cursor:pointer;

    display:none;

    align-items:center;

    justify-content:center;

    flex-shrink:0;
}

/* =================================================
OVERLAY
================================================= */

.sidebar-overlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.45);

    z-index:1190;

    opacity:0;

    visibility:hidden;

    transition:.3s ease;
}

.sidebar-overlay.show{

    opacity:1;

    visibility:visible;
}

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

.hotel-sidebar::-webkit-scrollbar{

    width:6px;
}

.hotel-sidebar::-webkit-scrollbar-thumb{

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

    border-radius:20px;
}

/* =================================================
TABLET
================================================= */

@media(max-width:991px){

    .mobile-menu-btn{

        display:flex;
    }

    .hotel-sidebar{

        left:-100%;
    }

    .hotel-sidebar.show{

        left:0;
    }

    .hotel-main,
    .hotel-main-wrapper,
    .hotel-admin-main{

        margin-left:0;

        width:100%;
    }

    .hotel-topbar{

        width:100%;

        left:0;

        padding:0 20px;
    }

    .hotel-page,
    .hotel-content,
    .hotel-content-area{

        padding:
        calc(var(--topbar-height) + 20px)
        20px
        20px;
    }

    .topbar-search{

        max-width:100%;
    }

}

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

@media(max-width:768px){

    :root{

        --topbar-height:78px;
    }

    .hotel-topbar{

        padding:0 14px;

        gap:12px;
    }

    .hotel-topbar-left{

        gap:12px;
    }

    .topbar-search{

        flex:1;
    }

    .topbar-search input{

        height:50px;

        padding:
        0 110px 0 46px;

        font-size:14px;

        border-radius:18px;
    }

    .search-icon{

        left:16px;

        font-size:17px;
    }

    .topbar-search-btn{

        top:5px;
        right:5px;

        height:40px;

        padding:0 18px;

        border-radius:14px;

        font-size:13px;
    }

    .topbar-icon-btn{

        width:46px;
        height:46px;

        border-radius:16px;
    }

    .hotel-profile-avatar{

        width:46px;
        height:46px;

        border-radius:16px;
    }

    .hotel-page,
    .hotel-content,
    .hotel-content-area{

        padding:
        calc(var(--topbar-height) + 16px)
        16px
        16px;
    }

    .stats-grid{

        grid-template-columns:1fr;
    }

    table,
    thead,
    tbody,
    th,
    td,
    tr{

        display:block;
    }

    thead{

        display:none;
    }

    tbody tr{

        padding:16px;

        border-bottom:
        1px solid var(--border);
    }

    tbody td{

        display:flex;

        justify-content:space-between;

        gap:18px;

        border:none;

        padding:10px 0;
    }

    tbody td::before{

        content:attr(data-label);

        font-weight:700;

        color:var(--dark);
    }

}

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

@media(max-width:520px){

    .hotel-topbar{

        gap:10px;
    }

    .topbar-search input{

        padding:
        0 95px 0 42px;
    }

    .topbar-search-btn{

        padding:0 14px;

        font-size:12px;
    }

    .stats-card{

        padding:22px;
    }

    .stats-card h2{

        font-size:34px;
    }

}