/* ==========================================================================
calm-admin.css (16 september 2026)
Het rustige ontwerpsysteem uit calm.css doorgetrokken naar de beheer- en
resellerkant, zodat admin-dashboard, reseller-dashboard en de losse
beheerpagina's er hetzelfde uitzien als het klantdashboard.
Laadt NA calm.css. De prefix is `html.calm.adm` (twee klassen) omdat het
admin-dashboard een eigen [data-theme="light"]-laag met !important heeft
die tot drie klassen diep gaat; met twee klassen in de prefix wint deze
laag zonder dat er iets uit de pagina zelf verwijderd hoeft te worden.
Verschil met de klantkant: hier bouwt geen script de navigatie. De eigen
zijbalk van admin en reseller blijft staan, alleen in de rustige stijl.
========================================================================== */
/* ---- Zijbalk terug in beeld -------------------------------------------- */
/* calm.css verbergt .sidebar-nav, .nav-section-label en .nav-divider omdat
calm-shell.js daar een eigen menu voor in de plaats zet. Hier is dat menu
de navigatie zelf, dus die regels draaien we terug. */
html.calm.adm .sidebar-nav { display: block !important; flex: 1; padding: 10px 12px !important; overflow-y: auto; }
html.calm.adm .nav-section-label { display: block !important; }
html.calm.adm .nav-divider { display: block !important; }
html.calm.adm .sidebar { width: 236px !important; }
html.calm.adm .main-content { margin-left: 236px !important; }
html.calm.adm .sidebar.collapsed { width: 64px !important; }
html.calm.adm .sidebar.collapsed ~ .main-content { margin-left: 64px !important; }
/* ---- Menu-items in de taal van het klantdashboard ---------------------- */
html.calm.adm .sidebar-nav .nav-item {
display: flex; align-items: center; gap: 10px;
padding: 9px 8px 9px 10px !important; margin-bottom: 1px;
border-radius: 9px !important;
color: var(--calm-ink-2) !important;
font-size: 0.92rem !important; font-weight: 500 !important;
text-decoration: none !important; background: none !important;
transition: background 0.12s, color 0.12s;
}
html.calm.adm .sidebar-nav .nav-item:hover { background: var(--calm-canvas) !important; color: var(--calm-ink) !important; }
html.calm.adm .sidebar-nav .nav-item.active {
background: var(--calm-canvas) !important; color: var(--calm-ink) !important;
font-weight: 600 !important; border-left: none !important; margin-left: 0 !important;
}
html.calm.adm .sidebar-nav .nav-icon { width: 18px; height: 18px; }
html.calm.adm .sidebar-nav .nav-icon svg { width: 18px; height: 18px; stroke: var(--calm-mute); fill: none; stroke-width: 1.7; }
html.calm.adm .sidebar-nav .nav-item:hover .nav-icon svg,
html.calm.adm .sidebar-nav .nav-item.active .nav-icon svg { stroke: var(--calm-ink); }
html.calm.adm .sidebar-nav .nav-text { font-weight: inherit !important; }
/* Groepskopjes: geen kapitalen, geen letterspatiëring, gewoon een rustig kopje */
html.calm.adm .nav-section-label {
color: var(--calm-dim) !important;
font-size: 0.74rem !important; font-weight: 600 !important;
text-transform: none !important; letter-spacing: 0 !important;
padding: 14px 10px 5px !important; margin-top: 0 !important;
}
html.calm.adm .nav-divider { background: var(--calm-line-2) !important; margin: 6px 10px !important; height: 1px; }
html.calm.adm .sidebar.collapsed .nav-text,
html.calm.adm .sidebar.collapsed .nav-section-label { display: none !important; }
html.calm.adm .sidebar.collapsed .nav-item { justify-content: center; padding: 10px 0 !important; }
/* Uitloggen blijft rood, maar als tekst en niet als alarm */
html.calm.adm .sidebar-footer .nav-item[style*="f87171"],
html.calm.adm .sidebar-footer a.nav-item { color: var(--calm-err) !important; font-size: 0.86rem !important; }
html.calm.adm .sidebar-footer a.nav-item svg { stroke: var(--calm-err) !important; }
html.calm.adm .sidebar-footer a.nav-item:hover { background: var(--calm-canvas) !important; color: var(--calm-err) !important; }
html.calm.adm .theme-toggle-row { display: none !important; }
/* ---- Kopbalk ----------------------------------------------------------- */
html.calm.adm .top-bar { padding: 0 34px !important; height: 62px !important; }
html.calm.adm .top-bar h1 { font-size: 1rem !important; font-weight: 600 !important; color: var(--calm-ink) !important; -webkit-text-fill-color: var(--calm-ink) !important; }
html.calm.adm .top-bar .sub { color: var(--calm-mute) !important; font-size: 0.78rem !important; display: block !important; }
html.calm.adm .content-wrapper { padding: 26px 34px 48px !important; }
/* Zoekveldje en knoppen in de kopbalk */
html.calm.adm .top-bar input[type="text"] {
background: var(--calm-card) !important; border: 1px solid var(--calm-line) !important;
border-radius: 999px !important; color: var(--calm-ink) !important;
font-family: var(--calm-font) !important; font-size: 0.85rem !important;
}
html.calm.adm .top-bar input[type="text"]:focus { border-color: var(--calm-ink) !important; box-shadow: none !important; }
html.calm.adm .top-bar svg[style*="stroke"] { stroke: var(--calm-dim) !important; }
/* ---- Knoppen (specificiteit boven de [data-theme=light]-laag) ---------- */
html.calm.adm .btn-sm, html.calm.adm .btn-primary-sm, html.calm.adm .btn-ghost-sm, html.calm.adm .btn-danger-sm,
html.calm.adm .btn-sm.btn-primary-sm, html.calm.adm .btn-sm.btn-ghost-sm, html.calm.adm .btn-sm.btn-danger-sm {
border-radius: 999px !important; font-family: var(--calm-font) !important;
font-weight: 600 !important; font-size: 0.82rem !important;
padding: 7px 14px !important; box-shadow: none !important; transform: none !important;
transition: background 0.12s, border-color 0.12s, color 0.12s;
}
html.calm.adm .btn-sm.btn-primary-sm, html.calm.adm .btn-primary-sm {
background: var(--calm-black) !important; color: #fff !important;
border: 1px solid var(--calm-black) !important; background-image: none !important;
}
html.calm.adm .btn-sm.btn-primary-sm:hover, html.calm.adm .btn-primary-sm:hover { background: #000 !important; border-color: #000 !important; box-shadow: none !important; }
html.calm.adm .btn-sm.btn-ghost-sm, html.calm.adm .btn-ghost-sm {
background: var(--calm-card) !important; color: var(--calm-ink) !important;
border: 1px solid var(--calm-line) !important;
}
html.calm.adm .btn-sm.btn-ghost-sm:hover, html.calm.adm .btn-ghost-sm:hover { border-color: #cfcfc8 !important; color: var(--calm-ink) !important; background: var(--calm-canvas) !important; }
html.calm.adm .btn-sm.btn-danger-sm, html.calm.adm .btn-danger-sm {
background: var(--calm-card) !important; color: var(--calm-err) !important;
border: 1px solid var(--calm-line) !important;
}
html.calm.adm .btn-sm.btn-danger-sm:hover, html.calm.adm .btn-danger-sm:hover { border-color: #e2b6b3 !important; background: #fdf6f5 !important; }
/* De losse actieknopjes per rij: één vorm, één kleur */
html.calm.adm .act-btn, html.calm.adm .act-btn-blue, html.calm.adm .act-btn-cyan, html.calm.adm .act-btn-purple {
display: inline-flex !important; align-items: center; height: 28px;
padding: 0 11px !important; border-radius: 999px !important;
border: 1px solid var(--calm-line) !important; background: var(--calm-card) !important;
color: var(--calm-ink-2) !important; font-size: 0.78rem !important; font-weight: 600 !important;
text-decoration: none !important; box-shadow: none !important;
}
html.calm.adm .act-btn:hover, html.calm.adm .act-btn-blue:hover, html.calm.adm .act-btn-cyan:hover, html.calm.adm .act-btn-purple:hover {
background: var(--calm-canvas) !important; border-color: #cfcfc8 !important; color: var(--calm-ink) !important;
}
/* ---- Kaarten en panelen ------------------------------------------------ */
html.calm.adm .panel, html.calm.adm .card, html.calm.adm .stat-box, html.calm.adm .health-strip {
background: var(--calm-card) !important; border: 1px solid var(--calm-line) !important;
border-radius: 12px !important; box-shadow: none !important;
}
html.calm.adm .panel:hover, html.calm.adm .stat-box:hover { box-shadow: none !important; border-color: var(--calm-line) !important; }
html.calm.adm .panel-header {
border-bottom: 1px solid var(--calm-line-2) !important;
padding: 15px 20px !important; background: none !important;
}
html.calm.adm .panel-title { color: var(--calm-ink) !important; font-size: 0.98rem !important; font-weight: 600 !important; letter-spacing: -0.01em; text-transform: none !important; }
html.calm.adm .panel-count {
background: var(--calm-canvas) !important; color: var(--calm-ink) !important;
border: 1px solid var(--calm-line) !important; border-radius: 999px !important;
font-size: 0.72rem !important; font-weight: 600 !important; padding: 2px 9px !important;
}
html.calm.adm .stat-box { padding: 16px 18px !important; }
html.calm.adm .stat-label {
color: var(--calm-mute) !important; font-size: 0.8rem !important; font-weight: 500 !important;
text-transform: none !important; letter-spacing: 0 !important;
}
html.calm.adm .stat-num {
color: var(--calm-ink) !important; -webkit-text-fill-color: var(--calm-ink) !important;
font-size: 1.7rem !important; font-weight: 700 !important; letter-spacing: -0.03em !important;
font-variant-numeric: tabular-nums; background: none !important;
}
html.calm.adm .stats-strip { gap: 12px !important; margin-bottom: 14px !important; }
html.calm.adm .widget-grid { gap: 12px !important; margin-bottom: 12px !important; }
/* ---- Klantenlijst ------------------------------------------------------ */
html.calm.adm .client-table-header {
color: var(--calm-mute) !important; font-size: 0.78rem !important; font-weight: 500 !important;
text-transform: none !important; letter-spacing: 0 !important;
border-bottom: 1px solid var(--calm-line) !important; padding: 10px 16px !important;
}
html.calm.adm .client-list { padding: 4px 8px 10px !important; gap: 0 !important; }
html.calm.adm .client-card {
background: transparent !important; border: none !important;
border-bottom: 1px solid var(--calm-line-2) !important; border-radius: 0 !important;
padding: 12px 8px !important; box-shadow: none !important; transform: none !important;
}
html.calm.adm .client-card:hover { background: #fafaf8 !important; border-color: var(--calm-line-2) !important; transform: none !important; box-shadow: none !important; }
html.calm.adm .client-card:last-child { border-bottom: none !important; }
html.calm.adm .client-name { color: var(--calm-ink) !important; font-weight: 600 !important; font-size: 0.88rem !important; }
html.calm.adm .client-meta { color: var(--calm-mute) !important; font-size: 0.76rem !important; }
html.calm.adm .client-stat { color: var(--calm-mute) !important; font-size: 0.82rem !important; }
html.calm.adm .client-stat strong { color: var(--calm-ink) !important; }
html.calm.adm .client-stat-cost { color: var(--calm-ink) !important; font-weight: 600 !important; }
html.calm.adm .client-health { border-radius: 999px !important; box-shadow: none !important; }
/* Pakketbadges als rustige chip met stip, net als de statuslabels bij de klant */
html.calm.adm .client-badge, html.calm.adm .badge-starter, html.calm.adm .badge-groei, html.calm.adm .badge-pro {
display: inline-flex !important; align-items: center; gap: 6px;
height: 22px; padding: 0 9px !important; border-radius: 999px !important;
border: 1px solid var(--calm-line) !important; background: var(--calm-card) !important;
color: var(--calm-ink-2) !important; font-size: 0.72rem !important; font-weight: 500 !important;
text-transform: none !important; letter-spacing: 0 !important;
}
html.calm.adm .client-badge::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--calm-dim); flex-shrink: 0; }
html.calm.adm .badge-groei::before { background: var(--calm-accent); }
html.calm.adm .badge-pro::before { background: var(--calm-ink); }
/* ---- Zoeken en filteren ------------------------------------------------ */
html.calm.adm .search-bar { padding: 12px 20px 8px !important; gap: 8px !important; border-bottom: none !important; background: none !important; }
html.calm.adm .search-input, html.calm.adm .filter-select,
html.calm.adm .search-input:not(#calmA), html.calm.adm .filter-select:not(#calmA) {
background: var(--calm-card) !important; border: 1px solid var(--calm-line) !important;
border-radius: 999px !important; color: var(--calm-ink) !important;
font-family: var(--calm-font) !important; font-size: 0.85rem !important; padding: 8px 14px !important;
}
html.calm.adm .filter-select {
appearance: none; -webkit-appearance: none; padding-right: 30px !important;
background-image: url("data:image/svg+xml;utf8,") !important;
background-repeat: no-repeat !important; background-position: right 12px center !important;
}
html.calm.adm .search-input:focus, html.calm.adm .filter-select:focus { border-color: var(--calm-ink) !important; box-shadow: none !important; outline: none !important; }
html.calm.adm .result-count { color: var(--calm-mute) !important; font-size: 0.8rem !important; }
/* ---- Detailweergave van een klant of reseller -------------------------- */
html.calm.adm .detail-header { border-bottom: 1px solid var(--calm-line) !important; background: none !important; }
html.calm.adm .detail-back {
background: var(--calm-card) !important; border: 1px solid var(--calm-line) !important;
border-radius: 999px !important; color: var(--calm-ink-2) !important; font-weight: 600 !important;
}
html.calm.adm .detail-back:hover { background: var(--calm-canvas) !important; color: var(--calm-ink) !important; border-color: #cfcfc8 !important; }
html.calm.adm .detail-tabs { border-bottom: 1px solid var(--calm-line) !important; gap: 22px !important; background: none !important; }
html.calm.adm .detail-tab, html.calm.adm .detail-tab:not(#calmA) {
padding: 12px 2px 13px !important; font-size: 0.9rem !important; font-weight: 500 !important;
color: var(--calm-mute) !important; background: none !important;
border: none !important; border-bottom: 2px solid transparent !important; margin-bottom: -1px;
text-transform: none !important; letter-spacing: 0 !important;
}
html.calm.adm .detail-tab:hover { color: var(--calm-ink) !important; }
html.calm.adm .detail-tab.active, html.calm.adm .detail-tabs .detail-tab.active {
color: var(--calm-ink) !important; font-weight: 600 !important;
border-bottom-color: var(--calm-ink) !important; background: none !important;
}
html.calm.adm .detail-section { border: 1px solid var(--calm-line) !important; background: var(--calm-card) !important; border-radius: 12px !important; box-shadow: none !important; }
html.calm.adm .detail-section h3 {
color: var(--calm-ink) !important; font-size: 0.95rem !important; font-weight: 600 !important;
text-transform: none !important; letter-spacing: -0.01em !important;
}
html.calm.adm .detail-label { color: var(--calm-mute) !important; font-size: 0.82rem !important; }
html.calm.adm .detail-value { color: var(--calm-ink) !important; font-weight: 500 !important; font-size: 0.88rem !important; }
/* ---- Formulieren ------------------------------------------------------- */
html.calm.adm .form-input, html.calm.adm .form-textarea, html.calm.adm .form-select,
html.calm.adm input[type="text"], html.calm.adm input[type="email"], html.calm.adm input[type="url"],
html.calm.adm input[type="password"], html.calm.adm input[type="number"], html.calm.adm input[type="date"],
html.calm.adm select, html.calm.adm textarea {
background: var(--calm-card) !important; border: 1px solid var(--calm-line) !important;
border-radius: 10px !important; color: var(--calm-ink) !important;
font-family: var(--calm-font) !important; font-size: 0.9rem !important; padding: 10px 12px !important;
}
html.calm.adm .form-input:focus, html.calm.adm input:focus, html.calm.adm select:focus, html.calm.adm textarea:focus {
border-color: var(--calm-ink) !important; box-shadow: none !important; outline: none !important;
}
html.calm.adm .form-label {
color: var(--calm-ink-2) !important; font-size: 0.82rem !important; font-weight: 500 !important;
text-transform: none !important; letter-spacing: 0 !important;
}
html.calm.adm .form-hint { color: var(--calm-mute) !important; font-size: 0.78rem !important; }
html.calm.adm .form-check { accent-color: var(--calm-ink); }
html.calm.adm ::placeholder { color: var(--calm-dim) !important; }
/* ---- Schakelaars ------------------------------------------------------- */
html.calm.adm .toggle-row { border-bottom: 1px solid var(--calm-line-2) !important; }
html.calm.adm .toggle-label { color: var(--calm-ink) !important; font-size: 0.88rem !important; font-weight: 500 !important; }
html.calm.adm .toggle-desc { color: var(--calm-mute) !important; font-size: 0.78rem !important; }
html.calm.adm .toggle-switch { background: #dedad3 !important; box-shadow: none !important; }
html.calm.adm .toggle-switch.on { background: var(--calm-ink) !important; }
html.calm.adm .toggle-switch::after, html.calm.adm .toggle-switch.on::after { background: #fff !important; box-shadow: 0 1px 2px rgba(0,0,0,0.15) !important; }
/* ---- Activiteitenlog --------------------------------------------------- */
html.calm.adm .log-item { border-bottom: 1px solid var(--calm-line-2) !important; }
html.calm.adm .log-time { color: var(--calm-dim) !important; font-size: 0.78rem !important; font-variant-numeric: tabular-nums; }
html.calm.adm .log-text { color: var(--calm-ink-2) !important; font-size: 0.88rem !important; }
html.calm.adm .log-detail { color: var(--calm-mute) !important; font-size: 0.78rem !important; }
html.calm.adm .log-dot { width: 6px !important; height: 6px !important; box-shadow: none !important; }
/* ---- Onboardingstappen ------------------------------------------------- */
html.calm.adm .onboard-step { border-bottom: 1px solid var(--calm-line-2) !important; }
html.calm.adm .onboard-text { color: var(--calm-ink-2) !important; font-size: 0.88rem !important; }
html.calm.adm .onboard-icon { width: 22px !important; height: 22px !important; font-size: 0.7rem !important; }
html.calm.adm .onboard-done { background: var(--calm-card) !important; border: 1px solid var(--calm-line) !important; color: var(--calm-ok) !important; }
html.calm.adm .onboard-pending { background: var(--calm-card) !important; border: 1px solid var(--calm-line) !important; color: var(--calm-dim) !important; }
/* ---- Taalkiezer -------------------------------------------------------- */
html.calm.adm .lang-btn {
background: var(--calm-card) !important; border: 1px solid var(--calm-line) !important;
border-radius: 999px !important; color: var(--calm-mute) !important;
font-family: var(--calm-font) !important; font-weight: 600 !important; font-size: 0.74rem !important;
}
html.calm.adm .lang-btn:hover { background: var(--calm-canvas) !important; color: var(--calm-ink) !important; }
html.calm.adm .lang-btn.active { background: var(--calm-ink) !important; border-color: var(--calm-ink) !important; color: #fff !important; }
/* ---- Tabellen die met de hand in de pagina staan ----------------------- */
html.calm.adm table th {
color: var(--calm-mute) !important; font-size: 0.78rem !important; font-weight: 500 !important;
text-transform: none !important; letter-spacing: 0 !important;
border-bottom: 1px solid var(--calm-line) !important;
}
html.calm.adm table td { border-bottom: 1px solid var(--calm-line-2) !important; color: var(--calm-ink-2) !important; }
html.calm.adm tbody tr:hover td { background: #fafaf8 !important; }
/* ---- Links ------------------------------------------------------------- */
/* De pagina kleurt alle links blauw met (0,3,1); hier blijven ze in de inkt
staan, behalve waar de pagina bewust een accentlink wil. */
html.calm.adm .main-content a:not(.nav-item):not(.btn-sm):not(.act-btn):not(.detail-tab) { color: var(--calm-ink) !important; text-decoration: none !important; }
html.calm.adm .main-content a:not(.nav-item):not(.btn-sm):not(.act-btn):not(.detail-tab):hover { color: var(--calm-ink) !important; }
/* ---- Restjes: donkere blokken en gloed uit ----------------------------- */
html.calm.adm .sidebar-overlay { background: rgba(17,19,17,0.35) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html.calm.adm .mobile-menu-btn span { background: var(--calm-ink) !important; }
html.calm.adm [style*="rgba(255,255,255,0.03)"], html.calm.adm [style*="rgba(255,255,255,0.04)"],
html.calm.adm [style*="rgba(255, 255, 255, 0.03)"], html.calm.adm [style*="rgba(255, 255, 255, 0.04)"] { background: var(--calm-canvas) !important; }
html.calm.adm [style*="background:#0f0f1a"], html.calm.adm [style*="background: #0f0f1a"],
html.calm.adm [style*="background:#1a1a2e"], html.calm.adm [style*="background: #1a1a2e"],
html.calm.adm [style*="background:#141420"], html.calm.adm [style*="background: #141420"],
html.calm.adm [style*="background:rgba(15,15,26"], html.calm.adm [style*="background: rgba(15,15,26"],
html.calm.adm [style*="background:rgba(26,26,46"], html.calm.adm [style*="background: rgba(26,26,46"] {
background: var(--calm-card) !important; border: 1px solid var(--calm-line) !important; color: var(--calm-ink-2) !important;
}
html.calm.adm [style*="-webkit-background-clip: text"], html.calm.adm [style*="-webkit-background-clip:text"] {
-webkit-text-fill-color: var(--calm-ink) !important; background: none !important;
}
/* ---- Mobiel ------------------------------------------------------------ */
@media (max-width: 768px) {
html.calm.adm .main-content { margin-left: 0 !important; }
html.calm.adm .top-bar { padding: 10px 16px !important; height: auto !important; }
html.calm.adm .content-wrapper { padding: 18px 16px 40px !important; }
html.calm.adm .detail-tabs { overflow-x: auto; gap: 16px !important; }
}
/* ==========================================================================
Het ingebedde bezoekersblok (Insight)
Het beheerdashboard laadt /assets/insight-block.html bovenaan het Overzicht.
Dat blok heeft een eigen tokenset (--ins-*) en een eigen donkere stijl met
gloed, kapitalen en blauwe pillen. Hier hertinten we die tokens naar calm en
halen we de sierlagen eruit. Alles hangt onder html.calm.adm, dus de losse
pagina /admin/bezoekers en de WordPress-plugin blijven ongemoeid.
========================================================================== */
html.calm.adm #insightBlock {
--ins-bg: var(--calm-canvas); --ins-panel: var(--calm-card); --ins-panel-2: var(--calm-canvas);
--ins-line: var(--calm-line); --ins-line-soft: var(--calm-line-2);
--ins-text: var(--calm-ink); --ins-dim: var(--calm-mute); --ins-faint: var(--calm-dim);
--ins-blue: var(--calm-accent); --ins-cyan: var(--calm-accent); --ins-violet: var(--calm-accent);
--ins-green: var(--calm-ok); --ins-amber: var(--calm-warn); --ins-red: var(--calm-err);
--ins-glow: transparent; --ins-radius: 12px;
font-family: var(--calm-font) !important; background: transparent !important;
}
html.calm.adm #insightBlock * { font-family: var(--calm-font) !important; }
html.calm.adm #insightBlock .ins-title { font-size: 1.15rem !important; font-weight: 600 !important; letter-spacing: -0.015em !important; color: var(--calm-ink); }
html.calm.adm #insightBlock .ins-sub { color: var(--calm-mute); font-size: 0.85rem; }
/* Geen gloed, geen zwaai, geen optillen */
html.calm.adm #insightBlock .ins-live::after { display: none !important; }
html.calm.adm #insightBlock .ins-dot { animation: none !important; box-shadow: none !important; }
html.calm.adm #insightBlock .kpi:hover { transform: none !important; box-shadow: none !important; border-color: #cfcfc8 !important; }
html.calm.adm #insightBlock .kpi::after { display: none !important; }
html.calm.adm #insightBlock .chart .line { filter: none !important; stroke: var(--calm-ink) !important; }
html.calm.adm #insightBlock .chart .pt { fill: var(--calm-ink) !important; }
html.calm.adm #insightBlock .fbar { background: #ebebe7 !important; }
html.calm.adm #insightBlock .fstage.done .fbar { background: #e3eee8 !important; }
html.calm.adm #insightBlock .step-bar { background: var(--calm-ink) !important; }
/* Labels in zinnen, niet in kapitalen */
html.calm.adm #insightBlock .kpi-label, html.calm.adm #insightBlock .eff-col span {
text-transform: none !important; letter-spacing: 0 !important;
font-size: 0.8rem !important; font-weight: 500 !important; color: var(--calm-mute) !important;
min-height: 0 !important; margin-bottom: 8px !important;
}
html.calm.adm #insightBlock .kpi-label svg { display: none !important; }
html.calm.adm #insightBlock .kpi-val { font-size: 1.7rem !important; font-weight: 700 !important; letter-spacing: -0.03em !important; color: var(--calm-ink) !important; }
html.calm.adm #insightBlock .kpi-meta { color: var(--calm-mute) !important; }
/* Gekleurde icoonvlakjes naast de paneelkoppen: rustig, of helemaal weg */
html.calm.adm #insightBlock .panel-h .ico { background: var(--calm-canvas) !important; border: 1px solid var(--calm-line); width: 24px; height: 24px; }
html.calm.adm #insightBlock .panel-h .ico svg { stroke: var(--calm-mute) !important; }
html.calm.adm #insightBlock .panel-h h2 { font-size: 0.98rem !important; font-weight: 600 !important; color: var(--calm-ink); }
html.calm.adm #insightBlock .panel-h .hint { color: var(--calm-mute) !important; font-size: 0.78rem !important; }
/* Knoppen en filters in dezelfde vorm als de rest: pil, zwart als actief */
html.calm.adm #insightBlock .ins-range { border-radius: 999px !important; background: var(--calm-card) !important; border: 1px solid var(--calm-line) !important; }
html.calm.adm #insightBlock .ins-range button { border-radius: 999px !important; font-size: 0.82rem !important; font-weight: 500 !important; color: var(--calm-mute) !important; }
html.calm.adm #insightBlock .ins-range button:hover { color: var(--calm-ink) !important; }
html.calm.adm #insightBlock .ins-range button.on { background: var(--calm-ink) !important; color: #fff !important; box-shadow: none !important; font-weight: 600 !important; }
html.calm.adm #insightBlock .ins-btn, html.calm.adm #insightBlock .ins-back, html.calm.adm #insightBlock .ins-live {
border-radius: 999px !important; background: var(--calm-card) !important;
border: 1px solid var(--calm-line) !important; color: var(--calm-ink-2) !important;
font-size: 0.82rem !important; font-weight: 600 !important;
}
html.calm.adm #insightBlock .ins-btn:hover, html.calm.adm #insightBlock .ins-back:hover { border-color: #cfcfc8 !important; color: var(--calm-ink) !important; }
html.calm.adm #insightBlock .chg-form button { background: var(--calm-black) !important; border-radius: 999px !important; font-weight: 600 !important; }
html.calm.adm #insightBlock .chg-form input, html.calm.adm #insightBlock .chg-form select, html.calm.adm #insightBlock .chg-form textarea {
border-radius: 10px !important; background: var(--calm-card) !important; border: 1px solid var(--calm-line) !important; color: var(--calm-ink) !important;
}
/* Eén thema: de maanknop hoort hier niet */
html.calm.adm #insightBlock #themeBtn { display: none !important; }
/* Kaartjes en tabellen gelijk aan de rest van het beheerdashboard */
html.calm.adm #insightBlock .kpi, html.calm.adm #insightBlock .panel { border-radius: 12px !important; box-shadow: none !important; }
html.calm.adm #insightBlock .trend { border-radius: 999px !important; font-weight: 600 !important; background: var(--calm-card) !important; border: 1px solid var(--calm-line) !important; }
html.calm.adm #insightBlock .trend.up { color: var(--calm-ok) !important; }
html.calm.adm #insightBlock .trend.down { color: var(--calm-err) !important; }
html.calm.adm #insightBlock .tbl th { text-transform: none !important; letter-spacing: 0 !important; font-weight: 500 !important; color: var(--calm-mute) !important; }
/* ---- Statusstrook boven de klantenlijst -------------------------------- */
html.calm.adm #clientStatsBar { padding: 0 34px 14px !important; gap: 8px !important; align-items: center; }
html.calm.adm .calm-chip {
display: inline-flex; align-items: center; gap: 7px;
height: 30px; padding: 0 12px; border-radius: 999px;
background: var(--calm-card); border: 1px solid var(--calm-line);
}
html.calm.adm .calm-chip[data-filter] { cursor: pointer; }
html.calm.adm .calm-chip[data-filter]:hover { border-color: #cfcfc8; background: var(--calm-canvas); }
html.calm.adm .calm-chip-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
html.calm.adm .calm-chip-num { font-size: 0.86rem; font-weight: 700; color: var(--calm-ink); font-variant-numeric: tabular-nums; }
html.calm.adm .calm-chip-lbl { font-size: 0.8rem; color: var(--calm-mute); white-space: nowrap; }
html.calm.adm .calm-chip-gap { flex: 1; min-width: 12px; }
/* ---- Kleine correcties ------------------------------------------------- */
/* De pagina-achtergrond zat op .content-wrapper, waardoor een blok van 700px
breed een andere tint had dan het canvas eromheen. */
html.calm.adm .content-wrapper { background: transparent !important; }
html.calm.adm .act-btn { gap: 6px; }
html.calm.adm .act-btn svg { stroke: currentColor; }
html.calm.adm .btn-sm svg, html.calm.adm .btn-primary-sm svg, html.calm.adm .btn-ghost-sm svg { margin-right: 6px; stroke: currentColor; }
html.calm.adm .search-bar { padding: 0 34px 12px !important; }
html.calm.adm .client-list, html.calm.adm .client-table-header { padding-left: 34px !important; padding-right: 34px !important; }
/* ---- Cijfers in inkt, niet in accentkleur ------------------------------ */
/* De pagina kleurt bedragen en tellers met --brand-primary. In calm is het
accent alleen voor links en nadruk; getallen staan in de inkt. */
html.calm.adm { --brand-primary: var(--calm-ink); }
/* Platformlabel (WP, Shopify, ...) als rustige chip */
html.calm.adm .col-platform span, html.calm.adm .col-editorial span {
background: var(--calm-card) !important; color: var(--calm-ink-2) !important;
border: 1px solid var(--calm-line) !important; border-radius: 999px !important;
padding: 2px 9px !important; font-weight: 500 !important; font-size: 0.72rem !important;
}
html.calm.adm .col-score { width: 74px !important; }
html.calm.adm .col-score-none { color: var(--calm-dim); font-size: 0.76rem; }
/* Terugknop met een echte pijl in plaats van een tekstteken */
html.calm.adm .detail-back::before {
content: ""; width: 14px; height: 14px; flex: none; margin-right: 6px;
background: url("data:image/svg+xml;utf8,") no-repeat center / contain;
}
html.calm.adm .detail-back { display: inline-flex !important; align-items: center; }
/* ---- Kleuren in de klantregel ------------------------------------------ */
/* admin-light-override.css zet ALLE spans en divs in een klantregel op grijs
met !important, ook de bedragen die de pagina zelf inkt meegeeft. Hier
zetten we de basis terug naar inkt-2 en laten we de bewuste kleuren staan. */
html.calm.adm .client-card span, html.calm.adm .client-card div { color: var(--calm-ink-2) !important; }
html.calm.adm .client-card .client-name, html.calm.adm .client-card [style*="color:#111311"] { color: var(--calm-ink) !important; }
html.calm.adm .client-card .client-meta, html.calm.adm .client-card [style*="color:#a3a5a0"],
html.calm.adm .client-card .col-score-none { color: var(--calm-dim) !important; }
html.calm.adm .client-card [style*="color:#ef4444"], html.calm.adm .client-card [style*="color:#d0433b"] { color: var(--calm-err) !important; }
html.calm.adm .client-card a { color: var(--calm-ink) !important; }
/* ---- Resellerdashboard ------------------------------------------------- */
/* Het accentbalkje links van elke tegel is een sierlaag; calm kent geen
gekleurde randen aan de zijkant van een kaart. */
html.calm.adm .stat-box::before, html.calm.adm .stat-box::after { display: none !important; }
html.calm.adm .theme-toggle, html.calm.adm #themeToggleBtn { display: none !important; }
html.calm.adm .sidebar-nav .nav-icon svg { width: 18px; height: 18px; }
/* Legenda en lege staten in de rustige toon: de stip draagt de kleur, de
tekst blijft leesbaar donker. */
html.calm.adm .health-strip { padding: 10px 14px !important; }
html.calm.adm .health-strip span, html.calm.adm .health-strip div { color: var(--calm-ink-2) !important; }
html.calm.adm .main-content [style*="color:#10b981"]:not(.calm-chip-dot),
html.calm.adm .main-content [style*="color: #10b981"]:not(.calm-chip-dot) { color: var(--calm-ok) !important; }
html.calm.adm .panel [style*="text-align:center"][style*="color"] { color: var(--calm-mute) !important; }
/* De strook bevat nu calm-chips; die dragen hun eigen kleuren. */
html.calm.adm .health-strip { display: flex; gap: 8px; flex-wrap: wrap; }
html.calm.adm .health-strip .calm-chip-num { color: var(--calm-ink) !important; }
html.calm.adm .health-strip .calm-chip-lbl { color: var(--calm-mute) !important; }
/* ==========================================================================
Prospects (/admin/prospects)
Een losse pagina met een eigen tokenset (--bg, --bg-card, --text, ...) en
een donkere opzet. Hier hertinten we die tokens naar calm en halen we de
sierlagen weg, zodat de pagina bij de rest van het beheer hoort. De opzet
blijft: kopbalk met drie links in plaats van een zijbalk.
========================================================================== */
html.calm.adm.pros {
--bg: var(--calm-canvas); --bg-card: var(--calm-card); --bg-hover: #f1f1ee;
--border: var(--calm-line); --border-accent: var(--calm-line);
--text: var(--calm-ink-2); --text-muted: var(--calm-mute); --text-bright: var(--calm-ink);
--accent: var(--calm-accent); --accent-light: var(--calm-accent);
--green: var(--calm-ok); --yellow: var(--calm-warn); --red: var(--calm-err); --blue: var(--calm-accent);
}
html.calm.adm.pros body { background: var(--calm-canvas) !important; color: var(--calm-ink-2) !important; font-family: var(--calm-font) !important; font-size: 15px; }
html.calm.adm.pros .topbar { background: var(--calm-card) !important; border-bottom: 1px solid var(--calm-line) !important; height: 62px !important; padding: 0 34px !important; }
html.calm.adm.pros .topbar-logo { color: var(--calm-ink) !important; font-size: 0.98rem !important; font-weight: 700 !important; letter-spacing: -0.01em; }
html.calm.adm.pros .topbar-nav a {
border-radius: 999px !important; color: var(--calm-mute) !important;
font-size: 0.88rem !important; font-weight: 500 !important; padding: 7px 14px !important;
}
html.calm.adm.pros .topbar-nav a:hover { background: var(--calm-canvas) !important; color: var(--calm-ink) !important; }
html.calm.adm.pros .topbar-nav a.active { background: var(--calm-canvas) !important; color: var(--calm-ink) !important; font-weight: 600 !important; }
html.calm.adm.pros .page { padding: 26px 34px 48px !important; }
html.calm.adm.pros .page-title { color: var(--calm-ink) !important; font-size: 1.45rem !important; font-weight: 700 !important; letter-spacing: -0.025em !important; }
html.calm.adm.pros .btn, html.calm.adm.pros .btn-sm {
border-radius: 999px !important; font-family: var(--calm-font) !important;
font-weight: 600 !important; box-shadow: none !important; transform: none !important;
border: 1px solid var(--calm-line) !important; background: var(--calm-card) !important; color: var(--calm-ink) !important;
}
html.calm.adm.pros .btn:hover { border-color: #cfcfc8 !important; background: var(--calm-canvas) !important; }
html.calm.adm.pros .btn-primary { background: var(--calm-black) !important; color: #fff !important; border-color: var(--calm-black) !important; }
html.calm.adm.pros .btn-primary:hover { background: #000 !important; border-color: #000 !important; }
html.calm.adm.pros .btn-danger { color: var(--calm-err) !important; }
html.calm.adm.pros .btn-green, html.calm.adm.pros .btn-orange { background: var(--calm-card) !important; color: var(--calm-ink) !important; }
html.calm.adm.pros .stat, html.calm.adm.pros .table-container, html.calm.adm.pros .detail-panel,
html.calm.adm.pros .modal, html.calm.adm.pros .detail-section, html.calm.adm.pros .email-preview-box {
background: var(--calm-card) !important; border: 1px solid var(--calm-line) !important;
border-radius: 12px !important; box-shadow: none !important;
}
html.calm.adm.pros .stat-val { color: var(--calm-ink) !important; font-weight: 700 !important; letter-spacing: -0.03em !important; }
html.calm.adm.pros .stat-lbl { color: var(--calm-mute) !important; text-transform: none !important; letter-spacing: 0 !important; font-weight: 500 !important; }
html.calm.adm.pros th {
background: transparent !important; color: var(--calm-mute) !important;
text-transform: none !important; letter-spacing: 0 !important;
font-weight: 500 !important; border-bottom: 1px solid var(--calm-line) !important;
}
html.calm.adm.pros td { border-bottom: 1px solid var(--calm-line-2) !important; color: var(--calm-ink-2) !important; }
html.calm.adm.pros tbody tr:hover td { background: #fafaf8 !important; }
html.calm.adm.pros .cell-company { color: var(--calm-ink) !important; font-weight: 600 !important; }
html.calm.adm.pros .cell-url, html.calm.adm.pros .cell-email { color: var(--calm-mute) !important; }
/* Status en score als rustige chip met stip */
html.calm.adm.pros .status, html.calm.adm.pros .score-pill, html.calm.adm.pros .filter-count {
display: inline-flex !important; align-items: center; gap: 6px;
border-radius: 999px !important; background: var(--calm-card) !important;
border: 1px solid var(--calm-line) !important; color: var(--calm-ink-2) !important;
font-size: 0.74rem !important; font-weight: 500 !important;
text-transform: none !important; letter-spacing: 0 !important; padding: 3px 10px !important;
}
html.calm.adm.pros .status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--calm-dim); flex: none; }
html.calm.adm.pros .st-sent::before, html.calm.adm.pros .st-scanned::before { background: var(--calm-ok); }
html.calm.adm.pros .st-scanning::before, html.calm.adm.pros .st-email_drafted::before { background: var(--calm-warn); }
html.calm.adm.pros .st-blocked::before, html.calm.adm.pros .st-opted_out::before { background: var(--calm-err); }
html.calm.adm.pros .st-new::before { background: var(--calm-accent); }
html.calm.adm.pros .score-good { color: var(--calm-ok) !important; }
html.calm.adm.pros .score-ok { color: var(--calm-warn) !important; }
html.calm.adm.pros .score-bad { color: var(--calm-err) !important; }
html.calm.adm.pros .score-none { color: var(--calm-dim) !important; }
html.calm.adm.pros input, html.calm.adm.pros select, html.calm.adm.pros textarea {
background: var(--calm-card) !important; border: 1px solid var(--calm-line) !important;
border-radius: 10px !important; color: var(--calm-ink) !important; font-family: var(--calm-font) !important;
}
html.calm.adm.pros input:focus, html.calm.adm.pros select:focus, html.calm.adm.pros textarea:focus { border-color: var(--calm-ink) !important; box-shadow: none !important; outline: none !important; }
html.calm.adm.pros .modal-bg, html.calm.adm.pros .detail-overlay { background: rgba(17,19,17,0.35) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html.calm.adm.pros .detail-score-fill, html.calm.adm.pros .detail-score-bar i { background: var(--calm-ink) !important; }
html.calm.adm.pros .toast { border-radius: 12px !important; background: var(--calm-ink) !important; color: #fff !important; box-shadow: 0 16px 40px -20px rgba(0,0,0,0.4) !important; }
html.calm.adm.pros .empty { color: var(--calm-mute) !important; }
html.calm.adm.pros .btn { text-decoration: none !important; gap: 6px; }
html.calm.adm.pros select { appearance: none; -webkit-appearance: none; padding-right: 30px !important;
background-image: url("data:image/svg+xml;utf8,") !important;
background-repeat: no-repeat !important; background-position: right 12px center !important; }
/* ==========================================================================
Rapporten (/admin-rapporten)
Deze pagina stond al in de rustige kleuren maar niet in het lettertype en
met kapitalen in de tabelkop.
========================================================================== */
html.calm.adm.rap body, html.calm.adm.rap button, html.calm.adm.rap input,
html.calm.adm.rap select, html.calm.adm.rap textarea { font-family: var(--calm-font) !important; }
html.calm.adm.rap body { font-size: 15px; }
html.calm.adm.rap th { text-transform: none !important; letter-spacing: 0 !important; font-weight: 500 !important; font-size: 0.78rem !important; }
html.calm.adm.rap .knop { border-radius: 999px !important; }
html.calm.adm.rap .knop-lijn:hover { border-color: #cfcfc8 !important; color: var(--calm-ink) !important; }
html.calm.adm.rap .kop h1 { letter-spacing: -0.025em; }
/* ==========================================================================
Bezoekers (/admin/bezoekers): dezelfde Insight-hertinting als op het
Overzicht, maar dan op de losse pagina.
========================================================================== */
html.calm.adm.bez body { background: var(--calm-canvas) !important; }
html.calm.adm.bez #insightBlock { background: var(--calm-canvas) !important; }
html.calm.adm.bez #insightBlock .ins-wrap { padding: 26px 34px 60px; }
/* Tabstrook boven het Overzicht: tekst met een streep, zoals bij de klant. */
html.calm.adm .detail-tab, html.calm.adm .detail-tab.active { padding: 11px 0 12px !important; margin-right: 22px; }
html.calm.adm .main-content > .page-section .detail-tab:not(#calmA) { color: var(--calm-mute) !important; }
html.calm.adm .main-content > .page-section .detail-tab.active:not(#calmA) { color: var(--calm-ink) !important; border-bottom-color: var(--calm-ink) !important; }
/* Kleine groene labels ("Actief", "Live") als rustige chip met stip. */
html.calm.adm .panel-count, html.calm.adm #attentionBadge {
display: inline-flex !important; align-items: center; gap: 6px;
background: var(--calm-card) !important; color: var(--calm-ink) !important;
border: 1px solid var(--calm-line) !important; border-radius: 999px !important;
font-size: 0.72rem !important; font-weight: 500 !important; padding: 3px 10px !important;
}
/* ==========================================================================
Klantenlijst (16 september 2026)
Herzien voor groei naar 50+ klanten. Uitgangspunt: toon de uitzondering,
niet de regel. Bijna iedereen draait op WordPress, met redactie en managed
facturatie; dat hoeft niet in elke rij te staan. Wie afwijkt krijgt een
markering, en wie aandacht vraagt staat bovenaan.
========================================================================== */
/* ---- Strook met klanten die aandacht vragen ---------------------------- */
html.calm.adm .cl-attention {
margin: 0 34px 14px; padding: 13px 16px 14px;
background: var(--calm-card); border: 1px solid var(--calm-line); border-radius: 12px;
}
html.calm.adm .cl-att-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
html.calm.adm .cl-att-title { font-size: 0.88rem; font-weight: 600; color: var(--calm-ink); }
html.calm.adm .cl-att-filter {
margin-left: auto; background: none; border: none; padding: 0; cursor: pointer;
font-family: var(--calm-font); font-size: 0.82rem; font-weight: 500; color: var(--calm-mute);
text-decoration: underline; text-underline-offset: 3px;
}
html.calm.adm .cl-att-filter:hover { color: var(--calm-ink); }
html.calm.adm .cl-att-list { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
html.calm.adm .cl-att-item {
display: inline-flex; align-items: center; gap: 8px;
padding: 7px 13px 7px 11px; border-radius: 999px;
background: var(--calm-canvas); border: 1px solid var(--calm-line);
font-family: var(--calm-font); font-size: 0.83rem; cursor: pointer; text-align: left;
}
html.calm.adm .cl-att-item:hover { border-color: #cfcfc8; background: #f1f1ee; }
html.calm.adm .cl-att-name { font-weight: 600; color: var(--calm-ink); }
html.calm.adm .cl-att-why { color: var(--calm-mute); }
html.calm.adm .cl-att-rest { color: var(--calm-mute); font-size: 0.82rem; }
/* ---- Tellers ----------------------------------------------------------- */
html.calm.adm .cl-chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 0 34px 14px; }
/* ---- Werkbalk ---------------------------------------------------------- */
html.calm.adm .cl-toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 0 34px 12px; }
html.calm.adm .cl-search { position: relative; flex: 1 1 340px; min-width: 240px; max-width: 460px; }
html.calm.adm .cl-search svg {
position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
width: 16px; height: 16px; stroke: var(--calm-dim); pointer-events: none;
}
html.calm.adm .cl-search input {
width: 100%; height: 38px; padding: 0 44px 0 40px;
background: var(--calm-card); border: 1px solid var(--calm-line); border-radius: 999px;
color: var(--calm-ink); font-family: var(--calm-font); font-size: 0.88rem;
}
html.calm.adm .cl-search input:focus { border-color: var(--calm-ink); outline: none; box-shadow: none; }
html.calm.adm .cl-search input:focus + .cl-kbd { opacity: 0; }
html.calm.adm .cl-kbd {
position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
font-family: var(--calm-font); font-size: 0.72rem; font-weight: 600; color: var(--calm-dim);
border: 1px solid var(--calm-line); border-radius: 6px; padding: 1px 7px; background: var(--calm-canvas);
pointer-events: none; transition: opacity 0.12s;
}
/* ---- Raster: kop en rijen delen exact dezelfde kolommen ---------------- */
html.calm.adm .cl-head,
html.calm.adm .cl-row {
display: grid;
grid-template-columns: 22px minmax(190px, 1.7fr) 168px 62px 96px 74px 104px 72px;
align-items: center; gap: 14px;
}
html.calm.adm .cl-head {
position: sticky; top: 62px; z-index: 20;
margin: 0 34px; padding: 9px 12px;
background: var(--calm-canvas); border-bottom: 1px solid var(--calm-line);
}
html.calm.adm .cl-sort {
background: none; border: none; padding: 0; cursor: pointer; text-align: left;
font-family: var(--calm-font); font-size: 0.78rem; font-weight: 500; color: var(--calm-mute);
display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
}
html.calm.adm .cl-sort.cl-num { justify-content: flex-end; text-align: right; }
html.calm.adm .cl-sort:hover { color: var(--calm-ink); }
html.calm.adm .cl-sort.on { color: var(--calm-ink); font-weight: 600; }
html.calm.adm .cl-sort.on::after {
content: ""; width: 9px; height: 9px; flex: none;
background: url("data:image/svg+xml;utf8,") no-repeat center / contain;
}
html.calm.adm .cl-sort.on.up::after { transform: rotate(180deg); }
html.calm.adm .client-list { padding: 0 34px 10px !important; display: block !important; }
html.calm.adm .cl-row {
padding: 11px 12px; border-bottom: 1px solid var(--calm-line-2);
cursor: pointer; transition: background 0.1s;
}
html.calm.adm .cl-row:hover { background: #fafaf8; }
html.calm.adm .cl-row:focus-visible { outline: 2px solid var(--calm-ink); outline-offset: -2px; border-radius: 8px; }
html.calm.adm .cl-row:last-child { border-bottom: none; }
html.calm.adm .cl-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex: none; }
/* Naam en, alleen waar iets afwijkt, een markering */
html.calm.adm .cl-c-name { min-width: 0; }
html.calm.adm .cl-name {
color: var(--calm-ink); font-weight: 600; font-size: 0.9rem;
display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
}
html.calm.adm .cl-sub {
color: var(--calm-mute); font-size: 0.76rem; margin-top: 2px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
html.calm.adm .cl-mark {
font-size: 0.7rem; font-weight: 500; color: var(--calm-mute);
border: 1px solid var(--calm-line); border-radius: 999px; padding: 1px 8px; white-space: nowrap;
}
html.calm.adm .cl-mark-warn { color: var(--calm-warn); border-color: #ecd9b4; }
html.calm.adm .cl-mark-bad { color: var(--calm-err); border-color: #eec8c5; }
/* Artikelen: balk, aantal, pakket */
html.calm.adm .cl-c-art { display: flex; align-items: center; gap: 9px; }
html.calm.adm .cl-bar { width: 52px; height: 5px; border-radius: 3px; background: #ebebe7; flex: none; overflow: hidden; }
html.calm.adm .cl-bar i { display: block; height: 100%; background: var(--calm-ink); border-radius: 3px; }
html.calm.adm .cl-bar.is-empty { background: #e3e3de; }
html.calm.adm .cl-art-n { font-size: 0.84rem; font-weight: 600; color: var(--calm-ink); font-variant-numeric: tabular-nums; }
html.calm.adm .cl-pkg { font-size: 0.74rem; color: var(--calm-mute); }
html.calm.adm .cl-c-score,
html.calm.adm .cl-c-last,
html.calm.adm .cl-c-mrr,
html.calm.adm .cl-c-cost { text-align: right; font-size: 0.84rem; color: var(--calm-ink); font-variant-numeric: tabular-nums; }
html.calm.adm .cl-c-last { color: var(--calm-ink-2); font-size: 0.8rem; }
html.calm.adm .cl-c-last.is-stale { color: var(--calm-err); }
html.calm.adm .cl-c-cost { line-height: 1.25; }
html.calm.adm .cl-cost-sub { display: block; font-size: 0.7rem; color: var(--calm-dim); }
html.calm.adm .cl-none { color: var(--calm-dim); }
/* Acties: rustig tot je de rij aanwijst */
html.calm.adm .cl-c-act { display: flex; gap: 4px; justify-content: flex-end; }
html.calm.adm .cl-act {
width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
border: 1px solid transparent; border-radius: 8px; background: none; cursor: pointer;
color: var(--calm-dim); opacity: 0; transition: opacity 0.12s, color 0.12s, border-color 0.12s;
}
html.calm.adm .cl-act svg { width: 15px; height: 15px; }
html.calm.adm .cl-row:hover .cl-act,
html.calm.adm .cl-row:focus-within .cl-act { opacity: 1; }
html.calm.adm .cl-act:hover { color: var(--calm-ink); border-color: var(--calm-line); background: var(--calm-card); }
html.calm.adm .cl-act:focus-visible { opacity: 1; outline: 2px solid var(--calm-ink); outline-offset: 1px; }
/* Smaller scherm: geld en inkoop vallen als eerste weg, signaal blijft */
@media (max-width: 1280px) {
html.calm.adm .cl-head, html.calm.adm .cl-row { grid-template-columns: 22px minmax(170px, 1.7fr) 150px 58px 92px 72px 72px; }
html.calm.adm .cl-c-cost, html.calm.adm .cl-sort[data-sort="cost"] { display: none; }
}
@media (max-width: 1024px) {
html.calm.adm .cl-head, html.calm.adm .cl-row { grid-template-columns: 22px minmax(150px, 1.7fr) 140px 58px 88px 72px; }
html.calm.adm .cl-c-mrr, html.calm.adm .cl-sort[data-sort="mrr"] { display: none; }
}
@media (max-width: 860px) {
html.calm.adm .cl-chips, html.calm.adm .cl-toolbar { padding-left: 16px; padding-right: 16px; }
html.calm.adm .cl-attention { margin: 0 16px 14px; }
html.calm.adm .cl-search { flex: 1 1 100%; max-width: none; }
html.calm.adm .cl-head { display: none !important; }
html.calm.adm .client-list { padding: 0 16px 10px !important; }
/* Twee regels per klant. Elk onderdeel krijgt een eigen vak, anders vallen
score en "laatst" over elkaar heen. */
html.calm.adm .cl-row {
grid-template-columns: 16px auto auto 1fr auto;
grid-template-areas: "sig name name name act" "sig art score last last";
gap: 5px 10px; padding: 13px 2px;
}
html.calm.adm .cl-c-sig { grid-area: sig; align-self: start; margin-top: 7px; }
html.calm.adm .cl-c-name { grid-area: name; }
html.calm.adm .cl-c-act { grid-area: act; align-self: start; }
html.calm.adm .cl-c-art { grid-area: art; }
html.calm.adm .cl-c-score { grid-area: score; text-align: left; font-size: 0.8rem; color: var(--calm-mute); }
html.calm.adm .cl-c-score::before { content: "score "; }
html.calm.adm .cl-c-last { grid-area: last; text-align: right; font-size: 0.8rem; }
html.calm.adm .cl-c-mrr, html.calm.adm .cl-c-cost { display: none; }
html.calm.adm .cl-act { opacity: 1; }
html.calm.adm .cl-att-list { flex-direction: column; align-items: stretch; }
html.calm.adm .cl-att-item { justify-content: flex-start; }
}
/* Stip alleen bij een uitzondering; open stip = nog geen gegevens */
html.calm.adm .cl-dot-open { background: none !important; border: 1.5px solid var(--calm-line); width: 7px; height: 7px; }
html.calm.adm .cl-sort-sig { width: 22px; padding: 0; }
html.calm.adm .cl-sort-sig::before {
content: ""; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--calm-dim); flex: none;
}
html.calm.adm .cl-sort-sig.on::before { border-color: var(--calm-ink); background: var(--calm-ink); }
html.calm.adm .cl-sort-sig.on::after { display: none; }
/* De generieke invoerregel hierboven zet padding met !important; het zoekveld
heeft links ruimte nodig voor het vergrootglas en rechts voor de toetshint. */
html.calm.adm .cl-search input[type="text"] { padding: 0 44px 0 40px !important; height: 38px !important; border-radius: 999px !important; }
/* ---- De lijst op een eigen witte kaart --------------------------------- */
/* Zonder dit staat de tabel rechtstreeks op het canvas en is het grootste
vlak van het scherm de achtergrondkleur. Kop en lijst zijn twee elementen
maar moeten samen als één kaart lezen, vandaar de gedeelde randen. */
html.calm.adm .cl-head {
background: var(--calm-card) !important;
margin: 0 34px !important; padding: 11px 16px !important;
border: 1px solid var(--calm-line); border-bottom-color: var(--calm-line);
border-radius: 12px 12px 0 0;
}
html.calm.adm .client-list {
background: var(--calm-card);
margin: 0 34px 12px; padding: 0 4px 4px !important;
border: 1px solid var(--calm-line); border-top: none; border-radius: 0 0 12px 12px;
}
html.calm.adm .cl-row { padding-left: 12px; padding-right: 12px; }
html.calm.adm .cl-row:hover { background: #f7f7f5; }
html.calm.adm .cl-row:last-child { border-bottom: none; }
@media (max-width: 860px) {
html.calm.adm .client-list { margin: 0 16px 12px; padding: 0 2px 2px !important; }
html.calm.adm .cl-row { padding-left: 10px; padding-right: 10px; }
}
/* ---- Resellervariant: zes kolommen ------------------------------------- */
/* Een reseller ziet geen MRR en geen inkoopkosten; dat zijn onze cijfers.
Zelfde raster, twee kolommen minder. */
html.calm.adm .cl-head.cl-cols-6 { grid-template-columns: 22px minmax(200px, 2fr) 180px 70px 110px 72px; }
html.calm.adm .client-list.cl-cols-6 .cl-row { grid-template-columns: 22px minmax(200px, 2fr) 180px 70px 110px 72px; }
html.calm.adm .cl-leeg { color: var(--calm-mute); font-size: 0.9rem; text-align: center; padding: 40px 20px; }
@media (max-width: 1024px) {
html.calm.adm .cl-head.cl-cols-6 { grid-template-columns: 22px minmax(170px, 2fr) 160px 64px 96px 72px; }
html.calm.adm .client-list.cl-cols-6 .cl-row { grid-template-columns: 22px minmax(170px, 2fr) 160px 64px 96px 72px; }
}
@media (max-width: 860px) {
html.calm.adm .cl-head.cl-cols-6 { display: none !important; }
html.calm.adm .client-list.cl-cols-6 .cl-row {
grid-template-columns: 16px auto auto 1fr auto;
grid-template-areas: "sig name name name act" "sig art score last last";
}
}