/* style general de la page */
body {
    font-family: Arial, sans-serif; /* jaurais voulu une autre police mais je savais pas comment faire */
    background-color: #f0f0f0;
    margin: 0;
    padding: 20px;
    /* javais mis padding 20 sans px et sa marchait pas, erreur classique apparement */
}

/* le titre */
h1 {
    color: #333333;
    text-align: center;
    /* jai essayé de metre un text-shadow mais sa marcher pas */
}

h2 {
    color: #555;
    border-bottom: 2px solid #ccc;
    padding-bottom: 5px;
}


.section {
    background-color: white;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 5px;
    border: 1px solid #ddd;
}


input, select {
    padding: 8px;
    margin: 5px;
    border: 1px solid #aaa;
    border-radius: 3px;
    font-size: 14px;
}

/* les bouton - couleur verte comme dans le tuto w3schools */
button {
    background-color: #4CAF50;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 14px;
    margin: 5px;
}

/* quand on passe la souris sur le bouton */
/* sa jai trouvé sur stack overflow je lavou */
button:hover {
    background-color: #45a049;
}

/* bouton rouge pour supprimer */
.btn-supprimer {
    background-color: #e74c3c;
    padding: 5px 10px;
    font-size: 12px;
}

.btn-supprimer:hover {
    background-color: #c0392b;
}

/* le resume du budget jai mis genre 3h a comprendre flexbox cest chelou */
.resume {
    display: flex;
    gap: 15px;
    flex-wrap: wrap; /* pour que sa passe sur mobile jespere in shaa Allah*/
}

.carte-info {
    flex: 1;
    min-width: 150px;
    padding: 15px;
    border-radius: 5px;
    text-align: center;
    border: 1px solid #ddd;
}

/* couleur differente selon si cest positif ou negatif */
.carte-info.vert {
    background-color: #d5f5d5;
}

.carte-info.rouge {
    background-color: #ffd5d5;
}

.carte-info.bleu {
    background-color: #d5e8f5;
}

/* le gros chiffre dans les carte */
.carte-info .montant {
    font-size: 24px;
    font-weight: bold;
    display: block;
    margin-top: 5px;
}

.carte-info .label {
    font-size: 12px;
    color: #666;
}

/* le tableau des depense */
/* sans border-collapse les bordure se doublent cest bizarre */
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

th {
    background-color: #4CAF50;
    color: white;
    padding: 10px;
    text-align: left;
}

td {
    padding: 8px 10px;
    border-bottom: 1px solid #eee;
}

/* une ligne sur deux en gris, sa fait plus propre (j'ai fort copier sur qqn)*/
tr:nth-child(even) {
    background-color: #f9f9f9;
}

/* les badge de categorie */
.badge-categorie {
    background-color: #3498db;
    color: white;
    padding: 2px 8px;
    border-radius: 10px; /* arrondi pour faire comme un vrai badge */
    font-size: 12px;
}

/* message quand ya pas de depense */
.vide {
    text-align: center;
    color: #aaa;
    font-style: italic;
    padding: 20px;
}

/* la liste des categorie en bas */
.liste-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

/* chaque categorie saffiche comme un petit tag tout mignion tout hnine*/
.tag-cat {
    background-color: #ecf0f1;
    border: 1px solid #bdc3c7;
    padding: 5px 10px;
    border-radius: 15px;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* la petite croix rouge pour supprimer une categorie va la bas*/
.tag-cat .croix {
    color: #e74c3c;
    cursor: pointer;
    font-weight: bold;
}

/* jsp si cest bien de styler label comme ca mais sa marche */
label {
    font-weight: bold;
    font-size: 13px;
    color: #444;
}

/* barre de progresion pour le budget */
.barre-fond {
    background-color: #ddd;
    border-radius: 5px;
    height: 20px;
    margin-top: 8px;
    overflow: hidden;
}

/* la partie remplie de la barre - la largeur est changé par javascript */
.barre-remplie {
    height: 100%;
    background-color: #4CAF50;
    transition: width 0.3s; /* une petite animation sympa */
    border-radius: 5px;
}