@layer components {

/* ── Topbar ── */
.tw-nav {
    z-index: 30000;
    height: 44px;
    background-color: var(--nav-bg);
    border-bottom: 1px solid var(--nav-border);
}
.tw-nav-inner {
    display: flex;
    align-items: center;
    height: 44px;
    min-width: 0;
    gap: 8px;
}
.tw-nav-brand  { flex-shrink: 0; font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--color-near-black); letter-spacing: var(--ls-wide); }
.tw-nav-right  { flex-shrink: 0; display: flex; align-items: center; gap: 0.5rem; }
.tw-nav-user-info { display: flex; align-items: flex-end; gap: 0.5rem; }
.tw-nav-version { font-size: var(--fs-xs); color: var(--color-dim); white-space: nowrap; }
.tw-nav-user    { font-size: var(--fs-xs); color: var(--dark-gray); text-decoration: none; white-space: nowrap; }
.tw-nav-user:hover { color: var(--color-near-black); text-decoration: underline; }

@media (max-width: 640px) {
    .tw-nav-user-info { flex-direction: column; align-items: flex-end; gap: 1px; }
    .tw-nav-version, .tw-nav-user { font-size: 0.5625rem; line-height: 1.3; }
}

/* ── Tab-Bar ── */
.tw-tab-bar {
    flex: 1 1 0;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    height: 44px;
    justify-content: flex-start;
    justify-content: safe center;
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}
.tw-tab-bar::-webkit-scrollbar          { height: 6px; }
.tw-tab-bar::-webkit-scrollbar-track    { background: var(--scrollbar-track); border-radius: 3px; }
.tw-tab-bar::-webkit-scrollbar-thumb    { background: var(--scrollbar-thumb); border-radius: 3px; }
.tw-tab-bar::-webkit-scrollbar-thumb:hover { background: var(--font-grey); }
.tw-tab-bar label {
    cursor: pointer;
    padding: 5px 16px;
    font-size: var(--fs-base);
    font-weight: var(--fw-medium);
    border-radius: 4px;
    border: 1px solid transparent;
    color: var(--color-mid);
    transition: background .12s, color .12s, border-color .12s;
}
.tw-tab-bar label:hover { background-color: var(--tab-hover-bg); color: var(--color-near-black); }

/* ── Tab-Container (CSS-only Tab-System) ── */
.tab-container > input { display: none; }
.tab-container .tw-nav__display > [class^="tab"] { display: none; }
.tab-container .tw-nav__display > [class^="tab"] { max-width: 90%; margin-left: auto; margin-right: auto; }

/* ── Display-Box ── */
.tw-nav__display { min-height: 0; max-height: none; overflow: visible; padding-top: 72px; background-color: var(--bg-color); }

/* ── Prognose-Header ── */
.prediction-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 4px 16px 4px;
}

/* ── Tab-Wrapper (ältere Navigation) ── */
.tw-nav__tab-wrapper { min-height: 128px; align-items: stretch; }
.tw-nav__tab-wrapper > label { align-self: center; color: var(--font-grey); transition: color 0.15s ease, background-color 0.15s ease; }
.tw-nav__tab-wrapper > label:hover { color: var(--font-base); }

/* ── Embed-Komponente ── */
.embed-user-row    { display: flex; gap: 8px; }
.embed-logout-label { position: relative; right: 0; top: -4px; }

/* ── User-Panel ── */
.tw-nav__user-panel { align-items: stretch; }
.tw-nav__user-panel .tw-nav__user-box { height: 100%; justify-content: flex-start; }
.tw-nav__user-panel .tw-nav__logout {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--surface-color);
    color: var(--font-base);
    box-shadow: var(--shadow-xs);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
}
.tw-nav__user-panel .tw-nav__logout:hover  { background: var(--dark-surface-color); border-color: var(--font-highlight); }
.tw-nav__user-panel .tw-nav__logout:active { transform: translateY(1px); }
.tw-nav__user-panel .tw-nav__logout svg    { width: 20px; height: 20px; }

} /* @layer components */