:root {
    /* primary brand color */
    --cp-primary: #59a1a7;

    /* tints */
    --cp-primary-soft: rgba(89, 161, 167, 0.15);
    --cp-primary-softer: rgba(89, 161, 167, 0.07);
    --cp-primary-strong: rgba(89, 161, 167, 0.25);

    /* neutrals */
    --cp-bg: #f5f7fb;
    --cp-border-subtle: #dde1ea;

    /* text colors */
    --cp-text-main: #1f2937;   /* dark grey (Tailwind gray-800 vibes) */
    --cp-text-strong: #111827; /* extra strong for rare emphasis */
    --cp-text-muted: #6b7280;  /* subtitles, labels */
}


/* ROOT / LAYOUT */
.cp-v2-root {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    background: var(--cp-bg);
    padding: 20px;
    box-sizing: border-box;
    color: var(--cp-text-main);
}

.cp-v2-layout {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr) 320px;
    gap: 16px;
    align-items: flex-start;
}
.cp-v2-card {
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
    padding: 16px 20px;
    box-sizing: border-box;
    position: relative;
}
.cp-v2-left,
.cp-v2-main,
.cp-v2-right {
    min-height: 100px;
}

/* Icons */
.cp-v2-modal .cp-v2-button-primary {
    background: var(--cp-primary-softer); /* light, opaque teal */
    color: var(--cp-text-main);
    /* stronger idle border so primary reads as actionable */
    border: 1px solid var(--cp-primary-strong);
    transition: background 120ms ease, color 120ms ease, transform 120ms ease;
}
.cp-v2-icon--small {
    width: 16px;
    height: 16px;
}
.cp-v2-icon--tiny {
    width: 14px;
    height: 14px;
}
.cp-v2-icon--muted {
    opacity: 0.6;
}

.cp-v2-modal .cp-v2-button-secondary {
    background: var(--cp-primary-soft);
    color: var(--cp-text-main);
    border: 1px solid rgba(89,161,167,0);
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.cp-v2-modal .cp-v2-button-secondary:hover,
.cp-v2-modal .cp-v2-button-secondary:focus {
    background: var(--cp-primary-strong);
    border-color: rgba(89,161,167,0.25);
}

/* Avatar / header */
.cp-v2-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.cp-v2-card-title-group {
    display: flex;
    align-items: center;
    gap: 10px;
}
.cp-v2-avatar {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    object-fit: cover;
}

/* TABS TOP */
.cp-v2-tabs {
    display: flex;
    justify-content: space-between;      /* tabs left, bell right */
    align-items: flex-end;               /* bottom-align with tabs */
    margin-bottom: 16px;
    border-bottom: 1px solid var(--cp-border-subtle);
}

/* group the tabs on the left */
.cp-v2-tabs-left {
    display: flex;
    gap: 12px;
    align-items: flex-end;
}

/* Bell button on the right */
.cp-v2-main-bell {
    border: none;                    /* no ring */
    background: transparent;         /* no chip bg */
    padding: 4px;                    /* still a bit of click area */
    margin-bottom: 3px;
        transform: translateY(-6px);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}


/* make the bell a bit bigger + use muted text color */
.cp-v2-main-bell-icon {
    width: 18px;
    height: 18px;
    color: var(--cp-text-muted);
    opacity: 0.8;
}

.cp-v2-main-bell:hover .cp-v2-main-bell-icon {
    opacity: 1;
}


.cp-v2-tab {
    padding: 10px 16px;
    border-radius: 6px 6px 0 0;
    text-decoration: none;
    color: #4b5563;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.cp-v2-tab--active {
    background: var(--cp-primary-soft);
    color: #1f2937;
    font-weight: 600;
    border-bottom: 2px solid var(--cp-primary);
}

/* TITLES / TEXT */
.cp-v2-page-title {
    font-size: 24px;
    margin: 0 0 16px;
    color: var(--cp-text-main);     /* was #111827 */
    font-weight: 600;
}

.cp-v2-section-title {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 8px;
    color: var(--cp-text-main);     /* was #111827 */
}

.cp-v2-small-title {
    font-size: 14px;
    font-weight: 600;
    margin: 16px 0 8px;
    color: var(--cp-text-main);     /* was #111827 */
}

.cp-v2-appointment-type {
    color: var(--cp-text-main);     /* was #111827 */
}

/* invoice values etc */
.cp-v2-invoice-value {
    font-size: 12px;
    color: var(--cp-text-main);     /* was #111827 */
}

/* modal title */
.cp-v2-modal-title {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 2px;
    color: var(--cp-text-main);     /* if you see #111827 here */
}

.cp-v2-small-title {
    font-size: 14px;
    font-weight: 600;
    margin: 16px 0 8px;
    color: #111827;
}
.cp-v2-detail-list {
    font-size: 13px;
    margin: 8px 0 0;
}
.cp-v2-detail-list dt {
    font-weight: 600;
}
.cp-v2-detail-list dd {
    margin: 0 0 4px;
}

/* SIDE MENU */
.cp-v2-side-menu {
    margin-top: 24px;
    font-size: 14px;
}
.cp-v2-side-menu a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 6px;
    text-decoration: none;
    color: #374151;
    margin-bottom: 4px;
}
.cp-v2-side-menu a.cp-active {
    background: var(--cp-primary-soft);
    color: #1f2937;
    font-weight: 600;
}

/* Dark hover/focus: whole bar turns dark and text/icons become white */
.cp-v2-side-menu a:not(.cp-active):hover,
.cp-v2-side-menu a:not(.cp-active):focus {
    /* updated hover to a medium gray */
    background: #A9A9A9;
    color: var(--cp-text-strong);
    transform: translateX(2px);
}

/* icons in the left menu invert to white when the item is dark */
.cp-v2-side-menu a.cp-active .cp-v2-icon {
    /* only invert icons for the active item (keep hover icons unchanged for light hover) */
    filter: invert(100%) brightness(1);
}

/* PRIMARY BUTTON */
.cp-v2-button-primary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 6px;
    background: var(--cp-primary);
    color: #ffffff;
    text-decoration: none;
    font-size: 13px;
}

/* make all icons inside primary buttons white by default */
.cp-v2-button-primary .cp-v2-icon {
    filter: invert(100%) brightness(1);
}

/* APPOINTMENT TILES */
.cp-v2-appointments-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 8px;
}
.cp-v2-appointment-tile {
    background: #f8fafc;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 13px;
    border: 1px solid #e5e7eb;
}

.cp-v2-appointment-wrap {
    display: block;
}

.cp-v2-appointment-date--above {
    font-size: 12px;
    color: #6b7280;
    margin: 6px 0 6px 4px;
}

.cp-v2-appointment-tile {
    transition: background 160ms ease, transform 120ms ease, border-color 120ms ease;
    cursor: pointer;
    position: relative; /* allow absolute-positioning the icon on the right */
    padding-right: 64px; /* space for the large right-side icon */
    min-height: 64px;
    z-index: 0;
}

/* Hover state: opaque/soft green background, text and icon tint to main green */
.cp-v2-appointment-tile:hover {
    background: var(--cp-primary-soft);
    border-color: rgba(89,161,167,0.25);
}

.cp-v2-appointment-tile:hover .cp-v2-appointment-type,
.cp-v2-appointment-tile:hover .cp-v2-appointment-date,
.cp-v2-appointment-tile:hover .cp-v2-appointment-time {
    color: var(--cp-primary);
}

.cp-v2-appointment-tile:hover .cp-v2-icon {
    /* reuse the primary icon tint filter used elsewhere */
    filter: invert(56%) sepia(8%) saturate(980%) hue-rotate(136deg) brightness(94%) contrast(90%);
}
.cp-v2-appointment-date {
    font-weight: 600;
    margin-bottom: 2px;
}
.cp-v2-appointment-type {
    color: #111827;
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
}
.cp-v2-appointment-type img.cp-v2-icon {
    display: none; /* old inline icon hidden; we use a separate right-side icon */
}

.cp-v2-appointment-icon-right {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    opacity: 0.95;
    pointer-events: none; /* ensure hover targets the tile, not the icon */
}
.cp-v2-appointment-type span {
    display: block;
    font-weight: 600;
    color: inherit;
}
.cp-v2-appointment-time {
    color: #4b5563;
    font-size: 12px;
    margin-top: 2px;
}

/* reinforce hover transform and ensure hover works even when icon overlays */
.cp-v2-appointment-tile:hover,
.cp-v2-appointment-tile:focus {
    transform: translateY(-2px);
}

/* Ensure keyboard users see the same hover/focus styles */
.cp-v2-appointment-tile:focus,
.cp-v2-appointment-tile:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(89,161,167,0.08);
}

/* TABLES */
.cp-v2-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 8px;
    font-size: 13px;
}
.cp-v2-table th,
.cp-v2-table td {
    padding: 6px 8px;
    border-bottom: 1px solid #e5e7eb;
    text-align: left;
}

/* CHIPS / PILLS */
.cp-v2-chip-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    border-radius: 4px;
    background: var(--cp-primary-soft);   /* SAME as Wijzig profiel */
    border: 1px solid rgba(89, 161, 167, 0);
    font-size: 11px;
    text-decoration: none;
    color: #1f2937;
    gap: 6px;
    cursor: pointer;
}

.cp-v2-chip-button:hover {
    background: var(--cp-primary-strong);
        border: 1px solid rgba(89, 161, 167, 0.25); /* subtle edge */
}


.cp-v2-chip-button--accent {
    background: #f97373; /* je kunt deze eventueel ook naar een rood-tint laten als warning */
    color: #ffffff;
}

/* chip button with alert bubble */
.cp-v2-chip-button--alert {
    position: relative;
    padding-right: 20px; /* space so text doesn't sit under the bubble */
}

/* the little red notification dot */
.cp-v2-chip-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #f97373;           /* red bubble */
    border: 2px solid #ffffff;     /* white ring so it stands out on the button */
}

/* optional: try to tint the icon towards the primary color
   (works best if the SVGs are monochrome black) */
.cp-v2-icon--primary {
    filter: invert(56%) sepia(8%) saturate(980%) hue-rotate(136deg) brightness(94%) contrast(90%);
}

/* ROW ACTIONS */
.cp-v2-row-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: flex-end;
}
.cp-v2-dot-menu {
    width: 20px;
    height: 20px;
    border-radius: 999px;
    border: none;
    background: transparent;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* RIGHT SIDEBAR */
.cp-v2-right-section {
    margin-bottom: 16px;
}

/* TIMELINE */
.cp-v2-timeline {
    margin-top: 8px;
    font-size: 12px;
}

.cp-v2-timeline-row {
    display: flex;
    align-items: flex-start;
    padding-bottom: 3px;              /* space above the line */
    margin-bottom: 4px;
    border-bottom: 1px solid #e5e7eb; /* subtle grey separator */
}

/* no line under the last one */
.cp-v2-timeline-row:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* left column: only the diamond now */
.cp-v2-timeline-axis {
    position: relative;
    width: 18px;
    display: flex;
    justify-content: center;
}

/* small teal diamond */
.cp-v2-timeline-dot {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    transform: rotate(45deg);
    background: var(--cp-primary);  /* #59a1a7 */
    margin-top: 10px;               /* sits between label and first row */
}

/* right column: content */
.cp-v2-timeline-content {
    padding-left: 6px;
    margin-bottom: 6px;
    flex: 1;
}

.cp-v2-timeline-label {
    font-weight: 600;
    margin-bottom: 4px;
}

.cp-v2-timeline-item {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 2px;             /* tighter gap to the divider line */
}

/* no extra gap under last item in a group */
.cp-v2-timeline-item:last-child {
    margin-bottom: 0;
}

.cp-v2-timeline-item-icon {
    margin-top: 1px;
}

.cp-v2-timeline-time {
    color: #6b7280;
    margin-right: 4px;
}

.cp-v2-timeline-type {
    color: var(--cp-primary);        /* appointment type in house green */
    font-weight: 600;
}



/* STATUS DOTS */
.cp-v2-status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background: rgba(89, 161, 167, 0.12); /* softer version of primary */
}
.cp-v2-status-pill--ok {
    background: rgba(89, 161, 167, 0.25); /* slightly stronger for 'ok' */
}



/* sidebar FACTUREN subtabs */
.cp-v2-subtabs {
    display: flex;
    gap: 12px;
    font-size: 12px;
    margin-top: 4px;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 2px;
}

.cp-v2-subtab {
    padding: 4px 0 5px;
    margin-bottom: -1px;
    text-decoration: none;
    color: #4b5563;
    border-bottom: 2px solid transparent;
}

.cp-v2-subtab--active {
    color: var(--cp-primary);                /* green text */
    font-weight: 600;
    border-bottom-color: var(--cp-primary);  /* green underline */
}

/* sidebar invoice list */
.cp-v2-invoice-list {
    margin-top: 4px;
}

.cp-v2-invoice-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 4px 0;
    border-bottom: 1px solid #f3f4f6;
}

.cp-v2-invoice-row:last-child {
    border-bottom: none;
}

.cp-v2-invoice-main {
    min-width: 55px;
}

.cp-v2-invoice-number {
    display: block;
    font-weight: 600;
    color: var(--cp-primary);
    text-decoration: none;
    line-height: 1.2;
}

.cp-v2-invoice-date {
    color: #6b7280;
    font-size: 11px;
}

.cp-v2-invoice-amounts {
    display: flex;
    gap: 12px;
    flex: 1;
    justify-content: flex-start;
}

.cp-v2-invoice-amount-block {
    min-width: 70px;
}

.cp-v2-invoice-label {
    font-size: 11px;
    color: #6b7280;
}

.cp-v2-invoice-value {
    font-size: 12px;
    color: #111827;
}

.cp-v2-invoice-status {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* STATUS PILLS (betaald / openstaand) */
.cp-v2-status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;                   /* smaller circle */
    height: 18px;
    border-radius: 999px;
    background: #eef5f5;           /* neutral light background */
}

/* betaalde factuur: groene cirkel met witte check */
.cp-v2-status-pill--ok {
    background: #75b870; /* solid green circle */
}

/* openstaande factuur: neutrale cirkel + rood bolletje */
.cp-v2-status-pill--alert {
    position: relative;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
}

/* Make the credit-card icon inside alert pills larger so it matches visual weight */
.cp-v2-status-pill--alert .cp-v2-icon--status {
    width: 18px;
    height: 18px;
}

/* rood notificatie-badge rechtsboven */
.cp-v2-status-pill-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: #f97373;
    border: 2px solid #ffffff;
}

/* icon size inside status pill */
.cp-v2-icon--status {
    width: 15px;
    height: 15px;
}

/* maak de check wit in de groene cirkel */
.cp-v2-status-pill--ok .cp-v2-icon--status {
    filter: invert(100%) brightness(250%);
}

/* tint de creditcard in huis-groen */
.cp-v2-status-pill--alert .cp-v2-icon--status {
    filter: invert(54%) sepia(7%) saturate(1045%) hue-rotate(136deg)
            brightness(93%) contrast(91%);
}


/* MODAL (generic, reusable) */

.cp-v2-modal {
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.18);
    width: 100%;
    max-width: 680px;
    padding: 20px 22px 18px;
    box-sizing: border-box;
}

.cp-v2-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.cp-v2-modal-title {
    font-size: 18px;
    font-weight: 600;
    color: #111827;
}

.cp-v2-modal-close {
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
    font-size: 18px;
    color: #6b7280;
}

.cp-v2-modal-body {
    font-size: 13px;
    color: #374151;
}

/* Appointment modal layout */
.cp-v2-appointment-layout {
    display: grid;
    grid-template-columns: 150px 280px;
    gap: 18px;
    align-items: start;
}

.cp-v2-appointment-options {
    display: flex;
    gap: 10px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.cp-v2-appointment-option,
.cp-v2-modal .cp-v2-button-primary,
.cp-v2-modal .cp-v2-button-secondary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 4px;
    background: var(--cp-primary-soft);
    border: 1px solid rgba(89,161,167,0);
    color: #1f2937;
    font-size: 11px;
    text-decoration: none;
    cursor: pointer;
}

.cp-v2-appointment-option .cp-v2-icon,
.cp-v2-modal .cp-v2-button-primary .cp-v2-icon,
.cp-v2-modal .cp-v2-button-secondary .cp-v2-icon {
    margin: 0;
}

.cp-v2-appointment-option.is-selected {
    background: var(--cp-primary);
    color: #ffffff;
    border-color: rgba(89,161,167,0.25);
    box-shadow: 0 6px 12px rgba(15, 23, 42, 0.06);
}

.cp-v2-appointment-calendar {
    min-height: 260px;
}

.cp-v2-calendar {
    border: 1px solid #eef2f2;
    border-radius: 8px;
    padding: 8px;
    background: #ffffff;
}

.cp-v2-calendar-header {
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--cp-text-main);
}

.cp-v2-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    align-items: center;
}

.cp-v2-calendar-day {
    font-size: 12px;
    color: #6b7280;
    text-align: left;
}

.cp-v2-calendar-cell {
    min-height: 34px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #374151;
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
}

.cp-v2-calendar-cell:hover {
    background: var(--cp-primary-softer);
}

.cp-v2-calendar-cell.is-today {
    background: #e8f6f6;
    border-color: rgba(89,161,167,0.25);
}

.cp-v2-calendar-cell.is-selected {
    background: var(--cp-primary);
    color: #fff;
}

.cp-v2-modal-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
}

.cp-v2-modal-label {
    color: #6b7280;
}

.cp-v2-modal-value {
    font-weight: 500;
}

.cp-v2-modal-footer {
    margin-top: 14px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* neutral button in modal */
.cp-v2-button-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 12px;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    font-size: 13px;
    text-decoration: none;
    color: #374151;
    cursor: pointer;
}

/* tweak existing status pills so paid = #75b870 + white check */
.cp-v2-status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background: #eef5f5;
}

.cp-v2-status-pill--ok {
    background: #75b870;
}

.cp-v2-status-pill--ok .cp-v2-icon {
    width: 15px;
    height: 15px;
    filter: brightness(0) invert(1); /* make check white */
}

/* openstaande factuur: neutrale cirkel + rood bolletje */
.cp-v2-status-pill--alert {
    position: relative;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
}

/* Questionnaire-specific status icon (todo): make the icon itself the same diameter as the status pill */
.cp-v2-icon--questionnaire-status {
    width: 18px;
    height: 18px;
    display: inline-block;
}

.cp-v2-status-pill-badge {
    position: absolute;
    top: -1px;
    right: -1px;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #f97373;
    border: 1px solid #ffffff;
}

button.cp-v2-status-pill {
    border: none;
    outline: none;
}

button.cp-v2-status-pill:focus-visible {
    outline: none;
}

/* === MODAL OVERLAY + BASIC POSITION / ANIMATION === */
.cp-v2-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.25);   /* donker + beetje glas */
    backdrop-filter: blur(6px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease-out;
    z-index: 998;
}

/* overlay zichtbaar */
.cp-v2-modal-overlay--visible {
    opacity: 1;
    pointer-events: auto;
}

/* buitenste modal-container (wordt gecentreerd) */
.cp-v2-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.97);
    opacity: 0;
    z-index: 999;
    transition: transform 0.18s ease-out, opacity 0.18s ease-out;
    pointer-events: none; /* don't block pointer events when hidden */
}

/* zichtbaar + geanimeerd naar binnen */
.cp-v2-modal--visible {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    pointer-events: auto; /* allow interaction when visible */
}


/* ==== INVOICE LAYOUT INSIDE MODAL ==== */

.cp-v2-modal-inner {
    /* No separate inner card look — let the outer .cp-v2-modal be the card */
    background: transparent;
    border-radius: 8px;
    box-shadow: none;
    max-width: 640px;
    width: 100%;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.cp-v2-modal-header {
    padding: 16px 20px 12px;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cp-v2-modal-title {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 2px;
}

.cp-v2-modal-meta {
    font-size: 11px;
    color: #6b7280;
}

.cp-v2-modal-close {
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    padding: 2px 6px;
    border-radius: 999px;
}

.cp-v2-modal-close:hover {
    background: #f3f4f6;
}

.cp-v2-modal-body {
    padding: 16px 20px 12px;
    overflow-y: auto;
}

/* Modal form / input styles (improves Wijzig profiel look) */
.cp-v2-modal form {
    width: 100%;
}

.cp-v2-modal .cp-v2-modal-label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    color: #6b7280;
}

.cp-v2-modal-input,
.cp-v2-modal textarea,
.cp-v2-modal select ,
#login-form-block input {
    width: 100%;
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid #e6ecef;
    background: #ffffff;
    font-size: 13px;
    color: var(--cp-text-main);
    box-sizing: border-box;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.cp-v2-modal-input:focus,
.cp-v2-modal textarea:focus,
.cp-v2-modal select:focus,
#login-form-block input:focus {
    outline: none;
    border-color: var(--cp-primary);
    box-shadow: 0 6px 18px rgba(89,161,167,0.06), 0 0 0 3px rgba(89,161,167,0.06);
}

.cp-v2-modal .cp-v2-modal-form-row {
    margin-bottom: 12px;
}

/* radio buttons grouping inside modal */
.cp-v2-modal .cp-v2-modal-radio-group label {
    margin-right: 12px;
    font-size: 13px;
    color: var(--cp-text-main);
}
.cp-v2-modal input[type="radio"] {
    margin-left: 8px;
    margin-right: 6px;
}

/* tighten modal footer button appearance */
.cp-v2-modal-footer .cp-v2-button-secondary {
    background: #f3f6f6;
    border: 1px solid #e6ecef;
}

.cp-v2-modal-footer .cp-v2-button-primary {
    min-width: 90px;
}

#login-form-block {
    margin: 20px auto;
}

#login-form-block a, .cp-v2-main a {
    padding: 10px 16px;
    border-radius: 6px 6px 0 0;
    text-decoration: none;
    color: #4b5563;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* make the modal card feel lighter and centered content */
.cp-v2-modal {
    padding: 0; /* outer handles positioning; inner contains card */
}
.cp-v2-modal-inner {
    background: #ffffff;
    padding: 18px 18px 14px;
    border-radius: 8px;
}

/* high-level invoice sections */
.cp-v2-invoice-top {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.cp-v2-invoice-title-block h3 {
    margin: 0 0 4px;
    font-size: 14px;
    font-weight: 600;
}

.cp-v2-invoice-title-block p {
    margin: 0;
    font-size: 12px;
    color: #6b7280;
}

.cp-v2-invoice-meta dl {
    margin: 0;
    font-size: 11px;
}

.cp-v2-invoice-meta dt {
    font-weight: 600;
    color: #4b5563;
}

.cp-v2-invoice-meta dd {
    margin: 0 0 4px;
    color: #111827;
}

/* billed to section */
.cp-v2-invoice-billto {
    border-radius: 10px;
    background: #f9fafb;
    padding: 10px 12px;
    margin-bottom: 16px;
}

.cp-v2-invoice-billto-label {
    font-size: 11px;
    color: #6b7280;
    margin-bottom: 2px;
}

.cp-v2-invoice-billto-name {
    font-weight: 600;
    font-size: 13px;
}

.cp-v2-invoice-billto-text {
    font-size: 12px;
    color: #4b5563;
}

/* invoice lines */
.cp-v2-invoice-lines {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    margin-bottom: 12px;
}

.cp-v2-invoice-lines th,
.cp-v2-invoice-lines td {
    padding: 6px 4px;
    border-bottom: 1px solid #e5e7eb;
    text-align: left;
}

.cp-v2-invoice-lines th {
    font-size: 11px;
    color: #6b7280;
    font-weight: 600;
}

.cp-v2-invoice-lines td:last-child,
.cp-v2-invoice-lines th:last-child {
    text-align: right;
}

/* totals */
.cp-v2-invoice-totals {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
    margin-bottom: 12px;
}

.cp-v2-invoice-totals-inner {
    min-width: 180px;
    font-size: 12px;
}

.cp-v2-invoice-totals-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
}

.cp-v2-invoice-totals-row.is-total {
    font-weight: 700;
}

.cp-v2-invoice-totals-label {
    color: #6b7280;
}

.cp-v2-invoice-totals-value {
    color: #111827;
}

/* footer: praktijk info + payment info */
.cp-v2-invoice-footer {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    border-top: 1px solid #e5e7eb;
    padding-top: 10px;
    margin-top: 4px;
}

.cp-v2-invoice-footer-block {
    font-size: 11px;
    color: #6b7280;
}

.cp-v2-invoice-footer-title {
    font-weight: 600;
    margin-bottom: 2px;
}

.cp-v2-invoice-footer p {
    margin: 0;
}

/* modal footer buttons */
.cp-v2-modal-footer {
    padding: 10px 20px 14px;
    border-top: 1px solid #e5e7eb;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* Remove unwanted focus outline / black border on primary modal buttons */
.cp-v2-modal-footer .cp-v2-button-primary {
    border: none;
    box-shadow: none;
}
.cp-v2-button-primary:focus,
.cp-v2-button-primary:focus-visible {
    outline: none;
    box-shadow: none;
}

/* Modal buttons & appointment options: use the same chip/pill appearance as other chips */
.cp-v2-modal .cp-v2-button-primary,
.cp-v2-modal .cp-v2-button-secondary,
.cp-v2-appointment-option {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 4px;
    background: var(--cp-primary-soft);
    border: 1px solid rgba(89,161,167,0);
    color: #1f2937;
    font-size: 11px;
    text-decoration: none;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease, transform 120ms ease, border-color 120ms ease;
}

/* Primary modal actions (e.g. "Maak afspraak", "Betaal nu"): on hover become the solid primary green */
.cp-v2-modal .cp-v2-button-primary:hover,
.cp-v2-modal .cp-v2-button-primary:focus {
    background: var(--cp-primary);
    color: #ffffff;
    border-color: rgba(89,161,167,0.25);
}

/* Secondary modal actions and appointment option hover should use the chip hover style (subtle stronger bg) */
.cp-v2-modal .cp-v2-button-secondary:hover,
.cp-v2-modal .cp-v2-button-secondary:focus,
.cp-v2-appointment-option:hover,
.cp-v2-appointment-option:focus {
    background: var(--cp-primary-strong);
    border: 1px solid rgba(89,161,167,0.25);
    color: #1f2937;
}

/* little tweak: "secondary" button style for print / cancel */
.cp-v2-button-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid var(--cp-border-subtle);
    background: #ffffff;
    font-size: 12px;
    text-decoration: none;
    color: #374151;
    cursor: pointer;
}

/* ==== PRINT: only print the modal invoice ==== */
@media print {
    body * {
        visibility: hidden !important;
    }
    .cp-v2-modal,
    .cp-v2-modal * {
        visibility: visible !important;
    }
    .cp-v2-modal-overlay {
        display: none !important;
    }
    .cp-v2-modal {
        position: static;
        transform: none;
        opacity: 1 !important;
        box-shadow: none;
        padding: 0;
    }
    .cp-v2-modal-inner {
        max-height: none;
        box-shadow: none;
        border-radius: 0;
    }
}

.cp-v2-button-secondary:hover {
    background: #e5e7eb;
}

/* RIGHT SIDEBAR – Vragenlijsten */

.cp-v2-questionnaire-list {
    margin-top: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cp-v2-questionnaire-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 12px;
}

/* position the row so the notification badge can be absolutely placed near the right-side icon */
.cp-v2-questionnaire-row {
    position: relative;
}

/* small red notification dot for todo questionnaires (overlaps the clock icon) */
.cp-v2-questionnaire-icon-wrap {
    position: relative;
    display: inline-block;
}

/* small red notification dot for todo questionnaires (overlaps the clock icon)
   positioned to top-right of the icon to match other notify dots */
.cp-v2-questionnaire-badge {
    position: absolute;
    top: -4px;    /* nudged up to avoid covering the clock hands */
    right: -4px;  /* nudged right to sit outside the icon */
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #f97373; /* red */
    border: 2px solid #f9fafb; /* match bell dot ring */
}

.cp-v2-questionnaire-main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 8px;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
}

.cp-v2-questionnaire-title {
    font-weight: 500;
}

.cp-v2-questionnaire-date {
    font-size: 11px;
    color: #6b7280;
}

/* --- Notifications dropdown / top tabs --- */

.cp-v2-tabs {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--cp-border-subtle);
}

.cp-v2-tabs-left {
    display: flex;
    gap: 12px;
    align-items: flex-end;
}

.cp-v2-tabs-right {
    display: flex;
    align-items: flex-end;
    position: relative; /* anchor for dropdown */
}

/* Bell button */

.cp-v2-main-bell {
    border: none;
    background: transparent;
    padding: 4px;
    margin-bottom: 3px;
    transform: translateY(-6px);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cp-v2-main-bell-inner {
    position: relative;
    display: inline-flex;
}

.cp-v2-main-bell-icon {
    width: 18px;
    height: 18px;
    color: var(--cp-text-muted);
    opacity: 0.8;
}

.cp-v2-main-bell:hover .cp-v2-main-bell-icon {
    opacity: 1;
}

/* Red dot on bell when there are notifications */

.cp-v2-notify-dot {
    position: absolute;
    top: -1px;
    right: -1px;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #f97373;
    border: 2px solid #f9fafb;
}

/* Dropdown panel */

.cp-v2-notify-dropdown {
    position: absolute;
    right: -8px;                     /* kleine tik naar rechts */
    top: calc(100% + 10px);
    width: 300px;                    /* iets smaller, minder “lucht” rechts */
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.18);
    border: 1px solid var(--cp-border-subtle);
    padding: 8px 0;
    display: none;
    z-index: 40;
}


.cp-v2-notify-dropdown--visible {
    display: block;
}

.cp-v2-notify-header {
    padding: 6px 12px 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--cp-text-main);
    border-bottom: 1px solid #f1f5f9;
}

.cp-v2-notify-empty {
    padding: 10px 12px;
    font-size: 12px;
    color: var(--cp-text-muted);
}

.cp-v2-notify-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cp-v2-notify-item:hover {
    background: var(--cp-primary-softer);   /* jouw semi-transparante groen */
}

.cp-v2-notify-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 16px;                 /* iets meer lucht links/rechts */
    font-size: 12px;
    color: var(--cp-text-main);
    cursor: pointer;
}

.cp-v2-notify-item + .cp-v2-notify-item {
    border-top: 1px solid #e5e7eb;      /* iets donkerder grijs, beter zichtbaar */
}


.cp-v2-notify-item-icon {
    margin-top: 6px;
}

.cp-v2-notify-title {
    font-weight: 500;
}

.cp-v2-notify-meta {
    font-size: 11px;
    color: var(--cp-text-muted);
}

/* (optional) per-type accent:
.cp-v2-notify-item--invoice .cp-v2-notify-title { }
.cp-v2-notify-item--questionnaire .cp-v2-notify-title { }
*/


/* To-do vragenlijst tiles */
.cp-v2-todo-wrapper { margin-top: 8px; }

.cp-v2-questionnaire-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}

.cp-v2-questionnaire-card {
    background: #edf3f4;
    border-radius: 10px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    opacity: 0.75;
    cursor: pointer;
    transition: all 0.25s ease;
}

.cp-v2-questionnaire-card:hover,
.cp-v2-questionnaire-card:focus {
    opacity: 1;
    transform: translateY(-2px);
    box-shadow: 0px 6px 14px rgba(0,0,0,0.05);
}

.cp-v2-questionnaire-card.is-done {
    opacity: 0.45;
}

.cp-v2-questionnaire-title {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 6px;
}

.cp-v2-questionnaire-meta {
    font-size: 13px;
    color: var(--cp-text-muted);
    margin-bottom: 12px;
}

.cp-v2-questionnaire-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cp-v2-open-questionnaire-btn {
    font-size: 13px;
    color: var(--cp-primary);
    font-weight: 500;
    text-decoration: underline;
}

.cp-v2-open-questionnaire-btn:hover {
    text-decoration: none;
}

.cp-v2-no-questionnaires {
    text-align: center;
    padding: 16px;
    color: var(--cp-text-muted);
}

.cp-v2-notify-item { cursor: pointer; }
.cp-v2-notify-item:hover { background: rgba(0,0,0,0.04); }

/* --- FIX: Questionnaire cards match appointment hover style --- */

.cp-v2-questionnaire-card a {
    text-decoration: none;
    color: var(--cp-text-main); /* no more purple links */
    transition: color 140ms ease;
}

.cp-v2-questionnaire-card:hover {
    background: var(--cp-primary-soft) !important;
    border: 1px solid rgba(89,161,167,0.25);
    transform: translateY(-2px);
    opacity: 1;
}

.cp-v2-questionnaire-card:hover a {
    color: var(--cp-primary); /* link text turns green on hover */
}

/* Keep icons and metadata consistent */
.cp-v2-questionnaire-card:hover .cp-v2-questionnaire-meta {
    color: var(--cp-primary);
}

.cp-v2-open-questionnaire-btn {
    color: var(--cp-primary);
    text-decoration: underline;
}

.cp-v2-open-questionnaire-btn:hover {
    text-decoration: none;
    transform: translateY(-1px);
}

/* === Fix purple links in ALL questionnaire areas === */

/* Main To-do table version */
.cp-v2-questionnaire-row a {
    text-decoration: none;
    color: var(--cp-text-main) !important; /* consistent */
    transition: color 160ms ease;
}
.cp-v2-questionnaire-row a:hover {
    color: var(--cp-primary) !important;
}

/* Right sidebar version */
.cp-v2-questionnaire-main a,
.cp-v2-questionnaire-title a {
    text-decoration: none;
    color: var(--cp-text-main) !important;
    transition: color 160ms ease;
}
.cp-v2-questionnaire-main:hover a {
    color: var(--cp-primary) !important;
}

.cp-v2-questionnaire-row:hover {
    background: var(--cp-primary-soft);
    border-radius: 6px;
    transform: translateY(-1px);
}

/* Calendar */
#calendar {
    float: left;
    width: 400px;
    height: 400px;
}
.fc-header {
    background-color: #59a0a1;
}
.fc-header-title h2 {
    margin-top: 0;
}
.fc table {
    font-size: 1em;
}
.fc table {
    border-collapse: collapse;
    border-spacing: 0;
}
.fc-state-default.fc-corner-left {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}
.fc-header .fc-button {
    margin-right: -1px;
}
.fc-header .fc-button {
    margin-bottom: 1em;
}
.fc-state-default {
    background-color: #fff;
    border-color: #e6e6e6;
    color: #59a0a1;
}
.fc-button {
    position: relative;
    display: inline-block;
    padding: 0 .4em;
    overflow: hidden;
    height: 1.9em;
    line-height: 1.9em;
    white-space: nowrap;
    cursor: pointer;
}
.fc-header-title {
    width: 150px;
}
td.fc-header-left, td.fc-header-center, td.fc-header-right {
    padding-top: 10px;
}
span.fc-header-title {
    color: #fff;
}
.fc-state-hover,
.fc-state-down,
.fc-state-active,
.fc-state-disabled {
    color: #333333;
    background-color: #e6e6e6;
}
.fc-state-hover {
    color: #333333;
    text-decoration: none;
    background-position: 0 -15px;
    -webkit-transition: background-position 0.1s linear;
    -moz-transition: background-position 0.1s linear;
    -o-transition: background-position 0.1s linear;
    transition: background-position 0.1s linear;
}
.fc-grid .fc-day-number {
    float: right;
    padding: 0 2px;
    width: 100%;
    text-align: center;
    line-height: 50px;
}
.fc-day-content {
    height: 0;
}
.fc-day-active {
    font-weight: bold;
    cursor: pointer;
    font-size: 20px;
    background-color: #59a0a1;
    color: #fff;
}
.fc-day-selected, .fc-day-selected.fc-day-active:hover {
    background-color: #AAA;
}
.fc-day-active:hover {
    background-color: #fcefbd;
    color: #666;
}
.agenda-events-block {
    width: max-content;
}
.agenda-events-block .cp-v2-appointment-option {
    margin: 3px;
}