/*
 * Uurtarief-calculator installateurs (plugin uurtarief, /uurtarief-installateur-berekenen).
 * Tokens uit general.css. Wit vel met hairlines, totaal als hard navy blok zonder radius,
 * jaarbalk als enige beweging. Loskoppeling uit de bundel: storage/includes/css-in-bundel.php.
 */

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

.appf-ut{
    padding:0 0 var(--sp-7);
    color:var(--text);
    caret-color:var(--brand);
}
.appf-ut ::selection{ background:var(--brand-soft);color:var(--ink); }
.appf-ut .ut-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-ut [hidden]{ display:none !important; }

/* Kop + schakelaar */
.appf-ut .ut-top{
    display:flex;flex-direction:column;align-items:flex-start;
    gap:var(--sp-3);
    margin-bottom:var(--sp-5);
    padding-bottom:var(--sp-4);border-bottom:1px solid var(--line);
}
#profi-main-content .appf-ut .ut-lead{
    max-width:62ch;margin:0;
    font-size:var(--fs-lead);line-height:var(--lh-body);color:var(--text);
}
.appf-ut .ut-switch{
    display:inline-flex;padding:4px;
    border:1px solid var(--line-2);border-radius:999px;background:#fff;
}
.appf-ut .ut-switch__btn{
    appearance:none;border:0;background:transparent;cursor:pointer;
    padding:10px 18px;border-radius:999px;
    font:inherit;font-size:var(--fs-small);font-weight:600;color:var(--text);
    transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease);
}
.appf-ut .ut-switch__btn:hover{ color:var(--ink); }
.appf-ut .ut-switch__btn.is-active{ background:var(--brand);color:#fff; }
.appf-ut .ut-switch__btn:focus-visible,
.appf-ut .ut-reset:focus-visible{ outline:2px solid var(--brand);outline-offset:2px; }

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

/* Groepen */
.appf-ut .ut-group{
    margin:0;padding:var(--sp-4) 0 0;border:0;border-top:1px solid var(--line);
    min-width:0;
}
.appf-ut .ut-group + .ut-group{ margin-top:var(--sp-5); }
.appf-ut .ut-input > .ut-top + .ut-group,
.appf-ut[data-ut-mode="bedrijf"] .ut-input > .ut-group:nth-child(3){ border-top:0;padding-top:0;margin-top:0; }
.appf-ut .ut-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-ut .ut-group__title + *{ clear:both; }
.appf-ut .ut-group__note{ margin:var(--sp-2) 0 0;font-size:var(--fs-fine);line-height:var(--lh-small);color:var(--text-faint); }

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

/* Veld */
.appf-ut .ut-field{ display:flex;flex-direction:column;min-width:0; }
.appf-ut .ut-field__label{
    margin:0 0 var(--sp-1);
    font-size:var(--fs-small);font-weight:600;line-height:1.35;color:var(--ink);
}
.appf-ut .ut-field__control{
    position:relative;display:flex;align-items:center;
    height:48px;
    border:1px solid var(--line-2);border-radius:var(--radius);background:#fff;
    transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.appf-ut .ut-field__control:hover{ border-color:#B7C0E2; }
.appf-ut .ut-field__control:focus-within{
    border-color:var(--brand);
    box-shadow:0 0 0 3px var(--brand-soft);
}
.appf-ut .ut-field__control:has([aria-invalid="true"]){ border-color:var(--warn); }
.appf-ut .ut-field__input{
    flex:1 1 auto;min-width:0;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-ut .has-prefix .ut-field__input{ padding-left:4px; }
.appf-ut .ut-field__prefix{ padding-left:var(--sp-2);font-weight:500;color:var(--text); }
.appf-ut .ut-field__unit{
    flex:none;padding-right:var(--sp-2);
    font-size:var(--fs-small);color:var(--text-faint);white-space:nowrap;
}
.appf-ut .ut-field__control--select::after{
    content:"";position:absolute;right:18px;top:50%;
    width:8px;height:8px;margin-top:-6px;
    border-right:1.5px solid var(--text);border-bottom:1.5px solid var(--text);
    transform:rotate(45deg);pointer-events:none;
}
.appf-ut select.ut-field__input{ appearance:none;cursor:pointer;padding-right:44px; }
.appf-ut .ut-field__hint{
    margin:var(--sp-1) 0 0;
    font-size:var(--fs-fine);line-height:var(--lh-small);color:var(--text-faint);
}
.appf-ut .ut-field__src{
    color:var(--brand);text-decoration:underline;text-underline-offset:2px;
    white-space:nowrap;
}
.appf-ut .ut-field__src:hover{ color:var(--brand-deep); }

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

.appf-ut .ut-holidays{ margin-top:var(--sp-4); }
.appf-ut .ut-holidays__title{ margin:0;font-size:var(--fs-small);font-weight:600;color:var(--ink); }

/* Jaarbalk */
.appf-ut .ut-year{ margin-bottom:var(--sp-4); }
.appf-ut .ut-year__head{
    display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px var(--sp-2);
    max-width:none;margin:0 0 12px;
    font-size:var(--fs-body-sm);line-height:var(--lh-body-sm);color:var(--text);
}
.appf-ut .ut-year__head strong{ font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums; }
.appf-ut .ut-year__decl strong{ color:var(--brand); }
.appf-ut .ut-bar{
    display:flex;gap:2px;height:20px;
}
.appf-ut .ut-bar__seg{
    flex:0 1 0;min-width:0;
    transition:flex-grow 240ms var(--ease);
}
.appf-ut .ut-bar__seg--decl,.appf-ut .ut-legend__item--decl .ut-legend__swatch{ background:var(--brand); }
.appf-ut .ut-bar__seg--niet,.appf-ut .ut-legend__item--niet .ut-legend__swatch{ background:#5A68AB; }
.appf-ut .ut-bar__seg--ziek,.appf-ut .ut-legend__item--ziek .ut-legend__swatch{ background:#8E99C9; }
.appf-ut .ut-bar__seg--vrij,.appf-ut .ut-legend__item--vrij .ut-legend__swatch{ background:#B8C0E1; }
.appf-ut .ut-bar__seg--feest,.appf-ut .ut-legend__item--feest .ut-legend__swatch{ background:#C2C9E4; }
.appf-ut .ut-legend{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px var(--sp-2);
    margin:12px 0 0;padding:0;list-style:none;
}
@media (min-width:576px){
    .appf-ut .ut-legend{ grid-template-columns:repeat(5,minmax(0,1fr)); }
}
.appf-ut .ut-legend__item{
    display:grid;grid-template-columns:10px minmax(0,1fr);column-gap:8px;align-items:baseline;
    font-size:var(--fs-fine);line-height:1.4;
}
.appf-ut .ut-legend__swatch{ width:10px;height:10px;box-shadow:inset 0 0 0 1px rgba(11,16,32,.08); }
.appf-ut .ut-legend__label{ color:var(--text); }
.appf-ut .ut-nowrap{ white-space:nowrap; }
.appf-ut .ut-legend__val{ grid-column:2;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums; }

.appf-ut .ut-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-ut .ut-reset:hover{ color:var(--ink); }

/* Opbouw */
.appf-ut .ut-sheet{ min-width:0; }
@media (min-width:992px){
    .appf-ut .ut-sheet{ position:sticky;top:104px; }
}
.appf-ut .ut-sheet__inner{
    border:1px solid var(--line);background:#fff;
    padding:var(--sp-4) var(--sp-4) var(--sp-3);
}
#profi-main-content .appf-ut .ut-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-ut .ut-table{ width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums; }
.appf-ut .ut-table th,.appf-ut .ut-table td{
    padding:10px 0;border-bottom:1px solid var(--line);
    font-size:var(--fs-small);line-height:1.4;vertical-align:baseline;
}
.appf-ut .ut-table thead th{
    padding-top:0;font-size:var(--fs-fine);font-weight:500;color:var(--text-faint);
    text-align:right;
}
.appf-ut .ut-table thead th:first-child,.appf-ut .ut-table tbody th,.appf-ut .ut-table tfoot th{ text-align:left; }
.appf-ut .ut-table tbody th{ font-weight:400;color:var(--text);padding-right:var(--sp-2); }
.appf-ut .ut-table td{ text-align:right;color:var(--ink);white-space:nowrap;padding-left:12px; }
.appf-ut .ut-table td[data-ut-uur]{ font-weight:600; }
.appf-ut .ut-table tfoot th,.appf-ut .ut-table tfoot td{ border-bottom:0; }
.appf-ut .ut-table .ut-table__sum th,.appf-ut .ut-table .ut-table__sum td{
    padding:12px 0;background:var(--hero-tint);color:#fff;font-weight:600;font-size:var(--fs-body-sm);
}
.appf-ut .ut-table .ut-table__sum th{ padding-left:12px; }
.appf-ut .ut-table .ut-table__sum td{ padding-left:12px; }
.appf-ut .ut-table .ut-table__sum td:last-child{ padding-right:12px; }
.appf-ut .ut-table tfoot .ut-table__div th{
    border-top:0;padding:12px 0;
    font-weight:400;font-size:var(--fs-fine);color:var(--text-faint);
}
.appf-ut .ut-table tfoot .ut-table__div strong{ color:var(--ink);font-weight:600; }

.appf-ut .ut-total{
    margin:calc(-1 * var(--sp-4) - 1px) calc(-1 * var(--sp-4) - 1px) var(--sp-3);
    padding:var(--sp-2) var(--sp-4) 20px;
    background:var(--hero-tint);
    color:var(--hero-ink);
}
.appf-ut .ut-total p{ margin:0; }
.appf-ut .ut-total__row{ display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-2); }
.appf-ut .ut-total__label{ font-size:var(--fs-small);color:var(--hero-text); }
.appf-ut .ut-total__vat{ display:block;font-size:var(--fs-fine);color:var(--hero-fine); }
.appf-ut .ut-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-ut .ut-total__meta{
    margin-top:6px !important;font-size:var(--fs-fine);line-height:1.5;color:var(--hero-fine);
}
.appf-ut .ut-total__meta strong{ font-weight:600;color:#fff;font-variant-numeric:tabular-nums; }

.appf-ut .ut-crit{
    margin:var(--sp-3) 0 0;
    font-size:var(--fs-small);line-height:var(--lh-small);color:var(--text);
}
.appf-ut .ut-crit strong{ color:var(--ink);font-weight:600; }
.appf-ut .ut-crit.is-under [data-ut-crit-verdict]{ color:#9A6700;font-weight:500; }
.appf-ut .ut-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-ut .ut-trial a{
    font-weight:600;color:var(--brand);text-decoration:underline;text-underline-offset:3px;
}
.appf-ut .ut-trial a:hover{ color:var(--brand-deep); }

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

/* Veld en regel horen bij elkaar */
.appf-ut .ut-table tbody tr.is-focus th,.appf-ut .ut-table tbody tr.is-focus td{ background:#DCE3F8;color:var(--ink); }
.appf-ut .ut-table tbody tr th,.appf-ut .ut-table tbody tr td{ transition:background-color var(--dur) var(--ease); }
.appf-ut .ut-field__hint.is-error{ color:#9A6700;font-weight:500; }

/* Bronnen */
.appf-ut .ut-sources{
    margin-top:var(--sp-6);padding-top:var(--sp-4);border-top:1px solid var(--line);
    max-width:72ch;
}
#profi-main-content .appf-ut .ut-sources__title{
    margin:0 0 var(--sp-2);
    font-size:var(--fs-h3);font-weight:var(--fw-title);line-height:var(--lh-h3);color:var(--ink);
}
.appf-ut .ut-sources__intro{ margin:0 0 var(--sp-3);font-size:var(--fs-body-sm);line-height:var(--lh-body-sm);color:var(--text); }
.appf-ut .ut-sources__list{ margin:0;padding-left:1.25rem;font-size:var(--fs-small);line-height:var(--lh-small);color:var(--text); }
.appf-ut .ut-sources__list li{ margin-top:12px;scroll-margin-top:120px; }
.appf-ut .ut-sources__list li:target{ color:var(--ink); }
.appf-ut .ut-sources__list li:target .ut-sources__what{ background:var(--brand-soft); }
.appf-ut .ut-sources__what{ display:block; }
.appf-ut .ut-sources__list a{ color:var(--brand);text-decoration:underline;text-underline-offset:2px; }

@media (max-width:575.98px){
    .appf-ut .ut-sheet__inner{ padding:var(--sp-3) var(--sp-3) var(--sp-2); }
    .appf-ut .ut-total{ margin:calc(-1 * var(--sp-3) - 1px) calc(-1 * var(--sp-3) - 1px) var(--sp-3);padding:var(--sp-2) var(--sp-3) 20px; }
    .appf-ut .ut-table td{ padding-left:8px; }
}

@media (prefers-reduced-motion:reduce){
    .appf-ut .ut-bar__seg,.appf-ut .ut-field__control,.appf-ut .ut-switch__btn,.appf-ut .ut-mobilebar{ transition:none; }
}