/* style_v2.css - Design Glassmorphism / Inter / Lucide */

/* -------------------------------------------------------------------- */
/* 1. Base, Typographie et Couleurs (Variables et Dégradé de Fond) */
/* -------------------------------------------------------------------- */
:root {
    --primary-color: #3b82f6; /* Bleu Vif */
    --primary-hover: #2563eb;
    
    /* GLASSMORHPISM SURFACE COLORS */
    --glass-surface-light: rgba(255, 255, 255, 1); /* Surface semi-transparente claire */
    --glass-border-light: rgba(255, 255, 255, 0.3); /* Bordure légère */
    
    --background-light: #fdfdfd; /* Arrière-plan presque blanc */
    --text-light: #212529;
    
    --shadow-base: 0 4px 20px rgba(0, 0, 0, 0.08); /* Ombre légère pour effet de flottaison */
    --border-radius-sm: 15px; /* Très petit rayon de bord */
    --border-color-subtle: #e0e0e0;
    --transition-speed: 0.25s;
    --blur-intensity: 10px; /* Intensité du flou pour le Glassmorphism */
}


body {
	background-color: RGBA(255, 255, 255, 1) !important;
	/*background: linear-gradient(160deg,rgba(255, 255, 255, 1) 70%, rgba(59, 130, 246, 0.2) 100%) !important;*/
}

.card.bg-secondary {
    --bs-bg-opacity: 1;
    background-color: RGBA(59, 130, 246, 0.15);
	background: linear-gradient(90deg,rgba(59, 130, 246, 0.75) 0%, rgba(59, 130, 246, 1) 100%)!important;
	border:none;
}
.card.shadow-sm {
    box-shadow: var(--bs-box-shadow-sm) !important;
    background: RGBA(59, 130, 246, 0.15);
	background-color: RGBA(59, 130, 246, 0.15);
	border:none;
}
nav.navbar.navbar-expand-lg.navbar-light.bg-white.shadow-sm.border-bottom, nav.navbar.navbar-expand-lg.navbar-dark.bg-primary.shadow-sm {
	background-image: url("bg.png") !important;
	background-position: center; /* Center the image */
	background-repeat: no-repeat; /* Do not repeat the image */
	background-size: cover;
	background-color: #0d6efd !important;
	/*background: linear-gradient(90deg,rgba(87, 154, 255, 1) 0%, rgba(13, 110, 253, 1) 100%) !important;*/
}
.card.bg-primary {
	background-color: #0d6efd !important;
	background: linear-gradient(90deg,rgba(87, 154, 255, 1) 0%, rgba(13, 110, 253, 1) 100%) !important;
	border:none;
}
.card.bg-light {
    --bs-bg-opacity: 1;
    background-color: rgb(241 241 241) !important;
}
i.bi.bi-h-square-fill.me-2.fs-4
{
    margin: 0px 2px 0px 0px !important;
}

a.navbar-brand.d-flex.align-items-center {
    color: #fff;
}
button.btn.btn-white, a.btn.btn-white {
	background-color: #fff !important;
	color: #0d6efd;
}
.progress, .progress-stacked {
	border-radius: 25px !important;
}


/* Dark Mode Adaptation */
[data-bs-theme="dark"] {
    --primary-color: #60a5fa; 
    --primary-hover: #3b82f6;
    
    /* GLASSMORHPISM SURFACE COLORS (Dark) */
    --glass-surface-dark: rgba(30, 41, 59, 0.7); /* Gris sombre semi-transparent */
    --glass-border-dark: rgba(255, 255, 255, 0.1); 
    
    --background-dark: #1f2937; 
    --text-dark: #f0f0f0;
    --shadow-base: 0 4px 15px rgba(0, 0, 0, 0.6);
    --border-color-subtle: #4b5563;
}

/* FOND : White faded gradient background */
body {
    background-color: var(--background-light);
    background: linear-gradient(135deg, #ffffff 0%, #f0f0f0 100%); /* Dégradé blanc estompé */
    color: var(--text-light);
    min-height: 100vh;
    transition: background-color var(--transition-speed), color var(--transition-speed);
    font-family: 'Inter', sans-serif;
    font-weight: 300; /* Typographie légère */
}

[data-bs-theme="dark"] body {
    background-color: var(--background-dark);
    /* Optionnel : vous pouvez mettre un dégradé sombre ici si vous le souhaitez */
    background: linear-gradient(135deg, #1f2937 0%, #111827 100%); 
    color: var(--text-dark);
}

h1, h2, h3, h4, .fw-bold {
    color: var(--text-light);
    font-weight: 700;
}

[data-bs-theme="dark"] h1, [data-bs-theme="dark"] h2, [data-bs-theme="dark"] h3, [data-bs-theme="dark"] h4 {
    color: var(--text-dark);
}

/* Remplacer la couleur primaire de Bootstrap */
.bg-primary, .btn-primary {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}
.btn-primary:hover {
    background-color: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
}
.text-primary {
    color: var(--primary-color) !important;
}

a.nav-link.text-danger {
    background-color: #fff;
    border-radius: 15px;
    padding: 7px 10px;
    font-size: 15px;
    color: #0d70fc !important;
}

a.nav-link.text-danger:hover {
    background-color: #d1e4ff;
    
}
.nav-link.active {
	border-radius: 15px 15px 0px 0px !important;
	background-color: rgb(255 255 255 / 15%);
}
.nav.nav-tabs {
	border-radius: 15px 15px 0px 0px !important;
	background-color: rgba(59, 130, 246, 0.15);
}
.tab-content.card {
	border-radius: 0px 0px 15px 15px !important;
	background-color: rgb(255 255 255);
}

/* Transitions généralisées pour les couleurs, ombres et mouvements */
* {
    transition: background-color var(--transition-speed) ease, 
                color var(--transition-speed) ease, 
                box-shadow var(--transition-speed) ease,
                transform var(--transition-speed) ease;
}

/* -------------------------------------------------------------------- */
/* 2. Éléments de Structure (Glassmorphism & Layout) */
/* -------------------------------------------------------------------- */

/* GLASSEMORPHISM CARD & UI ELEMENTS */
.card {
    /* Glassmorphism de base */
    background: var(--glass-surface-light);
    backdrop-filter: blur(var(--blur-intensity));
    -webkit-backdrop-filter: blur(var(--blur-intensity));
    
    border: 1px solid var(--glass-border-light);
    border-radius: 15px !important; /* Petit rayon de bord */
    box-shadow: var(--shadow-base);
    
    /* Pas de transition de transformation sur les cartes pour garder l'effet de flottaison au hover */
    transition: box-shadow var(--transition-speed) ease-out, background-color var(--transition-speed);
}
.table-responsive, .modal-content, .offcanvas {
    /* Glassmorphism de base */
    /*background: var(--glass-surface-light);*/
	background-color: #fff;
    backdrop-filter: blur(var(--blur-intensity));
    -webkit-backdrop-filter: blur(var(--blur-intensity));
    
    border: 1px solid var(--glass-border-light);
    border-radius: 15px !important; /* Petit rayon de bord */
    box-shadow: var(--shadow-base);
    
    /* Pas de transition de transformation sur les cartes pour garder l'effet de flottaison au hover */
    transition: box-shadow var(--transition-speed) ease-out, background-color var(--transition-speed);
}
[data-bs-theme="dark"] .card, [data-bs-theme="dark"] .table-responsive, [data-bs-theme="dark"] .modal-content, [data-bs-theme="dark"] .offcanvas {
    background: var(--glass-surface-dark);
    border: 1px solid var(--glass-border-dark);
}

/* Retrait de la transformation au hover pour la carte pour maintenir un look subtil */
.card:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); /* Ombre plus prononcée */
    transform: none; /* Désactiver la translation Y que vous aviez */
}
[data-bs-theme="dark"] .card:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.6);
}

.card-header, .modal-header, .modal-footer {
    border-bottom: 0px solid var(--glass-border-light);
    background: transparent !important; /* S'assurer que le header est aussi "glass" */
    color: var(--text-light);
    border-radius: 0px !important;
	    border-top: 0px solid #ffffff;
    border-top-left-radius: 15px !important;
    border-top-right-radius: 15px !important;
}
}
[data-bs-theme="dark"] .card-header, [data-bs-theme="dark"] .modal-header, [data-bs-theme="dark"] .modal-footer {
    border-color: var(--glass-border-dark);
    color: var(--text-dark);
}

.card-footer:last-child {
    border-radius: 0 0 15px;
}

.table-responsive, .card-body {
    border: none !important;
}

.card-body .table-responsive, .tab-content .table-responsive {
    border-radius: 15px !important;
}

.card-header.bg-dark, .table-responsive thead.table-dark, .table-responsive .table>thead {
	background-color: #3b82f6 !important;
	--bs-table-bg: #3b82f6 !important;
}

.card .card-header.bg-info {
    border-radius: 15px 15px 0px 0px !important;
}
.table-responsive {
	padding: 0px !important;
    margin: 0px;
    border: none !important;
}

.list-group-flush>.list-group-item:last-child {
    border-bottom-width: 0;
    border-radius: 0px 0px 15px 15px;
}

button.btn.btn-sm {
    margin: 0px 3px;
}
.content-area {
    padding-top: 20px;
    padding-bottom: 50px;
}

/* Sidebar (Même style Glassmorphism mais avec un fond plus transparent/foncé si besoin) */
.sidebar {
    /*background: var(--glass-surface-light);*/
/*background-color: #0f172a;*/
    backdrop-filter: blur(var(--blur-intensity));
    -webkit-backdrop-filter: blur(var(--blur-intensity));
    border-right: 1px solid var(--glass-border-light);
	margin-right: 15px;
}

.sidebar a {
    display: flex; /* Utilisation de flex pour aligner les icônes Lucide */
    align-items: center;
    gap: 10px;
    padding: 7px;
    margin-bottom: 5px;
    border-radius: 15px;
    transition: all var(--transition-speed); /* Transition plus complète */
    text-decoration: none;
    color: var(--text-light);
}

.sidebar a:hover {
    background-color: rgba(59, 130, 246, 0.15); /* Utiliser la couleur primaire avec plus d'opacité */
    transform: translateX(3px);
    /*border-right: #0d6efd 5px solid;*/
}

.sidebar .active {
    background-color: #0d6efd !important;
    color: white !important;
    font-weight: 600;
    /*border-right: #003391 5px solid;*/
    box-shadow: 0px 5px 30px #bebebe, -20px -20px 60px #ccc;
}
a .bg-blue-bg {
	background-color: rgba(59, 130, 246, 0.15);
    border-radius: 10px;
    padding: 5px 9px;
	--bs-text-opacity: 1;
    color: rgb(13 110 253) !important;
}
a.active .bg-blue-bg {
	background-color: rgba(59, 130, 246, 1);
    border-radius: 15px;
    padding: 5px 9px;
	--bs-text-opacity: 1;
    color: rgb(253 253 253) !important;
	box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.15);
    /*transform: scale(1);*/
	animation: pulse 2s infinite;
}
@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.60);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(59, 130, 246, 0.45);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.75);
    }
}
.btn-group-sm>.btn, .btn-sm {
    --bs-btn-padding-y: 5px !important;
    --bs-btn-padding-x: 9px !important;
    --bs-btn-font-size: 16px !important;
    --bs-btn-border-radius: 15px !important;
}
/* -------------------------------------------------------------------- */
/* 3. Formulaires et Inputs (Intégration du rayon et du focus) */
/* -------------------------------------------------------------------- */

.form-control, .form-select {
    border-radius: var(--border-radius-sm) !important;
    border-color: var(--border-color-subtle);
    transition: border-color var(--transition-speed), box-shadow var(--transition-speed);
    padding: 0.5rem 1rem;
}

.form-control:focus, .form-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.25rem rgba(59, 130, 246, 0.25);
    background-color: var(--surface-light); /* Rendre le fond opaque au focus */
}

/* -------------------------------------------------------------------- */
/* 4. Éléments de Données (Tables et Badges) */
/* -------------------------------------------------------------------- */

/* Tableaux : Pas de flou pour la lisibilité, mais respecte les couleurs de surface glass */
.table {
    --bs-table-bg: transparent; /* Fond transparent pour voir le glass-element derrière */ 
    --bs-table-hover-bg: rgba(59, 130, 246, 0.07);
    border-radius: var(--border-radius-sm);
    margin-bottom: 0rem;
}

/* Badges : Utilise le rayon de bord */
.badge {
    border-radius: var(--border-radius-sm) !important;
}

/* -------------------------------------------------------------------- */
/* 5. Modales (Glassmorphism) */
/* -------------------------------------------------------------------- */

.modal-content {
    /* Réutilise le style glass-element */
    /* Assure que les coins sont bien arrondis */
    border-radius: var(--border-radius-sm) !important; 
}


/* -------------------------------------------------------------------- */
/* 6. Micro-Interactions, Fade-In & Transitions de Page */
/* -------------------------------------------------------------------- */

/* Micro-Interactions Boutons */
.btn {
    transition: all var(--transition-speed);
    border-radius: 15px !important;
    font-weight: 600;
}

.btn:hover {
    transform: translateY(-2px); 
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.btn:active {
    transform: translateY(0);
}

/* Lordicon (Remplacer par Lucide, Lordicon est trop lourd pour ce style minimaliste) */
/* Si vous utilisez des balises Lucide (ex: <i data-lucide="home"></i>) */
i[data-lucide] {
    vertical-align: middle;
    transition: transform 0.3s;
}

h1 i[data-lucide]:hover {
    transform: scale(1.08) rotate(5deg);
}

/* ANIMATION : Fade in elements animations (Appliquez cette classe sur le conteneur de contenu) */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.content-area-wrapper {
    animation: fadeIn 0.6s ease-out forwards;
}

/* TRANSITIONS ENTRE PAGES (Nécessite JavaScript pour changer la classe sur le corps) */
@keyframes pageFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes pageFadeOut {
    to { opacity: 0; transform: translateY(-10px); }
}

/* Classe à appliquer au <body> ou au conteneur principal à l'entrée d'une nouvelle page */
.page-transition-enter {
    animation: pageFadeIn 0.4s ease-out;
}

/* Classe à appliquer au <body> ou au conteneur principal à la sortie d'une page */
.page-transition-exit {
    animation: pageFadeOut 0.3s ease-in forwards;
}


.card.bg-green {
	background: #61a0ff;
background: linear-gradient(90deg,rgba(97, 160, 255, 1) 0%, rgba(33, 121, 252, 1) 100%);
	border: none;
}
table.table.table-striped.table-hover.align-middle {
    margin: 0px;
}
.badge.bg-success {
	border-radius: 10px !important;
    padding: 9px !important;
    background-color: #52c992 !important;
}

.badge.bg-danger {
	border-radius: 10px !important;
    padding: 9px !important;
    /*background-color: #52c992 !important;*/
}
.badge.bg-warning, .bg-info {
	border-radius: 10px !important;
    padding: 9px !important;
    /*background-color: #52c992 !important;*/
}
.badge.bg-secondary, .badge.bg-secondary-subtle{
	border-radius: 10px !important;
    padding: 9px !important;
    background-color: rgb(199 199 199) !important;
	color: #333 !important;
}
.rounded-pill {
    border-radius: 10px !important;
    padding: 8px 12px !important;
    font-size: 14px;
}
.progress-bar.bg-info {
    border-radius: 10px 0px 0px 10px !important;
}
a.btn.btn-sm.btn-info.text-white {
    border-radius: 15px !important;
}
h3.text-white {
	color: #ffffff !important;	
}
a.btn {
    border-radius: 15px !important;
}
.btn-success {
	background-color: #52c992 !important;
    border-color: #52c992 !important;
}
.btn-outline-success {
    border-color: #52c992 !important;
	color: #52c992 !important;	
}
.btn-outline-success:hover {
    background-color: #52c992 !important;
	color: #fff !important;	
}
button.btn.btn-sm {
    margin: 0px 2px;
}

.badge.bg-info-subtle, .badge.bg-primary {
    padding: 7px 12px !important;
    font-size: 16px !important;
    border-radius: 10px !important;
}
.nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover {
    isolation: isolate;
    border-color: transparent;
    background-color: #c9e4ff;
    border-radius: 15px 15px 0px 0px;
}

/*** calendar ***/
#calendar a {
    color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1));
    text-decoration: none;
    font-weight: 500;
    font-size: 12px;
}
#calendar h1, #calendar h2, #calendar h3, #calendar h4, #calendar .fw-bold {
    color: #05386b;
    font-weight: 600;
}
.fc .fc-button-primary:focus {
    box-shadow: none !important;
}
.fc .fc-daygrid-body-natural .fc-daygrid-day-events {
    margin-bottom: 0.3em;
}
.fc .fc-button-primary:not(:disabled).fc-button-active, .fc .fc-button-primary:not(:disabled):active {
    background-color: #05386b;
    border-color: #05386b;
    color: #fff;
}

.fc .fc-button-primary {
    background-color: #05386b;
    border-color: #05386b;
    color: #fff;
}
.fc .fc-button {
    border-radius: 10px;
}

.fc .fc-button-primary {
    background-color: #05386b;
    border-color: #05386b;
    color: #fff;
}
.fc .fc-button-primary:hover {
    background-color: #0c4279;
    border-color: #0c4279;
    color: #fff;
}
.fc .fc-daygrid-day-number {
    padding: 3px;
    position: relative;
    z-index: 4;
    font-size: 14px;
}
#calendar .badge.bg-primary.me-2 {
	font-size:0.75em !important;
}
.moi-calendar.badge.bg-primary {
    font-size: 13px !important;
    border-radius: 10px !important;
    font-weight: 500;
    padding: 9px !important;
}
li strong
 {
    font-weight: 500;
}
table.dataTable thead th {
    background-image: inherit !important;}
    
div.dataTables_wrapper div.dataTables_filter
 {

    margin: 15px 15px 7px 5px;
}
div.dataTables_wrapper div.dataTables_paginate {
    margin: 7px 15px 15px 5px !important;
}
div.dataTables_wrapper div.dataTables_info {
    margin-left: 15px !important;
}