/* SamenOntzorgen-app voor zorgprofessionals, PGB-houders en zorgorganisaties.
   Vorm: "zwart op wit". Papierwit, inkt, één accentkleur, haarlijnen in plaats van schaduwen, serif voor koppen en cijfers. */
@font-face{font-family:"Source Serif 4";font-weight:600;font-display:swap;src:url(/fonts/werkplek/source-serif-4-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Source Serif 4";font-weight:700;font-display:swap;src:url(/fonts/werkplek/source-serif-4-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Inter";font-weight:400;font-display:swap;src:url(/fonts/werkplek/inter-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Inter";font-weight:500;font-display:swap;src:url(/fonts/werkplek/inter-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Inter";font-weight:600;font-display:swap;src:url(/fonts/werkplek/inter-latin-600-normal.woff2) format("woff2")}
:root{
  --papier:#FBFAF7;--zand:#F3F0EA;--inkt:#1C2B2D;--grijs:#5F6B6D;--lijn:#E4DFD4;--rand:#C9C3B6;
  --teal:#19ADA7;--actie:#0E7C76;--actie-zacht:#E0F1EF;--rood:#D92536;--rood-zacht:#FBE6E8;--wacht:#7A5200;--wacht-zacht:#F6ECD6;--wit:#FFFFFF;
  --kop:"Source Serif 4",Georgia,"Times New Roman",serif;--tekst:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --balk:64px;color-scheme:light;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{height:100%;-webkit-text-size-adjust:100%}
body{margin:0;min-height:100%;background:var(--papier);color:var(--inkt);font-family:var(--tekst);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
body.pgb{font-size:18px}
a{color:var(--actie)}
h1,h2,h3{font-family:var(--kop);font-weight:600;line-height:1.15;margin:0;text-wrap:balance;letter-spacing:-.01em}
h1{font-size:clamp(30px,8vw,38px)}h2{font-size:22px}h3{font-size:18px;font-family:var(--tekst);letter-spacing:0}
p{margin:0}
:focus-visible{outline:3px solid var(--teal);outline-offset:2px;border-radius:6px}

/* raamwerk */
.a-app{max-width:600px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column;background:var(--papier)}
.a-kop{position:sticky;top:0;z-index:10;background:rgba(251,250,247,.94);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--lijn);padding-top:env(safe-area-inset-top)}
.a-kop-in{height:56px;padding:0 18px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.a-logo{height:30px;width:auto;display:block}
.a-terug{display:inline-flex;align-items:center;gap:4px;min-height:44px;margin-left:-8px;padding:0 8px;color:var(--actie);font-weight:600;text-decoration:none;font-size:16px}
.a-wie{display:inline-flex;align-items:center;gap:8px;background:none;border:0;padding:6px 0;font:inherit;font-size:14px;color:var(--grijs);cursor:pointer;text-decoration:none}
.a-rond{width:36px;height:36px;border-radius:50%;background:var(--inkt);color:var(--papier);display:inline-flex;align-items:center;justify-content:center;font-weight:600;font-size:14px;letter-spacing:.02em;flex:none}
.a-main{flex:1;padding:22px 18px calc(var(--balk) + 36px + env(safe-area-inset-bottom));display:grid;gap:26px;align-content:start}
@media (prefers-reduced-motion:no-preference){.a-main{animation:op .22s cubic-bezier(.2,.7,.2,1)}@keyframes op{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}}
.a-blok{display:grid;gap:12px}
.a-oog{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--grijs);font-weight:600}
.a-sub{color:var(--grijs);max-width:60ch}
.a-klein{font-size:14px;color:var(--grijs)}

/* tabbalk */
.a-tabs{position:fixed;left:0;right:0;bottom:0;z-index:12;background:rgba(255,255,255,.96);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--lijn);padding-bottom:env(safe-area-inset-bottom)}
.a-tabs-in{max-width:600px;margin:0 auto;height:var(--balk);display:flex}
.a-tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;text-decoration:none;color:var(--grijs);font-size:11.5px;font-weight:500;position:relative}
.a-tab svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.a-tab[aria-current="page"]{color:var(--actie);font-weight:600}
.a-tab[aria-current="page"]::before{content:"";position:absolute;top:-1px;width:32px;height:3px;border-radius:0 0 3px 3px;background:var(--actie)}
.a-stip{position:absolute;top:9px;left:calc(50% + 8px);min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--rood);color:#fff;font-size:11px;font-weight:600;line-height:18px;text-align:center}

/* lijsten */
.a-lijst{list-style:none;margin:0;padding:0;border-top:1px solid var(--lijn)}
.a-lijst>li{border-bottom:1px solid var(--lijn)}
.a-rij{display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:center;padding:16px 2px;text-decoration:none;color:inherit;min-height:68px}
.a-rij:active{background:var(--zand)}
.a-rij b{font-weight:600;font-size:1.0625em;line-height:1.3}
.a-rij .a-meta{grid-column:1;color:var(--grijs);font-size:.875em}
.a-rij .a-pijl{grid-row:1 / span 3;grid-column:2;color:var(--rand);font-size:22px;line-height:1}
.a-chips{display:flex;flex-wrap:wrap;gap:6px;grid-column:1}
.a-chip{font-size:12.5px;padding:3px 9px;border-radius:6px;border:1px solid var(--lijn);background:var(--wit);color:var(--grijs);white-space:nowrap}
.a-chip.ja{background:var(--actie-zacht);border-color:transparent;color:#0A5C57;font-weight:500}
.a-pil{display:inline-block;padding:4px 10px;border-radius:6px;font-size:12.5px;font-weight:600;white-space:nowrap;background:var(--zand)}
.a-pil.ok{background:var(--actie-zacht);color:#0A5C57}.a-pil.match{background:var(--actie);color:#fff}.a-pil.wacht{background:var(--wacht-zacht);color:var(--wacht)}.a-pil.uit{background:var(--rood-zacht);color:#9B1522}
.a-leeg{padding:28px 0;color:var(--grijs);border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn)}

/* vlakken */
.a-vlak{background:var(--wit);border:1px solid var(--lijn);border-radius:16px;padding:18px;display:grid;gap:12px}
.a-vlak.zand{background:var(--zand);border-color:transparent}
.a-vlak.donker{background:var(--inkt);color:var(--papier);border-color:transparent}
.a-vlak.donker .a-sub,.a-vlak.donker .a-oog{color:#B9C4C4}
.a-let{border-left:3px solid var(--wacht);background:var(--wacht-zacht);padding:12px 14px;border-radius:0 10px 10px 0;font-size:.9375em}
.a-let.teal{border-left-color:var(--actie);background:var(--actie-zacht)}
.a-dl{display:grid;gap:14px;margin:0}
.a-dl div{display:grid;gap:2px}
.a-dl dt{font-size:13px;color:var(--grijs)}
.a-dl dd{margin:0;overflow-wrap:anywhere}
.a-cijfers{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--lijn);border-radius:16px;background:var(--wit);overflow:hidden}
.a-cijfers div{padding:16px;border-right:1px solid var(--lijn)}
.a-cijfers div:last-child{border-right:0}
.a-cijfers b{display:block;font-family:var(--kop);font-size:34px;line-height:1;font-variant-numeric:tabular-nums}
.a-cijfers span{font-size:13px;color:var(--grijs)}

/* stappen */
.a-stappen{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px;list-style:none;margin:0;padding:0}
.a-stappen li{font-size:12.5px;color:var(--grijs);padding-top:10px;border-top:3px solid var(--lijn);line-height:1.25}
.a-stappen li.klaar{border-top-color:var(--teal);color:var(--inkt)}
.a-stappen li.nu{border-top-color:var(--inkt);color:var(--inkt);font-weight:600}

/* knoppen */
.a-knop{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:54px;padding:12px 20px;border-radius:14px;border:1.5px solid var(--inkt);background:var(--wit);color:var(--inkt);font:inherit;font-weight:600;font-size:1em;text-decoration:none;cursor:pointer;transition:transform .08s ease}
.a-knop:active{transform:scale(.985)}
.a-knop.hoofd{background:var(--actie);border-color:var(--actie);color:#fff}
.a-knop.stil{border-color:var(--lijn);font-weight:500;color:var(--grijs)}
.a-knop.klein{width:auto;min-height:44px;padding:8px 16px;border-radius:12px;font-size:.9375em}
body.pgb .a-knop{min-height:60px}
.a-knoppen{display:grid;gap:10px}
.a-actie{position:sticky;bottom:calc(var(--balk) + env(safe-area-inset-bottom));margin:0 -18px -12px;padding:12px 18px;background:rgba(251,250,247,.96);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--lijn);display:grid;gap:10px;z-index:5}
.a-link{background:none;border:0;padding:0;font:inherit;color:var(--actie);text-decoration:underline;cursor:pointer}

/* formulieren */
form.a-form{display:grid;gap:20px}
.a-veld{display:grid;gap:7px;font-weight:600;font-size:.9375em}
.a-veld small{font-weight:400;color:var(--grijs);font-size:.9em}
.a-veld input,.a-veld select,.a-veld textarea{font:inherit;font-weight:400;width:100%;min-height:52px;padding:12px 14px;border:1px solid var(--rand);border-radius:12px;background:var(--wit);color:var(--inkt);appearance:none;-webkit-appearance:none}
.a-veld select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%231C2B2D' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:42px}
.a-veld textarea{min-height:120px;resize:vertical}
.a-veld input:focus,.a-veld select:focus,.a-veld textarea:focus{outline:none;border-color:var(--actie);box-shadow:0 0 0 3px var(--actie-zacht)}
body.pgb .a-veld input,body.pgb .a-veld select,body.pgb .a-veld textarea{min-height:58px}
.a-twee{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:16px}
fieldset.a-groep{border:0;padding:0;margin:0;display:grid;gap:10px;min-width:0}
fieldset.a-groep legend{font-weight:600;font-size:.9375em;padding:0;margin-bottom:8px}
.a-keuzes{display:flex;flex-wrap:wrap;gap:8px}
.a-keuze{position:relative}
.a-keuze input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:pointer}
.a-keuze span{display:inline-flex;align-items:center;min-height:44px;padding:8px 16px;border:1px solid var(--rand);border-radius:22px;background:var(--wit);font-size:.9375em}
.a-keuze input:checked+span{background:var(--inkt);border-color:var(--inkt);color:var(--papier);font-weight:600}
.a-keuze input:focus-visible+span{outline:3px solid var(--teal);outline-offset:2px}
.a-rooster{width:100%;border-collapse:separate;border-spacing:4px}
.a-rooster th{font-size:12.5px;font-weight:500;color:var(--grijs);padding:2px}
.a-rooster th:first-child{text-align:left;width:34%}
.a-rooster td{padding:0;text-align:center}
.a-vak{position:relative;display:block;height:44px}
.a-vak input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:pointer}
.a-vak span{display:block;height:100%;border-radius:10px;border:1px solid var(--lijn);background:var(--wit)}
.a-vak input:checked+span{background:var(--actie);border-color:var(--actie)}
.a-vak input:focus-visible+span{outline:3px solid var(--teal);outline-offset:2px}
.a-vak.toon span{height:30px}.a-vak.toon{height:30px}
.a-vak.vraag span{box-shadow:inset 0 0 0 2px var(--inkt)}

/* document */
.a-doc{background:var(--wit);border:1px solid var(--lijn);border-radius:4px;padding:clamp(20px,5vw,40px);display:grid;gap:18px}
.a-doc ol{margin:0;padding-left:20px;display:grid;gap:8px}
.a-stempel{display:inline-block;border:2px solid var(--rood);color:var(--rood);font-weight:700;letter-spacing:.12em;padding:2px 10px;font-size:12px;text-transform:uppercase;justify-self:start}

/* startscherm */
.a-start{padding-top:8vh}
.a-start h1{font-size:clamp(34px,9vw,46px)}
.a-kies{display:grid;gap:12px}
.a-kies button{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;width:100%;text-align:left;padding:16px;border:1px solid var(--lijn);border-radius:16px;background:var(--wit);font:inherit;color:inherit;cursor:pointer;min-height:76px}
.a-kies button:active{background:var(--zand)}
.a-kies b{display:block;font-size:17px}
.a-kies .a-pijl{color:var(--rand);font-size:22px}

/* tabel voor de zorgorganisatie */
.a-tabel-wrap{overflow-x:auto;border:1px solid var(--lijn);border-radius:16px;background:var(--wit)}
.a-tabel{width:100%;border-collapse:collapse;min-width:640px}
.a-tabel th,.a-tabel td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--lijn);vertical-align:top}
.a-tabel th{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--grijs);font-weight:600}
.a-tabel tr:last-child td{border-bottom:0}
.a-tabel a{font-weight:600;text-decoration:none;color:var(--inkt)}
.a-tabel .num{font-variant-numeric:tabular-nums;text-align:right}

/* breed scherm: zorgprofessional en PGB-houder blijven een rustige kolom, de zorgorganisatie krijgt een werkblad met zijbalk */
@media (min-width:720px){
  body:not(.org) .a-app{border-left:1px solid var(--lijn);border-right:1px solid var(--lijn)}
  .a-main{padding-left:28px;padding-right:28px}
  .a-actie{margin-left:-28px;margin-right:-28px;padding-left:28px;padding-right:28px}
}
@media (min-width:960px){
  body.org .a-app{max-width:1180px;display:grid;grid-template-columns:240px 1fr;grid-template-rows:auto 1fr}
  body.org .a-kop{grid-column:1 / -1}
  body.org .a-tabs{position:sticky;top:57px;align-self:start;grid-column:1;grid-row:2;border-top:0;background:none;backdrop-filter:none;padding:24px 12px}
  body.org .a-tabs-in{height:auto;flex-direction:column;gap:4px}
  body.org .a-tab{flex-direction:row;justify-content:flex-start;gap:12px;padding:12px 14px;border-radius:12px;font-size:15px}
  body.org .a-tab[aria-current="page"]{background:var(--actie-zacht)}
  body.org .a-tab[aria-current="page"]::before{display:none}
  body.org .a-stip{position:static;margin-left:auto}
  body.org .a-main{grid-column:2;grid-row:2;padding:32px 36px 60px;border-left:1px solid var(--lijn)}
  body.org .a-actie{position:static;margin:0;padding:0;border:0;background:none;backdrop-filter:none;grid-auto-flow:column;justify-content:start}
  body.org .a-actie .a-knop{width:auto;padding-left:28px;padding-right:28px}
  body.org .a-form{max-width:720px}
}

/* uren en facturen */
.a-uren{list-style:none;margin:0;padding:0;border-top:1px solid var(--lijn)}
.a-uren li{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--lijn)}
.a-uren b{font-variant-numeric:tabular-nums}
.a-urenform{display:grid;border-top:1px solid var(--lijn)}
.a-urenform label{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--lijn)}
.a-urenform span::first-letter{text-transform:uppercase}
.a-uren span::first-letter{text-transform:uppercase}
.a-urenform input{font:inherit;width:96px;min-height:48px;padding:8px 12px;border:1px solid var(--rand);border-radius:12px;background:var(--wit);color:var(--inkt);text-align:right;font-variant-numeric:tabular-nums}
.a-urenform input:focus{outline:none;border-color:var(--actie);box-shadow:0 0 0 3px var(--actie-zacht)}
.a-eigenlogo{display:flex;align-items:center;gap:12px}
.a-eigenlogo svg{width:52px;height:52px;flex:none}
.a-eigenlogo b{display:block;font-family:var(--kop);font-size:20px;line-height:1.2}
.a-eigenlogo span{font-size:13px;color:var(--grijs)}
.a-flogo{height:44px;width:auto;justify-self:start}
.a-naast{grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
.a-tabel.a-smal{min-width:0}
.a-tabel.a-smal th,.a-tabel.a-smal td{padding:10px 12px}
.a-tabel .num{white-space:nowrap}
.a-knop{white-space:normal}
.a-main>*,.a-doc>*{min-width:0}
@media (max-width:560px){.a-tabel.a-smal{font-size:14px}.a-tabel.a-smal th,.a-tabel.a-smal td{padding:9px 8px}.a-tabel .a-breed{display:none}}

/* profielen, kaarten, accounts, grote letters */
img.a-rond{object-fit:cover;background:var(--wit);border:1px solid var(--lijn)}
.a-rond.groot{width:64px;height:64px;font-size:22px;font-family:var(--kop)}
.a-profiel{display:flex;gap:16px;align-items:center}
.a-profiel h1{margin:2px 0 4px}
.a-over{white-space:pre-line;font-size:1.0625em;line-height:1.6;max-width:62ch}
.a-check{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.a-check li{padding-left:28px;position:relative}
.a-check li::before{content:"✓";position:absolute;left:0;top:0;width:20px;height:20px;border-radius:50%;background:var(--actie);color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;margin-top:2px}
.a-kaarten{list-style:none;margin:0;padding:0;display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.a-kaart{display:flex;gap:14px;align-items:flex-start;padding:18px;background:var(--wit);border:1px solid var(--lijn);border-radius:16px;text-decoration:none;color:var(--inkt);height:100%;transition:border-color .15s}
.a-kaart:hover,.a-kaart:focus-visible{border-color:var(--actie)}
.a-kaart-in{display:grid;gap:6px;min-width:0;flex:1}
.a-kaart-in b{font-size:1.125em}
.a-kort{color:var(--grijs);font-size:.9375em}
.a-kaart-knop{margin-top:6px;font-weight:600;color:var(--actie)}
.a-kaart-knop::after{content:" ›"}
.a-smalblok{max-width:460px;margin-inline:auto;width:100%}
.a-vink{display:flex;gap:12px;align-items:flex-start;font-size:.9375em}
.a-vink input{width:24px;height:24px;flex:none;margin:1px 0 0;accent-color:var(--actie)}
.a-verborgen{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.a-logorij{display:flex;gap:16px;align-items:flex-start}
.a-logovb{width:84px;height:84px;border-radius:14px;border:1px solid var(--lijn);object-fit:contain;background:var(--wit);flex:none}
.a-logovb.leeg{display:flex;align-items:center;justify-content:center;text-align:center;font-size:12px;color:var(--grijs);border-style:dashed;padding:6px}
.a-eigenlogo img{width:64px;height:64px;object-fit:contain;flex:none}
a.a-wie:focus-visible,.a-knop:focus-visible,.a-rij:focus-visible,.a-tab:focus-visible{outline:3px solid var(--actie);outline-offset:2px}
body.groot{font-size:20px}
body.pgb.groot{font-size:22px}
body.groot .a-klein,body.groot .a-meta,body.groot .a-oog,body.groot .a-chip,body.groot .a-pil,body.groot .a-tab{font-size:max(.85em,15px)}
body.groot .a-knop{min-height:64px;font-size:1.05em}
body.groot .a-klein,body.groot .a-meta,body.groot .a-sub,body.pgb .a-klein,body.pgb .a-meta{color:#3D4A4C}
body.pgb .a-tab{font-size:14px}
body.pgb .a-kaart-knop{display:inline-flex;align-items:center;justify-content:center;min-height:52px;border:1.5px solid var(--actie);border-radius:14px;padding:0 16px;margin-top:10px}

.a-uploadrij{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.a-cijfers.twee{grid-template-columns:repeat(2,1fr)}
.a-cijfers.twee b{font-size:24px}
a.a-link{text-decoration:none;color:inherit}
a.a-vlak.donker.a-link{color:var(--papier)}

.a-bedrijf{margin:0;font-weight:600;color:var(--actie);font-size:.9375em}

/* stand van de bewijsstukken: rood zolang het niet compleet is, logo-groen zodra alles is goedgekeurd */
.a-status{display:grid;gap:10px;padding:18px;border-radius:16px;border:2px solid}
.a-status h2,.a-status p{margin:0}
.a-status .a-knop{justify-self:start;background:var(--wit)}
.a-status.rood{background:#FDECEE;border-color:#D92536}
.a-status.rood h2,.a-status.rood .a-oog{color:#B81B2B}
.a-status.rood p{color:#7A1620}
.a-status.groen{background:#E3F6F5;border-color:#19ADA7}
.a-status.groen h2,.a-status.groen .a-oog{color:#0B6E69}
.a-status.groen p{color:#0A4F4C}

.a-lees{max-width:680px;margin-inline:auto;width:100%;display:grid;gap:22px}
.a-lees p{margin:0 0 10px;line-height:1.65}
.a-punten{margin:0;padding-left:20px;display:grid;gap:8px;line-height:1.6}

/* Datumvelden: de eigen datumkiezer van de telefoon laten werken */
.a-veld input[type="date"]{appearance:auto;-webkit-appearance:auto;min-width:0}