/*
 * ROI-calculator (plugin roi, /berekenen).
 * Zelfde taal als uurtarief.css: tokens uit general.css, wit vel met hairlines,
 * uitkomst als hard navy blok zonder radius. Los geladen, alleen deze pagina gebruikt hem.
 */

#profi-main-content > section:has(.appf-roi){ overflow:visible; }

.appf-roi{
    padding:0 0 var(--sp-7);
    color:var(--text);
    caret-color:var(--brand);
}
.appf-roi ::selection{ background:var(--brand-soft);color:var(--ink); }
.appf-roi .roi-sr{
    position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.appf-roi [hidden]{ display:none !important; }

/* Leestekst */
.appf-roi .roi-top{
    margin-bottom:var(--sp-5);
    padding-bottom:var(--sp-4);border-bottom:1px solid var(--line);
}
#profi-main-content .appf-roi .roi-lead{
    max-width:62ch;margin:0;
    font-size:var(--fs-lead);line-height:var(--lh-body);color:var(--text);
}

/* Raster: invoer links, uitkomst rechts */
.appf-roi .roi-grid{
    display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-5);
    margin:0;
}
@media (min-width:992px){
    .appf-roi .roi-grid{ grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--sp-6);align-items:start; }
}

/* Groepen */
.appf-roi .roi-group{
    margin:0;padding:var(--sp-4) 0 0;border:0;border-top:1px solid var(--line);
    min-width:0;
}
.appf-roi .roi-group + .roi-group{ margin-top:var(--sp-5); }
.appf-roi .roi-top + .roi-group{ border-top:0;padding-top:0; }
.appf-roi .roi-group__title{
    float:left;width:100%;
    margin:0 0 var(--sp-3);padding:0;
    font-size:var(--fs-h3);font-weight:var(--fw-title);line-height:var(--lh-h3);
    letter-spacing:var(--ls-h3);color:var(--ink);
}
.appf-roi .roi-group__title + *{ clear:both; }
#profi-main-content .appf-roi .roi-group__intro{
    max-width:62ch;margin:calc(-1 * var(--sp-2)) 0 var(--sp-3);
    font-size:var(--fs-body-sm);line-height:var(--lh-body-sm);color:var(--text);
}
.appf-roi .roi-group__note{ margin:var(--sp-3) 0 0;font-size:var(--fs-fine);line-height:var(--lh-small);color:var(--text-faint); }

.appf-roi .roi-fields{
    display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-3);
}
@media (min-width:576px){
    .appf-roi .roi-fields{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* Veld */
.appf-roi .roi-field{ display:flex;flex-direction:column;min-width:0; }
.appf-roi .roi-field__label{
    margin:0 0 var(--sp-1);
    font-size:var(--fs-small);font-weight:600;line-height:1.35;color:var(--ink);
}
.appf-roi .roi-field__control{
    position:relative;display:flex;align-items:center;
    height:48px;
    border:1px solid var(--line-2);border-radius:12px;background:#fff;
    transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.appf-roi .roi-field__control:hover{ border-color:#B7C0E2; }
.appf-roi .roi-field__control:focus-within{
    border-color:var(--brand);
    box-shadow:0 0 0 3px var(--brand-soft);
}
.appf-roi .roi-field__control:has([aria-invalid="true"]){ border-color:var(--warn); }
.appf-roi .roi-field__input{
    flex:1 1 auto;min-width:0;width:100%;height:100%;
    padding:0 var(--sp-2);border:0;border-radius:var(--radius);background:transparent;
    font:inherit;font-size:1rem;font-weight:500;color:var(--ink);
    font-variant-numeric:tabular-nums;
    outline:none;
}
.appf-roi .has-prefix .roi-field__input{ padding-left:4px; }
.appf-roi .roi-field__prefix{ padding-left:var(--sp-2);font-weight:500;color:var(--text); }
.appf-roi .roi-field__unit{
    flex:none;padding-right:var(--sp-2);
    font-size:var(--fs-small);color:var(--text-faint);white-space:nowrap;
}
.appf-roi .roi-field__hint{
    margin:var(--sp-1) 0 0;
    font-size:var(--fs-fine);line-height:var(--lh-small);color:var(--text-faint);
}
.appf-roi .roi-field__hint.is-error{ color:#9A6700;font-weight:500; }
.appf-roi .roi-field__hint:empty{ display:none; }
.appf-roi .roi-field__src{
    color:var(--brand);text-decoration:underline;text-underline-offset:2px;
    white-space:nowrap;
}
.appf-roi .roi-field__src:hover{ color:var(--brand-deep); }

/* Vinkje */
.appf-roi .roi-check{
    display:grid;grid-template-columns:20px minmax(0,1fr);column-gap:12px;align-items:start;
    margin-top:var(--sp-3);
}
.appf-roi .roi-check input{
    width:18px;height:18px;margin:2px 0 0;accent-color:var(--brand);cursor:pointer;
}
.appf-roi .roi-check label{ font-size:var(--fs-body-sm);font-weight:500;line-height:1.45;color:var(--ink);cursor:pointer; }
.appf-roi .roi-check .roi-field__hint{ grid-column:2; }

/* Taken: tekst links, drie smalle velden rechts. Op mobiel de velden onder de tekst. */
.appf-roi .roi-tasks{
    padding:8px 20px;border-radius:20px;background:var(--wash);
}
.appf-roi .roi-tasks__head{ display:none; }
.appf-roi .roi-task{
    display:grid;grid-template-columns:minmax(0,1fr);gap:12px;
    padding:var(--sp-3) 0;border-top:1px solid var(--line);
}
.appf-roi .roi-tasks__head + .roi-task,.appf-roi .roi-task:first-child{ border-top:0; }
.appf-roi .roi-task__text{ min-width:0; }
#profi-main-content .appf-roi .roi-task__label{
    margin:0;font-size:var(--fs-body-sm);font-weight:600;line-height:1.4;color:var(--ink);
}
.appf-roi .roi-task__inputs{
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;
}
.appf-roi .roi-task__cell{ min-width:0; }
.appf-roi .roi-task__cap{
    display:block;margin:0 0 4px;
    font-size:var(--fs-fine);font-weight:500;line-height:1.3;color:var(--text);
}
.appf-roi .roi-task .roi-field__control{ height:44px; }
.appf-roi .roi-task .roi-field__input{ padding:0 4px 0 12px; }
.appf-roi .roi-task .roi-field__unit{ padding-right:12px;font-size:var(--fs-fine); }
.appf-roi .roi-task__err{ grid-column:1 / -1;margin:0;font-size:var(--fs-fine);line-height:var(--lh-small);color:#9A6700;font-weight:500; }
.appf-roi .roi-task__err:empty{ display:none; }

@media (min-width:768px){
    .appf-roi .roi-tasks__head{
        display:grid;grid-template-columns:minmax(0,1fr) repeat(3,112px);gap:8px;
        padding:12px 0 4px;
        font-size:var(--fs-fine);font-weight:500;color:var(--text-faint);
    }
    .appf-roi .roi-tasks__head span:not(:first-child){ padding-left:12px; }
    .appf-roi .roi-task{ grid-template-columns:minmax(0,1fr) 352px;gap:8px var(--sp-3);align-items:start; }
    .appf-roi .roi-task__inputs{ grid-template-columns:repeat(3,112px); }
    .appf-roi .roi-task__cap{ position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap; }
}

.appf-roi .roi-reset{
    appearance:none;border:0;background:none;padding:0;cursor:pointer;
    margin-top:var(--sp-4);
    font:inherit;font-size:var(--fs-small);font-weight:500;color:var(--text);
    text-decoration:underline;text-underline-offset:3px;
}
.appf-roi .roi-reset:hover{ color:var(--ink); }
.appf-roi .roi-reset:focus-visible{ outline:2px solid var(--brand);outline-offset:2px; }

/* Uitkomst */
.appf-roi .roi-sheet{ min-width:0; }
@media (min-width:992px){
    .appf-roi .roi-sheet{ position:sticky;top:104px; }
}
.appf-roi .roi-sheet__inner{
    border:1px solid var(--line);border-radius:24px;background:#fff;
    box-shadow:var(--shadow-raised);
    padding:var(--sp-4) var(--sp-4) var(--sp-3);
    overflow:hidden;
}
#profi-main-content .appf-roi .roi-sheet__title{
    margin:0 0 var(--sp-2);
    font-size:var(--fs-h3);font-weight:var(--fw-title);line-height:var(--lh-h3);
    letter-spacing:var(--ls-h3);color:var(--ink);
}

.appf-roi .roi-total{
    margin:calc(-1 * var(--sp-4) - 1px) calc(-1 * var(--sp-4) - 1px) var(--sp-3);
    padding:var(--sp-3) var(--sp-4) var(--sp-3);
    background:var(--hero-tint);
    border-radius:23px 23px 0 0;
    color:var(--hero-ink);
}
.appf-roi .roi-total p{ margin:0; }
.appf-roi .roi-total__row{ display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-2); }
.appf-roi .roi-total__label{ font-size:var(--fs-small);color:var(--hero-text); }
.appf-roi .roi-total__vat{ display:block;font-size:var(--fs-fine);color:var(--hero-fine); }
.appf-roi .roi-total__amount{
    font-size:clamp(2rem,1.7rem + 1vw,2.5rem);font-weight:600;line-height:1.1;
    letter-spacing:-0.02em;font-variant-numeric:tabular-nums;color:#fff;white-space:nowrap;
}
.appf-roi .roi-total__meta{
    margin-top:6px !important;font-size:var(--fs-fine);line-height:1.5;color:var(--hero-fine);
}
.appf-roi .roi-total__meta strong{ font-weight:600;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap; }

.appf-roi .roi-table{ width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums; }
.appf-roi .roi-table th,.appf-roi .roi-table td{
    padding:10px 0;border-bottom:1px solid var(--line);
    font-size:var(--fs-small);line-height:1.4;vertical-align:baseline;
}
.appf-roi .roi-table thead th{
    padding-top:0;font-size:var(--fs-fine);font-weight:500;color:var(--text-faint);
    text-align:right;
}
.appf-roi .roi-table thead th:first-child,.appf-roi .roi-table tbody th,.appf-roi .roi-table tfoot th{ text-align:left; }
.appf-roi .roi-table tbody th{ font-weight:400;color:var(--text);padding-right:var(--sp-2); }
.appf-roi .roi-table td{ text-align:right;color:var(--ink);white-space:nowrap;padding-left:12px; }
.appf-roi .roi-table td[data-roi-waarde],.appf-roi .roi-table td[data-roi-software]{ font-weight:600; }
.appf-roi .roi-table tbody tr th,.appf-roi .roi-table tbody tr td{ transition:background-color var(--dur) var(--ease); }
.appf-roi .roi-table tbody tr.is-focus th,.appf-roi .roi-table tbody tr.is-focus td{ background:var(--site-band);color:var(--ink); }
.appf-roi .roi-table tfoot th,.appf-roi .roi-table tfoot td{ font-weight:600;color:var(--ink); }
.appf-roi .roi-table .roi-table__cost th,.appf-roi .roi-table .roi-table__cost td{ font-weight:500;color:var(--text); }
.appf-roi .roi-table__fine{ display:block;font-size:var(--fs-fine);font-weight:400;color:var(--text-faint); }
.appf-roi .roi-table .roi-table__sum th{ border-radius:12px 0 0 12px; }
.appf-roi .roi-table .roi-table__sum td:last-child{ border-radius:0 12px 12px 0; }
.appf-roi .roi-table .roi-table__sum th,.appf-roi .roi-table .roi-table__sum td{
    padding:14px;border-bottom:0;
    background:var(--hero-tint);color:#fff;font-weight:600;font-size:var(--fs-body-sm);
}

.appf-roi .roi-break{
    margin:var(--sp-3) 0 0;
    font-size:var(--fs-small);line-height:var(--lh-small);color:var(--text);
}
.appf-roi .roi-break strong{ color:var(--ink);font-weight:600;white-space:nowrap; }
.appf-roi .roi-warn{
    margin:var(--sp-2) 0 0;
    font-size:var(--fs-small);line-height:var(--lh-small);color:#9A6700;font-weight:500;
}
.appf-roi .roi-warn a,.appf-roi .roi-fine a{ color:inherit;text-decoration:underline;text-underline-offset:2px; }
.appf-roi .roi-trial{
    margin:var(--sp-3) 0 0;padding-top:var(--sp-3);border-top:1px solid var(--line);
    font-size:var(--fs-small);line-height:var(--lh-small);color:var(--text);
}
.appf-roi .roi-trial a{
    font-weight:600;color:var(--brand);text-decoration:underline;text-underline-offset:3px;
}
.appf-roi .roi-trial a:hover{ color:var(--brand-deep); }
.appf-roi .roi-fine{
    margin:var(--sp-2) 0 0;
    font-size:var(--fs-fine);line-height:var(--lh-small);color:var(--text-faint);
}

/* Onderbalk op mobiel: alleen zolang je invult en de uitkomst niet in beeld is (roi.js zet .has-bar). */
.appf-roi .roi-mobilebar{ display:none; }
@media (max-width:991.98px){
    .appf-roi .roi-mobilebar{
        position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:50;
        border-radius:18px;box-shadow:var(--shadow-hero);
        display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-2);
        padding:14px 20px;
        background:var(--hero-tint);color:#fff;
        transform:translateY(calc(100% + 24px));visibility:hidden;
        transition:transform var(--dur) var(--ease),visibility 0s linear var(--dur);
    }
    .appf-roi.has-bar .roi-mobilebar{
        transform:none;visibility:visible;
        transition:transform var(--dur) var(--ease),visibility 0s;
    }
    .appf-roi .roi-mobilebar__label{ font-size:var(--fs-small);color:var(--hero-text); }
    .appf-roi .roi-mobilebar__amount{ font-size:1.375rem;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap; }
}

@media (max-width:575.98px){
    .appf-roi .roi-tasks{ padding:4px 16px;border-radius:18px; }
    .appf-roi .roi-sheet__inner{ padding:var(--sp-3) var(--sp-3) var(--sp-2);border-radius:20px; }
    .appf-roi .roi-total{ margin:calc(-1 * var(--sp-3) - 1px) calc(-1 * var(--sp-3) - 1px) var(--sp-3);padding:var(--sp-3);border-radius:19px 19px 0 0; }
    .appf-roi .roi-table td{ padding-left:8px; }
}

/* Delen: link met de ingevulde getallen (roi.js zet de knop aan) */
.appf-roi .roi-share{ margin-top:var(--sp-3); }
.appf-roi .roi-share__btn{
    appearance:none;display:inline-flex;align-items:center;gap:8px;cursor:pointer;
    padding:10px 16px;border:1px solid var(--line-2);border-radius:999px;background:#fff;
    font:inherit;font-size:var(--fs-small);font-weight:600;color:var(--ink);
    transition:border-color var(--dur) var(--ease),background-color var(--dur) var(--ease);
}
.appf-roi .roi-share__btn:hover{ border-color:var(--brand);background:var(--wash); }
.appf-roi .roi-share__btn:focus-visible{ outline:2px solid var(--brand);outline-offset:2px; }
.appf-roi .roi-share__btn svg{ flex:none;color:var(--brand); }
.appf-roi .roi-share__done{ margin:8px 0 0;font-size:var(--fs-fine);line-height:var(--lh-small);color:var(--text); }
.appf-roi .roi-share__done:empty{ display:none; }

@media (prefers-reduced-motion:reduce){
    .appf-roi .roi-field__control,.appf-roi .roi-mobilebar,.appf-roi .roi-table tbody tr th,.appf-roi .roi-table tbody tr td{ transition:none; }
}