/* =========================================================
   1. Perusasetukset (body, otsikot, jne.)
   ========================================================= */
body {
    margin: 0;
    padding: 0;
    background-color: #1c1c1c;
    /* Tumma tausta */
    color: #e0e0e0;
    /* Vaalea teksti */
    font-family: 'Roboto', sans-serif;
}

h1,
h2 {
    text-align: center;
    color: #FF8C00;
}

/* =========================================================
   2. Yleiset kontit (chart-container, pricing-container)
   ========================================================= */

/* Kaavion säiliö */
#chart-container {
    position: relative;
    /* auttaa Chart.js:ää mitoissa */
    background-color: #262626;
    border: 1px solid #444;
    border-radius: 8px;
    padding: 2rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

    width: min(1100px, 92%);
    /* siistimpi max-leveys */
    margin: 0 auto;

    /* ★ Anna oikea korkeus (valitse yksi) */
    height: clamp(360px, 45vh, 640px);
    /* suositus: skaalautuva */
    /* vaihtoehto: min-height: 420px;   */

    display: flex;
    align-items: stretch;
    /* venytä sisältö koko korkeuteen */
    justify-content: center;

    overflow: hidden;
    /* ei scrollia itse säiliöön */
}

/* Canvas venyy täyttämään säiliön */
#resultsChart {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

/* Flexbox-asettelu molemmille taulukoille (Current Prices, Leaderboard) */
#pricing-container {
    display: flex;
    justify-content: space-evenly;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 2rem;
    align-items: center;
}

/* =========================================================
   3. Sivun eri osiot (current-prices, leaderboard, player-stats)
   ========================================================= */
#current-prices,
#leaderboard,
#player-stats {
    background-color: #2c2c2c;
    color: #e0e0e0;
    padding: 1rem;
    border-radius: 8px;
    width: 250px;
    box-sizing: border-box;
    height: 690px;
    overflow: auto;
}

#current-prices {
    overflow: visible;
}

/* =========================================================
   4. Taulukot (pricesTable, leaderboardTable)
   ========================================================= */
table {
    position: relative;
    /* Estää tooltiptien leikkaantumista */
    overflow: visible;
    width: 100%;
    border-collapse: collapse;
}

#pricesTable th,
#pricesTable td,
#leaderboardTable th,
#leaderboardTable td {
    padding: 10px;
    border: 1px solid #444;
    text-align: center;
}

/* Taulukoiden otsikot */
#pricesTable th,
#leaderboardTable th {
    background-color: #444;
    font-weight: bold;
    color: #FF8C00;
    /* Otsikot oranssiksi */
}

/* Taulukoiden tietosolut */
#pricesTable td,
#leaderboardTable td {
    font-size: 14px;
}

/* Leaderboard-sarakkeet */
#leaderboardTable th:nth-child(1),
#leaderboardTable td:nth-child(1) {
    width: 50%;
}

#leaderboardTable td:nth-child(2) {
    max-width: 100px;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.leaderboard-player-link {
    background: none;
    border: none;
    color: inherit;
    font: inherit;
    padding: 0;
    cursor: pointer;
    text-align: center;
    width: 100%;
}

.leaderboard-player-link:hover,
.leaderboard-player-link:focus {
    text-decoration: underline;
    outline: none;
}

/* Current Prices -sarakkeiden leveydet */
#pricesTable th:nth-child(1),
#pricesTable td:nth-child(1) {
    width: 35%;
}

#pricesTable th:nth-child(2),
#pricesTable td:nth-child(2) {
    width: 25%;
}

#pricesTable th:nth-child(3),
#pricesTable td:nth-child(3) {
    width: 40%;
}

/* =========================================================
   5. Admin-näkymä
   ========================================================= */
#admin-dashboard {
    background-color: #2c2c2c;
    color: #e0e0e0;
    padding: 2rem;
    border-radius: 8px;
    margin-top: 20px;
}

#admin-dashboard h2 {
    color: #FF8C00;
}

#admin-dashboard ul {
    list-style-type: none;
    padding: 0;
}

#admin-dashboard ul li {
    margin: 10px 0;
}

#admin-dashboard ul li a {
    color: #FF8C00;
    text-decoration: none;
}

#admin-dashboard ul li a:hover {
    color: #FFCC00;
}

/* =========================================================
   6. Nappeihin liittyviä tyylejä (logout-button, gradient-dark-button)
   ========================================================= */

/* Yleinen gradient-tyylinen nappi */
.gradient-dark-button {
    background-color: #333;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
}

.gradient-dark-button:hover {
    background-color: #888;
}

/* Logout-nappi */
#logoutButton {
    position: absolute;
    top: 20px;
    right: 20px;
    background: #ff5722;
    /* Dark Orange color */
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 5px;
    font-size: 16px;
}

#logoutButton:hover {
    background: #e64a19;
}

/* Header-tyyli */
header {
    position: relative;
    padding: 20px;
    background-color: #222;
    color: white;
    text-align: center;
}

/* Keskitetty footeri (esimerkkiasetus) */
footer {
    margin: auto;
    width: 10%;
}

/* =========================================================
   7. Modaalit (modal, modal-content)
   ========================================================= */

/* 
   Jos haluat tummentaa sivun taustan modaalin taakse, 
   käytä esim.: background-color: rgba(0,0,0,0.5);
   Jos haluat täysin läpinäkyvän, käytä background-color: transparent;
*/
.modal {
    display: none;
    /* Piilotettu oletuksena */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    background-color: rgba(0, 0, 0, 0.5);
    /* Tumma overlay */
    /* tai: background-color: transparent; */
    /* Jos haluat .modalin aukeavan tietyssä kohtaa:
       transform: translate(-50%, -50%);
       top: 50%; left: 50%;
    */
}

.modal-content {
    background-color: #2c2c2c;
    color: white;
    margin: 10% auto;
    /* Keskitetään pysty- ja vaakasuunnassa */
    width: 300px;
    /* Säädä halutuksi */
    padding: 20px;
    position: relative;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Sulkemisnappi (X) */
.close {
    color: white;
    cursor: pointer;
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 25px;
    font-weight: bold;
}

.close:hover {
    color: #ff5c5c;
}

/* 
   Jos haluat muuttaa modalin sisältöä popupinfo-id:llä
*/
#popupinfo .modal-content {
    text-align: center;
    background-color: #2c2c2c;
}

/* =========================================================
   8. Lomakkeet (form)
   ========================================================= */
form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

form label {
    font-size: 16px;
}

form input,
form select,
form button {
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #444;
}

form button {
    background-color: #444;
    color: white;
    cursor: pointer;
}

form button:hover {
    background-color: #666;
}

/* =========================================================
   9. Tooltip-tyylit (data-tooltip)
   ========================================================= */
td[data-tooltip],
th[data-tooltip] {
    position: relative;
    cursor: pointer;
}

td[data-tooltip]::after,
th[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    bottom: 120%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    white-space: nowrap;
    font-size: 12px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s, transform 0.2s;
    z-index: 10;
    max-width: 400px;
}

td[data-tooltip]:hover::after,
th[data-tooltip]:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(-5px);
    white-space: normal;
    word-wrap: break-word;
}

/* =========================================================
   10. Navigointipalkki (nav-menu, dropdown)
   ========================================================= */
.nav-menu {
    position: fixed;
    top: 10px;
    left: 10px;
    list-style-type: none;
    margin: 0;
    padding: 0;
    background-color: #333;
    border-radius: 5px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 1000;
}

.nav-menu .dropdown {
    position: relative;
}

.nav-menu .dropbtn {
    background-color: #333;
    color: white;
    padding: 10px 20px;
    display: block;
    border: none;
    font-size: 16px;
    cursor: pointer;
    text-decoration: none;
}

.nav-menu .dropbtn:hover {
    background-color: #575757;
}

.nav-menu .dropdown-content {
    display: none;
    position: absolute;
    left: 0;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

.nav-menu .dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.nav-menu .dropdown-content a:hover {
    background-color: #f1f1f1;
}

.nav-menu .dropdown:hover .dropdown-content {
    display: block;
}

/* =========================================================
   11. Muut mahdolliset luokat (jos yhä tarvitset niitä)
   ========================================================= */

/* Painikkeiden/elementtien keskitys */
.button {
    justify-content: center;
}

.Manageshare {
    justify-content: center;
}

/* =========================================================
   12. Chat-ikkunan tyylit
   ========================================================= */
#chat-popup {
    position: fixed;
    bottom: 10px;
    right: 10px;
    width: 350px;
    border: 2px solid black;
    border-radius: 8px;
    background-color: white;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: black;
}

#chat-room-title {
    background-color: #fff;
    border-bottom: 1px solid #ddd;
    padding: 10px;
    text-align: center;
    font-weight: bold;
    font-size: 16px;
    cursor: pointer;
}

#chat-messages {
    flex: 1;
    padding: 10px;
    overflow-y: auto;
    font-size: 14px;
    line-height: 1.35;
    color: #333;
    max-height: 300px;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    align-self: stretch;
}

#chat-form {
    display: flex;
    padding: 5px;
    border-top: 1px solid #ddd;
    flex-direction: revert;
    width: 90%;
}

#chat-form input[type="text"] {
    flex: 1;
    /* Tekstikenttä venyy täyttämään tilan */
    padding: 8px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
    outline: none;
    margin-right: -19px;
    box-sizing: border-box;
    border-color: #007bff;
}

#chat-form button {
    padding: 8px 12px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    outline: none;
    text-align: center;
}

#chat-form button:hover {
    background-color: #0056b3;
}

#player-popup {
    position: absolute;
    /* Tai fixed, jos haluat aina ikkunan yläpuolelle */
    width: 200px;
    border: 1px solid #ccc;
    border-radius: 8px;
    background-color: #fdfdfd;
    color: #333;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 2000;
    padding: 10px;
}

/* Piilota vain hidden-luokalla */
#player-popup.hidden {
    display: none;
}

#player-popup h3 {
    margin: 0;
    padding: 0;
    font-size: 16px;
    font-weight: normal;
    margin-bottom: 10px;
}

/* Napit popupin sisällä */
#player-popup button {
    display: block;
    width: 100%;
    margin: 5px 0;
    padding: 8px;
    font-size: 14px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

/* Esim. punainen 'Block Player' -nappi */
#block-player-button {
    background-color: #f44336;
    color: #fff;
}

/* Esim. sininen 'Send Message' -nappi */
#private-message-button {
    background-color: #2196f3;
    color: #fff;
}

.close-popup {
    position: absolute;
    top: 8px;
    right: 12px;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    color: #666;
}

.close-popup:hover {
    color: #000;
}

#user-list-items {
    list-style: none;
    padding: 0;
    margin: 0;
}

.user-list-item {
    color: #333;
}

.user-list-container h3 {
    font-size: small;
    color: #FF8C00;
}

.user-list-item:last-child {
    border-bottom: none;
    /* Poista viimeisen rivin alaviiva */
}

#toggle-user-list {
    background: #007bff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#toggle-user-list:hover {
    background: #0056b3;
}

.chat-tab-button {
    background: #ccc;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
}

.chat-tab-button.active {
    background: #007bff;
    color: #fff;
}

.chat-message-time {
    color: #999;
    font-size: 12px;
    margin-right: 5px;
}

.unread {
    animation: blink 1s infinite;
}

@keyframes blink {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.3;
    }

    100% {
        opacity: 1;
    }
}


#settings-popup {
    position: absolute;
    bottom: 50px;
    right: 10px;
    width: 200px;
    border: 1px solid #ccc;
    border-radius: 8px;
    background-color: #fdfdfd;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 2000;
    padding: 10px;
}

#settings-popup.hidden {
    display: none;
}

#settings-popup h3 {
    font-size: 16px;
    margin-bottom: 10px;
}

#settings-popup label {
    display: block;
    margin-bottom: 10px;
    font-size: 14px;
}

#settings-popup input {
    margin-left: 5px;
}

#settings-popup button {
    padding: 5px 10px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

#settings-popup button:hover {
    background-color: #0056b3;
}

#settings-button {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
}

#settings-button:hover {
    color: #0056b3;
}

#chat-controls {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 1px;
    background-color: #f4f4f4;
    border-top: 1px solid #ddd;
}

#chat-controls button {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
}

#chat-controls button:hover {
    color: #007bff;
}

#chat-tabs-controls-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px;
    border-bottom: 1px solid #ddd;
}

#chat-tabs {
    display: flex;
    gap: 5px;
    padding-right: 5px;
}

#user-list-items li {
    padding: 5px 0;
    border-bottom: 1px solid #ddd;
    font-size: 14px;
}

/* Käyttäjälistan sulkemispainike */
#close-user-list {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: #333;
}

#close-user-list:hover {
    color: #007bff;
}

/* Päivitetty käyttäjälistan sijainti */
#user-list-container {
    position: absolute;
    top: 0;
    right: -400px;
    /* Käyttäjälista piilossa aluksi */
    width: 145px;
    height: 90%;
    background: #f8f9fa;
    border-left: 1px solid #ccc;
    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
    padding: 20px 10px;
    transition: right 0.3s ease;
    z-index: 1000;
    overflow-y: auto;
}

#user-list-container.visible {
    right: 0;
    /* Näkyvä tila */
}

#autocomplete-box {
    position: absolute;
    max-height: 150px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #ccc;
    z-index: 1000;
    font-size: 14px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

.autocomplete-item {
    padding: 8px;
    cursor: pointer;
    border-bottom: 1px solid #ddd;
}

.autocomplete-item:last-child {
    border-bottom: none;
}

.autocomplete-item:hover {
    background-color: #007bff;
    color: white;
}

/* Tumman teeman määritykset */
.dark-theme {
    background-color: #1c1c1c !important;
    color: white !important;
}

.dark-theme #chat-popup,
.dark-theme #settings-popup,
.dark-theme #chat-room-title {
    background-color: #2c2c2c !important;
    color: #fff !important;
}

.dark-theme .chat-tab-button,
.dark-theme #chat-controls,
.dark-theme #message {
    background-color: #444 !important;
    color: white !important;
    border: 1px solid #555 !important;
}

.dark-theme input,
.dark-theme button {
    background-color: #555 !important;
    color: white !important;
}

.dark-theme #user-list-container {
    background-color: #2c2c2c !important;
    color: #e0e0e0 !important;
    border: 1px solid #444 !important;
}

.dark-theme #user-list-container h3 {
    color: #fff !important;
}

.dark-theme #user-list-items {
    color: #e0e0e0 !important;
}

.dark-theme #close-user-list {
    color: #fff !important;
}

.dark-theme #close-user-list:hover {
    color: #ff5c5c !important;
}

.dark-theme #chat-messages {
    color: #e0e0e0 !important;
}

/* Aikaleiman muotoilu */
.chat-time {
    font-size: 12px;
    color: #bbb;
    /* Vähän haaleampi, mutta silti näkyvä */
}

/* Viestien perusmuotoilu */
.chat-message {
    padding: 5px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Vuorottelevat värit (parempi luettavuus) */
.chat-message:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.05);
}

/* Pelaajan nimi - Tummassa teemassa */
.dark-theme .name-link {
    color: #ffb347;
    /* Oranssi toimii hyvin tummalla taustalla */
    position: relative;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
    display: inline-block;
    padding-bottom: 2px;
}

/* Pelaajan nimi - Vaaleassa teemassa */
.name-link {
    color: #7c9fff;
    /* Sininen vaalealla teemalla */
    position: relative;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
    display: inline-block;
    padding-bottom: 2px;
}

.name-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(135deg, #ffb347 0%, #ff7b00 100%);
    transition: width 0.3s ease;
}

.dark-theme .name-link:hover {
    color: #ffd479;
}

.name-link:hover {
    color: #a5b4fc;
}

.name-link:hover::after {
    width: 100%;
}

.unread-badge {
    background-color: red;
    color: white;
    font-size: 12px;
    font-weight: bold;
    border-radius: 50%;
    padding: 3px 7px;
    margin-left: 8px;
    display: inline-block;
}

.system-message {
    color: #4CAF50;
    font-weight: bold;
    text-align: center;
    padding: 5px;
    margin: 5px 0;
    background: rgba(76, 175, 80, 0.1);
    border-radius: 5px;
}

.system-message.private-alert {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    color: #ffeb3b;
    background: rgba(255, 235, 59, 0.12);
    text-align: left;
}

.system-message.private-alert .private-alert-open {
    background: #2196f3;
    border: none;
    color: #fff;
    padding: 4px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
}

.system-message.private-alert .private-alert-open:hover {
    background: #1976d2;
}

.season-banner {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    margin: 4px 0;
    color: #f5f5f5
}

.season-banner {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    margin: 4px 0;
    color: #f5f5f5
}

.help-circle {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid #888;
    background: transparent;
    color: #fff;
    cursor: pointer;
    line-height: 20px;
    font-weight: 600
}

.modal .small {
    max-width: 520px
}

.subtle {
    opacity: .8;
    font-size: .9em
}

#season-modal .subtle {
    display: block;
    margin-top: 2px
}

#season-modal ol {
    padding-left: 1.2rem;
    margin: 0.25rem 0 0.75rem
}

/* --- Modern card & surface tweaks --- */
.card,
.panel,
.chart-card {
    background: rgba(12, 16, 28, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

/* Headings */
h1,
h2,
h3 {
    letter-spacing: .4px;
}

/* --- History scroller --- */
.history-controls {
    display: none;
    /* Hidden by default */
    gap: 0.5rem;
    align-items: center;
    justify-content: center;
    margin: 12px auto 0;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(6px);
    width: min(860px, 96%);
}

.history-controls:not([hidden]) {
    display: flex;
    /* Show when not hidden */
    flex-wrap: wrap;
}

/* Buttons */
.history-controls button {
    padding: 6px 10px;
    border-radius: 10px;
    border: 1px solid #2a3350;
    background: linear-gradient(145deg, #0e1422, #111a30);
    color: #FF8C00;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease;
}

.history-controls button:hover:not(:disabled) {
    background: linear-gradient(145deg, #1a2236, #0e1422);
    transform: translateY(-1px);
}

.history-controls button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Range slider */
.history-controls input[type="range"] {
    width: min(500px, 50vw);
    accent-color: #FF8C00;
}

/* Label under slider */
.history-label,
#history-label {
    display: block;
    text-align: center;
    width: 100%;
    margin-top: 6px;
    font-size: 0.92rem;
    color: #aab7d0;
    letter-spacing: 0.2px;
}

/* =============== Analysis Modal – Orange/Dark =============== */
#analysis-modal.modal {
    background: rgba(0, 0, 0, .66);
    backdrop-filter: blur(2px);
}

#analysis-modal .aa-modal {
    --aa-bg: #0e1015;
    --aa-surface: #14171c;
    --aa-surface-2: #191e26;
    --aa-border: #282e37;
    --aa-text: #f5f7fa;
    --aa-dim: #aab3bf;
    --aa-muted: #cfd6df;
    --aa-accent: #ff8c00;
    --aa-accent-2: #ffd39a;
    width: min(1100px, 94vw);
    margin: 48px auto;
    background: var(--aa-surface);
    color: var(--aa-text);
    border: 1px solid var(--aa-border);
    border-radius: 14px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, .55);
    overflow: hidden;
}

/* Header */
#analysis-modal .modal-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background:
        linear-gradient(180deg, rgba(255, 140, 0, .16), rgba(255, 140, 0, 0)),
        linear-gradient(180deg, #171b22, #14171c);
    border-bottom: 1px solid var(--aa-border);
}

#analysis-modal .modal-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: .2px;
}

#analysis-modal #analysis-close {
    margin-left: auto;
    border: 0;
    background: transparent;
    color: var(--aa-text);
    font-size: 18px;
    cursor: pointer;
    opacity: .8;
}

#analysis-modal #analysis-close:hover {
    color: var(--aa-accent);
    opacity: 1;
}

/* Controls */
#analysis-modal .modal-controls {
    padding: 12px 16px 4px;
    background: var(--aa-surface);
}

#analysis-modal .control-group {
    margin-bottom: 8px;
}

#analysis-modal .control-label {
    display: block;
    font-size: 12px;
    color: var(--aa-dim);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 6px;
}

#analysis-modal .control-row {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

#analysis-modal .input,
#analysis-modal select {
    background: var(--aa-surface-2);
    border: 1px solid var(--aa-border);
    color: var(--aa-text);
    border-radius: 10px;
    padding: 6px 10px;
    outline: none;
}

#analysis-modal select:focus {
    border-color: var(--aa-accent);
    box-shadow: 0 0 0 3px rgba(255, 140, 0, .18);
}

/* Buttons */
#analysis-modal .btn {
    border-radius: 10px;
    padding: 7px 12px;
    font-weight: 800;
    cursor: pointer;
    border: 1px solid transparent;
}

#analysis-modal .btn-primary {
    background: var(--aa-accent);
    color: #000;
}

#analysis-modal .btn-primary:hover {
    filter: brightness(1.07);
}

#analysis-modal .btn-secondary {
    background: #0f131a;
    color: var(--aa-muted);
    border-color: var(--aa-border);
}

#analysis-modal .btn-ghost {
    background: transparent;
    color: var(--aa-accent);
}

#analysis-modal .btn-ghost:hover {
    color: var(--aa-accent-2);
}

/* Ticker chips */
#analysis-modal .ticker-list {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

#analysis-modal .ticker-list label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    user-select: none;
    border: 1px solid var(--aa-border);
    background: #12161d;
    color: var(--aa-text);
    border-radius: 999px;
    font-size: 12px;
}

#analysis-modal .ticker-list input[type="checkbox"] {
    accent-color: var(--aa-accent);
}

#analysis-modal .ticker-list label.active {
    border-color: var(--aa-accent);
    box-shadow: inset 0 0 0 1px var(--aa-accent);
}

/* Tabs */
#analysis-modal .aa-tabs {
    display: flex;
    gap: 8px;
    margin: 6px 16px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--aa-border);
}

#analysis-modal .aa-tab-btn {
    padding: 6px 10px;
    border: 1px solid transparent;
    border-radius: 10px 10px 0 0;
    background: transparent;
    color: var(--aa-dim);
    font-weight: 700;
    cursor: pointer;
}

#analysis-modal .aa-tab-btn:hover {
    color: #fff;
}

#analysis-modal .aa-tab-btn.active {
    color: #000;
    background: var(--aa-accent);
    border-color: var(--aa-accent);
}

/* Panels */
#analysis-modal .aa-panels {
    padding: 8px 16px 16px;
}

#analysis-modal .aa-panel {
    display: none;
}

#analysis-modal .aa-panel.active {
    display: block;
}

/* Chart card */
#analysis-modal .aa-chart-card {
    position: relative;
    height: clamp(300px, 40vh, 520px);
    background: #0f1217;
    border: 1px solid var(--aa-border);
    border-radius: 12px;
    padding: 8px;
}

/* Aggregates table */
#analysis-modal .table-scroll {
    overflow: auto;
    max-height: 60vh;
    border: 1px solid var(--aa-border);
    border-radius: 12px;
}

#analysis-modal .table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

#analysis-modal .table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #12151b;
    color: #fff;
    font-weight: 800;
    border-bottom: 2px solid var(--aa-accent);
}

#analysis-modal .table th,
#analysis-modal .table td {
    padding: .5rem .6rem;
    text-align: right;
    border-bottom: 1px solid var(--aa-border);
}

#analysis-modal .table td:first-child,
#analysis-modal .table th:first-child {
    text-align: left;
}

/* Peaks (tuplaselektorit varmuudeksi) */
#analysis-modal .peaks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
}

#analysis-modal .peaks-group {
    background: #0f1217;
    border: 1px solid var(--aa-border);
    border-radius: 10px;
    padding: 10px 12px;
}

#analysis-modal .peaks-group h5 {
    margin: 0 0 6px;
    color: #fff;
}

#analysis-modal .peaks-ul {
    margin: 0;
    padding-left: 18px;
}

#analysis-modal .muted {
    opacity: .8;
    font-size: .9em;
}

/* Hätä-override, jos jokin lisäosa vielä sotkee otsikon */
#analysis-modal .modal-header h3#analysis-title {
    font-size: 16px !important;
    visibility: visible !important;
}

@media (max-width:720px) {
    #analysis-modal .aa-panels {
        padding: 8px 12px 12px;
    }

    #analysis-modal .aa-tabs {
        margin: 6px 12px 0;
    }
}

/* Toast container */
#toast-stack {
    position: fixed;
    right: 16px;
    bottom: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 99999;
}

/* Oranssi/musta achievement- & quest -toast */
.toast-achievement {
    background: #0b0b0b;
    color: #ffa14a;
    /* oranssi fontti */
    border: 2px solid #ff7a00;
    border-radius: 10px;
    padding: 12px 14px;
    min-width: 320px;
    max-width: 480px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    animation: ta-slide-in .2s ease-out;
}

.toast-achievement .ta-title {
    font-weight: 700;
    margin-bottom: 6px;
    letter-spacing: .2px;
}

.toast-achievement .ta-line {
    opacity: .95;
    line-height: 1.35;
}

.toast-achievement.hide {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .25s ease, transform .25s ease;
}

@keyframes ta-slide-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}