/* === Base ================================================================= */
:root {
  --footer-bg-static: hsl(44 31% 94%);
  --footer-text-static: hsl(41 65% 3%);
  --footer-border-static: hsl(44 7% 49%);
  --footer-link-hover-static: hsl(47 100% 13%);
}

html, body { height: 100%; }
body {
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji",
               "Segoe UI Emoji", "Segoe UI Symbol";
  background: var(--bg-surface);
  color: var(--text-main);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}

/* Links */
a { text-underline-offset: 2px; }

/* Skip link (A11y) */
.skip-link { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.skip-link:focus {
  position: static; width: auto; height: auto; padding: .5rem .75rem; background: var(--bg-card);
  border: 1px solid var(--border); border-radius: .5rem;
}

/* === Avatar =============================================================== */
.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 999px;
  background: var(--gradient); color: #fff; font-size: 18px;
}
.avatar img {
  width: 100%; height: 100%; border-radius: 999px; object-fit: cover;
}

/* === Headings / Sections ================================================== */
h1, h2, h3 { letter-spacing: -0.02em; }
.section { margin-block: 1.5rem; }
.section-header { display: flex; align-items: end; justify-content: space-between; margin-bottom: .75rem; }
.section-title { font-weight: 700; }

/* === Buttons (flach, hohe Kontraste) ===================================== */
.btn {
  border-radius: 0.5rem;
  padding: 0.5rem 0.6rem;
  font-weight: 600;
}

/* Füllfarbe ok, aber: border-color darf kein Gradient sein! */
.btn-primary {
  background: var(--bg-light);
  background-color: var(--bg-light);
  color: var(--text-main);
  border: var(--border-card);
  border-top: 1px solid var(--highlight);
  box-shadow: var(--shadow);

  /* Bootstrap-Variablen neu gesetzt → wirken intern überall */
  --bs-btn-bg: var(--bg-light);
  --bs-btn-color: var(--text-main);
  --bs-btn-border-color: var(--bg);

  --bs-btn-hover-bg: var(--bg);
  --bs-btn-hover-color: var(--text-main);
  --bs-btn-hover-border-color: var(--bg);

  /* klick/active = wie normal (oder wie hover, s.u.) */
  --bs-btn-active-bg: var(--bs-dark);
  --bs-btn-active-color: var(--bs-dark);
  --bs-btn-active-border-color: var(--bs-btn-border-color);
  --bs-btn-active-shadow: none;
}

.btn-secondary {
  /* Grundzustand */
  --bs-btn-bg: var(--secondary);
  --bs-btn-color: var(--bg-light);
  --bs-btn-border-color: var(--secondary);

  /* Hover-Zustand (dunkleres Secondary + gleiche Schriftfarbe) */
  --bs-btn-hover-bg: color-mix(in hsl, var(--secondary), black 15%);
  --bs-btn-hover-color: var(--bg-light);
  --bs-btn-hover-border-color: color-mix(in hsl, var(--secondary), black 15%);

  /* Active (optional) */
  --bs-btn-active-bg: color-mix(in hsl, var(--secondary), black 22%);
  --bs-btn-active-color: var(--bg-light);
  --bs-btn-active-border-color: var(--bs-btn-active-bg);

  background: var(--secondary);
  background-color: var(--secondary);
  color: var(--bg-light);
  border: 1px solid var(--secondary);
  border-top: 1px solid hsl(227 100% 36);
  box-shadow: var(--shadow);
}

.btn-success,
.btn-info{
  background: var(--bg-light);
  color: var(--text-main);
  border-color: var(--border);
}

/* Hover: background darf Gradient sein; border-color wieder Farbe */
.btn-primary:hover {
  background: var(--gradient-hover);
  background-color: var(--bg-light);
}

.btn-success:hover {
  background: linear-gradient(0deg, hsl(227 28% 30%), hsl(227 100% 39%));
}


.btn-info:hover,
.btn-secondary:hover {
  background: linear-gradient(0deg, color-mix(in hsl, var(--secondary), black 22%), var(--secondary));
  background-color: color-mix(in hsl, var(--secondary), black 15%);
}

/* Outline-Variante: ebenfalls reine Farben verwenden */
.btn-outline-secondary {
  color: var(--text-main);
  border-color: var(--border);
}
.btn-outline-secondary:hover {
  color: var(--text);                    /* ← Farbe, kein Gradient */
  border-color: var(--border);
}

/* === Kacheln (flat tiles, poster-like) ==================================== */
.home-tiles {
  display: grid; gap: 1rem;
  grid-template-columns: repeat( auto-fit, minmax(220px, 1fr) );
}
.tile {
  display: grid; grid-template-rows: auto auto 1fr; align-content: start;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 1.1rem 1.1rem;
  color: var(--text-main); text-decoration: none;
  transition: transform .08s ease, border-color .12s ease;
}
.tile:link,
.tile:visited,
.tile:hover,
.tile:focus { color: var(--text-main); text-decoration: none; }
.tile:hover { transform: translateY(-2px); border-color: var(--gradient); }
.tile:visited .tile-title,
.tile:visited .tile-desc { color: inherit; }
.tile-title { font-weight: 700; margin-bottom: .15rem; }
.tile-icon { font-size: 1.9rem; line-height: 1; margin-bottom: .25rem; opacity: .95; }
.tile-desc { color: var(--text-muted); font-size: .95rem; }

:root[data-theme="dark"] .tile,
:root[data-theme="dark"] .tile:link,
:root[data-theme="dark"] .tile:visited,
:root[data-theme="dark"] .tile:hover,
:root[data-theme="dark"] .tile:focus {
  color: #EAEAF0;
}
:root[data-theme="dark"] .tile-desc {
  color: #B8B8BF;
}

/* === Navigable Cards (click to open detail) =============================== */
.navigable-card {
  cursor: pointer;
  position: relative;
  transition: border-color .12s ease;
}
.navigable-card:hover,
.navigable-card:focus-visible {
  border-color: var(--gradient);
}
.card-subtitle,
.text-body-secondary {
  color: var(--text-muted) !important;
}

.link-body-emphasis,
.link-body-emphasis:link,
.link-body-emphasis:visited {
  color: var(--text-main) !important;
}

.link-body-emphasis:hover,
.link-body-emphasis:focus {
  color: var(--gradient) !important;
}

:root[data-theme="dark"] .link-body-emphasis,
:root[data-theme="dark"] .link-body-emphasis:link,
:root[data-theme="dark"] .link-body-emphasis:visited {
  color: #EAEAF0 !important;
}

:root[data-theme="dark"] .link-body-emphasis:hover,
:root[data-theme="dark"] .link-body-emphasis:focus {
  color: #88A1D1 !important;
}

.metrics-grid {
  display: grid;
  gap: 1rem;
  grid-template-rows: repeat(2, 1fr);
}

@media (min-width: 1200px) {
  .metrics-grid {
    height: 100%;
  }
}

.metrics-grid .card {
  height: 100%;
}

/* === Cards / Tables / Forms (flach, wenig Chrom) ========================= */
.card, .table-wrapper {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 1rem;
}

/* === Card Utilities ====================================================== */
.hover-shadow {
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}

.hover-shadow:hover {
  transform: translateY(-2px);
  border-color: var(--gradient);
  box-shadow: var(--shadow-md);
}

.table { --bs-table-bg: transparent; border-collapse: separate; border-spacing: 0; color: var(--text-main); }
.table thead th {
  font-weight: 700; background: transparent; border-bottom: 1px solid var(--border); color: var(--text-main);
}
.table th, .table td { vertical-align: middle; color: var(--text-main); }
.table tbody tr { border-bottom: 1px solid var(--border); }
.table tbody tr:last-child { border-bottom: 0; }
.table tbody tr:hover { background: rgba(0,0,0,.02); }
:root[data-theme="dark"] .table tbody tr:hover { background: rgba(255,255,255,.04); }

/* Improve contrast for striped tables in both themes */
.table-striped > tbody > tr:nth-of-type(odd) { background-color: rgba(0,0,0,.02); }
:root[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) { background-color: rgba(255,255,255,.04); }

/* === Theme-aware utilities =============================================== */
.list-group {
  --bs-list-group-bg: var(--bg-card);
  --bs-list-group-color: var(--text-main);
  --bs-list-group-border-color: var(--border);
}
:root[data-theme="dark"] .list-group {
  --bs-list-group-bg: var(--bg-light);
  --bs-list-group-border-color: var(--border-muted, var(--border));
}
.list-group-item {
  background-color: var(--bs-list-group-bg);
  color: var(--bs-list-group-color);
  border-color: var(--bs-list-group-border-color);
}
.list-group-flush > .list-group-item { border-width: 0 0 1px; }
.list-group-flush > .list-group-item:last-child { border-bottom-width: 0; }

.badge.text-bg-light {
  background-color: var(--bg-card) !important;
  color: var(--text-main) !important;
  border: 1px solid var(--border);
}
:root[data-theme="dark"] .badge.text-bg-light {
  background-color: var(--bg-light) !important;
  border-color: var(--border-muted, var(--border));
}

:root[data-theme="dark"] .bg-white,
:root[data-theme="dark"] .bg-light {
  background-color: var(--bg-light) !important;
  color: var(--text-main) !important;
}

/* Footer styling, aligned with navbar but compact */
.site-footer {
  background: var(--footer-bg-static);
  border-color: var(--footer-border-static);
  color: var(--footer-text-static);
  color-scheme: light;
  font-size: 0.95rem;
}
:root[data-theme="dark"] .site-footer {
  background: var(--footer-bg-static);
  border-color: var(--footer-border-static);
  color: var(--footer-text-static);
}
.site-footer .footer-brand {
  color: var(--footer-text-static);
}
:root[data-theme="dark"] .site-footer .footer-brand {
  color: var(--footer-text-static);
}
.site-footer .footer-links a {
  color: var(--footer-text-static) !important;
}
:root[data-theme="dark"] .site-footer .footer-links a {
  color: var(--footer-text-static) !important;
}
.site-footer .footer-links a:hover,
.site-footer .footer-links a:focus-visible {
  color: var(--footer-link-hover-static) !important;
}
.site-footer .link-body-emphasis,
.site-footer .link-body-emphasis:link,
.site-footer .link-body-emphasis:visited {
  color: var(--footer-text-static) !important;
}
:root[data-theme="dark"] .site-footer .link-body-emphasis,
:root[data-theme="dark"] .site-footer .link-body-emphasis:link,
:root[data-theme="dark"] .site-footer .link-body-emphasis:visited {
  color: var(--footer-text-static) !important;
}
.site-footer .link-body-emphasis:hover,
.site-footer .link-body-emphasis:focus-visible {
  color: var(--footer-link-hover-static) !important;
}
:root[data-theme="dark"] .site-footer .link-body-emphasis:hover,
:root[data-theme="dark"] .site-footer .link-body-emphasis:focus-visible {
  color: var(--footer-link-hover-static) !important;
}

/* === Canvas/Charts Container ============================================= */
canvas { background: var(--bg-card); border: 1px solid var(--border); border-radius: 1rem; }

.chart-container {
  position: relative;
}

.chart-container canvas {
  min-height: 320px;
  aspect-ratio: 16 / 9;
}

/* === Utilities ============================================================ */
.muted { color: var(--text-muted); }
.rounded-lg { border-radius: 1rem; }
.hidden { display: none !important; }