/* Tag/Nacht Variablen */
:root {
    --bg-color: #ffffff;
    --text-color: #000000;
    --navbar-bg: #f8f9fa;
    --navbar-text: #000;
    --card-bg: #ffffff;
    --card-border: #dee2e6;
    --table-row-bg: #e4f7ed;
    --table-row-hover: #d1ecf1;
    --chart-bg: #ffffff;
    --badge-bg: #0d6efd;
    --badge-text: #ffffff;
}

body.dark-mode {
    --bg-color: #323232;
    --text-color: #f1f1f1;
    --navbar-bg: #1f1f1f;
    --navbar-text: #f1f1f1;
    --card-bg: #9e4e4e;
    --card-border: #3333FF;
    --table-row-bg: #1c1c1c;
    --table-row-hover: #2a2a2a;
    --chart-bg: #4c4c4c;
    --badge-bg: #198754;
    --badge-text: #fff;
}

/* Anwendung der Variablen */
body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-size: 0.9em;
    transition: background-color 0.3s, color 0.3s;
}

.navbar {
    background-color: var(--navbar-bg) !important;
}
.navbar .nav-link, .navbar-brand {
    color: var(--navbar-text) !important;
}

/* Karten */
.card {
    background-color: var(--card-bg);
    border-color: var(--card-border);
    transition: background-color 0.3s, border-color 0.3s;
}
.custom-card {
    background-color: var(--card-bg);
}

/* Tabellenzellen im Dark Mode */
body.dark-mode .table-striped > tbody > tr:nth-child(odd) > td,
body.dark-mode .table-striped > tbody > tr:nth-child(odd) > th {
    background-color: #1f1f1f !important;
    color: var(--text-color) !important;
}

body.dark-mode .table-striped > tbody > tr:nth-child(even) > td,
body.dark-mode .table-striped > tbody > tr:nth-child(even) > th {
    background-color: #2a2a2a !important;
    color: var(--text-color) !important;
}

body.dark-mode .table-striped > tbody > tr:hover > td {
    background-color: #333 !important;
    color: var(--text-color) !important;
}

body.dark-mode tr.nosort td {
    background: linear-gradient(90deg, #2c3e50, #2c3e50);
    color: var(--text-color);
    font-weight: bold;
}

/* Tabellenköpfe */
body.dark-mode thead th {
    background-color: #2c2c2c !important;
    color: var(--text-color) !important;
}

/* Badges */
.badge {
    background-color: var(--badge-bg);
    color: var(--badge-text);
}

/* Chart Container */
.chart-container {
    background-color: var(--chart-bg);
    box-shadow: 0 0 10px rgba(0,0,0,0.15);
    color: var(--text-color);
    height: 300px;
    width: 100%;
    border-radius: 10px;
}

.chart-container.tall {
    height: 500px;
}

#map {
	height: 500px;
    width: 100%;
    margin-top: 1rem;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
}


/* Link ohne Unterstreichung */
a.plain-link {
    color: inherit;
    text-decoration: none;
}

/* Trophäenfarben */
.trophy-gold { color: #ffd700; }
.trophy-silver { color: #c0c0c0; }
.trophy-bronze { color: #cd7f32; }

/* Sortierpfeile */
th.sortable-header {
    position: relative;
    user-select: none;
}
th.sortable-header::after {
    content: '';
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.8em;
    color: #999;
}
th.sortable-header.sorted-asc::after {
    content: '↑';
    color: var(--text-color);
}
th.sortable-header.sorted-desc::after {
    content: '↓';
    color: var(--text-color);
}

body.dark-mode table,
body.dark-mode th,
body.dark-mode td {
    border-color: #444 !important;
}

body.dark-mode .card {
    background-color: #1e1e1e;  /* dunkler Hintergrund */
    color: #f1f1f1;             /* heller Text */
    border-color: #444;         /* dezente Rahmenfarbe */
}

body.dark-mode .card a,
body.dark-mode .card a.plain-link {
    color: #90cdf4;             /* helle Linkfarbe */
}

body.dark-mode .card a:hover {
    color: #bee3f8;             /* Hover-Farbe für Links */
}

body.dark-mode .card .card-title {
    color: #ffffff;             /* Titel deutlich lesbar */
}

body.dark-mode .card strong {
    color: #f0f0f0;             /* starke Texte sichtbar */
}


.dropdown-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 2rem;
    background-color: white;
/*    background-image: url("data:image/svg+xml,%3Csvg fill='currentColor' height='16' viewBox='0 0 16 16' width='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.646 6.646a.5.5 0 0 1 .708 0L8 9.293l2.646-2.647a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E"); */
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1rem;
    cursor: pointer;
    border: 1px solid var(--bs-primary);
    color: var(--bs-primary);
    border-radius: 0.25rem;
    line-height: 1.5;
    text-align: left; 
}

.dropdown-select option {
    color: #000;
    background-color: #fff;
    text-align: left;
}

.dropdown-select:focus {
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

table tr {
    background-color: #007bff; /* oder deine Wunschfarbe */
    color: white;              /* Schriftfarbe */
    text-align: center;        /* optional: Text zentrieren */
}


/* Zwingende globale Override: sorgt dafür, dass alle Tabellenreihen wirklich kompakt sind.
   Diese Regel hat höhere Spezifität und verwendet !important, um Bootstrap-Defaults zu überschreiben. */
table.table > tbody > tr > td,
table.table > thead > tr > th {
    padding: 0.08rem 0.28rem !important;
    line-height: 1.5 !important;
    font-size: 0.8em !important;
}

/* Buttons in Tabellenzeilen kompakt darstellen (verringert vertikales Padding) */
table.table td .btn, table.table th .btn {
    padding: 0.10rem 0.28rem !important;
    line-height: 1.5 !important;
    font-size: 0.8em !important;
    height: auto !important;
}

/* Icon-Größe in Tabellenbuttons leicht reduzieren */
table.table td .btn i, table.table th .btn i {
    font-size: 0.8em !important;
    vertical-align: middle;
}