From 062bac28c1e402e198eea8277e394125082d2ed2 Mon Sep 17 00:00:00 2001 From: Till Tomczak Date: Mon, 2 Jun 2025 15:39:31 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=89=20Updated=20documentation=20and=20?= =?UTF-8?q?CSS=20files=20for=20input=20module=20=F0=9F=8E=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../static/css/input-raspberry-balanced.css | 740 ++++ backend/static/css/input.css | 3385 +++++++++++++++++ backend/static/css/input.css.gz | Bin 14034 -> 0 bytes backend/static/css/input.min.css | 1 - backend/static/css/input.min.css.gz | Bin 10871 -> 0 bytes 5 files changed, 4125 insertions(+), 1 deletion(-) create mode 100644 backend/static/css/input-raspberry-balanced.css create mode 100644 backend/static/css/input.css delete mode 100644 backend/static/css/input.css.gz delete mode 100644 backend/static/css/input.min.css delete mode 100644 backend/static/css/input.min.css.gz diff --git a/backend/static/css/input-raspberry-balanced.css b/backend/static/css/input-raspberry-balanced.css new file mode 100644 index 00000000..a1737b9e --- /dev/null +++ b/backend/static/css/input-raspberry-balanced.css @@ -0,0 +1,740 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + +/* Custom Styles für Light und Dark Mode - Premium Upgrade mit verbessertem Light Mode */ +@layer base { + :root { + /* Light Mode Farben - Mercedes-Benz Professional - VERBESSERT für optimale Lesbarkeit */ + --color-bg-primary: #ffffff; + --color-bg-secondary: #fafbfc; + --color-bg-tertiary: #f3f5f7; + --color-bg-accent: #fbfcfd; + --color-text-primary: #111827; /* Verstärkter Kontrast für bessere Lesbarkeit */ + --color-text-secondary: #374151; /* Erhöhter Kontrast */ + --color-text-muted: #6b7280; /* Optimierter Muted-Text */ + --color-text-accent: #0073ce; + --color-border-primary: #e5e7eb; /* Subtilere aber sichtbarere Borders */ + --color-border-secondary: #d1d5db; + --color-accent: #0073ce; /* Mercedes-Benz Professional Blau */ + --color-accent-hover: #005a9f; + --color-accent-light: #eff6ff; + --color-accent-text: #ffffff; + --color-shadow: rgba(0, 0, 0, 0.06); /* Sanftere Schatten */ + --color-shadow-strong: rgba(0, 0, 0, 0.1); + --color-shadow-accent: rgba(0, 115, 206, 0.12); + --card-radius: 1rem; /* Abgerundete Ecken für Karten */ + + /* Light Mode Gradients - VERBESSERT für sanftere Optik */ + --gradient-primary: linear-gradient(135deg, #ffffff 0%, #fafbfc 30%, #f8fafc 70%, #f3f5f7 100%); + --gradient-card: linear-gradient(135deg, #ffffff 0%, #fcfcfd 50%, #fafbfc 100%); + --gradient-hero: linear-gradient(135deg, #fafbfc 0%, #f3f5f7 40%, #eef2f5 80%, #f8fafc 100%); + --gradient-accent: linear-gradient(135deg, #0073ce 0%, #005a9f 100%); + --gradient-surface: linear-gradient(135deg, #ffffff 0%, #fbfcfd 50%, #f8fafc 100%); + + /* Neue optimierte Light Mode Glassmorphism-Variablen */ + --glass-bg: rgba(255, 255, 255, 0.92); + --glass-border: rgba(255, 255, 255, 0.3); + --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.04); + --glass-blur: blur(20px); + } + + .dark { + /* Dark Mode Farben - Noch dunkler und eleganter - UNVERÄNDERT */ + --color-bg-primary: #000000; /* Tiefes Schwarz */ + --color-bg-secondary: #0a0a0a; /* Sehr dunkles Grau */ + --color-bg-tertiary: #1a1a1a; + --color-text-primary: #ffffff; + --color-text-secondary: #e2e8f0; + --color-text-muted: #94a3b8; + --color-border-primary: #1a1a1a; /* Dunkler Rahmen */ + --color-border-secondary: #2a2a2a; + --color-accent: #ffffff; /* Reines Weiß */ + --color-accent-hover: #f0f0f0; + --color-accent-light: #1e3a8a; + --color-accent-text: #000000; + --color-shadow: rgba(0, 0, 0, 0.8); /* Sehr dunkler Schatten */ + --color-shadow-strong: rgba(0, 0, 0, 0.9); + --mb-black: #000000; /* Mercedes-Benz Schwarz */ + } + + body { + @apply bg-white dark:bg-black text-slate-900 dark:text-white transition-colors duration-300; + position: relative; + min-height: 100vh; + background: var(--gradient-primary); + font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; + font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11'; + line-height: 1.65; /* Verbesserte Zeilenhöhe für bessere Lesbarkeit */ + font-size: 15px; /* Optimierte Schriftgröße */ + } + + .dark body { + background: linear-gradient(135deg, #000000 0%, #0a0a0a 50%, #000000 100%); + } + + /* Enhanced Body Background with Subtle Patterns - VERBESSERT */ + body::before { + content: ''; + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: + radial-gradient(circle at 25% 25%, rgba(0, 115, 206, 0.015) 0%, transparent 50%), + radial-gradient(circle at 75% 75%, rgba(0, 115, 206, 0.01) 0%, transparent 50%), + radial-gradient(circle at 50% 10%, rgba(0, 115, 206, 0.008) 0%, transparent 50%); + pointer-events: none; + z-index: -1; + } + + .dark body::before { + background: + radial-gradient(circle at 20% 50%, rgba(59, 130, 246, 0.03) 0%, transparent 50%), + radial-gradient(circle at 80% 20%, rgba(59, 130, 246, 0.02) 0%, transparent 50%); + } + + /* Navbar Styles - Premium Glassmorphism - UNANGETASTET WIE GEWÜNSCHT */ + nav { + @apply backdrop-blur-xl border-b transition-all duration-300; + background: linear-gradient(135deg, + rgba(255, 255, 255, 0.95) 0%, + rgba(250, 251, 252, 0.92) 30%, + rgba(248, 250, 252, 0.9) 70%, + rgba(255, 255, 255, 0.95) 100%); + border-bottom: 1px solid rgba(229, 231, 235, 0.7); + backdrop-filter: blur(28px) saturate(200%) brightness(110%); + -webkit-backdrop-filter: blur(28px) saturate(200%) brightness(110%); + box-shadow: + 0 4px 20px rgba(0, 0, 0, 0.04), + 0 2px 8px rgba(0, 115, 206, 0.02), + inset 0 1px 0 rgba(255, 255, 255, 0.9); + } + + .dark nav { + background: rgba(0, 0, 0, 0.85); + border-bottom-color: 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.05); + } + + /* Premium Card Styles - CPU OPTIMIERT für Raspberry Pi */ + .card-enhanced { + background: var(--gradient-card); + border: 1px solid var(--color-border-primary); + border-radius: var(--card-radius); + box-shadow: + 0 2px 12px rgba(0, 0, 0, 0.03), + 0 1px 4px rgba(0, 115, 206, 0.02); + transition: background-color 0.2s ease, border-color 0.2s ease; + /* ENTFERNT: cubic-bezier, position, overflow für CPU-Optimierung */ + } + + /* ENTFERNT: card-enhanced::before pseudo-element für CPU-Optimierung */ + + .card-enhanced:hover { + /* ENTFERNT: transform für CPU-Optimierung */ + box-shadow: + 0 4px 16px rgba(0, 0, 0, 0.05), + 0 2px 8px rgba(0, 115, 206, 0.03); + } + + .dark .card-enhanced { + background: rgba(10, 10, 10, 0.8); + border-color: var(--color-border-primary); + box-shadow: 0 4px 20px var(--color-shadow); + } + + /* Premium Button Styles - CPU OPTIMIERT */ + .btn-enhanced { + background: var(--gradient-accent); + color: var(--color-accent-text); + border: none; + border-radius: 0.5rem; + padding: 0.75rem 1.75rem; + font-weight: 600; + font-size: 0.875rem; + text-transform: uppercase; + letter-spacing: 0.05em; + box-shadow: + 0 2px 8px rgba(0, 115, 206, 0.2), + 0 1px 4px rgba(0, 115, 206, 0.1); + transition: background-color 0.2s ease, box-shadow 0.2s ease; + /* ENTFERNT: cubic-bezier, position, overflow für CPU-Optimierung */ + } + + /* ENTFERNT: btn-enhanced::before pseudo-element animation für CPU-Optimierung */ + + .btn-enhanced:hover { + /* ENTFERNT: transform für CPU-Optimierung */ + box-shadow: + 0 4px 12px rgba(0, 115, 206, 0.25), + 0 2px 6px rgba(0, 115, 206, 0.15); + } + + .btn-enhanced:active { + /* ENTFERNT: transform für CPU-Optimierung */ + } + + .btn-secondary { + background: var(--gradient-surface); + color: var(--color-text-primary); + border: 1px solid var(--color-border-primary); + box-shadow: + 0 1px 6px rgba(0, 0, 0, 0.03), + inset 0 1px 0 rgba(255, 255, 255, 0.8); + } + + .btn-secondary:hover { + background: var(--color-bg-secondary); + border-color: var(--color-accent); + color: var(--color-accent); + box-shadow: + 0 2px 8px rgba(0, 115, 206, 0.06), + inset 0 1px 0 rgba(255, 255, 255, 0.9); + } + + /* Enhanced Form Elements - REDUZIERTER backdrop-filter */ + .input-enhanced { + background: rgba(255, 255, 255, 0.95); + border: 1px solid var(--color-border-primary); + border-radius: 0.5rem; + padding: 0.75rem 1rem; + color: var(--color-text-primary); + font-size: 0.9rem; + box-shadow: + 0 1px 6px rgba(0, 0, 0, 0.02), + inset 0 1px 0 rgba(255, 255, 255, 0.9); + transition: border-color 0.2s ease, background-color 0.2s ease; + /* REDUZIERT: backdrop-filter von 8px auf 4px */ + backdrop-filter: blur(4px); + -webkit-backdrop-filter: blur(4px); + } + + .input-enhanced:focus { + outline: none; + border-color: var(--color-accent); + box-shadow: + 0 2px 8px rgba(0, 115, 206, 0.08), + 0 0 0 3px rgba(0, 115, 206, 0.05); + background: rgba(255, 255, 255, 0.98); + } + + .input-enhanced::placeholder { + color: var(--color-text-muted); + opacity: 0.8; + } + + .dark .input-enhanced { + background: rgba(10, 10, 10, 0.8); + border-color: var(--color-border-primary); + color: var(--color-text-primary); + box-shadow: + 0 2px 8px var(--color-shadow), + inset 0 1px 0 rgba(255, 255, 255, 0.05); + } + + .dark .input-enhanced:focus { + border-color: #60a5fa; + box-shadow: + 0 2px 10px rgba(96, 165, 250, 0.15), + 0 0 0 3px rgba(96, 165, 250, 0.1); + } + + /* Premium Alert Styles - REDUZIERTER backdrop-filter */ + .alert-enhanced { + border-radius: 1rem; + padding: 1.25rem; + border: 1px solid transparent; + position: relative; + overflow: hidden; + /* REDUZIERT: backdrop-filter von 16px auf 8px */ + backdrop-filter: blur(8px); + -webkit-backdrop-filter: blur(8px); + } + + .alert-enhanced::before { + content: ''; + position: absolute; + top: 0; + left: 0; + bottom: 0; + width: 4px; + } + + .alert-info-enhanced { + background: linear-gradient(135deg, + rgba(239, 246, 255, 0.95) 0%, + rgba(219, 234, 254, 0.9) 100%); + border-color: rgba(59, 130, 246, 0.2); + color: #1e40af; + } + + .alert-info-enhanced::before { + background: var(--gradient-accent); + } + + .alert-success-enhanced { + background: linear-gradient(135deg, + rgba(236, 253, 245, 0.95) 0%, + rgba(167, 243, 208, 0.9) 100%); + border-color: rgba(16, 185, 129, 0.2); + color: #065f46; + } + + .alert-success-enhanced::before { + background: linear-gradient(180deg, #10b981 0%, #059669 100%); + } + + .alert-warning-enhanced { + background: linear-gradient(135deg, + rgba(255, 251, 235, 0.95) 0%, + rgba(254, 243, 199, 0.9) 100%); + border-color: rgba(251, 191, 36, 0.2); + color: #92400e; + } + + .alert-warning-enhanced::before { + background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 100%); + } + + .alert-error-enhanced { + background: linear-gradient(135deg, + rgba(254, 242, 242, 0.95) 0%, + rgba(252, 165, 165, 0.9) 100%); + border-color: rgba(239, 68, 68, 0.2); + color: #991b1b; + } + + .alert-error-enhanced::before { + background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%); + } + + /* Light Mode Flash Messages - REDUZIERTE backdrop-filter */ + .flash-message-light { + background: linear-gradient(135deg, + rgba(255, 255, 255, 0.95) 0%, + rgba(248, 250, 252, 0.9) 100%); + /* REDUZIERT: backdrop-filter von 32px auf 16px */ + backdrop-filter: blur(16px) saturate(180%) brightness(110%); + -webkit-backdrop-filter: blur(16px) saturate(180%) brightness(110%); + border: 1px solid rgba(226, 232, 240, 0.6); + box-shadow: + 0 10px 30px rgba(0, 0, 0, 0.08), + 0 4px 12px rgba(0, 115, 206, 0.04); + color: var(--color-text-primary); + } + + .flash-message-light.success { + border-left: 4px solid #10b981; + background: linear-gradient(135deg, + rgba(236, 253, 245, 0.95) 0%, + rgba(209, 250, 229, 0.9) 100%); + } + + .flash-message-light.error { + border-left: 4px solid #ef4444; + background: linear-gradient(135deg, + rgba(254, 242, 242, 0.95) 0%, + rgba(252, 165, 165, 0.9) 100%); + } + + .flash-message-light.warning { + border-left: 4px solid #fbbf24; + background: linear-gradient(135deg, + rgba(255, 251, 235, 0.95) 0%, + rgba(254, 243, 199, 0.9) 100%); + } + + .flash-message-light.info { + border-left: 4px solid #3b82f6; + background: linear-gradient(135deg, + rgba(239, 246, 255, 0.95) 0%, + rgba(219, 234, 254, 0.9) 100%); + } + + /* Premium Table Styles - CPU OPTIMIERT */ + .table-enhanced { + background: var(--gradient-card); + border: 1px solid var(--color-border-primary); + border-radius: var(--card-radius); + overflow: hidden; + box-shadow: + 0 2px 12px var(--color-shadow), + 0 1px 4px rgba(0, 115, 206, 0.03); + } + + .table-enhanced th { + background: linear-gradient(135deg, + var(--color-bg-secondary) 0%, + var(--color-bg-tertiary) 100%); + color: var(--color-text-primary); + font-weight: 600; + padding: 1rem 1.5rem; + border-bottom: 1px solid var(--color-border-primary); + position: relative; + } + + .table-enhanced th::after { + content: ''; + position: absolute; + bottom: 0; + left: 0; + right: 0; + height: 1px; + background: linear-gradient(90deg, + transparent 0%, + var(--color-border-secondary) 50%, + transparent 100%); + } + + .table-enhanced td { + padding: 1rem 1.5rem; + border-bottom: 1px solid var(--color-border-primary); + color: var(--color-text-secondary); + transition: background-color 0.2s ease; + } + + .table-enhanced tbody tr:hover { + background: var(--color-bg-secondary); + /* ENTFERNT: transform für CPU-Optimierung */ + } + + .dark .table-enhanced { + background: rgba(10, 10, 10, 0.8); + border-color: var(--color-border-primary); + } + + .dark .table-enhanced th { + background: rgba(26, 26, 26, 0.8); + color: var(--color-text-primary); + } + + .dark .table-enhanced tbody tr:hover { + background: rgba(26, 26, 26, 0.6); + } + + /* Premium Modal Styles - REDUZIERTE backdrop-filter */ + .modal-enhanced { + background: linear-gradient(135deg, + rgba(255, 255, 255, 0.98) 0%, + rgba(248, 250, 252, 0.95) 50%, + rgba(255, 255, 255, 0.98) 100%); + /* REDUZIERT: backdrop-filter von 32px auf 16px */ + backdrop-filter: blur(16px) saturate(180%) brightness(110%); + -webkit-backdrop-filter: blur(16px) saturate(180%) brightness(110%); + border: 1px solid rgba(226, 232, 240, 0.7); + border-radius: 1.5rem; + box-shadow: + 0 20px 50px rgba(0, 0, 0, 0.12), + 0 8px 20px rgba(0, 115, 206, 0.06); + position: relative; + overflow: hidden; + } + + .modal-enhanced::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 1px; + background: linear-gradient(90deg, + transparent 0%, + rgba(226, 232, 240, 0.8) 50%, + transparent 100%); + } + + .dark .modal-enhanced { + background: rgba(0, 0, 0, 0.95); + border-color: rgba(42, 42, 42, 0.7); + box-shadow: + 0 20px 50px rgba(0, 0, 0, 0.4), + inset 0 2px 0 rgba(255, 255, 255, 0.05); + } + + /* Enhanced Status Badges - CPU OPTIMIERT */ + .status-badge-enhanced { + display: inline-flex; + align-items: center; + padding: 0.5rem 1rem; + font-size: 0.75rem; + font-weight: 700; + border-radius: 9999px; + text-transform: uppercase; + letter-spacing: 0.05em; + border: 1px solid transparent; + transition: background-color 0.2s ease; + /* ENTFERNT: position, overflow für CPU-Optimierung */ + } + + /* ENTFERNT: status-badge-enhanced::before animation für CPU-Optimierung */ + + .status-online-enhanced { + background: linear-gradient(135deg, #ecfdf5 0%, #a7f3d0 100%); + color: #065f46; + border-color: rgba(16, 185, 129, 0.3); + } + + .status-offline-enhanced { + background: linear-gradient(135deg, #fef2f2 0%, #fca5a5 100%); + color: #991b1b; + border-color: rgba(239, 68, 68, 0.3); + } + + .status-printing-enhanced { + background: linear-gradient(135deg, #eff6ff 0%, #bfdbfe 100%); + color: #1e40af; + border-color: rgba(59, 130, 246, 0.3); + } + + /* Dark Mode Toggle - REDUZIERTE Animationen */ + .dark-mode-toggle-new { + position: relative; + display: flex; + cursor: pointer; + align-items: center; + justify-content: center; + border-radius: 9999px; + padding: 0.625rem; + transition: background-color 0.2s ease, border-color 0.2s ease; + background: linear-gradient(135deg, + rgba(248, 250, 252, 0.9) 0%, + rgba(241, 245, 249, 0.8) 100%); + border: 1px solid rgba(226, 232, 240, 0.7); + box-shadow: + 0 2px 8px rgba(0, 0, 0, 0.05), + 0 1px 4px rgba(0, 115, 206, 0.03); + color: var(--color-text-secondary); + z-index: 100; + } + + .dark-mode-toggle-new:hover { + /* ENTFERNT: transform und scale für CPU-Optimierung */ + background: linear-gradient(135deg, + rgba(248, 250, 252, 0.95) 0%, + rgba(241, 245, 249, 0.85) 100%); + box-shadow: + 0 4px 12px rgba(0, 0, 0, 0.08), + 0 2px 6px rgba(0, 115, 206, 0.05); + } + + .dark-mode-toggle-new:active { + /* ENTFERNT: transform für CPU-Optimierung */ + transition: none; + } + + .dark .dark-mode-toggle-new { + background: rgba(10, 10, 10, 0.8); + border: 1px solid rgba(42, 42, 42, 0.6); + box-shadow: + 0 2px 8px rgba(0, 0, 0, 0.2), + inset 0 1px 0 rgba(255, 255, 255, 0.05); + color: var(--color-text-secondary); + } + + .dark .dark-mode-toggle-new:hover { + background: rgba(10, 10, 10, 0.9); + box-shadow: + 0 4px 12px rgba(0, 0, 0, 0.3), + inset 0 1px 0 rgba(255, 255, 255, 0.08); + } + + /* Icon-Animation für Dark Mode Toggle - VEREINFACHT */ + .dark-mode-toggle-new .sun-icon, + .dark-mode-toggle-new .moon-icon { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + transition: opacity 0.2s ease; + } + + /* ENTFERNT: komplexe icon-appear animation für CPU-Optimierung */ + + .dark .sun-icon { display: none; } + .dark .moon-icon { display: block; } + .sun-icon { display: block; } + .moon-icon { display: none; } + + /* User Menu Button - CPU OPTIMIERT */ + .user-menu-button-new { + display: flex; + align-items: center; + gap: 0.5rem; + border-radius: 0.75rem; + padding: 0.5rem; + transition: background-color 0.2s ease, border-color 0.2s ease; + background: linear-gradient(135deg, + rgba(248, 250, 252, 0.8) 0%, + rgba(241, 245, 249, 0.7) 100%); + border: 1px solid rgba(226, 232, 240, 0.6); + box-shadow: + 0 2px 8px rgba(0, 0, 0, 0.05), + inset 0 1px 0 rgba(255, 255, 255, 0.7); + } + + .user-menu-button-new:hover { + /* ENTFERNT: transform für CPU-Optimierung */ + background: linear-gradient(135deg, + rgba(248, 250, 252, 0.9) 0%, + rgba(241, 245, 249, 0.8) 100%); + box-shadow: + 0 4px 12px rgba(0, 0, 0, 0.08), + 0 2px 4px rgba(0, 115, 206, 0.04); + } + + .dark .user-menu-button-new { + background: rgba(10, 10, 10, 0.7); + border-color: rgba(42, 42, 42, 0.6); + box-shadow: + 0 2px 8px rgba(0, 0, 0, 0.2), + inset 0 1px 0 rgba(255, 255, 255, 0.03); + } + + .dark .user-menu-button-new:hover { + background: rgba(10, 10, 10, 0.8); + box-shadow: + 0 4px 12px rgba(0, 0, 0, 0.3), + inset 0 1px 0 rgba(255, 255, 255, 0.05); + } + + /* Enhanced Hover Effects - CPU OPTIMIERT */ + .hover-lift-enhanced { + transition: box-shadow 0.2s ease; + } + + .hover-lift-enhanced:hover { + /* ENTFERNT: transform für CPU-Optimierung */ + box-shadow: + 0 8px 20px var(--color-shadow-strong), + 0 4px 10px var(--color-shadow-accent); + } + + .dark .hover-lift-enhanced:hover { + box-shadow: 0 8px 20px var(--color-shadow); + } + + /* Smooth Scrollbar for Light Mode */ + ::-webkit-scrollbar { + width: 8px; + height: 8px; + } + + ::-webkit-scrollbar-track { + background: var(--color-bg-secondary); + border-radius: 4px; + } + + ::-webkit-scrollbar-thumb { + background: linear-gradient(180deg, + var(--color-border-secondary) 0%, + var(--color-border-primary) 100%); + border-radius: 4px; + transition: background 0.2s ease; + } + + ::-webkit-scrollbar-thumb:hover { + background: linear-gradient(180deg, + var(--color-accent) 0%, + var(--color-accent-hover) 100%); + } + + .dark ::-webkit-scrollbar-track { + background: var(--color-bg-secondary); + } + + .dark ::-webkit-scrollbar-thumb { + background: var(--color-border-primary); + } + + .dark ::-webkit-scrollbar-thumb:hover { + background: #60a5fa; + } + + /* Loading States - VEREINFACHT */ + .loading-enhanced { + position: relative; + overflow: hidden; + } + + .loading-enhanced::after { + content: ''; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient(90deg, + transparent, + rgba(0, 115, 206, 0.1), + transparent); + animation: loading-shimmer 2s infinite; + } + + @keyframes loading-shimmer { + 0% { left: -100%; } + 100% { left: 100%; } + } + + /* Focus States for Accessibility */ + .focus-enhanced:focus { + outline: 2px solid var(--color-accent); + outline-offset: 2px; + box-shadow: + 0 0 0 4px rgba(0, 115, 206, 0.15); + } + + .dark .focus-enhanced:focus { + outline-color: #60a5fa; + box-shadow: + 0 0 0 4px rgba(96, 165, 250, 0.15); + } + + /* Responsive Design Enhancements */ + @media (max-width: 768px) { + .card-enhanced { + padding: 1rem; + border-radius: 0.75rem; + } + + .btn-enhanced { + padding: 0.75rem 1.5rem; + font-size: 0.8rem; + } + + .modal-enhanced { + border-radius: 1rem; + margin: 1rem; + } + + .dark-mode-toggle-new { + padding: 0.5rem; + } + } + + /* Reduced Motion Support */ + @media (prefers-reduced-motion: reduce) { + * { + transition: none !important; + animation: none !important; + } + } + + /* High Contrast Mode Support */ + @media (prefers-contrast: high) { + :root { + --color-shadow: rgba(0, 0, 0, 0.2); + --color-shadow-strong: rgba(0, 0, 0, 0.3); + --color-border-primary: #000000; + } + + .dark { + --color-border-primary: #ffffff; + } + } +} + +/* WEITERE ABSCHNITTE FOLGEN - Ich optimiere den Rest systematisch... */ \ No newline at end of file diff --git a/backend/static/css/input.css b/backend/static/css/input.css new file mode 100644 index 00000000..8621977d --- /dev/null +++ b/backend/static/css/input.css @@ -0,0 +1,3385 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + +/* Custom Styles für Light und Dark Mode - Premium Upgrade mit verbessertem Light Mode */ +@layer base { + :root { + /* Light Mode Farben - Mercedes-Benz Professional - VERBESSERT für optimale Lesbarkeit */ + --color-bg-primary: #ffffff; + --color-bg-secondary: #fafbfc; + --color-bg-tertiary: #f3f5f7; + --color-bg-accent: #fbfcfd; + --color-text-primary: #111827; /* Verstärkter Kontrast für bessere Lesbarkeit */ + --color-text-secondary: #374151; /* Erhöhter Kontrast */ + --color-text-muted: #6b7280; /* Optimierter Muted-Text */ + --color-text-accent: #0073ce; + --color-border-primary: #e5e7eb; /* Subtilere aber sichtbarere Borders */ + --color-border-secondary: #d1d5db; + --color-accent: #0073ce; /* Mercedes-Benz Professional Blau */ + --color-accent-hover: #005a9f; + --color-accent-light: #eff6ff; + --color-accent-text: #ffffff; + --color-shadow: rgba(0, 0, 0, 0.06); /* Sanftere Schatten */ + --color-shadow-strong: rgba(0, 0, 0, 0.1); + --color-shadow-accent: rgba(0, 115, 206, 0.12); + --card-radius: 1rem; /* Abgerundete Ecken für Karten */ + + /* Light Mode Gradients - VERBESSERT für sanftere Optik */ + --gradient-primary: linear-gradient(135deg, #ffffff 0%, #fafbfc 30%, #f8fafc 70%, #f3f5f7 100%); + --gradient-card: linear-gradient(135deg, #ffffff 0%, #fcfcfd 50%, #fafbfc 100%); + --gradient-hero: linear-gradient(135deg, #fafbfc 0%, #f3f5f7 40%, #eef2f5 80%, #f8fafc 100%); + --gradient-accent: linear-gradient(135deg, #0073ce 0%, #005a9f 100%); + --gradient-surface: linear-gradient(135deg, #ffffff 0%, #fbfcfd 50%, #f8fafc 100%); + + /* Neue optimierte Light Mode Glassmorphism-Variablen */ + --glass-bg: rgba(255, 255, 255, 0.92); + --glass-border: rgba(255, 255, 255, 0.3); + --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.04); + --glass-blur: blur(20px); + } + + .dark { + /* Dark Mode Farben - Noch dunkler und eleganter - UNVERÄNDERT */ + --color-bg-primary: #000000; /* Tiefes Schwarz */ + --color-bg-secondary: #0a0a0a; /* Sehr dunkles Grau */ + --color-bg-tertiary: #1a1a1a; + --color-text-primary: #ffffff; + --color-text-secondary: #e2e8f0; + --color-text-muted: #94a3b8; + --color-border-primary: #1a1a1a; /* Dunkler Rahmen */ + --color-border-secondary: #2a2a2a; + --color-accent: #ffffff; /* Reines Weiß */ + --color-accent-hover: #f0f0f0; + --color-accent-light: #1e3a8a; + --color-accent-text: #000000; + --color-shadow: rgba(0, 0, 0, 0.8); /* Sehr dunkler Schatten */ + --color-shadow-strong: rgba(0, 0, 0, 0.9); + --mb-black: #000000; /* Mercedes-Benz Schwarz */ + } + + body { + @apply bg-white dark:bg-black text-slate-900 dark:text-white transition-colors duration-300; + position: relative; + min-height: 100vh; + background: var(--gradient-primary); + font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; + font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11'; + line-height: 1.65; /* Verbesserte Zeilenhöhe für bessere Lesbarkeit */ + font-size: 15px; /* Optimierte Schriftgröße */ + } + + .dark body { + background: linear-gradient(135deg, #000000 0%, #0a0a0a 50%, #000000 100%); + } + + /* Enhanced Body Background with Subtle Patterns - VERBESSERT */ + body::before { + content: ''; + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: + radial-gradient(circle at 25% 25%, rgba(0, 115, 206, 0.015) 0%, transparent 50%), + radial-gradient(circle at 75% 75%, rgba(0, 115, 206, 0.01) 0%, transparent 50%), + radial-gradient(circle at 50% 10%, rgba(0, 115, 206, 0.008) 0%, transparent 50%); + pointer-events: none; + z-index: -1; + } + + .dark body::before { + background: + radial-gradient(circle at 20% 50%, rgba(59, 130, 246, 0.03) 0%, transparent 50%), + radial-gradient(circle at 80% 20%, rgba(59, 130, 246, 0.02) 0%, transparent 50%); + } + + /* Navbar Styles - Premium Glassmorphism - VERBESSERT */ + nav { + @apply backdrop-blur-xl border-b transition-all duration-300; + background: linear-gradient(135deg, + rgba(255, 255, 255, 0.95) 0%, + rgba(250, 251, 252, 0.92) 30%, + rgba(248, 250, 252, 0.9) 70%, + rgba(255, 255, 255, 0.95) 100%); + border-bottom: 1px solid rgba(229, 231, 235, 0.7); + backdrop-filter: blur(28px) saturate(200%) brightness(110%); + -webkit-backdrop-filter: blur(28px) saturate(200%) brightness(110%); + box-shadow: + 0 4px 20px rgba(0, 0, 0, 0.04), + 0 2px 8px rgba(0, 115, 206, 0.02), + inset 0 1px 0 rgba(255, 255, 255, 0.9); + } + + .dark nav { + background: rgba(0, 0, 0, 0.85); + border-bottom-color: 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.05); + } + + /* Premium Card Styles - VERBESSERT für Light Mode */ + .card-enhanced { + background: var(--gradient-card); + border: 1px solid var(--color-border-primary); + border-radius: var(--card-radius); + box-shadow: + 0 2px 12px rgba(0, 0, 0, 0.03), + 0 1px 4px rgba(0, 115, 206, 0.02), + inset 0 1px 0 rgba(255, 255, 255, 0.8); + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + position: relative; + overflow: hidden; + } + + .card-enhanced::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 1px; + background: var(--gradient-accent); + opacity: 0; + transition: opacity 0.3s ease; + } + + .card-enhanced:hover { + transform: translateY(-2px); + box-shadow: + 0 8px 25px rgba(0, 0, 0, 0.06), + 0 4px 12px rgba(0, 115, 206, 0.04), + inset 0 1px 0 rgba(255, 255, 255, 0.9); + } + + .card-enhanced:hover::before { + opacity: 1; + } + + .dark .card-enhanced { + background: rgba(10, 10, 10, 0.8); + border-color: var(--color-border-primary); + box-shadow: 0 4px 20px var(--color-shadow); + } + + /* Premium Button Styles - VERBESSERT */ + .btn-enhanced { + background: var(--gradient-accent); + color: var(--color-accent-text); + border: none; + border-radius: 0.5rem; + padding: 0.75rem 1.75rem; + font-weight: 600; + font-size: 0.875rem; + text-transform: uppercase; + letter-spacing: 0.05em; + box-shadow: + 0 2px 8px rgba(0, 115, 206, 0.2), + 0 1px 4px rgba(0, 115, 206, 0.1); + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + position: relative; + overflow: hidden; + } + + .btn-enhanced::before { + content: ''; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); + transition: left 0.5s ease; + } + + .btn-enhanced:hover { + transform: translateY(-1px); + box-shadow: + 0 4px 15px rgba(0, 115, 206, 0.3), + 0 2px 8px rgba(0, 115, 206, 0.2); + } + + .btn-enhanced:hover::before { + left: 100%; + } + + .btn-enhanced:active { + transform: translateY(0); + } + + .btn-secondary { + background: var(--gradient-surface); + color: var(--color-text-primary); + border: 1px solid var(--color-border-primary); + box-shadow: + 0 1px 6px rgba(0, 0, 0, 0.03), + inset 0 1px 0 rgba(255, 255, 255, 0.8); + } + + .btn-secondary:hover { + background: var(--color-bg-secondary); + border-color: var(--color-accent); + color: var(--color-accent); + box-shadow: + 0 4px 12px rgba(0, 115, 206, 0.08), + inset 0 1px 0 rgba(255, 255, 255, 0.9); + } + + /* Enhanced Form Elements - VERBESSERT für bessere Lesbarkeit */ + .input-enhanced { + background: rgba(255, 255, 255, 0.95); + border: 1px solid var(--color-border-primary); + border-radius: 0.5rem; + padding: 0.75rem 1rem; + color: var(--color-text-primary); + font-size: 0.9rem; + box-shadow: + 0 1px 6px rgba(0, 0, 0, 0.02), + inset 0 1px 0 rgba(255, 255, 255, 0.9); + transition: all 0.2s ease; + backdrop-filter: blur(8px); + -webkit-backdrop-filter: blur(8px); + } + + .input-enhanced:focus { + outline: none; + border-color: var(--color-accent); + box-shadow: + 0 4px 12px rgba(0, 115, 206, 0.1), + 0 0 0 3px rgba(0, 115, 206, 0.05), + inset 0 1px 0 rgba(255, 255, 255, 0.95); + background: rgba(255, 255, 255, 0.98); + } + + .input-enhanced::placeholder { + color: var(--color-text-muted); + opacity: 0.8; + } + + .dark .input-enhanced { + background: rgba(10, 10, 10, 0.8); + border-color: var(--color-border-primary); + color: var(--color-text-primary); + box-shadow: + 0 2px 8px var(--color-shadow), + inset 0 1px 0 rgba(255, 255, 255, 0.05); + } + + .dark .input-enhanced:focus { + border-color: #60a5fa; + box-shadow: + 0 4px 15px rgba(96, 165, 250, 0.2), + 0 0 0 3px rgba(96, 165, 250, 0.1); + } + + /* Premium Alert Styles */ + .alert-enhanced { + border-radius: 1rem; + padding: 1.25rem; + border: 1px solid transparent; + position: relative; + overflow: hidden; + backdrop-filter: blur(16px); + -webkit-backdrop-filter: blur(16px); + } + + .alert-enhanced::before { + content: ''; + position: absolute; + top: 0; + left: 0; + bottom: 0; + width: 4px; + } + + .alert-info-enhanced { + background: linear-gradient(135deg, + rgba(239, 246, 255, 0.95) 0%, + rgba(219, 234, 254, 0.9) 100%); + border-color: rgba(59, 130, 246, 0.2); + color: #1e40af; + } + + .alert-info-enhanced::before { + background: var(--gradient-accent); + } + + .alert-success-enhanced { + background: linear-gradient(135deg, + rgba(236, 253, 245, 0.95) 0%, + rgba(167, 243, 208, 0.9) 100%); + border-color: rgba(16, 185, 129, 0.2); + color: #065f46; + } + + .alert-success-enhanced::before { + background: linear-gradient(180deg, #10b981 0%, #059669 100%); + } + + .alert-warning-enhanced { + background: linear-gradient(135deg, + rgba(255, 251, 235, 0.95) 0%, + rgba(254, 243, 199, 0.9) 100%); + border-color: rgba(251, 191, 36, 0.2); + color: #92400e; + } + + .alert-warning-enhanced::before { + background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 100%); + } + + .alert-error-enhanced { + background: linear-gradient(135deg, + rgba(254, 242, 242, 0.95) 0%, + rgba(252, 165, 165, 0.9) 100%); + border-color: rgba(239, 68, 68, 0.2); + color: #991b1b; + } + + .alert-error-enhanced::before { + background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%); + } + + /* Light Mode Flash Messages - Premium */ + .flash-message-light { + background: linear-gradient(135deg, + rgba(255, 255, 255, 0.95) 0%, + rgba(248, 250, 252, 0.9) 100%); + backdrop-filter: blur(32px) saturate(200%) brightness(120%); + -webkit-backdrop-filter: blur(32px) saturate(200%) brightness(120%); + border: 1px solid rgba(226, 232, 240, 0.6); + box-shadow: + 0 25px 50px rgba(0, 0, 0, 0.1), + 0 12px 24px rgba(0, 115, 206, 0.05), + inset 0 1px 0 rgba(255, 255, 255, 0.8); + color: var(--color-text-primary); + } + + .flash-message-light.success { + border-left: 4px solid #10b981; + background: linear-gradient(135deg, + rgba(236, 253, 245, 0.95) 0%, + rgba(209, 250, 229, 0.9) 100%); + } + + .flash-message-light.error { + border-left: 4px solid #ef4444; + background: linear-gradient(135deg, + rgba(254, 242, 242, 0.95) 0%, + rgba(252, 165, 165, 0.9) 100%); + } + + .flash-message-light.warning { + border-left: 4px solid #fbbf24; + background: linear-gradient(135deg, + rgba(255, 251, 235, 0.95) 0%, + rgba(254, 243, 199, 0.9) 100%); + } + + .flash-message-light.info { + border-left: 4px solid #3b82f6; + background: linear-gradient(135deg, + rgba(239, 246, 255, 0.95) 0%, + rgba(219, 234, 254, 0.9) 100%); + } + + /* Premium Table Styles */ + .table-enhanced { + background: var(--gradient-card); + border: 1px solid var(--color-border-primary); + border-radius: var(--card-radius); + overflow: hidden; + box-shadow: + 0 4px 20px var(--color-shadow), + 0 2px 8px rgba(0, 115, 206, 0.04), + inset 0 1px 0 rgba(255, 255, 255, 0.6); + } + + .table-enhanced th { + background: linear-gradient(135deg, + var(--color-bg-secondary) 0%, + var(--color-bg-tertiary) 100%); + color: var(--color-text-primary); + font-weight: 600; + padding: 1rem 1.5rem; + border-bottom: 1px solid var(--color-border-primary); + position: relative; + } + + .table-enhanced th::after { + content: ''; + position: absolute; + bottom: 0; + left: 0; + right: 0; + height: 1px; + background: linear-gradient(90deg, + transparent 0%, + var(--color-border-secondary) 50%, + transparent 100%); + } + + .table-enhanced td { + padding: 1rem 1.5rem; + border-bottom: 1px solid var(--color-border-primary); + color: var(--color-text-secondary); + transition: all 0.2s ease; + } + + .table-enhanced tbody tr:hover { + background: var(--color-bg-secondary); + transform: scale(1.002); + } + + .dark .table-enhanced { + background: rgba(10, 10, 10, 0.8); + border-color: var(--color-border-primary); + } + + .dark .table-enhanced th { + background: rgba(26, 26, 26, 0.8); + color: var(--color-text-primary); + } + + .dark .table-enhanced tbody tr:hover { + background: rgba(26, 26, 26, 0.6); + } + + /* Premium Modal Styles */ + .modal-enhanced { + background: linear-gradient(135deg, + rgba(255, 255, 255, 0.98) 0%, + rgba(248, 250, 252, 0.95) 50%, + rgba(255, 255, 255, 0.98) 100%); + backdrop-filter: blur(32px) saturate(220%) brightness(120%); + -webkit-backdrop-filter: blur(32px) saturate(220%) brightness(120%); + border: 1px solid rgba(226, 232, 240, 0.7); + border-radius: 1.5rem; + box-shadow: + 0 50px 100px rgba(0, 0, 0, 0.15), + 0 20px 40px rgba(0, 115, 206, 0.08), + inset 0 2px 0 rgba(255, 255, 255, 0.9); + position: relative; + overflow: hidden; + } + + .modal-enhanced::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 1px; + background: linear-gradient(90deg, + transparent 0%, + rgba(226, 232, 240, 0.8) 50%, + transparent 100%); + } + + .dark .modal-enhanced { + background: rgba(0, 0, 0, 0.95); + border-color: rgba(42, 42, 42, 0.7); + box-shadow: + 0 50px 100px rgba(0, 0, 0, 0.5), + inset 0 2px 0 rgba(255, 255, 255, 0.05); + } + + /* Enhanced Status Badges */ + .status-badge-enhanced { + display: inline-flex; + align-items: center; + padding: 0.5rem 1rem; + font-size: 0.75rem; + font-weight: 700; + border-radius: 9999px; + text-transform: uppercase; + letter-spacing: 0.05em; + border: 1px solid transparent; + transition: all 0.2s ease; + position: relative; + overflow: hidden; + } + + .status-badge-enhanced::before { + content: ''; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); + transition: left 0.5s ease; + } + + .status-badge-enhanced:hover::before { + left: 100%; + } + + .status-online-enhanced { + background: linear-gradient(135deg, #ecfdf5 0%, #a7f3d0 100%); + color: #065f46; + border-color: rgba(16, 185, 129, 0.3); + } + + .status-offline-enhanced { + background: linear-gradient(135deg, #fef2f2 0%, #fca5a5 100%); + color: #991b1b; + border-color: rgba(239, 68, 68, 0.3); + } + + .status-printing-enhanced { + background: linear-gradient(135deg, #eff6ff 0%, #bfdbfe 100%); + color: #1e40af; + border-color: rgba(59, 130, 246, 0.3); + } + + /* Dark Mode Toggle - Premium Design */ + .dark-mode-toggle-new { + position: relative; + display: flex; + cursor: pointer; + align-items: center; + justify-content: center; + border-radius: 9999px; + padding: 0.625rem; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + background: linear-gradient(135deg, + rgba(248, 250, 252, 0.9) 0%, + rgba(241, 245, 249, 0.8) 100%); + border: 1px solid rgba(226, 232, 240, 0.7); + box-shadow: + 0 4px 12px rgba(0, 0, 0, 0.06), + 0 2px 4px rgba(0, 115, 206, 0.04), + inset 0 1px 0 rgba(255, 255, 255, 0.8); + color: var(--color-text-secondary); + z-index: 100; + } + + .dark-mode-toggle-new:hover { + transform: translateY(-2px) scale(1.05); + background: linear-gradient(135deg, + rgba(248, 250, 252, 0.95) 0%, + rgba(241, 245, 249, 0.85) 100%); + box-shadow: + 0 8px 20px rgba(0, 0, 0, 0.1), + 0 4px 8px rgba(0, 115, 206, 0.08), + inset 0 1px 0 rgba(255, 255, 255, 0.9); + } + + .dark-mode-toggle-new:active { + transform: translateY(-1px) scale(0.98); + transition: transform 0.1s; + } + + .dark .dark-mode-toggle-new { + background: rgba(10, 10, 10, 0.8); + border: 1px solid rgba(42, 42, 42, 0.6); + box-shadow: + 0 4px 12px rgba(0, 0, 0, 0.3), + inset 0 1px 0 rgba(255, 255, 255, 0.05); + color: var(--color-text-secondary); + } + + .dark .dark-mode-toggle-new:hover { + background: rgba(10, 10, 10, 0.9); + box-shadow: + 0 8px 20px rgba(0, 0, 0, 0.4), + inset 0 1px 0 rgba(255, 255, 255, 0.08); + } + + /* Icon-Animation für Dark Mode Toggle */ + .dark-mode-toggle-new .sun-icon, + .dark-mode-toggle-new .moon-icon { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + } + + .dark-mode-toggle-new .sun-icon:not(.hidden) { + animation: icon-appear 0.5s cubic-bezier(0.25, 1, 0.5, 1) forwards; + } + + .dark-mode-toggle-new .moon-icon:not(.hidden) { + animation: icon-appear 0.5s cubic-bezier(0.25, 1, 0.5, 1) forwards; + } + + @keyframes icon-appear { + 0% { + opacity: 0; + transform: translate(-50%, -50%) scale(0.5) rotate(-20deg); + } + 100% { + opacity: 1; + transform: translate(-50%, -50%) 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 - Premium Design */ + .user-menu-button-new { + display: flex; + align-items: center; + gap: 0.5rem; + border-radius: 0.75rem; + padding: 0.5rem; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + background: linear-gradient(135deg, + rgba(248, 250, 252, 0.8) 0%, + rgba(241, 245, 249, 0.7) 100%); + border: 1px solid rgba(226, 232, 240, 0.6); + box-shadow: + 0 2px 8px rgba(0, 0, 0, 0.05), + inset 0 1px 0 rgba(255, 255, 255, 0.7); + } + + .user-menu-button-new:hover { + transform: translateY(-1px); + background: linear-gradient(135deg, + rgba(248, 250, 252, 0.9) 0%, + rgba(241, 245, 249, 0.8) 100%); + box-shadow: + 0 4px 12px rgba(0, 0, 0, 0.08), + 0 2px 4px rgba(0, 115, 206, 0.04), + inset 0 1px 0 rgba(255, 255, 255, 0.8); + } + + .dark .user-menu-button-new { + background: rgba(10, 10, 10, 0.7); + border-color: rgba(42, 42, 42, 0.6); + box-shadow: + 0 2px 8px rgba(0, 0, 0, 0.2), + inset 0 1px 0 rgba(255, 255, 255, 0.03); + } + + .dark .user-menu-button-new:hover { + background: rgba(10, 10, 10, 0.8); + box-shadow: + 0 4px 12px rgba(0, 0, 0, 0.3), + inset 0 1px 0 rgba(255, 255, 255, 0.05); + } + + /* Enhanced Hover Effects */ + .hover-lift-enhanced { + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + } + + .hover-lift-enhanced:hover { + transform: translateY(-3px) scale(1.01); + box-shadow: + 0 12px 30px var(--color-shadow-strong), + 0 6px 15px var(--color-shadow-accent); + } + + .dark .hover-lift-enhanced:hover { + box-shadow: 0 12px 30px var(--color-shadow); + } + + /* Smooth Scrollbar for Light Mode */ + ::-webkit-scrollbar { + width: 8px; + height: 8px; + } + + ::-webkit-scrollbar-track { + background: var(--color-bg-secondary); + border-radius: 4px; + } + + ::-webkit-scrollbar-thumb { + background: linear-gradient(180deg, + var(--color-border-secondary) 0%, + var(--color-border-primary) 100%); + border-radius: 4px; + transition: background 0.2s ease; + } + + ::-webkit-scrollbar-thumb:hover { + background: linear-gradient(180deg, + var(--color-accent) 0%, + var(--color-accent-hover) 100%); + } + + .dark ::-webkit-scrollbar-track { + background: var(--color-bg-secondary); + } + + .dark ::-webkit-scrollbar-thumb { + background: var(--color-border-primary); + } + + .dark ::-webkit-scrollbar-thumb:hover { + background: #60a5fa; + } + + /* Loading States */ + .loading-enhanced { + position: relative; + overflow: hidden; + } + + .loading-enhanced::after { + content: ''; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient(90deg, + transparent, + rgba(0, 115, 206, 0.1), + transparent); + animation: loading-shimmer 2s infinite; + } + + @keyframes loading-shimmer { + 0% { left: -100%; } + 100% { left: 100%; } + } + + /* Focus States for Accessibility */ + .focus-enhanced:focus { + outline: 2px solid var(--color-accent); + outline-offset: 2px; + box-shadow: + 0 0 0 4px rgba(0, 115, 206, 0.15), + 0 4px 12px var(--color-shadow-accent); + } + + .dark .focus-enhanced:focus { + outline-color: #60a5fa; + box-shadow: + 0 0 0 4px rgba(96, 165, 250, 0.15), + 0 4px 12px rgba(96, 165, 250, 0.2); + } + + /* Responsive Design Enhancements */ + @media (max-width: 768px) { + .card-enhanced { + padding: 1rem; + border-radius: 0.75rem; + } + + .btn-enhanced { + padding: 0.75rem 1.5rem; + font-size: 0.8rem; + } + + .modal-enhanced { + border-radius: 1rem; + margin: 1rem; + } + + .dark-mode-toggle-new { + padding: 0.5rem; + } + } + + /* Reduced Motion Support */ + @media (prefers-reduced-motion: reduce) { + * { + transition: none !important; + animation: none !important; + } + } + + /* High Contrast Mode Support */ + @media (prefers-contrast: high) { + :root { + --color-shadow: rgba(0, 0, 0, 0.2); + --color-shadow-strong: rgba(0, 0, 0, 0.3); + --color-border-primary: #000000; + } + + .dark { + --color-border-primary: #ffffff; + } + } +} + +/* Admin Panel spezifische Styles */ +@layer components { + /* Dark Mode Styles für Admin Panel */ + .dark .bg-dark-card { + @apply bg-dark-surface transition-colors; + } + + /* Alternative direkte Definition ohne Zirkularität */ + .bg-dark-surface { + background-color: #1e293b; + } + + /* Übergangseffekt für alle Komponenten */ + .transition-all-colors { + @apply transition-colors duration-300; + } + + /* Admin Panel Container */ + .admin-container { + @apply max-w-7xl mx-auto p-4 md:p-8; + } + + /* Admin Stats Cards */ + .admin-stats { + @apply grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-8; + } + + .stat-card { + @apply bg-white/60 dark:bg-black/70 rounded-xl border border-gray-200/60 dark:border-slate-700/30 p-5 relative overflow-hidden shadow-2xl hover:shadow-2xl transition-all duration-300 hover:-translate-y-1 backdrop-blur-xl; + 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 { + @apply absolute top-4 right-4 opacity-15 text-4xl; + } + + .stat-title { + @apply text-sm text-slate-500 dark:text-slate-400 mb-2 font-medium uppercase; + } + + .stat-value { + @apply text-2xl font-bold text-slate-900 dark:text-white mb-1; + } + + .stat-desc { + @apply text-sm text-slate-500 dark:text-slate-400; + } + + /* Navigation Tabs */ + .nav-tabs { + @apply flex border-b border-gray-200 dark:border-slate-700/30 mb-4 overflow-x-auto; + } + + .nav-tab { + @apply py-4 px-6 text-slate-600 dark:text-slate-300 border-b-2 border-transparent cursor-pointer transition-all duration-200 whitespace-nowrap hover:text-slate-900 dark:hover:text-white hover:bg-slate-50 dark:hover:bg-slate-800/50; + } + + .nav-tab.active { + @apply text-slate-900 dark:text-white border-b-2 border-black dark:border-white font-medium; + } + + /* Tab Content */ + .tab-content { + @apply mt-8; + } + + .tab-pane { + @apply hidden; + } + + .tab-pane.active { + @apply block; + } + + /* Formulare für Admin Panel */ + .form-group { + @apply mb-4; + } + + .form-label { + @apply block mb-2 text-sm font-medium text-slate-700 dark:text-slate-300; + } + + .form-input, + .form-select, + .form-textarea { + @apply w-full px-3 py-2 bg-white/60 dark:bg-slate-800/60 border border-gray-300/60 dark:border-slate-600/60 rounded-lg text-slate-900 dark:text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-slate-500 focus:border-transparent transition-all duration-200 backdrop-blur-lg; + 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 { + @apply min-w-full divide-y divide-gray-200 dark:divide-slate-700; + } + + .admin-table thead { + @apply bg-slate-50 dark:bg-slate-800; + } + + .admin-table th { + @apply px-6 py-3 text-left text-xs font-medium text-slate-500 dark:text-slate-400 uppercase tracking-wider; + } + + .admin-table tbody { + @apply bg-white dark:bg-dark-surface divide-y divide-gray-200 dark:divide-slate-700; + } + + .admin-table tr { + @apply hover:bg-slate-50 dark:hover:bg-slate-700/50 transition-colors; + } + + .admin-table td { + @apply px-6 py-4 whitespace-nowrap text-sm text-slate-900 dark:text-white; + } + + /* Status Badges */ + .badge { + @apply px-2 inline-flex text-xs leading-5 font-semibold rounded-full; + } + + .badge-success { + @apply bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200; + } + + .badge-error { + @apply bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200; + } + + .badge-warning { + @apply bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200; + } + + .badge-info { + @apply bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200; + } + + /* Drucker-Karten */ + .printer-card { + @apply bg-white/60 dark:bg-black/70 rounded-xl border border-gray-200/60 dark:border-slate-700/30 p-6 shadow-2xl hover:shadow-2xl transition-all duration-300 hover:-translate-y-1 backdrop-blur-xl; + 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 { + @apply flex justify-between items-center mb-4; + } + + .printer-name { + @apply text-xl font-bold text-slate-900 dark:text-white; + } + + .printer-actions { + @apply flex space-x-2; + } + + .printer-info { + @apply grid grid-cols-2 gap-4 mb-4; + } + + .printer-status { + @apply flex items-center mt-4; + } + + /* Status Indikatoren */ + .status-indicator { + @apply w-3 h-3 rounded-full mr-2; + } + + .status-running { + @apply bg-green-500; + animation: pulse 2s infinite; + } + + .status-stopped { + @apply bg-red-500; + } + + /* 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 { + @apply p-3 border-l-4 mb-2 rounded-r-lg bg-white dark:bg-slate-800 hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors; + } + + .log-debug { + @apply border-gray-400 dark:border-gray-500; + } + + .log-info { + @apply border-blue-400 dark:border-blue-500; + } + + .log-warning { + @apply border-yellow-400 dark:border-yellow-500; + } + + .log-error { + @apply border-red-400 dark:border-red-500; + } + + .log-critical { + @apply border-purple-400 dark:border-purple-500; + } + + /* Scheduler Status */ + .scheduler-status { + @apply flex items-center p-4 bg-white dark:bg-slate-800 rounded-lg border border-gray-200 dark:border-slate-700 shadow-md; + } + + /* Fortschrittsbalken */ + .progress-bar { + @apply w-full h-2 bg-gray-200 dark:bg-slate-700 rounded-full overflow-hidden; + } + + .progress-bar-fill { + @apply h-full transition-all duration-300; + } + + .progress-bar-fill-blue { + @apply bg-blue-500 dark:bg-blue-600; + } + + .progress-bar-fill-green { + @apply bg-green-500 dark:bg-green-600; + } + + .progress-bar-fill-purple { + @apply bg-purple-500 dark:bg-purple-600; + } + + /* Benachrichtigungen */ + .notification { + @apply fixed top-4 right-4 max-w-md p-4 rounded-2xl shadow-2xl transform translate-x-full opacity-0 transition-all duration-500 z-50; + background: rgba(255, 255, 255, 0.08); + 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.25); + box-shadow: + 0 32px 64px rgba(0, 0, 0, 0.25), + 0 12px 24px 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: notification-slide-in 0.6s cubic-bezier(0.4, 0, 0.2, 1); + } + + .dark .notification { + background: rgba(0, 0, 0, 0.2); + backdrop-filter: blur(40px) saturate(180%) brightness(120%) contrast(115%); + -webkit-backdrop-filter: blur(40px) saturate(180%) brightness(120%) contrast(115%); + border: 1px solid rgba(255, 255, 255, 0.15); + box-shadow: + 0 32px 64px rgba(0, 0, 0, 0.6), + 0 12px 24px 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); + } + + .notification.show { + @apply translate-x-0 opacity-100; + } + + .notification:hover { + transform: translateY(-2px) scale(1.02); + box-shadow: + 0 40px 80px rgba(0, 0, 0, 0.3), + 0 16px 32px rgba(0, 0, 0, 0.2), + inset 0 1px 0 rgba(255, 255, 255, 0.5), + 0 0 0 1px rgba(255, 255, 255, 0.15); + } + + .dark .notification:hover { + box-shadow: + 0 40px 80px rgba(0, 0, 0, 0.7), + 0 16px 32px rgba(0, 0, 0, 0.5), + inset 0 1px 0 rgba(255, 255, 255, 0.3), + 0 0 0 1px rgba(255, 255, 255, 0.1); + } + + .notification-success { + @apply text-green-100; + background: linear-gradient(135deg, + rgba(34, 197, 94, 0.25) 0%, + rgba(134, 239, 172, 0.18) 50%, + rgba(34, 197, 94, 0.12) 100%); + border: 1px solid rgba(34, 197, 94, 0.4); + box-shadow: + 0 32px 64px rgba(34, 197, 94, 0.2), + 0 12px 24px rgba(34, 197, 94, 0.1), + inset 0 1px 0 rgba(255, 255, 255, 0.4), + 0 0 0 1px rgba(34, 197, 94, 0.3); + } + + .notification-error { + @apply text-red-100; + background: linear-gradient(135deg, + rgba(239, 68, 68, 0.25) 0%, + rgba(252, 165, 165, 0.18) 50%, + rgba(239, 68, 68, 0.12) 100%); + border: 1px solid rgba(239, 68, 68, 0.4); + box-shadow: + 0 32px 64px rgba(239, 68, 68, 0.2), + 0 12px 24px rgba(239, 68, 68, 0.1), + inset 0 1px 0 rgba(255, 255, 255, 0.4), + 0 0 0 1px rgba(239, 68, 68, 0.3); + } + + .notification-warning { + @apply text-yellow-100; + background: linear-gradient(135deg, + rgba(245, 158, 11, 0.25) 0%, + rgba(252, 211, 77, 0.18) 50%, + rgba(245, 158, 11, 0.12) 100%); + border: 1px solid rgba(245, 158, 11, 0.4); + box-shadow: + 0 32px 64px rgba(245, 158, 11, 0.2), + 0 12px 24px rgba(245, 158, 11, 0.1), + inset 0 1px 0 rgba(255, 255, 255, 0.4), + 0 0 0 1px rgba(245, 158, 11, 0.3); + } + + .notification-info { + @apply text-blue-100; + background: linear-gradient(135deg, + rgba(59, 130, 246, 0.25) 0%, + rgba(147, 197, 253, 0.18) 50%, + rgba(59, 130, 246, 0.12) 100%); + border: 1px solid rgba(59, 130, 246, 0.4); + box-shadow: + 0 32px 64px rgba(59, 130, 246, 0.2), + 0 12px 24px rgba(59, 130, 246, 0.1), + inset 0 1px 0 rgba(255, 255, 255, 0.4), + 0 0 0 1px rgba(59, 130, 246, 0.3); + } + + /* Toast-Benachrichtigungen - Einheitlich */ + .toast-notification { + @apply fixed z-50 p-4 rounded-2xl shadow-2xl transform transition-all duration-500 text-sm font-medium; + background: rgba(255, 255, 255, 0.08); + 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.25); + box-shadow: + 0 32px 64px rgba(0, 0, 0, 0.25), + 0 12px 24px 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); + } + + .dark .toast-notification { + background: rgba(0, 0, 0, 0.2); + backdrop-filter: blur(40px) saturate(180%) brightness(120%) contrast(115%); + -webkit-backdrop-filter: blur(40px) saturate(180%) brightness(120%) contrast(115%); + border: 1px solid rgba(255, 255, 255, 0.15); + box-shadow: + 0 32px 64px rgba(0, 0, 0, 0.6), + 0 12px 24px 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); + } + + /* Alert-Benachrichtigungen - Verbessert */ + .alert { + @apply p-6 rounded-2xl border mb-6 shadow-2xl; + background: rgba(255, 255, 255, 0.12); + 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.25); + 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); + animation: alert-fade-in 0.5s ease-out; + } + + .dark .alert { + 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); + } + + .alert-success { + @apply text-green-900 dark:text-green-100; + background: linear-gradient(135deg, + rgba(34, 197, 94, 0.15) 0%, + rgba(134, 239, 172, 0.1) 50%, + rgba(34, 197, 94, 0.08) 100%); + border: 1px solid rgba(34, 197, 94, 0.3); + } + + .alert-error { + @apply text-red-900 dark:text-red-100; + background: linear-gradient(135deg, + rgba(239, 68, 68, 0.15) 0%, + rgba(252, 165, 165, 0.1) 50%, + rgba(239, 68, 68, 0.08) 100%); + border: 1px solid rgba(239, 68, 68, 0.3); + } + + .alert-warning { + @apply text-yellow-900 dark:text-yellow-100; + background: linear-gradient(135deg, + rgba(245, 158, 11, 0.15) 0%, + rgba(252, 211, 77, 0.1) 50%, + rgba(245, 158, 11, 0.08) 100%); + border: 1px solid rgba(245, 158, 11, 0.3); + } + + .alert-info { + @apply text-blue-900 dark:text-blue-100; + background: linear-gradient(135deg, + rgba(59, 130, 246, 0.15) 0%, + rgba(147, 197, 253, 0.1) 50%, + rgba(59, 130, 246, 0.08) 100%); + border: 1px solid rgba(59, 130, 246, 0.3); + } + + /* Browser-Notification-Container */ + .browser-notification { + @apply fixed top-4 left-4 max-w-sm p-4 rounded-2xl shadow-2xl z-50; + background: rgba(255, 255, 255, 0.08); + 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.25); + box-shadow: + 0 32px 64px rgba(0, 0, 0, 0.25), + 0 12px 24px 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: notification-slide-left 0.6s cubic-bezier(0.4, 0, 0.2, 1); + } + + .dark .browser-notification { + background: rgba(0, 0, 0, 0.2); + backdrop-filter: blur(40px) saturate(180%) brightness(120%) contrast(115%); + -webkit-backdrop-filter: blur(40px) saturate(180%) brightness(120%) contrast(115%); + border: 1px solid rgba(255, 255, 255, 0.15); + box-shadow: + 0 32px 64px rgba(0, 0, 0, 0.6), + 0 12px 24px 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); + } + + /* Notification-Animationen */ + @keyframes notification-slide-in { + 0% { + opacity: 0; + transform: translateX(100%) translateY(-20px) scale(0.9); + backdrop-filter: blur(0px); + } + 50% { + opacity: 0.8; + transform: translateX(20px) translateY(-10px) scale(1.05); + backdrop-filter: blur(20px); + } + 100% { + opacity: 1; + transform: translateX(0) translateY(0) scale(1); + backdrop-filter: blur(40px); + } + } + + @keyframes notification-slide-out { + 0% { + opacity: 1; + transform: translateX(0) translateY(0) scale(1); + } + 100% { + opacity: 0; + transform: translateX(100%) translateY(-20px) scale(0.9); + } + } + + @keyframes notification-slide-left { + 0% { + opacity: 0; + transform: translateX(-100%) translateY(-20px) scale(0.9); + backdrop-filter: blur(0px); + } + 50% { + opacity: 0.8; + transform: translateX(-20px) translateY(-10px) scale(1.05); + backdrop-filter: blur(20px); + } + 100% { + opacity: 1; + transform: translateX(0) translateY(0) scale(1); + backdrop-filter: blur(40px); + } + } + + @keyframes alert-fade-in { + 0% { + opacity: 0; + transform: translateY(-20px) scale(0.95); + } + 100% { + opacity: 1; + transform: translateY(0) scale(1); + } + } + + .notification.hiding { + animation: notification-slide-out 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards; + } + + /* Notification-Icons mit Glassmorphism */ + .notification-icon { + @apply flex items-center justify-center w-8 h-8 rounded-full mr-3 flex-shrink-0; + background: rgba(255, 255, 255, 0.2); + backdrop-filter: blur(20px); + -webkit-backdrop-filter: blur(20px); + border: 1px solid rgba(255, 255, 255, 0.3); + box-shadow: + 0 8px 16px rgba(0, 0, 0, 0.1), + inset 0 1px 0 rgba(255, 255, 255, 0.4); + } + + .notification-content { + @apply flex-1; + } + + .notification-title { + @apply font-semibold text-sm mb-1; + } + + .notification-message { + @apply text-sm opacity-90; + } + + .notification-close { + @apply ml-3 p-1 rounded-lg opacity-70 hover:opacity-100 transition-opacity; + 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); + } + + .notification-close:hover { + background: rgba(255, 255, 255, 0.2); + transform: scale(1.1); + } + + /* Multiple Notifications Container */ + .notifications-container { + @apply fixed top-4 right-4 z-50 space-y-3 max-w-md; + } + + .notifications-container-left { + @apply fixed top-4 left-4 z-50 space-y-3 max-w-sm; + } + + /* Flash-Message-Verbesserungen - Vereinheitlicht */ + .flash-message-light { + background: linear-gradient(135deg, + rgba(255, 255, 255, 0.95) 0%, + rgba(248, 250, 252, 0.9) 100%); + backdrop-filter: blur(32px) saturate(200%) brightness(120%); + -webkit-backdrop-filter: blur(32px) saturate(200%) brightness(120%); + border: 1px solid rgba(226, 232, 240, 0.6); + box-shadow: + 0 25px 50px rgba(0, 0, 0, 0.1), + 0 12px 24px rgba(0, 115, 206, 0.05), + inset 0 1px 0 rgba(255, 255, 255, 0.8); + color: var(--color-text-primary); + } + + .flash-message-light.success { + border-left: 4px solid #10b981; + background: linear-gradient(135deg, + rgba(236, 253, 245, 0.95) 0%, + rgba(209, 250, 229, 0.9) 100%); + } + + .flash-message-light.error { + border-left: 4px solid #ef4444; + background: linear-gradient(135deg, + rgba(254, 242, 242, 0.95) 0%, + rgba(252, 165, 165, 0.9) 100%); + } + + .flash-message-light.warning { + border-left: 4px solid #fbbf24; + background: linear-gradient(135deg, + rgba(255, 251, 235, 0.95) 0%, + rgba(254, 243, 199, 0.9) 100%); + } + + .flash-message-light.info { + border-left: 4px solid #3b82f6; + background: linear-gradient(135deg, + rgba(239, 246, 255, 0.95) 0%, + rgba(219, 234, 254, 0.9) 100%); + } + + /* Premium Table Styles */ + .table-enhanced { + background: var(--gradient-card); + border: 1px solid var(--color-border-primary); + border-radius: var(--card-radius); + overflow: hidden; + box-shadow: + 0 4px 20px var(--color-shadow), + 0 2px 8px rgba(0, 115, 206, 0.04), + inset 0 1px 0 rgba(255, 255, 255, 0.6); + } + + .table-enhanced th { + background: linear-gradient(135deg, + var(--color-bg-secondary) 0%, + var(--color-bg-tertiary) 100%); + color: var(--color-text-primary); + font-weight: 600; + padding: 1rem 1.5rem; + border-bottom: 1px solid var(--color-border-primary); + position: relative; + } + + .table-enhanced th::after { + content: ''; + position: absolute; + bottom: 0; + left: 0; + right: 0; + height: 1px; + background: linear-gradient(90deg, + transparent 0%, + var(--color-border-secondary) 50%, + transparent 100%); + } + + .table-enhanced td { + padding: 1rem 1.5rem; + border-bottom: 1px solid var(--color-border-primary); + color: var(--color-text-secondary); + transition: all 0.2s ease; + } + + .table-enhanced tbody tr:hover { + background: var(--color-bg-secondary); + transform: scale(1.002); + } + + .dark .table-enhanced { + background: rgba(10, 10, 10, 0.8); + border-color: var(--color-border-primary); + } + + .dark .table-enhanced th { + background: rgba(26, 26, 26, 0.8); + color: var(--color-text-primary); + } + + .dark .table-enhanced tbody tr:hover { + background: rgba(26, 26, 26, 0.6); + } + + /* Premium Modal Styles */ + .modal-enhanced { + background: linear-gradient(135deg, + rgba(255, 255, 255, 0.98) 0%, + rgba(248, 250, 252, 0.95) 50%, + rgba(255, 255, 255, 0.98) 100%); + backdrop-filter: blur(32px) saturate(220%) brightness(120%); + -webkit-backdrop-filter: blur(32px) saturate(220%) brightness(120%); + border: 1px solid rgba(226, 232, 240, 0.7); + border-radius: 1.5rem; + box-shadow: + 0 50px 100px rgba(0, 0, 0, 0.15), + 0 20px 40px rgba(0, 115, 206, 0.08), + inset 0 2px 0 rgba(255, 255, 255, 0.9); + position: relative; + overflow: hidden; + } + + .modal-enhanced::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 1px; + background: linear-gradient(90deg, + transparent 0%, + rgba(226, 232, 240, 0.8) 50%, + transparent 100%); + } + + .dark .modal-enhanced { + background: rgba(0, 0, 0, 0.95); + border-color: rgba(42, 42, 42, 0.7); + box-shadow: + 0 50px 100px rgba(0, 0, 0, 0.5), + inset 0 2px 0 rgba(255, 255, 255, 0.05); + } + + /* Enhanced Status Badges */ + .status-badge-enhanced { + display: inline-flex; + align-items: center; + padding: 0.5rem 1rem; + font-size: 0.75rem; + font-weight: 700; + border-radius: 9999px; + text-transform: uppercase; + letter-spacing: 0.05em; + border: 1px solid transparent; + transition: all 0.2s ease; + position: relative; + overflow: hidden; + } + + .status-badge-enhanced::before { + content: ''; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); + transition: left 0.5s ease; + } + + .status-badge-enhanced:hover::before { + left: 100%; + } + + .status-online-enhanced { + background: linear-gradient(135deg, #ecfdf5 0%, #a7f3d0 100%); + color: #065f46; + border-color: rgba(16, 185, 129, 0.3); + } + + .status-offline-enhanced { + background: linear-gradient(135deg, #fef2f2 0%, #fca5a5 100%); + color: #991b1b; + border-color: rgba(239, 68, 68, 0.3); + } + + .status-printing-enhanced { + background: linear-gradient(135deg, #eff6ff 0%, #bfdbfe 100%); + color: #1e40af; + border-color: rgba(59, 130, 246, 0.3); + } + + /* Dark Mode Toggle - Premium Design */ + .dark-mode-toggle-new { + position: relative; + display: flex; + cursor: pointer; + align-items: center; + justify-content: center; + border-radius: 9999px; + padding: 0.625rem; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + background: linear-gradient(135deg, + rgba(248, 250, 252, 0.9) 0%, + rgba(241, 245, 249, 0.8) 100%); + border: 1px solid rgba(226, 232, 240, 0.7); + box-shadow: + 0 4px 12px rgba(0, 0, 0, 0.06), + 0 2px 4px rgba(0, 115, 206, 0.04), + inset 0 1px 0 rgba(255, 255, 255, 0.8); + color: var(--color-text-secondary); + z-index: 100; + } + + .dark-mode-toggle-new:hover { + transform: translateY(-2px) scale(1.05); + background: linear-gradient(135deg, + rgba(248, 250, 252, 0.95) 0%, + rgba(241, 245, 249, 0.85) 100%); + box-shadow: + 0 8px 20px rgba(0, 0, 0, 0.1), + 0 4px 8px rgba(0, 115, 206, 0.08), + inset 0 1px 0 rgba(255, 255, 255, 0.9); + } + + .dark-mode-toggle-new:active { + transform: translateY(-1px) scale(0.98); + transition: transform 0.1s; + } + + .dark .dark-mode-toggle-new { + background: rgba(10, 10, 10, 0.8); + border: 1px solid rgba(42, 42, 42, 0.6); + box-shadow: + 0 4px 12px rgba(0, 0, 0, 0.3), + inset 0 1px 0 rgba(255, 255, 255, 0.05); + color: var(--color-text-secondary); + } + + .dark .dark-mode-toggle-new:hover { + background: rgba(10, 10, 10, 0.9); + box-shadow: + 0 8px 20px rgba(0, 0, 0, 0.4), + inset 0 1px 0 rgba(255, 255, 255, 0.08); + } + + /* Icon-Animation für Dark Mode Toggle */ + .dark-mode-toggle-new .sun-icon, + .dark-mode-toggle-new .moon-icon { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + } + + .dark-mode-toggle-new .sun-icon:not(.hidden) { + animation: icon-appear 0.5s cubic-bezier(0.25, 1, 0.5, 1) forwards; + } + + .dark-mode-toggle-new .moon-icon:not(.hidden) { + animation: icon-appear 0.5s cubic-bezier(0.25, 1, 0.5, 1) forwards; + } + + @keyframes icon-appear { + 0% { + opacity: 0; + transform: translate(-50%, -50%) scale(0.5) rotate(-20deg); + } + 100% { + opacity: 1; + transform: translate(-50%, -50%) 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 - Premium Design */ + .user-menu-button-new { + display: flex; + align-items: center; + gap: 0.5rem; + border-radius: 0.75rem; + padding: 0.5rem; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + background: linear-gradient(135deg, + rgba(248, 250, 252, 0.8) 0%, + rgba(241, 245, 249, 0.7) 100%); + border: 1px solid rgba(226, 232, 240, 0.6); + box-shadow: + 0 2px 8px rgba(0, 0, 0, 0.05), + inset 0 1px 0 rgba(255, 255, 255, 0.7); + } + + .user-menu-button-new:hover { + transform: translateY(-1px); + background: linear-gradient(135deg, + rgba(248, 250, 252, 0.9) 0%, + rgba(241, 245, 249, 0.8) 100%); + box-shadow: + 0 4px 12px rgba(0, 0, 0, 0.08), + 0 2px 4px rgba(0, 115, 206, 0.04), + inset 0 1px 0 rgba(255, 255, 255, 0.8); + } + + .dark .user-menu-button-new { + background: rgba(10, 10, 10, 0.7); + border-color: rgba(42, 42, 42, 0.6); + box-shadow: + 0 2px 8px rgba(0, 0, 0, 0.2), + inset 0 1px 0 rgba(255, 255, 255, 0.03); + } + + .dark .user-menu-button-new:hover { + background: rgba(10, 10, 10, 0.8); + box-shadow: + 0 4px 12px rgba(0, 0, 0, 0.3), + inset 0 1px 0 rgba(255, 255, 255, 0.05); + } + + /* Enhanced Hover Effects */ + .hover-lift-enhanced { + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + } + + .hover-lift-enhanced:hover { + transform: translateY(-3px) scale(1.01); + box-shadow: + 0 12px 30px var(--color-shadow-strong), + 0 6px 15px var(--color-shadow-accent); + } + + .dark .hover-lift-enhanced:hover { + box-shadow: 0 12px 30px var(--color-shadow); + } + + /* Smooth Scrollbar for Light Mode */ + ::-webkit-scrollbar { + width: 8px; + height: 8px; + } + + ::-webkit-scrollbar-track { + background: var(--color-bg-secondary); + border-radius: 4px; + } + + ::-webkit-scrollbar-thumb { + background: linear-gradient(180deg, + var(--color-border-secondary) 0%, + var(--color-border-primary) 100%); + border-radius: 4px; + transition: background 0.2s ease; + } + + ::-webkit-scrollbar-thumb:hover { + background: linear-gradient(180deg, + var(--color-accent) 0%, + var(--color-accent-hover) 100%); + } + + .dark ::-webkit-scrollbar-track { + background: var(--color-bg-secondary); + } + + .dark ::-webkit-scrollbar-thumb { + background: var(--color-border-primary); + } + + .dark ::-webkit-scrollbar-thumb:hover { + background: #60a5fa; + } + + /* Loading States */ + .loading-enhanced { + position: relative; + overflow: hidden; + } + + .loading-enhanced::after { + content: ''; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient(90deg, + transparent, + rgba(0, 115, 206, 0.1), + transparent); + animation: loading-shimmer 2s infinite; + } + + @keyframes loading-shimmer { + 0% { left: -100%; } + 100% { left: 100%; } + } + + /* Focus States for Accessibility */ + .focus-enhanced:focus { + outline: 2px solid var(--color-accent); + outline-offset: 2px; + box-shadow: + 0 0 0 4px rgba(0, 115, 206, 0.15), + 0 4px 12px var(--color-shadow-accent); + } + + .dark .focus-enhanced:focus { + outline-color: #60a5fa; + box-shadow: + 0 0 0 4px rgba(96, 165, 250, 0.15), + 0 4px 12px rgba(96, 165, 250, 0.2); + } + + /* Responsive Design Enhancements */ + @media (max-width: 768px) { + .card-enhanced { + padding: 1rem; + border-radius: 0.75rem; + } + + .btn-enhanced { + padding: 0.75rem 1.5rem; + font-size: 0.8rem; + } + + .modal-enhanced { + border-radius: 1rem; + margin: 1rem; + } + + .dark-mode-toggle-new { + padding: 0.5rem; + } + } + + /* Reduced Motion Support */ + @media (prefers-reduced-motion: reduce) { + * { + transition: none !important; + animation: none !important; + } + } + + /* High Contrast Mode Support */ + @media (prefers-contrast: high) { + :root { + --color-shadow: rgba(0, 0, 0, 0.2); + --color-shadow-strong: rgba(0, 0, 0, 0.3); + --color-border-primary: #000000; + } + + .dark { + --color-border-primary: #ffffff; + } + } +} + +/* Glassmorphism Flash Messages */ +.flash-message { + @apply fixed top-4 right-4 px-6 py-4 rounded-2xl text-sm font-medium shadow-2xl transform transition-all duration-500 z-50 border; + /* Verstärkter Glassmorphism-Effekt */ + background: rgba(255, 255, 255, 0.08); + 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.25); + box-shadow: + 0 32px 64px rgba(0, 0, 0, 0.25), + 0 12px 24px 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: flash-slide-in 0.5s cubic-bezier(0.4, 0, 0.2, 1); + transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); +} + +.dark .flash-message { + background: rgba(0, 0, 0, 0.2); + backdrop-filter: blur(40px) saturate(180%) brightness(120%) contrast(115%); + -webkit-backdrop-filter: blur(40px) saturate(180%) brightness(120%) contrast(115%); + border: 1px solid rgba(255, 255, 255, 0.15); + box-shadow: + 0 32px 64px rgba(0, 0, 0, 0.6), + 0 12px 24px 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); +} + +.flash-message:hover { + transform: translateY(-2px) scale(1.02); + box-shadow: + 0 40px 80px rgba(0, 0, 0, 0.3), + 0 16px 32px rgba(0, 0, 0, 0.2), + inset 0 1px 0 rgba(255, 255, 255, 0.5), + 0 0 0 1px rgba(255, 255, 255, 0.15); +} + +.dark .flash-message:hover { + box-shadow: + 0 40px 80px rgba(0, 0, 0, 0.7), + 0 16px 32px rgba(0, 0, 0, 0.5), + inset 0 1px 0 rgba(255, 255, 255, 0.3), + 0 0 0 1px rgba(255, 255, 255, 0.1); +} + +.flash-message.info { + @apply text-blue-100; + background: linear-gradient(135deg, + rgba(59, 130, 246, 0.2) 0%, + rgba(147, 197, 253, 0.15) 50%, + rgba(59, 130, 246, 0.1) 100%); + border: 1px solid rgba(59, 130, 246, 0.3); +} + +.flash-message.success { + @apply text-green-100; + background: linear-gradient(135deg, + rgba(34, 197, 94, 0.2) 0%, + rgba(134, 239, 172, 0.15) 50%, + rgba(34, 197, 94, 0.1) 100%); + border: 1px solid rgba(34, 197, 94, 0.3); +} + +.flash-message.warning { + @apply text-yellow-100; + background: linear-gradient(135deg, + rgba(245, 158, 11, 0.2) 0%, + rgba(252, 211, 77, 0.15) 50%, + rgba(245, 158, 11, 0.1) 100%); + border: 1px solid rgba(245, 158, 11, 0.3); +} + +.flash-message.error { + @apply text-red-100; + background: linear-gradient(135deg, + rgba(239, 68, 68, 0.2) 0%, + rgba(252, 165, 165, 0.15) 50%, + rgba(239, 68, 68, 0.1) 100%); + border: 1px solid rgba(239, 68, 68, 0.3); +} + +/* Flash Message Animation */ +@keyframes flash-slide-in { + 0% { + opacity: 0; + transform: translateX(100%) translateY(-20px) scale(0.9); + backdrop-filter: blur(0px); + } + 50% { + opacity: 0.8; + transform: translateX(20px) translateY(-10px) scale(1.05); + backdrop-filter: blur(20px); + } + 100% { + opacity: 1; + transform: translateX(0) translateY(0) scale(1); + backdrop-filter: blur(40px); + } +} + +@keyframes flash-slide-out { + 0% { + opacity: 1; + transform: translateX(0) translateY(0) scale(1); + } + 100% { + opacity: 0; + transform: translateX(100%) translateY(-20px) scale(0.9); + } +} + +.flash-message.hiding { + animation: flash-slide-out 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards; +} + +/* Do Not Disturb System Styles */ +.dnd-toggle { + @apply relative inline-flex items-center h-6 rounded-full w-11 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500; + background: rgba(156, 163, 175, 0.3); + backdrop-filter: blur(10px); + border: 1px solid rgba(156, 163, 175, 0.2); +} + +.dnd-toggle.active { + background: rgba(239, 68, 68, 0.3); + border: 1px solid rgba(239, 68, 68, 0.4); +} + +.dnd-toggle-slider { + @apply inline-block h-4 w-4 rounded-full shadow-lg transform transition-transform duration-300; + background: rgba(255, 255, 255, 0.9); + backdrop-filter: blur(10px); + border: 1px solid rgba(255, 255, 255, 0.3); + box-shadow: + 0 4px 8px rgba(0, 0, 0, 0.2), + 0 2px 4px rgba(0, 0, 0, 0.1); + margin: 0.125rem; +} + +.dnd-toggle.active .dnd-toggle-slider { + transform: translateX(1.25rem); + background: rgba(255, 255, 255, 1); + box-shadow: + 0 6px 12px rgba(239, 68, 68, 0.3), + 0 3px 6px rgba(239, 68, 68, 0.2); +} + +.dnd-indicator { + @apply fixed top-4 left-4 z-50 flex items-center px-3 py-2 rounded-lg text-sm font-medium transition-all duration-300; + background: rgba(239, 68, 68, 0.1); + backdrop-filter: blur(20px) saturate(150%); + -webkit-backdrop-filter: blur(20px) saturate(150%); + border: 1px solid rgba(239, 68, 68, 0.3); + color: rgb(239, 68, 68); + transform: translateY(-100%); + opacity: 0; +} + +.dnd-indicator.active { + transform: translateY(0); + opacity: 1; +} + +.dnd-modal { + @apply fixed inset-0 z-50 flex items-center justify-center p-4; + background: rgba(0, 0, 0, 0.3); + backdrop-filter: blur(20px); + -webkit-backdrop-filter: blur(20px); +} + +.dnd-modal-content { + @apply w-full max-w-md rounded-2xl p-6 shadow-2xl transform transition-all; + background: rgba(255, 255, 255, 0.1); + backdrop-filter: blur(40px) saturate(200%) brightness(120%); + -webkit-backdrop-filter: blur(40px) saturate(200%) brightness(120%); + 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); +} + +.dark .dnd-modal-content { + background: rgba(0, 0, 0, 0.3); + backdrop-filter: blur(40px) saturate(180%) brightness(110%); + -webkit-backdrop-filter: blur(40px) saturate(180%) brightness(110%); + 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); +} + +/* DND Flash Message Override */ +.flash-message.dnd-suppressed { + animation: flash-fade-in 0.3s ease-out; + opacity: 0.3; + transform: scale(0.95); + pointer-events: none; +} + +@keyframes flash-fade-in { + 0% { + opacity: 0; + transform: scale(0.9); + } + 100% { + opacity: 0.3; + transform: scale(0.95); + } +} + +/* Notification Counter */ +.dnd-counter { + @apply absolute -top-2 -right-2 bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center font-bold; + background: rgba(239, 68, 68, 0.9); + backdrop-filter: blur(10px); + border: 1px solid rgba(255, 255, 255, 0.2); + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); + animation: dnd-counter-bounce 0.5s ease-out; +} + +@keyframes dnd-counter-bounce { + 0% { + transform: scale(0); + } + 50% { + transform: scale(1.2); + } + 100% { + transform: scale(1); + } +} + +@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 */ +@layer components { + /* Buttons mit verstärktem Glassmorphism */ + .btn-primary { + @apply text-white dark:text-slate-900 px-4 py-2 rounded-lg transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 shadow-2xl hover:-translate-y-0.5; + 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 { + @apply text-slate-900 dark:text-white px-4 py-2 rounded-lg transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-slate-500 focus:ring-offset-2 shadow-2xl hover:-translate-y-0.5; + 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 { + @apply border-2 border-black/70 hover:bg-black/70 dark:border-white/70 dark:hover:bg-white/70 text-black hover:text-white dark:text-white dark:hover:text-slate-900 px-4 py-2 rounded-lg transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 backdrop-blur-lg; + 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 { + @apply rounded-xl p-6 shadow-2xl transition-all duration-300; + 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 { + @apply rounded-xl p-6 shadow-2xl transition-all duration-300 hover:-translate-y-1; + 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 { + @apply flex items-center px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-slate-500 focus:ring-offset-2 text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-700/50 hover:shadow-md; + } + + .nav-link.active { + @apply text-slate-900 dark:text-white bg-slate-100 dark:bg-black shadow-sm; + } + + /* 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); + 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 { + @apply flex items-center space-x-2 transition-transform duration-300 hover:scale-105; + } + + .navbar-menu { + @apply flex items-center justify-center space-x-1 md:space-x-3 lg:space-x-6 p-3 mx-4 rounded-2xl border; + 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 { + @apply p-2 rounded-full transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-offset-2; + } + + /* User Menu Styles */ + .user-menu-button { + @apply flex items-center space-x-2 rounded-lg p-1 transition-all duration-300 hover:bg-gray-100/80 dark:hover:bg-slate-700/60 focus:outline-none focus:ring-2 focus:ring-slate-500 focus:ring-offset-2; + } + + .user-avatar { + @apply w-10 h-10 bg-black dark:bg-white text-white dark:text-slate-900 rounded-full flex items-center justify-center font-bold text-sm shadow-md transition-all duration-300 hover:shadow-lg; + } + + /* Avatar im Dropdown */ + .avatar-large { + @apply w-14 h-14 bg-black dark:bg-white text-white dark:text-slate-900 rounded-full flex items-center justify-center font-bold text-lg shadow-md; + } + + .user-dropdown-item { + @apply flex items-center px-4 py-3 text-sm text-slate-700 dark:text-slate-300 hover:bg-gray-100/80 dark:hover:bg-slate-700/60 hover:text-slate-900 dark:hover:text-white transition-all duration-300 focus:outline-none focus:bg-gray-100/80 dark:focus:bg-slate-700/60; + } + + .user-dropdown-separator { + @apply border-t border-gray-200/80 dark:border-slate-700/30 my-1; + } + + .menu-item { + @apply flex items-center space-x-2 px-4 py-2.5 text-slate-700 dark:text-slate-300 rounded-xl transition-all duration-300; + 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 { + @apply text-slate-900 dark:text-white; + 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 { + @apply text-slate-900 dark:text-white font-medium; + 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 { + @apply absolute right-0 mt-2 w-64 rounded-xl shadow-2xl z-50 overflow-hidden; + 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 { + @apply flex items-center p-4 border-b border-gray-200/80 dark:border-slate-700/30; + } + + .dropdown-item { + @apply flex items-center gap-3 px-4 py-3 text-sm text-slate-700 dark:text-slate-300 hover:bg-gray-100/80 dark:hover:bg-slate-700/60 hover:text-slate-900 dark:hover:text-white transition-all duration-300; + } + + .dropdown-divider { + @apply border-t border-gray-200/80 dark:border-slate-700/30; + } + + /* 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; + } +} + +/* Navbar Sticky Fix - Außerhalb von @layer für höhere Priorität */ +.navbar { + position: -webkit-sticky !important; + position: sticky !important; + top: 0 !important; + z-index: 50 !important; + width: 100% !important; + left: 0 !important; + right: 0 !important; + /* Verstärktes Glassmorphism Design */ + --navbar-blur: 40px; + --navbar-opacity: 0.15; + background: rgba(255, 255, 255, var(--navbar-opacity, 0.15)) !important; + backdrop-filter: blur(var(--navbar-blur, 40px)) saturate(200%) brightness(110%) contrast(105%) !important; + -webkit-backdrop-filter: blur(var(--navbar-blur, 40px)) saturate(200%) brightness(110%) contrast(105%) !important; + box-shadow: + 0 8px 32px rgba(0, 0, 0, 0.12), + 0 2px 8px rgba(0, 0, 0, 0.08), + inset 0 1px 0 rgba(255, 255, 255, 0.3), + 0 0 0 1px rgba(255, 255, 255, 0.15) !important; + border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; +} + +.dark .navbar { + --navbar-dark-opacity: 0.25; + background: rgba(0, 0, 0, var(--navbar-dark-opacity, 0.25)) !important; + backdrop-filter: blur(calc(var(--navbar-blur, 40px) + 5px)) saturate(180%) brightness(120%) contrast(115%) !important; + -webkit-backdrop-filter: blur(calc(var(--navbar-blur, 40px) + 5px)) saturate(180%) brightness(120%) contrast(115%) !important; + box-shadow: + 0 8px 32px rgba(0, 0, 0, 0.4), + 0 2px 8px 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.08) !important; + border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; +} + +/* Navbar Scroll-Effekt */ +.navbar.scrolled { + --navbar-blur: 50px; + --navbar-opacity: 0.25; + background: rgba(255, 255, 255, var(--navbar-opacity, 0.25)) !important; + backdrop-filter: blur(var(--navbar-blur, 50px)) saturate(220%) brightness(115%) contrast(110%) !important; + -webkit-backdrop-filter: blur(var(--navbar-blur, 50px)) saturate(220%) brightness(115%) contrast(110%) !important; + box-shadow: + 0 12px 40px rgba(0, 0, 0, 0.15), + 0 4px 12px 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.2) !important; +} + +.dark .navbar.scrolled { + --navbar-dark-opacity: 0.35; + background: rgba(0, 0, 0, var(--navbar-dark-opacity, 0.35)) !important; + backdrop-filter: blur(calc(var(--navbar-blur, 50px) + 5px)) saturate(200%) brightness(125%) contrast(120%) !important; + -webkit-backdrop-filter: blur(calc(var(--navbar-blur, 50px) + 5px)) saturate(200%) brightness(125%) contrast(120%) !important; + box-shadow: + 0 12px 40px rgba(0, 0, 0, 0.5), + 0 4px 12px 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.1) !important; +} + +/* Neue Navbar-Komponenten mit verbessertem Glassmorphism */ +.navbar-menu-new { + @apply flex items-center justify-center space-x-0.5 md:space-x-1; + max-width: 100%; + overflow-x: auto; + scrollbar-width: none; + -ms-overflow-style: none; + /* Glassmorphism für das Menü */ + background: rgba(255, 255, 255, 0.1); + backdrop-filter: blur(25px) saturate(170%) brightness(108%); + -webkit-backdrop-filter: blur(25px) saturate(170%) brightness(108%); + border-radius: 16px; + padding: 8px; + margin: 0 16px; + border: 1px solid rgba(255, 255, 255, 0.15); + box-shadow: + 0 6px 20px rgba(0, 0, 0, 0.1), + inset 0 1px 0 rgba(255, 255, 255, 0.2), + 0 0 0 1px rgba(255, 255, 255, 0.05); + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); +} + +.dark .navbar-menu-new { + background: rgba(0, 0, 0, 0.2); + backdrop-filter: blur(30px) saturate(150%) brightness(115%); + -webkit-backdrop-filter: blur(30px) saturate(150%) brightness(115%); + border: 1px solid rgba(255, 255, 255, 0.1); + box-shadow: + 0 6px 20px rgba(0, 0, 0, 0.3), + inset 0 1px 0 rgba(255, 255, 255, 0.1), + 0 0 0 1px rgba(255, 255, 255, 0.03); +} + +.navbar-menu-new::-webkit-scrollbar { + display: none; +} + +/* Glassmorphism Hover-Animation für Navbar-Menu */ +.navbar-menu-new:hover { + backdrop-filter: blur(35px) saturate(190%) brightness(112%); + -webkit-backdrop-filter: blur(35px) saturate(190%) brightness(112%); + box-shadow: + 0 8px 25px rgba(0, 0, 0, 0.15), + inset 0 1px 0 rgba(255, 255, 255, 0.3), + 0 0 0 1px rgba(255, 255, 255, 0.1); + transform: translateY(-1px); +} + +.dark .navbar-menu-new:hover { + backdrop-filter: blur(40px) saturate(170%) brightness(120%); + -webkit-backdrop-filter: blur(40px) saturate(170%) brightness(120%); + box-shadow: + 0 8px 25px rgba(0, 0, 0, 0.4), + inset 0 1px 0 rgba(255, 255, 255, 0.15), + 0 0 0 1px rgba(255, 255, 255, 0.05); +} + +.nav-item { + @apply flex items-center space-x-1.5 px-3 py-2.5 rounded-xl text-sm font-medium transition-all duration-300; + color: rgba(15, 23, 42, 0.85); + /* Gläserner Nav-Item */ + background: rgba(255, 255, 255, 0.08); + backdrop-filter: blur(15px) saturate(140%); + -webkit-backdrop-filter: blur(15px) saturate(140%); + border: 1px solid rgba(255, 255, 255, 0.1); + box-shadow: + 0 4px 12px rgba(0, 0, 0, 0.05), + inset 0 1px 0 rgba(255, 255, 255, 0.15); + position: relative; + overflow: hidden; + animation: nav-item-entrance 0.6s ease-out; +} + +/* Glassmorphism Hover-Effekt */ +.nav-item::before { + content: ''; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); + transition: left 0.5s; +} + +.nav-item:hover::before { + left: 100%; +} + +/* Zusätzlicher Glitter-Effekt */ +.nav-item::after { + content: ''; + position: absolute; + top: -50%; + left: -50%; + width: 200%; + height: 200%; + background: conic-gradient(from 0deg at 50% 50%, transparent 0deg, rgba(255, 255, 255, 0.1) 30deg, transparent 60deg); + opacity: 0; + transition: opacity 0.3s ease; + pointer-events: none; + animation: rotate 3s linear infinite; +} + +.nav-item:hover::after { + opacity: 1; +} + +.dark .nav-item { + color: rgba(255, 255, 255, 0.85); + background: rgba(0, 0, 0, 0.15); + backdrop-filter: blur(20px) saturate(130%); + -webkit-backdrop-filter: blur(20px) saturate(130%); + border: 1px solid rgba(255, 255, 255, 0.08); + box-shadow: + 0 4px 12px rgba(0, 0, 0, 0.2), + inset 0 1px 0 rgba(255, 255, 255, 0.08); +} + +.nav-item:hover { + color: rgba(15, 23, 42, 1); + background: rgba(255, 255, 255, 0.2); + backdrop-filter: blur(25px) saturate(160%) brightness(110%); + -webkit-backdrop-filter: blur(25px) saturate(160%) brightness(110%); + border: 1px solid rgba(255, 255, 255, 0.25); + box-shadow: + 0 8px 20px rgba(0, 0, 0, 0.12), + inset 0 1px 0 rgba(255, 255, 255, 0.3), + 0 0 0 1px rgba(255, 255, 255, 0.1); + transform: translateY(-2px) scale(1.02); +} + +.dark .nav-item:hover { + color: rgba(255, 255, 255, 1); + background: rgba(0, 0, 0, 0.25); + backdrop-filter: blur(30px) saturate(150%) brightness(120%); + -webkit-backdrop-filter: blur(30px) saturate(150%) brightness(120%); + border: 1px solid rgba(255, 255, 255, 0.15); + box-shadow: + 0 8px 20px 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); +} + +.nav-item.active { + color: rgba(15, 23, 42, 1); + background: rgba(255, 255, 255, 0.35); + backdrop-filter: blur(35px) saturate(180%) brightness(115%); + -webkit-backdrop-filter: blur(35px) saturate(180%) brightness(115%); + border: 1px solid rgba(255, 255, 255, 0.4); + box-shadow: + 0 12px 24px rgba(0, 0, 0, 0.15), + inset 0 1px 0 rgba(255, 255, 255, 0.5), + 0 0 0 1px rgba(59, 130, 246, 0.3); + transform: translateY(-1px); + animation: nav-item-active-glow 2s ease-in-out infinite alternate; +} + +.dark .nav-item.active { + color: rgba(255, 255, 255, 1); + background: rgba(0, 0, 0, 0.4); + backdrop-filter: blur(40px) saturate(160%) brightness(125%); + -webkit-backdrop-filter: blur(40px) saturate(160%) brightness(125%); + border: 1px solid rgba(255, 255, 255, 0.2); + box-shadow: + 0 12px 24px rgba(0, 0, 0, 0.4), + inset 0 1px 0 rgba(255, 255, 255, 0.2), + 0 0 0 1px rgba(59, 130, 246, 0.2); +} + +/* Animationen für Glassmorphism-Effekte */ +@keyframes nav-item-entrance { + 0% { + opacity: 0; + transform: translateY(10px) scale(0.95); + backdrop-filter: blur(5px); + } + 100% { + opacity: 1; + transform: translateY(0) scale(1); + backdrop-filter: blur(15px) saturate(140%); + } +} + +@keyframes nav-item-active-glow { + 0% { + box-shadow: + 0 12px 24px rgba(0, 0, 0, 0.15), + inset 0 1px 0 rgba(255, 255, 255, 0.5), + 0 0 0 1px rgba(59, 130, 246, 0.3); + } + 100% { + box-shadow: + 0 16px 32px rgba(0, 0, 0, 0.2), + inset 0 1px 0 rgba(255, 255, 255, 0.6), + 0 0 0 2px rgba(59, 130, 246, 0.5); + } +} + +@keyframes rotate { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} + +/* Glassmorphism-Partikel-Effekt */ +.navbar::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: + radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.1) 1px, transparent 1px), + radial-gradient(circle at 80% 50%, rgba(255, 255, 255, 0.1) 1px, transparent 1px), + radial-gradient(circle at 40% 20%, rgba(255, 255, 255, 0.05) 1px, transparent 1px), + radial-gradient(circle at 60% 80%, rgba(255, 255, 255, 0.05) 1px, transparent 1px); + opacity: 0; + animation: glassmorphism-particles 8s ease-in-out infinite; + pointer-events: none; +} + +.dark .navbar::before { + background: + radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.05) 1px, transparent 1px), + radial-gradient(circle at 80% 50%, rgba(255, 255, 255, 0.05) 1px, transparent 1px), + radial-gradient(circle at 40% 20%, rgba(255, 255, 255, 0.03) 1px, transparent 1px), + radial-gradient(circle at 60% 80%, rgba(255, 255, 255, 0.03) 1px, transparent 1px); +} + +@keyframes glassmorphism-particles { + 0%, 100% { + opacity: 0; + transform: scale(1); + } + 50% { + opacity: 1; + transform: scale(1.1); + } +} + +/* Dark Mode Toggle - Kompakteres Design */ +.dark-mode-toggle-new { + @apply relative p-2 rounded-full flex items-center justify-center transition-all duration-300 cursor-pointer; + background: rgba(241, 245, 249, 0.8); + border: 1px solid rgba(255, 255, 255, 0.7); + box-shadow: + 0 2px 8px rgba(0, 0, 0, 0.05), + 0 1px 2px rgba(0, 0, 0, 0.04); + color: #334155; + z-index: 100; +} + +.dark-mode-toggle-new:hover { + @apply transform -translate-y-0.5; + background: rgba(241, 245, 249, 0.9); + box-shadow: + 0 8px 16px rgba(0, 0, 0, 0.08), + 0 2px 4px rgba(0, 0, 0, 0.06); +} + +.dark-mode-toggle-new:active { + @apply transform scale-95; + 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 8px 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 8px 16px rgba(0, 0, 0, 0.2), + 0 2px 4px rgba(0, 0, 0, 0.15); +} + +/* Icon-Animation */ +.dark-mode-toggle-new .sun-icon, +.dark-mode-toggle-new .moon-icon { + @apply absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 transition-all duration-300; +} + +.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 - Kompakteres Design */ +.user-menu-button-new { + @apply flex items-center space-x-1.5 rounded-lg p-1 transition-all duration-300; + background: rgba(241, 245, 249, 0.6); + border: 1px solid rgba(255, 255, 255, 0.6); + box-shadow: + 0 2px 8px 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 8px 16px rgba(0, 0, 0, 0.06), + 0 2px 4px 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 8px 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 8px 16px rgba(0, 0, 0, 0.15), + 0 2px 4px rgba(0, 0, 0, 0.1); +} + +/* User Avatar - Kompakteres Design */ +.user-avatar-new { + @apply h-7 w-7 rounded-full flex items-center justify-center text-white font-semibold text-xs shadow-md transition-all duration-300; + background: linear-gradient(135deg, #000000, #333333); + box-shadow: + 0 2px 4px rgba(0, 0, 0, 0.2), + 0 1px 2px rgba(0, 0, 0, 0.1); +} + +.dark .user-avatar-new { + background: linear-gradient(135deg, #f8fafc, #e2e8f0); + color: #0f172a; + box-shadow: + 0 2px 4px rgba(0, 0, 0, 0.3), + 0 1px 2px rgba(0, 0, 0, 0.2); +} + +/* Login Button - Kompakteres Design */ +.login-button-new { + @apply flex items-center px-3 py-1.5 rounded-lg text-xs 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 8px 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 8px 16px rgba(0, 0, 0, 0.15), + 0 3px 4px 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 8px 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 8px 16px rgba(0, 0, 0, 0.25), + 0 3px 4px rgba(0, 0, 0, 0.2); +} + +/* Mobile Menu - Kompakteres 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: 400px; + 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-2.5 px-3 py-2.5 rounded-lg text-sm 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 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 { + @apply flex items-center px-4 py-3 text-sm text-slate-700 dark:text-slate-200 hover:bg-slate-50 dark:hover:bg-slate-800 transition-all duration-200 cursor-pointer; +} + +.user-dropdown-item:first-child { + @apply rounded-t-xl; +} + +.user-dropdown-item:last-child { + @apply rounded-b-xl; +} + +.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 { + @apply w-4 h-4 mr-3 text-slate-500 dark:text-slate-400 transition-colors duration-200; +} + +.user-dropdown-item:hover .user-dropdown-icon { + @apply text-slate-700 dark:text-slate-200; +} + +/* Divider in User Dropdown */ +.user-dropdown-divider { + @apply border-t border-slate-200 dark:border-slate-700 my-1; +} + +/* User Info Section in Dropdown */ +.user-info-section { + @apply px-4 py-3 border-b border-slate-200 dark:border-slate-700; + background: rgba(248, 250, 252, 0.5); +} + +.dark .user-info-section { + background: rgba(30, 41, 59, 0.5); +} + +.user-info-name { + @apply text-sm font-semibold text-slate-900 dark:text-white; +} + +.user-info-role { + @apply text-xs text-slate-500 dark:text-slate-400 mt-1; +} diff --git a/backend/static/css/input.css.gz b/backend/static/css/input.css.gz deleted file mode 100644 index 0f00d2a2ff4a9714835937bd229a261aff2a55c0..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 14034 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 OMf~1kB~uRt2KpcI+-wE_ diff --git a/backend/static/css/input.min.css b/backend/static/css/input.min.css deleted file mode 100644 index 18cd63b2..00000000 --- a/backend/static/css/input.min.css +++ /dev/null @@ -1 +0,0 @@ -@tailwind base;@tailwind components;@tailwind utilities;@layer base{:root{--color-bg-primary:#fff;--color-bg-secondary:#fafbfc;--color-bg-tertiary:#f3f5f7;--color-bg-accent:#fbfcfd;--color-text-primary:#111827;--color-text-secondary:#374151;--color-text-muted:#6b7280;--color-text-accent:#0073ce;--color-border-primary:#e5e7eb;--color-border-secondary:#d1d5db;--color-accent:#0073ce;--color-accent-hover:#005a9f;--color-accent-light:#eff6ff;--color-accent-text:#fff;--color-shadow:rgba(0,0,0,0.06);--color-shadow-strong:rgba(0,0,0,0.1);--color-shadow-accent:rgba(0,115,206,0.12);--card-radius:1rem;--gradient-primary:linear-gradient(135deg,#fff 0,#fafbfc 30%,#f8fafc 70%,#f3f5f7 100%);--gradient-card:linear-gradient(135deg,#fff 0,#fcfcfd 50%,#fafbfc 100%);--gradient-hero:linear-gradient(135deg,#fafbfc 0,#f3f5f7 40%,#eef2f5 80%,#f8fafc 100%);--gradient-accent:linear-gradient(135deg,#0073ce 0,#005a9f 100%);--gradient-surface:linear-gradient(135deg,#fff 0,#fbfcfd 50%,#f8fafc 100%);--glass-bg:rgba(255,255,255,0.92);--glass-border:rgba(255,255,255,0.3);--glass-shadow:0 8px 32px rgba(0,0,0,0.04);--glass-blur:blur(20px)}.dark{--color-bg-primary:#000;--color-bg-secondary:#0a0a0a;--color-bg-tertiary:#1a1a1a;--color-text-primary:#fff;--color-text-secondary:#e2e8f0;--color-text-muted:#94a3b8;--color-border-primary:#1a1a1a;--color-border-secondary:#2a2a2a;--color-accent:#fff;--color-accent-hover:#f0f0f0;--color-accent-light:#1e3a8a;--color-accent-text:#000;--color-shadow:rgba(0,0,0,0.8);--color-shadow-strong:rgba(0,0,0,0.9);--mb-black:#000}body{@apply bg-white dark:bg-black text-slate-900 dark:text-white transition-colors duration-300;position:relative;min-height:100vh;background:var(--gradient-primary);font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-feature-settings:'cv02','cv03','cv04','cv11';line-height:1.65;font-size:15px}.dark body{background:linear-gradient(135deg,#000 0,#0a0a0a 50%,#000 100%)}body::before{content:'';position:fixed;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at 25% 25%,rgba(0,115,206,0.015) 0,transparent 50%),radial-gradient(circle at 75% 75%,rgba(0,115,206,0.01) 0,transparent 50%),radial-gradient(circle at 50% 10%,rgba(0,115,206,0.008) 0,transparent 50%);pointer-events:none;z-index:-1}.dark body::before{background:radial-gradient(circle at 20% 50%,rgba(59,130,246,0.03) 0,transparent 50%),radial-gradient(circle at 80% 20%,rgba(59,130,246,0.02) 0,transparent 50%)}nav{@apply backdrop-blur-xl border-b transition-all duration-300;background:linear-gradient(135deg,rgba(255,255,255,0.95) 0,rgba(250,251,252,0.92) 30%,rgba(248,250,252,0.9) 70%,rgba(255,255,255,0.95) 100%);border-bottom:1px solid rgba(229,231,235,0.7);backdrop-filter:blur(28px) saturate(200%) brightness(110%);-webkit-backdrop-filter:blur(28px) saturate(200%) brightness(110%);box-shadow:0 4px 20px rgba(0,0,0,0.04),0 2px 8px rgba(0,115,206,0.02),inset 0 1px 0 rgba(255,255,255,0.9)}.dark nav{background:rgba(0,0,0,0.85);border-bottom-color: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.05)}.card-enhanced{background:var(--gradient-card);border:1px solid var(--color-border-primary);border-radius:var(--card-radius);box-shadow:0 2px 12px rgba(0,0,0,0.03),0 1px 4px rgba(0,115,206,0.02),inset 0 1px 0 rgba(255,255,255,0.8);transition:all .3s cubic-bezier(0.4,0,0.2,1);position:relative;overflow:hidden}.card-enhanced::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:var(--gradient-accent);opacity:0;transition:opacity .3s ease}.card-enhanced:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(0,0,0,0.06),0 4px 12px rgba(0,115,206,0.04),inset 0 1px 0 rgba(255,255,255,0.9)}.card-enhanced:hover::before{opacity:1}.dark .card-enhanced{background:rgba(10,10,10,0.8);border-color:var(--color-border-primary);box-shadow:0 4px 20px var(--color-shadow)}.btn-enhanced{background:var(--gradient-accent);color:var(--color-accent-text);border:0;border-radius:.5rem;padding:.75rem 1.75rem;font-weight:600;font-size:.875rem;text-transform:uppercase;letter-spacing:.05em;box-shadow:0 2px 8px rgba(0,115,206,0.2),0 1px 4px rgba(0,115,206,0.1);transition:all .2s cubic-bezier(0.4,0,0.2,1);position:relative;overflow:hidden}.btn-enhanced::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent);transition:left .5s ease}.btn-enhanced:hover{transform:translateY(-1px);box-shadow:0 4px 15px rgba(0,115,206,0.3),0 2px 8px rgba(0,115,206,0.2)}.btn-enhanced:hover::before{left:100%}.btn-enhanced:active{transform:translateY(0)}.btn-secondary{background:var(--gradient-surface);color:var(--color-text-primary);border:1px solid var(--color-border-primary);box-shadow:0 1px 6px rgba(0,0,0,0.03),inset 0 1px 0 rgba(255,255,255,0.8)}.btn-secondary:hover{background:var(--color-bg-secondary);border-color:var(--color-accent);color:var(--color-accent);box-shadow:0 4px 12px rgba(0,115,206,0.08),inset 0 1px 0 rgba(255,255,255,0.9)}.input-enhanced{background:rgba(255,255,255,0.95);border:1px solid var(--color-border-primary);border-radius:.5rem;padding:.75rem 1rem;color:var(--color-text-primary);font-size:.9rem;box-shadow:0 1px 6px rgba(0,0,0,0.02),inset 0 1px 0 rgba(255,255,255,0.9);transition:all .2s ease;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.input-enhanced:focus{outline:0;border-color:var(--color-accent);box-shadow:0 4px 12px rgba(0,115,206,0.1),0 0 0 3px rgba(0,115,206,0.05),inset 0 1px 0 rgba(255,255,255,0.95);background:rgba(255,255,255,0.98)}.input-enhanced::placeholder{color:var(--color-text-muted);opacity:.8}.dark .input-enhanced{background:rgba(10,10,10,0.8);border-color:var(--color-border-primary);color:var(--color-text-primary);box-shadow:0 2px 8px var(--color-shadow),inset 0 1px 0 rgba(255,255,255,0.05)}.dark .input-enhanced:focus{border-color:#60a5fa;box-shadow:0 4px 15px rgba(96,165,250,0.2),0 0 0 3px rgba(96,165,250,0.1)}.alert-enhanced{border-radius:1rem;padding:1.25rem;border:1px solid transparent;position:relative;overflow:hidden;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}.alert-enhanced::before{content:'';position:absolute;top:0;left:0;bottom:0;width:4px}.alert-info-enhanced{background:linear-gradient(135deg,rgba(239,246,255,0.95) 0,rgba(219,234,254,0.9) 100%);border-color:rgba(59,130,246,0.2);color:#1e40af}.alert-info-enhanced::before{background:var(--gradient-accent)}.alert-success-enhanced{background:linear-gradient(135deg,rgba(236,253,245,0.95) 0,rgba(167,243,208,0.9) 100%);border-color:rgba(16,185,129,0.2);color:#065f46}.alert-success-enhanced::before{background:linear-gradient(180deg,#10b981 0,#059669 100%)}.alert-warning-enhanced{background:linear-gradient(135deg,rgba(255,251,235,0.95) 0,rgba(254,243,199,0.9) 100%);border-color:rgba(251,191,36,0.2);color:#92400e}.alert-warning-enhanced::before{background:linear-gradient(180deg,#fbbf24 0,#f59e0b 100%)}.alert-error-enhanced{background:linear-gradient(135deg,rgba(254,242,242,0.95) 0,rgba(252,165,165,0.9) 100%);border-color:rgba(239,68,68,0.2);color:#991b1b}.alert-error-enhanced::before{background:linear-gradient(180deg,#ef4444 0,#dc2626 100%)}.flash-message-light{background:linear-gradient(135deg,rgba(255,255,255,0.95) 0,rgba(248,250,252,0.9) 100%);backdrop-filter:blur(32px) saturate(200%) brightness(120%);-webkit-backdrop-filter:blur(32px) saturate(200%) brightness(120%);border:1px solid rgba(226,232,240,0.6);box-shadow:0 25px 50px rgba(0,0,0,0.1),0 12px 24px rgba(0,115,206,0.05),inset 0 1px 0 rgba(255,255,255,0.8);color:var(--color-text-primary)}.flash-message-light.success{border-left:4px solid #10b981;background:linear-gradient(135deg,rgba(236,253,245,0.95) 0,rgba(209,250,229,0.9) 100%)}.flash-message-light.error{border-left:4px solid #ef4444;background:linear-gradient(135deg,rgba(254,242,242,0.95) 0,rgba(252,165,165,0.9) 100%)}.flash-message-light.warning{border-left:4px solid #fbbf24;background:linear-gradient(135deg,rgba(255,251,235,0.95) 0,rgba(254,243,199,0.9) 100%)}.flash-message-light.info{border-left:4px solid #3b82f6;background:linear-gradient(135deg,rgba(239,246,255,0.95) 0,rgba(219,234,254,0.9) 100%)}.table-enhanced{background:var(--gradient-card);border:1px solid var(--color-border-primary);border-radius:var(--card-radius);overflow:hidden;box-shadow:0 4px 20px var(--color-shadow),0 2px 8px rgba(0,115,206,0.04),inset 0 1px 0 rgba(255,255,255,0.6)}.table-enhanced th{background:linear-gradient(135deg,var(--color-bg-secondary) 0,var(--color-bg-tertiary) 100%);color:var(--color-text-primary);font-weight:600;padding:1rem 1.5rem;border-bottom:1px solid var(--color-border-primary);position:relative}.table-enhanced th::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 0,var(--color-border-secondary) 50%,transparent 100%)}.table-enhanced td{padding:1rem 1.5rem;border-bottom:1px solid var(--color-border-primary);color:var(--color-text-secondary);transition:all .2s ease}.table-enhanced tbody tr:hover{background:var(--color-bg-secondary);transform:scale(1.002)}.dark .table-enhanced{background:rgba(10,10,10,0.8);border-color:var(--color-border-primary)}.dark .table-enhanced th{background:rgba(26,26,26,0.8);color:var(--color-text-primary)}.dark .table-enhanced tbody tr:hover{background:rgba(26,26,26,0.6)}.modal-enhanced{background:linear-gradient(135deg,rgba(255,255,255,0.98) 0,rgba(248,250,252,0.95) 50%,rgba(255,255,255,0.98) 100%);backdrop-filter:blur(32px) saturate(220%) brightness(120%);-webkit-backdrop-filter:blur(32px) saturate(220%) brightness(120%);border:1px solid rgba(226,232,240,0.7);border-radius:1.5rem;box-shadow:0 50px 100px rgba(0,0,0,0.15),0 20px 40px rgba(0,115,206,0.08),inset 0 2px 0 rgba(255,255,255,0.9);position:relative;overflow:hidden}.modal-enhanced::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 0,rgba(226,232,240,0.8) 50%,transparent 100%)}.dark .modal-enhanced{background:rgba(0,0,0,0.95);border-color:rgba(42,42,42,0.7);box-shadow:0 50px 100px rgba(0,0,0,0.5),inset 0 2px 0 rgba(255,255,255,0.05)}.status-badge-enhanced{display:inline-flex;align-items:center;padding:.5rem 1rem;font-size:.75rem;font-weight:700;border-radius:9999px;text-transform:uppercase;letter-spacing:.05em;border:1px solid transparent;transition:all .2s ease;position:relative;overflow:hidden}.status-badge-enhanced::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.3),transparent);transition:left .5s ease}.status-badge-enhanced:hover::before{left:100%}.status-online-enhanced{background:linear-gradient(135deg,#ecfdf5 0,#a7f3d0 100%);color:#065f46;border-color:rgba(16,185,129,0.3)}.status-offline-enhanced{background:linear-gradient(135deg,#fef2f2 0,#fca5a5 100%);color:#991b1b;border-color:rgba(239,68,68,0.3)}.status-printing-enhanced{background:linear-gradient(135deg,#eff6ff 0,#bfdbfe 100%);color:#1e40af;border-color:rgba(59,130,246,0.3)}.dark-mode-toggle-new{position:relative;display:flex;cursor:pointer;align-items:center;justify-content:center;border-radius:9999px;padding:.625rem;transition:all .3s cubic-bezier(0.4,0,0.2,1);background:linear-gradient(135deg,rgba(248,250,252,0.9) 0,rgba(241,245,249,0.8) 100%);border:1px solid rgba(226,232,240,0.7);box-shadow:0 4px 12px rgba(0,0,0,0.06),0 2px 4px rgba(0,115,206,0.04),inset 0 1px 0 rgba(255,255,255,0.8);color:var(--color-text-secondary);z-index:100}.dark-mode-toggle-new:hover{transform:translateY(-2px) scale(1.05);background:linear-gradient(135deg,rgba(248,250,252,0.95) 0,rgba(241,245,249,0.85) 100%);box-shadow:0 8px 20px rgba(0,0,0,0.1),0 4px 8px rgba(0,115,206,0.08),inset 0 1px 0 rgba(255,255,255,0.9)}.dark-mode-toggle-new:active{transform:translateY(-1px) scale(0.98);transition:transform .1s}.dark .dark-mode-toggle-new{background:rgba(10,10,10,0.8);border:1px solid rgba(42,42,42,0.6);box-shadow:0 4px 12px rgba(0,0,0,0.3),inset 0 1px 0 rgba(255,255,255,0.05);color:var(--color-text-secondary)}.dark .dark-mode-toggle-new:hover{background:rgba(10,10,10,0.9);box-shadow:0 8px 20px rgba(0,0,0,0.4),inset 0 1px 0 rgba(255,255,255,0.08)}.dark-mode-toggle-new .sun-icon,.dark-mode-toggle-new .moon-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);transition:all .3s cubic-bezier(0.4,0,0.2,1)}.dark-mode-toggle-new .sun-icon:not(.hidden){animation:icon-appear .5s cubic-bezier(0.25,1,0.5,1) forwards}.dark-mode-toggle-new .moon-icon:not(.hidden){animation:icon-appear .5s cubic-bezier(0.25,1,0.5,1) forwards}@keyframes icon-appear{0%{opacity:0;transform:translate(-50%,-50%) scale(0.5) rotate(-20deg)}100%{opacity:1;transform:translate(-50%,-50%) 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-new{display:flex;align-items:center;gap:.5rem;border-radius:.75rem;padding:.5rem;transition:all .3s cubic-bezier(0.4,0,0.2,1);background:linear-gradient(135deg,rgba(248,250,252,0.8) 0,rgba(241,245,249,0.7) 100%);border:1px solid rgba(226,232,240,0.6);box-shadow:0 2px 8px rgba(0,0,0,0.05),inset 0 1px 0 rgba(255,255,255,0.7)}.user-menu-button-new:hover{transform:translateY(-1px);background:linear-gradient(135deg,rgba(248,250,252,0.9) 0,rgba(241,245,249,0.8) 100%);box-shadow:0 4px 12px rgba(0,0,0,0.08),0 2px 4px rgba(0,115,206,0.04),inset 0 1px 0 rgba(255,255,255,0.8)}.dark .user-menu-button-new{background:rgba(10,10,10,0.7);border-color:rgba(42,42,42,0.6);box-shadow:0 2px 8px rgba(0,0,0,0.2),inset 0 1px 0 rgba(255,255,255,0.03)}.dark .user-menu-button-new:hover{background:rgba(10,10,10,0.8);box-shadow:0 4px 12px rgba(0,0,0,0.3),inset 0 1px 0 rgba(255,255,255,0.05)}.hover-lift-enhanced{transition:all .3s cubic-bezier(0.4,0,0.2,1)}.hover-lift-enhanced:hover{transform:translateY(-3px) scale(1.01);box-shadow:0 12px 30px var(--color-shadow-strong),0 6px 15px var(--color-shadow-accent)}.dark .hover-lift-enhanced:hover{box-shadow:0 12px 30px var(--color-shadow)}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--color-bg-secondary);border-radius:4px}::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--color-border-secondary) 0,var(--color-border-primary) 100%);border-radius:4px;transition:background .2s ease}::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,var(--color-accent) 0,var(--color-accent-hover) 100%)}.dark ::-webkit-scrollbar-track{background:var(--color-bg-secondary)}.dark ::-webkit-scrollbar-thumb{background:var(--color-border-primary)}.dark ::-webkit-scrollbar-thumb:hover{background:#60a5fa}.loading-enhanced{position:relative;overflow:hidden}.loading-enhanced::after{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(0,115,206,0.1),transparent);animation:loading-shimmer 2s infinite}@keyframes loading-shimmer{0%{left:-100%}100%{left:100%}}.focus-enhanced:focus{outline:2px solid var(--color-accent);outline-offset:2px;box-shadow:0 0 0 4px rgba(0,115,206,0.15),0 4px 12px var(--color-shadow-accent)}.dark .focus-enhanced:focus{outline-color:#60a5fa;box-shadow:0 0 0 4px rgba(96,165,250,0.15),0 4px 12px rgba(96,165,250,0.2)}@media(max-width:768px){.card-enhanced{padding:1rem;border-radius:.75rem}.btn-enhanced{padding:.75rem 1.5rem;font-size:.8rem}.modal-enhanced{border-radius:1rem;margin:1rem}.dark-mode-toggle-new{padding:.5rem}}@media(prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important}}@media(prefers-contrast:high){:root{--color-shadow:rgba(0,0,0,0.2);--color-shadow-strong:rgba(0,0,0,0.3);--color-border-primary:#000}.dark{--color-border-primary:#fff}}}@layer components{.dark .bg-dark-card{@apply bg-dark-surface transition-colors}.bg-dark-surface{background-color:#1e293b}.transition-all-colors{@apply transition-colors duration-300}.admin-container{@apply max-w-7xl mx-auto p-4 md:p-8}.admin-stats{@apply grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-8}.stat-card{@apply bg-white/60 dark:bg-black/70 rounded-xl border border-gray-200/60 dark:border-slate-700/30 p-5 relative overflow-hidden shadow-2xl hover:shadow-2xl transition-all duration-300 hover:-translate-y-1 backdrop-blur-xl;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{@apply absolute top-4 right-4 opacity-15 text-4xl}.stat-title{@apply text-sm text-slate-500 dark:text-slate-400 mb-2 font-medium uppercase}.stat-value{@apply text-2xl font-bold text-slate-900 dark:text-white mb-1}.stat-desc{@apply text-sm text-slate-500 dark:text-slate-400}.nav-tabs{@apply flex border-b border-gray-200 dark:border-slate-700/30 mb-4 overflow-x-auto}.nav-tab{@apply py-4 px-6 text-slate-600 dark:text-slate-300 border-b-2 border-transparent cursor-pointer transition-all duration-200 whitespace-nowrap hover:text-slate-900 dark:hover:text-white hover:bg-slate-50 dark:hover:bg-slate-800/50}.nav-tab.active{@apply text-slate-900 dark:text-white border-b-2 border-black dark:border-white font-medium}.tab-content{@apply mt-8}.tab-pane{@apply hidden}.tab-pane.active{@apply block}.form-group{@apply mb-4}.form-label{@apply block mb-2 text-sm font-medium text-slate-700 dark:text-slate-300}.form-input,.form-select,.form-textarea{@apply w-full px-3 py-2 bg-white/60 dark:bg-slate-800/60 border border-gray-300/60 dark:border-slate-600/60 rounded-lg text-slate-900 dark:text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-slate-500 focus:border-transparent transition-all duration-200 backdrop-blur-lg;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)}.admin-table{@apply min-w-full divide-y divide-gray-200 dark:divide-slate-700}.admin-table thead{@apply bg-slate-50 dark:bg-slate-800}.admin-table th{@apply px-6 py-3 text-left text-xs font-medium text-slate-500 dark:text-slate-400 uppercase tracking-wider}.admin-table tbody{@apply bg-white dark:bg-dark-surface divide-y divide-gray-200 dark:divide-slate-700}.admin-table tr{@apply hover:bg-slate-50 dark:hover:bg-slate-700/50 transition-colors}.admin-table td{@apply px-6 py-4 whitespace-nowrap text-sm text-slate-900 dark:text-white}.badge{@apply px-2 inline-flex text-xs leading-5 font-semibold rounded-full}.badge-success{@apply bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200}.badge-error{@apply bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200}.badge-warning{@apply bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200}.badge-info{@apply bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200}.printer-card{@apply bg-white/60 dark:bg-black/70 rounded-xl border border-gray-200/60 dark:border-slate-700/30 p-6 shadow-2xl hover:shadow-2xl transition-all duration-300 hover:-translate-y-1 backdrop-blur-xl;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{@apply flex justify-between items-center mb-4}.printer-name{@apply text-xl font-bold text-slate-900 dark:text-white}.printer-actions{@apply flex space-x-2}.printer-info{@apply grid grid-cols-2 gap-4 mb-4}.printer-status{@apply flex items-center mt-4}.status-indicator{@apply w-3 h-3 rounded-full mr-2}.status-running{@apply bg-green-500;animation:pulse 2s infinite}.status-stopped{@apply bg-red-500}@keyframes pulse{0%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.1)}100%{opacity:1;transform:scale(1)}}.log-entry{@apply p-3 border-l-4 mb-2 rounded-r-lg bg-white dark:bg-slate-800 hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors}.log-debug{@apply border-gray-400 dark:border-gray-500}.log-info{@apply border-blue-400 dark:border-blue-500}.log-warning{@apply border-yellow-400 dark:border-yellow-500}.log-error{@apply border-red-400 dark:border-red-500}.log-critical{@apply border-purple-400 dark:border-purple-500}.scheduler-status{@apply flex items-center p-4 bg-white dark:bg-slate-800 rounded-lg border border-gray-200 dark:border-slate-700 shadow-md}.progress-bar{@apply w-full h-2 bg-gray-200 dark:bg-slate-700 rounded-full overflow-hidden}.progress-bar-fill{@apply h-full transition-all duration-300}.progress-bar-fill-blue{@apply bg-blue-500 dark:bg-blue-600}.progress-bar-fill-green{@apply bg-green-500 dark:bg-green-600}.progress-bar-fill-purple{@apply bg-purple-500 dark:bg-purple-600}.notification{@apply fixed top-4 right-4 max-w-md p-4 rounded-2xl shadow-2xl transform translate-x-full opacity-0 transition-all duration-500 z-50;background:rgba(255,255,255,0.08);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.25);box-shadow:0 32px 64px rgba(0,0,0,0.25),0 12px 24px 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:notification-slide-in .6s cubic-bezier(0.4,0,0.2,1)}.dark .notification{background:rgba(0,0,0,0.2);backdrop-filter:blur(40px) saturate(180%) brightness(120%) contrast(115%);-webkit-backdrop-filter:blur(40px) saturate(180%) brightness(120%) contrast(115%);border:1px solid rgba(255,255,255,0.15);box-shadow:0 32px 64px rgba(0,0,0,0.6),0 12px 24px 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)}.notification.show{@apply translate-x-0 opacity-100}.notification:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 40px 80px rgba(0,0,0,0.3),0 16px 32px rgba(0,0,0,0.2),inset 0 1px 0 rgba(255,255,255,0.5),0 0 0 1px rgba(255,255,255,0.15)}.dark .notification:hover{box-shadow:0 40px 80px rgba(0,0,0,0.7),0 16px 32px rgba(0,0,0,0.5),inset 0 1px 0 rgba(255,255,255,0.3),0 0 0 1px rgba(255,255,255,0.1)}.notification-success{@apply text-green-100;background:linear-gradient(135deg,rgba(34,197,94,0.25) 0,rgba(134,239,172,0.18) 50%,rgba(34,197,94,0.12) 100%);border:1px solid rgba(34,197,94,0.4);box-shadow:0 32px 64px rgba(34,197,94,0.2),0 12px 24px rgba(34,197,94,0.1),inset 0 1px 0 rgba(255,255,255,0.4),0 0 0 1px rgba(34,197,94,0.3)}.notification-error{@apply text-red-100;background:linear-gradient(135deg,rgba(239,68,68,0.25) 0,rgba(252,165,165,0.18) 50%,rgba(239,68,68,0.12) 100%);border:1px solid rgba(239,68,68,0.4);box-shadow:0 32px 64px rgba(239,68,68,0.2),0 12px 24px rgba(239,68,68,0.1),inset 0 1px 0 rgba(255,255,255,0.4),0 0 0 1px rgba(239,68,68,0.3)}.notification-warning{@apply text-yellow-100;background:linear-gradient(135deg,rgba(245,158,11,0.25) 0,rgba(252,211,77,0.18) 50%,rgba(245,158,11,0.12) 100%);border:1px solid rgba(245,158,11,0.4);box-shadow:0 32px 64px rgba(245,158,11,0.2),0 12px 24px rgba(245,158,11,0.1),inset 0 1px 0 rgba(255,255,255,0.4),0 0 0 1px rgba(245,158,11,0.3)}.notification-info{@apply text-blue-100;background:linear-gradient(135deg,rgba(59,130,246,0.25) 0,rgba(147,197,253,0.18) 50%,rgba(59,130,246,0.12) 100%);border:1px solid rgba(59,130,246,0.4);box-shadow:0 32px 64px rgba(59,130,246,0.2),0 12px 24px rgba(59,130,246,0.1),inset 0 1px 0 rgba(255,255,255,0.4),0 0 0 1px rgba(59,130,246,0.3)}.toast-notification{@apply fixed z-50 p-4 rounded-2xl shadow-2xl transform transition-all duration-500 text-sm font-medium;background:rgba(255,255,255,0.08);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.25);box-shadow:0 32px 64px rgba(0,0,0,0.25),0 12px 24px 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)}.dark .toast-notification{background:rgba(0,0,0,0.2);backdrop-filter:blur(40px) saturate(180%) brightness(120%) contrast(115%);-webkit-backdrop-filter:blur(40px) saturate(180%) brightness(120%) contrast(115%);border:1px solid rgba(255,255,255,0.15);box-shadow:0 32px 64px rgba(0,0,0,0.6),0 12px 24px 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)}.alert{@apply p-6 rounded-2xl border mb-6 shadow-2xl;background:rgba(255,255,255,0.12);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.25);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);animation:alert-fade-in .5s ease-out}.dark .alert{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)}.alert-success{@apply text-green-900 dark:text-green-100;background:linear-gradient(135deg,rgba(34,197,94,0.15) 0,rgba(134,239,172,0.1) 50%,rgba(34,197,94,0.08) 100%);border:1px solid rgba(34,197,94,0.3)}.alert-error{@apply text-red-900 dark:text-red-100;background:linear-gradient(135deg,rgba(239,68,68,0.15) 0,rgba(252,165,165,0.1) 50%,rgba(239,68,68,0.08) 100%);border:1px solid rgba(239,68,68,0.3)}.alert-warning{@apply text-yellow-900 dark:text-yellow-100;background:linear-gradient(135deg,rgba(245,158,11,0.15) 0,rgba(252,211,77,0.1) 50%,rgba(245,158,11,0.08) 100%);border:1px solid rgba(245,158,11,0.3)}.alert-info{@apply text-blue-900 dark:text-blue-100;background:linear-gradient(135deg,rgba(59,130,246,0.15) 0,rgba(147,197,253,0.1) 50%,rgba(59,130,246,0.08) 100%);border:1px solid rgba(59,130,246,0.3)}.browser-notification{@apply fixed top-4 left-4 max-w-sm p-4 rounded-2xl shadow-2xl z-50;background:rgba(255,255,255,0.08);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.25);box-shadow:0 32px 64px rgba(0,0,0,0.25),0 12px 24px 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:notification-slide-left .6s cubic-bezier(0.4,0,0.2,1)}.dark .browser-notification{background:rgba(0,0,0,0.2);backdrop-filter:blur(40px) saturate(180%) brightness(120%) contrast(115%);-webkit-backdrop-filter:blur(40px) saturate(180%) brightness(120%) contrast(115%);border:1px solid rgba(255,255,255,0.15);box-shadow:0 32px 64px rgba(0,0,0,0.6),0 12px 24px 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)}@keyframes notification-slide-in{0%{opacity:0;transform:translateX(100%) translateY(-20px) scale(0.9);backdrop-filter:blur(0)}50%{opacity:.8;transform:translateX(20px) translateY(-10px) scale(1.05);backdrop-filter:blur(20px)}100%{opacity:1;transform:translateX(0) translateY(0) scale(1);backdrop-filter:blur(40px)}}@keyframes notification-slide-out{0%{opacity:1;transform:translateX(0) translateY(0) scale(1)}100%{opacity:0;transform:translateX(100%) translateY(-20px) scale(0.9)}}@keyframes notification-slide-left{0%{opacity:0;transform:translateX(-100%) translateY(-20px) scale(0.9);backdrop-filter:blur(0)}50%{opacity:.8;transform:translateX(-20px) translateY(-10px) scale(1.05);backdrop-filter:blur(20px)}100%{opacity:1;transform:translateX(0) translateY(0) scale(1);backdrop-filter:blur(40px)}}@keyframes alert-fade-in{0%{opacity:0;transform:translateY(-20px) scale(0.95)}100%{opacity:1;transform:translateY(0) scale(1)}}.notification.hiding{animation:notification-slide-out .4s cubic-bezier(0.4,0,0.2,1) forwards}.notification-icon{@apply flex items-center justify-center w-8 h-8 rounded-full mr-3 flex-shrink-0;background:rgba(255,255,255,0.2);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,0.3);box-shadow:0 8px 16px rgba(0,0,0,0.1),inset 0 1px 0 rgba(255,255,255,0.4)}.notification-content{@apply flex-1}.notification-title{@apply font-semibold text-sm mb-1}.notification-message{@apply text-sm opacity-90}.notification-close{@apply ml-3 p-1 rounded-lg opacity-70 hover:opacity-100 transition-opacity;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)}.notification-close:hover{background:rgba(255,255,255,0.2);transform:scale(1.1)}.notifications-container{@apply fixed top-4 right-4 z-50 space-y-3 max-w-md}.notifications-container-left{@apply fixed top-4 left-4 z-50 space-y-3 max-w-sm}.flash-message-light{background:linear-gradient(135deg,rgba(255,255,255,0.95) 0,rgba(248,250,252,0.9) 100%);backdrop-filter:blur(32px) saturate(200%) brightness(120%);-webkit-backdrop-filter:blur(32px) saturate(200%) brightness(120%);border:1px solid rgba(226,232,240,0.6);box-shadow:0 25px 50px rgba(0,0,0,0.1),0 12px 24px rgba(0,115,206,0.05),inset 0 1px 0 rgba(255,255,255,0.8);color:var(--color-text-primary)}.flash-message-light.success{border-left:4px solid #10b981;background:linear-gradient(135deg,rgba(236,253,245,0.95) 0,rgba(209,250,229,0.9) 100%)}.flash-message-light.error{border-left:4px solid #ef4444;background:linear-gradient(135deg,rgba(254,242,242,0.95) 0,rgba(252,165,165,0.9) 100%)}.flash-message-light.warning{border-left:4px solid #fbbf24;background:linear-gradient(135deg,rgba(255,251,235,0.95) 0,rgba(254,243,199,0.9) 100%)}.flash-message-light.info{border-left:4px solid #3b82f6;background:linear-gradient(135deg,rgba(239,246,255,0.95) 0,rgba(219,234,254,0.9) 100%)}.table-enhanced{background:var(--gradient-card);border:1px solid var(--color-border-primary);border-radius:var(--card-radius);overflow:hidden;box-shadow:0 4px 20px var(--color-shadow),0 2px 8px rgba(0,115,206,0.04),inset 0 1px 0 rgba(255,255,255,0.6)}.table-enhanced th{background:linear-gradient(135deg,var(--color-bg-secondary) 0,var(--color-bg-tertiary) 100%);color:var(--color-text-primary);font-weight:600;padding:1rem 1.5rem;border-bottom:1px solid var(--color-border-primary);position:relative}.table-enhanced th::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 0,var(--color-border-secondary) 50%,transparent 100%)}.table-enhanced td{padding:1rem 1.5rem;border-bottom:1px solid var(--color-border-primary);color:var(--color-text-secondary);transition:all .2s ease}.table-enhanced tbody tr:hover{background:var(--color-bg-secondary);transform:scale(1.002)}.dark .table-enhanced{background:rgba(10,10,10,0.8);border-color:var(--color-border-primary)}.dark .table-enhanced th{background:rgba(26,26,26,0.8);color:var(--color-text-primary)}.dark .table-enhanced tbody tr:hover{background:rgba(26,26,26,0.6)}.modal-enhanced{background:linear-gradient(135deg,rgba(255,255,255,0.98) 0,rgba(248,250,252,0.95) 50%,rgba(255,255,255,0.98) 100%);backdrop-filter:blur(32px) saturate(220%) brightness(120%);-webkit-backdrop-filter:blur(32px) saturate(220%) brightness(120%);border:1px solid rgba(226,232,240,0.7);border-radius:1.5rem;box-shadow:0 50px 100px rgba(0,0,0,0.15),0 20px 40px rgba(0,115,206,0.08),inset 0 2px 0 rgba(255,255,255,0.9);position:relative;overflow:hidden}.modal-enhanced::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 0,rgba(226,232,240,0.8) 50%,transparent 100%)}.dark .modal-enhanced{background:rgba(0,0,0,0.95);border-color:rgba(42,42,42,0.7);box-shadow:0 50px 100px rgba(0,0,0,0.5),inset 0 2px 0 rgba(255,255,255,0.05)}.status-badge-enhanced{display:inline-flex;align-items:center;padding:.5rem 1rem;font-size:.75rem;font-weight:700;border-radius:9999px;text-transform:uppercase;letter-spacing:.05em;border:1px solid transparent;transition:all .2s ease;position:relative;overflow:hidden}.status-badge-enhanced::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.3),transparent);transition:left .5s ease}.status-badge-enhanced:hover::before{left:100%}.status-online-enhanced{background:linear-gradient(135deg,#ecfdf5 0,#a7f3d0 100%);color:#065f46;border-color:rgba(16,185,129,0.3)}.status-offline-enhanced{background:linear-gradient(135deg,#fef2f2 0,#fca5a5 100%);color:#991b1b;border-color:rgba(239,68,68,0.3)}.status-printing-enhanced{background:linear-gradient(135deg,#eff6ff 0,#bfdbfe 100%);color:#1e40af;border-color:rgba(59,130,246,0.3)}.dark-mode-toggle-new{position:relative;display:flex;cursor:pointer;align-items:center;justify-content:center;border-radius:9999px;padding:.625rem;transition:all .3s cubic-bezier(0.4,0,0.2,1);background:linear-gradient(135deg,rgba(248,250,252,0.9) 0,rgba(241,245,249,0.8) 100%);border:1px solid rgba(226,232,240,0.7);box-shadow:0 4px 12px rgba(0,0,0,0.06),0 2px 4px rgba(0,115,206,0.04),inset 0 1px 0 rgba(255,255,255,0.8);color:var(--color-text-secondary);z-index:100}.dark-mode-toggle-new:hover{transform:translateY(-2px) scale(1.05);background:linear-gradient(135deg,rgba(248,250,252,0.95) 0,rgba(241,245,249,0.85) 100%);box-shadow:0 8px 20px rgba(0,0,0,0.1),0 4px 8px rgba(0,115,206,0.08),inset 0 1px 0 rgba(255,255,255,0.9)}.dark-mode-toggle-new:active{transform:translateY(-1px) scale(0.98);transition:transform .1s}.dark .dark-mode-toggle-new{background:rgba(10,10,10,0.8);border:1px solid rgba(42,42,42,0.6);box-shadow:0 4px 12px rgba(0,0,0,0.3),inset 0 1px 0 rgba(255,255,255,0.05);color:var(--color-text-secondary)}.dark .dark-mode-toggle-new:hover{background:rgba(10,10,10,0.9);box-shadow:0 8px 20px rgba(0,0,0,0.4),inset 0 1px 0 rgba(255,255,255,0.08)}.dark-mode-toggle-new .sun-icon,.dark-mode-toggle-new .moon-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);transition:all .3s cubic-bezier(0.4,0,0.2,1)}.dark-mode-toggle-new .sun-icon:not(.hidden){animation:icon-appear .5s cubic-bezier(0.25,1,0.5,1) forwards}.dark-mode-toggle-new .moon-icon:not(.hidden){animation:icon-appear .5s cubic-bezier(0.25,1,0.5,1) forwards}@keyframes icon-appear{0%{opacity:0;transform:translate(-50%,-50%) scale(0.5) rotate(-20deg)}100%{opacity:1;transform:translate(-50%,-50%) 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-new{display:flex;align-items:center;gap:.5rem;border-radius:.75rem;padding:.5rem;transition:all .3s cubic-bezier(0.4,0,0.2,1);background:linear-gradient(135deg,rgba(248,250,252,0.8) 0,rgba(241,245,249,0.7) 100%);border:1px solid rgba(226,232,240,0.6);box-shadow:0 2px 8px rgba(0,0,0,0.05),inset 0 1px 0 rgba(255,255,255,0.7)}.user-menu-button-new:hover{transform:translateY(-1px);background:linear-gradient(135deg,rgba(248,250,252,0.9) 0,rgba(241,245,249,0.8) 100%);box-shadow:0 4px 12px rgba(0,0,0,0.08),0 2px 4px rgba(0,115,206,0.04),inset 0 1px 0 rgba(255,255,255,0.8)}.dark .user-menu-button-new{background:rgba(10,10,10,0.7);border-color:rgba(42,42,42,0.6);box-shadow:0 2px 8px rgba(0,0,0,0.2),inset 0 1px 0 rgba(255,255,255,0.03)}.dark .user-menu-button-new:hover{background:rgba(10,10,10,0.8);box-shadow:0 4px 12px rgba(0,0,0,0.3),inset 0 1px 0 rgba(255,255,255,0.05)}.hover-lift-enhanced{transition:all .3s cubic-bezier(0.4,0,0.2,1)}.hover-lift-enhanced:hover{transform:translateY(-3px) scale(1.01);box-shadow:0 12px 30px var(--color-shadow-strong),0 6px 15px var(--color-shadow-accent)}.dark .hover-lift-enhanced:hover{box-shadow:0 12px 30px var(--color-shadow)}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--color-bg-secondary);border-radius:4px}::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--color-border-secondary) 0,var(--color-border-primary) 100%);border-radius:4px;transition:background .2s ease}::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,var(--color-accent) 0,var(--color-accent-hover) 100%)}.dark ::-webkit-scrollbar-track{background:var(--color-bg-secondary)}.dark ::-webkit-scrollbar-thumb{background:var(--color-border-primary)}.dark ::-webkit-scrollbar-thumb:hover{background:#60a5fa}.loading-enhanced{position:relative;overflow:hidden}.loading-enhanced::after{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(0,115,206,0.1),transparent);animation:loading-shimmer 2s infinite}@keyframes loading-shimmer{0%{left:-100%}100%{left:100%}}.focus-enhanced:focus{outline:2px solid var(--color-accent);outline-offset:2px;box-shadow:0 0 0 4px rgba(0,115,206,0.15),0 4px 12px var(--color-shadow-accent)}.dark .focus-enhanced:focus{outline-color:#60a5fa;box-shadow:0 0 0 4px rgba(96,165,250,0.15),0 4px 12px rgba(96,165,250,0.2)}@media(max-width:768px){.card-enhanced{padding:1rem;border-radius:.75rem}.btn-enhanced{padding:.75rem 1.5rem;font-size:.8rem}.modal-enhanced{border-radius:1rem;margin:1rem}.dark-mode-toggle-new{padding:.5rem}}@media(prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important}}@media(prefers-contrast:high){:root{--color-shadow:rgba(0,0,0,0.2);--color-shadow-strong:rgba(0,0,0,0.3);--color-border-primary:#000}.dark{--color-border-primary:#fff}}}.flash-message{@apply fixed top-4 right-4 px-6 py-4 rounded-2xl text-sm font-medium shadow-2xl transform transition-all duration-500 z-50 border;background:rgba(255,255,255,0.08);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.25);box-shadow:0 32px 64px rgba(0,0,0,0.25),0 12px 24px 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:flash-slide-in .5s cubic-bezier(0.4,0,0.2,1);transition:all .5s cubic-bezier(0.4,0,0.2,1)}.dark .flash-message{background:rgba(0,0,0,0.2);backdrop-filter:blur(40px) saturate(180%) brightness(120%) contrast(115%);-webkit-backdrop-filter:blur(40px) saturate(180%) brightness(120%) contrast(115%);border:1px solid rgba(255,255,255,0.15);box-shadow:0 32px 64px rgba(0,0,0,0.6),0 12px 24px 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)}.flash-message:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 40px 80px rgba(0,0,0,0.3),0 16px 32px rgba(0,0,0,0.2),inset 0 1px 0 rgba(255,255,255,0.5),0 0 0 1px rgba(255,255,255,0.15)}.dark .flash-message:hover{box-shadow:0 40px 80px rgba(0,0,0,0.7),0 16px 32px rgba(0,0,0,0.5),inset 0 1px 0 rgba(255,255,255,0.3),0 0 0 1px rgba(255,255,255,0.1)}.flash-message.info{@apply text-blue-100;background:linear-gradient(135deg,rgba(59,130,246,0.2) 0,rgba(147,197,253,0.15) 50%,rgba(59,130,246,0.1) 100%);border:1px solid rgba(59,130,246,0.3)}.flash-message.success{@apply text-green-100;background:linear-gradient(135deg,rgba(34,197,94,0.2) 0,rgba(134,239,172,0.15) 50%,rgba(34,197,94,0.1) 100%);border:1px solid rgba(34,197,94,0.3)}.flash-message.warning{@apply text-yellow-100;background:linear-gradient(135deg,rgba(245,158,11,0.2) 0,rgba(252,211,77,0.15) 50%,rgba(245,158,11,0.1) 100%);border:1px solid rgba(245,158,11,0.3)}.flash-message.error{@apply text-red-100;background:linear-gradient(135deg,rgba(239,68,68,0.2) 0,rgba(252,165,165,0.15) 50%,rgba(239,68,68,0.1) 100%);border:1px solid rgba(239,68,68,0.3)}@keyframes flash-slide-in{0%{opacity:0;transform:translateX(100%) translateY(-20px) scale(0.9);backdrop-filter:blur(0)}50%{opacity:.8;transform:translateX(20px) translateY(-10px) scale(1.05);backdrop-filter:blur(20px)}100%{opacity:1;transform:translateX(0) translateY(0) scale(1);backdrop-filter:blur(40px)}}@keyframes flash-slide-out{0%{opacity:1;transform:translateX(0) translateY(0) scale(1)}100%{opacity:0;transform:translateX(100%) translateY(-20px) scale(0.9)}}.flash-message.hiding{animation:flash-slide-out .4s cubic-bezier(0.4,0,0.2,1) forwards}.dnd-toggle{@apply relative inline-flex items-center h-6 rounded-full w-11 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500;background:rgba(156,163,175,0.3);backdrop-filter:blur(10px);border:1px solid rgba(156,163,175,0.2)}.dnd-toggle.active{background:rgba(239,68,68,0.3);border:1px solid rgba(239,68,68,0.4)}.dnd-toggle-slider{@apply inline-block h-4 w-4 rounded-full shadow-lg transform transition-transform duration-300;background:rgba(255,255,255,0.9);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.3);box-shadow:0 4px 8px rgba(0,0,0,0.2),0 2px 4px rgba(0,0,0,0.1);margin:.125rem}.dnd-toggle.active .dnd-toggle-slider{transform:translateX(1.25rem);background:rgba(255,255,255,1);box-shadow:0 6px 12px rgba(239,68,68,0.3),0 3px 6px rgba(239,68,68,0.2)}.dnd-indicator{@apply fixed top-4 left-4 z-50 flex items-center px-3 py-2 rounded-lg text-sm font-medium transition-all duration-300;background:rgba(239,68,68,0.1);backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%);border:1px solid rgba(239,68,68,0.3);color:#ef4444;transform:translateY(-100%);opacity:0}.dnd-indicator.active{transform:translateY(0);opacity:1}.dnd-modal{@apply fixed inset-0 z-50 flex items-center justify-center p-4;background:rgba(0,0,0,0.3);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}.dnd-modal-content{@apply w-full max-w-md rounded-2xl p-6 shadow-2xl transform transition-all;background:rgba(255,255,255,0.1);backdrop-filter:blur(40px) saturate(200%) brightness(120%);-webkit-backdrop-filter:blur(40px) saturate(200%) brightness(120%);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)}.dark .dnd-modal-content{background:rgba(0,0,0,0.3);backdrop-filter:blur(40px) saturate(180%) brightness(110%);-webkit-backdrop-filter:blur(40px) saturate(180%) brightness(110%);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)}.flash-message.dnd-suppressed{animation:flash-fade-in .3s ease-out;opacity:.3;transform:scale(0.95);pointer-events:none}@keyframes flash-fade-in{0%{opacity:0;transform:scale(0.9)}100%{opacity:.3;transform:scale(0.95)}}.dnd-counter{@apply absolute -top-2 -right-2 bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center font-bold;background:rgba(239,68,68,0.9);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.2);box-shadow:0 2px 4px rgba(0,0,0,0.2);animation:dnd-counter-bounce .5s ease-out}@keyframes dnd-counter-bounce{0%{transform:scale(0)}50%{transform:scale(1.2)}100%{transform:scale(1)}}@keyframes slide-down{0%{opacity:0;transform:translateY(-20px)}100%{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,%3Csvgxmlns='http://www.w3.org/2000/svg'viewBox='008080'width='80'height='80'opacity='0.03'fill='currentColor'%3E%3Cpathd='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.5zM4,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,40zM58.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.8zM58.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:.03;transition:opacity .3s ease}.dark .mercedes-background::before{opacity:.015;filter:invert(1) brightness(0.3);background-size:150px 150px}@layer components{.btn-primary{@apply text-white dark:text-slate-900 px-4 py-2 rounded-lg transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 shadow-2xl hover:-translate-y-0.5;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{@apply text-slate-900 dark:text-white px-4 py-2 rounded-lg transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-slate-500 focus:ring-offset-2 shadow-2xl hover:-translate-y-0.5;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{@apply border-2 border-black/70 hover:bg-black/70 dark:border-white/70 dark:hover:bg-white/70 text-black hover:text-white dark:text-white dark:hover:text-slate-900 px-4 py-2 rounded-lg transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 backdrop-blur-lg;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)}.glass-card{@apply rounded-xl p-6 shadow-2xl transition-all duration-300;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-card{@apply rounded-xl p-6 shadow-2xl transition-all duration-300 hover:-translate-y-1;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)}.nav-link{@apply flex items-center px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-slate-500 focus:ring-offset-2 text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-700/50 hover:shadow-md}.nav-link.active{@apply text-slate-900 dark:text-white bg-slate-100 dark:bg-black shadow-sm}.navbar{display:flex;justify-content:space-between;align-items:center;padding:.5rem 1rem;background:rgba(255,255,255,0.1);backdrop-filter:blur(10px);border-radius:10px;box-shadow:0 4px 6px rgba(0,0,0,0.1);transition:all .3s ease}.navbar-button{padding:.25rem .5rem;font-size:.875rem;border-radius:5px;transition:background-color .3s ease}.navbar-button:hover{background-color:rgba(255,255,255,0.2)}@media(max-width:768px){.navbar{flex-direction:column;padding:.25rem}.navbar-button{margin:.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{@apply flex items-center space-x-2 transition-transform duration-300 hover:scale-105}.navbar-menu{@apply flex items-center justify-center space-x-1 md:space-x-3 lg:space-x-6 p-3 mx-4 rounded-2xl border;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{@apply p-2 rounded-full transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-offset-2}.user-menu-button{@apply flex items-center space-x-2 rounded-lg p-1 transition-all duration-300 hover:bg-gray-100/80 dark:hover:bg-slate-700/60 focus:outline-none focus:ring-2 focus:ring-slate-500 focus:ring-offset-2}.user-avatar{@apply w-10 h-10 bg-black dark:bg-white text-white dark:text-slate-900 rounded-full flex items-center justify-center font-bold text-sm shadow-md transition-all duration-300 hover:shadow-lg}.avatar-large{@apply w-14 h-14 bg-black dark:bg-white text-white dark:text-slate-900 rounded-full flex items-center justify-center font-bold text-lg shadow-md}.user-dropdown-item{@apply flex items-center px-4 py-3 text-sm text-slate-700 dark:text-slate-300 hover:bg-gray-100/80 dark:hover:bg-slate-700/60 hover:text-slate-900 dark:hover:text-white transition-all duration-300 focus:outline-none focus:bg-gray-100/80 dark:focus:bg-slate-700/60}.user-dropdown-separator{@apply border-t border-gray-200/80 dark:border-slate-700/30 my-1}.menu-item{@apply flex items-center space-x-2 px-4 py-2.5 text-slate-700 dark:text-slate-300 rounded-xl transition-all duration-300;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{@apply text-slate-900 dark:text-white;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{@apply text-slate-900 dark:text-white font-medium;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)}.user-dropdown{@apply absolute right-0 mt-2 w-64 rounded-xl shadow-2xl z-50 overflow-hidden;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 .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{@apply flex items-center p-4 border-b border-gray-200/80 dark:border-slate-700/30}.dropdown-item{@apply flex items-center gap-3 px-4 py-3 text-sm text-slate-700 dark:text-slate-300 hover:bg-gray-100/80 dark:hover:bg-slate-700/60 hover:text-slate-900 dark:hover:text-white transition-all duration-300}.dropdown-divider{@apply border-t border-gray-200/80 dark:border-slate-700/30}@keyframes mercedes-rotate{0%{transform:rotate(0)}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}}.navbar{position:-webkit-sticky !important;position:sticky !important;top:0 !important;z-index:50 !important;width:100% !important;left:0 !important;right:0 !important;--navbar-blur:40px;--navbar-opacity:.15;background:rgba(255,255,255,var(--navbar-opacity,0.15)) !important;backdrop-filter:blur(var(--navbar-blur,40px)) saturate(200%) brightness(110%) contrast(105%) !important;-webkit-backdrop-filter:blur(var(--navbar-blur,40px)) saturate(200%) brightness(110%) contrast(105%) !important;box-shadow:0 8px 32px rgba(0,0,0,0.12),0 2px 8px rgba(0,0,0,0.08),inset 0 1px 0 rgba(255,255,255,0.3),0 0 0 1px rgba(255,255,255,0.15) !important;border-bottom:1px solid rgba(255,255,255,0.2) !important;transition:all .3s cubic-bezier(0.4,0,0.2,1) !important}.dark .navbar{--navbar-dark-opacity:.25;background:rgba(0,0,0,var(--navbar-dark-opacity,0.25)) !important;backdrop-filter:blur(calc(var(--navbar-blur, 40px) + 5px)) saturate(180%) brightness(120%) contrast(115%) !important;-webkit-backdrop-filter:blur(calc(var(--navbar-blur, 40px) + 5px)) saturate(180%) brightness(120%) contrast(115%) !important;box-shadow:0 8px 32px rgba(0,0,0,0.4),0 2px 8px 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.08) !important;border-bottom:1px solid rgba(255,255,255,0.1) !important}.navbar.scrolled{--navbar-blur:50px;--navbar-opacity:.25;background:rgba(255,255,255,var(--navbar-opacity,0.25)) !important;backdrop-filter:blur(var(--navbar-blur,50px)) saturate(220%) brightness(115%) contrast(110%) !important;-webkit-backdrop-filter:blur(var(--navbar-blur,50px)) saturate(220%) brightness(115%) contrast(110%) !important;box-shadow:0 12px 40px rgba(0,0,0,0.15),0 4px 12px 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.2) !important}.dark .navbar.scrolled{--navbar-dark-opacity:.35;background:rgba(0,0,0,var(--navbar-dark-opacity,0.35)) !important;backdrop-filter:blur(calc(var(--navbar-blur, 50px) + 5px)) saturate(200%) brightness(125%) contrast(120%) !important;-webkit-backdrop-filter:blur(calc(var(--navbar-blur, 50px) + 5px)) saturate(200%) brightness(125%) contrast(120%) !important;box-shadow:0 12px 40px rgba(0,0,0,0.5),0 4px 12px 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.1) !important}.navbar-menu-new{@apply flex items-center justify-center space-x-0.5 md:space-x-1;max-width:100%;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;background:rgba(255,255,255,0.1);backdrop-filter:blur(25px) saturate(170%) brightness(108%);-webkit-backdrop-filter:blur(25px) saturate(170%) brightness(108%);border-radius:16px;padding:8px;margin:0 16px;border:1px solid rgba(255,255,255,0.15);box-shadow:0 6px 20px rgba(0,0,0,0.1),inset 0 1px 0 rgba(255,255,255,0.2),0 0 0 1px rgba(255,255,255,0.05);transition:all .3s cubic-bezier(0.4,0,0.2,1)}.dark .navbar-menu-new{background:rgba(0,0,0,0.2);backdrop-filter:blur(30px) saturate(150%) brightness(115%);-webkit-backdrop-filter:blur(30px) saturate(150%) brightness(115%);border:1px solid rgba(255,255,255,0.1);box-shadow:0 6px 20px rgba(0,0,0,0.3),inset 0 1px 0 rgba(255,255,255,0.1),0 0 0 1px rgba(255,255,255,0.03)}.navbar-menu-new::-webkit-scrollbar{display:none}.navbar-menu-new:hover{backdrop-filter:blur(35px) saturate(190%) brightness(112%);-webkit-backdrop-filter:blur(35px) saturate(190%) brightness(112%);box-shadow:0 8px 25px rgba(0,0,0,0.15),inset 0 1px 0 rgba(255,255,255,0.3),0 0 0 1px rgba(255,255,255,0.1);transform:translateY(-1px)}.dark .navbar-menu-new:hover{backdrop-filter:blur(40px) saturate(170%) brightness(120%);-webkit-backdrop-filter:blur(40px) saturate(170%) brightness(120%);box-shadow:0 8px 25px rgba(0,0,0,0.4),inset 0 1px 0 rgba(255,255,255,0.15),0 0 0 1px rgba(255,255,255,0.05)}.nav-item{@apply flex items-center space-x-1.5 px-3 py-2.5 rounded-xl text-sm font-medium transition-all duration-300;color:rgba(15,23,42,0.85);background:rgba(255,255,255,0.08);backdrop-filter:blur(15px) saturate(140%);-webkit-backdrop-filter:blur(15px) saturate(140%);border:1px solid rgba(255,255,255,0.1);box-shadow:0 4px 12px rgba(0,0,0,0.05),inset 0 1px 0 rgba(255,255,255,0.15);position:relative;overflow:hidden;animation:nav-item-entrance .6s ease-out}.nav-item::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent);transition:left .5s}.nav-item:hover::before{left:100%}.nav-item::after{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:conic-gradient(from 0 at 50% 50%,transparent 0,rgba(255,255,255,0.1) 30deg,transparent 60deg);opacity:0;transition:opacity .3s ease;pointer-events:none;animation:rotate 3s linear infinite}.nav-item:hover::after{opacity:1}.dark .nav-item{color:rgba(255,255,255,0.85);background:rgba(0,0,0,0.15);backdrop-filter:blur(20px) saturate(130%);-webkit-backdrop-filter:blur(20px) saturate(130%);border:1px solid rgba(255,255,255,0.08);box-shadow:0 4px 12px rgba(0,0,0,0.2),inset 0 1px 0 rgba(255,255,255,0.08)}.nav-item:hover{color:rgba(15,23,42,1);background:rgba(255,255,255,0.2);backdrop-filter:blur(25px) saturate(160%) brightness(110%);-webkit-backdrop-filter:blur(25px) saturate(160%) brightness(110%);border:1px solid rgba(255,255,255,0.25);box-shadow:0 8px 20px rgba(0,0,0,0.12),inset 0 1px 0 rgba(255,255,255,0.3),0 0 0 1px rgba(255,255,255,0.1);transform:translateY(-2px) scale(1.02)}.dark .nav-item:hover{color:rgba(255,255,255,1);background:rgba(0,0,0,0.25);backdrop-filter:blur(30px) saturate(150%) brightness(120%);-webkit-backdrop-filter:blur(30px) saturate(150%) brightness(120%);border:1px solid rgba(255,255,255,0.15);box-shadow:0 8px 20px 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)}.nav-item.active{color:rgba(15,23,42,1);background:rgba(255,255,255,0.35);backdrop-filter:blur(35px) saturate(180%) brightness(115%);-webkit-backdrop-filter:blur(35px) saturate(180%) brightness(115%);border:1px solid rgba(255,255,255,0.4);box-shadow:0 12px 24px rgba(0,0,0,0.15),inset 0 1px 0 rgba(255,255,255,0.5),0 0 0 1px rgba(59,130,246,0.3);transform:translateY(-1px);animation:nav-item-active-glow 2s ease-in-out infinite alternate}.dark .nav-item.active{color:rgba(255,255,255,1);background:rgba(0,0,0,0.4);backdrop-filter:blur(40px) saturate(160%) brightness(125%);-webkit-backdrop-filter:blur(40px) saturate(160%) brightness(125%);border:1px solid rgba(255,255,255,0.2);box-shadow:0 12px 24px rgba(0,0,0,0.4),inset 0 1px 0 rgba(255,255,255,0.2),0 0 0 1px rgba(59,130,246,0.2)}@keyframes nav-item-entrance{0%{opacity:0;transform:translateY(10px) scale(0.95);backdrop-filter:blur(5px)}100%{opacity:1;transform:translateY(0) scale(1);backdrop-filter:blur(15px) saturate(140%)}}@keyframes nav-item-active-glow{0%{box-shadow:0 12px 24px rgba(0,0,0,0.15),inset 0 1px 0 rgba(255,255,255,0.5),0 0 0 1px rgba(59,130,246,0.3)}100%{box-shadow:0 16px 32px rgba(0,0,0,0.2),inset 0 1px 0 rgba(255,255,255,0.6),0 0 0 2px rgba(59,130,246,0.5)}}@keyframes rotate{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}.navbar::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at 20% 50%,rgba(255,255,255,0.1) 1px,transparent 1px),radial-gradient(circle at 80% 50%,rgba(255,255,255,0.1) 1px,transparent 1px),radial-gradient(circle at 40% 20%,rgba(255,255,255,0.05) 1px,transparent 1px),radial-gradient(circle at 60% 80%,rgba(255,255,255,0.05) 1px,transparent 1px);opacity:0;animation:glassmorphism-particles 8s ease-in-out infinite;pointer-events:none}.dark .navbar::before{background:radial-gradient(circle at 20% 50%,rgba(255,255,255,0.05) 1px,transparent 1px),radial-gradient(circle at 80% 50%,rgba(255,255,255,0.05) 1px,transparent 1px),radial-gradient(circle at 40% 20%,rgba(255,255,255,0.03) 1px,transparent 1px),radial-gradient(circle at 60% 80%,rgba(255,255,255,0.03) 1px,transparent 1px)}@keyframes glassmorphism-particles{0%,100%{opacity:0;transform:scale(1)}50%{opacity:1;transform:scale(1.1)}}.dark-mode-toggle-new{@apply relative p-2 rounded-full flex items-center justify-center transition-all duration-300 cursor-pointer;background:rgba(241,245,249,0.8);border:1px solid rgba(255,255,255,0.7);box-shadow:0 2px 8px rgba(0,0,0,0.05),0 1px 2px rgba(0,0,0,0.04);color:#334155;z-index:100}.dark-mode-toggle-new:hover{@apply transform -translate-y-0.5;background:rgba(241,245,249,0.9);box-shadow:0 8px 16px rgba(0,0,0,0.08),0 2px 4px rgba(0,0,0,0.06)}.dark-mode-toggle-new:active{@apply transform scale-95;transition:transform .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 8px 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 8px 16px rgba(0,0,0,0.2),0 2px 4px rgba(0,0,0,0.15)}.dark-mode-toggle-new .sun-icon,.dark-mode-toggle-new .moon-icon{@apply absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 transition-all duration-300}.dark-mode-toggle-new .sun-icon:not(.hidden){animation:spin-in .5s cubic-bezier(0.25,1,0.5,1) forwards}.dark-mode-toggle-new .moon-icon:not(.hidden){animation:spin-in .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-new{@apply flex items-center space-x-1.5 rounded-lg p-1 transition-all duration-300;background:rgba(241,245,249,0.6);border:1px solid rgba(255,255,255,0.6);box-shadow:0 2px 8px 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 8px 16px rgba(0,0,0,0.06),0 2px 4px 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 8px 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 8px 16px rgba(0,0,0,0.15),0 2px 4px rgba(0,0,0,0.1)}.user-avatar-new{@apply h-7 w-7 rounded-full flex items-center justify-center text-white font-semibold text-xs shadow-md transition-all duration-300;background:linear-gradient(135deg,#000,#333);box-shadow:0 2px 4px rgba(0,0,0,0.2),0 1px 2px rgba(0,0,0,0.1)}.dark .user-avatar-new{background:linear-gradient(135deg,#f8fafc,#e2e8f0);color:#0f172a;box-shadow:0 2px 4px rgba(0,0,0,0.3),0 1px 2px rgba(0,0,0,0.2)}.login-button-new{@apply flex items-center px-3 py-1.5 rounded-lg text-xs font-medium shadow-sm transition-all duration-300;background:#000;color:#fff;border:1px solid rgba(255,255,255,0.1);box-shadow:0 2px 8px 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:#333;box-shadow:0 8px 16px rgba(0,0,0,0.15),0 3px 4px rgba(0,0,0,0.1)}.dark .login-button-new{background:#fff;color:#000;border:1px solid rgba(0,0,0,0.1);box-shadow:0 2px 8px 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 8px 16px rgba(0,0,0,0.25),0 3px 4px rgba(0,0,0,0.2)}.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:400px;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-2.5 px-3 py-2.5 rounded-lg text-sm 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:#000;font-weight:500}.dark .mobile-nav-item.active{background:rgba(30,41,59,0.8);color:#fff}.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:0;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 .3s ease,box-shadow .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-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{@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-arrow{@apply transition-transform duration-300}.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,%3Csvgxmlns='http://www.w3.org/2000/svg'viewBox='008080'width='80'height='80'opacity='0.05'fill='currentColor'%3E%3Cpathd='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.5zM4,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,40zM58.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.8zM58.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:.05}.dark .mercedes-star-bg::after{opacity:.02;filter:invert(1) brightness(0.4)}.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)}.glass-hover{transition:all .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)}.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)}.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-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}.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)}.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)}.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-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)}}.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:.8}100%{transform:scale(0.95);opacity:1}}.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 20px 25px -5px rgba(0,0,0,0.5),0 10px 10px -5px rgba(0,0,0,0.3)}.user-dropdown-item{@apply flex items-center px-4 py-3 text-sm text-slate-700 dark:text-slate-200 hover:bg-slate-50 dark:hover:bg-slate-800 transition-all duration-200 cursor-pointer}.user-dropdown-item:first-child{@apply rounded-t-xl}.user-dropdown-item:last-child{@apply rounded-b-xl}.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-icon{@apply w-4 h-4 mr-3 text-slate-500 dark:text-slate-400 transition-colors duration-200}.user-dropdown-item:hover .user-dropdown-icon{@apply text-slate-700 dark:text-slate-200}.user-dropdown-divider{@apply border-t border-slate-200 dark:border-slate-700 my-1}.user-info-section{@apply px-4 py-3 border-b border-slate-200 dark:border-slate-700;background:rgba(248,250,252,0.5)}.dark .user-info-section{background:rgba(30,41,59,0.5)}.user-info-name{@apply text-sm font-semibold text-slate-900 dark:text-white}.user-info-role{@apply text-xs text-slate-500 dark:text-slate-400 mt-1} \ No newline at end of file diff --git a/backend/static/css/input.min.css.gz b/backend/static/css/input.min.css.gz deleted file mode 100644 index 050b879fc860fa191a25c1610a37a74671628168..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 10871 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 HK|%fpZChks