:root {
  --primary-color: #0a0a23; /* Noir profond */
  --secondary-color: #d4af37; /* Or */
  --accent-color: #f8f9fa; /* Gris clair Bootstrap */
  --text-color: #212529;
  --light-text: #f8f9fa;
  --dark-text: #212529;
  --overlay: rgba(0, 0, 0, 0.7);
  --transition: all 0.3s ease;
}

/* Header amélioré avec Bootstrap */
.navbar {
  padding: 1rem 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  background-color: var(--primary-color) !important;
}

.navbar-brand {
  font-family: 'Playfair Display', serif;
  color: var(--secondary-color) !important;
}

.nav-link {
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.9rem;
  position: relative;
  padding: 0.5rem 1rem !important;
}

.nav-link:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 1rem;
  width: 0;
  height: 2px;
  background: var(--secondary-color);
  transition: var(--transition);
}

.nav-link:hover:after {
  width: calc(100% - 2rem);
}

/* Boutons améliorés */
.btn {
  border-radius: 0;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 0.8rem 1.8rem;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
  border: none;
}

.btn-primary {
  background-color: var(--secondary-color);
  color: var(--primary-color);
}

.btn-primary:hover {
  background-color: var(--primary-color);
  color: var(--secondary-color);
  border: 1px solid var(--secondary-color);
}

/* Cartes de service luxueuses */
.service-card {
  border: none;
  border-top: 3px solid var(--secondary-color);
  transition: var(--transition);
  height: 100%;
}

.service-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

/* Section Hero améliorée */
.hero {
  background: linear-gradient(var(--overlay), var(--overlay)), url('../images/bg.jpg') no-repeat center center/cover;
  height: 100vh;
  display: flex;
  align-items: center;
  margin-top: 56px; /* Hauteur de la navbar */
}

.hero h1 {
  font-size: 3.5rem;
  color: white;
}

.hero p {
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.9);
  max-width: 600px;
}

/* Tableaux admin */
.table {
  --bs-table-bg: transparent;
}

.table th {
  background: var(--primary-color);
  color: white;
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

/* Badges de statut */
.badge {
  padding: 0.5em 0.75em;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.bg-pending {
  background-color: #fff3cd;
  color: #856404;
}

.bg-confirmed {
  background-color: #d4edda;
  color: #155724;
}

.bg-cancelled {
  background-color: #f8d7da;
  color: #721c24;
}

/* Footer luxueux */
footer {
  background: var(--primary-color);
  color: var(--light-text);
  padding: 3rem 0;
}

footer a {
  color: var(--secondary-color);
}

/* Override Bootstrap pour le thème luxe */
.form-control, .form-select {
  border-radius: 0;
  padding: 0.8rem;
}

.form-control:focus, .form-select:focus {
  border-color: var(--secondary-color);
  box-shadow: 0 0 0 0.25rem rgba(212, 175, 55, 0.25);
}

/* Admin sidebar */
.admin-sidebar {
  background: var(--primary-color);
  color: white;
  min-height: calc(100vh - 56px);
}

.admin-sidebar .nav-link {
  color: white;
  text-transform: none;
}

.admin-sidebar .nav-link:hover {
  color: var(--secondary-color);
}

.admin-sidebar .active .nav-link {
  color: var(--secondary-color);
  border-left: 3px solid var(--secondary-color);
}

/* Responsive adjustments */
@media (max-width: 992px) {
  .hero h1 {
    font-size: 2.5rem;
  }
  
  .admin-sidebar {
    min-height: auto;
  }
}
/* Custom styles for the admin layout */
.admin-layout {
    display: flex;
    min-height: 100vh; /* Ensure content pushes footer down */
    /* Prevent body scrolling when sidebar is open on mobile */
    overflow-x: hidden; /* Prevent horizontal scrollbar issues */
}

/* Style for the sidebar itself */
.admin-sidebar {
    transition: transform 0.3s ease-in-out; /* Smooth slide animation */
    /* On larger screens, the sidebar is always visible */
    transform: translateX(0); 
    z-index: 1050; /* Ensure it's above other content when open */
    flex-shrink: 0; /* Prevent it from shrinking */
}

/* Style for the main content area */
.admin-main {
    flex-grow: 1; /* Main content takes up remaining space */
    margin-left: 280px; /* Space for the sidebar on larger screens */
    /* Ensure padding is consistent, adjust as needed */
    padding-left: 1rem; 
    padding-right: 1rem;
    transition: margin-left 0.3s ease-in-out; /* Smooth transition for main content margin */
}

/* Responsive adjustments for smaller screens (less than lg breakpoint, typically < 992px) */
@media (max-width: 991.98px) {
    .admin-sidebar {
        /* By default, hide the sidebar off-screen on smaller devices */
        transform: translateX(-280px); /* Move it completely off-screen to the left (sidebar width) */
        position: fixed; /* Keep it fixed */
        height: 100vh; /* Make it full height */
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); /* Add a subtle shadow for depth */
    }

    .admin-sidebar.show {
        /* When 'show' class is added (by JS), bring it into view */
        transform: translateX(0);
    }

    .admin-main {
        margin-left: 0; /* No margin needed for sidebar on smaller screens */
    }

    /* Styles for the hamburger button in the dashboard header on mobile */
    .admin-main .d-lg-none {
        display: block !important; /* Force show the button on mobile */
    }

    /* Overlay for when sidebar is open on mobile */
    .sidebar-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5); /* Dark semi-transparent overlay */
        z-index: 1040; /* Below sidebar, above content */
        display: none; /* Hidden by default */
        transition: opacity 0.3s ease-in-out; /* Smooth fade effect */
        opacity: 0;
    }
    .sidebar-overlay.show {
        display: block; /* Show when sidebar is open */
        opacity: 1;
    }

    /* Prevent body scroll when sidebar is open on mobile */
    body.sidebar-open {
        overflow: hidden; /* Disable scrolling on the main body */
    }
}


/* General Styles for Stat Cards */
.stat-card {
    border-radius: 0.5rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

.stat-card .card-body {
    padding: 1.5rem;
}

.stat-card .h6 {
    color: #6c757d; /* Muted text for titles */
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.stat-card .h2 {
    font-weight: 700;
    color: #343a40; /* Darker text for values */
}

.stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    font-size: 1.8rem;
    opacity: 0.8;
}

/* Specific colors for stat-icons and borders */
.border-primary { border-color: #007bff !important; }
.bg-primary-light { background-color: rgba(0, 123, 255, 0.1); }
.text-primary { color: #007bff !important; }

.border-warning { border-color: #ffc107 !important; }
.bg-warning-light { background-color: rgba(255, 193, 7, 0.1); }
.text-warning { color: #ffc107 !important; }

.border-success { border-color: #28a745 !important; }
.bg-success-light { background-color: rgba(40, 167, 69, 0.1); }
.text-success { color: #28a745 !important; }

.border-info { border-color: #17a2b8 !important; }
.bg-info-light { background-color: rgba(23, 162, 184, 0.1); }
.text-info { color: #17a2b8 !important; }



.badge {
    text-transform: capitalize; /* Make status badges look nicer */
}

.text-gold {
    color: #FFD700 !important; /* Example gold color */
}