/* Fichier : assets/style.css */

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #121212;
    color: #ffffff;
    margin: 0;
    padding: 20px;
}

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

/* En-tête */
.header {
    background-color: #1e1e1e;
    padding: 20px;
    border-radius: 8px;
    border-left: 5px solid #00ff88;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
}

h1 {
    margin: 0;
    font-size: 24px;
}

/* Watchdog */
.watchdog {
    background-color: #2d2d2d;
    padding: 15px 25px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 15px;
    border: 1px solid #333;
}

.indicator {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    box-shadow: 0 0 10px currentColor;
}

.online { color: #00ff88; background-color: #00ff88; }
.offline { color: #ff3366; background-color: #ff3366; }

.status-text { display: flex; flex-direction: column; }
.status-title { font-weight: bold; font-size: 16px; margin-bottom: 4px; }
.status-details { font-size: 13px; color: #aaa; font-family: 'Courier New', Courier, monospace;}

/* Grille des Prix */
.section-title {
    margin-top: 40px;
    border-bottom: 1px solid #333;
    padding-bottom: 10px;
    color: #aaa;
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
    margin-top: 20px;
}

.card {
    background-color: #1e1e1e;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #333;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.2s;
}

.card:hover {
    transform: translateY(-5px);
    border-color: #00ff88;
}

.card .symbol { font-size: 18px; font-weight: bold; margin-bottom: 10px; color: #fff; }
.card .price { font-size: 24px; color: #00ff88; font-family: 'Courier New', Courier, monospace; margin-bottom: 10px; }
.card .time { font-size: 12px; color: #666; }
.empty-msg { color: #666; font-style: italic; }
.status-badge {
    font-size: 12px;
    font-weight: bold;
    padding: 3px 8px;
    border-radius: 4px;
    margin-bottom: 8px;
    text-transform: uppercase;
}
.badge-open { background-color: rgba(0, 255, 136, 0.1); color: #00ff88; border: 1px solid #00ff88; }
.badge-closed { background-color: rgba(255, 51, 102, 0.1); color: #ff3366; border: 1px solid #ff3366; }
.card.closed { border-color: #ff3366; opacity: 0.8; }
.card.closed:hover { border-color: #ff3366; }
.card.closed .price { color: #fff; }
/* Formulaire d'ajout intelligent */
.add-form-container {
    background-color: #1e1e1e; padding: 20px; border-radius: 8px; border: 1px solid #333; margin-bottom: 30px;
}
.search-wrapper { position: relative; display: flex; gap: 10px; }
#search_input {
    flex-grow: 1; padding: 12px; background-color: #2d2d2d; border: 1px solid #444; color: white;
    border-radius: 4px; font-size: 16px; outline: none; transition: border 0.2s;
}
#search_input:focus { border-color: #00ff88; }
.btn-add {
    background-color: #00ff88; color: #000; border: none; padding: 0 25px; font-weight: bold;
    border-radius: 4px; cursor: pointer; transition: background 0.2s;
}
.btn-add:hover { background-color: #00cc6a; }

/* Menu déroulant de l'autocomplétion */
#suggestions {
    position: absolute; top: 100%; left: 0; right: 120px; background-color: #2d2d2d; border: 1px solid #444;
    border-top: none; border-radius: 0 0 4px 4px; z-index: 1000; max-height: 200px; overflow-y: auto; display: none;
}
.suggestion-item { padding: 10px 15px; cursor: pointer; border-bottom: 1px solid #333; display: flex; justify-content: space-between; }
.suggestion-item:hover { background-color: #3d3d3d; }
.sugg-symbol { font-weight: bold; color: #00ff88; }
.sugg-name { color: #aaa; font-size: 14px; }

/* Modifications des Cartes (Nom + Bouton Supprimer) */
.card { position: relative; }
.card .company-name { font-size: 12px; color: #888; text-align: center; margin-bottom: 10px; height: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%;}
.btn-delete {
    position: absolute; top: 10px; right: 10px; background: none; border: none; color: #666; cursor: pointer; font-size: 16px; transition: color 0.2s;
}
.btn-delete:hover { color: #ff3366; }
/* Style pour le tableau du Portefeuille */
.table-container {
    background-color: #1e1e1e; padding: 20px; border-radius: 8px; border: 1px solid #333; overflow-x: auto;
}
table { width: 100%; border-collapse: collapse; text-align: left; }
th { background-color: #2d2d2d; color: #aaa; padding: 12px 15px; font-size: 14px; text-transform: uppercase; border-bottom: 2px solid #444; }
td { padding: 15px; border-bottom: 1px solid #333; color: #fff; font-family: 'Courier New', Courier, monospace; }
tr:hover { background-color: #2a2a2a; }

/* Couleurs des Gains/Pertes */
.pnl-positive { color: #00ff88; font-weight: bold; }
.pnl-negative { color: #ff3366; font-weight: bold; }
.pnl-neutral { color: #aaa; }
.pnl-warning { color: #fbbf24; font-weight: bold; }

/* Petit formulaire d'achat */
.buy-form { display: flex; gap: 10px; margin-bottom: 20px; align-items: center; background-color: #2d2d2d; padding: 15px; border-radius: 8px; }
.buy-form input { padding: 10px; background-color: #1e1e1e; border: 1px solid #444; color: white; border-radius: 4px; width: 150px;}
.buy-form input:focus { border-color: #00ff88; outline: none; }
/* Bouton de clôture de position */
.btn-close-pos {
    background-color: rgba(255, 51, 102, 0.1);
    color: #ff3366;
    border: 1px solid #ff3366;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: bold;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    text-transform: uppercase;
}
.btn-close-pos:hover {
    background-color: #ff3366;
    color: #fff;
}
/* --- LE WALLET (Portefeuille Haut de Page) --- */
.wallet-banner {
    background-color: #222;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    border-left: 4px solid #3b82f6;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; /* S'adapte sur les petits écrans */
    gap: 20px;
}

.wallet-stats {
    display: flex;
    gap: 35px;
}

.wallet-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Aligne le texte et les prix à gauche proprement */
    justify-content: center;
}
.wallet-actions {
    display: flex;
    grid-template-columns: 1fr 1fr; /* Grille de 2 colonnes pour des boutons égaux */
    gap: 10px;
}
.wallet-actions button { width:187px; }
.wallet-label { font-size: 11px; color: #888; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 3px; }
.wallet-value { font-size: 20px; font-weight: bold; font-family: 'Courier New', Courier, monospace; }
.text-green { color: #00ff88; }
.text-red { color: #ff3366; }
.text-white { color: #ffffff; }

/* Bouton Paramètres Stratégie */
.btn-header {
    padding: 10px 15px;
    font-size: 13px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    text-align: center;
    border: none;
    transition: background-color 0.2s ease;
    width: 100%;
}

.btn-purple { background-color: #8b5cf6; color: white; }
.btn-purple:hover { background-color: #7c3aed; }

.btn-blue { background-color: #3b82f6; color: white; }
.btn-blue:hover { background-color: #2563eb; }

.btn-gold { background-color: transparent; border: 1px solid #fbbf24; color: #fbbf24; }
.btn-gold:hover { background-color: rgba(251, 191, 36, 0.1); }

.btn-red { background-color: transparent; border: 1px solid #ff3366; color: #ff3366; }
.btn-red:hover { background-color: #ff3366; color: white; }

.btn-settings {
    background-color: #2d2d2d; color: #aaa; padding: 8px 15px; border: 1px solid #444;
    border-radius: 4px; cursor: pointer; font-weight: bold; font-size: 12px; transition: all 0.2s;
    margin-left: auto; /* Pousse le bouton tout à droite */
}
.btn-settings:hover { background-color: #3b82f6; color: white; border-color: #3b82f6; }

/* Bouton Paramètres Stratégie */
.btn-settings {
    background-color: #3b82f6; color: white; padding: 10px 15px; border: none;
    border-radius: 4px; cursor: pointer; font-weight: bold; font-size: 14px; transition: 0.2s;
}
.btn-settings:hover { background-color: #2563eb; }

/* --- LA FENÊTRE MODALE (Paramètres) --- */
.modal-overlay {
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.8); z-index: 2000; justify-content: center; align-items: center;
}
.modal-content {
    background-color: #1e1e1e; padding: 30px; border-radius: 8px; border: 1px solid #444;
    width: 450px; max-width: 90%; position: relative; box-shadow: 0 10px 25px rgba(0,0,0,0.5);
}
.modal-header { font-size: 18px; font-weight: bold; margin-bottom: 20px; border-bottom: 1px solid #333; padding-bottom: 10px;}
.modal-close {
    position: absolute; top: 15px; right: 15px; background: none; border: none;
    color: #aaa; font-size: 20px; cursor: pointer; transition: 0.2s;
}
.modal-close:hover { color: #fff; }
.form-group { margin-bottom: 15px; }
.form-group label { display: block; margin-bottom: 5px; color: #aaa; font-size: 13px; }
.form-group input, .form-group select {
    width: 100%; padding: 10px; background-color: #2d2d2d; border: 1px solid #444;
    color: white; border-radius: 4px; box-sizing: border-box;
}
.form-group input:focus { border-color: #3b82f6; outline: none; }

.header .headerrow { width:100%; display:flex; }
.header .headerrow:first-child { margin-bottom:15px; }

/* --- ALERTES SYSTÈME (Type "Toast" Flottant) --- */
.alert {
    position: fixed; /* Reste à l'écran même si on scrolle */
    top: 20px;
    left: 50%;
    transform: translateX(-50%); /* Centre parfaitement l'alerte */
    z-index: 9999; /* Toujours au premier plan */
    padding: 15px 30px; 
    border-radius: 8px; 
    font-weight: bold; 
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    transition: opacity 0.5s ease; /* Pour l'animation de disparition */
    min-width: 300px;
}
.alert-success { background-color: rgba(0, 255, 136, 0.9); color: #000; border: 1px solid #00ff88; }
.alert-error { background-color: rgba(255, 51, 102, 0.9); color: #fff; border: 1px solid #ff3366; }