/* ====================================================================
NexLog Design System — app.css
Moderne SaaS-UI: Inter (body) + Plus Jakarta Sans (display)
Fonts are loaded once from base.html (preconnect + stylesheet) —
do not @import Google Fonts here (double fetch / FOUC / flaky fallbacks).
==================================================================== */
/* ===========================
1. RESET
=========================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
/* ===========================
2. DESIGN TOKENS
=========================== */
:root {
/* ================================================================
NexLog design tokens — semantic colors only (no palette aliases).
================================================================ */
/* ── Surfaces (cool neutrals to match logo navy) ── */
--body-bg: #f3f3f8;
--surface: #FFFFFF;
--bg-subtle: #fafafc;
--bg-attention: #f6f5fc;
--bg-soft: #F7F7FB; /* soft panels / alt rows */
--bg-muted: #EEEEF4; /* hover / muted fill */
/* ── Brand (logo navy ≈ #1E1E60) ── */
--primary: #1E1E60;
--primary-hover: #2A2A7A;
--primary-soft: #EEEEF8;
/* ── Accent (interactive indigo from same family) ── */
--accent: #3535B0;
--accent-hover: #2A2A96;
--accent-strong: #1E1E60;
--accent-soft: #E8E8F8;
/* ── Text ── */
--text-primary: #1a1a24;
--text-secondary: #5c5c6e;
--text-tertiary: #8a8a9a;
--text-muted: #9A9AAB;
--text-quaternary: #c4c4d0;
--text-body: #34344A;
--text-strong: #12121C;
--text-inverse: #FFFFFF;
/* ── Borders ── */
--border: #e4e4ee;
--border-strong: #C8C8D6;
--border-subtle: #E8E8F0;
--border-attention: #d8d4ee;
--border-divider: #EEEEF4;
--border-row: #f2f2f8;
--border-dashed: #d0d0dc;
--border-input: #dcdce8;
/* ── Status: ok ── */
--ok: #16A34A;
--ok-strong: #15803D;
--ok-soft: #DCFCE7;
--ok-fg: #2f6b3a;
/* ── Status: warn ── */
--warn: #B45309;
--warn-strong: #92400e;
--warn-soft: #FEF3C7;
--warn-fg: #8a5a1a;
/* ── Status: danger (logo pin red ≈ #E20D40) ── */
--danger: #E20D40;
--danger-strong: #C00A36;
--danger-soft: #FDE8EE;
--danger-fg: #A80A30;
/* ── Secondary accent (rare: auth links, driver source) ── */
--violet: #5B5BC9;
--violet-soft: #EEEEF8;
--violet-fg: #2A2A7A;
--violet-bg: #F4F4FB;
/* ── Sidebar (logo navy) ── */
--sidebar-bg: #1E1E60;
--sidebar-border: rgba(255,255,255,0.08);
--sidebar-width: 15rem;
--sidebar-text: rgba(255,255,255,0.62);
--sidebar-text-hover: var(--text-inverse);
--sidebar-hover-bg: rgba(255,255,255,0.07);
--sidebar-active-bg: rgba(255,255,255,0.13);
--sidebar-active-text: var(--text-inverse);
/* ── Overlay / chrome ── */
--overlay: rgba(0,0,0,0.45);
--scrollbar-thumb-hover: #a8a8b8;
--scrollbar-width: 6px;
/* ── Typography (rem; root 16px) ── */
/* Body/UI: Inter. Display: Plus Jakarta Sans (headlines only).
Fallbacks are system UI stacks only — never cursive / Comic Sans. */
--font-family-body: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
--font-family-display: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
/* Alias: default text stack (body) — prefer --font-family-body in new CSS */
--font-family: var(--font-family-body);
/* 7 sizes */
--fs-caption: 0.6875rem; /* 11px — table headers, densest meta */
--fs-label: 0.75rem; /* 12px — labels, table cells, captions */
--fs-body: 0.8125rem; /* 13px — default reading */
--fs-ui: 0.875rem; /* 14px — controls, buttons */
--fs-value: 1.0625rem; /* 17px — emphasized numbers */
--fs-kpi: 1.375rem; /* 22px — KPI figures */
--fs-page-title: 1.625rem; /* 26px — page titles */
--fw-regular: 400;
--fw-medium: 500;
--fw-semi: 600;
--fw-bold: 700;
--tracking-tight: -0.02em;
--tracking-label: 0.04em;
/* ── Radius ── */
--radius-sm: 0.25rem;
--radius-md: 0.375rem;
--radius-lg: 0.5rem;
--radius-xl: 0.75rem;
--radius-2xl: 1rem;
--radius-full: 9999px;
--radius-card: var(--radius-xl);
--radius-badge: var(--radius-full);
--radius-button: var(--radius-lg);
--radius-input: var(--radius-lg);
/* ── Spacing (rem scale: 4·8·12·16·24·32) ── */
--space-1: 0.25rem; /* 4 */
--space-2: 0.5rem; /* 8 */
--space-3: 0.75rem; /* 12 */
--space-4: 1rem; /* 16 */
--space-5: 1.5rem; /* 24 */
--space-6: 2rem; /* 32 */
--space-section: var(--space-4);
--space-card-x: var(--space-4);
--space-card-y: var(--space-3);
--space-grid-gap: var(--space-4);
/* Table cells: compact horizontally (fit columns); keep comfortable row height */
--space-cell-x: 0.375rem; /* 6px — tight horizontal */
--space-cell-y: 0.75rem; /* 12px — previous body/overview row height */
--space-cell-edge: 0.5rem; /* 8px */
--content-max-width: 75rem; /* 1200px @ 16 */
--content-padding-x: var(--space-6);
/* ── Shadows ── */
--shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
--shadow-sm: 0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.04);
--shadow-md: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -1px rgba(0,0,0,0.04);
--shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.07), 0 4px 6px -2px rgba(0,0,0,0.04);
--shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.08), 0 10px 10px -5px rgba(0,0,0,0.03);
--shadow-2xl: 0 25px 50px -12px rgba(0,0,0,0.18);
--shadow-sticky: 0 1px 0 var(--border-divider);
/* ── Wizard (layout + colors wired to semantic) ── */
--wizard-circle-size: 2rem;
--wizard-active-glow: rgba(37,99,235,0.2);
--wizard-circle-bg-default: var(--border-subtle);
--wizard-circle-text-default:var(--text-muted);
--wizard-circle-bg-completed:var(--ok-strong);
--wizard-circle-text-completed:var(--text-inverse);
--wizard-circle-border-completed:var(--ok-strong);
--wizard-circle-bg-current: var(--primary);
--wizard-circle-text-current:var(--text-inverse);
--wizard-circle-border-current:var(--primary);
--wizard-glow-current: rgba(37,99,235,0.2);
--wizard-label-text-default: var(--text-muted);
--wizard-label-text-completed:var(--text-body);
--wizard-label-text-current: var(--accent-strong);
--wizard-line-bg-default: var(--border-subtle);
--wizard-line-bg-completed: var(--ok-strong);
--wizard-preview-bg: var(--bg-soft);
--wizard-preview-border: var(--border-subtle);
--wizard-remove-bg: var(--danger);
--wizard-remove-hover: var(--danger);
--wizard-circle-font-size: var(--fs-body);
--wizard-circle-border-width:2px;
--wizard-label-font-size: var(--fs-label);
--wizard-label-margin-bottom:var(--space-1);
--wizard-line-height: 2px;
--wizard-progress-margin: var(--space-5) 0;
--wizard-steps-gap: var(--space-2);
--wizard-input-height: 2.625rem;
--wizard-input-padding: var(--space-2) var(--space-3);
--wizard-input-font-size: var(--fs-ui);
--wizard-textarea-min-height:5rem;
--wizard-preview-padding: var(--space-2);
--wizard-preview-min-width: 140px;
--wizard-preview-max-width: 260px;
--wizard-preview-aspect-ratio:1/1;
--wizard-preview-border-radius:var(--radius-md);
--wizard-preview-border-width:1px;
--wizard-preview-shadow: 0 1px 3px rgba(0,0,0,0.07);
--wizard-remove-size: var(--space-5);
--wizard-remove-font-size: var(--fs-label);
--wizard-row-gap: var(--space-3);
--wizard-row-margin-bottom: var(--space-4);
--bg-doc-icon: var(--bg-subtle);
--scrollbar-thumb: var(--border-dashed);
/* dropped: --neutral-bg/fg (unused; use --border / --text-secondary) */
}
/* ===========================
3. BASE
=========================== */
body {
margin: 0;
font-family: var(--font-family-body);
background: var(--body-bg);
color: var(--text-primary);
font-size: var(--fs-ui);
line-height: 1.45;
-webkit-font-smoothing: antialiased;
}
/* Display face: page / list heroes, section chrome titles (not dense panel titles) */
.page-title,
.hero_title,
.ui-empty-state-title,
.violations-empty-state__title,
.modal-generic-wide h2,
.modal-generic h2,
.auth-title,
.wizard-title,
.messages-title,
.onboarding-section-title,
.dashboard-layout .panel-title,
.handlungsqueue .panel-title,
.termine .panel-title,
.kosten-anomalien .panel-title,
.onboarding .panel-title {
font-family: var(--font-family-display);
}
a { color: var(--primary); text-decoration: none; transition: color 0.15s; }
a:hover { color: var(--primary-hover); text-decoration: none; }
/* ===========================
4. LAYOUT SHELL
=========================== */
.base_container {
display: grid;
grid-template-columns: var(--sidebar-width) 1fr;
min-height: 100vh;
}
/* Full-width shell (tenant onboarding / beamer): no app nav */
.base_container--no-sidebar {
grid-template-columns: 1fr;
grid-template-rows: auto 1fr;
background:
radial-gradient(1200px 500px at 10% -10%, rgba(37, 99, 235, 0.08), transparent 55%),
radial-gradient(900px 420px at 100% 0%, rgba(180, 83, 9, 0.06), transparent 50%),
var(--bg-subtle, var(--bg-subtle));
}
.base_container--no-sidebar > .base_content {
grid-column: 1;
}
.onboarding-topbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
padding: var(--space-3) var(--space-5);
background: rgba(255, 255, 255, 0.86);
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--border);
position: sticky;
top: 0;
z-index: 20;
}
.onboarding-topbar-brand {
display: flex;
align-items: center;
gap: var(--space-3);
}
.onboarding-topbar-meta {
display: flex;
align-items: center;
gap: var(--space-3);
}
.onboarding-topbar-user {
font-size: var(--fs-body);
color: var(--text-secondary);
font-weight: var(--fw-medium);
}
.base_content--onboarding {
max-width: 1080px;
width: 100%;
margin: 0 auto;
}
/* ── Superuser company onboarding wizard ── */
.onboarding-hero {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-4);
width: 100%;
padding-bottom: var(--space-1);
}
.onboarding-kicker {
margin: 0 0 var(--space-1);
font-size: var(--fs-label);
font-weight: var(--fw-bold);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--primary, var(--accent));
}
.onboarding-wizard { margin-top: var(--space-1); padding-bottom: var(--space-6); }
/* Progress track: o--------o--------o--------o with step labels under nodes */
.onboarding-track {
display: flex;
align-items: flex-start;
list-style: none;
margin: 0 0 var(--space-5);
padding: var(--space-1) 0 var(--space-1);
width: 100%;
}
.onboarding-track__step {
flex: 1 1 0;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-2);
min-width: 0;
position: relative;
text-align: center;
}
/* Connector line from this node to the next (centered on node row) */
.onboarding-track__step:not(:last-child)::after {
content: "";
position: absolute;
top: var(--space-3); /* vertical center of 1.75rem node */
left: calc(50% + 0.95rem);
right: calc(-50% + 0.95rem);
height: 2px;
border-radius: 999px;
background: rgba(15, 23, 42, 0.12);
z-index: 0;
}
/* Line after a completed step is filled */
.onboarding-track__step.is-done:not(:last-child)::after {
background: linear-gradient(90deg, var(--ok), var(--ok));
}
/* Line into the current step: partial emphasis from previous done */
.onboarding-track__step.is-done + .onboarding-track__step.is-current:not(:last-child)::after,
.onboarding-track__step.is-current:not(:last-child)::after {
background: rgba(15, 23, 42, 0.12);
}
.onboarding-track__node {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.75rem;
height: 1.75rem;
border-radius: 999px;
border: 2px solid rgba(15, 23, 42, 0.14);
background: var(--surface, var(--surface));
font-size: var(--fs-label);
font-weight: var(--fw-bold);
color: var(--text-tertiary);
z-index: 1;
position: relative;
box-shadow: 0 0 0 4px var(--bg-subtle, var(--bg-subtle));
}
.onboarding-track__label {
font-size: var(--fs-body);
font-weight: var(--fw-semi);
color: var(--text-tertiary);
line-height: 1.25;
max-width: 7rem;
}
.onboarding-track__num {
font-weight: var(--fw-bold);
margin-right: var(--space-1);
color: inherit;
}
.onboarding-track__step.is-current .onboarding-track__node {
border-color: var(--primary, var(--accent));
background: var(--primary-soft);
color: var(--primary, var(--accent));
box-shadow: 0 0 0 4px var(--bg-subtle, var(--bg-subtle)), 0 0 0 7px rgba(37, 99, 235, 0.14);
}
.onboarding-track__step.is-current .onboarding-track__label {
color: var(--text-primary);
}
.onboarding-track__step.is-done .onboarding-track__node {
border-color: var(--ok);
background: var(--ok-soft);
color: var(--ok-strong);
}
.onboarding-track__step.is-done .onboarding-track__label {
color: var(--ok-strong);
}
@media (max-width: 640px) {
.onboarding-track__label { font-size: var(--fs-label); max-width: 4.75rem; }
.onboarding-track__num { display: block; margin: 0 0 var(--space-1); }
}
.onboarding-layout {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-4);
align-items: start;
}
.onboarding-layout--solo { grid-template-columns: 1fr; }
@media (min-width: 960px) {
.onboarding-layout:not(.onboarding-layout--solo) {
grid-template-columns: minmax(0, 1fr) 270px;
}
}
.onboarding-main,
.onboarding-side-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 16px;
box-shadow: 0 10px 30px rgba(31, 42, 64, 0.05);
}
.onboarding-main {
padding: var(--space-5) var(--space-5) var(--space-5);
position: relative;
overflow: hidden;
}
.onboarding-main::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 3px;
background: linear-gradient(90deg, var(--accent-hover), #60a5fa 50%, #fbbf24);
}
.onboarding-step-badge {
display: inline-flex;
margin-bottom: var(--space-3);
padding: var(--space-1) var(--space-2);
border-radius: 999px;
font-size: var(--fs-label);
font-weight: var(--fw-bold);
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--primary);
background: var(--primary-soft);
border: 1px solid var(--accent-soft);
}
.onboarding-step-title {
margin: 0 0 var(--space-2);
font-size: var(--fs-kpi);
font-weight: var(--fw-bold);
letter-spacing: -0.03em;
line-height: 1.2;
color: var(--text-primary);
}
.onboarding-step-lead {
margin: 0 0 var(--space-5);
font-size: var(--fs-ui);
line-height: 1.55;
color: var(--text-secondary);
max-width: 44rem;
}
.onboarding-welcome { text-align: center; padding: var(--space-2) var(--space-1) var(--space-1); }
.onboarding-welcome .onboarding-step-lead { margin-left: auto; margin-right: auto; }
.onboarding-welcome-visual {
position: relative;
width: 96px;
height: 96px;
margin: var(--space-1) auto var(--space-5);
}
.onboarding-orb {
position: absolute;
border-radius: 50%;
filter: blur(2px);
}
.onboarding-orb--1 {
inset: 0;
background: radial-gradient(circle at 30% 30%, var(--accent-soft), var(--accent) 70%);
opacity: 0.35;
animation: onboarding-pulse 3.5s ease-in-out infinite;
}
.onboarding-orb--2 {
inset: var(--space-3);
background: radial-gradient(circle at 70% 70%, var(--warn-soft), var(--warn) 75%);
opacity: 0.4;
animation: onboarding-pulse 3.5s ease-in-out infinite 0.4s;
}
.onboarding-welcome-icon {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--surface);
border: 1px solid var(--border);
box-shadow: var(--shadow-md);
color: var(--primary);
}
@keyframes onboarding-pulse {
0%, 100% { transform: scale(1); opacity: 0.35; }
50% { transform: scale(1.06); opacity: 0.5; }
}
.onboarding-feature-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-3);
margin: 0 auto var(--space-5);
max-width: 520px;
text-align: left;
}
@media (min-width: 640px) {
.onboarding-feature-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: none; }
}
.onboarding-feature {
display: flex;
flex-direction: column;
gap: var(--space-1);
padding: var(--space-4) var(--space-3);
border-radius: 12px;
border: 1px solid var(--border);
background: linear-gradient(180deg, var(--surface), var(--bg-soft));
min-width: 0;
}
.onboarding-feature-icon {
display: inline-flex;
width: 2rem;
height: 2rem;
align-items: center;
justify-content: center;
border-radius: 8px;
background: var(--primary-soft);
color: var(--primary);
margin-bottom: var(--space-1);
}
.onboarding-feature strong {
font-size: var(--fs-ui);
color: var(--text-primary);
}
.onboarding-feature span {
font-size: var(--fs-label);
color: var(--text-tertiary);
line-height: 1.3;
}
.onboarding-section {
padding: var(--space-4) var(--space-4) var(--space-4);
margin-bottom: var(--space-1);
border-radius: 12px;
border: 1px solid var(--border-divider, var(--border-divider));
background: var(--bg-soft);
}
.onboarding-section-title {
margin: 0 0 var(--space-1);
font-size: var(--fs-ui);
font-weight: var(--fw-bold);
color: var(--text-primary);
}
.onboarding-section-hint {
margin: 0 0 var(--space-3);
font-size: var(--fs-body);
color: var(--text-tertiary);
line-height: 1.4;
}
.onboarding-form { display: flex; flex-direction: column; gap: var(--space-4); }
.onboarding-field-row {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-3);
}
@media (min-width: 640px) {
.onboarding-field-row--2 { grid-template-columns: 1fr 1fr; }
.onboarding-field--span2 { grid-column: 1 / -1; }
}
.onboarding-field label {
display: block;
margin-bottom: var(--space-1);
font-size: var(--fs-body);
font-weight: var(--fw-semi);
color: var(--text-secondary);
}
.onboarding-field .form-control,
.onboarding-field input,
.onboarding-field select {
width: 100%;
max-width: 100%;
}
.onboarding-primary-cta {
align-self: flex-start;
margin-top: var(--space-1);
padding: var(--space-3) var(--space-5);
font-size: var(--fs-ui);
border-radius: 10px;
box-shadow: 0 6px 16px rgba(37, 99, 235, 0.2);
}
.onboarding-welcome .onboarding-primary-cta { align-self: center; }
.onboarding-hint {
margin: 0;
font-size: var(--fs-body);
color: var(--text-tertiary);
line-height: 1.45;
}
.onboarding-skip-form { margin-top: var(--space-1); }
.onboarding-hub-toolbar {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
margin-bottom: var(--space-4);
}
.onboarding-hub-actions {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-2);
margin-top: var(--space-5);
}
.onboarding-entity-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.onboarding-entity-list li {
display: flex;
flex-direction: column;
gap: var(--space-1);
padding: var(--space-3) var(--space-4);
border: 1px solid var(--border);
border-radius: 10px;
background: var(--bg-soft);
}
.onboarding-entity-title {
font-weight: var(--fw-semi);
font-size: var(--fs-ui);
color: var(--text-primary);
}
.onboarding-entity-meta {
font-size: var(--fs-body);
color: var(--text-tertiary);
}
.onboarding-empty-hint {
margin: 0 0 var(--space-2);
padding: var(--space-3) var(--space-4);
border-radius: 10px;
border: 1px dashed var(--border);
color: var(--text-tertiary);
font-size: var(--fs-ui);
background: rgba(255, 255, 255, 0.5);
}
.onboarding-side-card { padding: var(--space-4) var(--space-5) var(--space-5); }
.onboarding-side-title {
margin: 0 0 var(--space-4);
font-size: var(--fs-body);
font-weight: var(--fw-bold);
letter-spacing: 0.02em;
}
.onboarding-side-list {
list-style: none;
margin: 0 0 var(--space-4);
padding: 0;
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.onboarding-side-list li {
display: flex;
gap: var(--space-3);
align-items: flex-start;
}
.onboarding-side-dot {
width: 0.65rem;
height: 0.65rem;
margin-top: var(--space-1);
border-radius: 999px;
background: var(--border-strong, var(--border-strong));
flex-shrink: 0;
}
.onboarding-side-list li.is-done .onboarding-side-dot {
background: var(--ok);
box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.15);
}
.onboarding-side-list li.is-skip .onboarding-side-dot { background: var(--warn); }
.onboarding-side-label {
display: block;
font-size: var(--fs-label);
font-weight: var(--fw-bold);
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-tertiary);
}
.onboarding-side-value {
display: block;
font-size: var(--fs-ui);
font-weight: var(--fw-semi);
color: var(--text-primary);
line-height: 1.3;
}
.onboarding-side-list li.is-done .onboarding-side-value { color: var(--ok-strong); }
.onboarding-side-note {
margin: 0;
font-size: var(--fs-label);
line-height: 1.45;
color: var(--text-tertiary);
padding-top: var(--space-3);
border-top: 1px solid var(--border-divider, var(--border-divider));
}
/* Completion */
.onboarding-complete {
text-align: center;
padding: var(--space-4) var(--space-2) var(--space-2);
position: relative;
}
.onboarding-complete-check {
width: 72px;
height: 72px;
margin: var(--space-1) auto var(--space-4);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--surface);
background: linear-gradient(145deg, var(--ok), var(--ok));
box-shadow: 0 12px 28px rgba(22, 163, 74, 0.28);
animation: onboarding-pop 0.55s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
}
@keyframes onboarding-pop {
0% { transform: scale(0.4); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
.onboarding-complete-title {
margin: 0 0 var(--space-2);
font-size: var(--fs-page-title);
font-weight: var(--fw-bold);
letter-spacing: -0.03em;
}
.onboarding-complete-lead {
margin: 0 auto var(--space-5);
max-width: 34rem;
font-size: var(--fs-ui);
line-height: 1.55;
color: var(--text-secondary);
}
.onboarding-complete-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-4);
text-align: left;
margin-bottom: var(--space-5);
}
@media (min-width: 720px) {
.onboarding-complete-grid { grid-template-columns: 1.15fr 1fr; }
}
.onboarding-complete-card {
padding: var(--space-4) var(--space-4);
border-radius: 14px;
border: 1px solid var(--border);
background: var(--bg-soft);
}
.onboarding-complete-card--accent {
background: linear-gradient(165deg, var(--bg-attention) 0%, var(--surface) 55%);
border-color: var(--border-attention, var(--border-attention));
}
.onboarding-complete-card h3 {
margin: 0 0 var(--space-3);
font-size: var(--fs-ui);
font-weight: var(--fw-bold);
}
.onboarding-summary-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.onboarding-summary-list li {
display: flex;
justify-content: space-between;
gap: var(--space-3);
padding: var(--space-2) 0;
border-bottom: 1px solid var(--border-divider, var(--border-divider));
font-size: var(--fs-ui);
}
.onboarding-summary-list li:last-child { border-bottom: 0; }
.onboarding-summary-list span { color: var(--text-tertiary); }
.onboarding-summary-list strong { font-weight: var(--fw-semi); text-align: right; }
.onboarding-summary-list li.is-yes strong { color: var(--ok-strong); }
.onboarding-summary-list li.is-skip strong { color: var(--warn); }
.onboarding-driver-creds {
margin-top: var(--space-3);
padding-top: var(--space-3);
border-top: 1px solid var(--border-divider, var(--border-divider));
}
.onboarding-complete-next {
text-align: left;
padding: var(--space-4) var(--space-5) var(--space-5);
border-radius: 14px;
background: var(--bg-soft);
border: 1px solid var(--border);
}
.onboarding-complete-next h3 {
margin: 0 0 var(--space-3);
font-size: var(--fs-ui);
font-weight: var(--fw-bold);
color: var(--text-primary);
}
.onboarding-complete-next ul {
margin: 0;
padding-left: var(--space-5);
color: var(--text-secondary);
line-height: 1.65;
font-size: var(--fs-ui);
}
.onboarding-complete-next li {
margin-bottom: var(--space-1);
}
.onboarding-complete-burst {
pointer-events: none;
position: absolute;
inset: 0;
overflow: hidden;
}
.onboarding-complete-burst span {
position: absolute;
width: 8px;
height: 8px;
border-radius: 2px;
opacity: 0;
animation: onboarding-confetti 1.4s ease-out forwards;
}
.onboarding-complete-burst span:nth-child(1) { left: 12%; top: 18%; background: var(--accent); animation-delay: 0.05s; }
.onboarding-complete-burst span:nth-child(2) { left: 28%; top: 10%; background: var(--ok); animation-delay: 0.12s; }
.onboarding-complete-burst span:nth-child(3) { left: 48%; top: 8%; background: var(--warn); animation-delay: 0.18s; }
.onboarding-complete-burst span:nth-child(4) { left: 68%; top: 12%; background: var(--danger); animation-delay: 0.1s; }
.onboarding-complete-burst span:nth-child(5) { left: 82%; top: 20%; background: #8b5cf6; animation-delay: 0.22s; }
.onboarding-complete-burst span:nth-child(6) { left: 55%; top: 22%; background: #06b6d4; animation-delay: 0.28s; }
@keyframes onboarding-confetti {
0% { transform: translateY(0) rotate(0deg) scale(0.6); opacity: 0; }
15% { opacity: 1; }
100% { transform: translateY(70px) rotate(220deg) scale(1); opacity: 0; }
}
.onboarding-dl {
margin: 0;
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.onboarding-dl > div {
display: grid;
grid-template-columns: 7.5rem 1fr;
gap: var(--space-2);
align-items: baseline;
}
.onboarding-dl dt {
margin: 0;
font-size: var(--fs-label);
font-weight: var(--fw-bold);
color: var(--text-tertiary);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.onboarding-dl dd { margin: 0; font-size: var(--fs-ui); word-break: break-word; }
.onboarding-dl code {
font-size: var(--fs-ui);
background: var(--surface);
padding: var(--space-1) var(--space-2);
border-radius: 6px;
border: 1px solid var(--border);
}
.onboarding-password {
font-size: var(--fs-ui) !important;
font-weight: var(--fw-bold);
letter-spacing: 0.05em;
}
.onboarding-password-warn {
display: block;
margin-top: var(--space-1);
font-size: var(--fs-label);
color: var(--warn);
line-height: 1.35;
}
/* ===========================
4a. SIDEBAR — NEXLOG WHITE
=========================== */
.sidebar {
background: var(--surface);
border-right: 1px solid var(--border);
display: flex;
flex-direction: column;
padding: var(--space-5) var(--space-3) var(--space-4);
position: sticky;
top: 0;
height: 100vh;
overflow-y: auto;
}
.brand {
display: flex;
gap: var(--space-3);
align-items: center;
padding: var(--space-1) var(--space-2) var(--space-5);
flex-shrink: 0;
}
.brand-mark {
width: 36px; height: 36px;
border-radius: 10px;
background: var(--body-bg);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.brand-name { font-weight: var(--fw-bold); font-size: var(--fs-ui); letter-spacing: -0.01em; color: var(--text-primary); }
.brand-role { font-size: var(--fs-label); color: var(--text-secondary); }
.nav { display: flex; flex-direction: column; gap: var(--space-1); flex: 1; }
.nav-item {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-button);
color: var(--text-body);
font-size: var(--fs-ui);
font-weight: var(--fw-medium);
text-decoration: none;
transition: background 0.1s, color 0.1s;
cursor: pointer;
}
.nav-item:hover { background: var(--bg-subtle); color: var(--text-body); text-decoration: none; }
.nav-item.active { background: var(--primary); color: var(--surface); }
.nav-item.active .nav-icon svg { stroke: var(--surface); }
/* CSS data-URI icons (background-image) can't inherit currentColor — force white via filter */
.nav-item.active .nav-icon span[class^="icon-"] { filter: brightness(0) invert(1); }
/* Same problem on dark-background buttons (white text) — invert their data-URI icons to white */
.btn-primary span[class^="icon-"],
.btn-danger span[class^="icon-"] {
filter: brightness(0) invert(1);
}
.nav-icon { display: flex; align-items: center; color: var(--text-secondary); flex-shrink: 0; }
.nav-item.active .nav-icon { color: var(--surface); }
.nav-label { flex: 1; }
.nav-caret { opacity: 0.8; }
.sidebar-footer {
border-top: 1px solid var(--border);
padding-top: var(--space-3);
margin-top: var(--space-2);
flex-shrink: 0;
}
.user-row { display: flex; gap: var(--space-2); align-items: center; padding: var(--space-1) var(--space-2) var(--space-2); }
.user-avatar {
width: 32px; height: 32px;
border-radius: 999px;
background: var(--accent-soft);
color: var(--accent-hover);
font-weight: var(--fw-semi); font-size: var(--fs-label);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
letter-spacing: 0.02em;
text-transform: uppercase;
}
.user-meta { min-width: 0; }
.user-name-sidebar { font-size: var(--fs-body); font-weight: var(--fw-semi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-name { font-size: var(--fs-body); font-weight: var(--fw-semi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-primary); }
.user-position { font-size: var(--fs-body); font-weight: var(--fw-semi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-primary); }
.user-email { font-size: var(--fs-label); color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-email-sidebar { font-size: var(--fs-label); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-phone { font-size: var(--fs-label); color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.logout {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-button);
color: var(--text-secondary);
font-size: var(--fs-ui);
font-weight: var(--fw-medium);
cursor: pointer;
text-decoration: none;
transition: background 0.1s, color 0.1s;
}
.logout:hover { background: var(--bg-subtle); color: var(--text-body); text-decoration: none; }
/* ===========================
4b. SIDEBAR — DARK NAVY (legacy, kept for reference)
=========================== */
.base_container_legacy { display: flex; min-height: 100vh; }
.base_navbar {
position: fixed;
top: 0; left: 0;
z-index: 30;
height: 100vh;
width: var(--sidebar-width);
overflow-y: auto;
background: var(--sidebar-bg);
border-right: 1px solid var(--sidebar-border);
display: flex;
flex-direction: column;
padding: 0;
}
/* Remove all bullets/list-styling from navbar */
.base_navbar ul,
.base_navbar ol { list-style: none; padding: 0; margin: 0; }
.base_navbar li { list-style: none; padding: 0; margin: 0; }
/* Brand / logo area */
.sidebar-brand {
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-4) var(--space-4) var(--space-3);
border-bottom: 1px solid var(--sidebar-border);
flex-shrink: 0;
}
.sidebar-brand-icon {
width: 32px; height: 32px;
background: rgba(0,0,0,0.28);
border-radius: 7px;
display: flex; align-items: center; justify-content: center;
color: rgba(255,255,255,0.88);
font-size: var(--fs-ui);
flex-shrink: 0;
}
.sidebar-brand-text {
display: flex; flex-direction: column;
gap: 1px; min-width: 0;
}
.sidebar-brand-name {
font-size: var(--fs-ui); font-weight: var(--fw-bold);
color: var(--surface); line-height: 1.25;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidebar-brand-subtitle {
font-size: var(--fs-label);
color: rgba(255,255,255,0.42);
white-space: nowrap;
}
/* Nav links list */
.base_navbar .flex-1 > ul:last-child,
.base_navbar .space-y-8 {
display: flex;
flex-direction: column;
gap: var(--space-1);
padding: var(--space-2) var(--space-2);
}
/* Kill space-y-8 margin inside navbar */
.base_navbar .space-y-8 > * + * { margin-top: 0 !important; }
.base_navbar .space-y-8 > li + li { margin-top: 0 !important; }
/* Individual nav link */
.base_navbar_link {
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-3);
font-size: var(--fs-body);
font-weight: var(--fw-medium);
color: var(--sidebar-text);
border-radius: var(--radius-md);
transition: background 0.12s, color 0.12s;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
line-height: 1.4;
}
.base_navbar_link i {
font-size: var(--fs-ui);
flex-shrink: 0;
opacity: 0.82;
width: 16px; text-align: center;
}
.base_navbar_link:hover {
background: var(--sidebar-hover-bg);
color: var(--sidebar-text-hover);
text-decoration: none;
}
.base_navbar_link:hover i { opacity: 1; }
/* Active state */
.base_navbar_link.active,
.base_navbar_link[aria-current="page"],
.base_navbar_link.base_active {
background: var(--sidebar-active-bg);
color: var(--sidebar-active-text);
font-weight: var(--fw-semi);
}
.base_navbar_link.active i,
.base_navbar_link.base_active i { opacity: 1; }
/* User info section */
.sidebar-user-info {
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-3) var(--space-4);
border-top: 1px solid var(--sidebar-border);
}
.sidebar-user-avatar {
width: 30px; height: 30px;
border-radius: 50%;
background: rgba(255,255,255,0.14);
color: var(--surface);
font-size: var(--fs-label); font-weight: var(--fw-semi);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
letter-spacing: 0.02em;
}
.sidebar-user-details {
display: flex; flex-direction: column;
gap: 1px; min-width: 0;
}
.sidebar-user-name {
font-size: var(--fs-body); font-weight: var(--fw-medium);
color: var(--surface);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidebar-user-email {
font-size: var(--fs-label);
color: rgba(255,255,255,0.42);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Bottom section (logout / feedback) */
.base_navbar > ul {
display: flex;
flex-direction: column;
gap: var(--space-1);
padding: var(--space-1) var(--space-2) var(--space-2);
border-top: 1px solid var(--sidebar-border);
}
.base_navbar > ul > li + li { margin-top: 0; }
/* ===========================
5. CONTENT AREA
=========================== */
.base_content {
min-height: 100vh;
min-width: 0;
}
.base_content_hero {
display: flex;
flex-direction: column;
gap: var(--space-2);
padding: var(--space-5) var(--space-5) 0;
width: 100%;
box-sizing: border-box;
}
@media (min-width: 1024px) {
.base_content_hero { flex-direction: row; align-items: center; }
}
/* Detail pages: single .page-header must span the hero so .title-row can push actions right */
.base_content_hero:has(> .page-header) {
flex-direction: column;
align-items: stretch;
}
.hero_title_container { flex: 1; }
.hero_title {
font-size: var(--fs-page-title);
font-weight: var(--fw-bold);
color: var(--text-primary);
letter-spacing: -0.025em;
line-height: 1.25;
}
.hero_subtitle {
margin: var(--space-1) 0 0;
font-size: var(--fs-ui);
font-weight: var(--fw-medium);
color: var(--text-tertiary, var(--text-muted));
line-height: 1.35;
}
.hero_buttons_container {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2);
padding-bottom: var(--space-1);
}
@media (min-width: 1024px) { .hero_buttons_container { justify-content: flex-end; } }
/* Overview default-filter chips (vehicles first; reusable for other lists) */
.overview-chip-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-3) var(--space-3);
/* Extra air before the table toolbar/search so list zone starts lower */
margin: 0 0 var(--space-5);
}
.overview-chip-caption {
flex: 0 0 auto;
}
.overview-chip-strip {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-1);
flex: 1 1 auto;
min-width: 0;
}
.overview-chip {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-1) var(--space-3);
border-radius: var(--radius-md, 0.5rem);
border: 1px solid var(--border, var(--border-subtle));
background: var(--surface, var(--surface));
color: var(--text-primary, var(--text-strong));
text-decoration: none;
font-size: var(--fs-label);
font-weight: var(--fw-medium);
line-height: 1.2;
transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
box-shadow: none;
}
.overview-chip:hover {
border-color: var(--border-strong, var(--border-strong));
background: var(--bg-soft);
}
.overview-chip-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.35rem;
padding: 1px var(--space-1);
border-radius: 0.25rem;
background: var(--bg-muted);
font-size: var(--fs-caption);
font-weight: var(--fw-bold);
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
}
.overview-chip-label {
color: var(--text-secondary, var(--text-body));
font-weight: var(--fw-medium);
}
.overview-chip.is-active {
border-color: var(--primary, var(--accent));
background: rgba(37, 99, 235, 0.07);
}
.overview-chip.is-active .overview-chip-label {
color: var(--primary, var(--accent));
font-weight: var(--fw-semi);
}
.overview-chip.is-active .overview-chip-count {
background: rgba(37, 99, 235, 0.12);
color: var(--primary, var(--accent));
}
.overview-chip.tone-critical .overview-chip-count {
color: var(--danger);
background: var(--danger-soft);
}
.overview-chip.tone-warn .overview-chip-count {
color: var(--warn);
background: var(--bg-attention);
}
.overview-chip.tone-ok .overview-chip-count {
color: var(--ok);
background: var(--ok-soft);
}
.overview-chip.tone-muted .overview-chip-count {
color: var(--text-muted, var(--text-muted));
background: var(--bg-soft);
}
.overview-chip.tone-neutral .overview-chip-count {
color: var(--text-primary, var(--text-strong));
background: var(--bg-muted);
}
.overview-chip.tone-critical.is-active {
border-color: var(--danger, var(--danger));
background: var(--danger-soft);
}
.overview-chip.tone-critical.is-active .overview-chip-count {
background: var(--danger-soft);
}
.overview-chip.tone-warn.is-active {
border-color: var(--warn);
background: var(--bg-attention);
}
.overview-chip.tone-warn.is-active .overview-chip-count {
background: var(--warn-soft);
}
.overview-chip.tone-ok.is-active {
border-color: var(--ok);
background: var(--ok-soft);
}
.overview-chip.tone-ok.is-active .overview-chip-count {
background: var(--ok-soft);
}
/* Overview Handlungsbedarf (vehicles pilot; Offene-Meldungen shell + KPI cards) */
.overview-handlungsbedarf-section.messages-section {
/* Sand / attention panel (same as default .messages-section) */
margin-bottom: var(--space-5);
background: var(--bg-attention);
border-color: var(--border-attention);
}
/* Inventory panel: chips + table as one group (idea 4).
No solid white fill — page is warm beige and table rows are already white;
border + padding only so the block reads as a unit without a flat slab. */
.overview-table-panel {
border: 1px solid var(--border);
border-radius: var(--radius-card, 12px);
padding: var(--space-4) var(--space-4) var(--space-3);
background: transparent;
box-shadow: var(--shadow-xs);
}
.overview-table-panel .overview-chip-row {
margin-bottom: var(--space-3);
}
.overview-table-panel .table-toolbar {
margin-bottom: var(--space-3);
}
.overview-table-panel .table-pagination {
margin-top: var(--space-3);
padding-top: var(--space-2);
}
.overview-handlungsbedarf-section .messages-header {
margin-bottom: var(--space-3);
}
.overview-kpi-strip {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-6);
margin: 0;
}
@media (min-width: 900px) {
.overview-kpi-strip {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--space-6);
}
}
/* Compact horizontal strip: icon+label left, count right */
.overview-kpi-card {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: var(--space-1);
padding: var(--space-1) var(--space-1);
min-height: 0;
background: var(--surface, var(--surface));
transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
a.overview-kpi-card:hover {
box-shadow: 0 2px 10px rgba(31, 42, 64, 0.08);
}
.overview-kpi-card.is-active {
border-color: var(--primary, var(--accent));
box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.25);
}
.overview-kpi-card .kpi-label {
display: flex;
align-items: center;
gap: var(--space-1);
margin-bottom: 0;
flex: 1 1 auto;
min-width: 0;
/* Larger than table body (--fs-body 13px) for strip readability */
font-size: var(--fs-ui); /* ~15px at 14px root */
font-weight: var(--fw-medium);
color: var(--text-primary, var(--text-strong));
line-height: 1.25;
}
.overview-kpi-card .kpi-label svg {
stroke: var(--text-primary, var(--text-strong));
color: var(--text-primary, var(--text-strong));
flex-shrink: 0;
}
.overview-kpi-card .kpi-label > span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.overview-kpi-value {
flex: 0 0 auto;
font-size: var(--fs-kpi);
font-weight: var(--fw-bold);
letter-spacing: -0.03em;
font-variant-numeric: tabular-nums;
line-height: 1;
color: var(--text-primary, var(--text-strong));
}
.overview-kpi-value.tone-critical { color: var(--danger); }
.overview-kpi-value.tone-warn { color: var(--warn); }
.overview-kpi-value.tone-ok { color: var(--ok); }
.overview-kpi-value.tone-muted { color: var(--text-muted, var(--text-muted)); }
.base_content_inner { padding: var(--space-5) var(--space-5) var(--space-6); }
.modal-overlay {
/* Above support banner (z-index 100); panels sit higher still */
position: fixed; inset: 0; z-index: 110;
background: rgba(0,0,0,0.4);
backdrop-filter: blur(3px);
}
/* ===========================
6. KPI METRICS (scoreboard cards)
=========================== */
.kpi-metrics-row {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--space-3);
width: 100%;
margin-bottom: var(--space-4);
}
/* Fewer than 4 metrics: size cards by content, do not stretch empty columns */
.kpi-metrics-row.kpi-metrics-row--auto {
grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}
/* Nested under partner-shell table panels (contact/insurance) — slightly quieter */
.kpi-metrics-row.kpi-metrics-row--in-panel {
margin-bottom: var(--space-3);
gap: var(--space-2);
}
.kpi-metrics-row.kpi-metrics-row--in-panel .kpi-metric-card {
padding: var(--space-2) var(--space-3);
}
.kpi-metrics-row.kpi-metrics-row--in-panel .kpi-value {
font-size: var(--fs-value);
font-weight: var(--fw-bold);
}
@media (max-width: 900px) {
.kpi-metrics-row {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.kpi-metrics-row.kpi-metrics-row--auto {
grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}
}
.kpi-metric-card {
min-width: 0;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-card);
padding: var(--space-3) var(--space-5);
}
a.kpi-metric-card { color: inherit; text-decoration: none; }
/* Handlungsbedarf overview cards: same gray as default cards, just thicker.
Must follow .kpi-metric-card so border-width wins. */
.kpi-metric-card.overview-kpi-card {
border: 2px solid var(--border);
}
a.kpi-metric-card.overview-kpi-card:hover {
border-color: var(--border-strong, var(--border));
}
/* ===========================
7. ALERTS
=========================== */
.alert-success {
background: var(--ok-soft); border-left: var(--space-1) solid var(--ok);
color: var(--ok-strong); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4);
border-radius: 0 var(--radius-md) var(--radius-md) 0; font-size: var(--fs-body);
}
.alert-error {
background: var(--danger-soft); border-left: var(--space-1) solid var(--danger);
color: var(--danger-strong); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4);
border-radius: 0 var(--radius-md) var(--radius-md) 0; font-size: var(--fs-body);
}
/* ===========================
8. BUTTONS
=========================== */
button {
display: inline-flex; align-items: center; justify-content: center;
gap: var(--space-1); padding: var(--space-2) var(--space-3);
font-size: var(--fs-body); font-weight: var(--fw-medium); font-family: inherit;
border: 1px solid transparent; border-radius: var(--radius-md);
background: transparent; cursor: pointer;
transition: all 0.15s; white-space: nowrap;
letter-spacing: 0.005em;
}
.button-primary {
color: var(--primary); background: var(--primary-soft);
border-color: var(--accent-soft);
}
.button-primary:hover {
color: var(--surface); background: var(--primary);
border-color: var(--primary);
box-shadow: 0 2px 6px rgba(37,99,235,0.2);
}
.button-primary.active { color: var(--surface); background: var(--primary); border-color: var(--primary); }
.button-primary-highlight { color: var(--surface); background: var(--danger); border-color: var(--danger); }
a .button-primary { display: inline-flex; align-items: center; justify-content: center; }
.button-secondary {
color: var(--text-body); background: var(--surface);
border-color: var(--border);
}
.button-secondary:hover { background: var(--bg-soft); border-color: var(--border-strong); }
.button-dark {
color: var(--surface);
background: var(--sidebar-bg);
border-color: var(--sidebar-bg);
}
.button-dark:hover {
color: var(--surface);
background: var(--primary);
border-color: var(--primary);
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.button-dark:active { background: var(--sidebar-bg); }
.button-success {
color: var(--surface); background: var(--wizard-line-bg-completed); border-color: var(--wizard-line-bg-completed);
}
.button-success:hover { background: var(--ok-strong); }
/*
* Modal dismiss × (modal-generic / modal-generic-wide / filter panel header).
* Keep soft red glyph style; larger hit target for easier clicking.
* Include .text-link.button-close so later .text-link { font-size/color } cannot shrink it.
*/
.button-close,
button.button-close,
.text-link.button-close {
color: var(--danger);
background: transparent;
border: none;
padding: var(--space-2) var(--space-3);
gap: 0;
font-size: var(--fs-page-title);
font-weight: var(--fw-regular);
line-height: 1;
letter-spacing: normal;
min-width: 2.5rem;
min-height: 2.5rem;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-sm, 0.25rem);
cursor: pointer;
box-sizing: border-box;
flex-shrink: 0;
text-decoration: none;
white-space: nowrap;
}
.button-close:hover,
button.button-close:hover,
.text-link.button-close:hover {
color: var(--danger-strong);
background: var(--danger-soft);
text-decoration: none;
}
/* Pin header dismiss × on modals / side panels */
.modal-generic > .flex.justify-end .button-close,
.modal-generic-wide > .flex.justify-end .button-close,
.columns-config-modal > .flex.justify-end .button-close,
.save-filter-modal > .flex.justify-end .button-close,
.column-filter-modal > .flex.justify-end .button-close,
.filter-modal > .flex.justify-end .button-close {
position: absolute;
top: var(--space-1);
right: var(--space-1);
z-index: 20;
}
/* Filter/table row button */
.primary-button {
background: var(--surface); color: var(--text-primary);
border: 1px solid var(--border); padding: var(--space-2) var(--space-3);
border-radius: var(--radius-md); font-size: var(--fs-label); font-weight: var(--fw-medium);
cursor: pointer; transition: all 0.15s; font-family: inherit;
}
.primary-button.active {
background: var(--primary) !important; color: var(--surface) !important;
border-color: var(--primary) !important;
}
.primary-button:not(.active):hover {
background: var(--primary-soft); color: var(--primary);
border-color: var(--accent-soft);
}
.button-fullwidth { width: 100%; }
.submit-btn {
background: var(--primary); color: white; font-weight: var(--fw-semi);
padding: var(--space-2) var(--space-5); border-radius: var(--radius-md);
border: none; cursor: pointer; font-size: var(--fs-ui);
font-family: inherit; transition: all 0.2s;
box-shadow: 0 2px 4px rgba(37,99,235,0.2);
display: inline-flex; align-items: center; gap: var(--space-2);
}
.submit-btn:hover {
background: var(--primary-hover);
box-shadow: 0 4px 10px rgba(37,99,235,0.3);
transform: translateY(-1px);
}
/* ===========================
9. MODERN TABLES
Clean, minimal — like reference screenshot
=========================== */
/* Table shell: meta + docked Alle Filter tab on the top-right of the frame */
.table-shell {
position: relative;
margin-top: var(--space-1);
}
.table-shell-header {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: var(--space-3);
min-height: 2.25rem;
}
.table-shell-header .table-count {
padding: 0 0 var(--space-2) var(--space-1);
line-height: 1.2;
}
/* Table container */
.table-wrapper {
border-radius: var(--radius-card);
overflow: hidden;
border: 1px solid var(--border);
position: relative;
z-index: 1;
}
/* Leave top-right corner square so the docked filter tab joins cleanly */
.table-shell .table-wrapper {
border-top-right-radius: 0;
}
.table-wrapper table {
border: none;
}
table {
width: 100%;
border-collapse: collapse;
font-size: var(--fs-label); /* 12px cells */
/* auto: columns size by content (narrow status, wider names), not equal shares */
table-layout: auto;
}
/* Column headers */
.table-header,
thead,
table thead {
background: var(--surface) !important;
border-bottom: 1px solid var(--border) !important;
}
.table-header th,
thead th,
table thead th {
padding: var(--space-2) var(--space-cell-x);
font-size: var(--fs-caption); /* 11px headers */
font-weight: var(--fw-semi);
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--text-muted);
background: var(--surface);
border-bottom: 1px solid var(--border);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: left;
/* Cap so one long header label can't dominate the row */
max-width: 12rem;
}
.table-header th:hover,
thead th:hover {
color: var(--primary);
background: var(--bg-muted) !important;
cursor: pointer;
}
/* Active filter / sort column headers (generic_table.html) */
.column-header-btn {
position: relative;
cursor: pointer;
}
.table-header th.column-header-active,
thead th.column-header-active,
table thead th.column-header-active {
background: var(--accent-soft) !important;
color: var(--accent-strong) !important;
}
.table-header th.column-header-active:hover,
thead th.column-header-active:hover,
table thead th.column-header-active:hover {
background: var(--accent-soft) !important;
color: var(--accent-strong) !important;
}
.column-header-sort-indicator {
position: absolute;
right: var(--space-1);
top: 50%;
transform: translateY(-50%);
font-size: var(--fs-label);
line-height: 1;
color: var(--primary);
font-weight: var(--fw-bold);
}
/* Table rows */
tbody tr {
border-bottom: 1px solid var(--bg-muted);
transition: background 0.1s;
}
tbody tr:last-child { border-bottom: none; }
tbody td,
table td {
padding: var(--space-cell-y) var(--space-cell-x);
font-size: var(--fs-label); /* 12px cells */
color: var(--text-primary);
vertical-align: middle;
background: transparent;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
/* Prefer natural width from content; ellipsis when a single cell runs long */
max-width: 14rem;
}
.row-default,
.row-default td {
background: var(--surface);
}
.row-alt,
.row-alt td {
background: var(--bg-soft);
}
.data-table tbody tr:nth-child(odd),
.data-table tbody tr:nth-child(odd) td {
background: var(--surface);
}
.data-table tbody tr:nth-child(even),
.data-table tbody tr:nth-child(even) td {
background: var(--bg-soft);
}
/* Row hover */
tr.cursor-pointer:hover,
tr.row-hover:hover,
tbody tr:hover,
tr:not(thead tr):hover {
background: var(--bg-soft) !important;
}
tr.cursor-pointer:hover td,
tr.row-hover:hover td,
tbody tr:hover td,
tr:not(thead tr):hover td {
background: var(--bg-soft) !important;
}
.status-inactive {
background: var(--danger-soft) !important;
color: var(--danger-strong) !important;
}
/* Modern status badges */
.status-badge {
display: inline-flex; align-items: center; gap: var(--space-1);
padding: var(--space-1) var(--space-2);
border-radius: var(--radius-full);
font-size: var(--fs-label); font-weight: var(--fw-semi);
letter-spacing: 0.02em; white-space: nowrap;
}
.status-badge-active { background: var(--ok-soft); color: var(--ok-strong); }
.status-badge-ok { background: var(--ok-soft); color: var(--ok-strong); }
.status-badge-inactive{ background: var(--danger-soft); color: var(--danger-strong); }
.status-badge-critical{ background: var(--danger-soft); color: var(--danger-strong); }
.status-badge-warning { background: var(--warn-soft); color: var(--warn); }
.status-badge-info { background: var(--accent-soft); color: var(--accent-strong); }
.status-badge-neutral { background: var(--bg-muted); color: var(--text-body); }
/* Opening hours card (contact / insurance detail) */
.oh-panel-title-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
width: 100%;
}
.oh-panel-title-row .panel-title-left {
display: inline-flex;
align-items: center;
gap: var(--space-2);
min-width: 0;
}
.oh-status-badge {
display: inline-flex;
align-items: center;
gap: var(--space-1);
padding: var(--space-1) var(--space-2);
border-radius: var(--radius-full);
font-size: var(--fs-label);
font-weight: var(--fw-semi);
white-space: nowrap;
flex-shrink: 0;
}
.oh-status-open {
background: var(--ok-soft);
color: var(--ok-strong);
}
.oh-status-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
}
.oh-schedule {
padding: var(--space-1) var(--space-4) var(--space-4);
}
.oh-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
padding: var(--space-2) 0;
border-bottom: 1px solid var(--border);
font-size: var(--fs-ui);
}
.oh-row:last-child { border-bottom: none; }
.oh-day {
color: var(--text-primary);
font-weight: var(--fw-medium);
}
.oh-time {
color: var(--text-primary);
font-variant-numeric: tabular-nums;
}
.oh-time.oh-empty-value,
.oh-empty {
color: var(--text-tertiary);
}
/* Opening hours wizard step */
.oh-wizard-hint {
margin: 0;
color: var(--text-tertiary);
font-size: var(--fs-body);
line-height: 1.4;
}
.oh-wizard-period {
display: flex;
align-items: center;
margin-top: var(--space-1);
}
.oh-wizard-period-label {
font-size: var(--fs-ui);
font-weight: var(--fw-semi);
color: var(--text-primary);
}
.wizard-field .oh-time-input {
min-height: 2.5rem;
font-variant-numeric: tabular-nums;
color-scheme: light;
}
.wizard-field .oh-time-input::-webkit-calendar-picker-indicator {
cursor: pointer;
opacity: 0.65;
}
.wizard-field .oh-time-input::-webkit-calendar-picker-indicator:hover {
opacity: 1;
}
.thumbnail-table-container { width: 44px; height: 44px; background: var(--bg-muted); border-radius: var(--radius-md); overflow: hidden; }
.thumbnail-table { max-width: 44px; max-height: 44px; object-fit: cover; }
.icon-table { width: 18px; height: 18px; min-width: 18px; }
.clickable-icon {
display: inline-flex; align-items: center; justify-content: center;
width: 28px; height: 28px;
border-radius: var(--radius-full);
color: var(--primary); transition: all 0.15s;
}
.clickable-icon:hover {
background: var(--primary); color: white; transform: scale(1.06);
}
.clickable-icon:active { transform: scale(0.95); }
/* ===========================
10. MODALS
=========================== */
.image-zoom-modal {
display: none; position: fixed; inset: 0;
background: rgba(0,0,0,0.8); z-index: 1000;
align-items: center; justify-content: center;
}
.image-zoom-modal-img {
max-width: 90vw; max-height: 90vh;
object-fit: contain; border-radius: var(--radius-xl);
box-shadow: var(--shadow-2xl);
}
.image_zoom_modal_close {
position: absolute; top: var(--space-4); right: var(--space-4);
width: 40px; height: 40px; border-radius: var(--radius-full);
background: rgba(255,255,255,0.12); color: white;
font-size: var(--fs-kpi); cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: background 0.15s;
}
.image_zoom_modal_close:hover { background: rgba(255,255,255,0.22); }
.zoomable-image:hover { cursor: zoom-in; }
.columns-config-modal,
.save-filter-modal,
.column-filter-modal,
.modal-generic {
cursor: default; position: fixed; top: 0; left: 0; right: 0;
margin: 5vh auto; width: 100%;
max-width: min(95vw, 32rem); max-height: 90vh;
background: var(--surface); box-shadow: var(--shadow-2xl);
border-radius: var(--radius-xl); border: 1px solid var(--border);
z-index: 120; overflow-y: auto;
}
.modal-generic-wide {
cursor: default; position: fixed; top: 0; left: 0; right: 0;
margin: 5vh auto; width: 100%;
max-width: min(95vw, 56rem); max-height: 90vh;
background: var(--surface); box-shadow: var(--shadow-2xl);
border-radius: var(--radius-xl); border: 1px solid var(--border);
z-index: 120; overflow-y: auto;
}
/*
* Body scroll lock while a modal is open.
* Overlay (.modal-overlay / #modal_overlay) is shown together with
* .modal-generic / .modal-generic-wide (and other fixed panels).
* Modal content may still scroll via overflow-y: auto; contain stops
* wheel/touch scroll from chaining through to the page behind.
*/
html:has(#modal_overlay:not(.hidden)),
html:has(.modal-overlay:not(.hidden)),
body:has(#modal_overlay:not(.hidden)),
body:has(.modal-overlay:not(.hidden)),
html:has(.modal-generic:not(.hidden)),
html:has(.modal-generic-wide:not(.hidden)),
body:has(.modal-generic:not(.hidden)),
body:has(.modal-generic-wide:not(.hidden)) {
overflow: hidden !important;
overscroll-behavior: none;
}
.columns-config-modal,
.save-filter-modal,
.column-filter-modal,
.modal-generic,
.modal-generic-wide,
.filter-modal {
overscroll-behavior: contain;
}
.filter-modal {
cursor: default; position: fixed; top: 0; right: 0; height: 100%;
width: 100%; max-width: min(95vw, 32rem);
background: var(--surface); box-shadow: -4px 0 24px rgba(0,0,0,0.1);
border-left: 1px solid var(--border);
border-radius: var(--radius-xl) 0 0 var(--radius-xl);
z-index: 120; overflow-y: auto;
}
/* Slide the panel off-screen to the right when closed (JS toggles .translate-x-full) */
.filter-modal {
transition: transform 0.2s ease;
}
.filter-modal.translate-x-full {
transform: translateX(100%);
}
.columns-config-modal-col {
width: 100%; display: flex; align-items: center;
background: var(--primary-soft); border: 1px solid var(--border);
border-radius: var(--radius-sm); margin-bottom: var(--space-1);
}
.columns-config-modal-col:hover { cursor: grab; background: var(--bg-muted); }
.columns-config-modal-col.dragging { cursor: grabbing; }
.columns-config-modal-col-name { flex: 1; padding: var(--space-2) var(--space-3); font-size: var(--fs-body); }
.columns-config-modal-col-removebtn { padding: 0 var(--space-2); color: var(--danger); background: transparent; min-width: 36px; text-align: center; }
.columns-config-modal-col-removebtn:hover { cursor: pointer; color: var(--danger-strong); background: var(--danger-soft); }
/* Both classes are on the same node: "filter-row filter-modal-filter-row".
* .filter-row later sets border-radius shorthand — use higher specificity here
* and again after .filter-row so top-right stays square. */
.filter-modal-filter-row,
.filter-row.filter-modal-filter-row {
position: relative; display: flex; flex-direction: column;
/* Extra right padding so selects clear the corner × */
padding: var(--space-3) var(--space-6) var(--space-3) var(--space-3);
gap: var(--space-2); margin-bottom: var(--space-2);
border: 1px solid var(--border);
/* Square top-right so hover of corner × meets the row edge cleanly */
border-radius: var(--radius-md);
border-top-right-radius: 0;
background: var(--surface);
}
/*
* Alle Filter per-row remove ×:
* Same family as modal .button-close, but smaller.
* Top-right of button = top-right of .filter-modal-filter-row (top/right: 0).
*/
.filter-modal-filter-row > .button-close,
.filter-row > .button-close,
.filter-modal-filter-row > .remove-filter-btn,
.filter-row > .remove-filter-btn,
.filter-modal-filter-row > .text-link.button-close,
.filter-row > .text-link.button-close {
position: absolute;
top: 0;
right: 0;
z-index: 10;
/* Smaller than modal dismiss (1.75rem / 2.5rem min) */
font-size: var(--fs-value);
padding: var(--space-1) var(--space-1);
min-width: 1.75rem;
min-height: 1.75rem;
line-height: 1;
/* Match square top-right of the filter row for hover fill */
border-top-right-radius: 0;
border-top-left-radius: var(--radius-sm, 0.25rem);
border-bottom-left-radius: var(--radius-sm, 0.25rem);
border-bottom-right-radius: var(--radius-sm, 0.25rem);
}
.filter-modal-filter-value-container { width: 100%; }
/* Ported from generictable_grok.css → new token system */
.filter-row { background: var(--body-bg); border-radius: var(--radius-2xl); }
/* Re-assert square top-right after .filter-row shorthand (same element has both classes) */
.filter-row.filter-modal-filter-row {
border-radius: var(--radius-md);
border-top-right-radius: 0;
background: var(--surface);
}
.filter-modal-filter-field-select,
.filter-modal-filter-relation-select,
.filter-modal-filter-value-select {
padding: var(--space-1) var(--space-2); border: 1px solid var(--border);
background: var(--surface); border-radius: var(--radius-sm);
font-size: var(--fs-body); font-family: inherit; color: var(--text-primary);
}
.filter-modal-filter-field-select { width: 66.67%; }
.filter-modal-filter-relation-select { width: 33.33%; }
.filter-modal-filter-value-select { width: 100%; margin-top: var(--space-1); }
.context-menu {
background: var(--surface); box-shadow: var(--shadow-lg);
border-radius: var(--radius-lg); border: 1px solid var(--border);
z-index: 50; position: absolute; min-width: 160px; padding: var(--space-1);
}
.context-menu-item {
display: block; width: 100%; text-align: left;
padding: var(--space-2) var(--space-3); font-size: var(--fs-body);
border-radius: var(--radius-sm); color: var(--text-primary);
cursor: default; transition: background 0.1s;
}
.context-menu-item:hover { background: var(--primary-soft); color: var(--primary); cursor: pointer; }
/* Docked to table top-right: clipped tab, no border (clip-path would crop strokes). */
.open-filter-modal-button {
position: relative;
z-index: 2;
display: inline-flex;
align-items: center;
gap: var(--space-1);
margin: 0;
margin-bottom: -1px; /* sit on the table top border */
padding: var(--space-2) var(--space-4) var(--space-2) var(--space-5);
border: none;
border-radius: 0;
background: var(--bg-muted);
color: var(--text-primary, var(--text-strong));
font-size: var(--fs-body);
font-weight: var(--fw-semi);
font-family: inherit;
line-height: 1.2;
cursor: pointer;
box-shadow: none;
/* Diagonal left edge so the control hooks into the table */
clip-path: polygon(0.7rem 0, 100% 0, 100% 100%, 0 100%, 0.7rem 0);
transition: background 0.15s ease, color 0.15s ease;
}
.open-filter-modal-button:hover,
.open-filter-modal-button.is-active:hover {
background: var(--border-subtle);
color: var(--primary, var(--accent));
}
.open-filter-modal-button:focus-visible {
outline: 2px solid var(--primary, var(--accent));
outline-offset: 2px;
}
.open-filter-modal-button .bi {
font-size: var(--fs-ui);
opacity: 0.85;
}
/* When column filters are active — hover still wins (see :hover rules above) */
.open-filter-modal-button.is-active {
color: var(--primary, var(--accent));
background: rgba(37, 99, 235, 0.1);
}
.add-modal {
position: fixed; inset: 0;
display: flex; align-items: flex-start; justify-content: center; z-index: 50;
}
.add-modal.hidden { display: none !important; }
/* ===========================
11. FORMS
=========================== */
label {
display: block; font-size: var(--fs-body);
font-weight: var(--fw-medium); color: var(--text-body);
}
input, select, textarea {
width: 100%; padding: var(--space-2) var(--space-3);
font-size: var(--fs-ui); font-family: inherit;
border: 1px solid var(--border-strong); border-radius: var(--radius-md);
background: white; color: var(--text-primary);
transition: border-color 0.15s, box-shadow 0.15s; line-height: 1.5;
}
input:focus, select:focus, textarea:focus {
outline: none; border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(37,99,235,0.08);
}
textarea { min-height: 80px; resize: vertical; }
input[type="file"]::-webkit-file-upload-button,
input[type="file"]::file-selector-button {
appearance: none; -webkit-appearance: none;
background: var(--primary); color: white;
font-weight: var(--fw-medium); padding: var(--space-2) var(--space-3);
border: none; border-radius: var(--radius-sm);
cursor: pointer; transition: background 0.15s;
margin-right: var(--space-3); font-size: var(--fs-body); font-family: inherit;
}
input[type="file"]::-webkit-file-upload-button:hover,
input[type="file"]::file-selector-button:hover { background: var(--primary-hover); }
input[type="file"] { padding: var(--space-1) 0; line-height: 1.5; }
.file-input-container { word-break: break-word; overflow-wrap: break-word; }
.file-input-container a { display: inline-block; max-width: 20ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
.file-input-container a:hover { text-decoration: underline; color: var(--primary-hover); }
.file-input-container .fileinput-remove,
.file-input-container input[type="checkbox"][name$="-clear"],
.file-input-container label[for$="-clear_id"] { display: none !important; }
.file-input-xlsx, .file-input-pdf, .file-input-image, .file-input-pdf-image {
position: relative; width: 100%;
padding: var(--space-2) var(--space-3) var(--space-2) var(--space-6);
border: 1px solid var(--border-strong); border-radius: var(--radius-md);
background: white; color: var(--text-body);
}
.file-input-xlsx:hover, .file-input-pdf:hover, .file-input-image:hover, .file-input-pdf-image:hover { border-color: var(--text-muted); background: var(--bg-soft); }
.file-input-xlsx:focus, .file-input-pdf:focus, .file-input-image:focus, .file-input-pdf-image:focus { outline: none; box-shadow: 0 0 0 3px rgba(37,99,235,0.08); border-color: var(--primary); }
/* PDF+image combined upload control (registration certificate scans, etc.) */
.file-input-pdf-image::before {
content: "\F37D"; /* bi-filetype-pdf — same family as .file-input-pdf */
font-family: "bootstrap-icons";
position: absolute; left: var(--space-3); top: 50%; transform: translateY(-50%);
color: var(--text-muted); font-size: var(--fs-value); pointer-events: none;
}
.searchable-select-wrapper { position: relative; }
.searchable-select-input { box-sizing: border-box; }
.searchable-select-container { max-height: 300px; overflow-y: auto; }
.searchable-choice { position: relative; }
.search-input {
width: 100%; padding: var(--space-2) var(--space-3); font-size: var(--fs-ui);
border: 1px solid var(--border-strong); border-radius: var(--radius-md);
background: white; transition: all 0.15s; font-family: inherit; color: var(--text-primary);
}
.search-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37,99,235,0.08); }
.search-results { list-style: none; margin: 0; padding: var(--space-1) 0; }
.search-results li { padding: var(--space-2) var(--space-3); cursor: pointer; font-size: var(--fs-body); transition: background 0.1s; }
.search-results li:hover { background: var(--bg-muted); }
.selected-value {
display: inline-flex; align-items: center;
padding: var(--space-1) var(--space-2); background: var(--primary);
color: white; border-radius: var(--radius-full);
font-size: var(--fs-label); font-weight: var(--fw-medium);
}
.remove-selected-value {
margin-left: var(--space-1); color: rgba(255,255,255,0.75); cursor: pointer;
border: none; background: transparent; padding: 0; line-height: 1;
font-size: var(--fs-ui); font-weight: var(--fw-semi);
}
.remove-selected-value:hover { color: white; }
/* Searchable multi-select (chips + typeahead) */
.searchable-multi-choice {
position: relative;
width: 100%;
}
.searchable-multi-choice-box {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-1);
min-height: 2.5rem;
padding: var(--space-1) var(--space-2);
border: 1px solid var(--border-strong, var(--border-strong));
border-radius: var(--radius-md, 0.5rem);
background: white;
transition: border-color 0.15s, box-shadow 0.15s;
cursor: text;
}
.searchable-multi-choice-box:focus-within {
border-color: var(--primary, var(--accent));
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
}
.searchable-multi-choice-chips {
display: contents;
}
.searchable-multi-choice-chip {
max-width: 100%;
gap: var(--space-1);
}
.searchable-multi-choice-input {
flex: 1 1 8rem;
min-width: 8rem;
border: none !important;
box-shadow: none !important;
padding: var(--space-1) var(--space-1) !important;
background: transparent !important;
outline: none;
}
.searchable-multi-choice .search-results {
position: absolute;
top: 100%;
left: 0;
width: 100%;
z-index: 50;
margin-top: var(--space-1);
list-style: none;
padding: var(--space-1) 0;
border: 1px solid var(--border-strong, var(--border-strong));
border-radius: var(--radius-md, 0.5rem);
background: white;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
max-height: 15rem;
overflow: auto;
}
.searchable-multi-choice .search-results li {
padding: var(--space-2) var(--space-3);
cursor: pointer;
font-size: var(--fs-ui);
}
.searchable-multi-choice .search-results li:hover {
background: var(--bg-muted);
}
.searchable-multi-choice .search-results li.no-results {
color: var(--text-muted);
cursor: default;
}
.searchable-multi-choice .search-results li.no-results:hover {
background: transparent;
}
#column_values_container {
padding: var(--space-1) 0; border-radius: var(--radius-md);
max-height: 16rem; overflow-y: auto; background: var(--surface);
}
#column_values_container label {
display: flex; align-items: center; padding: var(--space-1) var(--space-2);
border-radius: var(--radius-sm); font-size: var(--fs-body); transition: background 0.1s;
}
#column_values_container label:hover { background: var(--bg-muted); }
#column_values_container .column-value-checkbox { margin-right: var(--space-2); accent-color: var(--primary); width: 14px; height: 14px; }
.error-container { min-height: 1.25rem; transition: all 0.2s; }
.error-container:empty { opacity: 0; }
.errorlist { color: var(--danger); font-size: var(--fs-label); margin-top: var(--space-1); }
.warning-box {
position: relative; width: 100%; padding: var(--space-3) var(--space-3) var(--space-3) 2.875rem;
border-radius: var(--radius-md); border: 1px solid var(--danger-soft);
background: var(--danger-soft); color: var(--danger-strong); font-size: var(--fs-body);
}
.warning-box::before {
content: "\F33A"; font-family: "bootstrap-icons";
position: absolute; left: var(--space-3); top: var(--space-3);
font-size: var(--fs-value); color: var(--danger);
}
.warning-box-title { font-weight: var(--fw-semi); margin-bottom: var(--space-1); display: block; }
/* ===========================
12. WIZARD
=========================== */
.wizard-progress { margin: var(--wizard-progress-margin); padding-bottom: var(--space-5); border-bottom: 1px solid var(--border); }
.wizard-progress-meta {
margin: var(--space-1) 0 0;
font-size: var(--fs-ui);
color: var(--text-tertiary, var(--text-muted));
font-weight: var(--fw-medium);
}
.steps-container { display: flex; align-items: center; justify-content: center; max-width: 800px; margin: 0 auto; gap: var(--wizard-steps-gap); width: 100%; flex-wrap: nowrap; }
.step-item { display: flex; flex-direction: column; align-items: center; flex: 0 0 auto; min-width: 60px; }
.step-line { height: var(--wizard-line-height); background: var(--wizard-line-bg-default); flex-grow: 1; flex-shrink: 1; min-width: 20px; max-width: 100px; border-radius: var(--radius-full); transition: background 0.35s ease; }
.step-line.completed { background: var(--wizard-circle-bg-completed); }
.step-circle {
width: var(--wizard-circle-size); height: var(--wizard-circle-size); border-radius: 50%;
background: var(--wizard-circle-bg-default); color: var(--wizard-circle-text-default);
display: flex; align-items: center; justify-content: center;
font-weight: var(--fw-bold); font-size: var(--fs-body);
border: var(--wizard-circle-border-width) solid var(--wizard-circle-bg-default);
transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
position: relative;
}
.step-circle .step-circle-icon { display: none; font-size: var(--fs-ui); line-height: 1; }
.step-circle.has-step-icon .step-circle-num { display: none; }
.step-circle.has-step-icon .step-circle-icon { display: inline-block; }
/* Completed: always show check, even if step has a thematic icon */
.step-circle.show-check .step-circle-num { display: none; }
.step-circle.show-check .step-circle-icon {
display: inline-block;
font-family: "bootstrap-icons" !important;
}
.step-circle.show-check .step-circle-icon::before {
content: "\F26B"; /* bi-check-circle-fill — overridden to simple check via bi-check-lg below */
}
.step-circle.show-check .step-circle-icon.bi::before {
content: "\F633"; /* bi-check-lg */
}
.step-item.completed .step-circle { background: var(--wizard-circle-bg-completed); color: var(--wizard-circle-text-completed); border-color: var(--wizard-circle-border-completed); }
.step-item.current .step-circle { background: var(--wizard-circle-bg-current); color: var(--wizard-circle-text-current); border-color: var(--wizard-circle-border-current); box-shadow: 0 0 0 4px var(--wizard-glow-current); transform: scale(1.08); }
.step-label { margin-top: var(--space-1); font-size: var(--fs-label); color: var(--wizard-label-text-default); white-space: nowrap; text-align: center; font-weight: var(--fw-medium); transition: color 0.25s ease; }
.step-item.completed .step-label { color: var(--wizard-label-text-completed); }
.step-item.current .step-label { color: var(--wizard-label-text-current); font-weight: var(--fw-bold); }
.step-item.clickable.navigable { cursor: pointer; }
.step-item.clickable.navigable:hover .step-circle { filter: brightness(1.05); }
.step-item.clickable.navigable:focus-visible { outline: 2px solid var(--wizard-circle-border-current); outline-offset: 4px; border-radius: var(--radius-md); }
.step { display: none; background: white; border-radius: var(--radius-lg); border: 1px solid var(--border); padding: var(--space-4); box-shadow: var(--shadow-xs); }
.step.active { display: block; }
.step.active.step-enter {
animation: wizard-step-in 0.28s ease both;
}
@keyframes wizard-step-in {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
.wizard-layout-file-element-container { display: flex; flex-direction: column; gap: var(--space-2); overflow: hidden; padding: var(--space-2); border-radius: var(--radius-lg); border: 1px solid var(--border); }
/* PillRadioSelect — checklist status cards (protocol wizard step 5) */
.radio-pill-group {
display: flex;
flex-wrap: nowrap;
gap: var(--space-2);
width: 100%;
margin: var(--space-1) 0 0;
}
.radio-pill-group > div {
flex: 1 1 25%;
min-width: 0;
position: relative;
}
.radio-pill-group input[type="radio"] {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
opacity: 0;
cursor: pointer;
z-index: 1;
}
.radio-pill-group label.pill-option {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-1);
width: 100%;
min-height: 4.75rem;
padding: var(--space-2) var(--space-1);
border: 2px solid var(--border);
border-radius: var(--radius-md);
background: var(--bg-soft);
color: var(--text-strong);
font-size: var(--fs-label);
font-weight: var(--fw-semi);
line-height: 1.2;
text-align: center;
cursor: pointer;
user-select: none;
box-sizing: border-box;
transition: border-color 0.15s ease, background 0.15s ease;
}
.radio-pill-group label.pill-option:hover {
border-color: var(--text-muted);
background: var(--bg-muted);
}
.radio-pill-group input[type="radio"]:focus-visible + label.pill-option {
outline: 2px solid var(--primary);
outline-offset: 2px;
}
.radio-pill-group input[value="OK"]:checked + label.pill-option {
border-color: var(--ok);
background: var(--ok-soft);
color: var(--text-strong);
}
.radio-pill-group input[value="Warnung"]:checked + label.pill-option {
border-color: var(--warn);
background: var(--bg-attention);
color: var(--text-strong);
}
.radio-pill-group input[value="Kritisch"]:checked + label.pill-option {
border-color: var(--danger);
background: var(--danger-soft);
color: var(--text-strong);
}
.radio-pill-group input[value="Nicht geprüft"]:checked + label.pill-option {
border-color: var(--text-muted);
background: var(--bg-muted);
color: var(--text-strong);
}
.radio-pill-group input[value="registered"]:checked + label.pill-option {
border-color: var(--primary);
background: var(--primary-soft);
color: var(--text-strong);
}
.radio-pill-group input[value="manual"]:checked + label.pill-option {
border-color: var(--violet);
background: var(--primary-soft);
color: var(--text-strong);
}
.pill-icon {
width: 1.5rem;
height: 1.5rem;
flex-shrink: 0;
object-fit: contain;
}
.pill-icon.bi {
width: auto;
height: auto;
font-size: var(--fs-page-title);
line-height: 1;
color: var(--text-muted);
}
.radio-pill-group input[value="Nicht geprüft"]:checked + label.pill-option .pill-icon.bi {
color: var(--text-muted);
}
/* Checklist message row — full width below status cards */
.wizard-cell:has(.protocol-checklist-msg) > .wizard-label {
display: none;
}
.wizard-cell:has(.protocol-checklist-msg) .protocol-checklist-msg {
min-height: 4.5rem;
resize: vertical;
}
/* CardCheckboxInput — toggle cards (same language as PillRadioSelect / Fahrer benennen) */
.wizard-cell:has(.checkbox-card) > .wizard-label {
display: none;
}
.wizard-field:has(.checkbox-card) {
margin-top: 0;
}
.checkbox-card {
position: relative;
width: 100%;
min-height: 4.75rem;
}
.checkbox-card input.checkbox-card-input {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
opacity: 0;
cursor: pointer;
z-index: 1;
border: none;
background: transparent;
box-shadow: none;
appearance: none;
-webkit-appearance: none;
}
.checkbox-card label.checkbox-card-option {
display: flex;
flex-direction: row;
align-items: flex-start;
gap: var(--space-3);
width: 100%;
min-height: 4.75rem;
padding: var(--space-3) var(--space-3);
border: 2px solid var(--border);
border-radius: var(--radius-md);
background: var(--bg-soft);
color: var(--text-strong);
cursor: pointer;
user-select: none;
box-sizing: border-box;
transition: border-color 0.15s ease, background 0.15s ease;
}
.checkbox-card label.checkbox-card-option:hover {
border-color: var(--text-muted);
background: var(--bg-muted);
}
.checkbox-card input.checkbox-card-input:focus-visible + label.checkbox-card-option {
outline: 2px solid var(--primary);
outline-offset: 2px;
}
.checkbox-card input.checkbox-card-input:checked + label.checkbox-card-option {
border-color: var(--primary);
background: var(--primary-soft);
color: var(--text-strong);
}
.checkbox-card-check {
flex-shrink: 0;
width: 1.25rem;
height: 1.25rem;
margin-top: var(--space-1);
border: 2px solid var(--text-muted);
border-radius: 0.25rem;
background: var(--surface);
box-sizing: border-box;
position: relative;
transition: border-color 0.15s ease, background 0.15s ease;
}
.checkbox-card input.checkbox-card-input:checked + label.checkbox-card-option .checkbox-card-check {
border-color: var(--primary);
background: var(--primary);
}
.checkbox-card input.checkbox-card-input:checked + label.checkbox-card-option .checkbox-card-check::after {
content: '';
position: absolute;
left: var(--space-1);
top: var(--space-1);
width: 0.3rem;
height: 0.55rem;
border: solid var(--surface);
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.checkbox-card-body {
display: flex;
flex-direction: column;
gap: var(--space-1);
min-width: 0;
flex: 1 1 auto;
}
.checkbox-card-title {
font-size: var(--fs-body);
font-weight: var(--fw-semi);
line-height: 1.3;
}
.checkbox-card-help {
font-size: var(--fs-label);
font-weight: var(--fw-regular);
line-height: 1.35;
color: var(--text-body);
}
.form-row { display: flex; flex-direction: column; gap: var(--wizard-row-gap); margin-bottom: var(--wizard-row-margin-bottom); }
@media (min-width: 768px) { .form-row { flex-direction: row; flex-wrap: wrap; } .form-row > div { flex: 1 1 0%; min-width: 0; } }
.form-row label { display: block; margin-bottom: var(--wizard-label-margin-bottom); font-weight: var(--fw-medium); color: var(--text-body); }
.step input, .step select, .step textarea, .search-input { width: 100% !important; box-sizing: border-box; min-width: 0; height: var(--wizard-input-height); padding: var(--wizard-input-padding); font-size: var(--fs-ui); }
.step textarea { height: auto; min-height: var(--wizard-textarea-min-height); }
.preview-container { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-3); min-height: 120px; position: relative; background: var(--bg-soft); border-radius: var(--radius-md); }
.preview-container::before { content: "\F2E9"; font-family: "bootstrap-icons"; font-size: var(--fs-page-title); color: var(--border-strong); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; opacity: 0.5; }
.preview-thumb { position: relative; width: 48%; max-width: 130px; flex: 1 1 45%; }
.preview { padding: var(--wizard-preview-padding); width: 100%; display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--wizard-preview-min-width), 1fr)); gap: var(--space-3); min-height: 80px; background: var(--bg-soft); border-radius: var(--radius-md); }
.preview:has(> div) { background: white; }
.preview > div { position: relative; aspect-ratio: var(--wizard-preview-aspect-ratio); overflow: hidden; border-radius: var(--wizard-preview-border-radius); background: var(--wizard-preview-bg); border: var(--wizard-preview-border-width) solid var(--wizard-preview-border); box-shadow: var(--wizard-preview-shadow); }
.preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.preview .remove { position: absolute; top: -0.25rem; right: -0.25rem; width: var(--wizard-remove-size); height: var(--wizard-remove-size); background: var(--wizard-remove-bg); color: white; border-radius: var(--radius-full); font-size: var(--fs-label); border: none; cursor: pointer; box-shadow: var(--shadow-sm); transition: background 0.15s; z-index: 20; display: flex; align-items: center; justify-content: center; }
.preview .remove:hover { background: var(--wizard-remove-hover); }
.preview:empty::before { content: "Noch keine Fotos hochgeladen"; display: flex; align-items: center; justify-content: center; height: 100%; color: var(--text-muted); font-style: italic; font-size: var(--fs-body); text-align: center; }
.existing-preview img { max-width: 130px; border-radius: var(--radius-sm); }
.flex.flex-col.gap-2 { background: var(--bg-soft); border-radius: var(--radius-md); padding: var(--space-4); border: 1px solid var(--border); }
.flex.flex-col.gap-2:hover { background: var(--bg-muted); border-color: var(--border-strong); }
.flex.flex-col.gap-2 .preview { margin-top: var(--space-3); width: 100%; }
.flex.flex-col.gap-2 input, .flex.flex-col.gap-2 select, .flex.flex-col.gap-2 .search-input { width: 100%; }
.wizard-form { max-width: 56rem; margin-left: auto; margin-right: auto; padding: 0 var(--space-4); }
.wizard-header { text-align: center; margin-bottom: var(--space-5); }
.wizard-title { font-size: var(--fs-page-title); font-weight: var(--fw-semi); margin: 0; }
.wizard-row {
display: grid; grid-template-columns: 1fr; gap: var(--wizard-row-gap);
padding: var(--space-1) var(--space-2); margin-bottom: var(--space-1);
/* Stretch cells so multi-column rows share one height (labels top, inputs bottom). */
align-items: stretch;
}
@media (min-width: 768px) {
.wizard-row.wizard-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wizard-row.wizard-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wizard-row.wizard-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.wizard-row.wizard-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.wizard-row.wizard-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
.wizard-cell {
display: flex;
flex-direction: column;
gap: var(--space-1);
min-width: 0;
height: 100%;
}
.wizard-label {
display: block; font-weight: var(--fw-medium); color: var(--text-body);
font-size: var(--fs-ui); margin-bottom: var(--wizard-label-margin-bottom);
/* Keep label at top of the cell; wrapping labels grow the shared row height. */
flex: 0 0 auto;
}
.wizard-label .required {
color: var(--danger);
font-weight: var(--fw-semi);
}
/* Legacy page styles use `.required::after`; wizard labels already include `*`. */
.wizard-label .required::after { content: none; }
/* Pin inputs to the bottom of the cell so they line up across the row. */
.wizard-cell > .wizard-field,
.wizard-cell > .wizard-file-container {
margin-top: auto;
}
.wizard-field, .wizard-file-input-wrapper { width: 100%; }
.wizard-field {
position: relative;
}
.wizard-field input, .wizard-field select, .wizard-field textarea {
width: 100%; padding: var(--wizard-input-padding); font-size: var(--fs-ui);
border: 1px solid var(--border-strong); border-radius: var(--radius-md);
background: white; box-sizing: border-box; transition: all 0.15s ease;
}
.wizard-field.has-status-icon input,
.wizard-field.has-status-icon textarea {
padding-right: 2.35rem;
}
/* Native select keeps its chevron on the far right — leave room for both. */
.wizard-field.has-status-icon select {
padding-right: 3.5rem;
}
.wizard-field input:focus, .wizard-field select:focus, .wizard-field textarea:focus {
outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37,99,235,0.08);
}
.wizard-field textarea { height: auto; min-height: var(--wizard-textarea-min-height); }
/* Live validation status icon (check / error) inside the field */
.wizard-field-status {
position: absolute;
right: var(--space-3);
top: 50%;
transform: translateY(-50%);
width: 1.15rem;
height: 1.15rem;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
opacity: 0;
font-size: var(--fs-ui);
line-height: 1;
transition: opacity 0.15s ease, color 0.15s ease;
z-index: 2;
}
.wizard-field-status::before {
font-family: "bootstrap-icons";
font-style: normal;
font-weight: var(--fw-regular);
}
/* Sit left of the native select arrow (~1.25–1.5rem from the edge). */
.wizard-field.has-status-icon:has(select) .wizard-field-status {
right: var(--space-6);
}
.wizard-field.has-status-icon:has(textarea) .wizard-field-status {
top: var(--space-3);
transform: none;
}
.wizard-cell.is-field-valid .wizard-field-status,
.wizard-cell.is-field-invalid .wizard-field-status {
opacity: 1;
}
.wizard-cell.is-field-valid .wizard-field-status {
color: var(--ok);
}
.wizard-cell.is-field-valid .wizard-field-status::before {
content: "\F26B"; /* bi-check-circle-fill */
}
.wizard-cell.is-field-invalid .wizard-field-status {
color: var(--danger);
}
.wizard-cell.is-field-invalid .wizard-field-status::before {
content: "\F333"; /* bi-exclamation-circle-fill */
}
.wizard-cell.is-field-valid .wizard-field input,
.wizard-cell.is-field-valid .wizard-field select,
.wizard-cell.is-field-valid .wizard-field textarea {
border-color: var(--ok);
}
.wizard-cell.is-field-invalid .wizard-field input,
.wizard-cell.is-field-invalid .wizard-field select,
.wizard-cell.is-field-invalid .wizard-field textarea {
border-color: var(--danger, var(--danger));
}
.wizard-cell.is-field-valid .wizard-field input:focus,
.wizard-cell.is-field-valid .wizard-field select:focus,
.wizard-cell.is-field-valid .wizard-field textarea:focus {
border-color: var(--ok);
box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.12);
}
.wizard-cell.is-field-invalid .wizard-field input:focus,
.wizard-cell.is-field-invalid .wizard-field select:focus,
.wizard-cell.is-field-invalid .wizard-field textarea:focus {
border-color: var(--danger, var(--danger));
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}
/* Soft OCR review warnings (non-blocking) */
.wizard-cell.is-field-warning .wizard-field-status {
opacity: 1;
color: var(--warn);
}
.wizard-cell.is-field-warning .wizard-field-status::before {
content: "\F33A"; /* bi-exclamation-triangle-fill */
}
.wizard-cell.is-field-warning .wizard-field input,
.wizard-cell.is-field-warning .wizard-field select,
.wizard-cell.is-field-warning .wizard-field textarea {
border-color: var(--warn);
}
.wizard-cell.is-field-warning .wizard-field input:focus,
.wizard-cell.is-field-warning .wizard-field select:focus,
.wizard-cell.is-field-warning .wizard-field textarea:focus {
border-color: var(--warn);
box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);
}
.wizard-error.is-warning {
color: var(--warn);
}
/* Full-wizard wait overlay (OCR + Fertig/save, shared helper showWizardBusy) */
.wizard-busy-overlay {
position: absolute;
inset: 0;
/* Above modal close (z-index 20) and wizard steps while save/live-km runs */
z-index: 200;
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-5);
background: rgba(255, 255, 255, 0.78);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
pointer-events: all;
}
.wizard-busy-card {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-3);
max-width: 20rem;
padding: var(--space-5) var(--space-5);
text-align: center;
background: var(--surface, var(--surface));
border: 1px solid var(--border, var(--border-subtle));
border-radius: var(--radius-xl, 0.75rem);
box-shadow: var(--shadow-lg, 0 10px 30px rgba(15, 23, 42, 0.12));
}
.wizard-busy-spinner {
width: 2.25rem;
height: 2.25rem;
border: 3px solid var(--border, var(--border-subtle));
border-top-color: var(--primary, var(--accent));
border-radius: 50%;
animation: wizard-busy-spin 0.75s linear infinite;
}
@keyframes wizard-busy-spin {
to { transform: rotate(360deg); }
}
.wizard-busy-title {
margin: 0;
font-size: var(--fs-ui);
font-weight: var(--fw-semi);
color: var(--text-primary, var(--text-strong));
}
.wizard-busy-message {
margin: 0;
min-height: 1.25rem;
font-size: var(--fs-ui);
color: var(--text-muted, var(--text-muted));
transition: opacity 0.2s ease;
}
.wizard-html-block { color: var(--text-body); font-size: var(--fs-ui); line-height: 1.25; }
.wizard-file-container {
display: flex; flex-direction: column; gap: var(--space-2); overflow: hidden;
padding: var(--space-2); border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--surface);
}
.wizard-preview-container {
display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-4);
height: 140px; position: relative; background: var(--bg-soft);
border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden;
}
.wizard-preview-container::before {
content: "\F2E9"; font-family: "bootstrap-icons"; font-size: var(--fs-page-title); color: var(--border-strong);
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
pointer-events: none; opacity: 0.5;
}
.wizard-preview-container:has(.preview-thumb)::before,
.wizard-preview-container:has(img)::before { display: none; }
.preview-thumb img {
width: 100%;
height: auto;
object-fit: cover;
display: block;
border-radius: var(--radius-md);
}
.preview-thumb-badge {
position: absolute;
bottom: var(--space-1);
left: var(--space-1);
background: var(--overlay);
color: var(--text-inverse);
padding: 2px var(--space-2);
font-size: var(--fs-label);
border-radius: var(--radius-sm);
line-height: 1.2;
}
.preview-thumb .remove {
position: absolute; top: var(--space-1); right: var(--space-1); width: 18px; height: 18px;
background: var(--wizard-remove-bg); color: var(--text-inverse); font-size: var(--fs-ui); line-height: 1;
border: none; border-radius: var(--radius-full); cursor: pointer;
display: flex; align-items: center; justify-content: center;
box-shadow: var(--shadow-sm); z-index: 10; padding: 0;
}
.preview-thumb .remove:hover { background: var(--wizard-remove-hover); }
.wizard-actions { display: flex; margin-top: var(--space-6); gap: var(--space-2); }
.wizard-actions > div { flex: 1; }
.wizard-btn { width: 100%; }
.wizard-existing-file-link { font-size: var(--fs-ui); color: var(--accent-strong); text-decoration: none; }
.wizard-existing-file-link:hover { text-decoration: underline; }
.wizard-error {
min-height: 1.25rem; font-size: var(--fs-label); color: var(--danger);
margin-top: var(--space-1); transition: all 0.2s ease;
}
.wizard-error:empty { opacity: 0; }
.wizard-error.visible:not(:empty) { opacity: 1; }
/* Payment-method tile: preflight errors must stay readable under the CTA */
.billing-pm-error {
display: none;
min-height: 0;
margin-top: var(--space-3);
padding: var(--space-3) var(--space-4);
border: 1px solid var(--danger-soft, #fecaca);
border-radius: var(--radius-button, 0.5rem);
background: var(--danger-soft, #fef2f2);
color: var(--danger-strong, var(--danger));
font-size: var(--fs-label);
line-height: 1.45;
}
.billing-pm-error.visible:not(:empty) {
display: block;
opacity: 1;
}
.wizard-submit-error {
display: none;
margin: var(--space-4) 0 0;
padding: var(--space-3) var(--space-4);
border: 1px solid var(--danger-soft);
border-radius: var(--radius-button);
background: var(--danger-soft);
color: var(--danger-strong);
font-size: var(--fs-label);
line-height: 1.45;
}
.wizard-submit-error.visible { display: block; }
.wizard-submit-error strong { display: block; margin-bottom: var(--space-1); }
.wizard-submit-error ul {
margin: var(--space-1) 0 0 var(--space-4);
padding: 0;
list-style: disc;
}
.wizard-submit-error li + li { margin-top: var(--space-1); }
.wizard-submit-error--inline { margin-bottom: var(--space-3); }
.violation-case-alerts {
display: flex;
flex-direction: column;
gap: var(--space-3);
margin-bottom: var(--space-5);
}
.violation-case-alerts__panel {
padding: var(--space-3) var(--space-4);
border-radius: var(--radius-button);
font-size: var(--fs-label);
line-height: 1.45;
}
.violation-case-alerts__panel--blocked {
border: 1px solid var(--danger-soft);
background: var(--danger-soft);
color: var(--danger-strong);
}
.violation-case-alerts__panel--success {
border: 1px solid var(--ok-soft);
background: var(--ok-soft);
color: var(--ok-strong);
}
.violation-case-alerts__panel--hint {
border: 1px solid var(--warn-soft);
background: var(--bg-attention);
color: var(--warn-strong);
}
.violation-case-alerts__title {
display: flex;
align-items: center;
gap: var(--space-1);
font-weight: var(--fw-medium);
margin-bottom: var(--space-1);
}
.violation-case-alerts__list {
margin: var(--space-1) 0 0 var(--space-4);
padding: 0;
list-style: disc;
}
.violation-case-alerts__list li + li { margin-top: var(--space-1); }
.wizard-success {
color: var(--ok); text-align: center; padding: var(--space-6) 0;
font-size: var(--fs-value); font-weight: var(--fw-medium);
}
.wizard-success-panel {
text-align: center;
padding: 2.75rem var(--space-5) var(--space-6);
animation: wizard-success-in 0.4s ease both;
}
.wizard-success-icon {
font-size: var(--fs-page-title);
color: var(--ok);
line-height: 1;
margin-bottom: var(--space-3);
animation: wizard-success-pop 0.45s cubic-bezier(0.22, 1.2, 0.36, 1) both;
}
.wizard-success-title {
font-size: var(--fs-kpi);
font-weight: var(--fw-semi);
color: var(--text-strong);
margin-bottom: var(--space-1);
}
.wizard-success-msg {
font-size: var(--fs-ui);
color: var(--text-body);
max-width: 28rem;
margin: 0 auto var(--space-3);
line-height: 1.45;
}
.wizard-success-hint {
font-size: var(--fs-body);
color: var(--text-tertiary, var(--text-muted));
}
@keyframes wizard-success-in {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes wizard-success-pop {
0% { opacity: 0; transform: scale(0.6); }
70% { opacity: 1; transform: scale(1.08); }
100% { opacity: 1; transform: scale(1); }
}
/* Empty states (minis, cards, messages) */
.ui-empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
gap: var(--space-1);
padding: var(--space-5) var(--space-4);
color: var(--text-tertiary, var(--text-muted));
}
.ui-empty-state[data-compact="1"] {
padding: var(--space-4) var(--space-3);
}
.ui-empty-state-icon {
width: 2.5rem;
height: 2.5rem;
border-radius: 999px;
display: flex;
align-items: center;
justify-content: center;
background: var(--bg-muted);
color: var(--text-muted);
font-size: var(--fs-value);
margin-bottom: var(--space-1);
}
.ui-empty-state[data-compact="1"] .ui-empty-state-icon {
width: 2.1rem;
height: 2.1rem;
font-size: var(--fs-ui);
}
.ui-empty-state-title {
font-size: var(--fs-ui);
font-weight: var(--fw-semi);
color: var(--text-body);
}
.ui-empty-state-text {
font-size: var(--fs-body);
line-height: 1.4;
max-width: 22rem;
color: var(--text-tertiary, var(--text-muted));
}
.ui-empty-state-cell {
padding: var(--space-1) !important;
border-bottom: none !important;
}
td.ui-empty-state-cell:hover {
background: transparent !important;
}
/* Soften legacy empty line in messages if still used */
.messages-empty {
margin: 0;
padding: var(--space-4);
text-align: center;
color: var(--text-tertiary);
font-size: var(--fs-ui);
}
.searchable-choice .search-results {
position: absolute; top: 100%; left: 0; width: 100%; z-index: 50;
margin-top: var(--space-1); border: 1px solid var(--border-strong);
border-radius: var(--radius-md); background: white; box-shadow: var(--shadow-md);
max-height: 15rem; overflow: auto;
}
/* Portaled dropdown (appended to body) — escapes modal overflow clipping */
.search-results.search-results-portal {
position: fixed;
z-index: 10050;
margin: 0;
list-style: none;
padding: var(--space-1) 0;
border: 1px solid var(--border-strong, var(--border-strong));
border-radius: var(--radius-md, 0.5rem);
background: white;
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 4px 6px -2px rgba(0, 0, 0, 0.08);
max-height: 15rem;
overflow: auto;
}
.search-results.search-results-portal li {
padding: var(--space-2) var(--space-3);
cursor: pointer;
font-size: var(--fs-ui);
}
.search-results.search-results-portal li:hover,
.search-results.search-results-portal li.search-result-item:hover {
background: var(--bg-muted);
}
.search-results.search-results-portal li.search-result-separator {
cursor: default;
pointer-events: none;
}
.search-results.search-results-portal li.no-results {
color: var(--text-muted);
cursor: default;
}
.search-results.search-results-portal li.no-results:hover {
background: transparent;
}
.search-results li.no-results { color: var(--text-muted); cursor: default; }
.search-results li.no-results:hover { background: transparent; }
/* ===========================
13. TAGS
=========================== */
.tag {
display: inline-flex; align-items: center; justify-content: center;
padding: var(--space-1) var(--space-2); height: 20px;
border-radius: var(--radius-full); background: var(--primary); color: white;
font-size: var(--fs-label); font-weight: var(--fw-semi); letter-spacing: 0.025em;
white-space: nowrap;
}
.text-link { color: var(--primary); font-size: var(--fs-body); }
/* Keep modal close look when both classes are present (do not inherit link blue/size) */
.text-link.button-close {
color: var(--danger);
font-size: var(--fs-page-title);
}
.text-link.button-close:hover {
color: var(--danger-strong);
background: var(--danger-soft);
text-decoration: none;
}
.text-link-highlight:hover { cursor: pointer; text-decoration: underline; }
.border-anchor { border-color: var(--text-muted); }
/* ===========================
14. VEHICLE DETAIL / SECTIONS
=========================== */
.section-container { background: var(--bg-soft); border-radius: var(--radius-xl); padding: var(--space-3); overflow: hidden; border: 1px solid var(--border); }
.section-large { min-height: 19rem; overflow-y: auto; }
.section-medium { min-height: 14rem; overflow-y: auto; overflow-x: scroll; }
.modal-table td { padding: var(--space-1) var(--space-2); }
/* ===========================
15. TABS
=========================== */
.vehicle-details-container { max-width: 100%; margin: 0 auto; }
.tab-button-group { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--border); margin-bottom: var(--space-5); gap: var(--space-1); }
.tab-button-group-issues { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--border); margin-bottom: var(--space-5); gap: var(--space-1); padding-top: var(--space-6); }
.tab-content-container { padding: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.tab-content, .tab-content-issues { display: none; }
.tab-content.active, .tab-content-issues.active { display: block; }
.tab-content h2, .tab-content-issues h2 { margin-top: 0; color: var(--text-strong); font-size: var(--fs-ui); font-weight: var(--fw-semi); }
.tab-content p, .tab-content-issues p { margin: var(--space-2) 0; font-size: var(--fs-ui); }
.tab-content p strong, .tab-content-issues p strong { display: inline-block; width: 180px; }
/* ===========================
16. ONBOARDING
=========================== */
.onboarding-container { max-width: 900px; margin: 4rem auto; padding: 0 var(--space-5); }
.navbar-dark { background: var(--sidebar-bg); border-right: 1px solid var(--sidebar-border); padding: var(--space-5); position: fixed; top: 0; left: 0; height: 100%; width: var(--sidebar-width); z-index: 1000; }
.navbar-dark img { max-width: 100%; height: auto; display: block; }
.main-content { margin-left: var(--sidebar-width); padding: 4rem var(--space-6) var(--space-6); }
.card { background: white; border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); overflow: hidden; border: 1px solid var(--border); }
.tenant-banner { background: linear-gradient(to right, var(--primary-soft), var(--accent-soft)); padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--accent-soft); }
.section { padding: var(--space-5); }
.field-group { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-5); }
.field-group label { font-weight: var(--fw-medium); color: var(--text-body); font-size: var(--fs-body); }
.field-group input, .field-group select { height: var(--wizard-input-height); padding: var(--wizard-input-padding); font-size: var(--fs-ui); border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: white; transition: all 0.2s; }
.field-group input:focus, .field-group select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37,99,235,0.08); }
.grid-2 { display: grid; grid-template-columns: 1fr; gap: var(--space-5); }
@media (min-width: 768px) { .grid-2 { grid-template-columns: 1fr 1fr; } }
/* ===========================
17. DASHBOARD
=========================== */
.grid-stack-item { overflow: hidden; }
.grid-stack-item-content { display: flex; flex-direction: column; justify-content: stretch; align-items: stretch; width: 100%; height: 100%; box-sizing: border-box; background: var(--surface); border-radius: var(--radius-lg); border: 1px solid var(--border); }
.widget-header { display: flex; justify-content: space-between; align-items: center; padding: var(--space-2) var(--space-3); font-weight: var(--fw-semi); font-size: var(--fs-body); flex-shrink: 0; pointer-events: auto; border-bottom: 1px solid var(--border); color: var(--text-primary); }
.widget-header * { pointer-events: none; }
.widget-body { flex-grow: 1; overflow: auto; padding: var(--space-2); }
.widget-body img { display: block; width: 100%; height: auto; opacity: 0; animation: fadeGrow 0.4s ease forwards; }
@keyframes fadeGrow { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
.grid-stack-placeholder { background: rgba(37,99,235,0.06); border: 2px dashed var(--accent-soft); border-radius: var(--radius-lg); }
/* ===========================
18. AUTH PAGES
=========================== */
.auth-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--body-bg); }
.auth-card { background: white; padding: var(--space-6); border-radius: var(--radius-2xl); box-shadow: var(--shadow-xl); width: 100%; max-width: 22rem; border: 1px solid var(--border); }
.auth-card-wide { max-width: 26rem; text-align: center; }
.auth-title { font-size: var(--fs-page-title); font-weight: var(--fw-bold); text-align: center; color: var(--text-primary); margin-bottom: var(--space-5); letter-spacing: -0.025em; }
.auth-subtitle { font-size: var(--fs-value); font-weight: var(--fw-bold); text-align: center; color: var(--text-primary); margin-bottom: var(--space-5); letter-spacing: -0.02em; }
.auth-btn { width: 100%; background: var(--primary); color: white; font-weight: var(--fw-semi); padding: var(--space-2) var(--space-5); border-radius: var(--radius-md); border: none; font-size: var(--fs-ui); cursor: pointer; transition: all 0.2s; box-shadow: 0 2px 4px rgba(37,99,235,0.2); display: inline-block; text-align: center; font-family: inherit; }
.auth-btn:hover { background: var(--primary-hover); box-shadow: 0 4px 10px rgba(37,99,235,0.3); color: white; text-decoration: none; }
.auth-link { color: var(--primary); font-weight: var(--fw-medium); font-size: var(--fs-ui); }
.auth-link:hover { color: var(--primary-hover); text-decoration: underline; }
.auth-form-group { margin-bottom: var(--space-4); }
.auth-form-group label { display: block; font-size: var(--fs-body); font-weight: var(--fw-medium); color: var(--text-body); margin-bottom: var(--space-2); }
.auth-form-group input { display: block; width: 100%; margin-top: var(--space-1); padding: var(--space-2) var(--space-3); border: 1.5px solid var(--border-strong); border-radius: var(--radius-md); font-size: var(--fs-ui); font-family: inherit; box-sizing: border-box; }
.auth-form-group input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37,99,235,0.08); }
.auth-alert-error { margin-bottom: var(--space-3); padding: var(--space-2) var(--space-3); background: var(--danger-soft); color: var(--danger-strong); border-radius: var(--radius-md); font-size: var(--fs-body); border: 1px solid var(--danger-soft); }
.auth-alert-success { margin-bottom: var(--space-3); padding: var(--space-2) var(--space-3); background: var(--ok-soft); color: var(--ok-strong); border-radius: var(--radius-md); font-size: var(--fs-body); border: 1px solid var(--ok-soft); }
.auth-footer { margin-top: var(--space-5); text-align: center; font-size: var(--fs-body); color: var(--text-secondary); }
.auth-lead { margin: 0 0 var(--space-5); text-align: center; font-size: var(--fs-ui); color: var(--text-secondary); line-height: 1.5; }
.auth-card-narrow-center { max-width: 36rem; margin: 0 auto; text-align: center; }
/* ===========================
18b. TABLE TOOLBAR (semantic header structure)
=========================== */
.table-toolbar { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-2); }
.table-toolbar-row { display: flex; align-items: center; justify-content: flex-start; gap: var(--space-3); flex-wrap: wrap; }
.table-toolbar-filters { display: flex; align-items: center; gap: var(--space-2); flex: 1; flex-wrap: wrap; min-width: 0; }
.table-toolbar-search {
display: flex;
flex-direction: column;
align-items: stretch;
flex: 1;
max-width: 22rem;
gap: var(--space-1);
min-width: 12rem;
}
.table-search-input-wrapper { position: relative; flex: 1; width: 100%; }
.table-active-search {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: var(--space-1);
/* Always reserve one line so the table does not jump when search is toggled */
min-height: 1.35em;
font-size: var(--fs-body);
line-height: 1.35;
color: var(--text-secondary, var(--text-body));
padding: 0 var(--space-1);
}
.table-active-search.is-empty {
visibility: hidden;
pointer-events: none;
}
.table-active-search-placeholder {
display: block;
min-height: 1.35em;
}
.table-active-search-label {
font-weight: var(--fw-medium);
color: var(--text-tertiary, var(--text-muted));
}
.table-active-search-value {
font-weight: var(--fw-semi);
color: var(--primary, var(--accent));
word-break: break-word;
}
.table-count { font-size: var(--fs-label); font-weight: var(--fw-semi); color: var(--text-secondary); white-space: nowrap; }
.table-pagination {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
flex-wrap: wrap;
margin-top: var(--space-3);
}
.table-pagination__meta {
font-size: var(--fs-label);
color: var(--text-secondary);
font-weight: var(--fw-medium);
}
.table-pagination__actions {
display: flex;
align-items: center;
gap: var(--space-2);
}
.table-meta {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-2) 0;
font-size: var(--fs-body);
color: var(--text-muted);
}
/* Legacy meta alone (if used without shell) */
.table-meta:not(.table-shell-header) {
padding: var(--space-2) 0;
}
.table-filter-label { font-size: var(--fs-label); font-weight: var(--fw-semi); color: var(--text-secondary); white-space: nowrap; }
/* Supporting rules so the semantic markup renders without Tailwind utilities */
#filter-configs-container { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.filter-config-btn--user {
border-style: dashed;
border-color: var(--border-strong);
background: var(--bg-soft);
}
.filter-config-btn--user:hover:not(.active) {
background: var(--bg-muted);
border-color: var(--text-muted);
}
.filter-config-btn--user.active {
border-style: solid;
}
.table-search-input-wrapper input {
height: 2rem;
padding: 0 var(--space-6) 0 var(--space-3);
border-radius: var(--radius-button);
font-size: var(--fs-body);
border: 1px solid var(--border-input);
background: var(--surface);
}
.table-search-input-wrapper button { position: absolute; right: var(--space-2); top: 50%; transform: translateY(-50%); padding: var(--space-1); }
/* ===========================
19. UTILITY CLASSES
=========================== */
.hidden { display: none !important; }
.inline { display: inline !important; }
.block { display: block; }
.inline-block { display: inline-block; }
.inline { display: inline; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; padding-left: 0.5em; padding-right: 0.5em; }
.flex-row { flex-direction: row; } .flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; } .flex-nowrap { flex-wrap: nowrap; }
.flex-1 { flex: 1 1 0%; } .flex-auto { flex: 1 1 auto; }
.flex-none { flex: none; } .flex-shrink-0 { flex-shrink: 0; }
.items-start { align-items: flex-start; } .items-center { align-items: center; }
.items-end { align-items: flex-end; } .items-stretch { align-items: stretch; }
.self-center { align-self: center; } .self-start { align-self: flex-start; }
.self-end { align-self: flex-end; }
.justify-start { justify-content: flex-start; } .justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; } .justify-between{ justify-content: space-between; }
.justify-around { justify-content: space-around; }
.gap-1{gap:var(--space-1)} .gap-2{gap:var(--space-2)} .gap-3{gap:var(--space-3)} .gap-4{gap:var(--space-4)}
.gap-5{gap:1.25rem}.gap-6{gap:1.5rem} .gap-8{gap:2rem} .gap-10{gap:2.5rem}
.space-y-1>*+*{margin-top:.25rem} .space-y-2>*+*{margin-top:.5rem}
.space-y-3>*+*{margin-top:.75rem} .space-y-4>*+*{margin-top:1rem}
.space-y-5>*+*{margin-top:1.25rem} .space-y-6>*+*{margin-top:1.5rem}
.space-y-8>*+*{margin-top:2rem}
/* Kill space-y-* inside navbar */
.base_navbar .space-y-8>*+*,
.base_navbar .space-y-8>li+li { margin-top: 0 !important; }
.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}
.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(min-width:768px){.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.md\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(min-width:1024px){.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:flex-row{flex-direction:row}.lg\:items-center{align-items:center}.lg\:justify-end{justify-content:flex-end}}
.w-full{width:100%} .w-auto{width:auto}
.w-1\/2{width:50%} .w-1\/3{width:33.333%} .w-2\/3{width:66.667%}
.w-1\/4{width:25%} .w-3\/4{width:75%}
.w-1\/5{width:20%} .w-4\/5{width:80%}
.w-11\/12{width:91.667%} .w-1\/12{width:8.333%}
.min-w-full{min-width:100%}
.max-w-sm{max-width:24rem} .max-w-md{max-width:28rem} .max-w-lg{max-width:32rem}
.max-w-xl{max-width:36rem} .max-w-2xl{max-width:42rem} .max-w-3xl{max-width:48rem}
.h-full{height:100%} .h-1{height:.25rem} .min-h-screen{min-height:100vh}
.p-0{padding:0} .p-1{padding:.25rem} .p-2{padding:var(--space-2)} .p-3{padding:.75rem}
.p-4{padding:var(--space-4)} .p-5{padding:1.25rem} .p-6{padding:var(--space-5)} .p-8{padding:var(--space-6)} .p-10{padding:2.5rem}
.px-1{padding-left: .25rem;padding-right:.25rem} .px-2{padding-left: .5rem;padding-right:.5rem}
.px-3{padding-left:var(--space-3);padding-right:var(--space-3)} .px-4{padding-left:var(--space-4);padding-right:var(--space-4)}
.px-5{padding-left: var(--space-5);padding-right:1.25rem}.px-6{padding-left:var(--space-5);padding-right:var(--space-5)}
.px-8{padding-left: var(--space-6);padding-right:2rem}
.py-1{padding-top:var(--space-1);padding-bottom:var(--space-1)} .py-2{padding-top:var(--space-2);padding-bottom:var(--space-2)}
.py-3{padding-top:var(--space-3);padding-bottom:var(--space-3)} .py-4{padding-top:var(--space-4);padding-bottom:var(--space-4)}
.py-5{padding-top: var(--space-5);padding-bottom:1.25rem}.py-6{padding-top: var(--space-5);padding-bottom:1.5rem}
.pt-1{padding-top:.25rem} .pt-2{padding-top:.5rem} .pt-4{padding-top:1rem}
.pt-5{padding-top:1.25rem}.pt-8{padding-top:2rem}
.pb-4{padding-bottom:1rem}.pb-6{padding-bottom:1.5rem}
.pl-4{padding-left:1rem} .pl-10{padding-left:2.5rem} .pl-14{padding-left:3.5rem}
.pr-4{padding-right:1rem}
.m-0{margin:0} .m-auto{margin:auto} .mx-auto{margin-left: auto;margin-right:auto}
.mt-0{margin-top:0} .mt-1{margin-top:var(--space-1)} .mt-2{margin-top:var(--space-2)}
.mt-3{margin-top:.75rem} .mt-4{margin-top:var(--space-4)} .mt-5{margin-top:1.25rem}
.mt-6{margin-top:var(--space-5)} .mt-8{margin-top:2rem}
.mb-0{margin-bottom:0} .mb-1{margin-bottom:var(--space-1)} .mb-2{margin-bottom:var(--space-2)}
.mb-3{margin-bottom:var(--space-3)} .mb-4{margin-bottom:var(--space-4)} .mb-5{margin-bottom:1.25rem}
.mb-6{margin-bottom:var(--space-5)} .mb-8{margin-bottom:2rem} .mb-12{margin-bottom:3rem}
.ml-1{margin-left:.25rem} .ml-2{margin-left:.5rem} .ml-4{margin-left:1rem} .ml-64{margin-left:16rem}
.mr-1{margin-right:.25rem} .mr-2{margin-right:.5rem} .mr-4{margin-right:1rem}
.-mt-1\.5{margin-top:-.375rem}
.text-xs{font-size:var(--fs-label);line-height:1.25} .text-sm{font-size:var(--fs-body);line-height:1.35}
.text-base{font-size: var(--fs-ui);line-height:1.5rem} .text-lg{font-size: var(--fs-value);line-height:1.75rem}
.text-xl{font-size: var(--fs-value);line-height:1.75rem} .text-2xl{font-size: var(--fs-page-title);line-height:2rem}
.text-3xl{font-size: var(--fs-page-title);line-height:2.25rem}.text-4xl{font-size: var(--fs-page-title);line-height:2.5rem}
.font-normal{font-weight: var(--fw-regular)} .font-medium{font-weight: var(--fw-medium)}
.font-semibold{font-weight: var(--fw-semi)} .font-bold{font-weight: var(--fw-bold)}
.text-left{text-align:left} .text-center{text-align:center} .text-right{text-align:right}
.text-white{color:var(--surface)} .text-black{color:#000}
.text-muted{color:var(--text-muted)}
.text-secondary{color:var(--text-secondary)}
.text-tertiary{color:var(--text-tertiary)}
.text-body{color:var(--text-body)}
.text-strong{color:var(--text-strong)}
.text-gray-400{color:var(--text-muted)} .text-gray-500{color:var(--text-muted)}
.text-gray-600{color:var(--text-body)} .text-gray-700{color:var(--text-body)}
.text-gray-800{color:var(--text-strong)} .text-gray-900{color:var(--text-strong)}
.text-red-600{color:var(--danger)} .text-red-700{color:var(--danger-strong)}
.text-green-700{color:var(--ok-strong)}
.text-blue-400{color:var(--accent)} .text-blue-600{color:var(--accent)}
.text-blue-700{color:var(--accent-hover)} .text-blue-800{color:var(--accent-strong)}
.text-indigo-600{color:var(--primary)}
.leading-none{line-height:1}
.bg-white{background-color:var(--surface)}
.bg-gray-50{background-color:var(--bg-soft)} .bg-gray-100{background-color:var(--bg-muted)}
.bg-red-50{background-color:var(--danger-soft)} .bg-red-100{background-color:var(--danger-soft)}
.bg-green-50{background-color:var(--ok-soft)} .bg-green-100{background-color:var(--ok-soft)}
.bg-blue-50{background-color:var(--primary-soft)} .bg-blue-100{background-color:var(--accent-soft)}
.bg-indigo-600{background-color:var(--primary)}
.hover\:bg-indigo-700:hover{background-color:var(--primary-hover)}
.border{border:1px solid var(--border)} .border-0{border:none}
.border-b{border-bottom:1px solid var(--border)}.border-t{border-top:1px solid var(--border)}
.border-l{border-left:1px solid var(--border)} .border-l-4{border-left-width:4px}
.border-gray-200{border-color:var(--border-subtle)} .border-gray-300{border-color:var(--border-strong)}
.border-green-500{border-color:var(--ok)} .border-red-500{border-color:var(--danger)}
.rounded{border-radius:var(--radius-sm)} .rounded-md{border-radius:var(--radius-md)}
.rounded-lg{border-radius:var(--radius-lg)} .rounded-xl{border-radius:var(--radius-xl)}
.rounded-2xl{border-radius:var(--radius-2xl)} .rounded-full{border-radius:var(--radius-full)}
.rounded-l-xl{border-radius:12px 0 0 12px}
.shadow{box-shadow:var(--shadow-sm)} .shadow-sm{box-shadow:var(--shadow-xs)}
.shadow-md{box-shadow:var(--shadow-md)}.shadow-lg{box-shadow:var(--shadow-lg)}
.shadow-xl{box-shadow:var(--shadow-xl)}.shadow-2xl{box-shadow:var(--shadow-2xl)}
.static{position:static} .relative{position:relative} .absolute{position:absolute}
.fixed{position:fixed} .sticky{position:sticky}
.inset-0{top: 0;right: 0;bottom: 0;left:0} .inset-x-0{left: 0;right:0}
.top-0{top:0} .top-4{top:1rem} .top-20{top:5rem}
.right-0{right:0} .right-4{right:1rem}
.bottom-4{bottom:1rem}
.left-0{left:0} .left-3{left:.75rem} .left-4{left:1rem}
.z-30{z-index:30} .z-40{z-index:40} .z-50{z-index:50}
.overflow-hidden{overflow:hidden} .overflow-auto{overflow:auto}
.overflow-y-auto{overflow-y:auto} .overflow-x-auto{overflow-x:auto}
.cursor-pointer{cursor:pointer} .cursor-default{cursor:default} .cursor-grab{cursor:grab}
.transition{transition:all 0.15s ease}
.transition-colors{transition:color 0.15s,background-color 0.15s,border-color 0.15s}
.transition-transform{transition:transform 0.3s}
.duration-300{transition-duration:0.3s}
.transform{transform:none}
.-translate-y-1\/2{transform:translateY(-50%)}
.pointer-events-none{pointer-events:none}
.object-contain{object-fit:contain} .object-cover{object-fit:cover} .object-center{object-position:center}
.font-sans{font-family:var(--font-family-body)}
.underline{text-decoration:underline} .no-underline{text-decoration:none}
.select-none{user-select:none} .align-middle{vertical-align:middle}
.whitespace-nowrap{white-space:nowrap} .break-all{word-break:break-all}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* ===========================
20. COMPONENT PRIMITIVES
Phase 4 – Vehicle detail building blocks
=========================== */
/* ===== Buttons ===== */
.btn {
display: inline-flex; align-items: center; gap: var(--space-1);
padding: var(--space-2) var(--space-3); border-radius: var(--radius-button);
border: 1px solid var(--border-input); background: var(--surface);
color: var(--text-primary); font-size: var(--fs-body);
font-weight: var(--fw-medium); font-family: inherit;
transition: background .15s; cursor: pointer;
text-decoration: none; white-space: nowrap;
}
.btn:hover { background: var(--bg-subtle); color: var(--text-primary); text-decoration: none; }
.btn-sm { padding: var(--space-1) var(--space-2); font-size: var(--fs-body); gap: var(--space-1); }
.btn-ghost { background: var(--surface); }
.btn-ghost:hover { background: var(--bg-subtle); }
.btn-primary { background: var(--primary); color: var(--surface); border-color: var(--primary); }
.btn-primary:hover { background: var(--primary-hover); color: var(--surface); }
.btn-icon-ghost {
width: 30px; height: 30px; border-radius: var(--radius-button);
border: 1px solid transparent;
display: inline-flex; align-items: center; justify-content: center;
background: transparent; color: var(--text-secondary);
padding: 0; cursor: pointer; font-family: inherit; transition: background .15s;
}
.btn-icon-ghost:hover { background: var(--bg-subtle); color: var(--text-primary); }
/* Modifiers merged in from the legacy §8 .button-* family (single source of truth) */
/* Solid green — replaces .button-success */
.btn-success { background: var(--wizard-line-bg-completed); color: var(--surface); border-color: var(--wizard-line-bg-completed); }
.btn-success:hover { background: var(--ok-strong); color: var(--surface); }
/* Solid red — replaces .button-primary-highlight / .button-close intent */
.btn-danger { background: var(--danger); color: var(--surface); border-color: var(--danger); }
.btn-danger:hover { background: var(--danger-strong); color: var(--surface); border-color: var(--danger-strong); }
/* Light-blue pill — replaces .button-primary (used for filter-config pills) */
.btn-primary-light { color: var(--primary); background: var(--primary-soft); border-color: var(--accent-soft); }
.btn-primary-light:hover { color: var(--surface); background: var(--primary); border-color: var(--primary); box-shadow: 0 2px 6px rgba(37,99,235,0.2); }
/* Active state — solid navy, matches .button-primary.active */
.btn.active { background: var(--primary); color: var(--surface); border-color: var(--primary); }
/* Full-width — replaces .button-fullwidth / w-full usage */
.btn-fullwidth { width: 100%; }
/* ===== Badges & Status =====
Canonical: .status-badge + .status-badge-* (see helpers.render_pill).
Legacy .badge / .status-pill map to the same look for any leftover markup. */
.badge,
.status-pill {
display: inline-flex;
align-items: center;
gap: var(--space-1);
padding: var(--space-1) var(--space-2);
border-radius: var(--radius-full);
font-size: var(--fs-label);
font-weight: var(--fw-semi);
letter-spacing: 0.02em;
white-space: nowrap;
}
.badge-ok,
.status-pill { background: var(--ok-soft); color: var(--ok-strong); }
.badge-err { background: var(--danger-soft); color: var(--danger-strong); }
.badge-warn { background: var(--warn-soft); color: var(--warn); }
.badge-neutral { background: var(--bg-muted); color: var(--text-body); }
.linkable { cursor: pointer; text-decoration: none; }
.linkable:hover { text-decoration: underline; text-decoration-color: var(--text-quaternary); text-underline-offset: 3px; }
/* Plain inline text links (not pills/badges) */
.linkable.linkable-text { color: var(--accent-strong); }
.linkable.linkable-text:hover { text-decoration-color: var(--accent-strong); }
.cost-main { font-weight: var(--fw-medium); }
.cost-main.cost-neg { color: var(--ok-fg); }
.cost-sub { font-size: var(--fs-label); color: var(--text-tertiary); margin-top: 1px; }
/* ===== Cards & Panels ===== */
.card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-card);
box-shadow: none;
overflow: visible;
}
.panel { padding: var(--space-card-y) var(--space-card-x) var(--space-1); }
.panel-header {
display: flex; align-items: flex-start;
justify-content: space-between; gap: var(--space-3); padding-bottom: var(--space-3);
}
.panel-header.tight { padding-bottom: var(--space-2); }
.panel-title { font-weight: var(--fw-semi); font-size: var(--fs-ui); }
.panel-title-row { display: flex; align-items: center; gap: var(--space-2); }
.panel-title-icon { display: flex; align-items: center; color: var(--text-tertiary); }
/* Compact KPI values (dates, badges, long labels) */
.kpi-value--sm { font-size: var(--fs-ui); line-height: 1.25; }
.kpi-value--md { font-size: var(--fs-value); line-height: 1.25; }
.panel-subtitle-soft {
font-size: var(--fs-body);
font-weight: var(--fw-semi);
margin: var(--space-4) 0 var(--space-2);
color: var(--text-primary);
}
.metric-info-icon { color: var(--text-muted); }
.brand-mark { color: var(--primary); }
.brand-mark svg { display: block; }
.is-clickable { cursor: pointer; }
.chart-box { width: 100%; height: 18.75rem; } /* 300px chart host */
.chart-box canvas { width: 100% !important; height: 100% !important; }
.chart-spark { height: 3.75rem; width: 100%; position: relative; } /* 60px sparkline host */
.flex-align-end { display: flex; align-items: flex-end; gap: var(--space-3); }
.kv-value-row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.panel-count { color: var(--text-tertiary); font-size: var(--fs-body); font-weight: var(--fw-medium); margin-left: var(--space-1); }
.panel-sub { font-size: var(--fs-label); color: var(--text-tertiary); margin-top: var(--space-1); }
.panel-actions { display: flex; gap: var(--space-2); }
/* ===== Data Tables ===== */
.data-table {
width: 100%;
border-collapse: collapse;
table-layout: auto; /* content-weighted widths */
}
.data-table th {
text-align: left; font-size: var(--fs-caption); font-weight: var(--fw-medium);
color: var(--text-tertiary); text-transform: uppercase;
letter-spacing: var(--tracking-label);
padding: var(--space-cell-y) var(--space-cell-x);
border-bottom: 1px solid var(--border-divider);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 12rem;
}
.data-table th.num { text-align: right; max-width: 8rem; }
.data-table td {
padding: var(--space-cell-y) var(--space-cell-x);
border-bottom: 1px solid var(--border-row);
font-size: var(--fs-label); /* 12px cells */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 14rem;
}
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table td.num { text-align: right; max-width: 8rem; }
.data-table th:first-child, .data-table td:first-child { padding-left: var(--space-cell-edge); }
.data-table th:last-child, .data-table td:last-child { padding-right: var(--space-cell-edge); }
/* Pills / actions inside cells may need a bit more room without blowing the table */
.data-table td .status-badge,
table td .status-badge {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
/* Full overview tables only: first col is the "+" columns picker.
Scoped via :has(#open_columns_modal_btn) so mini tables inside
.table-wrapper (e.g. violations buckets) keep normal first-column width.
Id may live on the th or on a button inside the th. */
.table-wrapper table:has(#open_columns_modal_btn) th:first-child,
.table-wrapper table:has(#open_columns_modal_btn) td:first-child {
width: 2rem;
min-width: 2rem;
max-width: 2.25rem;
padding-left: var(--space-cell-edge);
padding-right: var(--space-1);
text-align: center;
}
/* Utility padding classes on overview cells must not re-inflate density */
.table-wrapper td.px-6,
.table-wrapper th.px-6 {
padding-left: var(--space-cell-x) !important;
padding-right: var(--space-cell-x) !important;
}
/* Do not force py-3 override — vertical rhythm comes from --space-cell-y */
.table-wrapper {
width: 100%;
min-width: 0;
}
.table-wrapper .overflow-x-auto {
width: 100%;
min-width: 0;
/* Prefer fit; scroll only if content still exceeds after fixed layout */
overflow-x: auto;
}
.table-scroll {
flex: 1 1 0; min-height: 0;
overflow-x: auto; overflow-y: auto;
scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) transparent;
margin: 0 calc(-1 * var(--space-cell-edge));
padding: 0 var(--space-cell-edge);
min-width: 0;
}
.table-scroll::-webkit-scrollbar { width: var(--scrollbar-width); }
.table-scroll::-webkit-scrollbar-track { background: transparent; }
.table-scroll::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; }
.table-scroll::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); }
.panel.scrollable { display: flex; flex-direction: column; min-height: 0; padding-bottom: var(--space-3); }
.panel.scrollable .panel-header { flex-shrink: 0; }
.panel.scrollable .data-table thead th {
position: sticky; top: 0; background: var(--surface); z-index: 2;
box-shadow: var(--shadow-sticky);
}
.panel.scrollable.scroll-short .table-scroll { flex: none; max-height: 240px; }
.grid-2col.both-scroll { grid-auto-rows: 380px; }
.issue-detail-grid.both-scroll {
grid-auto-rows: unset;
grid-template-rows: auto minmax(380px, auto);
}
.issue-detail-grid > * { min-width: 0; }
.issue-detail-grid .table-scroll { overflow-x: auto; }
/* ===== Key-Value Lists ===== */
.kv-list { padding: var(--space-1) var(--space-1) var(--space-3); }
.kv-row {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: var(--space-4);
padding: var(--space-2) var(--space-3);
border-bottom: 1px solid var(--border-row);
font-size: var(--fs-body);
}
.kv-row:last-child { border-bottom: 0; }
.kv-label {
flex-shrink: 0;
color: var(--text-secondary);
}
.kv-value {
min-width: 0;
text-align: right;
color: var(--text-primary);
font-weight: var(--fw-medium);
}
/* ===== Layout Grid ===== */
.grid-2col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-grid-gap); margin-bottom: var(--space-grid-gap); }
.grid-2col > * { min-width: 0; }
/* minmax(0, …) + min-width:0 so wide mini-tables (nowrap) scroll instead of blowing out the page */
.grid-2col-3-1 {
display: grid;
grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
gap: var(--space-grid-gap);
margin-bottom: var(--space-grid-gap);
}
.grid-2col-3-1 > * { min-width: 0; }
.grid-2col-3-1.both-scroll { grid-auto-rows: minmax(380px, auto); }
.grid-2col-3-1 .panel.scrollable { overflow: hidden; }
.row-mb { margin-bottom: var(--space-grid-gap); }
@media (max-width: 900px) {
.grid-2col,
.grid-2col-3-1 {
grid-template-columns: minmax(0, 1fr);
}
.grid-2col.both-scroll,
.grid-2col-3-1.both-scroll,
.issue-detail-grid.both-scroll {
grid-auto-rows: auto;
grid-template-rows: none;
}
}
/* ===== Metric info (ⓘ on KPIs / kv labels) ===== */
.metric-info {
position: relative;
display: inline-flex;
align-items: center;
margin-left: var(--space-1);
vertical-align: middle;
}
.metric-info__btn {
appearance: none;
-webkit-appearance: none;
border: 0;
background: transparent;
padding: 0;
margin: 0;
line-height: 0;
cursor: help;
border-radius: 999px;
color: var(--text-tertiary, var(--text-muted));
opacity: 0.85;
}
.metric-info__btn:hover,
.metric-info--open .metric-info__btn {
opacity: 1;
color: var(--text-secondary, var(--text-muted));
}
.metric-info__btn:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
/* Panel is moved to document.body and position:fixed by metric_info.js */
.metric-info__panel {
display: none;
position: fixed;
z-index: 10050;
min-width: 180px;
max-width: 280px;
padding: var(--space-2) var(--space-2);
border-radius: 8px;
background: var(--text-strong);
color: var(--bg-soft);
font-size: var(--fs-label);
font-weight: var(--fw-medium);
line-height: 1.4;
text-align: left;
white-space: normal;
box-shadow: 0 8px 20px rgba(15, 23, 42, 0.22);
pointer-events: auto;
}
.metric-info__panel.metric-info__panel--visible {
display: block;
}
.metric-info__panel::after {
content: "";
position: absolute;
left: 50%;
transform: translateX(-50%);
border: 5px solid transparent;
}
.metric-info__panel--above::after {
top: 100%;
border-top-color: var(--text-strong);
}
.metric-info__panel--below::after {
bottom: 100%;
border-bottom-color: var(--text-strong);
}
/* Labels with ⓘ stay on one line */
.kpi-label,
.kv-label,
.live-label {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 0 var(--space-1);
}
/* ===== Kommandozentrale Messages ===== */
.messages-section { padding: var(--space-3) var(--space-4) var(--space-4); margin-bottom: var(--space-5); border-color: var(--border-attention); background: var(--bg-attention); }
.messages-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-2); }
.messages-title-wrap { display: flex; align-items: center; gap: var(--space-2); }
.messages-icon { display: flex; align-items: center; color: var(--warn); }
.messages-title { font-weight: var(--fw-semi); font-size: var(--fs-ui); color: var(--text-primary); }
.messages-count { background: var(--warn-soft); color: var(--warn-strong); font-size: var(--fs-label); font-weight: var(--fw-semi); padding: 1px var(--space-2); border-radius: var(--radius-badge); }
/* Match .messages-count size (telematics-pill defaults are larger) */
.messages-telematics-pill.telematics-pill,
.messages-telematics-pill.telematics-pill--clickable {
margin-left: var(--space-1);
font-size: var(--fs-label);
font-weight: var(--fw-semi);
line-height: 1.25;
padding: 1px var(--space-2);
border-radius: var(--radius-badge);
}
.messages-link { font-size: var(--fs-body); color: var(--text-secondary); display: inline-flex; align-items: center; gap: var(--space-1); }
.messages-link:hover { color: var(--text-primary); }
.messages-list { display: flex; flex-direction: column; gap: var(--space-2); }
.msg-card { display: grid; grid-template-columns: 36px 1fr auto; gap: var(--space-3); padding: var(--space-3) var(--space-3); background: var(--surface); border: 1px solid var(--border); border-radius: 10px; align-items: center; }
/* Clickable telematics placeholder when inbox is empty but faults exist */
button.msg-card.msg-card--telematics-faults {
width: 100%;
text-align: left;
font: inherit;
color: inherit;
cursor: pointer;
transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
button.msg-card.msg-card--telematics-faults:hover {
border-color: var(--danger-soft);
box-shadow: 0 2px 10px rgba(185, 28, 28, 0.08);
}
button.msg-card.msg-card--telematics-faults .msg-source-link {
display: inline-flex;
align-items: center;
gap: var(--space-1);
}
.msg-source { width: 36px; height: 36px; border-radius: 9px; display: flex; align-items: center; justify-content: center; }
.msg-severity-neutral { background: var(--bg-muted); color: var(--text-body); }
.msg-severity-ok { background: var(--ok-soft); color: var(--ok-strong); }
.msg-severity-attention { background: var(--warn-soft); color: var(--warn); }
.msg-severity-urgent { background: var(--danger-soft); color: var(--danger-strong); }
/* Legacy source-based classes (primitives / dev only) */
.msg-source-telematik { background: var(--primary-soft); color: var(--accent-hover); }
.msg-source-fahrer { background: var(--violet-bg); color: var(--violet-fg); }
.msg-source-system { background: var(--bg-muted); color: var(--text-body); }
.msg-source-user { background: var(--accent-soft); color: var(--accent-hover); }
.msg-source-issue { background: var(--warn-soft); color: var(--warn); }
.msg-source-protocol { background: var(--ok-soft); color: var(--ok-strong); }
.messages-empty { font-size: var(--fs-body); color: var(--text-secondary); padding: var(--space-2) var(--space-1) var(--space-1); }
.msg-meta-line { display: flex; align-items: center; gap: var(--space-1); font-size: var(--fs-label); color: var(--text-secondary); text-transform: uppercase; letter-spacing: .04em; font-weight: var(--fw-medium); margin-bottom: var(--space-1); }
.msg-dot { color: var(--text-quaternary); }
.msg-time { text-transform: none; letter-spacing: 0; font-weight: var(--fw-regular); }
.msg-title { font-size: var(--fs-ui); font-weight: var(--fw-semi); color: var(--text-primary); margin-bottom: var(--space-1); }
.msg-title-link { color: inherit; text-decoration: none; }
.msg-title-link:hover { text-decoration: underline; text-underline-offset: 2px; }
.msg-source-link { display: inline-block; margin-top: var(--space-1); font-size: var(--fs-body); font-weight: var(--fw-medium); color: var(--primary); text-decoration: none; }
.msg-source-link:hover { text-decoration: underline; text-underline-offset: 2px; }
.msg-subtitle { font-size: var(--fs-body); color: var(--text-secondary); }
.msg-actions { display: flex; align-items: center; gap: var(--space-1); }
/* ===== Wartung ===== */
.wartung { padding: var(--space-3) var(--space-4) var(--space-3); }
.wartung-block { padding: var(--space-2) var(--space-1) var(--space-1); }
.block-label { font-size: var(--fs-label); color: var(--text-tertiary); text-transform: uppercase; letter-spacing: .06em; font-weight: var(--fw-medium); margin-bottom: var(--space-2); }
.wartung-grid { display: grid; gap: var(--space-3) var(--space-5); }
.wartung-grid.grid-2 { grid-template-columns: 1fr 1fr; }
.wartung-grid.grid-3 { grid-template-columns: 1fr 1fr 1fr; }
.wartung-item { min-width: 0; }
.wt-label { font-size: var(--fs-label); color: var(--text-tertiary); text-transform: uppercase; letter-spacing: .05em; font-weight: var(--fw-medium); margin-bottom: var(--space-1); }
.wt-value { font-size: var(--fs-value); font-weight: var(--fw-semi); letter-spacing: -.01em; }
.wt-value-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-2); }
.wt-due-hint { font-size: var(--fs-label); color: var(--danger); font-weight: var(--fw-medium); }
.wt-source-hint { font-size: var(--fs-label); color: var(--text-tertiary); margin-top: var(--space-1); }
.wt-value-secondary { font-size: var(--fs-body); color: var(--text-secondary); margin-top: var(--space-1); font-weight: var(--fw-medium); }
.wt-sub { font-size: var(--fs-label); color: var(--text-secondary); margin-top: var(--space-1); }
.wartung-divider { height: 1px; background: var(--border-divider); margin: var(--space-3) 0 var(--space-1); }
/* ===== Context strip (quiet present-tense facts — not KPIs) =====
Reuse on any detail page under page-header. Less dominant than .kpi-metrics-row. */
.context-strip {
display: flex;
flex-wrap: wrap;
align-items: stretch;
gap: 0;
width: 100%;
margin-bottom: var(--space-3);
padding: var(--space-2) 0;
background: transparent;
border: none;
border-bottom: 1px solid var(--border-divider);
border-radius: 0;
}
.context-strip__item {
flex: 1 1 9rem;
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
gap: 2px;
padding: var(--space-1) var(--space-3);
border-right: 1px solid var(--border-divider);
color: inherit;
text-decoration: none;
box-sizing: border-box;
}
.context-strip__item:last-child {
border-right: none;
}
.context-strip__item--link {
border-radius: var(--radius-sm);
transition: background 0.12s ease;
}
.context-strip__item--link:hover {
background: var(--bg-soft);
text-decoration: none;
}
.context-strip__item--link:hover .context-strip__value {
color: var(--accent);
}
.context-strip__label {
font-size: var(--fs-caption);
font-weight: var(--fw-medium);
color: var(--text-tertiary);
text-transform: uppercase;
letter-spacing: 0.04em;
line-height: 1.2;
}
.context-strip__value {
font-size: var(--fs-body);
font-weight: var(--fw-medium);
color: var(--text-primary);
line-height: 1.3;
letter-spacing: normal;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* If a pill slips into context values, keep it compact */
.context-strip__value .status-badge {
font-size: var(--fs-caption);
padding: 0 var(--space-2);
vertical-align: baseline;
}
.context-strip__suffix {
font-size: var(--fs-caption);
font-weight: var(--fw-medium);
color: var(--text-tertiary);
margin-left: 2px;
}
.context-strip__label .metric-info {
/* keep ⓘ aligned with quiet caption labels */
margin-left: 2px;
}
@media (max-width: 720px) {
.context-strip {
flex-direction: column;
gap: var(--space-1);
padding: var(--space-2) 0;
}
.context-strip__item {
flex: 1 1 auto;
border-right: none;
border-bottom: 1px solid var(--border-divider);
padding: var(--space-2) 0;
}
.context-strip__item:last-child {
border-bottom: none;
}
}
/* ===== KPI metric value typography + clickable cards ===== */
.kpi-cell-link {
display: block;
color: inherit;
text-decoration: none;
transition: background 0.15s ease;
}
.kpi-cell-link:hover { background: var(--bg-soft); }
.kpi-cell-link .kpi-value { color: var(--primary); }
.kpi-label { font-size: var(--fs-label); color: var(--text-secondary); margin-bottom: var(--space-1); }
.kpi-value { font-size: var(--fs-kpi); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); }
.kpi-suffix { font-size: var(--fs-body); font-weight: var(--fw-medium); color: var(--text-tertiary); margin-left: var(--space-1); }
/* KPI metric cards stay the dominant scoreboard (vs .context-strip) */
.kpi-metrics-row .kpi-value {
font-size: var(--fs-kpi);
font-weight: var(--fw-bold);
}
/* Single headline metric on a panel (not a full KPI row) */
.panel-stat {
display: inline-flex;
flex-direction: column;
align-items: flex-end;
gap: 1px;
margin-left: auto;
text-align: right;
min-width: 0;
}
.panel-stat__label {
font-size: var(--fs-caption);
font-weight: var(--fw-medium);
color: var(--text-tertiary);
text-transform: uppercase;
letter-spacing: 0.04em;
line-height: 1.2;
}
.panel-stat__value {
font-size: var(--fs-ui);
font-weight: var(--fw-semi);
color: var(--text-primary);
line-height: 1.25;
}
.panel-stat__value .status-badge {
font-size: var(--fs-caption);
vertical-align: middle;
}
.panel-header:has(.panel-stat) {
align-items: center;
}
.panel-header .panel-stat + .panel-actions {
margin-left: var(--space-3);
}
/* ===== Live Position ===== */
.live-card { padding: var(--space-4) var(--space-3); }
.live-header { display: flex; align-items: center; justify-content: space-between; padding-bottom: var(--space-3); }
.live-title-wrap { display: flex; align-items: center; gap: var(--space-2); }
.live-title { font-weight: var(--fw-semi); font-size: var(--fs-ui); }
.live-grid { display: grid; grid-template-columns: 1fr 1px 1fr; gap: var(--space-5); padding-top: var(--space-1); }
.live-col { display: flex; flex-direction: column; gap: var(--space-3); }
.live-divider { background: var(--border); width: 1px; }
.live-label { font-size: var(--fs-label); color: var(--text-tertiary); text-transform: uppercase; letter-spacing: .05em; font-weight: var(--fw-medium); margin-bottom: var(--space-1); }
.live-value { font-size: var(--fs-ui); font-weight: var(--fw-medium); color: var(--text-primary); }
.live-sub { font-size: var(--fs-body); color: var(--text-secondary); }
/* ===== Map ===== */
.map-svg { width: 100%; height: 340px; display: block; }
/*
* Map card uses the same .card.panel + .panel-header shell as Werkstatt-
* historie / Fahrerhistorie / Live-Position. The map only fills the body
* under the title row (no nested card chrome).
*/
.map-card {
display: flex;
flex-direction: column;
padding-bottom: var(--space-card-y);
}
.map-card .panel-header {
flex-shrink: 0;
}
.vehicle-map-body {
position: relative;
/* Keep map/error stacking local so overlays cannot sit above page modals (z-index 120). */
isolation: isolate;
width: 100%;
border-radius: var(--radius-button, 8px);
overflow: hidden;
flex: 1 1 auto;
min-height: 280px;
}
/* Live Position pin: looping color/glow pulse (no bounce) */
#vehicle-map .vehicle-map-marker {
background: transparent !important;
border: none !important;
}
#vehicle-map .vehicle-map-marker-inner {
position: relative;
width: 25px;
height: 41px;
}
#vehicle-map .vehicle-map-marker-pin {
display: block;
width: 25px;
height: 41px;
position: relative;
z-index: 1;
animation: vehicle-map-pin-pulse 2.2s ease-in-out infinite;
will-change: filter, opacity;
pointer-events: none;
user-select: none;
}
#vehicle-map .vehicle-map-marker-shadow {
position: absolute;
left: 50%;
bottom: 1px;
width: 14px;
height: 5px;
margin-left: -7px;
border-radius: 50%;
background: rgba(15, 23, 42, 0.28);
filter: blur(0.5px);
z-index: 0;
opacity: 0.32;
pointer-events: none;
}
@keyframes vehicle-map-pin-pulse {
0%, 100% {
filter: brightness(1) saturate(1);
opacity: 1;
}
50% {
/* Soft brand-tinted highlight (works on default blue pin PNG) */
filter: brightness(1.2) saturate(1.35) drop-shadow(0 0 4px color-mix(in srgb, var(--primary) 70%, transparent));
opacity: 0.92;
}
}
@media (prefers-reduced-motion: reduce) {
#vehicle-map .vehicle-map-marker-pin {
animation: none;
}
}
#vehicle-map {
width: 100%;
height: 100%;
min-height: 280px;
z-index: 0;
background: var(--border);
}
#vehicle-map .leaflet-control-attribution {
font-size: var(--fs-label);
max-width: 70%;
}
/* Caruso / provider data-item errors (e.g. no geolocation).
z-index only needs to beat #vehicle-map (0) inside .vehicle-map-body —
stay well below .modal-generic-wide (120) / #modal_overlay (110). */
.vehicle-map-error-overlay {
position: absolute;
inset: 0;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-4);
background: rgba(255, 255, 255, 0.72);
pointer-events: none;
}
.vehicle-map-error-overlay.is-hidden,
.vehicle-map-error-overlay[hidden] {
display: none !important;
}
.vehicle-map-error-card {
max-width: 18rem;
padding: var(--space-4) var(--space-5);
text-align: center;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg, 0.75rem);
box-shadow: var(--shadow-md, 0 8px 24px rgba(15, 23, 42, 0.12));
}
.vehicle-map-error-title {
margin: 0 0 var(--space-2);
font-size: var(--fs-ui);
font-weight: var(--fw-semi);
color: var(--text-primary);
}
.vehicle-map-error-text {
margin: 0;
font-size: var(--fs-label);
line-height: 1.4;
color: var(--danger-strong, var(--danger));
}
.telematics-kv__error {
margin-top: var(--space-2);
font-size: var(--fs-label);
line-height: 1.35;
color: var(--danger-strong, var(--danger));
}
/* ===== Documents Panel ===== */
.docs-list { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-1) 0 var(--space-2); }
.doc-row { display: grid; grid-template-columns: 32px 1fr auto; gap: var(--space-3); align-items: center; padding: var(--space-2) var(--space-2); border: 1px solid var(--border-divider); border-radius: var(--radius-button); }
.doc-icon { width: 32px; height: 32px; border-radius: var(--radius-button); background: var(--bg-doc-icon); display: flex; align-items: center; justify-content: center; }
.doc-meta { min-width: 0; overflow: hidden; }
.doc-title { font-size: var(--fs-body); font-weight: var(--fw-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-sub { font-size: var(--fs-label); color: var(--text-tertiary); }
.doc-actions { display: flex; gap: var(--space-1); flex-shrink: 0; }
/* Mini table action columns (edit / delete / download) */
.data-table td:has(.btn-icon-ghost),
.min-w-full td:has(.btn-icon-ghost) {
width: 1%;
white-space: nowrap;
text-align: center;
vertical-align: middle;
}
.show-more {
width: 100%; padding: var(--space-2);
border: 1px dashed var(--border-dashed); border-radius: var(--radius-button);
background: transparent; color: var(--text-secondary); font-size: var(--fs-body);
display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1);
margin-bottom: var(--space-2); cursor: pointer; font-family: inherit; transition: background .15s;
}
.show-more:hover { background: var(--bg-subtle); }
/* ===== Page Header ===== */
.page-header { margin-bottom: var(--space-5); width: 100%; min-width: 0; }
.breadcrumb { display: flex; align-items: center; gap: var(--space-1); font-size: var(--fs-body); color: var(--text-secondary); margin-bottom: var(--space-3); }
.breadcrumb svg { color: var(--text-tertiary); }
.breadcrumb .sep { color: var(--text-quaternary); }
.breadcrumb .current { color: var(--text-primary); font-weight: var(--fw-medium); }
.title-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.title-left { display: flex; align-items: center; gap: var(--space-3); }
.page-title { margin: 0; font-size: var(--fs-page-title); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); }
.title-actions { display: flex; gap: var(--space-2); align-items: center; }
.page-subtitle { color: var(--text-secondary); font-size: var(--fs-ui); margin-top: var(--space-1); }
/* ===== Dots Menu ===== */
.dots-menu-wrap { position: relative; }
.dots-menu { position: absolute; right: 0; top: calc(100% + 4px); background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 4px 16px rgba(0,0,0,.08); min-width: 200px; padding: var(--space-1); z-index: 200; }
.dots-menu-item { display: flex; align-items: center; padding: var(--space-2) var(--space-3); border-radius: 7px; font-size: var(--fs-body); color: var(--text-primary); text-decoration: none; }
.dots-menu-item:hover { background: var(--bg-subtle); }
.dots-menu-item--danger { color: var(--danger); }
.dots-menu-item--danger:hover { background: var(--danger-soft); }
.dots-menu-divider { height: 1px; background: var(--border-row); margin: var(--space-1) 0; }
/* ===== Collapse Row ===== */
.collapse-row { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-3); margin-top: var(--space-4); }
.collapse-left { display: flex; align-items: center; gap: var(--space-2); }
.collapse-title { font-weight: var(--fw-medium); font-size: var(--fs-ui); }
.collapse-sub { color: var(--text-tertiary); font-size: var(--fs-body); }
/* ===========================
21. PORTED FROM base_grok.css
base_grok-only classes (no app.css equivalent), migrated to the
new token system so base_grok.css can be dropped from base.html.
=========================== */
/* ----- Layout: detail-page nav block ----- */
.base_content_nav { width: 100%; margin-left: 1em; margin-top: 2em; }
.base_content_nav:empty { margin: 0; }
.base_content_nav .flex { flex-wrap: nowrap; align-items: center; }
.base_content_nav .flex > a { display: inline-flex; text-decoration: none; }
.base_content_nav .flex > a .w-full { width: auto; }
.base_content_nav span { display: inline-flex; align-items: center; }
/* ----- Semantic text color used in table cells ----- */
.text-primary { color: var(--primary); }
.text-link-highlight { color: var(--primary); }
/* ----- Copy tooltip (overview lists + detail pages) ----- */
#copy-tooltip {
position: absolute;
background-color: var(--text-strong);
color: var(--surface);
padding: var(--space-1) var(--space-2);
border-radius: 0.25rem;
font-size: var(--fs-ui);
pointer-events: none;
opacity: 0;
transition: opacity 0.2s ease;
z-index: 10000;
white-space: nowrap;
}
#copy-tooltip.fixed { position: fixed; }
#copy-tooltip.px-3, #copy-tooltip[style*="px-3"] { padding-inline: var(--space-3); }
#copy-tooltip.py-1\.5, #copy-tooltip[style*="py-1.5"] { padding-block: var(--space-1); }
/* ----- Hero / button helpers ----- */
.hero_buttons_container .button-primary { padding: var(--space-2) var(--space-4); }
a .primary-button { display: inline-flex; align-items: center; white-space: nowrap; }
.modal-table { width: 100%; }
/* ----- Changelog timeline ----- */
.changelog-timeline { display: flex; flex-direction: column; gap: 0; max-height: 60vh; overflow-y: auto; padding-right: var(--space-1); }
.changelog-card { display: grid; grid-template-columns: 20px 1fr; gap: var(--space-3); padding-bottom: var(--space-5); position: relative; }
.changelog-card:last-child { padding-bottom: 0; }
.changelog-card__rail { display: flex; justify-content: center; position: relative; }
.changelog-card__rail::after {
content: ''; position: absolute; top: var(--space-3); bottom: -1.25rem; width: 2px;
background: var(--border-row, var(--border)); left: 50%; transform: translateX(-50%);
}
.changelog-card:last-child .changelog-card__rail::after { display: none; }
.changelog-card__dot {
width: 10px; height: 10px; border-radius: 50%; margin-top: var(--space-1);
background: var(--primary, var(--accent-hover)); box-shadow: 0 0 0 3px var(--primary-soft); flex-shrink: 0; z-index: 1;
}
.changelog-card--created .changelog-card__dot { background: var(--wizard-line-bg-completed); box-shadow: 0 0 0 3px var(--ok-soft); }
.changelog-card--status_changed .changelog-card__dot { background: var(--warn); box-shadow: 0 0 0 3px var(--bg-attention); }
.changelog-card--deleted .changelog-card__dot,
.changelog-card--unlinked .changelog-card__dot { background: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }
.changelog-card--linked .changelog-card__dot,
.changelog-card--relation_changed .changelog-card__dot { background: var(--accent); box-shadow: 0 0 0 3px var(--primary-soft); }
.changelog-card__body {
border: 1px solid var(--border, var(--border)); border-radius: 12px; padding: var(--space-3) var(--space-3); background: var(--surface);
}
.changelog-card__header { display: flex; justify-content: space-between; gap: var(--space-3); align-items: flex-start; margin-bottom: var(--space-2); }
.changelog-card__meta { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.changelog-card__badge {
font-size: var(--fs-label); font-weight: var(--fw-semi); letter-spacing: 0.02em; text-transform: uppercase;
color: var(--text-secondary, var(--text-secondary)); background: var(--bg-subtle, var(--bg-doc-icon));
padding: var(--space-1) var(--space-2); border-radius: 999px;
}
.changelog-card__time { font-size: var(--fs-label); color: var(--text-tertiary, var(--text-tertiary)); }
.changelog-card__user { font-size: var(--fs-label); color: var(--text-secondary, var(--text-secondary)); }
.changelog-card__user-btn {
border: none; background: none; padding: 0; color: var(--primary, var(--accent-hover)); cursor: pointer; font-size: var(--fs-label);
}
.changelog-card__summary { font-size: var(--fs-ui); line-height: 1.45; color: var(--text-primary, var(--text-primary)); margin: 0; }
.changelog-card__toggle {
margin-top: var(--space-2); border: none; background: none; padding: 0; font-size: var(--fs-label);
color: var(--primary, var(--accent-hover)); cursor: pointer;
}
.changelog-card__details { margin-top: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--border-row, var(--border)); }
.changelog-card__details-section { margin-top: var(--space-2); }
.changelog-card__details-section--meta { opacity: 0.85; }
.changelog-card__details-title {
font-size: var(--fs-label); font-weight: var(--fw-semi); text-transform: uppercase; letter-spacing: 0.03em;
color: var(--text-tertiary, var(--text-tertiary)); margin-bottom: var(--space-1);
}
.changelog-detail-line { font-size: var(--fs-body); line-height: 1.4; margin-bottom: var(--space-1); }
.changelog-detail-line--primary .changelog-detail-label { font-weight: var(--fw-semi); }
.changelog-detail-label { display: block; color: var(--text-secondary, var(--text-secondary)); margin-bottom: var(--space-1); }
.changelog-detail-values { color: var(--text-primary, var(--text-primary)); }
.changelog-detail-line--metadata { font-size: var(--fs-label); color: var(--text-tertiary, var(--text-tertiary)); }
.changelog-snapshot {
margin-top: var(--space-1); font-size: var(--fs-label); color: var(--text-secondary, var(--text-secondary));
background: var(--bg-subtle, var(--bg-doc-icon)); border: 1px solid var(--border-row, var(--border));
border-radius: 8px; padding: var(--space-2);
}
.changelog-empty { text-align: center; padding: var(--space-6) var(--space-4); color: var(--text-secondary, var(--text-secondary)); font-size: var(--fs-ui); }
.changelog-empty--error { color: var(--danger); }
.changelog-timeline-footer { display: flex; justify-content: center; padding-top: var(--space-3); }
.changelog-load-more:disabled { opacity: 0.6; cursor: not-allowed; }
/* ----- Vehicle events modal ----- */
.vehicle-events-modal-body {
max-height: 60vh;
overflow-y: auto;
padding-right: var(--space-1);
}
.vehicle-events-modal-section {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.vehicle-events-modal-section.hidden { display: none; }
.vehicle-events-section-title {
margin: 0;
font-size: var(--fs-label);
font-weight: var(--fw-semi);
text-transform: uppercase;
letter-spacing: .06em;
color: var(--text-tertiary);
}
.vehicle-events-section-divider {
height: 1px;
background: var(--border);
margin: var(--space-3) 0;
}
.vehicle-events-section-divider.hidden { display: none; }
.msg-card--closed { opacity: 0.88; }
.msg-card--compliance { border-left: var(--space-1) solid var(--warn); }
.msg-card--compliance:has(.msg-severity-urgent) { border-left-color: var(--danger, var(--danger)); }
.vehicle-events-load-more:disabled { opacity: 0.6; cursor: not-allowed; }
/* ----- Mein Profil: completeness & missing fields ----- */
.panel--incomplete {
border-color: var(--warn);
box-shadow: 0 0 0 1px rgba(180, 83, 9, 0.12);
}
.panel-count--warn {
background: var(--warn-soft);
color: var(--warn-strong);
font-size: var(--fs-label);
font-weight: var(--fw-semi);
padding: 1px var(--space-2);
border-radius: var(--radius-badge);
margin-left: var(--space-1);
}
.panel-count--danger {
background: var(--danger-soft);
color: var(--danger-strong);
font-size: var(--fs-label);
font-weight: var(--fw-semi);
padding: 1px var(--space-2);
border-radius: var(--radius-badge);
margin-left: var(--space-1);
}
.kv-row--missing .kv-label {
color: var(--warn-strong);
}
.kv-row--missing .kv-value {
color: var(--warn-strong);
background: var(--warn-soft);
border-radius: 6px;
padding: var(--space-1) var(--space-2);
font-weight: var(--fw-medium);
}
.profile-progress {
height: 6px;
background: var(--bg-muted);
border-radius: 999px;
overflow: hidden;
margin-top: var(--space-2);
}
.profile-progress-bar {
height: 100%;
background: var(--warn);
border-radius: 999px;
transition: width 0.2s ease;
}
.profile-missing-list {
margin: var(--space-2) 0 0;
padding-left: var(--space-5);
font-size: var(--fs-body);
color: var(--text-secondary);
columns: 2;
column-gap: var(--space-5);
}
.profile-missing-list li { margin-bottom: var(--space-1); break-inside: avoid; }
.doc-checklist {
display: flex;
flex-direction: column;
gap: var(--space-2);
padding: var(--space-1) 0 var(--space-2);
}
.doc-check-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
padding: var(--space-3) var(--space-3);
border: 1px solid var(--border);
border-radius: 10px;
background: var(--surface);
}
.doc-check-item--missing {
border-color: var(--warn);
background: var(--bg-attention, var(--bg-attention));
}
.doc-check-item--ok {
border-color: var(--ok-soft);
}
.doc-check-main {
display: flex;
align-items: center;
gap: var(--space-2);
min-width: 0;
}
.doc-check-label { font-weight: var(--fw-medium); color: var(--text-primary); }
.doc-check-actions {
display: flex;
align-items: center;
gap: var(--space-2);
flex-shrink: 0;
}
.profile-docs-extra { border-top: 1px solid var(--border); margin-top: var(--space-2); padding-top: var(--space-1); }
@media (max-width: 640px) {
.profile-missing-list { columns: 1; }
.doc-check-item { flex-direction: column; align-items: flex-start; }
}
/* ----- Driver document history modal ----- */
.driver-doc-history-body {
max-height: 65vh;
overflow-y: auto;
padding-right: var(--space-1);
}
.driver-doc-history-category {
margin-bottom: var(--space-5);
}
.driver-doc-history-category:last-child { margin-bottom: 0; }
.driver-doc-history-category__title {
font-size: var(--fs-ui);
font-weight: var(--fw-semi);
color: var(--text-primary);
margin: 0 0 var(--space-2);
padding-bottom: var(--space-1);
border-bottom: 1px solid var(--border);
}
.driver-doc-history-list {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.driver-doc-history-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-3);
padding: var(--space-3) var(--space-3);
border: 1px solid var(--border);
border-radius: 10px;
background: var(--surface);
}
.driver-doc-history-row__main { min-width: 0; flex: 1; }
.driver-doc-history-row__type {
font-weight: var(--fw-semi);
color: var(--text-primary);
margin-bottom: var(--space-1);
}
.driver-doc-history-row__meta,
.driver-doc-history-row__replaced {
font-size: var(--fs-body);
color: var(--text-secondary);
line-height: 1.4;
}
.driver-doc-history-row__replaced {
margin-top: var(--space-1);
color: var(--warn-strong);
}
.driver-doc-history-row__actions {
display: flex;
align-items: center;
gap: var(--space-1);
flex-shrink: 0;
}
.driver-doc-history-empty {
color: var(--text-tertiary);
font-size: var(--fs-body);
text-align: center;
padding: var(--space-5) var(--space-2);
}
/* ----- Driver history modal ----- */
.driver-history-modal-body {
max-height: 60vh;
overflow-y: auto;
padding-top: var(--space-4); /* space below tab bar / divider */
padding-right: var(--space-1);
}
.driver-history-lookup {
margin-bottom: var(--space-3);
padding: var(--space-3) var(--space-4);
border: 1px solid var(--border);
border-radius: 12px;
background: var(--bg-subtle);
}
.driver-history-lookup__title {
margin: 0 0 var(--space-2);
font-size: var(--fs-label);
font-weight: var(--fw-semi);
text-transform: uppercase;
letter-spacing: .06em;
color: var(--text-tertiary);
}
.driver-history-lookup-form {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
align-items: flex-end;
}
.driver-history-lookup-form__field {
display: flex;
flex-direction: column;
gap: var(--space-1);
min-width: 180px;
}
.driver-history-lookup-form__label {
font-size: var(--fs-label);
color: var(--text-secondary);
font-weight: var(--fw-medium);
}
.driver-history-date-input {
padding: var(--space-2) var(--space-2);
border: 1px solid var(--border-input, var(--border-strong));
border-radius: 8px;
font-size: var(--fs-body);
font-family: inherit;
background: var(--surface);
}
.driver-history-lookup-results__title {
font-size: var(--fs-body);
font-weight: var(--fw-semi);
color: var(--text-primary);
margin-bottom: var(--space-3);
}
.driver-history-lookup-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-3);
}
.driver-history-lookup-item {
padding: var(--space-3);
border: 1px solid var(--border);
border-radius: 10px;
background: var(--surface);
}
.driver-history-lookup-item__label {
font-size: var(--fs-label);
font-weight: var(--fw-semi);
text-transform: uppercase;
letter-spacing: .04em;
color: var(--text-tertiary);
margin-bottom: var(--space-1);
}
.driver-history-lookup-item__value {
font-size: var(--fs-ui);
font-weight: var(--fw-semi);
color: var(--text-primary);
}
.driver-history-lookup-item__value--link {
color: var(--primary);
text-decoration: none;
}
.driver-history-lookup-item__value--link:hover { text-decoration: underline; }
.driver-history-lookup-item__value--empty {
color: var(--text-secondary);
font-weight: var(--fw-medium);
}
.driver-history-lookup-item__hint {
margin-top: var(--space-1);
font-size: var(--fs-label);
color: var(--text-tertiary);
line-height: 1.4;
}
.driver-history-lookup-placeholder,
.driver-history-lookup-error,
.driver-history-empty {
font-size: var(--fs-body);
color: var(--text-secondary);
padding: var(--space-1) var(--space-1);
}
.driver-history-lookup-error { color: var(--danger); }
.driver-history-section-title {
margin: 0 0 var(--space-2);
font-size: var(--fs-label);
font-weight: var(--fw-semi);
text-transform: uppercase;
letter-spacing: .06em;
color: var(--text-tertiary);
}
.driver-history-section-divider {
height: 1px;
background: var(--border);
margin: var(--space-3) 0;
}
.driver-history-timeline {
display: flex;
flex-direction: column;
gap: 0;
}
.driver-history-card {
display: grid;
grid-template-columns: 20px 1fr;
gap: var(--space-3);
padding-bottom: var(--space-4);
position: relative;
}
.driver-history-card:last-child { padding-bottom: 0; }
.driver-history-card__rail {
display: flex;
justify-content: center;
position: relative;
}
.driver-history-card__rail::after {
content: '';
position: absolute;
top: var(--space-3);
bottom: -1.1rem;
width: 2px;
background: var(--border-row, var(--border));
left: 50%;
transform: translateX(-50%);
}
.driver-history-card:last-child .driver-history-card__rail::after { display: none; }
.driver-history-card__dot {
width: 10px;
height: 10px;
border-radius: 50%;
margin-top: var(--space-1);
background: var(--primary, var(--accent-hover));
box-shadow: 0 0 0 3px var(--primary-soft);
flex-shrink: 0;
z-index: 1;
}
.driver-history-card--removed .driver-history-card__dot {
background: var(--danger);
box-shadow: 0 0 0 3px var(--danger-soft);
}
.driver-history-card--current .driver-history-card__dot {
background: var(--wizard-line-bg-completed);
box-shadow: 0 0 0 3px var(--ok-soft);
}
.driver-history-card__body {
border: 1px solid var(--border);
border-radius: 12px;
padding: var(--space-3) var(--space-3);
background: var(--surface);
}
.driver-history-card--current .driver-history-card__body {
border-color: var(--ok-soft);
background: var(--ok-soft);
}
.driver-history-card--overlap .driver-history-card__body {
border-color: var(--warn-soft);
background: var(--bg-attention);
box-shadow: inset 3px 0 0 var(--warn);
}
.driver-history-card--overlap .driver-history-card__dot {
background: var(--warn);
box-shadow: 0 0 0 3px var(--warn-soft);
}
.driver-history-card--overlap.driver-history-card--current .driver-history-card__body {
border-color: var(--ok-soft);
background: linear-gradient(90deg, var(--bg-attention) 0%, var(--ok-soft) 100%);
box-shadow: inset 3px 0 0 var(--warn);
}
.driver-history-overlap-banner {
display: flex;
align-items: flex-start;
gap: var(--space-3);
margin-bottom: var(--space-3);
padding: var(--space-3) var(--space-3);
border-radius: 12px;
border: 1px solid var(--warn-soft);
background: var(--bg-attention);
color: var(--warn-strong);
}
.driver-history-overlap-banner__icon {
color: var(--warn);
flex-shrink: 0;
margin-top: 1px;
}
.driver-history-overlap-banner__text {
display: flex;
flex-direction: column;
gap: var(--space-1);
min-width: 0;
}
.driver-history-overlap-banner__title {
font-size: var(--fs-body);
font-weight: var(--fw-semi);
}
.driver-history-overlap-banner__hint {
font-size: var(--fs-label);
color: var(--warn);
line-height: 1.45;
}
.live-value-warning {
color: var(--warn);
}
.live-sub-warning {
color: var(--warn);
font-size: var(--fs-label);
line-height: 1.35;
margin-top: var(--space-1);
}
.driver-history-card__overlap-alert {
display: flex;
align-items: flex-start;
gap: var(--space-2);
margin-bottom: var(--space-2);
padding: var(--space-2) var(--space-2);
border-radius: 8px;
border: 1px solid var(--warn-soft);
background: var(--warn-soft);
color: var(--warn-strong);
}
.driver-history-card__overlap-icon {
color: var(--warn);
flex-shrink: 0;
margin-top: 1px;
}
.driver-history-card__overlap-content {
min-width: 0;
flex: 1;
}
.driver-history-card__overlap-title {
display: block;
font-size: var(--fs-label);
font-weight: var(--fw-semi);
margin-bottom: var(--space-1);
}
.driver-history-card__overlap-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.driver-history-card__overlap-item {
display: grid;
grid-template-columns: 6px minmax(0, 1fr);
gap: var(--space-2);
align-items: start;
font-size: var(--fs-label);
line-height: 1.4;
}
.driver-history-card__overlap-item::before {
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--warn);
margin-top: 0.45em;
}
.driver-history-card__overlap-item > span {
display: inline;
}
.driver-history-card__overlap-driver {
font-weight: var(--fw-semi);
margin-right: var(--space-1);
}
.driver-history-card__overlap-period {
color: var(--warn);
}
.driver-history-card__header {
display: flex;
justify-content: space-between;
gap: var(--space-3);
align-items: flex-start;
margin-bottom: var(--space-2);
}
.driver-history-card__header-actions {
display: flex;
align-items: center;
gap: var(--space-2);
flex-shrink: 0;
}
.driver-assignments-mini-table__actions {
width: 40px;
text-align: center;
white-space: nowrap;
}
.driver-assignment-correction-summary__title {
font-size: var(--fs-label);
font-weight: var(--fw-semi);
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--text-secondary);
margin: 0 0 var(--space-2);
}
.driver-assignment-correction-summary__list {
display: grid;
grid-template-columns: auto 1fr;
gap: var(--space-1) var(--space-3);
margin: 0;
font-size: var(--fs-body);
}
.driver-assignment-correction-summary__list dt {
margin: 0;
color: var(--text-secondary);
font-weight: var(--fw-medium);
}
.driver-assignment-correction-summary__list dd {
margin: 0;
}
.driver-history-tabs {
display: flex;
flex-wrap: wrap;
gap: var(--space-1);
padding: 0 var(--space-4) var(--space-3);
border-bottom: 1px solid var(--border);
}
.driver-history-tab {
appearance: none;
border: 1px solid transparent;
background: transparent;
color: var(--text-secondary);
font-size: var(--fs-body);
font-weight: var(--fw-medium);
padding: var(--space-1) var(--space-3);
border-radius: 999px;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: var(--space-1);
}
.driver-history-tab:hover {
color: var(--text-primary);
background: var(--bg-subtle);
}
.driver-history-tab--active {
color: var(--text-primary);
background: var(--bg-subtle);
border-color: var(--border);
}
.driver-history-tab__count {
font-size: var(--fs-label);
font-weight: var(--fw-semi);
line-height: 1;
padding: var(--space-1) var(--space-1);
border-radius: 999px;
background: var(--warn-soft);
color: var(--warn-strong);
}
/* ----- Telematics modal ----- */
.telematics-overview-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
flex-wrap: wrap;
margin-bottom: var(--space-4);
}
.telematics-overview-status {
display: flex;
align-items: center;
gap: var(--space-2);
flex-wrap: wrap;
}
.telematics-pill {
display: inline-flex;
align-items: center;
font-size: var(--fs-label);
font-weight: var(--fw-semi);
padding: var(--space-1) var(--space-2);
border-radius: 999px;
border: 1px solid var(--border);
background: var(--bg-subtle);
color: var(--text-secondary);
}
.telematics-pill--ok {
background: var(--ok-soft);
border-color: var(--ok-soft);
color: var(--ok-strong);
}
.telematics-pill--warn,
.telematics-pill--stale {
background: var(--danger-soft);
border-color: var(--warn-soft);
color: var(--warn);
}
.telematics-pill--critical {
background: var(--danger-soft);
border-color: var(--danger-soft);
color: var(--danger-strong);
}
.live-value .telematics-pill {
vertical-align: middle;
}
.telematics-pill--clickable {
cursor: pointer;
font: inherit;
font-size: var(--fs-label);
font-weight: var(--fw-semi);
line-height: inherit;
appearance: none;
-webkit-appearance: none;
}
.telematics-pill--clickable:hover {
filter: brightness(0.97);
}
.telematics-pill--clickable:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
/* Inline “Wird aktualisiert…” next to Live Position / Telematik titles */
.panel-title-row .telematics-updating-inline {
display: inline-flex;
align-items: center;
gap: 0.4rem;
margin-left: var(--space-2);
padding: 0.15rem 0.5rem;
border-radius: 999px;
font-size: var(--fs-label);
font-weight: var(--fw-medium);
color: var(--text-secondary);
background: color-mix(in srgb, var(--primary) 8%, var(--surface));
white-space: nowrap;
max-width: min(100%, 14rem);
}
.panel-title-row .telematics-updating-inline[data-state="error"] {
color: var(--danger-strong);
background: color-mix(in srgb, var(--danger-strong) 10%, var(--surface));
}
.panel-title-row .telematics-updating-text {
overflow: hidden;
text-overflow: ellipsis;
}
.telematics-updating-spinner {
width: 0.75rem;
height: 0.75rem;
border: 2px solid color-mix(in srgb, var(--primary) 25%, transparent);
border-top-color: var(--primary);
border-radius: 50%;
animation: telematics-spin 0.7s linear infinite;
flex-shrink: 0;
}
@keyframes telematics-spin {
to { transform: rotate(360deg); }
}
.telematics-live-surface.is-updating .live-grid,
.telematics-live-surface.is-updating .vehicle-map-body {
opacity: 0.72;
transition: opacity 0.2s ease;
}
/* site.html ⌀ km async refresh — status sits next to label, not mid-row */
.kv-row--site-odo {
align-items: center;
}
.kv-label--with-status {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 0.4rem 0.55rem;
min-width: 0;
flex: 1 1 auto;
max-width: 75%;
}
.kv-label--with-status .kv-label-main {
display: inline-flex;
align-items: center;
gap: 0.25rem;
flex-shrink: 0;
}
.site-odo-status {
display: inline-flex;
align-items: center;
gap: 0.4rem;
flex-shrink: 0;
padding: 0.12rem 0.45rem;
border-radius: 999px;
font-size: var(--fs-label);
font-weight: var(--fw-medium);
line-height: 1.2;
color: var(--text-secondary);
background: color-mix(in srgb, var(--primary) 10%, var(--surface));
white-space: nowrap;
}
.site-odo-status[data-state="error"] {
color: var(--danger-strong);
background: color-mix(in srgb, var(--danger-strong) 10%, var(--surface));
}
.site-odo-spinner {
box-sizing: border-box;
width: 0.85rem;
height: 0.85rem;
border: 2px solid color-mix(in srgb, var(--primary) 28%, var(--border));
border-top-color: var(--primary);
border-radius: 50%;
animation: site-odo-spin 0.7s linear infinite;
flex-shrink: 0;
}
@keyframes site-odo-spin {
to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
.site-odo-spinner { animation: none; border-top-color: var(--primary); opacity: 0.7; }
}
.kv-value.site-avg-odometer-value {
flex-shrink: 0;
}
.kv-value.site-avg-odometer-value.is-updating {
opacity: 0.72;
transition: opacity 0.2s ease;
}
/* Wizard async odometer prefill (protocol + vehicle) */
.wizard-odo-status {
display: inline-flex;
align-items: center;
gap: 0.4rem;
margin: 0.35rem 0 0 0.15rem;
padding: 0.12rem 0.5rem;
border-radius: 999px;
font-size: var(--fs-label);
font-weight: var(--fw-medium);
line-height: 1.2;
color: var(--text-secondary);
background: color-mix(in srgb, var(--primary) 10%, var(--surface));
white-space: nowrap;
}
.wizard-odo-status[data-state="error"] {
color: var(--danger-strong);
background: color-mix(in srgb, var(--danger-strong) 10%, var(--surface));
}
.wizard-odo-spinner {
box-sizing: border-box;
width: 0.85rem;
height: 0.85rem;
border: 2px solid color-mix(in srgb, var(--primary) 28%, var(--border));
border-top-color: var(--primary);
border-radius: 50%;
animation: site-odo-spin 0.7s linear infinite;
flex-shrink: 0;
}
input.is-odo-updating {
opacity: 0.75;
}
/* Dashboard Service tile async live-km refresh */
.kpi-label .dashboard-tile-updating {
display: inline-flex;
align-items: center;
gap: 0.35rem;
margin-left: 0.35rem;
padding: 0.1rem 0.4rem;
border-radius: 999px;
font-size: var(--fs-label);
font-weight: var(--fw-medium);
color: var(--text-secondary);
background: color-mix(in srgb, var(--primary) 10%, var(--surface));
white-space: nowrap;
}
.kpi-metric-card.is-tile-updating .kpi-value,
.kpi-metric-card.is-tile-updating .kpi-metric-sub {
opacity: 0.72;
transition: opacity 0.2s ease;
}
.telematics-overview-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-3) var(--space-5);
margin-bottom: var(--space-3);
}
@media (max-width: 640px) {
.telematics-overview-grid { grid-template-columns: 1fr; }
}
.telematics-kv__label {
font-size: var(--fs-label);
color: var(--text-tertiary);
text-transform: uppercase;
letter-spacing: .05em;
font-weight: var(--fw-medium);
margin-bottom: var(--space-1);
}
.telematics-kv__value {
font-size: var(--fs-ui);
font-weight: var(--fw-medium);
color: var(--text-primary);
word-break: break-word;
}
.telematics-kv__hint {
font-size: var(--fs-body);
color: var(--text-tertiary);
margin-top: var(--space-1);
}
.telematics-periods {
border-top: 1px solid var(--border-divider);
padding-top: var(--space-3);
margin-bottom: var(--space-3);
}
.telematics-periods__title {
font-size: var(--fs-body);
font-weight: var(--fw-semi);
color: var(--text-secondary);
margin-bottom: var(--space-2);
}
.telematics-periods-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--space-2);
}
@media (max-width: 640px) {
.telematics-periods-grid { grid-template-columns: 1fr 1fr; }
}
.telematics-period {
padding: var(--space-2) var(--space-3);
border: 1px solid var(--border-divider);
border-radius: var(--radius-button);
background: var(--bg-subtle, var(--bg-soft));
}
.telematics-period__label {
font-size: var(--fs-label);
color: var(--text-tertiary);
text-transform: uppercase;
letter-spacing: .04em;
margin-bottom: var(--space-1);
}
.telematics-period__value {
font-size: var(--fs-ui);
font-weight: var(--fw-medium);
}
.telematics-filter-row {
display: flex;
flex-wrap: wrap;
gap: var(--space-1);
margin-bottom: var(--space-3);
}
.telematics-filter-chip {
appearance: none;
border: 1px solid var(--border);
background: transparent;
color: var(--text-secondary);
font-size: var(--fs-label);
font-weight: var(--fw-medium);
padding: var(--space-1) var(--space-2);
border-radius: 999px;
cursor: pointer;
}
.telematics-filter-chip:hover {
color: var(--text-primary);
background: var(--bg-subtle);
}
.telematics-filter-chip--active {
color: var(--text-primary);
background: var(--bg-subtle);
border-color: var(--border);
font-weight: var(--fw-semi);
}
.telematics-table-wrap { overflow-x: auto; }
.telematics-source-badge {
display: inline-block;
font-size: var(--fs-label);
font-weight: var(--fw-medium);
padding: var(--space-1) var(--space-2);
border-radius: 999px;
background: var(--bg-subtle);
border: 1px solid var(--border-divider);
}
.telematics-flags { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.telematics-flag {
display: inline-block;
font-size: var(--fs-label);
font-weight: var(--fw-semi);
padding: var(--space-1) var(--space-1);
border-radius: 999px;
background: var(--bg-subtle);
color: var(--text-secondary);
border: 1px solid var(--border-divider);
}
.telematics-flag--warn {
background: var(--danger-soft);
color: var(--warn);
border-color: var(--warn-soft);
}
.telematics-flag--active {
background: var(--danger-soft);
color: var(--danger-strong);
border-color: var(--danger-soft);
}
.telematics-severity {
display: inline-block;
font-size: var(--fs-label);
font-weight: var(--fw-semi);
padding: var(--space-1) var(--space-1);
border-radius: 999px;
border: 1px solid var(--border-divider);
}
.telematics-severity--info { background: var(--primary-soft); color: var(--accent-hover); border-color: var(--accent-soft); }
.telematics-severity--warning { background: var(--danger-soft); color: var(--warn); border-color: var(--warn-soft); }
.telematics-severity--error { background: var(--danger-soft); color: var(--danger-strong); border-color: var(--danger-soft); }
.telematics-fault-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.telematics-fault-row {
display: grid;
grid-template-columns: auto auto 1fr;
gap: var(--space-2);
align-items: center;
padding: var(--space-2) var(--space-2);
border: 1px solid var(--border-divider);
border-radius: var(--radius-button);
}
.telematics-fault-code { font-weight: var(--fw-semi); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--fs-body); }
.telematics-fault-msg { color: var(--text-secondary); font-size: var(--fs-body); min-width: 0; }
.driver-history-tab-panel.hidden {
display: none;
}
.driver-history-panel-footer {
padding: var(--space-2) var(--space-4) var(--space-3);
border-top: 1px solid var(--border);
}
.driver-corrections-list,
.driver-corrections-list-container {
display: flex;
flex-direction: column;
gap: var(--space-3);
padding: var(--space-3) var(--space-4) var(--space-4);
}
.driver-corrections-empty,
.driver-history-empty {
color: var(--text-tertiary);
font-size: var(--fs-body);
padding: var(--space-4) 0;
margin: 0;
}
.driver-correction-batch {
border: 1px solid var(--border);
border-radius: 12px;
background: var(--bg-attention);
padding: var(--space-3) var(--space-3);
}
.driver-correction-batch__header {
display: flex;
justify-content: space-between;
gap: var(--space-3);
align-items: flex-start;
margin-bottom: var(--space-2);
}
.driver-correction-batch__meta {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
align-items: center;
}
.driver-correction-batch__label {
font-size: var(--fs-label);
font-weight: var(--fw-semi);
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--warn-strong);
}
.driver-correction-batch__time {
font-size: var(--fs-body);
font-weight: var(--fw-medium);
}
.driver-correction-batch__badge {
font-size: var(--fs-label);
padding: var(--space-1) var(--space-2);
border-radius: 999px;
background: var(--warn-soft);
color: var(--warn);
}
.driver-correction-batch__user {
font-size: var(--fs-label);
color: var(--text-secondary);
}
.driver-correction-batch__note {
font-size: var(--fs-body);
margin: 0 0 var(--space-2);
color: var(--text-primary);
}
.driver-correction-batch__section-label {
display: block;
font-size: var(--fs-label);
font-weight: var(--fw-semi);
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--text-secondary);
margin-bottom: var(--space-1);
}
.driver-correction-batch__replacement {
margin-bottom: var(--space-2);
padding: var(--space-2) var(--space-2);
border-radius: 8px;
background: var(--ok-soft);
border: 1px solid var(--ok-soft);
}
.driver-correction-batch__row {
display: flex;
flex-wrap: wrap;
gap: var(--space-2) var(--space-3);
font-size: var(--fs-body);
}
.driver-correction-batch__field--muted {
color: var(--text-secondary);
}
.driver-correction-batch__entries {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.driver-correction-superseded-entry {
display: flex;
flex-wrap: wrap;
gap: var(--space-2) var(--space-3);
font-size: var(--fs-body);
padding: var(--space-2) var(--space-2);
border-radius: 8px;
background: var(--surface);
border: 1px dashed var(--border);
color: var(--text-secondary);
text-decoration: line-through;
text-decoration-color: rgba(0, 0, 0, 0.2);
}
.driver-correction-superseded-entry__time,
.driver-correction-superseded-entry__action,
.driver-correction-superseded-entry__driver {
text-decoration: line-through;
text-decoration-color: rgba(0, 0, 0, 0.15);
}
.driver-correction-superseded-entry__reason {
color: var(--text-tertiary);
font-style: italic;
}
.driver-history-card__meta {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
align-items: center;
}
.driver-history-card__badge {
font-size: var(--fs-label);
font-weight: var(--fw-semi);
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--text-secondary);
background: var(--bg-subtle);
padding: var(--space-1) var(--space-2);
border-radius: 999px;
}
.driver-history-card__badge--current {
color: var(--ok-strong);
background: var(--ok-soft);
}
.driver-history-card__time,
.driver-history-card__user {
font-size: var(--fs-label);
color: var(--text-tertiary);
}
.driver-history-card__summary {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
align-items: center;
font-size: var(--fs-ui);
line-height: 1.45;
}
.driver-history-card__driver-link {
font-weight: var(--fw-semi);
color: var(--primary);
text-decoration: none;
}
.driver-history-card__driver-link:hover { text-decoration: underline; }
.driver-history-card__driver-empty { color: var(--text-secondary); font-weight: var(--fw-medium); }
.driver-history-card__change-from {
font-size: var(--fs-label);
color: var(--text-tertiary);
}
.driver-history-card__timeline {
display: grid;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
gap: var(--space-2) var(--space-3);
align-items: start;
margin-top: var(--space-2);
padding-top: var(--space-2);
border-top: 1px solid var(--border-row, var(--border-divider));
}
.driver-history-card__timeline-col {
display: flex;
flex-direction: column;
gap: var(--space-1);
min-width: 0;
}
.driver-history-card__timeline-col--end {
text-align: right;
align-items: flex-end;
}
.driver-history-card__timeline-sep {
padding-top: var(--space-1);
font-size: var(--fs-ui);
font-weight: var(--fw-medium);
color: var(--text-tertiary);
line-height: 1.3;
}
.driver-history-card__datetime {
font-size: var(--fs-body);
font-weight: var(--fw-medium);
color: var(--text-primary);
line-height: 1.35;
}
.driver-history-card__reason-text {
font-size: var(--fs-label);
color: var(--text-secondary);
line-height: 1.4;
}
.driver-history-card__reason-text--empty {
color: var(--text-tertiary);
}
.driver-history-gap {
display: grid;
grid-template-columns: 20px 1fr;
gap: var(--space-3);
padding-bottom: var(--space-4);
position: relative;
}
.driver-history-gap:last-child { padding-bottom: 0; }
.driver-history-gap__rail {
display: flex;
justify-content: center;
position: relative;
}
.driver-history-gap__rail::after {
content: '';
position: absolute;
top: var(--space-2);
bottom: -1.1rem;
width: 2px;
background: var(--border-row, var(--border));
left: 50%;
transform: translateX(-50%);
}
.driver-history-gap:last-child .driver-history-gap__rail::after { display: none; }
.driver-history-gap__dot {
width: 8px;
height: 8px;
border-radius: 50%;
margin-top: var(--space-1);
background: var(--border-strong);
border: 2px solid var(--bg-muted);
flex-shrink: 0;
z-index: 1;
}
.driver-history-gap__content {
display: flex;
flex-wrap: wrap;
gap: var(--space-1) var(--space-2);
align-items: baseline;
padding: var(--space-1) 0 var(--space-1);
color: var(--text-secondary);
font-size: var(--fs-body);
line-height: 1.45;
}
.driver-history-gap--live .driver-history-gap__content {
color: var(--text-tertiary);
}
.driver-history-gap__label {
font-weight: var(--fw-medium);
color: var(--text-tertiary);
font-style: italic;
}
.driver-history-gap__period {
color: var(--text-secondary);
}
.driver-history-gap__duration {
font-size: var(--fs-label);
color: var(--text-tertiary);
}
.driver-history-lookup-segments {
display: flex;
flex-direction: column;
gap: 0;
margin-top: var(--space-1);
border: 1px solid var(--border);
border-radius: 8px;
overflow: hidden;
background: var(--bg-subtle);
}
.driver-history-lookup-segment {
padding: var(--space-2) var(--space-3);
background: var(--surface);
}
.driver-history-lookup-segment + .driver-history-lookup-segment {
border-top: 1px solid var(--border);
}
.driver-history-lookup-segment__row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-2);
}
.driver-history-lookup-segment__driver {
min-width: 0;
flex: 1 1 auto;
}
.driver-history-lookup-segment__name {
font-size: var(--fs-ui);
font-weight: var(--fw-semi);
color: var(--primary);
text-decoration: none;
line-height: 1.3;
}
.driver-history-lookup-segment__name:hover { text-decoration: underline; }
.driver-history-lookup-segment__name--empty {
color: var(--text-secondary);
font-weight: var(--fw-medium);
}
.driver-history-lookup-segment__time {
flex: 0 0 auto;
font-size: var(--fs-label);
font-weight: var(--fw-medium);
color: var(--text-tertiary);
white-space: nowrap;
font-variant-numeric: tabular-nums;
letter-spacing: 0.01em;
}
.driver-history-lookup-segment__reason {
margin-top: var(--space-1);
font-size: var(--fs-label);
color: var(--text-secondary);
line-height: 1.35;
}
.driver-history-lookup-item:has(.driver-history-lookup-segments) .driver-history-lookup-item__hint {
margin-top: var(--space-2);
}
.driver-history-load-more:disabled { opacity: 0.6; cursor: not-allowed; }
@media (max-width: 900px) {
.driver-history-lookup-grid { grid-template-columns: 1fr; }
}
/* ----- Driver QR modal ----- */
.driver-qr-modal__intro {
font-size: var(--fs-body);
color: var(--text-secondary);
margin: 0 0 var(--space-3);
line-height: 1.45;
}
.driver-qr-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-5);
margin-bottom: var(--space-3);
}
.driver-qr-sticker {
border: 1px solid var(--border);
border-radius: 12px;
padding: var(--space-5) var(--space-3) var(--space-5);
text-align: center;
background: var(--surface);
}
.driver-qr-sticker__plate {
font-size: var(--fs-kpi);
font-weight: var(--fw-bold);
letter-spacing: .04em;
margin-bottom: var(--space-3);
color: var(--text-primary);
}
.driver-qr-sticker__qr {
display: block;
margin: 0 auto;
background: var(--surface);
padding: var(--space-1);
border-radius: 8px;
}
.driver-qr-sticker__action {
margin-top: var(--space-4);
font-size: var(--fs-ui);
font-weight: var(--fw-bold);
letter-spacing: .1em;
}
.driver-qr-sticker__action--checkin { color: var(--ok-strong); }
.driver-qr-sticker__action--checkout { color: var(--warn); }
.driver-qr-modal__actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
justify-content: flex-end;
}
@media (max-width: 700px) {
.driver-qr-grid { grid-template-columns: 1fr; }
.driver-qr-modal__actions { justify-content: stretch; }
.driver-qr-modal__actions .btn { flex: 1 1 auto; justify-content: center; }
}
/* ----- Form select (plain) ----- */
.form-select {
display: block; width: 100%;
padding: var(--space-2) var(--space-3); font-size: var(--fs-ui);
border: 1px solid var(--border-strong); border-radius: 0.25rem;
background-color: white;
}
/* ----- Border / accent helpers ----- */
.border-secondary { border-color: var(--border-strong); }
.border-gray-400 { border-color: var(--text-muted); }
.border-gray-500 { border-color: var(--text-muted); }
.accent-blue-600 { accent-color: var(--accent); }
/* ----- Focus / hover states (filter, column, search modals) ----- */
.focus\:outline-none:focus { outline: none; }
.focus\:ring-1:focus { box-shadow: 0 0 0 1px var(--primary); }
.focus\:ring-link:focus { box-shadow: 0 0 0 1px var(--primary); }
.focus\:border-link:focus { border-color: var(--primary); }
.hover\:text-primary:hover { color: var(--primary); }
/* ----- Width / sizing utilities ----- */
.w-64 { width: 16rem; }
.w-2\/4 { width: 50%; }
.w-2\/5 { width: 40%; }
.w-3\/5 { width: 60%; }
.w-1\/6 { width: 16.666667%; }
.w-5\/6 { width: 83.333333%; }
.w-6\/12 { width: 50%; }
.flex-grow { flex-grow: 1; }
.max-w-4xl { max-width: 56rem; }
.max-h-64 { max-height: 16rem; }
.max-h-\[80vh\] { max-height: 80vh; }
/* ----- Spacing utilities ----- */
.pr-7 { padding-right: var(--space-5); }
.mr-3 { margin-right: var(--space-3); }
.my-4 { margin-top: var(--space-4); margin-bottom: var(--space-4); }
.space-x-2 > * + * { margin-left: var(--space-2); }
/* ----- Positioning (search icon button) ----- */
.top-1\/2 { top: 50%; }
.right-1\.5 { right: var(--space-1); }
/* ----- Typography / misc utilities ----- */
.text-\[10px\] { font-size: var(--fs-label); }
.align-top { vertical-align: top; }
.col-span-2 { grid-column: span 2 / span 2; }
.whitespace-pre-line { white-space: pre-line; }
.last\:border-0:last-child { border: none; }
/* §Icons — generated SVG data-URIs */
/* Generated from templates/WebApp/partials/_icon_paths/*.svg — do not edit by hand. */
.icon-alert-circle {
display: inline-block;
width: 16px;
height: 16px;
background-image: url("data:image/svg+xml,");
background-repeat: no-repeat;
background-size: contain;
vertical-align: middle;
flex-shrink: 0;
}
.icon-alert-triangle {
display: inline-block;
width: 16px;
height: 16px;
background-image: url("data:image/svg+xml,");
background-repeat: no-repeat;
background-size: contain;
vertical-align: middle;
flex-shrink: 0;
}
.icon-arrows-right-left {
display: inline-block;
width: 16px;
height: 16px;
background-image: url("data:image/svg+xml,");
background-repeat: no-repeat;
background-size: contain;
vertical-align: middle;
flex-shrink: 0;
}
.icon-broadcast {
display: inline-block;
width: 16px;
height: 16px;
background-image: url("data:image/svg+xml,");
background-repeat: no-repeat;
background-size: contain;
vertical-align: middle;
flex-shrink: 0;
}
.icon-building {
display: inline-block;
width: 16px;
height: 16px;
background-image: url("data:image/svg+xml,");
background-repeat: no-repeat;
background-size: contain;
vertical-align: middle;
flex-shrink: 0;
}
.icon-car {
display: inline-block;
width: 16px;
height: 16px;
background-image: url("data:image/svg+xml,");
background-repeat: no-repeat;
background-size: contain;
vertical-align: middle;
flex-shrink: 0;
}
.icon-calendar {
display: inline-block;
width: 16px;
height: 16px;
background-image: url("data:image/svg+xml,");
background-repeat: no-repeat;
background-size: contain;
vertical-align: middle;
flex-shrink: 0;
}
.icon-clock {
display: inline-block;
width: 16px;
height: 16px;
background-image: url("data:image/svg+xml,");
background-repeat: no-repeat;
background-size: contain;
vertical-align: middle;
flex-shrink: 0;
}
.icon-chart-line {
display: inline-block;
width: 16px;
height: 16px;
background-image: url("data:image/svg+xml,");
background-repeat: no-repeat;
background-size: contain;
vertical-align: middle;
flex-shrink: 0;
}
.icon-check {
display: inline-block;
width: 16px;
height: 16px;
background-image: url("data:image/svg+xml,");
background-repeat: no-repeat;
background-size: contain;
vertical-align: middle;
flex-shrink: 0;
}
.icon-chevron-down {
display: inline-block;
width: 16px;
height: 16px;
background-image: url("data:image/svg+xml,");
background-repeat: no-repeat;
background-size: contain;
vertical-align: middle;
flex-shrink: 0;
}
.icon-chevron-left {
display: inline-block;
width: 16px;
height: 16px;
background-image: url("data:image/svg+xml,");
background-repeat: no-repeat;
background-size: contain;
vertical-align: middle;
flex-shrink: 0;
}
.icon-chevron-right {
display: inline-block;
width: 16px;
height: 16px;
background-image: url("data:image/svg+xml,");
background-repeat: no-repeat;
background-size: contain;
vertical-align: middle;
flex-shrink: 0;
}
.icon-clipboard-list {
display: inline-block;
width: 16px;
height: 16px;
background-image: url("data:image/svg+xml,");
background-repeat: no-repeat;
background-size: contain;
vertical-align: middle;
flex-shrink: 0;
}
.icon-dashboard {
display: inline-block;
width: 16px;
height: 16px;
background-image: url("data:image/svg+xml,");
background-repeat: no-repeat;
background-size: contain;
vertical-align: middle;
flex-shrink: 0;
}
.icon-dots-vertical {
display: inline-block;
width: 16px;
height: 16px;
background-image: url("data:image/svg+xml,");
background-repeat: no-repeat;
background-size: contain;
vertical-align: middle;
flex-shrink: 0;
}
.icon-download {
display: inline-block;
width: 16px;
height: 16px;
background-image: url("data:image/svg+xml,");
background-repeat: no-repeat;
background-size: contain;
vertical-align: middle;
flex-shrink: 0;
}
.icon-edit {
display: inline-block;
width: 16px;
height: 16px;
background-image: url("data:image/svg+xml,");
background-repeat: no-repeat;
background-size: contain;
vertical-align: middle;
flex-shrink: 0;
}
.icon-external-link {
display: inline-block;
width: 16px;
height: 16px;
background-image: url("data:image/svg+xml,");
background-repeat: no-repeat;
background-size: contain;
vertical-align: middle;
flex-shrink: 0;
}
.icon-eye {
display: inline-block;
width: 16px;
height: 16px;
background-image: url("data:image/svg+xml,");
background-repeat: no-repeat;
background-size: contain;
vertical-align: middle;
flex-shrink: 0;
}
.icon-file-text {
display: inline-block;
width: 16px;
height: 16px;
background-image: url("data:image/svg+xml,");
background-repeat: no-repeat;
background-size: contain;
vertical-align: middle;
flex-shrink: 0;
}
.icon-file {
display: inline-block;
width: 16px;
height: 16px;
background-image: url("data:image/svg+xml,");
background-repeat: no-repeat;
background-size: contain;
vertical-align: middle;
flex-shrink: 0;
}
.icon-gas-station {
display: inline-block;
width: 16px;
height: 16px;
background-image: url("data:image/svg+xml,");
background-repeat: no-repeat;
background-size: contain;
vertical-align: middle;
flex-shrink: 0;
}
.icon-history {
display: inline-block;
width: 16px;
height: 16px;
background-image: url("data:image/svg+xml,");
background-repeat: no-repeat;
background-size: contain;
vertical-align: middle;
flex-shrink: 0;
}
.icon-info-circle {
display: inline-block;
width: 16px;
height: 16px;
background-image: url("data:image/svg+xml,");
background-repeat: no-repeat;
background-size: contain;
vertical-align: middle;
flex-shrink: 0;
}
.icon-link {
display: inline-block;
width: 16px;
height: 16px;
background-image: url("data:image/svg+xml,");
background-repeat: no-repeat;
background-size: contain;
vertical-align: middle;
flex-shrink: 0;
}
.icon-logout {
display: inline-block;
width: 16px;
height: 16px;
background-image: url("data:image/svg+xml,");
background-repeat: no-repeat;
background-size: contain;
vertical-align: middle;
flex-shrink: 0;
}
.icon-map-pin {
display: inline-block;
width: 16px;
height: 16px;
background-image: url("data:image/svg+xml,");
background-repeat: no-repeat;
background-size: contain;
vertical-align: middle;
flex-shrink: 0;
}
.icon-maximize {
display: inline-block;
width: 16px;
height: 16px;
background-image: url("data:image/svg+xml,");
background-repeat: no-repeat;
background-size: contain;
vertical-align: middle;
flex-shrink: 0;
}
.icon-message-circle {
display: inline-block;
width: 16px;
height: 16px;
background-image: url("data:image/svg+xml,");
background-repeat: no-repeat;
background-size: contain;
vertical-align: middle;
flex-shrink: 0;
}
.icon-contact-card {
display: inline-block;
width: 16px;
height: 16px;
background-image: url("data:image/svg+xml,");
background-repeat: no-repeat;
background-size: contain;
vertical-align: middle;
flex-shrink: 0;
}
.icon-order-wrench {
display: inline-block;
width: 16px;
height: 16px;
background-image: url("data:image/svg+xml,");
background-repeat: no-repeat;
background-size: contain;
vertical-align: middle;
flex-shrink: 0;
}
.icon-paperclip {
display: inline-block;
width: 16px;
height: 16px;
background-image: url("data:image/svg+xml,");
background-repeat: no-repeat;
background-size: contain;
vertical-align: middle;
flex-shrink: 0;
}
.icon-pencil {
display: inline-block;
width: 16px;
height: 16px;
background-image: url("data:image/svg+xml,");
background-repeat: no-repeat;
background-size: contain;
vertical-align: middle;
flex-shrink: 0;
}
.icon-phone {
display: inline-block;
width: 16px;
height: 16px;
background-image: url("data:image/svg+xml,");
background-repeat: no-repeat;
background-size: contain;
vertical-align: middle;
flex-shrink: 0;
}
.icon-mail {
display: inline-block;
width: 16px;
height: 16px;
background-image: url("data:image/svg+xml,");
background-repeat: no-repeat;
background-size: contain;
vertical-align: middle;
flex-shrink: 0;
}
.icon-qr-code {
display: inline-block;
width: 16px;
height: 16px;
background-image: url("data:image/svg+xml,");
background-repeat: no-repeat;
background-size: contain;
vertical-align: middle;
flex-shrink: 0;
}
.icon-plus {
display: inline-block;
width: 16px;
height: 16px;
background-image: url("data:image/svg+xml,");
background-repeat: no-repeat;
background-size: contain;
vertical-align: middle;
flex-shrink: 0;
}
.icon-settings {
display: inline-block;
width: 16px;
height: 16px;
background-image: url("data:image/svg+xml,");
background-repeat: no-repeat;
background-size: contain;
vertical-align: middle;
flex-shrink: 0;
}
.icon-shield {
display: inline-block;
width: 16px;
height: 16px;
background-image: url("data:image/svg+xml,");
background-repeat: no-repeat;
background-size: contain;
vertical-align: middle;
flex-shrink: 0;
}
.icon-tool {
display: inline-block;
width: 16px;
height: 16px;
background-image: url("data:image/svg+xml,");
background-repeat: no-repeat;
background-size: contain;
vertical-align: middle;
flex-shrink: 0;
}
.icon-trash {
display: inline-block;
width: 16px;
height: 16px;
background-image: url("data:image/svg+xml,");
background-repeat: no-repeat;
background-size: contain;
vertical-align: middle;
flex-shrink: 0;
}
.icon-upload {
display: inline-block;
width: 16px;
height: 16px;
background-image: url("data:image/svg+xml,");
background-repeat: no-repeat;
background-size: contain;
vertical-align: middle;
flex-shrink: 0;
}
.icon-user-profile {
display: inline-block;
width: 16px;
height: 16px;
background-image: url("data:image/svg+xml,");
background-repeat: no-repeat;
background-size: contain;
vertical-align: middle;
flex-shrink: 0;
}
.icon-user {
display: inline-block;
width: 16px;
height: 16px;
background-image: url("data:image/svg+xml,");
background-repeat: no-repeat;
background-size: contain;
vertical-align: middle;
flex-shrink: 0;
}
.icon-users {
display: inline-block;
width: 16px;
height: 16px;
background-image: url("data:image/svg+xml,");
background-repeat: no-repeat;
background-size: contain;
vertical-align: middle;
flex-shrink: 0;
}
.icon-x {
display: inline-block;
width: 16px;
height: 16px;
background-image: url("data:image/svg+xml,");
background-repeat: no-repeat;
background-size: contain;
vertical-align: middle;
flex-shrink: 0;
}
.icon-checklist-ok {
display: inline-block;
width: 16px;
height: 16px;
background-image: url('../images/icon_success.png');
background-repeat: no-repeat;
background-size: contain;
vertical-align: middle;
flex-shrink: 0;
}
.icon-checklist-warning {
display: inline-block;
width: 16px;
height: 16px;
background-image: url('../images/icon_warning.png');
background-repeat: no-repeat;
background-size: contain;
vertical-align: middle;
flex-shrink: 0;
}
.icon-checklist-critical {
display: inline-block;
width: 16px;
height: 16px;
background-image: url('../images/icon_failure.png');
background-repeat: no-repeat;
background-size: contain;
vertical-align: middle;
flex-shrink: 0;
}
.icon-checklist-untested {
display: inline-block;
width: 16px;
height: 16px;
background-image: url("data:image/svg+xml,");
background-repeat: no-repeat;
background-size: contain;
vertical-align: middle;
flex-shrink: 0;
}
/* Protocol detail — checklist (same density as Protokoll-Informationen; no zebra stripes) */
.protocol-checklist-table {
width: 100%;
table-layout: auto;
border-collapse: collapse;
font-size: var(--fs-label);
}
.protocol-checklist-table tbody tr,
.protocol-checklist-table tbody tr td {
background: transparent !important; /* override global .data-table / row-alt zebra */
}
.protocol-checklist-table td {
max-width: none;
white-space: normal;
vertical-align: middle;
padding: var(--space-cell-y) var(--space-cell-x);
border-bottom: 1px solid var(--border-row);
font-size: var(--fs-label);
}
.protocol-checklist-table tr:last-child td {
border-bottom: 0;
}
.protocol-checklist-label {
font-weight: var(--fw-semi);
width: 45%;
}
.protocol-checklist-status {
display: inline-flex;
align-items: center;
gap: var(--space-1);
padding: 1px var(--space-2);
border-radius: var(--radius-full);
font-size: var(--fs-label); /* 12px — same as table cells */
font-weight: var(--fw-semi);
line-height: 1.2;
white-space: nowrap;
vertical-align: middle;
}
.protocol-checklist-status [class^="icon-"] {
width: 14px !important;
height: 14px !important;
flex-shrink: 0;
}
.protocol-checklist-msg {
font-size: var(--fs-caption);
margin-top: 2px;
}
/* Same semantic colors as .status-badge-* */
.protocol-checklist-status--ok {
background: var(--ok-soft);
color: var(--ok-strong);
}
.protocol-checklist-status--warnung {
background: var(--warn-soft);
color: var(--warn);
}
.protocol-checklist-status--kritisch {
background: var(--danger-soft);
color: var(--danger-strong);
}
.protocol-checklist-status--nicht-gepruft {
background: var(--bg-muted);
color: var(--text-body);
}
/* Protocol detail — vehicle photos (full-width row, 4 columns) */
.protocol-vehicle-photos {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--space-4);
}
.protocol-vehicle-photo-item {
min-width: 0;
}
.protocol-vehicle-photo-label {
font-size: var(--fs-ui);
margin-bottom: var(--space-1);
color: var(--text-secondary);
}
.protocol-vehicle-photo-frame {
display: flex;
align-items: center;
justify-content: center;
min-height: 6rem;
max-height: 12rem;
padding: var(--space-1);
border-radius: var(--radius-md);
border: 1px solid var(--border);
background: var(--bg-soft);
overflow: hidden;
}
.protocol-vehicle-photo-img {
display: block;
max-width: 100%;
max-height: 11.25rem;
width: auto;
height: auto;
object-fit: contain;
border-radius: var(--radius-sm);
}
.protocol-vehicle-photo-empty {
color: var(--text-tertiary);
font-size: var(--fs-ui);
}
/* Wizard repeatable sections (issue create, protocol, etc.) */
.protocol-repeatable-list {
display: flex;
flex-direction: column;
gap: var(--space-4);
margin-bottom: var(--space-4);
}
.protocol-repeatable-card {
border: 1px solid var(--border-subtle);
border-radius: 0.75rem;
padding: var(--space-3) var(--space-2) var(--space-2);
background: var(--surface);
margin-bottom: var(--space-1);
}
.protocol-repeatable-card .wizard-row {
padding-left: 0;
padding-right: 0;
}
.protocol-repeatable-card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--space-3);
}
.protocol-repeatable-card-title {
font-weight: var(--fw-semi);
font-size: var(--fs-ui);
}
.protocol-remove-btn {
border: none;
background: transparent;
color: var(--danger-strong);
font-size: var(--fs-value);
line-height: 1;
cursor: pointer;
padding: 0 var(--space-1);
}
.wizard-repeatable-add-btn {
display: flex;
width: 100%;
box-sizing: border-box;
justify-content: center;
align-items: center;
gap: var(--space-2);
padding: var(--space-3) var(--space-4);
font-size: var(--fs-ui);
font-weight: var(--fw-semi);
color: var(--primary);
background: var(--primary-soft);
border: 2px dashed var(--accent-soft);
border-radius: var(--radius-md);
margin-top: var(--space-1);
margin-bottom: var(--space-2);
white-space: normal;
transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.wizard-repeatable-add-btn:hover {
background: var(--primary-soft);
border-color: var(--primary);
color: var(--primary);
box-shadow: 0 1px 4px rgba(37, 99, 235, 0.12);
}
.protocol-damage-photos {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
/* Protocol damage map (sectioned SVGs + zone chips) */
.protocol-damage-map {
display: flex;
flex-direction: column;
gap: var(--space-3);
margin-bottom: var(--space-2);
}
.protocol-damage-hint {
margin: 0;
line-height: 1.4;
}
/* 2-col workspace: map | active damage editor */
.protocol-damage-workspace {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
gap: var(--space-4);
align-items: start;
}
.protocol-damage-map-col {
display: flex;
flex-direction: column;
gap: var(--space-2);
min-width: 0;
}
.protocol-damage-active-col {
min-width: 0;
position: sticky;
top: var(--space-2);
}
.protocol-damage-active-slot:empty {
display: none;
}
.protocol-damage-active-empty {
border: 1px dashed var(--border-strong);
border-radius: 0.75rem;
background: var(--bg-soft);
padding: var(--space-5) var(--space-4);
text-align: center;
color: var(--text-muted);
}
.protocol-damage-active-empty-title {
margin: 0 0 var(--space-1);
font-size: var(--fs-ui);
font-weight: var(--fw-semi);
color: var(--text-body);
}
.protocol-damage-active-empty-text {
margin: 0;
font-size: var(--fs-body);
line-height: 1.4;
}
.protocol-damage-active-col .protocol-damage-card {
margin-bottom: 0;
border-color: var(--accent);
box-shadow: 0 0 0 1px var(--accent);
}
.protocol-damage-view-tabs {
display: flex;
flex-wrap: wrap;
gap: var(--space-1);
}
.protocol-damage-view-tab {
border: 1px solid var(--border-strong);
background: var(--surface);
color: var(--text-body);
border-radius: 999px;
padding: var(--space-1) var(--space-3);
font-size: var(--fs-body);
font-weight: var(--fw-semi);
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.protocol-damage-view-tab:hover {
border-color: var(--primary, var(--accent));
color: var(--primary, var(--accent));
}
.protocol-damage-view-tab.is-active {
background: var(--primary, var(--accent));
border-color: var(--primary, var(--accent));
color: var(--surface);
}
.protocol-damage-svg-wrap {
border: 1px solid var(--border-subtle);
border-radius: 0.75rem;
background: var(--bg-soft);
padding: var(--space-3);
min-height: 10rem;
display: flex;
align-items: center;
justify-content: center;
}
.protocol-damage-svg {
width: 100%;
max-width: 28rem;
}
.protocol-damage-svg svg {
width: 100%;
height: auto;
display: block;
}
/* Sections may be or … */
.protocol-damage-svg .damage-section,
.protocol-damage-svg .damage-section rect,
.protocol-damage-svg .damage-section path {
transition: fill 0.15s ease, stroke 0.15s ease, fill-opacity 0.15s ease;
cursor: pointer;
}
.protocol-damage-svg .damage-section:hover,
.protocol-damage-svg .damage-section:hover rect,
.protocol-damage-svg .damage-section:hover path {
fill: var(--accent-soft) !important;
stroke: var(--accent) !important;
}
.protocol-damage-svg .damage-section.is-occupied,
.protocol-damage-svg .damage-section.is-occupied rect,
.protocol-damage-svg .damage-section.is-occupied path {
fill: var(--warn-soft) !important;
stroke: var(--warn) !important;
}
.protocol-damage-svg .damage-section.is-active,
.protocol-damage-svg .damage-section.is-active rect,
.protocol-damage-svg .damage-section.is-active path {
fill: var(--accent-soft) !important;
stroke: var(--accent-hover) !important;
stroke-width: 2.5;
}
/* Count badges (circle + number) injected by JS on top of sections */
.protocol-damage-svg .damage-count-badges {
pointer-events: none;
}
.protocol-damage-svg .damage-count-badge-circle {
fill: var(--danger);
stroke: var(--surface);
}
.protocol-damage-svg .damage-count-badge-text {
fill: var(--surface);
font-weight: var(--fw-bold);
font-family: system-ui, -apple-system, sans-serif;
pointer-events: none;
user-select: none;
}
.protocol-damage-zone-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.15rem;
height: 1.15rem;
margin-left: var(--space-1);
padding: 0 var(--space-1);
border-radius: 999px;
background: var(--danger);
color: var(--surface);
font-size: var(--fs-label);
font-weight: var(--fw-bold);
line-height: 1;
vertical-align: middle;
}
.protocol-damage-zones {
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.protocol-damage-zones-label {
font-size: var(--fs-label);
font-weight: var(--fw-semi);
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.03em;
}
.protocol-damage-zone-chips {
display: flex;
flex-wrap: wrap;
gap: var(--space-1);
}
.protocol-damage-zone-chip {
border: 1px solid var(--border-strong);
background: var(--surface);
color: var(--text-body);
border-radius: 0.5rem;
padding: var(--space-1) var(--space-3);
font-size: var(--fs-body);
font-weight: var(--fw-medium);
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease;
}
.protocol-damage-zone-chip:hover {
border-color: var(--primary, var(--accent));
background: var(--primary-soft);
}
.protocol-damage-zone-chip.is-active,
.protocol-damage-zone-chip.is-occupied.is-active {
background: var(--accent-soft);
border-color: var(--accent);
color: var(--accent-strong);
}
.protocol-damage-zone-chip.is-occupied {
border-color: var(--warn);
background: var(--bg-attention);
}
.protocol-damage-selected {
font-size: var(--fs-ui);
color: var(--text-body);
padding: var(--space-2) var(--space-3);
background: var(--bg-muted);
border-radius: 0.5rem;
}
.protocol-damage-selected-label {
color: var(--text-muted);
}
.protocol-damage-card.is-selected,
.protocol-damage-card.is-active-damage {
border-color: var(--accent);
box-shadow: 0 0 0 1px var(--accent);
}
.protocol-damage-card-badge {
display: inline-block;
margin-left: 0;
padding: var(--space-1) var(--space-2);
border-radius: 999px;
background: var(--border-subtle);
color: var(--text-body);
font-size: var(--fs-body);
font-weight: var(--fw-semi);
vertical-align: middle;
}
.protocol-damage-tag-pills {
display: flex;
flex-wrap: wrap;
gap: var(--space-1);
}
.protocol-damage-tag-pill {
display: inline-flex;
cursor: pointer;
margin: 0;
}
.protocol-damage-tag-pill input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.protocol-damage-tag-pill span {
display: inline-block;
padding: var(--space-1) var(--space-3);
border-radius: 999px;
border: 1px solid var(--border-strong);
background: var(--surface);
color: var(--text-body);
font-size: var(--fs-body);
font-weight: var(--fw-medium);
transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.protocol-damage-tag-pill:hover span {
border-color: var(--accent-soft);
background: var(--primary-soft);
}
.protocol-damage-tag-pill input:checked + span {
border-color: var(--accent);
background: var(--accent);
color: var(--surface);
font-weight: var(--fw-semi);
}
.protocol-damage-note-toggle {
display: inline-flex;
align-items: center;
border: none;
background: transparent;
color: var(--accent);
font-size: var(--fs-body);
font-weight: var(--fw-semi);
padding: var(--space-1) 0;
cursor: pointer;
}
.protocol-damage-note-toggle:hover {
text-decoration: underline;
}
.protocol-damage-note {
margin-top: var(--space-1);
}
/* Collapsed list of non-active damages */
.protocol-damage-others {
display: flex;
flex-direction: column;
gap: var(--space-2);
margin-top: var(--space-1);
}
.protocol-damage-others-toggle {
display: flex;
width: 100%;
box-sizing: border-box;
align-items: center;
justify-content: space-between;
gap: var(--space-2);
padding: var(--space-3) var(--space-4);
font-size: var(--fs-ui);
font-weight: var(--fw-semi);
color: var(--text-body);
background: var(--bg-muted);
border: 1px solid var(--border-subtle);
border-radius: 0.65rem;
cursor: pointer;
text-align: left;
}
.protocol-damage-others-toggle:hover {
background: var(--border-subtle);
border-color: var(--border-strong);
}
.protocol-damage-others-chevron::before {
content: '▾';
display: inline-block;
color: var(--text-muted);
transition: transform 0.15s ease;
}
.protocol-damage-others.is-collapsed .protocol-damage-others-chevron::before {
transform: rotate(-90deg);
}
.protocol-damage-others.is-collapsed #protocol-damages-container {
display: none;
}
.protocol-damage-others.is-expanded #protocol-damages-container {
display: flex;
}
/* Inactive cards: one-line summary, click to activate */
.protocol-damage-card--inactive {
cursor: pointer;
padding: var(--space-2) var(--space-3);
background: var(--bg-soft);
border-color: var(--border-subtle);
box-shadow: none;
}
.protocol-damage-card--inactive .wizard-row {
display: none;
}
.protocol-damage-card--inactive .protocol-repeatable-card-header {
margin-bottom: 0;
}
.protocol-damage-card--inactive:hover {
border-color: var(--accent-soft);
background: var(--primary-soft);
}
.protocol-damage-cards {
margin-top: 0;
}
@media (max-width: 720px) {
.protocol-damage-workspace {
grid-template-columns: 1fr;
}
.protocol-damage-active-col {
position: static;
}
}
.protocol-photo-slots {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.issue-document-costs-section {
margin-top: var(--space-3);
padding-top: var(--space-3);
border-top: 1px dashed var(--border-subtle);
}
.issue-nested-cost-card {
background: var(--bg-soft);
border-color: var(--border-strong);
}
.wizard-pdf-filename {
font-size: var(--fs-ui);
color: var(--text-secondary, var(--text-body));
word-break: break-all;
}
/* Protocol wizard — Zusammenfassung step (AJAX + mobile parity) */
#protocol-summary.protocol-summary,
.protocol-summary {
display: flex;
flex-direction: column;
gap: var(--space-5);
}
.protocol-summary-section {
margin-bottom: 0;
}
#protocol-summary .protocol-summary-heading,
.protocol-summary-heading {
font-size: var(--fs-ui);
font-weight: var(--fw-semi);
color: var(--text-strong);
margin: 0 0 var(--space-2);
}
#protocol-summary .protocol-summary-list,
.protocol-summary-list {
list-style: none;
list-style-type: none;
padding: 0;
padding-inline-start: 0;
margin: 0;
font-size: var(--fs-ui);
color: var(--text-body);
}
#protocol-summary .protocol-summary-list > li,
.protocol-summary-list li {
list-style: none;
list-style-type: none;
padding: var(--space-1) 0;
border-bottom: 1px solid var(--border);
}
#protocol-summary .protocol-summary-list > li:last-child,
.protocol-summary-list li:last-child {
border-bottom: none;
}
#protocol-summary .protocol-summary-empty,
.protocol-summary-empty {
color: var(--text-muted);
font-size: var(--fs-ui);
margin: 0;
}
#protocol-summary .protocol-summary-meta,
.protocol-summary-meta {
color: var(--text-muted);
font-size: var(--fs-body);
}
/* ============================================================
Dashboard KPI tile grid (replaces Gridstack widgets)
============================================================ */
.kpi-dashboard-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-4);
margin-bottom: var(--space-4);
}
@media (min-width: 768px) {
.kpi-dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
.kpi-dashboard-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.kpi-dashboard-grid a.kpi-metric-card {
position: relative;
display: block;
transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.kpi-dashboard-grid a.kpi-metric-card:hover {
box-shadow: 0 2px 10px rgba(31, 42, 64, 0.08);
border-color: var(--border-strong);
}
.kpi-dashboard-grid .kpi-metric-card {
position: relative;
}
.kpi-dashboard-grid .kpi-label {
display: flex;
align-items: center;
gap: var(--space-1);
}
.kpi-dashboard-grid .kpi-value {
font-size: var(--fs-page-title);
font-weight: var(--fw-semi);
}
.kpi-metric-sub {
margin-top: var(--space-1);
font-size: var(--fs-body);
color: var(--text-secondary);
}
.kpi-metric-empty { color: var(--text-tertiary); }
/* Tile state accent (left border); background stays white */
.kpi-state-ok { border-left: var(--space-1) solid var(--border); }
.kpi-state-warn { border-left: var(--space-1) solid var(--warn); }
.kpi-state-critical { border-left: var(--space-1) solid var(--danger); }
.kpi-state-no-data { border-left: var(--space-1) solid var(--border-strong); }
/* Keep severity left accent after thicker gray border above */
.kpi-metric-card.overview-kpi-card.kpi-state-ok {
border-left: var(--space-1) solid var(--border);
}
.kpi-metric-card.overview-kpi-card.kpi-state-warn {
border-left: var(--space-1) solid var(--warn);
}
.kpi-metric-card.overview-kpi-card.kpi-state-critical {
border-left: var(--space-1) solid var(--danger);
}
.kpi-metric-card.overview-kpi-card.kpi-state-no-data {
border-left: var(--space-1) solid var(--border-strong);
}
.kpi-metric-alert {
position: absolute;
top: var(--space-3);
right: var(--space-3);
color: var(--danger);
line-height: 0;
}
/* Active filter notice (dashboard drilldowns on list pages) */
.active-filter-notice {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
padding: var(--space-2) var(--space-4);
margin-bottom: var(--space-3);
background: var(--bg-muted);
border: 1px solid var(--border);
border-radius: var(--radius-card);
font-size: var(--fs-body);
color: var(--text-secondary);
}
.active-filter-label { font-weight: var(--fw-medium); }
.active-filter-clear {
color: var(--primary);
text-decoration: none;
white-space: nowrap;
}
.active-filter-clear:hover { text-decoration: underline; }
/* ============================================================
Dashboard layout + Phase-4 zones
============================================================ */
.dashboard-layout {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-5);
align-items: start;
}
@media (min-width: 1100px) {
.dashboard-layout {
grid-template-columns: minmax(0, 1fr) 320px;
}
}
.dashboard-main { min-width: 0; }
.dashboard-side { min-width: 0; }
.dashboard-placeholder-notice {
padding: var(--space-2) var(--space-4);
margin-bottom: var(--space-4);
background: var(--warn-soft);
border: 1px solid var(--warn);
border-radius: var(--radius-card);
font-size: var(--fs-body);
color: var(--warn);
}
.beispieldaten-badge {
display: inline-flex;
align-items: center;
padding: var(--space-1) var(--space-2);
font-size: var(--fs-label);
font-weight: var(--fw-semi);
color: var(--warn);
background: var(--warn-soft);
border: 1px solid var(--warn);
border-radius: 999px;
}
.kpi-metric-card--placeholder { position: relative; border-style: dashed; }
.kpi-metric-card-badge {
position: absolute;
top: var(--space-2);
right: var(--space-2);
}
/* Dashboard zone headers only — do not override global .panel-title-row on vehicle/detail cards */
.dashboard-layout .panel-title-row,
.handlungsqueue .panel-title-row,
.termine .panel-title-row,
.kosten-anomalien .panel-title-row,
.onboarding .panel-title-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
margin-bottom: var(--space-3);
}
.dashboard-layout .panel-title,
.handlungsqueue .panel-title,
.termine .panel-title,
.kosten-anomalien .panel-title,
.onboarding .panel-title {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-size: var(--fs-ui);
font-weight: var(--fw-semi);
color: var(--text-primary);
}
/* Handlungsqueue */
.handlungsqueue { margin-top: var(--space-5); }
.handlungsqueue-row {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3) var(--space-4);
margin-bottom: var(--space-2);
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-card);
}
.handlungsqueue-row--hoch { border-left: var(--space-1) solid var(--danger); }
.handlungsqueue-icon { flex-shrink: 0; line-height: 0; color: var(--text-secondary); }
.handlungsqueue-row--hoch .handlungsqueue-icon { color: var(--danger); }
.handlungsqueue-label {
display: flex;
flex-direction: column;
gap: var(--space-1);
flex: 1 1 auto;
min-width: 0;
font-size: var(--fs-ui);
color: var(--text-primary);
}
.handlungsqueue-sub { font-size: var(--fs-label); color: var(--text-secondary); }
.handlungsqueue-count { flex-shrink: 0; font-size: var(--fs-kpi); font-weight: var(--fw-semi); }
.handlungsqueue-cta { flex-shrink: 0; }
/* Termine sidebar */
.termine {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-card);
padding: var(--space-4);
}
.termine-list { list-style: none; margin: 0; padding: 0; }
.termine-row {
border-left: var(--space-1) solid var(--border);
margin-bottom: var(--space-2);
border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.termine-row--overdue { border-left-color: var(--danger); }
.termine-row--critical { border-left-color: var(--warn); }
.termine-row--hint { border-left-color: var(--border-strong, var(--border-strong)); }
.termine-link {
display: flex;
flex-direction: column;
gap: var(--space-1);
padding: var(--space-2) var(--space-3);
text-decoration: none;
color: inherit;
}
.termine-link:hover { background: var(--bg-soft); }
.termine-plate { font-weight: var(--fw-semi); font-size: var(--fs-ui); }
.termine-meta { font-size: var(--fs-label); color: var(--text-secondary); }
.termine-frist { font-size: var(--fs-label); font-weight: var(--fw-medium); color: var(--text-secondary); }
.termine-row--overdue .termine-frist { color: var(--danger); }
.termine-row--critical .termine-frist { color: var(--warn); }
.termine-empty, .termine-extra {
font-size: var(--fs-body);
color: var(--text-secondary);
margin: var(--space-2) 0 0;
}
/* Kosten-Anomalien */
.kosten-anomalien { margin-top: var(--space-5); }
.kosten-anomalie-row {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3) var(--space-4);
margin-bottom: var(--space-2);
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-card);
}
.kosten-anomalie-row--hoch { border-left: var(--space-1) solid var(--danger); }
.kosten-anomalie-icon { flex-shrink: 0; line-height: 0; color: var(--text-secondary); }
.kosten-anomalie-label {
display: flex;
flex-direction: column;
gap: var(--space-1);
flex: 1 1 auto;
min-width: 0;
font-size: var(--fs-ui);
}
.kosten-anomalie-sub { font-size: var(--fs-label); color: var(--text-secondary); }
.kosten-anomalie-count { flex-shrink: 0; font-size: var(--fs-kpi); font-weight: var(--fw-semi); }
/* Onboarding checklist */
.onboarding { margin-bottom: var(--space-5); }
.onboarding--voll {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-card);
padding: var(--space-4) var(--space-3);
}
.onboarding-progress {
height: 6px;
background: var(--bg-muted);
border-radius: 999px;
overflow: hidden;
margin: var(--space-2) 0 var(--space-1);
}
.onboarding-progress-bar {
height: 100%;
background: var(--primary);
border-radius: 999px;
}
.onboarding-progress-label {
font-size: var(--fs-label);
color: var(--text-secondary);
margin-bottom: var(--space-2);
}
.onboarding-steps { list-style: none; margin: 0; padding: 0; }
.onboarding-step {
display: flex;
align-items: flex-start;
gap: var(--space-2);
padding: var(--space-2) 0;
border-top: 1px solid var(--border);
}
.onboarding-step:first-child { border-top: none; }
.onboarding-step-icon { flex-shrink: 0; line-height: 0; margin-top: var(--space-1); }
.onboarding-step--done .onboarding-step-icon { color: var(--ok); }
.onboarding-step--open .onboarding-step-icon { color: var(--text-secondary); }
.onboarding-step-body {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.onboarding-step-label { font-size: var(--fs-ui); font-weight: var(--fw-medium); }
.onboarding-step-desc { font-size: var(--fs-label); color: var(--text-secondary); }
.onboarding-step-cta { flex-shrink: 0; }
.onboarding--kompakt {
margin-top: var(--space-5);
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-card);
padding: var(--space-3) var(--space-4);
}
.onboarding-summary {
display: flex;
align-items: center;
gap: var(--space-3);
cursor: pointer;
list-style: none;
}
.onboarding-summary::-webkit-details-marker { display: none; }
.onboarding-summary-title { font-weight: var(--fw-semi); font-size: var(--fs-ui); }
.onboarding-progress--inline {
flex: 1 1 auto;
max-width: 160px;
margin: 0;
}
.onboarding--status {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
margin-top: var(--space-5);
padding: var(--space-3) var(--space-4);
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-card);
}
.admin-panel { max-width: 1200px; }
.admin-section { margin-bottom: var(--space-6); }
.admin-section:last-child { margin-bottom: 0; }
.admin-section-title {
margin: 0 0 var(--space-3);
font-size: var(--fs-label);
font-weight: var(--fw-semi);
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--text-tertiary);
}
/* Generelle Einstellungen: 2-spaltig ab 1200px, sonst 1-spaltig */
.admin-settings-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-5); }
@media (min-width: 1200px) {
.admin-settings-grid { grid-template-columns: 1fr 1fr; }
}
/* Einstellungs-Karten. container-type: die KV-Zeilen reagieren auf die
Karten-Breite (nicht die Viewport-Breite) – eine 2-spaltige Karte bei 1200px
ist genauso schmal wie eine 1-spaltige Karte im Tablet-Bereich. */
.admin-card { padding: var(--space-4) var(--space-5) var(--space-2); container-type: inline-size; }
.admin-card-header {
display: flex; align-items: flex-start; justify-content: space-between;
gap: var(--space-3);
}
.admin-card-heading { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; min-width: 0; }
.admin-card-title { font-size: var(--fs-ui); font-weight: var(--fw-semi); color: var(--text-primary); }
.admin-card-sub { margin: var(--space-1) 0 var(--space-1); font-size: var(--fs-body); color: var(--text-tertiary); }
/* Key-Value-Zeilen statt großer Bold-Werte */
.admin-kv { margin-top: var(--space-1); }
.admin-kv-row {
display: grid;
grid-template-columns: minmax(110px, 32%) minmax(0, 1fr) minmax(0, 1fr);
align-items: center;
gap: var(--space-2) var(--space-3);
min-height: 44px;
padding: var(--space-1) 0;
border-top: 1px solid var(--border-divider);
}
.admin-kv-row:first-child { border-top: none; }
.admin-kv-label {
font-size: var(--fs-label); text-transform: uppercase; letter-spacing: 0.06em;
color: var(--text-tertiary); font-weight: var(--fw-medium);
}
.admin-kv-value { font-size: var(--fs-ui); color: var(--text-primary); font-weight: var(--fw-regular); min-width: 0; overflow-wrap: anywhere; }
.admin-kv-meta {
font-size: var(--fs-body); color: var(--text-secondary);
text-align: right; justify-self: end; min-width: 0; overflow-wrap: anywhere;
}
.admin-kv-value--success { color: var(--ok-strong); }
.admin-kv-value--error { color: var(--danger-strong); }
.admin-kv-value--muted { color: var(--text-tertiary); }
a.admin-kv-value--link {
color: var(--primary);
font-weight: var(--fw-medium);
text-decoration: none;
}
a.admin-kv-value--link:hover {
text-decoration: underline;
}
/* Schmale Karte (z. B. 2-spaltiges Grid oder Tablet): Zeile stapeln, damit
lange Werte (Host:Port, E-Mail-Adressen) nicht zeichenweise umbrechen. */
@container (max-width: 470px) {
.admin-kv-row { grid-template-columns: 1fr; min-height: 0; gap: var(--space-1); padding: var(--space-2) 0; }
.admin-kv-meta { text-align: left; justify-self: start; }
}
/* Benutzer-Tabelle: Toolbar + generic_table-Styles */
.admin-toolbar {
display: flex; align-items: center; justify-content: flex-end;
gap: var(--space-2); margin-bottom: var(--space-3);
}
th.admin-col-actions, td.admin-col-actions { text-align: right; }
.admin-cell-strong { font-weight: var(--fw-semi); color: var(--text-primary); }
.admin-row-edit { color: var(--primary); font-weight: var(--fw-medium); font-size: var(--fs-body); }
.admin-empty { text-align: center; color: var(--text-tertiary); padding: var(--space-5) var(--space-4); }
/* SMTP-/Firmenrichtlinien-Wizard im #editModal: Standard-Modal-Chrome.
Der Step-Indikator entfällt (nur ein Schritt), Titel linksbündig als
Modal-Header. Nur diese Tenant-Wizards laden in #editModal. */
.admin-wizard-modal .wizard-progress { display: none; }
.admin-wizard-modal .wizard-form { max-width: none; padding: 0; margin: 0; }
.admin-wizard-modal .wizard-header {
text-align: left;
padding: 0 var(--space-6) var(--space-3) 0;
margin-bottom: var(--space-5);
border-bottom: 1px solid var(--border);
}
.admin-wizard-modal .wizard-title { font-size: var(--fs-value); font-weight: var(--fw-semi); }
.admin-wizard-actions {
display: flex; justify-content: flex-end; align-items: center;
gap: var(--space-2); margin-top: var(--space-5); padding-top: var(--space-4);
border-top: 1px solid var(--border);
}
.admin-wizard-actions .btn { width: auto; }
.admin-wizard-section-title {
font-size: var(--fs-label); text-transform: uppercase; letter-spacing: 0.06em;
font-weight: var(--fw-semi); color: var(--text-primary); margin-bottom: var(--space-2);
}
.admin-wizard-section-title--spaced { margin-top: var(--space-5); }
.admin-wizard-hint { font-size: var(--fs-body); color: var(--text-secondary); margin: var(--space-1) 0 var(--space-1); line-height: 1.4; }
Admin-Panel · Berechtigungs-/Benutzerformular (#permissions-form)
Ersetzt die nie portierten Tailwind-Utilities durch reines
Design-System-CSS auf Basis der Marken-Tokens. Streng gescopt.
============================================================ */
#form-container {
margin-bottom: var(--space-6);
}
/* Stammdaten-Felder */
#permissions-form .pf-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-4);
margin-top: var(--space-3);
}
#permissions-form .pf-field {
display: flex;
flex-direction: column;
gap: var(--space-1);
}
#permissions-form .pf-field label {
font-size: var(--fs-body);
font-weight: var(--fw-medium);
color: var(--text-secondary);
}
/* Modus-Auswahl (Choice-Buttons) */
#permissions-form .pf-choices {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-3);
margin-top: var(--space-3);
}
#permissions-form .permission-choice-btn {
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
min-width: 0;
gap: var(--space-1);
padding: var(--space-3) var(--space-4);
text-align: left;
white-space: normal;
font-family: inherit;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-button);
cursor: pointer;
transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
#permissions-form .permission-choice-btn:hover {
border-color: var(--primary);
background: var(--bg-subtle);
}
#permissions-form .permission-choice-btn.selected {
border-color: var(--primary);
background: var(--bg-subtle);
box-shadow: inset 0 0 0 1px var(--primary);
}
#permissions-form .pf-choice-title {
font-size: var(--fs-ui);
font-weight: var(--fw-semi);
color: var(--text-primary);
}
#permissions-form .pf-choice-desc {
font-size: var(--fs-body);
color: var(--text-secondary);
line-height: 1.35;
}
/* Standortspezifischer Bereich */
#permissions-form .pf-section {
margin-top: var(--space-4);
padding: var(--space-4);
background: var(--bg-subtle);
border: 1px solid var(--border);
border-radius: var(--radius-card);
}
#permissions-form .pf-section-title {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--fs-ui);
font-weight: var(--fw-semi);
color: var(--text-primary);
margin-bottom: var(--space-3);
}
#permissions-form .pf-hint {
font-size: var(--fs-body);
color: var(--text-secondary);
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: var(--space-2) var(--space-3);
margin-bottom: var(--space-3);
line-height: 1.4;
}
#permissions-form .pf-input {
margin-bottom: var(--space-2);
}
#permissions-form .pf-filter-result {
font-size: var(--fs-body);
color: var(--text-tertiary);
margin-bottom: var(--space-3);
}
/* Standort-Liste */
#permissions-form .pf-site-list {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
#permissions-form .site-header {
width: 100%;
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-2) var(--space-3);
font-family: inherit;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-md);
cursor: pointer;
transition: background 0.15s;
}
#permissions-form .site-header:hover {
background: var(--bg-subtle);
}
#permissions-form .site-header-left {
font-size: var(--fs-ui);
font-weight: var(--fw-medium);
color: var(--text-primary);
}
#permissions-form .site-header-right {
margin-left: auto;
font-size: var(--fs-body);
color: var(--text-tertiary);
}
#permissions-form .site-header-right.has-permission {
color: var(--primary);
font-weight: var(--fw-semi);
}
#permissions-form .site-header .arrow {
font-size: var(--fs-label);
color: var(--text-tertiary);
}
#permissions-form .site-details {
padding: var(--space-3) var(--space-3) var(--space-3);
background: var(--surface);
border: 1px solid var(--border);
border-top: none;
border-radius: 0 0 var(--radius-md) var(--radius-md);
}
/* Rollen-Karten (Site-Admin/Viewer/Operator) */
#permissions-form .pf-role-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-2);
margin: var(--space-1) 0 var(--space-3);
}
#permissions-form .pf-role-card {
padding: var(--space-2) var(--space-3);
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-md);
}
#permissions-form .pf-check-row {
display: flex;
align-items: center;
gap: var(--space-2);
}
#permissions-form .pf-check-row label {
font-size: var(--fs-ui);
font-weight: var(--fw-medium);
color: var(--text-primary);
cursor: pointer;
}
#permissions-form .pf-role-help {
font-size: var(--fs-label);
color: var(--text-tertiary);
margin-top: var(--space-1);
}
/* Granulare Berechtigungen */
#permissions-form .toggle-granular {
display: flex;
align-items: center;
gap: var(--space-2);
width: 100%;
padding: 0;
font-family: inherit;
font-size: var(--fs-ui);
font-weight: var(--fw-medium);
color: var(--primary);
background: none;
border: none;
cursor: pointer;
}
#permissions-form .toggle-granular .arrow {
margin-left: auto;
font-size: var(--fs-label);
color: var(--text-tertiary);
}
#permissions-form .granular-content {
margin-top: var(--space-2);
}
#permissions-form .pf-granular-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-2);
}
#permissions-form .pf-granular-item {
display: flex;
align-items: center;
gap: var(--space-2);
}
#permissions-form .pf-granular-item label {
font-size: var(--fs-body);
color: var(--text-secondary);
cursor: pointer;
}
/* Fahrer-Zuordnung */
#permissions-form .pf-driver-row {
display: flex;
align-items: flex-start;
gap: var(--space-2);
margin-top: var(--space-1);
}
#permissions-form .pf-driver-text {
display: flex;
flex-direction: column;
gap: var(--space-1);
}
#permissions-form .pf-driver-label {
font-size: var(--fs-ui);
font-weight: var(--fw-medium);
color: var(--text-primary);
}
#permissions-form .pf-driver-help {
font-size: var(--fs-body);
color: var(--text-secondary);
}
#permissions-form .pf-driver-site {
max-width: 24rem;
margin-top: var(--space-3);
}
#permissions-form .pf-driver-site label {
display: block;
font-size: var(--fs-body);
font-weight: var(--fw-medium);
color: var(--text-secondary);
margin-bottom: var(--space-1);
}
#permissions-form .pf-error {
color: var(--danger-strong);
font-size: var(--fs-body);
margin-top: var(--space-1);
}
/* Checkbox-Fix: globale input{width:100%}-Regel für Checkboxen aufheben */
#permissions-form input[type="checkbox"] {
width: 1rem;
height: 1rem;
flex: 0 0 auto;
margin: 0;
accent-color: var(--primary);
cursor: pointer;
}
/* Karten-Abstand (ersetzt die space-y-Utility) */
#permissions-form > .card {
margin-top: var(--space-5);
}
/* Button-Zone */
#permissions-form .pf-actions {
display: flex;
justify-content: flex-end;
gap: var(--space-2);
margin-top: var(--space-5);
}
/* Responsive: mehrspaltige Grids ab Tablet */
@media (min-width: 768px) {
#permissions-form .pf-grid { grid-template-columns: repeat(3, 1fr); }
#permissions-form .pf-choices { grid-template-columns: repeat(3, 1fr); }
#permissions-form .pf-role-grid { grid-template-columns: repeat(3, 1fr); }
#permissions-form .pf-granular-grid { grid-template-columns: repeat(2, 1fr); }
}
.admin-table-group-title { font-size: var(--fs-ui); font-weight: var(--fw-semi); color: var(--text-primary); margin: 0 0 var(--space-2); }
.admin-table-group-title--spaced { margin-top: var(--space-6); }
.admin-pager { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); font-size: var(--fs-ui); color: var(--text-secondary); margin: var(--space-2) 0 var(--space-4); }
.admin-pager-links { display: flex; gap: var(--space-2); }
/* Support-scope banner (superuser temporary tenant filter) */
.support-scope-bar {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-3) var(--space-4);
padding: var(--space-2) var(--space-5);
background: var(--bg-muted);
border-bottom: 1px solid var(--border, var(--border-subtle));
font-size: var(--fs-body);
color: var(--text-secondary, var(--text-body));
position: sticky;
top: 0;
z-index: 100;
}
.support-scope-bar--active {
background: var(--warn-soft);
border-bottom-color: var(--warn);
color: var(--warn-strong);
}
.support-scope-bar--impersonating {
background: var(--warn-soft);
border-bottom-color: var(--warn);
color: var(--warn-strong);
}
.support-scope-bar--impersonating .support-scope-bar__badge {
background: var(--warn);
}
.support-scope-bar__status {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2) var(--space-3);
min-width: 0;
}
.support-scope-bar__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2) var(--space-3);
}
.support-scope-bar__badge {
display: inline-flex;
align-items: center;
padding: var(--space-1) var(--space-2);
border-radius: 999px;
font-size: var(--fs-label);
font-weight: var(--fw-bold);
letter-spacing: 0.04em;
text-transform: uppercase;
background: var(--warn);
color: var(--surface);
}
.support-scope-bar__badge--muted {
background: var(--text-muted);
}
.support-scope-bar__text { line-height: 1.35; }
.support-scope-bar__hint {
opacity: 0.85;
font-style: italic;
}
.support-scope-bar__form {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-1);
}
.support-scope-bar__select {
min-width: 12rem;
max-width: 18rem;
padding: var(--space-1) var(--space-2);
border: 1px solid var(--border, var(--border-strong));
border-radius: var(--radius-button, 0.375rem);
background: var(--surface);
font-size: var(--fs-body);
font-family: inherit;
}
.support-scope-bar__clear {
border-color: var(--warn);
color: var(--warn-strong);
}
.support-scope-bar--impersonating .support-scope-bar__clear {
border-color: var(--warn);
color: var(--warn-strong);
}
/* ── Violations overview / action CTAs (list + detail) ───────────────────── */
.violations-empty-state {
text-align: center;
padding: var(--space-6) var(--space-5);
}
.violations-empty-state__title {
font-weight: var(--fw-semi);
font-size: var(--fs-ui);
margin: 0 0 var(--space-1);
}
.violations-empty-state__hint {
margin: 0 0 var(--space-4);
font-size: var(--fs-ui);
}
.violations-section-empty {
margin: 0;
padding: var(--space-4) var(--space-1);
font-size: var(--fs-ui);
}
.violations-overview-table .violation-action-btn,
.title-actions .violation-action-btn {
white-space: nowrap;
}
.action-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.15rem;
height: 1.15rem;
margin-left: var(--space-1);
padding: 0 var(--space-1);
border-radius: 999px;
font-size: var(--fs-label);
font-weight: var(--fw-bold);
background: rgba(0, 0, 0, 0.12);
color: inherit;
}
.btn-warning .action-count,
.status-badge-warning .action-count {
background: rgba(0, 0, 0, 0.14);
}
.violation-action-badge {
display: inline-flex;
align-items: center;
}
/* ── Vehicle add entry (site + path choice) ───────────────────────────────── */
.vehicle-add-entry-actions {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
@media (min-width: 480px) {
.vehicle-add-entry-actions {
flex-direction: row;
}
}
.vehicle-add-entry-btn {
flex: 1;
width: 100%;
min-height: 2.75rem;
justify-content: center;
}
/* ── Driver batch import (wizard_fragment shell in modal) ─────────────────── */
.driver-batch-import {
max-width: 56rem;
margin: 0 auto;
}
/* Modal already pads; keep form width aligned with other modal wizards */
.driver-batch-import .wizard-form {
max-width: none;
padding: 0;
}
.driver-batch-import .wizard-header {
margin-bottom: var(--space-3);
}
.driver-batch-summary {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2);
}
.driver-batch-recheck-btn {
margin-left: var(--space-1);
font-size: var(--fs-body);
padding: var(--space-1) var(--space-2);
}
.driver-batch-preview-table th,
.driver-batch-preview-table td {
padding: var(--space-2) var(--space-3);
text-align: left;
border-bottom: 1px solid var(--border, var(--border-subtle));
font-size: var(--fs-ui);
vertical-align: top;
}
.driver-batch-row--invalid td {
background: var(--danger-soft);
}
.driver-batch-row--imported td {
background: var(--ok-soft);
}
.driver-batch-cell-input {
width: 100%;
min-width: 6.5rem;
padding: var(--space-1) var(--space-2);
font-size: var(--fs-ui);
border: 1px solid var(--border-strong, var(--border-strong));
border-radius: var(--radius-md, 0.375rem);
background: var(--surface);
box-sizing: border-box;
}
.driver-batch-cell-input:focus {
outline: none;
border-color: var(--primary, var(--accent));
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
}
.driver-batch-cell-input.is-invalid {
border-color: var(--danger, var(--danger));
}
.driver-batch-cell-input:disabled {
background: var(--bg-soft);
color: var(--text-body);
cursor: default;
opacity: 0.9;
}
.driver-batch-row-errors {
margin-top: var(--space-1);
font-size: var(--fs-label);
color: var(--danger-strong);
line-height: 1.35;
max-width: 16rem;
}
.driver-batch-result {
padding: var(--space-3) var(--space-4);
border-radius: var(--radius-md, 0.5rem);
border: 1px solid var(--border, var(--border-subtle));
background: var(--bg-soft);
font-size: var(--fs-ui);
line-height: 1.45;
}
.driver-batch-result:empty,
.driver-batch-result[hidden] {
display: none !important;
}
.driver-batch-result__success {
display: flex;
flex-direction: column;
gap: var(--space-1);
border-left: var(--space-1) solid var(--ok);
padding-left: var(--space-2);
}
.driver-batch-result__partial,
.driver-batch-result__error {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2);
}
/* Auth / utility extras after tailwind removal */
.text-danger { color: var(--danger); }
.text-ok { color: var(--ok-strong); }
.text-warn { color: var(--warn); }
.text-primary { color: var(--primary); }
/* Locked / readonly form controls (wizards) */
.form-control-readonly {
width: 100%;
box-sizing: border-box;
padding: var(--space-2) var(--space-3);
border: 1.5px solid var(--border-strong);
border-radius: var(--radius-input);
font: inherit;
font-size: var(--fs-ui);
background: var(--bg-muted);
color: var(--text-body);
cursor: not-allowed;
pointer-events: none;
opacity: 0.85;
}
.field-lock-hint {
display: inline-flex;
align-items: center;
gap: var(--space-1);
color: var(--warn);
font-size: var(--fs-body);
}
/* Wizard section headings (formerly text-amber-600 …) */
.wizard-section-title {
color: var(--warn);
font-size: var(--fs-body);
font-weight: var(--fw-semi);
}
/* Warning-box tone variants (default is danger) */
.warning-box--ok {
border-color: var(--ok-soft);
background: var(--ok-soft);
color: var(--ok-strong);
}
.warning-box--ok::before { color: var(--ok); }
.warning-box--info {
border-color: var(--accent-soft);
background: var(--accent-soft);
color: var(--accent-strong);
}
.warning-box--info::before { color: var(--accent); }
.warning-box--warn {
border-color: var(--warn-soft);
background: var(--warn-soft);
color: var(--warn-strong);
}
.warning-box--warn::before { color: var(--warn); }
.filter-separator-line {
flex-grow: 1;
border-top: 1px solid var(--border-strong);
height: 0;
align-self: center;
}
.filter-separator-label { margin: 0 var(--space-4); white-space: nowrap; }
.checkbox-option {
display: flex;
align-items: center;
padding: var(--space-1) 0;
cursor: pointer;
gap: var(--space-2);
}
.copy-tooltip {
position: absolute;
background: var(--text-primary);
color: var(--text-inverse);
padding: var(--space-1) var(--space-3);
border-radius: var(--radius-md);
font-size: var(--fs-body);
pointer-events: none;
opacity: 0;
transition: opacity 0.3s;
z-index: 10000;
box-shadow: var(--shadow-lg);
}
/* ── Dev primitives page ── */
.primitives-page { max-width: 1100px; }
.primitives-h2 {
font-size: var(--fs-label);
font-weight: var(--fw-semi);
text-transform: uppercase;
letter-spacing: .06em;
color: var(--text-tertiary);
margin: var(--space-6) 0 var(--space-3);
border-bottom: 1px solid var(--border);
padding-bottom: var(--space-2);
}
.primitives-h2:first-of-type { margin-top: var(--space-2); }
.primitives-row {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
align-items: center;
}
.primitives-form-demo { max-width: 28rem; }
.primitives-caption { margin: 0 0 var(--space-3); }
.primitives-modal-preview {
border: 1px solid var(--border);
border-radius: var(--radius-card);
padding: var(--space-4) var(--space-5) var(--space-5);
background: var(--surface);
max-width: 28rem;
box-shadow: var(--shadow-md);
}
.primitives-icon-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
gap: var(--space-1);
}
.primitives-icon-cell {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-1);
padding: var(--space-3) var(--space-2);
border-radius: 8px;
border: 1px solid var(--border-row);
color: var(--text-primary);
}
.primitives-icon-cell span {
font-size: var(--fs-label);
color: var(--text-secondary);
text-align: center;
}
/* Ensure form controls render on primitives / auth-adjacent demos */
.field-group .form-control,
.field-group .form-select,
.form-control,
.form-select {
width: 100%;
box-sizing: border-box;
padding: var(--space-2) var(--space-3);
border: 1.5px solid var(--border-strong);
border-radius: var(--radius-input);
font: inherit;
font-size: var(--fs-ui);
background: var(--surface);
color: var(--text-primary);
}
.field-group .form-control:focus,
.field-group .form-select:focus,
.form-control:focus,
.form-select:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
}
/* ── Billing (imported from origin/billing) ── */
/* Statushinweis der Abrechnungs-Übersicht. Gleiche Sprache wie .alert-*, aber
einzeilig mit Icon links und Aktionen rechts. */
.billing-alert {
display: flex; align-items: center; gap: 0.625rem;
background: var(--bg-subtle); border-left: 3px solid var(--primary);
color: var(--text-primary); padding: 0.75rem 1rem; margin-bottom: 1rem;
border-radius: 0 var(--radius-md) var(--radius-md) 0; font-size: 0.8125rem;
}
.billing-alert--suspended { background: var(--red-50); border-left-color: var(--red-500); color: var(--red-700); }
.billing-alert--payment_failed { background: var(--bg-attention); border-left-color: var(--amber-500, #f59e0b); }
.billing-alert-icon { display: flex; align-items: center; flex: 0 0 auto; }
.billing-alert-text { margin: 0; flex: 1 1 auto; }
.billing-alert-actions { display: flex; align-items: center; gap: 0.5rem; flex: 0 0 auto; flex-wrap: wrap; }
.billing-alert-actions:empty { display: none; }
/* Ergebniszeile am Listenende (Abrechnungs-Portal). */
.kv-row--total { border-top: 1px solid var(--border); font-weight: var(--fw-semi); }
.kv-row:has(+ .kv-row--total) { border-bottom: 0; }
.kv-row--total .kv-label { color: var(--text-primary); }
.kv-row--total .kv-value { font-weight: var(--fw-semi); }
/* Sektionen in Wizards mit handgebautem Layout (z. B. Rechnungs-Einstellungen). */
.admin-wizard-section { padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--border); }
.admin-wizard-section:last-of-type { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }
.admin-wizard-section--emphasis {
padding: 14px 14px 10px;
border: 1px solid var(--border);
border-radius: var(--radius-lg);
background: var(--bg-subtle);
}
.admin-wizard-section--emphasis .checkbox-card-help { display: none; }
.admin-wizard-checkbox-group { border: 0; padding: 0; margin: 0 0 4px; min-width: 0; }
.admin-wizard-checkbox-legend {
padding: 0; margin-bottom: 2px;
font-size: 13px; font-weight: var(--fw-medium); color: var(--text-primary);
}
.admin-wizard-checkbox-group .wizard-cell > .wizard-field { margin-top: 0; flex: 1 1 auto; }
.admin-wizard-checkbox-group .checkbox-card,
.admin-wizard-checkbox-group .checkbox-card-option { height: 100%; }