:root { --c-bg: #f5f6f8; --c-surface: #ffffff; --c-border: #e2e5ec; --c-text: #1a1d23; --c-muted: #6b7280; --c-primary: #2d5a87; --c-primary-hover: #234770; --c-primary-soft: #eaf1f8; --c-danger: #b3261e; --radius: 8px; --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06); --shadow-md: 0 6px 24px rgba(15, 23, 42, .08); --fs: 14px; } /* ── Dark Mode ──────────────────────────────────────────────────────────────── Dunkle Basis-Palette für alle Dark-Themes (data-theme="dark" wird vom _Layout am gesetzt). Der theme-spezifische Akzent (--c-primary*) kommt zusätzlich inline. Höhere Spezifität als :root → überschreibt die hellen Defaults zuverlässig. */ html[data-theme="dark"] { --c-bg: #1b1f27; --c-surface: #252a34; --c-border: #39404d; --c-text: #e6e8ec; --c-muted: #9aa3b2; --c-danger: #f0857c; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .45); --shadow-md: 0 8px 28px rgba(0, 0, 0, .55); color-scheme: dark; /* native Controls (Scrollbars, Date-Picker) dunkel rendern */ } /* Komponenten-Tweaks, die nicht rein über Variablen laufen: der helle Gelb-Highlight (#fff4d6 in .badge--soon / .form-warning) würde im Dunkeln blenden → gedämpftes Amber. */ html[data-theme="dark"] .badge--soon, html[data-theme="dark"] .form-warning { background: #3a3320; color: #f0d9a0; } /* ── Öffnungszeiten-Editor (MaaraOeffnungszeiten) ───────────────────────────── Wochentag-Zeilen mit Checkbox + Zeitspannen-Chips; Format wie WinForms memWochentagZeitAuswahl. Nutzt Theme-Variablen (hell + dunkel). */ .oz-editor { display: flex; flex-direction: column; gap: .35rem; } .oz-row { display: flex; align-items: center; gap: .75rem; padding: .25rem .4rem; border: 1px solid var(--c-border); border-radius: 6px; background: var(--c-surface); } .oz-row--off { opacity: .55; } .oz-day { display: inline-flex; align-items: center; gap: .4rem; width: 7.5rem; cursor: pointer; font-weight: 500; } .oz-spans { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; } .oz-span { display: inline-flex; align-items: center; gap: .25rem; padding: .15rem .4rem; border: 1px solid var(--c-border); border-radius: 5px; } .oz-span input[type="time"] { font: inherit; color: var(--c-text); background: transparent; border: 0; outline: none; } .oz-del, .oz-add { border: 1px solid var(--c-border); background: transparent; color: var(--c-muted); border-radius: 4px; cursor: pointer; padding: .05rem .35rem; font-size: .85rem; line-height: 1.4; } .oz-del:hover { color: var(--c-danger); border-color: var(--c-danger); } .oz-add:hover { color: var(--c-primary); border-color: var(--c-primary); } /* ── Kompakt-Dichte ─────────────────────────────────────────────────────────── Für die "Kompakt"-Themes (data-density="compact", DevExtreme dx.*.compact.css). Das Compact-Theme verdichtet die Widgets selbst (Editor-Höhen, Grid-Zeilen); hier zusätzlich die vertikalen Abstände ZWISCHEN den dxForm-Feldern reduzieren und die Shell-Grundschrift leicht verkleinern. */ html[data-density="compact"] { --fs: 13px; } html[data-density="compact"] .dx-layout-manager .dx-field-item:not(.dx-field-item-has-group) { padding-bottom: 2px; } html[data-density="compact"] .dx-form-group-with-caption > .dx-form-group-content { padding-top: 10px; margin-top: 10px; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; overflow-x: hidden; /* kein horizontaler Body-Scrollbar, auch wenn ein Inline-Element zu breit ist */ /* Vertikale Scrollbar IMMER zeigen (statt scrollbar-gutter: stable): Layout bleibt beim Scrollbar-Erscheinen stabil (100vw = Body-Breite, wichtig für die PDF-Vorschau in Reporting/Run.cshtml) — aber ohne den leeren Gutter-Streifen, vor dem Topbar und Footer sonst ~17px vor dem Fensterrand enden würden. */ overflow-y: scroll; background: var(--c-bg); color: var(--c-text); font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; font-size: var(--fs); min-height: 100%; } a { color: var(--c-primary); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3 { margin: 0 0 .5rem; font-weight: 600; line-height: 1.25; } .muted { color: var(--c-muted); } /* ===== App-Shell (authentifiziert) — Bexio-Stil: Sidebar links, Topbar + Inhalt rechts ===== */ .app-shell { display: flex; flex-direction: row; min-height: 100vh; } /* Rechter Teil: Topbar oben, Inhalt, Footer — rückt für die fixe Sidebar zur Seite. */ .app-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; min-height: 100vh; margin-left: 210px; transition: margin-left .15s ease-out; } html.sidebar-collapsed .app-body { margin-left: 56px; } @media (max-width: 800px) { .app-body, html.sidebar-collapsed .app-body { margin-left: 0; } /* Sidebar ist Off-Canvas */ } .app-header { display: flex; align-items: center; column-gap: 1rem; padding: 0 1.5rem; height: 56px; /* exakt gleich hoch wie die Brand-Zeile der Sidebar — die untere Linie läuft durchgehend */ flex: 0 0 auto; background: var(--c-surface); border-bottom: 1px solid var(--c-border); box-shadow: var(--shadow-sm); position: relative; z-index: 150; /* über dem Seiteninhalt (⚙️-Dropdown) */ } /* --- Burger-Button für Mobile-Nav --- */ .app-nav-toggle { display: none; /* Default: hidden, sichtbar nur unter Schwelle */ margin-left: auto; width: 36px; height: 36px; padding: 0; background: transparent; border: 1px solid var(--c-border); border-radius: 6px; cursor: pointer; align-items: center; justify-content: center; } .app-nav-toggle .burger, .app-nav-toggle .burger::before, .app-nav-toggle .burger::after { content: ""; display: block; width: 18px; height: 2px; background: var(--c-text); border-radius: 1px; position: relative; } .app-nav-toggle .burger::before { position: absolute; top: -6px; left: 0; width: 18px; } .app-nav-toggle .burger::after { position: absolute; top: 6px; left: 0; width: 18px; } /* Mobile: Burger sichtbar (die Off-Canvas-Regeln der Sidebar stehen im Sidebar-Abschnitt weiter unten — sie müssen NACH der position:sticky-Basisregel kommen). */ @media (max-width: 800px) { .app-nav-toggle { display: inline-flex; margin-left: 0; } } .app-brand { display: inline-flex; align-items: center; gap: .5rem; color: var(--c-text); font-weight: 600; font-size: 1.1rem; } .app-brand:hover { text-decoration: none; } /* Brand-Icon: memoria-Backoffice-Icon (favicon.ico), eckig ohne Rundung. */ .brand-mark { width: 22px; height: 22px; object-fit: contain; flex: 0 0 auto; } /* ── Sidebar (Bexio-Stil): Icons + Labels, Gruppen klappen inline auf; eingeklappt (html.sidebar-collapsed) bleibt eine Icon-Leiste, Gruppen öffnen als Flyout. ── */ .app-sidebar { /* Fixiert über die volle Fensterhöhe — die weisse Menüspalte geht immer bis unten durch und bleibt beim Scrollen stehen, egal wie hoch die Seite ist. (position:sticky scheitert am overflow-x:hidden von html/body.) Der Inhalt rückt via margin-left am .app-body zur Seite. */ position: fixed; top: 0; bottom: 0; left: 0; width: 210px; display: flex; flex-direction: column; z-index: 250; /* über full-bleed-Seiteninhalt (z.B. Dashboard-Viewer) */ background: var(--c-surface); border-right: 1px solid var(--c-border); box-shadow: var(--shadow-sm); transition: width .15s ease-out; } .app-sidebar .app-brand { height: 56px; /* fluchtet mit der Topbar (durchgehende Linie) */ flex: 0 0 auto; padding: 0 1rem; border-bottom: 1px solid var(--c-border); white-space: nowrap; overflow: hidden; } .app-nav { display: flex; flex-direction: column; flex: 1 1 auto; /* KEIN overflow:auto/hidden — das würde die absoluten Hover-Flyouts abschneiden. Im Mobile-Overlay (Gruppen inline) scrollt die Nav stattdessen. */ overflow: visible; padding: .5rem 0; } /* Trennlinie zwischen Modul-Blöcken (Bexio-Stil). */ .snav-sep { border-top: 1px solid var(--c-border); margin: .55rem .75rem; } /* Letzter Abschnitt (Dashboards/Reporting) — folgt direkt auf die Module. */ .snav-bottom { margin-top: 0; } /* Einzel-Link und Gruppen-Toggle teilen sich die Zeilen-Optik. */ .app-nav .snav-link, .app-nav .snav-group-toggle { display: flex; align-items: center; gap: .7rem; width: 100%; padding: .7rem 1rem; color: var(--c-text); font: inherit; font-weight: 500; background: none; border: 0; border-left: 3px solid transparent; cursor: pointer; text-align: left; white-space: nowrap; } .app-nav .snav-link:hover, .app-nav .snav-group-toggle:hover { background: var(--c-primary-soft); text-decoration: none; } .app-nav svg { flex: 0 0 auto; opacity: .85; width: 16px; height: 16px; } .sidebar-collapse svg { width: 16px; height: 16px; } .snav-label { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; } .snav-caret { font-size: .7rem; opacity: .6; } /* Aktiver Eintrag: dunkler Balken wie Bexio. */ .app-nav .snav-link.active { background: var(--c-primary); color: #fff; border-left-color: var(--c-primary-hover); } .app-nav .snav-link.active svg { opacity: 1; } .snav-group.has-active > .snav-group-toggle { color: var(--c-primary); } /* Gruppen: Untermenü als Flyout rechts daneben, öffnet beim Hover (Bexio-Stil); .open zusätzlich für Klick/Touch. Der Gruppen-Eintrag färbt sich dabei dunkel. */ .snav-group { position: relative; } .snav-group-menu { display: none; position: absolute; left: 100%; top: 0; min-width: 220px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 0 var(--radius) var(--radius) 0; box-shadow: var(--shadow-md); padding: .25rem 0; z-index: 300; } .snav-group:hover > .snav-group-menu, .snav-group.open > .snav-group-menu { display: block; } .snav-group:hover > .snav-group-toggle, .snav-group.open > .snav-group-toggle { background: var(--c-primary); color: #fff; } .snav-group:hover > .snav-group-toggle svg, .snav-group.open > .snav-group-toggle svg { opacity: 1; } .snav-group-menu a { display: block; padding: .5rem 1rem; color: var(--c-text); border-left: 3px solid transparent; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .snav-group-menu a:hover { background: var(--c-primary-soft); text-decoration: none; } .snav-group-menu a.active { background: var(--c-primary); color: #fff; border-left-color: var(--c-primary-hover); } /* Einklapp-Button unten in der Sidebar — nur Icon, rechtsbündig; gleiche Höhe wie der Footer rechts (44px), damit die untere Linie fluchtet. */ .sidebar-collapse { height: 44px; flex: 0 0 auto; display: flex; align-items: center; justify-content: flex-end; padding: 0 1rem; border: 0; border-top: 1px solid var(--c-border); background: none; color: var(--c-muted); font: inherit; cursor: pointer; white-space: nowrap; } .sidebar-collapse:hover { background: var(--c-primary-soft); color: var(--c-text); } .sidebar-collapse svg { transition: transform .15s; flex: 0 0 auto; } /* ── Eingeklappt: nur Icons (56px); Gruppen-Untermenü als Flyout rechts daneben. ── */ html.sidebar-collapsed .app-sidebar { width: 56px; } html.sidebar-collapsed .snav-label, html.sidebar-collapsed .snav-caret, html.sidebar-collapsed .app-brand .brand-text { display: none; } html.sidebar-collapsed .app-sidebar .app-brand { justify-content: center; padding-left: 0; padding-right: 0; } html.sidebar-collapsed .app-nav .snav-link, html.sidebar-collapsed .app-nav .snav-group-toggle, html.sidebar-collapsed .sidebar-collapse { justify-content: center; padding-left: 0; padding-right: 0; } html.sidebar-collapsed .sidebar-collapse svg { transform: rotate(180deg); } /* ── Mobile (Off-Canvas): Sidebar aus dem Layout nehmen (fixed, links reingeschoben), Collapsed-Zustand ignorieren, Gruppen inline aufklappen (kein Hover auf Touch). ── */ @media (max-width: 800px) { .app-sidebar { position: fixed; /* überschreibt sticky — nimmt die 210px aus dem Flow */ top: 0; bottom: 0; left: 0; height: auto; transform: translateX(-100%); transition: transform .15s ease-out; z-index: 400; box-shadow: var(--shadow-md); } body.nav-open .app-sidebar { transform: translateX(0); } .app-sidebar .app-nav { overflow-y: auto; } /* Abdunkelung hinter der offenen Sidebar (Klick schliesst — JS). */ body.nav-open::after { content: ""; position: fixed; inset: 0; background: rgba(15, 23, 42, .4); z-index: 350; } html.sidebar-collapsed .app-sidebar { flex-basis: 210px; width: 210px; } html.sidebar-collapsed .snav-label, html.sidebar-collapsed .app-brand .brand-text { display: initial; } html.sidebar-collapsed .snav-caret { display: inline; } html.sidebar-collapsed .app-sidebar .app-brand { justify-content: flex-start; padding: 0 1rem; } html.sidebar-collapsed .app-nav .snav-link, html.sidebar-collapsed .app-nav .snav-group-toggle { justify-content: flex-start; padding: .55rem 1rem; } .sidebar-collapse { display: none; } .snav-group-menu { position: static; min-width: 0; border: 0; border-radius: 0; box-shadow: none; padding: 0; background: transparent; } /* Kein Hover-Öffnen und keine Hover-Färbung auf Touch — nur der Klick (.open) zählt. */ .snav-group:hover > .snav-group-menu { display: none; } .snav-group.open > .snav-group-menu { display: block; } .snav-group:hover:not(.open) > .snav-group-toggle { background: none; color: var(--c-text); } .snav-group-menu a { padding: .45rem 1rem .45rem 3.05rem; } } /* --- Sub-Dropdowns (z. B. "Kassen"-Kategorie) --- */ .nav-dropdown { position: relative; display: inline-flex; align-items: center; } .nav-dropdown-toggle { background: none; border: 0; padding: .35rem 0; color: var(--c-text); font: inherit; font-weight: 500; cursor: pointer; border-bottom: 2px solid transparent; display: inline-flex; align-items: center; gap: .25rem; } .nav-dropdown-toggle:hover, .nav-dropdown.open > .nav-dropdown-toggle { border-bottom-color: var(--c-primary); } .nav-caret { font-size: .75rem; opacity: .7; } .nav-dropdown-menu { position: absolute; top: 100%; left: 0; min-width: 240px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); box-shadow: var(--shadow-md); padding: .25rem 0; z-index: 200; display: none; } .nav-dropdown:hover > .nav-dropdown-menu, .nav-dropdown.open > .nav-dropdown-menu { display: block; } .nav-dropdown-menu a { display: block; padding: .5rem 1rem; color: var(--c-text); border-bottom: 0; font-weight: normal; } .nav-dropdown-menu a:hover { background: var(--c-primary-soft); text-decoration: none; } /* Die Header-Dropdowns (⚙️/👤) bleiben auch im Mobile absolute Popups — die alten Inline-Regeln aus der Burger-Menü-Ära sind mit der Sidebar-Navigation entfallen. */ .app-user { display: flex; align-items: center; gap: 0.75rem 1rem; /* row-gap / column-gap */ color: var(--c-muted); min-width: 0; flex: 1 1 auto; /* füllt die Topbar — Mandant links, ⚙️ + Benutzer rechts */ } .app-user .nav-dropdown--settings { margin-left: auto; } .mandant-switcher { margin: 0; } .mandant-switcher select { height: 32px; border: 1px solid var(--c-border); border-radius: 6px; background: var(--c-surface); padding: 0 .5rem; font: inherit; color: var(--c-text); cursor: pointer; max-width: 220px; } .mandant-switcher select:focus { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px var(--c-primary-soft); } .mandant-static { padding: .25rem .55rem; border-radius: 6px; background: var(--c-primary-soft); color: var(--c-primary); font-weight: 500; font-size: .85rem; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .user-name { font-weight: 500; color: var(--c-text); } /* Theme-Auswahl im Header (neben Mandant/Username). */ .theme-switch { display: inline-flex; align-items: center; gap: 0.3rem; cursor: pointer; } .theme-switch__icon { font-size: 1rem; line-height: 1; } /* Exakt gleiche Masse wie der Mandanten-Switcher (.mandant-switcher select). */ .theme-switch select { height: 32px; border: 1px solid var(--c-border); border-radius: 6px; background: var(--c-surface); padding: 0 .5rem; font: inherit; color: var(--c-text); cursor: pointer; max-width: 11rem; } .theme-switch select:focus { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px var(--c-primary-soft); } .logout-form { margin: 0; } .btn-link { background: none; border: 0; color: var(--c-primary); cursor: pointer; padding: 0; font: inherit; } .btn-link:hover { text-decoration: underline; } .app-main { flex: 1; /* Horizontaler Außen-Abstand zum Browser-Rand. Der eigentliche Form-Innenabstand sitzt in den DevExtreme-Form-Groups (.dx-form-group-content) weiter unten — die 2.5rem hier sind nur der Abstand zwischen Page-Inhalt und Browser-Fensterrand. Volle Breite (kein max-width) — der Inhalt nutzt den ganzen verfügbaren Platz, statt rechts Leerraum zu lassen und in Grids horizontal zu scrollen. */ padding: 2rem 2.5rem; width: 100%; min-width: 0; } @media (max-width: 600px) { .app-main { padding: 1rem 1rem; } } /* Defensive zweite Verteidigungslinie: explizites Innen-Padding auf der .page-Section. Greift auch dann, wenn eine View-spezifische Override die .app-main-Regel weggebogen hat (z.B. Fill-Height-Layouts in PosLayouts/Tischplan-Edit setzen .app-main auf flex/0-padding). */ .page { padding: 0 .75rem; box-sizing: border-box; } @media (max-width: 800px) { .page { padding: 0; } } /* DevExtreme-Form-Override: die Group-Inhalte (Identifikation, Kontakt, …) und die Felder selbst kleben standardmässig direkt an der linken/rechten Group-Border — kein Innen-Padding. Hier ergänzen wir's, damit Eingabefelder Luft zur Group-Border haben. */ .dx-form .dx-form-group-with-caption .dx-form-group-content, .dx-form .dx-form-group-content { padding-left: 1rem; padding-right: 1rem; } .dx-form .dx-form-group-caption { padding-left: 1rem; } /* dxTabPanel-Inhalt eingerückt — sonst kleben auch Tabs an der Page-Section-Border. */ .page .dx-tabpanel > .dx-multiview-wrapper { padding: 0 .5rem; } .app-footer { height: 44px; /* gleiche Höhe wie der Einklapp-Bereich der Sidebar — die untere Linie läuft durchgehend */ flex: 0 0 auto; display: flex; align-items: center; justify-content: center; gap: .25rem; padding: 0 2.5rem; color: var(--c-muted); border-top: 1px solid var(--c-border); background: var(--c-surface); font-size: .85rem; } /* Lizenzfehler im Footer — bewusst kräftiges Rot, damit Admins es nicht übersehen. */ .app-footer .lizenz-fehler { color: #c0392b; font-weight: 600; } /* Lizenzname als klickbarer "Link" — visuell wie der Text rundherum (gedämpft), beim Hover wechselt es auf die Akzentfarbe damit klar ist, dass es klickbar ist. */ .app-footer .lizenz-link { background: none; border: none; padding: 0; color: inherit; font: inherit; cursor: pointer; text-decoration: underline dotted; } .app-footer .lizenz-link:hover { color: var(--c-accent, #1b6ec2); text-decoration-style: solid; } /* Lizenzinfo-Popup — Inhalt im Stil zwei-spaltiger Key/Value-Zeilen, wie's die WinForms-Version macht. */ .liz-info .liz-row { display: flex; padding: .25rem 0; border-bottom: 1px solid var(--c-border, #eee); } .liz-info .liz-row:last-of-type { border-bottom: none; margin-bottom: .75rem; } .liz-info .liz-key { flex: 0 0 130px; font-weight: 600; color: var(--c-muted, #666); } .liz-info .liz-val { flex: 1; } .liz-info .liz-opt-title { margin-top: 1rem; margin-bottom: .35rem; font-weight: 600; color: var(--c-muted, #666); } .liz-info .liz-opt-empty { font-style: italic; color: var(--c-muted, #888); } .liz-info .liz-loading { padding: 1rem; text-align: center; color: var(--c-muted, #888); } /* ===== Page ===== */ .page__header { margin-bottom: 1.5rem; } .page__header h1 { font-size: 1.5rem; } .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; } .card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); padding: 1.25rem; box-shadow: var(--shadow-sm); } .card--link { display: block; color: inherit; text-decoration: none; transition: transform .12s, box-shadow .12s, border-color .12s; } .card--link:hover { text-decoration: none; border-color: var(--c-primary); box-shadow: var(--shadow-md); transform: translateY(-1px); } .card--link h2 { color: var(--c-primary); } .card h2 { font-size: 1.05rem; } .card p { color: var(--c-muted); margin: .25rem 0 .75rem; } /* Kategorie-Karte: nicht selbst klickbar, listet stattdessen Sub-Einträge auf. Visuell wie die Leaf-Karte, aber ohne Hover-Lift (nur die Sub-Links sind interaktiv). */ .card--category h2 { color: var(--c-text); } .card-sublist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; } .card-sublink { display: block; padding: .55rem .7rem; border: 1px solid var(--c-border); border-radius: 6px; background: var(--c-bg); color: inherit; text-decoration: none; transition: border-color .12s, background .12s; } .card-sublink:hover { text-decoration: none; border-color: var(--c-primary); background: var(--c-primary-soft); } .card-sublink__title { display: block; font-weight: 600; color: var(--c-primary); } .card-sublink__desc { display: block; color: var(--c-muted); font-size: .85rem; margin-top: .1rem; } .badge { display: inline-block; padding: .15rem .55rem; border-radius: 999px; font-size: .75rem; font-weight: 500; } .badge--soon { background: #fff4d6; color: #8a6100; } /* ===== Auth-Shell ===== */ .auth-shell { min-height: 100vh; background: linear-gradient(135deg, #eef2f8 0%, #f6f7fb 100%); } .auth-main { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.5rem; } .auth-card { width: 100%; max-width: 380px; background: var(--c-surface); border-radius: var(--radius); box-shadow: var(--shadow-md); padding: 2rem; } .auth-card__header { text-align: center; margin-bottom: 1.5rem; } .auth-brand { display: inline-flex; align-items: center; gap: .5rem; margin-bottom: 1rem; font-weight: 600; font-size: 1.15rem; } .auth-card__title { font-size: 1.35rem; margin: 0; } .auth-card__subtitle { margin: .25rem 0 0; color: var(--c-muted); } .auth-form .field { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1rem; } .auth-form label { font-weight: 500; font-size: .9rem; } .auth-form input[type="text"], .auth-form input[type="password"], .auth-form input:not([type]) { height: 38px; border: 1px solid var(--c-border); border-radius: 6px; padding: 0 .75rem; font-size: 1rem; background: var(--c-surface); transition: border-color .15s, box-shadow .15s; } .auth-form input:focus { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px var(--c-primary-soft); } .field--inline { flex-direction: row; align-items: center; } .checkbox { display: inline-flex; gap: .5rem; align-items: center; cursor: pointer; font-size: .9rem; color: var(--c-muted); font-weight: 400; } .field-error { color: var(--c-danger); font-size: .85rem; } .form-error { background: #fde8e6; color: var(--c-danger); border-radius: 6px; padding: .65rem .8rem; font-size: .9rem; margin-bottom: 1rem; } .form-error:empty { display: none; } .form-error ul { margin: 0; padding-left: 1.1rem; } /* ===== Buttons ===== */ .btn { display: inline-block; border: 0; border-radius: 6px; padding: .55rem 1rem; font: inherit; cursor: pointer; transition: background-color .15s; text-decoration: none; text-align: center; } .btn--primary { background: var(--c-primary); color: #fff; } .btn--primary:hover { background: var(--c-primary-hover); text-decoration: none; } .btn--block { display: block; width: 100%; } .btn { background: var(--c-surface); border: 1px solid var(--c-border); color: var(--c-text); } .btn:hover { background: var(--c-bg); } .btn--ghost { background: transparent; border: 1px solid var(--c-border); color: var(--c-text); } .btn--danger { background: var(--c-surface); border: 1px solid var(--c-danger); color: var(--c-danger); } .btn--danger:hover { background: var(--c-danger); color: #fff; } /* ===== Edit-Seite ===== */ .page__header--with-actions { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; } .edit-actions { margin-top: 1.5rem; display: flex; gap: .5rem; flex-wrap: wrap; } .edit-actions .btn--danger { margin-left: auto; } .form-success { background: #e3f5e1; color: #205820; border-radius: 6px; padding: .65rem .8rem; font-size: .9rem; margin-bottom: 1rem; } .form-warning { background: #fff4d6; color: #6b4f00; border-radius: 6px; padding: .65rem .8rem; font-size: .9rem; margin-bottom: 1rem; } /* Inaktive Mitarbeiter im Grid: durchgestrichen + leicht ausgegraut */ .dx-datagrid .row-inactive td:not(.dx-command-edit):not(.dx-command-select), .dx-treelist .row-inactive td:not(.dx-command-edit):not(.dx-command-select):not(.dx-command-expand) { text-decoration: line-through; color: #9b3a3a; } /* Click-to-edit: Zeilen sehen klickbar aus */ .dx-datagrid .row-clickable { cursor: pointer; } .toolbar-label { color: var(--c-muted); font-size: .9rem; padding: 0 .5rem 0 .35rem; white-space: nowrap; } /* Passwort-Popup: TextBox + Buttons in einer Reihe */ .pwd-row { display: flex; gap: .35rem; align-items: center; } .pwd-row__field { flex: 1; min-width: 0; } /* Read-only Anzeige in dxForm (für Felder, die nur als Text gezeigt werden, kein Editor). */ .readonly-text { padding: 6px 10px; background: var(--c-bg); border: 1px solid var(--c-border); border-radius: 4px; color: var(--c-text); min-height: 32px; line-height: 1.4; } /* 2FA — Status-Block in der Mitarbeiter-Edit-Maske */ .twofa-cell { /* Form-Item-Cell darf seinen Inhalt frei rendern — kein flex-stretch auf den dxButton. */ display: block; } .twofa-btn-wrap { /* Wrapper sorgt dafür, dass der dxButton seine eigene Breite behält (width:240 vom Widget) und nicht durch ein flex-Layout des Form-Items gestreckt wird. */ display: inline-block; margin-top: .25rem; } .twofa-status { padding: .65rem .85rem; border-radius: 6px; border: 1px solid var(--c-border); margin: 0 0 .75rem; } .twofa-status--on { background: #eaf6ec; border-color: #b9dec3; } .twofa-status--off { background: var(--c-bg); } /* 2FA-Setup-Popup */ .twofa-secret { display: block; background: var(--c-bg); border: 1px solid var(--c-border); border-radius: 4px; padding: .4rem .6rem; font-family: 'Consolas', 'Courier New', monospace; font-size: 14px; letter-spacing: .05em; margin: .25rem 0 .5rem; word-break: break-all; } .twofa-actions { display: flex; gap: .5rem; justify-content: flex-end; margin-top: 1rem; } /* Recovery-Codes-Liste */ .twofa-recovery-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: .35rem .75rem; margin: .75rem 0; padding: .75rem; background: var(--c-bg); border: 1px solid var(--c-border); border-radius: 6px; } .twofa-recovery-code { font-family: 'Consolas', 'Courier New', monospace; font-size: 14px; letter-spacing: .05em; padding: .15rem; user-select: all; } /* Auth-Card: hint-Text unter dem Form (Login-/2FA-Page) */ .auth-card__hint { margin-top: 1rem; font-size: .85rem; color: var(--c-muted); line-height: 1.5; } .auth-card__hint code { background: var(--c-bg); border: 1px solid var(--c-border); border-radius: 3px; padding: 0 .25rem; font-family: 'Consolas', 'Courier New', monospace; font-size: .85em; } /* ===== Adress-Picker (Inline-Component für Adress-Auswahl-Felder) ===== */ .adress-picker { display: flex; align-items: stretch; gap: 4px; min-height: 32px; } .adress-picker__display { flex: 1 1 auto; min-width: 0; padding: 4px 8px; border: 1px solid var(--c-border); border-radius: 4px; background: var(--c-surface); font-size: 14px; cursor: default; } .adress-picker__display:read-only { background: var(--c-surface); } .adress-picker__btn { padding: 0 10px; border: 1px solid var(--c-border); border-radius: 4px; background: var(--c-surface); cursor: pointer; font-size: 13px; line-height: 1; } .adress-picker__btn:hover { background: var(--c-primary-soft); border-color: var(--c-primary); } .adress-picker__btn--clear:hover { background: #ffe5e0; border-color: var(--c-danger); } /* ===== Sachbearbeiter-Suche-Popup (MaaraSachbearbeiterSuche) ===== */ .sachbearbeiter-suche-popup { display: flex; flex-direction: column; gap: .5rem; } .sachbearbeiter-suche__results { background: var(--c-surface); } .sachbearbeiter-suche__footer { display: flex; gap: .5rem; align-items: center; padding-top: .5rem; border-top: 1px solid var(--c-border); } /* ===== Adress-Suche-Popup (MaaraAdressSuche) ===== */ .adress-suche-popup { display: flex; flex-direction: column; gap: .75rem; } .adress-suche__filter { background: var(--c-bg); padding: .75rem; border-radius: 6px; } .adress-suche__filter-actions { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; } .adress-suche__inaktiv-toggle .dx-field-item-label-text { font-size: 0; } .adress-suche__results { background: var(--c-surface); } .adress-suche__footer { display: flex; gap: .5rem; justify-content: flex-end; padding-top: .5rem; border-top: 1px solid var(--c-border); } /* ── MaaraNachfassen: Kartenliste + Inline-Editor (Notizen-Look) ─────────── */ .mnf { display: flex; flex-direction: column; gap: .5rem; } .mnf__bar { display: flex; gap: .5rem; } .mnf__layout { display: flex; gap: 1rem; align-items: stretch; height: 560px; } .mnf__liste { list-style: none; margin: 0; padding: 0; flex: 0 0 280px; min-width: 220px; overflow: auto; border: 1px solid var(--c-border); border-radius: 8px; background: var(--c-surface); } .mnf__karte { padding: .55rem .75rem; cursor: pointer; border-bottom: 1px solid var(--c-border); } .mnf__karte:last-child { border-bottom: none; } .mnf__karte:hover { background: var(--c-primary-soft); } .mnf__leer { padding: .55rem .75rem; } .mnf__karte-titel { display: block; font-weight: 600; } .mnf__karte-sub { display: block; font-size: .72rem; opacity: .75; } /* Zustände: überfällig rot, heute orange, erledigt grün — Balken links + Tint. */ .mnf__karte.is-ueberfaellig { box-shadow: inset 3px 0 0 #dc3545; } .mnf__karte.is-ueberfaellig:not(.is-active) { background: rgba(220, 53, 69, .10); } .mnf__karte.is-ueberfaellig:not(.is-active) .mnf__karte-titel, .mnf__karte.is-ueberfaellig:not(.is-active) .mnf__karte-sub { color: #c0392b; opacity: 1; } .mnf__karte.is-heute { box-shadow: inset 3px 0 0 #f39c12; } .mnf__karte.is-heute:not(.is-active) { background: rgba(243, 156, 18, .12); } .mnf__karte.is-heute:not(.is-active) .mnf__karte-titel, .mnf__karte.is-heute:not(.is-active) .mnf__karte-sub { color: #9c6a06; opacity: 1; } .mnf__karte.is-erledigt { box-shadow: inset 3px 0 0 #28a745; } .mnf__karte.is-erledigt:not(.is-active) { background: rgba(40, 167, 69, .08); } .mnf__karte.is-erledigt:not(.is-active) .mnf__karte-titel { color: #1e7e34; } .mnf__karte.is-active { background: var(--c-primary); } .mnf__karte.is-active .mnf__karte-titel, .mnf__karte.is-active .mnf__karte-sub { color: #fff; opacity: .95; } html[data-theme="dark"] .mnf__karte.is-ueberfaellig:not(.is-active) .mnf__karte-titel, html[data-theme="dark"] .mnf__karte.is-ueberfaellig:not(.is-active) .mnf__karte-sub { color: #ff8a94; } html[data-theme="dark"] .mnf__karte.is-heute:not(.is-active) .mnf__karte-titel, html[data-theme="dark"] .mnf__karte.is-heute:not(.is-active) .mnf__karte-sub { color: #ffc36b; } html[data-theme="dark"] .mnf__karte.is-erledigt:not(.is-active) .mnf__karte-titel { color: #6fd388; } /* Detail rechts */ .mnf__detail { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; border: 1px solid var(--c-border); border-radius: 8px; background: var(--c-surface); padding: .75rem 1rem; } .mnf__form { display: flex; flex-direction: column; gap: .6rem; flex: 1 1 auto; min-height: 0; } .mnf__felder { display: flex; flex-wrap: wrap; gap: .5rem .75rem; align-items: flex-end; } .mnf__f--datum { width: 140px; } .mnf__f--erledigt { padding-bottom: .4rem; } .mnf__f--kontaktart { width: 150px; } .mnf__f--mitarbeiter { width: 190px; } .mnf__f--kontaktperson { width: 190px; } .mnf__editor { flex: 1 1 auto; min-height: 0; } .mnf__editor .dx-htmleditor { height: 100%; } /* Ganze Editorfläche klickbar (Quill-Content füllt die Höhe). */ .mnf__editor .dx-htmleditor-content { min-height: 100%; box-sizing: border-box; } .mnf__foot { display: flex; align-items: center; gap: .5rem; } .mnf__status { font-size: .78rem; } .mnf__foot-btns { margin-left: auto; display: flex; gap: .25rem; } .mnf__empty { color: var(--c-muted); padding: 2rem 0; text-align: center; flex: 1; } @media (max-width: 900px) { .mnf__layout { flex-direction: column; height: auto; } .mnf__liste { flex: 0 0 auto; max-height: 300px; } .mnf__editor .dx-htmleditor { height: 380px; } } /* ── ⚙️ Einstellungen- und 👤 Benutzer-Menü im Header ─────────────────────── */ .nav-dropdown--right .nav-dropdown-menu { left: auto; right: 0; } .settings-toggle { display: inline-flex; align-items: center; padding: .35rem .15rem; color: var(--c-text); } .settings-toggle svg { display: block; opacity: .8; } .settings-toggle:hover svg { opacity: 1; } .theme-switch__icon { display: inline-flex; align-items: center; } /* Nur per Klick öffnen — Hover würde das native