/* =====================================================================
   Onboarding-views van de admin (ronde 2, oktober 2026).
   Laadt na admin-ui.css. Terugdraaien: de <link> in templates/admin.php weghalen.
   ===================================================================== */

/* ---------- Downloads (zips, docx, export) ---------- */
a.ob-dl { text-decoration: none; }
.ob-dl.ui-busy { pointer-events: none; }
.ob-dl--mini {
    display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px;
    border-radius: var(--ui-radius-sm); font-size: 11px; font-weight: 600; line-height: 1;
    background: var(--ui-accent-soft); color: var(--ui-link); border: 1px solid transparent;
    transition: transform var(--ui-dur-fast) var(--ui-ease-out);
}
.ob-dl--mini svg { width: 12px; height: 12px; }
.ob-dl--mini:hover { background: color-mix(in srgb, var(--ui-brand) 16%, transparent); }
.ob-dl--mini:active { transform: scale(.98); }
.ob-dl--mini:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ui-ring); }
.ob-dl--stil { background: transparent; border-color: var(--ui-border); color: var(--ui-fg-muted); }
.ob-dl--stil:hover { background: var(--ui-muted); color: var(--ui-fg); }

/* ---------- Statusbanners bovenaan een tab (sitemap goedgekeurd, teksten bij de klant) ---------- */
.ob-banner {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 12px 16px; margin-bottom: 14px;
    border-radius: var(--ui-radius-lg); border: 1px solid var(--ui-border);
    background: var(--ui-surface, var(--admin-card));
}
.ob-banner--warn { background: var(--ui-warning-soft); border-color: color-mix(in srgb, var(--ui-warning) 28%, transparent); }
.ob-banner--ok { background: var(--ui-success-soft); border-color: color-mix(in srgb, var(--ui-success) 28%, transparent); }
.ob-banner__ic {
    width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 800; color: #fff; background: var(--ui-brand);
}
.ob-banner--warn .ob-banner__ic { background: var(--ui-warning-solid); }
.ob-banner--ok .ob-banner__ic { background: var(--ui-success-solid); }
.ob-banner__txt { flex: 1; min-width: 200px; }
.ob-banner__titel { font-size: 13px; font-weight: 700; color: var(--ui-fg); }
.ob-banner__sub { font-size: 12px; color: var(--ui-fg-muted); margin-top: 2px; }
.ob-banner__acties { display: flex; gap: 8px; flex-wrap: wrap; }
.ui-btn.ob-btn--ok { background: var(--ui-success-solid); border-color: var(--ui-success-solid); }
.ui-btn.ob-btn--ok:hover { background: color-mix(in srgb, var(--ui-success-solid) 88%, #000); }
@media (max-width: 640px) {
    .ob-banner__acties { width: 100%; }
    .ob-banner__acties .ui-btn { flex: 1; min-height: 44px; justify-content: center; }
}

/* ---------- Detailkop en tabs op gsm en tablet ---------- */
.obd-tab:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--ui-ring); border-radius: var(--ui-radius-sm); }
@media (max-width: 900px) {
    /* tabs in één rij die horizontaal scrolt, in plaats van drie rommelige rijen */
    .obd-tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain; position: relative; }
    .obd-tabs::-webkit-scrollbar { display: none; }
    .obd-tab { flex-shrink: 0; min-height: 44px; }
}
@media (max-width: 640px) {
    .obd-header { flex-wrap: wrap; align-items: flex-start; gap: 12px; }
    .obd-header__info { flex: 1 1 calc(100% - 56px); }
    .obd-header__title { font-size: 18px; overflow-wrap: anywhere; }
    .obd-header__id { white-space: nowrap; }
    .obd-header__meta { overflow-wrap: anywhere; }
    .obd-header__actions { width: 100%; }
    .obd-header__actions > * { flex: 1 1 0; min-height: 44px; }
    .obd-header__btn { min-height: 44px; }
}

/* ---------- Foutscherm lijst en detail (U6.1) ---------- */
.ob-fout { margin-top: 24px; border-style: solid; border-color: color-mix(in srgb, var(--ui-danger) 22%, var(--ui-border)); }
.ob-fout .ui-empty__ic { background: var(--ui-danger-soft); color: var(--ui-danger); }
.ob-fout__acties { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 10px; }
.ob-fout__acties .ui-btn { min-height: 40px; }

/* ---------- Live zetten: uitleg waarom de knop nog niet kan (U7.5) ---------- */
.ob-live-nognie { flex-basis: 100%; font-size: 11.5px; color: var(--ui-fg-muted); }
.ui-btn[disabled] { cursor: not-allowed; }

/* ---------- Lijst: sorteerkoppen, focusbare rijen, tabs ---------- */
.ob-sort {
    all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 4px; cursor: pointer;
    font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; border-radius: var(--ui-radius-sm);
    padding: 4px 6px; margin: -4px -6px;
}
.ob-sort:hover, .ob-sort.is-actief { color: var(--ui-fg); }
.ob-sort:focus-visible { box-shadow: 0 0 0 2px var(--ui-ring); }
.ob-sort__pijl { font-size: 9px; opacity: 0; transition: opacity var(--ui-dur-fast) var(--ui-ease-out); }
.ob-sort.is-actief .ob-sort__pijl { opacity: 1; color: var(--ui-link); }
.ob-sort:hover .ob-sort__pijl { opacity: .5; }
.ob-rij:focus-visible { outline: none; }
.ob-rij:focus-visible td { background: var(--ui-accent-soft); }
.ob-rij:focus-visible td:first-child { box-shadow: inset 2px 0 0 var(--ui-brand); }
/* Statustabs die niet passen: zachte rand rechts als hint dat er meer is (klasse via JS) */
.ob-lijst .ui-tabs.is-overloop { mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); }
.ob-lijst .ui-tabs.is-overloop.is-eind { mask-image: none; -webkit-mask-image: none; }

/* ---------- Pipeline ---------- */
.ob-pipe { display: grid; grid-template-columns: repeat(5, minmax(220px, 1fr)); gap: 12px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x proximity; }
.ob-pipe__kol { background: var(--ui-muted); border-radius: var(--ui-radius-xl); padding: 10px; min-height: 200px; scroll-snap-align: start; }
.ob-pipe__kop { display: flex; justify-content: space-between; align-items: center; padding: 4px 6px 10px; font-size: 12.5px; font-weight: 700; color: var(--ui-fg); }
.ob-pipe__lijst { display: flex; flex-direction: column; gap: 8px; }
.ob-pipe__kaart {
    all: unset; box-sizing: border-box; display: flex; flex-direction: column; gap: 4px; width: 100%; cursor: pointer;
    background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-lg); padding: 10px 12px;
    transition: transform var(--ui-dur-fast) var(--ui-ease-out), box-shadow var(--ui-dur) var(--ui-ease-out);
}
.ob-pipe__kaart:hover { transform: translateY(-1px); box-shadow: 0 6px 16px -8px rgb(20 33 58 / .22); }
.ob-pipe__kaart:active { transform: scale(.98); }
.ob-pipe__kaart:focus-visible { box-shadow: 0 0 0 3px var(--ui-ring); }
.ob-pipe__naam { font-size: 13px; font-weight: 700; color: var(--ui-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ob-pipe__status { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ui-fg-muted); }
.ob-pipe__dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.ob-pipe__chips { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 2px; }
.ob-pipe__chips:empty { display: none; }
.ob-pipe__chip { font-size: 11px; line-height: 18px; padding: 0 7px; border-radius: 99px; background: var(--ui-muted); color: var(--ui-fg-muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.ob-pipe__chip--rood { background: var(--ui-danger-soft); color: var(--ui-danger); }
.ob-pipe__chip--oranje { background: var(--ui-warning-soft); color: var(--ui-warning); }
.ob-pipe__chip--paars { background: color-mix(in srgb, #7C3AED 13%, transparent); color: #6D28D9; }
[data-theme="dark"] .ob-pipe__chip--paars { color: #C4B5FD; }
.ob-pipe__leeg { text-align: center; color: var(--ui-fg-muted); font-size: 12px; padding: 20px 0; }
@media (prefers-reduced-motion: reduce) { .ob-pipe__kaart, .ob-sort__pijl { transition: none; } .ob-pipe__kaart:hover, .ob-pipe__kaart:active { transform: none; } }
html[data-motion="uit"] .ob-pipe__kaart { transition: none; }
html[data-motion="uit"] .ob-pipe__kaart:hover, html[data-motion="uit"] .ob-pipe__kaart:active { transform: none; }

/* ---------- Lijst op de gsm: elke rij wordt een kaart (U9.2) ----------
   Vroeger een tabel die opzij scrolde met alleen Klant en Acties in beeld; status, voortgang en deadline zag je niet. */
@media (max-width: 640px) {
    .ob-lijst .ob-lijst-scroll { overflow: visible; }
    #ob-list-table, #ob-list-table tbody { display: block; }
    #ob-list-table thead { display: none; }
    #ob-list-table tr.ob-rij {
        display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px;
        padding: 12px; border-bottom: 1px solid var(--ui-border);
    }
    #ob-list-table tr.ob-rij:last-child { border-bottom: 0; }
    #ob-list-table tr.ob-rij > td {
        display: block; padding: 0; border: 0; background: none; position: static;
        box-shadow: none; animation: none;
    }
    #ob-list-table tr.ob-rij > td.swc-cb-col { order: 0; width: 22px; padding: 0 !important; }
    #ob-list-table tr.ob-rij > td.ob-td-klant { order: 1; flex: 1 1 40%; min-width: 0; }  /* 40%: klant en acties op regel 1, status wijkt naar regel 2 */
    #ob-list-table tr.ob-rij > td.ob-td-acties { order: 2; }
    #ob-list-table tr.ob-rij > td.ob-td-status { order: 3; margin-left: 32px; }
    #ob-list-table tr.ob-rij > td.ob-td-pakket { order: 4; }
    #ob-list-table tr.ob-rij > td.ob-td-deadline { order: 5; }
    #ob-list-table tr.ob-rij > td.ob-td-deadline:has(.swc-deadline--leeg) { display: none; }
    #ob-list-table tr.ob-rij > td.ob-td-vraag { order: 6; }
    #ob-list-table tr.ob-rij > td.ob-td-vraag:not(:has(.ob-knop-ic)) { display: none; }
    #ob-list-table tr.ob-rij > td.ob-td-verantw { display: none; }
    #ob-list-table tr.ob-rij > td.ob-td-voortgang { order: 7; flex-basis: 100%; padding-left: 32px; }
    #ob-list-table tr.ob-rij > td.ob-td-voortgang .swc-progress { min-width: 0; }
    #ob-list-table .swc-row-actions { gap: 4px; }
    #ob-list-table .swc-row-actions .swc-btn-icon { width: 34px; height: 34px; }
    #ob-list-table tr.ob-rij:focus-visible { box-shadow: inset 0 0 0 2px var(--ui-ring); }
    #ob-list-table tr.ob-rij:focus-visible td { background: none; box-shadow: none; }
    .ob-pipe { grid-template-columns: repeat(5, 82%); }
}

/* ---------- Feedbackwerkbank (#fbw): onder de devbalk, beweging, focus, gsm ---------- */
/* De werkbank ligt als vast scherm over alles; op dev viel de kop onder de gele devbalk. */
body.has-devbar #fbw { top: 24px; }
#fbw .fbw-tab, #fbw .fbw-knop { transition: transform 160ms cubic-bezier(0.16,1,0.3,1), opacity 160ms cubic-bezier(0.16,1,0.3,1); }
#fbw .fbw-tab:not(:disabled):not(.aan):hover, #fbw .fbw-knop:not(:disabled):hover { transform: translateY(-1px); }
#fbw .fbw-tab:not(:disabled):active, #fbw .fbw-knop:not(:disabled):active { transform: scale(.98); }
#fbw .fbw-tab:disabled { opacity: .5; cursor: default; }
#fbw .fbw-tab:focus-visible, #fbw .fbw-knop:focus-visible, #fbw .fbw-nav a:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ui-ring); }
#fbw input[type=checkbox]:focus-visible { outline: 2px solid var(--ui-ring); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { #fbw .fbw-tab, #fbw .fbw-knop { transition: none; transform: none !important; } }
html[data-motion="uit"] #fbw .fbw-tab, html[data-motion="uit"] #fbw .fbw-knop { transition: none; transform: none !important; }
@media (max-width: 640px) {
    /* Kop in twee rijen: titel en Sluiten boven, de twee stappen eronder over de volle breedte. */
    #fbw .fbw-kop { flex-wrap: wrap; gap: 8px 10px; padding: 10px 16px; }
    #fbw .fbw-kop > div:first-child { flex: 1 1 auto; order: 0; }
    #fbw .fbw-kop > div[style*="flex:1"] { display: none; }
    #fbw .fbw-kop > .fbw-knop:last-child { order: 1; }
    #fbw .fbw-kop > .fbw-tab { order: 2; flex: 1 1 0; white-space: nowrap; }
    #fbw .fbw-tab, #fbw .fbw-knop { min-height: 44px; }
}
/* Volle knoppen met de tokens van de primaire en succesknop: in donker stond wit op lichtgroen en lichtblauw (onder AA).
   "body #fbw" omdat de werkbank zijn eigen stijlblok na deze stylesheet in de head zet. */
body #fbw .fbw-tab.aan, body #fbw .fbw-knop.hoofd { background: var(--ui-primary); border-color: var(--ui-primary); color: var(--ui-primary-fg); }
body #fbw .fbw-knop.groen { background: var(--ui-success-solid); border-color: var(--ui-success-solid); color: var(--ui-primary-fg); }
[data-theme="dark"] #fbw .fbw-diff del { color: #FCA5A5; }
[data-theme="dark"] #fbw .fbw-diff ins { color: #6EE7B7; }

/* ---------- Instellingen: opslaanbalk vrij van de chatknop rechtsonder ---------- */
.obs-save-bar { padding-right: 92px; }

/* ---------- Klantlink-balk (Info): knoppen vielen op de gsm rechts buiten de kaart ---------- */
@media (max-width: 640px) {
    .ob-klantlink__knoppen { flex: 1 1 100%; flex-wrap: wrap; }
    .ob-klantlink__knoppen > * { flex: 1 1 auto; justify-content: center; min-height: 44px; }
}
@media (max-width: 640px) {
    /* Opslaanbalk op de gsm: tekst over de volle breedte, knoppen eronder links, rechts ruimte voor de chatknop. */
    .obs-save-bar { flex-wrap: wrap; padding: 12px 84px 12px 16px; }
    .obs-save-bar__msg { flex: 1 1 100%; }
    .obs-save-bar .hm-btn { min-height: 44px; }
}

/* ---------- Klantendata: door de klant gewist (prullenbak, D34) ---------- */
.ob-prullenbak__uitleg { margin: 0 0 10px; font-size: 12px; line-height: 1.5; color: var(--ui-fg-muted); }
.ob-prullenbak { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ob-prullenbak__rij {
    display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap;
    padding: 10px 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-lg);
    background: var(--ui-surface, var(--admin-card));
}
.ob-prullenbak__info { flex: 1 1 220px; min-width: 0; }
.ob-prullenbak__naam { display: block; font-size: 12.5px; font-weight: 600; color: var(--ui-fg); overflow-wrap: anywhere; }
.ob-prullenbak__meta { display: block; margin-top: 2px; font-size: 11.5px; color: var(--ui-fg-muted); }
.ob-prullenbak__rij .ui-btn { min-height: 36px; }
@media (max-width: 640px) {
    .ob-prullenbak__rij .ui-btn { flex: 1 1 100%; min-height: 44px; justify-content: center; }
}

/* ---------- Info: Klantgegevens, Traject en Template & design ----------
   Stond als inline stijl op drie vaste kolommen, waardoor de stapelregel uit admin.css niet greep: op de gsm
   werden de kaarten 110 px breed en vielen alle waarden weg. Nu zoveel kolommen als er passen (minstens 240 px). */
.obd-overview-grid--3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.obd-overview-grid--3 .obd-mrow dd { min-width: 0; overflow-wrap: anywhere; }

/* ---------- Gsm: rijen die op één lijn stonden en buiten beeld liepen ----------
   Teksten (outlines, geschreven pagina's en hun koppen), Intern (deadlines per fase, e-mailgeschiedenis),
   Klantendata (nieuwe extra). Die rijen hebben inline flex-stijlen, vandaar de !important op de gsm. */
.ob-mail-rij { flex-wrap: wrap; row-gap: 2px; }
.ob-mail-rij__aan { min-width: 0; overflow-wrap: anywhere; }
.ob-extra-nieuw { flex-wrap: wrap; }
.ob-extra-nieuw > input { min-width: 180px; }
@media (max-width: 640px) {
    /* Titel op de eerste regel, aantallen en knoppen eronder; tikdoelen van 44 px. */
    .ob-kaartrij { flex-wrap: wrap; row-gap: 8px; }
    .ob-kaartrij > .ob-kaartrij__titel { flex: 1 1 calc(100% - 72px) !important; min-width: 0; }   /* naast pijl en vinkje */
    .ob-kaartrij > button, .ob-kaartrij > a {
        display: inline-flex; align-items: center; min-height: 44px; height: auto;
        padding: 0 12px !important; font-size: 12px !important;
    }
    .ob-sectiekop { flex-wrap: wrap; gap: 8px; }
    .ob-sectiekop__acties { flex-wrap: wrap; }
    .ob-sectiekop__acties > button, .ob-sectiekop__acties > a { min-height: 44px; }
    .ob-faserij { flex-wrap: wrap; }
    .ob-faserij > .ob-faserij__label { flex: 1 1 100% !important; }
    .ob-faserij > input { flex: 1 1 160px; min-height: 44px; }
    .ob-faserij > button { min-height: 44px; }
    .ob-mail-rij__aan { flex: 1 1 100%; padding-left: 24px; }
    .ob-extra-nieuw > input { flex: 1 1 100% !important; min-height: 44px; }
    .ob-extra-nieuw > button { min-height: 44px; }
}

/* ---------- Intern, Email geschiedenis: geplande mails ----------
   De kleuren stonden inline (licht blauw, oranje als hij te laat is) en bleven in het donkere thema
   een lichte strook. Nu in klassen; het lichte thema houdt exact dezelfde kleuren. */
.ob-mail-rij--gepland { background: #f0f9ff; border: 1px dashed #7dd3fc; }
.ob-mail-rij--gepland .ob-mail-rij__ic { color: #0ea5e9; }
.ob-mail-rij--gepland .ob-mail-rij__label { color: #0369a1; }
.ob-mail-rij--te-laat { background: #fff7ed; border-color: #fb923c; }
.ob-mail-rij--te-laat .ob-mail-rij__ic { color: #f97316; }
.ob-mail-rij--te-laat .ob-mail-rij__label { color: #c2410c; }
[data-theme="dark"] .ob-mail-rij--gepland { background: rgba(14,165,233,0.10); border-color: rgba(125,211,252,0.45); }
[data-theme="dark"] .ob-mail-rij--gepland .ob-mail-rij__label { color: #7dd3fc; }
[data-theme="dark"] .ob-mail-rij--te-laat { background: var(--admin-orange-soft); border-color: rgba(251,146,60,0.55); }
[data-theme="dark"] .ob-mail-rij--te-laat .ob-mail-rij__label { color: #fdba74; }

/* Kaartkoppen in de onboardingdetail: een lijnicoon vooraan, zoals de rest van Moon, in plaats van emoji. */
.obd-card__head > svg:first-child,
.obd-card__head > span:first-child > svg:first-child { width: 14px; height: 14px; flex: none; margin-right: 7px; vertical-align: -2px; color: var(--ui-fg-muted); }
.ob-klantlink__ic { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 10px; background: rgba(255,255,255,0.16); color: #fff; }
.ob-klantlink__ic svg { width: 18px; height: 18px; }

/* Onboarding: lijniconen (uiIc) in plaats van emoji; gedempt in tekst en koppen, wit op een gekleurde tegel. */
.ob-ic { width: 14px; height: 14px; flex: none; vertical-align: -2px; margin-right: 6px; color: var(--ui-fg-muted); }
.ob-ic--16 { width: 16px; height: 16px; vertical-align: -3px; }
.ob-ic--20 { width: 20px; height: 20px; }
.ob-ic--los { margin-right: 0; }
.ob-ic--na { margin: 0 0 0 5px; }
.ob-ic--mee { color: currentColor; }
.ob-ic--rood { color: var(--ui-danger); }
.ob-ic--ster { width: 14px; height: 14px; margin-right: 0; vertical-align: -3px; fill: currentColor; }
.ob-accordion summary > .ob-ic { width: 16px; height: 16px; margin-right: -4px; }
.ob-card__head-icon > svg, .sm2-card__icon > svg { width: 14px; height: 14px; color: var(--ui-fg-muted); }
.ob-banner__ic > svg { width: 18px; height: 18px; }
.sm2-root > svg { width: 14px; height: 14px; flex: none; }
.ob-tegel { color: #fff; }
.ob-tegel-zacht { color: var(--ui-fg-muted); }
.ob-tegel-rood { color: var(--ui-danger); }
.ob-tegel > svg, .ob-tegel-zacht > svg, .ob-tegel-rood > svg { width: 18px; height: 18px; }
.ob-tegel--l > svg { width: 20px; height: 20px; }
.ob-leeg-ic { margin: 0 auto 10px; }