`
Der Zeilen-`@onclick` bleibt als Maus-Komfort; :focus-within hebt die ganze Zeile hervor, sonst
sähe man beim Tabben nicht, in welcher Zeile der Fokus steht. */
.ds-table tbody tr.is-clickable:focus-within { background: var(--color-surface-hover); }
.ds-table tbody tr.is-clickable:focus-within td:first-child { box-shadow: inset 2px 0 0 var(--color-primary); }
.ds-table tbody tr:last-child td { border-bottom: 0; }
.ds-table .num { font-family: var(--font-mono); font-size: 12px; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
/* Die beiden Zellen-Trigger einer .is-clickable-Zeile (siehe Kommentar oben). Beide übernehmen die
Typografie ihrer Zelle, sind also optisch unverändert Zellinhalt — aber fokussierbar. */
.ds-row-link { color: inherit; text-decoration: none; }
.ds-row-link:focus-visible { outline: 2px solid var(--color-primary-ring); outline-offset: 2px; border-radius: 3px; }
.ds-row-trigger {
display: inline-flex;
align-items: center;
gap: 6px;
background: none;
border: 0;
padding: 0;
margin: 0;
font: inherit;
color: inherit;
text-align: inherit;
cursor: pointer;
}
.ds-row-trigger:focus-visible { outline: 2px solid var(--color-primary-ring); outline-offset: 2px; border-radius: 3px; }
/* Mehrzeiliger Zellinhalt (z. B. Name über Anschrift): die Kinder füllen die Zelle wie vorher die
``s, damit `text-overflow: ellipsis` weiter greift. */
.ds-row-trigger.is-stacked { display: flex; flex-direction: column; align-items: stretch; gap: 0; width: 100%; min-width: 0; }
.ds-table-filter-row th { padding: 6px 16px; background: var(--color-bg-subtle); border-bottom: 1px solid var(--color-border); }
.ds-table-filter-input {
width: 100%; box-sizing: border-box;
height: 28px; padding: 0 8px;
font-size: 12px; font-family: inherit;
border: 1px solid var(--color-border); border-radius: 6px;
background: var(--color-surface); color: var(--color-text-primary);
outline: none; transition: border-color 0.15s;
}
.ds-table-filter-input::placeholder { color: var(--color-text-muted); }
.ds-table-filter-input:focus { border-color: var(--color-primary); }
.ds-table-filter-select {
width: 100%; box-sizing: border-box;
height: 28px; padding: 0 24px 0 8px;
font-size: 12px; font-family: inherit;
border: 1px solid var(--color-border); border-radius: 6px;
background: var(--color-surface); color: var(--color-text-primary);
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 8px center;
outline: none; cursor: pointer; transition: border-color 0.15s;
}
.ds-table-filter-select:focus { border-color: var(--color-primary); }
/* Kebab-Menü pro Tabellenzeile (.row-actions / .dropdown-menu / .dropdown-item). Verhalten
(Schließen bei Außen-/Eintrag-Klick) liefert das globale wwwroot/js/dropdown.js für
`details.dropdown`. Global statt seitengebunden, weil mehrere Seiten dasselbe Muster
nutzen (UserManagement, GroupManagement, PlatformAccounts, …). */
.row-actions {
position: relative;
display: inline-block;
}
.row-actions-trigger {
list-style: none;
display: inline-grid;
place-items: center;
width: 30px;
height: 30px;
border-radius: 6px;
color: var(--color-text-muted);
cursor: pointer;
transition: background 0.1s, color 0.1s;
}
.row-actions-trigger::-webkit-details-marker { display: none; }
.row-actions-trigger:hover {
background: var(--color-surface-hover);
color: var(--color-text-primary);
}
.row-actions[open] > .dropdown-menu { display: block; }
.row-actions:not([open]) > .dropdown-menu { display: none; }
.dropdown-menu {
position: absolute;
top: calc(100% + 4px);
right: 0;
min-width: 220px;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: 10px;
box-shadow: var(--shadow-lg);
padding: 6px;
z-index: 50;
text-align: left;
animation: row-dd-in 0.12s ease-out;
}
@keyframes row-dd-in {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
.dropdown-menu form { margin: 0; }
.dropdown-item {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 8px 10px;
border: 0;
background: transparent;
border-radius: 6px;
font-family: inherit;
font-size: 13px;
color: var(--color-text-primary);
text-align: left;
cursor: pointer;
user-select: none;
}
.dropdown-item:hover:not(:disabled) { background: var(--color-surface-hover); }
.dropdown-item:disabled { opacity: 0.5; cursor: not-allowed; }
.dropdown-item-danger { color: var(--color-danger); }
.dropdown-separator {
height: 1px;
background: var(--color-border);
margin: 6px 4px;
}
/* Inline-Variante derselben Aktionsspalte (1–2 harmlose Aktionen, siehe RowActions.razor). */
.row-actions-inline {
display: inline-flex;
align-items: center;
gap: 6px;
justify-content: flex-end;
}
/* Layout-Stile (.app-shell, .app-sidebar, .app-topbar, .app-content,
.sidebar-brand) leben in MainLayout/Sidebar/Topbar.razor.css. */
.page {
max-width: 1400px;
margin: 0 auto;
padding: 28px 32px 32px;
}
/* Volle Breite für Seiten, die den Platz brauchen (z. B. Aussendungs-Detail mit
Liste + PDF-Vorschau). Padding der .page bleibt erhalten. */
.page-wide {
max-width: none;
}
/* Nur für Seiten mit der fixen Wizard-Leiste am unteren Rand (MailingWizardNav): schafft
den Freiraum, damit kein Inhalt hinter der Leiste verschwindet. Stand früher global auf
.page — die 80px kosteten jede andere Seite Höhe, obwohl nur diese eine Seite die
Leiste hat. */
.page-wizard {
padding-bottom: calc(var(--wizard-nav-h) + 24px);
}
/* Seite füllt die (definite) Höhe von .app-content, statt nur so hoch zu werden wie ihr
Inhalt. Voraussetzung für Seiten, deren Panels intern scrollen sollen: .app-shell ist
ein 100vh-Grid, damit ist die Höhenkette bis hierher durchgehend definit. Die Seite
gibt die Resthöhe unter dem Seitenkopf per flex an ihr Hauptelement weiter — das
braucht dort dann flex:1 und min-height:0. Vorbild: .letter-detail-page. */
.page-fill {
height: 100%;
display: flex;
flex-direction: column;
min-height: 0;
}
.page-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 24px;
}
.page-title {
font-size: 22px;
font-weight: 600;
letter-spacing: -0.02em;
color: var(--color-text-primary);
margin: 0;
}
/* FocusOnNavigate (Routes.razor) setzt nach jeder Navigation den Fokus programmatisch
auf die h1, damit Tastatur-/Screenreader-Nutzer am Hauptinhalt landen. Der Browser-
Fokusrahmen stört dabei optisch; bei echter Tastaturnavigation (:focus-visible) bleibt
er erhalten. */
.page-title:focus:not(:focus-visible) { outline: none; }
.page-subtitle {
font-size: 13.5px;
color: var(--color-text-muted);
margin: 4px 0 0;
}
/* Dashboard KPI cards (farbig, mit Icon-Chip) */
.kpi-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 14px;
}
.kpi-card {
display: flex;
align-items: center;
gap: 14px;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-left: 3px solid var(--color-border);
border-radius: var(--radius-card);
padding: 16px 18px;
box-shadow: var(--shadow-xs);
}
.kpi-card--info { border-left-color: var(--color-info); }
.kpi-card--primary { border-left-color: var(--color-primary); }
.kpi-card--success { border-left-color: var(--color-success); }
.kpi-card--warning { border-left-color: var(--color-warning); }
.kpi-card--danger { border-left-color: var(--color-danger); }
.kpi-icon {
flex: 0 0 auto;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background: var(--color-neutral-bg);
color: var(--color-neutral-text);
}
.kpi-card--info .kpi-icon { background: var(--color-info-bg); color: var(--color-info-text); }
.kpi-card--primary .kpi-icon { background: var(--color-primary-soft); color: var(--color-primary); }
.kpi-card--success .kpi-icon { background: var(--color-success-bg); color: var(--color-success-text); }
.kpi-card--warning .kpi-icon { background: var(--color-warning-bg); color: var(--color-warning-text); }
.kpi-card--danger .kpi-icon { background: var(--color-danger-bg); color: var(--color-danger-text); }
.kpi-body { min-width: 0; }
.kpi-label {
font-size: 12px;
font-weight: 500;
color: var(--color-text-muted);
}
.kpi-value {
font-size: 28px;
font-weight: 600;
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--color-text-primary);
font-variant-numeric: tabular-nums;
}
.kpi-hint {
font-size: 11.5px;
color: var(--color-text-faint);
}
@media (max-width: 900px) {
.kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Unter ~560 px stehen zwei Kacheln so eng, dass Label und Zahl umbrechen — dann lieber
einspaltig. */
@media (max-width: 560px) {
.kpi-grid { grid-template-columns: minmax(0, 1fr); }
}
/* Topbar (.topbar-tenant, .tenant-*, .avatar, .dropdown*, .breadcrumb)
leben in Topbar.razor.css. */
/* Progress bar */
.progress {
position: relative;
height: 8px;
background: var(--color-bg-subtle);
border-radius: var(--radius-pill);
overflow: hidden;
}
.progress-fill {
height: 100%;
background: var(--color-primary);
border-radius: var(--radius-pill);
transition: width 0.4s ease-out;
}
.progress-fill.indeterminate {
width: 35% !important;
animation: progress-indet 1.4s ease-in-out infinite;
}
@keyframes progress-indet {
0% { transform: translateX(-100%); }
100% { transform: translateX(350%); }
}
/* Spinner */
.spinner {
width: 14px; height: 14px;
border: 2px solid currentColor;
border-right-color: transparent;
border-radius: 50%;
animation: spin 0.7s linear infinite;
display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* Search box */
.search-box {
position: relative;
flex: 1;
max-width: 320px;
}
.search-box input {
width: 100%;
height: 34px;
padding: 0 12px 0 34px;
border: 1px solid var(--color-border);
border-radius: 8px;
background: var(--color-surface);
color: var(--color-text-primary);
font-size: 13px;
outline: none;
transition: border-color 0.12s, box-shadow 0.12s;
}
.search-box input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-ring); }
.search-box svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--color-text-muted); }
/* Focus styling */
input:focus-visible, select:focus-visible, textarea:focus-visible,
button:focus-visible {
outline-offset: 2px;
}
/* Nur für Screenreader: Text, der optisch nicht erscheinen darf, aber im Accessible Name bzw.
im Vorlesefluss gebraucht wird (z. B. die Live-Region des Zeitraum-Umschalters im Dashboard).
Bewusst NICHT `display:none`/`visibility:hidden` — beides nimmt den Text auch aus dem
Accessibility-Tree. */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* Skeleton-Loading: schimmernde Platzhalter, bis die Daten geladen sind. Liegt global (nicht
scoped), weil es zwei Seiten nutzen — Aussendungs-Detail und Dashboard; dieselbe Begründung,
aus der die .kpi-*-Kacheln hier stehen. */
.skeleton-block {
position: relative;
overflow: hidden;
background: var(--color-bg-subtle);
border-radius: var(--radius-input);
}
.skeleton-block::after {
content: "";
position: absolute;
inset: 0;
transform: translateX(-100%);
background: linear-gradient(
90deg,
transparent,
var(--color-surface-hover) 50%,
transparent
);
animation: skeleton-shimmer 1.4s ease-in-out infinite;
}
@keyframes skeleton-shimmer {
100% { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
.skeleton-block::after { animation: none; }
}
/* ============================================================
Konzept-update — additional shell components
============================================================ */
/* Tenant-Pill und Breadcrumb leben in Topbar.razor.css. */
/* ============================================================
Prozess-Stepper (Aussendungs-Detail): Konfigurieren → … → Versendet
============================================================ */
.mailing-stepper {
display: flex;
align-items: flex-start;
gap: 0;
padding: 16px 4px;
margin-bottom: 18px;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-card, 12px);
}
.mailing-step {
flex: 1 1 0;
min-width: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
position: relative;
text-align: center;
}
/* Verbindungslinie zwischen den Schritten (hinter den Kreisen). */
.mailing-step:not(:first-child)::before {
content: "";
position: absolute;
top: 15px; /* vertikale Mitte des Kreises (32px / 2 - 1px) */
right: 50%;
left: -50%;
height: 2px;
background: var(--color-border);
z-index: 0;
}
.mailing-step.is-done::before,
.mailing-step.is-active::before {
background: color-mix(in srgb, var(--color-success) 55%, var(--color-border));
}
.mailing-step-circle {
position: relative;
z-index: 1;
width: 32px; height: 32px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 13px;
font-weight: 600;
background: var(--color-bg-subtle);
border: 2px solid var(--color-border);
color: var(--color-text-muted);
font-variant-numeric: tabular-nums;
}
.mailing-step-label {
font-size: 12px;
color: var(--color-text-muted);
line-height: 1.25;
padding: 0 4px;
}
/* bewusst weiß: Kreis-Text/Spinner liegen auf einer Solid-Statusfarbe, themenunabhängig. */
/* Erledigt (success). */
.mailing-step.is-done .mailing-step-circle {
background: var(--color-success);
border-color: var(--color-success);
color: #fff;
}
.mailing-step.is-done .mailing-step-label {
color: var(--color-text-secondary);
}
/* Aktiv (info, fett). */
.mailing-step.is-active .mailing-step-circle {
background: var(--color-info);
border-color: var(--color-info);
color: #fff;
box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-info) 18%, transparent);
}
.mailing-step.is-active .mailing-step-label {
color: var(--color-text-primary);
font-weight: 600;
}
/* Laufender, transienter Schritt — Lade-Spinner statt Nummer/Häkchen. */
.mailing-step-spinner {
width: 14px; height: 14px;
border-radius: 50%;
border: 2px solid color-mix(in srgb, #fff 45%, transparent);
border-top-color: #fff;
animation: mailing-step-spin 0.8s linear infinite;
}
@keyframes mailing-step-spin { to { transform: rotate(360deg); } }
@media (max-width: 640px) {
.mailing-step-label { font-size: 10.5px; }
}
/* Dezenter dashed-Hinweis im Entwurf: noch keine Schreiben. */
.mailing-no-letters-hint {
display: flex;
align-items: center;
gap: 10px;
margin-top: 18px;
padding: 16px 18px;
border: 1px dashed var(--color-border);
border-radius: var(--radius-card, 12px);
background: transparent;
font-size: 12.5px;
color: var(--color-text-muted);
}
/* Ablehnungs-Hinweis des Freigebers — gelbe Karte über der Konfiguration im Entwurf. */
.mailing-rejection-note {
display: flex;
align-items: flex-start;
gap: 12px;
margin-bottom: 16px;
padding: 14px 18px;
border: 1px solid var(--color-warning-text);
border-left-width: 4px;
border-radius: var(--radius-card, 12px);
background: var(--color-warning-bg);
color: var(--color-warning-text);
}
.mailing-rejection-note strong {
display: block;
font-size: 13.5px;
margin-bottom: 2px;
}
.mailing-rejection-note p {
margin: 0;
font-size: 13px;
line-height: 1.45;
white-space: pre-wrap;
}
.mailing-rejection-note-label {
font-weight: 600;
white-space: nowrap;
}
/* Kompakte Konfig-Zusammenfassung (Status „AwaitingReview"): Versandziel · Trennung · … */
.mailing-config-summary {
display: flex;
align-items: center;
gap: 10px 18px;
flex-wrap: wrap;
}
.mailing-config-summary-item {
display: inline-flex;
align-items: baseline;
gap: 6px;
font-size: 12.5px;
}
.mailing-config-summary-item .label {
color: var(--color-text-muted);
}
.mailing-config-summary-item .value {
color: var(--color-text-primary);
font-weight: 500;
}
/* Aufklappbare Konfiguration (Status „AwaitingReview"+): native Disclosure-Marker ausblenden,
eigener Chevron im Summary-Markup. */
.mailing-config-collapse > summary { list-style: none; }
.mailing-config-collapse > summary::-webkit-details-marker { display: none; }
/* ============================================================
Native -Modals — Backdrop, Surface, Header, Footer
============================================================ */
dialog.ds-dialog {
border: 1px solid var(--color-border);
border-radius: var(--radius-card);
background: var(--color-surface);
color: var(--color-text-primary);
padding: 0;
box-shadow: var(--shadow-lg);
max-width: min(92vw, 1100px);
max-height: 88vh;
overflow: hidden;
}
/* WICHTIG: Browser-Default ist `display: none` für geschlossene .
Flex-Layout nur im offenen Zustand, sonst zeigen sie sich inline. */
dialog.ds-dialog[open] {
display: flex;
flex-direction: column;
}
dialog.ds-dialog::backdrop {
background: rgba(15, 23, 42, 0.45);
backdrop-filter: blur(2px);
}
html[data-theme="dark"] dialog.ds-dialog::backdrop {
background: rgba(0, 0, 0, 0.6);
}
.ds-dialog-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px 20px;
border-bottom: 1px solid var(--color-border);
}
.ds-dialog-header h2 {
margin: 0;
font-size: 14px;
font-weight: 600;
color: var(--color-text-primary);
letter-spacing: -0.005em;
}
.ds-dialog-body {
padding: 20px;
overflow: auto;
flex: 1 1 auto;
}
.ds-dialog-footer {
display: flex;
justify-content: flex-end;
gap: 8px;
padding: 12px 20px;
border-top: 1px solid var(--color-border);
background: var(--color-bg-subtle);
}
.ds-dialog-close {
background: transparent;
border: 0;
cursor: pointer;
color: var(--color-text-muted);
padding: 4px;
border-radius: var(--radius-input);
line-height: 0;
}
.ds-dialog-close:hover { background: var(--color-surface-hover); color: var(--color-text-primary); }
/* ============================================================
Sidebar — Collapsed-Variante
Selectoren liegen hier (statt im isolierten Sidebar.razor.css),
weil die [data-sidebar-collapsed]-Marke am .app-shell hängt. Der Sidebar-Kopf gehört bewusst
NICHT dazu: er stylt sich über .sidebar-brand-collapsed selbst (Sidebar.razor.css).
============================================================ */
.app-shell[data-sidebar-collapsed="true"] .ds-nav-section {
display: none;
}
.app-shell[data-sidebar-collapsed="true"] .ds-nav-item .ds-nav-label {
display: none;
}
.app-shell[data-sidebar-collapsed="true"] .ds-nav-item {
justify-content: center;
}
.app-shell[data-sidebar-collapsed="true"] .sidebar-footer {
display: none;
}
/* Septeo-Hinweis bleibt im eingeklappten Zustand sichtbar, aber nur als Signet ohne Text. */
.app-shell[data-sidebar-collapsed="true"] .sidebar-septeo {
justify-content: center;
padding: 10px 0;
}
.app-shell[data-sidebar-collapsed="true"] .sidebar-septeo-text {
display: none;
}
.sidebar-toggle {
margin-left: auto;
background: transparent;
border: 0;
color: var(--color-text-muted);
padding: 4px;
border-radius: var(--radius-input);
cursor: pointer;
line-height: 0;
display: grid;
place-items: center;
}
.sidebar-toggle:hover {
background: var(--color-surface-hover);
color: var(--color-text-primary);
}
.sidebar-toggle-icon {
transition: transform 0.16s ease-out;
}
/* ============================================================
Toaster (bottom-right)
============================================================ */
.ds-toaster {
position: fixed;
right: 20px;
bottom: 20px;
display: flex;
flex-direction: column;
gap: 8px;
z-index: 1100;
pointer-events: none;
}
.ds-toast {
display: flex;
align-items: flex-start;
gap: 10px;
min-width: 280px;
max-width: 420px;
padding: 10px 12px;
border: 1px solid var(--color-border);
border-radius: var(--radius-input);
background: var(--color-surface);
box-shadow: var(--shadow-lg);
font-size: 13px;
color: var(--color-text-primary);
pointer-events: auto;
animation: toast-in 0.16s ease-out;
}
@keyframes toast-in {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.ds-toast-msg { flex: 1; line-height: 1.4; }
.ds-toast-close {
background: transparent;
border: 0;
color: var(--color-text-muted);
cursor: pointer;
padding: 2px;
line-height: 0;
border-radius: 4px;
}
.ds-toast-close:hover { background: var(--color-surface-hover); color: var(--color-text-primary); }
.ds-toast-success { border-left: 3px solid var(--color-success); }
.ds-toast-success > svg:first-of-type { color: var(--color-success); }
.ds-toast-warning { border-left: 3px solid var(--color-warning); }
.ds-toast-warning > svg:first-of-type { color: var(--color-warning); }
.ds-toast-danger { border-left: 3px solid var(--color-danger); }
.ds-toast-danger > svg:first-of-type { color: var(--color-danger); }
.ds-toast-info { border-left: 3px solid var(--color-info); }
.ds-toast-info > svg:first-of-type { color: var(--color-info); }
/* ============================================================
Drawer (right side panel — inspection surface)
============================================================ */
.ds-drawer-shell {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 900;
}
.ds-drawer-scrim {
position: absolute;
inset: 0;
background: rgba(15, 23, 42, 0.32);
opacity: 0;
transition: opacity 0.16s ease-out;
}
html[data-theme="dark"] .ds-drawer-scrim {
background: rgba(0, 0, 0, 0.55);
}
.ds-drawer {
position: absolute;
top: 0;
right: 0;
height: 100%;
width: min(420px, 90vw);
background: var(--color-surface);
border-left: 1px solid var(--color-border);
box-shadow: var(--shadow-lg);
transform: translateX(100%);
transition: transform 0.18s ease-out;
display: flex;
flex-direction: column;
pointer-events: auto;
}
.ds-drawer-shell.ds-drawer-open { pointer-events: auto; }
.ds-drawer-shell.ds-drawer-open .ds-drawer-scrim { opacity: 1; }
.ds-drawer-shell.ds-drawer-open .ds-drawer { transform: translateX(0); }
.ds-drawer-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px 20px;
border-bottom: 1px solid var(--color-border);
background: var(--color-bg-subtle);
}
.ds-drawer-header h2 { margin: 0; font-size: 14px; font-weight: 600; color: var(--color-text-primary); }
.ds-drawer-close {
background: transparent;
border: 0;
color: var(--color-text-muted);
cursor: pointer;
padding: 4px;
line-height: 0;
border-radius: var(--radius-input);
}
.ds-drawer-close:hover { background: var(--color-surface-hover); color: var(--color-text-primary); }
.ds-drawer-body { padding: 16px 20px; overflow: auto; flex: 1 1 auto; }
/* ============================================================
Hinweis-Leiste (Banners above content)
============================================================ */
.ds-banner-stack {
display: flex;
flex-direction: column;
gap: 6px;
padding: 12px 24px 0;
}
.ds-banner {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
border: 1px solid var(--color-border);
border-radius: var(--radius-input);
font-size: 12.5px;
color: var(--color-text-primary);
background: var(--color-surface);
}
.ds-banner-msg { flex: 1; line-height: 1.4; }
.ds-banner-action {
font-size: 12px;
font-weight: 500;
color: var(--color-primary);
text-decoration: none;
padding: 4px 10px;
border: 1px solid var(--color-border);
border-radius: var(--radius-btn);
background: var(--color-surface);
}
.ds-banner-action:hover { background: var(--color-surface-hover); }
.ds-banner-close {
background: transparent;
border: 0;
color: var(--color-text-muted);
cursor: pointer;
padding: 2px;
line-height: 0;
border-radius: 4px;
}
.ds-banner-close:hover { background: var(--color-surface-hover); color: var(--color-text-primary); }
.ds-banner-info { border-left: 3px solid var(--color-info); }
.ds-banner-info > svg:first-of-type { color: var(--color-info); }
.ds-banner-success { border-left: 3px solid var(--color-success); }
.ds-banner-success > svg:first-of-type { color: var(--color-success); }
.ds-banner-warning { border-left: 3px solid var(--color-warning); }
.ds-banner-warning > svg:first-of-type { color: var(--color-warning); }
.ds-banner-danger { border-left: 3px solid var(--color-danger); }
.ds-banner-danger > svg:first-of-type { color: var(--color-danger); }
/* ============================================================
Meta-Label (kleine Caps-Label über Wert-Feldern in Cards)
============================================================ */
.ds-meta-label {
font-size: 11px;
font-weight: 500;
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* ============================================================
RichTextEditor (Mail-Body WYSIWYG, contenteditable)
Eigenes, themenfähiges Styling (nur CSS-Variablen) — die
Dropdown-Klassen aus dem Topbar sind component-scoped und
greifen hier nicht, daher unter .rte nachgebildet.
============================================================ */
.rte {
border: 1px solid var(--color-border);
border-radius: var(--radius-input);
background: var(--color-surface);
overflow: visible;
}
.rte-toolbar {
display: flex;
align-items: center;
gap: 4px;
flex-wrap: wrap;
padding: 6px 8px;
border-bottom: 1px solid var(--color-border);
background: var(--color-bg-subtle);
border-top-left-radius: var(--radius-input);
border-top-right-radius: var(--radius-input);
}
.rte-tool {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
min-width: 30px;
height: 30px;
padding: 0 8px;
border: 1px solid transparent;
border-radius: 6px;
background: transparent;
color: var(--color-text-secondary);
cursor: pointer;
font: inherit;
font-size: 12.5px;
list-style: none;
}
.rte-tool:hover {
background: var(--color-surface-hover);
color: var(--color-text-primary);
}
.rte-tool::-webkit-details-marker { display: none; }
.rte-tool-text { white-space: nowrap; }
.rte-sep {
width: 1px;
align-self: stretch;
margin: 4px 2px;
background: var(--color-border);
}
.rte-placeholder { position: relative; }
.rte-placeholder > .dropdown-menu {
position: absolute;
top: calc(100% + 6px);
left: 0;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: 10px;
box-shadow: var(--shadow-lg);
padding: 6px;
z-index: 50;
}
.rte-placeholder:not([open]) > .dropdown-menu { display: none; }
.rte-placeholder > .dropdown-menu .dropdown-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
width: 100%;
padding: 8px 10px;
border: 0;
border-radius: 6px;
background: transparent;
font: inherit;
font-size: 13px;
text-align: left;
color: var(--color-text-primary);
cursor: pointer;
}
.rte-placeholder > .dropdown-menu .dropdown-item:hover {
background: var(--color-surface-hover);
}
.rte-token {
font-size: 11px;
color: var(--color-text-muted);
}
.rte-free {
border-top: 1px solid var(--color-border);
margin-top: 4px;
padding: 8px 10px 4px;
}
.rte-hint {
font-size: 11px;
color: var(--color-text-muted);
margin-top: 6px;
}
.rte-linkbar {
display: flex;
align-items: center;
gap: 6px;
padding: 8px;
border-bottom: 1px solid var(--color-border);
background: var(--color-bg-subtle);
}
.rte-surface {
min-height: 220px;
max-height: 480px;
overflow-y: auto;
padding: 14px 16px;
font-size: 14px;
line-height: 1.6;
color: var(--color-text-primary);
outline: none;
}
.rte-surface.is-readonly {
background: var(--color-bg-subtle);
color: var(--color-text-secondary);
cursor: default;
}
.rte-surface:empty::before {
content: "Mailtext hier eingeben …";
color: var(--color-text-faint);
}
.rte-surface a { color: var(--color-primary); }
.rte-surface ul { padding-left: 22px; margin: 8px 0; }
.rte-surface p { margin: 0 0 10px; }
/* Absender im Mailinhalt — read-only (zentral pro Mail-Domain gepflegt) */
.mail-from-readonly {
padding: 10px 14px;
background: var(--color-bg-subtle);
border: 1px solid var(--color-border);
border-radius: var(--radius-input);
font-size: 13px;
color: var(--color-text-secondary);
}
.ds-field-hint {
margin-top: 6px;
font-size: 11.5px;
color: var(--color-text-muted);
}
/* Betreff-Zeile mit „Platzhalter einfügen"-Dropdown rechts neben dem Label */
.mailinhalt-label-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 4px;
}
.mailinhalt-label-row .ds-label { margin-bottom: 0; }
/* ------------------------------------------------------------
Log-Viewer-Zeilen (.live-log-*) — geteilt zwischen dem Live-Worker-Log-Panel
(MailingWorkerLogPanel) und dem Fortschritts-Dialog (MailingProgressDialog). Beide
Komponenten rendern dieselbe terminal-artige Zeilenoptik; weil zwei Komponenten betroffen
sind, liegen die Zeilen-Klassen global statt scoped. Die jeweilige Hülle (Card/Dialog-Body)
bleibt komponenten-lokal.
------------------------------------------------------------ */
.live-log-empty {
padding: 18px;
font-size: 12px;
color: var(--color-text-muted);
font-style: italic;
font-family: inherit;
}
.live-log-row {
display: grid;
grid-template-columns: 80px 36px auto 1fr;
column-gap: 8px;
padding: 4px 12px;
border-bottom: 1px solid var(--color-border);
align-items: baseline;
}
.live-log-row:last-child { border-bottom: 0; }
.live-log-time {
color: var(--color-text-faint);
font-size: 10.5px;
}
.live-log-level {
font-weight: 600;
font-size: 10px;
letter-spacing: 0.05em;
padding: 1px 4px;
border-radius: 3px;
text-align: center;
}
.live-log-step {
color: var(--color-text-muted);
font-size: 10.5px;
}
.live-log-msg {
color: var(--color-text-primary);
word-break: break-word;
white-space: pre-wrap;
}
.live-log-ex {
grid-column: 1 / -1;
margin: 4px 0 0;
color: var(--color-danger, #dc2626);
font-size: 10.5px;
white-space: pre-wrap;
word-break: break-all;
max-height: 180px;
overflow: auto;
padding: 6px 8px;
background: var(--color-danger-soft);
border-radius: var(--radius-input);
}
.live-log-row.is-error .live-log-level { background: var(--color-danger-bg); color: var(--color-danger); }
.live-log-row.is-warning .live-log-level { background: var(--color-warning-bg); color: var(--color-warning-text); }
.live-log-row.is-debug .live-log-level { background: rgba(120, 120, 120, 0.15); color: var(--color-text-muted); }
.live-log-row.is-info .live-log-level { background: var(--color-primary-soft); color: var(--color-primary); }
/* Klickbare Step-/Letter-Chips als Filter-Trigger im Log-Row */
.live-log-step-btn,
.live-log-lid-btn {
border: 1px solid var(--color-border);
background: var(--color-bg-subtle);
color: var(--color-text-muted);
font-size: 10.5px;
padding: 1px 6px;
border-radius: 3px;
cursor: pointer;
line-height: 1.3;
}
.live-log-step-btn:hover,
.live-log-lid-btn:hover {
background: var(--color-primary-soft);
color: var(--color-primary);
border-color: var(--color-primary);
}
.live-log-lid-btn {
justify-self: end;
}
/* ------------------------------------------------------------
Versandkosten-Auflistung (.preview-cost-*) — geteilt zwischen dem Freigabe-Dialog
(ApproveDialog) und den Abschluss-Karten (MailingCompletionCards). Zwei Komponenten
nutzen dieselbe Zeilenoptik, daher global statt scoped.
------------------------------------------------------------ */
.preview-cost {
flex: 0 0 auto;
border-top: 1px solid var(--color-border);
padding: 10px 14px;
background: var(--color-bg-subtle);
font-size: 11.5px;
max-height: 40%;
overflow-y: auto;
}
.preview-cost-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px;
margin-bottom: 6px;
}
.preview-cost-title {
font-weight: 600;
color: var(--color-text-primary);
}
.preview-cost-stand {
color: var(--color-text-muted);
font-size: 10.5px;
}
.preview-cost-row {
display: flex;
align-items: center;
gap: 8px;
padding: 2px 0;
color: var(--color-text-secondary);
}
.preview-cost-label {
flex: 1;
min-width: 0;
display: inline-flex;
align-items: center;
gap: 6px;
}
.preview-cost-label .ds-badge {
font-size: 9.5px;
}
.preview-cost-muted { color: var(--color-text-muted); }
.preview-cost-count {
font-variant-numeric: tabular-nums;
text-align: right;
min-width: 48px;
}
.preview-cost-sum {
font-variant-numeric: tabular-nums;
text-align: right;
min-width: 72px;
}
.preview-cost-total {
margin-top: 4px;
padding-top: 6px;
border-top: 1px solid var(--color-border);
font-weight: 600;
color: var(--color-text-primary);
}
.preview-cost-note {
display: flex;
align-items: flex-start;
gap: 6px;
margin-top: 6px;
color: var(--color-warning, var(--color-text-secondary));
font-size: 10.5px;
}
.preview-cost-gross {
font-weight: 600;
color: var(--color-text-primary);
}
/* ─── PdfViewer (pdf.js-Wrapper, Components/Shared/PdfViewer.razor) ─── */
/* Bewusst ohne Rahmen/Radius: der Viewer ist neutral und füllt seinen Container —
Card-Chrome macht, wer ihn einbettet (z. B. .elc-pdf-wrap). */
.os-pdfviewer {
display: flex;
flex-direction: column;
min-height: 0;
background: var(--color-bg-subtle);
overflow: hidden;
}
/* Umbruch statt Überlauf: in schmalen Panes (Split-View) rutschen die Zoom-Bedienelemente in
eine zweite Zeile, statt aus der Toolbar zu laufen. */
.os-pdf-toolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
padding: 6px 8px;
border-bottom: 1px solid var(--color-border);
background: var(--color-bg-subtle);
flex: 0 0 auto;
}
.os-pdf-search-input {
flex: 1;
min-width: 120px;
height: 28px;
font-size: 12.5px;
}
.os-pdf-match-count {
font-size: 11.5px;
color: var(--color-text-muted);
white-space: nowrap;
padding: 0 4px;
}
/* Schiebt die Zoom-Gruppe nach rechts bzw. in die nächste Zeile. */
.os-pdf-toolbar-sep {
flex: 1 0 0;
min-width: 0;
}
.os-pdf-page-count {
font-size: 11.5px;
color: var(--color-text-muted);
white-space: nowrap;
padding: 0 4px;
}
.os-pdf-zoom-select {
width: auto;
min-width: 104px;
height: 28px;
font-size: 12px;
}
.os-pdf-body {
display: flex;
flex: 1;
/* Sicherheitsnetz statt min-height:0: der Seiten-Container darin ist absolut positioniert
und trägt daher nichts zur Höhe bei. Wo die Höhenkette des Einbetters unbestimmt ist
(z. B. einspaltige Umbrüche mit height:auto), würde der Viewer sonst auf 0 kollabieren. */
min-height: 240px;
}
/* Breite muss zu THUMB_SCALE in js/pdf-viewer.js passen: 0.18 ergibt bei A4 (595 pt) ein 107 px
breites Thumbnail. Mit den vorherigen 84 px lief es aus der Spalte heraus — sichtbar als
horizontaler Scrollbalken und als Thumbnail, das den Rahmen der Leiste überschrieb. */
.os-pdf-thumbs {
flex: 0 0 124px;
overflow-y: auto;
padding: 8px 6px;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
border-right: 1px solid var(--color-border);
background: var(--color-bg-subtle);
}
.os-pdf-thumb {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
padding: 0;
border: 1px solid transparent;
border-radius: 4px;
background: none;
cursor: pointer;
}
.os-pdf-thumb:hover { border-color: var(--color-border); }
.os-pdf-thumb canvas {
display: block;
/* Deckel für Seitenformate, die breiter sind als A4 (Querformat, Letter): das Thumbnail wird
dann proportional heruntergerechnet, statt die Leiste erneut zu sprengen. */
max-width: 100%;
height: auto;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
background: #fff; /* bewusst weiß: PDF-Seite selbst ist immer weißes Papier, themenunabhängig */
}
.os-pdf-thumb-label {
font-size: 10px;
color: var(--color-text-muted);
}
/* Nur Positionierungs-Kontext: gescrollt wird im .os-pdf-container darin, weil pdf.js' PDFViewer
einen absolut positionierten Container zwingend braucht (misst darüber den Viewport). */
.os-pdf-pages {
position: relative;
flex: 1;
min-width: 0;
}
.os-pdf-container {
position: absolute;
inset: 0;
overflow: auto;
}
.os-pdf-status {
font-size: 12px;
color: var(--color-text-muted);
padding: 12px;
text-align: center;
}
.os-pdf-status-error { color: var(--color-danger-text, var(--color-danger)); }
/* ── Anpassungen an pdf.js' mitgeliefertem web/pdf_viewer.css ──
Seiten-Layout (Größe, Skalierung, Text-/Annotation-Layer) kommt komplett von dort; hier nur
Optik im Design-System. */
.os-pdf-container .pdfViewer {
--page-margin: 0 auto 12px;
--page-border: none;
padding: 12px 0;
}
/* Unsere globale .page-Regel (Seiten-Layout, weiter oben) greift sonst auch auf die von pdf.js
erzeugten div.page und schießt max-width/padding hinein — pdf.js setzt beides selbst nicht. */
.os-pdf-container .pdfViewer .page {
max-width: none;
padding: 0;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
/* Treffer-Optik der pdf.js-Suche; Variablen sind der dafür vorgesehene Hebel. */
.os-pdf-container .textLayer .highlight {
--highlight-bg-color: rgba(250, 204, 21, 0.55);
--highlight-selected-bg-color: rgba(249, 115, 22, 0.75);
}
.os-pdf-container .textLayer ::selection { background: rgba(37, 99, 235, 0.35); }
/* ============================================================
Reconnect-Overlay (#components-reconnect-modal, Markup in App.razor)
Sichtbarkeit und Zustandstexte hängen ausschließlich an den Klassen, die Blazor auf dem
Element setzt: components-reconnect-show/-retrying/-paused/-failed/-resume-failed/-rejected
(und -hide für „wieder verbunden").
============================================================ */
.os-reconnect {
position: fixed;
inset: 0;
z-index: 10000; /* über allem, inkl. Drawer (900) und Toasts (1100) */
display: none;
align-items: center;
justify-content: center;
padding: 24px;
background: rgba(15, 23, 42, 0.45);
backdrop-filter: blur(2px);
}
html[data-theme="dark"] .os-reconnect { background: rgba(0, 0, 0, 0.62); }
/* Die 0.4s Verzögerung der Einblendung schluckt kurze Aussetzer: ein Reconnect, der schneller
durch ist, bleibt unsichtbar — genau dafür hat auch Blazors eingebaute Anzeige eine. */
.os-reconnect.components-reconnect-show,
.os-reconnect.components-reconnect-retrying,
.os-reconnect.components-reconnect-paused,
.os-reconnect.components-reconnect-failed,
.os-reconnect.components-reconnect-resume-failed,
.os-reconnect.components-reconnect-rejected {
display: flex;
animation: os-rc-overlay-in 0.3s ease-out 0.4s both;
}
@keyframes os-rc-overlay-in { from { opacity: 0; } to { opacity: 1; } }
.os-reconnect-card {
width: min(420px, 100%);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-card);
box-shadow: var(--shadow-lg), 0 24px 48px -12px rgba(15, 23, 42, 0.28);
overflow: hidden;
animation: os-rc-card-in 0.5s cubic-bezier(0.05, 0.89, 0.25, 1.02) 0.4s both;
}
@keyframes os-rc-card-in {
from { transform: translateY(14px) scale(0.97); }
to { transform: none; }
}
/* Absperrband oben und unten. Das Streifenmuster liegt auf einem breiteren ::before und wird
um genau eine Musterperiode (24px / cos45° = 33.94px) verschoben — dadurch nahtlos. */
.os-reconnect-hazard {
position: relative;
height: 10px;
overflow: hidden;
}
.os-reconnect-hazard::before {
content: '';
position: absolute;
inset: 0 -40px 0 0;
background: repeating-linear-gradient(45deg,
var(--color-accent) 0 12px,
var(--color-primary) 12px 24px);
animation: os-rc-hazard 1.1s linear infinite;
}
@keyframes os-rc-hazard { to { transform: translateX(-33.94px); } }
.os-reconnect-body {
padding: 20px 24px 24px;
text-align: center;
}
.os-reconnect-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 10px;
border-radius: var(--radius-pill);
background: var(--color-primary-soft);
color: var(--color-primary);
font-family: var(--font-mono);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.os-reconnect-badge svg {
width: 10px;
height: 10px;
fill: var(--color-accent);
}
.os-reconnect-title {
margin: 6px 0 8px;
font-size: 16px;
font-weight: 600;
color: var(--color-text-primary);
}
.os-reconnect-status {
margin: 0;
font-size: 13px;
line-height: 1.55;
color: var(--color-text-secondary);
}
.os-reconnect-status b { font-variant-numeric: tabular-nums; }
.os-reconnect-meta {
margin: 0;
font-family: var(--font-mono);
font-size: 11px;
color: var(--color-text-muted);
}
.os-reconnect-actions {
display: flex;
justify-content: center;
gap: 8px;
}
/* Abstände nur, wo die Zeile bzw. die Buttons im jeweiligen Zustand auch Inhalt haben —
sonst bliebe darunter Luft ohne sichtbares Element. */
.os-reconnect.components-reconnect-show .os-reconnect-meta { margin-top: 10px; }
.os-reconnect.components-reconnect-paused .os-reconnect-actions,
.os-reconnect.components-reconnect-failed .os-reconnect-actions,
.os-reconnect.components-reconnect-resume-failed .os-reconnect-actions,
.os-reconnect.components-reconnect-rejected .os-reconnect-actions { margin-top: 16px; }
/* Zustands-abhängige Textblöcke und Buttons. „retrying" kommt bei Blazor zusätzlich zu „show",
deshalb der :not() beim Verbinden-Text. */
.os-reconnect [data-rc-state] { display: none; }
.os-reconnect.components-reconnect-show:not(.components-reconnect-retrying) [data-rc-state~="connecting"],
.os-reconnect.components-reconnect-retrying [data-rc-state~="retrying"],
.os-reconnect.components-reconnect-paused [data-rc-state~="paused"],
.os-reconnect.components-reconnect-failed [data-rc-state~="failed"],
.os-reconnect.components-reconnect-resume-failed [data-rc-state~="resume-failed"],
.os-reconnect.components-reconnect-rejected [data-rc-state~="rejected"] {
display: inline;
}
/* Buttons brauchen das Flex-Layout aus .ds-btn zurück. */
.os-reconnect.components-reconnect-paused button[data-rc-state~="paused"],
.os-reconnect.components-reconnect-failed button[data-rc-state~="failed"],
.os-reconnect.components-reconnect-resume-failed button[data-rc-state~="resume-failed"],
.os-reconnect.components-reconnect-rejected button[data-rc-state~="rejected"] {
display: inline-flex;
}
/* ── Bagger-Szene ────────────────────────────────────────── */
.os-reconnect-scene {
display: block;
width: 100%;
max-width: 230px;
height: auto;
margin: 4px auto 2px;
}
.os-rc-ground { stroke: var(--color-border-strong); }
.os-rc-body { fill: var(--color-accent); }
.os-rc-boom { stroke: var(--color-accent); }
.os-rc-metal { fill: var(--color-text-secondary); }
.os-rc-wheel { fill: var(--color-surface); stroke: var(--color-text-secondary); }
.os-rc-glass { fill: var(--color-surface); }
.os-rc-dirt { fill: var(--color-text-faint); }
.os-rc-beacon { fill: var(--color-warning); }
.os-rc-beacon-halo { stroke: var(--color-warning); }
/* transform-origin in viewBox-Einheiten: transform-box ist bei SVG-Elementen ohnehin view-box. */
.os-rc-machine { animation: os-rc-bob 2.4s ease-in-out infinite; }
.os-rc-arm { transform-origin: 100px 66px; animation: os-rc-dig 2.4s ease-in-out infinite; }
.os-rc-beacon { animation: os-rc-blink 1.1s steps(1, end) infinite; }
.os-rc-beacon-halo { transform-origin: 53.5px 52px; animation: os-rc-halo 1.1s ease-out infinite; }
.os-rc-clod { animation: os-rc-clod 2.4s ease-in-out infinite; }
.os-rc-clod-2 { animation-delay: 0.1s; }
.os-rc-clod-3 { animation-delay: 0.2s; }
.os-rc-dust { animation: os-rc-dust 2.4s ease-out infinite; }
.os-rc-dust-1 { transform-origin: 164px 98px; }
.os-rc-dust-2 { transform-origin: 174px 100px; animation-delay: 0.18s; }
.os-rc-smoke { transform-origin: 88.5px 49px; animation: os-rc-smoke 2.4s linear infinite; }
.os-rc-smoke-2 { animation-delay: 0.9s; }
/* Grundzustand ohne Animation: nur die ruhende Maschine, nichts fliegt. */
.os-rc-beacon-halo, .os-rc-clod, .os-rc-dust, .os-rc-smoke { opacity: 0; }
@keyframes os-rc-dig {
0% { transform: rotate(0deg); } /* Schaufel im Boden */
30% { transform: rotate(-20deg); }
46% { transform: rotate(-26deg); }
54% { transform: rotate(-22deg); } /* Kipp-Ruck */
70% { transform: rotate(-25deg); }
100% { transform: rotate(0deg); }
}
@keyframes os-rc-bob {
0%, 100% { transform: translateY(0); }
10% { transform: translateY(1.2px); }
46% { transform: translateY(-0.6px); }
}
@keyframes os-rc-clod {
0%, 44% { opacity: 0; transform: translate(0, 0); }
50% { opacity: 1; transform: translate(1px, 2px); }
74% { opacity: 1; transform: translate(10px, 20px); }
82%, 100% { opacity: 0; transform: translate(12px, 23px); }
}
@keyframes os-rc-dust {
0%, 70% { opacity: 0; transform: scale(0.4); }
78% { opacity: 0.5; transform: scale(0.9) translateY(-2px); }
100% { opacity: 0; transform: scale(1.6) translateY(-10px); }
}
@keyframes os-rc-halo {
0% { opacity: 0.5; transform: scale(0.6); }
100% { opacity: 0; transform: scale(2.2); }
}
@keyframes os-rc-blink {
0%, 49% { opacity: 1; }
50%, 100% { opacity: 0.3; }
}
@keyframes os-rc-smoke {
0% { opacity: 0; transform: translate(0, 0) scale(0.6); }
12% { opacity: 0.4; }
45% { opacity: 0; transform: translate(-7px, -16px) scale(1.4); }
100% { opacity: 0; transform: translate(-7px, -16px) scale(1.4); }
}
/* Steht die Verbindung nicht mehr in Aussicht, steht auch die Baustelle still — nur die
Warnleuchte blinkt weiter, dann in Rot. */
.os-reconnect.components-reconnect-paused .os-rc-anim,
.os-reconnect.components-reconnect-failed .os-rc-anim,
.os-reconnect.components-reconnect-resume-failed .os-rc-anim,
.os-reconnect.components-reconnect-rejected .os-rc-anim,
.os-reconnect.components-reconnect-paused .os-reconnect-hazard::before,
.os-reconnect.components-reconnect-failed .os-reconnect-hazard::before,
.os-reconnect.components-reconnect-resume-failed .os-reconnect-hazard::before,
.os-reconnect.components-reconnect-rejected .os-reconnect-hazard::before {
animation: none;
}
.os-reconnect.components-reconnect-failed .os-rc-beacon,
.os-reconnect.components-reconnect-resume-failed .os-rc-beacon,
.os-reconnect.components-reconnect-rejected .os-rc-beacon {
fill: var(--color-danger);
animation: os-rc-blink 1.1s steps(1, end) infinite;
}
@media (prefers-reduced-motion: reduce) {
.os-reconnect, .os-reconnect *, .os-reconnect-hazard::before { animation: none !important; }
}
/* ApexCharts-Tooltip: die Lib rendert eigenes Hell-Styling — im Dark-Theme auf Tokens ziehen. */
html[data-theme="dark"] .apexcharts-tooltip,
html[data-theme="dark"] .apexcharts-tooltip-title,
html[data-theme="dark"] .apexcharts-menu {
background: var(--color-surface-hover);
color: var(--color-text-primary);
border-color: var(--color-border);
}