/* ======================================== MEDICISE MOBILE - COMPLETE REWRITE 2024 100% iOS/Android Compatible Solution ======================================== */ /* CRITICAL: Force mobile viewport and scrolling */ @media screen and (max-width: 768px) { /* ===== FOUNDATIONAL RESET ===== */ * { -webkit-box-sizing: border-box !important; box-sizing: border-box !important; -webkit-tap-highlight-color: transparent !important; -webkit-touch-callout: none !important; -webkit-user-select: none !important; user-select: none !important; } /* Allow text selection for inputs and content */ input, textarea, [contenteditable], p, span, div.text-content { -webkit-user-select: text !important; user-select: text !important; } /* ===== HTML & BODY FOUNDATION ===== */ html { width: 100% !important; min-height: 100% !important; min-height: -webkit-fill-available !important; overflow-x: hidden !important; overflow-y: auto !important; -webkit-text-size-adjust: 100% !important; -ms-text-size-adjust: 100% !important; background: #0F1419 !important; } body { width: 100% !important; min-height: 100% !important; min-height: -webkit-fill-available !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; -webkit-overflow-scrolling: touch !important; overscroll-behavior-y: contain !important; -webkit-overscroll-behavior-y: contain !important; background: linear-gradient(135deg, #0F1419 0%, #1A1F2E 100%) !important; color: #FFFFFF !important; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; /* Critical for touch scrolling */ touch-action: pan-y !important; } /* ===== DASHBOARD CONTAINER ===== */ .dashboard-container { width: 100% !important; min-height: 100% !important; min-height: -webkit-fill-available !important; display: flex !important; flex-direction: column !important; background: transparent !important; /* Critical: Enable hardware acceleration */ transform: translateZ(0) !important; -webkit-transform: translateZ(0) !important; -webkit-backface-visibility: hidden !important; backface-visibility: hidden !important; } /* ===== HEADER - FIXED POSITION ===== */ .dashboard-header { /* Dunkle Desktop-Farbe - KEIN Orange */ background: #2A3441 !important; /* Zusätzlicher Glasmorphism-Effekt */ backdrop-filter: blur(20px) saturate(180%) !important; -webkit-backdrop-filter: blur(20px) saturate(180%) !important; color: #FFFFFF !important; padding: env(safe-area-inset-top, 0) 1rem 1rem 1rem !important; min-height: calc(70px + env(safe-area-inset-top, 0)) !important; z-index: 999999 !important; flex-shrink: 0 !important; /* Elegante dunkle Schatten */ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15), 0 1px 0 rgba(255, 255, 255, 0.1) inset !important; } /* ===== HEADER - STICKY POSITION ===== */ .header { position: sticky !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; /* Dunkle Desktop-Farbe - KEIN Orange */ background: #2A3441 !important; /* Zusätzlicher Glasmorphism-Effekt */ backdrop-filter: blur(20px) saturate(180%) !important; -webkit-backdrop-filter: blur(20px) saturate(180%) !important; color: #FFFFFF !important; padding: env(safe-area-inset-top, 0) 1rem 1rem 1rem !important; min-height: calc(70px + env(safe-area-inset-top, 0)) !important; z-index: 999999 !important; /* Elegante dunkle Schatten */ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.1) inset !important; border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; /* Critical: Prevent header from interfering with scroll */ pointer-events: auto !important; } /* KEIN Header-Overlay - reines dunkles Design wie Desktop */ /* FORCE: Sicherstellen dass KEIN orangener Header erscheint */ .header, header, .app-header, .navbar, .nav-header, .dashboard-header { background: #2A3441 !important; background-color: #2A3441 !important; background-image: none !important; } /* ULTRA FORCE: Überschreibe alle spezifischen orangenen Header-Regeln */ @media screen and (max-width: 768px) { .dashboard-header, .header, .dashboard-header.header, .header.dashboard-header, body .dashboard-header, html .dashboard-header, body .header, html .header, html body .dashboard-header, html body .header { background: #2A3441 !important; background-color: #2A3441 !important; background-image: none !important; /* Sticky statt fixed - ermöglicht normales Scrolling */ position: sticky !important; top: 0 !important; z-index: 999999 !important; } /* MEGA FORCE: Überschreibe nur Header-relevante CSS-Variablen für Mobile */ :root { --bg-card: #2A3441 !important; --bg-header-mobile: #2A3441 !important; } /* ULTRA MEGA FORCE: Für alle möglichen Header-Selektoren */ header, .header, .dashboard-header, .app-header, .nav-header, .navbar, div[class*="header"], section[class*="header"] { background: #2A3441 !important; background-color: #2A3441 !important; background-image: none !important; } } .header-content { display: flex !important; justify-content: space-between !important; align-items: center !important; height: 100% !important; max-width: 100% !important; margin: 0 auto !important; position: relative !important; z-index: 1 !important; } .header-logo { display: flex !important; align-items: center !important; gap: 0.5rem !important; flex: 1 !important; min-width: 0 !important; cursor: pointer !important; pointer-events: auto !important; padding: 0.5rem !important; border-radius: 12px !important; transition: all 0.3s ease !important; } .header-logo:hover { background: rgba(255, 255, 255, 0.05) !important; transform: translateY(-1px) !important; } .logo-image { height: 36px !important; width: auto !important; flex-shrink: 0 !important; filter: brightness(1.1) drop-shadow(0 2px 8px rgba(235, 102, 7, 0.3)) !important; pointer-events: none !important; transition: all 0.3s ease !important; } .header-logo:hover .logo-image { filter: brightness(1.2) drop-shadow(0 4px 12px rgba(235, 102, 7, 0.5)) !important; transform: scale(1.05) !important; } .logo-text { font-size: 1.1rem !important; font-weight: 700 !important; color: var(--text-primary, #FFFFFF) !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; pointer-events: none !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important; } /* ===== HEADER ACTIONS - PREMIUM BUTTON DESIGN ===== */ .header-actions { display: flex !important; align-items: center !important; gap: 0.75rem !important; flex-shrink: 0 !important; pointer-events: auto !important; } .header-actions .d-flex { display: flex !important; align-items: center !important; gap: 0.75rem !important; flex-wrap: nowrap !important; } /* ===== PREMIUM HEADER BUTTONS ===== */ .header .btn, .header .btn-secondary, .header .btn-danger, .header .handbook-btn, .user-menu-trigger { /* Elegant glasmorphism design */ background: linear-gradient(145deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; color: var(--text-primary, #FFFFFF) !important; border-radius: 12px !important; padding: 0.75rem !important; font-size: 1rem !important; font-weight: 600 !important; min-height: 50px !important; min-width: 50px !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; pointer-events: auto !important; /* Critical touch settings */ touch-action: manipulation !important; -webkit-tap-highlight-color: transparent !important; -webkit-touch-callout: none !important; /* Premium shadow */ box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 -1px 0 rgba(0, 0, 0, 0.1) inset !important; /* Ensure buttons are accessible */ z-index: 1000000 !important; position: relative !important; /* Subtle glow effect */ filter: drop-shadow(0 0 8px rgba(235, 102, 7, 0.1)) !important; } /* Hover states for buttons */ .header .btn:hover, .header .btn-secondary:hover, .header .handbook-btn:hover, .user-menu-trigger:hover { background: linear-gradient(145deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.15) 100%) !important; border-color: rgba(235, 102, 7, 0.5) !important; transform: translateY(-2px) !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15), 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 -1px 0 rgba(0, 0, 0, 0.1) inset !important; filter: drop-shadow(0 0 12px rgba(235, 102, 7, 0.3)) !important; } /* Active states for buttons */ .header .btn:active, .header .btn-secondary:active, .header .btn-danger:active, .header .handbook-btn:active, .user-menu-trigger:active { background: linear-gradient(145deg, rgba(235, 102, 7, 0.2) 0%, rgba(255, 255, 255, 0.1) 100%) !important; border-color: rgba(235, 102, 7, 0.8) !important; transform: translateY(0) scale(0.95) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), 0 0 0 rgba(255, 255, 255, 0.1) inset !important; filter: drop-shadow(0 0 16px rgba(235, 102, 7, 0.5)) !important; } /* Special styling for logout button */ .header .btn-danger { background: linear-gradient(145deg, rgba(244, 67, 54, 0.15) 0%, rgba(244, 67, 54, 0.05) 100%) !important; border: 1px solid rgba(244, 67, 54, 0.3) !important; min-width: 80px !important; gap: 0.5rem !important; white-space: nowrap !important; } .header .btn-danger:hover { background: linear-gradient(145deg, rgba(244, 67, 54, 0.25) 0%, rgba(244, 67, 54, 0.15) 100%) !important; border-color: rgba(244, 67, 54, 0.6) !important; filter: drop-shadow(0 0 12px rgba(244, 67, 54, 0.3)) !important; } .header .btn-danger:active { background: linear-gradient(145deg, rgba(244, 67, 54, 0.3) 0%, rgba(244, 67, 54, 0.2) 100%) !important; border-color: rgba(244, 67, 54, 0.8) !important; filter: drop-shadow(0 0 16px rgba(244, 67, 54, 0.5)) !important; } /* Button icons */ .header .btn i, .header .handbook-btn i { font-size: 1.1rem !important; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3)) !important; } /* Special user avatar styling */ .user-avatar { width: 36px !important; height: 36px !important; background: linear-gradient(135deg, rgba(235, 102, 7, 0.8) 0%, rgba(235, 102, 7, 0.6) 100%) !important; border: 2px solid rgba(255, 255, 255, 0.3) !important; border-radius: 50% !important; color: #FFFFFF !important; font-weight: 700 !important; font-size: 0.9rem !important; display: flex !important; align-items: center !important; justify-content: center !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important; box-shadow: 0 2px 8px rgba(235, 102, 7, 0.3), 0 1px 0 rgba(255, 255, 255, 0.2) inset !important; } /* Hide user info text on mobile for cleaner look */ .user-menu-trigger .d-flex.flex-column { display: none !important; } .user-menu-trigger .user-menu-arrow { display: none !important; } /* ===== MAIN CONTENT - NO overflow rules, scrolling handled by html ===== */ .main-content { flex: 1 !important; width: 100% !important; /* Remove excessive padding since we're using flexbox layout */ padding-top: 1rem !important; padding-left: 1rem !important; padding-right: 1rem !important; padding-bottom: 2rem !important; -webkit-overflow-scrolling: touch !important; background: transparent !important; /* Critical: Allow scrolling */ touch-action: pan-y !important; /* Additional margin for safety */ margin-top: 0 !important; } /* Sticky header means no large padding-top needed */ main, main.main-content, .main-content, body .main-content, html .main-content, div.main-content, section.main-content { padding-top: 1rem !important; margin-top: 0 !important; } /* EXTRA FORCE: Erste Karte bekommt zusätzlichen Abstand */ .main-content > .container > section:first-child, .main-content > .container > .card:first-child, .main-content .card:first-child { margin-top: 20px !important; } .container { max-width: 100% !important; margin: 0 auto !important; padding: 0 !important; width: 100% !important; background: transparent !important; overflow: visible !important; } /* ===== CARDS - MOBILE OPTIMIZED ===== */ .card, .card-primary, .card-stats { background: linear-gradient(145deg, #2A3441 0%, #343B4A 100%) !important; border: 1px solid #404654 !important; border-radius: 16px !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25) !important; padding: 1.5rem !important; margin: 0 0 1.5rem 0 !important; position: relative !important; color: #FFFFFF !important; overflow: hidden !important; width: 100% !important; /* Ensure cards don't interfere with scrolling */ touch-action: pan-y !important; pointer-events: auto !important; } .card::before, .card-primary::before, .card-stats::before { content: '' !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; height: 3px !important; background: linear-gradient(90deg, #EB6607 0%, #FF8A65 100%) !important; border-radius: 16px 16px 0 0 !important; pointer-events: none !important; } /* ===== PREMIUM MOBILE DASHBOARD BUTTONS ===== */ /* ULTRA HIGH PRIORITY - Überschreibt alle anderen Button-Styles */ body .btn, body .btn-primary, body .btn-secondary, body .btn-success, body .btn-danger, body .btn-sm, body .action-btn, html .btn, html .btn-primary, html .btn-secondary, html .btn-success, html .btn-danger, html .btn-sm, html .action-btn, .dashboard-content .btn, .dashboard-content .btn-primary, .dashboard-content .btn-secondary, .dashboard-content .btn-success, .dashboard-content .btn-danger, .dashboard-content .btn-sm, .dashboard-content .action-btn, .card .btn, .card .btn-primary, .card .btn-secondary, .card .btn-success, .card .btn-danger, .card .btn-sm, .card .action-btn, .welcome-section .btn, .welcome-section .btn-primary, .welcome-section .btn-secondary, .welcome-section .action-btn { /* PREMIUM GLASSMORPHISM DESIGN */ background: linear-gradient(135deg, #EB6607 0%, #CC5500 100%) !important; border: none !important; border-radius: 16px !important; padding: 1rem 1.5rem !important; font-weight: 700 !important; font-size: 1.1rem !important; color: #FFFFFF !important; min-height: 56px !important; min-width: 140px !important; cursor: pointer !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 0.75rem !important; text-decoration: none !important; /* Critical touch settings */ touch-action: manipulation !important; -webkit-tap-highlight-color: transparent !important; -webkit-touch-callout: none !important; pointer-events: auto !important; position: relative !important; z-index: 100 !important; /* PREMIUM SHADOWS */ box-shadow: 0 8px 32px rgba(235, 102, 7, 0.4), 0 2px 0 rgba(255, 255, 255, 0.2) inset, 0 -2px 0 rgba(0, 0, 0, 0.1) inset !important; /* SUBTLE GLOW */ filter: drop-shadow(0 0 12px rgba(235, 102, 7, 0.3)) !important; /* GLASSMORPHISM BACKDROP */ backdrop-filter: blur(20px) saturate(180%) !important; -webkit-backdrop-filter: blur(20px) saturate(180%) !important; } /* PREMIUM HOVER EFFECTS */ body .btn:hover, body .btn-primary:hover, body .action-btn:hover, html .btn:hover, html .btn-primary:hover, html .action-btn:hover, .dashboard-content .btn:hover, .dashboard-content .btn-primary:hover, .dashboard-content .action-btn:hover, .card .btn:hover, .card .btn-primary:hover, .card .action-btn:hover, .welcome-section .btn:hover, .welcome-section .btn-primary:hover, .welcome-section .action-btn:hover { background: linear-gradient(135deg, #FF7700 0%, #EB6607 100%) !important; transform: translateY(-4px) scale(1.02) !important; box-shadow: 0 12px 48px rgba(235, 102, 7, 0.6), 0 3px 0 rgba(255, 255, 255, 0.3) inset, 0 -3px 0 rgba(0, 0, 0, 0.15) inset !important; filter: drop-shadow(0 0 20px rgba(235, 102, 7, 0.5)) brightness(1.1) !important; } /* PREMIUM ACTIVE EFFECTS */ body .btn:active, body .btn-primary:active, body .action-btn:active, html .btn:active, html .btn-primary:active, html .action-btn:active, .dashboard-content .btn:active, .dashboard-content .btn-primary:active, .dashboard-content .action-btn:active, .card .btn:active, .card .btn-primary:active, .card .action-btn:active, .welcome-section .btn:active, .welcome-section .btn-primary:active, .welcome-section .action-btn:active { background: linear-gradient(135deg, #CC5500 0%, #B8460A 100%) !important; transform: translateY(-1px) scale(0.98) !important; box-shadow: 0 4px 16px rgba(235, 102, 7, 0.5), 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 -1px 0 rgba(0, 0, 0, 0.1) inset !important; filter: drop-shadow(0 0 16px rgba(235, 102, 7, 0.7)) brightness(0.9) !important; transition: all 0.1s ease !important; } /* SECONDARY BUTTONS - DIFFERENT STYLE */ body .btn-secondary, html .btn-secondary, .dashboard-content .btn-secondary, .card .btn-secondary, .welcome-section .btn-secondary { background: linear-gradient(145deg, #404654 0%, #525968 100%) !important; color: #B8C5D1 !important; border: 1px solid #525968 !important; box-shadow: 0 6px 24px rgba(64, 70, 84, 0.4), 0 1px 0 rgba(255, 255, 255, 0.1) inset !important; filter: drop-shadow(0 0 8px rgba(64, 70, 84, 0.3)) !important; } body .btn-secondary:hover, html .btn-secondary:hover, .dashboard-content .btn-secondary:hover, .card .btn-secondary:hover, .welcome-section .btn-secondary:hover { background: linear-gradient(145deg, #525968 0%, #6B7785 100%) !important; color: #FFFFFF !important; transform: translateY(-3px) scale(1.01) !important; box-shadow: 0 10px 32px rgba(64, 70, 84, 0.6), 0 2px 0 rgba(255, 255, 255, 0.2) inset !important; filter: drop-shadow(0 0 12px rgba(82, 89, 104, 0.4)) !important; } body .btn-secondary:active, html .btn-secondary:active, .dashboard-content .btn-secondary:active, .card .btn-secondary:active, .welcome-section .btn-secondary:active { background: linear-gradient(145deg, #6B7785 0%, #7A8799 100%) !important; color: #FFFFFF !important; transform: translateY(-1px) scale(0.98) !important; box-shadow: 0 4px 16px rgba(64, 70, 84, 0.5), 0 1px 0 rgba(255, 255, 255, 0.1) inset !important; filter: drop-shadow(0 0 10px rgba(82, 89, 104, 0.5)) !important; } /* BUTTON ICONS */ body .btn i, body .btn-primary i, body .btn-secondary i, body .action-btn i, html .btn i, html .btn-primary i, html .btn-secondary i, html .action-btn i, .dashboard-content .btn i, .dashboard-content .action-btn i, .card .btn i, .card .action-btn i, .welcome-section .btn i, .welcome-section .action-btn i { font-size: 1.2rem !important; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)) !important; transition: all 0.3s ease !important; } /* MOBILE OPTIMIZED SMALL BUTTONS - PDF/DELETE ACTIONS */ body .btn-sm, html .btn-sm, .card .btn-sm, .dashboard-content .btn-sm { min-height: 50px !important; /* Touch-friendly */ min-width: 100px !important; /* Angepasst für nebeneinander */ max-width: 120px !important; /* Passt in die Box */ width: 100px !important; /* Perfekt für nebeneinander */ padding: 0.75rem 0.5rem !important; font-size: 0.85rem !important; /* Angepasste Schriftgröße */ font-weight: 600 !important; border-radius: 12px !important; white-space: nowrap !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 0.4rem !important; /* Ensure buttons stay in container */ flex-shrink: 0 !important; flex-grow: 0 !important; /* Improved touch handling */ touch-action: manipulation !important; -webkit-tap-highlight-color: transparent !important; /* Better spacing in button groups */ margin: 0 !important; /* Text overflow handling */ text-overflow: ellipsis !important; overflow: hidden !important; } /* SUCCESS BUTTONS (PDF) */ body .btn-success, html .btn-success, .card .btn-success, .dashboard-content .btn-success { background: linear-gradient(145deg, #2ECC71 0%, #27AE60 100%) !important; border: 1px solid rgba(46, 204, 113, 0.3) !important; color: #FFFFFF !important; box-shadow: 0 4px 16px rgba(46, 204, 113, 0.25), 0 1px 0 rgba(255, 255, 255, 0.2) inset !important; } body .btn-success:hover, html .btn-success:hover, .card .btn-success:hover, .dashboard-content .btn-success:hover { background: linear-gradient(145deg, #27AE60 0%, #219A52 100%) !important; border-color: rgba(46, 204, 113, 0.6) !important; transform: translateY(-2px) !important; box-shadow: 0 8px 24px rgba(46, 204, 113, 0.35), 0 1px 0 rgba(255, 255, 255, 0.3) inset !important; } /* DANGER BUTTONS (DELETE) */ body .btn-danger, html .btn-danger, .card .btn-danger, .dashboard-content .btn-danger { background: linear-gradient(145deg, #E74C3C 0%, #C0392B 100%) !important; border: 1px solid rgba(231, 76, 60, 0.3) !important; color: #FFFFFF !important; box-shadow: 0 4px 16px rgba(231, 76, 60, 0.25), 0 1px 0 rgba(255, 255, 255, 0.2) inset !important; } body .btn-danger:hover, html .btn-danger:hover, .card .btn-danger:hover, .dashboard-content .btn-danger:hover { background: linear-gradient(145deg, #C0392B 0%, #A93226 100%) !important; border-color: rgba(231, 76, 60, 0.6) !important; transform: translateY(-2px) !important; box-shadow: 0 8px 24px rgba(231, 76, 60, 0.35), 0 1px 0 rgba(255, 255, 255, 0.3) inset !important; } /* BUTTON CONTAINER IMPROVEMENTS FOR MOBILE - NEBENEINANDER IN BOX */ .d-flex.align-center.gap-2, .d-flex.gap-2 { display: flex !important; flex-direction: row !important; /* Buttons nebeneinander */ flex-wrap: nowrap !important; gap: 0.5rem !important; justify-content: center !important; align-items: center !important; width: 100% !important; } /* CONSULTATION ITEM LAYOUT FIXES - MOBILE OPTIMIERT */ .d-flex.align-center.justify-between { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 1rem !important; padding: 1rem !important; width: 100% !important; } .d-flex.align-center.justify-between > .d-flex.align-center.gap-3:first-child { flex-direction: row !important; align-items: center !important; gap: 1rem !important; flex: 1 !important; width: 100% !important; } .d-flex.align-center.justify-between > .d-flex.align-center.gap-2:last-child { display: flex !important; flex-direction: row !important; /* Buttons nebeneinander */ justify-content: center !important; align-items: center !important; gap: 0.5rem !important; flex-wrap: nowrap !important; width: 100% !important; margin-top: 0.5rem !important; padding: 0 0.5rem !important; /* Weniger Padding für bessere Platznutzung */ } /* STATUS BADGE STYLING */ .text-xs.text-brand.font-medium { background: rgba(235, 102, 7, 0.15) !important; color: #EB6607 !important; padding: 0.25rem 0.75rem !important; border-radius: 8px !important; font-weight: 600 !important; font-size: 0.8rem !important; white-space: nowrap !important; border: 1px solid rgba(235, 102, 7, 0.3) !important; } /* FULL WIDTH BUTTONS ON MOBILE */ body .btn-full, body .btn.btn-full, html .btn-full, html .btn.btn-full, .dashboard-content .btn-full, .card .btn-full, .welcome-section .btn-full { width: 100% !important; margin: 0.5rem 0 !important; } /* ===== FORM NAVIGATION MOBILE OPTIMIERUNG ===== */ .form-navigation { margin-top: 2rem !important; padding-top: 1.5rem !important; border-top: 1px solid rgba(235, 102, 7, 0.2) !important; } .form-navigation .d-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 1rem !important; margin-bottom: 1.5rem !important; align-items: stretch !important; } .form-navigation .btn { display: flex !important; align-items: center !important; justify-content: center !important; gap: 0.5rem !important; padding: 1rem 0.875rem !important; min-height: 56px !important; max-height: 56px !important; height: 56px !important; font-weight: 600 !important; font-size: 0.95rem !important; line-height: 1.3 !important; text-align: center !important; border-radius: 12px !important; transition: all 0.3s ease !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important; /* Touch optimizations */ touch-action: manipulation !important; -webkit-tap-highlight-color: transparent !important; -webkit-touch-callout: none !important; } .form-navigation .btn:hover { transform: translateY(-1px) !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important; } .form-navigation .btn:active { transform: translateY(0) !important; transition: transform 0.1s ease !important; } .form-navigation .btn-full { grid-column: 1 / -1 !important; width: 100% !important; margin: 0 !important; padding: 1.125rem 1rem !important; min-height: 56px !important; max-height: 56px !important; height: 56px !important; font-size: 1rem !important; } /* Icons in mobile navigation */ .form-navigation .btn i { font-size: 1rem !important; flex-shrink: 0 !important; } /* Hide text on very small screens, keep icons */ @media (max-width: 380px) { .form-navigation .d-grid { grid-template-columns: 1fr !important; gap: 0.75rem !important; } .form-navigation .btn { width: 100% !important; padding: 1rem 0.75rem !important; min-height: 56px !important; max-height: 56px !important; height: 56px !important; font-size: 0.9rem !important; } .form-navigation .btn .hidden-mobile { display: inline !important; } } /* ===== FORM INPUTS - TOUCH OPTIMIZED ===== */ .form-input, input, textarea, select { /* Remove native browser dropdown arrow */ -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; /* Styling */ background: linear-gradient(145deg, #404654 0%, #525968 100%) !important; border: 1px solid #525968 !important; border-radius: 12px !important; padding: 0.75rem 1rem !important; font-size: 16px !important; /* Prevent iOS zoom */ min-height: 50px !important; color: #FFFFFF !important; transition: all 0.3s ease !important; width: 100% !important; /* Critical touch settings */ touch-action: manipulation !important; -webkit-tap-highlight-color: transparent !important; pointer-events: auto !important; /* Add custom dropdown arrow for mobile */ background-image: url("data:image/svg+xml;charset=UTF-8,") !important; background-repeat: no-repeat !important; background-position: right 1rem center !important; background-size: 16px !important; padding-right: 3rem !important; } .form-input:focus, input:focus, textarea:focus, select:focus { border-color: #EB6607 !important; box-shadow: 0 0 0 3px rgba(235, 102, 7, 0.2) !important; background: linear-gradient(145deg, #525968 0%, #6B7785 100%) !important; outline: none !important; } /* ===== RADIO ITEMS - TOUCH OPTIMIZED ===== */ .radio-item { background: linear-gradient(145deg, #2A3441 0%, #343B4A 100%) !important; border: 2px solid #404654 !important; border-radius: 12px !important; padding: 1rem !important; margin-bottom: 1rem !important; cursor: pointer !important; transition: all 0.3s ease !important; min-height: 70px !important; width: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; /* Critical touch settings */ touch-action: manipulation !important; -webkit-tap-highlight-color: transparent !important; pointer-events: auto !important; position: relative !important; } .radio-item:active { border-color: #EB6607 !important; background: linear-gradient(145deg, #343B4A 0%, #404654 100%) !important; transform: scale(0.98) !important; } .radio-item.selected { border-color: #EB6607 !important; background: linear-gradient(145deg, rgba(235, 102, 7, 0.1) 0%, rgba(235, 102, 7, 0.05) 100%) !important; box-shadow: 0 4px 16px rgba(235, 102, 7, 0.3) !important; } /* ===== TEXT STYLES ===== */ .text-primary { color: #FFFFFF !important; } .text-secondary { color: #B8C5D1 !important; } .text-muted { color: #8A96A3 !important; } .text-brand { color: #EB6607 !important; } /* ===== STAT NUMBERS ===== */ .stat-number { font-size: 2rem !important; font-weight: 700 !important; color: #EB6607 !important; margin-bottom: 0.5rem !important; text-shadow: 0 2px 8px rgba(235, 102, 7, 0.3) !important; } .stat-label { font-size: 0.9rem !important; color: #B8C5D1 !important; font-weight: 600 !important; } /* ===== USER DROPDOWN - DARK DESIGN ===== */ .user-dropdown { position: absolute !important; top: calc(100% + 0.75rem) !important; right: 0 !important; /* DUNKEL STATT HELL */ background: var(--bg-card, #2A3441) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; border: 1px solid var(--border-primary, rgba(255, 255, 255, 0.1)) !important; border-radius: 12px !important; padding: 0.75rem !important; min-width: 200px !important; max-width: 90vw !important; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.1) inset !important; opacity: 0 !important; visibility: hidden !important; transform: translateY(-10px) scale(0.95) !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; z-index: 1000001 !important; /* Prevent scroll interference */ touch-action: pan-y !important; pointer-events: auto !important; } .user-menu-container:hover .user-dropdown, .user-menu-container:focus .user-dropdown, .user-menu-container:active .user-dropdown, .user-menu-container.active .user-dropdown { opacity: 1 !important; visibility: visible !important; transform: translateY(0) scale(1) !important; } /* Disable dropdown for non-admin users on mobile */ .user-menu-trigger.dropdown-disabled .user-dropdown { display: none !important; } .user-menu-trigger.dropdown-disabled:hover .user-dropdown, .user-menu-trigger.dropdown-disabled:focus .user-dropdown, .user-menu-trigger.dropdown-disabled:active .user-dropdown, .user-menu-trigger.dropdown-disabled.active .user-dropdown { opacity: 0 !important; visibility: hidden !important; transform: translateY(-10px) scale(0.95) !important; } .user-menu-trigger.dropdown-disabled .user-menu-arrow { display: none !important; } .user-dropdown-header { color: var(--text-primary, #FFFFFF) !important; font-weight: 600 !important; font-size: 0.9rem !important; margin-bottom: 0.75rem !important; padding: 0.5rem !important; text-align: center !important; border-bottom: 1px solid var(--border-primary, rgba(255, 255, 255, 0.1)) !important; } .user-dropdown-item { display: flex !important; align-items: center !important; gap: 0.75rem !important; padding: 0.75rem !important; /* DUNKEL STATT HELL */ color: var(--text-secondary, #B8C5D1) !important; font-size: 0.9rem !important; border-radius: 8px !important; cursor: pointer !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; margin-bottom: 0.25rem !important; min-height: 50px !important; /* Critical touch settings */ touch-action: manipulation !important; -webkit-tap-highlight-color: transparent !important; pointer-events: auto !important; } .user-dropdown-item:hover { background: var(--bg-hover, rgba(255, 255, 255, 0.05)) !important; color: var(--text-primary, #FFFFFF) !important; transform: translateX(4px) !important; } .user-dropdown-item:active { background: var(--bg-active, rgba(235, 102, 7, 0.1)) !important; color: var(--primary, #EB6607) !important; transform: scale(0.95) !important; } .user-dropdown-item i { color: var(--primary, #EB6607) !important; font-size: 1rem !important; width: 20px !important; text-align: center !important; filter: drop-shadow(0 1px 2px rgba(235, 102, 7, 0.3)) !important; } .user-dropdown-divider { height: 1px !important; background: var(--border-primary, rgba(255, 255, 255, 0.1)) !important; margin: 0.75rem 0 !important; } /* ===== MODALS - COMPLETE DARK DESIGN ===== */ .modal { position: fixed !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; z-index: 999999 !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 1rem !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; } /* CRITICAL: Ensure modals are hidden by default */ .modal.d-none { display: none !important; } .modal-overlay { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; /* DUNKEL STATT HELL */ background: rgba(15, 20, 25, 0.8) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; } .modal-content { position: relative !important; /* DUNKEL STATT HELL */ background: var(--bg-card, #2A3441) !important; border: 1px solid var(--border-primary, rgba(255, 255, 255, 0.1)) !important; border-radius: 16px !important; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.1) inset !important; max-width: 90vw !important; width: 100% !important; max-height: 85vh !important; overflow: hidden !important; animation: modalSlideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) ease-out !important; transform: translateZ(0) !important; -webkit-transform: translateZ(0) !important; } @keyframes modalSlideIn { from { opacity: 0; transform: scale(0.9) translateY(-20px); } to { opacity: 1; transform: scale(1) translateY(0); } } .modal-header { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 1.5rem !important; border-bottom: 1px solid var(--border-primary, rgba(255, 255, 255, 0.1)) !important; background: linear-gradient(145deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.01) 100%) !important; } .modal-header h3 { color: var(--text-primary, #FFFFFF) !important; font-size: 1.25rem !important; font-weight: 700 !important; margin: 0 !important; } .modal-close-btn { background: linear-gradient(145deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%) !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; color: var(--text-secondary, #B8C5D1) !important; font-size: 1.1rem !important; cursor: pointer !important; padding: 0.75rem !important; border-radius: 8px !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; min-height: 44px !important; min-width: 44px !important; display: flex !important; align-items: center !important; justify-content: center !important; touch-action: manipulation !important; -webkit-tap-highlight-color: transparent !important; } .modal-close-btn:hover { background: linear-gradient(145deg, rgba(244, 67, 54, 0.2) 0%, rgba(244, 67, 54, 0.1) 100%) !important; border-color: rgba(244, 67, 54, 0.5) !important; color: #F44336 !important; transform: scale(1.05) !important; } .modal-close-btn:active { transform: scale(0.95) !important; } .modal-body { padding: 1.5rem !important; max-height: calc(85vh - 120px) !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; background: transparent !important; } /* ===== USER MANAGEMENT - DARK DESIGN ===== */ .users-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important; gap: 1rem !important; margin-top: 1rem !important; } .user-card { /* DUNKEL STATT HELL */ background: linear-gradient(145deg, var(--bg-surface, #343B4A) 0%, var(--bg-card, #2A3441) 100%) !important; border: 1px solid var(--border-primary, rgba(255, 255, 255, 0.1)) !important; border-radius: 12px !important; padding: 1.5rem !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) !important; position: relative !important; overflow: hidden !important; } .user-card::before { content: '' !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; height: 3px !important; background: linear-gradient(90deg, var(--primary, #EB6607) 0%, #FF8A65 100%) !important; opacity: 0 !important; transition: opacity 0.3s ease !important; } .user-card:hover { border-color: var(--primary, #EB6607) !important; transform: translateY(-4px) !important; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3) !important; } .user-card:hover::before { opacity: 1 !important; } .user-card-header { display: flex !important; align-items: center !important; gap: 1rem !important; margin-bottom: 1rem !important; } .user-card-avatar { width: 48px !important; height: 48px !important; border-radius: 50% !important; background: linear-gradient(135deg, var(--primary, #EB6607) 0%, #CC5500 100%) !important; display: flex !important; align-items: center !important; justify-content: center !important; font-weight: 700 !important; color: #FFFFFF !important; text-transform: uppercase !important; font-size: 1rem !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important; box-shadow: 0 4px 12px rgba(235, 102, 7, 0.3) !important; } .user-card-info h4 { font-size: 1.1rem !important; font-weight: 600 !important; color: var(--text-primary, #FFFFFF) !important; margin-bottom: 0.25rem !important; } .user-card-info p { font-size: 0.9rem !important; color: var(--text-secondary, #B8C5D1) !important; } .user-card-role { display: inline-block !important; background: linear-gradient(145deg, rgba(235, 102, 7, 0.2) 0%, rgba(235, 102, 7, 0.1) 100%) !important; color: var(--primary, #EB6607) !important; padding: 0.25rem 0.75rem !important; border-radius: 6px !important; font-size: 0.8rem !important; font-weight: 600 !important; margin-top: 0.5rem !important; border: 1px solid rgba(235, 102, 7, 0.3) !important; } .user-card-actions { display: flex !important; gap: 0.5rem !important; margin-top: 1rem !important; padding-top: 1rem !important; border-top: 1px solid var(--border-primary, rgba(255, 255, 255, 0.1)) !important; } .user-card-actions .btn { flex: 1 !important; min-height: 44px !important; font-size: 0.9rem !important; padding: 0.6rem 1rem !important; touch-action: manipulation !important; -webkit-tap-highlight-color: transparent !important; } .loading-placeholder { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; padding: 3rem !important; color: var(--text-secondary, #B8C5D1) !important; text-align: center !important; } .loading-placeholder i { font-size: 2rem !important; margin-bottom: 1rem !important; color: var(--primary, #EB6607) !important; animation: spin 1s linear infinite !important; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* ===== FORM ELEMENTS IN MODALS - DARK DESIGN ===== */ .modal .form-label { color: var(--text-secondary, #B8C5D1) !important; font-weight: 600 !important; margin-bottom: 0.5rem !important; font-size: 0.9rem !important; } .modal .form-input, .modal select, .modal textarea { background: linear-gradient(145deg, var(--bg-input, #404654) 0%, var(--bg-hover, #4A5262) 100%) !important; border: 1px solid var(--border-primary, rgba(255, 255, 255, 0.1)) !important; border-radius: 8px !important; padding: 0.75rem !important; font-size: 16px !important; /* Prevent iOS zoom */ min-height: 48px !important; color: var(--text-primary, #FFFFFF) !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; width: 100% !important; /* Critical touch settings */ touch-action: manipulation !important; -webkit-tap-highlight-color: transparent !important; -webkit-appearance: none !important; } .modal .form-input::placeholder, .modal select::placeholder, .modal textarea::placeholder { color: var(--text-muted, #8A96A3) !important; } .modal .form-input:focus, .modal select:focus, .modal textarea:focus { border-color: var(--primary, #EB6607) !important; box-shadow: 0 0 0 3px rgba(235, 102, 7, 0.2) !important; background: linear-gradient(145deg, var(--bg-hover, #4A5262) 0%, var(--bg-active, #525968) 100%) !important; outline: none !important; } .modal .form-help { color: var(--text-muted, #8A96A3) !important; font-size: 0.8rem !important; margin-top: 0.5rem !important; display: flex !important; align-items: center !important; gap: 0.5rem !important; } .modal .form-help i { color: var(--primary, #EB6607) !important; } .modal .form-navigation { display: flex !important; gap: 1rem !important; margin-top: 1.5rem !important; padding-top: 1.5rem !important; border-top: 1px solid var(--border-primary, rgba(255, 255, 255, 0.1)) !important; } .modal .form-navigation .btn { flex: 1 !important; min-height: 50px !important; font-weight: 600 !important; touch-action: manipulation !important; -webkit-tap-highlight-color: transparent !important; } /* ===== CONSISTENCY FIXES FOR ALL COMPONENTS ===== */ .modal h4, .modal h3, .modal h2 { color: var(--text-primary, #FFFFFF) !important; } .modal p, .modal span:not(.btn span) { color: var(--text-secondary, #B8C5D1) !important; } /* Alert styles in modals */ .modal .alert { background: linear-gradient(145deg, rgba(235, 102, 7, 0.1) 0%, rgba(235, 102, 7, 0.05) 100%) !important; border: 1px solid rgba(235, 102, 7, 0.3) !important; color: var(--text-primary, #FFFFFF) !important; padding: 1rem !important; border-radius: 8px !important; margin-bottom: 1rem !important; } /* Input groups in modals */ .modal .input-group { display: flex !important; border-radius: 8px !important; overflow: hidden !important; } .modal .input-addon { background: linear-gradient(145deg, var(--primary, #EB6607) 0%, #CC5500 100%) !important; border: 1px solid var(--primary, #EB6607) !important; color: #FFFFFF !important; padding: 0.75rem !important; min-height: 48px !important; display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; transition: all 0.3s ease !important; touch-action: manipulation !important; -webkit-tap-highlight-color: transparent !important; } .modal .input-addon:hover { background: linear-gradient(145deg, #FF8A65 0%, var(--primary, #EB6607) 100%) !important; transform: scale(1.05) !important; } .modal .input-addon:active { transform: scale(0.95) !important; } } /* ===== EXTRA SMALL DEVICES ===== */ @media screen and (max-width: 480px) { .header { padding: env(safe-area-inset-top, 0) 0.75rem 0.75rem 0.75rem !important; min-height: calc(65px + env(safe-area-inset-top, 0)) !important; } .main-content { padding-top: calc(130px + env(safe-area-inset-top, 0)) !important; padding-left: 0.75rem !important; padding-right: 0.75rem !important; padding-bottom: 1.5rem !important; } .header-actions { gap: 0.25rem !important; } .header .btn, .header .btn-secondary, .header .btn-danger, .header .handbook-btn, .user-menu-trigger { min-height: 46px !important; min-width: 46px !important; padding: 0.6rem !important; } .logo-text { display: none !important; /* Hide on very small screens */ } .card, .card-primary, .card-stats { padding: 1rem !important; margin-bottom: 1rem !important; } .stat-number { font-size: 1.5rem !important; } } /* ===== LANDSCAPE OPTIMIZATION ===== */ @media screen and (max-width: 768px) and (orientation: landscape) { .header { padding: 0.5rem 1rem !important; min-height: 60px !important; } .main-content { padding-top: 100px !important; padding-left: 1rem !important; padding-right: 1rem !important; padding-bottom: 1rem !important; } .nav-buttons { bottom: 0.5rem !important; padding: 0.5rem !important; } } /* ===== ACCESSIBILITY ENHANCEMENTS ===== */ @media screen and (max-width: 768px) { /* High contrast mode support */ @media (prefers-contrast: high) { .card, .card-primary, .card-stats { border: 2px solid #FFFFFF !important; } .btn-primary { border: 2px solid #FFFFFF !important; } } /* Reduced motion support */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* Focus visible for accessibility */ .btn:focus-visible, .form-input:focus-visible, .radio-item:focus-visible { outline: 3px solid #EB6607 !important; outline-offset: 2px !important; } } /* ===== MOBILE RADIO & CHECKBOX SELECTION - ORANGE BACKGROUND ===== */ /* Ensure orange background for selected items like desktop */ @media screen and (max-width: 768px) { /* Radio Button Orange Selection */ .radio-item input[type="radio"]:checked + .radio-content, .radio-item.selected .radio-content, .radio-item:has(input[type="radio"]:checked) .radio-content, input[type="radio"]:checked + .radio-content, input[type="radio"]:checked ~ .radio-content { background: #EB6607 !important; background-color: #EB6607 !important; color: white !important; border-color: #EB6607 !important; } /* Radio Item Container Orange Selection */ .radio-item:has(input[type="radio"]:checked), .radio-item.selected, .radio-item input[type="radio"]:checked + *, label.radio-item:has(input[type="radio"]:checked) { background: #EB6607 !important; background-color: #EB6607 !important; color: white !important; border-color: #EB6607 !important; } /* Checkbox Orange Selection */ .checkbox-item input[type="checkbox"]:checked + .radio-content, .checkbox-item.selected .radio-content, .checkbox-item:has(input[type="checkbox"]:checked) .radio-content, input[type="checkbox"]:checked + .radio-content, input[type="checkbox"]:checked ~ .radio-content { background: #EB6607 !important; background-color: #EB6607 !important; color: white !important; border-color: #EB6607 !important; } /* Checkbox Item Container Orange Selection */ .checkbox-item:has(input[type="checkbox"]:checked), .checkbox-item.selected, .checkbox-item input[type="checkbox"]:checked + *, label.checkbox-item:has(input[type="checkbox"]:checked) { background: #EB6607 !important; background-color: #EB6607 !important; color: white !important; border-color: #EB6607 !important; } /* Gender Selection Orange */ .gender-option input[type="radio"]:checked + label, .gender-option.selected, .gender-selection .radio-item:has(input:checked), .gender-selection .radio-item.selected { background: #EB6607 !important; background-color: #EB6607 !important; color: white !important; border-color: #EB6607 !important; } /* Question Choice Orange Selection */ .question-card .radio-item:has(input:checked), .question-card .checkbox-item:has(input:checked), .question-card .radio-item.selected, .question-card .checkbox-item.selected { background: #EB6607 !important; background-color: #EB6607 !important; color: white !important; border-color: #EB6607 !important; } /* Icon Color Override for Selected Items */ .radio-item:has(input:checked) .radio-icon, .checkbox-item:has(input:checked) .radio-icon, .radio-item.selected .radio-icon, .checkbox-item.selected .radio-icon, .radio-item:has(input:checked) i, .checkbox-item:has(input:checked) i, .radio-item.selected i, .checkbox-item.selected i { color: white !important; } /* Text Color Override for Selected Items */ .radio-item:has(input:checked) .radio-text, .checkbox-item:has(input:checked) .radio-text, .radio-item.selected .radio-text, .checkbox-item.selected .radio-text, .radio-item:has(input:checked) span, .checkbox-item:has(input:checked) span, .radio-item.selected span, .checkbox-item.selected span { color: white !important; } /* Fallback for older browsers without :has() support */ .radio-item.js-selected, .checkbox-item.js-selected, .gender-option.js-selected { background: #EB6607 !important; background-color: #EB6607 !important; color: white !important; border-color: #EB6607 !important; } .radio-item.js-selected *, .checkbox-item.js-selected *, .gender-option.js-selected * { color: white !important; } }