/*
============================================================
OFIRA – KOMPONENTEN
Alle UI-Komponenten in einer Datei.
Nutzt ausschließlich Tokens aus design-system.css.
WICHTIG: Sidebar-LAYOUT (position, width, height, responsive)
bleibt in styles.css. Hier nur visuelle Styles (Farben, Typo).
============================================================
*/
/* ============================================
SIDEBAR – VISUELLE STYLES
Layout/Responsive bleibt in styles.css
============================================ */
.sidebar {
background: var(--sidebar-bg);
border-right: 1px solid var(--sidebar-border);
}
.sidebar .nav-link {
position: relative;
color: var(--sidebar-text);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
text-decoration: none;
transition: background-color var(--duration-fast) var(--ease-out),
color var(--duration-fast) var(--ease-out);
}
.sidebar .nav-link:hover {
background-color: var(--sidebar-bg-hover);
color: var(--sidebar-text-hover);
text-decoration: none;
}
/* Active-State Linear-Stil: hauchduenner Bg + 3px Akzentstreifen
links + Text in Brand-Akzent. Kein vollflaechiger Highlight mehr.
Streifen via ::before damit kein Layout-Reflow. */
.sidebar .nav-link.active {
background-color: rgba(255, 255, 255, 0.04);
color: var(--color-primary-300);
font-weight: var(--font-weight-semibold);
}
.sidebar .nav-link.active::before {
content: '';
position: absolute;
top: 6px;
bottom: 6px;
left: 0;
width: 3px;
background: var(--color-primary-400);
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.sidebar .nav-link:focus-visible {
box-shadow: var(--focus-ring);
outline: none;
}
.sidebar .nav-link svg,
.sidebar .nav-link i {
opacity: 0.75;
transition: opacity var(--duration-fast) var(--ease-out);
}
.sidebar .nav-link:hover svg,
.sidebar .nav-link:hover i,
.sidebar .nav-link.active svg,
.sidebar .nav-link.active i {
opacity: 1;
}
/* Logo-Bereich */
.sidebar-logo {
padding: var(--space-5) var(--space-5);
border-bottom: 1px solid var(--sidebar-border);
margin-bottom: var(--space-2);
flex-shrink: 0;
}
.sidebar-logo-text {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-bold);
color: var(--color-neutral-0);
letter-spacing: var(--tracking-tight);
line-height: var(--line-height-none);
}
.sidebar-logo-text span {
color: var(--color-primary-400);
}
/* Sektion-Label */
.sidebar-section-label {
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
letter-spacing: var(--tracking-widest);
text-transform: uppercase;
color: var(--color-neutral-500);
padding: var(--space-5) var(--space-5) var(--space-2);
}
/* Ein-/ausklappbare Navigations-Sektionen */
.sidebar-section-toggle {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-2);
width: 100%;
background: none;
border: 0;
font: inherit;
text-align: left;
cursor: pointer;
}
.sidebar-section-toggle:hover { color: var(--color-neutral-300); }
.sidebar-section-toggle:focus-visible {
outline: 2px solid var(--color-primary-400, #60a5fa);
outline-offset: -2px;
border-radius: var(--radius-sm, 4px);
}
.sidebar-section-chevron {
font-size: 0.75em;
transition: transform 0.15s ease;
flex: 0 0 auto;
}
.sidebar-section.is-collapsed .sidebar-section-chevron { transform: rotate(-90deg); }
.sidebar-section.is-collapsed .sidebar-section-body { display: none; }
/* Icon-/Mini-Modus (768–1199px): Sektionen immer offen, kein Toggle/Chevron */
@media (min-width: 768px) and (max-width: 1199px) {
.sidebar-section.is-collapsed .sidebar-section-body { display: block; }
.sidebar-section-chevron { display: none; }
.sidebar-section-toggle { pointer-events: none; }
}
/* ============================================
TOPBAR
============================================ */
.topbar {
height: var(--topbar-height);
background: var(--surface-card);
border-bottom: 1px solid var(--border-subtle);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 var(--content-padding);
position: sticky;
top: 0;
z-index: var(--z-topbar);
box-shadow: var(--shadow-xs);
flex-shrink: 0;
}
.topbar-title {
font-size: var(--font-size-base);
font-weight: var(--font-weight-semibold);
color: var(--text-primary);
}
.topbar-user {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-lg);
cursor: pointer;
transition: background-color var(--duration-fast) var(--ease-out);
border: 1px solid transparent;
}
.topbar-user:hover {
background-color: var(--color-neutral-100);
border-color: var(--border-subtle);
}
.topbar-avatar {
width: 34px;
height: 34px;
border-radius: var(--radius-full);
background: var(--color-primary-600);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: var(--font-size-xs);
font-weight: var(--font-weight-bold);
flex-shrink: 0;
}
.topbar-email {
font-size: var(--font-size-sm);
color: var(--color-neutral-600);
font-weight: var(--font-weight-medium);
}
/* ============================================
APP-BRAND
Marken-Schriftzug im Header (Logo-Link)
============================================ */
.app-brand {
text-decoration: none;
display: inline-flex;
align-items: center;
}
.app-brand:hover,
.app-brand:focus {
text-decoration: none;
}
/* Logo-Wortmarke im Header (weiß, ~3,76:1). Höhe 32px im 72px-Header ergibt
oben/unten je (72-32)/2 = 20px Freiraum — identisch zum linken Freiraum aus
dem Header-Container-Padding (.sticky-header .container-fluid = 1.25rem/20px).
So ist der Abstand zur oberen und linken Kante gleich. */
.app-brand-logo {
height: 32px;
width: auto;
display: block;
}
@media (max-width: 767.98px) {
.app-brand-logo {
height: 28px;
}
}
.app-brand-accent {
color: var(--color-primary-400);
}
/* ============================================
SIDEBAR-DIVIDER
Horizontaler Trenner zwischen Sidebar-Bereichen
============================================ */
.sidebar-divider {
border: 0;
border-top: 1px solid var(--sidebar-border);
margin: var(--space-3) 0;
}
/* ============================================
ADMIN-MODE-BANNER
Hinweis-Box im Admin-Bereich oben im Content
============================================ */
.admin-mode-banner {
border-left: 4px solid var(--color-warning);
}
/* ============================================
SEITEN-HEADER
============================================ */
.page-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-bottom: var(--space-6);
padding-bottom: var(--space-5);
border-bottom: 1px solid var(--border-subtle);
gap: var(--space-4);
}
.page-header-left h1 {
font-size: var(--font-size-2xl);
font-weight: var(--font-weight-bold);
color: var(--color-neutral-900);
letter-spacing: var(--tracking-tight);
line-height: var(--line-height-tight);
margin: 0;
}
.page-header-left p {
font-size: var(--font-size-sm);
color: var(--color-neutral-500);
margin-top: var(--space-1);
margin-bottom: 0;
}
.page-header-company {
font-size: var(--font-size-sm);
color: var(--color-neutral-500);
margin-top: var(--space-1);
margin-bottom: 0;
}
.page-header-company a:hover,
.page-header-company a:focus-visible {
text-decoration: none;
}
.page-header-right {
display: flex;
align-items: center;
gap: var(--space-3);
flex-shrink: 0;
}
/* ============================================
COMPANY TABS (eigenständige Navigation)
============================================ */
/* Company-Tabs entdramatisiert: Underline-Active statt Full-Pill.
Linear/Notion/Stripe-Stil – ruhiger, edler. */
.company-tabs {
background: transparent;
border: none;
border-bottom: 1px solid var(--border-subtle);
border-radius: 0;
padding: 0;
margin-bottom: var(--space-6);
}
.company-tabs .nav-pills {
gap: var(--space-1);
}
.company-tabs .nav-pills .nav-link {
position: relative;
color: var(--text-tertiary);
background-color: transparent;
border: none;
border-radius: 0;
margin: 0;
padding: var(--space-2) var(--space-3);
font-weight: var(--font-weight-medium);
font-size: var(--font-size-sm);
transition: color var(--duration-fast) var(--ease-out);
text-decoration: none;
min-height: var(--touch-target-min);
}
.company-tabs .nav-pills .nav-link:hover {
color: var(--text-primary);
background-color: transparent;
border: none;
box-shadow: none;
}
.company-tabs .nav-pills .nav-link.active {
color: var(--accent-on-light, var(--color-primary-700));
background-color: transparent;
border: none;
box-shadow: none;
font-weight: var(--font-weight-semibold);
}
/* Underline-Indikator unterhalb des Tabs (kein Layout-Reflow). */
.company-tabs .nav-pills .nav-link.active::after {
content: '';
position: absolute;
left: var(--space-3);
right: var(--space-3);
bottom: -1px;
height: 2px;
background: var(--accent-on-light, var(--color-primary-600));
border-radius: 2px 2px 0 0;
}
.company-tabs .nav-pills .nav-link.active:hover {
color: var(--accent-on-light, var(--color-primary-700));
}
.company-tabs .nav-pills .nav-link .badge {
font-size: 10px;
padding: 1px 6px;
border-radius: var(--radius-full);
background: var(--pill-bg-neutral) !important;
color: var(--pill-text-neutral) !important;
border: none;
font-weight: var(--font-weight-medium);
}
.company-tabs .nav-pills .nav-link.active .badge {
background-color: var(--pill-bg-primary) !important;
color: var(--pill-text-primary) !important;
border: none;
}
.company-tabs .nav-pills .nav-link i {
font-size: 1rem;
}
@media (max-width: 991.98px) {
.company-tabs .nav-pills {
gap: var(--space-2);
}
.company-tabs .nav-pills .nav-link {
padding: 0.4rem 0.6rem;
font-size: 0.9rem;
}
.company-tabs .nav-pills .nav-link i {
font-size: 1rem;
}
}
@media (max-width: 767.98px) {
.company-tabs .nav-pills {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-2);
}
.company-tabs .nav-pills .nav-link {
text-align: center;
min-height: 3rem;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
}
@media (max-width: 399.98px) {
.company-tabs .nav-pills {
gap: 0.4rem;
}
.company-tabs .nav-pills .nav-link {
min-height: 2.8rem;
padding: 0.4rem 0.5rem;
font-size: 0.85rem;
}
}
/* ============================================
FILTER-LEISTE
============================================ */
.filter-bar {
display: flex;
align-items: center;
gap: var(--space-3);
margin-bottom: var(--space-6);
flex-wrap: wrap;
}
.filter-bar .form-control,
.filter-bar .form-select,
.filter-bar .btn {
height: var(--form-height);
}
.filter-bar .form-select {
width: auto;
min-width: 180px;
}
.filter-bar .btn {
display: inline-flex;
align-items: center;
gap: var(--space-2);
white-space: nowrap;
}
.filter-bar .btn-ghost {
height: auto;
}
.filter-bar .search-input-container {
flex: 1;
max-width: 420px;
}
/* ============================================
KPI-KARTEN (Dashboard)
============================================ */
.kpi-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-5);
margin-bottom: var(--space-8);
}
.kpi-grid--2col {
grid-template-columns: repeat(2, 1fr);
}
.kpi-grid--3col {
grid-template-columns: repeat(3, 1fr);
}
/* Vertikal gestapelte Karten innerhalb einer Grid-Spalte (Zweierblock). */
.kpi-stack {
display: flex;
flex-direction: column;
gap: var(--space-5);
}
@media (max-width: 1200px) {
.kpi-grid--3col {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 640px) {
.kpi-grid--3col {
grid-template-columns: 1fr;
}
}
/* ============================================
BENTO-GRID
Asymmetrisches Dashboard-Layout: eine grosse Card
+ drei kleine. Nutzbar via .kpi-grid--bento.
Optional – aktivierbar pro Dashboard.
============================================ */
.kpi-grid--bento {
grid-template-columns: 2fr 1fr 1fr;
grid-template-rows: auto auto;
grid-auto-flow: row dense;
}
.kpi-grid--bento > .kpi-card--featured {
grid-column: 1 / 2;
grid-row: 1 / 3;
}
@media (max-width: 1200px) {
.kpi-grid--bento {
grid-template-columns: repeat(2, 1fr);
}
.kpi-grid--bento > .kpi-card--featured {
grid-column: 1 / -1;
grid-row: auto;
}
}
@media (max-width: 1200px) {
.kpi-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
.kpi-grid { grid-template-columns: 1fr; }
}
.kpi-card {
background: var(--surface-card);
border-radius: var(--card-radius);
padding: var(--card-padding-md);
box-shadow: var(--card-shadow-default);
border: var(--card-border);
transition: box-shadow var(--duration-base) var(--ease-emphasis),
transform var(--duration-base) var(--ease-emphasis),
border-color var(--duration-base) var(--ease-emphasis);
cursor: pointer;
text-decoration: none;
display: block;
position: relative;
overflow: hidden;
color: inherit;
}
.kpi-card:hover {
box-shadow: var(--card-shadow-hover);
transform: translateY(-1px);
border-color: var(--border-default);
text-decoration: none;
color: inherit;
}
.kpi-card:focus-visible {
box-shadow: var(--focus-ring);
outline: none;
}
.kpi-card--filter-active.kpi-card--yellow {
box-shadow: var(--card-shadow-default),
0 0 0 2px color-mix(in srgb, var(--color-warning) 55%, transparent);
}
.kpi-card--filter-active.kpi-card--red {
box-shadow: var(--card-shadow-default),
0 0 0 2px color-mix(in srgb, var(--color-danger) 55%, transparent);
}
.kpi-card--filter-active.kpi-card--yellow:hover {
box-shadow: var(--card-shadow-hover),
0 0 0 2px color-mix(in srgb, var(--color-warning) 55%, transparent);
}
.kpi-card--filter-active.kpi-card--red:hover {
box-shadow: var(--card-shadow-hover),
0 0 0 2px color-mix(in srgb, var(--color-danger) 55%, transparent);
}
.kpi-card--blue { border-top: 3px solid var(--color-primary-500); }
.kpi-card--green { border-top: 3px solid var(--color-success); }
.kpi-card--yellow { border-top: 3px solid var(--color-warning); }
.kpi-card--purple { border-top: 3px solid var(--color-purple); }
.kpi-card--red { border-top: 3px solid var(--color-danger); }
.kpi-card--orange { border-top: 3px solid var(--color-warning-600); }
.kpi-card--info { border-top: 3px solid var(--color-info-500); }
.kpi-card--muted {
border-top: 3px solid var(--color-neutral-400);
}
.kpi-card--muted .kpi-card-value {
color: var(--color-neutral-600);
}
.kpi-card--filter-active.kpi-card--muted {
box-shadow: var(--card-shadow-default),
0 0 0 2px color-mix(in srgb, var(--color-neutral-500) 50%, transparent);
}
.kpi-card--filter-active.kpi-card--muted:hover {
box-shadow: var(--card-shadow-hover),
0 0 0 2px color-mix(in srgb, var(--color-neutral-500) 50%, transparent);
}
.kpi-card-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--space-4);
}
.kpi-card-label {
font-size: var(--text-overline-size);
font-weight: var(--text-overline-weight);
color: var(--text-tertiary);
text-transform: uppercase;
letter-spacing: var(--text-overline-tracking);
}
.kpi-card-icon {
width: var(--icon-xl);
height: var(--icon-xl);
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.kpi-card--blue .kpi-card-icon { background: var(--color-primary-50); color: var(--color-primary-600); }
.kpi-card--green .kpi-card-icon { background: var(--color-success-50); color: var(--color-success-600); }
.kpi-card--yellow .kpi-card-icon { background: var(--color-warning-50); color: var(--color-warning-600); }
.kpi-card--purple .kpi-card-icon { background: var(--color-purple-50); color: var(--color-purple-600); }
.kpi-card--red .kpi-card-icon { background: var(--color-danger-50); color: var(--color-danger-600); }
.kpi-card--orange .kpi-card-icon { background: var(--color-warning-50); color: var(--color-warning-700); }
.kpi-card--info .kpi-card-icon { background: var(--color-info-50); color: var(--color-info-600); }
.kpi-card-value {
font-size: var(--text-display-sm-size);
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-none);
letter-spacing: var(--tracking-tight);
color: var(--text-primary);
margin-bottom: var(--space-2);
font-variant-numeric: tabular-nums;
}
.kpi-card--yellow .kpi-card-value {
color: var(--color-warning);
}
.kpi-card--red .kpi-card-value {
color: var(--color-danger);
}
.kpi-card--purple .kpi-card-value {
color: var(--color-purple);
}
/* Admin-Schnellzugriff (Launcher): grosse Werte konsistent in der Akzentfarbe */
.kpi-grid--launch .kpi-card--blue .kpi-card-value { color: var(--color-primary-600); }
.kpi-grid--launch .kpi-card--green .kpi-card-value { color: var(--color-success-600); }
.kpi-grid--launch .kpi-card--orange .kpi-card-value { color: var(--color-warning-700); }
.kpi-grid--launch .kpi-card--purple .kpi-card-value { color: var(--color-purple-600); }
.kpi-grid--launch .kpi-card--red .kpi-card-value { color: var(--color-danger-600); }
.kpi-grid--launch .kpi-card--info .kpi-card-value { color: var(--color-info-600); }
.kpi-card-context {
font-size: var(--text-caption-size);
color: var(--text-tertiary);
margin-bottom: var(--space-3);
}
.kpi-card-link {
font-size: var(--text-caption-size);
font-weight: var(--text-label-weight);
color: var(--text-link);
display: inline-flex;
align-items: center;
gap: var(--space-1);
transition: color var(--duration-fast) var(--ease-out);
}
.kpi-card:hover .kpi-card-link {
color: var(--color-primary-700);
}
/* Klickbare Kachelflaeche: gefilterte Ansicht oeffnen.
Der "Alle anzeigen"-Link liegt darueber und oeffnet den vollen Bestand. */
.kpi-card-hit {
position: absolute;
inset: 0;
z-index: 1;
border-radius: inherit;
}
.kpi-card .kpi-card-link {
position: relative;
z-index: 2;
text-decoration: none;
}
.kpi-card .kpi-card-link:hover {
color: var(--color-primary-700);
text-decoration: underline;
}
.kpi-card:has(.kpi-card-hit:focus-visible),
.kpi-card:has(.kpi-card-link:focus-visible) {
box-shadow: var(--focus-ring);
outline: none;
}
/* ============================================
DASHBOARD ZWEISPALTIGES GRID
============================================ */
.dashboard-grid {
display: grid;
grid-template-columns: 1fr 300px;
gap: var(--space-6);
}
@media (max-width: 1024px) {
.dashboard-grid { grid-template-columns: 1fr; }
}
/* ============================================
WIDGET-KARTEN
============================================ */
.widget-card {
background: var(--surface-card);
border-radius: var(--card-radius);
border: var(--card-border);
box-shadow: var(--card-shadow-default);
overflow: hidden;
}
.widget-card-header {
padding: var(--space-4) var(--space-6);
border-bottom: 1px solid var(--border-subtle);
display: flex;
align-items: center;
justify-content: space-between;
}
.widget-card-title {
font-size: var(--text-heading-4-size);
font-weight: var(--text-heading-4-weight);
color: var(--text-primary);
}
/* ============================================
TOP-CUSTOMER-LIST
Premium-Ranking-Liste mit Rang-Badge,
Mini-Bar fuer Anteil und Money-Cell rechts.
============================================ */
.top-customer-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
.top-customer {
display: grid;
grid-template-columns: auto minmax(140px, 1fr) minmax(80px, 1.5fr) auto;
align-items: center;
gap: var(--space-3);
padding: var(--space-3) var(--space-6);
border-bottom: 1px solid var(--border-subtle);
transition: background-color var(--duration-fast) var(--ease-out);
}
.top-customer:last-child {
border-bottom: none;
}
.top-customer:hover {
background: var(--surface-card-hover);
}
.top-customer-rank {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: var(--radius-full);
background: var(--pill-bg-neutral);
color: var(--pill-text-neutral);
font-size: 11px;
font-weight: var(--font-weight-semibold);
font-variant-numeric: tabular-nums;
}
.top-customer-rank--gold {
background: color-mix(in srgb, var(--color-warning-600) 15%, transparent);
color: var(--color-warning-800);
}
.top-customer-rank--silver {
background: color-mix(in srgb, var(--color-neutral-400) 18%, transparent);
color: var(--text-label);
}
.top-customer-rank--bronze {
background: color-mix(in srgb, var(--color-warning-600) 22%, transparent);
color: var(--color-warning-900);
}
.top-customer-name {
color: var(--text-primary);
font-weight: var(--font-weight-medium);
text-decoration: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.top-customer-name:hover {
color: var(--accent-on-light, var(--color-primary-700));
text-decoration: none;
}
.top-customer-bar {
position: relative;
height: 6px;
background: var(--surface-sunken);
border-radius: var(--radius-full);
overflow: hidden;
}
.top-customer-bar-fill {
position: absolute;
inset: 0;
width: 0%;
background: linear-gradient(
90deg,
var(--color-primary-400),
var(--color-primary-600));
border-radius: var(--radius-full);
transition: width var(--duration-slow) var(--ease-emphasis);
}
.top-customer-revenue {
font-weight: var(--font-weight-semibold);
color: var(--text-primary);
white-space: nowrap;
}
/* Tablet/Mobile-Anpassung: Bar versteckt, kompaktere Spalten */
@media (max-width: 768px) {
.top-customer {
grid-template-columns: auto 1fr auto;
padding: var(--space-3) var(--space-4);
}
.top-customer-bar {
display: none;
}
}
/* ============================================
MONTH-REVENUE-CHART
Schlanke vertikale Balkengrafik fuer den
monatlichen Netto-Umsatz (Dashboard). Reines
CSS – keine externe Chart-Bibliothek.
============================================ */
.month-revenue-chart {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: var(--space-2);
align-items: end;
height: 200px;
padding: var(--space-3) var(--space-6) var(--space-2);
}
.month-bar {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
height: 100%;
min-width: 0;
}
.month-bar-value {
font-size: 10px;
font-weight: var(--font-weight-semibold);
color: var(--text-label);
margin-bottom: var(--space-1);
white-space: nowrap;
line-height: 1;
}
.month-bar-track {
position: relative;
width: 70%;
max-width: 36px;
flex: 1 1 auto;
display: flex;
align-items: flex-end;
justify-content: center;
}
.month-bar-fill {
width: 100%;
min-height: 2px;
border-radius: var(--radius-md) var(--radius-md) 0 0;
background: linear-gradient(
180deg,
var(--color-primary-400),
var(--color-primary-600));
transition: height var(--duration-slow) var(--ease-emphasis);
}
.month-bar:hover .month-bar-fill {
background: linear-gradient(
180deg,
var(--color-primary-500),
var(--color-primary-700));
}
.month-bar-label {
font-size: 11px;
color: var(--text-muted);
margin-top: var(--space-2);
white-space: nowrap;
}
@media (max-width: 640px) {
.month-revenue-chart {
height: 160px;
gap: 2px;
}
.month-bar-value {
display: none;
}
.month-bar-label {
font-size: 9px;
}
}
/* ============================================
ADDRESS-BADGES
Pille-Cluster fuer "Rechnungsadresse / Lieferadresse"
im Dokument-Header (Quote/Invoice).
============================================ */
.address-badges {
display: inline-flex;
align-items: center;
gap: var(--space-2);
flex-wrap: wrap;
}
.address-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 2px 8px;
border-radius: var(--radius-sm);
font-size: var(--font-size-2xs);
font-weight: var(--font-weight-medium);
background: var(--pill-bg-neutral);
color: var(--pill-text-neutral);
letter-spacing: 0.02em;
white-space: nowrap;
}
.address-badge i {
font-size: 11px;
opacity: 0.8;
}
.address-badge--billing {
background: var(--pill-bg-primary);
color: var(--pill-text-primary);
}
.address-badge--shipping {
background: var(--pill-bg-info);
color: var(--pill-text-info);
}
/* ============================================
INTERNAL-INFO-CARD
Dezentere Darstellung der internen Sektion in
Dokument-Formularen (Quote/Invoice/etc.).
============================================ */
.internal-info-card .form-section-title,
.internal-info-card h6.text-muted {
font-size: var(--font-size-2xs);
font-weight: var(--font-weight-medium);
letter-spacing: 0.06em;
color: var(--text-tertiary);
text-transform: uppercase;
}
.widget-card-body {
padding: var(--space-2) 0;
}
.quick-action-btn {
display: flex;
align-items: center;
gap: var(--space-3);
width: 100%;
padding: var(--space-3) var(--space-5);
border: none;
background: transparent;
color: var(--color-neutral-700);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
cursor: pointer;
transition: background-color var(--duration-fast) var(--ease-out),
color var(--duration-fast) var(--ease-out);
text-decoration: none;
text-align: left;
}
.quick-action-btn:hover {
background-color: var(--color-primary-50);
color: var(--color-primary-700);
text-decoration: none;
}
.quick-action-btn-icon {
width: 32px;
height: 32px;
border-radius: var(--radius-md);
background: var(--color-neutral-100);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-neutral-500);
flex-shrink: 0;
transition: background-color var(--duration-fast) var(--ease-out),
color var(--duration-fast) var(--ease-out);
}
.quick-action-btn:hover .quick-action-btn-icon {
background-color: var(--color-primary-100);
color: var(--color-primary-600);
}
/* ============================================
ENTITY CARDS (Firmen, Kontakte)
============================================ */
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: var(--space-5);
}
.entity-card {
background: var(--surface-card);
border-radius: var(--card-radius);
border: var(--card-border);
box-shadow: var(--card-shadow-default);
padding: var(--card-padding-md);
transition: box-shadow var(--duration-base) var(--ease-out),
border-color var(--duration-base) var(--ease-out),
transform var(--duration-base) var(--ease-out);
}
.entity-card:hover {
box-shadow: var(--card-shadow-hover);
border-color: var(--color-primary-200);
transform: translateY(-1px);
}
.entity-card-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-bottom: var(--space-4);
}
.entity-card-identity {
display: flex;
align-items: center;
gap: var(--space-3);
min-width: 0;
}
.entity-avatar {
width: 42px;
height: 42px;
border-radius: var(--radius-md);
background: var(--color-primary-100);
color: var(--color-primary-700);
display: flex;
align-items: center;
justify-content: center;
font-size: var(--font-size-sm);
font-weight: var(--font-weight-bold);
flex-shrink: 0;
letter-spacing: var(--tracking-wide);
}
.entity-avatar--green { background: var(--color-success-light); color: var(--color-success-dark); }
.entity-avatar--yellow { background: var(--color-warning-light); color: var(--color-warning-dark); }
.entity-avatar--purple { background: var(--color-purple-light); color: var(--color-purple-dark); }
.entity-name-group {
min-width: 0;
}
.entity-name {
font-size: var(--font-size-base);
font-weight: var(--font-weight-semibold);
color: var(--color-neutral-900);
line-height: var(--line-height-tight);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.entity-subtitle {
font-size: var(--font-size-xs);
color: var(--color-neutral-500);
margin-top: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.entity-card-actions {
display: flex;
gap: var(--space-1);
flex-shrink: 0;
opacity: 0;
transition: opacity var(--duration-fast) var(--ease-out);
}
.entity-card:hover .entity-card-actions {
opacity: 1;
}
.entity-action-btn {
width: 30px;
height: 30px;
border-radius: var(--radius-md);
border: 1px solid var(--border-subtle);
background: var(--surface-card);
color: var(--text-disabled);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all var(--duration-fast) var(--ease-out);
text-decoration: none;
}
.entity-action-btn:hover {
background: var(--color-primary-50);
border-color: var(--color-primary-300);
color: var(--color-primary-600);
text-decoration: none;
}
.entity-card-divider {
height: 1px;
background: var(--color-neutral-100);
margin: var(--space-4) 0;
}
.entity-meta-list {
display: flex;
flex-direction: column;
gap: var(--space-2);
margin-bottom: var(--space-4);
}
.entity-meta-item {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--font-size-sm);
color: var(--color-neutral-600);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.entity-meta-item svg,
.entity-meta-item i {
width: 14px;
height: 14px;
color: var(--color-neutral-400);
flex-shrink: 0;
}
.entity-card-footer {
display: flex;
gap: var(--space-2);
padding-top: var(--space-4);
border-top: 1px solid var(--color-neutral-100);
flex-wrap: wrap;
}
/* ============================================
BUTTONS
============================================ */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--btn-gap);
padding: var(--space-2) var(--btn-padding-x-md);
min-height: var(--btn-height-md);
border-radius: var(--btn-radius);
font-size: var(--btn-font-size-md);
font-weight: var(--font-weight-medium);
font-family: var(--font-family-base);
border: 1px solid transparent;
cursor: pointer;
transition: all var(--duration-fast) var(--ease-out);
text-decoration: none;
white-space: nowrap;
line-height: var(--line-height-none);
letter-spacing: var(--tracking-wide);
}
.btn:focus-visible {
outline: 2px solid var(--focus-outline-color, var(--color-primary-500));
outline-offset: var(--focus-ring-offset);
}
.btn[disabled],
.btn.disabled {
opacity: var(--opacity-40);
cursor: not-allowed;
pointer-events: none;
}
.btn-primary {
background: var(--accent-on-light, var(--color-primary-600));
color: var(--text-on-primary);
border-color: var(--accent-on-light, var(--color-primary-600));
box-shadow: var(--shadow-xs);
}
.btn-primary:hover {
background: var(--color-primary-700);
border-color: var(--color-primary-700);
color: var(--text-on-primary);
text-decoration: none;
}
/* Tactile Feedback: Buttons "druecken" sich beim Klick.
2 % Skalierung reicht – mehr wirkt verspielt. */
.btn:active:not([disabled]):not(.disabled) {
transform: scale(0.98);
}
.btn-secondary {
background: var(--surface-card);
color: var(--text-secondary);
border-color: var(--border-subtle);
box-shadow: none;
}
.btn-secondary:hover {
background: var(--surface-card-hover);
border-color: var(--border-default);
color: var(--text-primary);
text-decoration: none;
}
.btn-ghost {
background: transparent;
color: var(--text-tertiary);
border-color: transparent;
font-size: var(--font-size-lg);
padding: var(--space-1) var(--space-2);
transition: color var(--duration-fast) var(--ease-out),
background-color var(--duration-fast) var(--ease-out);
}
.btn-ghost:hover {
background: var(--icon-btn-bg-hover);
border-color: transparent;
color: var(--text-primary);
text-decoration: none;
}
.btn-danger {
background: var(--color-danger);
color: var(--text-on-danger);
border-color: var(--color-danger);
}
.btn-danger:hover {
background: var(--color-danger-dark);
border-color: var(--color-danger-dark);
color: var(--text-on-danger);
text-decoration: none;
}
.btn-success {
background: var(--color-success);
color: var(--text-on-success);
border-color: var(--color-success);
}
.btn-success:hover {
background: var(--color-success-dark);
border-color: var(--color-success-dark);
color: var(--text-on-success);
text-decoration: none;
}
/* Hinzufügen-Leiste unter den Artikelpositionen: sichtbarer Rand in der Farbe
der Schrift, damit die Flächen als Buttons erkennbar sind. Die Basisregel
.btn setzt den Rand transparent und ueberschreibt damit die Randfarbe der
Outline-Variante, die sonst aus --bs-btn-border-color kaeme. */
.btn-add-item,
.btn-add-item-empty {
border-color: var(--bs-btn-border-color);
}
.btn-sm {
min-height: var(--btn-height-sm);
padding: var(--space-1) var(--btn-padding-x-sm);
font-size: var(--btn-font-size-sm);
}
.btn-sm.btn-ghost {
font-size: var(--font-size-lg);
padding: var(--space-1) var(--space-2);
}
#sigToolbar .dropdown-toggle.btn-ghost,
#emailBodyToolbar .dropdown-toggle.btn-ghost {
background-color: transparent !important;
color: var(--color-neutral-500) !important;
}
#sigToolbar .dropdown-toggle.btn-ghost:hover,
#emailBodyToolbar .dropdown-toggle.btn-ghost:hover {
background-color: transparent !important;
color: var(--color-primary-600) !important;
}
/* E-Mail-Modal: Im Modus "free" wird kein PDF-Anhang angezeigt */
#emailPreviewModal[data-mail-mode="free"] #emailPdfAttachment {
display: none !important;
}
/* ============================================
E-MAIL-MODAL: KOPFZEILEN-AKTIONEN & GROSSANSICHT
============================================ */
/* margin-left: auto schiebt die Gruppe an den rechten Rand — die Kopfzeile
selbst verteilt ihre Kinder nicht (justify-content: normal). */
.email-modal-head-actions {
display: inline-flex;
align-items: center;
gap: var(--space-1);
margin-left: auto;
}
/* Bootstrap gibt .btn-close negative Aussenabstaende, damit es allein in der
Kopfzeile sitzt. In der Aktionsgruppe stoert das die Ausrichtung. */
.email-modal-head-actions .btn-close {
margin: 0;
}
/* Ein Klick auf den Hintergrund bleibt vollstaendig ohne Wirkung: Bootstrap
laesst das Fenster bei gesperrtem Hintergrund sonst kurz aufpoppen
(.modal-static -> transform: scale(1.02)). Das wirkt wie eine Reaktion auf
einen Klick, der bewusst keine hat. */
#emailPreviewModal.modal-static .modal-dialog {
transform: none;
}
/* Grossansicht (Umschalter): 95 % des Browserfensters. Der ringsum sichtbare
Hintergrund zeigt, dass dahinter noch die Seite liegt — bewusst nicht randlos. */
#emailPreviewModal.email-modal-maximized .modal-dialog {
max-width: 95vw;
margin: 2.5vh auto;
}
#emailPreviewModal.email-modal-maximized .modal-content {
height: 95vh;
}
#emailPreviewModal.email-modal-maximized .modal-body {
overflow-y: auto;
}
/* Der Nachrichten-Editor traegt seine Standardhoehe als Inline-Stil; in der
Grossansicht darf er den zusaetzlichen Platz nutzen (Bildlauf uebernimmt
der Modal-Body). Daher hier !important. */
#emailPreviewModal.email-modal-maximized #email_body {
min-height: 40vh;
max-height: none !important;
}
/* Auf Telefonen fuellt das Modal ohnehin nahezu die Flaeche. */
@media (max-width: 767.98px) {
#btnToggleEmailModalSize {
display: none;
}
}
/* ============================================
E-MAIL-MODAL: ADRESSBUCH-SUCHE IN DEN EMPFAENGERFELDERN
Vorschlagsliste unter An/CC/BCC (js/email_recipient_picker.js).
============================================ */
.recipient-picker {
position: relative;
}
.recipient-picker__panel {
display: none;
position: absolute;
top: calc(100% + 2px);
left: 0;
right: 0;
z-index: var(--z-dropdown);
max-height: 260px;
overflow-y: auto;
background: var(--surface-card);
border: 1px solid var(--border-strong);
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
}
.recipient-picker__panel.is-open {
display: block;
}
.recipient-picker__item {
padding: var(--space-2) var(--space-3);
border-bottom: 1px solid var(--border-subtle);
cursor: pointer;
}
.recipient-picker__item:last-child {
border-bottom: none;
}
.recipient-picker__item:hover,
.recipient-picker__item.is-active {
background: var(--surface-page);
}
.recipient-picker__item.is-entered {
background: var(--surface-sunken);
}
.recipient-picker__name {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
color: var(--text-primary);
}
.recipient-picker__flag {
margin-left: var(--space-2);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-normal);
color: var(--text-muted);
}
/* Herkunft eines Vorschlags (z. B. "Rechnungs-E-Mail" einer Firma). */
.recipient-picker__tag {
margin-left: var(--space-2);
padding: 1px var(--space-2);
border: 1px solid var(--border-default);
border-radius: var(--radius-sm);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-normal);
color: var(--text-muted);
white-space: nowrap;
}
.recipient-picker__meta,
.recipient-picker__empty {
font-size: var(--font-size-xs);
color: var(--text-muted);
}
.recipient-picker__meta {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.recipient-picker__empty {
padding: var(--space-3);
text-align: center;
}
.btn-lg {
min-height: var(--btn-height-lg);
padding: var(--space-3) var(--btn-padding-x-lg);
font-size: var(--btn-font-size-lg);
}
/* ============================================
ICON-BUTTON (.icon-btn)
Quadratisch 32x32 (>= WCAG 2.5.8 Touch-Target).
Transparent default, hover als hauchdunne Toenung.
Ersetzt verschachtelte .btn .btn-sm .btn-outline-* in
Tabellen-Action-Spalten.
============================================ */
.icon-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--icon-btn-size);
height: var(--icon-btn-size);
min-width: var(--touch-target-min);
min-height: var(--touch-target-min);
padding: 0;
background: transparent;
color: var(--icon-btn-color);
border: 1px solid transparent;
border-radius: var(--icon-btn-radius);
cursor: pointer;
text-decoration: none;
transition: background-color var(--duration-fast) var(--ease-out),
color var(--duration-fast) var(--ease-out),
transform var(--duration-fast) var(--ease-out);
font-size: var(--icon-btn-icon-size);
line-height: 1;
}
.icon-btn:hover,
.icon-btn:focus-visible {
background: var(--icon-btn-bg-hover);
color: var(--icon-btn-color-hover);
text-decoration: none;
}
.icon-btn:active:not([disabled]):not(.disabled) {
background: var(--icon-btn-bg-active);
transform: scale(0.96);
}
.icon-btn[disabled],
.icon-btn.disabled {
opacity: var(--opacity-40);
cursor: not-allowed;
pointer-events: none;
}
.icon-btn > i,
.icon-btn > svg {
font-size: var(--icon-btn-icon-size);
line-height: 1;
}
/* Icon als reiner Dropdown-Trigger: kein Bootstrap-Caret, gleiche Ausmasse wie benachbarte .icon-btn */
.icon-btn.dropdown-toggle::after {
display: none !important;
margin-left: 0 !important;
content: none !important;
border: none !important;
}
.icon-btn.dropdown-toggle {
padding-inline: 0;
}
/* Variante: Danger-Hover (z.B. Loeschen) */
.icon-btn--danger:hover,
.icon-btn--danger:focus-visible {
background: color-mix(in srgb, var(--color-danger-500) 12%, transparent);
color: var(--color-danger-600);
}
/* Variante: Primary-Hover (z.B. Bearbeiten/Hauptaktion) */
.icon-btn--primary:hover,
.icon-btn--primary:focus-visible {
background: color-mix(in srgb, var(--color-primary-500) 12%, transparent);
color: var(--accent-on-light, var(--color-primary-700));
}
/* ============================================
STATUS-PILL (.status-pill)
Subtile Tinted-Badges – ersetzt vollflaechige
.badge.bg-success etc. Linear/Stripe-Stil.
============================================ */
.status-pill {
display: inline-flex;
align-items: center;
gap: 4px;
padding: var(--pill-padding-y) var(--pill-padding-x);
border-radius: var(--pill-radius);
font-size: var(--pill-font-size);
font-weight: var(--pill-font-weight);
line-height: 1.4;
letter-spacing: 0.02em;
white-space: nowrap;
vertical-align: middle;
/* Default: neutral */
background: var(--pill-bg-neutral);
color: var(--pill-text-neutral);
}
.status-pill--success { background: var(--pill-bg-success); color: var(--pill-text-success); }
.status-pill--warning { background: var(--pill-bg-warning); color: var(--pill-text-warning); }
.status-pill--danger { background: var(--pill-bg-danger); color: var(--pill-text-danger); }
.status-pill--info { background: var(--pill-bg-info); color: var(--pill-text-info); }
.status-pill--primary { background: var(--pill-bg-primary); color: var(--pill-text-primary); }
.status-pill--neutral { background: var(--pill-bg-neutral); color: var(--pill-text-neutral); }
.status-pill--purple { background: var(--pill-bg-purple); color: var(--pill-text-purple); }
/* ============================================
LOADING-CONTEXT
Spinner + kontextueller Text – statt nackter Spinner.
"Lade Rechnungen…" reduziert wahrgenommene Wartezeit.
============================================ */
.loading-context {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-size: var(--font-size-sm);
color: var(--text-secondary);
}
.loading-context .spinner-border {
width: 1rem;
height: 1rem;
border-width: 2px;
}
.loading-context-block {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
padding: var(--space-6);
color: var(--text-secondary);
font-size: var(--font-size-sm);
}
/* ============================================
FORMULAR-SYSTEM
Bootstrap .form-control / .form-select Overrides
+ Sektionen, Labels, Aktionen, Modals
============================================ */
/* --- Input / Select / Textarea Override --- */
.form-control,
textarea.form-control {
border: 1px solid var(--form-border);
border-radius: var(--form-radius);
padding: var(--form-padding-y) var(--form-padding-x);
font-size: var(--form-font-size);
font-family: var(--font-family-base);
color: var(--text-primary);
background: var(--form-bg);
min-height: var(--form-height);
transition: border-color var(--duration-fast) var(--ease-out),
box-shadow var(--duration-fast) var(--ease-out);
}
.form-select {
border: 1px solid var(--form-border);
border-radius: var(--form-radius);
padding: var(--form-padding-y) var(--form-padding-x);
font-size: var(--form-font-size);
font-family: var(--font-family-base);
color: var(--text-primary);
min-height: var(--form-height);
transition: border-color var(--duration-fast) var(--ease-out),
box-shadow var(--duration-fast) var(--ease-out);
background-color: var(--form-bg);
}
/* Der Pfeil des Kombinationsfeldes (js/combo_field.js) nutzt dieselbe
Darstellung wie ein Auswahlfeld — dadurch ist die Vorschlagsliste am Feld
erkennbar, ohne dass ein zweites Symbol entsteht. */
.form-select:not([multiple]):not([size]),
.combo-input {
background-image: var(--bs-form-select-bg-img, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23495057' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"));
background-repeat: no-repeat;
background-position: right var(--space-3, 0.75rem) center;
background-size: 16px 12px;
padding-right: calc(var(--form-padding-x, 0.75rem) + var(--space-6, 1.5rem));
}
.form-select[multiple],
.form-select[size]:not([size="1"]) {
padding-right: var(--form-padding-x);
}
.form-select:hover {
border-color: var(--form-border-hover);
}
.form-control:hover,
textarea.form-control:hover {
border-color: var(--form-border-hover);
}
.form-control:focus,
.form-select:focus,
textarea.form-control:focus {
border-color: var(--form-border-focus);
box-shadow: var(--focus-ring);
}
.form-control::placeholder,
textarea.form-control::placeholder {
color: var(--form-placeholder);
}
.form-control[readonly] {
background: var(--form-bg-readonly);
border-color: var(--border-default);
color: var(--text-tertiary);
cursor: default;
}
.form-select[disabled],
.form-control[disabled] {
border-color: var(--border-default);
color: var(--text-tertiary);
cursor: default;
}
.form-control[disabled] {
background: var(--form-bg-disabled);
}
.form-select[disabled]:not([multiple]):not([size]) {
background-color: var(--form-bg-disabled);
background-image: var(--bs-form-select-bg-img, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23495057' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"));
background-repeat: no-repeat;
background-position: right var(--space-3, 0.75rem) center;
background-size: 16px 12px;
padding-right: calc(var(--form-padding-x, 0.75rem) + var(--space-6, 1.5rem));
}
/* --- Labels (feiner: 12px Medium) --- */
.form-label {
display: block;
font-size: var(--font-size-xs);
font-weight: var(--font-weight-medium);
letter-spacing: 0.01em;
color: var(--form-label-color);
margin-bottom: var(--space-1);
line-height: var(--line-height-normal);
}
/* --- Helper Text --- */
.form-text {
font-size: var(--font-size-xs);
color: var(--form-helper-color);
margin-top: var(--space-1);
line-height: var(--line-height-normal);
}
/* --- Form Sections --- */
.form-section {
border: none;
padding: 0;
margin: 0 0 var(--space-6) 0;
padding-top: var(--space-5);
border-top: 1px solid var(--form-section-border);
}
.form-section:first-of-type {
border-top: none;
padding-top: 0;
}
.form-section-title {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
text-transform: uppercase;
letter-spacing: var(--tracking-wider);
color: var(--text-tertiary);
padding: 0;
margin-bottom: var(--space-4);
border: none;
background: none;
width: auto;
float: none;
}
.form-section-title i {
font-size: 1rem;
color: var(--text-tertiary);
}
/* --- Form Actions (Footer) --- */
.form-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--space-3);
padding-top: var(--space-5);
margin-top: var(--space-6);
border-top: 1px solid var(--form-section-border);
}
.form-actions--start {
justify-content: flex-start;
}
.form-actions--between {
justify-content: space-between;
}
/* --- Modal Form Adjustments --- */
.modal-content {
border: 1px solid var(--border-subtle);
border-radius: var(--modal-radius);
box-shadow: var(--shadow-xl);
background: var(--surface-card);
overflow: hidden;
}
.modal-backdrop {
background: rgba(15, 23, 42, 0.4);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.modal-header {
padding: var(--space-5) var(--space-6) var(--space-3);
border-bottom: 1px solid var(--border-subtle);
background: transparent;
}
.modal-header .modal-title {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-semibold);
letter-spacing: var(--tracking-heading);
color: var(--text-primary);
}
.modal-header .btn-close {
font-size: 0.85rem;
opacity: 0.6;
transition: opacity var(--duration-fast) var(--ease-out);
}
.modal-header .btn-close:hover {
opacity: 1;
}
.modal-body {
padding: var(--space-6);
}
.modal-body .form-section:first-of-type {
border-top: none;
padding-top: 0;
}
.modal-footer {
padding: var(--space-4) var(--space-6);
border-top: 1px solid var(--border-subtle);
background: var(--surface-sunken);
gap: var(--space-2);
}
/* --- Validation States --- */
.form-control.is-invalid,
.form-select.is-invalid {
border-color: var(--border-danger);
}
.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
border-color: var(--border-danger);
box-shadow: 0 0 0 3px var(--color-danger-100);
}
.form-control.is-valid,
.form-select.is-valid {
border-color: var(--border-success);
}
.form-control.is-valid:focus,
.form-select.is-valid:focus {
border-color: var(--border-success);
box-shadow: 0 0 0 3px var(--color-success-100);
}
.invalid-feedback {
font-size: var(--font-size-xs);
color: var(--text-danger);
}
.valid-feedback {
font-size: var(--font-size-xs);
color: var(--text-success);
}
/* --- Checkbox / Switch Overrides --- */
.form-check-label {
font-size: var(--form-font-size);
color: var(--text-secondary);
}
.form-check-input {
border-color: var(--form-border);
}
.form-check-input:checked {
background-color: var(--color-primary-600);
border-color: var(--color-primary-600);
}
.form-check-input:focus {
box-shadow: var(--focus-ring);
border-color: var(--form-border-focus);
}
/* --- Input Group Suffix (EUR, %, Stk) --- */
.input-group-text {
border: 1px solid var(--form-border);
background: var(--color-neutral-50);
color: var(--text-tertiary);
font-size: var(--form-font-size);
padding: var(--form-padding-y) var(--form-padding-x);
}
/* #contactModal: Eingabe (.form-control) bleibt visuell abgerundet bis zur Gruppenkante; Typ (.form-select) rechts ohne Radius am Textfeld (Bootstrap-Standard widersprechend). */
.input-group > .form-control,
.input-group > .form-select,
.input-group > .btn,
.input-group > .input-group-text {
position: relative;
}
.input-group:not(.has-validation) > :not(:first-child):not(.dropdown-menu) {
margin-left: -1px;
}
.input-group:not(.has-validation) > :not(:first-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating) {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.input-group:not(.has-validation) > :first-child:not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating) {
border-top-left-radius: var(--form-radius);
border-bottom-left-radius: var(--form-radius);
}
.input-group:not(.has-validation) > :last-child:not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating) {
border-top-right-radius: var(--form-radius);
border-bottom-right-radius: var(--form-radius);
}
#contactModal .input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating):not(.form-select) {
border-top-right-radius: var(--form-radius);
border-bottom-right-radius: var(--form-radius);
}
#contactModal .input-group:not(.has-validation) > .form-select:not(:last-child) {
border-top-right-radius: 0 !important;
border-bottom-right-radius: 0 !important;
}
.input-group > .form-control:focus,
.input-group > .form-select:focus,
.input-group > .btn:focus {
z-index: 3;
}
/* --- Legacy custom form-input classes (search wrapper etc.) --- */
.form-input,
.form-textarea {
width: 100%;
padding: var(--form-padding-y) var(--form-padding-x);
border: 1px solid var(--form-border);
border-radius: var(--form-radius);
font-size: var(--form-font-size);
font-family: var(--font-family-base);
color: var(--text-primary);
background: var(--form-bg);
transition: border-color var(--duration-fast) var(--ease-out),
box-shadow var(--duration-fast) var(--ease-out);
outline: none;
}
.form-input:focus,
.form-textarea:focus {
border-color: var(--form-border-focus);
box-shadow: var(--focus-ring);
}
.form-input::placeholder,
.form-textarea::placeholder {
color: var(--form-placeholder);
}
/* --- Search Wrapper --- */
.search-wrapper {
position: relative;
max-width: 420px;
width: 100%;
}
.search-icon {
position: absolute;
left: var(--space-3);
top: 50%;
transform: translateY(-50%);
color: var(--color-neutral-400);
pointer-events: none;
width: 16px;
height: 16px;
}
.search-wrapper .form-input {
padding-left: 2.5rem;
}
/* ============================================
BREADCRUMB-NAVIGATION
============================================ */
.breadcrumb-nav {
margin-bottom: var(--space-3);
}
.breadcrumb-nav ol {
display: flex;
align-items: center;
gap: 0;
list-style: none;
padding: 0;
margin: 0;
}
.breadcrumb-nav li {
display: flex;
align-items: center;
font-size: var(--breadcrumb-font-size);
color: var(--breadcrumb-color);
line-height: var(--line-height-normal);
}
.breadcrumb-nav li + li::before {
content: "\203A";
padding: 0 var(--space-2);
color: var(--breadcrumb-separator);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-normal);
}
.breadcrumb-nav a {
color: var(--breadcrumb-link-color);
text-decoration: none;
font-weight: var(--font-weight-medium);
transition: color var(--duration-fast) var(--ease-out);
}
.breadcrumb-nav a:hover {
color: var(--breadcrumb-link-hover);
text-decoration: underline;
}
/* ============================================
BADGES / STATUS-ANZEIGEN
============================================ */
.badge {
display: inline-flex;
align-items: center;
gap: var(--space-1);
padding: var(--badge-padding-y) var(--badge-padding-x);
border-radius: var(--badge-radius);
font-size: var(--badge-font-size);
font-weight: var(--font-weight-semibold);
white-space: nowrap;
line-height: var(--line-height-normal);
}
.badge--sm {
padding: 1px var(--space-1);
font-size: var(--font-size-2xs);
}
.badge--success { background: var(--color-success-50); color: var(--color-success-700); }
.badge--warning { background: var(--color-warning-50); color: var(--color-warning-700); }
.badge--danger { background: var(--color-danger-50); color: var(--color-danger-700); }
.badge--info { background: var(--color-info-50); color: var(--color-info-700); }
.badge--neutral { background: var(--color-neutral-100); color: var(--color-neutral-600); }
.badge--primary { background: var(--color-primary-50); color: var(--color-primary-700); }
.badge--purple { background: var(--color-purple-50); color: var(--color-purple-700); }
/* ============================================
DETAIL-DRAWER
============================================ */
.drawer-overlay {
position: fixed;
inset: 0;
background: var(--overlay-bg);
z-index: var(--z-modal-backdrop);
opacity: 0;
visibility: hidden;
transition: opacity var(--duration-base) var(--ease-out),
visibility var(--duration-base) var(--ease-out);
}
.drawer-overlay--visible {
opacity: 1;
visibility: visible;
}
.drawer {
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: var(--drawer-width-md);
max-width: 90vw;
background: var(--surface-elevated);
box-shadow: var(--drawer-shadow);
z-index: var(--z-modal-content);
transform: translateX(100%);
transition: transform var(--duration-slow) var(--ease-out);
display: flex;
flex-direction: column;
overflow: hidden;
}
.drawer-overlay--visible + .drawer,
.drawer--visible {
transform: translateX(0);
}
.drawer-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-4) var(--space-5);
border-bottom: 1px solid var(--border-subtle);
flex-shrink: 0;
}
.drawer-title {
font-size: var(--text-heading-3-size);
font-weight: var(--text-heading-3-weight);
color: var(--text-primary);
margin: 0;
}
.drawer-close {
background: none;
border: none;
color: var(--text-tertiary);
cursor: pointer;
font-size: var(--icon-lg);
padding: var(--space-1);
border-radius: var(--radius-md);
transition: color var(--duration-fast) var(--ease-out),
background var(--duration-fast) var(--ease-out);
}
.drawer-close:hover {
color: var(--text-primary);
background: var(--surface-sunken);
}
.drawer-body {
flex: 1;
overflow-y: auto;
padding: var(--space-5);
}
.drawer-footer {
padding: var(--space-3) var(--space-5);
border-top: 1px solid var(--border-subtle);
flex-shrink: 0;
}
.drawer--sm { width: var(--drawer-width-sm); }
.drawer--lg { width: var(--drawer-width-lg); }
/* ============================================
COMMAND PALETTE / GLOBALE SUCHE (Cmd+K)
Modal mit Suchfeld, Schnellfilter-Pills,
gruppierten Treffern, Subtitle und Status-Pill.
============================================ */
.cmd-palette-overlay {
position: fixed;
inset: 0;
background: var(--overlay-bg);
z-index: var(--z-modal-content);
display: flex;
align-items: flex-start;
justify-content: center;
padding-top: 10vh;
padding-left: var(--space-6);
padding-right: var(--space-6);
opacity: 0;
visibility: hidden;
transition: opacity var(--duration-fast) var(--ease-out),
visibility var(--duration-fast) var(--ease-out);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
}
.cmd-palette-overlay--visible {
opacity: 1;
visibility: visible;
}
.cmd-palette {
background: var(--surface-elevated);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-xl);
width: 100%;
max-width: 760px;
max-height: 78vh;
display: flex;
flex-direction: column;
overflow: hidden;
transform: scale(0.96) translateY(-8px);
transition: transform var(--duration-base) var(--ease-spring),
max-height var(--duration-base) var(--ease-out);
}
/* Bei leerer Eingabe: nur der Header bleibt sichtbar (Modal kollabiert). */
.cmd-palette:not(.cmd-palette--has-body) .cmd-palette-filters,
.cmd-palette:not(.cmd-palette--has-body) .cmd-palette-list {
display: none;
}
.cmd-palette-overlay--visible .cmd-palette {
transform: scale(1) translateY(0);
}
/* --- Header --- */
.cmd-palette-header {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-6);
flex-shrink: 0;
}
/* Trennlinie nur, wenn Inhalt drunter sichtbar ist. */
.cmd-palette--has-body .cmd-palette-header {
border-bottom: 1px solid var(--border-subtle);
}
/* Form-Feld-Wrapper – haelt Icon, Input und Clear-X als ein Eingabefeld zusammen. */
.cmd-palette-field {
flex: 1;
min-width: 0;
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--form-padding-y) var(--space-4);
min-height: var(--form-height);
background: var(--form-bg);
border: 1px solid var(--form-border);
border-radius: var(--form-radius);
transition: border-color var(--duration-fast) var(--ease-out),
box-shadow var(--duration-fast) var(--ease-out);
}
.cmd-palette-field:hover {
border-color: var(--form-border-hover);
}
/* Kein zusaetzlicher Focus-Ring – das geoeffnete Modal ist bereits der
Fokus-Kontext. A11y bleibt durch Modal-aria-label und Tastatur-
navigation gewahrt. */
.cmd-palette-field:focus-within {
border-color: var(--form-border);
box-shadow: none;
}
.cmd-palette-search-icon {
color: var(--text-tertiary);
font-size: var(--icon-md);
flex-shrink: 0;
}
.cmd-palette-input {
flex: 1;
min-width: 0;
border: none;
background: transparent;
/* Body-LG (16 px) — Haupt-Suchfeld. */
font-size: var(--font-size-base);
font-weight: var(--font-weight-normal);
font-family: var(--font-family-base);
letter-spacing: var(--tracking-body);
color: var(--text-primary);
outline: none;
box-shadow: none;
padding: 0;
-webkit-appearance: none;
appearance: none;
}
.cmd-palette-input:focus,
.cmd-palette-input:focus-visible {
outline: none;
box-shadow: none;
border: none;
}
.cmd-palette-input::placeholder {
color: var(--text-disabled);
}
/* Clear-X innerhalb des Eingabefelds. */
.cmd-palette-clear {
appearance: none;
display: grid;
place-items: center;
flex-shrink: 0;
width: 1.25rem;
height: 1.25rem;
padding: 0;
border: none;
border-radius: var(--radius-full);
background: transparent;
color: var(--text-tertiary);
font-size: var(--icon-sm); /* steuert das eingebettete bi-x-circle-fill */
line-height: 1;
cursor: pointer;
visibility: hidden;
opacity: 0;
width: 0;
pointer-events: none;
transition: color var(--duration-fast) var(--ease-out),
background var(--duration-fast) var(--ease-out);
}
.cmd-palette-clear--visible {
visibility: visible;
opacity: 1;
width: 1.25rem;
pointer-events: auto;
}
.cmd-palette-clear:hover {
color: var(--text-primary);
}
.cmd-palette-clear:focus-visible {
outline: 2px solid var(--focus-outline-color);
outline-offset: 2px;
}
/* Schliess-Button (separate Funktion: Modal komplett zu). */
.cmd-palette-close {
appearance: none;
display: grid;
place-items: center;
flex-shrink: 0;
width: 2.25rem;
height: 2.25rem;
padding: 0;
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
background: transparent;
color: var(--text-tertiary);
font-size: var(--icon-md);
cursor: pointer;
transition: background var(--duration-fast) var(--ease-out),
color var(--duration-fast) var(--ease-out),
border-color var(--duration-fast) var(--ease-out);
}
.cmd-palette-close:hover {
background: var(--icon-btn-bg-hover);
color: var(--text-primary);
border-color: var(--border-default);
}
.cmd-palette-close:focus-visible {
outline: 2px solid var(--focus-outline-color);
outline-offset: 2px;
}
/* --- Filter-Leiste (Schnellfilter) --- */
.cmd-palette-filters {
display: none;
flex-wrap: wrap;
gap: var(--space-2);
padding: var(--space-4) var(--space-6);
border-bottom: 1px solid var(--border-subtle);
flex-shrink: 0;
background: var(--surface-sunken);
}
.cmd-palette-filters--visible {
display: flex;
}
.cmd-palette-filter {
appearance: none;
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-1) var(--space-3);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-medium);
letter-spacing: var(--tracking-tight);
color: var(--text-secondary);
background: var(--surface-card);
border: 1px solid var(--border-default);
border-radius: var(--radius-full);
cursor: pointer;
white-space: nowrap;
transition: background var(--duration-fast) var(--ease-out),
border-color var(--duration-fast) var(--ease-out),
color var(--duration-fast) var(--ease-out);
}
.cmd-palette-filter:hover {
background: var(--surface-card-hover);
border-color: var(--border-strong);
color: var(--text-primary);
}
.cmd-palette-filter:focus-visible {
outline: 2px solid var(--focus-outline-color);
outline-offset: 2px;
}
.cmd-palette-filter i {
font-size: var(--font-size-sm);
color: inherit;
opacity: 0.85;
}
.cmd-palette-filter-count {
font-size: var(--font-size-2xs);
font-weight: var(--font-weight-semibold);
color: var(--text-tertiary);
background: var(--surface-sunken);
border-radius: var(--radius-full);
padding: 0 var(--space-2);
min-width: 1.25rem;
text-align: center;
line-height: 1.4;
}
.cmd-palette-filter--active {
background: var(--color-primary-600);
border-color: var(--color-primary-600);
color: var(--text-on-primary);
}
.cmd-palette-filter--active i { opacity: 1; }
.cmd-palette-filter--active:hover {
background: var(--color-primary-700);
border-color: var(--color-primary-700);
color: var(--text-on-primary);
}
.cmd-palette-filter--active .cmd-palette-filter-count {
background: rgba(255, 255, 255, 0.20);
color: var(--text-on-primary);
}
[data-theme="dark"] .cmd-palette-filter--active {
background: var(--color-primary-500);
border-color: var(--color-primary-500);
}
/* --- Liste --- */
.cmd-palette-list {
flex: 1;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
padding: var(--space-3) 0 var(--space-4);
scrollbar-gutter: stable;
}
/* Sichtbarer, edler Custom-Scrollbar (WebKit + Firefox) */
.cmd-palette-list {
scrollbar-width: thin;
scrollbar-color: var(--border-strong) transparent;
}
.cmd-palette-list::-webkit-scrollbar {
width: 10px;
}
.cmd-palette-list::-webkit-scrollbar-track {
background: transparent;
}
.cmd-palette-list::-webkit-scrollbar-thumb {
background: var(--border-strong);
border: 2px solid var(--surface-elevated);
border-radius: var(--radius-full);
min-height: 32px;
}
.cmd-palette-list::-webkit-scrollbar-thumb:hover {
background: var(--color-neutral-500);
}
[data-theme="dark"] .cmd-palette-list::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.30);
}
/* --- Gruppen-Header (Section-Label-Pattern: 12 px / semibold / uppercase) --- */
.cmd-palette-group {
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-5) var(--space-6) var(--space-2);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
text-transform: uppercase;
letter-spacing: var(--tracking-widest);
color: var(--text-tertiary);
}
/* Erstes Gruppen-Header dichter am oberen Rand. */
.cmd-palette-list > .cmd-palette-group:first-child {
padding-top: var(--space-3);
}
.cmd-palette-group-icon {
font-size: var(--font-size-sm);
color: var(--text-tertiary);
}
.cmd-palette-group-label {
flex: 1;
}
.cmd-palette-group-count {
font-size: var(--font-size-2xs);
font-weight: var(--font-weight-medium);
color: var(--text-tertiary);
background: var(--surface-sunken);
border-radius: var(--radius-full);
padding: 0 var(--space-2);
min-width: 1.5rem;
text-align: center;
letter-spacing: 0;
text-transform: none;
}
/* --- Items --- */
.cmd-palette-item {
display: flex;
align-items: center;
gap: var(--space-5);
padding: var(--space-4) var(--space-6);
color: var(--text-primary);
text-decoration: none;
cursor: pointer;
border-left: 2px solid transparent;
transition: background var(--duration-fast) var(--ease-out),
border-color var(--duration-fast) var(--ease-out);
}
.cmd-palette-item:hover,
.cmd-palette-item--active {
background: var(--color-primary-50);
border-left-color: var(--color-primary-500);
text-decoration: none;
color: var(--text-primary);
}
[data-theme="dark"] .cmd-palette-item:hover,
[data-theme="dark"] .cmd-palette-item--active {
background: rgba(59, 130, 246, 0.10);
color: var(--text-primary);
}
.cmd-palette-item-body {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.cmd-palette-item-title {
/* Body / Table-Cell (14 px) — Standard-App-Lesegroesse, leicht hervorgehoben. */
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
color: var(--text-primary);
line-height: var(--line-height-snug);
letter-spacing: var(--tracking-body);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cmd-palette-item-sub {
/* Body-SM / Helper (12 px) — sekundaere Information. */
font-size: var(--font-size-xs);
font-weight: var(--font-weight-normal);
color: var(--text-tertiary);
line-height: var(--line-height-snug);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cmd-palette-item-right {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: var(--space-1);
flex-shrink: 0;
max-width: 45%;
}
.cmd-palette-item-meta {
font-size: var(--font-size-xs);
color: var(--text-tertiary);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
/* --- Status-Pills --- */
.cmd-palette-pill {
display: inline-block;
padding: var(--pill-padding-y) var(--pill-padding-x);
border-radius: var(--pill-radius);
font-size: var(--pill-font-size);
font-weight: var(--pill-font-weight);
line-height: 1.4;
letter-spacing: var(--tracking-wide);
white-space: nowrap;
}
.cmd-palette-pill--success { background: var(--pill-bg-success); color: var(--pill-text-success); }
.cmd-palette-pill--warning { background: var(--pill-bg-warning); color: var(--pill-text-warning); }
.cmd-palette-pill--danger { background: var(--pill-bg-danger); color: var(--pill-text-danger); }
.cmd-palette-pill--info { background: var(--pill-bg-info); color: var(--pill-text-info); }
.cmd-palette-pill--neutral { background: var(--pill-bg-neutral); color: var(--pill-text-neutral); }
/* --- Highlight --- */
.cmd-palette-item mark {
background: color-mix(in srgb, var(--color-primary-500) 22%, transparent);
color: inherit;
border-radius: 2px;
padding: 0 2px;
font-weight: var(--font-weight-semibold);
}
/* --- Loading / Error / No-Results --- */
.cmd-palette-noresults {
padding: var(--space-10) var(--space-6);
text-align: center;
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.cmd-palette-noresults-title {
/* h5-Pattern (16 px / Semibold) — Sektions-Heading. */
font-size: var(--font-size-base);
font-weight: var(--font-weight-semibold);
color: var(--text-secondary);
letter-spacing: var(--tracking-body);
}
.cmd-palette-noresults-sub {
/* Body / Helper-Stil. */
font-size: var(--font-size-sm);
color: var(--text-tertiary);
line-height: var(--line-height-relaxed);
}
.cmd-palette-loading {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-3);
padding: var(--space-10) var(--space-6);
color: var(--text-tertiary);
font-size: var(--font-size-sm);
}
.cmd-palette-spinner {
width: 1rem;
height: 1rem;
border-radius: 50%;
border: 2px solid var(--border-default);
border-top-color: var(--color-primary-500);
animation: cmd-spin 700ms linear infinite;
}
@keyframes cmd-spin {
to { transform: rotate(360deg); }
}
.cmd-palette-error {
padding: var(--space-8) var(--space-6);
text-align: center;
color: var(--color-danger-700);
font-size: var(--font-size-sm);
}
[data-theme="dark"] .cmd-palette-error {
color: var(--color-danger-300);
}
/* --- Mobile --- */
@media (max-width: 640px) {
.cmd-palette-overlay {
padding-top: var(--space-4);
padding-left: var(--space-3);
padding-right: var(--space-3);
align-items: stretch;
}
.cmd-palette {
max-height: calc(100vh - var(--space-8));
}
.cmd-palette-header {
padding: var(--space-4) var(--space-5);
}
.cmd-palette-field {
padding: var(--form-padding-y) var(--space-3);
}
.cmd-palette-input {
font-size: var(--font-size-sm);
}
.cmd-palette-filters {
padding: var(--space-3) var(--space-4);
overflow-x: auto;
flex-wrap: nowrap;
scrollbar-width: none;
}
.cmd-palette-filters::-webkit-scrollbar { display: none; }
.cmd-palette-group,
.cmd-palette-item {
padding-left: var(--space-5);
padding-right: var(--space-5);
}
.cmd-palette-item {
padding-top: var(--space-3);
padding-bottom: var(--space-3);
}
.cmd-palette-item-right {
max-width: 35%;
}
/* Auf Mobile nur Pill, Meta entfaellt zugunsten der Lesbarkeit */
.cmd-palette-item-meta {
display: none;
}
}
@media (prefers-reduced-motion: reduce) {
.cmd-palette-spinner { animation-duration: 1500ms; }
.cmd-palette {
transition: none;
transform: none !important;
}
}
/* ============================================
TOAST-SYSTEM
============================================ */
#toast-container {
position: fixed;
top: var(--space-5);
right: var(--space-5);
z-index: var(--z-toast);
display: flex;
flex-direction: column;
gap: var(--space-3);
pointer-events: none;
max-width: var(--toast-width);
width: 100%;
}
.toast-item {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--toast-padding);
border-radius: var(--toast-radius);
box-shadow: var(--toast-shadow);
background: var(--surface-elevated);
border: 1px solid var(--border-subtle);
pointer-events: auto;
opacity: 0;
transform: translateX(100%);
transition: opacity var(--duration-base) var(--ease-out),
transform var(--duration-base) var(--ease-out);
}
.toast-item--visible {
opacity: 1;
transform: translateX(0);
}
.toast-item--exit {
opacity: 0;
transform: translateX(100%);
}
.toast-item-icon {
font-size: var(--icon-md);
flex-shrink: 0;
}
.toast-item-text {
flex: 1;
font-size: var(--font-size-sm);
color: var(--text-primary);
}
.toast-item-close {
background: none;
border: none;
color: var(--text-tertiary);
cursor: pointer;
padding: var(--space-1);
flex-shrink: 0;
font-size: var(--font-size-sm);
transition: color var(--duration-fast) var(--ease-out);
}
.toast-item-close:hover { color: var(--text-primary); }
.toast-item--success .toast-item-icon { color: var(--color-success-600); }
.toast-item--danger .toast-item-icon { color: var(--color-danger-600); }
.toast-item--warning .toast-item-icon { color: var(--color-warning-600); }
.toast-item--info .toast-item-icon { color: var(--color-info-600); }
.toast-item--success { border-left: 3px solid var(--color-success); }
.toast-item--danger { border-left: 3px solid var(--color-danger); }
.toast-item--warning { border-left: 3px solid var(--color-warning); }
.toast-item--info { border-left: 3px solid var(--color-info); }
/* Zentriertes, modales Erfolgs-/Bestätigungs-Overlay (kurz eingeblendet,
mit Close-Button). Erscheint mittig im Viewport, z. B. nach dem Schließen
des E-Mail-Versand-Fensters. */
.confirm-overlay {
position: fixed;
inset: 0;
z-index: var(--z-toast, 1080);
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-4);
background: rgba(15, 23, 42, 0.32);
opacity: 0;
transition: opacity 0.18s ease;
}
.confirm-overlay.is-visible { opacity: 1; }
.confirm-card {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: var(--space-4);
max-width: 24rem;
width: 100%;
padding: var(--space-7, 28px) var(--space-6, 24px) var(--space-6, 24px);
background: var(--surface-elevated);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg, 14px);
box-shadow: var(--shadow-xl, 0 24px 56px rgba(0, 0, 0, 0.24));
transform: translateY(10px) scale(0.97);
transition: transform 0.18s ease;
}
.confirm-overlay.is-visible .confirm-card { transform: none; }
.confirm-card-badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 3.5rem;
height: 3.5rem;
border-radius: 50%;
background: var(--color-success-600);
color: var(--text-inverse, #fff);
font-size: 2rem;
line-height: 1;
}
.confirm-card--warning .confirm-card-badge {
background: var(--color-warning-600);
}
.confirm-card-text {
color: var(--text-primary);
font-size: var(--font-size-base, 1rem);
font-weight: var(--font-weight-semibold, 600);
line-height: 1.4;
}
.confirm-card-close {
position: absolute;
top: var(--space-2, 8px);
right: var(--space-2, 8px);
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.75rem;
height: 1.75rem;
background: none;
border: 0;
padding: 0;
margin: 0;
color: var(--text-tertiary);
font-size: 0.9rem;
line-height: 1;
cursor: pointer;
border-radius: var(--radius-sm, 6px);
transition: color 0.12s ease, background 0.12s ease;
}
.confirm-card-close:hover { color: var(--text-primary); background: color-mix(in srgb, var(--text-primary) 8%, transparent); }
/* ============================================
ALERTS
============================================ */
.alert {
border-radius: var(--radius-lg);
padding: var(--space-4);
font-size: var(--font-size-sm);
border: 1px solid transparent;
}
.alert-success {
background: var(--color-success-50);
color: var(--color-success-800);
border-color: var(--color-success-200);
}
.alert-warning {
background: var(--color-warning-50);
color: var(--color-warning-800);
border-color: var(--color-warning-200);
}
.alert-danger {
background: var(--color-danger-50);
color: var(--color-danger-800);
border-color: var(--color-danger-200);
}
.alert-info {
background: var(--color-info-50);
color: var(--color-info-800);
border-color: var(--color-info-200);
}
/* ============================================
SOFT ALERTS – Status-Meldungen, dezent.
Nutzen Token-Statusfarben mit color-mix() fuer Tint/Border.
Verwendung: ...
============================================ */
.alert-soft {
padding: 0.75rem 1rem;
border-radius: var(--radius-md, 8px);
border: 1px solid transparent;
font-size: var(--font-size-sm);
line-height: 1.5;
}
.alert-soft--success {
color: var(--color-success-600);
background: color-mix(in srgb, var(--color-success-600) 8%, transparent);
border-color: color-mix(in srgb, var(--color-success-600) 25%, transparent);
}
.alert-soft--warning {
color: var(--color-warning-600);
background: color-mix(in srgb, var(--color-warning-600) 8%, transparent);
border-color: color-mix(in srgb, var(--color-warning-600) 25%, transparent);
}
.alert-soft--danger {
color: var(--color-danger-600);
background: color-mix(in srgb, var(--color-danger-600) 8%, transparent);
border-color: color-mix(in srgb, var(--color-danger-600) 25%, transparent);
}
.alert-soft--info {
color: var(--color-info-600);
background: color-mix(in srgb, var(--color-info-600) 8%, transparent);
border-color: color-mix(in srgb, var(--color-info-600) 25%, transparent);
}
.alert-soft--neutral {
color: var(--text-muted);
background: color-mix(in srgb, var(--color-neutral-500) 8%, transparent);
border-color: color-mix(in srgb, var(--color-neutral-500) 25%, transparent);
}
/* ============================================
EMPTY STATE
============================================ */
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: var(--space-16) var(--space-6);
color: var(--text-secondary);
gap: var(--space-4);
}
.empty-state-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 4.5rem;
height: 4.5rem;
border-radius: var(--radius-full);
background: var(--surface-sunken);
color: var(--text-tertiary);
font-size: 1.75rem;
margin-bottom: var(--space-2);
}
.empty-state-title {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-semibold);
letter-spacing: var(--tracking-heading);
color: var(--text-primary);
margin: 0;
}
.empty-state-description {
font-size: var(--font-size-sm);
max-width: var(--prose-width-narrow);
margin: 0 auto;
line-height: var(--line-height-relaxed);
color: var(--text-secondary);
}
.empty-state-action {
margin-top: var(--space-2);
display: inline-flex;
gap: var(--space-2);
}
/* Inline-Variante (in Karten / kleinen Containern) */
.empty-state--inline {
padding: var(--space-8) var(--space-4);
}
.empty-state--inline .empty-state-icon {
width: 3rem;
height: 3rem;
font-size: 1.25rem;
}
/* ============================================
SKELETON LOADING
============================================ */
.skeleton {
background: linear-gradient(
90deg,
var(--skeleton-base) 25%,
var(--skeleton-shine) 50%,
var(--skeleton-base) 75%
);
background-size: 200% 100%;
animation: skeleton-shimmer 1.5s infinite;
border-radius: var(--radius-md);
}
.skeleton-text {
height: var(--font-size-sm);
margin-bottom: var(--space-2);
}
.skeleton-text--short { width: 60%; }
.skeleton-text--long { width: 90%; }
.skeleton-avatar {
width: var(--space-11);
height: var(--space-11);
border-radius: var(--radius-md);
}
.skeleton-card {
padding: var(--card-padding-md);
border: var(--card-border);
border-radius: var(--card-radius);
}
.skeleton-row {
height: var(--table-row-height);
margin-bottom: 1px;
}
@keyframes skeleton-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* ============================================
TABELLEN – Design-System-Klassen
Linear/Stripe-Stil:
- Keine vertikalen Borders
- Header transparent, klein, gedaempft
- Hover als hauchdunne Toenung
- Action-Spalte rechts, Money rechtsbuendig
============================================ */
.ds-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
background: transparent;
}
.ds-table thead th,
.ds-table-header {
font-size: var(--table-header-size);
font-weight: var(--font-weight-medium);
text-transform: uppercase;
letter-spacing: var(--table-header-letter-spacing);
color: var(--table-header-color);
padding: var(--table-cell-padding-y) var(--table-cell-padding-x);
border-bottom: var(--table-border);
background: var(--table-header-bg);
text-align: left;
white-space: nowrap;
}
.ds-table tbody td,
.ds-table-cell {
font-size: var(--font-size-sm);
color: var(--text-primary);
padding: var(--table-cell-padding-y) var(--table-cell-padding-x);
vertical-align: middle;
border-bottom: var(--table-border);
overflow-wrap: break-word;
word-break: break-word;
transition: background-color var(--duration-fast) var(--ease-out);
}
.ds-table tbody tr:hover td,
.ds-table-row:hover .ds-table-cell,
tr.ds-table-row:hover {
background: var(--table-row-hover-bg);
}
/* Letzte Zeile ohne Bottom-Border */
.ds-table tbody tr:last-child td {
border-bottom: none;
}
.ds-table-cell--prominent {
color: var(--text-primary);
font-weight: var(--font-weight-medium);
}
.ds-table-cell--secondary,
.ds-table-cell--muted {
color: var(--text-tertiary);
font-variant-numeric: tabular-nums;
}
/* Money-Cell: tabular, rechtsbuendig */
.ds-table-cell--money,
.cell-money {
text-align: right;
font-variant-numeric: tabular-nums;
font-weight: var(--font-weight-medium);
white-space: nowrap;
}
.ds-table-cell a,
.ds-table-cell-link {
color: var(--text-primary);
text-decoration: none;
font-weight: var(--font-weight-medium);
transition: color var(--duration-fast) var(--ease-out);
}
.ds-table-cell a:hover,
.ds-table-cell-link:hover {
color: var(--accent-on-light, var(--color-primary-600));
text-decoration: none;
}
/* Icon-Buttons in DS-Zellen: .ds-table-cell a erzwingt sonst --text-primary (höhere Spezifität). */
.ds-table-cell a.icon-btn,
.ds-table-cell-link.icon-btn {
color: var(--icon-btn-color);
font-weight: var(--font-weight-normal);
text-decoration: none;
transition: background-color var(--duration-fast) var(--ease-out),
color var(--duration-fast) var(--ease-out),
transform var(--duration-fast) var(--ease-out);
}
.ds-table-cell a.icon-btn:not(.icon-btn--danger):not(.icon-btn--primary):hover,
.ds-table-cell a.icon-btn:not(.icon-btn--danger):not(.icon-btn--primary):focus-visible,
.ds-table-cell-link.icon-btn:not(.icon-btn--danger):not(.icon-btn--primary):hover,
.ds-table-cell-link.icon-btn:not(.icon-btn--danger):not(.icon-btn--primary):focus-visible {
color: var(--icon-btn-color-hover);
text-decoration: none;
}
.ds-table-cell a.icon-btn--danger:hover,
.ds-table-cell a.icon-btn--danger:focus-visible,
.ds-table-cell-link.icon-btn--danger:hover,
.ds-table-cell-link.icon-btn--danger:focus-visible {
color: var(--color-danger-600);
}
.ds-table-cell a.icon-btn--primary:hover,
.ds-table-cell a.icon-btn--primary:focus-visible,
.ds-table-cell-link.icon-btn--primary:hover,
.ds-table-cell-link.icon-btn--primary:focus-visible {
color: var(--accent-on-light, var(--color-primary-700));
}
/* ============================================
DOUBLE-ROW CELL PATTERN (CRM-Standard)
Pro Zelle: Primary bold + Context muted darunter.
Z.B. Firmenname + Kundennummer.
Z.B. Rechnungsnummer + Datum.
============================================ */
.cell-stacked {
display: flex;
flex-direction: column;
gap: 2px;
line-height: 1.3;
}
.cell-stacked > .cell-primary {
font-weight: var(--font-weight-medium);
color: var(--text-primary);
}
.cell-stacked > .cell-meta {
font-size: var(--font-size-2xs);
color: var(--text-tertiary);
font-variant-numeric: tabular-nums;
}
/*
* Rechnungsliste „Offen“ (Design-Tokens):
* regulär offen: Standard-Text
* Teilzahlung: Orange (--color-warning)
* überfällig: Rot (--text-danger)
* gezahlt: Grün (--text-success)
*/
#invoices-desktop .invoice-open-stack--paid {
color: var(--text-success);
}
#invoices-desktop .invoice-open-stack--open {
color: var(--text-primary);
}
#invoices-desktop .invoice-open-stack--partial {
color: var(--color-warning);
}
#invoices-desktop .invoice-open-stack--overdue {
color: var(--text-danger);
}
#invoices-desktop .invoice-open-stack--draft {
color: var(--color-purple);
}
#invoices-desktop .invoice-open-stack--paid .invoice-open-meta,
#invoices-desktop .invoice-open-stack--partial .invoice-open-meta,
#invoices-desktop .invoice-open-stack--overdue .invoice-open-meta,
#invoices-desktop .invoice-open-stack--draft .invoice-open-meta {
color: inherit;
opacity: 0.88;
}
#invoices-desktop .invoice-open-stack--open .invoice-open-meta {
color: var(--text-tertiary);
opacity: 1;
}
/* Kleiner Punkt: ueberfaellige Rechnungen (Firmenliste, Tab/Karte) */
.cell-overdue-dot {
font-size: 0.5rem;
color: var(--color-danger-500);
vertical-align: middle;
}
/* ============================================
ACTION-ZONE (rechts in Tabellen)
Rechtsbuendig, Icon-Buttons mit kleinem Gap.
============================================ */
.cell-actions,
.cell-actions-zone {
text-align: right;
white-space: nowrap;
width: 1px;
}
.cell-actions > .icon-btn,
.cell-actions-zone > .icon-btn {
margin-left: 2px;
}
.cell-actions > .dropdown,
.cell-actions-zone > .dropdown {
margin-left: 2px;
display: inline-block;
vertical-align: middle;
}
/* ============================================
SAVED VIEWS / QUICK FILTERS
Tab-Leiste oberhalb von Listen (Linear-Style).
"Alle | Offen | Ueberfaellig | Bezahlt"
============================================ */
.saved-views {
display: inline-flex;
align-items: center;
gap: var(--space-1);
padding: 4px;
background: var(--surface-sunken);
border-radius: var(--radius-md);
margin-bottom: var(--space-3);
}
.saved-views .saved-view {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: 4px var(--space-3);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-medium);
color: var(--text-secondary);
background: transparent;
border: none;
border-radius: var(--radius-sm);
cursor: pointer;
text-decoration: none;
transition: all var(--duration-fast) var(--ease-out);
min-height: var(--touch-target-min);
}
.saved-views .saved-view:hover {
background: var(--icon-btn-bg-hover);
color: var(--text-primary);
}
.saved-views .saved-view.is-active {
background: var(--surface-card);
color: var(--text-primary);
box-shadow: var(--shadow-xs);
}
.saved-views .saved-view-count {
font-size: 10px;
font-weight: var(--font-weight-medium);
padding: 0 6px;
border-radius: var(--radius-full);
background: var(--pill-bg-neutral);
color: var(--pill-text-neutral);
min-width: 18px;
text-align: center;
line-height: 16px;
}
/* ============================================
BULK-ACTION-BAR
Erscheint sticky oben sobald Eintraege selektiert sind.
============================================ */
.bulk-action-bar {
position: sticky;
top: calc(var(--topbar-height, 60px) + var(--space-2));
z-index: var(--z-sticky);
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-2) var(--space-4);
background: var(--surface-card);
border: 1px solid var(--border-default);
border-radius: var(--radius-md);
box-shadow: var(--shadow-md);
margin-bottom: var(--space-3);
animation: bulk-bar-slide-in var(--duration-base) var(--ease-emphasis);
}
.bulk-action-bar[hidden] { display: none; }
.bulk-action-bar .bulk-count {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
color: var(--text-primary);
}
.bulk-action-bar .bulk-actions {
display: inline-flex;
align-items: center;
gap: var(--space-2);
margin-left: auto;
}
.bulk-action-bar .bulk-clear {
background: transparent;
border: none;
color: var(--text-tertiary);
cursor: pointer;
padding: 4px 8px;
font-size: var(--font-size-xs);
}
.bulk-action-bar .bulk-clear:hover {
color: var(--text-primary);
}
@keyframes bulk-bar-slide-in {
from { opacity: 0; transform: translateY(-8px); }
to { opacity: 1; transform: translateY(0); }
}
/* ============================================
TABLE-SUMMARY-ROW
Footer-Zeile mit Anzahl, Summen, Durchschnitt.
============================================ */
.ds-table tfoot td,
.ds-table-summary {
font-weight: var(--font-weight-medium);
color: var(--text-secondary);
background: var(--surface-sunken);
border-top: 1px solid var(--border-default);
padding: var(--table-cell-padding-y) var(--table-cell-padding-x);
font-variant-numeric: tabular-nums;
}
.ds-table-summary--money {
text-align: right;
color: var(--text-primary);
font-weight: var(--font-weight-semibold);
}
/* ============================================
INLINE-EDIT (CSS)
.cell-editable: dezenter Hover-Hinweis auf editierbare Tabellenzelle.
============================================ */
.cell-editable {
position: relative;
cursor: text;
border-radius: var(--radius-sm);
transition: background-color var(--duration-fast) var(--ease-out),
box-shadow var(--duration-fast) var(--ease-out);
}
.cell-editable:hover {
background: var(--icon-btn-bg-hover);
box-shadow: inset 0 0 0 1px var(--border-default);
}
.cell-editable.is-editing {
background: var(--surface-card);
box-shadow: inset 0 0 0 2px var(--accent-on-light, var(--color-primary-500));
}
.cell-editable::after {
content: '';
position: absolute;
top: 6px;
right: 6px;
width: 10px;
height: 10px;
border-right: 1px solid var(--text-tertiary);
border-bottom: 1px solid var(--text-tertiary);
opacity: 0;
transform: rotate(45deg);
transition: opacity var(--duration-fast) var(--ease-out);
}
.cell-editable:hover::after {
opacity: 0.4;
}
/* ============================================
BOOTSTRAP-TABLE-OVERRIDE
Bestehende .table-Klassen sollen das gleiche
ruhige Bild liefern wie unsere ds-tables.
============================================ */
.table {
--bs-table-bg: transparent;
--bs-table-color: var(--text-primary);
--bs-table-border-color: var(--table-divider-color);
--bs-table-hover-bg: var(--table-row-hover-bg);
--bs-table-hover-color: var(--text-primary);
}
.table > thead {
font-size: var(--table-header-size);
font-weight: var(--font-weight-medium);
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--table-header-color);
}
.table > thead > tr > th {
border-bottom: var(--table-border);
background: var(--table-header-bg);
padding-top: var(--table-cell-padding-y);
padding-bottom: var(--table-cell-padding-y);
font-weight: var(--font-weight-medium);
}
.table > tbody > tr > td {
border-bottom: var(--table-border);
padding-top: var(--table-cell-padding-y);
padding-bottom: var(--table-cell-padding-y);
vertical-align: middle;
}
.table > tbody > tr:last-child > td {
border-bottom: none;
}
/* Bootstrap setzt .table-hover via --bs-table-hover-bg, das passt jetzt. */
/* Sortier-Header (.overview-table): Kopftext neutral, Akzent nur Icons */
.overview-table th.sortable-col .sort-link {
color: var(--table-header-color);
text-decoration: none;
font-weight: inherit;
}
.overview-table th.sortable-col .sort-link:hover {
color: var(--table-header-color);
}
.overview-table th.sortable-col .sort-link:hover .bi-caret-up-fill,
.overview-table th.sortable-col .sort-link:hover .bi-caret-down-fill {
color: var(--text-link-hover);
}
/* ============================================
DOKUMENT-BUTTONS (vereinheitlicht)
============================================ */
.document-creation-buttons {
padding-top: var(--space-3);
border-top: 1px solid var(--color-neutral-100);
margin-top: var(--space-3);
}
.document-creation-buttons .btn {
font-size: var(--font-size-xs);
font-weight: var(--font-weight-medium);
border-radius: var(--radius-md);
}
/* ============================================
SPINNER ACCESSIBILITY
============================================ */
.spinner-border:not(:has(.visually-hidden))::after {
content: 'Laden…';
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.spinner-border {
position: relative;
}
/* ============================================
SKIP-LINK (Accessibility)
============================================ */
.skip-link {
position: absolute;
top: -100%;
left: var(--space-4);
z-index: var(--z-tooltip-bs);
padding: var(--space-2) var(--space-4);
background: var(--color-primary-600);
color: var(--text-on-primary);
border-radius: var(--radius-md);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
text-decoration: none;
transition: top var(--duration-fast) var(--ease-out);
}
.skip-link:focus {
top: var(--space-2);
color: var(--text-on-primary);
}
/* ============================================
GLOBAL FOCUS RING
============================================ */
:focus-visible {
outline: 2px solid var(--color-primary-500);
outline-offset: var(--focus-ring-offset);
}
.kpi-card:focus-visible,
.entity-card:focus-visible,
.quick-action-btn:focus-visible {
box-shadow: var(--focus-ring);
outline: none;
}
/* ============================================
DARK MODE – KOMPONENTEN-OVERRIDES
Elemente die noch nicht vollstaendig
ueber semantische Tokens gesteuert werden.
============================================ */
[data-theme="dark"] .card,
[data-theme="dark"] .widget-card {
background: var(--surface-card);
border-color: rgba(255, 255, 255, 0.08);
color: var(--text-primary);
}
[data-theme="dark"] .card-header {
background: rgba(255, 255, 255, 0.03);
border-color: rgba(255, 255, 255, 0.06);
color: var(--text-primary);
}
[data-theme="dark"] .company-tabs {
background: var(--surface-card);
}
[data-theme="dark"] .company-card,
[data-theme="dark"] .contact-card {
background: var(--surface-card);
border-color: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .company-card.border-secondary,
[data-theme="dark"] .contact-card.border-secondary,
[data-theme="dark"] .company-card.bg-light,
[data-theme="dark"] .contact-card.bg-light {
background-color: var(--surface-sunken);
border-color: rgba(255, 255, 255, 0.06);
}
[data-theme="dark"] .dropdown-menu {
background: var(--surface-elevated);
border-color: rgba(255, 255, 255, 0.1);
}
[data-theme="dark"] .dropdown-item {
color: var(--text-primary);
}
[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus {
background: rgba(255, 255, 255, 0.06);
color: var(--text-primary);
}
[data-theme="dark"] .dropdown-divider {
border-color: rgba(255, 255, 255, 0.06);
}
[data-theme="dark"] .modal-content {
background: var(--surface-elevated);
border-color: rgba(255, 255, 255, 0.1);
color: var(--text-primary);
}
[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer {
border-color: rgba(255, 255, 255, 0.06);
}
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
background-color: var(--form-bg);
border-color: var(--form-border);
color: var(--text-primary);
}
[data-theme="dark"] .form-control:disabled,
[data-theme="dark"] .form-control[readonly] {
background-color: var(--form-bg-readonly);
color: var(--text-secondary);
}
[data-theme="dark"] .input-group-text {
background: var(--surface-sunken);
border-color: var(--form-border);
color: var(--text-tertiary);
}
[data-theme="dark"] .table {
color: var(--text-primary);
}
[data-theme="dark"] .table > :not(caption) > * > * {
background-color: transparent;
color: var(--text-primary);
border-bottom-color: rgba(255, 255, 255, 0.06);
}
[data-theme="dark"] .table-hover > tbody > tr:hover > * {
background-color: var(--table-row-hover-bg);
}
[data-theme="dark"] .text-muted {
color: var(--text-tertiary) !important;
}
[data-theme="dark"] .border-bottom {
border-color: rgba(255, 255, 255, 0.06) !important;
}
[data-theme="dark"] .btn-ghost {
color: var(--text-secondary);
}
[data-theme="dark"] .btn-ghost:hover {
background: rgba(255, 255, 255, 0.08);
color: var(--text-primary);
}
[data-theme="dark"] .btn-secondary {
background: var(--color-neutral-700);
border-color: var(--color-neutral-600);
color: var(--text-primary);
}
[data-theme="dark"] .btn-secondary:hover {
background: var(--color-neutral-600);
border-color: var(--color-neutral-500);
}
[data-theme="dark"] .sticky-header {
background: var(--surface-sunken);
border-color: var(--border-subtle);
}
[data-theme="dark"] .page-header h1 {
color: var(--text-primary);
}
[data-theme="dark"] .pagination .page-link {
background: var(--surface-card);
border-color: rgba(255, 255, 255, 0.08);
color: var(--text-primary);
}
[data-theme="dark"] .pagination .page-item.active .page-link {
background: var(--color-primary-600);
border-color: var(--color-primary-600);
}
[data-theme="dark"] .alert {
color: var(--text-primary);
}
[data-theme="dark"] .badge {
border: 1px solid rgba(255, 255, 255, 0.1);
}
[data-theme="dark"] .info-label {
color: var(--text-tertiary);
}
[data-theme="dark"] .info-value {
color: var(--text-primary);
}
[data-theme="dark"] .document-creation-buttons {
border-color: rgba(255, 255, 255, 0.06);
}
[data-theme="dark"] .entity-avatar {
background-color: var(--color-neutral-700);
color: var(--color-primary-300);
}
[data-theme="dark"] .search-input-container .form-control {
background-color: var(--form-bg);
color: var(--text-primary);
}
/* ============================================
LIST PATTERN
Einheitliches Skelett fuer Listen-Seiten:
page-header > list-toolbar > saved-views? > list-card > pagination
============================================ */
.list-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
margin-bottom: var(--space-4);
flex-wrap: wrap;
}
.list-toolbar > .list-toolbar-start,
.list-toolbar > .list-toolbar-end {
display: flex;
align-items: center;
gap: var(--space-3);
flex-wrap: wrap;
}
.list-toolbar > .list-toolbar-start {
flex: 1 1 auto;
min-width: 0;
}
.list-search {
position: relative;
flex: 1 1 320px;
max-width: 420px;
min-width: 0;
}
.list-search > .form-control {
height: var(--form-height);
padding-left: calc(var(--space-3) + 18px + var(--space-2));
padding-right: calc(var(--space-3) + 28px);
}
/* Eigenes Clear-Icon: natives X von type="search" unterbinden (falls noch verwendet) */
.list-search input[type="search"]::-webkit-search-decoration,
.list-search input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: none;
appearance: none;
}
.list-search > .list-search-icon {
position: absolute;
left: var(--space-3);
top: 50%;
transform: translateY(-50%);
color: var(--text-tertiary);
font-size: 1rem;
pointer-events: none;
}
.list-search > .list-search-clear,
.list-search > .list-search-spinner {
position: absolute;
right: var(--space-2);
top: 50%;
transform: translateY(-50%);
display: none;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border: none;
background: transparent;
color: var(--text-tertiary);
border-radius: var(--radius-sm);
cursor: pointer;
}
.list-search > .list-search-clear:hover {
background: var(--icon-btn-bg-hover);
color: var(--text-primary);
}
.list-search.is-loading > .list-search-spinner {
display: inline-flex;
}
.list-search.has-value:not(.is-loading) > .list-search-clear {
display: inline-flex;
}
.list-search > .list-search-spinner > .spinner-border {
width: 14px;
height: 14px;
border-width: 2px;
}
form.list-toolbar-form--documents.company-doc-toolbar {
width: 100%;
}
form.list-toolbar-form--documents .list-search.list-search--documents {
flex: 1 1 auto;
max-width: none;
}
form.list-toolbar-form--documents.company-doc-toolbar .btn.list-doc-toolbar-reset {
--bs-btn-padding-y: 0;
--bs-btn-padding-x: var(--space-2);
height: var(--form-height);
min-height: var(--form-height);
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
font-size: var(--form-font-size);
line-height: 1.2;
white-space: normal;
border-radius: var(--form-radius);
}
.list-card {
background: var(--surface-card);
border: 1px solid var(--border-subtle);
border-radius: var(--card-radius);
box-shadow: var(--shadow-xs);
overflow: hidden;
margin-bottom: var(--space-4);
}
.list-card > .list-card-table-wrap {
overflow-x: auto;
}
.list-card > .list-card-table-wrap > .table,
.list-card > .list-card-table-wrap > .ds-table {
margin-bottom: 0;
}
.list-card > .list-card-empty {
padding: var(--space-8) var(--space-6);
}
.list-card > .list-card-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
padding: var(--space-3) var(--space-4);
border-top: 1px solid var(--border-subtle);
background: var(--surface-sunken);
font-size: var(--font-size-xs);
color: var(--text-tertiary);
flex-wrap: wrap;
}
.list-card > .list-card-footer > .pagination {
margin-bottom: 0;
}
.list-summary {
font-variant-numeric: tabular-nums;
}
/* Mobile-Cards einheitlich */
.list-mobile-cards {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-3);
}
@media (min-width: 768px) {
.list-mobile-cards {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1200px) {
.list-mobile-cards {
grid-template-columns: repeat(3, 1fr);
}
}
.list-mobile-card {
background: var(--surface-card);
border: 1px solid var(--border-subtle);
border-radius: var(--card-radius);
box-shadow: var(--shadow-xs);
padding: var(--card-padding-md);
display: flex;
flex-direction: column;
gap: var(--space-3);
transition: transform var(--duration-fast) var(--ease-out),
box-shadow var(--duration-fast) var(--ease-out);
}
.list-mobile-card:hover {
transform: translateY(-1px);
box-shadow: var(--shadow-sm);
}
.list-mobile-card.is-inactive {
opacity: 0.7;
background: var(--surface-sunken);
}
.list-mobile-card > .list-mobile-card-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-2);
padding-bottom: var(--space-3);
border-bottom: 1px solid var(--border-subtle);
}
.list-mobile-card > .list-mobile-card-header > .list-mobile-card-identity {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
flex: 1;
}
.list-mobile-card .list-mobile-card-title {
font-weight: var(--font-weight-medium);
color: var(--text-primary);
font-size: var(--font-size-base);
text-decoration: none;
overflow-wrap: anywhere;
}
.list-mobile-card > .list-mobile-card-header > .list-mobile-card-identity > .list-mobile-card-meta {
font-size: var(--font-size-xs);
color: var(--text-tertiary);
}
.list-mobile-card > .list-mobile-card-header > .list-mobile-card-actions {
display: flex;
gap: 2px;
flex-shrink: 0;
}
.list-mobile-card > .list-mobile-card-body {
display: flex;
flex-direction: column;
gap: var(--space-2);
font-size: var(--font-size-sm);
color: var(--text-secondary);
}
.list-mobile-card > .list-mobile-card-body > .list-mobile-card-row {
display: flex;
align-items: center;
gap: var(--space-2);
}
.list-mobile-card > .list-mobile-card-body > .list-mobile-card-row > .bi {
color: var(--text-tertiary);
width: 16px;
text-align: center;
}
.list-mobile-card > .list-mobile-card-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-2);
padding-top: var(--space-3);
border-top: 1px solid var(--border-subtle);
}
/* Links in Karten in Textfarbe statt Browser-Blau – konsistent mit der
Tabellen-/Belegkarten-Darstellung. Klick-Affordanz via Hover-Unterstreichung. */
.list-mobile-card .list-mobile-card-body a:not(.status-pill) {
color: var(--text-secondary);
text-decoration: none;
}
.list-mobile-card .list-mobile-card-body a:not(.status-pill):hover {
text-decoration: underline;
}
/* Klickbare Karte: oeffnet den Datensatz wie eine Tabellenzeile. */
.list-mobile-card.card-clickable {
cursor: pointer;
}
/* Badge-Zeile unter Titel/Meta (z. B. Status-Pill, aus dem Actions-Bereich
nach unten verschoben, damit oben rechts die Aktions-Icons stehen). */
.list-mobile-card > .list-mobile-card-header > .list-mobile-card-identity > .list-mobile-card-badges {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin-top: 2px;
}
/* Skeleton-Mobile-Card waehrend Live-Search */
.list-mobile-card.is-skeleton {
pointer-events: none;
}
.list-mobile-card.is-skeleton > .list-mobile-card-header,
.list-mobile-card.is-skeleton > .list-mobile-card-body,
.list-mobile-card.is-skeleton > .list-mobile-card-footer {
border-color: transparent;
}
[data-theme="dark"] .list-card,
[data-theme="dark"] .list-mobile-card {
background: var(--surface-card);
border-color: rgba(255, 255, 255, 0.06);
}
[data-theme="dark"] .list-card > .list-card-footer {
background: rgba(255, 255, 255, 0.02);
border-top-color: rgba(255, 255, 255, 0.06);
}
/* Firmenliste Desktop: Firma 40 %, uebrige sechs Spalten je 10 % (Summe 100 %) */
#companies-desktop.ds-table--companies {
table-layout: fixed;
width: 100%;
}
#companies-desktop.ds-table--companies thead th:nth-child(1) { width: 40%; }
#companies-desktop.ds-table--companies thead th:nth-child(2),
#companies-desktop.ds-table--companies thead th:nth-child(3),
#companies-desktop.ds-table--companies thead th:nth-child(4),
#companies-desktop.ds-table--companies thead th:nth-child(5),
#companies-desktop.ds-table--companies thead th:nth-child(6),
#companies-desktop.ds-table--companies thead th:nth-child(7) { width: 10%; }
#companies-desktop.ds-table--companies tbody td.ds-table-cell--company-name {
overflow: hidden;
}
#companies-desktop.ds-table--companies tbody td.ds-table-cell--company-name .cell-stacked {
min-width: 0;
}
#companies-desktop.ds-table--companies tbody td.ds-table-cell--contacts {
white-space: nowrap;
}
/* Angebote / AB / Lieferschein / Rechnungen (Desktop): feste Spaltenaufteilung */
#quotes-desktop.ds-table,
#oc-desktop.ds-table,
#dn-desktop.ds-table,
#invoices-desktop.ds-table {
table-layout: fixed;
width: 100%;
}
/* Angebote: 7 Spalten — Datum, Nummer, Kunde, Titel(auto), Verkaufspreis, Status, Aktionen. */
#quotes-desktop.ds-table thead th:nth-child(1) { width: 6.5rem; }
#quotes-desktop.ds-table thead th:nth-child(2) { width: 8.5rem; }
#quotes-desktop.ds-table thead th:nth-child(3) { width: 14rem; }
#quotes-desktop.ds-table thead th:nth-child(5) { width: 9rem; }
#quotes-desktop.ds-table thead th:nth-child(6) { width: 8rem; }
#quotes-desktop.ds-table thead th:nth-child(7),
#quotes-desktop.ds-table tbody td.cell-actions {
width: 11rem;
box-sizing: border-box;
white-space: nowrap;
}
/* Auftragsbestätigungen: 8 Spalten — Datum, Nummer, Kunde, Titel(auto), Verkaufspreis, Abrechnung, Status, Aktionen. */
#oc-desktop.ds-table thead th:nth-child(1) { width: 6.5rem; }
#oc-desktop.ds-table thead th:nth-child(2) { width: 8.5rem; }
#oc-desktop.ds-table thead th:nth-child(3) { width: 13rem; }
#oc-desktop.ds-table thead th:nth-child(5) { width: 9rem; }
#oc-desktop.ds-table thead th:nth-child(6) { width: 8.5rem; }
#oc-desktop.ds-table thead th:nth-child(7) { width: 8rem; }
#oc-desktop.ds-table thead th:nth-child(8),
#oc-desktop.ds-table tbody td.cell-actions {
width: 11rem;
box-sizing: border-box;
white-space: nowrap;
}
/* Lieferscheine: 6 Spalten — Lieferdatum, Nummer, Empfänger, Titel(auto), Status, Aktionen. */
#dn-desktop.ds-table thead th:nth-child(1) { width: 6.5rem; }
#dn-desktop.ds-table thead th:nth-child(2) { width: 8.5rem; }
#dn-desktop.ds-table thead th:nth-child(3) { width: 15rem; }
#dn-desktop.ds-table thead th:nth-child(5) { width: 8rem; }
#dn-desktop.ds-table thead th:nth-child(6),
#dn-desktop.ds-table tbody td.cell-actions {
width: 11rem;
box-sizing: border-box;
white-space: nowrap;
}
/* Listen-Tabellen: Spaltentitel bei zu schmaler Spalte mit … kuerzen
statt ueberlaufen zu lassen (verhindert den horizontalen Scrollbalken). */
#quotes-desktop.ds-table thead th,
#oc-desktop.ds-table thead th,
#dn-desktop.ds-table thead th,
#invoices-desktop.ds-table thead th {
overflow: hidden;
text-overflow: ellipsis;
}
/* Sortierbarer Kopf: Label truncaten, Sortier-Pfeil sichtbar halten. */
#quotes-desktop.ds-table thead th .ds-table-header-sort,
#oc-desktop.ds-table thead th .ds-table-header-sort,
#dn-desktop.ds-table thead th .ds-table-header-sort,
#invoices-desktop.ds-table thead th .ds-table-header-sort {
display: inline-flex;
align-items: center;
max-width: 100%;
}
#quotes-desktop.ds-table thead th .sort-link__label,
#oc-desktop.ds-table thead th .sort-link__label,
#dn-desktop.ds-table thead th .sort-link__label,
#invoices-desktop.ds-table thead th .sort-link__label {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}
#quotes-desktop.ds-table thead th .ds-table-header-sort .bi,
#oc-desktop.ds-table thead th .ds-table-header-sort .bi,
#dn-desktop.ds-table thead th .ds-table-header-sort .bi,
#invoices-desktop.ds-table thead th .ds-table-header-sort .bi {
flex-shrink: 0;
}
/* Titel-Spalte (4, Freitext): bei zu schmaler Spalte mit … kuerzen statt
ueberlaufen/umbrechen — verschafft der Tabelle Breiten-Spielraum. */
#quotes-desktop.ds-table tbody td:nth-child(4),
#oc-desktop.ds-table tbody td:nth-child(4),
#dn-desktop.ds-table tbody td:nth-child(4),
#invoices-desktop.ds-table tbody td:nth-child(4) {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Gestapelte Zellen (Kunde, Geld …) zeilenweise kuerzen — NICHT die Nummer (Spalte 2). */
#quotes-desktop.ds-table tbody td:not(:nth-child(2)) .cell-stacked > *,
#oc-desktop.ds-table tbody td:not(:nth-child(2)) .cell-stacked > *,
#dn-desktop.ds-table tbody td:not(:nth-child(2)) .cell-stacked > *,
#invoices-desktop.ds-table tbody td:not(:nth-child(2)) .cell-stacked > * {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Datum-Spalte (1) nie umbrechen. */
#quotes-desktop.ds-table tbody td:nth-child(1),
#oc-desktop.ds-table tbody td:nth-child(1),
#dn-desktop.ds-table tbody td:nth-child(1),
#invoices-desktop.ds-table tbody td:nth-child(1) {
white-space: nowrap;
}
/* Listenansicht: Tabelle erst ab 1400px (= Bootstrap xxl), darunter Kartenansicht. */
.list-view-table { display: none; }
.list-view-cards { display: block; }
@media (min-width: 1400px) {
.list-view-table { display: block; }
.list-view-cards { display: none; }
}
/* Rechnungen: 9 Spalten — Datum, Nummer, Kunde, Titel(auto), Fällig, Betrag, Offen, Status, Aktionen;
Aktion breiter wegen 5 Icons (inkl. XRechnung-XML-Download). */
#invoices-desktop.ds-table thead th:nth-child(1) { width: 6.5rem; }
#invoices-desktop.ds-table thead th:nth-child(2) { width: 8.5rem; }
#invoices-desktop.ds-table thead th:nth-child(3) { width: 11rem; }
#invoices-desktop.ds-table thead th:nth-child(5) { width: 6.5rem; }
#invoices-desktop.ds-table thead th:nth-child(6),
#invoices-desktop.ds-table thead th:nth-child(7) { width: 8rem; }
#invoices-desktop.ds-table thead th:nth-child(8) { width: 7.5rem; }
#invoices-desktop.ds-table thead th:nth-child(9),
#invoices-desktop.ds-table tbody td.cell-actions {
width: 12.5rem;
box-sizing: border-box;
white-space: nowrap;
}
#invoices-desktop.ds-table tbody td:nth-child(4) .text-truncate {
max-width: 100%;
}
/* Klickbare Tabellenzeile: list-search.js wertet data-href aus. */
tr.row-clickable {
cursor: pointer;
}
tr.row-clickable:hover td {
background: var(--table-row-hover-bg, rgba(0, 0, 0, 0.02));
}
/* Disabled-Variante eines icon-btn, der einen Platzhalter-Status darstellt
(z.B. "kein Projekt verknuepft"). Verhindert Hover-Effekt. */
.icon-btn.is-disabled {
opacity: 0.35;
pointer-events: none;
cursor: not-allowed;
}
/* ============================================
STATUS-INDIKATOR-STREIFEN
Schmaler farbiger Streifen am Zeilenanfang (Desktop: erste Zelle, Mobile: Karte).
Varianten: success, warning, danger, muted.
============================================ */
.ds-table tbody tr.row-status-success > td:first-child,
.ds-table tbody tr.row-status-warning > td:first-child,
.ds-table tbody tr.row-status-danger > td:first-child,
.ds-table tbody tr.row-status-purple > td:first-child,
.ds-table tbody tr.row-status-muted > td:first-child {
position: relative;
}
.ds-table tbody tr.row-status-success > td:first-child {
box-shadow: inset 3px 0 0 var(--color-success);
}
.ds-table tbody tr.row-status-warning > td:first-child {
box-shadow: inset 3px 0 0 var(--color-warning);
}
.ds-table tbody tr.row-status-danger > td:first-child {
box-shadow: inset 3px 0 0 var(--color-danger);
}
.ds-table tbody tr.row-status-purple > td:first-child {
box-shadow: inset 3px 0 0 var(--color-purple);
}
.ds-table tbody tr.row-status-muted > td:first-child {
box-shadow: inset 3px 0 0 var(--color-neutral-400);
}
.list-mobile-card.is-status-success,
.list-mobile-card.is-status-warning,
.list-mobile-card.is-status-danger,
.list-mobile-card.is-status-purple,
.list-mobile-card.is-status-muted {
position: relative;
}
.list-mobile-card.is-status-success {
box-shadow: inset 3px 0 0 var(--color-success);
}
.list-mobile-card.is-status-warning {
box-shadow: inset 3px 0 0 var(--color-warning);
}
.list-mobile-card.is-status-danger {
box-shadow: inset 3px 0 0 var(--color-danger);
}
.list-mobile-card.is-status-purple {
box-shadow: inset 3px 0 0 var(--color-purple);
}
.list-mobile-card.is-status-muted {
box-shadow: inset 3px 0 0 var(--color-neutral-400);
}
/* Dokumentformular: Empfaenger wie im gedruckten Schriftwechsel (recipient_block ohne Landzeile im PDF-Standardpfad) */
.recipient-document-preview-wrap .form-label {
font-weight: var(--font-weight-medium);
}
.recipient-document-preview {
padding: var(--spacing-3, 0.75rem) var(--spacing-4, 1rem);
min-height: 3.75rem;
font-size: var(--font-size-sm, 0.875rem);
line-height: 1.45;
color: var(--text-primary, inherit);
background: var(--surface-sunken, var(--surface-elevated-subtle));
border: 1px solid var(--border-subtle, rgba(148, 163, 184, 0.35));
border-radius: var(--radius-md, 0.375rem);
white-space: normal;
}
.recipient-document-preview .recipient-document-preview__action {
display: inline-flex;
align-items: center;
gap: 0.35rem;
max-width: 100%;
color: inherit;
font-weight: inherit;
text-decoration: none;
border-radius: var(--radius-sm, 2px);
}
.recipient-document-preview .recipient-document-preview__action:hover .recipient-document-preview__action-icon {
color: var(--text-link);
opacity: 1;
}
.recipient-document-preview .recipient-document-preview__action:focus-visible {
outline: 2px solid var(--color-primary-500);
outline-offset: 2px;
}
.recipient-document-preview .recipient-document-preview__action-icon {
flex-shrink: 0;
font-size: 0.68rem;
line-height: 1;
color: var(--text-muted);
opacity: 0.75;
}
[data-theme='dark'] .recipient-document-preview {
border-color: var(--border-subtle);
}
.recipient-document-preview-wrap .form-text {
color: var(--text-muted);
}
/* ============================================
PRINT STYLES
Blendet UI-Chrome aus, optimiert fuer Papier
============================================ */
/* ============================================
Dokument-/Projektkarten (klappbare Listen)
============================================ */
.project-doc-cards .card-header.project-doc-cards-header-wrap {
background-color: var(--bs-card-cap-bg, var(--bs-secondary-bg));
border-bottom: 1px solid var(--bs-card-border-color, var(--bs-border-color-translucent));
}
[data-theme="dark"] .project-doc-cards .card-header.project-doc-cards-header-wrap {
background-color: rgba(255, 255, 255, 0.03);
border-bottom-color: rgba(255, 255, 255, 0.06);
}
.project-doc-cards-toggle-btn {
display: flex;
align-items: center;
gap: var(--space-2, 0.5rem);
flex: 1 1 auto;
margin: 0;
padding: 0;
background: transparent;
border: 0;
text-align: left;
cursor: pointer;
color: inherit;
min-width: 0;
}
.project-doc-cards-toggle-btn:hover {
filter: brightness(1.06);
}
.project-doc-cards-toggle-btn:focus-visible {
box-shadow: var(--focus-ring, 0 0 0 0.1875rem rgba(var(--bs-primary-rgb, 13, 110, 253), 0.35));
outline: none;
z-index: 1;
position: relative;
}
.project-doc-cards-chevron {
flex-shrink: 0;
font-size: 1rem;
transition: transform var(--duration-fast, 0.15s) var(--ease-out, ease);
}
.project-doc-cards-toggle-btn.collapsed .project-doc-cards-chevron {
transform: rotate(-90deg);
}
.project-doc-cards-title-row {
min-width: 0;
}
.project-doc-cards-type-icon {
flex-shrink: 0;
font-size: 1.125rem;
line-height: 1;
color: currentColor;
}
.project-doc-cards-actions-col {
align-self: center;
}
.project-doc-cards-table {
table-layout: fixed;
width: 100%;
}
/* Dokumentkarten-/Projekttabellen Firmenansicht:
Gleiche Kopfzeilen-Tokens wie .ds-table/.ds-table-header (Listen). */
.table.project-doc-cards-table thead th {
font-size: var(--table-header-size);
font-weight: var(--font-weight-medium);
text-transform: uppercase;
letter-spacing: var(--table-header-letter-spacing);
color: var(--table-header-color);
padding: var(--table-cell-padding-y) var(--table-cell-padding-x);
border-bottom: var(--table-border);
background: var(--table-header-bg);
vertical-align: middle;
white-space: nowrap;
text-align: left;
}
.table.project-doc-cards-table thead th.text-end {
text-align: right;
}
.table.project-doc-cards-table thead th.text-center {
text-align: center;
}
/* Tabellen-Bottom-Margin (Bootstrap-Default 1rem) neutralisieren.
WICHTIG: an die stabile Klasse .project-doc-cards-collapse binden, NICHT an
.collapse — Bootstrap tauscht .collapse waehrend der Animation gegen
.collapsing. Wuerde der Override nur fuer .collapse greifen, haette die Tabelle
mitten in der Animation wieder 1rem Margin; am Animationsende (Klasse .collapse
kehrt zurueck -> Margin 0) entstuende ein 16px-Sprung der Inhalte darunter. */
.project-doc-cards > .project-doc-cards-collapse > .card-body .table.project-doc-cards-table {
margin-bottom: 0;
}
.project-doc-cards-table tbody tr[data-doc-row-href] {
cursor: pointer;
}
.project-doc-cards-table td.project-doc-cards-project-title-cell {
vertical-align: middle;
min-width: 0;
}
.project-doc-cards-table .project-doc-cards-project-title-inner {
max-width: 100%;
}
form.company-doc-toolbar a.btn-outline-danger,
form.list-toolbar-form--documents.company-doc-toolbar a.btn-outline-danger {
color: var(--color-danger);
border-color: var(--color-danger);
background-color: transparent;
--bs-btn-bg: transparent;
text-decoration: none;
}
form.company-doc-toolbar a.btn-outline-danger:hover,
form.list-toolbar-form--documents.company-doc-toolbar a.btn-outline-danger:hover {
color: var(--text-on-danger);
background-color: var(--color-danger);
border-color: var(--color-danger-dark);
text-decoration: none;
}
form.company-doc-toolbar a.btn-outline-danger:focus-visible,
form.list-toolbar-form--documents.company-doc-toolbar a.btn-outline-danger:focus-visible {
box-shadow: var(--focus-ring, 0 0 0 0.1875rem color-mix(in srgb, var(--color-danger) 35%, transparent));
text-decoration: none;
}
.project-doc-cards-count-badge {
font-size: var(--font-size-xs, 0.75rem);
}
.project-doc-cards-show-more-footer {
margin-top: 0;
padding-top: var(--space-2, 0.5rem);
border-top: var(--table-border);
}
/* ============================================
DETAIL-FORM: Lock/Unlock Pattern
Wiederverwendbar fuer jede Detail-Ansicht
mit gesperrten/entsperrten Feldern.
============================================ */
.detail-form--locked input:not(#contactLockToggle):not(#companyLockToggle),
.detail-form--locked select,
.detail-form--locked textarea:not(#contactNotes):not(#companyNotes) {
background-color: var(--form-bg-readonly);
border-color: var(--form-border);
color: var(--text-tertiary);
cursor: not-allowed;
}
.detail-form--locked input:not(#contactLockToggle):not(#companyLockToggle):focus,
.detail-form--locked select:focus,
.detail-form--locked textarea:not(#contactNotes):not(#companyNotes):focus {
border-color: var(--form-border);
box-shadow: none;
}
.detail-form--locked #contactLockToggle,
.detail-form--locked #companyLockToggle {
cursor: pointer;
}
.detail-form--locked label[for="contactLockToggle"],
.detail-form--locked label[for="companyLockToggle"] {
cursor: pointer;
}
.detail-form-status {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: 2px var(--space-3);
border-radius: var(--radius-full);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-medium);
line-height: 1.4;
}
.detail-form-status[data-mode="locked"] {
background: var(--pill-bg-neutral);
color: var(--pill-text-neutral);
}
.detail-form-status[data-mode="unlocked"] {
background: var(--pill-bg-warning);
color: var(--pill-text-warning);
}
.detail-form-footer {
display: none;
gap: var(--space-3);
padding-top: var(--space-4);
}
.detail-form-footer.is-visible {
display: flex;
}
.contact-view-notes-card-body {
min-height: 0;
}
.contact-view-notes-textarea {
flex: 1 1 0;
min-height: 12rem;
resize: none;
}
.contact-detail-subtype-select {
flex: 0 0 auto;
width: auto;
min-width: 11.5rem;
max-width: 14rem;
}
/* Im Kontakt-Detailformular bilden Subtyp-Dropdown und Nummer eine zusammen-
gehörige Gruppe (.input-group, bündig). Das Dropdown ist ein Drittel der Zeile
plus ein Drittel der Rasterlücke breit – so füllt die Nummer (flex-grow) exakt
die col-sm-8-Breite der E-Mail darüber, und beide Eingabefelder fluchten. */
#contactDetailForm .input-group .contact-detail-subtype-select {
flex: 0 0 calc(33.3333% + 0.3333rem);
width: calc(33.3333% + 0.3333rem);
min-width: 0;
max-width: none;
}
@media print {
.sidebar,
.sticky-header,
.skip-link,
.filter-bar,
.list-toolbar,
.saved-views,
.pagination,
.page-header-actions,
.btn,
#toast-container,
.cmd-palette-overlay,
.drawer-overlay,
.drawer {
display: none !important;
}
.main-container {
display: block !important;
}
.main-content {
margin-left: 0 !important;
padding: 0 !important;
width: 100% !important;
}
.content-wrapper {
display: block !important;
}
body {
background: white !important;
color: black !important;
font-size: 12pt;
}
.card {
border: 1px solid #ddd !important;
box-shadow: none !important;
break-inside: avoid;
}
.collapse.project-doc-cards-collapse {
display: block !important;
height: auto !important;
}
.project-doc-cards-chevron {
display: none !important;
}
a[href]::after {
content: " (" attr(href) ")";
font-size: 0.8em;
color: #666;
}
a.nav-link[href]::after,
a.btn[href]::after,
a.app-brand[href]::after {
content: none;
}
.kpi-card {
break-inside: avoid;
border: 1px solid #ddd !important;
box-shadow: none !important;
}
table {
border-collapse: collapse;
}
table th,
table td {
border: 1px solid #ccc !important;
padding: 4px 8px;
}
}
/* ============================================
Projektansicht (project_view.php): einheitliche
Card-Header im definierten Blauton (Slate),
konsistent zu .internal-info-card .quote-header.
Ueber .project-view-page gescopt -> company_view
(geteiltes Partial) bleibt unberuehrt.
============================================ */
.project-view-page .card > .card-header,
.project-view-page .project-doc-cards .card-header.project-doc-cards-header-wrap,
[data-theme="dark"] .project-view-page .card > .card-header,
[data-theme="dark"] .project-view-page .project-doc-cards .card-header.project-doc-cards-header-wrap {
background-color: var(--color-neutral-600);
border-bottom: 1px solid var(--color-neutral-700);
color: var(--text-on-primary);
}
/* Titel weiss */
.project-view-page .card > .card-header :is(h5, .h5),
.project-view-page .card > .card-header :is(h5, .h5) * {
color: var(--text-on-primary);
}
/* Sekundaerelemente im Header aufhellen (Kontrast >= 4.5:1):
- Aktiv-Switch-Label + Bearbeiten-Icon (Projektinformationen)
- Eintrags-Zaehler (Aktivitaetslog)
- "+"-Action-Buttons der Belegkarten
Chevron + type-icon erben currentColor automatisch -> werden weiss. */
.project-view-page .card > .card-header .text-muted,
.project-view-page .card > .card-header .form-check-label,
.project-view-page .card > .card-header .icon-btn {
color: rgba(255, 255, 255, 0.85) !important;
}
.project-view-page .card > .card-header .icon-btn:hover {
color: #fff !important;
}
/* Blauer Belegkarten-Header ausserhalb der Projektansicht (z. B. Kontaktansicht).
Nur auf .project-doc-cards gescopt -> die uebrigen Cards der Seite (z. B. die
Kontakt-Bearbeiten-Card) bleiben unberuehrt. Keine Spaltenbreiten-Overrides,
da das Company-Layout eigene Spalten (Projekt/Projekttitel) hat. */
.project-doc-cards-themed .project-doc-cards .card-header.project-doc-cards-header-wrap,
[data-theme="dark"] .project-doc-cards-themed .project-doc-cards .card-header.project-doc-cards-header-wrap {
background-color: var(--color-neutral-600);
border-bottom: 1px solid var(--color-neutral-700);
color: var(--text-on-primary);
}
.project-doc-cards-themed .project-doc-cards .card-header :is(h5, .h5),
.project-doc-cards-themed .project-doc-cards .card-header :is(h5, .h5) * {
color: var(--text-on-primary);
}
.project-doc-cards-themed .project-doc-cards .card-header .text-muted,
.project-doc-cards-themed .project-doc-cards .card-header .icon-btn {
color: rgba(255, 255, 255, 0.85) !important;
}
.project-doc-cards-themed .project-doc-cards .card-header .icon-btn:hover {
color: #fff !important;
}
/* Projekte-Karte sitzt in einer eigenen .row.gy-3.mt-3 -> Abstand setzte sich
aus gy (Spalten-Margin) + mt-3 (Row-Margin) = ~2rem zusammen und war damit
groesser als der 1rem-Abstand zwischen den Belegkarten. gy hier auf 0 -> der
Abstand kommt allein aus .mt-3 (1rem) und ist buendig mit den uebrigen Karten. */
.project-doc-cards-themed .row.gy-3.mt-3 {
--bs-gutter-y: 0;
}
/* Vertikaler Rhythmus: einheitlicher, etwas groesserer Abstand zwischen den
Cards (2rem statt 1.5rem). Behebt zugleich den fehlenden Abstand zwischen
Rechnungen und Projekt-Statistiken: der Belegkarten-Block (.row.gy-3) hatte
unten 0 Margin, dadurch klebte die Statistik-Card direkt darunter. */
.project-view-page > .row > .col-md-12 > .card {
margin-bottom: var(--space-8) !important; /* war mb-4 = 1.5rem */
}
.project-view-page > .row > .col-md-12 > .row.gy-3 {
--bs-gutter-y: var(--space-8); /* Belegkarten untereinander */
margin-bottom: var(--space-8); /* war 0 -> Abstand zur Statistik-Card */
}
/* Spaltenflucht: die wiederkehrenden Spalten (Nummer, Kontakt, Status, Datum)
stehen ueber alle vier Belegkarten buendig untereinander. Die karten-
spezifischen Spalten (Abrechnungsstand, Betrag netto) fuellen den Rest.
.project-doc-cards-table hat table-layout:fixed -> die th-Breiten steuern
die Spalten; !important uebersteuert die Inline-Breiten aus dem Partial.
Nur in der Projektansicht (.project-view-page) -> company_view unberuehrt. */
.project-view-page .project-doc-cards-table th:nth-child(1) { width: 13% !important; } /* Nummer */
.project-view-page .project-doc-cards-table th:nth-child(2) { width: 20% !important; } /* Kontakt */
.project-view-page .project-doc-cards-table th:nth-child(3) { width: 12% !important; } /* Status */
.project-view-page .project-doc-cards-table th:nth-child(4) { width: 13% !important; } /* Datum */
/* Angebote + Lieferscheine: danach folgt nur Aktionen (rechtsbuendig). */
.project-view-page #project-quotes .project-doc-cards-table th:nth-child(5),
.project-view-page #project-delivery-notes .project-doc-cards-table th:nth-child(5) { width: 42% !important; }
/* Auftragsbestaetigungen: Abrechnungsstand (5) + Aktionen (6). */
.project-view-page #project-order-confirmations .project-doc-cards-table th:nth-child(5) { width: 27% !important; }
.project-view-page #project-order-confirmations .project-doc-cards-table th:nth-child(6) { width: 15% !important; }
/* Rechnungen: Betrag netto (5) + Aktionen (6). */
.project-view-page #project-invoices .project-doc-cards-table th:nth-child(5) { width: 27% !important; }
.project-view-page #project-invoices .project-doc-cards-table th:nth-child(6) { width: 15% !important; }
/* ============================================
ONBOARDING-CHECKLISTE (Dashboard)
Einrichtungs-Schritte mit Live-Status. Nutzt
die widget-card-Hülle; Tokens theme-aware.
============================================ */
/* Überschrift als Blickfang der Karte vergrößert. */
.onboarding-card .widget-card-title {
font-size: var(--text-heading-2-size);
font-weight: var(--text-heading-2-weight);
}
/* Inhalt linksbündig mit der Kartenüberschrift ausrichten (Header nutzt
horizontal var(--space-6); der widget-card-body ist global x-padding:0). */
.onboarding-card .widget-card-body {
padding-left: var(--space-6);
padding-right: var(--space-6);
}
.onboarding-progress-label {
font-size: var(--text-small-size, 0.85rem);
font-weight: 600;
color: var(--text-secondary);
}
.onboarding-intro {
color: var(--text-secondary);
margin: 0 0 var(--space-4);
font-size: 0.95rem;
}
.onboarding-progress.progress {
height: 8px;
border-radius: var(--radius-full);
margin-bottom: var(--space-6);
background: var(--border-subtle);
}
.onboarding-progress .progress-bar {
background: var(--color-success-500);
border-radius: var(--radius-full);
transition: width 0.4s ease;
}
.onboarding-steps {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.onboarding-step {
display: flex;
gap: var(--space-3);
padding: var(--space-4);
border: 1px solid var(--border-strong);
border-radius: var(--radius-md);
background: var(--surface-card);
}
.onboarding-step.is-done {
opacity: 0.72;
}
.onboarding-step-status {
font-size: 1.4rem;
line-height: 1.4;
flex-shrink: 0;
color: var(--text-tertiary);
}
.onboarding-step.is-done .onboarding-step-status {
color: var(--color-success-600);
}
.onboarding-step-body {
flex: 1 1 auto;
min-width: 0;
}
.onboarding-step-head {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--space-2);
margin-bottom: var(--space-1);
}
.onboarding-step-label {
font-weight: 600;
color: var(--text-primary);
}
.onboarding-step.is-done .onboarding-step-label {
text-decoration: line-through;
text-decoration-color: var(--text-tertiary);
}
.onboarding-badge {
font-size: 0.72rem;
font-weight: 600;
padding: 2px 8px;
border-radius: var(--radius-full);
white-space: nowrap;
}
.onboarding-badge--done {
color: var(--color-success-700);
background: var(--color-success-100);
}
.onboarding-badge--optional {
color: var(--text-secondary);
background: var(--border-subtle);
}
.onboarding-step-desc {
color: var(--text-secondary);
margin: 0 0 var(--space-2);
font-size: 0.9rem;
}
.onboarding-step-hint {
display: flex;
align-items: flex-start;
gap: 4px;
color: var(--color-warning-700);
background: var(--color-warning-50);
border-radius: var(--radius-sm);
padding: var(--space-2) var(--space-3);
margin: 0 0 var(--space-3);
font-size: 0.85rem;
}
.onboarding-step-action {
margin-top: var(--space-1);
}
[data-theme="dark"] .onboarding-badge--done {
color: var(--color-success-200);
background: var(--color-success-900);
}
[data-theme="dark"] .onboarding-step-hint {
color: var(--color-warning-200);
background: var(--color-warning-900);
}
/* ──────────────────────────────────────────────────────────────
COUNTRY COMBOBOX (.country-combobox)
Custom-Dropdown als Ersatz fuer ein langes natives