/* Helle Palette. Die dunkle steht weiter unten und wird entweder von der
   Systemeinstellung oder vom Umschalter im Kopf aktiviert. */
:root {
    --rand: #d4d8de;
    --text: #1f2933;
    --gedaempft: #6b7280;
    --flaeche: #ffffff;
    --hintergrund: #f4f6f8;
    --warnung: #dc2626;
    --ziel: #eef4ff;
    --einsatz-rand: #94a3b8;

    /* Faerbt native Bedienelemente mit: Datums- und Zeitfelder, Auswahllisten,
       Bildlaufleisten. Ohne diese Zeile bleiben sie im Dunkelmodus grellweiss. */
    color-scheme: light;
}

/* Dunkle Palette. Bewusst kein reines Schwarz: Auf einer Baustelle wird das
   Display oft schraeg und bei Restlicht abgelesen, da traegt ein leicht
   aufgehellter Grund besser als maximaler Kontrast. */
@media (prefers-color-scheme: dark) {
    :root:not([data-thema="hell"]) {
        --rand: #3a4250;
        --text: #e6e9ee;
        --gedaempft: #9aa4b2;
        --flaeche: #1b2029;
        --hintergrund: #12161d;
        --warnung: #f87171;
        --ziel: #24313f;
        --einsatz-rand: #64748b;
        color-scheme: dark;
    }
}

/* Der Umschalter muss die Systemeinstellung in beide Richtungen ueberstimmen
   koennen, deshalb dieselben Werte noch einmal an data-thema gebunden. */
:root[data-thema="dunkel"] {
    --rand: #3a4250;
    --text: #e6e9ee;
    --gedaempft: #9aa4b2;
    --flaeche: #1b2029;
    --hintergrund: #12161d;
    --warnung: #f87171;
    --ziel: #24313f;
    --einsatz-rand: #64748b;
    color-scheme: dark;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    color: var(--text);
    background: var(--hintergrund);
}

.kopf {
    display: flex;
    align-items: center;
    /* Ohne Umbruch schiebt die Kopfzeile auf schmalen Geraeten Umschalter und
       Abmelden aus dem Bild und die ganze Seite scrollt quer. */
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    padding: 0.75rem 1.25rem;
    background: var(--flaeche);
    border-bottom: 1px solid var(--rand);
}

.marke { font-weight: 700; text-decoration: none; color: inherit; }
.kopf nav { display: flex; gap: 1rem; }
.kopf a { color: var(--text); }
.abmelden { display: flex; align-items: center; gap: 0.75rem; }

/* Schiebt Umschalter und Abmelden gemeinsam nach rechts, auch wenn auf der
   Anmeldeseite nur der Umschalter da ist. */
.kopf-rechts { margin-left: auto; display: flex; align-items: center; gap: 0.75rem; }

.thema-schalter {
    padding: 0.4rem 0.6rem;
    line-height: 1;
    font-size: 1rem;
}

/* Sichtbar nur fuer Vorleseprogramme: Das Symbol allein sagt nicht, was der
   Knopf tut. */
.nur-vorlesen {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

main { padding: 1.25rem; }

.anmeldung {
    max-width: 22rem;
    margin: 4rem auto;
    background: var(--flaeche);
    padding: 1.5rem;
    border: 1px solid var(--rand);
    border-radius: 0.5rem;
}

.anmeldung label { display: block; margin-bottom: 1rem; }
.anmeldung input { width: 100%; padding: 0.6rem; margin-top: 0.25rem; }

button {
    padding: 0.6rem 1rem;
    border: 1px solid var(--rand);
    border-radius: 0.375rem;
    background: var(--flaeche);
    cursor: pointer;
    font: inherit;
}

.fehler { color: var(--warnung); }
.hinweis { color: var(--gedaempft); font-size: 0.8rem; margin: -0.5rem 0 0.75rem; }
.hinweis a { color: inherit; }

.plantafel-kopf {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.plantafel-kopf h1 { font-size: 1.1rem; margin: 0; flex: 1; }

.plantafel-inhalt { display: flex; gap: 1rem; align-items: flex-start; }

.raster {
    flex: 1;
    display: grid;
    /* Erste Spalte die Mitarbeiternamen, danach die sieben Wochentage. */
    grid-template-columns: 10rem repeat(7, minmax(8rem, 1fr));
    gap: 1px;
    background: var(--rand);
    border: 1px solid var(--rand);
    overflow-x: auto;
    /* Die Spalten haben eine Mindestbreite, das Raster ist also breiter als ein
       Handydisplay. Ohne diese Zeile waechst es ueber seinen Platz hinaus und
       die ganze Seite scrollt quer, statt nur das Raster. */
    max-width: 100%;
}

.kopfzelle, .namenszelle, .tageszelle { background: var(--flaeche); padding: 0.5rem; }
.kopfzelle { font-weight: 600; font-size: 0.85rem; }
.namenszelle { font-weight: 600; }
.tageszelle { min-height: 5rem; display: flex; flex-direction: column; gap: 0.25rem; }
.tageszelle.ziel { background: var(--ziel); }

.einsatz {
    border: 1px solid var(--rand);
    border-left: 4px solid var(--einsatz-rand);
    border-radius: 0.25rem;
    padding: 0.35rem 0.5rem;
    background: var(--flaeche);
    font-size: 0.8rem;
    cursor: grab;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.einsatz.zieht { opacity: 0.4; }
.einsatz.ueberschneidung { outline: 2px solid var(--warnung); }
.einsatz .ort { color: var(--gedaempft); }

.zu-planen {
    width: 16rem;
    background: var(--flaeche);
    border: 1px solid var(--rand);
    border-radius: 0.5rem;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.zu-planen h2 { font-size: 0.95rem; margin: 0; }
.zu-planen.ziel { background: var(--ziel); }

dialog {
    border: 1px solid var(--rand);
    border-radius: 0.5rem;
    padding: 1.25rem;
    min-width: 22rem;
    background: var(--flaeche);
    color: var(--text);
}

dialog::backdrop { background: rgb(0 0 0 / 0.5); }
dialog label { display: block; margin-bottom: 0.75rem; }
dialog input, dialog select, dialog textarea { width: 100%; padding: 0.45rem; }
dialog input[readonly] { background: var(--hintergrund); color: var(--gedaempft); }
dialog .zeile { display: flex; gap: 0.5rem; }
dialog menu { display: flex; gap: 0.5rem; justify-content: flex-end; padding: 0; margin: 1rem 0 0; }

@media (max-width: 60rem) {
    .plantafel-inhalt { flex-direction: column; }
    .zu-planen { width: 100%; }

    /* Untereinander gestapelt wuerde flex: 1 das Raster in die Hoehe ziehen und
       die Zeilen leer auseinanderziehen. */
    .raster { flex: 0 0 auto; }
}

/* Handy. Der Wochenkalender bleibt ein Wochenkalender - er scrollt hier
   waagerecht in seinem eigenen Bereich. Die eigentliche mobile Ansicht fuer
   den Monteur kommt im naechsten Meilenstein. */
@media (max-width: 40rem) {
    .kopf { gap: 0.5rem 0.75rem; padding: 0.6rem 0.75rem; }
    .kopf nav { gap: 0.75rem; }
    main { padding: 0.75rem; }

    .plantafel-kopf { flex-wrap: wrap; }
    .plantafel-kopf h1 { flex-basis: 100%; order: -1; }

    /* Schmalere Spalten, damit neben den Namen mehr als anderthalb Tage ins
       Bild passen, und flachere Zeilen. */
    .raster { grid-template-columns: 5.5rem repeat(7, minmax(6.5rem, 1fr)); }
    .tageszelle { min-height: 3.5rem; }
    .namenszelle, .kopfzelle { font-size: 0.8rem; }

    /* In schmalen Spalten umbricht ein langer Titel auf mehrere Zeilen und
       zieht die ganze Rasterzeile in die Hoehe. Auf dem Handy je Angabe eine
       Zeile mit Auslassungspunkten - der vollstaendige Text steht im Dialog,
       den ein Tippen oeffnet. */
    .einsatz > * {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Fingerbedienung: Knoepfe brauchen eine anfassbare Hoehe. */
    button { min-height: 2.75rem; }
    .thema-schalter { min-height: 2.75rem; }

    dialog {
        /* min-width 22rem passt auf kein schmales Display - der Dialog lief
           rechts aus dem Bild. */
        min-width: 0;
        width: min(24rem, calc(100vw - 1rem));
        padding: 1rem;
    }

    dialog .zeile { flex-wrap: wrap; }
    dialog .zeile label { flex: 1 1 6rem; }
    dialog input, dialog select, dialog textarea { min-height: 2.5rem; }

    .kundenformular input { flex: 1 1 100%; }
}

.kundenformular { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.kundenformular input { padding: 0.45rem; }

.kunden table { width: 100%; border-collapse: collapse; background: var(--flaeche); }
.kunden th, .kunden td { text-align: left; padding: 0.5rem; border-bottom: 1px solid var(--rand); }