/* ============================================================
   theme-v2.css  ·  „BZI Clean" — Referenz-Redesign 2026-06
   Gescopt auf  body.theme-v2  → andere Seiten unberührt.
   Look: klare, solide weiße Karten, kräftiges Blau, pastellige
   Icon-Chips, dezente Schatten. KEIN Glas/Blur mehr.
   ============================================================ */

body.theme-v2 {
  /* Marken-Blau, kräftig (Referenz: solide vivid-blue CTAs) */
  --v2-accent:      #2563eb;
  --v2-accent-700:  #1d4ed8;
  --v2-accent-600:  #2563eb;
  --v2-accent-soft: #eef4ff;   /* heller Blau-Hintergrund (aktive Nav, Chips) */
  --v2-grad:        linear-gradient(135deg, #3b7bf6 0%, #2563eb 100%);
  --v2-grad-soft:   #eef4ff;

  /* Neutrale Flächen + Linien */
  --v2-surface:     #ffffff;
  --v2-line:        rgba(15, 23, 42, 0.08);
  --v2-line-strong: rgba(15, 23, 42, 0.12);
  --v2-ink:         #0f1b2e;
  --v2-ink-soft:    #475569;

  /* Schatten — dezent, „Stripe/Linear"-artig */
  --v2-sh-sm:     0 1px 2px rgba(16,24,40,.05);
  --v2-sh-md:     0 1px 2px rgba(16,24,40,.04), 0 8px 24px -14px rgba(16,24,40,.22);
  --v2-sh-lg:     0 1px 3px rgba(16,24,40,.06), 0 24px 48px -20px rgba(16,24,40,.28);
  --v2-sh-accent: 0 8px 18px -8px rgba(37,99,235,.40);

  /* Pastell-Tönungen für Icon-Chips/Status (Referenz-Palette) */
  --tint-blue:   #eaf1ff;   --tone-blue:   #2563eb;
  --tint-green:  #e7f7ef;   --tone-green:  #15a05a;
  --tint-amber:  #fef3e2;   --tone-amber:  #c2770a;
  --tint-red:    #fdecec;   --tone-red:    #dc4444;
  --tint-purple: #f1ecfe;   --tone-purple: #7c4ddb;
  --tint-slate:  #eef1f6;   --tone-slate:  #5b6b80;

  font-family: "Plus Jakarta Sans", "Work Sans", system-ui, sans-serif;
  background: var(--bg);

  --shadow: var(--v2-sh-md);
}

/* Flacher, sehr dezenter Hintergrund-Verlauf statt Glas-Mesh */
body.theme-v2::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(1100px 460px at 88% -8%, rgba(37,99,235,.05), transparent 60%),
    linear-gradient(180deg, #f8fafd 0%, var(--bg) 38%);
}

/* — Typo — */
body.theme-v2 h1, body.theme-v2 h2, body.theme-v2 h3 {
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  letter-spacing: -.02em;
  font-weight: 800;
  color: var(--v2-ink);
}
body.theme-v2 h1 { letter-spacing: -.03em; }
body.theme-v2 .eyebrow {
  color: var(--v2-accent);
  letter-spacing: .12em;
  font-weight: 700;
  text-transform: uppercase;
  font-size: .72rem;
}
body.theme-v2 .lead { color: var(--muted); }
/* Bold-Text nicht global einfärben (sonst zufällig blaue Wörter) */
body.theme-v2 strong { color: inherit; }

/* — Karten: solide weiß, dezenter Rand + Schatten — */
body.theme-v2 .card,
body.theme-v2 .content-card {
  background: var(--v2-surface);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 1px solid var(--v2-line);
  border-radius: 16px;
  box-shadow: var(--v2-sh-md);
}

/* — Seiten-Navigation: weiße Spalte, klare Nav-Items — */
body.theme-v2 .side-panel {
  background: var(--v2-surface);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 1px solid var(--v2-line);
  border-left: none;
  border-radius: 0 20px 20px 0;
  box-shadow: var(--v2-sh-md);
}
body.theme-v2 .side-panel__header .eyebrow { color: var(--v2-accent); }
body.theme-v2 .side-panel__cat-label,
body.theme-v2 .side-cat {
  color: #94a3b8;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: .68rem;
  font-weight: 700;
}
body.theme-v2 .side-link {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 12px;
  color: var(--v2-ink-soft);
  font-weight: 600;
  transition: background .15s, color .15s, border-color .15s;
}
body.theme-v2 .side-link:hover {
  border-color: transparent;
  box-shadow: none;
  background: #f1f5fb;
  color: var(--v2-ink);
}
body.theme-v2 .side-link svg { color: currentColor; }
body.theme-v2 .side-link.is-current,
body.theme-v2 .side-link--active,
body.theme-v2 .side-link[aria-current="page"] {
  background: var(--v2-accent-soft);
  border-color: rgba(37,99,235,.18);
  color: var(--v2-accent);
}
body.theme-v2 .side-link.is-current .side-link__label,
body.theme-v2 .side-link--active .side-link__label { color: var(--v2-accent); font-weight: 700; }

/* — Buttons — */
body.theme-v2 .btn { border-radius: 11px; font-weight: 700; transition: transform .15s, box-shadow .15s, background .15s; }
body.theme-v2 .btn.primary {
  background: var(--v2-accent);
  color: #fff;
  border: none;
  box-shadow: var(--v2-sh-accent);
}
body.theme-v2 .btn.primary:hover {
  transform: translateY(-1px);
  background: var(--v2-accent-700);
  box-shadow: 0 12px 24px -8px rgba(37,99,235,.50);
}
body.theme-v2 .btn.ghost {
  background: #fff;
  border: 1px solid var(--v2-line-strong);
  color: var(--v2-ink);
}
body.theme-v2 .btn.ghost:hover { background: #f8fafc; box-shadow: var(--v2-sh-sm); transform: translateY(-1px); }

/* Aktive Tab-Buttons */
body.theme-v2 .unit-infos-tab.is-active {
  background: var(--v2-accent) !important;
  color: #fff !important;
  border-color: transparent !important;
}

/* — Inputs — */
body.theme-v2 .field input,
body.theme-v2 .field select,
body.theme-v2 .field textarea {
  background: #fff;
  border: 1px solid var(--v2-line-strong);
  border-radius: 11px;
}
body.theme-v2 .field input:focus,
body.theme-v2 .field select:focus,
body.theme-v2 .field textarea:focus {
  outline: none;
  border-color: var(--v2-accent);
  box-shadow: 0 0 0 4px rgba(37,99,235,.14);
  background: #fff;
}

/* — Auswahl-/Checkbox-Zeilen — */
body.theme-v2 .mail-mode-option {
  border: 1px solid var(--v2-line);
  border-radius: 12px;
  background: #fff;
}
body.theme-v2 .mail-mode-option:hover { background: #f8fafc; box-shadow: var(--v2-sh-sm); }
body.theme-v2 .mail-mode-option input[type="radio"],
body.theme-v2 .mail-mode-option input[type="checkbox"] { accent-color: var(--v2-accent); }

/* — Avatar-Vorschau — */
body.theme-v2 .avatar-preview {
  background-color: var(--v2-accent-soft);
  border: 1px solid rgba(37,99,235,.22);
  box-shadow: var(--v2-sh-sm);
}

/* — Karten-Kopf mit Icon-Badge — */
body.theme-v2 .v2-cardhead { display: flex; align-items: flex-start; gap: 14px; }
body.theme-v2 .v2-badge {
  width: 46px; height: 46px; border-radius: 13px; flex-shrink: 0;
  display: grid; place-items: center; color: #fff;
  background: var(--v2-accent); box-shadow: var(--v2-sh-accent);
}
body.theme-v2 .v2-badge svg { width: 23px; height: 23px; }
body.theme-v2 .v2-cardhead h2 { font-size: 1.375rem; margin: 0; }
body.theme-v2 .v2-cardhead p { color: var(--muted); font-size: .8125rem; margin: 3px 0 0; }

/* — Backup-Zeilen — */
body.theme-v2 .bk-row {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 16px 18px; border-radius: 14px;
  background: #fff; border: 1px solid var(--v2-line);
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
body.theme-v2 .bk-row:hover {
  border-color: rgba(37,99,235,.35); box-shadow: var(--v2-sh-sm); transform: translateY(-1px);
}
body.theme-v2 .bk-cal {
  width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
  display: grid; place-items: center; background: var(--tint-blue); color: var(--v2-accent);
}
body.theme-v2 .bk-cal svg { width: 22px; height: 22px; }
body.theme-v2 .bk-meta { flex: 1 1 220px; min-width: 0; }
body.theme-v2 .bk-d { font-weight: 700; font-size: .95rem; letter-spacing: -.01em; color: var(--ink); }
body.theme-v2 .bk-sub {
  color: var(--muted); font-size: .8125rem; margin-top: 4px;
  display: flex; gap: 12px; flex-wrap: wrap; align-items: center;
}
body.theme-v2 .bk-total { color: var(--ink); font-weight: 600; }
body.theme-v2 .bk-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px; font-size: .75rem; font-weight: 600;
}
body.theme-v2 .bk-pill svg { width: 12px; height: 12px; }
body.theme-v2 .bk-pill.db  { background: var(--tint-blue); color: var(--tone-blue); }
body.theme-v2 .bk-pill.fil { background: var(--tint-green); color: var(--tone-green); }

/* ============================================================
   v2 — geteilte Komponenten
   ============================================================ */

/* — Navbar (solide weiß) — */
body.theme-v2 .navbar {
  background: #fff;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom: 1px solid var(--v2-line);
}

/* — Tiles / KPI-Kacheln — */
body.theme-v2 .tile {
  background: var(--v2-surface);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 1px solid var(--v2-line);
  border-radius: 16px;
  box-shadow: var(--v2-sh-md);
}
body.theme-v2 .tile:hover {
  transform: translateY(-2px);
  border-color: rgba(37,99,235,.30);
  box-shadow: var(--v2-sh-lg);
}
body.theme-v2 .tile-badge {
  color: var(--v2-accent);
  border-color: rgba(37,99,235,.30);
  background: var(--v2-accent-soft);
  letter-spacing: .06em;
}

/* — Hero-Karte — */
body.theme-v2 .hero-card {
  background: var(--v2-surface);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 1px solid var(--v2-line);
  border-radius: 18px;
  box-shadow: var(--v2-sh-md);
}

/* — Modals: Backdrop weich, Karten deckend weiß — */
body.theme-v2 .modal-card,
body.theme-v2 .modal-backdrop > div,
body.theme-v2 .employee-profile-modal > div,
body.theme-v2 .unit-assign-modal {
  background: #fff;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 1px solid var(--v2-line);
  border-radius: 18px;
  box-shadow: var(--v2-sh-lg);
}
body.theme-v2 .modal-backdrop,
body.theme-v2 .modal-overlay,
body.theme-v2 .att-overlay,
body.theme-v2 .transfer-overlay,
body.theme-v2 .ob-modal,
body.theme-v2 .leads-modal,
body.theme-v2 .unit-assign-modal,
body.theme-v2 .employee-profile-modal,
body.theme-v2 .announcement-create-modal,
body.theme-v2 .create-customer-modal,
body.theme-v2 .edit-customer-modal,
body.theme-v2 .faq-edit-modal,
body.theme-v2 .group-modal,
body.theme-v2 .image-modal,
body.theme-v2 .kf-modal,
body.theme-v2 .dialog-modal,
body.theme-v2 .simple-modal,
body.theme-v2 .doc-preview-backdrop,
body.theme-v2 .detail-overlay,
body.theme-v2 .unit-infos-modal {
  background: rgba(15,30,55,.42) !important;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  transform: translateZ(0);
  will-change: transform;
  backface-visibility: hidden;
}
body.theme-v2 .ob-modal-card,
body.theme-v2 .leads-modal-card,
body.theme-v2 .leads-modal-card-sm,
body.theme-v2 .kf-modal-card,
body.theme-v2 .group-modal-card,
body.theme-v2 .simple-modal-card,
body.theme-v2 .upload-modal-card,
body.theme-v2 .modal-card {
  background: #ffffff !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

body.theme-v2 .modal-header { border-bottom: 1px solid var(--v2-line); }
body.theme-v2 .modal-actions { border-top: 1px solid var(--v2-line); }

/* — Tabellen — */
body.theme-v2 .user-table th,
body.theme-v2 .ticket-table th,
body.theme-v2 .variables-table th {
  color: var(--muted);
  font-weight: 700;
  letter-spacing: .01em;
  border-bottom: 1px solid var(--v2-line);
}
body.theme-v2 .user-table td,
body.theme-v2 .ticket-table td {
  border-bottom: 1px solid var(--v2-line);
}
body.theme-v2 .user-table tbody tr,
body.theme-v2 .ticket-table tbody tr { transition: background .15s; }
body.theme-v2 .user-table tbody tr:hover,
body.theme-v2 .ticket-table tbody tr:hover { background: #f6f9ff; }

/* — Chat — */
body.theme-v2 .chat-sidebar {
  background: var(--v2-surface);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 1px solid var(--v2-line);
  border-radius: 16px;
  box-shadow: var(--v2-sh-md);
}
body.theme-v2 .chat-bubble {
  border-radius: 16px;
  border: 1px solid var(--v2-line);
  background: #fff;
}
body.theme-v2 .chat-bubble.mine {
  background: var(--v2-accent-soft);
  border-color: rgba(37,99,235,.16);
  color: var(--v2-ink);
}
body.theme-v2 .chat-bubble.mine .chat-time { color: #6b86c2; }
body.theme-v2 .chat-input { border-top: 1px solid var(--v2-line); }
body.theme-v2 .chat-input input,
body.theme-v2 .variables-table input {
  background: #fff;
  border: 1px solid var(--v2-line-strong);
  border-radius: 11px;
}
body.theme-v2 .chat-input input:focus,
body.theme-v2 .variables-table input:focus {
  outline: none; border-color: var(--v2-accent);
  box-shadow: 0 0 0 4px rgba(37,99,235,.14); background: #fff;
}

/* — Pills / Chips — */
body.theme-v2 .pill--new { color: var(--v2-accent); border-color: rgba(37,99,235,.4); background: var(--v2-accent-soft); }
body.theme-v2 .chip { background: var(--v2-accent-soft); border-color: rgba(37,99,235,.3); color: var(--v2-accent); }

/* — Dropzone — */
body.theme-v2 .dropzone {
  border-radius: 16px;
  border: 1.5px dashed rgba(37,99,235,.35);
  background: #f7faff;
}

/* ============================================================
   NEU — Wiederverwendbare Referenz-Komponenten
   (für den seitenweisen Rollout: KPI-Kacheln, Icon-Chips,
    Status-Badges, Seiten-Header, Segment-Tabs)
   ============================================================ */

/* Icon-Chip: pastellig getöntes, abgerundetes Quadrat mit farbigem Icon */
body.theme-v2 .icon-chip {
  width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--tint-blue); color: var(--tone-blue);
}
body.theme-v2 .icon-chip svg { width: 22px; height: 22px; }
body.theme-v2 .icon-chip.is-blue   { background: var(--tint-blue);   color: var(--tone-blue); }
body.theme-v2 .icon-chip.is-green  { background: var(--tint-green);  color: var(--tone-green); }
body.theme-v2 .icon-chip.is-amber  { background: var(--tint-amber);  color: var(--tone-amber); }
body.theme-v2 .icon-chip.is-red    { background: var(--tint-red);    color: var(--tone-red); }
body.theme-v2 .icon-chip.is-purple { background: var(--tint-purple); color: var(--tone-purple); }
body.theme-v2 .icon-chip.is-slate  { background: var(--tint-slate);  color: var(--tone-slate); }

/* KPI-Karte (Dashboard-Kennzahlen): Icon-Chip + große Zahl + Label + Delta */
body.theme-v2 .kpi-card {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 20px;
  background: #fff; border: 1px solid var(--v2-line);
  border-radius: 16px; box-shadow: var(--v2-sh-md);
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
body.theme-v2 .kpi-card:hover { transform: translateY(-2px); box-shadow: var(--v2-sh-lg); border-color: rgba(37,99,235,.25); }
body.theme-v2 .kpi-card__body { display: flex; flex-direction: column; min-width: 0; }
body.theme-v2 .kpi-card__num { font-size: 1.7rem; font-weight: 800; line-height: 1; letter-spacing: -.02em; color: var(--v2-ink); }
body.theme-v2 .kpi-card__label { color: var(--muted); font-size: .82rem; margin-top: 3px; }
body.theme-v2 .kpi-card__delta { font-size: .72rem; font-weight: 700; margin-top: 4px; display: inline-flex; align-items: center; gap: 3px; }
body.theme-v2 .kpi-card__delta.up   { color: var(--tone-green); }
body.theme-v2 .kpi-card__delta.down { color: var(--tone-red); }
body.theme-v2 .kpi-card__delta.flat { color: var(--muted); }

/* Status-Badge: kleine, rundliche, getönte Plakette */
body.theme-v2 .status-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 999px;
  font-size: .74rem; font-weight: 700; line-height: 1.4;
  background: var(--tint-slate); color: var(--tone-slate);
}
body.theme-v2 .status-badge.is-green  { background: var(--tint-green);  color: var(--tone-green); }
body.theme-v2 .status-badge.is-amber  { background: var(--tint-amber);  color: var(--tone-amber); }
body.theme-v2 .status-badge.is-red    { background: var(--tint-red);    color: var(--tone-red); }
body.theme-v2 .status-badge.is-blue   { background: var(--tint-blue);   color: var(--tone-blue); }
body.theme-v2 .status-badge.is-purple { background: var(--tint-purple); color: var(--tone-purple); }

/* Seiten-Header mit Eyebrow + Titel + Untertitel */
body.theme-v2 .page-head { margin-bottom: 4px; }
body.theme-v2 .page-head .eyebrow { display: block; margin-bottom: 6px; }
body.theme-v2 .page-head h1 { margin: 0; font-size: clamp(1.7rem, 2.6vw, 2.3rem); }
body.theme-v2 .page-head .page-head__sub { color: var(--muted); margin: 6px 0 0; font-size: .95rem; }

/* Segment-Tabs / Filter-Chips (z. B. Alle · Offen · In Bearbeitung) */
body.theme-v2 .seg-tabs { display: inline-flex; gap: 8px; flex-wrap: wrap; }
body.theme-v2 .seg-tab {
  padding: 7px 16px; border-radius: 999px;
  border: 1px solid var(--v2-line-strong); background: #fff;
  color: var(--v2-ink-soft); font-weight: 600; font-size: .85rem; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
body.theme-v2 .seg-tab:hover { background: #f6f9ff; }
body.theme-v2 .seg-tab.is-active {
  background: var(--v2-accent); color: #fff; border-color: var(--v2-accent);
}

/* — Popup-/Chat-Animationen (beibehalten) — */
body.theme-v2 .modal-overlay,
body.theme-v2 .transfer-overlay { animation: overlay-fade .2s ease; }
body.theme-v2 .modal-overlay .modal-box,
body.theme-v2 .modal-overlay .modal-card,
body.theme-v2 .transfer-overlay .transfer-card { animation: modal-pop .26s cubic-bezier(.22,.61,.36,1) both; }

@keyframes chat-bubble-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
body.theme-v2 .chat-animate-in .chat-bubble { animation: chat-bubble-in .3s ease both; }