/* ═══════════════════════════════════════════════════════════════
   gantt_empty_state.css — iplanlane
   Fix: Leerer Gantt-Body hat Mindesthöhe + sichtbares Gitter.
   Der FAB-Button bleibt im .gantt-header, wird aber auch bei
   leerem Body vollständig sichtbar und anklickbar.

   Einbinden in index.php NACH gantt.css:
   <link rel="stylesheet" href="css/gantt_empty_state.css?v=1.0">
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. GANTT-BODY: Mindesthöhe damit der FAB immer sichtbar ist ─
   200px = genug Platz für den FAB (top:190% des 60px-Headers = 114px)
   plus etwas Luft darunter. Auf Mobile reicht 160px.            */
.gantt-body {
    min-height: 200px;
}

/* ── 2. LEERER ZUSTAND: Gitter-Hintergrund + Hinweistext ─────────
   Wenn keine .gantt-row vorhanden ist, zeigt .gantt-body den
   leeren Hintergrund. Das CSS-Gitter imitiert die Tages-Zellen.
   Der Hinweistext sitzt zentriert via Flexbox auf dem Body.      */
/* :empty UND .gantt-body-empty: erste Variante greift im allerersten
   Render-Tick (body wirklich leer), die zweite ab dem ersten Render
   (today-line-overlay ist schon angehängt → :empty trifft nicht mehr,
   aber JS setzt zuverlässig die Klasse, wenn app.state.tasks leer ist). */
.gantt-body:empty::before,
.gantt-body.gantt-body-empty::before {
    content: '';
    position: absolute;
    inset: 0;
    /* Vertikale Gitterlinien — gleiche Optik wie echte Tages-Zellen */
    background-image:
        repeating-linear-gradient(
            90deg,
            transparent 0px,
            transparent 44px,
            var(--theme-grid-line, rgba(255,255,255,0.10)) 44px,
            var(--theme-grid-line, rgba(255,255,255,0.10)) 45px
        );
    pointer-events: none;
    z-index: 0;
}

.gantt-body:empty::after,
.gantt-body.gantt-body-empty::after {
    content: 'Klicke auf  ＋  um die erste Aufgabe zu erstellen';
    position: absolute;
    /* Unterhalb des FAB-Buttons positionieren */
    top: calc(100% - 40px);      /* unterer Bereich des Body */
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-size: 13px;
    font-weight: 500;
    color: var(--theme-label-sub, rgba(29,29,31,0.45));
    letter-spacing: 0.2px;
    pointer-events: none;
    z-index: 1;
}

/* Hinweistext zentriert wenn Body groß genug */
@media (min-height: 300px) {
    .gantt-body:empty::after,
    .gantt-body.gantt-body-empty::after {
        top: 50%;
        transform: translate(-50%, 30px); /* etwas unterhalb der Mitte */
    }
}

/* ── 3. FAB OVERFLOW: gantt-header clippt den Button nicht ab ─────
   Der Header hat overflow:visible (Standard), aber der übergeordnete
   .gantt-container hat overflow-x:clip, was auch Y beeinflusst.
   Wir stellen sicher, dass der FAB-Bereich nach unten nicht
   abgeschnitten wird.                                             */
.gantt-container {
    overflow-x: clip;
    overflow-y: visible !important; /* FAB nach unten sichtbar lassen */
}

/* Der sticky Header braucht overflow:visible damit der FAB rausragt */
.gantt-header {
    overflow: visible !important;
}

/* ── 4. RESPONSIVE: Mobile FAB-Sichtbarkeit ─────────────────────
   Auf kleinen Bildschirmen etwas weniger Mindesthöhe,
   aber immer noch genug für den kleineren FAB (56px).            */
@media (max-width: 820px) {
    .gantt-body {
        min-height: 160px;
    }
}

@media (max-width: 600px) {
    .gantt-body {
        min-height: 140px;
    }

    /* Hinweistext kürzer auf kleinen Screens */
    .gantt-body:empty::after,
    .gantt-body.gantt-body-empty::after {
        content: 'Tippe auf  ＋  um eine Aufgabe zu erstellen';
        font-size: 12px;
        white-space: normal;
        text-align: center;
        width: 200px;
    }
}

/* ── 5. THEME-ANPASSUNGEN für den leeren Zustand ─────────────── */
[data-theme="white"] .gantt-body:empty::before,
[data-theme="white"] .gantt-body.gantt-body-empty::before {
    background-image:
        repeating-linear-gradient(
            90deg,
            transparent 0px,
            transparent 44px,
            rgba(0,0,0,0.06) 44px,
            rgba(0,0,0,0.06) 45px
        );
}

[data-theme="dark"] .gantt-body:empty::before,
[data-theme="dark"] .gantt-body.gantt-body-empty::before {
    background-image:
        repeating-linear-gradient(
            90deg,
            transparent 0px,
            transparent 44px,
            rgba(255,255,255,0.06) 44px,
            rgba(255,255,255,0.06) 45px
        );
}

[data-theme="white"] .gantt-body:empty::after,
[data-theme="white"] .gantt-body.gantt-body-empty::after {
    color: rgba(26,26,46,0.38);
}

[data-theme="dark"] .gantt-body:empty::after,
[data-theme="dark"] .gantt-body.gantt-body-empty::after {
    color: rgba(205,213,224,0.35);
}