/* Styles spécifiques au portail admin */
.table-container { 
    margin-top: 2rem; 
    padding: 1rem; 
    overflow-x: auto; 
}
.data-table { 
    width: 100%; 
    border-collapse: collapse; 
    color: var(--color-text-body); 
}
.data-table th, 
.data-table td { 
    padding: 1rem; 
    text-align: left; 
    border-bottom: 1px solid var(--color-glass-border); 
    white-space: nowrap; 
}
.data-table th { 
    font-family: var(--font-heading); 
    color: var(--color-text-headings); 
}
.status { 
    padding: 4px 8px; 
    border-radius: 50px; 
    font-size: 0.8rem; 
    font-weight: 600; 
}
.status.status-ok { background-color: rgba(46, 204, 113, 0.2); color: #27ae60; }
.status.status-off { background-color: rgba(231, 76, 60, 0.2); color: #c0392b; }
.status.status-maintenance { background-color: rgba(243, 156, 18, 0.2); color: #d35400; }
.actions .btn { margin-right: 5px; }

.btn-danger {
    background-color: transparent;
    color: #e74c3c;
    border: 1px solid rgba(231, 76, 60, 0.4);
}
.btn-danger:hover {
    background-color: #e74c3c;
    color: #fff;
    border-color: #e74c3c;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(192, 57, 43, 0.2);
}
.btn-success { background-color: rgba(46, 204, 113, 0.8); color: white; }
.btn-success:hover { background-color: #27ae60; }

/* --- STYLES CORRIGÉS POUR LES MODALES --- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.modal-overlay.is-visible {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    max-width: 500px;
    width: 90%;
    position: relative;
    transform: scale(0.95);
    transition: transform 0.3s ease;
    max-height: 85vh; /* Hauteur maximale, laisse une marge avec le bord de l'écran */
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Empêche les dépassements internes */
}
.modal-overlay.is-visible .modal-content {
    transform: scale(1);
}

.close-modal {
    position: absolute;
    top: 15px;
    right: 20px;
    background: none;
    border: none;
    font-size: 2rem;
    color: var(--color-text-body);
    cursor: pointer;
    line-height: 1;
    z-index: 10;
}

.content-header-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 2rem;
}

/* Structure interne de la modale pour le scroll */
.modal-content form {
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Permet au formulaire de prendre l'espace restant */
    min-height: 0; /* Correction de bug pour les conteneurs flex */
}

.modal-body {
    overflow-y: auto; /* Active le scroll vertical si le contenu dépasse */
    padding: 1.5rem;
    -webkit-overflow-scrolling: touch;
}

#view-cred-body.modal-body {
    padding: 1rem 1.5rem;
}

.modal-footer {
    padding: 1.5rem;
    margin-top: auto;
    border-top: 1px solid var(--color-glass-border);
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    flex-shrink: 0; /* Empêche le pied de page de se contracter */
}

.modal-content .form-field label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--color-text-headings);
}
.modal-content .form-hint {
    font-size: 0.8rem;
    opacity: 0.7;
    margin-top: 0.5rem;
    margin-bottom: 0;
}
.modal-content.glass-card {
    background: rgba(248, 249, 250, 0.9);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(0, 0, 0, 0.05);
}
body.dark-mode .modal-content.glass-card {
    background: rgba(36, 39, 58, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* --- FIN DES CORRECTIONS DE MODALES --- */


/* Styles pour les vues de détails */
#client-details .glass-card,
#site-details .glass-card { 
    padding: 2.5rem; 
}
#credentials-list {
    align-self: start;
}

#client-details hr,
#site-details hr { 
    margin: 2.5rem 0; 
    border: none; 
    border-top: 1px solid var(--color-glass-border); 
}
#client-details h2,
#site-details h2 { 
    font-size: 1.8rem; 
    margin-bottom: 1rem; 
}
#client-details h3,
#site-details h3 { 
    font-size: 1.5rem; 
    margin-top: 2.5rem; 
    padding-bottom: 0.5rem; 
    margin-bottom: 1.5rem; 
}
#client-details h3:first-child,
#site-details h3:first-child { 
    margin-top: 0; 
}
#client-details h4,
#site-details h4 { 
    font-size: 1.1rem; 
    margin-bottom: 1rem; 
    color: var(--color-text-headings); 
}

.document-item, .list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    border-bottom: 1px solid var(--color-glass-border);
}
.log-item {
    padding: 1rem 0;
    border-bottom: 1px solid var(--color-glass-border);
}
.log-item:last-of-type, .document-item:last-of-type, .list-item:last-of-type {
    border-bottom: none;
}
.document-meta {
    font-size: 0.8rem;
    opacity: 0.7;
    margin-left: 10px;
    text-transform: capitalize;
}
.document-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.details-form-section .form-field {
    margin-bottom: 1.5rem;
}
.details-form-section .form-field label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--color-text-headings);
}

.custom-file-input {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}
.custom-file-input input[type="file"] {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    opacity: 0;
}
.custom-file-input .btn {
    flex-shrink: 0;
}
.custom-file-input .file-name,
.custom-file-input .file-name-client,
.custom-file-input .file-name-site {
    flex-grow: 1;
    padding-left: 1rem;
    font-size: 0.9rem;
    color: var(--color-text-body);
    opacity: 0.8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- STYLES POUR LE TABLEAU DE BORD ADMIN --- */
#dashboard-stats {
    margin-top: 2rem;
    margin-bottom: 2rem;
}
.stat-card {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
}
.stat-card .stat-value {
    font-size: 2.5rem;
    font-family: var(--font-heading);
    font-weight: 800;
    color: var(--color-text-headings);
    line-height: 1;
}
.stat-card .stat-label {
    font-size: 1rem;
    font-weight: 600;
    opacity: 0.8;
}
.stat-card.danger .stat-value, .stat-card.danger .stat-label {
    color: #c0392b;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2rem;
}
.quick-actions-grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
#dashboard-recent-clients h3, #dashboard-quick-actions h3 {
    margin-top: 0;
    margin-bottom: 1.5rem;
}
.recent-client-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    margin: 0 -1rem;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.recent-client-item:hover {
    background-color: rgba(0,0,0,0.05);
}
body.dark-mode .recent-client-item:hover {
    background-color: rgba(255,255,255,0.05);
}
.recent-client-item .client-info {
    display: flex;
    flex-direction: column;
}
.recent-client-item .client-info strong {
    font-weight: 600;
    color: var(--color-text-headings);
}
.recent-client-item .client-info span {
    font-size: 0.9rem;
    opacity: 0.7;
}

@media (max-width: 1024px) {
    #dashboard-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 992px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 768px) {
    #dashboard-stats {
        grid-template-columns: 1fr;
    }
}

/* --- STYLES POUR LA BARRE DE FILTRES --- */
.filters-bar {
    margin-bottom: 2rem;
    padding: 1rem;
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
}
.filters-bar input[type="search"],
.filters-bar select {
    padding: 10px 15px;
    border-radius: 8px;
    border: 1px solid var(--color-glass-border);
    background: rgba(255,255,255,0.5);
    font-size: 0.9rem;
    color: var(--color-text-dark);
    font-family: var(--font-body);
    min-width: 200px;
    transition: all 0.2s ease;
}
.filters-bar input[type="search"] {
    flex-grow: 1;
}
body.dark-mode .filters-bar input,
body.dark-mode .filters-bar select {
    background: rgba(255,255,255,0.1);
}
.filters-bar input:focus,
.filters-bar select:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.2);
}

/* --- NOUVEAUX STYLES POUR L'HARMONISATION DES BOUTONS --- */
.document-actions .btn {
    min-width: 110px;
    text-align: center;
    justify-content: center;
}
#upload-document-form-client .btn {
    min-width: 130px;
    justify-content: center;
}

/* --- STYLES POUR LA PAGE DES TÂCHES --- */
.tasks-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-top: 2rem;
}

@media (min-width: 992px) {
    .tasks-container {
        grid-template-columns: 1fr 1fr;
    }
}

.tasks-list h3 {
    margin-bottom: 1rem;
}

.tasks-list .glass-card {
    padding: 1rem;
}

.task-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    border-bottom: 1px solid var(--color-glass-border);
    transition: background-color 0.2s ease;
}

.task-item:last-child {
    border-bottom: none;
}

.task-item:hover {
    background-color: rgba(0,0,0,0.03);
}

body.dark-mode .task-item:hover {
    background-color: rgba(255,255,255,0.03);
}

.task-content {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-grow: 1;
    min-width: 0; /* Fix for flexbox overflow */
}

.task-content input[type="checkbox"] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    cursor: pointer;
}

.task-content label {
    flex-grow: 1;
    word-break: break-word;
}

.task-item.completed label {
    text-decoration: line-through;
    opacity: 0.6;
}

.task-client-tag {
    background-color: rgba(0,0,0,0.05);
    color: var(--color-text-body);
    padding: 4px 10px;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

body.dark-mode .task-client-tag {
    background-color: rgba(255,255,255,0.1);
}

.task-client-tag:hover {
    background-color: var(--color-accent);
    color: #fff;
    transform: translateY(-1px);
}
body.dark-mode .task-client-tag:hover {
    color: var(--color-text-dark);
}

.delete-task-btn {
    background: none;
    border: none;
    color: var(--color-text-body);
    opacity: 0.4;
    font-size: 1.5rem;
    cursor: pointer;
    transition: opacity 0.2s ease, color 0.2s ease;
    padding: 0 0.5rem;
    line-height: 1;
    flex-shrink: 0;
}
.delete-task-btn:hover {
    opacity: 1;
    color: #c0392b;
}

.empty-list-message {
    padding: 2rem 1rem;
    text-align: center;
    opacity: 0.7;
    margin: 0;
}
/* --- STYLES FOR REPORTING & INVOICING TOOL --- */

.tabs-container {
    width: 100%;
}

.tab-buttons {
    display: flex;
    border-bottom: 1px solid var(--color-glass-border);
    margin-bottom: 2rem;
}

.tab-button {
    padding: 1rem 1.5rem;
    cursor: pointer;
    background: none;
    border: none;
    color: var(--color-text-body);
    font-weight: 600;
    position: relative;
    opacity: 0.7;
    transition: opacity 0.2s ease, color 0.2s ease;
}

.tab-button::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--color-accent);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.tab-button.active {
    opacity: 1;
    color: var(--color-text-headings);
}

.tab-button.active::after {
    transform: scaleX(1);
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
    animation: fadeIn 0.5s ease;
}

#synthesis-result {
    width: 100%;
    background-color: rgba(0,0,0,0.05);
    border: 1px solid var(--color-glass-border);
    border-radius: 8px;
    padding: 1rem;
    font-family: monospace;
    color: var(--color-text-body);
    line-height: 1.6;
}

body.dark-mode #synthesis-result {
    background-color: rgba(255,255,255,0.05);
}

#invoice-form hr {
    border: none;
    border-top: 1px solid var(--color-glass-border);
    margin: 2rem 0;
}

.invoice-item-row {
    display: grid;
    grid-template-columns: 3fr 1fr 1.5fr auto;
    gap: 1rem;
    align-items: center;
    margin-bottom: 1rem;
}

.invoice-item-row input {
    width: 100%;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid var(--color-glass-border);
    background: rgba(255, 255, 255, 0.5);
    font-size: 1rem;
    color: var(--color-text-dark);
    font-family: var(--font-body);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

body.dark-mode .invoice-item-row input {
    background: rgba(255, 255, 255, 0.1);
}

.invoice-item-row input:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.2);
}

.remove-invoice-item-btn {
    height: 40px;
    width: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    line-height: 1;
}

/* --- STYLES POUR LE TAMPON DE FACTURE PAYÉE --- */
.paid-stamp-container {
    position: absolute;
    top: 180px;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-15deg);
    opacity: 0.8;
    z-index: 10;
    border: 3px double #00875A;
    border-radius: 8px;
    padding: 10px;
    width: 200px;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.8);
}
.paid-stamp-title {
    font-family: 'Helvetica', 'Arial', sans-serif;
    font-size: 1.5rem;
    font-weight: bold;
    color: #00875A;
    letter-spacing: 2px;
}
.paid-stamp-signature {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 1.2rem;
    color: #333;
    margin-top: 5px;
    border-top: 1px solid #ccc;
    padding-top: 5px;
}
.paid-stamp-date {
    font-size: 0.8rem;
    color: #555;
    margin-top: 5px;
}

/* Nouveau statut pour le développement */
.status.status-dev {
    background-color: rgba(52, 152, 219, 0.2);
    color: #2980b9;
}

/* À la fin de css/admin_style.css */

/* Titre avec spinner */
.admin-dashboard-title-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.admin-dashboard-title-flex h3 {
    margin: 0;
}
/* Style du loader (spinner) */
.loader-placeholder {
    width: 30px;
    height: 30px;
    border: 3px solid var(--color-glass-border);
    border-top-color: var(--color-accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Styles pour la barre de filtres financiers */
#financial-filters-bar {
    padding: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
}

#financial-filters-bar select,
#financial-filters-bar input[type="date"] {
    padding: 10px 15px;
    border-radius: 8px;
    border: 1px solid var(--color-glass-border);
    background: rgba(255,255,255,0.5);
    font-size: 0.9rem;
    color: var(--color-text-dark);
    font-family: var(--font-body);
    transition: all 0.2s ease;
}
body.dark-mode #financial-filters-bar select,
body.dark-mode #financial-filters-bar input[type="date"] {
    background: rgba(255,255,255,0.1);
}
#financial-filters-bar select:focus,
#financial-filters-bar input[type="date"]:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.2);
}

#financial-filters-bar label {
    font-weight: 600;
    font-size: 0.9rem;
}

#financial-filters-bar #stats-apply-btn {
    margin-left: auto;
}

/* Responsive pour la barre de filtres */
@media (max-width: 768px) {
    #financial-filters-bar {
        flex-direction: column;
        align-items: stretch;
    }
    #stats-custom-dates {
        flex-direction: column;
        align-items: stretch;
    }
    #financial-filters-bar #stats-apply-btn {
        margin-left: 0;
    }
}

/* Grille pour les résultats financiers */
#financial-stats-results {
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1024px) {
    #financial-stats-results {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 768px) {
    #financial-stats-results {
        grid-template-columns: 1fr;
    }
}

/* --- Styles pour les couleurs des stats financières --- */
.stat-card .stat-value.stat-color-default {
    color: var(--color-text-headings); /* Couleur par défaut (noir ou blanc) */
}

.stat-card .stat-value.stat-color-blue {
    color: var(--color-accent); /* Bleu (clair ou foncé selon le thème) */
}

.stat-card .stat-value.stat-color-orange {
    color: #d35400; /* Orange (repris du statut 'maintenance') */
}
/* --- Fin des styles stats --- */

/* 8. CORRECTION DE LA CHECKBOX (Spécifique à cette modale) */
.confirmation-modal-check {
    /* Rétablit un flexbox propre */
    display: flex; /* !important supprimé pour permettre le masquage JS */
    align-items: center !important;
    position: static !important;
    margin-top: 0;
}

.confirmation-modal-check input[type="checkbox"] {
    /* Annule les styles de style.css qui la cachent */
    opacity: 1 !important;
    position: static !important;
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0;
    margin-right: 12px; /* Crée l'espace */
}

.confirmation-modal-check label {
    /* Annule le padding qui décale le texte */
    padding-left: 0 !important;
    font-size: 0.9rem;
    color: var(--color-text-body);
}

.confirmation-modal-check label::before,
.confirmation-modal-check label::after {
    /* Désactive la fausse checkbox de style.css */
    display: none !important;
}

/* --- Styles de la Modale (Identique Admin) --- */
.confirmation-modal-h2 {
    font-size: 1.8rem; /* Plus petit que le H2 par défaut */
    text-align: left;
    line-height: 1.3;
    padding: 1.5rem 1.5rem 0 1.5rem; /* Ajouté pour l'espacement */
}

/* 2. Corps de la modale */
.confirmation-modal-body {
    text-align: left; /* Aligne tout le texte à gauche */
    padding-top: 1.5rem; /* Espace sous le titre */
}

/* 3. Paragraphe de message */
.confirmation-modal-body #confirmation-modal-message {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 1.5rem; /* Espace avant les champs */
}

/* 4. Conteneur des champs (pour le cacher/montrer) */
.confirmation-modal-body #confirmation-extra-fields {
     margin-bottom: 1.5rem; /* Espace avant la checkbox */
}

/* 5. Champ de date (caché par défaut) */
.confirmation-modal-body #payment-date-field-modal {
    display: none; /* Caché par défaut, géré par JS */
    text-align: left;
}

/* 6. Label du champ de date */
.confirmation-modal-body #payment-date-field-modal label {
    font-weight: 600; 
    margin-bottom: 0.5rem; 
    display: block;
    color: var(--color-text-headings);
}

/* 7. Input du champ de date */
.confirmation-modal-body #payment-date-field-modal input[type="date"] {
    width: 100%; 
    padding: 10px 15px; 
    border-radius: 8px; 
    border: 1px solid var(--color-glass-border); 
    background: var(--color-button-secondary-bg); 
    font-family: var(--font-body); 
    font-size: 1rem; 
    color: var(--color-text-dark);
}
body.dark-mode .confirmation-modal-body #payment-date-field-modal input[type="date"] {
     background: rgba(255, 255, 255, 0.1);
}