/* Factuurbode (dashboard van de factuurvanger): huisstijl en de onderdelen die alleen hier horen. Het ontwerp zelf (Geist,
   menu, kaarten, knoppen, velden, tabellen, meldingen, licht en donker) komt uit oms-kern (/kern/kern.css, opgemeten naar
   Employes); dit bestand wordt daarna geladen. Kleuren en maten alleen via de variabelen van de kern. */

/* ---------- huisstijl ---------- */
:root { --merk: #0e7490; }
@media (prefers-color-scheme: dark) { :root { --merk: #22a5c4; } }

/* ---------- menu: administratie kiezen en zoeken, onder het merkblok ---------- */
.merk-icoon svg { fill: none; stroke: currentColor; width: 14px; height: 14px; }
.adm-keuze { margin: 0; }
.adm-keuze select { margin: 0; padding: 0 18px 0 0; min-height: 0; border: 0; box-shadow: none; background-color: transparent; font-weight: 600; font-size: 14px; line-height: 1.25; cursor: pointer; text-overflow: ellipsis; }
.adm-keuze select:focus { box-shadow: none; }
.teller.oranje { color: #fff !important; }
.zoek { position: relative; margin: 0 0 20px; }
.zoek svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--zacht); }
.zoek input { margin: 0; padding-left: 34px; min-height: 32px; font-size: 13px; }

/* Pagina's zonder menu (inloggen, openbare pagina's): de werkruimte in het midden. */
.inhoud.los-pagina { margin: 0 auto; max-width: 860px; }

/* ---------- tekst ---------- */
h2 small { font-weight: 400; color: var(--zacht); margin-left: 6px; }
h2 small a { font-weight: 600; }
.inhoud > h2, .inhoud > details > summary h2 { margin-top: 32px; }
.zacht { color: var(--zacht); }
.oranje { color: var(--oranje) !important; } .rood { color: var(--rood) !important; } .groen { color: var(--groen) !important; }
.uitleg { margin-top: 24px; } .uitleg summary { cursor: pointer; } .uitleg ul { margin: 10px 0 0; padding-left: 18px; line-height: 1.6; }
.intro { font-size: 15px; color: var(--tekst2); }
ol.genummerd { margin: 10px 0 14px; padding-left: 20px; line-height: 1.7; }
.acties-lijst { margin: 6px 0 0; padding-left: 18px; }
.onder { margin-top: 24px; }

/* ---------- knoppen: gewoon licht met een dunne rand, de hoofdknop in de knopkleur van de kern (zoals Employes) ---------- */
button:not(.primair):not(.link):not(.menu-knop), .knop:not(.primair) { background: var(--vlak); color: var(--tekst); }
button:not(.primair):not(.link):not(.menu-knop):hover, .knop:not(.primair):hover { filter: none; background: var(--vlak2); }
button.primair, .knop.primair { background: var(--knop); color: var(--knop-tekst); }
button.kaal { background: transparent !important; border-color: transparent; box-shadow: none; color: var(--zacht) !important; padding: 2px 8px; }
button.kaal:hover { color: var(--tekst) !important; background: var(--vlak2) !important; }
.knoppen { display: flex; gap: 8px; justify-content: flex-end; align-items: center; flex-wrap: wrap; }
.knoppen select, .knoppen input, .rij select, .rij input:not([type=checkbox]) { width: auto; margin: 0; }
form.inline { display: inline; }

/* ---------- statuslabels (zoals .chip van de kern) ---------- */
.status, .zekerheid { display: inline-block; padding: 2px 8px; border-radius: 9999px; font-size: 12px; line-height: 16px; font-weight: 600; white-space: nowrap; background: var(--vlak2); color: var(--tekst2); text-decoration: none; }
.status-groen, .zekerheid-groen { background: var(--groen-bg); color: color-mix(in srgb, var(--groen) 70%, var(--tekst)); }
.status-oranje, .zekerheid-oranje { background: var(--oranje-bg); color: var(--oranje); }
.status-rood { background: var(--rood-bg); color: var(--rood); }
.status-grijs, .zekerheid-grijs { background: var(--vlak2); color: var(--zacht); }
.status-accent { background: var(--tint); color: var(--accent); }
a.status:hover { text-decoration: underline; }
.zekerheid { font-size: 11px; padding: 0 7px; cursor: help; }

/* ---------- kaarten, meldingen, lege staat ---------- */
.kaart.smal { max-width: 400px; margin: 12vh auto 0; padding: 28px; box-shadow: var(--schaduw-hoog); border: 0; display: flex; flex-direction: column; gap: 4px; }
.kaart.smal button { width: 100%; min-height: 36px; }
.kaart.smal h1 { font-size: 22px; line-height: 28px; margin-bottom: 12px; }
.kaart.smal-460 { max-width: 460px; } .kaart.smal-640 { max-width: 640px; } .kaart.boven-ruimte { margin-top: 16px; }
.melding.waarschuwing { background: var(--oranje-bg); color: var(--tekst); line-height: 1.5; }
.leeg { color: var(--zacht); text-align: center; padding: 22px 16px; margin: 0; font-size: 14px; }
.notitie { background: var(--info); border-radius: var(--r-klein); padding: 12px 16px; color: color-mix(in srgb, var(--tekst) 70%, transparent); }
.sleutel-nieuw { background: var(--info); border-radius: var(--r-klein); padding: 12px 16px; margin: 10px 0; }
.sleutel-nieuw pre { white-space: pre-wrap; word-break: break-all; font-size: 12px; margin: 6px 0 0; }
pre.herstelcodes { background: var(--vlak2); padding: 10px 14px; border-radius: var(--r-klein); font-size: 14px; line-height: 1.7; cursor: copy; }
.beheer-adm h2 { margin-top: 0; }
.qr { margin: 10px 0; } .qr img, .qr canvas { border: 8px solid #fff; border-radius: 8px; }

/* ---------- formulieren ---------- */
.raster.twee { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); align-items: start; }
.raster.formulier { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 14px; align-items: end; margin-bottom: 0; }
.raster.formulier .breed { grid-column: 1 / -1; }
.raster.formulier .knoppen { margin-bottom: 14px; }
.invoerrij { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; align-items: center; }
.invoerrij input { flex: 1; min-width: 140px; margin: 0; } .invoerrij select, .invoerrij input[type=date] { width: auto; margin: 0; }
.regel-c { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--lijn); flex-wrap: wrap; }
.bewerk { margin: 12px 0 0; } .bewerk > summary { margin-bottom: 8px; }
details.optioneel { margin-top: 24px; }
details.optioneel > summary { cursor: pointer; list-style: none; } details.optioneel > summary::-webkit-details-marker { display: none; }
details.optioneel > summary h2 { display: inline; } details.optioneel > summary h2::before { content: "\25B8  "; color: var(--zacht); }
details.optioneel[open] > summary h2::before { content: "\25BE  "; }

/* ---------- filters ---------- */
.filterbalk input[type=search] { min-width: 220px; }
.filterbalk .filtervoet { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.filterbalk .aantal { margin: 0; }

/* ---------- cijfers bovenaan een pagina (zoals de tegels van de kern) ---------- */
.cijfers { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 16px; }
.cijfers > div, .cijfers .cijfer-link { background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--r); padding: 16px; box-shadow: var(--schaduw); display: flex; flex-direction: column; gap: 2px; color: inherit; text-decoration: none; }
.cijfers span { font-size: 14px; font-weight: 700; color: var(--tekst); margin: -16px -16px 12px; padding: 18px 16px; border-bottom: 1px solid var(--lijn); }
.cijfers .cijfer-link span::after { content: " \2192"; color: var(--zacht); font-weight: 400; float: right; }
.cijfers .cijfer-link:hover { border-color: var(--lijn2); }
.cijfers strong { font-size: 24px; font-weight: 700; letter-spacing: -.01em; line-height: 32px; font-variant-numeric: tabular-nums; }
.cijfers small { color: var(--zacht); font-size: 13px; }
.btw-tegel { border-color: color-mix(in srgb, var(--oranje) 40%, var(--lijn)) !important; }
.samenvatting { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin: 10px 0 16px; }
.samenvatting div { background: var(--vlak2); border-radius: var(--r-klein); padding: 12px 16px; display: flex; flex-direction: column; gap: 2px; }
.samenvatting span { font-size: 12px; color: var(--zacht); font-weight: 500; } .samenvatting strong { font-weight: 700; font-size: 16px; }

/* ---------- lijsten in een tabel: rijen als raster ---------- */
.tabel { overflow: hidden; }
/* Een lijst in een kaart loopt tot de rand (geen kaart in een kaart), direct onder de kop van de kaart. */
.kaart > .tabel { border: 0; border-radius: 0; box-shadow: none; margin: 0 -16px 16px; }
.kaart > h2:first-child + .tabel { margin-top: -16px; }
.kaart > .tabel:last-child { margin-bottom: -16px; border-radius: 0 0 var(--r) var(--r); }
.kaart > .tabel + details, .kaart > .tabel + form { margin-top: 12px; }
.rij { display: grid; grid-template-columns: minmax(0, 1.6fr) 130px 54px minmax(0, 1.4fr); gap: 12px; padding: 12px 16px; align-items: center; border-bottom: 1px solid var(--lijn); color: var(--tekst); text-decoration: none; }
.tabel > .rij:last-child, .tabel > details:last-child .rij { border-bottom: 0; }
a.rij:hover { background: color-mix(in srgb, var(--vlak2) 60%, transparent); }
.rij.kop { background: var(--vlak4); color: var(--zacht); font-size: 12px; font-weight: 500; padding-top: 10px; padding-bottom: 10px; }
.rij.kop a { color: var(--zacht); text-decoration: none; }
.rij > span, .rij > small { min-width: 0; }
.rij small { display: block; color: var(--zacht); font-size: 12px; line-height: 16px; margin-top: 1px; }
.rij .getal { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rij-details[open] > .rij { background: var(--vlak2); }
.rij.signaal { grid-template-columns: minmax(0, 1fr) auto; }
.rij.signaal .knoppen { margin: 0; }
.lijst { width: 100%; border-collapse: collapse; margin: 10px 0; } .lijst td { padding: 8px 0; border-bottom: 1px solid var(--lijn); } .rechts { text-align: right; }

/* Stukken (facturen): datum, wie en wat, status, besluit. */
.rij.stuk { grid-template-columns: 82px minmax(0, 1fr) 170px minmax(0, 240px); align-items: start; }
.rij.stuk > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.s-wat small { overflow-wrap: anywhere; }
.s-bestand { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11.5px !important; }
.s-reden { color: var(--oranje) !important; }
.s-gegevens { color: var(--tekst2) !important; font-variant-numeric: tabular-nums; }
.s-status .status { align-self: flex-start; }
.s-acties { align-items: flex-end; } .s-acties .knoppen { margin: 0; }
.s-acties select { width: auto; max-width: 170px; margin: 0; padding: 4px 8px; font-size: 12.5px; min-height: 28px; }

/* Leveranciers, portalen, rondes, catalogus, boekingen */
.rij.lev { grid-template-columns: minmax(0, 1.3fr) 70px 70px 90px minmax(0, 1.6fr); }
.rij.portaal { grid-template-columns: minmax(0, 1fr) 70px 90px minmax(0, 2fr); }
.rij.portaal > span:first-child { display: flex; flex-direction: column; gap: 2px; }
.rij.ronde { grid-template-columns: 130px 100px 110px 70px 90px minmax(0, 1fr); }
.rij.portaal2 { grid-template-columns: minmax(0, 1.7fr) minmax(0, .9fr) minmax(0, .7fr) minmax(0, 1fr) 128px; cursor: pointer; list-style: none; }
.rij.portaal2::-webkit-details-marker, .rij.catalogus::-webkit-details-marker { display: none; }
.rij.portaal2 > span:first-child { display: flex; flex-direction: column; gap: 2px; }
.rij.portaal2 small, .rij.catalogus small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.portaal-bewerk { padding: 16px; border-bottom: 1px solid var(--lijn); background: var(--vlak2); display: grid; gap: 12px; }
.portaal-bewerk label { margin: 0; }
.robot-blok { margin: 0; padding: 12px 16px; background: var(--vlak2); border-bottom: 1px solid var(--lijn); }
.robot-blok > summary { font-size: 13px; color: var(--tekst2); }
.robot-blok .portaal-bewerk { padding: 12px 0 0; border-bottom: 0; }
.robot-vraag { display: grid; gap: 8px; } .robot-vraag input { flex: 1; min-width: 140px; }
.rij.catalogus { grid-template-columns: minmax(0, 1.7fr) minmax(0, .9fr) minmax(0, .7fr) minmax(0, .8fr) 136px; cursor: pointer; list-style: none; }
.rij.catalogus > span:first-child, .rij.catalogus > span:nth-child(2), .rij.catalogus > span:nth-child(3) { display: flex; flex-direction: column; gap: 2px; }
.portaal-nieuw { margin-top: 16px; } .portaal-nieuw select { width: auto; min-width: 240px; }
.rij.boeking { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.2fr) minmax(0, 1.3fr) 120px minmax(0, 1.6fr); align-items: start; }
.rij.boeking > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rij.boeking .oordeel { flex-direction: row; flex-wrap: wrap; gap: 4px; align-items: center; } .rij.boeking .oordeel small { flex-basis: 100%; }

/* ---------- uploaden ---------- */
.kaart.upload { max-width: 640px; display: grid; gap: 12px; }
.dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 160px; border: 1px dashed var(--lijn2); border-radius: var(--r);
  background: var(--vlak4); cursor: pointer; text-align: center; padding: 20px; position: relative; transition: border-color .15s, background .15s; }
.dropzone:hover, .dropzone.over { border-color: var(--tekst2); background: var(--vlak2); }
.dropzone input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; }
.dropzone strong { font-size: 16px; } .dropzone .gekozen { color: var(--tekst); font-weight: 600; font-size: 13px; }
[data-kopieer-tekst] { cursor: copy; }

/* ---------- inloggen en openbare pagina's (Factuurhulp, privacybeleid) ---------- */
.merk { display: flex; align-items: center; gap: 10px; color: var(--tekst); font-weight: 700; font-size: 15px; line-height: 1.2; text-decoration: none; }
.merk small { display: block; font-weight: 500; color: var(--zacht); font-size: 12px; }
.merk .merk-icoon { width: 32px; height: 32px; } .merk .merk-icoon svg { width: 17px; height: 17px; }
.login-merk { justify-content: center; margin-bottom: 12px; }
.kaart.openbaar { max-width: 760px; margin: 5vh auto; padding: 32px; line-height: 1.65; }
.openbaar .login-merk { justify-content: flex-start; margin-bottom: 20px; }
.openbaar h1 { font-size: 28px; line-height: 36px; margin-bottom: 8px; }
.openbaar h2 { font-size: 17px; margin: 28px 0 6px; }
.openbaar ul { padding-left: 20px; } .openbaar li { margin: 4px 0; }
.openbaar table { margin: 8px 0; } .openbaar td.getal, .openbaar th.getal { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.openbaar-voet { margin-top: 32px; padding-top: 14px; border-top: 1px solid var(--lijn); color: var(--zacht); font-size: 13px; }

/* ---------- smal scherm ---------- */
@media (max-width: 1180px) {
  .rij.portaal2 { grid-template-columns: minmax(0, 1.6fr) minmax(0, .7fr) minmax(0, 1fr) 118px; } .rij.portaal2 > span:nth-child(2) { display: none; }
  .rij.catalogus { grid-template-columns: minmax(0, 1.6fr) minmax(0, .8fr) minmax(0, .8fr) 128px; } .rij.catalogus > span:nth-child(4) { display: none; }
}
@media (max-width: 1000px) { .rij.boeking { grid-template-columns: 1fr 1fr; } .rij.boeking > :first-child, .rij.boeking > .oordeel { grid-column: 1 / -1; } .rij.boeking.kop { display: none; } }
@media (max-width: 860px) { .zijbalk { overflow-y: auto; } }
@media (max-width: 700px) {
  .rij { grid-template-columns: 1fr auto; } .rij > :nth-child(3) { display: none; } .rij > :nth-child(4) { grid-column: 1 / -1; }
  .rij.kop { display: none; }
  .rij.signaal { grid-template-columns: 1fr; } .rij.signaal .knoppen { justify-content: flex-start; }
  .rij.stuk { grid-template-columns: 70px minmax(0, 1fr); } .rij.stuk > .s-status, .rij.stuk > .s-acties { grid-column: 2; display: flex !important; align-items: flex-start; }
  .rij.lev, .rij.portaal, .rij.ronde { grid-template-columns: 1fr 1fr; } .rij.lev > :first-child, .rij.portaal > :first-child, .rij.lev > small, .rij.ronde > small { grid-column: 1 / -1; display: flex !important; }
  .rij.lev > :nth-child(3), .rij.portaal > :nth-child(3), .rij.ronde > :nth-child(3) { display: block; }
  .rij.portaal2, .rij.catalogus { grid-template-columns: minmax(0, 1fr) auto; }
  .rij.portaal2 > span:nth-child(2), .rij.portaal2 > span:nth-child(3), .rij.portaal2 > span:nth-child(4), .rij.catalogus > span:nth-child(2), .rij.catalogus > span:nth-child(3) { display: none; }
  .samenvatting { grid-template-columns: 1fr 1fr; }
  .filterbalk select, .filterbalk input { flex: 1 1 45%; }
  .kaart.openbaar { margin: 0 auto; padding: 20px 16px; border-radius: 0; }
}
@media print {
  .zijbalk, .bovenbalk, button, .bewerk, .filterbalk { display: none !important; }
  .app { display: block; } body { background: #fff; color: #000; } .tabel, .kaart, .cijfers > div { box-shadow: none; }
}