/* Celkové pozadí jako TermServer */
body { 
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; 
    background-color: #121212; 
    color: #e0e0e0; 
    display: flex; 
    flex-direction: column; /* Karty pod sebe */
    justify-content: center; 
    padding: 20px; 
    padding-bottom: 80px;
    margin: 0;
    box-sizing: border-box;
}


.topBlock {
      background-color: #333;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #fff;
      position: fixed;
      top: 0;
      left: 0;
      right: 0; /* Přidáno pro jistotu šířky */
      height: 50px;  
      z-index: 1000;
      box-shadow: 0 2px 8px rgba(0,0,0,0.5);
      border-bottom: 2px solid #444;
}
.leftGroup {
  	display: flex;
  	align-items: center;
  	gap: 20px; /* mezera mezi názvem a počtem filmů */
}
.pageTitle {
  	font-size: 20px;
  	font-weight: bold;
  	color: #FFD600;
	margin-left: 20px;
}
.listItem {
  	font-size: 14px;
  	color: #ccc;
  	line-height: 1.3em;
  	text-align: right; /* zarovná čísla pěkně vpravo */
	margin-right: 25px;
}








/* Karta nástroje - rozšířená pro boční mapu */
.card { 
    background: #1a1a1a; 
    padding: 1.5rem; /* Na mobilu trochu menší padding uvnitř */
    margin-top: 70px; /* Mezera od topBlocku */
    border-radius: 4px; 
    border: 1px solid #333;
    box-shadow: 0 8px 20px rgba(0,0,0,0.6); 
    width: 100%; /* Karta se roztáhne podle paddingu body */
    max-width: 2000px; /* Maximální šířka na monitoru */
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box; /* Zajistí, že padding karty ji neroztáhne ven */
}
/* Druhá a další karta už nepotřebují tak velký horní margin */
.card + .card {
    margin-top: 20px;
}


/* Nadpis v TermServer žluté */
h2 { 
    color: #ffcc00; 
    margin-top: 0; 
    border-bottom: 2px solid #ffcc00; 
    padding-bottom: 10px;
    font-weight: 600;
    text-transform: uppercase;
}

/* Hlavní rozvržení: Text vlevo, Mapa vpravo */
.main-layout {
    display: grid;
    grid-template-columns: 350px 1fr; /* Pevná šířka pro text, zbytek pro mapu */
    gap: 30px;
    margin-top: 20px;
}

/* Responzivita pro mobily - hodí vše pod sebe */
@media (max-width: 850px) {
    .main-layout {
        grid-template-columns: 1fr;
    }
}

h3 { 
    font-size: 0.85rem; 
    color: #777; 
    margin-top: 0; /* Upraveno pro sekce pod sebou */
    margin-bottom: 15px;
    text-transform: uppercase; 
    letter-spacing: 2px; 
}

.info-column section {
    margin-bottom: 30px; /* Mezera mezi Network Status a Digital Footprint */
}

.info { 
    margin-bottom: 12px; 
    border-bottom: 1px solid #252525; 
    padding-bottom: 6px; 
}

.label { 
    font-weight: bold; 
    color: #999; 
    font-size: 0.75rem; 
}

.value { 
    color: #ffcc00; 
    font-size: 1.05rem; 
    font-family: 'Consolas', 'Courier New', monospace; 
}

/* Bezpečnostní bar - žlutý */
.safety-bar-container { 
    background: #333; 
    border-radius: 0; 
    height: 6px; 
    width: 100%; 
    margin-top: 8px; 
}

.safety-bar { 
    height: 100%; 
    width: 0%; 
    background-color: #ffcc00; 
    transition: width 1.5s ease; 
}

/* Mapa - "Dark mode" barevná úprava */
#map { 
    height: 100%; 
    min-height: 400px; 
    border-radius: 4px; 
    border: 1px solid #333;
    filter: brightness(0.7) saturate(0.8) contrast(1.1);
}

#map:hover {
    filter: brightness(0.9) saturate(1);
}

#loader { 
    text-align: center; 
    padding: 50px; 
    color: #ffcc00; 
    font-family: monospace;
    font-size: 1.2rem;
}

.flag { 
    height: 12px; 
    margin-left: 10px; 
    filter: saturate(0.5) brightness(0.8);
}






#ip { 
    cursor: pointer; 
    transition: all 0.2s ease;
    display: inline-block;
}

#ip:hover { 
    color: #ffffff; 
    text-shadow: 0 0 8px #ffcc00;
}

/* Malé upozornění po zkopírování */
.copy-success {
    color: #4caf50 !important;
}



.ts-button {
    background: transparent;
    color: #ffcc00;
    border: 1px solid #ffcc00;
    padding: 10px 20px;
    font-family: 'Consolas', monospace;
    font-weight: bold;
    cursor: pointer;
    margin-top: 15px;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.ts-button:hover {
    background: #ffcc00;
    color: #121212;
    box-shadow: 0 0 15px rgba(255, 204, 0, 0.4);
}

.ts-button:disabled {
    border-color: #444;
    color: #444;
    cursor: not-allowed;
}







.bottomListItem {
  	background-color: #333;
  	text-align: center;
  	padding: 15px;
  	cursor: pointer;
  	position: fixed;
  	bottom: 0;
  	left: 0;
  	right: 0;
  	transition: 0.8s;
  	z-index: 1000; /* Ujistěte se, že tlačítko bude nad blokem s filmy */
}
.bottomListItem:hover {
  	background-color: #555;
}
.bottomListText {
  	color: #fff;
  	text-decoration: none;
  	transition: color 0.3s;
}
.bottomListItem:hover .bottomListText {
  	color: #fff;
}