/* === Kivio Design Tokens === */
/* Hier aendern fuer neues Farbschema */

:root {
  --kivio-primary: oklch(52% 0.12 290);
  --kivio-primary-light: oklch(62% 0.10 290);
  --kivio-primary-lighter: oklch(72% 0.08 290);
  --kivio-primary-faint: oklch(52% 0.12 290 / 0.08);
  --kivio-primary-muted: oklch(52% 0.12 290 / 0.15);

  --kivio-bg: oklch(96.5% 0.008 80);
  --kivio-bg-card: oklch(99% 0.004 80);
  --kivio-bg-elevated: oklch(100% 0 0);
  --kivio-bg-sidebar: oklch(98% 0.006 80);

  --kivio-border: oklch(88% 0.01 280);
  --kivio-border-light: oklch(92% 0.005 280);

  --kivio-text: oklch(25% 0.02 280);
  --kivio-text-muted: oklch(50% 0.01 280);
  --kivio-text-light: oklch(65% 0.008 280);
}

[data-theme="kivio"] {
  /* Primary: Gedaempftes Violett mit Grau-Unterton */
  --color-primary: var(--kivio-primary);
  --color-primary-content: oklch(100% 0 0);

  /* Secondary: Helleres gedaempftes Violett */
  --color-secondary: var(--kivio-primary-light);
  --color-secondary-content: oklch(100% 0 0);

  /* Accent: Noch helleres Violett (KEIN Gelb) */
  --color-accent: var(--kivio-primary-lighter);
  --color-accent-content: var(--kivio-text);

  /* Neutral: Mittleres Grau */
  --color-neutral: oklch(40% 0.02 280);
  --color-neutral-content: oklch(96% 0.005 280);

  /* Base: Helles Cream-Schema */
  --color-base-100: var(--kivio-bg);
  --color-base-200: var(--kivio-bg-card);
  --color-base-300: var(--kivio-border);
  --color-base-content: var(--kivio-text);

  /* Semantic */
  --color-info: var(--kivio-primary-light);
  --color-info-content: oklch(100% 0 0);
  --color-success: oklch(72% 0.17 160);
  --color-success-content: oklch(100% 0 0);
  --color-warning: oklch(82% 0.16 85);
  --color-warning-content: oklch(20% 0.02 80);
  --color-error: oklch(63% 0.24 29);
  --color-error-content: oklch(100% 0 0);

  /* Shape */
  --radius-selector: 0.5rem;
  --radius-field: 0.75rem;
  --radius-box: 1rem;
  --size-selector: 0.25rem;
  --size-field: 0.25rem;
  --border: 1px;
  --depth: 2;
  --noise: 0;
}

/* === Typografie === */

body {
  font-family: 'DM Sans', sans-serif;
  letter-spacing: -0.01em;
}

h1, h2, h3, h4, .font-display {
  font-family: 'Plus Jakarta Sans', sans-serif;
  letter-spacing: -0.025em;
}

/* === Sidebar === */

.sidebar-glass {
  background: linear-gradient(180deg,
    var(--kivio-bg-sidebar) 0%,
    oklch(97% 0.005 80) 100%
  );
  border-right: 1px solid var(--kivio-border);
}

.nav-item {
  transition: background-color 0.15s ease, color 0.15s ease;
  border-radius: 0.625rem;
}

.nav-item:hover {
  background-color: oklch(94% 0.01 280);
}

.nav-item.active {
  background: linear-gradient(135deg,
    var(--kivio-primary-faint) 0%,
    oklch(52% 0.12 290 / 0.04) 100%
  );
  border-left: 3px solid var(--kivio-primary);
}

/* === Sidebar Drawer (Mobile) === */

.sidebar-drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: oklch(25% 0.01 280 / 0);
  visibility: hidden;
  transition: background 0.3s ease, visibility 0.3s ease;
}

.sidebar-drawer-overlay.drawer-open {
  visibility: visible;
  background: oklch(25% 0.01 280 / 0.35);
}

.sidebar-drawer-panel {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 16rem;
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-top: env(safe-area-inset-top, 0px);
}

.sidebar-drawer-overlay.drawer-open .sidebar-drawer-panel {
  transform: translateX(0);
}

/* === Header === */

.header-glass {
  background: oklch(99% 0.004 80 / 0.92);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border-bottom: 1px solid var(--kivio-border-light);
  padding-top: env(safe-area-inset-top, 0px);
}

/* === Mobile Tabbar === */

.mobile-tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: space-around;
  height: 4.5rem;
  background: oklch(99% 0.004 80 / 0.95);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border-top: 1px solid var(--kivio-border-light);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.mobile-tabbar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  flex: 1;
  color: var(--kivio-text-light);
  text-decoration: none;
  transition: color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.mobile-tabbar-item svg {
  display: block;
  width: 24px;
  height: 24px;
}

.mobile-tabbar-item.active {
  color: var(--kivio-primary);
  box-shadow: inset 0 2px 0 0 var(--kivio-primary);
}

.mobile-tabbar-item:not(.active):active {
  color: oklch(45% 0.02 280);
}

.mobile-tabbar-label {
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1;
}

/* Schmale Mobile-Viewports: kompaktere Labels/Icons fuer 6-7 Tabbar-Items */
@media (max-width: 480px) {
  .mobile-tabbar-item {
    gap: 0.2rem;
  }
  .mobile-tabbar-item svg {
    width: 22px;
    height: 22px;
  }
  .mobile-tabbar-label {
    font-size: 0.625rem;
    letter-spacing: -0.01em;
  }
}

/* Tabbar auf Desktop verstecken */
@media (min-width: 1024px) {
  .mobile-tabbar {
    display: none;
  }
}

/* === Cards === */

.card-elevated {
  background: var(--kivio-bg-elevated);
  box-shadow:
    0 1px 3px oklch(0% 0 0 / 0.04),
    0 4px 16px oklch(0% 0 0 / 0.06);
  border: 1px solid var(--kivio-border-light);
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.card-elevated:hover {
  box-shadow:
    0 2px 6px oklch(0% 0 0 / 0.06),
    0 8px 28px oklch(0% 0 0 / 0.1);
  border-color: var(--kivio-border);
  transform: translateY(-1px);
}

/* === Buttons === */

.btn-primary {
  background: linear-gradient(135deg, oklch(44% 0.14 290), oklch(38% 0.13 289));
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px oklch(44% 0.14 290 / 0.3);
}

.btn-primary:hover {
  box-shadow: 0 4px 16px oklch(44% 0.14 290 / 0.4);
  transform: translateY(-1px);
}

.btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 1px 4px oklch(44% 0.14 290 / 0.3);
}

.btn-secondary {
  background: transparent;
  border: 1px solid var(--kivio-primary);
  color: var(--kivio-primary);
  transition: all 0.2s ease;
  box-shadow: none;
}

.btn-secondary:hover {
  background: var(--kivio-primary-faint);
  box-shadow: 0 4px 16px oklch(52% 0.12 290 / 0.12);
  transform: translateY(-1px);
}

.btn-secondary:active {
  transform: translateY(0);
  box-shadow: 0 1px 4px oklch(52% 0.12 290 / 0.08);
}

.btn-ghost:hover {
  background-color: var(--kivio-primary-faint);
}

/* === Gradient === */

.gradient-violet {
  background: linear-gradient(135deg,
    var(--kivio-primary) 0%,
    var(--kivio-primary-light) 100%
  );
}

/* === Focus === */

input:focus, textarea:focus, select:focus {
  box-shadow: 0 0 0 3px var(--kivio-primary-muted);
  transition: box-shadow 0.2s ease;
}

/* === Animationen === */

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fadeInUp 0.3s ease-out forwards;
}

.animate-stagger > * {
  opacity: 0;
  animation: fadeInUp 0.3s ease-out forwards;
}

.animate-stagger > *:nth-child(1) { animation-delay: 0.05s; }
.animate-stagger > *:nth-child(2) { animation-delay: 0.1s; }
.animate-stagger > *:nth-child(3) { animation-delay: 0.15s; }
.animate-stagger > *:nth-child(4) { animation-delay: 0.2s; }
.animate-stagger > *:nth-child(5) { animation-delay: 0.25s; }
.animate-stagger > *:nth-child(6) { animation-delay: 0.3s; }
.animate-stagger > *:nth-child(7) { animation-delay: 0.35s; }
.animate-stagger > *:nth-child(8) { animation-delay: 0.4s; }
.animate-stagger > *:nth-child(9) { animation-delay: 0.45s; }
.animate-stagger > *:nth-child(10) { animation-delay: 0.5s; }

/* === Auth Pages === */

/* Dot pattern overlay */
.auth-page {
  position: relative;
}

.auth-page::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: radial-gradient(circle, oklch(52% 0.12 290 / 0.04) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
  z-index: 1;
}

/* Floating decorative orbs (light theme) */
.auth-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  will-change: transform;
}

.auth-orb-1 {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, oklch(52% 0.12 290 / 0.08), transparent 70%);
  top: -10%;
  left: -10%;
  animation: auth-orb-float 8s ease-in-out infinite alternate;
}

.auth-orb-2 {
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, oklch(62% 0.10 290 / 0.06), transparent 70%);
  bottom: -5%;
  right: -8%;
  animation: auth-orb-float 10s ease-in-out infinite alternate-reverse;
}

.auth-orb-3 {
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, oklch(72% 0.08 290 / 0.05), transparent 70%);
  top: 15%;
  right: 5%;
  animation: auth-orb-float 7s ease-in-out infinite alternate;
}

@keyframes auth-orb-float {
  from { transform: translateY(0); }
  to { transform: translateY(-24px); }
}

/* Auth input styling — light */
.auth-input {
  background: var(--kivio-bg-elevated) !important;
  border: 1px solid var(--kivio-border) !important;
  color: var(--kivio-text) !important;
  transition: all 0.2s ease !important;
}

.auth-input:hover:not(:focus) {
  border-color: oklch(82% 0.015 280) !important;
}

.auth-input:focus {
  background: var(--kivio-bg-elevated) !important;
  border-color: oklch(52% 0.12 290 / 0.5) !important;
}

/* Hero icon container */
.auth-hero-icon {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 0.875rem;
  background: linear-gradient(135deg,
    oklch(52% 0.12 290 / 0.1),
    oklch(62% 0.10 290 / 0.06)
  );
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--kivio-primary);
  margin: 0 auto 1.25rem;
  border: 1px solid oklch(52% 0.12 290 / 0.12);
}

/* Account type selection cards */
.account-type-card {
  border-color: var(--kivio-border);
  color: var(--kivio-text-muted);
}

.account-type-card:hover {
  border-color: oklch(52% 0.12 290 / 0.3);
}

.account-type-card.active {
  border-color: var(--kivio-primary);
  background: oklch(52% 0.12 290 / 0.05);
  color: var(--kivio-text);
  box-shadow: 0 1px 3px oklch(52% 0.12 290 / 0.1);
}

.account-type-card.active svg {
  color: var(--kivio-primary);
}

/* Subtle divider */
.auth-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--kivio-border), transparent);
  margin: 1.5rem 0;
}

/* Verification code box — light */
.auth-code-input {
  width: 2.75rem;
  height: 3.25rem;
  text-align: center;
  font-size: 1.35rem;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  border-radius: 0.75rem;
  border: 1.5px solid var(--kivio-border);
  background: var(--kivio-bg-elevated);
  color: var(--kivio-text);
  transition: all 0.2s ease;
  caret-color: var(--kivio-primary);
  outline: none;
}

.auth-code-input:focus {
  border-color: var(--kivio-primary);
  background: var(--kivio-bg-elevated);
  box-shadow: 0 0 0 3px var(--kivio-primary-muted);
  transform: scale(1.06);
}

@media (min-width: 640px) {
  .auth-code-input {
    width: 3.25rem;
    height: 3.75rem;
    font-size: 1.5rem;
  }
}

/* Password toggle button */
.pw-toggle-btn {
  position: absolute;
  right: 0.35rem;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: oklch(62% 0.025 280);
  cursor: pointer;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.625rem;
  display: grid;
  place-items: center;
  transition: color 0.2s ease, background 0.2s ease;
  z-index: 1;
  -webkit-tap-highlight-color: transparent;
}
.pw-toggle-btn:hover {
  background: oklch(52% 0.12 290 / 0.07);
  color: oklch(52% 0.12 290);
}
.pw-toggle-btn:active {
  transform: translateY(-50%) scale(0.92);
  transition: transform 0.1s ease;
}
/* Icon layer stacking — both sit in same grid cell */
.pw-toggle-btn .pw-eye-show,
.pw-toggle-btn .pw-eye-hide {
  grid-area: 1 / 1;
  line-height: 0;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
/* Hidden state */
.pw-toggle-btn .pw-eye-show.is-hidden,
.pw-toggle-btn .pw-eye-hide.is-hidden {
  opacity: 0;
  transform: scale(0.75);
  pointer-events: none;
}
/* Active eye-off gets accent color */
.pw-toggle-btn .pw-eye-hide:not(.is-hidden) {
  color: oklch(52% 0.12 290);
}

/* Password strength segments */
.pw-strength-segment {
  height: 3px;
  border-radius: 2px;
  background: oklch(88% 0.005 280);
  transition: background 0.3s ease, transform 0.2s ease;
}

.pw-strength-segment.seg-error {
  background: oklch(63% 0.24 29);
  transform: scaleY(1.3);
}

.pw-strength-segment.seg-warning {
  background: oklch(82% 0.16 85);
  transform: scaleY(1.3);
}

.pw-strength-segment.seg-success {
  background: oklch(72% 0.17 160);
  transform: scaleY(1.3);
}

/* === Admin Panel === */

.admin-sidebar-glass {
  background: linear-gradient(180deg,
    var(--kivio-bg-sidebar) 0%,
    oklch(97% 0.005 80) 100%
  );
  border-right: 1px solid var(--kivio-border);
}

/* Admin drawer from right side */
.admin-drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: oklch(25% 0.01 280 / 0);
  visibility: hidden;
  transition: background 0.3s ease, visibility 0.3s ease;
}

.admin-drawer-overlay.drawer-open {
  visibility: visible;
  background: oklch(25% 0.01 280 / 0.35);
}

.admin-drawer-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 24rem;
  max-width: 100vw;
  background: var(--kivio-bg-elevated);
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: -4px 0 24px oklch(0% 0 0 / 0.1);
}

.admin-drawer-overlay.drawer-open .admin-drawer-panel {
  transform: translateX(0);
}

@media (max-width: 767px) {
  .admin-drawer-panel {
    width: 100vw;
  }
}

/* === Coach Session Drawer (Mobile) ===
   Quick-Task 260503-aga (Folge-Fix Runde 5): Eigene CSS-Klassen statt
   Tailwind-Utilities. Tailwind-Browser-CDN (v4) generiert
   `-translate-x-full` / `translate-x-0` nicht zuverlaessig, wenn die
   Klassen nur per JS hinzugefuegt werden. Loesung: dedizierte CSS-Klasse,
   identisches Pattern wie `.sidebar-drawer-overlay`.
   Auf md+ (>= 768px) ist der Drawer als statische Spalte sichtbar
   (kein Off-Canvas, keine Transformation, kein Fixed-Position). */

.coach-drawer {
  position: fixed;
  top: 4rem;       /* unter dem header-glass (min-h-16) */
  bottom: 0;
  left: 0;
  width: 18rem;    /* entspricht w-72 */
  max-width: 85vw;
  z-index: 40;
  transform: translateX(-100%);
  transition: transform 0.2s ease-out;
  will-change: transform;
}

.coach-drawer.is-open {
  transform: translateX(0);
}

.coach-drawer-backdrop {
  position: fixed;
  inset: 0;
  top: 4rem;
  background: oklch(0% 0 0 / 0.4);
  z-index: 30;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease-out, visibility 0.2s ease-out;
}

.coach-drawer-backdrop.is-visible {
  opacity: 1;
  visibility: visible;
}

@media (min-width: 768px) {
  .coach-drawer {
    position: static;
    top: auto;
    bottom: auto;
    width: 16rem;        /* md:w-64 */
    max-width: none;
    transform: none;
    transition: none;
  }
  .coach-drawer-backdrop {
    display: none;
  }
}

@media (min-width: 1024px) {
  .coach-drawer {
    width: 18rem;        /* lg:w-72 */
  }
}

/* === Coach Full-Bleed Container ===
   Quick-Task 260503-aga: Width-Kompensation fuer -mx-6 / lg:-mx-8.
   Quick-Task 260503-prq: Mobile-Hoehe respektiert die fixed Mobile-
   Tabbar (4.5rem + safe-area-inset-bottom), damit Footer (Input-Form
   und Quick-Actions) NICHT unter der Tabbar liegt. Auf Desktop (>=lg)
   ist die Tabbar versteckt — Fullscreen-Hoehe bleibt erhalten.
   Tailwind-CDN-Arbitrary-Values (h-[calc(...)]) mit env() sind
   unzuverlaessig, daher dedizierte CSS-Klasse. */
.coach-fullbleed {
  width: calc(100% + 3rem);   /* kompensiert -mx-6 (1.5rem * 2) */
  /* Mobile: Viewport - Header(4rem) - Tabbar(4.5rem) - Safe-Area */
  height: calc(100vh - 4rem - 4.5rem - env(safe-area-inset-bottom, 0px));
}

@media (min-width: 1024px) {
  .coach-fullbleed {
    width: calc(100% + 4rem); /* kompensiert lg:-mx-8 (2rem * 2) */
    /* Desktop: keine Tabbar — volle Hoehe minus Header */
    height: calc(100vh - 4rem);
  }
}

/* === Transaction Timeline === */

.tx-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Date group divider */
.tx-date-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0;
}

.tx-date-header:first-child {
  padding-top: 0;
}

.tx-date-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--kivio-border), oklch(94% 0.005 280 / 0.3));
}

.tx-date-label {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--kivio-text-muted);
  white-space: nowrap;
  padding: 0.125rem 0.5rem;
  background: oklch(94% 0.005 280);
  border-radius: 0.375rem;
}

/* Transaction row */
.tx-row {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  padding: 0.875rem 1rem;
  margin: 0 -0.25rem;
  border-radius: 0.875rem;
  border-left: 3px solid transparent;
  transition: background-color 0.2s ease, border-color 0.15s ease;
}

.tx-row:hover {
  background: oklch(96% 0.005 280);
}

/* Type-specific accent borders on hover */
.tx-row.tx-type-purchase:hover   { border-left-color: oklch(52% 0.12 290 / 0.5); }
.tx-row.tx-type-starter:hover    { border-left-color: oklch(72% 0.17 160 / 0.5); }
.tx-row.tx-type-deduction:hover  { border-left-color: oklch(63% 0.24 29 / 0.4); }
.tx-row.tx-type-refund:hover     { border-left-color: oklch(82% 0.16 85 / 0.6); }
.tx-row.tx-type-admin:hover      { border-left-color: oklch(62% 0.10 290 / 0.5); }

/* Separator between rows (not between date header + first row) */
.tx-row + .tx-row {
  border-top: 1px solid var(--kivio-border-light);
}

.tx-date-header + .tx-row {
  border-top: none;
}

/* Persistent subtle accent for purchase rows (best scanability) */
.tx-row.tx-type-purchase { border-left-color: oklch(52% 0.12 290 / 0.2); }

/* Icon column */
.tx-icon-col {
  flex-shrink: 0;
  padding-top: 0.125rem;
}

.tx-icon {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.625rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.tx-row:hover .tx-icon {
  transform: scale(1.08);
}

/* Icon colors per type */
.tx-type-purchase .tx-icon {
  background: linear-gradient(135deg, oklch(52% 0.12 290 / 0.1), oklch(62% 0.10 290 / 0.08));
  color: var(--kivio-primary);
  box-shadow: 0 2px 8px oklch(52% 0.12 290 / 0.08);
}
.tx-type-starter .tx-icon {
  background: linear-gradient(135deg, oklch(72% 0.17 160 / 0.1), oklch(72% 0.17 160 / 0.06));
  color: oklch(72% 0.17 160);
  box-shadow: 0 2px 8px oklch(72% 0.17 160 / 0.08);
}
.tx-type-deduction .tx-icon {
  background: oklch(63% 0.24 29 / 0.07);
  color: oklch(63% 0.24 29 / 0.7);
}
.tx-type-refund .tx-icon {
  background: oklch(82% 0.16 85 / 0.1);
  color: oklch(70% 0.12 85);
  box-shadow: 0 2px 8px oklch(82% 0.16 85 / 0.08);
}
.tx-type-admin .tx-icon {
  background: linear-gradient(135deg, oklch(62% 0.10 290 / 0.1), oklch(62% 0.10 290 / 0.06));
  color: var(--kivio-primary-light);
}

/* Type badges */
.tx-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.125rem 0.4375rem;
  border-radius: 0.3125rem;
  line-height: 1.4;
}

.tx-badge-purchase {
  background: oklch(52% 0.12 290 / 0.08);
  color: var(--kivio-primary);
}
.tx-badge-starter {
  background: oklch(72% 0.17 160 / 0.08);
  color: oklch(52% 0.14 160);
}
.tx-badge-deduction {
  background: oklch(63% 0.24 29 / 0.06);
  color: oklch(55% 0.20 29);
}
.tx-badge-refund {
  background: oklch(82% 0.16 85 / 0.1);
  color: oklch(55% 0.12 85);
}
.tx-badge-admin {
  background: oklch(62% 0.10 290 / 0.08);
  color: oklch(52% 0.10 290);
}

/* Receipt button */
.tx-receipt-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  margin-top: 0.375rem;
  padding: 0.25rem 0.625rem;
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--kivio-primary);
  background: oklch(52% 0.12 290 / 0.05);
  border: 1px solid oklch(52% 0.12 290 / 0.12);
  border-radius: 1rem;
  text-decoration: none;
  transition: all 0.2s ease;
  line-height: 1;
}

.tx-receipt-btn:hover {
  background: oklch(52% 0.12 290 / 0.1);
  border-color: oklch(52% 0.12 290 / 0.25);
  box-shadow: 0 2px 8px oklch(52% 0.12 290 / 0.1);
  transform: translateY(-1px);
}

.tx-receipt-btn:active {
  transform: translateY(0);
}

/* Amount column */
.tx-amount-col {
  flex-shrink: 0;
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.1875rem;
  padding-top: 0.125rem;
}

.tx-amount {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}

.tx-amount-pos {
  color: oklch(52% 0.17 160);
}

.tx-amount-neg {
  color: oklch(50% 0.18 29);
}

.tx-balance {
  font-size: 0.625rem;
  font-weight: 500;
  color: var(--kivio-text-light);
  letter-spacing: 0.01em;
}

/* Empty state */
.tx-empty {
  text-align: center;
  padding: 3rem 2rem;
  background: oklch(97% 0.005 80);
  border: 1px dashed var(--kivio-border);
  border-radius: 1rem;
}

.tx-empty-icon {
  width: 3.5rem;
  height: 3.5rem;
  margin: 0 auto;
  border-radius: 0.875rem;
  background: oklch(94% 0.005 280);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--kivio-text-light);
}

/* Stagger animation for transaction rows */
.tx-timeline .tx-row {
  opacity: 0;
  animation: txFadeIn 0.35s ease-out forwards;
}

@keyframes txFadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.tx-timeline .tx-row:nth-child(1)  { animation-delay: 0.03s; }
.tx-timeline .tx-row:nth-child(2)  { animation-delay: 0.06s; }
.tx-timeline .tx-row:nth-child(3)  { animation-delay: 0.09s; }
.tx-timeline .tx-row:nth-child(4)  { animation-delay: 0.12s; }
.tx-timeline .tx-row:nth-child(5)  { animation-delay: 0.15s; }
.tx-timeline .tx-row:nth-child(6)  { animation-delay: 0.18s; }
.tx-timeline .tx-row:nth-child(7)  { animation-delay: 0.21s; }
.tx-timeline .tx-row:nth-child(8)  { animation-delay: 0.24s; }
.tx-timeline .tx-row:nth-child(9)  { animation-delay: 0.27s; }
.tx-timeline .tx-row:nth-child(10) { animation-delay: 0.30s; }

/* Mobile adjustments */
@media (max-width: 639px) {
  .tx-row {
    padding: 0.75rem 0.625rem;
    gap: 0.625rem;
  }

  .tx-icon {
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
  }

  .tx-icon svg {
    width: 15px;
    height: 15px;
  }

  .tx-amount {
    font-size: 0.8125rem;
  }
}

/* === Support FAB === */

/* =============================================
   SUPPORT FAB -- Floating Action Button
   ============================================= */

.support-fab {
  position: fixed;
  bottom: calc(4.5rem + 1.25rem);
  right: 1rem;
  z-index: 55;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  padding: 0;
  cursor: pointer;
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease;
  box-shadow:
    0 2px 8px oklch(0% 0 0 / 0.12),
    0 8px 24px oklch(52% 0.12 290 / 0.15);
}

.support-fab:hover {
  transform: scale(1.1) translateY(-2px);
  box-shadow:
    0 4px 12px oklch(0% 0 0 / 0.15),
    0 12px 32px oklch(52% 0.12 290 / 0.2);
}

.support-fab:active {
  transform: scale(0.95);
  transition-duration: 0.1s;
}

.support-fab-avatar {
  display: block;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  position: relative;
  z-index: 2;
  border: 2.5px solid oklch(100% 0 0 / 0.9);
  object-fit: cover;
}

.support-fab-ring {
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid oklch(52% 0.12 290 / 0.3);
  z-index: 1;
  animation: fab-ring-breathe 3s ease-in-out infinite;
}

.support-fab-ping {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: oklch(52% 0.12 290 / 0.1);
  z-index: 0;
  animation: fab-ping 3s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes fab-ring-breathe {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.06); }
}

@keyframes fab-ping {
  0% { transform: scale(1); opacity: 0.4; }
  50% { transform: scale(1.25); opacity: 0; }
  100% { transform: scale(1.25); opacity: 0; }
}

@media (min-width: 1024px) {
  .support-fab {
    bottom: 1.5rem;
    right: 1.5rem;
  }
}

/* =============================================
   SUPPORT POPUP -- Contact Card
   ============================================= */

.support-fab-popup {
  position: fixed;
  bottom: calc(4.5rem + 1.25rem + 56px + 0.75rem);
  right: 1rem;
  z-index: 55;
  animation: support-popup-enter 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  transform-origin: bottom right;
}

@keyframes support-popup-enter {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.support-fab-popup.hidden {
  display: none;
}

@media (min-width: 1024px) {
  .support-fab-popup {
    bottom: calc(1.5rem + 56px + 0.75rem);
    right: 1.5rem;
  }
}

.support-popup-card {
  width: 20rem;
  border-radius: 1rem;
  background: var(--kivio-bg-elevated);
  border: 1px solid var(--kivio-border);
  box-shadow:
    0 1px 3px oklch(0% 0 0 / 0.06),
    0 4px 16px oklch(0% 0 0 / 0.08),
    0 16px 48px oklch(0% 0 0 / 0.06);
  overflow: hidden;
  position: relative;
}


.support-popup-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 10;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--kivio-text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}

.support-popup-close:hover {
  background: oklch(94% 0.005 280);
  color: var(--kivio-text);
}

.support-popup-body {
  padding: 1.25rem;
}

.support-popup-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.support-popup-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}

.support-popup-avatar-wrap img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid oklch(52% 0.12 290 / 0.12);
  object-fit: cover;
}

.support-popup-status {
  position: absolute;
  bottom: 1px;
  right: 1px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: oklch(72% 0.17 160);
  border: 2px solid var(--kivio-bg-elevated);
}

.support-popup-contacts {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.support-contact-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  border-radius: 0.625rem;
  text-decoration: none;
  transition: all 0.15s ease;
  border: 1px solid transparent;
}

.support-contact-row:hover {
  background: oklch(96% 0.005 280);
  border-color: var(--kivio-border-light);
}

.support-contact-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(135deg,
    oklch(52% 0.12 290 / 0.08),
    oklch(62% 0.10 290 / 0.05)
  );
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--kivio-primary);
  flex-shrink: 0;
  transition: all 0.15s ease;
}

.support-contact-row:hover .support-contact-icon {
  background: linear-gradient(135deg,
    oklch(52% 0.12 290 / 0.12),
    oklch(62% 0.10 290 / 0.08)
  );
}

.support-contact-arrow {
  color: var(--kivio-text-light);
  opacity: 0;
  transform: translateX(-4px);
  transition: all 0.2s ease;
}

.support-contact-row:hover .support-contact-arrow {
  opacity: 1;
  transform: translateX(0);
}

.support-popup-divider {
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    var(--kivio-border),
    transparent
  );
  margin: 0.875rem 0;
}

.support-popup-tour {
  margin: 0;
}

.support-tour-btn {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.625rem 0.75rem;
  border-radius: 0.625rem;
  border: none;
  cursor: pointer;
  background: linear-gradient(135deg,
    var(--kivio-primary) 0%,
    oklch(48% 0.11 289) 100%
  );
  transition: all 0.2s ease;
  box-shadow:
    0 2px 8px oklch(52% 0.12 290 / 0.2),
    inset 0 1px 0 oklch(100% 0 0 / 0.1);
}

.support-tour-btn:hover {
  transform: translateY(-1px);
  box-shadow:
    0 4px 16px oklch(52% 0.12 290 / 0.25),
    inset 0 1px 0 oklch(100% 0 0 / 0.12);
}

.support-tour-btn:active {
  transform: translateY(0);
}

.support-tour-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: oklch(100% 0 0 / 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  flex-shrink: 0;
}

/* =============================================
   DRIVER.JS TOUR -- Premium Popover Styling
   ============================================= */

.kivio-tour-popover {
  font-family: 'DM Sans', sans-serif;
  border-radius: 1rem !important;
  background: var(--kivio-bg-elevated) !important;
  box-shadow:
    0 1px 3px oklch(0% 0 0 / 0.06),
    0 4px 16px oklch(0% 0 0 / 0.1),
    0 20px 48px oklch(0% 0 0 / 0.08) !important;
  border: 1px solid var(--kivio-border) !important;
  max-width: min(400px, calc(100vw - 2rem)) !important;
  padding: 0 !important;
  overflow: hidden !important;
}


.kivio-tour-popover .driver-popover-title {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 1.05rem !important;
  color: var(--kivio-text) !important;
  letter-spacing: -0.02em !important;
  padding: 1.25rem 1.25rem 0 !important;
  margin: 0 !important;
}

.kivio-tour-popover .driver-popover-description {
  font-size: 0.85rem !important;
  color: var(--kivio-text-muted) !important;
  line-height: 1.6 !important;
  padding: 0.75rem 1.25rem 0 !important;
  margin: 0 !important;
}

.kivio-tour-popover .driver-popover-description .tour-desc-wrap {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
}

.kivio-tour-popover .driver-popover-description .tour-avatar {
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: 50%;
  border: 2px solid oklch(52% 0.12 290 / 0.15);
  box-shadow: 0 2px 8px oklch(52% 0.12 290 / 0.08);
  margin-top: 2px;
  object-fit: cover;
}

.kivio-tour-popover .driver-popover-description .tour-desc-text {
  flex: 1;
  min-width: 0;
}

.kivio-tour-popover .driver-popover-description .tour-avatar-fallback {
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg,
    var(--kivio-primary),
    var(--kivio-primary-light)
  );
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  margin-top: 2px;
  box-shadow: 0 2px 8px oklch(52% 0.12 290 / 0.1);
}

/* Footer area: progress + buttons */
.kivio-tour-popover .driver-popover-footer {
  padding: 0.875rem 1.25rem 1.25rem !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
}

.kivio-tour-popover .driver-popover-progress-text {
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  color: var(--kivio-text-muted) !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

.kivio-tour-popover .driver-popover-navigation-btns {
  display: flex !important;
  gap: 0.375rem !important;
}

.kivio-tour-popover .driver-popover-navigation-btns .driver-popover-next-btn,
.kivio-tour-popover .driver-popover-navigation-btns .driver-popover-next-btn[disabled] {
  background: linear-gradient(135deg,
    var(--kivio-primary),
    oklch(48% 0.11 289)
  ) !important;
  color: white !important;
  border: none !important;
  border-radius: 0.5rem !important;
  font-weight: 600 !important;
  font-size: 0.82rem !important;
  text-shadow: none !important;
  padding: 0.45rem 1.1rem !important;
  box-shadow: 0 2px 8px oklch(52% 0.12 290 / 0.15) !important;
  transition: all 0.15s ease !important;
  cursor: pointer !important;
}

.kivio-tour-popover .driver-popover-navigation-btns .driver-popover-next-btn:hover {
  box-shadow: 0 4px 14px oklch(52% 0.12 290 / 0.25) !important;
  transform: translateY(-1px) !important;
}

.kivio-tour-popover .driver-popover-navigation-btns .driver-popover-prev-btn {
  background: oklch(94% 0.005 280) !important;
  color: var(--kivio-text-muted) !important;
  border: 1px solid var(--kivio-border) !important;
  border-radius: 0.5rem !important;
  font-weight: 500 !important;
  font-size: 0.82rem !important;
  padding: 0.45rem 1rem !important;
  transition: all 0.15s ease !important;
  cursor: pointer !important;
}

.kivio-tour-popover .driver-popover-navigation-btns .driver-popover-prev-btn:hover {
  background: oklch(90% 0.005 280) !important;
  border-color: oklch(85% 0.01 280) !important;
  color: var(--kivio-text) !important;
}

/* Close button in tour popover */
.kivio-tour-popover .driver-popover-close-btn {
  width: 28px !important;
  height: 28px !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--kivio-text-muted) !important;
  font-size: 18px !important;
  transition: all 0.15s ease !important;
  top: 14px !important;
  right: 12px !important;
}

.kivio-tour-popover .driver-popover-close-btn:hover {
  background: oklch(94% 0.005 280) !important;
  color: var(--kivio-text) !important;
}

/* Arrow styling */
.kivio-tour-popover .driver-popover-arrow {
  border-color: var(--kivio-border) !important;
}

.kivio-tour-popover .driver-popover-arrow-side-left,
.kivio-tour-popover .driver-popover-arrow-side-right,
.kivio-tour-popover .driver-popover-arrow-side-top,
.kivio-tour-popover .driver-popover-arrow-side-bottom {
  border-color: var(--kivio-border) !important;
}

/* === Kalender Overflow-Schutz === */

.entry-card {
  min-width: 0;
  overflow: hidden;
}

.entry-title {
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}

/* Grid-Spalten: verhindere Expansion ueber Spaltenbreite */
.sortable-day {
  min-width: 0;
  overflow: hidden;
}

/* === Planer: Mobile Overflow-Schutz (quick-260503-qj6) === */

/* drawer-end darf im geschlossenen Zustand keine Viewport-Breite addieren.
   Sichert ab, falls daisyUI-Drawer ohne drawer-content-Sibling
   nicht zuverlaessig position:fixed setzt. */
#entry-drawer:not(:checked) ~ .drawer-side {
  pointer-events: none;
}
.drawer.drawer-end {
  overflow: hidden;
}

/* drawer-side Panel-Inhalt: w-full darf nie 100vw ueberschreiten
   (verhindert horizontalen Scroll, auch wenn Padding/Border addiert wird). */
.drawer.drawer-end .drawer-side > div {
  max-width: 100vw;
  box-sizing: border-box;
}

/* Mobile Day-Karten: stelle sicher, dass card-body und alle Flex-Wrapper
   min-width:0 haben, damit lange Eintragstitel/Tagnamen den Container
   nicht sprengen. */
#mobile-calendar .card-body {
  min-width: 0;
  overflow: hidden;
}
#mobile-calendar .card-body > div,
#mobile-calendar .card-body .flex {
  min-width: 0;
}

/* Mobile Eintrag-Zeile: das innere flex-1 min-w-0 ist im Markup gesetzt,
   aber p.entry-title.truncate braucht zusaetzlich max-width:100% damit
   truncate auch in verschachtelten Flexen greift. */
#mobile-calendar .entry-title {
  max-width: 100%;
}

/* Planer-Header-Beschreibung: lange deutsche Komposita (z.B.
   "Wochenplaner") mobil korrekt umbrechen. */
@media (max-width: 640px) {
  .max-w-6xl > div p.text-sm {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}

/* Theme-Input (Wochenthema): input.input-bordered hat browser-default
   min-width, das auf 320px-Viewports ueberlaeuft. flex-1 + min-w-0
   auf dem Input erzwingt Schrumpfen. */
#theme-section .input {
  min-width: 0;
}

/* Coach-Hero (Landing) — quick 260428-m1y */
.coach-hero {
  background: linear-gradient(180deg, hsl(var(--p) / 0.06) 0%, hsl(var(--b1) / 1) 100%);
  position: relative;
  overflow: hidden;
}
.coach-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 20% 30%, hsl(var(--p) / 0.12) 0%, transparent 50%),
                    radial-gradient(circle at 80% 70%, hsl(var(--s) / 0.08) 0%, transparent 50%);
  pointer-events: none;
}
.coach-hero > * { position: relative; z-index: 1; }

/* Coach-Hero Avatar */
.coach-hero-avatar {
  position: relative;
  width: clamp(220px, 38vw, 420px);
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.coach-hero-avatar::before {
  content: "";
  position: absolute;
  inset: -8%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%,
                              hsl(var(--p) / 0.45) 0%,
                              hsl(var(--p) / 0.18) 35%,
                              transparent 65%);
  filter: blur(28px);
  z-index: 0;
  animation: coach-halo-pulse 6s ease-in-out infinite;
}
.coach-hero-avatar::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 140deg,
                             hsl(var(--p) / 0.55) 0%,
                             hsl(var(--s) / 0.35) 30%,
                             transparent 55%,
                             hsl(var(--p) / 0.45) 100%);
  padding: 2px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  z-index: 2;
  pointer-events: none;
}
.coach-hero-avatar-img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 24px 60px -20px hsl(var(--p) / 0.35),
              0 8px 24px -12px hsl(var(--bc) / 0.18);
}
@keyframes coach-halo-pulse {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50%      { opacity: 1.00; transform: scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  .coach-hero-avatar::before { animation: none; }
}

/* Coach-Nav-Highlight (Sidebar) — quick 260428-m1y
   Permanente visuelle Hervorhebung, da Coach das neue Premium-Feature ist. */
.nav-item.coach-nav-highlight {
  position: relative;
  border: 1px solid hsl(var(--p) / 0.45);
  background: linear-gradient(135deg, hsl(var(--p) / 0.10) 0%, hsl(var(--p) / 0.04) 100%);
  border-radius: 0.5rem;
  color: hsl(var(--p)) !important;
  box-shadow: 0 0 0 0 hsl(var(--p) / 0);
  transition: box-shadow 220ms ease, background 220ms ease, border-color 220ms ease;
}
.nav-item.coach-nav-highlight:hover {
  border-color: hsl(var(--p) / 0.75);
  background: linear-gradient(135deg, hsl(var(--p) / 0.16) 0%, hsl(var(--p) / 0.07) 100%);
  box-shadow: 0 0 0 3px hsl(var(--p) / 0.18);
}
.nav-item.coach-nav-highlight.active {
  border-color: hsl(var(--p));
  background: linear-gradient(135deg, hsl(var(--p) / 0.22) 0%, hsl(var(--p) / 0.10) 100%);
  box-shadow: 0 0 0 3px hsl(var(--p) / 0.22);
}
.coach-nav-badge {
  margin-left: auto;
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.125rem 0.4rem;
  border-radius: 9999px;
  background: hsl(var(--p));
  color: hsl(var(--pc));
  line-height: 1;
}

/* Equal-width Tabs (Statistiken) — quick 260428-m1y
   Zwingt .tab-Anchors auf 100% ihrer Grid-Cell, damit beide Tabs
   identisch breit sind, unabhaengig von Inhalt/Badge-Laenge. */
.tabs-equal .tab {
  width: 100%;
  min-width: 0;
}