:root {
    /* Light Mode */
    --primary-color: #ffeb3b;
    --background-color: #f5f5f5;
    --text-color: #333;
    --card-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

[data-theme="dark"] {
    /* Dark Mode */
    --primary-color: #ffd600;
    --background-color: #121212;
    --text-color: #e0e0e0;
    --card-shadow: 0 2px 5px rgba(255,255,255,0.1);
}

/* Neue Styles für Listen */
.ui-listview > li {
    border-radius: 8px;
    margin: 0px 0;
    box-shadow: var(--card-shadow);
    transition: transform 0.2s;
}

/*.ui-listview > li:active {
    transform: scale(0.98);
}
*/
/* Grundlegende Anpassungen */
body {
    background-color: var(--background-color);
    color: var(--text-color);
}

/* Neue Regel für Text in allen Unterseiten im dunklen Modus */
[data-theme="dark"] .ui-body-a:not([class*="red"]):not(.red):not(.wichtig):not(.warning),
[data-theme="dark"] .ui-page-theme-a .ui-body-inherit:not([class*="red"]):not(.red):not(.wichtig):not(.warning),
[data-theme="dark"] html .ui-bar-a .ui-body-inherit:not([class*="red"]):not(.red):not(.wichtig):not(.warning),
[data-theme="dark"] html .ui-body-a .ui-body-inherit:not([class*="red"]):not(.red):not(.wichtig):not(.warning),
[data-theme="dark"] .ui-page-theme-a .ui-body-inherit:not([class*="red"]):not(.red):not(.wichtig):not(.warning),
[data-theme="dark"] html .ui-panel-page-container-a:not([class*="red"]):not(.red):not(.wichtig):not(.warning),
[data-theme="dark"] .ui-page-theme-a:not([class*="red"]):not(.red):not(.wichtig):not(.warning),
[data-theme="dark"] .ui-page-theme-a .ui-panel-wrapper:not([class*="red"]):not(.red):not(.wichtig):not(.warning),
[data-theme="dark"] p:not([class*="red"]):not(.red):not(.wichtig):not(.warning),
[data-theme="dark"] h1:not([class*="red"]):not(.red):not(.wichtig):not(.warning),
[data-theme="dark"] h2:not([class*="red"]):not(.red):not(.wichtig):not(.warning),
[data-theme="dark"] h3:not([class*="red"]):not(.red):not(.wichtig):not(.warning),
[data-theme="dark"] h4:not([class*="red"]):not(.red):not(.wichtig):not(.warning),
[data-theme="dark"] h5:not([class*="red"]):not(.red):not(.wichtig):not(.warning),
[data-theme="dark"] h6:not([class*="red"]):not(.red):not(.wichtig):not(.warning),
[data-theme="dark"] li:not([class*="red"]):not(.red):not(.wichtig):not(.warning),
[data-theme="dark"] .ui-btn:not([class*="red"]):not(.red):not(.wichtig):not(.warning) {
    color: #e0e0e0 !important;
    text-shadow: none !important;
}

/* Links und interaktive Elemente */
[data-theme="dark"] .ui-page-theme-a a,
[data-theme="dark"] html .ui-bar-a a,
[data-theme="dark"] html .ui-body-a a,
[data-theme="dark"] .ui-btn,
[data-theme="dark"] .ui-link {
    color: #e0e0e0 !important;
    text-shadow: none !important;
}

/* Neue Regeln für Tabellen und JSON-Inhalte im Dark Mode */
[data-theme="dark"] table,
[data-theme="dark"] .ui-table,
[data-theme="dark"] .ui-table-reflow,
[data-theme="dark"] .ui-responsive,
[data-theme="dark"] .table-stripe,
[data-theme="dark"] .ui-table-cell-label,
[data-theme="dark"] td,
[data-theme="dark"] th {
    color: #e0e0e0 !important;
    text-shadow: none !important;
    background-color: transparent !important;
}

/* Spezifisch für die Tabellen-Streifen im Dark Mode */
[data-theme="dark"] .table-stripe tr:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

/* Tabellen-Ränder im Dark Mode */
[data-theme="dark"] .ui-table th,
[data-theme="dark"] .ui-table td {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Collapsible und JSON-Inhalte im Dark Mode */
[data-theme="dark"] .ui-collapsible-content,
[data-theme="dark"] .ui-collapsible-heading,
[data-theme="dark"] .ui-collapsible-heading-toggle,
[data-theme="dark"] .ui-collapsible .ui-btn,
[data-theme="dark"] .ui-collapsible .ui-btn-text {
    color: #e0e0e0 !important;
    text-shadow: none !important;
    background-color: #121212 !important;
}

/* Spezifischere Regeln für Tabellen in Collapsibles */
[data-theme="dark"] .ui-collapsible .ui-collapsible-content table.table-stripe tr:nth-child(even),
[data-theme="dark"] .ui-collapsible-content table.table-stripe tr:nth-child(even),
[data-theme="dark"] div[data-role="collapsible"] table.table-stripe tr:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

[data-theme="dark"] .ui-collapsible .ui-collapsible-content table.table-stripe tr:nth-child(odd),
[data-theme="dark"] .ui-collapsible-content table.table-stripe tr:nth-child(odd),
[data-theme="dark"] div[data-role="collapsible"] table.table-stripe tr:nth-child(odd) {
    background-color: transparent !important;
}

[data-theme="dark"] .ui-collapsible-content {
    background-color: #121212 !important;
}

/* Collapsible Header im Dark Mode */
[data-theme="dark"] .ui-collapsible-heading-toggle {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Filter-Eingabefeld im Dark Mode */
[data-theme="dark"] .ui-input-text input,
[data-theme="dark"] .ui-input-search input {
    color: #e0e0e0 !important;
    background-color: #121212 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Neue Styles für Slider im Dark Mode */
[data-theme="dark"] .ui-slider-track {
    background-color: #333 !important;
    border-color: #444 !important;
}

[data-theme="dark"] .ui-slider-track .ui-btn-active {
    background-color: #e0e0e0 !important;
    border-color: #e0e0e0 !important;
}

/* Labels im Dark Mode */
[data-theme="dark"] label,
[data-theme="dark"] .ui-slider-label {
    color: #e0e0e0 !important;
    text-shadow: none !important;
}

/* Slider Handle im Dark Mode */
[data-theme="dark"] .ui-slider-handle {
    background-color: #e0e0e0 !important;
    border-color: #e0e0e0 !important;
}

/* Input Felder im Dark Mode */
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="text"] {
    color: #e0e0e0 !important;
    background-color: #121212 !important;
    border-color: #444 !important;
}

/* Formular-Elemente im Dark Mode */
[data-theme="dark"] .ui-field-contain {
    border-color: #444 !important;
}