/*
============================================================
  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);
}

/* ============================================
   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;
}

.app-brand:hover,
.app-brand:focus {
  text-decoration: none;
}

.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);
}

@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--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-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-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);
}

/* ============================================
   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;
  }
}

/* ============================================
   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;
}

.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;
}

.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); }

/* ============================================
   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);
}

.form-select:not([multiple]):not([size]) {
  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); }

/* ============================================
   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: <div class="alert-soft alert-soft--warning">...</div>
============================================ */

.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--paid .invoice-open-meta,
#invoices-desktop .invoice-open-stack--partial .invoice-open-meta,
#invoices-desktop .invoice-open-stack--overdue .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-header > .list-mobile-card-identity > .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);
}

/* 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 — Aufteilung lt. Layoutvorgabe (Summe 100 %) */
#quotes-desktop.ds-table thead th:nth-child(1) { width: 10%; }
#quotes-desktop.ds-table thead th:nth-child(2) { width: 20%; }
#quotes-desktop.ds-table thead th:nth-child(3) { width: 30%; }
#quotes-desktop.ds-table thead th:nth-child(4),
#quotes-desktop.ds-table thead th:nth-child(5),
#quotes-desktop.ds-table thead th:nth-child(6) { width: 10%; }

#quotes-desktop.ds-table thead th:nth-child(7),
#quotes-desktop.ds-table tbody td.cell-actions {
  width:       10%;
  box-sizing:  border-box;
  min-width:   8.5rem;
  white-space: nowrap;
}

#quotes-desktop.ds-table tbody td:nth-child(3) {
  min-width: 0;
}

/* Auftragsbestätigungen: 8 Spalten — an Angebote angelehnt; Titel 20 % wegen zusätzlicher Spalte „Abrechnung“ */
#oc-desktop.ds-table thead th:nth-child(1) { width: 10%; }
#oc-desktop.ds-table thead th:nth-child(2) { width: 20%; }
#oc-desktop.ds-table thead th:nth-child(3) { width: 20%; }
#oc-desktop.ds-table thead th:nth-child(4),
#oc-desktop.ds-table thead th:nth-child(5),
#oc-desktop.ds-table thead th:nth-child(6),
#oc-desktop.ds-table thead th:nth-child(7),
#oc-desktop.ds-table thead th:nth-child(8) { width: 10%; }

#oc-desktop.ds-table tbody td.cell-actions {
  box-sizing:  border-box;
  min-width:   8.5rem;
  white-space: nowrap;
}

#oc-desktop.ds-table tbody td:nth-child(3) {
  min-width: 0;
}

#oc-desktop.ds-table thead th:nth-child(4),
#oc-desktop.ds-table thead th:nth-child(5),
#oc-desktop.ds-table thead th:nth-child(6),
#oc-desktop.ds-table thead th:nth-child(7),
#oc-desktop.ds-table tbody td:nth-child(4),
#oc-desktop.ds-table tbody td:nth-child(5),
#oc-desktop.ds-table tbody td:nth-child(6),
#oc-desktop.ds-table tbody td:nth-child(7) {
  padding-inline: var(--table-cell-padding-x, 0.65rem);
}

/* Lieferscheine: 6 Spalten — Nummer/Kunde-Spalten wie Angebot (10 / 20 %); Titel 40 %
   (ein „Preis“-Block entfällt → zusätzlicher Raum im Titel); Datum/Status/Aktion je 10 % */
#dn-desktop.ds-table thead th:nth-child(1) { width: 10%; }
#dn-desktop.ds-table thead th:nth-child(2) { width: 20%; }
#dn-desktop.ds-table thead th:nth-child(3) { width: 40%; }
#dn-desktop.ds-table thead th:nth-child(4),
#dn-desktop.ds-table thead th:nth-child(5),
#dn-desktop.ds-table thead th:nth-child(6) { width: 10%; }

#dn-desktop.ds-table tbody td.cell-actions {
  box-sizing:  border-box;
  min-width:   8.5rem;
  white-space: nowrap;
}

#dn-desktop.ds-table tbody td:nth-child(3) {
  min-width: 0;
}

#dn-desktop.ds-table thead th:nth-child(4),
#dn-desktop.ds-table thead th:nth-child(5),
#dn-desktop.ds-table tbody td:nth-child(4),
#dn-desktop.ds-table tbody td:nth-child(5) {
  padding-inline: var(--table-cell-padding-x, 0.65rem);
}

/* Rechnungen: 9 Spalten — Titel 18 %; Datum/Fällig je 7 %; Betrag/Offen je 10 %;
   Status 9 %; Aktion 13 % (Platz für 5 Icons inkl. XRechnung-XML-Download) */
#invoices-desktop.ds-table thead th:nth-child(1) { width: 10%; }
#invoices-desktop.ds-table thead th:nth-child(2) { width: 16%; }
#invoices-desktop.ds-table thead th:nth-child(3) { width: 18%; }
#invoices-desktop.ds-table thead th:nth-child(4),
#invoices-desktop.ds-table thead th:nth-child(5) { width: 7%; }
#invoices-desktop.ds-table thead th:nth-child(6),
#invoices-desktop.ds-table thead th:nth-child(7) { width: 10%; }
#invoices-desktop.ds-table thead th:nth-child(8) { width: 9%; }
#invoices-desktop.ds-table thead th:nth-child(9) { width: 13%; }

#invoices-desktop.ds-table tbody td.cell-actions {
  box-sizing:  border-box;
  min-width:   12rem; /* 5 Icons × 2rem + 4 × 2px Gap + Cell-Padding */
  white-space: nowrap;
}

#invoices-desktop.ds-table tbody td:nth-child(3) {
  min-width: 0;
}

#invoices-desktop.ds-table tbody td:nth-child(3) .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-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-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-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-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;
}

.project-doc-cards > .collapse.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),
.detail-form--locked select,
.detail-form--locked textarea:not(#contactNotes) {
  background-color: var(--form-bg-readonly);
  border-color:     var(--form-border);
  color:            var(--text-tertiary);
  cursor:           not-allowed;
}

.detail-form--locked input:not(#contactLockToggle):focus,
.detail-form--locked select:focus,
.detail-form--locked textarea:not(#contactNotes):focus {
  border-color: var(--form-border);
  box-shadow:   none;
}

.detail-form--locked #contactLockToggle {
  cursor: pointer;
}

.detail-form--locked label[for="contactLockToggle"] {
  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;
}

@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;
  }
}