sits flush against its main row: drawer carries its own
spacing so the | doesn't need any. */
.pipeline-row-detail > td { padding: 0; }
.pipeline-drawer {
background: var(--gp-panel-bg);
border: 1px solid var(--gp-panel-border);
border-radius: 6px;
padding: 0.9rem 1.1rem;
margin: 0.25rem 0.4rem 0.6rem;
}
.pipeline-drawer-grid {
display: grid;
grid-template-columns: 1.15fr 1fr;
gap: 1.5rem;
}
@media (max-width: 900px) {
.pipeline-drawer-grid { grid-template-columns: 1fr; }
}
.pipeline-drawer-left,
.pipeline-drawer-right { min-width: 0; }
.pipeline-drawer h5 {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--pico-muted-color);
margin: 0 0 0.5rem;
}
.pipeline-drawer-subhead { margin-top: 1.25rem !important; }
.pipeline-drawer-contact {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 0.5rem 0.75rem;
}
.pipeline-drawer-contact .span-2 { grid-column: span 3; }
.pipeline-drawer-contact label { margin: 0; font-size: 0.8rem; }
.pipeline-drawer-contact input,
.pipeline-drawer-contact select { margin-top: 0.15rem; }
@media (max-width: 700px) {
.pipeline-drawer-contact { grid-template-columns: 1fr; }
.pipeline-drawer-contact .span-2 { grid-column: span 1; }
}
.pipeline-drawer-link {
margin: 0.5rem 0 0;
font-size: 0.85rem;
}
.activity-feed-cap {
display: block;
margin-top: 0.5rem;
color: var(--pico-muted-color);
font-style: italic;
}
.activity-feed-empty {
list-style: none;
padding: 0.5rem 0;
color: var(--pico-muted-color);
font-size: 0.85rem;
font-style: italic;
border-bottom: none;
}
/* System-activity collapsible (stage/owner changes etc.) — collapsed by default
so the comments feed reads clean. */
.pipeline-system-activity {
margin-top: 1rem;
border-top: 1px dashed var(--gp-panel-border);
padding-top: 0.75rem;
}
.pipeline-system-activity > summary {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--pico-muted-color);
cursor: pointer;
display: flex;
align-items: center;
gap: 0.5rem;
}
.pipeline-system-activity > summary:hover { color: var(--pico-color); }
.pipeline-system-activity[open] > summary { margin-bottom: 0.5rem; }
.pipeline-system-count {
background: var(--gp-panel-bg-hover);
color: var(--pico-color);
border-radius: 999px;
padding: 0.05rem 0.5rem;
font-size: 0.7rem;
letter-spacing: 0;
text-transform: none;
}
.pipeline-system-activity .system-feed .activity-entry { padding: 0.35rem 0; }
/* Comment composer (right column of the drawer). */
.pipeline-comment-form { margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.pipeline-comment-form textarea { margin: 0; min-height: 8rem; }
.pipeline-comment-actions {
display: flex;
justify-content: space-between;
align-items: center;
gap: 0.75rem;
flex-wrap: wrap;
}
.pipeline-comment-tip {
color: var(--pico-muted-color);
font-size: 0.75rem;
white-space: nowrap;
}
.pipeline-comment-tip kbd {
background: var(--pico-card-background-color);
color: var(--pico-color);
border: 1px solid var(--pico-muted-border-color);
border-radius: 3px;
padding: 0 0.3rem;
font-size: 0.7rem;
font-family: inherit;
}
/* Override Pico's default full-width submit button — we want it sized to content. */
.pipeline-comment-form button[type="submit"] {
width: auto;
margin: 0;
padding: 0.4rem 1.2rem;
flex-shrink: 0;
}
/* Empty-list state: centered card with the inline add-row form. */
.pipeline-empty {
display: flex;
justify-content: center;
padding: 2rem 1rem;
}
.pipeline-empty-inner {
max-width: 640px;
width: 100%;
text-align: left;
}
.pipeline-empty-inner h3 {
margin: 0 0 0.25rem;
font-size: 1.1rem;
}
.pipeline-empty-inner > p {
color: var(--pico-muted-color);
margin-bottom: 1.25rem;
}
.activity-feed {
list-style: none;
margin: 0.75rem 0 0;
padding: 0;
max-height: 320px;
overflow-y: auto;
}
.activity-entry {
padding: 0.5rem 0;
border-bottom: 1px solid var(--pico-muted-border-color);
}
.activity-entry:last-child { border-bottom: none; }
.activity-entry-head {
display: flex;
align-items: center;
gap: 0.4rem;
font-size: 0.8rem;
color: var(--pico-muted-color);
}
.activity-entry-head strong { color: var(--pico-color); }
.activity-entry-body { font-size: 0.85rem; margin-top: 0.25rem; }
/* Pipeline add-row picker (unified single input + segmented control) */
.pipeline-add { position: relative; margin-top: 0.5rem; }
.pipeline-add-tabs {
display: inline-flex;
gap: 0;
margin-bottom: 0.6rem;
border: 1px solid var(--pico-muted-border-color);
border-radius: 6px;
overflow: hidden;
}
.pipeline-add-tab {
background: var(--pico-card-background-color);
color: var(--pico-muted-color);
border: none;
padding: 0.35rem 0.85rem;
font-size: 0.85rem;
cursor: pointer;
border-right: 1px solid var(--pico-muted-border-color);
margin: 0;
}
.pipeline-add-tab:last-child { border-right: none; }
.pipeline-add-tab:hover { background: var(--gp-panel-bg); }
.pipeline-add-tab.active {
background: #0E3A5A;
color: white;
}
.pipeline-add-search { position: relative; }
.pipeline-add-search input { margin: 0; }
.pipeline-add-hint {
display: block;
margin-top: 0.35rem;
color: var(--pico-muted-color);
font-size: 0.75rem;
}
.pipeline-picker-results {
list-style: none;
margin: 0;
padding: 0;
position: absolute;
z-index: 30;
left: 0;
right: 0;
background: var(--pico-card-background-color);
border: 1px solid var(--pico-muted-border-color);
border-radius: 6px;
box-shadow: 0 4px 16px rgba(0,0,0,0.08);
max-height: 280px;
overflow-y: auto;
}
.pipeline-picker-results li { border-bottom: 1px solid var(--pico-muted-border-color); }
.pipeline-picker-results li:last-child { border-bottom: none; }
.pipeline-picker-results a {
display: block;
padding: 0.45rem 0.6rem;
font-size: 0.85rem;
text-decoration: none;
color: inherit;
}
.pipeline-picker-results a:hover { background: var(--gp-panel-bg); }
.pipeline-picker-empty { padding: 0.5rem 0.6rem; color: var(--pico-muted-color); font-size: 0.85rem; }
.pipeline-picker-added {
display: flex; align-items: center; gap: 0.4rem;
padding: 0.45rem 0.6rem; font-size: 0.85rem;
color: var(--pico-muted-color); cursor: default;
}
.pipeline-picker-added-tag { margin-left: auto; font-size: 0.72rem; font-style: italic; white-space: nowrap; }
/* ── Kanban quick-view panel (card-click) ── */
.quickview-dialog {
width: min(72rem, 94vw);
max-width: 94vw;
max-height: 90vh;
padding: 0;
border: none;
border-radius: 10px;
box-shadow: 0 10px 40px rgba(0,0,0,0.25);
overflow: hidden;
/* Tinted canvas — content sections sit on top as white cards (3-tier depth). */
background: var(--gp-panel-bg);
}
.quickview-dialog::backdrop { background: rgba(14, 58, 90, 0.45); }
.quickview-scroll { max-height: 90vh; overflow-y: auto; }
.quickview-loading { padding: 2rem; text-align: center; color: var(--pico-muted-color); }
.quickview-header {
display: flex; align-items: center; gap: 0.75rem;
padding: 0.8rem 1.1rem; border-bottom: 1px solid var(--gp-panel-border);
position: sticky; top: 0; z-index: 1;
background: var(--pico-card-background-color); /* white bar over the grey canvas */
box-shadow: 0 1px 3px rgba(14, 58, 90, 0.06);
}
.quickview-title {
font-weight: 700; flex: 1 1 auto; min-width: 0;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
color: var(--pico-primary); /* navy title accent */
}
.quickview-title a { color: var(--pico-primary); }
.quickview-controls { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
.quickview-controls .pipeline-edit-form { margin: 0; }
.quickview-close {
border: none; background: none; font-size: 1.5rem; line-height: 1;
cursor: pointer; color: var(--pico-muted-color); padding: 0 0.25rem;
}
.quickview-close:hover { color: var(--pico-primary); }
/* Neutralise the drawer's own frame; the canvas comes from the dialog. */
.quickview-body .pipeline-drawer {
border: none; margin: 0; border-radius: 0; background: transparent;
padding: 1.1rem;
}
/* Lift the drawer's two columns into white cards on the grey canvas. */
.quickview-body .pipeline-drawer-left,
.quickview-body .pipeline-drawer-right {
background: var(--pico-card-background-color);
border: 1px solid var(--gp-panel-border);
border-radius: 8px;
padding: 0.9rem 1rem;
}
.quickview-body .pipeline-drawer h5 { color: var(--pico-primary); }
@media (max-width: 700px) {
.quickview-dialog {
width: 100vw; max-width: 100vw;
height: 100dvh; max-height: 100dvh; border-radius: 0;
}
.quickview-scroll { max-height: 100dvh; }
}
.pipeline-add-free .add-row-grid { margin-top: 0; }
/* Contact toevoegen — action bar with button-pill disclosure */
.contact-actions-bar {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
align-items: center;
margin: 0.75rem 0;
}
.contact-actions-pill { padding: 0.3rem 0.85rem; font-size: 0.8rem; margin: 0 !important; }
.contact-actions-link { font-size: 0.8rem; }
.contact-form-disclosure { margin: 0; }
.contact-form-disclosure > summary {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.3rem 0.85rem;
font-size: 0.8rem;
font-weight: 600;
line-height: 1.4;
color: var(--pico-primary);
background: var(--pico-background-color);
border: 1px solid var(--pico-primary);
border-radius: var(--pico-border-radius);
cursor: pointer;
user-select: none;
list-style: none;
transition: background 120ms ease, color 120ms ease;
}
.contact-form-disclosure > summary::-webkit-details-marker { display: none; }
.contact-form-disclosure > summary::after { display: none; }
.contact-form-disclosure > summary:hover {
background: var(--pico-primary);
color: var(--pico-primary-inverse);
}
.contact-form-disclosure[open] > summary {
background: var(--pico-primary);
color: var(--pico-primary-inverse);
}
.contact-form-disclosure > summary > span { font-weight: 700; font-size: 0.95rem; line-height: 1; }
/* When opened inside the action bar, the form panel claims the full row so
the Lusha/Telefoon links wrap below the form instead of sitting beside it. */
.contact-form-disclosure[open] { flex-basis: 100%; }
.contact-form {
margin-top: 0.75rem;
padding: 1rem 1rem 0.75rem;
background: var(--gp-panel-bg);
border: 1px solid var(--gp-panel-border);
border-radius: var(--pico-border-radius);
}
.contact-form .grid { margin-bottom: 0.5rem; }
.contact-form label { margin-bottom: 0.75rem; }
.contact-form small { color: var(--pico-muted-color); }
.contact-form-required {
color: var(--pico-del-color, #c62828);
text-decoration: none;
margin-left: 0.1rem;
}
.contact-form-actions {
display: flex;
justify-content: flex-end;
margin-top: 0.25rem;
}
.contact-form-actions input[type="submit"] { margin-bottom: 0; width: 100%; }
@media (min-width: 576px) {
.contact-form-actions input[type="submit"] { width: auto; min-width: 9rem; }
}
/* ── Utility classes (design-system) ──
Sizes that previously lived as repeated inline styles across views.
Applied alongside Pico's button/badge classes, e.g. "outline secondary btn-xs". */
.btn-sm { padding: 0.35rem 0.85rem; font-size: 0.85rem; margin: 0; }
.btn-xs { padding: 0.25rem 0.6rem; font-size: 0.8rem; margin: 0; }
.badge-sm { font-size: 0.65rem; padding: 0.1rem 0.4rem; }
/* Busy feedback for Turbo form submissions: aria-busy is set/cleared by the
global turbo:submit-start/-end listeners in controllers/application.js.
pointer-events blocks double-submits while the request is in flight. */
form[aria-busy="true"] { opacity: 0.6; pointer-events: none; }
/* ── Show-page header (company cockpit) ──
Title row: h1 + reference chips (Companyweb) side by side. The lead ACTIONS
(status / volgen / lijst) live in .lead-action-bar above the Reacties feed,
so changing a status sits next to writing down why. */
.show-header-row {
display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
}
.show-header-row h1 { margin-bottom: 0; }
/* Score block in the top-right corner of the title row. */
.show-score {
margin-left: auto;
display: flex; flex-direction: column; align-items: center;
line-height: 1; flex-shrink: 0;
padding: 0.3rem 1rem;
background: var(--gp-panel-bg);
border: 1px solid var(--gp-panel-border);
border-radius: 10px;
}
.show-score-label {
font-size: 0.6rem; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.08em; color: var(--pico-muted-color);
margin-bottom: 0.15rem;
}
.show-score-value { font-size: 2.6rem; font-weight: 700; font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
/* Chip row under the title (cooling tags + list memberships). */
.show-chips {
display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center;
margin: 0.5rem 0 0.75rem;
}
/* Navy reference chip next to the page title (external lookups). */
.title-chip {
display: inline-flex; align-items: center; gap: 0.3rem;
font-size: 0.8rem; font-weight: 600; white-space: nowrap;
padding: 0.25rem 0.7rem; border-radius: 999px;
background: #e7edf2; color: #0E3A5A; border: 1px solid #b9ccd8;
text-decoration: none;
transition: background 0.15s, color 0.15s;
}
.title-chip:hover { background: #0E3A5A; color: #fff; border-color: #0E3A5A; }
/* Action bar above the comments feed (status select + volgen + lijst). */
.lead-action-bar {
display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;
padding-bottom: 0.75rem; margin-bottom: 0.75rem;
border-bottom: 1px solid var(--pico-muted-border-color);
}
.lead-action-bar form { margin: 0; }
.lead-action-bar-label {
font-size: 0.82rem; font-weight: 600; color: #475569;
text-transform: uppercase; letter-spacing: 0.04em;
margin-right: 0.25rem;
}
/* Segmented status control (Apple HIG pattern: all options visible, current
segment filled in its status color, one tap to switch). Radios are visually
hidden but keyboard-focusable; outcome-guard intercepts the rejected segment. */
.status-segmented {
display: inline-flex;
border: 1px solid var(--pico-muted-border-color);
border-radius: 8px;
overflow: hidden;
background: var(--pico-card-background-color);
}
.status-segment {
position: relative;
display: inline-flex; align-items: center;
margin: 0; padding: 0.35rem 0.85rem;
font-size: 0.8rem; font-weight: 600;
color: var(--pico-muted-color);
cursor: pointer; user-select: none; white-space: nowrap;
border-right: 1px solid var(--pico-muted-border-color);
transition: background 0.15s, color 0.15s;
}
.status-segment:last-child { border-right: none; }
.status-segment:hover { background: var(--gp-panel-bg); color: var(--pico-color); }
.status-segment input[type="radio"] {
position: absolute; opacity: 0; pointer-events: none;
width: 1px; height: 1px; margin: 0;
}
.status-segment:has(input:focus-visible) { outline: 2px solid var(--pico-primary); outline-offset: -2px; }
.status-segment-new:has(input:checked) { background: #dbeafe; color: #1e40af; }
.status-segment-approved:has(input:checked) { background: #d1fae5; color: #065f46; }
.status-segment-rejected:has(input:checked) { background: #fee2e2; color: #991b1b; }
/* Quiet external link inside an action cluster (HubSpot). */
.toolbar-link {
font-size: 0.8rem; color: var(--pico-muted-color);
text-decoration: none; white-space: nowrap;
}
.toolbar-link:hover { color: var(--pico-primary); }
/* List-membership chips: rendered inline in the meta line under the title. */
.membership-chip {
display: inline-flex; align-items: center; gap: 0.35rem;
padding: 0.15rem 0.6rem; border-radius: 9999px;
font-size: 0.72rem; font-weight: 600; vertical-align: middle;
background: #f1f5f9; color: #475569; border: 1px solid #e2e8f0;
text-decoration: none;
}
.membership-chip:hover { border-color: var(--pico-primary); color: var(--pico-primary); }
.membership-chip-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; flex-shrink: 0; }
/* ── Mobile overrides ──
Kept at the END of the file: most rules below override base rules defined
earlier with the same specificity, so they must come last in the cascade.
Everything here is scoped to small viewports or touch-only devices and
leaves the desktop rendering untouched. */
/* Two-column block that collapses on small screens (scrape logs, etc.). */
.grid-2col { grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 640px) { .grid-2col { grid-template-columns: 1fr; } }
/* Touch devices: text fields under 16px make iOS Safari zoom in on focus and
stay zoomed. Bump form controls to 16px wherever the primary input is touch;
desktop (hover-capable) keeps the compact sizing. !important so this a11y
floor also beats higher-specificity compact-font rules and inline styles. */
@media (hover: none) and (pointer: coarse) {
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select, textarea {
font-size: 16px !important;
}
}
@media (max-width: 640px) {
th, td { padding: 0.45rem 0.5rem; }
/* Filter bar: tidy two-per-row controls instead of ragged intrinsic widths. */
.filters > select, .filters > input { flex: 1 1 calc(50% - 0.25rem); min-width: 0; }
.filters > .filters-search, .filters > .filters-wide { flex: 1 1 100%; min-width: 0; }
.icp-segment-grid { grid-template-columns: 1fr; }
/* Prospect rows (Gevolgd): let the summary wrap; the contact preview is
redundant with the expanded panel, drop it to save the line. */
.prospect-summary { flex-wrap: wrap; row-gap: 0.35rem; position: relative; padding-right: 2.25rem; }
.prospect-expand-icon { position: absolute; right: 0.75rem; top: 0.95rem; }
.prospect-main { flex: 1 1 calc(100% - 3.5rem); }
.prospect-contact-preview { display: none; }
.prospect-signals { flex: 0 1 auto; }
.prospect-detail-grid { grid-template-columns: 1fr; gap: 1rem; }
.prospect-detail-open { max-height: none; }
/* Kanban: one column per swipe instead of a 1200px-wide grid. */
.kanban-board {
grid-template-columns: none;
grid-auto-flow: column;
grid-auto-columns: 80vw;
scroll-snap-type: x proximity;
padding-bottom: 0.5rem;
}
.kanban-column { scroll-snap-align: start; }
.add-row-grid { grid-template-columns: 1fr; }
.pipeline-kpis { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 520px) {
/* Bulk action bar: full-width and wrappable so it never overflows. */
.bulk-bar {
left: 0.75rem; right: 0.75rem; transform: none;
white-space: normal; flex-wrap: wrap; justify-content: center;
bottom: -12rem;
}
.bulk-bar-visible { bottom: 0.75rem; }
.bulk-bar-select { min-width: 0; flex: 1 1 auto; }
}
|