/* ═══════════════════════════════════════════════════════════════════════════
   Master Leads CRM – Visuelle Verbesserungen
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── 1. GLOBALE SCROLLBARS ─────────────────────────────────────────────── */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(0,87,255,.3) transparent;
}
*::-webkit-scrollbar { width: 5px; height: 5px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: rgba(0,87,255,.25);
  border-radius: 10px;
  transition: background .2s;
}
*::-webkit-scrollbar-thumb:hover { background: rgba(0,87,255,.5); }

/* ─── 2. TEXTMARKIERUNG ─────────────────────────────────────────────────── */
::selection {
  background: rgba(0,87,255,.35);
  color: #fff;
}

/* ─── 3. PROGRESS BAR (oben beim Laden) ─────────────────────────────────── */
#progress-bar {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, #0057FF, #3382ff, #00d4a0);
  z-index: 9998;
  border-radius: 0 3px 3px 0;
  transition: width .3s ease, opacity .3s ease;
  pointer-events: none;
  opacity: 0;
}
#progress-bar.loading {
  opacity: 1;
  animation: progress-flow 1.2s ease-in-out infinite;
}
#progress-bar.done {
  width: 100% !important;
  opacity: 0;
  transition: opacity .4s .1s ease;
}
@keyframes progress-flow {
  0%   { width: 5%; }
  40%  { width: 65%; }
  70%  { width: 82%; }
  90%  { width: 90%; }
  100% { width: 90%; }
}

/* ─── 4. SEITEN-ÜBERGÄNGE ───────────────────────────────────────────────── */
.page {
  animation: none;
}
.page.active {
  animation: page-enter .3s cubic-bezier(.22,1,.36,1) both;
}
@keyframes page-enter {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ─── 5. CARD STAGGER ENTRANCE ──────────────────────────────────────────── */
.kpi-grid .kpi         { animation: card-up .4s cubic-bezier(.22,1,.36,1) both; }
.kpi-grid .kpi:nth-child(1) { animation-delay: .04s; }
.kpi-grid .kpi:nth-child(2) { animation-delay: .08s; }
.kpi-grid .kpi:nth-child(3) { animation-delay: .12s; }
.kpi-grid .kpi:nth-child(4) { animation-delay: .16s; }
.kpi-grid .kpi:nth-child(5) { animation-delay: .20s; }

.chart-grid .card,
.chart-grid-3 .card     { animation: card-up .4s cubic-bezier(.22,1,.36,1) both; }
.chart-grid .card:nth-child(1),
.chart-grid-3 .card:nth-child(1) { animation-delay: .10s; }
.chart-grid .card:nth-child(2),
.chart-grid-3 .card:nth-child(2) { animation-delay: .16s; }
.chart-grid-3 .card:nth-child(3) { animation-delay: .22s; }

.bereich-kpi-bar .bkpi  { animation: card-up .4s cubic-bezier(.22,1,.36,1) both; }
.bereich-kpi-bar .bkpi:nth-child(1) { animation-delay: .04s; }
.bereich-kpi-bar .bkpi:nth-child(2) { animation-delay: .08s; }
.bereich-kpi-bar .bkpi:nth-child(3) { animation-delay: .12s; }
.bereich-kpi-bar .bkpi:nth-child(4) { animation-delay: .16s; }
.bereich-kpi-bar .bkpi:nth-child(5) { animation-delay: .20s; }

@keyframes card-up {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── 6. MODAL ANIMATION ────────────────────────────────────────────────── */
.modal-overlay {
  opacity: 0;
  transition: opacity .22s ease;
}
.modal-overlay.open {
  opacity: 1;
}
.modal-overlay.open .modal {
  animation: modal-in .28s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes modal-in {
  from { opacity: 0; transform: scale(.92) translateY(-12px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ─── 7. DETAIL PANEL ANIMATION ─────────────────────────────────────────── */
.overlay.open .detail-panel {
  animation: panel-slide .3s cubic-bezier(.22,1,.36,1) both;
}
@keyframes panel-slide {
  from { transform: translateX(100%); opacity: .6; }
  to   { transform: translateX(0); opacity: 1; }
}

/* ─── 8. TOAST VERBESSERUNGEN ───────────────────────────────────────────── */
#toast {
  transform: translateX(80px) scale(.94);
  border-left: 4px solid transparent;
}
#toast.show {
  transform: translateX(0) scale(1);
}
#toast.success { border-left-color: var(--green); }
#toast.error   { border-left-color: var(--red); }
#toast.info    { border-left-color: #0057FF; }

/* ─── 9. TABELLEN VERBESSERUNGEN ─────────────────────────────────────────── */
tbody tr {
  transition: background .15s, transform .1s;
}
tbody tr:hover {
  transform: scale(1.002);
}
/* Zeilen einblenden beim Laden */
tbody tr {
  animation: row-in .25s ease both;
}
tbody tr:nth-child(1)  { animation-delay: .02s; }
tbody tr:nth-child(2)  { animation-delay: .04s; }
tbody tr:nth-child(3)  { animation-delay: .06s; }
tbody tr:nth-child(4)  { animation-delay: .08s; }
tbody tr:nth-child(5)  { animation-delay: .10s; }
tbody tr:nth-child(n+6) { animation-delay: .12s; }
@keyframes row-in {
  from { opacity: 0; transform: translateX(-4px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Zebra-Streifen (subtil) */
tbody tr:nth-child(even) { background: rgba(0,87,255,.025); }

/* Spalten-Hover im Header */
thead th {
  transition: background .15s, color .15s;
}
thead th:hover { background: rgba(0,87,255,.12); color: #fff; cursor: pointer; }

/* ─── 10. KPI WERT – GRADIENT TEXT EFFEKT ──────────────────────────────── */
.kpi.blue .kpi-value {
  background: linear-gradient(135deg, #fff 30%, #5b96ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: none;
}
.kpi.green .kpi-value {
  background: linear-gradient(135deg, #00d4a0 30%, #2dd4e8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: none;
}
.kpi.orange .kpi-value {
  background: linear-gradient(135deg, #ff9500 30%, #fbbf24);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: none;
}
.kpi.red .kpi-value {
  background: linear-gradient(135deg, #ff3b5c 30%, #ff6b85);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: none;
}
/* Light theme: gradient off (würde zu dunkel sein) */
[data-theme="light"] .kpi .kpi-value {
  background: none;
  -webkit-text-fill-color: inherit;
}

/* ─── 11. BADGE DOT INDICATOR ───────────────────────────────────────────── */
.badge::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
  transition: box-shadow .2s;
}
.b-neu::before         { background: #5b96ff;  box-shadow: 0 0 5px rgba(91,150,255,.7); }
.b-kontaktiert::before { background: #ffa733;  box-shadow: 0 0 5px rgba(255,167,51,.6); }
.b-qualifiziert::before{ background: #22d3ee;  box-shadow: 0 0 5px rgba(34,211,238,.6); }
.b-beratung::before    { background: #a78bfa;  box-shadow: 0 0 5px rgba(167,139,250,.6); }
.b-angebot::before     { background: #7aa8ff;  box-shadow: 0 0 5px rgba(122,168,255,.6); }
.b-verhandlung::before { background: #fbbf24;  box-shadow: 0 0 5px rgba(251,191,36,.6); }
.b-abschluss::before   { background: #00d4a0;  box-shadow: 0 0 5px rgba(0,212,160,.7);  }
.b-verloren::before    { background: #ff6b85;  box-shadow: 0 0 5px rgba(255,107,133,.6); }
.b-meta::before        { background: #5b96ff;  box-shadow: 0 0 5px rgba(91,150,255,.5); }
.b-google::before      { background: #ffa733;  box-shadow: 0 0 5px rgba(255,167,51,.5); }
.b-manual::before      { background: rgba(228,238,255,.4); box-shadow: none; }
.b-admin::before       { background: #5b96ff;  box-shadow: 0 0 5px rgba(91,150,255,.5); }
.b-agent::before       { background: #00d4a0;  box-shadow: 0 0 5px rgba(0,212,160,.5);  }
.b-entwurf::before     { background: rgba(228,238,255,.3); box-shadow: none; }
.b-gesendet::before    { background: #5b96ff;  box-shadow: 0 0 5px rgba(91,150,255,.5); }
.b-bezahlt::before     { background: #00d4a0;  box-shadow: 0 0 5px rgba(0,212,160,.5);  }
.b-storniert::before   { background: #ff6b85;  box-shadow: 0 0 5px rgba(255,107,133,.5); }

/* ─── 12. FEED ITEMS ANIMATION ──────────────────────────────────────────── */
.feed-item {
  animation: row-in .25s ease both;
  border-radius: 10px;
  padding: 10px 8px;
  margin: 0 -8px;
  transition: background .15s, opacity .15s, transform .15s;
}
.feed-item:hover {
  opacity: 1 !important;
  background: rgba(0,87,255,.07);
  transform: translateX(4px);
}

/* ─── 13. BUTTON VERBESSERUNGEN ─────────────────────────────────────────── */
.btn {
  transition: all .18s cubic-bezier(.22,1,.36,1);
}
.btn:active {
  transform: scale(.96) !important;
}
.btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.1), transparent);
  transform: translateX(-100%);
  transition: transform .5s;
  border-radius: inherit;
}
.btn-primary:hover::before {
  transform: translateX(100%);
}

/* ─── 14. SIDEBAR VERBESSERUNGEN ─────────────────────────────────────────── */
.sb-item {
  position: relative;
}
.sb-item.active::before {
  content: '';
  position: absolute;
  left: 0; top: 20%; bottom: 20%;
  width: 3px;
  background: linear-gradient(180deg, #0057FF, #3382ff);
  border-radius: 0 3px 3px 0;
  box-shadow: 0 0 8px rgba(0,87,255,.8);
}

/* Sidebar item hover glow */
.sb-item:hover svg {
  filter: drop-shadow(0 0 3px rgba(0,87,255,.6));
}

/* Sidebar transition */
.sb-item, .sb-sub-item {
  transition: all .18s cubic-bezier(.22,1,.36,1);
}

/* ─── 15. KANBAN CARDS VERBESSERUNGEN ────────────────────────────────────── */
.k-card {
  transition: all .2s cubic-bezier(.22,1,.36,1);
}
.k-card:hover {
  transform: translateY(-4px) scale(1.01);
}

/* ─── 16. FORMULAR INPUT GLOW ───────────────────────────────────────────── */
.form-input,
.form-select,
.form-textarea,
.detail-input,
.activity-input {
  transition: border-color .2s, box-shadow .2s, background .2s;
}

/* ─── 17. EMPTY STATE VERBESSERUNGEN ─────────────────────────────────────── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 72px 24px;
  color: var(--text-3);
  animation: card-up .4s ease both;
}
.empty-state-icon {
  font-size: 52px;
  margin-bottom: 16px;
  opacity: .55;
  filter: grayscale(20%);
  animation: float 3s ease-in-out infinite;
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}
.empty-state p {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: 6px;
}
.empty-state span {
  font-size: 13px;
  color: var(--text-3);
}

/* ─── 18. SKELETON LOADING ──────────────────────────────────────────────── */
.skeleton {
  background: var(--bg-card);
  border-radius: 8px;
  position: relative;
  overflow: hidden;
}
.skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,.06) 50%,
    transparent 100%
  );
  animation: shimmer 1.6s infinite;
}
@keyframes shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
.skeleton-row { height: 52px; margin: 2px 0; border-radius: 6px; }
.skeleton-text { height: 14px; border-radius: 4px; margin-bottom: 8px; }
.skeleton-text.w60 { width: 60%; }
.skeleton-text.w40 { width: 40%; }
.skeleton-text.w80 { width: 80%; }

/* ─── 19. FOCUS VISIBLE STYLES ──────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid rgba(0,87,255,.6);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ─── 20. DASH WELCOME VERBESSERUNGEN ───────────────────────────────────── */
.dash-welcome {
  background: linear-gradient(135deg, var(--bg-card) 0%, rgba(0,87,255,.06) 100%);
  position: relative;
  overflow: hidden;
}
.dash-welcome::before {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,87,255,.12) 0%, transparent 70%);
  pointer-events: none;
}
.dash-greeting {
  background: linear-gradient(135deg, #fff 40%, #5b96ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
[data-theme="light"] .dash-greeting {
  background: none;
  -webkit-text-fill-color: #0a1628;
}
[data-theme="graphite"] .dash-greeting {
  background: linear-gradient(135deg, #eaedf4 40%, #4d8fff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ─── 21. KARTEN GLOW HOVER ─────────────────────────────────────────────── */
.card {
  transition: box-shadow .2s, border-color .2s, transform .2s;
}
.card:hover {
  border-color: rgba(0,87,255,.22);
  box-shadow: var(--shadow-md), 0 0 40px rgba(0,87,255,.08);
}

/* ─── 22. STATUS PILL ANIMATION ─────────────────────────────────────────── */
.status-pill {
  transition: all .18s cubic-bezier(.22,1,.36,1);
  position: relative;
}
.status-pill[class*="active-"]:after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 14px currentColor;
  opacity: .25;
  pointer-events: none;
}

/* ─── 23. SEARCH BOX GLOW ───────────────────────────────────────────────── */
.search-box {
  transition: all .2s;
}

/* ─── 24. FILTER BUTTON ACTIVE ──────────────────────────────────────────── */
.filter-btn:focus {
  outline: none;
  border-color: rgba(0,87,255,.5);
  box-shadow: 0 0 0 3px rgba(0,87,255,.12);
}

/* ─── 25. ACTIVITY DOT PULSE ────────────────────────────────────────────── */
.activity-item {
  animation: row-in .25s ease both;
}
.activity-dot {
  transition: transform .2s, box-shadow .2s;
}
.activity-item:hover .activity-dot {
  transform: scale(1.12);
  box-shadow: 0 0 12px currentColor;
}

/* ─── 26. BKPI (BEREICH-KPI) VERBESSERUNGEN ─────────────────────────────── */
.bkpi {
  transition: all .2s cubic-bezier(.22,1,.36,1);
}
.bkpi:hover {
  border-color: rgba(0,87,255,.25);
}
.bkpi-value {
  transition: color .3s;
}

/* ─── 27. TOPBAR TITLE ANIMATION ────────────────────────────────────────── */
.topbar-title {
  transition: opacity .2s;
}

/* ─── 28. SCROLL TO TOP BUTTON ──────────────────────────────────────────── */
#scroll-top-btn {
  position: fixed;
  bottom: 88px;
  right: 28px;
  width: 40px; height: 40px;
  border-radius: 12px;
  background: rgba(0,87,255,.15);
  border: 1px solid rgba(0,87,255,.3);
  color: #5b96ff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  opacity: 0;
  transform: translateY(10px);
  transition: all .25s cubic-bezier(.22,1,.36,1);
  pointer-events: none;
  z-index: 400;
  backdrop-filter: blur(12px);
}
#scroll-top-btn.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}
#scroll-top-btn:hover {
  background: rgba(0,87,255,.3);
  border-color: rgba(0,87,255,.6);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,87,255,.3);
}

/* ─── 29. COPY-TO-CLIPBOARD EFFEKT ─────────────────────────────────────── */
.copied-flash {
  animation: copied-pulse .4s ease;
}
@keyframes copied-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(0,212,160,.5); }
  70%  { box-shadow: 0 0 0 10px rgba(0,212,160,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,212,160,0); }
}

/* ─── 30. RECHNUNG (INVOICE) ZEILENANIMATION ─────────────────────────────── */
.inv-items-table tr {
  animation: row-in .2s ease both;
}

/* ─── 31. THEME SWITCHER ANIMATION ──────────────────────────────────────── */
.theme-btn {
  transition: all .18s cubic-bezier(.22,1,.36,1);
}
.theme-btn:active {
  transform: scale(.94);
}

/* ─── 32. GRAPH/CHART CONTAINER ──────────────────────────────────────────── */
canvas {
  animation: card-up .5s ease both;
  animation-delay: .2s;
}

/* ─── 33. RESPONSIVE VERBESSERUNGEN ─────────────────────────────────────── */
@media (max-width: 768px) {
  .content { padding: 16px 14px; }
  .dash-welcome { padding: 14px 18px; }
  .modal { padding: 22px; }
  #scroll-top-btn { right: 16px; bottom: 72px; }
}

/* ─── 34. LIGHT THEME ANPASSUNGEN ───────────────────────────────────────── */
[data-theme="light"] .badge::before {
  filter: brightness(.8);
}
[data-theme="light"] .kpi.blue .kpi-value,
[data-theme="light"] .kpi.green .kpi-value,
[data-theme="light"] .kpi.orange .kpi-value,
[data-theme="light"] .kpi.red .kpi-value {
  background: none;
  -webkit-text-fill-color: inherit;
}
[data-theme="light"] .feed-item:hover {
  background: rgba(0,87,255,.06);
}
[data-theme="light"] tbody tr:nth-child(even) {
  background: rgba(0,87,255,.025);
}
[data-theme="light"] .card:hover {
  border-color: rgba(0,87,255,.2);
  box-shadow: 0 6px 30px rgba(0,87,255,.12);
}
[data-theme="light"] .sb-item.active::before {
  box-shadow: 0 0 6px rgba(0,87,255,.5);
}
[data-theme="light"] #scroll-top-btn {
  background: rgba(0,87,255,.1);
  color: #0041CC;
}

/* ─── 35. GRAPHITE THEME ANPASSUNGEN ────────────────────────────────────── */
[data-theme="graphite"] .kpi.blue .kpi-value {
  background: linear-gradient(135deg, #eaedf4 30%, #4d8fff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
[data-theme="graphite"] .kpi.green .kpi-value {
  background: linear-gradient(135deg, #2dd4a0 30%, #2dd4e8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
[data-theme="graphite"] .feed-item:hover {
  background: rgba(255,255,255,.04);
}