/* ================= BASE ================= */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Inter',sans-serif;
}

body{
    background:#000;
    color:#fff;
    padding:12px;
}

.container{
    max-width:1100px;
    margin:auto;
}

/* ================= TITRES ================= */
h1{
    text-align:center;
    font-size:24px;
    margin-bottom:8px;
    font-weight:700;
}

h2{
    text-align:center;
    font-size:18px;
    margin-bottom:4px;
}

h3{
    text-align:center;
    font-size:14px;
    margin-bottom:20px;
    font-weight:500;
}

/* ================= CAPITAL ================= */
.capital-box{
    background:#274e13;
    padding:12px;
    margin:8px auto;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:15px;
    font-size:16px;
    font-weight:600;
    flex-wrap:wrap;
}

.capital-box input{
    padding:6px;
    width:140px;
    border:none;
    text-align:center;
    font-weight:bold;
}

/* ================= TABLE ================= */

.table-wrapper{
    width:100%;
    margin-top:15px;
    overflow-x:auto; /* mobile scroll */
}

/* tableau */
table{
    width:100%;
    border-collapse:collapse;
    table-layout:fixed;
}

/* LARGEUR CONTROLEE */
th:nth-child(1), td:nth-child(1){width:6%;}
th:nth-child(2), td:nth-child(2){width:13%;}
th:nth-child(3), td:nth-child(3){width:13%;}
th:nth-child(4), td:nth-child(4){width:10%;}
th:nth-child(5), td:nth-child(5){width:18%;}
th:nth-child(6), td:nth-child(6){width:18%;}
th:nth-child(7), td:nth-child(7){width:7%;}
th:nth-child(8), td:nth-child(8){width:8%;}
th:nth-child(9), td:nth-child(9){width:7%;}
th:nth-child(10), td:nth-child(10){width:7%;}

/* cellules */
th,td{
    border:1px solid #1f7a1f;
    padding:6px 4px;
    font-size:11px;
    text-align:center;
    overflow:hidden;
}

/* empêche débordement contenu */
td > *{
    display:block;
    width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

/* nombres alignés proprement */
td{
    font-variant-numeric:tabular-nums;
}

/* inputs tableau */
td input{
    width:100%;
    border:none;
    background:transparent;
    color:#fff;
    text-align:center;
    font-size:11px;
}

/* hover */
tbody tr:hover{
    background:#111;
}

thead{
    background:#111;
}

/* ================= PROFIT ================= */
.profit{
    font-weight:600;
    cursor:pointer;
    transition:0.3s;
}

.green{ color:#00ff00; }
.red{ color:#ff4d4d; }

/* ================= LIVE DOT ================= */
.live-dot{
    width:14px;
    height:14px;
    border-radius:50%;
    margin:auto;
    cursor:pointer;
}

/* ================= BOUTONS ================= */
.add-btn{
    background:#1f7a1f;
    color:#fff;
    border:none;
    padding:8px 15px;
    margin:5px;
    cursor:pointer;
    font-weight:600;
}

.delete-btn{
    background:#400;
    color:#fff;
    border:none;
    padding:3px 6px;
    cursor:pointer;
    font-size:10px;
}

/* Reset rouge */
.reset-btn{
    background:#b30000;
    color:white;
}

/* Export bleu doux */
.export-btn{
    background:#2a6fd6;
    color:white;
}

.button-section{
    text-align:center;
    margin-top:15px;
}

/* ================= GLOBAL BOX ================= */
.global-box{
    margin-top:25px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
}

.global-box div{
    background:#111;
    padding:15px 25px;
    border-radius:12px;
    box-shadow:0 0 15px #1f7a1f44;
    font-weight:700;
    font-size:18px;
    min-width:220px;
    text-align:center;
}

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

    body{ padding:8px; }

    h1{ font-size:20px; }
    h2{ font-size:16px; }
    h3{ font-size:13px; }

    th,td{ font-size:10px; padding:5px 3px; }

    .capital-box{
        font-size:14px;
        gap:10px;
    }

    .capital-box input{
        width:120px;
    }

    .add-btn{
        padding:7px 12px;
        font-size:13px;
    }
}

/* Animation perte */
.loss-animation{
    animation:flashRed 0.4s ease-in-out 2;
}

@keyframes flashRed{
0%{background:#400;}
50%{background:#900;}
100%{background:transparent;}
}

/* Barre progression */
.progress-container{
    width:100%;
    height:24px; /* hauteur pour texte */
    background:#111;
    margin:10px 0;
    border-radius:20px;
    overflow:hidden;
    position:relative;
    font-weight:700;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:14px;
}

.progress-bar{
    height:100%;
    width:0%;
    background:linear-gradient(to right,#ff0000,#ffff00,#00ff00);
    transition:0.5s;
    position:absolute;
    top:0;
    left:0;
    z-index:1;
}

/* Texte au-dessus de la barre avec ombre */
.progress-text{
    position:absolute;
    width:100%;
    text-align:center;
    z-index:2;
    text-shadow:1px 1px 3px #000;
    font-weight:700;
}