/* Mieterstrom-Übersicht — Custom Styles */

[data-theme="dark"] {
  --pico-primary: #e8b339;
  --pico-primary-background: #e8b339;
  --pico-primary-hover: #f0c44a;
  --pico-color: #e0e0e0;
  --pico-h1-color: #f5f5f5;
  --pico-h2-color: #e8b339;
}

body { min-height: 100vh; display: flex; flex-direction: column; }
header { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); border-bottom: 2px solid #e8b339; padding: 1.5rem 0 0.5rem; }
header h1 { font-size: 1.6rem; }
nav[aria-label="breadcrumb"] { margin-top: 1rem; }
nav[aria-label="breadcrumb"] ul { display: flex; gap: 0.5rem; list-style: none; padding: 0; }
nav button { background: none; border: none; padding: 0.5rem 1rem; color: #888; border-bottom: 2px solid transparent; cursor: pointer; }
nav button.active, nav button:hover { color: #e8b339; border-bottom-color: #e8b339; }
main.container { flex: 1; padding: 2rem 0; }

.tab-panel { display: none; }
.tab-panel.active { display: block; animation: fadeIn 0.3s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

.kpi-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin: 1.5rem 0; }
.kpi-card { background: linear-gradient(145deg, #1e1e3f 0%, #16213e 100%); border: 1px solid #2a2a4a; border-radius: 8px; padding: 1.2rem; text-align: center; }
.kpi-card h3 { font-size: 0.8rem; text-transform: uppercase; color: #888; margin: 0 0 0.5rem; }
.kpi-value { font-size: 1.8rem; font-weight: 700; color: #e8b339; margin: 0; }
.kpi-value span { font-size: 0.9rem; color: #888; }

#chart-container { background: #1a1a2e; border: 1px solid #2a2a4a; border-radius: 8px; padding: 1rem; }
canvas { max-height: 350px; }

#teilnehmer-table th { background: #16213e; color: #e8b339; }
#teilnehmer-table tbody tr:hover { background: #1e1e3f; }
.badge { padding: 0.2rem 0.5rem; border-radius: 4px; font-size: 0.8rem; }
.badge-aktiv { background: #1a3a1a; color: #5aff5a; }

#abrechnung-content table { font-size: 0.9rem; }
#abrechnung-content th { background: #16213e; color: #e8b339; }
#abrechnung-content tfoot { font-weight: bold; background: #1e1e3f; }
.info-box { background: #1a2a3a; border: 1px solid #2a4a6a; border-radius: 8px; padding: 1rem; }

.demo-banner { background: linear-gradient(90deg, #2a2a0a 0%, #3a3a10 100%); border-bottom: 1px solid #666620; padding: 0.5rem 0; }
.demo-banner article { background: transparent !important; color: #e8e8a0; font-size: 0.85rem; text-align: center; margin: 0; }
.demo-banner a { color: #e8b339; }

.loading-overlay { text-align: center; padding: 3rem; }
.error-banner { background: #3a1a1a; border: 1px solid #a03030; color: #ff9999; padding: 1rem; border-radius: 6px; }
footer { margin-top: auto; text-align: center; color: #555; }
footer a { color: #e8b339; }

@media (max-width: 768px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  header h1 { font-size: 1.2rem; }
}