body {
    background-color: #f4f6f8;
    margin: 0;
    font-family: Arial, sans-serif;
}

.nav-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 14px rgba(0,0,0,0.10) !important;
}

._dash-loading {
    font-family: Arial;
}

/* ── Info-Tooltip ("ⓘ" mit Hover-Erklärung) ─────────────────────────────── */
/* Reines CSS, keine Callbacks: der Text wird bereits übersetzt übergeben
   (siehe utils/tooltips.py + components/tooltip.py), daher funktioniert der
   Hover sprachunabhängig und ohne Server-Roundtrip. */
.info-tip {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    margin-left: 6px;
    border-radius: 50%;
    background-color: #dfe6ee;
    color: #5b7897;
    font-size: 10.5px;
    font-weight: bold;
    font-style: normal;
    font-family: Georgia, "Times New Roman", serif;
    cursor: help;
    vertical-align: middle;
    user-select: none;
    line-height: 1;
}

.info-tip:hover,
.info-tip:focus {
    background-color: #4C72B0;
    color: #fff;
}

.info-tip .info-tip-bubble {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: 135%;
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background-color: #2b2f36;
    color: #fff;
    text-align: left;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: normal;
    font-style: normal;
    font-family: Arial, sans-serif;
    line-height: 1.4;
    white-space: normal;
    width: max-content;
    max-width: 240px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    z-index: 1000;
    transition: opacity 0.12s ease, transform 0.12s ease;
    pointer-events: none;
}

.info-tip .info-tip-bubble::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #2b2f36;
}

.info-tip:hover .info-tip-bubble,
.info-tip:focus .info-tip-bubble {
    visibility: visible;
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Rechtsbündige Bubble-Variante, damit sie bei Icons nahe am rechten
   Seitenrand (z.B. Ecke eines Charts) nicht abgeschnitten wird. */
.info-tip.info-tip-left .info-tip-bubble {
    left: auto;
    right: 0;
    transform: translateY(4px);
}
.info-tip.info-tip-left .info-tip-bubble::after {
    left: auto;
    right: 4px;
    transform: none;
}
.info-tip.info-tip-left:hover .info-tip-bubble,
.info-tip.info-tip-left:focus .info-tip-bubble {
    transform: translateY(0);
}

.static-languages { display:flex; gap:5px; font:13px Arial; }
.static-languages a { color:#666; padding:4px 9px; border-radius:5px; text-decoration:none; }
.static-languages a[aria-current] { color:white; background:#1f77b4; font-weight:bold; }
.static-plot { width:100%; }
select { padding:7px; border:1px solid #ccc; border-radius:4px; background:white; max-width:100%; width:100%; }
.static-table { margin-bottom:10px; }
.static-table-tools { display:flex; align-items:center; flex-wrap:wrap; gap:8px; font-size:11px; margin:6px 0; }
.static-table-tools input { padding:5px; flex:1; min-width:100px; }
.static-table-tools button { padding:4px 8px; }
.static-table-scroll { overflow:auto; max-height:500px; }
.static-table table { border-collapse:collapse; min-width:100%; background:white; }
.static-table th,.static-table td { border-bottom:1px solid #ddd; padding:5px 8px; text-align:left; }
.static-table thead { background:#f5f5f5; position:sticky; top:0; z-index:1; }
.static-table th button { font:inherit; font-weight:bold; border:0; background:none; cursor:pointer; padding:0; }
.static-table th[aria-sort="ascending"] button::after { content:" ↑"; }
.static-table th[aria-sort="descending"] button::after { content:" ↓"; }
.static-column-filters input { box-sizing:border-box; width:100%; min-width:55px; max-width:200px; font-size:11px; padding:3px; }
.static-table tbody tr:nth-child(even) { background:#fafafa; }
.static-table tbody tr.static-selected { background:#eaf4fb; }
.static-detail-link { border:0; background:none; color:#1f77b4; padding:0; font:inherit; cursor:pointer; text-decoration:underline; }
.static-snapshot { text-align:center; color:#666; font-size:11px; padding:20px; }
.static-error { padding:20px; color:#a00; }
button:disabled { opacity:.45; cursor:default; }