/*
 * 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; }
/* Textfelder: nie eine waagerechte Scroll-Leiste (Chrome zeigt sonst bei gestylten Scrollbars eine leere Leiste) */
textarea { overflow-x: hidden; }

/* ─── 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; }

/* ─── Text Readability (Light Mode) ─── */
/* Slate-400 ist im Light-Mode zu hell — auf Slate-500 Wert anheben */
html:not(.dark) .text-slate-400 {
    color: rgb(100 116 139) !important; /* slate-500 */
}
/* Slate-500 etwas dunkler für bessere Lesbarkeit */
html:not(.dark) .text-slate-500 {
    color: rgb(71 85 105) !important; /* slate-600 */
}
/* Placeholder-Texte bleiben etwas heller */
html:not(.dark) .placeholder-slate-400::placeholder {
    color: rgb(148 163 184) !important; /* original slate-400 */
}
html:not(.dark) .placeholder-slate-500::placeholder {
    color: rgb(100 116 139) !important; /* original slate-500 */
}
/* Tabellen-Header bleiben dezent */
html:not(.dark) th .text-slate-400,
html:not(.dark) th.text-slate-400 {
    color: rgb(100 116 139) !important; /* slate-500 */
}

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

/* ─── Form: Select-Höhe = Input-Höhe ─── */
select { height: 38px; }

/* ─── 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); }

/* ─── Contenteditable Editor ─── */
[contenteditable]:empty:before {
    content: attr(data-placeholder);
    color: #94a3b8;
    pointer-events: none;
}
.dark [contenteditable]:empty:before {
    color: #64748b;
}
[contenteditable]:focus {
    outline: none;
}

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

/* ─── Flatpickr: größer, ruhiger, Dark-Mode ─── */
.flatpickr-calendar { width: 360px !important; font-size: 15px; border-radius: 14px; box-shadow: 0 12px 40px rgba(15, 23, 42, 0.18); border: 1px solid #e2e8f0; padding: 6px 0 8px; }
.flatpickr-calendar .flatpickr-months { padding: 6px 4px 2px; }
.flatpickr-calendar .flatpickr-current-month { font-size: 17px; font-weight: 600; padding-top: 2px; }
.flatpickr-calendar .flatpickr-current-month .numInputWrapper { width: 5.5ch; }
.flatpickr-calendar .flatpickr-months .flatpickr-prev-month, .flatpickr-calendar .flatpickr-months .flatpickr-next-month { padding: 8px 10px; }
.flatpickr-calendar .flatpickr-months svg { width: 16px; height: 16px; }
.flatpickr-calendar .flatpickr-weekdays, .flatpickr-calendar .flatpickr-days, .flatpickr-calendar .dayContainer { width: 100% !important; min-width: 100% !important; max-width: 100% !important; }
.flatpickr-calendar .flatpickr-innerContainer { padding: 0 8px; }
.flatpickr-calendar span.flatpickr-weekday { font-size: 12px; font-weight: 600; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.04em; }
.flatpickr-calendar .flatpickr-day { height: 44px; line-height: 44px; max-width: 44px; flex-basis: 14.28%; border-radius: 10px; font-size: 15px; color: #1e293b; }
.flatpickr-calendar .flatpickr-day:hover { background: #f1f5f9; border-color: #f1f5f9; }
.flatpickr-calendar .flatpickr-day.today { border-color: #528BB8; color: #528BB8; font-weight: 600; }
.flatpickr-calendar .flatpickr-day.selected, .flatpickr-calendar .flatpickr-day.selected:hover { background: #528BB8; border-color: #528BB8; color: #fff; font-weight: 600; }
.flatpickr-calendar .flatpickr-day.prevMonthDay, .flatpickr-calendar .flatpickr-day.nextMonthDay { color: #cbd5e1; }
.dark .flatpickr-calendar { background: #0f172a; border-color: #334155; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5); }
.dark .flatpickr-calendar .flatpickr-months, .dark .flatpickr-calendar .flatpickr-month, .dark .flatpickr-calendar .flatpickr-current-month input, .dark .flatpickr-calendar .flatpickr-weekdays { background: #0f172a; color: #e2e8f0; fill: #e2e8f0; }
.dark .flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months { background: #0f172a; color: #e2e8f0; }
.dark .flatpickr-calendar .flatpickr-months .flatpickr-prev-month svg, .dark .flatpickr-calendar .flatpickr-months .flatpickr-next-month svg { fill: #94a3b8; }
.dark .flatpickr-calendar .flatpickr-day { color: #e2e8f0; }
.dark .flatpickr-calendar .flatpickr-day:hover { background: #1e293b; border-color: #1e293b; }
.dark .flatpickr-calendar .flatpickr-day.prevMonthDay, .dark .flatpickr-calendar .flatpickr-day.nextMonthDay { color: #475569; }
.dark .flatpickr-calendar.arrowTop:before, .dark .flatpickr-calendar.arrowTop:after { border-bottom-color: #0f172a; }
.dark .flatpickr-calendar.arrowBottom:before, .dark .flatpickr-calendar.arrowBottom:after { border-top-color: #0f172a; }