/* =========================================================
INVOICE MANAGER · witti-Redesign — App-Schicht
Kühle Navy-/Blau-Palette, dichte Datentabellen, hell + dunkel.
Werte aus ds/tokens/app.css; die Token-Namen sind die kanonischen der App.
Bewusst NICHT vorhanden: --border, --positive, --warning, --on-accent, --card-*, --radius-md.
========================================================= */
/* --------- THEME TOKENS ---------
Kontrast ist gemessen (WCAG 2.x, Gate: scripts/test-design-contrast.js): Text >= 4,5:1 auf den
Flächen, auf denen er steht; Fokusring, Icons und Control-Ränder >= 3:1 — in beiden Themes.
Die Zahlen in den Kommentaren sind die gemessenen Werte.
Der Dark-Block deklariert JEDES Farb-, Schatten- und Fokus-Token selbst.
Layout, Radien, Schrift, Größen und Motion stehen nur im hellen Block. */
:root {
/* ---- Layout (beide Themes) ---- */
--sidebar-w: 248px;
--sidebar-w-collapsed: 64px;
--header-h: 56px;
--content-max: 1480px;
--gutter: 24px;
--gutter-sm: 16px;
/* ---- Radien nach Rolle ---- */
--radius-xs: 4px; /* Checkbox, kbd, Label-Chip */
--radius-sm: 6px; /* Inputs, Selects, Menüeinträge, Zeilenaktionen */
--radius: 6px; /* Eingabefelder, Suchfeld */
--radius-lg: 12px; /* Menüs, Popover */
--radius-xl: 12px; /* Karten, Panels, KPI, Tabellenrahmen, Modals, Drawer */
--radius-pill: 999px; /* Buttons, Chips, Pills, Segmente, Schalter */
/* ---- Schrift: eine Familie ---- */
--font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
--font-display: var(--font-sans);
--font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
/* Plus Jakarta Sans hat das OpenType-Feature `tnum`: Beträge bleiben in der Hausschrift —
immer zusammen mit font-variant-numeric: tabular-nums. Fällt die Webfont aus, greift der System-Sans-Stack. */
--font-tabular: var(--font-sans);
--fs-xs: 12px;
--fs-sm: 13px;
--fs-md: 14px;
--fs-lg: 16px;
--fs-xl: 18px;
/* ---- Motion: eine Kurve, App schnell (150/240 ms) ---- */
--ease: cubic-bezier(0.22, 1, 0.36, 1);
--dur-fast: 150ms;
--dur: 240ms;
/* ---- Flächen: Seitengrund leicht kühl, Karten weiß. Stufung über Fläche, Karten ohne Schatten ---- */
--bg: #f6f8fb; /* Seitengrund; ink 13,55:1 */
--surface: #ffffff; /* Karten, Panels; ink 14,42:1 */
--surface-2: #f9fbfd; /* Zebra; ink 13,90:1 */
--surface-3: #eff4f9; /* Hover; ink 13,03:1 */
--surface-sunk: #ecf1f6; /* eingetiefte Bereiche (Suchfeld, Sidebar); ink 12,69:1 */
/* ---- Linien: 12 % Ink = Marken-Linie; line-strong ist der Control-Rand ---- */
--line-soft: rgb(3 43 77 / 0.07); /* Trenner in Tabellen und Listen (dekorativ) */
--line: rgb(3 43 77 / 0.12); /* Kartenrand 1px, Trennlinien (dekorativ) */
--line-strong: rgb(3 43 77 / 0.52); /* Rand von Inputs/Checkbox/Ghost-Button = #7c91a2: 3,27:1 auf surface, 3,08:1 auf bg */
/* ---- Ink-Stufen: alle >= 4,5:1 auf bg, surface, surface-2, surface-3 und surface-sunk ---- */
--ink: #032b4d; /* Haupttext; 14,42:1 auf surface */
--ink-2: #2f4b66; /* Sekundärtext; 9,06:1 auf surface, 7,97:1 auf surface-sunk */
--ink-3: #52637a; /* Kicker, Tabellenkopf, Meta; 6,13:1 auf surface, 5,40:1 auf surface-sunk */
--ink-4: #5f6b7b; /* Platzhalter, deaktivierte Hinweise; 5,42:1 auf surface, 4,77:1 auf surface-sunk */
/* ---- Akzent ---- */
--accent: #0370a0; /* Akzent als TEXT; 5,48:1 auf surface, 4,81:1 auf accent-soft */
--accent-2: #0395d0; /* Akzent als FLÄCHE/Rand/Fokus; 3,38:1 auf surface, 3,18:1 auf bg, 3,05:1 auf surface-3 */
--accent-strong: #035aa6; /* gefüllte Akzentfläche (Primär-Button, Pille aktiv); weißer Text 6,96:1 */
--accent-soft: rgb(4 157 217 / 0.12); /* weiche Tönung (Chip aktiv, Info-Badge) = #e1f3fa über surface */
--accent-tint: rgb(4 157 217 / 0.06); /* Zeilenauswahl, noch weicher = #f0f9fd; accent-Text 5,14:1 */
--accent-ink: #ffffff; /* Text auf accent / accent-strong; 5,48:1 bzw. 6,96:1 */
/* ---- Signal: Marken-Gelb, Hover-Füllung des Primär-Buttons ---- */
--signal: #f2c438;
--signal-ink: #032b4d; /* 8,74:1 auf signal */
/* ---- Semantik: Farbe als Text auf surface/-soft, -ink als Text auf der vollen Farbe ---- */
--success: #17794a; /* 5,43:1 auf surface, 4,60:1 auf success-soft */
--success-soft: rgb(23 121 74 / 0.12);
--success-ink: #ffffff; /* 5,43:1 auf success */
--warn: #8f5400; /* 6,11:1 auf surface, 5,31:1 auf warn-soft */
--warn-soft: rgb(217 130 0 / 0.14);
--warn-ink: #ffffff; /* 6,11:1 auf warn */
--danger: #a4262c; /* 7,26:1 auf surface, 6,15:1 auf danger-soft */
--danger-soft: rgb(164 38 44 / 0.10);
--danger-ink: #ffffff; /* 7,26:1 auf danger */
--info: #3b5bb5; /* 6,27:1 auf surface, 5,43:1 auf info-soft; bewusst indigo statt Akzent-Blau */
--info-soft: rgb(59 91 181 / 0.10);
--info-ink: #ffffff; /* 6,27:1 auf info */
/* ---- Quellenfarben: E-Mail blau-violett, Seller orange, Business teal, Ausgang lila, Bank himmelblau.
Je >= 4,5:1 auf surface und auf 12 % Tönung von sich selbst (Zahl = Tönung).
Beschriftung nie nur über Farbe: Punkt/Pille trägt immer den Quellennamen. ---- */
--src-email: #5b4fcf; /* 6,06:1 / 5,10:1 */
--src-seller: #a14a00; /* 6,01:1 / 5,04:1 */
--src-business: #0f766e; /* 5,47:1 / 4,63:1 */
--src-out: #9333a8; /* 6,40:1 / 5,33:1 */
--src-bank: #07669c; /* 6,20:1 / 5,19:1 */
/* ---- Etikett (Versandetikett, Beleg-Vorschau): immer weiß/dunkel, in beiden Themes gleich ---- */
--paper: #ffffff;
--paper-ink: #032b4d; /* 14,42:1 */
/* ---- Fokus und Scrim: 3px Ring in --accent-2 neben :hover, nie nur outline:none ---- */
--focus-ring: 0 0 0 3px var(--accent-2);
--scrim: rgb(3 43 77 / 0.5);
/* ---- Schatten nur für Popover, Dropdowns, Modals, Toasts; Schattenfarbe Navy. Karten: Linie statt Schatten ---- */
--shadow-sm: none;
--shadow-md: 0 4px 12px rgb(3 43 77 / 0.10), 0 1px 3px rgb(3 43 77 / 0.08); /* Dropdown */
--shadow-lg: 0 20px 48px -8px rgb(3 43 77 / 0.24), 0 4px 12px rgb(3 43 77 / 0.10); /* Modal, Drawer */
--shadow-pop: 0 8px 24px -4px rgb(3 43 77 / 0.18), 0 2px 6px rgb(3 43 77 / 0.08); /* Popover, Toast */
}
/* DARK — Navy-Basis. Stufung über Fläche statt Schatten:
bg (tiefste Fläche) < surface-sunk < surface (Karten) < surface-2 < surface-3 (Hover, Popover). */
[data-theme="dark"] {
--bg: #021c33; /* Seitengrund; ink 16,04:1 */
--surface: #052f52; /* Karten; ink 12,71:1 */
--surface-2: #08365e; /* Zebra; ink 11,48:1 */
--surface-3: #0d4069; /* Hover, Popover; ink 9,98:1 */
--surface-sunk: #03253f; /* Sidebar, eingetiefte Bereiche; ink 14,56:1 */
--line-soft: rgb(255 255 255 / 0.06);
--line: rgb(255 255 255 / 0.11);
--line-strong: rgb(169 188 207 / 0.62); /* Control-Rand = #6b86a0: 3,62:1 auf surface, 4,57:1 auf bg */
--ink: #f3f7fb; /* 12,71:1 auf surface */
--ink-2: #d0dbe6; /* 9,74:1 auf surface, 7,65:1 auf surface-3 */
--ink-3: #a9bccf; /* 7,02:1 auf surface, 5,52:1 auf surface-3 */
--ink-4: #9bb0c4; /* 6,12:1 auf surface, 4,81:1 auf surface-3 (knappste Stelle) */
--accent: #4cc7ea; /* Akzent als Text; 6,95:1 auf surface, 5,06:1 auf accent-soft */
--accent-2: #04b2d9; /* Fokus/Rand: 5,46:1 auf surface, 6,88:1 auf bg */
--accent-strong: #04b2d9; /* gefüllte Fläche; Navy-Text 5,75:1 */
--accent-soft: rgb(4 178 217 / 0.18); /* = #05476a über surface */
--accent-tint: rgb(4 178 217 / 0.09); /* = #053b5e; accent-Text 5,96:1 */
--accent-ink: #032b4d; /* Navy auf accent 7,32:1, auf accent-strong 5,75:1 */
--signal: #f2c438;
--signal-ink: #032b4d; /* 8,74:1 */
--success: #4cd08a; /* 6,97:1 auf surface, 5,15:1 auf success-soft */
--success-soft: rgb(76 208 138 / 0.15);
--success-ink: #032b4d; /* 7,34:1 auf success */
--warn: #f5ae3d; /* 7,17:1 auf surface, 5,54:1 auf warn-soft */
--warn-soft: rgb(245 174 61 / 0.15);
--warn-ink: #032b4d; /* 7,55:1 auf warn */
--danger: #ff8a82; /* 6,00:1 auf surface, 4,83:1 auf danger-soft */
--danger-soft: rgb(255 138 130 / 0.15);
--danger-ink: #032b4d; /* 6,32:1 auf danger */
--info: #8aa9ff; /* 5,99:1 auf surface, 4,55:1 auf info-soft (knappste Stelle) */
--info-soft: rgb(138 169 255 / 0.15);
--info-ink: #032b4d; /* 6,32:1 auf info */
/* Quellen aufgehellt; Zahl = surface / 12 %-Tönung */
--src-email: #a39cff; /* 5,71:1 / 4,65:1 */
--src-seller: #ffa14f; /* 6,82:1 / 5,65:1 */
--src-business: #3fd0bf; /* 7,16:1 / 5,58:1 */
--src-out: #d68ff0; /* 5,89:1 / 4,87:1 */
--src-bank: #5cc8f5; /* 7,19:1 / 5,59:1 */
--paper: #ffffff; /* Etikett bleibt in Dunkel weiß */
--paper-ink: #032b4d;
--focus-ring: 0 0 0 3px var(--accent-2);
--scrim: rgb(0 0 0 / 0.6);
/* Schatten tiefer, Schattenfarbe Schwarz; 1px heller Rand hebt Overlays von der dunklen Fläche ab */
--shadow-sm: none;
--shadow-md: 0 0 0 1px rgb(255 255 255 / 0.08), 0 4px 12px rgb(0 0 0 / 0.40);
--shadow-lg: 0 0 0 1px rgb(255 255 255 / 0.08), 0 20px 48px -8px rgb(0 0 0 / 0.60), 0 4px 12px rgb(0 0 0 / 0.40);
--shadow-pop: 0 0 0 1px rgb(255 255 255 / 0.08), 0 8px 24px -4px rgb(0 0 0 / 0.50), 0 2px 6px rgb(0 0 0 / 0.30);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
font-family: var(--font-sans);
background: var(--bg);
color: var(--ink);
/* 15px bewusst als Literal: die rem-Maße der Tabellen hängen daran, --fs-md ist 14px. */
font-size: 15px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
min-height: 100vh;
}
body { font-feature-settings: "tnum" 1; }
/* Überschriften: Hausschrift, 700, enge Laufweite, keine Versalien.
Scope auf .app/.modal, damit nackte h1–h5 außerhalb der App (Login, Fehlerseiten) unberührt bleiben.
:where() hält die Spezifität bei (0,1,0): Komponentenregeln (.view-head h1, .modal-head h3,
Versalien-Labels wie .bk-modal-body h3) gewinnen, statt per Reihenfolge zu überstimmen. */
.app :where(h1, h2, h3, h4, h5), .modal :where(h1, h2, h3, h4, h5) {
font-family: var(--font-display);
font-weight: 700;
letter-spacing: -0.02em;
text-transform: none;
text-wrap: balance;
}
.app :where(h2) { font-size: 18px; line-height: 1.3; }
.app :where(h3) { font-size: 16px; line-height: 24px; }
/* Seitentitel: groß und dicht (überschreibt .view-head h1 aus index.css, das davor lädt). */
.view-head h1 { font-size: 26px; font-weight: 800; letter-spacing: -0.04em; line-height: 1.1; }
/* Seitenkopf: Eyebrow (Gruppe) über dem Titel, Aktionen rechts; kein Mindestmaß mehr aus index.css. */
.view-head { flex-wrap: wrap; gap: 0.75rem 1rem; min-height: 0; padding-bottom: 0; }
.view-head .eyebrow {
margin-bottom: 0.35rem;
font-family: var(--font-sans);
font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
color: var(--ink-3);
}
/* Tabellenkopf: Kicker-Rezept (11px / 700 / 0.14em / Versalien / --ink-3). Die Scopes stehen hier, weil
index.css davor lädt und dieselbe Spezifität hat; .dt und .payments-table tragen das Rezept selbst.
Sticky-Verhalten, Padding und deckender Hintergrund bleiben bei den jeweiligen Regeln. */
thead th,
.tbl-compact thead th,
.banking-table thead th,
.recurring-table thead th,
.recurring-mini thead th {
font-size: 11px; line-height: 16px; font-weight: 700;
letter-spacing: 0.14em; text-transform: uppercase;
color: var(--ink-3);
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
/* Fokus: Ring statt Browser-Outline, auf allen interaktiven Elementen. :where() hält die Spezifität
niedrig — Komponentenregeln mit eigenem Fokusbild gewinnen. */
:where(a[href], button, input, select, textarea, summary, [tabindex]):focus-visible { outline: none; box-shadow: var(--focus-ring); }
::selection { background: var(--accent); color: var(--accent-ink); }
/* =========================================================
APP SHELL
========================================================= */
.app {
display: grid;
/* minmax(0, 1fr): sonst wächst die Spalte auf die min-content-Breite der
Kopfleiste (Bereichs-Tabs) und erzwingt unter ~930px horizontalen Body-Scroll. */
grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
grid-template-rows: var(--header-h) 1fr;
grid-template-areas: "sidebar header" "sidebar main";
min-height: 100vh;
}
/* =========================================================
SIDEBAR
========================================================= */
.sidebar {
grid-area: sidebar;
background-color: var(--surface);
border-right: 1px solid var(--line);
display: flex;
flex-direction: column;
position: sticky;
top: 0;
height: 100vh;
height: 100dvh; /* iOS: exclude Safari toolbars so the footer isn't clipped */
overflow: hidden;
/* index.css setzt contain: layout paint; das würde fixierte Elemente (Rail-Tooltips) am Rand abschneiden. */
contain: none;
z-index: 20;
}
/* Marke witti.cloud (Designsystem): typografische Wortmarke, kein Bild-Logo. Quelle: DESIGN.md „Marke“. */
.sidebar-brand {
display: flex; align-items: center; gap: 0.65rem;
padding: 0 16px;
height: var(--header-h);
border-bottom: 1px solid var(--line);
flex-shrink: 0;
font-weight: 800;
letter-spacing: -0.04em;
color: var(--ink);
}
.brand-full { display: flex; flex-direction: column; min-width: 0; line-height: 1.1; }
.brand-name { font-size: var(--fs-xl); font-weight: 800; letter-spacing: -0.03em; color: var(--ink); }
.brand-name .brand-tld { color: var(--accent); }
.brand-sub { margin-top: 2px; font-size: 11px; font-weight: 500; letter-spacing: 0; line-height: 1.3; color: var(--ink-3); }
.brand-short { display: none; font-size: var(--fs-xl); font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: var(--ink); }
.brand-short span { color: var(--accent); }
/* Eigenes Logo aus den Einstellungen ersetzt Name und Unterzeile (applyBrandLogo in index.js). */
.brand-logo { display: block; max-height: 32px; max-width: 100%; object-fit: contain; }
/* Login-Seite (renderLoginPage): Wortmarke zentriert, Größe bleibt die der Login-Karte (h1 in index.css). */
.login-brand { margin: 0; text-align: center; }
.login-brand .brand-name { font-size: inherit; }
.sidebar-nav {
flex: 1;
min-height: 0;
padding: 4px 8px 8px;
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-width: thin;
display: flex;
flex-direction: column;
}
/* Gruppen: der Name ist der Umschalter, die Links liegen in .sidebar-group-links. */
.sidebar-group { display: flex; flex-direction: column; margin-top: 4px; }
.sidebar-group[hidden] { display: none !important; }
.sidebar-group-toggle {
display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
width: 100%; height: 28px;
padding: 0 8px;
border: 0;
border-radius: var(--radius-sm);
background-color: transparent;
color: var(--ink-3);
font: inherit;
font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
text-align: left;
transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.sidebar-group-toggle:hover { background-color: var(--surface-3); }
.sidebar-group-toggle .chevron { width: 14px; height: 14px; transition: transform var(--dur-fast) var(--ease); }
.sidebar-group-toggle[aria-expanded="false"] .chevron { transform: rotate(-90deg); }
.sidebar-group-name { display: inline-flex; align-items: center; gap: 0.5rem; }
/* Zugeklappte Gruppe mit der aktiven Seite: kleiner Punkt statt Aktiv-Pille. */
.sidebar-group.is-collapsed.has-active .sidebar-group-name::after {
content: ""; flex: none;
width: 6px; height: 6px;
border-radius: var(--radius-pill);
background-color: var(--accent-2);
}
.sidebar-group-links { display: flex; flex-direction: column; }
.sidebar-group.is-collapsed .sidebar-group-links { display: none; }
.sidebar-link {
display: flex; align-items: center; gap: 0.6rem;
height: 32px;
padding: 0 8px;
border: none;
border-radius: var(--radius-sm);
background-color: transparent;
color: var(--ink-2);
font-size: var(--fs-sm);
font-weight: 600;
white-space: nowrap;
width: 100%;
text-align: left;
transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.sidebar-link .icon { width: 16px; height: 16px; color: var(--ink-3); transition: color var(--dur-fast) var(--ease); }
.sidebar-link:hover { background-color: var(--surface-3); color: var(--ink); }
.sidebar-link:hover .icon { color: var(--ink-2); }
.sidebar-link.is-active,
.sidebar-link[aria-current="page"] {
background-color: var(--accent-soft);
color: var(--accent);
font-weight: 700;
}
.sidebar-link.is-active .icon,
.sidebar-link[aria-current="page"] .icon { color: var(--accent); }
.sidebar-link .nav-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sidebar-link[hidden] { display: none !important; }
.sidebar-foot {
padding: 10px 12px;
border-top: 1px solid var(--line);
display: flex; align-items: center; gap: 10px;
flex-shrink: 0;
}
.user-avatar {
width: 30px; height: 30px;
border-radius: 50%;
background: linear-gradient(135deg, var(--accent-strong), var(--accent));
color: var(--accent-ink);
display: grid; place-items: center;
font-weight: 700; font-size: 12px;
flex-shrink: 0;
}
.user-info { flex: 1; min-width: 0; }
.user-name { font-size: var(--fs-md); font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-mail { font-size: 10.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Rail-Modus (eingeklappte Seitenleiste, nur ab 901px; darunter ist die Leiste eine Schublade).
Der Zustand steht als html[data-sidebar="collapsed"] schon vor dem ersten Paint (Skript im Kopf von index.html).
Alle Gruppen sind offen, die Gruppenköpfe entfallen, die Labels bleiben für Screenreader, Tooltips kommen aus data-tip. */
@media (min-width: 901px) {
html[data-sidebar="collapsed"] .app { grid-template-columns: var(--sidebar-w-collapsed) minmax(0, 1fr); }
html[data-sidebar="collapsed"] .brand-full,
html[data-sidebar="collapsed"] .user-info { display: none; }
html[data-sidebar="collapsed"] .brand-short { display: block; }
html[data-sidebar="collapsed"] .sidebar-brand { justify-content: center; padding: 0; }
html[data-sidebar="collapsed"] .sidebar-nav { padding: 4px 6px 8px; }
html[data-sidebar="collapsed"] .sidebar-group { margin-top: 0; padding: 4px 0; }
html[data-sidebar="collapsed"] .sidebar-group + .sidebar-group { border-top: 1px solid var(--line-soft); }
html[data-sidebar="collapsed"] .sidebar-group-toggle { display: none; }
html[data-sidebar="collapsed"] .sidebar-group.is-collapsed .sidebar-group-links { display: flex; }
html[data-sidebar="collapsed"] .sidebar-link {
position: relative;
justify-content: center;
width: 40px; height: 40px;
margin-inline: auto;
padding: 0;
}
html[data-sidebar="collapsed"] .sidebar-link .nav-label {
position: absolute; flex: none;
width: 1px; height: 1px;
padding: 0; overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
html[data-sidebar="collapsed"] .sidebar-foot { justify-content: center; }
/* Tooltip: fixiert, damit weder der Scrollbereich der Navigation noch overflow der Leiste ihn abschneiden.
Die vertikale Lage ergibt sich aus der statischen Position (Flex-Mitte des Links). */
html[data-sidebar="collapsed"] .sidebar [data-tip]::after {
content: attr(data-tip);
position: fixed;
left: calc(var(--sidebar-w-collapsed) + 8px);
z-index: 70;
padding: 0.3rem 0.55rem;
border-radius: var(--radius-xs);
background-color: var(--ink);
color: var(--surface);
font-size: var(--fs-xs); font-weight: 600; line-height: 1.3;
white-space: nowrap;
opacity: 0; visibility: hidden;
pointer-events: none;
transform: translateX(-4px);
transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), visibility 0s linear var(--dur-fast);
}
html[data-sidebar="collapsed"] .sidebar [data-tip]:hover::after,
html[data-sidebar="collapsed"] .sidebar [data-tip]:focus-visible::after {
opacity: 1; visibility: visible;
transform: none;
transition-delay: 0s;
}
}
.sidebar-backdrop { display: none; position: fixed; inset: 0; background: var(--scrim); z-index: 19; }
.sidebar-backdrop.is-open { display: block; }
/* =========================================================
APP HEADER
========================================================= */
/* Profitberichte-Balken: andersfarbiger Streifen ganz oben (über dem App-Grid). */
.profit-bar {
background: linear-gradient(135deg, var(--accent-strong), var(--accent));
color: var(--accent-ink);
border-bottom: 1px solid var(--line-strong);
cursor: pointer;
}
.profit-bar[hidden] { display: none; }
.profit-bar-inner {
max-width: var(--content-max);
margin: 0 auto;
display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
gap: 10px 28px;
padding: 7px var(--gutter);
min-height: 34px;
}
.profit-bar-logo {
display: inline-flex; align-items: center; justify-content: center;
/* Weiße Trägerfläche für das Fremdlogo — bleibt in beiden Themes weiß,
var(--surface) würde es im Dark verschlucken. Keine Palette-Umgehung. */
/* stylelint-disable-next-line declaration-property-value-disallowed-list */
background: #fff; padding: 5px 10px; border-radius: var(--radius-sm);
/* Bewusst ein lokaler Kontaktschatten statt der breiten Karten-Elevation:
der Chip sitzt auf der gesättigten Akzentfläche der Leiste. */
box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 22%, transparent);
}
.profit-bar-logo .amzn-logo { display: block; height: 18px; width: auto; }
.profit-kpi { display: inline-flex; align-items: baseline; gap: 8px; }
.profit-kpi .pk-label {
font-size: 11px; font-weight: 600; text-transform: uppercase;
letter-spacing: 0.06em; opacity: 0.82;
}
.profit-kpi .pk-val {
font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums;
letter-spacing: -0.01em;
}
/* --danger-soft dreht mit dem Theme: hell auf der dunklen Akzentfläche (Light)
und dunkel auf der hellen (Dark). Ein fester Ton trägt hier in nur einem Theme. */
.profit-kpi .pk-val.is-negative { color: var(--danger-soft); }
.profit-bar-meta { font-size: 11px; opacity: 0.82; }
/* Verlustwerte in KPI-Kacheln rot hervorheben. */
.kpi-value.is-negative { color: var(--danger); }
.app-header {
grid-area: header;
background-color: var(--surface);
border-bottom: 1px solid var(--line);
display: flex; align-items: center; gap: 14px;
padding: 0 var(--gutter);
position: sticky; top: 0;
z-index: 15;
min-width: 0;
}
/* Selector carries .app-header so it beats the generic .icon-btn display rule. */
.app-header .header-toggle {
display: none;
width: 34px; height: 34px;
border-radius: var(--radius-pill);
border: 1px solid var(--line);
background: var(--surface);
color: var(--ink-2);
}
.header-spacer { flex: 1; }
/* Brotkrumen „Gruppe › Seite“ (index.js setzt #crumb-group/#crumb-page in switchView). */
.app-header .crumbs {
display: flex; align-items: center; gap: 6px;
min-width: 0;
font-size: var(--fs-sm); font-weight: 600;
white-space: nowrap;
}
.crumb-group { color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; }
.crumb-sep { color: var(--ink-3); }
.crumb-page { color: var(--ink); font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
/* Auslöser der Befehlspalette: sieht aus wie ein Suchfeld, ist ein Button. */
.cmdk-trigger {
display: flex; align-items: center; gap: 0.6rem;
width: min(100%, 340px);
height: 36px;
padding: 0 0.5rem 0 0.75rem;
border: 1px solid var(--line-strong);
border-radius: var(--radius);
background-color: var(--surface-2);
color: var(--ink-3);
font-size: var(--fs-md);
text-align: left;
transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.cmdk-trigger:hover { border-color: var(--accent-2); color: var(--ink-2); }
.cmdk-trigger .cmdk-trigger-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmdk-trigger kbd {
display: inline-flex; align-items: center; justify-content: center;
min-width: 20px; height: 20px;
padding: 0 0.35rem;
border: 1px solid var(--line-strong);
border-radius: var(--radius-xs);
background-color: var(--surface);
color: var(--ink-3);
font-family: var(--font-sans);
font-size: 11px; font-weight: 600; line-height: 1;
}
.status-pill {
display: inline-flex; align-items: center; gap: 6px;
height: 26px; padding: 0 10px;
background: var(--success-soft);
color: var(--success);
border-radius: var(--radius-pill);
font-size: 11px; font-weight: 600;
}
.status-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status-pill[data-state="running"] { background: var(--accent-soft); color: var(--accent); }
.status-pill[data-state="running"] .dot { animation: pulse 1.4s infinite; }
.status-pill[data-state="awaiting"] { background: var(--warn-soft); color: var(--warn); }
.status-pill[data-state="awaiting"] .dot { animation: pulse 1.4s infinite; }
@keyframes pulse { 0%,100% {opacity:1} 50% {opacity:.35} }
/* Lucide-Icons aus dem Sprite (/assets/icons.svg): .
Strichstärke und Farbe kommen vom Text (currentColor), die Größe über width/height.
:where() hält die Spezifität bei 0, damit die Einzelgrößen in index.css (Reihenfolge:
index.css vor app.css) und Kontextregeln wie `.btn .icon` sich weiter durchsetzen. */
:where(.icon) {
width: 18px;
height: 18px;
flex: none;
stroke: currentColor;
stroke-width: 1.75;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
vertical-align: middle;
}
.icon-sm { width: 16px; height: 16px; }
.icon-lg { width: 20px; height: 20px; }
.icon-btn {
width: 34px; height: 34px;
display: inline-grid; place-items: center;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-pill);
color: var(--ink-2);
transition: all var(--dur-fast);
}
.icon-btn:hover { background: var(--surface-2); color: var(--ink); border-color: var(--line-strong); }
.icon-btn svg { width: 15px; height: 15px; }
.icon-btn.has-dot { position: relative; }
.icon-btn.has-dot::after {
content: ""; position: absolute; top: 6px; right: 6px;
width: 7px; height: 7px;
border-radius: 50%; background: var(--danger);
border: 2px solid var(--surface);
}
/* Theme toggle visual */
.theme-toggle .icon-sun { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun { display: inline-block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
/* =========================================================
BEFEHLSPALETTE (⌘K; DOM baut command-palette.js)
========================================================= */
.cmdk-backdrop {
position: fixed; inset: 0;
z-index: 200;
display: flex; align-items: flex-start; justify-content: center;
padding: 12vh var(--gutter-sm) var(--gutter-sm);
background-color: var(--scrim);
}
.cmdk {
display: flex; flex-direction: column;
width: min(640px, 100%);
max-height: min(480px, calc(100dvh - 14vh));
overflow: hidden;
border: 1px solid var(--line);
border-radius: var(--radius-xl);
background-color: var(--surface);
color: var(--ink);
box-shadow: var(--shadow-lg);
}
/* Das Eingabefeld trägt .cmdk-input selbst; .cmdk davor hebt die Spezifität über die globale Feldregel. */
.cmdk .cmdk-input {
flex: none;
width: 100%; height: 56px;
padding: 0 1rem;
border: 0;
border-bottom: 1px solid var(--line);
border-radius: 0;
background-color: transparent;
color: var(--ink);
font-size: var(--fs-xl);
}
.cmdk .cmdk-input:focus,
.cmdk .cmdk-input:focus-visible { border-color: var(--accent-2); box-shadow: none; outline: none; }
.cmdk .cmdk-input::placeholder { color: var(--ink-3); opacity: 1; }
.cmdk-list { flex: 1; min-height: 0; overflow: auto; padding: 0.5rem; list-style: none; }
.cmdk-option {
display: flex; align-items: center; gap: 0.75rem;
height: 40px;
padding: 0 0.6rem;
border-radius: var(--radius-sm);
color: var(--ink);
font-size: var(--fs-md);
cursor: pointer;
transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.cmdk-option .icon { color: var(--ink-3); }
.cmdk-option-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmdk-option-group { flex: none; color: var(--ink-3); font-size: var(--fs-xs); font-weight: 600; }
.cmdk-option:hover { background-color: var(--surface-3); }
.cmdk-option.is-active,
.cmdk-option[aria-selected="true"] { background-color: var(--accent-soft); color: var(--accent); }
.cmdk-option.is-active .icon,
.cmdk-option[aria-selected="true"] .icon,
.cmdk-option.is-active .cmdk-option-group,
.cmdk-option[aria-selected="true"] .cmdk-option-group { color: var(--accent); }
.cmdk-empty { padding: 1.25rem 0.6rem; color: var(--ink-3); font-size: var(--fs-md); text-align: center; }
/* Belegsuche: Gruppen-Überschrift (Kicker-Rezept), Meta rechts (Datum/Betrag), Ladezeile */
.cmdk-heading {
padding: 0.75rem 0.6rem 0.25rem;
color: var(--ink-3);
font-size: 11px; line-height: 16px; font-weight: 700;
letter-spacing: 0.14em; text-transform: uppercase;
}
.cmdk-option-meta {
flex: none;
display: flex; align-items: baseline; gap: 0.75rem;
color: var(--ink-3);
font-family: var(--font-tabular);
font-size: var(--fs-xs);
font-variant-numeric: tabular-nums;
}
.cmdk-meta-amount { min-width: 6.5rem; color: var(--ink-2); font-weight: 600; text-align: right; }
.cmdk-option.is-active .cmdk-option-meta,
.cmdk-option[aria-selected="true"] .cmdk-option-meta,
.cmdk-option.is-active .cmdk-meta-amount,
.cmdk-option[aria-selected="true"] .cmdk-meta-amount { color: var(--accent); }
.cmdk-loading { padding: 0.5rem 0.6rem; color: var(--ink-3); font-size: var(--fs-sm); }
@media (max-width: 600px) { .cmdk-meta-date { display: none; } .cmdk-meta-amount { min-width: 0; } }
/* =========================================================
MAIN
========================================================= */
.app-main {
grid-area: main;
padding: var(--gutter);
overflow-x: hidden;
min-width: 0;
}
.main-inner { max-width: var(--content-max); margin: 0 auto; }
.view { display: none; }
.view.is-active { display: block; animation: fadeIn 0.18s var(--ease); }
@keyframes fadeIn { from { opacity:0; transform: translateY(3px);} to {opacity:1;transform:none;} }
/* =========================================================
PAGE HEADER
========================================================= */
.page-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
flex-wrap: wrap;
margin-bottom: 18px;
padding-bottom: 14px;
border-bottom: 1px solid var(--line);
}
.page-head .titles { min-width: 0; }
.page-head .crumbs {
font-size: 11px; font-weight: 500;
color: var(--ink-3);
margin-bottom: 4px;
display: inline-flex; align-items: center; gap: 6px;
text-transform: uppercase; letter-spacing: 0.06em;
}
.page-head .crumbs .sep { color: var(--ink-4); }
.page-head h1 {
font-size: 22px;
font-weight: 700;
letter-spacing: -0.022em;
color: var(--ink);
line-height: 1.2;
margin-bottom: 3px;
text-transform: none;
}
.page-head .subtitle {
font-size: var(--fs-md);
color: var(--ink-3);
font-weight: 500;
}
.page-head .actions { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* =========================================================
BUTTONS
========================================================= */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
font-family: inherit; font-weight: 600;
font-size: var(--fs-md);
height: 34px;
padding: 0 13px;
background: var(--surface);
color: var(--ink);
border: 1px solid var(--line);
border-radius: var(--radius-pill);
transition: all var(--dur-fast);
white-space: nowrap;
}
.btn:hover { background: var(--surface-2); border-color: var(--line-strong); }
.btn:active { transform: translateY(0.5px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.btn svg { width: 14px; height: 14px; }
/* Primär: Signalgelb steigt beim Hover von unten auf, das Label wird --signal-ink. */
.btn-primary {
position: relative; overflow: hidden; isolation: isolate;
background-color: var(--accent-strong);
color: var(--accent-ink);
border-color: transparent;
box-shadow: none;
transition: color var(--dur) var(--ease), border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.btn-primary::before {
content: ""; position: absolute; inset: 0; z-index: -1;
background-color: var(--signal);
transform: translateY(101%);
transition: transform var(--dur) var(--ease);
}
.btn-primary:hover, .btn-primary:focus-visible { background-color: var(--accent-strong); border-color: transparent; box-shadow: none; color: var(--signal-ink); }
.btn-primary:hover::before, .btn-primary:focus-visible::before { transform: none; }
.btn-primary:focus-visible { box-shadow: var(--focus-ring); }
.btn-primary:disabled::before, .btn-primary[aria-disabled="true"]::before { display: none; }
@media (prefers-reduced-motion: reduce) {
.btn-primary, .btn-primary::before { transition: none; }
}
.btn-pink { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn-pink:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn-ghost:hover { background: var(--surface-2); color: var(--ink); }
.btn-sm { height: 30px; padding: 0 10px; font-size: var(--fs-sm); }
.btn-xs { height: 24px; padding: 0 8px; font-size: 11px; gap: 4px; }
.btn-xs svg { width: 12px; height: 12px; }
.btn-icon { width: 34px; padding: 0; }
.btn-icon.btn-sm { width: 30px; }
.btn-icon.btn-xs { width: 24px; }
.btn-group {
display: inline-flex;
border: 1px solid var(--line);
border-radius: var(--radius-pill);
background: var(--surface);
overflow: hidden;
padding: 2px;
gap: 1px;
}
.btn-group .btn {
border: none;
background: transparent;
height: 26px;
font-size: var(--fs-sm);
color: var(--ink-2);
font-weight: 500;
border-radius: var(--radius-pill);
padding: 0 10px;
}
.btn-group .btn.is-active { background: var(--accent-strong); color: var(--accent-ink); }
.btn-group .btn:hover:not(.is-active) { background: var(--surface-2); color: var(--ink); }
/* =========================================================
CARDS
========================================================= */
.card {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-sm);
margin-bottom: var(--gutter-sm);
overflow: hidden;
}
.card-head {
display: flex; align-items: center; justify-content: space-between; gap: 16px;
padding: 13px 18px;
border-bottom: 1px solid var(--line);
background: var(--surface);
}
.card-head .titlewrap { min-width: 0; }
.card-head h2 {
font-size: var(--fs-lg);
font-weight: 700;
color: var(--ink);
letter-spacing: -0.015em;
text-transform: none;
line-height: 1.3;
margin: 0;
}
.card-head .sub { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }
.card-head .actions { display: inline-flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.card-body { padding: 18px; }
.card-body.dense { padding: 10px 18px; }
.card-body.flush { padding: 0; }
/* =========================================================
KPI
========================================================= */
.kpi-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--gutter-sm);
margin-bottom: var(--gutter-sm);
}
.kpi {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-xl);
padding: 16px 18px;
position: relative;
}
.kpi-label {
display: flex; align-items: center; gap: 6px;
font-size: 11px; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.06em;
color: var(--ink-3);
}
.kpi-label .kpi-icon { width: 14px; height: 14px; color: var(--ink-3); }
.kpi-value {
margin-top: 8px;
font-size: 24px;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--ink);
font-variant-numeric: tabular-nums;
line-height: 1.1;
}
.kpi-value .unit { font-size: 13px; font-weight: 600; color: var(--ink-3); margin-left: 2px; }
.kpi-meta {
margin-top: 8px;
font-size: 11px;
color: var(--ink-3);
display: flex; align-items: center; gap: 6px;
}
.kpi-trend { display: inline-flex; align-items: center; gap: 2px; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.kpi-trend.up { color: var(--success); }
.kpi-trend.down { color: var(--danger); }
/* =========================================================
UPCOMING PAYMENTS (Anstehende Zahlungen)
========================================================= */
.due-row {
display: grid;
grid-template-columns: minmax(220px, 280px) 1fr;
gap: var(--gutter-sm);
margin-top: 1rem;
}
.due-kpi {
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 170px;
}
.due-kpi .kpi-value {
font-size: 2.2rem;
margin-top: 0.6rem;
}
.kpi-sub {
margin-top: 4px;
font-size: 12px;
color: var(--ink-3);
font-variant-numeric: tabular-nums;
}
.kpi-sub-warn {
color: var(--danger);
font-weight: 600;
}
.due-list-panel {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-xl);
display: flex;
flex-direction: column;
min-height: 170px;
overflow: hidden;
}
.due-list-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 16px;
border-bottom: 1px solid var(--line-soft, var(--line));
}
.due-list-title {
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ink-3);
}
.due-list-meta {
font-size: 11px;
color: var(--ink-4);
font-variant-numeric: tabular-nums;
}
.due-list {
display: flex;
flex-direction: column;
padding: 4px 0;
max-height: 280px;
overflow-y: auto;
}
.due-item {
display: grid;
grid-template-columns: 110px 70px 1fr auto;
align-items: center;
gap: 12px;
padding: 8px 16px;
width: 100%;
font: inherit;
font-size: 13px;
color: var(--ink-2);
text-align: left;
text-decoration: none;
background: transparent;
border: none;
border-bottom: 1px solid var(--line-soft, transparent);
transition: background 0.12s ease;
}
.due-item:last-child { border-bottom: none; }
button.due-item { cursor: pointer; }
button.due-item:hover,
a.due-item:hover { background: var(--surface-3); color: var(--ink); }
button.due-item:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.due-when {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--ink-3);
}
.due-when::before {
content: "";
display: inline-block;
width: 8px; height: 8px; border-radius: 50%;
margin-right: 6px;
background: currentColor;
box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 16%, transparent);
vertical-align: middle;
}
.due-date {
font-family: var(--font-mono);
font-size: 0.82rem;
color: var(--ink-2);
font-variant-numeric: tabular-nums;
}
.due-seller {
font-weight: 500;
color: var(--ink);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.due-amount {
font-variant-numeric: tabular-nums;
font-weight: 600;
color: var(--ink);
}
.due-item.is-overdue .due-when { color: var(--danger); }
.due-item.is-overdue .due-amount { color: var(--danger); }
.due-item.is-today .due-when { color: var(--accent); }
.due-list .empty-state {
padding: 24px 16px;
text-align: center;
color: var(--ink-3);
font-size: 13px;
}
.due-list .empty-state small {
display: block;
margin-top: 4px;
font-size: 11px;
color: var(--ink-4);
}
@media (max-width: 900px) {
.due-row { grid-template-columns: 1fr; }
.due-item { grid-template-columns: 90px 1fr auto; }
.due-item .due-date { display: none; }
}
/* =========================================================
CHARTS
========================================================= */
.chart-grid {
display: grid; grid-template-columns: 1.6fr 1fr;
gap: var(--gutter-sm); margin-bottom: var(--gutter-sm);
}
.bars {
display: flex; align-items: flex-end; gap: 18px;
height: 180px;
padding: 8px 4px 24px;
border-bottom: 1px solid var(--line);
position: relative;
}
.bars::before {
content: ""; position: absolute; left: 0; right: 0; top: 50%;
border-top: 1px dashed var(--line);
}
.bar-group {
flex: 1; display: flex; flex-direction: column; align-items: center;
height: 100%; justify-content: flex-end; position: relative;
}
.bar-group-bars { display: flex; align-items: flex-end; gap: 3px; width: 100%; height: 100%; justify-content: center; }
.bar {
width: 16px;
background: var(--ink-3);
border-radius: 3px 3px 0 0;
transition: filter var(--dur-fast);
}
.bar:hover { filter: brightness(1.1); }
.bar.bar-2 { background: var(--ink-4); }
.bar-label { position: absolute; bottom: -20px; font-size: 11px; font-weight: 500; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.bar-group.is-current .bar { background: var(--accent); }
.bar-group.is-current .bar.bar-2 { background: var(--accent-2); }
.bar-group.is-current .bar-label { color: var(--ink); font-weight: 700; }
.legend { display: inline-flex; gap: 12px; font-size: 11px; color: var(--ink-3); }
.legend-item { display: inline-flex; align-items: center; gap: 5px; }
.legend-dot { width: 8px; height: 8px; border-radius: 2px; background: var(--ink-3); }
.legend-dot.is-yellow, .legend-dot.is-pink { background: var(--accent); }
.legend-dot.is-pink { background: var(--accent); }
.legend-dot.is-yellow { background: var(--accent-2); }
.donut-stack { display: flex; flex-direction: column; gap: 14px; }
.donut-item .row { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--fs-md); }
.donut-item .label { font-weight: 500; color: var(--ink); }
.donut-item .value { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); }
.donut-item .pct { color: var(--ink-3); font-size: 11px; margin-left: 4px; }
.donut-bar { height: 6px; background: var(--surface-2); border-radius: var(--radius-pill); overflow: hidden; margin-top: 6px; }
.donut-bar .fill { height: 100%; background: var(--accent); border-radius: var(--radius-pill); }
.donut-bar .fill.f-pink { background: var(--src-email); }
.donut-bar .fill.f-yellow { background: var(--src-seller); }
.donut-bar .fill.f-aqua { background: var(--src-business); }
.donut-bar .fill.f-lime { background: var(--src-out); }
/* =========================================================
FEED
========================================================= */
.feed { display: flex; flex-direction: column; }
.feed-item {
display: grid; grid-template-columns: 70px 1fr auto;
gap: 14px; padding: 9px 0;
border-bottom: 1px solid var(--line-soft);
align-items: center;
}
.feed-item:last-child { border-bottom: none; }
.feed-time { font-family: var(--font-mono); font-size: 0.82rem; color: var(--ink-2); font-variant-numeric: tabular-nums; font-weight: 500; }
.feed-msg { font-size: var(--fs-md); color: var(--ink-2); }
.feed-msg strong { color: var(--ink); font-weight: 600; }
/* Dashboard feed lives in .recent-feed (index.css), whose scoped rules out-specify
the bare .feed-* rules above — re-assert the mono time here so it wins on load order. */
.recent-feed .feed-time { font-family: var(--font-mono); font-size: 0.82rem; color: var(--ink-2); }
.recent-feed .level-warn { color: var(--warn); }
.recent-feed .level-error { color: var(--danger); }
.feed-source {
font-size: 10px; font-weight: 600;
padding: 2px 8px;
border-radius: var(--radius-pill);
background: var(--surface-2);
color: var(--ink-2);
white-space: nowrap;
}
/* Tönung bewusst flach (10 %): die Quellenfarbe steht als 10-px-Text darauf. */
.feed-source.s-pink { background: color-mix(in oklab, var(--src-email) 10%, transparent); color: var(--src-email); }
.feed-source.s-yellow { background: color-mix(in oklab, var(--src-seller) 10%, transparent); color: var(--src-seller); }
.feed-source.s-green { background: color-mix(in oklab, var(--src-out) 10%, transparent); color: var(--src-out); }
/* =========================================================
WORKER-LOG (Dashboard): ein Lauf pro Zeile — Status-Punkt,
Aufgabe + Auslöser, Ergebnis, Zeitpunkt + Dauer.
========================================================= */
.wlog { display: flex; flex-direction: column; }
#ov-worker-running:not([hidden]) { border-bottom: 1px solid var(--line-soft); }
.wlog-row {
display: grid; grid-template-columns: 8px minmax(0, 1fr) auto;
gap: 12px; padding: 10px 0;
border-bottom: 1px solid var(--line-soft);
align-items: start;
}
.wlog-row:last-child { border-bottom: none; }
.wlog-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 7px; background: var(--success); }
.wlog-row[data-status="warning"] .wlog-dot { background: var(--warn); }
.wlog-row[data-status="error"] .wlog-dot { background: var(--danger); }
.wlog-row[data-status="skipped"] .wlog-dot { background: var(--ink-4); }
.wlog-row[data-status="running"] .wlog-dot { background: var(--accent); animation: pulse 1.4s ease-in-out infinite; }
.wlog-row[data-status="awaiting_otp"] .wlog-dot { background: var(--warn); animation: pulse 1.4s ease-in-out infinite; }
.wlog-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.wlog-label { font-weight: 600; color: var(--ink); font-size: 0.9rem; }
.wlog-summary { margin-top: 2px; font-size: 0.83rem; color: var(--ink-2); overflow-wrap: anywhere; }
.wlog-row[data-status="error"] .wlog-summary { color: var(--danger); }
.wlog-row[data-status="warning"] .wlog-summary { color: var(--warn); }
.wlog-when {
text-align: right; white-space: nowrap;
font-family: var(--font-tabular); font-variant-numeric: tabular-nums;
font-size: 0.8rem; color: var(--ink-2);
}
.wlog-when small { display: block; font-size: 0.72rem; color: var(--ink-3); }
.wlog-more { margin-top: 6px; }
/* =========================================================
FORMS
========================================================= */
/* Alle textartigen Eingaben — explizit aufgezählt statt über ein nacktes `input`,
damit Checkbox, Radio, File, Color und Range ihre eigene Behandlung behalten.
`input:not([type])` fängt die Felder ohne type-Attribut (Browser-Default: text). */
input:not([type]),
input[type="text"], input[type="email"], input[type="search"], input[type="password"],
input[type="tel"], input[type="url"], input[type="number"],
input[type="date"], input[type="time"], input[type="month"], input[type="datetime-local"],
textarea, select {
font-family: inherit;
font-size: var(--fs-md);
height: 34px;
padding: 0 12px;
background: var(--surface);
color: var(--ink);
border: 1px solid var(--line);
border-radius: var(--radius);
outline: none;
transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
textarea { padding: 10px 12px; height: auto; min-height: 80px; }
/* Ersetzt das entfernte outline: einziger Fokusindikator für Tastaturbedienung. */
input:focus, textarea:focus, select:focus {
border-color: var(--accent);
box-shadow: var(--focus-ring);
}
select {
appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-position: right 10px center;
background-repeat: no-repeat;
padding-right: 28px;
cursor: pointer;
}
[data-theme="dark"] select {
background-image: url("data:image/svg+xml;utf8,");
}
input::placeholder, textarea::placeholder { color: var(--ink-4); }
/* Auswahlfelder bleiben nativ (DESIGN.md), bekommen aber die Akzentfarbe.
Spezifischere Regeln — etwa --positive für „bezahlt" — gewinnen weiterhin. */
input[type="checkbox"], input[type="radio"] {
accent-color: var(--accent);
cursor: pointer;
}
/* Farbwähler: gleiche Kontur wie die übrigen Felder, Fläche bleibt die Farbprobe. */
input[type="color"] {
width: 38px;
height: 34px;
padding: 3px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
cursor: pointer;
}
.field-label {
font-size: 10.5px; font-weight: 600;
color: var(--ink-3);
text-transform: uppercase;
letter-spacing: 0.06em;
}
/* =========================================================
FILTER BAR — new dropdown system
========================================================= */
.filterbar {
display: flex; align-items: center; gap: 8px;
padding: 10px 16px;
background: var(--surface);
border-bottom: 1px solid var(--line);
flex-wrap: wrap;
}
.filterbar .grow { flex: 1; min-width: 180px; }
.filterbar .divider { width: 1px; height: 22px; background: var(--line); margin: 0 4px; }
.filterbar input[type="search"] { height: 32px; }
/* search field wrapping */
.search-field {
position: relative;
flex: 1;
min-width: 180px;
}
.search-field svg {
position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
width: 14px; height: 14px; color: var(--ink-3);
pointer-events: none;
}
.search-field input { padding-left: 32px !important; width: 100%; height: 32px; }
/* Dropdown filter trigger */
.filter-dd {
position: relative;
display: inline-flex;
}
.filter-dd > .dd-trigger {
display: inline-flex; align-items: center; gap: 6px;
height: 32px;
padding: 0 10px 0 11px;
background: var(--surface);
color: var(--ink);
border: 1px solid var(--line);
border-radius: var(--radius);
font-weight: 500;
font-size: var(--fs-sm);
white-space: nowrap;
transition: all var(--dur-fast);
}
.filter-dd > .dd-trigger:hover { border-color: var(--line-strong); background: var(--surface-2); }
.filter-dd > .dd-trigger .lbl {
font-size: 10px; font-weight: 600;
color: var(--ink-3);
text-transform: uppercase; letter-spacing: 0.06em;
margin-right: 2px;
}
.filter-dd > .dd-trigger .val {
font-weight: 600; color: var(--ink);
}
.filter-dd > .dd-trigger .caret {
width: 10px; height: 10px; color: var(--ink-3);
margin-left: 2px;
transition: transform var(--dur-fast);
}
.filter-dd.is-open > .dd-trigger { border-color: var(--accent); box-shadow: var(--focus-ring); }
.filter-dd.is-open > .dd-trigger .caret { transform: rotate(180deg); }
.filter-dd.has-value > .dd-trigger { border-color: var(--accent); background: var(--accent-soft); }
.filter-dd.has-value > .dd-trigger .lbl { color: var(--accent); }
.filter-dd.has-value > .dd-trigger .val { color: var(--accent); }
/* Dropdown panel */
.dd-panel {
position: absolute;
top: calc(100% + 6px); left: 0;
min-width: 220px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-pop);
padding: 6px;
z-index: 100;
display: none;
max-height: 360px;
overflow-y: auto;
}
.filter-dd.is-open .dd-panel { display: block; }
.dd-section {
font-size: 10px; font-weight: 600;
color: var(--ink-4);
text-transform: uppercase; letter-spacing: 0.06em;
padding: 8px 10px 4px;
}
.dd-option {
display: flex; align-items: center; gap: 10px;
padding: 7px 10px;
font-size: var(--fs-md);
color: var(--ink);
border-radius: var(--radius-sm);
cursor: pointer;
white-space: nowrap;
background: transparent;
border: none; width: 100%; text-align: left;
font-family: inherit;
}
.dd-option:hover { background: var(--surface-2); }
.dd-option.is-active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.dd-option .check {
width: 14px; height: 14px;
display: inline-grid; place-items: center;
flex-shrink: 0;
color: var(--accent);
opacity: 0;
}
.dd-option.is-active .check { opacity: 1; }
.dd-option .swatch {
width: 8px; height: 8px;
border-radius: 50%;
background: var(--ink-3);
flex-shrink: 0;
}
.dd-option .count {
margin-left: auto;
font-size: 10.5px; font-weight: 600;
color: var(--ink-3);
background: var(--surface-2);
padding: 1px 7px;
border-radius: var(--radius-pill);
font-variant-numeric: tabular-nums;
}
.dd-option.is-active .count { background: var(--accent); color: var(--accent-ink); }
.dd-divider { height: 1px; background: var(--line); margin: 4px 2px; }
.dd-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 4px;
padding: 4px;
}
.dd-grid .dd-cell {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-sm);
height: 30px;
font-size: 11.5px;
font-weight: 600;
color: var(--ink-2);
cursor: pointer;
font-family: inherit;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.dd-grid .dd-cell:hover { background: var(--surface-2); border-color: var(--line-strong); }
.dd-grid .dd-cell.is-active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.dd-grid .dd-cell.is-current { border-color: var(--accent); color: var(--accent); }
/* Active filter chip (clearable) */
.active-filters {
display: inline-flex; gap: 6px; flex-wrap: wrap; align-items: center;
}
.filter-clear {
display: inline-flex; align-items: center; gap: 5px;
height: 32px;
padding: 0 10px;
background: transparent;
border: 1px dashed var(--line);
color: var(--ink-3);
border-radius: var(--radius-sm);
font-size: var(--fs-sm); font-weight: 500;
font-family: inherit;
}
.filter-clear:hover { color: var(--danger); border-color: var(--danger); }
.filter-clear svg { width: 12px; height: 12px; }
/* Density toggle */
.density-toggle {
display: inline-flex;
border: 1px solid var(--line);
border-radius: var(--radius-pill);
overflow: hidden;
background: var(--surface);
padding: 2px;
gap: 1px;
}
.density-toggle button {
width: 28px; height: 26px;
display: grid; place-items: center;
background: transparent;
border: none;
border-radius: var(--radius-pill);
color: var(--ink-3);
}
.density-toggle button:hover { background: var(--surface-2); color: var(--ink); }
.density-toggle button.is-active { background: var(--accent); color: var(--accent-ink); }
.density-toggle svg { width: 14px; height: 14px; }
/* Legacy chip-row → kept compat but de-emphasized */
.chip-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.chip {
display: inline-flex; align-items: center; gap: 5px;
height: 28px; padding: 0 11px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-pill);
font-weight: 500; font-size: var(--fs-sm);
color: var(--ink-2);
cursor: pointer;
transition: all var(--dur-fast);
}
.chip:hover { background: var(--surface-2); }
/* Aktive Filter-Chips bleiben weich getönt — deckende Akzentflächen sind den
echten Aktionen (.btn-primary) vorbehalten. Gleiche Optik wie .btn-toggle. */
.chip.is-active {
background: var(--accent-soft);
color: var(--accent);
border-color: color-mix(in srgb, var(--accent) 32%, transparent);
}
.chip-count {
font-size: 10px; font-weight: 700;
padding: 1px 6px;
background: var(--surface-2); color: var(--ink-3);
border-radius: var(--radius-pill);
font-variant-numeric: tabular-nums;
}
.chip.is-active .chip-count { background: var(--surface); color: var(--accent); }
/* Month grid (legacy still used in sub-views) */
.month-grid {
display: grid; grid-template-columns: repeat(12, minmax(0,1fr));
gap: 4px; width: 100%;
}
.month-btn {
height: 30px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-sm);
font-weight: 600; font-size: 11px;
color: var(--ink-2);
cursor: pointer;
transition: all var(--dur-fast);
text-transform: uppercase; letter-spacing: 0.04em;
font-family: inherit;
}
.month-btn:hover { background: var(--surface-2); }
.month-btn.is-active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
@media (max-width: 720px) { .month-grid { grid-template-columns: repeat(6,1fr); } }
/* =========================================================
TABLES — UNIFIED across all views
========================================================= */
.table-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
background: var(--surface);
}
table.dt {
width: 100%;
border-collapse: separate;
border-spacing: 0;
font-size: 15px;
font-variant-numeric: tabular-nums;
}
.dt thead th {
background: var(--surface-2);
text-align: left;
padding: 9px 12px;
font-weight: 700;
font-size: 11px;
color: var(--ink-3);
text-transform: uppercase;
letter-spacing: 0.14em;
white-space: nowrap;
border-bottom: 1px solid var(--line);
border-top: 1px solid var(--line);
position: sticky; top: 0; z-index: 1;
}
.dt thead th:first-child { padding-left: 18px; }
.dt thead th:last-child { padding-right: 18px; }
.dt thead th.col-amount { text-align: right; }
.dt thead th.sortable { cursor: pointer; user-select: none; }
.dt thead th.sortable::after {
content: "↕";
margin-left: 4px;
opacity: 0.4;
font-size: 10px;
}
.dt thead th.sortable.is-sort-asc::after { content: "↑"; opacity: 1; color: var(--accent); }
.dt thead th.sortable.is-sort-desc::after { content: "↓"; opacity: 1; color: var(--accent); }
.dt tbody td {
padding: 9px 12px;
background: var(--surface);
border-bottom: 1px solid var(--line-soft);
vertical-align: middle;
color: var(--ink);
}
.dt tbody td:first-child { padding-left: 18px; }
.dt tbody td:last-child { padding-right: 18px; }
.dt tbody tr:hover td { background: var(--surface-3); }
.dt tbody tr.is-selected td { background: var(--accent-soft); }
.dt tbody tr:last-child td { border-bottom: none; }
/* Zebra mode (toggleable) */
.dt.is-zebra tbody tr:nth-child(even) td { background: var(--surface-2); }
.dt.is-zebra tbody tr:nth-child(even):hover td { background: var(--surface-3); }
/* Density modes */
.dt.is-compact tbody td { padding: 5px 12px; font-size: 13.5px; }
.dt.is-compact tbody td:first-child { padding-left: 18px; }
.dt.is-compact tbody td:last-child { padding-right: 18px; }
.dt.is-compact .row-sub { display: none; }
.dt.is-compact .doc-icon { width: 22px; height: 28px; font-size: 7.5px; }
.dt.is-relaxed tbody td { padding: 14px 12px; }
.dt.is-relaxed tbody td:first-child { padding-left: 18px; }
.dt.is-relaxed tbody td:last-child { padding-right: 18px; }
/* Column helpers */
.dt .col-mono {
font-family: var(--font-mono);
font-size: 13.5px;
color: var(--ink-2);
}
.dt .col-amount { text-align: right; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dt .col-actions { text-align: right; white-space: nowrap; width: 1%; }
.dt .col-checkbox { width: 32px; padding-right: 0 !important; }
.dt .col-narrow { width: 1%; white-space: nowrap; }
.dt .col-icon { width: 1%; padding-right: 6px !important; }
.dt .row-title { font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 280px; }
.dt .row-sub { font-size: 12.5px; color: var(--ink-3); margin-top: 1px; }
/* Doc icon */
.doc-icon {
width: 26px; height: 32px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: 4px;
display: grid; place-items: center;
font-weight: 700; font-size: 8px;
letter-spacing: 0.05em;
color: var(--danger);
position: relative;
flex-shrink: 0;
}
.doc-icon.is-xml { color: var(--success); }
.doc-icon::before {
content: ""; position: absolute;
top: 0; right: 0;
width: 6px; height: 6px;
background: var(--line);
border-bottom-left-radius: 3px;
}
/* Tags / Status */
.tag {
display: inline-flex; align-items: center; gap: 4px;
height: 21px; padding: 0 8px;
font-size: 11px; font-weight: 600;
border-radius: var(--radius-pill);
background: var(--surface-2); color: var(--ink-2);
white-space: nowrap;
border: 1px solid transparent;
}
.tag-success { background: var(--success-soft); color: var(--success); }
.tag-warn { background: var(--warn-soft); color: var(--warn); }
.tag-danger { background: var(--danger-soft); color: var(--danger); }
.tag-pink { background: color-mix(in oklab, var(--src-seller) 12%, transparent); color: var(--src-seller); }
.tag-yellow { background: color-mix(in oklab, var(--src-business) 12%, transparent); color: var(--src-business); }
.tag-mute { background: var(--surface-2); color: var(--ink-3); }
.tag-ink { background: var(--ink); color: var(--surface); }
.tag .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
/* Source dot tags */
.tag-src { background: transparent; border: 1px solid var(--line); color: var(--ink-2); padding-left: 6px; }
.tag-src::before {
content: ""; display: inline-block;
width: 6px; height: 6px; border-radius: 50%;
background: var(--ink-3);
margin-right: 5px;
}
.tag-src.s-email::before { background: var(--src-email); }
.tag-src.s-seller::before { background: var(--src-seller); }
.tag-src.s-business::before { background: var(--src-business); }
.tag-src.s-out::before { background: var(--src-out); }
.tag-src.s-bank::before { background: var(--src-bank); }
/* Row action icons */
.row-actions { display: inline-flex; gap: 1px; }
.row-action {
width: 26px; height: 26px;
display: inline-grid; place-items: center;
background: transparent;
border: 1px solid transparent;
border-radius: var(--radius-pill);
color: var(--ink-3);
cursor: pointer;
transition: all var(--dur-fast);
}
.row-action:hover { background: var(--surface-2); color: var(--ink); border-color: var(--line); }
.row-action.is-on { color: var(--success); }
.row-action.is-danger:hover { color: var(--danger); background: var(--danger-soft); border-color: var(--danger-soft); }
.row-action svg { width: 14px; height: 14px; }
/* Checkbox */
.checkbox {
appearance: none;
width: 15px; height: 15px;
border: 1.5px solid var(--line-strong);
border-radius: var(--radius-xs);
background: var(--surface);
cursor: pointer;
display: grid; place-items: center;
vertical-align: middle;
}
.checkbox:checked {
background: var(--accent);
border-color: var(--accent);
}
.checkbox:checked::after {
content: "✓"; color: var(--accent-ink);
font-size: 10.5px; font-weight: 700; line-height: 1;
}
/* Table footer / pagination */
.table-footer {
display: flex; align-items: center; justify-content: space-between;
gap: 12px;
padding: 9px 18px;
border-top: 1px solid var(--line);
background: var(--surface);
font-size: 13px;
color: var(--ink-3);
flex-wrap: wrap;
}
.table-footer .summary { font-variant-numeric: tabular-nums; font-weight: 500; }
.table-footer .summary strong { color: var(--ink); font-weight: 700; }
.pager {
display: inline-flex; align-items: center; gap: 4px;
}
.pager .page-btn {
min-width: 28px; height: 26px;
padding: 0 8px;
background: transparent;
border: 1px solid transparent;
border-radius: var(--radius-sm);
color: var(--ink-2);
font-weight: 600; font-size: 13px;
font-family: inherit;
font-variant-numeric: tabular-nums;
}
.pager .page-btn:hover { background: var(--surface-2); border-color: var(--line); }
.pager .page-btn.is-active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.pager .page-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.pager .ellipsis { color: var(--ink-4); padding: 0 4px; }
.totals-bar {
display: flex; gap: 24px; align-items: center;
flex-wrap: wrap;
font-size: 13px;
color: var(--ink-3);
}
.totals-bar > div { display: inline-flex; align-items: baseline; gap: 6px; }
.totals-bar strong {
color: var(--ink); font-weight: 700; font-size: 14px;
font-variant-numeric: tabular-nums;
}
/* Bulk actions bar (when selection > 0) */
.bulk-bar {
display: none;
align-items: center; gap: 12px;
padding: 8px 18px;
background: var(--accent);
color: var(--accent-ink);
border-bottom: 1px solid var(--accent-2);
}
.bulk-bar.is-active { display: flex; }
.bulk-bar .count { font-weight: 700; font-size: var(--fs-md); }
.bulk-bar .spacer { flex: 1; }
/* Glas-Buttons auf voller Akzentfläche — Auflage aus --accent-ink, damit sie in beiden Themes trägt. */
/* Aufhellung bewusst flach: die Schrift ist --accent-ink, jedes Prozent Fläche
frisst direkt Kontrast gegen sie. */
.bulk-bar .btn { background: color-mix(in srgb, var(--accent-ink) 8%, transparent); color: var(--accent-ink); border-color: color-mix(in srgb, var(--accent-ink) 30%, transparent); }
.bulk-bar .btn:hover { background: color-mix(in srgb, var(--accent-ink) 14%, transparent); border-color: color-mix(in srgb, var(--accent-ink) 42%, transparent); }
/* =========================================================
JOB CARDS
========================================================= */
.job-card {
display: grid; gap: 12px;
padding: 14px 16px;
border-radius: var(--radius);
border: 1px solid var(--line);
background: var(--surface);
}
.job-card.is-running { background: var(--accent-soft); border-color: color-mix(in oklab, var(--accent) 25%, transparent); }
.job-card.is-otp { background: var(--warn-soft); border-color: color-mix(in oklab, var(--warn) 25%, transparent); }
.job-card.is-done { background: var(--success-soft); border-color: color-mix(in oklab, var(--success) 25%, transparent); }
/* app.css lädt nach index.css: nur hier schlägt is-error das Dark-Override `[data-theme="dark"] .job-card` (gleiche Spezifität). */
.job-card.is-error { background-color: var(--danger-soft); border-color: color-mix(in oklab, var(--danger) 25%, transparent); }
.job-headline { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.job-msg { font-size: var(--fs-lg); font-weight: 600; color: var(--ink); flex: 1; min-width: 200px; }
.job-meta { font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.progress-track {
height: 6px; background: var(--surface-3);
border-radius: var(--radius-pill); overflow: hidden; position: relative;
}
.progress-track::after {
content: ""; position: absolute; inset: 0;
width: var(--pct, 0%);
background: var(--accent);
background-image: repeating-linear-gradient(
-45deg, transparent, transparent 6px,
color-mix(in srgb, var(--accent-ink) 25%, transparent) 6px,
color-mix(in srgb, var(--accent-ink) 25%, transparent) 12px);
background-size: 17px 17px;
animation: bar-stripe 1.2s linear infinite;
transition: width .3s ease;
}
@keyframes bar-stripe { to { background-position: 17px 0; } }
.progress-text {
display: flex; justify-content: space-between;
font-size: 11px; font-weight: 600; color: var(--ink-2);
font-variant-numeric: tabular-nums;
}
.otp-block {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 14px 16px;
display: grid; gap: 10px;
}
.otp-head { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-md); font-weight: 600; color: var(--ink); }
.otp-head svg { width: 16px; height: 16px; color: var(--accent); }
.otp-form { display: flex; gap: 8px; flex-wrap: wrap; }
.otp-form input {
font-family: var(--font-mono);
font-size: 18px; font-weight: 700;
letter-spacing: 0.4em;
text-align: center;
height: 40px; width: 200px;
text-transform: uppercase;
}
details.log summary {
font-size: 11px; font-weight: 600;
color: var(--ink-3);
cursor: pointer; list-style: none;
display: inline-flex; align-items: center; gap: 6px;
}
details.log summary::-webkit-details-marker { display: none; }
details.log summary::before { content: "›"; font-size: 14px; font-weight: 700; transition: transform 0.2s; }
details.log[open] summary::before { transform: rotate(90deg); }
/* Terminal-Optik: bewusst theme-unabhängige Palette mit eigener Syntaxfärbung.
Das Log liest sich in beiden Themes als Konsole; var(--surface-sunk) würde es
im Light-Theme hell machen. Siehe DESIGN.md, „Bewusst nicht angefasst". */
.log-pane {
margin-top: 10px;
/* stylelint-disable-next-line declaration-property-value-disallowed-list */
background: #0A1018; color: #9DD9B0;
font-family: var(--font-mono);
font-size: 11px; line-height: 1.7;
padding: 12px 14px;
border-radius: var(--radius-sm);
max-height: 200px; overflow-y: auto;
}
/* stylelint-disable-next-line declaration-property-value-disallowed-list */
.log-pane .ts { color: #8AC9DC; margin-right: 0.5em; }
/* stylelint-disable-next-line declaration-property-value-disallowed-list */
.log-pane .lvl-warn { color: #F5D17A; }
/* stylelint-disable-next-line declaration-property-value-disallowed-list */
.log-pane .lvl-err { color: #F08AA0; }
/* Aktionen unter dem Verlauf, z. B. Diagnose-Download */
.log-actions { margin-top: var(--gutter-sm); display: flex; justify-content: flex-end; }
.log-actions[hidden] { display: none; }
.log-actions .btn { display: inline-flex; align-items: center; gap: 6px; }
.log-actions .icon { width: 16px; height: 16px; }
/* =========================================================
SWITCH
========================================================= */
.switch {
position: relative;
width: 36px; height: 20px;
background: var(--line-strong);
border-radius: var(--radius-pill);
cursor: pointer;
flex-shrink: 0;
transition: background var(--dur-fast);
display: inline-block;
}
.switch::after {
content: ""; position: absolute;
width: 14px; height: 14px;
/* Der Schalterknopf bleibt in beiden Themes weiß — var(--surface) würde ihn
im Dark auf der Schalterbahn unsichtbar machen. */
/* stylelint-disable-next-line declaration-property-value-disallowed-list */
background: #fff;
border-radius: 50%;
top: 3px; left: 3px;
box-shadow: var(--shadow-sm);
transition: left var(--dur-fast);
}
.switch.is-on { background: var(--accent); }
.switch.is-on::after { left: 19px; }
/* =========================================================
BANKING SPECIFIC
========================================================= */
.amount.pos { color: var(--success); font-weight: 700; }
.amount.neg { color: var(--ink); font-weight: 700; }
.status-cell { display: inline-flex; align-items: center; gap: 8px; }
.status-cell .bar { width: 3px; height: 20px; background: var(--ink-4); border-radius: 2px; }
.status-cell.s-assigned .bar { background: var(--success); }
.status-cell.s-suggested .bar { background: var(--warn); }
.status-cell.s-unmatched .bar { background: var(--danger); }
.status-cell.s-ignored .bar { background: var(--ink-4); }
.status-cell .lbl { font-size: 11px; font-weight: 600; color: var(--ink-2); }
/* =========================================================
EMPTY / HINT
========================================================= */
.hint { font-size: var(--fs-md); color: var(--ink-3); line-height: 1.6; }
.hint code {
background: var(--surface-2);
border: 1px solid var(--line);
padding: 1px 6px;
border-radius: 4px;
font-family: var(--font-mono);
font-size: 11px; color: var(--ink);
}
/* legacy toolbar — keep for compat in non-table cards */
.toolbar {
display: flex; align-items: center; gap: 8px;
padding: 10px 16px;
background: var(--surface);
border-bottom: 1px solid var(--line);
flex-wrap: wrap;
}
.toolbar .grow { flex: 1; min-width: 200px; }
.toolbar .divider { width: 1px; height: 22px; background: var(--line); margin: 0 4px; }
.toolbar input[type="search"] { height: 32px; }
/* ===== Amazon-Konto (Online-Banking-Stil) ===================== */
.account-strip {
display: flex;
gap: 12px;
overflow-x: auto;
padding: 12px 0;
margin-bottom: 12px;
}
.account-card {
flex: 0 0 auto;
min-width: 200px;
padding: 14px 16px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
text-align: left;
cursor: pointer;
position: relative;
font: inherit;
color: inherit;
transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;
}
.account-card:hover {
border-color: var(--accent);
background: var(--surface-2);
}
.account-card.is-active {
border-color: var(--accent);
background: var(--accent-soft);
box-shadow: 0 0 0 1px var(--accent);
}
.account-card-name {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--ink-3);
margin-bottom: 4px;
}
.account-card-balance {
font-size: 20px;
font-weight: 600;
color: var(--ink);
font-variant-numeric: tabular-nums;
}
.account-card-meta {
font-size: 12px;
color: var(--ink-3);
margin-top: 6px;
display: flex;
align-items: center;
gap: 6px;
}
.account-card-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 5px;
background: var(--accent);
color: var(--accent-ink);
font-size: 11px;
font-weight: 600;
border-radius: var(--radius-pill);
}
.account-header-card {
padding: 16px 18px;
background: var(--surface-2);
border: 1px solid var(--line);
border-radius: var(--radius);
margin-bottom: 14px;
}
.account-header-row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 16px;
}
.account-header-label {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--ink-3);
}
.account-header-balance {
font-size: 24px;
font-weight: 700;
color: var(--ink);
font-variant-numeric: tabular-nums;
}
.account-header-meta {
margin-top: 8px;
font-size: 13px;
color: var(--ink-2);
}
.account-header-in { color: var(--success); }
.account-header-out { color: var(--danger); }
.account-ref {
font-family: var(--font-mono);
font-size: 12px;
color: var(--ink-2);
}
.banking-row .amount-pos { color: var(--success); font-variant-numeric: tabular-nums; }
.banking-row .amount-neg { color: var(--danger); font-variant-numeric: tabular-nums; }
/* =========================================================
RESPONSIVE
========================================================= */
@media (max-width: 1240px) {
.kpi-grid { grid-template-columns: repeat(2, 1fr); }
.chart-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
:root { --sidebar-w: 0px; --gutter: 14px; }
.app {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto 1fr;
grid-template-areas: "header" "main";
}
/* Off-canvas drawer. Height uses dvh so the footer (Einstellungen /
Abmelden) is never hidden behind the iOS Safari toolbar. */
.sidebar {
position: fixed; top: 0; left: 0;
width: min(84vw, 300px);
height: 100vh;
height: 100dvh;
transform: translateX(-100%);
transition: transform var(--dur) var(--ease);
box-shadow: var(--shadow-lg);
padding-top: env(safe-area-inset-top);
padding-left: env(safe-area-inset-left);
}
.sidebar.is-open { transform: translateX(0); }
/* Die Schublade zeigt immer den ausgeklappten Look, auch wenn die Leiste am Desktop eingeklappt ist
(index.css setzt für [data-sidebar="collapsed"] sonst die Rail-Breite bzw. spaltenweise Fußzeile). */
.app.is-sidebar-collapsed .sidebar { width: min(84vw, 300px); }
html[data-sidebar="collapsed"] .sidebar-utility { flex-direction: row; }
html[data-sidebar="collapsed"] .user-chip { padding: 0.4rem 0.5rem; }
.sidebar-nav { -webkit-overflow-scrolling: touch; }
/* Larger, thumb-friendly tap targets on touch devices. */
.sidebar-link { height: auto; min-height: 40px; padding: 0 12px; }
.sidebar-group-toggle { height: 36px; padding: 0 12px; }
.sidebar-foot { padding-bottom: max(10px, env(safe-area-inset-bottom)); }
.app-header .header-toggle {
display: inline-grid; place-items: center;
width: 40px; height: 40px;
}
.app-header {
padding-left: max(var(--gutter), env(safe-area-inset-left));
padding-right: max(var(--gutter), env(safe-area-inset-right));
padding-top: env(safe-area-inset-top);
height: calc(var(--header-h) + env(safe-area-inset-top));
}
.app-header .hide-sm { display: none; }
.app-header { gap: 10px; }
.app-header .crumbs { max-width: 42%; }
.app-header .crumb-group,
.app-header .crumb-sep { display: none; }
.cmdk-trigger { flex: 1; width: auto; min-width: 0; }
.cmdk-trigger kbd { display: none; }
.app-header .header-spacer { display: none; }
.app-main {
padding-left: max(var(--gutter), env(safe-area-inset-left));
padding-right: max(var(--gutter), env(safe-area-inset-right));
padding-bottom: max(var(--gutter), env(safe-area-inset-bottom));
}
/* Lock background scroll while the drawer is open. */
body.sidebar-open { overflow: hidden; }
}
@media (max-width: 640px) {
.kpi-grid { grid-template-columns: 1fr; }
.page-head h1 { font-size: 20px; }
.toolbar, .filterbar { padding: 10px 14px; }
.card-body { padding: 14px; }
.card-head { padding: 12px 14px; }
}
/* ── Überweisungs-QR-Code (Girocode) Modal ───────────────────── */
.giro-qr-modal { max-width: 420px; }
.giro-qr-code {
display: flex;
justify-content: center;
padding: 4px 0 18px;
}
.giro-qr-code svg {
width: 260px;
height: 260px;
max-width: 100%;
border-radius: var(--radius-sm);
}
.giro-qr-error {
margin: 0;
padding: 24px 0;
color: var(--danger);
text-align: center;
}
.giro-qr-details {
margin: 0;
display: flex;
flex-direction: column;
gap: 8px;
border-top: 1px solid var(--line);
padding-top: 14px;
}
.giro-qr-row {
display: flex;
justify-content: space-between;
gap: 16px;
font-size: var(--fs-sm);
}
.giro-qr-row dt { margin: 0; color: var(--ink-3); }
.giro-qr-row dd {
margin: 0;
font-weight: 600;
text-align: right;
word-break: break-word;
color: var(--ink);
}
.giro-qr-hint {
margin: 14px 0 0;
font-size: var(--fs-sm);
color: var(--ink-3);
text-align: center;
}
/* ── Offene Zahlungen / SEPA-Sammelüberweisung ───────────────── */
.link-inline {
background: none;
border: none;
padding: 0;
color: var(--accent);
font: inherit;
cursor: pointer;
text-decoration: underline;
}
.payments-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
margin-bottom: 0.9rem;
}
.payments-selectall {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: var(--fs-sm);
color: var(--ink-2);
cursor: pointer;
}
.payments-actionbar {
display: inline-flex;
align-items: center;
gap: 0.9rem;
}
.payments-selection-info {
font-size: var(--fs-sm);
color: var(--ink-3);
font-variant-numeric: tabular-nums;
}
.payments-table-wrap { overflow-x: auto; }
.payments-table {
width: 100%;
border-collapse: collapse;
font-size: 0.88rem;
font-feature-settings: 'tnum' 1, 'lnum' 1;
}
.payments-table th,
.payments-table td {
text-align: left;
padding: 0.35rem 0.75rem;
border-bottom: 1px solid var(--line-soft);
white-space: nowrap;
}
.payments-table thead th {
font-family: var(--font-sans);
font-size: 11px; line-height: 16px; font-weight: 700;
letter-spacing: 0.14em; text-transform: uppercase;
color: var(--ink-3);
background-color: color-mix(in srgb, var(--surface-sunk) 70%, var(--surface));
border-bottom: 1px solid var(--line-strong);
padding: 0.6rem 0.75rem;
}
.payments-table tbody tr:nth-child(even) { background: var(--surface-2); }
.payments-table td.num,
.payments-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.payments-table td.num { font-weight: 600; }
.payments-check-col { width: 32px; }
.payments-table input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; }
.payments-table tr.is-ineligible { opacity: 0.55; }
.payments-iban,
.payments-nr,
.payments-due { font-family: var(--font-mono); font-size: 0.82rem; color: var(--ink-2); }
.payments-partial {
display: block;
font-size: 0.72rem;
font-weight: 500;
color: var(--warn);
}
.payments-reason {
display: inline-block;
margin-left: 0.4rem;
padding: 0.08rem 0.5rem;
border-radius: var(--radius-pill);
background: var(--warn-soft);
color: var(--warn);
font-size: 0.68rem;
font-weight: 600;
vertical-align: middle;
}
/* ── Banking-Modal: KI-Suche mit Kontext und Wissen über die Gegenpartei ──
Die Grundklassen (.bkm-sec, .bkm-box, .banking-card, .banking-ai-conf-*) stehen in index.css. */
.bkai-context {
width: 100%; min-height: 64px; resize: vertical;
padding: 9px 11px;
border: 1px solid var(--line);
border-radius: var(--radius);
background-color: var(--surface);
color: var(--ink);
font: inherit; font-size: 14px; line-height: 1.4;
}
.bkai-context:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
.bkai-actions { display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 8px; }
.bkai-error {
padding: 0.4rem 0.7rem;
border-radius: var(--radius-sm);
background-color: var(--danger-soft);
color: var(--danger);
font-size: 0.82rem;
font-weight: 600;
line-height: 1.4;
overflow-wrap: anywhere;
}
.bkai-result { display: flex; flex-direction: column; gap: 0.55rem; }
.bkai-summary { margin: 0; font-size: 0.85rem; line-height: 1.45; color: var(--ink-2); }
.bkai-summary.is-error { color: var(--danger); font-weight: 600; }
.bkai-reason { margin-top: 0.2rem; font-size: 0.8rem; line-height: 1.4; color: var(--ink-2); }
.bkai-attachments { margin-top: 0.2rem; font-size: 0.8rem; overflow-wrap: anywhere; }
.bkai-badge {
display: inline-flex; align-items: center;
padding: 0.12rem 0.55rem;
border-radius: var(--radius-pill);
background-color: var(--info-soft);
color: var(--info);
font-size: 0.7rem;
font-weight: 600;
white-space: nowrap;
}
.bkai-steps { font-size: 0.82rem; color: var(--ink-3); }
.bkai-steps summary { cursor: pointer; width: fit-content; }
.bkai-steps ul {
display: flex; flex-direction: column; gap: 0.3rem;
margin: 0.45rem 0 0; padding: 0; list-style: none;
}
.bkai-steps li { display: flex; align-items: baseline; gap: 0.5rem; min-width: 0; }
.bkai-step-tool { flex: none; font-weight: 600; color: var(--ink-2); }
.bkai-step-input {
flex: 1; min-width: 0;
font-family: var(--font-mono); font-size: 0.76rem; color: var(--ink-3);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bkai-step-count { flex: none; font-family: var(--font-tabular); font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink-2); }
.bkai-step-count.is-error { color: var(--danger); }
.bkai-know-text { margin: 0; font-size: 0.85rem; line-height: 1.45; color: var(--ink-2); overflow-wrap: anywhere; }
.bkai-know-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 0.4rem; }
/* ─── eBay-Rechnungen (Seller Hub): Panel, Tabelle, Login-Fenster (Präfix .ebay-inv-) ─── */
.ebay-inv-title { display: grid; gap: 0.2rem; min-width: 0; }
.ebay-inv-actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
#ebay-inv-panel > .panel-body { display: grid; gap: 0.75rem; }
.ebay-inv-status { font-size: 0.88rem; color: var(--ink-2); }
.ebay-inv-status:empty { display: none; }
.ebay-inv-note { font-size: 0.85rem; color: var(--ink-3); }
.ebay-inv-msg { font-size: 0.88rem; font-weight: 500; }
.ebay-inv-msg.is-error { color: var(--danger); }
.ebay-inv-msg.is-ok { color: var(--success); }
.ebay-inv-scroll {
border: 1px solid var(--line);
border-radius: var(--radius-xl);
background-color: var(--surface);
}
.banking-table.ebay-inv-table tbody td.ebay-inv-doc { font-family: var(--font-sans); }
.ebay-inv-table td { vertical-align: middle; }
.ebay-inv-table .ebay-inv-month { white-space: nowrap; font-family: var(--font-tabular); font-variant-numeric: tabular-nums; font-size: 0.84rem; }
.ebay-inv-table tr.ebay-inv-sub .ebay-inv-doc { color: var(--ink-2); padding-left: 1.4rem; }
.ebay-inv-table .ebay-inv-nr { font-family: var(--font-mono); font-size: 0.82rem; color: var(--ink-2); white-space: nowrap; }
.ebay-inv-table .ebay-inv-none { color: var(--ink-4); }
.ebay-inv-table .ebay-inv-th-amount,
.ebay-inv-table .ebay-inv-amount { text-align: right; }
.ebay-inv-table .ebay-inv-amount {
font-family: var(--font-tabular);
font-variant-numeric: tabular-nums;
font-weight: 600;
white-space: nowrap;
}
.ebay-inv-recon-cell { white-space: nowrap; }
.ebay-inv-recon { display: inline-flex; align-items: center; }
.ebay-inv-recon .status-label { font-size: 0.7rem; font-weight: 600; }
.ebay-inv-diff { display: block; font-size: 0.75rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.ebay-inv-table thead th.ebay-inv-th-docs { text-align: right; padding-right: 2.5rem; }
.ebay-inv-table td.ebay-inv-docs { text-align: right; white-space: nowrap; text-overflow: clip; padding-right: 2.5rem; }
.ebay-inv-table .icon-btn.ebay-inv-act {
width: 30px;
height: 30px;
border-color: transparent;
border-radius: var(--radius-pill);
background-color: transparent;
color: var(--ink-2);
opacity: 0.45;
vertical-align: middle;
text-decoration: none;
transition: opacity 0.1s, background-color 0.12s;
}
.ebay-inv-table tr:hover .icon-btn.ebay-inv-act,
.ebay-inv-table tr:focus-within .icon-btn.ebay-inv-act,
.ebay-inv-table .icon-btn.ebay-inv-act:focus-visible { opacity: 1; }
.ebay-inv-table .icon-btn.ebay-inv-act:hover { background-color: var(--surface-2); border-color: transparent; }
.ebay-inv-table .icon-btn.ebay-inv-act:focus-visible { outline: none; box-shadow: var(--focus-ring); }
/* Login-Fenster: Live-Bild der eBay-Anmeldung, Eingaben gehen an die Seite */
.ebay-inv-login-hint { font-size: 0.9rem; color: var(--ink-2); }
.ebay-inv-login-timer { font-family: var(--font-tabular); font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink-2); }
.ebay-inv-live-wrap { display: grid; justify-items: center; }
.ebay-inv-live-wait { padding: 3rem 1rem; font-size: 0.9rem; color: var(--ink-3); }
.ebay-inv-live {
display: block;
max-width: 100%;
height: auto;
border: 1px solid var(--line);
border-radius: var(--radius);
cursor: crosshair;
}
.ebay-inv-live:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.ebay-inv-live-input { display: flex; gap: 0.5rem; align-items: center; }
.ebay-inv-live-input .input { flex: 1; min-width: 0; }
/* ─── eBay-Inserate: Seite „Inserieren“ (Präfix .ebay-, ebay-listing.js) ───
Nur Tokens. Radien nach Rolle: Karten und Kennzahl-Kacheln 24px, Eingaben und Bildkacheln 12px,
Bedienelemente und Marker als Pille. Vorhandene Klassen (.panel, .btn, .tag, .seg-track,
.search-field, .status-dot) werden wiederverwendet. Beträge: --font-tabular, rechtsbündig. */
.ebay-head-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ebay-flow { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }
.ebay-flow p { margin: 0; }
.ebay-flow :is(h2, h3) { margin: 0; }
#ebay-status-slot:empty, .ebay-main:empty { display: none; }
.ebay-main { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.ebay-flow a:hover { text-decoration: underline; }
.ebay-flow a > .icon,
.ebay-flow .btn > .icon { width: 16px; height: 16px; vertical-align: -3px; }
/* Hinweise: Status-Meldung oben, Warnungen und Fehler der Vorschau */
.ebay-banner {
display: flex; align-items: flex-start; gap: 0.65rem;
padding: 0.75rem 0.9rem;
border: 1px solid var(--line);
border-radius: var(--radius);
background-color: var(--surface-2);
color: var(--ink-2);
font-size: 0.88rem; line-height: 1.45;
}
.ebay-banner > .icon { flex-shrink: 0; width: 20px; height: 20px; }
.ebay-banner-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ebay-banner-text strong { color: var(--ink); font-weight: 600; }
.ebay-banner-text a { color: var(--accent); font-weight: 600; }
/* --ink-3 reicht auf den getönten Flächen (info/warn/danger/success-soft) nicht an 4,5:1 heran */
.ebay-banner .field-hint { color: var(--ink-2); }
.ebay-banner-actions { display: flex; flex-wrap: wrap; gap: 8px; flex-shrink: 0; }
.ebay-banner.is-info { border-color: color-mix(in srgb, var(--info) 30%, transparent); background-color: var(--info-soft); }
.ebay-banner.is-info > .icon { color: var(--info); }
.ebay-banner.is-warn { border-color: color-mix(in srgb, var(--warn) 30%, transparent); background-color: var(--warn-soft); }
.ebay-banner.is-warn > .icon { color: var(--warn); }
.ebay-banner.is-error { border-color: color-mix(in srgb, var(--danger) 30%, transparent); background-color: var(--danger-soft); }
.ebay-banner.is-error > .icon { color: var(--danger); }
.ebay-banner.is-success { border-color: color-mix(in srgb, var(--success) 30%, transparent); background-color: var(--success-soft); }
.ebay-banner.is-success > .icon { color: var(--success); }
.ebay-missing { margin: 0.35rem 0 0.35rem 1.1rem; padding: 0; }
.ebay-missing li { margin: 0.1rem 0; }
.ebay-env-line { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.ebay-banner .ebay-env-tag { margin-left: 0.4rem; }
/* Fortschritt: Suchen · Auswählen · Daten · Vorschau (aktiv weich getönt, nicht deckend) */
.ebay-steps { display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; margin: 0; padding: 0; list-style: none; }
.ebay-step { display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--fs-sm); font-weight: 500; color: var(--ink-3); }
.ebay-step-num {
display: inline-grid; place-items: center;
width: 24px; height: 24px;
border: 1px solid var(--line-strong);
border-radius: 50%;
background-color: var(--surface);
font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.ebay-step-num .icon { width: 15px; height: 15px; }
.ebay-step.is-done { color: var(--ink-2); }
.ebay-step.is-done .ebay-step-num { border-color: transparent; background-color: var(--accent-soft); color: var(--accent); }
.ebay-step.is-current { color: var(--ink); font-weight: 600; }
.ebay-step.is-current .ebay-step-num { border-color: color-mix(in srgb, var(--accent) 45%, transparent); background-color: var(--accent-soft); color: var(--accent); }
/* Suche */
.ebay-search-slot { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
.ebay-hero { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.6rem; }
.ebay-hero-title { font-size: 1.6rem; line-height: 1.25; }
.ebay-lead { max-width: 62ch; font-size: var(--fs-md); color: var(--ink-2); }
.ebay-searchbar { display: flex; align-items: center; gap: 8px; }
.ebay-searchbar .search-field { min-width: 0; }
.ebay-searchbar .search-field svg { left: 16px; width: 16px; height: 16px; }
.ebay-searchbar .search-field input { height: 46px; padding-left: 44px !important; font-size: var(--fs-lg); }
.ebay-searchbar > .btn { height: 46px; padding: 0 22px; }
.ebay-searchbar.is-small .search-field svg { left: 11px; width: 14px; height: 14px; }
.ebay-searchbar.is-small .search-field input { height: 34px; padding-left: 32px !important; font-size: var(--fs-md); }
.ebay-searchbar.is-small > .btn { height: 34px; padding: 0 14px; }
.ebay-prefill {
display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
margin-top: 0.5rem; padding: 0.45rem 0.55rem 0.45rem 0.8rem;
border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
border-radius: var(--radius);
background-color: var(--accent-soft);
font-size: 0.88rem; color: var(--ink-2);
}
.ebay-prefill > .icon { width: 18px; height: 18px; color: var(--accent); }
.ebay-prefill-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ebay-sku { font-family: var(--font-mono); font-size: 0.82rem; font-weight: 600; color: var(--accent); }
/* Treffer: Karten-Raster, bricht um */
.ebay-results-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem 1rem; flex-wrap: wrap; margin-bottom: 0.9rem; }
.ebay-results-head h2 { font-size: 1.15rem; }
.ebay-result-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.ebay-result-card {
display: flex; flex-direction: column;
overflow: hidden;
border: 1px solid var(--line);
border-radius: var(--radius-xl);
background-color: var(--surface);
box-shadow: var(--shadow-sm);
transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.ebay-result-card:hover { border-color: var(--line-strong); }
.ebay-result-card:has(.ebay-result-pick:focus-visible) { border-color: var(--accent); box-shadow: var(--focus-ring); }
.ebay-result-pick {
display: flex; flex-direction: column; flex: 1;
width: 100%; padding: 0;
border: 0; background-color: transparent;
color: inherit; font: inherit; text-align: left;
}
.ebay-result-pick:focus-visible { outline: none; }
.ebay-result-pick:disabled { cursor: progress; }
.ebay-result-img { position: relative; display: grid; place-items: center; aspect-ratio: 1 / 1; overflow: hidden; background-color: var(--surface-2); }
.ebay-result-img img { display: block; width: 100%; height: 100%; object-fit: contain; }
.ebay-noimg { display: grid; justify-items: center; gap: 4px; font-size: 0.8rem; color: var(--ink-3); }
.ebay-noimg .icon { width: 32px; height: 32px; }
.ebay-result-flag { position: absolute; left: 10px; top: 10px; border-color: var(--line); }
.ebay-result-body { display: flex; flex: 1; flex-direction: column; gap: 6px; padding: 12px 14px 14px; }
.ebay-result-title {
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
font-size: 0.88rem; font-weight: 600; line-height: 1.35; color: var(--ink);
}
.ebay-result-meta { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; font-size: 0.82rem; color: var(--ink-3); }
.ebay-result-price { font-family: var(--font-tabular); font-variant-numeric: tabular-nums; font-size: 0.95rem; font-weight: 700; color: var(--ink); }
.ebay-result-cta { margin-top: auto; padding-top: 4px; font-size: 0.8rem; font-weight: 600; color: var(--accent); }
.ebay-result-link { display: flex; align-items: center; gap: 4px; padding: 9px 14px; border-top: 1px solid var(--line-soft); font-size: 0.8rem; color: var(--ink-2); }
/* Daten: gewähltes Listing, Formular links, Kalkulation rechts */
.ebay-details { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }
.ebay-chosen { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; padding: 12px 16px; }
.ebay-chosen-img {
display: grid; place-items: center; flex-shrink: 0;
width: 64px; height: 64px; overflow: hidden;
border: 1px solid var(--line); border-radius: var(--radius-sm);
background-color: var(--surface-2); color: var(--ink-3);
}
.ebay-chosen-img img { display: block; width: 100%; height: 100%; object-fit: contain; }
.ebay-chosen-text { flex: 1; min-width: 200px; }
.ebay-chosen-title { font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.ebay-chosen-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; font-size: 0.82rem; color: var(--ink-3); }
.ebay-chosen-meta a { color: var(--accent); font-weight: 600; }
.ebay-split { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr); gap: 1.25rem; align-items: start; }
.ebay-split > .panel, .ebay-col > .panel { margin-top: 0; }
.ebay-split-pv { grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr); }
.ebay-col { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }
.ebay-stack { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.ebay-fields { display: grid; gap: 12px 14px; }
.ebay-fields-3 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.ebay-fields-buy { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); align-items: start; }
.ebay-field-ek { grid-column: 1 / -1; }
.ebay-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ebay-field .lbl { height: auto; white-space: normal; }
.ebay-field input, .ebay-field select { width: 100%; }
.ebay-ek-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.ebay-ek-row input[type="text"] { flex: 1 1 130px; width: auto; min-width: 0; }
.ebay-ek-row .seg-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.ebay-fieldset { min-width: 0; margin: 0; padding: 1rem 0 0; border: 0; border-top: 1px solid var(--line-soft); }
.ebay-fieldset > legend { padding: 0 0.6rem 0 0; font-size: 0.74rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); }
.ebay-legend-hint { text-transform: none; letter-spacing: 0; font-weight: 500; }
.ebay-fieldset > .ebay-stack { margin-top: 0.4rem; }
.ebay-hint:empty { display: none; }
.ebay-hint-text { font-size: 0.82rem; color: var(--ink-3); }
.ebay-hint-text.is-warn { color: var(--warn); font-weight: 600; }
.ebay-form-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.ebay-count { margin-left: 6px; font-family: var(--font-tabular); font-variant-numeric: tabular-nums; color: var(--ink-3); }
/* Kalkulation: Aufstellung (Beträge rechtsbündig) und hervorgehobenes Ergebnis */
.ebay-calc-card .panel-body { display: flex; flex-direction: column; gap: 0.75rem; }
.ebay-calc-empty { font-size: 0.9rem; color: var(--ink-3); }
.ebay-calc-empty.is-error { color: var(--danger); }
.ebay-calc-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.ebay-calc-table th, .ebay-calc-table td { padding: 0.45rem 0; background-color: transparent; border-bottom: 1px solid var(--line-soft); vertical-align: baseline; }
.ebay-calc-table th { padding-right: 1rem; font-weight: 500; text-align: left; color: var(--ink-2); }
.ebay-calc-table td { font-family: var(--font-tabular); font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; white-space: nowrap; color: var(--ink); }
.ebay-calc-table tr.is-muted td { font-weight: 500; color: var(--ink-3); }
.ebay-calc-table tbody tr:hover, .ebay-calc-table tbody tr:hover td { background-color: transparent; }
.ebay-result { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ebay-stat { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--radius-xl); }
.ebay-result.is-gain .ebay-stat { border-color: color-mix(in srgb, var(--success) 28%, transparent); background-color: var(--success-soft); color: var(--success); }
.ebay-result.is-loss .ebay-stat { border-color: color-mix(in srgb, var(--danger) 28%, transparent); background-color: var(--danger-soft); color: var(--danger); }
.ebay-stat-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.ebay-stat-value { font-family: var(--font-tabular); font-variant-numeric: tabular-nums; font-size: 1.6rem; font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; white-space: nowrap; }
/* Vorschau: Bilder, Produktdaten, Aktionen */
.ebay-preview { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.ebay-pv-top { display: flex; align-items: center; flex-wrap: wrap; gap: 0.75rem; }
.ebay-pv-no { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; letter-spacing: -0.02em; }
.ebay-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; }
.ebay-thumb { position: relative; aspect-ratio: 1 / 1; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background-color: var(--surface-2); }
.ebay-thumb img { display: block; width: 100%; height: 100%; object-fit: contain; }
.ebay-thumb .icon-btn.ebay-thumb-remove { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; }
.ebay-thumb .icon-btn.ebay-thumb-remove .icon { width: 15px; height: 15px; }
.ebay-thumb-flag { position: absolute; left: 6px; bottom: 6px; border-color: var(--line); }
.ebay-image-tools { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.ebay-inline-form { display: flex; align-items: center; gap: 8px; width: 100%; }
.ebay-inline-form input { flex: 1; width: auto; min-width: 0; }
.ebay-disclosure { padding-top: 0.75rem; border-top: 1px solid var(--line-soft); }
.ebay-disclosure:first-child { padding-top: 0; border-top: 0; }
.ebay-disclosure > summary { display: flex; align-items: center; gap: 6px; width: fit-content; list-style: none; cursor: pointer; font-size: 0.9rem; font-weight: 600; color: var(--ink); }
.ebay-disclosure > summary::-webkit-details-marker { display: none; }
.ebay-disclosure > summary::before { content: "›"; font-size: 1.15em; line-height: 1; color: var(--ink-3); transition: transform 0.2s; }
.ebay-disclosure[open] > summary { margin-bottom: 0.75rem; }
.ebay-disclosure[open] > summary::before { transform: rotate(90deg); }
.ebay-disclosure > summary:focus-visible { outline: none; border-radius: var(--radius-sm); box-shadow: var(--focus-ring); }
.ebay-aspects { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.ebay-aspects th, .ebay-aspects td { padding: 0.35rem 0.75rem 0.35rem 0; background-color: transparent; border-bottom: 1px solid var(--line-soft); text-align: left; vertical-align: top; }
.ebay-aspects th { width: 34%; font-weight: 600; color: var(--ink-2); }
.ebay-aspects tbody tr:hover, .ebay-aspects tbody tr:hover td { background-color: transparent; }
.ebay-gpsr { display: flex; flex-direction: column; gap: 0.6rem; padding-top: 0.75rem; border-top: 1px solid var(--line-soft); }
.ebay-gpsr:first-child { padding-top: 0; border-top: 0; }
.ebay-gpsr-head { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem; font-size: 0.9rem; }
.ebay-gpsr-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }
.ebay-contact { font-style: normal; font-size: 0.85rem; line-height: 1.45; color: var(--ink-2); overflow-wrap: anywhere; }
.ebay-desc-frame { display: block; width: 100%; height: 18rem; border: 1px solid var(--line); border-radius: var(--radius); background-color: var(--surface); }
.ebay-meta { font-family: var(--font-mono); font-size: 0.76rem; color: var(--ink-3); overflow-wrap: anywhere; }
.ebay-publish-btn { width: 100%; height: 42px; }
.btn.btn-ghost.ebay-delete-btn { align-self: flex-start; color: var(--danger); }
.btn.btn-ghost.ebay-delete-btn:hover { background-color: var(--danger-soft); color: var(--danger); }
.btn.btn-ghost.ebay-delete-btn .icon { width: 16px; height: 16px; }
/* Bestätigungsdialog */
#ebay-confirm-body p { margin: 0 0 0.9rem; font-size: 0.92rem; color: var(--ink-2); }
#ebay-confirm-body .ebay-banner { margin-top: 0.75rem; }
.ebay-confirm-list { display: grid; margin: 0 0 0.9rem; }
.ebay-confirm-list > div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.45rem 0; border-bottom: 1px solid var(--line-soft); font-size: 0.9rem; }
.ebay-confirm-list dt { flex-shrink: 0; color: var(--ink-3); }
.ebay-confirm-list dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; overflow-wrap: anywhere; }
@media (min-width: 901px) and (min-height: 640px) {
.ebay-details .ebay-calc-card { position: sticky; top: calc(var(--header-h) + 16px); }
}
@media (max-width: 900px) {
.ebay-split, .ebay-split-pv { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
.ebay-searchbar:not(.is-small) { flex-wrap: wrap; }
.ebay-searchbar:not(.is-small) .search-field { flex: 1 1 100%; }
.ebay-result { grid-template-columns: minmax(0, 1fr); }
.ebay-result-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}
/* Sourcing: eBay-Karte (#sourcing-ebay-card). Hinweise unter der Tabelle wie in der Europa-Karte;
„neu laden“ ist gesperrt, solange kein Abruf läuft oder möglich ist. */
#sourcing-ebay-card .purchases-hint { margin-top: 0.6rem; }
#sourcing-ebay-card .icon-btn.purchases-access-refresh:disabled { opacity: 0.35; cursor: default; }
/* ─── eBay-Inserate: Seiten „Inserate“, „Artikel“, „Einstellungen“ (Präfix .ebay-, ebay-pages.js) ───
Nur Tokens. Die Wurzeln der Seiten tragen .ebay-flow (Abstände, Absätze, Links aus dem Block oben).
Tabellen folgen dem Rezept aus DESIGN.md (.tbl-compact, Zebra per .row-alt, Beträge rechtsbündig in
--font-tabular); Tabellenrahmen 24px, Bildkacheln 8px, Zeilen-Aktionen als Pille. Überschreibungen der
.tbl-compact-Regeln stehen mit table.ebay-tbl vorn, damit sie unabhängig von der Dateireihenfolge gewinnen. */
.ebay-tbl-wrap > .table-scroll { border-radius: var(--radius-xl); }
.ebay-tbl-wrap.is-loading { opacity: 0.6; transition: opacity var(--dur-fast); }
.ebay-note { max-width: 90ch; }
.ebay-empty-actions { display: flex; justify-content: center; margin-top: 1rem; }
.ebay-none { color: var(--ink-4); }
/* Zellen: Bild, Titel mit EAN, Zahlen, Datum, Status */
.ebay-tbl tbody td { vertical-align: middle; }
.ebay-tbl th.ebay-col-img, .ebay-tbl td.ebay-col-img { width: 1%; padding-right: 0.25rem; }
.ebay-tbl th.ebay-col-chev, .ebay-tbl td.ebay-col-chev { width: 1%; padding-right: 0; }
.ebay-tbl-img {
display: grid; place-items: center;
width: 32px; height: 32px; overflow: hidden;
border: 1px solid var(--line); border-radius: var(--radius-sm);
background-color: var(--surface-2); color: var(--ink-4);
}
.ebay-tbl-img img { display: block; width: 100%; height: 100%; object-fit: contain; }
.ebay-tbl-img .icon { width: 18px; height: 18px; }
.ebay-cell-title { max-width: 30rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; line-height: 1.25; color: var(--ink); }
.ebay-cell-clip { max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ebay-cell-sub { font-family: var(--font-mono); font-size: 0.72rem; line-height: 1.25; color: var(--ink-3); }
.ebay-tbl th.ebay-num, .ebay-tbl td.ebay-num { text-align: right; white-space: nowrap; }
.ebay-tbl td.ebay-num { font-family: var(--font-tabular); font-variant-numeric: tabular-nums; font-weight: 600; }
.ebay-tbl td.ebay-mono, .ebay-tbl td.ebay-date { font-family: var(--font-mono); font-size: 0.82rem; color: var(--ink-2); white-space: nowrap; }
.ebay-tbl td.ebay-live { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.ebay-tbl .ebay-col-status { white-space: nowrap; }
.ebay-profit.is-gain { color: var(--success); }
.ebay-profit.is-loss { color: var(--danger); }
/* Zeilen-Aktion: Link zum eBay-Angebot (30×30, randlos, Pille; voll bei Zeilen-Hover und Fokus) */
.ebay-tbl th.ebay-col-act, .ebay-tbl td.ebay-col-act { width: 1%; white-space: nowrap; text-align: right; text-overflow: clip; }
.ebay-tbl .icon-btn.ebay-row-act {
border-color: transparent;
border-radius: var(--radius-pill);
background-color: transparent;
color: var(--ink-2);
opacity: 0.45;
vertical-align: middle;
text-decoration: none;
transition: opacity 0.1s, background-color 0.12s;
}
.ebay-tbl tr:hover .icon-btn.ebay-row-act,
.ebay-tbl tr:focus-within .icon-btn.ebay-row-act,
.ebay-tbl .icon-btn.ebay-row-act:focus-visible { opacity: 1; }
.ebay-tbl .icon-btn.ebay-row-act:hover { background-color: var(--surface-2); border-color: transparent; }
.ebay-tbl .icon-btn.ebay-row-act:focus-visible { outline: none; box-shadow: var(--focus-ring); }
/* Artikel: Zeile klappt die Inserate des Artikels auf */
.ebay-chev { display: inline-block; font-size: 1.15rem; line-height: 1; color: var(--ink-3); transition: transform 0.2s; }
.ebay-chev::before { content: "›"; }
.ebay-tbl tr[aria-expanded="true"] .ebay-chev { transform: rotate(90deg); }
.ebay-tbl tbody tr[aria-expanded="true"] td { background-color: var(--accent-tint); }
.ebay-tbl tbody tr[aria-expanded="true"]:hover td { background-color: var(--accent-soft); }
table.ebay-tbl tbody tr.ebay-detail-row > td { padding: 0.25rem 1rem 1rem; background-color: var(--surface-sunk); }
table.ebay-tbl tbody tr.ebay-detail-row:hover > td { background-color: var(--surface-sunk); }
.ebay-detail-row .ebay-calc-empty { padding: 0.5rem 0; }
.ebay-frame { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-xl); background-color: var(--surface); }
/* Einstellungen: zwei Spalten, darunter einspaltig */
.ebay-settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; align-items: start; }
.ebay-kv { display: grid; margin: 0; }
.ebay-kv > div { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.5rem 0; border-bottom: 1px solid var(--line-soft); font-size: 0.9rem; }
.ebay-kv > div:last-child { border-bottom: 0; }
.ebay-kv dt { color: var(--ink-3); }
.ebay-kv dd { margin: 0; text-align: right; }
.ebay-scope { font-family: var(--font-mono); text-transform: none; }
.ebay-fields-2 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.ebay-field-wide { grid-column: 1 / -1; }
.ebay-field .ebay-legend-hint { margin-left: 6px; }
.ebay-field input.is-invalid, .ebay-rates-tbl input.is-invalid { border-color: var(--danger); }
.ebay-loc-current {
display: flex; flex-direction: column; gap: 4px;
padding: 0.75rem 1rem;
border: 1px solid var(--line);
border-radius: var(--radius);
background-color: var(--surface-sunk);
}
.ebay-loc-current .lbl { height: auto; }
/* Eigene Sätze je Kategorie: kleine editierbare Tabelle */
.ebay-rates-tbl thead th { position: static; }
.ebay-rates-tbl tbody td { padding-top: 0.35rem; padding-bottom: 0.35rem; font-size: 0.88rem; }
.ebay-rates-tbl th.ebay-num, .ebay-rates-tbl td.ebay-num { text-align: right; }
.ebay-rates-tbl td.ebay-mono { font-family: var(--font-mono); font-size: 0.82rem; color: var(--ink-2); }
.ebay-rates-tbl td.ebay-num input { width: 7rem; text-align: right; font-family: var(--font-tabular); font-variant-numeric: tabular-nums; }
.ebay-rates-tbl .ebay-col-act { width: 1%; text-align: right; }
.ebay-rates-tbl .icon-btn { border-radius: var(--radius-pill); }
.ebay-rates-tbl .icon-btn:hover { border-color: transparent; background-color: var(--danger-soft); color: var(--danger); }
.ebay-rates-tbl .icon-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
@media (max-width: 1100px) {
.ebay-settings-grid { grid-template-columns: minmax(0, 1fr); }
}
/* ─── eBay-Inserate: GPSR-Angaben bearbeiten (Präfix .ebay-gpsr-, ebay-listing.js) ───
Das Formular sitzt im Abschnitt „GPSR“ der Vorschau; Raster und Felder kommen aus .ebay-fields/.ebay-field. */
.ebay-gpsr-edit { margin-left: auto; }
.ebay-gpsr-actions .btn.ebay-delete-btn { align-self: center; margin-left: auto; }
/* ─── eBay-Inserate: Gewinn in der Inserate-Liste (ebay-pages.js) ───
Summenkachel .ebay-kpis über der Tabelle: .kpi aus dem Dashboard, kompakt wie .banking-kpis (kein
154px-Mindestmaß), eine Kachel in Lesebreite; Marge als zweite Zeile unter dem Gewinn je Stück. */
.ebay-kpis { grid-template-columns: minmax(0, 28rem); }
.ebay-kpis.is-loading { opacity: 0.6; transition: opacity var(--dur-fast); }
.ebay-kpis .kpi { min-height: 0; gap: 0; }
.ebay-kpis .kpi-meta { padding-top: 0; }
.ebay-kpis .kpi-value.is-gain { color: var(--success); }
.ebay-kpis .kpi-value.is-loss { color: var(--danger); }
.ebay-tbl .ebay-num-sub { font-size: 0.72rem; font-weight: 400; line-height: 1.25; color: var(--ink-3); }
/* =========================================================
REDUZIERTE BEWEGUNG — Shell: Gruppen, Rail-Tooltips, Palette
========================================================= */
@media (prefers-reduced-motion: reduce) {
.sidebar-group-toggle,
.sidebar-group-toggle .chevron,
.sidebar-link,
.sidebar-link .icon,
.cmdk-trigger,
.cmdk-option,
.sidebar [data-tip]::after { transition-duration: 0.001ms !important; transition-delay: 0s !important; }
}
/* =========================================================
EINSTELLUNGEN (witti) — Navigation links, Seiten rechts
Quelle: Canvas „witti App Redesign“. Basisklassen (.input, .tabs/.tab, kbd, .eyebrow,
.form-row) sind unter .settings-layout gescopt — globale Regeln bleiben unberührt
(index.css kennt .form-row als Flex-Zeile, andere Views benutzen .input nur als Marker).
========================================================= */
/* Zweispaltig: Navigation 248px | Inhalt (max. 960px). Nav klebt unter der Kopfzeile. */
.settings-layout { display: grid; grid-template-columns: 248px minmax(0, 960px); align-items: start; gap: 32px; width: 100%; max-width: none; margin-inline: 0; }
.settings-nav { position: sticky; top: calc(var(--header-h) + var(--gutter)); display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }
.settings-nav-group { display: flex; flex-direction: column; gap: 2px; }
.settings-nav-label { padding: 0.25rem 0.5rem; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.settings-nav-link {
display: flex; align-items: center; gap: 0.6rem;
height: 32px; padding: 0 0.5rem;
border-radius: var(--radius-sm);
color: var(--ink-2); font-size: var(--fs-sm); font-weight: 600; white-space: nowrap;
transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.settings-nav-link > .icon { width: 16px; height: 16px; color: var(--ink-3); transition: color var(--dur-fast) var(--ease); }
.settings-nav-link > .icon:not(:first-child) { width: 14px; height: 14px; margin-left: auto; color: var(--ink-4); }
.settings-nav-link > .status-dot { flex: none; margin: 0 0 0 auto; box-shadow: none; }
.settings-nav-link:hover { background-color: var(--surface-3); color: var(--ink); }
.settings-nav-link:hover > .icon:first-child { color: var(--ink-2); }
.settings-nav-link.is-active,
.settings-nav-link[aria-current="page"] { background-color: var(--accent-soft); color: var(--accent); font-weight: 700; }
.settings-nav-link.is-active > .icon:first-child,
.settings-nav-link[aria-current="page"] > .icon:first-child { color: var(--accent); }
.settings-layout .status-dot.is-success { color: var(--success); }
.settings-layout .status-dot.is-warn { color: var(--warn); }
.settings-layout .status-dot.is-danger { color: var(--danger); }
/* Suche: Feld mit Lupe links und Kürzel „/“ rechts; Treffer als Popover (zusätzlich .dd-panel). */
.settings-layout .settings-search { flex: none; min-width: 0; max-width: none; }
.settings-layout .settings-search .input { padding-right: 2.4rem; }
.settings-layout .settings-search kbd { position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%); pointer-events: none; }
.settings-nav:has(.settings-search-results) { z-index: 5; }
.settings-search-results { position: absolute; top: 42px; left: 0; z-index: 10; width: max(100%, 340px); max-width: calc(100vw - 2rem); box-shadow: var(--shadow-md); }
.settings-search-results:not([hidden]) { display: block; }
.settings-search-results .dd-option { height: auto; min-height: 34px; padding-block: 0.4rem; flex-wrap: wrap; row-gap: 0; white-space: normal; }
.settings-search-results .dd-group,
.settings-search-results .kicker { display: block; padding: 0.5rem 0.6rem 0.25rem; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
/* Basisklassen nur im Einstellungsbereich: kbd, Eyebrow, Eingabefeld, Reiterleiste */
.settings-layout kbd {
display: inline-flex; align-items: center; justify-content: center;
min-width: 20px; height: 20px; padding: 0 0.35rem;
border: 1px solid var(--line-strong); border-radius: var(--radius-xs);
background-color: var(--surface); color: var(--ink-3);
font-family: var(--font-sans); font-size: 11px; font-weight: 600; line-height: 1;
}
.settings-layout .eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
/* .input und die nackten Felder in .form-control teilen eine Optik (Checkbox, Radio, Farbe, Datei, Range bleiben nativ). */
.settings-layout .input,
.settings-layout .form-control :where(input:not([type="checkbox"], [type="radio"], [type="color"], [type="file"], [type="range"], [type="hidden"]), select, textarea) {
display: block; width: 100%; height: 36px; padding: 0 0.75rem;
border: 1px solid var(--line-strong); border-radius: var(--radius);
background-color: var(--surface); color: var(--ink);
font-size: var(--fs-md); line-height: 1.2;
transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.settings-layout .input::placeholder,
.settings-layout .form-control :where(input, textarea)::placeholder { color: var(--ink-3); opacity: 1; }
.settings-layout .input:hover,
.settings-layout .form-control :where(input:not([type="checkbox"], [type="radio"], [type="color"], [type="file"], [type="range"]), select, textarea):hover { border-color: var(--ink-4); }
.settings-layout .input:focus,
.settings-layout .input:focus-visible,
.settings-layout .form-control :where(input, select, textarea):focus,
.settings-layout .form-control :where(input, select, textarea):focus-visible { outline: none; border-color: var(--accent-2); box-shadow: var(--focus-ring); }
.settings-layout .input:disabled,
.settings-layout .form-control :where(input, select, textarea):disabled { border-color: var(--line); background-color: var(--surface-sunk); color: var(--ink-4); cursor: not-allowed; }
.settings-layout textarea.input,
.settings-layout .form-control textarea { height: auto; min-height: 88px; padding: 0.55rem 0.75rem; line-height: 1.5; resize: vertical; }
/* Der Chevron kommt aus der globalen select-Regel (Hell/Dunkel); hier nur Platz dafür. */
.settings-layout select.input,
.settings-layout .form-control select { padding-right: 2.1rem; cursor: pointer; }
.settings-layout .input-num { text-align: right; font-variant-numeric: tabular-nums; }
.settings-layout .field-xs { width: 6rem; max-width: 100%; }
.settings-layout .field-sm { width: 8rem; max-width: 100%; }
.settings-layout .field-md { width: 12rem; max-width: 100%; }
.settings-layout .field-lg { width: 20rem; max-width: 100%; }
/* Reiterleiste einer Seite; aktiv = weich getönt (Akzent-Rollen in DESIGN.md). */
.settings-layout .tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--line); overflow-x: auto; }
.settings-layout .tab {
display: inline-flex; align-items: center; gap: 0.45rem; flex: none;
height: 40px; margin-bottom: -1px; padding: 0 0.9rem;
border: 0; border-bottom: 2px solid transparent;
border-radius: var(--radius-sm) var(--radius-sm) 0 0;
background-color: transparent; color: var(--ink-2);
font-size: var(--fs-md); font-weight: 600; white-space: nowrap;
transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.settings-layout .tab:hover { background-color: var(--surface-3); color: var(--ink); }
.settings-layout .tab.is-active,
.settings-layout .tab[aria-selected="true"] { border-bottom-color: var(--accent-2); background-color: var(--accent-soft); color: var(--accent); }
.settings-layout .tab:focus-visible { outline: none; box-shadow: var(--focus-ring); }
/* Inhalt: eine Seite = Kopf, optionale Reiter, Abschnitte */
.settings-content { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.settings-page,
.settings-tabpanel { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.settings-page-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.75rem 1rem; }
.settings-page-head > div:first-child { min-width: 0; }
.settings-page-head .eyebrow { margin-bottom: 0.35rem; }
.settings-page-title { font-size: 22px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.2; }
.settings-page-desc { max-width: 64ch; margin-top: 0.35rem; font-size: var(--fs-md); color: var(--ink-3); }
.settings-page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
/* Abschnitt: Intro links, Felder rechts, Fuß über die volle Breite. */
.settings-section {
--sx: 1.5rem; --sy: 1.5rem;
display: grid; grid-template-columns: 260px minmax(0, 1fr); align-items: start; gap: 1rem 2rem;
min-width: 0; padding: var(--sy) var(--sx);
border: 1px solid var(--line); border-radius: var(--radius-xl);
background-color: var(--surface); color: var(--ink);
}
.settings-section-intro { min-width: 0; }
.settings-section-intro h3 { font-size: 15px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.3; }
.settings-section-intro p { margin-top: 0.35rem; font-size: var(--fs-sm); color: var(--ink-3); }
.settings-section-body { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }
.settings-section-body .table-scroll { border: 1px solid var(--line); border-radius: var(--radius-lg); }
.settings-section-foot {
grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.5rem;
margin: 0.5rem calc(var(--sx) * -1) calc(var(--sy) * -1); padding: 0.8rem var(--sx);
border-top: 1px solid var(--line); border-radius: 0 0 var(--radius-xl) var(--radius-xl);
background-color: var(--surface-sunk);
}
.settings-section-foot .autosave-hint { font-size: var(--fs-sm); color: var(--ink-3); }
.dirty-hint { display: none; align-items: center; gap: 0.5rem; margin-right: auto; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); }
.dirty-hint::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: var(--radius-pill); background-color: var(--warn); }
.settings-section.is-dirty .dirty-hint { display: inline-flex; }
/* Formularzeile: Label links (180px), Steuerung rechts. */
.settings-layout .form-row { display: grid; grid-template-columns: 180px minmax(0, 1fr); align-items: start; gap: 0.35rem 1rem; min-height: 40px; }
.settings-layout .form-row > label,
.settings-layout .form-label { padding-top: 0.5rem; font-size: var(--fs-sm); font-weight: 600; line-height: 1.4; color: var(--ink-2); }
.form-control { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.settings-layout .field-hint { font-size: var(--fs-sm); line-height: 1.4; color: var(--ink-3); }
.form-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.settings-layout .form-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; min-width: 0; }
.settings-layout .form-inline > .btn { flex: none; }
.settings-layout .form-inline-text { flex: 1 1 auto; min-width: 0; color: var(--ink); }
.settings-layout .form-note { font-size: var(--fs-sm); color: var(--ink-3); }
/* Secret-Feld: Wert nie im Klartext, leere Eingabe überschreibt nichts. */
.secret-field { display: flex; align-items: center; gap: 0.75rem; min-height: 36px; padding: 0 0.3rem 0 0.75rem; border: 1px solid var(--line-strong); border-radius: var(--radius); background-color: var(--surface-sunk); }
.secret-value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--ink-3); }
/* Bearbeiten: das Input (behält seine ID) steht mit „Abbrechen“ in einer Zeile; Hilfstexte am Feld ruhen, solange der gespeicherte Wert angezeigt wird. */
.secret-edit { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.settings-layout .secret-edit > input { flex: 1 1 0; width: auto; min-width: 0; }
.secret-edit > .btn { flex: none; }
.form-control[data-secret-state="set"] > .secret-dependent { display: none; }
/* Schalterzeile */
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-width: 0; }
.toggle-row + .toggle-row { padding-top: 1.25rem; border-top: 1px solid var(--line-soft); }
.toggle-text { min-width: 0; }
.toggle-title { font-size: var(--fs-md); font-weight: 600; color: var(--ink); }
.toggle-desc { margin-top: 0.15rem; font-size: var(--fs-sm); color: var(--ink-3); }
/* Kopierfeld */
.copy-field { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.copy-field .input,
.copy-field input { flex: 1; min-width: 0; font-family: var(--font-mono); font-size: var(--fs-sm); }
.copy-field .btn { flex: none; }
/* Technische Details */
.tech-details { border: 1px solid var(--line); border-radius: var(--radius-lg); background-color: var(--surface); }
.tech-details > summary {
display: flex; align-items: center; gap: 0.6rem; min-height: 40px; padding: 0 0.9rem;
border-radius: var(--radius-lg); color: var(--ink-2); font-size: var(--fs-sm); font-weight: 600;
list-style: none; cursor: pointer;
transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.tech-details > summary::-webkit-details-marker { display: none; }
.tech-details > summary::before {
content: ""; flex: none; width: 7px; height: 7px; margin: 0 3px 0 1px;
border-right: 1.75px solid currentColor; border-bottom: 1.75px solid currentColor;
transform: rotate(-45deg); transition: transform var(--dur-fast) var(--ease);
}
.tech-details > summary:hover { background-color: var(--surface-3); color: var(--ink); }
.tech-details[open] > summary::before { transform: rotate(45deg); }
.tech-details > :not(summary) { padding: 0.25rem 0.9rem 0.9rem; font-size: var(--fs-sm); color: var(--ink-3); }
/* Verbindungskarte */
.conn-card { display: flex; align-items: center; gap: 1rem; min-width: 0; padding: 1rem 1.25rem; border: 1px solid var(--line); border-radius: var(--radius-xl); background-color: var(--surface); color: var(--ink); }
.conn-mark { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: var(--radius-lg); background-color: var(--surface-sunk); color: var(--ink-2); font-size: var(--fs-md); font-weight: 800; letter-spacing: -0.02em; }
.conn-text { flex: 1; min-width: 0; }
.conn-name { font-size: var(--fs-md); font-weight: 700; letter-spacing: -0.01em; }
.conn-meta { margin-top: 0.1rem; font-size: var(--fs-sm); color: var(--ink-3); }
.conn-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; flex: none; }
.conn-group { display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; }
.conn-group-desc { margin-top: 0.25rem; font-size: var(--fs-sm); color: var(--ink-3); }
.conn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(420px, 100%), 1fr)); gap: 1rem; }
/* Hinweisbox */
.callout {
--callout-c: var(--info); --callout-bg: var(--info-soft);
display: flex; align-items: flex-start; gap: 0.75rem; min-width: 0; padding: 0.85rem 1rem;
border: 1px solid color-mix(in srgb, var(--callout-c) 28%, transparent); border-radius: var(--radius-lg);
background-color: var(--callout-bg); color: var(--ink); font-size: var(--fs-sm); line-height: 1.5;
}
.callout > .icon { margin-top: 1px; color: var(--callout-c); }
.callout > div { flex: 1; min-width: 0; }
.callout > .btn,
.callout > a.btn { flex: none; align-self: center; }
.callout-title { font-weight: 700; }
.callout-info { --callout-c: var(--info); --callout-bg: var(--info-soft); }
.callout-warn { --callout-c: var(--warn); --callout-bg: var(--warn-soft); }
.callout-danger { --callout-c: var(--danger); --callout-bg: var(--danger-soft); }
.callout-success { --callout-c: var(--success); --callout-bg: var(--success-soft); }
/* Gefahrenbereich */
.settings-section.danger-zone,
.danger-zone { border-color: color-mix(in srgb, var(--danger) 35%, transparent); }
.danger-zone .settings-section-intro h3 { color: var(--danger); }
/* Einrichtung: Fortschritt und Checkliste */
.setup-progress { display: grid; gap: 0.6rem; padding: 1rem 1.25rem; border: 1px solid var(--line); border-radius: var(--radius-xl); background-color: var(--surface); color: var(--ink-2); font-size: var(--fs-sm); }
.setup-progress strong,
.setup-progress-label { font-size: var(--fs-md); font-weight: 700; color: var(--ink); }
.setup-progress-bar,
.setup-progress > progress { display: block; appearance: none; -webkit-appearance: none; width: 100%; height: 8px; overflow: hidden; border: 0; border-radius: var(--radius-pill); background-color: var(--surface-3); }
.setup-progress-bar > span,
.setup-progress-fill { display: block; height: 100%; border-radius: var(--radius-pill); background-color: var(--accent-strong); }
.setup-progress > progress::-webkit-progress-bar { background-color: var(--surface-3); }
.setup-progress > progress::-webkit-progress-value { border-radius: var(--radius-pill); background-color: var(--accent-strong); }
.setup-progress > progress::-moz-progress-bar { border-radius: var(--radius-pill); background-color: var(--accent-strong); }
.checklist { display: flex; flex-direction: column; padding: 0 1.25rem; list-style: none; border: 1px solid var(--line); border-radius: var(--radius-xl); background-color: var(--surface); }
.checklist > li { display: flex; align-items: center; gap: 0.75rem; min-height: 48px; padding: 0.4rem 0; color: var(--ink); font-size: var(--fs-md); }
.checklist > li + li { border-top: 1px solid var(--line-soft); }
.checklist > li > .icon { color: var(--ink-3); }
.checklist > li > span,
.checklist > li > .checklist-text { flex: 1; min-width: 0; }
.checklist > li > .btn,
.checklist > li > a.btn { flex: none; margin-left: auto; }
.checklist > li.is-done { color: var(--ink-2); }
.checklist > li.is-done > .icon { color: var(--success); }
.checklist > li.is-open > .icon { color: var(--warn); }
/* Schnellzugriff-Kacheln */
.settings-tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 1rem; }
.settings-tile {
display: flex; flex-direction: column; align-items: flex-start; gap: 0.3rem; min-width: 0; padding: 1rem 1.25rem;
border: 1px solid var(--line); border-radius: var(--radius-xl); background-color: var(--surface); color: var(--ink); text-align: left;
transition: border-color var(--dur-fast) var(--ease), transform var(--dur) var(--ease);
}
.settings-tile:hover,
.settings-tile:focus-visible { border-color: var(--accent-2); transform: translateY(-2px); }
.settings-tile > .icon { margin-bottom: 0.25rem; color: var(--accent); }
.settings-tile h3,
.settings-tile-title { font-size: 15px; font-weight: 700; letter-spacing: -0.02em; }
.settings-tile-desc { font-size: var(--fs-sm); color: var(--ink-3); }
.settings-tile .settings-tile-meta { margin-top: 0.35rem; font-size: var(--fs-xs); font-weight: 700; color: var(--ink-3); }
/* Übersicht und Alle Integrationen: Inhalt wird von index.js (settingsStatus) in die Container gerendert. */
#settings-overview,
#settings-integrations { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.settings-overview-title { margin-top: 0.5rem; font-size: 15px; font-weight: 700; letter-spacing: -0.02em; }
.conn-grid > .panel { display: flex; flex-direction: column; min-width: 0; }
.conn-grid > .panel + .panel { margin-top: 0; }
.conn-grid > .panel > .conn-card { flex: 1; border: 0; border-radius: var(--radius-xl); background-color: transparent; }
.conn-card > .conn-chip { flex: none; }
/* Bankkonten-Liste (Einstellungen › Bankkonten): Aktion „Konto hinzufügen“ über der Tabelle */
.settings-bank-actions { display: flex; justify-content: flex-end; margin-bottom: 0.75rem; }
/* Lieferadressen (Einstellungen › Einkauf): ein Block je Adresse, Bezeichnung oben, Felder im Raster */
.addr-list { display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; }
.addr-entry { display: grid; gap: 0.5rem; min-width: 0; padding: 0.85rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-lg); background-color: var(--surface-sunk); }
.addr-entry-head { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.addr-entry-head > .input { flex: 1 1 auto; min-width: 0; font-weight: 600; }
.addr-entry-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; min-width: 0; }
.addr-entry-grid > .is-wide { grid-column: 1 / -1; }
.settings-section-foot .form-note { margin-right: auto; }
/* Modulzeile: Schalterzeile plus Chips „Blendet ein: …“; Sub-Module eingerückt. */
.module-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.6rem 1rem; min-width: 0; padding-top: 1.25rem; border-top: 1px solid var(--line-soft); }
.module-row:first-child { padding-top: 0; border-top: 0; }
.module-row > .chip-row { grid-column: 1 / -1; }
.module-row .chip { height: 24px; padding: 0 0.6rem; border-color: var(--line); font-size: var(--fs-xs); cursor: default; }
.module-row .chip:hover { border-color: var(--line); background-color: transparent; color: var(--ink-2); }
.module-row .chip-label { font-size: var(--fs-xs); font-weight: 600; color: var(--ink-3); }
.module-row.is-sub { margin-left: 1.5rem; padding-left: 1rem; padding-top: 0.9rem; border-top: 0; border-left: 2px solid var(--line); }
.module-row.is-parent-off { opacity: 0.55; }
.module-rows { display: flex; flex-direction: column; }
/* KI-Anbieter */
.provider-card { display: flex; flex-direction: column; gap: 0.9rem; min-width: 0; padding: 1rem 1.25rem; border: 1px solid var(--line); border-radius: var(--radius-xl); background-color: var(--surface); color: var(--ink); transition: border-color var(--dur-fast) var(--ease); }
.provider-card.is-active { border-color: var(--accent-2); }
.provider-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
.provider-card-head .provider-name { font-size: var(--fs-md); font-weight: 700; color: var(--ink); }
.provider-card-head .pill:last-child { margin-left: auto; }
/* Mobil (< 900px): Navigation als horizontal scrollende Pillenleiste, alles einspaltig */
@media (max-width: 900px) {
.settings-layout { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.settings-nav { position: static; flex-direction: row; align-items: center; gap: 0.5rem; padding-bottom: 0.25rem; overflow-x: auto; scrollbar-width: thin; }
.settings-nav-group { flex: none; flex-direction: row; gap: 0.25rem; }
.settings-nav-label,
.settings-search-results,
.settings-layout .settings-search { display: none !important; }
.settings-nav-link { height: 36px; padding: 0 0.75rem; border: 1px solid var(--line); border-radius: var(--radius-pill); }
.settings-nav-link.is-active,
.settings-nav-link[aria-current="page"] { border-color: var(--accent-soft); }
.settings-section { --sx: 1rem; --sy: 1.25rem; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.settings-layout .form-row { grid-template-columns: minmax(0, 1fr); }
.settings-layout .form-row > label,
.settings-layout .form-label { padding-top: 0; }
.form-grid-2 { grid-template-columns: minmax(0, 1fr); }
.conn-card { flex-wrap: wrap; }
.conn-text { flex-basis: calc(100% - 56px); }
.callout { flex-wrap: wrap; }
.settings-page-actions { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
.settings-tile:hover,
.settings-tile:focus-visible { transform: none; }
}
/* ── Detail-Modals (dm-) und Kontakte ── */
/* Quelle: docs/redesign/ds/components/app/witti-app.css (ohne Scope-Präfix).
Modal-Gerüst (.modal, .modal-head, .modal-backdrop) steht in index.css. */
/* Modal-Größe xl (Detail- und Kontakt-Dialoge). */
/* .modal in index.css deckelt bei 560px und scrollt selbst: hier Flex-Spalte, gescrollt wird in .dm-col. */
.modal.modal-xl { width: min(1180px, 94vw); max-width: none; height: min(90vh, 900px); max-height: none; display: flex; flex-direction: column; overflow: hidden; }
.dm-head{flex:none;display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:start;padding:1.1rem 1.5rem 1rem;border-bottom:1px solid var(--line-soft);background-color:var(--surface)}
.dm-head > .dm-amount{grid-column:2;align-self:center;margin-inline:1.5rem}
.dm-head > .dm-actions{grid-column:3;margin-left:1rem}
.dm-head.dm-hero{grid-template-columns:auto minmax(0,1fr) auto auto;column-gap:1rem}
.dm-head.dm-hero > .dm-amount{grid-column:3}
.dm-head.dm-hero > .dm-actions{grid-column:4}
.dm-eyebrow{display:flex;flex-wrap:wrap;align-items:center;gap:0.25rem 0.5rem;min-height:22px;font-size:11px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-3)}
.dm-eyebrow > * + *:not(.pill):not(.tag)::before{content:"\00b7";margin-right:0.5rem;color:var(--ink-4)}
.dm-eyebrow :is(.pill,.tag){letter-spacing:0;text-transform:none}
.dm-title{margin-top:0.2rem;font-size:20px;font-weight:800;letter-spacing:-0.03em;line-height:1.2;color:var(--ink);overflow-wrap:anywhere}
.dm-hero .dm-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.dm-sub{margin-top:0.2rem;font-size:var(--fs-sm);color:var(--ink-3);overflow-wrap:anywhere}
.dm-pills{display:flex;flex-wrap:wrap;align-items:center;gap:0.4rem;margin-top:0.6rem}
.dm-amount{font-family:var(--font-tabular);font-size:24px;font-weight:800;letter-spacing:-0.03em;line-height:1.1;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink)}
.dm-amount.is-pos{color:var(--success)}
.dm-amount.is-neg{color:var(--danger)}
.dm-actions{display:flex;align-items:center;gap:0.25rem;flex:none}
.dm-nav{display:inline-flex;align-items:center;gap:0.15rem}
.dm-nav kbd{margin-inline:-0.1rem 0.4rem}
.dm-pos{padding-inline:0.5rem;font-family:var(--font-tabular);font-size:var(--fs-sm);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink-3)}
.dm-divider{flex:none;align-self:center;width:1px;height:20px;margin-inline:0.35rem;background-color:var(--line)}
.dm-band{flex:none;padding:0.75rem 1.5rem;border-bottom:1px solid var(--line-soft);background-color:var(--surface-sunk)}
.dm-kpis{display:flex;flex-wrap:wrap;gap:0.75rem 0}
.dm-kpi{flex:1 1 140px;min-width:0;display:flex;flex-direction:column;gap:0.2rem;padding:0 1.25rem;border-left:1px solid var(--line)}
.dm-kpi:first-child{padding-left:0;border-left:0}
.dm-kpi.is-hero{flex:1.5 1 190px}
.dm-kpi .kpi-value{font-size:18px;letter-spacing:-0.02em}
.dm-kpi.is-hero .kpi-value{font-size:24px;font-weight:800;letter-spacing:-0.03em}
.dm-kpi .kpi-value.is-pos{color:var(--success)}
.dm-kpi .kpi-value.is-warn{color:var(--warn)}
.dm-kpi .kpi-value.is-neg{color:var(--danger)}
.dm-kpi .kpi-meta{font-size:var(--fs-xs)}
.dm-body{flex:1 1 auto;min-height:0;display:grid;overflow:hidden;background-color:var(--surface)}
.dm-split-side{grid-template-columns:minmax(0,8fr) minmax(0,4fr)}
.dm-col{min-width:0;min-height:0;overflow:auto;padding:1.25rem 1.5rem;scrollbar-width:thin}
.dm-split-side > .dm-side,
.dm-split-side > .dm-col:last-child{padding:1rem;border-left:1px solid var(--line);background-color:var(--surface-sunk)}
.dm-sec + .dm-sec{margin-top:1.5rem}
.dm-sec-head{display:flex;flex-wrap:wrap;align-items:center;gap:0.35rem 0.5rem;margin-bottom:0.6rem}
.dm-sec-title{font-size:11px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-3)}
.dm-n{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:18px;padding:0 0.35rem;border-radius:var(--radius-pill);background-color:var(--surface-3);color:var(--ink-2);font-family:var(--font-tabular);font-size:var(--fs-xs);font-weight:700;font-variant-numeric:tabular-nums}
.dm-sec-meta{font-size:var(--fs-xs);color:var(--ink-3)}
.dm-sec-actions{display:flex;align-items:center;gap:0.35rem;margin-left:auto}
.dm-box{border:1px solid var(--line);border-radius:var(--radius-lg);background-color:var(--surface)}
.dm-box + .dm-box{margin-top:0.75rem}
.dm-box-head{display:flex;align-items:center;gap:0.5rem;padding:0.65rem 0.9rem;border-radius:var(--radius-lg);font-size:11px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-3);cursor:pointer;list-style:none;user-select:none;transition:color var(--dur-fast) var(--ease)}
.dm-box-head::-webkit-details-marker{display:none}
.dm-box-head::after{content:"";flex:none;width:16px;height:16px;margin-left:auto;background-color:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22currentColor%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%20%3E%3Cpath%20d=%22m6%209%206%206%206-6%22/%3E%3C/svg%3E") center / contain no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22currentColor%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%20%3E%3Cpath%20d=%22m6%209%206%206%206-6%22/%3E%3C/svg%3E") center / contain no-repeat;transition:transform var(--dur-fast) var(--ease)}
.dm-box[open] > .dm-box-head::after{transform:rotate(180deg)}
.dm-box-head:hover{color:var(--ink)}
.dm-box-head .dm-sec-meta{margin-left:auto;letter-spacing:0;text-transform:none;font-weight:500}
.dm-box > :not(summary){margin-inline:0.9rem}
.dm-box > :not(summary):last-child{margin-bottom:0.85rem}
.dm-facts{display:grid;grid-template-columns:104px minmax(0,1fr);gap:0.35rem 0.75rem;font-size:var(--fs-sm)}
.dm-facts dt{color:var(--ink-3);font-weight:600}
.dm-facts dd{margin:0;color:var(--ink);overflow-wrap:anywhere}
.dm-foot{flex:none;display:flex;flex-wrap:wrap;align-items:center;gap:0.5rem;padding:0.75rem 1.5rem;border-top:1px solid var(--line-soft);background-color:var(--surface-sunk)}
.dm-meta{font-size:var(--fs-sm);color:var(--ink-3)}
.dm-keys{display:inline-flex;align-items:center;gap:0.35rem;margin-right:0.5rem;font-size:var(--fs-xs);color:var(--ink-3)}
.dm-keys kbd + kbd{margin-left:-0.1rem}
.table-scroll.is-fill{height:calc(100vh - var(--header-h) - 220px);min-height:360px;overflow:auto}
.table-scroll.is-fill .tbl-compact th{top:0}
/* Im Modal: Spalte wird zum Flex-Container, die Tabelle nimmt den Rest. */
.dm-col:has(.table-scroll.is-fill){display:flex;flex-direction:column;overflow:hidden}
.dm-col:has(.table-scroll.is-fill) > :not(.dm-sec){flex:none}
.dm-col > .dm-sec:has(.table-scroll.is-fill){flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.dm-col .table-scroll.is-fill{flex:1 1 0;height:auto;min-height:0}
.list-with-rail{display:flex;align-items:stretch;min-height:0}
.list-with-rail > .table-scroll{flex:1 1 auto;min-width:0}
.alpha-rail{flex:none;display:flex;flex-direction:column;align-items:center;width:24px;padding:0.25rem 0.1rem;overflow:auto;scrollbar-width:none}
.alpha-rail > a{flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:var(--radius-xs);color:var(--ink-2);font-size:11px;font-weight:700;line-height:1;text-decoration:none;transition:background-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.alpha-rail > a:hover{background-color:var(--surface-3);color:var(--ink)}
.alpha-rail > a.is-active{background-color:var(--accent-soft);color:var(--accent)}
.alpha-rail > a[aria-disabled="true"]{color:var(--ink-4);pointer-events:none}
.tbl-compact tbody tr.is-recent td,
.tbl-compact tbody tr.is-recent:hover td{background-color:var(--accent-tint)}
.tbl-compact tbody tr.is-recent td:first-child::before{content:"";display:inline-block;width:8px;height:8px;margin-right:0.5rem;vertical-align:middle;border-radius:var(--radius-pill);background-color:var(--accent-2)}
.recent-label{display:inline-flex;align-items:center;height:18px;margin-left:0.5rem;padding:0 0.5rem;border-radius:var(--radius-pill);background-color:var(--accent-soft);color:var(--accent);font-size:11px;font-weight:700;letter-spacing:0;text-transform:none;white-space:nowrap}
.dm-head > .dm-back{grid-column:1 / -1;grid-row:1;justify-self:start;margin:-0.2rem 0 0.6rem -0.5rem}
.dm-back{display:inline-flex;align-items:center;gap:0.25rem;max-width:260px;height:28px;padding:0 0.7rem 0 0.35rem;border:0;border-radius:var(--radius-pill);background-color:transparent;color:var(--ink-2);font:inherit;font-size:var(--fs-sm);font-weight:600;cursor:pointer;transition:background-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.dm-back .icon{width:16px;height:16px}
.dm-back > span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dm-back:hover{background-color:var(--surface-3);color:var(--ink)}
.dm-back:focus-visible{box-shadow:var(--focus-ring)}
.dm-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:0.15rem 0.5rem;min-height:18px;margin-bottom:0.2rem;font-size:11px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-3)}
.dm-crumbs > * + *::before{content:"\203A";margin-right:0.5rem;letter-spacing:0;color:var(--ink-4)}
.dm-crumbs > :last-child{color:var(--ink-2)}
.year-bars{display:flex;align-items:flex-end;gap:0.5rem}
.year-bar{display:grid;grid-template-rows:48px auto auto;justify-items:center;align-items:end;gap:0.15rem;min-width:52px}
.year-bar::before{content:"";grid-row:1;grid-column:1;width:28px;height:100%;border-radius:var(--radius-xs) var(--radius-xs) 0 0;background-color:var(--surface-3)}
.year-bar > span{grid-row:1;grid-column:1;align-self:end;display:block;width:28px;height:var(--h);min-height:3px;border-radius:var(--radius-xs) var(--radius-xs) 0 0;background-color:var(--accent-2)}
.year-bar > b{font-size:var(--fs-xs);font-weight:800;color:var(--ink)}
.year-bar > small{font-family:var(--font-tabular);font-size:11px;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink-3)}
.list-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:0.5rem}
.list-toolbar > .search-field{flex:1 1 240px;max-width:none}
.list-toolbar > .list-count{margin-left:auto;font-family:var(--font-tabular);font-size:var(--fs-sm);font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink-3)}
.avatar-mark{flex:none;display:inline-grid;place-items:center;width:32px;height:32px;border-radius:var(--radius-sm);background-color:var(--surface-sunk);color:var(--ink-2);font-size:12px;font-weight:800;letter-spacing:0.02em;line-height:1;text-transform:uppercase}
.avatar-mark.is-lg{width:40px;height:40px;font-size:14px}
/* Mobil: Splits einspaltig, Modal fast vollflächig. */
@media (max-width: 899.98px) {
.modal.modal-xl { width: 100%; height: calc(100dvh - 1rem); }
.dm-body.dm-split-side { grid-template-columns: minmax(0, 1fr); overflow: auto; }
.dm-split-side > .dm-col:last-child { border-left: 0; border-top: 1px solid var(--line); }
}
/* ── Kontakte ── */
/* Ergänzungen der Kontakte-View (contacts.js). Die Bausteine dm-*, alpha-rail, year-bars, list-toolbar und
avatar-mark stehen im Abschnitt „Detail-Modals (dm-) und Kontakte“ davor; hier nur, was sie zusätzlich brauchen. */
/* Seitenkopf, Werkzeugleiste, Fußzeile */
.contacts-head-sub { margin: 0.25rem 0 0; font-size: var(--fs-md); }
.contacts-head-actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.contacts-toolbar { margin-bottom: 0.75rem; }
.list-toolbar .kicker { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.contacts-panel { margin-top: 0; overflow: hidden; }
.contacts-panel .table-scroll { border-radius: 0; }
.list-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; padding: 0.6rem 1rem; border-top: 1px solid var(--line-soft); background-color: var(--surface-sunk); font-size: var(--fs-xs); color: var(--ink-3); }
.list-foot kbd,
.dm-nav kbd,
.dm-keys kbd {
display: inline-flex; align-items: center; justify-content: center;
min-width: 20px; height: 20px; padding: 0 0.35rem;
border: 1px solid var(--line-strong); border-radius: var(--radius-xs);
background-color: var(--surface); color: var(--ink-3);
font-family: var(--font-sans); font-size: 11px; font-weight: 600; line-height: 1;
}
/* Liste: feste Spaltenbreiten, Name einzeilig mit Auslassung (die VirtualList rechnet mit gleich hohen Zeilen) */
.contacts-tbl { table-layout: fixed; }
.contacts-tbl col.c-num { width: 7.5rem; }
.contacts-tbl col.c-sum { width: 9rem; }
.contacts-tbl col.c-date { width: 9rem; }
.contacts-tbl col.c-act { width: 3.5rem; }
.tbl-compact.contacts-tbl tbody td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tbl-compact.contacts-tbl th:last-child,
.tbl-compact.contacts-tbl td:last-child,
.tbl-compact.contact-inv-tbl th:last-child,
.tbl-compact.contact-inv-tbl td:last-child { padding-right: 0.5rem; }
.contacts-tbl .num,
.contact-inv-tbl .num { text-align: right; font-family: var(--font-tabular); font-variant-numeric: tabular-nums; white-space: nowrap; }
.contacts-tbl td.num,
.contact-inv-tbl td.num { font-weight: 600; }
.contact-inv-tbl td.num.is-neg { color: var(--danger); }
.contact-cell { display: flex; align-items: center; gap: 0.75rem; min-width: 0; min-height: 32px; }
.contact-cell-text { flex: 1 1 auto; min-width: 0; }
.contact-cell-text > strong,
.contact-cell-text > small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 16px; }
.contact-cell-text > strong { font-weight: 700; color: var(--ink); }
.contact-cell-text > small { font-size: var(--fs-xs); color: var(--ink-3); }
.contact-act { text-align: right; }
.row-chevron { width: 30px; height: 30px; border: 0; background-color: transparent; opacity: 0.45; }
.tbl-compact tbody tr:hover .row-chevron,
.tbl-compact tbody tr:focus-visible .row-chevron,
.tbl-compact tbody tr.is-selected .row-chevron { opacity: 1; }
/* Modal: Kopf und Menü */
.contact-head-id { display: flex; align-items: center; gap: 0.9rem; min-width: 0; }
.contact-head-text { min-width: 0; }
.dm-actions .modal-close { padding: 0; font-size: inherit; line-height: normal; }
.contact-menu-host { position: relative; display: inline-flex; }
.contact-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 10; min-width: 200px; padding: 6px; background-color: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); }
.contact-menu .dd-option { gap: 0.6rem; }
.contact-menu .dd-option.is-danger { color: var(--danger); }
.contact-menu .dd-option.is-danger:hover { background-color: var(--danger-soft); }
/* Modal: Kennzahlenband (KPIs links, Jahresbalken rechts), Rechnungen */
.contact-band { align-items: flex-end; justify-content: space-between; }
.contact-band .year-bars { margin-left: auto; padding-left: 1.25rem; }
.contact-loading { align-self: center; }
.contact-inv-toolbar { flex: none; margin-bottom: 0.6rem; }
.dm-sec-head { flex: none; }
.contact-inv-scroll { border: 1px solid var(--line); border-radius: var(--radius-lg); scroll-padding-top: 2.5rem; }
.contact-inv-tbl .col-nr { white-space: nowrap; }
/* Modal: Seitenspalte (Stammdaten, Bank, Aliasse, Notizen, Formular) */
.contact-pre { white-space: pre-line; }
.contact-mono,
.contact-iban-text { font-family: var(--font-mono); font-size: var(--fs-sm); }
.contact-iban { display: flex; align-items: center; gap: 0.25rem; }
.contact-iban-copy { width: 28px; height: 28px; border: 0; background-color: transparent; }
.contact-link { color: var(--accent); font-weight: 500; }
.contact-link:hover { text-decoration: underline; }
.contact-empty { margin: 0; font-size: var(--fs-sm); color: var(--ink-3); }
.contact-notes { margin: 0; font-size: var(--fs-sm); color: var(--ink-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.chip.contact-alias { gap: 0.25rem; padding-right: 0.35rem; cursor: default; }
.contact-alias > button { display: inline-flex; padding: 0; border: 0; border-radius: var(--radius-pill); background-color: transparent; color: var(--ink-3); cursor: pointer; }
.contact-alias > button:hover { color: var(--danger); }
.contact-inline-form { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.6rem; }
.contact-inline-form .input { flex: 1 1 120px; width: auto; }
.contact-edit .modal-field { margin-bottom: 0.7rem; }
.contact-edit-hint { margin: 0.3rem 0 0; font-size: var(--fs-xs); color: var(--ink-3); }
.contact-edit-pair { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 0 0.75rem; }
.contact-edit-actions { display: flex; gap: 0.5rem; margin-top: 0.25rem; }
.contact-foot-spacer { flex: 1 1 auto; }
/* Beleg-Modal im Stapel über dem Kontakt-Modal (setDetailStackContext): Zurück-Button und Brotkrumen im alten Kopf */
.modal-detail-evo .mh-left > .dm-back { margin: -0.2rem 0 0.4rem -0.5rem; }
.modal-detail-evo .mh-actions > .dm-nav { margin-right: 0.25rem; }