:root {
  --fto-primary: #4F6DF5;
  --fto-primary-soft: #C5CCE0;
  --fto-primary-bg: #F5F6FB;
  --fto-primary-strong: #3A56D0;
  --fto-secondary: #A1B88B;
  --fto-secondary-bg: #E3F5E9;
  --fto-secondary-strong: #245734;
  --fto-accent: #C396AC;
  /* Meer contrast (o.a. pill "evaluatie nodig") */
  --fto-danger: #B42318;
  --fto-danger-bg: #FCE8E8;
  --fto-app-bg-top: #FBF4F1;
  --fto-app-bg-bottom: #ffffff;
}

/* =========================================================
   FTO Suite - Apple style typography & reset
========================================================= */
.fto-app-body,
.fto-app-body * {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
        "Segoe UI", Roboto, Ubuntu, sans-serif;
    box-sizing: border-box;
}

/* ── Base font-size reset: voorkom dat het WP-theme grotere maten forceert ── */
.fto-app-main-inner {
    font-size: 15px !important;
    line-height: 1.55 !important;
}

.fto-app-main-inner p,
.fto-app-main-inner span,
.fto-app-main-inner li,
.fto-app-main-inner td,
.fto-app-main-inner th,
.fto-app-main-inner div,
.fto-app-main-inner a,
.fto-app-main-inner strong,
.fto-app-main-inner em {
    font-size: inherit;
}

/* Formulier-elementen: uniform 14-15px */
.fto-app-main-inner input[type="text"],
.fto-app-main-inner input[type="email"],
.fto-app-main-inner input[type="password"],
.fto-app-main-inner input[type="number"],
.fto-app-main-inner input[type="tel"],
.fto-app-main-inner input[type="url"],
.fto-app-main-inner input[type="date"],
.fto-app-main-inner select,
.fto-app-main-inner textarea {
    font-size: 14px !important;
}

.fto-app-main-inner button,
.fto-app-main-inner input[type="submit"] {
    font-size: 14px !important;
}

/* Tabel-cellen uniform */
.fto-app-main-inner table {
    font-size: 14px !important;
}

.fto-app-main-inner table th {
    font-size: 13px !important;
    font-weight: 600;
}

.fto-h1 { font-size: clamp(1.35rem, 2.2vw, 1.55rem); font-weight: 700; letter-spacing: -0.04em; color: #222533; margin: 0 0 0.45em; }
.fto-h2 { font-size: clamp(1.15rem, 1.8vw, 1.35rem); font-weight: 600; letter-spacing: -0.03em; color: #222533; margin: 0 0 0.55em; }
.fto-h3 { font-size: clamp(1.05rem, 1.5vw, 1.2rem); font-weight: 600; letter-spacing: -0.02em; color: #222533; margin: 0 0 0.55em; }
.fto-h4 { font-size: 1.0rem; font-weight: 600; letter-spacing: -0.01em; color: #222533; margin: 0 0 0.45em; }

/* =========================================================
   Normalize headings inside the FTO app (prevent theme overrides)
========================================================= */
.fto-app-main-inner h1,
.fto-app-main-inner h2,
.fto-app-main-inner h3,
.fto-app-main-inner h4 {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", Roboto, Ubuntu, sans-serif !important;
    color: #222533 !important;
    letter-spacing: -0.02em;
    line-height: 1.25;
    margin: 0 0 0.55em;
}
.fto-app-main-inner h1 { font-size: clamp(1.35rem, 2.2vw, 1.55rem) !important; font-weight: 700 !important; letter-spacing: -0.04em; }
.fto-app-main-inner h2 { font-size: clamp(1.15rem, 1.8vw, 1.35rem) !important; font-weight: 600 !important; }
.fto-app-main-inner h3 { font-size: clamp(1.05rem, 1.5vw, 1.2rem) !important; font-weight: 600 !important; }
.fto-app-main-inner h4 { font-size: 1.0rem !important; font-weight: 600 !important; }

.fto-meeting-titleblock h3 {
    font-size: 1.05rem !important;
    margin: 0 0 0.1em !important;
}


.fto-app-main-inner p {
    font-size: 0.95rem !important;
    line-height: 1.55 !important;
    color: #333;
}

.fto-label,
.fto-app-main-inner label {
    font-size: 0.85rem;
    color: #6A6F80;
}

/* Buttons */
.fto-btn-primary,
.fto-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 9px 18px;
    font-size: 0.92rem !important;
    font-weight: 600;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.16s ease;
}

.fto-btn-primary {
    background-color: var(--fto-primary);
    background-image: linear-gradient(135deg, rgba(255,255,255,0.16), rgba(0,0,0,0.10));
    color: #ffffff !important;
    box-shadow: 0 8px 22px rgba(79,109,245,0.35);
}

.fto-btn-primary:hover {
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.12);
}

.fto-btn-secondary {
    background: #ffffff;
    color: var(--fto-primary) !important;
    border: 1px solid rgba(79,109,245,0.35);
    box-shadow: 0 6px 16px rgba(0,0,0,0.04);
}

.fto-btn-secondary:hover {
    box-shadow: 0 3px 8px rgba(15, 23, 42, 0.10);
}


/* Text button / link */
.fto-btn-text {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 2px;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--fto-primary) !important;
    text-decoration: none;
}
.fto-btn-text:hover {
    text-decoration: underline;
}

/* Inputs */
.fto-app-main-inner input[type="text"],
.fto-app-main-inner input[type="search"],
.fto-app-main-inner input[type="number"],
.fto-app-main-inner select,
.fto-app-main-inner textarea {
    border-radius: 14px;
    border: 1px solid #DBE1D4;
    padding: 8px 11px;
    font-size: 14px !important;
    background: #ffffff;
}

/* =====================================================================
   WP 2FA (shortcode) styling binnen FTO profiel
   ===================================================================== */

.fto-wp2fa-card .wp-2fa-configuration-form {
    font-size: 1rem;
}

.fto-wp2fa-card .wp-2fa-configuration-form h1,
.fto-wp2fa-card .wp-2fa-configuration-form h2,
.fto-wp2fa-card .wp-2fa-configuration-form h3 {
    font-size: 1.35rem;
    line-height: 1.25;
    margin: 18px 0 10px;
}

.fto-wp2fa-card .wp-2fa-configuration-form p {
    font-size: 0.95rem;
    line-height: 1.6;
}

/* WP admin notices die via shortcode meekomen: maak ze “FTO” */
.fto-wp2fa-card .notice,
.fto-wp2fa-card .updated,
.fto-wp2fa-card .error {
    margin: 12px 0;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(0,0,0,0.08);
    background: rgba(255,255,255,0.85);
}

.fto-wp2fa-card .notice {
    border-left: 4px solid var(--fto-primary);
}

/* Inputs/selects in 2FA setup */
.fto-wp2fa-card .wp-2fa-configuration-form input[type="text"],
.fto-wp2fa-card .wp-2fa-configuration-form input[type="email"],
.fto-wp2fa-card .wp-2fa-configuration-form input[type="password"],
.fto-wp2fa-card .wp-2fa-configuration-form input[type="tel"],
.fto-wp2fa-card .wp-2fa-configuration-form select {
    border-radius: 14px;
    border: 1px solid rgba(0,0,0,0.14);
    padding: 10px 12px;
    font-size: 0.95rem;
    max-width: 100%;
}

.fto-wp2fa-card .wp-2fa-configuration-form input:focus,
.fto-wp2fa-card .wp-2fa-configuration-form select:focus {
    outline: none;
    border-color: var(--fto-primary);
    box-shadow: 0 0 0 3px rgba(79,109,245,0.18);
}

/* Buttons van WP2FA naar FTO look */
.fto-wp2fa-card .wp-2fa-configuration-form .button,
.fto-wp2fa-card .wp-2fa-configuration-form button,
.fto-wp2fa-card .wp-2fa-configuration-form input[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 10px 18px;
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.16s ease;
}

.fto-wp2fa-card .wp-2fa-configuration-form .button-primary,
.fto-wp2fa-card .wp-2fa-configuration-form button.button-primary,
.fto-wp2fa-card .wp-2fa-configuration-form input[type="submit"].button-primary {
    background-color: var(--fto-primary);
    background-image: linear-gradient(135deg, rgba(255,255,255,0.16), rgba(0,0,0,0.10));
    border: none;
    color: #fff !important;
    box-shadow: 0 8px 22px rgba(79,109,245,0.25);
}

.fto-wp2fa-card .wp-2fa-configuration-form .button-secondary,
.fto-wp2fa-card .wp-2fa-configuration-form button.button-secondary,
.fto-wp2fa-card .wp-2fa-configuration-form input[type="submit"].button-secondary {
    background: #ffffff;
    border: 1px solid rgba(79,109,245,0.35);
    color: var(--fto-primary) !important;
    box-shadow: 0 6px 16px rgba(0,0,0,0.04);
}

.fto-wp2fa-card .wp-2fa-configuration-form .button:hover,
.fto-wp2fa-card .wp-2fa-configuration-form button:hover,
.fto-wp2fa-card .wp-2fa-configuration-form input[type="submit"]:hover {
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.12);
}

.fto-app-main-inner input:focus,
.fto-app-main-inner select:focus,
.fto-app-main-inner textarea:focus {
    outline: none;
    border-color: var(--fto-primary);
    box-shadow: 0 0 0 1px rgba(79,109,245,0.22);
}


/* =========================================================
   Basis app layout
========================================================= */
.fto-app-body {
    background: linear-gradient(180deg, var(--fto-app-bg-top) 0%, var(--fto-app-bg-bottom) 100%);
    margin: 0;
}

.fto-app-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.fto-app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 14px 32px;
    background: #ffffff;
    border-bottom: 1px solid #E5D7D1;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
    position: sticky;
    top: 0;
    z-index: 50;
}

.fto-app-logo-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
}

.fto-app-logo-link:focus-visible {
    outline: 3px solid rgba(79,109,245,0.25);
    outline-offset: 4px;
    border-radius: 14px;
}

.fto-app-logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.fto-app-logo-img {
    height: 32px;
    width: auto;
    display: block;
    border-radius: 10px;
    box-shadow: 0 6px 16px rgba(0,0,0,0.06);
}

.fto-app-logo-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background-color: var(--fto-primary);
    background-image: linear-gradient(135deg, rgba(255,255,255,0.14), rgba(0,0,0,0.10));
    color: #fff;
    font-weight: 700;
    font-size: 0.9rem;
}

.fto-app-logo-text {
    font-weight: 600;
    /* Donkerblauw voor de (onder)titel linksboven */
    color: var(--fto-primary);
    font-size: 0.95rem;
}

/* =========================================================
   Footer branding (praktijklogo's + credit)
========================================================= */
.fto-app-footer {
    margin-top: auto;
    padding: 18px 32px 22px;
    border-top: 1px solid rgba(0,0,0,0.06);
    background: rgba(255,255,255,0.28);
    backdrop-filter: blur(10px);
}

.fto-app-footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    flex-wrap: wrap;
}

.fto-app-footer-logos {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-bottom: 0;
}

.fto-app-footer-logo {
    height: 52px;
    max-height: 52px;
    width: auto;
    max-width: 280px;
    object-fit: contain;
    opacity: 0.92;
}

.fto-app-footer-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-left: auto;
    text-align: right;
    align-items: flex-end;
    color: rgba(0,0,0,0.62);
    font-size: 0.85rem;
}

.fto-app-footer-credit {
    font-weight: 600;
    color: rgba(0,0,0,0.72);
}

.fto-app-footer-copy {
    color: rgba(0,0,0,0.56);
}

.fto-app-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* Mobile hamburger */
.fto-nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid rgba(0,0,0,0.10);
    background: rgba(255,255,255,0.80);
    border-radius: 999px;
    padding: 8px 10px;
    cursor: pointer;
    color: rgba(0,0,0,0.65);
    box-shadow: 0 8px 22px rgba(0,0,0,0.04);
}

.fto-nav-toggle:hover {
    background: rgba(0,0,0,0.03);
    color: rgba(0,0,0,0.85);
}

.fto-nav-overlay {
    display: none;
    border: none;
    background: transparent;
    padding: 0;
}

.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.fto-app-tab {
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 0.88rem;
    text-decoration: none;
    color: #444;
    background: transparent;
    border: 1px solid transparent;
}

.fto-app-tab:hover {
    background: #F2E2DC;
}

.fto-app-tab.is-active {
    background-color: var(--fto-primary);
    background-image: linear-gradient(135deg, rgba(255,255,255,0.16), rgba(0,0,0,0.10));
    color: #fff;
    border-color: var(--fto-primary);
}

.fto-app-user {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* User block inside mobile nav */
.fto-nav-user {
    display: none;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #E5D7D1;
}

.fto-nav-user-name {
    font-size: 0.92rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
    text-decoration: none;
    display: block;
}

/* Duidelijke profiel-link (vooral mobiel) */
.fto-profile-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.fto-profile-link-name {
    font-size: 0.92rem;
    font-weight: 700;
    color: #333;
    line-height: 1.2;
}

.fto-profile-link-pill {
    font-size: 0.78rem;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--fto-primary-bg);
    color: var(--fto-primary);
    border: 1px solid rgba(0,0,0,0.06);
    white-space: nowrap;
}

.fto-profile-link-chevron {
    margin-left: auto;
    color: #9AA1B2;
    font-size: 1.15rem;
    line-height: 1;
}

/* User block inside mobile nav: maak de naam duidelijk klikbaar */
.fto-nav-user-name.fto-profile-link {
    display: flex;
    width: 100%;
    justify-content: space-between;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 14px;
    margin-bottom: 10px;
}

.fto-nav-user-name.fto-profile-link:hover {
    filter: brightness(0.98);
}

/* Header profiel-link (desktop) */
.fto-app-username.fto-profile-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.fto-app-username .fto-profile-link-pill--desktop {
    display: none;
}

.fto-nav-user-logout {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    background-color: var(--fto-secondary);
    background-image: linear-gradient(135deg, rgba(255,255,255,0.16), rgba(0,0,0,0.10));
    color: #fff !important;
    padding: 10px 12px;
    border-radius: 14px;
    text-decoration: none;
    width: 100%;
}

.fto-app-username {
    font-size: 0.9rem;
    color: #555;
    text-decoration: none;
}

.fto-app-username:hover {
    text-decoration: underline;
}

/* Mobiel: maak profiel-link in header duidelijk klikbaar */
@media (max-width: 900px) {
    .fto-app-username.fto-profile-link {
        padding: 8px 10px;
        border: 1px solid rgba(0,0,0,0.10);
        border-radius: 14px;
        background: #ffffff;
        text-decoration: none;
    }

    .fto-app-username.fto-profile-link:hover {
        text-decoration: none;
        filter: brightness(0.98);
    }

    .fto-app-username .fto-profile-link-pill--desktop {
        display: inline-flex;
    }
}

.fto-app-logout,
.fto-app-login {
    font-size: 0.85rem;
    background-color: var(--fto-secondary);
    background-image: linear-gradient(135deg, rgba(255,255,255,0.16), rgba(0,0,0,0.10));
    color: #fff !important;
    padding: 6px 10px;
    border-radius: 999px;
    text-decoration: none;
}

/* Main area */
.fto-app-main {
    flex: 1;
    padding: 24px 32px 40px;
}

.fto-app-main-inner {
    max-width: 1100px;
    margin: 0 auto;
}

/* =========================================================
   Cards, grids
========================================================= */
.fto-card,
.fto-meeting-card,
.fto-document-card,
.fto-smoelen-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 20px 22px;
    margin-bottom: 20px;
    border: 1px solid #E1E4EE;
    border-left: 4px solid var(--fto-primary);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
    transition: box-shadow 0.15s ease;
}

/* Eerstvolgende FTO - opvallende stijl */
.fto-meeting-card.is-next {
    border-left-width: 5px;
    border-left-color: var(--fto-secondary-strong);
    background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 100%);
    box-shadow: 0 6px 20px rgba(34, 87, 52, 0.12);
    padding-top: 22px; /* ruimte voor badge */ /* Extra ruimte voor badge */
    margin-top: 16px;
    position: relative;
}

/* Badge "Eerstvolgende" */
.fto-meeting-badge {
    display: inline-block;
    background: var(--fto-secondary-strong);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 4px 12px;
    border-radius: 20px;
    position: absolute;
    top: 0;
    transform: translateY(-50%);

    left: 20px;
    box-shadow: 0 2px 8px rgba(34, 87, 52, 0.25);
}

/* Verlopen FTO's - subtielere stijl */
.fto-meeting-card.is-past {
    opacity: 0.75;
    border-left-color: #c3c4c7;
    background: #fafafa;
}
.fto-meeting-card.is-past:hover {
    opacity: 1;
}

/* Container voor verlopen bijeenkomsten */
.fto-meetings-past {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid #E1E4EE;
}

/* Toggle button voor verlopen bijeenkomsten */
.fto-past-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    background: #f6f7f7;
    border: 1px solid #dcdcde;
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 0.95rem;
    font-weight: 500;
    color: #50575e;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.fto-past-toggle:hover {
    background: #f0f0f1;
    color: #1d2327;
}
.fto-past-toggle-icon {
    font-size: 0.75rem;
    transition: transform 0.2s ease;
}
.fto-past-toggle.is-open .fto-past-toggle-icon {
    transform: rotate(90deg);
}

/* Content container */
.fto-past-content {
    margin-top: 20px;
}

/* ========================================
   MOBIEL: Meeting cards en agenda items
   ======================================== */
@media (max-width: 600px) {
    .fto-meeting-card {
        padding: 14px;
    }
    
    .fto-meeting-card.is-next {
        padding-top: 22px;
    }
    
    /* Header: datum en titel naast elkaar */
    .fto-meeting-header {
        flex-direction: row;
        align-items: flex-start;
        gap: 12px;
        margin-bottom: 8px;
    }
    
    .fto-meeting-date {
        width: 42px;
        height: 48px;
        flex-shrink: 0;
    }
    
    .fto-meeting-titlewrap {
        flex: 1;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    
    .fto-meeting-titleblock {
        width: 100%;
    }
    
    .fto-meeting-titleblock h3 {
        font-size: 1rem;
        margin-bottom: 2px;
    }
    
    .fto-meeting-location {
        font-size: 0.85rem;
    }
    
    /* Body: datum/tijd/voorbereiding compact */
    .fto-meeting-body {
        padding-left: 54px; /* Align met titel */
    }
    
    .fto-meeting-body p {
        font-size: 0.875rem;
        margin: 4px 0;
    }
    
    /* Acties: onderaan op één regel */
    .fto-meeting-actions {
        display: flex;
        justify-content: flex-end;
        width: calc(100% + 54px);
        margin-left: -54px;
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px solid #E1E4EE;
        gap: 8px;
    }
    
    .fto-meeting-actions .fto-action-btn {
        font-size: 0.75rem;
        padding: 5px 10px;
        opacity: 0.65;
    }
    
    .fto-meeting-actions .fto-action-btn:hover {
        opacity: 1;
    }
}

.fto-card:hover,
.fto-meeting-card:hover,
.fto-document-card:hover,
.fto-smoelen-card:hover {
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
}

.fto-card h3,
.fto-meeting-card h3,
.fto-document-card h3,
.fto-smoelen-card h3 {
    margin-top: 0;
    margin-bottom: 8px;
    color: var(--fto-primary);
    font-weight: 600;
    font-size: 1.15rem;
    line-height: 1.25;
}

.fto-card p,
.fto-meeting-card p,
.fto-document-card p,
.fto-smoelen-card p {
    margin: 6px 0;
    color: #333;
    font-size: 0.88rem !important;
    line-height: 1.5;
}



/* Smoelenboek acties */
.fto-smoelen-actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-top:12px;
    align-items:center;
}
.fto-smoelen-actions form{ margin:0; }
.fto-smoelen-actions .fto-action-btn{ white-space:nowrap; }
.fto-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 22px;
    margin-bottom: 26px;
    align-items: stretch;
}

/* Zorg dat dashboard-tegels gelijk hoog zijn */
.fto-dashboard-grid .fto-card {
    height: 100%;
    display: flex;
    flex-direction: column;
}
.fto-dashboard-grid .fto-card > a.fto-btn-primary,
.fto-dashboard-grid .fto-card > a.fto-btn-secondary {
    margin-top: auto;
    align-self: flex-start;
}
.fto-dashboard-grid .fto-card .fto-card-werkafspraken-actions {
    margin-top: auto;
}

/* 4 kolommen op brede schermen (tips-tegel komt rechts naast de 3 tegels) */
@media (min-width: 1200px) {
    .fto-dashboard-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Dashboard tips strip (optie B) */
.fto-dashboard-tips-strip{
  /* Extra ruimte boven/onder zodat de pin niet "afgesneden" oogt en de sectie ademruimte heeft */
  margin: 72px 0 58px;
}

.fto-dashboard-tips-strip-head{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.fto-dashboard-tips-strip-title{
  font-size: 18px;
  font-weight: 700;
  margin-top: 2px;
}

.fto-dashboard-tips-strip-link{
  font-weight: 600;
  color: var(--fto-primary);
  text-decoration: none;
  white-space: nowrap;
}

.fto-dashboard-tips-strip-slider{
  position: relative;
  width: 100%;
  padding: 4px 0 6px;
}

/* Hard reset: voorkom theme-CSS die viewport/track centreert of shrink-to-fit maakt */
.fto-dashboard-tips-strip .fto-tip-strip-viewport{
  width: 100% !important;
  display: block !important;
  /* ruimte voor de pin (pin steekt boven de post-it uit) */
  padding-top: 14px;
  padding-bottom: 10px;
  overflow-y: visible;
}

.fto-dashboard-tips-strip .fto-tip-strip-track{
  width: 100% !important;
}

/* Maak post-its in het dashboard compact maar 'post-it' achtig (zelfde hoogte) */
.fto-dashboard-tips-strip .fto-tip-postit{
  padding: 16px 16px 14px;
  width: 100%;
  max-width: none;
  min-height: 250px;
  height: 250px;
  /* Niet verbergen, anders wordt de pin bovenaan afgesneden */
  overflow: visible;
  display: flex;
  flex-direction: column;
}

/* Clamp tekst zodat post-its even hoog blijven */
.fto-dashboard-tips-strip .fto-tip-title{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.fto-dashboard-tips-strip .fto-tip-content{
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.fto-dashboard-tips-strip .fto-tip-meta{
  margin-top: auto;
}

.fto-dashboard-tips-strip .fto-tip-title{ font-size: 18px; }


.fto-dashboard-tips-strip .fto-tip-meta{
  margin-top: auto;
}

/* Nav knoppen: alleen op mobiel (slider) */
.fto-tip-strip-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.08);
  background: rgba(255,255,255,0.9);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  color: #222;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
  pointer-events: auto;
  touch-action: manipulation;
}
.fto-tip-strip-nav--prev{ left: 6px; }
.fto-tip-strip-nav--next{ right: 6px; }

/* Desktop: 3 post-its naast elkaar (kleiner, strak in 1 rij) */
@media (min-width: 901px){
  /* Center de strip zodat post-its niet uitrekken over de hele pagina */
  .fto-dashboard-tips-strip-slider{
    max-width: 1100px;
    margin: 0 auto;
  }

  .fto-dashboard-tips-strip .fto-tip-strip-viewport{
    overflow: visible !important;
  }

  .fto-dashboard-tips-strip .fto-tip-strip-track{
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    transform: none !important;
  }

  .fto-dashboard-tips-strip .fto-tip-strip-item{
    display: block;
    text-decoration: none;
    color: inherit;
    width: 100%;
    max-width: none;
  }

  /* Alleen de eerste 3 tonen op desktop (de rest via 'Bekijk alles') */
  .fto-dashboard-tips-strip .fto-tip-strip-item:nth-child(n+4){
    display: none !important;
  }

  /* Pijlen nooit op desktop */
  .fto-tip-strip-nav{ display: none !important; }
}

/* Mobiel: 1 post-it per view + < > om te wisselen */
@media (max-width: 900px){
  .fto-dashboard-tips-strip .fto-tip-strip-viewport{
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
  }
  .fto-dashboard-tips-strip .fto-tip-strip-viewport::-webkit-scrollbar{
    display: none;
  }

  .fto-dashboard-tips-strip .fto-tip-strip-track{
    display: flex;
    gap: 12px;
    width: auto !important;
    min-width: 0;
    transform: none !important;
  }

  .fto-dashboard-tips-strip .fto-tip-strip-item{
    display: block;
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .fto-tip-strip-nav{
    display: flex;
  }
}

/* Dashboard: timeline module (boven agenda blok) */
.fto-dashboard-timeline{
    margin: 34px 0 34px;
}
.fto-dashboard-timeline-head{
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}
.fto-dashboard-timeline-head .fto-h3{
    grid-column: 2;
    margin-bottom: 0;
    text-align: center;
}
.fto-dashboard-timeline-head a{
    grid-column: 3;
    justify-self: end;
}
.fto-dashboard-timeline-head p{ margin: 0; }

@media (max-width: 640px){
  .fto-dashboard-timeline-head{ grid-template-columns: 1fr; }
  .fto-dashboard-timeline-head .fto-h3{ grid-column: 1; }
  .fto-dashboard-timeline-head a{ grid-column: 1; justify-self: center; margin-top: 8px; }
}


.fto-dashboard-grid-small {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    margin-bottom: 26px;
}

/* Buttons */
.fto-btn,
.fto-btn-small {
    display: inline-block;
    background: var(--fto-primary);
    color: #ffffff !important;
    padding: 9px 14px;
    border-radius: 999px;
    text-decoration: none;
    margin-top: 12px;
    font-weight: 600;
    font-size: 0.9rem;
}

.fto-btn-small {
    background: var(--fto-secondary);
}

.fto-doc-download {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.10);
    text-decoration: none;
    font-weight: 800;
    color: var(--fto-primary) !important;
}

/* Dashboard ical block */
.fto-dashboard-ical {
    margin-top: 30px;
    padding: 18px 20px;
    background: #DBE1D4;
    border-radius: 14px;
}

.fto-dashboard-ical code {
    display: inline-block;
    padding: 6px 8px;
    background: #FBF4F1;
    border-radius: 6px;
    font-family: monospace;
    font-size: 0.9rem;
}


/* =========================================================
   Compact meeting header layout (v4)
========================================================= */
.fto-meeting-line1 {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    min-width: 0;
}

.fto-meeting-title {
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
    word-break: break-word;
}

.fto-meeting-time-pill {
    font-size: 0.82rem;
    color: rgba(0,0,0,0.65);
    background: rgba(0,0,0,0.04);
    border: 1px solid rgba(0,0,0,0.06);
    padding: 4px 10px;
    border-radius: 999px;
    white-space: nowrap;
}

.fto-meeting-line2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 4px;
    min-width: 0;
}

.fto-meeting-meta-text {
    font-size: 0.88rem;
    color: rgba(0,0,0,0.62);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fto-meeting-meta-lbl {
    font-weight: 650;
    color: rgba(0,0,0,0.55);
}

.fto-meeting-meta-sep {
    opacity: 0.35;
    margin: 0 6px;
}

.fto-meeting-speakerline {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
}

.fto-meeting-body--docs-only {
    margin-top: 8px;
    padding-left: 60px; /* align with title next to date badge */
}

@media (max-width: 600px) {
    .fto-meeting-body--docs-only {
        padding-left: 54px;
    }
}

}

/* =========================================================
   Jaarplanning & meetings
========================================================= */
.fto-jaarplanning {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

.fto-meeting-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 8px;
}

.fto-meeting-date {
    width: 46px;
    height: 52px;
    border-radius: 12px;
    background-color: var(--fto-primary);
    background-image: linear-gradient(135deg, rgba(255,255,255,0.14), rgba(0,0,0,0.10));
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.fto-meeting-day {
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1;
}

.fto-meeting-month {
    font-size: 0.8rem;
    text-transform: uppercase;
}

.fto-meeting-titleblock h3 {
    margin: 0;
}

.fto-meeting-location {
    margin: 2px 0 0;
    color: #555;
    font-size: 0.9rem;
}

.fto-meeting-titlewrap {
    flex: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
}

.fto-meeting-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-left: auto;
}

/* =========================================================
   Agenda (sleeek)
========================================================= */
.fto-agenda-month {
    color: var(--fto-primary);
    margin-top: 26px;
    margin-bottom: 8px;
    font-size: 1.1rem;
}

.fto-agenda-list {
    list-style: none;
    padding: 0;
    margin: 0 0 12px 0;
}

.fto-agenda-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 10px 14px;
    margin-bottom: 10px;
    background: #ffffff;
    border-radius: 14px;
    border: 1px solid #DBE1D4;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
    position: relative;
}

/* Eerstvolgende agenda item */
.fto-agenda-item.is-next {
    background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 100%);
    border-color: var(--fto-secondary);
    box-shadow: 0 6px 16px rgba(34, 87, 52, 0.1);
    margin-top: 16px;
    padding-top: 20px;
}
.fto-agenda-item.is-next > .fto-meeting-badge {
    position: absolute;
    top: 0;
    transform: translateY(-50%);
    left: 14px;
    margin: 0;

    font-size: 0.55rem;
    padding: 2px 8px;
}

/* Verlopen agenda item */
.fto-agenda-item.is-past {
    opacity: 0.7;
    background: #fafafa;
}
.fto-agenda-item.is-past:hover {
    opacity: 1;
}
.fto-agenda-item.is-past .fto-agenda-date-badge {
    background-color: #9ca3af;
}

/* ========================================
   MOBIEL: Agenda items
   ======================================== */
@media (max-width: 600px) {
    .fto-agenda-item {
        padding: 12px;
    }
    
    .fto-agenda-item.is-next {
        padding-top: 20px;
    }
    
    /* Datum badge kleiner */
    .fto-agenda-date-badge {
        width: 40px;
        height: 46px;
        flex-shrink: 0;
    }
    
    .fto-agenda-day {
        font-size: 1rem;
    }
    
    .fto-agenda-month-short {
        font-size: 0.7rem;
    }
    
    .fto-agenda-content {
        flex: 1;
        min-width: 0;
    }
    
    /* Titel en tijd op één regel waar mogelijk */
    .fto-agenda-title-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
    
    .fto-agenda-title-left {
        width: 100%;
    }
    
    .fto-agenda-title-left .topic {
        font-size: 0.95rem;
    }
    
    /* Acties: onderaan op één regel */
    .fto-agenda-actions {
        width: 100%;
        justify-content: flex-end;
        padding-top: 8px;
        margin-top: 6px;
        border-top: 1px solid #E1E4EE;
        flex-direction: row;
    }
    
    .fto-agenda-actions .fto-action-btn {
        font-size: 0.7rem;
        padding: 4px 8px;
        opacity: 0.6;
    }
    
    .fto-agenda-actions .fto-action-btn:hover {
        opacity: 1;
    }
    
    /* Locatie en voorbereiding compacter */
    .fto-agenda-item .location,
    .fto-agenda-item .prep {
        font-size: 0.85rem;
        margin-top: 4px;
    }
}

.fto-agenda-date-badge {
    width: 44px;
    height: 50px;
    border-radius: 12px;
    background-color: var(--fto-secondary);
    background-image: linear-gradient(135deg, rgba(255,255,255,0.14), rgba(0,0,0,0.10));
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.fto-agenda-day {
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1;
}

.fto-agenda-month-short {
    font-size: 0.8rem;
    text-transform: uppercase;
}

.fto-agenda-content {
    flex: 1;
}

.fto-agenda-title-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 2px;
}

.fto-agenda-title-left {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    min-width: 0;
}

.fto-agenda-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-left: auto;
}

.fto-agenda-item .time {
    font-size: 0.85rem;
    color: rgba(0,0,0,0.65);
    background: rgba(0,0,0,0.04);
    border: 1px solid rgba(0,0,0,0.06);
    padding: 4px 10px;
    border-radius: 999px;
}


/* Agenda: 1 compacte meta-regel onder titel */
.fto-agenda-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 2px;
    min-width: 0;
}

.fto-agenda-meta-text {
    font-size: 0.86rem;
    color: rgba(0,0,0,0.62);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fto-agenda-speakers {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* =========================================================
   Mobile verbeteringen: agenda/jaarplanning kaarten
   - Meer ruimte voor titel
   - Actieknoppen rechts onder elkaar en kleiner
========================================================= */
@media (max-width: 600px) {
    /* Agenda kaart (maandlijst) */
    .fto-agenda-title-row {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .fto-agenda-title-left {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        flex-wrap: nowrap;
    }

    .fto-agenda-title-left .topic {
        display: block;
        width: 100%;
        min-width: 0;
        word-break: break-word;
    }

    .fto-agenda-actions {
        width: 100%;
        margin-left: 0;
        justify-content: flex-end;
        flex-direction: column;
        align-items: flex-end;
        gap: 6px;
    }

    .fto-agenda-actions .fto-action-btn {
        padding: 5px 10px;
        font-size: 0.78rem;
    }

    /* Jaarplanning kaart (detailkaart) */
    .fto-meeting-titlewrap {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .fto-meeting-actions {
        width: 100%;
        margin-left: 0;
        justify-content: flex-end;
        flex-direction: column;
        align-items: flex-end;
        gap: 6px;
    }

    .fto-meeting-actions .fto-action-btn {
        padding: 5px 10px;
        font-size: 0.78rem;
    }
}

/* Subtiele actieknoppen (Bewerk / Verwijderen) */
.fto-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.82rem !important;
    font-weight: 600;
    color: rgba(0,0,0,0.60);
    text-decoration: none;
    background: rgba(255,255,255,0.70);
    border: 1px solid rgba(0,0,0,0.08);
    padding: 6px 10px;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.16s ease;
    white-space: nowrap;
}

.fto-action-btn:hover {
    color: rgba(0,0,0,0.85);
    background: rgba(0,0,0,0.04);
    box-shadow: 0 10px 26px rgba(0,0,0,0.05);
}

.fto-action-btn.is-danger:hover {
    color: #991B1B;
    border-color: rgba(245,181,181,0.85);
    background: rgba(245,181,181,0.18);
    box-shadow: 0 10px 26px rgba(245,181,181,0.22);
}


.fto-agenda-item .topic {
    font-weight: 600;
    color: #333;
}

.fto-agenda-item .location {
    font-size: 0.9rem;
    color: #666;
}

.fto-agenda-item .prep {
    font-size: 0.85rem;
    color: #777;
    margin-top: 4px;
}

/* =========================================================
   Timeline
========================================================= */
.fto-timeline-wrapper {
    padding-bottom: 10px;
}

.fto-timeline {
    display: flex;
    gap: 16px;
    position: relative;
    padding: 18px 4px 12px;
    overflow-x: auto;
}


.fto-timeline-item {
    position: relative;
    min-width: 210px;
    background: #ffffff;
    border-radius: 14px;
    padding: 10px 12px 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.04);
    border: 1px solid #DBE1D4;
    cursor: pointer;
    z-index: 2;
}

.fto-timeline-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--fto-primary);
    position: absolute;
    top: 35px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 0;
}

.fto-timeline-header {
    text-align: center;
    margin-top: 32px;
    margin-bottom: 6px;
}

.fto-timeline-date {
    font-weight: 600;
    color: var(--fto-primary);
    font-size: 0.9rem;
}

.fto-timeline-title {
    font-size: 0.9rem;
    color: #333;
}

.fto-timeline-body {
    display: none;
    font-size: 0.85rem;
    margin-top: 6px;
    border-top: 1px solid #F1E6E1;
    padding-top: 6px;
}

.fto-timeline-item.active .fto-timeline-body {
    display: block;
}

/* =========================================================
   Smoelenboek
========================================================= */
.fto-smoelenboek-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    align-items: stretch;
}

/* Houd kaartverhoudingen rustiger: laat kaarten de volledige grid-hoogte pakken */
.fto-smoelenboek-grid .fto-smoelen-card {
    height: 100%;
}

.fto-smoelenboek-grid:not(.fto-smoelenboek-grid--compact) .fto-smoelen-card {
    display: flex;
    flex-direction: column;
}

.fto-smoelenboek-grid:not(.fto-smoelenboek-grid--compact) .fto-smoelen-actions {
    margin-top: auto;
}

/* Compacte variant: meer mensen naast elkaar */
.fto-smoelenboek-grid--compact {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}

.fto-smoelenboek-grid--compact .fto-smoelen-card {
    padding: 14px 16px;
    margin-bottom: 0;
    border-radius: 14px;
    border-left-width: 3px;
    /* Desktop: grid layout met foto rechts */
    display: grid;
    grid-template-columns: 1fr 120px;
    grid-template-rows: auto auto;
    gap: 0 14px;
}

/* Content links */
.fto-smoelen-content {
    grid-column: 1;
    grid-row: 1;
}

/* Foto rechts */
.fto-smoelenboek-grid--compact .fto-smoelen-card .fto-avatar {
    grid-column: 2;
    grid-row: 1;
    width: 120px;
    justify-self: end;
}

.fto-smoelenboek-grid--compact .fto-smoelen-photo {
    width: 120px;
    height: 120px;
    border-radius: 12px;
    object-fit: cover;
}

/* Acties onderaan links */
.fto-smoelenboek-grid--compact .fto-smoelen-actions {
    grid-column: 1 / -1;
    grid-row: 2;
}

.fto-smoelenboek-grid--compact .fto-smoelen-card h3 {
    font-size: 1rem;
    margin-bottom: 6px;
}

.fto-smoelenboek-grid--compact .fto-smoelen-card p {
    font-size: 0.88rem;
    margin: 5px 0;
}

/* Naam link in smoelenboek - duidelijk klikbaar */
.fto-smoelen-name-link {
    color: var(--fto-primary);
    text-decoration: none;
    display: inline-block;
    padding: 4px 12px;
    margin: -4px -12px;
    border-radius: 8px;
    transition: background 0.15s, color 0.15s;
}
.fto-smoelen-name-link:hover {
    background: var(--fto-primary-bg, #F5F6FB);
    color: var(--fto-primary-strong, #3A56D0);
    text-decoration: none;
}

@media (max-width: 600px) {
    .fto-smoelenboek-grid--compact {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    /* Mobiele smoelenboek card: foto rechts kleiner */
    .fto-smoelenboek-grid--compact .fto-smoelen-card {
        grid-template-columns: 1fr 96px;
    }
    
    /* Foto rechts, kleiner op mobiel */
    .fto-smoelenboek-grid--compact .fto-smoelen-card .fto-avatar {
        width: 96px;
    }
    
    .fto-smoelenboek-grid--compact .fto-smoelen-photo {
        width: 96px;
        height: 96px;
        border-radius: 10px;
    }
    
    /* Naam link compacter op mobiel */
    .fto-smoelen-name-link {
        padding: 6px 14px;
        margin: -4px -14px 4px;
        background: var(--fto-primary-bg, #F5F6FB);
        font-size: 0.95rem;
    }
    
    /* Acties onderaan met scheidingslijn */
    .fto-smoelenboek-grid--compact .fto-smoelen-actions {
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px solid #E1E4EE;
    }
}

.fto-smoelen-photo {
    width: 100%;
    border-radius: 12px;
    margin-bottom: 10px;
    object-fit: cover;
}

/* =========================================================
   Documenten
========================================================= */
.fto-documenten-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}

/* Documenten: compacter kaartdesign (alleen in de bibliotheek) */
.fto-documenten-grid .fto-document-card {
    padding: 14px 16px;
    margin-bottom: 0; /* grid-gap bepaalt spacing */
    border-radius: 14px;
}

.fto-documenten-grid .fto-document-card h3 {
    font-size: 1.02rem;
    margin-bottom: 6px;
}

.fto-documenten-grid .fto-document-card p {
    margin: 4px 0;
    font-size: 0.92rem;
    line-height: 1.45;
}

.fto-documenten-grid .fto-doc-topic {
    margin: 2px 0 6px;
    font-size: 0.9rem;
}

.fto-documenten-grid .fto-doc-meta {
    margin-bottom: 6px;
    gap: 6px;
    flex-wrap: wrap;
}

.fto-documenten-grid .fto-doc-badge {
    padding: 1px 7px;
    font-size: 0.74rem;
}

.fto-documenten-grid .fto-doc-type {
    font-size: 0.78rem;
}

.fto-documenten-grid .fto-doc-actions {
    margin-top: 8px;
    gap: 8px;
}

.fto-documenten-grid .fto-action-btn {
    padding: 5px 9px;
    font-size: 0.78rem;
}

.fto-doc-topic {
    margin: 2px 0 8px;
    color: #555;
}

.fto-doc-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.fto-doc-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    background: #DBE1D4;
    font-size: 0.78rem;
}

.fto-doc-type {
    font-size: 0.82rem;
    color: #666;
}

/* =========================================================
   Filters & search
========================================================= */
.fto-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    margin-bottom: 32px;
    align-items: flex-end;
}

.fto-filter-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.fto-filter-group label {
    font-size: 0.8rem;
    color: #555;
}

.fto-filter-group input[type="text"],
.fto-filter-group input[type="number"],
.fto-filter-group select {
    min-width: 160px;
    padding: 6px 8px;
    border-radius: 8px;
    border: 1px solid #DBE1D4;
    font-size: 0.9rem;
}

.fto-filter-actions button {
    padding: 8px 14px;
    border-radius: 999px;
    border: none;
    background: var(--fto-primary);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    font-size: 0.9rem;
}

/* =========================================================
   Login
========================================================= */

/* Responsive + hamburger */
@media (max-width: 900px) {
    .fto-app-header {
        flex-wrap: wrap;
        padding: 12px 16px;
        gap: 12px;
    }

    .fto-app-logo {
        order: 1;
    }

    .fto-nav-toggle {
        display: inline-flex;
        order: 2;
        margin-left: auto;
        position: relative;
        z-index: 60;
    }

    .fto-app-user {
        order: 3;
        width: 100%;
        justify-content: flex-end;
        display: none;
    }

    .fto-app-nav {
        order: 4;
        width: 100%;
        display: none;
        flex-direction: column;
        padding-top: 10px;
        border-top: 1px solid #E5D7D1;
        position: relative;
        z-index: 60;
    }

    .fto-app-tab {
        width: 100%;
        border-radius: 14px;
        padding: 10px 12px;
        background: rgba(0,0,0,0.02);
        border: 1px solid rgba(0,0,0,0.06);
    }

    .fto-nav-open .fto-app-nav {
        display: flex;
    }

    .fto-nav-overlay {
        display: none;
    }

    .fto-nav-open .fto-nav-overlay {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.08);
        z-index: 10;
    }

    .fto-nav-open .fto-nav-user {
        display: block;
    }

    .fto-app-main {
        padding: 18px 16px 32px;
    }

    .fto-filter-bar {
        flex-direction: column;
        align-items: stretch;
    }
}


/* =========================================================
   Upload module
========================================================= */
.fto-upload-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 24px 24px 26px;
    box-shadow: 0 14px 35px rgba(0,0,0,0.08);
    border: 1px solid #E3E6F0;
    max-width: 640px;
    margin: 0 auto 26px;
}

.fto-upload-card h2 {
    margin-top: 0;
    margin-bottom: 6px;
    color: #222533;
    font-size: 1.4rem;
}

.fto-upload-intro {
    margin-top: 0;
    margin-bottom: 18px;
    color: #555;
}

.fto-upload-errors {
    border-radius: 14px;
    background: var(--fto-danger-bg);
    border: 1px solid var(--fto-danger);
    padding: 10px 14px;
    margin-bottom: 14px;
    font-size: 0.9rem;
}

.fto-upload-errors ul {
    margin: 0;
    padding-left: 20px;
}

.fto-upload-success {
    border-radius: 14px;
    background: var(--fto-secondary-bg);
    border: 1px solid var(--fto-secondary);
    padding: 10px 14px;
    margin-bottom: 14px;
    font-size: 0.9rem;
    color: var(--fto-secondary-strong);
}

.fto-upload-form .fto-field {
    margin-bottom: 14px;
}

.fto-upload-form label {
    display: block;
    font-size: 0.85rem;
    margin-bottom: 4px;
    color: #555;
}

.fto-upload-form input[type="text"],
.fto-upload-form textarea,
.fto-upload-form select {
    width: 100%;
    padding: 8px 10px;
    border-radius: 12px;
    border: 1px solid #DBE1D4;
    font-size: 0.95rem;
}

.fto-upload-drop {
    border-radius: 16px;
    border: 1px dashed var(--fto-primary-soft);
    background: #FBF4F1;
    padding: 18px 14px;
    text-align: center;
    position: relative;
    overflow: hidden;
    min-height: 96px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.fto-upload-drop input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    margin: 0;
}

.fto-upload-drop p {
    margin: 0;
    font-size: 0.85rem;
    color: #555;
}

/* Compacte variant voor smalle kolommen (sidebar / profiel / registratie) */
.fto-upload-drop--inline {
    max-width: 100%;
    margin-top: 6px;
}
.fto-upload-drop--inline p {
    margin: 0;
}

.fto-upload-actions {
    margin-top: 14px;
    text-align: right;
}

.fto-btn-primary {
    display: inline-block;
    background: var(--fto-primary);
    color: #ffffff !important;
    border-radius: 999px;
    padding: 9px 18px;
    border: none;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 600;
    box-shadow: 0 8px 20px rgba(79,109,245,0.35);
}

.fto-btn-primary:hover {
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.12);
}

/* =========================================================
   Nieuwe timeline shell (full width)
========================================================= */
.fto-timeline-shell {
    margin-top: 10px;
}

.fto-timeline-bar {
    position: relative;
    margin-top: 14px;
    padding: 10px 40px 14px;
}

.fto-timeline-track {
    position: relative;
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding: 24px 2px 12px;
    scroll-behavior: smooth;
}

.fto-timeline-track::before {
    content: "";
    position: absolute;
    top: 42px;
    left: 0;
    right: 0;
    height: 2px;
    background: #DBE1D4;
    z-index: 1;
}

.fto-timeline-track::-webkit-scrollbar {
    height: 6px;
}

.fto-timeline-track::-webkit-scrollbar-thumb {
    background: var(--fto-primary-soft);
    border-radius: 999px;
}

.fto-timeline-bar::before {
    content: "";
    position: absolute;
    left: 40px;
    right: 40px;
    top: 48px;
    height: 2px;
    background: #DBE1D4;
    z-index: 1;
}

.fto-timeline-card {
    position: relative;
    min-width: 220px;
    max-width: 260px;
    background: #ffffff;
    border-radius: 18px;
    padding: 12px 12px 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.06);
    border: 1px solid #E3E6F0;
    cursor: pointer;
    z-index: 2;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.fto-timeline-card:hover {
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
}

.fto-timeline-card.active {
    border-color: var(--fto-primary);
    box-shadow: 0 16px 40px rgba(79,109,245,0.25);
}

.fto-timeline-card .fto-timeline-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--fto-primary);
    position: absolute;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 0;
}

.fto-timeline-card .fto-timeline-header {
    text-align: center;
    margin-bottom: 6px;
    margin-top: 32px;
}

.fto-timeline-card .fto-timeline-date {
    font-weight: 600;
    color: var(--fto-primary);
    font-size: 0.9rem;
}

.fto-timeline-card .fto-timeline-title {
    font-size: 0.95rem;
    color: #222533;
}

.fto-timeline-card .fto-timeline-body {
    display: none;
    font-size: 0.85rem;
    margin-top: 6px;
    border-top: 1px solid #F1E6E1;
    padding-top: 6px;
}

.fto-timeline-card.active .fto-timeline-body {
    display: block;
}

.fto-timeline-arrow {
    position: absolute;
    top: 40px;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: none;
    background: #ffffff;
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    font-size: 1.4rem;
    line-height: 1;
    color: var(--fto-primary);
}

.fto-timeline-arrow.left {
    left: 8px;
}

.fto-timeline-arrow.right {
    right: 8px;
}

/* Dashboard calendar hint */
.fto-dashboard-ical {
    margin-top: 30px;
    padding: 18px 20px;
    background-color: var(--fto-primary-bg);
    background-image: linear-gradient(135deg, rgba(255,255,255,0.65), rgba(255,255,255,0));
    border-radius: 14px;
    border: 1px solid var(--fto-primary-soft);
}

.fto-ical-hint {
    font-size: 0.85rem;
    color: #555;
    margin-top: 8px;
}


/* Override base timeline line with gradient */
.fto-timeline-bar--full::before {
    content: "";
    position: absolute;
    left: 40px;
    right: 40px;
    top: 60px;
    height: 2px;
    background: linear-gradient(to right,
        rgba(79,109,245,0),
        rgba(79,109,245,0.32),
        rgba(79,109,245,0));
    z-index: 1;
}

/* Month/year markers */
.fto-timeline-marker {
    position: relative;
    min-width: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding-bottom: 24px;
}

.fto-timeline-year {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--fto-primary);
    margin-bottom: 4px;
}

.fto-timeline-month {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.fto-timeline-month-dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--fto-primary);
    box-shadow: 0 0 0 4px rgba(79,109,245,0.15);
}

.fto-timeline-month-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: #6A6F80;
}

/* Update card date for nicer layout */
.fto-timeline-card .fto-timeline-header {
    text-align: center;
    margin-bottom: 6px;
    margin-top: 34px;
}

.fto-timeline-card .fto-timeline-date {
    font-weight: 600;
    color: var(--fto-primary);
    font-size: 0.9rem;
}

/* Upload button in dropzone */
.fto-upload-drop input[type="file"] {
    margin-bottom: 8px;
}





/* Login page background override (geen witte onderkant) */
.fto-app-body.fto-login-page {
    background: var(--fto-app-bg-top);
}

/* =========================================================
   Login & registratie
========================================================= */
.fto-login-wrap {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    background: transparent;
}

.fto-login-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 22px 22px 20px;
    max-width: 420px;
    width: 100%;
    box-shadow: 0 18px 45px rgba(0,0,0,0.10);
    border: 1px solid #E3E6F0;
}

.fto-login-branding {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.fto-login-logo img {
    max-height: 110px;
    width: auto;
    display: block;
    object-fit: contain;
}

.fto-login-textlogo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 999px;
    background: rgba(0,0,0,0.03);
    border: 1px solid rgba(0,0,0,0.06);
}

.fto-login-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    min-width: 34px;
    padding: 0 10px;
    border-radius: 999px;
    background: var(--fto-primary);
    color: #fff;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.fto-login-text {
    font-weight: 800;
    color: #1E2230;
    letter-spacing: -0.01em;
}

 .fto-login-slogan {
    text-align: center;
    color: rgba(0,0,0,0.72);
    font-size: 1.05rem;
    line-height: 1.35;
    font-weight: 700;
    font-style: italic;
    display: inline-block;
    transform: skewX(-8deg);
    margin-top: 8px;
}

/* Stack meerdere kaarten onder elkaar (registratie-success + 2FA) */
.fto-login-stack {
    width: 100%;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.fto-login-stack .fto-login-card {
    max-width: 100%;
}

/* 2FA kaart (WP 2FA front-end) */
.fto-wp2fa-card {
    border-left: none;
}

/* Nettere typografie binnen de WP 2FA configuratie (front-end profiel) */
.fto-wp2fa-card .wp-2fa-configuration-form h2,
.fto-wp2fa-card .wp-2fa-configuration-form h3 {
    font-size: 1.12rem;
    line-height: 1.25;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 16px 0 10px;
}

.fto-wp2fa-card .wp-2fa-configuration-form p,
.fto-wp2fa-card .wp-2fa-configuration-form li {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #3C3F4D;
}

.fto-wp2fa-card .wp-2fa-configuration-form ul {
    margin: 8px 0 14px 18px;
}

.fto-wp2fa-card .wp-2fa-configuration-form {
    margin-top: 14px;
}

/* WP 2FA (front-end) in FTO huisstijl */
.fto-app-body .wp-2fa-configuration-form .button,
.fto-app-body .wp-2fa-configuration-form .button-primary,
.fto-app-body .wp-2fa-configuration-form .button-secondary {
    border-radius: 999px !important;
    padding: 10px 16px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

.fto-app-body .wp-2fa-configuration-form .button-primary,
.fto-app-body .wp2fa-modal .modal__btn-primary,
.fto-app-body .wp2fa-modal .wp2fa-setup-actions .button-primary {
    background: var(--fto-primary) !important;
    border-color: var(--fto-primary) !important;
    color: #fff !important;
}

/* =========================================================
   WP 2FA login verificatie (validate_2fa) binnen FTO app shell
   ========================================================= */

.fto-app-body #loginform {
    margin: 22px auto 0;
    max-width: 420px;
    width: 100%;
}

.fto-app-body #loginform p {
    margin: 12px 0;
}

.fto-app-body #loginform label {
    display: block;
    margin: 0 0 8px;
    font-weight: 700;
    color: #6A6F80;
    text-align: left;
}

.fto-app-body #loginform input#authcode,
.fto-app-body #loginform input[name="authcode"] {
    width: 100%;
    border-radius: 14px;
    border: 1px solid #DBE1D4;
    padding: 10px 12px;
    font-size: 1rem;
    background: #ffffff;
}

.fto-app-body #loginform p.submit {
    margin-top: 14px;
}

.fto-app-body #loginform #wp-submit,
.fto-app-body #loginform input[name="wp-submit"],
.fto-app-body #loginform input[type="submit"],
.fto-app-body #loginform button[type="submit"],
.fto-app-body #loginform .button.button-primary,
.fto-app-body #loginform .button-primary,
.fto-app-shell #loginform #wp-submit,
.fto-app-shell #loginform input[name="wp-submit"],
.fto-app-shell #loginform input[type="submit"],
.fto-app-shell #loginform button[type="submit"],
.fto-app-shell #loginform .button.button-primary,
.fto-app-shell #loginform .button-primary {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    border-radius: 999px !important;
    padding: 12px 18px !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    border: none !important;
    background-color: var(--fto-primary) !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.16), rgba(0,0,0,0.10)) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 22px rgba(79,109,245,0.35) !important;
    cursor: pointer;
}

.fto-app-body #loginform #wp-submit:hover,
.fto-app-body #loginform input[name="wp-submit"]:hover,
.fto-app-body #loginform input[type="submit"]:hover,
.fto-app-body #loginform button[type="submit"]:hover,
.fto-app-body #loginform .button.button-primary:hover,
.fto-app-body #loginform .button-primary:hover,
.fto-app-shell #loginform #wp-submit:hover,
.fto-app-shell #loginform input[name="wp-submit"]:hover,
.fto-app-shell #loginform input[type="submit"]:hover,
.fto-app-shell #loginform button[type="submit"]:hover,
.fto-app-shell #loginform .button.button-primary:hover,
.fto-app-shell #loginform .button-primary:hover {
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.12) !important;
}

/* Resend e-mail code (alleen zichtbaar bij e-mail 2FA) */
.fto-app-body #loginform input[name="wp-2fa-email-code-resend"],
.fto-app-body #loginform .button.button-secondary {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    border-radius: 999px !important;
    padding: 10px 16px !important;
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    background: #ffffff !important;
    color: var(--fto-primary) !important;
    border: 1px solid rgba(79,109,245,0.35) !important;
    box-shadow: 0 6px 16px rgba(0,0,0,0.04) !important;
}

.fto-app-body #loginform input[name="wp-2fa-email-code-resend"]:hover,
.fto-app-body #loginform .button.button-secondary:hover {
    box-shadow: 0 3px 8px rgba(15, 23, 42, 0.10) !important;
}

.fto-app-body .wp-2fa-configuration-form .button-secondary,
.fto-app-body .wp2fa-modal .wp2fa-setup-actions .button-secondary {
    background: #f5f5f5 !important;
    border: 1px solid rgba(0,0,0,0.10) !important;
    color: #333 !important;
}

.fto-app-body .wp-2fa-configuration-form input[type="text"],
.fto-app-body .wp-2fa-configuration-form input[type="password"],
.fto-app-body .wp-2fa-configuration-form input[type="email"],
.fto-app-body .wp-2fa-configuration-form input[type="tel"],
.fto-app-body .wp-2fa-configuration-form select {
    border-radius: 12px !important;
    border: 1px solid #DBE1F0 !important;
    background: #F9FAFF !important;
}

.fto-app-body .wp2fa-modal .modal__container {
    border-radius: 18px !important;
}

.fto-login-intro {
    margin-top: 4px;
    margin-bottom: 18px;
    font-size: 0.92rem;
    color: #4B4F60;
}

.fto-login-form .fto-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 14px;
}

.fto-login-form label {
    font-size: 0.85rem;
    font-weight: 500;
    color: #4B4F60;
}

.fto-login-form input[type="email"],
.fto-login-form input[type="password"] {
    border-radius: 12px;
    border: 1px solid #DBE1F0;
    padding: 9px 11px;
    font-size: 0.95rem;
    background: #F9FAFF;
}

.fto-login-form input:focus {
    outline: none;
    border-color: var(--fto-primary);
    box-shadow: 0 0 0 1px rgba(79,109,245,0.18);
}

.fto-login-note {
    margin-top: 14px;
    font-size: 0.82rem;
    color: #6A6F80;
}

/* Zorg dat knoppen altijd voldoende contrast hebben binnen FTO kaarten */
.fto-dashboard .fto-btn-primary,
.fto-jaarplanning .fto-btn-primary,
.fto-documents .fto-btn-primary {
    background: var(--fto-primary);
    color: #ffffff !important;
}

.fto-dashboard .fto-btn-secondary,
.fto-jaarplanning .fto-btn-secondary,
.fto-documents .fto-btn-secondary {
    background: #ffffff;
    color: var(--fto-primary) !important;
    border: 1px solid rgba(79,109,245,0.35);
}



/* === FTO v1.6 timeline tweaks === */

/* Full timeline container: a bit more air */
.fto-timeline-bar--full {
    padding-top: 26px;
}

/* Year label clearly boven de lijn */
.fto-timeline-marker {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin: 0 18px;
}

.fto-timeline-year {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--fto-primary);
    margin-bottom: 2px;
}

/* Month stays on the lijn */
.fto-timeline-month {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.fto-timeline-month-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--fto-primary);
    box-shadow: 0 0 0 4px rgba(79,109,245,0.12);
}

.fto-timeline-month-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #7B8198;
}

/* More space between dot and date on cards */
.fto-timeline-card .fto-timeline-dot {
    top: 34px;
}

.fto-timeline-card .fto-timeline-header {
    margin-top: 40px;
}

/* Login card centre + button look */
.fto-login-wrap {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    background: transparent;
}

.fto-login-card {
    max-width: 480px;
    width: 100%;
    border-radius: 26px;
    padding: 32px 28px 28px;
}

.fto-login-form .fto-upload-actions {
    justify-content: flex-end;
}

.fto-login-form .fto-btn-primary {
    min-width: 140px;
}


/* === FTO v1.7: registratie button duidelijk maken === */
.fto-register-form .fto-btn-primary,
.fto-register-form button[type="submit"],
.fto-register-form input[type="submit"] {
    background: var(--fto-primary);
    color: #ffffff;
    border: none;
    border-radius: 999px;
    padding: 11px 18px;
    font-weight: 600;
    font-size: 0.95rem;
    width: 100%;
    cursor: pointer;
}

.fto-register-form .fto-btn-primary:hover,
.fto-register-form button[type="submit"]:hover,
.fto-register-form input[type="submit"]:hover {
    background: var(--fto-primary-strong);
}

/* === FTO v1.7: full timeline subtiele lijn + lagen === */
.fto-timeline-bar--full .fto-timeline-track {
    position: relative;
}

.fto-timeline-bar--full .fto-timeline-track::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 52px;
    height: 2px;
    background: #DBE1D4;
    z-index: 1;
}

.fto-timeline-marker,
.fto-timeline-card {
    position: relative;
    z-index: 2;
}


/* === FTO Timeline Modern (variant A: boven/onder) === */
.fto-timeline-modern-wrapper{
    position: relative;
    margin-top: 32px;
    padding: 72px 24px 48px;
    overflow: visible;
    /* Geen achtergrondband: transparant (user preference) */
    background: transparent;
    border-radius: 24px;

    /* Breek uit het 1100px grid en maak de band fullscreen */
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

/* Bar met pijlen + scroller */
.fto-timeline-modern-bar{
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 24px;
}

.fto-timeline-modern-track{
    flex: 1 1 auto;
    overflow-x: auto;
    overflow-y: visible;
    padding: 0 12px;
    scroll-padding-left: 12px;
    scroll-padding-right: 12px;
    scroll-behavior: smooth;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}
.fto-timeline-modern-track::-webkit-scrollbar{ display:none; }

/* Binnen-canvas: bepaalt de echte scrollbreedte (absolute items tellen anders niet mee) */
.fto-timeline-modern-canvas{
    position: relative;
    height: 440px;
    min-width: 100%;
    /* Smaller cards: almost square by default */
    --fto-card-w: 150px;
    /* Vertical distance from center line to cards */
    /* Top cards: extra air above the line (cards should not touch the center line) */
    --fto-card-offset-top: 156px;
    /* Bottom cards: a bit closer to the line (so they don't sit too low) */
    --fto-card-offset-bottom: 92px;
}

@media (max-width: 420px){
  .fto-timeline-modern{ --fto-card-w: 130px; }
}


/* Centrale lijn over de volledige canvasbreedte */
.fto-timeline-modern-canvas::before{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 2px;
    background: #D5DCD3;
    z-index: 1;
}

/* Vandaag marker: rode ring op de middenlijn, zodat je direct ziet waar "nu" zit */
/* Today marker: altijd afdwingen als rode streep (override ook bij theme/user CSS) */
.fto-timeline-modern-canvas .fto-timeline-modern-today{
    /* Oude styling: rode streep op de middenlijn */
    position: absolute !important;
    top: 50% !important;
    left: var(--today-x, 50%) !important;
    width: 6px !important;          /* dikte van de streep */
    height: 60px !important;        /* lengte van de streep */
    border-radius: 999px !important;
    border: none !important;
    background: #E24B4B !important;
    transform: translate(-50%, -50%) !important;
    box-shadow: 0 0 0 10px rgba(226,75,75,0.05) !important;
    z-index: 2 !important;
    pointer-events: none !important;
}

/* === Subtiele maand-ruler (verticale ticks + maanden in lichte tekst) === */
.fto-timeline-modern-ruler{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
}

.fto-timeline-modern-month-tick{
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
}

/* Verticale tick */
.fto-timeline-modern-month-tick::before{
    content: "";
    display: block;
    width: 2px;
    height: 12px;
    border-radius: 2px;
    background: rgba(34,37,44,0.16);
}

.fto-timeline-modern-month-text{
    position: absolute;
    /* net onder de centrale lijn */
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.02rem;
    font-weight: 650;
    color: rgba(34,37,44,0.38);
    text-transform: lowercase;
    white-space: nowrap;
}

/* Jaarlabels staan in een aparte layer bovenin (zodat ze altijd zichtbaar zijn) */
.fto-timeline-modern-year-layer{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 0;
    pointer-events: none;
    z-index: 20;
}

.fto-timeline-modern-year-text{
    position: absolute;
    top: 6px;
    left: 0;
    transform: translateX(-50%);
    font-size: 1.55rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: var(--fto-primary);
    opacity: 0.85;
    white-space: nowrap;
    text-shadow: 0 6px 20px rgba(0,0,0,0.08);
}

/* Items: op datum gepositioneerd (JS zet left + top/bottom class) */

/* Items: op datum gepositioneerd (JS zet left + top/bottom class) */
.fto-timeline-modern-item{
    position: absolute;
    top: 50%;
    width: var(--fto-card-w);
    z-index: var(--fto-z, 2);
    cursor: pointer;

    /* Kleur per meeting type (fallback = klein FTO) */
    --fto-dot-color: #5DAEFF; /* lichtblauw */
    --fto-dot-glow: rgba(93, 174, 255, 0.22);
}

/* Type kleurcodering (slugs komen uit fto_meeting_type) */
/* FTO: lichtblauw (klein) en donkerblauw (groot) */
.fto-timeline-modern-item.fto-type--klein-fto,
.fto-timeline-modern-item.fto-type--fto{
    --fto-dot-color: #5DAEFF;
    --fto-dot-glow: rgba(93, 174, 255, 0.22);
}

.fto-timeline-modern-item.fto-type--groot-fto{
    --fto-dot-color: #2563EB; /* donkerblauw */
    --fto-dot-glow: rgba(37, 99, 235, 0.20);
}

/* DTO: lichtgroen (klein) en donkergroen (groot) */
.fto-timeline-modern-item.fto-type--klein-dto,
.fto-timeline-modern-item.fto-type--dto{
    --fto-dot-color: #66BB6A; /* lichtgroen */
    --fto-dot-glow: rgba(102, 187, 106, 0.22);
}

.fto-timeline-modern-item.fto-type--groot-dto{
    --fto-dot-color: #2E7D32; /* donkergroen */
    --fto-dot-glow: rgba(46, 125, 50, 0.20);
}

/* Reanimatie: rood */
.fto-timeline-modern-item.fto-type--reanimatietraining{
    --fto-dot-color: #E53935;
    --fto-dot-glow: rgba(229, 57, 53, 0.18);
}


.fto-timeline-modern-item.active{ z-index: 999; }

/* Dot op de centrale lijn (exact op datum) */
.fto-timeline-modern-dot{
    position: absolute;
    /* dot blijft op de echte datum-positie; JS zet --fto-dot-offset (in px) */
    left: var(--fto-dot-offset, 50%);
    top: 0;
    width: 14px;
    height: 14px;
    border-radius: 999px;
    background: var(--fto-dot-color);
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 8px var(--fto-dot-glow);
    z-index: 3;
}
.fto-timeline-modern-dot::before{
    content: "";
    position: absolute;
    left: 50%;
    width: 2px;
    background: #D5DCD3;
    transform: translateX(-50%);
    z-index: 2;
}

/* Verticale connector naar kaart */
.fto-pos-top .fto-timeline-modern-dot::before{
    top: auto;
    bottom: 14px;
    height: calc(var(--fto-card-offset-top) - 7px);
}
.fto-pos-bottom .fto-timeline-modern-dot::before{
    bottom: auto;
    top: 14px;
    height: calc(var(--fto-card-offset-bottom) - 7px);
}

/* Kaarten */

/* Kaarten */
.fto-timeline-modern-card{
    position: relative;
    width: 100%;
    background: #ffffff;
    border-radius: 16px;
    padding: 10px 10px;
    box-shadow: 0 16px 36px rgba(0,0,0,0.08);
    text-align: center;
    z-index: 4;
    min-height: 104px; /* keeps cards visually near-square */
    overflow: hidden;

    /* Duidelijke gekleurde rand */
    border: 2px solid var(--fto-dot-color);
}

.fto-timeline-modern-card::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--fto-dot-color);
    opacity: 0.95;
}


.fto-pos-top .fto-timeline-modern-card{ transform: translateY(calc(-1 * var(--fto-card-offset-top))); }
.fto-pos-bottom .fto-timeline-modern-card{ transform: translateY(var(--fto-card-offset-bottom)); }

/* Typografie */
.fto-timeline-modern-date{
    font-weight: 650;
    color: var(--fto-dot-color);
    margin-bottom: 4px;
    font-size: 1.1rem;
}
.fto-timeline-modern-title{
    font-size: 0.78rem;
    font-weight: 550;
    color: #22252C;
    margin-bottom: 6px;
    line-height: 1.2;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.fto-timeline-modern-title-link{
    color: inherit;
    text-decoration: none;
}
.fto-timeline-modern-title-link:hover{ text-decoration: underline; }

/* Body alleen zichtbaar bij actieve kaart */
.fto-timeline-modern-body{
    display: none;
    margin-top: 8px;
    font-size: 0.85rem;
    text-align: left;
    color: #4A4F5C;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.fto-timeline-modern-item.active .fto-timeline-modern-body{ display:block; }

/* Active state */
.fto-timeline-modern-item.active .fto-timeline-modern-card{
    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.14);
    border: 3px solid var(--fto-dot-color);
}


.fto-timeline-modern-actions{ margin-top: 10px; }

/* Pijlen */
.fto-timeline-modern-arrow{
    border: none;
    background: var(--fto-primary) !important;
    color: #ffffff !important;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    font-size: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.10);
}
.fto-timeline-modern-arrow.left{ margin-right: 4px; }
.fto-timeline-modern-arrow.right{ margin-left: 4px; }

@media (max-width: 900px){
    .fto-timeline-modern-wrapper{ padding: 56px 16px 32px; border-radius: 18px; }
    .fto-timeline-modern-canvas{ height: 420px; --fto-card-w: 120px; --fto-card-offset-top: 164px; --fto-card-offset-bottom: 100px; }
}

/* Compact variant (useful for dashboard) */
.fto-timeline-modern-wrapper.fto-timeline-modern-wrapper--compact{
    margin-top: 18px;
    padding-top: 48px;
    padding-bottom: 36px;
}

/* FTO 1.9.5: Jaarlabels hoger boven de lijn zodat ze niet overlappen met kaartjes */
.fto-timeline-modern-year-label {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%);
    margin-top: -230px; /* hoger boven de centrale lijn zodat jaartal niet overlapt met kaartje */
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--fto-primary);
    z-index: 1;
    white-space: nowrap;
}

/* Updates overzicht */
.fto-updates-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 24px;
}
.fto-update-card {
    background: #FFFFFF;
    border-radius: 18px;
    padding: 18px 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.04);
}
.fto-update-meta {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #8A8F9A;
    margin-bottom: 6px;
}
.fto-update-title {
    font-size: 1rem;
    margin: 0 0 6px;
    color: #1E2433;
}
.fto-update-content p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   Werkafspraken - review banner
========================================================= */
.fto-review-banner {
    border-left: 4px solid var(--fto-primary);
    background: var(--fto-primary-bg);
    margin-bottom: 24px;
}

.fto-review-banner-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.fto-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.fto-pill-warning {
    background: var(--fto-danger-bg);
    color: var(--fto-danger);
    border: 1px solid rgba(180, 35, 24, 0.22);
    font-weight: 700;
}

.fto-review-list {
    margin: 8px 0 10px;
    padding-left: 18px;
}

.fto-review-item {
    font-size: 0.9rem;
    margin-bottom: 4px;
}

.fto-review-date {
    color: #6A6F80;
    font-size: 0.8rem;
}

.fto-review-cta {
    margin-top: 10px;
}


/* =========================================================
   Werkafspraken tabel & filters
========================================================= */
.fto-filters-row {
    margin-bottom: 20px;
}

.fto-filters-form label {
    display: block;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #6A6F80;
    margin-bottom: 4px;
}

.fto-filters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px 16px;
    /* In flex-layout: laat de grid flexibel meegroeien/krimpen */
    flex: 1;
    min-width: 0;
}

.fto-filters-actions {
    margin-top: 12px;
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: nowrap;
}

/* Filters op 1 regel op desktop */
.fto-filters-form{
    display: flex;
    gap: 16px;
    align-items: flex-end;
    flex-wrap: wrap;
}

/* Werkafspraken: knoppen altijd op een regel onder de filters */
.fto-filters-form--werkafspraken{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
}

.fto-filters-form--werkafspraken .fto-filters-actions{
    margin-top: 0;
    width: 100%;
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: flex-end;
}

@media (min-width: 901px){
    .fto-filters-form{ flex-wrap: nowrap; }
    .fto-filters-grid{
        width: auto;
        grid-template-columns: 1.6fr 1fr 1fr 0.9fr;
        gap: 12px 16px;
    }
    /* Werkafspraken filters: zoeken + categorie + FTO */
    .fto-filters-grid--werkafspraken{
        grid-template-columns: 2fr 1fr 1fr;
    }
    .fto-filters-actions{
        margin-top: 0;
        white-space: nowrap;
    }
}

/* Werkafspraken filters: strak op mobiel */
@media (max-width: 1024px){
    /* Werkafspraken: knoppen altijd naast elkaar (tablet + mobiel) */
    .fto-filters-form--werkafspraken .fto-filters-actions{
        margin-top: 0;
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    .fto-filters-form--werkafspraken .fto-filters-actions .fto-btn-primary,
    .fto-filters-form--werkafspraken .fto-filters-actions .fto-btn-secondary{
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 720px){
    .fto-filters-form{
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    .fto-filters-grid{
        grid-template-columns: 1fr;
        width: 100%;
        gap: 12px;
    }
    .fto-filters-actions{
        margin-top: 0;
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    .fto-filters-actions .fto-btn-primary,
    .fto-filters-actions .fto-btn-secondary{
        width: 100%;
        justify-content: center;
    }

    /* Werkafspraken: op mobiel alles onder elkaar, knoppen naast elkaar */
    .fto-filters-form--werkafspraken{
        grid-template-columns: 1fr;
    }
    .fto-filters-form--werkafspraken .fto-filters-actions{
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        width: 100%;
    }
}

.fto-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.fto-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.fto-table th,
.fto-table td {
    padding: 8px 10px;
    border-bottom: 1px solid #DBE1D4;
    text-align: left;
}

.fto-table th {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #6A6F80;
}

.fto-table tbody tr:hover {
    background: #FBF4F1;
}


/* Werkafspraken – 1e kolom breed, rest compact (geen horizontale scroll op desktop) */
.fto-table-wrap--workafspraken{
    width: 100%;
    overflow-x: visible;
}

/* Tot en met tablet: geen horizontale tabel, maar kaarten */
@media (max-width: 1024px){
    .fto-table-wrap--workafspraken{
        overflow-x: visible;
    }

    .fto-werkafspraken-table{
        table-layout: auto;
    }

    .fto-werkafspraken-table thead{
        display: none;
    }

    .fto-werkafspraken-table,
    .fto-werkafspraken-table tbody,
    .fto-werkafspraken-table tr,
    .fto-werkafspraken-table td{
        display: block;
        width: 100%;
    }

    .fto-werkafspraken-table tr.fto-werkafspraak-row{
        background: linear-gradient(180deg, rgba(255,255,255,0.82), rgba(255,255,255,0.62));
        border: 1px solid rgba(0,0,0,0.08);
        border-radius: 18px;
        padding: 12px 14px;
        margin-bottom: 12px;
        box-shadow: 0 10px 24px rgba(0,0,0,0.05);
    }

    .fto-werkafspraken-table td{
        border-bottom: none;
        padding: 8px 0;
    }

    .fto-werkafspraken-table td[data-label]::before{
        content: attr(data-label);
        display: block;
        font-size: 0.72rem;
        text-transform: uppercase;
        letter-spacing: 0.12em;
        color: #6A6F80;
        margin-bottom: 4px;
    }

    .fto-werkafspraken-table .fto-col-content{
        width: auto;
        min-width: 0;
    }

    .fto-werkafspraken-table .fto-col-actions{
        padding-top: 10px;
        display: flex;
        justify-content: flex-end;
    }
}

.fto-werkafspraken-table{
    width: 100%;
    /* Fixed layout geeft de beschrijving (content) voorspelbaar meer ruimte */
    table-layout: fixed;
    min-width: 0;
}

/* Voorkom dat headers per letter/syllabe breken */
.fto-werkafspraken-table thead th{
    word-break: normal;
    overflow-wrap: normal;
    white-space: nowrap;
}

/* Inhoud mag wel netjes doorlopen */
.fto-werkafspraken-table tbody td{
    word-break: normal;
    overflow-wrap: anywhere;
}

/* Content kolom pakt alle overgebleven ruimte */
.fto-werkafspraken-table .fto-col-content{
    width: auto;
    min-width: 0;
    white-space: normal;
}

/* Compacte kolommen */
.fto-werkafspraken-table .fto-col-herzien,
.fto-werkafspraken-table .fto-col-actions{
    white-space: nowrap;
}

/* Compacte kolommen: houd data + knoppen smal zodat de omschrijving leesbaar blijft */
@media (min-width: 1025px){
    .fto-werkafspraken-table thead th.fto-col-herzien,
    .fto-werkafspraken-table tbody td.fto-col-herzien{
        padding-right: 22px;
    }

    .fto-werkafspraken-table thead th.fto-col-eval,
    .fto-werkafspraken-table tbody td.fto-col-eval{
        padding-left: 22px;
    }
}

.fto-werkafspraken-table .fto-col-herzien{ width: 120px; }
.fto-werkafspraken-table .fto-col-actions{ width: 120px; white-space: nowrap; }

/* Evaluatie mag wrappen (anders duwt hij de beschrijving te smal) */
.fto-werkafspraken-table .fto-col-eval{
    width: 300px;
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Knoppen iets compacter in tabelcontext */
.fto-werkafspraken-table .fto-btn,
.fto-werkafspraken-table .fto-btn-primary,
.fto-werkafspraken-table .fto-btn-secondary{
    padding: 8px 10px;
    font-size: 0.98rem;
}

.fto-werkafspraken-table .fto-btn-delete{ padding: 8px 10px; }

.fto-werkafspraak-content p {
    margin: 0 0 8px;
}
.fto-werkafspraak-content p:last-child {
    margin-bottom: 0;
}

.fto-eval-summary {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    justify-content: space-between;
}

.fto-eval-meta {
    min-width: 0;
    flex: 1;
}

.fto-eval-summary-actions{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    flex: 0 0 auto;
}

.fto-eval-summary-actions .fto-btn-inline{
    margin-left: 0;
}

/* Verwijderen als subtiele rode tekstlink */
.fto-werkafspraken-table .fto-btn-delete{
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    margin: 0;
    color: #E24B4B;
    font-size: 0.8rem;
    font-weight: 400;
    cursor: pointer;
    line-height: 1.2;
}

.fto-werkafspraken-table .fto-btn-delete:hover{
    text-decoration: underline;
}

.fto-eval-label {
    display: block;
    color: rgba(0,0,0,0.65);
    font-size: 0.9rem;
}

.fto-eval-form {
    margin-top: 10px;
}

.fto-eval-form[hidden] {
    display: none !important;
}

.fto-eval-form-label {
    display: block;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #6A6F80;
    margin-bottom: 6px;
}

.fto-eval-notes {
    width: 100%;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(0,0,0,0.12);
    background: #fff;
    font-size: 0.95rem;
    min-height: 90px;
}

.fto-eval-actions {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.fto-eval-status {
    color: rgba(0,0,0,0.55);
    font-size: 0.9rem;
}


.fto-doc-upload-cta {
    margin: 16px 0 8px;
    display: flex;
    justify-content: flex-end;
}

.fto-btn-tertiary.fto-btn-inline {
    margin-left: 8px;
    font-size: 0.9rem;
    padding: 8px 14px;
}


/* ======================================================
   Forms (frontend) – netjes gecentreerd + whitespace
   ====================================================== */
/* Notices (bijv. bericht sturen) */
.fto-notice{
    margin: 12px 0 14px;
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid rgba(0,0,0,0.08);
    background: rgba(255,255,255,0.8);
    box-shadow: 0 10px 22px rgba(0,0,0,0.05);
}

.fto-notice--success{
    border-color: rgba(0,0,0,0.08);
    background: rgba(161,184,139,0.20);
}

.fto-notice--warning{
    border-color: rgba(0,0,0,0.08);
    background: rgba(195,150,172,0.20);
}

.fto-notice--error{
    border-color: rgba(226,75,75,0.25);
    background: rgba(226,75,75,0.10);
}

.fto-form-card .fto-h1,
.fto-form-card .fto-h2 {
    margin-top: 0;
}

.fto-form {
    margin-top: 14px;
}

.fto-form-row {
    margin-bottom: 16px;
}

.fto-form-row label {
    display: block;
    font-size: 0.9rem;
    color: #6A6F80;
    margin-bottom: 6px;
}

.fto-form-row input[type="text"],
.fto-form-row input[type="email"],
.fto-form-row input[type="datetime-local"],
.fto-form-row input[type="password"],
.fto-form-row select,
.fto-form-row textarea,
.fto-input {
    width: 100%;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(0,0,0,0.12);
    background: #ffffff;
    font-size: 1rem;
    outline: none;
}

.fto-form-row textarea {
    min-height: 120px;
}

.fto-form-actions {
    margin-top: 18px;
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.fto-form-actions .fto-btn-primary,



/* Helper text */
.fto-help{
    font-size: 0.95rem;
    line-height: 1.35;
    color: rgba(34,37,44,0.58);
}

/* Voorbereiding: link tool onder textarea */
.fto-prep-tools{
    display:flex;
    align-items:center;
    gap:10px;
    margin-top:10px;
    flex-wrap:wrap;
}
.fto-prep-tools .fto-help{
    margin:0;
}
.fto-form-actions .fto-btn-secondary {
    min-width: 220px;
}

/* categorie lijst */
.fto-list {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.fto-list-item {
    background: #FBF4F1;
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 14px;
    padding: 10px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.fto-list-label {
    font-weight: 600;
    color: #222533;
    font-size: 0.95rem;
}

/* Categorieën – extra compact */
#categorieen.fto-form-card--categories .fto-list {
    gap: 8px;
}
#categorieen.fto-form-card--categories .fto-list-item {
    padding: 8px 10px;
    border-radius: 12px;
}
#categorieen.fto-form-card--categories .fto-link-danger {
    padding: 4px 8px;
    border-radius: 8px;
}

/* Speaker badges (agenda / kaarten / dashboard) */
.fto-speaker-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.fto-speaker-badge {
    /* Groter voor betere zichtbaarheid in agenda / kaarten */
    width: 44px;
    height: 44px;
    border-radius: 999px;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 3px solid #fff;
    background: rgba(0,0,0,0.05);
    box-shadow: 0 1px 6px rgba(0,0,0,0.10);
    font-size: 0.88rem;
    font-weight: 800;
    line-height: 1;
    color: #85576D;
}

.fto-speaker-badge img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.fto-speaker-badge--initials {
    background: #DBE1D4;
}

/* Toggle tags/badges (bijv. werkdagen in profiel) */
.fto-tag-toggle-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.fto-tag-toggle-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.fto-tag-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Werkdagen-badges iets compacter */
    height: 30px;
    min-width: 40px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid rgba(0,0,0,0.10);
    background: rgba(0,0,0,0.03);
    color: #1F2430;
    font-weight: 700;
    font-size: 0.88rem;
    cursor: pointer;
    user-select: none;
}

.fto-tag-toggle-input:focus + .fto-tag-toggle {
    outline: 3px solid rgba(0,0,0,0.10);
    outline-offset: 2px;
}

.fto-tag-toggle-input:checked + .fto-tag-toggle {
    background: var(--fto-secondary);
    border-color: var(--fto-secondary);
    color: #ffffff;
}

/* Dashboard – rij avatars */
.fto-group-avatars {
    /* Meer ruimte onder de avatars t.o.v. de blokken eronder */
    margin: 18px 0 26px;
}

.fto-group-avatars-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

/* Dashboard: avatars groter dan de speaker-badges in de agenda */
.fto-group-avatars .fto-speaker-badge {
    width: 80px;
    height: 80px;
    border-width: 3px;
    font-size: 1.15rem;
}

@media (max-width: 600px) {
    .fto-group-avatars .fto-speaker-badge {
        width: 64px;
        height: 64px;
        font-size: 1.00rem;
    }
}

@media (max-width: 600px) {
    .fto-speaker-badge {
        width: 40px;
        height: 40px;
        font-size: 0.84rem;
    }
}

.fto-group-avatars-meta {
    margin-top: 8px;
    font-size: 0.85rem;
    color: #6A6F80;
}

.fto-inline-form {
    margin: 0;
}

.fto-link-danger {
    border: none;
    background: transparent;
    color: #B23A3A;
    cursor: pointer;
    font-weight: 600;
    padding: 6px 10px;
    border-radius: 10px;
}

.fto-link-danger:hover {
    background: rgba(178,58,58,0.08);
}

.fto-empty {
    padding: 10px 0;
    color: #6A6F80;
}

/* ======================================================
   Dashboard – breed blok voor aankomende FTO
   ====================================================== */
.fto-wide-banner {
    margin: 16px 0 18px;
    border-radius: 22px;
    padding: 18px;
    /* Subtiele groen-gradient (chiquer, minder plat). */
    background:
        linear-gradient(135deg, rgba(255,255,255,0.55), rgba(0,0,0,0.06)),
        linear-gradient(135deg, rgba(161,184,139,0.22), rgba(219,225,212,0.85));
    border: 1px solid rgba(0,0,0,0.06);
}

.fto-wide-banner-inner {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fto-wide-banner-kicker {
    align-self: flex-start;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: rgba(0,0,0,0.72);
    font-weight: 800;
    background: rgba(255,255,255,0.65);
    border: 1px solid rgba(0,0,0,0.08);
    padding: 6px 10px;
    border-radius: 999px;
}

.fto-wide-banner-title {
    font-size: 1.35rem;
    font-weight: 800;
    color: #222533;
}

.fto-wide-banner-meta {
    color: rgba(0,0,0,0.65);
    font-size: 0.95rem;
}

.fto-wide-banner-actions {
    margin-top: 10px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* (duplicaat verwijderd) filters-styling staat hoger in dit bestand */

.fto-btn-tertiary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid rgba(0,0,0,0.12);
    background: #ffffff;
    color: var(--fto-primary);
    font-weight: 700;
    text-decoration: none;
}

.fto-btn-tertiary:hover {
    box-shadow: 0 10px 26px rgba(0,0,0,0.06);
}

/* Subtiele danger button (o.a. Ideeënbus verwijderen) */
.fto-btn-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid rgba(0,0,0,0.12);
    background: #ffffff;
    color: #B42318;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.16s ease;
}

.fto-btn-danger:hover {
    border-color: rgba(180, 35, 24, 0.28);
    box-shadow: 0 10px 26px rgba(0,0,0,0.06);
}


/* ======================================================
   Dashboard – Werkafspraken ter evaluatie (lijst)
   ====================================================== */
.fto-review-banner {
    width: 100%;
}

.fto-review-summary {
    margin: 6px 0 0;
    color: rgba(0,0,0,0.65);
}

.fto-review-subnote {
    margin: 8px 0 0;
    color: rgba(0,0,0,0.55);
    font-size: 0.9rem;
}

.fto-review-list {
    list-style: none;
    padding: 0;
    margin: 14px 0 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.fto-review-item {
    background: rgba(255,255,255,0.92);
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 16px;
    padding: 12px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    box-shadow: 0 6px 16px rgba(0,0,0,0.04);
}

.fto-review-item a {
    text-decoration: none;
    font-weight: 800;
    color: #222533;
}

.fto-review-item small {
    color: rgba(0,0,0,0.55);
    font-weight: 600;
}

/* Werkafspraken – duidelijke knop voor nieuwe werkafspraak */
.fto-btn-new-werkafspraak {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    border-radius: 16px;
    font-weight: 800;
}

/* Collapsible (details/summary) */
.fto-collapsible {
    margin-top: 12px;
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 16px;
    background: rgba(255,255,255,0.7);
    overflow: hidden;
}

.fto-collapsible-summary {
    cursor: pointer;
    list-style: none;
    padding: 12px 14px;
    font-weight: 500;
    color: #222533;
}

/* Subtielere summary (bijv. smoelenboek: "Persoon toevoegen") */
.fto-collapsible-summary--subtle {
    font-weight: 400;
    font-size: 14px;
    opacity: 0.9;
}

/* Werkafspraak categorieën – compactere "Nieuwe categorie" zodat het beter in de kaart past */
#categorieen .fto-collapsible {
    margin-top: 10px;
}

#categorieen .fto-collapsible-summary--subtle {
    padding: 10px 12px;
    font-weight: 500;
}

/* Werkafspraak categorieën – subtielere koppen */
#categorieen.fto-form-card--categories .fto-h2{
    font-size: 1.1rem;
    font-weight: 750;
    margin-bottom: 10px;
}

#categorieen.fto-form-card--categories .fto-h3{
    font-size: 0.98rem;
    font-weight: 700;
    margin-top: 16px;
}

#categorieen .fto-collapsible-summary--subtle:after {
    opacity: 0.55;
}

.fto-collapsible-summary::-webkit-details-marker {
    display: none;
}

.fto-collapsible-summary:after {
    content: '+';
    float: right;
    font-weight: 900;
    opacity: 0.6;
}

.fto-collapsible[open] .fto-collapsible-summary:after {
    content: '–';
}

.fto-collapsible-body {
    padding: 12px 14px 16px;
}

/* Smoelenboek – foto’s gelijke grootte */
.fto-avatar {
    width: 96px;
    height: 96px;
    border-radius: 22px;
    overflow: hidden;
    background: rgba(0,0,0,0.04);
    border: 1px solid rgba(0,0,0,0.06);
    margin-bottom: 12px;
}

.fto-avatar--empty {
    background: rgba(0,0,0,0.03);
}

/* Linklijst (presentatie-links) */
.fto-link-list {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Presentatie-links pagina: meer ademruimte tussen alinea's en kopjes */
.fto-presentatie-links p {
    margin: 0.75em 0 1.05em;
}

.fto-presentatie-links .fto-h2 {
    margin-top: 1.35em;
    margin-bottom: 0.65em;
}

.fto-presentatie-links .fto-link-list {
    margin-top: 14px;
    margin-bottom: 18px;
}

.fto-link-list li,
.fto-link-list-item {
    margin: 0;
    padding: 16px 18px;
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 6px 16px rgba(0,0,0,0.04);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
}

/* Managed items hebben een delete knop: ruimte verdelen */
.fto-link-list-item {
    justify-content: space-between;
}

.fto-link-list a {
    font-size: 0.90rem;
    font-weight: 700;
    color: #222533;
    text-decoration: none;
    line-height: 1.35;
}

.fto-link-list a:hover {
    text-decoration: underline;
}

.fto-smoelen-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Agenda – topic link */
.fto-agenda-title-row .topic {
    font-weight: 800;
    color: #222533;
    text-decoration: none;
}
.fto-agenda-title-row .topic:hover {
    text-decoration: underline;
}

/* Bijeenkomst detail – vaste vakken */
.fto-meeting-sections {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    max-width: 980px;
    margin: 0 auto 28px;
}

@media (min-width: 900px) {
    .fto-meeting-sections {
        grid-template-columns: 1fr 1fr;
    }
}

.fto-meeting-meta {
    margin: 8px 0 0;
    color: rgba(0,0,0,0.65);
}

.fto-backlink {
    display: inline-block;
    margin-bottom: 10px;
    color: rgba(0,0,0,0.65);
    text-decoration: none;
    font-weight: 700;
}

.fto-backlink:hover { text-decoration: underline; }

.fto-doc-list {
    list-style: none;
    padding: 0;
    margin: 12px 0 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.fto-doc-item {
    background: #FBF4F1;
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 16px;
    padding: 12px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.fto-doc-title {
    font-weight: 700;
    color: #222533;
}

.fto-doc-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.fto-doc-title {
    word-break: break-word;
}

@media (max-width: 620px) {
    .fto-doc-item {
        flex-direction: column;
        align-items: flex-start;
    }
    .fto-doc-actions {
        width: 100%;
        justify-content: flex-start;
    }
}

.fto-doc-download {
    display: inline-flex;
    padding: 8px 12px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(255,255,255,0.96), rgba(255,255,255,0.82)) !important;
    border: 1px solid rgba(0,0,0,0.10);
    text-decoration: none;
    font-weight: 800;
    color: var(--fto-primary) !important;
}

.fto-doc-download:hover {
    box-shadow: 0 10px 26px rgba(0,0,0,0.06);
}

/* Dashboard – iCal acties */
.fto-ical-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin: 12px 0 8px;
}
.fto-ical-url code {
    display: inline-block;
    margin-top: 6px;
    padding: 8px 10px;
    border-radius: 12px;
    background: rgba(0,0,0,0.04);
    border: 1px solid rgba(0,0,0,0.06);
}

/* Ideeënbus */
.fto-idea-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.fto-idea-item {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    background: linear-gradient(180deg, #ffffff 0%, #FBF4F1 100%);
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 18px;
    padding: 14px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.05);
}
@media (min-width: 900px) {
    .fto-idea-item {
        grid-template-columns: 1fr auto;
        align-items: start;
    }
}
.fto-idea-title {
    font-weight: 800;
    font-size: 1.05rem;
    color: #222533;
}
.fto-idea-desc {
    margin-top: 6px;
    color: rgba(0,0,0,0.75);
    line-height: 1.5;
    white-space: pre-wrap;
}
.fto-idea-meta {
    margin-top: 10px;
    color: rgba(0,0,0,0.65);
    font-size: 0.95rem;
}
.fto-idea-meta-dot {
    margin: 0 8px;
    opacity: 0.6;
}
.fto-idea-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
}
.fto-idea-vote-form, .fto-idea-delete-form {
    margin: 0;
}
.fto-idea-actions .fto-btn-tertiary[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Verwijder knop subtieler */
.fto-idea-delete-form .fto-action-btn.is-danger,
.fto-idea-actions .fto-action-btn.is-danger {
    opacity: 0.5;
    font-size: 0.8rem;
    padding: 4px 10px;
    background: transparent;
    border-color: transparent;
    color: var(--fto-danger, #B42318);
}
.fto-idea-delete-form .fto-action-btn.is-danger:hover,
.fto-idea-actions .fto-action-btn.is-danger:hover {
    opacity: 1;
    background: var(--fto-danger-bg, #FCE8E8);
    border-color: var(--fto-danger, #B42318);
}


/* Simple list (meeting detail: gekoppelde werkafspraken) */
.fto-simple-list{list-style:none;margin:0;padding:0;}
.fto-simple-list-item{padding:12px 0;border-top:1px solid rgba(255,255,255,0.12);}
.fto-simple-list-item:first-child{border-top:none;}
.fto-simple-list-title{font-weight:700;margin-bottom:6px;}
.fto-simple-list-body p{margin:0.35em 0;}


/* =========================================================
   Dashboard: Werkafspraken (1 blok)
========================================================= */
.fto-card-werkafspraken-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}

.fto-review-list--compact{
    margin: 10px 0 0;
    padding-left: 18px;
}

.fto-card-werkafspraken-actions{
    margin-top: 12px;
}

/* =========================================================
   Filters: compacter + meer "1 blok" look
========================================================= */
.fto-werkafspraken-card{
    padding: 16px 18px;
}

.fto-werkafspraken-card .fto-filters-form label{
    text-transform: none;
    letter-spacing: 0.02em;
    font-weight: 600;
}

.fto-werkafspraken-card .fto-filters-form input[type="search"],
.fto-werkafspraken-card .fto-filters-form select{
    padding: 6px 10px;
    font-size: 0.92rem;
    border-radius: 12px;
}

.fto-werkafspraken-card .fto-filters-actions .fto-btn-primary,
.fto-werkafspraken-card .fto-filters-actions .fto-btn-secondary{
    padding: 8px 16px;
    font-size: 0.9rem;
}

.fto-werkafspraken-card .fto-table-wrap--workafspraken{ margin-top: 8px; }

:root :where(.is-layout-flow) > * {
    margin-block-start: 3rem;
    margin-block-end: 0;
}

.fto-form-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 20px 22px;
    margin: 0 0 20px;
    border: 1px solid #E1E4EE;
    border-left: 4px solid var(--fto-primary);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}

/* Voorwaarden: subtielere tekst (minder groot en rustiger) */
.fto-terms-card .fto-prose {
    font-size: 0.95rem;
    line-height: 1.7;
}

.fto-terms-card .fto-prose p {
    margin: 0 0 12px;
}

.fto-terms-card .fto-prose ul {
    margin: 8px 0 14px 22px;
}

.fto-terms-card .fto-prose li {
    margin: 6px 0;
}

/* 1) Grid kolommen mogen écht krimpen */
.fto-filters-grid--werkafspraken{
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
}

/* 2) Cruciaal in CSS grid: items mogen krimpen */
.fto-filters-grid--werkafspraken > div{
  min-width: 0;
}

/* 3) Inputs/selects vullen de kolom en blijven binnen de card */
.fto-filters-grid--werkafspraken input,
.fto-filters-grid--werkafspraken select{
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* 4) Responsive (optioneel) */
@media (max-width: 900px){
  .fto-filters-grid--werkafspraken{
    grid-template-columns: 1fr;
  }
}

.fto-muted {
	    display: block;
    font-size: 0.9rem;
    color: #6A6F80;
    margin-bottom: 6px;
}

.fto-filters-form--werkafspraken{
  display: flex;
  gap: 16px;
  align-items: stretch; /* of flex-end als je inputs onderaan wilt houden */
}

.fto-form-card .fto-form-row > label{
  display:inline-block;
  font-size:16px;
  font-weight:600;
  margin-bottom:6px;
}

/* Alleen de agenda (date input) */
#fto_herzien_op{
  appearance: none;
  -webkit-appearance: none;

  padding: 9px 18px;                 /* matcht je buttons */
  border-radius: 999px;              /* pill */
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.2;

  background: #fff;
  color: var(--fto-primary);

  border: 1px solid rgba(79, 109, 245, 0.35);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.04);
  transition: all 0.16s ease;

  box-sizing: border-box;
}

/* Hover / focus zoals je knoppen */
#fto_herzien_op:hover{
  border-color: rgba(79, 109, 245, 0.55);
  background: rgba(79, 109, 245, 0.06);
}

#fto_herzien_op:focus,
#fto_herzien_op:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(79,109,245,0.22), 0 6px 16px rgba(0,0,0,0.04);
}

/* Chrome/Edge: kalender-icoon netter en klikbaar */
#fto_herzien_op::-webkit-calendar-picker-indicator{
  cursor: pointer;
  opacity: .85;
  padding: 4px;
}

/* Alleen jouw file input */
#fto_file{
  font-size: 0.92rem;
  color: var(--fto-primary);
}

/* Moderne browsers (Chrome/Edge/Firefox) */
#fto_file::file-selector-button{
  appearance: none;
  padding: 9px 18px;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.2;

  background: #fff;
  color: var(--fto-primary);

  border: 1px solid rgba(79, 109, 245, 0.35);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.04);
  transition: all 0.16s ease;

  cursor: pointer;
  margin-right: 10px; /* ruimte tot bestandsnaam */
}

/* Safari (fallback) */
#fto_file::-webkit-file-upload-button{
  appearance: none;
  padding: 9px 18px;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 600;

  background: #fff;
  color: var(--fto-primary);

  border: 1px solid rgba(79, 109, 245, 0.35);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.04);
  transition: all 0.16s ease;

  cursor: pointer;
  margin-right: 10px;
}

#fto_file::file-selector-button:hover,
#fto_file::-webkit-file-upload-button:hover{
  border-color: rgba(79, 109, 245, 0.55);
  background: rgba(79, 109, 245, 0.06);
  transform: translateY(-1px);
}

#fto_file::file-selector-button:active,
#fto_file::-webkit-file-upload-button:active{
  transform: translateY(0);
}

/* keyboard focus (als je naar het veld tabt) */
#fto_file:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(79,109,245,0.22);
  border-radius: 999px;
}

/* =====================================================
   Smoelenboek: Twee-staps delete bevestiging
   ===================================================== */
.fto-delete-wrapper {
    display: inline-block;
    vertical-align: top;
}

.fto-delete-confirm {
    background: #FEF2F2;
    border: 1px solid #FECACA;
    border-radius: 12px;
    padding: 12px 14px;
    margin-top: 8px;
    max-width: 280px;
    font-size: 0.82rem !important;
}

.fto-delete-warning {
    font-size: 0.82rem !important;
    line-height: 1.4;
    color: #991B1B;
    margin: 0 0 10px 0;
}

.fto-delete-warning strong {
    color: #7F1D1D;
    font-size: inherit !important;
}

.fto-delete-form {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.fto-delete-form .fto-action-btn {
    flex: 1;
    min-width: 100px;
    text-align: center;
    justify-content: center;
    font-size: 0.82rem !important;
    padding: 6px 10px !important;
}

.fto-delete-cancel {
    background: #F3F4F6 !important;
    color: #374151 !important;
    border-color: #D1D5DB !important;
}

.fto-delete-cancel:hover {
    background: #E5E7EB !important;
}

/* Smoelen acties layout fix */
.fto-smoelen-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-start;
    margin-top: 12px;
}

.fto-smoelen-actions .fto-action-btn {
    margin: 0;
}


/* =========================================================
   Profiel + WP2FA extra overrides
========================================================= */

/* WP2FA card mag geen linkerstreep hebben */
.fto-form-card.fto-wp2fa-card {
    border-left: none !important;
}

/* WP2FA knoppen consistent en zonder hoofdletters */
.fto-wp2fa-card .wp-2fa-configuration-form .button,
.fto-wp2fa-card .wp-2fa-configuration-form button,
.fto-wp2fa-card .wp-2fa-configuration-form input[type="submit"],
.fto-wp2fa-card .wp-2fa-configuration-form input[type="button"] {
    border-radius: 999px !important;
    padding: 10px 16px !important;
    font-weight: 800 !important;
    font-size: 0.9rem !important;
    line-height: 1.1 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

.fto-wp2fa-card .wp-2fa-configuration-form .button:not(.button-primary):not(.button-secondary),
.fto-wp2fa-card .wp-2fa-configuration-form button:not(.button-primary):not(.button-secondary),
.fto-wp2fa-card .wp-2fa-configuration-form input[type="submit"]:not(.button-primary):not(.button-secondary),
.fto-wp2fa-card .wp-2fa-configuration-form input[type="button"]:not(.button-primary):not(.button-secondary) {
    background: #fff !important;
    border: 2px solid var(--fto-primary-soft) !important;
    color: var(--fto-primary) !important;
}

.fto-wp2fa-card .wp-2fa-configuration-form .button-primary,
.fto-wp2fa-card .wp-2fa-configuration-form button.button-primary,
.fto-wp2fa-card .wp-2fa-configuration-form input[type="submit"].button-primary {
    background: var(--fto-primary) !important;
    border: 2px solid var(--fto-primary) !important;
    color: #fff !important;
}

.fto-wp2fa-card .wp-2fa-configuration-form .button-secondary,
.fto-wp2fa-card .wp-2fa-configuration-form button.button-secondary,
.fto-wp2fa-card .wp-2fa-configuration-form input[type="submit"].button-secondary {
    background: #f5f5f5 !important;
    border: 2px solid rgba(0,0,0,0.10) !important;
    color: #333 !important;
}

.fto-wp2fa-card .wp-2fa-configuration-form .button:hover,
.fto-wp2fa-card .wp-2fa-configuration-form button:hover,
.fto-wp2fa-card .wp-2fa-configuration-form input[type="submit"]:hover,
.fto-wp2fa-card .wp-2fa-configuration-form input[type="button"]:hover {
    filter: brightness(0.98) !important;
}

.fto-wp2fa-card .wp-2fa-configuration-form input[type="text"],
.fto-wp2fa-card .wp-2fa-configuration-form input[type="password"],
.fto-wp2fa-card .wp-2fa-configuration-form input[type="email"],
.fto-wp2fa-card .wp-2fa-configuration-form input[type="tel"],
.fto-wp2fa-card .wp-2fa-configuration-form select {
    border-radius: 12px !important;
    border: 1px solid #DBE1F0 !important;
    background: #F9FAFF !important;
    box-shadow: none !important;
}

/* Details/QR toggle wat netter */
.fto-wp2fa-card .wp-2fa-configuration-form details {
    margin: 10px 0 14px;
}

.fto-wp2fa-card .wp-2fa-configuration-form details summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--fto-primary);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.08);
}

.fto-wp2fa-card .wp-2fa-configuration-form details summary::-webkit-details-marker {
    display: none;
}

/* Form table (WP2FA) beter leesbaar */
.fto-wp2fa-card .wp-2fa-configuration-form table.form-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 10px;
}

.fto-wp2fa-card .wp-2fa-configuration-form table.form-table th {
    width: 220px;
    padding: 0 12px 0 0;
    font-weight: 700;
    color: #222;
    vertical-align: top;
}

.fto-wp2fa-card .wp-2fa-configuration-form table.form-table td {
    padding: 0;
}

@media (max-width: 900px) {
    .fto-wp2fa-card .wp-2fa-configuration-form table.form-table,
    .fto-wp2fa-card .wp-2fa-configuration-form table.form-table tbody,
    .fto-wp2fa-card .wp-2fa-configuration-form table.form-table tr,
    .fto-wp2fa-card .wp-2fa-configuration-form table.form-table th,
    .fto-wp2fa-card .wp-2fa-configuration-form table.form-table td {
        display: block;
        width: 100%;
    }

    .fto-wp2fa-card .wp-2fa-configuration-form table.form-table th {
        margin-bottom: 6px;
    }
}



/* Meeting type pill (agenda + jaarplanning) */
.fto-meeting-type-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    margin-left: 10px;
    background: rgba(255,255,255,0.9);
    border: 1px solid rgba(0,0,0,0.10);
    border-left: 6px solid var(--fto-primary);
    color: #222;
    white-space: nowrap;
}

.fto-meeting-type-pill.fto-type--klein-fto,
.fto-meeting-type-pill.fto-type--groot-fto,
.fto-meeting-type-pill.fto-type--fto {
    border-left-color: var(--fto-primary);
}

.fto-meeting-type-pill.fto-type--klein-dto,
.fto-meeting-type-pill.fto-type--groot-dto,
.fto-meeting-type-pill.fto-type--dto {
    border-left-color: var(--fto-accent);
}

.fto-meeting-type-pill.fto-type--reanimatietraining {
    border-left-color: rgba(0,0,0,0.35);
}


/* =========================================================
   Footer branding (praktijklogo's + credits)
========================================================= */
.fto-app-footer {
    margin-top: auto;
    padding: 18px 32px 22px;
    border-top: 1px solid rgba(0,0,0,0.06);
    background: rgba(255,255,255,0.35);
    backdrop-filter: blur(10px);
}

.fto-app-footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    flex-wrap: wrap;
}

.fto-app-footer-logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 0;
}

.fto-app-footer-logo {
    height: 52px;
    max-height: 52px;
    width: auto;
    max-width: 280px;
    object-fit: contain;
    opacity: 0.92;
    display: block;
    filter: saturate(0.95);
}

.fto-app-footer-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-left: auto;
    text-align: right;
    align-items: flex-end;
    font-size: 0.85rem;
    color: rgba(0,0,0,0.62);
}

.fto-app-footer-credit {
    font-weight: 600;
    color: rgba(0,0,0,0.68);
}

.fto-app-footer-copy {
    color: rgba(0,0,0,0.56);
}

@media (max-width: 760px) {
    .fto-app-footer {
        padding: 16px 18px 20px;
    }
    .fto-app-footer-inner {
        flex-direction: column;
        align-items: flex-start;
    }
    .fto-app-footer-meta {
        margin-left: 0;
        text-align: left;
        align-items: flex-start;
    }
    .fto-app-footer-logo {
        height: 40px;
        max-height: 40px;
    }
}



/* Timeline: voorkom overflow bij lange woorden/locaties */
.fto-timeline-modern-title,
.fto-timeline-modern-body{
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

.fto-timeline-modern-actions .fto-action-btn{
  display:block;
  width:100%;
  white-space: normal;
  text-align:center;
}



/* =========================================================
   Tips indicators + dashboard post-it tile
========================================================= */
.fto-postit-indicator {
    width: 30px;
    height: 30px;
    background: #FDE68A;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-top: 6px;
    text-decoration: none;
    box-shadow: 0 8px 18px rgba(0,0,0,0.12);
    transform: rotate(-2deg);
}
.fto-postit-indicator::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-left: 8px solid rgba(0,0,0,0.08);
    border-bottom: 8px solid transparent;
    border-top: 0;
    border-right: 0;
    border-bottom-left-radius: 2px;
}
.fto-postit-indicator__count {
    font-size: 13px;
    font-weight: 700;
    color: #222533;
    transform: rotate(2deg);
}

.fto-postit-count-pill {
    background: rgba(255,255,255,0.65);
    border: 1px solid rgba(0,0,0,0.10);
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 700;
    color: #222533;
}


/* Agenda: speakers + tips-indicator op één regel */
.fto-agenda-item .fto-meeting-speakerline {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}
.fto-agenda-item .fto-meeting-speakerline .fto-postit-indicator {
    margin-top: 0;
    margin-left: auto;
}

.fto-tips-dashboard-postit {
    border-radius: 18px;
    padding: 18px 20px;
    margin-bottom: 24px;
    box-shadow: 0 10px 28px rgba(0,0,0,0.10);
    position: relative;
    overflow: hidden;
}
.fto-tips-dashboard-postit__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 10px;
}
.fto-tips-dashboard-list {
    margin: 10px 0 0;
    padding-left: 18px;
}
.fto-tips-dashboard-list li {
    margin: 6px 0;
}
.fto-tips-dashboard-link {
    color: #222533 !important;
    font-weight: 600;
    text-decoration: none;
}
.fto-tips-dashboard-link:hover {
    text-decoration: underline;
}
.fto-tips-dashboard-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-top: 14px;
}

/* Documenten: typografie wat rustiger */
.fto-doc-item {
    font-size: 0.95rem;
}
.fto-doc-title {
    font-size: 1rem;
    line-height: 1.35;
}
.fto-doc-sub {
    font-size: 0.9rem;
}


/* =========================================================
   Jaarplanning – compacter + badge subtieler
   (alleen op /fto-jaarplanning/)
========================================================= */

/* Cards iets compacter */
.fto-jaarplanning {
    gap: 14px;
}

.fto-jaarplanning .fto-meeting-card {
    padding: 16px 18px;
    margin-bottom: 14px;
    border-radius: 14px;
}

.fto-jaarplanning .fto-meeting-header {
    gap: 12px;
    margin-bottom: 8px;
}

.fto-jaarplanning .fto-meeting-line1 {
    align-items: center;
    gap: 12px;
}

.fto-jaarplanning .fto-meeting-line2 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 12px;
    row-gap: 8px;
    margin-top: 8px;
}

/* Datum badge kleiner */
.fto-jaarplanning .fto-meeting-date {
    width: 40px;
    height: 46px;
    border-radius: 11px;
}

.fto-jaarplanning .fto-meeting-day {
    font-size: 1.0rem;
}

.fto-jaarplanning .fto-meeting-month {
    font-size: 0.72rem;
}

/* Titelblok compacter */
.fto-jaarplanning .fto-meeting-titleblock .fto-h3 {
    margin-bottom: 0.25em;
}

.fto-jaarplanning .fto-meeting-location {
    margin-top: 1px;
    font-size: 0.88rem;
}

/* Body regels compacter */
.fto-jaarplanning .fto-meeting-body p {
    margin: 6px 0;
    font-size: 0.92rem;
}

.fto-jaarplanning .fto-meeting-speakerline {
    margin-top: 0;
    gap: 8px;
}

.fto-jaarplanning .fto-meeting-speakerline .fto-speaker-badges {
    margin-top: 0;
    gap: 8px;
}

.fto-jaarplanning .fto-meeting-speakerline .fto-speaker-badge {
    width: 40px;
    height: 40px;
    border-width: 2px;
    font-size: 0.82rem;
}

/* "Eerstvolgende" badge (jaarplanning): netjes op de bovenlijn, niet te klein */
.fto-jaarplanning .fto-meeting-card.is-next {
    padding-top: 20px;
}

.fto-jaarplanning .fto-meeting-card.is-next .fto-meeting-badge {
    position: absolute;
    top: 0;
    transform: translateY(-50%);
    left: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.62rem;
    padding: 3px 10px;
    border-radius: 999px;
    letter-spacing: 0.05em;
    box-shadow: 0 2px 8px rgba(34, 87, 52, 0.22);
}

@media (max-width: 700px) {
    .fto-jaarplanning .fto-meeting-line2 {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .fto-jaarplanning .fto-meeting-speakerline {
        justify-content: flex-start;
    }
}