/*====================================================
KINGDOM MARKET
DASHBORD.CSS
DASHBOARD BOUTIQUE VENDEUR
====================================================*/


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

*{

    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:"Segoe UI",Arial,sans-serif;

}


body{

    background:#eaeded;

    color:#111;

}



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


header{


    width:100%;


    background:#131921;


    color:white;


    padding:12px 30px;


    display:flex;


    align-items:center;


    justify-content:space-between;


    gap:20px;


    position:sticky;


    top:0;


    z-index:9999;


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


}



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


.logo-container{


    display:flex;


    align-items:center;

    justify-content:center;

    gap:12px;


}



.logo{


    width:56px;


    height:56px;


    object-fit:contain;

    object-position:center;


    background:white;


    border-radius:50%;


    padding:5px;

    display:block;

    margin:auto;

    box-shadow:0 2px 6px rgba(0,0,0,.2);


}



/*==============================
TITRE
==============================*/


header h1{


    color:white;


    font-size:28px;


}



header p{


    color:#ddd;


    margin-top:5px;


}
/*=============================
MENU PLEIN ECRAN
=============================*/

.header-actions{

    display:flex;
    align-items:center;
    gap:15px;

}


.dropbtn{

    background:#232f3e;

    color:white;

    border:none;

    padding:12px 18px;

    cursor:pointer;

    font-size:15px;

    border-radius:6px;

}



.dropdown{

    position:static;

}



.dropdown-content{


    display:none;


    position:fixed;


    top:0;


    left:0;


    width:100%;


    height:100vh;


    background:white;


    z-index:99999;


    padding-top:90px;


    overflow-y:auto;


}



/* Quand le menu est ouvert */

.dropdown-content.show{


    display:block;


}



/* liens du menu */


.dropdown-content a{


    display:block;


    width:90%;


    margin:15px auto;


    padding:18px;


    background:#eaeded;


    color:#111;


    text-decoration:none;


    border-radius:10px;


    font-size:18px;


    font-weight:600;


    transition:.3s;


}



.dropdown-content a:hover{


    background:#131921;


    color:white;


}



/* bouton fermeture optionnel */

.close-menu{


    position:absolute;


    top:20px;


    right:25px;


    font-size:35px;


    cursor:pointer;


    color:#131921;


}
/*==============================
BANNIERE
==============================*/


.banner{


    width:95%;


    max-width:1400px;


    margin:30px auto;


    background:linear-gradient(135deg,#131921,#232f3e);


    color:white;


    padding:35px;


    border-radius:12px;


    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    flex-wrap:wrap;


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


}



.banner-text h2{


    font-size:28px;


}


.banner-text p{

    color:#c8ccd2;

    font-size:14px;

    margin-top:6px;

}


.recalculer-btn{

    display:inline-flex;

    align-items:center;

    gap:8px;

    background:linear-gradient(135deg,#febd69,#f3a847);

    color:#131921;

    border:none;

    padding:13px 22px;

    border-radius:25px;

    font-weight:700;

    font-size:14px;

    cursor:pointer;

    transition:.25s;

    box-shadow:0 6px 16px rgba(254,189,105,.4);

}

.recalculer-btn:hover{

    transform:translateY(-2px);

    filter:brightness(1.05);

}

.recalculer-btn:disabled{

    opacity:.7;

    cursor:not-allowed;

    transform:none;

}


.last-update{

    width:95%;

    max-width:1200px;

    margin:-14px auto 10px;

    text-align:right;

    font-size:12.5px;

    color:#8a8f98;

}



/*==============================
STATISTIQUES
==============================*/


.stats{


    width:95%;


    max-width:1200px;


    margin:25px auto;


    display:grid;


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


    gap:20px;


}



.card{


    background:white;


    padding:24px 18px;


    border-radius:12px;


    text-align:center;


    box-shadow:0 3px 12px rgba(0,0,0,.15);


    transition:.3s;


}


.card-alert p{

    color:#e5484d;

}



.card:hover{


    transform:translateY(-8px);


}



.card h3{


    color:#131921;


    font-size:22px;


    margin-bottom:15px;


}



.card p{


    font-size:35px;


    font-weight:bold;


    color:#B12704;


}



/*==============================
ZONE PRODUITS
==============================*/


.dashboard-box{


    width:95%;


    max-width:1400px;


    margin:35px auto;


    background:white;


    padding:30px;


    border-radius:12px;


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


}



.dashboard-box h2{


    font-size:28px;


    margin-bottom:25px;


    border-bottom:3px solid #febd69;


    padding-bottom:10px;


}



/*==============================
LISTE PRODUITS
==============================*/


#productsContainer{


    display:grid;


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


    gap:25px;


}



/*==============================
CARTE PRODUIT DASHBOARD
==============================*/


.product-card{


    background:white;


    border:1px solid #ddd;


    border-radius:10px;


    overflow:hidden;


    transition:.3s;


}



.product-card:hover{


    transform:translateY(-7px);


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


}



.product-card img{


    width:100%;


    height:220px;


    object-fit:contain;


}



/*==============================
INFORMATIONS PRODUIT
==============================*/


.product-info{


    padding:15px;


}



.product-info h3{


    font-size:19px;


}



.product-info p{


    margin-top:8px;


}



/*==============================
BOITE VIDE
==============================*/


.empty-box{


    width:100%;


    background:#f3f3f3;


    padding:40px;


    text-align:center;


    border-radius:10px;


    color:#666;


    font-size:18px;


}



/*==============================
FOOTER
==============================*/


footer{


    margin-top:50px;


    background:#131921;


    color:white;


    text-align:center;


    padding:30px;


}



/*==============================
TABLETTE
==============================*/


@media(max-width:992px){


header{


    flex-wrap:wrap;


}



.stats{


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


}



.banner{

    text-align:center;

    justify-content:center;

}


}



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


@media(max-width:768px){


header{


    flex-direction:column;


    padding:15px;


}



.logo{


    width:55px;


    height:55px;


}



header h1{


    font-size:22px;


    text-align:center;


}



header p{


    text-align:center;


}



.banner{


    padding:25px;


}



.banner h2{


    font-size:23px;


}



.stats{


    width:92%;


}



.card p{


    font-size:28px;


}



.dashboard-box{


    padding:20px;


}



.dashboard-box h2{


    font-size:22px;


}



#productsContainer{


    grid-template-columns:1fr;


}



.dropdown-content{


    width:200px;


}



}



@media(max-width:400px){


.card{


    padding:20px;


}



.empty-box{


    padding:25px;


    font-size:15px;


}


}
.edit-modal{

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

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

display:flex;

justify-content:center;

align-items:center;

z-index:9999;

}

.edit-box{

background:white;

padding:25px;

border-radius:12px;

width:400px;

max-width:90%;

}

.edit-box input,
.edit-box textarea,
.edit-box select{

width:100%;

margin:10px 0;

padding:10px;

}

.product-actions{

display:flex;

gap:10px;

margin-top:15px;

}

.edit-btn{

background:#007bff;

color:white;

border:none;

padding:10px;

border-radius:6px;

cursor:pointer;

}

.delete-btn{

background:#dc3545;

color:white;

border:none;

padding:10px;

border-radius:6px;

cursor:pointer;

}
/* ===========================
FENÊTRE MODIFICATION
=========================== */

.edit-modal{

    display:none;

    position:fixed;

    top:0;

    left:0;

    width:100%;

    height:100%;

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

    justify-content:center;

    align-items:center;

    z-index:99999;

}

.edit-box{

    width:500px;

    max-width:90%;

    background:white;

    border-radius:15px;

    padding:25px;

    box-shadow:0 15px 40px rgba(0,0,0,.3);

    animation:popup .3s ease;

}

@keyframes popup{

    from{

        transform:scale(.8);

        opacity:0;

    }

    to{

        transform:scale(1);

        opacity:1;

    }

}

.edit-box h2{

    text-align:center;

    margin-bottom:20px;

}

.edit-box input,
.edit-box textarea,
.edit-box select{

    width:100%;

    padding:12px;

    margin:10px 0;

    border:1px solid #ccc;

    border-radius:8px;

    font-size:16px;

}

.edit-box textarea{

    resize:none;

    height:120px;

}

.edit-buttons{

    display:flex;

    justify-content:space-between;

    margin-top:20px;

}

.save-btn{

    background:#28a745;

    color:white;

    border:none;

    padding:12px 25px;

    border-radius:8px;

    cursor:pointer;

}

.cancel-btn{

    background:#dc3545;

    color:white;

    border:none;

    padding:12px 25px;

    border-radius:8px;

    cursor:pointer;

}

/* ===========================
   Bouton Help Kingdom Market
=========================== */

.help-button{
    position:fixed;
    bottom:25px;
    left:25px;

    width:65px;
    height:65px;

    background:linear-gradient(135deg,#180117,#ffb300);

    color:white;

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

    border-radius:50%;

    font-size:30px;

    text-decoration:none;

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

    z-index:9999;

    transition:.3s;
}

.help-button:hover{

    transform:scale(1.1);

    box-shadow:0 15px 35px rgba(255,152,0,.5);

}

.help-button::before{

    content:"";

    position:absolute;

    width:100%;
    height:100%;

    border-radius:50%;

    background:rgba(255,152,0,.4);

    animation:pulse 2s infinite;

}

.help-button i{

    position:relative;

    z-index:2;

}

@keyframes pulse{

    0%{
        transform:scale(1);
        opacity:.8;
    }

    70%{
        transform:scale(1.5);
        opacity:0;
    }

    100%{
        transform:scale(1.5);
        opacity:0;
    }

}

/* Mobile */

@media(max-width:768px){

.help-button{

width:58px;
height:58px;
font-size:26px;
bottom:20px;
left:20px;

}

}
/* ===========================
   TYPE D'ANNONCE (Produit / Service)
   -> Même switch que Formulaireboutique.html,
      utilisé dans la fenêtre de modification.
=========================== */

.type-annonce-switch{
    display:flex;
    gap:10px;
    margin:0 0 10px;
}

.type-annonce-btn{
    flex:1;
    padding:12px 10px;
    border:2px solid #febd69;
    border-radius:25px;
    background:white;
    color:#131921;
    font-weight:bold;
    font-size:14.5px;
    cursor:pointer;
    transition:.2s;
}

.type-annonce-btn.active{
    background:#febd69;
    color:#131921;
}

.type-annonce-btn:not(.active):hover{
    background:#fff3e0;
}