/* ---------- Structure générale ---------- */
body {
    font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: #f3f4f6; /* gris clair */
    color: #1e293b; /* gris anthracite */
    margin: 0;
    padding: 0;
}

/* ---------- Zone de contenu ---------- */
main {
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    padding: 24px;
}

/* ---------- Titres ---------- */
h1, h2, h3 {
    color: #1e3a8a; /* bleu profond */
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 16px;
}

/* ---------- Libellés de champs ---------- */
form label {
    display: block;
    font-weight: 500;
    color: #1e40af; /* bleu moyen */
    font-size: 0.95rem;
    margin-bottom: 4px;
}

/* ---------- Champs de formulaire ---------- */
form input[type="text"],
form input[type="number"],
form input[type="date"],
form input[type="email"],
form select,
form textarea {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 0.95rem;
    color: #0f172a;
    background-color: #f9fafb;
    transition: all 0.2s ease-in-out;
}

form input:focus,
form select:focus,
form textarea:focus {
    border-color: #2563eb;
    outline: none;
    box-shadow: 0 0 4px rgba(37, 99, 235, 0.3);
}

.form-buttons-right{
    margin-top: 20px;
    text-align: right;
}

.form-container {
    width: 100%;
    max-width: 100%;
    grid-column: 1 / -1;
}

/* ---------- Grid 6 colonnes ---------- */
form.grid-6cols {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

form.grid-6cols .field > input,
form.grid-6cols .field > select,
form.grid-6cols .field > textarea {
    display: block;
    width: 100%;
}

form.grid-6cols fieldset.form-block {
    padding-top: 28px;
    position: relative;
    margin-bottom: 12px;
}

.form-block {
    grid-column: 1 / -1;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 12px 14px 10px;
    background-color: #f8fafc;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px 12px;
}

form.grid-6cols fieldset.form-block > legend {
    position: absolute;
    top: 0px;
    left: 8px;
    padding: 4px 8px;
    font-weight: 600;
    color: #1e3a8a;
    font-size: 0.95rem;
}

.gcol-1 { grid-column: span 1; }
.gcol-2 { grid-column: span 2; }
.gcol-3 { grid-column: span 3; }
.gcol-4 { grid-column: span 4; }
.gcol-5 { grid-column: span 5; }
.gcol-6 { grid-column: span 6; }

.field {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.form-block > .gcol-1 { grid-column: span 1; }
.form-block > .gcol-2 { grid-column: span 2; }
.form-block > .gcol-3 { grid-column: span 3; }
.form-block > .gcol-4 { grid-column: span 4; }
.form-block > .gcol-5 { grid-column: span 5; }
.form-block > .gcol-6 { grid-column: span 6; }

.field select,
.field input,
.field textarea {
    width: 100%;
    min-width: 0;
}

fieldset.form-block {
    min-width: 0;
    width: 100%;
}

/* ---------- Boutons ---------- */
form.grid-6cols .full-width {
    grid-column: 1 / -1;
    margin-top: 16px;
    text-align: right;
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
    form.grid-6cols,
    .form-block {
        grid-template-columns: 1fr;
    }

    .gcol-1, .gcol-2, .gcol-3,
    .gcol-4, .gcol-5, .gcol-6 {
        grid-column: span 1;
    }
}

/* ---------- Messages système ---------- */
.messages {
    margin-bottom: 12px;
}

.messages .success {
    background-color: #d1fae5; /* vert clair */
    border-left: 4px solid #10b981;
    padding: 8px 12px;
    border-radius: 4px;
}

.messages .error {
    background-color: #fee2e2; /* rouge clair */
    border-left: 4px solid #dc2626;
    padding: 8px 12px;
    border-radius: 4px;
}

/* ---------- Messages d’erreur de validation ---------- */
ul.errorlist {
    list-style: none;
    color: #dc2626;
    font-size: 0.85rem;
    margin: 2px 0 6px 0;
    padding: 0;
}

.field ul.errorlist {
    list-style: none;
    color: #dc2626;
    font-size: 0.85rem;
    margin: 2px 0 6px 0;
    padding: 0;
}

.field ul.errorlist li {
    line-height: 1.2;
}

/* ---------- Tableaux de la page list ---------- */
table {
    border-collapse: collapse;
    margin-top: 4px;
    font-size: 0.9rem;
}

th {
    line-height: 1.0;
    background-color: #1e3a8a;
    color: #ffffff;
    text-align: left;
    padding: 2px;
    border-bottom: 2px solid #2563eb;
}

td {
    max-width: 140px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 2px;
    border-bottom: 1px solid #e2e8f0;
}


/* ---- POPUP GLOBAL ---- */
.popover {
    font-size: 0.78rem !important;   /* police compacte */
    padding: 0 !important;
    border-radius: 6px !important;
    overflow: visible !important;    /* évite les cases coupées */
}

/* Supprime complètement le header du popover */
.popover-header {
    display: none !important;
}

/* ---- CONTENU ---- */
.popover-body {
    padding: 6px 10px !important;    /* marges réduites */
}

/* ---- LISTE DE CHECKBOX ---- */
.filter-popover {
    padding: 0;
    margin: 0;
}

.filter-popover .form-check {
    display: flex;
    align-items: center;
    margin-bottom: 4px !important;   /* espacement vertical compact */
    min-height: 0;                   /* empêche un padding imposé */
}

.filter-popover .form-check:last-child {
    margin-bottom: 0 !important;
}

/* ---- CHECKBOXES ---- */
.filter-popover .form-check-input {
    width: 0.9em;
    height: 0.9em;
    margin-right: 6px;
    margin-top: 0;
    flex-shrink: 0;
}

/* ---- LABELS ---- */
.filter-popover .form-check-label {
    line-height: 1.1;                /* texte compact */
    white-space: nowrap;             /* pas de retour ligne parasite */
}

/* ---- BOUTONS DE VALIDATION ---- */
.action-btn {
    padding: 2px 4px;
    font-size: 0.9rem;
    border: none;
    background: transparent;
}

.filter-toggle {
    width: 14px;
    height: 14px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 1px;
}

.filter-toggle .filter-arrow {
    font-size: 10px;    
    line-height: 1;
    opacity: 0.85;        
    display: inline-block;
    vertical-align: middle;
}