:root {
  --hub-bg: #16191f;
  --hub-bg-soft: #1d222a;
  --hub-panel: #242a33;
  --hub-panel-soft: #2b333f;
  --hub-border: #3b4655;
  --hub-text: #eef3f8;
  --hub-muted: #a2adba;
  --hub-accent: #70d1b2;
  --hub-accent-soft: #8bc7ef;
  --hub-orange: #f0a35f;
  --hub-danger: #ef6f75;
}

* {
  box-sizing: border-box;
}

body.hub-theme {
  margin: 0;
  min-height: 100vh;
  font-family: "Montserrat", "Segoe UI", -apple-system, sans-serif;
  color: var(--hub-text);
  background: linear-gradient(180deg, #181c23 0%, var(--hub-bg) 36%, #14171d 100%);
}

body.hub-theme.modal-open {
  overflow: hidden;
}

body.hub-theme a {
  color: inherit;
  text-decoration: none;
}

.hub-shell {
  min-height: 100vh;
  position: relative;
}

.hub-sidebar {
  width: min(86vw, 300px);
  background: #191e26;
  border-right: 1px solid var(--hub-border);
  padding: 14px 12px;
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 50;
  transform: translateX(-104%);
  transition: transform 0.22s ease;
  overflow-y: auto;
  box-shadow: 10px 0 30px rgba(0, 0, 0, 0.35);
}

.hub-theme.nav-open .hub-sidebar {
  transform: translateX(0);
}

.hub-nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.46);
  z-index: 45;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}

.hub-theme.nav-open .hub-nav-backdrop {
  opacity: 1;
  pointer-events: auto;
}

/* Seitenleiste bewusst AUCH auf dem Desktop hinterm Burger-Menü (Tom-Wunsch
   2026-07-05: feste Desktop-Sidebar wieder entfernt – sie nahm Platz weg und
   schnitt Inhalte rechts ab). */

.hub-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 1.45rem;
  letter-spacing: 0.3px;
  margin-bottom: 18px;
  padding: 10px 8px;
}

.hub-logo-mark {
  color: var(--hub-orange);
}

.hub-nav {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hub-nav-section {
  color: var(--hub-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 11px;
  font-weight: 700;
  padding: 0 10px;
}

.hub-nav-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hub-nav-collapsible {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.12);
}

.hub-nav-summary {
  list-style: none;
  cursor: pointer;
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  font-size: 0.8rem;
  color: var(--hub-muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.hub-nav-summary::-webkit-details-marker {
  display: none;
}

.hub-nav-summary span {
  font-size: 0.72rem;
  transition: transform 0.15s ease;
}

.hub-nav-collapsible[open] .hub-nav-summary span {
  transform: rotate(180deg);
}

.hub-nav-subgroup {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 6px 8px 6px;
}

.hub-nav-sublink {
  display: block;
  border-radius: 7px;
  padding: 6px 8px;
  font-size: 0.82rem;
  color: #cfd7e4;
  border: 1px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.hub-nav-sublink:hover {
  background: rgba(123, 205, 240, 0.1);
  border-color: rgba(123, 205, 240, 0.25);
  color: #f5f8ff;
}

.hub-nav-link {
  display: flex;
  align-items: center;
  min-height: 38px;
  border-radius: 8px;
  border: 1px solid transparent;
  padding: 0 10px;
  color: #cfd7e4;
  font-size: 0.95rem;
  font-weight: 600;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.hub-nav-link:hover {
  background: rgba(123, 205, 240, 0.1);
  border-color: rgba(123, 205, 240, 0.25);
  color: #f5f8ff;
}

.hub-nav-link.active {
  background: rgba(123, 205, 240, 0.18);
  border-color: rgba(123, 205, 240, 0.35);
  color: #ffffff;
}

.hub-main {
  width: 100%;
  min-width: 0;
  min-height: 100vh;
}

.hub-topbar {
  height: 64px;
  border-bottom: 1px solid var(--hub-border);
  background: rgba(24, 28, 35, 0.92);
  backdrop-filter: blur(6px);
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
}

.hub-topbar-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.hub-topbar-title {
  color: #d9e1ed;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.hub-burger {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid var(--hub-border);
  background: #1d2530;
  color: #f3f6fc;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
}

.hub-burger:hover {
  background: #243141;
}

.hub-topbar-right {
  display: flex;
  gap: 8px;
}

.hub-top-pill {
  border: 1px solid var(--hub-border);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 0.78rem;
  color: var(--hub-muted);
}

.hub-top-user {
  align-self: center;
  font-size: 0.8rem;
  color: var(--hub-muted);
  white-space: nowrap;
  max-width: 40vw;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Erklär-Helfer (Phase C): Inline-Hilfe-Tooltip und Seiten-Intro */
.hub-help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #334155;
  color: #cbd5e1;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  cursor: help;
  position: relative;
  margin-left: 5px;
  vertical-align: middle;
  outline: none;
}
.hub-help:hover, .hub-help:focus { background: #3b82f6; color: #fff; }
.hub-help-bubble {
  display: none;
  position: absolute;
  bottom: 145%;
  left: 50%;
  transform: translateX(-50%);
  width: 240px;
  background: #0f172a;
  color: #e2e8f0;
  border: 1px solid #3b4757;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.45;
  text-align: left;
  white-space: normal;
  z-index: 60;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}
.hub-help:hover .hub-help-bubble,
.hub-help:focus .hub-help-bubble { display: block; }

.hub-page-intro {
  color: var(--hub-muted);
  font-size: 0.9rem;
  line-height: 1.5;
  margin: -2px 0 16px;
  max-width: 75ch;
}

.hub-help-list dt {
  font-weight: 700;
  color: #e2e8f0;
  margin-top: 12px;
}
.hub-help-list dt:first-child { margin-top: 0; }
.hub-help-list dd {
  margin: 2px 0 0;
  color: var(--hub-muted);
  font-size: 0.9rem;
  line-height: 1.45;
}

/* Freundlicher Empty-State für leere Listen */
.hub-empty {
  text-align: center;
  padding: 28px 16px;
  border: 1px dashed var(--hub-border);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
}
.hub-empty-text {
  color: var(--hub-muted);
  font-size: 0.92rem;
  line-height: 1.5;
  margin-bottom: 12px;
}
.hub-empty-action {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 8px;
  background: #1f2937;
  color: #f3f6fc;
  border: 1px solid var(--hub-border);
  font-size: 0.85rem;
  font-weight: 600;
}
.hub-empty-action:hover { background: #273244; }

/* Audit-Log Badges */
.audit-badge {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.audit-green { background: rgba(34, 197, 94, 0.16); color: #15803d; }
.audit-red { background: rgba(239, 68, 68, 0.16); color: #dc2626; }
.audit-blue { background: rgba(59, 130, 246, 0.16); color: #2563eb; }
.audit-amber { background: rgba(245, 158, 11, 0.18); color: #b45309; }
.audit-slate { background: rgba(100, 116, 139, 0.18); color: #475569; }
.audit-violet { background: rgba(139, 92, 246, 0.16); color: #7c3aed; }

/* Konto-Menü in der Topbar */
.hub-usermenu { position: relative; align-self: center; }
.hub-user-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #1d2530;
  color: #e7edf6;
  border: 1px solid var(--hub-border);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  max-width: 46vw;
}
.hub-user-btn:hover { background: #243141; }
.hub-user-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hub-user-caret { font-size: 0.7rem; color: var(--hub-muted); }
.hub-user-dropdown {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 200px;
  background: #1b2230;
  border: 1px solid var(--hub-border);
  border-radius: 12px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.5);
  padding: 6px;
  z-index: 1100;
}
.hub-user-dropdown.open { display: block; }
.hub-user-dropdown-info {
  font-size: 0.75rem;
  color: var(--hub-muted);
  padding: 6px 10px 8px;
  border-bottom: 1px solid var(--hub-border);
  margin-bottom: 4px;
}
.hub-user-dropdown-info strong { color: #e7edf6; }
.hub-user-dropdown-item {
  display: block;
  padding: 9px 10px;
  border-radius: 8px;
  color: #e7edf6;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
}
.hub-user-dropdown-item:hover { background: #273244; }

/* Konto-Sektion in der Seitenleiste (vor allem fürs Handy, wo die Topbar-rechts ausgeblendet ist) */
.hub-account-group { margin-top: 8px; border-top: 1px solid var(--hub-border); padding-top: 10px; }
.hub-account-name { padding: 6px 10px 4px; color: var(--hub-muted); font-size: 13px; font-weight: 600; word-break: break-word; }

.hub-content {
  padding: 20px;
}

.hub-breadcrumb {
  color: var(--hub-muted);
  font-size: 0.92rem;
  font-weight: 600;
}

.hub-breadcrumb span {
  color: #6e7e95;
  margin: 0 8px;
}

.hub-card {
  background: var(--hub-panel);
  border: 1px solid var(--hub-border);
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.16);
}

.hub-card-title {
  font-size: 1.08rem;
  font-weight: 700;
  margin-bottom: 12px;
}

.analytics-title-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.analytics-title {
  margin: 0;
  color: #ffffff;
  font-size: 1.85rem;
  line-height: 1.1;
  font-weight: 800;
}

.analytics-subtitle {
  margin-top: 6px;
  color: var(--hub-muted);
  font-size: 0.9rem;
  font-weight: 700;
}

.analytics-top-action,
.analytics-primary-button,
.analytics-secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  border-radius: 8px;
  padding: 0 13px;
  font-size: 0.82rem;
  font-weight: 800;
  white-space: nowrap;
}

.analytics-top-action,
.analytics-secondary-button {
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(8, 12, 18, 0.24);
  color: #dfe8f5;
}

.analytics-primary-button {
  border: 1px solid rgba(112, 209, 178, 0.36);
  background: #2f9277;
  color: #ffffff;
  cursor: pointer;
}

.analytics-tabs {
  display: flex;
  gap: 8px;
  align-items: center;
  overflow-x: auto;
  padding-bottom: 2px;
}

.analytics-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 0 14px;
  background: rgba(8, 12, 18, 0.24);
  color: #dfe8f5;
  font-size: 0.82rem;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}

.analytics-tab.active {
  border-color: rgba(112, 209, 178, 0.42);
  background: rgba(112, 209, 178, 0.16);
  color: #ffffff;
}

.analytics-panel[hidden] {
  display: none;
}

.analytics-filter-card {
  padding: 14px;
}

.analytics-filter-form {
  display: grid;
  gap: 14px;
}

.analytics-period-switch {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.analytics-period-option {
  min-height: 66px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 10px 12px;
  background: rgba(8, 12, 18, 0.2);
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease;
}

.analytics-period-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.analytics-period-option span {
  display: block;
  color: #f4f8ff;
  font-size: 0.94rem;
  line-height: 1.2;
  font-weight: 800;
}

.analytics-period-option small {
  display: block;
  margin-top: 5px;
  color: var(--hub-muted);
  font-size: 0.74rem;
  font-weight: 700;
}

.analytics-period-option.active {
  border-color: rgba(123, 205, 240, 0.45);
  background: rgba(123, 205, 240, 0.14);
}

.analytics-filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
  align-items: end;
}

.analytics-filter-grid > *,
.analytics-kpi,
.analytics-insight-card,
.analytics-tab,
.analytics-two-column > *,
.analytics-stock-box,
.analytics-segment-panel > div,
.analytics-country-row,
.analytics-band-row {
  min-width: 0;
}

.analytics-field {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.analytics-field span {
  color: var(--hub-muted);
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
}

.analytics-field input,
.analytics-field select {
  width: 100%;
  min-height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 0 10px;
  background: rgba(10, 16, 24, 0.42);
  color: var(--hub-text);
  font-size: 0.86rem;
  font-weight: 700;
}

.analytics-field input::placeholder {
  color: #6f7e91;
}

.analytics-filter-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.analytics-period-panel.hidden {
  display: none;
}

.analytics-kpi-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}

.analytics-kpi {
  min-height: 126px;
  display: grid;
  align-content: space-between;
  gap: 12px;
}

.analytics-kpi-strong {
  border-color: rgba(123, 205, 240, 0.32);
  background: linear-gradient(180deg, rgba(45, 63, 78, 0.96), rgba(36, 42, 51, 0.96));
}

.analytics-kpi-label,
.analytics-insight-label {
  color: var(--hub-muted);
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
}

.analytics-kpi-value {
  color: #ffffff;
  font-size: clamp(1.35rem, 2vw, 2rem);
  line-height: 1.02;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.analytics-kpi-meta {
  color: var(--hub-muted);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.35;
}

.analytics-insight-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.analytics-insight-card {
  min-height: 106px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 14px;
  background: rgba(20, 28, 40, 0.55);
}

.analytics-insight-value {
  margin-top: 10px;
  color: var(--hub-accent);
  font-size: 1.55rem;
  line-height: 1;
  font-weight: 800;
}

.analytics-insight-detail {
  margin-top: 8px;
  color: var(--hub-muted);
  font-size: 0.78rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.analytics-two-column {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
  gap: 14px;
  align-items: start;
}

.analytics-section-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 12px;
}

.analytics-section-note {
  color: var(--hub-muted);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.4;
}

.analytics-table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
}

.analytics-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 760px;
}

.analytics-table th {
  padding: 9px 8px;
  border-bottom: 1px solid var(--hub-border);
  color: var(--hub-muted);
  font-size: 0.72rem;
  font-weight: 800;
  text-align: left;
  text-transform: uppercase;
}

.analytics-table td {
  padding: 11px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  color: #eef3f8;
  font-size: 0.86rem;
  font-weight: 700;
  vertical-align: middle;
}

.analytics-row-title {
  color: #ffffff;
  font-weight: 800;
  line-height: 1.25;
}

.analytics-row-sub {
  margin-top: 3px;
  color: var(--hub-muted);
  font-size: 0.76rem;
  font-weight: 700;
}

.analytics-bar-label {
  margin-bottom: 4px;
  color: var(--hub-muted);
  font-size: 0.72rem;
  font-weight: 800;
  white-space: nowrap;
}

.analytics-bar {
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(91, 112, 139, 0.42);
}

.analytics-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #8bc7ef, #70d1b2);
}

.analytics-bar-profit span {
  background: linear-gradient(90deg, #f0a35f, #70d1b2);
}

.analytics-stock-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.analytics-stock-box {
  min-height: 116px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 12px;
  background: rgba(7, 11, 18, 0.2);
}

.analytics-stock-box span,
.analytics-stock-box small,
.analytics-segment-panel span {
  display: block;
  color: var(--hub-muted);
  font-size: 0.75rem;
  font-weight: 800;
}

.analytics-stock-box strong {
  display: block;
  margin: 10px 0 7px;
  color: #ffffff;
  font-size: 1.75rem;
  line-height: 1;
  font-weight: 800;
}

.analytics-band-list {
  display: grid;
  gap: 10px;
}

.analytics-band-row {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(130px, auto) minmax(200px, 0.8fr);
  gap: 12px;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  padding: 0 0 10px;
}

.analytics-band-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.analytics-band-metrics {
  display: grid;
  gap: 5px;
  justify-items: end;
  color: #ffffff;
  font-size: 0.86rem;
  font-weight: 800;
}

.analytics-band-bars,
.analytics-segment-bars,
.analytics-country-bars {
  display: grid;
  gap: 5px;
}

.analytics-segment-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.analytics-segment-panel > div {
  min-height: 92px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 12px;
  background: rgba(7, 11, 18, 0.2);
}

.analytics-segment-panel strong {
  display: block;
  margin-top: 10px;
  color: #ffffff;
  font-size: 1.32rem;
  line-height: 1.1;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.analytics-country-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.analytics-country-grid-compact {
  grid-template-columns: 1fr;
}

.analytics-country-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(190px, 0.7fr);
  gap: 14px;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 12px;
  background: rgba(7, 11, 18, 0.16);
}

.analytics-country-value {
  color: #ffffff;
  font-size: 1.08rem;
  font-weight: 800;
  white-space: nowrap;
}

.analytics-goal-stack {
  gap: 22px;
}

.analytics-empty-state {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 14px;
  background: rgba(7, 11, 18, 0.18);
  color: var(--hub-muted);
  font-size: 0.86rem;
  font-weight: 700;
}

.goal-overview-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.goal-summary-stack {
  display: grid;
  gap: 26px;
}

.goal-summary-section {
  display: grid;
  gap: 10px;
}

.goal-summary-title {
  margin: 0;
  color: #dbe6f3;
  font-size: 1.12rem;
  line-height: 1.2;
  font-weight: 800;
}

.goal-stat-card {
  min-height: 220px;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: 12px;
}

.goal-stat-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
}

.goal-stat-label {
  color: var(--hub-muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.goal-stat-value {
  margin-top: 4px;
  font-size: 1.45rem;
  line-height: 1.08;
  font-weight: 800;
  color: #ffffff;
}

.goal-stat-target {
  min-width: 104px;
  text-align: right;
  color: var(--hub-muted);
  font-size: 0.74rem;
  font-weight: 700;
}

.goal-stat-target strong {
  display: block;
  margin-top: 3px;
  color: var(--hub-text);
  font-size: 0.92rem;
  line-height: 1.15;
}

.goal-gauge-wrap {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 94px;
}

.goal-gauge {
  width: min(238px, 100%);
  height: auto;
  overflow: visible;
}

.goal-gauge-track,
.goal-gauge-fill {
  fill: none;
  stroke-linecap: round;
  stroke-width: 14;
}

.goal-gauge-track {
  stroke: rgba(123, 145, 171, 0.24);
}

.goal-gauge-fill {
  transition: stroke-dashoffset 0.28s ease;
}

.goal-gauge-number {
  position: absolute;
  bottom: 4px;
  font-size: 1.1rem;
  line-height: 1;
  font-weight: 800;
  color: var(--hub-text);
}

.goal-stat-line {
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(91, 112, 139, 0.48);
}

.goal-stat-line-fill {
  height: 100%;
  border-radius: inherit;
}

.goal-stat-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--hub-muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.goal-stat-meta strong {
  color: var(--hub-text);
  text-align: right;
}

.goal-detail-section {
  margin-top: 46px;
}

.goal-group-pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border-radius: 999px;
  padding: 2px 9px;
  background: rgba(123, 205, 240, 0.12);
  border: 1px solid rgba(123, 205, 240, 0.24);
  color: #d9ecfb;
  font-size: 0.74rem;
  font-weight: 800;
  white-space: nowrap;
}

@media (min-width: 760px) {
  .goal-overview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1180px) {
  .goal-overview-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1540px) {
  .goal-overview-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 1320px) {
  .analytics-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .analytics-insight-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .analytics-two-column {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  .analytics-title-row {
    align-items: stretch;
    flex-direction: column;
  }

  .analytics-period-switch,
  .analytics-kpi-grid,
  .analytics-insight-grid,
  .analytics-stock-grid,
  .analytics-segment-panel,
  .analytics-country-grid {
    grid-template-columns: 1fr;
  }

  .analytics-filter-grid {
    grid-template-columns: 1fr;
  }

  .analytics-filter-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .analytics-tabs {
    align-items: stretch;
    flex-direction: column;
  }

  .analytics-primary-button,
  .analytics-secondary-button,
  .analytics-top-action,
  .analytics-tab {
    width: 100%;
  }

  .analytics-band-row,
  .analytics-country-row {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .analytics-band-metrics {
    justify-items: start;
  }
}

.hub-edit-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.hub-edit-title {
  margin: 0;
  font-size: 1.6rem;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.hub-edit-subtitle {
  margin: 6px 0 0;
  color: var(--hub-muted);
  font-size: 0.9rem;
  font-weight: 600;
}

.hub-edit-stack {
  display: grid;
  gap: 14px;
}

.hub-edit-card {
  background: var(--hub-panel);
  border: 1px solid var(--hub-border);
  border-radius: 8px;
  padding: 14px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
}

.hub-edit-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.hub-edit-card-title {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 800;
}

.hub-edit-card-note {
  margin: 0;
  color: var(--hub-muted);
  font-size: 0.78rem;
  font-weight: 600;
}

.hub-edit-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.hub-edit-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.hub-edit-field > span,
.hub-edit-field > div > span:first-child {
  color: var(--hub-muted);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.hub-edit-help {
  color: var(--hub-muted);
  font-size: 0.74rem;
  font-weight: 600;
}

.hub-edit-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 8px 10px;
  background: rgba(0, 0, 0, 0.12);
  font-weight: 700;
}

.hub-edit-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.hub-edit-stat-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.hub-edit-stat {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 10px;
  background: rgba(0, 0, 0, 0.13);
}

.hub-edit-stat-label {
  color: var(--hub-muted);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 700;
}

.hub-edit-stat-value {
  font-size: 1.02rem;
  font-weight: 800;
  margin-top: 2px;
}

.hub-task-row {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  padding: 9px 10px;
  font-size: 0.92rem;
}

.hub-task-row-link {
  justify-content: space-between;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.hub-task-row-link:hover {
  background: rgba(123, 205, 240, 0.14);
  border-color: rgba(123, 205, 240, 0.34);
}

.hub-task-action {
  color: var(--hub-accent-soft);
  font-weight: 700;
  font-size: 0.78rem;
}

.hub-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display: inline-block;
}

.hub-dot-orange {
  background: var(--hub-orange);
}

.hub-dot-teal {
  background: var(--hub-accent);
}

.hub-tabs {
  display: flex;
  gap: 8px;
}

.hub-tab {
  color: var(--hub-muted);
  font-size: 0.88rem;
  padding: 5px 10px;
  border-radius: 8px;
  border: 1px solid transparent;
}

.hub-tab.active {
  color: #ebf1fa;
  border-color: rgba(123, 205, 240, 0.35);
  background: rgba(123, 205, 240, 0.12);
}

.hub-mini-table thead th {
  color: var(--hub-muted);
  border-bottom: 1px solid var(--hub-border);
  font-weight: 700;
}

.hub-mini-table tbody td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

button[data-shipping-submit]:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: saturate(0.55);
}

.shipping-time-input:disabled {
  opacity: 0.65;
}

.hub-kpi-value {
  font-size: 2.2rem;
  line-height: 1;
  font-weight: 800;
}

.hub-kpi-blue {
  color: var(--hub-accent-soft);
}

.hub-kpi-white {
  color: #ffffff;
}

.hub-kpi-green {
  color: var(--hub-accent);
}

.hub-kpi-label {
  color: var(--hub-muted);
  font-size: 0.88rem;
  font-weight: 700;
  margin-top: 2px;
}

.hub-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.hub-list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.hub-list-row:last-child {
  border-bottom: 0;
}

.hub-list-title {
  font-weight: 700;
  line-height: 1.25;
}

.hub-list-meta {
  color: var(--hub-muted);
  font-size: 0.83rem;
  margin-top: 2px;
}

.hub-list-time {
  color: var(--hub-muted);
  font-size: 0.83rem;
  white-space: nowrap;
}

.hub-sale-amount {
  color: var(--hub-accent);
  font-weight: 800;
}

.hub-link-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 0.72rem;
  font-weight: 700;
  margin-bottom: 4px;
  border: 1px solid transparent;
}

.hub-link-own {
  color: #9be6cf;
  background: rgba(114, 228, 192, 0.14);
  border-color: rgba(114, 228, 192, 0.35);
}

.hub-link-cons {
  color: #9fdffb;
  background: rgba(123, 205, 240, 0.15);
  border-color: rgba(123, 205, 240, 0.35);
}

.hub-data-table thead th {
  color: var(--hub-muted);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--hub-border);
  font-weight: 700;
}

.hub-data-table tbody tr {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.hub-data-table tbody tr:hover {
  background: rgba(123, 205, 240, 0.08);
}

.hub-order-metric-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  min-width: 0;
}

.hub-order-metric-grid div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
  min-width: 0;
}

.hub-order-metric-grid span {
  color: var(--hub-muted);
  font-size: 0.7rem;
  line-height: 1.2;
  white-space: normal;
  word-break: break-word;
}

.hub-order-metric-grid b {
  font-weight: 700;
  font-size: 0.84rem;
  text-align: right;
  white-space: nowrap;
  line-height: 1.2;
}

.hub-action-details > summary {
  list-style: none;
}

.hub-action-details > summary::-webkit-details-marker {
  display: none;
}

.order-item-card {
  overflow: visible;
}

.order-item-card .hub-action-details {
  position: relative;
}

.order-item-card .hub-action-details[open] {
  z-index: 20;
}

.order-item-card .hub-action-details > div {
  overflow: visible;
}

.profit-value {
  font-weight: 700;
}

.profit-positive {
  color: #34d399 !important;
}

.profit-negative {
  color: #f87171 !important;
}

.profit-zero {
  color: var(--hub-text) !important;
}

body.hub-theme .bg-slate-50 {
  background-color: transparent !important;
}

body.hub-theme .bg-white {
  background-color: var(--hub-panel) !important;
}

body.hub-theme .bg-slate-100 {
  background-color: var(--hub-panel-soft) !important;
}

body.hub-theme .text-slate-900 {
  color: var(--hub-text) !important;
}

body.hub-theme .text-slate-700,
body.hub-theme .text-slate-600,
body.hub-theme .text-slate-500 {
  color: var(--hub-muted) !important;
}

body.hub-theme .border,
body.hub-theme .border-t,
body.hub-theme .border-b,
body.hub-theme .border-l,
body.hub-theme .border-r {
  border-color: var(--hub-border) !important;
}

body.hub-theme .rounded-lg,
body.hub-theme .rounded {
  border-radius: 8px !important;
}

body.hub-theme .shadow,
body.hub-theme .shadow-sm {
  box-shadow: 0 7px 22px rgba(0, 0, 0, 0.18) !important;
}

body.hub-theme input,
body.hub-theme select,
body.hub-theme textarea {
  color: #edf2f9 !important;
  background: #1f252e !important;
  border: 1px solid var(--hub-border) !important;
}

body.hub-theme input::placeholder,
body.hub-theme textarea::placeholder {
  color: #8190a5 !important;
}

body.hub-theme .bg-slate-900 {
  background-color: #0f141b !important;
  color: #f5f8ff !important;
}

body.hub-theme .bg-slate-200 {
  background-color: #3a4353 !important;
  color: #e6edf8 !important;
}

body.hub-theme .bg-emerald-600 {
  background-color: #1f9c7b !important;
}

body.hub-theme .bg-sky-600 {
  background-color: #2f8ac2 !important;
}

body.hub-theme .text-emerald-700 {
  color: #72e4c0 !important;
}

body.hub-theme .text-amber-700 {
  color: #f7be75 !important;
}

body.hub-theme .bg-emerald-50 {
  background: rgba(29, 145, 117, 0.18) !important;
}

body.hub-theme .border-emerald-200 {
  border-color: rgba(35, 168, 134, 0.45) !important;
}

body.hub-theme .text-emerald-800 {
  color: #8ee8cd !important;
}

body.hub-theme .bg-amber-50 {
  background: rgba(242, 156, 84, 0.17) !important;
}

body.hub-theme .border-amber-200 {
  border-color: rgba(242, 156, 84, 0.4) !important;
}

body.hub-theme .text-amber-900,
body.hub-theme .text-amber-800 {
  color: #f8d3a6 !important;
}

/* Restliche dunkle Textklassen aus der hellen Zeit: ohne diese Übersetzung
   stehen sie dunkel-auf-dunkel (z. B. rote Lösch-Links, blaue Detail-Links). */
body.hub-theme .text-slate-800 {
  color: var(--hub-text) !important;
}

body.hub-theme .text-red-700,
body.hub-theme .text-red-600,
body.hub-theme .text-rose-800,
body.hub-theme .text-rose-700 {
  color: #ffb4b8 !important;
}

body.hub-theme .text-blue-700,
body.hub-theme .text-sky-800,
body.hub-theme .text-sky-700 {
  color: #9fdffb !important;
}

body.hub-theme .text-emerald-600 {
  color: #72e4c0 !important;
}

body.hub-theme .text-amber-600 {
  color: #f7be75 !important;
}

body.hub-theme table tbody tr:hover {
  background: rgba(123, 205, 240, 0.08);
}

.hub-date-filter {
  border: 1px solid rgba(123, 205, 240, 0.22);
  border-radius: 8px;
  padding: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(0, 0, 0, 0.08));
}

.hub-date-filter-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.hub-date-filter-title {
  font-size: 1rem;
  font-weight: 800;
  color: #f5f8ff;
}

.hub-date-filter-note {
  margin-top: 4px;
  color: var(--hub-muted);
  font-size: 0.8rem;
  font-weight: 600;
  max-width: 44rem;
}

.hub-date-filter-badge {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(123, 205, 240, 0.24);
  background: rgba(14, 20, 29, 0.42);
  color: #edf5ff;
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
}

.hub-period-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.hub-period-mode {
  border: 1px solid rgba(123, 205, 240, 0.14);
  border-radius: 8px;
  padding: 12px;
  background: rgba(8, 12, 18, 0.22);
  text-align: left;
  min-height: 86px;
  cursor: pointer;
  transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

.hub-period-mode:hover {
  transform: translateY(-1px);
  border-color: rgba(123, 205, 240, 0.3);
  background: rgba(20, 28, 40, 0.36);
}

.hub-period-mode.active {
  border-color: rgba(123, 205, 240, 0.48);
  background: rgba(123, 205, 240, 0.16);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04), 0 10px 28px rgba(1, 7, 15, 0.28);
}

.hub-period-mode-label {
  display: block;
  font-size: 0.94rem;
  font-weight: 800;
  color: #f6f9ff;
}

.hub-period-mode-meta {
  display: block;
  margin-top: 4px;
  color: var(--hub-muted);
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1.4;
}

.hub-period-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.hub-period-quick-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.hub-period-quick {
  min-height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 0 12px;
  background: rgba(8, 12, 18, 0.24);
  color: #e8effa;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease;
}

.hub-period-quick:hover {
  border-color: rgba(123, 205, 240, 0.32);
  background: rgba(123, 205, 240, 0.12);
}

.hub-period-panels {
  min-height: 86px;
}

.hub-period-panel {
  display: none;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 14px;
  background: rgba(6, 10, 16, 0.18);
}

.hub-period-panel.active {
  display: block;
}

.hub-period-panel-copy {
  color: var(--hub-muted);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.5;
}

.hub-client-hero {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(123, 205, 240, 0.24);
  border-radius: 8px;
  padding: 24px;
  background: linear-gradient(145deg, rgba(35, 41, 52, 0.98) 0%, rgba(23, 27, 35, 0.96) 100%);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.24);
}

.hub-client-hero::after {
  content: none;
}

.hub-client-hero-top {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  position: relative;
  z-index: 1;
}

.hub-client-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.hub-client-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  border-radius: 999px;
  border: 1px solid transparent;
  padding: 0 12px;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.hub-client-badge-code {
  background: rgba(123, 205, 240, 0.16);
  border-color: rgba(123, 205, 240, 0.34);
  color: #dff5ff;
}

.hub-client-badge-active {
  background: rgba(114, 228, 192, 0.14);
  border-color: rgba(114, 228, 192, 0.34);
  color: #9be6cf;
}

.hub-client-badge-inactive {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
  color: #d5deea;
}

.hub-client-badge-contract {
  background: rgba(242, 153, 95, 0.14);
  border-color: rgba(242, 153, 95, 0.34);
  color: #ffd3b7;
}

.hub-client-inline-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 12px;
  color: var(--hub-muted);
  font-size: 0.86rem;
  font-weight: 700;
}

.hub-client-inline-meta span {
  position: relative;
}

.hub-client-inline-meta span:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -10px;
  top: 50%;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: rgba(158, 171, 189, 0.7);
  transform: translateY(-50%);
}

.hub-client-hero-side {
  display: grid;
  gap: 14px;
}

.hub-client-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-start;
}

.hub-client-side-metrics {
  display: grid;
  gap: 10px;
}

.hub-client-side-metric {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 14px;
  background: rgba(8, 12, 18, 0.24);
}

.hub-client-side-metric-label {
  color: var(--hub-muted);
  font-size: 0.73rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hub-client-side-metric-value {
  margin-top: 6px;
  font-size: 1.5rem;
  line-height: 1.05;
  font-weight: 800;
  color: #f7fbff;
}

.hub-client-side-metric-note {
  margin-top: 6px;
  color: var(--hub-muted);
  font-size: 0.79rem;
  line-height: 1.45;
  font-weight: 600;
}

.hub-client-quick-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 18px;
  position: relative;
  z-index: 1;
}

.hub-client-quick-card {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 14px 15px;
  background: rgba(7, 11, 17, 0.2);
  min-width: 0;
}

.hub-client-quick-label {
  color: var(--hub-muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hub-client-quick-value {
  margin-top: 8px;
  font-size: 1rem;
  line-height: 1.35;
  font-weight: 700;
  color: #f4f8ff;
  word-break: break-word;
}

.hub-client-quick-value a,
.hub-client-data-value a {
  color: #f4f8ff;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-color: rgba(123, 205, 240, 0.42);
  text-underline-offset: 3px;
}

.hub-client-quick-note {
  margin-top: 8px;
  color: var(--hub-muted);
  font-size: 0.8rem;
  line-height: 1.45;
  font-weight: 600;
}

.hub-client-panel-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.hub-client-panel {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 14px;
  background: rgba(6, 10, 16, 0.17);
}

.hub-client-panel-title {
  margin-bottom: 12px;
  color: var(--hub-muted);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hub-client-data-list {
  display: grid;
  gap: 12px;
}

.hub-client-data-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  align-items: start;
  min-width: 0;
}

.hub-client-data-label {
  color: var(--hub-muted);
  font-size: 0.8rem;
  font-weight: 700;
}

.hub-client-data-value {
  min-width: 0;
  color: #f4f8ff;
  font-weight: 700;
  word-break: break-word;
}

.hub-client-placeholder {
  color: var(--hub-muted);
  font-weight: 700;
}

.hub-client-note {
  color: #f1f6fd;
  line-height: 1.7;
  font-weight: 600;
  white-space: pre-wrap;
}

.hub-client-metric-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.hub-client-metric-card {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 15px;
  background: linear-gradient(180deg, rgba(8, 12, 18, 0.22) 0%, rgba(8, 12, 18, 0.1) 100%);
}

.hub-client-metric-label {
  color: var(--hub-muted);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hub-client-metric-value {
  margin-top: 8px;
  font-size: 1.72rem;
  line-height: 1.02;
  font-weight: 800;
  color: #f7fbff;
}

.hub-client-metric-note {
  margin-top: 8px;
  color: var(--hub-muted);
  font-size: 0.8rem;
  line-height: 1.45;
  font-weight: 600;
}

.hub-client-table-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.hub-client-search {
  width: min(430px, 100%);
}

.hub-client-status-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  border-radius: 999px;
  border: 1px solid transparent;
  padding: 0 10px;
  font-size: 0.76rem;
  font-weight: 800;
  white-space: nowrap;
}

.hub-client-status-tag.sold {
  color: #9be6cf;
  background: rgba(114, 228, 192, 0.14);
  border-color: rgba(114, 228, 192, 0.34);
}

.hub-client-status-tag.live {
  color: #d9e1ed;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
}

@media (min-width: 860px) {
  .hub-client-panel-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hub-period-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .hub-edit-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hub-edit-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .hub-edit-stat-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 1100px) {
  .hub-content {
    padding: 14px;
  }

  .hub-content > * {
    min-width: 0;
  }

  .hub-topbar {
    position: static;
    height: auto;
    padding: 10px 14px;
  }

  .hub-topbar-left {
    min-width: 0;
  }

  .hub-topbar-title {
    max-width: calc(100vw - 110px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .hub-topbar-right {
    display: none;
  }

  .hub-content .flex.items-center.justify-between {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px;
  }

  .hub-content > .flex.items-center.justify-between > .flex.gap-2,
  .hub-content form.flex.gap-2,
  .hub-content form .flex.gap-2 {
    flex-wrap: wrap;
  }

  .hub-content > .flex.items-center.justify-between > .flex.gap-2 > a,
  .hub-content > .flex.items-center.justify-between > .flex.gap-2 > button,
  .hub-content form .flex.gap-2 > a,
  .hub-content form .flex.gap-2 > button {
    max-width: 100%;
  }

  .hub-task-row {
    flex-wrap: wrap;
  }

  .hub-task-action {
    margin-left: auto;
  }

  .hub-list-row {
    align-items: flex-start;
  }

  .hub-date-filter-head {
    flex-direction: column;
  }

  .hub-date-filter-badge {
    width: 100%;
    justify-content: center;
    white-space: normal;
  }

  .hub-period-toolbar {
    align-items: stretch;
  }

  .hub-list-time {
    white-space: normal;
    text-align: right;
  }

  .hub-kpi-value {
    font-size: 1.75rem;
  }

  .hub-client-hero {
    padding: 18px;
    border-radius: 8px;
  }

  .hub-client-inline-meta span::after {
    display: none;
  }

  .hub-table-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }

  .hub-table-scroll > table {
    width: max-content;
    min-width: 100%;
    margin: 0;
  }
}

@media (min-width: 960px) {
  .hub-client-hero-top {
    grid-template-columns: minmax(0, 1.65fr) minmax(280px, 0.95fr);
    align-items: start;
  }

  .hub-client-hero-actions {
    justify-content: flex-end;
  }

  .hub-client-quick-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .hub-client-metric-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .hub-client-data-row {
    grid-template-columns: minmax(110px, 0.78fr) minmax(0, 1.35fr);
    gap: 12px;
  }
}

@media (min-width: 640px) and (max-width: 959px) {
  .hub-client-quick-grid,
  .hub-client-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.client-detail-header {
  padding: 20px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.025) 0%, rgba(0, 0, 0, 0.08) 100%);
}

.client-detail-header-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.client-detail-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.client-detail-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(123, 205, 240, 0.22);
  background: rgba(123, 205, 240, 0.1);
  color: #e5f6ff;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.client-detail-chip.active {
  border-color: rgba(114, 228, 192, 0.3);
  background: rgba(114, 228, 192, 0.11);
  color: #9be6cf;
}

.client-detail-chip.subtle {
  border-color: rgba(242, 153, 95, 0.26);
  background: rgba(242, 153, 95, 0.1);
  color: #ffd8bf;
}

.client-detail-chip.muted {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.06);
  color: #d4dbe7;
}

.client-detail-title {
  margin: 0;
  font-size: 2rem;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.client-detail-subline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 10px;
  color: var(--hub-muted);
  font-size: 0.88rem;
  font-weight: 600;
}

.client-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.client-detail-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.client-detail-summary-item {
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.12);
}

.client-detail-summary-item.strong {
  border-color: rgba(123, 205, 240, 0.2);
  background: rgba(123, 205, 240, 0.08);
}

.client-detail-summary-label,
.client-detail-kpi-label {
  color: var(--hub-muted);
  font-size: 0.73rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.client-detail-summary-value,
.client-detail-data-value {
  min-width: 0;
  margin-top: 6px;
  color: #f4f8ff;
  font-weight: 700;
  line-height: 1.45;
  word-break: break-word;
}

.client-detail-summary-value a,
.client-detail-data-value a {
  color: #f4f8ff;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-color: rgba(123, 205, 240, 0.42);
  text-underline-offset: 3px;
}

.client-detail-summary-meta,
.client-detail-section-note,
.client-detail-empty {
  color: var(--hub-muted);
}

.client-detail-summary-meta {
  margin-top: 4px;
  font-size: 0.82rem;
  font-weight: 600;
}

.client-detail-summary-sep {
  color: var(--hub-muted);
  margin: 0 6px;
}

.client-detail-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}

.client-detail-card {
  padding: 16px;
}

.client-detail-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.client-detail-section-title {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 800;
}

.client-detail-section-note {
  margin-top: 4px;
  font-size: 0.82rem;
  font-weight: 600;
}

.client-detail-data-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.client-detail-data-row {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.client-detail-data-row:first-child {
  padding-top: 0;
  border-top: 0;
}

.client-detail-data-label {
  color: var(--hub-muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.client-detail-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.client-detail-kpi {
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.1);
}

.client-detail-kpi.highlight {
  border-color: rgba(123, 205, 240, 0.22);
  background: rgba(123, 205, 240, 0.08);
}

.client-detail-kpi-value {
  margin-top: 8px;
  font-size: 1.45rem;
  line-height: 1.05;
  font-weight: 800;
  color: #f7fbff;
}

.client-detail-note {
  margin-top: 14px;
  color: #f4f8ff;
  line-height: 1.7;
  font-weight: 600;
  white-space: pre-wrap;
}

.client-detail-table-head {
  align-items: center;
}

.client-detail-table-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.client-detail-search {
  width: min(360px, 100%);
}

.client-detail-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.75rem;
  font-weight: 800;
  white-space: nowrap;
}

.client-detail-tag.sold,
.client-detail-tag.paid {
  color: #9be6cf;
  background: rgba(114, 228, 192, 0.12);
  border-color: rgba(114, 228, 192, 0.28);
}

.client-detail-tag.live,
.client-detail-tag.pending {
  color: #d9e1ed;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
}

@media (max-width: 860px) {
  .work-desktop-secondary {
    display: none !important;
  }

  .hub-content:has(.work-entry-card) {
    padding-bottom: max(18px, env(safe-area-inset-bottom));
  }

  .hub-content .hub-card:has(form[action="/work/start"]) {
    border-color: rgba(52, 211, 153, 0.34);
    background: rgba(16, 185, 129, 0.08);
  }

  .hub-content form[action="/work/start"] select,
  .hub-content form[action="/work/start"] input {
    min-height: 48px;
    font-size: 1rem;
  }

  .hub-content form[action="/work/start"] button {
    width: 100%;
    min-height: 52px;
    font-size: 1.05rem;
    font-weight: 800;
  }

  .work-entry-card details summary {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  .client-detail-header,
  .client-detail-card {
    padding: 14px;
  }

  .client-detail-title {
    font-size: 1.6rem;
  }

  .client-detail-data-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .client-detail-table-controls {
    width: 100%;
  }

  .client-detail-table-controls > * {
    width: 100%;
  }

  .client-detail-search {
    width: 100%;
  }
}

/* Modals scrollbar machen, wenn ihr Inhalt höher als der Bildschirm ist
   (v. a. Handy, z. B. der Filter auf „Auszahlungen offen" mit Kalenderfilter).
   Vorher zentrierte `align-items:center` das Fenster; war es höher als der
   Viewport, ließen sich oberer/unterer Rand nicht erreichen (bekanntes
   Flexbox+Overflow-Verhalten). `overflow-y:auto` am Overlay + `margin:auto`
   am Fenster zentrieren weiterhin, erlauben aber das Scrollen an beide Enden.
   Modals mit eigener max-h/Innen-Scroll-Logik bleiben unberührt. */
.modal-overlay {
  overflow-y: auto;
}

.modal-overlay > * {
  margin-top: auto;
  margin-bottom: auto;
}

/* ================= Arbeitszeit-Analytics (Charts) ================= */
/* Eigene Klassen (kein Tailwind), damit kein CSS-Rebuild nötig ist. */

.work-chart-hint {
  color: var(--hub-muted);
  font-size: 0.75rem;
}

.work-kpi-accent {
  color: var(--hub-accent);
}

/* Horizontale Balken (Wochentage) */
.work-bar-row {
  display: grid;
  grid-template-columns: 2.25rem 1fr auto;
  align-items: center;
  gap: 0.75rem;
}

.work-bar-label {
  font-size: 0.8rem;
  color: var(--hub-text);
}

.work-bar-label.is-weekend {
  color: var(--hub-muted);
}

.work-bar-track {
  position: relative;
  height: 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.work-bar-fill {
  height: 100%;
  min-width: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--hub-accent), var(--hub-accent-soft));
}

.work-bar-fill.is-weekend {
  background: linear-gradient(90deg, #6d7684, #8b94a3);
}

.work-bar-value {
  font-size: 0.78rem;
  color: var(--hub-muted);
  font-variant-numeric: tabular-nums;
  min-width: 4.5rem;
  text-align: right;
}

/* Vertikale Säulen (Uhrzeiten, Monate, Tage) */
.work-col-chart {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 130px;
}

.work-col-chart.is-tall {
  height: 150px;
}

.work-col {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
  max-width: 56px; /* verhindert einen bildschirmbreiten Einzelbalken bei sehr kurzen Zeiträumen */
  height: 100%;
}

/* Stundenwert über der Säule. Feste Höhe, damit alle Säulen dieselbe
   Zeichenfläche behalten und die Prozent-Höhen vergleichbar bleiben. */
.work-col-value {
  height: 13px;
  line-height: 13px;
  font-size: 0.62rem;
  color: var(--hub-muted);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  font-variant-numeric: tabular-nums;
}

/* Bei sehr vielen Säulen (lange Zeiträume) passen die Werte nicht mehr –
   dann nur Tooltip. */
.work-col-chart.is-dense .work-col-value {
  visibility: hidden;
}

.work-col-barbox {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: flex-end;
}

.work-col-bar {
  width: 100%;
  min-height: 2px;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, var(--hub-accent-soft), var(--hub-accent));
}

.work-col-bar.is-empty {
  background: rgba(255, 255, 255, 0.05);
}

.work-col-bar.is-weekend {
  background: linear-gradient(180deg, #8b94a3, #6d7684);
}

.work-col-bar.is-peak {
  background: linear-gradient(180deg, var(--hub-orange), #e0824a);
}

.work-axis {
  display: flex;
  justify-content: space-between;
  color: var(--hub-muted);
  font-size: 0.62rem;
  margin-top: 4px;
}

/* Heatmap Mitarbeiter x Wochentag */
.work-heat {
  width: 100%;
  border-collapse: separate;
  border-spacing: 4px;
}

.work-heat th {
  font-size: 0.7rem;
  color: var(--hub-muted);
  font-weight: 600;
  text-align: center;
  padding: 2px 0;
}

.work-heat th.work-heat-name,
.work-heat td.work-heat-name {
  text-align: left;
  white-space: nowrap;
}

.work-heat-name-main {
  font-size: 0.85rem;
  color: var(--hub-text);
}

.work-heat-name-sub {
  font-size: 0.68rem;
  color: var(--hub-muted);
}

.work-heat-cell {
  text-align: center;
  border-radius: 6px;
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  color: var(--hub-text);
  padding: 8px 2px;
  background: rgba(112, 209, 178, 0.06);
}

.work-heat-cell.is-zero {
  color: var(--hub-muted);
  opacity: 0.55;
}

.work-heat-cell.is-weekend.is-zero {
  background: rgba(255, 255, 255, 0.03);
}

/* Gestapelter Balken: wer macht was */
.work-stack {
  display: flex;
  height: 16px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
}

.work-stack-seg {
  height: 100%;
  min-width: 2px;
}

.work-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: 0.75rem;
  color: var(--hub-muted);
}

.work-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.work-swatch {
  width: 11px;
  height: 11px;
  border-radius: 3px;
  flex: none;
}

/* Kategorie-/Serien-Palette */
.work-cat-0 { background: #70d1b2; }
.work-cat-1 { background: #8bc7ef; }
.work-cat-2 { background: #f0a35f; }
.work-cat-3 { background: #c99bec; }
.work-cat-4 { background: #f2c14e; }
.work-cat-5 { background: #ef8fa0; }
.work-cat-6 { background: #7ee0d1; }
.work-cat-7 { background: #a3b18a; }
.work-cat-8 { background: #f28b82; }
.work-cat-9 { background: #80cbc4; }
.work-cat-10 { background: #aecbfa; }
.work-cat-11 { background: #d7aefb; }
.work-cat-12 { background: #fdcfe8; }
.work-cat-13 { background: #fff475; }
.work-cat-14 { background: #ccff90; }
.work-cat-15 { background: #cbf0f8; }

/* Tagesverlauf mit vollständiger Datumsachse und Durchschnittslinie. */
.work-daily-scroll {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 0 5px;
  scrollbar-width: thin;
}

.work-daily-chart {
  min-width: max(100%, calc(var(--work-day-count) * 30px));
}

.work-daily-values,
.work-daily-bars,
.work-daily-dates {
  display: grid;
  grid-template-columns: repeat(var(--work-day-count), minmax(0, 1fr));
  gap: 3px;
}

.work-daily-values {
  min-height: 16px;
  align-items: end;
}

.work-daily-values span {
  overflow: hidden;
  color: var(--hub-muted);
  font-size: 0.6rem;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-align: center;
  text-overflow: clip;
  white-space: nowrap;
}

.work-daily-bars {
  position: relative;
  height: 124px;
  align-items: end;
  margin-top: 2px;
}

.work-daily-column {
  display: flex;
  align-items: flex-end;
  align-self: stretch;
  min-width: 0;
}

.work-daily-column .work-col-bar {
  position: relative;
  z-index: 2;
}

.work-daily-average-line {
  position: absolute;
  right: 0;
  left: 0;
  z-index: 4;
  height: 0;
  border-top: 2px dashed #f5b04c;
  pointer-events: none;
}

.work-daily-average-line span {
  position: absolute;
  right: 2px;
  bottom: 3px;
  padding: 2px 5px;
  border: 1px solid rgba(245, 176, 76, 0.5);
  border-radius: 5px;
  background: rgba(36, 42, 51, 0.9);
  color: #ffd698;
  font-size: 0.64rem;
  font-weight: 800;
  line-height: 1.1;
  white-space: nowrap;
}

.work-daily-dates {
  margin-top: 5px;
}

.work-daily-dates span {
  color: var(--hub-muted);
  font-size: 0.58rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
}

.work-daily-dates span.is-weekend {
  color: #8b94a3;
}

/* Umschalter Kategorie / genaue Aktivität bei „Wer macht was?“. */
.work-activity-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.work-segmented-control {
  display: inline-flex;
  flex: none;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--hub-border);
  border-radius: 9px;
  background: rgba(0, 0, 0, 0.16);
}

.work-segmented-control button {
  min-height: 34px;
  padding: 5px 10px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--hub-muted);
  font: inherit;
  font-size: 0.74rem;
  font-weight: 800;
  cursor: pointer;
}

.work-segmented-control button:hover {
  color: var(--hub-text);
}

.work-segmented-control button.active {
  border-color: rgba(123, 205, 240, 0.35);
  background: rgba(123, 205, 240, 0.15);
  color: #ffffff;
}

[data-work-activity-panel][hidden] {
  display: none;
}

@media (max-width: 640px) {
  .work-activity-head {
    flex-direction: column;
  }

  .work-segmented-control {
    width: 100%;
  }

  .work-segmented-control button {
    flex: 1 1 0;
  }
}

/* --- UX-Paket 2026-07-02 ------------------------------------------------- */

/* Schnellsuche über großen Tabellen: filtert sofort clientseitig. */
.hub-quicksearch {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.hub-quicksearch input[type="search"] {
  flex: 1 1 220px;
  min-width: 0;
  background: #1f252e;
  color: #edf2f9;
  border: 1px solid var(--hub-border);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 0.9rem;
  font-family: inherit;
}

.hub-quicksearch input[type="search"]:focus {
  outline: 2px solid var(--hub-accent-soft);
  outline-offset: 1px;
}

.hub-quicksearch-count {
  color: var(--hub-muted);
  font-size: 12px;
  white-space: nowrap;
}

/* Buttons in Formularen mit data-loading-text während des Absendens. */
.hub-btn-loading {
  opacity: 0.7;
  cursor: progress;
}

/* Tabellenkopf bleibt beim Scrollen sichtbar (nur Desktop; auf Mobile
   liegen Tabellen in horizontalen Scroll-Wrappern, dort geht sticky nicht). */
@media (min-width: 1101px) {
  /* overflow:hidden würde sticky aushebeln; clip schneidet gleich ab,
     erzeugt aber keinen Scroll-Container. */
  .hub-content .hub-card.overflow-hidden {
    overflow: clip;
  }

  .hub-content table[data-sortable] thead th {
    position: sticky;
    top: 64px; /* Höhe der Topbar */
    z-index: 5;
    background: var(--hub-panel);
  }

  /* In overflow-Wrappern (z. B. Benutzer, Ziele) wird der Wrapper selbst zum
     Scroll-Container: sticky mit top:64px verschiebt den Kopf dann in die
     Tabelle hinein und verdeckt die erste Zeile. Dort kein sticky. */
  .hub-content .overflow-x-auto table[data-sortable] thead th,
  .hub-content .overflow-auto table[data-sortable] thead th,
  .hub-content .overflow-y-auto table[data-sortable] thead th {
    position: static;
  }
}

/* ================= UI-Komponenten (Paket 1-3, 2026-07-05) ================= */
/* Zentrale Bausteine statt frei kombinierter Utility-Klassen pro Seite.
   Buttons: hub-btn + Variante (+ hub-btn-sm für Tabellenzeilen).
   Hinweise: hub-notice + Variante. Modals: hub-modal. Status: hub-status. */

/* Einheitliche Seitentitel für alle Seiten im Inhaltsbereich. */
.hub-content h1 {
  font-size: 1.6rem;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.hub-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.hub-page-head h1 {
  margin: 0;
}

.hub-page-subtitle {
  margin: 4px 0 0;
  color: var(--hub-muted);
  font-size: 0.9rem;
  font-weight: 600;
}

.hub-page-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

/* Buttons */
.hub-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  padding: 6px 14px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.25;
  cursor: pointer;
  text-align: center;
  transition: filter 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.hub-btn:hover {
  filter: brightness(1.12);
}

.hub-btn-sm {
  min-height: 28px;
  padding: 2px 10px;
  border-radius: 6px;
  font-size: 0.78rem;
}

.hub-btn-primary {
  background: #0f141b;
  color: #f5f8ff;
  border-color: rgba(255, 255, 255, 0.09);
}

.hub-btn-secondary {
  background: #3a4353;
  color: #e6edf8;
}

.hub-btn-success {
  background: #1f9c7b;
  color: #ffffff;
}

.hub-btn-info {
  background: #2f8ac2;
  color: #ffffff;
}

.hub-btn-warn {
  background: #b97324;
  color: #ffffff;
}

.hub-btn-danger {
  background: #b3474d;
  color: #ffffff;
}

/* Hinweis-Boxen (dunkel, ersetzt bg-emerald-50/amber-50/red-50 + Overrides).
   Kein margin hier: Abstände kommen weiter von mb-*/mt-* im Template. */
.hub-notice {
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 0.875rem;
  line-height: 1.5;
}

.hub-notice-success {
  background: rgba(29, 145, 117, 0.16);
  border-color: rgba(35, 168, 134, 0.4);
  color: #8ee8cd;
}

.hub-notice-warn {
  background: rgba(242, 156, 84, 0.14);
  border-color: rgba(242, 156, 84, 0.38);
  color: #f8d3a6;
}

.hub-notice-error {
  background: rgba(239, 111, 117, 0.13);
  border-color: rgba(239, 111, 117, 0.4);
  color: #ffb4b8;
}

.hub-notice-info {
  background: rgba(123, 205, 240, 0.12);
  border-color: rgba(123, 205, 240, 0.32);
  color: #d9ecfb;
}

/* Modal-Fenster (dunkel, ersetzt bg-white + rounded-lg shadow p-4). */
.hub-modal {
  background: var(--hub-panel);
  border: 1px solid var(--hub-border);
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5);
}

/* Status-Pills (Bestellstatus u. a.), Optik wie die Kunden-Chips. */
.hub-status {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border-radius: 999px;
  border: 1px solid transparent;
  padding: 1px 10px;
  font-size: 0.74rem;
  font-weight: 800;
  white-space: nowrap;
}

.hub-status-success {
  color: #9be6cf;
  background: rgba(114, 228, 192, 0.13);
  border-color: rgba(114, 228, 192, 0.32);
}

.hub-status-info {
  color: #9fdffb;
  background: rgba(123, 205, 240, 0.13);
  border-color: rgba(123, 205, 240, 0.32);
}

.hub-status-warn {
  color: #f8d3a6;
  background: rgba(242, 156, 84, 0.13);
  border-color: rgba(242, 156, 84, 0.32);
}

.hub-status-orange {
  color: #ffd3b7;
  background: rgba(242, 153, 95, 0.14);
  border-color: rgba(242, 153, 95, 0.34);
}

.hub-status-danger {
  color: #ffb4b8;
  background: rgba(239, 111, 117, 0.12);
  border-color: rgba(239, 111, 117, 0.34);
}

.hub-status-muted {
  color: #d5deea;
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.12);
}

/* ================= Struktur-/Accessibility-Pass 2026-07-16 ============== */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--hub-accent-soft);
  outline-offset: 2px;
}

.hub-burger {
  width: 44px;
  height: 44px;
}

.hub-btn,
.hub-btn-sm,
.hub-user-btn,
.hub-user-dropdown-item,
.hub-nav-link,
.hub-nav-summary {
  min-height: 44px;
}

.hub-btn-sm {
  padding: 6px 11px;
  font-size: 0.82rem;
}

.hub-user-dropdown-item {
  display: flex;
  align-items: center;
}

.hub-content input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.hub-content select {
  min-height: 44px;
}

.hub-nav {
  gap: 8px;
}

.hub-nav-search {
  display: grid;
  gap: 5px;
  padding: 0 2px 4px;
}

.hub-nav-search label {
  color: #c7d1de;
  font-size: 0.82rem;
  font-weight: 700;
}

.hub-nav-search input {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--hub-border);
  border-radius: 8px;
  padding: 8px 11px;
  background: #111720;
  color: var(--hub-text);
  font: inherit;
  font-size: 0.9rem;
}

.hub-nav-search input::placeholder {
  color: #8794a5;
}

.hub-nav-collapsible {
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.1);
}

.hub-nav-summary {
  padding: 0 11px;
  color: #c8d2df;
  font-size: 0.83rem;
}

.hub-nav-summary:hover,
.hub-nav-collapsible[open] .hub-nav-summary {
  color: #ffffff;
  background: rgba(123, 205, 240, 0.07);
}

.hub-nav-subgroup {
  gap: 3px;
  padding: 3px 6px 8px;
}

.hub-nav-subgroup .hub-nav-link {
  padding: 7px 9px;
  font-size: 0.9rem;
}

.hub-nav-empty {
  margin: 4px 2px;
  padding: 12px;
  border: 1px dashed var(--hub-border);
  border-radius: 8px;
  color: var(--hub-muted);
  font-size: 0.86rem;
}

.hub-logout-button {
  width: 100%;
  border: 1px solid transparent;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
}

/* Gemeinsames Inventar: DB-seitig paginiert, auf Mobile als Kartenliste. */
.hub-inventory-page {
  display: grid;
  gap: 16px;
}

.hub-inventory-page .hub-page-head {
  margin-bottom: 0;
}

.hub-inventory-stats {
  display: grid;
  grid-template-columns: repeat(6, minmax(120px, 1fr));
  gap: 10px;
}

.hub-inventory-stat {
  display: grid;
  align-content: space-between;
  min-height: 92px;
  padding: 13px 14px;
  border: 1px solid var(--hub-border);
  border-top: 3px solid #8190a3;
  border-radius: 9px;
  background: var(--hub-panel);
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.14);
}

.hub-inventory-stat span {
  color: #b9c5d3;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.3;
}

.hub-inventory-stat strong {
  color: #f6f8fb;
  font-size: 1.75rem;
  line-height: 1;
}

.hub-inventory-stat.is-own { border-top-color: #8bc7ef; }
.hub-inventory-stat.is-consignment { border-top-color: #70d1b2; }
.hub-inventory-stat.is-private { border-top-color: #e9bd69; }
.hub-inventory-stat.is-gift { border-top-color: #f0a35f; }
.hub-inventory-stat.is-manual { border-top-color: #c99bec; }

.hub-inventory-search {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto auto auto auto;
  align-items: end;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--hub-border);
  border-radius: 10px;
  background: rgba(36, 42, 51, 0.82);
}

.hub-inventory-search-field,
.hub-inventory-page-size,
.hub-field {
  display: grid;
  gap: 6px;
  color: #d9e1ed;
  font-size: 0.84rem;
  font-weight: 700;
}

.hub-inventory-search input,
.hub-inventory-search select,
.hub-inventory-filter-form input:not([type="checkbox"]),
.hub-inventory-filter-form select {
  width: 100%;
  border: 1px solid var(--hub-border);
  border-radius: 8px;
  padding: 8px 11px;
  background: #171d25;
  color: var(--hub-text);
  font: inherit;
  font-size: 0.92rem;
}

.hub-inventory-page-size {
  min-width: 92px;
}

.hub-filter-summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  color: #c8d2df;
  font-size: 0.84rem;
}

.hub-filter-summary strong,
.hub-filter-summary span {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
}

.hub-filter-summary span {
  padding: 4px 10px;
  border: 1px solid rgba(139, 199, 239, 0.3);
  border-radius: 999px;
  background: rgba(139, 199, 239, 0.1);
}

.hub-inventory-results {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 36px;
  color: #c5d0dc;
  font-size: 0.9rem;
}

.hub-inventory-results p {
  margin: 0;
}

.hub-inventory-results strong {
  color: #ffffff;
}

.hub-inventory-filter-modal {
  width: min(860px, calc(100vw - 28px));
  max-height: calc(100vh - 28px);
  overflow-y: auto;
}

.hub-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.hub-modal-head h2 {
  margin: 0;
  font-size: 1.2rem;
}

.hub-inventory-filter-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.hub-field-wide,
.hub-modal-actions {
  grid-column: 1 / -1;
}

.hub-filter-fieldset {
  min-width: 0;
  margin: 0;
  padding: 10px;
  border: 1px solid var(--hub-border);
  border-radius: 9px;
}

.hub-filter-fieldset legend {
  padding: 0 5px;
  color: #d9e1ed;
  font-size: 0.86rem;
  font-weight: 800;
}

.hub-filter-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.hub-checkbox-label {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 7px 9px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 7px;
  color: #dce4ee;
  background: rgba(255, 255, 255, 0.025);
  font-size: 0.86rem;
  line-height: 1.3;
  cursor: pointer;
}

.hub-checkbox-label input {
  width: 19px;
  height: 19px;
  flex: none;
  accent-color: #70d1b2;
}

.hub-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.hub-inventory-bulk {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(239, 111, 117, 0.34);
  border-radius: 9px;
  background: rgba(239, 111, 117, 0.08);
  color: #d4dde8;
  font-size: 0.86rem;
}

.hub-inventory-bulk.hidden {
  display: none;
}

.hub-inventory-list-card {
  padding: 0;
  overflow: clip;
}

.hub-inventory-table {
  width: 100%;
  border-collapse: collapse;
}

.hub-inventory-table th,
.hub-inventory-table td {
  padding: 11px 10px;
  text-align: left;
  vertical-align: top;
}

.hub-inventory-table tbody tr:focus-visible {
  outline: 3px solid var(--hub-accent-soft);
  outline-offset: -3px;
  background: rgba(123, 205, 240, 0.1);
}

.hub-inventory-article {
  min-width: 210px;
}

.hub-inventory-article a,
.hub-text-link,
.hub-inventory-related-link {
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
}

.hub-inventory-article a {
  color: #f5f8fc;
  font-weight: 750;
  line-height: 1.4;
}

.hub-inventory-owner-meta,
.hub-inventory-related-link {
  display: block;
  margin-top: 5px;
  color: #b0bccb;
  font-size: 0.82rem;
  line-height: 1.35;
}

.hub-inventory-related-link {
  color: #a9d9f7;
}

.hub-inventory-type-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 3px 9px;
  border: 1px solid rgba(139, 199, 239, 0.25);
  border-radius: 999px;
  background: rgba(139, 199, 239, 0.1);
  color: #dceefe;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.25;
}

.hub-inventory-type-badge.type-auftragsware {
  border-color: rgba(112, 209, 178, 0.32);
  background: rgba(112, 209, 178, 0.11);
  color: #b8f1df;
}

.hub-inventory-type-badge.type-privateinlage,
.hub-inventory-type-badge.type-private_geschenk {
  border-color: rgba(240, 163, 95, 0.34);
  background: rgba(240, 163, 95, 0.11);
  color: #f6d1ad;
}

.hub-inventory-sku,
.hub-inventory-date,
.hub-inventory-days,
.hub-inventory-updated {
  color: #c9d3df;
  font-variant-numeric: tabular-nums;
}

.hub-inventory-actions > div {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.hub-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 9px;
}

.hub-pagination-pages {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
}

.hub-pagination a,
.hub-pagination > span,
.hub-pagination-pages > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 7px 11px;
  border: 1px solid var(--hub-border);
  border-radius: 8px;
  background: #252d38;
  color: #e7edf5;
  font-size: 0.86rem;
  font-weight: 750;
}

.hub-pagination .is-current {
  border-color: rgba(112, 209, 178, 0.5);
  background: rgba(112, 209, 178, 0.16);
  color: #ffffff;
}

.hub-pagination .is-disabled {
  opacity: 0.45;
}

.hub-pagination .hub-pagination-gap {
  min-width: 28px;
  padding-inline: 4px;
  border-color: transparent;
  background: transparent;
}

@media (max-width: 1240px) {
  .hub-inventory-stats {
    grid-template-columns: repeat(3, minmax(130px, 1fr));
  }

  .hub-inventory-search {
    grid-template-columns: minmax(230px, 1fr) auto auto auto;
  }

  .hub-inventory-search > .hub-btn:last-child {
    grid-column: auto;
  }
}

@media (max-width: 760px) {
  .hub-content {
    padding: 12px;
  }

  .hub-inventory-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hub-inventory-stat {
    min-height: 84px;
    padding: 11px;
  }

  .hub-inventory-stat strong {
    font-size: 1.5rem;
  }

  .hub-inventory-search {
    grid-template-columns: 1fr;
  }

  .hub-inventory-search .hub-btn,
  .hub-inventory-page-size {
    width: 100%;
  }

  .hub-inventory-results {
    align-items: flex-start;
    flex-direction: column;
  }

  .hub-inventory-filter-form,
  .hub-filter-options {
    grid-template-columns: 1fr;
  }

  .hub-field-wide,
  .hub-modal-actions {
    grid-column: auto;
  }

  .hub-modal-actions,
  .hub-modal-actions .hub-btn {
    width: 100%;
  }

  .hub-inventory-list-card {
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .hub-inventory-table,
  .hub-inventory-table tbody {
    display: block;
    width: 100%;
  }

  .hub-inventory-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .hub-inventory-table tbody {
    display: grid;
    gap: 12px;
  }

  .hub-inventory-table tbody tr {
    display: flex;
    flex-direction: column;
    padding: 10px 13px;
    border: 1px solid var(--hub-border);
    border-radius: 10px;
    background: var(--hub-panel);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
  }

  .hub-inventory-table td {
    display: grid;
    grid-template-columns: minmax(98px, 34%) minmax(0, 1fr);
    gap: 10px;
    width: 100%;
    min-width: 0;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  }

  .hub-inventory-table td::before {
    content: attr(data-label);
    color: #aebac8;
    font-size: 0.79rem;
    font-weight: 800;
    line-height: 1.4;
  }

  .hub-inventory-table td.hidden {
    display: none;
  }

  .hub-inventory-table td:last-child {
    border-bottom: 0;
  }

  .hub-inventory-select { order: 0; }
  .hub-inventory-article { order: 1; }
  .hub-inventory-status { order: 2; }
  .hub-inventory-type { order: 3; }
  .hub-inventory-owner { order: 4; }
  .hub-inventory-sku { order: 5; }
  .hub-inventory-date { order: 6; }
  .hub-inventory-days { order: 7; }
  .hub-inventory-updated { order: 8; }
  .hub-inventory-actions { order: 9; }

  .hub-inventory-actions > div {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hub-inventory-actions .hub-btn:only-child {
    grid-column: 1 / -1;
  }

  .hub-pagination {
    justify-content: space-between;
  }

  .hub-pagination-pages {
    order: 3;
    width: 100%;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ================= White Mode ============================================
   Der bestehende Dark Mode bleibt Standard. Die helle Palette wird über
   html[data-theme="light"] aktiviert; theme.js speichert die Auswahl lokal. */

html[data-theme="dark"] {
  color-scheme: dark;
}

html[data-theme="light"] {
  color-scheme: light;
  --hub-bg: #f4f7fb;
  --hub-bg-soft: #edf2f7;
  --hub-panel: #ffffff;
  --hub-panel-soft: #f3f6fa;
  --hub-border: #cbd5e1;
  --hub-text: #172033;
  --hub-muted: #5b687a;
  --hub-accent: #087f65;
  --hub-accent-soft: #0369a1;
  --hub-orange: #a84d0f;
  --hub-danger: #b4232d;
}

.hub-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 44px;
  padding: 6px 12px;
  border: 1px solid var(--hub-border);
  border-radius: 999px;
  background: #1d2530;
  color: #e7edf6;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 750;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.hub-theme-toggle:hover {
  background: #273244;
}

.hub-theme-toggle-icon {
  width: 1.1em;
  font-size: 1rem;
  line-height: 1;
  text-align: center;
}

.hub-theme-toggle-floating {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 10;
}

/* Login und Erst-Einrichtung folgen demselben gespeicherten Modus. */
body.hub-auth {
  min-height: 100vh;
  color: var(--hub-text);
  background: linear-gradient(180deg, #181c23 0%, var(--hub-bg) 62%, #14171d 100%) !important;
}

body.hub-auth form {
  background: var(--hub-panel) !important;
  border-color: var(--hub-border) !important;
  color: var(--hub-text);
}

body.hub-auth input {
  background: #1f252e;
  border-color: var(--hub-border);
  color: var(--hub-text);
}

body.hub-auth input:focus-visible {
  outline: 3px solid var(--hub-accent-soft);
  outline-offset: 2px;
}

body.hub-auth .text-slate-900,
body.hub-auth .text-slate-700 {
  color: var(--hub-text) !important;
}

body.hub-auth .text-slate-600 {
  color: var(--hub-muted) !important;
}

html[data-theme="light"] body.hub-auth {
  background: linear-gradient(180deg, #ffffff 0%, #f4f7fb 42%, #eaf0f6 100%) !important;
}

html[data-theme="light"] body.hub-auth input {
  background: #ffffff;
  color: #172033;
}

html[data-theme="light"] .hub-theme-toggle {
  background: #ffffff;
  color: #263244;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

html[data-theme="light"] .hub-theme-toggle:hover {
  border-color: #94a3b8;
  background: #f1f5f9;
}

/* Grundfläche, Navigation und Kontomenü */
html[data-theme="light"] body.hub-theme {
  background: linear-gradient(180deg, #ffffff 0%, var(--hub-bg) 34%, #edf2f7 100%);
}

html[data-theme="light"] body.hub-theme .hub-sidebar {
  background: #ffffff;
  box-shadow: 10px 0 30px rgba(15, 23, 42, 0.14);
}

html[data-theme="light"] body.hub-theme .hub-topbar {
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 1px 7px rgba(15, 23, 42, 0.06);
}

html[data-theme="light"] body.hub-theme .hub-topbar-title,
html[data-theme="light"] body.hub-theme .hub-logo,
html[data-theme="light"] body.hub-theme .hub-content h1,
html[data-theme="light"] body.hub-theme .hub-card-title,
html[data-theme="light"] body.hub-theme .hub-edit-title,
html[data-theme="light"] body.hub-theme .hub-edit-card-title {
  color: #172033;
}

html[data-theme="light"] body.hub-theme .hub-burger,
html[data-theme="light"] body.hub-theme .hub-user-btn {
  background: #ffffff;
  color: #263244;
}

html[data-theme="light"] body.hub-theme .hub-burger:hover,
html[data-theme="light"] body.hub-theme .hub-user-btn:hover {
  background: #edf2f7;
}

html[data-theme="light"] body.hub-theme .hub-user-dropdown {
  background: #ffffff;
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.18);
}

html[data-theme="light"] body.hub-theme .hub-user-dropdown-info strong,
html[data-theme="light"] body.hub-theme .hub-user-dropdown-item {
  color: #263244;
}

html[data-theme="light"] body.hub-theme .hub-user-dropdown-item:hover {
  background: #edf2f7;
}

html[data-theme="light"] body.hub-theme .hub-nav-collapsible {
  border-color: #dce3eb;
  background: #f7f9fc;
}

html[data-theme="light"] body.hub-theme .hub-nav-summary,
html[data-theme="light"] body.hub-theme .hub-nav-search label {
  color: #526075;
}

html[data-theme="light"] body.hub-theme .hub-nav-summary:hover,
html[data-theme="light"] body.hub-theme .hub-nav-collapsible[open] .hub-nav-summary {
  color: #172033;
  background: #eaf3f8;
}

html[data-theme="light"] body.hub-theme .hub-nav-link,
html[data-theme="light"] body.hub-theme .hub-nav-sublink {
  color: #344256;
}

html[data-theme="light"] body.hub-theme .hub-nav-link:hover,
html[data-theme="light"] body.hub-theme .hub-nav-sublink:hover {
  border-color: #9ecde2;
  background: #eaf5fa;
  color: #123047;
}

html[data-theme="light"] body.hub-theme .hub-nav-link.active {
  border-color: #70b4d2;
  background: #dceff7;
  color: #0d3850;
}

html[data-theme="light"] body.hub-theme .hub-nav-search input {
  background: #ffffff;
  color: #172033;
}

html[data-theme="light"] body.hub-theme .hub-nav-search input::placeholder {
  color: #6b7788;
}

/* Karten, Tabellen, Formulare und Tailwind-Altklassen */
html[data-theme="light"] body.hub-theme .hub-card,
html[data-theme="light"] body.hub-theme .hub-edit-card,
html[data-theme="light"] body.hub-theme .hub-modal {
  box-shadow: 0 5px 18px rgba(15, 23, 42, 0.08);
}

html[data-theme="light"] body.hub-theme .bg-white {
  background-color: #ffffff !important;
}

html[data-theme="light"] body.hub-theme .bg-slate-50 {
  background-color: #f8fafc !important;
}

html[data-theme="light"] body.hub-theme .bg-slate-100 {
  background-color: #f1f5f9 !important;
}

html[data-theme="light"] body.hub-theme .bg-slate-200 {
  background-color: #e2e8f0 !important;
  color: #263244 !important;
}

html[data-theme="light"] body.hub-theme .text-slate-900,
html[data-theme="light"] body.hub-theme .text-slate-800 {
  color: #172033 !important;
}

html[data-theme="light"] body.hub-theme .text-slate-700 {
  color: #334155 !important;
}

html[data-theme="light"] body.hub-theme .text-slate-600 {
  color: #475569 !important;
}

html[data-theme="light"] body.hub-theme .text-slate-500,
html[data-theme="light"] body.hub-theme .text-slate-400 {
  color: #5b687a !important;
}

html[data-theme="light"] body.hub-theme .text-slate-300,
html[data-theme="light"] body.hub-theme .text-slate-200,
html[data-theme="light"] body.hub-theme .text-slate-100 {
  color: #334155 !important;
}

html[data-theme="light"] body.hub-theme .border,
html[data-theme="light"] body.hub-theme .border-t,
html[data-theme="light"] body.hub-theme .border-b,
html[data-theme="light"] body.hub-theme .border-l,
html[data-theme="light"] body.hub-theme .border-r,
html[data-theme="light"] body.hub-theme .border-slate-700,
html[data-theme="light"] body.hub-theme .border-slate-600,
html[data-theme="light"] body.hub-theme .border-slate-300,
html[data-theme="light"] body.hub-theme .border-slate-200 {
  border-color: var(--hub-border) !important;
}

html[data-theme="light"] body.hub-theme input,
html[data-theme="light"] body.hub-theme select,
html[data-theme="light"] body.hub-theme textarea,
html[data-theme="light"] body.hub-theme .hub-quicksearch input[type="search"],
html[data-theme="light"] body.hub-theme .hub-inventory-search input,
html[data-theme="light"] body.hub-theme .hub-inventory-search select,
html[data-theme="light"] body.hub-theme .hub-inventory-filter-form input:not([type="checkbox"]),
html[data-theme="light"] body.hub-theme .hub-inventory-filter-form select {
  color: #172033 !important;
  background: #ffffff !important;
  border-color: var(--hub-border) !important;
}

html[data-theme="light"] body.hub-theme input::placeholder,
html[data-theme="light"] body.hub-theme textarea::placeholder {
  color: #6b7788 !important;
  opacity: 1;
}

html[data-theme="light"] body.hub-theme input:disabled,
html[data-theme="light"] body.hub-theme select:disabled,
html[data-theme="light"] body.hub-theme textarea:disabled {
  color: #667085 !important;
  background: #edf2f7 !important;
}

html[data-theme="light"] body.hub-theme .shadow,
html[data-theme="light"] body.hub-theme .shadow-sm {
  box-shadow: 0 5px 18px rgba(15, 23, 42, 0.08) !important;
}

html[data-theme="light"] body.hub-theme .hub-data-table tbody tr,
html[data-theme="light"] body.hub-theme .hub-mini-table tbody td,
html[data-theme="light"] body.hub-theme .analytics-table td,
html[data-theme="light"] body.hub-theme .analytics-band-row,
html[data-theme="light"] body.hub-theme .client-detail-data-row,
html[data-theme="light"] body.hub-theme .hub-list-row {
  border-color: #dce3eb;
}

html[data-theme="light"] body.hub-theme .hub-data-table tbody tr:hover,
html[data-theme="light"] body.hub-theme table tbody tr:hover {
  background: #edf7fb;
}

/* Links, Statusfarben und Meldungen behalten im hellen Modus ihren Sinn. */
html[data-theme="light"] body.hub-theme .profit-positive,
html[data-theme="light"] body.hub-theme .text-emerald-700,
html[data-theme="light"] body.hub-theme .text-emerald-600,
html[data-theme="light"] body.hub-theme .text-emerald-400,
html[data-theme="light"] body.hub-theme .text-emerald-300 {
  color: #08745e !important;
}

html[data-theme="light"] body.hub-theme .profit-negative,
html[data-theme="light"] body.hub-theme .text-red-700,
html[data-theme="light"] body.hub-theme .text-red-600,
html[data-theme="light"] body.hub-theme .text-red-400,
html[data-theme="light"] body.hub-theme .text-red-300,
html[data-theme="light"] body.hub-theme .text-rose-900,
html[data-theme="light"] body.hub-theme .text-rose-700,
html[data-theme="light"] body.hub-theme .text-rose-600,
html[data-theme="light"] body.hub-theme .text-rose-400,
html[data-theme="light"] body.hub-theme .text-rose-300 {
  color: #b4232d !important;
}

html[data-theme="light"] body.hub-theme .text-blue-700,
html[data-theme="light"] body.hub-theme .text-sky-800,
html[data-theme="light"] body.hub-theme .text-sky-700,
html[data-theme="light"] body.hub-theme .text-sky-400,
html[data-theme="light"] body.hub-theme .text-sky-300 {
  color: #075985 !important;
}

html[data-theme="light"] body.hub-theme .text-amber-900,
html[data-theme="light"] body.hub-theme .text-amber-800,
html[data-theme="light"] body.hub-theme .text-amber-700,
html[data-theme="light"] body.hub-theme .text-amber-600,
html[data-theme="light"] body.hub-theme .text-amber-400,
html[data-theme="light"] body.hub-theme .text-amber-300 {
  color: #92400e !important;
}

html[data-theme="light"] body.hub-theme .bg-emerald-50 {
  background: #ecfdf5 !important;
}

html[data-theme="light"] body.hub-theme .bg-amber-50 {
  background: #fffbeb !important;
}

html[data-theme="light"] body.hub-theme .bg-red-50,
html[data-theme="light"] body.hub-theme .bg-rose-50 {
  background: #fff1f2 !important;
}

html[data-theme="light"] body.hub-theme .border-emerald-200 {
  border-color: #6ee7b7 !important;
}

html[data-theme="light"] body.hub-theme .border-amber-200,
html[data-theme="light"] body.hub-theme .border-amber-300,
html[data-theme="light"] body.hub-theme .border-amber-400 {
  border-color: #f4bf68 !important;
}

html[data-theme="light"] body.hub-theme .border-red-200,
html[data-theme="light"] body.hub-theme .border-rose-400 {
  border-color: #fda4af !important;
}

html[data-theme="light"] body.hub-theme .hub-btn-primary {
  background: #172033;
  border-color: #172033;
  color: #ffffff;
}

html[data-theme="light"] body.hub-theme .hub-empty-action {
  border-color: #172033;
  background: #172033;
  color: #ffffff;
}

html[data-theme="light"] body.hub-theme .hub-btn-secondary {
  background: #e2e8f0;
  border-color: #b8c3d1;
  color: #263244;
}

html[data-theme="light"] body.hub-theme .hub-btn-success {
  background: #087f65;
  color: #ffffff;
}

html[data-theme="light"] body.hub-theme .hub-btn-info {
  background: #0369a1;
  color: #ffffff;
}

html[data-theme="light"] body.hub-theme .hub-btn-warn {
  background: #a84d0f;
  color: #ffffff;
}

html[data-theme="light"] body.hub-theme .hub-btn-danger {
  background: #b4232d;
  color: #ffffff;
}

html[data-theme="light"] body.hub-theme .hub-notice-success {
  background: #ecfdf5;
  border-color: #6ee7b7;
  color: #065f46;
}

html[data-theme="light"] body.hub-theme .hub-notice-warn {
  background: #fffbeb;
  border-color: #f4bf68;
  color: #78350f;
}

html[data-theme="light"] body.hub-theme .hub-notice-error {
  background: #fff1f2;
  border-color: #fda4af;
  color: #9f1239;
}

html[data-theme="light"] body.hub-theme .hub-notice-info {
  background: #eff6ff;
  border-color: #93c5fd;
  color: #1e40af;
}

html[data-theme="light"] body.hub-theme .hub-status-success,
html[data-theme="light"] body.hub-theme .hub-link-own,
html[data-theme="light"] body.hub-theme .hub-client-status-tag.sold,
html[data-theme="light"] body.hub-theme .client-detail-tag.sold,
html[data-theme="light"] body.hub-theme .client-detail-tag.paid {
  color: #06634f;
  background: #e7f8f1;
  border-color: #79d6b9;
}

html[data-theme="light"] body.hub-theme .hub-status-info,
html[data-theme="light"] body.hub-theme .hub-link-cons {
  color: #075985;
  background: #e7f5fb;
  border-color: #89cbe8;
}

html[data-theme="light"] body.hub-theme .hub-status-warn,
html[data-theme="light"] body.hub-theme .hub-status-orange {
  color: #8a3b0b;
  background: #fff4e8;
  border-color: #e7a86e;
}

html[data-theme="light"] body.hub-theme .hub-status-danger {
  color: #9f1239;
  background: #fff1f2;
  border-color: #f3a0ae;
}

html[data-theme="light"] body.hub-theme .hub-status-muted,
html[data-theme="light"] body.hub-theme .hub-client-status-tag.live,
html[data-theme="light"] body.hub-theme .client-detail-tag.live,
html[data-theme="light"] body.hub-theme .client-detail-tag.pending {
  color: #465468;
  background: #eef2f6;
  border-color: #c5cfda;
}

/* Auswertungen, Ziele und Datumsfilter */
html[data-theme="light"] body.hub-theme .analytics-title,
html[data-theme="light"] body.hub-theme .analytics-kpi-value,
html[data-theme="light"] body.hub-theme .analytics-row-title,
html[data-theme="light"] body.hub-theme .analytics-stock-box strong,
html[data-theme="light"] body.hub-theme .analytics-band-metrics,
html[data-theme="light"] body.hub-theme .analytics-segment-panel strong,
html[data-theme="light"] body.hub-theme .analytics-country-value,
html[data-theme="light"] body.hub-theme .goal-summary-title,
html[data-theme="light"] body.hub-theme .goal-stat-value,
html[data-theme="light"] body.hub-theme .hub-kpi-white,
html[data-theme="light"] body.hub-theme .hub-date-filter-title,
html[data-theme="light"] body.hub-theme .hub-period-mode-label {
  color: #172033;
}

html[data-theme="light"] body.hub-theme .analytics-top-action,
html[data-theme="light"] body.hub-theme .analytics-secondary-button,
html[data-theme="light"] body.hub-theme .analytics-tab,
html[data-theme="light"] body.hub-theme .hub-period-quick {
  border-color: #cbd5e1;
  background: #f8fafc;
  color: #334155;
}

html[data-theme="light"] body.hub-theme .analytics-tab.active,
html[data-theme="light"] body.hub-theme .analytics-period-option.active,
html[data-theme="light"] body.hub-theme .hub-period-mode.active {
  border-color: #70b4d2;
  background: #dff1f8;
  color: #123047;
  box-shadow: none;
}

html[data-theme="light"] body.hub-theme .analytics-period-option,
html[data-theme="light"] body.hub-theme .analytics-insight-card,
html[data-theme="light"] body.hub-theme .analytics-stock-box,
html[data-theme="light"] body.hub-theme .analytics-segment-panel > div,
html[data-theme="light"] body.hub-theme .analytics-country-row,
html[data-theme="light"] body.hub-theme .analytics-empty-state,
html[data-theme="light"] body.hub-theme .hub-period-mode,
html[data-theme="light"] body.hub-theme .hub-period-panel,
html[data-theme="light"] body.hub-theme .hub-edit-toggle,
html[data-theme="light"] body.hub-theme .hub-edit-stat,
html[data-theme="light"] body.hub-theme .hub-task-row {
  border-color: #d7e0e9;
  background: #f8fafc;
}

html[data-theme="light"] body.hub-theme .analytics-period-option span {
  color: #172033;
}

html[data-theme="light"] body.hub-theme .analytics-kpi-strong {
  border-color: #9ecde2;
  background: linear-gradient(180deg, #edf8fc, #ffffff);
}

html[data-theme="light"] body.hub-theme .analytics-table td {
  color: #263244;
}

html[data-theme="light"] body.hub-theme .hub-date-filter {
  background: linear-gradient(180deg, #ffffff, #f3f6fa);
}

html[data-theme="light"] body.hub-theme .hub-date-filter-badge {
  border-color: #a6cfe1;
  background: #edf7fb;
  color: #23465b;
}

html[data-theme="light"] body.hub-theme .goal-group-pill {
  color: #075985;
  background: #e7f5fb;
  border-color: #89cbe8;
}

/* Kunden- und Inventaransichten */
html[data-theme="light"] body.hub-theme .hub-client-hero {
  border-color: #b8d5e3;
  background: linear-gradient(145deg, #ffffff 0%, #f3f7fb 100%);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.1);
}

html[data-theme="light"] body.hub-theme .hub-client-quick-card,
html[data-theme="light"] body.hub-theme .hub-client-panel,
html[data-theme="light"] body.hub-theme .hub-client-metric-card,
html[data-theme="light"] body.hub-theme .client-detail-summary-item,
html[data-theme="light"] body.hub-theme .client-detail-kpi,
html[data-theme="light"] body.hub-theme .client-detail-header {
  border-color: #d7e0e9;
  background: #f8fafc;
}

html[data-theme="light"] body.hub-theme .client-detail-summary-item.strong,
html[data-theme="light"] body.hub-theme .client-detail-kpi.highlight {
  border-color: #b8d5e3;
  background: #edf7fb;
}

html[data-theme="light"] body.hub-theme .hub-client-quick-value,
html[data-theme="light"] body.hub-theme .hub-client-quick-value a,
html[data-theme="light"] body.hub-theme .hub-client-data-value,
html[data-theme="light"] body.hub-theme .hub-client-data-value a,
html[data-theme="light"] body.hub-theme .hub-client-note,
html[data-theme="light"] body.hub-theme .hub-client-metric-value,
html[data-theme="light"] body.hub-theme .client-detail-summary-value,
html[data-theme="light"] body.hub-theme .client-detail-data-value,
html[data-theme="light"] body.hub-theme .client-detail-summary-value a,
html[data-theme="light"] body.hub-theme .client-detail-data-value a,
html[data-theme="light"] body.hub-theme .client-detail-kpi-value,
html[data-theme="light"] body.hub-theme .client-detail-note {
  color: #172033;
}

html[data-theme="light"] body.hub-theme .client-detail-chip {
  color: #075985;
  background: #e7f5fb;
  border-color: #89cbe8;
}

html[data-theme="light"] body.hub-theme .client-detail-chip.active {
  color: #06634f;
  background: #e7f8f1;
  border-color: #79d6b9;
}

html[data-theme="light"] body.hub-theme .client-detail-chip.subtle {
  color: #8a3b0b;
  background: #fff4e8;
  border-color: #e7a86e;
}

html[data-theme="light"] body.hub-theme .client-detail-chip.muted {
  color: #465468;
  background: #eef2f6;
  border-color: #c5cfda;
}

html[data-theme="light"] body.hub-theme .hub-inventory-stat,
html[data-theme="light"] body.hub-theme .hub-inventory-search {
  background: #ffffff;
  box-shadow: 0 5px 16px rgba(15, 23, 42, 0.08);
}

html[data-theme="light"] body.hub-theme .hub-inventory-stat span,
html[data-theme="light"] body.hub-theme .hub-inventory-search-field,
html[data-theme="light"] body.hub-theme .hub-inventory-page-size,
html[data-theme="light"] body.hub-theme .hub-field,
html[data-theme="light"] body.hub-theme .hub-filter-summary,
html[data-theme="light"] body.hub-theme .hub-inventory-results,
html[data-theme="light"] body.hub-theme .hub-inventory-sku,
html[data-theme="light"] body.hub-theme .hub-inventory-date,
html[data-theme="light"] body.hub-theme .hub-inventory-days,
html[data-theme="light"] body.hub-theme .hub-inventory-updated,
html[data-theme="light"] body.hub-theme .hub-inventory-owner-meta {
  color: #526075;
}

html[data-theme="light"] body.hub-theme .hub-inventory-stat strong,
html[data-theme="light"] body.hub-theme .hub-inventory-results strong,
html[data-theme="light"] body.hub-theme .hub-inventory-article a {
  color: #172033;
}

html[data-theme="light"] body.hub-theme .hub-inventory-related-link,
html[data-theme="light"] body.hub-theme .hub-text-link {
  color: #075985;
}

html[data-theme="light"] body.hub-theme .hub-checkbox-label {
  border-color: #d7e0e9;
  background: #f8fafc;
  color: #263244;
}

html[data-theme="light"] body.hub-theme .hub-inventory-bulk {
  color: #6b2330;
  background: #fff1f2;
}

html[data-theme="light"] body.hub-theme .hub-inventory-type-badge {
  color: #075985;
  background: #e7f5fb;
}

html[data-theme="light"] body.hub-theme .hub-inventory-type-badge.type-auftragsware {
  color: #06634f;
  background: #e7f8f1;
}

html[data-theme="light"] body.hub-theme .hub-inventory-type-badge.type-privateinlage,
html[data-theme="light"] body.hub-theme .hub-inventory-type-badge.type-private_geschenk {
  color: #8a3b0b;
  background: #fff4e8;
}

html[data-theme="light"] body.hub-theme .hub-pagination a,
html[data-theme="light"] body.hub-theme .hub-pagination > span,
html[data-theme="light"] body.hub-theme .hub-pagination-pages > span {
  background: #ffffff;
  color: #263244;
}

html[data-theme="light"] body.hub-theme .hub-pagination .is-current {
  background: #e7f8f1;
  color: #06634f;
}

/* Diagramm-Hilfsflächen */
html[data-theme="light"] body.hub-theme .work-bar-track,
html[data-theme="light"] body.hub-theme .work-stack,
html[data-theme="light"] body.hub-theme .work-col-bar.is-empty {
  background: #e2e8f0;
}

html[data-theme="light"] body.hub-theme .work-heat-cell.is-weekend.is-zero {
  background: #edf2f7;
}

html[data-theme="light"] body.hub-theme .work-segmented-control {
  background: #edf2f7;
}

html[data-theme="light"] body.hub-theme .work-segmented-control button {
  color: #526075;
}

html[data-theme="light"] body.hub-theme .work-segmented-control button:hover {
  color: #172033;
}

html[data-theme="light"] body.hub-theme .work-segmented-control button.active {
  border-color: #70b4d2;
  background: #ffffff;
  color: #123047;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

html[data-theme="light"] body.hub-theme .work-daily-average-line {
  border-color: #b45309;
}

html[data-theme="light"] body.hub-theme .work-daily-average-line span {
  border-color: #d99655;
  background: rgba(255, 255, 255, 0.94);
  color: #8a3b0b;
}

@media (max-width: 760px) {
  .hub-theme-toggle-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .hub-theme-toggle {
    width: 44px;
    padding-inline: 0;
  }

  html[data-theme="light"] body.hub-theme .hub-inventory-table tbody tr {
    background: #ffffff;
    box-shadow: 0 5px 15px rgba(15, 23, 42, 0.08);
  }

  html[data-theme="light"] body.hub-theme .hub-inventory-table td {
    border-color: #e1e7ee;
  }

  html[data-theme="light"] body.hub-theme .hub-inventory-table td::before {
    color: #526075;
  }
}

/* --- Profit Calculator: kompakte Artikel-Tabelle -------------------------- */
/* Ziel: eine Artikelzeile passt wirklich in eine Reihe, ohne dass die Zahlen
   unleserlich werden. Details je Artikel stehen in einer ausklappbaren Zeile. */

/* Als Grid-Item hat die Karte min-width:auto und würde sich von der Tabelle
   breitziehen lassen – dann scrollt die ganze Seite statt der Tabelle. */
.hub-calc-card {
  min-width: 0;
}

/* Eigener Scroll-Rahmen: .hub-table-scroll gibt es nur unter 1100 px, die
   kompakte Tabelle braucht ihn aber in jeder Breite. */
.hub-calc-scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.hub-calc-table {
  font-size: 0.78rem;
  table-layout: fixed;
  width: 100%;
  min-width: 54rem;
}

.hub-calc-table th,
.hub-calc-table td {
  padding: 4px 6px;
  vertical-align: middle;
  white-space: nowrap;
}

.hub-calc-table thead th {
  font-size: 0.68rem;
  letter-spacing: 0.03em;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hub-calc-table input:not([type="checkbox"]) {
  width: 100%;
  min-width: 0;
  padding: 3px 6px;
  font-size: 0.78rem;
  border-radius: 6px;
}

.hub-calc-table .hub-calc-num {
  text-align: right;
}

.hub-calc-col-title { width: 13rem; }
.hub-calc-col-note { width: 7.5rem; }
.hub-calc-col-num { width: 5.4rem; }
.hub-calc-col-mini { width: 3.6rem; }

.hub-calc-toggle {
  border: 1px solid var(--hub-border);
  border-radius: 6px;
  background: transparent;
  color: var(--hub-muted);
  cursor: pointer;
  line-height: 1;
  padding: 3px 7px;
}

.hub-calc-toggle:hover {
  color: var(--hub-text);
  border-color: var(--hub-accent-soft);
}

/* Leeres "je Artikel"-Feld: hier greift die feste Regel. Sichtbar machen,
   damit ein vergessener Wert nicht unbemerkt die Vorgabe zieht. */
.hub-calc-table input.hub-calc-inherit {
  border-style: dashed !important;
  opacity: 0.75;
}

.hub-calc-error {
  color: var(--hub-danger);
  font-weight: 600;
}

.hub-calc-detail > td {
  white-space: normal;
  background: rgba(0, 0, 0, 0.18);
  padding: 10px 12px;
}

.hub-calc-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 6px 18px;
}

.hub-calc-detail-grid > div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px dotted var(--hub-border);
  padding-bottom: 3px;
}

.hub-calc-detail-grid span {
  color: var(--hub-muted);
}

html[data-theme="light"] body.hub-theme .hub-calc-detail > td {
  background: #eef3f9;
}

html[data-theme="light"] body.hub-theme .hub-calc-detail-grid > div {
  border-bottom-color: #d6dee8;
}

html[data-theme="light"] body.hub-theme .hub-calc-toggle {
  border-color: #cfd8e3;
  color: #526075;
}

@media (max-width: 900px) {
  .hub-calc-table {
    table-layout: auto;
  }

  .hub-calc-col-title { width: auto; }
  .hub-calc-col-note { width: auto; }
}