/* === Styles généraux === */
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    /* Normalize.css gère les marges et paddings de base */
}

/* === Conteneur principal de la fiche de saisie === */
.localisation-container {
    display: flex;
    align-items: stretch;
}

.localisation-left {
    width: 48%; /* Ajustement pour éviter le dépassement */
    display: flex;
    flex-direction: column;
}

.localisation-right {
    width: 48%; /* Ajustement similaire pour un bon alignement */
    display: flex;
    flex-direction: column;
}

/* === Styles des tableaux === */
table {
    width: 100%; /* Les tableaux prennent toute la largeur par défaut */
    border-collapse: collapse; /* Fusion des bordures */
    margin-bottom: 20px; /* Espacement sous les tableaux */
    background: white; /* Fond blanc pour les tableaux */
}

th,
td {
    border: 2px solid #000; /* Bordures noires de 2px */
    padding: 8px; /* Espacement intérieur des cellules */
    text-align: left; /* Alignement du texte à gauche */
}

th {
    background-color: #e0e0e0; /* Fond gris pour les en-têtes */
    font-weight: bold; /* Texte en gras pour les en-têtes */
    text-align: center; /* Alignement du texte au centre pour les en-têtes */
}

/* === Titres des sections === */
.section-title {
    background-color: #e0e0e0; /* Fond gris */
    border: 2px solid #000; /* Bordure noire */
    padding: 8px; /* Espacement intérieur */
    font-weight: bold; /* Texte en gras */
    text-align: center; /* Texte centré */
    height: 40px; /* Hauteur fixe */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px; /* Espacement au-dessus */
}

.section-content {
    background: #fff; /* Fond blanc */
    border: 2px solid #000; /* Bordure noire */
    padding: 10px; /* Espacement intérieur */
    max-height: 80px; /* Hauteur minimale */
    display: flex;
    align-items: center;
    margin: 0; /* Suppression des marges */
}

/* === Zones de texte === */
textarea {
    width: 100%; /* Prend toute la largeur du conteneur */
    padding: 8px; /* Espacement intérieur */
    border: 2px solid #000; /* Bordure noire */
    border-radius: 4px; /* Bords arrondis */
    resize: vertical; /* Autorise le redimensionnement vertical */
    background: white; /* Fond blanc */
    min-height: 80px; /* Hauteur minimale */
}

/* === Bouton de validation === */
/*
button {
    display: block; /* Affiche comme un bloc */
    margin: 20px auto; /* Centré horizontalement avec espacement vertical */
    background-color: #4CAF50; /* Fond vert */
    color: white; /* Texte blanc */
    padding: 10px 15px; /* Espacement intérieur */
    border: none; /* Pas de bordure */
    cursor: pointer; /* Curseur de type "lien" au survol */
    font-size: 16px; /* Taille de la police */
}

button:hover {
    background-color: #45a049; /* Fond vert plus foncé au survol */
}
*/

/* === Responsive Design === */
@media screen and (max-width: 768px) {
    .localisation-container {
        flex-direction: column; /* Les éléments s'empilent verticalement */
    }

    .localisation-left,
    .localisation-right {
        width: 100%; /* Les éléments prennent toute la largeur */
    }
}

/* === Styles spécifiques à certains éléments === */
.resume-container input {
    width: 80px; /* Largeur des inputs dans le résumé */
    text-align: center; /* Texte centré */
    margin: 5px; /* Espacement autour */
}

.causes-container textarea,
.remarques-container textarea {
    width: 100%; /* Textareas prennent toute la largeur */
    padding: 5px; /* Espacement intérieur */
    font-size: 14px; /* Taille de police plus petite */
}

.submit-container {
    text-align: center; /* Boutons de soumission centrés */
    margin-top: 20px; /* Espacement au-dessus */
}

.submit-container button {
    padding: 10px 20px; /* Espacement intérieur */
    font-size: 16px; /* Taille de police */
    background-color: #4CAF50; /* Fond vert */
    color: white; /* Texte blanc */
    border: none; /* Pas de bordure */
    cursor: pointer; /* Curseur "lien" au survol */
}

.submit-container button:hover {
    background-color: #45a049; /* Fond vert plus foncé au survol */
}

/* === Styles pour les tableaux imbriqués (si nécessaire) === */
.observations-table table {
    width: 100%; /* Assurez-vous qu'ils prennent toute la largeur disponible */
    border-collapse: collapse;
}

/* Conteneur du résumé de l'observation */
.resume-container {
    width: 100%;
    margin-top: 20px;
}

/* Table du résumé */
.resume-container table {
    width: 100%;
    border-collapse: collapse;
}

/* Style des cellules du tableau */
.resume-container th,
.resume-container td {
    border: 2px solid #000;
    padding: 8px;
    text-align: center;
}

/* Style des en-têtes du tableau */
.resume-container th {
    background-color: #e0e0e0;
    font-weight: bold;
}

/* Conteneur Causes de l'échec & Remarques */
.causes-remarques-container {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

/* Partie gauche et droite avec 50% de largeur */
.causes-container {
    width: 50%;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 2px solid #000;
    padding: 15px;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
}

/* Titres des sections */
.causes-container h3 {
    background-color: #e0e0e0;
    padding: 8px;
    text-align: center;
    border-bottom: 2px solid #000;
}

/* Contenu des sections */
.causes-container p {
    padding: 10px;
}

/* Conteneur des remarques (fusion des bordures) */
.remarques-container {
    width: 50%;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 2px solid #000;
    padding: 0; /* Supprimer le padding pour éviter l'espace autour de la table */
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
}

/* Table des remarques */
.remarques-container table {
    width: 100%;
    border-collapse: collapse; /* Fusionne les bordures */
    margin: 0; /* Supprime l'espace supplémentaire */
}

/* Style des cellules du tableau */
.remarques-container th,
.remarques-container td {
    border: 2px solid #000; /* Utilise la même bordure que le container */
    padding: 8px;
    text-align: left;
}

/* Style des en-têtes du tableau */
.remarques-container th {
    background-color: #e0e0e0;
    font-weight: bold;
    text-align: center;
}

/* Suppression de la bordure du bas du titre pour fusion avec la table */
.remarques-container h3 {
    background-color: #e0e0e0;
    padding: 8px;
    text-align: center;
    border-bottom: none; /* Évite une séparation visuelle avec la table */
    margin: 0;
}

/* Ajustement des colonnes pour la table des remarques */
.remarques-container table th:first-child,
.remarques-container table td:first-child {
    width: 25%; /* La première colonne (Date) prend 25% */
}

.remarques-container table th:last-child,
.remarques-container table td:last-child {
    width: 75%; /* La deuxième colonne (Remarque) prend 75% */
}

th {
    background-color: #f4f4f4;
    font-weight: bold;
}

/* === Header === */
.header {
    background-color: #f8f9fa;
    padding: 15px;
    text-align: center;
    border-bottom: 2px solid #ccc;
}

.header h1 {
    margin: 0;
    font-size: 24px;
    color: #333;
}

.header p {
    margin: 5px 0;
    color: #555;
}

/* === Navbar === */
.navbar {
    display: flex;
    justify-content: center;
    background-color: #007bff;
    padding: 10px 0;
}

.navbar a {
    color: white;
    text-decoration: none;
    padding: 10px 20px;
    font-weight: bold;
}

.navbar a:hover {
    background-color: #0056b3;
    border-radius: 5px;
}

/* === Contenu principal === */
/* REMARQUE : Le layout principal est maintenant géré par #content dans sidebar.css */
/* Ces styles s'appliquent au conteneur interne .content-inner */
.content-inner {
    max-width: 1400px;
    margin: 0 auto;
    background: white;
    padding: 20px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
}

/* Préserver la compatibilité avec les anciens templates utilisant <main> */
main {
    padding: 20px;
    max-width: 1400px;
    margin: auto;
    background: white;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
}

/* === Styles pour les messages de bienvenue === */
.welcome-message {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin-top: 10px;
}

/* === Responsive design === */
@media screen and (max-width: 768px) {
    .navbar {
        flex-direction: column;
        text-align: center;
    }

    .navbar a {
        display: block;
        padding: 10px;
    }

    main, .content-inner {
        padding: 10px;
        max-width: 100%;
    }

    /* Tables responsives sur mobile */
    table {
        font-size: 14px;
    }

    th, td {
        padding: 6px;
    }
}

/* Ajustements pour écrans moyens (avec sidebar) */
@media screen and (min-width: 769px) and (max-width: 1200px) {
    .content-inner {
        max-width: 100%;
        padding: 15px;
    }

    /* Réduire légèrement les tableaux sur écrans moyens */
    table {
        font-size: 14px;
    }

    th, td {
        padding: 6px;
    }
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background-color: #f8f9fa;
    /* Couleur de fond optionnelle */
}

.navbar a {
    text-decoration: none;
    color: #007bff;
    margin-right: 15px;
}

.navbar-right {
    display: flex;
    align-items: center;
    margin-left: auto;
    /* C'est cette ligne qui pousse le contenu à droite */
}

.navbar-right form {
    margin-left: 10px;
}

.message-container {
    margin: 1em auto;
    max-width: 600px;
    padding: 0 1em;
}

.message {
    padding: 1em;
    border-radius: 6px;
    font-weight: bold;
    margin-bottom: 1em;
    border: 1px solid transparent;
}

/* Styles par type de message Django : info, success, warning, error */

.message.info {
    background-color: #e0f3ff;
    border-color: #90caff;
    color: #1a3f5d;
}

.message.success {
    background-color: #e6f9e6;
    border-color: #6ac46a;
    color: #1e4021;
}

.message.warning {
    background-color: #fff9e5;
    border-color: #ffd05a;
    color: #665200;
}

.message.error, .message.danger {
    background-color: #ffeaea;
    border-color: #e06363;
    color: #6d0000;
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-section {
  flex: 1;
}

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

.header-right {
  text-align: right;
}

/* ========================================
   Boutons d'action (Voir image / Voir JSON)
   Style hybride : Outlined avec animation + fond coloré
   ======================================== */
.action-buttons-container {
  display: flex !important;
  gap: 12px !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
}

.btn-action {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 18px !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  border: 2px solid !important;
  position: relative !important;
  overflow: hidden !important;
  z-index: 1 !important;
  white-space: nowrap !important;
}

.btn-action::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 100% !important;
  height: 100% !important;
  transition: left 0.3s ease !important;
  z-index: -1 !important;
}

.btn-action i {
  font-size: 18px !important;
  transition: transform 0.3s ease !important;
}

.btn-action:hover i {
  transform: scale(1.1) !important;
}

/* Bouton Image - Bleu clair avec animation vers bleu foncé */
.btn-action.btn-image {
  border-color: #1976d2 !important;
  color: #1976d2 !important;
  background: #e3f2fd !important;
}

.btn-action.btn-image::before {
  background: #1976d2 !important;
}

.btn-action.btn-image:hover {
  color: white !important;
  border-color: #1976d2 !important;
  text-decoration: none !important;
}

.btn-action.btn-image:hover::before {
  left: 0 !important;
}

/* Bouton JSON - Violet clair avec animation vers violet foncé */
.btn-action.btn-json {
  border-color: #7b1fa2 !important;
  color: #7b1fa2 !important;
  background: #f3e5f5 !important;
}

.btn-action.btn-json::before {
  background: #7b1fa2 !important;
}

.btn-action.btn-json:hover {
  color: white !important;
  border-color: #7b1fa2 !important;
  text-decoration: none !important;
}

.btn-action.btn-json:hover::before {
  left: 0 !important;
}

/* ========================================
   Amélioration des boutons Bootstrap standard
   Style cohérent avec les boutons d'action
   ======================================== */

/* Base commune pour tous les boutons améliorés */
.btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 10px 20px !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  border: 2px solid !important;
  position: relative !important;
  overflow: hidden !important;
  z-index: 1 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
}

.btn::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 100% !important;
  height: 100% !important;
  transition: left 0.3s ease !important;
  z-index: -1 !important;
}

.btn i {
  font-size: 16px !important;
  transition: transform 0.3s ease !important;
}

.btn:hover i {
  transform: scale(1.1) !important;
}

/* Boutons taille small */
.btn-sm {
  padding: 8px 16px !important;
  font-size: 13px !important;
}

.btn-sm i {
  font-size: 14px !important;
}

/* Boutons taille extra-small */
.btn-xs {
  padding: 5px 12px !important;
  font-size: 12px !important;
}

.btn-xs i {
  font-size: 12px !important;
}

/* Bouton Primary - Bleu */
.btn-primary {
  border-color: #0d6efd !important;
  color: #0d6efd !important;
  background: #e7f1ff !important;
}

.btn-primary::before {
  background: #0d6efd !important;
}

.btn-primary:hover {
  color: white !important;
  border-color: #0d6efd !important;
}

.btn-primary:hover::before {
  left: 0 !important;
}

/* Bouton Success - Vert */
.btn-success {
  border-color: #198754 !important;
  color: #198754 !important;
  background: #d1e7dd !important;
}

.btn-success::before {
  background: #198754 !important;
}

.btn-success:hover {
  color: white !important;
  border-color: #198754 !important;
}

.btn-success:hover::before {
  left: 0 !important;
}

/* Bouton Info - Cyan */
.btn-info {
  border-color: #0dcaf0 !important;
  color: #055160 !important;
  background: #cff4fc !important;
}

.btn-info::before {
  background: #0dcaf0 !important;
}

.btn-info:hover {
  color: white !important;
  border-color: #0dcaf0 !important;
}

.btn-info:hover::before {
  left: 0 !important;
}

/* Bouton Warning - Jaune/Orange */
.btn-warning {
  border-color: #ffc107 !important;
  color: #664d03 !important;
  background: #fff3cd !important;
}

.btn-warning::before {
  background: #ffc107 !important;
}

.btn-warning:hover {
  color: #000 !important;
  border-color: #ffc107 !important;
}

.btn-warning:hover::before {
  left: 0 !important;
}

/* Bouton Danger - Rouge */
.btn-danger,
.btn-outline-danger {
  border-color: #dc3545 !important;
  color: #dc3545 !important;
  background: #f8d7da !important;
}

.btn-danger::before,
.btn-outline-danger::before {
  background: #dc3545 !important;
}

.btn-danger:hover,
.btn-outline-danger:hover {
  color: white !important;
  border-color: #dc3545 !important;
}

.btn-danger:hover::before,
.btn-outline-danger:hover::before {
  left: 0 !important;
}

/* Bouton Secondary - Gris */
.btn-secondary,
.btn-outline-secondary {
  border-color: #6c757d !important;
  color: #6c757d !important;
  background: #e2e3e5 !important;
}

.btn-secondary::before,
.btn-outline-secondary::before {
  background: #6c757d !important;
}

.btn-secondary:hover,
.btn-outline-secondary:hover {
  color: white !important;
  border-color: #6c757d !important;
}

.btn-secondary:hover::before,
.btn-outline-secondary:hover::before {
  left: 0 !important;
}

/* Bouton Outline Primary */
.btn-outline-primary {
  border-color: #0d6efd !important;
  color: #0d6efd !important;
  background: white !important;
}

.btn-outline-primary::before {
  background: #0d6efd !important;
}

.btn-outline-primary:hover {
  color: white !important;
  border-color: #0d6efd !important;
}

.btn-outline-primary:hover::before {
  left: 0 !important;
}

/* Conteneur de boutons */
.form-buttons {
  display: flex !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  margin-top: 20px !important;
  padding: 20px !important;
  background: #f8f9fa !important;
  border-radius: 8px !important;
  justify-content: flex-start !important;
}

/* Styles pour l'historique des modifications */
.historique-container {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.historique-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    margin-bottom: 20px;
}

.historique-table th, .historique-table td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}

.historique-table th {
    background-color: #f2f2f2;
    font-weight: bold;
}

.historique-table tr:nth-child(even) {
    background-color: #f9f9f9;
}

.form-buttons {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.btn {
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    /* Normalisation pour uniformiser button et a */
    box-sizing: border-box;
    font-size: 14px;
    line-height: 1.5;
    font-family: inherit;
    vertical-align: middle;
    text-align: center;
    border: 1px solid transparent;
}

.btn-primary {
    background-color: #007bff;
    color: white;
    border-color: #007bff;
}

.btn-success {
    background-color: #28a745;
    color: white;
    border-color: #28a745;
}

.btn-info {
    background-color: #17a2b8;
    color: white;
    border-color: #17a2b8;
}

.btn-secondary {
    background-color: #6c757d;
    color: white;
    border-color: #6c757d;
}

.btn-outline-secondary {
    background-color: transparent;
    color: #6c757d;
    border-color: #6c757d;
}

.btn-outline-secondary:hover {
    background-color: #6c757d;
    color: white;
}