/* ============================================================ RISE CRM – Modern UI Overlay (Glassmorphism + Dark Mode) ------------------------------------------------------------ Drop-in override. Loaded AFTER app.all.css and custom-style.css. Toggle dark mode via [data-theme="dark"] on . ============================================================ */ /* ---------- 1. Google Font: Inter ---------- */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap'); /* ---------- 2. Design tokens (CSS variables) ---------- */ :root { /* Brand */ --mui-primary: #6366f1; /* indigo-500 */ --mui-primary-600: #4f46e5; --mui-primary-700: #4338ca; --mui-accent: #ec4899; /* pink-500 */ --mui-accent-2: #06b6d4; /* cyan-500 */ /* Gradients */ --mui-grad-primary: linear-gradient(135deg,#6366f1 0%,#8b5cf6 50%,#ec4899 100%); --mui-grad-soft: linear-gradient(135deg,rgba(99,102,241,.15) 0%,rgba(236,72,153,.15) 100%); --mui-grad-bg: radial-gradient(1200px 800px at 0% 0%,rgba(99,102,241,.18),transparent 60%), radial-gradient(1000px 700px at 100% 20%,rgba(236,72,153,.14),transparent 55%), radial-gradient(900px 900px at 60% 100%,rgba(6,182,212,.13),transparent 60%), #f4f6fb; /* Surface */ --mui-bg: #f4f6fb; --mui-surface: rgba(255,255,255,.72); --mui-surface-2: rgba(255,255,255,.55); --mui-border: rgba(17,24,39,.08); --mui-border-strong: rgba(17,24,39,.14); --mui-shadow: 0 10px 30px -12px rgba(17,24,39,.18), 0 4px 10px -6px rgba(17,24,39,.08); --mui-shadow-lg: 0 20px 50px -20px rgba(17,24,39,.28), 0 8px 20px -12px rgba(17,24,39,.12); --mui-blur: 18px; /* Text */ --mui-text: #0f172a; --mui-text-muted: #64748b; --mui-text-soft: #94a3b8; /* Status */ --mui-success: #10b981; --mui-warning: #f59e0b; --mui-danger: #ef4444; --mui-info: #0ea5e9; /* Radii */ --mui-r-sm: 8px; --mui-r: 14px; --mui-r-lg: 20px; --mui-r-xl: 28px; /* Layout */ --mui-sidebar-w: 260px; --mui-topbar-h: 66px; /* Transitions */ --mui-t: 220ms cubic-bezier(.4,.0,.2,1); } [data-theme="dark"] { --mui-grad-bg: radial-gradient(1200px 800px at 0% 0%,rgba(99,102,241,.22),transparent 60%), radial-gradient(1000px 700px at 100% 20%,rgba(236,72,153,.18),transparent 55%), radial-gradient(900px 900px at 60% 100%,rgba(6,182,212,.16),transparent 60%), #0b1020; --mui-bg: #0b1020; --mui-surface: rgba(22,27,46,.62); --mui-surface-2: rgba(22,27,46,.45); --mui-border: rgba(255,255,255,.08); --mui-border-strong: rgba(255,255,255,.14); --mui-shadow: 0 10px 30px -12px rgba(0,0,0,.55), 0 4px 10px -6px rgba(0,0,0,.35); --mui-shadow-lg: 0 20px 50px -20px rgba(0,0,0,.7), 0 8px 20px -12px rgba(0,0,0,.45); --mui-text: #e5e7eb; --mui-text-muted: #9ca3af; --mui-text-soft: #6b7280; } /* ---------- 3. Global base ---------- */ html, body { background: var(--mui-grad-bg) fixed !important; color: var(--mui-text) !important; font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important; font-feature-settings: "cv11","ss01","ss03"; -webkit-font-smoothing: antialiased; } body { min-height: 100vh; } a { color: var(--mui-primary-600); transition: color var(--mui-t); } a:hover { color: var(--mui-primary-700); } /* Kill default underlines inside chrome (sidebar/topbar/cards) */ .sidebar a, .sidebar-menu a, .sidebar-brand, .navbar-custom a, #default-navbar a, .card .nav-link, .card a.btn, .dropdown-menu a, .pagination a, .nav-tabs a, .nav-pills a { text-decoration: none !important; } h1,h2,h3,h4,h5,h6, .page-title, .card-title { color: var(--mui-text) !important; letter-spacing: -0.01em; font-weight: 600; } /* Scrollbars */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--mui-border-strong); border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: var(--mui-primary); } /* ---------- 4. Sidebar (Glass) ---------- */ .sidebar { width: var(--mui-sidebar-w) !important; background: var(--mui-surface) !important; backdrop-filter: blur(var(--mui-blur)) saturate(140%); -webkit-backdrop-filter: blur(var(--mui-blur)) saturate(140%); border-right: 1px solid var(--mui-border) !important; box-shadow: var(--mui-shadow); } .sidebar-brand { width: var(--mui-sidebar-w) !important; height: var(--mui-topbar-h) !important; background: transparent !important; border-bottom: 1px solid var(--mui-border) !important; align-items: center; justify-content: center; } /* Logo / Favicon swap: RISE renders TWO elements inside the sidebar brand area — .brand-logo (full logo) and .brand-logo-mini (favicon). Show the correct one based on sidebar state. */ .sidebar-brand.brand-logo { display: flex !important; } .sidebar-brand.brand-logo-mini { display: none !important; } .sidebar-brand .dashboard-image { max-height: 42px; width: auto; object-fit: contain; } .sidebar-brand.brand-logo-mini .dashboard-image { max-width: 32px; max-height: 32px; } /* When the sidebar is collapsed (body gets .sidebar-toggled), swap the two: hide full logo, show favicon, and shrink the brand box. */ body.sidebar-toggled .sidebar-brand.brand-logo { display: none !important; } body.sidebar-toggled .sidebar-brand.brand-logo-mini { display: flex !important; width: 70px !important; } /* ---------- Dark-Mode Logo Swap ---------- */ /* Schwarzes Logo in Weiß umfärben, wenn Dark-Mode aktiv ist */ [data-theme="dark"] .sidebar-brand .dashboard-image, [data-theme="dark"] img.dashboard-image, [data-theme="dark"] img[src*="site-logo"] { filter: brightness(0) invert(1) !important; } /* Collapsed state: shrink the bar, center icons, hide text. overflow:visible lets a single hovered row extend beyond the 70px. */ body.sidebar-toggled .sidebar { width: 70px !important; transition: width .22s cubic-bezier(.4,0,.2,1) !important; overflow: visible !important; z-index: 1006; } body.sidebar-toggled .sidebar .sidebar-scroll { overflow-y: auto; overflow-x: visible; } body.sidebar-toggled .sidebar .sidebar-menu li a > span:not(.kanban-item-count) { opacity: 0; width: 0; max-width: 0; margin-left: 0 !important; padding: 0 !important; overflow: hidden; white-space: nowrap; transition: opacity .18s ease, max-width .22s cubic-bezier(.4,0,.2,1), margin-left .18s ease; } body.sidebar-toggled .sidebar .sidebar-menu li a { justify-content: center; padding: 10px 0 !important; margin: 4px 6px !important; transition: all .18s cubic-bezier(.4,0,.2,1); position: relative; } body.sidebar-toggled .sidebar .sidebar-menu li ul { display: none !important; } body.sidebar-toggled .navbar-custom, body.sidebar-toggled #default-navbar { left: 70px !important; } body.sidebar-toggled .page-container, body.sidebar-toggled .main-scrollable-page { margin-left: 70px !important; } /* Per-row hover: ONLY the hovered row extends to the right as a single pill containing both icon and label. Other rows stay as narrow icons. */ body.sidebar-toggled .sidebar .sidebar-menu li a:hover { justify-content: flex-start; padding: 10px 14px !important; width: 240px; background: var(--mui-surface) !important; border: 1px solid var(--mui-border) !important; box-shadow: var(--mui-shadow-lg); border-radius: var(--mui-r-sm) !important; z-index: 1020; backdrop-filter: blur(20px) saturate(180%); transform: translateX(0); } /* Preserve gradient pill for the active item */ body.sidebar-toggled .sidebar .sidebar-menu li.active > a:hover, body.sidebar-toggled .sidebar .sidebar-menu li > a.active:hover { background: var(--mui-grad-primary) !important; border-color: transparent !important; color: #fff !important; box-shadow: 0 14px 28px -12px rgba(99,102,241,.55); } body.sidebar-toggled .sidebar .sidebar-menu li a:hover > span:not(.kanban-item-count) { opacity: 1; width: auto; max-width: 220px; margin-left: 12px !important; } .sidebar-scroll { background: transparent !important; margin-top: var(--mui-topbar-h) !important; } .sidebar-menu li { list-style: none; } .sidebar-menu li a { display: flex !important; align-items: center; gap: 12px; margin: 4px 12px !important; padding: 10px 14px !important; border-radius: var(--mui-r-sm) !important; color: var(--mui-text-muted) !important; font-weight: 500; text-decoration: none !important; transition: all var(--mui-t) !important; position: relative; } .sidebar-menu li a .icon, .sidebar-menu li a i, .sidebar-menu li a svg { stroke: currentColor; width: 18px; height: 18px; font-size: 18px; flex-shrink: 0; } .sidebar-menu li a:hover { background: var(--mui-grad-soft) !important; color: var(--mui-text) !important; transform: translateX(2px); } .sidebar-menu li.active > a, .sidebar-menu li > a.active { background: var(--mui-grad-primary) !important; color: #fff !important; box-shadow: 0 8px 20px -8px rgba(99,102,241,.55); } .sidebar-menu li.active > a::before, .sidebar-menu li > a.active::before { content: ""; position: absolute; left: -12px; top: 50%; transform: translateY(-50%); width: 4px; height: 22px; border-radius: 4px; background: var(--mui-grad-primary); } .sidebar-menu li ul a { font-size: 13px; color: var(--mui-text-soft) !important; padding-left: 40px !important; } .sidebar-menu li ul a:hover { color: var(--mui-text) !important; background: var(--mui-surface-2) !important; } /* ---------- 5. Topbar (Glass) ---------- */ .navbar-custom, #default-navbar { height: var(--mui-topbar-h) !important; background: var(--mui-surface) !important; backdrop-filter: blur(var(--mui-blur)) saturate(140%); -webkit-backdrop-filter: blur(var(--mui-blur)) saturate(140%); border-bottom: 1px solid var(--mui-border) !important; box-shadow: none !important; display: flex !important; align-items: center; padding: 0 20px !important; } .navbar-custom .navbar-nav, #default-navbar .navbar-nav { flex-direction: row !important; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; } .navbar-custom .navbar-nav .nav-item, #default-navbar .navbar-nav .nav-item { display: flex; align-items: center; } .navbar-custom .nav-link, #default-navbar .nav-link { display: inline-flex !important; align-items: center; gap: 8px; color: var(--mui-text-muted) !important; border-radius: var(--mui-r-sm); transition: background var(--mui-t), color var(--mui-t); padding: 8px 12px !important; text-decoration: none !important; line-height: 1; } .navbar-custom .nav-link i, #default-navbar .nav-link i, .navbar-custom .nav-link svg, #default-navbar .nav-link svg { font-size: 18px; width: 18px; height: 18px; } .navbar-custom .nav-link:hover, #default-navbar .nav-link:hover { background: var(--mui-surface-2) !important; color: var(--mui-text) !important; } /* Search bar in topbar */ .top-search-form input, .top-search-form .form-control { background: var(--mui-surface-2) !important; border: 1px solid var(--mui-border) !important; border-radius: 999px !important; color: var(--mui-text) !important; } /* Profile dropdown avatar ring */ .navbar-custom .avatar, .navbar-custom img.avatar-xs, .navbar-custom img.user-img { box-shadow: 0 0 0 2px var(--mui-border-strong), 0 0 0 4px var(--mui-surface); border-radius: 50% !important; } /* ---------- 6. Main content ---------- */ .main-content, #main-content, .page-content, .page-content-wrapper, section.main { background: transparent !important; } /* ---------- 7. Cards (Glass) ---------- */ .card, .panel, .widget { background: var(--mui-surface) !important; backdrop-filter: blur(var(--mui-blur)) saturate(140%); -webkit-backdrop-filter: blur(var(--mui-blur)) saturate(140%); border: 1px solid var(--mui-border) !important; border-radius: var(--mui-r-lg) !important; box-shadow: var(--mui-shadow) !important; transition: transform var(--mui-t), box-shadow var(--mui-t); overflow: hidden; } .card:hover { box-shadow: var(--mui-shadow-lg) !important; } .card-header, .panel-heading { background: transparent !important; border-bottom: 1px solid var(--mui-border) !important; padding: 16px 20px !important; font-weight: 600; } .card-title { margin: 0; font-size: 1rem; } .card-body, .panel-body { padding: 20px !important; } .card-footer { background: transparent !important; border-top: 1px solid var(--mui-border) !important; } /* Stat / KPI cards */ .info-box, .stat-box, .kpi-card, .dashboard-box { background: var(--mui-surface) !important; border: 1px solid var(--mui-border) !important; border-radius: var(--mui-r-lg) !important; box-shadow: var(--mui-shadow) !important; padding: 18px 20px; position: relative; overflow: hidden; } .info-box::before, .stat-box::before, .kpi-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--mui-grad-primary); } /* ---------- 8. Buttons ---------- */ .btn { border-radius: var(--mui-r-sm) !important; font-weight: 500; padding: 8px 16px; transition: transform var(--mui-t), box-shadow var(--mui-t), background var(--mui-t), border-color var(--mui-t) !important; border: 1px solid transparent; } .btn:active { transform: translateY(1px); } .btn:focus { box-shadow: 0 0 0 4px rgba(99,102,241,.25) !important; } .btn-primary, .btn-info { background: var(--mui-grad-primary) !important; border-color: transparent !important; color: #fff !important; box-shadow: 0 8px 18px -10px rgba(99,102,241,.7); } .btn-primary:hover, .btn-info:hover { filter: brightness(1.06); box-shadow: 0 14px 28px -12px rgba(99,102,241,.75); transform: translateY(-1px); } .btn-success { background: var(--mui-success) !important; border-color: transparent !important; color:#fff !important; } .btn-warning { background: var(--mui-warning) !important; border-color: transparent !important; color:#fff !important; } .btn-danger { background: var(--mui-danger) !important; border-color: transparent !important; color:#fff !important; } .btn-secondary, .btn-default, .btn-light { background: var(--mui-surface-2) !important; border: 1px solid var(--mui-border) !important; color: var(--mui-text) !important; backdrop-filter: blur(var(--mui-blur)); } .btn-secondary:hover, .btn-default:hover, .btn-light:hover { background: var(--mui-surface) !important; border-color: var(--mui-border-strong) !important; } .btn-outline-primary, .btn-outline-info { background: transparent !important; border: 1px solid var(--mui-primary) !important; color: var(--mui-primary) !important; } .btn-outline-primary:hover { background: var(--mui-grad-primary) !important; border-color: transparent !important; color: #fff !important; } .btn-sm { padding: 5px 10px; font-size: 12px; } .btn-lg { padding: 12px 22px; font-size: 15px; border-radius: var(--mui-r) !important; } /* ---------- 9. Forms ---------- */ .form-control, .form-select, .select2-container--default .select2-selection--single, .select2-container--default .select2-selection--multiple { background: var(--mui-surface-2) !important; border: 1px solid var(--mui-border) !important; color: var(--mui-text) !important; border-radius: var(--mui-r-sm) !important; min-height: 40px; transition: border-color var(--mui-t), box-shadow var(--mui-t) !important; } .form-control:focus, .form-select:focus, .select2-container--default.select2-container--focus .select2-selection--single { border-color: var(--mui-primary) !important; box-shadow: 0 0 0 4px rgba(99,102,241,.18) !important; background: var(--mui-surface) !important; } .form-label, label { color: var(--mui-text-muted) !important; font-size: 13px; font-weight: 500; } .input-group-text { background: var(--mui-surface-2) !important; border-color: var(--mui-border) !important; color: var(--mui-text-muted) !important; } /* Select2 tweaks */ .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 38px !important; color: var(--mui-text) !important; } .select2-dropdown { background: rgba(255,255,255,0.97) !important; backdrop-filter: blur(20px) saturate(180%); border: 1px solid var(--mui-border) !important; border-radius: var(--mui-r-sm) !important; overflow: hidden; box-shadow: var(--mui-shadow-lg); color: var(--mui-text) !important; } [data-theme="dark"] .select2-dropdown { background: rgba(22,27,46,0.97) !important; } .select2-results__option { color: var(--mui-text) !important; } .select2-results__option--highlighted { background: var(--mui-grad-primary) !important; color: #fff !important; } /* ---------- 10. Tables ---------- */ .table, table.dataTable { color: var(--mui-text) !important; border-collapse: separate !important; border-spacing: 0 !important; } .table thead th, table.dataTable thead th { background: var(--mui-surface-2) !important; color: var(--mui-text-muted) !important; font-weight: 600 !important; text-transform: uppercase; font-size: 12px; letter-spacing: .04em; border-bottom: 1px solid var(--mui-border) !important; border-top: none !important; padding: 12px 14px !important; } .table tbody td, table.dataTable tbody td { border-top: 1px solid var(--mui-border) !important; padding: 14px !important; vertical-align: middle; } .table tbody tr, table.dataTable tbody tr { transition: background var(--mui-t); } .table tbody tr:hover, table.dataTable tbody tr:hover { background: var(--mui-surface-2) !important; } table.dataTable.stripe tbody tr.odd, table.dataTable.display tbody tr.odd { background: transparent !important; } /* DataTables controls */ .dataTables_wrapper .dataTables_length select, .dataTables_wrapper .dataTables_filter input { background: var(--mui-surface-2) !important; border: 1px solid var(--mui-border) !important; color: var(--mui-text) !important; border-radius: var(--mui-r-sm) !important; padding: 6px 10px !important; } .dataTables_wrapper .paginate_button { border-radius: var(--mui-r-sm) !important; border: 1px solid var(--mui-border) !important; background: var(--mui-surface-2) !important; color: var(--mui-text) !important; } .dataTables_wrapper .paginate_button.current, .dataTables_wrapper .paginate_button.current:hover { background: var(--mui-grad-primary) !important; color: #fff !important; border-color: transparent !important; } /* ---------- 11. Badges / Labels ---------- */ .badge, .label { border-radius: 999px !important; font-weight: 600; padding: 4px 10px; letter-spacing: .02em; } .badge.bg-primary, .badge-primary { background: var(--mui-grad-primary) !important; color: #fff !important; } .badge.bg-success, .badge-success { background: rgba(16,185,129,.16) !important; color: var(--mui-success) !important; } .badge.bg-warning, .badge-warning { background: rgba(245,158,11,.18) !important; color: var(--mui-warning) !important; } .badge.bg-danger, .badge-danger { background: rgba(239,68,68,.16) !important; color: var(--mui-danger) !important; } .badge.bg-info, .badge-info { background: rgba(14,165,233,.16) !important; color: var(--mui-info) !important; } /* ---------- 12. Modals & Dropdowns ---------- */ .modal-content { background: rgba(255,255,255,0.98) !important; backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border: 1px solid var(--mui-border) !important; border-radius: var(--mui-r-lg) !important; box-shadow: var(--mui-shadow-lg) !important; color: var(--mui-text) !important; } [data-theme="dark"] .modal-content { background: rgba(22,27,46,0.98) !important; } .modal-header, .modal-footer { border-color: var(--mui-border) !important; } .modal-backdrop.show { opacity: .5; backdrop-filter: blur(4px); } .dropdown-menu { /* high-opacity surface so items stay readable over any background */ background: rgba(255,255,255,0.97) !important; backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border: 1px solid var(--mui-border) !important; border-radius: var(--mui-r) !important; box-shadow: var(--mui-shadow-lg) !important; padding: 6px !important; color: var(--mui-text) !important; } [data-theme="dark"] .dropdown-menu { background: rgba(22,27,46,0.97) !important; } .dropdown-item { border-radius: var(--mui-r-sm) !important; padding: 8px 12px !important; color: var(--mui-text) !important; font-weight: 500; transition: background var(--mui-t); } .dropdown-item:hover, .dropdown-item:focus { background: var(--mui-grad-soft) !important; color: var(--mui-text) !important; } .dropdown-divider, .dropdown-menu hr { border-color: var(--mui-border) !important; margin: 4px 0 !important; } /* ---------- 13. Alerts ---------- */ .alert { background: var(--mui-surface) !important; backdrop-filter: blur(var(--mui-blur)); border: 1px solid var(--mui-border) !important; border-radius: var(--mui-r) !important; color: var(--mui-text) !important; } .alert-success { border-left: 4px solid var(--mui-success) !important; } .alert-warning { border-left: 4px solid var(--mui-warning) !important; } .alert-danger { border-left: 4px solid var(--mui-danger) !important; } .alert-info { border-left: 4px solid var(--mui-info) !important; } /* ---------- 14. Tabs & Nav pills ---------- */ .nav-tabs { border-bottom: 1px solid var(--mui-border) !important; gap: 4px; } .nav-tabs .nav-link { border: none !important; color: var(--mui-text-muted) !important; padding: 10px 14px !important; border-radius: var(--mui-r-sm) var(--mui-r-sm) 0 0 !important; font-weight: 500; } .nav-tabs .nav-link.active { color: var(--mui-text) !important; background: var(--mui-surface) !important; border: 1px solid var(--mui-border) !important; border-bottom-color: transparent !important; position: relative; } .nav-tabs .nav-link.active::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: -1px; height: 2px; background: var(--mui-grad-primary); border-radius: 2px; } .nav-pills .nav-link.active { background: var(--mui-grad-primary) !important; color: #fff !important; } /* ---------- 15. Avatars & Chips ---------- */ .avatar, .avatar-xs, .avatar-sm, .avatar-md, .avatar-lg, img.circle, .user-avatar { border-radius: 50% !important; } .chip, .tag { background: var(--mui-grad-soft) !important; color: var(--mui-text) !important; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 500; } /* ---------- 16. Progress ---------- */ .progress { background: var(--mui-surface-2) !important; border-radius: 999px !important; height: 8px; overflow: hidden; position: relative; } .progress-bar { background: var(--mui-grad-primary) !important; border-radius: 999px !important; color: #fff !important; font-weight: 600; font-size: 12px; white-space: nowrap; } /* ─── Dashboard "Projektübersicht" / any tall progress bar ─── The RISE dashboard widget wraps the progress track in a pill with its OWN green outline and renders the label as plain text inside. We need a BROAD, high-specificity override to win against both the original RISE stylesheet and any inline Bootstrap utility colours (.text-success, .text-muted, etc.). */ /* Detect the "big" variant (has a label of any kind anywhere inside). min-height: 32px stellt sicher, dass der Text Platz hat und vom overflow:hidden nicht beschnitten wird. */ .progress:has(span), .progress:has(.progress-label), .progress:has(.progress-bar-label), .progress.progress-lg, .progress-wrapper, .progress-outer { min-height: 32px !important; background: #ffffff !important; border: 1px solid var(--mui-border-strong) !important; box-shadow: inset 0 1px 2px rgba(17,24,39,.05) !important; border-radius: 999px !important; overflow: hidden !important; position: relative !important; } /* NUKE every text colour inside a tall progress container. Wins against .text-success, .text-muted, inherited colours, etc. We use html body … to bump specificity above any RISE rule. */ html body .progress:has(span), html body .progress:has(span) *, html body .progress.progress-lg, html body .progress.progress-lg *, html body .progress-wrapper, html body .progress-wrapper *, html body .progress-outer, html body .progress-outer * { color: #0f172a !important; } /* Label — absolut positioniertes Overlay, exakt mittig zentriert */ html body .progress span, html body .progress .progress-label, html body .progress .progress-bar-label, html body .progress-wrapper span, html body .progress-outer span { position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; z-index: 2 !important; pointer-events: none !important; color: #0f172a !important; font-weight: 700 !important; font-size: 13px !important; line-height: 1 !important; letter-spacing: .01em !important; text-shadow: 0 0 2px rgba(255,255,255,.95), 0 0 6px rgba(255,255,255,.6), 0 1px 0 rgba(255,255,255,.9) !important; mix-blend-mode: normal !important; opacity: 1 !important; filter: none !important; -webkit-text-fill-color: #0f172a !important; /* beats gradient-text */ -webkit-font-smoothing: antialiased; } /* Dark mode: invert everything */ [data-theme="dark"] .progress:has(span), [data-theme="dark"] .progress.progress-lg, [data-theme="dark"] .progress-wrapper, [data-theme="dark"] .progress-outer { background: rgba(22,27,46,.85) !important; border-color: var(--mui-border-strong) !important; box-shadow: inset 0 1px 2px rgba(0,0,0,.35) !important; } html[data-theme="dark"] body .progress:has(span), html[data-theme="dark"] body .progress:has(span) *, html[data-theme="dark"] body .progress.progress-lg, html[data-theme="dark"] body .progress.progress-lg *, html[data-theme="dark"] body .progress-wrapper, html[data-theme="dark"] body .progress-wrapper *, html[data-theme="dark"] body .progress-outer, html[data-theme="dark"] body .progress-outer * { color: #f8fafc !important; } html[data-theme="dark"] body .progress span, html[data-theme="dark"] body .progress .progress-label, html[data-theme="dark"] body .progress .progress-bar, html[data-theme="dark"] body .progress-wrapper span, html[data-theme="dark"] body .progress-outer span { color: #f8fafc !important; -webkit-text-fill-color: #f8fafc !important; text-shadow: 0 0 2px rgba(0,0,0,.9), 0 0 6px rgba(0,0,0,.55), 0 1px 0 rgba(0,0,0,.6) !important; } /* Small inline bars (in tables / widgets) stay compact */ .widget-progress-bar, .progress.mt5 { height: 8px !important; } .widget-progress-bar .progress-bar, .progress.mt5 .progress-bar { height: 8px; font-size: 0; } /* Fallback for browsers without :has() — always allow room for the inner span */ .progress-bar { min-height: 0; } .progress-bar span { display: block; } /* ---------- 17. Dark-mode toggle button (injected by JS) ---------- */ .mui-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50% !important; background: var(--mui-surface-2) !important; border: 1px solid var(--mui-border) !important; color: var(--mui-text) !important; cursor: pointer; transition: background var(--mui-t), transform var(--mui-t), box-shadow var(--mui-t); backdrop-filter: blur(var(--mui-blur)); } .mui-theme-toggle:hover { background: var(--mui-grad-soft) !important; transform: rotate(-12deg) scale(1.05); box-shadow: var(--mui-shadow); } .mui-theme-toggle svg { width: 18px; height: 18px; } .mui-theme-toggle .mui-sun { display: none; } .mui-theme-toggle .mui-moon { display: inline; } [data-theme="dark"] .mui-theme-toggle .mui-sun { display: inline; } [data-theme="dark"] .mui-theme-toggle .mui-moon { display: none; } /* ---------- 18. Kanban / Task / Project specific ---------- */ .kanban-col, .kanban-column, .task-status-column { background: var(--mui-surface) !important; backdrop-filter: blur(var(--mui-blur)) saturate(140%); border: 1px solid var(--mui-border) !important; border-radius: var(--mui-r-lg) !important; box-shadow: var(--mui-shadow) !important; } .kanban-task, .task-card, .project-card { background: var(--mui-surface) !important; border: 1px solid var(--mui-border) !important; border-radius: var(--mui-r) !important; box-shadow: var(--mui-shadow) !important; transition: transform var(--mui-t), box-shadow var(--mui-t); } .kanban-task:hover, .task-card:hover, .project-card:hover { transform: translateY(-2px); box-shadow: var(--mui-shadow-lg) !important; } /* ---------- 19. Chat / messages ---------- */ .message-bubble, .chat-message { background: var(--mui-surface) !important; border: 1px solid var(--mui-border) !important; border-radius: var(--mui-r-lg) !important; backdrop-filter: blur(var(--mui-blur)); padding: 10px 14px; } .message-bubble.own, .chat-message.own, .message-bubble.right, .chat-message.right { background: var(--mui-grad-primary) !important; color: #fff !important; border-color: transparent !important; } /* ---------- 20. Utilities ---------- */ .mui-glass { background: var(--mui-surface) !important; backdrop-filter: blur(var(--mui-blur)) saturate(140%) !important; -webkit-backdrop-filter: blur(var(--mui-blur)) saturate(140%) !important; border: 1px solid var(--mui-border) !important; border-radius: var(--mui-r-lg) !important; box-shadow: var(--mui-shadow) !important; } .mui-gradient-text { background: var(--mui-grad-primary); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* ---------- 21. Dark-mode overrides for tricky 3rd-party bits ---------- */ [data-theme="dark"] .text-muted, [data-theme="dark"] .text-secondary { color: var(--mui-text-muted) !important; } [data-theme="dark"] .bg-white, [data-theme="dark"] .bg-light { background: var(--mui-surface) !important; color: var(--mui-text) !important; } [data-theme="dark"] .border, [data-theme="dark"] .border-top, [data-theme="dark"] .border-bottom, [data-theme="dark"] .border-start, [data-theme="dark"] .border-end { border-color: var(--mui-border) !important; } [data-theme="dark"] hr { border-color: var(--mui-border) !important; } [data-theme="dark"] .table, [data-theme="dark"] .table thead th, [data-theme="dark"] .table tbody td { color: var(--mui-text) !important; } /* Animations */ @keyframes mui-fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } .card, .modal-content, .dropdown-menu, .kanban-col { animation: mui-fade-in .25s ease-out both; } /* Reduce-motion friendly */ @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } } /* ---------- Mobile: Sidebar als Slide-in Overlay ---------- */ @media (max-width: 991.98px) { .sidebar { position: fixed !important; top: 0; left: 0; bottom: 0; /* maximal 320 px oder 80 % der Viewport-Breite, je nachdem was kleiner ist */ width: min(320px, 82vw) !important; z-index: 1060; transform: translateX(-100%) !important; transition: transform .3s cubic-bezier(.4,0,.2,1); box-shadow: var(--mui-shadow-lg); } body.rst-mobile-sidebar-open .sidebar, body.rst-mobile-sidebar-open .sidebar.sidebar-off { transform: translateX(0) !important; } /* Mobile: Logo aus dem Topbar-Bereich verbergen (spart Platz für Icons). Wird weiterhin sichtbar, wenn die Sidebar als Overlay geöffnet ist. */ .sidebar-brand, .sidebar-brand.brand-logo, .sidebar-brand.brand-logo-mini, .sidebar-brand.brand-logo.hidden-xs, #dashboard-link, li.nav-item:has(> #dashboard-link), li.nav-item.d-block.d-sm-none { display: none !important; } /* Im geöffneten Mobile-Overlay NUR das volle Logo zeigen, Favicon-Mini explizit ausschließen. */ body.rst-mobile-sidebar-open .sidebar .sidebar-brand.brand-logo, body.rst-mobile-sidebar-open .sidebar .sidebar-brand.brand-logo.hidden-xs { display: flex !important; width: 100% !important; height: var(--mui-topbar-h) !important; padding: 0 20px !important; justify-content: center !important; align-items: center !important; } body.rst-mobile-sidebar-open .sidebar .sidebar-brand.brand-logo-mini { display: none !important; } /* RISE versteckt das Logo auf xs per .hidden-xs – im geöffneten Mobile-Overlay wollen wir es aber sichtbar & zentriert haben. */ .sidebar-brand.brand-logo, .sidebar-brand.brand-logo.hidden-xs { display: flex !important; width: 100% !important; height: var(--mui-topbar-h) !important; padding: 0 20px !important; margin: 0 !important; align-items: center !important; justify-content: center !important; text-align: center !important; } .sidebar-brand .dashboard-image { max-height: 40px !important; max-width: 80% !important; width: auto !important; height: auto !important; margin: 0 auto !important; display: block !important; object-fit: contain !important; } /* Mobile: Logo aus dem Topbar-Bereich verbergen (spart Platz für Icons). Wird weiterhin sichtbar, wenn die Sidebar als Overlay geöffnet ist. */ .sidebar-brand, .sidebar-brand.brand-logo, .sidebar-brand.brand-logo-mini, .sidebar-brand.brand-logo.hidden-xs { display: none !important; } body.rst-mobile-sidebar-open .sidebar .sidebar-brand, body.rst-mobile-sidebar-open .sidebar .sidebar-brand.brand-logo, body.rst-mobile-sidebar-open .sidebar .sidebar-brand.brand-logo.hidden-xs { display: flex !important; width: 100% !important; height: var(--mui-topbar-h) !important; padding: 0 20px !important; justify-content: center !important; align-items: center !important; } /* Content + Topbar volle Breite (keine Sidebar-Lücke) */ .page-container, .main-scrollable-page { margin-left: 0 !important; } .navbar-custom, #default-navbar { left: 0 !important; padding-left: 16px !important; } /* Backdrop */ body.rst-mobile-sidebar-open::after { content: ""; position: fixed; inset: 0; background: rgba(15,23,42,.45); backdrop-filter: blur(4px); z-index: 1055; animation: mui-fade-in .2s ease-out; } /* Der X-Schließen-Button unten in der Mobile-Bottom-Bar soll sichtbar bleiben */ .sidebar-toggle-btn, .sidebar-left-icon, #sidebar-left-icon, .app-sidebar-handler { display: inline-flex !important; } } /* ==================================================================== SECTION B – RISE CRM module-specific overrides Covers every Views/ module: sign-in, loaders, modals, kanban, chat, timeline, invoice/estimate/contract preview, FullCalendar, DataTables, Select2, Summernote, Dropzone, Gantt, datepicker/timepicker, client-portal, reports, settings, tickets, leads, store / cart. ==================================================================== */ /* ---------- B1. Public / sign-in / sign-up pages ---------- */ body.public-view, body.signin-page, body.signup-page { background: var(--mui-grad-bg) fixed !important; } body.public-view::before { content: ""; position: fixed; inset: 0; z-index: -1; background: radial-gradient(600px 400px at 20% 20%, rgba(99,102,241,.18), transparent 60%), radial-gradient(500px 500px at 80% 80%, rgba(236,72,153,.14), transparent 60%); pointer-events: none; } .form-signin, .signup-page .card { max-width: 420px; margin: 0 auto; padding: 0; } .form-signin .card, .signup-page .card { border-radius: var(--mui-r-xl) !important; box-shadow: var(--mui-shadow-lg) !important; border: 1px solid var(--mui-border) !important; background: var(--mui-surface) !important; backdrop-filter: blur(var(--mui-blur)) saturate(140%); overflow: hidden; display: flex; flex-direction: column; justify-content: center; align-items: center; } .form-signin .card.bg-white { background: var(--mui-surface) !important; } .form-signin .card-header { background: transparent !important; border-bottom: 1px solid var(--mui-border) !important; padding: 20px !important; } .form-signin .card-body, .signup-page .card-body { padding: 28px !important; } .form-signin .btn-primary, .signup-page .btn-primary { width: 100%; justify-content: center; padding: 12px 18px; border-radius: var(--mui-r) !important; } .scrollable-page { background: transparent !important; } /* ---------- B2. Pre-loader ---------- */ #pre-loader { background: var(--mui-surface) !important; backdrop-filter: blur(10px); } .app-loader { display: flex; align-items: center; justify-content: center; min-height: 60px; } .loading, .circle-loader { width: 36px; height: 36px; border-radius: 50%; border: 3px solid var(--mui-border); border-top-color: var(--mui-primary); animation: mui-spin 0.7s linear infinite; } @keyframes mui-spin { to { transform: rotate(360deg); } } /* ---------- B3. Page wrappers & headings ---------- */ .page-container, .main-scrollable-page, .page-wrapper, .page-content { background: transparent !important; } .page-title, .title, h1.title, h2.title, h3.title { color: var(--mui-text) !important; font-weight: 700; letter-spacing: -0.01em; } .title-white, .strong { color: var(--mui-text) !important; } /* Breadcrumbs */ .breadcrumb { background: transparent !important; padding: 0 !important; margin-bottom: 8px; } .breadcrumb-item, .breadcrumb-item + .breadcrumb-item::before { color: var(--mui-text-muted) !important; } .breadcrumb-item.active { color: var(--mui-text) !important; font-weight: 500; } /* ---------- B4. Avatars ---------- */ .avatar, .avatar-xs, .avatar-sm, .avatar-md, .avatar-lg, .avatar-30, .avatar-circle, .user-img, img.circle { border-radius: 50% !important; object-fit: cover; box-shadow: 0 0 0 2px var(--mui-surface); } .avatar-xs { width: 24px; height: 24px; } .avatar-sm { width: 32px; height: 32px; } .avatar-md { width: 44px; height: 44px; } .avatar-lg { width: 56px; height: 56px; } .avatar-30 { width: 30px; height: 30px; } .avatar-group { display: inline-flex; } .avatar-group > * { margin-left: -8px; border: 2px solid var(--mui-surface); } .avatar-group > *:first-child { margin-left: 0; } /* ---------- B5. Ribbon (invoice/order status) ---------- */ .ribbon { position: absolute; top: 14px; right: -6px; padding: 6px 14px; border-radius: 6px 0 0 6px; background: var(--mui-grad-primary) !important; color: #fff !important; font-weight: 600; font-size: 12px; box-shadow: 0 8px 20px -10px rgba(99,102,241,.6); } .ribbon .badge { background: transparent !important; padding: 0 !important; color: inherit !important; } /* ---------- B6. Tabs (RISE pattern: .nav-tabs.bg-white.title) ---------- */ .nav-tabs.bg-white.title, .nav-tabs.title { background: var(--mui-surface) !important; border: 1px solid var(--mui-border) !important; border-radius: var(--mui-r) var(--mui-r) 0 0 !important; padding: 4px 4px 0 4px !important; backdrop-filter: blur(var(--mui-blur)); } .nav-tabs.scrollable-tabs { overflow-x: auto; flex-wrap: nowrap; } .title-tab, .tab-title { background: transparent !important; border: none !important; padding: 0 !important; } .title-tab.clearfix, .tab-title.clearfix { overflow: visible; } .tab-title.no-border { border-bottom: none !important; } .tab-content { background: var(--mui-surface) !important; border: 1px solid var(--mui-border) !important; border-top: none !important; border-radius: 0 0 var(--mui-r) var(--mui-r) !important; padding: 20px !important; backdrop-filter: blur(var(--mui-blur)); } .tab-pane { color: var(--mui-text) !important; } /* ---------- B7. Kanban (Tasks + Projects) ---------- */ .kanban-container { display: flex !important; gap: 16px; padding: 16px 0 !important; overflow-x: auto; flex-wrap: nowrap; align-items: flex-start; } .kanban-container > .kanban-col { flex: 0 0 320px; min-height: 200px; padding: 12px !important; background: var(--mui-surface) !important; border: 1px solid var(--mui-border) !important; border-radius: var(--mui-r-lg) !important; box-shadow: var(--mui-shadow) !important; backdrop-filter: blur(var(--mui-blur)) saturate(140%); } .kanban-container > .kanban-col.kanban-col-collapsed { flex: 0 0 48px; padding: 12px 8px !important; } .kanban-col-title { display: flex; align-items: center; justify-content: space-between; padding: 4px 8px 12px !important; margin-bottom: 8px; border-bottom: 1px solid var(--mui-border); font-weight: 600; color: var(--mui-text); } .kanban-item-count { background: var(--mui-grad-soft); color: var(--mui-text); padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 500; margin-left: 8px; } .collapse-kanban-column { background: transparent !important; color: var(--mui-text-muted); transition: color var(--mui-t), transform var(--mui-t); cursor: pointer; } .collapse-kanban-column:hover { color: var(--mui-primary); transform: scale(1.1); } .kanban-item-list { min-height: 50px; } .kanban-item, .kanban-list-item, .kanban-task { background: var(--mui-surface) !important; border: 1px solid var(--mui-border) !important; border-radius: var(--mui-r) !important; box-shadow: var(--mui-shadow) !important; padding: 12px !important; margin-bottom: 10px; transition: transform var(--mui-t), box-shadow var(--mui-t); cursor: grab; } .kanban-item:hover, .kanban-list-item:hover, .kanban-task:hover { transform: translateY(-2px); box-shadow: var(--mui-shadow-lg) !important; border-color: var(--mui-primary) !important; } .kanban-input { margin-top: 8px; } .kanban-input input.form-control { width: 100%; } /* ---------- B8. Chat (RISE messages) ---------- */ .chat-topbar, .chat-back, .chat-close, .chat-topbar-btn, .chat-min-icon, .chat-full-screen, .chat-exit-full-screen, .chat-file-upload-icon { background: transparent !important; color: var(--mui-text-muted) !important; border-radius: var(--mui-r-sm) !important; transition: background var(--mui-t), color var(--mui-t); } .chat-topbar-btn:hover, .chat-back:hover, .chat-close:hover { background: var(--mui-surface-2) !important; color: var(--mui-text) !important; } .chat-topbar-title, .chat-title { color: var(--mui-text) !important; font-weight: 600; } .chat-row { border-bottom: 1px solid var(--mui-border) !important; transition: background var(--mui-t); } .chat-row:hover { background: var(--mui-surface-2) !important; } .chat-tab { border-bottom: 1px solid var(--mui-border) !important; } .chat-tab-text, .chat-tab .active { color: var(--mui-text) !important; } .chat-msg, .chat-message { background: var(--mui-surface) !important; border: 1px solid var(--mui-border) !important; border-radius: var(--mui-r-lg) !important; padding: 10px 14px !important; max-width: 75%; box-shadow: var(--mui-shadow); backdrop-filter: blur(var(--mui-blur)); } .chat-me .chat-msg, .chat-me .chat-message { background: var(--mui-grad-primary) !important; color: #fff !important; border-color: transparent !important; } .chat-other .chat-msg, .chat-other .chat-message { background: var(--mui-surface-2) !important; } .chat-no-messages { color: var(--mui-text-muted) !important; text-align: center; padding: 40px 20px; } .chat-message-textarea, textarea.chat-message-textarea { background: var(--mui-surface-2) !important; border: 1px solid var(--mui-border) !important; border-radius: var(--mui-r) !important; color: var(--mui-text) !important; resize: none; } /* Send / attach round buttons inside the message composer */ .chat-button-section .btn { border-radius: 50% !important; width: 40px; height: 40px; padding: 0 !important; display: inline-flex; align-items: center; justify-content: center; } /* Chat footer tab buttons (Nachrichten / Teammitglieder / Kunden): KEEP them as wide icon-above-label buttons. */ .rise-chat-footer, .footer-buttons-section { background: var(--mui-surface) !important; border-top: 1px solid var(--mui-border) !important; padding: 8px !important; } .rise-chat-footer .chat-tab, .footer-buttons-section .chat-tab { display: flex !important; gap: 4px; padding: 0 !important; border: none !important; list-style: none; } .rise-chat-footer .chat-tab li, .footer-buttons-section .chat-tab li { flex: 1 1 0; list-style: none; padding: 0 !important; } .rise-chat-footer .chat-tab .chat-button, .footer-buttons-section .chat-tab .chat-button, .chat-tab .btn.chat-button { /* reset any forced circle styling; this button is wide, icon on top, text below */ width: 100% !important; height: auto !important; border-radius: var(--mui-r-sm) !important; padding: 8px 10px !important; display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--mui-text-muted) !important; background: transparent !important; border: 1px solid transparent !important; transition: background var(--mui-t), color var(--mui-t); } .rise-chat-footer .chat-tab .chat-button:hover, .footer-buttons-section .chat-tab .chat-button:hover, .chat-tab .btn.chat-button:hover, .chat-tab .active .chat-button, .chat-tab .chat-button.active { background: var(--mui-grad-soft) !important; color: var(--mui-text) !important; } .chat-tab .chat-button > div { line-height: 0; } .chat-tab .chat-button i, .chat-tab .chat-button svg { width: 18px !important; height: 18px !important; stroke: currentColor; } .chat-tab .chat-tab-text { font-size: 11px !important; font-weight: 500; color: inherit !important; white-space: nowrap; } /* Neutralize the global .box-content padding when it is used as a chat-tab
  • */ .chat-tab > .box-content, .chat-tab li.box-content { padding: 0 !important; background: transparent !important; border: none !important; box-shadow: none !important; color: inherit !important; backdrop-filter: none !important; } /* ---------- B9. Comments & activity timeline ---------- */ .comment-container, .activity-container, .timeline-container { background: transparent !important; } .comment-avatar, .activity-avatar { border-radius: 50% !important; } .comment-highlight-section { background: var(--mui-grad-soft) !important; border-left: 3px solid var(--mui-primary) !important; border-radius: var(--mui-r-sm) !important; padding: 10px 14px !important; color: var(--mui-text) !important; } .comment-image-box, .comment-image { border-radius: var(--mui-r-sm) !important; border: 1px solid var(--mui-border) !important; } .comment-like-top { color: var(--mui-text-muted) !important; } /* ---------- B10. Invoice / Estimate / Contract / Order preview ---------- */ .invoice-preview, .estimate-preview, .contract-preview, .order-preview { background: transparent !important; position: relative; } .invoice-preview-container, .estimate-preview-container, .contract-preview-container, .proposal-preview-container, #order-preview { background: var(--mui-surface) !important; border: 1px solid var(--mui-border) !important; border-radius: var(--mui-r-lg) !important; box-shadow: var(--mui-shadow-lg) !important; backdrop-filter: blur(var(--mui-blur)) saturate(140%); color: var(--mui-text) !important; padding: 30px !important; } /* Invoice table is printed — keep light contrast even in dark mode for docs */ .invoice-preview table, .estimate-preview table, .contract-preview table { color: var(--mui-text) !important; } .invoice-preview-header-row, .hidden-invoice-preview-row { background: transparent !important; } /* ---------- B11. FullCalendar ---------- */ .fc, .fc-view, .fc-view-container { color: var(--mui-text) !important; } .fc-toolbar-title { color: var(--mui-text) !important; font-weight: 700 !important; letter-spacing: -0.01em; } .fc .fc-button-primary, .fc .fc-button { background: var(--mui-surface-2) !important; border: 1px solid var(--mui-border) !important; color: var(--mui-text) !important; border-radius: var(--mui-r-sm) !important; box-shadow: none !important; transition: background var(--mui-t); } .fc .fc-button-primary:hover, .fc .fc-button:hover { background: var(--mui-surface) !important; } .fc .fc-button-primary.fc-button-active, .fc .fc-button-primary:not(:disabled).fc-button-active, .fc .fc-button-primary:not(:disabled):active { background: var(--mui-grad-primary) !important; border-color: transparent !important; color: #fff !important; } .fc-theme-standard td, .fc-theme-standard th, .fc-theme-standard .fc-scrollgrid { border-color: var(--mui-border) !important; } .fc .fc-col-header-cell-cushion, .fc .fc-list-day-cushion, .fc .fc-daygrid-day-number { color: var(--mui-text) !important; text-decoration: none !important; } .fc .fc-day-today { background: var(--mui-grad-soft) !important; } .fc-event, .fc-daygrid-event, .fc-timegrid-event { background: var(--mui-grad-primary) !important; border: none !important; color: #fff !important; border-radius: var(--mui-r-sm) !important; padding: 2px 6px !important; box-shadow: 0 4px 10px -4px rgba(99,102,241,.6); } .fc-event:hover { filter: brightness(1.06); } .fc-list-event td { background: transparent !important; } .fc-popover { background: var(--mui-surface) !important; border: 1px solid var(--mui-border) !important; border-radius: var(--mui-r) !important; box-shadow: var(--mui-shadow-lg) !important; } /* ---------- B12. DataTables extras ---------- */ .dataTables_wrapper { color: var(--mui-text) !important; } .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_paginate { color: var(--mui-text-muted) !important; } .dataTables_wrapper .paginate_button.disabled, .dataTables_wrapper .paginate_button.disabled:hover { opacity: .5; } table.dataTable tbody td.focus, table.dataTable tbody td.selected { background: var(--mui-grad-soft) !important; } div.dt-buttons .dt-button { background: var(--mui-surface-2) !important; border: 1px solid var(--mui-border) !important; color: var(--mui-text) !important; border-radius: var(--mui-r-sm) !important; } /* ---------- B13. Select2 tweaks ---------- */ .select2-container--default .select2-selection--multiple .select2-selection__choice { background: var(--mui-grad-soft) !important; border: 1px solid var(--mui-border) !important; color: var(--mui-text) !important; border-radius: 999px !important; padding: 2px 8px 2px 10px !important; } .select2-container--default .select2-selection--multiple .select2-selection__choice__remove { color: var(--mui-text-muted) !important; margin-right: 4px; } .select2-search--dropdown .select2-search__field { background: var(--mui-surface-2) !important; border: 1px solid var(--mui-border) !important; color: var(--mui-text) !important; border-radius: var(--mui-r-sm) !important; padding: 6px 10px !important; } .select2-container--default .select2-results__option[aria-selected="true"] { background: var(--mui-grad-soft) !important; color: var(--mui-text) !important; } /* ---------- B14. Summernote (rich text) ---------- */ .note-editor.note-frame, .note-editor.note-airframe { background: var(--mui-surface-2) !important; border: 1px solid var(--mui-border) !important; border-radius: var(--mui-r-sm) !important; color: var(--mui-text) !important; overflow: hidden; } .note-editor .note-toolbar, .note-editor .note-statusbar { background: var(--mui-surface) !important; border-color: var(--mui-border) !important; } .note-editor .note-editing-area .note-editable { background: transparent !important; color: var(--mui-text) !important; } .note-editor .btn, .note-editor .note-btn { background: transparent !important; border-color: transparent !important; color: var(--mui-text) !important; } .note-editor .btn:hover { background: var(--mui-surface-2) !important; } .note-editor .note-toolbar .note-btn-group .note-btn.active, .note-editor .note-toolbar .note-btn-group .active > .note-btn { background: var(--mui-grad-soft) !important; color: var(--mui-text) !important; } /* ---------- B15. Dropzone ---------- */ .dropzone, .post-dropzone .dropzone, .dropzone.dz-clickable { background: var(--mui-surface-2) !important; border: 2px dashed var(--mui-border-strong) !important; border-radius: var(--mui-r) !important; color: var(--mui-text-muted) !important; transition: border-color var(--mui-t), background var(--mui-t); } .dropzone:hover, .dropzone.dz-drag-hover { border-color: var(--mui-primary) !important; background: var(--mui-grad-soft) !important; color: var(--mui-text) !important; } .dz-preview .dz-image { border-radius: var(--mui-r-sm) !important; } /* ---------- B16. Bootstrap datepicker / timepicker ---------- */ .datepicker.dropdown-menu, .datepicker-dropdown { background: rgba(255,255,255,0.97) !important; border: 1px solid var(--mui-border) !important; border-radius: var(--mui-r) !important; box-shadow: var(--mui-shadow-lg) !important; backdrop-filter: blur(20px) saturate(180%); color: var(--mui-text) !important; padding: 8px !important; } [data-theme="dark"] .datepicker.dropdown-menu, [data-theme="dark"] .datepicker-dropdown { background: rgba(22,27,46,0.97) !important; } .datepicker table tr td, .datepicker table tr th { color: var(--mui-text) !important; } .datepicker table tr td.day:hover, .datepicker table tr td.focused { background: var(--mui-grad-soft) !important; border-radius: 6px; } .datepicker table tr td.active, .datepicker table tr td.active.active, .datepicker table tr td.today { background: var(--mui-grad-primary) !important; color: #fff !important; border-radius: 6px; } .bootstrap-timepicker-widget.dropdown-menu, .bootstrap-timepicker-widget table { background: var(--mui-surface) !important; color: var(--mui-text) !important; border-radius: var(--mui-r) !important; } .bootstrap-timepicker-widget .btn { color: var(--mui-text) !important; } /* ---------- B17. Popovers & Tooltips ---------- */ .popover { background: rgba(255,255,255,0.97) !important; border: 1px solid var(--mui-border) !important; border-radius: var(--mui-r) !important; box-shadow: var(--mui-shadow-lg) !important; backdrop-filter: blur(20px) saturate(180%); color: var(--mui-text) !important; } [data-theme="dark"] .popover { background: rgba(22,27,46,0.97) !important; } .popover-header { background: var(--mui-surface-2) !important; color: var(--mui-text) !important; border-color: var(--mui-border) !important; border-radius: var(--mui-r) var(--mui-r) 0 0 !important; } .popover-body { color: var(--mui-text) !important; } .tooltip .tooltip-inner { background: var(--mui-text) !important; color: var(--mui-bg) !important; border-radius: var(--mui-r-sm) !important; padding: 6px 10px; font-size: 12px; } .bs-tooltip-auto .tooltip-arrow::before, .tooltip .tooltip-arrow::before { border-color: var(--mui-text) !important; } /* ---------- B18. Perfect Scrollbar ---------- */ .ps__thumb-y, .ps__thumb-x { background: var(--mui-border-strong) !important; } .ps__rail-y:hover > .ps__thumb-y, .ps__rail-y.ps--clicking .ps__thumb-y, .ps__rail-x:hover > .ps__thumb-x, .ps__rail-x.ps--clicking .ps__thumb-x { background: var(--mui-primary) !important; } /* ---------- B19. Feather icon sizes (used across RISE) ---------- */ .icon, .icon-10, .icon-12, .icon-14, .icon-16, .icon-18, .icon-20, .icon-24 { stroke: currentColor; } .icon-10 { width: 10px; height: 10px; } .icon-12 { width: 12px; height: 12px; } .icon-14 { width: 14px; height: 14px; } .icon-16 { width: 16px; height: 16px; } .icon-18 { width: 18px; height: 18px; } .icon-20 { width: 20px; height: 20px; } .icon-24 { width: 24px; height: 24px; } /* ---------- B20. Widgets / Dashboard boxes ---------- */ .widget-box, .cover-widget, .dashboard-box, .box { background: var(--mui-surface) !important; border: 1px solid var(--mui-border) !important; border-radius: var(--mui-r-lg) !important; box-shadow: var(--mui-shadow) !important; backdrop-filter: blur(var(--mui-blur)) saturate(140%); transition: transform var(--mui-t), box-shadow var(--mui-t); } .widget-box:hover, .box:hover, .dashboard-box:hover { transform: translateY(-2px); box-shadow: var(--mui-shadow-lg) !important; } .box-title, .widget-title { padding: 14px 18px !important; border-bottom: 1px solid var(--mui-border) !important; font-weight: 600; color: var(--mui-text) !important; } .box-content { padding: 18px !important; color: var(--mui-text) !important; } .count { font-size: 28px !important; font-weight: 700; letter-spacing: -0.02em; color: var(--mui-text); } /* ---------- B21. Clock-in/out + icon widgets (Attendance / Dashboard top row) ---------- */ .clock-in-out-card, .dashboard-icon-widget { background: var(--mui-surface) !important; border: 1px solid var(--mui-border) !important; border-radius: var(--mui-r-lg) !important; box-shadow: var(--mui-shadow) !important; color: var(--mui-text) !important; backdrop-filter: blur(var(--mui-blur)) saturate(140%); overflow: hidden; transition: transform var(--mui-t), box-shadow var(--mui-t); /* equalize heights between widgets in the SAME row without breaking the grid */ height: 100%; min-height: 118px; } .clock-in-out-card:hover, .dashboard-icon-widget:hover { transform: translateY(-2px); box-shadow: var(--mui-shadow-lg) !important; } /* Default card-body layout (also used by the "Letzte Ankündigung" widget which has just icon + label + title and should stack naturally). */ .dashboard-icon-widget .card-body, .clock-in-out-card .card-body { padding: 22px 24px !important; position: relative; height: 100%; } /* Only when the card has the KPI structure (widget-icon + widget-details) do we switch to a horizontal flex layout. */ .dashboard-icon-widget .card-body:has(> .widget-icon), .clock-in-out-card .card-body:has(> .widget-icon) { display: flex; align-items: center; justify-content: space-between; gap: 14px; } /* Announcement widget (mic icon + "Letzte Ankündigung" label + title row) */ .dashboard-icon-widget .card-body > .feather-mic { vertical-align: middle; margin-right: 8px; color: var(--mui-primary); } .dashboard-icon-widget .card-body > .ml10 { font-weight: 600; font-size: 13px; color: var(--mui-text); } .dashboard-icon-widget .card-body > .text-truncate { margin-top: 10px !important; font-size: 14px; color: var(--mui-text-muted); } /* icon block (Clock / List / Calendar / Compass) */ .dashboard-icon-widget .widget-icon, .clock-in-out-card .widget-icon { float: none !important; flex: 0 0 56px; width: 56px !important; height: 56px !important; border-radius: var(--mui-r) !important; box-shadow: 0 8px 18px -8px rgba(99,102,241,.45); } .dashboard-icon-widget .widget-icon .icon, .clock-in-out-card .widget-icon .icon { width: 26px; height: 26px; color: #fff; stroke: #fff; } /* details block (big number + label, OR clock-in button + subtitle) */ .dashboard-icon-widget .widget-details, .clock-in-out-card .widget-details { position: static !important; /* RISE default is position:absolute — remove */ right: auto !important; text-align: right; flex: 1 1 auto; min-width: 0; } .dashboard-icon-widget .widget-details h1 { font-size: 30px !important; line-height: 1; margin: 0 0 6px !important; color: var(--mui-text) !important; font-weight: 700; letter-spacing: -0.02em; } .dashboard-icon-widget .widget-details span { color: var(--mui-text-muted) !important; font-size: 13px; } .clock-in-out-card .widget-details .btn { padding: 8px 14px !important; font-weight: 500; } /* RISE uses .bg-transparent-white (a white pill) around the "Zeit gestartet um …" line. That looks good on light, but is a white strip with dark text in dark mode. Make it theme-aware. */ .bg-transparent-white { background: transparent !important; padding: 0 !important; border-radius: 0 !important; color: var(--mui-text-muted) !important; font-size: 13px; } [data-theme="dark"] .bg-transparent-white { color: #cbd5e1 !important; } /* Dark-mode: brighten the muted labels under the big numbers (otherwise too dim) */ [data-theme="dark"] .dashboard-icon-widget .widget-details span, [data-theme="dark"] .clock-in-out-card .widget-details, [data-theme="dark"] .clock-in-out-card .widget-details > div { color: #d1d5db !important; } [data-theme="dark"] .dashboard-icon-widget .widget-details h1 { color: #f3f4f6 !important; } /* Height sync ONLY for the top-row KPI widgets (clock / counters). Apply the equal-height rule ONLY when the card actually contains a .widget-icon + .widget-details structure (real KPI). The announcement widget also uses .dashboard-icon-widget but has no .widget-icon and should keep its natural height. */ .widget-container > .clock-in-out-card:has(.widget-icon), .widget-container > .dashboard-icon-widget:has(.widget-icon) { height: 100%; } /* Breathing room between dashboard rows */ .dashboards-row { margin-bottom: 20px; } .dashboards-row:last-child { margin-bottom: 0; } /* Don't stretch Bootstrap columns to equal height in dashboard rows (that's what creates the empty ghost card in the left column). Let each column use its natural content height. */ .dashboards-row, .dashboards-row.row { align-items: flex-start !important; } /* Except the FIRST row (top KPI strip) which should keep equal heights */ .dashboards-row:first-of-type, .dashboards-row:first-of-type.row { align-items: stretch !important; } /* Hide empty announcement / alert widgets (prevent ghost boxes) */ .widget-container:empty, .widget-container > .card:empty, .widget-container > .alert:empty, .announcements-alert-widget:empty { display: none !important; } .widget-container > div:only-child:empty { display: none !important; } /* Hide the "invalid-widget" placeholder that RISE ships with height:0 — our .box overlay was making its inner .box-content visible */ .dashboard-invalid-widget, .widget-container:has(> .dashboard-invalid-widget) { display: none !important; } /* (Previously: hide announcement widget if empty — removed because the announcement widget always renders a "Noch keine Ankündigung!" text, so hiding it broke the layout. The widget now stacks naturally.) */ /* ---------- B22. Cart / Store items ---------- */ .cart-grid-item, .cart-item-row { background: var(--mui-surface) !important; border: 1px solid var(--mui-border) !important; border-radius: var(--mui-r-lg) !important; box-shadow: var(--mui-shadow) !important; overflow: hidden; transition: transform var(--mui-t), box-shadow var(--mui-t); } .cart-grid-item:hover { transform: translateY(-2px); box-shadow: var(--mui-shadow-lg) !important; } .cart-grid-item-image-container, .cart-item-image { background: var(--mui-surface-2) !important; border-radius: var(--mui-r) var(--mui-r) 0 0 !important; } .cart-total, .cart-total-value { background: var(--mui-surface) !important; border: 1px solid var(--mui-border) !important; border-radius: var(--mui-r) !important; padding: 14px !important; font-weight: 600; color: var(--mui-text) !important; } /* ---------- B23. App-modal (RISE's big side-panel modals) ---------- */ .app-modal .modal-content, .app-modal-content { background: var(--mui-surface) !important; border-radius: var(--mui-r-xl) !important; box-shadow: var(--mui-shadow-lg) !important; border: 1px solid var(--mui-border) !important; color: var(--mui-text) !important; backdrop-filter: blur(var(--mui-blur)) saturate(140%); } .app-modal-sidebar { background: var(--mui-surface-2) !important; border-right: 1px solid var(--mui-border) !important; padding: 16px !important; } .app-modal-sidebar a, .app-modal-sidebar .nav-link { border-radius: var(--mui-r-sm) !important; padding: 8px 12px !important; color: var(--mui-text-muted) !important; transition: background var(--mui-t), color var(--mui-t); display: flex; align-items: center; gap: 10px; } .app-modal-sidebar a:hover, .app-modal-sidebar a.active, .app-modal-sidebar .nav-link.active { background: var(--mui-grad-soft) !important; color: var(--mui-text) !important; } /* ---------- B24. Pagination ---------- */ .pagination { gap: 4px; } .page-link, .pagination .page-link { background: var(--mui-surface-2) !important; border: 1px solid var(--mui-border) !important; color: var(--mui-text) !important; border-radius: var(--mui-r-sm) !important; padding: 6px 12px; transition: background var(--mui-t), color var(--mui-t); } .page-link:hover { background: var(--mui-surface) !important; color: var(--mui-text) !important; } .page-item.active .page-link { background: var(--mui-grad-primary) !important; border-color: transparent !important; color: #fff !important; } /* ---------- B25. Settings left sub-nav (submenus under "Einstellungen") ---------- */ .left-sidebar, .sub-left-menu, .settings-menu { background: var(--mui-surface) !important; border-right: 1px solid var(--mui-border) !important; backdrop-filter: blur(var(--mui-blur)) saturate(140%); } .settings-menu a, .sub-left-menu a { display: block; padding: 10px 14px !important; border-radius: var(--mui-r-sm) !important; color: var(--mui-text-muted) !important; margin: 2px 8px !important; transition: background var(--mui-t), color var(--mui-t); text-decoration: none !important; } .settings-menu a:hover, .sub-left-menu a:hover { background: var(--mui-surface-2) !important; color: var(--mui-text) !important; } .settings-menu a.active, .sub-left-menu a.active { background: var(--mui-grad-primary) !important; color: #fff !important; } /* ---------- B26. Ticket / Lead / Contract status pills ---------- */ .status-badge, .status-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--mui-grad-soft); color: var(--mui-text); } .status-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--mui-primary); } /* ---------- B27. Project / task view header area ---------- */ .project-nav, .project-title, .project-header, .task-header { background: var(--mui-surface) !important; border: 1px solid var(--mui-border) !important; border-radius: var(--mui-r-lg) !important; padding: 16px 20px !important; box-shadow: var(--mui-shadow); backdrop-filter: blur(var(--mui-blur)); margin-bottom: 16px; } /* ---------- B28. Notifications dropdown ---------- */ #notifications-dropdown, .notifications-dropdown, .notifications-list { background: rgba(255,255,255,0.97) !important; border: 1px solid var(--mui-border) !important; border-radius: var(--mui-r) !important; box-shadow: var(--mui-shadow-lg) !important; backdrop-filter: blur(20px) saturate(180%); padding: 6px !important; color: var(--mui-text) !important; } [data-theme="dark"] #notifications-dropdown, [data-theme="dark"] .notifications-dropdown, [data-theme="dark"] .notifications-list { background: rgba(22,27,46,0.97) !important; } .notifications-list li, .notifications-list .dropdown-item { border-radius: var(--mui-r-sm) !important; padding: 10px 12px !important; transition: background var(--mui-t); } .notifications-list li:hover, .notifications-list .dropdown-item:hover { background: var(--mui-surface-2) !important; } /* ---------- B29. Code/JSON/config blocks ---------- */ pre, code, .code { background: var(--mui-surface-2) !important; color: var(--mui-text) !important; border: 1px solid var(--mui-border) !important; border-radius: var(--mui-r-sm) !important; padding: 8px 10px !important; font-family: "SFMono-Regular","JetBrains Mono","Menlo","Consolas",monospace; } /* ---------- B30. Error pages ---------- */ .error-page, .public-view.errors-page .card { text-align: center; padding: 40px !important; } .error-page h1 { font-size: 96px !important; background: var(--mui-grad-primary); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; margin: 0; letter-spacing: -0.04em; } /* ---------- B31. Misc: switches, checkboxes ---------- */ .form-check-input { background-color: var(--mui-surface-2) !important; border-color: var(--mui-border-strong) !important; } .form-check-input:checked { background-color: var(--mui-primary) !important; border-color: var(--mui-primary) !important; } .form-check-input:focus { box-shadow: 0 0 0 4px rgba(99,102,241,.18) !important; border-color: var(--mui-primary) !important; } /* ---------- B32. Print-safe: keep invoice printable clean ---------- */ @media print { .sidebar, .navbar-custom, #default-navbar, .mui-theme-toggle, .card-header .actions, .btn { display: none !important; } html, body { background: #fff !important; } .invoice-preview-container, .estimate-preview-container, .contract-preview-container { background: #fff !important; color: #111 !important; box-shadow: none !important; border: none !important; backdrop-filter: none !important; } } /* ---------- B33. Dark-mode tweaks for module-specific things ---------- */ [data-theme="dark"] .invoice-preview-container, [data-theme="dark"] .estimate-preview-container, [data-theme="dark"] .contract-preview-container { /* keep readable printable look also in dark — subtle surface */ background: var(--mui-surface) !important; color: var(--mui-text) !important; } [data-theme="dark"] .fc-day-today { background: rgba(99,102,241,.12) !important; } [data-theme="dark"] .note-editor .note-editing-area .note-editable { background: transparent !important; color: var(--mui-text) !important; } [data-theme="dark"] .datepicker table tr td.day, [data-theme="dark"] .datepicker table tr td.new, [data-theme="dark"] .datepicker table tr td.old { color: var(--mui-text) !important; } [data-theme="dark"] .bg-white { background: var(--mui-surface) !important; color: var(--mui-text) !important; } [data-theme="dark"] .card.bg-white { background: var(--mui-surface) !important; } [data-theme="dark"] .tab-content { background: var(--mui-surface) !important; } [data-theme="dark"] .nav-tabs.bg-white.title { background: var(--mui-surface) !important; } [data-theme="dark"] .select2-container--default .select2-selection--single, [data-theme="dark"] .select2-container--default .select2-selection--multiple, [data-theme="dark"] .form-control, [data-theme="dark"] .form-select { color: var(--mui-text) !important; } [data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--mui-text) !important; } /* ---------- B34. Force children of .bg-white to inherit theme text ---------- */ .bg-white, .card.bg-white { color: var(--mui-text) !important; } .bg-light { background: var(--mui-surface-2) !important; color: var(--mui-text) !important; } /* ---------- B35. Gantt chart basics (RISE uses jQuery.Gantt / gantt-like rows) ---------- */ .gantt, .fn-gantt { background: var(--mui-surface) !important; border: 1px solid var(--mui-border) !important; border-radius: var(--mui-r-lg) !important; overflow: hidden; } .gantt .row, .fn-gantt .row { border-color: var(--mui-border) !important; } .gantt .bar, .fn-gantt .bar, .gantt-bar { background: var(--mui-grad-primary) !important; border: none !important; border-radius: var(--mui-r-sm) !important; color: #fff !important; box-shadow: 0 4px 10px -4px rgba(99,102,241,.5); } /* ---------- B36. Back button & action buttons ---------- */ .back-action-btn, .card-header-button { background: var(--mui-surface-2) !important; border: 1px solid var(--mui-border) !important; border-radius: var(--mui-r-sm) !important; color: var(--mui-text) !important; transition: background var(--mui-t); } .back-action-btn:hover, .card-header-button:hover { background: var(--mui-surface) !important; color: var(--mui-text) !important; } /* ---------- B37. Helpdesk / Knowledge-base cards ---------- */ .article-category, .kb-category, .help-category { background: var(--mui-surface) !important; border: 1px solid var(--mui-border) !important; border-radius: var(--mui-r-lg) !important; box-shadow: var(--mui-shadow) !important; transition: transform var(--mui-t), box-shadow var(--mui-t); backdrop-filter: blur(var(--mui-blur)); } .article-category:hover, .kb-category:hover, .help-category:hover { transform: translateY(-2px); box-shadow: var(--mui-shadow-lg) !important; } /* ---------- B38. File manager ---------- */ .file-manager, .files-grid { background: transparent !important; } .file-item, .folder-item { background: var(--mui-surface) !important; border: 1px solid var(--mui-border) !important; border-radius: var(--mui-r) !important; box-shadow: var(--mui-shadow); backdrop-filter: blur(var(--mui-blur)); transition: transform var(--mui-t), box-shadow var(--mui-t), border-color var(--mui-t); } .file-item:hover, .folder-item:hover { transform: translateY(-2px); border-color: var(--mui-primary) !important; box-shadow: var(--mui-shadow-lg); } /* ---------- B39. Magnific popup (image viewer) ---------- */ .mfp-bg { background: rgba(10,15,30,.72) !important; backdrop-filter: blur(6px); } .mfp-content { color: var(--mui-text); } .mfp-title, .mfp-counter { color: #fff !important; } /* ---------- B40. Atwho (@-mentions) ---------- */ .atwho-view { background: rgba(255,255,255,0.97) !important; border: 1px solid var(--mui-border) !important; border-radius: var(--mui-r) !important; box-shadow: var(--mui-shadow-lg) !important; backdrop-filter: blur(20px) saturate(180%); color: var(--mui-text) !important; } [data-theme="dark"] .atwho-view { background: rgba(22,27,46,0.97) !important; } .atwho-view .cur { background: var(--mui-grad-primary) !important; color: #fff !important; } /* ================================================================ MODERN LOGIN — animated gradient + glass card ================================================================ */ /* Animierter Multi-Color-Gradient als Body-Hintergrund */ body.public-view, body.signin-page, body.signup-page { position: relative; min-height: 100vh; overflow: hidden; background: linear-gradient(135deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #4facfe 75%, #667eea 100%) !important; background-size: 300% 300%; animation: rstLoginGradient 18s ease infinite; } @keyframes rstLoginGradient { 0%, 100% { background-position: 0% 50%; } 25% { background-position: 100% 50%; } 50% { background-position: 100% 100%; } 75% { background-position: 0% 100%; } } /* Schwebende Farbkleckse (weich geblurrt) für Tiefe */ body.public-view::before, body.signin-page::before, body.signup-page::before { content: ""; position: fixed; inset: -20%; background: radial-gradient(circle at 20% 30%, rgba(99,102,241,.55), transparent 45%), radial-gradient(circle at 80% 20%, rgba(236,72,153,.45), transparent 40%), radial-gradient(circle at 50% 80%, rgba(6,182,212,.40), transparent 40%), radial-gradient(circle at 20% 90%, rgba(245,158,11,.30), transparent 35%); filter: blur(60px); animation: rstLoginBlobs 22s ease-in-out infinite; pointer-events: none; z-index: 0; } @keyframes rstLoginBlobs { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 33% { transform: translate(-30px, 40px) rotate(120deg); } 66% { transform: translate(40px, -30px) rotate(240deg); } } /* Login-Karte als Glas-Element */ body.public-view .card, body.signin-page .card, body.signup-page .card, .form-signin .card { position: relative !important; z-index: 2; max-width: 440px !important; margin: 8vh auto !important; border-radius: 28px !important; background: rgba(255,255,255,.90) !important; backdrop-filter: blur(28px) saturate(180%); -webkit-backdrop-filter: blur(28px) saturate(180%); border: 1px solid rgba(255,255,255,.55) !important; box-shadow: 0 40px 80px -30px rgba(15,23,42,.45), 0 0 0 1px rgba(255,255,255,.25) inset !important; overflow: hidden; animation: rstLoginCardIn .7s cubic-bezier(.4,0,.2,1); } @keyframes rstLoginCardIn { from { opacity: 0; transform: translateY(20px) scale(.96); } to { opacity: 1; transform: none; } } /* Logo-Bereich */ body.public-view .card-header, .form-signin .card-header { background: transparent !important; padding: 40px 40px 20px !important; text-align: center; border-bottom: none !important; position: relative; } body.public-view .card-header::after, .form-signin .card-header::after { content: ""; position: absolute; bottom: 0; left: 20%; right: 20%; height: 1px; background: linear-gradient(90deg, transparent, rgba(99,102,241,.35), transparent); } body.public-view .card-header img, .form-signin .card-header img { max-width: 200px; filter: drop-shadow(0 4px 12px rgba(15,23,42,.1)); } /* Body */ body.public-view .card-body, .form-signin .card-body { padding: 32px 40px 36px !important; } /* Inputs — größer, weicher, mit Fokus-Glow */ body.public-view .form-control, body.signin-page .form-control, .form-signin .form-control { height: 56px !important; border-radius: 14px !important; border: 2px solid rgba(99,102,241,.12) !important; background: rgba(255,255,255,.75) !important; padding: 16px 18px !important; font-size: 15px; margin-bottom: 14px; transition: all .25s ease; } body.public-view .form-control:focus, .form-signin .form-control:focus { border-color: #6366f1 !important; background: #fff !important; box-shadow: 0 0 0 6px rgba(99,102,241,.14) !important; transform: translateY(-1px); outline: none !important; } /* Anmelde-Button mit atmendem Gradient */ body.public-view .btn-primary, body.signin-page .btn-primary, .form-signin .btn-primary { width: 100% !important; height: 54px !important; border-radius: 14px !important; background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%) !important; background-size: 200% 200% !important; border: none !important; color: #fff !important; font-weight: 600 !important; font-size: 15px !important; letter-spacing: .02em; box-shadow: 0 14px 30px -10px rgba(99,102,241,.6) !important; transition: all .3s ease; animation: rstLoginBtnBreath 8s ease infinite; } body.public-view .btn-primary:hover, .form-signin .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 20px 40px -12px rgba(99,102,241,.75) !important; filter: brightness(1.1); } @keyframes rstLoginBtnBreath { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* Links in Login-Text */ body.public-view a, body.signin-page a { color: #6366f1 !important; text-decoration: none !important; font-weight: 500; transition: color .2s; } body.public-view a:hover, body.signin-page a:hover { color: #4f46e5 !important; text-decoration: underline !important; } /* Footer (AGB / Impressum) als Glas-Leiste */ body.public-view footer, body.signin-page footer, body.signup-page footer { position: fixed; bottom: 0; left: 0; right: 0; padding: 14px 24px; background: rgba(255,255,255,.18); backdrop-filter: blur(14px); border-top: 1px solid rgba(255,255,255,.25); color: rgba(255,255,255,.95) !important; font-size: 13px; z-index: 3; display: flex; justify-content: space-between; align-items: center; } body.public-view footer a, body.signin-page footer a { color: #fff !important; } /* Mobile */ @media (max-width: 640px) { body.public-view .card, .form-signin .card { margin: 4vh 16px !important; max-width: none !important; } body.public-view .card-body, .form-signin .card-body { padding: 24px 26px 28px !important; } body.public-view .card-header, .form-signin .card-header { padding: 28px 28px 16px !important; } } /* Dark-Mode für Login */ [data-theme="dark"] body.public-view, [data-theme="dark"] body.signin-page { background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 25%, #3b0764 50%, #172554 75%, #0f172a 100%) !important; background-size: 300% 300%; } [data-theme="dark"] body.public-view .card, [data-theme="dark"] .form-signin .card { background: rgba(30,27,75,.85) !important; border-color: rgba(255,255,255,.12) !important; color: #f1f5f9 !important; } [data-theme="dark"] body.public-view .form-control, [data-theme="dark"] .form-signin .form-control { background: rgba(15,23,42,.6) !important; color: #f1f5f9 !important; border-color: rgba(255,255,255,.12) !important; } [data-theme="dark"] body.public-view .form-control:focus, [data-theme="dark"] .form-signin .form-control:focus { background: rgba(15,23,42,.85) !important; border-color: #8b5cf6 !important; }