/**
 * ELMETIC ServiceHub – Globales Design-System
 * Einheitliche Architektur für: Listen, Detail, Bearbeitung, Toolbar, KPI, Karten
 * v2025.06 — Referenz: Angebotsmodul
 */

/* ══════════════════════════════════════════
   1. LAYOUT-GRUNDSTRUKTUR
   ══════════════════════════════════════════ */

/* Seiten-Wrapper mit einheitlichem Spacing */
.sh-page { max-width: var(--content-max, 1600px); margin: 0 auto; padding: 0 var(--space-6, 1rem); }
.sh-page--wide { max-width: 100%; padding: 0 var(--space-5, 0.75rem); }

/* ══════════════════════════════════════════
   2. PAGE HEADER – einheitlich überall
   ══════════════════════════════════════════ */

.sh-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 0 12px; border-bottom: 1px solid var(--elmetic-border, #c0bebe); margin-bottom: 16px; flex-wrap: wrap; }
.sh-header__left { flex: 1 1 0; min-width: 0; }
.sh-header__left h1 { font-size: var(--text-2xl, 1.25rem); font-weight: 700; margin: 0 0 2px; line-height: var(--line-tight, 1.25); color: var(--text, #2d2d2d); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-header__context { display: flex; align-items: center; gap: 6px; font-size: var(--text-sm, 0.8125rem); color: var(--text-muted, #5c5c5c); flex-wrap: wrap; }
.sh-header__actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; flex-shrink: 0; }

/* ══════════════════════════════════════════
   3. STICKY TOOLBAR – Aktionsleiste
   ══════════════════════════════════════════ */

.sh-toolbar { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: var(--elmetic-white, #fff); border: 1px solid var(--elmetic-border, #c0bebe); border-radius: var(--radius, 6px); margin-bottom: 16px; flex-wrap: wrap; box-shadow: var(--shadow-sm); }
.sh-toolbar .btn { font-size: var(--text-sm, 0.8125rem); padding: 5px 12px; }
.sh-toolbar__spacer { flex: 1 1 auto; }
.sh-toolbar__save-status { font-size: var(--text-xs, 0.75rem); color: var(--text-muted); padding: 0 8px; }
.sh-toolbar__save-status--saving { color: var(--color-warning, #b45309); }
.sh-toolbar__save-status--saved { color: var(--color-success, #0d7d3e); }
.sh-toolbar__save-status--error { color: var(--color-error, #b91c1c); }

/* ══════════════════════════════════════════
   4. KPI-KARTEN / SUMMENBOXEN
   ══════════════════════════════════════════ */

.sh-kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 16px; }
.sh-kpi { background: var(--elmetic-white, #fff); border: 1px solid var(--elmetic-border, #c0bebe); border-radius: var(--radius, 6px); padding: 14px 16px; }
.sh-kpi__label { font-size: var(--text-xs, 0.75rem); text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted, #5c5c5c); margin: 0 0 4px; font-weight: 600; }
.sh-kpi__value { font-size: var(--text-xl, 1.125rem); font-weight: 700; color: var(--text, #2d2d2d); margin: 0; line-height: 1.2; }
.sh-kpi__sub { font-size: var(--text-xs, 0.75rem); color: var(--text-muted); margin: 2px 0 0; }
.sh-kpi--accent { border-left: 3px solid var(--elmetic-accent, #E73D25); }
.sh-kpi--success { border-left: 3px solid var(--color-success, #0d7d3e); }
.sh-kpi--warning { border-left: 3px solid var(--color-warning, #b45309); }
.sh-kpi--danger { border-left: 3px solid var(--color-error, #b91c1c); }

/* ══════════════════════════════════════════
   5. PANEL / SECTION – einheitliche Inhaltsboxen
   ══════════════════════════════════════════ */

.sh-panel { background: var(--elmetic-white, #fff); border: 1px solid var(--elmetic-border, #c0bebe); border-radius: var(--radius, 6px); padding: 16px 20px; margin-bottom: 16px; }
.sh-panel__title { font-size: var(--text-lg, 1rem); font-weight: 700; color: var(--text, #2d2d2d); margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }
.sh-panel__title .badge { font-size: var(--text-xs); }
.sh-panel--compact { padding: 12px 16px; }
.sh-panel--flush { padding: 0; overflow: hidden; }
.sh-panel--flush .sh-panel__title { padding: 12px 16px 0; }

/* ══════════════════════════════════════════
   6. KARTEN-GRID (Metadaten, Kopfdaten)
   ══════════════════════════════════════════ */

.sh-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.sh-card { background: var(--bg-subtle, #f5f5f5); border-radius: var(--radius-sm, 4px); padding: 14px 16px; }
.sh-card__title { font-size: var(--text-sm, 0.8125rem); font-weight: 700; color: var(--text, #2d2d2d); margin: 0 0 8px; text-transform: uppercase; letter-spacing: 0.03em; }
.sh-card p { margin: 3px 0; font-size: var(--text-sm, 0.8125rem); line-height: var(--line-normal, 1.45); }
.sh-card strong { font-weight: 600; }
.sh-card .muted { color: var(--text-muted, #5c5c5c); }

/* ══════════════════════════════════════════
   7. FILTER-/SUCHLEISTE
   ══════════════════════════════════════════ */

.sh-filter { display: flex; align-items: center; gap: 8px; padding: 10px 16px; background: var(--bg-subtle, #f5f5f5); border-radius: var(--radius, 6px); margin-bottom: 12px; flex-wrap: wrap; }
.sh-filter input[type="search"],
.sh-filter input[type="text"] { flex: 1 1 200px; min-width: 140px; height: 32px; padding: 0 10px; font-size: var(--text-sm); border: 1px solid var(--elmetic-border); border-radius: var(--radius-sm); background: var(--elmetic-white); }
.sh-filter select { height: 32px; padding: 0 8px; font-size: var(--text-sm); border: 1px solid var(--elmetic-border); border-radius: var(--radius-sm); background: var(--elmetic-white); }
.sh-filter .btn { height: 32px; font-size: var(--text-sm); padding: 0 14px; }
.sh-filter__group { display: flex; align-items: center; gap: 6px; }
.sh-filter__label { font-size: var(--text-xs, 0.75rem); font-weight: 600; color: var(--text-muted); white-space: nowrap; }

/* Quick-Filter Chips */
.sh-chips { display: flex; gap: 4px; flex-wrap: wrap; }
.sh-chip { font-size: var(--text-xs, 0.75rem); padding: 3px 10px; border: 1px solid var(--elmetic-border); border-radius: 100px; background: var(--elmetic-white); color: var(--text-muted); cursor: pointer; transition: all .15s; font-weight: 500; }
.sh-chip:hover, .sh-chip--active { background: var(--elmetic-accent, #E73D25); color: #fff; border-color: var(--elmetic-accent); }

/* ══════════════════════════════════════════
   8. DATENTABELLE – einheitlich
   ══════════════════════════════════════════ */

.sh-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -20px; padding: 0 20px; }
.sh-panel--flush .sh-table-wrap { margin: 0; padding: 0; }
.sh-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm, 0.8125rem); }
.sh-table thead { position: sticky; top: 0; z-index: 5; }
.sh-table th { padding: 8px 10px; text-align: left; font-weight: 600; font-size: var(--text-xs, 0.75rem); text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted, #5c5c5c); background: var(--bg-subtle, #f5f5f5); border-bottom: 2px solid var(--elmetic-border); white-space: nowrap; }
.sh-table td { padding: 8px 10px; border-bottom: 1px solid var(--elmetic-surface, #f0efef); vertical-align: top; color: var(--text, #2d2d2d); }
.sh-table tbody tr { transition: background .1s; }
.sh-table tbody tr:hover { background: var(--elmetic-surface, #f0efef); }
.sh-table tbody tr.sh-row--clickable { cursor: pointer; }
.sh-table tbody tr.sh-row--clickable:hover { background: var(--elmetic-accent-dim, rgba(231,61,37,.08)); }
.sh-table .sh-col-num { text-align: right; font-variant-numeric: tabular-nums; }
.sh-table .sh-col-center { text-align: center; }
.sh-table .sh-col-actions { text-align: right; white-space: nowrap; }
.sh-table .sh-col-narrow { width: 1%; white-space: nowrap; }

/* Zebra (optional) */
.sh-table--zebra tbody tr:nth-child(even) { background: var(--bg-subtle, #f5f5f5); }
.sh-table--zebra tbody tr:hover { background: var(--elmetic-surface-alt, #e5e4e4); }

/* ══════════════════════════════════════════
   9. BADGE-SYSTEM – einheitliche Status
   ══════════════════════════════════════════ */

.sh-badge { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-xs, 0.75rem); font-weight: 600; padding: 2px 8px; border-radius: 100px; line-height: 1.5; white-space: nowrap; }
.sh-badge--neutral { background: var(--elmetic-surface, #f0efef); color: var(--text-muted, #5c5c5c); }
.sh-badge--success { background: var(--color-success-bg, #e8f5ee); color: var(--color-success, #0d7d3e); }
.sh-badge--warning { background: var(--color-warning-bg, #fffbeb); color: var(--color-warning, #b45309); }
.sh-badge--danger { background: var(--color-error-bg, #fef2f2); color: var(--color-error, #b91c1c); }
.sh-badge--accent { background: var(--elmetic-accent-dim); color: var(--elmetic-accent); }
.sh-badge--info { background: var(--color-info-bg, #e0f2fe); color: var(--color-info, #0ea5e9); }
.sh-badge--dot::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }

/* ══════════════════════════════════════════
   10. HINWEIS- UND WARNLEISTEN
   ══════════════════════════════════════════ */

.sh-notice { padding: 10px 16px; border-radius: var(--radius, 6px); font-size: var(--text-sm, 0.8125rem); line-height: var(--line-normal); margin-bottom: 12px; display: flex; align-items: flex-start; gap: 8px; }
.sh-notice--info { background: var(--color-info-bg); color: #0369a1; border: 1px solid #bae6fd; }
.sh-notice--warning { background: var(--color-warning-bg); color: #92400e; border: 1px solid #fde68a; }
.sh-notice--error { background: var(--color-error-bg); color: var(--color-error); border: 1px solid #fca5a5; }
.sh-notice--success { background: var(--color-success-bg); color: var(--color-success); border: 1px solid #86efac; }
.sh-notice strong { font-weight: 700; }

/* ══════════════════════════════════════════
   11. DETAIL-SEITE: HISTORY / TIMELINE
   ══════════════════════════════════════════ */

.sh-timeline { list-style: none; margin: 0; padding: 0; }
.sh-timeline__item { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--elmetic-surface); font-size: var(--text-sm); }
.sh-timeline__item:last-child { border-bottom: none; }
.sh-timeline__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--elmetic-border); flex-shrink: 0; margin-top: 5px; }
.sh-timeline__dot--accent { background: var(--elmetic-accent); }
.sh-timeline__dot--success { background: var(--color-success); }
.sh-timeline__dot--warning { background: var(--color-warning); }
.sh-timeline__content { flex: 1; min-width: 0; }
.sh-timeline__time { font-size: var(--text-xs); color: var(--text-muted); white-space: nowrap; flex-shrink: 0; }

/* ══════════════════════════════════════════
   12. BUTTON-HIERARCHIE (Ergänzung)
   ══════════════════════════════════════════ */

.btn--sm { font-size: var(--text-xs, 0.75rem); padding: 3px 10px; }
.btn--icon { padding: 5px 8px; }
.btn--link { background: none; border: none; color: var(--elmetic-accent); text-decoration: underline; padding: 0; cursor: pointer; font-size: inherit; }
.btn--link:hover { color: var(--elmetic-accent-hover); }

/* ══════════════════════════════════════════
   13. EDIT-PAGE SPEZIFISCH
   ══════════════════════════════════════════ */

.sh-edit-page { display: flex; flex-direction: column; min-height: calc(100vh - 60px); }
.sh-edit-page .sh-toolbar { position: sticky; top: 0; z-index: 60; }
.sh-edit-page__content { flex: 1; overflow-y: auto; padding-bottom: 80px; }

/* Sticky KPI-Leiste am unteren Rand */
.sh-edit-totals { position: sticky; bottom: 0; z-index: 55; background: var(--elmetic-white); border-top: 2px solid var(--elmetic-border); padding: 10px 16px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; box-shadow: 0 -2px 8px rgba(0,0,0,.06); }
.sh-edit-totals__item { font-size: var(--text-sm); }
.sh-edit-totals__item strong { font-weight: 700; }
.sh-edit-totals__spacer { flex: 1; }

/* ══════════════════════════════════════════
   14. LISTENANSICHT – Seitenfuß / Paginierung
   ══════════════════════════════════════════ */

.sh-list-footer { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; font-size: var(--text-xs, 0.75rem); color: var(--text-muted); }
.sh-list-footer__count { font-variant-numeric: tabular-nums; }

/* ══════════════════════════════════════════
   15. TABS (für Detailseiten mit Unternavigation)
   ══════════════════════════════════════════ */

.sh-tabs { display: flex; gap: 0; border-bottom: 2px solid var(--elmetic-border); margin-bottom: 16px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sh-tab { padding: 8px 16px; font-size: var(--text-sm, 0.8125rem); font-weight: 500; color: var(--text-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; white-space: nowrap; transition: all .15s; background: none; border-top: none; border-left: none; border-right: none; }
.sh-tab:hover { color: var(--text); }
.sh-tab--active { color: var(--elmetic-accent); border-bottom-color: var(--elmetic-accent); font-weight: 600; }

/* ══════════════════════════════════════════
   16. RESPONSIVE & TOUCH
   ══════════════════════════════════════════ */

@media (max-width: 1024px) {
  .sh-cards { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
  .sh-kpi-row { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .sh-header { flex-direction: column; gap: 8px; }
  .sh-toolbar { flex-wrap: wrap; gap: 4px; }
}

@media (max-width: 768px) {
  .sh-cards { grid-template-columns: 1fr; }
  .sh-kpi-row { grid-template-columns: 1fr 1fr; }
  .sh-filter { flex-direction: column; align-items: stretch; }
  .sh-filter input[type="search"],
  .sh-filter input[type="text"],
  .sh-filter select { flex: 1 1 100%; }
  .sh-table { font-size: var(--text-xs, 0.75rem); }
  .sh-table th, .sh-table td { padding: 6px 8px; }
  .sh-header__left h1 { font-size: var(--text-xl, 1.125rem); }
  .sh-toolbar .btn { padding: 4px 10px; font-size: var(--text-xs); }
}

/* Touch-Optimierung: größere Klickflächen */
@media (pointer: coarse) {
  .sh-table td { padding: 10px; }
  .sh-chip { padding: 5px 12px; }
  .sh-tab { padding: 10px 16px; }
  .sh-toolbar .btn { min-height: 36px; }
}

/* ══════════════════════════════════════════
   17. UTILITY KLASSEN
   ══════════════════════════════════════════ */

.sh-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-muted { color: var(--text-muted, #5c5c5c); }
.sh-small { font-size: var(--text-xs, 0.75rem); }
.sh-bold { font-weight: 700; }
.sh-mono { font-variant-numeric: tabular-nums; }
.sh-gap-sm { gap: 6px; }
.sh-gap-md { gap: 12px; }
.sh-flex { display: flex; align-items: center; }
.sh-flex-col { display: flex; flex-direction: column; }
.sh-flex-between { display: flex; align-items: center; justify-content: space-between; }
.sh-mt-0 { margin-top: 0; }
.sh-mb-0 { margin-bottom: 0; }
.sh-mb-sm { margin-bottom: 8px; }
.sh-mb-md { margin-bottom: 16px; }
.sh-prelike { white-space: pre-wrap; word-break: break-word; }

/* ══════════════════════════════════════════
   18. EMPTY STATE
   ══════════════════════════════════════════ */

.sh-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 20px; text-align: center; color: var(--text-muted, #5c5c5c); }
.sh-empty-state__icon { font-size: 2rem; margin-bottom: 8px; opacity: 0.5; }
.sh-empty-state__text { font-size: var(--text-sm, 0.8125rem); margin: 0; max-width: 400px; }

/* ══════════════════════════════════════════
   19. DETAIL SECTION (DL / Label-Value-Paare)
   ══════════════════════════════════════════ */

.sh-dl { display: grid; grid-template-columns: 1fr; gap: 0; margin: 0; }
.sh-dl__row { display: flex; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--elmetic-surface, #f0efef); align-items: baseline; }
.sh-dl__row:last-child { border-bottom: none; }
.sh-dl__label { font-size: var(--text-xs, 0.75rem); font-weight: 600; color: var(--text-muted, #5c5c5c); min-width: 140px; flex-shrink: 0; text-transform: uppercase; letter-spacing: 0.03em; }
.sh-dl__value { font-size: var(--text-sm, 0.8125rem); color: var(--text, #2d2d2d); flex: 1; min-width: 0; word-break: break-word; }

@media (max-width: 768px) {
  .sh-dl__row { flex-direction: column; gap: 2px; }
  .sh-dl__label { min-width: 0; }
}

/* ══════════════════════════════════════════
   20. KOMPATIBILITÄTSSCHICHT
   Legacy-Klassen → Design-System-Styles
   Sorgt dafür, dass alte Klassen einheitlich
   gestylt werden, ohne jeden einzelnen Aufruf
   im JS zu ändern.
   ══════════════════════════════════════════ */

/* page-header → sh-header Styling */
.page-header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 16px 0 12px; border-bottom: 1px solid var(--elmetic-border, #c0bebe);
  margin-bottom: 16px; flex-wrap: wrap;
}
.page-header h1 {
  font-size: var(--text-2xl, 1.25rem); font-weight: 700; margin: 0 0 2px;
  line-height: var(--line-tight, 1.25); color: var(--text, #2d2d2d);
}
.page-header .subtitle {
  font-size: var(--text-sm, 0.8125rem); color: var(--text-muted, #5c5c5c); margin: 2px 0 0;
}

/* panel / section → sh-panel Styling */
section.panel, .panel:not(.sh-panel) {
  background: var(--elmetic-white, #fff); border: 1px solid var(--elmetic-border, #c0bebe);
  border-radius: var(--radius, 6px); padding: 16px 20px; margin-bottom: 16px;
}

/* data-table → sh-table Styling */
.data-table {
  width: 100%; border-collapse: collapse; font-size: var(--text-sm, 0.8125rem);
}
.data-table th {
  text-align: left; padding: 8px 12px; font-weight: 600; font-size: var(--text-xs, 0.75rem);
  text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted, #5c5c5c);
  border-bottom: 2px solid var(--elmetic-border, #c0bebe); white-space: nowrap;
}
.data-table td {
  padding: 8px 12px; border-bottom: 1px solid var(--elmetic-surface, #f0efef);
  vertical-align: top; color: var(--text, #2d2d2d);
}
.data-table tbody tr { transition: background .1s; }
.data-table tbody tr:hover { background: var(--elmetic-surface, #f0efef); }

/* ══════════════════════════════════════════
   21. ARTIKEL-DETAILSEITE (ERP-Layout)
   ══════════════════════════════════════════ */

/* Kompakter Artikel-Header (ersetzt sh-header für Artikelseite) */
.art-header { padding: 14px 0 10px; border-bottom: 1px solid var(--elmetic-border, #c0bebe); margin-bottom: 0; }
.art-header__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.art-header__title { font-size: var(--text-xl, 1.125rem); font-weight: 700; color: var(--text, #2d2d2d); margin: 0; line-height: 1.25; }
.art-header__actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; flex-wrap: wrap; }
.art-header__meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.art-header__pill { display: inline-flex; align-items: center; font-size: var(--text-xs, 0.75rem); font-weight: 500; padding: 2px 8px; border-radius: 100px; border: 1px solid var(--elmetic-border, #c0bebe); color: var(--text-muted, #5c5c5c); background: var(--bg-subtle, #f5f5f5); white-space: nowrap; }
.art-header__pill--accent { border-color: var(--elmetic-accent, #E73D25); color: var(--elmetic-accent, #E73D25); background: var(--elmetic-accent-dim, rgba(231,61,37,.08)); }
.art-header__pill--success { border-color: var(--color-success, #0d7d3e); color: var(--color-success, #0d7d3e); background: var(--color-success-bg, #e8f5ee); }
.art-header__pill--muted { border-color: transparent; background: none; color: var(--text-muted, #5c5c5c); }

/* 2-Spalten-Layout: Hauptinhalt + Sidebar */
.art-layout { display: grid; grid-template-columns: 1fr 240px; gap: 16px; align-items: start; margin-top: 14px; }
.art-main { min-width: 0; }
@media (max-width: 900px) { .art-layout { grid-template-columns: 1fr; } }

/* Sidebar-Karten */
.art-sidebar { display: flex; flex-direction: column; gap: 12px; }
.art-card { background: var(--elmetic-white, #fff); border: 1px solid var(--elmetic-border, #c0bebe); border-radius: var(--radius, 6px); overflow: hidden; }
.art-card__head { padding: 8px 12px; background: var(--bg-subtle, #f5f5f5); border-bottom: 1px solid var(--elmetic-border, #c0bebe); font-size: var(--text-xs, 0.75rem); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted, #5c5c5c); display: flex; align-items: center; justify-content: space-between; }
.art-card__body { padding: 12px; }

/* Artikelbild */
.art-img-placeholder { width: 100%; aspect-ratio: 1 / 1; background: var(--bg-subtle, #f5f5f5); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--text-muted, #5c5c5c); font-size: var(--text-xs, 0.75rem); border-bottom: 1px solid var(--elmetic-border, #c0bebe); }
.art-img-placeholder svg { opacity: 0.3; }
.art-img-placeholder img { width: 100%; height: 100%; object-fit: contain; display: block; }
.art-img-actions { padding: 8px 12px; display: flex; gap: 6px; justify-content: center; border-top: 1px solid var(--elmetic-border, #c0bebe); background: var(--elmetic-white); }

/* Übersichts-Kennzahlen in Sidebar */
.art-kpi { display: flex; flex-direction: column; gap: 0; }
.art-kpi__row { display: flex; justify-content: space-between; align-items: baseline; padding: 5px 0; border-bottom: 1px solid var(--elmetic-surface, #f0efef); font-size: var(--text-sm, 0.8125rem); }
.art-kpi__row:last-child { border-bottom: none; }
.art-kpi__label { color: var(--text-muted, #5c5c5c); font-size: var(--text-xs, 0.75rem); }
.art-kpi__value { font-weight: 600; color: var(--text, #2d2d2d); font-variant-numeric: tabular-nums; }
.art-kpi__value--accent { color: var(--elmetic-accent, #E73D25); }
.art-kpi__value--muted { color: var(--text-muted, #5c5c5c); font-weight: 400; font-style: italic; }

/* Stammdaten-Grid: dichte 2-spaltige Darstellung */
.art-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.art-grid__field { display: flex; flex-direction: column; padding: 7px 0; border-bottom: 1px solid var(--elmetic-surface, #f0efef); padding-right: 16px; }
.art-grid__field:nth-child(even) { padding-right: 0; padding-left: 16px; border-left: 1px solid var(--elmetic-surface, #f0efef); }
.art-grid__field--full { grid-column: 1 / -1; padding-right: 0; border-left: none; }
.art-grid__field--full.art-grid__field:nth-child(even) { padding-left: 0; border-left: none; }
.art-grid__label { font-size: var(--text-xs, 0.75rem); font-weight: 600; color: var(--text-muted, #5c5c5c); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 2px; }
.art-grid__value { font-size: var(--text-sm, 0.8125rem); color: var(--text, #2d2d2d); word-break: break-word; }
.art-grid__value--empty { color: var(--text-muted, #5c5c5c); font-style: italic; }
@media (max-width: 600px) {
  .art-grid { grid-template-columns: 1fr; }
  .art-grid__field:nth-child(even) { padding-left: 0; border-left: none; }
  .art-grid__field--full { grid-column: 1; }
}

/* Aktivitäten-Liste */
.art-activity { list-style: none; margin: 0; padding: 0; }
.art-activity__item { display: flex; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--elmetic-surface, #f0efef); font-size: var(--text-xs, 0.75rem); align-items: flex-start; }
.art-activity__item:last-child { border-bottom: none; }
.art-activity__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--elmetic-border); flex-shrink: 0; margin-top: 4px; }
.art-activity__dot--accent { background: var(--elmetic-accent); }
.art-activity__dot--success { background: var(--color-success); }
.art-activity__text { flex: 1; color: var(--text-muted, #5c5c5c); line-height: 1.4; }
.art-activity__text strong { color: var(--text, #2d2d2d); font-weight: 600; }

/* Tab-Inhaltsbereich */
.art-tab-content { background: var(--elmetic-white, #fff); border: 1px solid var(--elmetic-border, #c0bebe); border-radius: var(--radius, 6px); }
.art-tab-content .sh-panel { border: none; border-radius: 0; margin-bottom: 0; border-bottom: 1px solid var(--elmetic-border, #c0bebe); }
.art-tab-content .sh-panel:last-child { border-bottom: none; }
.art-tab-section { padding: 16px 20px; }
.art-tab-section + .art-tab-section { border-top: 1px solid var(--elmetic-border, #c0bebe); }
.art-tab-section__title { font-size: var(--text-sm, 0.8125rem); font-weight: 700; color: var(--text, #2d2d2d); margin: 0 0 10px; text-transform: uppercase; letter-spacing: 0.03em; }

/* table-wrap → sh-table-wrap */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* table-actions → sh-col-actions */
.table-actions { text-align: right; white-space: nowrap; }

/* status-badge → sh-badge (Legacy-Kompatibilität) */
.status-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--text-xs, 0.75rem); font-weight: 600;
  padding: 2px 8px; border-radius: 100px; line-height: 1.5; white-space: nowrap;
}
.status-badge--neutral { background: var(--elmetic-surface, #f0efef); color: var(--text-muted, #5c5c5c); }
.status-badge--success { background: var(--color-success-bg, #e8f5ee); color: var(--color-success, #0d7d3e); }
.status-badge--warning { background: var(--color-warning-bg, #fffbeb); color: var(--color-warning, #b45309); }
.status-badge--danger  { background: var(--color-error-bg, #fef2f2); color: var(--color-error, #b91c1c); }
.status-badge--active  { background: var(--color-info-bg, #e0f2fe); color: var(--color-info, #0ea5e9); }
.status-badge--accent  { background: var(--elmetic-accent-dim); color: var(--elmetic-accent); }
.status-badge--info    { background: var(--color-info-bg, #e0f2fe); color: var(--color-info, #0ea5e9); }

/* Status-farbige Tabellenzeilen (RobAWS-Style) */
.table tr.row--success  { background: var(--color-success-bg, #e8f5ee); }
.table tr.row--info     { background: var(--color-info-bg, #e0f2fe); }
.table tr.row--warning  { background: var(--color-warning-bg, #fffbeb); }
.table tr.row--danger   { background: var(--color-error-bg, #fef2f2); }
.table tr.row--accent   { background: color-mix(in srgb, var(--elmetic-accent, #E73D25) 8%, transparent); }
.table tr.row--neutral  { background: transparent; }
.table tr[class*="row--"]:hover { filter: brightness(0.97); }

/* sales-card → sh-card / sales-grid → sh-cards */
.sales-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px;
}
.sales-card {
  background: var(--bg-subtle, #f5f5f5); border-radius: var(--radius-sm, 4px); padding: 14px 16px;
}
.sales-card h3 {
  font-size: var(--text-sm, 0.8125rem); font-weight: 700; color: var(--text, #2d2d2d);
  margin: 0 0 8px; text-transform: uppercase; letter-spacing: 0.03em;
}
.sales-card p { margin: 3px 0; font-size: var(--text-sm, 0.8125rem); }

/* empty-state → sh-empty-state */
.empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 40px 20px; text-align: center; color: var(--text-muted, #5c5c5c);
}
.empty-state p { font-size: var(--text-sm, 0.8125rem); margin: 4px 0; }

/* btn-sm → btn--sm (Legacy) */
.btn-sm { font-size: var(--text-xs, 0.75rem); padding: 3px 10px; }

/* error-text */
.error-text { color: var(--color-error, #b91c1c); font-size: var(--text-sm, 0.8125rem); }

@media (max-width: 1024px) {
  .page-header { flex-direction: column; gap: 8px; }
  .sales-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
}
@media (max-width: 768px) {
  .page-header h1 { font-size: var(--text-xl, 1.125rem); }
  .data-table { font-size: var(--text-xs, 0.75rem); }
  .data-table th, .data-table td { padding: 6px 8px; }
  .sales-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════
   QFE — Quote Form Editor  (Angebots-Bearbeitungsfenster)
   Präfix: qfe-*   /  v2025.07
   ══════════════════════════════════════════════════════════════════ */

/* ── Gesamt-Wrapper ───────────────────────────────────────────────── */
.qfe-layout { display: flex; flex-direction: column; min-height: 0; }

/* ── A) Header Strip ─────────────────────────────────────────────── */
.qfe-header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 0 8px;
  border-bottom: 2px solid var(--elmetic-border, #c0bebe);
  margin-bottom: 0;
}
.qfe-header__left { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.qfe-header__top  { display: flex; align-items: center; gap: 10px; }
.qfe-header__title {
  font-size: var(--text-xl, 1.125rem); font-weight: 700; color: var(--text, #2d2d2d);
  margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 560px;
}
.qfe-doc-number {
  font-size: var(--text-xs, 0.75rem); font-weight: 700; letter-spacing: 0.06em;
  color: var(--text-muted, #5c5c5c); background: var(--elmetic-surface, #f0efef);
  padding: 2px 8px; border-radius: var(--radius-sm, 4px); white-space: nowrap;
}
.qfe-header__meta {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--text-xs, 0.75rem); color: var(--text-muted, #5c5c5c); flex-wrap: wrap;
}
.qfe-meta-sep { color: var(--elmetic-border, #c0bebe); }
.qfe-header__actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

/* ── B) KPI-Bar ──────────────────────────────────────────────────── */
.qfe-kpi-bar {
  display: flex; align-items: stretch;
  background: var(--elmetic-white, #fff);
  border: 1px solid var(--elmetic-border, #c0bebe);
  border-radius: var(--radius, 6px);
  margin: 8px 0; overflow: hidden;
}
.qfe-kpi-item {
  flex: 1; display: flex; flex-direction: column;
  padding: 7px 14px; border-right: 1px solid var(--elmetic-border, #c0bebe);
}
.qfe-kpi-item:last-child { border-right: none; }
.qfe-kpi-item__label {
  font-size: var(--text-xs, 0.75rem); color: var(--text-muted, #5c5c5c);
  margin: 0 0 1px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
}
.qfe-kpi-item__value {
  font-size: var(--text-sm, 0.8125rem); font-weight: 700; color: var(--text, #2d2d2d); margin: 0;
}
.qfe-kpi-item--accent { background: var(--elmetic-accent-dim, rgba(231,61,37,0.08)); }
.qfe-kpi-item--accent .qfe-kpi-item__value { color: var(--elmetic-accent, #E73D25); }
.qfe-kpi-status { padding: 7px 14px; display: flex; flex-direction: column; justify-content: center; gap: 3px; }
.qfe-save-status { font-size: var(--text-xs, 0.75rem); font-weight: 600; white-space: nowrap; }
.qfe-save-status--saved  { color: var(--color-success, #0d7d3e); }
.qfe-save-status--saving { color: var(--color-warning, #b45309); }
.qfe-save-status--error  { color: var(--color-error, #b91c1c); }
.qfe-mode-badge {
  font-size: var(--text-xs, 0.75rem); background: var(--elmetic-surface, #f0efef);
  border-radius: 100px; padding: 2px 8px; white-space: nowrap; align-self: flex-start;
}

/* ── C) Toolbar ──────────────────────────────────────────────────── */
.qfe-toolbar {
  display: flex; align-items: center; gap: 4px;
  padding: 5px 8px;
  background: var(--elmetic-surface, #f0efef);
  border: 1px solid var(--elmetic-border, #c0bebe);
  border-radius: var(--radius, 6px);
  margin-bottom: 10px; flex-wrap: wrap;
}
.qfe-toolbar .btn { font-size: var(--text-xs, 0.75rem); padding: 3px 10px; height: 24px; line-height: 1; }
.qfe-toolbar__sep { width: 1px; height: 16px; background: var(--elmetic-border, #c0bebe); margin: 0 4px; flex-shrink: 0; }
.qfe-toolbar__select {
  height: 24px; font-size: var(--text-xs, 0.75rem); padding: 0 8px;
  border: 1px solid var(--elmetic-border, #c0bebe);
  border-radius: var(--radius-sm, 4px); background: var(--elmetic-white, #fff); color: var(--text, #2d2d2d);
}

/* ── D+E) Workspace: Hauptbereich + Sidebar ──────────────────────── */
.qfe-workspace {
  display: grid; grid-template-columns: 1fr 260px; gap: 12px; align-items: start;
}
.qfe-positions { min-width: 0; }
.qfe-positions-panel {
  background: var(--elmetic-white, #fff);
  border: 1px solid var(--elmetic-border, #c0bebe);
  border-radius: var(--radius, 6px); overflow: hidden;
}
.qfe-positions-panel__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 12px;
  background: var(--elmetic-surface, #f0efef);
  border-bottom: 1px solid var(--elmetic-border, #c0bebe);
}
.qfe-positions-panel__title { font-size: var(--text-sm, 0.8125rem); font-weight: 700; margin: 0; color: var(--text, #2d2d2d); }
.qfe-positions-panel__body { min-height: 200px; }

/* ── F) Sidebar ──────────────────────────────────────────────────── */
.qfe-sidebar { display: flex; flex-direction: column; gap: 10px; position: sticky; top: 60px; }
.qfe-info-box {
  background: var(--elmetic-white, #fff);
  border: 1px solid var(--elmetic-border, #c0bebe);
  border-radius: var(--radius, 6px); padding: 12px 14px;
}
.qfe-info-box__title {
  font-size: var(--text-xs, 0.75rem); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted, #5c5c5c); margin: 0 0 8px;
}
.qfe-info-box__item {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; padding: 3px 0;
  border-bottom: 1px solid var(--elmetic-surface, #f0efef);
}
.qfe-info-box__item:last-child { border-bottom: none; }
.qfe-info-box__item-label  { color: var(--text-muted, #5c5c5c); font-size: var(--text-xs, 0.75rem); }
.qfe-info-box__item-value  { font-weight: 600; text-align: right; font-size: var(--text-xs, 0.75rem); }
.qfe-info-box__hint { font-size: var(--text-xs, 0.75rem); color: var(--text-muted, #5c5c5c); margin: 6px 0 0; line-height: 1.5; }

/* ── Collapsible Sections ────────────────────────────────────────── */
.qfe-section {
  background: var(--elmetic-white, #fff);
  border: 1px solid var(--elmetic-border, #c0bebe);
  border-radius: var(--radius, 6px); margin-top: 10px; overflow: hidden;
}
.qfe-section__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 14px;
  background: var(--elmetic-surface, #f0efef);
  border-bottom: 1px solid var(--elmetic-border, #c0bebe);
  cursor: pointer; user-select: none;
}
.qfe-section__header:hover { background: var(--elmetic-surface-alt, #e5e4e4); }
.qfe-section__header-title { font-size: var(--text-sm, 0.8125rem); font-weight: 700; margin: 0; color: var(--text, #2d2d2d); }
.qfe-section__chevron { font-size: 10px; color: var(--text-muted, #5c5c5c); transition: transform 0.15s; }
.qfe-section--collapsed .qfe-section__chevron { transform: rotate(-90deg); }
.qfe-section--collapsed .qfe-section__body { display: none; }
.qfe-section__body { padding: 14px 16px; }

/* ── Dokument & Texte Grid ───────────────────────────────────────── */
.qfe-doc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.qfe-doc-field label { display: block; font-size: var(--text-xs, 0.75rem); font-weight: 600; color: var(--text-muted, #5c5c5c); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; }
.qfe-doc-field textarea, .qfe-doc-field .ui-textarea { width: 100%; font-size: var(--text-sm, 0.8125rem); box-sizing: border-box; }
.qfe-confirm-link-row { display: flex; gap: 6px; align-items: center; }
.qfe-confirm-link-row input { flex: 1; }

/* ── Grunddaten Grid (collapsed by default) ──────────────────────── */
.qfe-grunddaten-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.qfe-grunddaten-grid .ui-form-row { margin-bottom: 0; }

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 1200px) {
  .qfe-workspace { grid-template-columns: 1fr; }
  .qfe-sidebar { position: static; }
  .qfe-doc-grid { grid-template-columns: 1fr; }
  .qfe-grunddaten-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .qfe-header { flex-direction: column; align-items: flex-start; }
  .qfe-header__actions { width: 100%; justify-content: flex-end; flex-wrap: wrap; }
  .qfe-grunddaten-grid { grid-template-columns: 1fr; }
  .qfe-kpi-bar { flex-wrap: wrap; }
  .qfe-kpi-item { min-width: 100px; flex: 1 1 100px; }
  .qfe-toolbar { flex-wrap: wrap; gap: 6px; }
  .qfe-toolbar__select { min-width: 100px; max-width: 100%; }
  .qfe-header__title { max-width: 100%; font-size: 1rem; }
  .qfe-section__body { padding: 10px 12px; }
}
@media (max-width: 480px) {
  .qfe-kpi-item { min-width: 80px; padding: 5px 8px; }
  .qfe-kpi-item__label { font-size: 0.625rem; }
  .qfe-kpi-item__value { font-size: 0.75rem; }
}

/* ═══════════════════════════════════════════════════════════════════════
   View-Tabs & Quick-Filter (RobAWS-Style)
   ═══════════════════════════════════════════════════════════════════════ */

.sh-view-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--border-color, #E2E8F0);
  margin-bottom: 12px;
  overflow-x: auto;
}
.sh-view-tab {
  padding: 8px 16px;
  font-size: var(--text-sm, 0.875rem);
  font-weight: 500;
  color: var(--text-secondary, #475569);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
}
.sh-view-tab:hover {
  color: var(--text-primary, #1E293B);
  background: var(--surface-alt, #F8FAFC);
}
.sh-view-tab--active {
  color: var(--elmetic-accent, #E73D25);
  border-bottom-color: var(--elmetic-accent, #E73D25);
  font-weight: 600;
}

.sh-quick-filters {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.sh-quick-filter-input {
  max-width: 220px;
  font-size: var(--text-sm, 0.875rem);
}
.sh-quick-filter-select {
  max-width: 180px;
  font-size: var(--text-sm, 0.875rem);
}

/* ═══════════════════════════════════════════════════════════════════════
   Auftrags-Detail Sidebar (RobAWS-Style Übersicht)
   ═══════════════════════════════════════════════════════════════════════ */

.oei-editor-layout--with-sidebar {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 0;
  min-height: 0;
}

.oei-detail-sidebar {
  border-left: 1px solid var(--border-color, #E2E8F0);
  background: var(--surface-color, #fff);
  padding: 16px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.oei-sidebar-title {
  font-size: var(--text-sm, 0.875rem);
  font-weight: 700;
  color: var(--text-primary, #1E293B);
  margin: 0 0 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.oei-sidebar-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: var(--surface-alt, #F8FAFC);
  border: 1px solid var(--border-color, #E2E8F0);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.oei-sidebar-card:hover {
  background: var(--color-info-bg, #E0F2FE);
  border-color: var(--color-info, #3B82F6);
}

.oei-sidebar-card__left {
  display: flex;
  align-items: center;
  gap: 8px;
}
.oei-sidebar-card__icon {
  font-size: 18px;
  color: var(--text-muted, #94A3B8);
}
.oei-sidebar-card__label {
  font-size: var(--text-sm, 0.875rem);
  color: var(--text-primary, #1E293B);
  font-weight: 500;
}

.oei-sidebar-card__right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.oei-sidebar-card__amount {
  font-size: var(--text-xs, 0.75rem);
  color: var(--text-secondary, #475569);
  font-weight: 500;
}
.oei-sidebar-card__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 100px;
  background: var(--elmetic-accent, #E73D25);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
}

/* Gauge (Offene Rechnungen) */
.oei-sidebar-gauge {
  padding: 12px;
  background: var(--surface-alt, #F8FAFC);
  border: 1px solid var(--border-color, #E2E8F0);
  border-radius: 8px;
  margin-top: 4px;
}
.oei-sidebar-gauge__title {
  font-size: var(--text-xs, 0.75rem);
  font-weight: 600;
  color: var(--text-muted, #94A3B8);
  margin: 0 0 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.oei-sidebar-gauge__value {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 8px;
}
.oei-sidebar-gauge__bar {
  height: 6px;
  background: var(--border-color, #E2E8F0);
  border-radius: 3px;
  overflow: hidden;
}
.oei-sidebar-gauge__fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.5s ease;
}
.oei-sidebar-gauge__label {
  display: flex;
  justify-content: space-between;
  font-size: 0.65rem;
  color: var(--text-muted, #94A3B8);
  margin-top: 4px;
}

/* Meta-Block (Netto, MwSt, Brutto) */
.oei-sidebar-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  background: var(--surface-alt, #F8FAFC);
  border: 1px solid var(--border-color, #E2E8F0);
  border-radius: 8px;
  margin-top: 4px;
}
.oei-sidebar-meta > div {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-sm, 0.875rem);
}
.oei-sidebar-meta__label {
  color: var(--text-muted, #94A3B8);
}

.oei-sidebar-loading {
  text-align: center;
  color: var(--text-muted, #94A3B8);
  font-size: var(--text-sm, 0.875rem);
  padding: 24px 0;
}

@media (max-width: 1024px) {
  .oei-editor-layout--with-sidebar {
    grid-template-columns: 1fr;
  }
  .oei-detail-sidebar {
    border-left: none;
    border-top: 1px solid var(--border-color, #E2E8F0);
  }
}