/* =========================
   GLOBAL
========================= */
* {
  box-sizing: border-box;
}

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  background-color: #f4f6f8;
  padding: 40px;
  color: #2c3e50;
}

/* =========================
   TITRES
========================= */
h1 {
  text-align: center;
  margin-bottom: 30px;
}

h2 {
  margin: 0 0 10px;
}

/* =========================
   CARD (SOLDE)
========================= */
.card {
  background: white;
  border-radius: 14px;
  padding: 20px;
  max-width: 420px;
  margin: 0 auto 30px;
  text-align: center;
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
}

.card h2 {
  font-size: 1.1rem;
  color: #7f8c8d;
}

.solde-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

#solde-initial {
  font-size: 2.2rem;
  font-weight: bold;
  color: #2ecc71;
}

/* =========================
   BOUTONS
========================= */
button {
  padding: 8px 14px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  background: #3498db;
  color: white;
  font-weight: 600;
  transition: background 0.2s ease;
}

button:hover {
  background: #2980b9;
}

button.delete {
  background: #e74c3c;
}

button.delete:hover {
  background: #c0392b;
}

/* =========================
   TABLES
========================= */
table {
  width: 100%;
  border-collapse: collapse;
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  margin-bottom: 30px;
}

thead {
  background: #2c3e50;
  color: white;
}

th, td {
  padding: 12px 14px;
  text-align: center;
  border-bottom: 1px solid #e5e7eb;
}

tbody tr:nth-child(even) {
  background: #f8fafc;
}

tbody tr:hover {
  background: #eef4ff;
}

/* =========================
   COULEURS OPÉRATIONS
========================= */
tr.revenu td {
  color: #2ecc71;
  font-weight: bold;
}

tr.depense td {
  color: #e74c3c;
  font-weight: bold;
}

tr.automatique td {
  background-color: #f0f7ff;
}

/* Prélèvements à venir */
tr.depense .badge-attente {
  background: #f1c40f;
  color: #333;
}

/* Prélèvements payés */
tr.depense .badge-paye {
  background: #2ecc71; /* même rouge que dépense */
  color: white;
}



/* =========================
   BADGES
========================= */
.badge-paye {
  background: #2ecc71;
  color: white;
  padding: 2px 8px;
  border-radius: 8px;
  font-size: 11px;
  margin-left: 6px;
}

.badge-auto {
  background: #3498db;
  color: white;
  padding: 2px 8px;
  border-radius: 8px;
  font-size: 11px;
  margin-left: 6px;
}

.badge-attente {
  background: #f1c40f;
  color: #333;
  padding: 3px 8px;
  border-radius: 8px;
  font-size: 11px;
}

.badge-retard {
  background: #e74c3c;
  color: white;
  padding: 3px 8px;
  border-radius: 8px;
  font-size: 11px;
}

/* =========================
   FORMULAIRES
========================= */
form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.form-inline {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* =========================
   TOP BAR (NAVIGATION)
========================= */

.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.btn-top {
  padding: 10px 18px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  background: #3498db;
  color: white;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.2s ease;
}

.btn-top:hover {
  background: #2980b9;
}

.btn-logout {
  background: #e74c3c;
}

.btn-logout:hover {
  background: #c0392b;
}

input, select {
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid #d1d5db;
}

.form-inline input,
.form-inline select {
  min-width: 0;
  width: 100%;
}

.form-inline input[type="text"] {
  flex: 2;
}

.form-inline input[type="number"] {
  flex: 1;
}

.form-inline button {
  flex-shrink: 0;
}

.form-inline input[type="text"] {
  flex: 2;
  min-width: 180px;   /* 🔥 stabilise les formulaires */
}


/* =========================
   BLOCS ACTIONS
========================= */
.actions-ligne {
  display: flex;
  gap: 30px;
  justify-content: center;
  margin-bottom: 30px;
}

.bloc-action {
  background: white;
  border-radius: 14px;
  padding: 16px;
  min-width: 420px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
  display: flex;              /* 🔥 AJOUT */
  flex-direction: column;     /* 🔥 AJOUT */
  justify-content: center;    /* 🔥 AJOUT */
}

.bloc-action h2 {
  font-size: 1.1rem;
  margin-bottom: 25px;
  text-align: center;
}

/* ===== SOLDE POSITIF / NÉGATIF ===== */
#solde-initial.solde-positif {
  color: #2ecc71;
}

#solde-initial.solde-negatif {
  color: #e74c3c;
}

/* ============================= */
/* TABLES UNIFIÉES (DÉPENSES + PRÉLÈVEMENTS) */
/* ============================= */

.table-finance {
  width: 100%;
  border-collapse: collapse;
  background: white;
  font-size: 14px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  border-radius: 10px;
  overflow: hidden;
}

.table-finance th,
.table-finance td {
  padding: 8px 10px;          /* 🔑 même taille */
  text-align: center;
  vertical-align: middle;
  border-bottom: 1px solid #e0e0e0;
}

.table-finance th {
  background: #2c3e50;
  color: white;
  font-weight: 600;
}

.table-finance tr {
  height: 42px;               /* 🔑 hauteur identique */
}

/* Boutons dans les tableaux */
.table-finance button {
  padding: 4px 8px;
  font-size: 13px;
  border-radius: 6px;
}

/* Badges uniformes */
.table-finance .badge,
.table-finance .badge-paye,
.table-finance .badge-attente,
.table-finance .badge-retard,
.table-finance .badge-cloture {
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 10px;
}

.solde-valeur {
  display: flex;
  align-items: baseline;
  gap: 6px;
  justify-content: center;
  font-size: 2.4rem;
  font-weight: bold;
}

.solde-valeur .euro {
  font-size: 2.1rem;
  font-weight: 600;
  color: inherit; /* même couleur que le solde */
  font-weight: bold;
}

/* =========================
   ZONE STICKY HAUT
========================= */
/* Sticky uniquement desktop */
.sticky-top-zone {
  position: sticky;
  top: 10px;
  z-index: 200;
  background: #f4f6f8;
}

/* Mobile → désactive sticky */
@media (max-width: 768px) {
  .sticky-top-zone {
    position: static;
  }
}



body {
  -webkit-text-size-adjust: 100%;
}


/* =========================
   RESPONSIVE
========================= */
@media (max-width: 900px) {
  .actions-ligne {
    flex-direction: column;
    align-items: center;
  }

  .bloc-action {
    min-width: 100%;
  }
}

@media (max-width: 600px) {
  body {
    padding: 20px;
  }

  #solde-initial {
    font-size: 1.8rem;
  }
}

@media (max-width: 600px) {
  .form-inline {
    flex-wrap: wrap;
  }
}

.table-container {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.sticky-top-zone {
  backdrop-filter: blur(6px);
}

/* =========================
   MOBILE OPTIMISÉ GLOBAL
========================= */
@media (max-width: 768px) {

  /* Layout général */
  body {
    padding: 10px;
  }

  h1 {
    font-size: 1.4rem;
    margin-bottom: 15px;
  }



  /* Cards */
  .card {
    max-width: 100%;
    padding: 15px;
  }

  .solde-valeur {
    font-size: 1.8rem;
  }

  /* Actions */
  .actions-ligne {
    flex-direction: column;
    gap: 12px;
    padding: 0 5px;
  }

  .bloc-action {
    min-width: unset;
    padding: 12px;
  }

  .bloc-action h2 {
    font-size: 1rem;
    margin-bottom: 12px;
  }

  /* Formulaires */
  .form-inline {
    flex-direction: column;
    flex-wrap: wrap;
    gap: 8px;
  }

  .form-inline input,
  .form-inline button {
    width: 100%;
    min-width: 100%;
  }

}