/* view-configs.css */
body {
    font-family: 'Roboto', sans-serif;
    background-color: #1e1e1e; /* Dunkler Hintergrund */
    color: #b0b0b0; /* Heller Grauton für den Text */
    margin: 0;
}

/* Header-Styling */
header {
    background-color: #1b5e20; /* Dunkler Grünton */
    color: #e0e0e0; /* Helles Grau für den Text */
    padding: 15px 0;
}

.header-content {
    text-align: center; /* Header-Inhalt zentrieren */
}

nav ul {
    list-style: none;
    padding: 0;
}

nav ul li {
    display: inline;
    margin-right: 20px; /* Abstand zwischen den Links */
}

nav ul li a {
    color: #e0e0e0; /* Helles Grau für Links */
    text-decoration: none;
}

nav ul li a:hover {
    color: #cfcfcf; /* Leicht aufgehellt bei Hover */
}

/* Container */
.container {
    padding: 20px;
    max-width: 1200px; /* Feste Breite für Container */
    margin: 20px auto; /* Zentriert den Container */
    background-color: #2a2a2a; /* Dunkler Hintergrund für den Container */
    border-radius: 8px; /* Abgerundete Ecken */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); /* Etwas kräftigerer Schatten */
}

/* Tabelle */
.configs-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

.configs-table thead {
    background-color: #2b2b2b; /* Dunkler Hintergrund für Tabellenkopf */
}

.configs-table th, 
.configs-table td {
    padding: 12px;
    border: 1px solid #444; /* Dunkler Rand für Zellen */
    text-align: left; /* Text linksbündig */
}

.configs-table th {
    color: #81c784; /* Dezentes Hellgrün für Header Text */
}

.configs-table td {
    color: #c0c0c0; /* Heller Grauton für Tabelleninhalt */
}

.configs-table tr:nth-child(even) {
    background-color: #2a2a2a; /* Alternierende Farben für Zeilen */
}

/* Footer */
footer {
    background-color: #1b5e20; /* Dunkler Grünton */
    padding: 20px; /* Innenabstand */
    text-align: center; /* Text zentrieren */
    color: #e0e0e0; /* Helles Grau für den Text */
    position: fixed; /* Footer fixiert am unteren Bildschirmrand */
    width: 100%; /* Vollbreite für Footer */
    bottom: 0; /* Position am unteren Bildschirmrand */
}

/* Dark Mode */
body.dark-mode {
    background-color: #121212; /* Sehr dunkles Grau für den Dark Mode */
    color: #c0c0c0; /* Helleres Grau für den Text */
}

body.dark-mode header {
    background-color: #0d3c16; /* Sehr dunkler Grünton */
}

body.dark-mode nav ul li a {
    color: #c0c0c0; /* Helleres Grau für Links im Dark Mode */
}

body.dark-mode .container {
    background-color: #1f1f1f; /* Sehr dunkles Grau für Container */
}

body.dark-mode .configs-table th {
    color: #a5d6a7; /* Hellerer Grünton für Kopfzeilen im Dark Mode */
}

body.dark-mode .configs-table td {
    color: #c0c0c0; /* Helleres Grau für Zellen im Dark Mode */
}