/* ═══════════════════════════════════════════════════════════════
   gantt_mobile_view.css — iplanlane Mobile (Listen-Ansicht)
   ───────────────────────────────────────────────────────────────
   Moderne To-Do-Listen-Darstellung für Smartphone-Hochformat.
   ═══════════════════════════════════════════════════════════════ */

/* ── Desktop verstecken wenn aktiv ────────────────────────────── */
.gmv-active .gantt-container { display: none !important; }
.gmv-active header.glass-card { display: none !important; }
.gmv-active .legal-footer    { display: none !important; }
.gmv-active .app-layout {
    gap: 0 !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
}

/* Der Nullrand gilt NUR in der Planung.
   ────────────────────────────────────────────────────────────────
   Dort liegt #gmv-root fest über der ganzen Fläche und bringt seinen
   eigenen Geräterand mit — die Hülle darunter braucht keinen.

   Vorher stand hier `padding: 0 !important` ohne Einschränkung auf die
   Ansicht. Das war folgenreich, weil `gmv-active` NICHT beim Verlassen
   der Planung abfällt: shouldActivate() prüft nur Bildschirmbreite und
   ob ein Diagramm-Container im Baum liegt — beides gilt in Übersicht
   und Kalender genauso. Der Rand fiel also in ALLEN Ansichten weg, und
   die erste Kachel begann fünf Pixel unter der Statusleiste. Auf
   Android hielt das System sie frei, auf iOS nicht. */
body.gmv-active.view-gantt .app-layout { padding: 0 !important; }

#gmv-root { display: none; }
.gmv-active #gmv-root {
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0;
    z-index: 200;
    /* Glass-Mode: KEIN eigener Hintergrund — Body-Hintergrund scheint durch */
    background: transparent;
    color: #fff;
    overscroll-behavior: contain;
    padding-top: var(--sa-top);
}
[data-theme="white"] .gmv-active #gmv-root {
    background: #F2F4F8;
    color: #1A1A2E;
}
[data-theme="dark"] .gmv-active #gmv-root {
    background: #0D1117;
    color: #E8EAF0;
}

/* ── TOP-BAR ──────────────────────────────────────────────────── */
.gmv-topbar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 8px;
    gap: 10px;
background: #594e674d;
}
.gmv-plan-name {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.4px;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}
[data-theme="white"] .gmv-plan-name { color: #1A1A2E; }
[data-theme="dark"] .gmv-plan-name  { color: #E8EAF0; }

.gmv-topbar-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.gmv-topbar-theme {
    display: none;
    gap: 2px;
    margin-left: 6px;
    padding: 3px;
    border-radius: 999px;
    background: rgba(255,255,255,0.16);
    backdrop-filter: blur(10px);
}
[data-theme="white"] .gmv-topbar-theme { background: rgba(0,0,0,0.06); }
[data-theme="dark"] .gmv-topbar-theme  { background: rgba(255,255,255,0.06); }
.gmv-topbar-theme .theme-btn {
    width: 26px; height: 26px;
    border: none; background: transparent;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    color: #fff;
    opacity: 0.65;
    transition: opacity 0.15s, background 0.15s;
}
[data-theme="white"] .gmv-topbar-theme .theme-btn { color: #1A1A2E; }
[data-theme="dark"] .gmv-topbar-theme .theme-btn  { color: #E8EAF0; }
.gmv-topbar-theme .theme-btn svg { width: 14px; height: 14px; fill: currentColor; }
.gmv-topbar-theme .theme-btn.active { opacity: 1; background: rgba(255,255,255,0.22); }
[data-theme="white"] .gmv-topbar-theme .theme-btn.active { background: rgba(0,0,0,0.10); }
[data-theme="dark"] .gmv-topbar-theme .theme-btn.active  { background: rgba(255,255,255,0.12); }

.gmv-kw-iconbtn {
    width: 32px; height: 32px;
    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,0.16);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s, opacity 0.15s;
    backdrop-filter: blur(10px);
}
[data-theme="white"] .gmv-kw-iconbtn { background: rgba(0,0,0,0.06); color: #1A1A2E; }
[data-theme="dark"] .gmv-kw-iconbtn  { background: rgba(255,255,255,0.08); color: #E8EAF0; }
.gmv-kw-iconbtn svg {
    width: 15px; height: 15px;
    fill: currentColor;
    pointer-events: none;
}
.gmv-kw-iconbtn:active { transform: scale(0.92); }
.gmv-kw-iconbtn.is-disabled { opacity: 0.32; pointer-events: none; }

/* ── LOCK-BANNER (wenn gesperrt) ──────────────────────────────── */
.gmv-lock-banner {
    margin: 0 16px 6px;
    padding: 7px 12px;
    background: rgba(255, 80, 80, 0.18);
    border: 1px solid rgba(255, 80, 80, 0.35);
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.4px;
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
[data-theme="white"] .gmv-lock-banner { color: #b00020; background: rgba(255,80,80,0.10); }

/* ── LIST META (Zähler + Filter-Pills) ────────────────────────── */
.gmv-list-meta {
    flex-shrink: 0;
    padding: 6px 16px 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
border-bottom: #d4d4e3 solid 3px;
}
.gmv-list-meta-count {
    font-size: 13px;
    font-weight: 600;
    opacity: 0.75;
    letter-spacing: -0.1px;
}

/* Horizontale Zeile: Filter-Pills (scrollbar) links, Export-Button rechts */
.gmv-meta-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.gmv-list-filter {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex: 1 1 auto;
    min-width: 0;
}
.gmv-list-filter::-webkit-scrollbar { display: none; }

/* Export-Button — gleicher Look wie die anderen Glass-IconButtons */
.gmv-export-btn {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: rgba(0,0,0,0.16);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
    backdrop-filter: blur(10px);
    -webkit-tap-highlight-color: transparent;
    padding: 0;
}
.gmv-export-btn svg {
    width: 16px; height: 16px;
    fill: currentColor;
    pointer-events: none;
}
.gmv-export-btn:active { transform: scale(0.92); background: rgba(0,0,0,0.24); }

[data-theme="white"] .gmv-export-btn {
    background: rgba(0,0,0,0.06);
    color: #1A1A2E;
}
[data-theme="white"] .gmv-export-btn:active { background: rgba(0,0,0,0.12); }
[data-theme="dark"] .gmv-export-btn {
    background: rgba(255,255,255,0.08);
    color: #E8EAF0;
}
[data-theme="dark"] .gmv-export-btn:active { background: rgba(255,255,255,0.14); }

/* KI-Button — links vom Export. Akzentuiert mit accent-blue,
   damit er sich als "Special Feature"-Aktion abhebt. */
.gmv-ai-btn {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--accent-blue) 80%, white) 0%,
            var(--accent-blue) 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.2s, filter 0.15s;
    box-shadow:
        0 2px 8px color-mix(in srgb, var(--accent-blue) 35%, transparent),
        inset 0 1px 0 rgba(255,255,255,0.25);
    -webkit-tap-highlight-color: transparent;
    padding: 0;
    position: relative;
}
.gmv-ai-btn svg {
    width: 16px; height: 16px;
    fill: currentColor;
    pointer-events: none;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.18));
}
.gmv-ai-btn:active {
    transform: scale(0.92);
    filter: brightness(0.92);
}
.gmv-filter-pill {
    flex-shrink: 0;
    padding: 6px 14px;
    border-radius: 999px;
    border: none;
    background: rgba(255,255,255,0.14);
    color: rgba(255,255,255,0.85);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, transform 0.1s;
    backdrop-filter: blur(8px);
}
[data-theme="white"] .gmv-filter-pill { background: rgba(0,0,0,0.05); color: rgba(26,26,46,0.7); }
[data-theme="dark"] .gmv-filter-pill  { background: rgba(255,255,255,0.06); color: rgba(232,234,240,0.7); }
.gmv-filter-pill.active {
    background: #fff;
    color: var(--accent-blue);
}
[data-theme="white"] .gmv-filter-pill.active { background: #1A1A2E; color: #fff; }
[data-theme="dark"] .gmv-filter-pill.active  { background: #E8EAF0; color: #0D1117; }
.gmv-filter-pill:active { transform: scale(0.96); }

/* ── LIST-WRAP (scrollbar) ────────────────────────────────────── */
.gmv-list-wrap {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    /* unten genügend Platz für die fixe Bottom-Nav (+ Safe-Area), damit die
       letzte Aufgabe nicht hinter der Leiste abgeschnitten wird */
    padding: 10px 12px calc(120px + env(safe-area-inset-bottom, 0px));
    position: relative;
	background: #bfb2cf9e;
}
.gmv-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
}

[data-theme="white"] .gmv-list-wrap { background: none; }
[data-theme="dark"] .gmv-list-wrap  { background: none; }

/* ── EMPTY STATE ──────────────────────────────────────────────── */
.gmv-empty-state {
    text-align: center;
    padding: 60px 30px 30px;
    color: rgba(255,255,255,0.85);
}
[data-theme="white"] .gmv-empty-state { color: rgba(26,26,46,0.8); }
[data-theme="dark"] .gmv-empty-state  { color: rgba(232,234,240,0.8); }
.gmv-empty-icon {
    width: 64px; height: 64px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: rgba(255,255,255,0.16);
    display: flex; align-items: center; justify-content: center;
    color: #fff;
}
[data-theme="white"] .gmv-empty-icon { background: color-mix(in srgb, var(--accent-blue) 10%, transparent); color: var(--accent-blue); }
[data-theme="dark"] .gmv-empty-icon  { background: rgba(255,255,255,0.06); color: #E8EAF0; }
.gmv-empty-icon svg { width: 32px; height: 32px; }
.gmv-empty-title {
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 6px;
    letter-spacing: -0.2px;
}
.gmv-empty-sub {
    font-size: 13px;
    opacity: 0.7;
    line-height: 1.4;
}

/* ════════════════════════════════════════════════════════════════
   ROW — Eine Aufgabe (Hauptzeile + ausklappbare Todo-Liste)
   ════════════════════════════════════════════════════════════════ */
.gmv-row {
    position: relative;
    background: rgba(255,255,255,0.96);
    border-radius: 14px;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.5) inset,
        0 4px 14px rgba(0,0,0,0.10);
    overflow: hidden;
    transition: transform 0.18s cubic-bezier(.2,.8,.2,1),
                box-shadow 0.18s,
                opacity 0.25s;
    color: #1A1A2E;
}
[data-theme="dark"] .gmv-row {
    background: #1C2333;
    color: #E8EAF0;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.04) inset,
        0 4px 14px rgba(0,0,0,0.30);
}
.gmv-row.is-completed {
    opacity: 0.55;
}
.gmv-row.is-dragging {
    box-shadow: 0 18px 40px rgba(0,0,0,0.30);
    transform: scale(1.02);
    z-index: 50;
}
.gmv-row-placeholder {
    background: rgba(255,255,255,0.06);
    border: 2px dashed rgba(255,255,255,0.30);
    border-radius: 14px;
    margin: 0;
}
[data-theme="white"] .gmv-row-placeholder { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.12); }
[data-theme="dark"] .gmv-row-placeholder  { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.12); }

/* Während Drag: Scrollen sperren */
body.gmv-dragging { overflow: hidden; }
body.gmv-dragging .gmv-list-wrap { touch-action: none; }

/* HAUPTZEILE — feste Mindesthöhe für gleiche Optik bei allen Zeilen.
   Bei sehr langem Titel wächst die Zeile durch das Umbrechen,
   alle anderen Zeilen bleiben aber identisch hoch. */
.gmv-row-main {
    position: relative;
    display: grid;
    grid-template-columns: 6px 36px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 12px 14px 12px 0;
    min-height: 70px;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* Farbiger Streifen links */
.gmv-row-color {
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 10px;
    width: 6px;
    background: var(--task-color);
    border-radius: 0 4px 4px 0;
    pointer-events: none;
}
.gmv-row.is-group .gmv-row-color {
    background: linear-gradient(180deg, var(--task-color) 0%, color-mix(in srgb, var(--task-color) 70%, transparent) 100%);
    width: 8px;
}

/* Check-Kreis */
.gmv-row-check {
    grid-column: 2;
    width: 28px;
    height: 28px;
    margin-left: 3px;
    border-radius: 50%;
    border: 2px solid rgba(26,26,46,0.20);
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: background 0.18s, border-color 0.18s, transform 0.18s;
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
    padding: 0;
}
[data-theme="dark"] .gmv-row-check { border-color: rgba(232,234,240,0.30); }
.gmv-row-check:active { transform: scale(0.86); }
.gmv-row-check.just-toggled {
    animation: gmvCheckPop 0.32s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes gmvCheckPop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.18); }
    100% { transform: scale(1); }
}
.gmv-row.is-completed .gmv-row-check {
    background: var(--task-color);
    border-color: var(--task-color);
}
.gmv-row.is-completed .gmv-row-check svg {
    filter: drop-shadow(0 0 1px rgba(0,0,0,0.20));
}

/* Body: Titel + Untertitel */
.gmv-row-body {
    grid-column: 3;
    min-width: 0;
    cursor: pointer;
    padding: 2px 0;
}
.gmv-row-title {
    font-size: 15.5px;
    font-weight: 600;
    line-height: 1.32;
    letter-spacing: -0.1px;
    color: inherit;
    /* Lange Titel werden mit … abgeschnitten — voller Titel ist im Detail-Sheet sichtbar */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.gmv-row.is-completed .gmv-row-title {
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
    text-decoration-color: rgba(26,26,46,0.45);
}
[data-theme="dark"] .gmv-row.is-completed .gmv-row-title {
    text-decoration-color: rgba(232,234,240,0.45);
}

.gmv-row-sub {
    margin-top: 4px;
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    align-items: center;
    font-size: 12px;
    color: rgba(26,26,46,0.55);
    line-height: 1.2;
    min-width: 0;
    overflow: hidden;
}
[data-theme="dark"] .gmv-row-sub { color: rgba(232,234,240,0.55); }
.gmv-row.is-completed .gmv-row-sub { text-decoration: line-through; }

.gmv-row-date {
    font-weight: 600;
    color: rgba(26,26,46,0.70);
    white-space: nowrap;
}
[data-theme="dark"] .gmv-row-date { color: rgba(232,234,240,0.72); }

.gmv-row-assigned {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(0,0,0,0.05);
    font-weight: 600;
    font-size: 11px;
    color: rgba(26,26,46,0.65);
    white-space: nowrap;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
[data-theme="dark"] .gmv-row-assigned {
    background: rgba(255,255,255,0.08);
    color: rgba(232,234,240,0.75);
}
.gmv-row-assigned svg {
    flex-shrink: 0;
    opacity: 0.7;
}

/* Chevron für Todos auf-/zuklappen — mit optionalem Counter */
.gmv-row-chevron {
    grid-column: 4;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border: none;
    background: rgba(0,0,0,0.04);
    border-radius: 16px;
    color: rgba(26,26,46,0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: pointer;
    transition: background 0.15s;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}
[data-theme="dark"] .gmv-row-chevron {
    background: rgba(255,255,255,0.06);
    color: rgba(232,234,240,0.65);
}
.gmv-row-chevron:active { background: rgba(0,0,0,0.10); }
.gmv-row-chevron svg {
    fill: currentColor;
    pointer-events: none;
    flex-shrink: 0;
    transition: transform 0.22s cubic-bezier(.2,.8,.2,1);
}
.gmv-row.is-expanded .gmv-row-chevron svg { transform: rotate(180deg); }
.gmv-row-chevron-count {
    pointer-events: none;
    color: rgba(26,26,46,0.70);
}
[data-theme="dark"] .gmv-row-chevron-count { color: rgba(232,234,240,0.80); }

/* ── AUFGEKLAPPTE TODO-LISTE ──────────────────────────────────── */
/* ─── Aufklapp-Animation ──────────────────────────────────────────
   Container-Animation via grid-template-rows 0fr → 1fr. Das umgebende
   .gmv-row-todos-wrap animiert seine Höhe sanft zur Inhaltshöhe.
   Die INNERE Liste hat ihr Padding NUR im aufgeklappten Zustand,
   damit eingeklappt nichts durchscheint und die Zeilenhöhe der
   Aufgabe nicht künstlich erhöht wird. */
.gmv-row-todos-wrap {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.32s cubic-bezier(.22,.8,.2,1);
}
.gmv-row.is-expanded .gmv-row-todos-wrap {
    grid-template-rows: 1fr;
}
.gmv-row-todos-wrap > .gmv-row-todos {
    overflow: hidden;
    min-height: 0;
}

.gmv-row-todos {
    list-style: none;
    margin: 0;
    /* WICHTIG: Padding NUR im aufgeklappten Zustand — sonst nimmt die Liste
       ständig Platz weg und die Aufgaben-Zeile wirkt höher. */
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-top: 0 solid rgba(0,0,0,0.05);
    /* Anker für absolut-positionierte Items beim Drag-Reorder */
    position: relative;
    transition: padding 0.28s cubic-bezier(.22,.8,.2,1),
                border-top-width 0.28s ease;
}
.gmv-row.is-expanded .gmv-row-todos {
    padding: 10px 14px 12px 50px;
    border-top: 1px solid rgba(0,0,0,0.05);
}
[data-theme="dark"] .gmv-row.is-expanded .gmv-row-todos {
    border-top-color: rgba(255,255,255,0.06);
}

/* Chevron: rotiert beim Aufklappen */
.gmv-row-chevron svg {
    transition: transform 0.28s cubic-bezier(.22,.8,.2,1);
}
.gmv-row.is-expanded .gmv-row-chevron svg {
    transform: rotate(180deg);
}

/* ─── Drag-Reorder: aktives Item + Platzhalter ──────────────────── */
.gmv-row-todo.is-dragging {
    background: rgba(255,255,255,0.94);
    box-shadow: 0 6px 20px rgba(0,0,0,0.18), 0 1px 2px rgba(0,0,0,0.08);
    border-radius: 10px;
    border-bottom-color: transparent;
    transform: scale(1.02);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    z-index: 40;
}
[data-theme="dark"] .gmv-row-todo.is-dragging {
    background: rgba(40,46,56,0.96);
    box-shadow: 0 6px 22px rgba(0,0,0,0.45);
}
.gmv-row-todo-placeholder {
    background: rgba(0,0,0,0.04);
    border-radius: 8px;
    border: 1.5px dashed rgba(0,0,0,0.12);
    list-style: none;
    transition: background 0.12s ease;
}
[data-theme="dark"] .gmv-row-todo-placeholder {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.12);
}

/* Während ein Todo gedragged wird: andere Items sanft animiert */
body.gmv-todo-dragging .gmv-row-todo:not(.is-dragging) {
    transition: transform 0.22s cubic-bezier(.2,.8,.2,1);
}

.gmv-row-todo {
    position: relative;
    overflow: hidden;            /* Aktionsleiste rechts verbergen, bis gewischt wird */
    border-radius: 8px;
    -webkit-tap-highlight-color: transparent;
    /* pan-y: vertikales Scrollen bleibt dem Browser; das horizontale Wischen
       übernehmen wir selbst (siehe _bindTodoItem → preventDefault). */
    touch-action: pan-y;
    -webkit-touch-callout: none;
    user-select: none;
    -webkit-user-select: none;
	border-bottom: 1px solid #0000001f;
}

/* Wischbare Ebene: Inhalt + Aktionen liegen nebeneinander und verschieben
   sich beim Wischen gemeinsam nach links. */
.gmv-row-todo-swipe {
    display: flex;
    align-items: stretch;
    transform: translateX(0);
    transition: transform 0.28s cubic-bezier(.22,.8,.2,1);
    will-change: transform;
    touch-action: pan-y;
}
/* Solange der Finger zieht: keine Transition, Bewegung folgt direkt dem Finger. */
.gmv-row-todo.is-swiping .gmv-row-todo-swipe {
    transition: none;
}

/* Inhalt nimmt IMMER die volle Zeilenbreite ein → die Aktionsleiste liegt
   rechts daneben außerhalb des sichtbaren Bereichs und wird durch
   overflow:hidden der .gmv-row-todo geklippt, bis nach links gewischt wird. */
.gmv-row-todo-content {
    flex: 0 0 100%;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 7px 4px;
    box-sizing: border-box;
    transition: background 0.15s;
}
.gmv-row-todo-content:active { background: rgba(0,0,0,0.03); }
[data-theme="dark"] .gmv-row-todo-content:active { background: rgba(255,255,255,0.04); }

.gmv-row-todo-check {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1.8px solid rgba(26,26,46,0.22);
    background: transparent;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-top: 1px;
    padding: 0;
    transition: background 0.18s, border-color 0.18s, transform 0.15s;
    -webkit-tap-highlight-color: transparent;
}
[data-theme="dark"] .gmv-row-todo-check { border-color: rgba(232,234,240,0.30); }
.gmv-row-todo-check:active { transform: scale(0.88); }
.gmv-row-todo.is-done .gmv-row-todo-check {
    background: var(--accent-blue);
    border-color: var(--task-color);
}

.gmv-row-todo-text {
    flex: 1;
    font-size: 14px;
    line-height: 1.4;
    color: rgba(26,26,46,0.88);
    word-break: break-word;
    padding-top: 2px;
}
[data-theme="dark"] .gmv-row-todo-text { color: rgba(232,234,240,0.90); }
.gmv-row-todo.is-done .gmv-row-todo-text {
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
    color: rgba(26,26,46,0.42);
}
[data-theme="dark"] .gmv-row-todo.is-done .gmv-row-todo-text {
    color: rgba(232,234,240,0.42);
}

[data-theme="dark"] .gmv-row-todo {
	border-bottom: 1px solid #ffffff1f;
}

/* ─── Aktionsleiste rechts (erscheint beim Wischen nach links) ──────────
   Zwei volle, farbige Flächen im iOS-Stil: Bearbeiten (blau) + Löschen (rot).
   Im Ruhezustand liegen sie rechts außerhalb der Zeile und sind durch
   overflow:hidden der .gmv-row-todo verborgen. */
.gmv-row-todo-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: stretch;     /* Flächen über die volle Zeilenhöhe */
}
.gmv-row-todo-edit,
.gmv-row-todo-delete {
    flex: 0 0 auto;
    width: 62px;
    border: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: filter 0.15s;
}
.gmv-row-todo-edit   { background: var(--accent-blue, #007AFF); }
.gmv-row-todo-delete { background: #ff3b30; }
.gmv-row-todo-edit:active,
.gmv-row-todo-delete:active { filter: brightness(0.86); }
[data-theme="dark"] .gmv-row-todo-delete { background: #ff453a; }

@keyframes gmvFadeInRight {
    from { opacity: 0; transform: translateX(6px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* ─── Inline-Edit-Input (Doppeltipp auf Todo-Titel) ─────────────── */
.gmv-row-todo-edit-input {
    flex: 1;
    font-size: 14px;
    line-height: 1.4;
    color: rgba(26,26,46,0.92);
    background: rgba(0,0,0,0.04);
    border: 1.5px solid var(--accent-blue, #007AFF);
    border-radius: 7px;
    padding: 4px 8px;
    font-family: inherit;
    outline: none;
    width: 100%;
    min-width: 0;
}
[data-theme="dark"] .gmv-row-todo-edit-input {
    color: rgba(232,234,240,0.95);
    background: rgba(255,255,255,0.06);
    border-color: var(--accent-blue, #4A90E2);
}
.gmv-row-todo.is-editing {
    background: rgba(0,0,0,0.02);
    border-radius: 8px;
}
.gmv-row-todo.is-editing .gmv-row-todo-content { background: transparent; }
[data-theme="dark"] .gmv-row-todo.is-editing {
    background: rgba(255,255,255,0.03);
}

/* ─── Add-Zeile (Unteraufgabe hinzufügen) ──────────────────────── */
.gmv-row-todo-add {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 4px;
    border-radius: 8px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    -webkit-touch-callout: none;
    user-select: none;
    -webkit-user-select: none;
    color: rgba(26,26,46,0.50);
    transition: background 0.15s, color 0.15s;
    margin-top: 2px;
}
.gmv-row-todo-add:hover { color: rgba(26,26,46,0.80); }
.gmv-row-todo-add:active { background: rgba(0,0,0,0.04); }
[data-theme="dark"] .gmv-row-todo-add { color: rgba(232,234,240,0.50); }
[data-theme="dark"] .gmv-row-todo-add:hover { color: rgba(232,234,240,0.80); }
[data-theme="dark"] .gmv-row-todo-add:active { background: rgba(255,255,255,0.05); }

.gmv-row-todo-add-icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1.8px dashed rgba(26,26,46,0.30);
    display: flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    transition: border-color 0.18s, border-style 0.18s;
}
[data-theme="dark"] .gmv-row-todo-add-icon { border-color: rgba(232,234,240,0.30); }
.gmv-row-todo-add:hover .gmv-row-todo-add-icon,
.gmv-row-todo-add.is-editing .gmv-row-todo-add-icon {
    border-style: solid;
    border-color: var(--accent-blue, #007AFF);
    color: var(--accent-blue, #007AFF);
}
.gmv-row-todo-add-label {
    font-size: 13.5px;
    font-weight: 500;
    color: inherit;
}

/* Edit-Modus der Add-Zeile (Input statt Label) */
.gmv-row-todo-add.is-editing {
    background: rgba(0,0,0,0.02);
    cursor: text;
}
[data-theme="dark"] .gmv-row-todo-add.is-editing {
    background: rgba(255,255,255,0.03);
}
.gmv-row-todo-add-input {
    flex: 1;
    font-size: 14px;
    line-height: 1.4;
    color: rgba(26,26,46,0.92);
    background: transparent;
    border: none;
    outline: none;
    font-family: inherit;
    padding: 2px 0;
    min-width: 0;
}
[data-theme="dark"] .gmv-row-todo-add-input { color: rgba(232,234,240,0.95); }
.gmv-row-todo-add-input::placeholder {
    color: rgba(26,26,46,0.40);
}
[data-theme="dark"] .gmv-row-todo-add-input::placeholder {
    color: rgba(232,234,240,0.40);
}
.gmv-row-todo-add-cancel {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    background: rgba(0,0,0,0.06);
    color: rgba(26,26,46,0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.18s, transform 0.15s;
}
.gmv-row-todo-add-cancel:active { transform: scale(0.88); }
[data-theme="dark"] .gmv-row-todo-add-cancel {
    background: rgba(255,255,255,0.10);
    color: rgba(232,234,240,0.65);
}

/* Während ein Todo gedragged wird: Add-Zeile ausblenden, damit sie nicht
   verschiebbar wirkt und das gezogene Item nicht hinter ihr landet. */
.gmv-row-todo-add.is-hidden-during-drag {
    display: none;
}

/* ════════════════════════════════════════════════════════════════
   DETAIL-SHEET (Bottom Sheet, bleibt wie vorher)
   ════════════════════════════════════════════════════════════════ */
.gmv-detail-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.40);
    z-index: 220;
    display: none;
    opacity: 0;
    transition: opacity 0.25s ease;
}
.gmv-detail-overlay.show { display: block; opacity: 1; }

.gmv-detail-sheet {
    position: fixed;
    left: 8px;
    right: 8px;
    bottom: calc(8px + 76px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.25);
    z-index: 230;
    padding: 22px 22px 18px;
    transform: translateY(20px) scale(0.97);
    opacity: 0;
    transition: transform 0.28s cubic-bezier(.2,.8,.2,1), opacity 0.20s;
    display: none;
    color: #1A1A2E;
    max-height: calc(100vh - 90px - env(safe-area-inset-bottom, 0px) - 24px);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}
.gmv-detail-sheet.show {
    transform: translateY(0) scale(1);
    opacity: 1;
}
[data-theme="dark"] .gmv-detail-sheet {
    background: rgba(28, 35, 51, 0.98);
    color: #E8EAF0;
}

.gmv-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 16px;
    padding-left: 12px;
    border-left: 4px solid var(--task-color);
}
.gmv-detail-title {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.2px;
    color: inherit;
    word-break: break-word;
    flex: 1;
}
.gmv-detail-close {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.06);
    color: rgba(26,26,46,0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-top: -2px;
}
[data-theme="dark"] .gmv-detail-close {
    background: rgba(255,255,255,0.08);
    color: rgba(232,234,240,0.65);
}

.gmv-detail-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 16px;
    margin-bottom: 16px;
}
.gmv-detail-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.gmv-detail-field.full { grid-column: 1 / -1; }
.gmv-detail-label {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: rgba(26,26,46,0.50);
}
[data-theme="dark"] .gmv-detail-label { color: rgba(232,234,240,0.50); }
.gmv-detail-value {
    font-size: 14px;
    font-weight: 600;
    color: inherit;
}

.gmv-detail-notes {
    background: rgba(0,0,0,0.04);
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 13.5px;
    line-height: 1.5;
    margin-bottom: 16px;
    white-space: pre-wrap;
    word-break: break-word;
    color: inherit;
}
[data-theme="dark"] .gmv-detail-notes { background: rgba(255,255,255,0.05); }

.gmv-detail-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    position: sticky;
    bottom: 0;
    background: rgba(255,255,255,0.98);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding-top: 8px;
    margin: 0 -22px -18px;
    padding-left: 22px;
    padding-right: 22px;
    padding-bottom: 18px;
}
[data-theme="dark"] .gmv-detail-actions { background: rgba(28, 35, 51, 0.98); }

.gmv-detail-action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px;
    border: none;
    border-radius: 12px;
    background: var(--accent-blue);
    color: #FFFFFF;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
    -webkit-tap-highlight-color: transparent;
}
.gmv-detail-action svg {
    width: 16px; height: 16px;
    fill: currentColor;
    flex-shrink: 0;
}
.gmv-detail-action:active {
    background: color-mix(in srgb, var(--accent-blue) 18%, transparent);
    transform: scale(0.97);
}
.gmv-detail-action.danger {
    background: rgba(255, 59, 48, 0.10);
    color: #ff3b30;
}
.gmv-detail-action.danger:active { background: rgba(255, 59, 48, 0.20); }

/* ════════════════════════════════════════════════════════════════
   BOTTOM-BAR
   ════════════════════════════════════════════════════════════════ */
.gmv-bottombar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 210;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    color: #1A1A2E;
}
[data-theme="white"] .gmv-bottombar {
    background: rgba(255, 255, 255, 0.95);
    color: #1A1A2E;
}
[data-theme="dark"] .gmv-bottombar {
    background: rgba(13, 17, 23, 0.92);
    color: #E8EAF0;
    border-top-color: rgba(255, 255, 255, 0.06);
}

.gmv-bb-btn {
    flex: 1;
    max-width: 70px;
    height: 56px;
    border: none;
    background: transparent;
    color: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: -0.1px;
    position: relative;
    -webkit-tap-highlight-color: transparent;
}
.gmv-bb-btn svg { width: 20px; height: 20px; fill: currentColor; pointer-events: none; }
.gmv-bb-btn:active { background: rgba(0, 0, 0, 0.06); transform: scale(0.96); }
[data-theme="dark"] .gmv-bb-btn:active { background: rgba(255, 255, 255, 0.08); }

.gmv-bb-btn.gmv-bb-add {
    background: var(--accent-blue);
    color: #fff;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    flex: none;
    transform: translateY(-2px);
}
.gmv-bb-btn.gmv-bb-add svg { width: 26px; height: 26px; }
.gmv-bb-btn.gmv-bb-add:active {
    transform: translateY(-2px) scale(0.92);
    background: linear-gradient(135deg, var(--accent-blue) 0%, color-mix(in srgb, var(--accent-blue) 65%, black) 100%);
}

.gmv-bb-btn.gmv-bb-logout { color: #ff3b30; }
.gmv-bb-btn.gmv-bb-logout:active { background: rgba(255, 59, 48, 0.08); }
[data-theme="dark"] .gmv-bb-btn.gmv-bb-logout { color: #FF453A; }
.gmv-bb-btn.gmv-bb-login { color: #34C759; }
.gmv-bb-btn.gmv-bb-login:active { background: rgba(52, 199, 89, 0.10); }

.gmv-bb-badge {
    position: absolute;
    top: 4px;
    right: 8px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: #ff3b30;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* ════════════════════════════════════════════════════════════════
   PLANS-POPOVER
   ════════════════════════════════════════════════════════════════ */
.gmv-plans-popover {
    position: fixed;
    z-index: 240;
    background: transparent;
    display: none;
    opacity: 0;
    transform: translateY(8px) scale(0.96);
    transition: opacity 0.22s ease, transform 0.22s cubic-bezier(.2,.8,.2,1);
    pointer-events: none;
}
.gmv-plans-popover.show {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
.gmv-plans-popover-inner {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    border-radius: 14px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    color: #1A1A2E;
}
[data-theme="dark"] .gmv-plans-popover-inner {
    background: rgba(28, 35, 51, 0.98);
    color: #E8EAF0;
}
.gmv-plans-popover-header {
    padding: 12px 16px 8px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: rgba(26,26,46,0.5);
}
[data-theme="dark"] .gmv-plans-popover-header { color: rgba(205,213,224,0.5); }
.gmv-plans-popover-list {
    max-height: 50vh;
    overflow-y: auto;
}
.gmv-plan-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    cursor: pointer;
    transition: background 0.12s;
    -webkit-tap-highlight-color: transparent;
}
.gmv-plan-item:active { background: color-mix(in srgb, var(--accent-blue) 10%, transparent); }
.gmv-plan-item.active { background: color-mix(in srgb, var(--accent-blue) 6%, transparent); }
[data-theme="dark"] .gmv-plan-item.active { background: color-mix(in srgb, var(--accent-blue) 10%, transparent); }
.gmv-plan-item-icon { width: 16px; height: 16px; fill: rgba(26,26,46,0.6); flex-shrink: 0; }
[data-theme="dark"] .gmv-plan-item-icon { fill: rgba(232,234,240,0.6); }
.gmv-plan-item.active .gmv-plan-item-icon { fill: var(--accent-blue); }
.gmv-plan-item-name {
    flex: 1;
    font-size: 14.5px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gmv-plan-item.active .gmv-plan-item-name { color: var(--accent-blue); }
.gmv-plan-item-check { width: 16px; height: 16px; fill: var(--accent-blue); flex-shrink: 0; }
.gmv-plans-popover-empty {
    padding: 16px;
    text-align: center;
    color: rgba(26,26,46,0.45);
    font-size: 13px;
}
[data-theme="dark"] .gmv-plans-popover-empty { color: rgba(205,213,224,0.45); }
.gmv-plans-popover-new {
    width: 100%;
    padding: 12px 16px;
    background: transparent;
    border: none;
    border-top: 1px solid rgba(0,0,0,0.06);
    color: var(--accent-blue);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}
.gmv-plans-popover-new svg { width: 16px; height: 16px; fill: currentColor; }
.gmv-plans-popover-new:active { background: color-mix(in srgb, var(--accent-blue) 8%, transparent); }
[data-theme="dark"] .gmv-plans-popover-new { border-top-color: rgba(255,255,255,0.08); }
.gmv-plans-popover-arrow {
    position: absolute;
    bottom: -7px;
    width: 14px;
    height: 14px;
    background: rgba(255, 255, 255, 0.98);
    transform: rotate(45deg);
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.08);
}
[data-theme="dark"] .gmv-plans-popover-arrow {
    background: rgba(28, 35, 51, 0.98);
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.20);
}

/* ── Wenn gesperrt: + ausblenden ─────────────────────────────── */
.gmv-active.gs-locked-mobile .gmv-bb-add { display: none; }

/* ════════════════════════════════════════════════════════════════
   KOMPATIBILITÄT mit gantt_todos_popup_patch.css
   ────────────────────────────────────────────────────────────────
   Das Patch-File (gantt_todos_patch.js) erweitert das Detail-Sheet
   um Notizen-/Todos-Tabs (.gmv-detail-tabs etc.). Die Styles dazu
   kommen aus gantt_todos_popup_patch.css und passen auch zur neuen
   Listenansicht — sie werden hier nur leicht angepasst, damit sie
   in das überarbeitete Sheet-Padding passen.
   ════════════════════════════════════════════════════════════════ */
.gmv-detail-sheet .gmv-detail-tabs-wrap {
    margin: 0 0 14px 0;
}

/* ════════════════════════════════════════════════════════════════
   Confirm-Dialog (Unteraufgabe löschen)
   ──────────────────────────────────────────────────────────────── */
.gmv-confirm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.42);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    transition: opacity 0.18s ease;
}
.gmv-confirm-overlay.show {
    opacity: 1;
}
.gmv-confirm-box {
    background: rgba(255, 255, 255, 0.99);
    color: #1A1A2E;
    border-radius: 20px;
    padding: 24px 22px 18px;
    width: 100%;
    max-width: 340px;
    text-align: center;
    box-shadow: 0 16px 50px rgba(0, 0, 0, 0.30);
    transform: translateY(12px) scale(0.96);
    transition: transform 0.24s cubic-bezier(.2,.8,.2,1);
}
.gmv-confirm-overlay.show .gmv-confirm-box {
    transform: translateY(0) scale(1);
}
[data-theme="dark"] .gmv-confirm-box {
    background: rgba(28, 35, 51, 0.99);
    color: #E8EAF0;
}
.gmv-confirm-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: rgba(255, 59, 48, 0.12);
    color: rgb(255, 59, 48);
    display: flex;
    align-items: center;
    justify-content: center;
}
[data-theme="dark"] .gmv-confirm-icon {
    background: rgba(255, 99, 88, 0.18);
    color: rgb(255, 130, 122);
}
.gmv-confirm-title {
    font-size: 17px;
    font-weight: 700;
    margin: 0 0 6px;
    line-height: 1.3;
}
.gmv-confirm-text {
    font-size: 14px;
    line-height: 1.45;
    margin: 0 0 18px;
    color: rgba(26,26,46,0.65);
    word-break: break-word;
}
[data-theme="dark"] .gmv-confirm-text { color: rgba(232,234,240,0.65); }
.gmv-confirm-actions {
    display: flex;
    gap: 10px;
}
.gmv-confirm-btn {
    flex: 1;
    padding: 12px 16px;
    border: none;
    border-radius: 12px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: background 0.15s, transform 0.10s;
}
.gmv-confirm-btn:active { transform: scale(0.97); }
.gmv-confirm-cancel {
    background: rgba(0, 0, 0, 0.06);
    color: #1A1A2E;
}
.gmv-confirm-cancel:hover { background: rgba(0, 0, 0, 0.10); }
[data-theme="dark"] .gmv-confirm-cancel {
    background: rgba(255, 255, 255, 0.08);
    color: #E8EAF0;
}
[data-theme="dark"] .gmv-confirm-cancel:hover { background: rgba(255, 255, 255, 0.14); }
.gmv-confirm-delete {
    background: rgb(255, 59, 48);
    color: #fff;
}
.gmv-confirm-delete:hover { background: rgb(232, 51, 41); }