@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap');

/* /style.css */
/* ========================================================================== 1. Imports & Variables ========================================================================== */
 :root {
     --primary-red: #e60000;
	 --primary-red: #e60000;
	 --light-red-bg: #ffebeb;
	 --dark-text: #1a1a1a;
	 --medium-text: #555;
	 --light-text: #888;
	 --white: #fff;
	 --background-light: #ffefef;
	 --border-color: #eee;
	 --shadow-light: rgba(0, 0, 0, 0.05);
	 --status-eligible-bg: #e7f7ef;
	 --status-eligible-text: #008744;
	 --status-nrp-bg: #fff3e0;
	 --status-nrp-text: #ff9800;
	 --status-non-eligible-bg: #ffeeed;
	 --status-non-eligible-text: #d63447;
	 --status-place-bg: #e3f2fd;
	 --status-place-text: #1e88e5;
	 --positive-green: #4caf50;
	 --upgrade-purple: #8e44ad;
	/* Original Approximation */
	 --upgrade-purple-alt: #a12eff;
	/* Your Newer Value */
}
/* ========================================================================== 2. Global Resets & Body Styles ========================================================================== */
 * {
	 box-sizing: border-box;
	 margin: 0;
	 padding: 0;
}
 body {
	 font-family: 'Lato', sans-serif;
	 background-color: var(--background-light);
	 color: var(--dark-text);
	 overflow-x: hidden;
	/* Prevent horizontal scroll */
	 line-height: 1.5;
	/* Add a base line-height */
}
/* ========================================================================== 3. Layout Structure ========================================================================== */
 .dashboard-container {
	 display: flex;
	 width: 100%;
	 min-height: 80vh;
}
/* ===== Sidebar ===== */
 .sidebar {
	 width: 260px;
	 background-color: var(--primary-red);
	 color: var(--white);
	 display: flex;
	 flex-direction: column;
	 padding: 20px 0;
	 flex-shrink: 0;
	 border-top-right-radius: 35px;
	/* Your updated value */
	 border-bottom-right-radius: 35px;
	/* Your updated value */
	 position: fixed;
	/* Make the sidebar fixed */
	 top: 0;
	/* Stick to the top */
	 left: 0;
	/* Stick to the left */
	 height: 100vh;
	/* Make it full viewport height */
	 z-index: 1000;
}
 .sidebar-nav::-webkit-scrollbar {
	 width: 6px;
	/* Width of the scrollbar */
}
 .sidebar-nav::-webkit-scrollbar-track {
	 background: rgba(0, 0, 0, 0.1);
	/* Track color */
	 border-radius: 3px;
}
 .sidebar-nav::-webkit-scrollbar-thumb {
	 background-color: rgba(255, 255, 255, 0.4);
	/* Thumb color */
	 border-radius: 3px;
	 border: 1px solid rgba(0, 0, 0, 0.1);
	/* Optional border */
}
 .sidebar-nav::-webkit-scrollbar-thumb:hover {
	 background-color: rgba(255, 255, 255, 0.6);
	/* Thumb color on hover */
}
/* ===== Main Content Area ===== */
 .main-content {
	 flex-grow: 1;
	 padding: 0 30px 30px 30px;
	 display: flex;
	 flex-direction: column;
	 margin-left: 260px;
	/* Add margin equal to sidebar width */
	 width: calc(100% - 260px);
}
 .main-content-nosidebar {
	 flex-grow: 1;
	 padding: 0 30px 30px 30px;
	 display: flex;
	 flex-direction: column;
	 width: calc(100%);
}

.btn {
    display:inline-block;
    font-weight:400;
    line-height:1.5;
    color:#212529;
    text-align:center;
    text-decoration:none;
    vertical-align:middle;
    cursor:pointer;
    -webkit-user-select:none;
    -moz-user-select:none;
    user-select:none;
    background-color:transparent;
    border:1px solid transparent;
    padding:.375rem .75rem;
    font-size:1rem;
    border-radius:.25rem;
    transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out
}
@media (prefers-reduced-motion:reduce) {
    .btn {
        transition:none
    }
}
.btn:hover {
    color:#212529
}
.btn-check:focus+.btn,.btn:focus {
    outline:0;
    box-shadow:0 0 0 .25rem rgba(13,110,253,.25)
}
.btn.disabled,.btn:disabled,fieldset:disabled .btn {
    pointer-events:none;
    opacity:.65
}
.btn-primary {
    color:#fff;
    background-color:#0d6efd;
    border-color:#0d6efd
}
.btn-primary:hover {
    color:#fff;
    background-color:#0b5ed7;
    border-color:#0a58ca
}

.btn-secondary {
    color:#1a1a1a;
    background-color:#6c757d;
    border-color:#6c757d
}
.btn-secondary:hover {
    color:#fff;
    background-color:#5c636a;
    border-color:#565e64
}

.btn-danger {
    color: #fff;
    background-color: #e20200;
    border-color: #e20200;
}
.btn-danger:hover {
    color:#fff;
    background-color:#b10300;
    border-color:#b10300;
}



/* ========================================================================== 4. Components ========================================================================== */
/* ===== Sidebar Header ===== */
 .sidebar-header {
	 padding: 0 20px 20px 20px;
	 text-align: left;
}
 .sidebar-header .logo {
	 height: 50px;
	/* Your updated value */
	 width: auto;
	 border-radius: 5px;
	 display: inline-block;
	 margin-left: 10px;
	/* Your updated value */
	 vertical-align: middle;
	/* Align logo better if needed */
}
/* ===== Sidebar Project Selector ===== */
 .project-selector {
	 margin: 0 50px 30px 0;
	 position: relative;
	 background-color: #fff;
	 border-top-right-radius: 35px;
	 border-bottom-right-radius: 35px;
	 padding: 5px 15px 5px 15px;
	/* Adjusted padding to align with nav items */
}
 .project-selector label {
	 display: block;
	 font-size: 12px;
	 margin-bottom: 5px;
	 opacity: 0.8;
}
 .project-selector select {
	 width: 100%;
	 background: none;
	 border: none;
	 color: #313131;
	 font-size: 14px;
	 font-weight: 600;
	 appearance: none;
	 -webkit-appearance: none;
	 -moz-appearance: none;
	 cursor: pointer;
	 padding-right: 20px;
	/* Space for the arrow */
}
 .project-selector select option {
	 background-color: var(--primary-red);
	/* Note: This might not work consistently across browsers */
}
 .project-selector .fa-chevron-down {
	 position: absolute;
	 right: 15px;
	 top: 50%;
	 transform: translateY(-50%);
	 pointer-events: none;
	 font-size: 12px;
	 color: #313131;
}
/* ===== Sidebar Navigation ===== */
 .sidebar-nav {
	 flex-grow: 1;
	/* Allow nav to take up available space */
	 overflow-y: auto;
	/* Add scrollbar ONLY to nav if content overflows */
	 overflow-x: hidden;
	/* Prevent horizontal scroll within nav */
	 padding-bottom: 10px;
	 -webkit-mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
	 mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
}
 .sidebar-nav ul {
	 list-style: none;
}
 .sidebar-nav li {
	 margin-bottom: 5px;
	 position: relative;
}
 .sidebar-nav .nav-link {
	 display: flex;
	 align-items: center;
	 padding: 12px 20px;
	 color: rgba(253, 247, 247, 0.9);
	 text-decoration: none;
	 font-size: 15px;
	 font-weight: 500;
	 transition: background-color 0.2s ease, color 0.2s ease;
	 border-radius: 30px 0 0 30px;
	 margin-left: 15px;
	 cursor: pointer;
	 position: relative;
	/* Needed for ::before */
}
 .sidebar-nav .nav-link i:first-child {
	/* Icon */
	 margin-right: 12px;
	 width: 20px;
	 text-align: center;
	 flex-shrink: 0;
}
 .sidebar-nav .nav-link span:not(.arrow-icon) {
	/* Target the text span */
	 margin-right: 5px;
	 transition: transform 0.2s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
 .sidebar-nav .nav-link .arrow {
	 margin-left: auto;
	 font-size: 10px;
	 transition: transform 0.2s ease;
	 display: inline-flex;
	 align-items: center;
	 flex-shrink: 0;
}
 .sidebar-nav .nav-link .arrow i {
	/* Style the icon if using Font Awesome */
	 display: block;
}
 .sidebar-nav .nav-link svg.svg-inline--fa {
	 margin-right: 12px;
	 width: 20px;
	 text-align: center;
	 flex-shrink: 0;
}
 .sidebar-nav .nav-link svg.svg-inline--fa + span {
	 margin-right: 12px;
	 width: 20px;
	 text-align: center;
	 flex-shrink: 0;
}
/* Nav Link States */
 .sidebar-nav .nav-link:hover {
	 background-color: #ffefef;
	 color: var(--primary-red);
	 font-weight: 500;
	/* Adjusted from 600 */
}
 .sidebar-nav li.active > .nav-link {
	 background-color: #ffefef;
	 display: flex;
	 align-items: center;
	 padding: 12px 20px;
	 color: var(--primary-red);
	 text-decoration: none;
	 font-size: 15px;
	 font-weight: 500;
	 transition: background-color 0.2s ease, color 0.2s ease;
	 border-radius: 30px 0 0 30px;
	 margin-left: 15px;
	 cursor: pointer;
	 position: relative;
}
/* Active Indicator Line */
 .sidebar-nav li.active > .nav-link::before {
	 content: '';
	 position: absolute;
	 left: 0;
	 top: 0;
	 bottom: 0;
	 width: 0;
	/* Was 4px, maybe remove if not desired */
	 background-color: var(--primary-red);
	 border-top-left-radius: 4px;
	 border-bottom-left-radius: 4px;
}
/* Arrow Rotation on Open */
/* .sidebar-nav li.open > .nav-link .arrow {
	/* transform: rotate(90deg);
	/* margin-right: 10px;
	/* Adjust as needed */
	/* margin-top: 0;
	/* Reset margin-top if added previously */
	/* transition: transform 0.2s ease-in;
	/* 
}
/* Submenu Styles */
 .sidebar-nav .sub-menu {
	 max-height: 0;
	 overflow: hidden;
	 transition: max-height 0.3s ease-out;
	 list-style: none;
	/* Enlever les puces */
	 padding-left: 25px;
	/* Indenter les sous-éléments */
	 margin-top: 5px;
	/* Petit espace */
	 margin-bottom: 5px;
}

 .sidebar-nav li .arrow svg { 
    transition: transform 0.3s ease;
    width: 0.8em;
    height: 0.8em; 
    vertical-align: middle; 
}
 .sidebar-nav li.open > .nav-link .arrow svg {
    transform: rotate(90deg);
}
/* Fin à jour */
 .sidebar-nav li.open > .sub-menu {
	 max-height: 500px;
	/* Allow space to open */
	 display: block;
}
 .sidebar-nav .sub-menu li a {
	 display: block;
	 padding: 8px 15px 8px 17px;
	 color: rgba(253, 247, 247, 0.9);
	 font-size: 13px;
	 text-decoration: none;
	 transition: color 0.2s ease, background-color 0.2s ease, padding-left 0.2s ease;
	 border-radius: 20px 0 0 20px;
	 margin-left: 15px;
}
 .sidebar-nav .sub-menu li a:hover {
	 color: #ffefef;
	 background-color: #ffefef38;
	 padding-left: 22px;
}
 .sidebar-nav .sub-menu li.active a {
	 display: block;
	 padding: 8px 15px 8px 17px;
	 color: #ffefef; 
	 background-color: #ffefef38;
	 font-size: 13px;
	 text-decoration: none;
	 border-radius: 20px 0 0 20px;
	 margin-left: 15px;
}
/* ===== Sidebar Footer ===== */
 .sidebar-footer {
	 padding: 20px 20px 0 20px;
	 margin-top: auto;
	/* Push footer to bottom */
	 flex-shrink: 0;
}
 .plan-info {
	 background-color: var(--white);
	 color: var(--dark-text);
	 border-radius: 15px;
	 padding: 10px;
	 margin-bottom: 20px;
}
 .plan-info .plan-logo {
	 height: 45px;
	/* Your updated value */
	 width: auto;
	 margin-bottom: 10px;
	 display: inline-block;
}
 .upgrade-btn {
	 background-color: var(--upgrade-purple-alt);
	/* Your updated value */
	 color: var(--white);
	 border: none;
	 border-radius: 20px;
	 padding: 8px 15px;
	 font-size: 12px;
	 font-weight: 600;
	 cursor: pointer;
	 display: block;
	 width: 100%;
	 margin-bottom: 15px;
	 transition: background-color 0.2s ease;
}
 .upgrade-btn i {
	 margin-right: 5px;
}
 .upgrade-btn:hover {
	 background-color: #7d1be0;
	/* Darker version of alt purple */
}
 .usage-bar {
	 background-color: #e0e0e0;
	 border-radius: 10px;
	 height: 8px;
	 overflow: hidden;
	 margin-bottom: 8px;
}
 .usage-bar .progress {
	 background-color: var(--upgrade-purple-alt);
	/* Your updated value */
	 height: 100%;
	 border-radius: 10px;
}
 .usage-text {
	 display: flex;
	 justify-content: space-between;
	 font-size: 11px;
	 color: var(--medium-text);
}
 .usage-text b {
	 color: var(--upgrade-purple-alt);
	/* Your updated value */
	 font-weight: 700;
	/* Make bold */
	 font-size: 20px;
	/* Was 20px, check if intended */
}
/* Sign Out Link */
 .sign-out-link {
	 display: flex;
	 align-items: center;
	 color: var(--white);
	 text-decoration: none;
	 font-size: 14px;
	 font-weight: 500;
	 opacity: 0.9;
	 transition: opacity 0.2s ease;
	 margin-left: 5px;
	/* Slight indent */
}
 .sign-out-link:hover {
	 opacity: 1;
}
 .sign-out-link i {
	 margin-right: 10px;
}
/* ===== Top Bar ===== */
 .top-bar {
	 display: flex;
	 justify-content: space-between;
	 align-items: center;
	 padding: 20px 0;
	 margin-bottom: 20px;
}
 .ask-search-bar {
	 display: flex;
	 align-items: center;
	 border: 2px solid var(--primary-red);
	 border-radius: 50px;
	 max-width: 450px;
	 width: 100%;
	 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
	 height: 37px;
	 padding-top: 5px;
	/* Check if needed */
	 margin-left: 4px;
	 margin-top: 3px;
}
/* Style de l'icône logo */
 .ask-logo-icon {
	 height: 45px;
	/* Hauteur du logo, ajustable */
	 width: auto;
	/* Largeur automatique pour garder les proportions */
	 display: block;
	/* Empêche l'espace sous l'image */
	 z-index: -1;
	 margin-left: -4px;
}
/* Style du champ de saisie */
 .search-input {
	 flex-grow: 1;
	/* Prend tout l'espace restant */
	 border: none;
	/* Pas de bordure par défaut */
	 outline: none;
	/* Pas de contour bleu/orange au focus */
	 background: transparent;
	/* Fond transparent pour voir celui du conteneur */
	 font-size: 15px;
	/* Taille de la police */
	 color: #6f6f6f;
	/* Couleur du texte saisi */
	 padding: 8px 15px 8px 5px;
	/* Padding interne (added right padding) */
	 font-family: inherit;
	/* Hérite la police du body */
}
/* Style du placeholder */
 .search-input::placeholder {
	 color: var(--light-text);
	/* Use variable */
	 opacity: 1;
	/* Nécessaire pour certains navigateurs */
}
 .user-info {
	 display: flex;
	 align-items: center;
	 color: var(--dark-text);
}
 .user-info i {
	 font-size: 22px;
	 margin-left: 20px;
	 color: var(--primary-red);
	 cursor: pointer;
}

.user-info svg.svg-inline--fa { /* Cible les SVG avec la classe FA */
    font-size: 22px;
    height: 1em;
    margin-left: 20px;
    color: var(--primary-red);
    cursor: pointer;
    vertical-align: -0.15em;
}

.user-info .profile-icon.svg-inline--fa { /* Si c'est un SVG */
	font-size: 28px;
}

 .user-info .profile-icon {
	 font-size: 28px;
}
 .user-info span {
	 margin-left: 10px;
	 font-weight: 600;
	 color: var(--primary-red);
}
/* ===== Content Area Container ===== */
 .content-area {
	 background-color: var(--white);
	 border-radius: 20px;
	 padding: 0;
	/* Remove padding here, add to inner elements */
	 box-shadow: 0 4px 15px var(--shadow-light);
	 flex-grow: 1;
	 display: flex;
	 flex-direction: column;
	 overflow: hidden;
	/* Contain children */
}
/* ===== Content Header Bar ===== */
 .content-header {
	 display: flex;
	 justify-content: space-between;
	 align-items: center;
	 background-color: var(--primary-red);
	 color: var(--white);
	 border-radius: 20px 20px 0 0;
	 padding: 15px 25px;
	 flex-shrink: 0;
	 min-height: 75px;

}
 .content-header h1 {
	 font-size: 25px;
	 font-weight: 600;
	 margin: 0;
	/* Added margin reset */
}
 .header-actions .btn {
	 margin-left: 10px;
	 padding: 10px 20px;
	 border-radius: 20px;
	 border: none;
	 font-size: 14px;
	/* Slightly smaller */
	 font-weight: 500;
	/* Adjusted weight */
	 cursor: pointer;
	 transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
	 font-family: inherit;
	/* Use Inter or Lato */
}
 .header-actions .btn i {
	 margin-right: 8px;
}
 .btn-secondary {
	 background-color: var(--white);
	 color: var(--dark-text);
	
}
 .btn-secondary:hover {
	background-color: #1a1a1a;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	transition: background-color 0s ease, color 0.5s ease, box-shadow 0.5s ease;

}
 .btn-primary {
	 margin-left: 10px;
	 padding: 10px 20px;
	 border-radius: 20px;
	 border: none;
	 font-size: 14px;
	 font-weight: 500;
	 cursor: pointer;
	 transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
	 font-family: inherit;
	 background-color: #1a1a1a;
	 color: #fff;
}
 .btn-primary:hover {
	 background-color: #333;
	 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}
/* ===== Statistics Cards ===== */
 .stats-container {
	 display: grid;
	 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	 gap: 20px;
	 padding: 25px 25px 30px 25px;
	/* Adjusted padding */
	 flex-shrink: 0;
	/* Prevent shrinking */
}
 .stat-card {
	 padding: 15px;
	 display: grid;
	/* Check if grid is needed here or flex */
	 border: 1px solid var(--border-color);
	/* Add subtle border */
	 border-radius: 8px;
	/* Add border radius */
	 background-color: #fff;
	/* Ensure background */
}
 .stat-card h2 {
	 font-size: 16px;
	/* Adjusted size */
	 color: var(--medium-text);
	 margin-bottom: 10px;
	 font-weight: 500;
}
 .stat-card .stat-value {
	 font-size: 32px;
	/* Adjusted size */
	 font-weight: 700;
	 color: var(--dark-text);
	 margin-bottom: 5px;
}
 .stat-card .stat-detail {
	 font-size: 13px;
	 color: var(--light-text);
	 margin-bottom: 10px;
}
 .stat-card .stat-comparison {
	 font-size: 12px;
	 color: var(--medium-text);
	 align-self: end;
}
 .stat-comparison .positive {
	 color: var(--positive-green);
	 background-color: var(--status-eligible-bg);
	 padding: 2px 6px;
	 border-radius: 10px;
	 font-weight: 600;
	 margin-left: 5px;
	 display: inline-block;
	/* Ensures proper spacing */
}
 .chart-card {
	 display: flex;
	 flex-direction: column;
	 border: 1px solid var(--border-color);
	/* Add subtle border */
	 border-radius: 8px;
	/* Add border radius */
	 padding: 15px;
	/* Add padding */
	 background-color: #fff;
	/* Ensure background */
}
 .chart-container {
	 position: relative;
	 width: 100%;
	 max-width: 150px;
	 margin: 10px auto 0 auto;
	 flex-grow: 1;
	 display: flex;
	 align-items: center;
	 justify-content: center;
}
 #statsChart {
	 max-width: 100%;
	 max-height: 150px;
}
/* ===== Customer Table ===== */
 .customer-table-container {
	 overflow-x: auto;
	 flex-grow: 1;
	/* Allow table to take remaining space */
	 padding: 0 0 25px 0;
	/* Padding bottom */
}
 .customer-table {
	 width: 100%;
	 border-collapse: collapse;
	 font-size: 13px;
	 border-spacing: 0;
	/* Remove default spacing */
}

.customer-table tbody td {
    text-align: center; /* Centre horizontalement le contenu inline (texte, badges) */
    vertical-align: middle; /* Centre verticalement le contenu (bonne pratique pour les tables) */
}

.customer-table tbody td:nth-child(2) {
    text-align: left; /* Aligner le texte à gauche */
}

.customer-table tbody td:last-child {
    text-align: center;
}

 .customer-table th, .customer-table td {
	 text-align: left;
	 white-space: nowrap;
	 vertical-align: middle;
	/* Align content vertically */
}
 .customer-table thead th {
	 background-color: #fafafa;
	 color: var(--medium-text);
	 font-weight: 600;
	 font-size: 12px;
	 text-transform: uppercase;
	 letter-spacing: 0.5px;
	 position: sticky;
	 top: 0;
	 z-index: 1;
	 border-top: 1px solid var(--border-color);
	/* Add top border to header */
	 text-align: center;
}
/* First and Last Columns */
 .customer-table th:first-child, .customer-table td:first-child {
	 padding-left: 25px;
	/* Align with container padding */
	 text-align: center;
	 width: 50px;
	/* Fixed width for checkbox column */
}
 .customer-table th:last-child, .customer-table td:last-child {
	 padding-right: 25px;
	/* Align with container padding */
	 text-align: center;
	 width: 60px;
	/* Fixed width for actions column */
}
 .customer-table td:last-child i {
	 cursor: pointer;
	 color: var(--primary-red);
	 transition: color 0.2s ease;
	/* Add transition */
}
 .customer-table td:last-child i:hover {
	 color: var(--primary-red);
	/* Highlight on hover */
}
 .customer-table tbody tr:hover {
	 background-color: #f9f9f9;
	/* Slightly softer hover */
}
 .customer-table input[type="checkbox"] {
	 cursor: pointer;
	 vertical-align: middle;
}
/* Status Badges */
 .status-badge {
	 padding: 5px 10px;
	 border-radius: 12px;
	 font-size: 11px;
	 font-weight: 600;
	 display: inline-block;
	 text-align: center;
	 min-width: 80px;
}

.status-preview-dot {
	display: inline-block;
    width: 30px;
    height: 30px;
    border-radius: 30%;
    margin-right: 8px;
    /* vertical-align: middle; */
    order: 1px solid rgba(0, 0, 0, 0.1);
    text-indent: -9999px;
    /* overflow: hidden; */
}


.status-style--marine { /* Couleur texte pour le badge */
    background-color: #cfe2ff; /* --status-new-bg */
}
.status-badge.status-style--marine { /* Couleur texte pour le badge */
    color: #0a58ca; /* --status-new-text */ /* DÉCOMMENTÉ */
}
.status-preview-dot.status-style--marine { /* Couleur fond pour la pastille */
    background-color: #cfe2ff; /* --status-new-bg */
}

.status-style--green {
    background-color: #e7f7ef; /* --status-eligible-bg */
}
.status-badge.status-style--green {
    color: #008744; /* --status-eligible-text */ /* DÉCOMMENTÉ */
}
.status-preview-dot.status-style--green {
    background-color: #e7f7ef; /* --status-eligible-bg */
}

.status-style--orange {
    background-color: #fff3e0; /* --status-nrp-bg */
}
.status-badge.status-style--orange {
    color: #ff9800; /* --status-nrp-text */ /* DÉCOMMENTÉ */
}
.status-preview-dot.status-style--orange {
    background-color: #fff3e0; /* --status-nrp-bg */
}

.status-style--red {
    background-color: #ffeeed; /* --status-non-eligible-bg */
}
.status-badge.status-style--red {
    color: #d63447; /* --status-non-eligible-text */ /* DÉCOMMENTÉ */
}
.status-preview-dot.status-style--red {
    background-color: #ffeeed; /* --status-non-eligible-bg */
}

.status-style--blue {
    background-color: #e3f2fd; /* --status-place-bg */
}
.status-badge.status-style--blue {
    color: #1e88e5; /* --status-place-text */ /* DÉCOMMENTÉ */
}
.status-preview-dot.status-style--blue {
    background-color: #e3f2fd; /* --status-place-bg */
}


/* Style par défaut si 'color' est NULL ou l'identifiant non trouvé */
.status-style--default {
    background-color: #6c757d; /* Gris Bootstrap secondary */
}
.status-badge.status-style--default {
    color: #ffffff; /* DÉCOMMENTÉ */
}
.status-preview-dot.status-style--default {
    background-color: #6c757d; /* Gris Bootstrap secondary */
}

/* --- Styles pour le Sélecteur de Style par Pastilles --- */

.style-picker-container {
    display: flex;
    flex-wrap: wrap; /* Permet aux pastilles de passer à la ligne */
    gap: 10px; /* Espace entre les pastilles */
    padding-top: 5px; /* Petit espace sous le label */
    min-height: 30px; /* Hauteur minimale pour voir "Loading..." */
	margin-bottom: 5px;
}

.style-picker-container .loading-styles {
    font-style: italic;
    color: #6c757d;
    font-size: 0.9em;
}

/* Style des pastilles cliquables */
.style-picker-container .status-preview-dot {
    width: 30px; /* Taille un peu plus grande */
    height: 30px;
    cursor: pointer;
    transition: transform 0.1s ease-out, box-shadow 0.2s ease;
    border: 2px solid transparent; /* Bordure initiale transparente */
    box-sizing: border-box;
}

/* Effet au survol */
.style-picker-container .status-preview-dot:hover {
    transform: scale(1.1);
}

/* Style de la pastille sélectionnée */
.style-picker-container .status-preview-dot.selected {
    box-shadow: 0 0 0 2px white, 0 0 0 4px #333; /* Effet de double bordure */
    transform: scale(1.05); /* Légèrement plus grande */
}

/* Style pour le message d'erreur (si validation échoue) */
#new-status-style-picker + input[type="hidden"]:invalid + #style-picker-error {
    display: block; /* Afficher le message d'erreur si l'input caché est invalide */
    width: 100%;
    margin-top: .25rem;
    font-size: .875em;
    color: #dc3545; /* Couleur d'erreur Bootstrap */
}


/* ===== Form Elements (General) ===== */
 input[type="text"], input[type="email"], input[type="tel"], select, textarea {
	 font-family: inherit;
	/* Use body font */
	 font-size: inherit;
}
 input[type="checkbox"] {
	 accent-color: var(--primary-red);
}
/* ===== Swup Page Transitions ===== */
 #swup {
	 transition: opacity 0.4s ease-in-out;
	/* Transition pour le fondu */
	/* Ajoutez d'autres transitions si nécessaire (ex: transform pour le slide) */
}
/* Styles pendant que la page sort (is-leaving) */
 html.is-leaving #swup {
	 opacity: 0;
	/* Pour un slide vers la gauche : */
	/* transform: translateX(-50px);
	 */
}
/* ========================================================================== 5. Utility Classes ========================================================================== */
 .fas, .far, .fab {
	/* Ensure Font Awesome icons have consistent vertical alignment */
	 vertical-align: middle;
}
/* ========================================================================== 6. Custom Modal Styles (Original - With Tabs) ========================================================================== */
/* --- Conteneur Principal de la Modale (Fond sombre) --- */
 .modal {
	 display: none;
	/* Cachée par défaut */
	 position: fixed;
	/* Reste en place */
	 z-index: 1050;
	/* Au-dessus de la plupart des éléments (adjust if needed) */
	 left: 0;
	 top: 0;
	 width: 100%;
	 height: 100%;
	 overflow: auto;
	/* Permet le scroll si contenu trop long */
	 background-color: rgba(0, 0, 0, 0.6);
	/* Fond noir semi-transparent */
	/* Utilisation de Flexbox pour centrer le contenu */
	 justify-content: center;
	 align-items: center;
	 padding: 20px;
	/* Add padding for smaller screens */
}
/* État visible (sera ajouté/retiré par JavaScript) */
 .modal.show {
	 display: flex;
	/* Utilise flex pour le centrage */
}
/* --- Boîte de Contenu de la Modale --- */
 .modal-content {
	 background-color: #fefefe;
	 margin: auto;
	 padding: 0;
	 width: 90%;
	 max-width: 700px;
	 border-radius: 25px;
	 box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
	 position: relative;
	 display: flex;
	 flex-direction: column;
	 overflow: hidden;
	 min-height: 300px;
}
/* --- En-tête de la Modale --- */
 .modal-header {
	padding: 20px 25px;
    background-color: #e20200;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    flex-shrink: 0;
    font-family: 'Lato';
	color: #ffffff;
}
 .modal-header h2 {
	 margin: 0;
	 font-size: 1.4em;
}

.modal-footer-edit {
    display: flex;           /* Active Flexbox */
    justify-content: space-between; /* Espace les éléments (gauche/droite) */
    align-items: center;     /* Centre les éléments verticalement */
    padding-top: 15px;       /* Ajoute un peu d'espace au-dessus */
    margin-top: 15px;        /* Espace par rapport au message */
}

/* Style spécifique pour le bouton Delete */
.modal-footer-edit .btn-danger {
    background-color: #e20200;
    border-color: #e20200;
    color: white;
	border-radius: 20px;
}

.modal-footer-edit .btn-danger:hover {
    background-color: #c80000; /* Couleur un peu plus foncée au survol */
    border-color: #c80000;
}

/* Assurer que les icônes dans les boutons sont bien alignées */
.modal-footer-edit .btn i {
    margin-right: 5px;
}

/* --- Bouton Fermer (X) --- */
 .close-btn {
	 color: #fefefe;
	 font-size: 28px;
	/* Adjusted size */
	 font-weight: bold;
	 line-height: 1;
	 cursor: pointer;
	 padding: 0 5px;
	 background: none;
	/* Ensure no background */
	 border: none;
	/* Ensure no border */
	 transition: color 0.2s ease;
}
 .close-btn:hover, .close-btn:focus {
	 color: #333;
	 text-decoration: none;
	 outline: none;
	/* Remove focus outline */
}
/* --- Section des Onglets --- */
 .modal-tabs {
	display: flex;
	background-color: #e20200;
	flex-shrink: 0;
	padding-left: 15px;
}
 .tab-link {
	 background-color: inherit;
	 background-color: inherit;
	 border: none;
	 outline: none;
	 cursor: pointer;
	 padding: 12px 18px;
	 transition: background-color 0.3s, color 0.3s, border-color 0.3s;
	 font-size: 0.95em;
	 color: #fefefe;
	 border-top-left-radius: 15px;
	 border-top-right-radius: 15px;
}
/* Style quand on survole un onglet non actif */
 .tab-link:hover {
	background-color: #ff0200;

}
/* Style de l'onglet actif */
 .tab-link.active {
	background-color: var(--white);
    color: var(--primary-red);
    font-weight: 600;
}
/* --- Corps de la Modale --- */
 .modal-body {
	 padding: 20px 25px;
	/* Adjusted padding */
	 flex-grow: 1;
	/* Permet au corps de prendre l'espace restant */
	 overflow-y: auto;
	/* Allow vertical scroll ONLY for body */
}
/* --- Contenu des Onglets --- */
 .tab-content {
	 align-items: left;
}
/* Style pour le contenu de l'onglet actif */
 .tab-content.active {
	 display: block;
	/* Affiché quand actif */
}
/* Optionnel: Animation de fondu pour le contenu des onglets */
 @keyframes fadeEffect {
	 from {
		 opacity: 0;
	}
	 to {
		 opacity: 1;
	}
}
/* --- Styles pour les Formulaires DANS la Modale --- */
 #modal .form-grid {
	 display: grid;
	 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	/* Crée des colonnes flexibles */
	 gap: 10px 20px;
}
 #modal .form-group-full {
	 grid-column: -1;
	/* Fait en sorte que l'élément prenne toute la largeur */
}
 .modal .form-group {
    margin-bottom: 0;
    flex: 1 1 200px;
    min-width: 200px;
}
 .modal .form-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 20px; 
}
 .modal .form-group-full {
    flex-basis: 100%;
    min-width: 100%;  
}
 /* .modal label {
	 display: block;
	 margin-bottom: 6px;
	 font-size: 0.9em;
	 color: #1a1a1a;
	 font-family: 'Lato';
}
 .modal input[type="text"], .modal input[type="email"], .modal input[type="tel"], .modal select, .modal textarea {
	 width: 100%;
	 padding: 10px 12px;
	 border: 1px solid #ccc;
	 border-radius: 4px;
	 box-sizing: border-box;
	 font-size: 0.95em;
	 transition: border-color 0.2s ease, box-shadow 0.2s ease; }
	Fin de prise en charge modale Bootstrap */

 .modal textarea {
	 resize: vertical;
	/* Permet le redimensionnement vertical */
	 min-height: 80px;
	/* Minimum height */
}
 .modal input:focus, .modal select:focus, .modal textarea:focus {
	 border-color: var(--primary-red);
	/* Use theme color */
	 outline: none;
	 box-shadow: 0 0 0 3px rgba(230, 0, 0, 0.15);
	/* Subtle focus shadow */
}
 .modal .form-actions {
	 padding-top: 15px;
	/* Space above actions */
	 text-align: right;
	 justify-content: space-between;
	/* Espace entre message et bouton */
	 align-items: center;
	/* Alignement vertical */
	 flex-wrap: wrap;
	/* Allow wrapping on small screens */
	 gap: 10px;
	/* Space between items if they wrap */
}
 .modal .message-area {
	 font-size: 0.9em;
	 min-height: 1.2em;
	/* Pour éviter les sauts de layout */
	 flex-grow: 1;
	/* Prend l'espace disponible */
	 text-align: left;
	/* Aligne le texte du message à gauche */
	 padding-right: 15px;
	/* Espace avant le bouton */
}
 .modal .message-area.success {
	 color: var(--positive-green);
}
 .modal .message-area.error {
	 color: var(--primary-red);
}
/* Style pour le formulaire Bulk */
 #bulk-add-form p {
	 margin-bottom: 15px;
	 font-size: 0.95em;
	 color: #666;
	 line-height: 1.4;
}
 #bulk-add-form code {
	 background-color: #f0f0f0;
	 padding: 2px 5px;
	 border-radius: 3px;
	 font-family: monospace;
	 font-size: 0.9em;
}
 #bulk-add-form input[type="file"] {
	 padding: 20px;
	 width: 100%;
	 margin: 0 auto;
	 display: block;
}
 #bulk-add-form .form-group {
	/* Add margin below file input */
	 margin-bottom: 15px;
}
 #bulk-import-results {
	 padding: 10px;
	 margin-top: 20px;
	 max-height: 200px;
	 overflow-y: auto;
	 font-size: 0.9em;
	 background-color: #f9f9f9;
	 border-radius: 4px;
	 line-height: 1.4;
}
 #bulk-import-results p {
	 margin: 5px 0;
}
 #bulk-import-results .error {
	 color: var(--primary-red);
	 font-weight: bold;
}
 #bulk-import-results .success {
	 color: var(--positive-green);
}
/* --- Styles pour la Modale Edit (hérite beaucoup de .modal) --- */
/* On peut juste ajouter des spécificités si nécessaire */
 #edit-customer-modal .modal-content {
	/* Si tu veux une taille différente pour la modale d'édition */
	/* max-width: 550px;
	 */
}
 #edit-customer-modal .edit-actions {
	 margin-top: 25px;
	 padding-top: 15px;
	 border-top: 1px solid #eee;
	 display: flex;
	 justify-content: space-between;
	 align-items: center;
	 flex-wrap: wrap;
	 gap: 10px;
}
 #edit-customer-modal .edit-actions .message-area {
	 flex-grow: 1;
	 text-align: left;
	 padding-right: 15px;
}
 #edit-customer-modal .edit-actions div {
	/* Conteneur des boutons */
	 display: flex;
	 gap: 10px;
	/* Espace entre les boutons Delete et Save */
}
/* Bouton Delete spécifique */
 #delete-customer-btn {
	 background-color: #dc3545;
	/* Rouge danger */
	 color: white;
}
 #delete-customer-btn:hover {
	 background-color: #c82333;
}
/* Utilise .close-btn standard pour fermer la modale d'édition */
 .close-edit-btn {
	/* Si tu utilises cette classe spécifiquement */
	/* Hérite de .close-btn */
}
/* --- Autres styles divers --- */
 .language-link {
	 color: #333;
	 font-weight: 600;
	 text-decoration: none;
}
 .language-link:visited, .language-link:hover, .language-link:focus, .language-link:active {
	 color: #333;
}
/* ========================================================================== 7. Responsive Adjustments (Exemple) ========================================================================== */
 @media (max-width: 992px) {
	/* Option: Cacher la sidebar sur petits écrans ou la rendre plus petite */
	/* width: 80px;
	 */
	/* Ou utiliser transform: translateX(-100%);
	 pour la cacher */
	 .main-content {
		 margin-left: 0;
		/* Ajuster si la sidebar est cachée/réduite */
		 width: 100%;
		 padding: 0 15px 15px 15px;
		/* Réduire le padding */
	}
	 .top-bar {
		 flex-direction: column;
		 align-items: flex-start;
		 gap: 15px;
	}
	 .ask-search-bar {
		 max-width: 100%;
	}
	 .content-header {
		 flex-direction: column;
		 align-items: flex-start;
		 gap: 10px;
		 padding: 15px;
	}
	 .header-actions {
		 width: 100%;
		 display: flex;
		 justify-content: flex-start;
		/* Ou space-between */
		 flex-wrap: wrap;
		 gap: 10px;
	}
	 .header-actions .btn {
		 margin-left: 0;
	}
	 .stats-container {
		 grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
		 padding: 15px;
	}
	 .customer-table th, .customer-table td {
		 padding: 10px 15px;
		 white-space: normal;
		/* Permettre le retour à la ligne */
	}
	 .customer-table th:first-child, .customer-table td:first-child, .customer-table th:last-child, .customer-table td:last-child {
		 padding-left: 15px;
		 padding-right: 15px;
		 width: auto;
		/* Laisser la largeur s'ajuster */
	}
	 .modal-content {
		 width: 95%;
		 max-width: none;
		/* Enlever la limite max sur petits écrans */
	}
	 #manual-add-form .form-grid {
		 grid-template-columns: 1fr;
		/* Une seule colonne sur mobile */
	}
}
/* Styles spécifiques projects.php */
/* --- Styles Généraux Page Projet --- */
 .proj-pg-content-area {
	 max-width: 1200px;
	 margin: 0 auto;
	 padding: 20px;
}
 .proj-pg-header {
	 justify-content: space-between;
	 margin-bottom: 20px;
	 padding-bottom: 15px;
	 text-align: center;
}
 .proj-pg-header h1 {
	 margin: 0;
	 font-size: 1.8em;
	 font-weight: 700;
	 color: #333;
}
 .proj-pg-error-message {
	 padding: 15px;
	 background-color: #fdd;
	 border: 1px solid #faa;
	 color: #d8000c;
	 margin: 15px 0;
	 border-radius: 4px;
}
/* --- Styles Grille et Cartes Résumé/Création --- */
 .projects-summary-grid {
	 display: flex;
	 flex-wrap: wrap;
	 justify-content: center;
	/* Centre le contenu */
	 gap: 25px;
	 padding: 20px 0;
}
 .proj-summary-card, .create-project-card {
	 width: 250px;
	 flex: 0 0 250px;
}
 .welcome {
	 text-align: center;
	 font-size: 3em;
	 font-weight: bold;
	 font-family: 'Lato';
	 font-weight: 600;
	 color: #333;
	 margin-top: 30px;
}
 .assistant-info {
	 margin-top: 10px;
	 text-align: center;
}
 .assistant-count {
	 font-size: 2.5em;
	 color: #333;
	 font-weight: 900;
}
 .assistant-label {
	 font-size: 0.95em;
	 color: #333;
	 font-weight: 500;
	 margin-top: -8px;
}
/* --- Styles Cartes Résumé (Keep styles from previous step) --- */
 .proj-summary-card {
	 background-color: #fff;
	 background-color: #fff;
	 border-radius: 30px;
	 padding: 25px 20px;
	 text-align: center;
	 box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
	 display: flex;
	 flex-direction: column;
	 align-items: center;
	 min-height: 150px;
	 transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
	 width: 250px;
	 cursor: pointer;
}
 .proj-summary-card:hover {
	 transform: translateY(-4px);
	 box-shadow: 0 6px 15px rgba(0, 0, 0, 0.12);
}
 .proj-summary-card .summary-count {
	 font-size: 2.8em;
	 font-weight: 700;
	 color: #ffffff;
	 margin-bottom: 8px;
	 line-height: 1.1;
}
 .proj-summary-card .summary-label {
	 font-size: 1.5em;
	 color: #333;
	 font-weight: 600;
     margin-top: 10px;
}
 .proj-summary-card i {
	 font-size: 1.5em;
	 margin-bottom: 15px;
	 color: #ffffff;
}
/* --- Styles Carte "Créer" --- */
 .create-project-card {
	 background-color: #fff;
	 display: flex;
	 flex-direction: column;
	 align-items: center;
	 justify-content: center;
	 text-align: center;
	 cursor: pointer;
	 color: #333;
	 transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
	 min-height: 150px;
	 border-radius: 30px;
	 padding: 25px 20px;
	 box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
	 width: 250px;
}
 .create-project-card:hover {
	 border-color: #007bff;
	 color: #e20200;
	 background-color: #fff;
	 box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
	 transform: translateY(-4px);
	 transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
 .create-project-card i {
	 font-size: 2.5em;
	 margin-bottom: 15px;
}
 .create-project-card span {
	 font-size: 1.1em;
	 font-weight: 700;
}

 @keyframes create-proj-animatetop {
	 from {
		 top: -300px;
		 opacity: 0;
	}
	 to {
		 top: 0;
		 opacity: 1;
	}
}
 .create-proj-close-btn {
	 color: #ffffff;
	 font-size: 28px;
	 font-weight: bold;
	 cursor: pointer;
}
 .create-proj-close-btn:hover, .create-proj-close-btn:focus {
	 color: black;
	 text-decoration: none;
}
 .create-proj-modal-body {
	 padding: 20px 25px;
}
 .create-proj-form-group {
	 margin-bottom: 15px;
}
 .create-proj-form-group label {
	 display: block;
	 margin-bottom: 5px;
	 font-weight: bold;
	 color: #555;
}
 .create-proj-form-group input[type="text"], .create-proj-form-group textarea {
	 width: 100%;
	 padding: 10px;
	 border: 1px solid #ccc;
	 border-radius: 4px;
	 box-sizing: border-box;
}
 .create-proj-form-group textarea {
	 resize: vertical;
}
 .create-proj-form-actions {
	 margin-top: 20px;
	 text-align: right;
	 display: flex;
	 justify-content: space-between;
	 align-items: center;
}
 .create-proj-message-area {
	 font-size: 0.9em;
	 text-align: left;
	 flex-grow: 1;
	 margin-right: 15px;
}
 .create-proj-message-area.success {
	 color: green;
	 font-weight: bold;
}
 .create-proj-message-area.error {
	 color: red;
	 font-weight: bold;
}

/* Styles spécifiques login.php */

 body.login-page {
	 line-height: 1.6;
	 padding: 20px;
	 background-color: #fceff0;
	 color: #1a1a1a;
}
 .login-container {
	 max-width: 400px;
	 margin: 100px auto;
	 padding: 30px;
	 background-color: #fff;
	 border-radius: 25px;
	 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.login-container h1 {
	 text-align: center;
	 color: #5cb85c;
	 margin-bottom: 20px;
}
 .form-group {
	 margin-bottom: 15px;
	 margin-top: 10px;
}
 label {
	 display: block;
	 margin-bottom: 5px;
	 text-align: left;
	 font-family: Lato;
}
 input[type="text"], input[type="password"] {
	width: 100%;
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
 input[type="submit"] {
	 background-color: #e20200;
	 color: white;
	 padding: 10px 15px;
	 border: none;
	 border-radius: 20px;
	 cursor: pointer;
	 font-size: 1.1em;
	 transition: background-color 0.3s ease;
	 width: 300px;
	 display: block;
	 margin: 0 auto;
}
 input[type="submit"]:hover {
	 background-color: #333;
}
 .error-message {
	 color: #d9534f;
	 background-color: #f2dede;
	 border: 1px solid #ebccd1;
	 padding: 10px;
	 border-radius: 3px;
	 margin-bottom: 15px;
	 text-align: center;
}
 .register-link {
	 text-align: center;
	 margin-top: 20px;
}
 .register-link a {
	 color: #e20200;
	 text-decoration: none;
}
 .register-link a:hover {
	 text-decoration: underline;
}

/* Styles spécifiques index.php */

 .main-content {
	 margin-left: 260px;
	/* Largeur du sidebar */
}

.page-content {
    padding: 20px; /* Espace intérieur pour la grille */
}

 .page-content .cal-section-row {
	/* La classe .row de Bootstrap devrait suffire si le CSS est bien chargé */
	/* Si les colonnes s'empilent toujours, inspectez .row et .col-* pour voir */
	/* quelles règles CSS globales interfèrent (display, width, float, etc.) */
	/* --bs-gutter-x: 1.5rem;
	/* Example de variable Bootstrap pour l'espacement */
}
 .page-content .cal-main-container {
	 background-color: #fff;
	 border-radius: 8px;
	 padding: 20px;
	 height: 100%;
}
 .page-content .cal-header {
	 display: flex;
	 justify-content: space-between;
	 align-items: center;
	 margin-bottom: 20px;
	 flex-wrap: wrap;
	 gap: 10px;
}
 .page-content .cal-header h2 {
	 margin: 0;
	 font-size: 1.5rem;
	 font-weight: 500;
	 order: 2;
}
 .page-content .cal-header .btn-group {
	 order: 1;
}
 .page-content .cal-header .cal-btn-today {
	 margin-left: 10px;
	 order: 3;
}
/* Cible plus spécifique pour les boutons du header du calendrier */
 .page-content .cal-grid {
	 display: grid;
	 grid-template-columns: repeat(7, 1fr);
	 gap: 5px;
}
 .page-content .cal-cell {
	 text-align: center;
	 padding: 10px 5px;
	 border-radius: 10px;
	 min-height: 90px;
	 display: flex;
	 flex-direction: column;
	 justify-content: flex-start;
	 align-items: center;
	 font-size: 0.9rem;
	 position: relative;
	 cursor: pointer;
	 transition: background-color 0.2s ease, border-color 0.2s ease;
}
 .page-content .cal-weekday {
	 font-weight: bold;
	 color: #6c757d;
	 padding-bottom: 10px;
	 min-height: auto;
	 cursor: default;
	 border: none;
}
 .page-content .cal-weekday:hover {
	 background-color: transparent;
}
 .page-content .cal-day {
	 background-color: #f8f9fa;
}
 .page-content .cal-day:hover {
	 background-color: #e9ecef;
}
 .page-content .cal-day-number {
	 font-weight: 500;
	 margin-bottom: 5px;
}
 .page-content .cal-other-month {
	 background-color: transparent;
	 border: none;
	 cursor: default;
}
 .page-content .cal-other-month .cal-day-number {
	 color: #adb5bd;
	 opacity: 0.6;
}
 .page-content .cal-other-month:hover {
	 background-color: transparent;
}
 .page-content .cal-current-day {
	 background-color: #ffd3d6;
	 color: #1a1a1a;
}
 .page-content .cal-current-day:hover {
	 background-color: #e83e33;
}
 .page-content .cal-selected-day {
	 background-color: #e20200;
	 color: #fff;
}
 .page-content .cal-selected-day.cal-current-day {
	 border: 2px solid #fff;
}
/* --- Sidebar du Calendrier (Scoped) --- */
 .page-content .cal-sidebar {
	 background-color: #f8f9fa;
	 padding: 20px;
	 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
	 height: 100%;
	 display: flex;
	 flex-direction: column;
	 gap: 20px;
}
 .page-content .cal-activity-section h5, .page-content .cal-mini-calendar-container h5 {
	 font-weight: 500;
	 margin-bottom: 15px;
	 color: #495057;
}
/* Mini Calendar Specific Styles (Scoped) */
 .page-content .cal-mini-calendar-header {
	 display: flex;
	 justify-content: space-between;
	 align-items: center;
	 margin-bottom: 10px;
}
 .page-content .cal-mini-calendar-header h6 {
	 margin: 0;
	 font-size: 0.9rem;
	 font-weight: 500;
	 text-align: center;
	 flex-grow: 1;
}
/* Cible spécifique pour les boutons du mini calendrier */
 .page-content .cal-mini-calendar-header .btn {
	 padding: 0.1rem 0.4rem;
	 font-size: 0.7rem;
	 border-radius: 50px;
}
 .page-content .cal-mini-grid {
	 display: grid;
	 grid-template-columns: repeat(7, 1fr);
	 gap: 2px;
}
 .page-content .cal-mini-cell {
	 text-align: center;
	 padding: 4px 2px;
	 border-radius: 4px;
	 font-size: 0.75rem;
	 position: relative;
	 cursor: pointer;
	 transition: background-color 0.2s ease;
	 min-height: auto;
	 line-height: 1.2;
	 border: 1px solid transparent;
}
 .page-content .cal-mini-weekday {
	 font-weight: bold;
	 color: #6c757d;
	 cursor: default;
	 font-size: 0.7rem;
	 padding-bottom: 4px;
	 border: none;
	 background: transparent;
}
 .page-content .cal-mini-day {
	 background-color: #fff;
	 border: 1px solid #eee;
}
 .page-content .cal-mini-day:hover {
	 background-color: #e9ecef;
}
 .page-content .cal-mini-other-month {
	 color: #adb5bd;
	 opacity: 0.6;
	 background-color: transparent;
	 border: 1px solid transparent;
	 cursor: default;
}
 .page-content .cal-mini-other-month:hover {
	 background-color: transparent;
}
 .page-content .cal-mini-current-day {
	 background-color: #f7d3d6;
	 color: #1a1a1a;
}
 .page-content .cal-mini-selected-day {
	 background-color: #e20200;
	 color: #ffff;
}
/* Responsive Adjustments */
/* Bootstrap gère normalement l'empilement des colonnes via col-md-*, col-lg-* */
/* Ces règles ajustent le contenu INTERNE du calendrier */
 @media (max-width: 768px) {
	 .page-content .cal-cell {
		 min-height: 60px;
		 font-size: 0.8rem;
		 padding: 5px 2px;
	}
	 .page-content .cal-header h2 {
		 font-size: 1.2rem;
	}
	 .page-content .cal-weekday {
		 font-size: 0.7rem;
	}
}
 @media (max-width: 576px) {
	 .page-content .cal-header {
		 justify-content: center;
	}
	 .page-content .cal-header .btn-group {
		 order: 1;
		 width: 100%;
		 display: flex;
		 justify-content: space-between;
	}
	 .page-content .cal-header h2 {
		 order: 2;
		 width: 100%;
		 text-align: center;
		 margin-top: 10px;
	}
	 .page-content .cal-header .cal-btn-today {
		 order: 3;
		 width: 100%;
		 margin-left: 0;
		 margin-top: 10px;
	}
	 .page-content .cal-cell {
		 min-height: 50px;
	}
}