/* =============================================================================================
   🎯 Conteneur principal (Formulaire + Transactions)
============================================================================================= */


.centered-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* gap: 30px; */
  width: 100%;
  max-width: 700px;
  /* margin: auto; */
  /* margin-top: 20px; */
  /* padding-bottom: 10px; */
  position: relative;
  right: 202px;
  bottom: 75px;
}
/* =============================================================================================
   📌 Formulaire d'ajout de revenus
============================================================================================= */

.income-form {
  background:var(--bg-color);
  padding: 14px;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 610px; /* ✅ Alignement avec le bloc transactions */
  border: 2px solid #f29c38;
  position: relative;
  top: 54px;
  left: 220px;
  max-height: 331px;
  position: relative;
  z-index: 1;          /* ✅ assure que le bouton est au-dessus */
  overflow: visible;   /* ✅ empêche que le bouton soit "coupé" */
  
}

.income-form h3 {
  text-align: center;
  font-size: 1.2rem;
  color: #05204a;
  margin-bottom: 15px;
}

/* $$$$$$$$$$$$$$$$$$$$$$$ */
.transactions-title {
  position: relative;
  left: 0;
  top: 28px;
  font-size: 1.2rem;
  font-weight: bold;
  color: var(--text-color);
  margin-bottom: 37px;
  padding-left: 5px;
  border-bottom: 2px solid #f29c38;
  padding-bottom: 5px;
  text-align: justify;
}

/* $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ */
/* Organisation des champs – grille 4 colonnes */
.income-form form {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* Quatre colonnes égales */
  gap: 15px 20px;                         /* Espace vertical et horizontal */
  align-items: center;
}

/* Chaque groupe (label + input) s'aligne en colonne */
.income-form .form-group {
  display: flex;
  flex-direction: column;
}

/* Labels au-dessus des champs, centrés verticalement dans leur groupe */
.income-form .form-group label {
  margin-bottom: 4px;
  font-weight: bold;
  margin-right: 48px;
}

/* Champs input/select prennent toute la largeur du groupe */
.income-form .form-group input,
.income-form .form-group select {
  width: 100%;
  box-sizing: border-box;
  padding: 6px;
  border: 1px solid #f29c35;
  border-radius: 5px;
}

/* Ajuster spécifiquement les groupes pour bien répartir :
   .category-group, .date-group, .description-group, .amount-group
   – mais la grille les répartira automatiquement à 25% chacun. */

/* Radio buttons full width */
.income-form .form-row.type-row {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  gap: 20px;
}
/* Button row full width and centered */
.income-form .form-row.button-row {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

.income-form .form-row.button-row {
  justify-content: center;
}

.income-form .form-group {
  display: flex;
  
  width: 100%;
  gap: 0px;
}

.income-form label {
  font-weight: bold;
  white-space: nowrap;
  width: 90px; /* ✅ Largeur uniforme pour alignement */
  text-align: left;
}

.income-form select,
.income-form input {
  flex: 1;
  padding: 6px;
  border: 1px solid #f29c35;
  border-radius: 5px;
  width: 100%;
  box-sizing: border-box; /* ✅ Empêche les dépassements */
}
.income-operations{
  position: relative;
  bottom: 24px;
}
/* Centrage du bouton */
.button-container {
  grid-column: 2 / 4; /* Occupe les colonnes 2 et 3 */
  grid-row: 2; /* Deuxième ligne */
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: -5px; /* Remonte le bouton vers le haut */
}


.delete-button {
  background-color: transparent;
  color: white;
  border: none;
  border-radius: 3px;
  padding: 0px 0px;
  cursor: pointer;
  position: relative;
  left: 170px;
  bottom: -3px;
}

/* =============================================================================================
   📌 Bloc Historique des Transactions
============================================================================================= */

.transaction-container {
  height: 100px;
  overflow-y: auto;
  overflow-x: hidden;
  border: 1px solid #f29c38;

}
/* Couleurs pour les transactions */
.income-color {
  color: #2ecc71; /* Vert pour les revenus */
}

.expense-color {
  color: #e74c3c; /* Rouge pour les dépenses */
}

/* ✅ Aligner le titre "Total des revenus" */
#total-incomes {
  text-align: start;
  font-size: 18px;
  font-weight: bold;
  background-color: white;
  padding: 4px;
  border-radius: 8px;
  width: 100%;
  position: relative;
  top: auto;
  z-index: auto;
}

/* =============================================================================================
   📌 Grille des transactions
============================================================================================= */

.transaction-list {
  display: flex;
  flex-direction: column; /* ✅ Liste en colonne */
  width: 95%;
}

/* 📌 Aligner chaque transaction dans un encadrement propre */
.operation-item {
  display: grid;
  grid-template-columns: 100px 130px 100px 110px 30px; /* Largeurs équilibrées */
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  text-align: center; /* ✅ Centre le texte */
}

/* ✅ Suppression des marges inutiles sur les éléments */
.operation-item span {
    display: flex;
    justify-content: center; /* ✅ Centre horizontalement */
    align-items: center; /* ✅ Centre verticalement */
    text-align: center; /* ✅ Assure que le texte est centré */
    padding: 5px 10px;
  }

.operation-item:hover {
  transform: scale(1.02);
}

/* ✅ Suppression des marges inutiles */
.operation-item p {
  margin: 0;
  padding-right: 10px;
  font-weight: 500;
}

.operation-item span:nth-child(2) { /* ✅ Cible la colonne Catégorie */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px; /* ✅ Coupe proprement les noms trop longs */
}

.operation-item span:first-child {
  margin-right: 10px; /* ✅ Sépare le texte "Revenu :" du reste */
}

/* testes */

.operation-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: -14px;
}

.operation-table td {
  padding: 8px 25px;
  text-align: left;
  white-space: nowrap; /* Empêche les retours à la ligne */
}

.operation-table td:first-child {
  font-weight: bold; /* Met "Revenu : X€" en gras */
}

.delete-cell {
  text-align: center;
  width: 50px; /* Ajuste l'espace pour le bouton supprimer */
}

.titre-incomes {
  position: relative;
  bottom: 155px;
  font-weight: bolder;
  color: #f29c35;
  font-size: x-large;
  left: 8px;
}
/* =============================================================================================
   📌 Sidebar (Menu de navigation)
============================================================================================= */

.dashboard-sidebar {
  position: fixed;
  top: 57px;
  bottom: 38px;
  left: 0;
  width: 9%;
  border-right: 4px solid #f29c38;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px;
  z-index: 10;
}

/* Bouton de déconnexion */
.logout {
    margin-top: auto;
    text-align: center;
    background-color: #f29c38;
    color: #fff;
    border: 2px solid #f29c38;
    border-radius: 5px;
    padding: 4px 1px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: bold;
    /* margin-bottom: 30px; */
    left: 705px;
    position: relative;
    top: 28px;

}

/* .logout:hover {
  background-color: #fff;
  color: #f29c38;
  border: 2px solid #f29c38;
} */

/* =============================================================================================
   📌 Dropdown (Menu déroulant)
============================================================================================= */

.dropdown {
  position: relative;
  gap: 48px;
  align-items: center;
}

/* Bouton du dropdown */
.dropdown-btn {
  background: none;
  color: #f29c38;
  padding: 0;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  text-decoration: none;
  font-weight: bold;
  position: relative;
  left: 520px;
}

/* .dropdown-btn:hover {
  color: #fff;
  background-color: #f29c38;
} */

/* Menu déroulant caché */
.dropdown-menu {
  display: none;
  flex-direction: column;
  gap: 12px;
  position: absolute;
  top: 49px;
  left: 512px;
  background-color: white;
  border: 1px solid #f29c38;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  min-width: 87px;
  padding: 7px;
}
/* Items du menu déroulant */
.dropdown-item {
  display: flex;
  align-items: center;
  padding: 7px 0px;
  text-decoration: none;
  color: #05204a;
  font-size: 1rem;
}

.dropdown-item:hover {
  background-color: #f29c38;
  color: white;
}

/* Affichage du menu */
.dropdown-menu.show {
  display: flex;
}

/* Added .top-nav-links rule */

/* .top-nav-links {
  flex-direction: unset;
  position: relative;
  bottom: 68px;
  left: 356px;
  gap: 28px;
  display: flex;
} */
.top-nav-links {
    position: relative;
    bottom: 68px;
    left: 277px;
    display: inline-flex;
    align-items: center;
    gap: 43px;
}
/* =============================================================================================
   📊 Résumé en haut du formulaire
============================================================================================= */
.summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: 20px;
  margin-top: -106px;
}
.summary-item {
  text-align: center;
  flex: 1;
}
.summary-item h2 {
  margin: 0 0 5px;
  font-size: 1rem;
  font-weight: bold;
  position: relative;
  bottom: 26px;
}
.summary-item p {
  margin-top: -25px;
  font-size: 1.2rem;
}
/* Couleurs selon le type */
#summary-income p,
#summary-balance p.positive {
  color: #2ecc71; /* vert */
}
#summary-expenses p {
  color: #e74c3c; /* rouge/dépenses */
}
#summary-balance p.negative {
  color: #e74c3c; /* rouge si solde négatif */
}

/* Résumé – couleurs spécifiques */
#summary-income { color: #2ecc71; /* vert */ }
#summary-expenses { color: #e74c3c; /* rouge pour les dépenses */ }
#summary-balance.positive { color: #2ecc71; /* vert si solde positif */ }
#summary-balance.negative { color: #e74c3c; /* rouge si solde négatif */ }

.type-selector {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  margin-bottom: 20px;
}

.transaction-label,
.type-label {
  font-weight: bold;
}

.radio-group {
  display: flex;
  align-items: center;
  gap: 5px;
}

/* Ligne des inputs : catégorie, date, description, montant */
.income-form .form-row.inputs-row {
  display: flex;
  gap: 20px; /* Espace horizontal entre chaque champ */
}

.income-form .form-row.inputs-row .form-group {
  flex: 1; /* Chaque groupe prend une part égale */
}

/* Ajoute un écart entre la catégorie et la date */
.income-form .form-row.inputs-row .form-group.category-group {
  margin-right: 20px;
}

/* Pour réorganiser correctement les boutons radio avec leur label */
.type-selector-inline {
  display: flex;
  justify-content: center; /* ✅ centre toute la ligne horizontalement */
  align-items: center;
  gap: 15px;
  margin-top: 15px; /* espace au-dessus */
  margin-bottom: 20px; /* espace en-dessous */
  flex-wrap: wrap;
}

.radio-option {
  display: flex;
  align-items: center;
  gap: 5px; /* Espace entre radio et texte */
}

.type-label {
  margin-right: 5px;
  font-weight: bold;
}

.radio-group {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Pour agrandir les inputs Description et Montant */
.form-group input[type="text"],
.form-group input[type="number"] {
  width: 100%; /* pleine largeur */
  min-width: 138px;
}

/* Ajustement du formulaire en grille plus lisible */
/* .income-form form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
} */

/* Pour centrer proprement le bouton */
.income-form button[type="submit"] {
  padding: 5px 10px;
  background-color: #f29c38;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
  text-align: center;
  width: fit-content;
  display: inline-block;
  line-height: 1.6;
  box-sizing: border-box;
  position: relative;
  pointer-events: auto;
  z-index: 2;
  margin-bottom: -9px;
}

.income-form .form-group.button-group {
  grid-column: 2 / 4; /* Place le bouton dans la colonne 2 uniquement */
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 5px;
}
.form-group {
  width: 73%;
  /* min-width: 36px; */
 
}
.operation-table td {
  padding: 2px 5px;
  font-size: 0.9rem;
}

/* ============================
   Responsive : Téléphone (max-width: 768px)
============================= */
/* ============================
   Responsive : Téléphone (max-width: 768px) - CORRECTION
============================= */
@media (max-width: 768px) {

  .income-form {
    width: 79%;
    max-width: 756px;
    padding: 20px;
    position: relative;
    top: 64px;
    left: 200px;
    max-height: 381px;
  }

  .income-form h3 {
    font-size: 1.5rem;
  }

  .transaction-label{
    display: none;
  }

  /* ✅ Grille 2 colonnes avec 3 lignes pour mobile */
  .income-form form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto; /* 3 lignes : catégorie+date, description+montant, bouton */
    gap: 10px;
    text-align: center;
  }

  /* ✅ LIGNE 1 : Catégorie + Date */
  .form-group.category-group {
    grid-column: 1;
    grid-row: 1;
  }
  .form-group.date-group {
    grid-column: 2;
    grid-row: 1;
  }

  /* ✅ LIGNE 2 : Description + Montant */
  .form-group.description-group {
    grid-column: 1;
    grid-row: 2;
  }
  .form-group.amount-group {
    grid-column: 2;
    grid-row: 2;
  }

  /* ✅ LIGNE 3 : Bouton centré sur toute la largeur */
  .button-container {
    grid-column: 1 / -1; /* Occupe toute la largeur */
    grid-row: 3; /* Troisième ligne */
    display: flex;
    justify-content: center;
    margin-top: -5px; /* Remonte le bouton */
  }

  .income-form button[type="submit"] {
    padding: 5px 10px ;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
    display: inline-block;
    width: auto;
    line-height: 1.2;
    text-align: center;
    transition: background-color 0.3s ease;
    position: static; /* ✅ Corrige le bug de clic */
  }

  .income-form .form-group {
    width: 100%;
  }

  /* ✅ Remonter l'historique juste après le formulaire */
  .transaction-container {
    margin-top: 20px;
  }

  .income-operations{
    position: relative;
    bottom: 14px;
  }

  .summary-item p {
    margin-top: -26px;
    font-size: 1rem;
    position: relative;
    right: 15px;
  }

  .summary-item h2 {
    margin: 0 0 5px;
    font-size: 1rem;
    font-weight: bold;
    position: relative;
    bottom: 26px;
    white-space: nowrap;
    right: 10px;
  }
}
/* ============================
   Responsive : Tablette (769px à 992px)
============================= */
@media (min-width: 769px) and (max-width: 992px) {

  .income-form {
    width: 84%;
    max-width: 756px;
    padding: 20px;
    position: relative;
    top: 64px;
    left: 194px;
    max-height: 322px;
}
.income-form button[type="submit"] {
  padding:5px 10px;
  background-color: #f29c38;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1rem;
  left: 0px;
  position: relative;
  top: -5px;
}
.income-form form {
  display: grid;
  /* grid-template-columns: 1fr 1fr; */
  gap: 15px;
}
}
/* .income-form button[type="submit"] {
  z-index: 9999;
  position: relative;
  pointer-events: auto;
} */