/** * BIOGAS BETRIEBSSERVICE - MASTER DARK THEME * ============================================ * Universelles Dunkelmode-Design für alle Seiten * Basierend auf E2M-Admin Design * * Anwendung: * 1. Alle HTML-Dateien: * 2. Body-Tag: * 3. Optional: Dark-Mode-Toggle-Script verwenden */ /* ===== CSS VARIABLES (Root) ===== */ :root { /* Hintergrund-Flächen */ --bg: #0b0d10; --bg-secondary: #0f1419; --bg-tertiary: #12161b; /* Panel-Flächen (mit Gradient) */ --panel: #12161b; --panel-2: #151a21; --panel-hover: #1a1f28; /* Text-Farben */ --text: #e7eef7; --text-secondary: #c5d0dd; --text-muted: #9fb3c8; --text-disabled: #5a6c7d; /* Primäre Akzentfarbe (Cyan/Hellblau) */ --accent: #6dd3ff; --accent-hover: #5bc4f0; --accent-dark: #00131c; --accent-light: #a3e7ff; /* Status-Farben */ --success: #3ddc97; --success-bg: rgba(61, 220, 151, 0.12); --success-border: rgba(61, 220, 151, 0.4); --success-text: #93f5c8; --warning: #ffbf69; --warning-bg: rgba(255, 191, 105, 0.12); --warning-border: rgba(255, 191, 105, 0.4); --warning-text: #ffd9a1; --danger: #ff6b6b; --danger-bg: rgba(255, 107, 107, 0.12); --danger-border: rgba(255, 107, 107, 0.4); --danger-text: #ffc9c9; --info: #4dabf7; --info-bg: rgba(77, 171, 247, 0.12); --info-border: rgba(77, 171, 247, 0.4); --info-text: #a5d8ff; /* Border & Dividers */ --border: #1d242d; --border-light: #26303c; --border-hover: #3a4556; /* Input-Felder */ --input-bg: #0e1318; --input-border: #26303c; --input-focus: var(--accent); /* Chips/Badges */ --chip-bg: #1e2630; --chip-border: #27313e; /* Shadows (dunkler angepasst) */ --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.35); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 12px 40px rgba(0, 0, 0, 0.5); } /* ===== BODY & ALLGEMEINE STYLES ===== */ .dark body { background: var(--bg) !important; color: var(--text); font: 15px/1.45 system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; } html, body { height: 100%; margin: 0; padding: 0; } /* ===== TYPOGRAPHY ===== */ .dark h1 { font-size: 24px; font-weight: 700; color: var(--text); margin: 0 0 8px; } .dark h2 { font-size: 18px; font-weight: 600; color: var(--text); margin: 0 0 12px; } /* Override für spezifische Header */ .dark .overview-header h2 { font-size: 2rem; font-weight: 600; color: var(--text); margin-bottom: 0.5rem; } .dark h3 { font-size: 16px; font-weight: 600; color: var(--text-secondary); margin: 0 0 10px; } .dark .subtitle, .dark .sub { color: var(--text-muted); font-size: 14px; margin-bottom: 16px; } .dark .muted { color: var(--text-muted); } .dark .small { font-size: 12px; } .dark .hint { font-size: 12px; color: var(--text-muted); margin-top: 10px; } /* ===== CARDS & PANELS ===== */ .dark .card, .dark .dashboard-card, .dark .panel, .dark .pad { background: linear-gradient(180deg, var(--panel), var(--panel-2)); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-md); padding: 20px; transition: box-shadow 0.2s, border-color 0.2s; } .dark .card:hover, .dark .dashboard-card:hover, .dark .panel:hover { border-color: var(--border-hover); box-shadow: var(--shadow-lg); } .dark .card-flat { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 16px; } /* ===== FORMS & INPUTS ===== */ .dark input, .dark select, .dark textarea { background: var(--input-bg); border: 1px solid var(--input-border); border-radius: 10px; color: var(--text); padding: 10px 12px; font-size: 14px; font-family: inherit; transition: border-color 0.2s, box-shadow 0.2s; width: 100%; box-sizing: border-box; } .dark input::placeholder, .dark textarea::placeholder { color: var(--text-muted); } .dark input:focus, .dark select:focus, .dark textarea:focus { outline: none; border-color: var(--input-focus); box-shadow: 0 0 0 3px rgba(109, 211, 255, 0.1); } .dark input:disabled, .dark select:disabled, .dark textarea:disabled { opacity: 0.5; cursor: not-allowed; } .dark label { display: block; font-size: 13px; font-weight: 500; color: var(--text-muted); margin: 8px 0 6px; } .dark textarea { min-height: 120px; font-family: 'Courier New', Consolas, monospace; font-size: 13px; line-height: 1.5; resize: vertical; } /* ===== BUTTONS ===== */ .dark .btn, .dark button { cursor: pointer; border: none; border-radius: 12px; font-weight: 700; font-size: 14px; transition: all 0.2s ease; padding: 10px 16px; } /* Primary Button (Accent) */ .dark .btn, .dark button[type="submit"], .dark .btn-primary { background: var(--accent); color: var(--accent-dark); } .dark .btn:hover, .dark button[type="submit"]:hover, .dark .btn-primary:hover { background: var(--accent-hover); transform: translateY(-1px); } .dark .btn:active { transform: translateY(0); } .dark .btn:disabled, .dark button:disabled { opacity: 0.5; cursor: not-allowed; transform: none; } /* Secondary Button */ .dark .btn-secondary { background: var(--border-light); color: var(--text); } .dark .btn-secondary:hover { background: #2f3d4f; transform: translateY(-1px); } /* Success Button */ .dark .btn-success { background: var(--success); color: #00331c; } .dark .btn-success:hover { background: #2eca89; } /* Warning Button */ .dark .btn-warning { background: var(--warning); color: #4a2a00; } .dark .btn-warning:hover { background: #f2b043; } /* Danger Button */ .dark .btn-danger { background: var(--danger); color: #fff; } .dark .btn-danger:hover { background: #ff5555; } /* ===== TABLES ===== */ .dark table { width: 100%; border-collapse: separate; border-spacing: 0 6px; } .dark thead th { font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; padding: 10px 12px; text-align: left; } .dark tbody tr { background: #0f141a; border: 1px solid var(--border); transition: background 0.15s; } .dark tbody tr:hover { background: var(--panel-hover); } .dark tbody td { padding: 12px; } .dark tbody td:first-child { border-left: 1px solid var(--border); border-top-left-radius: 10px; border-bottom-left-radius: 10px; } .dark tbody td:last-child { border-right: 1px solid var(--border); border-top-right-radius: 10px; border-bottom-right-radius: 10px; } /* ===== CHIPS & BADGES ===== */ .dark .chip, .dark .badge { display: inline-block; background: var(--chip-bg); border: 1px solid var(--chip-border); color: var(--text-muted); padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; transition: all 0.2s; } .dark .chip-ok, .dark .chip-success { background: var(--success-bg); border-color: var(--success-border); color: var(--success-text); } .dark .chip-warn, .dark .chip-warning { background: var(--warning-bg); border-color: var(--warning-border); color: var(--warning-text); } .dark .chip-bad, .dark .chip-danger { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger-text); } .dark .chip-info { background: var(--info-bg); border-color: var(--info-border); color: var(--info-text); } /* ===== ALERTS ===== */ .dark .alert { padding: 12px 16px; border-radius: 10px; border: 1px solid; margin-bottom: 16px; } .dark .alert-success { background: var(--success-bg); border-color: var(--success-border); color: var(--success-text); } .dark .alert-warning { background: var(--warning-bg); border-color: var(--warning-border); color: var(--warning-text); } .dark .alert-danger { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger-text); } .dark .alert-info { background: var(--info-bg); border-color: var(--info-border); color: var(--info-text); } /* ===== LAYOUT & UTILITIES ===== */ .dark .wrap { max-width: 1200px; margin: 32px auto; padding: 0 16px; } .dark .grid { display: grid; grid-template-columns: 1fr; gap: 16px; } @media (min-width: 900px) { .dark .grid { grid-template-columns: 400px 1fr; } } .dark .row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .dark .row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; } .dark .text-center { text-align: center; } .dark .text-right, .dark .right { text-align: right; } .dark .loading { text-align: center; padding: 40px; color: var(--text-muted); } .dark hr { border: 0; border-top: 1px solid var(--border); margin: 20px 0; } /* ===== HEADER STYLES ===== */ .dark .dashboard-header { background: linear-gradient(135deg, var(--panel) 0%, var(--panel-2) 100%); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-md); padding: 1rem 2rem; display: flex; align-items: center; justify-content: space-between; } .dark .dashboard-header h1 { font-size: 22px; margin: 0 0 4px; color: var(--text); } /* ===== SEARCH INPUT (Dashboard-spezifisch) ===== */ .dark .search-input { background: var(--input-bg); border: 1px solid var(--border-light); color: var(--text); } .dark .search-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(109, 211, 255, 0.1); } /* ===== HEADER BUTTONS ===== */ .dark .header-center .quick-actions { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(36px, 36px)) !important; gap: 0.3rem !important; justify-content: center !important; max-width: 300px !important; } /* Dark Mode: Quick Actions Responsive Breakpoints */ @media (min-width: 375px) { .dark .header-center .quick-actions { grid-template-columns: repeat(auto-fit, minmax(38px, 38px)) !important; gap: 0.32rem !important; max-width: 320px !important; } .dark .quick-action-btn { width: 38px !important; height: 38px !important; font-size: 1.05rem !important; } } @media (min-width: 480px) { .dark .header-center .quick-actions { grid-template-columns: repeat(auto-fit, minmax(40px, 40px)) !important; gap: 0.35rem !important; max-width: 380px !important; } .dark .quick-action-btn { width: 40px !important; height: 40px !important; font-size: 1.1rem !important; } } @media (min-width: 640px) { .dark .header-center .quick-actions { grid-template-columns: repeat(auto-fit, minmax(42px, 42px)) !important; max-width: 420px !important; } .dark .quick-action-btn { width: 42px !important; height: 42px !important; font-size: 1.15rem !important; } } @media (min-width: 768px) { .dark .header-center .quick-actions { grid-template-columns: repeat(auto-fit, minmax(43px, 43px)) !important; max-width: 450px !important; } .dark .quick-action-btn { width: 43px !important; height: 43px !important; font-size: 1.18rem !important; } } @media (min-width: 1024px) { .dark .header-center .quick-actions { grid-template-columns: repeat(auto-fit, minmax(44px, 44px)) !important; max-width: 480px !important; } .dark .quick-action-btn { width: 44px !important; height: 44px !important; font-size: 1.2rem !important; } } @media (min-width: 1280px) { .dark .header-center .quick-actions { max-width: 530px !important; } } .dark .quick-action-btn { background: linear-gradient(135deg, #15803d 0%, #14532d 100%) !important; color: #ffffff !important; border: 1px solid rgba(34, 197, 94, 0.3) !important; box-shadow: 0 2px 8px rgba(22, 163, 74, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important; } .dark .quick-action-btn:hover { background: linear-gradient(135deg, #14532d 0%, #052e16 100%) !important; border-color: rgba(34, 197, 94, 0.5) !important; box-shadow: 0 8px 25px rgba(22, 163, 74, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important; } .dark .header-btn { background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 50%; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; } .dark .header-btn:hover { background: var(--panel-hover); border-color: var(--border-hover); } /* ===== STATS CARDS ===== */ .dark .stat-card, .dark .stat { background: linear-gradient(180deg, var(--panel), var(--panel-2)); border: 1px solid var(--border); border-radius: 12px; padding: 16px; transition: all 0.2s; } .dark .stat-card:hover { border-color: var(--border-hover); box-shadow: var(--shadow-lg); } .dark .stat-number { font-size: 28px; font-weight: 700; color: var(--accent); } .dark .stat-label { font-size: 13px; color: var(--text-muted); margin-top: 8px; } /* ===== SECTIONS & CONTAINERS ===== */ .dark .section { margin-bottom: 32px; } .dark .section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .dark .section-header h2 { margin: 0; } /* ===== RESPONSIVE ===== */ @media (max-width: 768px) { .dark .wrap { padding: 0 12px; margin: 16px auto; } .dark h1 { font-size: 18px; } .dark .row, .dark .row-3 { grid-template-columns: 1fr; gap: 8px; } .dark .grid { grid-template-columns: 1fr; } .dark .dashboard-header { flex-direction: column; align-items: flex-start; gap: 12px; } .dark button { font-size: 14px; padding: 10px; } } @media (max-width: 480px) { .dark .card, .dark .dashboard-card { padding: 12px; border-radius: 12px; } .dark button { width: 100%; } } /* ===== ACCESSIBILITY ===== */ .dark .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } /* ===== UTILITY CLASSES ===== */ .dark .gap-1 { gap: 8px; } .dark .gap-2 { gap: 16px; } .dark .gap-3 { gap: 24px; } .dark .px-1 { padding-left: 8px; padding-right: 8px; } .dark .px-2 { padding-left: 16px; padding-right: 16px; } .dark .py-1 { padding-top: 8px; padding-bottom: 8px; } .dark .py-2 { padding-top: 16px; padding-bottom: 16px; } /* ===== DASHBOARD.CSS ÜBERSCHREIBUNGEN ===== */ /* Dashboard Container */ .dark .dashboard-container { background: var(--bg) !important; } .dark .dashboard-container::before { background: linear-gradient(135deg, rgba(109, 211, 255, 0.03) 0%, rgba(61, 220, 151, 0.02) 100%) !important; } /* Dashboard Header */ .dark .dashboard-header { background: linear-gradient(135deg, var(--panel) 0%, var(--panel-2) 100%) !important; border-bottom: 1px solid var(--border) !important; box-shadow: var(--shadow-md) !important; } .dark .dashboard-header::after { background: linear-gradient(90deg, transparent 0%, rgba(109, 211, 255, 0.2) 50%, transparent 100%) !important; } .dark .header-left .greeting h1 { color: var(--text) !important; } .dark .header-left .date-display { color: var(--text-muted) !important; } /* Quick Action Buttons */ .dark .quick-action-btn { background: linear-gradient(135deg, var(--panel) 0%, var(--panel-2) 100%) !important; color: var(--text) !important; border: 1px solid var(--border) !important; box-shadow: var(--shadow-sm) !important; } .dark .quick-action-btn:hover { background: var(--panel-hover) !important; border-color: var(--border-hover) !important; box-shadow: var(--shadow-md) !important; } /* Search Input */ .dark .search-input { background: var(--input-bg) !important; border-color: var(--input-border) !important; color: var(--text) !important; box-shadow: var(--shadow-sm) !important; } .dark .search-input::placeholder { color: var(--text-muted) !important; } .dark .search-input:focus { border-color: var(--accent) !important; background: var(--input-bg) !important; box-shadow: 0 0 0 3px rgba(109, 211, 255, 0.1) !important; } /* Notification Badge */ .dark .notification-badge { background: linear-gradient(135deg, var(--panel) 0%, var(--panel-2) 100%) !important; border: 1px solid var(--border) !important; box-shadow: var(--shadow-sm) !important; } .dark .notification-badge:hover { background: var(--panel-hover) !important; border-color: var(--border-hover) !important; } /* User Avatar */ .dark .user-avatar { background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%) !important; color: var(--accent-dark) !important; box-shadow: 0 4px 12px rgba(109, 211, 255, 0.3) !important; } /* User Dropdown */ .dark .user-dropdown { background: linear-gradient(135deg, var(--panel) 0%, var(--panel-2) 100%) !important; border: 1px solid var(--border) !important; box-shadow: var(--shadow-xl) !important; } .dark .dropdown-header { border-bottom: 1px solid var(--border) !important; } .dark .user-info .user-name { color: var(--text) !important; } .dark .user-info .user-email { color: var(--text-muted) !important; } .dark .dropdown-divider { background: linear-gradient(90deg, transparent 0%, var(--border) 50%, transparent 100%) !important; } .dark .dropdown-item { color: var(--text-secondary) !important; } .dark .dropdown-item::before { background: linear-gradient(135deg, rgba(109, 211, 255, 0.05) 0%, rgba(109, 211, 255, 0.02) 100%) !important; } .dark .dropdown-item:hover { background: linear-gradient(135deg, rgba(109, 211, 255, 0.08) 0%, rgba(109, 211, 255, 0.04) 100%) !important; color: var(--text) !important; } .dark .dropdown-item.logout-item:hover { background: linear-gradient(135deg, rgba(255, 107, 107, 0.08) 0%, rgba(255, 107, 107, 0.04) 100%) !important; color: var(--danger) !important; } /* KPI Bar */ .dark .kpi-bar { background: linear-gradient(135deg, var(--accent-dark) 0%, #001a26 100%) !important; box-shadow: 0 8px 32px rgba(109, 211, 255, 0.15) !important; } .dark .kpi-item { background: rgba(109, 211, 255, 0.1) !important; } /* Overview Section */ .dark .overview-header h2 { color: var(--text) !important; } .dark .overview-subtitle { color: var(--text-muted) !important; } .dark .overview-card { background: linear-gradient(180deg, var(--panel), var(--panel-2)) !important; border: 1px solid var(--border) !important; box-shadow: var(--shadow-md) !important; } .dark .overview-card:hover { border-color: var(--border-hover) !important; box-shadow: var(--shadow-lg) !important; } .dark .card-header h3 { color: var(--text) !important; } .dark .urgent-item, .dark .today-item { color: var(--text-secondary) !important; } .dark .item-count { color: var(--text) !important; } .dark .performance-bar { background: var(--border-light) !important; } .dark .performance-text { color: var(--text-secondary) !important; } .dark .report-label { color: var(--text-secondary) !important; } /* Stat Cards */ .dark .stat-card { background: linear-gradient(180deg, var(--panel), var(--panel-2)) !important; border: 1px solid var(--border) !important; box-shadow: var(--shadow-md) !important; } .dark .stat-card:hover { border-color: var(--border-hover) !important; box-shadow: var(--shadow-lg) !important; } .dark .stat-card .stat-icon { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important; } .dark .stat-number { color: var(--accent) !important; } .dark .stat-label { color: var(--text-muted) !important; } /* Facilities Section */ .dark .facilities-section { background: linear-gradient(180deg, var(--panel), var(--panel-2)) !important; border: 1px solid var(--border) !important; box-shadow: var(--shadow-md) !important; } .dark .facilities-section::before { background: linear-gradient(135deg, rgba(109, 211, 255, 0.02) 0%, transparent 100%) !important; } .dark .section-header { border-bottom: 1px solid var(--border) !important; } .dark .section-header h2 { color: var(--text) !important; } /* Filter Buttons */ .dark .filter-btn { background: linear-gradient(135deg, var(--panel) 0%, var(--panel-2) 100%) !important; border-color: var(--border) !important; color: var(--text-muted) !important; } .dark .filter-btn:hover { background: var(--panel-hover) !important; border-color: var(--border-hover) !important; box-shadow: var(--shadow-sm) !important; } .dark .filter-btn.active { background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%) !important; border-color: var(--accent) !important; color: var(--accent-dark) !important; box-shadow: 0 4px 16px rgba(109, 211, 255, 0.3) !important; } /* Empty State */ .dark .empty-state { color: var(--text-muted) !important; } .dark .empty-state h3 { color: var(--text-secondary) !important; } .dark .add-facility-btn { background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%) !important; color: var(--accent-dark) !important; box-shadow: 0 4px 16px rgba(109, 211, 255, 0.3) !important; } .dark .add-facility-btn:hover { background: linear-gradient(135deg, var(--accent-hover) 0%, var(--accent) 100%) !important; box-shadow: 0 8px 25px rgba(109, 211, 255, 0.4) !important; } /* Facility Cards */ .dark .facility-card { background: linear-gradient(180deg, var(--panel), var(--panel-2)) !important; border: 1px solid var(--border) !important; box-shadow: var(--shadow-md) !important; } .dark .facility-card:hover { background: linear-gradient(180deg, var(--panel-2), var(--panel-hover)) !important; border-color: var(--border-hover) !important; box-shadow: var(--shadow-lg) !important; } .dark .facility-title h3 { color: var(--text) !important; } .dark .facility-location { color: var(--text-muted) !important; } .dark .facility-details .detail-label { color: var(--text-muted) !important; } .dark .facility-details .detail-value { color: var(--text) !important; } /* Action Buttons */ .dark .action-btn { background: var(--panel) !important; color: var(--text) !important; border-color: var(--border) !important; } .dark .action-btn:hover { background: var(--panel-hover) !important; } .dark .action-btn.primary { background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%) !important; color: var(--accent-dark) !important; } .dark .action-btn.primary:hover { box-shadow: 0 4px 12px rgba(109, 211, 255, 0.3) !important; } /* Sort Buttons */ .dark .sort-btn { background: var(--panel) !important; color: var(--text) !important; border-color: var(--border) !important; } .dark .sort-btn:hover:not(.disabled) { background: var(--accent) !important; color: var(--accent-dark) !important; border-color: var(--accent) !important; } .dark .sort-btn.disabled { background: var(--panel) !important; color: var(--text-disabled) !important; border-color: var(--border) !important; } /* My Day Section */ .dark .my-day-section { background: linear-gradient(180deg, var(--panel), var(--panel-2)) !important; border: 1px solid var(--border) !important; box-shadow: var(--shadow-md) !important; } .dark .my-day-section h3 { color: var(--text) !important; } .dark .task-item { background: linear-gradient(135deg, var(--panel) 0%, var(--panel-2) 100%) !important; border-color: var(--border) !important; } .dark .task-item:hover { background: var(--panel-hover) !important; border-color: var(--border-hover) !important; box-shadow: var(--shadow-sm) !important; } .dark .task-icon { background: var(--panel-2) !important; } .dark .task-title { color: var(--text-secondary) !important; } .dark .task-count { background: var(--panel-2) !important; color: var(--text) !important; } .dark .completion-status { background: var(--success-bg) !important; border-color: var(--success-border) !important; } .dark .status-text { color: var(--success-text) !important; } .dark .status-subtext { color: var(--success-text) !important; } /* Activities Section */ .dark .activities-section { background: linear-gradient(180deg, var(--panel), var(--panel-2)) !important; border: 1px solid var(--border) !important; box-shadow: var(--shadow-md) !important; } .dark .view-all-btn { color: var(--accent) !important; } .dark .view-all-btn:hover { background: rgba(109, 211, 255, 0.1) !important; } .dark .activity-item { background: linear-gradient(135deg, var(--panel) 0%, var(--panel-2) 100%) !important; border-color: var(--border) !important; } .dark .activity-item:hover { background: var(--panel-hover) !important; border-color: var(--border-hover) !important; box-shadow: var(--shadow-sm) !important; } .dark .activity-avatar { background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%) !important; color: var(--accent-dark) !important; box-shadow: 0 4px 12px rgba(109, 211, 255, 0.3) !important; } .dark .activity-text { color: var(--text-secondary) !important; } .dark .activity-text strong { color: var(--text) !important; } .dark .activity-meta { color: var(--text-muted) !important; } .dark .empty-activities { color: var(--text-muted) !important; } /* Chat Section */ .dark .chat-section { background: linear-gradient(135deg, rgba(109, 211, 255, 0.05) 0%, rgba(61, 220, 151, 0.02) 100%) !important; border-color: rgba(109, 211, 255, 0.2) !important; } .dark .chat-section h3 { color: var(--text) !important; } .dark .chat-widget-placeholder { background: var(--panel) !important; border-color: rgba(109, 211, 255, 0.3) !important; } .dark .chat-widget-placeholder h4 { color: var(--text) !important; } .dark .chat-widget-placeholder p { color: var(--text-muted) !important; } /* Modal Styles */ .dark .modal-overlay { background: rgba(0, 0, 0, 0.7) !important; } .dark .modal-content { background: var(--panel) !important; box-shadow: var(--shadow-xl) !important; } .dark .modal-header { border-bottom: 1px solid var(--border) !important; background: linear-gradient(135deg, rgba(109, 211, 255, 0.02) 0%, transparent 100%) !important; } .dark .modal-header h3 { color: var(--text) !important; } .dark .close-btn { color: var(--text-muted) !important; } .dark .close-btn:hover { background: var(--panel-hover) !important; color: var(--text) !important; } .dark .modal-footer { border-top: 1px solid var(--border) !important; } .dark .support-option { background: linear-gradient(135deg, rgba(109, 211, 255, 0.02) 0%, transparent 100%) !important; border-color: var(--border) !important; } .dark .support-option:hover { background: linear-gradient(135deg, rgba(109, 211, 255, 0.05) 0%, rgba(109, 211, 255, 0.02) 100%) !important; border-color: var(--border-hover) !important; } .dark .support-icon { background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%) !important; } .dark .support-info h4 { color: var(--text) !important; } .dark .support-info p { color: var(--text-muted) !important; } /* Loading Skeleton */ .dark .loading-skeleton { background: linear-gradient(90deg, var(--panel) 25%, var(--panel-2) 50%, var(--panel) 75%) !important; } /* ===== FIRMEN-DASHBOARD SPEZIFISCHE ÜBERSCHREIBUNGEN ===== */ /* Firmen-Filter Dropdown */ .dark .company-filter { background: var(--panel) !important; } .dark .company-filter label { color: var(--text) !important; } .dark .company-filter select, .dark #companyFilter { background-color: var(--input-bg) !important; background: var(--input-bg) !important; border-color: var(--input-border) !important; color: var(--text) !important; } .dark .company-filter select option { background-color: var(--input-bg) !important; color: var(--text) !important; } /* Quality Control Section */ .dark .quality-control-section h3 { color: var(--text) !important; } .dark .quality-stats { background: var(--panel) !important; box-shadow: var(--shadow-md) !important; } /* Quality Stats Boxes - OK/Warning/Error */ .dark .quality-stats > div > div:nth-child(1) { background: var(--success-bg) !important; border-color: var(--success-border) !important; } .dark .quality-stats > div > div:nth-child(1) > div:first-child { color: var(--success-text) !important; } .dark .quality-stats > div > div:nth-child(1) > div:last-child { color: var(--success-text) !important; } .dark .quality-stats > div > div:nth-child(2) { background: var(--warning-bg) !important; border-color: var(--warning-border) !important; } .dark .quality-stats > div > div:nth-child(2) > div:first-child { color: var(--warning-text) !important; } .dark .quality-stats > div > div:nth-child(2) > div:last-child { color: var(--warning-text) !important; } .dark .quality-stats > div > div:nth-child(3) { background: var(--danger-bg) !important; border-color: var(--danger-border) !important; } .dark .quality-stats > div > div:nth-child(3) > div:first-child { color: var(--danger-text) !important; } .dark .quality-stats > div > div:nth-child(3) > div:last-child { color: var(--danger-text) !important; } /* Quality Issues Items */ .dark .quality-stats h4 { color: var(--text-muted) !important; } .dark .quality-stats > div:last-child { border-top-color: var(--border) !important; } .dark .quality-stats > div:last-child > div > div { background: var(--panel-2) !important; } .dark .quality-stats > div:last-child > div > div:hover { background: var(--panel-hover) !important; } .dark .quality-stats > div:last-child > div > div > div:first-child { color: var(--text) !important; } .dark .quality-stats > div:last-child > div > div > div:nth-child(2) { color: var(--text-muted) !important; } /* E2M Direktvermarktung Section */ .dark .e2m-settlement-section h3 { color: var(--text) !important; } .dark .e2m-settlement-section button { background: var(--accent) !important; color: var(--accent-dark) !important; } .dark .e2m-content { background: var(--panel) !important; box-shadow: var(--shadow-md) !important; } .dark .e2m-content label { color: var(--text-muted) !important; } /* Anlagen-Filter Select (NEU) */ .dark .e2m-content select { background: var(--input-bg) !important; border-color: var(--input-border) !important; color: var(--text) !important; } .dark .e2m-content input[type="month"] { background: var(--input-bg) !important; border-color: var(--input-border) !important; color: var(--text) !important; } /* E2M KPI Grid Boxes - AKTUALISIERT: nth-child(2) → nth-child(3) wegen neuem Anlagenfilter */ .dark .e2m-content > div:nth-child(3) > div:nth-child(1) { background: var(--success-bg) !important; border-color: var(--success-border) !important; } .dark .e2m-content > div:nth-child(3) > div:nth-child(1) > div:first-child { color: var(--success-text) !important; } .dark .e2m-content > div:nth-child(3) > div:nth-child(1) > div:last-child { color: var(--success-text) !important; } .dark .e2m-content > div:nth-child(3) > div:nth-child(2) { background: var(--info-bg) !important; border-color: var(--info-border) !important; } .dark .e2m-content > div:nth-child(3) > div:nth-child(2) > div:first-child { color: var(--info-text) !important; } .dark .e2m-content > div:nth-child(3) > div:nth-child(2) > div:last-child { color: var(--info-text) !important; } .dark .e2m-content > div:nth-child(3) > div:nth-child(3) { background: var(--warning-bg) !important; border-color: var(--warning-border) !important; } .dark .e2m-content > div:nth-child(3) > div:nth-child(3) > div:first-child { color: var(--warning-text) !important; } .dark .e2m-content > div:nth-child(3) > div:nth-child(3) > div:last-child { color: var(--warning-text) !important; } .dark .e2m-content > div:nth-child(3) > div:nth-child(4) { background: linear-gradient(135deg, rgba(159, 122, 234, 0.12) 0%, rgba(139, 92, 246, 0.12) 100%) !important; border-color: rgba(159, 122, 234, 0.4) !important; } .dark .e2m-content > div:nth-child(3) > div:nth-child(4) > div:first-child { color: #d8b4fe !important; } .dark .e2m-content > div:nth-child(3) > div:nth-child(4) > div:last-child { color: #c084fc !important; } /* E2M Facility Breakdown - AKTUALISIERT: nth-child(3) → nth-child(4) */ .dark .e2m-content > div:nth-child(4) { border-top-color: var(--border) !important; } .dark .e2m-content > div:nth-child(4) > div:first-child { color: var(--text-muted) !important; } .dark .e2m-content > div:nth-child(4) > div:first-child span { color: var(--text-muted) !important; } .dark .e2m-content > div:nth-child(4) > template + div, .dark .e2m-content > div:nth-child(4) > div:not(:first-child) { background: var(--panel-2) !important; } .dark .e2m-content > div:nth-child(4) > div > div:first-child { color: var(--text) !important; } .dark .e2m-content > div:nth-child(4) > div > div:last-child { color: var(--success-text) !important; } /* E2M No Data Message - AKTUALISIERT: nth-child(4) → nth-child(5) */ .dark .e2m-content > div:nth-child(5) { color: var(--text-muted) !important; } .dark .e2m-content > div:nth-child(5) p { color: var(--text-muted) !important; } /* ===== TAILWIND CSS KLASSEN ÜBERSCHREIBUNGEN ===== */ /* Background Colors */ .dark .bg-white { background-color: var(--panel) !important; } .dark .bg-gray-50 { background-color: var(--bg-secondary) !important; } .dark .bg-gray-100 { background-color: var(--bg-tertiary) !important; } .dark .bg-gray-200 { background-color: var(--panel) !important; } .dark .bg-gray-300 { background-color: var(--panel-2) !important; } /* Hover States */ .dark .hover\:bg-white:hover { background-color: var(--panel) !important; } .dark .hover\:bg-gray-50:hover { background-color: var(--bg-secondary) !important; } .dark .hover\:bg-gray-100:hover { background-color: var(--bg-tertiary) !important; } .dark .hover\:bg-gray-200:hover { background-color: var(--panel-hover) !important; } /* Tailwind Text Classes Override */ .dark .text-gray-900 { color: var(--text) !important; } .dark .text-gray-800 { color: var(--text) !important; } .dark .text-gray-700 { color: var(--text-secondary) !important; } .dark .text-gray-600 { color: var(--text-muted) !important; } .dark .text-gray-500 { color: var(--text-muted) !important; } /* Tailwind Border Classes Override */ .dark .border-gray-200 { border-color: var(--border) !important; } .dark .border-gray-300 { border-color: var(--border-light) !important; } /* ===== UMFASSENDE INLINE BACKGROUND ÜBERSCHREIBUNGEN ===== */ /* White backgrounds */ .dark [style*="background: white"], .dark [style*="background:white"], .dark [style*="background-color: white"], .dark [style*="background-color:white"], .dark [style*="background: #fff"], .dark [style*="background:#fff"], .dark [style*="background-color: #fff"], .dark [style*="background-color:#fff"], .dark [style*="background: #ffffff"], .dark [style*="background:#ffffff"], .dark [style*="background-color: #ffffff"], .dark [style*="background-color:#ffffff"] { background: var(--panel) !important; background-color: var(--panel) !important; } /* Light gray backgrounds */ .dark [style*="background: #fafafa"], .dark [style*="background:#fafafa"], .dark [style*="background: #f9fafb"], .dark [style*="background:#f9fafb"], .dark [style*="background: #f5f5f5"], .dark [style*="background:#f5f5f5"] { background: var(--panel-2) !important; } /* Medium gray backgrounds */ .dark [style*="background: #f3f4f6"], .dark [style*="background:#f3f4f6"], .dark [style*="background: #f0f0f0"], .dark [style*="background:#f0f0f0"] { background: var(--panel-hover) !important; } /* RGBA white backgrounds */ .dark [style*="background: rgba(255, 255, 255"], .dark [style*="background:rgba(255,255,255"], .dark [style*="background-color: rgba(255, 255, 255"], .dark [style*="background-color:rgba(255,255,255"] { background: var(--panel) !important; background-color: var(--panel) !important; } /* Text color overrides for inline styles */ .dark [style*="color: #1f2937"], .dark [style*="color:#1f2937"] { color: var(--text) !important; } .dark [style*="color: #374151"], .dark [style*="color:#374151"] { color: var(--text) !important; } .dark [style*="color: #6b7280"], .dark [style*="color:#6b7280"] { color: var(--text-muted) !important; } .dark [style*="color: #9ca3af"], .dark [style*="color:#9ca3af"] { color: var(--text-muted) !important; } /* ===== ANLAGE-DASHBOARD SPEZIFISCHE ÜBERSCHREIBUNGEN ===== */ /* Breadcrumb */ .dark .breadcrumb a { color: var(--accent) !important; } .dark .breadcrumb span { color: var(--text-muted) !important; } /* Facility Info */ .dark .facility-info h1 { color: var(--text) !important; } /* Facility Dropdown */ .dark .facility-info > div > div:nth-child(2) { background: var(--panel) !important; border-color: var(--border) !important; box-shadow: var(--shadow-lg) !important; } .dark .facility-info > div > div:nth-child(2) > div { border-bottom-color: var(--border) !important; } .dark .facility-info > div > div:nth-child(2) > div:hover { background: var(--panel-hover) !important; } .dark .facility-info > div > div:nth-child(2) > div > div:first-child { color: var(--text) !important; } .dark .facility-info > div > div:nth-child(2) > div > div:last-child { color: var(--text-muted) !important; } /* Facility Status Badge */ .dark .facility-status { background: var(--success-bg) !important; border: 1px solid var(--success-border) !important; color: var(--success-text) !important; } .dark .facility-status.warning { background: var(--warning-bg) !important; border-color: var(--warning-border) !important; color: var(--warning-text) !important; } .dark .facility-status.maintenance { background: var(--info-bg) !important; border-color: var(--info-border) !important; color: var(--info-text) !important; } /* Spec Cards, Tasks Cards, Issues Cards */ .dark .spec-card, .dark .tasks-card, .dark .issues-card { background: linear-gradient(180deg, var(--panel), var(--panel-2)) !important; border-color: var(--border) !important; box-shadow: var(--shadow-md) !important; } .dark .spec-card:hover, .dark .tasks-card:hover, .dark .issues-card:hover { border-color: var(--border-hover) !important; box-shadow: var(--shadow-lg) !important; } .dark .spec-card .card-header h3, .dark .tasks-card .card-header h3, .dark .issues-card .card-header h3 { color: var(--text) !important; } /* Dark Mode Scrollbar for Tasks List */ .dark .tasks-list::-webkit-scrollbar-track { background: var(--panel-2); } .dark .tasks-list::-webkit-scrollbar-thumb { background: var(--border); } .dark .tasks-list::-webkit-scrollbar-thumb:hover { background: var(--border-hover); } /* Dark Mode Scrollbar for Feeding Card */ .dark .feeding-card > div[x-show]::-webkit-scrollbar-track, .dark .feeding-card .feeding-content::-webkit-scrollbar-track { background: var(--panel-2); } .dark .feeding-card > div[x-show]::-webkit-scrollbar-thumb, .dark .feeding-card .feeding-content::-webkit-scrollbar-thumb { background: var(--border); } .dark .feeding-card > div[x-show]::-webkit-scrollbar-thumb:hover, .dark .feeding-card .feeding-content::-webkit-scrollbar-thumb:hover { background: var(--border-hover); } /* Spec Items */ .dark .spec-label { color: var(--text-muted) !important; } .dark .spec-value { color: var(--text) !important; } /* Task Items & Issue Items */ .dark .task-item, .dark .issue-item { border-bottom-color: var(--border) !important; } .dark .task-title, .dark .issue-title { color: var(--text) !important; } .dark .task-due, .dark .issue-since { color: var(--text-muted) !important; } .dark .no-tasks, .dark .no-issues { color: var(--text-muted) !important; } /* Quick Create Widget */ .dark .bg-blue-50 { background-color: rgba(109, 211, 255, 0.1) !important; } .dark .text-blue-600 { color: var(--accent) !important; } .dark .text-blue-800 { color: var(--accent-hover) !important; } .dark .hover\:text-blue-800:hover { color: var(--accent-hover) !important; } /* Overview Grid */ .dark .overview-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } /* Dark Mode: Responsive 2 columns on tablet */ @media (max-width: 1200px) { .dark .overview-grid { grid-template-columns: repeat(2, 1fr); } } /* Dark Mode: Stack on mobile */ @media (max-width: 768px) { .dark .overview-grid { grid-template-columns: 1fr; } } /* Dashboard Main */ .dark .facility-dashboard { background: var(--bg) !important; } /* Additional inline style overrides for anlage-dashboard */ .dark [style*="background: #f9fafb"] { background: var(--panel-2) !important; } .dark [style*="background:#f9fafb"] { background: var(--panel-2) !important; } .dark [style*="border: 2px solid #e5e7eb"] { border-color: var(--border) !important; } .dark [style*="border:2px solid #e5e7eb"] { border-color: var(--border) !important; } .dark [style*="border: 1px solid #e5e7eb"] { border-color: var(--border) !important; } .dark [style*="border:1px solid #e5e7eb"] { border-color: var(--border) !important; } .dark [style*="color: #111827"] { color: var(--text) !important; } .dark [style*="color:#111827"] { color: var(--text) !important; } /* Facility Containers Section */ .dark .facility-containers-section { background: linear-gradient(180deg, var(--panel), var(--panel-2)) !important; border-color: var(--border) !important; } .dark .facility-containers-section h2 { color: var(--text) !important; } .dark .facility-containers-section h3 { color: var(--text) !important; } .dark .facility-containers-section h4 { color: var(--text-secondary) !important; } /* Container Cards */ .dark .container-card { background: linear-gradient(135deg, var(--panel) 0%, var(--panel-2) 100%) !important; border-color: var(--border) !important; box-shadow: var(--shadow-md) !important; } .dark .container-card:hover { background: var(--panel-hover) !important; border-color: var(--border-hover) !important; box-shadow: var(--shadow-lg) !important; } /* BHKW Cards */ .dark .bhkw-card { background: linear-gradient(135deg, var(--panel) 0%, var(--panel-2) 100%) !important; border-color: var(--border) !important; box-shadow: var(--shadow-md) !important; } .dark .bhkw-card:hover { background: var(--panel-hover) !important; border-color: var(--border-hover) !important; } /* Substrate Cards */ .dark .substrate-card { background: linear-gradient(135deg, var(--panel) 0%, var(--panel-2) 100%) !important; border-color: var(--border) !important; } .dark .substrate-card:hover { background: var(--panel-hover) !important; border-color: var(--border-hover) !important; } /* Modal Backgrounds */ .dark .modal-backdrop { background: rgba(0, 0, 0, 0.7) !important; } /* Staff Modal */ .dark .staff-modal { background: var(--panel) !important; box-shadow: var(--shadow-xl) !important; } .dark .staff-modal h2 { color: var(--text) !important; } .dark .staff-modal h3 { color: var(--text-secondary) !important; } /* Staff List Section */ .dark .staff-list-section h3 { color: var(--text) !important; } /* Staff Card */ .dark .staff-card { background: var(--panel-2) !important; border-color: var(--border) !important; } .dark .staff-card:hover { background: var(--panel-hover) !important; } /* Staff Info */ .dark .staff-name { color: var(--text) !important; } .dark .staff-email { color: var(--text-muted) !important; } .dark .staff-phone { color: var(--text-muted) !important; } /* Staff Role Select */ .dark .staff-role select.role-select { background: var(--input-bg) !important; border-color: var(--input-border) !important; color: var(--text) !important; } .dark .staff-role select.role-select:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2) !important; } .dark .staff-role select.role-select option { background: var(--panel-2) !important; color: var(--text) !important; } /* Permission Tags */ .dark .tag-full { background: rgba(16, 185, 129, 0.2) !important; color: #6ee7b7 !important; } .dark .tag-limited { background: rgba(251, 191, 36, 0.2) !important; color: #fcd34d !important; } .dark .tag-readonly { background: var(--panel-hover) !important; color: var(--text-muted) !important; } .dark .tag-access { background: rgba(59, 130, 246, 0.2) !important; color: #93c5fd !important; } /* Staff Action Buttons */ .dark .btn-icon:hover { background: var(--panel-hover) !important; } .dark .btn-danger:hover { background: rgba(239, 68, 68, 0.2) !important; } .dark .btn-primary { background: var(--accent) !important; color: white !important; } .dark .btn-primary:hover { background: var(--accent-hover) !important; } /* Add Staff Section */ .dark .add-staff-section { border-top-color: var(--border) !important; } .dark .add-staff-section h3 { color: var(--text) !important; } /* Add Staff Form */ .dark .add-staff-form label { color: var(--text-secondary) !important; } .dark .add-staff-form input, .dark .add-staff-form select { background: var(--input-bg) !important; border-color: var(--input-border) !important; color: var(--text) !important; } .dark .add-staff-form input:focus, .dark .add-staff-form select:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2) !important; } .dark .add-staff-form input::placeholder { color: var(--text-muted) !important; opacity: 0.6; } .dark .add-staff-form select option { background: var(--panel-2) !important; color: var(--text) !important; } .dark .add-staff-form small { color: var(--text-muted) !important; } /* Empty State */ .dark .empty-state { color: var(--text-muted) !important; } .dark .empty-state p { color: var(--text-muted) !important; } /* Staff Items (Legacy support) */ .dark .staff-item { background: var(--panel-2) !important; border-color: var(--border) !important; } .dark .staff-item:hover { background: var(--panel-hover) !important; border-color: var(--border-hover) !important; } .dark .staff-item .name { color: var(--text) !important; } .dark .staff-item .role { color: var(--text-muted) !important; } .dark .staff-item .email { color: var(--text-muted) !important; } /* Defect Report Form */ .dark .defect-form { background: var(--panel) !important; } .dark .defect-form label { color: var(--text-muted) !important; } .dark .defect-form input, .dark .defect-form select, .dark .defect-form textarea { background: var(--input-bg) !important; border-color: var(--input-border) !important; color: var(--text) !important; } /* Toggle Buttons */ .dark .toggle-group button { background: var(--panel) !important; border-color: var(--border) !important; color: var(--text-muted) !important; } .dark .toggle-group button.active, .dark .toggle-group button:hover { background: var(--panel-2) !important; border-color: var(--border-hover) !important; color: var(--text) !important; } /* Alpine.js bg-transparent override */ .dark .bg-transparent { background-color: transparent !important; } .dark .text-gray-600 { color: var(--text-muted) !important; } /* Shadow overrides */ .dark .shadow-sm { box-shadow: var(--shadow-sm) !important; } .dark .shadow-md { box-shadow: var(--shadow-md) !important; } .dark .shadow-lg { box-shadow: var(--shadow-lg) !important; } /* ===== DARK MODE TOGGLE BUTTON ===== */ .dark-toggle { position: fixed; bottom: 2rem; right: 2rem; width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%); border: none; cursor: pointer; font-size: 1.5rem; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(109, 211, 255, 0.4); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); z-index: 9999; } .dark-toggle:hover { transform: translateY(-4px) scale(1.1); box-shadow: 0 8px 30px rgba(109, 211, 255, 0.6); } .dark-toggle:active { transform: translateY(-2px) scale(1.05); } /* Light Mode Toggle Button */ body:not(.dark) .dark-toggle { background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%); box-shadow: 0 4px 20px rgba(251, 191, 36, 0.4); } body:not(.dark) .dark-toggle:hover { box-shadow: 0 8px 30px rgba(251, 191, 36, 0.6); } /* Mobile anpassen */ @media (max-width: 768px) { .dark-toggle { bottom: 1rem; right: 1rem; width: 48px; height: 48px; font-size: 1.25rem; } } /* ===== ZUSÄTZLICHE KOMPONENTEN ÜBERSCHREIBUNGEN ===== */ /* Alle div/section/article mit weißem Hintergrund */ .dark div[style*="background: white"], .dark div[style*="background:white"], .dark section[style*="background: white"], .dark section[style*="background:white"], .dark article[style*="background: white"], .dark article[style*="background:white"] { background: var(--panel) !important; } /* Alle Elemente mit border */ .dark [style*="border: 1px solid #d1d5db"], .dark [style*="border:1px solid #d1d5db"] { border-color: var(--border) !important; } .dark [style*="border: 2px solid #d1d5db"], .dark [style*="border:2px solid #d1d5db"] { border-color: var(--border) !important; } .dark [style*="border-bottom: 1px solid #f3f4f6"], .dark [style*="border-bottom:1px solid #f3f4f6"] { border-bottom-color: var(--border) !important; } .dark [style*="border-top: 1px solid #e5e7eb"], .dark [style*="border-top:1px solid #e5e7eb"] { border-top-color: var(--border) !important; } /* Spezielle Komponenten */ .dark .card-body, .dark .panel-body, .dark .content-box, .dark .info-box { background: var(--panel) !important; color: var(--text) !important; } /* Listen und Tabellen */ .dark ul[style*="background: white"], .dark ol[style*="background: white"], .dark table[style*="background: white"] { background: var(--panel) !important; } /* Forms und Input Wrappers */ .dark .form-group, .dark .input-group, .dark .field-group { background: transparent !important; } /* Container mit Padding */ .dark [style*="padding"][style*="background: white"] { background: var(--panel) !important; } .dark [style*="padding"][style*="background: #f9fafb"] { background: var(--panel-2) !important; } /* Dropdown Menus */ .dark .dropdown-menu, .dark .select-dropdown, .dark .menu-list { background: var(--panel) !important; border-color: var(--border) !important; } .dark .dropdown-item, .dark .menu-item { color: var(--text-secondary) !important; } .dark .dropdown-item:hover, .dark .menu-item:hover { background: var(--panel-hover) !important; color: var(--text) !important; } /* Tooltips und Popovers */ .dark .tooltip, .dark .popover { background: var(--panel-2) !important; color: var(--text) !important; border-color: var(--border) !important; } /* Accordion/Collapse */ .dark .accordion-item, .dark .collapse-item { background: var(--panel) !important; border-color: var(--border) !important; } .dark .accordion-header, .dark .collapse-header { background: var(--panel-2) !important; color: var(--text) !important; } /* Progress Bars */ .dark .progress { background: var(--panel-2) !important; } .dark .progress-bar { background: var(--accent) !important; } /* Pagination */ .dark .pagination { background: transparent !important; } .dark .page-item { background: var(--panel) !important; border-color: var(--border) !important; } .dark .page-item:hover { background: var(--panel-hover) !important; } .dark .page-link { color: var(--text) !important; background: var(--panel) !important; border-color: var(--border) !important; } /* Breadcrumbs */ .dark .breadcrumb { background: transparent !important; } .dark .breadcrumb-item { color: var(--text-muted) !important; } .dark .breadcrumb-item.active { color: var(--text) !important; } /* Lists */ .dark .list-group { background: transparent !important; } .dark .list-group-item { background: var(--panel) !important; border-color: var(--border) !important; color: var(--text) !important; } .dark .list-group-item:hover { background: var(--panel-hover) !important; } /* Nav Tabs */ .dark .nav-tabs { border-bottom-color: var(--border) !important; } .dark .nav-tabs .nav-link { background: var(--panel) !important; border-color: var(--border) !important; color: var(--text-muted) !important; } .dark .nav-tabs .nav-link.active { background: var(--panel-2) !important; color: var(--text) !important; border-color: var(--border) var(--border) transparent !important; } /* Alpine.js specific */ .dark [x-cloak] { display: none !important; } /* ===== MODULES SECTION (ANLAGE-DASHBOARD) ===== */ .dark .modules-section { background: transparent !important; } .dark .modules-section .section-header h2 { color: var(--text) !important; } .dark .modules-section .section-header p { color: var(--text-muted) !important; } .dark .modules-grid { background: transparent !important; display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 0.5rem !important; /* Mobile: kleinerer gap */ } @media (min-width: 640px) { .dark .modules-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 1rem !important; /* Tablet+: größerer gap */ } } @media (min-width: 1024px) { .dark .modules-grid { grid-template-columns: repeat(4, 1fr) !important; } } @media (min-width: 1280px) { .dark .modules-grid { grid-template-columns: repeat(5, 1fr) !important; } } .dark .module-card { background: linear-gradient(180deg, var(--panel), var(--panel-2)) !important; border-color: var(--border) !important; box-shadow: var(--shadow-md) !important; padding: 0.75rem !important; /* Mobile: kompakteres padding */ min-height: 140px !important; /* Mobile: kleinere min-height */ display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: space-between !important; text-align: center !important; border-radius: 12px !important; cursor: pointer !important; transition: all 0.2s ease !important; } /* Dark Mode: Module Card responsive padding */ @media (min-width: 640px) { .dark .module-card { padding: 1.25rem !important; min-height: 180px !important; } } .dark .module-card:hover { background: linear-gradient(180deg, var(--panel-2), var(--panel-hover)) !important; border-color: var(--accent) !important; box-shadow: var(--shadow-lg) !important; transform: translateY(-2px) !important; } .dark .module-icon { font-size: 2rem !important; /* Mobile: kleinere Icons */ margin-bottom: 0.5rem !important; filter: brightness(1.2) !important; } /* Dark Mode: Module Icon responsive size */ @media (min-width: 640px) { .dark .module-icon { font-size: 2.5rem !important; margin-bottom: 0.75rem !important; } } .dark .module-title { font-size: 0.95rem !important; /* Mobile: kleinerer Titel */ font-weight: 600 !important; margin-bottom: 0.35rem !important; color: var(--text) !important; } /* Dark Mode: Module Title responsive size */ @media (min-width: 640px) { .dark .module-title { font-size: 1.1rem !important; margin-bottom: 0.5rem !important; } } .dark .module-description { font-size: 0.7rem !important; /* Mobile: kleinere Beschreibung */ margin-bottom: 0.5rem !important; flex-grow: 1 !important; color: var(--text-muted) !important; } /* Dark Mode: Module Description responsive size */ @media (min-width: 640px) { .dark .module-description { font-size: 0.875rem !important; margin-bottom: 0.75rem !important; } } .dark .module-status { font-size: 0.8rem !important; font-weight: 500 !important; color: var(--accent) !important; } /* Module-spezifische Farben */ .dark .module-card.tagesprotokoll:hover { border-color: rgba(109, 211, 255, 0.6) !important; } .dark .module-card.pruefungen:hover { border-color: rgba(61, 220, 151, 0.6) !important; } .dark .module-card.wartung:hover { border-color: rgba(255, 191, 105, 0.6) !important; } .dark .module-card.berichte:hover { border-color: rgba(159, 122, 234, 0.6) !important; } /* ===== DAILY PROTOCOL SPEZIFISCHE STYLES ===== */ .dark .form-section { background: linear-gradient(180deg, var(--panel), var(--panel-2)) !important; border-color: var(--border) !important; } .dark .protocol-header { background: var(--panel-2) !important; color: var(--text) !important; border-bottom-color: var(--border) !important; } .dark .protocol-form { background: var(--panel) !important; } .dark .protocol-section { background: var(--panel) !important; border-color: var(--border) !important; } /* ===== INPUTSTOFF-ANALYSE SPEZIFISCHE STYLES ===== */ .dark .chart-card { background: linear-gradient(180deg, var(--panel), var(--panel-2)) !important; border-color: var(--border) !important; box-shadow: var(--shadow-md) !important; } .dark .chart-card:hover { border-color: var(--border-hover) !important; box-shadow: var(--shadow-lg) !important; } .dark .filter-bar { background: var(--panel-2) !important; border-color: var(--border) !important; } .dark .table-card { background: linear-gradient(180deg, var(--panel), var(--panel-2)) !important; border-color: var(--border) !important; box-shadow: var(--shadow-md) !important; } .dark .table-card thead { background: var(--panel-2) !important; border-bottom-color: var(--border) !important; } .dark .table-card tbody tr { border-bottom-color: var(--border) !important; } .dark .table-card tbody tr:hover { background: var(--panel-hover) !important; } /* ===== WARTUNGSMANAGEMENT SPEZIFISCHE STYLES ===== */ .dark .filter-section { background: var(--panel-2) !important; border-color: var(--border) !important; } .dark .maintenance-card { background: linear-gradient(180deg, var(--panel), var(--panel-2)) !important; border-color: var(--border) !important; } .dark .maintenance-card:hover { background: var(--panel-hover) !important; border-color: var(--border-hover) !important; } /* ===== WEITERE ALLGEMEINE ÜBERSCHREIBUNGEN ===== */ /* Alle Karten-Varianten */ .dark .info-card, .dark .data-card, .dark .content-card, .dark .widget-card { background: linear-gradient(180deg, var(--panel), var(--panel-2)) !important; border-color: var(--border) !important; box-shadow: var(--shadow-md) !important; } /* Headers */ .dark .page-header, .dark .section-title, .dark .card-title { color: var(--text) !important; } /* Subtitles */ .dark .page-subtitle, .dark .section-subtitle, .dark .card-subtitle { color: var(--text-muted) !important; } /* Alle Filter/Toolbar Bereiche */ .dark .toolbar, .dark .filter-toolbar, .dark .action-bar { background: var(--panel-2) !important; border-color: var(--border) !important; } /* Grid Layouts */ .dark .data-grid, .dark .card-grid, .dark .content-grid { background: transparent !important; } /* Wells / Info Boxes */ .dark .well, .dark .info-box, .dark .notice-box { background: var(--panel-2) !important; border-color: var(--border) !important; color: var(--text-secondary) !important; } /* ===== FEEDING CARD (FÜTTERUNGSÜBERSICHT) ===== */ .dark .feeding-card { background: linear-gradient(180deg, var(--panel), var(--panel-2)) !important; border-color: var(--border) !important; box-shadow: var(--shadow-md) !important; } .dark .feeding-content { background: transparent !important; } .dark .feeding-day { background: transparent !important; } .dark .feeding-day.today { background: var(--success-bg) !important; border: 1px solid var(--success-border) !important; } .dark .feeding-day.yesterday { background: transparent !important; } .dark .day-label span:first-child { color: var(--text) !important; } .dark .day-label span:last-child { color: var(--text-muted) !important; } .dark .feeding-stat { border-bottom-color: var(--border) !important; } .dark .feeding-stat:last-child { border-bottom: none !important; } .dark .feeding-stat .stat-label { color: var(--text-muted) !important; } .dark .feeding-stat .stat-value { color: var(--text) !important; } .dark .feeding-stat .stat-value.primary { color: var(--success-text) !important; font-weight: 600 !important; } /* Divider in feeding card */ .dark .feeding-card [style*="background: #e5e7eb"] { background: var(--border) !important; } /* ===== SCHNELLERFASSUNG (QUICK CREATE WIDGET) ===== */ /* Toggle Button Container */ .dark .spec-card .bg-gray-50 { background-color: var(--panel-2) !important; border-bottom-color: var(--border) !important; } /* Toggle Buttons - Active State */ .dark .spec-card button.bg-white { background-color: var(--panel-hover) !important; color: var(--text) !important; border: 1px solid var(--accent) !important; } /* Toggle Buttons - Inactive State */ .dark .spec-card button.bg-transparent { background-color: transparent !important; color: var(--text-secondary) !important; border: 1px solid transparent !important; } .dark .spec-card button.bg-transparent:hover { background-color: rgba(109, 211, 255, 0.1) !important; color: var(--text) !important; } /* Override text-gray-600 specifically in quick create */ .dark .spec-card button.text-gray-600 { color: var(--text-secondary) !important; } /* Labels in quick create */ .dark .spec-card label.text-gray-700 { color: var(--text-muted) !important; } /* Select dropdown in quick create */ .dark .spec-card select { background-color: var(--input-bg) !important; border-color: var(--input-border) !important; color: var(--text) !important; } .dark .spec-card select option { background-color: var(--input-bg) !important; color: var(--text) !important; } .dark .spec-card select:focus { border-color: var(--accent) !important; ring-color: var(--accent) !important; } /* Input fields in quick create */ .dark .spec-card input[type="text"], .dark .spec-card input[type="number"], .dark .spec-card input[type="date"], .dark .spec-card input[type="time"], .dark .spec-card textarea { background-color: var(--input-bg) !important; border-color: var(--input-border) !important; color: var(--text) !important; } .dark .spec-card input::placeholder, .dark .spec-card textarea::placeholder { color: var(--text-muted) !important; } /* Success/Error messages in quick create */ .dark .spec-card .text-green-600 { color: var(--success-text) !important; } .dark .spec-card .text-red-600 { color: var(--danger-text) !important; } /* Loading state */ .dark .spec-card .text-gray-500 { color: var(--text-muted) !important; } /* ===== ROUTINE-TASKS-MANAGEMENT SPEZIFISCHE STYLES ===== */ /* Main Headings */ .dark h1.text-gray-800 { color: var(--text) !important; } .dark p.text-gray-600 { color: var(--text-muted) !important; } /* Filter Tab Container */ .dark .bg-white.rounded-lg.shadow { background: linear-gradient(180deg, var(--panel), var(--panel-2)) !important; box-shadow: var(--shadow-md) !important; } /* Filter Buttons - Inactive */ .dark button.bg-gray-200 { background-color: var(--panel-2) !important; color: var(--text-secondary) !important; border: 1px solid var(--border) !important; } .dark button.bg-gray-200:hover { background-color: var(--panel-hover) !important; color: var(--text) !important; } /* Filter Buttons - Active (Green) */ .dark button.bg-green-600 { background: linear-gradient(135deg, var(--success) 0%, var(--success-hover) 100%) !important; color: white !important; box-shadow: 0 4px 12px rgba(61, 220, 151, 0.3) !important; } .dark button.bg-green-600:hover { box-shadow: 0 6px 16px rgba(61, 220, 151, 0.4) !important; } /* Task Cards */ .dark .bg-white.rounded-lg.shadow.hover\:shadow-lg { background: linear-gradient(180deg, var(--panel), var(--panel-2)) !important; border: 1px solid var(--border) !important; box-shadow: var(--shadow-md) !important; } .dark .bg-white.rounded-lg.shadow.hover\:shadow-lg:hover { background: linear-gradient(180deg, var(--panel-2), var(--panel-hover)) !important; border-color: var(--border-hover) !important; box-shadow: var(--shadow-lg) !important; } /* Task Card Title */ .dark h3.text-gray-800 { color: var(--text) !important; } /* Task Card Description */ .dark p.text-gray-600 { color: var(--text-muted) !important; } /* Task Info Text */ .dark .text-gray-500 { color: var(--text-muted) !important; } .dark .text-green-600 { color: var(--success-text) !important; } /* Field Preview Badges */ .dark .bg-blue-50 { background-color: rgba(109, 211, 255, 0.15) !important; } .dark .text-blue-700 { color: var(--accent) !important; } .dark .text-blue-500 { color: var(--accent-hover) !important; } /* Inactive Badge */ .dark span.bg-gray-200.text-gray-600 { background-color: var(--panel-2) !important; color: var(--text-muted) !important; } /* Action Buttons */ .dark .bg-green-600.hover\:bg-green-700 { background: linear-gradient(135deg, var(--success) 0%, var(--success-hover) 100%) !important; } .dark .bg-green-600.hover\:bg-green-700:hover { background: linear-gradient(135deg, var(--success-hover) 0%, var(--success) 100%) !important; } .dark .bg-blue-600.hover\:bg-blue-700 { background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%) !important; color: var(--accent-dark) !important; } .dark .bg-blue-600.hover\:bg-blue-700:hover { background: linear-gradient(135deg, var(--accent-hover) 0%, var(--accent) 100%) !important; } .dark .bg-red-600.hover\:bg-red-700 { background: linear-gradient(135deg, var(--danger) 0%, var(--danger-hover) 100%) !important; } .dark .bg-red-600.hover\:bg-red-700:hover { background: linear-gradient(135deg, var(--danger-hover) 0%, var(--danger) 100%) !important; } .dark .bg-yellow-600.hover\:bg-yellow-700 { background: linear-gradient(135deg, var(--warning) 0%, var(--warning-hover) 100%) !important; color: #000 !important; } .dark .bg-yellow-600.hover\:bg-yellow-700:hover { background: linear-gradient(135deg, var(--warning-hover) 0%, var(--warning) 100%) !important; } /* Loading / Empty State */ .dark .text-center.py-12 { color: var(--text-muted) !important; } /* Navigation Bar */ .dark nav.bg-green-700 { background: linear-gradient(135deg, var(--success-dark) 0%, var(--success) 100%) !important; } /* ===== BODY BACKGROUNDS - KRITISCH FÜR ALLE SEITEN ===== */ /* Alle Body Tags mit Tailwind Klassen */ .dark.bg-gray-50, .dark.bg-gray-100, body.dark.bg-gray-50, body.dark.bg-gray-100, body.dark.bg-white, .dark body { background-color: var(--bg) !important; background: var(--bg) !important; } /* Haupt-Container die oft den Hintergrund setzen */ .dark main, .dark .main-content, .dark .container { background-color: transparent !important; } /* Spezifische Page-Container */ .dark .page-container, .dark .content-wrapper, .dark .app-container { background-color: transparent !important; } /* ===== WARTUNGSMANAGEMENT SPEZIFISCHE STYLES ===== */ /* Wartung Container - HAUPTHINTERGRUND DER SEITE! */ .dark .wartung-container { background: var(--bg) !important; } /* Wartung Header */ .dark .wartung-header h1 { color: var(--text) !important; } .dark .wartung-header p { color: var(--text-muted) !important; } /* Header */ .dark .page-header h1 { color: var(--text) !important; } .dark .page-header p { color: var(--text-muted) !important; } /* Status Indicator Cards */ .dark .status-card { background: linear-gradient(180deg, var(--panel), var(--panel-2)) !important; border: 1px solid var(--border) !important; box-shadow: var(--shadow-md) !important; } .dark .status-card:hover { background: linear-gradient(180deg, var(--panel-2), var(--panel-hover)) !important; border-color: var(--border-hover) !important; box-shadow: var(--shadow-lg) !important; transform: translateY(-2px); transition: all 0.3s ease; } .dark .status-card .status-number { /* Colors are set by specific classes, keep them */ } .dark .status-card .status-label { color: var(--text-muted) !important; } /* Specific status card number colors are already set */ .dark .status-card.yearly-total .status-number { color: #c084fc !important; /* lighter purple */ } .dark .status-card.yearly-completed .status-number { color: var(--success-text) !important; } .dark .status-card.overdue .status-number { color: var(--danger-text) !important; } .dark .status-card.due-soon .status-number { color: var(--warning-text) !important; } .dark .status-card.scheduled .status-number { color: var(--accent) !important; } .dark .status-card.completed .status-number { color: var(--success-text) !important; } /* Filter Label */ .dark .filter-label { color: var(--text) !important; } /* Filter Select & Input */ .dark .filter-select, .dark .filter-input { background-color: var(--input-bg) !important; border-color: var(--input-border) !important; color: var(--text) !important; } .dark .filter-select option { background-color: var(--input-bg) !important; color: var(--text) !important; } .dark .filter-select:focus, .dark .filter-input:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 3px rgba(109, 211, 255, 0.1) !important; } /* Kategorie Badges - keep their specific colors but adjust */ .dark .kategorie-badge { border-color: transparent !important; } .dark .kategorie-badge.active { border-color: currentColor !important; box-shadow: 0 0 0 2px currentColor !important; } /* Tasks Grid */ .dark .tasks-grid { background: transparent !important; } /* Task Card */ .dark .task-card, .dark .wartung-card { background: linear-gradient(180deg, var(--panel), var(--panel-2)) !important; border-color: var(--border) !important; box-shadow: var(--shadow-md) !important; } .dark .task-card:hover, .dark .wartung-card:hover { background: linear-gradient(180deg, var(--panel-2), var(--panel-hover)) !important; border-color: var(--border-hover) !important; box-shadow: var(--shadow-lg) !important; } .dark .task-card h3, .dark .wartung-card h3 { color: var(--text) !important; } .dark .task-card p, .dark .wartung-card p { color: var(--text-muted) !important; } /* Wartung Card Spezifisch */ .dark .wartung-card.inactive { background: var(--panel-2) !important; opacity: 0.7 !important; } .dark .wartung-card.scheduled { background: linear-gradient(135deg, var(--panel) 0%, rgba(109, 211, 255, 0.1) 100%) !important; border-left-color: var(--accent) !important; } .dark .wartung-card .card-title { color: var(--text) !important; } .dark .wartung-card .card-details { color: var(--text-secondary) !important; } .dark .wartung-card .detail-row { color: var(--text-secondary) !important; } .dark .wartung-card .detail-row .detail-icon { color: var(--text-muted) !important; } .dark .wartung-card .text-gray-600 { color: var(--text-muted) !important; } /* Wartung Card Action Buttons Container */ .dark .wartung-card .card-actions { background: transparent !important; } /* Wartung Card Badges */ .dark .wartung-card .pflicht-badge { /* Keep original colors but adjust if needed */ } .dark .wartung-card .intervall-badge { background: var(--panel-2) !important; color: var(--text) !important; border: 1px solid var(--border) !important; } .dark .wartung-card .intervall-badge.jaehrlich { background: rgba(139, 92, 246, 0.15) !important; color: #c084fc !important; } .dark .wartung-card .intervall-badge.monatlich { background: rgba(59, 130, 246, 0.15) !important; color: var(--accent) !important; } .dark .wartung-card .intervall-badge.woechentlich { background: rgba(61, 220, 151, 0.15) !important; color: var(--success-text) !important; } .dark .wartung-card .intervall-badge.taeglich { background: rgba(255, 191, 105, 0.15) !important; color: var(--warning-text) !important; } /* PSA Items */ .dark .wartung-card .psa-item { background: var(--panel-2) !important; color: var(--text-secondary) !important; border: 1px solid var(--border) !important; } /* Due Date Classes */ .dark .wartung-card .overdue { color: var(--danger-text) !important; font-weight: 600 !important; } .dark .wartung-card .due-soon { color: var(--warning-text) !important; font-weight: 600 !important; } .dark .wartung-card .due-later { color: var(--text-muted) !important; } /* Wartung Grid */ .dark .wartung-grid { background: transparent !important; } /* Additional inline backgrounds in wartungsmanagement */ .dark [style*="background: linear-gradient(135deg, #f8fafc"], .dark [style*="background:linear-gradient(135deg, #f8fafc"], .dark [style*="background: linear-gradient(135deg, #ffffff 0%, #eff6ff"] { background: var(--bg) !important; } /* Fee backgrounds (red/yellow for badges) - keep these but adjust slightly */ .dark [style*="background: #fee2e2"] { background: rgba(239, 68, 68, 0.15) !important; } .dark [style*="background: #fef3c7"] { background: rgba(245, 158, 11, 0.15) !important; } .dark [style*="background: #dcfce7"] { background: rgba(22, 163, 74, 0.15) !important; } .dark [style*="background: #e0e7ff"] { background: rgba(99, 102, 241, 0.15) !important; } .dark [style*="background: #f3e8ff"] { background: rgba(168, 85, 247, 0.15) !important; } /* Text colors in inline styles */ .dark [style*="color: #991b1b"] { color: #fca5a5 !important; } .dark [style*="color: #92400e"] { color: #fbbf24 !important; } .dark [style*="color: #6b21a8"] { color: #c084fc !important; } .dark [style*="color: #166534"] { color: #86efac !important; } .dark [style*="color: #1e293b"] { color: var(--text) !important; } .dark [style*="color: #64748b"] { color: var(--text-muted) !important; } /* ===== ASSET-MANAGEMENT / EQUIPMENT WORKBOOK SPEZIFISCHE STYLES ===== */ /* Asset Management Container - HAUPTHINTERGRUND */ .dark .asset-management-container { background: var(--bg) !important; } /* Header */ .dark .header h1 { color: var(--text) !important; } /* Asset Cards - DIE EQUIPMENT KARTEN! */ .dark .asset-card { background: linear-gradient(180deg, var(--panel), var(--panel-2)) !important; border: 1px solid var(--border) !important; box-shadow: var(--shadow-md) !important; } .dark .asset-card:hover { background: linear-gradient(180deg, var(--panel-2), var(--panel-hover)) !important; border-color: var(--border-hover) !important; box-shadow: var(--shadow-lg) !important; } /* Asset Card Elemente */ .dark .asset-title { color: var(--text) !important; } .dark .asset-type { background: var(--panel-2) !important; color: var(--text-secondary) !important; border: 1px solid var(--border) !important; } /* Asset Info */ .dark .asset-info { color: var(--text-secondary) !important; } .dark .asset-info strong { color: var(--text) !important; } /* Asset Stats */ .dark .asset-stats { background: var(--panel-2) !important; border-top-color: var(--border) !important; } /* Assets Grid */ .dark .assets-grid { background: transparent !important; } /* Manufacturer/Model Text */ .dark .manufacturer, .dark .model-text { color: var(--text-secondary) !important; } /* Serial Number */ .dark .serial-number { color: var(--text-muted) !important; } /* Installation Date */ .dark .install-date { color: var(--text-muted) !important; } /* Status Indicators on Asset Cards */ .dark .asset-card .status-active { background: var(--success-bg) !important; color: var(--success-text) !important; border: 1px solid var(--success-border) !important; } .dark .asset-card .status-maintenance { background: var(--warning-bg) !important; color: var(--warning-text) !important; border: 1px solid var(--warning-border) !important; } .dark .asset-card .status-inactive { background: var(--panel-2) !important; color: var(--text-muted) !important; border: 1px solid var(--border) !important; } /* Equipment Workbook Container */ .dark .workbook-container { background: transparent !important; } /* Equipment Workbook Body */ .dark body[style*="background: linear-gradient(135deg, #f8fafc"] { background: var(--bg) !important; } /* Task Meta Info */ .dark .task-meta { color: var(--text-muted) !important; } /* Status Badges in task cards */ .dark .status-badge { border: 1px solid var(--border) !important; } /* Empty State */ .dark .empty-state h3 { color: var(--text-secondary) !important; } .dark .empty-state p { color: var(--text-muted) !important; } /* ===== GLOBALE UNIVERSELLE ÜBERSCHREIBUNGEN (FÜR ALLE VERBLEIBENDEN PROBLEME) ===== */ /* Alle Elemente mit CSS-Klassen die white background haben */ .dark .modal-content, .dark .card, .dark .inspection-card, .dark .stat-card, .dark .chart-container, .dark .protocol-card, .dark .ticket-card, .dark .hub-card, .dark .integration-section, .dark .logout-card, .dark .magic-login-container, .dark .set-password-container, .dark .contact-button, .dark .ticket-section, .dark .sidebar-header, .dark .container { background: linear-gradient(180deg, var(--panel), var(--panel-2)) !important; border-color: var(--border) !important; box-shadow: var(--shadow-md) !important; } /* Alle grauen hex backgrounds (#f0f0f0, #fafafa, #f9fafb, #f3f4f6, #f5f5f5, etc.) */ .dark [style*="background: #f0"], .dark [style*="background:#f0"], .dark [style*="background: #f1"], .dark [style*="background:#f1"], .dark [style*="background: #f2"], .dark [style*="background:#f2"], .dark [style*="background: #f3"], .dark [style*="background:#f3"], .dark [style*="background: #f4"], .dark [style*="background:#f4"], .dark [style*="background: #f5"], .dark [style*="background:#f5"], .dark [style*="background: #f6"], .dark [style*="background:#f6"], .dark [style*="background: #f7"], .dark [style*="background:#f7"], .dark [style*="background: #f8"], .dark [style*="background:#f8"], .dark [style*="background: #f9"], .dark [style*="background:#f9"], .dark [style*="background: #fa"], .dark [style*="background:#fa"], .dark [style*="background: #fb"], .dark [style*="background:#fb"], .dark [style*="background: #fc"], .dark [style*="background:#fc"], .dark [style*="background: #fd"], .dark [style*="background:#fd"], .dark [style*="background: #fe"], .dark [style*="background:#fe"] { background: var(--panel-2) !important; } /* Spezifische graue Farben */ .dark [style*="background: #e5e7eb"], .dark [style*="background:#e5e7eb"] { background: var(--border) !important; } .dark [style*="background: #d1d5db"], .dark [style*="background:#d1d5db"] { background: var(--border-light) !important; } /* Alle Klassen die wahrscheinlich Container/Cards sind */ .dark div[class*="-card"], .dark div[class*="card-"], .dark section[class*="-section"], .dark div[class*="-container"], .dark div[class*="container-"] { /* Nur falls sie keinen expliziten background haben */ } /* Sehr aggressive globale Überschreibung für alles was weiß ist */ .dark div[style*="background-color: white"], .dark div[style*="background-color:white"], .dark div[style*="background-color: #fff"], .dark div[style*="background-color:#fff"], .dark div[style*="background-color: #ffffff"], .dark div[style*="background-color:#ffffff"], .dark section[style*="background: white"], .dark section[style*="background:white"], .dark article[style*="background: white"], .dark article[style*="background:white"], .dark aside[style*="background: white"], .dark aside[style*="background:white"], .dark header[style*="background: white"], .dark header[style*="background:white"], .dark footer[style*="background: white"], .dark footer[style*="background:white"], .dark main[style*="background: white"], .dark main[style*="background:white"], .dark nav[style*="background: white"], .dark nav[style*="background:white"] { background: var(--panel) !important; background-color: var(--panel) !important; } /* Border colors für alle grauen borders */ .dark [style*="border: 1px solid #e"], .dark [style*="border:1px solid #e"], .dark [style*="border: 2px solid #e"], .dark [style*="border:2px solid #e"], .dark [style*="border: 1px solid #d"], .dark [style*="border:1px solid #d"], .dark [style*="border: 2px solid #d"], .dark [style*="border:2px solid #d"] { border-color: var(--border) !important; } .dark [style*="border-bottom: 1px solid #e"], .dark [style*="border-bottom:1px solid #e"], .dark [style*="border-bottom: 1px solid #d"], .dark [style*="border-bottom:1px solid #d"], .dark [style*="border-top: 1px solid #e"], .dark [style*="border-top:1px solid #e"], .dark [style*="border-top: 1px solid #d"], .dark [style*="border-top:1px solid #d"] { border-color: var(--border) !important; } /* Alle möglichen Textfarben */ .dark [style*="color: #111"], .dark [style*="color:#111"], .dark [style*="color: #222"], .dark [style*="color:#222"], .dark [style*="color: #333"], .dark [style*="color:#333"], .dark [style*="color: #444"], .dark [style*="color:#444"] { color: var(--text) !important; } .dark [style*="color: #555"], .dark [style*="color:#555"], .dark [style*="color: #666"], .dark [style*="color:#666"], .dark [style*="color: #777"], .dark [style*="color:#777"], .dark [style*="color: #888"], .dark [style*="color:#888"], .dark [style*="color: #999"], .dark [style*="color:#999"] { color: var(--text-muted) !important; } /* ===== TICKET-HUB SPEZIFISCHE STYLES ===== */ .dark .hub-container { background: var(--bg) !important; } .dark .hub-header h1 { color: var(--text) !important; } .dark .hub-header .subtitle { color: var(--text-secondary) !important; } /* Module Cards in Hub */ .dark .module-hub-card { background: linear-gradient(180deg, var(--panel), var(--panel-2)) !important; border: 1px solid var(--border) !important; box-shadow: var(--shadow-md) !important; } .dark .module-hub-card:hover { background: linear-gradient(180deg, var(--panel-2), var(--panel-hover)) !important; border-color: var(--border-hover) !important; box-shadow: var(--shadow-lg) !important; } /* ===== GLOBALER FIX: ALLE CONTAINER MIT HELLEN GRADIENTEN ===== */ /* Diese Container haben in den HTML-Dateien helle linear-gradient Hintergründe */ .dark .hub-container, .dark .asset-management-container, .dark .inspections-container, .dark .kanban-container, .dark .maintenance-planning-container, .dark .wartung-container, .dark .workbook-container, .dark .equipment-detail-container { background: var(--bg) !important; } /* Alle Elemente mit inline linear-gradient Hintergründen (hell) */ .dark [style*="background: linear-gradient(135deg, #f8fafc"], .dark [style*="background: linear-gradient(135deg, #e2e8f0"], .dark [style*="background:linear-gradient(135deg,#f8fafc"], .dark [style*="background:linear-gradient(135deg,#e2e8f0"] { background: var(--bg) !important; } /* ===== WARTUNGS-TAFEL / KANBAN BOARD SPEZIFISCHE STYLES ===== */ /* Kanban-Spalten */ .dark .kanban-column { background: var(--panel) !important; border: 1px solid var(--border) !important; } .dark .column-header { border-bottom: 2px solid var(--border) !important; } .dark .column-title { color: var(--text) !important; } /* Column Count Badges - bleiben farbig, aber mit Dark Mode Anpassung */ .dark .column-count { /* Die Farben bleiben wie definiert (rot, orange, lila, etc.) */ /* Nur etwas mehr Kontrast für Dark Mode */ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important; } /* Ticket Cards - dunkel mit guter Sichtbarkeit */ .dark .ticket-card { background: linear-gradient(180deg, var(--panel), var(--panel-2)) !important; border: 1px solid var(--border) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important; } .dark .ticket-card:hover { background: linear-gradient(180deg, var(--panel-2), var(--panel-hover)) !important; border-color: var(--border-hover) !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6) !important; } /* Ticket Card Content */ .dark .ticket-title { color: var(--text) !important; } .dark .ticket-description, .dark .ticket-meta { color: var(--text-secondary) !important; } /* Priority Border Colors - bleiben erhalten */ .dark .ticket-card[data-priority="LOW"] { border-left: 4px solid #10b981 !important; } .dark .ticket-card[data-priority="MEDIUM"] { border-left: 4px solid #f59e0b !important; } .dark .ticket-card[data-priority="HIGH"] { border-left: 4px solid #ef4444 !important; } .dark .ticket-card[data-priority="URGENT"] { border-left: 4px solid #dc2626 !important; box-shadow: 0 0 20px rgba(220, 38, 38, 0.3) !important; } /* Add Task Form */ .dark .add-task-form { background: var(--panel-2) !important; border: 1px solid var(--border) !important; } .dark .add-task-form input, .dark .add-task-form textarea, .dark .add-task-form select { background: var(--bg) !important; border: 1px solid var(--border) !important; color: var(--text) !important; } .dark .add-task-form input::placeholder, .dark .add-task-form textarea::placeholder { color: var(--text-muted) !important; } /* Drag & Drop Indicator */ .dark .kanban-column.drop-active { background: var(--panel-hover) !important; border: 2px dashed var(--accent) !important; } /* ===== QUICK-CREATE FORM (Wartungs-Tafel oben) ===== */ .dark .quick-create { background: var(--panel) !important; border: 1px solid var(--border) !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important; } .dark .quick-input { background: var(--bg) !important; border: 2px solid var(--border) !important; color: var(--text) !important; } .dark .quick-input::placeholder { color: var(--text-muted) !important; } .dark .quick-input:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2) !important; } /* Select Dropdown im Quick-Create */ .dark .quick-create select { background: var(--bg) !important; border: 2px solid var(--border) !important; color: var(--text) !important; } .dark .quick-create select option { background: var(--bg) !important; color: var(--text) !important; } /* ===== MODAL-DIALOGE (Universal für alle Seiten) ===== */ /* Modal Overlay - etwas dunkler */ .dark .modal-overlay { background: rgba(0, 0, 0, 0.8) !important; } /* Modal Container */ .dark .modal { background: var(--panel) !important; border: 1px solid var(--border) !important; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6) !important; } /* Modal Header */ .dark .modal-header { border-bottom: 1px solid var(--border) !important; } .dark .modal-title { color: var(--text) !important; } /* Close Button (X) */ .dark .close-btn { color: var(--text-secondary) !important; } .dark .close-btn:hover { background: var(--panel-hover) !important; color: var(--text) !important; } /* Form Elements in Modal */ .dark .modal input[type="text"], .dark .modal input[type="number"], .dark .modal input[type="date"], .dark .modal input[type="email"], .dark .modal input[type="password"], .dark .modal textarea, .dark .modal select { background: var(--bg) !important; border: 1px solid var(--border) !important; color: var(--text) !important; } .dark .modal input::placeholder, .dark .modal textarea::placeholder { color: var(--text-muted) !important; } .dark .modal input:focus, .dark .modal textarea:focus, .dark .modal select:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2) !important; } /* Form Labels in Modal */ .dark .modal label { color: var(--text-secondary) !important; } /* Form Grid */ .dark .modal .form-grid { color: var(--text) !important; } /* Checkboxen im Modal */ .dark .modal input[type="checkbox"] { border: 1px solid var(--border) !important; } /* Select Dropdowns im Modal */ .dark .modal select option { background: var(--bg) !important; color: var(--text) !important; } /* Modal-spezifische Beschreibungen */ .dark .modal .description, .dark .modal .help-text, .dark .modal .hint, .dark .modal .example { color: var(--text-muted) !important; } /* ===== STÄRKERE FACILITY-CARD HOVER FIX ===== */ /* Überschreibe ALLE facility-card hover backgrounds */ html.dark .facility-card:hover, .dark .facility-card:hover, body.dark .facility-card:hover { background: linear-gradient(180deg, var(--panel-2), var(--panel-hover)) !important; border-color: var(--border-hover) !important; box-shadow: var(--shadow-lg) !important; } /* Auch für die Facility-Liste */ html.dark .facilities-list .facility-card:hover, .dark .facilities-list .facility-card:hover { background: linear-gradient(180deg, var(--panel-2), var(--panel-hover)) !important; } /* ULTRA-SPEZIFISCHER FIX für facility-card hover */ html.dark body .facility-card:hover, html.dark .facility-card:hover, .dark body .facility-card:hover, .dark .facility-card:hover, body.dark .facility-card:hover { background: linear-gradient(180deg, #12161b, #151a21) !important; background-color: #12161b !important; } /* Auch für alle Kindelemente */ html.dark .facility-card:hover *, .dark .facility-card:hover * { background: transparent !important; } html.dark .facility-card:hover .facility-header, html.dark .facility-card:hover .facility-details, html.dark .facility-card:hover .facility-actions { background: transparent !important; } /* ===== QUALITY CONTROL ISSUE ITEMS ===== */ .dark .quality-issue-item { background: linear-gradient(135deg, var(--panel) 0%, var(--panel-2) 100%) !important; border-color: var(--border) !important; } .dark .quality-issue-item:hover { background: var(--panel-hover) !important; border-color: var(--border-hover) !important; box-shadow: var(--shadow-sm) !important; } .dark .quality-issue-item-title { color: var(--text) !important; } .dark .quality-issue-item-subtitle { color: var(--text-muted) !important; } /* ===== ADMIN DASHBOARD QUICK ACTIONS ===== */ .dark .bg-blue-50 { background: rgba(59, 130, 246, 0.1) !important; } .dark .bg-blue-50:hover, .dark .hover\:bg-blue-100:hover { background: rgba(59, 130, 246, 0.15) !important; } .dark .border-blue-200 { border-color: rgba(59, 130, 246, 0.3) !important; } .dark .bg-green-50 { background: rgba(34, 197, 94, 0.1) !important; } .dark .bg-green-50:hover, .dark .hover\:bg-green-100:hover { background: rgba(34, 197, 94, 0.15) !important; } .dark .border-green-200 { border-color: rgba(34, 197, 94, 0.3) !important; } .dark .bg-purple-50 { background: rgba(168, 85, 247, 0.1) !important; } .dark .bg-purple-50:hover, .dark .hover\:bg-purple-100:hover { background: rgba(168, 85, 247, 0.15) !important; } .dark .border-purple-200 { border-color: rgba(168, 85, 247, 0.3) !important; } .dark .bg-gray-50 { background: var(--panel) !important; } .dark .bg-gray-50:hover, .dark .hover\:bg-gray-100:hover { background: var(--panel-hover) !important; } .dark .border-gray-200 { border-color: var(--border) !important; } .dark .text-gray-900 { color: var(--text) !important; } .dark .text-gray-500 { color: var(--text-muted) !important; } /* Admin Dashboard - Additional Styles */ .dark .bg-white { background: var(--panel) !important; } .dark .shadow { box-shadow: var(--shadow-md) !important; } /* Admin Tables */ .dark .divide-gray-200 > * { border-color: var(--border) !important; } .dark .admin-table thead { background: var(--bg-secondary) !important; } .dark .admin-table tbody tr:hover { background: var(--panel-hover) !important; } /* Stats Cards */ .dark .bg-blue-500 { background: rgba(59, 130, 246, 0.8) !important; } .dark .bg-green-500 { background: rgba(34, 197, 94, 0.8) !important; } .dark .bg-purple-500 { background: rgba(168, 85, 247, 0.8) !important; } .dark .bg-orange-500 { background: rgba(249, 115, 22, 0.8) !important; } /* ===== BETRIEBSTAGEBUCH PLUS TIMELINE STYLES ===== */ /* Timeline Cards - Unvollständig (Gelb/Orange → Gedämpftes Amber) */ .dark .border-yellow-300 { border-color: rgba(255, 191, 105, 0.35) !important; } .dark .bg-yellow-50 { background: rgba(255, 191, 105, 0.06) !important; } .dark .bg-yellow-100 { background: rgba(255, 191, 105, 0.12) !important; } .dark .text-yellow-800 { color: #ffd9a1 !important; } .dark .text-yellow-600 { color: var(--warning) !important; } /* Timeline Cards - Vollständig (Grün → Gedämpftes Teal) */ .dark .border-green-300 { border-color: rgba(61, 220, 151, 0.35) !important; } .dark .bg-green-50 { background: rgba(61, 220, 151, 0.06) !important; } .dark .bg-green-100 { background: rgba(61, 220, 151, 0.12) !important; } .dark .text-green-800 { color: var(--success-text) !important; } /* Timeline Card Main Background */ .dark .border-2.border-yellow-300, .dark .border-2.border-green-300 { background: linear-gradient(180deg, var(--panel), var(--panel-2)) !important; } /* Timeline Status Badges */ .dark .rounded-full.bg-yellow-100 { background: rgba(255, 191, 105, 0.18) !important; border: 1px solid rgba(255, 191, 105, 0.25) !important; } .dark .rounded-full.bg-green-100 { background: rgba(61, 220, 151, 0.18) !important; border: 1px solid rgba(61, 220, 151, 0.25) !important; } /* Timeline Progress Icons */ .dark .bg-green-100.rounded-full { background: rgba(61, 220, 151, 0.12) !important; } .dark .bg-yellow-100.rounded-full { background: rgba(255, 191, 105, 0.12) !important; } .dark .bg-red-100.rounded-full { background: rgba(255, 107, 107, 0.12) !important; } /* Day Completion Status Box */ .dark .bg-green-50.border-green-200 { background: rgba(61, 220, 151, 0.08) !important; border-color: rgba(61, 220, 151, 0.25) !important; } .dark .text-green-700 { color: var(--success-text) !important; } /* ===== BACKDATE NOTICE BANNER ===== */ /* Light Mode */ .backdate-notice-banner { background: #fef3c7 !important; border-left: 4px solid #f59e0b !important; padding: 1rem !important; margin-bottom: 1rem !important; border-radius: 0 0.5rem 0.5rem 0 !important; } .backdate-notice-title { color: #92400e !important; } .backdate-notice-subtitle { color: #b45309 !important; } /* Dark Mode */ .dark .backdate-notice-banner { background: rgba(245, 158, 11, 0.15) !important; border-left: 4px solid #f59e0b !important; } .dark .backdate-notice-title { color: #fcd34d !important; } .dark .backdate-notice-subtitle { color: #fbbf24 !important; } /* ===== LIGHT MODE NEWS & INSPECTION CARDS ===== */ /* News Cards - Light Mode */ html:not(.dark) .news-card-item { background: #f8fafc !important; border-left: 3px solid #10b981 !important; } html:not(.dark) .news-card-item:hover { background: #f1f5f9 !important; } html:not(.dark) .news-card-title { color: #1f2937 !important; } html:not(.dark) .news-card-summary { color: #4b5563 !important; } html:not(.dark) .news-card-meta { color: #6b7280 !important; } /* News Cards - Dark Mode */ .dark .news-card-item { background: #1f2937 !important; border-left: 3px solid #4b5563 !important; } .dark .news-card-item:hover { background: #374151 !important; } .dark .news-card-title { color: #e5e7eb !important; } .dark .news-card-summary { color: #9ca3af !important; } .dark .news-card-meta { color: #6b7280 !important; } /* Inspection Cards - Light Mode */ html:not(.dark) .inspection-card-item { background: #eff6ff !important; border-left: 3px solid #3b82f6 !important; } html:not(.dark) .inspection-card-item:hover { background: #dbeafe !important; } html:not(.dark) .inspection-card-title { color: #1e40af !important; } html:not(.dark) .inspection-card-meta { color: #4b5563 !important; } /* Inspection Cards - Dark Mode */ .dark .inspection-card-item { background: #1e293b !important; border-left: 3px solid #3b82f6 !important; } .dark .inspection-card-item:hover { background: #334155 !important; } .dark .inspection-card-title { color: #60a5fa !important; } .dark .inspection-card-meta { color: #9ca3af !important; } /* ===== LIGHT MODE FORM OVERRIDES ===== */ /* Ensure light colors when dark mode is NOT active */ html:not(.dark) select, html:not(.dark) select option { background-color: #ffffff !important; color: #1f2937 !important; } html:not(.dark) select:focus { background-color: #ffffff !important; border-color: #22c55e !important; box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1) !important; } html:not(.dark) select option:hover, html:not(.dark) select option:checked { background-color: #f0fdf4 !important; color: #166534 !important; } /* Text inputs - aber NICHT date/month picker native controls */ html:not(.dark) input[type="text"], html:not(.dark) input[type="number"], html:not(.dark) input[type="email"], html:not(.dark) input[type="password"], html:not(.dark) input[type="search"], html:not(.dark) textarea { background-color: #ffffff !important; color: #1f2937 !important; border-color: #d1d5db !important; } /* Date/Month inputs - native Browser-Controls beibehalten */ html:not(.dark) input[type="date"], html:not(.dark) input[type="month"], html:not(.dark) input[type="datetime-local"] { background-color: #ffffff; color: #1f2937; border-color: #d1d5db; cursor: pointer; } /* Kalender-Icon für date/month picker */ input[type="date"]::-webkit-calendar-picker-indicator, input[type="month"]::-webkit-calendar-picker-indicator, input[type="datetime-local"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 1; padding: 4px; margin-right: -4px; } .dark input[type="date"]::-webkit-calendar-picker-indicator, .dark input[type="month"]::-webkit-calendar-picker-indicator, .dark input[type="datetime-local"]::-webkit-calendar-picker-indicator { filter: invert(1); } html:not(.dark) input:focus, html:not(.dark) textarea:focus { background-color: #ffffff !important; border-color: #3b82f6 !important; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important; } html:not(.dark) input::placeholder, html:not(.dark) textarea::placeholder { color: #9ca3af !important; } /* Modal backgrounds in light mode */ html:not(.dark) .modal-content, html:not(.dark) .spec-card { background-color: #ffffff !important; color: #1f2937 !important; } /* Labels in light mode */ html:not(.dark) label { color: #374151 !important; } /* ===== LIGHT MODE KPI CARD TEXT COLORS ===== */ /* Orange/Monat Gesamt - gut lesbare Farbe im Light Mode */ html:not(.dark) .text-orange-700, html:not(.dark) #messdaten-month-total { color: #c2410c !important; } html:not(.dark) .text-orange-600 { color: #ea580c !important; } /* Weitere KPI Farben für Light Mode */ html:not(.dark) .text-blue-700 { color: #1d4ed8 !important; } html:not(.dark) .text-green-700 { color: #15803d !important; } html:not(.dark) .text-purple-700 { color: #7e22ce !important; } /* Cyan Farben für "Noch nötig pro Stunde" KPI */ html:not(.dark) .text-cyan-700, html:not(.dark) #messdaten-hourly-needed { color: #0e7490 !important; } html:not(.dark) .text-cyan-600, html:not(.dark) #messdaten-current-hour { color: #0891b2 !important; } html:not(.dark) .text-cyan-500, html:not(.dark) #messdaten-remaining-info { color: #06b6d4 !important; } /* ===== ACCESSIBILITY MEDIA QUERIES (Dark Mode) ===== */ /* High Contrast Mode Support */ @media (prefers-contrast: high) { .dark .module-card, .dark .spec-card, .dark .modal-content { border-width: 2px !important; border-color: var(--text) !important; } .dark .quick-action-btn { border-width: 2px !important; } .dark .module-title, .dark .card-header h3 { font-weight: 700 !important; } } /* Reduced Motion Support */ @media (prefers-reduced-motion: reduce) { .dark *, .dark *::before, .dark *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .dark .module-card:hover, .dark .quick-action-btn:hover { transform: none !important; } } /* Touch Device Optimizations */ @media (pointer: coarse) { .dark .quick-action-btn { min-width: 44px !important; min-height: 44px !important; } .dark .module-card { min-height: 160px !important; } }