/* ============================================================
   FlowKater — Design-Tokens & Basis-Reset
   ============================================================ */

:root {
  /* Primärfarben — Ultramarinblau */
  --color-primary:        #1B4FCC;
  --color-primary-light:  #4B7BF5;
  --color-primary-dark:   #0F2E8A;
  --color-primary-hover:  #2459DE;

  /* Hintergründe */
  --color-bg:             #0F1B2D;
  --color-surface:        #1A2744;
  --color-surface-raised: #213259;
  --color-surface-hover:  #263A6A;
  --color-border:         #2D3F6B;
  --color-border-light:   #3D5080;

  /* Text */
  --color-text:           #E8EDF5;
  --color-text-muted:     #8A9BBC;
  --color-text-dim:       #5C6E96;

  /* Status-Farben */
  --color-success:        #22C55E;
  --color-warning:        #F59E0B;
  --color-danger:         #EF4444;
  --color-info:           #38BDF8;

  /* Typografie */
  --font-main:   'DM Sans', 'Segoe UI', system-ui, sans-serif;
  --font-mono:   'JetBrains Mono', 'Fira Code', monospace;
  --text-xs:     0.75rem;
  --text-sm:     0.875rem;
  --text-base:   1rem;
  --text-lg:     1.125rem;
  --text-xl:     1.25rem;
  --text-2xl:    1.5rem;
  --text-3xl:    1.875rem;

  /* Abstände */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;

  /* Radien */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-full: 9999px;

  /* Schatten */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.4);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.5);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.6);
  --shadow-xl:  0 16px 48px rgba(0,0,0,0.7);

  /* Übergänge */
  --transition-fast:   0.12s ease;
  --transition-normal: 0.22s ease;
  --transition-slow:   0.4s ease;

  /* Layout */
  --sidebar-width:       240px;
  --sidebar-rail-width:  64px;
  --detail-panel-width:  380px;
  --tab-bar-height:      60px;
  --topbar-height:       56px;
  --fab-size:            56px;
}

/* ============================================================
   Reset
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-main);
  background-color: var(--color-bg);
  color: var(--color-text);
  min-height: 100dvh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font: inherit; color: inherit; }
input, textarea, select { font: inherit; color: inherit; background: transparent; border: none; outline: none; }
ul, ol { list-style: none; }
img, svg { display: block; max-width: 100%; }

/* Scrollbar-Styling */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--color-border-light); }

/* ============================================================
   Hilfklassen
   ============================================================ */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.hidden { display: none !important; }
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.text-muted { color: var(--color-text-muted); }
.text-sm { font-size: var(--text-sm); }
.text-xs { font-size: var(--text-xs); }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }

/* ============================================================
   Formulare & Eingaben
   ============================================================ */
.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.form-label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-muted);
}

.form-input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-size: var(--text-base);
  transition: border-color var(--transition-fast);
}

.form-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(27, 79, 204, 0.25);
}

.form-input::placeholder { color: var(--color-text-dim); }

textarea.form-input {
  resize: vertical;
  min-height: 80px;
  line-height: 1.5;
}

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 600;
  transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
  white-space: nowrap;
  user-select: none;
}

.btn:active { transform: scale(0.97); }

.btn-primary {
  background: var(--color-primary);
  color: #fff;
}
.btn-primary:hover { background: var(--color-primary-hover); box-shadow: var(--shadow-md); }

.btn-ghost {
  background: transparent;
  color: var(--color-text-muted);
}
.btn-ghost:hover { background: var(--color-surface-hover); color: var(--color-text); }

.btn-danger {
  background: var(--color-danger);
  color: #fff;
}
.btn-danger:hover { opacity: 0.88; }

.btn-sm {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
}

.btn-icon {
  padding: var(--space-2);
  border-radius: var(--radius-md);
  width: 36px;
  height: 36px;
}

/* ============================================================
   Badges & Chips
   ============================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}

.badge-shared {
  background: rgba(75, 123, 245, 0.18);
  color: var(--color-primary-light);
  border: 1px solid rgba(75, 123, 245, 0.35);
}

.badge-private {
  background: rgba(27, 79, 204, 0.18);
  color: var(--color-primary-light);
  border: 1px solid rgba(27, 79, 204, 0.35);
}

.badge-today {
  background: rgba(245, 158, 11, 0.15);
  color: var(--color-warning);
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.badge-overdue {
  background: rgba(239, 68, 68, 0.15);
  color: var(--color-danger);
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.tag-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 500;
  color: #fff;
}

/* ============================================================
   Toast-Benachrichtigungen
   ============================================================ */
#toast-container {
  position: fixed;
  bottom: calc(var(--tab-bar-height) + var(--space-4));
  right: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  z-index: 9999;
  pointer-events: none;
}

@media (min-width: 768px) {
  #toast-container { bottom: var(--space-4); }
}

.toast {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
  font-size: var(--text-sm);
  font-weight: 500;
  max-width: 320px;
  animation: toast-in var(--transition-normal) ease forwards;
  pointer-events: all;
}

.toast.success { border-left: 3px solid var(--color-success); }
.toast.error   { border-left: 3px solid var(--color-danger); }
.toast.info    { border-left: 3px solid var(--color-info); }

@keyframes toast-in {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ============================================================
   Modal / Dialog
   ============================================================ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 800;
  padding: var(--space-4);
  animation: fade-in var(--transition-fast) ease;
}

.modal {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  width: 100%;
  max-width: 480px;
  box-shadow: var(--shadow-xl);
  animation: modal-in var(--transition-normal) ease;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-5);
}

.modal-title { font-size: var(--text-xl); font-weight: 600; }

.modal-body { display: flex; flex-direction: column; gap: var(--space-4); }

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes modal-in {
  from { opacity: 0; transform: scale(0.95) translateY(-10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

/* ============================================================
   Markdown-gerenderte Notizen
   ============================================================ */
.markdown-body h1, .markdown-body h2, .markdown-body h3 {
  font-weight: 600;
  margin: var(--space-4) 0 var(--space-2);
}
.markdown-body p { margin: var(--space-2) 0; line-height: 1.6; }
.markdown-body ul, .markdown-body ol { padding-left: var(--space-5); margin: var(--space-2) 0; }
.markdown-body li { margin: var(--space-1) 0; }
.markdown-body code { font-family: var(--font-mono); font-size: 0.875em; background: var(--color-surface-raised); padding: 1px 4px; border-radius: var(--radius-sm); }
.markdown-body pre { background: var(--color-surface-raised); padding: var(--space-4); border-radius: var(--radius-md); overflow-x: auto; }
.markdown-body blockquote { border-left: 3px solid var(--color-primary); padding-left: var(--space-4); color: var(--color-text-muted); margin: var(--space-2) 0; }

/* ============================================================
   Leer-Zustand
   ============================================================ */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-12) var(--space-6);
  text-align: center;
  gap: var(--space-4);
}

.empty-state img {
  width: 120px;
  height: auto;
  opacity: 0.85;
}

.empty-state h3 {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text);
}

.empty-state p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  max-width: 280px;
}

/* ============================================================
   Kater-Sprung-Animation
   ============================================================ */
@keyframes kater-jump {
  0%   { transform: translateY(0) rotate(0deg); }
  25%  { transform: translateY(-18px) rotate(-5deg); }
  50%  { transform: translateY(-24px) rotate(5deg); }
  75%  { transform: translateY(-10px) rotate(-2deg); }
  100% { transform: translateY(0) rotate(0deg); }
}

.kater-jump {
  animation: kater-jump 0.55s cubic-bezier(0.36, 0.07, 0.19, 0.97) forwards;
}

/* Ripple-Effekt */
.ripple {
  position: relative;
  overflow: hidden;
}

.ripple::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  transform: scale(0);
  animation: ripple-wave 0.5s linear;
  pointer-events: none;
}

@keyframes ripple-wave {
  to { transform: scale(4); opacity: 0; }
}