@import url('https://fonts.bunny.net/css?family=sofia-sans:400,500,600,700,800&display=swap');

:root {
  --color-primary: #0AB0A4;
  --color-primary-dark: #08847B;
  --color-secondary: #47C4BB;
  --color-accent: #4EBDF5;
  --color-background: #F6FBFA;
  --color-foreground: #1B2130;
  --color-muted: #E3F7F5;
  --color-border: #E2ECEA;
  --color-destructive: #DC2626;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-md: 0 4px 12px -2px rgba(15, 23, 42, 0.06), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 12px 32px -8px rgba(8, 132, 123, 0.14), 0 4px 8px -4px rgba(15, 23, 42, 0.06);
  --radius-card: 20px;
}

* { font-family: 'Sofia Sans', sans-serif; }
h1, h2, h3, h4, .font-heading { font-family: 'Sofia Sans', sans-serif; font-weight: 800; letter-spacing: -0.015em; }

body {
  background: radial-gradient(1200px 600px at 100% -10%, #EAFAF8 0%, transparent 60%), var(--color-background);
  color: #1E293B;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Layout-Shell (Sidebar + main) auf allen Seiten: main darf nie breiter werden als der verfügbare
   Platz (sonst schiebt breiter Inhalt wie Tabellen/Kalender die ganze Seite horizontal weg). */
main.flex-1 { min-width: 0; }
@media (max-width: 767px) {
  main.flex-1 { padding: 1.25rem; }
}

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

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 4px; }

.focus-ring:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: 4px; }

.mic-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 999px; border: 1px solid var(--color-border); color: var(--color-primary); background: #fff; flex-shrink: 0; }
.mic-btn:hover:not(:disabled) { background: var(--color-muted); }
.mic-btn.recording { background: var(--color-destructive); border-color: var(--color-destructive); color: #fff; animation: mic-pulse 1.4s ease-in-out infinite; }
@keyframes mic-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); } 50% { box-shadow: 0 0 0 6px rgba(220, 38, 38, 0); } }

.card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 200ms ease, transform 200ms ease;
}

/* Pill-Form (border-radius: 999px) ist die Signatur des physio-time.ch-Markendesigns
   (siehe Canva-Referenzentwurf) — !important, weil praktisch jeder .btn-primary im Markup
   zusätzlich eine Tailwind-Utility wie rounded-lg trägt, die sonst je nach Ladereihenfolge
   von Tailwind-CDN vs. dieser Datei gewinnen könnte. Bewusste, einmalige Design-Entscheidung. */
.btn-primary {
  background: var(--color-primary);
  color: #fff;
  border-radius: 999px !important;
  box-shadow: 0 1px 2px rgba(8, 132, 123, 0.18), 0 6px 14px -6px rgba(8, 132, 123, 0.45);
  transition: background 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}
.btn-primary:hover { background: var(--color-primary-dark); transform: translateY(-1px); box-shadow: 0 2px 4px rgba(8, 132, 123, 0.2), 0 10px 20px -8px rgba(8, 132, 123, 0.5); }
.btn-primary:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(8, 132, 123, 0.18); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }

.input-field { border: 1px solid var(--color-border); border-radius: 12px; padding: 0.55rem 0.8rem; width: 100%; background: #fff; transition: border-color 150ms ease, box-shadow 150ms ease; }
.input-field:hover { border-color: #C8DEDB; }
.input-field:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(10, 176, 164, 0.14); }

.badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 11px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.badge-geplant, .badge-offen { background: #FEF3C7; color: #92400E; }
.badge-abgeschlossen, .badge-bezahlt { background: #D1FAE5; color: #065F46; }
.badge-abgesagt, .badge-storniert { background: #FEE2E2; color: #991B1B; }
.badge-no_show { background: #E2E8F0; color: #475569; }

.nav-link { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 10px; color: #C7F3EF; font-weight: 500; transition: background 150ms ease, transform 150ms ease, color 150ms ease; }
.nav-link:hover { background: rgba(255,255,255,0.08); transform: translateX(2px); }
.nav-link.active { background: rgba(255,255,255,0.16); color: #fff; box-shadow: inset 3px 0 0 0 var(--color-secondary); }

.sidebar { background: linear-gradient(165deg, #066A62 0%, #054841 55%, #032C29 100%); box-shadow: 1px 0 0 rgba(255,255,255,0.04), 4px 0 24px -8px rgba(0,0,0,0.25); }