/* ===================================================================== Unified design system — gedeeld tussen index.html en sprint-notes.html Theme switching via (zie js/theme.js). ===================================================================== */ :root, html[data-theme="light"] { --bg: #eff6ff; --bg2: #dbeafe; --bg3: #ffffff; --bg4: #e0e7ff; --text: #0f172a; --text2: #475569; --text3: #64748b; --border: #bfdbfe; --border-strong: #93c5fd; --accent: #2563eb; --accent2: #3b82f6; --accent-ring: rgba(37,99,235,.18); --danger: #ef4444; --shadow-card: 0 4px 12px rgba(30,64,175,0.08); /* Aliases zodat planning-tool selectors blijven werken */ --surface: var(--bg2); --surface-solid: var(--bg2); --surface-hover: var(--bg4); --text-muted: var(--text2); --accent-hover: var(--accent2); /* Priority + status accents (theme-onafhankelijk) */ --priority-low: #10b981; --priority-medium: #f59e0b; --priority-high: #ef4444; --status-in-progress: #10b981; --status-on-hold: #f59e0b; --status-waiting-3e: #8b5cf6; --status-live: #3b82f6; } html[data-theme="dark"] { --bg: #0f1419; --bg2: #1a1f2e; --bg3: #252a3a; --bg4: #2d3344; --text: #e8eaf0; --text2: #b4bccf; --text3: #9ea3b5; --border: rgba(255,255,255,0.08); --border-strong: rgba(255,255,255,0.18); --accent: #6c5ce7; --accent2: #7c6df7; --accent-ring: rgba(108,92,231,.25); --danger: #e74c3c; --shadow-card: 0 4px 14px rgba(0,0,0,0.35); --surface: var(--bg2); --surface-solid: var(--bg2); --surface-hover: var(--bg4); --text-muted: var(--text2); --accent-hover: var(--accent2); } * { margin:0; padding:0; box-sizing:border-box; } html, body { height:100%; overflow:hidden; } body { background:var(--bg); color:var(--text); font-family:'DM Sans',system-ui,sans-serif; transition: background-color .2s, color .2s; } html[data-theme="dark"] body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'DM Sans', sans-serif; } ::-webkit-scrollbar { width:8px; height:8px; } ::-webkit-scrollbar-track { background:transparent; } ::-webkit-scrollbar-thumb { background:var(--bg4); border-radius:4px; } ::-webkit-scrollbar-thumb:hover { background:var(--text3); } /* Pipeline kanban — altijd zichtbare, duidelijke horizontale scrollbar */ #kanbanBoard, #devBoard { scrollbar-gutter: stable; } #kanbanBoard::-webkit-scrollbar, #devBoard::-webkit-scrollbar { height:12px; } #kanbanBoard::-webkit-scrollbar-thumb, #devBoard::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius:6px; border:2px solid var(--bg); } #kanbanBoard::-webkit-scrollbar-thumb:hover, #devBoard::-webkit-scrollbar-thumb:hover { background: var(--accent); } #kanbanBoard::-webkit-scrollbar-track, #devBoard::-webkit-scrollbar-track { background: var(--bg2); border-radius:6px; } .hidden { display:none !important; } /* ============ CRM SHELL ============ */ /* Kanban kolommen: vaste breedte, vullen verticaal de container, en cards scrollen binnen kolom */ .kanban-col { min-width:272px; max-width:272px; height:100%; min-height:0; } .kanban-col > div:last-child { overflow-y: auto; overflow-x: hidden; min-height: 100px; /* Extra ruimte onderaan zodat de laatste card volledig zichtbaar is bij scrollen */ padding-bottom: 24px; } /* Horizontale scrollbar onderaan altijd zichtbaar — board zelf is een vaste viewport-hoogte container */ #kanbanBoard, #devBoard { overflow-y: hidden; min-height: 0; padding-bottom: 16px; } .lead-card { background:var(--bg3); border:1px solid var(--border); border-radius:10px; padding:14px; cursor:grab; transition:all 0.15s ease; user-select:none; } .lead-card:hover { background:var(--bg4); border-color:var(--border-strong); transform:translateY(-1px); } .lead-card:active { cursor:grabbing; } .lead-card.sortable-ghost { opacity:0.3; } .lead-card.sortable-chosen { box-shadow: var(--shadow-card); } .channel-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; } .urgency-badge { font-size:11px; padding:2px 7px; border-radius:6px; font-weight:500; letter-spacing:-0.01em; } .urg-green { background:#10b98120; color:#10b981; } .urg-amber { background:#f59e0b20; color:#f59e0b; } .urg-red { background:#ef444420; color:var(--danger); } .urg-gray { background:#6b728020; color:#9ca3af; } html[data-theme="dark"] .urg-green { color:#34d399; } html[data-theme="dark"] .urg-amber { color:#fbbf24; } html[data-theme="dark"] .urg-red { color:#f87171; } .tag-pill { font-size:10px; padding:2px 6px; border-radius:4px; font-weight:500; white-space:nowrap; } .slide-over { position:fixed; top:0; right:0; width:440px; height:100vh; background:var(--bg2); border-left:1px solid var(--border); z-index:50; transform:translateX(100%); transition:transform 0.25s cubic-bezier(0.4,0,0.2,1); overflow-y:auto; } .slide-over.open { transform:translateX(0); } .overlay { position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:40; opacity:0; pointer-events:none; transition:opacity 0.25s; } .overlay.open { opacity:1; pointer-events:auto; } .modal-bg { position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:60; display:none; align-items:center; justify-content:center; } .modal-bg.open { display:flex; } .modal-bg .modal { background:var(--bg2); border:1px solid var(--border); border-radius:14px; padding:28px; width:480px; max-height:90vh; overflow-y:auto; } input, select, textarea { background:var(--bg3); border:1px solid var(--border); color:var(--text); border-radius:8px; padding:10px 14px; font-size:14px; font-family:inherit; width:100%; outline:none; transition:border-color 0.15s; } textarea { padding:12px 14px; line-height:1.45; } .modal input, .modal select, .modal textarea { padding:11px 14px; } input:focus, select:focus, textarea:focus { border-color:var(--accent); } select option { background:var(--bg3); color:var(--text); } .btn { padding:8px 16px; border-radius:8px; font-size:13px; font-weight:500; cursor:pointer; border:1px solid var(--border); background:var(--bg3); color:var(--text); transition:all 0.15s; font-family:inherit; } .btn:hover { background:var(--bg4); border-color:var(--border-strong); } .btn-primary { background:var(--accent); border-color:var(--accent); color:#fff; } .btn-primary:hover { background:var(--accent2); } .btn-sm { padding:5px 10px; font-size:12px; } .btn-danger { border-color:var(--danger); color:var(--danger); } .btn-danger:hover { background:#ef444420; } .stage-top-border { height:3px; border-radius:3px 3px 0 0; } .metric-card { background:var(--bg3); border:1px solid var(--border); border-radius:10px; padding:16px 20px; } .activity-item { padding:12px 0; border-bottom:1px solid var(--border); } .activity-item:last-child { border-bottom:none; } .funnel-bar { height:6px; border-radius:3px; transition:width 0.4s ease; } @keyframes fadeIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} } .fade-in { animation:fadeIn 0.3s ease forwards; } .tab-btn { padding:6px 14px; border-radius:6px; font-size:13px; color:var(--text3); cursor:pointer; border:none; background:transparent; font-family:inherit; transition:all 0.15s; } .tab-btn.active { background:var(--accent); color:#fff; } .tab-btn:hover { color:var(--text2); } .sidebar { width:200px; min-width:200px; background:var(--bg2); border-right:1px solid var(--border); display:flex; flex-direction:column; padding:16px 0; } .sidebar.hidden { display:none; } .sidebar-item { padding:8px 16px; font-size:13px; cursor:pointer; color:var(--text2); border-left:3px solid transparent; transition:all 0.15s; } .sidebar-item:hover { background:var(--bg4); color:var(--text); } .sidebar-item.active { background:var(--bg4); color:var(--accent); border-left-color:var(--accent); font-weight:600; } .filter-toolbar { display:flex; align-items:center; gap:8px; padding:0 20px 12px; } .filter-pill { display:inline-flex; align-items:center; gap:8px; height:34px; padding:0 12px; border-radius:999px; background:var(--bg3); border:1px solid var(--border); font-size:13px; color:var(--text); transition:all .15s; font-family:inherit; } .filter-pill:focus-within, .filter-pill:hover { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-ring); } .filter-pill svg { flex-shrink:0; color:var(--text3); } .filter-pill input, .filter-pill select { border:none !important; background:transparent !important; padding:0 !important; height:auto !important; width:auto !important; font-size:13px; color:var(--text); outline:none; font-family:inherit; } .filter-pill input { min-width:200px; } .filter-pill select { padding-right:18px !important; cursor:pointer; } .date-input { font-family:inherit; font-size:12px; min-width:0; box-sizing:border-box; background:var(--bg3); color:var(--text); border:1px solid var(--border); border-radius:6px; padding:4px 6px; width:100%; } .date-input::-webkit-calendar-picker-indicator { padding:0; margin:0; opacity:.55; cursor:pointer; } html[data-theme="dark"] .date-input::-webkit-calendar-picker-indicator { filter: invert(1); } .date-input:focus { border-color:var(--accent); outline:none; } .metrics-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(340px, 1fr)); gap:20px; } .metric-section { background:var(--bg3); border:1px solid var(--border); border-radius:12px; padding:20px; } .metric-section h3 { font-size:14px; font-weight:600; margin-bottom:12px; } .metric-row { display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px solid var(--border); } .metric-row:last-child { border-bottom:none; } .metric-bar { height:8px; border-radius:4px; transition:width 0.4s ease; } /* ============ LOGIN ============ */ #login-screen { display:flex; align-items:center; justify-content:center; min-height:100vh; background:var(--bg); } .login-card { background:var(--bg2); border:1px solid var(--border); border-radius:16px; padding:40px; width:360px; text-align:center; box-shadow:0 8px 32px rgba(0,0,0,0.08); } .login-card h1 { font-size:22px; margin-bottom:4px; color:var(--text); font-weight:700; } .login-card p { color:var(--text3); font-size:13px; margin-bottom:24px; } .login-card input { width:100%; padding:10px 14px; margin-bottom:12px; background:var(--bg3); border:1px solid var(--border); border-radius:8px; color:var(--text); font-size:14px; font-family:inherit; } .login-card input:focus { outline:none; border-color:var(--accent); } .login-card button { width:100%; padding:10px; background:var(--accent); color:white; border:none; border-radius:8px; font-size:14px; font-weight:600; cursor:pointer; font-family:inherit; } .login-card button:hover { background:var(--accent2); } .error { color:var(--danger); font-size:13px; margin-top:8px; min-height:18px; } /* ============ THEME TOGGLE BUTTON ============ */ .theme-toggle { width:32px; height:32px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; background:var(--bg3); border:1px solid var(--border); color:var(--text2); cursor:pointer; transition:all .15s; padding:0; } .theme-toggle:hover { background:var(--bg4); color:var(--text); } .theme-toggle svg { width:16px; height:16px; } html[data-theme="light"] .theme-toggle .icon-sun { display:none; } html[data-theme="dark"] .theme-toggle .icon-moon { display:none; }