/* SewerForms, basisstijl.
 *
 * Twee dingen sturen dit bestand, en ze zijn allebei een eis uit de toetslijst:
 *
 * A13: de monteur heeft natte handschoenen in een kruipruimte, op een telefoon, in de zon.
 *      Dus: grote raakvlakken (minimaal 56px hoog), een kolom, hoog contrast, geen hover
 *      als enige signaal, en geen hairlines die in fel licht wegvallen.
 *
 * A14: merk en entiteit zijn variabel. Alle merkgebonden waarden staan als variabele op
 *      :root en worden per tenant uit de database gezet. Nergens een hardcoded kleur of
 *      naam in een regel die niet met --merk begint.
 *
 * Geen framework, geen build. Dit bestand is wat de browser krijgt.
 */

@font-face {
  font-family: 'BreuerText';
  src: url('/assets/BreuerText-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'BreuerText';
  src: url('/assets/BreuerText-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* Merkgebonden. Wordt per tenant overschreven; dit is de terugval. */
  --merk-primair: #00619e;
  --merk-primair-donker: #004d7c;
  --merk-accent: #ee712a;

  --zwart: #151515;
  --grijs-50: #f7f8fa;
  --grijs-100: #f1f3f6;
  --grijs-200: #e4e8ee;
  --grijs-300: #cdd4dc;
  --grijs-500: #6b7785;
  --grijs-700: #374151;
  --groen: #0a7c3f;
  --groen-licht: #e8f7ee;
  --rood: #c0392b;
  --rood-licht: #fdecea;
  --amber: #b7791f;
  --amber-licht: #fef6e7;

  --font: 'BreuerText', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Raakvlakken. 56px is de ondergrens voor een hand met een handschoen aan;
     44px (de gangbare richtlijn) is daarvoor te klein. */
  --raak: 56px;
  --raak-groot: 68px;
  --radius: 12px;
}

* { box-sizing: border-box; }

html {
  font-family: var(--font);
  color: var(--zwart);
  -webkit-text-size-adjust: 100%;
  /* Geen automatische vergroting bij het focussen van een veld op iOS. */
  font-size: 17px;
}

body {
  margin: 0;
  background: var(--grijs-50);
  line-height: 1.45;
  /* Ruimte onder de inhoud, zodat de laatste knop niet achter een browserbalk valt. */
  padding-bottom: env(safe-area-inset-bottom);
}

/* ---------------------------------------------------------------- structuur */

.balk {
  /* Wit, niet de merkkleur. Reden: een bedrijfslogo is gemaakt voor een witte
     achtergrond, en op een blauwe balk valt donkerblauwe letter gewoon weg. Hun
     eigen tool doet het om dezelfde reden zo. De merkkleur zit in de onderrand. */
  background: #fff;
  color: var(--zwart);
  border-bottom: 3px solid var(--merk-primair);
  padding: 8px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  position: sticky;
  top: 0;
  z-index: 20;
}
.balk img { height: 30px; width: auto; display: block; }
.balk .merknaam { font-weight: 700; font-size: 18px; letter-spacing: -0.01em; color: var(--merk-primair); }
.balk .rechts { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: 15px; }
.balk .rechts span { color: var(--grijs-500); }

.wrap { max-width: 720px; margin: 0 auto; padding: 16px; }
.wrap-breed { max-width: 1100px; margin: 0 auto; padding: 16px; }

h1 { font-size: 24px; margin: 4px 0 16px; letter-spacing: -0.015em; }
h2 { font-size: 19px; margin: 24px 0 10px; letter-spacing: -0.01em; }

.kaart {
  background: #fff;
  border: 1px solid var(--grijs-200);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 12px;
}

/* ------------------------------------------------------------------ velden */

label, .veldnaam {
  display: block;
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 6px;
  color: var(--grijs-700);
}

input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=datetime-local], textarea, select {
  width: 100%;
  font-family: var(--font);
  font-size: 17px;          /* 17px voorkomt inzoomen op iOS bij focus */
  min-height: var(--raak);
  padding: 12px 14px;
  border: 2px solid var(--grijs-300);
  border-radius: var(--radius);
  background: #fff;
  color: var(--zwart);
  outline: none;
}
textarea { min-height: 120px; resize: vertical; line-height: 1.5; }

input:focus, textarea:focus, select:focus {
  border-color: var(--merk-primair);
  box-shadow: 0 0 0 3px rgba(0, 97, 158, .18);
}

.veld { margin-bottom: 18px; }
.veld .toelichting { font-size: 14px; color: var(--grijs-500); margin: -2px 0 8px; }

/* Ja/Nee als twee grote knoppen. Dit is het meest gebruikte veldtype in het
   inspectieformulier, dus hier valt de meeste tijdwinst te halen. */
.janee { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.janee label {
  margin: 0;
  min-height: var(--raak-groot);
  border: 2px solid var(--grijs-300);
  border-radius: var(--radius);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
}
/* De radio zelf verbergen we visueel, maar hij blijft in de tabvolgorde en bereikbaar
   voor een schermlezer. position:absolute zonder relatieve ouder zette hem elders op
   de pagina neer; dit is de gangbare techniek die dat niet doet. */
.janee input, .keuzes input {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}
.janee input:checked + label {
  border-color: var(--merk-primair);
  background: var(--merk-primair);
  color: #fff;
}
.janee input:focus-visible + label { box-shadow: 0 0 0 3px rgba(0, 97, 158, .35); }

/* Keuzelijst met meer dan twee opties: ook knoppen, niet een dropdown.
   Een dropdown op een telefoon met handschoenen is een strafwerkje. */
.keuzes { display: grid; gap: 8px; }
.keuzes label {
  margin: 0;
  min-height: var(--raak);
  border: 2px solid var(--grijs-300);
  border-radius: var(--radius);
  background: #fff;
  display: flex;
  align-items: center;
  padding: 0 16px;
  font-size: 17px;
  font-weight: 400;
  cursor: pointer;
}
.keuzes input:checked + label {
  border-color: var(--merk-primair);
  background: #eaf4fb;
  font-weight: 700;
}
.keuzes input:focus-visible + label { box-shadow: 0 0 0 3px rgba(0, 97, 158, .35); }

/* ------------------------------------------------------------------ knoppen */

.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--raak);
  padding: 0 22px;
  font-family: var(--font);
  font-size: 17px;
  font-weight: 700;
  border: 2px solid transparent;
  border-radius: var(--radius);
  background: var(--merk-primair);
  color: #fff;
  cursor: pointer;
  text-decoration: none;
}
.knop:hover { background: var(--merk-primair-donker); color: #fff; }
.knop:disabled { opacity: .5; cursor: not-allowed; }
.knop-breed { width: 100%; }
.knop-groot { min-height: var(--raak-groot); font-size: 19px; }
.knop-tweede { background: #fff; color: var(--merk-primair); border-color: var(--grijs-300); }
.knop-tweede:hover { background: var(--grijs-100); color: var(--merk-primair-donker); }
.knop-accent { background: var(--merk-accent); }
.knop-accent:hover { background: #d4641f; }

/* -------------------------------------------------------------------- lijst */

.lijst { display: grid; gap: 10px; }
.lijst-item {
  display: block;
  background: #fff;
  border: 1px solid var(--grijs-200);
  border-left: 5px solid var(--merk-primair);
  border-radius: var(--radius);
  padding: 14px 16px;
  min-height: var(--raak-groot);
  text-decoration: none;
  color: var(--zwart);
}
.lijst-item:hover { background: var(--grijs-100); color: var(--zwart); }
.lijst-item .hoofd { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
.lijst-item .sub { font-size: 15px; color: var(--grijs-500); margin-top: 3px; }
.lijst-item .sub b { color: var(--grijs-700); font-weight: 700; }

/* ------------------------------------------------------------------- labels */

.label {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 3px 9px;
  border-radius: 20px;
  white-space: nowrap;
}
.label-groen { background: var(--groen-licht); color: var(--groen); }
.label-amber { background: var(--amber-licht); color: var(--amber); }
.label-rood  { background: var(--rood-licht);  color: var(--rood); }
.label-grijs { background: var(--grijs-100);   color: var(--grijs-500); }

/* --------------------------------------------------------------- meldingen */

.melding { border-radius: var(--radius); padding: 12px 14px; margin-bottom: 14px; font-size: 15px; }
.melding-fout { background: var(--rood-licht); color: var(--rood); border: 1px solid #f5c6c0; }
.melding-info { background: #eaf4fb; color: var(--merk-primair-donker); border: 1px solid #c5e0f2; }

/* ------------------------------------------------------------------ stappen */

.voortgang { display: flex; gap: 4px; margin-bottom: 14px; }
.voortgang span { flex: 1; height: 5px; border-radius: 3px; background: var(--grijs-200); }
.voortgang span.klaar { background: var(--merk-accent); }
.voortgang span.nu { background: var(--merk-primair); }

.stapkop { font-size: 14px; color: var(--grijs-500); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }

/* Context van de werkbon, blijft in beeld zodat de monteur altijd weet waar hij is. */
.context {
  background: var(--merk-primair-donker);
  color: #fff;
  border-radius: var(--radius);
  padding: 10px 14px;
  margin-bottom: 14px;
  font-size: 15px;
}
.context .adres { font-weight: 700; font-size: 17px; }
.context .meta { opacity: .85; font-size: 14px; margin-top: 2px; }

/* --------------------------------------------------------------------- hulp */

.stil { color: var(--grijs-500); font-size: 15px; }
.rechts { text-align: right; }
.rij { display: flex; gap: 10px; align-items: center; }
.rij-eind { margin-left: auto; }
.mono { font-family: ui-monospace, Menlo, monospace; font-size: 14px; }

/* Bij een smal scherm alles onder elkaar en de knoppen vol breed. */
@media (max-width: 560px) {
  .wrap, .wrap-breed { padding: 12px; }
  h1 { font-size: 21px; }
  .knop { width: 100%; }
  .rij { flex-wrap: wrap; }
}

/* Wie beweging vermijdt, krijgt geen animaties. */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ------------------------------------------------------- hulpklassen
 *
 * Deze bestaan omdat de Content-Security-Policy geen inline stijl toestaat
 * (style-src 'self', zonder unsafe-inline). Dat is geen ongemak maar de bedoeling:
 * het is dezelfde regel die een geuploade SVG onschadelijk maakt, zie AR2 en AR5.
 * Alles wat anders een style-attribuut was geweest, staat hier als klasse.
 */
.mt-0  { margin-top: 0; }
.mt-s  { margin-top: 10px; }
.mt-m  { margin-top: 16px; }
.mt-l  { margin-top: 22px; }
.mb-s  { margin-bottom: 10px; }
.mb-0  { margin-bottom: 0; }
.inline { display: inline; }

/* Kleine knop in de bovenbalk, naast de naam van de gebruiker. */
.knop-klein { min-height: 40px; padding: 0 14px; font-size: 15px; }

.groot-nummer { font-size: 20px; }
.kop-nummer   { font-size: 19px; }

/* Inlogscherm */
.inlogvak { max-width: 400px; margin: 8vh auto; padding: 0 16px; }
.inlogvak .logo { text-align: center; margin-bottom: 22px; }
.inlogvak .logo img { height: 46px; width: auto; max-width: 100%; }
.inlogvak .logo .merknaam { font-size: 26px; font-weight: 700; color: var(--merk-primair); }

/* Het logo in de bovenbalk mag nooit uitlopen, wat de bron ook aanlevert. */
.balk img { max-width: 210px; object-fit: contain; }

/* --------------------------------------------------- conditionele takken
 *
 * Een tak staat altijd in de HTML en wordt lokaal getoond of verborgen. Dat is de
 * reden dat er uberhaupt JavaScript in deze applicatie zit: in een kruipruimte met
 * slecht bereik is een serverronde per ja/nee-vraag het verschil tussen bruikbaar
 * en onwerkbaar. De server rekent bij het opslaan alles opnieuw uit.
 */
.tak {
  border-left: 3px solid var(--grijs-200);
  padding-left: 14px;
  margin-left: 4px;
  margin-bottom: 4px;
}
.tak.verborgen { display: none; }

/* Zonder JavaScript is er niets om te tonen of te verbergen, dus dan staat alles open.
   Beter een lang formulier dan een formulier waarin de helft onbereikbaar is. */
html.geen-js .tak.verborgen { display: block; }

.keuzes-meer label::before {
  content: '';
  width: 22px; height: 22px;
  border: 2px solid var(--grijs-300);
  border-radius: 5px;
  margin-right: 12px;
  flex: none;
}
.keuzes-meer input:checked + label::before {
  background: var(--merk-primair);
  border-color: var(--merk-primair);
  /* Vinkje als achtergrond, zodat er geen extra request nodig is. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.5'%3E%3Cpath d='M3 8.5l3.5 3.5L13 5'/%3E%3C/svg%3E");
  background-size: 16px; background-position: center; background-repeat: no-repeat;
}

.mediavak {
  border: 2px dashed var(--grijs-300);
  border-radius: var(--radius);
  padding: 20px 16px;
  text-align: center;
  background: var(--grijs-100);
}

/* Opslagstatus. Altijd zichtbaar, want een monteur moet weten of zijn werk veilig is. */
.opslagstatus {
  position: sticky; bottom: 0;
  background: #fff;
  border-top: 2px solid var(--grijs-200);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  margin: 16px -16px 0;
  display: flex; align-items: center; gap: 10px;
  font-size: 15px;
}
.opslagstatus .punt { width: 10px; height: 10px; border-radius: 50%; background: var(--grijs-300); flex: none; }
.opslagstatus.opgeslagen .punt { background: var(--groen); }
.opslagstatus.bezig .punt      { background: var(--amber); }
.opslagstatus.mislukt .punt    { background: var(--rood); }
.opslagstatus.mislukt          { color: var(--rood); font-weight: 700; }

/* --------------------------------------------------------- detailscherm */
.kolommen { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 900px) {
  .kolommen { grid-template-columns: 1fr 320px; align-items: start; }
  .zijkolom { position: sticky; top: 74px; }
}

.regel { display: flex; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--grijs-100); }
.regel:last-child { border-bottom: 0; }
.regelnaam { flex: 0 0 45%; color: var(--grijs-700); font-weight: 700; font-size: 14.5px; }
.regelwaarde { flex: 1; }

.tijdlijnitem { padding: 9px 0; border-bottom: 1px solid var(--grijs-100); font-size: 14.5px; }
.tijdlijnitem:last-child { border-bottom: 0; }

/* Knoppenrij met filters mag afbreken op een smal scherm. */
.rij .knop-klein { width: auto; }

/* ------------------------------------------------------------------- media */
.mini-rij { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.mini { position: relative; width: 92px; height: 92px; border-radius: 10px; overflow: hidden;
        border: 1px solid var(--grijs-200); background: var(--grijs-100); }
.mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mini-weg {
  position: absolute; top: 4px; right: 4px;
  width: 30px; height: 30px; border-radius: 50%;
  border: 0; background: rgba(0,0,0,.62); color: #fff;
  font-size: 19px; line-height: 1; cursor: pointer;
}

/* Het uploadvak is een label om een verborgen file-input: dan is het hele vlak
   een raakvlak, ook met een handschoen aan. */
label.mediavak { display: block; cursor: pointer; min-height: var(--raak-groot); }
label.mediavak:hover { background: #eaf4fb; border-color: var(--merk-primair); }
.mediavak-tekst { font-weight: 700; color: var(--merk-primair); }
.verborgen-invoer { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.wachtrij:empty { display: none; }
.wachtrij { margin-top: 8px; display: grid; gap: 6px; }
.wachtrij-item { display: flex; align-items: center; gap: 10px; font-size: 14.5px;
                 padding: 8px 12px; border-radius: 10px; background: var(--grijs-100); }
.wachtrij-item.mislukt { background: var(--rood-licht); color: var(--rood); }
.wachtrij-item .opnieuw { margin-left: auto; }
.mini-video { display: flex; align-items: center; justify-content: center;
              background: var(--grijs-200); color: var(--grijs-700); font-weight: 700;
              font-size: 13px; text-decoration: none; }

/* Categorielabel bij een melding. De kleuren komen per categorie uit /merk.css,
   want de CSP staat geen inline stijl toe. */
.cat {
  display: inline-block; font-size: 12.5px; font-weight: 700;
  padding: 3px 9px; border-radius: 20px; white-space: nowrap;
  background: var(--grijs-100); color: var(--grijs-700);
}

/* ------------------------------------------------------------------------
   De formulierenbouwer (A2). Dit is het enige scherm dat op een pc wordt
   gebruikt en niet in een kruipruimte, dus hier mag het dichter op elkaar
   staan dan in de invuller. De raakvlakken blijven wel groot genoeg om het
   op een tablet te doen.
   ------------------------------------------------------------------------ */

.kaart-link { display: block; text-decoration: none; color: inherit; }
.kaart-link:hover { border-color: var(--merk-primair); }
.kaart-melding { background: var(--groen-licht); border-color: var(--groen); }

.bouwer-balk { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px;
               position: sticky; top: 0; z-index: 5; background: var(--grijs-50);
               padding: 10px 0; }

.veldlijst { display: grid; gap: 8px; margin: 10px 0; min-height: 14px; }
.veldvak { border: 1px solid var(--grijs-200); border-radius: 10px; padding: 10px 12px;
           background: #fff;
           /* Een grid-item heeft standaard min-width:auto en krimpt dus niet onder de
              breedte van zijn inhoud. Bij vier niveaus geneste takken blies dat het
              vak op tot 608 pixels op een scherm van 485, met horizontale schuif over
              de hele pagina. A13 zegt: een kolom, geen zijwaarts geschuif. */
           min-width: 0; }
 /* Wrappen als het moet. Bij vier niveaus genest blijft er voor het label bijna geen
    ruimte over, en dan hoort de knoppenrij naar de volgende regel te gaan in plaats van
    de pagina zijwaarts te laten schuiven. */
.veldkop { gap: 10px; align-items: center; flex-wrap: wrap; }
.optierij { flex-wrap: wrap; }
.veldregels { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 8px; }

.greep { cursor: grab; color: var(--grijs-500); font-size: 18px; line-height: 1;
         padding: 6px 2px; touch-action: none; }
.greep:active { cursor: grabbing; }
.sortable-ghost { opacity: .4; }
.sortable-chosen { border-color: var(--merk-primair); }

.stapnaam, .veldlabel, .optielabel {
  font: inherit; font-weight: 700; border: 1px solid transparent; background: transparent;
  border-radius: 8px; padding: 7px 8px; min-width: 0; flex: 1;
}
.stapnaam { font-size: 17px; }
.veldlabel { font-weight: 500; }
.optielabel { font-weight: 500; }
.stapnaam:hover, .veldlabel:hover, .optielabel:hover { border-color: var(--grijs-200); }
.stapnaam:focus, .veldlabel:focus, .optielabel:focus {
  border-color: var(--merk-primair); background: #fff; outline: none;
}

.typekiezer, .toevoegen { display: flex; gap: 5px; flex-wrap: wrap; }
.toevoegen { margin-top: 8px; }
.typeknop {
  font: inherit; font-size: 13px; line-height: 1; padding: 8px 10px; min-height: 34px;
  border: 1px solid var(--grijs-300); background: #fff; color: var(--grijs-700);
  border-radius: 8px; cursor: pointer;
}
.typeknop.gekozen { background: var(--merk-primair); border-color: var(--merk-primair); color: #fff; }
.toevoegknop { border-style: dashed; color: var(--grijs-500); }
.toevoegknop:hover { color: var(--merk-primair); border-color: var(--merk-primair); }

.aanvink { display: inline-flex; align-items: center; gap: 7px; font-size: 14.5px;
           color: var(--grijs-700); cursor: pointer; }
.aanvink input { width: 20px; height: 20px; }

/* De nesting wordt met randen getoond, niet met stapelende marges. Elk niveau kostte
   eerst 32 pixels plus nog eens 14 voor de diepte; bij vier niveaus schoof de rechter
   knoppenrij daarmee buiten het scherm. */
.opties { margin-top: 10px; padding-left: 10px; border-left: 3px solid var(--grijs-200); }
.optierij { gap: 8px; align-items: center; }
.tak-bouwer { margin: 4px 0 12px 0; padding-left: 8px;
              border-left: 2px dashed var(--grijs-300); }
.tak-statisch { margin: 2px 0 8px 16px; padding-left: 10px;
                border-left: 2px dashed var(--grijs-300); }
.veldrij { display: flex; gap: 10px; align-items: center; padding: 6px 0;
           margin-left: calc(var(--diepte, 0) * 14px); }

/* De knoppenrij rechts. .rij-eind is elders alleen een "duw naar rechts", dus de
   kinderen lijnden op de tekstbaseline uit en stond het kruisje een paar pixels lager
   dan de pijltjes. Binnen de bouwer worden het echte flexrijen; buiten de bouwer
   verandert er niets. */
#bouwer .rij-eind { display: flex; align-items: center; gap: 6px; }
/* Gelijke vierkantjes. Het kruisje is een smaller teken dan een pijl, dus zonder vaste
   breedte werd die knop 39 in plaats van 44 pixels en liep het ritme scheef. */
#bouwer .rij-eind .knop-klein { width: 44px; padding: 0; }
.verplaats { display: inline-flex; align-items: center; gap: 4px; }
.wegvak { display: inline-flex; align-items: center; }
.knop-weg { color: var(--rood); border-color: var(--rood); }
.bevestig { display: inline-flex; gap: 6px; align-items: center; font-size: 13.5px;
            color: var(--rood); white-space: nowrap; }
.greep-uit { width: 16px; display: inline-block; }
.slotje { font-size: 15px; opacity: .65; padding: 0 6px; cursor: help; }