/* Globale Stile & Schriftart */

body {

    font-family: 'Orbitron', sans-serif;

    background-color: #0d1117; /* Dark charcoal blue */

    color: #e0e0e0; /* Off-white for readability */

    margin: 0;

    padding: 20px;

    background-image: url('https://www.transparenttextures.com/patterns/dark-matter.png');

}



/* Haupt-Container */

.game-container {

    max-width: 1200px;

    margin: auto;

    border: 1px solid #00ffff;

    padding: 20px;

    box-shadow: 0 0 20px rgba(0, 255, 255, 0.3);

    background: linear-gradient(145deg, rgba(13, 22, 33, 0.8), rgba(20, 30, 48, 0.8));

    backdrop-filter: blur(5px);

}



/* Hilfsklasse zum Ausblenden von Elementen */

.hidden {

    display: none !important;

}



/* Überschriften */

h1, h2, h3 {

    text-shadow: 0 0 7px #00ffff;

    letter-spacing: 2px;

    color: #ffffff;

}



/* Header-Leiste */

#header-bar {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding-bottom: 15px;

    margin-bottom: 15px;

    border-bottom: 1px solid rgba(0, 255, 255, 0.4);

}



/* Navigationsleiste */

.quick-nav ul {

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    list-style: none;

    padding: 0;

    margin: 0 0 25px 0;

    gap: 15px;

    border-bottom: 1px solid #00ffff;

    padding-bottom: 15px;

}



.quick-nav a {

    display: inline-block;

    padding: 8px 16px;

    border: 1px solid #00ffff;

    border-radius: 4px;

    color: #00ffff;

    text-decoration: none;

    transition: background-color 0.3s, color 0.3s;

}



.quick-nav a:hover {

    background-color: #00ffff;

    color: #0d1117;

}



.quick-nav a.active-nav {

    background-color: rgba(0, 255, 255, 0.2);

    box-shadow: 0 0 10px rgba(0, 255, 255, 0.3);

}



/* Buttons */

button {

    font-family: 'Orbitron', sans-serif;

    background: linear-gradient(rgba(0, 255, 255, 0.1), transparent);

    border: 1px solid #00ffff;

    color: #00ffff;

    padding: 10px 15px;

    cursor: pointer;

    transition: all 0.2s ease-in-out;

    margin-top: 5px;

    border-radius: 3px;

}



button:hover:not(:disabled) {

    background-color: #00ffff;

    color: #0d1117;

    box-shadow: 0 0 15px #00ffff;

}



button:disabled {

    border-color: #444;

    color: #666;

    background: transparent;

    cursor: not-allowed;

}



button.accent-btn {

    border-color: #ffab00;

    color: #ffab00;

}



button.accent-btn:hover:not(:disabled) {

    background-color: #ffab00;

    color: #0d1117;

}



/* Eingabefelder */

input, select {

    font-family: 'Orbitron', sans-serif;

    background-color: #000;

    border: 1px solid #00ffff;

    color: #e0e0e0;

    padding: 8px;

    border-radius: 3px;

}



/* Tab-Navigation für den Shop */

.tab-navigation {

    margin-bottom: 15px;

}

.tab-content {

    display: none;

}

.tab-content.active {

    display: block;

}

.tab-button.active {

    background-color: #00ffff;

    color: #0d1117;

}



/* Tabellen-Styling */

table {

    width: 100%;

    border-collapse: collapse;

    margin-top: 15px;

}

th, td {

    padding: 10px;

    border: 1px solid rgba(0, 255, 255, 0.4);

    text-align: left;

}

th {

    background-color: rgba(0, 255, 255, 0.1);

}



/* Container & Sektionen */

.container {

    display: flex;

    gap: 20px;

    margin-top: 20px;

}

.container > div {

    border: 1px solid rgba(0, 255, 255, 0.4);

    padding: 15px;

    flex: 1;

    background-color: rgba(0, 0, 0, 0.3);

    border-radius: 4px;

}



/* Fortschrittsbalken (Standard XP/Hangar-Leiste) */

.progress-bar-container {

    width: 100%;

    background-color: rgba(0, 0, 0, 0.5);

    border: 1px solid #00ffff;

    margin-top: 5px;

    overflow: hidden;

    height: 15px;

}



.progress-bar {

    height: 15px;

    background: linear-gradient(90deg, #00ffff, #00aaff);

    width: 0%;

    transition: width 0.5s ease-in-out;

}



/* Popup Notifications */

#popup-container {

    position: fixed; top: 20px; right: 20px; z-index: 9999; display: flex; flex-direction: column; gap: 10px;

}

.popup {

    padding: 15px 20px; border-radius: 5px; color: #000; min-width: 300px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); opacity: 0; animation: fadeIn 0.5s forwards;

}

.popup.fade-out { animation: fadeOut 0.5s forwards; }

.popup.success { background-color: #00ffff; }

.popup.error { background-color: #ff4100; color: #fff; }

@keyframes fadeIn { from { opacity: 0; transform: translateX(100%); } to { opacity: 1; transform: translateX(0); } }

@keyframes fadeOut { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(100%); } }



/* Overlay Tutorial Styling (Popups im Spiel) */

#tutorial-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.85); z-index: 1000; }

#tutorial-popup { background-color: #0d1117; border: 2px solid #ffab00; padding: 20px; width: 90%; max-width: 350px; text-align: center; box-shadow: 0 0 20px rgba(255, 171, 0, 0.5); color: #ffab00; position: absolute; z-index: 1002; top: 50%; left: 50%; transform: translate(-50%, -50%); }

.highlight-element { z-index: 1001; position: relative; border-radius: 5px; animation: glowing-border 1.5s infinite; }

.skip-btn { border: 1px solid #888; color: #888; font-size: 12px; padding: 5px 10px; margin-top: 15px; }

.skip-btn:hover { background: #888; color: #000; }

@keyframes glowing-border { 0% { outline: 3px solid rgba(255, 171, 0, 0.5); } 50% { outline: 3px solid rgba(255, 171, 0, 1); } 100% { outline: 3px solid rgba(255, 171, 0, 0.5); } }



/* --- Territorium & Kampf Styles (Ausschnitt) --- */

.score-bar.defender { background-color: #00aaff; }

.score-bar.attacker { background-color: #ff4444; }



/* Event Log */

#logContainer {

    margin-top: 30px;

    border-top: 1px solid #00ffff;

    padding-top: 20px;

}



#eventLog {

    background-color: rgba(0, 0, 0, 0.5);

    border: 1px solid rgba(0, 255, 255, 0.4);

    height: 200px;

    overflow-y: scroll;

    padding: 10px;

    list-style-type: none;

    border-radius: 4px;

    font-family: monospace;

    color: #ccc;

}



#eventLog li {

    padding: 5px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.1);

}





/* ========================================================= */

/* --- DYNAMISCHE SCHIFFS-BALKEN (FUEL & CONDITION) --- */

/* ========================================================= */



/* Haupt-Container des Treibstoff-Balkens (Z.B. für Fuel und Condition) */

.fuel-gauge-container {

    width: 100%; /* Passt sich der Flex-Box an */

    background-color: rgba(0, 0, 0, 0.5);

    border: 1px solid #ffab00; /* Akzentfarbe für Treibstoff */

    margin: 5px 0 5px 0;

    overflow: hidden;

    height: 20px;

    position: relative; /* Wichtig: Ermöglicht absolute Positionierung des Labels */

    border-radius: 2px;

}



/* Füllstandsbalken (Treibstoff) */

.fuel-bar-fill {

    height: 100%;

    background: linear-gradient(90deg, #ffab00, #ffc04d);

    width: 0%;

    transition: width 0.5s ease-in-out;

    position: absolute;

    top: 0;

    left: 0;

}



/* Füllstandsbalken (Zustand/Reparatur) */

.condition-bar-fill {

    height: 100%;

    background: linear-gradient(90deg, #00ff00, #00aa00);

    width: 100%;

    transition: width 0.5s ease-in-out;

    position: absolute;

    top: 0;

    left: 0;

}



/* Stil für niedrigen Füllstand (unter 20% oder 50% Zustand) */

.fuel-bar-fill.low, .condition-bar-fill.low {

    background: linear-gradient(90deg, #ff4444, #cc0000); /* Rot bei geringem Füllstand */

}



/* Stil für die Textwerte über den Balken (z.B. 2.5 / 3.0) */

.fuel-label, .condition-label {

    font-weight: bold;

    /* --- Helle, glowende Farbe passend zum HUD --- */

    color: #00ffff;

    text-shadow: 0 0 5px rgba(0, 255, 255, 0.7);

    /* --------------------------------------------- */

   

    position: absolute;

    width: 100%;

    text-align: center;

    line-height: 20px; /* Vertikal zentrieren */

    z-index: 10; /* Über dem Füllstand */

    font-size: 0.9em;

}



/* Add this to your style.css */

.job-running {

    color: #00ffff; /* Highlight running job status */

}

.job-complete {

    background-color: rgba(0, 255, 0, 0.1); /* Subtle green background for ready jobs */

    border-left: 3px solid #00ff00;

}

.collect-job-btn {

    /* Styles for your Abholen button here */

    background-color: #00ff00;

    color: black;

}



/* Anpassung der Farbe des Labels bei niedrigem Füllstand (optional) */

.fuel-bar-fill.low + .fuel-label {

    color: #ff4444;

    text-shadow: 0 0 5px #ff4444;

}



/* Event Ticker Styling */

#event-ticker-section {

    background: rgba(0, 20, 40, 0.8);

    border: 1px solid #00ffff;

    border-radius: 8px;

    padding: 15px;

    margin-bottom: 20px;

    box-shadow: 0 0 10px rgba(0, 255, 255, 0.1);

}



#event-list {

    list-style: none;

    padding: 0;

    margin: 0;

}



#event-list li {

    padding: 5px 0;

    border-bottom: 1px solid rgba(0, 255, 255, 0.1);

    color: #e0e0e0;

    font-size: 0.95em;

}



#event-list li:last-child {

    border-bottom: none;

}



/* Grid Layout Stabilisierung für Markt */

.container {

    display: flex;

    flex-wrap: wrap; /* Wichtig für Responsivität */

    gap: 20px;

}



#local-market-section {

    flex: 2;

    min-width: 300px; /* Verhindert, dass es zu schmal wird */

}



/* Reise-Terminal */

#travel-destinations {

    max-height: 500px; /* Begrenzt die Höhe */

    overflow-y: auto;  /* Scrollbar, wenn Liste zu lang */

}



/* Listen Style */

ul#org-member-list,

ul#join-request-list,

ul#org-hangar-list,

ul#org-list {

    list-style-type: none;

    padding: 0;

    margin: 0;

}



ul#join-request-list li {

    display: flex;

    justify-content: space-between;

    align-items: center;

}