/* Freisicht Zeiterfassung. Handgeschrieben, weil es auf dem Server kein Node gibt. */

:root {
    color-scheme: light dark;

    --ton-grund: #fbfbfa;
    --ton-flaeche: #ffffff;
    --ton-rand: #e2e0dc;
    --ton-rand-stark: #c9c6c0;
    --ton-text: #23211e;
    --ton-text-leise: #6b675f;
    --ton-akzent: #1f5f4b;
    --ton-akzent-text: #ffffff;
    --ton-warnung: #8a4b12;
    --ton-warnung-grund: #fdf3e7;
    --ton-fehler: #9b2c2c;

    --radius: 8px;
    --spalt: 1rem;
    --tippziel: 2.75rem;
}

@media (prefers-color-scheme: dark) {
    :root {
        --ton-grund: #17181a;
        --ton-flaeche: #1f2124;
        --ton-rand: #33363b;
        --ton-rand-stark: #4a4e55;
        --ton-text: #e8e6e3;
        --ton-text-leise: #a09c96;
        --ton-akzent: #4ea88a;
        --ton-akzent-text: #10201a;
        --ton-warnung: #e0a86a;
        --ton-warnung-grund: #2e2519;
        --ton-fehler: #e08585;
    }
}

* { box-sizing: border-box; }

/* Verhindert, dass Alpine-Elemente vor dem Start kurz aufblitzen. */
[x-cloak] { display: none !important; }

body {
    margin: 0;
    background: var(--ton-grund);
    color: var(--ton-text);
    font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    -webkit-text-size-adjust: 100%;
}

a { color: var(--ton-akzent); }

/* --- Kopf und Navigation --- */

.kopf {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--ton-flaeche);
    border-bottom: 1px solid var(--ton-rand);
}

.kopf__innen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem var(--spalt);
    max-width: 60rem;
    margin: 0 auto;
    padding: 0.6rem var(--spalt);
}

/* Auf schmalen Schirmen rutscht die Navigation in eine zweite Zeile, statt
   abgeschnitten zu werden. */
@media (max-width: 30rem) {
    .kopf__innen .nav { order: 3; width: 100%; }
}

.kopf__marke {
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
    color: var(--ton-text);
    white-space: nowrap;
}

.nav {
    display: flex;
    gap: 0.25rem;
    overflow-x: auto;
    scrollbar-width: none;
}

.nav::-webkit-scrollbar { display: none; }

.nav a {
    padding: 0.45rem 0.7rem;
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--ton-text-leise);
    white-space: nowrap;
}

.nav a[aria-current="page"] {
    background: var(--ton-akzent);
    color: var(--ton-akzent-text);
}

/* --- Grundraster --- */

main {
    max-width: 60rem;
    margin: 0 auto;
    padding: var(--spalt);
}

.karte {
    background: var(--ton-flaeche);
    border: 1px solid var(--ton-rand);
    border-radius: var(--radius);
    padding: var(--spalt);
    margin-bottom: var(--spalt);
}

h1 { font-size: 1.35rem; margin: 0 0 var(--spalt); }
h2 { font-size: 1.05rem; margin: 0 0 0.6rem; }

.leise { color: var(--ton-text-leise); }
.klein { font-size: 0.85rem; }
.rechts { text-align: right; }
.zahl { font-variant-numeric: tabular-nums; }

/* --- Formulare --- */

.feld { margin-bottom: 0.85rem; }

.feld > label {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 0.85rem;
    color: var(--ton-text-leise);
}

input, select, textarea, button {
    font: inherit;
    color: inherit;
}

input[type="text"],
input[type="date"],
input[type="email"],
input[type="password"],
input[type="search"],
select,
textarea {
    width: 100%;
    min-height: var(--tippziel);
    padding: 0.5rem 0.65rem;
    background: var(--ton-grund);
    border: 1px solid var(--ton-rand-stark);
    border-radius: var(--radius);
}

textarea { min-height: 4.5rem; resize: vertical; }

input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible {
    outline: 2px solid var(--ton-akzent);
    outline-offset: 1px;
}

button, .knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: var(--tippziel);
    padding: 0.5rem 1rem;
    background: var(--ton-akzent);
    color: var(--ton-akzent-text);
    border: 1px solid transparent;
    border-radius: var(--radius);
    text-decoration: none;
    cursor: pointer;
}

button:disabled { opacity: 0.5; cursor: default; }

.knopf--leise, button.leise {
    background: transparent;
    color: var(--ton-text-leise);
    border-color: var(--ton-rand-stark);
}

.knopf--gefahr {
    background: transparent;
    color: var(--ton-fehler);
    border-color: var(--ton-rand-stark);
}

.feldfehler {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.85rem;
    color: var(--ton-fehler);
}

.hinweis {
    padding: 0.6rem 0.8rem;
    margin-bottom: var(--spalt);
    border-radius: var(--radius);
    background: var(--ton-warnung-grund);
    color: var(--ton-warnung);
    border: 1px solid currentColor;
}

.melder {
    padding: 0.6rem 0.8rem;
    margin-bottom: var(--spalt);
    border-radius: var(--radius);
    background: var(--ton-akzent);
    color: var(--ton-akzent-text);
}

/* Zwei Felder nebeneinander, sobald Platz da ist. */
.reihe {
    display: grid;
    gap: 0 0.75rem;
    grid-template-columns: 1fr;
}

@media (min-width: 34rem) {
    .reihe { grid-template-columns: repeat(var(--spalten, 2), 1fr); }
}

/* --- Suchfeld mit Vorschlagsliste --- */

.suche { position: relative; }

.suche__liste {
    position: absolute;
    z-index: 20;
    left: 0;
    right: 0;
    max-height: 15rem;
    overflow-y: auto;
    margin: 0.2rem 0 0;
    padding: 0;
    list-style: none;
    background: var(--ton-flaeche);
    border: 1px solid var(--ton-rand-stark);
    border-radius: var(--radius);
    box-shadow: 0 6px 20px rgb(0 0 0 / 0.12);
}

.suche__liste li { border-bottom: 1px solid var(--ton-rand); }
.suche__liste li:last-child { border-bottom: 0; }

.suche__liste button {
    width: 100%;
    justify-content: flex-start;
    text-align: left;
    background: transparent;
    color: var(--ton-text);
    border-radius: 0;
}

.suche__liste button:hover { background: var(--ton-grund); }
.suche__liste .leise { color: var(--ton-text-leise); }

/* --- Einträge --- */

.eintraege { display: flex; flex-direction: column; gap: 0.5rem; }

.eintrag {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.15rem 0.75rem;
    padding: 0.7rem;
    background: var(--ton-grund);
    border: 1px solid var(--ton-rand);
    border-radius: var(--radius);
}

.eintrag__titel { font-weight: 500; }
.eintrag__dauer { font-variant-numeric: tabular-nums; white-space: nowrap; }
.eintrag__notiz { grid-column: 1 / -1; color: var(--ton-text-leise); font-size: 0.9rem; }
.eintrag__werkzeuge { grid-column: 1 / -1; display: flex; gap: 0.4rem; margin-top: 0.4rem; }
.eintrag__werkzeuge button { min-height: 2.25rem; padding: 0.3rem 0.7rem; font-size: 0.85rem; }
.eintrag--abgerechnet { opacity: 0.75; border-style: dashed; }

.summe {
    display: flex;
    justify-content: space-between;
    padding-top: 0.7rem;
    margin-top: 0.7rem;
    border-top: 1px solid var(--ton-rand);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* --- Tabelle, die auf schmalen Schirmen scrollt --- */

.tabellenrahmen { overflow-x: auto; }

table { width: 100%; border-collapse: collapse; }
th, td { padding: 0.5rem 0.6rem; text-align: left; border-bottom: 1px solid var(--ton-rand); }
th { font-size: 0.8rem; color: var(--ton-text-leise); font-weight: 600; }
td.zahl, th.zahl { text-align: right; font-variant-numeric: tabular-nums; }

/* --- Anmeldung --- */

.anmeldung { max-width: 22rem; margin: 4rem auto; }

/* Livewire blendet das während laufender Anfragen ein. */
[wire\:loading] { opacity: 0.6; }