/* =============================================================================
Logistik Dashboard Design System — Enterprise Pro
Fonts: Inter (body) + Fira Code (data/mono)
Brand: #1E40AF (Enterprise Blue) + #1E293B (Slate Dark)
Style: Data-Dense Enterprise Dashboard
============================================================================= */
/* Google Fonts: Inter + Fira Code */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600;700&display=swap');
:root {
/* --- ENTERPRISE BRAND PALETTE --- */
--brand-primary: #1E40AF;
/* Enterprise Deep Blue */
--brand-primary-light: #3B82F6;
/* Lighter blue for accents */
--brand-dark: #0F172A;
/* Slate 950 — deeper, more premium */
--brand-accent: #1D4ED8;
/* Blue 700 */
--brand-amber: #F59E0B;
/* Amber — CTA / highlights */
/* Secondary Palette */
--brand-secondary: #1E3A8A;
/* Blue 900 — deeper hover states */
/* Backgrounds */
--bg-main: #F8FAFC;
/* Slate 50 — clean enterprise */
--bg-card: #FFFFFF;
/* White Cards */
--bg-sidebar: #FFFFFF;
/* Sidebar background */
--bg-hover: #F1F5F9;
/* Slate 100 — hover */
--bg-active: rgba(30, 64, 175, 0.07);
/* Deep blue tint for active nav */
--bg-kpi-accent: rgba(30, 64, 175, 0.08);
/* Blue icon background */
/* Text Hierarchy */
--text-primary: #0F172A;
/* Slate 950 — maximum contrast */
--text-secondary: #475569;
/* Slate 600 — passes 4.5:1 */
--text-muted: #94A3B8;
/* Slate 400 */
--text-on-brand: #FFFFFF;
/* White on brand surfaces */
/* Semantic Colors */
--success-bg: #DCFCE7;
--success-text: #15803D;
--success-accent: #22C55E;
--warning-bg: #FEF3C7;
--warning-text: #92400E;
--warning-accent: #F59E0B;
--danger-bg: #FEE2E2;
--danger-text: #B91C1C;
--danger-accent: #EF4444;
--info-bg: #DBEAFE;
--info-text: #1E40AF;
--info-accent: #3B82F6;
/* Radii */
--radius-xs: 0.375rem;
--radius-sm: 0.5rem;
--radius-md: 0.75rem;
--radius-lg: 1rem;
--radius-xl: 1.5rem;
--radius-pill: 9999px;
/* Borders */
--border-subtle: 1px solid #E2E8F0;
--border-hover: 1px solid #CBD5E1;
/* Shadows (5-level depth system) */
--shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
--shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
--shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.07), 0 2px 4px -2px rgba(15, 23, 42, 0.05);
--shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -2px rgba(15, 23, 42, 0.04);
--shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, 0.10), 0 8px 10px -6px rgba(15, 23, 42, 0.05);
--shadow-brand: 0 4px 14px -2px rgba(30, 64, 175, 0.25);
/* KPI Card Accent Colors (top border) */
--kpi-blue: #1E40AF;
--kpi-emerald: #059669;
--kpi-amber: #D97706;
--kpi-rose: #DC2626;
--kpi-violet: #7C3AED;
--kpi-sky: #0284C7;
/* Spacing Scale */
--space-xs: 0.25rem;
--space-sm: 0.5rem;
--space-md: 1rem;
--space-lg: 1.5rem;
--space-xl: 2rem;
--space-2xl: 3rem;
/* Data-Dense Dashboard Variables */
--grid-gap: 8px;
--card-padding: 1.5rem;
--font-size-small: 0.75rem;
--table-row-height: 44px;
--sidebar-width: 220px;
/* Transition Tokens */
--transition-fast: 150ms ease;
--transition-base: 200ms ease;
--transition-slow: 300ms ease;
/* Bootstrap Overrides */
--bs-body-bg: var(--bg-main);
--bs-body-color: var(--text-primary);
--bs-primary: var(--brand-primary);
--bs-primary-rgb: 30, 64, 175;
--bs-font-sans-serif: 'Inter', ui-sans-serif, system-ui, sans-serif;
}
/* =============================================================================
BASE STYLES
============================================================================= */
body {
background-color: var(--bg-main);
color: var(--text-primary);
font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
line-height: 1.6;
font-size: 0.9375rem;
/* 15px — optimized for data dashboards */
}
/* =============================================================================
TYPOGRAPHY
============================================================================= */
h1,
h2,
h3,
h4,
h5,
h6 {
color: var(--brand-dark);
font-weight: 700;
letter-spacing: -0.025em;
margin-bottom: 1rem;
line-height: 1.2;
}
h1 {
font-size: 1.875rem;
}
/* 30px */
h2 {
font-size: 1.5rem;
}
/* 24px */
h3 {
font-size: 1.25rem;
}
/* 20px */
.text-brand {
color: var(--brand-primary) !important;
}
.bg-brand {
background-color: var(--brand-primary) !important;
}
/* Fira Code for data values, KPIs, and monetary amounts */
.font-mono,
.kpi-value,
[class*="font-mono"],
td[class*="font-mono"] {
font-family: 'Fira Code', 'SF Mono', 'Cascadia Code', monospace !important;
font-feature-settings: 'zero' 1;
/* Slashed zero for data clarity */
}
/* =============================================================================
CARD SYSTEM
============================================================================= */
.glass-card,
.card {
background: var(--bg-card);
border: none;
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
transition: transform var(--transition-base), box-shadow var(--transition-base);
padding: var(--card-padding);
}
/* Interactive Card Float — Pro Max hover feel */
a.card-link:hover .glass-card,
.glass-card.interactive:hover,
.glass-card:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-lg);
}
/* Card Header refinements */
.card-header {
background: transparent;
border-bottom: 1px solid #F1F5F9;
padding: 1rem 1.5rem;
font-weight: 600;
}
/* =============================================================================
NAVIGATION
============================================================================= */
.navbar-custom {
background-color: var(--bg-card) !important;
border-bottom: 1px solid #E5E7EB !important;
box-shadow: var(--shadow-xs) !important;
padding-top: 0.75rem !important;
padding-bottom: 0.75rem !important;
transition: box-shadow var(--transition-base);
}
/* Nav Links */
.navbar-light .navbar-nav .nav-link {
color: var(--text-secondary);
font-weight: 600;
font-size: 0.875rem;
padding: 0.5rem 1rem;
border-radius: var(--radius-sm);
transition: all var(--transition-base);
cursor: pointer;
letter-spacing: 0.01em;
}
.navbar-light .navbar-nav .nav-link:hover {
color: var(--brand-primary);
background-color: var(--bg-active);
}
.navbar-light .navbar-nav .nav-link.active {
color: var(--brand-primary);
background-color: var(--bg-active);
font-weight: 700;
}
/* =============================================================================
BUTTONS — Pro Max Treatment
============================================================================= */
.btn {
border-radius: var(--radius-sm);
font-weight: 600;
padding: 0.5rem 1.25rem;
transition: all var(--transition-base);
letter-spacing: 0.01em;
cursor: pointer;
font-size: 0.875rem;
}
.btn-primary {
background-color: var(--brand-primary);
border: none;
color: var(--text-on-brand);
box-shadow: var(--shadow-brand);
}
.btn-primary:hover {
background-color: #2563EB;
transform: translateY(-1px);
box-shadow: 0 6px 16px -2px rgba(59, 130, 246, 0.40);
}
.btn-primary:active {
transform: translateY(0);
box-shadow: var(--shadow-brand);
}
.btn-light,
.btn-outline-secondary {
background: var(--bg-card);
border: var(--border-subtle);
color: var(--text-secondary);
box-shadow: var(--shadow-xs);
}
.btn-light:hover,
.btn-outline-secondary:hover {
background: var(--bg-hover);
color: var(--brand-dark);
border-color: #D1D5DB;
box-shadow: var(--shadow-sm);
}
/* =============================================================================
DATA TABLES — Dense, Scannable
============================================================================= */
.dash-spreadsheet-container .dash-spreadsheet-inner th {
background-color: #FAFAFA !important;
color: var(--text-secondary) !important;
font-weight: 700 !important;
text-transform: uppercase;
font-size: 0.6875rem;
/* 11px */
letter-spacing: 0.06em;
border: none !important;
border-bottom: 2px solid #E5E7EB !important;
padding: 14px 16px !important;
font-family: 'Inter', sans-serif !important;
}
.dash-spreadsheet-container .dash-spreadsheet-inner td {
background-color: var(--bg-card) !important;
color: var(--text-primary) !important;
border: none !important;
border-bottom: 1px solid #F3F4F6 !important;
font-size: 0.875rem;
padding: 12px 16px !important;
transition: background-color var(--transition-fast);
}
.dash-spreadsheet-container .dash-spreadsheet-inner tr:hover td {
background-color: var(--bg-active) !important;
color: var(--brand-dark) !important;
}
/* Allow text selection & copy in DataTables */
.dash-spreadsheet-container .dash-spreadsheet-inner td,
.dash-spreadsheet-container .dash-spreadsheet-inner td * {
-webkit-user-select: text !important;
-moz-user-select: text !important;
-ms-user-select: text !important;
user-select: text !important;
cursor: text !important;
}
/* =============================================================================
FORMS & INPUTS
============================================================================= */
.form-control,
.Select-control {
background-color: var(--bg-card);
border: 1px solid #E5E7EB;
border-radius: var(--radius-sm);
padding: 0.6rem 1rem;
box-shadow: var(--shadow-xs);
transition: border-color var(--transition-base), box-shadow var(--transition-base);
font-size: 0.875rem;
}
.form-control:focus {
border-color: var(--brand-primary);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
outline: none;
}
/* Dropdown styling */
.Select-menu-outer {
border-radius: var(--radius-sm);
box-shadow: var(--shadow-lg);
border: var(--border-subtle);
}
/* =============================================================================
KPI SYSTEM — Data-Dense Dashboard
============================================================================= */
.kpi-value {
font-size: 2.25rem;
font-weight: 700;
color: var(--brand-dark);
line-height: 1;
letter-spacing: -0.03em;
font-family: 'Fira Code', monospace;
}
.kpi-label {
text-transform: uppercase;
font-size: var(--font-size-small);
font-weight: 700;
color: var(--text-muted);
letter-spacing: 0.06em;
margin-bottom: 0.5rem;
}
/* =============================================================================
SIDEBAR TABS (Vertical Navigation)
============================================================================= */
.custom-sidebar-tabs .nav-link {
color: var(--text-secondary);
font-weight: 500;
margin-bottom: 0.25rem;
padding: 0.75rem 1rem;
border-radius: var(--radius-sm);
text-align: left;
transition: all var(--transition-base);
cursor: pointer;
}
.custom-sidebar-tabs .nav-link:hover {
background-color: var(--bg-hover);
color: var(--brand-dark);
}
.custom-sidebar-tabs .nav-link.active {
background-color: var(--brand-primary) !important;
color: var(--text-on-brand) !important;
box-shadow: var(--shadow-brand);
font-weight: 600;
}
/* Sidebar height on desktop */
@media (min-width: 768px) {
.vh-100-md {
min-height: calc(100vh - 80px);
}
}
/* =============================================================================
SIDEBAR FILTERS
============================================================================= */
.glass-filters {
background: transparent;
padding: 0;
margin-bottom: 1rem;
}
.glass-filters .form-label {
font-weight: 600;
font-size: 0.8125rem;
color: var(--text-secondary);
margin-bottom: 0.25rem;
text-transform: uppercase;
letter-spacing: 0.04em;
}
/* =============================================================================
BADGES — Refined Status Indicators
============================================================================= */
.badge {
font-weight: 600;
font-size: 0.6875rem;
letter-spacing: 0.02em;
padding: 0.3em 0.65em;
border-radius: var(--radius-xs);
}
/* =============================================================================
LOADING & SKELETON STATES — Pro Max UX
============================================================================= */
@keyframes shimmer {
0% {
background-position: -200px 0;
}
100% {
background-position: calc(200px + 100%) 0;
}
}
.skeleton {
background: linear-gradient(90deg, #F0F0F0 0px, #E8E8E8 40px, #F0F0F0 80px);
background-size: 200px 100%;
animation: shimmer 1.5s ease-in-out infinite;
border-radius: var(--radius-sm);
}
/* Pulse animation for loading indicators only */
@keyframes pulse-soft {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
.loading-pulse {
animation: pulse-soft 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
/* =============================================================================
SCROLLBAR — Slim, Professional
============================================================================= */
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background-color: #D1D5DB;
border-radius: var(--radius-pill);
}
::-webkit-scrollbar-thumb:hover {
background-color: #9CA3AF;
}
/* =============================================================================
ACCESSIBILITY — Pro Max Checklist
============================================================================= */
/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* Visible focus states for keyboard navigation */
*:focus-visible {
outline: 2px solid var(--brand-primary);
outline-offset: 2px;
border-radius: var(--radius-xs);
}
/* Remove focus outline for mouse users */
*:focus:not(:focus-visible) {
outline: none;
}
/* =============================================================================
UTILITY CLASSES — Pro Max Adds
============================================================================= */
/* Interactive cursor on all clickable elements */
[role="button"],
button,
a,
.clickable,
.nav-link,
.dropdown-item {
cursor: pointer;
}
/* Text gradient utility for hero/accent text */
.text-gradient-brand {
background: linear-gradient(135deg, var(--brand-primary), var(--brand-accent));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* Subtle divider */
.divider-subtle {
border: none;
border-top: 1px solid #F1F5F9;
margin: 1rem 0;
}
/* =============================================================================
LOGIN PAGE — Aurora Borealis Effect
============================================================================= */
.login-wrapper {
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
background: #0a0e1a;
position: relative;
overflow: hidden;
}
/* Aurora layer 1 — teal/cyan band */
.login-wrapper::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background:
radial-gradient(ellipse 80% 50% at 20% 40%,
rgba(0, 210, 190, 0.18) 0%,
transparent 55%),
radial-gradient(ellipse 60% 40% at 70% 30%,
rgba(59, 130, 246, 0.15) 0%,
transparent 50%),
radial-gradient(ellipse 90% 35% at 50% 60%,
rgba(99, 102, 241, 0.12) 0%,
transparent 55%);
animation: aurora-shift-1 12s ease-in-out infinite alternate;
filter: blur(40px);
}
/* Aurora layer 2 — indigo/violet band */
.login-wrapper::after {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background:
radial-gradient(ellipse 70% 45% at 60% 35%,
rgba(124, 58, 237, 0.14) 0%,
transparent 50%),
radial-gradient(ellipse 50% 60% at 30% 55%,
rgba(6, 182, 212, 0.16) 0%,
transparent 50%),
radial-gradient(ellipse 80% 30% at 80% 70%,
rgba(16, 185, 129, 0.10) 0%,
transparent 50%);
animation: aurora-shift-2 15s ease-in-out infinite alternate-reverse;
filter: blur(50px);
}
@keyframes aurora-shift-1 {
0% {
transform: translate(0, 0) rotate(0deg) scale(1);
opacity: 0.8;
}
33% {
transform: translate(5%, -8%) rotate(3deg) scale(1.05);
opacity: 1;
}
66% {
transform: translate(-3%, 5%) rotate(-2deg) scale(0.95);
opacity: 0.9;
}
100% {
transform: translate(8%, -3%) rotate(4deg) scale(1.02);
opacity: 1;
}
}
@keyframes aurora-shift-2 {
0% {
transform: translate(0, 0) rotate(0deg) scale(1);
opacity: 0.7;
}
33% {
transform: translate(-6%, 4%) rotate(-3deg) scale(1.08);
opacity: 1;
}
66% {
transform: translate(4%, -6%) rotate(2deg) scale(0.92);
opacity: 0.85;
}
100% {
transform: translate(-5%, 7%) rotate(-4deg) scale(1.05);
opacity: 0.95;
}
}
.login-card {
width: 420px;
background: rgba(255, 255, 255, 0.97);
border: none;
border-radius: var(--radius-lg);
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35);
padding: 2.5rem;
position: relative;
z-index: 1;
backdrop-filter: blur(20px);
}
.login-logo {
height: 40px;
margin-bottom: 0.75rem;
display: block;
margin-left: auto;
margin-right: auto;
}
.login-title {
color: var(--brand-dark) !important;
font-size: 1.5rem;
font-weight: 700;
letter-spacing: -0.025em;
margin-bottom: 0.25rem;
}
.login-subtitle {
color: var(--text-muted);
font-size: 0.875rem;
margin-bottom: 2rem;
}
/* =============================================================================
PAGE HEADERS — Normalized (No Blue Link-Style)
============================================================================= */
.page-header {
color: var(--brand-dark) !important;
font-weight: 700;
letter-spacing: -0.025em;
margin-bottom: 0.5rem;
font-size: 1.75rem;
}
.page-header-subtitle {
color: var(--text-secondary);
font-size: 0.9375rem;
margin-bottom: 1.5rem;
}
/* Override display-5 blue text-primary for page titles */
h1.display-5.text-primary,
h2.display-5.text-primary,
.display-5.text-primary {
color: var(--brand-dark) !important;
font-size: 1.75rem !important;
font-weight: 700 !important;
letter-spacing: -0.025em;
}
/* =============================================================================
BUTTON SIZING — Constrained Width
============================================================================= */
.btn-constrained {
max-width: 260px;
}
/* Override overly wide buttons inside cards */
.glass-card .btn.w-100,
.card .btn.w-100 {
max-width: 300px;
}
/* =============================================================================
/* =============================================================================
LOADING — Skeleton Shimmer (replaces jarring spinner)
============================================================================= */
/* Content fades while loading */
._dash-loading {
opacity: 0.4;
transition: opacity 0.4s ease;
pointer-events: none;
}
/* Hide default Dash spinner completely */
.dash-spinner.dash-default-spinner,
._dash-loading-callback {
position: relative;
min-height: 120px;
}
/* Override the default spinner SVG to be invisible */
.dash-spinner.dash-default-spinner svg,
._dash-loading-callback svg {
display: none !important;
}
/* Skeleton shimmer effect on loading areas */
.dash-spinner.dash-default-spinner::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(90deg,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0.03) 40%,
rgba(0, 0, 0, 0.06) 50%,
rgba(0, 0, 0, 0.03) 60%,
rgba(0, 0, 0, 0) 100%);
background-size: 200% 100%;
animation: skeleton-shimmer 1.8s ease-in-out infinite;
border-radius: var(--radius-sm);
pointer-events: none;
}
@keyframes skeleton-shimmer {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
/* =============================================================================
CHART CONTAINERS — Branded Polish
============================================================================= */
/* Graph containers inside cards */
.js-plotly-plot {
border-radius: var(--radius-sm);
}
.js-plotly-plot .plotly .modebar {
opacity: 0;
transition: opacity 0.2s ease;
}
.js-plotly-plot:hover .plotly .modebar {
opacity: 0.6;
}
/* =============================================================================
DATATABLE — Professional Styling
============================================================================= */
/* Light-mode DataTable Override */
.dash-spreadsheet-container .dash-spreadsheet-inner th {
background-color: #f8fafc !important;
color: var(--brand-dark) !important;
font-weight: 600 !important;
font-size: 0.8125rem !important;
text-transform: uppercase;
letter-spacing: 0.03em;
border-bottom: 2px solid var(--brand-primary) !important;
padding: 0.75rem 1rem !important;
}
.dash-spreadsheet-container .dash-spreadsheet-inner td {
font-size: 0.875rem !important;
padding: 0.625rem 1rem !important;
border-bottom: 1px solid #f1f5f9 !important;
color: var(--text-primary) !important;
}
.dash-spreadsheet-container .dash-spreadsheet-inner tr:hover td {
background-color: rgba(59, 130, 246, 0.04) !important;
}
/* DataTable pagination */
.dash-spreadsheet-container .previous-next-container {
padding: 0.75rem 1rem;
}
/* =============================================================================
SCROLLBAR — Sleek & Minimal
============================================================================= */
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.12);
border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
background: rgba(0, 0, 0, 0.2);
}
/* =============================================================================
RESPONSIVE — Mobile Polish
============================================================================= */
@media (max-width: 768px) {
.page-header {
font-size: 1.375rem;
}
.glass-card.border-0.h-100 {
min-height: auto;
}
.login-card {
width: 90vw;
padding: 1.5rem;
}
}
/* =============================================================================
KPI CARDS — Consistent Height
============================================================================= */
.kpi-card-uniform {
min-height: 180px;
display: flex;
flex-direction: column;
}
/* =============================================================================
EMPTY STATE — Professional Placeholder
============================================================================= */
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 4rem 2rem;
color: var(--text-muted);
}
.empty-state-icon {
font-size: 3rem;
margin-bottom: 1rem;
opacity: 0.5;
}
.empty-state-title {
font-size: 1.125rem;
font-weight: 600;
color: var(--text-secondary);
margin-bottom: 0.5rem;
}
.empty-state-text {
font-size: 0.875rem;
color: var(--text-muted);
}
/* =============================================================================
NAVBAR — Logo + Better Active States
============================================================================= */
.navbar-logo {
height: 32px;
margin-right: 1.5rem;
flex-shrink: 0;
}
/* Stronger active state for navbar links */
.navbar-light .navbar-nav .nav-link.active {
color: var(--brand-primary) !important;
background-color: var(--bg-active) !important;
font-weight: 700;
position: relative;
}
.navbar-light .navbar-nav .nav-link.active::after {
content: '';
position: absolute;
bottom: -2px;
left: 50%;
transform: translateX(-50%);
width: 60%;
height: 2px;
background-color: var(--brand-primary);
border-radius: 1px;
}
/* =============================================================================
SIDEBAR — Better Active Highlight
============================================================================= */
.custom-sidebar-tabs .nav-link.active {
background-color: var(--brand-primary) !important;
color: var(--text-on-brand) !important;
box-shadow: var(--shadow-brand);
font-weight: 600;
border-radius: var(--radius-sm);
}
/* Tenant Switcher Enhancement */
.tenant-switcher .btn.active,
.tenant-switcher .btn-primary {
box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}
/* =============================================================================
PHASE 2: KPI CARDS — Uniform Height + Hover
============================================================================= */
/* Home KPI cards uniform height */
.glass-card.border-0.h-100 {
min-height: 280px;
}
/* Subtle hover lift on cards */
.glass-card {
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.glass-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px -5px rgba(0, 0, 0, 0.1), 0 4px 10px -5px rgba(0, 0, 0, 0.04);
}
/* =============================================================================
PHASE 2: TABS — Professional Style (no emojis needed)
============================================================================= */
.nav-pills .nav-link {
color: var(--text-secondary);
border-radius: var(--radius-sm);
padding: 0.625rem 1.25rem;
font-weight: 500;
font-size: 0.875rem;
transition: all 0.2s ease;
border: 1px solid transparent;
}
.nav-pills .nav-link:hover {
color: var(--brand-primary);
background-color: rgba(59, 130, 246, 0.06);
border-color: rgba(59, 130, 246, 0.15);
}
.nav-pills .nav-link.active {
background-color: var(--brand-primary) !important;
color: white !important;
font-weight: 600;
box-shadow: 0 2px 8px rgba(59, 130, 246, 0.25);
border-color: var(--brand-primary) !important;
}
/* =============================================================================
PHASE 2: FILTER CARDS — Improved Styling
============================================================================= */
.glass-filters .lead {
font-size: 0.9375rem;
font-weight: 600;
color: var(--brand-dark);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.glass-filters .form-label {
font-size: 0.8125rem;
font-weight: 600;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.03em;
}
/* =============================================================================
PHASE 2: PAGE TRANSITIONS — Subtle Fade
============================================================================= */
#page-content {
animation: fadeInPage 0.3s ease-out;
}
@keyframes fadeInPage {
from {
opacity: 0;
transform: translateY(4px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* =============================================================================
PHASE 2: DISPLAY-5/6 Override — Ensure all are normalized
============================================================================= */
.display-5,
.display-6 {
font-size: 1.5rem !important;
font-weight: 700 !important;
color: var(--brand-dark) !important;
letter-spacing: -0.025em;
}
/* =============================================================================
PHASE 3: ENTERPRISE PRO — KPI CARDS WITH ACCENT BORDERS
============================================================================= */
/* KPI card with colored top border */
.kpi-card-blue { border-top: 3px solid var(--kpi-blue) !important; }
.kpi-card-emerald { border-top: 3px solid var(--kpi-emerald) !important; }
.kpi-card-amber { border-top: 3px solid var(--kpi-amber) !important; }
.kpi-card-rose { border-top: 3px solid var(--kpi-rose) !important; }
.kpi-card-violet { border-top: 3px solid var(--kpi-violet) !important; }
.kpi-card-sky { border-top: 3px solid var(--kpi-sky) !important; }
/* KPI icon badge */
.kpi-icon-badge {
width: 40px;
height: 40px;
border-radius: var(--radius-sm);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.125rem;
flex-shrink: 0;
}
.kpi-icon-blue { background: rgba(30, 64, 175, 0.10); color: var(--kpi-blue); }
.kpi-icon-emerald { background: rgba(5, 150, 105, 0.10); color: var(--kpi-emerald); }
.kpi-icon-amber { background: rgba(217, 119, 6, 0.10); color: var(--kpi-amber); }
.kpi-icon-rose { background: rgba(220, 38, 38, 0.10); color: var(--kpi-rose); }
.kpi-icon-violet { background: rgba(124, 58, 237, 0.10); color: var(--kpi-violet); }
.kpi-icon-sky { background: rgba(2, 132, 199, 0.10); color: var(--kpi-sky); }
/* =============================================================================
PHASE 3: SIDEBAR — Enterprise Left-Border Active State
============================================================================= */
/* Sidebar container */
.sidebar-enterprise {
background: var(--bg-sidebar);
border-right: 1px solid var(--border-subtle) !important;
}
/* Section header in sidebar (e.g. "CONTROLLING", "DEBITOREN") */
.sidebar-section-label {
font-size: 0.6875rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-muted);
padding: 0 0.75rem;
margin-bottom: 0.5rem;
margin-top: 0.25rem;
}
/* Override custom-sidebar-tabs for enterprise look */
.custom-sidebar-tabs .nav-link {
color: var(--text-secondary) !important;
font-weight: 500;
font-size: 0.875rem;
margin-bottom: 0.125rem;
padding: 0.625rem 0.75rem !important;
border-radius: var(--radius-sm);
transition: all var(--transition-base);
border-left: 2px solid transparent;
position: relative;
}
.custom-sidebar-tabs .nav-link:hover {
background-color: var(--bg-hover) !important;
color: var(--brand-primary) !important;
border-left-color: rgba(30, 64, 175, 0.3);
}
.custom-sidebar-tabs .nav-link.active {
background-color: var(--bg-active) !important;
color: var(--brand-primary) !important;
font-weight: 600 !important;
border-left: 2px solid var(--brand-primary) !important;
box-shadow: none !important;
}
/* =============================================================================
PHASE 3: FILTER SIDEBAR SECTION — Professional Treatment
============================================================================= */
.filter-section-title {
font-size: 0.6875rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-muted);
padding: 0.5rem 0;
border-top: 1px solid var(--border-subtle);
margin-top: 0.5rem;
margin-bottom: 0.75rem;
}
/* Override the lead class used in filter sections */
.glass-filters .lead {
font-size: 0.6875rem !important;
font-weight: 700 !important;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-muted) !important;
padding: 0.5rem 0;
border-top: 1px solid var(--border-subtle);
margin-bottom: 0.75rem !important;
}
/* =============================================================================
PHASE 3: PAGE HEADER — Enterprise Title Block
============================================================================= */
.page-title-block {
padding: 1.25rem 0 1.5rem;
border-bottom: 1px solid var(--border-subtle);
margin-bottom: 1.5rem;
}
.page-title-block .page-title {
font-size: 1.375rem;
font-weight: 700;
color: var(--brand-dark);
letter-spacing: -0.025em;
margin: 0;
line-height: 1.3;
}
.page-title-block .page-subtitle {
font-size: 0.875rem;
color: var(--text-secondary);
margin: 0.25rem 0 0;
}
/* Home page hero greeting */
.home-greeting {
font-size: 1.5rem;
font-weight: 700;
color: var(--brand-dark);
letter-spacing: -0.025em;
margin: 0;
}
.home-greeting-sub {
font-size: 0.875rem;
color: var(--text-secondary);
margin: 0.2rem 0 0;
}
/* =============================================================================
PHASE 3: NAVBAR — Enterprise Brand Treatment
============================================================================= */
.navbar-brand-enterprise {
display: flex;
align-items: center;
gap: 0.625rem;
text-decoration: none;
}
.navbar-brand-icon {
width: 32px;
height: 32px;
background: var(--brand-primary);
border-radius: var(--radius-sm);
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
font-size: 0.875rem;
flex-shrink: 0;
}
.navbar-brand-text {
font-size: 0.9375rem;
font-weight: 700;
color: var(--brand-dark);
letter-spacing: -0.01em;
line-height: 1.2;
}
.navbar-brand-sub {
font-size: 0.6875rem;
color: var(--text-muted);
font-weight: 400;
display: block;
}
/* =============================================================================
PHASE 3: ADMIN JOB CARDS — Refined Status Cards
============================================================================= */
.job-status-card {
border-left: 3px solid var(--border-subtle);
transition: border-color var(--transition-base);
}
.job-status-card.status-running { border-left-color: var(--brand-primary-light); }
.job-status-card.status-completed { border-left-color: var(--success-accent); }
.job-status-card.status-failed { border-left-color: var(--danger-accent); }
.job-status-card.status-pending { border-left-color: var(--text-muted); }
/* =============================================================================
PHASE 3: DATA TABLE — Improved Header Background
============================================================================= */
.dash-spreadsheet-container .dash-spreadsheet-inner th {
background: linear-gradient(180deg, #F8FAFC 0%, #F1F5F9 100%) !important;
}
/* =============================================================================
PHASE 3: BUTTON GROUPS — Period Selector (Personal Page)
============================================================================= */
.period-btn-group .btn {
font-size: 0.8125rem;
padding: 0.375rem 0.875rem;
font-weight: 500;
}
.period-btn-group .btn.active,
.period-btn-group .btn:not(.btn-outline-primary) {
background-color: var(--brand-primary) !important;
border-color: var(--brand-primary) !important;
color: #fff !important;
font-weight: 600;
}
/* =============================================================================
PHASE 3: TENANT SWITCHER — Pill Toggle Refinement
============================================================================= */
.tenant-switcher .btn {
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: 0.03em;
padding: 0.3rem 0.875rem;
}
.tenant-switcher .btn-primary {
background-color: var(--brand-primary) !important;
border-color: var(--brand-primary) !important;
box-shadow: var(--shadow-brand);
}
.tenant-switcher .btn-outline-primary {
color: var(--brand-primary) !important;
border-color: var(--brand-primary) !important;
}
.tenant-switcher .btn-outline-primary:hover {
background-color: var(--bg-active) !important;
color: var(--brand-primary) !important;
}
/* =============================================================================
PHASE 3: BADGE — Amber/CTA Variant
============================================================================= */
.badge-amber {
background-color: var(--warning-bg);
color: var(--warning-text);
font-weight: 600;
}
/* =============================================================================
PHASE 3: FORM LABEL OVERRIDE — Consistent Uppercase Labels
============================================================================= */
.sidebar-filter-label {
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--text-secondary);
margin-bottom: 0.25rem;
display: block;
}
/* =============================================================================
PHASE 3: CARD HEADER — Divider Line Style
============================================================================= */
.card-header-enterprise {
background: transparent !important;
border-bottom: 2px solid var(--border-subtle) !important;
padding: 1rem 1.25rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.card-header-enterprise .card-header-icon {
color: var(--brand-primary);
font-size: 1rem;
}
.card-header-enterprise .card-header-title {
font-size: 0.9375rem;
font-weight: 700;
color: var(--brand-dark);
margin: 0;
}
.card-header-enterprise .card-header-subtitle {
font-size: 0.8125rem;
color: var(--text-secondary);
margin: 0;
margin-left: auto;
}
/* =============================================================================
PHASE 3: TABS — Improved Border-Bottom Style
============================================================================= */
.nav-tabs {
border-bottom: 2px solid var(--border-subtle);
}
.nav-tabs .nav-link {
color: var(--text-secondary);
font-weight: 500;
font-size: 0.875rem;
border: none;
border-bottom: 2px solid transparent;
margin-bottom: -2px;
border-radius: 0;
padding: 0.625rem 1.25rem;
transition: all var(--transition-base);
}
.nav-tabs .nav-link:hover {
color: var(--brand-primary);
background: transparent;
border-bottom-color: rgba(30, 64, 175, 0.3);
}
.nav-tabs .nav-link.active {
color: var(--brand-primary) !important;
font-weight: 700 !important;
background: transparent !important;
border-bottom: 2px solid var(--brand-primary) !important;
}
/* =============================================================================
PHASE 3: GLOBAL REFINEMENTS
============================================================================= */
/* Consistent card inner padding */
.glass-card .card-body {
padding: var(--card-padding);
}
/* Subtle separator line */
hr {
border-color: var(--border-subtle);
opacity: 1;
}
/* Smooth outline for focused dropdowns (Dash dcc.Dropdown) */
.Select-control:focus-within,
.Select--is-focused .Select-control {
border-color: var(--brand-primary) !important;
box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.12) !important;
}
/* Improve dcc.Dropdown placeholder text */
.Select-placeholder {
color: var(--text-muted) !important;
}
/* Override Bootstrap primary color for buttons/links to match new brand */
.btn-primary {
background-color: var(--brand-primary) !important;
border-color: var(--brand-primary) !important;
}
.btn-primary:hover {
background-color: var(--brand-secondary) !important;
border-color: var(--brand-secondary) !important;
}
.btn-outline-primary {
color: var(--brand-primary) !important;
border-color: var(--brand-primary) !important;
}
.btn-outline-primary:hover {
background-color: var(--brand-primary) !important;
color: #fff !important;
}
.text-primary {
color: var(--brand-primary) !important;
}
.bg-primary {
background-color: var(--brand-primary) !important;
}
/* dbc.Badge color="primary" */
.badge.bg-primary {
background-color: var(--brand-primary) !important;
}
/* =============================================================================
PHASE 3: RESPONSIVE — App Container Content Padding
============================================================================= */
.app-container {
padding: 0 1.5rem 2rem;
}
@media (max-width: 768px) {
.app-container {
padding: 0 0.75rem 1.5rem;
}
}
/* Sidebar on mobile: not sticky, horizontal scroll */
@media (max-width: 767px) {
.custom-sidebar-tabs {
display: flex;
flex-direction: row;
overflow-x: auto;
gap: 0.25rem;
padding-bottom: 0.5rem;
-webkit-overflow-scrolling: touch;
}
.custom-sidebar-tabs .nav-link {
white-space: nowrap;
border-left: none !important;
border-bottom: 2px solid transparent !important;
}
.custom-sidebar-tabs .nav-link.active {
border-bottom-color: var(--brand-primary) !important;
}
}
/* =============================================================================
PHASE 3: SUPPORT / OPERATIONS SIDEBAR — Icon Alignment
============================================================================= */
.custom-sidebar-tabs .nav-link .bi {
opacity: 0.7;
font-size: 0.875rem;
}
.custom-sidebar-tabs .nav-link.active .bi {
opacity: 1;
}
/* =============================================================================
TODO / OFFENE PUNKTE (/app/todo)
Ein Register aus 50+ Posten ist ein Kontobuch, kein Kartenraster: eine Zeile
pro Punkt, Beträge rechts in Fira Code mit Tabellenziffern, Details klappen
an der Stelle auf. Bewusst OHNE .glass-card — die Klasse trägt
`min-height: 280px` (Home-KPI-Regel, Zeile ~996) und über `.card` +
`.glass-card .card-body` zweimal 1,5rem Innenabstand. Genau das machte die
erste Fassung dieser Seite unbenutzbar hoch.
============================================================================= */
/* --- Kopfzeile ------------------------------------------------------------ */
.todo-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--space-md);
margin-bottom: var(--space-md);
}
.todo-head h1 {
font-size: 1.375rem;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--text-primary);
margin: 0;
}
/* --- Kennzahlen-Leiste (ersetzt vier KPI-Karten) -------------------------- */
.todo-stats {
display: flex;
align-items: stretch;
flex-wrap: wrap;
gap: 0;
background: var(--bg-card);
border: var(--border-subtle);
border-radius: var(--radius-sm);
box-shadow: var(--shadow-xs);
padding: 0.625rem 0;
margin-bottom: var(--space-sm);
}
.todo-stat {
display: flex;
align-items: baseline;
gap: 0.4rem;
padding: 0 1.125rem;
border-left: 1px solid var(--bg-hover);
white-space: nowrap;
}
.todo-stat:first-child {
border-left: none;
}
.todo-stat-value {
font-family: 'Fira Code', 'SF Mono', monospace;
font-variant-numeric: tabular-nums slashed-zero;
font-size: 1.0625rem;
font-weight: 600;
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--text-primary);
}
.todo-stat-label {
font-size: 0.75rem;
font-weight: 500;
color: var(--text-secondary);
}
.todo-stat--alert .todo-stat-value {
color: var(--danger-text);
}
.todo-stat--money .todo-stat-value {
color: var(--brand-primary);
}
/* --- Filterleiste --------------------------------------------------------- */
.todo-filters {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--space-sm);
margin-bottom: var(--space-md);
}
/* Platzhalter tragen hier die Feldnamen (keine Labels darüber), müssen also
lesbar sein: --text-secondary erreicht 7,5:1, --text-muted nur 2,6:1. */
.todo-filters .Select-placeholder,
.todo-filters .form-control::placeholder {
color: var(--text-secondary) !important;
opacity: 1;
}
.todo-filters .Select-control,
.todo-filters .Select-placeholder,
.todo-filters .form-control {
min-height: 34px !important;
height: 34px !important;
font-size: 0.8125rem !important;
}
.todo-filters .Select-value-label,
.todo-filters .Select-placeholder,
.todo-filters .Select-input {
line-height: 32px !important;
}
.todo-filters .Select--multi .Select-value {
margin-top: 4px;
font-size: 0.75rem;
}
/* --- Abschnittskopf ------------------------------------------------------- */
.todo-section {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0 0.125rem 0.375rem;
margin: var(--space-lg) 0 0.375rem;
border-bottom: var(--border-subtle);
}
.todo-section:first-of-type {
margin-top: var(--space-sm);
}
.todo-section-title {
font-size: 0.6875rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-secondary);
}
.todo-section .bi {
font-size: 0.8125rem;
color: var(--text-secondary);
}
.todo-section-count {
font-family: 'Fira Code', monospace;
font-variant-numeric: tabular-nums;
font-size: 0.6875rem;
font-weight: 600;
color: var(--text-secondary);
background: var(--bg-hover);
border-radius: var(--radius-pill);
padding: 0.0625rem 0.4375rem;
}
.todo-section--alert .todo-section-title,
.todo-section--alert .bi {
color: var(--danger-text);
}
.todo-section--alert .todo-section-count {
color: var(--danger-text);
background: var(--danger-bg);
}
/* --- Eine Zeile pro Punkt ------------------------------------------------- */
.todo-item {
background: var(--bg-card);
border: var(--border-subtle);
border-radius: var(--radius-xs);
margin-bottom: 3px;
}
.todo-item[open] {
box-shadow: var(--shadow-sm);
border-color: #CBD5E1;
}
.todo-row {
display: grid;
grid-template-columns: 1rem 3.25rem 0.5rem minmax(0, 1fr) 1.125rem 7rem 6.75rem;
align-items: center;
gap: 0.5rem;
padding: 0.4375rem 0.625rem;
cursor: pointer;
list-style: none;
border-radius: var(--radius-xs);
transition: background var(--transition-fast);
}
.todo-row::-webkit-details-marker {
display: none;
}
.todo-row:hover {
background: var(--bg-hover);
}
.todo-row:focus-visible {
outline: 2px solid var(--brand-primary-light);
outline-offset: -2px;
}
.todo-chevron {
font-size: 0.6875rem;
color: var(--text-secondary);
transition: transform var(--transition-fast);
}
.todo-item[open] .todo-chevron {
transform: rotate(90deg);
}
.todo-ref {
font-family: 'Fira Code', 'SF Mono', monospace;
font-variant-numeric: tabular-nums;
font-size: 0.75rem;
font-weight: 600;
color: var(--text-secondary);
letter-spacing: -0.02em;
}
.todo-prio {
width: 0.5rem;
height: 0.5rem;
border-radius: var(--radius-pill);
}
/* Der Punkt ist in der eingeklappten Zeile das EINZIGE Prio-Signal, muss also
die 3:1 für bedeutungstragende Grafik halten — --warning-accent (#F59E0B)
erreicht nur 2,1:1. „niedrig" trägt zusätzlich über die Form (Ring statt
Füllung), damit Farbe nicht der einzige Kanal ist. */
.todo-prio--hoch {
background: #DC2626;
}
.todo-prio--mittel {
background: #D97706;
}
.todo-prio--niedrig {
background: transparent;
box-shadow: inset 0 0 0 1.5px #64748B;
}
.todo-title {
font-size: 0.8125rem;
font-weight: 500;
color: var(--text-primary);
line-height: 1.35;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.todo-check {
font-size: 0.8125rem;
text-align: center;
}
.todo-check--geprueft {
color: #15803D;
}
.todo-check--offen {
color: #D97706;
}
.todo-amount {
font-family: 'Fira Code', 'SF Mono', monospace;
font-variant-numeric: tabular-nums slashed-zero;
font-size: 0.8125rem;
font-weight: 500;
text-align: right;
color: var(--text-primary);
}
.todo-amount--negativ {
color: var(--danger-text);
}
.todo-status {
font-size: 0.6875rem;
font-weight: 600;
text-align: center;
border-radius: var(--radius-pill);
padding: 0.125rem 0.5rem;
white-space: nowrap;
}
.todo-status--offen {
color: var(--text-secondary);
background: var(--bg-hover);
}
.todo-status--in_arbeit {
color: var(--info-text);
background: var(--info-bg);
}
.todo-status--wartet_auf_user {
color: var(--danger-text);
background: var(--danger-bg);
}
.todo-status--blockiert {
color: var(--text-secondary);
background: #E2E8F0;
}
.todo-status--erledigt {
color: var(--success-text);
background: var(--success-bg);
}
.todo-status--verworfen {
color: var(--text-secondary);
background: transparent;
border: 1px solid var(--bg-hover);
}
/* --- Aufgeklappter Bereich ------------------------------------------------ */
.todo-body {
padding: 0.25rem 0.75rem 0.75rem 1.875rem;
animation: todo-reveal 180ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes todo-reveal {
from {
opacity: 0;
transform: translateY(-2px);
}
to {
opacity: 1;
transform: none;
}
}
.todo-item[open] .todo-title {
white-space: normal;
overflow: visible;
}
.todo-kontext {
font-size: 0.8125rem;
line-height: 1.55;
color: var(--text-secondary);
max-width: 78ch;
margin-bottom: 0.5rem;
}
/* dcc.Markdown umschließt jeden Absatz mit ; Bootstraps 1rem Abstand darunter
sprengt die Zeilendichte. Listen und Code erben die Größe des Fließtexts. */
.todo-kontext p {
margin-bottom: 0.4rem;
}
.todo-kontext p:last-child,
.todo-kontext ul:last-child,
.todo-kontext ol:last-child {
margin-bottom: 0;
}
.todo-kontext ul,
.todo-kontext ol {
margin-bottom: 0.4rem;
padding-left: 1.15rem;
}
.todo-kontext code {
font-family: 'Fira Code', 'SF Mono', monospace;
font-size: 0.9em;
color: var(--brand-primary);
background: var(--bg-hover);
border-radius: 3px;
padding: 0.05em 0.28em;
}
.todo-kontext strong {
color: var(--text-primary);
font-weight: 600;
}
.todo-kontext a {
color: var(--brand-primary);
text-underline-offset: 0.15em;
}
.todo-feld-label {
font-size: 0.625rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--text-secondary);
margin: 0.625rem 0 0.125rem;
}
.todo-refs {
font-family: 'Fira Code', monospace;
font-size: 0.75rem;
color: var(--text-secondary);
word-break: break-word;
}
.todo-frage {
font-size: 0.8125rem;
line-height: 1.5;
color: var(--danger-text);
background: var(--danger-bg);
border-radius: var(--radius-xs);
padding: 0.4375rem 0.625rem;
max-width: 78ch;
white-space: pre-wrap;
}
.todo-antwort {
font-size: 0.8125rem;
line-height: 1.5;
color: var(--success-text);
background: var(--success-bg);
border-radius: var(--radius-xs);
padding: 0.4375rem 0.625rem;
max-width: 78ch;
white-space: pre-wrap;
margin-top: 0.25rem;
}
.todo-herkunft {
font-size: 0.6875rem;
color: var(--text-secondary);
margin-top: 0.625rem;
}
/* --- Aktionsleiste -------------------------------------------------------- */
.todo-actions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.375rem;
margin-top: 0.75rem;
padding-top: 0.625rem;
border-top: var(--border-subtle);
}
.todo-actions .btn {
font-size: 0.75rem !important;
padding: 0.25rem 0.5625rem !important;
border-radius: var(--radius-xs) !important;
}
.todo-actions .form-control {
font-size: 0.75rem;
height: 30px;
min-width: 12rem;
flex: 1 1 12rem;
}
.todo-actions .todo-select {
min-width: 9.5rem;
}
.todo-actions .Select-control {
height: 30px !important;
min-height: 30px !important;
font-size: 0.75rem !important;
}
.todo-actions .Select-value-label,
.todo-actions .Select-placeholder,
.todo-actions .Select-input {
line-height: 28px !important;
}
.todo-actions .todo-spacer {
flex: 1 1 auto;
}
/* Kopier-Knopf: gehört zur Werkzeugreihe, nicht zum Inhalt */
.todo-actions .dash-clipboard,
.todo-actions button[title] > svg {
color: var(--text-secondary);
}
/* --- Neu-Formular --------------------------------------------------------- */
.todo-neu {
background: var(--bg-card);
border: var(--border-subtle);
border-radius: var(--radius-sm);
box-shadow: var(--shadow-xs);
padding: var(--space-md);
margin-bottom: var(--space-md);
}
.todo-neu .form-label {
font-size: 0.6875rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-secondary);
margin-bottom: 0.1875rem;
}
.todo-neu .form-control {
font-size: 0.8125rem;
}
/* --- Browser-Oberflächen ------------------------------------------------- */
::selection {
background: rgba(30, 64, 175, 0.16);
color: var(--text-primary);
}
input,
textarea {
caret-color: var(--brand-primary);
}
@media (max-width: 900px) {
.todo-row {
grid-template-columns: 1rem 3rem 0.5rem minmax(0, 1fr) 1.125rem;
row-gap: 0.25rem;
}
.todo-amount,
.todo-status {
grid-column: 4 / -1;
text-align: left;
}
.todo-status {
justify-self: start;
}
}
/* =============================================================================
ADMINISTRATION — /app/admin
Eigenes, token-basiertes System. Greift ausschliesslich unter .admin-page,
damit keine andere Dashboard-Seite beruehrt wird.
============================================================================= */
.admin-page {
/* Raster */
--ad-rail-w: 236px;
--ad-col-gap: 2.5rem;
/* Abstands-Rhythmus. Jeder Schritt sagt etwas ueber Zugehoerigkeit aus:
eng = gehoert zusammen, weit = ist etwas anderes. */
--ad-label-gap: 0.375rem; /* Beschriftung -> Feld */
--ad-field-gap: 0.875rem; /* Feld -> Feld */
--ad-group-gap: 1.75rem; /* Feldgruppe -> Feldgruppe */
--ad-block-gap: 1.5rem; /* Block -> Block */
--ad-head-gap: 2rem; /* Bereichskopf -> Inhalt */
/* Flaechen und Linien */
--ad-line: #E4EAF2;
--ad-line-strong: #D3DCE8;
--ad-head-bg: #FBFCFE;
--ad-muted: #5A6779; /* 5,7:1 auf Weiss — Bootstraps text-muted
(#94A3B8) erreicht nur 2,6:1 */
max-width: 1560px;
margin: 0 auto;
padding: 2rem 1.75rem 4.5rem;
}
.admin-page .text-muted,
.admin-page .form-text,
.admin-page ::placeholder {
color: var(--ad-muted) !important;
opacity: 1;
}
/* Die globale .card-Regel legt 1,5rem Innenabstand um jede Karte, die
CardBody nochmals dazu. Innerhalb der Adminseite traegt der Body den
Abstand allein. */
.admin-page .card,
.admin-page .glass-card {
padding: 0;
border: 1px solid var(--ad-line);
border-radius: var(--radius-md);
box-shadow: none;
}
.admin-page .card:hover,
.admin-page .glass-card:hover {
transform: none;
box-shadow: none;
}
/* --- Seitenkopf ---------------------------------------------------------- */
.admin-page__head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 1.5rem 2rem;
flex-wrap: wrap;
padding-bottom: 1.25rem;
margin-bottom: 2rem;
border-bottom: 1px solid var(--ad-line);
}
.admin-page__title {
margin: 0;
font-size: 1.5rem;
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.2;
color: var(--text-primary);
}
.admin-page__lede {
margin: 0.4375rem 0 0;
max-width: 60ch;
font-size: 0.875rem;
line-height: 1.55;
color: var(--text-secondary);
}
/* Systemzustand — von jedem Arbeitsbereich aus sichtbar */
.adm-syspill {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.4375rem 0.8125rem;
border: 1px solid var(--ad-line);
border-radius: var(--radius-pill);
background: var(--bg-card);
font-size: 0.8125rem;
color: var(--text-secondary);
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.adm-syspill__dot {
width: 8px;
height: 8px;
flex: none;
border-radius: 50%;
background: #A3B0C2;
}
.adm-syspill--ok .adm-syspill__dot { background: var(--success-accent); }
.adm-syspill--fail .adm-syspill__dot { background: var(--danger-accent); }
.adm-syspill--fail { border-color: #F0C9C9; color: var(--danger-text); }
.adm-syspill--run .adm-syspill__dot {
background: var(--brand-primary-light);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
animation: adm-pulse 1.7s ease-in-out infinite;
}
@keyframes adm-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
/* --- Zweispaltiges Geruest ----------------------------------------------- */
.admin-page__shell {
display: grid;
grid-template-columns: var(--ad-rail-w) minmax(0, 1fr);
gap: var(--ad-col-gap);
align-items: start;
}
/* --- Bereichsleiste ------------------------------------------------------ */
.adm-rail {
position: sticky;
top: 5.25rem;
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.adm-rail__group {
display: flex;
align-items: center;
gap: 0.4375rem;
margin: 0 0 0.5rem;
padding: 0 0.75rem;
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--ad-muted);
}
.adm-rail__items {
display: flex;
flex-direction: column;
gap: 2px;
}
.adm-rail__item {
display: flex;
align-items: center;
gap: 0.625rem;
width: 100%;
min-height: 2.25rem;
padding: 0.4375rem 0.75rem;
border: 0;
background: transparent;
border-radius: var(--radius-sm);
font-size: 0.875rem;
font-weight: 500;
line-height: 1.3;
text-align: left;
color: var(--text-secondary);
cursor: pointer;
transition: background var(--transition-fast), color var(--transition-fast);
}
.adm-rail__item:hover {
background: var(--bg-hover);
color: var(--text-primary);
}
.adm-rail__item.is-active {
background: var(--bg-active);
color: var(--brand-primary);
font-weight: 600;
}
.adm-rail__icon {
flex: none;
width: 1.125rem;
font-size: 1rem;
text-align: center;
color: #8695A9;
}
.adm-rail__item:hover .adm-rail__icon { color: var(--text-secondary); }
.adm-rail__item.is-active .adm-rail__icon { color: var(--brand-primary); }
/* Eingriffe sind nicht rueckholbar — die Gruppe traegt das sichtbar. */
.adm-rail__section--eingriffe {
padding-top: 1.25rem;
border-top: 1px solid var(--ad-line);
}
.adm-rail__section--eingriffe .adm-rail__group { color: var(--warning-text); }
.adm-rail__section--eingriffe .adm-rail__group .bi { color: var(--warning-accent); }
/* --- Arbeitsbereich ------------------------------------------------------ */
.adm-panel { display: none; }
.adm-panel.is-active { display: block; }
.adm-panel__head { margin-bottom: var(--ad-head-gap); }
.adm-panel__title {
margin: 0;
font-size: 1.1875rem;
font-weight: 700;
letter-spacing: -0.015em;
color: var(--text-primary);
}
.adm-panel__lede {
margin: 0.5rem 0 0;
max-width: 74ch;
font-size: 0.875rem;
line-height: 1.55;
color: var(--text-secondary);
}
.adm-panel__body {
display: flex;
flex-direction: column;
gap: var(--ad-block-gap);
}
/* --- Block --------------------------------------------------------------- */
.adm-block {
background: var(--bg-card);
border: 1px solid var(--ad-line);
border-radius: var(--radius-md);
overflow: hidden;
}
.adm-block__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.75rem 1.5rem;
flex-wrap: wrap;
padding: 1rem 1.5rem;
background: var(--ad-head-bg);
border-bottom: 1px solid var(--ad-line);
}
.adm-block__title {
display: flex;
align-items: center;
gap: 0.5rem;
margin: 0;
font-size: 0.9375rem;
font-weight: 600;
letter-spacing: -0.005em;
color: var(--text-primary);
}
.adm-block__title .bi { font-size: 0.9375rem; color: #8695A9; }
.adm-block__sub {
margin: 0.375rem 0 0;
max-width: 78ch;
font-size: 0.8125rem;
line-height: 1.5;
color: var(--text-secondary);
}
.adm-block__actions {
display: flex;
align-items: center;
gap: 0.625rem;
flex-wrap: wrap;
margin-left: auto;
}
.adm-block__body { padding: 1.5rem; }
.adm-block--flush .adm-block__body { padding: 0; }
.adm-block--danger { border-color: #EFCACA; }
.adm-block--danger .adm-block__head {
background: #FEF7F7;
border-bottom-color: #EFCACA;
}
.adm-block--danger .adm-block__title .bi { color: var(--danger-accent); }
/* --- Feldgruppen --------------------------------------------------------- */
.adm-group + .adm-group { margin-top: var(--ad-group-gap); }
.adm-group__legend {
margin: 0 0 0.75rem;
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ad-muted);
}
.adm-group__hint {
margin: -0.375rem 0 0.875rem;
max-width: 78ch;
font-size: 0.8125rem;
line-height: 1.5;
color: var(--text-secondary);
}
.adm-actions {
display: flex;
align-items: center;
gap: 0.75rem;
flex-wrap: wrap;
margin-top: var(--ad-group-gap);
padding-top: 1.25rem;
border-top: 1px solid var(--ad-line);
}
.adm-actions__note {
font-size: 0.8125rem;
color: var(--ad-muted);
}
/* --- Formularelemente ---------------------------------------------------- */
.admin-page .form-label {
margin-bottom: var(--ad-label-gap);
font-size: 0.8125rem;
font-weight: 600;
color: var(--text-primary);
}
.admin-page .form-text {
display: block;
margin-top: 0.3125rem;
font-size: 0.75rem;
line-height: 1.45;
}
.admin-page .form-control,
.admin-page .form-select {
min-height: 40px;
padding: 0.5rem 0.875rem;
font-size: 0.875rem;
border-radius: var(--radius-sm);
}
.admin-page .form-check-label,
.admin-page .form-check-input + label {
font-size: 0.875rem;
color: var(--text-secondary);
}
.admin-page .form-check { min-height: 1.5rem; }
.adm-checks .form-check { margin-bottom: 0.5rem; }
.adm-checks .form-check:last-child { margin-bottom: 0; }
.adm-mono {
font-family: 'SF Mono', 'Fira Code', ui-monospace, SFMono-Regular, monospace;
font-variant-numeric: tabular-nums;
}
.admin-page .btn {
min-height: 38px;
padding: 0.5rem 0.9375rem;
font-size: 0.8125rem;
font-weight: 600;
border-radius: var(--radius-sm);
}
.admin-page .btn-sm {
min-height: 30px;
padding: 0.25rem 0.5625rem;
font-size: 0.75rem;
}
/* In einer Eingabegruppe muss der Knopf exakt so hoch sein wie das Feld. */
.admin-page .input-group .btn { min-height: 40px; }
/* --- Tabellen ------------------------------------------------------------ */
.adm-tablewrap { max-height: 27rem; overflow: auto; }
.admin-page .table {
margin-bottom: 0;
font-size: 0.8125rem;
font-variant-numeric: tabular-nums;
}
.admin-page .table > thead > tr > th {
position: sticky;
top: 0;
z-index: 2;
padding: 0.625rem 0.875rem;
background: #F5F7FA;
border-bottom: 1px solid var(--ad-line-strong);
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ad-muted);
white-space: nowrap;
}
.admin-page .table > tbody > tr > td {
padding: 0.5rem 0.875rem;
border-bottom: 1px solid #F1F5F9;
vertical-align: middle;
color: var(--text-secondary);
}
.admin-page .table > tbody > tr:last-child > td { border-bottom: 0; }
.admin-page .table-striped > tbody > tr:nth-of-type(odd) > td { background: #FAFBFD; }
/* Das Preis-Raster bringt eigene, sehr kompakte Zellenmasse mit. */
.admin-page .lp-table > tbody > tr > td { border-bottom-color: #F1F5F9; }
/* --- Zwei Mandanten in einem Block --------------------------------------- */
.adm-tenant-group + .adm-tenant-group { margin-top: 1.75rem; }
.adm-tenant {
display: flex;
align-items: center;
gap: 0.5rem;
margin: 0 0 0.75rem;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-secondary);
}
.adm-tenant__mark {
width: 3px;
height: 0.8125rem;
border-radius: 2px;
background: var(--brand-primary);
}
.adm-tenant--123 .adm-tenant__mark { background: var(--kpi-violet); }
.adm-tenant__count {
font-weight: 600;
letter-spacing: 0;
text-transform: none;
color: var(--ad-muted);
font-variant-numeric: tabular-nums;
}
/* --- Leerzustaende ------------------------------------------------------- */
.adm-empty {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.4375rem;
padding: 2.5rem 1.5rem;
text-align: center;
}
.adm-empty .bi { font-size: 1.375rem; color: #A3B0C2; }
.adm-empty__title {
font-size: 0.875rem;
font-weight: 600;
color: var(--text-secondary);
}
.adm-empty__text {
max-width: 46ch;
font-size: 0.8125rem;
line-height: 1.5;
color: var(--ad-muted);
}
/* --- Hinweis vor nicht rueckholbaren Schritten --------------------------- */
.adm-note {
display: flex;
gap: 0.75rem;
padding: 0.875rem 1rem;
border: 1px solid var(--ad-line);
border-radius: var(--radius-sm);
background: #F7F9FC;
font-size: 0.8125rem;
line-height: 1.55;
color: var(--text-secondary);
}
.adm-note .bi { flex: none; margin-top: 0.125rem; font-size: 0.9375rem; color: #8695A9; }
.adm-note strong { color: var(--text-primary); font-weight: 600; }
.adm-note--danger {
border-color: #EFCACA;
background: #FEF7F7;
color: #7F1D1D;
}
.adm-note--danger .bi { color: var(--danger-accent); }
.adm-note--danger strong { color: #7F1D1D; }
/* --- Job-Kacheln --------------------------------------------------------- */
.adm-jobs {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
gap: 0.875rem;
}
.adm-job {
padding: 0.875rem 1rem;
background: var(--bg-card);
border: 1px solid var(--ad-line);
border-radius: var(--radius-sm);
}
.adm-job__top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
margin-bottom: 0.625rem;
}
.adm-job__name {
display: flex;
align-items: center;
gap: 0.4375rem;
min-width: 0;
font-size: 0.8125rem;
font-weight: 600;
color: var(--text-primary);
}
.adm-job__name span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.adm-job__state {
flex: none;
padding: 0.1875rem 0.4375rem;
border-radius: var(--radius-xs);
font-size: 0.625rem;
font-weight: 700;
letter-spacing: 0.07em;
text-transform: uppercase;
white-space: nowrap;
background: #EEF2F7;
color: var(--text-secondary);
}
.adm-job--running .adm-job__state { background: var(--info-bg); color: var(--info-text); }
.adm-job--completed .adm-job__state { background: var(--success-bg); color: var(--success-text); }
.adm-job--failed .adm-job__state { background: var(--danger-bg); color: var(--danger-text); }
.adm-job__bar {
height: 4px;
margin-bottom: 0.625rem;
border-radius: 999px;
background: #EDF1F6;
overflow: hidden;
}
.adm-job__fill {
height: 100%;
border-radius: 999px;
background: #C3CDDB;
/* width statt transform: der Balken traegt ein Streifenmuster, das ein
scaleX verzerren wuerde. Hoechstens sechs Balken, Aktualisierung alle
fuenf Sekunden — das Layout-Reflow faellt nicht ins Gewicht. */
transition: width var(--transition-slow);
}
.adm-job--running .adm-job__fill { background: var(--brand-primary-light); }
.adm-job--completed .adm-job__fill { background: var(--success-accent); }
.adm-job--failed .adm-job__fill { background: var(--danger-accent); }
.adm-job--running .adm-job__fill {
background-image: linear-gradient(90deg,
rgba(255, 255, 255, 0.38) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, 0.38) 50%,
rgba(255, 255, 255, 0.38) 75%, transparent 75%);
background-size: 1rem 1rem;
animation: adm-stripe 1s linear infinite;
}
@keyframes adm-stripe { to { background-position: 1rem 0; } }
.adm-job__msg {
margin: 0 0 0.5rem;
font-size: 0.78125rem;
line-height: 1.45;
color: var(--text-secondary);
overflow-wrap: anywhere;
}
.adm-job__meta {
display: flex;
gap: 1rem;
font-size: 0.6875rem;
color: var(--ad-muted);
font-variant-numeric: tabular-nums;
}
.adm-job__meta span { white-space: nowrap; }
/* --- Live-Log ------------------------------------------------------------ */
.adm-log {
height: clamp(20rem, 54vh, 40rem);
margin: 0;
padding: 1rem 1.125rem;
overflow: auto;
background: #0B1220;
color: #CBD5E1;
font-family: 'SF Mono', 'Fira Code', ui-monospace, SFMono-Regular, monospace;
font-size: 0.78125rem;
line-height: 1.6;
white-space: pre-wrap;
overflow-wrap: anywhere;
tab-size: 2;
scrollbar-color: #2A3A55 transparent;
}
.adm-log::-webkit-scrollbar { width: 10px; height: 10px; }
.adm-log::-webkit-scrollbar-track { background: transparent; }
.adm-log::-webkit-scrollbar-thumb {
background: #2A3A55;
border: 2px solid #0B1220;
border-radius: 999px;
}
.adm-log::-webkit-scrollbar-thumb:hover { background: #3C5077; }
.adm-log::selection { background: rgba(59, 130, 246, 0.4); color: #FFFFFF; }
/* --- Bewegung nur, wo sie Zustand meldet -------------------------------- */
@media (prefers-reduced-motion: reduce) {
.admin-page *,
.admin-page *::before,
.admin-page *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
}
}
/* --- Anpassung an Breite und Eingabeart --------------------------------- */
@media (hover: none) {
.adm-rail__item { min-height: 2.75rem; }
}
@media (max-width: 1100px) {
.admin-page__shell {
grid-template-columns: minmax(0, 1fr);
gap: 1.5rem;
}
.adm-rail {
position: static;
flex-direction: row;
gap: 1.25rem;
padding-bottom: 0.75rem;
overflow-x: auto;
border-bottom: 1px solid var(--ad-line);
scrollbar-width: thin;
}
.adm-rail__section { flex: none; }
.adm-rail__items { flex-direction: row; gap: 0.25rem; }
.adm-rail__item { white-space: nowrap; }
.adm-rail__section--eingriffe {
padding-top: 0;
padding-left: 1.25rem;
border-top: 0;
border-left: 1px solid var(--ad-line);
}
}
@media (max-width: 640px) {
.admin-page { padding: 1.25rem 1rem 3rem; }
.admin-page__title { font-size: 1.3125rem; }
.adm-block__head { padding: 0.875rem 1.125rem; }
.adm-block__body { padding: 1.125rem; }
.adm-block__actions { margin-left: 0; }
.adm-jobs { grid-template-columns: minmax(0, 1fr); }
}
/* --- Administration: Nachbesserungen aus der Sichtpruefung ---------------- */
/* Die Job-Zeitstempel wurden bei schmalen Kacheln abgeschnitten. */
.adm-job__meta {
flex-wrap: wrap;
gap: 0.25rem 1rem;
}
/* Traegt ein Block nur die Aktionszeile, gibt es nichts abzutrennen. */
.adm-block__body > .adm-actions:only-child {
margin-top: 0;
padding-top: 0;
border-top: 0;
}
/* Der Auswahlteil des Bearbeiten-Formulars braucht Luft zur ersten Feldgruppe. */
#admin-edit-form-wrapper { margin-top: var(--ad-group-gap); }
/* „Noch nicht geladen" ist kein Leerzustand, sondern eine Zwischenmeldung —
eine Zeile genuegt. */
.adm-empty--compact {
flex-direction: row;
align-items: center;
justify-content: flex-start;
gap: 0.5rem;
padding: 0.9375rem 0;
text-align: left;
}
.adm-empty--compact .bi { font-size: 1rem; }
.adm-empty--compact .adm-empty__title { font-weight: 500; color: var(--ad-muted); }
.adm-empty--compact .adm-empty__text { max-width: none; }
/* dcc.Dropdown baut auf react-select v1 auf und ist ohne Zutun 8 px hoeher
als dbc.Input — in einer Zeile nebeneinander faellt das sofort auf. */
.admin-page .Select-control {
/* Die globale Regel legt 0.6rem/1rem Innenabstand auf ein display:table —
dort wirkt height nur als Mindestmass, also wuchs das Feld auf 57 px. */
padding: 0;
min-height: 40px;
height: 40px;
border: 1px solid #E5E7EB;
border-radius: var(--radius-sm);
}
.admin-page .Select-control .Select-value,
.admin-page .Select-control .Select-placeholder {
line-height: 38px;
padding-left: 0.875rem;
padding-right: 2.25rem;
}
.admin-page .Select-arrow-zone { padding-right: 0.625rem; }
.admin-page .Select-clear-zone { padding-right: 0.25rem; }
.admin-page .Select-control .Select-input { height: 38px; }
.admin-page .Select-control .Select-input > input {
height: 38px;
padding: 0 0 0 0.875rem;
line-height: 38px;
}
.admin-page .Select-placeholder { color: var(--ad-muted); }
.admin-page .is-focused:not(.is-open) > .Select-control {
border-color: var(--brand-primary-light);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
/* Mehrfachauswahl darf wachsen. */
.admin-page .Select--multi .Select-control { height: auto; min-height: 40px; }
.admin-page .Select--multi .Select-multi-value-wrapper { padding: 3px 0 3px 0.4rem; }
/* Gesperrte Knoepfe sollen lesbar bleiben, statt nur blass zu werden. */
.admin-page .btn:disabled,
.admin-page .btn.disabled {
opacity: 1;
background: #EEF2F7;
border-color: #E2E8F0;
color: var(--ad-muted);
box-shadow: none;
}
/* Ruhiger Inline-Hinweis — frueher eine helle Alert-Box, die wie ein
zweites Eingabefeld aussah. */
.adm-hint {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.8125rem;
color: var(--ad-muted);
}
.adm-hint .bi { font-size: 0.875rem; }
/* Kontextstreifen ueber der Detailtabelle einer Preisliste. */
.adm-context {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem 1.25rem;
flex-wrap: wrap;
padding: 0.875rem 1.125rem;
background: var(--ad-head-bg);
border: 1px solid var(--ad-line);
border-radius: var(--radius-sm);
}
.adm-context__name {
display: flex;
align-items: baseline;
gap: 0.5rem;
font-size: 0.9375rem;
font-weight: 600;
color: var(--text-primary);
}
.adm-context__name .adm-mono { font-size: 0.875rem; }
.adm-context__sub { font-weight: 500; color: var(--text-secondary); }
.adm-context__facts {
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
font-size: 0.75rem;
}
.adm-fact {
padding: 0.1875rem 0.5rem;
border-radius: var(--radius-xs);
background: #EEF2F7;
color: var(--text-secondary);
font-weight: 600;
white-space: nowrap;
}
.adm-fact--ok { background: var(--success-bg); color: var(--success-text); }
.adm-fact--warn { background: var(--warning-bg); color: var(--warning-text); }
/* Sammelleiste fuer ungespeicherte Preisaenderungen. Klebt unter der Navi,
weil hier Geld auf dem Spiel steht. */
.adm-pending {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem 1.25rem;
flex-wrap: wrap;
padding: 0.75rem 1.125rem;
border: 1px solid var(--warning-accent);
border-radius: var(--radius-sm);
background: #FFFBEB;
box-shadow: var(--shadow-md);
}
.adm-pending__text {
display: flex;
align-items: baseline;
gap: 0.5rem;
flex-wrap: wrap;
min-width: 0;
}
.adm-pending__count {
font-size: 0.875rem;
font-weight: 700;
color: var(--warning-text);
}
.adm-pending__cells {
font-size: 0.75rem;
color: #A16207;
overflow-wrap: anywhere;
}
.adm-pending__actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
/* Trefferliste der Positionssuche */
.adm-results__meta {
margin: 0 0 0.75rem;
font-size: 0.75rem;
color: var(--ad-muted);
}
.adm-cat + .adm-cat { margin-top: 1.25rem; }
.adm-cat__title {
margin: 0 0 0.5rem;
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ad-muted);
}
/* Ausklappbereich in einem randlosen Block */
.adm-collapse-pad { padding: 1.5rem; }
.adm-collapse-pad:empty { padding: 0; }
@media (max-width: 640px) {
.adm-collapse-pad { padding: 1.125rem; }
}
/* Senkrechte Folge gleichrangiger Elemente in einem Block. */
.adm-stack {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1rem;
}
.adm-stack > * { max-width: 100%; }
/* =============================================================================
PREISRASTER — Kreuztabellen, Reiter, Abweichungsansicht
============================================================================= */
/* --- Reiterleiste im Blockkopf ------------------------------------------- */
.admin-page .adm-block__head--tabs {
align-items: center;
padding: 0.5rem 0.75rem;
gap: 0.5rem 1rem;
}
.adm-tabs {
display: flex;
align-items: center;
gap: 0.25rem;
flex-wrap: wrap;
min-width: 0;
}
.adm-tabs__title {
padding: 0 0.5rem;
font-size: 0.9375rem;
font-weight: 600;
color: var(--text-primary);
}
.adm-tab {
display: inline-flex;
align-items: center;
gap: 0.4375rem;
min-height: 2rem;
padding: 0.375rem 0.6875rem;
border: 1px solid transparent;
border-radius: var(--radius-sm);
background: transparent;
font-size: 0.8125rem;
font-weight: 600;
line-height: 1;
color: var(--text-secondary);
cursor: pointer;
transition: background var(--transition-fast), color var(--transition-fast),
border-color var(--transition-fast);
}
.adm-tab .bi { font-size: 0.875rem; color: #8695A9; }
.adm-tab:hover { background: var(--bg-hover); color: var(--text-primary); }
.adm-tab.is-active {
background: var(--bg-card);
border-color: var(--ad-line-strong);
color: var(--brand-primary);
box-shadow: var(--shadow-xs);
}
.adm-tab.is-active .bi { color: var(--brand-primary); }
.adm-tab__count {
padding: 0.0625rem 0.3125rem;
border-radius: var(--radius-xs);
background: #E8ECF2;
font-size: 0.6875rem;
font-weight: 700;
color: var(--ad-muted);
font-variant-numeric: tabular-nums;
}
.adm-tab.is-active .adm-tab__count {
background: var(--bg-active);
color: var(--brand-primary);
}
/* --- Filterzeile ---------------------------------------------------------- */
.adm-filterbar {
display: flex;
align-items: center;
gap: 0.75rem 1.25rem;
flex-wrap: wrap;
margin-bottom: 1.25rem;
}
.adm-filterbar .form-control { max-width: 30rem; flex: 1 1 20rem; }
.adm-filterbar__flags {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.adm-filterbar__flags .form-check { margin: 0; }
.adm-filterbar__flags .form-check-input:disabled + label,
.adm-filterbar__flags .form-check-input[disabled] + label {
color: #A3B0C2;
cursor: not-allowed;
}
/* --- Untertitel über einer Tabelle --------------------------------------- */
.adm-sub {
display: flex;
align-items: baseline;
gap: 0.625rem;
flex-wrap: wrap;
margin-bottom: 0.625rem;
}
.adm-sub__title {
margin: 0;
font-size: 0.8125rem;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--text-secondary);
}
.adm-sub__title--list {
display: flex;
align-items: center;
gap: 0.5rem;
margin: 0 0 0.5rem;
padding-bottom: 0.375rem;
border-bottom: 1px solid var(--ad-line);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-secondary);
}
.adm-sub__meta {
font-size: 0.75rem;
color: var(--ad-muted);
font-variant-numeric: tabular-nums;
}
.adm-matrixblock + .adm-matrixblock,
.adm-matrixblock + .adm-listen,
.adm-areabody > * + * { margin-top: 2rem; }
/* --- Kreuztabelle --------------------------------------------------------- */
.adm-matrix__scroll {
overflow: auto;
border: 1px solid var(--ad-line);
border-radius: var(--radius-sm);
background: var(--bg-card);
}
.adm-matrix__scroll:focus-visible {
outline: 2px solid var(--brand-primary);
outline-offset: 1px;
}
.admin-page table.adm-matrix {
border-collapse: separate;
border-spacing: 0;
margin: 0;
font-variant-numeric: tabular-nums;
}
/* Kopfzeile klebt oben, Zielspalte klebt links, die Ecke über beidem. */
.admin-page .adm-matrix thead th {
position: sticky;
top: 0;
z-index: 2;
padding: 0.5rem 0.5rem;
background: #F5F7FA;
border-bottom: 1px solid var(--ad-line-strong);
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.02em;
text-transform: none;
color: var(--ad-muted);
white-space: nowrap;
text-align: right;
}
.admin-page .adm-matrix thead th.adm-matrix__corner {
left: 0;
z-index: 4;
text-align: left;
border-right: 1px solid var(--ad-line-strong);
min-width: 11.5rem;
}
.adm-matrix__corner-label::after {
content: " · Preise in €";
font-weight: 600;
color: #A3B0C2;
}
.admin-page .adm-matrix th.adm-matrix__zeile,
.admin-page .adm-matrix thead th.adm-matrix__corner {
box-shadow: 6px 0 6px -6px rgba(15, 23, 42, 0.16);
}
.admin-page .adm-matrix th.adm-matrix__zeile {
position: sticky;
left: 0;
z-index: 1;
padding: 0 0.75rem;
background: var(--bg-card);
border-right: 1px solid var(--ad-line-strong);
border-bottom: 1px solid #F1F5F9;
font-size: 0.8125rem;
font-weight: 600;
text-align: left;
white-space: nowrap;
color: var(--text-primary);
}
.admin-page .adm-matrix td {
padding: 0;
border-bottom: 1px solid #F1F5F9;
text-align: right;
}
.admin-page .adm-matrix tbody tr:last-child > * { border-bottom: 0; }
.admin-page .adm-matrix tbody tr:hover th.adm-matrix__zeile { background: #F7F9FC; }
.admin-page .adm-matrix tbody tr:hover td { background: #FBFCFE; }
.adm-matrix__leer { background: repeating-linear-gradient(
-45deg, transparent, transparent 4px, #F4F6F9 4px, #F4F6F9 5px); }
/* --- Preiszelle ----------------------------------------------------------- */
.adm-price {
display: block;
width: 100%;
min-height: 2rem;
padding: 0.375rem 0.5rem;
border: 0;
background: transparent;
font: inherit;
font-size: 0.78125rem;
font-weight: 600;
font-variant-numeric: tabular-nums;
line-height: 1.2;
text-align: right;
white-space: nowrap;
color: var(--text-primary);
cursor: pointer;
transition: background var(--transition-fast);
}
.adm-price:hover { background: var(--bg-active); }
.adm-price:focus-visible {
outline: 2px solid var(--brand-primary);
outline-offset: -2px;
border-radius: var(--radius-xs);
}
.adm-price--missing { color: #A3B0C2; font-weight: 500; }
/* Weicht vom Standard ab — ein Punkt statt eines eingefärbten Feldes, damit
die Zahl selbst lesbar bleibt. */
.adm-price--dev {
color: var(--brand-primary);
background: rgba(30, 64, 175, 0.05);
}
.adm-price--dev::before {
content: "";
display: inline-block;
width: 4px;
height: 4px;
margin-right: 0.3125rem;
margin-bottom: 0.125rem;
border-radius: 50%;
background: var(--brand-primary);
vertical-align: middle;
}
.adm-price--pending {
background: #FFFBEB;
color: var(--warning-text);
}
.adm-price--pending::after {
content: " *";
font-weight: 700;
}
.admin-page .adm-price-input {
height: 2rem;
min-height: 2rem;
padding: 0.125rem 0.375rem;
border-radius: var(--radius-xs);
font-size: 0.78125rem;
font-weight: 600;
font-variant-numeric: tabular-nums;
text-align: right;
min-width: 6rem;
}
/* --- Positionslisten (Leistungen) ---------------------------------------- */
.adm-listen {
column-count: 2;
column-gap: 2.75rem;
}
@media (min-width: 1500px) { .adm-listen { column-count: 3; } }
@media (max-width: 900px) { .adm-listen { column-count: 1; } }
.adm-listblock {
break-inside: avoid;
page-break-inside: avoid;
margin-bottom: 1.75rem;
}
.admin-page table.adm-liste {
width: 100%;
margin: 0;
font-variant-numeric: tabular-nums;
}
.admin-page .adm-liste td {
padding: 0.25rem 0.5rem;
border-bottom: 1px solid #F1F5F9;
vertical-align: middle;
font-size: 0.8125rem;
color: var(--text-secondary);
}
.admin-page .adm-liste tr:last-child td { border-bottom: 0; }
.admin-page .adm-liste tr:hover td { background: #FBFCFE; }
.adm-liste__ref {
width: 1%;
white-space: nowrap;
font-size: 0.6875rem !important;
color: var(--ad-muted) !important;
}
.adm-liste__text { line-height: 1.35; padding-right: 1.25rem !important; }
.adm-liste__preis { width: 1%; padding: 0 !important; }
.adm-liste__preis .adm-price { min-width: 7rem; }
/* --- Trefferliste und Abweichungen --------------------------------------- */
.admin-page .adm-treffer td,
.admin-page .adm-delta td { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.adm-treffer__bereich {
width: 1%;
white-space: nowrap;
font-weight: 600;
color: var(--ad-muted) !important;
}
.adm-treffer__kat {
width: 1%;
white-space: nowrap;
font-weight: 600;
color: var(--text-primary) !important;
}
.adm-delta__std {
width: 1%;
white-space: nowrap;
text-align: right;
font-variant-numeric: tabular-nums;
color: var(--ad-muted) !important;
}
.adm-delta__diff {
width: 1%;
white-space: nowrap;
text-align: right;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.adm-delta__diff.is-down { color: var(--success-text) !important; }
.adm-delta__diff.is-up { color: var(--danger-text) !important; }
.adm-delta__diff.is-neu { color: var(--warning-text) !important; }
@media (max-width: 900px) {
.admin-page .adm-block__head--tabs { padding: 0.5rem 0.625rem; }
.adm-tab { padding: 0.375rem 0.5rem; }
.adm-matrix__scroll { max-height: 26rem; }
}
/* Zahl neben einem Gruppentitel in den Leistungen */
.adm-sub__zahl {
margin-left: auto;
padding: 0.0625rem 0.3125rem;
border-radius: var(--radius-xs);
background: #EEF2F7;
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0;
color: var(--ad-muted);
font-variant-numeric: tabular-nums;
}
/* =============================================================================
EXTERNE RETOUREN (/app/debitoren/retouren-extern)
Eine Prüfliste aus Fotopaaren. Die Fotos sind der Inhalt — sie bekommen
Platz, alles andere ist eine Zeile. Bewusst OHNE .glass-card/.custom-card:
`.glass-card.border-0.h-100 { min-height: 280px }` (Home-KPI-Regel) plus
doppeltes Innenpadding über `.card` und `.glass-card .card-body` hat schon
einmal eine Liste auf 21.000 px getrieben.
============================================================================= */
.rex-page { max-width: 1180px; }
.rex-head { margin-bottom: var(--space-md); }
.rex-titel {
font-size: 1.375rem;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--text-primary);
margin: 0 0 0.25rem 0;
}
.rex-lede {
font-size: 0.8125rem;
color: var(--text-secondary);
max-width: 62ch;
margin: 0;
}
.rex-subhead {
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-secondary);
margin: var(--space-md) 0 0.375rem;
}
.rex-hint {
font-size: 0.75rem;
color: var(--text-secondary);
max-width: 72ch;
margin: 0.5rem 0 var(--space-md);
}
/* --- Kennzahlen ----------------------------------------------------------- */
.rex-kpis {
display: flex;
flex-wrap: wrap;
gap: 0;
background: var(--bg-card);
border: var(--border-subtle);
border-radius: var(--radius-sm);
box-shadow: var(--shadow-xs);
padding: 0.625rem 0;
}
.rex-kpi {
padding: 0 1.125rem;
border-left: 1px solid var(--bg-hover);
white-space: nowrap;
}
.rex-kpi:first-child { border-left: none; }
.rex-kpi-wert {
font-family: 'Fira Code', 'SF Mono', monospace;
font-variant-numeric: tabular-nums slashed-zero;
font-size: 1.0625rem;
font-weight: 600;
line-height: 1.2;
letter-spacing: -0.02em;
color: var(--text-primary);
}
.rex-kpi-label {
font-size: 0.6875rem;
font-weight: 500;
color: var(--text-secondary);
}
.rex-kpi--alert .rex-kpi-wert { color: var(--danger-text); }
.rex-kpi--good .rex-kpi-wert { color: var(--success-text); }
/* --- Filter --------------------------------------------------------------- */
.rex-filter {
display: flex;
align-items: center;
gap: var(--space-sm);
margin: var(--space-md) 0 var(--space-sm);
}
.rex-select { min-width: 16rem; }
/* --- Zeile ---------------------------------------------------------------- */
.rex-item {
background: var(--bg-card);
border: var(--border-subtle);
border-radius: var(--radius-sm);
margin-bottom: 0.375rem;
}
/* Ungeprüftes hebt sich ab — es ist das Einzige, was Arbeit bedeutet. */
.rex-item--offen { border-left: 3px solid var(--brand-primary); }
.rex-summary {
display: flex;
align-items: center;
gap: 0.75rem;
min-height: var(--table-row-height);
padding: 0 0.875rem;
cursor: pointer;
list-style: none;
font-size: 0.8125rem;
}
.rex-summary::-webkit-details-marker { display: none; }
.rex-summary:hover { background: var(--bg-hover); }
.rex-chevron {
font-size: 0.75rem;
color: var(--text-secondary);
transition: transform var(--transition-fast);
}
.rex-item[open] > .rex-summary .rex-chevron { transform: rotate(90deg); }
.rex-datum,
.rex-llm,
.rex-betrag {
font-family: 'Fira Code', 'SF Mono', monospace;
font-variant-numeric: tabular-nums slashed-zero;
}
.rex-datum { color: var(--text-primary); }
.rex-id { color: var(--text-secondary); font-size: 0.75rem; }
.rex-llm { color: var(--text-secondary); }
.rex-einig { font-weight: 700; color: var(--success-text); }
.rex-einig--nein { color: var(--danger-text); }
.rex-artikel { color: var(--text-primary); }
/* Der Betrag steht rechts und trägt den Rest der Zeile vor sich her. */
.rex-betrag {
margin-left: auto;
font-weight: 600;
color: var(--text-primary);
}
.rex-badge {
font-size: 0.6875rem;
font-weight: 600;
padding: 0.1rem 0.4rem;
border-radius: 0.25rem;
background: var(--bg-hover);
color: var(--text-secondary);
}
.rex-badge--ok { background: var(--success-bg); color: var(--success-text); }
.rex-badge--warn { background: var(--warning-bg); color: var(--warning-text); }
.rex-badge--err { background: var(--danger-bg); color: var(--danger-text); }
.rex-status {
font-size: 0.6875rem;
font-weight: 600;
min-width: 5.5rem;
text-align: right;
color: var(--text-secondary);
}
.rex-status--bestaetigt { color: var(--success-text); }
.rex-status--verworfen { color: var(--danger-text); }
/* --- Aufgeklappt ---------------------------------------------------------- */
.rex-body {
padding: 0.25rem 0.875rem 0.875rem;
border-top: 1px solid var(--bg-hover);
}
.rex-fotos {
display: flex;
flex-wrap: wrap;
gap: var(--space-sm);
margin: var(--space-sm) 0;
}
.rex-foto {
display: block;
flex: 1 1 320px;
max-width: 480px;
border-radius: var(--radius-sm);
overflow: hidden;
background: var(--bg-hover);
}
.rex-foto-img {
display: block;
width: 100%;
height: auto;
max-height: 420px;
object-fit: contain;
}
.rex-foto--leer {
display: flex;
align-items: center;
justify-content: center;
min-height: 120px;
font-size: 0.75rem;
color: var(--text-secondary);
}
.rex-feld { font-size: 0.8125rem; margin: 0.375rem 0; }
.rex-feld-label {
font-size: 0.75rem;
font-weight: 600;
color: var(--text-secondary);
}
.rex-mini { margin: 0.375rem 0; }
.rex-mini-summary {
font-size: 0.75rem;
color: var(--text-secondary);
cursor: pointer;
}
.rex-begruendung {
font-size: 0.75rem;
line-height: 1.5;
white-space: pre-wrap;
background: var(--bg-hover);
border-radius: var(--radius-sm);
padding: 0.625rem 0.75rem;
margin: 0.375rem 0 0;
max-height: 22rem;
overflow-y: auto;
}
.rex-metazeile {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin: 0.5rem 0;
font-size: 0.75rem;
}
.rex-meta { color: var(--text-secondary); }
.rex-meta--beleg { color: var(--success-text); font-weight: 600; }
.rex-link { color: var(--brand-primary); }
.rex-actions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--space-sm);
margin-top: 0.625rem;
padding-top: 0.625rem;
border-top: 1px solid var(--bg-hover);
}
.rex-anzahl-input { max-width: 6rem; }
.rex-actions .form-control { max-width: 22rem; }
@media (max-width: 768px) {
.rex-summary { flex-wrap: wrap; min-height: 0; padding: 0.5rem 0.75rem; }
.rex-betrag { margin-left: 0; }
.rex-status { min-width: 0; text-align: left; }
.rex-foto { flex: 1 1 100%; max-width: 100%; }
}
/* Job, dessen Worker ein Neustart erwischt hat — er meldet sich nicht mehr. */
.adm-job--stale .adm-job__state { background: var(--warning-bg); color: var(--warning-text); }
.adm-job--stale .adm-job__fill { background: var(--warning-accent); }
.adm-job--stale .adm-job__name .bi { color: var(--warning-accent); }
/* Jobs, die sich seit über einer Woche nicht gemeldet haben — Fussnote, keine Kachel. */
.adm-jobs__fussnote {
display: flex;
align-items: center;
margin: 1rem 0 0;
padding-top: 0.875rem;
border-top: 1px solid var(--ad-line);
font-size: 0.78125rem;
color: var(--ad-muted);
}
.adm-jobs__fussnote .bi { font-size: 0.875rem; }
/* Herkunft der Zahl und Fotoanzahl in der Zeilenkopfzeile.
„abgelesen" (Stückzahl stand auf einem Zettel) ist ein grundlegend anderer
Vorgang als „gezählt" — die Unterscheidung trägt die halbe Kalibrierung. */
.rex-quelle {
font-size: 0.6875rem;
color: var(--text-secondary);
font-style: italic;
}
.rex-bildzahl {
font-size: 0.6875rem;
color: var(--text-secondary);
font-variant-numeric: tabular-nums;
}
/* =============================================================================
RECHNUNGSERSTELLUNG + BELEGAUSGABE (/app/debitoren/…) — NEU 2026-09-01
Aus dem UX-Audit: EFF/wiki/analysen/2026-09-01-rechnungserstellung-ux-audit.md
Bewusst OHNE .card / .glass-card / .custom-card:
`.card { padding: var(--card-padding) }` (Zeile 198) legt sich ZUSAETZLICH
auf das Padding von .card-body — 2,5 rem pro Karte. `.custom-card` und
`.clickable-card` waren ohnehin in keiner CSS-Datei definiert; die Karten
dieser Seite waren also nackte Bootstrap-Karten mit doppeltem Rand.
Vorbild fuer den eigenen Namensraum: der `rex-*`-Block weiter oben.
============================================================================= */
.re-page {
--re-lauf-breite: 300px;
--re-zeile: 34px;
max-width: 1500px;
padding-bottom: 2rem;
}
/* --- Kopf ---------------------------------------------------------------- */
.re-head { margin-bottom: var(--space-lg); }
.re-titel {
font-size: 1.5rem;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--text-primary);
margin: 0 0 0.25rem 0;
}
.re-lede {
color: var(--text-secondary);
font-size: 0.9375rem;
margin: 0;
max-width: 62ch;
}
/* --- Steuerleiste -------------------------------------------------------- */
.re-steuerung {
display: grid;
grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
gap: var(--space-lg);
align-items: start;
padding: var(--space-md) var(--space-lg);
background: var(--bg-card);
border: var(--border-subtle);
border-radius: var(--radius-md);
box-shadow: var(--shadow-xs);
margin-bottom: var(--space-md);
}
.re-feld-label {
display: block;
font-size: 0.6875rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-secondary);
margin-bottom: 0.4rem;
}
.re-zeitraum-zeile {
display: flex;
flex-wrap: wrap;
gap: var(--space-sm);
align-items: center;
}
.re-perioden { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.re-per-btn {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1px;
padding: 0.35rem 0.7rem;
background: var(--bg-card);
border: var(--border-subtle);
border-radius: var(--radius-sm);
cursor: pointer;
transition: all var(--transition-fast);
text-align: left;
}
.re-per-btn:hover { background: var(--bg-hover); border-color: #CBD5E1; }
.re-per-btn:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
.re-per-label {
font-size: 0.8125rem;
font-weight: 600;
color: var(--text-primary);
line-height: 1.2;
}
.re-per-hint {
font-size: 0.625rem;
color: var(--text-secondary);
line-height: 1.2;
}
/* „Basis" aendert die Rechenart, nicht den Zeitraum — deshalb abgesetzt. */
.re-per-btn--modus {
border-style: dashed;
border-color: #CBD5E1;
margin-left: 0.4rem;
}
.re-schalter { margin-top: 0.5rem; font-size: 0.8125rem; }
/* --- Arbeitsflaeche: Lauf | Beleg ---------------------------------------- */
.re-arbeitsflaeche {
display: grid;
grid-template-columns: var(--re-lauf-breite) minmax(0, 1fr);
gap: var(--space-md);
align-items: start;
}
/* --- Zone 1: der Lauf ---------------------------------------------------- */
.re-lauf {
position: sticky;
top: 84px;
max-height: calc(100vh - 110px);
display: flex;
flex-direction: column;
background: var(--bg-card);
border: var(--border-subtle);
border-radius: var(--radius-md);
box-shadow: var(--shadow-xs);
overflow: hidden;
}
.re-lauf-kopf {
padding: 0.75rem var(--space-md);
border-bottom: var(--border-subtle);
background: linear-gradient(180deg, #F8FAFC 0%, #F1F5F9 100%);
}
.re-lauf-titel { display: flex; flex-direction: column; gap: 1px; }
.re-lauf-kind {
font-size: 0.9375rem;
font-weight: 700;
color: var(--text-primary);
}
.re-lauf-zeitraum { font-size: 0.75rem; color: var(--text-secondary); }
.re-lauf-zahl { margin-top: 0.5rem; font-size: 0.875rem; color: var(--text-primary); }
.re-lauf-zahl-label { color: var(--text-secondary); }
.re-fortschritt {
height: 6px;
background: #E2E8F0;
border-radius: var(--radius-pill);
overflow: hidden;
margin: 0.35rem 0 0.3rem;
}
.re-fortschritt-fuell {
height: 100%;
background: var(--success-accent);
border-radius: var(--radius-pill);
transition: width var(--transition-base);
}
.re-lauf-offen { font-size: 0.75rem; font-weight: 600; color: var(--danger-text); }
.re-lauf-offen.is-fertig { color: var(--success-text); }
.re-lauf-liste { overflow-y: auto; flex: 1; padding: 0.25rem; }
.re-lauf-gruppe {
font-size: 0.625rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-secondary);
padding: 0.5rem 0.6rem 0.25rem;
}
/* Echte Knoepfe, keine anklickbaren Divs: Fokus und Tastatur kommen mit. */
.re-lauf-row {
display: flex;
align-items: center;
gap: 0.5rem;
width: 100%;
min-height: var(--re-zeile);
padding: 0.3rem 0.6rem;
background: transparent;
border: none;
border-radius: var(--radius-xs);
cursor: pointer;
text-align: left;
font-size: 0.8125rem;
color: var(--text-primary);
transition: background-color var(--transition-fast);
}
.re-lauf-row:hover { background: var(--bg-hover); }
.re-lauf-row:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: -2px; }
.re-lauf-row.is-aktiv {
background: var(--bg-active);
font-weight: 600;
box-shadow: inset 3px 0 0 var(--brand-primary);
}
.re-lauf-row.is-gesendet .re-lauf-name { color: var(--text-secondary); }
.re-lauf-name {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.re-lauf-betrag {
font-size: 0.75rem;
color: var(--text-secondary);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.re-punkt {
width: 8px;
height: 8px;
border-radius: 50%;
flex: 0 0 8px;
background: var(--warning-accent);
}
.re-punkt--gesendet { background: var(--success-accent); }
.re-punkt--offen { background: var(--warning-accent); }
.re-punkt--blockiert { background: var(--danger-accent); }
.re-lauf-hinweis { padding: 0.4rem var(--space-md); border-top: var(--border-subtle); }
.re-lauf-note { color: var(--text-secondary); font-size: 0.6875rem; }
.re-lauf-leer { padding: var(--space-md); color: var(--text-secondary); font-size: 0.8125rem; }
/* --- Zone 2: der Beleg --------------------------------------------------- */
.re-beleg {
background: var(--bg-card);
border: var(--border-subtle);
border-radius: var(--radius-md);
box-shadow: var(--shadow-xs);
min-width: 0;
display: flex;
flex-direction: column;
}
.re-beleg-kopf { padding: var(--space-md) var(--space-lg) 0; }
.re-beleg-titel {
font-size: 1.125rem;
font-weight: 700;
color: var(--text-primary);
margin: 0;
display: flex;
align-items: baseline;
gap: 0.5rem;
flex-wrap: wrap;
}
.re-beleg-nummer { font-size: 0.8125rem; font-weight: 500; color: var(--text-muted); }
.re-beleg-meta {
font-size: 0.8125rem;
color: var(--text-secondary);
margin-top: 0.15rem;
display: flex;
gap: 0.4rem;
flex-wrap: wrap;
}
.re-trenner { color: var(--text-muted); }
/* Roter Pruefhaken sperrt seit 2026-09-21 den Senden-Knopf — der Grund steht
in Worten daneben, nicht nur als Farbe (Balolo/Deputy gingen am 21.09. trotz
rotem Badge raus, weil der Knopf den Haken nicht kannte). */
.re-beleg-sperre { color: var(--danger-text); font-weight: 600; }
.re-beleg-leer { color: var(--text-secondary); font-size: 0.875rem; margin: 0.4rem 0 0; }
/* Die Summe ist der eine Wert, an dem eine falsche Rechnung auffaellt —
vorher stand sie als vorletzte ZEILE unter allen Posten. */
.re-summe { padding: 0 var(--space-lg); }
.re-summe-box {
display: flex;
align-items: baseline;
gap: var(--space-md);
flex-wrap: wrap;
margin-top: var(--space-sm);
padding: 0.6rem 0.9rem;
background: var(--bg-kpi-accent);
border-radius: var(--radius-sm);
}
.re-summe-haupt { display: flex; align-items: baseline; gap: 0.5rem; }
.re-summe-label {
font-size: 0.6875rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-secondary);
}
.re-summe-wert {
font-size: 1.625rem;
font-weight: 700;
color: var(--text-primary);
font-variant-numeric: tabular-nums;
letter-spacing: -0.02em;
}
.re-vergleich {
display: flex;
align-items: baseline;
gap: 0.4rem;
font-size: 0.8125rem;
color: var(--text-secondary);
}
.re-vergleich-delta {
font-weight: 700;
font-variant-numeric: tabular-nums;
padding: 0.05rem 0.4rem;
border-radius: var(--radius-pill);
background: #E2E8F0;
color: var(--text-primary);
}
.re-vergleich-delta.is-hoch { background: var(--success-bg); color: var(--success-text); }
.re-vergleich-delta.is-tief { background: var(--warning-bg); color: var(--warning-text); }
.re-vergleich-datum { color: var(--text-muted); font-size: 0.75rem; }
/* --- Hinweise (frueher: Modal bei jeder Berechnung) ---------------------- */
.re-hinweise { padding: 0 var(--space-lg); }
.re-hinweise-box { margin-top: var(--space-sm); }
.re-hinweise-summary {
cursor: pointer;
font-size: 0.8125rem;
font-weight: 600;
color: var(--warning-text);
background: var(--warning-bg);
padding: 0.4rem 0.7rem;
border-radius: var(--radius-sm);
list-style: none;
}
.re-hinweise-summary::-webkit-details-marker { display: none; }
.re-hinweise-summary::before { content: "▸ "; }
details[open] > .re-hinweise-summary::before { content: "▾ "; }
.re-hinweise-body { padding: var(--space-sm) 0; font-size: 0.8125rem; }
/* --- Postentabelle ------------------------------------------------------- */
.re-beleg .dash-spreadsheet-container { padding: var(--space-sm) var(--space-md) 0; }
.re-beleg .dash-spreadsheet-container .dash-spreadsheet-inner td {
font-size: 0.8125rem !important;
padding: 0.4rem 0.75rem !important;
font-variant-numeric: tabular-nums;
}
.re-beleg .dash-spreadsheet-container .dash-spreadsheet-inner th {
font-size: 0.625rem !important;
padding: 0.5rem 0.75rem !important;
}
/* --- Zone 3: der Abschluss ----------------------------------------------- */
.re-aktionen {
position: sticky;
bottom: 0;
z-index: 5;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-md);
flex-wrap: wrap;
margin-top: auto;
padding: 0.6rem var(--space-lg);
background: var(--bg-card);
border-top: var(--border-subtle);
border-radius: 0 0 var(--radius-md) var(--radius-md);
box-shadow: 0 -4px 12px -6px rgba(15, 23, 42, 0.12);
}
.re-pruefungen { display: inline-flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.re-aktionen-knoepfe { display: inline-flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
/* Genau EIN gefuellter Knopf auf der Seite — und es ist der, der Geld beim
Kunden ausloest. Vorher war der CSV-Download gefuellt und das Senden nicht. */
.re-btn-primaer {
padding: 0.5rem 1.1rem;
background: var(--brand-primary);
color: var(--text-on-brand);
border: 1px solid var(--brand-primary);
border-radius: var(--radius-sm);
font-size: 0.875rem;
font-weight: 600;
cursor: pointer;
box-shadow: var(--shadow-brand);
transition: all var(--transition-fast);
}
.re-btn-primaer:hover:not(:disabled) { background: var(--brand-accent); }
.re-btn-primaer:focus-visible { outline: 2px solid var(--brand-dark); outline-offset: 2px; }
.re-btn-primaer:disabled {
background: #CBD5E1;
border-color: #CBD5E1;
color: #FFFFFF;
box-shadow: none;
cursor: not-allowed;
}
.re-btn-zweit {
padding: 0.45rem 0.9rem;
background: var(--bg-card);
color: var(--text-primary);
border: 1px solid #CBD5E1;
border-radius: var(--radius-sm);
font-size: 0.8125rem;
font-weight: 600;
cursor: pointer;
transition: all var(--transition-fast);
}
.re-btn-zweit:hover:not(:disabled) { background: var(--bg-hover); }
.re-btn-zweit:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
.re-btn-still {
padding: 0.4rem 0.7rem;
background: transparent;
color: var(--text-secondary);
border: 1px solid transparent;
border-radius: var(--radius-sm);
font-size: 0.8125rem;
cursor: pointer;
transition: all var(--transition-fast);
}
.re-btn-still:hover:not(:disabled) { background: var(--bg-hover); color: var(--text-primary); }
.re-btn-still:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
/* Gesperrt, solange eine Aktion laeuft — der Knopf bleibt lesbar, sagt aber
ueber Cursor und Daempfung, dass er gerade nicht zu haben ist. */
.re-btn-zweit:disabled,
.re-btn-still:disabled { opacity: 0.55; cursor: not-allowed; }
/* Ein-/Ausblenden per Klasse statt display:none im Inline-Style — der
ID-Waechter (scripts/check_callback_ids.py) markiert Inline-display:none
als "nur versteckten Platzhalter", ununterscheidbar von echtem toten Code. */
.is-versteckt { display: none; }
.re-quittung { padding: 0 var(--space-lg); }
.re-quittung:empty { padding: 0; }
/* --- Bestaetigung -------------------------------------------------------- */
.re-confirm-liste {
display: grid;
grid-template-columns: 8rem 1fr;
gap: 0.35rem 1rem;
margin: 0;
font-size: 0.9375rem;
}
.re-confirm-liste dt { font-weight: 600; color: var(--text-secondary); }
.re-confirm-liste dd { margin: 0; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.re-confirm-warnung { margin-top: var(--space-md); font-size: 0.875rem; }
/* --- Zone 4/5: Nachweis, Massenlauf, Werkzeuge --------------------------- */
.re-nachweis-zone { margin-top: var(--space-md); }
.re-massen, .re-werkzeuge {
margin-top: var(--space-md);
background: var(--bg-card);
border: var(--border-subtle);
border-radius: var(--radius-md);
padding: 0.6rem var(--space-lg);
}
.re-massen-titel, .re-werkzeuge-titel {
cursor: pointer;
font-weight: 700;
font-size: 0.9375rem;
color: var(--text-primary);
list-style: none;
}
.re-massen-titel::-webkit-details-marker,
.re-werkzeuge-titel::-webkit-details-marker { display: none; }
.re-massen-titel::before, .re-werkzeuge-titel::before { content: "▸ "; color: var(--text-muted); }
details[open] > .re-massen-titel::before,
details[open] > .re-werkzeuge-titel::before { content: "▾ "; }
.re-massen-body { padding-top: var(--space-sm); }
.re-massen-lede { color: var(--text-secondary); font-size: 0.8125rem; max-width: 70ch; }
/* Eigene Zeitraumwahl des Massenlaufs (Umbau 2026-09-21) — dieselbe
.re-perioden/.re-per-btn-Anatomie wie oben, eigener Abstand darunter. */
.re-massen-steuer { margin-bottom: var(--space-sm); }
.re-massen-knoepfe { display: flex; gap: 0.5rem; margin-bottom: var(--space-sm); flex-wrap: wrap; }
.re-massen-kopf { font-size: 0.875rem; margin-bottom: 0.4rem; }
.re-massen-anzahl { color: var(--text-secondary); margin-left: 0.5rem; }
.re-massen-fortschritt-text { margin: 0.3rem 0 0.6rem; font-size: 0.8125rem; color: var(--text-secondary); }
.re-massen-liste { max-height: 420px; overflow-y: auto; border: var(--border-subtle); border-radius: var(--radius-sm); }
.re-massen-liste-inner { padding: 0.2rem 0; }
.re-massen-zusammenfassung { padding: 0.4rem 0.6rem; font-size: 0.8125rem; font-weight: 600; color: var(--text-primary); border-bottom: var(--border-subtle); }
.re-massen-gruppe {
font-size: 0.625rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-secondary);
padding: 0.5rem 0.6rem 0.25rem;
}
.re-massen-eintrag { border-bottom: 1px solid #F3F4F6; }
.re-massen-eintrag:last-child { border-bottom: none; }
.re-massen-eintrag .re-massen-zeile { border-bottom: none; }
.re-massen-zeile {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.3rem 0.6rem;
font-size: 0.8125rem;
border-bottom: 1px solid #F3F4F6;
}
.re-massen-zeile:last-child { border-bottom: none; }
.re-massen-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.re-massen-status { color: var(--text-secondary); font-size: 0.75rem; }
.re-massen-betrag {
font-size: 0.75rem;
color: var(--text-secondary);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.re-massen-fuss { margin: 0.5rem 0 0; font-size: 0.8125rem; color: var(--text-secondary); }
/* Die zwei Pruefhaken je Zeile — dieselbe Aussage wie die Badges in der
Abschlussleiste (Pakete/Kartonagen). Zustand als Wort + Glyph, Farbe nur
als Verstaerkung; Tokens statt der im Audit durchgefallenen Bootstrap-Gruen. */
.re-pruef-pill {
display: inline-block;
padding: 0.05rem 0.45rem;
border-radius: var(--radius-pill);
font-size: 0.6875rem;
font-weight: 600;
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.re-pruef-pill--ok { background: var(--success-bg); color: var(--success-text); }
.re-pruef-pill--fehl { background: var(--danger-bg); color: var(--danger-text); }
/* dcc.Checklist mit einer einzigen leeren Option — Dash rendert das als
; hier auf einen einzelnen Haken
ohne Listenoptik zurechtgestutzt. */
.re-massen-checkbox { display: inline-flex; margin: 0; }
.re-massen-checkbox ul { list-style: none; margin: 0; padding: 0; display: flex; }
.re-massen-checkbox label { margin: 0; display: flex; align-items: center; cursor: pointer; }
.re-massen-checkbox input[type="checkbox"] { margin: 0; cursor: pointer; }
/* Blockiert-/Hinweis-/Fehlergrund — aufklappbarer Text statt Hover-Popover
(Audit-Befund 2026-09-01: „Popover-Inhalte als aufklappbarer Text"). */
.re-massen-grund { padding: 0 0.6rem 0.4rem 1.9rem; }
.re-massen-grund-kurz {
cursor: pointer;
font-size: 0.75rem;
color: var(--text-secondary);
list-style: none;
}
.re-massen-grund-kurz::-webkit-details-marker { display: none; }
.re-massen-grund-kurz::before { content: "▸ "; color: var(--text-muted); }
details[open] > .re-massen-grund-kurz::before { content: "▾ "; }
.re-massen-grund-kurz.re-massen-grund--fehler { color: var(--danger-text); }
.re-massen-grund-kurz.re-massen-grund--unklar { color: var(--warning-text); }
.re-massen-grund-lang { margin: 0.3rem 0 0; font-size: 0.8125rem; color: var(--text-primary); }
.re-werkzeuge-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: var(--space-md);
padding-top: var(--space-sm);
}
.re-werkzeug {
border: var(--border-subtle);
border-radius: var(--radius-sm);
padding: var(--space-sm) var(--space-md);
}
.re-werkzeug.is-ok { border-color: var(--success-accent); background: var(--success-bg); }
.re-werkzeug.is-warn { border-color: var(--danger-accent); background: var(--danger-bg); }
.re-werkzeug-btn {
background: transparent;
border: none;
padding: 0;
font-weight: 700;
font-size: 0.875rem;
color: var(--brand-primary);
cursor: pointer;
text-align: left;
}
.re-werkzeug-btn:hover { text-decoration: underline; }
.re-werkzeug-btn:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
.re-werkzeug-hinweis { font-size: 0.75rem; color: var(--text-secondary); margin: 0.2rem 0 0.4rem; }
.re-werkzeug-meldung { margin-top: var(--space-sm); }
/* --- Belegausgabe -------------------------------------------------------- */
.re-ausgabe-laden, .re-ausgabe-aktionen {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
margin-bottom: var(--space-md);
}
.re-ausgabe-aktionen { margin-top: var(--space-md); }
/* Verlauf der erzeugten Bibby-Importdateien (2026-09-21) */
.re-ausgabe-verlauf { margin-top: var(--space-lg); padding: 0 var(--space-lg); }
.re-ausgabe-verlauf > button { margin-bottom: var(--space-sm); }
/* Ladezustand (2026-09-11). Das globale CSS versteckt den Dash-Spinner
(Skeleton-Shimmer), und "An Bibby senden" holt je Rechnung PDF und
Nachweise einzeln aus easybill — zehn Sekunden ohne Rueckmeldung sahen aus
wie ein Defekt, der zweite Klick war die naheliegende Reaktion. Balken wie
im Mahnlauf (mahn-laedt-balken), hier aber linksbuendig in der
Quittungszeile, wo gleich die Antwort erscheint.
dcc.Loading legt den Spinner absolut ueber die Kinder mit height: 100 %;
ein leerer Rahmen haette keine Hoehe, deshalb die Mindesthoehen. */
.re-lade-zeile { min-height: 2.5rem; }
.re-lade-flaeche { min-height: 7rem; }
.re-laedt {
width: 100%;
display: flex;
align-items: center;
gap: var(--space-md);
padding: 0 var(--space-lg);
}
.re-laedt--flaeche {
flex-direction: column;
justify-content: center;
gap: var(--space-sm);
text-align: center;
}
.re-laedt-balken {
flex: none;
height: 3px;
width: 140px;
background: var(--bg-hover);
border-radius: 2px;
overflow: hidden;
position: relative;
}
.re-laedt-balken::after {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: 40%;
background: var(--brand-primary);
border-radius: 2px;
animation: re-schieben 1.1s ease-in-out infinite;
}
@keyframes re-schieben {
0% { transform: translateX(-100%); }
100% { transform: translateX(350%); }
}
.re-laedt-text { font-size: 0.87rem; color: var(--text-secondary); margin: 0; }
@media (prefers-reduced-motion: reduce) {
.re-laedt-balken::after { animation: none; width: 100%; opacity: 0.45; }
}
/* --- Nur fuer Screenreader ----------------------------------------------- */
.re-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;
}
/* --- dcc.Dropdown: die globale .Select-control-Regel neutralisieren ------
`.form-control, .Select-control { padding: .6rem 1rem }` blaeht das Feld auf
57 px, weil .Select-control innen ein display:table ist und `height` dort nur
als Mindestmass wirkt (gleiche Falle wie beim Adminseiten-Umbau). */
.re-page .Select-control { padding: 0 !important; height: 38px; }
.re-page .Select-control .Select-value,
.re-page .Select-control .Select-placeholder { line-height: 38px; padding-left: 0.75rem; }
.re-page .Select-input > input { padding: 0.5rem 0 0.5rem 0.75rem; }
/* --- Schmale Bildschirme ------------------------------------------------- */
@media (max-width: 1100px) {
.re-arbeitsflaeche { grid-template-columns: 1fr; }
.re-lauf { position: static; max-height: 340px; }
.re-steuerung { grid-template-columns: 1fr; }
.re-aktionen { position: static; box-shadow: none; }
}
/* =============================================================================
DEBITOREN-NAVIGATION — Gruppen statt elf gleichrangiger Eintraege
============================================================================= */
.deb-nav-gruppe {
font-size: 0.625rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--text-muted);
padding: 0.9rem 0.5rem 0.3rem;
}
.deb-nav-gruppe:first-child { padding-top: 0.3rem; }
.custom-sidebar-tabs .deb-nav-link {
display: flex;
align-items: center;
gap: 0.15rem;
padding: 0.5rem 0.75rem;
font-size: 0.875rem;
}
.deb-nav-zaehler {
margin-left: auto;
min-width: 1.35rem;
text-align: center;
font-size: 0.6875rem;
font-weight: 700;
padding: 0.05rem 0.35rem;
border-radius: var(--radius-pill);
background: var(--danger-bg);
color: var(--danger-text);
}
.custom-sidebar-tabs .nav-link.active .deb-nav-zaehler {
background: rgba(255, 255, 255, 0.9);
color: var(--brand-primary);
}
/* =============================================================================
UPS-ANALYSE (/app/debitoren/ups-neu) — NEU 2026-09-01
Aus dem UX-Audit: EFF/wiki/analysen/2026-09-01-ups-analyse-ux-audit.md
Dieselbe Sprache wie der `re-*`-Block der Rechnungserstellung, damit die
beiden Abrechnungsseiten wie ein System wirken. Bewusst OHNE `.glass-card`:
`.card` (style.css:198) und `.glass-card .card-body` (:1438) legen je 1,5 rem
Innenabstand auf dieselbe Karte — 3 rem, und der Hover-Versatz von :210 ließ
auch reine Anzeigekarten hüpfen, wodurch Hüpfen nichts mehr bedeutete.
============================================================================= */
.ups-page { max-width: 1500px; padding-bottom: 2rem; }
.ups-head { margin-bottom: var(--space-lg); }
.ups-titel {
font-size: 1.5rem;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--text-primary);
margin: 0 0 0.25rem 0;
}
.ups-lede { color: var(--text-secondary); font-size: 0.9375rem; margin: 0; max-width: 66ch; }
/* --- Zone 0: der Lauf ---------------------------------------------------- */
.ups-steuerung {
display: flex;
gap: var(--space-lg);
align-items: flex-end;
justify-content: space-between;
flex-wrap: wrap;
padding: var(--space-md) var(--space-lg);
background: var(--bg-card);
border: var(--border-subtle);
border-radius: var(--radius-md);
box-shadow: var(--shadow-xs);
}
.ups-steuer-block { min-width: 0; flex: 1 1 auto; }
.ups-steuer-aktion { flex: 0 0 auto; }
.ups-feld-label {
display: block;
font-size: 0.6875rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-secondary);
margin-bottom: 0.4rem;
}
.ups-zeitraum-zeile { display: flex; gap: var(--space-sm); align-items: center; flex-wrap: wrap; }
.ups-perioden { display: inline-flex; gap: 4px; }
.ups-per-btn {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1px;
padding: 0.35rem 0.7rem;
background: var(--bg-card);
border: var(--border-subtle);
border-radius: var(--radius-sm);
cursor: pointer;
text-align: left;
transition: all var(--transition-fast);
}
.ups-per-btn:hover { background: var(--bg-hover); border-color: #CBD5E1; }
.ups-per-btn:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
.ups-per-label { font-size: 0.8125rem; font-weight: 600; color: var(--text-primary); line-height: 1.2; }
.ups-per-hint { font-size: 0.625rem; color: var(--text-secondary); line-height: 1.2; }
.ups-feld-hinweis {
font-size: 0.75rem;
color: var(--text-secondary);
margin-top: 0.5rem;
max-width: 68ch;
}
.ups-status { margin-top: var(--space-sm); }
.ups-status:empty { margin-top: 0; }
/* Die Kopfzeile bleibt stehen — vorher verschwand der Zeitraum nach 6 s. */
.ups-lauf-kopf {
display: flex;
align-items: baseline;
gap: 0.5rem;
flex-wrap: wrap;
margin-top: var(--space-sm);
padding: 0.5rem 0.9rem;
background: var(--bg-kpi-accent);
border-radius: var(--radius-sm);
font-size: 0.9375rem;
}
.ups-lauf-kopf:empty { display: none; }
.ups-lauf-label {
font-size: 0.6875rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-secondary);
}
.ups-lauf-zeitraum { color: var(--text-primary); }
.ups-lauf-zahl { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.ups-lauf-warnung {
color: var(--danger-text);
background: var(--danger-bg);
padding: 0.1rem 0.5rem;
border-radius: var(--radius-pill);
font-size: 0.8125rem;
font-weight: 600;
}
.ups-warnungen { margin-top: var(--space-sm); }
.ups-warnungen:empty { margin-top: 0; }
.ups-warn-summary {
cursor: pointer;
font-size: 0.8125rem;
font-weight: 600;
color: var(--warning-text);
background: var(--warning-bg);
padding: 0.4rem 0.7rem;
border-radius: var(--radius-sm);
list-style: none;
}
.ups-warn-summary::-webkit-details-marker { display: none; }
.ups-warn-summary::before { content: "▸ "; }
details[open] > .ups-warn-summary::before { content: "▾ "; }
.ups-warn-liste { font-size: 0.8125rem; margin: 0.5rem 0 0; padding-left: 1.2rem; }
/* --- Zone 1 + 2: die beiden Ergebnisse ----------------------------------- */
.ups-zonen {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
gap: var(--space-md);
margin-top: var(--space-md);
align-items: start;
}
.ups-zone {
display: flex;
flex-direction: column;
background: var(--bg-card);
border: var(--border-subtle);
border-radius: var(--radius-md);
box-shadow: var(--shadow-xs);
min-width: 0;
}
.ups-zone-kopf {
padding: var(--space-md) var(--space-lg) 0;
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--space-md);
flex-wrap: wrap;
}
.ups-zone-titel { font-size: 1.0625rem; font-weight: 700; color: var(--text-primary); margin: 0; }
.ups-zone-summe { display: flex; align-items: baseline; gap: 0.6rem; }
.ups-zone-wert {
font-size: 1.625rem;
font-weight: 700;
color: var(--text-primary);
font-variant-numeric: tabular-nums;
letter-spacing: -0.02em;
}
.ups-zone-sub { font-size: 0.8125rem; color: var(--text-secondary); }
.ups-zone-inhalt { padding: var(--space-sm) var(--space-lg); flex: 1; min-width: 0; }
.ups-zone-leer { color: var(--text-secondary); font-size: 0.875rem; }
.ups-zone-fuss {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-md);
flex-wrap: wrap;
padding: 0.6rem var(--space-lg);
border-top: var(--border-subtle);
background: var(--bg-card);
border-radius: 0 0 var(--radius-md) var(--radius-md);
}
.ups-zone-hinweis { font-size: 0.75rem; color: var(--text-secondary); flex: 1 1 14rem; }
.ups-zone-hinweis-text { color: var(--text-secondary); }
.ups-zone-sperre { color: var(--danger-text); font-weight: 600; }
/* --- Kundenliste --------------------------------------------------------- */
.ups-kunden-liste { max-height: 340px; overflow-y: auto; margin-top: var(--space-sm); }
.ups-kunde-zeile {
display: flex;
align-items: baseline;
gap: 0.6rem;
padding: 0.3rem 0;
border-bottom: 1px solid #F3F4F6;
font-size: 0.8125rem;
}
.ups-kunde-zeile:last-child { border-bottom: none; }
.ups-kunde-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary); }
.ups-kunde-sdg { color: var(--text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ups-kunde-vorher { color: var(--text-muted); font-size: 0.75rem; white-space: nowrap; }
.ups-kunde-betrag { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* --- Unzugeordnete Sendungen: das eigentliche Arbeitspaket --------------- */
.ups-unb-box { margin-bottom: var(--space-sm); }
.ups-unb-summary {
cursor: pointer;
font-size: 0.875rem;
color: var(--danger-text);
background: var(--danger-bg);
padding: 0.45rem 0.7rem;
border-radius: var(--radius-sm);
list-style: none;
}
.ups-unb-summary::-webkit-details-marker { display: none; }
.ups-unb-summary::before { content: "▸ "; }
details[open] > .ups-unb-summary::before { content: "▾ "; }
.ups-unb-warnung { font-weight: 400; }
.ups-unb-status { margin-top: var(--space-sm); }
.ups-unb-status:empty { margin-top: 0; }
.ups-unb-liste { max-height: 300px; overflow-y: auto; margin-top: var(--space-sm); }
.ups-unb-zeile {
display: grid;
grid-template-columns: 9rem minmax(0, 1fr) 5.5rem 9rem 9rem auto;
gap: 0.4rem;
align-items: center;
padding: 0.3rem 0;
border-bottom: 1px solid #F3F4F6;
font-size: 0.75rem;
}
.ups-unb-tracking { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; overflow: hidden; text-overflow: ellipsis; }
.ups-unb-ref { color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ups-unb-betrag { text-align: right; font-variant-numeric: tabular-nums; }
.ups-unb-input {
width: 100%;
padding: 0.25rem 0.45rem;
font-size: 0.75rem;
border: var(--border-subtle);
border-radius: var(--radius-xs);
}
.ups-unb-input:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 1px; }
.ups-unb-hinweis { font-size: 0.75rem; color: var(--text-secondary); margin: var(--space-sm) 0 0; }
/* --- Reklamations-Belege -------------------------------------------------- */
.ups-rk-lede { font-size: 0.8125rem; color: var(--text-secondary); margin-bottom: 0.4rem; }
.ups-rk-liste { font-size: 0.8125rem; }
.ups-rk-zeile {
display: flex;
align-items: baseline;
gap: 0.6rem;
padding: 0.3rem 0;
border-bottom: 1px solid #F3F4F6;
}
.ups-rk-zeile:last-child { border-bottom: none; }
.ups-rk-tracking { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.ups-rk-karton { flex: 1; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ups-rk-betrag { font-weight: 600; font-variant-numeric: tabular-nums; }
/* --- Zone 3 + Datenbank: zugeklappt -------------------------------------- */
.ups-weitere, .ups-db {
margin-top: var(--space-md);
background: var(--bg-card);
border: var(--border-subtle);
border-radius: var(--radius-md);
padding: 0.6rem var(--space-lg);
}
.ups-weitere-titel, .ups-db-titel {
cursor: pointer;
font-weight: 700;
font-size: 0.9375rem;
color: var(--text-primary);
list-style: none;
}
.ups-weitere-titel::-webkit-details-marker,
.ups-db-titel::-webkit-details-marker { display: none; }
.ups-weitere-titel::before, .ups-db-titel::before { content: "▸ "; color: var(--text-muted); }
details[open] > .ups-weitere-titel::before,
details[open] > .ups-db-titel::before { content: "▾ "; }
.ups-weitere-body, .ups-db-body { padding-top: var(--space-sm); }
.ups-weitere-lede { font-size: 0.8125rem; color: var(--text-secondary); max-width: 72ch; }
.ups-duplikat-zeile { display: flex; gap: var(--space-md); align-items: center; flex-wrap: wrap; margin-bottom: var(--space-sm); }
.ups-duplikat { font-size: 0.8125rem; }
.ups-kpi-reihe { display: flex; gap: var(--space-lg); flex-wrap: wrap; margin: var(--space-sm) 0; }
.ups-kpi { display: flex; flex-direction: column; gap: 1px; }
.ups-kpi-label {
font-size: 0.6875rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-secondary);
}
.ups-kpi-wert { font-size: 1.125rem; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.ups-kpi-sub { font-size: 0.75rem; color: var(--text-secondary); }
.ups-db-stats { font-size: 0.8125rem; color: var(--text-secondary); }
.ups-db-liste { margin-top: var(--space-sm); }
/* --- Knöpfe -------------------------------------------------------------- */
.ups-btn-primaer {
padding: 0.5rem 1.1rem;
background: var(--brand-primary);
color: var(--text-on-brand);
border: 1px solid var(--brand-primary);
border-radius: var(--radius-sm);
font-size: 0.875rem;
font-weight: 600;
cursor: pointer;
box-shadow: var(--shadow-brand);
transition: all var(--transition-fast);
}
.ups-btn-primaer:hover:not(:disabled) { background: var(--brand-accent); }
.ups-btn-primaer:focus-visible { outline: 2px solid var(--brand-dark); outline-offset: 2px; }
.ups-btn-primaer:disabled {
background: #CBD5E1;
border-color: #CBD5E1;
color: #FFFFFF;
box-shadow: none;
cursor: not-allowed;
}
.ups-btn-still {
padding: 0.4rem 0.7rem;
background: transparent;
color: var(--text-secondary);
border: 1px solid #CBD5E1;
border-radius: var(--radius-sm);
font-size: 0.8125rem;
cursor: pointer;
transition: all var(--transition-fast);
}
.ups-btn-still:hover { background: var(--bg-hover); color: var(--text-primary); }
.ups-btn-still:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
.ups-confirm-zeile { margin-bottom: 0.35rem; font-size: 0.9375rem; }
.ups-confirm-liste {
display: grid;
grid-template-columns: 9rem 1fr;
gap: 0.35rem 1rem;
margin: 0 0 var(--space-md) 0;
font-size: 0.9375rem;
}
.ups-confirm-liste dt { font-weight: 600; color: var(--text-secondary); }
.ups-confirm-liste dd { margin: 0; color: var(--text-primary); font-variant-numeric: tabular-nums; }
/* --- dcc.Dropdown / DatePicker: globale Regeln neutralisieren ------------ */
.ups-page .Select-control { padding: 0 !important; height: 38px; }
.ups-page .Select-control .Select-value,
.ups-page .Select-control .Select-placeholder { line-height: 38px; padding-left: 0.75rem; }
/* --- Schmale Bildschirme ------------------------------------------------- */
@media (max-width: 900px) {
.ups-zonen { grid-template-columns: 1fr; }
.ups-steuerung { flex-direction: column; align-items: stretch; }
.ups-unb-zeile { grid-template-columns: 1fr 1fr; }
}
/* =============================================================================
DATENEINGABE (/app/debitoren/dateneingabe) — NEU 2026-09-02
Aus dem UX-Audit: EFF/wiki/analysen/2026-09-02-dateneingabe-ux-audit.md
Dritter Namensraum nach `re-*` und `ups-*`, gleiche Sprache. Bewusst OHNE
`dbc.Card`: `.card` (style.css:198) legt 1,5rem Innenabstand an, und das
CardBody trug hier zusaetzlich `px-4 py-4` — 3 rem zwischen Kartenkante und
erstem Feld, fuenfmal pro Seite.
============================================================================= */
.de-page { max-width: 1100px; padding-bottom: 2rem; }
.de-head { margin-bottom: var(--space-md); }
.de-titel {
font-size: 1.5rem;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--text-primary);
margin: 0 0 0.25rem 0;
}
.de-lede { color: var(--text-secondary); font-size: 0.9375rem; margin: 0; max-width: 68ch; }
.de-banner { font-size: 0.875rem; margin-bottom: var(--space-md); }
.de-banner strong { font-weight: 700; }
/* --- Reiter --------------------------------------------------------------- */
/* Vorher `className="nav-pills"` auf `dbc.Tabs` — das ergab `nav-tabs
nav-pills`, zwei konkurrierende Reitersysteme, die nur ein !important
auseinanderhielt. */
.de-tabs { border-bottom: var(--border-subtle); gap: 2px; }
.de-tabs .nav-link {
color: var(--text-secondary);
font-weight: 600;
font-size: 0.875rem;
border: none;
border-bottom: 2px solid transparent;
border-radius: 0;
padding: 0.5rem 0.9rem;
}
.de-tabs .nav-link:hover { color: var(--text-primary); background: var(--bg-hover); }
.de-tabs .nav-link.active {
color: var(--brand-primary) !important;
background: transparent !important;
border-bottom-color: var(--brand-primary) !important;
}
/* --- Formularkarte -------------------------------------------------------- */
.de-card {
display: block;
margin-top: var(--space-md);
background: var(--bg-card);
border: var(--border-subtle);
border-radius: var(--radius-md);
box-shadow: var(--shadow-xs);
/* NICHT overflow: hidden — sonst schneidet die Karte aufgeklappte Auswahllisten
ab (2026-10-06: Kundenliste der Lager-Seite zeigte nur einen Eintrag). Die
runden Ecken trägt der Titel selbst. */
overflow: visible;
}
.de-card-titel {
border-radius: var(--radius-md) var(--radius-md) 0 0;
display: flex;
align-items: center;
gap: 0.4rem;
margin: 0;
padding: 0.7rem var(--space-lg);
font-size: 0.9375rem;
font-weight: 700;
color: var(--text-primary);
background: linear-gradient(180deg, #F8FAFC 0%, #F1F5F9 100%);
border-bottom: var(--border-subtle);
}
.de-card-body { padding: var(--space-md) var(--space-lg) var(--space-lg); }
/* --- Beschriftungen ------------------------------------------------------- */
/* Vorher war JEDES Label `fw-bold` — Pflichtfeld und Freitextnotiz sahen gleich
schwer aus, und die Pflicht hing allein an einem Sternchen im Text. */
.de-page .form-label,
.de-page label {
font-size: 0.75rem;
font-weight: 600;
color: var(--text-secondary);
margin-bottom: 0.25rem;
letter-spacing: 0.01em;
}
.de-page label:has(+ * [required]),
.de-page label.de-pflicht { color: var(--text-primary); font-weight: 700; }
/* --- Felder --------------------------------------------------------------- */
.de-page .form-control,
.de-page .form-select {
font-size: 0.875rem;
padding: 0.45rem 0.7rem;
height: 38px;
}
.de-page textarea.form-control { height: auto; }
.de-page .form-control:focus-visible,
.de-page .form-control:focus {
outline: 2px solid var(--brand-primary);
outline-offset: 1px;
box-shadow: none;
}
/* Pflichtfelder sind jetzt echte `required`-Felder — das darf man auch sehen. */
.de-page .form-control:required { border-left: 3px solid var(--brand-primary-light); }
/* dcc.Dropdown: dieselbe Falle wie bei den beiden anderen Umbauten. Die globale
Regel `.form-control, .Select-control { padding: .6rem 1rem }` blaeht das Feld
auf ~57 px, waehrend `dbc.Input` bei 38 px bleibt — die Zeile „Kunde neben
Abrechnungsmonat" stand dadurch schief. `height` allein hilft nicht, weil
`.Select-control` innen ein display:table ist. */
.de-page .Select-control { padding: 0 !important; height: 38px; }
.de-page .Select-control .Select-value,
.de-page .Select-control .Select-placeholder { line-height: 38px; padding-left: 0.7rem; }
.de-page .Select-input > input { padding: 0.5rem 0 0.5rem 0.7rem; }
/* Der Platzhalter IST der Leerzustand jedes Pflicht-Dropdowns auf dieser Seite
(„Kunde auswaehlen…"). Die globale Regel setzt ihn auf --text-muted = 2,56:1
und faellt damit durch WCAG AA. */
.de-page .Select-placeholder { color: var(--text-secondary) !important; }
/* --- Rueckmeldung --------------------------------------------------------- */
.de-feedback-slot { margin-top: var(--space-md); }
.de-feedback-slot:empty { margin-top: 0; }
.de-feedback { font-size: 0.875rem; margin-bottom: 0; }
.de-feedback-nachsatz { color: var(--success-text); }
/* --- Flyer-Liste ---------------------------------------------------------- */
.de-del-btn { font-size: 0.75rem; }
/* --- Gesperrte Formulare -------------------------------------------------- */
.de-gesperrt { text-align: center; padding: var(--space-xl) var(--space-lg); }
.de-gesperrt-icon { font-size: 2rem; color: var(--text-muted); display: block; margin-bottom: 0.6rem; }
@media (max-width: 700px) {
.de-card-body { padding: var(--space-md); }
}
/* --- Lager-Login: Meldeseite „Flyer melden“ (Tablet, 2026-10) ------------
Gleiche Sprache wie die Dateneingabe, nur größer: bedient wird im Stehen,
oft mit Handschuh. pages/Debitoren/beilagen_lager.py */
.bl-lager .Select-control { height: 52px; }
.bl-lager .Select-control .Select-value,
.bl-lager .Select-control .Select-placeholder { line-height: 52px; font-size: 1.05rem; }
.bl-lager .form-control { height: 48px; font-size: 1rem; }
.bl-lager .btn-lg { font-size: 1.15rem; font-weight: 700; min-height: 64px; }
/* Gesperrt muss gesperrt AUSSEHEN — Bootstraps 65 % Deckkraft ließ den gelben
Knopf fast aktiv wirken. */
.bl-lager .btn:disabled,
#bl-melden-leer:disabled, #bl-melden-wieder:disabled { opacity: .35; filter: grayscale(.7); cursor: not-allowed; }
/* Platz für den Stand reservieren, damit die Felder darunter beim Laden nicht springen. */
.bl-lager .bl-lager-stand { min-height: 9rem; }
/* Rückmeldung „Flyer & Lieferschein“ (Büro + Lager) als Leiste unten im Fenster:
gespeichert wird unten, gemeldet oben, entschieden im Dialog — so steht die
Antwort immer im Blickfeld. */
.bl-snackbar:empty { display: none; }
.bl-snackbar {
position: fixed;
left: 50%;
bottom: 24px;
transform: translateX(-50%);
width: min(720px, calc(100vw - 32px));
z-index: 1070;
}
.bl-snackbar .alert { box-shadow: var(--shadow-lg, 0 10px 30px rgba(15, 23, 42, .18)); margin-bottom: 0; }
/* ==========================================================================
MAHNLAUF (/app/debitoren/mahnlauf)
Eigener Block statt glass-card: die globale Regel
`.glass-card.border-0.h-100 { min-height: 280px }` ist fuer die Home-Kacheln
gedacht und blaeht jede Liste auf.
========================================================================== */
.mahn-seite { padding: 0 0 var(--space-xl); }
.mahn-seite ::selection { background: rgba(30, 64, 175, 0.15); }
.mahn-kopf { margin-bottom: var(--space-lg); }
.mahn-titel {
font-size: 1.6rem; font-weight: 650; letter-spacing: -0.02em;
color: var(--text-primary); margin: 0 0 0.85rem;
}
/* --- Betriebszustand: das Band traegt die wichtigste Information der Seite --- */
.mahn-band {
display: flex; align-items: center; justify-content: space-between;
gap: var(--space-md); flex-wrap: wrap;
padding: 0.7rem var(--space-md); border-radius: var(--radius-sm);
border: var(--border-subtle);
}
.mahn-band-links { display: flex; align-items: baseline; gap: 0.7rem; flex-wrap: wrap; }
.mahn-band-links strong { font-size: 0.95rem; letter-spacing: -0.01em; }
.mahn-band-text { font-size: 0.86rem; color: var(--text-secondary); }
.mahn-band-zusatz {
font-size: 0.78rem; color: var(--text-secondary);
padding: 0.1rem 0.5rem; border-radius: var(--radius-pill);
background: rgba(15, 23, 42, 0.06);
}
/* Testmodus wird gestreift: das Muster sagt "nicht echt", bevor man liest. */
.mahn-band--test {
background: repeating-linear-gradient(135deg,
#F1F5F9 0 10px, #E8EEF6 10px 20px);
color: var(--text-primary);
}
.mahn-band--anlauf { background: #FEF6E7; border-color: #F3D9A4; color: #7A4B06; }
.mahn-band--anlauf .mahn-band-text { color: #8A5A12; }
.mahn-band--scharf { background: #EEF3FE; border-color: #C3D4F7; color: #17348C; }
.mahn-band--scharf .mahn-band-text { color: #2A4CA8; }
/* --- Bereichsleiste --- */
.mahn-leiste {
display: flex; gap: 0.25rem; margin: 1.4rem 0 1.1rem;
border-bottom: var(--border-subtle);
}
.mahn-tab {
appearance: none; background: none; border: 0;
border-bottom: 2px solid transparent; margin-bottom: -1px;
padding: 0.7rem 0.95rem; min-height: 44px; font-size: 0.9rem; font-weight: 500;
color: var(--text-secondary); cursor: pointer;
transition: color 0.15s ease, border-color 0.15s ease;
}
.mahn-tab:hover { color: var(--text-primary); }
.mahn-tab.is-active { color: var(--brand-primary); border-bottom-color: var(--brand-primary); }
.mahn-tab:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; border-radius: var(--radius-xs); }
.mahn-zahl {
display: inline-block; min-width: 1.15rem; margin-left: 0.4rem;
padding: 0 0.35rem; border-radius: var(--radius-pill);
background: var(--brand-primary); color: #fff;
font-size: 0.7rem; font-weight: 600; line-height: 1.35;
font-variant-numeric: tabular-nums;
}
.mahn-zahl:empty { display: none; }
/* --- Ueberschriften --- */
.mahn-h2-zeile { display: flex; align-items: baseline; gap: 0.6rem; }
.mahn-h2 {
font-size: 1.02rem; font-weight: 600; letter-spacing: -0.01em;
color: var(--text-primary); margin: 1.6rem 0 0.7rem;
}
.mahn-h2-zeile .mahn-h2 { margin-top: 0; }
.mahn-h2-zahl { font-size: 0.85rem; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.mahn-erklaerung {
font-size: 0.87rem; color: var(--text-secondary);
max-width: 68ch; margin: 0 0 1rem;
}
.mahn-erklaerung code {
font-size: 0.8rem; background: var(--bg-hover); color: var(--text-secondary);
padding: 0.1rem 0.3rem; border-radius: var(--radius-xs);
}
/* --- Ein faelliger Fall --- */
.mahn-fall-liste { display: flex; flex-direction: column; gap: var(--space-sm); }
.mahn-fall {
background: var(--bg-card); border: var(--border-subtle);
border-radius: var(--radius-sm); padding: 0.85rem 1rem;
box-shadow: var(--shadow-xs);
display: grid; grid-template-columns: 1fr auto; gap: 0.35rem 1rem;
align-items: center; transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.mahn-fall:hover { box-shadow: var(--shadow-sm); border-color: #CBD5E1; }
.mahn-fall--gesperrt { background: #FAFBFC; }
.mahn-fall-kopf { grid-column: 1; display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; }
.mahn-fall-name { font-weight: 600; color: var(--text-primary); }
.mahn-fall-stufe {
font-size: 0.78rem; color: var(--text-secondary);
padding: 0.1rem 0.45rem; border-radius: var(--radius-pill);
background: var(--bg-hover);
}
.mahn-fall-zeile { grid-column: 1; display: flex; align-items: baseline; gap: 0.7rem; flex-wrap: wrap; }
.mahn-fall-meta { font-size: 0.83rem; color: var(--text-secondary); }
.mahn-fall-betrag {
font-size: 0.95rem; font-weight: 600; color: var(--text-primary);
font-variant-numeric: tabular-nums;
}
.mahn-fall-kosten { font-size: 0.8rem; color: #8A5A12; }
.mahn-fall-ziel, .mahn-fall-hindernis {
grid-column: 1; font-size: 0.8rem; display: flex; gap: 0.6rem; flex-wrap: wrap;
}
.mahn-fall-ziel { color: var(--text-secondary); }
.mahn-fall-nummern { font-variant-numeric: tabular-nums; }
.mahn-fall-mail { color: var(--text-secondary); }
.mahn-fall-hindernis { color: #B4341F; align-items: center; }
.mahn-fall-hilfe { color: var(--text-secondary); }
.mahn-fall-aktion { grid-column: 2; grid-row: 1 / span 3; }
/* --- Klassen-Kennzeichen --- */
.mahn-klasse {
display: inline-grid; place-items: center;
width: 1.4rem; height: 1.4rem; border-radius: var(--radius-xs);
font-size: 0.74rem; font-weight: 700; letter-spacing: 0;
}
.mahn-klasse--a { background: #E7EFF5; color: #2F6B8F; }
.mahn-klasse--b { background: #F7EBDC; color: #8A4A06; }
.mahn-klasse--c { background: #F7E4E8; color: #8E1F3B; }
/* --- Leerer Zustand: das ist der Normalfall, kein Fehler --- */
.mahn-leer { text-align: center; padding: 3rem 1rem; }
.mahn-leer-icon { font-size: 1.9rem; color: #64A67F; display: block; margin-bottom: 0.7rem; }
.mahn-leer-titel { font-size: 1rem; font-weight: 600; color: var(--text-primary); margin: 0 0 0.25rem; }
.mahn-leer-text { font-size: 0.87rem; color: var(--text-secondary); margin: 0; }
/* --- Tabellen --- */
.mahn-tabelle-huelle { overflow-x: auto; border: var(--border-subtle); border-radius: var(--radius-sm); background: var(--bg-card); }
.mahn-tabelle { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.mahn-tabelle th {
text-align: left; font-size: 0.71rem; font-weight: 600; letter-spacing: 0.06em;
text-transform: uppercase; color: var(--text-muted);
padding: 0.6rem 0.8rem; border-bottom: var(--border-subtle); white-space: nowrap;
}
.mahn-tabelle td { padding: 0.55rem 0.8rem; border-bottom: 1px solid #F1F5F9; vertical-align: middle; }
.mahn-tabelle tbody tr:last-child td { border-bottom: 0; }
.mahn-tabelle tbody tr:hover { background: var(--bg-hover); }
.mahn-num, th.mahn-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mahn-td-name { font-weight: 500; color: var(--text-primary); }
.mahn-td-mail { color: var(--text-secondary); font-size: 0.8rem; }
.mahn-td-select { width: 5.5rem; }
.mahn-klasse-select .Select-control, .mahn-klasse-select .Select-value { font-size: 0.82rem; }
.mahn-fehlt { color: #B4341F; font-size: 0.8rem; }
.mahn-status { font-size: 0.78rem; padding: 0.1rem 0.45rem; border-radius: var(--radius-pill); }
.mahn-status--ok { background: #E4EFE8; color: #24603C; }
.mahn-status--neutral { background: var(--bg-hover); color: var(--text-secondary); }
.mahn-status--err { background: #F7E4E8; color: #8E1F3B; }
.mahn-test-marke {
font-size: 0.7rem; margin-left: 0.35rem; padding: 0 0.3rem;
border-radius: var(--radius-xs); background: #E8EEF6; color: #35507F;
}
.mahn-details-knopf { cursor: pointer; color: var(--brand-primary); font-size: 0.8rem; }
.mahn-detail-inhalt { padding: 0.6rem 0 0.2rem; }
.mahn-detail-zeile { font-size: 0.78rem; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.mahn-detail-text {
margin-top: 0.5rem; padding: 0.7rem; background: var(--bg-main);
border-radius: var(--radius-xs); font-size: 0.78rem; white-space: pre-wrap;
color: var(--text-secondary); max-height: 22rem; overflow-y: auto;
}
/* --- Vorlagen --- */
.mahn-vorlagen { display: flex; flex-direction: column; gap: var(--space-md); }
.mahn-vorlage {
background: var(--bg-card); border: var(--border-subtle);
border-radius: var(--radius-sm); padding: 1rem 1.1rem; box-shadow: var(--shadow-xs);
}
.mahn-vorlage-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.mahn-vorlage-titel { font-size: 0.95rem; font-weight: 600; margin: 0 0 0.6rem; }
.mahn-vorlage-datum { font-size: 0.76rem; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.mahn-label {
display: block; font-size: 0.71rem; font-weight: 600; letter-spacing: 0.06em;
text-transform: uppercase; color: var(--text-muted); margin: 0.7rem 0 0.25rem;
}
.mahn-input, .mahn-textarea {
width: 100%; font-size: 0.85rem; padding: 0.45rem 0.6rem;
border: var(--border-subtle); border-radius: var(--radius-xs);
background: var(--bg-card); color: var(--text-primary); font-family: inherit;
}
.mahn-textarea { line-height: 1.55; resize: vertical; }
.mahn-input:focus, .mahn-textarea:focus {
outline: 2px solid var(--brand-primary); outline-offset: -1px; border-color: var(--brand-primary);
}
.mahn-vorlage-fuss { display: flex; align-items: center; gap: 0.8rem; margin-top: 0.8rem; }
.mahn-vorlage-status { font-size: 0.82rem; color: var(--text-secondary); }
/* --- Vorschau --- */
.mahn-vk-kopf {
background: var(--bg-main); border-radius: var(--radius-xs);
padding: 0.7rem 0.85rem; margin-bottom: 0.9rem; font-size: 0.84rem;
display: flex; flex-direction: column; gap: 0.25rem;
}
.mahn-vk-label {
display: inline-block; width: 4.5rem; color: var(--text-muted);
font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em;
}
.mahn-vk-betreff { font-weight: 600; }
.mahn-vk-text {
white-space: pre-wrap; font-family: inherit; font-size: 0.9rem; line-height: 1.6;
color: var(--text-primary); margin: 0; padding: 1rem;
background: var(--bg-card); border: var(--border-subtle); border-radius: var(--radius-xs);
}
.mahn-vk-summe { margin-top: 0.7rem; font-size: 0.83rem; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.mahn-vorschau-hinweis { flex: 1; font-size: 0.82rem; color: var(--text-secondary); text-align: left; }
.mahn-toast { position: fixed; bottom: 1.2rem; right: 1.2rem; z-index: 1080; }
@media (max-width: 720px) {
.mahn-fall { grid-template-columns: 1fr; }
.mahn-fall-aktion { grid-column: 1; grid-row: auto; }
.mahn-leiste { overflow-x: auto; }
}
.mahn-details { margin-top: 0.9rem; }
.mahn-details > summary { margin-bottom: 0.4rem; }
.mahn-erklaerung--eng { font-size: 0.8rem; margin: 0.3rem 0 0.5rem; }
/* Bewegung nur, wenn der Nutzer sie nicht abbestellt hat. */
@media (prefers-reduced-motion: reduce) {
.mahn-tab, .mahn-fall, .mahn-prog i { transition: none; }
}
/* Ladezustand: vier Sekunden ohne Rueckmeldung sehen aus wie ein Defekt. */
.mahn-laedt { padding: 3rem 1rem; text-align: center; }
.mahn-laedt-balken {
height: 3px; width: 180px; margin: 0 auto var(--space-md);
background: var(--bg-hover); border-radius: 2px; overflow: hidden; position: relative;
}
.mahn-laedt-balken::after {
content: ""; position: absolute; inset: 0 auto 0 0; width: 40%;
background: var(--brand-primary); border-radius: 2px;
animation: mahn-schieben 1.1s ease-in-out infinite;
}
@keyframes mahn-schieben {
0% { transform: translateX(-100%); }
100% { transform: translateX(350%); }
}
@media (prefers-reduced-motion: reduce) {
.mahn-laedt-balken::after { animation: none; width: 100%; opacity: 0.45; }
}
.mahn-laedt-text { font-size: 0.87rem; color: var(--text-secondary); margin: 0; }
/* Summenzeile: die billigste Absicherung gegen einen stillen Ausreisser in der Liste. */
.mahn-summe {
display: flex; gap: var(--space-lg); flex-wrap: wrap; align-items: baseline;
padding: 0.7rem var(--space-md); margin-bottom: var(--space-md);
background: var(--bg-card); border: var(--border-subtle); border-radius: var(--radius-sm);
}
.mahn-summe-wert {
font-size: 1.15rem; font-weight: 650; color: var(--text-primary);
font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
}
.mahn-summe-label { font-size: 0.78rem; color: var(--text-secondary); margin-left: 0.35rem; }
.mahn-summe-teil { display: flex; align-items: baseline; }
.mahn-status--skip { background: #FEF6E7; color: #7A4B06; }
.mahn-vk-textarea { font-size: 0.9rem; line-height: 1.6; }
.mahn-skip-frage { font-size: 0.9rem; color: var(--text-primary); margin-bottom: var(--space-md); }
/* --------------------------------------------------------------------------
MAHNLAUF — Ergaenzungen 2026-09-03
Sperrblock, Kontaktpflege, Eskalationsherkunft. Weiterhin ohne glass-card:
die globale Regel `.glass-card.border-0.h-100 { min-height: 280px }` ist fuer
die Home-Kacheln gedacht und blaeht jede Liste auf.
-------------------------------------------------------------------------- */
/* Sperrblock — steht vor allem anderen, weil hier eine Entscheidung ansteht,
die niemand sonst trifft. */
.mahn-sperr-bereich { margin-bottom: var(--space-lg); }
.mahn-sperr-liste { display: flex; flex-direction: column; gap: 0.45rem; margin-bottom: var(--space-md); }
.mahn-h2--warn { color: #8E0000; }
.mahn-sperre {
padding: 0.6rem var(--space-md);
background: var(--bg-card);
border: var(--border-subtle);
border-left: 3px solid var(--text-muted);
border-radius: var(--radius-sm);
}
.mahn-sperre--faellig { border-left-color: #C62828; background: #FDECEA; }
.mahn-sperr-kopf { display: flex; align-items: baseline; gap: 0.6rem; margin-bottom: 0.2rem; }
.mahn-sperre--faellig .mahn-sperr-kopf { color: #8E0000; }
.mahn-sperre--faellig .mahn-fall-meta { color: #8E0000; }
/* Zusatzzeile auf der Fallkarte: woher die Stufe kommt. Ohne sie sieht man
„Mahnung 2" und weiss nicht, ob das der Einstieg war oder eine Eskalation. */
.mahn-fall-herkunft {
font-size: 0.76rem; color: var(--text-muted); margin-left: auto;
font-style: italic; white-space: nowrap;
}
/* Kontaktpflege in der Kundentabelle. */
.mahn-input--klein { max-width: 8.5rem; }
.mahn-input--mail { min-width: 12rem; width: 100%; }
.mahn-input--fehlt { border-color: #E0A800; background: #FFFCF3; }
.mahn-zeile--fehlt { background: #FFFCF3; }
.mahn-kontakt-status {
font-size: 0.74rem; color: var(--text-secondary); white-space: nowrap;
}
.mahn-marke {
font-size: 0.68rem; color: var(--text-muted); margin-left: 0.45rem;
border: var(--border-subtle); border-radius: 3px; padding: 0 0.28rem;
}
.mahn-luecken-hinweis { font-size: 0.85rem; padding: 0.5rem var(--space-md); }
/* Stichtag im Zustandsband — sichtbar und aenderbar, nicht mehr Einwegschalter. */
.mahn-band-stichtag {
display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
margin-top: 0.35rem;
}
.mahn-band-label {
font-size: 0.76rem; font-weight: 600; color: var(--text-secondary);
text-transform: uppercase; letter-spacing: 0.04em;
}
.mahn-cutover .DateInput_input {
font-size: 0.82rem; padding: 0.15rem 0.4rem; line-height: 1.4;
}
.mahn-cutover .SingleDatePickerInput { border-radius: var(--radius-sm); }
/* Fristmarke im Verlauf: macht sichtbar, wann die naechste Stufe faellig wird. */
.mahn-frist-marke {
font-size: 0.7rem; color: var(--text-muted); margin-left: 0.4rem;
font-variant-numeric: tabular-nums;
}
/* --------------------------------------------------------------------------
MAHNLAUF — Mahnpause, 2026-09-04
Der Kunde hat sich gemeldet, die Kette haelt an. Gedeckter als der
Sperrblock: Hier steht gerade nichts an, und genau das ist die Aussage.
Weiterhin ohne glass-card (min-height: 280px blaeht jede Liste auf).
-------------------------------------------------------------------------- */
.mahn-pause-bereich { margin-bottom: var(--space-lg); }
.mahn-pausen-liste {
display: flex; flex-direction: column; gap: 0.45rem;
margin-bottom: var(--space-md);
}
.mahn-pause-karte {
padding: 0.6rem var(--space-md);
background: var(--bg-card);
border: var(--border-subtle);
border-left: 3px solid #6B8FB5;
border-radius: var(--radius-sm);
display: grid; grid-template-columns: 1fr auto; gap: 0.2rem 1rem;
align-items: center;
}
.mahn-pause-karte > div:not(.mahn-fall-aktion) { grid-column: 1; }
/* Erledigt, aber noch sichtbar: Die Zeile verschwindet erst zum Enddatum.
Sonst faellt sie genau dann weg, wenn das Gespraech Erfolg hatte. */
.mahn-pause-karte--leer { border-left-color: var(--text-muted); opacity: 0.72; }
.mahn-pause-grund {
font-style: italic; color: var(--text-secondary);
overflow-wrap: anywhere;
}
.mahn-pause-marke {
font-size: 0.72rem; font-weight: 600; color: #2F5B84;
background: #E7EFF5; border-radius: var(--radius-pill);
padding: 0.08rem 0.45rem; white-space: nowrap;
}
/* Schnellwahl im Pausen-Dialog: die drei ueblichen Faelle als Knopf. Ein
leeres Datumsfeld laedt dazu ein, „irgendwann" zu waehlen. */
.mahn-pause-schnell {
display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap;
margin-bottom: var(--space-sm);
}
.mahn-pause-datum { margin-left: 0.35rem; }
/* Zweitknopf auf der Fallkarte und Miniknopf in der Verlaufstabelle. */
.mahn-knopf-zweit { margin-top: 0.35rem; display: block; width: 100%; }
.mahn-knopf-mini { font-size: 0.74rem; padding: 0.1rem 0.45rem; white-space: nowrap; }
.mahn-td-aktion { text-align: right; white-space: nowrap; }
@media (max-width: 900px) {
.mahn-pause-karte { grid-template-columns: 1fr; }
.mahn-pause-karte > .mahn-fall-aktion { grid-column: 1; }
.mahn-knopf-zweit { width: auto; display: inline-block; margin-left: 0.35rem; margin-top: 0; }
}
/* --------------------------------------------------------------------------
MAHNLAUF — Urlaubsmodus, 2026-10-14
Rechts im Band: in wessen Namen heute Post rausgeht. Bernstein statt Blau,
damit der Unterschied zum Normalbetrieb ohne Lesen auffällt.
-------------------------------------------------------------------------- */
.mahn-band-rechts { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.mahn-band-urlaub {
font-size: 0.8rem; font-weight: 500;
padding: 0.15rem 0.6rem; border-radius: var(--radius-pill);
background: var(--warning-bg); color: var(--warning-text);
border: 1px solid rgba(245, 158, 11, 0.45);
}
.mahn-band-urlaub--geplant { background: transparent; }
.mahn-urlaub-liste { font-size: 0.87rem; padding-left: 1.1rem; margin: 0 0 0.6rem; }
.mahn-urlaub-liste li { margin-bottom: 0.25rem; }
.mahn-urlaub-daten { display: flex; gap: var(--space-md); flex-wrap: wrap; margin-top: 0.4rem; }
.mahn-urlaub-status:empty { display: none; }
.mahn-urlaub-fehler { font-size: 0.85rem; padding: 0.5rem var(--space-md); margin: 0.8rem 0 0; }