/*
 * Plantafel – nur Struktur.
 *
 * Diese Datei wird VOR app.css eingebunden. Codex kann also alles hier
 * Gesetzte in app.css überschreiben, ohne diese Datei anfassen zu müssen.
 *
 * Enthalten ist nur, was die Tafel überhaupt funktionsfähig macht: das
 * Spaltenraster, die Lage der Balken und so viel Farbe, dass man Halteverbot
 * von Bauzeit unterscheiden kann. Alles Weitere ist Gestaltung.
 *
 * Das Raster kommt aus app.js: die Eigenschaft --plan-spalten setzt die
 * Spaltenbreiten, jeder Balken bekommt sein grid-column per style-Attribut.
 * Dadurch braucht es keine Pixelrechnerei und die Spalten bleiben ausgerichtet.
 */

.plantafel-huelle { overflow-x: auto; }

.plantafel {
    display: grid;
    grid-template-columns: var(--plan-spalten, 220px repeat(28, minmax(30px, 1fr)));
    align-items: center;
    min-width: max-content;
    row-gap: 4px;
}

/* Spaltenhintergründe liegen über die gesamte Höhe hinter den Balken. */
.plan-spalte {
    grid-row: 1 / -1;
    align-self: stretch;
    pointer-events: none;
}
.plan-spalte-wochenende { background: rgba(255, 255, 255, .035); }
.plan-spalte-heute      { background: rgba(255, 196, 0, .10); }

.plan-kopf-ecke,
.plan-kopf-tag,
.plan-zeile-titel {
    position: relative;
    z-index: 1;
}

.plan-kopf-monat {
    position: relative;
    z-index: 1;
    padding: 0 6px 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--yellow, #ffc400);
    white-space: nowrap;
}

.plan-kopf-tag {
    padding: 4px 2px 8px;
    text-align: center;
    font-size: 11px;
    line-height: 1.25;
    color: var(--muted, #a9afb7);
}
.plan-kopf-tag b { display: block; font-size: 13px; color: var(--text, #f4f3ee); }
.plan-kopf-tag.ist-heute b { color: var(--yellow, #ffc400); }

.plan-zeile-titel {
    padding: 6px 12px 6px 0;
    min-width: 0;
    font-size: 13px;
}
.plan-zeile-titel strong { display: block; }
.plan-zeile-titel small  { display: block; color: var(--muted, #a9afb7); font-size: 11px; }

/* Die Balken selbst. */
.plan-balken {
    position: relative;
    z-index: 2;
    min-height: 26px;
    display: flex;
    align-items: center;
    padding: 0 8px;
    border-radius: 6px;
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid transparent;
}

/* Halteverbot: die Zeit, in der die Schilder schon stehen, aber noch nichts
   passiert. Bewusst gestreift – es ist eine Vorbereitungsphase, keine Arbeit. */
.plan-balken-hv {
    color: #ffd76a;
    border-color: rgba(255, 196, 0, .45);
    background: repeating-linear-gradient(
        135deg,
        rgba(255, 196, 0, .22) 0 6px,
        rgba(255, 196, 0, .06) 6px 12px
    );
}

.plan-balken-bau {
    color: #111;
    background: var(--yellow, #ffc400);
    font-weight: 600;
}

/* Abgeholte Projekte sind erledigt und sollen nicht mehr ins Auge springen. */
.plan-balken-abgeholt { opacity: .45; }

.plan-leer {
    grid-column: 1 / -1;
    padding: 24px 0;
    text-align: center;
    color: var(--muted, #a9afb7);
    font-size: 14px;
}

/* Fristenleiste */
.fristenliste { margin: 0; padding: 0; list-style: none; }

.fristenliste li {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--line, rgba(255, 255, 255, .12));
    font-size: 14px;
    cursor: pointer;
}
.fristenliste li:last-child { border-bottom: 0; }

.frist-zeichen { flex: none; width: 18px; text-align: center; }
.frist-projekt { flex: none; color: var(--muted, #a9afb7); font-size: 12px; }
.frist-text    { min-width: 0; }

.frist-ueberfaellig .frist-zeichen { color: #ef3b2d; }
.frist-dringend    .frist-zeichen { color: #ffc400; }
.frist-hinweis     .frist-zeichen { color: #a9afb7; }

.plantafel-steuerung { display: flex; align-items: center; gap: 8px; }

.plan-legende {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
    margin: 0;
    padding: 14px 20px;
    color: var(--muted, #a9afb7);
    font-size: 12px;
}
.plan-legende i {
    display: inline-block;
    width: 22px;
    height: 12px;
    margin-right: 7px;
    border-radius: 3px;
    vertical-align: -1px;
}

/* ── Umschalter zwischen Auftrags- und Personalsicht ─────── */

.plan-umschalter {
    display: inline-flex;
    gap: 4px;
    margin-right: 6px;
}

/* ── Personalsicht ───────────────────────────────────────── */

/* Wer nichts zu tun hat, soll auffallen – das ist die Zahl, nach der die
   Disposition sucht. */
.plan-zeile-titel.ist-frei strong { opacity: .6; }

.plan-zeile-titel.ist-konflikt strong { color: #ef3b2d; }

/* Doppelbelegung: ein Tag, an dem jemand auf zwei Baustellen steht. Kein
   Fehler des Systems, sondern einer der Planung – und genau der fällt sonst
   erst morgens um sechs auf. */
.plan-konflikt {
    align-self: stretch;
    margin: 2px 1px;
    border-radius: 3px;
    border: 2px solid #ef3b2d;
    pointer-events: none;
}

.plan-legende i.plan-balken-konflikt {
    border: 2px solid #ef3b2d;
    background: transparent;
}

/* ── Einteilung im Projektformular ───────────────────────── */

.einteilung { display: flex; flex-direction: column; gap: 8px; }

.einteilung-zeilen { display: flex; flex-direction: column; gap: 6px; }

/* Person, von, bis, Art, Notiz, weg. Auf schmalen Geräten untereinander. */
.einteilung-zeile {
    display: grid;
    grid-template-columns: minmax(140px, 1.4fr) 140px 140px 130px minmax(120px, 1fr) 32px;
    gap: 6px;
    align-items: center;
}

.einteilung-zeile > select,
.einteilung-zeile > input { min-width: 0; }

.einteilung-weg {
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 6px;
    background: transparent;
    color: inherit;
    font: inherit;
    line-height: 1;
    cursor: pointer;
    opacity: .65;
}
.einteilung-weg:hover { opacity: 1; color: #ef3b2d; }

.einteilung-leer { margin: 0; font-size: 13px; opacity: .7; }

@media (max-width: 900px) {
    .einteilung-zeile { grid-template-columns: 1fr 1fr; }
    .einteilung-weg   { justify-self: end; }
}