/* --- Thème inspiré de "Cicada" (Dark Mode) --- */

:root {
    /* --- Palette de couleurs (Mode Sombre par défaut) --- */
    
    /* Arrière-plans */
    --bg-body: #191e2a;       /* Fond de la page */
    --bg-card: #232a3b;       /* Fond des conteneurs (dashboard, login) */
    --bg-element: #333a4d;    /* Fond des éléments secondaires (headers de table, blocs settings) */
    --bg-input: #191e2a;      /* Fond des champs de saisie */
    --bg-caption: #1f2533;    /* Fond des titres de tableaux */
    --bg-hover: #333a4d;      /* Fond au survol */

    /* Texte */
    --text-main: #fff;     /* Texte principal */
    --text-heading: #e9ecef;  /* Titres */
    --text-muted: #adb5bd;    /* Texte secondaire/gris */
    --text-footer: #5a6268;   /* Texte du pied de page */
    --text-inverse: #ffffff;  /* Texte sur fond coloré */
    --text-caption: #ffffff;  /* Texte des titres de tableaux */
    --text-input: #cbd5e0;    /* Texte des champs de saisie (légèrement grisé) */

    /* Bordures */
    --border-color: #4a5266;  /* Bordures principales (inputs, blocs) */
    --border-light: #333a4d;  /* Bordures légères (lignes de tableau) */

    /* Couleurs d'accentuation */
    --primary-color: #2f5ed2;
    --primary-hover: #244cb3;
    --primary-rgb: 47, 94, 210; /* Pour les transparences (rgba) */

    /* Arrière-plan Page de Connexion */
    --login-bg-image: url('img/login-bg.jpg');
    --login-overlay-color: #191e2a;

    /* Alertes (Succès/Erreur) - Mode Sombre */
    --alert-success-bg: rgba(40, 167, 69, 0.2);
    --alert-success-text: #6ee38a;
    --alert-success-border: #28a745;
    --alert-error-bg: rgba(220, 53, 69, 0.2);
    --alert-error-text: #f28b98;
    --alert-error-border: #dc3545;
}

/* --- Mode Clair (Light Mode) --- */
html.light-mode {
    --bg-body: #e2e6ea;
    --bg-card: #ffffff;
    --bg-element: #e9ecef;
    --bg-input: #ffffff;
    --bg-caption: #e2e6ea;
    --bg-hover: #e9ecef;
    --text-main: #212529;
    --text-heading: #343a40;
    --text-muted: #6c757d;
    --text-footer: #6c757d;
    --text-inverse: #ffffff;
    --text-caption: #343a40;
    --text-input: #495057;    /* Texte des champs de saisie (gris foncé) */
    --border-color: #ced4da;
    --border-light: #dee2e6;

    /* Arrière-plan Page de Connexion */
    --login-bg-image: url('img/login-bg-light.jpg');
    --login-overlay-color: #e2e6ea;

    /* Alertes (Succès/Erreur) - Mode Clair */
    --alert-success-bg: #d1e7dd;
    --alert-success-text: #0f5132;
    --alert-success-border: #0f5132;
    --alert-error-bg: #f8d7da;
    --alert-error-text: #842029;
    --alert-error-border: #842029;
}

html {
    font-size: 15px; /* On définit la taille de base ici. 1rem = 15px. (Standard = 16px) */
    overflow-x: auto; /* Permet le défilement horizontal (nécessaire pour le min-width) */
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: var(--bg-body);
    margin: 0;
    color: var(--text-main);
    min-width: 1850px; /* Force une largeur minimale pour conserver la mise en page bureau sur mobile */

    /* --- Amélioration du rendu des polices (anti-aliasing) --- */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

@keyframes page-fade-in {
    from { opacity: 0; transform: scale(1.05); } /* Commence légèrement zoomé (105%) */
    to { opacity: 1; transform: scale(1); } /* Revient à la taille normale (Dézoom) */
}

/* Classe pour l'animation d'entrée (appliquée uniquement lors de la connexion) */
/* 1. On applique un fondu global sur la page pour que le fond apparaisse en douceur */
.fade-in-enter {
    animation: fade-in-only 0.6s ease-out;
}

/* 2. On applique l'animation de zoom (et fondu) spécifiquement sur le conteneur */
.fade-in-enter .login-container {
    animation: page-fade-in 0.6s ease-out;
}

/* Nouvelle animation : Fade In simple (sans zoom) */
@keyframes fade-in-only {
    from { opacity: 0; }
    to { opacity: 1; }
}

.fade-in-simple {
    animation: fade-in-only 0.6s ease-out;
}

/* Classe pour l'animation de sortie (ajoutée via JS) */
body.page-exit {
    transition: opacity 0.5s ease; /* On garde le fondu sur toute la page pour la transition */
    opacity: 0;
    pointer-events: none; /* Empêche les clics multiples pendant la transition */
}

/* On applique le zoom de sortie uniquement sur le conteneur */
body.page-exit .login-container {
    transition: transform 0.5s ease;
    transform: scale(1.05);
}

/* Classe pour l'animation de sortie simple (Fade Out sans zoom) */
body.page-exit-simple {
    transition: opacity 0.5s ease;
    opacity: 0;
    pointer-events: none;
}

/* Classe utilitaire pour centrer le contenu d'une page (utilisée pour la connexion/installation) */
.page-center {
    display: flex;
    flex-direction: column; /* Aligne les éléments verticalement */
    justify-content: center;
    align-items: center; 
    min-height: 100vh;
    position: relative; /* Nécessaire pour positionner les éléments de fond */
    overflow: hidden; /* Empêche l'image rotatée de dépasser et créer des barres de défilement */
}

/* --- Arrière-plan décoratif pour la page de connexion --- */

/* 1. L'image de fond (capture d'écran) en diagonale */
.page-center::before {
    content: "";
    position: absolute;
    /* Positionnement standard plein écran */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2; /* Tout au fond */
    
    /* Chemin vers votre image. Créez un dossier 'img' dans public_app et mettez-y votre image. */
    background-image: var(--login-bg-image); 
    background-size: cover;
    background-position: top left;
    background-repeat: no-repeat;

    opacity: 0.5; /* Assez visible pour deviner les formes */
    transform: scale(1.8); /* Zoom dans l'image (120%) */
    transform-origin: top left;
    filter: grayscale(0%) blur(4px); /* Noir & Blanc + Flou pour la profondeur */
}

/* 2. Le dégradé (vignettage) pour fondre les bords vers la couleur de fond */
.page-center::after {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: -1; /* Au-dessus de l'image, mais sous le formulaire */
    background: 
        linear-gradient(to bottom, transparent 100%, var(--login-overlay-color) 100%), /* Fondu vers le bas */
        radial-gradient(circle at center, transparent 0%, var(--login-overlay-color) 80%); /* Vignettage existant */
    pointer-events: none;
}

.login-container, .dashboard-container {
    background-color: var(--bg-card);
    padding: 2rem 3rem;
    border-radius: 12px;
    /* Ombre subtile pour les thèmes sombres */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    box-sizing: border-box; /* S'assure que le padding est inclus dans la largeur de 100% */
}

.login-container {
    max-width: 450px; /* Largeur augmentée pour plus de confort */
    width: 100%; /* Force le conteneur à prendre toute la largeur autorisée */
}

/* Style pour le logo de l'application sur les pages de connexion/installation */
.app-logo {
    display: block;
    margin: 0 auto 1.5rem auto; /* Centre le logo et ajoute un espace en dessous */
    max-width: 280px; /* Taille du logo réduite pour un design plus sobre */
    height: auto; /* Maintient les proportions */
}

/* Wrapper pour les logos sur la page de connexion */
.logos-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 1.5rem; /* Remplace la marge du logo individuel */
}

.logos-wrapper .app-logo {
    margin-bottom: 0; /* On retire la marge car gérée par le wrapper */
}

/* Si le JS injecte l'erreur à l'intérieur du wrapper (entre les logos), on force l'ordre visuel */
.logos-wrapper .error,
.logos-wrapper .success {
    order: 10; /* Force le message à s'afficher en bas */
    width: 100%;
    margin-top: 1rem;
    margin-bottom: 0;
}

.dashboard-container {
    max-width: none; /* Retire la limite de largeur */
    margin: 1.5rem 2rem; /* Conserve les marges latérales */
    border-radius: 12px; /* Réapplique les coins arrondis */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* Réapplique une ombre subtile */
}

h2 {
    text-align: center;
    margin-top: 0;
    margin-bottom: 1.5rem;
}

/* Style spécifique pour le titre sur la page d'installation */
.login-container h2 {
    font-size: 1.75rem; /* Police plus grande et plus lisible */
    font-weight: normal; /* Utilisation de 'normal' (400) pour une consistance maximale */
    color: var(--text-heading);
    margin-top: -0.5rem; /* Marge supérieure réduite pour rapprocher du logo */
    margin-bottom: 2rem; /* Marge inférieure augmentée pour mieux espacer du formulaire */
}

.input-group {
    margin-bottom: 1.25rem;
}

/*
 * Classe utilitaire pour afficher des champs de formulaire côte à côte.
 * Elle contient une ou plusieurs div.input-group.
 */
.form-row {
    display: flex;
    gap: 1rem; /* Espace entre les champs */
    margin-bottom: 1.25rem; /* Conserve la marge inférieure standard */
}
.form-row .input-group {
    flex: 1; /* Chaque champ prend une part égale de l'espace */
    margin-bottom: 0; /* On annule la marge des champs internes, gérée par le conteneur */
}

/* Style spécifique pour les rangées de formulaire avec un ratio 80/20 (ex: SMTP) */
.form-row.form-row-split > *:first-child {
    flex: 4; /* 80% (4 parts) */
}

.form-row.form-row-split > *:last-child {
    flex: 1; /* 20% (1 part) */
}

/* --- Conteneur pour le champ de mot de passe avec icône --- */
.password-input-wrapper {
    position: relative;
    /* On retire 'display: flex' et 'align-items: center' qui ne sont pas
       nécessaires pour le positionnement absolu de l'icône et qui peuvent
       causer des problèmes de layout. */
}

/* On s'assure que l'input dans le wrapper prend toute la largeur */
.password-input-wrapper input {
    padding-right: 2.5rem; /* Ajoute de l'espace à droite pour ne pas que le texte passe sous l'icône */
}

/* Style de notre icône personnalisée */
.password-toggle-icon {
    position: absolute;
    right: 1rem; /* Positionne l'icône à droite dans le champ */
    top: 50%; /* Positionne le haut de l'icône au milieu verticalement */
    transform: translateY(-50%); /* Décale l'icône vers le haut de la moitié de sa propre hauteur pour un centrage parfait */
    cursor: pointer;
    color: var(--text-muted);
}

/* --- Masquer l'icône "œil" native des navigateurs (Edge, Chrome) --- */
input[type="password"]::-ms-reveal,
input[type="password"]::-webkit-password-reveal-button {
    display: none !important;
}

/* --- Style pour l'icône de calendrier native des champs de date --- */
/* On utilise un filtre CSS pour inverser la couleur de l'icône (qui est noire par défaut)
   afin qu'elle devienne blanche/grise et visible sur le thème sombre.
   Cela préserve la fonctionnalité de clic native. */
input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    filter: invert(1) brightness(0.8);
}
.input-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: normal; /* Utilisation de 'normal' (400) pour une consistance maximale */
}

/* Style unifié pour tous les champs de formulaire (input, select, textarea) */
.input-group input,
.input-group select,
.input-group textarea {
    width: 100%;    
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-sizing: border-box;
    transition: border-color 0.2s;
    background-color: var(--bg-input);
    color: var(--text-input);
    padding: 0 0.7rem; /* Padding horizontal uniquement */
    height: 40px; /* Hauteur fixe pour tous les champs */
    font-family: inherit; /* Assure que tous les champs utilisent la même police */
    font-size: 1rem; /* Assure que tous les champs ont la même taille de police */
    line-height: 1.4; /* Aide à normaliser la hauteur visuelle */
}

/* Spécificité pour les textarea pour contrôler le redimensionnement */
.input-group textarea {
    resize: vertical; /* Permet le redimensionnement vertical mais pas horizontal, ce qui évite de "casser" la mise en page de la modale. */
    height: auto; /* On annule la hauteur fixe pour les textarea */
    min-height: 80px; /* On assure une hauteur minimale un peu plus confortable. */
}

.input-group input:focus,
.input-group select:focus,
.input-group textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.25rem rgba(var(--primary-rgb), 0.25); /* Ombre bleue au focus */
}

button {
    width: 100%;
    padding: 0 1rem; /* Padding horizontal uniquement */
    border: 1px solid var(--primary-color);
    border-radius: 12px;
    background-color: var(--primary-color);
    color: white;
    font-size: 1rem;
    font-weight: normal; /* Utilisation de 'normal' (400) pour une consistance maximale */
    height: 40px; /* Hauteur fixe pour tous les boutons */
    box-sizing: border-box; /* S'assure que la bordure est incluse dans la hauteur */
    cursor: pointer;
    transition: background-color 0.2s;
}

button:hover {
    background-color: var(--primary-hover);
}

.error {
    background-color: var(--alert-error-bg);
    color: var(--alert-error-text);
    padding: 0.75rem;
    border: 1px solid var(--alert-error-border);
    border-radius: 12px;
    margin-top: 1rem;
    margin-bottom: 1rem;
    text-align: center;
}

.success {
    background-color: var(--alert-success-bg);
    color: var(--alert-success-text);
    padding: 0.75rem;
    border: 1px solid var(--alert-success-border);
    border-radius: 12px;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    text-align: center;
}

a.button-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0 0.5rem; /* Padding horizontal uniquement */
    border: none;
    border-radius: 12px; 
    background-color: var(--primary-color);
    color: white;
    font-size: 1rem;
    font-weight: normal; /* Utilisation de 'normal' (400) pour une consistance maximale */
    cursor: pointer;
    transition: background-color 0.2s;
    text-align: center;
    text-decoration: none;    
    height: 40px; /* Hauteur fixe pour tous les boutons */
    box-sizing: border-box;
}

a.button-link:hover {
    background-color: var(--primary-hover);
}

a.button-link-secondary,
button.button-link-secondary {
    display: inline-flex; /* Aligné avec les autres boutons pour un support d'icône cohérent */
    align-items: center;
    gap: 0.5rem;
    padding: 0 1rem; /* Padding horizontal uniquement */
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background-color: var(--bg-element);
    color: var(--text-main);
    font-size: 1rem;
    font-weight: normal; /* Utilisation de 'normal' (400) pour une consistance maximale */
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
    text-align: center;
    text-decoration: none;
    white-space: nowrap; /* Empêche le texte des boutons de passer à la ligne */
    height: 40px; /* Hauteur fixe pour tous les boutons */
    box-sizing: border-box; /* Ajout pour la cohérence avec les autres boutons */
    font-family: inherit; /* Assure que les boutons utilisent la bonne police */
    width: auto; /* S'assure que le bouton ne prend pas 100% de la largeur */
}

a.button-link-secondary:hover,
button.button-link-secondary:hover {
    background-color: var(--border-color);
    border-color: var(--border-color);
}

a.button-link-secondary:disabled,
button.button-link-secondary:disabled {
    background-color: var(--bg-element);
    border-color: var(--border-light);
    color: var(--text-footer);
    cursor: not-allowed;
    opacity: 0.6;
}

a.button-link-secondary:disabled:hover,
button.button-link-secondary:disabled:hover {
    background-color: var(--bg-element); /* No change on hover */
    border-color: var(--border-light);
}

/* Modificateur pour rendre un bouton carré (pour les icônes seules) */
.btn-square {
    width: 40px;
    padding: 0;
    justify-content: center;
}

/* --- Header (utilisé pour le mode Supervision) --- */
/* Ces styles ont été restaurés pour le header spécifique du mode Supervision. */
.dashboard-container header {
    margin-bottom: 1.5rem; /* Espace sous le header */
}

/* Conteneur pour le logo et les boutons dans le header */
.header-top {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Aligne le logo à gauche et les contrôles à droite */
    flex-wrap: wrap; /* Permet aux éléments de passer à la ligne sur les petits écrans */
    gap: 1rem; /* Ajoute un espace si les éléments passent à la ligne */
}

/* Conteneur pour les boutons dans le header (ex: Supervision) */
.header-controls {
    display: flex;
    align-items: center;
    /* margin-left: auto; est retiré car géré par space-between sur le parent */
    gap: 0.75rem; /* Espace entre les boutons */
}

/* Style pour le logo dans l'en-tête du tableau de bord */
.header-logo {
    height: auto; 
    width: auto; /* Largeur automatique pour maintenir les proportions */
}

/* Taille spécifique du logo dans la barre de navigation principale */
.main-nav .header-logo {
    max-height: 45px; /* Réduit pour une barre de navigation plus compacte */
}

/* Taille spécifique du logo dans l'en-tête du mode supervision */
.header-top .header-logo {
    height: 45px;
}

/* Style pour le message de la période d'essai */
.trial-info {
    text-align: center;
    padding: 0.75rem;
    background-color: #7c6a36;
    color: #fdeeb3;
    border-radius: 12px;
    font-size: 0.9rem;
    margin: 1.5rem 0 0 0; /* Marge en haut, pour l'espace après la nav */
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Barre de navigation principale */
.main-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--bg-body);
    padding: 0.5rem 1.5rem;
    margin-bottom: 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    border-radius: 12px;
}

.nav-links {
    display: flex;
    gap: 0.2rem; /* Espace réduit entre les boutons de navigation */
    /* Ajout d'un séparateur vertical pour séparer du logo */
    padding-left: 1rem;
    border-left: 1px solid var(--border-light);
}

/* Conteneur pour regrouper le logo et les liens de navigation à gauche */
.nav-left-group {
    display: flex;
    align-items: center;
    gap: 1rem; /* Espace réduit pour accueillir le padding du séparateur */
}

/* Nouveau style pour les liens de navigation */
.nav-item {
    color: var(--text-main);
    text-decoration: none;
    padding: 0.6rem 1.1rem;
    border-radius: 12px;
    /* On utilise 'normal' (équivalent à 400) pour la graisse de police. C'est la valeur la plus standard. */
    font-weight: normal;
    font-size: 1.1rem; /* Taille de police augmentée pour une meilleure lisibilité */
    transition: background-color 0.2s, color 0.2s;
}

.nav-item.active, .nav-item:hover { 
    background-color: var(--primary-color);
    color: #fff;
}

/* Style pour les icônes dans la navigation */
.nav-item i {
    width: 20px; /* Donne une largeur fixe pour un alignement parfait */
    margin-right: 4px; /* Espace encore plus réduit pour un look plus compact */
    text-align: center; /* S'assure que l'icône est centrée dans son conteneur */
}

/* --- Styles pour le menu déroulant (Configurations) --- */
.nav-dropdown {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
}

.nav-dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: var(--bg-card);
    min-width: 200px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
    z-index: 1001;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    padding: 0.5rem 0;
}

.nav-dropdown:hover .nav-dropdown-content {
    display: block;
}

.nav-dropdown-content .nav-item {
    display: block; /* Force l'affichage en bloc pour empiler les liens */
    margin: 0;
    border-radius: 0;
    width: 100%;
    box-sizing: border-box;
    text-align: left;
}

.nav-dropdown-content .nav-item:hover {
    background-color: var(--primary-color);
    color: #fff;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    /* Ajout d'un séparateur vertical léger */
    border-left: 1px solid var(--border-light);
    padding-left: 1rem;
}

.dashboard-container main {
    margin-top: 1.5rem;
}

/* Header de page (titre + bouton) */
.page-header {
    /* Gère le titre seul, ou le titre avec un bouton à côté */
    display: flex;
    flex-direction: column; /* Empile les éléments (titre, bouton) */
    gap: 1rem; /* Espace entre le titre et le bouton */
    align-items: flex-end; /* Aligne les enfants (le bouton) à droite par défaut */
    margin-bottom: 1.5rem;
}

/* Nouveau conteneur pour aligner la recherche et le bouton "Ajouter" */
.controls-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem; /* Marge inférieure avant le tableau */
}

/* Style spécifique pour la barre de contrôles en mode supervision */
.supervision-controls {
    justify-content: flex-end; /* Aligne le bouton à droite */
    margin-bottom: 1.5rem; /* Espace avant le tableau */
}

.page-header h2 {
    margin: 0;
    text-align: left;
    width: 100%; /* Assure que le titre prend toute la largeur, le laissant à gauche */
}

/* Summary Cards */
.summary-container {
    display: flex;
    gap: 1.5rem;
    justify-content: space-around;
    margin-bottom: 2rem; /* Marge inférieure réduite */
    text-align: center;
}

.summary-card {
    flex: 1;
    padding: 1rem; /* Padding ajusté pour la nouvelle taille de police */
    border-radius: 12px; 
    color: var(--text-inverse);
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.summary-card h3 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin: 0 0 0.5rem 0;
    font-size: 1.3rem; /* Taille du titre augmentée */
    font-weight: bold; /* Rendre le titre en gras */
}

.summary-card p {
    margin: 0;
    font-size: 2rem; /* Taille du chiffre augmentée */
    font-weight: bold;
}

/* Couleurs des cartes de résumé adaptées au thème sombre */
/* Couleurs de fond spécifiques pour chaque statut de carte */
.summary-card.active-card { background: radial-gradient(circle at top left, #48c774, #198754); }
.summary-card.total-card { background: radial-gradient(circle at top left, #5c85f2, #2f5ed2); } /* Bleu d'accentuation pour le total */
.summary-card.expiring-card { background: radial-gradient(circle at top left, #ffcd39, #d39e00); } /* Jaune-orange plus foncé */
.summary-card.expired-card { background: radial-gradient(circle at top left, #ef5350, #b02a37); }
.summary-card.future-card { background: radial-gradient(circle at top left, #868e96, #495057); } /* Gris pour les futures */

/* Assure que les cartes restent des blocs et n'ont pas de soulignement de lien */
.summary-link {
    text-decoration: none;
    color: inherit; /* La couleur est gérée par la carte enfant (.summary-card) */
    flex: 1; /* Permet au lien de prendre l'espace comme le faisait le div */
}
.summary-card.active-card:hover { background: radial-gradient(circle at top left, #3db568, #157347); }
.summary-card.total-card:hover { background: radial-gradient(circle at top left, #4a73e0, #244cb3); } /* Version plus foncée du bleu au survol */
.summary-card.expiring-card:hover { background: radial-gradient(circle at top left, #ffc107, #c69500); } /* Version plus foncée du jaune-orange */
.summary-card.expired-card:hover { background: radial-gradient(circle at top left, #e53935, #a71d2a); }
.summary-card.future-card:hover { background: radial-gradient(circle at top left, #6c757d, #343a40); }

/* --- Pricing Report Layout --- */
.report-layout {
    display: grid; /* Utilise CSS Grid pour une mise en page en colonnes plus robuste */
    grid-template-columns: 450px 1fr; /* Définit une colonne fixe pour les cartes et une colonne flexible pour le graphique */
    gap: 1rem; /* Espace réduit entre les colonnes pour donner plus de largeur au graphique */
    margin-bottom: 2rem;
}

.summary-column {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.summary-column .summary-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.chart-container {
    flex: 1;
    min-width: 0; /* Permet au conteneur de rétrécir en dessous de sa taille de contenu (Fix Chart.js flexbox) */
    background-color: var(--bg-card);
    padding: 0.5rem; /* Padding réduit pour laisser plus de place au graphique et à la légende */
    border-radius: 12px;
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
}

.chart-container h3 {
    margin-top: 0;
    font-size: 1.1rem;
    color: var(--text-main);
    margin-bottom: 1rem;
    text-align: center;
}

.chart-wrapper {
    position: relative;
    flex: 1; /* Le graphique prend tout l'espace disponible en hauteur */
    height: auto; /* On retire la hauteur fixe */
    min-height: 200px; /* Hauteur minimale de sécurité */
    width: 100%;
}

/* Search Form */
.filter-group {
    display: flex; /* Aligne les filtres (Client, Produit) horizontalement */
    align-items: center; /* Centre les filtres verticalement pour un alignement parfait */
    gap: 0.5rem; /* Espace réduit entre chaque groupe de filtre */
}

/* Styles pour les éléments directs du groupe de filtres (input, select) */
.filter-group > .search-input,
.filter-group > select,
.search-form > input[type="text"] { /* Cible aussi les inputs de recherche simples */
    padding: 0 0.7rem; /* Padding vertical retiré, géré par la hauteur */
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background-color: var(--bg-input);
    color: var(--text-main);
    font-size: 1rem;
    height: 40px; /* Hauteur fixe pour un alignement parfait */
    box-sizing: border-box; /* S'assure que la bordure est incluse dans la hauteur */
    transition: border-color 0.2s;
}

.filter-group > .search-input:focus,
.filter-group > select:focus,
.search-form > input[type="text"]:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.25rem rgba(var(--primary-rgb), 0.25); /* Ombre bleue au focus */
}

.filter-group > .search-input {
    width: 180px; /* Largeur réduite pour gagner de l'espace */
    flex-grow: 0; /* On désactive l'agrandissement automatique */
}

.filter-group > select {
    width: 180px; /* Largeur réduite pour éviter le chevauchement sur les petits écrans */
}

/* Search Form */
.search-form {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 0;
    align-items: center;
    /* max-width est retiré pour permettre au formulaire de prendre plus de place */
    flex-grow: 1; /* Permet au formulaire de s'étendre */
    min-width: 0; /* Correction pour flexbox dans certains navigateurs */
}

/* Nouveau groupe pour les boutons de recherche et d'effacement */
.search-actions-group {
    display: flex;
    align-items: center;
    gap: 0.5rem; /* Espace réduit entre le bouton de recherche et le bouton "Clear" */
}


/* --- Dropdown pour la sélection des colonnes --- */
.dropdown-container {
    position: relative;
    display: inline-block;
}

.dropdown-menu {
    display: none; /* Caché par défaut */
    position: absolute;
    right: 0;
    top: calc(100% + 0.5rem); /* Se positionne sous le bouton avec un petit espace */
    background-color: var(--bg-card);
    min-width: 220px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.3);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    z-index: 10;
    padding: 1rem;
}

.dropdown-menu p {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.dropdown-item {
    display: block;
    padding: 0.2rem 0;
    color: var(--text-main);
    cursor: pointer;
}

.dropdown-item input[type="checkbox"] {
    margin-right: 0.75rem;
    vertical-align: middle;
    accent-color: var(--primary-color); /* Force la couleur de la coche en bleu sur tous les navigateurs */
}

.dropdown-apply-btn {
    margin-top: 0.75rem;
}

.search-form .search-btn, 
.search-form .clear-search-btn,
.filter-group .clear-search-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: auto;
    padding: 0 1rem; /* Padding vertical retiré, géré par la hauteur */
    font-size: 1rem; /* Taille de police harmonisée */
    font-weight: normal; /* Utilisation de 'normal' (400) pour une consistance maximale */
    height: 40px; /* Hauteur fixe, identique aux inputs */
    box-sizing: border-box; /* S'assure que la bordure est incluse dans la hauteur */
    border-radius: 12px; /* Coins arrondis, comme les autres boutons */
}

.search-btn {
    background-color: var(--primary-color);
    border: none;
}
.search-btn:hover {
    background-color: var(--primary-hover);
}

.clear-search-btn {
    border: 1px solid var(--text-footer);
    background-color: transparent; 
    color: var(--text-muted);
    text-decoration: none;
    font-weight: normal; /* Utilisation de 'normal' (400) pour une consistance maximale */
    transition: background-color 0.2s, color 0.2s;
}
.clear-search-btn:hover {
    background-color: #6c757d;
    color: white;
}

.clear-search-btn--hidden {
    visibility: hidden; /* Occupe l'espace mais n'est pas visible, pour éviter le décalage */
    pointer-events: none; /* Empêche les clics sur le bouton caché */
}

.table-wrapper {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    margin-top: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Style pour les tableaux avec en-tête "sticky" (Dashboard, Licenses, etc.) */
.table-wrapper.table-sticky-header {
    /* On retire la hauteur maximale et le défilement interne.
       overflow: visible est crucial pour que position:sticky fonctionne
       avec le défilement de la page et non du conteneur. */
    overflow: visible;
}

/* Le titre du tableau n'est plus collant, mais on garde les coins arrondis */
.table-wrapper.table-sticky-header .data-table caption {
    border-top-left-radius: 11px;
    border-top-right-radius: 11px;
}

.table-wrapper.table-sticky-header .data-table thead th {
    position: sticky; /* Rend l'en-tête "collant" */
    /* La valeur de 'top' est 0 pour coller au haut de la fenêtre */
    top: 0;
    z-index: 2; /* S'assure qu'il reste au-dessus du contenu qui défile */
    /* Le background-color est déjà défini sur thead th, ce qui est nécessaire pour cacher le contenu en dessous */
}

/* On arrondit les coins inférieurs de la dernière ligne pour correspondre au conteneur */
.table-wrapper.table-sticky-header > .data-table tbody tr:last-child td:first-child {
    border-bottom-left-radius: 11px;
}
.table-wrapper.table-sticky-header > .data-table tbody tr:last-child td:last-child {
    border-bottom-right-radius: 11px;
}

/* On arrondit aussi le coin de la barre de statut sur la dernière ligne pour un fini parfait */
.table-wrapper.table-sticky-header > .data-table tbody tr:last-child td:first-child::before {
    border-bottom-left-radius: 11px;
}

/* Style spécifique pour le conteneur du tableau en mode supervision */
.supervision-table-wrapper {
    /* La hauteur fixe est retirée pour que le tableau prenne sa hauteur naturelle.
       overflow: hidden est nécessaire pour que l'animation de défilement ne déborde pas
       une fois que la hauteur sera définie dynamiquement par JavaScript. */
    overflow: hidden; 
}

/* Style spécifique pour le conteneur des cartes en mode supervision */
.supervision-cards-wrapper {
    overflow: hidden;
}

/* --- Animation de défilement pour le mode Supervision --- */
@keyframes scroll-up {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(-50%);
    }
}

.data-table tbody.scrolling,
.cards-grid.scrolling {
    /* La durée est définie par JS pour s'adapter au nombre de lignes */
    animation: scroll-up linear infinite;
    will-change: transform;
    transform: translate3d(0, 0, 0); /* Force l'accélération matérielle (GPU) */
    backface-visibility: hidden; /* Améliore le rendu et évite les scintillements */
}

.data-table tbody.scrolling:hover,
.cards-grid.scrolling:hover {
    animation-play-state: paused;
}

.data-table {
    width: 100%;
    border-collapse: collapse; /* Comportement par défaut pour tous les tableaux */
    font-size: 0.95rem;
}

/* Style spécifique pour le tableau de supervision pour corriger le bug de défilement */
.data-table.supervision-table {
    border-collapse: separate; /* Nécessaire pour que l'animation de défilement fonctionne correctement */
    border-spacing: 0; /* Annule l'espacement par défaut de 'separate' */
}

/* Style pour le titre du tableau (utilisé sur le dashboard) */
.data-table caption {
    text-align: left;
    font-size: 1.1rem;
    font-weight: 600;
    padding: 0.6rem 1rem;
    background-color: var(--bg-caption);
    color: var(--text-caption);
    /* Ajoute une ligne de séparation subtile entre le titre et l'en-tête du tableau */
    border-bottom: 1px solid var(--border-color);
}

/* Correction pour le mode supervision : s'assure que les en-têtes restent au-dessus du corps qui défile */
.data-table.supervision-table caption,
.data-table.supervision-table thead {
    position: relative; /* Nécessaire pour que z-index fonctionne */
    z-index: 1; /* Place les en-têtes sur une couche supérieure au tbody animé */
}

.data-table th, .data-table td {
    padding: 0.4rem 1rem;
    border-bottom: 1px solid var(--border-light);
    border-right: 1px solid var(--border-light);
    text-align: left;
    vertical-align: middle;
}

/* On retire le séparateur vertical sur la dernière colonne pour un rendu plus propre */
.data-table th:last-child,
.data-table td:last-child {
    border-right: none;
}

/* Classe pour corriger la hauteur des cellules contenant un bouton unique */
.data-table td.cell-with-btn,
.data-table td.cell-actions {
    /* On ajuste le padding de la cellule pour compenser celui du bouton,
       afin que la hauteur totale de la ligne reste cohérente.
       Padding cellule (0.5rem) + Padding bouton (0.3rem) = Padding normal (0.8rem) */
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
}

.data-table thead th {
    background-color: var(--bg-element);
    font-weight: 600;
    color: var(--text-main);
    /* La bordure supérieure est retirée pour permettre aux coins arrondis de s'appliquer correctement */
    /* On rend la bordure du bas de l'en-tête plus visible pour la séparer du corps du tableau */
    border-bottom-color: var(--border-color);
}

/* On retire la bordure du bas sur la dernière ligne pour que les coins arrondis soient parfaits */
.data-table tbody tr:last-child td { 
    border-bottom: none;
}

/* Espacement automatique entre les tableaux successifs (ex: Pricing Report) */
.table-wrapper + .table-wrapper {
    margin-top: 2rem;
}

/* Style spécifique pour enlever les bordures verticales sur certains tableaux */
.data-table.dashboard-table th,
.data-table.dashboard-table td,
.data-table.licenses-table th,
.data-table.licenses-table td,
.data-table.product-table th,
.data-table.product-table td,
.data-table.client-table th,
.data-table.client-table td,
.data-table.user-table th,
.data-table.user-table td,
.data-table.supervision-table th,
.data-table.supervision-table td,
.data-table.pricing-report-table th,
.data-table.pricing-report-table td,
.data-table.preview-table th,
.data-table.preview-table td,
.data-table.model-table th,
.data-table.model-table td,
.data-table.mobile-table th,
.data-table.mobile-table td,
.data-table.type-table th,
.data-table.type-table td {
    border-right: none;
}

.data-table tbody tr {
    /* La position relative est déplacée pour éviter les problèmes d'alignement des colonnes */
    background-color: transparent; /* Hérite du fond du wrapper */
}

/* Applique l'effet de survol à toutes les lignes, SAUF à la ligne conteneur du sous-tableau */
.data-table tbody tr:not(.model-row):hover {
    background-color: var(--bg-hover);
}

/* --- Style pour la mise en évidence d'une ligne --- */
@keyframes highlight-flash-twice {
    0%, 100% { 
        background-color: transparent; 
        transform: scale(1);
        box-shadow: none;
    }
    10%, 50% { 
        background-color: rgba(var(--primary-rgb), 0.5); 
        transform: scale(1.02); /* Zoom plus prononcé */
        box-shadow: 0 0 25px rgba(0,0,0,0.4); /* Ombre plus marquée pour le relief */
    } 
    30%, 70% { 
        background-color: transparent; 
        transform: scale(1);
        box-shadow: none;
    } 
}

.data-table tbody tr.highlight-row {
    /* On applique la nouvelle animation sur 2 secondes. */
    animation: highlight-flash-twice 2s ease-out;
    animation-delay: 0.2s; /* Délai pour laisser le temps au JS de s'exécuter sans flash visuel */
    position: relative; /* Nécessaire pour que le zoom passe au-dessus */
    z-index: 5;
}

/* Animation spécifique pour les cartes en évidence */
.license-card.highlight-row {
    animation: highlight-card-blue-flash 2s ease-out;
    animation-delay: 0.2s; /* Délai pour laisser le temps au JS de s'exécuter sans flash visuel */
    z-index: 10; /* S'assure que la carte passe au-dessus des autres pendant l'animation */
    position: relative; /* Nécessaire pour le z-index */
}

@keyframes highlight-card-blue-flash {
    0%, 100% { 
        background-color: var(--bg-element);
        border-color: var(--border-color); 
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        transform: scale(1);
    }
    10%, 50% { 
        background-color: rgba(var(--primary-rgb), 0.6); /* Flash Bleu */
        border-color: var(--primary-color); 
        box-shadow: 0 0 20px rgba(var(--primary-rgb), 0.5);
        transform: scale(1.02);
    } 
    30%, 70% { 
        background-color: var(--bg-element);
        border-color: var(--border-color); 
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        transform: scale(1);
    } 
}

.cell-center {
    text-align: center;
}

/* --- STYLE DE STATUT AVEC BARRE PSEUDO-ÉLÉMENT (pour éviter le décalage) --- */

/* La première cellule des lignes avec statut doit être positionnée relativement */
.data-table tbody tr[class^="status-"] td:first-child {
    position: relative;
    /* On ajoute un padding à gauche pour faire de la place à la barre de statut.
       10px (barre) + 16px (padding original de 1rem) = 26px. On arrondit à 28px. */
    padding-left: 28px;
}

/* Création de la barre de statut via un pseudo-élément */
.data-table tbody tr[class^="status-"] td:first-child::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 10px; /* Épaisseur de la barre */
    height: 100%;
}

/* Application des couleurs spécifiques à la barre */
.data-table tbody tr.status-active td:first-child::before { background: linear-gradient(to bottom, #4cd964, #198754); }
.data-table tbody tr.status-expiring td:first-child::before { background: linear-gradient(to bottom, #ffcd39, #e69500); }
.data-table tbody tr.status-expired td:first-child::before { background: linear-gradient(to bottom, #ff4d4d, #c82333); }
.data-table tbody tr.status-future td:first-child::before { background: linear-gradient(to bottom, #adb5bd, #495057); }

/* --- Style pour la cellule de statut avec icône --- */
.status-cell-content {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem; /* Espace entre l'icône et le texte */
    justify-content: center; /* Centre le contenu dans la cellule */
    font-weight: 700; /* Gras pour correspondre aux cartes */
}

/* On donne une couleur spécifique au contenu (icône + texte) pour qu'elles correspondent aux cartes */
.data-table tbody tr.status-active .status-cell-content {
    color: #28a745;
}
.data-table tbody tr.status-expiring .status-cell-content {
    color: #e69500; /* Jaune-orange plus foncé */
}
.data-table tbody tr.status-expired .status-cell-content {
    color: #dc3545;
}
.data-table tbody tr.status-future .status-cell-content {
    color: #6c757d;
}

/* --- STYLE POUR LES TABLES DE GESTION (Produits, Clients, Utilisateurs) --- */

/* On cible la première cellule de chaque ligne dans les tables concernées */
.data-table.product-table tbody tr td:first-child,
.data-table.client-table tbody tr td:first-child,
.data-table.user-table tbody tr td:first-child,
.data-table.pricing-report-table > tbody > tr > td:first-child,
.data-table.model-table tbody tr td:first-child,
.data-table.type-table tbody tr td:first-child {
    position: relative;
    padding-left: 28px; /* Espace pour la barre (10px) + padding (1rem) */
}

/* On crée la barre bleue avec un pseudo-élément pour ces tables */
.data-table.user-table tbody tr td:first-child::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 10px; /* Épaisseur de la barre */
    height: 100%;
    background: linear-gradient(to bottom, #0dcaf0, #087990);
}

/* Barre bleue avec dégradé pour la table des produits */
.data-table.product-table tbody tr td:first-child::before,
.data-table.pricing-report-table > tbody > tr > td:first-child::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 10px;
    height: 100%;
    background: linear-gradient(to bottom, #5c85f2, #2f5ed2);
}

/* Barre violette spécifique pour la table des clients */
.data-table.client-table tbody tr td:first-child::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 10px;
    height: 100%;
    background: linear-gradient(to bottom, #9d5ce5, #6f42c1);
}

/* Barre rose spécifique pour la table des modèles (liste principale) */
.data-table.model-table tbody tr td:first-child::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 10px;
    height: 100%;
    background-color: #d63384;
    background: linear-gradient(to bottom, #f06595, #d63384);
}

/* Barre teal spécifique pour la table des types */
.data-table.type-table tbody tr td:first-child::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 10px;
    height: 100%;
    background: linear-gradient(to bottom, #20c997, #087f5b);
}

/* Styles pour les boutons d'action dans les tableaux */
.actions-cell {
    display: flex;
    gap: 0.5rem;
    white-space: nowrap; /* Empêche les boutons de passer à la ligne */
    align-items: center; /* Aligne verticalement les boutons pour corriger les décalages de 1px */
}

.action-btn {
    display: inline-flex; /* Aligne l'icône et le texte */
    align-items: center; /* Centre verticalement */
    gap: 0.4rem; /* Espace original, plus compact */
    padding: 0.25rem 0.6rem; /* Padding réduit pour des lignes plus fines */
    border-radius: 12px;
    color: white;
    font-size: 0.85rem; /* Taille de police originale */
    font-weight: normal; /* Utilisation de 'normal' (400) pour une consistance maximale */
    text-decoration: none;
    transition: background-color 0.2s;
    background-color: var(--text-footer);
}

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

.delete-btn {
    background-color: #dc3545; /* Danger red */
}

.action-btn:hover {
    background-color: #6c757d; /* Gris secondaire plus foncé */
}
.edit-btn:hover {
    background-color: var(--primary-hover);
}
.delete-btn:hover { 
    background-color: #c82333; /* Rouge danger plus foncé */
}

.add-btn {
    display: inline-flex; /* Permet d'aligner l'icône et le texte */
    align-items: center; /* Centre verticalement l'icône et le texte */
    justify-content: center; /* Centre le contenu horizontalement (important pour les balises <a>) */
    gap: 0.5rem; /* Espace entre l'icône et le texte */
    width: auto;
    padding: 0 1rem; /* Padding horizontal uniquement */
    font-size: 1rem; /* Taille de police harmonisée */
    font-weight: normal; /* Utilisation de 'normal' (400) pour une consistance maximale */
    background-color: var(--primary-color);
    height: 40px; /* Hauteur fixe pour tous les boutons */
    border: none;
    border-radius: 12px; /* Ajout pour correspondre aux autres boutons */
    box-sizing: border-box; /* Assure un calcul de taille cohérent avec les autres boutons */
    font-family: inherit;   /* Assure une police cohérente avec les autres boutons */
    color: white; /* Assure que le texte est blanc même sur un lien <a> */
    text-decoration: none; /* Retire le soulignement sur un lien <a> */
    cursor: pointer;
    transition: background-color 0.2s; /* Ajout pour l'animation au survol */
}
.add-btn:hover {
    background-color: var(--primary-hover);
}

.modal-cancel-btn {
    background-color: #6c757d; /* Gris neutre pour le bouton annuler */
}
.modal-cancel-btn:hover {
    background-color: #5a6268; /* Gris plus foncé au survol */
}
.copy-btn {
    background-color: var(--primary-color);
    width: auto;
    padding: 0.4rem 0.8rem;
    font-size: 0.85rem;
    font-weight: normal; /* Utilisation de 'normal' (400) pour une consistance maximale */
    border: 1px solid var(--primary-color);
    transition: background-color 0.2s, border-color 0.2s; /* Ajout d'une transition douce */
}

.copy-btn.copied {
    background-color: #28a745; /* Vert succès */
    border-color: #28a745;
}

.key-container {
    display: flex;
    align-items: center;
    gap: 1rem;
    background-color: var(--bg-body);
    border: 1px solid var(--border-color);
    padding: 0.5rem 1rem; 
    border-radius: 12px;
    margin: 0; /* On retire la marge pour que l'espacement soit géré par le .modal-body */
}

#license-key-display {
    flex-grow: 1;
    margin: 0;
    white-space: pre-wrap;
    word-wrap: break-word;
    user-select: all; /* Allows user to select the text */
}

.form-actions {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
    align-items: center;
}

/* Harmonise la hauteur des boutons dans les conteneurs d'actions de formulaire */
.form-actions button,
.form-actions .action-btn {
    display: inline-flex; /* Permet d'aligner l'icône et le texte */
    align-items: center; /* Centre verticalement l'icône et le texte */
    gap: 0.5rem; /* Espace entre l'icône et le texte */
    width: auto; /* Annule le width: 100% global */
    padding: 0 1rem; /* Padding horizontal uniquement */
    box-sizing: border-box; /* Calcul de taille identique */
    height: 40px; /* Hauteur fixe pour tous les boutons */
    border: none; /* Assure l'absence de bordure par défaut */
    font-family: inherit; /* Forcer l'héritage de la police, que les boutons ne font pas toujours */
    font-size: 1rem; /* Typographie harmonisée avec les champs de saisie standard */
    font-weight: normal; /* Utilisation de 'normal' (400) pour une consistance maximale */
    /* On s'assure que les liens <a> se comportent comme des boutons */
    text-decoration: none;
}

.settings-row .settings-block .form-actions {
    margin-top: auto; /* Pousse les actions en bas lorsque les blocs sont de hauteurs différentes */
    padding-top: 1.5rem; /* Ajoute un espace au-dessus des boutons pour remplacer l'ancienne marge */
}

/* Styles pour la fenêtre modale */
.modal-overlay {
    position: fixed; /* Reste en place même si on scrolle */
    z-index: 1000; /* Au-dessus de tout le reste */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* Permet de scroller si le contenu est trop grand */
    background-color: rgba(0,0,0,0.5); /* Fond noir semi-transparent */
    display: flex; /* Utilise flexbox pour centrer le contenu */
    justify-content: center;
    align-items: center;
}

.modal-content {
    background-color: var(--bg-card);
    margin: auto;
    padding: 2rem;
    border: 1px solid var(--border-light);
    width: 80%; 
    max-width: 500px;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    position: relative;
    animation: fadeIn 0.3s;
}

/*
 * Style pour les modales d'ajout/édition :
 * Fait en sorte que les deux boutons (ex: "Save" et "Cancel")
 * se partagent la largeur de manière égale.
 */
#add-record-modal .form-actions .action-btn,
#edit-record-modal .form-actions .action-btn,
#add-client-modal .form-actions .action-btn,
#edit-client-modal .form-actions .action-btn,
#add-product-modal .form-actions .action-btn,
#edit-product-modal .form-actions .action-btn,
#add-user-modal .form-actions .action-btn,
#edit-user-modal .form-actions .action-btn,
#add-model-modal .form-actions .action-btn,
#edit-model-modal .form-actions .action-btn,
#add-type-modal .form-actions .action-btn,
#edit-type-modal .form-actions .action-btn {
    flex: 1; /* Permet aux boutons de grandir et d'occuper l'espace disponible de manière égale */
    justify-content: center; /* Centre le contenu (icône + texte) à l'intérieur du bouton */
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-light);
}

.modal-header h2 {
    margin: 0;
    font-size: 1.5rem;
}

.close-button {
    position: absolute;
    top: 10px;
    right: 15px;
    color: var(--text-muted);
    font-size: 24px;
    font-weight: normal; /* Utilisation de 'normal' (400) pour une consistance maximale */
    background: none;
    border: none;
    cursor: pointer;
    line-height: 1; /* Assure un positionnement vertical précis */
    width: 36px; /* Largeur fixe pour un carré */
    height: 36px; /* Hauteur fixe pour un carré */
    padding: 0; /* On retire le padding */
    display: flex; /* Centrage parfait */
    align-items: center;
    justify-content: center;
    border-radius: 12px; /* Coins arrondis pour un joli effet au survol */
    transition: background-color 0.2s, color 0.2s; /* Transition douce */
}

.close-button:hover,
.close-button:focus {
    color: white; /* La croix devient blanche */
    background-color: var(--primary-color);
    text-decoration: none;
    cursor: pointer;
    outline: none; /* Retire le contour de focus par défaut */
}

.modal-body {
    padding-top: 1.5rem;
}

#show-key-modal .modal-body {
    padding-top: 0.5rem;
}

@keyframes fadeIn {
    from {opacity: 0; transform: translateY(-20px);}
    to {opacity: 1; transform: translateY(0);}
}

/* Styles for the new notifications page */
.input-group input[type="checkbox"] {
    width: auto; /* Let the checkbox take its natural width */
    margin-right: 0.75rem;
    vertical-align: middle;
    transform: scale(1.2); /* Make checkbox slightly larger */
    accent-color: var(--primary-color); /* Change la couleur de la coche en bleu */
}

.input-group input[type="checkbox"]:focus {
    box-shadow: none;
    outline: none;
}

.checkbox-label {
    vertical-align: middle;
}

.input-group small {
    display: block;
    margin-top: 0.5rem;
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* Nouveau style pour séparer les blocs de paramètres sur la page de notifications */
.settings-block {
    background-color: var(--bg-element);
    padding: 1.5rem 2rem;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    margin-bottom: 2.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.settings-block h3 {
    margin-top: 0;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 1rem;
    font-size: 1.25rem; /* Taille de police légèrement augmentée pour les titres de section */
}

.settings-block h4 {
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 1.1rem;
    font-weight: 600;
}

/* On s'assure que le dernier bloc n'a pas de marge en bas pour un espacement propre */
/* Cible uniquement le dernier .settings-block qui est un enfant direct de <main> */
main > .settings-block:last-child {
    margin-bottom: 0;
}

.settings-block.info-block {
    background-color: rgba(var(--primary-rgb), 0.1); /* Fond bleu très léger et transparent */
    border-left: 4px solid var(--primary-color); /* Bordure d'accentuation */
}

/* Styles pour le bloc d'information sur la page de notifications */
.settings-block.info-block p {
    margin-top: 0;
    line-height: 1.6;
}

.settings-block.info-block ul {
    padding-left: 1.5rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.settings-block.info-block li {
    margin-bottom: 0.75rem;
}

.settings-block.info-block code {
    background-color: var(--bg-input);
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.9rem;
    border: 1px solid var(--border-color);
}
/* Nouveau conteneur pour mettre des blocs de paramètres côte à côte */
.settings-row {
    display: flex;
    gap: 2rem; /* Ajoute un espace entre les blocs */
}

/* Les formulaires à l'intérieur de la rangée prennent une part égale de l'espace */
.settings-row > form,
.settings-row > .info-block-container {
    flex: 1;
    display: flex; /* Permet au .settings-block de s'étirer */
}

/* On annule la marge inférieure des blocs à l'intérieur de la rangée,
   car la rangée elle-même gère l'espacement. */
.settings-row .settings-block {
    margin-bottom: 0;
    width: 100%; /* S'assure que le bloc prend toute la largeur du formulaire parent */
    display: flex; /* Permet de gérer l'espacement interne avec flexbox */
    flex-direction: column; /* Empile les éléments du formulaire verticalement */
}

/* Styles pour le contenu des informations de licence sur la page d'activation */
.license-info-content p {
    margin: 0 0 1rem 0;
    line-height: 1.6;
    font-size: 1rem;
}
.license-info-content p:last-child {
    margin-bottom: 0;
}
.license-info-content strong {
    color: var(--text-heading);
}

/* Grille pour les détails de la licence sur la page d'activation */
.license-info-grid {
    display: flex;
    gap: 2.5rem; /* Espace entre les colonnes */
    margin-top: 1.5rem; /* Espace après la clé de licence */
    padding-top: 1.5rem; /* Espace au-dessus de la grille */
    border-top: 1px solid var(--border-color);
    position: relative; /* Nécessaire pour le positionnement du séparateur vertical */
}

/* Séparateur vertical discret placé au milieu de l'espace (gap) */
.license-info-grid::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 1.5rem; /* Doit correspondre au padding-top pour commencer sous la bordure */
    bottom: 0;
    width: 1px;
    background-color: var(--border-color);
    transform: translateX(-50%); /* Centre la ligne parfaitement */
}

.license-info-col { flex: 1; }
/* Style pour l'affichage des infos de licence */
.license-info {
    background-color: var(--bg-body);
    border: 1px solid var(--border-light);
    border-radius: 12px; /* Harmonisé avec .settings-block */
    padding: 1.5rem;
    margin-top: 1.5rem;
    text-align: left;
}

/* --- Footer --- */
footer {
    /* La marge automatique cause des problèmes avec flexbox. On la simplifie. */
    margin-top: 2.5rem; 
    text-align: center;
    padding-top: 1.5rem; /* Espace au-dessus du texte */
    color: var(--text-footer);
    font-size: 0.85rem;
    border-top: 1px solid var(--border-color);
    padding-bottom: 2rem; /* Ajoute un peu d'espace en bas de page */
}

/*
 * Contraint la largeur du footer sur les pages principales pour qu'il s'aligne
 * avec le conteneur principal, sans affecter les pages de connexion/installation.
 */
.dashboard-container + footer {
    max-width: 1600px; /* Doit correspondre à la nouvelle largeur de .dashboard-container */
    margin: 2.5rem auto 0 auto; /* Centre le footer horizontalement et conserve la marge du haut */
}

/* Styles existants... */

/* Ajout pour tronquer le nom d'utilisateur dans le header */
.username-truncate {
    display: inline-block; /* Nécessaire pour que max-width fonctionne */
    max-width: 110px;      /* Ajustez cette valeur si nécessaire */
    white-space: nowrap;   /* Empêche le texte de passer à la ligne */
    overflow: hidden;      /* Cache le texte qui dépasse */
    text-overflow: ellipsis; /* Ajoute les "..." */
    vertical-align: bottom;  /* Aligne le texte avec "Welcome," */
}

/* --- Notifications Layout --- */
.notifications-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-bottom: 2rem;
    grid-auto-rows: 1fr;
}

.notifications-left {
    grid-column: 1;
    display: flex;
}

.notifications-left form {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.notifications-left .settings-block {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 400px;
    margin-bottom: 0;
}

.notifications-left .settings-block .form-actions {
    margin-top: auto;
}

.notifications-right {
    grid-column: 2;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.notifications-right .settings-block {
    margin-bottom: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.notifications-right form {
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* --- Styles pour l'importation CSV (Preview) --- */
.data-table tr.invalid-row {
    opacity: 0.8;
    background-color: rgba(220, 53, 69, 0.1); /* Fond rouge très léger */
}

.data-table td.invalid-cell {
    background-color: rgba(220, 53, 69, 0.25) !important; /* Fond rouge plus prononcé pour la cellule en erreur */
}

.import-status-error { color: #dc3545; }
.import-status-success { color: #28a745; }

.import-badge {
    font-size: 0.85em;
    margin-left: 8px;
}
.import-badge.new-product { color: var(--primary-color); }
.import-badge.new-client { color: #ffc107; }

/* --- Sidebar Layout (Users, Clients) --- */
.sidebar-layout {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
}

.sidebar-list {
    flex: 1;
    min-width: 0; /* Permet au tableau de rétrécir si nécessaire */
}

.sidebar-list .table-wrapper {
    margin-top: 0;
}

.sidebar-list .cards-grid {
    margin-top: 0 !important;
}

.sidebar-legend {
    flex: 0 0 400px;
    position: sticky; /* Rend le bloc collant */
    top: 1.5rem;
}

/* --- Logo Theme Switching --- */
/* By default (dark mode), show the white logo and hide the black one */
.logo-light-theme {
    display: none;
}
.logo-dark-theme {
    display: block;
}

/* In light mode, do the opposite */
html.light-mode .logo-dark-theme {
    display: none;
}
html.light-mode .logo-light-theme {
    display: block;
}

/* --- Password Policy Validation --- */
.password-requirements {
    margin-top: 0.5rem;
    margin-bottom: 1.5rem;
    font-size: 0.85rem;
    background-color: var(--bg-element);
    padding: 1rem;
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.password-requirements p {
    margin: 0 0 0.5rem 0;
    font-weight: bold;
    color: var(--text-muted);
}

.password-requirements ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.password-requirements li {
    margin-bottom: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: color 0.2s;
}

.password-requirements li.invalid {
    color: var(--text-muted); /* Gris par défaut */
}

.password-requirements li.invalid i {
    color: #dc3545; /* Croix rouge */
}

.password-requirements li.valid {
    color: #28a745; /* Texte vert */
}

/* --- Icon Grid Selection (Types) --- */
.icon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); /* Cellules légèrement plus petites */
    gap: 8px;
    margin-top: 0.5rem;
    max-height: 160px;
    overflow-y: auto;
    padding: 8px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background-color: var(--bg-input);
}

.icon-option {
    /* Remplacement de flexbox par une méthode plus simple pour le centrage vertical/horizontal */
    height: 38px;
    line-height: 38px; /* Doit correspondre à la hauteur pour le centrage vertical */
    border-radius: 6px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    color: var(--text-muted);
    border: 1px solid transparent;
}

.icon-option:hover {
    background-color: var(--bg-hover);
    color: var(--text-main);
}

/* L'état sélectionné est géré via JS qui ajoute la classe .selected */
.icon-option.selected {
    background-color: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.icon-option i {
    font-size: 1.2rem;
    pointer-events: none; /* Empêche l'icône de capturer le clic */
    vertical-align: middle; /* Aide au centrage avec la technique line-height */
}

/* Masquer les boutons radio natifs */
.icon-grid input[type="radio"] {
    display: none;
}

/* --- Pricing Report Expandable Rows --- */
.expand-btn {
    background: none;
    border: none;
    cursor: pointer;
    margin-right: 8px;
    color: var(--text-main);
    width: 20px;
    height: auto; /* Override default button height */
    padding: 0;
    transition: transform 0.2s;
}

.expand-btn:hover {
    color: #2f5ed2;
    background: none;
}

.expand-btn i {
    transition: transform 0.3s ease;
    display: inline-block; /* Nécessaire pour que la transformation fonctionne correctement */
}

tr.expanded .expand-btn i {
    transform: rotate(90deg);
}

.model-row {
    background-color: var(--bg-element);
}

/* Wrapper pour l'animation d'ouverture/fermeture */
.expandable-content {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
}

.model-details-table {
    width: 95%;
    margin: 10px auto;
    font-size: 0.9em;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    border-collapse: separate; /* Nécessaire pour le border-radius sur un tableau */
    border-spacing: 0;
    overflow: hidden;
}

.model-details-table th {
    background-color: var(--bg-card);
    color: var(--text-muted);
}

/* Ajouter un effet de survol spécifique pour les lignes du sous-tableau */
.data-table.model-details-table tbody tr:hover {
    background-color: rgba(0, 0, 0, 0.1) !important;
}

/* Force une couleur de bordure visible pour les lignes du sous-tableau */
.data-table.model-details-table td {
    border-bottom: 1px solid var(--border-color) !important;
    border-radius: 0 !important;
}

/* Retire la bordure du bas pour la dernière ligne */
.data-table.model-details-table tbody tr:last-child td {
    border-bottom: none !important;
}

/* Barre latérale distinctive pour les lignes du sous-tableau (Modèles) */
/* Sélecteur rendu plus spécifique pour garantir que le padding est appliqué et gagne contre toute autre règle. */
body .data-table.pricing-report-table tr.model-row .model-details-table tbody tr td:first-child {
    position: relative;
    /* Utilisation de border-left au lieu de pseudo-élément pour garantir la visibilité */
    border-left: none !important;
    padding-left: 28px !important;
    border-radius: 0 !important; /* Force les coins carrés pour la barre rose */
    /* Remplacement du pseudo-élément par un background gradient pour éviter les problèmes d'arrondi */
    background-image: linear-gradient(to bottom, #f06595, #d63384);
    background-size: 10px 100%;
    background-repeat: no-repeat;
    background-position: left top;
}

.data-table.model-details-table tbody tr td:first-child::before {
    display: none !important;
}

/* --- Correctifs pour le tableau de rapport de prix --- */

/* 1. Enlever la barre bleue (status) des lignes de modèles (sous-tableau) */
.data-table.pricing-report-table tbody tr.model-row td:first-child::before {
    display: none;
}
.data-table.pricing-report-table tbody tr.model-row td:first-child {
    padding: 0 !important; /* Retire le padding pour permettre à l'animation de fermer complètement la ligne */
}

/* 2. Arrondir le coin de la barre bleue pour le dernier produit si ses modèles sont cachés */
.table-wrapper.table-sticky-header .data-table.pricing-report-table tbody tr.is-last-product:not(.expanded) td:first-child::before {
    border-bottom-left-radius: 11px;
}

/* --- Email Chip Input (Notifications) --- */
.email-input-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background-color: var(--bg-input);
    padding: 0.2rem 0.5rem; /* Padding réduit pour correspondre à la hauteur des autres champs */
    min-height: 40px;
    box-sizing: border-box; /* Assure que le padding est inclus dans la hauteur */
    align-items: center;
    cursor: text;
    transition: border-color 0.2s;
}

.email-input-container:focus-within {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.25rem rgba(var(--primary-rgb), 0.25);
}

.email-chip {
    background-color: var(--bg-element);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    padding: 0.2rem 0.6rem;
    border-radius: 16px; /* Forme de pilule */
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.email-chip .remove-email {
    cursor: pointer;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px; /* Taille paire augmentée pour un centrage parfait */
    height: 22px;
    border-radius: 50%;
    transition: background-color 0.2s, color 0.2s;
    font-size: 12px;
    padding: 2px 2px 0 0; /* Correction optique : décalage vers la gauche pour centrer parfaitement */
    box-sizing: border-box;
    line-height: 1; /* Force la hauteur de ligne pour éviter les décalages */
}

.email-chip .remove-email:hover {
    background-color: var(--text-muted);
    color: var(--bg-card);
}

.email-chip-input {
    border: none !important; /* On retire les bordures par défaut de l'input interne */
    outline: none !important;
    background: transparent !important;
    box-shadow: none !important;
    flex: 1;
    min-width: 150px;
    color: var(--text-main);
    font-family: inherit;
    font-size: 1rem;
    padding: 0 !important;
    height: auto !important;
    margin: 0 !important;
}

/* --- Card View (Dashboard) --- */

.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.license-card {
    background-color: var(--bg-element);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1rem;
    position: relative;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    overflow: hidden; /* Pour que la barre de statut suive les coins arrondis */
}

.license-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
    border-color: var(--border-light);
}

/* Barre de statut latérale sur la carte */
.license-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 6px;
}

/* Couleurs de statut pour les cartes (identiques au tableau) */
.license-card.status-active::before { background: linear-gradient(to bottom, #4cd964, #198754); }
.license-card.status-expiring::before { background: linear-gradient(to bottom, #ffcd39, #e69500); }
.license-card.status-expired::before { background: linear-gradient(to bottom, #ff4d4d, #c82333); }
.license-card.status-future::before { background: linear-gradient(to bottom, #adb5bd, #495057); }

/* Couleur spécifique pour les cartes produits (Bleu) */
.license-card.product-card::before { background: linear-gradient(to bottom, #5c85f2, #2f5ed2); }

/* Couleur spécifique pour les cartes modèles (Rose) */
.license-card.model-card::before { background: linear-gradient(to bottom, #f06595, #d63384); }

/* Couleur spécifique pour les cartes clients (Violet) */
.license-card.client-card::before { background: linear-gradient(to bottom, #9d5ce5, #6f42c1); }

/* Couleur spécifique pour les cartes types (Teal) */
.license-card.type-card::before { background: linear-gradient(to bottom, #20c997, #087f5b); }

/* Couleur spécifique pour les cartes utilisateurs (Cyan) */
.license-card.user-card::before { background: linear-gradient(to bottom, #0dcaf0, #087990); }

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.25rem;
    padding-left: 0.5rem; /* Espace pour ne pas coller à la barre de statut */
}

.card-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-main);
    margin: 0;
}

.card-subtitle {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

.card-body {
    padding-left: 0.5rem;
    font-size: 0.9rem;
    color: var(--text-main);
    flex-grow: 1; /* Pousse le footer vers le bas */
}

.card-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.3rem;
}

.card-label {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.card-value-truncate {
    max-width: 160px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    vertical-align: bottom;
}

.card-title-truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1; /* Prend l'espace disponible */
    min-width: 0; /* Permet de rétrécir en dessous du contenu */
    margin-right: 0.5rem; /* Espace avec les boutons d'action */
}

.table-cell-truncate {
    max-width: 9vw;
    min-width: 130px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.table-cell-truncate.large {
    max-width: 450px;
}