/* ═══════════════════════════════════════════════════════════════
   dashboard.css — Minimalistisches Dashboard für iPlanLane
   Hintergrund: solid #e0dde6 (KEIN Bild, kein Blur, performance-freundlich)
   Layout: Sidebar (Desktop) + Hauptbereich; Mobile = nur Hauptbereich
   ═══════════════════════════════════════════════════════════════ */

/* ── Body-Background unterdrücken wenn Dashboard/Kalender aktiv ── */
body.view-dashboard,
body.view-calendar {
    background: url(https://iplanlane.com/media/lila_wellen.webp) !important;
	background-size: cover !important;
    /* Muss NACH dem Kurzschreiben stehen: „background: …" setzt die
       Farbe auf durchsichtig zurück. Ohne diese Zeile bliebe der
       Streifen beim Überscrollen am unteren Rand weiss — das Bild
       selbst deckt ihn nicht ab, weil es auf einer festen Ebene liegt
       (siehe performance.css, Abschnitt 11). */
    background-color: var(--page-edge, #2f2a45) !important;
}

body.view-dashboard::before,
body.view-calendar::before {
    background: color-mix(in srgb, #a99cc3 75%, transparent) !important;
}
[data-theme="dark"] body.view-dashboard,
[data-theme="dark"] body.view-calendar { background: #14171f !important; }
[data-theme="white"] body.view-dashboard,
[data-theme="white"] body.view-calendar { background: #e0dde6 !important; }

/* Header IDENTISCH zu Gantt — gleicher Layout, gleiche Padding */
/* (kein Override mehr — alle Views nutzen das gleiche .app-layout-Padding) */

/* Desktop & Tablet: Dashboard/Kalender ohne Scrollbar — alles ins Viewport.
   Statt 100vh nutzen wir 100dvh (dynamic viewport height): auf iPad/Tablet-
   Browsern mit ein-/ausblendender URL-Leiste passt sich die Höhe an, sodass
   nichts unten abgeschnitten wird. Fallback 100vh für ältere Browser. */
@media (min-width: 601px) {
    body.view-dashboard,
    body.view-calendar {
        overflow: hidden !important;
        height: 100vh;
        height: 100dvh;
    }
    body.view-dashboard .app-layout,
    body.view-calendar  .app-layout {
        height: 100vh;
        height: 100dvh;
        min-height: 0;
        overflow: hidden;
    }
}
body.view-gantt .app-layout {
    min-height: 100vh;
    min-height: 100dvh;
}
/* Mobile: KEIN overflow:hidden auf body → Pull-to-Refresh in Chrome funktioniert */
@media (max-width: 600px) {
    body.view-dashboard,
    body.view-calendar,
    body.view-gantt {
        overflow-y: auto !important;
        height: auto !important;
        min-height: 100dvh;
        overscroll-behavior-y: auto;  /* ermöglicht Pull-to-Refresh */
    }
    body.view-dashboard .app-layout,
    body.view-calendar  .app-layout {
        min-height: 100dvh;
        height: auto;
        overflow: visible;
    }
}

/* ── Dashboard Container ───────────────────────────────────────── */
#dashboard-view {
    display: none;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    background: transparent;
    padding: 0px 0px 12px 0px;
    gap: 12px;
    flex-direction: row;
    animation: dashFadeIn 0.25s ease-out;
}
#dashboard-view.active { display: flex; }
@keyframes dashFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── Sidebar (Desktop only) ────────────────────────────────────── */
.dash-sidebar-nav {
    width: 230px;
    flex-shrink: 0;
    background: rgba(255,255,255,0.75);
    border: 1px solid rgba(255,255,255,0.75);
    border-radius: 12px;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    overflow-y: auto;
}

[data-theme="dark"] .dash-sidebar-nav {
    background: rgba(28,35,51,0.85);
    border-color: rgba(255,255,255,0.06);
}

.dash-side-greet {
    padding: 4px 6px 0;
}
.dash-side-hello {
    font-size: 11px;
    color: rgba(26,26,46,0.5);
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}
[data-theme="dark"] .dash-side-hello { color: rgba(232,234,240,0.45); }
.dash-side-name {
    font-size: 17px;
    font-weight: 800;
    color: #1a1a2e;
    letter-spacing: -0.4px;
    margin-top: 2px;
    line-height: 1.2;
}
[data-theme="dark"] .dash-side-name { color: #e8eaf0; }

.dash-side-section-label {
    font-size: 10.5px;
    font-weight: 700;
    color: rgba(26,26,46,0.4);
    letter-spacing: 0.6px;
    text-transform: uppercase;
    padding: 0 6px 4px;
}
[data-theme="dark"] .dash-side-section-label { color: rgba(232,234,240,0.35); }

.dash-side-nav-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.dash-side-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    border: none;
    background: transparent;
    color: rgba(26,26,46,0.7);
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s, color 0.15s;
    width: 100%;
}
[data-theme="dark"] .dash-side-nav-item { color: rgba(232,234,240,0.65); }
.dash-side-nav-item svg { width: 17px; height: 17px; fill: currentColor; opacity: 0.7; flex-shrink: 0; }
.dash-side-nav-item:hover {
    background: rgba(0,0,0,0.04);
    color: #1a1a2e;
}
[data-theme="dark"] .dash-side-nav-item:hover {
    background: rgba(255,255,255,0.05);
    color: #e8eaf0;
}
.dash-side-nav-item.active {
    background: var(--accent-blue);
    color: white;
}
.dash-side-nav-item.active svg { opacity: 1; }

/* ── Sidebar-KPI-Kacheln (Desktop) ───────────────────────────── */
.dash-side-kpis {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.dash-side-kpi {
    background: rgba(0,0,0,0.035);
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: 12px;
    padding: 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    transition: background 0.15s, border-color 0.15s;
}
[data-theme="dark"] .dash-side-kpi {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.07);
}
.dash-side-kpi-value {
    font-size: 26px;
    font-weight: 800;
    line-height: 1.1;
    color: #1a1a2e;
    letter-spacing: -0.5px;
}
[data-theme="dark"] .dash-side-kpi-value { color: #e8eaf0; }
.dash-side-kpi-label {
    font-size: 11.5px;
    font-weight: 600;
    color: rgba(26,26,46,0.5);
}
[data-theme="dark"] .dash-side-kpi-label { color: rgba(232,234,240,0.5); }
.dash-side-kpi.is-alert {
    background: rgba(255,59,48,0.10);
    border-color: rgba(255,59,48,0.25);
}
.dash-side-kpi.is-alert .dash-side-kpi-value { color: #FF3B30; }

.dash-side-spacer { flex: 1; }

.dash-side-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 14px;
    background: var(--accent-blue);
    color: white;
    border: none;
    border-radius: 11px;
    font-size: 13px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: transform 0.12s, box-shadow 0.18s;
}
.dash-side-cta:hover {
    transform: translateY(-1px);
}
.dash-side-cta svg { width: 14px; height: 14px; fill: currentColor; }

/* ── Main Area ────────────────────────────────────────────────── */
.dash-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: hidden;  /* KEIN scroll auf main */
    padding-right: 0;
}

/* KPIs row */
.dash-kpis {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.dash-kpi {
    background: rgba(255,255,255,0.75);
    border: 1px solid rgba(255,255,255,0.75);
    border-radius: 12px;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    transition: transform 0.15s, box-shadow 0.18s;
}

[data-theme="dark"] .dash-kpi { background: rgba(28,35,51,0.85); border-color: rgba(255,255,255,0.06); }
.dash-kpi:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(0,0,0,0.06);
}
.dash-kpi-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgb(73 73 73 / 12%);
    color: #454545;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
[data-theme="dark"]
.dash-kpi-icon {
    background: rgb(255 255 255 / 12%);
    color: #cfcfcf;
}

.dash-kpi-icon svg { width: 22px; height: 22px; fill: currentColor; }
.dash-kpi-body { display: flex; flex-direction: column; min-width: 0; }
.dash-kpi-value {
    font-size: 28px;
    font-weight: 900;
    color: #1a1a2e;
    letter-spacing: -1px;
    line-height: 1;
}
[data-theme="dark"] .dash-kpi-value { color: #e8eaf0; }
.dash-kpi-label {
    font-size: 12px;
    color: rgba(26,26,46,0.55);
    font-weight: 600;
    margin-top: 4px;
    line-height: 1.3;
}
[data-theme="dark"] .dash-kpi-label { color: rgba(232,234,240,0.55); }

/* ── Projects card container ──────────────────────────────────── */
.dash-card {
    background: rgba(255,255,255,0.75);
    border: 1px solid rgba(255,255,255,0.75);
    border-radius: 12px;
    padding: 18px 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

[data-theme="dark"] .dash-card { background: rgba(28,35,51,0.85); border-color: rgba(255,255,255,0.06); }

.dash-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    flex-shrink: 0;
}
.dash-card-title {
    font-size: 16px;
    font-weight: 800;
    color: #1a1a2e;
    letter-spacing: -0.3px;
}
[data-theme="dark"] .dash-card-title { color: #e8eaf0; }
.dash-card-count {
    font-size: 12px;
    color: rgba(26,26,46,0.4);
    font-weight: 600;
}
[data-theme="dark"] .dash-card-count { color: rgba(232,234,240,0.4); }

/* ── Project grid ─────────────────────────────────────────────── */
.dash-projects {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
    overflow-y: auto;
    align-content: start;
    padding-right: 4px;
}
.dash-proj {
    background: white;
    border: 1px solid #7d7d7d63;
    border-radius: 12px;
    padding: 14px 16px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: relative;
    overflow: hidden;
    transition: transform 0.15s, box-shadow 0.18s, border-color 0.15s;
    /* Langes Drücken öffnet auf Touch-Geräten das Kachel-Menü (die drei
       Punkte erscheinen sonst nur beim Überfahren mit der Maus, das es
       dort nicht gibt). Ohne diese beiden Zeilen kommt iPadOS dem zuvor:
       Es markiert den Projekttitel und blendet die Lupe samt
       Kopieren-Leiste ein — das Menü ging dabei unter.
       touch-callout unterdrückt die Systemleiste, user-select die
       Markierung selbst. */
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}
.dash-proj::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: var(--proj-color, var(--accent-blue));
}
.dash-proj:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(0,0,0,0.08);
    border-color: rgba(0,0,0,0.12);
}
[data-theme="dark"] .dash-proj {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.06);
}
[data-theme="dark"] .dash-proj:hover {
    background: rgba(255,255,255,0.07);
    border-color: rgba(255,255,255,0.12);
}
.dash-proj-name {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a2e;
    letter-spacing: -0.2px;
    padding-left: 10px;
    /* Rechts Platz für das Menü-Symbol (26px breit, 8px vom Rand).
       Ohne diesen Abstand lief der Titel darunter und die letzten
       Zeichen verschwanden, sobald das Symbol beim Überfahren
       eingeblendet wurde. */
    padding-right: 32px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
[data-theme="dark"] .dash-proj-name { color: #e8eaf0; }
.dash-proj-sub {
    font-size: 11px;
    color: rgba(26,26,46,0.5);
    padding-left: 10px;
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
[data-theme="dark"] .dash-proj-sub { color: rgba(232,234,240,0.45); }

/* ── Sharing-Badge (Owner: klickbar; Mitglied: nur Info) ───── */
.dash-proj-share-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    font-size: 10.5px;
    font-weight: 700;
    border-radius: 999px;
    line-height: 1.4;
    letter-spacing: 0.1px;
    border: 1px solid;
    font-family: inherit;
}
.dash-proj-share-owner {
    background: rgba(107, 92, 255, 0.10);
    border-color: rgba(107, 92, 255, 0.28);
    color: #5346d6;
    cursor: pointer;
    transition: background 0.15s;
}
.dash-proj-share-owner:hover {
    background: rgba(107, 92, 255, 0.18);
}
.dash-proj-share-guest {
    background: rgba(52, 199, 89, 0.10);
    border-color: rgba(52, 199, 89, 0.28);
    color: #1f8a45;
}
[data-theme="dark"] .dash-proj-share-owner {
    background: rgba(107, 92, 255, 0.22);
    border-color: rgba(107, 92, 255, 0.42);
    color: #c4b5fd;
}
[data-theme="dark"] .dash-proj-share-owner:hover {
    background: rgba(107, 92, 255, 0.32);
}
[data-theme="dark"] .dash-proj-share-guest {
    background: rgba(74, 222, 128, 0.16);
    border-color: rgba(74, 222, 128, 0.32);
    color: #4ade80;
}
.dash-proj-bar {
    height: 5px;
    background: rgba(0,0,0,0.06);
    border-radius: 5px;
    overflow: hidden;
    margin-left: 10px;
}
[data-theme="dark"] .dash-proj-bar { background: rgba(255,255,255,0.08); }
.dash-proj-fill {
    height: 100%;
    border-radius: 5px;
    background: var(--proj-color, var(--accent-blue));
    transition: width 0.5s ease;
}
.dash-proj-pct {
    font-size: 11px;
    font-weight: 800;
    color: #1a1a2e;
    align-self: flex-end;
    padding-right: 2px;
}
[data-theme="dark"] .dash-proj-pct { color: #e8eaf0; }

/* ════════════════════════════════════════════════════════════════
   GETEILTE PROJEKTE — Sub-Sektion in der Projekte-Karte
   (zwischen aktiven Projekten oben und erledigten unten)
   Karten selbst nutzen die Standard-Klasse .dash-proj — dadurch
   bleibt das Design identisch (kein Gradient, gleiche Höhen, etc.)
   ════════════════════════════════════════════════════════════════ */
.dash-projects-shared {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}
[data-theme="dark"] .dash-projects-shared {
    border-top-color: rgba(255, 255, 255, 0.06);
}
.dash-projects-subheader {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    padding-left: 2px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: rgba(26, 26, 46, 0.5);
}
[data-theme="dark"] .dash-projects-subheader {
    color: rgba(232, 234, 240, 0.5);
}
.dash-projects-subcount {
    font-weight: 600;
    text-transform: none;
    letter-spacing: normal;
    color: rgba(26, 26, 46, 0.4);
}
[data-theme="dark"] .dash-projects-subcount {
    color: rgba(232, 234, 240, 0.4);
}

/* Pending-Variante einer .dash-proj-Karte: SELBE Karte wie normal —
   nur die Border wird gestrichelt und das Lock-Badge oben rechts
   signalisiert „ausstehend". KEIN Gradient, KEIN getöntes Background:
   so passt die Karte zu allen drei Themes (Glass / White / Dark). */
.dash-proj-pending {
    border-style: dashed;
    border-color: rgba(245, 158, 11, 0.45);
    /* Background bleibt erbend (.dash-proj) → identisch zu echten Karten */
}
.dash-proj-pending:hover {
    border-color: rgba(245, 158, 11, 0.65);
}
[data-theme="white"] .dash-proj-pending {
    border-color: rgba(245, 158, 11, 0.55);
}
[data-theme="white"] .dash-proj-pending:hover {
    border-color: rgba(245, 158, 11, 0.75);
}
[data-theme="dark"] .dash-proj-pending {
    border-color: rgba(251, 191, 36, 0.45);
}
[data-theme="dark"] .dash-proj-pending:hover {
    border-color: rgba(251, 191, 36, 0.65);
}

/* Schloss oben rechts — kompaktes Badge, ähnlich Avatar-Style */
.dash-proj-pending-lock {
    position: absolute;
    top: 10px; right: 10px;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: rgba(245, 158, 11, 0.14);
    color: #b45309;
    border: 1px solid rgba(245, 158, 11, 0.30);
    display: flex; align-items: center; justify-content: center;
    pointer-events: none;
    z-index: 2;
}
[data-theme="white"] .dash-proj-pending-lock {
    background: rgba(245, 158, 11, 0.16);
    border-color: rgba(245, 158, 11, 0.36);
}
[data-theme="dark"] .dash-proj-pending-lock {
    background: rgba(251, 191, 36, 0.16);
    border-color: rgba(251, 191, 36, 0.32);
    color: #fbbf24;
}

/* "Einladung"-Badge in der dash-proj-sub Zeile */
.dash-proj-share-pending {
    background: rgba(245, 158, 11, 0.14);
    border-color: rgba(245, 158, 11, 0.35);
    color: #b45309;
}
[data-theme="dark"] .dash-proj-share-pending {
    background: rgba(245, 158, 11, 0.22);
    border-color: rgba(245, 158, 11, 0.4);
    color: #fbbf24;
}

/* ════════════════════════════════════════════════════════════════
   ANNEHMEN/ABLEHNEN MODAL
   ════════════════════════════════════════════════════════════════ */
.dash-invite-modal {
    position: fixed;
    inset: 0;
    z-index: 7000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.dash-invite-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
}
.dash-invite-modal-card {
    position: relative;
    background: #fff;
    color: #1d1d1f;
    border-radius: 18px;
    padding: 28px 26px 22px;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 26px 60px rgba(0, 0, 0, 0.32);
    text-align: center;
    animation: dashInviteIn 0.22s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
[data-theme="dark"] .dash-invite-modal-card {
    background: #1c2333;
    color: #e8eaf0;
}
@keyframes dashInviteIn {
    from { opacity: 0; transform: scale(0.94) translateY(8px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
.dash-invite-icon {
    width: 52px; height: 52px;
    border-radius: 14px;
    background: linear-gradient(135deg, #6b5cff, #5346d6);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 14px;
}
.dash-invite-title {
    margin: 0 0 6px;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.3px;
}
.dash-invite-text {
    margin: 0 0 12px;
    font-size: 13.5px;
    line-height: 1.5;
    color: rgba(26, 26, 46, 0.6);
}
[data-theme="dark"] .dash-invite-text { color: rgba(232, 234, 240, 0.6); }
.dash-invite-text strong { color: rgba(26, 26, 46, 0.9); }
[data-theme="dark"] .dash-invite-text strong { color: rgba(232, 234, 240, 0.92); }
.dash-invite-plan {
    margin: 0 0 22px;
    padding: 12px 14px;
    background: rgba(107, 92, 255, 0.08);
    border: 1px solid rgba(107, 92, 255, 0.22);
    border-radius: 11px;
    font-size: 14px;
    font-weight: 800;
    color: #5346d6;
}
[data-theme="dark"] .dash-invite-plan {
    background: rgba(107, 92, 255, 0.14);
    border-color: rgba(107, 92, 255, 0.35);
    color: #c4b5fd;
}
.dash-invite-actions {
    display: flex;
    gap: 10px;
}
.dash-invite-btn {
    flex: 1;
    padding: 12px 16px;
    border: none;
    border-radius: 11px;
    font-size: 14px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.12s;
}
.dash-invite-btn:hover { transform: translateY(-1px); opacity: 0.94; }
.dash-invite-decline {
    background: rgba(255, 59, 48, 0.08);
    color: #c81e0e;
    border: 1px solid rgba(255, 59, 48, 0.22);
}
.dash-invite-decline:hover { background: rgba(255, 59, 48, 0.14); }
[data-theme="dark"] .dash-invite-decline {
    background: rgba(255, 59, 48, 0.18);
    color: #fca5a5;
    border-color: rgba(255, 59, 48, 0.32);
}
.dash-invite-accept {
    background: linear-gradient(135deg, #34C759, #16a34a);
    color: #fff;
}

/* Responsive — auf Mobile schmalere Tiles */
@media (max-width: 600px) {
    .dash-shared-list { grid-template-columns: 1fr; }
    .dash-shared-tile { padding: 10px 12px; }
    .dash-shared-tile-badge { padding: 3px 8px; font-size: 10px; }
    .dash-invite-modal-card { padding: 24px 20px 18px; }
}

/* "Add" project tile */
.dash-proj-add {
    background: transparent;
    border: 1.5px dashed rgba(0,0,0,0.18);
    color: rgba(26,26,46,0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 6px;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    border-radius: 12px;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.dash-proj-add::before { display: none; }
.dash-proj-add:hover {
    background: rgba(0,122,255,0.05);
    border-color: var(--accent-blue);
    color: var(--accent-blue);
}
[data-theme="dark"] .dash-proj-add {
    border-color: rgba(255,255,255,0.15);
    color: rgba(232,234,240,0.45);
}
.dash-proj-add svg { width: 24px; height: 24px; fill: currentColor; }
.dash-proj-add-label { font-size: 12px; font-weight: 700; }

/* Empty state inside projects card */
.dash-projects-empty {
    text-align: center;
    padding: 40px 20px;
    color: rgba(26,26,46,0.45);
}
[data-theme="dark"] .dash-projects-empty { color: rgba(232,234,240,0.4); }
.dash-projects-empty-title {
    font-size: 15px;
    font-weight: 700;
    color: #1a1a2e;
    margin: 12px 0 6px;
}
[data-theme="dark"] .dash-projects-empty-title { color: #e8eaf0; }
.dash-projects-empty p { margin: 0 0 16px; font-size: 13px; max-width: 280px; margin-left: auto; margin-right: auto; line-height: 1.5; }

/* ── RESPONSIVE ────────────────────────────────────────────────── */
@media (max-width: 920px) {
    .dash-sidebar-nav {
        width: 200px;
        padding: 14px 10px;
        gap: 14px;
    }
}

@media (max-width: 760px) {
    /* Mobile: NO sidebar — bottom nav handles it */
    .dash-sidebar-nav { display: none; }
    #dashboard-view {
        padding: 10px;
        gap: 10px;
        flex-direction: column;
        /* Auf Mobile: KEIN eigener Scroll → body scrollt → Pull-to-Refresh works */
        overflow: visible;
        height: auto;
    }
    .dash-main { padding-right: 0; gap: 10px; overflow: visible; }
    .dash-split { display: flex; flex-direction: column; gap: 10px; }
    .dash-kpis { grid-template-columns: 1fr 1fr; gap: 8px; }
    .dash-kpi { padding: 12px 14px; gap: 10px; }
    .dash-kpi-icon { width: 38px; height: 38px; }
    .dash-kpi-icon svg { width: 18px; height: 18px; }
    .dash-kpi-value { font-size: 22px; }
    .dash-kpi-label { font-size: 11px; }
    .dash-card { padding: 14px 14px; border-radius: 12px; }
    .dash-card-title { font-size: 14px; }
}

@media (max-width: 480px) {
    .dash-projects { grid-template-columns: 1fr; }
    .dash-kpi-value { font-size: 20px; }
}

/* ═══════════════════════════════════════════════════════════════
   Mobile Bottom Navigation (für ALLE Views, ≤600px)
   ═══════════════════════════════════════════════════════════════ */
.mob-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 800;
    background: rgba(255,255,255,0.96);
    border-top: 1px solid rgba(0,0,0,0.08);
    padding: 6px 0 calc(env(safe-area-inset-bottom, 0px) + 4px);
}
[data-theme="dark"] .mob-nav {
    background: rgba(20,23,31,0.97);
    border-top-color: rgba(255,255,255,0.07);
}
.mob-nav-inner {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0 4px;
}
.mob-nav-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 5px 6px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    border-radius: 10px;
    transition: background 0.15s;
    -webkit-tap-highlight-color: transparent;
    min-width: 44px;
    flex: 1;
    max-width: 70px;
}
.mob-nav-btn svg { width: 22px; height: 22px; fill: rgba(26,26,46,0.4); transition: fill 0.15s; }
.mob-nav-btn span { font-size: 10px; font-weight: 700; color: rgba(26,26,46,0.4); transition: color 0.15s; letter-spacing: 0.2px; }
.mob-nav-btn.active svg { fill: var(--accent-blue); }
.mob-nav-btn.active span { color: var(--accent-blue); }
[data-theme="dark"] .mob-nav-btn svg { fill: rgba(232,234,240,0.4); }
[data-theme="dark"] .mob-nav-btn span { color: rgba(232,234,240,0.4); }
[data-theme="dark"] .mob-nav-btn.active svg { fill: var(--accent-blue); }
[data-theme="dark"] .mob-nav-btn.active span { color: var(--accent-blue); }

@media (max-width: 600px) {
    .mob-nav { display: block; }
    /* Die untere Leiste liegt fest über dem Inhalt und hält sich selbst
       vom Home-Indikator frei (.mob-nav). Der Freiraum darunter muss
       diesen Rand also mitrechnen — sonst verschwindet die letzte Zeile
       auf Geräten mit Indikator hinter der Leiste. */
    body.has-mob-nav .app-layout { padding-bottom: calc(64px + var(--sa-bottom)); }
}

/* ═══════════════════════════════════════════════════════════════
   View-Isolation: verhindert Overlap zwischen Views
   ═══════════════════════════════════════════════════════════════ */
body:not(.view-gantt) #gmv-root,
body:not(.view-gantt) #gmv-detail-overlay,
body:not(.view-gantt) #gmv-detail-sheet,
body:not(.view-gantt) #gmv-plans-popover {
    display: none !important;
    pointer-events: none !important;
}
body:not(.view-gantt) #plan-selector-wrap,
body:not(.view-gantt) .nav-ai-btn,
body:not(.view-gantt) #collab-invite-btn,
body:not(.view-gantt) #share-button,
body:not(.view-gantt) .share-btn,
#account-menu-btn,
#account-dropdown {
    display: none !important;
}
/* Plan-Selector: Desktop-only — auf Mobile übernimmt mob-nav */
@media (max-width: 600px) {
    #plan-selector-wrap { display: none !important; }
}
body.view-gantt #plan-selector-wrap {
    display: flex;
    align-items: center;
}

/* ═══════════════════════════════════════════════════════════════
   Mobile Settings-Sheet (öffnet sich über Zahnrad in mob-nav)
   ═══════════════════════════════════════════════════════════════ */
.mob-settings-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 900;
    display: none;
    opacity: 0;
    transition: opacity 0.2s;
}
.mob-settings-overlay.show { display: block; opacity: 1; }
.mob-settings-sheet {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 901;
    background: white;
    border-radius: 20px 20px 0 0;
    padding: 8px 12px calc(env(safe-area-inset-bottom, 0px) + 16px);
    transform: translateY(110%);
    transition: transform 0.25s cubic-bezier(0.32, 0.72, 0, 1);
    box-shadow: 0 -8px 30px rgba(0,0,0,0.18);
}
.mob-settings-sheet.show { transform: translateY(0); }
[data-theme="dark"] .mob-settings-sheet { background: #1c2333; color: #e8eaf0; }
.mob-settings-grip {
    width: 36px; height: 4px;
    background: rgba(0,0,0,0.18);
    border-radius: 2px;
    margin: 4px auto 12px;
}
[data-theme="dark"] .mob-settings-grip { background: rgba(255,255,255,0.18); }
.mob-settings-title {
    font-size: 11px; font-weight: 700; letter-spacing: 0.6px;
    text-transform: uppercase;
    color: rgba(26,26,46,0.45);
    padding: 0 8px 8px;
}
[data-theme="dark"] .mob-settings-title { color: rgba(232,234,240,0.45); }
.mob-settings-item {
    display: flex; align-items: center; gap: 12px;
    width: 100%;
    padding: 14px 12px;
    border: none;
    background: transparent;
    font-size: 15px; font-weight: 600; font-family: inherit;
    color: #1a1a2e;
    cursor: pointer;
    border-radius: 10px;
    text-align: left;
    text-decoration: none;
}
[data-theme="dark"] .mob-settings-item { color: #e8eaf0; }
.mob-settings-item:hover, .mob-settings-item:active { background: rgba(0,0,0,0.05); }
[data-theme="dark"] .mob-settings-item:hover { background: rgba(255,255,255,0.06); }
.mob-settings-item svg { width: 20px; height: 20px; fill: currentColor; opacity: 0.8; flex-shrink: 0; }
.mob-settings-item.danger { color: var(--accent-red, #ff3b30); }

/* Aktiver Tab: dezente getönte Pille */
.mob-nav-btn.active {
    background: rgba(0,122,255,0.10);
}
[data-theme="dark"] .mob-nav-btn.active { background: rgba(10,132,255,0.20); }

/* Zentraler +-FAB: rund, erhöht (schwebt über der Leiste) */
.mob-nav-btn.primary {
    background: var(--accent-blue);
    color: white;
    border-radius: 50%;
    width: 54px; height: 54px;
    min-width: 54px; max-width: 54px;
    padding: 0;
    margin: 0 6px;
    flex: 0 0 54px;
    align-self: center;
    transform: translateY(-16px);
    border: 3px solid var(--mob-nav-bg, #ffffff);
    display: flex; align-items: center; justify-content: center;
    gap: 0;
    transition: transform 0.12s ease, box-shadow 0.2s;
}
.mob-nav-btn.primary svg {
    fill: white !important;
    width: 28px; height: 28px;
    display: block;
}
.mob-nav-btn.primary span { display: none; }
.mob-nav-btn.primary:active { transform: translateY(-16px) scale(0.9); }
[data-theme="dark"] .mob-nav-btn.primary { border-color: #14181a; }

/* Theme-Auswahl im "Mehr"-Sheet */
.mob-set-theme-row {
    display: flex;
    gap: 8px;
    padding: 4px 8px 10px;
}
.mob-set-theme-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 6px;
    border: 1.5px solid rgba(0,0,0,0.1);
    border-radius: 14px;
    background: transparent;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    color: rgba(26,26,46,0.6);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.mob-set-theme-btn svg { width: 22px; height: 22px; fill: currentColor; }
.mob-set-theme-btn.active {
    border-color: var(--accent-blue);
    background: rgba(0,122,255,0.08);
    color: var(--accent-blue);
}
[data-theme="dark"] .mob-set-theme-btn {
    border-color: rgba(255,255,255,0.12);
    color: rgba(232,234,240,0.6);
}
[data-theme="dark"] .mob-set-theme-btn.active {
    border-color: var(--accent-blue);
    background: rgba(10,132,255,0.18);
    color: #4da3ff;
}

/* Highlight für fokussierte Task-Bar (Dashboard → Gantt-Navigation) */
.task-bar.task-bar-focus {
    box-shadow: 0 0 0 3px var(--accent-blue, #007AFF), 0 0 18px rgba(0,122,255,0.5) !important;
    animation: focusPulse 1s ease-in-out 1;
    z-index: 100 !important;
}
@keyframes focusPulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE: ALTE gmv-bottombar versteckt — nur EINE unified mob-nav
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
    body.view-gantt .gmv-bottombar { display: none !important; }
    body.view-gantt #gmv-list-wrap,
    body.view-gantt .gmv-list-wrap {
        padding-bottom: 80px !important;
    }
    /* Mobile: Page-Scroll → innere Views ohne eigene Höhe */
    body.view-dashboard #dashboard-view,
    body.view-calendar  #calendar-view {
        height: auto !important;
        overflow: visible !important;
        flex: none !important;
    }
    /* Dashboard: nur so viel Padding-Bottom wie die mob-nav (~58px + safe) braucht */
    body.view-dashboard #dashboard-view {
        padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)) !important;
        /* KEINE min-height: die Seite soll exakt so hoch wie ihr Inhalt sein,
           sonst strecken die flex:1-Karten den Rest und es entsteht unten
           ein großer Leerraum nach den "Nächste Termine". */
        min-height: 0 !important;
    }
    /* Flex-Streckung im Page-Scroll-Modus abschalten: Container und Karten
       nehmen genau ihre Inhaltshöhe ein, statt verbleibenden Platz zu füllen. */
    body.view-dashboard .dash-main,
    body.view-dashboard .dash-split,
    body.view-dashboard .dash-card {
        flex: none !important;
        min-height: 0 !important;
        height: auto !important;
    }
    body.view-dashboard .dash-split {
        display: flex !important;
        flex-direction: column !important;
    }
    /* Kalender: bündig bis zur Mob-Nav (kein Spalt!) */
    body.view-calendar  #calendar-view  {
        min-height: calc(100vh - 56px - var(--sa-top));
        margin: 0 !important;
        border-radius: 0 !important;
        border: none !important;
    }
    /* Layout-Container nicht mehr mit unten Padding */
    body.view-calendar .app-layout { padding-bottom: 0 !important; gap: 8px !important; }
    body.view-dashboard .dash-main { overflow: visible !important; height: auto; }
    body.view-dashboard .dash-projects,
    body.view-dashboard .dash-cal-list,
    body.view-dashboard .dash-completed-list {
        overflow: visible !important;
        max-height: none !important;
        height: auto !important;
        flex: none !important;
    }
    /* Mob-Nav modernisiert: leichter Schatten + abgerundete Ecken */
    .mob-nav {
        background: rgba(255,255,255,0.98);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        box-shadow: 0 -2px 12px rgba(0,0,0,0.06);
        border-top: 1px solid rgba(0,0,0,0.05);
    }
    [data-theme="dark"] .mob-nav {
        background: rgba(18,20,26,0.98);
        border-top-color: rgba(255,255,255,0.07);
    }
}

/* ═══════════════════════════════════════════════════════════════
   Desktop: 2-Spalten-Split (Projekte links | Kalender-Liste rechts)
   ═══════════════════════════════════════════════════════════════ */
.dash-split {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 12px;
    flex: 1;
    min-height: 0;
}
@media (max-width: 900px) {
    /* Gestapelt: Projekte oben, Termine darunter.
       Ohne Zeilenangabe teilt das Raster die Höhe exakt hälftig — der
       Terminbereich bekäme also genauso viel Platz wie die Projekte,
       auch wenn dort nur zwei Einträge stehen. Die Projekte sind der
       Grund, warum man aufs Dashboard schaut; sie bekommen daher rund
       zwei Drittel. minmax(0, …) ist nötig, damit die inneren Listen
       weiterhin selbst scrollen können. */
    .dash-split {
        grid-template-columns: 1fr;
        grid-template-rows: minmax(0, 1.8fr) minmax(0, 1fr);
    }
}

/* Kalender-Liste */
.dash-cal-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    padding-right: 4px;
}
.dash-cal-item {
    display: flex;
    align-items: stretch;
    gap: 10px;
    padding: 10px 12px;
    background: linear-gradient(
color-mix(in srgb, var(--ev-color) 10%, transparent), 
color-mix(in srgb, var(--ev-color) 10%, transparent)), #FFFFFF;
    border: 1px solid rgb(0 0 0 / 10%);
    border-radius: 10px;
    cursor: pointer;
    transition: transform 0.12s, box-shadow 0.15s;
    position: relative;
    overflow: hidden;
}
[data-theme="dark"] .dash-cal-item {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.06);
}
.dash-cal-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.06);
}
.dash-cal-item::before {
    content: '';
    position: absolute; left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--ev-color, var(--accent-blue));
}
.dash-cal-item-date {
    display: flex; flex-direction: column;
    align-items: center;
    min-width: 42px;
    padding: 5px;
    background: var(--ev-color);
    border-radius: 6px;
}
.dash-cal-item-day { font-size: 18px; font-weight: 800; color: #1a1a2e; line-height: 1; }
[data-theme="dark"] .dash-cal-item-day { color: #000000; }
.dash-cal-item-month {
    font-size: 9px; font-weight: 700; letter-spacing: 0.5px;
    text-transform: uppercase; color: rgba(26,26,46,0.5); margin-top: 3px;
}
[data-theme="dark"] .dash-cal-item-month { color: rgb(0 0 0 / 0.8); }
.dash-cal-item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.dash-cal-item-title {
    font-size: 13px; font-weight: 500; color: #1a1a2e;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
[data-theme="dark"] .dash-cal-item-title { color: #e8eaf0; }
.dash-cal-item-meta {
    font-size: 11px; color: rgba(26,26,46,0.5); margin-top: 2px;
}
[data-theme="dark"] .dash-cal-item-meta { color: rgba(232,234,240,0.5); }
.dash-cal-empty {
    text-align: center; padding: 30px 16px;
    color: rgba(26,26,46,0.4); font-size: 12px;
}
[data-theme="dark"] .dash-cal-empty { color: rgba(232,234,240,0.4); }

/* Sidebar Account/Settings Button */
.dash-side-bottom {
    display: flex; gap: 6px;
}
.dash-side-icon-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    background: rgba(0,0,0,0.04);
    border: none;
    border-radius: 10px;
    color: rgba(26,26,46,0.6);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.dash-side-icon-btn svg { width: 17px; height: 17px; fill: currentColor; }
.dash-side-icon-btn:hover {
    background: rgba(0,0,0,0.08);
    color: #1a1a2e;
}
[data-theme="dark"] .dash-side-icon-btn {
    background: rgba(255,255,255,0.05);
    color: rgba(232,234,240,0.55);
}
[data-theme="dark"] .dash-side-icon-btn:hover {
    background: rgba(255,255,255,0.1);
    color: #e8eaf0;
}

/* ═══════════════════════════════════════════════════════════════
   KPI Popover (Vorschau der fälligen Aufgaben)
   ═══════════════════════════════════════════════════════════════ */
.dash-kpi { cursor: pointer; position: relative; user-select: none; }
.dash-kpi-popover {
    position: fixed;
    background: #d0d0d059;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.16);
    padding: 10px;
    min-width: 280px;
    max-width: 360px;
    max-height: 380px;
    overflow-y: auto;
    /* Verhindert, dass das Scrollen am Listenende auf die Seite
       überspringt. Ohne das scrollt am unteren Anschlag plötzlich die
       Seite mit — und da ein Seiten-Scroll das Fenster schliessen MUSS
       (es hängt per position:fixed an der Kachel), klappte es genau
       dann zu, wenn man die letzten Einträge lesen wollte. */
    overscroll-behavior: contain;
    z-index: 1500;
    display: none;
}
[data-theme="dark"] .dash-kpi-popover {
    background: #1c2333;
    border-color: rgba(255,255,255,0.1);
}
[data-theme="white"] .dash-kpi-popover {
    background: #e0dde6;
}

.dash-kpi-popover.show { display: block; animation: kpiPopIn 0.15s ease-out; }
@keyframes kpiPopIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.dash-kpi-pop-item {
    display: flex; gap: 10px; align-items: center;
    padding: 8px 10px; border-radius: 8px;
    cursor: pointer; transition: background 0.12s;
	border: 1px solid #00000021;
    border-left: 3px solid var(--ti-color, var(--accent-blue));
    margin-bottom: 4px;
	background: white;
}
[data-theme="dark"] .dash-kpi-pop-item { background: none; border: 1px solid #ffffff21; border-left: 3px solid var(--ti-color, var(--accent-blue));}

.dash-kpi-pop-item:hover { background: #efefef; }
[data-theme="dark"] .dash-kpi-pop-item:hover { background: rgba(255,255,255,0.05); }
.dash-kpi-pop-item-body { flex: 1; min-width: 0; }
.dash-kpi-pop-item-title {
    font-size: 13px; font-weight: 700; color: #1a1a2e;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
[data-theme="dark"] .dash-kpi-pop-item-title { color: #e8eaf0; }
.dash-kpi-pop-item-sub {
    font-size: 11px; color: rgba(26,26,46,0.55); margin-top: 1px;
}
[data-theme="dark"] .dash-kpi-pop-item-sub { color: rgba(232,234,240,0.5); }
.dash-kpi-pop-empty {
    padding: 20px 10px; text-align: center;
    font-size: 12px; color: rgba(26,26,46,0.45); background: white;
}
[data-theme="dark"] .dash-kpi-pop-empty { color: rgba(232,234,240,0.45); background: transparent;}

/* Checkbox links zum direkten Abhaken aus dem Popover heraus */
.dash-kpi-pop-check {
    display: flex; align-items: center; justify-content: center;
    width: 22px; height: 22px;
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
}
.dash-kpi-pop-check input {
    position: absolute; opacity: 0; pointer-events: none;
}
.dash-kpi-pop-check-box {
    width: 18px; height: 18px;
    border-radius: 6px;
    border: 1.5px solid rgba(26,26,46,0.28);
    background: #fff;
    transition: background 0.15s, border-color 0.15s;
    display: flex; align-items: center; justify-content: center;
}
[data-theme="dark"] .dash-kpi-pop-check-box {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.25);
}
.dash-kpi-pop-check input:checked + .dash-kpi-pop-check-box {
    background: #34C759;
    border-color: #34C759;
}
.dash-kpi-pop-check input:checked + .dash-kpi-pop-check-box::after {
    content: '';
    width: 11px; height: 11px;
    background: no-repeat center/contain url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
}
/* Überfällig-Kennzeichnung im Aufklappfenster
   ───────────────────────────────────────────
   Der linke Balken bleibt IMMER in der Farbe der Aufgabe — daran
   erkennt man sie im Diagramm wieder, und genau dafür ist er da.
   Vorher übermalte ihn ein rotes border-left-color, und die komplette
   Unterzeile (Projektname UND Datum) wurde rot. In der Überfällig-
   Liste war damit alles rot und dadurch nichts mehr hervorgehoben.

   Rot bleibt jetzt der KPI-Kachel vorbehalten. Innerhalb der Liste
   färbt sich nur noch das Fälligkeitsdatum — und auch das nur in der
   Wochenansicht, wo es überfällige von fälligen unterscheidet. */
.dash-kpi-pop-item.is-overdue .dash-kpi-pop-due { color: #FF3B30; font-weight: 700; }
[data-theme="dark"] .dash-kpi-pop-item.is-overdue .dash-kpi-pop-due { color: #FF6B60; }

/* Sidebar-KPI clickable (Überfällig) */
.dash-side-kpi-clickable {
    cursor: pointer;
    transition: background 0.15s, transform 0.12s;
}
.dash-side-kpi-clickable:hover {
    background: rgba(255,255,255,0.06);
    transform: translateY(-1px);
}
[data-theme="dark"] .dash-side-kpi-clickable:hover {
    background: rgba(255,255,255,0.1);
}

/* ═══════════════════════════════════════════════════════════════
   Projekt-Karten: 3-Punkt-Menü + Aktionen
   ═══════════════════════════════════════════════════════════════ */
.dash-proj { position: relative; }
.dash-proj-more {
    position: absolute;
    top: 8px; right: 8px;
    width: 26px; height: 26px;
    display: flex; align-items: center; justify-content: center;
    border: none;
    background: rgba(0,0,0,0.05);
    border-radius: 7px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s, background 0.15s;
    z-index: 2;
}
.dash-proj:hover .dash-proj-more { opacity: 1; }
.dash-proj-more:hover { background: rgba(0,0,0,0.12); }
.dash-proj-more svg { width: 14px; height: 14px; fill: rgba(26,26,46,0.65); }
[data-theme="dark"] .dash-proj-more { background: rgba(255,255,255,0.06); }
[data-theme="dark"] .dash-proj-more:hover { background: rgba(255,255,255,0.12); }
[data-theme="dark"] .dash-proj-more svg { fill: rgba(232,234,240,0.7); }

/* Completed Section */
.dash-projects-completed {
    margin-top: 10px;
    border-top: 1px dashed rgba(0,0,0,0.1);
    padding-top: 10px;
    flex-shrink: 0;
}
[data-theme="dark"] .dash-projects-completed { border-top-color: rgba(255,255,255,0.1); }
.dash-completed-toggle {
    display: flex; align-items: center; gap: 8px;
    width: 100%; padding: 6px 4px;
    background: none; border: none;
    font-size: 12px; font-weight: 700; font-family: inherit;
    color: rgba(26,26,46,0.55);
    cursor: pointer; user-select: none;
    letter-spacing: 0.2px;
}
.dash-completed-toggle:hover { color: #1a1a2e; }
[data-theme="dark"] .dash-completed-toggle { color: rgba(232,234,240,0.5); }
[data-theme="dark"] .dash-completed-toggle:hover { color: #e8eaf0; }
.dash-completed-toggle svg {
    width: 12px; height: 12px; fill: currentColor;
    transition: transform 0.2s;
}
.dash-completed-toggle.collapsed svg { transform: rotate(-90deg); }
.dash-completed-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 8px;
    margin-top: 8px;
    max-height: 200px;
    overflow-y: auto;
}
.dash-completed-list.hidden { display: none; }
.dash-proj.is-completed {
    background: rgb(96 85 117);
	border: 3px solid var(--accent-blue);
}
.dash-proj.is-completed .dash-proj-name {
	color: white;
}

.dash-proj.is-completed .dash-proj-sub{
	color: rgb(255 255 255 / 50%) !important;
}

.dash-proj.is-completed .dash-proj-pct{
	color: #ffffff;
}


[data-theme="dark"] .dash-proj.is-completed { background: rgb(73 65 89); }

/* Action-Sheet (Mobile Long-Press) / Context-Menu */
.dash-proj-menu {
    position: fixed;
    background: white;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.18);
    padding: 6px;
    z-index: 1600;
    min-width: 200px;
    display: none;
}
[data-theme="dark"] .dash-proj-menu {
    background: #1c2333;
    border-color: rgba(255,255,255,0.1);
}
.dash-proj-menu.show { display: block; animation: kpiPopIn 0.12s ease-out; }
.dash-proj-menu-item {
    display: flex; align-items: center; gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border: none;
    background: transparent;
    font-size: 13px; font-weight: 600; font-family: inherit;
    color: #1a1a2e;
    cursor: pointer;
    border-radius: 8px;
    text-align: left;
}
[data-theme="dark"] .dash-proj-menu-item { color: #e8eaf0; }
.dash-proj-menu-item:hover { background: rgba(0,0,0,0.05); }
[data-theme="dark"] .dash-proj-menu-item:hover { background: rgba(255,255,255,0.06); }
.dash-proj-menu-item svg { width: 15px; height: 15px; fill: currentColor; opacity: 0.7; }
.dash-proj-menu-item.danger { color: var(--accent-red, #ff3b30); }
.dash-proj-menu-item.danger svg { opacity: 0.9; }

/* Projects-Karten-Layout: Container muss scrollen, Karten shrink-fit */
.dash-card { overflow: hidden; display: flex; flex-direction: column; }
.dash-projects {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    align-content: start;  /* WICHTIG: Karten NICHT stretchen */
    /* grid-auto-rows: max-content ist hier NICHT kosmetisch, sondern
       behebt einen echten Darstellungsfehler:

       .dash-proj hat overflow:hidden. Dadurch ist seine automatische
       Mindesthöhe 0 — das Raster darf die Zeilen also beliebig weit
       stauchen. Sobald mehr Projekte da waren als in die feste Höhe
       der Karte passten, hat es genau das getan: Die Zeilen wurden auf
       52px zusammengedrückt, obwohl der Inhalt 86px braucht, und der
       Projektname wurde oben abgeschnitten. Statt zu scrollen wurde
       gequetscht.

       Mit max-content sind die Zeilen immer so hoch wie ihr Inhalt und
       der Container scrollt — wie ursprünglich gedacht. */
    grid-auto-rows: max-content;
}
.dash-completed-list {
    align-content: start;
    grid-auto-rows: max-content;   /* gleicher Grund wie oben */
}

/* MOBILE: Project-Tiles kompakter + Name garantiert sichtbar */
@media (max-width: 760px) {
    .dash-proj {
        padding: 10px 12px;
        gap: 6px;
        min-height: 0;
    }
    .dash-proj-name {
        font-size: 13px;
        padding-left: 8px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .dash-proj-sub  { font-size: 11px; padding-left: 8px; }



    .dash-proj-bar  { margin-left: 8px; height: 4px; }
    .dash-proj-pct  { font-size: 10px; }
    .dash-proj-more { opacity: 1; width: 28px; height: 28px; }  /* immer sichtbar mobile */
    .dash-projects  { grid-template-columns: 1fr; gap: 8px; }
}
/* ════════════════════════════════════════════════════════════════
   PROJEKTE ALS LISTE — Tablet und schmaler, ab mehreren Projekten
   ────────────────────────────────────────────────────────────────
   Auf Tablet-Breite bleiben von der Kachel-Darstellung zwei schmale
   Spalten übrig. Sobald einige Projekte da sind, ist jede Kachel zu
   klein für einen lesbaren Namen — und man sieht kaum die Hälfte.

   Ab fünf Projekten wechselt die Darstellung deshalb auf eine
   kompakte Liste: eine Zeile je Projekt, Name links, Fortschritt
   rechts, dünner Balken darunter. Damit passen ungefähr doppelt so
   viele Einträge in dieselbe Höhe, jeder Name ist vollständig
   lesbar und die Liste scrollt sauber.

   Die Klasse is-list setzt dashboard.js anhand der Projektanzahl.
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {

    .dash-projects.is-list,
    .dash-completed-list.is-list {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .dash-projects.is-list .dash-proj,
    .dash-completed-list.is-list .dash-proj {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "name pct"
            "sub  sub"
            "bar  bar";
        column-gap: 12px;
        row-gap: 3px;
        padding: 9px 44px 9px 14px;   /* rechts Platz für das Menü */
        gap: 3px 12px;
        align-items: center;
        min-height: 0;
    }

    .dash-projects.is-list .dash-proj-name,
    .dash-completed-list.is-list .dash-proj-name {
        grid-area: name;
        padding-left: 0;
        /* In der Liste hält bereits die Zeile selbst rechts Platz frei */
        padding-right: 0;
        font-size: 13.5px;
        line-height: 1.3;
    }

    .dash-projects.is-list .dash-proj-pct,
    .dash-completed-list.is-list .dash-proj-pct {
        grid-area: pct;
        align-self: center;
        padding-right: 0;
        font-size: 12px;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
    }

    .dash-projects.is-list .dash-proj-sub,
    .dash-completed-list.is-list .dash-proj-sub {
        grid-area: sub;
        padding-left: 0;
        font-size: 11px;
    }

    .dash-projects.is-list .dash-proj-bar,
    .dash-completed-list.is-list .dash-proj-bar {
        grid-area: bar;
        margin-left: 0;
        height: 3px;
        margin-top: 3px;
    }

    /* Menü mittig an der rechten Kante, auf Touch immer sichtbar */
    .dash-projects.is-list .dash-proj-more,
    .dash-completed-list.is-list .dash-proj-more {
        top: 50%;
        right: 8px;
        transform: translateY(-50%);
        opacity: 1;
    }

    /* Kein Anheben beim Berühren — auf Touch bleibt der Zustand sonst
       hängen und die Zeile wirkt verschoben. */
    .dash-projects.is-list .dash-proj:hover,
    .dash-completed-list.is-list .dash-proj:hover {
        transform: none;
    }

    /* Einladungs-Zeilen haben ein Schloss statt des Menüs */
    .dash-projects.is-list .dash-proj-pending-lock {
        top: 50%;
        transform: translateY(-50%);
    }

    /* Platzverteilung innerhalb der Projekte-Karte.
       Vorher belegte der Bereich „Erledigt" mehr Höhe als die aktiven
       Projekte (246px gegenüber 228px) — die abgeschlossenen Projekte
       verdrängten also genau das, worauf man täglich schaut. Der
       erledigte Bereich bekommt darum einen knappen Deckel und scrollt
       für sich; der frei werdende Platz geht an die aktive Liste,
       weil diese flex:1 hat. */
    .dash-completed-list { max-height: 132px; }
}

/* ═══════════════════════════════════════════════════════════════
   ERLEDIGT-ABZEICHEN auf der Projektkachel
   ───────────────────────────────────────────────────────────────
   Sitzt oben rechts. Der Weiter-Knopf (.dash-proj-more) steht dort
   ebenfalls, wird aber erst beim Überfahren sichtbar — auf einer
   erledigten Kachel rückt er deshalb um eine Breite nach links,
   damit sich beide nie überdecken.
   ═══════════════════════════════════════════════════════════════ */
.dash-proj-done {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 3;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--accent-blue);
    border: 2px solid #ffffff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
    pointer-events: none;   /* soll den Klick auf die Kachel nicht abfangen */
}
.dash-proj-done svg {
    width: 12px;
    height: 12px;
    fill: #ffffff;
}

/* Platz für das Abzeichen schaffen, sobald der Weiter-Knopf erscheint */
.dash-proj.is-completed .dash-proj-more { right: 36px; }

/* In der Listendarstellung (viele Projekte, schmaler Bildschirm) sitzt
   rechts bereits die Prozentzahl — dort rückt das Abzeichen etwas
   enger an den Rand, damit es die Zahl nicht überlagert. */
@media (max-width: 1024px) {
    .dash-projects.is-list .dash-proj-done,
    .dash-completed-list.is-list .dash-proj-done {
        top: 6px;
        right: 6px;
        width: 19px;
        height: 19px;
    }
    .dash-projects.is-list .dash-proj-done svg,
    .dash-completed-list.is-list .dash-proj-done svg { width: 10px; height: 10px; }
}