/*
 * Stilvorlage der Mitarbeiter-App (AD 4.3) - die Umsetzung der abgenommenen Runde
 * L (docs/app-web/mockups/mockups-l-layout.html). Von Hand, ohne Baulauf; die
 * Marke stammt unverändert aus dem Admin-Web bzw. website/src/styles/tokens.css.
 * Hell und dunkel nach dem einmal gelösten Muster: theme.js schreibt das Ergebnis
 * als html[data-theme], der dunkle Satz steht genau einmal.
 */

@font-face {
    font-family: "Montserrat Variable";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("assets/fonts/montserrat-latin-wght-normal.woff2") format("woff2-variations");
}
@font-face {
    font-family: Poppins; font-style: normal; font-weight: 400; font-display: swap;
    src: url("assets/fonts/poppins-latin-400-normal.woff2") format("woff2");
}
@font-face {
    font-family: Poppins; font-style: normal; font-weight: 600; font-display: swap;
    src: url("assets/fonts/poppins-latin-600-normal.woff2") format("woff2");
}
@font-face {
    font-family: Poppins; font-style: normal; font-weight: 700; font-display: swap;
    src: url("assets/fonts/poppins-latin-700-normal.woff2") format("woff2");
}

:root {
    color-scheme: light;

    --ink: #19242D; --storm: #4E7183; --silver: #D2D3D4;
    --green: #1CBA76; --green-deep: #0F7A4E;
    --midnight-soft: #223140; --storm-deep: #2F4552; --storm-soft: #88A2AF;
    --steel: #B4C3CC; --silver-soft: #F1F2F3;

    --amber: #8A5B0B; --amber-bg: #FBF1DC; --amber-line: #D9AE5E;
    --red: #A83228;   --red-bg: #FBEBE9;   --red-line: #D98A82;
    --action-bg: #E4F1EA; --calm-bg: #EAF1F5;
    --shade: 25, 36, 45;

    --paper: var(--silver-soft);
    --card: #FFFFFF;
    --text: var(--ink);
    --text-soft: var(--storm-deep);
    --text-faint: var(--storm);
    --text-hint: #8A9099;
    --rule: var(--silver);
    --rule-soft: #E6E9EA;
    --action: var(--green-deep);
    --action-hover: #0B5F3B;
    --on-action: #FFFFFF;
    --focus: var(--green);
    --mark: var(--green-deep);
    --bar-bg: #FFFFFF;

    --head: "Montserrat Variable", Montserrat, system-ui, sans-serif;
    --body: Poppins, system-ui, sans-serif;
    --fs-fine: 0.75rem; --fs-small: 0.8125rem; --fs-body: 0.9375rem;
    --fs-h3: 1.0625rem; --fs-h2: 1.25rem; --fs-h1: 1.375rem;
    --r: 10px; --r-sm: 6px;
}

:root[data-theme="dark"] {
    color-scheme: dark;

    --paper: #0F171E;
    --card: var(--midnight-soft);
    --text: #FFFFFF;
    --text-soft: var(--steel);
    --text-faint: var(--storm-soft);
    --text-hint: #8A9BA8;
    --rule: #35485C;
    --rule-soft: #2A3A48;
    --action: var(--green);
    --action-hover: #35D68D;
    --on-action: var(--ink);
    --focus: #35D68D;
    --mark: var(--green);
    --bar-bg: var(--midnight-soft);

    --amber: #F0C060; --amber-bg: #3A2F14; --amber-line: #8A6A25;
    --red: #F29288;   --red-bg: #3E2220;   --red-line: #8F433C;
    --action-bg: #1B3A2D; --calm-bg: #1E3340;
    --shade: 0, 0, 0;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    background: var(--paper);
    color: var(--text);
    font-family: var(--body);
    font-size: var(--fs-body);
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
}
.noscript { padding: 2rem 1rem; text-align: center; color: var(--text-soft); }

/* ————— Gerüst: Kopf, Inhalt, Reiter (Runde L) ————— */
#shell {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}
#topbar {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: calc(0.6rem + env(safe-area-inset-top)) 1rem 0.6rem;
    background: var(--paper);
}
#brand { height: 22px; width: auto; color: var(--text); display: block; }
body[data-mode="public"] #topbar { justify-content: center; padding-top: calc(2.2rem + env(safe-area-inset-top)); }
body[data-mode="public"] #brand { height: 30px; }
#offlinepill {
    margin-left: auto;
    font-size: var(--fs-fine);
    font-weight: 600;
    color: var(--amber);
    background: var(--amber-bg);
    border: 1px solid var(--amber-line);
    border-radius: 999px;
    padding: 0.1rem 0.6rem;
}
body[data-mode="public"] #offlinepill { margin-left: 0; }

#view {
    flex: 1;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    padding: 0.4rem 1rem calc(1rem + env(safe-area-inset-bottom));
}

#foot { position: sticky; bottom: 0; }
#tabs[hidden] { display: none; }       /* hidden muss das display-flex schlagen */
#tabs {
    display: flex;
    justify-content: space-around;
    background: var(--bar-bg);
    border-top: 1px solid var(--rule-soft);
    padding: 0.35rem 0 calc(0.35rem + env(safe-area-inset-bottom));
}
#tabs a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    min-width: 3.4rem;
    padding: 0.15rem 0.4rem;
    font-size: var(--fs-fine);
    color: var(--text-faint);
    text-decoration: none;
    border-radius: var(--r-sm);
}
#tabs a .ic { font-size: 1.15rem; line-height: 1; }
#tabs a[aria-current="page"] { color: var(--mark); font-weight: 600; }

/* ————— Bausteine ————— */
h1 { font-family: var(--head); font-size: var(--fs-h1); font-weight: 700; margin: 0.8rem 0 0.4rem; }
h2 { font-family: var(--head); font-size: var(--fs-h2); font-weight: 700; margin: 1rem 0 0.4rem; }
p  { margin: 0.4rem 0; }
.hint { color: var(--text-hint); font-size: var(--fs-small); }
.soft { color: var(--text-soft); }

.card {
    background: var(--card);
    border-radius: var(--r);
    padding: 0.9rem 1rem;
    margin: 0.7rem 0;
    box-shadow: 0 1px 2px rgba(var(--shade), 0.08);
}

.banner {
    border-radius: var(--r-sm);
    padding: 0.6rem 0.8rem;
    margin: 0.7rem 0;
    font-size: var(--fs-small);
}
.banner.error { background: var(--red-bg); border: 1px solid var(--red-line); color: var(--red); }
.banner.calm  { background: var(--calm-bg); color: var(--text-soft); }
.banner.ok    { background: var(--action-bg); color: var(--mark); }

form { margin: 0.4rem 0; }
label { display: block; font-size: var(--fs-small); font-weight: 600; margin: 0.8rem 0 0.25rem; }
.inp {
    width: 100%;
    font: inherit;
    /* Leitlinie 6: Eingaben >= 16 px - darunter zoomt iOS bei jedem Fokus. */
    font-size: 1rem;
    color: var(--text);
    background: var(--card);
    border: 1px solid var(--rule);
    border-radius: var(--r-sm);
    padding: 0.65rem 0.75rem;
}
.inp:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.pwrow { position: relative; }
.pwrow .inp { padding-right: 4.4rem; }
.pwtoggle {
    position: absolute;
    right: 0.35rem;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: none;
    color: var(--mark);
    font: inherit;
    font-size: var(--fs-small);
    font-weight: 600;
    padding: 0.3rem 0.4rem;
    cursor: pointer;
}

.btn {
    display: block;
    width: 100%;
    font: inherit;
    font-weight: 600;
    border: 0;
    border-radius: var(--r-sm);
    padding: 0.75rem 1rem;
    margin: 1.1rem 0 0.3rem;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
}
.btn.primary { background: var(--action); color: var(--on-action); }
.btn.primary:hover { background: var(--action-hover); }
.btn.primary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.btn[disabled] { opacity: 0.55; cursor: default; }
.linkline { text-align: center; margin-top: 0.9rem; }
a { color: var(--mark); }

.field-error { color: var(--red); font-size: var(--fs-small); margin-top: 0.25rem; display: block; }

@media (prefers-reduced-motion: no-preference) {
    .card { animation: rise 0.18s ease-out; }
    @keyframes rise { from { transform: translateY(4px); opacity: 0.6; } }
}

/* ————— Bereichskopf (Runde 2) ————— */
.apphead { display: flex; align-items: baseline; gap: 0.6rem; margin: 0.8rem 0 0.4rem; }
.apphead h1 { margin: 0; }
.apphead .date { color: var(--text-faint); font-size: var(--fs-small); margin-left: auto; }

/* ————— Einsatz- und Tageskarten (Runde 2) ————— */
.card .k {
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-faint);
    font-weight: 600;
    margin: 0 0 0.25rem;
}
.card .big { font-family: var(--head); font-weight: 700; font-size: var(--fs-h3); margin: 0; }
.card .sub { color: var(--text-faint); font-size: var(--fs-small); margin: 0.15rem 0 0; }
.card.running { border: 1px solid var(--action); }
.card.running .k { color: var(--action); }
.card.rows { padding-top: 0.3rem; padding-bottom: 0.3rem; }

.seclabel {
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-faint);
    font-weight: 600;
    margin: 1rem 0 -0.3rem;
}

.arow { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0; min-height: 44px; }
.arow + .arow { border-top: 1px solid var(--rule-soft); }
.arow .grow { flex: 1; min-width: 0; }
.arow .t { font-weight: 600; }
.arow .s { color: var(--text-faint); font-size: var(--fs-small); }
.arow.mute .t { color: var(--text-soft); font-weight: 400; }
.arow .dayl { width: 3.4rem; flex: none; color: var(--text-faint); font-size: var(--fs-small); }
.cardhint {
    font-size: var(--fs-fine);
    color: var(--text-faint);
    padding: 0.45rem 0 0.2rem;
    border-top: 1px solid var(--rule-soft);
    margin: 0.2rem 0 0;
}

.empty {
    border: 1px dashed var(--rule);
    border-radius: var(--r);
    color: var(--text-faint);
    text-align: center;
    padding: 1rem 0.9rem;
    font-size: 0.875rem;
    margin: 0.7rem 0;
}

/* Die grüne Zeile über der Tab-Leiste: das eine Signal des laufenden Einsatzes
 * auf allen Reitern ausser «Heute» (Entscheid Runde L). */
#runline[hidden] { display: none; }
#runline {
    display: block;
    background: var(--action);
    color: var(--on-action);
    font-weight: 600;
    font-size: var(--fs-small);
    text-align: center;
    text-decoration: none;
    padding: 0.5rem 1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Reiter-Icons als SVG (Runde 2) */
#tabs a .ic { line-height: 0; }
#tabs a .ic svg { width: 1.45rem; height: 1.45rem; display: block; }

/* ————— Schritt-Bildschirme (Runde 3) ————— */
.screenhead { display: flex; align-items: center; gap: 0.5rem; margin: 0.8rem 0 0.4rem; }
.screenhead h1 { margin: 0; }
.screenhead .back {
    color: var(--mark);
    font-size: 1.5rem;
    line-height: 1;
    text-decoration: none;
    padding: 0.1rem 0.5rem 0.2rem 0;
}
.rulehint { font-size: var(--fs-fine); color: var(--text-faint); margin: 0.3rem 0 0; }
select.inp { min-height: 44px; }
textarea.inp { min-height: 5.4rem; resize: vertical; font-family: inherit; }

.qrow { display: flex; align-items: center; gap: 0.7rem; padding: 0.45rem 0; min-height: 44px; }
.qrow + .qrow { border-top: 1px solid var(--rule-soft); }
.qrow .n { flex: 1; font-weight: 600; }
.qrow input {
    width: 6.2rem;
    text-align: right;
    font: inherit;
    font-size: 1.05rem;
    color: var(--text);
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--r);
    padding: 0.55rem 0.7rem;
    min-height: 44px;
}
.qrow input:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }

.photo { display: flex; align-items: center; gap: 0.7rem; }
.photo .thumb {
    width: 64px; height: 48px;
    border-radius: 8px;
    border: 1px solid var(--rule);
    background: var(--paper);
    color: var(--text-faint);
    font-size: var(--fs-fine);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    flex: none;
}
.photo .thumb img { width: 100%; height: 100%; object-fit: cover; }
.photo .lbl2 { flex: 1; }
.photo .lbl2 .t { font-weight: 600; margin: 0; }
.photo .lbl2 .s { color: var(--text-faint); font-size: var(--fs-small); margin: 0; }
.photo .act { color: var(--mark); font-weight: 600; background: none; border: 0; font: inherit; cursor: pointer; }

.quietact {
    display: block;
    width: 100%;
    text-align: center;
    color: var(--text-faint);
    font: inherit;
    font-size: 0.875rem;
    padding: 0.6rem;
    background: none;
    border: 0;
    cursor: pointer;
    margin-top: 0.3rem;
}
.quietact.danger { color: var(--red); }

.banner.warn { background: var(--amber-bg); border: 1px solid var(--amber-line); color: var(--amber); }
.card.wait { border: 1px solid var(--amber-line); background: var(--amber-bg); }
.card.wait .k, .card.wait .sub { color: var(--amber); }
.card.fail { border: 1px solid var(--red-line); background: var(--red-bg); }
.card.fail .k, .card.fail .sub { color: var(--red); }
.card.tap, .rowlink { cursor: pointer; }

/* Die Rückfrage als Bodenblatt - die einzige Überlagerung (Leitlinie 2). */
.sheetwrap {
    position: fixed;
    inset: 0;
    background: rgba(var(--shade), 0.45);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    z-index: 10;
}
.sheet {
    background: var(--card);
    border-radius: 16px 16px 0 0;
    padding: 1rem 1.05rem calc(1.2rem + env(safe-area-inset-bottom));
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.15);
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
}
.sheet .t { font-family: var(--head); font-weight: 700; margin: 0 0 0.35rem; }
.sheet .s { color: var(--text-soft); font-size: 0.875rem; margin: 0 0 0.8rem; }
.btn.dangerfill { background: var(--red); color: #FFFFFF; }

/* ————— Abwesenheiten (Runde 4) ————— */
.pillst {
    font-size: 0.6875rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    border: 1px solid var(--rule);
    color: var(--text-soft);
    white-space: nowrap;
    flex: none;
}
.pillst.wait { border-color: var(--amber-line); color: var(--amber); }
.pillst.no { border-color: var(--red-line); color: var(--red); }
.arow .chev { color: var(--text-faint); }
.fpair { display: flex; gap: 0.7rem; }
.fpair .field { flex: 1; min-width: 0; }
.field label { margin-top: 0.8rem; }
input[type="date"].inp { min-height: 44px; }
a.btnline {
    display: block;
    width: 100%;
    border: 1px solid var(--action);
    border-radius: var(--r-sm);
    padding: 0.6rem 1rem;
    background: none;
    color: var(--action);
    font: inherit;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    margin: 1.1rem 0 0.3rem;
    box-sizing: border-box;
}
button.btnline {
    display: block;
    width: 100%;
    border: 1px solid var(--action);
    border-radius: var(--r-sm);
    padding: 0.6rem 1rem;
    background: none;
    color: var(--action);
    font: inherit;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    margin: 0.8rem 0 0.3rem;
}
button.btnline[disabled] { opacity: 0.55; cursor: default; }
.sheet label { margin-top: 0.2rem; }
.sheet .inp { margin-bottom: 0.8rem; }

/* ————— Übersicht (Runde 5) ————— */
.monthnav { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.4rem; }
.monthnav .mtitle {
    flex: 1;
    text-align: center;
    font-family: var(--head);
    font-weight: 700;
    font-size: var(--fs-h3);
}
.mbtn {
    border: 0;
    background: none;
    color: var(--mark);
    font: inherit;
    font-size: 1.3rem;
    line-height: 1;
    padding: 0.2rem 0.7rem;
    cursor: pointer;
}
.mbtn.mute { color: var(--rule); cursor: default; }
.amount {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    white-space: nowrap;
    flex: none;
}
.amount.neg { color: var(--red); }
.arow.total { border-top: 2px solid var(--text); }
.arow.total .amount { font-family: var(--head); font-weight: 700; }
.taprow { cursor: pointer; }
.taprow .chev { color: var(--text-faint); font-weight: 400; }

/* ————— Profil, Ortung, Strecke (Runde 6) ————— */
.switch {
    flex: none;
    width: 46px;
    height: 28px;
    border-radius: 999px;
    border: 1px solid var(--rule);
    background: var(--rule-soft);
    position: relative;
    cursor: pointer;
    padding: 0;
}
.switch::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--card);
    box-shadow: 0 1px 2px rgba(var(--shade), 0.25);
    transition: left 0.15s ease-out;
}
.switch.on { background: var(--action); border-color: var(--action); }
.switch.on::after { left: 20px; }
.switch[disabled] { opacity: 0.55; cursor: default; }
@media (prefers-reduced-motion: reduce) { .switch::after { transition: none; } }

.checkmark { color: var(--mark); font-weight: 700; visibility: hidden; flex: none; }
.arow.chosen .checkmark { visibility: visible; }

.disclaimer { line-height: 1.55; }

.tripmap {
    height: 260px;
    border-radius: var(--r);
    overflow: hidden;
    margin: 0.7rem 0;
    background: var(--rule-soft);
}
/* Die Kacheln bleiben hell - eine Karte trägt ihren eigenen Grund (Runde L). */
.tripmap .leaflet-container { background: #DDD; }


/* ————— Review 02.09.: Tastatur und Fokus (F4), Installations-Karte (F3) ————— */
.rowlink:focus-visible,
.card.tap:focus-visible,
.taprow:focus-visible,
.arow[tabindex]:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 1px;
    border-radius: var(--r-sm);
}
.installacts { display: flex; gap: 1.4rem; margin: 0.5rem 0 0; }
.installacts .act {
    background: none;
    border: 0;
    font: inherit;
    font-weight: 600;
    color: var(--mark);
    padding: 0.3rem 0;
    cursor: pointer;
    min-height: 44px;
}
.installacts .quiet { color: var(--text-faint); font-weight: 400; }