/* ============================================================
   Design-System "Zeit & Projekt-Controlling"
   ============================================================ */
:root {
    --brand: #6366f1;
    --brand-600: #4f46e5;
    --brand-soft: #eef2ff;
    --ink: #0f172a;
    --ink-2: #334155;
    --muted: #64748b;
    --muted-2: #94a3b8;
    --line: #e2e8f0;
    --bg: #f1f5f9;
    --card: #ffffff;
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;
    --radius: 14px;
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, .05);
    --shadow-md: 0 4px 16px -2px rgba(15, 23, 42, .08);
    --sidebar-w: 15.5rem;
}

html { font-size: 15px; }

body {
    font-family: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
    background: var(--bg);
    color: var(--ink);
    letter-spacing: -0.011em;
}

/* ---------- App-Shell ---------- */
.app-shell { display: flex; min-height: 100vh; }

/* Die Leiste ist genau bildschirmhoch und bleibt beim Scrollen stehen. Drei
   Kinder teilen sich diese Höhe: Marke und Benutzerblock behalten ihre Größe,
   die Linkliste dazwischen nimmt den Rest und scrollt bei Bedarf selbst. */
.app-sidebar {
    width: var(--sidebar-w);
    flex-shrink: 0;
    background: #0f172a;
    color: #cbd5e1;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    z-index: 100;
}
.app-sidebar .brand {
    display: flex; align-items: center; gap: .65rem;
    padding: 1.15rem 1.25rem;
    color: #fff; font-weight: 700; font-size: 1rem;
    text-decoration: none; letter-spacing: -0.02em;
    flex-shrink: 0;
}

/* Scroll-Fläche der Linkliste.
   min-height: 0 ist hier kein Beiwerk, sondern der Kern: Ein Flex-Kind schrumpft
   von sich aus nie unter die Höhe seines Inhalts. Ohne die Zeile bliebe
   overflow-y wirkungslos, die Liste liefe wie bisher unten aus der Leiste heraus
   und legte sich mit z-index 100 über den Seiteninhalt.
   overscroll-behavior verhindert, dass das Scrollen am Listenende auf die
   dahinterliegende Seite überspringt. */
.app-sidebar .sidebar-nav {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, .3) transparent;
}
.app-sidebar .sidebar-nav::-webkit-scrollbar { width: 8px; }
.app-sidebar .sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.app-sidebar .sidebar-nav::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, .25);
    border-radius: 4px;
}
.app-sidebar .sidebar-nav::-webkit-scrollbar-thumb:hover { background: rgba(148, 163, 184, .45); }
.app-sidebar .brand .logo {
    width: 2.1rem; height: 2.1rem; border-radius: .65rem;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    display: grid; place-items: center; color: #fff; font-size: 1.05rem;
    box-shadow: 0 4px 12px rgba(99, 102, 241, .4);
}
.app-sidebar .nav-section {
    font-size: .68rem; text-transform: uppercase; letter-spacing: .09em;
    color: #64748b; padding: 1.1rem 1.25rem .35rem;
}
.app-sidebar .nav-link {
    display: flex; align-items: center; gap: .7rem;
    color: #94a3b8; padding: .55rem 1rem; margin: .1rem .6rem;
    border-radius: .6rem; font-weight: 500; font-size: .92rem;
    transition: background .15s, color .15s;
}
.app-sidebar .nav-link i { font-size: 1.05rem; width: 1.3rem; text-align: center; }
.app-sidebar .nav-link:hover { color: #e2e8f0; background: rgba(148, 163, 184, .1); }
.app-sidebar .nav-link.active {
    color: #fff; background: linear-gradient(135deg, rgba(99,102,241,.35), rgba(139,92,246,.25));
    box-shadow: inset 0 0 0 1px rgba(129, 140, 248, .35);
}
.nav-badge {
    margin-left: auto; background: #f43f5e; color: #fff;
    font-size: .66rem; font-weight: 700; line-height: 1;
    padding: .22rem .45rem; border-radius: 2rem; min-width: 1.25rem; text-align: center;
}
/* margin-top: auto bleibt als Rückfallebene stehen — falls eine Ansicht die
   Linkliste einmal ohne .sidebar-nav ausgibt, sitzt der Benutzerblock trotzdem
   unten statt direkt unter dem letzten Link. */
.app-sidebar .sidebar-footer {
    margin-top: auto; padding: 1rem 1.25rem; border-top: 1px solid rgba(148,163,184,.15);
    flex-shrink: 0;
}
.app-sidebar .user-chip { display: flex; align-items: center; gap: .65rem; }
.app-sidebar .avatar {
    width: 2.2rem; height: 2.2rem; border-radius: 50%;
    background: linear-gradient(135deg, #334155, #475569);
    display: grid; place-items: center; color: #e2e8f0; font-weight: 600; font-size: .85rem;
}
.app-sidebar .user-chip .name { color: #f1f5f9; font-size: .87rem; font-weight: 600; line-height: 1.2; }
.app-sidebar .user-chip .role { color: #64748b; font-size: .72rem; }

.app-main { flex: 1 1 auto; min-width: 0; padding: 1.6rem 2rem 4rem; }

@media (max-width: 992px) {
    .app-shell { display: block; }
    .app-sidebar { position: static; height: auto; width: 100%; flex-direction: row; align-items: center; flex-wrap: wrap; }
    /* Auf schmalen Geräten wird die Leiste waagerecht und ist nicht mehr an die
       Bildschirmhöhe gebunden — eine eigene Scroll-Fläche wäre hier falsch.
       display: contents löst den Kasten auf, die Links ordnen sich wieder direkt
       in die Leiste ein. Damit bleibt das Verhalten schmaler Geräte exakt so,
       wie es vor der Scroll-Fläche war. */
    .app-sidebar .sidebar-nav { display: contents; }
    .app-sidebar .sidebar-footer { margin: 0; border: 0; margin-left: auto; }
    .app-main { padding: 1rem; }
}

/* ---------- Karten & Tabellen ---------- */
.card {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}
.card-header { border-bottom-color: var(--line) !important; border-radius: var(--radius) var(--radius) 0 0 !important; }

.table { --bs-table-hover-bg: #f8fafc; }
.table thead th {
    font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
    color: var(--muted); font-weight: 600; border-bottom-width: 1px;
    background: #f8fafc !important;
}
.num { text-align: right; font-variant-numeric: tabular-nums; }

.kpi-card .value { font-size: 1.45rem; font-weight: 700; letter-spacing: -0.02em; }
.kpi-card .label { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }

/* ---------- Zeiterfassung gemeinsam ---------- */
.time-header { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; margin-bottom: 1.25rem; }
.time-header h1 { font-size: 1.25rem; font-weight: 700; margin: 0; letter-spacing: -0.02em; }
.time-header .subtitle { color: var(--muted); font-size: .86rem; }

.view-switch {
    display: inline-flex; background: #e2e8f0; border-radius: .7rem; padding: .22rem; gap: .15rem;
}
.view-switch a {
    padding: .4rem .95rem; border-radius: .55rem; font-size: .87rem; font-weight: 600;
    color: var(--muted); text-decoration: none; transition: all .15s;
}
.view-switch a:hover { color: var(--ink); }
.view-switch a.active { background: #fff; color: var(--ink); box-shadow: var(--shadow-sm); }

.date-nav { display: inline-flex; align-items: center; gap: .3rem; }
.date-nav .btn-nav {
    width: 2.1rem; height: 2.1rem; display: grid; place-items: center;
    border: 1px solid var(--line); background: #fff; border-radius: .6rem;
    color: var(--ink-2); transition: all .15s; text-decoration: none;
}
.date-nav .btn-nav:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
.date-nav .btn-today {
    padding: .42rem .9rem; font-size: .85rem; font-weight: 600;
    border: 1px solid var(--line); background: #fff; border-radius: .6rem;
    color: var(--ink-2); text-decoration: none; transition: all .15s;
}
.date-nav .btn-today:hover { border-color: var(--brand); color: var(--brand); }
.date-nav .period-label {
    font-weight: 800; font-size: 1.02rem; letter-spacing: -.02em; color: var(--ink);
    min-width: 8.5rem; text-align: center; padding: 0 .3rem; white-space: nowrap;
}

/* Aufklappbare Tabellenzeilen (z. B. Tätigkeiten → Projektverteilung) */
.activity-row { cursor: pointer; }
.activity-row:hover { background: #f8fafc; }
.activity-row .toggle-icon { font-size: .72rem; transition: transform .12s; }

/* Kompaktes Säulendiagramm (Verlauf) */
.colchart {
    display: flex; align-items: stretch; gap: 3px;
    height: 9rem; padding-top: .9rem;
}
.colchart-col {
    flex: 1 1 0; min-width: 0; display: flex; flex-direction: column;
    text-decoration: none; position: relative;
}
.colchart-stack {
    flex: 1; display: flex; flex-direction: column; justify-content: flex-end;
    border-radius: .3rem .3rem 0 0; overflow: hidden; background: #f1f5f9;
}
.colchart-col.is-muted .colchart-stack { background: #f8fafc; }
.colchart-stack .seg { display: block; width: 100%; }
.colchart-stack .seg-b { background: var(--brand); border-radius: 0; }
.colchart-stack .seg-nb { background: var(--muted-2); }
.colchart-col:hover .colchart-stack { outline: 2px solid var(--brand); outline-offset: 1px; }
.colchart-label {
    text-align: center; font-size: .58rem; color: var(--muted);
    padding-top: .25rem; white-space: nowrap; overflow: hidden;
}
.colchart-col.is-muted .colchart-label { color: var(--muted-2); }
.colchart-val {
    position: absolute; top: -.85rem; left: 0; right: 0; text-align: center;
    font-size: .62rem; font-weight: 600; color: var(--ink-2);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}

.project-dot { width: .6rem; height: .6rem; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.project-pill {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .22rem .6rem; background: #f8fafc; border: 1px solid var(--line);
    border-radius: 2rem; font-size: .8rem; font-weight: 600; color: var(--ink-2);
}

/* Fortschrittsring (Tagesansicht) */
.progress-ring { position: relative; width: 74px; height: 74px; }
.progress-ring svg { transform: rotate(-90deg); }
.progress-ring .ring-bg { stroke: var(--line); }
.progress-ring .ring-val { stroke: var(--brand); stroke-linecap: round; transition: stroke-dashoffset .5s ease; }
.progress-ring .ring-label {
    position: absolute; inset: 0; display: grid; place-items: center;
    font-weight: 700; font-size: .95rem; letter-spacing: -0.02em;
}

/* Buchungszeilen Tagesansicht */
.entry-row {
    display: flex; align-items: center; gap: 1rem;
    padding: .8rem 1.1rem; border-bottom: 1px solid var(--line);
    transition: background .12s;
}
.entry-row:last-child { border-bottom: 0; }
.entry-row:hover { background: #f8fafc; }
.entry-row .entry-main { flex: 1 1 auto; min-width: 0; }
.entry-row .entry-activity { font-weight: 600; font-size: .93rem; }
.entry-row .entry-note { color: var(--muted); font-size: .82rem; margin-top: .1rem; }
.entry-row .entry-hours {
    font-variant-numeric: tabular-nums; font-weight: 700; font-size: 1.02rem; white-space: nowrap;
}
/* Aktionen immer sichtbar (Auffindbarkeit, Touch), dezent abgeblendet bis Hover/Fokus */
.entry-row .entry-actions { opacity: .45; transition: opacity .15s; display: flex; gap: .25rem; }
.entry-row:hover .entry-actions,
.entry-row:focus-within .entry-actions { opacity: 1; }
@media (hover: none) {
    .entry-row .entry-actions { opacity: 1; }
}

.quickadd-bar {
    display: grid;
    grid-template-columns: 1.4fr 1.4fr 1.6fr .6fr auto;
    gap: .6rem; align-items: center;
}
@media (max-width: 992px) { .quickadd-bar { grid-template-columns: 1fr 1fr; } }

/* Wochen-Grid */
.week-grid input.cell {
    width: 4.3rem; text-align: right; font-variant-numeric: tabular-nums;
    border: 1px solid transparent; background: #f8fafc; border-radius: .5rem;
    padding: .38rem .5rem; font-size: .9rem; transition: all .15s;
}
.week-grid input.cell:hover { border-color: var(--line); background: #fff; }
.week-grid input.cell:focus { border-color: var(--brand); background: #fff; outline: 0; box-shadow: 0 0 0 3px rgba(99,102,241,.15); }
.week-grid input.cell.has-value { background: var(--brand-soft); font-weight: 600; color: var(--brand-600); }
.week-grid input.cell.has-value:focus { background: #fff; }
.week-grid th.weekend, .week-grid td.weekend { background: #f8fafc; }
.week-grid th.today-col { color: var(--brand-600) !important; }
.week-grid .today-badge {
    background: var(--brand); color: #fff; border-radius: .4rem;
    font-size: .66rem; padding: .1rem .4rem; font-weight: 700;
}
.savebar {
    position: sticky; bottom: 0; z-index: 50;
    background: rgba(255,255,255,.92); backdrop-filter: blur(8px);
    border-top: 1px solid var(--line);
    padding: .8rem 1.1rem; display: flex; justify-content: space-between; align-items: center;
    border-radius: 0 0 var(--radius) var(--radius);
}

/* Monatskalender */
.month-grid { display: grid; grid-template-columns: repeat(7, 1fr) 5.2rem; gap: .45rem; }
.month-grid .dow {
    font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
    color: var(--muted); text-align: center; padding: .2rem 0;
}
.month-cell {
    background: var(--card); border: 1px solid var(--line); border-radius: .8rem;
    min-height: 5.4rem; padding: .5rem .6rem; position: relative;
    text-decoration: none; color: inherit; display: block;
    transition: all .15s;
}
.month-cell:hover { border-color: var(--brand); box-shadow: var(--shadow-md); transform: translateY(-1px); color: inherit; }
.month-cell.is-empty { background: transparent; border-color: transparent; pointer-events: none; }
.month-cell.is-weekend { background: #f8fafc; }
.month-cell.is-today { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(99,102,241,.12); }
.month-cell .day-num { font-size: .78rem; font-weight: 600; color: var(--muted); }
.month-cell.is-today .day-num {
    background: var(--brand); color: #fff; border-radius: .45rem; padding: .05rem .4rem;
    display: inline-block;
}
.month-cell .day-hours { font-size: 1.05rem; font-weight: 700; margin-top: .35rem; letter-spacing: -0.02em; }
.month-cell .day-bar { position: absolute; left: .6rem; right: .6rem; bottom: .5rem; height: .28rem; border-radius: 1rem; background: var(--line); overflow: hidden; }
.month-cell .day-bar > span { display: block; height: 100%; border-radius: 1rem; background: linear-gradient(90deg, var(--brand), #8b5cf6); }
.month-cell .day-bar > span.over { background: linear-gradient(90deg, var(--warning), var(--danger)); }
.week-sum {
    display: grid; place-items: center; background: transparent;
    border: 1px dashed var(--line); border-radius: .8rem;
    font-weight: 700; color: var(--ink-2); font-size: .92rem;
}
.week-sum small { font-weight: 500; color: var(--muted-2); font-size: .68rem; }

/* Buttons */
.btn-primary {
    --bs-btn-bg: var(--brand); --bs-btn-border-color: var(--brand);
    --bs-btn-hover-bg: var(--brand-600); --bs-btn-hover-border-color: var(--brand-600);
    --bs-btn-active-bg: var(--brand-600); --bs-btn-active-border-color: var(--brand-600);
    font-weight: 600; border-radius: .6rem;
}
.btn { border-radius: .6rem; }
.form-select, .form-control { border-radius: .6rem; border-color: var(--line); }
.form-select:focus, .form-control:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(99,102,241,.15); }

/* Feinschliff */
.page-title { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; }
.text-secondary { color: var(--muted) !important; }
.alert { border-radius: var(--radius); }

/* ============================================================
   UI-Polish v2 — ruhig, präzise, professionell
   ============================================================ */

/* Seitenkopf (einheitlich für alle Seiten) */
.page-head { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem; margin-bottom: 1.5rem; }
.page-head .titles { margin-right: auto; }
.page-head h1 { font-size: 1.35rem; font-weight: 800; letter-spacing: -.025em; margin: 0; color: var(--ink); }
.page-head .sub { color: var(--muted); font-size: .87rem; margin-top: .2rem; max-width: 52rem; }

/* Karten & Tabellen verfeinert */
.card { border-color: rgba(226, 232, 240, .85); }
.card-header {
    background: #fff; font-weight: 600; font-size: .92rem;
    padding: .85rem 1.1rem; color: var(--ink);
}
.table { --bs-table-color: var(--ink-2); }
.table > :not(caption) > * > * { padding: .66rem .8rem; }
.table thead th { padding-top: .5rem; padding-bottom: .5rem; }
.table tbody tr:last-child td { border-bottom: 0; }
.table .fw-medium, .table strong { color: var(--ink); }
.table tfoot th { border-top: 2px solid var(--line); }

/* Weiche Status-Badges statt satter Bootstrap-Flächen */
.badge-soft {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .3rem .6rem; border-radius: 2rem;
    font-size: .74rem; font-weight: 600; line-height: 1;
}
.badge-soft::before { content: ''; width: .45rem; height: .45rem; border-radius: 50%; background: currentColor; opacity: .8; }
.badge-soft.is-success { background: #ecfdf5; color: #047857; }
.badge-soft.is-warning { background: #fffbeb; color: #b45309; }
.badge-soft.is-danger  { background: #fef2f2; color: #b91c1c; }
.badge-soft.is-info    { background: #eff6ff; color: #1d4ed8; }
.badge-soft.is-neutral { background: #f1f5f9; color: var(--muted); }
.badge-soft.is-brand   { background: var(--brand-soft); color: var(--brand-600); }
.badge-soft.no-dot::before { display: none; }

/* Icon-Buttons für Tabellen-Aktionen */
.btn-icon {
    width: 2rem; height: 2rem; display: inline-grid; place-items: center;
    padding: 0; border: 0; background: transparent; border-radius: .55rem;
    color: var(--muted); font-size: .92rem; transition: all .13s;
}
.btn-icon:hover { background: #eef2f7; color: var(--ink); }
.btn-icon.is-danger:hover { background: #fef2f2; color: var(--danger); }
.btn-icon.is-brand:hover { background: var(--brand-soft); color: var(--brand-600); }
.table .btn-icon { opacity: .55; }
.table tr:hover .btn-icon, .table .btn-icon:focus-visible { opacity: 1; }

/* KPI-Karten mit Icon-Kachel */
.kpi-card .card-body { display: flex; align-items: center; gap: .95rem; padding: 1rem 1.1rem; }
.kpi-icon {
    width: 2.7rem; height: 2.7rem; flex-shrink: 0; border-radius: .85rem;
    display: grid; place-items: center; font-size: 1.15rem;
}
.kpi-icon.is-indigo { background: var(--brand-soft); color: var(--brand-600); }
.kpi-icon.is-green  { background: #ecfdf5; color: #059669; }
.kpi-icon.is-amber  { background: #fffbeb; color: #d97706; }
.kpi-icon.is-rose   { background: #fff1f2; color: #e11d48; }
.kpi-icon.is-sky    { background: #f0f9ff; color: #0284c7; }
.kpi-icon.is-slate  { background: #f1f5f9; color: var(--ink-2); }
.kpi-card .value { line-height: 1.15; }
.kpi-card .label { margin-bottom: .1rem; }

/* Leerzustände */
.empty-state {
    text-align: center; color: var(--muted); padding: 2.4rem 1rem;
}
.empty-state i { font-size: 1.7rem; display: block; margin-bottom: .5rem; color: var(--muted-2); }

/* Initialen-Avatar für Listen (eigenständig, nicht an die Sidebar gebunden) */
.avatar-sm {
    width: 2.1rem; height: 2.1rem; flex-shrink: 0;
    border-radius: 50%;
    display: inline-grid; place-items: center;
    background: linear-gradient(135deg, #e0e7ff, #ede9fe);
    color: var(--brand-600);
    font-size: .7rem; font-weight: 700; letter-spacing: .03em;
    text-transform: uppercase;
}

/* Formulare */
.form-card { max-width: 46rem; }
.form-label { font-size: .8rem; font-weight: 600; color: var(--ink-2); margin-bottom: .3rem; }
.form-text { font-size: .76rem; }

/* Controlling-Tabellen: Gesamt-Spalte betonen, Kennzahl-Spalte klebt beim Scrollen */
.table-controlling td:last-child, .table-controlling th:last-child { background: #f8fafc; }
.table-controlling .sticky-col {
    position: sticky; left: 0; z-index: 2; background: #fff;
    font-weight: 500; box-shadow: 1px 0 0 var(--line);
}
.table-controlling thead th.sticky-col { z-index: 3; }

/* Fortschrittsbalken schlanker */
.progress { border-radius: 2rem; background: #eef2f7; }
.progress-bar { border-radius: 2rem; font-size: .68rem; font-weight: 700; }

/* Login */
.login-shell {
    min-height: 100vh; display: flex; align-items: stretch;
}
.login-brand {
    flex: 1.1; background: linear-gradient(150deg, #0f172a 0%, #1e1b4b 55%, #312e81 100%);
    color: #e2e8f0; display: flex; flex-direction: column; justify-content: center;
    padding: 4rem; position: relative; overflow: hidden;
}
.login-brand::after {
    content: ''; position: absolute; right: -8rem; top: -8rem; width: 26rem; height: 26rem;
    background: radial-gradient(circle, rgba(99, 102, 241, .35), transparent 65%);
}
.login-brand .logo {
    width: 3rem; height: 3rem; border-radius: .9rem;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    display: grid; place-items: center; color: #fff; font-size: 1.4rem;
    box-shadow: 0 8px 24px rgba(99, 102, 241, .45); margin-bottom: 1.6rem;
}
.login-brand h1 { font-size: 1.9rem; font-weight: 800; letter-spacing: -.03em; color: #fff; max-width: 24rem; }
.login-brand p { color: #94a3b8; max-width: 26rem; }
.login-brand ul { list-style: none; padding: 0; margin: 1.8rem 0 0; display: grid; gap: .8rem; }
.login-brand li { display: flex; gap: .7rem; align-items: center; color: #cbd5e1; font-size: .95rem; }
.login-brand li i { color: #818cf8; }
.login-form-side {
    flex: 1; display: flex; align-items: center; justify-content: center;
    background: var(--bg); padding: 2rem;
}
.login-card { width: min(23rem, 100%); }
@media (max-width: 900px) { .login-brand { display: none; } }

/* ============================================================
   Vollbild-Seiten (body.app-fixed)
   Der Inhalt bringt seine eigene Scroll-Fläche mit und misst sich
   per JS auf den freien Bildschirmrest (siehe fitHeight() in
   calendar-week.js). Absichtlich KEIN overflow:hidden auf body und
   keine Media-Query-Schwelle: Wie viel Platz übrig bleibt, hängt an
   Kopfzeile, Hinweisbannern und Umbrüchen — das weiß nur der Browser.
   Bleibt zu wenig übrig, greift die Mindesthöhe und die Seite scrollt
   wieder ganz normal, statt den Rest unerreichbar abzuschneiden.
   ============================================================ */
body.app-fixed .app-main { padding-bottom: 1.1rem; }
/* Für die Seitenleiste braucht es hier nichts mehr: Sie bringt ihre Scroll-Fläche
   seit jeher auf allen Seiten mit (.sidebar-nav weiter oben), nicht nur auf den
   Vollbild-Seiten. Die frühere Sonderregel griff genau dort nicht, wo das Menü
   am längsten ist — auf den normalen Seiten. */

/* ============================================================
   Verschleierte Beträge (Sätze, Gehaltsrange)
   Zweck: Die Oberfläche lässt sich zeigen, ohne dass jemand im
   Raum sofort sieht, wer in welcher Range liegt. Bewusst KEIN
   Zugriffsschutz — die Werte stehen weiter im Quelltext; wer sie
   nicht sehen darf, braucht eine Rolle ohne Geldsicht.
   ============================================================ */
.masked {
    filter: blur(5px);
    user-select: none;
    transition: filter .15s;
    cursor: default;
}
.masked::selection { background: transparent; }
tr:hover .masked { filter: blur(4.5px); }   /* nicht versehentlich beim Überfahren lesbar */
.is-revealed .masked { filter: none; user-select: auto; cursor: auto; }

.mask-toggle { display: inline-flex; align-items: center; gap: .4rem; }
.mask-toggle .state {
    font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
}
.mask-hint {
    display: inline-flex; align-items: center; gap: .35rem;
    font-size: .74rem; color: var(--muted);
}

/* Beim Drucken bleiben Beträge verschleiert, sofern nicht eingeblendet */
@media print {
    .masked { filter: blur(5px) !important; }
    .is-revealed .masked { filter: none !important; }
}

/* ---------- Einrichtungsstatus ---------- */
.setup-ok { color: var(--success); font-size: .95rem; }
.setup-open {
    display: inline-flex; align-items: center; gap: .3rem;
    background: #fffbeb; color: #b45309; border-radius: .4rem;
    padding: .1rem .4rem; font-size: .7rem; font-weight: 600;
    text-decoration: none; white-space: nowrap;
}
.setup-open:hover { background: #fef3c7; color: #92400e; }

/* Eingabefelder mit Beträgen: gleiche Regel wie in Tabellen.
   Der Wert bleibt bearbeitbar — sichtbar wird er erst nach dem Einblenden. */
input.masked { filter: blur(4px); }
input.masked:focus { filter: blur(2px); }
.is-revealed input.masked, .is-revealed input.masked:focus { filter: none; }