/* Fichier: style.css */
/* ==========================================================================
   Charte CFE-CGC & Variables Globales
   ========================================================================== */
:root {
    --bleu-cfe: #304899;
    --rouge-cfe: #E2241A;
    --rouge-cfe-hover: #c01f15;
    --blanc-cfe: #FFFFFF;
    --noir-cfe: #000000;
    --gris-fonce-cfe: #3C3C3B;
    --gris-moyen-cfe: #888;
    --gris-clair-cfe: #d1d5db; /* Gris plus contrasté pour les bordures */
    --gris-fond-page-debut: #f8f9fa; /* Gradient start */
    --gris-fond-page-fin: #e9ecef;   /* Gradient end */
    --gris-fond-input: #fdfdfd;
    --vert-cfe: #5FB670;
    --orange-cfe: #FF5D0E;

    --font-titre: 'Oswald', sans-serif;
    --font-texte: 'Arial', sans-serif;

    --border-radius-sm: 5px;
    --border-radius-md: 10px;
    --box-shadow-light: 0 2px 5px rgba(0, 0, 0, 0.1);
    --box-shadow-medium: 0 12px 35px rgba(0, 0, 0, 0.5);
    --box-shadow-button: 0 4px 6px rgba(0, 0, 0, 0.5);
    --box-shadow-button-hover: 0 6px 12px rgba(0, 0, 0, 0.5);
}

/* Styles généraux pour l'application */

body {
    font-family: var(--font-texte) !important;
    background: linear-gradient(to bottom, var(--gris-fond-page-debut), var(--gris-fond-page-fin)) !important;
    color: var(--gris-fonce-cfe) !important;
    min-height: 100vh;
}

h1, h2, h3, h4, h5, h6, button, .font-titre {
    font-family: var(--font-titre) !important;
}

h1 {
    color: var(--bleu-cfe) !important;
    text-transform: uppercase;
}

a {
    transition: color 0.3s ease;
}

a:hover {
    color: var(--bleu-cfe);
}

/* Champs de saisie - Respect de la charte */
input,
textarea,
select {
    font-family: var(--font-texte) !important;
}

/* Correction de l'autofill du navigateur */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px var(--gris-fond-input) inset !important;
    -webkit-text-fill-color: var(--gris-fonce-cfe) !important;
    font-size: 1.125rem !important;
    font-family: var(--font-texte) !important;
}

/* Styles spécifiques à la page des statistiques (stats.php) */
.gridjs-container {
    font-size: 14px;
}

/* Bordures des modales système avec couleurs charte */
.border-cfe-blue {
    border-color: var(--bleu-cfe) !important;
}

.border-cfe-red {
    border-color: var(--rouge-cfe) !important;
}

.border-cfe-green {
    border-color: var(--vert-cfe) !important;
}

/* Styles des tooltips personnalisés */
#tooltip-container {
    animation: tooltipFadeIn 0.2s ease-in-out;
    font-family: var(--font-texte);
    max-width: 200px;
    word-wrap: break-word;
    line-height: 1.4;
}

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

.gridjs-input {
    border: 1px solid #d1d5db;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    width: 100%;
}

.gridjs-table {
    table-layout: fixed;
    width: 100%;
}

/* Permettre aux colonnes d'être redimensionnées individuellement */
.gridjs-th {
    user-select: none;
    position: relative;
    transition: opacity 0.15s ease;
}

/* Ajouter un curseur de redimensionnement aux bordures des colonnes (desktop uniquement) */
@media (min-width: 769px) {
    .gridjs-th:not(:last-child)::after {
        content: '';
        position: absolute;
        right: 0;
        top: 0;
        height: 100%;
        width: 2px;
        background-color: #d1d5db;
        transition: background-color 0.2s;
    }

    .gridjs-th:not(:last-child):hover::after {
        background-color: #3b82f6;
        width: 3px;
    }
}

.column-resizer {
    cursor: col-resize !important;
}

.gridjs-td,
.gridjs-th-content {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: break-word;
    padding: 0.5rem 0.1rem;
}

.delete-icon {
    cursor: pointer;
    color: #9ca3af;
    transition: color 0.2s;
}

.delete-icon:hover {
    color: #ef4444;
}

#table-wrapper {
    overflow-x: auto;
    position: relative;
}

.clickable-clicks {
    font-weight: 600;
    color: #2563eb;
    cursor: pointer;
}

.clickable-clicks:hover {
    text-decoration: underline;
}

/* Style du bouton réinitialiser pour meilleure UX */
#reset-columns-btn {
    white-space: nowrap;
    transition: all 0.2s ease;
}

#reset-columns-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}