html, body{ height:100%; }
.btn{
height: 40px;
padding: 0 14px;
border-radius: 12px;
border: 1px solid transparent;
display: inline-flex;
align-items: center;
gap: .5rem;
font-weight: 800;
font-size: .9rem;
cursor: pointer;
transition: .15s ease;
text-decoration:none;
user-select:none;
white-space: nowrap;
}
.btn-ghost{ background: transparent; border-color: var(--border); color: var(--text); }
.btn-ghost:hover{ background: rgba(15,23,42,.04); border-color: rgba(59,130,246,.35); }
.btn-io{
height: 32px;
padding: 0 10px;
border-radius: 999px;
font-size: .82rem;
font-weight: 700;
background: rgba(15,23,42,.035);
border: 1px solid var(--border);
color: var(--muted);
}
.btn-io:hover{
background: rgba(59,130,246,.10);
border-color: rgba(59,130,246,.28);
color: var(--accent-2);
box-shadow: var(--shadow-sm);
transform: translateY(-1px);
}
.btn-io i{ opacity: .85; }
.btn-io-wide{ min-width: 92px; }
.btn-io-icon{
width: 32px;
padding: 0;
justify-content: center;
}
.iconbtn{
width: 40px; height: 40px;
border-radius: 12px;
border: 1px solid var(--border);
background: rgba(15,23,42,.03);
display: grid;
place-items:center;
cursor:pointer;
transition:.15s ease;
position: relative;
}
.iconbtn:hover{ background: rgba(15,23,42,.06); }
.input, .select, .textarea{
width: 100%;
border: 1px solid var(--border);
border-radius: 12px;
padding: 12px 12px;
font-size: .9rem;
background: var(--surface);
outline: none;
transition: .15s ease;
}
.textarea{ min-height: 90px; resize: vertical; }
.input:focus, .select:focus, .textarea:focus{
border-color: rgba(59, 131, 246, 0.715);
box-shadow: 0 0 0 3px rgba(59,130,246,.12);
}
.card-h{
padding: 18px 18px;
border-bottom: 1px solid var(--border);
display:flex;
align-items:center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
}
.card-t{ font-weight: 900; }
.card-b{ padding: 18px; }
.badge{
display:inline-flex;
align-items:center;
gap:.4rem;
padding: .25rem .6rem;
border-radius: 999px;
font-weight: 900;
font-size: .78rem;
border: 1px solid var(--border);
background: rgba(255,255,255,.8);
white-space: nowrap;
}
.app{
min-height: 100%;
display:flex;
}
.sidebar{
width: var(--sidebar-w);
position: fixed;
inset: 0 auto 0 0;
background: var(--primary);
color: var(--surface);
display:flex;
flex-direction: column;
z-index: var(--z-sidebar);
}
.sb-h{
padding: var(--sp-4);
border-bottom: 1px solid rgba(255,255,255,.08);
}
.brand{
display:flex; align-items:center; gap: .75rem;
font-weight: 900; letter-spacing:-.3px;
}
.brand-icon{
width: 36px; height: 36px;
border-radius: 12px;
background: var(--accent);
display:grid; place-items:center;
}
.sb-project{ margin-top: 14px; }
.sb-label{
font-size: .72rem; opacity: .65;
text-transform: uppercase; letter-spacing:.08em;
margin-bottom: 6px; display:block;
font-weight: 800;
}
.sb-select{
width:100%;
border-radius: 12px;
padding: 10px 12px;
border: 1px solid rgba(255,255,255,.18);
background: rgba(255,255,255,.08);
color: var(--surface);
outline:none;
}
.sb-nav{ padding: 12px 0; overflow:auto; flex:1; }
.sb-section{
padding: 10px 18px 6px;
opacity:.55;
font-size:.72rem;
text-transform:uppercase;
letter-spacing:.08em;
font-weight:900;
}
.sb-footer{
padding: 14px 18px;
border-top: 1px solid rgba(255,255,255,.08);
}
.user-pill{
display:flex;
align-items:center;
gap:10px;
padding: 10px 12px;
border-radius: 14px;
background: rgba(255,255,255,.06);
}
.user-meta{ min-width:0; }
.user-meta .name{
font-weight:900;
font-size:.9rem;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.user-meta .role{ opacity:.65; font-size:.78rem; font-weight:700; }
.main{
margin-left: var(--sidebar-w);
width: calc(100% - var(--sidebar-w));
display:flex;
flex-direction: column;
min-height: 100vh;
}
.topbar{
position: sticky;
top: 0;
z-index: var(--z-sticky);
background: var(--surface);
border-bottom: 1px solid var(--border);
padding: 14px var(--sp-5);
display:flex;
align-items:center;
justify-content: space-between;
gap: 14px;
}
.tb-left{ display:flex; align-items:center; gap: 14px; min-width: 0; }
.search{
position: relative;
width: min(460px, 44vw);
min-width: 260px;
}
.search i{
position:absolute; left: 12px; top: 50%;
transform: translateY(-50%);
color: #94a3b8;
}
.search input{
padding-left: 38px;
height: 40px;
}
#searchResultsDropdown{
position:absolute;
top: calc(100% + 8px);
left:0; right:0;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
box-shadow: var(--shadow);
display:none;
max-height: 380px;
overflow:auto;
z-index: var(--z-dropdown);
}
#searchResultsDropdown.show{ display:block; }
#searchResultsDropdown .search-filter-row{
position: sticky;
top: 0;
z-index: var(--z-base);
background: var(--surface);
border-bottom: 1px solid var(--border);
padding: 8px;
display: flex;
gap: 6px;
flex-wrap: wrap;
}
#searchResultsDropdown .search-filter-chip{
border: 1px solid var(--border);
background: var(--surface);
color: var(--text);
border-radius: 999px;
height: 28px;
padding: 0 10px;
font-size: .74rem;
font-weight: 700;
display: inline-flex;
align-items: center;
gap: 6px;
cursor: pointer;
}
#searchResultsDropdown .search-filter-chip span{
color: var(--text-light);
font-weight: 700;
font-size: .7rem;
}
#searchResultsDropdown .search-filter-chip:hover{
background: rgba(15,23,42,.04);
border-color: rgba(59,130,246,.35);
}
#searchResultsDropdown .search-filter-chip.is-active{
background: rgba(59,130,246,.12);
border-color: rgba(59,130,246,.5);
color: #1d4ed8;
}
.tb-right{ display:flex; align-items:center; gap: 10px; }
.topbar-leads-io{
display: inline-flex;
align-items: center;
gap: 10px;
}
.content{
padding: var(--sp-5);
flex:1;
}
.view{
max-width: var(--content-max);
margin: 0 auto;
display:none;
}
.modal-overlay{
display:none;
position: fixed;
inset: 0;
background: rgba(0,0,0,.55);
backdrop-filter: blur(4px);
z-index: var(--z-modal);
padding: 18px;
align-items: center;
justify-content: center;
}
/* Ensure generic AppDialog always appears above other UI layers */
#appDialog{ z-index: var(--z-dialog); }
/* AI analysis modal on top */
#aiAnalysisModal{ z-index: var(--z-ai-modal); }
.modal{
width: min(1200px, 100%);
max-height: min(92vh, 900px);
background: var(--surface);
border-radius: 16px;
overflow:hidden;
border: 1px solid rgba(255,255,255,.2);
box-shadow: 0 30px 80px rgba(0,0,0,.25);
display:flex;
flex-direction: column;
}
.modal-h{
padding: 16px 18px;
display:flex;
align-items:center;
justify-content: space-between;
gap: 12px;
border-bottom: 1px solid var(--border);
background: rgba(15,23,42,.03);
}
.modal-x{
width: 36px; height: 36px;
border-radius: 10px;
border: 1px solid var(--border);
background: var(--surface);
cursor:pointer;
display:grid;
place-items:center;
font-size: 18px;
line-height: 1;
}
.modal-b{
padding: 18px;
overflow:auto;
flex:1;
}
.modal-f{
padding: 14px 18px;
border-top: 1px solid var(--border);
background: rgba(15,23,42,.03);
display:flex;
justify-content: flex-end;
gap: 10px;
flex-wrap: wrap;
}
@media (max-width: 1024px){
.content{ padding: 18px; }
.topbar{ padding: 12px 18px; }
.search{ width: min(420px, 48vw); }
}
@media (max-width: 820px){
.page-title{ font-size: 1.2rem; }
.search{ width: min(360px, 46vw); min-width: 220px; }
}
/* =====================
LEGACY WIDGETS (migrated from old)
===================== */
/* CC: Use Dashboard-style top-bar as the single header for all views */
.cc-view-header-block{ display:none !important; }
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
background: var(--background);
color: var(--text);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
/* App Container */
.app-container {
display: flex;
min-height: 100vh;
}
/* Sidebar Navigation */
.sidebar {
width: 260px;
background: var(--primary);
color: white;
display: flex;
flex-direction: column;
position: fixed;
left: 0;
top: 0;
bottom: 0;
z-index: var(--z-sidebar-mobile);
transition: all 0.3s ease;
}
.sidebar-header {
padding: 1.5rem;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.app-logo {
display: flex;
align-items: center;
gap: 0.75rem;
font-size: 1.25rem;
font-weight: 800;
letter-spacing: -0.5px;
}
.logo-icon {
width: 36px;
height: 36px;
background: var(--accent);
border-radius: var(--radius);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
}
/* White-label logo behavior: image logos should not be tinted by accent nor inherit previous shape */
.logo-icon.has-image {
background: transparent !important;
border-radius: 0 !important;
padding: 0 !important;
}
.logo-icon.has-image img{
width:100%;
height:100%;
object-fit:contain;
display:block;
}
/* Personaliseren UI controls – cleaner modern SaaS look */
#view-branding .wl-color{
width:100%;
height:44px;
border:1px solid var(--border);
border-radius:12px;
cursor:pointer;
background:transparent;
padding:0;
}
#view-branding input[type="file"]{
border-radius:12px !important;
}
#view-branding input[type="text"],
#view-branding select,
#view-branding textarea{
border-radius:12px !important;
}
/* Clean slider/range ("regelaar") */
#view-branding input[type="range"]{
-webkit-appearance:none;
appearance:none;
width:100%;
height:6px;
border-radius:999px;
background:var(--border);
outline:none;
}
#view-branding input[type="range"]::-webkit-slider-thumb{
-webkit-appearance:none;
appearance:none;
width:18px;
height:18px;
border-radius:999px;
background:var(--accent);
border:2px solid var(--surface);
box-shadow:0 2px 10px rgba(0,0,0,0.15);
cursor:pointer;
}
#view-branding input[type="range"]::-moz-range-thumb{
width:18px;
height:18px;
border-radius:999px;
background:var(--accent);
border:2px solid var(--surface);
box-shadow:0 2px 10px rgba(0,0,0,0.15);
cursor:pointer;
}
#view-branding input[type="range"]::-moz-range-track{
height:6px;
border-radius:999px;
background:var(--border);
}
.app-subtitle {
font-size: 0.75rem;
opacity: 0.6;
margin-top: 0.25rem;
font-weight: 400;
}
.nav-menu {
flex: 1;
padding: 1rem 0;
overflow-y: auto;
}
.nav-section {
margin-bottom: 1.5rem;
}
.nav-section-title {
padding: 0 1.5rem;
font-size: 0.6875rem;
text-transform: uppercase;
letter-spacing: 0.5px;
opacity: 0.5;
font-weight: 600;
margin-bottom: 0.5rem;
}
.nav-item {
padding: 0.75rem 1.5rem;
display: flex;
align-items: center;
gap: 0.75rem;
color: rgba(255,255,255,0.8);
text-decoration: none;
transition: all 0.2s;
cursor: pointer;
position: relative;
}
.nav-item:hover {
background: rgba(255,255,255,0.05);
color: white;
}
.nav-item.active {
background: rgba(59,130,246,0.1);
color: white;
}
.nav-item.active::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: var(--accent);
}
.nav-icon {
font-size: 1.125rem;
width: 24px;
text-align: center;
}
.nav-badge {
margin-left: auto;
background: var(--accent);
color: white;
font-size: 0.6875rem;
padding: 0.125rem 0.5rem;
border-radius: 10px;
font-weight: 600;
}
.sidebar-footer {
padding: 1rem 1.5rem;
border-top: 1px solid rgba(255,255,255,0.1);
}
.user-profile {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem;
border-radius: var(--radius);
background: rgba(255,255,255,0.05);
cursor: pointer;
transition: all 0.2s;
}
.user-profile:hover {
background: rgba(255,255,255,0.1);
}
.user-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--accent);
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 0.875rem;
}
.user-info {
flex: 1;
min-width: 0;
}
.user-name {
font-size: 0.875rem;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.user-role {
font-size: 0.75rem;
opacity: 0.6;
}
/* Main Content */
.main-content {
flex: 1;
margin-left: 260px;
display: flex;
flex-direction: column;
}
/* Top Bar */
.top-bar {
background: var(--surface);
border-bottom: 1px solid var(--border);
padding: 1rem 2rem;
display: flex;
align-items: center;
justify-content: space-between;
position: sticky;
top: 0;
z-index: var(--z-sticky);
}
.top-bar-left {
display: flex;
align-items: center;
gap: 1.5rem;
}
.page-title {
font-size: 1.5rem;
font-weight: 700;
}
.search-bar {
position: relative;
width: 320px;
}
.search-bar input {
width: 100%;
padding: 0.625rem 1rem 0.625rem 2.5rem;
border: 1px solid var(--border);
border-radius: var(--radius);
font-size: 0.875rem;
transition: all 0.2s;
}
.search-bar input:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
}
/* Search Results Dropdown */
.search-results-dropdown {
position: absolute;
top: calc(100% + 0.5rem);
left: 0;
right: 0;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow-lg);
max-height: 400px;
overflow-y: auto;
z-index: var(--z-dropdown);
display: none;
}
.search-results-dropdown.show {
display: block;
}
.search-section {
padding: 0.75rem 0;
}
.search-section:not(:last-child) {
border-bottom: 1px solid var(--border);
}
.search-section-title {
padding: 0.5rem 1rem;
font-size: 0.75rem;
font-weight: 600;
color: var(--text-light);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.search-result-item {
padding: 0.75rem 1rem;
cursor: pointer;
transition: background 0.2s;
display: flex;
align-items: center;
gap: 0.75rem;
}
.search-result-item:hover {
background: var(--hover);
}
.search-result-item.is-active {
background: rgba(59, 130, 246, 0.12);
outline: 1px solid rgba(59, 130, 246, 0.28);
}
.search-result-icon {
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.125rem;
flex-shrink: 0;
}
.search-result-icon.lead {
background: #dbeafe;
}
.search-result-icon.call {
background: #fef3c7;
}
.search-result-icon.company {
background: #e0e7ff;
}
.search-result-content {
flex: 1;
min-width: 0;
}
.search-result-title {
font-weight: 600;
color: var(--text);
margin-bottom: 0.125rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.search-result-meta {
font-size: 0.75rem;
color: var(--text-light);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.search-no-results {
padding: 2rem 1rem;
text-align: center;
color: var(--text-light);
font-size: 0.875rem;
}
/* ---- Lead picker (rapport type C) ---- */
.cc-lead-picker {
position: relative;
flex: 1;
min-width: 220px;
max-width: 420px;
}
.cc-lead-picker__dropdown {
display: none;
position: absolute;
top: calc(100% + 6px);
left: 0;
right: 0;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r, 14px);
box-shadow: 0 8px 32px rgba(15,23,42,.13);
max-height: 300px;
overflow-y: auto;
z-index: var(--z-dropdown, 200);
}
.cc-lead-picker__dropdown.show { display: block; }
.cc-lead-picker__item {
padding: 0.6rem 0.9rem;
cursor: pointer;
display: flex;
flex-direction: column;
gap: 0.1rem;
border-bottom: 1px solid var(--border);
}
.cc-lead-picker__item:last-child { border-bottom: none; }
.cc-lead-picker__item:hover,
.cc-lead-picker__item.is-active { background: rgba(59,130,246,.07); }
.cc-lead-picker__item--none {
color: var(--muted);
font-style: italic;
}
.cc-lead-picker__item-title {
font-weight: 600;
font-size: 0.87rem;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cc-lead-picker__item-meta {
font-size: 0.74rem;
color: var(--muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cc-lead-picker__empty {
padding: 0.65rem 0.9rem;
color: var(--muted);
font-size: 0.82rem;
text-align: center;
font-style: italic;
}
.search-icon {
position: absolute;
left: 0.875rem;
top: 50%;
transform: translateY(-50%);
color: var(--text-lighter);
}
.top-bar-right {
display: flex;
align-items: center;
gap: 1rem;
}
/* CC: Device buttons match top-bar buttons and align perfectly */
.top-bar-right{
display:flex;
align-items:center;
gap: .75rem;
}
.top-bar-right .btn{
height: 40px;
display:inline-flex;
align-items:center;
}
.icon-button {
width: 40px;
height: 40px;
border: none;
background: var(--hover);
border-radius: var(--radius);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s;
position: relative;
}
.icon-button:hover {
background: var(--border);
}
.icon-button .badge {
position: absolute;
top: -4px;
right: -4px;
width: 18px;
height: 18px;
background: var(--danger);
color: white;
font-size: 0.625rem;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
}
/* Content Area */
.content-area {
flex: 1;
padding: 2rem;
overflow-y: auto;
}
/* CC: Consistent dashboard gutters + width across all views */
.content-area{
padding-left: 2rem;
padding-right: 2rem;
}
.content-area .view{
max-width: 1400px;
margin-left: auto;
margin-right: auto;
}
/* Keep cards aligned to the same gutters (no extra side margins) */
.cc-leads-filters-card,
.cc-leads-table-card{
margin-left: 0 !important;
margin-right: 0 !important;
}
/* Stats Grid */
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 1.5rem;
margin-bottom: 2rem;
}
.stat-card {
background: var(--surface);
padding: 1.5rem;
border-radius: var(--radius);
border: 1px solid var(--border);
position: relative;
overflow: hidden;
}
.stat-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: var(--accent);
}
.stat-header {
display: flex;
justify-content: space-between;
align-items: start;
margin-bottom: 1rem;
}
.stat-title {
font-size: 0.875rem;
color: var(--text-light);
font-weight: 500;
}
.stat-icon{
/* Unboxed icons (no background, no container box) */
width: auto;
height: auto;
border-radius: 0;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
background: transparent !important;
padding: 0;
line-height: 1;
}
.stat-icon.blue { color: var(--accent); }
.stat-icon.green { color: var(--success); }
.stat-icon.orange { color: var(--warning); }
.stat-icon.purple { color: #8b5cf6; }
.stat-value {
font-size: 2rem;
font-weight: 800;
line-height: 1;
margin-bottom: 0.5rem;
}
.stat-change {
font-size: 0.875rem;
display: flex;
align-items: center;
gap: 0.25rem;
}
.stat-change.positive { color: var(--success); }
.stat-change.negative { color: var(--danger); }
/* Cards */
/* CC: Leads cards match dashboard widget field style */
.cc-leads-filters-card,
.cc-leads-table-card{
margin: 0 16px 16px 16px;
}
.cc-leads-table-card .card-body{
padding: 1.5rem !important;
}
/* CC: Remove inner padding so the leads table fits perfectly in the card */
.cc-leads-table-card .card-body{
padding: 0 !important;
}
.cc-leads-table-card .table-container{
border-left: 0;
border-right: 0;
}
/* CC: Leads table - make Score & Calls columns smaller and center content */
#view-leads .cc-leads-table-card table th:nth-child(3),
#view-leads .cc-leads-table-card table td:nth-child(3){
width: 44px !important; /* Score */
text-align: center !important;
}
#view-leads .cc-leads-table-card table th:nth-child(4),
#view-leads .cc-leads-table-card table td:nth-child(4){
width: 64px !important; /* Calls */
text-align: center !important;
}
/* Center any inputs/selects inside these columns */
#view-leads .cc-leads-table-card table td:nth-child(3) input,
#view-leads .cc-leads-table-card table td:nth-child(3) select,
#view-leads .cc-leads-table-card table td:nth-child(4) input,
#view-leads .cc-leads-table-card table td:nth-child(4) select{
width: 44px !important;
margin-left: auto !important;
margin-right: auto !important;
text-align: center !important;
display: block;
}
/* If those columns render as badges/spans, center them too */
#view-leads .cc-leads-table-card table td:nth-child(3) span,
#view-leads .cc-leads-table-card table td:nth-child(4) span{
display: inline-flex;
justify-content: center;
min-width: 48px;
}
/* CC: Give more room to Lead Name / Company / Status (allow wrapping, no ellipsis) */
#view-leads .cc-leads-table-card td.lead-name,
#view-leads .cc-leads-table-card td.company,
#view-leads .cc-leads-table-card td.status{
white-space: normal !important;
overflow: visible !important;
text-overflow: clip !important;
}
/* Fallback: assume columns 5-7 are name/company/status */
#view-leads .cc-leads-table-card table td:nth-child(5),
#view-leads .cc-leads-table-card table td:nth-child(6),
#view-leads .cc-leads-table-card table td:nth-child(7){
white-space: normal !important;
overflow: visible !important;
text-overflow: clip !important;
}
/* CC: Leads column widths — prioritize Lead Naam / Bedrijf / Status, shrink Score / Calls */
#view-leads .cc-leads-table-card table th:nth-child(2),
#view-leads .cc-leads-table-card table td:nth-child(2){
width: 260px !important; /* Lead Naam */
}
#view-leads .cc-leads-table-card table th:nth-child(3),
#view-leads .cc-leads-table-card table td:nth-child(3){
width: 220px !important; /* Bedrijf */
}
#view-leads .cc-leads-table-card table th:nth-child(5),
#view-leads .cc-leads-table-card table td:nth-child(5){
width: 170px !important; /* Status */
}
/* Make Score / Calls compact */
#view-leads .cc-leads-table-card table th:nth-child(6),
#view-leads .cc-leads-table-card table td:nth-child(6){
width: 54px !important; /* Score */
text-align: center !important;
}
#view-leads .cc-leads-table-card table th:nth-child(7),
#view-leads .cc-leads-table-card table td:nth-child(7){
width: 62px !important; /* Calls */
text-align: center !important;
}
/* Center small inputs (Score/Calls) and keep them tight */
#view-leads .cc-leads-table-card table td:nth-child(6) input,
#view-leads .cc-leads-table-card table td:nth-child(6) select,
#view-leads .cc-leads-table-card table td:nth-child(7) input,
#view-leads .cc-leads-table-card table td:nth-child(7) select{
width: 42px !important;
margin-left: auto !important;
margin-right: auto !important;
text-align: center !important;
display: block;
}
/* Ensure these priority columns can show full content (wrap instead of ellipsis) */
#view-leads .cc-leads-table-card table td:nth-child(2),
#view-leads .cc-leads-table-card table td:nth-child(3),
#view-leads .cc-leads-table-card table td:nth-child(5){
white-space: normal !important;
overflow: visible !important;
text-overflow: clip !important;
}
/* CC: Compress Leads table so all columns fit without horizontal scrolling */
.cc-leads-table-card .table-container{ overflow-x: hidden; }
.cc-leads-table-card table{
width:100%;
table-layout: fixed;
}
.cc-leads-table-card th,
.cc-leads-table-card td{
padding: 0.5rem 0.4rem !important;
font-size: 0.82rem !important;
line-height: 1.2 !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Override inline min-widths on headers (inline styles without !important) */
.cc-leads-table-card th[style*="min-width"]{
min-width: 0 !important;
width: auto !important;
}
.cc-leads-table-card th:first-child,
.cc-leads-table-card td:first-child{
width: 42px !important;
padding-left: 0.35rem !important;
padding-right: 0.35rem !important;
}
/* Actions column: keep it readable */
.cc-leads-table-card th:last-child,
.cc-leads-table-card td:last-child{
width: 120px !important;
text-align: center !important;
overflow: visible;
text-overflow: clip;
}
.cc-leads-table-card td:last-child button,
.cc-leads-table-card td:last-child a{
font-size: 0.78rem !important;
padding: 0.35rem 0.5rem !important;
}
/* Keep table full width within the card */
.cc-leads-table-card table{
width: 100%;
}
.card {
background: var(--surface);
border-radius: var(--radius);
border: 1px solid var(--border);
overflow: hidden;
}
.card-header {
padding: 1.5rem;
border-bottom: 1px solid var(--border);
display: flex;
justify-content: space-between;
align-items: center;
}
.card-title {
font-size: 1.125rem;
font-weight: 700;
}
.card-actions {
display: flex;
gap: 0.5rem;
}
.card-body {
padding: 1.5rem;
}
/* Buttons */
.btn {
padding: 0.625rem 1.25rem;
border: none;
border-radius: var(--radius);
font-weight: 600;
font-size: 0.875rem;
cursor: pointer;
transition: all 0.2s;
display: inline-flex;
align-items: center;
gap: 0.5rem;
text-decoration: none;
}
.btn-primary {
background: var(--accent);
color: white;
}
.btn-primary:hover {
background: var(--accent-dark);
transform: translateY(-1px);
box-shadow: var(--shadow-lg);
}
.btn-secondary {
background: var(--surface);
color: var(--text);
border: 1px solid var(--border);
}
.btn-secondary:hover {
background: var(--hover);
border-color: var(--accent);
}
.btn-success {
background: var(--success);
color: white;
}
.btn-danger {
background: var(--danger);
color: white;
}
/* AI Coaching Panel */
.ai-panel {
position: fixed;
right: 0;
top: 0;
bottom: 0;
width: 360px;
background: var(--surface);
border-left: 1px solid var(--border);
display: flex;
flex-direction: column;
z-index: var(--z-panel);
transform: translateX(100%);
transition: transform 0.3s ease;
}
.ai-panel.active {
transform: translateX(0);
}
.ai-header {
padding: 1.5rem;
border-bottom: 1px solid var(--border);
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
}
.ai-title {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 1.125rem;
font-weight: 700;
margin-bottom: 0.25rem;
}
.ai-subtitle {
font-size: 0.875rem;
opacity: 0.9;
}
.ai-content {
flex: 1;
overflow-y: auto;
padding: 1.5rem;
}
.ai-suggestion {
background: rgba(59,130,246,0.05);
border-left: 3px solid var(--accent);
padding: 1rem;
border-radius: var(--radius);
margin-bottom: 1rem;
}
.ai-suggestion-title {
font-weight: 600;
font-size: 0.875rem;
margin-bottom: 0.5rem;
color: var(--accent);
}
.ai-suggestion-text {
font-size: 0.875rem;
line-height: 1.6;
color: var(--text);
}
.ai-score {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem;
background: var(--hover);
border-radius: var(--radius);
margin-bottom: 1rem;
}
.ai-score-label {
font-size: 0.875rem;
font-weight: 600;
}
.ai-score-value {
font-size: 1.5rem;
font-weight: 800;
color: var(--accent);
}
/* Toggle Button */
.ai-toggle {
position: fixed;
right: 1rem;
bottom: 1rem;
width: 56px;
height: 56px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
border-radius: 50%;
font-size: 1.5rem;
cursor: pointer;
box-shadow: var(--shadow-xl);
z-index: var(--z-panel-sub);
transition: all 0.2s;
}
.ai-toggle:hover {
transform: scale(1.1);
}
/* Table */
.table-container {
overflow-x: auto;
}
table {
width: 100%;
border-collapse: collapse;
}
thead {
background: var(--hover);
}
th {
padding: 1rem;
text-align: left;
font-weight: 600;
font-size: 0.875rem;
color: var(--text-light);
border-bottom: 1px solid var(--border);
}
td {
padding: 1rem;
border-bottom: 1px solid var(--border);
font-size: 0.875rem;
}
tr:hover {
background: var(--hover);
}
.status-badge {
padding: 0.25rem 0.75rem;
border-radius: var(--radius);
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.status-new { background: #dbeafe; color: #1e40af; }
.status-contacted { background: #fef3c7; color: #92400e; }
.status-follow-up { background: #e0e7ff; color: #3730a3; }
.status-appointment { background: #fce7f3; color: #831843; }
.status-qualified { background: #d1fae5; color: #065f46; }
.status-closed { background: #dcfce7; color: #14532d; }
.status-lost { background: #fee2e2; color: #991b1b; }
/* Responsive */
@media (max-width: 768px) {
.sidebar {
transform: translateX(-100%);
}
.sidebar.active {
transform: translateX(0);
}
.main-content {
margin-left: 0;
}
.ai-panel {
width: 100%;
}
.stats-grid {
grid-template-columns: 1fr;
}
}
/* Hidden views */
.view {
display: none;
}
.view.active {
display: block;
}
/* Call Tracker Modal */
.modal-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.7);
z-index: var(--z-modal);
align-items: center;
justify-content: center;
backdrop-filter: blur(4px);
}
.modal-overlay.active {
display: flex;
animation: fadeIn 0.2s;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.modal-container {
background: var(--surface);
border-radius: var(--radius);
max-width: 1200px;
width: 95%;
max-height: 90vh;
overflow: hidden;
box-shadow: var(--shadow-xl);
animation: slideUp 0.3s;
}
@keyframes slideUp {
from { transform: translateY(20px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
@keyframes slideIn {
from { transform: translateX(100%); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
@keyframes fadeOut {
from { opacity: 1; }
to { opacity: 0; }
}
.modal-header {
padding: 1.5rem 2rem;
border-bottom: 1px solid var(--border);
display: flex;
justify-content: space-between;
align-items: center;
background: var(--hover);
}
.modal-title {
font-size: 1.25rem;
font-weight: 700;
}
.lead-unsaved-badge {
display: inline-flex;
align-items: center;
margin-left: auto;
margin-right: 0.5rem;
padding: 0.25rem 0.6rem;
border-radius: 999px;
border: 1px solid rgba(251, 146, 60, 0.45);
background: rgba(251, 146, 60, 0.15);
color: #c2410c;
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.modal-close {
background: none;
border: none;
font-size: 1.5rem;
cursor: pointer;
color: var(--text-light);
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
transition: all 0.2s;
}
.modal-close:hover {
background: var(--surface);
color: var(--text);
}
.modal-body {
padding: 2rem;
max-height: calc(90vh - 100px);
overflow-y: auto;
}
.tracker-grid {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.tracker-main {
display: flex;
flex-direction: column;
gap: 1.5rem;
padding-bottom: 0;
}
.tracker-contact-overview {
background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(248,250,252,0.92));
border: 1px solid var(--border);
border-radius: 14px;
padding: 0.95rem 1rem;
box-shadow: var(--shadow-sm);
display: grid;
gap: 0.75rem;
}
.tracker-contact-info {
border-top: 0;
padding-top: 0;
display: grid;
gap: 0.45rem;
}
.tracker-contact-info__title {
display: inline-flex;
align-items: center;
gap: 0.45rem;
margin: 0;
font-size: 0.8rem;
font-weight: 700;
color: var(--text-light);
letter-spacing: 0.02em;
text-transform: uppercase;
}
.tracker-contact-info__title i {
color: var(--accent);
font-size: 0.78rem;
}
.tracker-contact-compact {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.5rem 0.55rem;
}
.tracker-contact-pill {
border: 1px solid rgba(148, 163, 184, 0.3);
border-radius: 10px;
background: rgba(255, 255, 255, 0.85);
padding: 0.35rem 0.52rem;
display: grid;
gap: 0.08rem;
min-width: 0;
}
.tracker-contact-pill__label {
font-size: 0.66rem;
color: var(--text-light);
font-weight: 700;
letter-spacing: 0.015em;
line-height: 1.2;
text-transform: uppercase;
}
.tracker-contact-pill > span:not(.tracker-contact-pill__label) {
font-size: 0.83rem;
color: var(--text);
font-weight: 650;
line-height: 1.25;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.tracker-contact-hidden {
display: none;
}
.tracker-research-context {
border: 1px solid var(--border);
border-radius: 12px;
background: #f8fafc;
padding: 0.7rem 0.75rem;
margin-bottom: 0.6rem;
display: grid;
gap: 0.6rem;
}
.tracker-research-context__head {
display: inline-flex;
align-items: center;
gap: 0.45rem;
font-size: 0.82rem;
font-weight: 700;
color: var(--text);
}
.tracker-research-context__head i {
color: var(--accent);
}
.tracker-research-context__meta {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.5rem;
}
.tracker-research-context__pill {
border: 1px solid var(--border);
border-radius: 10px;
background: var(--surface);
padding: 0.4rem 0.55rem;
display: grid;
gap: 0.18rem;
min-width: 0;
}
.tracker-research-context__label {
font-size: 0.68rem;
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--text-light);
font-weight: 700;
line-height: 1.2;
}
.tracker-research-context__value {
font-size: 0.8rem;
color: var(--text);
font-weight: 600;
line-height: 1.32;
overflow-wrap: anywhere;
}
.tracker-research-context__next {
border: 1px dashed var(--border);
border-radius: 10px;
background: var(--surface);
padding: 0.55rem;
display: flex;
align-items: center;
gap: 0.55rem;
}
.tracker-research-context__next-copy {
flex: 1;
min-width: 0;
display: grid;
gap: 0.15rem;
}
.tracker-research-context__next-copy strong {
font-size: 0.82rem;
color: var(--text);
line-height: 1.3;
font-weight: 700;
overflow-wrap: anywhere;
}
#trackerResearchApplyQuestion[disabled] {
opacity: 0.6;
cursor: not-allowed;
}
.tracker-precall-research-inline {
margin-top: 0.55rem;
padding-top: 0.55rem;
border-top: 1px solid var(--border);
}
.tracker-precall-inline-checks {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
align-items: center;
gap: 0.5rem 0.9rem;
margin-bottom: 0.55rem;
}
.tracker-precall-inline-item {
display: inline-flex;
align-items: center;
gap: 0.42rem;
white-space: nowrap;
min-width: 0;
cursor: pointer;
color: var(--text);
font-size: 0.8rem;
font-weight: 600;
}
.tracker-precall-inline-item input {
margin: 0;
accent-color: var(--accent);
}
.tracker-precall-research__head {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 0.8rem;
font-weight: 700;
color: var(--text);
margin-bottom: 0.5rem;
}
.tracker-precall-research__head i {
color: var(--accent);
}
#dynamicPreCallResearchSection {
display: grid;
gap: 0.6rem;
}
#dynamicPreCallResearchSection .tracker-section {
margin-bottom: 0;
}
.tracker-question-modules {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1rem;
align-items: start;
}
.tracker-question-module {
min-width: 0;
}
.tracker-question-module--script .form-section {
height: 100%;
margin: 0;
}
.tracker-question-module--spin,
.tracker-question-module--meddic {
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--surface);
padding: 0.85rem;
box-shadow: var(--shadow-sm);
max-height: calc(90vh - 270px);
overflow-y: auto;
}
#dynamicSpinSections,
#dynamicMeddicSections {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.tracker-question-module__head {
padding: 0.25rem 0.15rem 0.55rem;
border-bottom: 1px solid var(--border);
margin-bottom: 0.65rem;
}
.tracker-question-module__title {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 0.95rem;
font-weight: 700;
color: var(--text);
}
.tracker-question-module__title i {
color: var(--accent);
font-size: 0.9rem;
}
.tracker-question-module__subtitle {
margin: 0.35rem 0 0;
color: var(--text-light);
font-size: 0.78rem;
line-height: 1.35;
}
.tracker-question-module__empty {
border: 1px dashed var(--border);
border-radius: var(--radius);
padding: 0.7rem 0.8rem;
color: var(--text-light);
font-size: 0.82rem;
background: var(--hover);
}
.tracker-question-module__stack-sep {
height: 1px;
background: var(--border);
margin: 0.5rem 0;
}
.tracker-post-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
align-items: start;
}
.tracker-objections-list {
display: grid;
gap: 0.55rem;
}
.tracker-objection-item {
display: flex;
align-items: flex-start;
gap: 0.5rem;
cursor: pointer;
}
.tracker-objection-item input {
margin-top: 0.25rem;
accent-color: var(--accent);
}
.tracker-objection-item div {
font-size: 0.875rem;
}
.tracker-objection-item em {
color: var(--text-light);
}
.tracker-status-label {
display: flex;
justify-content: space-between;
align-items: center;
gap: 0.5rem;
}
#aiStatusSuggestion {
font-size: 0.75rem;
color: var(--accent);
font-weight: 600;
text-align: right;
}
.tracker-interest-value {
text-align: center;
font-weight: 700;
font-size: 1.25rem;
color: var(--accent);
}
.tracker-sidebar {
background: var(--hover);
padding: 1.25rem;
border-radius: var(--radius);
border: 1px solid var(--border);
position: static;
max-height: none;
overflow: visible;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 1rem;
align-items: stretch;
}
.tracker-sidebar > .ai-suggestion-box {
grid-column: auto;
margin-bottom: 0;
}
.tracker-sidebar > div {
margin-bottom: 0 !important;
height: 100%;
}
.form-section {
background: var(--surface);
padding: 1.5rem;
border-radius: var(--radius);
border: 1px solid var(--border);
}
.form-section h3 {
font-size: 1rem;
font-weight: 700;
margin-bottom: 1rem;
padding-bottom: 0.75rem;
border-bottom: 2px solid var(--primary);
}
/* SPIN/MEDDIC Tracker Sections */
.tracker-methodology-banner {
margin: 0 0 0.6rem;
padding: 0.65rem 0.8rem;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--hover);
}
.tracker-methodology-banner__title {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 0.82rem;
font-weight: 700;
color: var(--text);
}
.tracker-methodology-banner__icon {
color: var(--accent);
}
.tracker-methodology-banner__subtitle {
margin: 0.25rem 0 0;
font-size: 0.76rem;
color: var(--text-light);
}
.tracker-section {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
margin-bottom: 0.9rem;
overflow: hidden;
box-shadow: var(--shadow-sm);
}
.tracker-section .section-header {
padding: 0.9rem 1.1rem;
background: var(--surface);
cursor: pointer;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
border-bottom: 1px solid var(--border);
transition: background-color 0.2s ease;
}
.tracker-section .section-header:hover {
background: var(--hover);
}
.tracker-section__header-main {
flex: 1;
min-width: 0;
}
.tracker-section__title {
display: inline-flex;
align-items: center;
gap: 0.55rem;
color: var(--text);
}
.tracker-section__title i {
color: var(--accent);
font-size: 0.95rem;
line-height: 1;
}
.tracker-section .section-header strong {
font-size: 0.95rem;
color: var(--text);
font-weight: 700;
line-height: 1.3;
}
.tracker-section__description {
display: block;
margin-top: 0.25rem;
font-size: 0.78rem;
color: var(--text-light);
font-weight: 500;
line-height: 1.35;
}
.tracker-section .section-chevron {
font-size: 1.05rem;
color: var(--text-light);
transition: transform 0.2s ease;
font-weight: 700;
margin-top: 0.15rem;
flex-shrink: 0;
}
.tracker-section.collapsed .section-chevron {
transform: rotate(-90deg);
}
.tracker-section .section-body {
padding: 1rem 1.1rem 1.05rem;
background: var(--surface);
}
.tracker-section.collapsed .section-body {
display: none;
}
.tracker-field {
margin-bottom: 0.85rem;
}
.tracker-field:last-child {
margin-bottom: 0;
}
.tracker-input--readonly {
background: var(--hover);
cursor: not-allowed;
}
.tracker-input--calculated {
font-weight: 700;
color: var(--accent);
letter-spacing: 0.01em;
}
.tracker-checkbox {
display: inline-flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
user-select: none;
color: var(--text);
font-size: 0.875rem;
font-weight: 500;
}
.tracker-checkbox__input {
width: 16px;
height: 16px;
accent-color: var(--accent);
margin: 0;
flex-shrink: 0;
}
.tracker-checkbox__label {
line-height: 1.35;
}
/* ROI Calculator Highlight */
#section-roi {
border-color: rgba(59, 130, 246, 0.45);
box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.08), var(--shadow-sm);
}
#section-roi .section-header {
background: rgba(59, 130, 246, 0.06);
}
.form-group {
margin-bottom: 1rem;
}
.form-group label {
display: block;
font-size: 0.875rem;
font-weight: 600;
margin-bottom: 0.5rem;
color: var(--text);
}
.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
padding: 0.75rem;
border: 1px solid var(--border);
border-radius: var(--radius);
font-size: 0.875rem;
font-family: 'Inter', sans-serif;
}
/* Call Tracker answer fields: consistent comfortable height */
textarea.cc-autogrow{
resize:none;
overflow-y:auto;
padding:0.4rem 0.55rem;
line-height:1.35;
min-height:44px;
height:44px;
}
/* Call Tracker: consistent height for all answer fields */
#callTrackerModal textarea.cc-autogrow{
height:44px !important;
min-height:44px !important;
padding:0.4rem 0.55rem !important;
line-height:1.35 !important;
overflow-y:auto !important;
font-size:0.82rem !important;
}
#callTrackerModal textarea.cc-autogrow::-webkit-scrollbar{ height:6px; width:6px; }
#callTrackerModal textarea.cc-autogrow{ scrollbar-width:thin; }
/* Compact variant voor specifieke velden indien nodig */
textarea.cc-autogrow.cc-autogrow-compact{
padding:0.4rem 0.55rem;
line-height:1.35;
min-height:44px;
height:44px;
font-size:0.82rem;
}
.form-group textarea {
resize: vertical;
min-height: 80px;
}
#callTrackerModal .form-section{
padding:1rem 1.1rem;
}
#callTrackerModal .form-section h3{
margin-bottom:0.7rem;
padding-bottom:0.5rem;
font-size:0.95rem;
}
#callTrackerModal .form-group{
margin-bottom:0.7rem;
}
#callTrackerModal .form-group label{
margin-bottom:0.35rem;
font-size:0.8rem;
}
#callTrackerModal .form-group input,
#callTrackerModal .form-group select,
#callTrackerModal .form-group textarea{
padding:0.5rem 0.6rem;
font-size:0.82rem;
}
#callTrackerModal .script-text{
padding:0.65rem 0.75rem;
margin-bottom:0.65rem;
font-size:0.8rem;
}
#callTrackerModal .tracker-section .section-header{
padding:0.6rem 0.75rem;
}
#callTrackerModal .tracker-section .section-body{
padding:0.75rem 0.8rem 0.8rem;
}
#callTrackerModal .tracker-section .section-header strong{
font-size:0.86rem;
}
#callTrackerModal .tracker-section__description{
font-size:0.74rem;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
}
.script-text {
background: rgba(59,130,246,0.05);
padding: 1rem;
border-left: 3px solid var(--accent);
border-radius: var(--radius);
font-style: italic;
color: var(--text-light);
margin-bottom: 1rem;
transition: background 0.25s, border-color 0.25s;
}
.script-text--personalized {
background: rgba(124,58,237,0.06);
border-left-color: #7c3aed;
color: var(--text);
}
.script-text--personalized::before {
content: 'AI ';
display: inline-flex;
align-items: center;
padding: 0.06rem 0.32rem;
background: linear-gradient(135deg, var(--accent), #7c3aed);
color: #fff;
font-size: 0.58rem;
font-weight: 800;
letter-spacing: 0.04em;
border-radius: 3px;
vertical-align: middle;
margin-right: 0.4rem;
font-style: normal;
text-transform: uppercase;
}
.ai-suggestion-box {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 1rem;
border-radius: var(--radius);
margin-bottom: 1rem;
}
.ai-suggestion-box h4 {
font-size: 0.875rem;
margin-bottom: 0.5rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.ai-suggestion-box p {
font-size: 0.875rem;
line-height: 1.6;
opacity: 0.95;
}
.modal-footer {
padding: 1.5rem 2rem;
border-top: 1px solid var(--border);
display: flex;
gap: 1rem;
justify-content: flex-end;
background: var(--hover);
}
/* Tab Styles */
.tab-btn {
padding: 0.75rem 1.5rem;
border: none;
background: transparent;
border-bottom: 3px solid transparent;
color: var(--text-light);
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
font-size: 0.9375rem;
}
.tab-btn:hover {
color: var(--accent);
background: var(--hover);
}
.tab-btn.active {
color: var(--accent);
border-bottom-color: var(--accent);
}
.lead-tab-pane {
animation: fadeIn 0.2s ease-in;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.pagination {
display: flex;
gap: 0.5rem;
align-items: center;
justify-content: center;
margin-top: 1.5rem;
}
.pagination button {
padding: 0.5rem 1rem;
border: 1px solid var(--border);
background: var(--surface);
border-radius: 6px;
cursor: pointer;
transition: all 0.2s;
}
.pagination button:hover:not(:disabled) {
background: var(--accent);
color: white;
border-color: var(--accent);
}
.pagination button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.pagination button.active {
background: var(--accent);
color: white;
border-color: var(--accent);
}
@media (max-width: 1520px) {
.tracker-question-modules {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.tracker-question-module--script {
grid-column: 1 / -1;
}
.tracker-sidebar {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 1180px) {
.tracker-contact-compact {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.tracker-post-grid {
grid-template-columns: 1fr;
}
.tracker-question-modules {
grid-template-columns: 1fr;
}
.tracker-question-module--script {
grid-column: auto;
}
.tracker-question-module--spin,
.tracker-question-module--meddic {
max-height: none;
}
.tracker-precall-inline-checks {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.tracker-research-context__meta {
grid-template-columns: 1fr;
}
}
@media (max-width: 820px) {
.tracker-contact-compact,
.tracker-post-grid {
grid-template-columns: 1fr;
}
.tracker-precall-inline-checks {
grid-template-columns: 1fr;
}
.tracker-research-context__next {
flex-direction: column;
align-items: stretch;
}
}
@media (max-width: 1024px) {
.tracker-sidebar {
grid-template-columns: 1fr;
}
}
/* Enhanced Lead Detail Modal */
.lead-summary {
display: flex;
gap: 1rem;
align-items: flex-start;
padding: 1rem 1.25rem;
border: 1px solid var(--border);
border-radius: 14px;
background: linear-gradient(180deg, rgba(99,102,241,0.06), rgba(99,102,241,0.02));
margin-bottom: 1.25rem;
}
.lead-avatar {
width: 56px;
height: 56px;
border-radius: 16px;
display: grid;
place-items: center;
font-weight: 800;
letter-spacing: 0.5px;
background: var(--accent);
color: white;
flex: 0 0 auto;
box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
}
.lead-summary-main { flex: 1; min-width: 0; }
.lead-summary-top {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 0.75rem;
align-items: center;
justify-content: space-between;
}
.lead-summary-top h3{
margin: 0;
font-size: 1.15rem;
font-weight: 800;
color: var(--text);
line-height: 1.2;
}
.lead-badges{
display:flex;
gap:0.5rem;
flex-wrap:wrap;
align-items:center;
}
.pill{
display:inline-flex;
align-items:center;
gap:0.35rem;
padding: 0.35rem 0.6rem;
border-radius: 999px;
font-size: 0.8rem;
font-weight: 700;
border: 1px solid var(--border);
background: rgba(255,255,255,0.8);
}
.pill-status{ text-transform: capitalize; }
.pill-score{ }
.lead-summary-sub{
margin-top: 0.35rem;
color: var(--text-light);
font-size: 0.9rem;
display:flex;
flex-wrap:wrap;
gap:0.5rem;
align-items:center;
}
.lead-actions-row{
margin-top: 0.85rem;
display:flex;
gap:0.5rem;
flex-wrap:wrap;
}
.btn-sm{
padding: 0.55rem 0.85rem;
font-size: 0.85rem;
border-radius: 12px;
}
/* Make sure overlays are centered */
.modal-overlay{
align-items: center;
justify-content: center;
padding: 1.5rem;
}
/* Lead Detail "Contact bewerken" layout (2-column like CRM) */
#leadDetailModal { align-items: center !important; justify-content: center !important; padding: 24px !important; }
#leadDetailModal .modal-container {
width: min(980px, calc(100vw - 32px));
height: min(900px, calc(100vh - 48px));
max-height: calc(100vh - 48px);
display: flex;
flex-direction: column;
overflow: hidden !important;
}
#leadDetailModal .modal-body{
flex: 1;
overflow-y: auto;
min-height: 0;
}
.cc-two-col-form {
display: grid;
grid-template-columns: 1fr 1fr;
/* Extra spacing so left/right fields never touch */
column-gap: 1.75rem;
row-gap: 1.15rem;
}
.cc-two-col-form > .cc-col{ min-width:0; }
.cc-two-col-form > .cc-col:first-child{ padding-right: .25rem; }
.cc-two-col-form > .cc-col:last-child{ padding-left: .25rem; }
.cc-inline-2{
display:grid;
grid-template-columns: 1fr 140px;
/* Ensure the left field never touches the right field */
column-gap: 0.9rem;
row-gap: 0.75rem;
margin-bottom: 0.9rem; /* spacing between inline rows */
}
.cc-inline-2 .form-group{ margin-bottom: 0; }
.cc-col > .cc-inline-2:last-child{ margin-bottom: 0; }
.cc-col .form-group { margin-bottom: 0.9rem; }
.cc-toggle-row{
display:flex;
align-items:center;
gap:0.75rem;
padding: 0.6rem 0.75rem;
border: 1px solid var(--border);
border-radius: 10px;
background: var(--hover);
margin-bottom: 0.75rem;
}
.cc-toggle{
position: relative;
width: 46px;
height: 26px;
display:inline-block;
}
.cc-toggle input{ display:none; }
.cc-toggle-ui{
position:absolute; inset:0;
border-radius: 999px;
background: #e5e7eb;
border: 1px solid var(--border);
transition: .2s ease;
}
.cc-toggle-ui:after{
content:'';
position:absolute; top:50%; left:3px;
transform: translateY(-50%);
width: 20px; height:20px;
border-radius: 999px;
background: white;
box-shadow: 0 2px 8px rgba(0,0,0,.12);
transition: .2s ease;
}
.cc-toggle input:checked + .cc-toggle-ui{
background: #10b981;
}
.cc-toggle input:checked + .cc-toggle-ui:after{
left: 23px;
}
@media (max-width: 860px){
.cc-two-col-form{ grid-template-columns: 1fr; }
.cc-inline-2{ grid-template-columns: 1fr 120px; }
}
/* Call Tracker textareas: start compact (2 rows) and auto-grow */
#callTrackerModal textarea{
resize: none;
overflow: hidden;
min-height: 3.25em; /* ~2 lines */
}
/* ========================================
CALL TIMER & AI VOICE AGENT STYLING
======================================== */
.call-controls-bar {
display: flex;
gap: 1rem;
padding: 1rem;
background: linear-gradient(135deg, var(--bg) 0%, var(--border) 100%);
border-bottom: 2px solid #cbd5e1;
}
/* Call Timer */
.call-timer-container {
display: flex;
align-items: center;
gap: 1rem;
padding: 0.75rem 1.5rem;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 8px;
flex: 0 0 auto;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
}
.call-timer-container:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}
.call-timer-container:active {
transform: translateY(0);
}
.call-timer-container.running {
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
animation: pulse-timer 2s infinite;
}
.call-timer-container.paused {
background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}
@keyframes pulse-timer {
0%, 100% {
box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
}
50% {
box-shadow: 0 0 0 8px rgba(16, 185, 129, 0);
}
}
.timer-control-btn {
width: 36px;
height: 36px;
border-radius: 50%;
border: 2px solid white;
background: rgba(255, 255, 255, 0.2);
color: white;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
font-size: 0.875rem;
padding: 0;
}
.timer-control-btn:hover {
background: rgba(255, 255, 255, 0.3);
transform: scale(1.1);
}
.timer-control-btn i {
margin: 0;
}
.timer-display {
display: flex;
align-items: center;
gap: 0.5rem;
color: white;
font-size: 1.5rem;
font-weight: 600;
font-family: 'Courier New', monospace;
}
.timer-icon {
font-size: 1.25rem;
margin-right: 0;
}
.timer-status {
color: rgba(255,255,255,0.8);
font-size: 0.875rem;
font-weight: 500;
}
.timer-status.active {
color: var(--surface);
font-weight: 600;
animation: pulse-status 2s infinite;
}
@keyframes pulse-status {
0%, 100% { opacity: 1; }
50% { opacity: 0.7; }
}
/* AI Voice Agent Container */
.call-quick-notes {
flex: 1;
resize: none;
border: 2px solid var(--border, #cbd5e1);
border-radius: 8px;
padding: 0.6rem 0.85rem;
background: var(--surface, #fff);
color: var(--text);
font-size: 0.85rem;
font-family: inherit;
line-height: 1.5;
min-height: 0;
align-self: stretch;
outline: none;
transition: border-color 0.2s;
}
.call-quick-notes:focus {
border-color: var(--accent, #6366f1);
}
.call-quick-notes::placeholder {
color: var(--muted);
font-style: italic;
}
.ai-voice-container {
flex: 0 0 auto;
background: white;
border: 2px solid #cbd5e1;
border-radius: 8px;
padding: 0.75rem 1.25rem;
}
.ai-toggle {
display: flex;
align-items: center;
gap: 0.75rem;
}
/* Toggle Switch */
.toggle-switch {
position: relative;
display: inline-block;
width: 50px;
height: 24px;
}
.toggle-switch input {
opacity: 0;
width: 0;
height: 0;
}
.toggle-slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #cbd5e1;
transition: 0.3s;
border-radius: 24px;
}
.toggle-slider:before {
position: absolute;
content: "";
height: 18px;
width: 18px;
left: 3px;
bottom: 3px;
background-color: white;
transition: 0.3s;
border-radius: 50%;
}
input:checked + .toggle-slider {
background-color: #4ade80;
}
input:checked + .toggle-slider:before {
transform: translateX(26px);
}
.ai-label {
font-weight: 600;
font-size: 1rem;
color: #1e293b;
}
.ai-status {
margin-left: auto;
padding: 0.35rem 0.85rem;
background: var(--border);
border-radius: 12px;
font-size: 0.875rem;
font-weight: 500;
color: #475569;
}
.ai-status.listening {
background: #4ade80;
color: white;
animation: pulse-listening 2s infinite;
}
@keyframes pulse-listening {
0%, 100% {
opacity: 1;
transform: scale(1);
}
50% {
opacity: 0.85;
transform: scale(1.02);
}
}
/* AI Details (Transcript & Confidence) */
.ai-details {
padding: 0 1rem 1rem 1rem;
background: var(--bg);
border-bottom: 1px solid var(--border);
}
.ai-transcript-preview {
background: white;
border: 1px solid #cbd5e1;
border-radius: 6px;
padding: 0.75rem;
margin-bottom: 0.75rem;
max-height: 120px;
overflow-y: auto;
}
.transcript-header {
font-size: 0.75rem;
font-weight: 600;
color: var(--muted);
margin-bottom: 0.5rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.transcript-text {
font-size: 0.875rem;
line-height: 1.6;
color: #334155;
}
.transcript-text .interim {
color: #94a3b8;
font-style: italic;
}
/* Confidence Bar */
.ai-confidence-bar {
display: flex;
align-items: center;
gap: 0.75rem;
}
.confidence-label {
font-size: 0.875rem;
font-weight: 600;
color: var(--muted);
min-width: 110px;
}
.confidence-progress {
flex: 1;
height: 10px;
background: var(--border);
border-radius: 5px;
overflow: hidden;
}
.confidence-fill {
height: 100%;
background: linear-gradient(90deg, #4ade80 0%, #22c55e 100%);
transition: width 0.5s ease;
border-radius: 5px;
}
.confidence-value {
font-size: 0.875rem;
font-weight: 700;
color: #22c55e;
min-width: 45px;
text-align: right;
}
/* AI Filled Field Animation */
@keyframes aiHighlight {
0% {
background-color: white;
border-color: var(--border);
}
20% {
background-color: #d1fae5;
border-color: #22c55e;
}
100% {
background-color: white;
border-color: var(--border);
}
}
.ai-filled {
animation: aiHighlight 2s ease;
}
/* Responsive adjustments */
@media (max-width: 768px) {
.call-controls-bar {
flex-direction: column;
}
.call-timer-container {
width: 100%;
justify-content: space-between;
}
}
/* ========================================
FONT AWESOME ICON STYLING
======================================== */
/* General icon spacing */
i.fas, i.far, i.fab {
margin-right: 0.5rem;
}
/* Icons in buttons */
.btn i.fas {
margin-right: 0.35rem;
}
/* Icons in headings */
h2 i.fas, h3 i.fas, h4 i.fas {
margin-right: 0.5rem;
opacity: 0.9;
}
/* Status icons with colors */
.ai-status.listening::before {
content: "\f130"; /* fa-microphone */
font-family: "Font Awesome 6 Free";
font-weight: 900;
margin-right: 0.35rem;
}
.ai-status.error::before {
content: "\f06a"; /* fa-exclamation-circle */
font-family: "Font Awesome 6 Free";
font-weight: 900;
margin-right: 0.35rem;
}
.ai-status.success::before {
content: "\f058"; /* fa-check-circle */
font-family: "Font Awesome 6 Free";
font-weight: 900;
margin-right: 0.35rem;
}
/* Timer icon */
.timer-icon {
font-size: 1.25rem;
margin-right: 0.5rem;
}
/* Icon colors for different states */
.fa-check-circle {
color: #22c55e;
}
.fa-times-circle {
color: #ef4444;
}
.fa-exclamation-triangle {
color: #f59e0b;
}
.fa-info-circle {
color: var(--accent);
}
/* Icon sizing utilities */
.icon-sm {
font-size: 0.875rem;
}
.icon-md {
font-size: 1rem;
}
.icon-lg {
font-size: 1.25rem;
}
.icon-xl {
font-size: 1.5rem;
}
/* ========================================
SORTABLE TABLE COLUMNS
======================================== */
th.sortable {
cursor: pointer;
user-select: none;
transition: background 0.2s ease;
position: relative;
white-space: nowrap;
}
th.sortable:hover {
background: rgba(59, 130, 246, 0.05);
}
th.sortable:active {
background: rgba(59, 130, 246, 0.1);
}
/* Table header styling */
table thead th {
background: var(--card-bg);
border-bottom: 2px solid var(--border);
padding: 0.75rem 1rem;
font-size: 0.875rem;
color: var(--text);
font-weight: 600;
text-transform: none;
letter-spacing: 0.01em;
}
table thead th:first-child {
border-top-left-radius: var(--radius);
}
table thead th:last-child {
border-top-right-radius: var(--radius);
}
.sort-icon {
margin-left: 0.35rem;
font-size: 0.7rem;
opacity: 0.3;
transition: all 0.2s ease;
flex-shrink: 0;
}
th.sortable:hover .sort-icon {
opacity: 0.6;
color: var(--accent);
}
.sort-icon.active {
opacity: 1;
color: var(--accent);
}
.fa-sort-up {
color: var(--accent);
}
.fa-sort-down {
color: var(--accent);
}
/* ========================================
AI ANALYSIS MODAL STYLING
======================================== */
.analysis-section {
margin-bottom: 2rem;
}
.section-title {
font-size: 1.125rem;
font-weight: 700;
margin-bottom: 1rem;
color: var(--text);
display: flex;
align-items: center;
gap: 0.5rem;
}
.section-title i {
color: var(--accent);
}
.analysis-card {
background: white;
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 1.5rem;
line-height: 1.6;
}
.insights-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1rem;
}
.insight-card {
background: linear-gradient(135deg, var(--bg) 0%, var(--border) 100%);
border-left: 4px solid var(--accent);
padding: 1rem;
border-radius: var(--radius);
}
.insight-label {
font-size: 0.75rem;
text-transform: uppercase;
font-weight: 600;
color: var(--text-light);
margin-bottom: 0.5rem;
letter-spacing: 0.5px;
}
.insight-value {
font-size: 1.125rem;
font-weight: 600;
color: var(--text);
}
.action-recommendation {
background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
border: 2px solid var(--accent);
border-radius: var(--radius);
padding: 1.5rem;
}
.action-recommendation .action-type {
display: inline-block;
background: var(--accent);
color: white;
padding: 0.25rem 0.75rem;
border-radius: 12px;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
margin-bottom: 0.75rem;
}
.action-recommendation .action-text {
font-size: 1rem;
line-height: 1.6;
color: #1e40af;
}
.action-recommendation .action-reason {
margin-top: 0.75rem;
font-size: 0.875rem;
color: #60a5fa;
font-style: italic;
}
.task-creator {
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 1.5rem;
}
.status-recommendation {
display: flex;
align-items: center;
gap: 1rem;
background: white;
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 1.5rem;
}
.status-recommendation .current-status,
.status-recommendation .recommended-status {
flex: 1;
text-align: center;
padding: 1rem;
border-radius: var(--radius);
}
.status-recommendation .current-status {
background: #fee2e2;
border: 2px solid #ef4444;
}
.status-recommendation .recommended-status {
background: #dcfce7;
border: 2px solid #22c55e;
}
.status-recommendation .arrow {
font-size: 2rem;
color: var(--text-light);
}
.status-label {
font-size: 0.75rem;
text-transform: uppercase;
font-weight: 600;
color: var(--text-light);
margin-bottom: 0.5rem;
}
.status-value {
font-size: 1.25rem;
font-weight: 700;
}
.status-reason {
margin-top: 0.5rem;
font-size: 0.875rem;
color: var(--text-light);
}
/* Spinner for loading state */
.spinner {
border: 4px solid #f3f4f6;
border-top: 4px solid var(--accent);
border-radius: 50%;
width: 50px;
height: 50px;
animation: spin 1s linear infinite;
margin: 0 auto;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* ========================================
BULK SELECTION FEATURES
======================================== */
th input[type="checkbox"],
td input[type="checkbox"] {
cursor: pointer;
width: 16px;
height: 16px;
margin: 0;
}
tbody tr.selected {
background: rgba(59, 130, 246, 0.1);
}
tbody tr.selected:hover {
background: rgba(59, 130, 246, 0.15);
}
/* Activity Indicators */
.activity-indicator {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
margin-left: 0.5rem;
}
.activity-indicator.hot {
background: #ef4444;
animation: pulse-activity 2s infinite;
}
.activity-indicator.warm {
background: #f59e0b;
}
.activity-indicator.cold {
background: var(--muted);
}
@keyframes pulse-activity {
0%, 100% {
opacity: 1;
transform: scale(1);
}
50% {
opacity: 0.5;
transform: scale(1.2);
}
}
/* Task Badges */
.task-badge {
display: inline-block;
background: var(--accent);
color: white;
padding: 0.15rem 0.4rem;
border-radius: 10px;
font-size: 0.7rem;
font-weight: 600;
margin-left: 0.5rem;
}
.task-badge.overdue {
background: #ef4444;
animation: pulse-task 1.5s infinite;
}
.task-badge.today {
background: #f59e0b;
}
.task-badge.upcoming {
background: var(--accent);
}
.lead-row-actions {
display: inline-flex;
align-items: center;
gap: 0.35rem;
}
.lead-row-action-btn {
min-width: 34px;
width: 34px;
padding: 0;
justify-content: center;
border-radius: 10px;
transition: transform .15s ease, box-shadow .15s ease;
}
.lead-row-action-btn i.fas {
margin-right: 0 !important;
}
.lead-row-action-btn.c-btn--primary i.fas,
.lead-row-action-btn.c-btn--primary .fa-phone {
color: var(--surface) !important;
}
.lead-row-action-btn:hover {
transform: translateY(-1px);
box-shadow: var(--shadow-sm);
}
.lead-row-action-btn:focus-visible {
outline: 2px solid rgba(59, 130, 246, 0.35);
outline-offset: 2px;
}
.lead-followup-assist {
border: 1px solid var(--border);
background: var(--surface);
border-radius: 12px;
padding: 0.8rem 0.95rem;
margin-bottom: 1rem;
box-shadow: var(--shadow-sm);
}
.lead-followup-assist__title {
font-size: 0.82rem;
font-weight: 800;
letter-spacing: .03em;
text-transform: uppercase;
color: var(--text-light);
margin-bottom: 0.35rem;
}
.lead-followup-assist__content {
font-size: 0.88rem;
color: var(--text);
}
.lead-followup-assist__content strong {
display: block;
margin-bottom: 0.2rem;
}
.lead-followup-assist__actions {
margin-top: 0.65rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
flex-wrap: wrap;
}
.lead-followup-assist__chip {
display: inline-flex;
align-items: center;
padding: 0.22rem 0.6rem;
border-radius: 999px;
border: 1px solid var(--border);
background: var(--hover);
color: var(--text-light);
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
}
.lead-task-template-row,
.lead-notes-template-row {
display: flex;
align-items: flex-end;
gap: 0.5rem;
flex-wrap: wrap;
margin-bottom: 0.85rem;
}
#leadTab-notes{
display: flex;
flex-direction: column;
gap: 0.85rem;
}
#leadTab-notes .lead-notes-template-row{
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: end;
gap: 0.75rem;
margin-bottom: 0;
}
#leadTab-notes .lead-notes-template-row .form-group{
margin: 0 !important;
min-width: 0;
}
#leadTab-notes .form-group{
margin-bottom: 0;
}
#leadTab-notes .lead-notes-template-row .btn{
align-self: end;
white-space: nowrap;
}
#leadTab-notes #ld_notes{
min-height: 220px;
}
#leadTab-notes .cc-notes-bottombar{
margin-top: 0.1rem;
padding-top: 0.85rem;
}
.lead-mini-timeline-wrap {
margin-top: 1rem;
border-top: 1px solid var(--border);
padding-top: 0.9rem;
}
.lead-mini-timeline-title {
font-size: 0.86rem;
font-weight: 800;
color: var(--text-light);
text-transform: uppercase;
letter-spacing: .03em;
margin-bottom: 0.55rem;
display: inline-flex;
gap: 0.45rem;
align-items: center;
}
.lead-mini-timeline {
display: flex;
flex-direction: column;
gap: 0.45rem;
max-height: 260px;
overflow: auto;
padding-right: 2px;
}
.lead-mini-timeline-item {
display: grid;
grid-template-columns: 26px 1fr auto;
gap: 0.6rem;
align-items: center;
border: 1px solid var(--border);
border-radius: 10px;
padding: 0.45rem 0.6rem;
background: var(--surface);
}
.lead-mini-timeline-icon {
width: 24px;
height: 24px;
border-radius: 999px;
background: rgba(59, 130, 246, 0.12);
color: #2563eb;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.74rem;
}
.lead-mini-timeline-title-line {
font-size: 0.84rem;
font-weight: 700;
color: var(--text);
line-height: 1.2;
}
.lead-mini-timeline-meta {
font-size: 0.76rem;
color: var(--text-light);
margin-top: 0.1rem;
line-height: 1.25;
}
.lead-mini-timeline-time {
font-size: 0.72rem;
color: var(--text-light);
font-weight: 700;
white-space: nowrap;
}
.lead-mini-timeline-empty {
border: 1px dashed var(--border);
border-radius: 10px;
padding: 0.75rem;
color: var(--text-light);
font-size: 0.8rem;
text-align: center;
background: var(--surface);
}
@media (max-width: 1024px) {
.lead-row-actions {
gap: 0.3rem;
}
.lead-row-action-btn {
min-width: 32px;
width: 32px;
height: 32px;
}
.lead-followup-assist__actions {
justify-content: flex-start;
}
}
@media (max-width: 768px) {
.lead-task-template-row,
.lead-notes-template-row {
flex-direction: column;
align-items: stretch;
}
#leadTab-notes .lead-notes-template-row{
grid-template-columns: 1fr;
}
.lead-task-template-row .btn,
.lead-notes-template-row .btn {
width: 100%;
justify-content: center;
}
.lead-mini-timeline-item {
grid-template-columns: 22px 1fr;
}
.lead-mini-timeline-time {
grid-column: 2;
font-size: 0.7rem;
margin-top: 0.1rem;
}
}
@keyframes pulse-task {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.6;
}
}
/* ============================================
DASHBOARD WIDGET SYSTEM
============================================ */
/* Dashboard Container */
.dashboard-container {
position: relative;
min-height: 600px;
}
/* Dashboard Grid */
.dashboard-grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-auto-rows: 120px;
gap: 1.5rem;
position: relative;
}
/* CC: Extra top margin for specific widgets (match bottom widget spacing) */
#widget-tasks,
#widget-agenda,
#widget-hotleads{
margin-top: 1.5rem;
}
/* On smaller screens where widgets stack, keep spacing consistent */
@media (max-width: 1024px){
#widget-tasks,
#widget-agenda,
#widget-hotleads{
margin-top: 1.25rem;
}
}
/* CC: Personaliseer (Branding) view same width + side gutters as dashboard widgets */
.cc-branding-wrap{
max-width: 1200px;
margin-left: auto;
margin-right: auto;
padding-left: var(--cc-widget-gap);
padding-right: var(--cc-widget-gap);
box-sizing: border-box;
}
@media (max-width: 899px){
.cc-branding-wrap{
max-width: none;
padding-left: 0;
padding-right: 0;
}
}
/* CC: Leads view same width + side gutters as dashboard widgets */
.cc-leads-wrap{
max-width: 1200px;
margin-left: auto;
margin-right: auto;
margin-top: 1.25rem;
padding-left: var(--cc-widget-gap);
padding-right: var(--cc-widget-gap);
box-sizing: border-box;
}
#view-leads .cc-leads-wrap > *{ width: 100%; }
@media (max-width: 899px){
.cc-leads-wrap{
max-width: none;
padding-left: 0;
padding-right: 0;
}
}
/* With wrapper in place, remove any extra side-margins on leads cards so gutters are controlled by wrapper */
#view-leads .cc-leads-filters-card,
#view-leads .cc-leads-table-card{
margin-left: 0 !important;
margin-right: 0 !important;
width: 100%;
max-width: none;
}
/* CC: Analytics view same width + side gutters as dashboard widgets */
.cc-analytics-wrap{
max-width: 1200px;
margin-left: auto;
margin-right: auto;
padding-left: var(--cc-widget-gap);
padding-right: var(--cc-widget-gap);
box-sizing: border-box;
}
/* Make inner grids/cards fill the wrapper width */
#view-analytics .cc-analytics-wrap > *{
width: 100%;
}
@media (max-width: 899px){
.cc-analytics-wrap{
max-width: none;
padding-left: 0;
padding-right: 0;
}
}
/* CC: Personaliseren view same width + side gutters as dashboard widgets (same method as Analytics) */
.cc-branding-wrap{
max-width: 1200px;
margin-left: auto;
margin-right: auto;
padding-left: var(--cc-widget-gap);
padding-right: var(--cc-widget-gap);
box-sizing: border-box;
}
@media (max-width: 899px){
.cc-branding-wrap{
max-width: none;
padding-left: 0;
padding-right: 0;
}
}
/* CC: Leads list smaller + same side margins as dashboard widget gaps */
:root{
--cc-widget-gap: 1.5rem; /* matches dashboard-grid gap */
}
.cc-leads-table-card{
/* Keep the list a bit narrower for readability */
max-width: 1200px;
/* Same left/right spacing as dashboard widget gaps */
margin-left: var(--cc-widget-gap) !important;
margin-right: var(--cc-widget-gap) !important;
/* Center the card within the view when there's space */
margin-top: 0;
margin-bottom: 1rem;
}
/* Ensure it can still center inside the view */
.content-area .view .cc-leads-table-card{
margin-left: auto;
margin-right: auto;
}
/* But keep the visual gutters equal to widget gaps */
@media (min-width: 900px){
.content-area .view .cc-leads-table-card{
width: calc(100% - (var(--cc-widget-gap) * 2));
}
}
@media (max-width: 899px){
.content-area .view .cc-leads-table-card{
width: 100%;
margin-left: 0 !important;
margin-right: 0 !important;
}
}
/* CC: Ensure consistent spacing between all dashboard widgets */
.dashboard-grid{
row-gap: 1.5rem;
column-gap: 1.5rem;
align-content: start;
padding-bottom: 1.5rem;
}
/* If any widget uses zero margin collapsing internally, enforce a clean separation */
.dashboard-widget{
margin: 0;
}
/* Dashboard Widget */
.dashboard-widget {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 1.25rem;
position: relative;
overflow: hidden;
transition: box-shadow 0.2s, transform 0.1s;
}
.dashboard-widget:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
/* Widget in Edit Mode */
.dashboard-widget.edit-mode {
cursor: move;
border: 2px dashed var(--accent);
}
.dashboard-widget.edit-mode:hover {
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.dashboard-widget.dragging {
opacity: 0.5;
cursor: grabbing;
}
/* Widget Header */
.widget-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
padding-bottom: 0.75rem;
border-bottom: 1px solid var(--border);
}
.widget-title {
font-size: 0.9rem;
font-weight: 600;
color: var(--text);
display: flex;
align-items: center;
gap: 0.5rem;
}
.widget-title i {
font-size: 0.85rem;
color: var(--accent);
}
/* CC: Ensure Opvolgtaken widget header matches other dashboard widgets (prevent accidental overrides) */
#widget-tasks .widget-header{
display:flex;
justify-content:space-between;
align-items:center;
}
#widget-tasks .widget-title{
display:flex;
align-items:center;
gap:0.5rem;
}
#widget-tasks .widget-title i{ order:0; }
#widget-tasks .widget-actions{
display:flex;
align-items:center;
gap:0.25rem;
}
.widget-actions {
display: flex;
gap: 0.25rem;
}
.widget-last-updated {
font-size: 0.7rem;
color: var(--text-light);
font-weight: 600;
margin-right: 0.2rem;
white-space: nowrap;
}
.widget-action-btn {
width: 24px;
height: 24px;
border: none;
background: transparent;
color: var(--text-light);
border-radius: 4px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.75rem;
transition: all 0.2s;
}
.widget-action-btn:hover {
background: var(--hover);
color: var(--accent);
}
/* Widget Body */
.widget-body {
overflow-y: auto;
height: calc(100% - 3rem);
}
/* Widget Resize Handles */
.resize-handle {
position: absolute;
background: var(--accent);
opacity: 0;
transition: opacity 0.2s;
}
.dashboard-widget.edit-mode .resize-handle {
opacity: 0.6;
}
.resize-handle:hover {
opacity: 1 !important;
}
.resize-handle-right {
right: -3px;
top: 0;
bottom: 0;
width: 6px;
cursor: ew-resize;
}
.resize-handle-bottom {
left: 0;
right: 0;
bottom: -3px;
height: 6px;
cursor: ns-resize;
}
.resize-handle-corner {
right: -3px;
bottom: -3px;
width: 12px;
height: 12px;
cursor: nwse-resize;
border-radius: 0 0 var(--radius) 0;
}
/* Edit Mode Toggle */
.edit-mode-toggle {
position: fixed;
bottom: 2rem;
right: 2rem;
z-index: var(--z-fab);
background: var(--accent);
color: white;
border: none;
padding: 0.75rem 1.25rem;
border-radius: var(--radius);
font-weight: 600;
cursor: pointer;
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
transition: all 0.2s;
display: flex;
align-items: center;
gap: 0.5rem;
}
.edit-mode-toggle:hover {
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
}
.edit-mode-toggle.active {
background: var(--success);
}
/* Widget Content Styles */
.widget-list {
list-style: none;
padding: 0;
margin: 0;
}
.widget-list-item {
padding: 0.6rem 0;
border-bottom: 1px solid var(--border);
font-size: 0.85rem;
display: flex;
justify-content: space-between;
align-items: center;
transition: background 0.2s;
}
.widget-list-item:last-child {
border-bottom: none;
}
.widget-list-item:hover {
background: var(--hover);
margin: 0 -0.5rem;
padding: 0.6rem 0.5rem;
border-radius: 6px;
}
/* Styled checkbox for Tasks widget */
.cc-task-check{
display:flex;
align-items:center;
justify-content:center;
width: 22px;
height: 22px;
flex: 0 0 22px;
cursor: pointer;
}
.cc-task-check input{
position:absolute;
opacity:0;
width:1px;
height:1px;
}
.cc-task-check-ui{
width: 18px;
height: 18px;
border: 2px solid #cbd5e1;
border-radius: 6px;
background: var(--surface);
display:inline-block;
position:relative;
transition: all .15s ease;
}
.cc-task-check input:checked + .cc-task-check-ui{
border-color: var(--primary);
background: var(--primary);
}
.cc-task-check input:checked + .cc-task-check-ui::after{
content:'';
position:absolute;
left:5px;
top:1px;
width:5px;
height:10px;
border: solid var(--surface);
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.cc-task-check input:focus + .cc-task-check-ui{
box-shadow: 0 0 0 3px rgba(59,130,246,.25);
}
.widget-list-item-title {
color: var(--text);
font-weight: 500;
}
.widget-list-item-meta {
color: var(--text-light);
font-size: 0.75rem;
}
.widget-badge {
padding: 0.2rem 0.5rem;
border-radius: 12px;
font-size: 0.7rem;
font-weight: 600;
}
.widget-badge.overdue {
background: rgba(239, 68, 68, 0.1);
color: var(--danger);
}
.widget-badge.today {
background: rgba(251, 146, 60, 0.1);
color: #f97316;
}
.widget-badge.upcoming {
background: rgba(59, 130, 246, 0.1);
color: var(--accent);
}
/* Empty Widget State */
.widget-empty {
text-align: center;
padding: 2rem 1rem;
color: var(--text-light);
font-size: 0.85rem;
}
.widget-empty i {
font-size: 2rem;
margin-bottom: 0.5rem;
opacity: 0.3;
}
.widget-loading {
display: flex;
align-items: center;
justify-content: center;
gap: 0.55rem;
min-height: 88px;
color: var(--text-light);
font-size: 0.84rem;
font-weight: 600;
}
.widget-loading i {
animation: spinWidget .9s linear infinite;
}
@keyframes spinWidget {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* Quick Stats in Widget */
.widget-stat {
text-align: center;
padding: 0.75rem;
}
.widget-stat-value {
font-size: 2rem;
font-weight: 700;
color: var(--accent);
line-height: 1;
}
.widget-stat-label {
font-size: 0.75rem;
color: var(--text-light);
margin-top: 0.25rem;
}
/* Widget Scrollbar */
.widget-body::-webkit-scrollbar {
width: 4px;
}
.widget-body::-webkit-scrollbar-track {
background: transparent;
}
.widget-body::-webkit-scrollbar-thumb {
background: var(--border);
border-radius: 2px;
}
.widget-body::-webkit-scrollbar-thumb:hover {
background: var(--text-lighter);
}
/* CC: RESET column forcing — let all columns size to their content (auto table layout) */
#view-leads .cc-leads-table-card table{
table-layout: auto !important;
}
#view-leads .cc-leads-table-card th,
#view-leads .cc-leads-table-card td{
width: auto !important;
min-width: 0 !important;
}
/* Undo forced last/first column widths from previous tweaks */
#view-leads .cc-leads-table-card th:first-child,
#view-leads .cc-leads-table-card td:first-child,
#view-leads .cc-leads-table-card th:last-child,
#view-leads .cc-leads-table-card td:last-child{
width: auto !important;
}
/* Default: keep compact and readable; allow natural sizing */
#view-leads .cc-leads-table-card th,
#view-leads .cc-leads-table-card td{
white-space: nowrap;
overflow: visible;
text-overflow: clip;
}
/* Let long-text columns wrap so the table can still fit */
#view-leads .cc-leads-table-card td:nth-child(2),
#view-leads .cc-leads-table-card td:nth-child(3),
#view-leads .cc-leads-table-card td:nth-child(5){
white-space: normal;
}
/* CC: Center-align first 4 columns in Leads table (header + cells) */
#view-leads .cc-leads-table-card table th:nth-child(-n+4),
#view-leads .cc-leads-table-card table td:nth-child(-n+4){
text-align: center !important;
vertical-align: middle;
}
/* Center inputs/selects inside those columns */
#view-leads .cc-leads-table-card table td:nth-child(-n+4) input,
#view-leads .cc-leads-table-card table td:nth-child(-n+4) select{
margin-left: auto !important;
margin-right: auto !important;
text-align: center !important;
display: inline-block;
}
/* CC: First 4 columns in Leads table should be LEFT-aligned */
#view-leads .cc-leads-table-card table th:nth-child(-n+4),
#view-leads .cc-leads-table-card table td:nth-child(-n+4){
text-align: left !important;
}
#view-leads .cc-leads-table-card table td:nth-child(-n+4) input,
#view-leads .cc-leads-table-card table td:nth-child(-n+4) select{
margin-left: 0 !important;
margin-right: 0 !important;
text-align: left !important;
display: inline-block;
}
/* CC: Notifications dropdown (bell/clock) */
.cc-notif{ position: relative; display:inline-flex; align-items:center; }
.cc-notif .icon-button{ position:relative; }
.cc-notif-menu{
position:absolute;
top: calc(100% + 10px);
right: 0;
width: 380px;
max-width: calc(100vw - 32px);
background: var(--surface);
border: 1px solid var(--border);
border-radius: 14px;
box-shadow: 0 18px 40px rgba(0,0,0,.16);
overflow: hidden;
display:none;
z-index: var(--z-notif-menu);
}
.cc-notif-menu.open{ display:block; }
.cc-notif-head{
padding: 12px 14px;
background: var(--hover);
display:flex;
align-items:center;
justify-content: space-between;
gap: 12px;
border-bottom: 1px solid var(--border);
}
.cc-notif-title{ font-weight: 800; font-size: 0.95rem; }
.cc-notif-clear{
background: transparent;
border: 0;
color: var(--text-secondary);
cursor:pointer;
font-size: 0.78rem;
padding: 6px 8px;
border-radius: 10px;
}
.cc-notif-clear:hover{ background:#fff; border:1px solid var(--border); }
.cc-notif-body{ max-height: 360px; overflow:auto; padding: 8px; }
.cc-notif-item{
display:flex;
gap: 10px;
padding: 10px 10px;
border-radius: 12px;
cursor:pointer;
}
.cc-notif-item:hover{ background: var(--hover); }
.cc-notif-ico{
width: 34px; height: 34px;
border-radius: 10px;
display:flex; align-items:center; justify-content:center;
background: #f3f4f6;
flex: 0 0 34px;
}
.cc-notif-meta{ flex:1; min-width: 0; }
.cc-notif-line1{ display:flex; justify-content:space-between; gap:10px; align-items:flex-start; }
.cc-notif-ttl{ font-weight: 750; font-size: 0.86rem; white-space: nowrap; overflow:hidden; text-overflow: ellipsis; }
.cc-notif-time{ font-size: 0.75rem; color: var(--text-secondary); white-space:nowrap; }
.cc-notif-sub{ font-size: 0.78rem; color: var(--text-secondary); margin-top: 2px; white-space: nowrap; overflow:hidden; text-overflow: ellipsis; }
.cc-notif-tag{
display:inline-flex;
margin-top: 6px;
padding: 2px 8px;
font-size: 0.72rem;
border-radius: 999px;
border: 1px solid var(--border);
color: var(--text-secondary);
background:#fff;
}
.cc-notif-empty{
padding: 18px 10px;
color: var(--text-secondary);
text-align:center;
font-size: 0.85rem;
}
.cc-notif-foot{
display:flex;
gap: 10px;
padding: 10px 12px;
border-top: 1px solid var(--border);
background:#fff;
}
.cc-notif-link{
flex:1;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
padding: 10px 10px;
cursor:pointer;
font-weight: 650;
font-size: 0.82rem;
}
.cc-notif-link:hover{ background: var(--hover); }
/* CC: Personaliseren view — ensure all fields are visible (responsive 2-col -> 1-col) */
#view-branding .cc-branding-wrap > div[style*="grid-template-columns: 1fr 400px"]{
align-items: start;
}
@media (max-width: 1200px){
#view-branding .cc-branding-wrap > div[style*="grid-template-columns: 1fr 400px"]{
grid-template-columns: 1fr !important;
}
}
/* Prevent any accidental clipping inside the personaliseren layout */
#view-branding .cc-branding-wrap,
#view-branding .cc-branding-wrap *{
overflow: visible;
}
/* CC: Personaliseren — remove extra top spacing above 'Basis Informatie' and 'Kleuren' blocks */
#view-branding .cc-view-header-block{
margin-bottom: 0 !important; /* was creating extra space above first fields */
}
#view-branding .cc-branding-wrap{
padding-top: 0 !important;
margin-top: 0 !important;
}
#view-branding .cc-branding-wrap > div{
margin-top: 0 !important;
}
/* CC: Personaliseren view rebuild (match Analytics/Leads look) */
#view-branding .cc-tight-header{ margin-bottom: 1.5rem; }
#view-branding .cc-tight-header h2{
font-size: 1.5rem;
margin: 0 0 .25rem 0;
}
#view-branding .cc-tight-header p{
color: var(--text-light);
margin: 0;
}
/* Grid like Analytics charts */
#view-branding .cc-branding-grid{
display: grid;
grid-template-columns: minmax(0, 1fr) 420px;
gap: 1.5rem;
align-items: start;
}
#view-branding .cc-sticky{ position: sticky; top: 90px; }
/* Fields */
#view-branding .wl-stack{ display: grid; gap: 1rem; }
#view-branding .wl-field{ display: grid; gap: .45rem; }
#view-branding .wl-label{ font-weight: 700; font-size: .9rem; }
#view-branding .wl-input{
width: 100%;
padding: .75rem .85rem;
border: 1px solid var(--border);
border-radius: 10px;
background: var(--surface);
outline: none;
}
#view-branding .wl-input:focus{
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(59,130,246,.12);
}
#view-branding .wl-textarea{
width: 100%;
min-height: 140px;
padding: .75rem .85rem;
border: 1px solid var(--border);
border-radius: 10px;
background: var(--surface);
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
/* 2 column inside cards */
#view-branding .wl-2col{
display: grid;
grid-template-columns: repeat(2, minmax(0,1fr));
gap: 1rem;
}
/* Colors */
#view-branding .wl-color-grid{
display: grid;
grid-template-columns: repeat(2, minmax(0,1fr));
gap: 1rem;
}
#view-branding .wl-color{
width: 100%;
height: 44px;
border: 1px solid var(--border);
border-radius: 10px;
background: var(--surface);
cursor: pointer;
padding: 0;
}
#view-branding .wl-colorpicker{
flex: 1;
height: 42px;
border: 1px solid var(--border);
border-radius: 10px;
cursor: pointer;
padding: 0;
background: var(--surface);
}
/* Rows/inline */
#view-branding .wl-row{
display:flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
margin-bottom: 1rem;
}
#view-branding .wl-inline{ display:flex; align-items:center; gap:.75rem; }
#view-branding .wl-check{ display:flex; align-items:center; gap:.5rem; font-weight: 600; }
#view-branding .wl-muted{ color: var(--text-light); }
#view-branding .wl-hint{ color: var(--text-light); font-size: .8rem; margin-top: .35rem; }
#view-branding .wl-preview-box{
margin-top: .75rem;
padding: 1rem;
background: var(--hover);
border: 1px dashed var(--border);
border-radius: 12px;
text-align: center;
min-height: 84px;
display:flex;
align-items:center;
justify-content:center;
}
#view-branding .wl-preview-small{ min-height: 64px; }
#view-branding .wl-range-meta{
display:flex;
justify-content: space-between;
color: var(--text-light);
font-size: .75rem;
margin-top: .25rem;
}
#view-branding .wl-range-center{
text-align: center;
font-weight: 800;
color: var(--accent);
margin-top: .35rem;
}
#view-branding .wl-actions{
display:flex;
gap: 1rem;
flex-wrap: wrap;
}
#view-branding .wl-actions .btn{ flex: 1 1 160px; }
#view-branding .wl-actions-row{ display:flex; gap: .75rem; }
/* Preview area */
#view-branding .wl-preview-area{
background: var(--hover);
border-radius: 12px;
padding: 1.25rem;
min-height: 420px;
}
#view-branding .wl-preview-topbar{
background: var(--primary);
color: var(--surface);
padding: 1rem;
border-radius: 12px;
margin-bottom: 1rem;
display:flex;
align-items:center;
gap: .75rem;
}
#view-branding .wl-preview-logo{
width: 40px;
height: 40px;
background: var(--accent);
border-radius: 10px;
display:flex;
align-items:center;
justify-content:center;
}
#view-branding .wl-preview-name{ font-weight: 800; font-size: 1rem; }
#view-branding .wl-preview-tagline{ font-size: .75rem; opacity: .85; }
#view-branding .wl-preview-layout{
display: grid;
grid-template-columns: 130px 1fr;
gap: .75rem;
margin-bottom: 1rem;
}
#view-branding .wl-mini-sidebar{
border: 1px solid var(--border);
border-radius: 12px;
padding: .6rem;
background: var(--text);
color: var(--surface);
min-height: 110px;
}
#view-branding .wl-mini-brand{
display:flex;
align-items:center;
gap:.4rem;
font-size:.68rem;
font-weight:700;
margin-bottom:.6rem;
opacity:.95;
}
#view-branding .wl-mini-dot{
width: 10px;
height: 10px;
border-radius: 999px;
background: var(--accent);
}
#view-branding .wl-mini-nav{
display:grid;
gap:.35rem;
}
#view-branding .wl-mini-nav-item{
font-size:.68rem;
font-weight:600;
padding:.35rem .45rem;
border-radius:8px;
color: rgba(255,255,255,.78);
background: transparent;
}
#view-branding .wl-mini-nav-item.is-active{
background: rgba(255,255,255,.14);
color: var(--surface);
}
#view-branding .wl-mini-main{
border: 1px solid var(--border);
border-radius: 12px;
padding: .75rem;
background: var(--surface);
min-height: 110px;
}
#view-branding .wl-mini-strip{
border: 1px solid var(--border);
border-radius: 8px;
padding: .35rem .5rem;
font-size: .7rem;
color: var(--text-light);
background: var(--hover);
}
#view-branding .wl-preview-card{
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
padding: 1rem;
margin-bottom: 1rem;
}
#view-branding .wl-tip{
margin-top: 1rem;
padding: 1rem;
background: rgba(59,130,246,0.10);
border-radius: 12px;
font-size: .85rem;
}
/* Responsive */
@media (max-width: 1200px){
#view-branding .cc-branding-grid{
grid-template-columns: 1fr;
}
#view-branding .cc-sticky{ position: static; top: auto; }
}
@media (max-width: 720px){
#view-branding .wl-2col,
#view-branding .wl-color-grid{
grid-template-columns: 1fr;
}
#view-branding .wl-preview-layout{
grid-template-columns: 1fr;
}
#view-branding .wl-row{
flex-direction: column;
align-items: flex-start;
}
}
/* CC: Personaliseren widgets use dashboard-widget styling */
#view-branding .cc-widget-content{ margin: 0; padding: 0; }
#view-branding .widget-header{ margin-bottom: 1rem; padding-bottom: .75rem; }
/* match dashboard widget gaps */
/* Keep preview widget sticky without affecting others */
#view-branding .cc-sticky{ position: sticky; top: 90px; }
@media (max-width: 1200px){
#view-branding .cc-sticky{ position: static; top: auto; }
}
/* CC: Personaliseren — align widgets to the RIGHT so nothing hides behind sidebar */
.content-area #view-branding{
/* Right-align this view within the content area */
margin-left: auto !important;
margin-right: 0 !important;
max-width: 1400px;
width: 100%;
overflow-x: hidden;
}
/* Ensure the grid uses available width and can shrink */
#view-branding .cc-branding-grid{
width: 100%;
max-width: 100%;
}
#view-branding .dashboard-widget,
#view-branding .cc-branding-col{
min-width: 0;
max-width: 100%;
}
/* Safety: prevent any child from forcing horizontal overflow */
#view-branding *{
max-width: 100%;
box-sizing: border-box;
}
/* CC: Personaliseren — make LEFT column narrower so everything fits */
#view-branding .cc-branding-grid{
grid-template-columns: minmax(0, 0.85fr) 420px !important;
}
/* Slightly reduce padding inside widgets to help fit */
#view-branding .dashboard-widget{
padding: 1rem !important;
}
/* If the right column needs to stay visible, cap it a bit on smaller screens */
@media (max-width: 1350px){
#view-branding .cc-branding-grid{
grid-template-columns: minmax(0, 0.8fr) 380px !important;
}
}
@media (max-width: 1200px){
#view-branding .cc-branding-grid{
grid-template-columns: 1fr !important;
}
}
/* CC: Personaliseren — NO columns (single vertical flow) */
#view-branding .cc-branding-grid{
display: grid;
grid-template-columns: 1fr !important;
gap: 1.5rem !important; /* dashboard widget spacing */
}
#view-branding .cc-branding-col{
width: 100%;
min-width: 0;
}
/* Disable sticky so preview behaves like a normal widget */
#view-branding .cc-sticky{
position: static !important;
top: auto !important;
}
/* CC: Personaliseren — extra left gutter so widgets start after the sidebar edge */
#view-branding{
padding-left: 1.5rem !important;
}
@media (max-width: 900px){
#view-branding{
padding-left: 0 !important;
}
}
/* CC: FIX — make Personaliseren behave exactly like other .view pages (no underlap with fixed sidebar) */
/* The sidebar is fixed (260px). main-content already has margin-left:260px, but make width explicit to avoid edge cases. */
.main-content{
width: calc(100% - 260px);
}
/* Reset any custom alignment on the personaliseren view to match .view defaults */
#view-branding{
max-width: 1400px !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 0 !important;
padding-right: 0 !important;
position: relative;
overflow-x: hidden;
}
/* Ensure wrapper/content respects the content-area padding (like Leads/Analytics) */
#view-branding .cc-branding-wrap{
width: 100%;
max-width: 100%;
margin: 0;
padding: 0;
}
/* CC: FINAL FIX — make Personaliseren identical positioning to Leads/Analytics (no overlap with sidebar) */
/* 1) Ensure view uses the same centering rules as other views */
#view-branding{
margin-left: auto !important;
margin-right: auto !important;
max-width: 1400px !important;
width: auto !important;
padding-left: 0 !important;
padding-right: 0 !important;
overflow-x: hidden;
}
/* 2) Ensure wrapper uses the same gutters as Analytics wrapper */
#view-branding .cc-branding-wrap{
max-width: 1200px !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: var(--cc-widget-gap) !important;
padding-right: var(--cc-widget-gap) !important;
box-sizing: border-box;
}
#view-branding .cc-branding-wrap > *{ max-width: 100%; }
/* 3) Never allow any child to push into negative space */
#view-branding .cc-branding-grid,
#view-branding .dashboard-widget{
max-width: 100%;
min-width: 0;
}
/* 4) Mobile: keep consistent with other views */
@media (max-width: 899px){
#view-branding .cc-branding-wrap{
max-width: none !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
}
/* CC: HARD FIX — enforce global content offset for fixed sidebar (prevents ANY view from sitting behind sidebar) */
.sidebar{ width: 260px !important; }
/* Small screens: allow full width if sidebar is stacked/hidden */
@media (max-width: 900px){
.main-content{
margin-left: 0 !important;
width: 100% !important;
}
}
/* CC: GUARANTEED FIX — force Personaliseren to start AFTER fixed sidebar */
#view-branding{
margin-left: 260px !important;
width: calc(100% - 260px) !important;
max-width: none !important;
}
/* Keep inner wrapper centered within the available space */
#view-branding .cc-branding-wrap{
margin-left: auto !important;
margin-right: auto !important;
}
@media (max-width: 900px){
#view-branding{
margin-left: 0 !important;
width: 100% !important;
}
}
/* =========================================================
CC FINAL CONSISTENCY OVERRIDES (layout + gutters + sidebar)
Goal: one consistent look across ALL views, without changing data.
========================================================= */
:root{
--cc-sidebar-width: 260px;
--cc-content-max: 1400px;
--cc-inner-max: 1200px;
--cc-gutter: 24px; /* matches overall dashboard feel */
/* --cc-widget-gap already exists in your theme (1.5rem) */
}
/* Fixed sidebar: make the rest of the app never sit underneath it */
.sidebar{
width: var(--cc-sidebar-width) !important;
left: 0 !important;
}
.main-content{
margin-left: var(--cc-sidebar-width) !important;
width: calc(100% - var(--cc-sidebar-width)) !important;
max-width: none !important;
}
.content-area{
width: 100% !important;
padding: var(--cc-gutter) !important;
overflow-y: auto !important;
overflow-x: hidden !important;
}
/* Every view uses the same centered rail as Dashboard/Analytics */
.view{
max-width: var(--cc-content-max) !important;
margin-left: auto !important;
margin-right: auto !important;
width: 100% !important;
overflow-x: hidden !important;
}
/* Inner wrappers (same method for Leads/Analytics/Personaliseren) */
.cc-analytics-wrap,
.cc-leads-wrap,
.cc-branding-wrap{
max-width: var(--cc-inner-max) !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: var(--cc-widget-gap) !important;
padding-right: var(--cc-widget-gap) !important;
box-sizing: border-box !important;
}
/* Ensure widgets/cards never force horizontal overflow */
.dashboard-widget,
.card,
table,
.table,
.table-wrap,
.cc-branding-grid,
.cc-analytics-grid{
max-width: 100% !important;
min-width: 0 !important;
}
/* Mobile / narrow screens: sidebar not offset */
@media (max-width: 900px){
.main-content{
margin-left: 0 !important;
width: 100% !important;
}
.content-area{
padding: 16px !important;
}
.cc-analytics-wrap,
.cc-leads-wrap,
.cc-branding-wrap{
max-width: none !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
}
/* CC: Personaliseer widgets — same spacing as dashboard widgets */
#view-branding .cc-branding-col{
display: grid;
gap: 1.5rem; /* same as dashboard widget spacing */
}
/* Ensure any direct widget containers inside branding columns stack with same gap */
#view-branding .cc-branding-col > .dashboard-widget{
margin: 0 !important;
}
#view-branding .cc-branding-grid{
gap: 1.5rem !important;
}
/* =========================================================
CC: Call Tracker — Lead Summary cleanup (styling only)
========================================================= */
#callTrackerModal .lead-summary{
align-items: center;
padding: 1rem 1.25rem;
}
#callTrackerModal .tracker-contact-overview{
padding: .9rem 1rem;
border-radius: 12px;
gap: .7rem;
background: var(--surface);
}
#callTrackerModal .tracker-contact-overview .lead-summary{
margin-bottom: 0;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
#callTrackerModal .lead-avatar{
width: 50px;
height: 50px;
border-radius: 12px;
font-size: 1.05rem;
box-shadow: none;
}
#callTrackerModal .lead-summary-main{
flex: 1 1 auto;
min-width: 0;
}
#callTrackerModal .lead-summary-top{
width: 100%;
gap: .5rem 1rem;
}
#callTrackerModal .lead-summary-top h3{
margin: 0;
font-size: 1.05rem;
line-height: 1.2;
font-weight: 800;
color: var(--text);
min-width: 0;
}
#callTrackerModal .lead-badges{
margin-left: auto;
justify-content: flex-end;
}
#callTrackerModal .lead-badges .pill{
min-height: 30px;
padding: 0 .65rem;
border-radius: 999px;
font-size: .82rem;
border-color: rgba(148, 163, 184, .35);
background: var(--hover);
}
#callTrackerModal .lead-summary-sub{
margin-top: .35rem;
display: flex;
flex-wrap: wrap;
gap: .35rem .6rem;
align-items: center;
color: var(--text-light);
font-size: .9rem;
}
/* make separators subtle and avoid big spacing */
#callTrackerModal .lead-summary-sub > span{
display: inline-flex;
align-items: center;
}
#callTrackerModal .lead-summary-sub > span:not([id]){
opacity: .4;
font-weight: 700;
}
#callTrackerModal .lead-actions-row{
width: 100%;
display: flex;
flex-wrap: wrap;
gap: .6rem;
align-items: center;
margin-top: .7rem;
}
#callTrackerModal .lead-actions-row .btn{
height: 32px;
padding: 0 .9rem;
border-radius: 999px;
display: inline-flex;
align-items: center;
gap: .45rem;
font-size: .86rem;
}
#callTrackerModal .tracker-contact-info{
border-top: 1px solid rgba(148, 163, 184, 0.22);
padding-top: .65rem;
gap: .45rem;
}
#callTrackerModal .tracker-contact-info__title{
font-size: .78rem;
letter-spacing: .03em;
margin-bottom: .05rem;
}
#callTrackerModal .tracker-contact-compact{
gap: .45rem .55rem;
}
#callTrackerModal .tracker-contact-pill{
border-radius: 9px;
min-height: 46px;
padding: .32rem .5rem;
border-color: rgba(148, 163, 184, 0.25);
background: #f7f9fc;
}
#callTrackerModal .tracker-contact-pill__label{
font-size: .64rem;
letter-spacing: .02em;
}
#callTrackerModal .tracker-contact-pill > span:not(.tracker-contact-pill__label){
font-size: .84rem;
}
#callTrackerModal .lead-actions-row .btn i{
opacity: .9;
}
/* Small screens: stack neatly */
@media (max-width: 640px){
#callTrackerModal .lead-summary{
align-items: flex-start;
}
#callTrackerModal .lead-avatar{
width: 48px;
height: 48px;
border-radius: 14px;
}
#callTrackerModal .lead-badges{
width: 100%;
margin-left: 0;
justify-content: flex-start;
}
}
/* CC FIX: Ensure Call Tracker footer buttons are visible & stay at bottom (scoped) */
#callTrackerModal .modal-container{ display:flex; flex-direction:column; }
#callTrackerModal .modal-body{ flex:1; max-height:none; overflow-y:auto; }
#callTrackerModal .modal-footer{
padding: 1rem 2rem;
border-top: 1px solid rgba(0,0,0,0.08);
background: var(--surface);
}
/* Reports UI – premium generator + compact list */
.rp-generator-card .card-header{
background: linear-gradient(135deg, rgba(59,130,246,0.18), rgba(15,23,42,0.10));
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.rp-generator-card .card-title{
display:flex; align-items:center; gap:10px;
}
.rp-generator-badge{
font-size: 11px;
padding: 3px 9px;
border-radius: 999px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.10);
color: rgba(255,255,255,0.92);
font-weight: 700;
letter-spacing: 0.22px;
text-transform: uppercase;
}
.rp-actions{
display:flex; gap:0.5rem; flex-wrap:wrap; align-items:center;
padding-top: 0.25rem;
}
.rp-actions .btn{
border-radius: 12px;
}
.rp-compact-list{
display:flex;
flex-direction:column;
gap:0.18rem;
}
.rp-item{
padding: 8px 10px;
border-radius: 12px;
border: 1px solid rgba(255,255,255,0.07);
background: rgba(255,255,255,0.02);
}
.rp-item-top{
display:flex;
align-items:center; /* aligns buttons with title line */
justify-content:space-between;
gap:0.75rem;
min-width:0;
}
.rp-item-left{
min-width:0;
display:flex;
align-items:center;
gap:8px;
flex:1;
}
.rp-item-meta{
margin-top: 4px;
}
.rp-item-actions{
display:flex;
align-items:center; /* vertical center w/ title */
gap:6px;
flex-shrink:0;
}
.rp-item-actions .btn.btn-sm{
padding: 5px 9px;
line-height: 1;
font-size: 0.78rem;
}
.rp-item-actions .btn.btn-sm i{
font-size: 0.9em;
}
.rp-item-actions .btn.btn-secondary.btn-sm,
.rp-item-actions .btn.btn-ghost.btn-sm{
padding: 5px 8px;
}
.rp-item:hover{
border-color: rgba(255,255,255,0.12);
background: rgba(255,255,255,0.03);
}
.rp-item-title{
font-weight: 700;
font-size: 0.875rem;
line-height: 1.15;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
margin:0;
}
.rp-item-meta{
color: var(--muted);
font-size: 0.78rem;
margin-top: 2px;
display:flex;
gap:8px;
flex-wrap:wrap;
}
.rp-chip{
display:inline-flex;
align-items:center;
gap:6px;
padding: 2px 9px;
border-radius: 999px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.08);
font-size: 11px;
font-weight: 700;
color: rgba(255,255,255,0.92);
}
.rp-item-actions{
display:flex;
align-items:center;
gap:0.35rem;
justify-content:flex-end;
flex-wrap:nowrap;
}
.rp-item-actions .btn.btn-sm{
padding: 4px 8px;
border-radius: 12px;
height: 28px;
font-size: 0.78rem;
}
/* --- Saved reports: tighter spacing + actions aligned with title line --- */
.rp-compact-list{ gap: 0.18rem; }
.rp-item{
padding: 6px 10px;
align-items: flex-start; /* align actions with title, not with meta line-wrap */
}
.rp-item-title{
font-size: 0.84rem;
line-height: 1.1;
}
.rp-item-meta{ margin-top: 1px; gap: 6px; }
.rp-chip{ padding: 2px 8px; }
.rp-item-actions{
padding-top: 0;
margin-top: 1px; /* optisch centreren met titelregel */
align-items: center;
}
.rp-item-actions .btn.btn-sm{
height: 26px;
padding: 3px 7px;
font-size: 0.76rem;
}
/* Reports view alignment with overall app layout */
#view-reports .cc-view-header-block h2{
font-weight: 800;
letter-spacing: .2px;
}
#view-reports .cc-view-header-block p{
max-width: 80ch;
}
#view-reports .card .card-header{
padding-bottom: 10px;
}
#view-reports .card .card-body{
padding-top: 10px;
}
/* Make generator form labels consistent and slightly tighter */
#view-reports .form-group label{
margin-bottom: 0.4rem;
}
/* --- CC: Lead detail opvolgtaken - compact card layout (matches app UI) --- */
.cc-task-list{
display:flex;
flex-direction:column;
gap:12px;
font-family: var(--font-family-base);
}
.cc-task-card{
display:flex;align-items:flex-start;justify-content:space-between;
gap:16px;
background:#fff;
border:1px solid var(--border);
border-radius: var(--r);
padding: var(--layout-card-padding);
box-shadow: var(--shadow-sm);
cursor:pointer;
font-family: inherit;
}
.cc-task-card:focus{outline:2px solid rgba(252,86,0,.35); outline-offset:3px;}
.cc-task-card-main{flex:1; min-width:0;}
.cc-task-title{
display:flex;align-items:center;gap:14px;
font-size: var(--font-size-h3);
font-weight: var(--font-weight-display);
color:#0F172A;
line-height:1.3;
margin-bottom:10px;
word-break:break-word;
}
.cc-task-icon{color:#2563EB; font-size:1.1rem;}
.cc-task-meta{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:14px;
color:#475569;
font-size:0.95rem;
font-weight: var(--font-weight-semibold);
}
.cc-meta-item{display:inline-flex;align-items:center;gap:10px;}
.cc-meta-item i{color:#64748B;}
.cc-pill{
display:inline-flex;align-items:center;
padding:6px 12px;
border-radius:999px;
font-weight: var(--font-weight-bold);
font-size:0.82rem;
line-height:1;
color: var(--surface);
}
.cc-pill-medium{background:#3B82F6;}
.cc-pill-high{background:#EF4444;}
.cc-pill-low{background:#10B981;}
.cc-due{font-weight: var(--font-weight-bold);}
.cc-due-soon{color:#F59E0B;}
.cc-due-upcoming{color:#0EA5E9;}
.cc-due-overdue{color:#EF4444;}
.cc-task-actions,
.task-card__actions{display:flex;align-items:center;gap:12px; padding-top:4px;}
.cc-action,
.task-card__action{
width: var(--btn-height);
height: var(--btn-height);
border-radius: var(--btn-radius);
border:1px solid var(--border);
background:#fff;
display:inline-flex;align-items:center;justify-content:center;
cursor:pointer;
}
.cc-action i,
.task-card__action i{font-size:1.05rem;}
.cc-action-complete,
.task-card__action--complete{
background:#10B981;
border-color:#10B981;
color: var(--surface);
}
.cc-action-delete,
.task-card__action--delete{color:#0F172A;}
.cc-action-done,
.task-card__action--done{
background:#10B981;
border-color:#10B981;
color: var(--surface);
opacity:.65;
cursor:default;
}
/* Ensure icon-only task actions always render icon correctly after BEM migration */
#leadTab-tasks .task-card__action{
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
}
#leadTab-tasks .task-card__icon-svg{
width:18px;
height:18px;
display:block;
stroke:currentColor;
fill:none;
stroke-width:2.2;
stroke-linecap:round;
stroke-linejoin:round;
}
#leadTab-tasks .task-card__action i{
margin-right:0 !important;
line-height:1 !important;
font-size:1.05rem !important;
font-family:"Font Awesome 6 Free" !important;
font-weight:900 !important;
color:currentColor !important;
}
#leadTab-tasks .task-card__action--complete,
#leadTab-tasks .task-card__action--done{
background:#10B981 !important;
border-color:#10B981 !important;
color:var(--surface) !important;
}
#leadTab-tasks .task-card__action--delete{
background:var(--surface) !important;
color:#0F172A !important;
border-color:var(--border) !important;
}
.cc-task-card.is-done{opacity:.7;}
/* Deadline badges */
.task-card__due{
display:inline-flex;
align-items:center;
padding:2px 7px;
border-radius:999px;
font-size:0.72rem;
font-weight:700;
white-space:nowrap;
}
.task-card__due--overdue{
background:rgba(239,68,68,0.12);
color:#ef4444;
}
.task-card__due--soon{
background:rgba(245,158,11,0.15);
color:#d97706;
}
.task-card__due--upcoming{
background:rgba(16,185,129,0.12);
color:#059669;
}
/* Priority pill badges */
.task-card__pill{
display:inline-flex;
align-items:center;
padding:2px 8px;
border-radius:999px;
font-size:0.72rem;
font-weight:700;
}
.task-card__pill--high{
background:rgba(239,68,68,0.12);
color:#ef4444;
}
.task-card__pill--medium{
background:rgba(245,158,11,0.12);
color:#d97706;
}
.task-card__pill--low{
background:rgba(59,130,246,0.10);
color:var(--accent);
}
/* Priority filter buttons */
.lead-task-priority-filters{
display:flex;
gap:4px;
flex-wrap:wrap;
margin-top:6px;
}
.lead-task-pf-btn{
height:26px;
padding:0 10px;
border-radius:999px;
font-size:0.75rem;
font-weight:600;
border:1px solid var(--border);
background:transparent;
color:var(--muted);
cursor:pointer;
transition:.15s ease;
}
.lead-task-pf-btn.is-active,
.lead-task-pf-btn:hover{
background:var(--bg);
color:var(--text);
}
.lead-task-pf-btn--high.is-active{
background:rgba(239,68,68,0.10);
color:#ef4444;
border-color:#ef4444;
}
.lead-task-pf-btn--medium.is-active{
background:rgba(245,158,11,0.10);
color:#d97706;
border-color:#d97706;
}
.lead-task-pf-btn--low.is-active{
background:rgba(59,130,246,0.10);
color:var(--accent);
border-color:var(--accent);
}
/* --- Follow-up Tasks Tab (match screenshot) --- */
#leadTab-tasks > div:first-child{
margin-bottom: 1.25rem !important;
}
#leadTab-tasks > div:first-child h3{
font-size: var(--font-size-h1) !important;
font-weight: var(--font-weight-display) !important;
display: flex;
align-items: center;
gap: .85rem;
color: #0F172A;
}
#leadTab-tasks > div:first-child h3 i{
font-size: 1.1rem;
color: #0F172A;
}
/* “Nieuwe Taak” pill button on the right */
#leadTab-tasks > div:first-child .btn.btn-sm.btn-primary{
background: #FCA5A5 !important;
border: 0 !important;
color: var(--surface) !important;
border-radius: 999px !important;
padding: 0.75rem 1.1rem !important;
font-weight: 800 !important;
display: inline-flex !important;
align-items: center !important;
gap: .6rem !important;
box-shadow: 0 8px 20px rgba(15,23,42,.10) !important;
}
#leadTab-tasks > div:first-child .btn.btn-sm.btn-primary i{
margin: 0 !important;
}
/* Task action bar: shown by JS only when editing/creating, in-flow (no floating/sticky hover) */
#leadTab-tasks .cc-task-bottombar{
display: none; /* shown by JS when editing/creating */
position: static !important;
bottom: auto !important;
left: auto !important;
right: auto !important;
z-index: auto !important;
width: 100%;
justify-content: flex-end;
gap: 1rem;
padding: 1rem 0 0;
margin-top: 1rem;
border-top: 1px solid var(--border);
background: transparent;
}
#leadTab-notes .cc-task-bottombar{
display: flex;
position: static !important;
bottom: auto !important;
left: auto !important;
right: auto !important;
z-index: auto !important;
width: 100%;
justify-content: flex-end;
gap: 1rem;
padding: 1rem 0 0;
margin-top: 1rem;
border-top: 1px solid var(--border);
background: transparent;
}
#leadTab-tasks .cc-task-btn{
border-radius: 999px;
padding: 0.8rem 1.25rem;
font-weight: 800;
display: inline-flex;
align-items: center;
gap: .75rem;
border: 2px solid #E2E8F0;
background: var(--surface);
}
#leadTab-tasks .cc-task-btn-save{
background: #FCA5A5;
border-color: #FCA5A5;
color: var(--surface);
}
#leadTab-tasks .cc-task-btn-danger{
background: #EF4444;
border-color: #EF4444;
color: var(--surface);
}
#leadTab-tasks .cc-task-btn-ico{
width: 34px; height: 34px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 2px solid rgba(255,255,255,.35);
background: rgba(255,255,255,.18);
}
#leadTab-tasks .cc-task-btn-cancel .cc-task-btn-ico{
border-color: #E2E8F0;
background: var(--surface);
color: #EF4444;
}
#leadTab-tasks .cc-task-btn-danger .cc-task-btn-ico{
border-color: rgba(255,255,255,.35);
background: rgba(255,255,255,.18);
color: var(--surface);
}
#leadTab-notes .cc-notes-bottombar{
gap: .75rem;
}
#leadTab-notes .cc-notes-bottombar .btn{
min-width: 118px;
justify-content: center;
}
/* ========================================
UNIFORM APP LAYOUT (global spacing layer)
Keeps existing design, enforces consistent margins/padding.
======================================== */
:root{
--layout-gutter: 24px;
--layout-gutter-mobile: 14px;
--layout-stack-gap: 24px;
--layout-card-padding: 18px;
}
.topbar{
padding: 14px var(--layout-gutter) !important;
}
.content{
padding: var(--layout-gutter) !important;
}
.view{
width: 100%;
max-width: var(--content-max);
margin: 0 auto !important;
}
.view.active{
display: block;
}
.view > * + *{
margin-top: var(--layout-stack-gap);
}
.cc-view-header-block{
margin: 0 !important;
}
.card{
margin: 0 !important;
border-radius: var(--r);
}
.card-header{
padding: var(--layout-card-padding) var(--layout-card-padding) 12px !important;
}
.card-body{
padding: var(--layout-card-padding) !important;
}
.table-container{
margin: 0;
}
.stats-grid{
gap: 16px !important;
}
.cc-two-col-form{
gap: 16px !important;
}
.form-group{
margin-bottom: 14px !important;
}
@media (max-width: 960px){
.topbar{
padding: 12px var(--layout-gutter-mobile) !important;
}
.content{
padding: var(--layout-gutter-mobile) !important;
}
.view > * + *{
margin-top: 16px;
}
.card-header{
padding: 14px 14px 10px !important;
}
.card-body{
padding: 14px !important;
}
}
/* ========================================
UNIFORM TYPOGRAPHY + BUTTONS
======================================== */
html{
font-size: var(--font-size-base);
}
body,
button,
input,
select,
textarea{
font-family: var(--font-family-base);
line-height: var(--line-height-base);
}
body{
font-size: var(--font-size-base);
font-weight: var(--font-weight-regular);
}
h1, h2, h3, h4{
letter-spacing: -0.01em;
color: var(--text);
}
h1{ font-size: var(--font-size-h1); font-weight: var(--font-weight-display); }
h2{ font-size: var(--font-size-h2); font-weight: var(--font-weight-display); }
h3{ font-size: var(--font-size-h3); font-weight: var(--font-weight-bold); }
h4{ font-size: var(--font-size-h4); font-weight: var(--font-weight-bold); }
.page-title{
font-size: var(--font-size-h2);
font-weight: var(--font-weight-display);
letter-spacing: -0.015em;
}
.card-title,
.widget-title{
font-weight: var(--font-weight-bold);
}
.stat-title{
font-size: 0.875rem;
font-weight: var(--font-weight-semibold);
}
.btn{
height: var(--btn-height);
min-height: var(--btn-height);
border-radius: var(--btn-radius);
font-size: 0.9rem;
font-weight: var(--font-weight-bold);
padding: 0 14px;
line-height: 1;
}
.btn-sm{
height: var(--btn-height-sm);
min-height: var(--btn-height-sm);
border-radius: var(--btn-radius-sm);
font-size: 0.82rem;
padding: 0 10px;
}
.iconbtn{
width: var(--btn-height);
height: var(--btn-height);
border-radius: var(--btn-radius);
}
.input,
.select,
.form-control{
min-height: var(--input-height);
border-radius: var(--input-radius);
font-size: 0.9rem;
}
textarea.input,
textarea.form-control,
.textarea{
min-height: 84px;
line-height: 1.45;
}
.sb-label{
font-size: 0.72rem;
font-weight: var(--font-weight-display);
}
.user-meta .name{
font-weight: var(--font-weight-bold);
}
.density-switch{
display: inline-flex;
align-items: center;
gap: 6px;
}
.density-switch .btn.btn-sm{
min-width: 0;
padding: 0 10px;
}
.density-switch .btn.is-active{
background: var(--accent);
color: var(--surface);
border-color: var(--accent);
box-shadow: var(--shadow-sm);
}
body[data-density="compact"]{
--font-size-base: 13px;
--font-size-h1: 1.55rem;
--font-size-h2: 1.2rem;
--font-size-h3: 1.05rem;
--font-size-h4: 0.95rem;
--btn-height: 36px;
--btn-height-sm: 30px;
--btn-radius: 10px;
--btn-radius-sm: 8px;
--input-height: 36px;
--input-radius: 10px;
--layout-gutter: 18px;
--layout-stack-gap: 18px;
--layout-card-padding: 14px;
}
body[data-density="comfortable"]{
--font-size-base: 15px;
--font-size-h1: 1.95rem;
--font-size-h2: 1.5rem;
--font-size-h3: 1.2rem;
--font-size-h4: 1.05rem;
--btn-height: 44px;
--btn-height-sm: 36px;
--btn-radius: 14px;
--btn-radius-sm: 12px;
--input-height: 44px;
--input-radius: 14px;
--layout-gutter: 28px;
--layout-stack-gap: 28px;
--layout-card-padding: 20px;
}
@media (max-width: 960px){
:root{
--font-size-base: 13px;
}
.page-title{
font-size: 1.2rem;
}
.density-switch{
display: none;
}
}
/* ========================================
BRANDING VIEW ALIGNMENT FIX
Keep Personaliseren centered like other views.
======================================== */
#view-branding{
width: 100% !important;
max-width: var(--content-max) !important;
margin: 0 auto !important;
padding: 0 !important;
overflow-x: visible !important;
}
#view-branding .cc-branding-wrap{
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
}
#view-branding .cc-branding-grid{
width: 100% !important;
max-width: 100% !important;
grid-template-columns: minmax(0, 1fr) minmax(320px, 420px) !important;
gap: var(--layout-stack-gap) !important;
align-items: start !important;
}
#view-branding .cc-branding-col{
min-width: 0 !important;
}
#view-branding .cc-branding-col:last-child{
position: relative;
}
#view-branding .cc-branding-col:last-child .cc-sticky{
position: sticky !important;
top: 16px !important;
align-self: start;
height: auto;
max-height: none;
overflow: visible;
padding-right: 0;
}
@media (max-width: 1200px){
#view-branding .cc-branding-grid{
grid-template-columns: 1fr !important;
}
}
@media (max-width: 1024px){
#view-branding .cc-branding-col:last-child .cc-sticky{
position: static !important;
top: auto !important;
height: auto;
max-height: none;
overflow: visible;
}
}
.cc-leads-header-actions{
display: inline-flex;
align-items: center;
gap: 0.65rem;
flex-wrap: wrap;
justify-content: flex-end;
}
.cc-leads-import-badge{
height: var(--btn-height);
border-radius: 999px;
border: 1px solid var(--border);
background: var(--surface);
color: var(--text);
padding: 0 0.95rem;
display: inline-flex;
align-items: center;
gap: 0.45rem;
font-size: 0.86rem;
font-weight: 700;
white-space: nowrap;
}
.cc-leads-import-badge i{
color: var(--accent);
}
.cc-leads-io-btn{
height: var(--btn-height);
min-height: var(--btn-height);
padding: 0 1rem;
border-radius: var(--btn-radius);
border: 0;
background: #f59b87;
color: var(--surface);
font-weight: var(--font-weight-bold);
font-size: 0.9rem;
display: inline-flex;
align-items: center;
gap: 0.55rem;
box-shadow: 0 6px 14px rgba(15, 23, 42, 0.10);
}
.cc-leads-io-btn:hover{
background: #f38a73;
color: var(--surface);
}
#view-leads > .cc-view-header-block,
#view-leads .cc-view-header-block,
#view-analytics > .cc-view-header-block,
#view-analytics .cc-view-header-block,
#view-reports > .cc-view-header-block,
#view-reports .cc-view-header-block,
#view-branding > .cc-view-header-block,
#view-branding .cc-view-header-block{
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
.cc-ie-note{
font-size: 0.85rem;
color: var(--text-light);
}
.cc-ie-grid{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.cc-ie-map-table{
width: 100%;
border-collapse: collapse;
margin-top: 0.75rem;
border: 1px solid var(--border);
border-radius: 10px;
overflow: hidden;
}
.cc-ie-map-table th,
.cc-ie-map-table td{
padding: 0.55rem 0.65rem;
border-bottom: 1px solid var(--border);
font-size: 0.86rem;
text-align: left;
}
.cc-ie-map-table tr:last-child td{
border-bottom: 0;
}
.cc-ie-map-table thead th{
background: var(--hover);
font-weight: 700;
}
.cc-ie-preview{
max-height: 190px;
overflow: auto;
border: 1px solid var(--border);
border-radius: 10px;
padding: 0.55rem;
background: var(--surface);
}
.cc-ie-preview table{
width: 100%;
border-collapse: collapse;
font-size: 0.8rem;
}
.cc-ie-preview th,
.cc-ie-preview td{
border-bottom: 1px solid var(--border);
padding: 0.38rem 0.45rem;
text-align: left;
white-space: nowrap;
}
.cc-ie-preview tr:last-child td{
border-bottom: 0;
}
@media (max-width: 900px){
.cc-ie-grid{
grid-template-columns: 1fr;
}
}
.cc-ie-modal{
max-width: 1180px;
width: 100%;
}
.cc-ie-modal__header{
background: var(--hover);
color: var(--text);
border-bottom: 1px solid var(--border);
padding: 0.9rem 1rem;
}
.cc-ie-modal__title-wrap{
display: inline-flex;
align-items: center;
gap: 0.75rem;
}
.cc-ie-modal__title-icon{
width: 44px;
height: 44px;
border-radius: 10px;
background: var(--surface);
border: 1px solid var(--border);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
color: var(--accent);
}
.cc-ie-modal__title{
font-size: 1.14rem;
font-weight: 800;
letter-spacing: 0;
}
.cc-ie-modal__body{
min-height: 500px;
background: var(--bg);
}
.cc-ie-modal__footer{
justify-content: space-between;
}
.cc-ie-step__note{
margin-bottom: 1rem;
font-size: 0.84rem;
}
.cc-ie-grid--source{
grid-template-columns: 1.3fr 0.7fr;
align-items: start;
}
.cc-ie-import-settings{
display: grid;
grid-template-columns: repeat(2, minmax(220px, 1fr));
gap: 0.8rem;
margin-bottom: 0.85rem;
}
.cc-ie-import-settings .form-group{
margin-bottom: 0;
}
.cc-ie-import-settings .form-control{
height: 38px;
min-height: 38px;
border-radius: 11px;
font-size: 0.9rem;
}
.cc-ie-label{
display: block;
font-weight: 800;
margin-bottom: 0.5rem;
color: var(--text);
font-size: 0.86rem;
}
.cc-ie-paste-input{
min-height: 360px;
border-radius: 14px;
font-size: 0.95rem;
line-height: 1.4;
padding: 0.75rem 0.9rem;
}
.cc-ie-source-card{
border: 1px solid var(--border);
border-radius: 14px;
padding: 0.9rem;
background: var(--surface);
}
.cc-ie-file-info{
margin-top: 0.65rem;
font-weight: 700;
color: var(--text);
font-size: 0.82rem;
}
.cc-ie-file-hint{
margin-top: 0.75rem;
font-size: 0.8rem;
}
.cc-ie-step-banner{
margin-bottom: 1rem;
padding: 0.68rem 0.85rem;
border: 1px solid var(--border);
border-radius: 12px;
background: var(--surface);
font-size: 0.84rem;
color: var(--text);
display: flex;
align-items: center;
gap: 0.55rem;
}
.cc-ie-step-banner i{
color: var(--accent);
margin-right: 0.2rem;
}
.cc-ie-map-list{
display: grid;
gap: 1rem;
}
#ccImportWizardModal .cc-ie-map-row{
display: grid;
grid-template-columns: minmax(0, 50%) minmax(240px, 1fr);
gap: 0.8rem;
border: 1px solid var(--border);
border-radius: 14px;
overflow: visible;
background: var(--surface);
padding: 0.62rem;
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
}
#ccImportWizardModal .cc-ie-map-col-preview{
min-width: 0;
padding: 0.2rem 0.25rem;
}
#ccImportWizardModal .cc-ie-map-col-title{
padding: 0.22rem 0.3rem 0.45rem;
background: transparent;
border-bottom: 0;
font-size: 0.82rem;
font-weight: 800;
text-transform: uppercase;
color: var(--text);
letter-spacing: 0.02em;
}
#ccImportWizardModal .cc-ie-map-samples{
padding: 0;
display: grid;
gap: 0.22rem;
}
#ccImportWizardModal .cc-ie-map-sample{
padding: 0.26rem 0.2rem 0.26rem 0.82rem;
border: 0 !important;
border-radius: 0;
background: transparent !important;
color: var(--text-light);
font-size: 0.82rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
position: relative;
}
#ccImportWizardModal .cc-ie-map-sample::before{
content: "";
width: 4px;
height: 4px;
border-radius: 999px;
background: rgba(100, 116, 139, 0.55);
position: absolute;
left: 0.3rem;
top: 50%;
transform: translateY(-50%);
}
#ccImportWizardModal .cc-ie-map-col-select{
padding: 0.68rem;
display: flex;
flex-direction: column;
justify-content: flex-start;
gap: 0.35rem;
border-left: 0;
background: rgba(248, 250, 252, 0.9);
border: 1px solid var(--border);
border-radius: 11px;
}
#ccImportWizardModal .cc-ie-map-col-select label{
font-size: 0.82rem;
font-weight: 700;
color: var(--text);
text-transform: lowercase;
}
.cc-ie-map-col-select .form-control{
height: 36px;
min-height: 36px;
border-radius: 10px;
font-size: 0.9rem;
padding: 0.42rem 0.62rem;
box-sizing: border-box;
width: 100%;
max-width: 100%;
}
.cc-ie-step-warning{
margin-top: 1rem;
padding: 0.62rem 0.78rem;
border: 1px solid var(--border);
border-radius: 10px;
background: var(--hover);
color: var(--text);
font-size: 0.82rem;
display: flex;
align-items: center;
gap: 0.6rem;
}
.cc-ie-step-warning i{
color: #ef4444;
}
.cc-ie-step-actions{
margin-top: 0.95rem;
display: flex;
justify-content: space-between;
align-items: center;
gap: 0.75rem;
flex-wrap: wrap;
padding-bottom: 0.2rem;
}
.cc-ie-step-actions .btn{
height: 38px;
border-radius: 12px;
font-size: 0.9rem;
white-space: nowrap;
}
#ccImportSaveMapBtn{
margin-left: auto;
min-width: 210px;
max-width: 100%;
}
@media (max-width: 1024px){
.cc-ie-import-settings{
grid-template-columns: 1fr;
}
.cc-ie-grid--source{
grid-template-columns: 1fr;
}
.cc-leads-header-actions{
justify-content: flex-start;
}
.cc-ie-map-row{
grid-template-columns: 1fr;
}
.cc-ie-map-col-select{
border-left: 0;
border-top: 1px solid var(--border);
}
.cc-ie-modal__title{
font-size: 1.02rem;
}
#ccImportSaveMapBtn{
width: 100%;
margin-left: 0;
}
}
/* ========================================
UNIFORM SPACING PASS (all primary views)
======================================== */
.cc-analytics-wrap,
.cc-leads-wrap,
.cc-branding-wrap,
.cc-reports-wrap{
max-width: var(--cc-inner-max) !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: var(--cc-widget-gap) !important;
padding-right: var(--cc-widget-gap) !important;
box-sizing: border-box !important;
}
#view-leads .cc-view-header-block,
#view-analytics .cc-view-header-block,
#view-reports .cc-view-header-block,
#view-branding .cc-view-header-block{
margin-bottom: var(--layout-stack-gap) !important;
padding-left: var(--cc-widget-gap) !important;
padding-right: var(--cc-widget-gap) !important;
}
#view-leads .cc-leads-wrap > * + *,
#view-analytics .cc-analytics-wrap > * + *,
#view-reports .cc-reports-wrap > * + *,
#view-branding .cc-branding-wrap > * + *{
margin-top: var(--layout-stack-gap);
}
#view-reports .cc-grid{
gap: var(--layout-stack-gap) !important;
}
@media (max-width: 900px){
.cc-analytics-wrap,
.cc-leads-wrap,
.cc-branding-wrap,
.cc-reports-wrap{
max-width: none !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
#view-leads .cc-view-header-block,
#view-analytics .cc-view-header-block,
#view-reports .cc-view-header-block,
#view-branding .cc-view-header-block{
padding-left: 0 !important;
padding-right: 0 !important;
}
}
/* ========================================
PAGE HEADER + ICON UNIFORMITY (content views only)
======================================== */
.view .cc-page-title,
.view .cc-view-header-block h2,
#view-dashboard > h2{
display: flex;
align-items: center;
gap: 0.55rem;
margin: 0 !important;
font-size: 1.75rem !important;
font-weight: 700 !important;
color: var(--text) !important;
letter-spacing: -0.015em;
line-height: 1.15;
}
.view .cc-page-subtitle,
.view .cc-view-header-block p{
margin: 0.25rem 0 0 !important;
color: var(--text-light) !important;
font-size: 0.9rem !important;
font-weight: 500;
}
.cc-page-header__inner{
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
}
.cc-page-header__inner--actions{
align-items: flex-start;
flex-wrap: wrap;
}
.cc-page-header__meta{
min-width: 0;
}
.cc-page-header__actions{
display: inline-flex;
align-items: center;
justify-content: flex-end;
flex-wrap: wrap;
gap: 0.65rem;
margin-left: auto;
}
.cc-form-control--sm{
min-height: var(--btn-height-sm) !important;
height: var(--btn-height-sm) !important;
border-radius: var(--btn-radius-sm) !important;
font-size: 0.82rem !important;
}
.cc-form-inline{
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
align-items: center;
}
.cc-form-hint{
color: var(--muted);
font-size: 0.85rem;
margin-top: 0.35rem;
line-height: 1.45;
}
.cc-analytics-layout-grid{
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 1.5rem;
}
.cc-reports-layout-grid{
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 1rem;
}
.view i.fas,
.view i.far,
.view i.fab{
color: var(--accent);
}
.view .btn i{
color: currentColor !important;
}
#view-dashboard .stat-icon.blue,
#view-dashboard .stat-icon.green,
#view-dashboard .stat-icon.orange,
#view-dashboard .stat-icon.purple{
color: var(--accent);
}
@media (max-width: 900px){
.view .cc-page-title,
.view .cc-view-header-block h2,
#view-dashboard > h2{
font-size: 1.5rem !important;
}
.cc-page-header__inner{
align-items: flex-start;
}
.cc-page-header__actions{
width: 100%;
justify-content: flex-start;
}
.cc-analytics-layout-grid,
.cc-reports-layout-grid{
grid-template-columns: 1fr;
gap: 1rem;
}
}
/* Fase 4 — Leads UX Suite */
/* Status filter bar */
.cc-status-filter-bar {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
margin-bottom: 1rem;
}
.cc-status-filter-bar .btn {
height: 32px;
padding: 0 12px;
font-size: 0.82rem;
border-radius: 999px;
}
.cc-filter-count {
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(255,255,255,0.25);
border-radius: 999px;
padding: 0 6px;
font-size: 0.72rem;
font-weight: 700;
min-width: 18px;
margin-left: 4px;
}
.btn-primary .cc-filter-count {
background: rgba(255,255,255,0.30);
}
/* Bulk actions bar */
.cc-bulk-bar {
align-items: center;
gap: 0.75rem;
padding: 0.6rem 1rem;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-sm);
margin-bottom: 0.75rem;
flex-wrap: wrap;
display: flex;
}
.cc-bulk-info {
font-size: 0.85rem;
color: var(--muted);
white-space: nowrap;
}
.cc-bulk-controls {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
align-items: center;
}
/* Search hit highlight in table */
.search-hit {
background: rgba(59, 130, 246, 0.18);
color: var(--accent);
border-radius: 3px;
padding: 0 2px;
font-weight: 600;
font-style: normal;
}