/*==================================================
    NICLIB HOTEL
    RESPONSIVE CSS
==================================================*/

/* Menu mobile invisible sur desktop */

.mobile-menu-toggle{

    display:none;

}

/*==================================================
    TABLET
    992px
==================================================*/

@media (max-width: 992px){

    /*
    ------------------------------------------
    CONTAINER
    ------------------------------------------
    */

    .container{

        width:92%;

    }


    /*
    ------------------------------------------
    HEADER
    ------------------------------------------
    */

    .header .container{

        position:relative;

    }


    /*
    ------------------------------------------
    HERO
    ------------------------------------------
    */

    .hero{

        min-height:650px;

        height:auto;

    }

    .hero__title{

        font-size:58px;

    }

    .hero__description{

        font-size:18px;

    }


    /*
    ------------------------------------------
    PRESENTATION
    ------------------------------------------
    */

    .presentation{

        padding:90px 0;

    }

    .presentation-grid{

        grid-template-columns:1fr;

        gap:50px;

    }

    .presentation-content{

        text-align:center;

        align-items:center;

    }

    .presentation-image{

        justify-content:center;

    }


    /*
    ------------------------------------------
    ROOMS
    ------------------------------------------
    */

    .rooms{

        padding:90px 0;

    }

    .rooms-grid{

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

    }


    /*
    ------------------------------------------
    TESTIMONIALS
    ------------------------------------------
    */

    .testimonials{

        padding:90px 0;

    }

    .testimonials-grid{

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

    }


    /*
    ------------------------------------------
    CTA
    ------------------------------------------
    */

    .cta-overlay{

        padding:90px 0;

    }

}


/*==================================================
    MOBILE
    768px
==================================================*/

@media (max-width: 768px){

    /*
    ------------------------------------------
    GLOBAL
    ------------------------------------------
    */

    body{

        font-size:15px;

    }

    .container{

        width:90%;

    }


    /*
    ------------------------------------------
    HEADER
    ------------------------------------------
    */

    .header .container{

        min-height:75px;

        display:flex;

        align-items:center;

        justify-content:space-between;

    }


    /*
    LOGO
    */

    .header .logo{

        position:relative;

        z-index:1002;

    }


    /*
    MENU BUTTON
    */

    .mobile-menu-toggle{

        display:flex;

        align-items:center;

        justify-content:center;

        width:44px;

        height:44px;

        border:none;

        background:transparent;

        color:var(--gold);

        font-size:24px;

        cursor:pointer;

        z-index:1002;

    }


    /*
    ------------------------------------------
    NAVIGATION
    ------------------------------------------
    */

    .navigation{

        position:absolute;

        top:75px;

        left:0;

        width:100%;

        background:#111;

        padding:20px;

        opacity:0;

        visibility:hidden;

        transform:translateY(-10px);

        transition:.3s ease;

        z-index:1001;

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

    }


    .navigation.active{

        opacity:1;

        visibility:visible;

        transform:translateY(0);

    }


    .navigation ul{

        display:flex;

        flex-direction:column;

        gap:0;

        width:100%;

    }


    .navigation ul li{

        width:100%;

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

    }


    .navigation ul li:last-child{

        border-bottom:none;

    }


    .navigation ul li a{

        display:block;

        width:100%;

        padding:14px 10px;

    }


    /*
    ------------------------------------------
    LOGIN BUTTON
    ------------------------------------------
    */

    .btn-login{

        display:none;

    }


    /*
    ------------------------------------------
    HERO
    ------------------------------------------
    */

    .hero{

        min-height:650px;

        height:auto;

    }

    .hero__overlay{

        min-height:650px;

    }

    .hero__overlay .container{

        align-items:center;

    }

    .hero__content{

        max-width:100%;

    }

    .hero__subtitle{

        font-size:13px;

        letter-spacing:2px;

        margin-bottom:14px;

    }

    .hero__title{

        font-size:44px;

        line-height:1.15;

        margin-bottom:20px;

    }

    .hero__line{

        width:80px;

        margin-bottom:22px;

    }

    .hero__description{

        font-size:16px;

        line-height:1.7;

        margin-bottom:30px;

    }

    .hero-scroll{

        bottom:20px;

    }


    /*
    ------------------------------------------
    PRESENTATION
    ------------------------------------------
    */

    .presentation{

        padding:70px 0;

    }

    .presentation-grid{

        grid-template-columns:1fr;

        gap:40px;

    }

    .presentation-image img{

        height:450px;

    }


    /*
    ------------------------------------------
    ROOMS
    ------------------------------------------
    */

    .rooms{

        padding:70px 0;

    }

    .rooms-grid{

        grid-template-columns:1fr;

        gap:25px;

        margin-top:40px;

    }

    .room-card img{

        height:240px;

    }

    .room-card-body{

        padding:25px;

    }


    /*
    ------------------------------------------
    TESTIMONIALS
    ------------------------------------------
    */

    .testimonials{

        padding:70px 0;

    }

    .testimonials-grid{

        grid-template-columns:1fr;

        gap:25px;

        margin-top:40px;

    }

    .testimonial-card{

        padding:25px;

    }


    /*
    ------------------------------------------
    CTA
    ------------------------------------------
    */

    .cta{

        background-attachment:scroll;

    }

    .cta-overlay{

        padding:75px 20px;

    }

    .cta-title{

        font-size:34px;

        line-height:1.25;

    }

    .cta-text{

        font-size:16px;

        line-height:1.7;

    }

}


/*==================================================
    SMALL MOBILE
    480px
==================================================*/

@media (max-width: 480px){

    /*
    ------------------------------------------
    CONTAINER
    ------------------------------------------
    */

    .container{

        width:92%;

    }


    /*
    ------------------------------------------
    HEADER
    ------------------------------------------
    */

    .header .container{

        min-height:68px;

    }

    .navigation{

        top:68px;

    }


    /*
    ------------------------------------------
    HERO
    ------------------------------------------
    */

    .hero{

        min-height:600px;

    }

    .hero__overlay{

        min-height:600px;

    }

    .hero__title{

        font-size:36px;

    }

    .hero__subtitle{

        font-size:12px;

        letter-spacing:1.5px;

    }

    .hero__description{

        font-size:15px;

    }


    /*
    ------------------------------------------
    PRESENTATION
    ------------------------------------------
    */

    .presentation{

        padding:60px 0;

    }

    .presentation-image img{

        height:380px;

    }


    /*
    ------------------------------------------
    ROOMS
    ------------------------------------------
    */

    .rooms{

        padding:60px 0;

    }

    .room-card img{

        height:220px;

    }

    .room-title{

        font-size:24px;

    }

    .room-price{

        font-size:21px;

    }


    /*
    ------------------------------------------
    TESTIMONIALS
    ------------------------------------------
    */

    .testimonials{

        padding:60px 0;

    }


    /*
    ------------------------------------------
    CTA
    ------------------------------------------
    */

    .cta-title{

        font-size:29px;

    }

    .cta-text{

        font-size:15px;

    }

}

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


/*==================================================
    DESKTOP
==================================================*/

.sidebar-toggle,
.sidebar-close,
.sidebar-overlay{

    display:none;

}


/*==================================================
    TABLET
    992px
==================================================*/

@media (max-width: 992px){

    /*
    ------------------------------------------
    SIDEBAR
    ------------------------------------------
    */

    .sidebar{

        width:230px;

        padding:25px 18px;

    }

    .main-content{

        margin-left:230px;

        width:calc(100% - 230px);

    }


    /*
    ------------------------------------------
    TOPBAR
    ------------------------------------------
    */

    .topbar{

        padding:0 25px;

    }

    .search-box{

        width:220px;

    }

    .topbar-right{

        gap:15px;

    }

    .user-box div{

        display:none;

    }


    /*
    ------------------------------------------
    DASHBOARD CONTENT
    ------------------------------------------
    */

    .dashboard-content{

        padding:25px;

    }

}


/*==================================================
    MOBILE
    768px
==================================================*/

@media (max-width:768px){

    /*
    ------------------------------------------
    DASHBOARD
    ------------------------------------------
    */

    .dashboard{

        display:block;

        height:auto;

        min-height:100vh;

        overflow:visible;

    }


    /*
    ------------------------------------------
    SIDEBAR
    ------------------------------------------
    */

    .sidebar{

        position:fixed;

        top:0;

        left:0;

        width:270px;

        height:100vh;

        padding:25px 20px;

        transform:translateX(-100%);

        transition:transform .3s ease;

        z-index:2000;

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

    }


    .sidebar.active{

        transform:translateX(0);

    }


    /*
    ------------------------------------------
    SIDEBAR CLOSE
    ------------------------------------------
    */

    .sidebar-close{

        position:absolute;

        top:20px;

        right:18px;

        width:38px;

        height:38px;

        border:none;

        border-radius:8px;

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

        color:#fff;

        display:flex;

        align-items:center;

        justify-content:center;

        font-size:18px;

        cursor:pointer;

    }


    .sidebar-close:hover{

        background:var(--gold);

    }


    /*
    ------------------------------------------
    OVERLAY
    ------------------------------------------
    */

    .sidebar-overlay{

        position:fixed;

        inset:0;

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

        z-index:1500;

        opacity:0;

        visibility:hidden;

        transition:.3s ease;

    }


    .sidebar-overlay.active{

        opacity:1;

        visibility:visible;

    }


    /*
    ------------------------------------------
    MAIN CONTENT
    ------------------------------------------
    */

    .main-content{

        margin-left:0;

        width:100%;

        height:auto;

        min-height:100vh;

        overflow:visible;

    }


    /*
    ------------------------------------------
    TOPBAR
    ------------------------------------------
    */

    .topbar{

        position:sticky;

        top:0;

        height:70px;

        padding:0 18px;

        gap:15px;

        z-index:1000;

    }


    /*
    ------------------------------------------
    MENU BUTTON
    ------------------------------------------
    */

    .sidebar-toggle{

        width:42px;

        height:42px;

        border:none;

        border-radius:9px;

        background:#f5f5f5;

        color:#333;

        display:flex;

        align-items:center;

        justify-content:center;

        font-size:19px;

        flex-shrink:0;

        cursor:pointer;

    }


    .sidebar-toggle:hover{

        background:var(--gold);

        color:#fff;

    }


    /*
    ------------------------------------------
    TOPBAR LEFT
    ------------------------------------------
    */

    .topbar-left{

        flex:1;

        min-width:0;

    }

    .page-title{

        font-size:20px;

    }

    .topbar-left h2{

        font-size:18px;

        white-space:nowrap;

        overflow:hidden;

        text-overflow:ellipsis;

    }

    .topbar-left span{

        font-size:11px;

    }


    /*
    ------------------------------------------
    TOPBAR RIGHT
    ------------------------------------------
    */

    .topbar-right{

        gap:10px;

        flex-shrink:0;

    }


    /*
    ------------------------------------------
    SEARCH
    ------------------------------------------
    */

    .topbar-right .search-box{

        display:none;

    }


    /*
    ------------------------------------------
    NOTIFICATION
    ------------------------------------------
    */

    .notification{

        width:42px;

        height:42px;

        flex-shrink:0;

    }


    /*
    ------------------------------------------
    USER
    ------------------------------------------
    */

    .user-box{

        gap:0;

    }

    .user-box img{

        width:42px;

        height:42px;

        border-width:2px;

    }

    .user-box div{

        display:none;

    }


    /*
    ------------------------------------------
    DASHBOARD CONTENT
    ------------------------------------------
    */

    .dashboard-content{

        padding:20px;

    }


    .dashboard-page{

        padding:0;

    }


    /*
    ------------------------------------------
    PAGE HEADER
    ------------------------------------------
    */

    .page-header{

        flex-direction:column;

        align-items:flex-start;

        gap:15px;

    }

    .page-header h1{

        font-size:24px;

    }

    .page-header p{

        font-size:13px;

    }


    /*
    ------------------------------------------
    TABLE HEADER
    ------------------------------------------
    */

    .table-header{

        flex-direction:column;

        align-items:stretch;

        gap:15px;

    }


    /*
    ------------------------------------------
    TABLE CARD
    ------------------------------------------
    */

    .table-card{

        padding:18px;

    }


    /*
    ------------------------------------------
    TABLE ACTIONS
    ------------------------------------------
    */

    .table-actions{

        flex-direction:column;

        align-items:stretch;

    }


    #filterStatut{

        width:100%;

    }


    /*
    ------------------------------------------
    SEARCH
    ------------------------------------------
    */

    .table-header .search-box{

        width:100%;

    }


    /*
    ------------------------------------------
    FORM
    ------------------------------------------
    */

    .form-grid{

        grid-template-columns:1fr;

    }


    .form-group.full{

        grid-column:auto;

    }


    .form-actions{

        justify-content:stretch;

    }

    .form-actions .btn-add{

        width:100%;

        justify-content:center;

    }


    /*
    ------------------------------------------
    DETAILS
    ------------------------------------------
    */

    .details-grid{

        grid-template-columns:1fr;

    }


    .message-details{

        padding:20px;

    }


    .message-header{

        flex-direction:column;

        align-items:flex-start;

    }


    .message-info-grid{

        grid-template-columns:1fr;

    }


    /*
    ------------------------------------------
    NOTIFICATION DROPDOWN
    ------------------------------------------
    */

    .notification-dropdown{

        position:fixed;

        top:70px;

        right:10px;

        left:10px;

        width:auto;

        max-height:70vh;

    }

}


/*==================================================
    SMALL MOBILE
    480px
==================================================*/

@media (max-width:480px){

    /*
    ------------------------------------------
    TOPBAR
    ------------------------------------------
    */

    .topbar{

        padding:0 12px;

    }


    .sidebar-toggle{

        width:40px;

        height:40px;

    }


    .notification{

        width:40px;

        height:40px;

    }


    .user-box img{

        width:38px;

        height:38px;

    }


    /*
    ------------------------------------------
    CONTENT
    ------------------------------------------
    */

    .dashboard-content{

        padding:15px;

    }


    /*
    ------------------------------------------
    TABLE CARD
    ------------------------------------------
    */

    .table-card{

        padding:15px;

        border-radius:10px;

    }


    /*
    ------------------------------------------
    PAGE HEADER
    ------------------------------------------
    */

    .page-header h1{

        font-size:21px;

    }


    /*
    ------------------------------------------
    BUTTON
    ------------------------------------------
    */

    .btn-add{

        width:100%;

        justify-content:center;

    }


    /*
    ------------------------------------------
    STAT CARDS
    ------------------------------------------
    */

    .card{

        padding:20px;

    }

    .card-icon{

        width:55px;

        height:55px;

        font-size:22px;

    }

    .card h2{

        font-size:26px;

    }


    /*
    ------------------------------------------
    CHART
    ------------------------------------------
    */

    .chart-container{

        height:280px;

    }


    /*
    ------------------------------------------
    NOTIFICATION
    ------------------------------------------
    */

    .notification-dropdown{

        left:8px;

        right:8px;

    }

}

.mobile-login{
    display:none;
}

@media(max-width:768px){

    .mobile-login{
        display:block;
    }

}

@media(max-width:768px){

    .hero{
        padding-top:90px;
    }

}

/* ==========================================
   RESPONSIVE - APERÇU RÉSERVATIONS
========================================== */

.dashboard-grid {
    width: 100%;
    min-width: 0;
}

.dashboard-card,
.dashboard-grid .table-card {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* ==========================================
   GRAPHIQUE
========================================== */

.dashboard-card {
    overflow: hidden;
}

.dashboard-card > div[style] {
    width: 100% !important;
    max-width: 100%;
}


/* ==========================================
   RÉSERVATIONS RÉCENTES
========================================== */

.dashboard-grid .table-card {
    overflow: hidden;
}

.dashboard-grid .table-responsive {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
}


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

@media (max-width: 768px) {

    .dashboard-grid {
        width: 100%;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 15px;
    }

    .dashboard-card,
    .dashboard-grid .table-card {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        padding: 16px;
        border-radius: 10px;
        box-sizing: border-box;
    }

    /* Titre */
    .card-header h3,
    .table-header h3 {
        font-size: 16px;
    }

    .card-header p,
    .table-header p {
        font-size: 12px;
    }

    /* Graph */
    .dashboard-card > div[style] {
        height: 240px !important;
        width: 100% !important;
    }

    /* Tableau */
    .dashboard-grid .table-responsive {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
    }

    .dashboard-grid .data-table {
        min-width: 520px;
    }

    .dashboard-grid .data-table th,
    .dashboard-grid .data-table td {
        padding: 9px 8px;
        font-size: 11px;
    }

    .dashboard-grid .status {
        min-width: 75px;
        padding: 5px 7px;
        font-size: 9px;
    }

    .dashboard-grid .client-name {
        max-width: 120px;
    }
}


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

@media (max-width: 480px) {

    .dashboard-page {
        padding: 12px;
    }

    .dashboard-grid {
        gap: 12px;
    }

    .dashboard-card,
    .dashboard-grid .table-card {
        padding: 13px;
        border-radius: 9px;
    }

    .card-header h3,
    .table-header h3 {
        font-size: 15px;
    }

    .card-header p,
    .table-header p {
        font-size: 11px;
    }

    /* Graph plus petit */
    .dashboard-card > div[style] {
        height: 210px !important;
    }

    /* Tableau plus compact */
    .dashboard-grid .data-table {
        min-width: 480px;
    }

    .dashboard-grid .data-table th,
    .dashboard-grid .data-table td {
        padding: 8px 6px;
        font-size: 10px;
    }

    .dashboard-grid .status {
        min-width: 65px;
        padding: 4px 6px;
        font-size: 8px;
    }

    .dashboard-grid .client-name {
        max-width: 100px;
    }

}