:root {
    --bg: #0B1020;
    --panel: #0f172a;
    --border: rgba(148,163,184,0.25);
    --text: #e5e7eb;
    --muted: #94a3b8;
    --emerald: #10b981;
    --cyan: #22d3ee;
    --rose: #fb7185;
    --blue: #60a5fa;
    --yellow: #facc15;
}

/* Global */
html, body {
    height: 100%;
}
body {
    background-color: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
}

/* Headings */
h1, h2, h3, h4, h5 {
    color: var(--text);
    margin: 0 0 0.5rem 0;
}

/* Card */
.container { max-width: 420px; /* iPhone 16 vertical width comfortable with padding */ }
.card {
    background-color: var(--panel);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    padding: 1rem;
    margin-bottom: 1rem;
    box-shadow: 0 4px 18px rgba(2,6,23,0.5);
}

/* Small utilities */
.text-muted { color: var(--muted) !important; }
.text-emerald-400 { color: var(--emerald) !important; }
.text-cyan-400 { color: var(--cyan) !important; }
.text-rose-400 { color: var(--rose) !important; }

/* Chart container */
#portfolio-chart {
    width: 100%;
    height: 300px;
}

/* Table responsive wrapper */
.table-container {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Bootstrap table dark adjustments */
.table-dark {
    background-color: transparent; /* let card provide bg */
}
.table-dark thead th {
    background: transparent;
    color: var(--muted);
    border-bottom: 1px solid var(--border);
}
.table-dark td, .table-dark th {
    color: var(--text);
    border-color: var(--border);
    vertical-align: middle;
}

/* Mobile tweaks */
@media (max-width: 420px) {
    .container { padding: 0.75rem; }
    #portfolio-chart { height: 240px; }
    .card { padding: 0.75rem; }
    .fs-3 { font-size: 1.25rem; } /* smaller on small screen */
}

.bg-slate-800 { background-color: #1f2937 !important; } /* légèrement plus clair que --bg */
.text-gray-300 { color: #d1d5db !important; }

/* Person selector modern */
.person-item {
    flex: 1;
    padding: 0.4rem 0.6rem;
    text-align: center;
    font-weight: 600;
    border-radius: 9999px; /* pill */
    cursor: pointer;
    background-color: #1f2937; /* gris foncé non sélectionné */
    color: #d1d5db; /* texte gris clair */
    transition: background-color 0.2s, color 0.2s;
    font-size: 0.875rem; /* plus petit */
}

.person-item.selected {
    background-color: #10b981; /* vert */
    color: #fff;
}

.person-item:hover:not(.selected) {
    background-color: #374151; /* gris légèrement plus clair au hover */
}

.btn[data-view].active {
    background-color: #1e293b;
    color: #fff;
    border-color: #fff;
  }

.dist-item {
    padding: 4px 12px;
    border-radius: 20px;
    background: #1f2937;
    color: #E5E7EB;
    cursor: pointer;
    font-size: 14px;
  }
  .dist-item.selected {
    background: #10b981;
    color: white;
  }

/* Dark mode pour les accordéons */
.accordion-button {
    background-color: #0B1020; /* fond sombre */
    color: #fff;               /* texte blanc */
    border: none;              /* retirer bordure du bouton */
}
.accordion-button:not(.collapsed) {
    background-color: #1c2533; /* fond légèrement différent quand ouvert */
    color: #10b981;            /* texte ouvert */
}
.accordion-button::after {
    filter: invert(1);         /* flèche blanche */
}

.accordion-body {
    background-color: #0B1020; /* fond sombre corps accordéon */
    color: #fff;               /* texte blanc */
    border: none;              /* retirer bordure */
}

.accordion-item {
    border: none;              /* retirer bordure entre items */
}

/* Trait fin bleu clair en bas de chaque accordéon item */
.accordion-item {
    border-bottom: 1px solid var(--blue); /* bleu clair défini dans :root */
    border-radius: 0; /* pour que seul le trait apparaisse, pas d'arrondi */
    margin-bottom: 0;  /* pas de marge supplémentaire */
}

/* Supprimer le dernier trait si tu veux pas de ligne après le dernier item */
.accordion-item:last-child {
    border-bottom: none;
}

#stockPriceSlider {
    width: 100%;
    height: 1px;      /* track fine */
    background: #42424255; /* track blanc transparent */
    border-radius: 0px;
    outline: none;
    margin: 0;         /* enlever marge par défaut */
    padding: 0;        /* enlever padding par défaut */
}

/* Chrome, Edge, Safari */
#stockPriceSlider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: linear-gradient(45deg, #22d3ee, #10b981);
    cursor: pointer;
    border: none;
    box-shadow: 0 0 10px rgba(34,211,238,0.8), 0 0 10px rgba(16,185,129,0.8);
    margin-top: -7px;  /* centrer le thumb par rapport à la track fine */
}

#stockPriceSlider::-webkit-slider-runnable-track {
    height: 2px; /* hauteur de la barre */
    background: #c0c0c055; /* couleur / transparence */
    border-radius: 2px;
}

#stockPriceLabel {
    font-weight: bold;
    font-size: 1.2rem; /* ou 18px selon ton design */
    color: #ffffff;
}

tr.table-secondary td {
    background-color: #2d2d2d !important; /* gris foncé */
    color: #9ca3af !important;            /* gris clair */
  }

.simulated-row td {
    background-color: #2d2d2d !important; /* gris foncé */
    color: #9ca3af !important;            /* gris clair */
}

.simulated-row td.text-emerald-400,
.simulated-row td.text-rose-400 {
    color: inherit !important; /* garder vert/rouge si défini */
}