/* PROFIMAN Dashboard — Sidebar + main layout for vakman & klant dashboards */ /* ── Sidebar ──────────────────────────────────────────────── */ .pm-sidebar { width: 260px !important; min-width: 260px !important; max-width: 260px !important; background: #fff !important; border-right: 1px solid #D6D3DE !important; display: flex !important; flex-direction: column !important; position: fixed !important; top: 0 !important; left: 0 !important; bottom: 0 !important; z-index: 9999 !important; transform: translateX(-100%); transition: transform .3s; overflow-y: auto; overscroll-behavior: contain; } .pm-sidebar.open { transform: translateX(0) !important; } /* WP admin bar reserves 32px (46px under 783px) at the top of the page — shift the sidebar down so its bottom doesn't get pushed off-screen (otherwise the logout link sits below the viewport on desktop). */ body.admin-bar .pm-sidebar { top: 32px !important; } @media screen and (max-width: 782px) { body.admin-bar .pm-sidebar { top: 46px !important; } } /* Prevent items from being squeezed out of the flow when total content is taller than the sidebar — they should stack at their natural size and the sidebar scrolls as a whole. */ .pm-sidebar > * { flex-shrink: 0; } @media (min-width: 1024px) { .pm-sidebar { transform: translateX(0) !important; } .pm-sidebar-toggle { display: none !important; } .pm-sidebar-overlay { display: none !important; } } /* * When the sidebar exists on the page, push the ENTIRE page content right. * This targets the Elementor page wrapper directly — no wrapper div needed. * The sidebar JS adds a class to so we can scope this. */ body.pm-has-sidebar .elementor, body.pm-has-sidebar .site-main, body.pm-has-sidebar .entry-content, body.pm-has-sidebar .page-content, body.pm-has-sidebar > .elementor { /* Don't shift these — let pm-app-main handle it */ } /* Main content area */ .pm-app-main { padding: 24px !important; box-sizing: border-box !important; min-height: 100vh; background: #F3F2F6 !important; } /* Ensure tabs and their children never cause horizontal scroll */ .pm-dash-tab { min-width: 0; width: 100%; } /* * Hide theme/Elementor header + footer + nav on EVERY page that hosts the * dashboard sidebar. Applies on all viewports — mobile included — so the * user always gets the Profiman chrome instead of a double header. */ body.pm-dashboard-page header, body.pm-dashboard-page .elementor-location-header, body.pm-dashboard-page nav.nlinks, body.pm-dashboard-page .nav, body.pm-has-sidebar header, body.pm-has-sidebar .elementor-location-header, body.pm-has-sidebar .site-header, body.pm-has-sidebar .main-navigation { display: none !important; } /* * Desktop: push the ENTIRE page 260px to the right. * Using padding-left on body itself is the most reliable way * to offset all content regardless of Elementor's wrapper structure. */ @media (min-width: 1024px) { body.pm-has-sidebar { padding-left: 260px !important; overflow-x: hidden !important; } /* Ensure pm-app-main fills remaining space */ body.pm-has-sidebar .pm-app-main { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; } /* Reset any Elementor max-width restrictions on dashboard pages */ body.pm-has-sidebar .elementor-section.elementor-section-boxed > .elementor-container { max-width: 100% !important; } body.pm-has-sidebar .e-con { max-width: 100% !important; --content-width: 100% !important; } } /* * Mobile sticky topbar (hamburger + Profiman logo) — hidden on desktop, * pinned to the top of the viewport on viewports below the desktop breakpoint. * Replaces the theme/Elementor header on every Profiman dashboard page. */ .pm-mobile-topbar { display: none; } .pm-sidebar-toggle { background: transparent; border: none; padding: 0; cursor: pointer; color: #4a22b0 !important; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 0 !important; transition: background .15s; } .pm-sidebar-toggle:hover, .pm-sidebar-toggle:active, .pm-sidebar-toggle:focus { color: #4a22b0 !important; background: var(--pm-g100, #f3f4f6); } .pm-sidebar-toggle svg { color: #4a22b0 !important; stroke: #4a22b0 !important; } .pm-mobile-topbar-logo { display: inline-flex; align-items: center; text-decoration: none; line-height: 0; border-radius: 0 !important; } .pm-mobile-topbar-logo img { display: block; height: 28px; width: auto; max-width: 60vw; object-fit: contain; border-radius: 0 !important; } @media (max-width: 1023px) { body.pm-has-sidebar .pm-mobile-topbar { display: flex; align-items: center; justify-content: space-between; position: fixed; top: 0; left: 0; right: 0; height: 56px; padding: 8px 14px; background: #fff; border-bottom: 1px solid var(--pm-g200, #e5e7eb); box-shadow: 0 2px 8px rgba(0,0,0,.04); z-index: 10000; box-sizing: border-box; } /* WP admin bar pushes the page down 46px on mobile — keep our topbar directly underneath instead of behind it. */ body.admin-bar.pm-has-sidebar .pm-mobile-topbar { top: 46px; } /* Push the entire body content down by topbar height so nothing sits under the topbar regardless of the page's wrapper structure (Elementor or not). */ body.pm-has-sidebar { padding-top: 56px !important; } /* Sidebar drops below the topbar when open on mobile. */ body.pm-has-sidebar .pm-sidebar { top: 56px !important; } body.admin-bar.pm-has-sidebar .pm-sidebar { top: 102px !important; } } /* Desktop: no topbar, no hamburger needed. */ @media (min-width: 1024px) { .pm-mobile-topbar { display: none !important; } .pm-sidebar-toggle { display: none !important; } } .pm-sidebar-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 49; display: none; } .pm-sidebar-overlay.active { display: block; } /* ── Sidebar profile ─────────────────────────────────────── */ .pm-sb-profile { background: linear-gradient(135deg, var(--pm-p), var(--pm-pd)); padding: 28px 20px; text-align: center; } .pm-sb-avatar { width: 72px; height: 72px; background: rgba(255,255,255,.18); border: 3px solid rgba(255,255,255,.35); display: flex; align-items: center; justify-content: center; font-family: var(--pm-fd); font-weight: 900; font-size: 1.6rem; color: #fff; margin: 0 auto 12px; overflow: hidden; } .pm-sb-avatar img { width: 100%; height: 100%; object-fit: cover; } .pm-sb-name { color: #fff; font-weight: 800; font-size: .95rem; font-family: var(--pm-fd); } .pm-sb-company { color: rgba(255,255,255,.6); font-size: .78rem; margin-top: 2px; } .pm-sb-rating { display: inline-flex; align-items: center; gap: 5px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.2); padding: 4px 12px; margin-top: 10px; font-size: .8rem; font-weight: 700; color: #fff; } /* ── Sidebar nav ──────────────────────────────────────────── */ .pm-sb-nav { flex: 1; padding: 8px; display: flex; flex-direction: column; gap: 2px; } .pm-sb-link { display: flex; align-items: center; gap: 12px; padding: 12px 14px; color: var(--pm-g600); font-weight: 600; font-size: .88rem; cursor: pointer; transition: all .15s; background: none; border: none; width: 100%; text-align: left; text-decoration: none; } .pm-sb-link:hover { background: var(--pm-g100); color: var(--pm-g900); } .pm-sb-link.active { background: var(--pm-pl); color: var(--pm-p); font-weight: 700; } .pm-sb-link svg { flex-shrink: 0; opacity: .55; } .pm-sb-link.active svg { opacity: 1; } .pm-sb-logout { margin-top: auto; color: var(--pm-g400); padding: 16px 14px; } /* ── Credit box ───────────────────────────────────────────── */ .pm-sb-credits { padding: 16px; background: var(--pm-pl); text-align: center; margin: 8px; } .pm-sb-credits-amount { font-size: 1.5rem; font-weight: 900; color: var(--pm-p); font-family: var(--pm-fd); } .pm-sb-credits-label { font-size: .82rem; color: var(--pm-g500); } .pm-sb-credits-free { font-size: .78rem; color: var(--pm-g); font-weight: 700; margin-top: 4px; } /* ── Dashboard topbar ─────────────────────────────────────── */ .pm-dash-topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--pm-g200); flex-wrap: wrap; gap: 12px; } .pm-dash-topbar h1 { font-size: 1.5rem; font-weight: 900; color: var(--pm-g900); font-family: var(--pm-fd); } /* ── Lead card items ──────────────────────────────────────── */ .pm-lead-card-item { margin-bottom: 4px; } .pm-lead-card-item .pm-lead-info p { font-size: .84rem; color: var(--pm-g500); margin-top: 6px; } /* ── Profile header ───────────────────────────────────────── */ .pm-profile-header { margin-bottom: 0; } .pm-profile-avatar-section { background: linear-gradient(135deg, var(--pm-p), var(--pm-pd)); padding: 28px 24px; text-align: center; } .pm-profile-avatar { width: 84px; height: 84px; background: rgba(255,255,255,.18); border: 3px solid rgba(255,255,255,.35); display: flex; align-items: center; justify-content: center; font-family: var(--pm-fd); font-weight: 900; font-size: 2rem; color: #fff; margin: 0 auto 12px; cursor: pointer; position: relative; overflow: hidden; } .pm-profile-avatar img { width: 100%; height: 100%; object-fit: cover; } .pm-profile-avatar-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; font-size: .6rem; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: #fff; opacity: 0; transition: opacity .2s; } .pm-profile-avatar:hover .pm-profile-avatar-overlay { opacity: 1; } .pm-profile-name { color: #fff; font-weight: 800; font-size: 1rem; font-family: var(--pm-fd); } .pm-profile-sub { color: rgba(255,255,255,.6); font-size: .78rem; margin-top: 2px; } .pm-profile-rating { display: inline-flex; align-items: center; gap: 5px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.2); padding: 5px 12px; margin-top: 10px; font-size: .8rem; font-weight: 700; color: #fff; } /* ── Check items (services/cities grid) ───────────────────── */ .pm-check-item { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1.5px solid var(--pm-g200); cursor: pointer; transition: all .15s; background: var(--pm-w); user-select: none; } .pm-check-item:hover { border-color: var(--pm-p); background: var(--pm-p50); } .pm-check-item.sel { border-color: var(--pm-p); background: var(--pm-p50); } .pm-check-item input { width: 15px; height: 15px; accent-color: var(--pm-p); flex-shrink: 0; pointer-events: none; } .pm-check-item span { font-size: .82rem; font-weight: 600; color: var(--pm-g700); } .pm-check-item.sel span { color: var(--pm-p); } /* Diensten-collapse: extra items boven de drempel zijn standaard verborgen alleen op mobiel/tablet — daar nemen ze veel verticale ruimte in en de gebruiker moet flink scrollen. Op desktop tonen we altijd alles want de grid spreidt zich daar horizontaal uit. Toggle gaat via pm-dienst-expanded. */ .pm-dienst-toggle { display: none; } .pm-dienst-group.pm-dienst-expanded .pm-dienst-toggle-icon { transform: rotate(180deg); } @media (max-width: 1023px) { .pm-dienst-extra { display: none !important; } .pm-dienst-group.pm-dienst-expanded .pm-dienst-extra { display: flex !important; } .pm-dienst-toggle { display: inline-flex !important; } .pm-dienst-toggle:hover { background: var(--pm-p50) !important; border-color: var(--pm-p) !important; } } /* ── Toggle switch ────────────────────────────────────────── */ .pm-toggle-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--pm-g100); } .pm-toggle-row:last-of-type { border-bottom: none; } .pm-tog { position: relative; display: inline-block; width: 40px; height: 22px; flex-shrink: 0; } .pm-tog input { opacity: 0; width: 0; height: 0; position: absolute; } .pm-tog-slider { position: absolute; cursor: pointer; inset: 0; border-radius: 22px; transition: .2s; } .pm-tog input:checked + .pm-tog-slider { background: var(--pm-p); } .pm-tog input:not(:checked) + .pm-tog-slider { background: var(--pm-g300); } .pm-tog-dot { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; background: #fff; border-radius: 50%; transition: .2s; pointer-events: none; } .pm-tog input:checked ~ .pm-tog-dot { transform: translateX(18px); } /* ── Sidebar badge ────────────────────────────────────────── */ .pm-sb-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; background: var(--pm-red, #dc2626); color: #fff; font-size: .68rem; font-weight: 800; margin-left: auto; flex-shrink: 0; } /* ── Admin lead photo thumbnails ─────────────────────────── */ .pm-admin-photos a { border: 1px solid var(--pm-g200); transition: border-color .2s; } .pm-admin-photos a:hover { border-color: var(--pm-p); } /* ── Admin tabs ──────────────────────────────────────────── */ .pm-admin-tabs { display: flex; gap: 4px; margin-bottom: 16px; flex-wrap: wrap; } .pm-admin-tab { padding: 8px 16px; border: 1.5px solid var(--pm-g200); background: var(--pm-w); cursor: pointer; font-size: .82rem; font-weight: 600; color: var(--pm-g500); transition: all .15s; font-family: var(--pm-fd); } .pm-admin-tab:hover { border-color: var(--pm-g300); color: var(--pm-g700); } .pm-admin-tab.active { border-color: var(--pm-p); background: var(--pm-pl); color: var(--pm-p); } .pm-tab-cnt { display: inline-block; min-width: 18px; height: 18px; padding: 0 5px; background: var(--pm-g100); font-size: .72rem; font-weight: 800; line-height: 18px; text-align: center; margin-left: 4px; } .pm-admin-tab.active .pm-tab-cnt { background: var(--pm-p); color: var(--pm-w); } /* ── Lead card layout ────────────────────────────────────── */ .pm-lead-card { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; } .pm-lead-info { flex: 1; min-width: 0; } .pm-lead-info h3 { font-family: var(--pm-fd); font-weight: 800; font-size: .95rem; color: var(--pm-g900); margin-bottom: 4px; } .pm-lead-meta { display: flex; gap: 12px; flex-wrap: wrap; font-size: .8rem; color: var(--pm-g500); } .pm-lead-actions { display: flex; gap: 6px; flex-shrink: 0; } /* ── Admin lead action buttons ───────────────────────────── */ .pm-admin-actions { display: flex; flex-direction: column; gap: 4px; min-width: 120px; align-items: stretch; } .pm-adm-btn { display: flex; align-items: center; justify-content: center; gap: 4px; width: 100%; padding: 5px 10px; border: none; border-radius: 6px; font-family: var(--pm-fd); font-size: .75rem; font-weight: 700; white-space: nowrap; cursor: pointer; text-decoration: none; line-height: 1.4; transition: opacity .15s; box-sizing: border-box; text-align: center; } .pm-adm-btn:hover { opacity: .82; } .pm-adm-btn-g { background: var(--pm-g); color: #fff; } .pm-adm-btn-r { background: var(--pm-red, #dc2626); color: #fff; } .pm-adm-btn-del { background: var(--pm-g100); color: var(--pm-g500); } /* ── Section titles — Archivo altijd, overal ────────────── */ .pm-section-title { font-family: 'Archivo', sans-serif !important; font-weight: 900 !important; color: #1a1530 !important; font-size: 1.35rem; } /* ── Pricing row ─────────────────────────────────────────── */ .pm-pricing-row { display: flex; align-items: center; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--pm-g100); flex-wrap: wrap; } .pm-pricing-row:last-of-type { border-bottom: none; } .pm-pricing-name { flex: 1; font-weight: 600; font-size: .88rem; color: var(--pm-g700); min-width: 140px; } /* ── Responsive ───────────────────────────────────────────── */ @media (max-width: 640px) { .pm-app-main { padding: 16px; } .pm-dash-topbar h1 { font-size: 1.2rem; } .pm-dash-topbar { flex-wrap: wrap; } /* Filter/select dropdowns stretch to full width when they wrap */ .pm-dash-filters { width: 100%; } .pm-dash-filters .pm-fi { width: 100% !important; box-sizing: border-box; } /* Lead card: info full-width first, then actions stacked below */ .pm-lead-card { flex-wrap: wrap; gap: 0; } .pm-lead-card .pm-lead-info { flex: 0 0 100%; min-width: 100%; } .pm-lead-card .pm-lead-actions { flex: 0 0 100%; display: flex; flex-direction: column; align-items: stretch; gap: 6px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--pm-g100); } /* Every direct child (button or inner wrapper div) spans full width */ .pm-lead-card .pm-lead-actions > * { flex: none; width: 100%; } .pm-lead-card .pm-lead-actions .pm-btn { justify-content: center; width: 100%; } /* Admin action buttons: already column-flex, just ensure full width on mobile */ .pm-admin-actions { min-width: 0; width: 100%; } .pm-adm-btn { font-size: .78rem; padding: 7px 10px; } /* Section headings: never clip or overflow */ h1, h2, h3 { word-break: break-word; overflow-wrap: break-word; } .pm-section-title { font-size: 1.15rem !important; } /* Watchdog grid: force 2 equal columns, cards stay in bounds */ .pm-watchdog-grid { grid-template-columns: repeat(2, 1fr) !important; } .pm-watchdog-card { overflow: hidden; word-break: break-word; } .pm-watchdog-label { font-size: .8rem; } .pm-watchdog-hint { font-size: .7rem; } /* Portfolio header: stack on mobile */ .pm-portfolio-hd { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; } .pm-portfolio-hd .pm-btn { width: 100%; justify-content: center; } /* KPI grid: 2 columns on mobile */ .pm-kpi-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } /* Admin filter tabs: single scrollable row — never wrap on mobile */ .pm-admin-tabs { overflow-x: auto !important; -webkit-overflow-scrolling: touch; flex-wrap: nowrap !important; scrollbar-width: none; /* Firefox */ gap: 6px; margin-bottom: 12px; padding-bottom: 2px; /* room for box-shadow of active tab */ } .pm-admin-tabs::-webkit-scrollbar { display: none; } .pm-admin-tab { flex: 0 0 auto !important; /* never shrink/stretch — size to content */ padding: 6px 10px; font-size: .76rem; white-space: nowrap; } .pm-tab-cnt { padding: 1px 5px; } /* Pricing rows: stack label + inputs vertically */ .pm-pricing-row { flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px 0; } .pm-pricing-name { min-width: 0; width: 100%; font-size: .85rem; } .pm-pricing-row .pm-fg { width: 100%; margin: 0; } .pm-pricing-row .pm-fi { width: 100% !important; max-width: 100% !important; box-sizing: border-box; } /* Categories grid: single column on phones */ .pm-cat-grid { grid-template-columns: 1fr !important; gap: 12px !important; } .pm-cat-actions { flex-direction: column; } .pm-cat-actions .pm-btn { width: 100%; justify-content: center; } /* Prevent ANY child from causing horizontal page overflow */ .pm-app-main { overflow-x: hidden; } .pm-dash-tab, .pm-card { max-width: 100%; min-width: 0; } /* Check-item grids (diensten/werkgebied in profile): cap columns on phone */ .pm-check-item { font-size: .78rem; padding: 8px 10px; } } /* ── Tablet (641–900px): portfolio header + overflow ──────── */ @media (max-width: 900px) { .pm-app-main { overflow-x: hidden; } .pm-portfolio-hd { flex-wrap: wrap !important; gap: 10px !important; } .pm-portfolio-hd > div { flex: 1; min-width: 0; } .pm-portfolio-hd .pm-btn { flex-shrink: 0; } /* Watchdog card text: prevent overflow on medium screens */ .pm-watchdog-label { word-break: break-word; overflow-wrap: break-word; } .pm-watchdog-hint { word-break: break-word; overflow-wrap: break-word; } } /* ── Admin Category Modal — full overlay fix ──────────────────────── The old PHP renders class="pm-modal-overlay" + class="pm-modal-box". JS (profiman-admin.js) moves the element to so position:fixed works correctly even inside Elementor transform containers. When JS sets style.display="flex", the rules below take full effect. */ .pm-modal-overlay { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100vw !important; height: 100vh !important; z-index: 999999 !important; background: rgba(0,0,0,.58) !important; backdrop-filter: blur(3px) !important; align-items: center !important; justify-content: center !important; padding: 20px !important; box-sizing: border-box !important; /* default hidden — JS toggles style.display */ } .pm-modal-box { background: #fff !important; border-radius: 16px !important; max-width: 680px !important; width: 100% !important; max-height: 90vh !important; overflow-y: auto !important; box-shadow: 0 24px 64px rgba(0,0,0,.28) !important; animation: pmModalIn .2s ease both; } @keyframes pmModalIn { from { transform: scale(.95); opacity: 0; } to { transform: scale(1); opacity: 1; } } .pm-modal-header { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 22px 26px 0 !important; border-bottom: none !important; } .pm-modal-header h3 { font-size: 1.2rem !important; font-weight: 700 !important; font-family: 'Archivo', sans-serif !important; color: #1a1530 !important; margin: 0 !important; } .pm-modal-close { width: 34px !important; height: 34px !important; border-radius: 8px !important; background: #f3f4f6 !important; border: none !important; cursor: pointer !important; font-size: 1.4rem !important; display: flex !important; align-items: center !important; justify-content: center !important; color: #6b7280 !important; line-height: 1 !important; padding: 0 !important; flex-shrink: 0 !important; transition: background .15s !important; } .pm-modal-close:hover { background: #e5e7eb !important; } .pm-modal-body { padding: 20px 26px 26px !important; } @media (max-width: 600px) { .pm-modal-overlay { padding: 10px !important; } .pm-modal-box { max-width: 100% !important; border-radius: 12px !important; max-height: 94vh !important; } .pm-modal-header { padding: 16px 16px 0 !important; } .pm-modal-body { padding: 14px 16px 18px !important; } } /* ── SVG Icon Picker (injected by profiman-admin.js) ────────── */ .pm-icon-picker-grid { display: grid !important; grid-template-columns: repeat(6, 1fr) !important; gap: 8px !important; } .pm-icon-option { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; gap: 5px !important; padding: 10px 4px 8px !important; border: 2px solid #e5e7eb !important; border-radius: 10px !important; background: #fff !important; cursor: pointer !important; transition: border-color .15s, background .15s !important; color: #374151 !important; text-align: center !important; min-height: 72px !important; } .pm-icon-option span { font-size: .62rem !important; font-weight: 500 !important; color: #6b7280 !important; line-height: 1.2 !important; text-align: center !important; word-break: break-word !important; transition: color .15s !important; display: block !important; } .pm-icon-option svg { flex-shrink: 0 !important; } .pm-icon-option:hover { border-color: #4A22B0 !important; background: #f5f3ff !important; color: #4A22B0 !important; } .pm-icon-option:hover span { color: #4A22B0 !important; } .pm-icon-option.selected { border-color: #4A22B0 !important; background: #ede9fe !important; color: #4A22B0 !important; } .pm-icon-option.selected span { color: #4A22B0 !important; font-weight: 700 !important; } @media (max-width: 540px) { .pm-icon-picker-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 6px !important; } .pm-icon-option { padding: 8px 3px 6px !important; min-height: 64px !important; } } @media (max-width: 360px) { .pm-icon-picker-grid { grid-template-columns: repeat(3, 1fr) !important; } } /* ────────────────────────────────────────────────────────────── Tablet & mobile (≤1023px): rules die op desktop niet nodig zijn maar al ruim onder de 640px-breakpoint moeten triggeren — de dashboard sidebar verdwijnt namelijk pas onder 1024px en daarmee wordt de main-content kolom smal genoeg dat row-layouts breken. ────────────────────────────────────────────────────────────── */ @media (max-width: 1023px) { /* Edit-page topbar: stack "← Terug naar leads" boven de titel. Anders schuift de titel rechts buiten het scherm. */ .pm-ep-topbar-inner { flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; } .pm-ep-topbar-inner h1 { font-size: 1.15rem; } .pm-ep-topbar-inner #pmEditPageSubtitle, .pm-ep-topbar-inner #pmAdmEditSubtitle { font-size: .8rem; } /* Knop houdt eigen breedte — niet stretchen, niet centreren. */ .pm-ep-topbar-inner > .pm-btn { align-self: flex-start !important; width: auto !important; flex: 0 0 auto !important; } /* Lead-card: stack info-blok en actions/aside onder elkaar. Tot nu toe gebeurde dat pas onder 640px, maar bij ~700–900px zijn de buttons al zo breed dat ze buiten de kaart vallen. */ .pm-lead-card { flex-wrap: wrap !important; gap: 0 !important; } .pm-lead-card .pm-lead-info { flex: 0 0 100% !important; min-width: 100% !important; } .pm-lead-card .pm-lead-actions { flex: 0 0 100% !important; display: flex; flex-direction: column; align-items: stretch; gap: 6px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--pm-g100); } .pm-lead-card .pm-lead-actions > * { flex: none; width: 100%; } .pm-lead-card .pm-lead-actions .pm-btn { justify-content: center; width: 100%; } /* OPMERKING: voor de klant-projecten lijst gebruiken we NIET .pm-kp-aside op mobiel — die wordt verborgen en vervangen door .pm-kp-mobile-footer (gerenderd in klant-projects.php). Niet hier overrulen, anders krijg je dubbele rendering van datum + knoppen. */ }