/* loot-color-manager.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;
}

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

nav ul li {
    display: inline;
    margin-right: 20px;
}

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

.container {
    padding: 20px;
    background-color: #2a2a2a; /* Dunkler Hintergrund für den Container */
    border-radius: 8px; /* Abgerundete Ecken */
}

/* Actions-Styling */
.actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

input[type="text"],
input[type="file"],
select {
    padding: 10px;
    margin-right: 10px;
    flex: 1;
    border: 1px solid #444; /* Dunkler Rand */
    border-radius: 4px; /* Abgerundete Ecken */
    background-color: #3a3a3a; /* Dunkler Hintergrund für Eingabefelder */
    color: #e0e0e0; /* Helles Grau für den Text */
}

button {
    padding: 10px 20px;
    background-color: #388e3c; /* Dunklerer Grünton für Buttons */
    color: #e0e0e0; /* Hellgrau für den Text */
    border: none;
    border-radius: 4px; /* Abgerundete Ecken */
    cursor: pointer;
}

button:hover {
    background-color: #2e7d32; /* Etwas dunklerer Grünton beim Hover */
}

/* Table-Styling */
.table-container {
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #444; /* Dunkler Rand für Zellen */
}

th {
    background-color: #2b2b2b; /* Dunkler Hintergrund für Kopfzeilen */
    color: #81c784; /* Heller Grünton für Kopfzeilentext */
}

.loot-color-manager-table tr:nth-child(even) {
    background-color: #2a2a2a; /* Alternierender Zeilenfarbe */
}

/* Fehlernachricht */
.error-message {
    color: #ff3e3e; /* Rote Farbe für Fehlermeldungen */
    margin-top: 20px;
}

/* Footer */
footer {
    text-align: center;
    padding: 20px 0;
    background-color: #1b5e20; /* Dunkler Grünton */
    color: #e0e0e0; /* Helles Grau für den Text */
}

/* 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 button {
    background-color: #2e7d32; /* Grüner Button im Dark Mode */
}

body.dark-mode button:hover {
    background-color: #255d27; /* Noch dunklerer Grünton beim Hover */
}