/*
 * Social Effects huisstijl voor LeadStream (brutalist: acid / inkt / papier).
 *
 * Deze laag laadt NA style.css en zet de tokens en componenten om naar de
 * huisstijl van socialeffects.nl en het klantportaal. Zelfde aanpak als
 * portal.css in het website-project: eerst de kleur- en vormtokens
 * hermappen, daarna per component de harde randen, blokschaduwen en
 * typografie (Archivo, Archivo Black, Space Mono) aanzetten.
 *
 * Kleuren uit het logopakket (2 sep 2026):
 *   acid   #d8ff00   geel vlak, accent, hover
 *   ink    #0a0a0a   letters, kaders, primaire knoppen
 *   paper  #f4f1e9   achtergrond
 *   white  #ffffff   kaarten
 */

/* ---------- FONTS (lokaal, geen Google request) ---------- */

@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/static/fonts/archivo-latin.woff2') format('woff2');
}
@font-face {
    font-family: 'Archivo Black';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/static/fonts/archivo-black-latin.woff2') format('woff2');
}
@font-face {
    font-family: 'Space Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/static/fonts/space-mono-400-latin.woff2') format('woff2');
}
@font-face {
    font-family: 'Space Mono';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/static/fonts/space-mono-700-latin.woff2') format('woff2');
}

/* ---------- TOKENS ---------- */

:root {
    --acid: #d8ff00;
    --acid-soft: #f4ffc4;
    --ink: #0a0a0a;
    --ink-2: #2b2b2b;
    --paper: #f4f1e9;
    --paper-2: #e9e4d4;
    --white: #ffffff;
    --muted: #57534b;
    --line: #dcd7c8;          /* zachte scheidingslijn in tabellen en lijsten */
    --status-red: #ff4b3e;
    --status-orange: #ffb020;
    --status-green: var(--acid);
    --status-grey: var(--paper-2);

    --c-bg: var(--paper);
    --c-card: var(--white);
    --c-border: var(--ink);
    --c-text: var(--ink);
    --c-text2: var(--muted);
    --c-primary: var(--ink);
    --c-primary-h: var(--ink-2);
    --c-accent: var(--ink);
    --c-green: #1a7a1a;
    --c-yellow: #b45309;
    --c-red: #c81e1e;
    --c-red-h: #a51818;
    --c-sidebar: var(--paper);
    --c-sidebar-hover: var(--white);
    --c-sidebar-text: var(--ink);
    --sidebar-w: 236px;
    --radius: 0;
    --shadow: 3px 3px 0 var(--ink);
    --shadow-lg: 6px 6px 0 var(--ink);
    --font: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-display: 'Archivo Black', 'Archivo', 'Arial Black', sans-serif;
    --font-mono: 'Space Mono', 'Courier New', monospace;
}

/* ---------- BASIS ---------- */

body {
    font-family: var(--font);
    background: var(--paper);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
}
::selection { background: var(--acid); color: var(--ink); }
a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 2px; }
a:hover { background: var(--acid); text-decoration: none; }
/* Navigatie, knoppen en kaarten zijn ook links: die krijgen geen onderstreping. */
.sidebar a, a.dp-btn, a.fin-btn, a.te-btn, a.bl-tab, a.lead-card, a.sidebar-link,
.fin-monthnav a, .cal-nav-btn, .action-menu-dropdown a, a.cal-today-btn, a.fin-today,
.sidebar-logout, .dp-actions a, .contacts-header a, .bellijst-header a {
    text-decoration: none;
}
.sidebar a:hover, a.dp-btn:hover, a.fin-btn:hover, a.te-btn:hover, .fin-monthnav a:hover,
a.lead-card:hover, .action-menu-dropdown a:hover { background: inherit; }

/* Geen afgeronde hoeken, waar de oude regels ook staan. */
*, *::before, *::after { border-radius: 0 !important; }
/* Behalve de laadspinners: die blijven rond. */
.dp-loading-spinner, .transition-spinner, .seo-circle, .seo-circle-bg, .seo-circle-fg { border-radius: 50% !important; }

h1, h2, h3, .dp-title, .contacts-header h1, .bellijst-header h1, .agenda-header h1, .fin-header h1, .settings-page h1, .te-editor-title-text {
    font-family: var(--font-display);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: -0.3px;
    line-height: 1;
}
h1, .contacts-header h1, .bellijst-header h1, .agenda-header h1, .fin-header h1 { font-size: 1.5rem; }
.pipeline-header h2, .kanban-column-header h3, .dp-section-title, .stat-label, .dp-info-label, .dp-field label,
.sf-field label, .fin-tile-label, .bl-section-title, .cal-events-title, .te-sidebar-title, .te-vars-title,
.dp-quick-label, .fin-card-title, .audit-section-title, .dp-modal-label, .fin-field label, .add-modal-body label {
    font-family: var(--font-mono);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--ink);
}
.pipeline-header h2 { font-size: 0.72rem; }
.kanban-column-header h3 { font-size: 0.62rem; color: var(--ink); }
.dp-section-title { font-size: 0.66rem; border-bottom: 2px solid var(--ink); padding-bottom: 0.4rem; }
.stat-label, .fin-tile-label { font-size: 0.62rem; color: var(--muted); }
.dp-info-label, .dp-field label, .sf-field label, .dp-modal-label, .fin-field label { font-size: 0.62rem; color: var(--muted); letter-spacing: 0.6px; }

/* ---------- SIDEBAR ---------- */

.sidebar {
    background: var(--paper);
    border-right: 3px solid var(--ink);
}
.sidebar-brand {
    height: 68px;
    padding: 0 0.85rem;
    border-bottom: 3px solid var(--ink);
    gap: 0.6rem;
}
.sidebar-logo {
    width: 30px !important;
    height: 30px !important;
    background: none;
    border-radius: 0 !important;
}
.sidebar-brand-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    color: var(--ink);
}
.sidebar-brand-name {
    font-family: var(--font-display);
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: -0.3px;
    line-height: 1;
    white-space: nowrap;
}
.sidebar-brand-tag {
    align-self: flex-start;
    font-family: var(--font-mono);
    font-size: 0.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    background: var(--ink);
    color: var(--acid);
    padding: 2px 5px;
    line-height: 1;
}
.sidebar-nav { padding: 0.8rem 0.6rem; gap: 2px; }
.sidebar-link {
    color: var(--ink);
    font-size: 0.74rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.2px;
    border: 2px solid transparent;
    padding: 0.5rem 0.6rem;
    transition: background .08s linear, color .08s linear, border-color .08s linear;
}
.sidebar-link:hover { background: var(--white); color: var(--ink); border-color: var(--ink); }
.sidebar-link.active { background: var(--ink); color: var(--acid); border-color: var(--ink); }
.sidebar-link.active:hover { background: var(--ink); }
.sidebar-link.active .sidebar-icon svg { color: var(--acid); }
.sidebar-icon svg { stroke-width: 2.2; }
.sidebar-user { border-top: 3px solid var(--ink); padding: 0.5rem 0.6rem; }
.sidebar-username {
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.sidebar-logout { font-size: 0.72rem; }
.sidebar-logout:hover { color: var(--c-red) !important; background: var(--white) !important; border-color: var(--ink); }
.sidebar-toggle { color: var(--ink); border-top: 2px solid var(--ink); }
.sidebar-toggle:hover { color: var(--ink); background: var(--acid); }
.sidebar-collapsed .sidebar-brand { padding: 0 0 0 11px; }

/* ---------- KNOPPEN ---------- */

.dp-btn, .fin-btn, .te-btn, .bl-import-btn, .import-lead-btn, .add-lead-btn, .show-more-btn,
.sf-actions button, .add-modal-actions button, .dp-modal-actions button, .fin-modal-actions button,
.te-modal-actions button, .cal-today-btn, .cal-nav-btn, .crud-add-row button, .panel-header button,
.settings-form button[type="submit"], .te-test-send, .import-dropzone button, .bl-tab {
    font-family: var(--font);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border: 2px solid var(--ink);
    background: var(--white);
    color: var(--ink);
    box-shadow: 3px 3px 0 var(--acid);
    transition: transform .08s linear, box-shadow .08s linear, background .08s linear, color .08s linear;
}
.dp-btn:hover, .fin-btn:hover, .te-btn:hover, .bl-import-btn:hover, .import-lead-btn:hover, .add-lead-btn:hover,
.show-more-btn:hover, .sf-actions button:hover, .add-modal-actions button:hover, .dp-modal-actions button:hover,
.fin-modal-actions button:hover, .te-modal-actions button:hover, .cal-today-btn:hover, .cal-nav-btn:hover,
.crud-add-row button:hover, .panel-header button:hover, .settings-form button[type="submit"]:hover, .te-test-send:hover,
.bl-tab:hover {
    transform: translate(3px, 3px);
    box-shadow: 0 0 0 var(--acid);
    background: var(--acid);
    color: var(--ink);
    border-color: var(--ink);
}
.dp-btn-primary, .fin-btn--primary, .te-btn-primary, .add-lead-btn, .import-lead-btn, .bl-import-btn,
.sf-actions button[type="submit"], .settings-form button[type="submit"], .add-modal-actions .dp-btn-primary, .bl-tab.active {
    background: var(--ink);
    color: var(--white);
}
.bl-tab.active:hover { background: var(--ink); color: var(--acid); }
.dp-btn-outline, .fin-btn--ghost, .te-btn-outline { background: var(--white); color: var(--ink); }
.dp-btn-danger { background: var(--white); color: var(--c-red); border-color: var(--ink); }
.dp-btn-danger:hover { background: var(--status-red); color: var(--ink); }
.dp-btn:disabled, .fin-btn:disabled, .te-btn:disabled, button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
}
.dp-btn-sm, .te-btn-sm { box-shadow: 2px 2px 0 var(--acid); }
.dp-btn-sm:hover, .te-btn-sm:hover { transform: translate(2px, 2px); }
.add-lead-btn { font-weight: 400; color: var(--acid); }
.add-lead-btn:hover { color: var(--ink); }
.show-more-btn { border-style: solid; font-size: 0.7rem; box-shadow: none; }
.show-more-btn:hover { transform: none; }
.te-btn-ai { background: var(--acid); color: var(--ink); }

/* Belknoppen in het leadpaneel: kleurvlakken met inktkader. */
.dp-qcall {
    font-family: var(--font);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-size: 0.68rem;
    border: 2px solid var(--ink);
    color: var(--ink);
    transition: transform .08s linear, box-shadow .08s linear;
    box-shadow: 2px 2px 0 var(--ink);
}
.dp-qcall:hover { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--ink); }
.dp-qcall-red, .dp-qcall-red:hover { background: var(--status-red); color: var(--ink); }
.dp-qcall-yellow, .dp-qcall-yellow:hover { background: var(--status-orange); color: var(--ink); }
.dp-qcall-green, .dp-qcall-green:hover { background: var(--acid); color: var(--ink); }
.dp-qcall-blue, .dp-qcall-blue:hover { background: var(--white); color: var(--ink); }
.dp-qcall-gray, .dp-qcall-gray:hover { background: var(--paper-2); color: var(--ink); }
.dp-qcall-whatsapp, .dp-qcall-whatsapp:hover { background: #b9f5c8; color: var(--ink); }

/* Iconknoppen (kruisje, potlood, prullenbak) blijven kaal. */
.dp-close, .dp-note-edit, .dp-note-delete, .fin-iconbtn, .action-menu-btn, .te-list-delete, .col-toggle-icon {
    box-shadow: none;
    border: 2px solid transparent;
}
.dp-close:hover, .fin-iconbtn:hover, .action-menu-btn:hover { background: var(--acid); color: var(--ink); border-color: var(--ink); }
.dp-note-edit:hover { background: var(--acid); }
.dp-note-delete:hover { background: var(--status-red); }

/* ---------- FORMULIEREN ---------- */

.main-wrapper input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]),
.main-wrapper select, .main-wrapper textarea,
.detail-panel input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]),
.detail-panel select, .detail-panel textarea,
.add-modal input:not([type="checkbox"]):not([type="radio"]), .add-modal select, .add-modal textarea,
.dp-modal input:not([type="checkbox"]):not([type="radio"]), .dp-modal select, .dp-modal textarea,
.fin-modal input:not([type="checkbox"]):not([type="radio"]), .fin-modal select, .fin-modal textarea,
.te-modal input, .te-modal textarea, .import-modal input:not([type="file"]), .import-modal select {
    font-family: var(--font) !important;
    background: var(--white) !important;
    color: var(--ink) !important;
    border: 2px solid var(--ink) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
.main-wrapper input:focus, .main-wrapper select:focus, .main-wrapper textarea:focus,
.detail-panel input:focus, .detail-panel select:focus, .detail-panel textarea:focus,
.add-modal input:focus, .add-modal select:focus, .add-modal textarea:focus,
.dp-modal input:focus, .dp-modal select:focus, .dp-modal textarea:focus,
.fin-modal input:focus, .fin-modal select:focus, .fin-modal textarea:focus,
.te-modal input:focus, .te-modal textarea:focus {
    outline: none !important;
    border-color: var(--ink) !important;
    box-shadow: 3px 3px 0 var(--acid) !important;
}
.main-wrapper input::placeholder, .detail-panel input::placeholder, .detail-panel textarea::placeholder { color: #9a958a; }
.main-wrapper input[type="checkbox"], .detail-panel input[type="checkbox"], .add-modal input[type="checkbox"] {
    accent-color: var(--ink);
    width: 15px;
    height: 15px;
}
/* Status-dropdown in de paneelkop blijft een badge (kleur per status, zie hieronder). */
.detail-panel select.dp-status-select { border-width: 2px !important; box-shadow: none !important; }

/* Toggle-switch (instellingen): vierkante schuif in een inktkader */
.crud-toggle-slider { background: var(--white); border: 2px solid var(--ink); }
.crud-toggle-slider::before { background: var(--ink); height: 10px; width: 12px; left: 2px; bottom: 2px; }
.crud-toggle input:checked + .crud-toggle-slider { background: var(--acid); }
.crud-toggle input:checked + .crud-toggle-slider::before { transform: translateX(16px); }

/* ---------- BADGES & TAGS ---------- */

.status-badge, .prio-badge, .days-badge, .card-package, .card-value, .fu-badge, .dp-tag, .dp-note-type,
.note-count-badge, .call-badge, .callback-badge, .se-pay-badge, .pipeline-count, .kanban-column-header .count,
.dp-count, .date-badge, .bl-prio, .fin-tag, .import-tag, .cal-ev-badge, .te-editor-title-badge, .se-contract-nr,
.audit-rec-priority-badge, .dp-call-outcome, .import-stat, .selected-lead-chip, .bl-section-count {
    font-family: var(--font-mono);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    border: 2px solid var(--ink);
    background: var(--white);
    color: var(--ink);
    line-height: 1.3;
}
.status-badge, select.dp-status-select { font-size: 0.6rem; padding: 0.15rem 0.5rem; border: 2px solid var(--ink); background: var(--white); color: var(--ink); font-family: var(--font-mono); font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; }
.status-badge.call_scheduled, .status-badge.call_done, .status-badge.awaiting_keywords { background: var(--status-orange); color: var(--ink); }
.status-badge.keywords_received, .status-badge.package_requested { background: var(--acid); color: var(--ink); }
.status-badge.validation_failed { background: var(--status-red); color: var(--ink); }
.status-badge.deal_closed { background: var(--ink); color: var(--acid); }
.status-badge.lead_new, .status-badge.invite_sent { background: var(--white); color: var(--ink); }
select.dp-status-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%230a0a0a'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 0.4rem center !important; background-size: 8px !important; }
select.dp-status-select.call_scheduled, select.dp-status-select.call_done, select.dp-status-select.awaiting_keywords { background-color: var(--status-orange) !important; }
select.dp-status-select.keywords_received, select.dp-status-select.package_requested { background-color: var(--acid) !important; }
select.dp-status-select.validation_failed { background-color: var(--status-red) !important; }
select.dp-status-select.deal_closed { background-color: var(--ink) !important; color: var(--acid) !important; }

.prio-badge { font-size: 0.58rem; padding: 1px 5px; }
.prio-high, .bl-prio-high { background: var(--status-red); color: var(--ink); }
.prio-medium, .bl-prio-medium { background: var(--status-orange); color: var(--ink); }
.prio-low, .bl-prio-low { background: var(--paper-2); color: var(--ink); }

.days-ok, .dp-tag-ok, .se-pay-ok, .call-badge.call-opgenomen, .import-stat-ok, .audit-rec-priority-4 { background: var(--acid); color: var(--ink); }
.days-warning, .dp-tag-warn, .se-pay-due, .call-badge.call-voicemail, .callback-badge.callback-today, .import-stat-warn, .audit-rec-priority-2 { background: var(--status-orange); color: var(--ink); }
.days-danger, .dp-tag-err, .fu-badge.fu-unsub, .call-badge.call-niet_opgenomen, .callback-badge.callback-overdue, .import-stat-err, .audit-rec-priority-1 { background: var(--status-red); color: var(--ink); }
.dp-tag-neutral, .date-badge, .pipeline-count, .kanban-column-header .count, .dp-count, .fu-badge, .dp-note-type, .note-count-badge, .card-package, .card-value { background: var(--white); color: var(--ink); }
.date-badge { opacity: 1; border-color: var(--line); color: var(--muted); }
.pipeline-count, .kanban-column-header .count, .dp-count { font-size: 0.6rem; padding: 0.05rem 0.4rem; }
.se-contract-nr { border: none; color: var(--muted); }
.fin-tag-seo { background: var(--acid); }
.fin-tag-lb { background: var(--paper-2); }

/* ---------- KANBAN ---------- */

.stat-card, .fin-tile {
    background: var(--white);
    border: 2px solid var(--ink);
    box-shadow: 3px 3px 0 var(--ink);
}
.fin-tile::before { width: 8px; background: var(--ink); }
.fin-tile--accent::before { background: var(--accent, var(--acid)); }
.fin-tile { padding-left: 24px; }
.stat-value, .fin-tile-value {
    font-family: var(--font-display);
    font-weight: 400;
    letter-spacing: -0.5px;
    color: var(--ink);
}
.stat-value.stat-accent { color: var(--ink); }
.stat-value.stat-muted { color: var(--muted); }

.filter-search, .filter-select, .search-box input, .contacts-toolbar select, .bl-sort-select, .kanban-sort-select {
    border: 2px solid var(--ink) !important;
    background: var(--white) !important;
}

.pipeline-header { border-bottom: 3px solid var(--ink); padding: 0.5rem 0; margin-bottom: 0.7rem; }
.kanban-column {
    background: var(--paper);
    border: 2px solid var(--ink);
}
.kanban-header-accent { height: 5px; border-bottom: 2px solid var(--ink); }
.kanban-column-header { background: var(--white); border-bottom: 2px solid var(--ink); }
.kanban-column-body { scrollbar-color: var(--ink) transparent; }
.kanban-column-body::-webkit-scrollbar-thumb { background: var(--ink); }
.kanban-column-body.drop-valid { background: var(--acid-soft); }
.kanban-column-body.drop-invalid { background: #ffe3df; }

.lead-card {
    background: var(--white);
    border: 2px solid var(--ink);
    border-left-width: 6px;
    box-shadow: 2px 2px 0 var(--ink);
    transition: transform .08s linear, box-shadow .08s linear;
}
.lead-card:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
.lead-card.dragging { box-shadow: 6px 6px 0 var(--acid); }
.lead-card .company { font-weight: 800; letter-spacing: -0.1px; }
.lead-card .card-footer { flex-wrap: wrap; row-gap: 4px; }
.callback-badge, .date-badge, .days-badge, .prio-badge, .fu-badge, .call-badge, .note-count-badge { white-space: nowrap; }
.callback-badge { font-size: 0.56rem; letter-spacing: 0.2px; }
.lead-card.status-ok { border-left-color: var(--acid); }
.lead-card.status-warning { border-left-color: var(--status-orange); }
.lead-card.status-danger { border-left-color: var(--status-red); }
.empty-col { opacity: .35; font-family: var(--font-mono); font-size: 0.8rem; }

.call-banner {
    background: var(--acid);
    border: 2px solid var(--ink);
    box-shadow: 3px 3px 0 var(--ink);
}
.call-banner-item { background: var(--white); border: 2px solid var(--ink); }
.call-banner-count { background: var(--ink); color: var(--acid); font-family: var(--font-mono); }

/* ---------- LEADPANEEL ---------- */

.detail-overlay { background: rgba(10,10,10,.45); }
.detail-panel {
    border-left: 3px solid var(--ink);
    box-shadow: none;
}
.dp-header { border-bottom: 3px solid var(--ink); }
.dp-title { font-size: 1.15rem; }
.dp-days, .dp-created { font-family: var(--font-mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.4px; color: var(--muted); }
.dp-info-row { border-bottom: 1px solid var(--line); }
.dp-info-value a { color: var(--ink); }
.dp-note-form-block { background: var(--paper); border: 2px solid var(--ink); }
.dp-note-form-block select, .dp-note-form-block textarea { background: var(--white); border: 2px solid var(--ink); }

/* Tijdlijn: vierkante stippen op een inktlijn */
.dp-timeline::before { background: var(--ink); width: 2px; left: 4px; }
.dp-timeline-dot { background: var(--acid); border: 2px solid var(--ink); }
.dp-dot-note, .dp-dot-notitie { background: var(--acid) !important; }
.dp-dot-belnotitie { background: var(--status-orange) !important; }
.dp-dot-afspraak { background: var(--ink) !important; }
.dp-dot-overig { background: var(--paper-2) !important; }
.dp-timeline-label { font-weight: 600; }
.dp-timeline-date { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.3px; }

/* Follow-up voortgangsbalk */
.dp-fu-bar { background: var(--white); border: 2px solid var(--ink); height: 10px; }
.dp-fu-bar-fill { background: var(--acid); }
.dp-fu-alert { border: 2px solid var(--ink); font-weight: 700; }
.dp-fu-unsub { background: var(--status-red); color: var(--ink); }
.dp-fu-paused { background: var(--status-orange); color: var(--ink); }

/* ---------- TABELLEN ---------- */

.contacts-table-wrap, .bl-table-wrap, .fin-table-wrap, .settings-panel, .fin-card, .seo-card, .fin-panel, .import-preview-wrap {
    background: var(--white);
    border: 2px solid var(--ink);
    box-shadow: 3px 3px 0 var(--ink);
}
.contacts-table th, .bl-table th, .fin-table th, .crud-table th, .dp-table th, .import-preview-table th {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.7px;
    color: var(--ink);
    border-bottom: 2px solid var(--ink);
    background: var(--white);
}
.contacts-table td, .bl-table td, .fin-table td, .crud-table td, .dp-table td, .import-preview-table td {
    border-bottom: 1px solid var(--line);
}
.contact-row:hover, .bl-row:hover, .fin-table tbody tr:hover { background: var(--acid-soft); }
.crud-table tr.drag-over { background: var(--acid-soft); }
.bl-section-title { border-bottom: 2px solid var(--ink); }

/* Rij-actiemenu */
.action-menu-dropdown { background: var(--white); border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); }
.action-menu-dropdown a:hover, .action-menu-dropdown button:hover { background: var(--acid); }

/* ---------- TABS ---------- */

.settings-tabs, .fin-tabs, .te-editor-tabs { border-bottom: 3px solid var(--ink); }
.settings-tab, .fin-tab, .te-tab {
    font-family: var(--font);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-size: 0.76rem;
    color: var(--muted);
    border-bottom: 3px solid transparent;
    margin-bottom: -3px;
}
.settings-tab:hover, .fin-tab:hover, .te-tab:hover { color: var(--ink); background: var(--acid-soft); }
.settings-tab.active, .fin-tab.is-active, .te-tab.active { color: var(--ink); border-bottom-color: var(--ink); background: var(--acid); }

/* ---------- MODALS ---------- */

.add-modal-overlay, .dp-modal-overlay, .fin-modal, .te-modal-overlay, .import-modal-overlay, .cal-ev-popup-overlay {
    background: rgba(10,10,10,.5);
}
.add-modal, .dp-modal, .fin-modal-box, .te-modal, .import-modal, .cal-ev-popup {
    background: var(--white);
    border: 3px solid var(--ink);
    box-shadow: 8px 8px 0 var(--acid);
}
.add-modal-header, .cal-ev-popup-header { border-bottom: 3px solid var(--ink); }
.add-modal-header h2, .dp-modal-title, .fin-modal-box h3, .te-modal h3 {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: -0.3px;
    color: var(--ink);
    font-size: 1.05rem;
}
.sf-msg-err, .te-msg-err { color: var(--c-red); font-weight: 700; }
.import-error-list { background: var(--status-red); color: var(--ink); border: 2px solid var(--ink); }
.add-modal-error { color: var(--c-red); font-weight: 700; }
.add-modal-error:not(:empty) { background: var(--status-red); color: var(--ink); border: 2px solid var(--ink); padding: 0.4rem 0.6rem; }
.sf-msg-ok, .te-msg-ok { color: var(--c-green); font-weight: 700; }
.te-msg-warn { color: var(--c-yellow); font-weight: 700; }
.import-dropzone { border: 3px dashed var(--ink); background: var(--paper); }
.import-dropzone-active { background: var(--acid-soft); }

/* ---------- TOAST ---------- */

.toast {
    background: var(--ink);
    color: var(--acid);
    border: 2px solid var(--ink);
    box-shadow: 4px 4px 0 var(--acid);
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.transition-overlay { background: rgba(244,241,233,.7); }
.transition-spinner, .dp-loading-spinner { border-color: var(--paper-2); border-top-color: var(--ink); }

/* ---------- AGENDA ---------- */

.cal-grid-wrap, .cal-events { background: var(--white); border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.cal-day { border: 1px solid var(--line); }
.cal-day:hover { background: var(--acid-soft); }
.cal-day-today { background: var(--acid); }
.cal-day-selected { outline: 2px solid var(--ink); outline-offset: -2px; }
.cal-dow { font-family: var(--font-mono); font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.6px; }
.cal-dot-appointment { background: var(--ink); }
.cal-dot-deadline { background: var(--status-red); }
.cal-event-card { background: var(--white); border: 2px solid var(--ink); }
.cal-event-card:hover { box-shadow: 3px 3px 0 var(--ink); }
.cal-nav-title { font-family: var(--font-display); text-transform: uppercase; }

/* ---------- FINANCIEEL & SEO-KAARTEN ---------- */

.fin-monthnav { background: var(--white); border: 2px solid var(--ink); }
.fin-monthnav a:hover { background: var(--acid); }
.fin-chart-toggle { background: var(--paper); border: 2px solid var(--ink); }
.fin-chart-toggle button.is-active { background: var(--ink); color: var(--acid); box-shadow: none; }
.fin-bar-track { background: var(--white); border: 2px solid var(--ink); }
.fin-bar-fill { background: var(--acid); }
.fin-tile-value.pos { color: var(--c-green); }
.fin-tile-value.neg { color: var(--c-red); }

/* ---------- TEMPLATE-EDITOR ---------- */

.te-sidebar, .te-editor, .te-preview, .te-ai-panel { background: var(--white); border: 2px solid var(--ink); }
.te-list-item.active { background: var(--acid); color: var(--ink); }
.te-list-item:hover { background: var(--acid-soft); }
.te-category-header { font-family: var(--font-mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.6px; }

/* ---------- SEO-AUDIT ---------- */

.audit-hero { background: var(--ink); color: var(--white); border: 3px solid var(--ink); }
.audit-hero-score { color: var(--acid); font-family: var(--font-display); }
.audit-section, .audit-sidebar-card, .audit-rec-card, .audit-cwv-card, .audit-advice-card {
    background: var(--white);
    border: 2px solid var(--ink);
    box-shadow: 3px 3px 0 var(--ink);
}
.audit-check-pass { color: var(--c-green); }
.audit-check-fail { color: var(--c-red); }

/* ---------- MOBIEL ---------- */

@media (max-width: 768px) {
    .lead-card, .stat-card, .fin-tile { box-shadow: 2px 2px 0 var(--ink); }
    .add-modal, .dp-modal, .fin-modal-box { box-shadow: 4px 4px 0 var(--acid); }
}

/* ---------- BELLIJST ---------- */

.bl-prio-filter {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 2px solid var(--ink);
    background: var(--white);
    color: var(--ink);
}
.bl-prio-filter:hover:not(.active) { background: var(--acid-soft); color: var(--ink); border-color: var(--ink); }
.bl-prio-filter.active { background: var(--ink); color: var(--acid); border-color: var(--ink); }
.bl-phone { color: var(--ink); font-weight: 700; }
.bl-phone:hover { background: var(--acid); }

/* Knoppen in beheertabellen: compact, naast elkaar */
.crud-table td .dp-btn { padding: 0.25rem 0.55rem; font-size: 0.66rem; box-shadow: 2px 2px 0 var(--acid); }
.crud-table td .dp-btn:hover { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--acid); }
.crud-table td:last-child { white-space: nowrap; }

/* ---------- KAARTVOET: signalen luid, tellers stil ---------- */

.card-signals {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}
.signal {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-mono);
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border: 2px solid var(--ink);
    background: var(--white);
    color: var(--ink);
    padding: 1px 6px;
    white-space: nowrap;
    line-height: 1.4;
    cursor: help;
}
.signal svg { width: 11px; height: 11px; stroke-width: 2.5; }
.signal-callback { background: var(--white); }
.signal-callback.signal-today { background: var(--status-orange); }
.signal-callback.signal-overdue { background: var(--status-red); }
.signal-prio { background: var(--status-red); }
.signal-opp { background: var(--acid); }

.lead-card .card-footer.card-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    gap: 2px 10px;
    margin-top: 6px;
    padding-top: 5px;
    border-top: 1px solid var(--line);
}
.meta-item {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    font-weight: 400;
    color: var(--muted);
    white-space: nowrap;
    cursor: help;
}
.meta-item svg { width: 11px; height: 11px; stroke-width: 2; }
.meta-days-warning { color: var(--c-yellow); font-weight: 700; }
.meta-days-danger { color: var(--c-red); font-weight: 700; }
.meta-unsub { text-decoration: line-through; color: var(--c-red); }
.meta-date { margin-left: auto; }
.meta-prio { text-transform: uppercase; letter-spacing: 0.3px; font-size: 0.55rem; }

/* ---------- LEGENDA KAARTJES ---------- */

.legend-toggle {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 2px solid var(--ink);
    background: var(--white);
    color: var(--ink);
    padding: 2px 8px;
    cursor: pointer;
}
.legend-toggle:hover { background: var(--acid); }
.card-legend[hidden] { display: none; }
.card-legend {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem 1.5rem;
    background: var(--white);
    border: 2px solid var(--ink);
    box-shadow: 3px 3px 0 var(--ink);
    padding: 0.9rem 1rem;
    margin-bottom: 0.9rem;
    font-size: 0.78rem;
    line-height: 1.45;
}
.card-legend-title {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    border-bottom: 2px solid var(--ink);
    padding-bottom: 4px;
    margin-bottom: 6px;
}
.card-legend-row { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 5px; }
.card-legend-row > svg { width: 14px; height: 14px; stroke-width: 2; flex-shrink: 0; margin-top: 2px; }
.card-legend-row .signal, .card-legend-row .meta-item { flex-shrink: 0; cursor: default; }
.card-legend-swatch { width: 14px; height: 14px; border: 2px solid var(--ink); flex-shrink: 0; margin-top: 2px; }

/* ---------- SALES-HARNAS: paneelblok en Mijn dag ---------- */

.dp-sales { background: var(--white); border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--acid); padding: 0.75rem 0.9rem 0.9rem; }
.dp-sales .dp-section-title { margin-bottom: 0.5rem; }
.dp-sales-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem 1rem; }
.dp-sales-next { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 0.6rem; }
.dp-sales-owner { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }
.dp-sales-select { font-family: var(--font); font-size: 0.8rem; padding: 0.25rem 0.4rem; border: 2px solid var(--ink) !important; background: var(--white) !important; }
.dp-sales-value { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin: 2px 0 3px; }
.dp-sales-why { font-size: 0.8rem; color: var(--ink); line-height: 1.4; }
.dp-sales-btns { display: flex; gap: 0.4rem; margin-top: 0.5rem; flex-wrap: wrap; }
.dp-sales-state { background: var(--white); font-size: 0.62rem; }
.dp-next-overdue { background: var(--status-red); }
.dp-next-today { background: var(--status-orange); }
.dp-next-later { background: var(--acid); }
.dp-next-form { margin-top: 0.6rem; padding-top: 0.6rem; border-top: 1px dashed var(--ink); }
.dp-next-form[hidden] { display: none; }

.md-sub { font-family: var(--font-mono); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted); margin-top: 4px; }
.md-who { display: flex; align-items: center; gap: 0.5rem; }
.md-who label { font-family: var(--font-mono); font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.6px; }
.md-stats { display: flex; gap: 0.75rem; flex-wrap: wrap; margin: 0.75rem 0 1.25rem; }
.md-stat { flex: 1; min-width: 120px; }
.md-stat-overdue .stat-value { color: var(--c-red); }
.md-stat-today .stat-value { color: var(--c-yellow); }
.md-section { margin-bottom: 1.5rem; }
.md-hint { font-family: var(--font); font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 0.74rem; color: var(--muted); margin-left: 0.5rem; }
.md-time { white-space: nowrap; }
.md-when { font-family: var(--font-mono); font-weight: 700; font-size: 0.85rem; }
.md-date { display: block; font-family: var(--font-mono); font-size: 0.62rem; color: var(--muted); }
.md-row-overdue .md-when { color: var(--c-red); }
.md-type { cursor: default; }
.md-type-bellen { background: var(--acid); }
.md-type-voorbereiden, .md-type-afspraak_resultaat { background: var(--status-orange); }
.md-type-reactiveren { background: var(--paper-2); }
.md-contact { font-size: 0.78rem; color: var(--muted); margin-top: 2px; }
.md-reason { font-size: 0.82rem; max-width: 380px; }
.md-state { font-family: var(--font-mono); font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.4px; color: var(--muted); margin-top: 3px; }
.md-actions { white-space: nowrap; text-align: right; }
.md-actions .dp-btn { margin-left: 4px; }
.md-row-done { opacity: 0.35; text-decoration: line-through; }
.md-empty { padding: 1rem; font-family: var(--font-mono); font-size: 0.72rem; color: var(--muted); }
.md-section-overdue .bl-table-wrap { box-shadow: 3px 3px 0 var(--status-red); }
@media (max-width: 768px) {
    .dp-sales-grid { grid-template-columns: 1fr; }
    .md-reason { max-width: none; }
}

/* ---------- MIJN DAG: klikbare tegels en bulk-toewijzing ---------- */

a.stat-card.md-stat { display: block; color: var(--ink); text-decoration: none; cursor: pointer; transition: transform .08s linear, box-shadow .08s linear; }
a.stat-card.md-stat:hover { background: var(--white); transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--ink); }
a.stat-card.md-stat.md-stat-active { background: var(--acid); }
.md-leads { margin-top: 0.5rem; }
.md-back { margin-left: auto; font-family: var(--font); font-size: 0.72rem; font-weight: 700; text-transform: none; letter-spacing: 0; }
.md-leads .bl-section-title { display: flex; align-items: center; gap: 0.5rem; }
.md-lv-intro { font-size: 0.84rem; margin: 0.5rem 0 0.9rem; max-width: 760px; line-height: 1.5; }
.md-filters { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.8rem; }
.md-filters label, .md-bulk label { display: flex; align-items: center; gap: 0.4rem; font-family: var(--font-mono); font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
.md-bulk { display: flex; align-items: center; gap: 0.6rem 1rem; flex-wrap: wrap; background: var(--acid-soft); border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); padding: 0.6rem 0.8rem; margin-bottom: 0.9rem; position: sticky; top: 0; z-index: 5; }
.md-bulk .md-bulk-check { text-transform: none; font-family: var(--font); font-size: 0.8rem; letter-spacing: 0; }
.md-bulk-count { font-family: var(--font-mono); font-size: 0.7rem; font-weight: 700; }
.md-perday { width: 64px; padding: 0.25rem 0.4rem; }
.md-bulk-msg { font-size: 0.8rem; font-weight: 700; }
.md-pager { display: flex; align-items: center; justify-content: center; gap: 1rem; margin: 1rem 0; font-family: var(--font-mono); font-size: 0.7rem; }
.md-leads .bl-table input[type="checkbox"], .md-bulk input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--ink); cursor: pointer; }

/* ---------- KLAAR: WAT GEBEURDE ER? ---------- */

.oc-modal { max-width: 560px; max-height: 92vh; overflow-y: auto; }
.oc-sub { font-family: var(--font-mono); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted); margin: -0.35rem 0 0.9rem; }
.oc-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.45rem; margin-bottom: 0.9rem; }
.oc-choice { font-family: var(--font); font-weight: 700; font-size: 0.84rem; text-align: left; padding: 0.6rem 0.7rem; background: var(--white); color: var(--ink); border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); cursor: pointer; transition: transform .08s linear, box-shadow .08s linear; }
.oc-choice:hover { background: var(--acid-soft); }
.oc-choice:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.oc-choice.is-picked { background: var(--acid); transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--ink); }
.oc-hint { font-size: 0.8rem; line-height: 1.45; background: var(--paper); border: 2px solid var(--ink); padding: 0.45rem 0.6rem; margin-bottom: 0.7rem; }
.oc-when { margin-bottom: 0.7rem; }
.oc-next { background: var(--acid-soft); border: 2px solid var(--ink); padding: 0.6rem; margin-bottom: 0.7rem; }
.oc-next-title { font-family: var(--font-mono); font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 0.45rem; }
.oc-next-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-bottom: 0.45rem; }
.oc-error { color: var(--c-red); font-weight: 700; font-size: 0.82rem; margin-top: 0.6rem; }
.oc-modal .dp-modal-actions { margin-top: 1rem; }
@media (max-width: 520px) {
    .oc-choices { grid-template-columns: 1fr 1fr; }
    .oc-next-grid { grid-template-columns: 1fr; }
}

/* ---------- MIJN DAG: VANDAAG GEDAAN ---------- */

.md-done { background: var(--white); border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); margin: 0 0 1.5rem; }
.md-done-summary { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 1rem; padding: 0.6rem 0.8rem; cursor: pointer; list-style: none; }
.md-done-summary::-webkit-details-marker { display: none; }
.md-done-summary::before { content: "+"; font-family: var(--font-mono); font-weight: 700; width: 0.8rem; }
.md-done[open] > .md-done-summary::before { content: "\2212"; }
.md-done[open] > .md-done-summary { border-bottom: 2px solid var(--ink); }
.md-done-title { font-family: var(--font-display); text-transform: uppercase; font-size: 0.92rem; letter-spacing: -0.2px; }
.md-done-counts { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-left: auto; }
.md-done-count { font-family: var(--font-mono); font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.4px; background: var(--paper); border: 1.5px solid var(--ink); padding: 2px 7px; }
.md-done-count b { font-size: 0.82rem; }
.md-done .bl-table-wrap { border: 0; box-shadow: none; }
.md-done-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 1rem; padding: 0.5rem 0.8rem; border-bottom: 2px solid var(--ink); font-family: var(--font-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.4px; }
.md-done-nav a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.md-done-nav .md-done-today { margin-left: auto; background: var(--acid); border: 1.5px solid var(--ink); padding: 2px 7px; text-decoration: none; }
.md-done-pick input[type="date"] { font-family: var(--font-mono); font-size: 0.72rem; border: 1.5px solid var(--ink); background: var(--paper); padding: 2px 6px; }
.md-hist { border-top: 2px solid var(--ink); }
.md-hist-title { font-family: var(--font-mono); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.5px; padding: 0.6rem 0.8rem 0.2rem; }
.md-hist-table td:not(:first-child), .md-hist-table th:not(:first-child) { text-align: right; width: 14%; }
.md-hist-table td a { color: var(--ink); text-decoration: none; font-weight: 600; }
.md-hist-current { background: var(--acid); }
.md-outcome { cursor: default; background: var(--paper-2); }
.md-outcome-gesproken, .md-outcome-afspraak { background: var(--acid); }
.md-outcome-terugbellen { background: var(--status-orange); }
.md-outcome-geen_interesse, .md-outcome-spam { background: var(--status-red); }
.md-outcome-verzet { background: var(--white); }
.md-next { font-size: 0.8rem; white-space: nowrap; }

/* ── Overzicht voor meekijkers van Backlinks.nl (overzicht.html) ── */
.ov-intro { max-width: 60rem; margin: 0 0 1rem; font-size: 0.92rem; }
.ov-note { font-family: var(--font-mono); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.4px; margin: -0.4rem 0 1rem; }
.ov-admin { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.ov-stats { flex-wrap: wrap; }
.ov-block { margin: 0 0 2rem; }
.ov-title { font-family: var(--font-display); text-transform: uppercase; font-size: 1.05rem; letter-spacing: -0.2px; margin: 0 0 0.7rem; display: flex; align-items: center; gap: 0.5rem; }
.ov-count { font-family: var(--font-mono); font-size: 0.7rem; background: var(--acid); border: 1.5px solid var(--ink); padding: 1px 7px; }
.ov-empty { background: var(--white); border: 2px solid var(--ink); }
.ov-label { display: inline-block; font-family: var(--font-mono); font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; border: 1.5px solid var(--ink); padding: 1px 6px; background: var(--paper); color: var(--ink); white-space: nowrap; }
.ov-label-goed { background: var(--acid); }
.ov-label-let_op { background: #ffb020; }
.ov-label-stop { background: #ff4b3e; }
.ov-label-klant { background: var(--ink); color: var(--acid); }
.ov-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: 0.9rem; }
.ov-card { background: var(--white); border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); padding: 0.8rem 0.9rem; display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.ov-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; }
.ov-company, .ov-chip { font: inherit; color: var(--ink); background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
.ov-company { font-weight: 700; font-size: 0.98rem; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.ov-company:focus-visible, .ov-chip:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.ov-card-contact { font-size: 0.8rem; }
.ov-card-note { font-size: 0.86rem; overflow-wrap: anywhere; }
.ov-card-next { font-family: var(--font-mono); font-size: 0.7rem; }
.ov-proposal { border-top: 1.5px solid var(--ink); margin-top: 0.3rem; padding-top: 0.4rem; }
.ov-proposal summary { cursor: pointer; font-size: 0.8rem; font-weight: 600; }
.ov-proposal .bl-table-wrap { border: 0; box-shadow: none; margin-top: 0.4rem; }
.ov-links td:nth-child(n+3), .ov-links th:nth-child(n+3) { text-align: right; }
.ov-day { margin-bottom: 0.8rem; }
.ov-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ov-chip { background: var(--ink); color: var(--acid); border: 2px solid var(--ink); padding: 3px 9px; font-weight: 700; font-size: 0.82rem; }
.ov-funnel { background: var(--white); border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); padding: 0.8rem 0.9rem; display: grid; gap: 0.5rem; }
.ov-funnel-row { display: grid; grid-template-columns: minmax(8rem, 15rem) 1fr 3rem; align-items: center; gap: 0.7rem; font-size: 0.85rem; }
.ov-funnel-bar { height: 0.8rem; border: 1.5px solid var(--ink); background: var(--paper); }
.ov-funnel-bar span { display: block; height: 100%; background: var(--acid); }
.ov-funnel-count { font-family: var(--font-mono); font-weight: 700; text-align: right; }
.dp-proposal { border: 1.5px solid var(--ink); padding: 0.5rem 0.6rem; margin-bottom: 0.6rem; }
.dp-proposal-head { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
.dp-proposal-sub { font-family: var(--font-mono); font-size: 0.68rem; margin: 0.2rem 0 0.4rem; }
@media (max-width: 600px) {
    .ov-funnel-row { grid-template-columns: 1fr 2.5rem; }
    .ov-funnel-bar { grid-column: 1 / -1; grid-row: 2; }
}