/* ── Basis ──────────────────────────────────────────────────────────────── */
* { -webkit-tap-highlight-color: transparent; box-sizing: border-box; }

input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; }

/* ── Karten & Formular-Utilities ────────────────────────────────────────── */
.card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 1rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.input {
  display: block; width: 100%;
  padding: 0.625rem 1rem;
  border: 1px solid #d1d5db;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  color: #111827;
  background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
  outline: none;
}
.input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.15);
}
.label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.375rem;
}
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.625rem 1.25rem;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  text-decoration: none;
  min-height: 44px;
}
.btn:active { transform: scale(0.98); }
.btn-primary  { background: #2563eb; color: #fff; }
.btn-primary:hover  { background: #1d4ed8; }
.btn-secondary { background: #f1f5f9; color: #374151; }
.btn-secondary:hover { background: #e2e8f0; }
.btn-danger  { background: #fee2e2; color: #991b1b; }
.btn-danger:hover  { background: #fecaca; }

/* ── Bottom Nav ─────────────────────────────────────────────────────────── */
.bottom-nav-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.2rem;
  font-size: 0.65rem; font-weight: 500;
  color: #9ca3af;
  transition: color 0.15s;
  padding: 0.5rem 0.25rem;
  min-width: 0;
}
.bottom-nav-item span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.bottom-nav-item.active { color: #2563eb; }
.bottom-nav-item.active svg { stroke: #2563eb; }
.safe-bottom { padding-bottom: env(safe-area-inset-bottom, 0px); }

/* ── Status-Badges ──────────────────────────────────────────────────────── */
.badge { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 9999px; font-size: 0.75rem; font-weight: 600; white-space: nowrap; }
.badge-green  { background: #dcfce7; color: #166534; }
.badge-red    { background: #fee2e2; color: #991b1b; }
.badge-blue   { background: #dbeafe; color: #1e40af; }
.badge-yellow { background: #fef9c3; color: #854d0e; }
.badge-gray   { background: #f1f5f9; color: #475569; }
.badge-purple { background: #f3e8ff; color: #6b21a8; }
.badge-orange { background: #ffedd5; color: #9a3412; }

/* ── Karten-Hover ───────────────────────────────────────────────────────── */
.stat-card { transition: transform 0.15s ease, box-shadow 0.15s ease; }
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,0.10); }

/* ── Übergänge ──────────────────────────────────────────────────────────── */
html, body, nav, main, .card { transition: background-color 0.2s ease, border-color 0.2s ease, color 0.1s ease; }

/* ── Dark Mode ─────────────────────────────────────────────────────────── */
html.dark body                { background-color: #0f172a; color: #e2e8f0; }
html.dark .card               { background-color: #1e293b; border-color: #334155; }
html.dark .input              { background-color: #1e293b; color: #e2e8f0; border-color: #475569; }
html.dark .input:focus        { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,0.2); }
html.dark .input::placeholder { color: #64748b; }
html.dark select              { background-color: #1e293b; color: #e2e8f0; border-color: #475569; }
html.dark textarea            { background-color: #1e293b; color: #e2e8f0; border-color: #475569; }
html.dark .bg-white           { background-color: #1e293b !important; }
html.dark .bg-gray-50         { background-color: #0f172a !important; }
html.dark .bg-gray-100        { background-color: #1e293b !important; }
html.dark .bg-gray-200        { background-color: #334155 !important; }
html.dark .border-gray-100,
html.dark .border-gray-200    { border-color: #334155 !important; }
html.dark .text-gray-900      { color: #f1f5f9 !important; }
html.dark .text-gray-800      { color: #e2e8f0 !important; }
html.dark .text-gray-700      { color: #cbd5e1 !important; }
html.dark .text-gray-600      { color: #94a3b8 !important; }
html.dark .text-gray-500      { color: #64748b !important; }
html.dark .text-gray-400      { color: #475569 !important; }
html.dark .shadow-sm          { box-shadow: 0 1px 3px rgba(0,0,0,0.4) !important; }
html.dark .hover\:bg-gray-50:hover  { background-color: #1e293b !important; }
html.dark .hover\:bg-gray-100:hover { background-color: #334155 !important; }
html.dark nav.bg-white        { background-color: #1e293b !important; border-color: #334155 !important; }
html.dark .bottom-nav-item    { background-color: #1e293b; }
html.dark thead.bg-gray-50    { background-color: #1a2740 !important; }
html.dark .bg-blue-50         { background-color: #1e3a5f !important; }
html.dark .bg-green-50        { background-color: #052e16 !important; }
html.dark .bg-green-100       { background-color: #14532d !important; }
html.dark .bg-red-50          { background-color: #3f0f0f !important; }
html.dark .bg-red-100         { background-color: #7f1d1d !important; }
html.dark .bg-yellow-50       { background-color: #1c1a03 !important; }
html.dark .bg-yellow-100      { background-color: #713f12 !important; }
html.dark .bg-purple-100      { background-color: #3b0764 !important; }
html.dark .text-green-700, html.dark .text-green-800 { color: #86efac !important; }
html.dark .text-red-700, html.dark .text-red-600     { color: #fca5a5 !important; }
html.dark .text-blue-700, html.dark .text-blue-600   { color: #93c5fd !important; }
html.dark .text-yellow-700, html.dark .text-yellow-600 { color: #fde68a !important; }
html.dark .text-purple-700, html.dark .text-purple-800 { color: #d8b4fe !important; }
html.dark .divide-gray-100 > * + * { border-color: #334155 !important; }
html.dark .divide-gray-200 > * + * { border-color: #334155 !important; }
html.dark .badge-green  { background: #14532d; color: #86efac; }
html.dark .badge-red    { background: #7f1d1d; color: #fca5a5; }
html.dark .badge-blue   { background: #1e3a5f; color: #93c5fd; }
html.dark .badge-yellow { background: #713f12; color: #fde68a; }
html.dark .badge-gray   { background: #1e293b; color: #94a3b8; }
html.dark .badge-purple { background: #3b0764; color: #d8b4fe; }
html.dark .badge-orange { background: #431407; color: #fdba74; }
html.dark .btn-secondary { background: #334155; color: #e2e8f0; }
html.dark .btn-secondary:hover { background: #475569; }