/* faktio — UI-Theme (hell + dunkel über prefers-color-scheme).
   Motiv „Klammer-Ecke“ aus der Bildmarke: Flächen sind oben links und unten
   rechts gerundet, die beiden anderen Ecken fast eckig. Die kleinen Winkel
   (Navy oben links, Mint unten rechts) markieren nur Zustand (aktiv, geprüft)
   und sind keine Dekoration.
   Schriften liegen selbst gehostet unter /fonts (OFL, Lizenzen daneben). */

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/fonts/inter-latin-400-normal.woff2") format("woff2");
}
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/fonts/inter-latin-500-normal.woff2") format("woff2");
}
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/fonts/inter-latin-600-normal.woff2") format("woff2");
}
@font-face {
    font-family: "Inter Tight";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/fonts/inter-tight-latin-600-normal.woff2") format("woff2");
}
@font-face {
    font-family: "Inter Tight";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/fonts/inter-tight-latin-700-normal.woff2") format("woff2");
}
@font-face {
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2");
}

:root {
    --bg: #f6f5f1;          /* Papier, leicht warm */
    --card: #ffffff;
    --ink: #16193a;         /* Navy: Text, Primär-Button, Logo */
    --ink-hover: #252a5a;
    --muted: #5f6278;       /* Labels, Hilfstext (6:1 auf Weiß) */
    --border: #e5e3dc;
    --mint: #2fd08f;        /* Marke, Export-Button, Fokusring. NIE als Text auf Hell (2:1) */
    --mint-strong: #0b7a52; /* Links, Erfolgstext (5,4:1) */
    --mint-soft: #e6f8f0;   /* Chips, Erfolgsmeldungen */
    --danger: #c0362c;
    --danger-soft: #fdecea;
    --danger-border: #f3c4be;
    --warn-ink: #8a5a00;
    --warn-soft: #fdf1d8;
    --chip: #edece6;
    --row-hover: #faf9f6;
    --btn-bg: var(--ink);
    --btn-fg: #ffffff;
    --r: 14px; --r-s: 3px;
    --radius: var(--r) var(--r-s) var(--r) var(--r-s);
    --font-display: "Inter Tight", "Inter", system-ui, sans-serif;
    --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

    /* Ergänzungen zum Marken-Set */
    --field-border: #878a9c;  /* Rahmen von Eingabefeldern, ≥ 3:1 auf --card und --bg */
    --export-bg: #2fd08f;     /* Export-Button: in beiden Themes gleich */
    --export-hover: #27bd80;
    --export-fg: #16193a;
    --toast-bg: #16193a;
    --toast-fg: #ffffff;
    --overlay: rgba(22, 25, 58, 0.45);
    --shadow: 0 1px 2px rgba(22, 25, 58, 0.04), 0 2px 8px rgba(22, 25, 58, 0.04);
    --shadow-pop: 0 6px 20px rgba(22, 25, 58, 0.18);
    --radius-s: 10px 3px 10px 3px;     /* Buttons */
    --radius-field: 8px 3px 8px 3px;   /* Inputs, kleine Flächen */
    --radius-chip: 7px 2px 7px 2px;
    --ring: 0 0 0 3px color-mix(in srgb, var(--mint) 45%, transparent);
    /* Elemente ohne eigenen Rahmen bekommen den mint-strong-Rand als Schatten. */
    --ring-solid: 0 0 0 1.5px var(--mint-strong), 0 0 0 4.5px color-mix(in srgb, var(--mint) 45%, transparent);
}
@media (prefers-color-scheme: dark) {
    :root {
        --bg: #10122a; --card: #191c36; --ink: #eceefb; --ink-hover: #ffffff;
        --muted: #9ea1bb; --border: #2a2d4a;
        --mint: #3ee39f; --mint-strong: #3ee39f; --mint-soft: #173a33;
        --danger: #ff8a7f; --danger-soft: #3a1d22; --danger-border: #6b2c31;
        --warn-ink: #f5c56b; --warn-soft: #3a3018;
        --chip: #232646; --row-hover: #1e2140;
        --btn-bg: #eceefb; --btn-fg: #10122a;
        --field-border: #666b92;
        --toast-bg: #2b2f55; --toast-fg: #eceefb;
        --overlay: rgba(5, 6, 18, 0.65);
        --shadow: none;
        --shadow-pop: 0 6px 20px rgba(0, 0, 0, 0.45);
        color-scheme: dark;
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--font-sans);
    background: var(--bg);
    color: var(--ink);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

/* Inter liegt bis 600 vor — höher würde der Browser künstlich fetten. */
strong, b { font-weight: 600; }

a { color: var(--mint-strong); text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

::selection { background: var(--mint-soft); color: var(--ink); }

/* Fokus: an jedem interaktiven Element sichtbar. Felder färben ihren Rahmen,
   alles andere bekommt den Rand über --ring-solid. */
:focus-visible {
    outline: none;
    box-shadow: var(--ring-solid);
}

/* --- Kopf & Navigation --- */

header {
    background: var(--card);
    border-bottom: 1px solid var(--border);
    padding: 0 28px;
    min-height: 60px;
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 28px;
}

.brand { margin: 0; line-height: 0; }
.brand a {
    display: inline-flex;
    color: var(--ink);
    border-radius: var(--radius-field);
}
.brand svg { display: block; height: 28px; width: auto; }

nav {
    display: flex;
    flex-wrap: wrap;
    min-width: 0;
    align-items: center;
    gap: 4px;
    flex: 1;
}

/* display:flex würde sonst das hidden-Attribut aushebeln (Login-Ansicht) */
nav[hidden] { display: none; }

nav .spacer { flex: 1; }
#who { color: var(--muted); font-size: 13px; margin-right: 8px; }

nav button {
    position: relative;
    background: transparent;
    color: var(--muted);
    font-weight: 500;
    padding: 7px 14px;
}
nav button:not(:disabled):hover { color: var(--ink); background: var(--row-hover); }
nav button.active { color: var(--ink); font-weight: 600; }
/* Aktive Ansicht: Klammer-Winkel statt Unterstreichung */
nav button.active::before,
nav button.active::after {
    content: "";
    position: absolute;
    width: 9px;
    height: 9px;
}
nav button.active::before {
    top: 0; left: 0;
    border-top: 2.5px solid var(--ink);
    border-left: 2.5px solid var(--ink);
    border-top-left-radius: 3px;
}
nav button.active::after {
    right: 0; bottom: 0;
    border-right: 2.5px solid var(--mint);
    border-bottom: 2.5px solid var(--mint);
    border-bottom-right-radius: 3px;
}

/* Kopf der statischen Seiten (Impressum, Datenschutz) */
.header-back { margin-left: auto; font-size: 14px; font-weight: 500; border-radius: var(--radius-field); }

/* --- Layout & Karten --- */

main {
    max-width: 960px;
    margin: 32px auto;
    padding: 0 20px;
}

.card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 28px 32px;
    margin-bottom: 20px;
    box-shadow: var(--shadow);
}

.subcard {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px 20px;
    margin-top: 16px;
}

h1, h2 {
    font-family: var(--font-display);
    letter-spacing: -0.02em;
}
h2 { margin: 0 0 6px; font-size: 22px; font-weight: 700; line-height: 1.3; }
h3 {
    font-size: 12px;
    color: var(--muted);
    margin: 26px 0 6px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}
.card > h3:first-child, .subcard > h3:first-child { margin-top: 0; }

/* --- Formulare --- */

label { display: block; font-size: 13px; color: var(--muted); margin: 12px 0 4px; font-weight: 500; }
.req { color: var(--danger); }
label.check { display: flex; align-items: center; gap: 8px; margin-top: 14px; }

input, select, textarea {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--field-border);
    border-radius: var(--radius-field);
    font-size: 14px;
    font-family: inherit;
    background: var(--card);
    color: var(--ink);
    transition: border-color 0.12s, box-shadow 0.12s;
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
    border-color: var(--mint-strong);
    box-shadow: var(--ring);
}
input:disabled, select:disabled {
    background: var(--bg);
    color: var(--muted);
    border-color: var(--border);
    cursor: not-allowed;
}
input[type="checkbox"] { width: auto; accent-color: var(--mint-strong); }
input[type="file"] { padding: 7px; background: transparent; border-style: dashed; }
input[type="file"]::file-selector-button {
    margin-right: 12px;
    padding: 5px 12px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-field);
    background: var(--card);
    color: var(--ink);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
textarea { resize: vertical; }

/* Nummern, Beträge, IBAN, USt-ID */
input.num, select.num, input.mono {
    font-family: var(--font-mono);
    font-size: 13.5px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.row { display: flex; gap: 14px; flex-wrap: wrap; }
.row > div { flex: 1; min-width: 140px; }

.home-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 20px; }
.home-actions > button.ui-action { flex: 1; min-height: 72px; min-width: min(100%, 220px); font-size: 18px; }
.home-task { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.home-task > span { min-width: 0; overflow-wrap: anywhere; }
.home-task > button { flex-shrink: 0; }
.invoice-summary { display: flex; flex-wrap: wrap; gap: 12px 24px; margin: 18px 0; }
.invoice-summary > div { min-width: 140px; flex: 1; }
.invoice-summary dt { color: var(--muted); font-size: 12px; }
.invoice-summary dd { margin: 4px 0 0; }
.invoice-summary button { vertical-align: middle; }
.invoice-hours input { font-size: 22px; font-weight: 600; min-width: 110px; }
.invoice-preview { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); }
.monthly-entry { display: flex; align-items: end; gap: 18px; flex-wrap: wrap; margin: 20px 0; }
.monthly-entry > div { width: min(100%, 220px); }
.monthly-entry input { font-size: 32px; font-weight: 600; min-height: 64px; }
.monthly-entry p { margin: 0; padding-bottom: 6px; }
dialog.modal { width: min(90vw, 740px); max-height: 85vh; overflow: auto; color: var(--ink); }
dialog.modal::backdrop { background: rgb(0 0 0 / 45%); }

details > summary {
    width: fit-content;
    cursor: pointer;
    color: var(--ink);
    font-size: 14px;
    font-weight: 500;
    border-radius: var(--radius-field);
}
details > summary::marker { color: var(--muted); }
details > summary:hover { color: var(--mint-strong); }

/* --- Buttons --- */

button {
    background: var(--btn-bg);
    color: var(--btn-fg);
    border: 1.5px solid transparent;
    border-radius: var(--radius-s);
    padding: 8px 18px;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}
button:not(:disabled):hover { background: var(--ink-hover); }
button:not(:disabled):active { transform: translateY(1px); }
button:disabled { opacity: 0.55; cursor: not-allowed; }

button.secondary { background: transparent; color: var(--ink); border-color: var(--border); }
button.secondary:not(:disabled):hover { background: var(--row-hover); border-color: var(--field-border); }
button.secondary:focus-visible { border-color: var(--mint-strong); box-shadow: var(--ring); }

button.link {
    background: none;
    border: none;
    color: var(--mint-strong);
    padding: 5px 8px;
    font-weight: 500;
    border-radius: var(--radius-field);
}
button.link:not(:disabled):hover { background: var(--mint-soft); }

button.danger { background: var(--danger); color: var(--btn-fg); }
button.danger:not(:disabled):hover { background: color-mix(in srgb, var(--danger) 86%, var(--ink)); }

/* Export: die eine Aktion, die eine Rechnung abschließt — nur einmal pro Ansicht. */
button.cta {
    background: var(--export-bg);
    color: var(--export-fg);
    padding: 10px 24px;
    font-size: 15px;
}
button.cta:not(:disabled):hover { background: var(--export-hover); }

/* Kompakte Icon-Buttons für Zeilen-Aktionen (Tooltip über title-Attribut) */
button.icon-btn {
    background: transparent;
    color: var(--muted);
    border: none;
    padding: 7px;
    border-radius: var(--radius-field);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}
button.icon-btn svg { width: 16px; height: 16px; }
/* Positions-Detailzeile: Chevron dreht beim Aufklappen. */
.icon-btn.l-more svg { transition: transform 0.15s; }
.icon-btn.l-more.open svg { transform: rotate(180deg); }
button.icon-btn:not(:disabled):hover { background: var(--chip); color: var(--ink); }
button.icon-btn.del:not(:disabled):hover { background: var(--danger-soft); color: var(--danger); }

.actions { display: flex; gap: 2px; justify-content: flex-end; white-space: nowrap; }

/* --- Tabellen --- */

/* Wrapper: auf schmalen Viewports scrollt die Tabelle horizontal,
   statt aus der Karte zu laufen. */
.table-wrap { overflow-x: auto; }
.table-wrap > table { min-width: 640px; }

table { width: 100%; border-collapse: collapse; margin-top: 10px; }
th, td { text-align: left; padding: 12px; border-bottom: 1px solid var(--border); font-size: 14px; }
th {
    color: var(--muted);
    font-weight: 600;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border-bottom-width: 2px;
}
tbody tr:hover { background: var(--row-hover); }
tr.inactive td { color: var(--muted); }
tr.inactive td strong { color: var(--muted); font-weight: 500; }
td.num, th.num { text-align: right; }
/* Rechnungsnummern, Beträge, Daten */
td.num, .mono {
    font-family: var(--font-mono);
    font-size: 13.5px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}
/* Nummern, Daten, Beträge nie umbrechen — schmale Viewports scrollen die Tabelle. */
td.num, td.mono, td .mono { white-space: nowrap; }
td .muted { font-size: 13px; }
table input { padding: 7px 10px; }
table select { padding: 7px 8px; }
td.nowrap { white-space: nowrap; }
/* Positions-/Zu-Abschlag-Tabellen tragen mehr Spalten -> kompaktere Zellen. */
#lines td, #lines th, #acs td, #acs th { padding: 9px 7px; }
/* Spaltenbreiten der Positionstabelle: schmale Zahlenspalten halten,
   damit Bezeichnung den restlichen Platz bekommt. */
#lines .l-qty  { max-width: 90px; }
#lines .l-rate { max-width: 118px; }
#lines .l-vat  { min-width: 80px; }
#lines .l-net  { min-width: 92px; }
tr.l-detail td, tr.l-detail:hover td { background: var(--row-hover); padding: 4px 10px 12px; }
tr.l-detail label { font-size: 11.5px; }

/* --- Summen --- */

.totals {
    margin-top: 20px;
    margin-left: auto;
    max-width: 320px;
    padding: 16px 20px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    text-align: right;
    font-size: 14px;
    color: var(--muted);
}
.totals span {
    font-family: var(--font-mono);
    font-size: 13.5px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
}
.totals .grand {
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
}
.totals .grand span { font-size: 19px; }

/* --- Status-Chips --- */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px;
    border-radius: var(--radius-chip);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    background: var(--chip);
    color: var(--ink);
}
.badge svg { width: 11px; height: 11px; flex: none; }
.badge.ok { background: var(--mint-soft); color: var(--mint-strong); }
.badge.kl { background: var(--warn-soft); color: var(--warn-ink); }
.badge.err { background: var(--danger-soft); color: var(--danger); }
.badge.off { color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 4px; }

/* --- Meldungen --- */

.toast {
    position: fixed;
    bottom: 24px; left: 50%;
    transform: translateX(-50%);
    max-width: calc(100vw - 32px);
    background: var(--toast-bg);
    color: var(--toast-fg);
    padding: 12px 22px;
    border-radius: var(--radius-s);
    font-size: 14px;
    box-shadow: var(--shadow-pop);
    z-index: 10;
}
/* Erfolg: Mint-Winkel unten rechts */
.toast.ok::after {
    content: "";
    position: absolute;
    right: 5px; bottom: 5px;
    width: 9px; height: 9px;
    border-right: 2.5px solid var(--mint);
    border-bottom: 2.5px solid var(--mint);
    border-bottom-right-radius: 3px;
}
.toast.err { background: var(--danger); color: var(--btn-fg); }

.error-box {
    background: var(--danger-soft);
    color: var(--danger);
    border: 1px solid var(--danger-border);
    padding: 10px 14px;
    border-radius: var(--radius-field);
    font-size: 14px;
    margin: 10px 0;
}

/* --- Leere Zustände --- */

.empty {
    text-align: center;
    padding: 44px 20px;
    color: var(--muted);
}
.empty .glyph { line-height: 0; margin-bottom: 12px; }
.empty .glyph svg { width: 32px; height: 32px; }
.empty p { margin: 0 0 16px; }

/* --- Kleinkram --- */

.site-footer {
    max-width: 960px;
    margin: 0 auto 24px;
    padding: 0 20px;
    text-align: center;
    font-size: 13px;
}
.site-footer a { color: var(--muted); text-decoration: none; border-radius: var(--radius-field); }
.site-footer a:hover { color: var(--mint-strong); text-decoration: underline; }
.site-footer .sep { color: var(--muted); margin: 0 8px; }

.login-wrap { max-width: 400px; margin: 64px auto; }
.login-mark { display: block; width: 48px; height: 48px; color: var(--ink); margin-bottom: 18px; }
.hint { font-size: 13px; color: var(--muted); margin-top: 14px; }

.muted { color: var(--muted); font-size: 14px; }

/* --- Dialoge (Versand ADR-011, Löschen) --- */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: var(--overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    z-index: 50;
}
.modal { width: min(480px, 100%); margin: 0; }
.environment-banner { padding: 10px 16px; background: #fff0c2; color: #453100; border-bottom: 2px solid #b17a00; text-align: center; font-weight: 700; }

/* --- Schmale Viewports --- */

@media (max-width: 700px) {
    header { flex-wrap: wrap; padding: 10px 16px 6px; gap: 6px 16px; }
    nav { flex-wrap: wrap; flex-basis: 100%; }
    nav button { padding: 7px 10px; }
    #who { display: none; }
    main { margin: 20px auto; padding: 0 16px; }
    .card { padding: 20px 16px; }
}

/* Shared action controls: docs/ui-style-guide.md. Keep existing semantic variants. */
button.ui-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 44px;
    min-height: 44px;
    line-height: 1.3;
    vertical-align: middle;
}
button.ui-action[hidden] { display: none; }
button.ui-action > svg { width: 18px; height: 18px; flex: none; pointer-events: none; }
button.ui-action.ui-icon-only { width: 44px; height: 44px; padding: 10px; font-size: 0; gap: 0; }
button.ui-action:focus-visible { outline: 2px solid var(--mint-strong); outline-offset: 3px; box-shadow: var(--ring); }
.ui-action-tooltip {
    position: fixed;
    z-index: 100;
    max-width: min(320px, calc(100vw - 16px));
    padding: 7px 10px;
    border-radius: var(--radius-field);
    background: var(--toast-bg);
    color: var(--toast-fg);
    font-size: 13px;
    line-height: 1.4;
    overflow-wrap: anywhere;
    box-shadow: var(--shadow-pop);
    pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
    button.ui-action, button.ui-action svg { transition: none; }
}