/* --- VARIABLES ET COULEURS GLOBALES --- */
:root {
    --webbooker-header: #35393e;    /* Anthracite Moderne */
    --webbooker-accent: #333;       /* SmartAdmin */
    --webbooker-light-bg: #f1f3f5;  /* Gris très clair pour les fonds */
}

/* --- 1. DATATABLES : EN-TÊTE ET FILTRES --- */

/* Style du Header (thead) */
.table thead.bg-dark-header,
.mod-skin-light .table thead.bg-dark-header,
#dt-favorites thead, /* Pour ta gestion de favoris */
#dt-clients thead {    /* Pour ta gestion de clients */
    background-color: var(--webbooker-header) !important;
    color: #ffffff !important;
    border-bottom: 2px solid rgba(0,0,0,0.2) !important;
}

/* Inputs de filtres dans le header */
thead input {
    width: 100%;
    padding: 4px 8px;
    box-sizing: border-box;
    border-radius: 4px;
    border: 1px solid #dee2e6;
    font-size: 0.85em;
    font-weight: normal;
    color: #333;
    background-color: rgba(255,255,255,0.9);
}

thead input:focus {
    outline: none;
    border-color: var(--webbooker-accent);
    background-color: #fff;
}

/* Boutons de détails (Ouverture/Fermeture) */
td.details-control {
    background: url('https://www.datatables.net/examples/resources/details_open.png') no-repeat center center;
    cursor: pointer;
    width: 30px;
}
tr.shown td.details-control {
    background: url('https://www.datatables.net/examples/resources/details_close.png') no-repeat center center;
}

/* Ligne d'extension (Slider/Carte) */
.slider { 
    background-color: var(--webbooker-light-bg); 
    border-left: 5px solid var(--webbooker-header);
    padding: 15px;
}

/* --- 2. NAVIGATION ET ONGLETS (NAV-PILLS) --- */

.nav-pills .nav-link.active, 
.nav-pills .show > .nav-link {
    background-color: var(--webbooker-header) !important;
    color: #fff !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.nav-pills .nav-link {
    color: var(--webbooker-header);
    background-color: #fff;
    border: 1px solid #dee2e6;
    margin: 0 2px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.nav-pills .nav-link:hover:not(.active) {
    background-color: #f8f9fa;
    border-color: var(--webbooker-accent);
    color: var(--webbooker-accent);
}

/* --- 3. ÉLÉMENTS D'INTERFACE ET MODAUX --- */

/* Titres de section (Modal & Forms) */
.section-title {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--webbooker-header);
    border-bottom: 1px solid #dee2e6;
    padding-bottom: 8px;
    margin-top: 20px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
}

.section-title i {
    margin-right: 10px;
    color: var(--webbooker-accent);
    font-size: 1.1rem;
}

/* Boutons d'action circulaires */
.btn-icon.rounded-circle {
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: all 0.2s;
}

.btn-icon.rounded-circle:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

/* Focus sur les champs de formulaire */
.form-control:focus {
    border-color: var(--webbooker-accent);
    box-shadow: 0 0 0 0.2rem rgba(136, 106, 181, 0.15);
}

/* Utilitaires */
.cursor-pointer { cursor: pointer; }

/* Adaptation Skin Dark */
.mod-skin-dark .section-title {
    color: #a5abb1;
    border-bottom-color: rgba(255,255,255,0.1);
}

.mod-skin-dark .nav-pills .nav-link {
    background-color: #2c3136;
    border-color: #454d55;
    color: #fff;
}

/* Force le texte en blanc pour le code à l'intérieur des badges */
.variable-badge code {
    background-color: transparent !important;
    color: #fff !important;
    padding: 0;
    font-size: 100%;
}

/* Optionnel : changer la couleur au survol pour montrer que c'est cliquable */
.variable-badge:hover {
    background-color: var(--webbooker-header) !important;
    cursor: pointer;
}