/* ========================================================== LIGHT THEME (test) for the client workspace + its popups. To undo: remove the to light-test.css in index.html. Strategy: re-define the app's colour variables inside the workspace scope, then fix the few hard-coded dark spots. ========================================================== */ #main-app, #details-modal, #knowledge-modal, #manage-kb-categories-modal, #assign-team-modal { --bg-main: #F6F6F7; --bg-surface: #FFFFFF; --bg-surface-elevated: #FFFFFF; --bg-hover: #F2F2F3; --bg-secondary: #FFFFFF; --primary: #1A1A1D; --primary-hover: #121214; --text-primary: #19191C; --text-secondary: #575762; --text-muted: #81818F; --text-light: #19191C; --border-subtle: #EAEAEC; --border-strong: #D9D9DD; --border-light: #E4E4E7; --border-color: #EAEAEC; color: #19191C; } /* ---------- Shell ---------- */ #main-app, #main-app .main-content { background: #F6F6F7; } #main-app .top-header { background: #F6F6F7; border-bottom: 1px solid #EAEAEC; padding-top: 22px; padding-bottom: 22px; } #main-app .header-title h1 { color: #19191C; letter-spacing: -0.02em; } #main-app #current-client-name { color: #81818F !important; font-weight: 600 !important; } /* Sidebar */ #main-app .sidebar { background: #FFFFFF; border-right: 1px solid #EAEAEC; box-shadow: 1px 0 0 rgba(25, 25, 28,0.02); } #main-app .sidebar-logo, #main-app .sidebar-logo span { color: #19191C; letter-spacing: -0.01em; } #main-app .sidebar-nav { gap: 2px; } #main-app .nav-btn { color: #575762 !important; font-weight: 600; font-size: 14.5px; padding: 11px 14px; border-radius: 10px; } #main-app .nav-btn:hover { background: #F4F4F5; color: #19191C !important; } #main-app .nav-btn.active { background: #EEEEF0; color: #121214 !important; box-shadow: inset 3px 0 0 #1A1A1D; } #main-app .nav-btn[data-view="analytics"]:not(.active) { color: #2F8F66 !important; } /* Buttons */ #main-app .btn-outline, #details-modal .btn-outline, #knowledge-modal .btn-outline, #manage-kb-categories-modal .btn-outline, #assign-team-modal .btn-outline { background: #FFFFFF; border: 1px solid #D9D9DD; color: #35353C; box-shadow: 0 1px 2px rgba(25, 25, 28,0.04); } #main-app .btn-outline:hover, #details-modal .btn-outline:hover, #knowledge-modal .btn-outline:hover { background: #F6F6F7; border-color: #C3C3CA; } #main-app .btn-primary, #details-modal .btn-primary, #knowledge-modal .btn-primary { box-shadow: 0 4px 14px rgba(18, 18, 20, 0.18); } /* ---------- Project board ---------- */ #main-app .kanban-board { gap: 16px; } #main-app .kanban-column { background: #EEEEEF; border: 1px solid #E5E5E8; border-radius: 16px; box-shadow: none; } #main-app .kanban-column .column-header { border-bottom: none; padding: 16px 16px 8px; } #main-app .column-header h3 { color: #19191C !important; font-size: 13.5px; font-weight: 700; letter-spacing: 0; display: flex; align-items: center; gap: 9px; } #main-app .column-header .count { background: #FFFFFF; color: #666673; border: 1px solid #DFDFE2; font-weight: 700; min-width: 24px; text-align: center; } #main-app .column-body { padding: 8px 12px 12px; gap: 10px; } #main-app .kanban-card { background: #FFFFFF; border: 1px solid #E3E3E6; border-top-color: #E3E3E6; border-radius: 12px; box-shadow: 0 1px 2px rgba(25, 25, 28,0.05); padding: 14px 16px; } #main-app .kanban-card:hover { border-color: #CECED3; box-shadow: 0 8px 20px rgba(25, 25, 28,0.08); transform: translateY(-1px); } #main-app .kanban-card h4 { color: #19191C; font-weight: 600; font-size: 14.5px !important; } #main-app .kanban-card [style*="rgba(255,255,255,0.05)"] { background: #F2F2F3 !important; color: #575762 !important; } #main-app .kanban-card [style*="rgba(57, 57, 64, 0.1)"] { background: #EEEEF0 !important; color: #121214 !important; } #main-app .kanban-card [title] { color: #FFFFFF !important; } /* ---------- Analytics ---------- */ #main-app #view-analytics h3 { color: #19191C; border-bottom-color: #EAEAEC !important; } #main-app #view-analytics p { color: #81818F; } #main-app #view-analytics [style*="text-align: center"] { background: #FFFFFF !important; border: 1px solid #EAEAEC !important; box-shadow: 0 1px 2px rgba(25, 25, 28,0.04); } #main-app [id^="analytics-total-"] { color: #19191C !important; } /* ---------- Avatar & Content Bank ---------- */ #main-app .kanban-column.kb-category-section { background: color-mix(in srgb, var(--kb-c) 7%, #FFFFFF); border: 1px solid color-mix(in srgb, var(--kb-c) 22%, #EAEAEC); border-top: 3px solid var(--kb-c); } #main-app .kanban-column.kb-category-section .column-header h3 { color: color-mix(in srgb, var(--kb-c) 70%, #19191C) !important; } #main-app .kanban-column.kb-category-section .market-card, #main-app .market-card { background: #FFFFFF; border: 1px solid color-mix(in srgb, var(--kb-c, #1A1A1D) 18%, #E3E3E6); box-shadow: 0 1px 2px rgba(25, 25, 28,0.05); } #main-app .market-card h3 { color: #19191C; } #main-app .market-card span { color: color-mix(in srgb, var(--kb-c, #1A1A1D) 75%, #19191C) !important; } /* ---------- Brand Intake ---------- */ #main-app #view-profile h2 { color: #19191C; } #main-app .profile-section { border-bottom-color: #EAEAEC !important; } #main-app .profile-section p, #main-app .profile-section li, #main-app .profile-section div { color: #575762; } #main-app .profile-section .form-group label { color: #19191C !important; } #main-app .profile-section .form-group input, #main-app .profile-section .form-group textarea { background: #FFFFFF !important; border: 1px solid #D9D9DD !important; color: #19191C !important; box-shadow: 0 1px 2px rgba(25, 25, 28,0.04) !important; } #main-app .profile-section .form-group input:focus, #main-app .profile-section .form-group textarea:focus { border-color: #1A1A1D !important; box-shadow: 0 0 0 3px rgba(26, 26, 29,0.14) !important; } /* ---------- Inputs everywhere in the light scope ---------- */ #main-app .login-input, #details-modal .login-input, #knowledge-modal .login-input, #manage-kb-categories-modal .login-input, #assign-team-modal .login-input, #main-app .form-group input, #main-app .form-group select, #main-app .form-group textarea, #details-modal .form-group input, #details-modal .form-group select, #details-modal .form-group textarea, #knowledge-modal .form-group input, #knowledge-modal .form-group select, #knowledge-modal .form-group textarea, #details-modal textarea, #knowledge-modal textarea { background: #FFFFFF !important; border: 1px solid #D9D9DD !important; color: #19191C !important; } #details-modal .login-input:focus, #details-modal textarea:focus, #knowledge-modal .login-input:focus, #main-app .login-input:focus { border-color: #1A1A1D !important; box-shadow: 0 0 0 3px rgba(26, 26, 29,0.14) !important; } #main-app input::placeholder, #main-app textarea::placeholder, #details-modal input::placeholder, #details-modal textarea::placeholder, #knowledge-modal input::placeholder, #knowledge-modal textarea::placeholder { color: #9C9CA7; } #details-modal input[type="date"], #details-modal select { color-scheme: light; } /* ---------- Popups ---------- */ #details-modal, #knowledge-modal, #manage-kb-categories-modal, #assign-team-modal { background: #FFFFFF; border: 1px solid #E4E4E7; box-shadow: 0 30px 80px rgba(25, 25, 28,0.25); } #details-modal .modal-header, #details-modal .modal-footer, #knowledge-modal .modal-header, #knowledge-modal .modal-footer { border-color: #EAEAEC !important; } #details-modal #detail-title { color: #19191C !important; } #details-modal .luxury-label, #knowledge-modal .luxury-label, #details-modal .form-group label, #knowledge-modal .form-group label { color: #44444C !important; } #details-modal [style*="color: white"], #details-modal [style*="color:white"], #knowledge-modal [style*="color: white"], #assign-team-modal [style*="color: white"], #manage-kb-categories-modal [style*="color: white"] { color: #19191C !important; } #details-modal [style*="rgba(0,0,0,0.2)"] { background: #F6F6F7 !important; border-color: #EAEAEC !important; } #details-modal [style*="rgba(255,255,255,0.02)"] { background: #F6F6F7 !important; } #details-modal .close-btn, #knowledge-modal .close-btn { color: #666673; } #details-modal .modal-footer #archive-task-btn { color: #1A1A1D !important; border-color: #D9D9DD !important; } #details-modal .modal-footer #delete-reel-btn { color: #D04B4B !important; border-color: #F2D3D3 !important; } .ql-toolbar { } #main-app .ql-toolbar, #details-modal .ql-toolbar { background: #F6F6F7 !important; border-color: #D9D9DD !important; } #main-app .ql-container, #details-modal .ql-container { border-color: #D9D9DD !important; background: #FFFFFF; } #main-app .ql-editor, #details-modal .ql-editor { color: #19191C; } #main-app .ql-snow .ql-stroke, #details-modal .ql-snow .ql-stroke { stroke: #44444C !important; } #main-app .ql-snow .ql-fill, #details-modal .ql-snow .ql-fill { fill: #44444C !important; } #main-app .ql-snow .ql-picker, #details-modal .ql-snow .ql-picker { color: #44444C !important; } /* ---- v5 polish ---- */ /* Sidebar: één rustige kleur voor alle items (inline groen op Analytics weg) */ #main-app .nav-btn[data-view="analytics"]:not(.active) { color: #575762 !important; } #main-app .nav-btn[data-view="analytics"].active { color: var(--primary-color, #1A1A1D) !important; } #main-app .nav-btn[data-view="knowledge"] { margin-top: 0 !important; } /* Header: klantnaam netjes uitgelijnd onder de titel */ #main-app #current-client-name { margin-left: 0 !important; margin-top: 2px; font-size: 15px !important; color: #70707F !important; } /* Content Bank: geen lege rij-ruimte meer tussen de vakken */ #main-app #kb-sections-container { align-content: start; } /* ROI tegels: rustiger, mat */ #main-app .roi-card, #main-app [class*="stat-card"] { box-shadow: 0 1px 2px rgba(25, 25, 28,0.04), 0 6px 18px rgba(25, 25, 28,0.04); } /* ---- v6: kolommen iets dieper paars + luxe shadows ---- */ #main-app .kanban-board { gap: 20px; padding: 6px 10px 34px 6px; background: transparent !important; } #main-app .kanban-column { background: linear-gradient(180deg, #DFDFE3 0%, #E6E6E9 55%, #EAEAEC 100%); border: 1px solid #D3D3D8; box-shadow: inset 0 1px 0 rgba(255,255,255,0.75), 0 1px 2px rgba(18, 18, 20,0.06), 0 12px 28px -10px rgba(18, 18, 20,0.22), 0 28px 48px -24px rgba(18, 18, 20,0.18); } #main-app .column-header h3 { color: #25252A !important; } #main-app .column-header .count { background: #FFFFFF; border-color: #D3D3D8; color: #121214; box-shadow: 0 1px 2px rgba(18, 18, 20,0.08); } #main-app .kanban-card { border-color: #DEDEE2; box-shadow: 0 1px 2px rgba(18, 18, 20,0.06), 0 6px 16px -6px rgba(18, 18, 20,0.16); } #main-app .kanban-card:hover { border-color: #C9C9CF; box-shadow: 0 2px 4px rgba(18, 18, 20,0.06), 0 14px 30px -10px rgba(18, 18, 20,0.28); } /* Content Bank-vakken krijgen dezelfde zachte diepte */ #main-app .kanban-column.kb-category-section { box-shadow: inset 0 1px 0 rgba(255,255,255,0.75), 0 1px 2px rgba(18, 18, 20,0.05), 0 12px 28px -12px color-mix(in srgb, var(--kb-c) 35%, transparent); }