/* =========================
   ELITEBURO - GLOBAL THEME STYLE
   THEME : Orange / Noir / Or / Crème / Gris
   ========================= */

:root {
    --orange: #FF8000;
    --dark: #000000;
    --gold: #C9A02C;
    --cream: #FAFAF7;

    --gray: #6B7280;
    --gray-light: #D1D5DB;
    --gray-bg: #F3F4F6;

    --border: rgba(0,0,0,.12);
    --shadow: 0 10px 30px rgba(0,0,0,.08);
    --shadow-hover: 0 20px 50px rgba(0,0,0,.15);
}




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

* {
    margin:0;
    padding:0;
    box-sizing:border-box;
}


body {
    font-family:"Inter","DM Sans",Arial,sans-serif;
    background:var(--cream);
    color:var(--dark);
}


/* =========================
   TYPOGRAPHIE
   ========================= */

h1,h2,h3,h4 {
    font-family:"Playfair Display",Georgia,serif;
    font-weight:700;
    color:var(--dark);
}


code,
.kpi-value,
.price,
.amount,
[data-number],
[data-price] {
    font-family:"Roboto Mono","DM Mono",monospace;
}


a {
    text-decoration:none;
    transition:.3s ease;
}


a:hover {
    opacity:.9;
}



/* =========================
   NAVBAR
   ========================= */

.navbar {

    background:rgba(250,250,247,.90);
    border-bottom:1px solid rgba(26,26,26,.12);

    padding:15px 25px;

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

    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);

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


.navbar a {

    margin-left:15px;
    color:var(--gray);

    font-weight:600;

}


.navbar a:hover {

    color:var(--orange);

}


.navbar .text-green-600 {

    color:var(--gold)!important;

}



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


.sidebar {

    width:260px;
    min-height:100vh;

    background:var(--cream);

    border-right:1px solid var(--gray-light);

    padding:20px;

}



.sidebar ul {

    list-style:none;

}


.sidebar ul li {

    margin:12px 0;

}



.sidebar ul li a {

    color:var(--gray);

    padding:10px;

    display:block;

    border-radius:8px;

    border-left:3px solid transparent;

    transition:.3s ease;

}



.sidebar ul li a:hover {

    background:rgba(246,127,42,.10);

    color:var(--dark);

    border-left:3px solid var(--orange);

    padding-left:15px;

}



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


.admin-sidebar {

    width:260px;

    min-height:100vh;

    background:var(--dark);

    color:var(--cream);

    padding:20px;

}



.admin-sidebar a {

    color:var(--gray-light);

    display:block;

    padding:10px;

    border-radius:8px;

    border-left:3px solid transparent;

    transition:.3s ease;

}



.admin-sidebar a:hover {

    background:rgba(246,127,42,.12);

    color:var(--orange);

    border-left:3px solid var(--orange);

    padding-left:17px;

}




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


.nav-blur {

    backdrop-filter:blur(10px);

    background:rgba(250,250,247,.85);

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

}



.header {

    background:rgba(250,250,247,.90);

    color:var(--dark);

    padding:15px 25px;

    box-shadow:0 5px 20px rgba(26,26,26,.06);

    display:flex;

    justify-content:space-between;

    align-items:center;

}




/* =========================
 CARDS
 ========================= */


.card {

    background:#ffffff;

    padding:20px;

    border-radius:12px;

    box-shadow:var(--shadow);

    margin-bottom:20px;

    border:1px solid rgba(26,26,26,.05);

}



.card:hover {

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

}




/* =========================
 BUTTONS
 ========================= */


.btn {

    display:inline-block;

    padding:10px 16px;

    border-radius:8px;

    font-weight:600;

    cursor:pointer;

    border:none;

    transition:.3s ease;

}



.btn-primary {

    background:var(--orange);

    color:var(--cream);

}



.btn-primary:hover {

    background:var(--gold);

}



.btn-success {

    background:var(--gold);

    color:var(--dark);

}



.btn-danger {

    background:var(--orange);

    color:var(--cream);

}



.btn-danger:hover {

    background:var(--dark);

}




/* =========================
 FORMS
 ========================= */


input,
select,
textarea {

    width:100%;

    padding:10px;

    border:1px solid var(--gray-light);

    border-radius:8px;

    margin-top:5px;

    background:#ffffff;

    color:var(--dark);

}



input:focus,
select:focus,
textarea:focus {

    outline:none;

    border-color:var(--orange);

    box-shadow:0 0 0 2px rgba(246,127,42,.20);

}




/* =========================
 ALERTS
 ========================= */


.alert {

    padding:12px;

    border-radius:8px;

    margin-bottom:10px;

}



.alert-success {

    background:#FAFAF7;

    color:var(--dark);

    border-left:4px solid var(--gold);

}



.alert-error {

    background:#FAFAF7;

    color:var(--dark);

    border-left:4px solid var(--orange);

}




/* =========================
 UTILITIES
 ========================= */


.container {

    max-width:1280px;
    margin-left:auto;
    margin-right:auto;
    padding:20px;
    width:100%;

}


.text-center {

    text-align:center;

}


.mt-20 {

    margin-top:20px;

}



.flex {

    display:flex;

}



.space-between {

    justify-content:space-between;

}




/* =========================
 NAV LINKS ANIMATION
 ========================= */


.nav-link {

    position:relative;

    transition:.3s ease;

}



.nav-link:hover {

    color:var(--orange);

}



.nav-link::after {

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:var(--gold);

    transition:.3s ease;

}



.nav-link:hover::after {

    width:100%;

}



 .nav-blur {

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

 }


 /* =========================
    RESPONSIVE - NAVBAR
    ========================= */

 @media (max-width: 1023px) {
     .nav-blur {
         padding: 10px 15px;
     }
 }


 @media (max-width: 1279px) {
     .nav-link {
         font-size: 0.8rem;
     }
 }


 /* =========================
    RESPONSIVE - FOOTER
    ========================= */

 @media (max-width: 768px) {
     .footer-container {
         grid-template-columns: 1fr;
         gap: 30px;
         padding: 0 15px 40px;
     }

     .footer-brand {
         grid-column: 1;
         text-align: center;
     }

     .footer-title::after {
         left: 50%;
         transform: translateX(-50%);
     }

     .footer-social {
         justify-content: center;
     }

     .footer-bottom-content {
         flex-direction: column;
         text-align: center;
         gap: 10px;
     }

     .footer-bottom-links {
         justify-content: center;
         flex-wrap: wrap;
         gap: 10px;
     }

     .contact-card {
         min-width: auto;
     }
 }


 @media (max-width: 480px) {
     .footer {
         padding-top: 50px;
         margin-top: 60px;
     }

     .footer-container {
         gap: 25px;
         padding: 0 10px 30px;
     }

     .footer-title {
         font-size: 18px;
         margin-bottom: 15px;
     }

     .footer-link {
         font-size: 14px;
     }

     .footer-copyright {
         font-size: 12px;
     }

     .footer-bottom-link {
         font-size: 12px;
     }
 }


 /* =========================
    RESPONSIVE - GENERAL
    ========================= */

 @media (max-width: 768px) {
     .container {
         padding: 15px;
     }

     h1 {
         font-size: 1.75rem;
     }

     h2 {
         font-size: 1.5rem;
     }

     h3 {
         font-size: 1.25rem;
     }
 }


 @media (max-width: 480px) {
     .container {
         padding: 10px;
     }

     h1 {
         font-size: 1.5rem;
     }

     h2 {
         font-size: 1.25rem;
     }

     h3 {
         font-size: 1.1rem;
     }
 }