/*
|--------------------------------------------------------------------------
| Planiq V2 - Central stylesheet
|--------------------------------------------------------------------------
| Step52a
| Flowdesk-indexkaart als visuele basis.
|
| Doel:
| - professionele fixed header
| - rustige appbreedte
| - werkbord met Flowdesk-kaarten
| - Planiq blijft dynamisch/SaaS-ready
|--------------------------------------------------------------------------
*/

* {
    box-sizing: border-box;
}

:root {
    --app-bg: #eef1f5;
    --app-card: #ffffff;
    --app-soft: #f8fafc;
    --app-text: #0f172a;
    --app-muted: #64748b;
    --app-border: #dbe2ea;

    --app-dark: #0f172a;
    --app-dark-soft: #111827;

    --app-orange: #ff6a00;
    --app-blue: #2563eb;
    --app-green: #16a34a;
    --app-red: #dc2626;

    --app-width: 720px;
    --app-wide-width: 980px;

    --planiq-label-primary-bg: #ff6a00;
    --planiq-label-primary-fg: #ffffff;
    --planiq-label-secondary-bg: #e2e8f0;
    --planiq-label-secondary-fg: #0f172a;
    --planiq-label-status-bg: #16a34a;
    --planiq-label-status-fg: #ffffff;

    --planiq-header-bg: rgba(15, 23, 42, .97);
    --planiq-header-fg: #f8fafc;
    --planiq-header-muted: #94a3b8;
    --planiq-header-hover: rgba(255, 255, 255, .075);
}

html,
body {
    width: 100%;
    max-width: 100%;
    min-height: 100%;
    margin: 0;
    overflow-x: hidden;
}

body {
    padding-top: 68px;
    background: var(--app-bg);
    color: var(--app-text);
    font-family: Arial, sans-serif;
    font-size: 15px;
    line-height: 1.45;
}

a {
    color: inherit;
}

.topbar {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 99999;
    width: 100vw;
    min-height: 68px;
    margin: 0;
    padding: 0;
    background: var(--planiq-header-bg);
    color: var(--planiq-header-fg);
    border-bottom: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 16px 40px rgba(15,23,42,.16);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.topbar-inner {
    width: 100%;
    max-width: var(--app-width);
    min-height: 68px;
    margin: 0 auto;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.topbar-brand,
.topbar .brand {
    min-width: 0;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 1px;
    color: inherit;
    text-decoration: none;
}

.topbar-brand:hover,
.topbar-brand:focus,
.topbar .brand:hover,
.topbar .brand:focus {
    color: inherit;
    text-decoration: none;
    outline: none;
}

.topbar-brand-title,
.topbar .brand-title {
    color: var(--planiq-header-fg);
    font-size: 21px;
    line-height: 1.05;
    font-weight: 950;
    letter-spacing: -0.04em;
    max-width: 62vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topbar-brand-subtitle,
.topbar .brand-subtitle {
    color: var(--planiq-header-muted);
    font-size: 11px;
    line-height: 1.15;
    font-weight: 850;
    max-width: 62vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

.topbar-menu-wrap {
    position: relative;
}

.topbar-menu-toggle {
    position: relative;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.055);
    color: var(--planiq-header-fg);
    cursor: pointer;
    font-size: 0;
    padding: 0;
}

.topbar-menu-toggle::before,
.topbar-menu-toggle::after,
.topbar-menu-toggle span {
    content: "";
    position: absolute;
    left: 50%;
    width: 18px;
    height: 2px;
    background: currentColor;
    border-radius: 999px;
    transform: translateX(-50%);
}

.topbar-menu-toggle::before {
    top: 15px;
}

.topbar-menu-toggle span {
    top: 21px;
}

.topbar-menu-toggle::after {
    top: 27px;
}

.topbar-menu-toggle:hover,
.topbar-menu-toggle:focus {
    background: var(--planiq-header-hover);
    color: var(--planiq-header-fg);
    outline: none;
}

.topbar-menu-panel {
    display: none;
    position: absolute;
    right: 0;
    top: 52px;
    width: min(320px, calc(100vw - 24px));
    padding: 6px;
    background: rgba(15,23,42,.99);
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 28px 70px rgba(0,0,0,.34);
}

.topbar-menu-wrap:hover .topbar-menu-panel,
.topbar-menu-wrap:focus-within .topbar-menu-panel,
.topbar-menu-wrap.is-open .topbar-menu-panel {
    display: block;
}

.topbar-menu-panel a,
.topbar-menu-panel .topbar-menu-label {
    display: flex;
    align-items: center;
    min-height: 42px;
    padding: 0 12px;
    color: var(--planiq-header-fg);
    text-decoration: none;
    font-size: 14px;
    font-weight: 850;
}

.topbar-menu-panel a:hover,
.topbar-menu-panel a:focus {
    background: var(--planiq-header-hover);
    color: var(--planiq-header-fg);
    text-decoration: none;
    outline: none;
}

.topbar-menu-panel a.is-primary {
    background: rgba(255,255,255,.11);
}

.topbar-menu-separator {
    height: 1px;
    margin: 6px 4px;
    background: rgba(255,255,255,.09);
}

.topbar-menu-label {
    min-height: auto !important;
    padding-top: 10px !important;
    padding-bottom: 6px !important;
    color: var(--planiq-header-muted) !important;
    font-size: 11px !important;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.topbar-actions {
    display: none !important;
}

.app-shell,
.dashboard-shell {
    padding: 0;
}

.app-container,
.dashboard-container {
    width: 100%;
    max-width: var(--app-width);
    margin: 0 auto;
    padding: 16px;
}

.app-container.is-wide {
    max-width: var(--app-wide-width);
}

.primary-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0 14px;
    background: #1d4ed8;
    color: #ffffff;
    text-decoration: none;
    font-size: 13px;
    font-weight: 950;
    border: 0;
    border-radius: 999px;
}

.primary-link:hover,
.primary-link:focus {
    background: #0f172a;
    color: #ffffff;
    outline: none;
    text-decoration: none;
}

.notice {
    margin: 0 0 12px;
    padding: 12px;
    background: #ecfdf5;
    border: 1px solid #bbf7d0;
    color: #166534;
    font-size: 14px;
    font-weight: 900;
}

.notice.error {
    background: #fef2f2;
    border-color: #fecaca;
    color: #991b1b;
}

/*
|--------------------------------------------------------------------------
| Step52a - Werkbord
|--------------------------------------------------------------------------
*/

.customer-board {
    display: grid;
    gap: 12px;
}

.customer-board-hero {
    display: none;
}

.customer-board-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 48px;
    padding: 8px;
    background: #ffffff;
    border: 1px solid var(--app-border);
}

.customer-board-tabs {
    display: flex;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.customer-board-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0 11px;
    background: #f8fafc;
    border: 1px solid #dbe2ea;
    color: #0f172a;
    text-decoration: none;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 950;
}

.customer-board-tab:hover,
.customer-board-tab:focus {
    background: #f1f5f9;
    color: #0f172a;
    text-decoration: none;
    outline: none;
}

.customer-board-tab.is-active {
    background: #0f172a;
    border-color: #0f172a;
    color: #ffffff;
}

.customer-board-sections {
    display: grid;
    gap: 12px;
}

.customer-board-section {
    display: grid;
    gap: 8px;
}

.customer-board-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 28px;
    gap: 10px;
    padding: 0 2px;
}

.customer-board-section-title {
    margin: 0;
    color: #0f172a;
    font-size: 19px;
    line-height: 1.1;
    font-weight: 950;
    letter-spacing: -0.04em;
}

.customer-board-section-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 24px;
    padding: 0 8px;
    background: #e2e8f0;
    color: #0f172a;
    font-size: 11px;
    font-weight: 950;
}

.customer-board-list {
    display: grid;
    gap: 12px;
}

.customer-card {
    position: relative;
    display: block;
    background: #ffffff;
    border: 1px solid #dbe2ea;
    color: inherit;
    text-decoration: none;
    box-shadow: 0 8px 22px rgba(15,23,42,.05);
    overflow: hidden;
}

.customer-card:hover,
.customer-card:focus {
    border-color: #cbd5e1;
    color: inherit;
    text-decoration: none;
    outline: none;
    box-shadow: 0 12px 32px rgba(15,23,42,.08);
}

.customer-card-inner {
    padding: 18px;
}

.customer-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.customer-card-name {
    min-width: 0;
    color: #071225;
    font-size: 28px;
    line-height: 1.02;
    font-weight: 950;
    letter-spacing: -0.055em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.customer-card-status {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 26px;
    padding: 0 9px;
    background: var(--planiq-label-status-bg);
    color: var(--planiq-label-status-fg);
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.customer-card-status.is-reaction {
    background: var(--app-blue);
    color: #ffffff;
}

.customer-card-status.is-urgent {
    background: var(--app-red);
    color: #ffffff;
}

.customer-card-status.is-action {
    background: var(--app-orange);
    color: #ffffff;
}

.customer-card-labels {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin: 12px 0 0;
}

.customer-card-label {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 9px;
    background: var(--planiq-label-secondary-bg);
    color: var(--planiq-label-secondary-fg);
    font-size: 11px;
    line-height: 1;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .045em;
    max-width: 185px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.customer-card-label.is-primary {
    background: var(--planiq-label-primary-bg);
    color: var(--planiq-label-primary-fg);
}

.customer-card-info {
    margin-top: 13px;
    background: #f8fafc;
    border: 1px solid #dbe2ea;
    overflow: hidden;
}

.customer-card-info-row {
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    min-height: 38px;
    padding: 8px 12px;
    border-bottom: 1px solid #e2e8f0;
}

.customer-card-info-row:last-child {
    border-bottom: 0;
}

.customer-card-info-key {
    color: #64748b;
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.customer-card-info-key::after {
    content: ":";
}

.customer-card-info-value {
    min-width: 0;
    color: #0f172a;
    font-size: 14px;
    line-height: 1.3;
    font-weight: 850;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.customer-card-reason {
    color: #0f172a;
}

.customer-board-empty {
    padding: 16px;
    background: #ffffff;
    border: 1px dashed #cbd5e1;
    color: #64748b;
    font-size: 14px;
    font-weight: 850;
}

@media (max-width: 760px) {
    body {
        padding-top: 64px;
    }

    .topbar {
        min-height: 64px;
    }

    .topbar-inner {
        min-height: 64px;
        padding: 0 14px;
    }

    .topbar-brand-title,
    .topbar .brand-title {
        font-size: 19px;
        max-width: 66vw;
    }

    .topbar-brand-subtitle,
    .topbar .brand-subtitle {
        font-size: 10px;
        max-width: 66vw;
    }

    .topbar-menu-toggle {
        width: 42px;
        height: 42px;
    }

    .topbar-menu-panel {
        position: fixed;
        top: 70px;
        right: 10px;
        left: 10px;
        width: auto;
        max-height: calc(100vh - 86px);
        overflow-y: auto;
    }

    .app-container,
    .dashboard-container {
        max-width: none;
        padding: 12px;
    }

    .customer-board-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .customer-board-toolbar .primary-link {
        width: 100%;
    }

    .customer-card-inner {
        padding: 15px;
    }

    .customer-card-name {
        font-size: 25px;
    }

    .customer-card-info-row {
        grid-template-columns: 76px minmax(0, 1fr);
        min-height: 36px;
        padding: 8px 10px;
    }

    .customer-card-info-value {
        font-size: 13px;
    }
}

/*
|--------------------------------------------------------------------------
| Step52b - Klantkaart styling herstel
|--------------------------------------------------------------------------
| Step52a maakte de index goed, maar haalde teveel algemene klantkaart-CSS weg.
| Deze laag herstelt show.php / klantkaart zonder de nieuwe indexkaart te breken.
|--------------------------------------------------------------------------
*/

.back-small,
.planiq-back-link {
    display: inline-flex;
    align-items: center;
    margin: 0 0 14px;
    padding: 0;
    color: #64748b;
    background: transparent;
    border: 0;
    text-decoration: none;
    font-size: 14px;
    font-weight: 850;
}

.back-small:hover,
.back-small:focus,
.planiq-back-link:hover,
.planiq-back-link:focus {
    color: #0f172a;
    text-decoration: none;
    outline: none;
}

.card,
.panel-card,
.planiq-flow-card {
    display: block;
    background: #ffffff;
    border: 1px solid #dbe2ea;
    padding: 18px;
    margin: 0 0 14px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05);
}

.hero-card,
.planiq-hero-card {
    position: relative;
    background: #ffffff;
    border: 1px solid #dbe2ea;
    padding: 18px;
    margin: 0 0 14px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05);
}

.hero-card h1,
.planiq-hero-title,
.panel-header h1 {
    margin: 0;
    color: #071225;
    font-size: 34px;
    line-height: 1.04;
    font-weight: 950;
    letter-spacing: -0.055em;
}

.panel-header {
    margin: 0 0 12px;
}

.panel-header p,
.planiq-section-sub,
.planiq-hero-sub {
    margin: 5px 0 0;
    color: #64748b;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.35;
}

.badge,
.lead-label,
.planiq-label,
.status-pill,
.planiq-status-pill {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 9px;
    border: 0;
    border-radius: 0;
    background: #e2e8f0;
    color: #0f172a;
    font-size: 11px;
    line-height: 1;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .035em;
    white-space: nowrap;
    text-decoration: none;
}

.badge-orange,
.lead-label.is-primary,
.planiq-label.is-primary {
    background: var(--app-orange);
    color: #ffffff;
}

.badge-green,
.status-pill.new,
.status-pill.open,
.status-pill.planned,
.planiq-status-pill.is-new,
.planiq-status-pill.is-planned {
    background: var(--app-green);
    color: #ffffff;
}

.badge-blue,
.status-pill.proposal,
.status-pill.visited,
.planiq-status-pill.is-pending,
.planiq-status-pill.is-visited {
    background: var(--app-blue);
    color: #ffffff;
}

.badge-red,
.status-pill.returned,
.planiq-status-pill.is-returned,
.planiq-status-pill.is-risk {
    background: var(--app-red);
    color: #ffffff;
}

.meta,
.lead-label-row,
.planiq-label-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin: 12px 0 13px;
}

.info-box,
.raw-box,
.planiq-info-box {
    background: #f8fafc;
    border: 1px solid #dbe2ea;
    padding: 0;
    margin: 12px 0 0;
    overflow: hidden;
}

.info-line,
.planiq-info-line {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    min-height: 38px;
    padding: 9px 12px;
    border-bottom: 1px solid #e2e8f0;
    color: #0f172a;
    font-size: 14px;
    font-weight: 850;
    line-height: 1.35;
}

.info-line:last-child,
.planiq-info-line:last-child {
    border-bottom: 0;
}

.info-label,
.planiq-info-label {
    color: #64748b;
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.info-label::after,
.planiq-info-label::after {
    content: ":";
}

.info-value,
.planiq-info-value {
    min-width: 0;
    color: #0f172a;
    font-size: 14px;
    font-weight: 850;
    overflow-wrap: anywhere;
}

.quick-actions,
.lead-action-strip,
.planiq-action-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    margin-top: 12px;
    border: 1px solid #dbe2ea;
    background: #ffffff;
}

.quick-action,
.lead-action-cell,
.planiq-action-cell {
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid #dbe2ea;
    background: #ffffff;
    color: #2563eb;
    text-decoration: none;
    font-size: 18px;
    font-weight: 950;
}

.quick-action:last-child,
.lead-action-cell:last-child,
.planiq-action-cell:last-child {
    border-right: 0;
}

.quick-action:hover,
.quick-action:focus,
.lead-action-cell:hover,
.lead-action-cell:focus,
.planiq-action-cell:hover,
.planiq-action-cell:focus {
    background: #f8fafc;
    color: #0f172a;
    text-decoration: none;
    outline: none;
}

.quick-action.whatsapp,
.lead-action-cell.is-whatsapp,
.planiq-action-cell.is-whatsapp {
    color: #16a34a;
}

.quick-action.route,
.lead-action-cell.is-route,
.planiq-action-cell.is-route {
    color: #dc2626;
}

.planiq-accordion-list {
    display: grid;
    gap: 10px;
}

.planiq-accordion-item {
    background: #ffffff;
    border: 1px solid #dbe2ea;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
}

.planiq-accordion-item summary,
details summary {
    cursor: pointer;
    list-style: none;
    min-height: 56px;
    padding: 15px 18px;
    background: #ffffff;
    color: #0f172a;
    border: 0;
    font-size: 20px;
    line-height: 1.1;
    font-weight: 950;
    letter-spacing: -0.04em;
}

.planiq-accordion-item summary::-webkit-details-marker,
details summary::-webkit-details-marker {
    display: none;
}

.planiq-accordion-item summary::after,
details summary::after {
    content: "+";
    float: right;
    color: #0f172a;
    font-size: 26px;
    line-height: .8;
    font-weight: 950;
}

.planiq-accordion-item[open] summary::after,
details[open] summary::after {
    content: "−";
}

.planiq-accordion-body,
.more-actions-content,
.danger-content {
    padding: 0 18px 18px;
    background: #ffffff;
}

.planiq-two-column {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 14px;
    align-items: start;
}

.field {
    display: grid;
    gap: 6px;
    margin-bottom: 10px;
}

.field label {
    color: #334155;
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .04em;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="datetime-local"],
select,
textarea {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #0f172a;
    font: inherit;
    font-size: 14px;
    font-weight: 800;
    border-radius: 0;
    outline: none;
}

textarea {
    min-height: 110px;
    resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
    border-color: #94a3b8;
    box-shadow: 0 0 0 3px rgba(148, 163, 184, .18);
}

.button-row,
.actions-row,
.proposal-send-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

button,
.btn,
.primary-button,
.secondary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 13px;
    border: 0;
    background: #0f172a;
    color: #ffffff;
    text-decoration: none;
    font: inherit;
    font-size: 13px;
    font-weight: 950;
    cursor: pointer;
    border-radius: 0;
}

button:hover,
button:focus,
.btn:hover,
.btn:focus,
.primary-button:hover,
.primary-button:focus,
.secondary-button:hover,
.secondary-button:focus {
    background: #1e293b;
    color: #ffffff;
    text-decoration: none;
    outline: none;
}

.secondary-button,
.btn-light {
    background: #e2e8f0;
    color: #0f172a;
}

.secondary-button:hover,
.secondary-button:focus,
.btn-light:hover,
.btn-light:focus {
    background: #cbd5e1;
    color: #0f172a;
}

.btn-blue {
    background: #2563eb;
    color: #ffffff;
}

.btn-green {
    background: #16a34a;
    color: #ffffff;
}

.btn-cancel,
.btn-red {
    background: #dc2626;
    color: #ffffff;
}

.timeline-list,
.communication-list {
    display: grid;
    gap: 10px;
    margin-top: 10px;
}

.timeline-item,
.communication-item {
    display: block;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 13px;
}

.timeline-date,
.communication-date {
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
}

.timeline-title,
.communication-title-row strong {
    margin-top: 3px;
    color: #0f172a;
    font-size: 15px;
    font-weight: 950;
}

.timeline-content,
.communication-text {
    margin-top: 6px;
    color: #475569;
    font-size: 13px;
    line-height: 1.45;
    font-weight: 800;
    white-space: pre-line;
}

.empty-state,
.muted {
    color: #64748b;
    font-size: 14px;
    font-weight: 800;
}

.danger-zone,
.planiq-danger-zone {
    border-color: #fecaca;
    background: #fffafa;
}

.danger-zone summary,
.planiq-danger-zone summary {
    color: #991b1b;
}

.return-box {
    margin-top: 12px;
    padding: 12px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
    font-size: 13px;
    font-weight: 850;
    line-height: 1.45;
}

@media (max-width: 760px) {
    .planiq-two-column {
        grid-template-columns: 1fr;
    }

    .card,
    .panel-card,
    .planiq-flow-card,
    .hero-card,
    .planiq-hero-card {
        padding: 15px;
        margin-bottom: 12px;
    }

    .hero-card h1,
    .planiq-hero-title,
    .panel-header h1 {
        font-size: 30px;
    }

    .info-line,
    .planiq-info-line {
        grid-template-columns: 78px minmax(0, 1fr);
        min-height: 36px;
        padding: 8px 10px;
    }

    .quick-action,
    .lead-action-cell,
    .planiq-action-cell {
        min-height: 46px;
    }

    .planiq-accordion-item summary,
    details summary {
        min-height: 52px;
        padding: 14px 15px;
        font-size: 19px;
    }

    .planiq-accordion-body,
    .more-actions-content,
    .danger-content {
        padding: 0 15px 15px;
    }
}

/*
|--------------------------------------------------------------------------
| Step53a - Flowdesk klantkaart basis
|--------------------------------------------------------------------------
| De klantkaart gebruikt nu expliciet een Flowdesk-achtige structuur:
| - smalle appbreedte
| - hero-card met naam / status
| - labels
| - info-box
| - actiebar
| - rustige accordionblokken
|--------------------------------------------------------------------------
*/

.lead-view-page {
    width: 100%;
}

.lead-view-page .back-small {
    margin: 0 0 14px;
}

.lead-view-hero {
    position: relative;
    padding: 18px;
    background: #ffffff;
    border: 1px solid #dbe2ea;
    box-shadow: 0 8px 22px rgba(15,23,42,.05);
    margin: 0 0 14px;
}

.lead-view-hero-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.lead-view-title {
    min-width: 0;
    margin: 0;
    padding: 0;
    color: #071225;
    font-size: 34px;
    line-height: 1.02;
    font-weight: 950;
    letter-spacing: -0.06em;
}

.lead-view-status {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0 11px;
    background: #16a34a;
    color: #ffffff;
    font-size: 11px;
    line-height: 1;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.lead-view-status.is-pending,
.lead-view-status.is-visited {
    background: #2563eb;
}

.lead-view-status.is-won {
    background: #ff6a00;
}

.lead-view-status.is-returned,
.lead-view-status.is-no-order {
    background: #dc2626;
}

.lead-view-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 12px 0 0;
}

.lead-view-badge {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 9px;
    background: #e2e8f0;
    color: #0f172a;
    font-size: 11px;
    line-height: 1;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .035em;
    max-width: 190px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lead-view-badge.is-primary {
    background: #ff6a00;
    color: #ffffff;
}

.lead-view-badge.is-green {
    background: #16a34a;
    color: #ffffff;
}

.lead-view-info {
    margin-top: 13px;
    background: #f8fafc;
    border: 1px solid #dbe2ea;
    overflow: hidden;
}

.lead-view-info-row {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    min-height: 38px;
    padding: 9px 12px;
    border-bottom: 1px solid #e2e8f0;
}

.lead-view-info-row:last-child {
    border-bottom: 0;
}

.lead-view-info-key {
    color: #64748b;
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.lead-view-info-key::after {
    content: ":";
}

.lead-view-info-value {
    min-width: 0;
    color: #0f172a;
    font-size: 14px;
    line-height: 1.35;
    font-weight: 850;
    overflow-wrap: anywhere;
}

.lead-view-actions {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    margin-top: 12px;
    border: 1px solid #dbe2ea;
    background: #ffffff;
}

.lead-view-action {
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid #dbe2ea;
    background: #ffffff;
    color: #2563eb;
    text-decoration: none;
    font-size: 18px;
    font-weight: 950;
}

.lead-view-action:last-child {
    border-right: 0;
}

.lead-view-action:hover,
.lead-view-action:focus {
    background: #f8fafc;
    color: #0f172a;
    text-decoration: none;
    outline: none;
}

.lead-view-action.is-whatsapp {
    color: #16a34a;
}

.lead-view-action.is-route {
    color: #dc2626;
}

.lead-view-action.is-disabled {
    color: #cbd5e1;
    pointer-events: none;
}

.lead-view-accordion {
    display: grid;
    gap: 10px;
}

.lead-view-block {
    background: #ffffff;
    border: 1px solid #dbe2ea;
    box-shadow: 0 8px 22px rgba(15,23,42,.04);
}

.lead-view-block summary {
    cursor: pointer;
    list-style: none;
    min-height: 58px;
    padding: 14px 16px;
    background: #ffffff;
    color: #0f172a;
    border: 0;
}

.lead-view-block summary::-webkit-details-marker {
    display: none;
}

.lead-view-block summary::after {
    content: "+";
    float: right;
    color: #0f172a;
    font-size: 26px;
    line-height: .8;
    font-weight: 950;
}

.lead-view-block[open] summary::after {
    content: "−";
}

.lead-view-block-title {
    display: block;
    color: #0f172a;
    font-size: 20px;
    line-height: 1.1;
    font-weight: 950;
    letter-spacing: -0.04em;
}

.lead-view-block-sub {
    display: block;
    margin-top: 4px;
    color: #64748b;
    font-size: 13px;
    line-height: 1.25;
    font-weight: 850;
}

.lead-view-block-body {
    padding: 0 16px 16px;
}

.lead-view-raw {
    padding: 12px;
    background: #f8fafc;
    border: 1px solid #dbe2ea;
    color: #334155;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.45;
    white-space: pre-line;
}

.lead-view-form-grid {
    display: grid;
    gap: 10px;
}

.lead-view-button-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.lead-view-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    border: 0;
    background: #0f172a;
    color: #ffffff;
    text-decoration: none;
    font-size: 13px;
    font-weight: 950;
    cursor: pointer;
    padding: 0 12px;
}

.lead-view-button:hover,
.lead-view-button:focus {
    background: #1e293b;
    color: #ffffff;
    text-decoration: none;
    outline: none;
}

.lead-view-button.is-blue {
    background: #2563eb;
}

.lead-view-button.is-green {
    background: #16a34a;
}

.lead-view-button.is-red {
    background: #dc2626;
}

.lead-view-timeline,
.lead-view-message-list,
.lead-view-file-list {
    display: grid;
    gap: 10px;
}

.lead-view-timeline-item,
.lead-view-message,
.lead-view-file {
    padding: 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.lead-view-timeline-top,
.lead-view-message-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.lead-view-timeline-title,
.lead-view-message-title,
.lead-view-file-title {
    color: #0f172a;
    font-size: 14px;
    font-weight: 950;
}

.lead-view-timeline-date,
.lead-view-message-date {
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.lead-view-timeline-note,
.lead-view-message-body,
.lead-view-file-meta {
    margin-top: 6px;
    color: #475569;
    font-size: 13px;
    line-height: 1.45;
    font-weight: 800;
    white-space: pre-line;
}

.lead-view-empty {
    padding: 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #64748b;
    font-size: 13px;
    font-weight: 850;
}

.lead-view-danger {
    border-color: #fecaca;
}

.lead-view-danger summary {
    color: #991b1b;
}

.lead-view-danger .lead-view-block-body {
    color: #991b1b;
}

@media (max-width: 760px) {
    .lead-view-hero {
        padding: 15px;
    }

    .lead-view-title {
        font-size: 30px;
    }

    .lead-view-hero-head {
        gap: 10px;
    }

    .lead-view-status {
        min-height: 26px;
        padding: 0 9px;
        font-size: 10px;
    }

    .lead-view-info-row {
        grid-template-columns: 78px minmax(0, 1fr);
        min-height: 36px;
        padding: 8px 10px;
    }

    .lead-view-actions {
        grid-template-columns: repeat(5, 1fr);
    }

    .lead-view-action {
        min-height: 48px;
    }

    .lead-view-block summary {
        min-height: 54px;
        padding: 14px 15px;
    }

    .lead-view-block-title {
        font-size: 19px;
    }

    .lead-view-block-body {
        padding: 0 15px 15px;
    }

    .lead-view-button-grid {
        grid-template-columns: 1fr;
    }
}

/*
|--------------------------------------------------------------------------
| Step53b - Actiebar exact Flowdesk-achtig
|--------------------------------------------------------------------------
| Geen tekstsymbolen meer maar SVG iconen.
|--------------------------------------------------------------------------
*/

.lead-view-actions {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    margin-top: 12px;
    border: 1px solid #dbe2ea;
    background: #ffffff;
}

.lead-view-action {
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid #dbe2ea;
    background: #ffffff;
    color: #2563eb;
    text-decoration: none;
    font-size: 0;
    font-weight: 950;
}

.lead-view-action:last-child {
    border-right: 0;
}

.lead-view-action:hover,
.lead-view-action:focus,
.lead-view-action:active {
    background: #ffffff;
    color: #2563eb;
    text-decoration: none;
    outline: none;
}

.lead-view-action svg {
    display: block;
    width: 25px;
    height: 25px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lead-view-action.is-phone,
.lead-view-action.is-mail {
    color: #2563eb;
}

.lead-view-action.is-whatsapp {
    color: #25D366;
}

.lead-view-action.is-planning {
    color: #334155;
}

.lead-view-action.is-route {
    color: #ef4444;
}

.lead-view-action.is-route svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
}

.lead-view-action.is-disabled {
    color: #cbd5e1;
    pointer-events: none;
}

.lead-view-action.is-disabled svg {
    opacity: .7;
}

@media (max-width: 760px) {
    .lead-view-action {
        min-height: 54px;
    }

    .lead-view-action svg {
        width: 24px;
        height: 24px;
    }
}

/*
|--------------------------------------------------------------------------
| Step53d - Potlood + memohoek zoals Flowdesk
|--------------------------------------------------------------------------
| - Potlood naast statuslabel
| - Memohoek rechtsboven in klantkaart
| - Geel = geen open memo
| - Rood = er is memo/notitie aanwezig
|--------------------------------------------------------------------------
*/

.lead-view-hero {
    overflow: hidden;
}

.lead-view-hero-tools {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-right: 22px;
}

.lead-view-edit-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: #f8fafc;
    border: 1px solid #dbe2ea;
    color: #64748b;
    text-decoration: none;
    font-size: 13px;
    line-height: 1;
    font-weight: 950;
}

.lead-view-edit-link:hover,
.lead-view-edit-link:focus {
    background: #f1f5f9;
    color: #0f172a;
    text-decoration: none;
    outline: none;
}

.lead-view-memo-corner {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 8;
    width: 28px;
    height: 28px;
    min-height: 28px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: transparent;
    font-size: 0;
    line-height: 0;
    cursor: pointer;
    overflow: hidden;
}

.lead-view-memo-corner::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-top: 28px solid #facc15;
    border-left: 28px solid transparent;
}

.lead-view-memo-corner.has-memo::before {
    border-top-color: #dc2626;
}

.lead-view-memo-corner:hover::before,
.lead-view-memo-corner:focus::before {
    filter: brightness(.94);
}

.lead-view-memo-corner:focus {
    outline: 2px solid rgba(37, 99, 235, .32);
    outline-offset: 2px;
}

.lead-view-memo-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: rgba(15, 23, 42, .58);
    padding: 88px 16px 24px;
    overflow-y: auto;
}

.lead-view-memo-overlay.is-open {
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.lead-view-memo-popup {
    width: min(520px, 100%);
    background: #ffffff;
    border: 1px solid #dbe2ea;
    box-shadow: 0 28px 80px rgba(15,23,42,.30);
    padding: 16px;
}

.lead-view-memo-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.lead-view-memo-title {
    color: #0f172a;
    font-size: 22px;
    line-height: 1.1;
    font-weight: 950;
    letter-spacing: -0.04em;
}

.lead-view-memo-sub {
    margin-top: 4px;
    color: #64748b;
    font-size: 13px;
    font-weight: 850;
}

.lead-view-memo-close {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    min-height: 34px;
    padding: 0;
    background: #e2e8f0;
    color: #0f172a;
    border: 0;
    font-size: 22px;
    line-height: 1;
    font-weight: 950;
}

.lead-view-memo-form {
    display: grid;
    gap: 10px;
}

.lead-view-memo-form textarea {
    min-height: 180px;
    font-size: 16px;
    font-weight: 850;
    line-height: 1.45;
}

.lead-view-memo-save {
    width: 100%;
    min-height: 44px;
    background: #0f172a;
    color: #ffffff;
}

.lead-view-memo-save:hover,
.lead-view-memo-save:focus {
    background: #1e293b;
    color: #ffffff;
}

@media (max-width: 760px) {
    .lead-view-hero-tools {
        gap: 6px;
        padding-right: 20px;
    }

    .lead-view-edit-link {
        width: 26px;
        height: 26px;
        font-size: 12px;
    }

    .lead-view-memo-overlay {
        padding: 76px 12px 18px;
    }

    .lead-view-memo-popup {
        padding: 14px;
    }

    .lead-view-memo-form textarea {
        min-height: 200px;
        font-size: 18px;
    }
}

/*
|--------------------------------------------------------------------------
| Step53e - Echte Flowdesk memo's
|--------------------------------------------------------------------------
| Memo's zijn aparte open taken in lead_tasks.
| Gele hoek = geen open memo.
| Rode hoek = open memo aanwezig.
|--------------------------------------------------------------------------
*/

.lead-view-memo-corner::before {
    border-top-color: #facc15;
}

.lead-view-memo-corner.has-memo::before {
    border-top-color: #dc2626;
}

.lead-view-memo-date {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 9px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #92400e;
    font-size: 12px;
    font-weight: 950;
}

.lead-view-open-memos {
    display: grid;
    gap: 10px;
}

.lead-view-memo-card {
    position: relative;
    padding: 13px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-left: 5px solid #f59e0b;
    color: #0f172a;
}

.lead-view-memo-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.lead-view-memo-card-title {
    color: #92400e;
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.lead-view-memo-card-date {
    color: #64748b;
    font-size: 12px;
    font-weight: 850;
    white-space: nowrap;
}

.lead-view-memo-card-text {
    color: #0f172a;
    font-size: 15px;
    line-height: 1.45;
    font-weight: 850;
    white-space: pre-line;
    word-break: break-word;
}

.lead-view-memo-done-form {
    margin: 10px 0 0;
}

.lead-view-memo-done-button {
    min-height: 34px;
    padding: 0 10px;
    background: #ffffff;
    border: 1px solid #f59e0b;
    color: #92400e;
    font-size: 12px;
    font-weight: 950;
}

.lead-view-memo-done-button:hover,
.lead-view-memo-done-button:focus {
    background: #fef3c7;
    color: #78350f;
}

/*
|--------------------------------------------------------------------------
| Step53f - Memo popup echt als Flowdesk memo-blok
|--------------------------------------------------------------------------
| - Geen donker vlak bij hoek
| - Memohoek alleen driehoek
| - Popup is een rustig geel notitieblad
| - Groene check rechtsonder
|--------------------------------------------------------------------------
*/

.lead-view-memo-corner,
.lead-view-memo-corner:hover,
.lead-view-memo-corner:focus,
.lead-view-memo-corner:active {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    z-index: 8 !important;
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    max-width: 30px !important;
    max-height: 30px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    overflow: hidden !important;
    cursor: pointer;
}

.lead-view-memo-corner::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: 0 !important;
    height: 0 !important;
    border-top: 30px solid #facc15 !important;
    border-left: 30px solid transparent !important;
}

.lead-view-memo-corner.has-memo::before {
    border-top-color: #dc2626 !important;
}

.lead-view-memo-corner::after {
    display: none !important;
    content: none !important;
}

.lead-view-memo-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: rgba(15, 23, 42, .55);
    padding: 24px;
    overflow-y: auto;
}

.lead-view-memo-overlay.is-open {
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.lead-view-memo-popup {
    position: relative;
    width: min(560px, calc(100vw - 28px));
    min-height: 470px;
    margin-top: 0;
    background: #fffde8;
    border: 0;
    box-shadow: 0 28px 80px rgba(15,23,42,.28);
    padding: 0;
}

.lead-view-memo-head {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 58px;
    margin: 0;
    z-index: 2;
    pointer-events: none;
}

.lead-view-memo-title,
.lead-view-memo-sub {
    display: none !important;
}

.lead-view-memo-close {
    position: absolute;
    top: 22px;
    left: 24px;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    color: #0f172a !important;
    box-shadow: none !important;
    font-size: 28px !important;
    line-height: 20px !important;
    font-weight: 950 !important;
    pointer-events: auto;
}

.lead-view-memo-close:hover,
.lead-view-memo-close:focus {
    background: transparent !important;
    color: #0f172a !important;
    outline: none;
}

.lead-view-memo-form {
    position: relative;
    display: block;
    min-height: 470px;
    padding: 78px 32px 88px;
}

.lead-view-memo-date {
    display: none !important;
}

.lead-view-memo-form textarea {
    width: 100%;
    min-height: 300px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #0f172a;
    box-shadow: none;
    outline: none;
    resize: none;
    font-family: Arial, sans-serif;
    font-size: 24px;
    line-height: 1.38;
    font-weight: 500;
}

.lead-view-memo-form textarea:focus {
    border: 0;
    box-shadow: none;
}

.lead-view-memo-save,
.lead-view-memo-complete-button {
    position: absolute;
    right: 32px;
    bottom: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    min-height: 58px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    border: 0 !important;
    background: #16a34a !important;
    color: #ffffff !important;
    box-shadow: 0 16px 34px rgba(22, 163, 74, .25);
    font-size: 0 !important;
    line-height: 1 !important;
}

.lead-view-memo-save::before,
.lead-view-memo-complete-button::before {
    content: "✓";
    color: #ffffff;
    font-size: 38px;
    line-height: 1;
    font-weight: 700;
}

.lead-view-memo-save:hover,
.lead-view-memo-save:focus,
.lead-view-memo-complete-button:hover,
.lead-view-memo-complete-button:focus {
    background: #15803d !important;
    color: #ffffff !important;
    outline: none;
}

.lead-view-existing-memo {
    position: relative;
    min-height: 470px;
    padding: 88px 32px 96px;
    color: #0f172a;
    font-family: Arial, sans-serif;
    font-size: 24px;
    line-height: 1.38;
    font-weight: 500;
    white-space: pre-line;
    word-break: break-word;
}

.lead-view-existing-memo-date {
    display: inline;
    margin-right: 8px;
}

.lead-view-existing-memo form {
    margin: 0;
}

.lead-view-open-memos {
    display: grid;
    gap: 10px;
}

.lead-view-memo-card {
    background: #fffde8;
    border: 1px solid #fde68a;
    border-left: 5px solid #f59e0b;
}

@media (max-width: 760px) {
    .lead-view-memo-overlay {
        padding: 8px;
    }

    .lead-view-memo-popup {
        width: calc(100vw - 16px);
        min-height: 520px;
    }

    .lead-view-memo-form,
    .lead-view-existing-memo {
        min-height: 520px;
        padding: 74px 24px 94px;
    }

    .lead-view-memo-form textarea,
    .lead-view-existing-memo {
        font-size: 22px;
    }

    .lead-view-memo-close {
        top: 20px;
        left: 22px;
    }

    .lead-view-memo-save,
    .lead-view-memo-complete-button {
        right: 24px;
        bottom: 24px;
        width: 56px !important;
        height: 56px !important;
        min-width: 56px !important;
        min-height: 56px !important;
    }
}

/*
|--------------------------------------------------------------------------
| Step54a - Memo's op werkbord
|--------------------------------------------------------------------------
| Open memo's komen terug op de index/werkbord.
|--------------------------------------------------------------------------
*/

.customer-card {
    overflow: hidden;
}

.customer-card.has-open-memo {
    border-color: #f59e0b;
}

.customer-card-memo-corner {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 6;
    width: 0;
    height: 0;
    border-top: 28px solid #dc2626;
    border-left: 28px solid transparent;
}

.customer-card-label.is-memo {
    background: #facc15;
    color: #713f12;
}

.customer-card-status.is-memo {
    background: #f59e0b;
    color: #ffffff;
}

.customer-card.has-open-memo .customer-card-info {
    border-color: #fde68a;
}

.customer-card.has-open-memo .customer-card-info-row:last-child {
    background: #fffbeb;
}

@media (max-width: 760px) {
    .customer-card-memo-corner {
        border-top-width: 25px;
        border-left-width: 25px;
    }
}

/*
|--------------------------------------------------------------------------
| Step54b - Memo subtieler op werkbord
|--------------------------------------------------------------------------
| Memo is een signaal, geen aparte drukke groep.
| Alleen het rode hoekje is zichtbaar op de kaart.
|--------------------------------------------------------------------------
*/

.customer-card-label.is-memo {
    display: none !important;
}

.customer-card.has-open-memo {
    border-color: #dbe2ea;
}

.customer-card.has-open-memo .customer-card-info {
    border-color: #dbe2ea;
}

.customer-card.has-open-memo .customer-card-info-row:last-child {
    background: #fffbeb;
}

.customer-card.has-open-memo .customer-card-status {
    display: none;
}

.customer-card-memo-corner {
    border-top-color: #dc2626;
}

.customer-board-section-title {
    color: #0f172a;
}

.customer-board-section-head {
    margin-top: 0;
}

/*
|--------------------------------------------------------------------------
| Step54e - Klantkaart statusregel + statuslabel herstel
|--------------------------------------------------------------------------
| - STATUS-regel krijgt dezelfde achtergrond als ADRES/TEL/MAIL.
| - Statuslabel rechtsboven blijft zichtbaar, ook bij open memo.
| - Rode memohoek blijft zichtbaar.
|--------------------------------------------------------------------------
*/

.lead-view-info-row,
.lead-view-info-row:last-child {
    background: #f8fafc !important;
}

.lead-view-hero-tools {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    position: relative !important;
    z-index: 12 !important;
    padding-right: 34px !important;
}

.lead-view-status {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.lead-view-edit-link {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.lead-view-memo-corner {
    z-index: 10 !important;
}

@media (max-width: 760px) {
    .lead-view-hero-tools {
        padding-right: 30px !important;
        gap: 6px !important;
    }
}

/*
|--------------------------------------------------------------------------
| Step54f - Werkbord memo/status rust herstellen
|--------------------------------------------------------------------------
| - STATUS-regel op indexkaart dezelfde kleur als ADRES/TEL/MAIL
| - Statuslabel rechtsboven blijft zichtbaar, ook bij memo
| - + Nieuwe lead knop op werkbord niet zichtbaar
|--------------------------------------------------------------------------
*/

.customer-card-info-row,
.customer-card-info-row:last-child,
.customer-card.has-open-memo .customer-card-info-row,
.customer-card.has-open-memo .customer-card-info-row:last-child {
    background: #f8fafc !important;
}

.customer-card-status {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.customer-card.has-open-memo .customer-card-status {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.customer-board-toolbar {
    justify-content: flex-start !important;
}

.customer-board-toolbar > .primary-link {
    display: none !important;
}

.customer-card.has-open-memo {
    border-color: #dbe2ea;
}

.customer-card.has-open-memo .customer-card-info {
    border-color: #dbe2ea;
}

.customer-card-memo-corner {
    border-top-color: #dc2626;
}

/*
|--------------------------------------------------------------------------
| Step55a - Klantkaart bewerken
|--------------------------------------------------------------------------
*/

.lead-edit-page {
    width: 100%;
}

.lead-edit-card {
    background: #ffffff;
    border: 1px solid #dbe2ea;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .05);
    padding: 18px;
}

.lead-edit-head {
    margin: 0 0 16px;
}

.lead-edit-kicker {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 8px;
    background: #0f172a;
    color: #ffffff;
    font-size: 10px;
    line-height: 1;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.lead-edit-head h1 {
    margin: 10px 0 0;
    color: #071225;
    font-size: 34px;
    line-height: 1.02;
    font-weight: 950;
    letter-spacing: -0.055em;
}

.lead-edit-head p {
    margin: 6px 0 0;
    color: #64748b;
    font-size: 14px;
    font-weight: 850;
}

.lead-edit-form {
    display: grid;
    gap: 14px;
}

.lead-edit-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.lead-edit-field {
    display: grid;
    gap: 6px;
}

.lead-edit-field.is-full {
    grid-column: 1 / -1;
}

.lead-edit-field span {
    color: #64748b;
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.lead-edit-field input,
.lead-edit-field textarea {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid #cbd5e1;
    background: #f8fafc;
    color: #0f172a;
    font-family: Arial, sans-serif;
    font-size: 15px;
    font-weight: 850;
    border-radius: 0;
    outline: none;
}

.lead-edit-field textarea {
    min-height: 160px;
    resize: vertical;
    line-height: 1.45;
}

.lead-edit-field input:focus,
.lead-edit-field textarea:focus {
    background: #ffffff;
    border-color: #94a3b8;
    box-shadow: 0 0 0 3px rgba(148, 163, 184, .18);
}

.lead-edit-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 4px;
}

@media (max-width: 760px) {
    .lead-edit-card {
        padding: 15px;
    }

    .lead-edit-head h1 {
        font-size: 30px;
    }

    .lead-edit-grid {
        grid-template-columns: 1fr;
    }

    .lead-edit-actions {
        flex-direction: column;
    }

    .lead-edit-actions .primary-button,
    .lead-edit-actions .secondary-button {
        width: 100%;
    }
}

/*
|--------------------------------------------------------------------------
| Step56a - Planiq Design System / Huisstijlbasis
|--------------------------------------------------------------------------
| Centrale visuele afspraken.
|
| Dit is bewust een laag bovenop de bestaande CSS:
| - schermen blijven werken
| - styling wordt gelijkgetrokken
| - kleuren/breedtes zijn voorbereid op dynamische instellingen
|--------------------------------------------------------------------------
*/

:root {
    /*
    |----------------------------------------------------------------------
    | App basis
    |----------------------------------------------------------------------
    */
    --planiq-bg: #eef1f5;
    --planiq-surface: #ffffff;
    --planiq-surface-soft: #f8fafc;
    --planiq-border: #dbe2ea;
    --planiq-border-strong: #cbd5e1;

    --planiq-text: #071225;
    --planiq-text-soft: #334155;
    --planiq-muted: #64748b;

    --planiq-shadow-card: 0 8px 22px rgba(15, 23, 42, .05);
    --planiq-shadow-card-hover: 0 12px 32px rgba(15, 23, 42, .08);

    /*
    |----------------------------------------------------------------------
    | Breedtes
    |----------------------------------------------------------------------
    | Standaard werkapp = smal/rustig.
    | Brede schermen later alleen voor rapportage/KPI.
    */
    --planiq-width-app: 720px;
    --planiq-width-wide: 980px;

    /*
    |----------------------------------------------------------------------
    | Header
    |----------------------------------------------------------------------
    */
    --planiq-header-bg: #0f172a;
    --planiq-header-text: #f8fafc;
    --planiq-header-muted: #94a3b8;
    --planiq-header-hover: rgba(255, 255, 255, .075);

    /*
    |----------------------------------------------------------------------
    | Labels/statussen
    | Later database/settings-first.
    */
    --planiq-label-primary-bg: #ff6a00;
    --planiq-label-primary-text: #ffffff;

    --planiq-label-secondary-bg: #e2e8f0;
    --planiq-label-secondary-text: #0f172a;

    --planiq-status-new-bg: #16a34a;
    --planiq-status-new-text: #ffffff;

    --planiq-status-action-bg: #ff6a00;
    --planiq-status-action-text: #ffffff;

    --planiq-status-info-bg: #2563eb;
    --planiq-status-info-text: #ffffff;

    --planiq-status-danger-bg: #dc2626;
    --planiq-status-danger-text: #ffffff;

    --planiq-memo-corner-bg: #facc15;
    --planiq-memo-corner-open-bg: #dc2626;

    /*
    |----------------------------------------------------------------------
    | Typografie
    |----------------------------------------------------------------------
    */
    --planiq-font: Arial, sans-serif;
    --planiq-title-letter-spacing: -0.055em;
}

/*
|--------------------------------------------------------------------------
| Basis reset / appgevoel
|--------------------------------------------------------------------------
*/

html,
body {
    background: var(--planiq-bg) !important;
    color: var(--planiq-text) !important;
    font-family: var(--planiq-font) !important;
}

body {
    font-size: 15px;
    line-height: 1.45;
}

a:hover,
a:focus {
    color: inherit;
}

/*
|--------------------------------------------------------------------------
| Centrale appbreedte
|--------------------------------------------------------------------------
*/

.topbar-inner,
.app-container,
.dashboard-container {
    max-width: var(--planiq-width-app) !important;
}

.app-container.is-wide,
.dashboard-container.is-wide {
    max-width: var(--planiq-width-wide) !important;
}

/*
|--------------------------------------------------------------------------
| Header uniform
|--------------------------------------------------------------------------
*/

.topbar {
    background: var(--planiq-header-bg) !important;
    color: var(--planiq-header-text) !important;
    border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
}

.topbar-brand-title,
.topbar .brand-title {
    color: var(--planiq-header-text) !important;
    font-weight: 950 !important;
    letter-spacing: -0.04em !important;
}

.topbar-brand-subtitle,
.topbar .brand-subtitle {
    color: var(--planiq-header-muted) !important;
    font-weight: 850 !important;
}

.topbar-menu-toggle,
.topbar-menu-toggle:hover,
.topbar-menu-toggle:focus {
    color: var(--planiq-header-text) !important;
}

.topbar-menu-panel a:hover,
.topbar-menu-panel a:focus {
    background: var(--planiq-header-hover) !important;
    color: var(--planiq-header-text) !important;
}

/*
|--------------------------------------------------------------------------
| Centrale kaartstijl
|--------------------------------------------------------------------------
*/

.customer-card,
.lead-view-hero,
.lead-view-block,
.lead-edit-card,
.card,
.panel-card,
.planiq-flow-card,
.hero-card,
.planiq-hero-card {
    background: var(--planiq-surface) !important;
    border: 1px solid var(--planiq-border) !important;
    border-radius: 0 !important;
    box-shadow: var(--planiq-shadow-card) !important;
}

.customer-card:hover,
.customer-card:focus {
    border-color: var(--planiq-border-strong) !important;
    box-shadow: var(--planiq-shadow-card-hover) !important;
}

/*
|--------------------------------------------------------------------------
| Centrale titels
|--------------------------------------------------------------------------
*/

.customer-card-name,
.lead-view-title,
.lead-edit-head h1,
.hero-card h1,
.planiq-hero-title,
.panel-header h1 {
    color: var(--planiq-text) !important;
    font-weight: 950 !important;
    letter-spacing: var(--planiq-title-letter-spacing) !important;
}

/*
|--------------------------------------------------------------------------
| Centrale labels
|--------------------------------------------------------------------------
*/

.customer-card-label,
.lead-view-badge,
.lead-label,
.planiq-label,
.badge {
    border-radius: 0 !important;
    font-weight: 950 !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
}

.customer-card-label.is-primary,
.lead-view-badge.is-primary,
.lead-label.is-primary,
.planiq-label.is-primary,
.badge-orange {
    background: var(--planiq-label-primary-bg) !important;
    color: var(--planiq-label-primary-text) !important;
}

.customer-card-label:not(.is-primary),
.lead-view-badge:not(.is-primary):not(.is-green),
.lead-label:not(.is-primary),
.planiq-label:not(.is-primary),
.badge:not(.badge-orange):not(.badge-green):not(.badge-blue):not(.badge-red) {
    background: var(--planiq-label-secondary-bg);
    color: var(--planiq-label-secondary-text);
}

/*
|--------------------------------------------------------------------------
| Centrale statussen
|--------------------------------------------------------------------------
*/

.customer-card-status,
.lead-view-status,
.status-pill,
.planiq-status-pill {
    border-radius: 0 !important;
    font-weight: 950 !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
}

.customer-card-status,
.customer-card-status.is-new,
.lead-view-status,
.lead-view-status.is-new,
.status-pill.new,
.status-pill.open,
.planiq-status-pill.is-new {
    background: var(--planiq-status-new-bg) !important;
    color: var(--planiq-status-new-text) !important;
}

.customer-card-status.is-action,
.lead-view-status.is-won,
.status-pill.won,
.planiq-status-pill.is-won {
    background: var(--planiq-status-action-bg) !important;
    color: var(--planiq-status-action-text) !important;
}

.customer-card-status.is-reaction,
.customer-card-status.is-info,
.lead-view-status.is-pending,
.lead-view-status.is-visited,
.status-pill.proposal,
.status-pill.visited,
.planiq-status-pill.is-pending {
    background: var(--planiq-status-info-bg) !important;
    color: var(--planiq-status-info-text) !important;
}

.customer-card-status.is-urgent,
.lead-view-status.is-returned,
.status-pill.returned,
.planiq-status-pill.is-returned {
    background: var(--planiq-status-danger-bg) !important;
    color: var(--planiq-status-danger-text) !important;
}

/*
|--------------------------------------------------------------------------
| Centrale info-tabellen
|--------------------------------------------------------------------------
*/

.customer-card-info,
.lead-view-info,
.info-box,
.planiq-info-box {
    background: var(--planiq-surface-soft) !important;
    border: 1px solid var(--planiq-border) !important;
}

.customer-card-info-row,
.customer-card-info-row:last-child,
.lead-view-info-row,
.lead-view-info-row:last-child,
.info-line,
.planiq-info-line {
    background: var(--planiq-surface-soft) !important;
    border-bottom-color: #e2e8f0 !important;
}

.customer-card-info-key,
.lead-view-info-key,
.info-label,
.planiq-info-label {
    color: var(--planiq-muted) !important;
    font-weight: 950 !important;
}

.customer-card-info-value,
.lead-view-info-value,
.info-value,
.planiq-info-value {
    color: var(--planiq-text) !important;
    font-weight: 850 !important;
}

/*
|--------------------------------------------------------------------------
| Centrale actiebar
|--------------------------------------------------------------------------
*/

.lead-view-actions,
.quick-actions,
.lead-action-strip,
.planiq-action-strip {
    background: var(--planiq-surface) !important;
    border: 1px solid var(--planiq-border) !important;
}

.lead-view-action,
.quick-action,
.lead-action-cell,
.planiq-action-cell {
    background: var(--planiq-surface) !important;
    border-color: var(--planiq-border) !important;
}

.lead-view-action:hover,
.lead-view-action:focus,
.quick-action:hover,
.quick-action:focus,
.lead-action-cell:hover,
.lead-action-cell:focus,
.planiq-action-cell:hover,
.planiq-action-cell:focus {
    background: var(--planiq-surface-soft) !important;
    color: currentColor;
}

/*
|--------------------------------------------------------------------------
| Centrale forms
|--------------------------------------------------------------------------
*/

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="datetime-local"],
select,
textarea,
.lead-edit-field input,
.lead-edit-field textarea {
    border-radius: 0 !important;
    border: 1px solid var(--planiq-border-strong) !important;
    background: var(--planiq-surface-soft) !important;
    color: var(--planiq-text) !important;
    font-family: var(--planiq-font) !important;
    font-weight: 850 !important;
}

input:focus,
select:focus,
textarea:focus,
.lead-edit-field input:focus,
.lead-edit-field textarea:focus {
    background: var(--planiq-surface) !important;
    border-color: #94a3b8 !important;
    box-shadow: 0 0 0 3px rgba(148, 163, 184, .18) !important;
    outline: none !important;
}

/*
|--------------------------------------------------------------------------
| Centrale knoppen
|--------------------------------------------------------------------------
*/

button,
.btn,
.primary-button,
.secondary-button,
.lead-view-button {
    border-radius: 0 !important;
    font-family: var(--planiq-font) !important;
    font-weight: 950 !important;
}

.primary-link,
.primary-button,
.lead-view-button {
    background: var(--planiq-header-bg) !important;
    color: #ffffff !important;
}

.primary-link:hover,
.primary-link:focus,
.primary-button:hover,
.primary-button:focus,
.lead-view-button:hover,
.lead-view-button:focus {
    background: #1e293b !important;
    color: #ffffff !important;
}

.secondary-button {
    background: #e2e8f0 !important;
    color: var(--planiq-text) !important;
}

.secondary-button:hover,
.secondary-button:focus {
    background: #cbd5e1 !important;
    color: var(--planiq-text) !important;
}

/*
|--------------------------------------------------------------------------
| Memohoek centraal
|--------------------------------------------------------------------------
*/

.lead-view-memo-corner::before {
    border-top-color: var(--planiq-memo-corner-bg) !important;
}

.lead-view-memo-corner.has-memo::before,
.customer-card-memo-corner {
    border-top-color: var(--planiq-memo-corner-open-bg) !important;
}

/*
|--------------------------------------------------------------------------
| Dashboard fallback minder lelijk zolang we die nog niet opnieuw bouwen
|--------------------------------------------------------------------------
*/

.dashboard-shell .app-container,
.dashboard-container {
    max-width: var(--planiq-width-app) !important;
}

.dashboard-shell h1,
.dashboard-container h1 {
    color: var(--planiq-text) !important;
    font-size: 34px !important;
    line-height: 1.05 !important;
    font-weight: 950 !important;
    letter-spacing: var(--planiq-title-letter-spacing) !important;
}

/*
|--------------------------------------------------------------------------
| Mobiel
|--------------------------------------------------------------------------
*/

@media (max-width: 760px) {
    :root {
        --planiq-width-app: 100%;
    }

    .app-container,
    .dashboard-container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .customer-card-name,
    .lead-view-title,
    .lead-edit-head h1 {
        font-size: 30px !important;
    }
}

/*
|--------------------------------------------------------------------------
| Step56b - Dashboard / fallback in Planiq huisstijl
|--------------------------------------------------------------------------
*/

.dashboard-home-card {
    background: var(--planiq-surface);
    border: 1px solid var(--planiq-border);
    box-shadow: var(--planiq-shadow-card);
    padding: 18px;
    margin-bottom: 12px;
}

.dashboard-home-kicker {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 8px;
    background: var(--planiq-header-bg);
    color: #ffffff;
    font-size: 10px;
    line-height: 1;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.dashboard-home-card h1 {
    margin: 12px 0 0;
    color: var(--planiq-text);
    font-size: 34px;
    line-height: 1.02;
    font-weight: 950;
    letter-spacing: var(--planiq-title-letter-spacing);
}

.dashboard-home-card p {
    margin: 8px 0 0;
    color: var(--planiq-muted);
    font-size: 14px;
    line-height: 1.4;
    font-weight: 850;
}

.dashboard-home-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.dashboard-home-primary,
.dashboard-home-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 14px;
    border: 0;
    text-decoration: none;
    font-size: 13px;
    font-weight: 950;
}

.dashboard-home-primary {
    background: var(--planiq-header-bg);
    color: #ffffff;
}

.dashboard-home-secondary {
    background: #e2e8f0;
    color: var(--planiq-text);
}

.dashboard-home-primary:hover,
.dashboard-home-primary:focus {
    background: #1e293b;
    color: #ffffff;
    text-decoration: none;
    outline: none;
}

.dashboard-home-secondary:hover,
.dashboard-home-secondary:focus {
    background: #cbd5e1;
    color: var(--planiq-text);
    text-decoration: none;
    outline: none;
}

.dashboard-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}

.dashboard-metric-card {
    display: block;
    background: var(--planiq-surface);
    border: 1px solid var(--planiq-border);
    box-shadow: var(--planiq-shadow-card);
    padding: 16px;
    color: inherit;
    text-decoration: none;
}

.dashboard-metric-card:hover,
.dashboard-metric-card:focus {
    border-color: var(--planiq-border-strong);
    box-shadow: var(--planiq-shadow-card-hover);
    text-decoration: none;
    outline: none;
}

.dashboard-metric-number {
    display: block;
    color: var(--planiq-text);
    font-size: 34px;
    line-height: 1;
    font-weight: 950;
    letter-spacing: -.05em;
}

.dashboard-metric-label {
    display: block;
    margin-top: 6px;
    color: var(--planiq-muted);
    font-size: 13px;
    line-height: 1.2;
    font-weight: 900;
}

.dashboard-link-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}

.dashboard-link-card {
    display: block;
    background: var(--planiq-surface);
    border: 1px solid var(--planiq-border);
    box-shadow: var(--planiq-shadow-card);
    padding: 14px;
    color: inherit;
    text-decoration: none;
}

.dashboard-link-card:hover,
.dashboard-link-card:focus {
    border-color: var(--planiq-border-strong);
    box-shadow: var(--planiq-shadow-card-hover);
    text-decoration: none;
    outline: none;
}

.dashboard-link-card strong {
    display: block;
    color: var(--planiq-text);
    font-size: 18px;
    line-height: 1.1;
    font-weight: 950;
    letter-spacing: -.04em;
}

.dashboard-link-card span {
    display: block;
    margin-top: 7px;
    color: var(--planiq-muted);
    font-size: 13px;
    line-height: 1.35;
    font-weight: 850;
}

.dashboard-system-card {
    background: var(--planiq-surface);
    border: 1px solid var(--planiq-border);
    box-shadow: var(--planiq-shadow-card);
    padding: 14px;
}

.dashboard-system-title {
    margin-bottom: 10px;
    color: var(--planiq-text);
    font-size: 18px;
    line-height: 1.1;
    font-weight: 950;
    letter-spacing: -.04em;
}

.dashboard-system-row {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 10px;
    min-height: 34px;
    align-items: center;
    border-top: 1px solid #e2e8f0;
    color: var(--planiq-text);
}

.dashboard-system-row span {
    color: var(--planiq-muted);
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.dashboard-system-row strong {
    min-width: 0;
    color: var(--planiq-text);
    font-size: 13px;
    font-weight: 850;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 760px) {
    .dashboard-home-card {
        padding: 15px;
    }

    .dashboard-home-card h1 {
        font-size: 30px;
    }

    .dashboard-home-actions,
    .dashboard-metrics,
    .dashboard-link-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-home-primary,
    .dashboard-home-secondary {
        width: 100%;
    }

    .dashboard-system-row {
        grid-template-columns: 92px minmax(0, 1fr);
    }
}

/*
|--------------------------------------------------------------------------
| Step56c - Memo's op dashboard
|--------------------------------------------------------------------------
*/

.dashboard-metrics {
    grid-template-columns: repeat(3, 1fr);
}

.dashboard-metric-card.is-memo {
    position: relative;
    overflow: hidden;
}

.dashboard-metric-card.is-memo::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-top: 24px solid var(--planiq-memo-corner-open-bg);
    border-left: 24px solid transparent;
}

.dashboard-metric-card.is-memo .dashboard-metric-number {
    color: #92400e;
}

@media (max-width: 760px) {
    .dashboard-metrics {
        grid-template-columns: 1fr;
    }
}

/*
|--------------------------------------------------------------------------
| Step57a - Dashboardtegels backend-ready
|--------------------------------------------------------------------------
*/

.dashboard-metrics,
.dashboard-link-grid {
    display: none !important;
}

.dashboard-tile-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 12px;
}

.dashboard-tile-card {
    position: relative;
    display: block;
    min-height: 112px;
    padding: 16px;
    background: var(--planiq-surface);
    border: 1px solid var(--planiq-border);
    box-shadow: var(--planiq-shadow-card);
    color: inherit;
    text-decoration: none;
    overflow: hidden;
}

.dashboard-tile-card:hover,
.dashboard-tile-card:focus {
    border-color: var(--planiq-border-strong);
    box-shadow: var(--planiq-shadow-card-hover);
    color: inherit;
    text-decoration: none;
    outline: none;
}

.dashboard-tile-number {
    display: block;
    margin-bottom: 8px;
    color: var(--planiq-text);
    font-size: 34px;
    line-height: 1;
    font-weight: 950;
    letter-spacing: -.05em;
}

.dashboard-tile-title {
    display: block;
    color: var(--planiq-text);
    font-size: 20px;
    line-height: 1.1;
    font-weight: 950;
    letter-spacing: -.04em;
}

.dashboard-tile-subtitle {
    display: block;
    margin-top: 7px;
    color: var(--planiq-muted);
    font-size: 13px;
    line-height: 1.35;
    font-weight: 850;
}

.dashboard-tile-card.is-memo::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-top: 24px solid var(--planiq-memo-corner-open-bg);
    border-left: 24px solid transparent;
}

.dashboard-tile-card.is-memo .dashboard-tile-number {
    color: #92400e;
}

.dashboard-tile-card.is-paid-feature {
    padding-bottom: 38px;
}

.dashboard-tile-module-label {
    position: absolute;
    left: 16px;
    bottom: 12px;
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    padding: 0 7px;
    background: #e2e8f0;
    color: #0f172a;
    font-size: 10px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .04em;
}

@media (max-width: 760px) {
    .dashboard-tile-grid {
        grid-template-columns: 1fr;
    }
}

/*
|--------------------------------------------------------------------------
| Step57b - Tegels sturen naar eigen werkbordfilters
|--------------------------------------------------------------------------
*/

.customer-board-tab {
    text-decoration: none !important;
}

.customer-board-tab.is-active {
    background: var(--planiq-header-bg) !important;
    border-color: var(--planiq-header-bg) !important;
    color: #ffffff !important;
}

.dashboard-tile-card {
    cursor: pointer;
}

.dashboard-tile-card::before {
    content: "→";
    position: absolute;
    right: 14px;
    bottom: 12px;
    color: var(--planiq-muted);
    font-size: 18px;
    line-height: 1;
    font-weight: 950;
}

.dashboard-tile-card.is-memo::before {
    right: 14px;
}

/*
|--------------------------------------------------------------------------
| Step58b - Dashboardtegels beheer
|--------------------------------------------------------------------------
*/

.tile-admin-hero,
.tile-admin-card,
.tile-admin-create {
    background: var(--planiq-surface);
    border: 1px solid var(--planiq-border);
    box-shadow: var(--planiq-shadow-card);
    padding: 16px;
    margin-bottom: 12px;
}

.tile-admin-hero h1,
.tile-admin-create h2,
.tile-admin-card h2 {
    margin: 0;
    color: var(--planiq-text);
    font-weight: 950;
    letter-spacing: -.05em;
}

.tile-admin-hero h1 {
    margin-top: 10px;
    font-size: 34px;
    line-height: 1.02;
}

.tile-admin-hero p {
    margin: 8px 0 0;
    color: var(--planiq-muted);
    font-size: 14px;
    line-height: 1.4;
    font-weight: 850;
}

.tile-admin-list {
    display: grid;
    gap: 12px;
}

.tile-admin-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.tile-admin-key {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 0 7px;
    margin-bottom: 7px;
    background: #e2e8f0;
    color: #334155;
    font-size: 10px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.tile-admin-card h2,
.tile-admin-create h2 {
    font-size: 22px;
    line-height: 1.05;
}

.tile-admin-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.tile-admin-grid label {
    display: grid;
    gap: 5px;
    color: var(--planiq-muted);
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.tile-admin-grid label.wide {
    grid-column: 1 / -1;
}

.tile-admin-grid input {
    width: 100%;
    min-height: 40px;
    border: 1px solid var(--planiq-border);
    background: #ffffff;
    color: var(--planiq-text);
    padding: 0 10px;
    font-size: 14px;
    font-weight: 850;
    outline: none;
}

.tile-admin-grid input:focus {
    border-color: var(--theme-color);
    box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}

.tile-admin-switches {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.tile-admin-switches label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    padding: 0 9px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    color: #334155;
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.create-switches {
    justify-content: flex-start;
    margin-top: 12px;
}

.tile-admin-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 12px;
}

.tile-admin-actions button {
    min-height: 40px;
    border: 0;
    background: var(--planiq-header-bg);
    color: #ffffff;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 950;
    cursor: pointer;
}

.notice.error {
    background: #fee2e2;
    border-color: #fecaca;
    color: #991b1b;
}

@media (max-width: 760px) {
    .tile-admin-card-head,
    .tile-admin-grid {
        display: grid;
        grid-template-columns: 1fr;
    }

    .tile-admin-switches {
        justify-content: flex-start;
    }

    .tile-admin-hero h1 {
        font-size: 30px;
    }
}

/*
|--------------------------------------------------------------------------
| Step58c - Dashboardtegels link in instellingen
|--------------------------------------------------------------------------
*/

.settings-dashboard-tiles-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin: 0 0 14px;
    padding: 16px;
    background: var(--planiq-surface);
    border: 1px solid var(--planiq-border);
    box-shadow: var(--planiq-shadow-card);
}

.settings-dashboard-tiles-kicker {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 0 7px;
    margin-bottom: 8px;
    background: #e2e8f0;
    color: #334155;
    font-size: 10px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.settings-dashboard-tiles-link h2 {
    margin: 0;
    color: var(--planiq-text);
    font-size: 24px;
    line-height: 1.05;
    font-weight: 950;
    letter-spacing: -.05em;
}

.settings-dashboard-tiles-link p {
    margin: 7px 0 0;
    max-width: 520px;
    color: var(--planiq-muted);
    font-size: 13px;
    line-height: 1.4;
    font-weight: 850;
}

.settings-dashboard-tiles-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 14px;
    background: var(--planiq-header-bg);
    color: #ffffff;
    font-size: 13px;
    font-weight: 950;
    text-decoration: none;
    white-space: nowrap;
}

.settings-dashboard-tiles-button:hover,
.settings-dashboard-tiles-button:focus {
    background: #1e293b;
    color: #ffffff;
    text-decoration: none;
    outline: none;
}

@media (max-width: 760px) {
    .settings-dashboard-tiles-link {
        display: grid;
        gap: 12px;
    }

    .settings-dashboard-tiles-button {
        width: 100%;
    }
}

/*
|--------------------------------------------------------------------------
| Step58d-0 - Algemene modulepagina styling
|--------------------------------------------------------------------------
| Herstelt de centrale styling voor modulepagina's zoals:
| - instellingen
| - leadbronnen / KPI
| - lead-intake
| - mailboxen
|
| Belangrijk:
| Deze laag gebruikt bestaande classnamen uit de views.
| Geen werking wordt aangepast; alleen presentatie.
|--------------------------------------------------------------------------
*/

.app-container.is-medium {
    max-width: var(--app-width);
}

.panel {
    display: block;
    width: 100%;
    margin: 0 0 14px;
    padding: 18px;
    background: #ffffff;
    border: 1px solid var(--app-border);
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05);
}

.panel-header {
    margin: 0 0 14px;
}

.panel-header.is-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.panel-header h1 {
    margin: 4px 0 0;
    color: #071225;
    font-size: 34px;
    line-height: 1.03;
    font-weight: 950;
    letter-spacing: -0.055em;
}

.panel-header p {
    margin: 6px 0 0;
    color: var(--app-muted);
    font-size: 14px;
    line-height: 1.35;
    font-weight: 850;
}

.panel-subtitle {
    margin: 18px 0 10px;
    padding-top: 12px;
    border-top: 1px solid #e2e8f0;
    color: #0f172a;
    font-size: 18px;
    line-height: 1.1;
    font-weight: 950;
    letter-spacing: -0.04em;
}

.header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.settings-form,
.form-stack {
    display: grid;
    gap: 10px;
}

.settings-form .field,
.form-stack .field {
    margin-bottom: 0;
}

.grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    align-items: start;
}

.form-stack > .grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

input[type="url"],
input[type="date"],
input[type="color"] {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #0f172a;
    font: inherit;
    font-size: 14px;
    font-weight: 800;
    border-radius: 0;
    outline: none;
}

input[type="color"] {
    width: 54px;
    min-height: 36px;
    padding: 3px;
}

input[type="url"]:focus,
input[type="date"]:focus,
input[type="color"]:focus {
    border-color: #94a3b8;
    box-shadow: 0 0 0 3px rgba(148, 163, 184, .18);
}

.help-text {
    color: var(--app-muted);
    font-size: 13px;
    line-height: 1.45;
    font-weight: 800;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.stat-card {
    min-height: 86px;
    padding: 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.stat-card span {
    display: block;
    margin: 0 0 6px;
    color: var(--app-muted);
    font-size: 12px;
    line-height: 1.2;
    font-weight: 900;
}

.stat-card strong {
    display: block;
    color: #071225;
    font-size: 23px;
    line-height: 1.05;
    font-weight: 950;
    letter-spacing: -0.045em;
}

.info-list {
    display: grid;
    gap: 0;
    background: #f8fafc;
    border: 1px solid #dbe2ea;
    overflow: hidden;
}

.info-row {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    gap: 12px;
    padding: 12px;
    border-bottom: 1px solid #e2e8f0;
}

.info-row:last-child {
    border-bottom: 0;
}

.info-label {
    color: var(--app-muted);
    font-size: 11px;
    line-height: 1.25;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.info-value {
    min-width: 0;
    color: #0f172a;
    font-size: 14px;
    line-height: 1.45;
    font-weight: 850;
    overflow-wrap: anywhere;
}

.empty-state {
    padding: 14px;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    color: var(--app-muted);
    font-size: 14px;
    line-height: 1.4;
    font-weight: 850;
}

.settings-dashboard-tiles-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin: 0 0 14px;
    padding: 18px;
    background: #ffffff;
    border: 1px solid var(--app-border);
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05);
}

.settings-dashboard-tiles-kicker {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 8px;
    margin: 0 0 8px;
    background: #e2e8f0;
    color: #334155;
    font-size: 10px;
    line-height: 1;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.settings-dashboard-tiles-link h2 {
    margin: 0;
    color: #071225;
    font-size: 26px;
    line-height: 1.05;
    font-weight: 950;
    letter-spacing: -0.05em;
}

.settings-dashboard-tiles-link p {
    margin: 6px 0 0;
    max-width: 560px;
    color: var(--app-muted);
    font-size: 13px;
    line-height: 1.4;
    font-weight: 850;
}

.settings-dashboard-tiles-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 14px;
    background: #0f172a;
    color: #ffffff;
    font-size: 13px;
    font-weight: 950;
    text-decoration: none;
    white-space: nowrap;
}

.settings-dashboard-tiles-button:hover,
.settings-dashboard-tiles-button:focus {
    background: #1e293b;
    color: #ffffff;
    text-decoration: none;
    outline: none;
}

.summary-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
}

.summary-box {
    padding: 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.summary-label {
    margin: 0 0 5px;
    color: var(--app-muted);
    font-size: 12px;
    line-height: 1.2;
    font-weight: 900;
}

.summary-value {
    color: #071225;
    font-size: 23px;
    line-height: 1.05;
    font-weight: 950;
    letter-spacing: -0.045em;
}

.archive-block {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid #e2e8f0;
}

.archive-block summary {
    cursor: pointer;
    min-height: 46px;
    padding: 12px;
    background: #ffffff;
    border: 1px solid #dbe2ea;
    color: #0f172a;
    font-size: 18px;
    line-height: 1.1;
    font-weight: 950;
    letter-spacing: -0.035em;
}

.archive-note {
    margin: 12px 0;
    color: var(--app-muted);
    font-size: 13px;
    line-height: 1.45;
    font-weight: 800;
}

@media (max-width: 900px) {
    .grid,
    .form-stack > .grid,
    .stats-grid,
    .summary-strip {
        grid-template-columns: 1fr;
    }

    .panel-header.is-row {
        display: grid;
        gap: 12px;
    }

    .header-actions {
        justify-content: stretch;
    }

    .header-actions > *,
    .header-actions form,
    .header-actions .primary-button,
    .header-actions .primary-link {
        width: 100%;
    }

    .settings-dashboard-tiles-link {
        display: grid;
        gap: 12px;
    }

    .settings-dashboard-tiles-button {
        width: 100%;
    }
}

@media (max-width: 760px) {
    .panel {
        padding: 15px;
        margin-bottom: 12px;
    }

    .panel-header h1 {
        font-size: 30px;
    }

    .info-row {
        grid-template-columns: 1fr;
        gap: 4px;
        padding: 11px;
    }

    .stat-card,
    .summary-box {
        min-height: auto;
        padding: 12px;
    }
}

/*
|--------------------------------------------------------------------------
| Step59a - Centrale Planiq UI basis
|--------------------------------------------------------------------------
| Eén UI-laag voor huidige en nieuwe pagina's.
|
| Richtlijn:
| - Views bevatten alleen HTML/PHP-structuur.
| - app.css bevat alle algemene styling.
| - Dynamische waarden komen via CSS-variabelen / settings.
|--------------------------------------------------------------------------
*/

:root {
    --planiq-surface: #ffffff;
    --planiq-surface-soft: #f8fafc;
    --planiq-text: #0f172a;
    --planiq-title: #071225;
    --planiq-muted: #64748b;
    --planiq-border: #dbe2ea;
    --planiq-border-soft: #e2e8f0;
    --planiq-shadow-card: 0 8px 22px rgba(15, 23, 42, 0.05);
    --planiq-radius: 0;
    --planiq-focus: 0 0 0 3px rgba(148, 163, 184, .18);
}

.app-container.is-medium {
    max-width: var(--app-width);
}

.app-container.is-wide,
.dashboard-container.is-wide {
    max-width: var(--app-wide-width);
}

.panel,
.ui-panel {
    display: block;
    width: 100%;
    margin: 0 0 14px;
    padding: 18px;
    background: var(--planiq-surface);
    border: 1px solid var(--planiq-border);
    border-radius: var(--planiq-radius);
    box-shadow: var(--planiq-shadow-card);
}

.panel-header,
.ui-panel-header {
    margin: 0 0 14px;
}

.panel-header.is-row,
.ui-panel-header.is-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.panel-header h1,
.ui-panel-header h1,
.ui-title {
    margin: 4px 0 0;
    color: var(--planiq-title);
    font-size: 34px;
    line-height: 1.03;
    font-weight: 950;
    letter-spacing: -0.055em;
}

.panel-header p,
.ui-panel-header p,
.ui-subtitle {
    margin: 6px 0 0;
    color: var(--planiq-muted);
    font-size: 14px;
    line-height: 1.35;
    font-weight: 850;
}

.panel-subtitle,
.ui-section-title {
    margin: 18px 0 10px;
    padding-top: 12px;
    border-top: 1px solid var(--planiq-border-soft);
    color: var(--planiq-text);
    font-size: 18px;
    line-height: 1.1;
    font-weight: 950;
    letter-spacing: -0.04em;
}

.header-actions,
.ui-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.badge,
.ui-badge,
.status-pill,
.ui-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 26px;
    padding: 0 9px;
    border: 0;
    border-radius: 0;
    background: #e2e8f0;
    color: #0f172a;
    font-size: 11px;
    line-height: 1;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .035em;
    white-space: nowrap;
    text-decoration: none;
}

.status-pill,
.ui-pill.is-dark {
    background: #0f172a;
    color: #ffffff;
}

.notice.success,
.ui-notice.is-success {
    background: #ecfdf5;
    border-color: #bbf7d0;
    color: #166534;
}

.notice.error,
.ui-notice.is-error {
    background: #fef2f2;
    border-color: #fecaca;
    color: #991b1b;
}

.settings-form,
.form-stack,
.ui-form {
    display: grid;
    gap: 10px;
}

.settings-form .field,
.form-stack .field,
.ui-form .field {
    margin-bottom: 0;
}

.grid,
.ui-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    align-items: start;
}

.form-stack > .grid,
.ui-form > .ui-grid.is-three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.field {
    display: grid;
    gap: 6px;
}

.field label {
    color: #334155;
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .04em;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="datetime-local"],
input[type="url"],
input[type="date"],
select,
textarea {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #0f172a;
    font: inherit;
    font-size: 14px;
    font-weight: 800;
    border-radius: 0;
    outline: none;
}

input[type="color"] {
    width: 54px;
    min-height: 36px;
    padding: 3px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    border-radius: 0;
    outline: none;
}

textarea {
    min-height: 110px;
    resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
    border-color: #94a3b8;
    box-shadow: var(--planiq-focus);
}

button,
.btn,
.primary-button,
.secondary-button,
.primary-link,
.settings-dashboard-tiles-button,
.ui-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 14px;
    border: 0;
    border-radius: 0;
    background: #0f172a;
    color: #ffffff;
    text-decoration: none;
    font: inherit;
    font-size: 13px;
    font-weight: 950;
    cursor: pointer;
    white-space: nowrap;
}

button:hover,
button:focus,
.btn:hover,
.btn:focus,
.primary-button:hover,
.primary-button:focus,
.secondary-button:hover,
.secondary-button:focus,
.primary-link:hover,
.primary-link:focus,
.settings-dashboard-tiles-button:hover,
.settings-dashboard-tiles-button:focus,
.ui-button:hover,
.ui-button:focus {
    background: #1e293b;
    color: #ffffff;
    text-decoration: none;
    outline: none;
}

.secondary-button,
.btn-light,
.ui-button.is-secondary {
    background: #e2e8f0;
    color: #0f172a;
}

.secondary-button:hover,
.secondary-button:focus,
.btn-light:hover,
.btn-light:focus,
.ui-button.is-secondary:hover,
.ui-button.is-secondary:focus {
    background: #cbd5e1;
    color: #0f172a;
}

.help-text,
.ui-help {
    color: var(--planiq-muted);
    font-size: 13px;
    line-height: 1.45;
    font-weight: 800;
}

.stats-grid,
.summary-strip,
.ui-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.summary-strip {
    margin-top: 14px;
}

.stat-card,
.summary-box,
.ui-stat-card {
    min-height: 86px;
    padding: 14px;
    background: var(--planiq-surface-soft);
    border: 1px solid var(--planiq-border-soft);
}

.stat-card span,
.summary-label,
.ui-stat-label {
    display: block;
    margin: 0 0 6px;
    color: var(--planiq-muted);
    font-size: 12px;
    line-height: 1.2;
    font-weight: 900;
}

.stat-card strong,
.summary-value,
.ui-stat-value {
    display: block;
    color: var(--planiq-title);
    font-size: 23px;
    line-height: 1.05;
    font-weight: 950;
    letter-spacing: -0.045em;
}

.info-list,
.ui-info-list {
    display: grid;
    gap: 0;
    background: var(--planiq-surface-soft);
    border: 1px solid var(--planiq-border);
    overflow: hidden;
}

.info-row,
.ui-info-row {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    gap: 12px;
    padding: 12px;
    border-bottom: 1px solid var(--planiq-border-soft);
}

.info-row:last-child,
.ui-info-row:last-child {
    border-bottom: 0;
}

.info-label,
.ui-info-label {
    color: var(--planiq-muted);
    font-size: 11px;
    line-height: 1.25;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.info-value,
.ui-info-value {
    min-width: 0;
    color: var(--planiq-text);
    font-size: 14px;
    line-height: 1.45;
    font-weight: 850;
    overflow-wrap: anywhere;
}

.empty-state,
.ui-empty {
    padding: 14px;
    background: var(--planiq-surface-soft);
    border: 1px dashed #cbd5e1;
    color: var(--planiq-muted);
    font-size: 14px;
    line-height: 1.4;
    font-weight: 850;
}

.settings-dashboard-tiles-link,
.ui-feature-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin: 0 0 14px;
    padding: 18px;
    background: var(--planiq-surface);
    border: 1px solid var(--planiq-border);
    box-shadow: var(--planiq-shadow-card);
}

.settings-dashboard-tiles-kicker,
.ui-kicker {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 8px;
    margin: 0 0 8px;
    background: #e2e8f0;
    color: #334155;
    font-size: 10px;
    line-height: 1;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.settings-dashboard-tiles-link h2,
.ui-feature-link h2 {
    margin: 0;
    color: var(--planiq-title);
    font-size: 26px;
    line-height: 1.05;
    font-weight: 950;
    letter-spacing: -0.05em;
}

.settings-dashboard-tiles-link p,
.ui-feature-link p {
    margin: 6px 0 0;
    max-width: 560px;
    color: var(--planiq-muted);
    font-size: 13px;
    line-height: 1.4;
    font-weight: 850;
}

/* LeadIntake componenten centraal */
.intake-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.intake-row {
    display: grid;
    grid-template-columns: 90px minmax(0, 1.1fr) minmax(0, 1.1fr) minmax(0, 1fr) 120px;
    gap: 12px;
    align-items: center;
    padding: 14px;
    border: 1px solid var(--planiq-border-soft);
    border-radius: 0;
    background: var(--planiq-surface-soft);
    color: var(--planiq-text);
    text-decoration: none;
}

.intake-row:hover,
.intake-row:focus {
    border-color: var(--theme-color, #2563eb);
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(37, 99, 235, 0.10);
    color: var(--planiq-text);
    text-decoration: none;
    outline: none;
}

.intake-id {
    font-weight: 900;
    color: var(--planiq-muted);
}

.intake-main {
    min-width: 0;
}

.intake-title {
    margin-bottom: 4px;
    color: var(--planiq-text);
    font-size: 15px;
    font-weight: 900;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.intake-meta {
    color: var(--planiq-muted);
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.intake-pill,
.intake-status {
    display: inline-flex;
    justify-content: center;
    width: fit-content;
    padding: 6px 10px;
    border-radius: 0;
    background: #e8f1ff;
    color: var(--theme-color, #2563eb);
    font-weight: 900;
    white-space: nowrap;
}

.intake-status {
    background: #dcfce7;
    color: #166534;
}

.intake-status.is-processed {
    background: #e5e7eb;
    color: #475569;
}

.archive-block {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--planiq-border-soft);
}

.archive-block summary {
    cursor: pointer;
    min-height: 46px;
    padding: 12px;
    background: #ffffff;
    border: 1px solid var(--planiq-border);
    color: var(--planiq-text);
    font-size: 18px;
    line-height: 1.1;
    font-weight: 950;
    letter-spacing: -0.035em;
}

.archive-note {
    margin: 12px 0;
    color: var(--planiq-muted);
    font-size: 13px;
    line-height: 1.45;
    font-weight: 800;
}

@media (max-width: 900px) {
    .grid,
    .ui-grid,
    .form-stack > .grid,
    .ui-form > .ui-grid.is-three,
    .stats-grid,
    .summary-strip,
    .ui-stats-grid,
    .intake-row {
        grid-template-columns: 1fr;
    }

    .panel-header.is-row,
    .ui-panel-header.is-row {
        display: grid;
        gap: 12px;
    }

    .header-actions,
    .ui-actions {
        justify-content: stretch;
    }

    .header-actions > *,
    .header-actions form,
    .header-actions .primary-button,
    .header-actions .primary-link,
    .ui-actions > *,
    .ui-actions .ui-button {
        width: 100%;
    }

    .settings-dashboard-tiles-link,
    .ui-feature-link {
        display: grid;
        gap: 12px;
    }

    .settings-dashboard-tiles-button,
    .ui-feature-link .ui-button {
        width: 100%;
    }
}

@media (max-width: 760px) {
    .panel,
    .ui-panel {
        padding: 15px;
        margin-bottom: 12px;
    }

    .panel-header h1,
    .ui-panel-header h1,
    .ui-title {
        font-size: 30px;
    }

    .info-row,
    .ui-info-row {
        grid-template-columns: 1fr;
        gap: 4px;
        padding: 11px;
    }

    .stat-card,
    .summary-box,
    .ui-stat-card {
        min-height: auto;
        padding: 12px;
    }
}

/*
|--------------------------------------------------------------------------
| Step60 - Centrale dynamische UI en instellingen
|--------------------------------------------------------------------------
| Deze laag maakt de UI instelbaar via Settings:
| - kleurenpaletten
| - logo in topbar
| - bedrijfs-/huisstijl instellingen
| - radius / dichtheid / breedte / lettertype
|--------------------------------------------------------------------------
*/

body {
    background: var(--app-bg);
    color: var(--app-text);
    font-family: var(--planiq-font-family, Arial, sans-serif);
}

.topbar {
    background: var(--planiq-header-bg);
}

.topbar-brand {
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.topbar-brand-logo-wrap {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.12);
    overflow: hidden;
}

.topbar-brand-logo {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.topbar-brand-text {
    min-width: 0;
    display: inline-flex;
    flex-direction: column;
    gap: 1px;
}

.panel,
.card,
.panel-card,
.planiq-flow-card,
.hero-card,
.planiq-hero-card,
.customer-card,
.lead-view-hero,
.lead-view-block,
.planiq-accordion-item,
.settings-dashboard-tiles-link,
.stat-card,
.summary-box,
.info-list,
.empty-state,
.customer-board-toolbar,
.theme-preview-card,
.palette-card,
.settings-logo-preview {
    border-radius: var(--planiq-radius, 0);
}

.panel {
    padding: calc(18px * var(--planiq-density, 1));
    background: var(--app-card);
    border-color: var(--app-border);
}

.panel-header h1,
.hero-card h1,
.planiq-hero-title,
.lead-view-title,
.customer-card-name {
    color: var(--app-text);
}

.panel-header p,
.help-text,
.empty-state,
.muted,
.info-label,
.summary-label,
.stat-card span,
.archive-note {
    color: var(--app-muted);
}

.primary-button,
button,
.btn,
.settings-dashboard-tiles-button,
.customer-board-tab.is-active {
    background: var(--theme-color);
    color: #ffffff;
}

.primary-button:hover,
.primary-button:focus,
button:hover,
button:focus,
.btn:hover,
.btn:focus,
.settings-dashboard-tiles-button:hover,
.settings-dashboard-tiles-button:focus {
    background: var(--planiq-header-bg);
    color: #ffffff;
}

.secondary-button,
.btn-light {
    background: var(--app-border);
    color: var(--app-text);
}

.badge-orange,
.lead-label.is-primary,
.planiq-label.is-primary,
.customer-card-label.is-primary {
    background: var(--app-orange);
    color: #ffffff;
}

.status-pill,
.planiq-status-pill,
.customer-card-status,
.lead-view-status {
    background: var(--theme-color);
    color: #ffffff;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="datetime-local"],
input[type="url"],
input[type="date"],
select,
textarea {
    background: var(--app-card);
    color: var(--app-text);
    border-color: var(--app-border);
    border-radius: var(--planiq-radius, 0);
}

.settings-page-form {
    display: grid;
    gap: 0;
}

.settings-hero-panel {
    background: linear-gradient(135deg, var(--app-card), rgba(255,255,255,.72));
}

.settings-color-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.palette-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.palette-card {
    display: grid;
    gap: 8px;
    padding: 13px;
    background: var(--app-card);
    border: 1px solid var(--app-border);
    cursor: pointer;
}

.palette-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.palette-card.is-active {
    border-color: var(--theme-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-color) 16%, transparent);
}

.palette-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.palette-card-title {
    color: var(--app-text);
    font-size: 14px;
    font-weight: 950;
}

.palette-card-description {
    color: var(--app-muted);
    font-size: 12px;
    line-height: 1.35;
    font-weight: 800;
}

.palette-swatches {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.palette-swatches span {
    width: 18px;
    height: 18px;
    border: 1px solid rgba(15,23,42,.12);
}

.settings-logo-area {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.settings-logo-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    padding: 12px;
    background: var(--app-bg);
    border: 1px solid var(--app-border);
}

.settings-logo-preview img {
    display: block;
    max-width: 100%;
    max-height: 96px;
    object-fit: contain;
}

.settings-logo-placeholder {
    color: var(--app-muted);
    font-size: 13px;
    font-weight: 900;
}

.settings-logo-controls {
    display: grid;
    gap: 10px;
}

.check-row {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--app-text);
    font-size: 13px;
    font-weight: 850;
}

.check-row input {
    width: auto;
    min-height: auto;
}

.theme-preview-card {
    margin-top: 14px;
    padding: 16px;
    background: var(--app-card);
    border: 1px solid var(--app-border);
}

.theme-preview-card h2 {
    margin: 8px 0 0;
    color: var(--app-text);
    font-size: 25px;
    line-height: 1.05;
    font-weight: 950;
    letter-spacing: -.05em;
}

.theme-preview-card p {
    margin: 6px 0 0;
    color: var(--app-muted);
    font-size: 13px;
    font-weight: 850;
}

.is-preview {
    pointer-events: none;
}

.settings-sticky-save {
    position: sticky;
    bottom: 0;
    z-index: 50;
    margin: 0 0 14px;
    padding: 12px;
    background: color-mix(in srgb, var(--app-bg) 86%, transparent);
    border: 1px solid var(--app-border);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.settings-sticky-save .primary-button {
    width: 100%;
}

@media (max-width: 900px) {
    .settings-color-grid,
    .palette-grid,
    .settings-logo-area {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .topbar-brand-logo-wrap {
        width: 34px;
        height: 34px;
    }

    .settings-color-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .palette-card {
        padding: 12px;
    }
}

/*
|--------------------------------------------------------------------------
| Step61 - Modulebeheer en betaalde dashboardtegels
|--------------------------------------------------------------------------
*/

.tile-admin-hero .notice {
    margin-top: 12px;
}

.tile-admin-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
}

.tile-admin-list {
    display: grid;
    gap: 14px;
}

.tile-admin-card {
    border-left: 5px solid var(--app-border);
}

.tile-admin-card.is-paid {
    border-left-color: var(--app-orange);
}

.tile-admin-card.is-soon {
    border-left-color: #f59e0b;
}

.tile-admin-card.is-hidden {
    border-left-color: #94a3b8;
    opacity: .86;
}

.tile-admin-card.is-included {
    border-left-color: var(--theme-color);
}

.tile-admin-card-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: start;
    margin-bottom: 14px;
}

.tile-admin-label-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.tile-admin-card h2 {
    margin: 0;
    color: var(--app-text);
    font-size: 28px;
    line-height: 1.04;
    font-weight: 950;
    letter-spacing: -.055em;
}

.tile-admin-card p {
    margin: 6px 0 0;
    color: var(--app-muted);
    font-size: 13px;
    line-height: 1.4;
    font-weight: 850;
}

.tile-admin-commercial-line {
    margin-top: 8px;
    color: var(--app-text);
    font-size: 13px;
    font-weight: 950;
}

.tile-billing-pill {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 9px;
    background: var(--app-border);
    color: var(--app-text);
    font-size: 11px;
    line-height: 1;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .035em;
}

.tile-billing-pill.is-paid {
    background: var(--app-orange);
    color: #ffffff;
}

.tile-billing-pill.is-soon {
    background: #f59e0b;
    color: #ffffff;
}

.tile-billing-pill.is-hidden,
.tile-billing-pill.is-disabled {
    background: #94a3b8;
    color: #ffffff;
}

.tile-billing-pill.is-included,
.tile-billing-pill.is-visible {
    background: var(--theme-color);
    color: #ffffff;
}

.tile-admin-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.tile-admin-grid label {
    display: grid;
    gap: 5px;
    color: var(--app-muted);
    font-size: 11px;
    line-height: 1.2;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.tile-admin-grid label.wide {
    grid-column: 1 / -1;
}

.tile-admin-grid input,
.tile-admin-grid select {
    width: 100%;
    min-height: 40px;
    border: 1px solid var(--app-border);
    background: var(--app-card);
    color: var(--app-text);
    padding: 0 10px;
    font-size: 14px;
    font-weight: 850;
    outline: none;
}

.tile-admin-grid input:focus,
.tile-admin-grid select:focus {
    border-color: var(--theme-color);
    box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}

.tile-admin-switches {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 12px;
}

.tile-admin-switches label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    padding: 0 9px;
    background: var(--app-bg);
    border: 1px solid var(--app-border);
    color: var(--app-text);
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.tile-admin-switches input {
    width: auto;
    min-height: auto;
}

.create-switches {
    justify-content: flex-start;
}

.tile-admin-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 12px;
}

.tile-admin-actions.top {
    margin-top: 0;
}

.tile-admin-actions button {
    min-height: 40px;
    border: 0;
    background: var(--theme-color);
    color: #ffffff;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 950;
    cursor: pointer;
}

.tile-admin-actions button:hover,
.tile-admin-actions button:focus {
    background: var(--planiq-header-bg);
    color: #ffffff;
    outline: none;
}

@media (max-width: 980px) {
    .tile-admin-summary,
    .tile-admin-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .tile-admin-summary,
    .tile-admin-card-head,
    .tile-admin-grid {
        grid-template-columns: 1fr;
    }

    .tile-admin-actions,
    .tile-admin-switches {
        justify-content: stretch;
    }

    .tile-admin-actions button {
        width: 100%;
    }

    .tile-admin-hero h1,
    .tile-admin-card h2 {
        font-size: 30px;
    }
}

/*
|--------------------------------------------------------------------------
| Step62 - Dynamisch hoofdmenu
|--------------------------------------------------------------------------
| Het menu volgt dashboard_tiles/modulebeheer:
| - alleen actieve/zichtbare modules
| - badges voor Premium/Binnenkort
| - betere scanbaarheid
|--------------------------------------------------------------------------
*/

.topbar-menu-panel {
    width: min(390px, calc(100vw - 24px));
}

.topbar-menu-panel a {
    justify-content: space-between;
    gap: 12px;
}

.topbar-menu-item-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topbar-menu-badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 20px;
    padding: 0 7px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.10);
    color: #ffffff;
    font-size: 9px;
    line-height: 1;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.topbar-menu-badge.paid {
    background: var(--app-orange);
    border-color: var(--app-orange);
    color: #ffffff;
}

.topbar-menu-badge.coming_soon {
    background: #f59e0b;
    border-color: #f59e0b;
    color: #ffffff;
}

.topbar-menu-panel .topbar-menu-separator:last-of-type {
    display: none;
}

@media (max-width: 760px) {
    .topbar-menu-panel {
        width: auto;
    }
}

/*
|--------------------------------------------------------------------------
| Step63 - Instellingen opslaan duidelijk zichtbaar
|--------------------------------------------------------------------------
*/

.settings-save-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 14px;
    padding: 16px;
    background: var(--app-card);
    border: 2px solid var(--theme-color);
    box-shadow: 0 12px 32px rgba(15, 23, 42, .08);
    border-radius: var(--planiq-radius, 0);
}

.settings-save-panel h2 {
    margin: 6px 0 0;
    color: var(--app-text);
    font-size: 24px;
    line-height: 1.05;
    font-weight: 950;
    letter-spacing: -.05em;
}

.settings-save-panel p {
    margin: 6px 0 0;
    color: var(--app-muted);
    font-size: 13px;
    line-height: 1.35;
    font-weight: 850;
}

.settings-save-button {
    min-width: 210px;
    min-height: 46px;
    background: var(--theme-color);
    color: #ffffff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .16);
}

.settings-save-panel-top {
    position: relative;
}

.settings-sticky-save {
    position: sticky;
    bottom: 12px;
    z-index: 80;
    background: color-mix(in srgb, var(--app-card) 92%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.settings-sticky-save .settings-save-button {
    min-width: 240px;
}

@media (max-width: 760px) {
    .settings-save-panel {
        display: grid;
        gap: 12px;
        padding: 14px;
    }

    .settings-save-button,
    .settings-sticky-save .settings-save-button {
        width: 100%;
        min-width: 0;
    }

    .settings-save-panel h2 {
        font-size: 22px;
    }

    .settings-sticky-save {
        bottom: 8px;
    }
}

/*
|--------------------------------------------------------------------------
| Step65 - Radius/hoeken overal toepassen
|--------------------------------------------------------------------------
| Zorgt dat de instelling "Hoeken" niet alleen op enkele kaarten werkt,
| maar op alle centrale UI-bouwblokken.
|--------------------------------------------------------------------------
*/

:root {
    --planiq-radius-small: max(0px, calc(var(--planiq-radius, 0px) * .55));
    --planiq-radius-medium: max(0px, calc(var(--planiq-radius, 0px) * .8));
    --planiq-radius-large: var(--planiq-radius, 0px);
}

/* Grote containers en kaarten */
.panel,
.card,
.panel-card,
.planiq-flow-card,
.hero-card,
.planiq-hero-card,
.customer-card,
.lead-view-hero,
.lead-view-block,
.planiq-accordion-item,
.settings-dashboard-tiles-link,
.settings-save-panel,
.settings-sticky-save,
.stat-card,
.summary-box,
.info-list,
.empty-state,
.customer-board-toolbar,
.theme-preview-card,
.palette-card,
.settings-logo-preview,
.tile-admin-card,
.archive-block summary,
.notice,
.details,
.detail-row,
.intake-row,
.intake-status,
.intake-pill,
.lead-view-raw,
.lead-view-timeline-item,
.lead-view-message,
.lead-view-file,
.timeline-item,
.communication-item,
.customer-card-info,
.lead-view-info,
.info-box,
.raw-box,
.planiq-info-box,
.return-box {
    border-radius: var(--planiq-radius-large) !important;
}

/* Formulieren */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="datetime-local"],
input[type="url"],
input[type="date"],
input[type="color"],
input[type="file"],
select,
textarea,
.tile-admin-grid input,
.tile-admin-grid select {
    border-radius: var(--planiq-radius-medium) !important;
}

/* Knoppen en actie-elementen */
button,
.btn,
.primary-button,
.secondary-button,
.primary-link,
.settings-dashboard-tiles-button,
.settings-save-button,
.tile-admin-actions button,
.customer-board-tab,
.quick-action,
.lead-action-cell,
.planiq-action-cell,
.lead-view-action {
    border-radius: var(--planiq-radius-medium) !important;
}

/* Kleine labels/badges */
.badge,
.lead-label,
.planiq-label,
.status-pill,
.planiq-status-pill,
.customer-card-status,
.customer-card-label,
.lead-view-status,
.lead-view-badge,
.tile-billing-pill,
.topbar-menu-badge,
.settings-dashboard-tiles-kicker,
.palette-swatches span {
    border-radius: var(--planiq-radius-small) !important;
}

/* Topbar/menu */
.topbar-menu-toggle,
.topbar-menu-panel,
.topbar-menu-panel a,
.topbar-brand-logo-wrap {
    border-radius: var(--planiq-radius-medium) !important;
}

/* Overgangen die afgeronde hoeken visueel beter maken */
.panel,
.customer-card,
.lead-view-block,
.tile-admin-card,
.palette-card,
.theme-preview-card,
.settings-save-panel,
.intake-row {
    overflow: hidden;
}

/* Bij strak/recht geen vreemde rest-afronding */
.quick-actions,
.lead-action-strip,
.planiq-action-strip,
.lead-view-actions {
    border-radius: var(--planiq-radius-large) !important;
    overflow: hidden;
}

@media (max-width: 760px) {
    .topbar-menu-panel {
        border-radius: var(--planiq-radius-large) !important;
    }
}

/*
|--------------------------------------------------------------------------
| Step66 - Weergave/dichtheid zichtbaar toepassen
|--------------------------------------------------------------------------
| Compact / Normaal / Ruimer stuurt nu echte spacing en veldhoogtes aan.
|--------------------------------------------------------------------------
*/

.panel,
.card,
.panel-card,
.planiq-flow-card,
.hero-card,
.planiq-hero-card,
.customer-card-inner,
.lead-view-hero,
.lead-view-block-body,
.planiq-accordion-body,
.more-actions-content,
.danger-content,
.settings-dashboard-tiles-link,
.settings-save-panel,
.theme-preview-card,
.tile-admin-card,
.timeline-item,
.communication-item,
.lead-view-timeline-item,
.lead-view-message,
.lead-view-file,
.intake-row {
    padding: var(--planiq-space-panel, 18px) !important;
}

.app-container,
.dashboard-container {
    padding: var(--planiq-space-gap, 16px) !important;
}

.customer-board,
.customer-board-sections,
.customer-board-list,
.tile-admin-list,
.intake-list,
.timeline-list,
.communication-list,
.planiq-accordion-list,
.lead-view-accordion,
.settings-page-form {
    gap: var(--planiq-space-gap, 12px) !important;
}

.grid,
.form-stack,
.settings-form,
.stats-grid,
.summary-strip,
.tile-admin-grid,
.settings-color-grid,
.palette-grid,
.button-row,
.actions-row,
.proposal-send-actions,
.header-actions {
    gap: var(--planiq-space-gap, 12px) !important;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="datetime-local"],
input[type="url"],
input[type="date"],
select,
textarea,
button,
.btn,
.primary-button,
.secondary-button,
.primary-link,
.settings-dashboard-tiles-button,
.settings-save-button,
.tile-admin-actions button {
    min-height: var(--planiq-field-height, 44px) !important;
}

textarea {
    min-height: calc(var(--planiq-field-height, 44px) * 2.6) !important;
}

.panel-header {
    margin-bottom: var(--planiq-space-gap, 12px) !important;
}

.field {
    gap: calc(var(--planiq-space-gap, 12px) * .45) !important;
    margin-bottom: calc(var(--planiq-space-gap, 12px) * .85) !important;
}

.stat-card,
.summary-box,
.settings-logo-preview {
    padding: calc(var(--planiq-space-panel, 18px) * .78) !important;
}

.badge,
.lead-label,
.planiq-label,
.status-pill,
.planiq-status-pill,
.customer-card-label,
.customer-card-status,
.tile-billing-pill {
    min-height: calc(var(--planiq-field-height, 44px) * .58) !important;
}

/*
|--------------------------------------------------------------------------
| Step68 - Mailstijl zonder globale handtekening
|--------------------------------------------------------------------------
*/

.mail-settings-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 0 0 var(--planiq-space-gap, 12px);
    padding: 13px;
    background: var(--app-bg);
    border: 1px solid var(--app-border);
    border-left: 5px solid var(--theme-color);
    border-radius: var(--planiq-radius, 0);
}

.mail-settings-info div {
    display: grid;
    gap: 4px;
}

.mail-settings-info strong {
    color: var(--app-text);
    font-size: 13px;
    line-height: 1.25;
    font-weight: 950;
}

.mail-settings-info span {
    color: var(--app-muted);
    font-size: 13px;
    line-height: 1.4;
    font-weight: 850;
}

@media (max-width: 760px) {
    .mail-settings-info {
        display: grid;
    }

    .mail-settings-info .primary-link {
        width: 100%;
    }
}

/*
|--------------------------------------------------------------------------
| Step69 - Eigen kleuren duidelijke feedback
|--------------------------------------------------------------------------
*/

.custom-colors-help {
    display: none;
    gap: 5px;
    margin: 0 0 var(--planiq-space-gap, 12px);
    padding: 13px;
    background: var(--app-bg);
    border: 1px solid var(--app-border);
    border-left: 5px solid var(--theme-color);
    color: var(--app-text);
    border-radius: var(--planiq-radius, 0);
}

.custom-colors-help.is-active {
    display: grid;
}

.custom-colors-help strong {
    font-size: 13px;
    font-weight: 950;
    line-height: 1.25;
}

.custom-colors-help span {
    color: var(--app-muted);
    font-size: 13px;
    line-height: 1.4;
    font-weight: 850;
}

.palette-card[data-palette="custom"].is-active {
    border-color: var(--app-orange);
    box-shadow:
        0 0 0 3px color-mix(in srgb, var(--app-orange) 18%, transparent),
        0 12px 28px rgba(15, 23, 42, .08);
}

.settings-color-grid.is-highlighted {
    animation: planiqCustomColorsPulse 1.4s ease-in-out;
}

@keyframes planiqCustomColorsPulse {
    0% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--app-orange) 0%, transparent);
    }

    35% {
        box-shadow: 0 0 0 5px color-mix(in srgb, var(--app-orange) 18%, transparent);
    }

    100% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--app-orange) 0%, transparent);
    }
}

/*
|--------------------------------------------------------------------------
| Step71 - Planiq Admin controlpanel
|--------------------------------------------------------------------------
*/

.app-container.is-wide {
    max-width: min(1120px, calc(100vw - 24px));
}

.admin-hero .panel-header {
    margin-bottom: var(--planiq-space-gap, 12px);
}

.admin-user-card {
    display: grid;
    gap: 4px;
    min-width: 220px;
    padding: 12px;
    background: var(--app-bg);
    border: 1px solid var(--app-border);
    border-radius: var(--planiq-radius, 0);
}

.admin-user-card strong {
    color: var(--app-text);
    font-size: 14px;
    font-weight: 950;
}

.admin-user-card span {
    color: var(--app-muted);
    font-size: 12px;
    font-weight: 850;
}

.admin-summary-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--planiq-space-gap, 12px);
}

.summary-box.is-warning {
    border-left: 5px solid #f59e0b;
}

.admin-action-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--planiq-space-gap, 12px);
    margin-bottom: 14px;
}

.admin-action-card {
    display: grid;
    gap: 8px;
    min-height: 150px;
    padding: var(--planiq-space-panel, 18px);
    background: var(--app-card);
    border: 1px solid var(--app-border);
    color: var(--app-text);
    text-decoration: none;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .05);
    border-radius: var(--planiq-radius, 0);
}

.admin-action-card:hover,
.admin-action-card:focus {
    border-color: var(--theme-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-color) 14%, transparent);
    text-decoration: none;
    outline: none;
}

.admin-action-card strong {
    display: block;
    color: var(--app-text);
    font-size: 24px;
    line-height: 1.05;
    font-weight: 950;
    letter-spacing: -.05em;
}

.admin-action-card em {
    color: var(--app-muted);
    font-style: normal;
    font-size: 13px;
    line-height: 1.4;
    font-weight: 850;
}

.admin-action-card.is-disabled {
    opacity: .62;
    pointer-events: none;
}

.admin-check-list,
.admin-installer-list {
    display: grid;
    gap: 8px;
}

.admin-check-row,
.admin-installer-row {
    display: grid;
    grid-template-columns: 80px minmax(0, 1fr) minmax(0, 1.4fr);
    gap: 10px;
    align-items: center;
    padding: 10px;
    background: var(--app-bg);
    border: 1px solid var(--app-border);
    border-radius: var(--planiq-radius-small, 0);
}

.admin-check-row span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 0 7px;
    color: #ffffff;
    font-size: 10px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .04em;
    border-radius: var(--planiq-radius-small, 0);
}

.admin-check-row.is-ok span {
    background: #16a34a;
}

.admin-check-row.is-warn span {
    background: #f59e0b;
}

.admin-check-row strong,
.admin-installer-row strong {
    color: var(--app-text);
    font-size: 13px;
    font-weight: 950;
    overflow-wrap: anywhere;
}

.admin-check-row em,
.admin-installer-row span {
    color: var(--app-muted);
    font-style: normal;
    font-size: 12px;
    font-weight: 850;
    overflow-wrap: anywhere;
}

.admin-installer-row {
    grid-template-columns: minmax(0, 1fr) 160px;
    border-left: 5px solid #f59e0b;
}

@media (max-width: 980px) {
    .admin-summary-grid,
    .admin-action-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-check-row {
        grid-template-columns: 80px minmax(0, 1fr);
    }

    .admin-check-row em {
        grid-column: 1 / -1;
    }
}

@media (max-width: 760px) {
    .admin-summary-grid,
    .admin-action-grid,
    .admin-hero .panel-header.is-row,
    .admin-installer-row {
        grid-template-columns: 1fr;
    }

    .admin-user-card {
        min-width: 0;
    }

    .admin-action-card {
        min-height: auto;
    }
}

/*
|--------------------------------------------------------------------------
| Step72 - Adminpanel scheiden van klant-app
|--------------------------------------------------------------------------
*/

.planiq-admin-body {
    background:
        radial-gradient(circle at top left, color-mix(in srgb, var(--theme-color) 12%, transparent), transparent 32%),
        var(--app-bg);
}

.admin-shell {
    padding-top: 0;
}

.admin-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin: 0 0 14px;
    padding: 14px 0;
}

.admin-topbar-brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    color: var(--app-text);
    text-decoration: none;
}

.admin-topbar-brand:hover,
.admin-topbar-brand:focus {
    color: var(--app-text);
    text-decoration: none;
    outline: none;
}

.admin-topbar-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: var(--planiq-header-bg);
    color: #ffffff;
    font-size: 22px;
    line-height: 1;
    font-weight: 950;
    border-radius: var(--planiq-radius, 0);
}

.admin-topbar-brand strong {
    display: block;
    color: var(--app-text);
    font-size: 20px;
    line-height: 1.05;
    font-weight: 950;
    letter-spacing: -.045em;
}

.admin-topbar-brand em {
    display: block;
    margin-top: 2px;
    color: var(--app-muted);
    font-style: normal;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 850;
}

.admin-topbar-nav {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.admin-topbar-nav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0 11px;
    background: var(--app-card);
    border: 1px solid var(--app-border);
    color: var(--app-text);
    text-decoration: none;
    font-size: 12px;
    font-weight: 950;
    border-radius: var(--planiq-radius-small, 0);
}

.admin-topbar-nav a:hover,
.admin-topbar-nav a:focus {
    border-color: var(--theme-color);
    color: var(--theme-color);
    text-decoration: none;
    outline: none;
}

.admin-client-context {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin: 0 0 14px;
    padding: 16px;
    background: var(--app-card);
    border: 1px solid var(--app-border);
    border-left: 5px solid var(--theme-color);
    box-shadow: 0 8px 22px rgba(15, 23, 42, .05);
    border-radius: var(--planiq-radius, 0);
}

.admin-client-context h2 {
    margin: 7px 0 0;
    color: var(--app-text);
    font-size: 28px;
    line-height: 1.04;
    font-weight: 950;
    letter-spacing: -.055em;
}

.admin-client-context p {
    margin: 5px 0 0;
    color: var(--app-muted);
    font-size: 13px;
    line-height: 1.4;
    font-weight: 850;
}

.admin-client-logo {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 110px;
    max-width: 160px;
    min-height: 70px;
    padding: 10px;
    background: var(--app-bg);
    border: 1px solid var(--app-border);
    color: var(--app-muted);
    font-size: 12px;
    font-weight: 900;
    border-radius: var(--planiq-radius, 0);
}

.admin-client-logo img {
    display: block;
    max-width: 140px;
    max-height: 56px;
    object-fit: contain;
}

.admin-admin-note {
    display: grid;
    gap: 5px;
    margin: 0 0 14px;
    padding: 14px 16px;
    background: color-mix(in srgb, var(--theme-color) 10%, var(--app-card));
    border: 1px solid color-mix(in srgb, var(--theme-color) 30%, var(--app-border));
    border-left: 5px solid var(--theme-color);
    border-radius: var(--planiq-radius, 0);
}

.admin-admin-note strong {
    color: var(--app-text);
    font-size: 14px;
    font-weight: 950;
}

.admin-admin-note span {
    color: var(--app-muted);
    font-size: 13px;
    line-height: 1.4;
    font-weight: 850;
}

.admin-cleanup-warning {
    margin-top: 12px;
    padding: 12px;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-left: 5px solid #f59e0b;
    color: #7c2d12;
    font-size: 13px;
    line-height: 1.4;
    font-weight: 850;
    border-radius: var(--planiq-radius, 0);
}

@media (max-width: 760px) {
    .admin-topbar,
    .admin-client-context {
        display: grid;
        gap: 12px;
    }

    .admin-topbar-nav {
        justify-content: stretch;
    }

    .admin-topbar-nav a {
        flex: 1 1 auto;
    }

    .admin-client-logo {
        width: 100%;
        max-width: none;
    }
}

/*
|--------------------------------------------------------------------------
| Step73 - Tenants / bedrijvenbasis
|--------------------------------------------------------------------------
*/

.tenant-list {
    display: grid;
    gap: var(--planiq-space-gap, 12px);
}

.tenant-card {
    padding: var(--planiq-space-panel, 18px);
    background: var(--app-card);
    border: 1px solid var(--app-border);
    border-left: 5px solid var(--theme-color);
    box-shadow: 0 8px 22px rgba(15, 23, 42, .05);
    border-radius: var(--planiq-radius, 0);
    overflow: hidden;
}

.tenant-card.is-inactive {
    opacity: .72;
    border-left-color: #94a3b8;
}

.tenant-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: var(--planiq-space-gap, 12px);
}

.tenant-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.tenant-card h2 {
    margin: 0;
    color: var(--app-text);
    font-size: 28px;
    line-height: 1.04;
    font-weight: 950;
    letter-spacing: -.055em;
}

.tenant-card p {
    margin: 6px 0 0;
    color: var(--app-muted);
    font-size: 13px;
    line-height: 1.4;
    font-weight: 850;
}

.tenant-logo-preview {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 110px;
    max-width: 160px;
    min-height: 70px;
    padding: 10px;
    background: var(--app-bg);
    border: 1px solid var(--app-border);
    color: var(--app-muted);
    font-size: 12px;
    font-weight: 900;
    border-radius: var(--planiq-radius, 0);
}

.tenant-logo-preview img {
    display: block;
    max-width: 140px;
    max-height: 56px;
    object-fit: contain;
}

@media (max-width: 760px) {
    .tenant-card-head {
        display: grid;
    }

    .tenant-logo-preview {
        width: 100%;
        max-width: none;
    }
}

/*
|--------------------------------------------------------------------------
| Step76 - Tenant gebruiksoverzicht
|--------------------------------------------------------------------------
*/

.tenant-usage-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 14px 0;
}

.tenant-usage-card {
    padding: 11px;
    background: var(--app-bg);
    border: 1px solid var(--app-border);
    border-left: 4px solid #94a3b8;
    border-radius: var(--planiq-radius-small, 0);
}

.tenant-usage-card.is-ok {
    border-left-color: #16a34a;
}

.tenant-usage-card.is-warn {
    border-left-color: #f59e0b;
}

.tenant-usage-card span {
    display: block;
    color: var(--app-muted);
    font-size: 11px;
    line-height: 1.2;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.tenant-usage-card strong {
    display: block;
    margin-top: 4px;
    color: var(--app-text);
    font-size: 24px;
    line-height: 1;
    font-weight: 950;
    letter-spacing: -.04em;
}

.tenant-usage-card em {
    display: block;
    margin-top: 5px;
    color: var(--app-muted);
    font-style: normal;
    font-size: 11px;
    line-height: 1.3;
    font-weight: 850;
}

@media (max-width: 760px) {
    .tenant-usage-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 460px) {
    .tenant-usage-grid {
        grid-template-columns: 1fr;
    }
}

/*
|--------------------------------------------------------------------------
| Step78 - Company modules foundation
|--------------------------------------------------------------------------
*/

.tenant-module-summary {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    margin: 14px 0;
}

.tenant-module-summary > div {
    padding: 11px;
    background: color-mix(in srgb, var(--theme-color) 7%, var(--app-card));
    border: 1px solid color-mix(in srgb, var(--theme-color) 26%, var(--app-border));
    border-radius: var(--planiq-radius-small, 0);
}

.tenant-module-summary span {
    display: block;
    color: var(--app-muted);
    font-size: 10px;
    line-height: 1.2;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.tenant-module-summary strong {
    display: block;
    margin-top: 5px;
    color: var(--app-text);
    font-size: 24px;
    line-height: 1;
    font-weight: 950;
}

@media (max-width: 760px) {
    .tenant-module-summary {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 460px) {
    .tenant-module-summary {
        grid-template-columns: 1fr;
    }
}

/*
|--------------------------------------------------------------------------
| Step79 - ModuleAccess foundation
|--------------------------------------------------------------------------
*/

.tenant-module-details {
    margin-top: 14px;
    border: 1px solid var(--app-border);
    background: var(--app-bg);
    border-radius: var(--planiq-radius-small, 0);
    overflow: hidden;
}

.tenant-module-details summary {
    cursor: pointer;
    padding: 12px;
    color: var(--app-text);
    font-size: 13px;
    font-weight: 950;
    list-style: none;
}

.tenant-module-details summary::-webkit-details-marker {
    display: none;
}

.tenant-module-details summary::after {
    content: '+';
    float: right;
    color: var(--theme-color);
    font-weight: 950;
}

.tenant-module-details[open] summary::after {
    content: '-';
}

.tenant-module-list {
    display: grid;
    gap: 0;
    border-top: 1px solid var(--app-border);
}

.tenant-module-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--app-border);
    background: var(--app-card);
}

.tenant-module-row:last-child {
    border-bottom: 0;
}

.tenant-module-row.is-disabled {
    opacity: .58;
}

.tenant-module-row strong {
    display: block;
    color: var(--app-text);
    font-size: 13px;
    line-height: 1.2;
    font-weight: 950;
}

.tenant-module-row span {
    display: block;
    margin-top: 3px;
    color: var(--app-muted);
    font-size: 11px;
    line-height: 1.2;
    font-weight: 850;
}

.tenant-module-row-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    justify-content: flex-end;
}

.tenant-module-row-badges em {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 0 7px;
    background: color-mix(in srgb, var(--theme-color) 9%, var(--app-card));
    border: 1px solid color-mix(in srgb, var(--theme-color) 24%, var(--app-border));
    color: var(--app-text);
    font-style: normal;
    font-size: 10px;
    line-height: 1;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .04em;
    border-radius: var(--planiq-radius-small, 0);
}

@media (max-width: 760px) {
    .tenant-module-row {
        display: grid;
    }

    .tenant-module-row-badges {
        justify-content: flex-start;
    }
}

/*
|--------------------------------------------------------------------------
| Step80 - Topbar via ModuleAccess
|--------------------------------------------------------------------------
*/

.topbar-shell {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--planiq-header-bg, #111827);
    color: #ffffff;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .12);
}

.topbar-inner {
    width: min(var(--planiq-app-width, 720px), calc(100vw - 24px));
    margin: 0 auto;
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.topbar-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #ffffff;
    text-decoration: none;
    min-width: 0;
}

.topbar-brand:hover,
.topbar-brand:focus {
    color: #ffffff;
    text-decoration: none;
    outline: none;
}

.topbar-logo {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    color: var(--planiq-header-bg, #111827);
    font-size: 17px;
    line-height: 1;
    font-weight: 950;
    border-radius: var(--planiq-radius-small, 0);
    overflow: hidden;
}

.topbar-logo.has-image {
    background: rgba(255, 255, 255, .08);
}

.topbar-logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.topbar-brand-text {
    display: block;
    min-width: 0;
}

.topbar-brand-text strong {
    display: block;
    color: #ffffff;
    font-size: 16px;
    line-height: 1.05;
    font-weight: 950;
    letter-spacing: -.035em;
    max-width: 190px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.topbar-brand-text em {
    display: block;
    margin-top: 2px;
    color: rgba(255, 255, 255, .72);
    font-style: normal;
    font-size: 10px;
    line-height: 1.1;
    font-weight: 850;
    max-width: 190px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.topbar-menu-toggle {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.topbar-menu-button {
    width: 38px;
    height: 38px;
    display: inline-grid;
    place-items: center;
    gap: 4px;
    padding: 9px;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .06);
    border-radius: var(--planiq-radius-small, 0);
}

.topbar-menu-button span {
    display: block;
    width: 18px;
    height: 2px;
    background: #ffffff;
    border-radius: 2px;
}

.topbar-menu {
    position: fixed;
    top: 54px;
    left: 50%;
    transform: translateX(-50%);
    width: min(var(--planiq-app-width, 720px), calc(100vw - 24px));
    max-height: calc(100vh - 70px);
    overflow: auto;
    padding: 12px;
    background: var(--app-card);
    border: 1px solid var(--app-border);
    box-shadow: 0 18px 50px rgba(15, 23, 42, .22);
    display: none;
    border-radius: var(--planiq-radius, 0);
}

.topbar-menu-toggle:checked ~ .topbar-menu {
    display: grid;
    gap: 10px;
}

.topbar-menu-context {
    padding: 11px;
    background: color-mix(in srgb, var(--theme-color) 8%, var(--app-card));
    border: 1px solid color-mix(in srgb, var(--theme-color) 24%, var(--app-border));
    border-radius: var(--planiq-radius-small, 0);
}

.topbar-menu-context span,
.topbar-menu-group-title {
    display: block;
    color: var(--app-muted);
    font-size: 10px;
    line-height: 1.2;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .055em;
}

.topbar-menu-context strong {
    display: block;
    margin-top: 4px;
    color: var(--app-text);
    font-size: 14px;
    line-height: 1.25;
    font-weight: 950;
}

.topbar-menu-group {
    display: grid;
    gap: 5px;
}

.topbar-menu-group-title {
    padding: 2px 2px 0;
}

.topbar-menu-link {
    min-height: 40px;
    padding: 9px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: var(--app-bg);
    border: 1px solid var(--app-border);
    color: var(--app-text);
    text-decoration: none;
    font-size: 13px;
    line-height: 1.2;
    font-weight: 950;
    border-radius: var(--planiq-radius-small, 0);
}

.topbar-menu-link:hover,
.topbar-menu-link:focus,
.topbar-menu-link.is-active {
    border-color: var(--theme-color);
    color: var(--theme-color);
    text-decoration: none;
    outline: none;
}

.topbar-menu-link em {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    padding: 0 6px;
    background: color-mix(in srgb, var(--theme-color) 10%, var(--app-card));
    color: var(--app-text);
    border: 1px solid color-mix(in srgb, var(--theme-color) 24%, var(--app-border));
    font-style: normal;
    font-size: 9px;
    line-height: 1;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .04em;
    border-radius: var(--planiq-radius-small, 0);
}

@media (min-width: 980px) {
    .topbar-brand-text strong,
    .topbar-brand-text em {
        max-width: 260px;
    }
}

/*
|--------------------------------------------------------------------------
| Step80b - Topbar layout fix
|--------------------------------------------------------------------------
| Correctie op Step80:
| - header/menu mag niet breken
| - menu klapt binnen de appbreedte open
| - hamburger blijft rechts
| - merk/logo blijft links netjes op één regel
|--------------------------------------------------------------------------
*/

body .topbar-shell {
    position: sticky;
    top: 0;
    z-index: 100;
    width: 100%;
    margin: 0 0 10px;
    padding: 0;
    background: transparent;
    color: #ffffff;
    box-shadow: none;
}

body .topbar-inner {
    position: relative;
    width: 100%;
    max-width: none;
    min-height: 54px;
    margin: 0;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: var(--planiq-header-bg, #111827);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: var(--planiq-radius, 0) var(--planiq-radius, 0) 0 0;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .10);
}

body .topbar-brand {
    flex: 1 1 auto;
    min-width: 0;
    max-width: calc(100% - 52px);
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #ffffff;
    text-decoration: none;
    overflow: hidden;
}

body .topbar-logo {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
}

body .topbar-brand-text {
    min-width: 0;
    display: block;
}

body .topbar-brand-text strong,
body .topbar-brand-text em {
    display: block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body .topbar-brand-text strong {
    font-size: 16px;
    line-height: 1.05;
}

body .topbar-brand-text em {
    font-size: 10px;
    line-height: 1.1;
}

body .topbar-menu-button {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    margin-left: auto;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, .22);
    background: rgba(255, 255, 255, .08);
    border-radius: var(--planiq-radius-small, 0);
}

body .topbar-menu-button span {
    flex: 0 0 auto;
    display: block;
    width: 18px;
    height: 2px;
    background: #ffffff;
    border-radius: 2px;
}

body .topbar-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    transform: none;
    width: 100%;
    max-height: calc(100vh - 80px);
    overflow: auto;
    margin: 0;
    padding: 12px;
    background: var(--app-card);
    border: 1px solid var(--app-border);
    box-shadow: 0 18px 50px rgba(15, 23, 42, .22);
    display: none;
    border-radius: 0 0 var(--planiq-radius, 0) var(--planiq-radius, 0);
}

body .topbar-menu-toggle:checked ~ .topbar-menu {
    display: grid;
    gap: 10px;
}

body .topbar-menu-link {
    width: 100%;
}

@media (max-width: 520px) {
    body .topbar-inner {
        min-height: 52px;
        padding: 7px 9px;
    }

    body .topbar-logo {
        flex-basis: 32px;
        width: 32px;
        height: 32px;
    }

    body .topbar-brand-text strong {
        font-size: 15px;
    }

    body .topbar-brand-text em {
        font-size: 9px;
    }
}

/*
|--------------------------------------------------------------------------
| Step80c - Sticky topbar restore
|--------------------------------------------------------------------------
| Definitieve correctie na Step80/80b:
| - topbar blijft sticky
| - topbar is weer één stabiele zwarte balk
| - hamburger blijft rechts
| - menu opent onder de balk binnen dezelfde breedte
|--------------------------------------------------------------------------
*/

body .topbar-shell {
    position: sticky !important;
    top: 0 !important;
    z-index: 999 !important;
    display: block !important;
    width: 100% !important;
    margin: 0 0 12px 0 !important;
    padding: 0 !important;
    background: var(--planiq-header-bg, #111827) !important;
    color: #ffffff !important;
    border-radius: 0 !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .16) !important;
    overflow: visible !important;
}

body .topbar-inner {
    position: relative !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 58px !important;
    margin: 0 !important;
    padding: 8px 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
}

body .topbar-brand {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: calc(100% - 54px) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    color: #ffffff !important;
    text-decoration: none !important;
    overflow: hidden !important;
}

body .topbar-brand:hover,
body .topbar-brand:focus {
    color: #ffffff !important;
    text-decoration: none !important;
    outline: none !important;
}

body .topbar-logo {
    flex: 0 0 36px !important;
    width: 36px !important;
    height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #ffffff !important;
    color: var(--planiq-header-bg, #111827) !important;
    font-size: 17px !important;
    line-height: 1 !important;
    font-weight: 950 !important;
    border-radius: var(--planiq-radius-small, 0) !important;
    overflow: hidden !important;
}

body .topbar-logo.has-image {
    background: rgba(255, 255, 255, .10) !important;
}

body .topbar-logo img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

body .topbar-brand-text {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: block !important;
}

body .topbar-brand-text strong,
body .topbar-brand-text em {
    display: block !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

body .topbar-brand-text strong {
    color: #ffffff !important;
    font-size: 17px !important;
    line-height: 1.05 !important;
    font-weight: 950 !important;
    letter-spacing: -.035em !important;
}

body .topbar-brand-text em {
    margin-top: 2px !important;
    color: rgba(255, 255, 255, .76) !important;
    font-style: normal !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
    font-weight: 850 !important;
}

body .topbar-menu-toggle {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

body .topbar-menu-button {
    flex: 0 0 40px !important;
    width: 40px !important;
    height: 40px !important;
    margin: 0 !important;
    margin-left: auto !important;
    padding: 0 !important;
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    cursor: pointer !important;
    border: 1px solid rgba(255, 255, 255, .25) !important;
    background: rgba(255, 255, 255, .08) !important;
    border-radius: var(--planiq-radius-small, 0) !important;
}

body .topbar-menu-button span {
    flex: 0 0 auto !important;
    display: block !important;
    width: 19px !important;
    height: 2px !important;
    background: #ffffff !important;
    border-radius: 2px !important;
}

body .topbar-menu {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    width: 100% !important;
    max-height: calc(100vh - 70px) !important;
    overflow: auto !important;
    margin: 0 !important;
    padding: 12px !important;
    background: var(--app-card) !important;
    border: 1px solid var(--app-border) !important;
    border-top: 0 !important;
    box-shadow: 0 18px 50px rgba(15, 23, 42, .22) !important;
    display: none !important;
    border-radius: 0 0 var(--planiq-radius, 0) var(--planiq-radius, 0) !important;
}

body .topbar-menu-toggle:checked ~ .topbar-menu {
    display: grid !important;
    gap: 10px !important;
}

/* Voorkomt dat de content achter sticky header geplakt lijkt */
body .app-shell > .app-container,
body .app-container {
    overflow: visible !important;
}

@media (max-width: 520px) {
    body .topbar-inner {
        min-height: 56px !important;
        padding: 8px 9px !important;
    }

    body .topbar-logo {
        flex-basis: 34px !important;
        width: 34px !important;
        height: 34px !important;
    }

    body .topbar-brand-text strong {
        font-size: 16px !important;
    }

    body .topbar-brand-text em {
        font-size: 9px !important;
    }

    body .topbar-menu-button {
        flex-basis: 38px !important;
        width: 38px !important;
        height: 38px !important;
    }
}

/*
|--------------------------------------------------------------------------
| Step80d - Fixed topbar final
|--------------------------------------------------------------------------
| Sticky bleek niet betrouwbaar door layout/parent-context.
| Daarom maken we de klant-app header fixed. Dit garandeert dat hij blijft staan.
|--------------------------------------------------------------------------
*/

:root {
    --planiq-topbar-height: 58px;
}

/* ruimte bovenin zodat content niet achter fixed header valt */
body:has(.topbar-shell) {
    padding-top: calc(var(--planiq-topbar-height) + 10px) !important;
}

/* vaste header bovenaan, binnen app-breedte */
body .topbar-shell {
    position: fixed !important;
    top: 0 !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    z-index: 9999 !important;

    width: min(var(--planiq-app-width, 720px), calc(100vw - 24px)) !important;
    height: var(--planiq-topbar-height) !important;

    margin: 0 !important;
    padding: 0 !important;
    background: var(--planiq-header-bg, #111827) !important;
    color: #ffffff !important;

    border: 0 !important;
    border-radius: 0 0 var(--planiq-radius, 0) var(--planiq-radius, 0) !important;
    box-shadow: 0 10px 26px rgba(15, 23, 42, .20) !important;
    overflow: visible !important;
}

/* binnenkant van header */
body .topbar-inner {
    position: relative !important;
    width: 100% !important;
    max-width: none !important;
    height: var(--planiq-topbar-height) !important;
    min-height: var(--planiq-topbar-height) !important;

    margin: 0 !important;
    padding: 8px 10px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;

    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
}

/* links: logo/appnaam */
body .topbar-brand {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: calc(100% - 54px) !important;

    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;

    color: #ffffff !important;
    text-decoration: none !important;
    overflow: hidden !important;
}

body .topbar-brand:hover,
body .topbar-brand:focus {
    color: #ffffff !important;
    text-decoration: none !important;
    outline: none !important;
}

body .topbar-logo {
    flex: 0 0 36px !important;
    width: 36px !important;
    height: 36px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    background: #ffffff !important;
    color: var(--planiq-header-bg, #111827) !important;

    font-size: 17px !important;
    line-height: 1 !important;
    font-weight: 950 !important;

    border-radius: var(--planiq-radius-small, 0) !important;
    overflow: hidden !important;
}

body .topbar-logo.has-image {
    background: rgba(255, 255, 255, .10) !important;
}

body .topbar-logo img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

body .topbar-brand-text {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: block !important;
}

body .topbar-brand-text strong,
body .topbar-brand-text em {
    display: block !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

body .topbar-brand-text strong {
    color: #ffffff !important;
    font-size: 17px !important;
    line-height: 1.05 !important;
    font-weight: 950 !important;
    letter-spacing: -.035em !important;
}

body .topbar-brand-text em {
    margin-top: 2px !important;
    color: rgba(255, 255, 255, .76) !important;
    font-style: normal !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
    font-weight: 850 !important;
}

/* hamburger rechts */
body .topbar-menu-toggle {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

body .topbar-menu-button {
    flex: 0 0 40px !important;
    width: 40px !important;
    height: 40px !important;
    margin: 0 !important;
    margin-left: auto !important;
    padding: 0 !important;

    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;

    cursor: pointer !important;
    border: 1px solid rgba(255, 255, 255, .25) !important;
    background: rgba(255, 255, 255, .08) !important;
    border-radius: var(--planiq-radius-small, 0) !important;
}

body .topbar-menu-button span {
    flex: 0 0 auto !important;
    display: block !important;
    width: 19px !important;
    height: 2px !important;
    background: #ffffff !important;
    border-radius: 2px !important;
}

/* menu onder vaste header */
body .topbar-menu {
    position: absolute !important;
    top: var(--planiq-topbar-height) !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;

    width: 100% !important;
    max-height: calc(100vh - var(--planiq-topbar-height) - 12px) !important;
    overflow: auto !important;

    margin: 0 !important;
    padding: 12px !important;

    background: var(--app-card) !important;
    border: 1px solid var(--app-border) !important;
    border-top: 0 !important;
    box-shadow: 0 18px 50px rgba(15, 23, 42, .22) !important;

    display: none !important;
    border-radius: 0 0 var(--planiq-radius, 0) var(--planiq-radius, 0) !important;
}

body .topbar-menu-toggle:checked ~ .topbar-menu {
    display: grid !important;
    gap: 10px !important;
}

/* admin pagina's met eigen admin-topbar niet beïnvloeden */
body .admin-topbar {
    position: relative !important;
}

@media (max-width: 520px) {
    :root {
        --planiq-topbar-height: 56px;
    }

    body .topbar-inner {
        padding: 8px 9px !important;
    }

    body .topbar-logo {
        flex-basis: 34px !important;
        width: 34px !important;
        height: 34px !important;
    }

    body .topbar-brand-text strong {
        font-size: 16px !important;
    }

    body .topbar-brand-text em {
        font-size: 9px !important;
    }

    body .topbar-menu-button {
        flex-basis: 38px !important;
        width: 38px !important;
        height: 38px !important;
    }
}

/*
|--------------------------------------------------------------------------
| Step81 - Company module management
|--------------------------------------------------------------------------
*/

.module-management-list {
    display: grid;
    gap: var(--planiq-space-gap, 12px);
}

.module-management-card {
    border-left: 5px solid var(--theme-color);
}

.module-management-card.is-disabled {
    opacity: .72;
    border-left-color: #94a3b8;
}

.module-management-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: var(--planiq-space-gap, 12px);
}

.module-management-head h2 {
    margin: 8px 0 0;
    color: var(--app-text);
    font-size: 24px;
    line-height: 1.05;
    font-weight: 950;
    letter-spacing: -.05em;
}

.module-management-head p {
    margin: 6px 0 0;
    color: var(--app-muted);
    font-size: 13px;
    line-height: 1.4;
    font-weight: 850;
}

.module-toggle {
    flex: 0 0 auto;
    min-width: 82px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 10px;
    background: var(--app-bg);
    border: 1px solid var(--app-border);
    color: var(--app-text);
    font-size: 12px;
    font-weight: 950;
    border-radius: var(--planiq-radius-small, 0);
}

.module-toggle input {
    width: auto;
    min-height: 0;
}

.module-management-options {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin: 12px 0;
}

.module-management-options label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    width: auto;
    padding: 8px 10px;
    background: var(--app-bg);
    border: 1px solid var(--app-border);
    font-size: 12px;
    font-weight: 900;
    border-radius: var(--planiq-radius-small, 0);
}

.module-management-options input {
    width: auto;
    min-height: 0;
}

.flash-success {
    margin-top: 12px;
    padding: 12px;
    background: #ecfdf5;
    border: 1px solid #bbf7d0;
    border-left: 5px solid #16a34a;
    color: #14532d;
    font-size: 13px;
    font-weight: 900;
    border-radius: var(--planiq-radius, 0);
}

@media (max-width: 760px) {
    .module-management-head {
        display: grid;
    }

    .module-toggle {
        width: 100%;
    }
}

/*
|--------------------------------------------------------------------------
| Step82 - Module route map
|--------------------------------------------------------------------------
*/

.module-route-list {
    display: grid;
    gap: 8px;
}

.module-route-row {
    display: grid;
    grid-template-columns: 66px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 10px;
    background: var(--app-card);
    border: 1px solid var(--app-border);
    border-left: 5px solid #94a3b8;
    border-radius: var(--planiq-radius-small, 0);
}

.module-route-row.is-ok {
    border-left-color: #16a34a;
}

.module-route-row.is-warn {
    border-left-color: #f59e0b;
}

.module-route-row > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 0 7px;
    background: var(--app-bg);
    border: 1px solid var(--app-border);
    color: var(--app-text);
    font-size: 10px;
    line-height: 1;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .04em;
    border-radius: var(--planiq-radius-small, 0);
}

.module-route-row strong {
    display: block;
    color: var(--app-text);
    font-size: 13px;
    line-height: 1.2;
    font-weight: 950;
}

.module-route-row em {
    display: block;
    margin-top: 3px;
    color: var(--app-muted);
    font-style: normal;
    font-size: 11px;
    line-height: 1.25;
    font-weight: 850;
}

.module-route-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    justify-content: flex-end;
}

.module-route-meta em {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 0 7px;
    margin: 0;
    background: color-mix(in srgb, var(--theme-color) 8%, var(--app-card));
    border: 1px solid color-mix(in srgb, var(--theme-color) 22%, var(--app-border));
    color: var(--app-text);
    font-size: 10px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .04em;
    border-radius: var(--planiq-radius-small, 0);
}

@media (max-width: 760px) {
    .module-route-row {
        grid-template-columns: 1fr;
    }

    .module-route-meta {
        justify-content: flex-start;
    }
}

/*
|--------------------------------------------------------------------------
| Step83 - Module disabled view
|--------------------------------------------------------------------------
*/

.module-disabled-panel {
    border-left: 5px solid #f59e0b;
}

.module-disabled-box {
    display: grid;
    gap: 5px;
    margin: 14px 0;
    padding: 14px;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    color: #7c2d12;
    border-radius: var(--planiq-radius, 0);
}

.module-disabled-box strong {
    font-size: 14px;
    font-weight: 950;
}

.module-disabled-box span {
    font-size: 13px;
    line-height: 1.4;
    font-weight: 850;
}

.button-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--planiq-field-height, 42px);
    padding: 0 14px;
    background: var(--app-card);
    border: 1px solid var(--app-border);
    color: var(--app-text);
    text-decoration: none;
    font-size: 13px;
    font-weight: 950;
    border-radius: var(--planiq-radius-small, 0);
}

.button-secondary:hover,
.button-secondary:focus {
    border-color: var(--theme-color);
    color: var(--theme-color);
    text-decoration: none;
    outline: none;
}

/*
|--------------------------------------------------------------------------
| Step83b - Module guard testmode
|--------------------------------------------------------------------------
*/

.module-testmode-box {
    margin: 12px 0;
    padding: 12px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-left: 5px solid #2563eb;
    color: #1e3a8a;
    font-size: 13px;
    line-height: 1.4;
    font-weight: 900;
    border-radius: var(--planiq-radius, 0);
}

.admin-cleanup-warning code {
    display: inline-block;
    padding: 2px 5px;
    background: rgba(15, 23, 42, .08);
    border: 1px solid rgba(15, 23, 42, .12);
    color: inherit;
    font-family: Consolas, Monaco, monospace;
    font-size: 12px;
    font-weight: 900;
    border-radius: 4px;
}

/*
|--------------------------------------------------------------------------
| Step81d - Directe module statusknoppen
|--------------------------------------------------------------------------
*/

.module-management-card {
    scroll-margin-top: calc(var(--planiq-topbar-height, 58px) + 18px);
}

.module-status-direct-box {
    display: grid;
    gap: 8px;
    margin: 14px 0;
    padding: 12px;
    background: color-mix(in srgb, var(--theme-color) 7%, var(--app-card));
    border: 1px solid color-mix(in srgb, var(--theme-color) 24%, var(--app-border));
    border-left: 5px solid var(--theme-color);
    border-radius: var(--planiq-radius, 0);
}

.module-status-direct-box strong {
    color: var(--app-text);
    font-size: 13px;
    line-height: 1.2;
    font-weight: 950;
}

.module-status-direct-box small {
    color: var(--app-muted);
    font-size: 11px;
    line-height: 1.35;
    font-weight: 850;
}

.module-status-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.module-status-button {
    min-height: 34px;
    padding: 0 10px;
    background: var(--app-card);
    border: 1px solid var(--app-border);
    color: var(--app-text);
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
    font-weight: 950;
    border-radius: var(--planiq-radius-small, 0);
}

.module-status-button:hover,
.module-status-button:focus,
.module-status-button.is-current {
    border-color: var(--theme-color);
    background: var(--theme-color);
    color: #ffffff;
    outline: none;
}

/*
|--------------------------------------------------------------------------
| Step81e - Statuslinks buiten formulier
|--------------------------------------------------------------------------
*/

.module-management-card {
    scroll-margin-top: calc(var(--planiq-topbar-height, 58px) + 18px);
}

.module-status-link-box {
    display: grid;
    gap: 8px;
    margin: 14px 0;
    padding: 12px;
    background: color-mix(in srgb, var(--theme-color) 7%, var(--app-card));
    border: 1px solid color-mix(in srgb, var(--theme-color) 24%, var(--app-border));
    border-left: 5px solid var(--theme-color);
    border-radius: var(--planiq-radius, 0);
}

.module-status-link-box strong {
    color: var(--app-text);
    font-size: 13px;
    line-height: 1.2;
    font-weight: 950;
}

.module-status-link-box small {
    color: var(--app-muted);
    font-size: 11px;
    line-height: 1.35;
    font-weight: 850;
}

.module-status-links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.module-status-link {
    min-height: 34px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--app-card);
    border: 1px solid var(--app-border);
    color: var(--app-text);
    text-decoration: none;
    font-size: 12px;
    line-height: 1;
    font-weight: 950;
    border-radius: var(--planiq-radius-small, 0);
}

.module-status-link:hover,
.module-status-link:focus,
.module-status-link.is-current {
    border-color: var(--theme-color);
    background: var(--theme-color);
    color: #ffffff;
    outline: none;
    text-decoration: none;
}

/*
|--------------------------------------------------------------------------
| Step84 - Schone modulebeheerpagina
|--------------------------------------------------------------------------
*/

.module-clean-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.module-clean-header h1 {
    margin: 6px 0 4px;
}

.module-clean-header p,
.module-clean-help p {
    margin: 0;
    max-width: 760px;
    color: var(--app-muted);
    font-weight: 850;
}

.module-clean-company {
    min-width: 190px;
    padding: 10px;
    background: color-mix(in srgb, var(--theme-color) 7%, var(--app-card));
    border: 1px solid color-mix(in srgb, var(--theme-color) 22%, var(--app-border));
    border-left: 5px solid var(--theme-color);
}

.module-clean-company strong,
.module-clean-company span {
    display: block;
    font-size: 12px;
    line-height: 1.35;
    font-weight: 950;
}

.module-clean-company span {
    color: var(--app-muted);
}

.module-clean-help {
    border-left: 5px solid var(--theme-color);
}

.module-clean-help strong {
    display: block;
    margin-bottom: 6px;
    color: var(--app-text);
    font-size: 13px;
    font-weight: 950;
}

.module-clean-help b {
    color: var(--app-text);
    font-weight: 950;
}

.module-clean-list {
    display: grid;
    gap: 14px;
}

.module-clean-card {
    scroll-margin-top: calc(var(--planiq-topbar-height, 58px) + 18px);
}

.module-clean-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.module-clean-card-head h2 {
    margin: 5px 0 4px;
    font-size: 21px;
    line-height: 1.05;
    font-weight: 950;
    letter-spacing: -.045em;
}

.module-clean-card-head p {
    margin: 0;
    color: var(--app-muted);
    font-size: 12px;
    line-height: 1.35;
    font-weight: 850;
}

.module-clean-key {
    display: inline-flex;
    min-height: 22px;
    align-items: center;
    padding: 0 7px;
    background: var(--app-bg);
    border: 1px solid var(--app-border);
    color: var(--app-muted);
    font-size: 10px;
    line-height: 1;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.module-clean-status-pill {
    display: inline-flex;
    min-height: 26px;
    align-items: center;
    justify-content: center;
    padding: 0 9px;
    color: #ffffff;
    font-size: 11px;
    line-height: 1;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.module-clean-status-active {
    background: #16a34a;
}

.module-clean-status-disabled {
    background: #64748b;
}

.module-clean-status-hidden {
    background: #dc2626;
}

.module-clean-status-coming_soon {
    background: #f59e0b;
    color: #111827;
}

.module-clean-status-links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 14px;
    padding: 10px;
    background: var(--app-bg);
    border: 1px solid var(--app-border);
}

.module-clean-status-links a {
    min-height: 32px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--app-card);
    border: 1px solid var(--app-border);
    color: var(--app-text);
    text-decoration: none;
    font-size: 12px;
    line-height: 1;
    font-weight: 950;
}

.module-clean-status-links a:hover,
.module-clean-status-links a:focus,
.module-clean-status-links a.is-current {
    background: var(--theme-color);
    border-color: var(--theme-color);
    color: #ffffff;
    text-decoration: none;
    outline: none;
}

.module-clean-form {
    display: grid;
    gap: 12px;
}

.module-clean-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.module-clean-form label {
    display: grid;
    gap: 5px;
    color: var(--app-muted);
    font-size: 11px;
    line-height: 1.2;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .035em;
}

.module-clean-form input[type="text"],
.module-clean-form input[type="number"],
.module-clean-form select,
.module-clean-form textarea {
    width: 100%;
    min-height: 38px;
    padding: 8px 10px;
    background: var(--app-card);
    border: 1px solid var(--app-border);
    color: var(--app-text);
    font-family: inherit;
    font-size: 13px;
    line-height: 1.35;
    font-weight: 850;
    border-radius: var(--planiq-radius-small, 0);
}

.module-clean-form textarea {
    resize: vertical;
}

.module-clean-form input:focus,
.module-clean-form select:focus,
.module-clean-form textarea:focus {
    outline: 2px solid color-mix(in srgb, var(--theme-color) 28%, transparent);
    border-color: var(--theme-color);
}

.module-clean-full {
    width: 100%;
}

.module-clean-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.module-clean-checks label {
    min-height: 34px;
    display: inline-flex;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 7px;
    padding: 0 10px;
    background: var(--app-bg);
    border: 1px solid var(--app-border);
    color: var(--app-text);
    font-size: 12px;
    font-weight: 950;
    text-transform: none;
    letter-spacing: 0;
}

.module-clean-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.module-clean-actions .button-secondary {
    min-height: 40px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--app-card);
    border: 1px solid var(--app-border);
    color: var(--app-text);
    text-decoration: none;
    font-size: 13px;
    font-weight: 950;
}

.module-clean-actions .button-secondary:hover,
.module-clean-actions .button-secondary:focus {
    border-color: var(--theme-color);
    color: var(--theme-color);
    text-decoration: none;
    outline: none;
}

@media (max-width: 900px) {
    .module-clean-header,
    .module-clean-card-head {
        display: grid;
    }

    .module-clean-company {
        min-width: 0;
    }

    .module-clean-grid {
        grid-template-columns: 1fr;
    }

    .module-clean-actions {
        justify-content: stretch;
    }

    .module-clean-actions button,
    .module-clean-actions a {
        width: 100%;
    }
}



/* step96a-contact-triangle */
.step96a-contact-triangle-card {
    margin: 14px 0 18px;
    padding: 16px;
    border: 1px solid rgba(15, 23, 42, 0.10);
    border-radius: var(--plq-radius-lg, 18px);
    background: linear-gradient(135deg, rgba(255,255,255,0.98), rgba(248,250,252,0.94));
    box-shadow: 0 16px 38px rgba(15, 23, 42, 0.08);
}

.step96a-contact-main {
    display: flex;
    gap: 14px;
    align-items: center;
}

.step96a-triangle-wrap {
    width: 78px;
    height: 78px;
    border-radius: 22px;
    background: rgba(15, 23, 42, 0.04);
    display: grid;
    place-items: center;
    flex: 0 0 auto;
}

.step96a-triangle-icon {
    width: 62px;
    height: 58px;
}

.step96a-side {
    stroke: rgba(148, 163, 184, 0.75);
    stroke-width: 9;
    stroke-linecap: round;
}

.step96a-triangle-1 .step96a-side-1,
.step96a-triangle-2 .step96a-side-1,
.step96a-triangle-2 .step96a-side-2,
.step96a-triangle-3 .step96a-side-1,
.step96a-triangle-3 .step96a-side-2,
.step96a-triangle-3 .step96a-side-3 {
    stroke: var(--plq-primary, #2563eb);
}

.step96a-contact-text {
    min-width: 0;
}

.step96a-eyebrow {
    color: var(--plq-primary, #2563eb);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.step96a-contact-text h2 {
    margin: 3px 0 5px;
    color: var(--plq-text, #0f172a);
    font-size: 22px;
    line-height: 1.05;
}

.step96a-contact-text p {
    margin: 0;
    color: var(--plq-muted, #64748b);
    font-size: 13px;
    line-height: 1.35;
}

.step96a-primary-button,
.step96a-secondary-button {
    width: 100%;
    margin-top: 14px;
    min-height: 48px;
    border: 0;
    border-radius: var(--plq-radius-md, 14px);
    font-size: 15px;
    font-weight: 900;
    cursor: pointer;
}

.step96a-primary-button {
    background: var(--plq-primary, #2563eb);
    color: #fff;
    box-shadow: 0 12px 28px rgba(37, 99, 235, 0.22);
}

.step96a-secondary-button {
    background: rgba(15, 23, 42, 0.06);
    color: var(--plq-text, #0f172a);
}

.step96a-sheet-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: rgba(15, 23, 42, 0.42);
    backdrop-filter: blur(3px);
}

.step96a-bottom-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    max-height: 82vh;
    overflow-y: auto;
    padding: 10px 16px 18px;
    border-radius: 24px 24px 0 0;
    background: #fff;
    box-shadow: 0 -20px 60px rgba(15, 23, 42, 0.24);
    transform: translateY(105%);
    transition: transform 180ms ease;
}

.step96a-bottom-sheet[aria-hidden="false"] {
    transform: translateY(0);
}

.step96a-sheet-handle {
    width: 46px;
    height: 5px;
    margin: 2px auto 14px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.75);
}

.step96a-sheet-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.step96a-sheet-header h3 {
    margin: 3px 0 0;
    color: var(--plq-text, #0f172a);
    font-size: 22px;
    line-height: 1.1;
}

.step96a-close-button {
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.06);
    color: var(--plq-text, #0f172a);
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}

.step96a-sheet-step {
    display: none;
}

.step96a-sheet-step.is-active {
    display: block;
}

.step96a-choice-grid,
.step96a-route-list {
    display: grid;
    gap: 10px;
}

.step96a-choice-card,
.step96a-route-card {
    width: 100%;
    min-height: 68px;
    padding: 14px;
    border: 1px solid rgba(15, 23, 42, 0.09);
    border-radius: 16px;
    background: rgba(248, 250, 252, 0.95);
    color: var(--plq-text, #0f172a);
    text-align: left;
    cursor: pointer;
}

.step96a-choice-card strong,
.step96a-route-card strong {
    display: block;
    font-size: 15px;
    font-weight: 900;
    margin-bottom: 4px;
}

.step96a-choice-card span,
.step96a-route-card span {
    display: block;
    color: var(--plq-muted, #64748b);
    font-size: 13px;
    line-height: 1.3;
}

.step96a-route-danger {
    background: rgba(254, 242, 242, 0.95);
}

.step96a-done-text {
    margin: 4px 0 16px;
    color: var(--plq-muted, #64748b);
    font-size: 15px;
    line-height: 1.45;
}

body.step96a-sheet-open {
    overflow: hidden;
}

@media (min-width: 760px) {
    .step96a-bottom-sheet {
        left: 50%;
        right: auto;
        width: min(520px, calc(100vw - 32px));
        transform: translate(-50%, 105%);
    }

    .step96a-bottom-sheet[aria-hidden="false"] {
        transform: translate(-50%, 0);
    }
}
/* /step96a-contact-triangle */


/* step96c-contact-triangle-real */
.step96c-call-card {
    margin: 12px 0 10px;
    padding: 12px;
    border: 1px solid rgba(15, 23, 42, 0.10);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
}

.step96c-call-card.is-quiet {
    background: rgba(248, 250, 252, 0.82);
    box-shadow: none;
}

.step96c-call-card.is-active {
    border-color: rgba(37, 99, 235, 0.22);
}

.step96c-call-main {
    display: flex;
    align-items: center;
    gap: 12px;
}

.step96c-triangle-box {
    width: 58px;
    height: 58px;
    border-radius: 16px;
    background: rgba(15, 23, 42, 0.04);
    display: grid;
    place-items: center;
    flex: 0 0 auto;
}

.step96c-triangle {
    width: 44px;
    height: 42px;
}

.step96c-side {
    stroke: rgba(148, 163, 184, 0.75);
    stroke-width: 9;
    stroke-linecap: round;
}

.step96c-triangle-1 .step96c-side-1,
.step96c-triangle-2 .step96c-side-1,
.step96c-triangle-2 .step96c-side-2,
.step96c-triangle-3 .step96c-side-1,
.step96c-triangle-3 .step96c-side-2,
.step96c-triangle-3 .step96c-side-3 {
    stroke: var(--plq-primary, #2563eb);
}

.step96c-call-text {
    min-width: 0;
    flex: 1;
}

.step96c-eyebrow {
    color: var(--plq-primary, #2563eb);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.step96c-title {
    margin-top: 1px;
    color: var(--plq-text, #0f172a);
    font-size: 17px;
    font-weight: 900;
    line-height: 1.1;
}

.step96c-subline,
.step96c-last {
    margin-top: 3px;
    color: var(--plq-muted, #64748b);
    font-size: 12px;
    line-height: 1.3;
}

.step96c-open-button {
    width: 100%;
    min-height: 44px;
    margin-top: 10px;
    border: 0;
    background: var(--plq-primary, #2563eb);
    color: #fff;
    font-size: 14px;
    font-weight: 900;
    cursor: pointer;
}

.step96c-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: rgba(15, 23, 42, 0.42);
    backdrop-filter: blur(3px);
}

.step96c-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    max-height: 84vh;
    overflow-y: auto;
    padding: 10px 16px 18px;
    border-radius: 24px 24px 0 0;
    background: #fff;
    box-shadow: 0 -20px 60px rgba(15, 23, 42, 0.24);
    transform: translateY(105%);
    transition: transform 180ms ease;
}

.step96c-sheet[aria-hidden="false"] {
    transform: translateY(0);
}

.step96c-sheet-handle {
    width: 46px;
    height: 5px;
    margin: 2px auto 14px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.75);
}

.step96c-sheet-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.step96c-sheet-header h3 {
    margin: 3px 0 0;
    color: var(--plq-text, #0f172a);
    font-size: 22px;
    line-height: 1.1;
}

.step96c-close {
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.06);
    color: var(--plq-text, #0f172a);
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}

.step96c-sheet-step {
    display: none;
}

.step96c-sheet-step.is-active {
    display: block;
}

.step96c-form,
.step96c-route-list form {
    margin: 0;
}

.step96c-choice,
.step96c-route {
    width: 100%;
    min-height: 68px;
    margin: 0 0 10px;
    padding: 14px;
    border: 1px solid rgba(15, 23, 42, 0.09);
    border-radius: 16px;
    background: rgba(248, 250, 252, 0.95);
    color: var(--plq-text, #0f172a);
    text-align: left;
    cursor: pointer;
}

.step96c-choice strong,
.step96c-route strong {
    display: block;
    margin-bottom: 4px;
    font-size: 15px;
    font-weight: 900;
}

.step96c-choice span,
.step96c-route span {
    display: block;
    color: var(--plq-muted, #64748b);
    font-size: 13px;
    line-height: 1.3;
}

.step96c-route.is-danger {
    background: rgba(254, 242, 242, 0.95);
}

.step96c-back-button {
    width: 100%;
    min-height: 44px;
    margin-top: 4px;
    border: 0;
    border-radius: 14px;
    background: rgba(15, 23, 42, 0.06);
    color: var(--plq-text, #0f172a);
    font-size: 14px;
    font-weight: 900;
    cursor: pointer;
}

body.step96c-sheet-open {
    overflow: hidden;
}

@media (min-width: 760px) {
    .step96c-sheet {
        left: 50%;
        right: auto;
        width: min(520px, calc(100vw - 32px));
        transform: translate(-50%, 105%);
    }

    .step96c-sheet[aria-hidden="false"] {
        transform: translate(-50%, 0);
    }
}
/* /step96c-contact-triangle-real */


/* step96d-callflow-ux-cleanup */

/* Klantkaart: belkaart veel compacter */
.step96c-call-card {
    margin: 10px 0 10px !important;
    padding: 10px 12px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(15, 23, 42, 0.10) !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

.step96c-call-main {
    display: grid !important;
    grid-template-columns: 46px 1fr !important;
    align-items: center !important;
    gap: 10px !important;
}

.step96c-triangle-box {
    width: 46px !important;
    height: 46px !important;
    border-radius: 12px !important;
    background: rgba(37, 99, 235, 0.06) !important;
}

.step96c-triangle {
    width: 34px !important;
    height: 32px !important;
}

.step96c-side {
    stroke-width: 8 !important;
}

.step96c-eyebrow {
    font-size: 10px !important;
    line-height: 1.1 !important;
    letter-spacing: 0.12em !important;
}

.step96c-title {
    font-size: 18px !important;
    line-height: 1.1 !important;
    margin-top: 2px !important;
}

.step96c-subline {
    font-size: 12px !important;
    line-height: 1.25 !important;
    margin-top: 3px !important;
    color: #64748b !important;
}

.step96c-last {
    font-size: 12px !important;
    line-height: 1.25 !important;
    margin-top: 2px !important;
    color: #64748b !important;
}

.step96c-open-button {
    min-height: 42px !important;
    margin-top: 10px !important;
    border-radius: 0 !important;
    font-size: 14px !important;
    letter-spacing: 0.01em !important;
}

/* Bottom sheet: app-achtig en rustiger */
.step96c-backdrop {
    background: rgba(15, 23, 42, 0.48) !important;
}

.step96c-sheet {
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: auto !important;
    max-height: 82vh !important;
    padding: 10px 18px 22px !important;
    border-radius: 28px 28px 0 0 !important;
    background: #ffffff !important;
    transform: translateY(105%) !important;
}

.step96c-sheet[aria-hidden="false"] {
    transform: translateY(0) !important;
}

.step96c-sheet-handle {
    width: 42px !important;
    height: 5px !important;
    margin: 2px auto 18px !important;
    border-radius: 999px !important;
    background: rgba(148, 163, 184, 0.95) !important;
}

.step96c-sheet-header {
    margin-bottom: 16px !important;
}

.step96c-sheet-header h3 {
    font-size: 25px !important;
    line-height: 1.08 !important;
    margin: 4px 0 0 !important;
    letter-spacing: -0.03em !important;
}

.step96c-close {
    width: 44px !important;
    height: 44px !important;
    border-radius: 0 !important;
    font-size: 30px !important;
    font-weight: 900 !important;
    background: #f1f5f9 !important;
}

/* Keuzekaarten: titel en uitleg altijd netjes onder elkaar */
.step96c-choice,
.step96c-route {
    display: block !important;
    width: 100% !important;
    min-height: auto !important;
    margin: 0 0 10px !important;
    padding: 15px 16px !important;
    border: 1px solid #dbe3ef !important;
    border-radius: 0 !important;
    background: #f8fafc !important;
    color: #0f172a !important;
    text-align: left !important;
    box-shadow: none !important;
}

.step96c-choice strong,
.step96c-route strong {
    display: block !important;
    width: 100% !important;
    margin: 0 0 6px !important;
    padding: 0 !important;
    color: #0f172a !important;
    font-size: 17px !important;
    line-height: 1.18 !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    white-space: normal !important;
}

.step96c-choice span,
.step96c-route span {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #64748b !important;
    font-size: 13px !important;
    line-height: 1.32 !important;
    font-weight: 700 !important;
    white-space: normal !important;
}

.step96c-route.is-danger {
    background: #fff5f5 !important;
    border-color: #fecaca !important;
}

.step96c-back-button {
    border-radius: 0 !important;
    min-height: 42px !important;
}

/* Desktop: sheet niet overdreven breed */
@media (min-width: 760px) {
    .step96c-sheet {
        left: 50% !important;
        right: auto !important;
        width: min(480px, calc(100vw - 40px)) !important;
        transform: translate(-50%, 105%) !important;
    }

    .step96c-sheet[aria-hidden="false"] {
        transform: translate(-50%, 0) !important;
    }
}

/* Mobiel: net iets grotere klikvlakken */
@media (max-width: 520px) {
    .step96c-sheet {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .step96c-sheet-header h3 {
        font-size: 24px !important;
    }

    .step96c-choice,
    .step96c-route {
        padding: 16px 14px !important;
    }
}
/* /step96d-callflow-ux-cleanup */


/* step96f-call-card-hard-refine */
.step96c-call-card {
    margin: 10px 0 10px !important;
    padding: 12px !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    box-shadow: none !important;
}

.step96c-call-main {
    display: grid !important;
    grid-template-columns: 54px 1fr !important;
    gap: 12px !important;
    align-items: center !important;
}

.step96c-triangle-box {
    position: relative !important;
    width: 52px !important;
    height: 52px !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.10) !important;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05) !important;
}

.step96c-triangle {
    width: 38px !important;
    height: 36px !important;
}

.step96c-side {
    stroke-width: 8 !important;
}

.step96c-attempt-badge {
    position: absolute !important;
    right: -8px !important;
    bottom: -8px !important;
    min-width: 31px !important;
    height: 22px !important;
    padding: 0 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    background: var(--plq-primary, #2563eb) !important;
    color: #ffffff !important;
    font-size: 11px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    border: 2px solid #ffffff !important;
    letter-spacing: 0 !important;
}

.step96c-eyebrow {
    font-size: 10px !important;
    line-height: 1.1 !important;
    letter-spacing: 0.13em !important;
}

.step96c-title {
    margin-top: 2px !important;
    font-size: 19px !important;
    line-height: 1.08 !important;
    font-weight: 900 !important;
    letter-spacing: -0.02em !important;
}

.step96c-subline,
.step96c-last {
    margin-top: 4px !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
    color: #64748b !important;
}

.step96c-open-button {
    min-height: 40px !important;
    margin-top: 11px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
}
/* /step96f-call-card-hard-refine */


/* step96g-call-card-theme-clean */

/*
   Belkaart volgt vanaf nu zoveel mogelijk de centrale kaartstijl.
   Fallbacks staan erbij voor als een variabele nog niet bestaat.
*/
.step96c-call-card {
    margin: 10px 0 10px !important;
    padding: 12px !important;
    background: var(--plq-card-bg, var(--card-bg, #ffffff)) !important;
    border: 1px solid var(--plq-card-border, var(--card-border, rgba(15, 23, 42, 0.10))) !important;
    border-radius: var(--plq-card-radius, var(--plq-radius-card, var(--plq-radius, 0px))) !important;
    box-shadow: none !important;
    color: var(--plq-text, var(--text-color, #0f172a)) !important;
}

.step96c-call-card.is-quiet,
.step96c-call-card.is-active {
    background: var(--plq-card-bg, var(--card-bg, #ffffff)) !important;
    border-color: var(--plq-card-border, var(--card-border, rgba(15, 23, 42, 0.10))) !important;
}

/* Driehoek zonder eigen kader of grijze tegel */
.step96c-triangle-box {
    position: relative !important;
    width: 48px !important;
    height: 48px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    display: grid !important;
    place-items: center !important;
}

.step96c-triangle {
    width: 42px !important;
    height: 40px !important;
}

.step96c-side {
    stroke-width: 8 !important;
}

/* 0/3 badge weg; de driehoek zelf is leidend */
.step96c-attempt-badge {
    display: none !important;
}

/* Teksten gelijk trekken met klantkaart */
.step96c-eyebrow {
    color: var(--plq-primary, var(--primary-color, #2563eb)) !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
    letter-spacing: 0.14em !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
}

.step96c-title {
    margin-top: 2px !important;
    color: var(--plq-text, var(--text-color, #0f172a)) !important;
    font-size: 18px !important;
    line-height: 1.12 !important;
    font-weight: 900 !important;
    letter-spacing: -0.01em !important;
}

.step96c-subline,
.step96c-last {
    color: var(--plq-muted, var(--muted-color, #64748b)) !important;
    font-size: 12px !important;
    line-height: 1.28 !important;
    font-weight: 700 !important;
}

/* Knop volgt thema en radius-instelling */
.step96c-open-button {
    min-height: 40px !important;
    margin-top: 11px !important;
    background: var(--plq-primary, var(--primary-color, #2563eb)) !important;
    color: #ffffff !important;
    border: 0 !important;
    border-radius: var(--plq-button-radius, var(--plq-radius-button, var(--plq-radius, 0px))) !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    box-shadow: none !important;
}

/* Bottom sheet volgt ook thema beter */
.step96c-sheet {
    background: var(--plq-card-bg, var(--card-bg, #ffffff)) !important;
    color: var(--plq-text, var(--text-color, #0f172a)) !important;
}

.step96c-choice,
.step96c-route {
    background: var(--plq-soft-bg, var(--soft-bg, #f8fafc)) !important;
    border-color: var(--plq-card-border, var(--card-border, #dbe3ef)) !important;
    border-radius: var(--plq-card-radius, var(--plq-radius-card, var(--plq-radius, 0px))) !important;
    color: var(--plq-text, var(--text-color, #0f172a)) !important;
}

.step96c-choice strong,
.step96c-route strong {
    color: var(--plq-text, var(--text-color, #0f172a)) !important;
}

.step96c-choice span,
.step96c-route span {
    color: var(--plq-muted, var(--muted-color, #64748b)) !important;
}

/* /step96g-call-card-theme-clean */


/* step96i-hide-zero-call-card */

/*
   Belkaart is pas opvolgkaart vanaf eerste belpoging.
   Bij 0/3 blijft de klantkaart rustig; telefoonicoon opent de flow.
*/
.step96c-call-card.is-zero {
    display: none !important;
}

/*
   Vanaf 1/3 wél zichtbaar: dan is er iets te bewaken.
*/
.step96c-call-card.is-active {
    display: block !important;
}

/*
   De verborgen open-button blijft technisch in de DOM,
   zodat het telefoonicoon de bottom-sheet kan blijven openen.
*/
.step96c-open-button {
    display: none !important;
}

/* /step96i-hide-zero-call-card */


/* step96j-hard-hide-zero-call-card */

/*
   De belkaart is géén startblok.
   Hij wordt pas zichtbaar na eerste belpoging.
*/
.step96c-call-card.is-quiet,
.step96c-call-card.is-zero {
    display: none !important;
}

/*
   Vanaf 1/3 is het een echte opvolgkaart en moet hij zichtbaar zijn.
*/
.step96c-call-card.is-active {
    display: block !important;
}

/*
   De oude losse knop blijft verborgen.
   De telefoonactie opent de flow.
*/
.step96c-open-button {
    display: none !important;
}

/* /step96j-hard-hide-zero-call-card */


/* step96k-phone-opens-sheet-first */

/*
   Belkaart pas na eerste belpoging.
*/
.step96c-call-card.is-quiet,
.step96c-call-card.is-zero {
    display: none !important;
}

.step96c-call-card.is-active {
    display: block !important;
}

/*
   Losse Belmoment-knop blijft verborgen.
   De telefoonactie opent de flow.
*/
.step96c-open-button {
    display: none !important;
}

/*
   Nieuwe knop in bottom-sheet om echt te bellen.
*/
.step96k-call-now {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 54px !important;
    width: 100% !important;
    margin: 0 0 12px !important;
    padding: 0 16px !important;
    background: var(--plq-primary, var(--primary-color, #2563eb)) !important;
    color: #ffffff !important;
    border: 0 !important;
    border-radius: var(--plq-button-radius, var(--plq-radius-button, var(--plq-radius, 0px))) !important;
    font-size: 17px !important;
    font-weight: 900 !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

/* /step96k-phone-opens-sheet-first */


/* step96l-hide-no-answer-title */

/*
   Bij geen gehoor is de pogingtekst dubbelop:
   de driehoek toont al 1/3, 2/3 of 3/3.
*/
.step96c-state-no_answer_1 .step96c-title,
.step96c-state-no_answer_2 .step96c-title,
.step96c-state-no_answer_3 .step96c-title {
    display: none !important;
}

/*
   Als de titel verdwijnt, mag de rest iets dichter op elkaar.
*/
.step96c-state-no_answer_1 .step96c-subline,
.step96c-state-no_answer_2 .step96c-subline,
.step96c-state-no_answer_3 .step96c-subline,
.step96c-state-no_answer_1 .step96c-last,
.step96c-state-no_answer_2 .step96c-last,
.step96c-state-no_answer_3 .step96c-last {
    margin-top: 2px !important;
}

/* /step96l-hide-no-answer-title */


/* step97a-archive-to-menu */
.step97a-archive-menu-link {
    display: flex;
}
/* /step97a-archive-to-menu */


/* step97b-action-tabs */
.step97b-tab {
    display: inline-flex;
}
/* /step97b-action-tabs */


/* step97c-rename-tasks-to-followup */
/* Geen extra styling nodig; alleen labelwijziging. */
/* /step97c-rename-tasks-to-followup */


/* step97e-hard-mobile-overflow-fix */

body.step97e-workboard-page,
body.step97e-workboard-page * {
    box-sizing: border-box !important;
}

body.step97e-workboard-page {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
}

body.step97e-workboard-page .step97e-workboard-main,
body.step97e-workboard-page main,
body.step97e-workboard-page .content,
body.step97e-workboard-page .page,
body.step97e-workboard-page .container,
body.step97e-workboard-page .app-content {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
}

/* Hard: tabparent mag nooit breder worden dan scherm */
body.step97e-workboard-page .step97e-tabs-parent {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

/* Hard: tabs als één horizontale scrollrij */
body.step97e-workboard-page .step97e-tabs-scroll {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding: 8px 10px !important;
}

body.step97e-workboard-page .step97e-tabs-scroll::-webkit-scrollbar {
    display: none !important;
}

body.step97e-workboard-page .step97e-tabs-scroll .step97e-tab-pill,
body.step97e-workboard-page .step97e-tabs-scroll a,
body.step97e-workboard-page .step97e-tabs-scroll button {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    width: auto !important;
    min-width: auto !important;
    max-width: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Hard: kaarten mogen niet rechts buiten beeld */
body.step97e-workboard-page .step97e-safe-width,
body.step97e-workboard-page .card,
body.step97e-workboard-page .lead-card,
body.step97e-workboard-page .lead-item,
body.step97e-workboard-page .customer-card,
body.step97e-workboard-page .workboard-card,
body.step97e-workboard-page .lead-row,
body.step97e-workboard-page article,
body.step97e-workboard-page section {
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
}

/* Grid/flex children moeten mogen krimpen */
body.step97e-workboard-page .grid,
body.step97e-workboard-page .row,
body.step97e-workboard-page .lead-list,
body.step97e-workboard-page .list,
body.step97e-workboard-page [class*="grid"],
body.step97e-workboard-page [class*="row"],
body.step97e-workboard-page [class*="list"] {
    max-width: 100% !important;
    min-width: 0 !important;
}

body.step97e-workboard-page .grid > *,
body.step97e-workboard-page .row > *,
body.step97e-workboard-page .lead-list > *,
body.step97e-workboard-page .list > *,
body.step97e-workboard-page [class*="grid"] > *,
body.step97e-workboard-page [class*="row"] > *,
body.step97e-workboard-page [class*="list"] > * {
    min-width: 0 !important;
    max-width: 100% !important;
}

/* Lange tekst mag breken */
body.step97e-workboard-page h1,
body.step97e-workboard-page h2,
body.step97e-workboard-page h3,
body.step97e-workboard-page h4,
body.step97e-workboard-page p,
body.step97e-workboard-page a,
body.step97e-workboard-page span,
body.step97e-workboard-page div {
    overflow-wrap: anywhere !important;
    word-break: normal !important;
}

/* Mobiel extra hard */
@media (max-width: 760px) {
    body.step97e-workboard-page {
        position: relative !important;
        overflow-x: hidden !important;
    }

    body.step97e-workboard-page .step97e-workboard-main,
    body.step97e-workboard-page main,
    body.step97e-workboard-page .content,
    body.step97e-workboard-page .page,
    body.step97e-workboard-page .container,
    body.step97e-workboard-page .app-content {
        padding-left: 8px !important;
        padding-right: 8px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    body.step97e-workboard-page .step97e-tabs-scroll {
        margin-left: -8px !important;
        margin-right: -8px !important;
        width: calc(100% + 16px) !important;
        max-width: calc(100% + 16px) !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    body.step97e-workboard-page .step97e-tabs-scroll a,
    body.step97e-workboard-page .step97e-tabs-scroll button {
        min-height: 42px !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    body.step97e-workboard-page .step97e-safe-width,
    body.step97e-workboard-page .card,
    body.step97e-workboard-page .lead-card,
    body.step97e-workboard-page .lead-item,
    body.step97e-workboard-page .customer-card,
    body.step97e-workboard-page .workboard-card,
    body.step97e-workboard-page article,
    body.step97e-workboard-page section {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* /step97e-hard-mobile-overflow-fix */


/* step97g-tab-count-badges */
.step97g-tab-with-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.step97g-tab-label {
    display: inline-flex !important;
    align-items: center !important;
}

.step97g-tab-count {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 24px !important;
    height: 24px !important;
    padding: 0 7px !important;
    border-radius: var(--plq-pill-radius, var(--plq-radius-pill, 999px)) !important;
    background: var(--plq-primary, var(--primary-color, #2563eb)) !important;
    color: #ffffff !important;
    font-size: 12px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
}

.step97g-tab-with-badge.is-active .step97g-tab-count,
.step97g-tab-with-badge.active .step97g-tab-count,
.step97g-tab-with-badge.current .step97g-tab-count {
    background: #ffffff !important;
    color: var(--plq-primary, var(--primary-color, #2563eb)) !important;
}

/* Als actieve tab donker/groen is, blijft badge leesbaar */
.step97g-tab-with-badge[aria-current="page"] .step97g-tab-count {
    background: #ffffff !important;
    color: var(--plq-primary, var(--primary-color, #2563eb)) !important;
}

@media (max-width: 760px) {
    .step97g-tab-with-badge {
        gap: 7px !important;
    }

    .step97g-tab-count {
        min-width: 22px !important;
        height: 22px !important;
        font-size: 11px !important;
        padding: 0 6px !important;
    }
}
/* /step97g-tab-count-badges */


/* step97h-clean-tabs-badges */
.step97h-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
}

.step97h-tabs::-webkit-scrollbar {
    display: none !important;
}

.step97h-tabs .step97h-tab {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
}

/* Rustigere badge dan de grote ronde bol */
.step97h-tab-with-badge,
.step97g-tab-with-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.step97h-tab-label,
.step97g-tab-label {
    display: inline-flex !important;
    align-items: center !important;
}

.step97h-tab-count,
.step97g-tab-count {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 20px !important;
    height: 20px !important;
    padding: 0 6px !important;
    border-radius: var(--plq-pill-radius, var(--plq-radius-pill, 999px)) !important;
    background: var(--plq-primary, var(--primary-color, #2563eb)) !important;
    color: #ffffff !important;
    font-size: 11px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
}

/* Actieve tab: badge rustiger in wit */
.step97h-tab-with-badge.is-active .step97h-tab-count,
.step97h-tab-with-badge.active .step97h-tab-count,
.step97h-tab-with-badge.current .step97h-tab-count,
.step97g-tab-with-badge.is-active .step97g-tab-count,
.step97g-tab-with-badge.active .step97g-tab-count,
.step97g-tab-with-badge.current .step97g-tab-count {
    background: #ffffff !important;
    color: var(--plq-primary, var(--primary-color, #2563eb)) !important;
}

/* Mobiel: nog compacter */
@media (max-width: 760px) {
    .step97h-tabs {
        gap: 7px !important;
    }

    .step97h-tab-with-badge,
    .step97g-tab-with-badge {
        gap: 5px !important;
    }

    .step97h-tab-count,
    .step97g-tab-count {
        min-width: 18px !important;
        height: 18px !important;
        padding: 0 5px !important;
        font-size: 10px !important;
    }
}
/* /step97h-clean-tabs-badges */


/* step97i-hide-empty-action-tabs */
.step97i-action-tabs-only {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
}

.step97i-action-tabs-only::-webkit-scrollbar {
    display: none !important;
}

.step97i-visible-action-tab,
.step97i-tab-with-badge {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.step97i-tab-label {
    display: inline-flex !important;
    align-items: center !important;
}

.step97i-tab-count {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 20px !important;
    height: 20px !important;
    padding: 0 6px !important;
    border-radius: var(--plq-pill-radius, var(--plq-radius-pill, 999px)) !important;
    background: var(--plq-primary, var(--primary-color, #2563eb)) !important;
    color: #ffffff !important;
    font-size: 11px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
}

@media (max-width: 760px) {
    .step97i-action-tabs-only {
        gap: 7px !important;
    }

    .step97i-tab-count {
        min-width: 18px !important;
        height: 18px !important;
        padding: 0 5px !important;
        font-size: 10px !important;
    }
}
/* /step97i-hide-empty-action-tabs */


/* step97j-real-workboard-filters */
.step97j-active-tab {
    outline: 2px solid var(--plq-primary, var(--primary-color, #2563eb)) !important;
    outline-offset: 0 !important;
}

.step97j-empty-message {
    margin: 14px 0;
    padding: 18px;
    border: 1px solid var(--plq-card-border, var(--card-border, rgba(15, 23, 42, 0.10)));
    background: var(--plq-card-bg, var(--card-bg, #ffffff));
    color: var(--plq-muted, var(--muted-color, #64748b));
    font-size: 15px;
    font-weight: 800;
    text-align: center;
}
/* /step97j-real-workboard-filters */


/* step97k-server-side-workboard-filters */
.customer-card-label {
    max-width: 100%;
}
/* /step97k-server-side-workboard-filters */


/* step97l-rollback-filterpatch */
.step97j-empty-message {
    display: none !important;
}

.step97j-active-tab {
    outline: none !important;
}
/* /step97l-rollback-filterpatch */


/* step97n-clean-server-workboard */
.step97n-board {
    max-width: 100%;
    overflow-x: hidden;
}

.step97n-board-toolbar {
    max-width: 100%;
    overflow: hidden;
}

.step97n-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
}

.step97n-tabs::-webkit-scrollbar {
    display: none !important;
}

.step97n-tab {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    white-space: nowrap !important;
}

.step97n-tab-count {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 20px !important;
    height: 20px !important;
    padding: 0 6px !important;
    border-radius: var(--plq-pill-radius, var(--plq-radius-pill, 999px)) !important;
    background: var(--plq-primary, var(--primary-color, #2563eb)) !important;
    color: #ffffff !important;
    font-size: 11px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
}

.step97n-tab.is-active .step97n-tab-count {
    background: #ffffff !important;
    color: var(--plq-primary, var(--primary-color, #2563eb)) !important;
}

.step97n-empty {
    text-align: center;
}

@media (max-width: 760px) {
    .step97n-board,
    .step97n-board-toolbar,
    .customer-board,
    .customer-board-sections,
    .customer-board-section,
    .customer-board-list,
    .customer-card {
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .step97n-tab-count {
        min-width: 18px !important;
        height: 18px !important;
        padding: 0 5px !important;
        font-size: 10px !important;
    }
}
/* /step97n-clean-server-workboard */


/* step98a-callflow-status-mapping */
.customer-card-status.is-action {
    background: var(--app-orange, #f59e0b);
    color: #ffffff;
}

.customer-card-status.is-memo {
    background: var(--plq-primary, var(--primary-color, #2563eb));
    color: #ffffff;
}
/* /step98a-callflow-status-mapping */


/* Step99C2 - statuspotloodje klantkaart */
.step99c2-hero-tools {
    gap: 8px;
}

.step99c2-hero-tools .lead-view-edit-link {
    border: 1px solid var(--plq-border, #dbe2ea);
    background: #f8fafc;
    color: #334155;
    cursor: pointer;
}

.step99c2-status-open {
    font-family: inherit;
}

.step99c2-status-backdrop {
    position: fixed;
    inset: 0;
    z-index: 70;
    background: rgba(15, 23, 42, .38);
}

.step99c2-status-sheet {
    position: fixed;
    left: 50%;
    bottom: 0;
    z-index: 80;
    width: min(720px, calc(100% - 20px));
    max-height: 82vh;
    overflow: auto;
    transform: translate(-50%, 105%);
    background: #fff;
    border: 1px solid #dbe2ea;
    border-bottom: 0;
    box-shadow: 0 -20px 55px rgba(15, 23, 42, .20);
    padding: 14px;
    transition: transform .18s ease;
}

.step99c2-status-sheet[aria-hidden="false"] {
    transform: translate(-50%, 0);
}

.step99c2-status-sheet-handle {
    width: 52px;
    height: 5px;
    background: #cbd5e1;
    margin: 0 auto 12px;
}

.step99c2-status-sheet-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 12px;
}

.step99c2-status-sheet-head h3 {
    margin: 0;
    font-size: 26px;
    line-height: 1;
    letter-spacing: -.055em;
    font-weight: 950;
}

.step99c2-status-sheet-head p {
    margin: 5px 0 0;
    color: #64748b;
    font-size: 12px;
    font-weight: 850;
}

.step99c2-status-close {
    width: 42px;
    height: 42px;
    border: 1px solid #dbe2ea;
    background: #f8fafc;
    font-size: 26px;
    line-height: 1;
    font-weight: 900;
    cursor: pointer;
}

.step99c2-status-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.step99c2-status-choice {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 46px;
    padding: 10px;
    border: 1px solid #dbe2ea;
    background: #f8fafc;
    font-size: 12px;
    font-weight: 950;
    cursor: pointer;
}

.step99c2-status-choice.is-current {
    border-color: #2563eb;
    background: #eff6ff;
    color: #1d4ed8;
}

.step99c2-status-choice input {
    margin: 0;
}

.step99c2-status-save {
    width: 100%;
    margin-top: 12px;
}

.step99c2-status-note {
    margin-top: 10px;
}

@media (max-width: 560px) {
    .step99c2-status-grid {
        grid-template-columns: 1fr;
    }

    .step99c2-status-sheet {
        width: 100%;
        max-height: 86vh;
        padding: 12px;
    }
}


/* Step99C4 - klant bewerken terug op klantkaart */
.step99c4-customer-edit-row {
    display: flex;
    justify-content: flex-end;
    margin: 8px 0 0;
}

.step99c4-customer-edit-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid #dbe2ea;
    background: #f8fafc;
    color: #334155;
    text-decoration: none;
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.step99c4-customer-edit-button:hover {
    background: #eef2f7;
}


/* Step99E - één potlood voor klantkaart bewerken */
.step99e-hero-tools { gap: 8px; }
.step99e-edit-open {
    border: 1px solid var(--plq-border, #dbe2ea);
    background: #f8fafc;
    color: #334155;
    cursor: pointer;
    font-family: inherit;
}
.step99e-edit-backdrop {
    position: fixed;
    inset: 0;
    z-index: 70;
    background: rgba(15, 23, 42, .38);
}
.step99e-edit-sheet {
    position: fixed;
    left: 50%;
    bottom: 0;
    z-index: 80;
    width: min(760px, calc(100% - 20px));
    max-height: 86vh;
    overflow: auto;
    transform: translate(-50%, 105%);
    background: #fff;
    border: 1px solid #dbe2ea;
    border-bottom: 0;
    box-shadow: 0 -20px 55px rgba(15, 23, 42, .20);
    padding: 14px;
    transition: transform .18s ease;
}
.step99e-edit-sheet[aria-hidden="false"] { transform: translate(-50%, 0); }
.step99e-edit-sheet-handle {
    width: 52px;
    height: 5px;
    background: #cbd5e1;
    margin: 0 auto 12px;
}
.step99e-edit-sheet-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 12px;
}
.step99e-edit-sheet-head h3 {
    margin: 0;
    font-size: 26px;
    line-height: 1;
    letter-spacing: -.055em;
    font-weight: 950;
}
.step99e-edit-sheet-head p {
    margin: 5px 0 0;
    color: #64748b;
    font-size: 12px;
    font-weight: 850;
}
.step99e-edit-close {
    width: 42px;
    height: 42px;
    border: 1px solid #dbe2ea;
    background: #f8fafc;
    font-size: 26px;
    line-height: 1;
    font-weight: 900;
    cursor: pointer;
}
.step99e-edit-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.step99e-edit-field {
    display: grid;
    gap: 5px;
    font-size: 11px;
    font-weight: 950;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.step99e-edit-field.is-full { grid-column: 1 / -1; }
.step99e-edit-field input,
.step99e-edit-field select,
.step99e-edit-field textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #dbe2ea;
    background: #fff;
    color: #0f172a;
    min-height: 42px;
    padding: 9px 10px;
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    text-transform: none;
    letter-spacing: 0;
}
.step99e-edit-field textarea {
    min-height: 120px;
    resize: vertical;
}
.step99e-edit-save {
    width: 100%;
    margin-top: 12px;
}
@media (max-width: 560px) {
    .step99e-edit-grid { grid-template-columns: 1fr; }
    .step99e-edit-sheet {
        width: 100%;
        max-height: 88vh;
        padding: 12px;
    }
}


/* --------------------------------------------------------------------------
   Step101A - globale werkbord zoekfunctie
   -------------------------------------------------------------------------- */

.customer-board-search {
    margin: 12px 0 14px;
}

.customer-board-search-box {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 64px;
    background: var(--card-bg, #fff);
    border: 1px solid var(--border-color, #dbe2ea);
    border-radius: var(--radius-lg, 18px);
    box-shadow: 0 16px 42px rgba(15, 23, 42, .06);
    overflow: hidden;
}

.customer-board-search-box::before {
    content: "";
    position: absolute;
    inset: -1px;
    pointer-events: none;
    border-radius: inherit;
    background: linear-gradient(
        90deg,
        var(--theme-color, #2563eb),
        var(--theme-accent-color, #22c55e),
        var(--theme-color, #2563eb)
    );
    background-size: 220% 100%;
    opacity: 0;
    transition: opacity .18s ease;
    z-index: 0;
}

.customer-board-search-box:focus-within::before {
    opacity: 1;
    animation: customerBoardSearchBorder 2.4s linear infinite;
}

.customer-board-search-box:focus-within {
    border-color: transparent;
}

.customer-board-search-box > * {
    position: relative;
    z-index: 1;
}

.customer-board-search-icon {
    display: inline-flex;
    width: 56px;
    justify-content: center;
    color: var(--muted-color, #64748b);
    font-size: 30px;
    font-weight: 600;
}

.customer-board-search-input {
    flex: 1;
    width: 100%;
    min-width: 0;
    min-height: 62px;
    border: 0;
    outline: 0;
    background: var(--card-bg, #fff);
    color: var(--text-color, #0f172a);
    font: inherit;
    font-size: clamp(20px, 4.5vw, 30px);
    font-weight: 900;
    letter-spacing: -.045em;
    padding: 0 16px 0 0;
}

.customer-board-search-input::placeholder {
    color: color-mix(in srgb, var(--muted-color, #64748b) 70%, transparent);
    opacity: 1;
}

.customer-board-search-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-right: 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--border-color, #dbe2ea) 55%, transparent);
    color: var(--muted-color, #64748b);
    text-decoration: none;
    font-size: 28px;
    font-weight: 900;
    line-height: 1;
}

.customer-board-search-result {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin: -2px 0 14px;
    color: var(--muted-color, #64748b);
    font-size: 13px;
    font-weight: 850;
}

.customer-board-search-result strong,
.customer-board-search-result span {
    color: var(--text-color, #0f172a);
    font-weight: 950;
}

@keyframes customerBoardSearchBorder {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 220% 50%;
    }
}

@media (max-width: 560px) {
    .customer-board-search-box {
        min-height: 56px;
    }

    .customer-board-search-icon {
        width: 48px;
        font-size: 25px;
    }

    .customer-board-search-input {
        min-height: 54px;
        font-size: 20px;
        letter-spacing: -.035em;
    }
}



/* --------------------------------------------------------------------------
   Step101B - zoekbalk styling cache fix
   -------------------------------------------------------------------------- */

.customer-board-search {
    margin: 12px 0 14px;
}

.customer-board-search-box {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 64px;
    background: var(--card-bg, #fff);
    border: 1px solid var(--border-color, #dbe2ea);
    border-radius: var(--radius-lg, 18px);
    box-shadow: 0 16px 42px rgba(15, 23, 42, .06);
    overflow: hidden;
}

.customer-board-search-box::before {
    content: "";
    position: absolute;
    inset: -1px;
    pointer-events: none;
    border-radius: inherit;
    background: linear-gradient(
        90deg,
        var(--theme-color, #2563eb),
        var(--theme-accent-color, #22c55e),
        var(--theme-color, #2563eb)
    );
    background-size: 220% 100%;
    opacity: 0;
    transition: opacity .18s ease;
    z-index: 0;
}

.customer-board-search-box:focus-within::before {
    opacity: 1;
    animation: customerBoardSearchBorder 2.4s linear infinite;
}

.customer-board-search-box:focus-within {
    border-color: transparent;
}

.customer-board-search-box > * {
    position: relative;
    z-index: 1;
}

.customer-board-search-icon {
    display: inline-flex;
    width: 56px;
    justify-content: center;
    color: var(--muted-color, #64748b);
    font-size: 30px;
    font-weight: 600;
}

.customer-board-search-input {
    flex: 1;
    width: 100%;
    min-width: 0;
    min-height: 62px;
    border: 0;
    outline: 0;
    background: var(--card-bg, #fff);
    color: var(--text-color, #0f172a);
    font: inherit;
    font-size: clamp(20px, 4.5vw, 30px);
    font-weight: 900;
    letter-spacing: -.045em;
    padding: 0 16px 0 0;
}

.customer-board-search-input::placeholder {
    color: #94a3b8;
    opacity: 1;
}

.customer-board-search-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-right: 10px;
    border-radius: 999px;
    background: #eef2f7;
    color: var(--muted-color, #64748b);
    text-decoration: none;
    font-size: 28px;
    font-weight: 900;
    line-height: 1;
}

.customer-board-search-result {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin: -2px 0 14px;
    color: var(--muted-color, #64748b);
    font-size: 13px;
    font-weight: 850;
}

.customer-board-search-result strong,
.customer-board-search-result span {
    color: var(--text-color, #0f172a);
    font-weight: 950;
}

@keyframes customerBoardSearchBorder {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 220% 50%;
    }
}

@media (max-width: 560px) {
    .customer-board-search-box {
        min-height: 56px;
    }

    .customer-board-search-icon {
        width: 48px;
        font-size: 25px;
    }

    .customer-board-search-input {
        min-height: 54px;
        font-size: 20px;
        letter-spacing: -.035em;
    }
}

/* --------------------------------------------------------------------------
   Step101C - zoekbalk dynamische stijlcorrectie
   --------------------------------------------------------------------------
   Doel:
   - geen groen gevuld vlak achter het icoon
   - bewegende focus alleen als rand
   - radius/kleuren uit centrale theme variabelen
   -------------------------------------------------------------------------- */

.customer-board-search {
    margin: var(--space-3, 12px) 0 var(--space-4, 14px);
}

.customer-board-search-box {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 64px;
    background: var(--card-bg, var(--theme-card-color, #ffffff));
    border: 1px solid var(--border-color, var(--theme-border-color, #dbe2ea));
    border-radius: var(--radius-lg, var(--theme-radius-lg, 18px));
    box-shadow: 0 16px 42px rgba(15, 23, 42, .06);
    overflow: hidden;
    isolation: isolate;
}

.customer-board-search-box::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    padding: 2px;
    background: linear-gradient(
        90deg,
        var(--theme-color, var(--primary-color, #2563eb)),
        var(--theme-accent-color, var(--accent-color, #22c55e)),
        var(--theme-color, var(--primary-color, #2563eb))
    );
    background-size: 240% 100%;
    opacity: 0;
    transition: opacity .18s ease;
    z-index: 3;

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask-composite: exclude;
}

.customer-board-search-box:focus-within {
    border-color: transparent;
}

.customer-board-search-box:focus-within::before {
    opacity: 1;
    animation: customerBoardSearchBorder 2.4s linear infinite;
}

.customer-board-search-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 56px;
    width: 56px;
    min-height: 62px;
    background: var(--card-bg, var(--theme-card-color, #ffffff));
    color: var(--muted-color, var(--theme-muted-color, #64748b));
    font-size: 30px;
    font-weight: 700;
    z-index: 2;
}

.customer-board-search-input {
    position: relative;
    z-index: 2;
    flex: 1;
    width: 100%;
    min-width: 0;
    min-height: 62px;
    border: 0;
    outline: 0;
    background: var(--card-bg, var(--theme-card-color, #ffffff));
    color: var(--text-color, var(--theme-text-color, #0f172a));
    font: inherit;
    font-size: clamp(20px, 4.5vw, 30px);
    font-weight: 900;
    letter-spacing: -.045em;
    padding: 0 16px 0 0;
}

.customer-board-search-input::placeholder {
    color: var(--muted-color, var(--theme-muted-color, #64748b));
    opacity: .68;
}

.customer-board-search-clear {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    margin-right: 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--border-color, var(--theme-border-color, #dbe2ea)) 55%, transparent);
    color: var(--muted-color, var(--theme-muted-color, #64748b));
    text-decoration: none;
    font-size: 28px;
    font-weight: 900;
    line-height: 1;
}

.customer-board-search-result {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin: -2px 0 14px;
    color: var(--muted-color, var(--theme-muted-color, #64748b));
    font-size: 13px;
    font-weight: 850;
}

.customer-board-search-result strong,
.customer-board-search-result span {
    color: var(--text-color, var(--theme-text-color, #0f172a));
    font-weight: 950;
}

@keyframes customerBoardSearchBorder {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 240% 50%;
    }
}

@media (max-width: 560px) {
    .customer-board-search-box {
        min-height: 56px;
    }

    .customer-board-search-icon {
        flex-basis: 48px;
        width: 48px;
        min-height: 54px;
        font-size: 25px;
    }

    .customer-board-search-input {
        min-height: 54px;
        font-size: 20px;
        letter-spacing: -.035em;
    }
}

/* --------------------------------------------------------------------------
   Step101D - zoekbalk radius volgt theme
   --------------------------------------------------------------------------
   De zoekbalk moet dezelfde Hoeken-instelling volgen als de rest van de app.
   Bij strak/recht: 0px. Bij zacht/rond: volgens centrale theme-variabelen.
   -------------------------------------------------------------------------- */

.customer-board-search-box {
    border-radius: var(--planiq-radius-large, var(--planiq-radius, 0px)) !important;
}

.customer-board-search-box::before {
    border-radius: var(--planiq-radius-large, var(--planiq-radius, 0px)) !important;
}

.customer-board-search-icon {
    border-radius: 0 !important;
}

.customer-board-search-input {
    border-radius: 0 !important;
}

.customer-board-search-clear {
    border-radius: var(--planiq-radius-medium, var(--planiq-radius, 0px)) !important;
}

/* Als de app strak/recht staat, voorkom rest-afronding door browser/input defaults. */
.customer-board-search-box,
.customer-board-search-box input,
.customer-board-search-box button,
.customer-board-search-box a {
    -webkit-border-radius: inherit;
}