/*
 * Event-Management System — Design Tokens & Utility Styles
 *
 * Intent: Clean, professional hotel/event management tool
 * Feel: Trustworthy, modern, cool — like a well-organized business
 * Color world: Cool blue-gray (slate), natural greens for brand
 * Depth: Borders-only — clean, professional
 * Typography: Inter — readable, modern
 * Spacing: 4px base (4/8/12/16/24/32/48/64)
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ─── Base ─── */
*, *::before, *::after { font-family: 'Inter', system-ui, -apple-system, sans-serif; }
[x-cloak] { display: none !important; }

/* ─── Scrollbar ─── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
.dark ::-webkit-scrollbar-thumb { background: #334155; }

/* ─── Status Badges ─── */
.badge { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 9999px; font-size: 12px; font-weight: 500; line-height: 1.5; }
.badge-anfrage { background: #f1f5f9; color: #475569; }
.badge-bearbeitung { background: #dbeafe; color: #1d4ed8; }
.badge-erstellt { background: #fef3c7; color: #b45309; }
.badge-gesendet { background: #ffedd5; color: #c2410c; }
.badge-bestaetigt { background: #dcfce7; color: #15803d; }
.badge-durchgefuehrt { background: #f3e8ff; color: #7c3aed; }
.badge-storniert { background: #fee2e2; color: #dc2626; }
.dark .badge-anfrage { background: rgba(241,245,249,0.06); color: #94a3b8; }
.dark .badge-bearbeitung { background: rgba(59,130,246,0.1); color: #93c5fd; }
.dark .badge-erstellt { background: rgba(245,158,11,0.1); color: #fcd34d; }
.dark .badge-gesendet { background: rgba(249,115,22,0.1); color: #fdba74; }
.dark .badge-bestaetigt { background: rgba(34,197,94,0.1); color: #86efac; }
.dark .badge-durchgefuehrt { background: rgba(139,92,246,0.1); color: #c4b5fd; }
.dark .badge-storniert { background: rgba(239,68,68,0.1); color: #fca5a5; }

/* ─── Animations ─── */
@keyframes fadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.animate-fade-in { animation: fadeIn 0.2s ease-out; }

/* ─── Focus ─── */
:focus-visible { outline: 2px solid #22c55e; outline-offset: 2px; }
.dark :focus-visible { outline-color: #4ade80; }

/* ─── Selection ─── */
::selection { background: rgba(34, 197, 94, 0.15); }

/* ─── Print ─── */
@media print {
    .no-print { display: none !important; }
    body { background: white !important; color: black !important; }
}