/* Globální styly pro tělo a text */
body {
    background-color: #0d1a26; /* Tmavě azurová pro pozadí */
    color: #e0e0e0; /* Světle šedá pro text, pro lepší čitelnost na tmavém pozadí */
    font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    margin: 0;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
}

/* Původní styl pro api-link (odkaz) */
.api-link {
    display: inline-block;
    background-color: #2A3038; /* Tmavší pozadí pro API odkazy */
    color: #34c594; /* Světlejší fialová pro odkazy */
    padding: 8px 12px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 500;
    transition: background-color 0.2s, color 0.2s;
}
.api-link:hover {
    background-color: #3A4048;
    color: #34c594; /* Jasnější fialová na hover */
}

/* NOVÝ STYL PRO TLAČÍTKO - stav 'disabled' */
#refresh-graphs-btn:disabled {
    cursor: not-allowed;
    opacity: 0.6; /* Zesvětlí barvu, když je neaktivní (načítá) */
}

/* Kontejner pro celou stránku */
.container {
    width: 100%;
    max-width: 800px;
    margin: auto;
    text-align: center;
}

/* Nadpis stránky */
h1 {
    color: #00ced1; /* Azurová pro nadpis */
    font-size: 2.5em;
    margin-bottom: 5px;
}

/* Informace o čase aktualizace */
.last-updated {
    color: #8c9ba5; /* Tmavší šedá pro subtilnější text */
    font-size: 0.9em;
    margin-top: 0;
    margin-bottom: 40px;
}

/* Sekce statusu (např. 'All systems Operational') */
/* Sjednocený styl pro všechny hlavní boxy na stránce */
.status-section,
.service-container {
    background-color: #1a2a33; /* Tmavší pozadí pro boxy */
    border-radius: 12px;
    padding: 2px; /* Sjednotíme odsazení, aby byly boxy stejně velké */
    margin-bottom: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); /* Jemný stín */
}

/* Indikátor statusu (tečka) */
.status-indicator {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: inline-block;
    vertical-align: middle;
    margin-right: 15px;
}

/* Barva pro online stav */
.status-indicator.online {
    background-color: #4CAF50; /* Zelená */
}

/* Barva pro offline stav */
.status-indicator.offline {
    background-color: #F44336; /* Červená */
}

/* Text pro status (např. 'Online' nebo 'Offline') */
.status-text {
    font-size: 1.5em; /* Sníženo pro menší text */
    font-weight: bold;
    vertical-align: middle;
    color: #ffffff;
}

/* Kontejner pro jednotlivé služby */
.service-container {
    background-color: #1a2a33;
    border-radius: 12px;
    padding: 8px;
    margin-top: 30px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

/* Nadpis sekce 'Services' */
.service-container h2 {
    color: #ffffff;
    font-size: 1.5em;
    border-bottom: 1px solid #334a5c; /* Dělící linka */
    padding-bottom: 15px;
    margin-bottom: 20px;
    text-align: left;
}

.service-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid #2e4354;
}

.service-item:last-child {
    border-bottom: none; /* Odstraníme linku pod posledním prvkem */
}

/* Styl pro název služby */
.service-name {
    font-weight: 500;
    color: #a4b3be;
    flex-grow: 1; /* Název zabere co nejvíce místa */
    text-align: left;
}

/* Sekce s procenty a indikátorem */
.service-info {
    display: flex;
    align-items: center;
}

/* Indikátor procent */
.service-percent {
    font-weight: bold;
    color: #00ced1;
    margin-right: 15px;
}

/* Indikátor stavu služby (tečka) */
.service-status-indicator {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    margin-right: 10px;
}

/* Text statusu služby */
.service-status-text {
    font-weight: bold;
}

/* Barva pro status 'Operational' */
.service-status-indicator.operational {
    background-color: #4CAF50;
}
.service-status-text.operational {
    color: #4CAF50;
}

/* Barva pro status 'Degraded' */
.service-status-indicator.degraded {
    background-color: #FFC107;
}
.service-status-text.degraded {
    color: #FFC107;
}

/* Styly pro další informace (latence, uptime) */
.data-row {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 10px 0;
    border-bottom: 1px solid #2e4354;
    text-align: left;
    color: #a4b3be;
}

.data-row:last-of-type {
    border-bottom: none;
}

.data-row strong {
    color: #ffffff; /* Bílý text pro hodnoty */
}

/* Styly pro graf latence */
.latency-graph {
    width: 200px; /* Šířka grafu */
    height: 14px; /* Výška grafu */
    display: flex;
    align-items: flex-end; /* Sloupce se zarovnají ke spodnímu okraji */
    margin-right: 15px;
    border-radius: 4px;
    overflow: hidden;
    background-color: #2e4354; /* Tmavé pozadí grafu */
}

.latency-bar {
    width: 2px;
    min-height: 1px;
    margin: 0 1px;
    transition: background-color 0.3s ease;
    cursor: pointer; /* Pro případné budoucí interakce */
}

/* Barva pro online a offline stav v grafu */
.latency-bar.online {
    background-color: #4CAF50;
}

.latency-bar.offline {
    background-color: #F44336;
}

/* Styly pro sekci s grafy a její obsah */
.system-graphs {
    margin-top: 20px;
}

.range-selector {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
}

.range-btn {
    background-color: #1a2a3a;
    color: #00ced1;
    border: 1px solid #00ced1;
    border-radius: 5px;
    padding: 8px 15px;
    font-size: 0.9em;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}

.range-btn:hover {
    background-color: #00ced1;
    color: #0d1a26;
}

.range-btn.active {
    background-color: #00ced1;
    color: #0d1a26;
    border-color: #00ced1;
}

.graph-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px;
}

.graph-container {
    background-color: #1a2a3a;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    flex: 1 1 30%;
    max-width: calc(33.33% - 20px);
    box-sizing: border-box;
    height: 150px; /* Snížení výšky grafu */
}

.graph-container h3 {
    margin-top: 0;
    color: #e0e0e0;
    font-size: 1.2em;
    text-align: center;
}

@media (max-width: 768px) {
    .graph-container {
        flex: 1 1 100%;
        max-width: 100%;
        height: 200px; /* Větší výška pro mobily pro lepší čitelnost */
    }
}

/* Příklad stylů pro indikátor stavu, pokud už je nemáš */

/* Zelená pro status Online/Operational */
.service-status-indicator.operational {
    background-color: #4CAF50; /* Zelená */
}

/* Červená pro status Offline/Error */
.service-status-indicator.error {
    background-color: #F44336; /* Červená */
}

/* Žlutá/Oranžová pro načítání/neznámý stav */
.service-status-indicator.partial {
    background-color: #FFC107; /* Žlutá */
}

/* Základní styl, pokud není definovaný */
.service-status-indicator {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 5px;
}

/* Styly pro SA-MP Server Control */
.samp-control-buttons {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
}
.samp-control-buttons button {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s;
}
/* Původní styly Start/Restart/Toggle */
#samp-start, #btn-toggle-config, #btn-save-config { /* PŘIDAT #btn-save-config */
    background-color: #2A3038;
    color: #34c594;
    /* ... další základní styly ... */
}

/* Styly pro hover */
#samp-start:hover, #btn-toggle-config:hover, #btn-save-config:hover { /* PŘIDAT #btn-save-config:hover */
    background-color: #3A4048;
    color: #34c594;
}

/* Speciální styl pro disabled tlačítko (zajistí, že nebude bílé) */
#btn-save-config:disabled {
    background-color: #1A1A1A; /* Tmavší, méně nápadné */
    color: #555555; /* Šedá barva písma */
    cursor: not-allowed;
}
#samp-stop { 
    background-color: #2A3038; /* Červená */
    color: #34c594; 
}
#samp-stop:hover {
    background-color: #3A4048;
    color: #34c594; /* Jasnější fialová na hover */
}
#samp-restart {
    background-color: #2A3038; /* ZMĚŇTE TOTO */
    color: #34c594;
}
#samp-restart:hover {
    background-color: #3A4048;
    color: #34c594; /* Jasnější fialová na hover */
}
.samp-log-output { 
    margin-top: 10px; 
    padding: 10px; 
    background-color: #222; /* Tmavé pozadí pro log */
    color: #34c594;
    border-radius: 5px;
    font-family: monospace;
    white-space: pre-wrap; /* Zachová formátování */
    font-size: 0.85em;
    min-height: 20px;
}
/* Speciální úprava pro textarea, aby styly fungovaly i na ní */
textarea.samp-log-output {
    resize: vertical; /* Povolit jen vertikální změnu velikosti */
    width: 100%; /* Plná šířka kontejneru */
    box-sizing: border-box;
    /* Důležité: Přepsat jakékoliv výchozí styly prohlížeče */
    background-color: #1a1a1a;
    color: #34c594; 
    border: 1px solid #333;
}
.samp-status-info { 
    font-weight: bold; 
    transition: color 0.3s;
}
/* Definuje, co se stane, když uživatel najede myší na Logout/Login odkaz */
#discord-login-link:hover {
    /* PŘÍKLAD: Váš aktuální tmavý hover styl (jako u samp-stop) */
    background-color: #3A4048; /* O něco světlejší tmavá */
    color: #34c594; /* Ponecháme tyrkysovou/fialovou barvu textu, ale jasnější */
    cursor: pointer; /* Změní kurzor na ruku */
    text-decoration: none; /* Zajistí, že se nepodtrhne */
}
/* Definuje vzhled pro neaktivní/disabled odkazy/tlačítka */
.disabled-link {
    opacity: 0.5;
    pointer-events: none; /* Zakáže klikání myší */
    cursor: default;
}
/* --- IZOLACE STYLŮ: CÍLÍME POUZE NA BLOK #samp-control-wrapper --- */

/* --- ŘÁDKY DAT V SA-MP SEKCI --- */
#samp-control-wrapper .data-row {
    display: flex; 
    justify-content: space-between; 
    padding: 8px 0; 
    border-bottom: 1px dashed rgba(255, 255, 255, 0.1); 
    font-size: 1.05em; 
}
#samp-control-wrapper .data-row:last-of-type {
    border-bottom: none; /* Odstraní čáru pod posledním řádkem (CPU) */
}


/* Zvýraznění pro adresu serveru - azurová
#samp-control-wrapper #samp-address-text {
    color: #00bcd4; 
    text-shadow: 0 0 8px rgba(0, 188, 212, 0.7); 
    font-weight: bold;
}
*/

/* --- DIGITÁLNÍ ZOBRAZOVACÍ ŘÁDKY (Latence, CPU) --- */
/* Zde cílíme přesně na řádky s třídou metric-display-row */
#samp-control-wrapper .metric-display-row {
    padding: 10px 3px; 
    margin: 10px 0; 
    background-color: #1F252C; /* Tmavší pozadí pro 'displej' */
    border-radius: 5px;
    border-bottom: 1px solid #00bcd4 !important; /* Zajištění čáry, pokud by byla odstraněna */
}

/* --- DYNAMICKÉ HODNOTY (futuristic-value) --- */
#samp-control-wrapper .futuristic-value {
    font-family: 'Consolas', 'Monaco', monospace; /* Digitální font */  
    font-size: 1.1em; 
}