From 60a1395bd65cc2863427e1924806d6715e1d0862 Mon Sep 17 00:00:00 2001 From: Till Tomczak Date: Thu, 29 May 2025 12:01:27 +0200 Subject: [PATCH] "Refactor database shm and wal files, improve CSS structure --- backend/app/database/myp.db-shm | Bin 32768 -> 32768 bytes backend/app/database/myp.db-wal | Bin 8272 -> 12392 bytes backend/app/static/css/input.css | 2396 +---- backend/app/static/css/tailwind.min.css | 10966 +++++++++++++++++++++- 4 files changed, 10974 insertions(+), 2388 deletions(-) diff --git a/backend/app/database/myp.db-shm b/backend/app/database/myp.db-shm index c7f467529a8cef6a1d10570dc47b56fe60deb120..ea231957a108fa83177c9f58f0a5bcd51ac40a6f 100644 GIT binary patch delta 168 zcmZo@U}|V!s+V}A%K!q55G=q9qy>Rk@tpmHGSifb+;>LXQVZwBtU0cC^~MR4K2p^K ojRFIZx&M&>R9J|C3CiLF(jYd|#)-MEjLaJ+K2_fQBvVEV00Z?f4*&oF delta 161 zcmZo@U}|V!s+V}A%K!q55G=q1qy>RE;aGm~0`--9bKe9_i3?aZPI#fb`AMdX7yx6;GDH9X diff --git a/backend/app/database/myp.db-wal b/backend/app/database/myp.db-wal index bd6b47a7e6875ebc6528e35803501cebef0f6a22..474ba2c166ecb553d63dbb18006e41f6ee8b8974 100644 GIT binary patch delta 95 zcmccM@FHPDfPw@A0|OHf3+BEv+Ll^4FJ^-MImL<;)3VJ00 div { - transform: scale(0.95); - transition: transform 0.1s ease-out; -} - -/* User Menu Button - Neues Design */ -.user-menu-button-new { - @apply flex items-center space-x-2 rounded-lg p-1.5 transition-all duration-300; - background: rgba(241, 245, 249, 0.6); - border: 1px solid rgba(255, 255, 255, 0.6); - box-shadow: - 0 2px 10px rgba(0, 0, 0, 0.04), - 0 1px 2px rgba(0, 0, 0, 0.02); -} - -.user-menu-button-new:hover { - @apply transform -translate-y-0.5; - background: rgba(241, 245, 249, 0.8); - box-shadow: - 0 10px 20px rgba(0, 0, 0, 0.06), - 0 2px 6px rgba(0, 0, 0, 0.04); -} - -.dark .user-menu-button-new { - background: rgba(30, 41, 59, 0.6); - border: 1px solid rgba(255, 255, 255, 0.08); - box-shadow: - 0 2px 10px rgba(0, 0, 0, 0.15), - 0 1px 2px rgba(0, 0, 0, 0.1); -} - -.dark .user-menu-button-new:hover { - background: rgba(30, 41, 59, 0.8); - box-shadow: - 0 10px 20px rgba(0, 0, 0, 0.15), - 0 2px 6px rgba(0, 0, 0, 0.1); -} - -/* User Avatar - Neues Design */ -.user-avatar-new { - @apply h-8 w-8 rounded-full flex items-center justify-center text-white font-semibold text-sm shadow-md transition-all duration-300; - background: linear-gradient(135deg, #000000, #333333); - box-shadow: - 0 2px 6px rgba(0, 0, 0, 0.2), - 0 1px 3px rgba(0, 0, 0, 0.1); -} - -.dark .user-avatar-new { - background: linear-gradient(135deg, #f8fafc, #e2e8f0); - color: #0f172a; - box-shadow: - 0 2px 6px rgba(0, 0, 0, 0.3), - 0 1px 3px rgba(0, 0, 0, 0.2); -} - -/* Login Button - Neues Design */ -.login-button-new { - @apply flex items-center px-4 py-2 rounded-lg text-sm font-medium shadow-sm transition-all duration-300; - background: #000000; - color: #ffffff; - border: 1px solid rgba(255, 255, 255, 0.1); - box-shadow: - 0 2px 10px rgba(0, 0, 0, 0.1), - 0 1px 2px rgba(0, 0, 0, 0.08); -} - -.login-button-new:hover { - @apply transform -translate-y-0.5; - background: #333333; - box-shadow: - 0 10px 20px rgba(0, 0, 0, 0.15), - 0 3px 6px rgba(0, 0, 0, 0.1); -} - -.dark .login-button-new { - background: #ffffff; - color: #000000; - border: 1px solid rgba(0, 0, 0, 0.1); - box-shadow: - 0 2px 10px rgba(0, 0, 0, 0.2), - 0 1px 2px rgba(0, 0, 0, 0.15); -} - -.dark .login-button-new:hover { - background: #f1f5f9; - box-shadow: - 0 10px 20px rgba(0, 0, 0, 0.25), - 0 3px 6px rgba(0, 0, 0, 0.2); -} - -/* Mobile Menu - Neues Design */ -.mobile-menu-new { - @apply w-full overflow-hidden transition-all duration-300 z-40; - background: rgba(255, 255, 255, 0.8); - backdrop-filter: blur(24px); - -webkit-backdrop-filter: blur(24px); - box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06); - border-bottom: 1px solid rgba(241, 245, 249, 0.8); - max-height: 0; - opacity: 0; -} - -.mobile-menu-new.open { - max-height: 500px; - opacity: 1; - border-bottom: 1px solid rgba(241, 245, 249, 0.8); -} - -.dark .mobile-menu-new { - background: rgba(15, 23, 42, 0.8); - box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); - border-bottom: 1px solid rgba(30, 41, 59, 0.8); -} - -.mobile-nav-item { - @apply flex items-center space-x-3 px-4 py-3 rounded-lg text-slate-800 dark:text-slate-200 transition-all duration-300; -} - -.mobile-nav-item:hover { - background: rgba(241, 245, 249, 0.8); -} - -.dark .mobile-nav-item:hover { - background: rgba(30, 41, 59, 0.6); -} - -.mobile-nav-item.active { - background: rgba(241, 245, 249, 0.9); - color: #000000; - font-weight: 500; -} - -.dark .mobile-nav-item.active { - background: rgba(30, 41, 59, 0.8); - color: #ffffff; -} - -/* Dashboard Stat Cards mit schwarzem Hintergrund im Dark Mode */ -.mb-stat-card { - background: linear-gradient(135deg, rgba(240, 249, 255, 0.6) 0%, rgba(230, 242, 255, 0.6) 100%); - color: #0f172a; - position: relative; - overflow: hidden; - border: none; - border-radius: var(--card-radius); - backdrop-filter: blur(20px) saturate(180%) brightness(110%); - -webkit-backdrop-filter: blur(20px) saturate(180%) brightness(110%); - box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.1); - padding: 1.5rem; - margin: 1rem; - transition: transform 0.3s ease, box-shadow 0.3s ease; -} - -.dark .mb-stat-card { - background: linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, rgba(10, 10, 10, 0.7) 100%); - color: var(--text-primary, #f8fafc); - box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.05); -} - -/* Stats und Jobs Page Card Styles */ -.stats-card, .job-card { - @apply bg-white/60 dark:bg-black/80 backdrop-blur-2xl border border-gray-200/70 dark:border-slate-700/20 rounded-xl shadow-2xl transition-all duration-300; - backdrop-filter: blur(24px) saturate(200%) brightness(120%); - -webkit-backdrop-filter: blur(24px) saturate(200%) brightness(120%); - box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.1); - border-radius: var(--card-radius); -} - -/* Footer Styling - Verstärktes Glassmorphism */ -footer { - @apply transition-all duration-300; - background: rgba(255, 255, 255, 0.1); - backdrop-filter: blur(30px) saturate(180%) brightness(120%); - -webkit-backdrop-filter: blur(30px) saturate(180%) brightness(120%); - border-top: 1px solid rgba(255, 255, 255, 0.2); - box-shadow: - 0 -8px 32px rgba(0, 0, 0, 0.1), - 0 -2px 8px rgba(0, 0, 0, 0.05), - inset 0 1px 0 rgba(255, 255, 255, 0.2), - 0 0 0 1px rgba(255, 255, 255, 0.05); -} - -.dark footer { - background: rgba(0, 0, 0, 0.3); - backdrop-filter: blur(30px) saturate(160%) brightness(110%); - -webkit-backdrop-filter: blur(30px) saturate(160%) brightness(110%); - border-top: 1px solid rgba(255, 255, 255, 0.1); - box-shadow: - 0 -8px 32px rgba(0, 0, 0, 0.3), - 0 -2px 8px rgba(0, 0, 0, 0.2), - inset 0 1px 0 rgba(255, 255, 255, 0.1), - 0 0 0 1px rgba(255, 255, 255, 0.03); -} - -/* Dropdown Pfeil Animation */ -.dropdown-arrow { - @apply transition-transform duration-300; -} - -/* Mercedes-Benz Hintergrund mit Star-Pattern */ -.mercedes-star-bg { - position: relative; -} - -.mercedes-star-bg::after { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' width='80' height='80' opacity='0.05' fill='currentColor'%3E%3Cpath d='M58.6,4.5C53,1.6,46.7,0,40,0c-6.7,0-13,1.6-18.6,4.5v0C8.7,11.2,0,24.6,0,40c0,15.4,8.7,28.8,21.5,35.5C27,78.3,33.3,80,40,80c6.7,0,12.9-1.7,18.5-4.6C71.3,68.8,80,55.4,80,40C80,24.6,71.3,11.2,58.6,4.5z M4,40c0-13.1,7-24.5,17.5-30.9v0C26.6,6,32.5,4.2,39,4l-4.5,32.7L21.5,46.8v0L8.3,57.1C5.6,52,4,46.2,4,40z M58.6,70.8C53.1,74.1,46.8,76,40,76c-6.8,0-13.2-1.9-18.6-5.2c-4.9-2.9-8.9-6.9-11.9-11.7l11.9-4.9v0L40,46.6l18.6,7.5v0l12,4.9C67.6,63.9,63.4,67.9,58.6,70.8z M58.6,46.8L58.6,46.8l-12.9-10L41.1,4c6.3,0.2,12.3,2,17.4,5.1v0C69,15.4,76,26.9,76,40c0,6.2-1.5,12-4.3,17.1L58.6,46.8z'/%3E%3C/svg%3E"); - background-position: center; - background-repeat: repeat; - background-size: 40px 40px; - z-index: -1; - opacity: 0.05; -} - -.dark .mercedes-star-bg::after { - opacity: 0.02; - filter: invert(1) brightness(0.4); -} - -/* Zusätzliche Glassmorphism-Verbesserungen */ -.glass-effect { - backdrop-filter: blur(20px) saturate(180%) brightness(110%); - -webkit-backdrop-filter: blur(20px) saturate(180%) brightness(110%); - background: rgba(255, 255, 255, 0.1); - border: 1px solid rgba(255, 255, 255, 0.2); - box-shadow: - 0 8px 32px rgba(0, 0, 0, 0.1), - inset 0 1px 0 rgba(255, 255, 255, 0.3); -} - -.dark .glass-effect { - background: rgba(0, 0, 0, 0.3); - border: 1px solid rgba(255, 255, 255, 0.1); - box-shadow: - 0 8px 32px rgba(0, 0, 0, 0.3), - inset 0 1px 0 rgba(255, 255, 255, 0.15); -} - -/* Verbesserte Hover-Effekte für alle interaktiven Elemente */ -.glass-hover { - transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); -} - -.glass-hover:hover { - transform: translateY(-2px); - backdrop-filter: blur(25px) saturate(200%) brightness(120%); - -webkit-backdrop-filter: blur(25px) saturate(200%) brightness(120%); - box-shadow: - 0 20px 40px rgba(0, 0, 0, 0.15), - 0 8px 16px rgba(0, 0, 0, 0.1), - inset 0 1px 0 rgba(255, 255, 255, 0.4); -} - -.dark .glass-hover:hover { - box-shadow: - 0 20px 40px rgba(0, 0, 0, 0.4), - 0 8px 16px rgba(0, 0, 0, 0.3), - inset 0 1px 0 rgba(255, 255, 255, 0.2); -} - -/* Neue verbesserte Drucker-Karten für die Drucker-Ansicht */ -.printer-card-new { - @apply bg-gradient-to-br from-white/90 to-white/70 dark:from-slate-800/90 dark:to-slate-900/70 backdrop-blur-2xl rounded-xl border border-gray-200/70 dark:border-slate-700/30 p-5 shadow-2xl transition-all duration-300 hover:-translate-y-1 relative overflow-hidden; - box-shadow: - 0 20px 40px rgba(0, 0, 0, 0.08), - 0 10px 20px rgba(0, 0, 0, 0.06), - 0 0 0 1px rgba(255, 255, 255, 0.1); - border-radius: var(--card-radius, 1rem); -} - -.dark .printer-card-new { - box-shadow: - 0 20px 40px rgba(0, 0, 0, 0.4), - 0 10px 20px rgba(0, 0, 0, 0.3), - 0 0 0 1px rgba(255, 255, 255, 0.05); -} - -/* Online Drucker-Karten mit stärkerem visuellen Unterschied */ -.printer-card-new.online { - @apply bg-gradient-to-br from-green-50/90 to-emerald-50/80 dark:from-green-900/30 dark:to-emerald-900/20 border-green-200 dark:border-green-700/50; - box-shadow: - 0 20px 40px rgba(0, 122, 85, 0.08), - 0 10px 20px rgba(0, 122, 85, 0.06), - 0 0 0 1px rgba(209, 250, 229, 0.4); -} - -.dark .printer-card-new.online { - box-shadow: - 0 20px 40px rgba(0, 0, 0, 0.3), - 0 10px 20px rgba(0, 0, 0, 0.2), - 0 0 0 1px rgba(16, 185, 129, 0.2); -} - -/* Status-Badge mit verbesserten Styles */ -.status-badge-new { - @apply px-2.5 py-1 rounded-full text-xs font-medium inline-flex items-center space-x-1 shadow-sm; - background: rgba(255, 255, 255, 0.9); - backdrop-filter: blur(8px); - -webkit-backdrop-filter: blur(8px); - box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); -} - -.dark .status-badge-new { - background: rgba(30, 41, 59, 0.7); - box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); -} - -.status-badge-new.online { - @apply bg-green-100/90 text-green-800 dark:bg-green-900/60 dark:text-green-300; -} - -.status-badge-new.offline { - @apply bg-red-100/90 text-red-800 dark:bg-red-900/60 dark:text-red-300; -} - -/* Verbesserte Filterleiste */ -.filter-bar-new { - @apply bg-white/80 dark:bg-slate-800/80 backdrop-blur-xl rounded-lg p-1.5 border border-gray-200/60 dark:border-slate-700/30 shadow-xl; - box-shadow: - 0 10px 25px rgba(0, 0, 0, 0.05), - 0 5px 10px rgba(0, 0, 0, 0.03), - 0 0 0 1px rgba(255, 255, 255, 0.2); -} - -.dark .filter-bar-new { - box-shadow: - 0 10px 25px rgba(0, 0, 0, 0.2), - 0 5px 10px rgba(0, 0, 0, 0.15), - 0 0 0 1px rgba(255, 255, 255, 0.05); -} - -.filter-btn-new { - @apply px-3.5 py-2 text-sm rounded-md transition-all duration-300 font-medium; -} - -.filter-btn-new.active { - @apply bg-black text-white dark:bg-white dark:text-slate-900 shadow-md; - box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); -} - -.dark .filter-btn-new.active { - box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); -} - -/* Verbesserte Aktionsschaltflächen */ -.action-btn-new { - @apply flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg font-medium text-sm transition-all duration-300 shadow-md hover:-translate-y-0.5; - backdrop-filter: blur(8px); - -webkit-backdrop-filter: blur(8px); -} - -.action-btn-new.primary { - @apply bg-indigo-600 hover:bg-indigo-700 text-white dark:bg-indigo-600 dark:hover:bg-indigo-500; - box-shadow: 0 5px 15px rgba(79, 70, 229, 0.2); -} - -.dark .action-btn-new.primary { - box-shadow: 0 5px 15px rgba(79, 70, 229, 0.3); -} - -.action-btn-new.success { - @apply bg-green-600 hover:bg-green-700 text-white dark:bg-green-600 dark:hover:bg-green-500; - box-shadow: 0 5px 15px rgba(16, 185, 129, 0.2); -} - -.dark .action-btn-new.success { - box-shadow: 0 5px 15px rgba(16, 185, 129, 0.3); -} - -.action-btn-new.danger { - @apply bg-red-600 hover:bg-red-700 text-white dark:bg-red-600 dark:hover:bg-red-500; - box-shadow: 0 5px 15px rgba(239, 68, 68, 0.2); -} - -.dark .action-btn-new.danger { - box-shadow: 0 5px 15px rgba(239, 68, 68, 0.3); -} - -/* Informationszeilen in Drucker-Karten */ -.printer-info-row { - @apply flex items-center gap-2 text-xs sm:text-sm text-slate-700 dark:text-slate-300 mb-1.5; -} - -.printer-info-icon { - @apply w-3.5 h-3.5 sm:w-4 sm:h-4 text-slate-500 dark:text-slate-400 flex-shrink-0; -} - -/* Online-Indikator mit Pulseffekt */ -.online-indicator { - @apply absolute top-2.5 right-2.5 w-3 h-3 bg-green-500 rounded-full shadow-lg; - box-shadow: 0 0 0 rgba(16, 185, 129, 0.6); - animation: pulse-ring 2s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite; -} - -@keyframes pulse-ring { - 0% { - box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6); - } - 70% { - box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); - } - 100% { - box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); - } -} - -/* Header mit verbesserten Status-Anzeigen */ -.status-overview-new { - @apply flex flex-wrap gap-3 text-xs sm:text-sm p-3 bg-white/60 dark:bg-slate-800/60 backdrop-blur-xl rounded-lg border border-gray-200/60 dark:border-slate-700/30 shadow-lg; - box-shadow: - 0 10px 25px rgba(0, 0, 0, 0.04), - 0 5px 10px rgba(0, 0, 0, 0.02), - 0 0 0 1px rgba(255, 255, 255, 0.1); -} - -.dark .status-overview-new { - box-shadow: - 0 10px 25px rgba(0, 0, 0, 0.15), - 0 5px 10px rgba(0, 0, 0, 0.1), - 0 0 0 1px rgba(255, 255, 255, 0.03); -} - -.status-dot { - @apply w-2.5 h-2.5 rounded-full; -} - -.status-dot.online { - @apply bg-green-500; - animation: pulse-dot 2s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite; -} - -.status-dot.offline { - @apply bg-red-500; -} - -@keyframes pulse-dot { - 0% { - transform: scale(0.95); - opacity: 1; - } - 50% { - transform: scale(1.1); - opacity: 0.8; - } - 100% { - transform: scale(0.95); - opacity: 1; - } -} - -/* Verbesserte Modals mit Glassmorphism */ -.modal-new { - @apply fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/40 backdrop-blur-sm; -} - -.modal-content-new { - @apply bg-white/90 dark:bg-slate-800/90 backdrop-blur-2xl rounded-2xl p-6 w-full max-w-md shadow-2xl border border-gray-200/60 dark:border-slate-700/30 transform transition-all duration-300; - box-shadow: - 0 25px 50px rgba(0, 0, 0, 0.15), - 0 15px 30px rgba(0, 0, 0, 0.1), - 0 0 0 1px rgba(255, 255, 255, 0.1); - animation: modal-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); -} - -.dark .modal-content-new { - box-shadow: - 0 25px 50px rgba(0, 0, 0, 0.4), - 0 15px 30px rgba(0, 0, 0, 0.3), - 0 0 0 1px rgba(255, 255, 255, 0.05); -} - -@keyframes modal-in { - 0% { - opacity: 0; - transform: scale(0.95) translateY(10px); - } - 100% { - opacity: 1; - transform: scale(1) translateY(0); - } -} - -/* Verbesserte Input-Felder für Modals */ -.input-new { - @apply w-full px-3 py-2.5 bg-white/70 dark:bg-slate-700/70 border border-gray-300/60 dark:border-slate-600/60 rounded-lg text-slate-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-black dark:focus:ring-white focus:border-transparent transition-all duration-200 backdrop-blur-lg; - backdrop-filter: blur(16px); - -webkit-backdrop-filter: blur(16px); - box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); -} - -.dark .input-new { - box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); -} - -/* Verbesserte Form-Labels */ -.form-label-new { - @apply block mb-2 text-sm font-medium text-slate-900 dark:text-white; -} - -/* Dark Mode Toggle - Premium Design */ -.dark-mode-toggle-premium { - @apply relative cursor-pointer outline-none focus:outline-none; - z-index: 100; /* Stellt sicher, dass der Button über anderen Elementen liegt */ -} - -.dark-mode-toggle-premium:focus-visible { - @apply ring-2 ring-blue-500 ring-offset-2 dark:ring-blue-400 dark:ring-offset-slate-900 rounded-full; -} - -/* Animationen für verzögerte Pulse-Effekte */ -@keyframes delayed-pulse { - 0%, 100% { opacity: 1; } - 50% { opacity: 0.5; } -} - -.animation-delay-500 { - animation-delay: 0.5s; - animation: delayed-pulse 2s ease-in-out infinite; -} - -.animation-delay-1000 { - animation-delay: 1s; - animation: delayed-pulse 2s ease-in-out infinite; -} - -.animation-delay-1500 { - animation-delay: 1.5s; - animation: delayed-pulse 2s ease-in-out infinite; -} - -/* Improved icon transitions */ -.dark-mode-toggle-premium .sun-icon, -.dark-mode-toggle-premium .moon-icon { - transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); -} - -/* Glassmorphism effect for better visual depth */ -.dark-mode-toggle-premium .backdrop-blur-md { - backdrop-filter: blur(12px); - -webkit-backdrop-filter: blur(12px); -} - -/* Enhanced hover effects */ -.dark-mode-toggle-premium:hover .sun-icon svg, -.dark-mode-toggle-premium:hover .moon-icon svg { - filter: drop-shadow(0 0 8px currentColor); - transform: scale(1.1); -} - -/* Smooth gradient transitions */ -.dark-mode-toggle-premium .bg-gradient-to-r { - transition: opacity 0.5s ease-in-out; -} - -/* Better shadow effects */ -.dark-mode-toggle-premium .shadow-lg { - box-shadow: - 0 10px 15px -3px rgba(0, 0, 0, 0.1), - 0 4px 6px -2px rgba(0, 0, 0, 0.05); -} - -.dark .dark-mode-toggle-premium .shadow-lg { - box-shadow: - 0 10px 15px -3px rgba(0, 0, 0, 0.3), - 0 4px 6px -2px rgba(0, 0, 0, 0.2); -} - -/* Rotation animation for smooth icon transitions */ -@keyframes icon-rotate-in { - 0% { - opacity: 0; - transform: rotate(-90deg) scale(0.8); - } - 100% { - opacity: 1; - transform: rotate(0deg) scale(1); - } -} - -.dark-mode-toggle-premium .sun-icon.icon-enter, -.dark-mode-toggle-premium .moon-icon.icon-enter { - animation: icon-rotate-in 0.5s ease-out forwards; -} - -/* Active state animation */ -.dark-mode-toggle-premium:active > div { - transform: scale(0.95); - transition: transform 0.1s ease-out; -} - -/* User Menu Button - Neues Design */ -.user-menu-button-new { - @apply flex items-center space-x-2 rounded-lg p-1.5 transition-all duration-300; - background: rgba(241, 245, 249, 0.6); - border: 1px solid rgba(255, 255, 255, 0.6); - box-shadow: - 0 2px 10px rgba(0, 0, 0, 0.04), - 0 1px 2px rgba(0, 0, 0, 0.02); -} - -.user-menu-button-new:hover { - @apply transform -translate-y-0.5; - background: rgba(241, 245, 249, 0.8); - box-shadow: - 0 10px 20px rgba(0, 0, 0, 0.06), - 0 2px 6px rgba(0, 0, 0, 0.04); -} - -.dark .user-menu-button-new { - background: rgba(30, 41, 59, 0.6); - border: 1px solid rgba(255, 255, 255, 0.08); - box-shadow: - 0 2px 10px rgba(0, 0, 0, 0.15), - 0 1px 2px rgba(0, 0, 0, 0.1); -} - -.dark .user-menu-button-new:hover { - background: rgba(30, 41, 59, 0.8); - box-shadow: - 0 10px 20px rgba(0, 0, 0, 0.15), - 0 2px 6px rgba(0, 0, 0, 0.1); -} - -/* User Avatar - Neues Design */ -.user-avatar-new { - @apply h-8 w-8 rounded-full flex items-center justify-center text-white font-semibold text-sm shadow-md transition-all duration-300; - background: linear-gradient(135deg, #000000, #333333); - box-shadow: - 0 2px 6px rgba(0, 0, 0, 0.2), - 0 1px 3px rgba(0, 0, 0, 0.1); -} - -.dark .user-avatar-new { - background: linear-gradient(135deg, #f8fafc, #e2e8f0); - color: #0f172a; - box-shadow: - 0 2px 6px rgba(0, 0, 0, 0.3), - 0 1px 3px rgba(0, 0, 0, 0.2); -} - -/* Login Button - Neues Design */ -.login-button-new { - @apply flex items-center px-4 py-2 rounded-lg text-sm font-medium shadow-sm transition-all duration-300; - background: #000000; - color: #ffffff; - border: 1px solid rgba(255, 255, 255, 0.1); - box-shadow: - 0 2px 10px rgba(0, 0, 0, 0.1), - 0 1px 2px rgba(0, 0, 0, 0.08); -} - -.login-button-new:hover { - @apply transform -translate-y-0.5; - background: #333333; - box-shadow: - 0 10px 20px rgba(0, 0, 0, 0.15), - 0 3px 6px rgba(0, 0, 0, 0.1); -} - -.dark .login-button-new { - background: #ffffff; - color: #000000; - border: 1px solid rgba(0, 0, 0, 0.1); - box-shadow: - 0 2px 10px rgba(0, 0, 0, 0.2), - 0 1px 2px rgba(0, 0, 0, 0.15); -} - -.dark .login-button-new:hover { - background: #f1f5f9; - box-shadow: - 0 10px 20px rgba(0, 0, 0, 0.25), - 0 3px 6px rgba(0, 0, 0, 0.2); -} - -/* Mobile Menu - Neues Design */ -.mobile-menu-new { - @apply w-full overflow-hidden transition-all duration-300 z-40; - background: rgba(255, 255, 255, 0.8); - backdrop-filter: blur(24px); - -webkit-backdrop-filter: blur(24px); - box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06); - border-bottom: 1px solid rgba(241, 245, 249, 0.8); - max-height: 0; - opacity: 0; -} - -.mobile-menu-new.open { - max-height: 500px; - opacity: 1; - border-bottom: 1px solid rgba(241, 245, 249, 0.8); -} - -.dark .mobile-menu-new { - background: rgba(15, 23, 42, 0.8); - box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); - border-bottom: 1px solid rgba(30, 41, 59, 0.8); -} - -.mobile-nav-item { - @apply flex items-center space-x-3 px-4 py-3 rounded-lg text-slate-800 dark:text-slate-200 transition-all duration-300; -} - -.mobile-nav-item:hover { - background: rgba(241, 245, 249, 0.8); -} - -.dark .mobile-nav-item:hover { - background: rgba(30, 41, 59, 0.6); -} - -.mobile-nav-item.active { - background: rgba(241, 245, 249, 0.9); - color: #000000; - font-weight: 500; -} - -.dark .mobile-nav-item.active { - background: rgba(30, 41, 59, 0.8); - color: #ffffff; -} - -/* Dashboard Stat Cards mit schwarzem Hintergrund im Dark Mode */ -.mb-stat-card { - background: linear-gradient(135deg, rgba(240, 249, 255, 0.6) 0%, rgba(230, 242, 255, 0.6) 100%); - color: #0f172a; - position: relative; - overflow: hidden; - border: none; - border-radius: var(--card-radius); - backdrop-filter: blur(20px) saturate(180%) brightness(110%); - -webkit-backdrop-filter: blur(20px) saturate(180%) brightness(110%); - box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.1); - padding: 1.5rem; - margin: 1rem; - transition: transform 0.3s ease, box-shadow 0.3s ease; -} - -.dark .mb-stat-card { - background: linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, rgba(10, 10, 10, 0.7) 100%); - color: var(--text-primary, #f8fafc); - box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.05); -} - -/* Stats und Jobs Page Card Styles */ -.stats-card, .job-card { - @apply bg-white/60 dark:bg-black/80 backdrop-blur-2xl border border-gray-200/70 dark:border-slate-700/20 rounded-xl shadow-2xl transition-all duration-300; - backdrop-filter: blur(24px) saturate(200%) brightness(120%); - -webkit-backdrop-filter: blur(24px) saturate(200%) brightness(120%); - box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.1); - border-radius: var(--card-radius); -} - -/* Footer Styling - Verstärktes Glassmorphism */ -footer { - @apply transition-all duration-300; - background: rgba(255, 255, 255, 0.1); - backdrop-filter: blur(30px) saturate(180%) brightness(120%); - -webkit-backdrop-filter: blur(30px) saturate(180%) brightness(120%); - border-top: 1px solid rgba(255, 255, 255, 0.2); - box-shadow: - 0 -8px 32px rgba(0, 0, 0, 0.1), - 0 -2px 8px rgba(0, 0, 0, 0.05), - inset 0 1px 0 rgba(255, 255, 255, 0.2), - 0 0 0 1px rgba(255, 255, 255, 0.05); -} - -.dark footer { - background: rgba(0, 0, 0, 0.3); - backdrop-filter: blur(30px) saturate(160%) brightness(110%); - -webkit-backdrop-filter: blur(30px) saturate(160%) brightness(110%); - border-top: 1px solid rgba(255, 255, 255, 0.1); - box-shadow: - 0 -8px 32px rgba(0, 0, 0, 0.3), - 0 -2px 8px rgba(0, 0, 0, 0.2), - inset 0 1px 0 rgba(255, 255, 255, 0.1), - 0 0 0 1px rgba(255, 255, 255, 0.03); -} - -/* Dropdown Pfeil Animation */ -.dropdown-arrow { - @apply transition-transform duration-300; -} - -/* Mercedes-Benz Hintergrund mit Star-Pattern */ -.mercedes-star-bg { - position: relative; -} - -.mercedes-star-bg::after { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' width='80' height='80' opacity='0.05' fill='currentColor'%3E%3Cpath d='M58.6,4.5C53,1.6,46.7,0,40,0c-6.7,0-13,1.6-18.6,4.5v0C8.7,11.2,0,24.6,0,40c0,15.4,8.7,28.8,21.5,35.5C27,78.3,33.3,80,40,80c6.7,0,12.9-1.7,18.5-4.6C71.3,68.8,80,55.4,80,40C80,24.6,71.3,11.2,58.6,4.5z M4,40c0-13.1,7-24.5,17.5-30.9v0C26.6,6,32.5,4.2,39,4l-4.5,32.7L21.5,46.8v0L8.3,57.1C5.6,52,4,46.2,4,40z M58.6,70.8C53.1,74.1,46.8,76,40,76c-6.8,0-13.2-1.9-18.6-5.2c-4.9-2.9-8.9-6.9-11.9-11.7l11.9-4.9v0L40,46.6l18.6,7.5v0l12,4.9C67.6,63.9,63.4,67.9,58.6,70.8z M58.6,46.8L58.6,46.8l-12.9-10L41.1,4c6.3,0.2,12.3,2,17.4,5.1v0C69,15.4,76,26.9,76,40c0,6.2-1.5,12-4.3,17.1L58.6,46.8z'/%3E%3C/svg%3E"); - background-position: center; - background-repeat: repeat; - background-size: 40px 40px; - z-index: -1; - opacity: 0.05; -} - -.dark .mercedes-star-bg::after { - opacity: 0.02; - filter: invert(1) brightness(0.4); -} - -/* Zusätzliche Glassmorphism-Verbesserungen */ -.glass-effect { - backdrop-filter: blur(20px) saturate(180%) brightness(110%); - -webkit-backdrop-filter: blur(20px) saturate(180%) brightness(110%); - background: rgba(255, 255, 255, 0.1); - border: 1px solid rgba(255, 255, 255, 0.2); - box-shadow: - 0 8px 32px rgba(0, 0, 0, 0.1), - inset 0 1px 0 rgba(255, 255, 255, 0.3); -} - -.dark .glass-effect { - background: rgba(0, 0, 0, 0.3); - border: 1px solid rgba(255, 255, 255, 0.1); - box-shadow: - 0 8px 32px rgba(0, 0, 0, 0.3), - inset 0 1px 0 rgba(255, 255, 255, 0.15); -} - -/* Verbesserte Hover-Effekte für alle interaktiven Elemente */ -.glass-hover { - transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); -} - -.glass-hover:hover { - transform: translateY(-2px); - backdrop-filter: blur(25px) saturate(200%) brightness(120%); - -webkit-backdrop-filter: blur(25px) saturate(200%) brightness(120%); - box-shadow: - 0 20px 40px rgba(0, 0, 0, 0.15), - 0 8px 16px rgba(0, 0, 0, 0.1), - inset 0 1px 0 rgba(255, 255, 255, 0.4); -} - -.dark .glass-hover:hover { - box-shadow: - 0 20px 40px rgba(0, 0, 0, 0.4), - 0 8px 16px rgba(0, 0, 0, 0.3), - inset 0 1px 0 rgba(255, 255, 255, 0.2); -} - -/* Neue verbesserte Drucker-Karten für die Drucker-Ansicht */ -.printer-card-new { - @apply bg-gradient-to-br from-white/90 to-white/70 dark:from-slate-800/90 dark:to-slate-900/70 backdrop-blur-2xl rounded-xl border border-gray-200/70 dark:border-slate-700/30 p-5 shadow-2xl transition-all duration-300 hover:-translate-y-1 relative overflow-hidden; - box-shadow: - 0 20px 40px rgba(0, 0, 0, 0.08), - 0 10px 20px rgba(0, 0, 0, 0.06), - 0 0 0 1px rgba(255, 255, 255, 0.1); - border-radius: var(--card-radius, 1rem); -} - -.dark .printer-card-new { - box-shadow: - 0 20px 40px rgba(0, 0, 0, 0.4), - 0 10px 20px rgba(0, 0, 0, 0.3), - 0 0 0 1px rgba(255, 255, 255, 0.05); -} - -/* Online Drucker-Karten mit stärkerem visuellen Unterschied */ -.printer-card-new.online { - @apply bg-gradient-to-br from-green-50/90 to-emerald-50/80 dark:from-green-900/30 dark:to-emerald-900/20 border-green-200 dark:border-green-700/50; - box-shadow: - 0 20px 40px rgba(0, 122, 85, 0.08), - 0 10px 20px rgba(0, 122, 85, 0.06), - 0 0 0 1px rgba(209, 250, 229, 0.4); -} - -.dark .printer-card-new.online { - box-shadow: - 0 20px 40px rgba(0, 0, 0, 0.3), - 0 10px 20px rgba(0, 0, 0, 0.2), - 0 0 0 1px rgba(16, 185, 129, 0.2); -} - -/* Status-Badge mit verbesserten Styles */ -.status-badge-new { - @apply px-2.5 py-1 rounded-full text-xs font-medium inline-flex items-center space-x-1 shadow-sm; - background: rgba(255, 255, 255, 0.9); - backdrop-filter: blur(8px); - -webkit-backdrop-filter: blur(8px); - box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); -} - -.dark .status-badge-new { - background: rgba(30, 41, 59, 0.7); - box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); -} - -.status-badge-new.online { - @apply bg-green-100/90 text-green-800 dark:bg-green-900/60 dark:text-green-300; -} - -.status-badge-new.offline { - @apply bg-red-100/90 text-red-800 dark:bg-red-900/60 dark:text-red-300; -} - -/* Verbesserte Filterleiste */ -.filter-bar-new { - @apply bg-white/80 dark:bg-slate-800/80 backdrop-blur-xl rounded-lg p-1.5 border border-gray-200/60 dark:border-slate-700/30 shadow-xl; - box-shadow: - 0 10px 25px rgba(0, 0, 0, 0.05), - 0 5px 10px rgba(0, 0, 0, 0.03), - 0 0 0 1px rgba(255, 255, 255, 0.2); -} - -.dark .filter-bar-new { - box-shadow: - 0 10px 25px rgba(0, 0, 0, 0.2), - 0 5px 10px rgba(0, 0, 0, 0.15), - 0 0 0 1px rgba(255, 255, 255, 0.05); -} - -.filter-btn-new { - @apply px-3.5 py-2 text-sm rounded-md transition-all duration-300 font-medium; -} - -.filter-btn-new.active { - @apply bg-black text-white dark:bg-white dark:text-slate-900 shadow-md; - box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); -} - -.dark .filter-btn-new.active { - box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); -} - -/* Verbesserte Aktionsschaltflächen */ -.action-btn-new { - @apply flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg font-medium text-sm transition-all duration-300 shadow-md hover:-translate-y-0.5; - backdrop-filter: blur(8px); - -webkit-backdrop-filter: blur(8px); -} - -.action-btn-new.primary { - @apply bg-indigo-600 hover:bg-indigo-700 text-white dark:bg-indigo-600 dark:hover:bg-indigo-500; - box-shadow: 0 5px 15px rgba(79, 70, 229, 0.2); -} - -.dark .action-btn-new.primary { - box-shadow: 0 5px 15px rgba(79, 70, 229, 0.3); -} - -.action-btn-new.success { - @apply bg-green-600 hover:bg-green-700 text-white dark:bg-green-600 dark:hover:bg-green-500; - box-shadow: 0 5px 15px rgba(16, 185, 129, 0.2); -} - -.dark .action-btn-new.success { - box-shadow: 0 5px 15px rgba(16, 185, 129, 0.3); -} - -.action-btn-new.danger { - @apply bg-red-600 hover:bg-red-700 text-white dark:bg-red-600 dark:hover:bg-red-500; - box-shadow: 0 5px 15px rgba(239, 68, 68, 0.2); -} - -.dark .action-btn-new.danger { - box-shadow: 0 5px 15px rgba(239, 68, 68, 0.3); -} - -/* Informationszeilen in Drucker-Karten */ -.printer-info-row { - @apply flex items-center gap-2 text-xs sm:text-sm text-slate-700 dark:text-slate-300 mb-1.5; -} - -.printer-info-icon { - @apply w-3.5 h-3.5 sm:w-4 sm:h-4 text-slate-500 dark:text-slate-400 flex-shrink-0; -} - -/* Online-Indikator mit Pulseffekt */ -.online-indicator { - @apply absolute top-2.5 right-2.5 w-3 h-3 bg-green-500 rounded-full shadow-lg; - box-shadow: 0 0 0 rgba(16, 185, 129, 0.6); - animation: pulse-ring 2s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite; -} - -@keyframes pulse-ring { - 0% { - box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6); - } - 70% { - box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); - } - 100% { - box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); - } -} - -/* Header mit verbesserten Status-Anzeigen */ -.status-overview-new { - @apply flex flex-wrap gap-3 text-xs sm:text-sm p-3 bg-white/60 dark:bg-slate-800/60 backdrop-blur-xl rounded-lg border border-gray-200/60 dark:border-slate-700/30 shadow-lg; - box-shadow: - 0 10px 25px rgba(0, 0, 0, 0.04), - 0 5px 10px rgba(0, 0, 0, 0.02), - 0 0 0 1px rgba(255, 255, 255, 0.1); -} - -.dark .status-overview-new { - box-shadow: - 0 10px 25px rgba(0, 0, 0, 0.15), - 0 5px 10px rgba(0, 0, 0, 0.1), - 0 0 0 1px rgba(255, 255, 255, 0.03); -} - -.status-dot { - @apply w-2.5 h-2.5 rounded-full; -} - -.status-dot.online { - @apply bg-green-500; - animation: pulse-dot 2s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite; -} - -.status-dot.offline { - @apply bg-red-500; -} - -@keyframes pulse-dot { - 0% { - transform: scale(0.95); - opacity: 1; - } - 50% { - transform: scale(1.1); - opacity: 0.8; - } - 100% { - transform: scale(0.95); - opacity: 1; - } -} - -/* Verbesserte Modals mit Glassmorphism */ -.modal-new { - @apply fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/40 backdrop-blur-sm; -} - -.modal-content-new { - @apply bg-white/90 dark:bg-slate-800/90 backdrop-blur-2xl rounded-2xl p-6 w-full max-w-md shadow-2xl border border-gray-200/60 dark:border-slate-700/30 transform transition-all duration-300; - box-shadow: - 0 25px 50px rgba(0, 0, 0, 0.15), - 0 15px 30px rgba(0, 0, 0, 0.1), - 0 0 0 1px rgba(255, 255, 255, 0.1); - animation: modal-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); -} - -.dark .modal-content-new { - box-shadow: - 0 25px 50px rgba(0, 0, 0, 0.4), - 0 15px 30px rgba(0, 0, 0, 0.3), - 0 0 0 1px rgba(255, 255, 255, 0.05); -} - -@keyframes modal-in { - 0% { - opacity: 0; - transform: scale(0.95) translateY(10px); - } - 100% { - opacity: 1; - transform: scale(1) translateY(0); - } -} - -/* Verbesserte Input-Felder für Modals */ -.input-new { - @apply w-full px-3 py-2.5 bg-white/70 dark:bg-slate-700/70 border border-gray-300/60 dark:border-slate-600/60 rounded-lg text-slate-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-black dark:focus:ring-white focus:border-transparent transition-all duration-200 backdrop-blur-lg; - backdrop-filter: blur(16px); - -webkit-backdrop-filter: blur(16px); - box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); -} - -.dark .input-new { - box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); -} - -/* Verbesserte Form-Labels */ -.form-label-new { - @apply block mb-2 text-sm font-medium text-slate-900 dark:text-white; -} - -/* Dark Mode Toggle - Premium Design */ -.dark-mode-toggle-premium { - @apply relative cursor-pointer outline-none focus:outline-none; - z-index: 100; /* Stellt sicher, dass der Button über anderen Elementen liegt */ -} - -.dark-mode-toggle-premium:focus-visible { - @apply ring-2 ring-blue-500 ring-offset-2 dark:ring-blue-400 dark:ring-offset-slate-900 rounded-full; -} - -/* Animationen für verzögerte Pulse-Effekte */ -@keyframes delayed-pulse { - 0%, 100% { opacity: 1; } - 50% { opacity: 0.5; } -} - -.animation-delay-500 { - animation-delay: 0.5s; - animation: delayed-pulse 2s ease-in-out infinite; -} - -.animation-delay-1000 { - animation-delay: 1s; - animation: delayed-pulse 2s ease-in-out infinite; -} - -.animation-delay-1500 { - animation-delay: 1.5s; - animation: delayed-pulse 2s ease-in-out infinite; -} - -/* Improved icon transitions */ -.dark-mode-toggle-premium .sun-icon, -.dark-mode-toggle-premium .moon-icon { - transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); -} - -/* Glassmorphism effect for better visual depth */ -.dark-mode-toggle-premium .backdrop-blur-md { - backdrop-filter: blur(12px); - -webkit-backdrop-filter: blur(12px); -} - -/* Enhanced hover effects */ -.dark-mode-toggle-premium:hover .sun-icon svg, -.dark-mode-toggle-premium:hover .moon-icon svg { - filter: drop-shadow(0 0 8px currentColor); - transform: scale(1.1); -} - -/* Smooth gradient transitions */ -.dark-mode-toggle-premium .bg-gradient-to-r { - transition: opacity 0.5s ease-in-out; -} - -/* Better shadow effects */ -.dark-mode-toggle-premium .shadow-lg { - box-shadow: - 0 10px 15px -3px rgba(0, 0, 0, 0.1), - 0 4px 6px -2px rgba(0, 0, 0, 0.05); -} - -.dark .dark-mode-toggle-premium .shadow-lg { - box-shadow: - 0 10px 15px -3px rgba(0, 0, 0, 0.3), - 0 4px 6px -2px rgba(0, 0, 0, 0.2); -} - -/* Rotation animation for smooth icon transitions */ -@keyframes icon-rotate-in { - 0% { - opacity: 0; - transform: rotate(-90deg) scale(0.8); - } - 100% { - opacity: 1; - transform: rotate(0deg) scale(1); - } -} - -.dark-mode-toggle-premium .sun-icon.icon-enter, -.dark-mode-toggle-premium .moon-icon.icon-enter { - animation: icon-rotate-in 0.5s ease-out forwards; -} - -/* Active state animation */ -.dark-mode-toggle-premium:active > div { - transform: scale(0.95); - transition: transform 0.1s ease-out; -} - -/* User Menu Button - Neues Design */ -.user-menu-button-new { - @apply flex items-center space-x-2 rounded-lg p-1.5 transition-all duration-300; - background: rgba(241, 245, 249, 0.6); - border: 1px solid rgba(255, 255, 255, 0.6); - box-shadow: - 0 2px 10px rgba(0, 0, 0, 0.04), - 0 1px 2px rgba(0, 0, 0, 0.02); -} - -.user-menu-button-new:hover { - @apply transform -translate-y-0.5; - background: rgba(241, 245, 249, 0.8); - box-shadow: - 0 10px 20px rgba(0, 0, 0, 0.06), - 0 2px 6px rgba(0, 0, 0, 0.04); -} - -.dark .user-menu-button-new { - background: rgba(30, 41, 59, 0.6); - border: 1px solid rgba(255, 255, 255, 0.08); - box-shadow: - 0 2px 10px rgba(0, 0, 0, 0.15), - 0 1px 2px rgba(0, 0, 0, 0.1); -} - -.dark .user-menu-button-new:hover { - background: rgba(30, 41, 59, 0.8); - box-shadow: - 0 10px 20px rgba(0, 0, 0, 0.15), - 0 2px 6px rgba(0, 0, 0, 0.1); -} - -/* User Avatar - Neues Design */ -.user-avatar-new { - @apply h-8 w-8 rounded-full flex items-center justify-center text-white font-semibold text-sm shadow-md transition-all duration-300; - background: linear-gradient(135deg, #000000, #333333); - box-shadow: - 0 2px 6px rgba(0, 0, 0, 0.2), - 0 1px 3px rgba(0, 0, 0, 0.1); -} - -.dark .user-avatar-new { - background: linear-gradient(135deg, #f8fafc, #e2e8f0); - color: #0f172a; - box-shadow: - 0 2px 6px rgba(0, 0, 0, 0.3), - 0 1px 3px rgba(0, 0, 0, 0.2); -} - -/* Login Button - Neues Design */ -.login-button-new { - @apply flex items-center px-4 py-2 rounded-lg text-sm font-medium shadow-sm transition-all duration-300; - background: #000000; - color: #ffffff; - border: 1px solid rgba(255, 255, 255, 0.1); - box-shadow: - 0 2px 10px rgba(0, 0, 0, 0.1), - 0 1px 2px rgba(0, 0, 0, 0.08); -} - -.login-button-new:hover { - @apply transform -translate-y-0.5; - background: #333333; - box-shadow: - 0 10px 20px rgba(0, 0, 0, 0.15), - 0 3px 6px rgba(0, 0, 0, 0.1); -} - -.dark .login-button-new { - background: #ffffff; - color: #000000; - border: 1px solid rgba(0, 0, 0, 0.1); - box-shadow: - 0 2px 10px rgba(0, 0, 0, 0.2), - 0 1px 2px rgba(0, 0, 0, 0.15); -} - -.dark .login-button-new:hover { - background: #f1f5f9; - box-shadow: - 0 10px 20px rgba(0, 0, 0, 0.25), - 0 3px 6px rgba(0, 0, 0, 0.2); -} - -/* Mobile Menu - Neues Design */ -.mobile-menu-new { - @apply w-full overflow-hidden transition-all duration-300 z-40; - background: rgba(255, 255, 255, 0.8); - backdrop-filter: blur(24px); - -webkit-backdrop-filter: blur(24px); - box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06); - border-bottom: 1px solid rgba(241, 245, 249, 0.8); - max-height: 0; - opacity: 0; -} - -.mobile-menu-new.open { - max-height: 500px; - opacity: 1; - border-bottom: 1px solid rgba(241, 245, 249, 0.8); -} - -.dark .mobile-menu-new { - background: rgba(15, 23, 42, 0.8); - box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); - border-bottom: 1px solid rgba(30, 41, 59, 0.8); -} - -.mobile-nav-item { - @apply flex items-center space-x-3 px-4 py-3 rounded-lg text-slate-800 dark:text-slate-200 transition-all duration-300; -} - -.mobile-nav-item:hover { - background: rgba(241, 245, 249, 0.8); -} - -.dark .mobile-nav-item:hover { - background: rgba(30, 41, 59, 0.6); -} - -.mobile-nav-item.active { - background: rgba(241, 245, 249, 0.9); - color: #000000; - font-weight: 500; -} - -.dark .mobile-nav-item.active { - background: rgba(30, 41, 59, 0.8); - color: #ffffff; -} - -/* Dashboard Stat Cards mit schwarzem Hintergrund im Dark Mode */ -.mb-stat-card { - background: linear-gradient(135deg, rgba(240, 249, 255, 0.6) 0%, rgba(230, 242, 255, 0.6) 100%); - color: #0f172a; - position: relative; - overflow: hidden; - border: none; - border-radius: var(--card-radius); - backdrop-filter: blur(20px) saturate(180%) brightness(110%); - -webkit-backdrop-filter: blur(20px) saturate(180%) brightness(110%); - box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.1); - padding: 1.5rem; - margin: 1rem; - transition: transform 0.3s ease, box-shadow 0.3s ease; -} - -.dark .mb-stat-card { - background: linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, rgba(10, 10, 10, 0.7) 100%); - color: var(--text-primary, #f8fafc); - box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.05); -} - -/* Stats und Jobs Page Card Styles */ -.stats-card, .job-card { - @apply bg-white/60 dark:bg-black/80 backdrop-blur-2xl border border-gray-200/70 dark:border-slate-700/20 rounded-xl shadow-2xl transition-all duration-300; - backdrop-filter: blur(24px) saturate(200%) brightness(120%); - -webkit-backdrop-filter: blur(24px) saturate(200%) brightness(120%); - box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.1); - border-radius: var(--card-radius); -} - -/* Footer Styling - Verstärktes Glassmorphism */ -footer { - @apply transition-all duration-300; - background: rgba(255, 255, 255, 0.1); - backdrop-filter: blur(30px) saturate(180%) brightness(120%); - -webkit-backdrop-filter: blur(30px) saturate(180%) brightness(120%); - border-top: 1px solid rgba(255, 255, 255, 0.2); - box-shadow: - 0 -8px 32px rgba(0, 0, 0, 0.1), - 0 -2px 8px rgba(0, 0, 0, 0.05), - inset 0 1px 0 rgba(255, 255, 255, 0.2), - 0 0 0 1px rgba(255, 255, 255, 0.05); -} - -.dark footer { - background: rgba(0, 0, 0, 0.3); - backdrop-filter: blur(30px) saturate(160%) brightness(110%); - -webkit-backdrop-filter: blur(30px) saturate(160%) brightness(110%); - border-top: 1px solid rgba(255, 255, 255, 0.1); - box-shadow: - 0 -8px 32px rgba(0, 0, 0, 0.3), - 0 -2px 8px rgba(0, 0, 0, 0.2), - inset 0 1px 0 rgba(255, 255, 255, 0.1), - 0 0 0 1px rgba(255, 255, 255, 0.03); -} - -/* Dropdown Pfeil Animation */ -.dropdown-arrow { - @apply transition-transform duration-300; -} - -/* Mercedes-Benz Hintergrund mit Star-Pattern */ -.mercedes-star-bg { - position: relative; -} - -.mercedes-star-bg::after { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' width='80' height='80' opacity='0.05' fill='currentColor'%3E%3Cpath d='M58.6,4.5C53,1.6,46.7,0,40,0c-6.7,0-13,1.6-18.6,4.5v0C8.7,11.2,0,24.6,0,40c0,15.4,8.7,28.8,21.5,35.5C27,78.3,33.3,80,40,80c6.7,0,12.9-1.7,18.5-4.6C71.3,68.8,80,55.4,80,40C80,24.6,71.3,11.2,58.6,4.5z M4,40c0-13.1,7-24.5,17.5-30.9v0C26.6,6,32.5,4.2,39,4l-4.5,32.7L21.5,46.8v0L8.3,57.1C5.6,52,4,46.2,4,40z M58.6,70.8C53.1,74.1,46.8,76,40,76c-6.8,0-13.2-1.9-18.6-5.2c-4.9-2.9-8.9-6.9-11.9-11.7l11.9-4.9v0L40,46.6l18.6,7.5v0l12,4.9C67.6,63.9,63.4,67.9,58.6,70.8z M58.6,46.8L58.6,46.8l-12.9-10L41.1,4c6.3,0.2,12.3,2,17.4,5.1v0C69,15.4,76,26.9,76,40c0,6.2-1.5,12-4.3,17.1L58.6,46.8z'/%3E%3C/svg%3E"); - background-position: center; - background-repeat: repeat; - background-size: 40px 40px; - z-index: -1; - opacity: 0.05; -} - -.dark .mercedes-star-bg::after { - opacity: 0.02; - filter: invert(1) brightness(0.4); -} - -/* Zusätzliche Glassmorphism-Verbesserungen */ -.glass-effect { - backdrop-filter: blur(20px) saturate(180%) brightness(110%); - -webkit-backdrop-filter: blur(20px) saturate(180%) brightness(110%); - background: rgba(255, 255, 255, 0.1); - border: 1px solid rgba(255, 255, 255, 0.2); - box-shadow: - 0 8px 32px rgba(0, 0, 0, 0.1), - inset 0 1px 0 rgba(255, 255, 255, 0.3); -} - -.dark .glass-effect { - background: rgba(0, 0, 0, 0.3); - border: 1px solid rgba(255, 255, 255, 0.1); - box-shadow: - 0 8px 32px rgba(0, 0, 0, 0.3), - inset 0 1px 0 rgba(255, 255, 255, 0.15); -} - -/* Verbesserte Hover-Effekte für alle interaktiven Elemente */ -.glass-hover { - transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); -} - -.glass-hover:hover { - transform: translateY(-2px); - backdrop-filter: blur(25px) saturate(200%) brightness(120%); - -webkit-backdrop-filter: blur(25px) saturate(200%) brightness(120%); - box-shadow: - 0 20px 40px rgba(0, 0, 0, 0.15), - 0 8px 16px rgba(0, 0, 0, 0.1), - inset 0 1px 0 rgba(255, 255, 255, 0.4); -} - -.dark .glass-hover:hover { - box-shadow: - 0 20px 40px rgba(0, 0, 0, 0.4), - 0 8px 16px rgba(0, 0, 0, 0.3), - inset 0 1px 0 rgba(255, 255, 255, 0.2); -} - -/* Neue verbesserte Drucker-Karten für die Drucker-Ansicht */ -.printer-card-new { - @apply bg-gradient-to-br from-white/90 to-white/70 dark:from-slate-800/90 dark:to-slate-900/70 backdrop-blur-2xl rounded-xl border border-gray-200/70 dark:border-slate-700/30 p-5 shadow-2xl transition-all duration-300 hover:-translate-y-1 relative overflow-hidden; - box-shadow: - 0 20px 40px rgba(0, 0, 0, 0.08), - 0 10px 20px rgba(0, 0, 0, 0.06), - 0 0 0 1px rgba(255, 255, 255, 0.1); - border-radius: var(--card-radius, 1rem); -} - -.dark .printer-card-new { - box-shadow: - 0 20px 40px rgba(0, 0, 0, 0.4), - 0 10px 20px rgba(0, 0, 0, 0.3), - 0 0 0 1px rgba(255, 255, 255, 0.05); -} - -/* Online Drucker-Karten mit stärkerem visuellen Unterschied */ -.printer-card-new.online { - @apply bg-gradient-to-br from-green-50/90 to-emerald-50/80 dark:from-green-900/30 dark:to-emerald-900/20 border-green-200 dark:border-green-700/50; - box-shadow: - 0 20px 40px rgba(0, 122, 85, 0.08), - 0 10px 20px rgba(0, 122, 85, 0.06), - 0 0 0 1px rgba(209, 250, 229, 0.4); -} - -.dark .printer-card-new.online { - box-shadow: - 0 20px 40px rgba(0, 0, 0, 0.3), - 0 10px 20px rgba(0, 0, 0, 0.2), - 0 0 0 1px rgba(16, 185, 129, 0.2); -} - -/* Status-Badge mit verbesserten Styles */ -.status-badge-new { - @apply px-2.5 py-1 rounded-full text-xs font-medium inline-flex items-center space-x-1 shadow-sm; - background: rgba(255, 255, 255, 0.9); - backdrop-filter: blur(8px); - -webkit-backdrop-filter: blur(8px); - box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); -} - -.dark .status-badge-new { - background: rgba(30, 41, 59, 0.7); - box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); -} - -.status-badge-new.online { - @apply bg-green-100/90 text-green-800 dark:bg-green-900/60 dark:text-green-300; -} - -.status-badge-new.offline { - @apply bg-red-100/90 text-red-800 dark:bg-red-900/60 dark:text-red-300; -} - -/* Verbesserte Filterleiste */ -.filter-bar-new { - @apply bg-white/80 dark:bg-slate-800/80 backdrop-blur-xl rounded-lg p-1.5 border border-gray-200/60 dark:border-slate-700/30 shadow-xl; - box-shadow: - 0 10px 25px rgba(0, 0, 0, 0.05), - 0 5px 10px rgba(0, 0, 0, 0.03), - 0 0 0 1px rgba(255, 255, 255, 0.2); -} - -.dark .filter-bar-new { - box-shadow: - 0 10px 25px rgba(0, 0, 0, 0.2), - 0 5px 10px rgba(0, 0, 0, 0.15), - 0 0 0 1px rgba(255, 255, 255, 0.05); -} - -.filter-btn-new { - @apply px-3.5 py-2 text-sm rounded-md transition-all duration-300 font-medium; -} - -.filter-btn-new.active { - @apply bg-black text-white dark:bg-white dark:text-slate-900 shadow-md; - box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); -} - -.dark .filter-btn-new.active { - box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); -} - -/* Verbesserte Aktionsschaltflächen */ -.action-btn-new { - @apply flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg font-medium text-sm transition-all duration-300 shadow-md hover:-translate-y-0.5; - backdrop-filter: blur(8px); - -webkit-backdrop-filter: blur(8px); -} - -.action-btn-new.primary { - @apply bg-indigo-600 hover:bg-indigo-700 text-white dark:bg-indigo-600 dark:hover:bg-indigo-500; - box-shadow: 0 5px 15px rgba(79, 70, 229, 0.2); -} - -.dark .action-btn-new.primary { - box-shadow: 0 5px 15px rgba(79, 70, 229, 0.3); -} - -.action-btn-new.success { - @apply bg-green-600 hover:bg-green-700 text-white dark:bg-green-600 dark:hover:bg-green-500; - box-shadow: 0 5px 15px rgba(16, 185, 129, 0.2); -} - -.dark .action-btn-new.success { - box-shadow: 0 5px 15px rgba(16, 185, 129, 0.3); -} - -.action-btn-new.danger { - @apply bg-red-600 hover:bg-red-700 text-white dark:bg-red-600 dark:hover:bg-red-500; - box-shadow: 0 5px 15px rgba(239, 68, 68, 0.2); -} - -.dark .action-btn-new.danger { - box-shadow: 0 5px 15px rgba(239, 68, 68, 0.3); -} - -/* Informationszeilen in Drucker-Karten */ -.printer-info-row { - @apply flex items-center gap-2 text-xs sm:text-sm text-slate-700 dark:text-slate-300 mb-1.5; -} - -.printer-info-icon { - @apply w-3.5 h-3.5 sm:w-4 sm:h-4 text-slate-500 dark:text-slate-400 flex-shrink-0; -} - -/* Online-Indikator mit Pulseffekt */ -.online-indicator { - @apply absolute top-2.5 right-2.5 w-3 h-3 bg-green-500 rounded-full shadow-lg; - box-shadow: 0 0 0 rgba(16, 185, 129, 0.6); - animation: pulse-ring 2s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite; -} - -@keyframes pulse-ring { - 0% { - box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6); - } - 70% { - box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); - } - 100% { - box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); - } -} - -/* Header mit verbesserten Status-Anzeigen */ -.status-overview-new { - @apply flex flex-wrap gap-3 text-xs sm:text-sm p-3 bg-white/60 dark:bg-slate-800/60 backdrop-blur-xl rounded-lg border border-gray-200/60 dark:border-slate-700/30 shadow-lg; - box-shadow: - 0 10px 25px rgba(0, 0, 0, 0.04), - 0 5px 10px rgba(0, 0, 0, 0.02), - 0 0 0 1px rgba(255, 255, 255, 0.1); -} - -.dark .status-overview-new { - box-shadow: - 0 10px 25px rgba(0, 0, 0, 0.15), - 0 5px 10px rgba(0, 0, 0, 0.1), - 0 0 0 1px rgba(255, 255, 255, 0.03); -} - -.status-dot { - @apply w-2.5 h-2.5 rounded-full; -} - -.status-dot.online { - @apply bg-green-500; - animation: pulse-dot 2s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite; -} - -.status-dot.offline { - @apply bg-red-500; -} - -@keyframes pulse-dot { - 0% { - transform: scale(0.95); - opacity: 1; - } - 50% { - transform: scale(1.1); - opacity: 0.8; - } - 100% { - transform: scale(0.95); - opacity: 1; - } -} - -/* Verbesserte Modals mit Glassmorphism */ -.modal-new { - @apply fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/40 backdrop-blur-sm; -} - -.modal-content-new { - @apply bg-white/90 dark:bg-slate-800/90 backdrop-blur-2xl rounded-2xl p-6 w-full max-w-md shadow-2xl border border-gray-200/60 dark:border-slate-700/30 transform transition-all duration-300; - box-shadow: - 0 25px 50px rgba(0, 0, 0, 0.15), - 0 15px 30px rgba(0, 0, 0, 0.1), - 0 0 0 1px rgba(255, 255, 255, 0.1); - animation: modal-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); -} - -.dark .modal-content-new { - box-shadow: - 0 25px 50px rgba(0, 0, 0, 0.4), - 0 15px 30px rgba(0, 0, 0, 0.3), - 0 0 0 1px rgba(255, 255, 255, 0.05); -} - -@keyframes modal-in { - 0% { - opacity: 0; - transform: scale(0.95) translateY(10px); - } - 100% { - opacity: 1; - transform: scale(1) translateY(0); - } -} - -/* Verbesserte Input-Felder für Modals */ -.input-new { - @apply w-full px-3 py-2.5 bg-white/70 dark:bg-slate-700/70 border border-gray-300/60 dark:border-slate-600/60 rounded-lg text-slate-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-black dark:focus:ring-white focus:border-transparent transition-all duration-200 backdrop-blur-lg; - backdrop-filter: blur(16px); - -webkit-backdrop-filter: blur(16px); - box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); -} - -.dark .input-new { - box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); -} - -/* Verbesserte Form-Labels */ -.form-label-new { - @apply block mb-2 text-sm font-medium text-slate-900 dark:text-white; -} - -/* Dark Mode Toggle - Premium Design */ -.dark-mode-toggle-premium { - @apply relative cursor-pointer outline-none focus:outline-none; - z-index: 100; /* Stellt sicher, dass der Button über anderen Elementen liegt */ -} - -.dark-mode-toggle-premium:focus-visible { - @apply ring-2 ring-blue-500 ring-offset-2 dark:ring-blue-400 dark:ring-offset-slate-900 rounded-full; -} - -/* Animationen für verzögerte Pulse-Effekte */ -@keyframes delayed-pulse { - 0%, 100% { opacity: 1; } - 50% { opacity: 0.5; } -} - -.animation-delay-500 { - animation-delay: 0.5s; - animation: delayed-pulse 2s ease-in-out infinite; -} - -.animation-delay-1000 { - animation-delay: 1s; - animation: delayed-pulse 2s ease-in-out infinite; -} - -.animation-delay-1500 { - animation-delay: 1.5s; - animation: delayed-pulse 2s ease-in-out infinite; -} - -/* Improved icon transitions */ -.dark-mode-toggle-premium .sun-icon, -.dark-mode-toggle-premium .moon-icon { - transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); -} - -/* Glassmorphism effect for better visual depth */ -.dark-mode-toggle-premium .backdrop-blur-md { - backdrop-filter: blur(12px); - -webkit-backdrop-filter: blur(12px); -} - -/* Enhanced hover effects */ -.dark-mode-toggle-premium:hover .sun-icon svg, -.dark-mode-toggle-premium:hover .moon-icon svg { - filter: drop-shadow(0 0 8px currentColor); - transform: scale(1.1); -} - -/* Smooth gradient transitions */ -.dark-mode-toggle-premium .bg-gradient-to-r { - transition: opacity 0.5s ease-in-out; -} - -/* Better shadow effects */ -.dark-mode-toggle-premium .shadow-lg { - box-shadow: - 0 10px 15px -3px rgba(0, 0, 0, 0.1), - 0 4px 6px -2px rgba(0, 0, 0, 0.05); -} - -.dark .dark-mode-toggle-premium .shadow-lg { - box-shadow: - 0 10px 15px -3px rgba(0, 0, 0, 0.3), - 0 4px 6px -2px rgba(0, 0, 0, 0.2); -} - -/* Rotation animation for smooth icon transitions */ -@keyframes icon-rotate-in { - 0% { - opacity: 0; - transform: rotate(-90deg) scale(0.8); - } - 100% { - opacity: 1; - transform: rotate(0deg) scale(1); - } -} - -.dark-mode-toggle-premium .sun-icon.icon-enter, -.dark-mode-toggle-premium .moon-icon.icon-enter { - animation: icon-rotate-in 0.5s ease-out forwards; -} - -/* Active state animation */ -.dark-mode-toggle-premium:active > div { - transform: scale(0.95); - transition: transform 0.1s ease-out; -} - -/* User Menu Button - Neues Design */ -.user-menu-button-new { - @apply flex items-center space-x-2 rounded-lg p-1.5 transition-all duration-300; - background: rgba(241, 245, 249, 0.6); - border: 1px solid rgba(255, 255, 255, 0.6); - box-shadow: - 0 2px 10px rgba(0, 0, 0, 0.04), - 0 1px 2px rgba(0, 0, 0, 0.02); -} - -.user-menu-button-new:hover { - @apply transform -translate-y-0.5; - background: rgba(241, 245, 249, 0.8); - box-shadow: - 0 10px 20px rgba(0, 0, 0, 0.06), - 0 2px 6px rgba(0, 0, 0, 0.04); -} - -.dark .user-menu-button-new { - background: rgba(30, 41, 59, 0.6); - border: 1px solid rgba(255, 255, 255, 0.08); - box-shadow: - 0 2px 10px rgba(0, 0, 0, 0.15), - 0 1px 2px rgba(0, 0, 0, 0.1); -} - -.dark .user-menu-button-new:hover { - background: rgba(30, 41, 59, 0.8); - box-shadow: - 0 10px 20px rgba(0, 0, 0, 0.15), - 0 2px 6px rgba(0, 0, 0, 0.1); -} - -/* User Avatar - Neues Design */ -.user-avatar-new { - @apply h-8 w-8 rounded-full flex items-center justify-center text-white font-semibold text-sm shadow-md transition-all duration-300; - background: linear-gradient(135deg, #000000, #333333); - box-shadow: - 0 2px 6px rgba(0, 0, 0, 0.2), - 0 1px 3px rgba(0, 0, 0, 0.1); -} - -.dark .user-avatar-new { - background: linear-gradient(135deg, #f8fafc, #e2e8f0); - color: #0f172a; - box-shadow: - 0 2px 6px rgba(0, 0, 0, 0.3), - 0 1px 3px rgba(0, 0, 0, 0.2); -} - -/* Login Button - Neues Design */ -.login-button-new { - @apply flex items-center px-4 py-2 rounded-lg text-sm font-medium shadow-sm transition-all duration-300; - background: #000000; - color: #ffffff; - border: 1px solid rgba(255, 255, 255, 0.1); - box-shadow: - 0 2px 10px rgba(0, 0, 0, 0.1), - 0 1px 2px rgba(0, 0, 0, 0.08); -} - -.login-button-new:hover { - @apply transform -translate-y-0.5; - background: #333333; - box-shadow: - 0 10px 20px rgba(0, 0, 0, 0.15), - 0 3px 6px rgba(0, 0, 0, 0.1); -} - -.dark .login-button-new { - background: #ffffff; - color: #000000; - border: 1px solid rgba(0, 0, 0, 0.1); - box-shadow: - 0 2px 10px rgba(0, 0, 0, 0.2), - 0 1px 2px rgba(0, 0, 0, 0.15); -} - -.dark .login-button-new:hover { - background: #f1f5f9; - box-shadow: - 0 10px 20px rgba(0, 0, 0, 0.25), - 0 3px 6px rgba(0, 0, 0, 0.2); -} - -/* Mobile Menu - Neues Design */ -.mobile-menu-new { - @apply w-full overflow-hidden transition-all duration-300 z-40; - background: rgba(255, 255, 255, 0.8); - backdrop-filter: blur(24px); - -webkit-backdrop-filter: blur(24px); - box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06); - border-bottom: 1px solid rgba(241, 245, 249, 0.8); - max-height: 0; - opacity: 0; -} - -.mobile-menu-new.open { - max-height: 500px; - opacity: 1; - border-bottom: 1px solid rgba(241, 245, 249, 0.8); -} - -.dark .mobile-menu-new { - background: rgba(15, 23, 42, 0.8); - box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); - border-bottom: 1px solid rgba(30, 41, 59, 0.8); -} - -.mobile-nav-item { - @apply flex items-center space-x-3 px-4 py-3 rounded-lg text-slate-800 dark:text-slate-200 transition-all duration-300; -} - -.mobile-nav-item:hover { - background: rgba(241, 245, 249, 0.8); -} - -.dark .mobile-nav-item:hover { - background: rgba(30, 41, 59, 0.6); -} - -.mobile-nav-item.active { - background: rgba(241, 245, 249, 0.9); - color: #000000; - font-weight: 500; -} - -.dark .mobile-nav-item.active { - background: rgba(30, 41, 59, 0.8); - color: #ffffff; -} - -/* Dashboard Stat Cards mit schwarzem Hintergrund im Dark Mode */ -.mb-stat-card { - background: linear-gradient(135deg, rgba(240, 249, 255, 0.6) 0%, rgba(230, 242, 255, 0.6) 100%); - color: #0f172a; - position: relative; - overflow: hidden; - border: none; - border-radius: var(--card-radius); - backdrop-filter: blur(20px) saturate(180%) brightness(110%); - -webkit-backdrop-filter: blur(20px) saturate(180%) brightness(110%); - box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.1); - padding: 1.5rem; - margin: 1rem; - transition: transform 0.3s ease, box-shadow 0.3s ease; -} - -.dark .mb-stat-card { - background: linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, rgba(10, 10, 10, 0.7) 100%); - color: var(--text-primary, #f8fafc); - box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.05); -} - -/* Stats und Jobs Page Card Styles */ -.stats-card, .job-card { - @apply bg-white/60 dark:bg-black/80 backdrop-blur-2xl border border-gray-200/70 dark:border-slate-700/20 rounded-xl shadow-2xl transition-all duration-300; - backdrop-filter: blur(24px) saturate(200%) brightness(120%); - -webkit-backdrop-filter: blur(24px) saturate(200%) brightness(120%); - box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.1); - border-radius: var(--card-radius); -} - -/* Footer Styling - Verstärktes Glassmorphism */ -footer { - @apply transition-all duration-300; - background: rgba(255, 255, 255, 0.1); - backdrop-filter: blur(30px) saturate(180%) brightness(120%); - -webkit-backdrop-filter: blur(30px) saturate(180%) brightness(120%); - border-top: 1px solid rgba(255, 255, 255, 0.2); - box-shadow: - 0 -8px 32px rgba(0, 0, 0, 0.1), - 0 -2px 8px rgba(0, 0, 0, 0.05), - inset 0 1px 0 rgba(255, 255, 255, 0.2), - 0 0 0 1px rgba(255, 255, 255, 0.05); -} - -.dark footer { - background: rgba(0, 0, 0, 0.3); - backdrop-filter: blur(30px) saturate(160%) brightness(110%); - -webkit-backdrop-filter: blur(30px) saturate(160%) brightness(110%); - border-top: 1px solid rgba(255, 255, 255, 0.1); - box-shadow: - 0 -8px 32px rgba(0, 0, 0, 0.3), - 0 -2px 8px rgba(0, 0, 0, 0.2), - inset 0 1px 0 rgba(255, 255, 255, 0.1), - 0 0 0 1px rgba(255, 255, 255, 0.03); -} - -/* Dropdown Pfeil Animation */ -.dropdown-arrow { - @apply transition-transform duration-300; -} - -/* Mercedes-Benz Hintergrund mit Star-Pattern */ -.mercedes-star-bg { - position: relative; -} - -.mercedes-star-bg::after { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' width='80' height='80' opacity='0.05' fill='currentColor'%3E%3Cpath d='M58.6,4.5C53,1.6,46.7,0,40,0c-6.7,0-13,1.6-18.6,4.5v0C8.7,11.2,0,24.6,0,40c0,15.4,8.7,28.8,21.5,35.5C27,78.3,33.3,80,40,80c6.7,0,12.9-1.7,18.5-4.6C71.3,68.8,80,55.4,80,40C80,24.6,71.3,11.2,58.6,4.5z M4,40c0-13.1,7-24.5,17.5-30.9v0C26.6,6,32.5,4.2,39,4l-4.5,32.7L21.5,46.8v0L8.3,57.1C5.6,52,4,46.2,4,40z M58.6,70.8C53.1,74.1,46.8,76,40,76c-6.8,0-13.2-1.9-18.6-5.2c-4.9-2.9-8.9-6.9-11.9-11.7l11.9-4.9v0L40,46.6l18.6,7.5v0l12,4.9C67.6,63.9,63.4,67.9,58.6,70.8z M58.6,46.8L58.6,46.8l-12.9-10L41.1,4c6.3,0.2,12.3,2,17.4,5.1v0C69,15.4,76,26.9,76,40c0,6.2-1.5,12-4.3,17.1L58.6,46.8z'/%3E%3C/svg%3E"); - background-position: center; - background-repeat: repeat; - background-size: 40px 40px; - z-index: -1; - opacity: 0.05; -} - -.dark .mercedes-star-bg::after { - opacity: 0.02; - filter: invert(1) brightness(0.4); -} - -/* Zusätzliche Glassmorphism-Verbesserungen */ -.glass-effect { - backdrop-filter: blur(20px) saturate(180%) brightness(110%); - -webkit-backdrop-filter: blur(20px) saturate(180%) brightness(110%); - background: rgba(255, 255, 255, 0.1); - border: 1px solid rgba(255, 255, 255, 0.2); - box-shadow: - 0 8px 32px rgba(0, 0, 0, 0.1), - inset 0 1px 0 rgba(255, 255, 255, 0.3); -} - -.dark .glass-effect { - background: rgba(0, 0, 0, 0.3); - border: 1px solid rgba(255, 255, 255, 0.1); - box-shadow: - 0 8px 32px rgba(0, 0, 0, 0.3), - inset 0 1px 0 rgba(255, 255, 255, 0.15); -} - -/* Verbesserte Hover-Effekte für alle interaktiven Elemente */ -.glass-hover { - transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); -} - -.glass-hover:hover { - transform: translateY(-2px); - backdrop-filter: blur(25px) saturate(200%) brightness(120%); - -webkit-backdrop-filter: blur(25px) saturate(200%) brightness(120%); - box-shadow: - 0 20px 40px rgba(0, 0, 0, 0.15), - 0 8px 16px rgba(0, 0, 0, 0.1), - inset 0 1px 0 rgba(255, 255, 255, 0.4); -} - -.dark .glass-hover:hover { - box-shadow: - 0 20px 40px rgba(0, 0, 0, 0.4), - 0 8px 16px rgba(0, 0, 0, 0.3), - inset 0 1px 0 rgba(255, 255, 255, 0.2); -} - -/* Neue verbesserte Drucker-Karten für die Drucker-Ansicht */ -.printer-card-new { - @apply bg-gradient-to-br from-white/90 to-white/70 dark:from-slate-800/90 dark:to-slate-900/70 backdrop-blur-2xl rounded-xl border border-gray-200/70 dark:border-slate-700/30 p-5 shadow-2xl transition-all duration-300 hover:-translate-y-1 relative overflow-hidden; - box-shadow: - 0 20px 40px rgba(0, 0, 0, 0.08), - 0 10px 20px rgba(0, 0, 0, 0.06), - 0 0 0 1px rgba(255, 255, 255, 0.1); - border-radius: var(--card-radius, 1rem); -} - -.dark .printer-card-new { - box-shadow: - 0 20px 40px rgba(0, 0, 0, 0.4), - 0 10px 20px rgba(0, 0, 0, 0.3), - 0 0 0 1px rgba(255, 255, 255, 0.05); -} - -/* Online Drucker-Karten mit stärkerem visuellen Unterschied */ -.printer-card-new.online { - @apply bg-gradient-to-br from-green-50/90 to-emerald-50/80 dark:from-green-900/30 dark:to-emerald-900/20 border-green-200 dark:border-green-700/50; - box-shadow: - 0 20px 40px rgba(0, 122, 85, 0.08), - 0 10px 20px rgba(0, 122, 85, 0.06), - 0 0 0 1px rgba(209, 250, 229, 0.4); -} - -.dark .printer-card-new.online { - box-shadow: - 0 20px 40px rgba(0, 0, 0, 0.3), - 0 10px 20px rgba(0, 0, 0, 0.2), - 0 0 0 1px rgba(16, 185, 129, 0.2); -} - -/* Status-Badge mit verbesserten Styles */ -.status-badge-new { - @apply px-2.5 py-1 rounded-full text-xs font-medium inline-flex items-center space-x-1 shadow-sm; - background: rgba(255, 255, 255, 0.9); - backdrop-filter: blur(8px); - -webkit-backdrop-filter: blur(8px); - box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); -} - -.dark .status-badge-new { - background: rgba(30, 41, 59, 0.7); - box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); -} - -.status-badge-new.online { - @apply bg-green-100/90 text-green-800 dark:bg-green-900/60 dark:text-green-300; -} - -.status-badge-new.offline { - @apply bg-red-100/90 text-red-800 dark:bg-red-900/60 dark:text-red-300; -} - -/* Verbesserte Filterleiste */ -.filter-bar-new { - @apply bg-white/80 dark:bg-slate-800/80 backdrop-blur-xl rounded-lg p-1.5 border border-gray-200/60 dark:border-slate-700/30 shadow-xl; - box-shadow: - 0 10px 25px rgba(0, 0, 0, 0.05), - 0 5px 10px rgba(0, 0, 0, 0.03), - 0 0 0 1px rgba(255, 255, 255, 0.2); -} - -.dark .filter-bar-new { - box-shadow: - 0 10px 25px rgba(0, 0, 0, 0.2), - 0 5px 10px rgba(0, 0, 0, 0.15), - 0 0 0 1px rgba(255, 255, 255, 0.05); -} - -.filter-btn-new { - @apply px-3.5 py-2 text-sm rounded-md transition-all duration-300 font-medium; -} - -.filter-btn-new.active { - @apply bg-black text-white dark:bg-white dark:text-slate-900 shadow-md; - box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); -} - -.dark .filter-btn-new.active { - box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); -} - -/* Verbesserte Aktionsschaltflächen */ -.action-btn-new { - @apply flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg font-medium text-sm transition-all duration-300 shadow-md hover:-translate-y-0.5; - backdrop-filter: blur(8px); - -webkit-backdrop-filter: blur(8px); -} - -.action-btn-new.primary { - @apply bg-indigo-600 hover:bg-indigo-700 text-white dark:bg-indigo-600 dark:hover:bg-indigo-500; - box-shadow: 0 5px 15px rgba(79, 70, 229, 0.2); -} - -.dark .action-btn-new.primary { - box-shadow: 0 5px 15px rgba(79, 70, 229, 0.3); -} - -.action-btn-new.success { - @apply bg-green-600 hover:bg-green-700 text-white dark:bg-green-600 dark:hover:bg-green-500; - box-shadow: 0 5px 15px rgba(16, 185, 129, 0.2); -} - -.dark .action-btn-new.success { - box-shadow: 0 5px 15px rgba(16, 185, 129, 0.3); -} - -.action-btn-new.danger { - @apply bg-red-600 hover:bg-red-700 text-white dark:bg-red-600 dark:hover:bg-red-500; - box-shadow: 0 5px 15px rgba(239, 68, 68, 0.2); -} - -.dark .action-btn-new.danger { - box-shadow: 0 5px 15px rgba(239, 68, 68, 0.3); -} - -/* Informationszeilen in Drucker-Karten */ -.printer-info-row { - @apply flex items-center gap-2 text-xs sm:text-sm text-slate-700 dark:text-slate-300 mb-1.5; -} - -.printer-info-icon { - @apply w-3.5 h-3.5 sm:w-4 sm:h-4 text-slate-500 dark:text-slate-400 flex-shrink-0; -} - -/* Online-Indikator mit Pulseffekt */ -.online-indicator { - @apply absolute top-2.5 right-2.5 w-3 h-3 bg-green-500 rounded-full shadow-lg; - box-shadow: 0 0 0 rgba(16, 185, 129, 0.6); - animation: pulse-ring 2s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite; -} - -@keyframes pulse-ring { - 0% { - box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6); - } - 70% { - box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); - } - 100% { - box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); - } -} - -/* Header mit verbesserten Status-Anzeigen */ -.status-overview-new { - @apply flex flex-wrap gap-3 text-xs sm:text-sm p-3 bg-white/60 dark:bg-slate-800/60 backdrop-blur-xl rounded-lg border border-gray-200/60 dark:border-slate-700/30 shadow-lg; - box-shadow: - 0 10px 25px rgba(0, 0, 0, 0.04), - 0 5px 10px rgba(0, 0, 0, 0.02), - 0 0 0 1px rgba(255, 255, 255, 0.1); -} - -.dark .status-overview-new { - box-shadow: - 0 10px 25px rgba(0, 0, 0, 0.15), - 0 5px 10px rgba(0, 0, 0, 0.1), - 0 0 0 1px rgba(255, 255, 255, 0.03); -} - -.status-dot { - @apply w-2.5 h-2.5 rounded-full; -} - -.status-dot.online { - @apply bg-green-500; - animation: pulse-dot 2s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite; -} - -.status-dot.offline { - @apply bg-red-500; -} - -@keyframes pulse-dot { - 0% { - transform: scale(0.95); - opacity: 1; - } - 50% { - transform: scale(1.1); - opacity: 0.8; - } - 100% { - transform: scale(0.95); - opacity: 1; - } -} - -/* Verbesserte Modals mit Glassmorphism */ -.modal-new { - @apply fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/40 backdrop-blur-sm; -} - .modal-content-new { @apply bg-white/90 dark:bg-slate-800/90 backdrop-blur-2xl rounded-2xl p-6 w-full max-w-md shadow-2xl border border-gray-200/60 dark:border-slate-700/30 transform transition-all duration-300; box-shadow: diff --git a/backend/app/static/css/tailwind.min.css b/backend/app/static/css/tailwind.min.css index 97c21beb1..6a6b0b62c 100644 --- a/backend/app/static/css/tailwind.min.css +++ b/backend/app/static/css/tailwind.min.css @@ -1 +1,10965 @@ -*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}:root{--color-bg-primary:#fff;--color-bg-secondary:#f8fafc;--color-text-primary:#0f172a;--color-text-secondary:#334155;--color-text-muted:#64748b;--color-border-primary:#e2e8f0;--color-accent:#000;--color-accent-hover:#333;--color-accent-text:#fff;--color-shadow:rgba(0,0,0,.1);--card-radius:1rem}.dark{--color-bg-primary:#000;--color-bg-secondary:#0a0a0a;--color-text-primary:#fff;--color-text-secondary:#e2e8f0;--color-text-muted:#94a3b8;--color-border-primary:#1a1a1a;--color-accent:#fff;--color-accent-hover:#f0f0f0;--color-accent-text:#000;--color-shadow:rgba(0,0,0,.8);--mb-black:#000}body{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1));--tw-text-opacity:1;color:rgb(15 23 42/var(--tw-text-opacity,1));transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.3s}body:is(.dark *){--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity,1));--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}body{position:relative;min-height:100vh}.dark body{background:linear-gradient(135deg,#000,#0a0a0a 50%,#000)}nav{border-bottom-width:1px;border-color:rgba(229,231,235,.7);background-color:hsla(0,0%,100%,.6);--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);--tw-backdrop-blur:blur(24px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.3s}.dark-mode-toggle-premium nav{box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05)}.dark .dark-mode-toggle-premium nav{box-shadow:0 10px 15px -3px rgba(0,0,0,.3),0 4px 6px -2px rgba(0,0,0,.2)}nav:is(.dark *){border-color:rgba(51,65,85,.2);background-color:rgba(0,0,0,.6)}nav{backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);box-shadow:0 8px 32px rgba(0,0,0,.15),0 0 0 1px hsla(0,0%,100%,.05)}#user-dropdown{position:absolute;right:0;z-index:50;margin-top:.5rem;width:16rem;border-radius:.75rem;border-width:1px;border-color:rgba(229,231,235,.7);background-color:hsla(0,0%,100%,.6);--tw-shadow:0 25px 50px -12px rgba(0,0,0,.25);--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);--tw-backdrop-blur:blur(24px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s}#user-dropdown:is(.dark *){border-color:rgba(51,65,85,.2);background-color:rgba(0,0,0,.6)}#user-dropdown{backdrop-filter:blur(20px) saturate(180%) brightness(110%);-webkit-backdrop-filter:blur(20px) saturate(180%) brightness(110%);box-shadow:0 20px 40px rgba(0,0,0,.2),0 0 0 1px hsla(0,0%,100%,.1);animation:fadeIn .2s ease-out forwards}.\!container{width:100%!important}.container{width:100%}@media (min-width:640px){.\!container{max-width:640px!important}.container{max-width:640px}}@media (min-width:768px){.\!container{max-width:768px!important}.container{max-width:768px}}@media (min-width:1024px){.\!container{max-width:1024px!important}.container{max-width:1024px}}@media (min-width:1280px){.\!container{max-width:1280px!important}.container{max-width:1280px}}@media (min-width:1536px){.\!container{max-width:1536px!important}.container{max-width:1536px}}.dark .bg-dark-card{background-color:#1e293b;--tw-bg-opacity:1;background-color:rgb(30 41 59/var(--tw-bg-opacity,1));transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.bg-dark-surface{background-color:#1e293b}.transition-all-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.3s}.admin-container{margin-left:auto;margin-right:auto;max-width:80rem;padding:1rem}@media (min-width:768px){.admin-container{padding:2rem}}.admin-stats{margin-bottom:2rem;display:grid;grid-template-columns:repeat(1,minmax(0,1fr));gap:1rem}@media (min-width:640px){.admin-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width:1024px){.admin-stats{grid-template-columns:repeat(4,minmax(0,1fr))}}.stat-card{position:relative;overflow:hidden;border-radius:.75rem;border-width:1px;border-color:rgba(229,231,235,.6);background-color:hsla(0,0%,100%,.6);padding:1.25rem;--tw-shadow:0 25px 50px -12px rgba(0,0,0,.25);--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color);--tw-backdrop-blur:blur(24px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.3s}.stat-card,.stat-card:hover{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.stat-card:hover{--tw-translate-y:-0.25rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));--tw-shadow:0 25px 50px -12px rgba(0,0,0,.25);--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color)}.stat-card:is(.dark *){border-color:rgba(51,65,85,.3);background-color:rgba(0,0,0,.7)}.stat-card{backdrop-filter:blur(20px) saturate(180%) brightness(110%);-webkit-backdrop-filter:blur(20px) saturate(180%) brightness(110%);box-shadow:0 25px 50px rgba(0,0,0,.15),0 0 0 1px hsla(0,0%,100%,.1)}.stat-icon{position:absolute;top:1rem;right:1rem;font-size:2.25rem;line-height:2.5rem;opacity:.15}.stat-title{margin-bottom:.5rem;font-size:.875rem;line-height:1.25rem;font-weight:500;text-transform:uppercase;--tw-text-opacity:1;color:rgb(100 116 139/var(--tw-text-opacity,1))}.stat-title:is(.dark *){--tw-text-opacity:1;color:rgb(148 163 184/var(--tw-text-opacity,1))}.stat-value{margin-bottom:.25rem;font-size:1.5rem;line-height:2rem;font-weight:700;--tw-text-opacity:1;color:rgb(15 23 42/var(--tw-text-opacity,1))}.stat-value:is(.dark *){--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.stat-desc{font-size:.875rem;line-height:1.25rem;--tw-text-opacity:1;color:rgb(100 116 139/var(--tw-text-opacity,1))}.stat-desc:is(.dark *){--tw-text-opacity:1;color:rgb(148 163 184/var(--tw-text-opacity,1))}.nav-tabs{margin-bottom:1rem;display:flex;overflow-x:auto;border-bottom-width:1px;--tw-border-opacity:1;border-color:rgb(229 231 235/var(--tw-border-opacity,1))}.nav-tabs:is(.dark *){border-color:rgba(51,65,85,.3)}.nav-tab{cursor:pointer;white-space:nowrap;border-bottom-width:2px;border-color:transparent;padding:1rem 1.5rem;--tw-text-opacity:1;color:rgb(71 85 105/var(--tw-text-opacity,1));transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s}.nav-tab:hover{--tw-bg-opacity:1;background-color:rgb(248 250 252/var(--tw-bg-opacity,1));--tw-text-opacity:1;color:rgb(15 23 42/var(--tw-text-opacity,1))}.nav-tab:is(.dark *){--tw-text-opacity:1;color:rgb(203 213 225/var(--tw-text-opacity,1))}.nav-tab:hover:is(.dark *){background-color:rgba(30,41,59,.5);--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.nav-tab.active{border-bottom-width:2px;--tw-border-opacity:1;border-color:rgb(0 0 0/var(--tw-border-opacity,1));font-weight:500;--tw-text-opacity:1;color:rgb(15 23 42/var(--tw-text-opacity,1))}.nav-tab.active:is(.dark *){--tw-border-opacity:1;border-color:rgb(255 255 255/var(--tw-border-opacity,1));--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.tab-content{margin-top:2rem}.tab-pane{display:none}.dark-mode-toggle-new .moon-icon:not(.tab-pane),.dark-mode-toggle-new .sun-icon:not(.tab-pane){animation:spin-in .5s cubic-bezier(.25,1,.5,1) forwards}.tab-pane.active{display:block}.form-group{margin-bottom:1rem}.form-label{margin-bottom:.5rem;display:block;font-size:.875rem;line-height:1.25rem;font-weight:500;--tw-text-opacity:1;color:rgb(51 65 85/var(--tw-text-opacity,1))}.form-label:is(.dark *){--tw-text-opacity:1;color:rgb(203 213 225/var(--tw-text-opacity,1))}.form-input,.form-select,.form-textarea{width:100%;border-radius:.5rem;border-width:1px;border-color:rgba(209,213,219,.6);background-color:hsla(0,0%,100%,.6);padding:.5rem .75rem;--tw-text-opacity:1;color:rgb(15 23 42/var(--tw-text-opacity,1))}.form-input::-moz-placeholder,.form-select::-moz-placeholder,.form-textarea::-moz-placeholder{--tw-placeholder-opacity:1;color:rgb(156 163 175/var(--tw-placeholder-opacity,1))}.form-input::placeholder,.form-select::placeholder,.form-textarea::placeholder{--tw-placeholder-opacity:1;color:rgb(156 163 175/var(--tw-placeholder-opacity,1))}.form-input,.form-select,.form-textarea{--tw-backdrop-blur:blur(16px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s}.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:transparent;outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:1;--tw-ring-color:rgb(100 116 139/var(--tw-ring-opacity,1))}.form-input:is(.dark *),.form-select:is(.dark *),.form-textarea:is(.dark *){border-color:rgba(71,85,105,.6);background-color:rgba(30,41,59,.6);--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.form-input,.form-select,.form-textarea{backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%);box-shadow:0 10px 20px rgba(0,0,0,.1),0 0 0 1px hsla(0,0%,100%,.05)}.admin-table{min-width:100%}.admin-table>:not([hidden])~:not([hidden]){--tw-divide-y-reverse:0;border-top-width:calc(1px*(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(1px*var(--tw-divide-y-reverse));--tw-divide-opacity:1;border-color:rgb(229 231 235/var(--tw-divide-opacity,1))}.admin-table:is(.dark *)>:not([hidden])~:not([hidden]){--tw-divide-opacity:1;border-color:rgb(51 65 85/var(--tw-divide-opacity,1))}.admin-table thead{--tw-bg-opacity:1;background-color:rgb(248 250 252/var(--tw-bg-opacity,1))}.admin-table thead:is(.dark *){--tw-bg-opacity:1;background-color:rgb(30 41 59/var(--tw-bg-opacity,1))}.admin-table th{padding:.75rem 1.5rem;text-align:left;font-size:.75rem;line-height:1rem;font-weight:500;text-transform:uppercase;letter-spacing:.05em;--tw-text-opacity:1;color:rgb(100 116 139/var(--tw-text-opacity,1))}.admin-table th:is(.dark *){--tw-text-opacity:1;color:rgb(148 163 184/var(--tw-text-opacity,1))}.admin-table tbody>:not([hidden])~:not([hidden]){--tw-divide-y-reverse:0;border-top-width:calc(1px*(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(1px*var(--tw-divide-y-reverse));--tw-divide-opacity:1;border-color:rgb(229 231 235/var(--tw-divide-opacity,1))}.admin-table tbody{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.admin-table tbody:is(.dark *){background-color:#1e293b}.admin-table tbody:is(.dark *)>:not([hidden])~:not([hidden]){--tw-divide-opacity:1;border-color:rgb(51 65 85/var(--tw-divide-opacity,1))}.admin-table tbody:is(.dark *){--tw-bg-opacity:1;background-color:rgb(30 41 59/var(--tw-bg-opacity,1))}.admin-table tr{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.admin-table tr:hover{--tw-bg-opacity:1;background-color:rgb(248 250 252/var(--tw-bg-opacity,1))}.admin-table tr:hover:is(.dark *){background-color:rgba(51,65,85,.5)}.admin-table td{white-space:nowrap;padding:1rem 1.5rem;font-size:.875rem;line-height:1.25rem;--tw-text-opacity:1;color:rgb(15 23 42/var(--tw-text-opacity,1))}.admin-table td:is(.dark *){--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.badge{display:inline-flex;border-radius:9999px;padding-left:.5rem;padding-right:.5rem;font-size:.75rem;font-weight:600;line-height:1.25rem}.badge-success{--tw-bg-opacity:1;background-color:rgb(220 252 231/var(--tw-bg-opacity,1));--tw-text-opacity:1;color:rgb(22 101 52/var(--tw-text-opacity,1))}.badge-success:is(.dark *){--tw-bg-opacity:1;background-color:rgb(20 83 45/var(--tw-bg-opacity,1));--tw-text-opacity:1;color:rgb(187 247 208/var(--tw-text-opacity,1))}.badge-error{--tw-bg-opacity:1;background-color:rgb(254 226 226/var(--tw-bg-opacity,1));--tw-text-opacity:1;color:rgb(153 27 27/var(--tw-text-opacity,1))}.badge-error:is(.dark *){--tw-bg-opacity:1;background-color:rgb(127 29 29/var(--tw-bg-opacity,1));--tw-text-opacity:1;color:rgb(254 202 202/var(--tw-text-opacity,1))}.badge-warning{--tw-bg-opacity:1;background-color:rgb(254 249 195/var(--tw-bg-opacity,1));--tw-text-opacity:1;color:rgb(133 77 14/var(--tw-text-opacity,1))}.badge-warning:is(.dark *){--tw-bg-opacity:1;background-color:rgb(113 63 18/var(--tw-bg-opacity,1));--tw-text-opacity:1;color:rgb(254 240 138/var(--tw-text-opacity,1))}.badge-info{--tw-bg-opacity:1;background-color:rgb(219 234 254/var(--tw-bg-opacity,1));--tw-text-opacity:1;color:rgb(30 64 175/var(--tw-text-opacity,1))}.badge-info:is(.dark *){--tw-bg-opacity:1;background-color:rgb(30 58 138/var(--tw-bg-opacity,1));--tw-text-opacity:1;color:rgb(191 219 254/var(--tw-text-opacity,1))}.printer-card{border-radius:.75rem;border-width:1px;border-color:rgba(229,231,235,.6);background-color:hsla(0,0%,100%,.6);padding:1.5rem;--tw-shadow:0 25px 50px -12px rgba(0,0,0,.25);--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color);--tw-backdrop-blur:blur(24px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.3s}.printer-card,.printer-card:hover{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.printer-card:hover{--tw-translate-y:-0.25rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));--tw-shadow:0 25px 50px -12px rgba(0,0,0,.25);--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color)}.printer-card:is(.dark *){border-color:rgba(51,65,85,.3);background-color:rgba(0,0,0,.7)}.printer-card{backdrop-filter:blur(20px) saturate(180%) brightness(110%);-webkit-backdrop-filter:blur(20px) saturate(180%) brightness(110%);box-shadow:0 25px 50px rgba(0,0,0,.15),0 0 0 1px hsla(0,0%,100%,.1)}.printer-header{margin-bottom:1rem;display:flex;align-items:center;justify-content:space-between}.printer-name{font-size:1.25rem;line-height:1.75rem;font-weight:700;--tw-text-opacity:1;color:rgb(15 23 42/var(--tw-text-opacity,1))}.printer-name:is(.dark *){--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.printer-actions{display:flex}.printer-actions>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(.5rem*var(--tw-space-x-reverse));margin-left:calc(.5rem*(1 - var(--tw-space-x-reverse)))}.printer-info{margin-bottom:1rem;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.printer-status{margin-top:1rem;display:flex;align-items:center}.status-indicator{margin-right:.5rem;height:.75rem;width:.75rem;border-radius:9999px}.status-running{--tw-bg-opacity:1;background-color:rgb(34 197 94/var(--tw-bg-opacity,1));animation:pulse 2s infinite}.status-stopped{--tw-bg-opacity:1;background-color:rgb(239 68 68/var(--tw-bg-opacity,1))}.log-entry{margin-bottom:.5rem;border-top-right-radius:.5rem;border-bottom-right-radius:.5rem;border-left-width:4px;--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1));padding:.75rem;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.log-entry:hover{--tw-bg-opacity:1;background-color:rgb(248 250 252/var(--tw-bg-opacity,1))}.log-entry:is(.dark *){--tw-bg-opacity:1;background-color:rgb(30 41 59/var(--tw-bg-opacity,1))}.log-entry:hover:is(.dark *){--tw-bg-opacity:1;background-color:rgb(51 65 85/var(--tw-bg-opacity,1))}.log-debug{--tw-border-opacity:1;border-color:rgb(156 163 175/var(--tw-border-opacity,1))}.log-debug:is(.dark *){--tw-border-opacity:1;border-color:rgb(107 114 128/var(--tw-border-opacity,1))}.log-info{--tw-border-opacity:1;border-color:rgb(96 165 250/var(--tw-border-opacity,1))}.log-info:is(.dark *){--tw-border-opacity:1;border-color:rgb(59 130 246/var(--tw-border-opacity,1))}.log-warning{--tw-border-opacity:1;border-color:rgb(250 204 21/var(--tw-border-opacity,1))}.log-warning:is(.dark *){--tw-border-opacity:1;border-color:rgb(234 179 8/var(--tw-border-opacity,1))}.log-error{--tw-border-opacity:1;border-color:rgb(248 113 113/var(--tw-border-opacity,1))}.log-error:is(.dark *){--tw-border-opacity:1;border-color:rgb(239 68 68/var(--tw-border-opacity,1))}.log-critical{--tw-border-opacity:1;border-color:rgb(192 132 252/var(--tw-border-opacity,1))}.log-critical:is(.dark *){--tw-border-opacity:1;border-color:rgb(168 85 247/var(--tw-border-opacity,1))}.scheduler-status{display:flex;align-items:center;border-radius:.5rem;border-width:1px;--tw-border-opacity:1;border-color:rgb(229 231 235/var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1));padding:1rem;--tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.scheduler-status:is(.dark *){--tw-border-opacity:1;border-color:rgb(51 65 85/var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(30 41 59/var(--tw-bg-opacity,1))}.progress-bar{height:.5rem;width:100%;overflow:hidden;border-radius:9999px;--tw-bg-opacity:1;background-color:rgb(229 231 235/var(--tw-bg-opacity,1))}.progress-bar:is(.dark *){--tw-bg-opacity:1;background-color:rgb(51 65 85/var(--tw-bg-opacity,1))}.progress-bar-fill{height:100%;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.3s}.progress-bar-fill-blue{--tw-bg-opacity:1;background-color:rgb(59 130 246/var(--tw-bg-opacity,1))}.progress-bar-fill-blue:is(.dark *){--tw-bg-opacity:1;background-color:rgb(37 99 235/var(--tw-bg-opacity,1))}.progress-bar-fill-green{--tw-bg-opacity:1;background-color:rgb(34 197 94/var(--tw-bg-opacity,1))}.progress-bar-fill-green:is(.dark *){--tw-bg-opacity:1;background-color:rgb(22 163 74/var(--tw-bg-opacity,1))}.progress-bar-fill-purple{--tw-bg-opacity:1;background-color:rgb(168 85 247/var(--tw-bg-opacity,1))}.progress-bar-fill-purple:is(.dark *){--tw-bg-opacity:1;background-color:rgb(147 51 234/var(--tw-bg-opacity,1))}.\!notification{position:fixed;top:1rem;right:1rem;z-index:50;max-width:28rem;--tw-translate-x:100%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));border-radius:.5rem;border-left-width:4px;--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1));padding:1rem;opacity:0;--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.3s}.dark-mode-toggle-premium .\!notification{box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05)}.dark .dark-mode-toggle-premium .\!notification{box-shadow:0 10px 15px -3px rgba(0,0,0,.3),0 4px 6px -2px rgba(0,0,0,.2)}.\!notification:is(.dark *){--tw-bg-opacity:1;background-color:rgb(30 41 59/var(--tw-bg-opacity,1))}.notification{position:fixed;top:1rem;right:1rem;z-index:50;max-width:28rem;--tw-translate-x:100%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));border-radius:.5rem;border-left-width:4px;--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1));padding:1rem;opacity:0;--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.3s}.dark-mode-toggle-premium .notification{box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05)}.dark .dark-mode-toggle-premium .notification{box-shadow:0 10px 15px -3px rgba(0,0,0,.3),0 4px 6px -2px rgba(0,0,0,.2)}.notification:is(.dark *){--tw-bg-opacity:1;background-color:rgb(30 41 59/var(--tw-bg-opacity,1))}.\!notification.show,.notification.show{--tw-translate-x:0px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));opacity:1}.notification-success{--tw-border-opacity:1;border-color:rgb(34 197 94/var(--tw-border-opacity,1))}.notification-error{--tw-border-opacity:1;border-color:rgb(239 68 68/var(--tw-border-opacity,1))}.notification-warning{--tw-border-opacity:1;border-color:rgb(234 179 8/var(--tw-border-opacity,1))}.notification-info{--tw-border-opacity:1;border-color:rgb(59 130 246/var(--tw-border-opacity,1))}.alert{margin-bottom:1rem;border-radius:.5rem;border-width:1px;padding:1rem}.alert-success{--tw-border-opacity:1;border-color:rgb(34 197 94/var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(240 253 244/var(--tw-bg-opacity,1));--tw-text-opacity:1;color:rgb(22 101 52/var(--tw-text-opacity,1))}.alert-success:is(.dark *){background-color:rgba(20,83,45,.3);--tw-text-opacity:1;color:rgb(187 247 208/var(--tw-text-opacity,1))}.alert-error{--tw-border-opacity:1;border-color:rgb(239 68 68/var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(254 242 242/var(--tw-bg-opacity,1));--tw-text-opacity:1;color:rgb(153 27 27/var(--tw-text-opacity,1))}.alert-error:is(.dark *){background-color:rgba(127,29,29,.3);--tw-text-opacity:1;color:rgb(254 202 202/var(--tw-text-opacity,1))}.alert-warning{--tw-border-opacity:1;border-color:rgb(234 179 8/var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(254 252 232/var(--tw-bg-opacity,1));--tw-text-opacity:1;color:rgb(133 77 14/var(--tw-text-opacity,1))}.alert-warning:is(.dark *){background-color:rgba(113,63,18,.3);--tw-text-opacity:1;color:rgb(254 240 138/var(--tw-text-opacity,1))}.alert-info{--tw-border-opacity:1;border-color:rgb(59 130 246/var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(239 246 255/var(--tw-bg-opacity,1));--tw-text-opacity:1;color:rgb(30 64 175/var(--tw-text-opacity,1))}.alert-info:is(.dark *){background-color:rgba(30,58,138,.3);--tw-text-opacity:1;color:rgb(191 219 254/var(--tw-text-opacity,1))}.btn-primary{border-radius:.5rem;padding:.5rem 1rem;--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1));--tw-shadow:0 25px 50px -12px rgba(0,0,0,.25);--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.3s}.btn-primary:hover{--tw-translate-y:-0.125rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.btn-primary:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:1;--tw-ring-color:rgb(107 114 128/var(--tw-ring-opacity,1));--tw-ring-offset-width:2px}.btn-primary:is(.dark *){--tw-text-opacity:1;color:rgb(15 23 42/var(--tw-text-opacity,1))}.btn-primary{background:rgba(0,0,0,.7);backdrop-filter:blur(20px) saturate(150%) brightness(110%);-webkit-backdrop-filter:blur(20px) saturate(150%) brightness(110%);border:1px solid hsla(0,0%,100%,.2);box-shadow:0 20px 40px rgba(0,0,0,.3),0 8px 16px rgba(0,0,0,.2),inset 0 1px 0 hsla(0,0%,100%,.2),0 0 0 1px hsla(0,0%,100%,.1)}.btn-primary:hover{background:rgba(0,0,0,.9);backdrop-filter:blur(25px) saturate(180%) brightness(120%);-webkit-backdrop-filter:blur(25px) saturate(180%) brightness(120%);border:1px solid hsla(0,0%,100%,.3);box-shadow:0 25px 50px rgba(0,0,0,.4),0 10px 20px rgba(0,0,0,.3),inset 0 1px 0 hsla(0,0%,100%,.3)}.dark .btn-primary{background:hsla(0,0%,100%,.7);border:1px solid rgba(0,0,0,.1);box-shadow:0 20px 40px rgba(0,0,0,.2),0 8px 16px rgba(0,0,0,.1),inset 0 1px 0 hsla(0,0%,100%,.8),0 0 0 1px rgba(0,0,0,.05)}.dark .btn-primary:hover{background:hsla(0,0%,100%,.9);border:1px solid rgba(0,0,0,.15);box-shadow:0 25px 50px rgba(0,0,0,.3),0 10px 20px rgba(0,0,0,.2),inset 0 1px 0 hsla(0,0%,100%,.9)}.btn-secondary{border-radius:.5rem;padding:.5rem 1rem;--tw-text-opacity:1;color:rgb(15 23 42/var(--tw-text-opacity,1));--tw-shadow:0 25px 50px -12px rgba(0,0,0,.25);--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.3s}.btn-secondary:hover{--tw-translate-y:-0.125rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.btn-secondary:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:1;--tw-ring-color:rgb(100 116 139/var(--tw-ring-opacity,1));--tw-ring-offset-width:2px}.btn-secondary:is(.dark *){--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.btn-secondary{background:hsla(0,0%,100%,.3);backdrop-filter:blur(20px) saturate(150%) brightness(110%);-webkit-backdrop-filter:blur(20px) saturate(150%) brightness(110%);border:1px solid hsla(0,0%,100%,.4);box-shadow:0 20px 40px rgba(0,0,0,.15),0 8px 16px rgba(0,0,0,.1),inset 0 1px 0 hsla(0,0%,100%,.5),0 0 0 1px hsla(0,0%,100%,.2)}.btn-secondary:hover{background:hsla(0,0%,100%,.5);backdrop-filter:blur(25px) saturate(180%) brightness(120%);-webkit-backdrop-filter:blur(25px) saturate(180%) brightness(120%);border:1px solid hsla(0,0%,100%,.6);box-shadow:0 25px 50px rgba(0,0,0,.2),0 10px 20px rgba(0,0,0,.15),inset 0 1px 0 hsla(0,0%,100%,.7)}.dark .btn-secondary{background:rgba(0,0,0,.4);border:1px solid hsla(0,0%,100%,.2);box-shadow:0 20px 40px rgba(0,0,0,.3),0 8px 16px rgba(0,0,0,.2),inset 0 1px 0 hsla(0,0%,100%,.2),0 0 0 1px hsla(0,0%,100%,.1)}.dark .btn-secondary:hover{background:rgba(0,0,0,.6);border:1px solid hsla(0,0%,100%,.3);box-shadow:0 25px 50px rgba(0,0,0,.4),0 10px 20px rgba(0,0,0,.3),inset 0 1px 0 hsla(0,0%,100%,.3)}.btn-outline{border-radius:.5rem;border-width:2px;border-color:rgba(0,0,0,.7);padding:.5rem 1rem;--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1));--tw-backdrop-blur:blur(16px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.3s}.btn-outline:hover{background-color:rgba(0,0,0,.7);--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.btn-outline:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:1;--tw-ring-color:rgb(107 114 128/var(--tw-ring-opacity,1));--tw-ring-offset-width:2px}.btn-outline:is(.dark *){border-color:hsla(0,0%,100%,.7);--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.btn-outline:hover:is(.dark *){background-color:hsla(0,0%,100%,.7);--tw-text-opacity:1;color:rgb(15 23 42/var(--tw-text-opacity,1))}.btn-outline{backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%);box-shadow:0 15px 30px rgba(0,0,0,.1),0 0 0 1px hsla(0,0%,100%,.05)}.glass-card{border-radius:.75rem;padding:1.5rem;--tw-shadow:0 25px 50px -12px rgba(0,0,0,.25);--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.3s;background:hsla(0,0%,100%,.15);backdrop-filter:blur(30px) saturate(200%) brightness(120%) contrast(110%);-webkit-backdrop-filter:blur(30px) saturate(200%) brightness(120%) contrast(110%);border:1px solid hsla(0,0%,100%,.3);box-shadow:0 25px 50px rgba(0,0,0,.15),0 8px 16px rgba(0,0,0,.1),inset 0 1px 0 hsla(0,0%,100%,.3),0 0 0 1px hsla(0,0%,100%,.1);border-radius:var(--card-radius)}.dark .glass-card{background:rgba(0,0,0,.3);backdrop-filter:blur(30px) saturate(180%) brightness(110%) contrast(120%);-webkit-backdrop-filter:blur(30px) saturate(180%) brightness(110%) contrast(120%);border:1px solid hsla(0,0%,100%,.15);box-shadow:0 25px 50px rgba(0,0,0,.4),0 8px 16px rgba(0,0,0,.3),inset 0 1px 0 hsla(0,0%,100%,.15),0 0 0 1px hsla(0,0%,100%,.05)}.dashboard-card{border-radius:.75rem;padding:1.5rem;--tw-shadow:0 25px 50px -12px rgba(0,0,0,.25);--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.3s}.dashboard-card:hover{--tw-translate-y:-0.25rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.dashboard-card{background:hsla(0,0%,100%,.12);backdrop-filter:blur(35px) saturate(200%) brightness(125%) contrast(115%);-webkit-backdrop-filter:blur(35px) saturate(200%) brightness(125%) contrast(115%);border:1px solid hsla(0,0%,100%,.25);box-shadow:0 25px 50px rgba(0,0,0,.15),0 8px 16px rgba(0,0,0,.08),inset 0 1px 0 hsla(0,0%,100%,.25),0 0 0 1px hsla(0,0%,100%,.1);border-radius:var(--card-radius)}.dark .dashboard-card{background:rgba(0,0,0,.35);backdrop-filter:blur(35px) saturate(180%) brightness(115%) contrast(125%);-webkit-backdrop-filter:blur(35px) saturate(180%) brightness(115%) contrast(125%);border:1px solid hsla(0,0%,100%,.12);box-shadow:0 25px 50px rgba(0,0,0,.5),0 8px 16px rgba(0,0,0,.3),inset 0 1px 0 hsla(0,0%,100%,.12),0 0 0 1px hsla(0,0%,100%,.05)}.nav-link{display:flex;align-items:center;border-radius:.5rem;padding:.5rem 1rem;font-size:.875rem;line-height:1.25rem;font-weight:500;--tw-text-opacity:1;color:rgb(51 65 85/var(--tw-text-opacity,1));transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s}.nav-link:hover{--tw-bg-opacity:1;background-color:rgb(241 245 249/var(--tw-bg-opacity,1));--tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.nav-link:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:1;--tw-ring-color:rgb(100 116 139/var(--tw-ring-opacity,1));--tw-ring-offset-width:2px}.nav-link:is(.dark *){--tw-text-opacity:1;color:rgb(203 213 225/var(--tw-text-opacity,1))}.nav-link:hover:is(.dark *){background-color:rgba(51,65,85,.5)}.nav-link.active{--tw-bg-opacity:1;background-color:rgb(241 245 249/var(--tw-bg-opacity,1));--tw-text-opacity:1;color:rgb(15 23 42/var(--tw-text-opacity,1));--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.nav-link.active:is(.dark *){--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity,1));--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.navbar{position:sticky;top:0;z-index:50;border-bottom-width:1px;border-color:rgba(229,231,235,.3);--tw-shadow:0 25px 50px -12px rgba(0,0,0,.25);--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);--tw-backdrop-blur:blur(64px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.navbar:is(.dark *){border-color:rgba(71,85,105,.2)}.navbar{background:hsla(0,0%,100%,.15);backdrop-filter:blur(40px) saturate(200%) brightness(130%) contrast(110%);-webkit-backdrop-filter:blur(40px) saturate(200%) brightness(130%) contrast(110%);box-shadow:0 8px 32px rgba(0,0,0,.12),0 2px 8px rgba(0,0,0,.08),inset 0 1px 0 hsla(0,0%,100%,.2),0 0 0 1px hsla(0,0%,100%,.1);border-bottom:1px solid hsla(0,0%,100%,.2);display:flex;justify-content:space-between;align-items:center;padding:.5rem 1rem}.navbar-button{padding:.25rem .5rem;font-size:.875rem;border:none;background:none;cursor:pointer;transition:background-color .3s}.navbar-button:hover{background-color:rgba(0,0,0,.05)}@media (max-width:768px){.navbar{flex-direction:column;padding:.25rem}.navbar-button{width:100%;text-align:center;margin:.25rem 0}}.dark .navbar{background:rgba(0,0,0,.25);backdrop-filter:blur(40px) saturate(180%) brightness(120%) contrast(120%);-webkit-backdrop-filter:blur(40px) saturate(180%) brightness(120%) contrast(120%);box-shadow:0 8px 32px rgba(0,0,0,.6),0 2px 8px rgba(0,0,0,.4),inset 0 1px 0 hsla(0,0%,100%,.1),0 0 0 1px hsla(0,0%,100%,.05);border-bottom:1px solid hsla(0,0%,100%,.1)}.navbar-brand{display:flex;align-items:center}.navbar-brand>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(.5rem*var(--tw-space-x-reverse));margin-left:calc(.5rem*(1 - var(--tw-space-x-reverse)))}.navbar-brand{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.3s}.navbar-brand:hover{--tw-scale-x:1.05;--tw-scale-y:1.05;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.navbar-menu{margin-left:1rem;margin-right:1rem;display:flex;align-items:center;justify-content:center}.navbar-menu>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(.25rem*var(--tw-space-x-reverse));margin-left:calc(.25rem*(1 - var(--tw-space-x-reverse)))}.navbar-menu{border-radius:1rem;border-width:1px;padding:.75rem}@media (min-width:768px){.navbar-menu>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(.75rem*var(--tw-space-x-reverse));margin-left:calc(.75rem*(1 - var(--tw-space-x-reverse)))}}@media (min-width:1024px){.navbar-menu>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(1.5rem*var(--tw-space-x-reverse));margin-left:calc(1.5rem*(1 - var(--tw-space-x-reverse)))}}.navbar-menu{background:hsla(0,0%,100%,.25);border:1px solid hsla(0,0%,100%,.3);box-shadow:0 4px 16px rgba(0,0,0,.1),inset 0 1px 0 hsla(0,0%,100%,.4),0 0 0 1px hsla(0,0%,100%,.1)}.dark .navbar-menu,.navbar-menu{backdrop-filter:blur(20px) saturate(150%) brightness(110%);-webkit-backdrop-filter:blur(20px) saturate(150%) brightness(110%)}.dark .navbar-menu{background:rgba(0,0,0,.4);border:1px solid hsla(0,0%,100%,.15);box-shadow:0 4px 16px rgba(0,0,0,.3),inset 0 1px 0 hsla(0,0%,100%,.2),0 0 0 1px hsla(0,0%,100%,.05)}.navbar-button{border-radius:9999px;padding:.5rem;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.3s}.navbar-button:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-offset-width:2px}.user-menu-button{display:flex;align-items:center}.user-menu-button>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(.5rem*var(--tw-space-x-reverse));margin-left:calc(.5rem*(1 - var(--tw-space-x-reverse)))}.user-menu-button{border-radius:.5rem;padding:.25rem;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.3s}.user-menu-button:hover{background-color:rgba(243,244,246,.8)}.user-menu-button:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:1;--tw-ring-color:rgb(100 116 139/var(--tw-ring-opacity,1));--tw-ring-offset-width:2px}.user-menu-button:hover:is(.dark *){background-color:rgba(51,65,85,.6)}.user-avatar{display:flex;height:2.5rem;width:2.5rem;align-items:center;justify-content:center;border-radius:9999px;--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity,1));font-size:.875rem;line-height:1.25rem;font-weight:700;--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1));--tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color);transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.3s}.user-avatar,.user-avatar:hover{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.user-avatar:hover{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.user-avatar:is(.dark *){--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1));--tw-text-opacity:1;color:rgb(15 23 42/var(--tw-text-opacity,1))}.avatar-large{display:flex;height:3.5rem;width:3.5rem;align-items:center;justify-content:center;border-radius:9999px;--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity,1));font-size:1.125rem;line-height:1.75rem;font-weight:700;--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1));--tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.avatar-large:is(.dark *){--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1));--tw-text-opacity:1;color:rgb(15 23 42/var(--tw-text-opacity,1))}.user-dropdown-item{transition-duration:.3s}.user-dropdown-item:hover{background-color:rgba(243,244,246,.8);--tw-text-opacity:1;color:rgb(15 23 42/var(--tw-text-opacity,1))}.user-dropdown-item:focus{background-color:rgba(243,244,246,.8);outline:2px solid transparent;outline-offset:2px}.user-dropdown-item:is(.dark *){color:rgb(203 213 225/var(--tw-text-opacity,1))}.user-dropdown-item:hover:is(.dark *){background-color:rgba(51,65,85,.6);--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.user-dropdown-item:focus:is(.dark *){background-color:rgba(51,65,85,.6)}.user-dropdown-separator{margin-top:.25rem;margin-bottom:.25rem;border-top-width:1px;border-color:rgba(229,231,235,.8)}.user-dropdown-separator:is(.dark *){border-color:rgba(51,65,85,.3)}.menu-item{display:flex;align-items:center}.menu-item>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(.5rem*var(--tw-space-x-reverse));margin-left:calc(.5rem*(1 - var(--tw-space-x-reverse)))}.menu-item{border-radius:.75rem;padding:.625rem 1rem;--tw-text-opacity:1;color:rgb(51 65 85/var(--tw-text-opacity,1));transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.3s}.menu-item:is(.dark *){--tw-text-opacity:1;color:rgb(203 213 225/var(--tw-text-opacity,1))}.menu-item{background:hsla(0,0%,100%,.1);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid hsla(0,0%,100%,.2);box-shadow:0 2px 8px rgba(0,0,0,.05)}.menu-item:hover{--tw-text-opacity:1;color:rgb(15 23 42/var(--tw-text-opacity,1))}.menu-item:hover:is(.dark *){--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.menu-item:hover{background:hsla(0,0%,100%,.3);backdrop-filter:blur(15px) saturate(150%);-webkit-backdrop-filter:blur(15px) saturate(150%);border:1px solid hsla(0,0%,100%,.4);box-shadow:0 4px 16px rgba(0,0,0,.1);transform:translateY(-1px)}.dark .menu-item{background:rgba(0,0,0,.2);border:1px solid hsla(0,0%,100%,.1);box-shadow:0 2px 8px rgba(0,0,0,.2)}.dark .menu-item:hover{background:rgba(0,0,0,.4);border:1px solid hsla(0,0%,100%,.2);box-shadow:0 4px 16px rgba(0,0,0,.3)}.menu-item.active{font-weight:500;--tw-text-opacity:1;color:rgb(15 23 42/var(--tw-text-opacity,1))}.menu-item.active:is(.dark *){--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.menu-item.active{background:hsla(0,0%,100%,.5);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border:1px solid hsla(0,0%,100%,.6);box-shadow:0 4px 16px rgba(0,0,0,.15),inset 0 1px 0 hsla(0,0%,100%,.5)}.dark .menu-item.active{background:rgba(0,0,0,.6);border:1px solid hsla(0,0%,100%,.3);box-shadow:0 4px 16px rgba(0,0,0,.4),inset 0 1px 0 hsla(0,0%,100%,.2)}.user-dropdown{position:absolute;right:0;z-index:50;margin-top:.5rem;width:16rem;overflow:hidden;border-radius:.75rem;--tw-shadow:0 25px 50px -12px rgba(0,0,0,.25);--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);background:hsla(0,0%,100%,.1);backdrop-filter:blur(40px) saturate(200%) brightness(130%) contrast(110%);-webkit-backdrop-filter:blur(40px) saturate(200%) brightness(130%) contrast(110%);border:1px solid hsla(0,0%,100%,.3);box-shadow:0 25px 50px rgba(0,0,0,.25),0 8px 16px rgba(0,0,0,.15),inset 0 1px 0 hsla(0,0%,100%,.4),0 0 0 1px hsla(0,0%,100%,.1);animation:fadeIn .2s ease-out forwards}.dark .user-dropdown{background:rgba(0,0,0,.4);backdrop-filter:blur(40px) saturate(180%) brightness(120%) contrast(120%);-webkit-backdrop-filter:blur(40px) saturate(180%) brightness(120%) contrast(120%);border:1px solid hsla(0,0%,100%,.15);box-shadow:0 25px 50px rgba(0,0,0,.6),0 8px 16px rgba(0,0,0,.4),inset 0 1px 0 hsla(0,0%,100%,.2),0 0 0 1px hsla(0,0%,100%,.05)}.dropdown-header{display:flex;align-items:center;border-bottom-width:1px;border-color:rgba(229,231,235,.8);padding:1rem}.dropdown-header:is(.dark *){border-color:rgba(51,65,85,.3)}.dropdown-item{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;font-size:.875rem;line-height:1.25rem;--tw-text-opacity:1;color:rgb(51 65 85/var(--tw-text-opacity,1));transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.3s}.dropdown-item:hover{background-color:rgba(243,244,246,.8);--tw-text-opacity:1;color:rgb(15 23 42/var(--tw-text-opacity,1))}.dropdown-item:is(.dark *){--tw-text-opacity:1;color:rgb(203 213 225/var(--tw-text-opacity,1))}.dropdown-item:hover:is(.dark *){background-color:rgba(51,65,85,.6);--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.dropdown-divider{border-top-width:1px;border-color:rgba(229,231,235,.8)}.dropdown-divider:is(.dark *){border-color:rgba(51,65,85,.3)}@keyframes mercedes-rotate{0%{transform:rotate(0deg)}25%{transform:rotate(90deg)}50%{transform:rotate(180deg)}75%{transform:rotate(270deg)}to{transform:rotate(1turn)}}.navbar-brand:hover svg{animation:mercedes-rotate 5s linear infinite;transform-origin:center}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.pointer-events-none{pointer-events:none}.pointer-events-auto{pointer-events:auto}.visible{visibility:visible}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.-inset-1{inset:-.25rem}.inset-0{inset:0}.inset-y-0{top:0;bottom:0}.-right-1{right:-.25rem}.-top-1{top:-.25rem}.bottom-0{bottom:0}.bottom-4{bottom:1rem}.bottom-6{bottom:1.5rem}.bottom-8{bottom:2rem}.bottom-full{bottom:100%}.left-0{left:0}.left-1\/2{left:50%}.left-1\/4{left:25%}.right-0{right:0}.right-1\/3{right:33.333333%}.right-1\/4{right:25%}.right-2{right:.5rem}.right-2\.5{right:.625rem}.right-4{right:1rem}.right-5{right:1.25rem}.right-6{right:1.5rem}.right-8{right:2rem}.top-0{top:0}.top-1\/2{top:50%}.top-1\/3{top:33.333333%}.top-1\/4{top:25%}.top-2{top:.5rem}.top-2\.5{top:.625rem}.top-2\/3{top:66.666667%}.top-3\/4{top:75%}.top-4{top:1rem}.top-5{top:1.25rem}.top-6{top:1.5rem}.top-full{top:100%}.z-10{z-index:10}.z-40{z-index:40}.z-50{z-index:50}.col-span-full{grid-column:1/-1}.m-1{margin:.25rem}.-mx-1\.5{margin-left:-.375rem;margin-right:-.375rem}.-my-1\.5{margin-top:-.375rem;margin-bottom:-.375rem}.mx-2{margin-left:.5rem;margin-right:.5rem}.mx-4{margin-left:1rem;margin-right:1rem}.mx-auto{margin-left:auto;margin-right:auto}.my-3{margin-top:.75rem;margin-bottom:.75rem}.-ml-1{margin-left:-.25rem}.-mt-8{margin-top:-2rem}.mb-1{margin-bottom:.25rem}.mb-1\.5{margin-bottom:.375rem}.mb-10{margin-bottom:2.5rem}.mb-12{margin-bottom:3rem}.mb-16{margin-bottom:4rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.ml-2{margin-left:.5rem}.ml-3{margin-left:.75rem}.ml-4{margin-left:1rem}.ml-auto{margin-left:auto}.mr-1{margin-right:.25rem}.mr-2{margin-right:.5rem}.mr-3{margin-right:.75rem}.mt-0\.5{margin-top:.125rem}.mt-1{margin-top:.25rem}.mt-1\.5{margin-top:.375rem}.mt-12{margin-top:3rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.mt-auto{margin-top:auto}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.\!grid{display:grid!important}.grid{display:grid}.list-item{display:list-item}.hidden{display:none}.h-0{height:0}.h-0\.5{height:.125rem}.h-1{height:.25rem}.h-10{height:2.5rem}.h-11{height:2.75rem}.h-12{height:3rem}.h-14{height:3.5rem}.h-16{height:4rem}.h-2{height:.5rem}.h-2\.5{height:.625rem}.h-20{height:5rem}.h-24{height:6rem}.h-3{height:.75rem}.h-3\.5{height:.875rem}.h-32{height:8rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-64{height:16rem}.h-8{height:2rem}.h-9{height:2.25rem}.h-full{height:100%}.h-px{height:1px}.max-h-96{max-height:24rem}.max-h-\[80vh\]{max-height:80vh}.max-h-\[90vh\]{max-height:90vh}.min-h-\[80vh\]{min-height:80vh}.min-h-screen{min-height:100vh}.w-0{width:0}.w-1{width:.25rem}.w-1\/2{width:50%}.w-1\/3{width:33.333333%}.w-10{width:2.5rem}.w-11{width:2.75rem}.w-12{width:3rem}.w-14{width:3.5rem}.w-16{width:4rem}.w-2{width:.5rem}.w-2\.5{width:.625rem}.w-20{width:5rem}.w-24{width:6rem}.w-3{width:.75rem}.w-3\.5{width:.875rem}.w-3\/4{width:75%}.w-4{width:1rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-64{width:16rem}.w-8{width:2rem}.w-80{width:20rem}.w-9{width:2.25rem}.w-full{width:100%}.min-w-0{min-width:0}.min-w-full{min-width:100%}.max-w-2xl{max-width:42rem}.max-w-3xl{max-width:48rem}.max-w-4xl{max-width:56rem}.max-w-6xl{max-width:72rem}.max-w-7xl{max-width:80rem}.max-w-lg{max-width:32rem}.max-w-md{max-width:28rem}.max-w-none{max-width:none}.max-w-screen-xl{max-width:1280px}.max-w-sm{max-width:24rem}.flex-1{flex:1 1 0%}.flex-shrink-0{flex-shrink:0}.shrink{flex-shrink:1}.flex-grow{flex-grow:1}.-translate-x-1{--tw-translate-x:-0.25rem}.-translate-x-1,.-translate-x-1\/2{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-x-1\/2{--tw-translate-x:-50%}.-translate-y-0{--tw-translate-y:-0px}.-translate-y-0,.-translate-y-1{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1{--tw-translate-y:-0.25rem}.-translate-y-1\/2{--tw-translate-y:-50%}.-translate-y-1\/2,.translate-x-0{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-x-0{--tw-translate-x:0px}.translate-x-1{--tw-translate-x:0.25rem}.translate-x-1,.translate-x-full{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-x-full{--tw-translate-x:100%}.translate-y-1{--tw-translate-y:0.25rem}.rotate-0,.translate-y-1{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rotate-0{--tw-rotate:0deg}.rotate-90{--tw-rotate:90deg}.rotate-90,.scale-100{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.scale-100{--tw-scale-x:1;--tw-scale-y:1}.scale-105{--tw-scale-x:1.05;--tw-scale-y:1.05}.scale-105,.scale-75{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.scale-75{--tw-scale-x:.75;--tw-scale-y:.75}.scale-95{--tw-scale-x:.95;--tw-scale-y:.95}.scale-95,.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes pulse{50%{opacity:.5}}.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}@keyframes spin{to{transform:rotate(1turn)}}.animate-spin{animation:spin 1s linear infinite}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.resize-none{resize:none}.resize{resize:both}.appearance-none{-webkit-appearance:none;-moz-appearance:none;appearance:none}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.space-x-1>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(.25rem*var(--tw-space-x-reverse));margin-left:calc(.25rem*(1 - var(--tw-space-x-reverse)))}.space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(.5rem*var(--tw-space-x-reverse));margin-left:calc(.5rem*(1 - var(--tw-space-x-reverse)))}.space-x-3>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(.75rem*var(--tw-space-x-reverse));margin-left:calc(.75rem*(1 - var(--tw-space-x-reverse)))}.space-x-4>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(1rem*var(--tw-space-x-reverse));margin-left:calc(1rem*(1 - var(--tw-space-x-reverse)))}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.25rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem*var(--tw-space-y-reverse))}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem*var(--tw-space-y-reverse))}.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.75rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem*var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem*var(--tw-space-y-reverse))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem*var(--tw-space-y-reverse))}.space-y-8>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(2rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(2rem*var(--tw-space-y-reverse))}.divide-y>:not([hidden])~:not([hidden]){--tw-divide-y-reverse:0;border-top-width:calc(1px*(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(1px*var(--tw-divide-y-reverse))}.divide-gray-200>:not([hidden])~:not([hidden]){--tw-divide-opacity:1;border-color:rgb(229 231 235/var(--tw-divide-opacity,1))}.divide-slate-200>:not([hidden])~:not([hidden]){--tw-divide-opacity:1;border-color:rgb(226 232 240/var(--tw-divide-opacity,1))}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.scroll-smooth{scroll-behavior:smooth}.truncate{overflow:hidden;text-overflow:ellipsis}.truncate,.whitespace-nowrap{white-space:nowrap}.break-all{word-break:break-all}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:1rem}.rounded-3xl{border-radius:1.5rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-xl{border-radius:.75rem}.rounded-r-lg{border-top-right-radius:.5rem;border-bottom-right-radius:.5rem}.rounded-r-xl{border-top-right-radius:.75rem;border-bottom-right-radius:.75rem}.border{border-width:1px}.border-2{border-width:2px}.border-4{border-width:4px}.border-b{border-bottom-width:1px}.border-b-2{border-bottom-width:2px}.border-l-4{border-left-width:4px}.border-r-4{border-right-width:4px}.border-t{border-top-width:1px}.border-t-4{border-top-width:4px}.border-dashed{border-style:dashed}.border-black{--tw-border-opacity:1;border-color:rgb(0 0 0/var(--tw-border-opacity,1))}.border-black\/70{border-color:rgba(0,0,0,.7)}.border-blue-200{--tw-border-opacity:1;border-color:rgb(191 219 254/var(--tw-border-opacity,1))}.border-blue-400{--tw-border-opacity:1;border-color:rgb(96 165 250/var(--tw-border-opacity,1))}.border-blue-500{--tw-border-opacity:1;border-color:rgb(59 130 246/var(--tw-border-opacity,1))}.border-gray-200{--tw-border-opacity:1;border-color:rgb(229 231 235/var(--tw-border-opacity,1))}.border-gray-200\/30{border-color:rgba(229,231,235,.3)}.border-gray-200\/60{border-color:rgba(229,231,235,.6)}.border-gray-200\/70{border-color:rgba(229,231,235,.7)}.border-gray-200\/80{border-color:rgba(229,231,235,.8)}.border-gray-300{--tw-border-opacity:1;border-color:rgb(209 213 219/var(--tw-border-opacity,1))}.border-gray-300\/60{border-color:rgba(209,213,219,.6)}.border-gray-400{--tw-border-opacity:1;border-color:rgb(156 163 175/var(--tw-border-opacity,1))}.border-green-200{--tw-border-opacity:1;border-color:rgb(187 247 208/var(--tw-border-opacity,1))}.border-green-300{--tw-border-opacity:1;border-color:rgb(134 239 172/var(--tw-border-opacity,1))}.border-green-400{--tw-border-opacity:1;border-color:rgb(74 222 128/var(--tw-border-opacity,1))}.border-green-500{--tw-border-opacity:1;border-color:rgb(34 197 94/var(--tw-border-opacity,1))}.border-indigo-600{--tw-border-opacity:1;border-color:rgb(79 70 229/var(--tw-border-opacity,1))}.border-light-border{--tw-border-opacity:1;border-color:rgb(226 232 240/var(--tw-border-opacity,1))}.border-mercedes-silver{--tw-border-opacity:1;border-color:rgb(192 192 192/var(--tw-border-opacity,1))}.border-purple-400{--tw-border-opacity:1;border-color:rgb(192 132 252/var(--tw-border-opacity,1))}.border-red-200{--tw-border-opacity:1;border-color:rgb(254 202 202/var(--tw-border-opacity,1))}.border-red-300{--tw-border-opacity:1;border-color:rgb(252 165 165/var(--tw-border-opacity,1))}.border-red-400{--tw-border-opacity:1;border-color:rgb(248 113 113/var(--tw-border-opacity,1))}.border-red-500{--tw-border-opacity:1;border-color:rgb(239 68 68/var(--tw-border-opacity,1))}.border-slate-200{--tw-border-opacity:1;border-color:rgb(226 232 240/var(--tw-border-opacity,1))}.border-slate-200\/50{border-color:rgba(226,232,240,.5)}.border-slate-200\/60{border-color:rgba(226,232,240,.6)}.border-slate-300{--tw-border-opacity:1;border-color:rgb(203 213 225/var(--tw-border-opacity,1))}.border-transparent{border-color:transparent}.border-white\/20{border-color:hsla(0,0%,100%,.2)}.border-yellow-200{--tw-border-opacity:1;border-color:rgb(254 240 138/var(--tw-border-opacity,1))}.border-yellow-400{--tw-border-opacity:1;border-color:rgb(250 204 21/var(--tw-border-opacity,1))}.border-yellow-500{--tw-border-opacity:1;border-color:rgb(234 179 8/var(--tw-border-opacity,1))}.border-t-slate-900{--tw-border-opacity:1;border-top-color:rgb(15 23 42/var(--tw-border-opacity,1))}.bg-accent-primary{--tw-bg-opacity:1;background-color:rgb(59 130 246/var(--tw-bg-opacity,1))}.bg-amber-400{--tw-bg-opacity:1;background-color:rgb(251 191 36/var(--tw-bg-opacity,1))}.bg-amber-500{--tw-bg-opacity:1;background-color:rgb(245 158 11/var(--tw-bg-opacity,1))}.bg-black{--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity,1))}.bg-black\/20{background-color:rgba(0,0,0,.2)}.bg-black\/30{background-color:rgba(0,0,0,.3)}.bg-black\/40{background-color:rgba(0,0,0,.4)}.bg-black\/50{background-color:rgba(0,0,0,.5)}.bg-black\/60{background-color:rgba(0,0,0,.6)}.bg-blue-100{--tw-bg-opacity:1;background-color:rgb(219 234 254/var(--tw-bg-opacity,1))}.bg-blue-400{--tw-bg-opacity:1;background-color:rgb(96 165 250/var(--tw-bg-opacity,1))}.bg-blue-50{--tw-bg-opacity:1;background-color:rgb(239 246 255/var(--tw-bg-opacity,1))}.bg-blue-500{--tw-bg-opacity:1;background-color:rgb(59 130 246/var(--tw-bg-opacity,1))}.bg-blue-500\/70{background-color:rgba(59,130,246,.7)}.bg-blue-600{--tw-bg-opacity:1;background-color:rgb(37 99 235/var(--tw-bg-opacity,1))}.bg-dark-card,.bg-dark-surface{--tw-bg-opacity:1;background-color:rgb(30 41 59/var(--tw-bg-opacity,1))}.bg-gray-100{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity,1))}.bg-gray-200{--tw-bg-opacity:1;background-color:rgb(229 231 235/var(--tw-bg-opacity,1))}.bg-gray-300{--tw-bg-opacity:1;background-color:rgb(209 213 219/var(--tw-bg-opacity,1))}.bg-gray-400{--tw-bg-opacity:1;background-color:rgb(156 163 175/var(--tw-bg-opacity,1))}.bg-gray-50{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity,1))}.bg-gray-500{--tw-bg-opacity:1;background-color:rgb(107 114 128/var(--tw-bg-opacity,1))}.bg-green-100{--tw-bg-opacity:1;background-color:rgb(220 252 231/var(--tw-bg-opacity,1))}.bg-green-100\/90{background-color:rgba(220,252,231,.9)}.bg-green-400{--tw-bg-opacity:1;background-color:rgb(74 222 128/var(--tw-bg-opacity,1))}.bg-green-50{--tw-bg-opacity:1;background-color:rgb(240 253 244/var(--tw-bg-opacity,1))}.bg-green-50\/80{background-color:rgba(240,253,244,.8)}.bg-green-500{--tw-bg-opacity:1;background-color:rgb(34 197 94/var(--tw-bg-opacity,1))}.bg-green-500\/70{background-color:rgba(34,197,94,.7)}.bg-green-600{--tw-bg-opacity:1;background-color:rgb(22 163 74/var(--tw-bg-opacity,1))}.bg-indigo-500{--tw-bg-opacity:1;background-color:rgb(99 102 241/var(--tw-bg-opacity,1))}.bg-indigo-600{--tw-bg-opacity:1;background-color:rgb(79 70 229/var(--tw-bg-opacity,1))}.bg-light-surface{--tw-bg-opacity:1;background-color:rgb(247 250 252/var(--tw-bg-opacity,1))}.bg-mercedes-silver{--tw-bg-opacity:1;background-color:rgb(192 192 192/var(--tw-bg-opacity,1))}.bg-orange-100{--tw-bg-opacity:1;background-color:rgb(255 237 213/var(--tw-bg-opacity,1))}.bg-orange-400{--tw-bg-opacity:1;background-color:rgb(251 146 60/var(--tw-bg-opacity,1))}.bg-orange-500{--tw-bg-opacity:1;background-color:rgb(249 115 22/var(--tw-bg-opacity,1))}.bg-purple-100{--tw-bg-opacity:1;background-color:rgb(243 232 255/var(--tw-bg-opacity,1))}.bg-purple-400{--tw-bg-opacity:1;background-color:rgb(192 132 252/var(--tw-bg-opacity,1))}.bg-purple-500{--tw-bg-opacity:1;background-color:rgb(168 85 247/var(--tw-bg-opacity,1))}.bg-red-100{--tw-bg-opacity:1;background-color:rgb(254 226 226/var(--tw-bg-opacity,1))}.bg-red-100\/90{background-color:hsla(0,93%,94%,.9)}.bg-red-400{--tw-bg-opacity:1;background-color:rgb(248 113 113/var(--tw-bg-opacity,1))}.bg-red-50{--tw-bg-opacity:1;background-color:rgb(254 242 242/var(--tw-bg-opacity,1))}.bg-red-500{--tw-bg-opacity:1;background-color:rgb(239 68 68/var(--tw-bg-opacity,1))}.bg-red-500\/70{background-color:rgba(239,68,68,.7)}.bg-red-600{--tw-bg-opacity:1;background-color:rgb(220 38 38/var(--tw-bg-opacity,1))}.bg-slate-100{--tw-bg-opacity:1;background-color:rgb(241 245 249/var(--tw-bg-opacity,1))}.bg-slate-200{--tw-bg-opacity:1;background-color:rgb(226 232 240/var(--tw-bg-opacity,1))}.bg-slate-50{--tw-bg-opacity:1;background-color:rgb(248 250 252/var(--tw-bg-opacity,1))}.bg-slate-50\/80{background-color:rgba(248,250,252,.8)}.bg-slate-500{--tw-bg-opacity:1;background-color:rgb(100 116 139/var(--tw-bg-opacity,1))}.bg-slate-700\/40{background-color:rgba(51,65,85,.4)}.bg-slate-800\/70{background-color:rgba(30,41,59,.7)}.bg-slate-900{--tw-bg-opacity:1;background-color:rgb(15 23 42/var(--tw-bg-opacity,1))}.bg-teal-500{--tw-bg-opacity:1;background-color:rgb(20 184 166/var(--tw-bg-opacity,1))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.bg-white\/10{background-color:hsla(0,0%,100%,.1)}.bg-white\/60{background-color:hsla(0,0%,100%,.6)}.bg-white\/70{background-color:hsla(0,0%,100%,.7)}.bg-white\/80{background-color:hsla(0,0%,100%,.8)}.bg-white\/90{background-color:hsla(0,0%,100%,.9)}.bg-yellow-100{--tw-bg-opacity:1;background-color:rgb(254 249 195/var(--tw-bg-opacity,1))}.bg-yellow-400{--tw-bg-opacity:1;background-color:rgb(250 204 21/var(--tw-bg-opacity,1))}.bg-yellow-50{--tw-bg-opacity:1;background-color:rgb(254 252 232/var(--tw-bg-opacity,1))}.bg-yellow-500{--tw-bg-opacity:1;background-color:rgb(234 179 8/var(--tw-bg-opacity,1))}.bg-yellow-500\/70{background-color:rgba(234,179,8,.7)}.bg-opacity-50{--tw-bg-opacity:0.5}.bg-opacity-75{--tw-bg-opacity:0.75}.bg-opacity-90{--tw-bg-opacity:0.9}.bg-opacity-95{--tw-bg-opacity:0.95}.bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--tw-gradient-stops))}.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.from-amber-300{--tw-gradient-from:#fcd34d var(--tw-gradient-from-position);--tw-gradient-to:rgba(252,211,77,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-blue-400{--tw-gradient-from:#60a5fa var(--tw-gradient-from-position);--tw-gradient-to:rgba(96,165,250,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-blue-50{--tw-gradient-from:#eff6ff var(--tw-gradient-from-position);--tw-gradient-to:rgba(239,246,255,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-blue-500{--tw-gradient-from:#3b82f6 var(--tw-gradient-from-position);--tw-gradient-to:rgba(59,130,246,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-blue-500\/10{--tw-gradient-from:rgba(59,130,246,.1) var(--tw-gradient-from-position);--tw-gradient-to:rgba(59,130,246,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-emerald-400{--tw-gradient-from:#34d399 var(--tw-gradient-from-position);--tw-gradient-to:rgba(52,211,153,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-gray-50{--tw-gradient-from:#f9fafb var(--tw-gradient-from-position);--tw-gradient-to:rgba(249,250,251,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-green-400{--tw-gradient-from:#4ade80 var(--tw-gradient-from-position);--tw-gradient-to:rgba(74,222,128,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-green-50{--tw-gradient-from:#f0fdf4 var(--tw-gradient-from-position);--tw-gradient-to:rgba(240,253,244,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-green-50\/90{--tw-gradient-from:rgba(240,253,244,.9) var(--tw-gradient-from-position);--tw-gradient-to:rgba(240,253,244,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-green-500{--tw-gradient-from:#22c55e var(--tw-gradient-from-position);--tw-gradient-to:rgba(34,197,94,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-green-500\/10{--tw-gradient-from:rgba(34,197,94,.1) var(--tw-gradient-from-position);--tw-gradient-to:rgba(34,197,94,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-orange-50{--tw-gradient-from:#fff7ed var(--tw-gradient-from-position);--tw-gradient-to:rgba(255,247,237,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-orange-500{--tw-gradient-from:#f97316 var(--tw-gradient-from-position);--tw-gradient-to:rgba(249,115,22,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-orange-500\/10{--tw-gradient-from:rgba(249,115,22,.1) var(--tw-gradient-from-position);--tw-gradient-to:rgba(249,115,22,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-purple-400{--tw-gradient-from:#c084fc var(--tw-gradient-from-position);--tw-gradient-to:rgba(192,132,252,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-purple-50{--tw-gradient-from:#faf5ff var(--tw-gradient-from-position);--tw-gradient-to:rgba(250,245,255,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-purple-500{--tw-gradient-from:#a855f7 var(--tw-gradient-from-position);--tw-gradient-to:rgba(168,85,247,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-purple-500\/10{--tw-gradient-from:rgba(168,85,247,.1) var(--tw-gradient-from-position);--tw-gradient-to:rgba(168,85,247,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-red-400{--tw-gradient-from:#f87171 var(--tw-gradient-from-position);--tw-gradient-to:hsla(0,91%,71%,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-red-500{--tw-gradient-from:#ef4444 var(--tw-gradient-from-position);--tw-gradient-to:rgba(239,68,68,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-slate-100{--tw-gradient-from:#f1f5f9 var(--tw-gradient-from-position);--tw-gradient-to:rgba(241,245,249,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-slate-50{--tw-gradient-from:#f8fafc var(--tw-gradient-from-position);--tw-gradient-to:rgba(248,250,252,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-slate-500{--tw-gradient-from:#64748b var(--tw-gradient-from-position);--tw-gradient-to:rgba(100,116,139,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-slate-900{--tw-gradient-from:#0f172a var(--tw-gradient-from-position);--tw-gradient-to:rgba(15,23,42,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-transparent{--tw-gradient-from:transparent var(--tw-gradient-from-position);--tw-gradient-to:transparent var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-white{--tw-gradient-from:#fff var(--tw-gradient-from-position);--tw-gradient-to:hsla(0,0%,100%,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-white\/90{--tw-gradient-from:hsla(0,0%,100%,.9) var(--tw-gradient-from-position);--tw-gradient-to:hsla(0,0%,100%,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.via-blue-50{--tw-gradient-to:rgba(239,246,255,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),#eff6ff var(--tw-gradient-via-position),var(--tw-gradient-to)}.via-blue-900{--tw-gradient-to:rgba(30,58,138,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),#1e3a8a var(--tw-gradient-via-position),var(--tw-gradient-to)}.via-gray-600{--tw-gradient-to:rgba(75,85,99,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),#4b5563 var(--tw-gradient-via-position),var(--tw-gradient-to)}.via-red-50{--tw-gradient-to:hsla(0,86%,97%,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),#fef2f2 var(--tw-gradient-via-position),var(--tw-gradient-to)}.via-white\/5{--tw-gradient-to:hsla(0,0%,100%,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),hsla(0,0%,100%,.05) var(--tw-gradient-via-position),var(--tw-gradient-to)}.to-blue-200{--tw-gradient-to:#bfdbfe var(--tw-gradient-to-position)}.to-blue-600{--tw-gradient-to:#2563eb var(--tw-gradient-to-position)}.to-cyan-50{--tw-gradient-to:#ecfeff var(--tw-gradient-to-position)}.to-cyan-500{--tw-gradient-to:#06b6d4 var(--tw-gradient-to-position)}.to-emerald-50{--tw-gradient-to:#ecfdf5 var(--tw-gradient-to-position)}.to-emerald-50\/80{--tw-gradient-to:rgba(236,253,245,.8) var(--tw-gradient-to-position)}.to-emerald-500{--tw-gradient-to:#10b981 var(--tw-gradient-to-position)}.to-emerald-500\/10{--tw-gradient-to:rgba(16,185,129,.1) var(--tw-gradient-to-position)}.to-emerald-600{--tw-gradient-to:#059669 var(--tw-gradient-to-position)}.to-gray-100{--tw-gradient-to:#f3f4f6 var(--tw-gradient-to-position)}.to-green-600{--tw-gradient-to:#16a34a var(--tw-gradient-to-position)}.to-indigo-100{--tw-gradient-to:#e0e7ff var(--tw-gradient-to-position)}.to-indigo-50{--tw-gradient-to:#eef2ff var(--tw-gradient-to-position)}.to-indigo-500\/10{--tw-gradient-to:rgba(99,102,241,.1) var(--tw-gradient-to-position)}.to-indigo-600{--tw-gradient-to:#4f46e5 var(--tw-gradient-to-position)}.to-indigo-900{--tw-gradient-to:#312e81 var(--tw-gradient-to-position)}.to-orange-400{--tw-gradient-to:#fb923c var(--tw-gradient-to-position)}.to-orange-50{--tw-gradient-to:#fff7ed var(--tw-gradient-to-position)}.to-orange-600{--tw-gradient-to:#ea580c var(--tw-gradient-to-position)}.to-pink-50{--tw-gradient-to:#fdf2f8 var(--tw-gradient-to-position)}.to-purple-500{--tw-gradient-to:#a855f7 var(--tw-gradient-to-position)}.to-purple-600{--tw-gradient-to:#9333ea var(--tw-gradient-to-position)}.to-red-50{--tw-gradient-to:#fef2f2 var(--tw-gradient-to-position)}.to-red-500{--tw-gradient-to:#ef4444 var(--tw-gradient-to-position)}.to-red-500\/10{--tw-gradient-to:rgba(239,68,68,.1) var(--tw-gradient-to-position)}.to-red-600{--tw-gradient-to:#dc2626 var(--tw-gradient-to-position)}.to-slate-600{--tw-gradient-to:#475569 var(--tw-gradient-to-position)}.to-transparent{--tw-gradient-to:transparent var(--tw-gradient-to-position)}.to-violet-500\/10{--tw-gradient-to:rgba(139,92,246,.1) var(--tw-gradient-to-position)}.to-white\/70{--tw-gradient-to:hsla(0,0%,100%,.7) var(--tw-gradient-to-position)}.bg-clip-text{-webkit-background-clip:text;background-clip:text}.p-1{padding:.25rem}.p-1\.5{padding:.375rem}.p-12{padding:3rem}.p-2{padding:.5rem}.p-2\.5{padding:.625rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-2\.5{padding-left:.625rem;padding-right:.625rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-3\.5{padding-left:.875rem;padding-right:.875rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-8{padding-left:2rem;padding-right:2rem}.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-12{padding-top:3rem;padding-bottom:3rem}.py-16{padding-top:4rem;padding-bottom:4rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.py-8{padding-top:2rem;padding-bottom:2rem}.pb-16{padding-bottom:4rem}.pb-6{padding-bottom:1.5rem}.pl-10{padding-left:2.5rem}.pl-3{padding-left:.75rem}.pl-4{padding-left:1rem}.pr-12{padding-right:3rem}.pr-24{padding-right:6rem}.pr-3{padding-right:.75rem}.pr-4{padding-right:1rem}.pr-6{padding-right:1.5rem}.pt-3{padding-top:.75rem}.pt-4{padding-top:1rem}.pt-5{padding-top:1.25rem}.pt-6{padding-top:1.5rem}.pt-8{padding-top:2rem}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.align-middle{vertical-align:middle}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-5xl{font-size:3rem;line-height:1}.text-6xl{font-size:3.75rem;line-height:1}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-normal{font-weight:400}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.lowercase{text-transform:lowercase}.capitalize{text-transform:capitalize}.italic{font-style:italic}.leading-5{line-height:1.25rem}.leading-relaxed{line-height:1.625}.tracking-tight{letter-spacing:-.025em}.tracking-wide{letter-spacing:.025em}.tracking-wider{letter-spacing:.05em}.tracking-widest{letter-spacing:.1em}.text-accent-primary{--tw-text-opacity:1;color:rgb(59 130 246/var(--tw-text-opacity,1))}.text-amber-500{--tw-text-opacity:1;color:rgb(245 158 11/var(--tw-text-opacity,1))}.text-amber-600{--tw-text-opacity:1;color:rgb(217 119 6/var(--tw-text-opacity,1))}.text-black{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}.text-blue-100{--tw-text-opacity:1;color:rgb(219 234 254/var(--tw-text-opacity,1))}.text-blue-200{--tw-text-opacity:1;color:rgb(191 219 254/var(--tw-text-opacity,1))}.text-blue-400{--tw-text-opacity:1;color:rgb(96 165 250/var(--tw-text-opacity,1))}.text-blue-500{--tw-text-opacity:1;color:rgb(59 130 246/var(--tw-text-opacity,1))}.text-blue-600{--tw-text-opacity:1;color:rgb(37 99 235/var(--tw-text-opacity,1))}.text-blue-700{--tw-text-opacity:1;color:rgb(29 78 216/var(--tw-text-opacity,1))}.text-blue-800{--tw-text-opacity:1;color:rgb(30 64 175/var(--tw-text-opacity,1))}.text-current{color:currentColor}.text-gray-300{--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity,1))}.text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity,1))}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity,1))}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity,1))}.text-gray-700{--tw-text-opacity:1;color:rgb(55 65 81/var(--tw-text-opacity,1))}.text-gray-800{--tw-text-opacity:1;color:rgb(31 41 55/var(--tw-text-opacity,1))}.text-gray-900{--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity,1))}.text-green-400{--tw-text-opacity:1;color:rgb(74 222 128/var(--tw-text-opacity,1))}.text-green-500{--tw-text-opacity:1;color:rgb(34 197 94/var(--tw-text-opacity,1))}.text-green-600{--tw-text-opacity:1;color:rgb(22 163 74/var(--tw-text-opacity,1))}.text-green-700{--tw-text-opacity:1;color:rgb(21 128 61/var(--tw-text-opacity,1))}.text-green-800{--tw-text-opacity:1;color:rgb(22 101 52/var(--tw-text-opacity,1))}.text-light-text{--tw-text-opacity:1;color:rgb(26 32 44/var(--tw-text-opacity,1))}.text-light-text-muted{--tw-text-opacity:1;color:rgb(74 85 104/var(--tw-text-opacity,1))}.text-mercedes-black{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}.text-mercedes-silver{--tw-text-opacity:1;color:rgb(192 192 192/var(--tw-text-opacity,1))}.text-orange-600{--tw-text-opacity:1;color:rgb(234 88 12/var(--tw-text-opacity,1))}.text-orange-800{--tw-text-opacity:1;color:rgb(154 52 18/var(--tw-text-opacity,1))}.text-purple-600{--tw-text-opacity:1;color:rgb(147 51 234/var(--tw-text-opacity,1))}.text-purple-800{--tw-text-opacity:1;color:rgb(107 33 168/var(--tw-text-opacity,1))}.text-red-200{--tw-text-opacity:1;color:rgb(254 202 202/var(--tw-text-opacity,1))}.text-red-400{--tw-text-opacity:1;color:rgb(248 113 113/var(--tw-text-opacity,1))}.text-red-500{--tw-text-opacity:1;color:rgb(239 68 68/var(--tw-text-opacity,1))}.text-red-600{--tw-text-opacity:1;color:rgb(220 38 38/var(--tw-text-opacity,1))}.text-red-700{--tw-text-opacity:1;color:rgb(185 28 28/var(--tw-text-opacity,1))}.text-red-800{--tw-text-opacity:1;color:rgb(153 27 27/var(--tw-text-opacity,1))}.text-slate-300{--tw-text-opacity:1;color:rgb(203 213 225/var(--tw-text-opacity,1))}.text-slate-400{--tw-text-opacity:1;color:rgb(148 163 184/var(--tw-text-opacity,1))}.text-slate-500{--tw-text-opacity:1;color:rgb(100 116 139/var(--tw-text-opacity,1))}.text-slate-600{--tw-text-opacity:1;color:rgb(71 85 105/var(--tw-text-opacity,1))}.text-slate-700{--tw-text-opacity:1;color:rgb(51 65 85/var(--tw-text-opacity,1))}.text-slate-800{--tw-text-opacity:1;color:rgb(30 41 59/var(--tw-text-opacity,1))}.text-slate-900{--tw-text-opacity:1;color:rgb(15 23 42/var(--tw-text-opacity,1))}.text-transparent{color:transparent}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.text-yellow-400{--tw-text-opacity:1;color:rgb(250 204 21/var(--tw-text-opacity,1))}.text-yellow-500{--tw-text-opacity:1;color:rgb(234 179 8/var(--tw-text-opacity,1))}.text-yellow-600{--tw-text-opacity:1;color:rgb(202 138 4/var(--tw-text-opacity,1))}.text-yellow-700{--tw-text-opacity:1;color:rgb(161 98 7/var(--tw-text-opacity,1))}.text-yellow-800{--tw-text-opacity:1;color:rgb(133 77 14/var(--tw-text-opacity,1))}.underline{text-decoration-line:underline}.overline{text-decoration-line:overline}.placeholder-gray-400::-moz-placeholder{--tw-placeholder-opacity:1;color:rgb(156 163 175/var(--tw-placeholder-opacity,1))}.placeholder-gray-400::placeholder{--tw-placeholder-opacity:1;color:rgb(156 163 175/var(--tw-placeholder-opacity,1))}.placeholder-gray-500::-moz-placeholder{--tw-placeholder-opacity:1;color:rgb(107 114 128/var(--tw-placeholder-opacity,1))}.placeholder-gray-500::placeholder{--tw-placeholder-opacity:1;color:rgb(107 114 128/var(--tw-placeholder-opacity,1))}.opacity-0{opacity:0}.opacity-10{opacity:.1}.opacity-100{opacity:1}.opacity-15{opacity:.15}.opacity-25{opacity:.25}.opacity-5{opacity:.05}.opacity-75{opacity:.75}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color)}.shadow,.shadow-2xl{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-2xl{--tw-shadow:0 25px 50px -12px rgba(0,0,0,.25);--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color)}.shadow-lg{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.shadow-lg,.shadow-md{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color)}.shadow-sm{--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}.shadow-sm,.shadow-xl{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-xl{--tw-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color),0 8px 10px -6px var(--tw-shadow-color)}.outline-none{outline:2px solid transparent;outline-offset:2px}.ring-1{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.ring-1,.ring-2{box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.ring-2{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.ring-black{--tw-ring-opacity:1;--tw-ring-color:rgb(0 0 0/var(--tw-ring-opacity,1))}.ring-blue-500{--tw-ring-opacity:1;--tw-ring-color:rgb(59 130 246/var(--tw-ring-opacity,1))}.ring-white{--tw-ring-opacity:1;--tw-ring-color:rgb(255 255 255/var(--tw-ring-opacity,1))}.ring-opacity-5{--tw-ring-opacity:0.05}.ring-offset-2{--tw-ring-offset-width:2px}.blur{--tw-blur:blur(8px)}.blur,.blur-sm{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.blur-sm{--tw-blur:blur(4px)}.drop-shadow{--tw-drop-shadow:drop-shadow(0 1px 2px rgba(0,0,0,.1)) drop-shadow(0 1px 1px rgba(0,0,0,.06))}.drop-shadow,.drop-shadow-sm{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.drop-shadow-sm{--tw-drop-shadow:drop-shadow(0 1px 1px rgba(0,0,0,.05))}.invert{--tw-invert:invert(100%)}.filter,.invert{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-blur-2xl{--tw-backdrop-blur:blur(40px)}.backdrop-blur-2xl,.backdrop-blur-3xl{-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.backdrop-blur-3xl{--tw-backdrop-blur:blur(64px)}.backdrop-blur-lg{--tw-backdrop-blur:blur(16px)}.backdrop-blur-lg,.backdrop-blur-md{-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.backdrop-blur-md{--tw-backdrop-blur:blur(12px)}.backdrop-blur-sm{--tw-backdrop-blur:blur(4px)}.backdrop-blur-sm,.backdrop-blur-xl{-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.backdrop-blur-xl{--tw-backdrop-blur:blur(24px)}.backdrop-filter{-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-1000{transition-duration:1s}.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}.duration-500{transition-duration:.5s}.ease-in{transition-timing-function:cubic-bezier(.4,0,1,1)}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.flash-message{position:fixed;top:1rem;right:1rem;z-index:50;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));border-radius:.75rem;border-width:1px;border-color:hsla(0,0%,100%,.2);padding:1rem 1.5rem;font-size:.875rem;line-height:1.25rem;font-weight:500;--tw-shadow:0 25px 50px -12px rgba(0,0,0,.25);--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);--tw-backdrop-blur:blur(24px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.3s;backdrop-filter:blur(20px) saturate(180%) brightness(120%);-webkit-backdrop-filter:blur(20px) saturate(180%) brightness(120%);box-shadow:0 25px 50px rgba(0,0,0,.2),0 0 0 1px hsla(0,0%,100%,.1);animation:slide-down .3s ease-out}.flash-message.info{background-color:rgba(59,130,246,.7);--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.flash-message.info:is(.dark *){background-color:rgba(37,99,235,.7)}.flash-message.success{background-color:rgba(34,197,94,.7);--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.flash-message.success:is(.dark *){background-color:rgba(22,163,74,.7)}.flash-message.warning{background-color:rgba(234,179,8,.7);--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.flash-message.warning:is(.dark *){background-color:rgba(202,138,4,.7)}.flash-message.error{background-color:rgba(239,68,68,.7);--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.flash-message.error:is(.dark *){background-color:rgba(220,38,38,.7)}@keyframes slide-down{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.mercedes-background:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' fill='currentColor' opacity='.03'%3E%3Cpath d='M58.6 4.5C53 1.6 46.7 0 40 0S27 1.6 21.4 4.5C8.7 11.2 0 24.6 0 40s8.7 28.8 21.5 35.5C27 78.3 33.3 80 40 80s12.9-1.7 18.5-4.6C71.3 68.8 80 55.4 80 40S71.3 11.2 58.6 4.5M4 40c0-13.1 7-24.5 17.5-30.9C26.6 6 32.5 4.2 39 4l-4.5 32.7-13 10.1L8.3 57.1C5.6 52 4 46.2 4 40m54.6 30.8C53.1 74.1 46.8 76 40 76s-13.2-1.9-18.6-5.2c-4.9-2.9-8.9-6.9-11.9-11.7l11.9-4.9L40 46.6l18.6 7.5 12 4.9c-3 4.9-7.2 8.9-12 11.8m0-24-12.9-10L41.1 4c6.3.2 12.3 2 17.4 5.1C69 15.4 76 26.9 76 40c0 6.2-1.5 12-4.3 17.1z'/%3E%3C/svg%3E");background-position:50%;background-repeat:repeat;background-size:120px 120px;pointer-events:none;opacity:.03;transition:opacity .3s ease}.dark .mercedes-background:before{opacity:.015;filter:invert(1) brightness(.3);background-size:150px 150px}.navbar{position:sticky!important;top:0!important;z-index:50!important;width:100%!important;left:0!important;right:0!important;background-color:hsla(0,0%,100%,.6)}.navbar:is(.dark *){background-color:rgba(0,0,0,.7)}.navbar{backdrop-filter:blur(24px) saturate(200%);-webkit-backdrop-filter:blur(24px) saturate(200%);box-shadow:0 4px 24px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.08);border-bottom:1px solid hsla(0,0%,100%,.15)}.dark .navbar{box-shadow:0 4px 24px rgba(0,0,0,.3),0 1px 2px rgba(0,0,0,.2);border-bottom:1px solid hsla(0,0%,100%,.05)}.navbar-menu-new{display:flex;align-items:center;justify-content:center}.navbar-menu-new>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(.75rem*var(--tw-space-x-reverse));margin-left:calc(.75rem*(1 - var(--tw-space-x-reverse)))}@media (min-width:768px){.navbar-menu-new>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(.5rem*var(--tw-space-x-reverse));margin-left:calc(.5rem*(1 - var(--tw-space-x-reverse)))}}@media (min-width:1024px){.navbar-menu-new>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(.25rem*var(--tw-space-x-reverse));margin-left:calc(.25rem*(1 - var(--tw-space-x-reverse)))}}@media (min-width:1280px){.navbar-menu-new>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(.5rem*var(--tw-space-x-reverse));margin-left:calc(.5rem*(1 - var(--tw-space-x-reverse)))}}.navbar-menu-new{max-width:100%;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.navbar-menu-new::-webkit-scrollbar{display:none}.nav-item{display:flex;align-items:center}.nav-item>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(.5rem*var(--tw-space-x-reverse));margin-left:calc(.5rem*(1 - var(--tw-space-x-reverse)))}.nav-item{border-radius:.5rem;padding:.5rem .75rem;font-size:.875rem;line-height:1.25rem;font-weight:500;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.3s;color:rgba(15,23,42,.8);background:hsla(0,0%,100%,.04);border:1px solid hsla(0,0%,100%,.1)}.dark .nav-item{color:hsla(0,0%,100%,.8);background:rgba(0,0,0,.2);border:1px solid hsla(0,0%,100%,.05)}.nav-item:hover{--tw-translate-y:-0.125rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));color:#0f172a;background:hsla(0,0%,100%,.15);border:1px solid hsla(0,0%,100%,.2);box-shadow:0 10px 20px rgba(0,0,0,.05),0 2px 6px rgba(0,0,0,.04),0 0 1px rgba(0,0,0,.1)}.dark .nav-item:hover{color:#fff;background:hsla(0,0%,100%,.05);border:1px solid hsla(0,0%,100%,.1);box-shadow:0 10px 20px rgba(0,0,0,.2),0 2px 6px rgba(0,0,0,.15),0 0 1px hsla(0,0%,100%,.05)}.nav-item.active{color:#0f172a;background:hsla(0,0%,100%,.9);border:1px solid hsla(0,0%,100%,.25);box-shadow:0 10px 25px rgba(0,0,0,.08),0 3px 8px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);font-weight:600}.dark .nav-item.active{color:#fff;background:rgba(0,0,0,.7);border:1px solid hsla(0,0%,100%,.15);box-shadow:0 10px 25px rgba(0,0,0,.3),0 3px 8px rgba(0,0,0,.2),0 0 0 1px hsla(0,0%,100%,.06)}.dark-mode-toggle-new{position:relative;display:flex;cursor:pointer;align-items:center;justify-content:center;border-radius:9999px;padding:.625rem;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.3s;background:rgba(241,245,249,.8);border:1px solid hsla(0,0%,100%,.7);box-shadow:0 2px 10px rgba(0,0,0,.05),0 1px 2px rgba(0,0,0,.04);color:#334155;z-index:100}.dark-mode-toggle-new:hover{--tw-translate-y:-0.125rem;background:rgba(241,245,249,.9);box-shadow:0 10px 20px rgba(0,0,0,.08),0 2px 6px rgba(0,0,0,.06)}.dark-mode-toggle-new:active,.dark-mode-toggle-new:hover{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.dark-mode-toggle-new:active{--tw-scale-x:.95;--tw-scale-y:.95;transition:transform .1s}.dark .dark-mode-toggle-new{background:rgba(30,41,59,.8);border:1px solid hsla(0,0%,100%,.1);box-shadow:0 2px 10px rgba(0,0,0,.2),0 1px 2px rgba(0,0,0,.1);color:#e2e8f0}.dark .dark-mode-toggle-new:hover{background:rgba(30,41,59,.9);box-shadow:0 10px 20px rgba(0,0,0,.2),0 2px 6px rgba(0,0,0,.15)}.dark-mode-toggle-new .moon-icon,.dark-mode-toggle-new .sun-icon{position:absolute;top:50%;left:50%;--tw-translate-x:-50%;--tw-translate-y:-50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.3s}.dark-mode-toggle-new .moon-icon:not(.hidden),.dark-mode-toggle-new .sun-icon:not(.hidden){animation:spin-in .5s cubic-bezier(.25,1,.5,1) forwards}@keyframes spin-in{0%{opacity:0;transform:translateY(10px) scale(.7) rotate(20deg)}to{opacity:1;transform:translateY(0) scale(1) rotate(0)}}.dark .sun-icon{display:none}.dark .moon-icon,.sun-icon{display:block}.moon-icon{display:none}.modal-content-new{box-shadow:0 25px 50px rgba(0,0,0,.15),0 15px 30px rgba(0,0,0,.1),0 0 0 1px hsla(0,0%,100%,.1);animation:modal-in .3s cubic-bezier(.34,1.56,.64,1)}.dark .modal-content-new{box-shadow:0 25px 50px rgba(0,0,0,.4),0 15px 30px rgba(0,0,0,.3),0 0 0 1px hsla(0,0%,100%,.05)}@keyframes modal-in{0%{opacity:0;transform:scale(.95) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}.input-new{width:100%;border-radius:.5rem;border-width:1px;border-color:rgba(209,213,219,.6);background-color:hsla(0,0%,100%,.7);padding:.625rem .75rem;--tw-text-opacity:1;color:rgb(15 23 42/var(--tw-text-opacity,1));--tw-backdrop-blur:blur(16px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s}.input-new:focus{border-color:transparent;outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:1;--tw-ring-color:rgb(0 0 0/var(--tw-ring-opacity,1))}.input-new:is(.dark *){border-color:rgba(71,85,105,.6);background-color:rgba(51,65,85,.7);--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.input-new:focus:is(.dark *){--tw-ring-opacity:1;--tw-ring-color:rgb(255 255 255/var(--tw-ring-opacity,1))}.input-new{backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 2px 6px rgba(0,0,0,.05)}.dark .input-new{box-shadow:0 2px 6px rgba(0,0,0,.2)}.form-label-new{margin-bottom:.5rem;display:block;font-size:.875rem;line-height:1.25rem;font-weight:500;--tw-text-opacity:1;color:rgb(15 23 42/var(--tw-text-opacity,1))}.form-label-new:is(.dark *){--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.dark-mode-toggle-premium{position:relative;cursor:pointer}.dark-mode-toggle-premium,.dark-mode-toggle-premium:focus{outline:2px solid transparent;outline-offset:2px}.dark-mode-toggle-premium{z-index:100}.dark-mode-toggle-premium:focus-visible{border-radius:9999px;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:1;--tw-ring-color:rgb(59 130 246/var(--tw-ring-opacity,1));--tw-ring-offset-width:2px}.dark-mode-toggle-premium:focus-visible:is(.dark *){--tw-ring-opacity:1;--tw-ring-color:rgb(96 165 250/var(--tw-ring-opacity,1));--tw-ring-offset-color:#0f172a}@keyframes delayed-pulse{0%,to{opacity:1}50%{opacity:.5}}.animation-delay-500{animation-delay:.5s;animation:delayed-pulse 2s ease-in-out infinite}.animation-delay-1000{animation-delay:1s;animation:delayed-pulse 2s ease-in-out infinite}.animation-delay-1500{animation-delay:1.5s;animation:delayed-pulse 2s ease-in-out infinite}.dark-mode-toggle-premium .moon-icon,.dark-mode-toggle-premium .sun-icon{transition:all .5s cubic-bezier(.4,0,.2,1)}.dark-mode-toggle-premium .backdrop-blur-md{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.dark-mode-toggle-premium:hover .moon-icon svg,.dark-mode-toggle-premium:hover .sun-icon svg{filter:drop-shadow(0 0 8px currentColor);transform:scale(1.1)}.dark-mode-toggle-premium .bg-gradient-to-r{transition:opacity .5s ease-in-out}.dark-mode-toggle-premium .shadow-lg{box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05)}.dark .dark-mode-toggle-premium .shadow-lg{box-shadow:0 10px 15px -3px rgba(0,0,0,.3),0 4px 6px -2px rgba(0,0,0,.2)}@keyframes icon-rotate-in{0%{opacity:0;transform:rotate(-90deg) scale(.8)}to{opacity:1;transform:rotate(0deg) scale(1)}}.dark-mode-toggle-premium .moon-icon.icon-enter,.dark-mode-toggle-premium .sun-icon.icon-enter{animation:icon-rotate-in .5s ease-out forwards}.dark-mode-toggle-premium:active>div{transform:scale(.95);transition:transform .1s ease-out}.user-menu-button-new{display:flex;align-items:center}.user-menu-button-new>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(.5rem*var(--tw-space-x-reverse));margin-left:calc(.5rem*(1 - var(--tw-space-x-reverse)))}.user-menu-button-new{border-radius:.5rem;padding:.375rem;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.3s;background:rgba(241,245,249,.6);border:1px solid hsla(0,0%,100%,.6);box-shadow:0 2px 10px rgba(0,0,0,.04),0 1px 2px rgba(0,0,0,.02)}.user-menu-button-new:hover{--tw-translate-y:-0.125rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));background:rgba(241,245,249,.8);box-shadow:0 10px 20px rgba(0,0,0,.06),0 2px 6px rgba(0,0,0,.04)}.dark .user-menu-button-new{background:rgba(30,41,59,.6);border:1px solid hsla(0,0%,100%,.08);box-shadow:0 2px 10px rgba(0,0,0,.15),0 1px 2px rgba(0,0,0,.1)}.dark .user-menu-button-new:hover{background:rgba(30,41,59,.8);box-shadow:0 10px 20px rgba(0,0,0,.15),0 2px 6px rgba(0,0,0,.1)}.user-avatar-new{display:flex;height:2rem;width:2rem;align-items:center;justify-content:center;border-radius:9999px;font-size:.875rem;line-height:1.25rem;font-weight:600;--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1));--tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.3s;background:linear-gradient(135deg,#000,#333);box-shadow:0 2px 6px rgba(0,0,0,.2),0 1px 3px rgba(0,0,0,.1)}.dark .user-avatar-new{background:linear-gradient(135deg,#f8fafc,#e2e8f0);color:#0f172a;box-shadow:0 2px 6px rgba(0,0,0,.3),0 1px 3px rgba(0,0,0,.2)}.login-button-new{display:flex;align-items:center;border-radius:.5rem;padding:.5rem 1rem;font-size:.875rem;line-height:1.25rem;font-weight:500;--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.3s;background:#000;color:#fff;border:1px solid hsla(0,0%,100%,.1);box-shadow:0 2px 10px rgba(0,0,0,.1),0 1px 2px rgba(0,0,0,.08)}.login-button-new:hover{--tw-translate-y:-0.125rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));background:#333;box-shadow:0 10px 20px rgba(0,0,0,.15),0 3px 6px rgba(0,0,0,.1)}.dark .login-button-new{background:#fff;color:#000;border:1px solid rgba(0,0,0,.1);box-shadow:0 2px 10px rgba(0,0,0,.2),0 1px 2px rgba(0,0,0,.15)}.dark .login-button-new:hover{background:#f1f5f9;box-shadow:0 10px 20px rgba(0,0,0,.25),0 3px 6px rgba(0,0,0,.2)}.mobile-menu-new{z-index:40;width:100%;overflow:hidden;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.3s;background:hsla(0,0%,100%,.8);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);box-shadow:0 4px 20px rgba(0,0,0,.06);max-height:0;opacity:0}.mobile-menu-new,.mobile-menu-new.open{border-bottom:1px solid rgba(241,245,249,.8)}.mobile-menu-new.open{max-height:500px;opacity:1}.dark .mobile-menu-new{background:rgba(15,23,42,.8);box-shadow:0 4px 20px rgba(0,0,0,.2);border-bottom:1px solid rgba(30,41,59,.8)}.mobile-nav-item{display:flex;align-items:center}.mobile-nav-item>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(.75rem*var(--tw-space-x-reverse));margin-left:calc(.75rem*(1 - var(--tw-space-x-reverse)))}.mobile-nav-item{border-radius:.5rem;padding:.75rem 1rem;--tw-text-opacity:1;color:rgb(30 41 59/var(--tw-text-opacity,1));transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.3s}.mobile-nav-item:is(.dark *){--tw-text-opacity:1;color:rgb(226 232 240/var(--tw-text-opacity,1))}.mobile-nav-item:hover{background:rgba(241,245,249,.8)}.dark .mobile-nav-item:hover{background:rgba(30,41,59,.6)}.mobile-nav-item.active{background:rgba(241,245,249,.9);color:#000;font-weight:500}.dark .mobile-nav-item.active{background:rgba(30,41,59,.8);color:#fff}.mb-stat-card{background:linear-gradient(135deg,rgba(240,249,255,.6),rgba(230,242,255,.6));color:#0f172a;position:relative;overflow:hidden;border:none;border-radius:var(--card-radius);backdrop-filter:blur(20px) saturate(180%) brightness(110%);-webkit-backdrop-filter:blur(20px) saturate(180%) brightness(110%);box-shadow:0 25px 50px rgba(0,0,0,.15),0 0 0 1px hsla(0,0%,100%,.1);padding:1.5rem;margin:1rem;transition:transform .3s ease,box-shadow .3s ease}.dark .mb-stat-card{background:linear-gradient(135deg,rgba(0,0,0,.7),hsla(0,0%,4%,.7));color:var(--text-primary,#f8fafc);box-shadow:0 25px 50px rgba(0,0,0,.3),0 0 0 1px hsla(0,0%,100%,.05)}.job-card,.stats-card{border-radius:.75rem;border-width:1px;border-color:rgba(229,231,235,.7);background-color:hsla(0,0%,100%,.6);--tw-shadow:0 25px 50px -12px rgba(0,0,0,.25);--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);--tw-backdrop-blur:blur(40px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.3s}.job-card:is(.dark *),.stats-card:is(.dark *){border-color:rgba(51,65,85,.2);background-color:rgba(0,0,0,.8)}.job-card,.stats-card{backdrop-filter:blur(24px) saturate(200%) brightness(120%);-webkit-backdrop-filter:blur(24px) saturate(200%) brightness(120%);box-shadow:0 25px 50px rgba(0,0,0,.2),0 0 0 1px hsla(0,0%,100%,.1);border-radius:var(--card-radius)}footer{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.3s;background:hsla(0,0%,100%,.1);backdrop-filter:blur(30px) saturate(180%) brightness(120%);-webkit-backdrop-filter:blur(30px) saturate(180%) brightness(120%);border-top:1px solid hsla(0,0%,100%,.2);box-shadow:0 -8px 32px rgba(0,0,0,.1),0 -2px 8px rgba(0,0,0,.05),inset 0 1px 0 hsla(0,0%,100%,.2),0 0 0 1px hsla(0,0%,100%,.05)}.dark footer{background:rgba(0,0,0,.3);backdrop-filter:blur(30px) saturate(160%) brightness(110%);-webkit-backdrop-filter:blur(30px) saturate(160%) brightness(110%);border-top:1px solid hsla(0,0%,100%,.1);box-shadow:0 -8px 32px rgba(0,0,0,.3),0 -2px 8px rgba(0,0,0,.2),inset 0 1px 0 hsla(0,0%,100%,.1),0 0 0 1px hsla(0,0%,100%,.03)}.dropdown-arrow{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.3s}.mercedes-star-bg{position:relative}.mercedes-star-bg:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' fill='currentColor' opacity='.05'%3E%3Cpath d='M58.6 4.5C53 1.6 46.7 0 40 0S27 1.6 21.4 4.5C8.7 11.2 0 24.6 0 40s8.7 28.8 21.5 35.5C27 78.3 33.3 80 40 80s12.9-1.7 18.5-4.6C71.3 68.8 80 55.4 80 40S71.3 11.2 58.6 4.5M4 40c0-13.1 7-24.5 17.5-30.9C26.6 6 32.5 4.2 39 4l-4.5 32.7-13 10.1L8.3 57.1C5.6 52 4 46.2 4 40m54.6 30.8C53.1 74.1 46.8 76 40 76s-13.2-1.9-18.6-5.2c-4.9-2.9-8.9-6.9-11.9-11.7l11.9-4.9L40 46.6l18.6 7.5 12 4.9c-3 4.9-7.2 8.9-12 11.8m0-24-12.9-10L41.1 4c6.3.2 12.3 2 17.4 5.1C69 15.4 76 26.9 76 40c0 6.2-1.5 12-4.3 17.1z'/%3E%3C/svg%3E");background-position:50%;background-repeat:repeat;background-size:40px 40px;z-index:-1;opacity:.05}.dark .mercedes-star-bg:after{opacity:.02;filter:invert(1) brightness(.4)}.glass-effect{backdrop-filter:blur(20px) saturate(180%) brightness(110%);-webkit-backdrop-filter:blur(20px) saturate(180%) brightness(110%);background:hsla(0,0%,100%,.1);border:1px solid hsla(0,0%,100%,.2);box-shadow:0 8px 32px rgba(0,0,0,.1),inset 0 1px 0 hsla(0,0%,100%,.3)}.dark .glass-effect{background:rgba(0,0,0,.3);border:1px solid hsla(0,0%,100%,.1);box-shadow:0 8px 32px rgba(0,0,0,.3),inset 0 1px 0 hsla(0,0%,100%,.15)}.glass-hover{transition:all .3s cubic-bezier(.4,0,.2,1)}.glass-hover:hover{transform:translateY(-2px);backdrop-filter:blur(25px) saturate(200%) brightness(120%);-webkit-backdrop-filter:blur(25px) saturate(200%) brightness(120%);box-shadow:0 20px 40px rgba(0,0,0,.15),0 8px 16px rgba(0,0,0,.1),inset 0 1px 0 hsla(0,0%,100%,.4)}.dark .glass-hover:hover{box-shadow:0 20px 40px rgba(0,0,0,.4),0 8px 16px rgba(0,0,0,.3),inset 0 1px 0 hsla(0,0%,100%,.2)}.printer-card-new{position:relative;overflow:hidden;border-radius:.75rem;border-width:1px;border-color:rgba(229,231,235,.7);background-image:linear-gradient(to bottom right,var(--tw-gradient-stops));--tw-gradient-from:hsla(0,0%,100%,.9) var(--tw-gradient-from-position);--tw-gradient-to:hsla(0,0%,100%,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to);--tw-gradient-to:hsla(0,0%,100%,.7) var(--tw-gradient-to-position);padding:1.25rem;--tw-shadow:0 25px 50px -12px rgba(0,0,0,.25);--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);--tw-backdrop-blur:blur(40px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.3s}.printer-card-new:hover{--tw-translate-y:-0.25rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.printer-card-new:is(.dark *){border-color:rgba(51,65,85,.3);--tw-gradient-from:rgba(30,41,59,.9) var(--tw-gradient-from-position);--tw-gradient-to:rgba(30,41,59,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to);--tw-gradient-to:rgba(15,23,42,.7) var(--tw-gradient-to-position)}.printer-card-new{box-shadow:0 20px 40px rgba(0,0,0,.08),0 10px 20px rgba(0,0,0,.06),0 0 0 1px hsla(0,0%,100%,.1);border-radius:var(--card-radius,1rem)}.dark .printer-card-new{box-shadow:0 20px 40px rgba(0,0,0,.4),0 10px 20px rgba(0,0,0,.3),0 0 0 1px hsla(0,0%,100%,.05)}.printer-card-new.online{--tw-border-opacity:1;border-color:rgb(187 247 208/var(--tw-border-opacity,1));background-image:linear-gradient(to bottom right,var(--tw-gradient-stops));--tw-gradient-from:rgba(240,253,244,.9) var(--tw-gradient-from-position);--tw-gradient-to:rgba(240,253,244,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to);--tw-gradient-to:rgba(236,253,245,.8) var(--tw-gradient-to-position)}.printer-card-new.online:is(.dark *){border-color:rgba(21,128,61,.5);--tw-gradient-from:rgba(20,83,45,.3) var(--tw-gradient-from-position);--tw-gradient-to:rgba(20,83,45,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to);--tw-gradient-to:rgba(6,78,59,.2) var(--tw-gradient-to-position)}.printer-card-new.online{box-shadow:0 20px 40px rgba(0,122,85,.08),0 10px 20px rgba(0,122,85,.06),0 0 0 1px rgba(209,250,229,.4)}.dark .printer-card-new.online{box-shadow:0 20px 40px rgba(0,0,0,.3),0 10px 20px rgba(0,0,0,.2),0 0 0 1px rgba(16,185,129,.2)}.status-badge-new{display:inline-flex;align-items:center}.status-badge-new>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(.25rem*var(--tw-space-x-reverse));margin-left:calc(.25rem*(1 - var(--tw-space-x-reverse)))}.status-badge-new{border-radius:9999px;padding:.25rem .625rem;font-size:.75rem;line-height:1rem;font-weight:500;--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);background:hsla(0,0%,100%,.9);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 2px 5px rgba(0,0,0,.05)}.dark .status-badge-new{background:rgba(30,41,59,.7);box-shadow:0 2px 5px rgba(0,0,0,.2)}.status-badge-new.online{background-color:rgba(220,252,231,.9);--tw-text-opacity:1;color:rgb(22 101 52/var(--tw-text-opacity,1))}.status-badge-new.online:is(.dark *){background-color:rgba(20,83,45,.6);--tw-text-opacity:1;color:rgb(134 239 172/var(--tw-text-opacity,1))}.status-badge-new.offline{background-color:hsla(0,93%,94%,.9);--tw-text-opacity:1;color:rgb(153 27 27/var(--tw-text-opacity,1))}.status-badge-new.offline:is(.dark *){background-color:rgba(127,29,29,.6);--tw-text-opacity:1;color:rgb(252 165 165/var(--tw-text-opacity,1))}.filter-bar-new{border-radius:.5rem;border-width:1px;border-color:rgba(229,231,235,.6);background-color:hsla(0,0%,100%,.8);padding:.375rem;--tw-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color),0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);--tw-backdrop-blur:blur(24px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.filter-bar-new:is(.dark *){border-color:rgba(51,65,85,.3);background-color:rgba(30,41,59,.8)}.filter-bar-new{box-shadow:0 10px 25px rgba(0,0,0,.05),0 5px 10px rgba(0,0,0,.03),0 0 0 1px hsla(0,0%,100%,.2)}.dark .filter-bar-new{box-shadow:0 10px 25px rgba(0,0,0,.2),0 5px 10px rgba(0,0,0,.15),0 0 0 1px hsla(0,0%,100%,.05)}.filter-btn-new{border-radius:.375rem;padding:.5rem .875rem;font-size:.875rem;line-height:1.25rem;font-weight:500;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.3s}.filter-btn-new.active{--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity,1));--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1));--tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.filter-btn-new.active:is(.dark *){--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1));--tw-text-opacity:1;color:rgb(15 23 42/var(--tw-text-opacity,1))}.filter-btn-new.active{box-shadow:0 4px 10px rgba(0,0,0,.1)}.dark .filter-btn-new.active{box-shadow:0 4px 10px rgba(0,0,0,.3)}.action-btn-new{display:flex;align-items:center;justify-content:center;gap:.5rem;border-radius:.5rem;padding:.625rem 1rem;font-size:.875rem;line-height:1.25rem;font-weight:500;--tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.3s}.action-btn-new:hover{--tw-translate-y:-0.125rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.action-btn-new{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.action-btn-new.primary{--tw-bg-opacity:1;background-color:rgb(79 70 229/var(--tw-bg-opacity,1));--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.action-btn-new.primary:hover{--tw-bg-opacity:1;background-color:rgb(67 56 202/var(--tw-bg-opacity,1))}.action-btn-new.primary:is(.dark *){--tw-bg-opacity:1;background-color:rgb(79 70 229/var(--tw-bg-opacity,1))}.action-btn-new.primary:hover:is(.dark *){--tw-bg-opacity:1;background-color:rgb(99 102 241/var(--tw-bg-opacity,1))}.action-btn-new.primary{box-shadow:0 5px 15px rgba(79,70,229,.2)}.dark .action-btn-new.primary{box-shadow:0 5px 15px rgba(79,70,229,.3)}.action-btn-new.success{--tw-bg-opacity:1;background-color:rgb(22 163 74/var(--tw-bg-opacity,1));--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.action-btn-new.success:hover{--tw-bg-opacity:1;background-color:rgb(21 128 61/var(--tw-bg-opacity,1))}.action-btn-new.success:is(.dark *){--tw-bg-opacity:1;background-color:rgb(22 163 74/var(--tw-bg-opacity,1))}.action-btn-new.success:hover:is(.dark *){--tw-bg-opacity:1;background-color:rgb(34 197 94/var(--tw-bg-opacity,1))}.action-btn-new.success{box-shadow:0 5px 15px rgba(16,185,129,.2)}.dark .action-btn-new.success{box-shadow:0 5px 15px rgba(16,185,129,.3)}.action-btn-new.danger{--tw-bg-opacity:1;background-color:rgb(220 38 38/var(--tw-bg-opacity,1));--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.action-btn-new.danger:hover{--tw-bg-opacity:1;background-color:rgb(185 28 28/var(--tw-bg-opacity,1))}.action-btn-new.danger:is(.dark *){--tw-bg-opacity:1;background-color:rgb(220 38 38/var(--tw-bg-opacity,1))}.action-btn-new.danger:hover:is(.dark *){--tw-bg-opacity:1;background-color:rgb(239 68 68/var(--tw-bg-opacity,1))}.action-btn-new.danger{box-shadow:0 5px 15px rgba(239,68,68,.2)}.dark .action-btn-new.danger{box-shadow:0 5px 15px rgba(239,68,68,.3)}.printer-info-row{margin-bottom:.375rem;display:flex;align-items:center;gap:.5rem;font-size:.75rem;line-height:1rem;--tw-text-opacity:1;color:rgb(51 65 85/var(--tw-text-opacity,1))}.printer-info-row:is(.dark *){--tw-text-opacity:1;color:rgb(203 213 225/var(--tw-text-opacity,1))}@media (min-width:640px){.printer-info-row{font-size:.875rem;line-height:1.25rem}}.printer-info-icon{height:.875rem;width:.875rem;flex-shrink:0;--tw-text-opacity:1;color:rgb(100 116 139/var(--tw-text-opacity,1))}.printer-info-icon:is(.dark *){--tw-text-opacity:1;color:rgb(148 163 184/var(--tw-text-opacity,1))}@media (min-width:640px){.printer-info-icon{height:1rem;width:1rem}}.online-indicator{position:absolute;top:.625rem;right:.625rem;height:.75rem;width:.75rem;border-radius:9999px;--tw-bg-opacity:1;background-color:rgb(34 197 94/var(--tw-bg-opacity,1));--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.dark-mode-toggle-premium .online-indicator{box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05)}.dark .dark-mode-toggle-premium .online-indicator{box-shadow:0 10px 15px -3px rgba(0,0,0,.3),0 4px 6px -2px rgba(0,0,0,.2)}.online-indicator{box-shadow:0 0 0 rgba(16,185,129,.6);animation:pulse-ring 2s cubic-bezier(.455,.03,.515,.955) infinite}@keyframes pulse-ring{0%{box-shadow:0 0 0 0 rgba(16,185,129,.6)}70%{box-shadow:0 0 0 6px rgba(16,185,129,0)}to{box-shadow:0 0 0 0 rgba(16,185,129,0)}}.status-overview-new{display:flex;flex-wrap:wrap;gap:.75rem;border-radius:.5rem;border-width:1px;border-color:rgba(229,231,235,.6);background-color:hsla(0,0%,100%,.6);padding:.75rem;font-size:.75rem;line-height:1rem;--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);--tw-backdrop-blur:blur(24px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.dark-mode-toggle-premium .status-overview-new{box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05)}.dark .dark-mode-toggle-premium .status-overview-new{box-shadow:0 10px 15px -3px rgba(0,0,0,.3),0 4px 6px -2px rgba(0,0,0,.2)}.status-overview-new:is(.dark *){border-color:rgba(51,65,85,.3);background-color:rgba(30,41,59,.6)}@media (min-width:640px){.status-overview-new{font-size:.875rem;line-height:1.25rem}}.status-overview-new{box-shadow:0 10px 25px rgba(0,0,0,.04),0 5px 10px rgba(0,0,0,.02),0 0 0 1px hsla(0,0%,100%,.1)}.dark .status-overview-new{box-shadow:0 10px 25px rgba(0,0,0,.15),0 5px 10px rgba(0,0,0,.1),0 0 0 1px hsla(0,0%,100%,.03)}.status-dot{height:.625rem;width:.625rem;border-radius:9999px}.status-dot.online{--tw-bg-opacity:1;background-color:rgb(34 197 94/var(--tw-bg-opacity,1));animation:pulse-dot 2s cubic-bezier(.455,.03,.515,.955) infinite}.status-dot.offline{--tw-bg-opacity:1;background-color:rgb(239 68 68/var(--tw-bg-opacity,1))}@keyframes pulse-dot{0%{transform:scale(.95);opacity:1}50%{transform:scale(1.1);opacity:.8}to{transform:scale(.95);opacity:1}}.modal-new{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;background-color:rgba(0,0,0,.4);padding:1rem;--tw-backdrop-blur:blur(4px)}.modal-content-new,.modal-new{-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.modal-content-new{width:100%;max-width:28rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));border-radius:1rem;border-width:1px;border-color:rgba(229,231,235,.6);background-color:hsla(0,0%,100%,.9);padding:1.5rem;--tw-shadow:0 25px 50px -12px rgba(0,0,0,.25);--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);--tw-backdrop-blur:blur(40px);transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.3s}.modal-content-new:is(.dark *){border-color:rgba(51,65,85,.3);background-color:rgba(30,41,59,.9)}.modal-content-new{box-shadow:0 25px 50px rgba(0,0,0,.15),0 15px 30px rgba(0,0,0,.1),0 20px 25px -5px rgba(0,0,0,.5),0 10px 10px -5px rgba(0,0,0,.3)}.user-dropdown-item{display:flex;cursor:pointer;align-items:center;padding:.75rem 1rem;font-size:.875rem;line-height:1.25rem;--tw-text-opacity:1;color:rgb(51 65 85/var(--tw-text-opacity,1));transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s}.user-dropdown-item:hover{--tw-bg-opacity:1;background-color:rgb(248 250 252/var(--tw-bg-opacity,1))}.user-dropdown-item:is(.dark *){--tw-text-opacity:1;color:rgb(226 232 240/var(--tw-text-opacity,1))}.user-dropdown-item:hover:is(.dark *){--tw-bg-opacity:1;background-color:rgb(30 41 59/var(--tw-bg-opacity,1))}.user-dropdown-item:first-child{border-top-left-radius:.75rem;border-top-right-radius:.75rem}.user-dropdown-item:last-child{border-bottom-right-radius:.75rem;border-bottom-left-radius:.75rem}.user-dropdown-item:hover{background:rgba(248,250,252,.8);transform:translateX(2px)}.dark .user-dropdown-item:hover{background:rgba(30,41,59,.8)}.user-dropdown-icon{margin-right:.75rem;height:1rem;width:1rem;--tw-text-opacity:1;color:rgb(100 116 139/var(--tw-text-opacity,1));transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s}.user-dropdown-icon:is(.dark *){--tw-text-opacity:1;color:rgb(148 163 184/var(--tw-text-opacity,1))}.user-dropdown-item:hover .user-dropdown-icon{--tw-text-opacity:1;color:rgb(51 65 85/var(--tw-text-opacity,1))}.user-dropdown-item:hover .user-dropdown-icon:is(.dark *){--tw-text-opacity:1;color:rgb(226 232 240/var(--tw-text-opacity,1))}.user-dropdown-divider{margin-top:.25rem;margin-bottom:.25rem;border-top-width:1px;--tw-border-opacity:1;border-color:rgb(226 232 240/var(--tw-border-opacity,1))}.user-dropdown-divider:is(.dark *){--tw-border-opacity:1;border-color:rgb(51 65 85/var(--tw-border-opacity,1))}.user-info-section{border-bottom-width:1px;--tw-border-opacity:1;border-color:rgb(226 232 240/var(--tw-border-opacity,1));padding:.75rem 1rem}.user-info-section:is(.dark *){--tw-border-opacity:1;border-color:rgb(51 65 85/var(--tw-border-opacity,1))}.user-info-section{background:rgba(248,250,252,.5)}.dark .user-info-section{background:rgba(30,41,59,.5)}.user-info-name{font-size:.875rem;line-height:1.25rem;font-weight:600;--tw-text-opacity:1;color:rgb(15 23 42/var(--tw-text-opacity,1))}.user-info-name:is(.dark *){--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.user-info-role{margin-top:.25rem;font-size:.75rem;line-height:1rem;--tw-text-opacity:1;color:rgb(100 116 139/var(--tw-text-opacity,1))}.user-info-role:is(.dark *){--tw-text-opacity:1;color:rgb(148 163 184/var(--tw-text-opacity,1))}.dark\:bg-dark-surface:is(.dark *){background-color:#1e293b}.hover\:-translate-y-0:hover{--tw-translate-y:-0px}.hover\:-translate-y-0:hover,.hover\:-translate-y-0\.5:hover{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:-translate-y-0\.5:hover{--tw-translate-y:-0.125rem}.hover\:-translate-y-1:hover{--tw-translate-y:-0.25rem}.hover\:-translate-y-1:hover,.hover\:-translate-y-2:hover{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:-translate-y-2:hover{--tw-translate-y:-0.5rem}.hover\:rotate-12:hover{--tw-rotate:12deg}.hover\:rotate-12:hover,.hover\:scale-105:hover{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:scale-105:hover{--tw-scale-x:1.05;--tw-scale-y:1.05}.hover\:scale-110:hover{--tw-scale-x:1.1;--tw-scale-y:1.1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:bg-black\/70:hover{background-color:rgba(0,0,0,.7)}.hover\:bg-blue-600:hover{--tw-bg-opacity:1;background-color:rgb(37 99 235/var(--tw-bg-opacity,1))}.hover\:bg-blue-700:hover{--tw-bg-opacity:1;background-color:rgb(29 78 216/var(--tw-bg-opacity,1))}.hover\:bg-gray-100:hover{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity,1))}.hover\:bg-gray-100\/80:hover{background-color:rgba(243,244,246,.8)}.hover\:bg-gray-300:hover{--tw-bg-opacity:1;background-color:rgb(209 213 219/var(--tw-bg-opacity,1))}.hover\:bg-gray-400:hover{--tw-bg-opacity:1;background-color:rgb(156 163 175/var(--tw-bg-opacity,1))}.hover\:bg-gray-50:hover{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity,1))}.hover\:bg-gray-600:hover{--tw-bg-opacity:1;background-color:rgb(75 85 99/var(--tw-bg-opacity,1))}.hover\:bg-gray-800:hover{--tw-bg-opacity:1;background-color:rgb(31 41 55/var(--tw-bg-opacity,1))}.hover\:bg-green-600:hover{--tw-bg-opacity:1;background-color:rgb(22 163 74/var(--tw-bg-opacity,1))}.hover\:bg-green-700:hover{--tw-bg-opacity:1;background-color:rgb(21 128 61/var(--tw-bg-opacity,1))}.hover\:bg-indigo-600:hover{--tw-bg-opacity:1;background-color:rgb(79 70 229/var(--tw-bg-opacity,1))}.hover\:bg-indigo-600\/20:hover{background-color:rgba(79,70,229,.2)}.hover\:bg-indigo-700:hover{--tw-bg-opacity:1;background-color:rgb(67 56 202/var(--tw-bg-opacity,1))}.hover\:bg-orange-600:hover{--tw-bg-opacity:1;background-color:rgb(234 88 12/var(--tw-bg-opacity,1))}.hover\:bg-purple-600:hover{--tw-bg-opacity:1;background-color:rgb(147 51 234/var(--tw-bg-opacity,1))}.hover\:bg-red-50:hover{--tw-bg-opacity:1;background-color:rgb(254 242 242/var(--tw-bg-opacity,1))}.hover\:bg-red-600:hover{--tw-bg-opacity:1;background-color:rgb(220 38 38/var(--tw-bg-opacity,1))}.hover\:bg-red-700:hover{--tw-bg-opacity:1;background-color:rgb(185 28 28/var(--tw-bg-opacity,1))}.hover\:bg-slate-100:hover{--tw-bg-opacity:1;background-color:rgb(241 245 249/var(--tw-bg-opacity,1))}.hover\:bg-slate-100\/80:hover{background-color:rgba(241,245,249,.8)}.hover\:bg-slate-200:hover{--tw-bg-opacity:1;background-color:rgb(226 232 240/var(--tw-bg-opacity,1))}.hover\:bg-slate-300:hover{--tw-bg-opacity:1;background-color:rgb(203 213 225/var(--tw-bg-opacity,1))}.hover\:bg-slate-50:hover{--tw-bg-opacity:1;background-color:rgb(248 250 252/var(--tw-bg-opacity,1))}.hover\:bg-slate-600:hover{--tw-bg-opacity:1;background-color:rgb(71 85 105/var(--tw-bg-opacity,1))}.hover\:bg-teal-600:hover{--tw-bg-opacity:1;background-color:rgb(13 148 136/var(--tw-bg-opacity,1))}.hover\:bg-white:hover{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.hover\:bg-white\/20:hover{background-color:hsla(0,0%,100%,.2)}.hover\:bg-white\/50:hover{background-color:hsla(0,0%,100%,.5)}.hover\:bg-yellow-600:hover{--tw-bg-opacity:1;background-color:rgb(202 138 4/var(--tw-bg-opacity,1))}.hover\:from-blue-600:hover{--tw-gradient-from:#2563eb var(--tw-gradient-from-position);--tw-gradient-to:rgba(37,99,235,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.hover\:from-green-600:hover{--tw-gradient-from:#16a34a var(--tw-gradient-from-position);--tw-gradient-to:rgba(22,163,74,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.hover\:from-red-600:hover{--tw-gradient-from:#dc2626 var(--tw-gradient-from-position);--tw-gradient-to:rgba(220,38,38,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.hover\:from-slate-600:hover{--tw-gradient-from:#475569 var(--tw-gradient-from-position);--tw-gradient-to:rgba(71,85,105,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.hover\:to-blue-700:hover{--tw-gradient-to:#1d4ed8 var(--tw-gradient-to-position)}.hover\:to-emerald-700:hover{--tw-gradient-to:#047857 var(--tw-gradient-to-position)}.hover\:to-green-700:hover{--tw-gradient-to:#15803d var(--tw-gradient-to-position)}.hover\:to-indigo-700:hover{--tw-gradient-to:#4338ca var(--tw-gradient-to-position)}.hover\:to-red-700:hover{--tw-gradient-to:#b91c1c var(--tw-gradient-to-position)}.hover\:to-slate-700:hover{--tw-gradient-to:#334155 var(--tw-gradient-to-position)}.hover\:text-blue-700:hover{--tw-text-opacity:1;color:rgb(29 78 216/var(--tw-text-opacity,1))}.hover\:text-blue-800:hover{--tw-text-opacity:1;color:rgb(30 64 175/var(--tw-text-opacity,1))}.hover\:text-blue-900:hover{--tw-text-opacity:1;color:rgb(30 58 138/var(--tw-text-opacity,1))}.hover\:text-gray-500:hover{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity,1))}.hover\:text-gray-600:hover{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity,1))}.hover\:text-red-700:hover{--tw-text-opacity:1;color:rgb(185 28 28/var(--tw-text-opacity,1))}.hover\:text-red-900:hover{--tw-text-opacity:1;color:rgb(127 29 29/var(--tw-text-opacity,1))}.hover\:text-slate-600:hover{--tw-text-opacity:1;color:rgb(71 85 105/var(--tw-text-opacity,1))}.hover\:text-slate-700:hover{--tw-text-opacity:1;color:rgb(51 65 85/var(--tw-text-opacity,1))}.hover\:text-slate-900:hover{--tw-text-opacity:1;color:rgb(15 23 42/var(--tw-text-opacity,1))}.hover\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.hover\:underline:hover{text-decoration-line:underline}.hover\:opacity-75:hover{opacity:.75}.hover\:shadow-2xl:hover{--tw-shadow:0 25px 50px -12px rgba(0,0,0,.25);--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color)}.hover\:shadow-2xl:hover,.hover\:shadow-lg:hover{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.hover\:shadow-lg:hover{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.hover\:shadow-md:hover{--tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color)}.hover\:shadow-md:hover,.hover\:shadow-xl:hover{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.hover\:shadow-xl:hover{--tw-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color),0 8px 10px -6px var(--tw-shadow-color)}.focus\:border-blue-500:focus{--tw-border-opacity:1;border-color:rgb(59 130 246/var(--tw-border-opacity,1))}.focus\:border-blue-600:focus{--tw-border-opacity:1;border-color:rgb(37 99 235/var(--tw-border-opacity,1))}.focus\:border-transparent:focus{border-color:transparent}.focus\:bg-gray-100\/80:focus{background-color:rgba(243,244,246,.8)}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:ring-2:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.focus\:ring-2:focus,.focus\:ring-4:focus{box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus\:ring-4:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.focus\:ring-black:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(0 0 0/var(--tw-ring-opacity,1))}.focus\:ring-blue-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(59 130 246/var(--tw-ring-opacity,1))}.focus\:ring-blue-500\/25:focus{--tw-ring-color:rgba(59,130,246,.25)}.focus\:ring-blue-600:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(37 99 235/var(--tw-ring-opacity,1))}.focus\:ring-gray-300:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(209 213 219/var(--tw-ring-opacity,1))}.focus\:ring-gray-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(107 114 128/var(--tw-ring-opacity,1))}.focus\:ring-indigo-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(99 102 241/var(--tw-ring-opacity,1))}.focus\:ring-slate-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(100 116 139/var(--tw-ring-opacity,1))}.focus\:ring-offset-2:focus{--tw-ring-offset-width:2px}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:bg-gray-100:disabled{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity,1))}.disabled\:opacity-50:disabled{opacity:.5}.group:focus-within .group-focus-within\:text-blue-500{--tw-text-opacity:1;color:rgb(59 130 246/var(--tw-text-opacity,1))}.group:hover .group-hover\:rotate-12{--tw-rotate:12deg}.group:hover .group-hover\:rotate-12,.group:hover .group-hover\:rotate-180{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\:rotate-180{--tw-rotate:180deg}.group:hover .group-hover\:rotate-90{--tw-rotate:90deg}.group:hover .group-hover\:rotate-90,.group:hover .group-hover\:scale-105{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\:scale-105{--tw-scale-x:1.05;--tw-scale-y:1.05}.group:hover .group-hover\:scale-110{--tw-scale-x:1.1;--tw-scale-y:1.1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\:text-blue-500{--tw-text-opacity:1;color:rgb(59 130 246/var(--tw-text-opacity,1))}.group:hover .group-hover\:text-slate-600{--tw-text-opacity:1;color:rgb(71 85 105/var(--tw-text-opacity,1))}.group:hover .group-hover\:opacity-100{opacity:1}.group:active .group-active\:scale-95{--tw-scale-x:.95;--tw-scale-y:.95;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.dark\:inline:is(.dark *){display:inline}.dark\:hidden:is(.dark *){display:none}.dark\:rotate-0:is(.dark *){--tw-rotate:0deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.dark\:rotate-90:is(.dark *){--tw-rotate:90deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.dark\:scale-100:is(.dark *){--tw-scale-x:1;--tw-scale-y:1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.dark\:scale-75:is(.dark *){--tw-scale-x:.75;--tw-scale-y:.75;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.dark\:divide-gray-700:is(.dark *)>:not([hidden])~:not([hidden]){--tw-divide-opacity:1;border-color:rgb(55 65 81/var(--tw-divide-opacity,1))}.dark\:divide-slate-700:is(.dark *)>:not([hidden])~:not([hidden]){--tw-divide-opacity:1;border-color:rgb(51 65 85/var(--tw-divide-opacity,1))}.dark\:border-blue-500:is(.dark *){--tw-border-opacity:1;border-color:rgb(59 130 246/var(--tw-border-opacity,1))}.dark\:border-blue-700:is(.dark *){--tw-border-opacity:1;border-color:rgb(29 78 216/var(--tw-border-opacity,1))}.dark\:border-blue-800:is(.dark *){--tw-border-opacity:1;border-color:rgb(30 64 175/var(--tw-border-opacity,1))}.dark\:border-dark-border:is(.dark *){--tw-border-opacity:1;border-color:rgb(51 65 85/var(--tw-border-opacity,1))}.dark\:border-gray-600:is(.dark *){--tw-border-opacity:1;border-color:rgb(75 85 99/var(--tw-border-opacity,1))}.dark\:border-gray-700:is(.dark *){--tw-border-opacity:1;border-color:rgb(55 65 81/var(--tw-border-opacity,1))}.dark\:border-green-600:is(.dark *){--tw-border-opacity:1;border-color:rgb(22 163 74/var(--tw-border-opacity,1))}.dark\:border-green-700:is(.dark *){--tw-border-opacity:1;border-color:rgb(21 128 61/var(--tw-border-opacity,1))}.dark\:border-green-800\/30:is(.dark *){border-color:rgba(22,101,52,.3)}.dark\:border-indigo-400:is(.dark *){--tw-border-opacity:1;border-color:rgb(129 140 248/var(--tw-border-opacity,1))}.dark\:border-red-600:is(.dark *){--tw-border-opacity:1;border-color:rgb(220 38 38/var(--tw-border-opacity,1))}.dark\:border-red-700:is(.dark *){--tw-border-opacity:1;border-color:rgb(185 28 28/var(--tw-border-opacity,1))}.dark\:border-red-800:is(.dark *){--tw-border-opacity:1;border-color:rgb(153 27 27/var(--tw-border-opacity,1))}.dark\:border-slate-600:is(.dark *){--tw-border-opacity:1;border-color:rgb(71 85 105/var(--tw-border-opacity,1))}.dark\:border-slate-600\/20:is(.dark *){border-color:rgba(71,85,105,.2)}.dark\:border-slate-600\/30:is(.dark *){border-color:rgba(71,85,105,.3)}.dark\:border-slate-600\/50:is(.dark *){border-color:rgba(71,85,105,.5)}.dark\:border-slate-600\/60:is(.dark *){border-color:rgba(71,85,105,.6)}.dark\:border-slate-700:is(.dark *){--tw-border-opacity:1;border-color:rgb(51 65 85/var(--tw-border-opacity,1))}.dark\:border-slate-700\/20:is(.dark *){border-color:rgba(51,65,85,.2)}.dark\:border-slate-700\/30:is(.dark *){border-color:rgba(51,65,85,.3)}.dark\:border-slate-700\/50:is(.dark *){border-color:rgba(51,65,85,.5)}.dark\:border-white:is(.dark *){--tw-border-opacity:1;border-color:rgb(255 255 255/var(--tw-border-opacity,1))}.dark\:border-white\/70:is(.dark *){border-color:hsla(0,0%,100%,.7)}.dark\:border-yellow-700:is(.dark *){--tw-border-opacity:1;border-color:rgb(161 98 7/var(--tw-border-opacity,1))}.dark\:border-yellow-800:is(.dark *){--tw-border-opacity:1;border-color:rgb(133 77 14/var(--tw-border-opacity,1))}.dark\:border-t-slate-700:is(.dark *){--tw-border-opacity:1;border-top-color:rgb(51 65 85/var(--tw-border-opacity,1))}.dark\:bg-amber-600:is(.dark *){--tw-bg-opacity:1;background-color:rgb(217 119 6/var(--tw-bg-opacity,1))}.dark\:bg-black:is(.dark *){--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity,1))}.dark\:bg-black\/60:is(.dark *){background-color:rgba(0,0,0,.6)}.dark\:bg-black\/70:is(.dark *){background-color:rgba(0,0,0,.7)}.dark\:bg-black\/80:is(.dark *){background-color:rgba(0,0,0,.8)}.dark\:bg-blue-400:is(.dark *){--tw-bg-opacity:1;background-color:rgb(96 165 250/var(--tw-bg-opacity,1))}.dark\:bg-blue-500:is(.dark *){--tw-bg-opacity:1;background-color:rgb(59 130 246/var(--tw-bg-opacity,1))}.dark\:bg-blue-600:is(.dark *){--tw-bg-opacity:1;background-color:rgb(37 99 235/var(--tw-bg-opacity,1))}.dark\:bg-blue-600\/70:is(.dark *){background-color:rgba(37,99,235,.7)}.dark\:bg-blue-800:is(.dark *){--tw-bg-opacity:1;background-color:rgb(30 64 175/var(--tw-bg-opacity,1))}.dark\:bg-blue-900:is(.dark *){--tw-bg-opacity:1;background-color:rgb(30 58 138/var(--tw-bg-opacity,1))}.dark\:bg-blue-900\/20:is(.dark *){background-color:rgba(30,58,138,.2)}.dark\:bg-blue-900\/30:is(.dark *){background-color:rgba(30,58,138,.3)}.dark\:bg-dark-surface:is(.dark *){--tw-bg-opacity:1;background-color:rgb(30 41 59/var(--tw-bg-opacity,1))}.dark\:bg-gray-600:is(.dark *){--tw-bg-opacity:1;background-color:rgb(75 85 99/var(--tw-bg-opacity,1))}.dark\:bg-gray-700:is(.dark *){--tw-bg-opacity:1;background-color:rgb(55 65 81/var(--tw-bg-opacity,1))}.dark\:bg-gray-800:is(.dark *){--tw-bg-opacity:1;background-color:rgb(31 41 55/var(--tw-bg-opacity,1))}.dark\:bg-gray-900:is(.dark *){--tw-bg-opacity:1;background-color:rgb(17 24 39/var(--tw-bg-opacity,1))}.dark\:bg-green-400:is(.dark *){--tw-bg-opacity:1;background-color:rgb(74 222 128/var(--tw-bg-opacity,1))}.dark\:bg-green-600:is(.dark *){--tw-bg-opacity:1;background-color:rgb(22 163 74/var(--tw-bg-opacity,1))}.dark\:bg-green-600\/70:is(.dark *){background-color:rgba(22,163,74,.7)}.dark\:bg-green-700:is(.dark *){--tw-bg-opacity:1;background-color:rgb(21 128 61/var(--tw-bg-opacity,1))}.dark\:bg-green-800:is(.dark *){--tw-bg-opacity:1;background-color:rgb(22 101 52/var(--tw-bg-opacity,1))}.dark\:bg-green-900:is(.dark *){--tw-bg-opacity:1;background-color:rgb(20 83 45/var(--tw-bg-opacity,1))}.dark\:bg-green-900\/20:is(.dark *){background-color:rgba(20,83,45,.2)}.dark\:bg-green-900\/30:is(.dark *){background-color:rgba(20,83,45,.3)}.dark\:bg-green-900\/60:is(.dark *){background-color:rgba(20,83,45,.6)}.dark\:bg-indigo-600:is(.dark *){--tw-bg-opacity:1;background-color:rgb(79 70 229/var(--tw-bg-opacity,1))}.dark\:bg-indigo-700:is(.dark *){--tw-bg-opacity:1;background-color:rgb(67 56 202/var(--tw-bg-opacity,1))}.dark\:bg-orange-900:is(.dark *){--tw-bg-opacity:1;background-color:rgb(124 45 18/var(--tw-bg-opacity,1))}.dark\:bg-orange-900\/30:is(.dark *){background-color:rgba(124,45,18,.3)}.dark\:bg-purple-900:is(.dark *){--tw-bg-opacity:1;background-color:rgb(88 28 135/var(--tw-bg-opacity,1))}.dark\:bg-purple-900\/30:is(.dark *){background-color:rgba(88,28,135,.3)}.dark\:bg-red-600:is(.dark *){--tw-bg-opacity:1;background-color:rgb(220 38 38/var(--tw-bg-opacity,1))}.dark\:bg-red-600\/70:is(.dark *){background-color:rgba(220,38,38,.7)}.dark\:bg-red-800:is(.dark *){--tw-bg-opacity:1;background-color:rgb(153 27 27/var(--tw-bg-opacity,1))}.dark\:bg-red-900:is(.dark *){--tw-bg-opacity:1;background-color:rgb(127 29 29/var(--tw-bg-opacity,1))}.dark\:bg-red-900\/20:is(.dark *){background-color:rgba(127,29,29,.2)}.dark\:bg-red-900\/30:is(.dark *){background-color:rgba(127,29,29,.3)}.dark\:bg-red-900\/60:is(.dark *){background-color:rgba(127,29,29,.6)}.dark\:bg-slate-600:is(.dark *){--tw-bg-opacity:1;background-color:rgb(71 85 105/var(--tw-bg-opacity,1))}.dark\:bg-slate-700:is(.dark *){--tw-bg-opacity:1;background-color:rgb(51 65 85/var(--tw-bg-opacity,1))}.dark\:bg-slate-700\/30:is(.dark *){background-color:rgba(51,65,85,.3)}.dark\:bg-slate-700\/50:is(.dark *){background-color:rgba(51,65,85,.5)}.dark\:bg-slate-700\/60:is(.dark *){background-color:rgba(51,65,85,.6)}.dark\:bg-slate-700\/70:is(.dark *){background-color:rgba(51,65,85,.7)}.dark\:bg-slate-700\/90:is(.dark *){background-color:rgba(51,65,85,.9)}.dark\:bg-slate-800:is(.dark *){--tw-bg-opacity:1;background-color:rgb(30 41 59/var(--tw-bg-opacity,1))}.dark\:bg-slate-800\/50:is(.dark *){background-color:rgba(30,41,59,.5)}.dark\:bg-slate-800\/60:is(.dark *){background-color:rgba(30,41,59,.6)}.dark\:bg-slate-800\/70:is(.dark *){background-color:rgba(30,41,59,.7)}.dark\:bg-slate-800\/80:is(.dark *){background-color:rgba(30,41,59,.8)}.dark\:bg-slate-800\/90:is(.dark *){background-color:rgba(30,41,59,.9)}.dark\:bg-slate-900:is(.dark *){--tw-bg-opacity:1;background-color:rgb(15 23 42/var(--tw-bg-opacity,1))}.dark\:bg-slate-900\/50:is(.dark *){background-color:rgba(15,23,42,.5)}.dark\:bg-white:is(.dark *){--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.dark\:bg-yellow-600\/70:is(.dark *){background-color:rgba(202,138,4,.7)}.dark\:bg-yellow-800:is(.dark *){--tw-bg-opacity:1;background-color:rgb(133 77 14/var(--tw-bg-opacity,1))}.dark\:bg-yellow-900:is(.dark *){--tw-bg-opacity:1;background-color:rgb(113 63 18/var(--tw-bg-opacity,1))}.dark\:bg-yellow-900\/20:is(.dark *){background-color:rgba(113,63,18,.2)}.dark\:bg-yellow-900\/30:is(.dark *){background-color:rgba(113,63,18,.3)}.dark\:bg-opacity-90:is(.dark *){--tw-bg-opacity:0.9}.dark\:bg-opacity-95:is(.dark *){--tw-bg-opacity:0.95}.dark\:from-blue-400:is(.dark *){--tw-gradient-from:#60a5fa var(--tw-gradient-from-position);--tw-gradient-to:rgba(96,165,250,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.dark\:from-blue-900\/20:is(.dark *){--tw-gradient-from:rgba(30,58,138,.2) var(--tw-gradient-from-position);--tw-gradient-to:rgba(30,58,138,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.dark\:from-gray-900:is(.dark *){--tw-gradient-from:#111827 var(--tw-gradient-from-position);--tw-gradient-to:rgba(17,24,39,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.dark\:from-green-900\/20:is(.dark *){--tw-gradient-from:rgba(20,83,45,.2) var(--tw-gradient-from-position);--tw-gradient-to:rgba(20,83,45,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.dark\:from-green-900\/30:is(.dark *){--tw-gradient-from:rgba(20,83,45,.3) var(--tw-gradient-from-position);--tw-gradient-to:rgba(20,83,45,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.dark\:from-orange-900\/20:is(.dark *){--tw-gradient-from:rgba(124,45,18,.2) var(--tw-gradient-from-position);--tw-gradient-to:rgba(124,45,18,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.dark\:from-purple-900\/20:is(.dark *){--tw-gradient-from:rgba(88,28,135,.2) var(--tw-gradient-from-position);--tw-gradient-to:rgba(88,28,135,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.dark\:from-slate-800\/90:is(.dark *){--tw-gradient-from:rgba(30,41,59,.9) var(--tw-gradient-from-position);--tw-gradient-to:rgba(30,41,59,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.dark\:from-slate-900:is(.dark *){--tw-gradient-from:#0f172a var(--tw-gradient-from-position);--tw-gradient-to:rgba(15,23,42,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.dark\:via-gray-400:is(.dark *){--tw-gradient-to:rgba(156,163,175,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),#9ca3af var(--tw-gradient-via-position),var(--tw-gradient-to)}.dark\:via-red-900\/20:is(.dark *){--tw-gradient-to:rgba(127,29,29,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),rgba(127,29,29,.2) var(--tw-gradient-via-position),var(--tw-gradient-to)}.dark\:via-slate-800:is(.dark *){--tw-gradient-to:rgba(30,41,59,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),#1e293b var(--tw-gradient-via-position),var(--tw-gradient-to)}.dark\:to-cyan-900\/20:is(.dark *){--tw-gradient-to:rgba(22,78,99,.2) var(--tw-gradient-to-position)}.dark\:to-emerald-900\/20:is(.dark *){--tw-gradient-to:rgba(6,78,59,.2) var(--tw-gradient-to-position)}.dark\:to-gray-800:is(.dark *){--tw-gradient-to:#1f2937 var(--tw-gradient-to-position)}.dark\:to-indigo-900\/20:is(.dark *){--tw-gradient-to:rgba(49,46,129,.2) var(--tw-gradient-to-position)}.dark\:to-orange-900\/20:is(.dark *){--tw-gradient-to:rgba(124,45,18,.2) var(--tw-gradient-to-position)}.dark\:to-pink-900\/20:is(.dark *){--tw-gradient-to:rgba(131,24,67,.2) var(--tw-gradient-to-position)}.dark\:to-purple-500:is(.dark *){--tw-gradient-to:#a855f7 var(--tw-gradient-to-position)}.dark\:to-red-900\/20:is(.dark *){--tw-gradient-to:rgba(127,29,29,.2) var(--tw-gradient-to-position)}.dark\:to-slate-900:is(.dark *){--tw-gradient-to:#0f172a var(--tw-gradient-to-position)}.dark\:to-slate-900\/70:is(.dark *){--tw-gradient-to:rgba(15,23,42,.7) var(--tw-gradient-to-position)}.dark\:text-amber-400:is(.dark *){--tw-text-opacity:1;color:rgb(251 191 36/var(--tw-text-opacity,1))}.dark\:text-blue-200:is(.dark *){--tw-text-opacity:1;color:rgb(191 219 254/var(--tw-text-opacity,1))}.dark\:text-blue-300:is(.dark *){--tw-text-opacity:1;color:rgb(147 197 253/var(--tw-text-opacity,1))}.dark\:text-blue-400:is(.dark *){--tw-text-opacity:1;color:rgb(96 165 250/var(--tw-text-opacity,1))}.dark\:text-dark-text:is(.dark *){--tw-text-opacity:1;color:rgb(248 250 252/var(--tw-text-opacity,1))}.dark\:text-dark-text-muted:is(.dark *){--tw-text-opacity:1;color:rgb(148 163 184/var(--tw-text-opacity,1))}.dark\:text-gray-100:is(.dark *){--tw-text-opacity:1;color:rgb(243 244 246/var(--tw-text-opacity,1))}.dark\:text-gray-200:is(.dark *){--tw-text-opacity:1;color:rgb(229 231 235/var(--tw-text-opacity,1))}.dark\:text-gray-300:is(.dark *){--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity,1))}.dark\:text-gray-400:is(.dark *){--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity,1))}.dark\:text-gray-500:is(.dark *){--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity,1))}.dark\:text-gray-600:is(.dark *){--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity,1))}.dark\:text-green-200:is(.dark *){--tw-text-opacity:1;color:rgb(187 247 208/var(--tw-text-opacity,1))}.dark\:text-green-300:is(.dark *){--tw-text-opacity:1;color:rgb(134 239 172/var(--tw-text-opacity,1))}.dark\:text-green-400:is(.dark *){--tw-text-opacity:1;color:rgb(74 222 128/var(--tw-text-opacity,1))}.dark\:text-orange-200:is(.dark *){--tw-text-opacity:1;color:rgb(254 215 170/var(--tw-text-opacity,1))}.dark\:text-orange-300:is(.dark *){--tw-text-opacity:1;color:rgb(253 186 116/var(--tw-text-opacity,1))}.dark\:text-orange-400:is(.dark *){--tw-text-opacity:1;color:rgb(251 146 60/var(--tw-text-opacity,1))}.dark\:text-purple-200:is(.dark *){--tw-text-opacity:1;color:rgb(233 213 255/var(--tw-text-opacity,1))}.dark\:text-purple-400:is(.dark *){--tw-text-opacity:1;color:rgb(192 132 252/var(--tw-text-opacity,1))}.dark\:text-red-200:is(.dark *){--tw-text-opacity:1;color:rgb(254 202 202/var(--tw-text-opacity,1))}.dark\:text-red-300:is(.dark *){--tw-text-opacity:1;color:rgb(252 165 165/var(--tw-text-opacity,1))}.dark\:text-red-400:is(.dark *){--tw-text-opacity:1;color:rgb(248 113 113/var(--tw-text-opacity,1))}.dark\:text-slate-200:is(.dark *){--tw-text-opacity:1;color:rgb(226 232 240/var(--tw-text-opacity,1))}.dark\:text-slate-300:is(.dark *){--tw-text-opacity:1;color:rgb(203 213 225/var(--tw-text-opacity,1))}.dark\:text-slate-400:is(.dark *){--tw-text-opacity:1;color:rgb(148 163 184/var(--tw-text-opacity,1))}.dark\:text-slate-500:is(.dark *){--tw-text-opacity:1;color:rgb(100 116 139/var(--tw-text-opacity,1))}.dark\:text-slate-600:is(.dark *){--tw-text-opacity:1;color:rgb(71 85 105/var(--tw-text-opacity,1))}.dark\:text-slate-900:is(.dark *){--tw-text-opacity:1;color:rgb(15 23 42/var(--tw-text-opacity,1))}.dark\:text-white:is(.dark *){--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.dark\:text-yellow-200:is(.dark *){--tw-text-opacity:1;color:rgb(254 240 138/var(--tw-text-opacity,1))}.dark\:text-yellow-300:is(.dark *){--tw-text-opacity:1;color:rgb(253 224 71/var(--tw-text-opacity,1))}.dark\:text-yellow-400:is(.dark *){--tw-text-opacity:1;color:rgb(250 204 21/var(--tw-text-opacity,1))}.dark\:placeholder-gray-400:is(.dark *)::-moz-placeholder{--tw-placeholder-opacity:1;color:rgb(156 163 175/var(--tw-placeholder-opacity,1))}.dark\:placeholder-gray-400:is(.dark *)::placeholder{--tw-placeholder-opacity:1;color:rgb(156 163 175/var(--tw-placeholder-opacity,1))}.dark\:opacity-0:is(.dark *){opacity:0}.dark\:opacity-10:is(.dark *){opacity:.1}.dark\:opacity-100:is(.dark *){opacity:1}.dark\:shadow-slate-900\/20:is(.dark *){--tw-shadow-color:rgba(15,23,42,.2);--tw-shadow:var(--tw-shadow-colored)}.dark\:ring-blue-400:is(.dark *){--tw-ring-opacity:1;--tw-ring-color:rgb(96 165 250/var(--tw-ring-opacity,1))}.dark\:ring-slate-700:is(.dark *){--tw-ring-opacity:1;--tw-ring-color:rgb(51 65 85/var(--tw-ring-opacity,1))}.dark\:ring-offset-slate-900:is(.dark *){--tw-ring-offset-color:#0f172a}.dark\:hover\:bg-blue-500:hover:is(.dark *){--tw-bg-opacity:1;background-color:rgb(59 130 246/var(--tw-bg-opacity,1))}.dark\:hover\:bg-blue-600:hover:is(.dark *){--tw-bg-opacity:1;background-color:rgb(37 99 235/var(--tw-bg-opacity,1))}.dark\:hover\:bg-gray-500:hover:is(.dark *){--tw-bg-opacity:1;background-color:rgb(107 114 128/var(--tw-bg-opacity,1))}.dark\:hover\:bg-gray-700:hover:is(.dark *){--tw-bg-opacity:1;background-color:rgb(55 65 81/var(--tw-bg-opacity,1))}.dark\:hover\:bg-green-500:hover:is(.dark *){--tw-bg-opacity:1;background-color:rgb(34 197 94/var(--tw-bg-opacity,1))}.dark\:hover\:bg-indigo-500:hover:is(.dark *){--tw-bg-opacity:1;background-color:rgb(99 102 241/var(--tw-bg-opacity,1))}.dark\:hover\:bg-red-500:hover:is(.dark *){--tw-bg-opacity:1;background-color:rgb(239 68 68/var(--tw-bg-opacity,1))}.dark\:hover\:bg-red-900\/10:hover:is(.dark *){background-color:rgba(127,29,29,.1)}.dark\:hover\:bg-slate-500:hover:is(.dark *){--tw-bg-opacity:1;background-color:rgb(100 116 139/var(--tw-bg-opacity,1))}.dark\:hover\:bg-slate-600:hover:is(.dark *){--tw-bg-opacity:1;background-color:rgb(71 85 105/var(--tw-bg-opacity,1))}.dark\:hover\:bg-slate-700:hover:is(.dark *){--tw-bg-opacity:1;background-color:rgb(51 65 85/var(--tw-bg-opacity,1))}.dark\:hover\:bg-slate-700\/50:hover:is(.dark *){background-color:rgba(51,65,85,.5)}.dark\:hover\:bg-slate-700\/60:hover:is(.dark *){background-color:rgba(51,65,85,.6)}.dark\:hover\:bg-slate-800:hover:is(.dark *){--tw-bg-opacity:1;background-color:rgb(30 41 59/var(--tw-bg-opacity,1))}.dark\:hover\:bg-slate-800\/50:hover:is(.dark *){background-color:rgba(30,41,59,.5)}.dark\:hover\:bg-white\/70:hover:is(.dark *){background-color:hsla(0,0%,100%,.7)}.dark\:hover\:text-blue-200:hover:is(.dark *){--tw-text-opacity:1;color:rgb(191 219 254/var(--tw-text-opacity,1))}.dark\:hover\:text-blue-300:hover:is(.dark *){--tw-text-opacity:1;color:rgb(147 197 253/var(--tw-text-opacity,1))}.dark\:hover\:text-gray-300:hover:is(.dark *){--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity,1))}.dark\:hover\:text-red-200:hover:is(.dark *){--tw-text-opacity:1;color:rgb(254 202 202/var(--tw-text-opacity,1))}.dark\:hover\:text-red-300:hover:is(.dark *){--tw-text-opacity:1;color:rgb(252 165 165/var(--tw-text-opacity,1))}.dark\:hover\:text-slate-200:hover:is(.dark *){--tw-text-opacity:1;color:rgb(226 232 240/var(--tw-text-opacity,1))}.dark\:hover\:text-slate-300:hover:is(.dark *){--tw-text-opacity:1;color:rgb(203 213 225/var(--tw-text-opacity,1))}.dark\:hover\:text-slate-900:hover:is(.dark *){--tw-text-opacity:1;color:rgb(15 23 42/var(--tw-text-opacity,1))}.dark\:hover\:text-white:hover:is(.dark *){--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.dark\:focus\:ring-gray-600:focus:is(.dark *){--tw-ring-opacity:1;--tw-ring-color:rgb(75 85 99/var(--tw-ring-opacity,1))}.dark\:focus\:ring-white:focus:is(.dark *){--tw-ring-opacity:1;--tw-ring-color:rgb(255 255 255/var(--tw-ring-opacity,1))}.dark\:disabled\:bg-slate-800:disabled:is(.dark *){--tw-bg-opacity:1;background-color:rgb(30 41 59/var(--tw-bg-opacity,1))}.group:focus-within .dark\:group-focus-within\:text-blue-400:is(.dark *){--tw-text-opacity:1;color:rgb(96 165 250/var(--tw-text-opacity,1))}.group:hover .dark\:group-hover\:text-slate-300:is(.dark *){--tw-text-opacity:1;color:rgb(203 213 225/var(--tw-text-opacity,1))}@media (min-width:640px){.sm\:mb-0{margin-bottom:0}.sm\:mb-10{margin-bottom:2.5rem}.sm\:mb-4{margin-bottom:1rem}.sm\:mb-5{margin-bottom:1.25rem}.sm\:mr-2{margin-right:.5rem}.sm\:mt-12{margin-top:3rem}.sm\:mt-4{margin-top:1rem}.sm\:mt-5{margin-top:1.25rem}.sm\:inline{display:inline}.sm\:h-10{height:2.5rem}.sm\:h-12{height:3rem}.sm\:h-16{height:4rem}.sm\:h-4{height:1rem}.sm\:h-5{height:1.25rem}.sm\:h-6{height:1.5rem}.sm\:w-10{width:2.5rem}.sm\:w-12{width:3rem}.sm\:w-16{width:4rem}.sm\:w-4{width:1rem}.sm\:w-5{width:1.25rem}.sm\:w-6{width:1.5rem}.sm\:w-auto{width:auto}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.sm\:flex-row{flex-direction:row}.sm\:items-center{align-items:center}.sm\:justify-between{justify-content:space-between}.sm\:gap-4{gap:1rem}.sm\:gap-6{gap:1.5rem}.sm\:gap-8{gap:2rem}.sm\:space-x-3>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(.75rem*var(--tw-space-x-reverse));margin-left:calc(.75rem*(1 - var(--tw-space-x-reverse)))}.sm\:space-x-6>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(1.5rem*var(--tw-space-x-reverse));margin-left:calc(1.5rem*(1 - var(--tw-space-x-reverse)))}.sm\:space-y-0>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(0px*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(0px*var(--tw-space-y-reverse))}.sm\:p-4{padding:1rem}.sm\:px-4{padding-left:1rem;padding-right:1rem}.sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}.sm\:py-12{padding-top:3rem;padding-bottom:3rem}.sm\:py-8{padding-bottom:2rem}.sm\:pt-8,.sm\:py-8{padding-top:2rem}.sm\:text-2xl{font-size:1.5rem;line-height:2rem}.sm\:text-3xl{font-size:1.875rem;line-height:2.25rem}.sm\:text-base{font-size:1rem;line-height:1.5rem}.sm\:text-lg{font-size:1.125rem;line-height:1.75rem}.sm\:text-sm{font-size:.875rem;line-height:1.25rem}}@media (min-width:768px){.md\:col-span-2{grid-column:span 2/span 2}.md\:block{display:block}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.md\:flex-row{flex-direction:row}.md\:items-center{align-items:center}.md\:justify-between{justify-content:space-between}.md\:space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(.5rem*var(--tw-space-x-reverse));margin-left:calc(.5rem*(1 - var(--tw-space-x-reverse)))}.md\:space-x-3>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(.75rem*var(--tw-space-x-reverse));margin-left:calc(.75rem*(1 - var(--tw-space-x-reverse)))}.md\:text-2xl{font-size:1.5rem;line-height:2rem}.md\:text-4xl{font-size:2.25rem;line-height:2.5rem}.md\:text-5xl{font-size:3rem;line-height:1}.md\:text-6xl{font-size:3.75rem;line-height:1}.md\:text-xl{font-size:1.25rem;line-height:1.75rem}}@media (min-width:1024px){.lg\:col-span-2{grid-column:span 2/span 2}.lg\:mx-8{margin-left:2rem;margin-right:2rem}.lg\:mt-0{margin-top:0}.lg\:flex{display:flex}.lg\:hidden{display:none}.lg\:h-12{height:3rem}.lg\:h-20{height:5rem}.lg\:w-12{width:3rem}.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.lg\:flex-row{flex-direction:row}.lg\:items-center{align-items:center}.lg\:justify-between{justify-content:space-between}.lg\:space-x-1>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(.25rem*var(--tw-space-x-reverse));margin-left:calc(.25rem*(1 - var(--tw-space-x-reverse)))}.lg\:space-x-6>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(1.5rem*var(--tw-space-x-reverse));margin-left:calc(1.5rem*(1 - var(--tw-space-x-reverse)))}.lg\:space-y-0>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(0px*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(0px*var(--tw-space-y-reverse))}.lg\:p-12{padding:3rem}.lg\:p-8{padding:2rem}.lg\:px-6{padding-left:1.5rem;padding-right:1.5rem}.lg\:px-8{padding-left:2rem;padding-right:2rem}.lg\:text-right{text-align:right}.lg\:text-2xl{font-size:1.5rem;line-height:2rem}.lg\:text-sm{font-size:.875rem;line-height:1.25rem}}@media (min-width:1280px){.xl\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}} \ No newline at end of file +*, ::before, ::after { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; + --tw-contain-size: ; + --tw-contain-layout: ; + --tw-contain-paint: ; + --tw-contain-style: ; +} + +::backdrop { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; + --tw-contain-size: ; + --tw-contain-layout: ; + --tw-contain-paint: ; + --tw-contain-style: ; +} + +/* +! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com +*/ + +/* +1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) +2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) +*/ + +*, +::before, +::after { + box-sizing: border-box; + /* 1 */ + border-width: 0; + /* 2 */ + border-style: solid; + /* 2 */ + border-color: #e5e7eb; + /* 2 */ +} + +::before, +::after { + --tw-content: ''; +} + +/* +1. Use a consistent sensible line-height in all browsers. +2. Prevent adjustments of font size after orientation changes in iOS. +3. Use a more readable tab size. +4. Use the user's configured `sans` font-family by default. +5. Use the user's configured `sans` font-feature-settings by default. +6. Use the user's configured `sans` font-variation-settings by default. +7. Disable tap highlights on iOS +*/ + +html, +:host { + line-height: 1.5; + /* 1 */ + -webkit-text-size-adjust: 100%; + /* 2 */ + -moz-tab-size: 4; + /* 3 */ + -o-tab-size: 4; + tab-size: 4; + /* 3 */ + font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + /* 4 */ + font-feature-settings: normal; + /* 5 */ + font-variation-settings: normal; + /* 6 */ + -webkit-tap-highlight-color: transparent; + /* 7 */ +} + +/* +1. Remove the margin in all browsers. +2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. +*/ + +body { + margin: 0; + /* 1 */ + line-height: inherit; + /* 2 */ +} + +/* +1. Add the correct height in Firefox. +2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) +3. Ensure horizontal rules are visible by default. +*/ + +hr { + height: 0; + /* 1 */ + color: inherit; + /* 2 */ + border-top-width: 1px; + /* 3 */ +} + +/* +Add the correct text decoration in Chrome, Edge, and Safari. +*/ + +abbr:where([title]) { + -webkit-text-decoration: underline dotted; + text-decoration: underline dotted; +} + +/* +Remove the default font size and weight for headings. +*/ + +h1, +h2, +h3, +h4, +h5, +h6 { + font-size: inherit; + font-weight: inherit; +} + +/* +Reset links to optimize for opt-in styling instead of opt-out. +*/ + +a { + color: inherit; + text-decoration: inherit; +} + +/* +Add the correct font weight in Edge and Safari. +*/ + +b, +strong { + font-weight: bolder; +} + +/* +1. Use the user's configured `mono` font-family by default. +2. Use the user's configured `mono` font-feature-settings by default. +3. Use the user's configured `mono` font-variation-settings by default. +4. Correct the odd `em` font sizing in all browsers. +*/ + +code, +kbd, +samp, +pre { + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + /* 1 */ + font-feature-settings: normal; + /* 2 */ + font-variation-settings: normal; + /* 3 */ + font-size: 1em; + /* 4 */ +} + +/* +Add the correct font size in all browsers. +*/ + +small { + font-size: 80%; +} + +/* +Prevent `sub` and `sup` elements from affecting the line height in all browsers. +*/ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* +1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) +2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) +3. Remove gaps between table borders by default. +*/ + +table { + text-indent: 0; + /* 1 */ + border-color: inherit; + /* 2 */ + border-collapse: collapse; + /* 3 */ +} + +/* +1. Change the font styles in all browsers. +2. Remove the margin in Firefox and Safari. +3. Remove default padding in all browsers. +*/ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; + /* 1 */ + font-feature-settings: inherit; + /* 1 */ + font-variation-settings: inherit; + /* 1 */ + font-size: 100%; + /* 1 */ + font-weight: inherit; + /* 1 */ + line-height: inherit; + /* 1 */ + letter-spacing: inherit; + /* 1 */ + color: inherit; + /* 1 */ + margin: 0; + /* 2 */ + padding: 0; + /* 3 */ +} + +/* +Remove the inheritance of text transform in Edge and Firefox. +*/ + +button, +select { + text-transform: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Remove default button styles. +*/ + +button, +input:where([type='button']), +input:where([type='reset']), +input:where([type='submit']) { + -webkit-appearance: button; + /* 1 */ + background-color: transparent; + /* 2 */ + background-image: none; + /* 2 */ +} + +/* +Use the modern Firefox focus style for all focusable elements. +*/ + +:-moz-focusring { + outline: auto; +} + +/* +Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) +*/ + +:-moz-ui-invalid { + box-shadow: none; +} + +/* +Add the correct vertical alignment in Chrome and Firefox. +*/ + +progress { + vertical-align: baseline; +} + +/* +Correct the cursor style of increment and decrement buttons in Safari. +*/ + +::-webkit-inner-spin-button, +::-webkit-outer-spin-button { + height: auto; +} + +/* +1. Correct the odd appearance in Chrome and Safari. +2. Correct the outline style in Safari. +*/ + +[type='search'] { + -webkit-appearance: textfield; + /* 1 */ + outline-offset: -2px; + /* 2 */ +} + +/* +Remove the inner padding in Chrome and Safari on macOS. +*/ + +::-webkit-search-decoration { + -webkit-appearance: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Change font properties to `inherit` in Safari. +*/ + +::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ +} + +/* +Add the correct display in Chrome and Safari. +*/ + +summary { + display: list-item; +} + +/* +Removes the default spacing and border for appropriate elements. +*/ + +blockquote, +dl, +dd, +h1, +h2, +h3, +h4, +h5, +h6, +hr, +figure, +p, +pre { + margin: 0; +} + +fieldset { + margin: 0; + padding: 0; +} + +legend { + padding: 0; +} + +ol, +ul, +menu { + list-style: none; + margin: 0; + padding: 0; +} + +/* +Reset default styling for dialogs. +*/ + +dialog { + padding: 0; +} + +/* +Prevent resizing textareas horizontally by default. +*/ + +textarea { + resize: vertical; +} + +/* +1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) +2. Set the default placeholder color to the user's configured gray 400 color. +*/ + +input::-moz-placeholder, textarea::-moz-placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +input::placeholder, +textarea::placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +/* +Set the default cursor for buttons. +*/ + +button, +[role="button"] { + cursor: pointer; +} + +/* +Make sure disabled buttons don't get the pointer cursor. +*/ + +:disabled { + cursor: default; +} + +/* +1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) +2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) + This can trigger a poorly considered lint error in some tools but is included by design. +*/ + +img, +svg, +video, +canvas, +audio, +iframe, +embed, +object { + display: block; + /* 1 */ + vertical-align: middle; + /* 2 */ +} + +/* +Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) +*/ + +img, +video { + max-width: 100%; + height: auto; +} + +/* Make elements with the HTML hidden attribute stay hidden by default */ + +[hidden]:where(:not([hidden="until-found"])) { + display: none; +} + +:root { + /* Light Mode Farben */ + --color-bg-primary: #ffffff; + --color-bg-secondary: #f8fafc; + --color-text-primary: #0f172a; + --color-text-secondary: #334155; + --color-text-muted: #64748b; + --color-border-primary: #e2e8f0; + --color-accent: #000000; + /* Mercedes-Benz Schwarz statt Blau */ + --color-accent-hover: #333333; + --color-accent-text: #ffffff; + --color-shadow: rgba(0, 0, 0, 0.1); + --card-radius: 1rem; + /* Abgerundete Ecken für Karten */ +} + +.dark { + /* Dark Mode Farben - Noch dunkler und eleganter */ + --color-bg-primary: #000000; + /* Tiefes Schwarz */ + --color-bg-secondary: #0a0a0a; + /* Sehr dunkles Grau */ + --color-text-primary: #ffffff; + --color-text-secondary: #e2e8f0; + --color-text-muted: #94a3b8; + --color-border-primary: #1a1a1a; + /* Dunkler Rahmen */ + --color-accent: #ffffff; + /* Reines Weiß */ + --color-accent-hover: #f0f0f0; + --color-accent-text: #000000; + --color-shadow: rgba(0, 0, 0, 0.8); + /* Sehr dunkler Schatten */ + --mb-black: #000000; + /* Mercedes-Benz Schwarz */ +} + +body { + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); + --tw-text-opacity: 1; + color: rgb(15 23 42 / var(--tw-text-opacity, 1)); + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 300ms; +} + +body:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1)); + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity, 1)); +} + +body { + position: relative; + min-height: 100vh; +} + +.dark body { + background: linear-gradient(135deg, #000000 0%, #0a0a0a 50%, #000000 100%); +} + +/* Navbar Styles - Glassmorphism ohne überlagerte Hintergründe */ + +nav { + border-bottom-width: 1px; + border-color: rgb(229 231 235 / 0.7); + background-color: rgb(255 255 255 / 0.6); + --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + --tw-backdrop-blur: blur(24px); + -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); + backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); + transition-property: all; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 300ms; +} + +.dark-mode-toggle-premium nav { + box-shadow: + 0 10px 15px -3px rgba(0, 0, 0, 0.1), + 0 4px 6px -2px rgba(0, 0, 0, 0.05); +} + +.dark .dark-mode-toggle-premium nav { + box-shadow: + 0 10px 15px -3px rgba(0, 0, 0, 0.3), + 0 4px 6px -2px rgba(0, 0, 0, 0.2); +} + +.dark-mode-toggle-premium nav { + box-shadow: + 0 10px 15px -3px rgba(0, 0, 0, 0.1), + 0 4px 6px -2px rgba(0, 0, 0, 0.05); +} + +.dark .dark-mode-toggle-premium nav { + box-shadow: + 0 10px 15px -3px rgba(0, 0, 0, 0.3), + 0 4px 6px -2px rgba(0, 0, 0, 0.2); +} + +nav:is(.dark *) { + border-color: rgb(51 65 85 / 0.2); + background-color: rgb(0 0 0 / 0.6); +} + +nav { + backdrop-filter: blur(20px) saturate(180%); + -webkit-backdrop-filter: blur(20px) saturate(180%); + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.05); +} + +/* Benutzer-Dropdown Styles */ + +#user-dropdown { + position: absolute; + right: 0px; + z-index: 50; + margin-top: 0.5rem; + width: 16rem; + border-radius: 0.75rem; + border-width: 1px; + border-color: rgb(229 231 235 / 0.7); + background-color: rgb(255 255 255 / 0.6); + --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); + --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + --tw-backdrop-blur: blur(24px); + -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); + backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); + transition-property: all; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 200ms; +} + +#user-dropdown:is(.dark *) { + border-color: rgb(51 65 85 / 0.2); + background-color: rgb(0 0 0 / 0.6); +} + +#user-dropdown { + backdrop-filter: blur(20px) saturate(180%) brightness(110%); + -webkit-backdrop-filter: blur(20px) saturate(180%) brightness(110%); + box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.1); + animation: fadeIn 0.2s ease-out forwards; +} + +.\!container { + width: 100% !important; +} + +.container { + width: 100%; +} + +@media (min-width: 640px) { + .\!container { + max-width: 640px !important; + } + + .container { + max-width: 640px; + } +} + +@media (min-width: 768px) { + .\!container { + max-width: 768px !important; + } + + .container { + max-width: 768px; + } +} + +@media (min-width: 1024px) { + .\!container { + max-width: 1024px !important; + } + + .container { + max-width: 1024px; + } +} + +@media (min-width: 1280px) { + .\!container { + max-width: 1280px !important; + } + + .container { + max-width: 1280px; + } +} + +@media (min-width: 1536px) { + .\!container { + max-width: 1536px !important; + } + + .container { + max-width: 1536px; + } +} + +/* Dark Mode Styles für Admin Panel */ + +.dark .bg-dark-card { + background-color: #1e293b; + --tw-bg-opacity: 1; + background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1)); + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} + +/* Alternative direkte Definition ohne Zirkularität */ + +.bg-dark-surface { + background-color: #1e293b; +} + +/* Übergangseffekt für alle Komponenten */ + +.transition-all-colors { + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 300ms; +} + +/* Admin Panel Container */ + +.admin-container { + margin-left: auto; + margin-right: auto; + max-width: 80rem; + padding: 1rem; +} + +@media (min-width: 768px) { + .admin-container { + padding: 2rem; + } +} + +/* Admin Stats Cards */ + +.admin-stats { + margin-bottom: 2rem; + display: grid; + grid-template-columns: repeat(1, minmax(0, 1fr)); + gap: 1rem; +} + +@media (min-width: 640px) { + .admin-stats { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } +} + +@media (min-width: 1024px) { + .admin-stats { + grid-template-columns: repeat(4, minmax(0, 1fr)); + } +} + +.stat-card { + position: relative; + overflow: hidden; + border-radius: 0.75rem; + border-width: 1px; + border-color: rgb(229 231 235 / 0.6); + background-color: rgb(255 255 255 / 0.6); + padding: 1.25rem; + --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); + --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + --tw-backdrop-blur: blur(24px); + -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); + backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); + transition-property: all; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 300ms; +} + +.stat-card:hover { + --tw-translate-y: -0.25rem; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); + --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.stat-card:is(.dark *) { + border-color: rgb(51 65 85 / 0.3); + background-color: rgb(0 0 0 / 0.7); +} + +.stat-card { + backdrop-filter: blur(20px) saturate(180%) brightness(110%); + -webkit-backdrop-filter: blur(20px) saturate(180%) brightness(110%); + box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.1); +} + +.stat-icon { + position: absolute; + top: 1rem; + right: 1rem; + font-size: 2.25rem; + line-height: 2.5rem; + opacity: 0.15; +} + +.stat-title { + margin-bottom: 0.5rem; + font-size: 0.875rem; + line-height: 1.25rem; + font-weight: 500; + text-transform: uppercase; + --tw-text-opacity: 1; + color: rgb(100 116 139 / var(--tw-text-opacity, 1)); +} + +.stat-title:is(.dark *) { + --tw-text-opacity: 1; + color: rgb(148 163 184 / var(--tw-text-opacity, 1)); +} + +.stat-value { + margin-bottom: 0.25rem; + font-size: 1.5rem; + line-height: 2rem; + font-weight: 700; + --tw-text-opacity: 1; + color: rgb(15 23 42 / var(--tw-text-opacity, 1)); +} + +.stat-value:is(.dark *) { + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity, 1)); +} + +.stat-desc { + font-size: 0.875rem; + line-height: 1.25rem; + --tw-text-opacity: 1; + color: rgb(100 116 139 / var(--tw-text-opacity, 1)); +} + +.stat-desc:is(.dark *) { + --tw-text-opacity: 1; + color: rgb(148 163 184 / var(--tw-text-opacity, 1)); +} + +/* Navigation Tabs */ + +.nav-tabs { + margin-bottom: 1rem; + display: flex; + overflow-x: auto; + border-bottom-width: 1px; + --tw-border-opacity: 1; + border-color: rgb(229 231 235 / var(--tw-border-opacity, 1)); +} + +.nav-tabs:is(.dark *) { + border-color: rgb(51 65 85 / 0.3); +} + +.nav-tab { + cursor: pointer; + white-space: nowrap; + border-bottom-width: 2px; + border-color: transparent; + padding-top: 1rem; + padding-bottom: 1rem; + padding-left: 1.5rem; + padding-right: 1.5rem; + --tw-text-opacity: 1; + color: rgb(71 85 105 / var(--tw-text-opacity, 1)); + transition-property: all; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 200ms; +} + +.nav-tab:hover { + --tw-bg-opacity: 1; + background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1)); + --tw-text-opacity: 1; + color: rgb(15 23 42 / var(--tw-text-opacity, 1)); +} + +.nav-tab:is(.dark *) { + --tw-text-opacity: 1; + color: rgb(203 213 225 / var(--tw-text-opacity, 1)); +} + +.nav-tab:hover:is(.dark *) { + background-color: rgb(30 41 59 / 0.5); + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity, 1)); +} + +.nav-tab.active { + border-bottom-width: 2px; + --tw-border-opacity: 1; + border-color: rgb(0 0 0 / var(--tw-border-opacity, 1)); + font-weight: 500; + --tw-text-opacity: 1; + color: rgb(15 23 42 / var(--tw-text-opacity, 1)); +} + +.nav-tab.active:is(.dark *) { + --tw-border-opacity: 1; + border-color: rgb(255 255 255 / var(--tw-border-opacity, 1)); + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity, 1)); +} + +/* Tab Content */ + +.tab-content { + margin-top: 2rem; +} + +.tab-pane { + display: none; +} + +.dark-mode-toggle-new .sun-icon:not(.tab-pane) { + animation: spin-in 0.5s cubic-bezier(0.25, 1, 0.5, 1) forwards; +} + +.dark-mode-toggle-new .moon-icon:not(.tab-pane) { + animation: spin-in 0.5s cubic-bezier(0.25, 1, 0.5, 1) forwards; +} + +.tab-pane.active { + display: block; +} + +/* Formulare für Admin Panel */ + +.form-group { + margin-bottom: 1rem; +} + +.form-label { + margin-bottom: 0.5rem; + display: block; + font-size: 0.875rem; + line-height: 1.25rem; + font-weight: 500; + --tw-text-opacity: 1; + color: rgb(51 65 85 / var(--tw-text-opacity, 1)); +} + +.form-label:is(.dark *) { + --tw-text-opacity: 1; + color: rgb(203 213 225 / var(--tw-text-opacity, 1)); +} + +.form-input, + .form-select, + .form-textarea { + width: 100%; + border-radius: 0.5rem; + border-width: 1px; + border-color: rgb(209 213 219 / 0.6); + background-color: rgb(255 255 255 / 0.6); + padding-left: 0.75rem; + padding-right: 0.75rem; + padding-top: 0.5rem; + padding-bottom: 0.5rem; + --tw-text-opacity: 1; + color: rgb(15 23 42 / var(--tw-text-opacity, 1)); +} + +.form-input::-moz-placeholder, .form-select::-moz-placeholder, .form-textarea::-moz-placeholder { + --tw-placeholder-opacity: 1; + color: rgb(156 163 175 / var(--tw-placeholder-opacity, 1)); +} + +.form-input::placeholder, + .form-select::placeholder, + .form-textarea::placeholder { + --tw-placeholder-opacity: 1; + color: rgb(156 163 175 / var(--tw-placeholder-opacity, 1)); +} + +.form-input, + .form-select, + .form-textarea { + --tw-backdrop-blur: blur(16px); + -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); + backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); + transition-property: all; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 200ms; +} + +.form-input:focus, + .form-select:focus, + .form-textarea:focus { + border-color: transparent; + outline: 2px solid transparent; + outline-offset: 2px; + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); + --tw-ring-opacity: 1; + --tw-ring-color: rgb(100 116 139 / var(--tw-ring-opacity, 1)); +} + +.form-input:is(.dark *), + .form-select:is(.dark *), + .form-textarea:is(.dark *) { + border-color: rgb(71 85 105 / 0.6); + background-color: rgb(30 41 59 / 0.6); + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity, 1)); +} + +.form-input, + .form-select, + .form-textarea { + backdrop-filter: blur(16px) saturate(150%); + -webkit-backdrop-filter: blur(16px) saturate(150%); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.05); +} + +/* Tabellen im Admin Panel */ + +.admin-table { + min-width: 100%; +} + +.admin-table > :not([hidden]) ~ :not([hidden]) { + --tw-divide-y-reverse: 0; + border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse))); + border-bottom-width: calc(1px * var(--tw-divide-y-reverse)); + --tw-divide-opacity: 1; + border-color: rgb(229 231 235 / var(--tw-divide-opacity, 1)); +} + +.admin-table:is(.dark *) > :not([hidden]) ~ :not([hidden]) { + --tw-divide-opacity: 1; + border-color: rgb(51 65 85 / var(--tw-divide-opacity, 1)); +} + +.admin-table thead { + --tw-bg-opacity: 1; + background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1)); +} + +.admin-table thead:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1)); +} + +.admin-table th { + padding-left: 1.5rem; + padding-right: 1.5rem; + padding-top: 0.75rem; + padding-bottom: 0.75rem; + text-align: left; + font-size: 0.75rem; + line-height: 1rem; + font-weight: 500; + text-transform: uppercase; + letter-spacing: 0.05em; + --tw-text-opacity: 1; + color: rgb(100 116 139 / var(--tw-text-opacity, 1)); +} + +.admin-table th:is(.dark *) { + --tw-text-opacity: 1; + color: rgb(148 163 184 / var(--tw-text-opacity, 1)); +} + +.admin-table tbody > :not([hidden]) ~ :not([hidden]) { + --tw-divide-y-reverse: 0; + border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse))); + border-bottom-width: calc(1px * var(--tw-divide-y-reverse)); + --tw-divide-opacity: 1; + border-color: rgb(229 231 235 / var(--tw-divide-opacity, 1)); +} + +.admin-table tbody { + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); +} + +.admin-table tbody:is(.dark *) { + background-color: #1e293b; +} + +.admin-table tbody:is(.dark *) > :not([hidden]) ~ :not([hidden]) { + --tw-divide-opacity: 1; + border-color: rgb(51 65 85 / var(--tw-divide-opacity, 1)); +} + +.admin-table tbody:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1)); +} + +.admin-table tr { + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} + +.admin-table tr:hover { + --tw-bg-opacity: 1; + background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1)); +} + +.admin-table tr:hover:is(.dark *) { + background-color: rgb(51 65 85 / 0.5); +} + +.admin-table td { + white-space: nowrap; + padding-left: 1.5rem; + padding-right: 1.5rem; + padding-top: 1rem; + padding-bottom: 1rem; + font-size: 0.875rem; + line-height: 1.25rem; + --tw-text-opacity: 1; + color: rgb(15 23 42 / var(--tw-text-opacity, 1)); +} + +.admin-table td:is(.dark *) { + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity, 1)); +} + +/* Status Badges */ + +.badge { + display: inline-flex; + border-radius: 9999px; + padding-left: 0.5rem; + padding-right: 0.5rem; + font-size: 0.75rem; + font-weight: 600; + line-height: 1.25rem; +} + +.badge-success { + --tw-bg-opacity: 1; + background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1)); + --tw-text-opacity: 1; + color: rgb(22 101 52 / var(--tw-text-opacity, 1)); +} + +.badge-success:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(20 83 45 / var(--tw-bg-opacity, 1)); + --tw-text-opacity: 1; + color: rgb(187 247 208 / var(--tw-text-opacity, 1)); +} + +.badge-error { + --tw-bg-opacity: 1; + background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1)); + --tw-text-opacity: 1; + color: rgb(153 27 27 / var(--tw-text-opacity, 1)); +} + +.badge-error:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(127 29 29 / var(--tw-bg-opacity, 1)); + --tw-text-opacity: 1; + color: rgb(254 202 202 / var(--tw-text-opacity, 1)); +} + +.badge-warning { + --tw-bg-opacity: 1; + background-color: rgb(254 249 195 / var(--tw-bg-opacity, 1)); + --tw-text-opacity: 1; + color: rgb(133 77 14 / var(--tw-text-opacity, 1)); +} + +.badge-warning:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(113 63 18 / var(--tw-bg-opacity, 1)); + --tw-text-opacity: 1; + color: rgb(254 240 138 / var(--tw-text-opacity, 1)); +} + +.badge-info { + --tw-bg-opacity: 1; + background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1)); + --tw-text-opacity: 1; + color: rgb(30 64 175 / var(--tw-text-opacity, 1)); +} + +.badge-info:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(30 58 138 / var(--tw-bg-opacity, 1)); + --tw-text-opacity: 1; + color: rgb(191 219 254 / var(--tw-text-opacity, 1)); +} + +/* Drucker-Karten */ + +.printer-card { + border-radius: 0.75rem; + border-width: 1px; + border-color: rgb(229 231 235 / 0.6); + background-color: rgb(255 255 255 / 0.6); + padding: 1.5rem; + --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); + --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + --tw-backdrop-blur: blur(24px); + -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); + backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); + transition-property: all; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 300ms; +} + +.printer-card:hover { + --tw-translate-y: -0.25rem; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); + --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.printer-card:is(.dark *) { + border-color: rgb(51 65 85 / 0.3); + background-color: rgb(0 0 0 / 0.7); +} + +.printer-card { + backdrop-filter: blur(20px) saturate(180%) brightness(110%); + -webkit-backdrop-filter: blur(20px) saturate(180%) brightness(110%); + box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.1); +} + +.printer-header { + margin-bottom: 1rem; + display: flex; + align-items: center; + justify-content: space-between; +} + +.printer-name { + font-size: 1.25rem; + line-height: 1.75rem; + font-weight: 700; + --tw-text-opacity: 1; + color: rgb(15 23 42 / var(--tw-text-opacity, 1)); +} + +.printer-name:is(.dark *) { + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity, 1)); +} + +.printer-actions { + display: flex; +} + +.printer-actions > :not([hidden]) ~ :not([hidden]) { + --tw-space-x-reverse: 0; + margin-right: calc(0.5rem * var(--tw-space-x-reverse)); + margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse))); +} + +.printer-info { + margin-bottom: 1rem; + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 1rem; +} + +.printer-status { + margin-top: 1rem; + display: flex; + align-items: center; +} + +/* Status Indikatoren */ + +.status-indicator { + margin-right: 0.5rem; + height: 0.75rem; + width: 0.75rem; + border-radius: 9999px; +} + +.status-running { + --tw-bg-opacity: 1; + background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1)); + animation: pulse 2s infinite; +} + +.status-stopped { + --tw-bg-opacity: 1; + background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1)); +} + +/* Pulse Animation */ + +@keyframes pulse { + 0% { + opacity: 1; + transform: scale(1); + } + + 50% { + opacity: 0.5; + transform: scale(1.1); + } + + 100% { + opacity: 1; + transform: scale(1); + } +} + +/* Log-Einträge */ + +.log-entry { + margin-bottom: 0.5rem; + border-top-right-radius: 0.5rem; + border-bottom-right-radius: 0.5rem; + border-left-width: 4px; + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); + padding: 0.75rem; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} + +.log-entry:hover { + --tw-bg-opacity: 1; + background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1)); +} + +.log-entry:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1)); +} + +.log-entry:hover:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1)); +} + +.log-debug { + --tw-border-opacity: 1; + border-color: rgb(156 163 175 / var(--tw-border-opacity, 1)); +} + +.log-debug:is(.dark *) { + --tw-border-opacity: 1; + border-color: rgb(107 114 128 / var(--tw-border-opacity, 1)); +} + +.log-info { + --tw-border-opacity: 1; + border-color: rgb(96 165 250 / var(--tw-border-opacity, 1)); +} + +.log-info:is(.dark *) { + --tw-border-opacity: 1; + border-color: rgb(59 130 246 / var(--tw-border-opacity, 1)); +} + +.log-warning { + --tw-border-opacity: 1; + border-color: rgb(250 204 21 / var(--tw-border-opacity, 1)); +} + +.log-warning:is(.dark *) { + --tw-border-opacity: 1; + border-color: rgb(234 179 8 / var(--tw-border-opacity, 1)); +} + +.log-error { + --tw-border-opacity: 1; + border-color: rgb(248 113 113 / var(--tw-border-opacity, 1)); +} + +.log-error:is(.dark *) { + --tw-border-opacity: 1; + border-color: rgb(239 68 68 / var(--tw-border-opacity, 1)); +} + +.log-critical { + --tw-border-opacity: 1; + border-color: rgb(192 132 252 / var(--tw-border-opacity, 1)); +} + +.log-critical:is(.dark *) { + --tw-border-opacity: 1; + border-color: rgb(168 85 247 / var(--tw-border-opacity, 1)); +} + +/* Scheduler Status */ + +.scheduler-status { + display: flex; + align-items: center; + border-radius: 0.5rem; + border-width: 1px; + --tw-border-opacity: 1; + border-color: rgb(229 231 235 / var(--tw-border-opacity, 1)); + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); + padding: 1rem; + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.scheduler-status:is(.dark *) { + --tw-border-opacity: 1; + border-color: rgb(51 65 85 / var(--tw-border-opacity, 1)); + --tw-bg-opacity: 1; + background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1)); +} + +/* Fortschrittsbalken */ + +.progress-bar { + height: 0.5rem; + width: 100%; + overflow: hidden; + border-radius: 9999px; + --tw-bg-opacity: 1; + background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1)); +} + +.progress-bar:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1)); +} + +.progress-bar-fill { + height: 100%; + transition-property: all; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 300ms; +} + +.progress-bar-fill-blue { + --tw-bg-opacity: 1; + background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1)); +} + +.progress-bar-fill-blue:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1)); +} + +.progress-bar-fill-green { + --tw-bg-opacity: 1; + background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1)); +} + +.progress-bar-fill-green:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1)); +} + +.progress-bar-fill-purple { + --tw-bg-opacity: 1; + background-color: rgb(168 85 247 / var(--tw-bg-opacity, 1)); +} + +.progress-bar-fill-purple:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(147 51 234 / var(--tw-bg-opacity, 1)); +} + +/* Benachrichtigungen */ + +.\!notification { + position: fixed; + top: 1rem; + right: 1rem; + z-index: 50; + max-width: 28rem; + --tw-translate-x: 100%; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + border-radius: 0.5rem; + border-left-width: 4px; + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); + padding: 1rem; + opacity: 0; + --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + transition-property: all; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 300ms; +} + +.dark-mode-toggle-premium .\!notification { + box-shadow: + 0 10px 15px -3px rgba(0, 0, 0, 0.1), + 0 4px 6px -2px rgba(0, 0, 0, 0.05); +} + +.dark .dark-mode-toggle-premium .\!notification { + box-shadow: + 0 10px 15px -3px rgba(0, 0, 0, 0.3), + 0 4px 6px -2px rgba(0, 0, 0, 0.2); +} + +.dark-mode-toggle-premium .\!notification { + box-shadow: + 0 10px 15px -3px rgba(0, 0, 0, 0.1), + 0 4px 6px -2px rgba(0, 0, 0, 0.05); +} + +.dark .dark-mode-toggle-premium .\!notification { + box-shadow: + 0 10px 15px -3px rgba(0, 0, 0, 0.3), + 0 4px 6px -2px rgba(0, 0, 0, 0.2); +} + +.\!notification:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1)); +} + +.notification { + position: fixed; + top: 1rem; + right: 1rem; + z-index: 50; + max-width: 28rem; + --tw-translate-x: 100%; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + border-radius: 0.5rem; + border-left-width: 4px; + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); + padding: 1rem; + opacity: 0; + --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + transition-property: all; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 300ms; +} + +.dark-mode-toggle-premium .notification { + box-shadow: + 0 10px 15px -3px rgba(0, 0, 0, 0.1), + 0 4px 6px -2px rgba(0, 0, 0, 0.05); +} + +.dark .dark-mode-toggle-premium .notification { + box-shadow: + 0 10px 15px -3px rgba(0, 0, 0, 0.3), + 0 4px 6px -2px rgba(0, 0, 0, 0.2); +} + +.dark-mode-toggle-premium .notification { + box-shadow: + 0 10px 15px -3px rgba(0, 0, 0, 0.1), + 0 4px 6px -2px rgba(0, 0, 0, 0.05); +} + +.dark .dark-mode-toggle-premium .notification { + box-shadow: + 0 10px 15px -3px rgba(0, 0, 0, 0.3), + 0 4px 6px -2px rgba(0, 0, 0, 0.2); +} + +.notification:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1)); +} + +.\!notification.show { + --tw-translate-x: 0px; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + opacity: 1; +} + +.notification.show { + --tw-translate-x: 0px; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + opacity: 1; +} + +.notification-success { + --tw-border-opacity: 1; + border-color: rgb(34 197 94 / var(--tw-border-opacity, 1)); +} + +.notification-error { + --tw-border-opacity: 1; + border-color: rgb(239 68 68 / var(--tw-border-opacity, 1)); +} + +.notification-warning { + --tw-border-opacity: 1; + border-color: rgb(234 179 8 / var(--tw-border-opacity, 1)); +} + +.notification-info { + --tw-border-opacity: 1; + border-color: rgb(59 130 246 / var(--tw-border-opacity, 1)); +} + +/* Alerts */ + +.alert { + margin-bottom: 1rem; + border-radius: 0.5rem; + border-width: 1px; + padding: 1rem; +} + +.alert-success { + --tw-border-opacity: 1; + border-color: rgb(34 197 94 / var(--tw-border-opacity, 1)); + --tw-bg-opacity: 1; + background-color: rgb(240 253 244 / var(--tw-bg-opacity, 1)); + --tw-text-opacity: 1; + color: rgb(22 101 52 / var(--tw-text-opacity, 1)); +} + +.alert-success:is(.dark *) { + background-color: rgb(20 83 45 / 0.3); + --tw-text-opacity: 1; + color: rgb(187 247 208 / var(--tw-text-opacity, 1)); +} + +.alert-error { + --tw-border-opacity: 1; + border-color: rgb(239 68 68 / var(--tw-border-opacity, 1)); + --tw-bg-opacity: 1; + background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1)); + --tw-text-opacity: 1; + color: rgb(153 27 27 / var(--tw-text-opacity, 1)); +} + +.alert-error:is(.dark *) { + background-color: rgb(127 29 29 / 0.3); + --tw-text-opacity: 1; + color: rgb(254 202 202 / var(--tw-text-opacity, 1)); +} + +.alert-warning { + --tw-border-opacity: 1; + border-color: rgb(234 179 8 / var(--tw-border-opacity, 1)); + --tw-bg-opacity: 1; + background-color: rgb(254 252 232 / var(--tw-bg-opacity, 1)); + --tw-text-opacity: 1; + color: rgb(133 77 14 / var(--tw-text-opacity, 1)); +} + +.alert-warning:is(.dark *) { + background-color: rgb(113 63 18 / 0.3); + --tw-text-opacity: 1; + color: rgb(254 240 138 / var(--tw-text-opacity, 1)); +} + +.alert-info { + --tw-border-opacity: 1; + border-color: rgb(59 130 246 / var(--tw-border-opacity, 1)); + --tw-bg-opacity: 1; + background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1)); + --tw-text-opacity: 1; + color: rgb(30 64 175 / var(--tw-text-opacity, 1)); +} + +.alert-info:is(.dark *) { + background-color: rgb(30 58 138 / 0.3); + --tw-text-opacity: 1; + color: rgb(191 219 254 / var(--tw-text-opacity, 1)); +} + +/* Buttons mit verstärktem Glassmorphism */ + +.btn-primary { + border-radius: 0.5rem; + padding-left: 1rem; + padding-right: 1rem; + padding-top: 0.5rem; + padding-bottom: 0.5rem; + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity, 1)); + --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); + --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + transition-property: all; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 300ms; +} + +.btn-primary:hover { + --tw-translate-y: -0.125rem; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.btn-primary:focus { + outline: 2px solid transparent; + outline-offset: 2px; + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); + --tw-ring-opacity: 1; + --tw-ring-color: rgb(107 114 128 / var(--tw-ring-opacity, 1)); + --tw-ring-offset-width: 2px; +} + +.btn-primary:is(.dark *) { + --tw-text-opacity: 1; + color: rgb(15 23 42 / var(--tw-text-opacity, 1)); +} + +.btn-primary { + background: rgba(0, 0, 0, 0.7); + backdrop-filter: blur(20px) saturate(150%) brightness(110%); + -webkit-backdrop-filter: blur(20px) saturate(150%) brightness(110%); + border: 1px solid rgba(255, 255, 255, 0.2); + box-shadow: + 0 20px 40px rgba(0, 0, 0, 0.3), + 0 8px 16px rgba(0, 0, 0, 0.2), + inset 0 1px 0 rgba(255, 255, 255, 0.2), + 0 0 0 1px rgba(255, 255, 255, 0.1); +} + +.btn-primary:hover { + background: rgba(0, 0, 0, 0.9); + backdrop-filter: blur(25px) saturate(180%) brightness(120%); + -webkit-backdrop-filter: blur(25px) saturate(180%) brightness(120%); + border: 1px solid rgba(255, 255, 255, 0.3); + box-shadow: + 0 25px 50px rgba(0, 0, 0, 0.4), + 0 10px 20px rgba(0, 0, 0, 0.3), + inset 0 1px 0 rgba(255, 255, 255, 0.3); +} + +.dark .btn-primary { + background: rgba(255, 255, 255, 0.7); + border: 1px solid rgba(0, 0, 0, 0.1); + box-shadow: + 0 20px 40px rgba(0, 0, 0, 0.2), + 0 8px 16px rgba(0, 0, 0, 0.1), + inset 0 1px 0 rgba(255, 255, 255, 0.8), + 0 0 0 1px rgba(0, 0, 0, 0.05); +} + +.dark .btn-primary:hover { + background: rgba(255, 255, 255, 0.9); + border: 1px solid rgba(0, 0, 0, 0.15); + box-shadow: + 0 25px 50px rgba(0, 0, 0, 0.3), + 0 10px 20px rgba(0, 0, 0, 0.2), + inset 0 1px 0 rgba(255, 255, 255, 0.9); +} + +.btn-secondary { + border-radius: 0.5rem; + padding-left: 1rem; + padding-right: 1rem; + padding-top: 0.5rem; + padding-bottom: 0.5rem; + --tw-text-opacity: 1; + color: rgb(15 23 42 / var(--tw-text-opacity, 1)); + --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); + --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + transition-property: all; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 300ms; +} + +.btn-secondary:hover { + --tw-translate-y: -0.125rem; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.btn-secondary:focus { + outline: 2px solid transparent; + outline-offset: 2px; + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); + --tw-ring-opacity: 1; + --tw-ring-color: rgb(100 116 139 / var(--tw-ring-opacity, 1)); + --tw-ring-offset-width: 2px; +} + +.btn-secondary:is(.dark *) { + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity, 1)); +} + +.btn-secondary { + background: rgba(255, 255, 255, 0.3); + backdrop-filter: blur(20px) saturate(150%) brightness(110%); + -webkit-backdrop-filter: blur(20px) saturate(150%) brightness(110%); + border: 1px solid rgba(255, 255, 255, 0.4); + box-shadow: + 0 20px 40px rgba(0, 0, 0, 0.15), + 0 8px 16px rgba(0, 0, 0, 0.1), + inset 0 1px 0 rgba(255, 255, 255, 0.5), + 0 0 0 1px rgba(255, 255, 255, 0.2); +} + +.btn-secondary:hover { + background: rgba(255, 255, 255, 0.5); + backdrop-filter: blur(25px) saturate(180%) brightness(120%); + -webkit-backdrop-filter: blur(25px) saturate(180%) brightness(120%); + border: 1px solid rgba(255, 255, 255, 0.6); + box-shadow: + 0 25px 50px rgba(0, 0, 0, 0.2), + 0 10px 20px rgba(0, 0, 0, 0.15), + inset 0 1px 0 rgba(255, 255, 255, 0.7); +} + +.dark .btn-secondary { + background: rgba(0, 0, 0, 0.4); + border: 1px solid rgba(255, 255, 255, 0.2); + box-shadow: + 0 20px 40px rgba(0, 0, 0, 0.3), + 0 8px 16px rgba(0, 0, 0, 0.2), + inset 0 1px 0 rgba(255, 255, 255, 0.2), + 0 0 0 1px rgba(255, 255, 255, 0.1); +} + +.dark .btn-secondary:hover { + background: rgba(0, 0, 0, 0.6); + border: 1px solid rgba(255, 255, 255, 0.3); + box-shadow: + 0 25px 50px rgba(0, 0, 0, 0.4), + 0 10px 20px rgba(0, 0, 0, 0.3), + inset 0 1px 0 rgba(255, 255, 255, 0.3); +} + +.btn-outline { + border-radius: 0.5rem; + border-width: 2px; + border-color: rgb(0 0 0 / 0.7); + padding-left: 1rem; + padding-right: 1rem; + padding-top: 0.5rem; + padding-bottom: 0.5rem; + --tw-text-opacity: 1; + color: rgb(0 0 0 / var(--tw-text-opacity, 1)); + --tw-backdrop-blur: blur(16px); + -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); + backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); + transition-property: all; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 300ms; +} + +.btn-outline:hover { + background-color: rgb(0 0 0 / 0.7); + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity, 1)); +} + +.btn-outline:focus { + outline: 2px solid transparent; + outline-offset: 2px; + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); + --tw-ring-opacity: 1; + --tw-ring-color: rgb(107 114 128 / var(--tw-ring-opacity, 1)); + --tw-ring-offset-width: 2px; +} + +.btn-outline:is(.dark *) { + border-color: rgb(255 255 255 / 0.7); + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity, 1)); +} + +.btn-outline:hover:is(.dark *) { + background-color: rgb(255 255 255 / 0.7); + --tw-text-opacity: 1; + color: rgb(15 23 42 / var(--tw-text-opacity, 1)); +} + +.btn-outline { + backdrop-filter: blur(16px) saturate(150%); + -webkit-backdrop-filter: blur(16px) saturate(150%); + box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.05); +} + +/* Glassmorphism Card mit abgerundeten Ecken - Verstärkt */ + +.glass-card { + border-radius: 0.75rem; + padding: 1.5rem; + --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); + --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + transition-property: all; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 300ms; + background: rgba(255, 255, 255, 0.15); + backdrop-filter: blur(30px) saturate(200%) brightness(120%) contrast(110%); + -webkit-backdrop-filter: blur(30px) saturate(200%) brightness(120%) contrast(110%); + border: 1px solid rgba(255, 255, 255, 0.3); + box-shadow: + 0 25px 50px rgba(0, 0, 0, 0.15), + 0 8px 16px rgba(0, 0, 0, 0.1), + inset 0 1px 0 rgba(255, 255, 255, 0.3), + 0 0 0 1px rgba(255, 255, 255, 0.1); + border-radius: var(--card-radius); +} + +.dark .glass-card { + background: rgba(0, 0, 0, 0.3); + backdrop-filter: blur(30px) saturate(180%) brightness(110%) contrast(120%); + -webkit-backdrop-filter: blur(30px) saturate(180%) brightness(110%) contrast(120%); + border: 1px solid rgba(255, 255, 255, 0.15); + box-shadow: + 0 25px 50px rgba(0, 0, 0, 0.4), + 0 8px 16px rgba(0, 0, 0, 0.3), + inset 0 1px 0 rgba(255, 255, 255, 0.15), + 0 0 0 1px rgba(255, 255, 255, 0.05); +} + +/* Dashboard Cards mit verstärktem Glassmorphism */ + +.dashboard-card { + border-radius: 0.75rem; + padding: 1.5rem; + --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); + --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + transition-property: all; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 300ms; +} + +.dashboard-card:hover { + --tw-translate-y: -0.25rem; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.dashboard-card { + background: rgba(255, 255, 255, 0.12); + backdrop-filter: blur(35px) saturate(200%) brightness(125%) contrast(115%); + -webkit-backdrop-filter: blur(35px) saturate(200%) brightness(125%) contrast(115%); + border: 1px solid rgba(255, 255, 255, 0.25); + box-shadow: + 0 25px 50px rgba(0, 0, 0, 0.15), + 0 8px 16px rgba(0, 0, 0, 0.08), + inset 0 1px 0 rgba(255, 255, 255, 0.25), + 0 0 0 1px rgba(255, 255, 255, 0.1); + border-radius: var(--card-radius); +} + +.dark .dashboard-card { + background: rgba(0, 0, 0, 0.35); + backdrop-filter: blur(35px) saturate(180%) brightness(115%) contrast(125%); + -webkit-backdrop-filter: blur(35px) saturate(180%) brightness(115%) contrast(125%); + border: 1px solid rgba(255, 255, 255, 0.12); + box-shadow: + 0 25px 50px rgba(0, 0, 0, 0.5), + 0 8px 16px rgba(0, 0, 0, 0.3), + inset 0 1px 0 rgba(255, 255, 255, 0.12), + 0 0 0 1px rgba(255, 255, 255, 0.05); +} + +/* Navigation Styles */ + +.nav-link { + display: flex; + align-items: center; + border-radius: 0.5rem; + padding-left: 1rem; + padding-right: 1rem; + padding-top: 0.5rem; + padding-bottom: 0.5rem; + font-size: 0.875rem; + line-height: 1.25rem; + font-weight: 500; + --tw-text-opacity: 1; + color: rgb(51 65 85 / var(--tw-text-opacity, 1)); + transition-property: all; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 200ms; +} + +.nav-link:hover { + --tw-bg-opacity: 1; + background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1)); + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.nav-link:focus { + outline: 2px solid transparent; + outline-offset: 2px; + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); + --tw-ring-opacity: 1; + --tw-ring-color: rgb(100 116 139 / var(--tw-ring-opacity, 1)); + --tw-ring-offset-width: 2px; +} + +.nav-link:is(.dark *) { + --tw-text-opacity: 1; + color: rgb(203 213 225 / var(--tw-text-opacity, 1)); +} + +.nav-link:hover:is(.dark *) { + background-color: rgb(51 65 85 / 0.5); +} + +.nav-link.active { + --tw-bg-opacity: 1; + background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1)); + --tw-text-opacity: 1; + color: rgb(15 23 42 / var(--tw-text-opacity, 1)); + --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); + --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.nav-link.active:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1)); + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity, 1)); +} + +/* Verbesserte Navbar Styles - Verstärktes Glassmorphism */ + +.navbar { + display: flex; + justify-content: space-between; + align-items: center; + padding: 0.5rem 1rem; + background: rgba(255, 255, 255, 0.1); + -webkit-backdrop-filter: blur(10px); + backdrop-filter: blur(10px); + border-radius: 10px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + transition: all 0.3s ease; +} + +.navbar-button { + padding: 0.25rem 0.5rem; + font-size: 0.875rem; + border-radius: 5px; + transition: background-color 0.3s ease; +} + +.navbar-button:hover { + background-color: rgba(255, 255, 255, 0.2); +} + +@media (max-width: 768px) { + .navbar { + flex-direction: column; + padding: 0.25rem; + } + + .navbar-button { + margin: 0.25rem 0; + } +} + +.dark .navbar { + background: rgba(0, 0, 0, 0.25); + backdrop-filter: blur(40px) saturate(180%) brightness(120%) contrast(120%); + -webkit-backdrop-filter: blur(40px) saturate(180%) brightness(120%) contrast(120%); + box-shadow: + 0 8px 32px rgba(0, 0, 0, 0.6), + 0 2px 8px rgba(0, 0, 0, 0.4), + inset 0 1px 0 rgba(255, 255, 255, 0.1), + 0 0 0 1px rgba(255, 255, 255, 0.05); + border-bottom: 1px solid rgba(255, 255, 255, 0.1); +} + +.navbar-brand { + display: flex; + align-items: center; +} + +.navbar-brand > :not([hidden]) ~ :not([hidden]) { + --tw-space-x-reverse: 0; + margin-right: calc(0.5rem * var(--tw-space-x-reverse)); + margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse))); +} + +.navbar-brand { + transition-property: transform; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 300ms; +} + +.navbar-brand:hover { + --tw-scale-x: 1.05; + --tw-scale-y: 1.05; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.navbar-menu { + margin-left: 1rem; + margin-right: 1rem; + display: flex; + align-items: center; + justify-content: center; +} + +.navbar-menu > :not([hidden]) ~ :not([hidden]) { + --tw-space-x-reverse: 0; + margin-right: calc(0.25rem * var(--tw-space-x-reverse)); + margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse))); +} + +.navbar-menu { + border-radius: 1rem; + border-width: 1px; + padding: 0.75rem; +} + +@media (min-width: 768px) { + .navbar-menu > :not([hidden]) ~ :not([hidden]) { + --tw-space-x-reverse: 0; + margin-right: calc(0.75rem * var(--tw-space-x-reverse)); + margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse))); + } +} + +@media (min-width: 1024px) { + .navbar-menu > :not([hidden]) ~ :not([hidden]) { + --tw-space-x-reverse: 0; + margin-right: calc(1.5rem * var(--tw-space-x-reverse)); + margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse))); + } +} + +.navbar-menu { + background: rgba(255, 255, 255, 0.25); + backdrop-filter: blur(20px) saturate(150%) brightness(110%); + -webkit-backdrop-filter: blur(20px) saturate(150%) brightness(110%); + border: 1px solid rgba(255, 255, 255, 0.3); + box-shadow: + 0 4px 16px rgba(0, 0, 0, 0.1), + inset 0 1px 0 rgba(255, 255, 255, 0.4), + 0 0 0 1px rgba(255, 255, 255, 0.1); +} + +.dark .navbar-menu { + background: rgba(0, 0, 0, 0.4); + backdrop-filter: blur(20px) saturate(150%) brightness(110%); + -webkit-backdrop-filter: blur(20px) saturate(150%) brightness(110%); + border: 1px solid rgba(255, 255, 255, 0.15); + box-shadow: + 0 4px 16px rgba(0, 0, 0, 0.3), + inset 0 1px 0 rgba(255, 255, 255, 0.2), + 0 0 0 1px rgba(255, 255, 255, 0.05); +} + +.navbar-button { + border-radius: 9999px; + padding: 0.5rem; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 300ms; +} + +.navbar-button:focus { + outline: 2px solid transparent; + outline-offset: 2px; + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); + --tw-ring-offset-width: 2px; +} + +/* User Menu Styles */ + +.user-menu-button { + display: flex; + align-items: center; +} + +.user-menu-button > :not([hidden]) ~ :not([hidden]) { + --tw-space-x-reverse: 0; + margin-right: calc(0.5rem * var(--tw-space-x-reverse)); + margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse))); +} + +.user-menu-button { + border-radius: 0.5rem; + padding: 0.25rem; + transition-property: all; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 300ms; +} + +.user-menu-button:hover { + background-color: rgb(243 244 246 / 0.8); +} + +.user-menu-button:focus { + outline: 2px solid transparent; + outline-offset: 2px; + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); + --tw-ring-opacity: 1; + --tw-ring-color: rgb(100 116 139 / var(--tw-ring-opacity, 1)); + --tw-ring-offset-width: 2px; +} + +.user-menu-button:hover:is(.dark *) { + background-color: rgb(51 65 85 / 0.6); +} + +.user-avatar { + display: flex; + height: 2.5rem; + width: 2.5rem; + align-items: center; + justify-content: center; + border-radius: 9999px; + --tw-bg-opacity: 1; + background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1)); + font-size: 0.875rem; + line-height: 1.25rem; + font-weight: 700; + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity, 1)); + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + transition-property: all; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 300ms; +} + +.user-avatar:hover { + --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.user-avatar:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); + --tw-text-opacity: 1; + color: rgb(15 23 42 / var(--tw-text-opacity, 1)); +} + +/* Avatar im Dropdown */ + +.avatar-large { + display: flex; + height: 3.5rem; + width: 3.5rem; + align-items: center; + justify-content: center; + border-radius: 9999px; + --tw-bg-opacity: 1; + background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1)); + font-size: 1.125rem; + line-height: 1.75rem; + font-weight: 700; + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity, 1)); + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.avatar-large:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); + --tw-text-opacity: 1; + color: rgb(15 23 42 / var(--tw-text-opacity, 1)); +} + +.user-dropdown-item { + display: flex; + align-items: center; + padding-left: 1rem; + padding-right: 1rem; + padding-top: 0.75rem; + padding-bottom: 0.75rem; + font-size: 0.875rem; + line-height: 1.25rem; + --tw-text-opacity: 1; + color: rgb(51 65 85 / var(--tw-text-opacity, 1)); + transition-property: all; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 300ms; +} + +.user-dropdown-item:hover { + background-color: rgb(243 244 246 / 0.8); + --tw-text-opacity: 1; + color: rgb(15 23 42 / var(--tw-text-opacity, 1)); +} + +.user-dropdown-item:focus { + background-color: rgb(243 244 246 / 0.8); + outline: 2px solid transparent; + outline-offset: 2px; +} + +.user-dropdown-item:is(.dark *) { + --tw-text-opacity: 1; + color: rgb(203 213 225 / var(--tw-text-opacity, 1)); +} + +.user-dropdown-item:hover:is(.dark *) { + background-color: rgb(51 65 85 / 0.6); + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity, 1)); +} + +.user-dropdown-item:focus:is(.dark *) { + background-color: rgb(51 65 85 / 0.6); +} + +.user-dropdown-separator { + margin-top: 0.25rem; + margin-bottom: 0.25rem; + border-top-width: 1px; + border-color: rgb(229 231 235 / 0.8); +} + +.user-dropdown-separator:is(.dark *) { + border-color: rgb(51 65 85 / 0.3); +} + +.menu-item { + display: flex; + align-items: center; +} + +.menu-item > :not([hidden]) ~ :not([hidden]) { + --tw-space-x-reverse: 0; + margin-right: calc(0.5rem * var(--tw-space-x-reverse)); + margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse))); +} + +.menu-item { + border-radius: 0.75rem; + padding-left: 1rem; + padding-right: 1rem; + padding-top: 0.625rem; + padding-bottom: 0.625rem; + --tw-text-opacity: 1; + color: rgb(51 65 85 / var(--tw-text-opacity, 1)); + transition-property: all; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 300ms; +} + +.menu-item:is(.dark *) { + --tw-text-opacity: 1; + color: rgb(203 213 225 / var(--tw-text-opacity, 1)); +} + +.menu-item { + background: rgba(255, 255, 255, 0.1); + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); + border: 1px solid rgba(255, 255, 255, 0.2); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); +} + +.menu-item:hover { + --tw-text-opacity: 1; + color: rgb(15 23 42 / var(--tw-text-opacity, 1)); +} + +.menu-item:hover:is(.dark *) { + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity, 1)); +} + +.menu-item:hover { + background: rgba(255, 255, 255, 0.3); + backdrop-filter: blur(15px) saturate(150%); + -webkit-backdrop-filter: blur(15px) saturate(150%); + border: 1px solid rgba(255, 255, 255, 0.4); + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); + transform: translateY(-1px); +} + +.dark .menu-item { + background: rgba(0, 0, 0, 0.2); + border: 1px solid rgba(255, 255, 255, 0.1); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); +} + +.dark .menu-item:hover { + background: rgba(0, 0, 0, 0.4); + border: 1px solid rgba(255, 255, 255, 0.2); + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); +} + +.menu-item.active { + font-weight: 500; + --tw-text-opacity: 1; + color: rgb(15 23 42 / var(--tw-text-opacity, 1)); +} + +.menu-item.active:is(.dark *) { + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity, 1)); +} + +.menu-item.active { + background: rgba(255, 255, 255, 0.5); + backdrop-filter: blur(20px) saturate(180%); + -webkit-backdrop-filter: blur(20px) saturate(180%); + border: 1px solid rgba(255, 255, 255, 0.6); + box-shadow: + 0 4px 16px rgba(0, 0, 0, 0.15), + inset 0 1px 0 rgba(255, 255, 255, 0.5); +} + +.dark .menu-item.active { + background: rgba(0, 0, 0, 0.6); + border: 1px solid rgba(255, 255, 255, 0.3); + box-shadow: + 0 4px 16px rgba(0, 0, 0, 0.4), + inset 0 1px 0 rgba(255, 255, 255, 0.2); +} + +/* Dropdown Styles - Verstärktes Glassmorphism */ + +.user-dropdown { + position: absolute; + right: 0px; + z-index: 50; + margin-top: 0.5rem; + width: 16rem; + overflow: hidden; + border-radius: 0.75rem; + --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); + --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + background: rgba(255, 255, 255, 0.1); + backdrop-filter: blur(40px) saturate(200%) brightness(130%) contrast(110%); + -webkit-backdrop-filter: blur(40px) saturate(200%) brightness(130%) contrast(110%); + border: 1px solid rgba(255, 255, 255, 0.3); + box-shadow: + 0 25px 50px rgba(0, 0, 0, 0.25), + 0 8px 16px rgba(0, 0, 0, 0.15), + inset 0 1px 0 rgba(255, 255, 255, 0.4), + 0 0 0 1px rgba(255, 255, 255, 0.1); + animation: fadeIn 0.2s ease-out forwards; +} + +.dark .user-dropdown { + background: rgba(0, 0, 0, 0.4); + backdrop-filter: blur(40px) saturate(180%) brightness(120%) contrast(120%); + -webkit-backdrop-filter: blur(40px) saturate(180%) brightness(120%) contrast(120%); + border: 1px solid rgba(255, 255, 255, 0.15); + box-shadow: + 0 25px 50px rgba(0, 0, 0, 0.6), + 0 8px 16px rgba(0, 0, 0, 0.4), + inset 0 1px 0 rgba(255, 255, 255, 0.2), + 0 0 0 1px rgba(255, 255, 255, 0.05); +} + +.dropdown-header { + display: flex; + align-items: center; + border-bottom-width: 1px; + border-color: rgb(229 231 235 / 0.8); + padding: 1rem; +} + +.dropdown-header:is(.dark *) { + border-color: rgb(51 65 85 / 0.3); +} + +.dropdown-item { + display: flex; + align-items: center; + gap: 0.75rem; + padding-left: 1rem; + padding-right: 1rem; + padding-top: 0.75rem; + padding-bottom: 0.75rem; + font-size: 0.875rem; + line-height: 1.25rem; + --tw-text-opacity: 1; + color: rgb(51 65 85 / var(--tw-text-opacity, 1)); + transition-property: all; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 300ms; +} + +.dropdown-item:hover { + background-color: rgb(243 244 246 / 0.8); + --tw-text-opacity: 1; + color: rgb(15 23 42 / var(--tw-text-opacity, 1)); +} + +.dropdown-item:is(.dark *) { + --tw-text-opacity: 1; + color: rgb(203 213 225 / var(--tw-text-opacity, 1)); +} + +.dropdown-item:hover:is(.dark *) { + background-color: rgb(51 65 85 / 0.6); + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity, 1)); +} + +.dropdown-divider { + border-top-width: 1px; + border-color: rgb(229 231 235 / 0.8); +} + +.dropdown-divider:is(.dark *) { + border-color: rgb(51 65 85 / 0.3); +} + +/* Mercedes-Benz Logo Animation */ + +@keyframes mercedes-rotate { + 0% { + transform: rotate(0deg); + } + + 25% { + transform: rotate(90deg); + } + + 50% { + transform: rotate(180deg); + } + + 75% { + transform: rotate(270deg); + } + + 100% { + transform: rotate(360deg); + } +} + +.navbar-brand:hover svg { + animation: mercedes-rotate 5s infinite linear; + transform-origin: center; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border-width: 0; +} + +.pointer-events-none { + pointer-events: none; +} + +.pointer-events-auto { + pointer-events: auto; +} + +.visible { + visibility: visible; +} + +.static { + position: static; +} + +.fixed { + position: fixed; +} + +.absolute { + position: absolute; +} + +.relative { + position: relative; +} + +.sticky { + position: sticky; +} + +.-inset-1 { + inset: -0.25rem; +} + +.inset-0 { + inset: 0px; +} + +.inset-y-0 { + top: 0px; + bottom: 0px; +} + +.-right-1 { + right: -0.25rem; +} + +.-top-1 { + top: -0.25rem; +} + +.bottom-0 { + bottom: 0px; +} + +.bottom-4 { + bottom: 1rem; +} + +.bottom-6 { + bottom: 1.5rem; +} + +.bottom-8 { + bottom: 2rem; +} + +.bottom-full { + bottom: 100%; +} + +.left-0 { + left: 0px; +} + +.left-1\/2 { + left: 50%; +} + +.left-1\/4 { + left: 25%; +} + +.right-0 { + right: 0px; +} + +.right-1\/3 { + right: 33.333333%; +} + +.right-1\/4 { + right: 25%; +} + +.right-2 { + right: 0.5rem; +} + +.right-2\.5 { + right: 0.625rem; +} + +.right-4 { + right: 1rem; +} + +.right-5 { + right: 1.25rem; +} + +.right-6 { + right: 1.5rem; +} + +.right-8 { + right: 2rem; +} + +.top-0 { + top: 0px; +} + +.top-1\/2 { + top: 50%; +} + +.top-1\/3 { + top: 33.333333%; +} + +.top-1\/4 { + top: 25%; +} + +.top-2 { + top: 0.5rem; +} + +.top-2\.5 { + top: 0.625rem; +} + +.top-2\/3 { + top: 66.666667%; +} + +.top-3\/4 { + top: 75%; +} + +.top-4 { + top: 1rem; +} + +.top-5 { + top: 1.25rem; +} + +.top-6 { + top: 1.5rem; +} + +.top-full { + top: 100%; +} + +.z-10 { + z-index: 10; +} + +.z-40 { + z-index: 40; +} + +.z-50 { + z-index: 50; +} + +.col-span-full { + grid-column: 1 / -1; +} + +.m-1 { + margin: 0.25rem; +} + +.-mx-1\.5 { + margin-left: -0.375rem; + margin-right: -0.375rem; +} + +.-my-1\.5 { + margin-top: -0.375rem; + margin-bottom: -0.375rem; +} + +.mx-2 { + margin-left: 0.5rem; + margin-right: 0.5rem; +} + +.mx-4 { + margin-left: 1rem; + margin-right: 1rem; +} + +.mx-auto { + margin-left: auto; + margin-right: auto; +} + +.my-3 { + margin-top: 0.75rem; + margin-bottom: 0.75rem; +} + +.-ml-1 { + margin-left: -0.25rem; +} + +.-mt-8 { + margin-top: -2rem; +} + +.mb-1 { + margin-bottom: 0.25rem; +} + +.mb-1\.5 { + margin-bottom: 0.375rem; +} + +.mb-10 { + margin-bottom: 2.5rem; +} + +.mb-12 { + margin-bottom: 3rem; +} + +.mb-16 { + margin-bottom: 4rem; +} + +.mb-2 { + margin-bottom: 0.5rem; +} + +.mb-3 { + margin-bottom: 0.75rem; +} + +.mb-4 { + margin-bottom: 1rem; +} + +.mb-5 { + margin-bottom: 1.25rem; +} + +.mb-6 { + margin-bottom: 1.5rem; +} + +.mb-8 { + margin-bottom: 2rem; +} + +.ml-2 { + margin-left: 0.5rem; +} + +.ml-3 { + margin-left: 0.75rem; +} + +.ml-4 { + margin-left: 1rem; +} + +.ml-auto { + margin-left: auto; +} + +.mr-1 { + margin-right: 0.25rem; +} + +.mr-2 { + margin-right: 0.5rem; +} + +.mr-3 { + margin-right: 0.75rem; +} + +.mt-0\.5 { + margin-top: 0.125rem; +} + +.mt-1 { + margin-top: 0.25rem; +} + +.mt-1\.5 { + margin-top: 0.375rem; +} + +.mt-12 { + margin-top: 3rem; +} + +.mt-2 { + margin-top: 0.5rem; +} + +.mt-3 { + margin-top: 0.75rem; +} + +.mt-4 { + margin-top: 1rem; +} + +.mt-6 { + margin-top: 1.5rem; +} + +.mt-8 { + margin-top: 2rem; +} + +.mt-auto { + margin-top: auto; +} + +.block { + display: block; +} + +.inline-block { + display: inline-block; +} + +.inline { + display: inline; +} + +.flex { + display: flex; +} + +.inline-flex { + display: inline-flex; +} + +.table { + display: table; +} + +.\!grid { + display: grid !important; +} + +.grid { + display: grid; +} + +.list-item { + display: list-item; +} + +.hidden { + display: none; +} + +.h-0 { + height: 0px; +} + +.h-0\.5 { + height: 0.125rem; +} + +.h-1 { + height: 0.25rem; +} + +.h-10 { + height: 2.5rem; +} + +.h-11 { + height: 2.75rem; +} + +.h-12 { + height: 3rem; +} + +.h-14 { + height: 3.5rem; +} + +.h-16 { + height: 4rem; +} + +.h-2 { + height: 0.5rem; +} + +.h-2\.5 { + height: 0.625rem; +} + +.h-20 { + height: 5rem; +} + +.h-24 { + height: 6rem; +} + +.h-3 { + height: 0.75rem; +} + +.h-3\.5 { + height: 0.875rem; +} + +.h-32 { + height: 8rem; +} + +.h-4 { + height: 1rem; +} + +.h-5 { + height: 1.25rem; +} + +.h-6 { + height: 1.5rem; +} + +.h-64 { + height: 16rem; +} + +.h-8 { + height: 2rem; +} + +.h-9 { + height: 2.25rem; +} + +.h-full { + height: 100%; +} + +.h-px { + height: 1px; +} + +.max-h-96 { + max-height: 24rem; +} + +.max-h-\[80vh\] { + max-height: 80vh; +} + +.max-h-\[90vh\] { + max-height: 90vh; +} + +.min-h-\[80vh\] { + min-height: 80vh; +} + +.min-h-screen { + min-height: 100vh; +} + +.w-0 { + width: 0px; +} + +.w-1 { + width: 0.25rem; +} + +.w-1\/2 { + width: 50%; +} + +.w-1\/3 { + width: 33.333333%; +} + +.w-10 { + width: 2.5rem; +} + +.w-11 { + width: 2.75rem; +} + +.w-12 { + width: 3rem; +} + +.w-14 { + width: 3.5rem; +} + +.w-16 { + width: 4rem; +} + +.w-2 { + width: 0.5rem; +} + +.w-2\.5 { + width: 0.625rem; +} + +.w-20 { + width: 5rem; +} + +.w-24 { + width: 6rem; +} + +.w-3 { + width: 0.75rem; +} + +.w-3\.5 { + width: 0.875rem; +} + +.w-3\/4 { + width: 75%; +} + +.w-4 { + width: 1rem; +} + +.w-5 { + width: 1.25rem; +} + +.w-6 { + width: 1.5rem; +} + +.w-64 { + width: 16rem; +} + +.w-8 { + width: 2rem; +} + +.w-80 { + width: 20rem; +} + +.w-9 { + width: 2.25rem; +} + +.w-full { + width: 100%; +} + +.min-w-0 { + min-width: 0px; +} + +.min-w-full { + min-width: 100%; +} + +.max-w-2xl { + max-width: 42rem; +} + +.max-w-3xl { + max-width: 48rem; +} + +.max-w-4xl { + max-width: 56rem; +} + +.max-w-6xl { + max-width: 72rem; +} + +.max-w-7xl { + max-width: 80rem; +} + +.max-w-lg { + max-width: 32rem; +} + +.max-w-md { + max-width: 28rem; +} + +.max-w-none { + max-width: none; +} + +.max-w-screen-xl { + max-width: 1280px; +} + +.max-w-sm { + max-width: 24rem; +} + +.flex-1 { + flex: 1 1 0%; +} + +.flex-shrink-0 { + flex-shrink: 0; +} + +.shrink { + flex-shrink: 1; +} + +.flex-grow { + flex-grow: 1; +} + +.-translate-x-1 { + --tw-translate-x: -0.25rem; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.-translate-x-1\/2 { + --tw-translate-x: -50%; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.-translate-y-0 { + --tw-translate-y: -0px; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.-translate-y-1 { + --tw-translate-y: -0.25rem; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.-translate-y-1\/2 { + --tw-translate-y: -50%; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.translate-x-0 { + --tw-translate-x: 0px; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.translate-x-1 { + --tw-translate-x: 0.25rem; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.translate-x-full { + --tw-translate-x: 100%; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.translate-y-1 { + --tw-translate-y: 0.25rem; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.rotate-0 { + --tw-rotate: 0deg; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.rotate-90 { + --tw-rotate: 90deg; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.scale-100 { + --tw-scale-x: 1; + --tw-scale-y: 1; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.scale-105 { + --tw-scale-x: 1.05; + --tw-scale-y: 1.05; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.scale-75 { + --tw-scale-x: .75; + --tw-scale-y: .75; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.scale-95 { + --tw-scale-x: .95; + --tw-scale-y: .95; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.transform { + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +@keyframes pulse { + 50% { + opacity: .5; + } +} + +.animate-pulse { + animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; +} + +@keyframes spin { + to { + transform: rotate(360deg); + } +} + +.animate-spin { + animation: spin 1s linear infinite; +} + +.cursor-not-allowed { + cursor: not-allowed; +} + +.cursor-pointer { + cursor: pointer; +} + +.select-none { + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; +} + +.resize-none { + resize: none; +} + +.resize { + resize: both; +} + +.appearance-none { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; +} + +.grid-cols-1 { + grid-template-columns: repeat(1, minmax(0, 1fr)); +} + +.grid-cols-2 { + grid-template-columns: repeat(2, minmax(0, 1fr)); +} + +.flex-col { + flex-direction: column; +} + +.flex-wrap { + flex-wrap: wrap; +} + +.items-start { + align-items: flex-start; +} + +.items-end { + align-items: flex-end; +} + +.items-center { + align-items: center; +} + +.justify-end { + justify-content: flex-end; +} + +.justify-center { + justify-content: center; +} + +.justify-between { + justify-content: space-between; +} + +.gap-2 { + gap: 0.5rem; +} + +.gap-3 { + gap: 0.75rem; +} + +.gap-4 { + gap: 1rem; +} + +.gap-6 { + gap: 1.5rem; +} + +.gap-8 { + gap: 2rem; +} + +.space-x-1 > :not([hidden]) ~ :not([hidden]) { + --tw-space-x-reverse: 0; + margin-right: calc(0.25rem * var(--tw-space-x-reverse)); + margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse))); +} + +.space-x-2 > :not([hidden]) ~ :not([hidden]) { + --tw-space-x-reverse: 0; + margin-right: calc(0.5rem * var(--tw-space-x-reverse)); + margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse))); +} + +.space-x-3 > :not([hidden]) ~ :not([hidden]) { + --tw-space-x-reverse: 0; + margin-right: calc(0.75rem * var(--tw-space-x-reverse)); + margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse))); +} + +.space-x-4 > :not([hidden]) ~ :not([hidden]) { + --tw-space-x-reverse: 0; + margin-right: calc(1rem * var(--tw-space-x-reverse)); + margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse))); +} + +.space-y-1 > :not([hidden]) ~ :not([hidden]) { + --tw-space-y-reverse: 0; + margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(0.25rem * var(--tw-space-y-reverse)); +} + +.space-y-2 > :not([hidden]) ~ :not([hidden]) { + --tw-space-y-reverse: 0; + margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(0.5rem * var(--tw-space-y-reverse)); +} + +.space-y-3 > :not([hidden]) ~ :not([hidden]) { + --tw-space-y-reverse: 0; + margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(0.75rem * var(--tw-space-y-reverse)); +} + +.space-y-4 > :not([hidden]) ~ :not([hidden]) { + --tw-space-y-reverse: 0; + margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(1rem * var(--tw-space-y-reverse)); +} + +.space-y-6 > :not([hidden]) ~ :not([hidden]) { + --tw-space-y-reverse: 0; + margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(1.5rem * var(--tw-space-y-reverse)); +} + +.space-y-8 > :not([hidden]) ~ :not([hidden]) { + --tw-space-y-reverse: 0; + margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(2rem * var(--tw-space-y-reverse)); +} + +.divide-y > :not([hidden]) ~ :not([hidden]) { + --tw-divide-y-reverse: 0; + border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse))); + border-bottom-width: calc(1px * var(--tw-divide-y-reverse)); +} + +.divide-gray-200 > :not([hidden]) ~ :not([hidden]) { + --tw-divide-opacity: 1; + border-color: rgb(229 231 235 / var(--tw-divide-opacity, 1)); +} + +.divide-slate-200 > :not([hidden]) ~ :not([hidden]) { + --tw-divide-opacity: 1; + border-color: rgb(226 232 240 / var(--tw-divide-opacity, 1)); +} + +.overflow-auto { + overflow: auto; +} + +.overflow-hidden { + overflow: hidden; +} + +.overflow-x-auto { + overflow-x: auto; +} + +.overflow-y-auto { + overflow-y: auto; +} + +.scroll-smooth { + scroll-behavior: smooth; +} + +.truncate { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.whitespace-nowrap { + white-space: nowrap; +} + +.break-all { + word-break: break-all; +} + +.rounded { + border-radius: 0.25rem; +} + +.rounded-2xl { + border-radius: 1rem; +} + +.rounded-3xl { + border-radius: 1.5rem; +} + +.rounded-full { + border-radius: 9999px; +} + +.rounded-lg { + border-radius: 0.5rem; +} + +.rounded-md { + border-radius: 0.375rem; +} + +.rounded-xl { + border-radius: 0.75rem; +} + +.rounded-r-lg { + border-top-right-radius: 0.5rem; + border-bottom-right-radius: 0.5rem; +} + +.rounded-r-xl { + border-top-right-radius: 0.75rem; + border-bottom-right-radius: 0.75rem; +} + +.border { + border-width: 1px; +} + +.border-2 { + border-width: 2px; +} + +.border-4 { + border-width: 4px; +} + +.border-b { + border-bottom-width: 1px; +} + +.border-b-2 { + border-bottom-width: 2px; +} + +.border-l-4 { + border-left-width: 4px; +} + +.border-r-4 { + border-right-width: 4px; +} + +.border-t { + border-top-width: 1px; +} + +.border-t-4 { + border-top-width: 4px; +} + +.border-dashed { + border-style: dashed; +} + +.border-black { + --tw-border-opacity: 1; + border-color: rgb(0 0 0 / var(--tw-border-opacity, 1)); +} + +.border-black\/70 { + border-color: rgb(0 0 0 / 0.7); +} + +.border-blue-200 { + --tw-border-opacity: 1; + border-color: rgb(191 219 254 / var(--tw-border-opacity, 1)); +} + +.border-blue-400 { + --tw-border-opacity: 1; + border-color: rgb(96 165 250 / var(--tw-border-opacity, 1)); +} + +.border-blue-500 { + --tw-border-opacity: 1; + border-color: rgb(59 130 246 / var(--tw-border-opacity, 1)); +} + +.border-gray-200 { + --tw-border-opacity: 1; + border-color: rgb(229 231 235 / var(--tw-border-opacity, 1)); +} + +.border-gray-200\/60 { + border-color: rgb(229 231 235 / 0.6); +} + +.border-gray-200\/70 { + border-color: rgb(229 231 235 / 0.7); +} + +.border-gray-200\/80 { + border-color: rgb(229 231 235 / 0.8); +} + +.border-gray-300 { + --tw-border-opacity: 1; + border-color: rgb(209 213 219 / var(--tw-border-opacity, 1)); +} + +.border-gray-300\/60 { + border-color: rgb(209 213 219 / 0.6); +} + +.border-gray-400 { + --tw-border-opacity: 1; + border-color: rgb(156 163 175 / var(--tw-border-opacity, 1)); +} + +.border-green-200 { + --tw-border-opacity: 1; + border-color: rgb(187 247 208 / var(--tw-border-opacity, 1)); +} + +.border-green-300 { + --tw-border-opacity: 1; + border-color: rgb(134 239 172 / var(--tw-border-opacity, 1)); +} + +.border-green-400 { + --tw-border-opacity: 1; + border-color: rgb(74 222 128 / var(--tw-border-opacity, 1)); +} + +.border-green-500 { + --tw-border-opacity: 1; + border-color: rgb(34 197 94 / var(--tw-border-opacity, 1)); +} + +.border-indigo-600 { + --tw-border-opacity: 1; + border-color: rgb(79 70 229 / var(--tw-border-opacity, 1)); +} + +.border-light-border { + --tw-border-opacity: 1; + border-color: rgb(226 232 240 / var(--tw-border-opacity, 1)); +} + +.border-mercedes-silver { + --tw-border-opacity: 1; + border-color: rgb(192 192 192 / var(--tw-border-opacity, 1)); +} + +.border-purple-400 { + --tw-border-opacity: 1; + border-color: rgb(192 132 252 / var(--tw-border-opacity, 1)); +} + +.border-red-200 { + --tw-border-opacity: 1; + border-color: rgb(254 202 202 / var(--tw-border-opacity, 1)); +} + +.border-red-300 { + --tw-border-opacity: 1; + border-color: rgb(252 165 165 / var(--tw-border-opacity, 1)); +} + +.border-red-400 { + --tw-border-opacity: 1; + border-color: rgb(248 113 113 / var(--tw-border-opacity, 1)); +} + +.border-red-500 { + --tw-border-opacity: 1; + border-color: rgb(239 68 68 / var(--tw-border-opacity, 1)); +} + +.border-slate-200 { + --tw-border-opacity: 1; + border-color: rgb(226 232 240 / var(--tw-border-opacity, 1)); +} + +.border-slate-200\/50 { + border-color: rgb(226 232 240 / 0.5); +} + +.border-slate-200\/60 { + border-color: rgb(226 232 240 / 0.6); +} + +.border-slate-300 { + --tw-border-opacity: 1; + border-color: rgb(203 213 225 / var(--tw-border-opacity, 1)); +} + +.border-transparent { + border-color: transparent; +} + +.border-white\/20 { + border-color: rgb(255 255 255 / 0.2); +} + +.border-yellow-200 { + --tw-border-opacity: 1; + border-color: rgb(254 240 138 / var(--tw-border-opacity, 1)); +} + +.border-yellow-400 { + --tw-border-opacity: 1; + border-color: rgb(250 204 21 / var(--tw-border-opacity, 1)); +} + +.border-yellow-500 { + --tw-border-opacity: 1; + border-color: rgb(234 179 8 / var(--tw-border-opacity, 1)); +} + +.border-t-slate-900 { + --tw-border-opacity: 1; + border-top-color: rgb(15 23 42 / var(--tw-border-opacity, 1)); +} + +.bg-accent-primary { + --tw-bg-opacity: 1; + background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1)); +} + +.bg-amber-400 { + --tw-bg-opacity: 1; + background-color: rgb(251 191 36 / var(--tw-bg-opacity, 1)); +} + +.bg-amber-500 { + --tw-bg-opacity: 1; + background-color: rgb(245 158 11 / var(--tw-bg-opacity, 1)); +} + +.bg-black { + --tw-bg-opacity: 1; + background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1)); +} + +.bg-black\/20 { + background-color: rgb(0 0 0 / 0.2); +} + +.bg-black\/30 { + background-color: rgb(0 0 0 / 0.3); +} + +.bg-black\/40 { + background-color: rgb(0 0 0 / 0.4); +} + +.bg-black\/50 { + background-color: rgb(0 0 0 / 0.5); +} + +.bg-black\/60 { + background-color: rgb(0 0 0 / 0.6); +} + +.bg-blue-100 { + --tw-bg-opacity: 1; + background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1)); +} + +.bg-blue-400 { + --tw-bg-opacity: 1; + background-color: rgb(96 165 250 / var(--tw-bg-opacity, 1)); +} + +.bg-blue-50 { + --tw-bg-opacity: 1; + background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1)); +} + +.bg-blue-500 { + --tw-bg-opacity: 1; + background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1)); +} + +.bg-blue-500\/70 { + background-color: rgb(59 130 246 / 0.7); +} + +.bg-blue-600 { + --tw-bg-opacity: 1; + background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1)); +} + +.bg-dark-card { + --tw-bg-opacity: 1; + background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1)); +} + +.bg-dark-surface { + --tw-bg-opacity: 1; + background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1)); +} + +.bg-gray-100 { + --tw-bg-opacity: 1; + background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1)); +} + +.bg-gray-200 { + --tw-bg-opacity: 1; + background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1)); +} + +.bg-gray-300 { + --tw-bg-opacity: 1; + background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1)); +} + +.bg-gray-400 { + --tw-bg-opacity: 1; + background-color: rgb(156 163 175 / var(--tw-bg-opacity, 1)); +} + +.bg-gray-50 { + --tw-bg-opacity: 1; + background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1)); +} + +.bg-gray-500 { + --tw-bg-opacity: 1; + background-color: rgb(107 114 128 / var(--tw-bg-opacity, 1)); +} + +.bg-green-100 { + --tw-bg-opacity: 1; + background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1)); +} + +.bg-green-100\/90 { + background-color: rgb(220 252 231 / 0.9); +} + +.bg-green-400 { + --tw-bg-opacity: 1; + background-color: rgb(74 222 128 / var(--tw-bg-opacity, 1)); +} + +.bg-green-50 { + --tw-bg-opacity: 1; + background-color: rgb(240 253 244 / var(--tw-bg-opacity, 1)); +} + +.bg-green-50\/80 { + background-color: rgb(240 253 244 / 0.8); +} + +.bg-green-500 { + --tw-bg-opacity: 1; + background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1)); +} + +.bg-green-500\/70 { + background-color: rgb(34 197 94 / 0.7); +} + +.bg-green-600 { + --tw-bg-opacity: 1; + background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1)); +} + +.bg-indigo-500 { + --tw-bg-opacity: 1; + background-color: rgb(99 102 241 / var(--tw-bg-opacity, 1)); +} + +.bg-indigo-600 { + --tw-bg-opacity: 1; + background-color: rgb(79 70 229 / var(--tw-bg-opacity, 1)); +} + +.bg-light-surface { + --tw-bg-opacity: 1; + background-color: rgb(247 250 252 / var(--tw-bg-opacity, 1)); +} + +.bg-mercedes-silver { + --tw-bg-opacity: 1; + background-color: rgb(192 192 192 / var(--tw-bg-opacity, 1)); +} + +.bg-orange-100 { + --tw-bg-opacity: 1; + background-color: rgb(255 237 213 / var(--tw-bg-opacity, 1)); +} + +.bg-orange-400 { + --tw-bg-opacity: 1; + background-color: rgb(251 146 60 / var(--tw-bg-opacity, 1)); +} + +.bg-orange-500 { + --tw-bg-opacity: 1; + background-color: rgb(249 115 22 / var(--tw-bg-opacity, 1)); +} + +.bg-purple-100 { + --tw-bg-opacity: 1; + background-color: rgb(243 232 255 / var(--tw-bg-opacity, 1)); +} + +.bg-purple-400 { + --tw-bg-opacity: 1; + background-color: rgb(192 132 252 / var(--tw-bg-opacity, 1)); +} + +.bg-purple-500 { + --tw-bg-opacity: 1; + background-color: rgb(168 85 247 / var(--tw-bg-opacity, 1)); +} + +.bg-red-100 { + --tw-bg-opacity: 1; + background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1)); +} + +.bg-red-100\/90 { + background-color: rgb(254 226 226 / 0.9); +} + +.bg-red-400 { + --tw-bg-opacity: 1; + background-color: rgb(248 113 113 / var(--tw-bg-opacity, 1)); +} + +.bg-red-50 { + --tw-bg-opacity: 1; + background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1)); +} + +.bg-red-500 { + --tw-bg-opacity: 1; + background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1)); +} + +.bg-red-500\/70 { + background-color: rgb(239 68 68 / 0.7); +} + +.bg-red-600 { + --tw-bg-opacity: 1; + background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1)); +} + +.bg-slate-100 { + --tw-bg-opacity: 1; + background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1)); +} + +.bg-slate-200 { + --tw-bg-opacity: 1; + background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1)); +} + +.bg-slate-50 { + --tw-bg-opacity: 1; + background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1)); +} + +.bg-slate-50\/80 { + background-color: rgb(248 250 252 / 0.8); +} + +.bg-slate-500 { + --tw-bg-opacity: 1; + background-color: rgb(100 116 139 / var(--tw-bg-opacity, 1)); +} + +.bg-slate-700\/40 { + background-color: rgb(51 65 85 / 0.4); +} + +.bg-slate-800\/70 { + background-color: rgb(30 41 59 / 0.7); +} + +.bg-slate-900 { + --tw-bg-opacity: 1; + background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1)); +} + +.bg-teal-500 { + --tw-bg-opacity: 1; + background-color: rgb(20 184 166 / var(--tw-bg-opacity, 1)); +} + +.bg-white { + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); +} + +.bg-white\/10 { + background-color: rgb(255 255 255 / 0.1); +} + +.bg-white\/60 { + background-color: rgb(255 255 255 / 0.6); +} + +.bg-white\/70 { + background-color: rgb(255 255 255 / 0.7); +} + +.bg-white\/80 { + background-color: rgb(255 255 255 / 0.8); +} + +.bg-white\/90 { + background-color: rgb(255 255 255 / 0.9); +} + +.bg-yellow-100 { + --tw-bg-opacity: 1; + background-color: rgb(254 249 195 / var(--tw-bg-opacity, 1)); +} + +.bg-yellow-400 { + --tw-bg-opacity: 1; + background-color: rgb(250 204 21 / var(--tw-bg-opacity, 1)); +} + +.bg-yellow-50 { + --tw-bg-opacity: 1; + background-color: rgb(254 252 232 / var(--tw-bg-opacity, 1)); +} + +.bg-yellow-500 { + --tw-bg-opacity: 1; + background-color: rgb(234 179 8 / var(--tw-bg-opacity, 1)); +} + +.bg-yellow-500\/70 { + background-color: rgb(234 179 8 / 0.7); +} + +.bg-opacity-50 { + --tw-bg-opacity: 0.5; +} + +.bg-opacity-75 { + --tw-bg-opacity: 0.75; +} + +.bg-opacity-90 { + --tw-bg-opacity: 0.9; +} + +.bg-opacity-95 { + --tw-bg-opacity: 0.95; +} + +.bg-gradient-to-br { + background-image: linear-gradient(to bottom right, var(--tw-gradient-stops)); +} + +.bg-gradient-to-r { + background-image: linear-gradient(to right, var(--tw-gradient-stops)); +} + +.from-amber-300 { + --tw-gradient-from: #fcd34d var(--tw-gradient-from-position); + --tw-gradient-to: rgb(252 211 77 / 0) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); +} + +.from-blue-400 { + --tw-gradient-from: #60a5fa var(--tw-gradient-from-position); + --tw-gradient-to: rgb(96 165 250 / 0) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); +} + +.from-blue-50 { + --tw-gradient-from: #eff6ff var(--tw-gradient-from-position); + --tw-gradient-to: rgb(239 246 255 / 0) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); +} + +.from-blue-500 { + --tw-gradient-from: #3b82f6 var(--tw-gradient-from-position); + --tw-gradient-to: rgb(59 130 246 / 0) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); +} + +.from-blue-500\/10 { + --tw-gradient-from: rgb(59 130 246 / 0.1) var(--tw-gradient-from-position); + --tw-gradient-to: rgb(59 130 246 / 0) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); +} + +.from-emerald-400 { + --tw-gradient-from: #34d399 var(--tw-gradient-from-position); + --tw-gradient-to: rgb(52 211 153 / 0) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); +} + +.from-gray-50 { + --tw-gradient-from: #f9fafb var(--tw-gradient-from-position); + --tw-gradient-to: rgb(249 250 251 / 0) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); +} + +.from-green-400 { + --tw-gradient-from: #4ade80 var(--tw-gradient-from-position); + --tw-gradient-to: rgb(74 222 128 / 0) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); +} + +.from-green-50 { + --tw-gradient-from: #f0fdf4 var(--tw-gradient-from-position); + --tw-gradient-to: rgb(240 253 244 / 0) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); +} + +.from-green-50\/90 { + --tw-gradient-from: rgb(240 253 244 / 0.9) var(--tw-gradient-from-position); + --tw-gradient-to: rgb(240 253 244 / 0) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); +} + +.from-green-500 { + --tw-gradient-from: #22c55e var(--tw-gradient-from-position); + --tw-gradient-to: rgb(34 197 94 / 0) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); +} + +.from-green-500\/10 { + --tw-gradient-from: rgb(34 197 94 / 0.1) var(--tw-gradient-from-position); + --tw-gradient-to: rgb(34 197 94 / 0) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); +} + +.from-orange-50 { + --tw-gradient-from: #fff7ed var(--tw-gradient-from-position); + --tw-gradient-to: rgb(255 247 237 / 0) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); +} + +.from-orange-500 { + --tw-gradient-from: #f97316 var(--tw-gradient-from-position); + --tw-gradient-to: rgb(249 115 22 / 0) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); +} + +.from-orange-500\/10 { + --tw-gradient-from: rgb(249 115 22 / 0.1) var(--tw-gradient-from-position); + --tw-gradient-to: rgb(249 115 22 / 0) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); +} + +.from-purple-400 { + --tw-gradient-from: #c084fc var(--tw-gradient-from-position); + --tw-gradient-to: rgb(192 132 252 / 0) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); +} + +.from-purple-50 { + --tw-gradient-from: #faf5ff var(--tw-gradient-from-position); + --tw-gradient-to: rgb(250 245 255 / 0) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); +} + +.from-purple-500 { + --tw-gradient-from: #a855f7 var(--tw-gradient-from-position); + --tw-gradient-to: rgb(168 85 247 / 0) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); +} + +.from-purple-500\/10 { + --tw-gradient-from: rgb(168 85 247 / 0.1) var(--tw-gradient-from-position); + --tw-gradient-to: rgb(168 85 247 / 0) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); +} + +.from-red-400 { + --tw-gradient-from: #f87171 var(--tw-gradient-from-position); + --tw-gradient-to: rgb(248 113 113 / 0) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); +} + +.from-red-500 { + --tw-gradient-from: #ef4444 var(--tw-gradient-from-position); + --tw-gradient-to: rgb(239 68 68 / 0) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); +} + +.from-slate-100 { + --tw-gradient-from: #f1f5f9 var(--tw-gradient-from-position); + --tw-gradient-to: rgb(241 245 249 / 0) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); +} + +.from-slate-50 { + --tw-gradient-from: #f8fafc var(--tw-gradient-from-position); + --tw-gradient-to: rgb(248 250 252 / 0) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); +} + +.from-slate-500 { + --tw-gradient-from: #64748b var(--tw-gradient-from-position); + --tw-gradient-to: rgb(100 116 139 / 0) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); +} + +.from-slate-900 { + --tw-gradient-from: #0f172a var(--tw-gradient-from-position); + --tw-gradient-to: rgb(15 23 42 / 0) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); +} + +.from-transparent { + --tw-gradient-from: transparent var(--tw-gradient-from-position); + --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); +} + +.from-white { + --tw-gradient-from: #fff var(--tw-gradient-from-position); + --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); +} + +.from-white\/90 { + --tw-gradient-from: rgb(255 255 255 / 0.9) var(--tw-gradient-from-position); + --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); +} + +.via-blue-50 { + --tw-gradient-to: rgb(239 246 255 / 0) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-from), #eff6ff var(--tw-gradient-via-position), var(--tw-gradient-to); +} + +.via-blue-900 { + --tw-gradient-to: rgb(30 58 138 / 0) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-from), #1e3a8a var(--tw-gradient-via-position), var(--tw-gradient-to); +} + +.via-gray-600 { + --tw-gradient-to: rgb(75 85 99 / 0) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-from), #4b5563 var(--tw-gradient-via-position), var(--tw-gradient-to); +} + +.via-red-50 { + --tw-gradient-to: rgb(254 242 242 / 0) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-from), #fef2f2 var(--tw-gradient-via-position), var(--tw-gradient-to); +} + +.via-white\/5 { + --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-from), rgb(255 255 255 / 0.05) var(--tw-gradient-via-position), var(--tw-gradient-to); +} + +.to-blue-200 { + --tw-gradient-to: #bfdbfe var(--tw-gradient-to-position); +} + +.to-blue-600 { + --tw-gradient-to: #2563eb var(--tw-gradient-to-position); +} + +.to-cyan-50 { + --tw-gradient-to: #ecfeff var(--tw-gradient-to-position); +} + +.to-cyan-500 { + --tw-gradient-to: #06b6d4 var(--tw-gradient-to-position); +} + +.to-emerald-50 { + --tw-gradient-to: #ecfdf5 var(--tw-gradient-to-position); +} + +.to-emerald-50\/80 { + --tw-gradient-to: rgb(236 253 245 / 0.8) var(--tw-gradient-to-position); +} + +.to-emerald-500 { + --tw-gradient-to: #10b981 var(--tw-gradient-to-position); +} + +.to-emerald-500\/10 { + --tw-gradient-to: rgb(16 185 129 / 0.1) var(--tw-gradient-to-position); +} + +.to-emerald-600 { + --tw-gradient-to: #059669 var(--tw-gradient-to-position); +} + +.to-gray-100 { + --tw-gradient-to: #f3f4f6 var(--tw-gradient-to-position); +} + +.to-green-600 { + --tw-gradient-to: #16a34a var(--tw-gradient-to-position); +} + +.to-indigo-100 { + --tw-gradient-to: #e0e7ff var(--tw-gradient-to-position); +} + +.to-indigo-50 { + --tw-gradient-to: #eef2ff var(--tw-gradient-to-position); +} + +.to-indigo-500\/10 { + --tw-gradient-to: rgb(99 102 241 / 0.1) var(--tw-gradient-to-position); +} + +.to-indigo-600 { + --tw-gradient-to: #4f46e5 var(--tw-gradient-to-position); +} + +.to-indigo-900 { + --tw-gradient-to: #312e81 var(--tw-gradient-to-position); +} + +.to-orange-400 { + --tw-gradient-to: #fb923c var(--tw-gradient-to-position); +} + +.to-orange-50 { + --tw-gradient-to: #fff7ed var(--tw-gradient-to-position); +} + +.to-orange-600 { + --tw-gradient-to: #ea580c var(--tw-gradient-to-position); +} + +.to-pink-50 { + --tw-gradient-to: #fdf2f8 var(--tw-gradient-to-position); +} + +.to-purple-500 { + --tw-gradient-to: #a855f7 var(--tw-gradient-to-position); +} + +.to-purple-600 { + --tw-gradient-to: #9333ea var(--tw-gradient-to-position); +} + +.to-red-50 { + --tw-gradient-to: #fef2f2 var(--tw-gradient-to-position); +} + +.to-red-500 { + --tw-gradient-to: #ef4444 var(--tw-gradient-to-position); +} + +.to-red-500\/10 { + --tw-gradient-to: rgb(239 68 68 / 0.1) var(--tw-gradient-to-position); +} + +.to-red-600 { + --tw-gradient-to: #dc2626 var(--tw-gradient-to-position); +} + +.to-slate-600 { + --tw-gradient-to: #475569 var(--tw-gradient-to-position); +} + +.to-transparent { + --tw-gradient-to: transparent var(--tw-gradient-to-position); +} + +.to-violet-500\/10 { + --tw-gradient-to: rgb(139 92 246 / 0.1) var(--tw-gradient-to-position); +} + +.to-white\/70 { + --tw-gradient-to: rgb(255 255 255 / 0.7) var(--tw-gradient-to-position); +} + +.bg-clip-text { + -webkit-background-clip: text; + background-clip: text; +} + +.p-1 { + padding: 0.25rem; +} + +.p-1\.5 { + padding: 0.375rem; +} + +.p-12 { + padding: 3rem; +} + +.p-2 { + padding: 0.5rem; +} + +.p-2\.5 { + padding: 0.625rem; +} + +.p-3 { + padding: 0.75rem; +} + +.p-4 { + padding: 1rem; +} + +.p-5 { + padding: 1.25rem; +} + +.p-6 { + padding: 1.5rem; +} + +.p-8 { + padding: 2rem; +} + +.px-2 { + padding-left: 0.5rem; + padding-right: 0.5rem; +} + +.px-2\.5 { + padding-left: 0.625rem; + padding-right: 0.625rem; +} + +.px-3 { + padding-left: 0.75rem; + padding-right: 0.75rem; +} + +.px-3\.5 { + padding-left: 0.875rem; + padding-right: 0.875rem; +} + +.px-4 { + padding-left: 1rem; + padding-right: 1rem; +} + +.px-5 { + padding-left: 1.25rem; + padding-right: 1.25rem; +} + +.px-6 { + padding-left: 1.5rem; + padding-right: 1.5rem; +} + +.px-8 { + padding-left: 2rem; + padding-right: 2rem; +} + +.py-0\.5 { + padding-top: 0.125rem; + padding-bottom: 0.125rem; +} + +.py-1 { + padding-top: 0.25rem; + padding-bottom: 0.25rem; +} + +.py-12 { + padding-top: 3rem; + padding-bottom: 3rem; +} + +.py-16 { + padding-top: 4rem; + padding-bottom: 4rem; +} + +.py-2 { + padding-top: 0.5rem; + padding-bottom: 0.5rem; +} + +.py-2\.5 { + padding-top: 0.625rem; + padding-bottom: 0.625rem; +} + +.py-3 { + padding-top: 0.75rem; + padding-bottom: 0.75rem; +} + +.py-4 { + padding-top: 1rem; + padding-bottom: 1rem; +} + +.py-6 { + padding-top: 1.5rem; + padding-bottom: 1.5rem; +} + +.py-8 { + padding-top: 2rem; + padding-bottom: 2rem; +} + +.pb-16 { + padding-bottom: 4rem; +} + +.pb-6 { + padding-bottom: 1.5rem; +} + +.pl-10 { + padding-left: 2.5rem; +} + +.pl-3 { + padding-left: 0.75rem; +} + +.pl-4 { + padding-left: 1rem; +} + +.pr-12 { + padding-right: 3rem; +} + +.pr-24 { + padding-right: 6rem; +} + +.pr-3 { + padding-right: 0.75rem; +} + +.pr-4 { + padding-right: 1rem; +} + +.pr-6 { + padding-right: 1.5rem; +} + +.pt-3 { + padding-top: 0.75rem; +} + +.pt-4 { + padding-top: 1rem; +} + +.pt-5 { + padding-top: 1.25rem; +} + +.pt-6 { + padding-top: 1.5rem; +} + +.pt-8 { + padding-top: 2rem; +} + +.text-left { + text-align: left; +} + +.text-center { + text-align: center; +} + +.text-right { + text-align: right; +} + +.align-middle { + vertical-align: middle; +} + +.font-mono { + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; +} + +.text-2xl { + font-size: 1.5rem; + line-height: 2rem; +} + +.text-3xl { + font-size: 1.875rem; + line-height: 2.25rem; +} + +.text-4xl { + font-size: 2.25rem; + line-height: 2.5rem; +} + +.text-5xl { + font-size: 3rem; + line-height: 1; +} + +.text-6xl { + font-size: 3.75rem; + line-height: 1; +} + +.text-base { + font-size: 1rem; + line-height: 1.5rem; +} + +.text-lg { + font-size: 1.125rem; + line-height: 1.75rem; +} + +.text-sm { + font-size: 0.875rem; + line-height: 1.25rem; +} + +.text-xl { + font-size: 1.25rem; + line-height: 1.75rem; +} + +.text-xs { + font-size: 0.75rem; + line-height: 1rem; +} + +.font-bold { + font-weight: 700; +} + +.font-medium { + font-weight: 500; +} + +.font-normal { + font-weight: 400; +} + +.font-semibold { + font-weight: 600; +} + +.uppercase { + text-transform: uppercase; +} + +.lowercase { + text-transform: lowercase; +} + +.capitalize { + text-transform: capitalize; +} + +.italic { + font-style: italic; +} + +.leading-5 { + line-height: 1.25rem; +} + +.leading-relaxed { + line-height: 1.625; +} + +.tracking-tight { + letter-spacing: -0.025em; +} + +.tracking-wide { + letter-spacing: 0.025em; +} + +.tracking-wider { + letter-spacing: 0.05em; +} + +.tracking-widest { + letter-spacing: 0.1em; +} + +.text-accent-primary { + --tw-text-opacity: 1; + color: rgb(59 130 246 / var(--tw-text-opacity, 1)); +} + +.text-amber-500 { + --tw-text-opacity: 1; + color: rgb(245 158 11 / var(--tw-text-opacity, 1)); +} + +.text-amber-600 { + --tw-text-opacity: 1; + color: rgb(217 119 6 / var(--tw-text-opacity, 1)); +} + +.text-black { + --tw-text-opacity: 1; + color: rgb(0 0 0 / var(--tw-text-opacity, 1)); +} + +.text-blue-100 { + --tw-text-opacity: 1; + color: rgb(219 234 254 / var(--tw-text-opacity, 1)); +} + +.text-blue-200 { + --tw-text-opacity: 1; + color: rgb(191 219 254 / var(--tw-text-opacity, 1)); +} + +.text-blue-400 { + --tw-text-opacity: 1; + color: rgb(96 165 250 / var(--tw-text-opacity, 1)); +} + +.text-blue-500 { + --tw-text-opacity: 1; + color: rgb(59 130 246 / var(--tw-text-opacity, 1)); +} + +.text-blue-600 { + --tw-text-opacity: 1; + color: rgb(37 99 235 / var(--tw-text-opacity, 1)); +} + +.text-blue-700 { + --tw-text-opacity: 1; + color: rgb(29 78 216 / var(--tw-text-opacity, 1)); +} + +.text-blue-800 { + --tw-text-opacity: 1; + color: rgb(30 64 175 / var(--tw-text-opacity, 1)); +} + +.text-current { + color: currentColor; +} + +.text-gray-300 { + --tw-text-opacity: 1; + color: rgb(209 213 219 / var(--tw-text-opacity, 1)); +} + +.text-gray-400 { + --tw-text-opacity: 1; + color: rgb(156 163 175 / var(--tw-text-opacity, 1)); +} + +.text-gray-500 { + --tw-text-opacity: 1; + color: rgb(107 114 128 / var(--tw-text-opacity, 1)); +} + +.text-gray-600 { + --tw-text-opacity: 1; + color: rgb(75 85 99 / var(--tw-text-opacity, 1)); +} + +.text-gray-700 { + --tw-text-opacity: 1; + color: rgb(55 65 81 / var(--tw-text-opacity, 1)); +} + +.text-gray-800 { + --tw-text-opacity: 1; + color: rgb(31 41 55 / var(--tw-text-opacity, 1)); +} + +.text-gray-900 { + --tw-text-opacity: 1; + color: rgb(17 24 39 / var(--tw-text-opacity, 1)); +} + +.text-green-400 { + --tw-text-opacity: 1; + color: rgb(74 222 128 / var(--tw-text-opacity, 1)); +} + +.text-green-500 { + --tw-text-opacity: 1; + color: rgb(34 197 94 / var(--tw-text-opacity, 1)); +} + +.text-green-600 { + --tw-text-opacity: 1; + color: rgb(22 163 74 / var(--tw-text-opacity, 1)); +} + +.text-green-700 { + --tw-text-opacity: 1; + color: rgb(21 128 61 / var(--tw-text-opacity, 1)); +} + +.text-green-800 { + --tw-text-opacity: 1; + color: rgb(22 101 52 / var(--tw-text-opacity, 1)); +} + +.text-light-text { + --tw-text-opacity: 1; + color: rgb(26 32 44 / var(--tw-text-opacity, 1)); +} + +.text-light-text-muted { + --tw-text-opacity: 1; + color: rgb(74 85 104 / var(--tw-text-opacity, 1)); +} + +.text-mercedes-black { + --tw-text-opacity: 1; + color: rgb(0 0 0 / var(--tw-text-opacity, 1)); +} + +.text-mercedes-silver { + --tw-text-opacity: 1; + color: rgb(192 192 192 / var(--tw-text-opacity, 1)); +} + +.text-orange-600 { + --tw-text-opacity: 1; + color: rgb(234 88 12 / var(--tw-text-opacity, 1)); +} + +.text-orange-800 { + --tw-text-opacity: 1; + color: rgb(154 52 18 / var(--tw-text-opacity, 1)); +} + +.text-purple-600 { + --tw-text-opacity: 1; + color: rgb(147 51 234 / var(--tw-text-opacity, 1)); +} + +.text-purple-800 { + --tw-text-opacity: 1; + color: rgb(107 33 168 / var(--tw-text-opacity, 1)); +} + +.text-red-200 { + --tw-text-opacity: 1; + color: rgb(254 202 202 / var(--tw-text-opacity, 1)); +} + +.text-red-400 { + --tw-text-opacity: 1; + color: rgb(248 113 113 / var(--tw-text-opacity, 1)); +} + +.text-red-500 { + --tw-text-opacity: 1; + color: rgb(239 68 68 / var(--tw-text-opacity, 1)); +} + +.text-red-600 { + --tw-text-opacity: 1; + color: rgb(220 38 38 / var(--tw-text-opacity, 1)); +} + +.text-red-700 { + --tw-text-opacity: 1; + color: rgb(185 28 28 / var(--tw-text-opacity, 1)); +} + +.text-red-800 { + --tw-text-opacity: 1; + color: rgb(153 27 27 / var(--tw-text-opacity, 1)); +} + +.text-slate-300 { + --tw-text-opacity: 1; + color: rgb(203 213 225 / var(--tw-text-opacity, 1)); +} + +.text-slate-400 { + --tw-text-opacity: 1; + color: rgb(148 163 184 / var(--tw-text-opacity, 1)); +} + +.text-slate-500 { + --tw-text-opacity: 1; + color: rgb(100 116 139 / var(--tw-text-opacity, 1)); +} + +.text-slate-600 { + --tw-text-opacity: 1; + color: rgb(71 85 105 / var(--tw-text-opacity, 1)); +} + +.text-slate-700 { + --tw-text-opacity: 1; + color: rgb(51 65 85 / var(--tw-text-opacity, 1)); +} + +.text-slate-800 { + --tw-text-opacity: 1; + color: rgb(30 41 59 / var(--tw-text-opacity, 1)); +} + +.text-slate-900 { + --tw-text-opacity: 1; + color: rgb(15 23 42 / var(--tw-text-opacity, 1)); +} + +.text-transparent { + color: transparent; +} + +.text-white { + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity, 1)); +} + +.text-yellow-400 { + --tw-text-opacity: 1; + color: rgb(250 204 21 / var(--tw-text-opacity, 1)); +} + +.text-yellow-500 { + --tw-text-opacity: 1; + color: rgb(234 179 8 / var(--tw-text-opacity, 1)); +} + +.text-yellow-600 { + --tw-text-opacity: 1; + color: rgb(202 138 4 / var(--tw-text-opacity, 1)); +} + +.text-yellow-700 { + --tw-text-opacity: 1; + color: rgb(161 98 7 / var(--tw-text-opacity, 1)); +} + +.text-yellow-800 { + --tw-text-opacity: 1; + color: rgb(133 77 14 / var(--tw-text-opacity, 1)); +} + +.underline { + text-decoration-line: underline; +} + +.overline { + text-decoration-line: overline; +} + +.placeholder-gray-400::-moz-placeholder { + --tw-placeholder-opacity: 1; + color: rgb(156 163 175 / var(--tw-placeholder-opacity, 1)); +} + +.placeholder-gray-400::placeholder { + --tw-placeholder-opacity: 1; + color: rgb(156 163 175 / var(--tw-placeholder-opacity, 1)); +} + +.placeholder-gray-500::-moz-placeholder { + --tw-placeholder-opacity: 1; + color: rgb(107 114 128 / var(--tw-placeholder-opacity, 1)); +} + +.placeholder-gray-500::placeholder { + --tw-placeholder-opacity: 1; + color: rgb(107 114 128 / var(--tw-placeholder-opacity, 1)); +} + +.opacity-0 { + opacity: 0; +} + +.opacity-10 { + opacity: 0.1; +} + +.opacity-100 { + opacity: 1; +} + +.opacity-15 { + opacity: 0.15; +} + +.opacity-25 { + opacity: 0.25; +} + +.opacity-5 { + opacity: 0.05; +} + +.opacity-75 { + opacity: 0.75; +} + +.shadow { + --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.shadow-2xl { + --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); + --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.shadow-lg { + --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.shadow-md { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.shadow-sm { + --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); + --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.shadow-xl { + --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.outline-none { + outline: 2px solid transparent; + outline-offset: 2px; +} + +.ring-1 { + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); +} + +.ring-2 { + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); +} + +.ring-black { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(0 0 0 / var(--tw-ring-opacity, 1)); +} + +.ring-blue-500 { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1)); +} + +.ring-white { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity, 1)); +} + +.ring-opacity-5 { + --tw-ring-opacity: 0.05; +} + +.ring-offset-2 { + --tw-ring-offset-width: 2px; +} + +.blur { + --tw-blur: blur(8px); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +} + +.blur-sm { + --tw-blur: blur(4px); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +} + +.drop-shadow { + --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06)); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +} + +.drop-shadow-sm { + --tw-drop-shadow: drop-shadow(0 1px 1px rgb(0 0 0 / 0.05)); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +} + +.invert { + --tw-invert: invert(100%); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +} + +.filter { + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +} + +.backdrop-blur-2xl { + --tw-backdrop-blur: blur(40px); + -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); + backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); +} + +.backdrop-blur-lg { + --tw-backdrop-blur: blur(16px); + -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); + backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); +} + +.backdrop-blur-md { + --tw-backdrop-blur: blur(12px); + -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); + backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); +} + +.backdrop-blur-sm { + --tw-backdrop-blur: blur(4px); + -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); + backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); +} + +.backdrop-blur-xl { + --tw-backdrop-blur: blur(24px); + -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); + backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); +} + +.backdrop-filter { + -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); + backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); +} + +.transition { + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} + +.transition-all { + transition-property: all; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} + +.transition-colors { + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} + +.transition-opacity { + transition-property: opacity; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} + +.transition-transform { + transition-property: transform; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} + +.duration-1000 { + transition-duration: 1000ms; +} + +.duration-200 { + transition-duration: 200ms; +} + +.duration-300 { + transition-duration: 300ms; +} + +.duration-500 { + transition-duration: 500ms; +} + +.ease-in { + transition-timing-function: cubic-bezier(0.4, 0, 1, 1); +} + +.ease-in-out { + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); +} + +.ease-out { + transition-timing-function: cubic-bezier(0, 0, 0.2, 1); +} + +/* Custom Styles für Light und Dark Mode */ + +/* Admin Panel spezifische Styles */ + +/* Glassmorphism Flash Messages */ + +.flash-message { + position: fixed; + top: 1rem; + right: 1rem; + z-index: 50; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + border-radius: 0.75rem; + border-width: 1px; + border-color: rgb(255 255 255 / 0.2); + padding-left: 1.5rem; + padding-right: 1.5rem; + padding-top: 1rem; + padding-bottom: 1rem; + font-size: 0.875rem; + line-height: 1.25rem; + font-weight: 500; + --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); + --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + --tw-backdrop-blur: blur(24px); + -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); + backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); + transition-property: all; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 300ms; + backdrop-filter: blur(20px) saturate(180%) brightness(120%); + -webkit-backdrop-filter: blur(20px) saturate(180%) brightness(120%); + box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.1); + animation: slide-down 0.3s ease-out; +} + +.flash-message.info { + background-color: rgb(59 130 246 / 0.7); + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity, 1)); +} + +.flash-message.info:is(.dark *) { + background-color: rgb(37 99 235 / 0.7); +} + +.flash-message.success { + background-color: rgb(34 197 94 / 0.7); + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity, 1)); +} + +.flash-message.success:is(.dark *) { + background-color: rgb(22 163 74 / 0.7); +} + +.flash-message.warning { + background-color: rgb(234 179 8 / 0.7); + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity, 1)); +} + +.flash-message.warning:is(.dark *) { + background-color: rgb(202 138 4 / 0.7); +} + +.flash-message.error { + background-color: rgb(239 68 68 / 0.7); + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity, 1)); +} + +.flash-message.error:is(.dark *) { + background-color: rgb(220 38 38 / 0.7); +} + +@keyframes slide-down { + 0% { + opacity: 0; + transform: translateY(-20px); + } + + 100% { + opacity: 1; + transform: translateY(0); + } +} + +/* Mercedes Background Pattern */ + +.mercedes-background::before { + content: ''; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: -1; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' width='80' height='80' opacity='0.03' fill='currentColor'%3E%3Cpath d='M58.6,4.5C53,1.6,46.7,0,40,0c-6.7,0-13,1.6-18.6,4.5v0C8.7,11.2,0,24.6,0,40c0,15.4,8.7,28.8,21.5,35.5C27,78.3,33.3,80,40,80c6.7,0,12.9-1.7,18.5-4.6C71.3,68.8,80,55.4,80,40C80,24.6,71.3,11.2,58.6,4.5z M4,40c0-13.1,7-24.5,17.5-30.9v0C26.6,6,32.5,4.2,39,4l-4.5,32.7L21.5,46.8v0L8.3,57.1C5.6,52,4,46.2,4,40z M58.6,70.8C53.1,74.1,46.8,76,40,76c-6.8,0-13.2-1.9-18.6-5.2c-4.9-2.9-8.9-6.9-11.9-11.7l11.9-4.9v0L40,46.6l18.6,7.5v0l12,4.9C67.6,63.9,63.4,67.9,58.6,70.8z M58.6,46.8L58.6,46.8l-12.9-10L41.1,4c6.3,0.2,12.3,2,17.4,5.1v0C69,15.4,76,26.9,76,40c0,6.2-1.5,12-4.3,17.1L58.6,46.8z'/%3E%3C/svg%3E"); + background-position: center; + background-repeat: repeat; + background-size: 120px 120px; + pointer-events: none; + opacity: 0.03; + transition: opacity 0.3s ease; +} + +.dark .mercedes-background::before { + opacity: 0.015; + /* Sehr subtil für eleganten Dark Mode */ + filter: invert(1) brightness(0.3); + background-size: 150px 150px; + /* Größere Sterne für bessere Sichtbarkeit */ +} + +/* Monochrome Button Styles */ + +/* Navbar Sticky Fix - Außerhalb von @layer für höhere Priorität */ + +.navbar { + position: sticky !important; + top: 0 !important; + z-index: 50 !important; + width: 100% !important; + left: 0 !important; + right: 0 !important; + background-color: rgb(255 255 255 / 0.6); +} + +.navbar:is(.dark *) { + background-color: rgb(0 0 0 / 0.7); +} + +.navbar { + backdrop-filter: blur(24px) saturate(200%); + -webkit-backdrop-filter: blur(24px) saturate(200%); + box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.08); + border-bottom: 1px solid rgba(255, 255, 255, 0.15); +} + +.dark .navbar { + box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2); + border-bottom: 1px solid rgba(255, 255, 255, 0.05); +} + +/* Neue Navbar-Komponenten */ + +.navbar-menu-new { + display: flex; + align-items: center; + justify-content: center; +} + +.navbar-menu-new > :not([hidden]) ~ :not([hidden]) { + --tw-space-x-reverse: 0; + margin-right: calc(0.75rem * var(--tw-space-x-reverse)); + margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse))); +} + +@media (min-width: 768px) { + .navbar-menu-new > :not([hidden]) ~ :not([hidden]) { + --tw-space-x-reverse: 0; + margin-right: calc(0.5rem * var(--tw-space-x-reverse)); + margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse))); + } +} + +@media (min-width: 1024px) { + .navbar-menu-new > :not([hidden]) ~ :not([hidden]) { + --tw-space-x-reverse: 0; + margin-right: calc(0.25rem * var(--tw-space-x-reverse)); + margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse))); + } +} + +@media (min-width: 1280px) { + .navbar-menu-new > :not([hidden]) ~ :not([hidden]) { + --tw-space-x-reverse: 0; + margin-right: calc(0.5rem * var(--tw-space-x-reverse)); + margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse))); + } +} + +.navbar-menu-new { + max-width: 100%; + overflow-x: auto; + scrollbar-width: none; + -ms-overflow-style: none; +} + +.navbar-menu-new::-webkit-scrollbar { + display: none; +} + +.nav-item { + display: flex; + align-items: center; +} + +.nav-item > :not([hidden]) ~ :not([hidden]) { + --tw-space-x-reverse: 0; + margin-right: calc(0.5rem * var(--tw-space-x-reverse)); + margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse))); +} + +.nav-item { + border-radius: 0.5rem; + padding-left: 0.75rem; + padding-right: 0.75rem; + padding-top: 0.5rem; + padding-bottom: 0.5rem; + font-size: 0.875rem; + line-height: 1.25rem; + font-weight: 500; + transition-property: all; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 300ms; + color: rgba(15, 23, 42, 0.8); + background: rgba(255, 255, 255, 0.04); + border: 1px solid rgba(255, 255, 255, 0.1); +} + +.dark .nav-item { + color: rgba(255, 255, 255, 0.8); + background: rgba(0, 0, 0, 0.2); + border: 1px solid rgba(255, 255, 255, 0.05); +} + +.nav-item:hover { + --tw-translate-y: -0.125rem; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + color: rgba(15, 23, 42, 1); + background: rgba(255, 255, 255, 0.15); + border: 1px solid rgba(255, 255, 255, 0.2); + box-shadow: + 0 10px 20px rgba(0, 0, 0, 0.05), + 0 2px 6px rgba(0, 0, 0, 0.04), + 0 0 1px rgba(0, 0, 0, 0.1); +} + +.dark .nav-item:hover { + color: rgba(255, 255, 255, 1); + background: rgba(255, 255, 255, 0.05); + border: 1px solid rgba(255, 255, 255, 0.1); + box-shadow: + 0 10px 20px rgba(0, 0, 0, 0.2), + 0 2px 6px rgba(0, 0, 0, 0.15), + 0 0 1px rgba(255, 255, 255, 0.05); +} + +.nav-item.active { + color: rgba(15, 23, 42, 1); + background: rgba(255, 255, 255, 0.9); + border: 1px solid rgba(255, 255, 255, 0.25); + box-shadow: + 0 10px 25px rgba(0, 0, 0, 0.08), + 0 3px 8px rgba(0, 0, 0, 0.06), + 0 1px 2px rgba(0, 0, 0, 0.04); + font-weight: 600; +} + +.dark .nav-item.active { + color: rgba(255, 255, 255, 1); + background: rgba(0, 0, 0, 0.7); + border: 1px solid rgba(255, 255, 255, 0.15); + box-shadow: + 0 10px 25px rgba(0, 0, 0, 0.3), + 0 3px 8px rgba(0, 0, 0, 0.2), + 0 0 0 1px rgba(255, 255, 255, 0.06); +} + +/* Dark Mode Toggle - Neues Design */ + +.dark-mode-toggle-new { + position: relative; + display: flex; + cursor: pointer; + align-items: center; + justify-content: center; + border-radius: 9999px; + padding: 0.625rem; + transition-property: all; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 300ms; + background: rgba(241, 245, 249, 0.8); + border: 1px solid rgba(255, 255, 255, 0.7); + box-shadow: + 0 2px 10px rgba(0, 0, 0, 0.05), + 0 1px 2px rgba(0, 0, 0, 0.04); + color: #334155; + z-index: 100; + /* Stellt sicher, dass der Button über anderen Elementen liegt */ +} + +.dark-mode-toggle-new:hover { + --tw-translate-y: -0.125rem; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + background: rgba(241, 245, 249, 0.9); + box-shadow: + 0 10px 20px rgba(0, 0, 0, 0.08), + 0 2px 6px rgba(0, 0, 0, 0.06); +} + +.dark-mode-toggle-new:active { + --tw-scale-x: .95; + --tw-scale-y: .95; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + transition: transform 0.1s; +} + +.dark .dark-mode-toggle-new { + background: rgba(30, 41, 59, 0.8); + border: 1px solid rgba(255, 255, 255, 0.1); + box-shadow: + 0 2px 10px rgba(0, 0, 0, 0.2), + 0 1px 2px rgba(0, 0, 0, 0.1); + color: #e2e8f0; +} + +.dark .dark-mode-toggle-new:hover { + background: rgba(30, 41, 59, 0.9); + box-shadow: + 0 10px 20px rgba(0, 0, 0, 0.2), + 0 2px 6px rgba(0, 0, 0, 0.15); +} + +/* Icon-Animation */ + +.dark-mode-toggle-new .sun-icon, +.dark-mode-toggle-new .moon-icon { + position: absolute; + top: 50%; + left: 50%; + --tw-translate-x: -50%; + --tw-translate-y: -50%; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + transition-property: all; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 300ms; +} + +.dark-mode-toggle-new .sun-icon:not(.hidden) { + animation: spin-in 0.5s cubic-bezier(0.25, 1, 0.5, 1) forwards; +} + +.dark-mode-toggle-new .moon-icon:not(.hidden) { + animation: spin-in 0.5s cubic-bezier(0.25, 1, 0.5, 1) forwards; +} + +@keyframes spin-in { + 0% { + opacity: 0; + transform: translateY(10px) scale(0.7) rotate(20deg); + } + + 100% { + opacity: 1; + transform: translateY(0) scale(1) rotate(0); + } +} + +.dark .sun-icon { + display: none; +} + +.dark .moon-icon { + display: block; +} + +.sun-icon { + display: block; +} + +.moon-icon { + display: none; +} + +/* User Menu Button - Neues Design */ + +.user-menu-button-new { + display: flex; + align-items: center; +} + +.user-menu-button-new > :not([hidden]) ~ :not([hidden]) { + --tw-space-x-reverse: 0; + margin-right: calc(0.5rem * var(--tw-space-x-reverse)); + margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse))); +} + +.user-menu-button-new { + border-radius: 0.5rem; + padding: 0.375rem; + transition-property: all; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 300ms; + background: rgba(241, 245, 249, 0.6); + border: 1px solid rgba(255, 255, 255, 0.6); + box-shadow: + 0 2px 10px rgba(0, 0, 0, 0.04), + 0 1px 2px rgba(0, 0, 0, 0.02); +} + +.user-menu-button-new:hover { + --tw-translate-y: -0.125rem; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + background: rgba(241, 245, 249, 0.8); + box-shadow: + 0 10px 20px rgba(0, 0, 0, 0.06), + 0 2px 6px rgba(0, 0, 0, 0.04); +} + +.dark .user-menu-button-new { + background: rgba(30, 41, 59, 0.6); + border: 1px solid rgba(255, 255, 255, 0.08); + box-shadow: + 0 2px 10px rgba(0, 0, 0, 0.15), + 0 1px 2px rgba(0, 0, 0, 0.1); +} + +.dark .user-menu-button-new:hover { + background: rgba(30, 41, 59, 0.8); + box-shadow: + 0 10px 20px rgba(0, 0, 0, 0.15), + 0 2px 6px rgba(0, 0, 0, 0.1); +} + +/* User Avatar - Neues Design */ + +.user-avatar-new { + display: flex; + height: 2rem; + width: 2rem; + align-items: center; + justify-content: center; + border-radius: 9999px; + font-size: 0.875rem; + line-height: 1.25rem; + font-weight: 600; + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity, 1)); + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + transition-property: all; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 300ms; + background: linear-gradient(135deg, #000000, #333333); + box-shadow: + 0 2px 6px rgba(0, 0, 0, 0.2), + 0 1px 3px rgba(0, 0, 0, 0.1); +} + +.dark .user-avatar-new { + background: linear-gradient(135deg, #f8fafc, #e2e8f0); + color: #0f172a; + box-shadow: + 0 2px 6px rgba(0, 0, 0, 0.3), + 0 1px 3px rgba(0, 0, 0, 0.2); +} + +/* Login Button - Neues Design */ + +.login-button-new { + display: flex; + align-items: center; + border-radius: 0.5rem; + padding-left: 1rem; + padding-right: 1rem; + padding-top: 0.5rem; + padding-bottom: 0.5rem; + font-size: 0.875rem; + line-height: 1.25rem; + font-weight: 500; + --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); + --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + transition-property: all; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 300ms; + background: #000000; + color: #ffffff; + border: 1px solid rgba(255, 255, 255, 0.1); + box-shadow: + 0 2px 10px rgba(0, 0, 0, 0.1), + 0 1px 2px rgba(0, 0, 0, 0.08); +} + +.login-button-new:hover { + --tw-translate-y: -0.125rem; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + background: #333333; + box-shadow: + 0 10px 20px rgba(0, 0, 0, 0.15), + 0 3px 6px rgba(0, 0, 0, 0.1); +} + +.dark .login-button-new { + background: #ffffff; + color: #000000; + border: 1px solid rgba(0, 0, 0, 0.1); + box-shadow: + 0 2px 10px rgba(0, 0, 0, 0.2), + 0 1px 2px rgba(0, 0, 0, 0.15); +} + +.dark .login-button-new:hover { + background: #f1f5f9; + box-shadow: + 0 10px 20px rgba(0, 0, 0, 0.25), + 0 3px 6px rgba(0, 0, 0, 0.2); +} + +/* Mobile Menu - Neues Design */ + +.mobile-menu-new { + z-index: 40; + width: 100%; + overflow: hidden; + transition-property: all; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 300ms; + background: rgba(255, 255, 255, 0.8); + backdrop-filter: blur(24px); + -webkit-backdrop-filter: blur(24px); + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06); + border-bottom: 1px solid rgba(241, 245, 249, 0.8); + max-height: 0; + opacity: 0; +} + +.mobile-menu-new.open { + max-height: 500px; + opacity: 1; + border-bottom: 1px solid rgba(241, 245, 249, 0.8); +} + +.dark .mobile-menu-new { + background: rgba(15, 23, 42, 0.8); + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); + border-bottom: 1px solid rgba(30, 41, 59, 0.8); +} + +.mobile-nav-item { + display: flex; + align-items: center; +} + +.mobile-nav-item > :not([hidden]) ~ :not([hidden]) { + --tw-space-x-reverse: 0; + margin-right: calc(0.75rem * var(--tw-space-x-reverse)); + margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse))); +} + +.mobile-nav-item { + border-radius: 0.5rem; + padding-left: 1rem; + padding-right: 1rem; + padding-top: 0.75rem; + padding-bottom: 0.75rem; + --tw-text-opacity: 1; + color: rgb(30 41 59 / var(--tw-text-opacity, 1)); + transition-property: all; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 300ms; +} + +.mobile-nav-item:is(.dark *) { + --tw-text-opacity: 1; + color: rgb(226 232 240 / var(--tw-text-opacity, 1)); +} + +.mobile-nav-item:hover { + background: rgba(241, 245, 249, 0.8); +} + +.dark .mobile-nav-item:hover { + background: rgba(30, 41, 59, 0.6); +} + +.mobile-nav-item.active { + background: rgba(241, 245, 249, 0.9); + color: #000000; + font-weight: 500; +} + +.dark .mobile-nav-item.active { + background: rgba(30, 41, 59, 0.8); + color: #ffffff; +} + +/* Dashboard Stat Cards mit schwarzem Hintergrund im Dark Mode */ + +.mb-stat-card { + background: linear-gradient(135deg, rgba(240, 249, 255, 0.6) 0%, rgba(230, 242, 255, 0.6) 100%); + color: #0f172a; + position: relative; + overflow: hidden; + border: none; + border-radius: var(--card-radius); + backdrop-filter: blur(20px) saturate(180%) brightness(110%); + -webkit-backdrop-filter: blur(20px) saturate(180%) brightness(110%); + box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.1); + padding: 1.5rem; + margin: 1rem; + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.dark .mb-stat-card { + background: linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, rgba(10, 10, 10, 0.7) 100%); + color: var(--text-primary, #f8fafc); + box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.05); +} + +/* Stats und Jobs Page Card Styles */ + +.stats-card, .job-card { + border-radius: 0.75rem; + border-width: 1px; + border-color: rgb(229 231 235 / 0.7); + background-color: rgb(255 255 255 / 0.6); + --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); + --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + --tw-backdrop-blur: blur(40px); + -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); + backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); + transition-property: all; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 300ms; +} + +.stats-card:is(.dark *), .job-card:is(.dark *) { + border-color: rgb(51 65 85 / 0.2); + background-color: rgb(0 0 0 / 0.8); +} + +.stats-card, .job-card { + backdrop-filter: blur(24px) saturate(200%) brightness(120%); + -webkit-backdrop-filter: blur(24px) saturate(200%) brightness(120%); + box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.1); + border-radius: var(--card-radius); +} + +/* Footer Styling - Verstärktes Glassmorphism */ + +footer { + transition-property: all; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 300ms; + background: rgba(255, 255, 255, 0.1); + backdrop-filter: blur(30px) saturate(180%) brightness(120%); + -webkit-backdrop-filter: blur(30px) saturate(180%) brightness(120%); + border-top: 1px solid rgba(255, 255, 255, 0.2); + box-shadow: + 0 -8px 32px rgba(0, 0, 0, 0.1), + 0 -2px 8px rgba(0, 0, 0, 0.05), + inset 0 1px 0 rgba(255, 255, 255, 0.2), + 0 0 0 1px rgba(255, 255, 255, 0.05); +} + +.dark footer { + background: rgba(0, 0, 0, 0.3); + backdrop-filter: blur(30px) saturate(160%) brightness(110%); + -webkit-backdrop-filter: blur(30px) saturate(160%) brightness(110%); + border-top: 1px solid rgba(255, 255, 255, 0.1); + box-shadow: + 0 -8px 32px rgba(0, 0, 0, 0.3), + 0 -2px 8px rgba(0, 0, 0, 0.2), + inset 0 1px 0 rgba(255, 255, 255, 0.1), + 0 0 0 1px rgba(255, 255, 255, 0.03); +} + +/* Dropdown Pfeil Animation */ + +.dropdown-arrow { + transition-property: transform; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 300ms; +} + +/* Mercedes-Benz Hintergrund mit Star-Pattern */ + +.mercedes-star-bg { + position: relative; +} + +.mercedes-star-bg::after { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' width='80' height='80' opacity='0.05' fill='currentColor'%3E%3Cpath d='M58.6,4.5C53,1.6,46.7,0,40,0c-6.7,0-13,1.6-18.6,4.5v0C8.7,11.2,0,24.6,0,40c0,15.4,8.7,28.8,21.5,35.5C27,78.3,33.3,80,40,80c6.7,0,12.9-1.7,18.5-4.6C71.3,68.8,80,55.4,80,40C80,24.6,71.3,11.2,58.6,4.5z M4,40c0-13.1,7-24.5,17.5-30.9v0C26.6,6,32.5,4.2,39,4l-4.5,32.7L21.5,46.8v0L8.3,57.1C5.6,52,4,46.2,4,40z M58.6,70.8C53.1,74.1,46.8,76,40,76c-6.8,0-13.2-1.9-18.6-5.2c-4.9-2.9-8.9-6.9-11.9-11.7l11.9-4.9v0L40,46.6l18.6,7.5v0l12,4.9C67.6,63.9,63.4,67.9,58.6,70.8z M58.6,46.8L58.6,46.8l-12.9-10L41.1,4c6.3,0.2,12.3,2,17.4,5.1v0C69,15.4,76,26.9,76,40c0,6.2-1.5,12-4.3,17.1L58.6,46.8z'/%3E%3C/svg%3E"); + background-position: center; + background-repeat: repeat; + background-size: 40px 40px; + z-index: -1; + opacity: 0.05; +} + +.dark .mercedes-star-bg::after { + opacity: 0.02; + filter: invert(1) brightness(0.4); +} + +/* Zusätzliche Glassmorphism-Verbesserungen */ + +.glass-effect { + backdrop-filter: blur(20px) saturate(180%) brightness(110%); + -webkit-backdrop-filter: blur(20px) saturate(180%) brightness(110%); + background: rgba(255, 255, 255, 0.1); + border: 1px solid rgba(255, 255, 255, 0.2); + box-shadow: + 0 8px 32px rgba(0, 0, 0, 0.1), + inset 0 1px 0 rgba(255, 255, 255, 0.3); +} + +.dark .glass-effect { + background: rgba(0, 0, 0, 0.3); + border: 1px solid rgba(255, 255, 255, 0.1); + box-shadow: + 0 8px 32px rgba(0, 0, 0, 0.3), + inset 0 1px 0 rgba(255, 255, 255, 0.15); +} + +/* Verbesserte Hover-Effekte für alle interaktiven Elemente */ + +.glass-hover { + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); +} + +.glass-hover:hover { + transform: translateY(-2px); + backdrop-filter: blur(25px) saturate(200%) brightness(120%); + -webkit-backdrop-filter: blur(25px) saturate(200%) brightness(120%); + box-shadow: + 0 20px 40px rgba(0, 0, 0, 0.15), + 0 8px 16px rgba(0, 0, 0, 0.1), + inset 0 1px 0 rgba(255, 255, 255, 0.4); +} + +.dark .glass-hover:hover { + box-shadow: + 0 20px 40px rgba(0, 0, 0, 0.4), + 0 8px 16px rgba(0, 0, 0, 0.3), + inset 0 1px 0 rgba(255, 255, 255, 0.2); +} + +/* Neue verbesserte Drucker-Karten für die Drucker-Ansicht */ + +.printer-card-new { + position: relative; + overflow: hidden; + border-radius: 0.75rem; + border-width: 1px; + border-color: rgb(229 231 235 / 0.7); + background-image: linear-gradient(to bottom right, var(--tw-gradient-stops)); + --tw-gradient-from: rgb(255 255 255 / 0.9) var(--tw-gradient-from-position); + --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); + --tw-gradient-to: rgb(255 255 255 / 0.7) var(--tw-gradient-to-position); + padding: 1.25rem; + --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); + --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + --tw-backdrop-blur: blur(40px); + -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); + backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); + transition-property: all; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 300ms; +} + +.printer-card-new:hover { + --tw-translate-y: -0.25rem; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.printer-card-new:is(.dark *) { + border-color: rgb(51 65 85 / 0.3); + --tw-gradient-from: rgb(30 41 59 / 0.9) var(--tw-gradient-from-position); + --tw-gradient-to: rgb(30 41 59 / 0) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); + --tw-gradient-to: rgb(15 23 42 / 0.7) var(--tw-gradient-to-position); +} + +.printer-card-new { + box-shadow: + 0 20px 40px rgba(0, 0, 0, 0.08), + 0 10px 20px rgba(0, 0, 0, 0.06), + 0 0 0 1px rgba(255, 255, 255, 0.1); + border-radius: var(--card-radius, 1rem); +} + +.dark .printer-card-new { + box-shadow: + 0 20px 40px rgba(0, 0, 0, 0.4), + 0 10px 20px rgba(0, 0, 0, 0.3), + 0 0 0 1px rgba(255, 255, 255, 0.05); +} + +/* Online Drucker-Karten mit stärkerem visuellen Unterschied */ + +.printer-card-new.online { + --tw-border-opacity: 1; + border-color: rgb(187 247 208 / var(--tw-border-opacity, 1)); + background-image: linear-gradient(to bottom right, var(--tw-gradient-stops)); + --tw-gradient-from: rgb(240 253 244 / 0.9) var(--tw-gradient-from-position); + --tw-gradient-to: rgb(240 253 244 / 0) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); + --tw-gradient-to: rgb(236 253 245 / 0.8) var(--tw-gradient-to-position); +} + +.printer-card-new.online:is(.dark *) { + border-color: rgb(21 128 61 / 0.5); + --tw-gradient-from: rgb(20 83 45 / 0.3) var(--tw-gradient-from-position); + --tw-gradient-to: rgb(20 83 45 / 0) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); + --tw-gradient-to: rgb(6 78 59 / 0.2) var(--tw-gradient-to-position); +} + +.printer-card-new.online { + box-shadow: + 0 20px 40px rgba(0, 122, 85, 0.08), + 0 10px 20px rgba(0, 122, 85, 0.06), + 0 0 0 1px rgba(209, 250, 229, 0.4); +} + +.dark .printer-card-new.online { + box-shadow: + 0 20px 40px rgba(0, 0, 0, 0.3), + 0 10px 20px rgba(0, 0, 0, 0.2), + 0 0 0 1px rgba(16, 185, 129, 0.2); +} + +/* Status-Badge mit verbesserten Styles */ + +.status-badge-new { + display: inline-flex; + align-items: center; +} + +.status-badge-new > :not([hidden]) ~ :not([hidden]) { + --tw-space-x-reverse: 0; + margin-right: calc(0.25rem * var(--tw-space-x-reverse)); + margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse))); +} + +.status-badge-new { + border-radius: 9999px; + padding-left: 0.625rem; + padding-right: 0.625rem; + padding-top: 0.25rem; + padding-bottom: 0.25rem; + font-size: 0.75rem; + line-height: 1rem; + font-weight: 500; + --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); + --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + background: rgba(255, 255, 255, 0.9); + backdrop-filter: blur(8px); + -webkit-backdrop-filter: blur(8px); + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); +} + +.dark .status-badge-new { + background: rgba(30, 41, 59, 0.7); + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); +} + +.status-badge-new.online { + background-color: rgb(220 252 231 / 0.9); + --tw-text-opacity: 1; + color: rgb(22 101 52 / var(--tw-text-opacity, 1)); +} + +.status-badge-new.online:is(.dark *) { + background-color: rgb(20 83 45 / 0.6); + --tw-text-opacity: 1; + color: rgb(134 239 172 / var(--tw-text-opacity, 1)); +} + +.status-badge-new.offline { + background-color: rgb(254 226 226 / 0.9); + --tw-text-opacity: 1; + color: rgb(153 27 27 / var(--tw-text-opacity, 1)); +} + +.status-badge-new.offline:is(.dark *) { + background-color: rgb(127 29 29 / 0.6); + --tw-text-opacity: 1; + color: rgb(252 165 165 / var(--tw-text-opacity, 1)); +} + +/* Verbesserte Filterleiste */ + +.filter-bar-new { + border-radius: 0.5rem; + border-width: 1px; + border-color: rgb(229 231 235 / 0.6); + background-color: rgb(255 255 255 / 0.8); + padding: 0.375rem; + --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + --tw-backdrop-blur: blur(24px); + -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); + backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); +} + +.filter-bar-new:is(.dark *) { + border-color: rgb(51 65 85 / 0.3); + background-color: rgb(30 41 59 / 0.8); +} + +.filter-bar-new { + box-shadow: + 0 10px 25px rgba(0, 0, 0, 0.05), + 0 5px 10px rgba(0, 0, 0, 0.03), + 0 0 0 1px rgba(255, 255, 255, 0.2); +} + +.dark .filter-bar-new { + box-shadow: + 0 10px 25px rgba(0, 0, 0, 0.2), + 0 5px 10px rgba(0, 0, 0, 0.15), + 0 0 0 1px rgba(255, 255, 255, 0.05); +} + +.filter-btn-new { + border-radius: 0.375rem; + padding-left: 0.875rem; + padding-right: 0.875rem; + padding-top: 0.5rem; + padding-bottom: 0.5rem; + font-size: 0.875rem; + line-height: 1.25rem; + font-weight: 500; + transition-property: all; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 300ms; +} + +.filter-btn-new.active { + --tw-bg-opacity: 1; + background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1)); + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity, 1)); + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.filter-btn-new.active:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); + --tw-text-opacity: 1; + color: rgb(15 23 42 / var(--tw-text-opacity, 1)); +} + +.filter-btn-new.active { + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); +} + +.dark .filter-btn-new.active { + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); +} + +/* Verbesserte Aktionsschaltflächen */ + +.action-btn-new { + display: flex; + align-items: center; + justify-content: center; + gap: 0.5rem; + border-radius: 0.5rem; + padding-left: 1rem; + padding-right: 1rem; + padding-top: 0.625rem; + padding-bottom: 0.625rem; + font-size: 0.875rem; + line-height: 1.25rem; + font-weight: 500; + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + transition-property: all; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 300ms; +} + +.action-btn-new:hover { + --tw-translate-y: -0.125rem; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.action-btn-new { + backdrop-filter: blur(8px); + -webkit-backdrop-filter: blur(8px); +} + +.action-btn-new.primary { + --tw-bg-opacity: 1; + background-color: rgb(79 70 229 / var(--tw-bg-opacity, 1)); + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity, 1)); +} + +.action-btn-new.primary:hover { + --tw-bg-opacity: 1; + background-color: rgb(67 56 202 / var(--tw-bg-opacity, 1)); +} + +.action-btn-new.primary:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(79 70 229 / var(--tw-bg-opacity, 1)); +} + +.action-btn-new.primary:hover:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(99 102 241 / var(--tw-bg-opacity, 1)); +} + +.action-btn-new.primary { + box-shadow: 0 5px 15px rgba(79, 70, 229, 0.2); +} + +.dark .action-btn-new.primary { + box-shadow: 0 5px 15px rgba(79, 70, 229, 0.3); +} + +.action-btn-new.success { + --tw-bg-opacity: 1; + background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1)); + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity, 1)); +} + +.action-btn-new.success:hover { + --tw-bg-opacity: 1; + background-color: rgb(21 128 61 / var(--tw-bg-opacity, 1)); +} + +.action-btn-new.success:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1)); +} + +.action-btn-new.success:hover:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1)); +} + +.action-btn-new.success { + box-shadow: 0 5px 15px rgba(16, 185, 129, 0.2); +} + +.dark .action-btn-new.success { + box-shadow: 0 5px 15px rgba(16, 185, 129, 0.3); +} + +.action-btn-new.danger { + --tw-bg-opacity: 1; + background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1)); + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity, 1)); +} + +.action-btn-new.danger:hover { + --tw-bg-opacity: 1; + background-color: rgb(185 28 28 / var(--tw-bg-opacity, 1)); +} + +.action-btn-new.danger:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1)); +} + +.action-btn-new.danger:hover:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1)); +} + +.action-btn-new.danger { + box-shadow: 0 5px 15px rgba(239, 68, 68, 0.2); +} + +.dark .action-btn-new.danger { + box-shadow: 0 5px 15px rgba(239, 68, 68, 0.3); +} + +/* Informationszeilen in Drucker-Karten */ + +.printer-info-row { + margin-bottom: 0.375rem; + display: flex; + align-items: center; + gap: 0.5rem; + font-size: 0.75rem; + line-height: 1rem; + --tw-text-opacity: 1; + color: rgb(51 65 85 / var(--tw-text-opacity, 1)); +} + +.printer-info-row:is(.dark *) { + --tw-text-opacity: 1; + color: rgb(203 213 225 / var(--tw-text-opacity, 1)); +} + +@media (min-width: 640px) { + .printer-info-row { + font-size: 0.875rem; + line-height: 1.25rem; + } +} + +.printer-info-icon { + height: 0.875rem; + width: 0.875rem; + flex-shrink: 0; + --tw-text-opacity: 1; + color: rgb(100 116 139 / var(--tw-text-opacity, 1)); +} + +.printer-info-icon:is(.dark *) { + --tw-text-opacity: 1; + color: rgb(148 163 184 / var(--tw-text-opacity, 1)); +} + +@media (min-width: 640px) { + .printer-info-icon { + height: 1rem; + width: 1rem; + } +} + +/* Online-Indikator mit Pulseffekt */ + +.online-indicator { + position: absolute; + top: 0.625rem; + right: 0.625rem; + height: 0.75rem; + width: 0.75rem; + border-radius: 9999px; + --tw-bg-opacity: 1; + background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1)); + --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.dark-mode-toggle-premium .online-indicator { + box-shadow: + 0 10px 15px -3px rgba(0, 0, 0, 0.1), + 0 4px 6px -2px rgba(0, 0, 0, 0.05); +} + +.dark .dark-mode-toggle-premium .online-indicator { + box-shadow: + 0 10px 15px -3px rgba(0, 0, 0, 0.3), + 0 4px 6px -2px rgba(0, 0, 0, 0.2); +} + +.dark-mode-toggle-premium .online-indicator { + box-shadow: + 0 10px 15px -3px rgba(0, 0, 0, 0.1), + 0 4px 6px -2px rgba(0, 0, 0, 0.05); +} + +.dark .dark-mode-toggle-premium .online-indicator { + box-shadow: + 0 10px 15px -3px rgba(0, 0, 0, 0.3), + 0 4px 6px -2px rgba(0, 0, 0, 0.2); +} + +.online-indicator { + box-shadow: 0 0 0 rgba(16, 185, 129, 0.6); + animation: pulse-ring 2s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite; +} + +@keyframes pulse-ring { + 0% { + box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6); + } + + 70% { + box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); + } + + 100% { + box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); + } +} + +/* Header mit verbesserten Status-Anzeigen */ + +.status-overview-new { + display: flex; + flex-wrap: wrap; + gap: 0.75rem; + border-radius: 0.5rem; + border-width: 1px; + border-color: rgb(229 231 235 / 0.6); + background-color: rgb(255 255 255 / 0.6); + padding: 0.75rem; + font-size: 0.75rem; + line-height: 1rem; + --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + --tw-backdrop-blur: blur(24px); + -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); + backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); +} + +.dark-mode-toggle-premium .status-overview-new { + box-shadow: + 0 10px 15px -3px rgba(0, 0, 0, 0.1), + 0 4px 6px -2px rgba(0, 0, 0, 0.05); +} + +.dark .dark-mode-toggle-premium .status-overview-new { + box-shadow: + 0 10px 15px -3px rgba(0, 0, 0, 0.3), + 0 4px 6px -2px rgba(0, 0, 0, 0.2); +} + +.dark-mode-toggle-premium .status-overview-new { + box-shadow: + 0 10px 15px -3px rgba(0, 0, 0, 0.1), + 0 4px 6px -2px rgba(0, 0, 0, 0.05); +} + +.dark .dark-mode-toggle-premium .status-overview-new { + box-shadow: + 0 10px 15px -3px rgba(0, 0, 0, 0.3), + 0 4px 6px -2px rgba(0, 0, 0, 0.2); +} + +.status-overview-new:is(.dark *) { + border-color: rgb(51 65 85 / 0.3); + background-color: rgb(30 41 59 / 0.6); +} + +@media (min-width: 640px) { + .status-overview-new { + font-size: 0.875rem; + line-height: 1.25rem; + } +} + +.status-overview-new { + box-shadow: + 0 10px 25px rgba(0, 0, 0, 0.04), + 0 5px 10px rgba(0, 0, 0, 0.02), + 0 0 0 1px rgba(255, 255, 255, 0.1); +} + +.dark .status-overview-new { + box-shadow: + 0 10px 25px rgba(0, 0, 0, 0.15), + 0 5px 10px rgba(0, 0, 0, 0.1), + 0 0 0 1px rgba(255, 255, 255, 0.03); +} + +.status-dot { + height: 0.625rem; + width: 0.625rem; + border-radius: 9999px; +} + +.status-dot.online { + --tw-bg-opacity: 1; + background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1)); + animation: pulse-dot 2s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite; +} + +.status-dot.offline { + --tw-bg-opacity: 1; + background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1)); +} + +@keyframes pulse-dot { + 0% { + transform: scale(0.95); + opacity: 1; + } + + 50% { + transform: scale(1.1); + opacity: 0.8; + } + + 100% { + transform: scale(0.95); + opacity: 1; + } +} + +/* Verbesserte Modals mit Glassmorphism */ + +.modal-new { + position: fixed; + inset: 0px; + z-index: 50; + display: flex; + align-items: center; + justify-content: center; + background-color: rgb(0 0 0 / 0.4); + padding: 1rem; + --tw-backdrop-blur: blur(4px); + -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); + backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); +} + +.modal-content-new { + width: 100%; + max-width: 28rem; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + border-radius: 1rem; + border-width: 1px; + border-color: rgb(229 231 235 / 0.6); + background-color: rgb(255 255 255 / 0.9); + padding: 1.5rem; + --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); + --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + --tw-backdrop-blur: blur(40px); + -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); + backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); + transition-property: all; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 300ms; +} + +.modal-content-new:is(.dark *) { + border-color: rgb(51 65 85 / 0.3); + background-color: rgb(30 41 59 / 0.9); +} + +.modal-content-new { + box-shadow: + 0 25px 50px rgba(0, 0, 0, 0.15), + 0 15px 30px rgba(0, 0, 0, 0.1), + 0 0 0 1px rgba(255, 255, 255, 0.1); + animation: modal-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); +} + +.dark .modal-content-new { + box-shadow: + 0 25px 50px rgba(0, 0, 0, 0.4), + 0 15px 30px rgba(0, 0, 0, 0.3), + 0 0 0 1px rgba(255, 255, 255, 0.05); +} + +@keyframes modal-in { + 0% { + opacity: 0; + transform: scale(0.95) translateY(10px); + } + + 100% { + opacity: 1; + transform: scale(1) translateY(0); + } +} + +/* Verbesserte Input-Felder für Modals */ + +.input-new { + width: 100%; + border-radius: 0.5rem; + border-width: 1px; + border-color: rgb(209 213 219 / 0.6); + background-color: rgb(255 255 255 / 0.7); + padding-left: 0.75rem; + padding-right: 0.75rem; + padding-top: 0.625rem; + padding-bottom: 0.625rem; + --tw-text-opacity: 1; + color: rgb(15 23 42 / var(--tw-text-opacity, 1)); + --tw-backdrop-blur: blur(16px); + -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); + backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); + transition-property: all; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 200ms; +} + +.input-new:focus { + border-color: transparent; + outline: 2px solid transparent; + outline-offset: 2px; + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); + --tw-ring-opacity: 1; + --tw-ring-color: rgb(0 0 0 / var(--tw-ring-opacity, 1)); +} + +.input-new:is(.dark *) { + border-color: rgb(71 85 105 / 0.6); + background-color: rgb(51 65 85 / 0.7); + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity, 1)); +} + +.input-new:focus:is(.dark *) { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity, 1)); +} + +.input-new { + backdrop-filter: blur(16px); + -webkit-backdrop-filter: blur(16px); + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); +} + +.dark .input-new { + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); +} + +/* Verbesserte Form-Labels */ + +.form-label-new { + margin-bottom: 0.5rem; + display: block; + font-size: 0.875rem; + line-height: 1.25rem; + font-weight: 500; + --tw-text-opacity: 1; + color: rgb(15 23 42 / var(--tw-text-opacity, 1)); +} + +.form-label-new:is(.dark *) { + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity, 1)); +} + +/* Dark Mode Toggle - Premium Design */ + +.dark-mode-toggle-premium { + position: relative; + cursor: pointer; + outline: 2px solid transparent; + outline-offset: 2px; +} + +.dark-mode-toggle-premium:focus { + outline: 2px solid transparent; + outline-offset: 2px; +} + +.dark-mode-toggle-premium { + z-index: 100; + /* Stellt sicher, dass der Button über anderen Elementen liegt */ +} + +.dark-mode-toggle-premium:focus-visible { + border-radius: 9999px; + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); + --tw-ring-opacity: 1; + --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1)); + --tw-ring-offset-width: 2px; +} + +.dark-mode-toggle-premium:focus-visible:is(.dark *) { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity, 1)); + --tw-ring-offset-color: #0f172a; +} + +/* Animationen für verzögerte Pulse-Effekte */ + +@keyframes delayed-pulse { + 0%, 100% { + opacity: 1; + } + + 50% { + opacity: 0.5; + } +} + +.animation-delay-500 { + animation-delay: 0.5s; + animation: delayed-pulse 2s ease-in-out infinite; +} + +.animation-delay-1000 { + animation-delay: 1s; + animation: delayed-pulse 2s ease-in-out infinite; +} + +.animation-delay-1500 { + animation-delay: 1.5s; + animation: delayed-pulse 2s ease-in-out infinite; +} + +/* Improved icon transitions */ + +.dark-mode-toggle-premium .sun-icon, +.dark-mode-toggle-premium .moon-icon { + transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); +} + +/* Glassmorphism effect for better visual depth */ + +.dark-mode-toggle-premium .backdrop-blur-md { + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); +} + +/* Enhanced hover effects */ + +.dark-mode-toggle-premium:hover .sun-icon svg, +.dark-mode-toggle-premium:hover .moon-icon svg { + filter: drop-shadow(0 0 8px currentColor); + transform: scale(1.1); +} + +/* Smooth gradient transitions */ + +.dark-mode-toggle-premium .bg-gradient-to-r { + transition: opacity 0.5s ease-in-out; +} + +/* Better shadow effects */ + +.dark-mode-toggle-premium .shadow-lg { + box-shadow: + 0 10px 15px -3px rgba(0, 0, 0, 0.1), + 0 4px 6px -2px rgba(0, 0, 0, 0.05); +} + +.dark .dark-mode-toggle-premium .shadow-lg { + box-shadow: + 0 10px 15px -3px rgba(0, 0, 0, 0.3), + 0 4px 6px -2px rgba(0, 0, 0, 0.2); +} + +/* Rotation animation for smooth icon transitions */ + +@keyframes icon-rotate-in { + 0% { + opacity: 0; + transform: rotate(-90deg) scale(0.8); + } + + 100% { + opacity: 1; + transform: rotate(0deg) scale(1); + } +} + +.dark-mode-toggle-premium .sun-icon.icon-enter, +.dark-mode-toggle-premium .moon-icon.icon-enter { + animation: icon-rotate-in 0.5s ease-out forwards; +} + +/* Active state animation */ + +.dark-mode-toggle-premium:active > div { + transform: scale(0.95); + transition: transform 0.1s ease-out; +} + +/* User Menu Button - Neues Design */ + +.user-menu-button-new { + display: flex; + align-items: center; +} + +.user-menu-button-new > :not([hidden]) ~ :not([hidden]) { + --tw-space-x-reverse: 0; + margin-right: calc(0.5rem * var(--tw-space-x-reverse)); + margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse))); +} + +.user-menu-button-new { + border-radius: 0.5rem; + padding: 0.375rem; + transition-property: all; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 300ms; + background: rgba(241, 245, 249, 0.6); + border: 1px solid rgba(255, 255, 255, 0.6); + box-shadow: + 0 2px 10px rgba(0, 0, 0, 0.04), + 0 1px 2px rgba(0, 0, 0, 0.02); +} + +.user-menu-button-new:hover { + --tw-translate-y: -0.125rem; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + background: rgba(241, 245, 249, 0.8); + box-shadow: + 0 10px 20px rgba(0, 0, 0, 0.06), + 0 2px 6px rgba(0, 0, 0, 0.04); +} + +.dark .user-menu-button-new { + background: rgba(30, 41, 59, 0.6); + border: 1px solid rgba(255, 255, 255, 0.08); + box-shadow: + 0 2px 10px rgba(0, 0, 0, 0.15), + 0 1px 2px rgba(0, 0, 0, 0.1); +} + +.dark .user-menu-button-new:hover { + background: rgba(30, 41, 59, 0.8); + box-shadow: + 0 10px 20px rgba(0, 0, 0, 0.15), + 0 2px 6px rgba(0, 0, 0, 0.1); +} + +/* User Avatar - Neues Design */ + +.user-avatar-new { + display: flex; + height: 2rem; + width: 2rem; + align-items: center; + justify-content: center; + border-radius: 9999px; + font-size: 0.875rem; + line-height: 1.25rem; + font-weight: 600; + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity, 1)); + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + transition-property: all; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 300ms; + background: linear-gradient(135deg, #000000, #333333); + box-shadow: + 0 2px 6px rgba(0, 0, 0, 0.2), + 0 1px 3px rgba(0, 0, 0, 0.1); +} + +.dark .user-avatar-new { + background: linear-gradient(135deg, #f8fafc, #e2e8f0); + color: #0f172a; + box-shadow: + 0 2px 6px rgba(0, 0, 0, 0.3), + 0 1px 3px rgba(0, 0, 0, 0.2); +} + +/* Login Button - Neues Design */ + +.login-button-new { + display: flex; + align-items: center; + border-radius: 0.5rem; + padding-left: 1rem; + padding-right: 1rem; + padding-top: 0.5rem; + padding-bottom: 0.5rem; + font-size: 0.875rem; + line-height: 1.25rem; + font-weight: 500; + --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); + --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + transition-property: all; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 300ms; + background: #000000; + color: #ffffff; + border: 1px solid rgba(255, 255, 255, 0.1); + box-shadow: + 0 2px 10px rgba(0, 0, 0, 0.1), + 0 1px 2px rgba(0, 0, 0, 0.08); +} + +.login-button-new:hover { + --tw-translate-y: -0.125rem; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + background: #333333; + box-shadow: + 0 10px 20px rgba(0, 0, 0, 0.15), + 0 3px 6px rgba(0, 0, 0, 0.1); +} + +.dark .login-button-new { + background: #ffffff; + color: #000000; + border: 1px solid rgba(0, 0, 0, 0.1); + box-shadow: + 0 2px 10px rgba(0, 0, 0, 0.2), + 0 1px 2px rgba(0, 0, 0, 0.15); +} + +.dark .login-button-new:hover { + background: #f1f5f9; + box-shadow: + 0 10px 20px rgba(0, 0, 0, 0.25), + 0 3px 6px rgba(0, 0, 0, 0.2); +} + +/* Mobile Menu - Neues Design */ + +.mobile-menu-new { + z-index: 40; + width: 100%; + overflow: hidden; + transition-property: all; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 300ms; + background: rgba(255, 255, 255, 0.8); + backdrop-filter: blur(24px); + -webkit-backdrop-filter: blur(24px); + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06); + border-bottom: 1px solid rgba(241, 245, 249, 0.8); + max-height: 0; + opacity: 0; +} + +.mobile-menu-new.open { + max-height: 500px; + opacity: 1; + border-bottom: 1px solid rgba(241, 245, 249, 0.8); +} + +.dark .mobile-menu-new { + background: rgba(15, 23, 42, 0.8); + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); + border-bottom: 1px solid rgba(30, 41, 59, 0.8); +} + +.mobile-nav-item { + display: flex; + align-items: center; +} + +.mobile-nav-item > :not([hidden]) ~ :not([hidden]) { + --tw-space-x-reverse: 0; + margin-right: calc(0.75rem * var(--tw-space-x-reverse)); + margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse))); +} + +.mobile-nav-item { + border-radius: 0.5rem; + padding-left: 1rem; + padding-right: 1rem; + padding-top: 0.75rem; + padding-bottom: 0.75rem; + --tw-text-opacity: 1; + color: rgb(30 41 59 / var(--tw-text-opacity, 1)); + transition-property: all; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 300ms; +} + +.mobile-nav-item:is(.dark *) { + --tw-text-opacity: 1; + color: rgb(226 232 240 / var(--tw-text-opacity, 1)); +} + +.mobile-nav-item:hover { + background: rgba(241, 245, 249, 0.8); +} + +.dark .mobile-nav-item:hover { + background: rgba(30, 41, 59, 0.6); +} + +.mobile-nav-item.active { + background: rgba(241, 245, 249, 0.9); + color: #000000; + font-weight: 500; +} + +.dark .mobile-nav-item.active { + background: rgba(30, 41, 59, 0.8); + color: #ffffff; +} + +/* Dashboard Stat Cards mit schwarzem Hintergrund im Dark Mode */ + +.mb-stat-card { + background: linear-gradient(135deg, rgba(240, 249, 255, 0.6) 0%, rgba(230, 242, 255, 0.6) 100%); + color: #0f172a; + position: relative; + overflow: hidden; + border: none; + border-radius: var(--card-radius); + backdrop-filter: blur(20px) saturate(180%) brightness(110%); + -webkit-backdrop-filter: blur(20px) saturate(180%) brightness(110%); + box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.1); + padding: 1.5rem; + margin: 1rem; + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.dark .mb-stat-card { + background: linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, rgba(10, 10, 10, 0.7) 100%); + color: var(--text-primary, #f8fafc); + box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.05); +} + +/* Stats und Jobs Page Card Styles */ + +.stats-card, .job-card { + border-radius: 0.75rem; + border-width: 1px; + border-color: rgb(229 231 235 / 0.7); + background-color: rgb(255 255 255 / 0.6); + --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); + --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + --tw-backdrop-blur: blur(40px); + -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); + backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); + transition-property: all; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 300ms; +} + +.stats-card:is(.dark *), .job-card:is(.dark *) { + border-color: rgb(51 65 85 / 0.2); + background-color: rgb(0 0 0 / 0.8); +} + +.stats-card, .job-card { + backdrop-filter: blur(24px) saturate(200%) brightness(120%); + -webkit-backdrop-filter: blur(24px) saturate(200%) brightness(120%); + box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.1); + border-radius: var(--card-radius); +} + +/* Footer Styling - Verstärktes Glassmorphism */ + +footer { + transition-property: all; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 300ms; + background: rgba(255, 255, 255, 0.1); + backdrop-filter: blur(30px) saturate(180%) brightness(120%); + -webkit-backdrop-filter: blur(30px) saturate(180%) brightness(120%); + border-top: 1px solid rgba(255, 255, 255, 0.2); + box-shadow: + 0 -8px 32px rgba(0, 0, 0, 0.1), + 0 -2px 8px rgba(0, 0, 0, 0.05), + inset 0 1px 0 rgba(255, 255, 255, 0.2), + 0 0 0 1px rgba(255, 255, 255, 0.05); +} + +.dark footer { + background: rgba(0, 0, 0, 0.3); + backdrop-filter: blur(30px) saturate(160%) brightness(110%); + -webkit-backdrop-filter: blur(30px) saturate(160%) brightness(110%); + border-top: 1px solid rgba(255, 255, 255, 0.1); + box-shadow: + 0 -8px 32px rgba(0, 0, 0, 0.3), + 0 -2px 8px rgba(0, 0, 0, 0.2), + inset 0 1px 0 rgba(255, 255, 255, 0.1), + 0 0 0 1px rgba(255, 255, 255, 0.03); +} + +/* Dropdown Pfeil Animation */ + +.dropdown-arrow { + transition-property: transform; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 300ms; +} + +/* Mercedes-Benz Hintergrund mit Star-Pattern */ + +.mercedes-star-bg { + position: relative; +} + +.mercedes-star-bg::after { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' width='80' height='80' opacity='0.05' fill='currentColor'%3E%3Cpath d='M58.6,4.5C53,1.6,46.7,0,40,0c-6.7,0-13,1.6-18.6,4.5v0C8.7,11.2,0,24.6,0,40c0,15.4,8.7,28.8,21.5,35.5C27,78.3,33.3,80,40,80c6.7,0,12.9-1.7,18.5-4.6C71.3,68.8,80,55.4,80,40C80,24.6,71.3,11.2,58.6,4.5z M4,40c0-13.1,7-24.5,17.5-30.9v0C26.6,6,32.5,4.2,39,4l-4.5,32.7L21.5,46.8v0L8.3,57.1C5.6,52,4,46.2,4,40z M58.6,70.8C53.1,74.1,46.8,76,40,76c-6.8,0-13.2-1.9-18.6-5.2c-4.9-2.9-8.9-6.9-11.9-11.7l11.9-4.9v0L40,46.6l18.6,7.5v0l12,4.9C67.6,63.9,63.4,67.9,58.6,70.8z M58.6,46.8L58.6,46.8l-12.9-10L41.1,4c6.3,0.2,12.3,2,17.4,5.1v0C69,15.4,76,26.9,76,40c0,6.2-1.5,12-4.3,17.1L58.6,46.8z'/%3E%3C/svg%3E"); + background-position: center; + background-repeat: repeat; + background-size: 40px 40px; + z-index: -1; + opacity: 0.05; +} + +.dark .mercedes-star-bg::after { + opacity: 0.02; + filter: invert(1) brightness(0.4); +} + +/* Zusätzliche Glassmorphism-Verbesserungen */ + +.glass-effect { + backdrop-filter: blur(20px) saturate(180%) brightness(110%); + -webkit-backdrop-filter: blur(20px) saturate(180%) brightness(110%); + background: rgba(255, 255, 255, 0.1); + border: 1px solid rgba(255, 255, 255, 0.2); + box-shadow: + 0 8px 32px rgba(0, 0, 0, 0.1), + inset 0 1px 0 rgba(255, 255, 255, 0.3); +} + +.dark .glass-effect { + background: rgba(0, 0, 0, 0.3); + border: 1px solid rgba(255, 255, 255, 0.1); + box-shadow: + 0 8px 32px rgba(0, 0, 0, 0.3), + inset 0 1px 0 rgba(255, 255, 255, 0.15); +} + +/* Verbesserte Hover-Effekte für alle interaktiven Elemente */ + +.glass-hover { + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); +} + +.glass-hover:hover { + transform: translateY(-2px); + backdrop-filter: blur(25px) saturate(200%) brightness(120%); + -webkit-backdrop-filter: blur(25px) saturate(200%) brightness(120%); + box-shadow: + 0 20px 40px rgba(0, 0, 0, 0.15), + 0 8px 16px rgba(0, 0, 0, 0.1), + inset 0 1px 0 rgba(255, 255, 255, 0.4); +} + +.dark .glass-hover:hover { + box-shadow: + 0 20px 40px rgba(0, 0, 0, 0.4), + 0 8px 16px rgba(0, 0, 0, 0.3), + inset 0 1px 0 rgba(255, 255, 255, 0.2); +} + +/* Neue verbesserte Drucker-Karten für die Drucker-Ansicht */ + +.printer-card-new { + position: relative; + overflow: hidden; + border-radius: 0.75rem; + border-width: 1px; + border-color: rgb(229 231 235 / 0.7); + background-image: linear-gradient(to bottom right, var(--tw-gradient-stops)); + --tw-gradient-from: rgb(255 255 255 / 0.9) var(--tw-gradient-from-position); + --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); + --tw-gradient-to: rgb(255 255 255 / 0.7) var(--tw-gradient-to-position); + padding: 1.25rem; + --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); + --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + --tw-backdrop-blur: blur(40px); + -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); + backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); + transition-property: all; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 300ms; +} + +.printer-card-new:hover { + --tw-translate-y: -0.25rem; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.printer-card-new:is(.dark *) { + border-color: rgb(51 65 85 / 0.3); + --tw-gradient-from: rgb(30 41 59 / 0.9) var(--tw-gradient-from-position); + --tw-gradient-to: rgb(30 41 59 / 0) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); + --tw-gradient-to: rgb(15 23 42 / 0.7) var(--tw-gradient-to-position); +} + +.printer-card-new { + box-shadow: + 0 20px 40px rgba(0, 0, 0, 0.08), + 0 10px 20px rgba(0, 0, 0, 0.06), + 0 0 0 1px rgba(255, 255, 255, 0.1); + border-radius: var(--card-radius, 1rem); +} + +.dark .printer-card-new { + box-shadow: + 0 20px 40px rgba(0, 0, 0, 0.4), + 0 10px 20px rgba(0, 0, 0, 0.3), + 0 0 0 1px rgba(255, 255, 255, 0.05); +} + +/* Online Drucker-Karten mit stärkerem visuellen Unterschied */ + +.printer-card-new.online { + --tw-border-opacity: 1; + border-color: rgb(187 247 208 / var(--tw-border-opacity, 1)); + background-image: linear-gradient(to bottom right, var(--tw-gradient-stops)); + --tw-gradient-from: rgb(240 253 244 / 0.9) var(--tw-gradient-from-position); + --tw-gradient-to: rgb(240 253 244 / 0) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); + --tw-gradient-to: rgb(236 253 245 / 0.8) var(--tw-gradient-to-position); +} + +.printer-card-new.online:is(.dark *) { + border-color: rgb(21 128 61 / 0.5); + --tw-gradient-from: rgb(20 83 45 / 0.3) var(--tw-gradient-from-position); + --tw-gradient-to: rgb(20 83 45 / 0) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); + --tw-gradient-to: rgb(6 78 59 / 0.2) var(--tw-gradient-to-position); +} + +.printer-card-new.online { + box-shadow: + 0 20px 40px rgba(0, 122, 85, 0.08), + 0 10px 20px rgba(0, 122, 85, 0.06), + 0 0 0 1px rgba(209, 250, 229, 0.4); +} + +.dark .printer-card-new.online { + box-shadow: + 0 20px 40px rgba(0, 0, 0, 0.3), + 0 10px 20px rgba(0, 0, 0, 0.2), + 0 0 0 1px rgba(16, 185, 129, 0.2); +} + +/* Status-Badge mit verbesserten Styles */ + +.status-badge-new { + display: inline-flex; + align-items: center; +} + +.status-badge-new > :not([hidden]) ~ :not([hidden]) { + --tw-space-x-reverse: 0; + margin-right: calc(0.25rem * var(--tw-space-x-reverse)); + margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse))); +} + +.status-badge-new { + border-radius: 9999px; + padding-left: 0.625rem; + padding-right: 0.625rem; + padding-top: 0.25rem; + padding-bottom: 0.25rem; + font-size: 0.75rem; + line-height: 1rem; + font-weight: 500; + --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); + --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + background: rgba(255, 255, 255, 0.9); + backdrop-filter: blur(8px); + -webkit-backdrop-filter: blur(8px); + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); +} + +.dark .status-badge-new { + background: rgba(30, 41, 59, 0.7); + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); +} + +.status-badge-new.online { + background-color: rgb(220 252 231 / 0.9); + --tw-text-opacity: 1; + color: rgb(22 101 52 / var(--tw-text-opacity, 1)); +} + +.status-badge-new.online:is(.dark *) { + background-color: rgb(20 83 45 / 0.6); + --tw-text-opacity: 1; + color: rgb(134 239 172 / var(--tw-text-opacity, 1)); +} + +.status-badge-new.offline { + background-color: rgb(254 226 226 / 0.9); + --tw-text-opacity: 1; + color: rgb(153 27 27 / var(--tw-text-opacity, 1)); +} + +.status-badge-new.offline:is(.dark *) { + background-color: rgb(127 29 29 / 0.6); + --tw-text-opacity: 1; + color: rgb(252 165 165 / var(--tw-text-opacity, 1)); +} + +/* Verbesserte Filterleiste */ + +.filter-bar-new { + border-radius: 0.5rem; + border-width: 1px; + border-color: rgb(229 231 235 / 0.6); + background-color: rgb(255 255 255 / 0.8); + padding: 0.375rem; + --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + --tw-backdrop-blur: blur(24px); + -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); + backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); +} + +.filter-bar-new:is(.dark *) { + border-color: rgb(51 65 85 / 0.3); + background-color: rgb(30 41 59 / 0.8); +} + +.filter-bar-new { + box-shadow: + 0 10px 25px rgba(0, 0, 0, 0.05), + 0 5px 10px rgba(0, 0, 0, 0.03), + 0 0 0 1px rgba(255, 255, 255, 0.2); +} + +.dark .filter-bar-new { + box-shadow: + 0 10px 25px rgba(0, 0, 0, 0.2), + 0 5px 10px rgba(0, 0, 0, 0.15), + 0 0 0 1px rgba(255, 255, 255, 0.05); +} + +.filter-btn-new { + border-radius: 0.375rem; + padding-left: 0.875rem; + padding-right: 0.875rem; + padding-top: 0.5rem; + padding-bottom: 0.5rem; + font-size: 0.875rem; + line-height: 1.25rem; + font-weight: 500; + transition-property: all; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 300ms; +} + +.filter-btn-new.active { + --tw-bg-opacity: 1; + background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1)); + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity, 1)); + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.filter-btn-new.active:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); + --tw-text-opacity: 1; + color: rgb(15 23 42 / var(--tw-text-opacity, 1)); +} + +.filter-btn-new.active { + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); +} + +.dark .filter-btn-new.active { + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); +} + +/* Verbesserte Aktionsschaltflächen */ + +.action-btn-new { + display: flex; + align-items: center; + justify-content: center; + gap: 0.5rem; + border-radius: 0.5rem; + padding-left: 1rem; + padding-right: 1rem; + padding-top: 0.625rem; + padding-bottom: 0.625rem; + font-size: 0.875rem; + line-height: 1.25rem; + font-weight: 500; + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + transition-property: all; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 300ms; +} + +.action-btn-new:hover { + --tw-translate-y: -0.125rem; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.action-btn-new { + backdrop-filter: blur(8px); + -webkit-backdrop-filter: blur(8px); +} + +.action-btn-new.primary { + --tw-bg-opacity: 1; + background-color: rgb(79 70 229 / var(--tw-bg-opacity, 1)); + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity, 1)); +} + +.action-btn-new.primary:hover { + --tw-bg-opacity: 1; + background-color: rgb(67 56 202 / var(--tw-bg-opacity, 1)); +} + +.action-btn-new.primary:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(79 70 229 / var(--tw-bg-opacity, 1)); +} + +.action-btn-new.primary:hover:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(99 102 241 / var(--tw-bg-opacity, 1)); +} + +.action-btn-new.primary { + box-shadow: 0 5px 15px rgba(79, 70, 229, 0.2); +} + +.dark .action-btn-new.primary { + box-shadow: 0 5px 15px rgba(79, 70, 229, 0.3); +} + +.action-btn-new.success { + --tw-bg-opacity: 1; + background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1)); + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity, 1)); +} + +.action-btn-new.success:hover { + --tw-bg-opacity: 1; + background-color: rgb(21 128 61 / var(--tw-bg-opacity, 1)); +} + +.action-btn-new.success:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1)); +} + +.action-btn-new.success:hover:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1)); +} + +.action-btn-new.success { + box-shadow: 0 5px 15px rgba(16, 185, 129, 0.2); +} + +.dark .action-btn-new.success { + box-shadow: 0 5px 15px rgba(16, 185, 129, 0.3); +} + +.action-btn-new.danger { + --tw-bg-opacity: 1; + background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1)); + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity, 1)); +} + +.action-btn-new.danger:hover { + --tw-bg-opacity: 1; + background-color: rgb(185 28 28 / var(--tw-bg-opacity, 1)); +} + +.action-btn-new.danger:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1)); +} + +.action-btn-new.danger:hover:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1)); +} + +.action-btn-new.danger { + box-shadow: 0 5px 15px rgba(239, 68, 68, 0.2); +} + +.dark .action-btn-new.danger { + box-shadow: 0 5px 15px rgba(239, 68, 68, 0.3); +} + +/* Informationszeilen in Drucker-Karten */ + +.printer-info-row { + margin-bottom: 0.375rem; + display: flex; + align-items: center; + gap: 0.5rem; + font-size: 0.75rem; + line-height: 1rem; + --tw-text-opacity: 1; + color: rgb(51 65 85 / var(--tw-text-opacity, 1)); +} + +.printer-info-row:is(.dark *) { + --tw-text-opacity: 1; + color: rgb(203 213 225 / var(--tw-text-opacity, 1)); +} + +@media (min-width: 640px) { + .printer-info-row { + font-size: 0.875rem; + line-height: 1.25rem; + } +} + +.printer-info-icon { + height: 0.875rem; + width: 0.875rem; + flex-shrink: 0; + --tw-text-opacity: 1; + color: rgb(100 116 139 / var(--tw-text-opacity, 1)); +} + +.printer-info-icon:is(.dark *) { + --tw-text-opacity: 1; + color: rgb(148 163 184 / var(--tw-text-opacity, 1)); +} + +@media (min-width: 640px) { + .printer-info-icon { + height: 1rem; + width: 1rem; + } +} + +/* Online-Indikator mit Pulseffekt */ + +.online-indicator { + position: absolute; + top: 0.625rem; + right: 0.625rem; + height: 0.75rem; + width: 0.75rem; + border-radius: 9999px; + --tw-bg-opacity: 1; + background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1)); + --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.dark-mode-toggle-premium .online-indicator { + box-shadow: + 0 10px 15px -3px rgba(0, 0, 0, 0.1), + 0 4px 6px -2px rgba(0, 0, 0, 0.05); +} + +.dark .dark-mode-toggle-premium .online-indicator { + box-shadow: + 0 10px 15px -3px rgba(0, 0, 0, 0.3), + 0 4px 6px -2px rgba(0, 0, 0, 0.2); +} + +.dark-mode-toggle-premium .online-indicator { + box-shadow: + 0 10px 15px -3px rgba(0, 0, 0, 0.1), + 0 4px 6px -2px rgba(0, 0, 0, 0.05); +} + +.dark .dark-mode-toggle-premium .online-indicator { + box-shadow: + 0 10px 15px -3px rgba(0, 0, 0, 0.3), + 0 4px 6px -2px rgba(0, 0, 0, 0.2); +} + +.online-indicator { + box-shadow: 0 0 0 rgba(16, 185, 129, 0.6); + animation: pulse-ring 2s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite; +} + +@keyframes pulse-ring { + 0% { + box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6); + } + + 70% { + box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); + } + + 100% { + box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); + } +} + +/* Header mit verbesserten Status-Anzeigen */ + +.status-overview-new { + display: flex; + flex-wrap: wrap; + gap: 0.75rem; + border-radius: 0.5rem; + border-width: 1px; + border-color: rgb(229 231 235 / 0.6); + background-color: rgb(255 255 255 / 0.6); + padding: 0.75rem; + font-size: 0.75rem; + line-height: 1rem; + --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + --tw-backdrop-blur: blur(24px); + -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); + backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); +} + +.dark-mode-toggle-premium .status-overview-new { + box-shadow: + 0 10px 15px -3px rgba(0, 0, 0, 0.1), + 0 4px 6px -2px rgba(0, 0, 0, 0.05); +} + +.dark .dark-mode-toggle-premium .status-overview-new { + box-shadow: + 0 10px 15px -3px rgba(0, 0, 0, 0.3), + 0 4px 6px -2px rgba(0, 0, 0, 0.2); +} + +.dark-mode-toggle-premium .status-overview-new { + box-shadow: + 0 10px 15px -3px rgba(0, 0, 0, 0.1), + 0 4px 6px -2px rgba(0, 0, 0, 0.05); +} + +.dark .dark-mode-toggle-premium .status-overview-new { + box-shadow: + 0 10px 15px -3px rgba(0, 0, 0, 0.3), + 0 4px 6px -2px rgba(0, 0, 0, 0.2); +} + +.status-overview-new:is(.dark *) { + border-color: rgb(51 65 85 / 0.3); + background-color: rgb(30 41 59 / 0.6); +} + +@media (min-width: 640px) { + .status-overview-new { + font-size: 0.875rem; + line-height: 1.25rem; + } +} + +.status-overview-new { + box-shadow: + 0 10px 25px rgba(0, 0, 0, 0.04), + 0 5px 10px rgba(0, 0, 0, 0.02), + 0 0 0 1px rgba(255, 255, 255, 0.1); +} + +.dark .status-overview-new { + box-shadow: + 0 10px 25px rgba(0, 0, 0, 0.15), + 0 5px 10px rgba(0, 0, 0, 0.1), + 0 0 0 1px rgba(255, 255, 255, 0.03); +} + +.status-dot { + height: 0.625rem; + width: 0.625rem; + border-radius: 9999px; +} + +.status-dot.online { + --tw-bg-opacity: 1; + background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1)); + animation: pulse-dot 2s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite; +} + +.status-dot.offline { + --tw-bg-opacity: 1; + background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1)); +} + +@keyframes pulse-dot { + 0% { + transform: scale(0.95); + opacity: 1; + } + + 50% { + transform: scale(1.1); + opacity: 0.8; + } + + 100% { + transform: scale(0.95); + opacity: 1; + } +} + +/* Verbesserte Modals mit Glassmorphism */ + +.modal-new { + position: fixed; + inset: 0px; + z-index: 50; + display: flex; + align-items: center; + justify-content: center; + background-color: rgb(0 0 0 / 0.4); + padding: 1rem; + --tw-backdrop-blur: blur(4px); + -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); + backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); +} + +.modal-content-new { + width: 100%; + max-width: 28rem; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + border-radius: 1rem; + border-width: 1px; + border-color: rgb(229 231 235 / 0.6); + background-color: rgb(255 255 255 / 0.9); + padding: 1.5rem; + --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); + --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + --tw-backdrop-blur: blur(40px); + -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); + backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); + transition-property: all; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 300ms; +} + +.modal-content-new:is(.dark *) { + border-color: rgb(51 65 85 / 0.3); + background-color: rgb(30 41 59 / 0.9); +} + +.modal-content-new { + box-shadow: + 0 25px 50px rgba(0, 0, 0, 0.15), + 0 15px 30px rgba(0, 0, 0, 0.1), + 0 0 0 1px rgba(255, 255, 255, 0.1); + animation: modal-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); +} + +.dark .modal-content-new { + box-shadow: + 0 25px 50px rgba(0, 0, 0, 0.4), + 0 15px 30px rgba(0, 0, 0, 0.3), + 0 0 0 1px rgba(255, 255, 255, 0.05); +} + +@keyframes modal-in { + 0% { + opacity: 0; + transform: scale(0.95) translateY(10px); + } + + 100% { + opacity: 1; + transform: scale(1) translateY(0); + } +} + +/* Verbesserte Input-Felder für Modals */ + +.input-new { + width: 100%; + border-radius: 0.5rem; + border-width: 1px; + border-color: rgb(209 213 219 / 0.6); + background-color: rgb(255 255 255 / 0.7); + padding-left: 0.75rem; + padding-right: 0.75rem; + padding-top: 0.625rem; + padding-bottom: 0.625rem; + --tw-text-opacity: 1; + color: rgb(15 23 42 / var(--tw-text-opacity, 1)); + --tw-backdrop-blur: blur(16px); + -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); + backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); + transition-property: all; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 200ms; +} + +.input-new:focus { + border-color: transparent; + outline: 2px solid transparent; + outline-offset: 2px; + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); + --tw-ring-opacity: 1; + --tw-ring-color: rgb(0 0 0 / var(--tw-ring-opacity, 1)); +} + +.input-new:is(.dark *) { + border-color: rgb(71 85 105 / 0.6); + background-color: rgb(51 65 85 / 0.7); + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity, 1)); +} + +.input-new:focus:is(.dark *) { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity, 1)); +} + +.input-new { + backdrop-filter: blur(16px); + -webkit-backdrop-filter: blur(16px); + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); +} + +.dark .input-new { + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); +} + +/* Verbesserte Form-Labels */ + +.form-label-new { + margin-bottom: 0.5rem; + display: block; + font-size: 0.875rem; + line-height: 1.25rem; + font-weight: 500; + --tw-text-opacity: 1; + color: rgb(15 23 42 / var(--tw-text-opacity, 1)); +} + +.form-label-new:is(.dark *) { + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity, 1)); +} + +/* Dark Mode Toggle - Premium Design */ + +.dark-mode-toggle-premium { + position: relative; + cursor: pointer; + outline: 2px solid transparent; + outline-offset: 2px; +} + +.dark-mode-toggle-premium:focus { + outline: 2px solid transparent; + outline-offset: 2px; +} + +.dark-mode-toggle-premium { + z-index: 100; + /* Stellt sicher, dass der Button über anderen Elementen liegt */ +} + +.dark-mode-toggle-premium:focus-visible { + border-radius: 9999px; + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); + --tw-ring-opacity: 1; + --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1)); + --tw-ring-offset-width: 2px; +} + +.dark-mode-toggle-premium:focus-visible:is(.dark *) { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity, 1)); + --tw-ring-offset-color: #0f172a; +} + +/* Animationen für verzögerte Pulse-Effekte */ + +@keyframes delayed-pulse { + 0%, 100% { + opacity: 1; + } + + 50% { + opacity: 0.5; + } +} + +.animation-delay-500 { + animation-delay: 0.5s; + animation: delayed-pulse 2s ease-in-out infinite; +} + +.animation-delay-1000 { + animation-delay: 1s; + animation: delayed-pulse 2s ease-in-out infinite; +} + +.animation-delay-1500 { + animation-delay: 1.5s; + animation: delayed-pulse 2s ease-in-out infinite; +} + +/* Improved icon transitions */ + +.dark-mode-toggle-premium .sun-icon, +.dark-mode-toggle-premium .moon-icon { + transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); +} + +/* Glassmorphism effect for better visual depth */ + +.dark-mode-toggle-premium .backdrop-blur-md { + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); +} + +/* Enhanced hover effects */ + +.dark-mode-toggle-premium:hover .sun-icon svg, +.dark-mode-toggle-premium:hover .moon-icon svg { + filter: drop-shadow(0 0 8px currentColor); + transform: scale(1.1); +} + +/* Smooth gradient transitions */ + +.dark-mode-toggle-premium .bg-gradient-to-r { + transition: opacity 0.5s ease-in-out; +} + +/* Better shadow effects */ + +.dark-mode-toggle-premium .shadow-lg { + box-shadow: + 0 10px 15px -3px rgba(0, 0, 0, 0.1), + 0 4px 6px -2px rgba(0, 0, 0, 0.05); +} + +.dark .dark-mode-toggle-premium .shadow-lg { + box-shadow: + 0 10px 15px -3px rgba(0, 0, 0, 0.3), + 0 4px 6px -2px rgba(0, 0, 0, 0.2); +} + +/* Rotation animation for smooth icon transitions */ + +@keyframes icon-rotate-in { + 0% { + opacity: 0; + transform: rotate(-90deg) scale(0.8); + } + + 100% { + opacity: 1; + transform: rotate(0deg) scale(1); + } +} + +.dark-mode-toggle-premium .sun-icon.icon-enter, +.dark-mode-toggle-premium .moon-icon.icon-enter { + animation: icon-rotate-in 0.5s ease-out forwards; +} + +/* Active state animation */ + +.dark-mode-toggle-premium:active > div { + transform: scale(0.95); + transition: transform 0.1s ease-out; +} + +/* User Menu Button - Neues Design */ + +.user-menu-button-new { + display: flex; + align-items: center; +} + +.user-menu-button-new > :not([hidden]) ~ :not([hidden]) { + --tw-space-x-reverse: 0; + margin-right: calc(0.5rem * var(--tw-space-x-reverse)); + margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse))); +} + +.user-menu-button-new { + border-radius: 0.5rem; + padding: 0.375rem; + transition-property: all; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 300ms; + background: rgba(241, 245, 249, 0.6); + border: 1px solid rgba(255, 255, 255, 0.6); + box-shadow: + 0 2px 10px rgba(0, 0, 0, 0.04), + 0 1px 2px rgba(0, 0, 0, 0.02); +} + +.user-menu-button-new:hover { + --tw-translate-y: -0.125rem; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + background: rgba(241, 245, 249, 0.8); + box-shadow: + 0 10px 20px rgba(0, 0, 0, 0.06), + 0 2px 6px rgba(0, 0, 0, 0.04); +} + +.dark .user-menu-button-new { + background: rgba(30, 41, 59, 0.6); + border: 1px solid rgba(255, 255, 255, 0.08); + box-shadow: + 0 2px 10px rgba(0, 0, 0, 0.15), + 0 1px 2px rgba(0, 0, 0, 0.1); +} + +.dark .user-menu-button-new:hover { + background: rgba(30, 41, 59, 0.8); + box-shadow: + 0 10px 20px rgba(0, 0, 0, 0.15), + 0 2px 6px rgba(0, 0, 0, 0.1); +} + +/* User Avatar - Neues Design */ + +.user-avatar-new { + display: flex; + height: 2rem; + width: 2rem; + align-items: center; + justify-content: center; + border-radius: 9999px; + font-size: 0.875rem; + line-height: 1.25rem; + font-weight: 600; + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity, 1)); + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + transition-property: all; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 300ms; + background: linear-gradient(135deg, #000000, #333333); + box-shadow: + 0 2px 6px rgba(0, 0, 0, 0.2), + 0 1px 3px rgba(0, 0, 0, 0.1); +} + +.dark .user-avatar-new { + background: linear-gradient(135deg, #f8fafc, #e2e8f0); + color: #0f172a; + box-shadow: + 0 2px 6px rgba(0, 0, 0, 0.3), + 0 1px 3px rgba(0, 0, 0, 0.2); +} + +/* Login Button - Neues Design */ + +.login-button-new { + display: flex; + align-items: center; + border-radius: 0.5rem; + padding-left: 1rem; + padding-right: 1rem; + padding-top: 0.5rem; + padding-bottom: 0.5rem; + font-size: 0.875rem; + line-height: 1.25rem; + font-weight: 500; + --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); + --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + transition-property: all; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 300ms; + background: #000000; + color: #ffffff; + border: 1px solid rgba(255, 255, 255, 0.1); + box-shadow: + 0 2px 10px rgba(0, 0, 0, 0.1), + 0 1px 2px rgba(0, 0, 0, 0.08); +} + +.login-button-new:hover { + --tw-translate-y: -0.125rem; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + background: #333333; + box-shadow: + 0 10px 20px rgba(0, 0, 0, 0.15), + 0 3px 6px rgba(0, 0, 0, 0.1); +} + +.dark .login-button-new { + background: #ffffff; + color: #000000; + border: 1px solid rgba(0, 0, 0, 0.1); + box-shadow: + 0 2px 10px rgba(0, 0, 0, 0.2), + 0 1px 2px rgba(0, 0, 0, 0.15); +} + +.dark .login-button-new:hover { + background: #f1f5f9; + box-shadow: + 0 10px 20px rgba(0, 0, 0, 0.25), + 0 3px 6px rgba(0, 0, 0, 0.2); +} + +/* Mobile Menu - Neues Design */ + +.mobile-menu-new { + z-index: 40; + width: 100%; + overflow: hidden; + transition-property: all; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 300ms; + background: rgba(255, 255, 255, 0.8); + backdrop-filter: blur(24px); + -webkit-backdrop-filter: blur(24px); + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06); + border-bottom: 1px solid rgba(241, 245, 249, 0.8); + max-height: 0; + opacity: 0; +} + +.mobile-menu-new.open { + max-height: 500px; + opacity: 1; + border-bottom: 1px solid rgba(241, 245, 249, 0.8); +} + +.dark .mobile-menu-new { + background: rgba(15, 23, 42, 0.8); + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); + border-bottom: 1px solid rgba(30, 41, 59, 0.8); +} + +.mobile-nav-item { + display: flex; + align-items: center; +} + +.mobile-nav-item > :not([hidden]) ~ :not([hidden]) { + --tw-space-x-reverse: 0; + margin-right: calc(0.75rem * var(--tw-space-x-reverse)); + margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse))); +} + +.mobile-nav-item { + border-radius: 0.5rem; + padding-left: 1rem; + padding-right: 1rem; + padding-top: 0.75rem; + padding-bottom: 0.75rem; + --tw-text-opacity: 1; + color: rgb(30 41 59 / var(--tw-text-opacity, 1)); + transition-property: all; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 300ms; +} + +.mobile-nav-item:is(.dark *) { + --tw-text-opacity: 1; + color: rgb(226 232 240 / var(--tw-text-opacity, 1)); +} + +.mobile-nav-item:hover { + background: rgba(241, 245, 249, 0.8); +} + +.dark .mobile-nav-item:hover { + background: rgba(30, 41, 59, 0.6); +} + +.mobile-nav-item.active { + background: rgba(241, 245, 249, 0.9); + color: #000000; + font-weight: 500; +} + +.dark .mobile-nav-item.active { + background: rgba(30, 41, 59, 0.8); + color: #ffffff; +} + +/* Dashboard Stat Cards mit schwarzem Hintergrund im Dark Mode */ + +.mb-stat-card { + background: linear-gradient(135deg, rgba(240, 249, 255, 0.6) 0%, rgba(230, 242, 255, 0.6) 100%); + color: #0f172a; + position: relative; + overflow: hidden; + border: none; + border-radius: var(--card-radius); + backdrop-filter: blur(20px) saturate(180%) brightness(110%); + -webkit-backdrop-filter: blur(20px) saturate(180%) brightness(110%); + box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.1); + padding: 1.5rem; + margin: 1rem; + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.dark .mb-stat-card { + background: linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, rgba(10, 10, 10, 0.7) 100%); + color: var(--text-primary, #f8fafc); + box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.05); +} + +/* Stats und Jobs Page Card Styles */ + +.stats-card, .job-card { + border-radius: 0.75rem; + border-width: 1px; + border-color: rgb(229 231 235 / 0.7); + background-color: rgb(255 255 255 / 0.6); + --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); + --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + --tw-backdrop-blur: blur(40px); + -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); + backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); + transition-property: all; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 300ms; +} + +.stats-card:is(.dark *), .job-card:is(.dark *) { + border-color: rgb(51 65 85 / 0.2); + background-color: rgb(0 0 0 / 0.8); +} + +.stats-card, .job-card { + backdrop-filter: blur(24px) saturate(200%) brightness(120%); + -webkit-backdrop-filter: blur(24px) saturate(200%) brightness(120%); + box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.1); + border-radius: var(--card-radius); +} + +/* Footer Styling - Verstärktes Glassmorphism */ + +footer { + transition-property: all; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 300ms; + background: rgba(255, 255, 255, 0.1); + backdrop-filter: blur(30px) saturate(180%) brightness(120%); + -webkit-backdrop-filter: blur(30px) saturate(180%) brightness(120%); + border-top: 1px solid rgba(255, 255, 255, 0.2); + box-shadow: + 0 -8px 32px rgba(0, 0, 0, 0.1), + 0 -2px 8px rgba(0, 0, 0, 0.05), + inset 0 1px 0 rgba(255, 255, 255, 0.2), + 0 0 0 1px rgba(255, 255, 255, 0.05); +} + +.dark footer { + background: rgba(0, 0, 0, 0.3); + backdrop-filter: blur(30px) saturate(160%) brightness(110%); + -webkit-backdrop-filter: blur(30px) saturate(160%) brightness(110%); + border-top: 1px solid rgba(255, 255, 255, 0.1); + box-shadow: + 0 -8px 32px rgba(0, 0, 0, 0.3), + 0 -2px 8px rgba(0, 0, 0, 0.2), + inset 0 1px 0 rgba(255, 255, 255, 0.1), + 0 0 0 1px rgba(255, 255, 255, 0.03); +} + +/* Dropdown Pfeil Animation */ + +.dropdown-arrow { + transition-property: transform; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 300ms; +} + +/* Mercedes-Benz Hintergrund mit Star-Pattern */ + +.mercedes-star-bg { + position: relative; +} + +.mercedes-star-bg::after { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' width='80' height='80' opacity='0.05' fill='currentColor'%3E%3Cpath d='M58.6,4.5C53,1.6,46.7,0,40,0c-6.7,0-13,1.6-18.6,4.5v0C8.7,11.2,0,24.6,0,40c0,15.4,8.7,28.8,21.5,35.5C27,78.3,33.3,80,40,80c6.7,0,12.9-1.7,18.5-4.6C71.3,68.8,80,55.4,80,40C80,24.6,71.3,11.2,58.6,4.5z M4,40c0-13.1,7-24.5,17.5-30.9v0C26.6,6,32.5,4.2,39,4l-4.5,32.7L21.5,46.8v0L8.3,57.1C5.6,52,4,46.2,4,40z M58.6,70.8C53.1,74.1,46.8,76,40,76c-6.8,0-13.2-1.9-18.6-5.2c-4.9-2.9-8.9-6.9-11.9-11.7l11.9-4.9v0L40,46.6l18.6,7.5v0l12,4.9C67.6,63.9,63.4,67.9,58.6,70.8z M58.6,46.8L58.6,46.8l-12.9-10L41.1,4c6.3,0.2,12.3,2,17.4,5.1v0C69,15.4,76,26.9,76,40c0,6.2-1.5,12-4.3,17.1L58.6,46.8z'/%3E%3C/svg%3E"); + background-position: center; + background-repeat: repeat; + background-size: 40px 40px; + z-index: -1; + opacity: 0.05; +} + +.dark .mercedes-star-bg::after { + opacity: 0.02; + filter: invert(1) brightness(0.4); +} + +/* Zusätzliche Glassmorphism-Verbesserungen */ + +.glass-effect { + backdrop-filter: blur(20px) saturate(180%) brightness(110%); + -webkit-backdrop-filter: blur(20px) saturate(180%) brightness(110%); + background: rgba(255, 255, 255, 0.1); + border: 1px solid rgba(255, 255, 255, 0.2); + box-shadow: + 0 8px 32px rgba(0, 0, 0, 0.1), + inset 0 1px 0 rgba(255, 255, 255, 0.3); +} + +.dark .glass-effect { + background: rgba(0, 0, 0, 0.3); + border: 1px solid rgba(255, 255, 255, 0.1); + box-shadow: + 0 8px 32px rgba(0, 0, 0, 0.3), + inset 0 1px 0 rgba(255, 255, 255, 0.15); +} + +/* Verbesserte Hover-Effekte für alle interaktiven Elemente */ + +.glass-hover { + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); +} + +.glass-hover:hover { + transform: translateY(-2px); + backdrop-filter: blur(25px) saturate(200%) brightness(120%); + -webkit-backdrop-filter: blur(25px) saturate(200%) brightness(120%); + box-shadow: + 0 20px 40px rgba(0, 0, 0, 0.15), + 0 8px 16px rgba(0, 0, 0, 0.1), + inset 0 1px 0 rgba(255, 255, 255, 0.4); +} + +.dark .glass-hover:hover { + box-shadow: + 0 20px 40px rgba(0, 0, 0, 0.4), + 0 8px 16px rgba(0, 0, 0, 0.3), + inset 0 1px 0 rgba(255, 255, 255, 0.2); +} + +/* Neue verbesserte Drucker-Karten für die Drucker-Ansicht */ + +.printer-card-new { + position: relative; + overflow: hidden; + border-radius: 0.75rem; + border-width: 1px; + border-color: rgb(229 231 235 / 0.7); + background-image: linear-gradient(to bottom right, var(--tw-gradient-stops)); + --tw-gradient-from: rgb(255 255 255 / 0.9) var(--tw-gradient-from-position); + --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); + --tw-gradient-to: rgb(255 255 255 / 0.7) var(--tw-gradient-to-position); + padding: 1.25rem; + --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); + --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + --tw-backdrop-blur: blur(40px); + -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); + backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); + transition-property: all; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 300ms; +} + +.printer-card-new:hover { + --tw-translate-y: -0.25rem; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.printer-card-new:is(.dark *) { + border-color: rgb(51 65 85 / 0.3); + --tw-gradient-from: rgb(30 41 59 / 0.9) var(--tw-gradient-from-position); + --tw-gradient-to: rgb(30 41 59 / 0) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); + --tw-gradient-to: rgb(15 23 42 / 0.7) var(--tw-gradient-to-position); +} + +.printer-card-new { + box-shadow: + 0 20px 40px rgba(0, 0, 0, 0.08), + 0 10px 20px rgba(0, 0, 0, 0.06), + 0 0 0 1px rgba(255, 255, 255, 0.1); + border-radius: var(--card-radius, 1rem); +} + +.dark .printer-card-new { + box-shadow: + 0 20px 40px rgba(0, 0, 0, 0.4), + 0 10px 20px rgba(0, 0, 0, 0.3), + 0 0 0 1px rgba(255, 255, 255, 0.05); +} + +/* Online Drucker-Karten mit stärkerem visuellen Unterschied */ + +.printer-card-new.online { + --tw-border-opacity: 1; + border-color: rgb(187 247 208 / var(--tw-border-opacity, 1)); + background-image: linear-gradient(to bottom right, var(--tw-gradient-stops)); + --tw-gradient-from: rgb(240 253 244 / 0.9) var(--tw-gradient-from-position); + --tw-gradient-to: rgb(240 253 244 / 0) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); + --tw-gradient-to: rgb(236 253 245 / 0.8) var(--tw-gradient-to-position); +} + +.printer-card-new.online:is(.dark *) { + border-color: rgb(21 128 61 / 0.5); + --tw-gradient-from: rgb(20 83 45 / 0.3) var(--tw-gradient-from-position); + --tw-gradient-to: rgb(20 83 45 / 0) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); + --tw-gradient-to: rgb(6 78 59 / 0.2) var(--tw-gradient-to-position); +} + +.printer-card-new.online { + box-shadow: + 0 20px 40px rgba(0, 122, 85, 0.08), + 0 10px 20px rgba(0, 122, 85, 0.06), + 0 0 0 1px rgba(209, 250, 229, 0.4); +} + +.dark .printer-card-new.online { + box-shadow: + 0 20px 40px rgba(0, 0, 0, 0.3), + 0 10px 20px rgba(0, 0, 0, 0.2), + 0 0 0 1px rgba(16, 185, 129, 0.2); +} + +/* Status-Badge mit verbesserten Styles */ + +.status-badge-new { + display: inline-flex; + align-items: center; +} + +.status-badge-new > :not([hidden]) ~ :not([hidden]) { + --tw-space-x-reverse: 0; + margin-right: calc(0.25rem * var(--tw-space-x-reverse)); + margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse))); +} + +.status-badge-new { + border-radius: 9999px; + padding-left: 0.625rem; + padding-right: 0.625rem; + padding-top: 0.25rem; + padding-bottom: 0.25rem; + font-size: 0.75rem; + line-height: 1rem; + font-weight: 500; + --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); + --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + background: rgba(255, 255, 255, 0.9); + backdrop-filter: blur(8px); + -webkit-backdrop-filter: blur(8px); + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); +} + +.dark .status-badge-new { + background: rgba(30, 41, 59, 0.7); + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); +} + +.status-badge-new.online { + background-color: rgb(220 252 231 / 0.9); + --tw-text-opacity: 1; + color: rgb(22 101 52 / var(--tw-text-opacity, 1)); +} + +.status-badge-new.online:is(.dark *) { + background-color: rgb(20 83 45 / 0.6); + --tw-text-opacity: 1; + color: rgb(134 239 172 / var(--tw-text-opacity, 1)); +} + +.status-badge-new.offline { + background-color: rgb(254 226 226 / 0.9); + --tw-text-opacity: 1; + color: rgb(153 27 27 / var(--tw-text-opacity, 1)); +} + +.status-badge-new.offline:is(.dark *) { + background-color: rgb(127 29 29 / 0.6); + --tw-text-opacity: 1; + color: rgb(252 165 165 / var(--tw-text-opacity, 1)); +} + +/* Verbesserte Filterleiste */ + +.filter-bar-new { + border-radius: 0.5rem; + border-width: 1px; + border-color: rgb(229 231 235 / 0.6); + background-color: rgb(255 255 255 / 0.8); + padding: 0.375rem; + --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + --tw-backdrop-blur: blur(24px); + -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); + backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); +} + +.filter-bar-new:is(.dark *) { + border-color: rgb(51 65 85 / 0.3); + background-color: rgb(30 41 59 / 0.8); +} + +.filter-bar-new { + box-shadow: + 0 10px 25px rgba(0, 0, 0, 0.05), + 0 5px 10px rgba(0, 0, 0, 0.03), + 0 0 0 1px rgba(255, 255, 255, 0.2); +} + +.dark .filter-bar-new { + box-shadow: + 0 10px 25px rgba(0, 0, 0, 0.2), + 0 5px 10px rgba(0, 0, 0, 0.15), + 0 0 0 1px rgba(255, 255, 255, 0.05); +} + +.filter-btn-new { + border-radius: 0.375rem; + padding-left: 0.875rem; + padding-right: 0.875rem; + padding-top: 0.5rem; + padding-bottom: 0.5rem; + font-size: 0.875rem; + line-height: 1.25rem; + font-weight: 500; + transition-property: all; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 300ms; +} + +.filter-btn-new.active { + --tw-bg-opacity: 1; + background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1)); + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity, 1)); + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.filter-btn-new.active:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); + --tw-text-opacity: 1; + color: rgb(15 23 42 / var(--tw-text-opacity, 1)); +} + +.filter-btn-new.active { + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); +} + +.dark .filter-btn-new.active { + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); +} + +/* Verbesserte Aktionsschaltflächen */ + +.action-btn-new { + display: flex; + align-items: center; + justify-content: center; + gap: 0.5rem; + border-radius: 0.5rem; + padding-left: 1rem; + padding-right: 1rem; + padding-top: 0.625rem; + padding-bottom: 0.625rem; + font-size: 0.875rem; + line-height: 1.25rem; + font-weight: 500; + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + transition-property: all; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 300ms; +} + +.action-btn-new:hover { + --tw-translate-y: -0.125rem; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.action-btn-new { + backdrop-filter: blur(8px); + -webkit-backdrop-filter: blur(8px); +} + +.action-btn-new.primary { + --tw-bg-opacity: 1; + background-color: rgb(79 70 229 / var(--tw-bg-opacity, 1)); + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity, 1)); +} + +.action-btn-new.primary:hover { + --tw-bg-opacity: 1; + background-color: rgb(67 56 202 / var(--tw-bg-opacity, 1)); +} + +.action-btn-new.primary:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(79 70 229 / var(--tw-bg-opacity, 1)); +} + +.action-btn-new.primary:hover:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(99 102 241 / var(--tw-bg-opacity, 1)); +} + +.action-btn-new.primary { + box-shadow: 0 5px 15px rgba(79, 70, 229, 0.2); +} + +.dark .action-btn-new.primary { + box-shadow: 0 5px 15px rgba(79, 70, 229, 0.3); +} + +.action-btn-new.success { + --tw-bg-opacity: 1; + background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1)); + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity, 1)); +} + +.action-btn-new.success:hover { + --tw-bg-opacity: 1; + background-color: rgb(21 128 61 / var(--tw-bg-opacity, 1)); +} + +.action-btn-new.success:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1)); +} + +.action-btn-new.success:hover:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1)); +} + +.action-btn-new.success { + box-shadow: 0 5px 15px rgba(16, 185, 129, 0.2); +} + +.dark .action-btn-new.success { + box-shadow: 0 5px 15px rgba(16, 185, 129, 0.3); +} + +.action-btn-new.danger { + --tw-bg-opacity: 1; + background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1)); + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity, 1)); +} + +.action-btn-new.danger:hover { + --tw-bg-opacity: 1; + background-color: rgb(185 28 28 / var(--tw-bg-opacity, 1)); +} + +.action-btn-new.danger:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1)); +} + +.action-btn-new.danger:hover:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1)); +} + +.action-btn-new.danger { + box-shadow: 0 5px 15px rgba(239, 68, 68, 0.2); +} + +.dark .action-btn-new.danger { + box-shadow: 0 5px 15px rgba(239, 68, 68, 0.3); +} + +/* Informationszeilen in Drucker-Karten */ + +.printer-info-row { + margin-bottom: 0.375rem; + display: flex; + align-items: center; + gap: 0.5rem; + font-size: 0.75rem; + line-height: 1rem; + --tw-text-opacity: 1; + color: rgb(51 65 85 / var(--tw-text-opacity, 1)); +} + +.printer-info-row:is(.dark *) { + --tw-text-opacity: 1; + color: rgb(203 213 225 / var(--tw-text-opacity, 1)); +} + +@media (min-width: 640px) { + .printer-info-row { + font-size: 0.875rem; + line-height: 1.25rem; + } +} + +.printer-info-icon { + height: 0.875rem; + width: 0.875rem; + flex-shrink: 0; + --tw-text-opacity: 1; + color: rgb(100 116 139 / var(--tw-text-opacity, 1)); +} + +.printer-info-icon:is(.dark *) { + --tw-text-opacity: 1; + color: rgb(148 163 184 / var(--tw-text-opacity, 1)); +} + +@media (min-width: 640px) { + .printer-info-icon { + height: 1rem; + width: 1rem; + } +} + +/* Online-Indikator mit Pulseffekt */ + +.online-indicator { + position: absolute; + top: 0.625rem; + right: 0.625rem; + height: 0.75rem; + width: 0.75rem; + border-radius: 9999px; + --tw-bg-opacity: 1; + background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1)); + --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.dark-mode-toggle-premium .online-indicator { + box-shadow: + 0 10px 15px -3px rgba(0, 0, 0, 0.1), + 0 4px 6px -2px rgba(0, 0, 0, 0.05); +} + +.dark .dark-mode-toggle-premium .online-indicator { + box-shadow: + 0 10px 15px -3px rgba(0, 0, 0, 0.3), + 0 4px 6px -2px rgba(0, 0, 0, 0.2); +} + +.dark-mode-toggle-premium .online-indicator { + box-shadow: + 0 10px 15px -3px rgba(0, 0, 0, 0.1), + 0 4px 6px -2px rgba(0, 0, 0, 0.05); +} + +.dark .dark-mode-toggle-premium .online-indicator { + box-shadow: + 0 10px 15px -3px rgba(0, 0, 0, 0.3), + 0 4px 6px -2px rgba(0, 0, 0, 0.2); +} + +.online-indicator { + box-shadow: 0 0 0 rgba(16, 185, 129, 0.6); + animation: pulse-ring 2s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite; +} + +@keyframes pulse-ring { + 0% { + box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6); + } + + 70% { + box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); + } + + 100% { + box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); + } +} + +/* Header mit verbesserten Status-Anzeigen */ + +.status-overview-new { + display: flex; + flex-wrap: wrap; + gap: 0.75rem; + border-radius: 0.5rem; + border-width: 1px; + border-color: rgb(229 231 235 / 0.6); + background-color: rgb(255 255 255 / 0.6); + padding: 0.75rem; + font-size: 0.75rem; + line-height: 1rem; + --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + --tw-backdrop-blur: blur(24px); + -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); + backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); +} + +.dark-mode-toggle-premium .status-overview-new { + box-shadow: + 0 10px 15px -3px rgba(0, 0, 0, 0.1), + 0 4px 6px -2px rgba(0, 0, 0, 0.05); +} + +.dark .dark-mode-toggle-premium .status-overview-new { + box-shadow: + 0 10px 15px -3px rgba(0, 0, 0, 0.3), + 0 4px 6px -2px rgba(0, 0, 0, 0.2); +} + +.dark-mode-toggle-premium .status-overview-new { + box-shadow: + 0 10px 15px -3px rgba(0, 0, 0, 0.1), + 0 4px 6px -2px rgba(0, 0, 0, 0.05); +} + +.dark .dark-mode-toggle-premium .status-overview-new { + box-shadow: + 0 10px 15px -3px rgba(0, 0, 0, 0.3), + 0 4px 6px -2px rgba(0, 0, 0, 0.2); +} + +.status-overview-new:is(.dark *) { + border-color: rgb(51 65 85 / 0.3); + background-color: rgb(30 41 59 / 0.6); +} + +@media (min-width: 640px) { + .status-overview-new { + font-size: 0.875rem; + line-height: 1.25rem; + } +} + +.status-overview-new { + box-shadow: + 0 10px 25px rgba(0, 0, 0, 0.04), + 0 5px 10px rgba(0, 0, 0, 0.02), + 0 0 0 1px rgba(255, 255, 255, 0.1); +} + +.dark .status-overview-new { + box-shadow: + 0 10px 25px rgba(0, 0, 0, 0.15), + 0 5px 10px rgba(0, 0, 0, 0.1), + 0 0 0 1px rgba(255, 255, 255, 0.03); +} + +.status-dot { + height: 0.625rem; + width: 0.625rem; + border-radius: 9999px; +} + +.status-dot.online { + --tw-bg-opacity: 1; + background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1)); + animation: pulse-dot 2s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite; +} + +.status-dot.offline { + --tw-bg-opacity: 1; + background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1)); +} + +@keyframes pulse-dot { + 0% { + transform: scale(0.95); + opacity: 1; + } + + 50% { + transform: scale(1.1); + opacity: 0.8; + } + + 100% { + transform: scale(0.95); + opacity: 1; + } +} + +/* Verbesserte Modals mit Glassmorphism */ + +.modal-new { + position: fixed; + inset: 0px; + z-index: 50; + display: flex; + align-items: center; + justify-content: center; + background-color: rgb(0 0 0 / 0.4); + padding: 1rem; + --tw-backdrop-blur: blur(4px); + -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); + backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); +} + +.modal-content-new { + width: 100%; + max-width: 28rem; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + border-radius: 1rem; + border-width: 1px; + border-color: rgb(229 231 235 / 0.6); + background-color: rgb(255 255 255 / 0.9); + padding: 1.5rem; + --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); + --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + --tw-backdrop-blur: blur(40px); + -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); + backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); + transition-property: all; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 300ms; +} + +.modal-content-new:is(.dark *) { + border-color: rgb(51 65 85 / 0.3); + background-color: rgb(30 41 59 / 0.9); +} + +.modal-content-new { + box-shadow: + 0 25px 50px rgba(0, 0, 0, 0.15), + 0 15px 30px rgba(0, 0, 0, 0.1), + 0 20px 25px -5px rgba(0, 0, 0, 0.5), + 0 10px 10px -5px rgba(0, 0, 0, 0.3); +} + +/* User Dropdown Items */ + +.user-dropdown-item { + display: flex; + cursor: pointer; + align-items: center; + padding-left: 1rem; + padding-right: 1rem; + padding-top: 0.75rem; + padding-bottom: 0.75rem; + font-size: 0.875rem; + line-height: 1.25rem; + --tw-text-opacity: 1; + color: rgb(51 65 85 / var(--tw-text-opacity, 1)); + transition-property: all; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 200ms; +} + +.user-dropdown-item:hover { + --tw-bg-opacity: 1; + background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1)); +} + +.user-dropdown-item:is(.dark *) { + --tw-text-opacity: 1; + color: rgb(226 232 240 / var(--tw-text-opacity, 1)); +} + +.user-dropdown-item:hover:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1)); +} + +.user-dropdown-item:first-child { + border-top-left-radius: 0.75rem; + border-top-right-radius: 0.75rem; +} + +.user-dropdown-item:last-child { + border-bottom-right-radius: 0.75rem; + border-bottom-left-radius: 0.75rem; +} + +.user-dropdown-item:hover { + background: rgba(248, 250, 252, 0.8); + transform: translateX(2px); +} + +.dark .user-dropdown-item:hover { + background: rgba(30, 41, 59, 0.8); +} + +/* User Dropdown Icons */ + +.user-dropdown-icon { + margin-right: 0.75rem; + height: 1rem; + width: 1rem; + --tw-text-opacity: 1; + color: rgb(100 116 139 / var(--tw-text-opacity, 1)); + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 200ms; +} + +.user-dropdown-icon:is(.dark *) { + --tw-text-opacity: 1; + color: rgb(148 163 184 / var(--tw-text-opacity, 1)); +} + +.user-dropdown-item:hover .user-dropdown-icon { + --tw-text-opacity: 1; + color: rgb(51 65 85 / var(--tw-text-opacity, 1)); +} + +.user-dropdown-item:hover .user-dropdown-icon:is(.dark *) { + --tw-text-opacity: 1; + color: rgb(226 232 240 / var(--tw-text-opacity, 1)); +} + +/* Divider in User Dropdown */ + +.user-dropdown-divider { + margin-top: 0.25rem; + margin-bottom: 0.25rem; + border-top-width: 1px; + --tw-border-opacity: 1; + border-color: rgb(226 232 240 / var(--tw-border-opacity, 1)); +} + +.user-dropdown-divider:is(.dark *) { + --tw-border-opacity: 1; + border-color: rgb(51 65 85 / var(--tw-border-opacity, 1)); +} + +/* User Info Section in Dropdown */ + +.user-info-section { + border-bottom-width: 1px; + --tw-border-opacity: 1; + border-color: rgb(226 232 240 / var(--tw-border-opacity, 1)); + padding-left: 1rem; + padding-right: 1rem; + padding-top: 0.75rem; + padding-bottom: 0.75rem; +} + +.user-info-section:is(.dark *) { + --tw-border-opacity: 1; + border-color: rgb(51 65 85 / var(--tw-border-opacity, 1)); +} + +.user-info-section { + background: rgba(248, 250, 252, 0.5); +} + +.dark .user-info-section { + background: rgba(30, 41, 59, 0.5); +} + +.user-info-name { + font-size: 0.875rem; + line-height: 1.25rem; + font-weight: 600; + --tw-text-opacity: 1; + color: rgb(15 23 42 / var(--tw-text-opacity, 1)); +} + +.user-info-name:is(.dark *) { + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity, 1)); +} + +.user-info-role { + margin-top: 0.25rem; + font-size: 0.75rem; + line-height: 1rem; + --tw-text-opacity: 1; + color: rgb(100 116 139 / var(--tw-text-opacity, 1)); +} + +.user-info-role:is(.dark *) { + --tw-text-opacity: 1; + color: rgb(148 163 184 / var(--tw-text-opacity, 1)); +} + +.dark\:bg-dark-surface:is(.dark *) { + background-color: #1e293b; +} + +.hover\:-translate-y-0:hover { + --tw-translate-y: -0px; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.hover\:-translate-y-0\.5:hover { + --tw-translate-y: -0.125rem; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.hover\:-translate-y-1:hover { + --tw-translate-y: -0.25rem; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.hover\:-translate-y-2:hover { + --tw-translate-y: -0.5rem; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.hover\:rotate-12:hover { + --tw-rotate: 12deg; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.hover\:scale-105:hover { + --tw-scale-x: 1.05; + --tw-scale-y: 1.05; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.hover\:scale-110:hover { + --tw-scale-x: 1.1; + --tw-scale-y: 1.1; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.hover\:bg-black\/70:hover { + background-color: rgb(0 0 0 / 0.7); +} + +.hover\:bg-blue-600:hover { + --tw-bg-opacity: 1; + background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1)); +} + +.hover\:bg-blue-700:hover { + --tw-bg-opacity: 1; + background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1)); +} + +.hover\:bg-gray-100:hover { + --tw-bg-opacity: 1; + background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1)); +} + +.hover\:bg-gray-100\/80:hover { + background-color: rgb(243 244 246 / 0.8); +} + +.hover\:bg-gray-300:hover { + --tw-bg-opacity: 1; + background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1)); +} + +.hover\:bg-gray-400:hover { + --tw-bg-opacity: 1; + background-color: rgb(156 163 175 / var(--tw-bg-opacity, 1)); +} + +.hover\:bg-gray-50:hover { + --tw-bg-opacity: 1; + background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1)); +} + +.hover\:bg-gray-600:hover { + --tw-bg-opacity: 1; + background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1)); +} + +.hover\:bg-gray-800:hover { + --tw-bg-opacity: 1; + background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1)); +} + +.hover\:bg-green-600:hover { + --tw-bg-opacity: 1; + background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1)); +} + +.hover\:bg-green-700:hover { + --tw-bg-opacity: 1; + background-color: rgb(21 128 61 / var(--tw-bg-opacity, 1)); +} + +.hover\:bg-indigo-600:hover { + --tw-bg-opacity: 1; + background-color: rgb(79 70 229 / var(--tw-bg-opacity, 1)); +} + +.hover\:bg-indigo-600\/20:hover { + background-color: rgb(79 70 229 / 0.2); +} + +.hover\:bg-indigo-700:hover { + --tw-bg-opacity: 1; + background-color: rgb(67 56 202 / var(--tw-bg-opacity, 1)); +} + +.hover\:bg-orange-600:hover { + --tw-bg-opacity: 1; + background-color: rgb(234 88 12 / var(--tw-bg-opacity, 1)); +} + +.hover\:bg-purple-600:hover { + --tw-bg-opacity: 1; + background-color: rgb(147 51 234 / var(--tw-bg-opacity, 1)); +} + +.hover\:bg-red-50:hover { + --tw-bg-opacity: 1; + background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1)); +} + +.hover\:bg-red-600:hover { + --tw-bg-opacity: 1; + background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1)); +} + +.hover\:bg-red-700:hover { + --tw-bg-opacity: 1; + background-color: rgb(185 28 28 / var(--tw-bg-opacity, 1)); +} + +.hover\:bg-slate-100:hover { + --tw-bg-opacity: 1; + background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1)); +} + +.hover\:bg-slate-100\/80:hover { + background-color: rgb(241 245 249 / 0.8); +} + +.hover\:bg-slate-200:hover { + --tw-bg-opacity: 1; + background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1)); +} + +.hover\:bg-slate-300:hover { + --tw-bg-opacity: 1; + background-color: rgb(203 213 225 / var(--tw-bg-opacity, 1)); +} + +.hover\:bg-slate-50:hover { + --tw-bg-opacity: 1; + background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1)); +} + +.hover\:bg-slate-600:hover { + --tw-bg-opacity: 1; + background-color: rgb(71 85 105 / var(--tw-bg-opacity, 1)); +} + +.hover\:bg-teal-600:hover { + --tw-bg-opacity: 1; + background-color: rgb(13 148 136 / var(--tw-bg-opacity, 1)); +} + +.hover\:bg-white:hover { + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); +} + +.hover\:bg-white\/20:hover { + background-color: rgb(255 255 255 / 0.2); +} + +.hover\:bg-white\/50:hover { + background-color: rgb(255 255 255 / 0.5); +} + +.hover\:bg-yellow-600:hover { + --tw-bg-opacity: 1; + background-color: rgb(202 138 4 / var(--tw-bg-opacity, 1)); +} + +.hover\:from-blue-600:hover { + --tw-gradient-from: #2563eb var(--tw-gradient-from-position); + --tw-gradient-to: rgb(37 99 235 / 0) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); +} + +.hover\:from-green-600:hover { + --tw-gradient-from: #16a34a var(--tw-gradient-from-position); + --tw-gradient-to: rgb(22 163 74 / 0) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); +} + +.hover\:from-red-600:hover { + --tw-gradient-from: #dc2626 var(--tw-gradient-from-position); + --tw-gradient-to: rgb(220 38 38 / 0) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); +} + +.hover\:from-slate-600:hover { + --tw-gradient-from: #475569 var(--tw-gradient-from-position); + --tw-gradient-to: rgb(71 85 105 / 0) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); +} + +.hover\:to-blue-700:hover { + --tw-gradient-to: #1d4ed8 var(--tw-gradient-to-position); +} + +.hover\:to-emerald-700:hover { + --tw-gradient-to: #047857 var(--tw-gradient-to-position); +} + +.hover\:to-green-700:hover { + --tw-gradient-to: #15803d var(--tw-gradient-to-position); +} + +.hover\:to-indigo-700:hover { + --tw-gradient-to: #4338ca var(--tw-gradient-to-position); +} + +.hover\:to-red-700:hover { + --tw-gradient-to: #b91c1c var(--tw-gradient-to-position); +} + +.hover\:to-slate-700:hover { + --tw-gradient-to: #334155 var(--tw-gradient-to-position); +} + +.hover\:text-blue-700:hover { + --tw-text-opacity: 1; + color: rgb(29 78 216 / var(--tw-text-opacity, 1)); +} + +.hover\:text-blue-800:hover { + --tw-text-opacity: 1; + color: rgb(30 64 175 / var(--tw-text-opacity, 1)); +} + +.hover\:text-blue-900:hover { + --tw-text-opacity: 1; + color: rgb(30 58 138 / var(--tw-text-opacity, 1)); +} + +.hover\:text-gray-500:hover { + --tw-text-opacity: 1; + color: rgb(107 114 128 / var(--tw-text-opacity, 1)); +} + +.hover\:text-gray-600:hover { + --tw-text-opacity: 1; + color: rgb(75 85 99 / var(--tw-text-opacity, 1)); +} + +.hover\:text-red-700:hover { + --tw-text-opacity: 1; + color: rgb(185 28 28 / var(--tw-text-opacity, 1)); +} + +.hover\:text-red-900:hover { + --tw-text-opacity: 1; + color: rgb(127 29 29 / var(--tw-text-opacity, 1)); +} + +.hover\:text-slate-600:hover { + --tw-text-opacity: 1; + color: rgb(71 85 105 / var(--tw-text-opacity, 1)); +} + +.hover\:text-slate-700:hover { + --tw-text-opacity: 1; + color: rgb(51 65 85 / var(--tw-text-opacity, 1)); +} + +.hover\:text-slate-900:hover { + --tw-text-opacity: 1; + color: rgb(15 23 42 / var(--tw-text-opacity, 1)); +} + +.hover\:text-white:hover { + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity, 1)); +} + +.hover\:underline:hover { + text-decoration-line: underline; +} + +.hover\:opacity-75:hover { + opacity: 0.75; +} + +.hover\:shadow-2xl:hover { + --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); + --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.hover\:shadow-lg:hover { + --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.hover\:shadow-md:hover { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.hover\:shadow-xl:hover { + --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.focus\:border-blue-500:focus { + --tw-border-opacity: 1; + border-color: rgb(59 130 246 / var(--tw-border-opacity, 1)); +} + +.focus\:border-blue-600:focus { + --tw-border-opacity: 1; + border-color: rgb(37 99 235 / var(--tw-border-opacity, 1)); +} + +.focus\:border-transparent:focus { + border-color: transparent; +} + +.focus\:bg-gray-100\/80:focus { + background-color: rgb(243 244 246 / 0.8); +} + +.focus\:outline-none:focus { + outline: 2px solid transparent; + outline-offset: 2px; +} + +.focus\:ring-2:focus { + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); +} + +.focus\:ring-4:focus { + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); +} + +.focus\:ring-black:focus { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(0 0 0 / var(--tw-ring-opacity, 1)); +} + +.focus\:ring-blue-500:focus { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1)); +} + +.focus\:ring-blue-500\/25:focus { + --tw-ring-color: rgb(59 130 246 / 0.25); +} + +.focus\:ring-blue-600:focus { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(37 99 235 / var(--tw-ring-opacity, 1)); +} + +.focus\:ring-gray-300:focus { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity, 1)); +} + +.focus\:ring-gray-500:focus { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(107 114 128 / var(--tw-ring-opacity, 1)); +} + +.focus\:ring-indigo-500:focus { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity, 1)); +} + +.focus\:ring-slate-500:focus { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(100 116 139 / var(--tw-ring-opacity, 1)); +} + +.focus\:ring-offset-2:focus { + --tw-ring-offset-width: 2px; +} + +.disabled\:cursor-not-allowed:disabled { + cursor: not-allowed; +} + +.disabled\:bg-gray-100:disabled { + --tw-bg-opacity: 1; + background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1)); +} + +.disabled\:opacity-50:disabled { + opacity: 0.5; +} + +.group:focus-within .group-focus-within\:text-blue-500 { + --tw-text-opacity: 1; + color: rgb(59 130 246 / var(--tw-text-opacity, 1)); +} + +.group:hover .group-hover\:rotate-12 { + --tw-rotate: 12deg; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.group:hover .group-hover\:rotate-180 { + --tw-rotate: 180deg; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.group:hover .group-hover\:rotate-90 { + --tw-rotate: 90deg; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.group:hover .group-hover\:scale-105 { + --tw-scale-x: 1.05; + --tw-scale-y: 1.05; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.group:hover .group-hover\:scale-110 { + --tw-scale-x: 1.1; + --tw-scale-y: 1.1; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.group:hover .group-hover\:text-blue-500 { + --tw-text-opacity: 1; + color: rgb(59 130 246 / var(--tw-text-opacity, 1)); +} + +.group:hover .group-hover\:text-slate-600 { + --tw-text-opacity: 1; + color: rgb(71 85 105 / var(--tw-text-opacity, 1)); +} + +.group:hover .group-hover\:opacity-100 { + opacity: 1; +} + +.group:active .group-active\:scale-95 { + --tw-scale-x: .95; + --tw-scale-y: .95; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.dark\:inline:is(.dark *) { + display: inline; +} + +.dark\:hidden:is(.dark *) { + display: none; +} + +.dark\:rotate-0:is(.dark *) { + --tw-rotate: 0deg; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.dark\:rotate-90:is(.dark *) { + --tw-rotate: 90deg; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.dark\:scale-100:is(.dark *) { + --tw-scale-x: 1; + --tw-scale-y: 1; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.dark\:scale-75:is(.dark *) { + --tw-scale-x: .75; + --tw-scale-y: .75; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.dark\:divide-gray-700:is(.dark *) > :not([hidden]) ~ :not([hidden]) { + --tw-divide-opacity: 1; + border-color: rgb(55 65 81 / var(--tw-divide-opacity, 1)); +} + +.dark\:divide-slate-700:is(.dark *) > :not([hidden]) ~ :not([hidden]) { + --tw-divide-opacity: 1; + border-color: rgb(51 65 85 / var(--tw-divide-opacity, 1)); +} + +.dark\:border-blue-500:is(.dark *) { + --tw-border-opacity: 1; + border-color: rgb(59 130 246 / var(--tw-border-opacity, 1)); +} + +.dark\:border-blue-700:is(.dark *) { + --tw-border-opacity: 1; + border-color: rgb(29 78 216 / var(--tw-border-opacity, 1)); +} + +.dark\:border-blue-800:is(.dark *) { + --tw-border-opacity: 1; + border-color: rgb(30 64 175 / var(--tw-border-opacity, 1)); +} + +.dark\:border-dark-border:is(.dark *) { + --tw-border-opacity: 1; + border-color: rgb(51 65 85 / var(--tw-border-opacity, 1)); +} + +.dark\:border-gray-600:is(.dark *) { + --tw-border-opacity: 1; + border-color: rgb(75 85 99 / var(--tw-border-opacity, 1)); +} + +.dark\:border-gray-700:is(.dark *) { + --tw-border-opacity: 1; + border-color: rgb(55 65 81 / var(--tw-border-opacity, 1)); +} + +.dark\:border-green-600:is(.dark *) { + --tw-border-opacity: 1; + border-color: rgb(22 163 74 / var(--tw-border-opacity, 1)); +} + +.dark\:border-green-700:is(.dark *) { + --tw-border-opacity: 1; + border-color: rgb(21 128 61 / var(--tw-border-opacity, 1)); +} + +.dark\:border-green-800\/30:is(.dark *) { + border-color: rgb(22 101 52 / 0.3); +} + +.dark\:border-indigo-400:is(.dark *) { + --tw-border-opacity: 1; + border-color: rgb(129 140 248 / var(--tw-border-opacity, 1)); +} + +.dark\:border-red-600:is(.dark *) { + --tw-border-opacity: 1; + border-color: rgb(220 38 38 / var(--tw-border-opacity, 1)); +} + +.dark\:border-red-700:is(.dark *) { + --tw-border-opacity: 1; + border-color: rgb(185 28 28 / var(--tw-border-opacity, 1)); +} + +.dark\:border-red-800:is(.dark *) { + --tw-border-opacity: 1; + border-color: rgb(153 27 27 / var(--tw-border-opacity, 1)); +} + +.dark\:border-slate-600:is(.dark *) { + --tw-border-opacity: 1; + border-color: rgb(71 85 105 / var(--tw-border-opacity, 1)); +} + +.dark\:border-slate-600\/30:is(.dark *) { + border-color: rgb(71 85 105 / 0.3); +} + +.dark\:border-slate-600\/50:is(.dark *) { + border-color: rgb(71 85 105 / 0.5); +} + +.dark\:border-slate-600\/60:is(.dark *) { + border-color: rgb(71 85 105 / 0.6); +} + +.dark\:border-slate-700:is(.dark *) { + --tw-border-opacity: 1; + border-color: rgb(51 65 85 / var(--tw-border-opacity, 1)); +} + +.dark\:border-slate-700\/20:is(.dark *) { + border-color: rgb(51 65 85 / 0.2); +} + +.dark\:border-slate-700\/30:is(.dark *) { + border-color: rgb(51 65 85 / 0.3); +} + +.dark\:border-slate-700\/50:is(.dark *) { + border-color: rgb(51 65 85 / 0.5); +} + +.dark\:border-white:is(.dark *) { + --tw-border-opacity: 1; + border-color: rgb(255 255 255 / var(--tw-border-opacity, 1)); +} + +.dark\:border-white\/70:is(.dark *) { + border-color: rgb(255 255 255 / 0.7); +} + +.dark\:border-yellow-700:is(.dark *) { + --tw-border-opacity: 1; + border-color: rgb(161 98 7 / var(--tw-border-opacity, 1)); +} + +.dark\:border-yellow-800:is(.dark *) { + --tw-border-opacity: 1; + border-color: rgb(133 77 14 / var(--tw-border-opacity, 1)); +} + +.dark\:border-t-slate-700:is(.dark *) { + --tw-border-opacity: 1; + border-top-color: rgb(51 65 85 / var(--tw-border-opacity, 1)); +} + +.dark\:bg-amber-600:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(217 119 6 / var(--tw-bg-opacity, 1)); +} + +.dark\:bg-black:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1)); +} + +.dark\:bg-black\/60:is(.dark *) { + background-color: rgb(0 0 0 / 0.6); +} + +.dark\:bg-black\/70:is(.dark *) { + background-color: rgb(0 0 0 / 0.7); +} + +.dark\:bg-black\/80:is(.dark *) { + background-color: rgb(0 0 0 / 0.8); +} + +.dark\:bg-blue-400:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(96 165 250 / var(--tw-bg-opacity, 1)); +} + +.dark\:bg-blue-500:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1)); +} + +.dark\:bg-blue-600:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1)); +} + +.dark\:bg-blue-600\/70:is(.dark *) { + background-color: rgb(37 99 235 / 0.7); +} + +.dark\:bg-blue-800:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(30 64 175 / var(--tw-bg-opacity, 1)); +} + +.dark\:bg-blue-900:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(30 58 138 / var(--tw-bg-opacity, 1)); +} + +.dark\:bg-blue-900\/20:is(.dark *) { + background-color: rgb(30 58 138 / 0.2); +} + +.dark\:bg-blue-900\/30:is(.dark *) { + background-color: rgb(30 58 138 / 0.3); +} + +.dark\:bg-dark-surface:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1)); +} + +.dark\:bg-gray-600:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1)); +} + +.dark\:bg-gray-700:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1)); +} + +.dark\:bg-gray-800:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1)); +} + +.dark\:bg-gray-900:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1)); +} + +.dark\:bg-green-400:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(74 222 128 / var(--tw-bg-opacity, 1)); +} + +.dark\:bg-green-600:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1)); +} + +.dark\:bg-green-600\/70:is(.dark *) { + background-color: rgb(22 163 74 / 0.7); +} + +.dark\:bg-green-700:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(21 128 61 / var(--tw-bg-opacity, 1)); +} + +.dark\:bg-green-800:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(22 101 52 / var(--tw-bg-opacity, 1)); +} + +.dark\:bg-green-900:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(20 83 45 / var(--tw-bg-opacity, 1)); +} + +.dark\:bg-green-900\/20:is(.dark *) { + background-color: rgb(20 83 45 / 0.2); +} + +.dark\:bg-green-900\/30:is(.dark *) { + background-color: rgb(20 83 45 / 0.3); +} + +.dark\:bg-green-900\/60:is(.dark *) { + background-color: rgb(20 83 45 / 0.6); +} + +.dark\:bg-indigo-600:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(79 70 229 / var(--tw-bg-opacity, 1)); +} + +.dark\:bg-indigo-700:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(67 56 202 / var(--tw-bg-opacity, 1)); +} + +.dark\:bg-orange-900:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(124 45 18 / var(--tw-bg-opacity, 1)); +} + +.dark\:bg-orange-900\/30:is(.dark *) { + background-color: rgb(124 45 18 / 0.3); +} + +.dark\:bg-purple-900:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(88 28 135 / var(--tw-bg-opacity, 1)); +} + +.dark\:bg-purple-900\/30:is(.dark *) { + background-color: rgb(88 28 135 / 0.3); +} + +.dark\:bg-red-600:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1)); +} + +.dark\:bg-red-600\/70:is(.dark *) { + background-color: rgb(220 38 38 / 0.7); +} + +.dark\:bg-red-800:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(153 27 27 / var(--tw-bg-opacity, 1)); +} + +.dark\:bg-red-900:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(127 29 29 / var(--tw-bg-opacity, 1)); +} + +.dark\:bg-red-900\/20:is(.dark *) { + background-color: rgb(127 29 29 / 0.2); +} + +.dark\:bg-red-900\/30:is(.dark *) { + background-color: rgb(127 29 29 / 0.3); +} + +.dark\:bg-red-900\/60:is(.dark *) { + background-color: rgb(127 29 29 / 0.6); +} + +.dark\:bg-slate-600:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(71 85 105 / var(--tw-bg-opacity, 1)); +} + +.dark\:bg-slate-700:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1)); +} + +.dark\:bg-slate-700\/30:is(.dark *) { + background-color: rgb(51 65 85 / 0.3); +} + +.dark\:bg-slate-700\/50:is(.dark *) { + background-color: rgb(51 65 85 / 0.5); +} + +.dark\:bg-slate-700\/60:is(.dark *) { + background-color: rgb(51 65 85 / 0.6); +} + +.dark\:bg-slate-700\/70:is(.dark *) { + background-color: rgb(51 65 85 / 0.7); +} + +.dark\:bg-slate-700\/90:is(.dark *) { + background-color: rgb(51 65 85 / 0.9); +} + +.dark\:bg-slate-800:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1)); +} + +.dark\:bg-slate-800\/50:is(.dark *) { + background-color: rgb(30 41 59 / 0.5); +} + +.dark\:bg-slate-800\/60:is(.dark *) { + background-color: rgb(30 41 59 / 0.6); +} + +.dark\:bg-slate-800\/70:is(.dark *) { + background-color: rgb(30 41 59 / 0.7); +} + +.dark\:bg-slate-800\/80:is(.dark *) { + background-color: rgb(30 41 59 / 0.8); +} + +.dark\:bg-slate-800\/90:is(.dark *) { + background-color: rgb(30 41 59 / 0.9); +} + +.dark\:bg-slate-900:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1)); +} + +.dark\:bg-slate-900\/50:is(.dark *) { + background-color: rgb(15 23 42 / 0.5); +} + +.dark\:bg-white:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); +} + +.dark\:bg-yellow-600\/70:is(.dark *) { + background-color: rgb(202 138 4 / 0.7); +} + +.dark\:bg-yellow-800:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(133 77 14 / var(--tw-bg-opacity, 1)); +} + +.dark\:bg-yellow-900:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(113 63 18 / var(--tw-bg-opacity, 1)); +} + +.dark\:bg-yellow-900\/20:is(.dark *) { + background-color: rgb(113 63 18 / 0.2); +} + +.dark\:bg-yellow-900\/30:is(.dark *) { + background-color: rgb(113 63 18 / 0.3); +} + +.dark\:bg-opacity-90:is(.dark *) { + --tw-bg-opacity: 0.9; +} + +.dark\:bg-opacity-95:is(.dark *) { + --tw-bg-opacity: 0.95; +} + +.dark\:from-blue-400:is(.dark *) { + --tw-gradient-from: #60a5fa var(--tw-gradient-from-position); + --tw-gradient-to: rgb(96 165 250 / 0) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); +} + +.dark\:from-blue-900\/20:is(.dark *) { + --tw-gradient-from: rgb(30 58 138 / 0.2) var(--tw-gradient-from-position); + --tw-gradient-to: rgb(30 58 138 / 0) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); +} + +.dark\:from-gray-900:is(.dark *) { + --tw-gradient-from: #111827 var(--tw-gradient-from-position); + --tw-gradient-to: rgb(17 24 39 / 0) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); +} + +.dark\:from-green-900\/20:is(.dark *) { + --tw-gradient-from: rgb(20 83 45 / 0.2) var(--tw-gradient-from-position); + --tw-gradient-to: rgb(20 83 45 / 0) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); +} + +.dark\:from-green-900\/30:is(.dark *) { + --tw-gradient-from: rgb(20 83 45 / 0.3) var(--tw-gradient-from-position); + --tw-gradient-to: rgb(20 83 45 / 0) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); +} + +.dark\:from-orange-900\/20:is(.dark *) { + --tw-gradient-from: rgb(124 45 18 / 0.2) var(--tw-gradient-from-position); + --tw-gradient-to: rgb(124 45 18 / 0) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); +} + +.dark\:from-purple-900\/20:is(.dark *) { + --tw-gradient-from: rgb(88 28 135 / 0.2) var(--tw-gradient-from-position); + --tw-gradient-to: rgb(88 28 135 / 0) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); +} + +.dark\:from-slate-800\/90:is(.dark *) { + --tw-gradient-from: rgb(30 41 59 / 0.9) var(--tw-gradient-from-position); + --tw-gradient-to: rgb(30 41 59 / 0) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); +} + +.dark\:from-slate-900:is(.dark *) { + --tw-gradient-from: #0f172a var(--tw-gradient-from-position); + --tw-gradient-to: rgb(15 23 42 / 0) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); +} + +.dark\:via-gray-400:is(.dark *) { + --tw-gradient-to: rgb(156 163 175 / 0) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-from), #9ca3af var(--tw-gradient-via-position), var(--tw-gradient-to); +} + +.dark\:via-red-900\/20:is(.dark *) { + --tw-gradient-to: rgb(127 29 29 / 0) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-from), rgb(127 29 29 / 0.2) var(--tw-gradient-via-position), var(--tw-gradient-to); +} + +.dark\:via-slate-800:is(.dark *) { + --tw-gradient-to: rgb(30 41 59 / 0) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-from), #1e293b var(--tw-gradient-via-position), var(--tw-gradient-to); +} + +.dark\:to-cyan-900\/20:is(.dark *) { + --tw-gradient-to: rgb(22 78 99 / 0.2) var(--tw-gradient-to-position); +} + +.dark\:to-emerald-900\/20:is(.dark *) { + --tw-gradient-to: rgb(6 78 59 / 0.2) var(--tw-gradient-to-position); +} + +.dark\:to-gray-800:is(.dark *) { + --tw-gradient-to: #1f2937 var(--tw-gradient-to-position); +} + +.dark\:to-indigo-900\/20:is(.dark *) { + --tw-gradient-to: rgb(49 46 129 / 0.2) var(--tw-gradient-to-position); +} + +.dark\:to-orange-900\/20:is(.dark *) { + --tw-gradient-to: rgb(124 45 18 / 0.2) var(--tw-gradient-to-position); +} + +.dark\:to-pink-900\/20:is(.dark *) { + --tw-gradient-to: rgb(131 24 67 / 0.2) var(--tw-gradient-to-position); +} + +.dark\:to-purple-500:is(.dark *) { + --tw-gradient-to: #a855f7 var(--tw-gradient-to-position); +} + +.dark\:to-red-900\/20:is(.dark *) { + --tw-gradient-to: rgb(127 29 29 / 0.2) var(--tw-gradient-to-position); +} + +.dark\:to-slate-900:is(.dark *) { + --tw-gradient-to: #0f172a var(--tw-gradient-to-position); +} + +.dark\:to-slate-900\/70:is(.dark *) { + --tw-gradient-to: rgb(15 23 42 / 0.7) var(--tw-gradient-to-position); +} + +.dark\:text-amber-400:is(.dark *) { + --tw-text-opacity: 1; + color: rgb(251 191 36 / var(--tw-text-opacity, 1)); +} + +.dark\:text-blue-200:is(.dark *) { + --tw-text-opacity: 1; + color: rgb(191 219 254 / var(--tw-text-opacity, 1)); +} + +.dark\:text-blue-300:is(.dark *) { + --tw-text-opacity: 1; + color: rgb(147 197 253 / var(--tw-text-opacity, 1)); +} + +.dark\:text-blue-400:is(.dark *) { + --tw-text-opacity: 1; + color: rgb(96 165 250 / var(--tw-text-opacity, 1)); +} + +.dark\:text-dark-text:is(.dark *) { + --tw-text-opacity: 1; + color: rgb(248 250 252 / var(--tw-text-opacity, 1)); +} + +.dark\:text-dark-text-muted:is(.dark *) { + --tw-text-opacity: 1; + color: rgb(148 163 184 / var(--tw-text-opacity, 1)); +} + +.dark\:text-gray-100:is(.dark *) { + --tw-text-opacity: 1; + color: rgb(243 244 246 / var(--tw-text-opacity, 1)); +} + +.dark\:text-gray-200:is(.dark *) { + --tw-text-opacity: 1; + color: rgb(229 231 235 / var(--tw-text-opacity, 1)); +} + +.dark\:text-gray-300:is(.dark *) { + --tw-text-opacity: 1; + color: rgb(209 213 219 / var(--tw-text-opacity, 1)); +} + +.dark\:text-gray-400:is(.dark *) { + --tw-text-opacity: 1; + color: rgb(156 163 175 / var(--tw-text-opacity, 1)); +} + +.dark\:text-gray-500:is(.dark *) { + --tw-text-opacity: 1; + color: rgb(107 114 128 / var(--tw-text-opacity, 1)); +} + +.dark\:text-gray-600:is(.dark *) { + --tw-text-opacity: 1; + color: rgb(75 85 99 / var(--tw-text-opacity, 1)); +} + +.dark\:text-green-200:is(.dark *) { + --tw-text-opacity: 1; + color: rgb(187 247 208 / var(--tw-text-opacity, 1)); +} + +.dark\:text-green-300:is(.dark *) { + --tw-text-opacity: 1; + color: rgb(134 239 172 / var(--tw-text-opacity, 1)); +} + +.dark\:text-green-400:is(.dark *) { + --tw-text-opacity: 1; + color: rgb(74 222 128 / var(--tw-text-opacity, 1)); +} + +.dark\:text-orange-200:is(.dark *) { + --tw-text-opacity: 1; + color: rgb(254 215 170 / var(--tw-text-opacity, 1)); +} + +.dark\:text-orange-300:is(.dark *) { + --tw-text-opacity: 1; + color: rgb(253 186 116 / var(--tw-text-opacity, 1)); +} + +.dark\:text-orange-400:is(.dark *) { + --tw-text-opacity: 1; + color: rgb(251 146 60 / var(--tw-text-opacity, 1)); +} + +.dark\:text-purple-200:is(.dark *) { + --tw-text-opacity: 1; + color: rgb(233 213 255 / var(--tw-text-opacity, 1)); +} + +.dark\:text-purple-400:is(.dark *) { + --tw-text-opacity: 1; + color: rgb(192 132 252 / var(--tw-text-opacity, 1)); +} + +.dark\:text-red-200:is(.dark *) { + --tw-text-opacity: 1; + color: rgb(254 202 202 / var(--tw-text-opacity, 1)); +} + +.dark\:text-red-300:is(.dark *) { + --tw-text-opacity: 1; + color: rgb(252 165 165 / var(--tw-text-opacity, 1)); +} + +.dark\:text-red-400:is(.dark *) { + --tw-text-opacity: 1; + color: rgb(248 113 113 / var(--tw-text-opacity, 1)); +} + +.dark\:text-slate-200:is(.dark *) { + --tw-text-opacity: 1; + color: rgb(226 232 240 / var(--tw-text-opacity, 1)); +} + +.dark\:text-slate-300:is(.dark *) { + --tw-text-opacity: 1; + color: rgb(203 213 225 / var(--tw-text-opacity, 1)); +} + +.dark\:text-slate-400:is(.dark *) { + --tw-text-opacity: 1; + color: rgb(148 163 184 / var(--tw-text-opacity, 1)); +} + +.dark\:text-slate-500:is(.dark *) { + --tw-text-opacity: 1; + color: rgb(100 116 139 / var(--tw-text-opacity, 1)); +} + +.dark\:text-slate-600:is(.dark *) { + --tw-text-opacity: 1; + color: rgb(71 85 105 / var(--tw-text-opacity, 1)); +} + +.dark\:text-slate-900:is(.dark *) { + --tw-text-opacity: 1; + color: rgb(15 23 42 / var(--tw-text-opacity, 1)); +} + +.dark\:text-white:is(.dark *) { + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity, 1)); +} + +.dark\:text-yellow-200:is(.dark *) { + --tw-text-opacity: 1; + color: rgb(254 240 138 / var(--tw-text-opacity, 1)); +} + +.dark\:text-yellow-300:is(.dark *) { + --tw-text-opacity: 1; + color: rgb(253 224 71 / var(--tw-text-opacity, 1)); +} + +.dark\:text-yellow-400:is(.dark *) { + --tw-text-opacity: 1; + color: rgb(250 204 21 / var(--tw-text-opacity, 1)); +} + +.dark\:placeholder-gray-400:is(.dark *)::-moz-placeholder { + --tw-placeholder-opacity: 1; + color: rgb(156 163 175 / var(--tw-placeholder-opacity, 1)); +} + +.dark\:placeholder-gray-400:is(.dark *)::placeholder { + --tw-placeholder-opacity: 1; + color: rgb(156 163 175 / var(--tw-placeholder-opacity, 1)); +} + +.dark\:opacity-0:is(.dark *) { + opacity: 0; +} + +.dark\:opacity-10:is(.dark *) { + opacity: 0.1; +} + +.dark\:opacity-100:is(.dark *) { + opacity: 1; +} + +.dark\:shadow-slate-900\/20:is(.dark *) { + --tw-shadow-color: rgb(15 23 42 / 0.2); + --tw-shadow: var(--tw-shadow-colored); +} + +.dark\:ring-blue-400:is(.dark *) { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity, 1)); +} + +.dark\:ring-slate-700:is(.dark *) { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(51 65 85 / var(--tw-ring-opacity, 1)); +} + +.dark\:ring-offset-slate-900:is(.dark *) { + --tw-ring-offset-color: #0f172a; +} + +.dark\:hover\:bg-blue-500:hover:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1)); +} + +.dark\:hover\:bg-blue-600:hover:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1)); +} + +.dark\:hover\:bg-gray-500:hover:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(107 114 128 / var(--tw-bg-opacity, 1)); +} + +.dark\:hover\:bg-gray-700:hover:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1)); +} + +.dark\:hover\:bg-green-500:hover:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1)); +} + +.dark\:hover\:bg-indigo-500:hover:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(99 102 241 / var(--tw-bg-opacity, 1)); +} + +.dark\:hover\:bg-red-500:hover:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1)); +} + +.dark\:hover\:bg-red-900\/10:hover:is(.dark *) { + background-color: rgb(127 29 29 / 0.1); +} + +.dark\:hover\:bg-slate-500:hover:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(100 116 139 / var(--tw-bg-opacity, 1)); +} + +.dark\:hover\:bg-slate-600:hover:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(71 85 105 / var(--tw-bg-opacity, 1)); +} + +.dark\:hover\:bg-slate-700:hover:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1)); +} + +.dark\:hover\:bg-slate-700\/50:hover:is(.dark *) { + background-color: rgb(51 65 85 / 0.5); +} + +.dark\:hover\:bg-slate-700\/60:hover:is(.dark *) { + background-color: rgb(51 65 85 / 0.6); +} + +.dark\:hover\:bg-slate-800:hover:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1)); +} + +.dark\:hover\:bg-slate-800\/50:hover:is(.dark *) { + background-color: rgb(30 41 59 / 0.5); +} + +.dark\:hover\:bg-white\/70:hover:is(.dark *) { + background-color: rgb(255 255 255 / 0.7); +} + +.dark\:hover\:text-blue-200:hover:is(.dark *) { + --tw-text-opacity: 1; + color: rgb(191 219 254 / var(--tw-text-opacity, 1)); +} + +.dark\:hover\:text-blue-300:hover:is(.dark *) { + --tw-text-opacity: 1; + color: rgb(147 197 253 / var(--tw-text-opacity, 1)); +} + +.dark\:hover\:text-gray-300:hover:is(.dark *) { + --tw-text-opacity: 1; + color: rgb(209 213 219 / var(--tw-text-opacity, 1)); +} + +.dark\:hover\:text-red-200:hover:is(.dark *) { + --tw-text-opacity: 1; + color: rgb(254 202 202 / var(--tw-text-opacity, 1)); +} + +.dark\:hover\:text-red-300:hover:is(.dark *) { + --tw-text-opacity: 1; + color: rgb(252 165 165 / var(--tw-text-opacity, 1)); +} + +.dark\:hover\:text-slate-200:hover:is(.dark *) { + --tw-text-opacity: 1; + color: rgb(226 232 240 / var(--tw-text-opacity, 1)); +} + +.dark\:hover\:text-slate-300:hover:is(.dark *) { + --tw-text-opacity: 1; + color: rgb(203 213 225 / var(--tw-text-opacity, 1)); +} + +.dark\:hover\:text-slate-900:hover:is(.dark *) { + --tw-text-opacity: 1; + color: rgb(15 23 42 / var(--tw-text-opacity, 1)); +} + +.dark\:hover\:text-white:hover:is(.dark *) { + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity, 1)); +} + +.dark\:focus\:ring-gray-600:focus:is(.dark *) { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(75 85 99 / var(--tw-ring-opacity, 1)); +} + +.dark\:focus\:ring-white:focus:is(.dark *) { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity, 1)); +} + +.dark\:disabled\:bg-slate-800:disabled:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1)); +} + +.group:focus-within .dark\:group-focus-within\:text-blue-400:is(.dark *) { + --tw-text-opacity: 1; + color: rgb(96 165 250 / var(--tw-text-opacity, 1)); +} + +.group:hover .dark\:group-hover\:text-slate-300:is(.dark *) { + --tw-text-opacity: 1; + color: rgb(203 213 225 / var(--tw-text-opacity, 1)); +} + +@media (min-width: 640px) { + .sm\:mb-0 { + margin-bottom: 0px; + } + + .sm\:mb-10 { + margin-bottom: 2.5rem; + } + + .sm\:mb-4 { + margin-bottom: 1rem; + } + + .sm\:mb-5 { + margin-bottom: 1.25rem; + } + + .sm\:mr-2 { + margin-right: 0.5rem; + } + + .sm\:mt-12 { + margin-top: 3rem; + } + + .sm\:mt-4 { + margin-top: 1rem; + } + + .sm\:mt-5 { + margin-top: 1.25rem; + } + + .sm\:inline { + display: inline; + } + + .sm\:h-10 { + height: 2.5rem; + } + + .sm\:h-12 { + height: 3rem; + } + + .sm\:h-16 { + height: 4rem; + } + + .sm\:h-4 { + height: 1rem; + } + + .sm\:h-5 { + height: 1.25rem; + } + + .sm\:h-6 { + height: 1.5rem; + } + + .sm\:w-10 { + width: 2.5rem; + } + + .sm\:w-12 { + width: 3rem; + } + + .sm\:w-16 { + width: 4rem; + } + + .sm\:w-4 { + width: 1rem; + } + + .sm\:w-5 { + width: 1.25rem; + } + + .sm\:w-6 { + width: 1.5rem; + } + + .sm\:w-auto { + width: auto; + } + + .sm\:grid-cols-2 { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + .sm\:grid-cols-3 { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } + + .sm\:flex-row { + flex-direction: row; + } + + .sm\:items-center { + align-items: center; + } + + .sm\:justify-between { + justify-content: space-between; + } + + .sm\:gap-4 { + gap: 1rem; + } + + .sm\:gap-6 { + gap: 1.5rem; + } + + .sm\:gap-8 { + gap: 2rem; + } + + .sm\:space-x-3 > :not([hidden]) ~ :not([hidden]) { + --tw-space-x-reverse: 0; + margin-right: calc(0.75rem * var(--tw-space-x-reverse)); + margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse))); + } + + .sm\:space-x-6 > :not([hidden]) ~ :not([hidden]) { + --tw-space-x-reverse: 0; + margin-right: calc(1.5rem * var(--tw-space-x-reverse)); + margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse))); + } + + .sm\:space-y-0 > :not([hidden]) ~ :not([hidden]) { + --tw-space-y-reverse: 0; + margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(0px * var(--tw-space-y-reverse)); + } + + .sm\:p-4 { + padding: 1rem; + } + + .sm\:px-4 { + padding-left: 1rem; + padding-right: 1rem; + } + + .sm\:px-6 { + padding-left: 1.5rem; + padding-right: 1.5rem; + } + + .sm\:py-12 { + padding-top: 3rem; + padding-bottom: 3rem; + } + + .sm\:py-8 { + padding-top: 2rem; + padding-bottom: 2rem; + } + + .sm\:pt-8 { + padding-top: 2rem; + } + + .sm\:text-2xl { + font-size: 1.5rem; + line-height: 2rem; + } + + .sm\:text-3xl { + font-size: 1.875rem; + line-height: 2.25rem; + } + + .sm\:text-base { + font-size: 1rem; + line-height: 1.5rem; + } + + .sm\:text-lg { + font-size: 1.125rem; + line-height: 1.75rem; + } + + .sm\:text-sm { + font-size: 0.875rem; + line-height: 1.25rem; + } +} + +@media (min-width: 768px) { + .md\:col-span-2 { + grid-column: span 2 / span 2; + } + + .md\:block { + display: block; + } + + .md\:grid-cols-2 { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + .md\:grid-cols-3 { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } + + .md\:grid-cols-4 { + grid-template-columns: repeat(4, minmax(0, 1fr)); + } + + .md\:flex-row { + flex-direction: row; + } + + .md\:items-center { + align-items: center; + } + + .md\:justify-between { + justify-content: space-between; + } + + .md\:space-x-2 > :not([hidden]) ~ :not([hidden]) { + --tw-space-x-reverse: 0; + margin-right: calc(0.5rem * var(--tw-space-x-reverse)); + margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse))); + } + + .md\:space-x-3 > :not([hidden]) ~ :not([hidden]) { + --tw-space-x-reverse: 0; + margin-right: calc(0.75rem * var(--tw-space-x-reverse)); + margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse))); + } + + .md\:text-2xl { + font-size: 1.5rem; + line-height: 2rem; + } + + .md\:text-4xl { + font-size: 2.25rem; + line-height: 2.5rem; + } + + .md\:text-5xl { + font-size: 3rem; + line-height: 1; + } + + .md\:text-6xl { + font-size: 3.75rem; + line-height: 1; + } + + .md\:text-xl { + font-size: 1.25rem; + line-height: 1.75rem; + } +} + +@media (min-width: 1024px) { + .lg\:col-span-2 { + grid-column: span 2 / span 2; + } + + .lg\:mx-8 { + margin-left: 2rem; + margin-right: 2rem; + } + + .lg\:mt-0 { + margin-top: 0px; + } + + .lg\:flex { + display: flex; + } + + .lg\:hidden { + display: none; + } + + .lg\:h-12 { + height: 3rem; + } + + .lg\:h-20 { + height: 5rem; + } + + .lg\:w-12 { + width: 3rem; + } + + .lg\:grid-cols-2 { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + .lg\:grid-cols-3 { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } + + .lg\:grid-cols-4 { + grid-template-columns: repeat(4, minmax(0, 1fr)); + } + + .lg\:flex-row { + flex-direction: row; + } + + .lg\:items-center { + align-items: center; + } + + .lg\:justify-between { + justify-content: space-between; + } + + .lg\:space-x-1 > :not([hidden]) ~ :not([hidden]) { + --tw-space-x-reverse: 0; + margin-right: calc(0.25rem * var(--tw-space-x-reverse)); + margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse))); + } + + .lg\:space-x-6 > :not([hidden]) ~ :not([hidden]) { + --tw-space-x-reverse: 0; + margin-right: calc(1.5rem * var(--tw-space-x-reverse)); + margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse))); + } + + .lg\:space-y-0 > :not([hidden]) ~ :not([hidden]) { + --tw-space-y-reverse: 0; + margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(0px * var(--tw-space-y-reverse)); + } + + .lg\:p-12 { + padding: 3rem; + } + + .lg\:p-8 { + padding: 2rem; + } + + .lg\:px-6 { + padding-left: 1.5rem; + padding-right: 1.5rem; + } + + .lg\:px-8 { + padding-left: 2rem; + padding-right: 2rem; + } + + .lg\:text-right { + text-align: right; + } + + .lg\:text-2xl { + font-size: 1.5rem; + line-height: 2rem; + } + + .lg\:text-sm { + font-size: 0.875rem; + line-height: 1.25rem; + } +} + +@media (min-width: 1280px) { + .xl\:grid-cols-4 { + grid-template-columns: repeat(4, minmax(0, 1fr)); + } +}