/* ============================================================================
   herstel.css - Onthaalformulieren en scorebord van de herstellingen
   ========================================================================= */

/* 1. De onthaalformulieren: groot en duidelijk, voor een laptop aan het
      onthaal.                                                               */

.rcz-herstel-form .form-item { margin-block: 0.6em; }
.rcz-herstel-form .form-radios,
.rcz-herstel-form .form-checkboxes {
  display: flex;                    /* Keuzes naast elkaar                   */
  flex-wrap: wrap;                  /* Op een smal scherm onder elkaar       */
  gap: 0.3em 1.4em;                 /* Ruimte tussen de keuzes               */
}
.rcz-herstel-nummer {
  font-size: 1.6em !important;      /* Het nummer goed leesbaar              */
  font-weight: 700;                 /* Vet                                   */
  letter-spacing: 0.05em;           /* Iets uit elkaar                       */
  text-transform: uppercase;        /* Altijd hoofdletters                   */
}
.rcz-herstel-titel {
  margin-block: 0.4em 0.8em;        /* Eigen kop: het thema toont er geen    */
  color: rgba(54, 33, 126, 1);      /* Paars                                 */
}
.rcz-herstel-kop { font-size: 1.2em; }
.rcz-herstel-groot {
  font-size: 2em;                   /* Het nummer bovenaan, groot            */
  font-weight: 700;                 /* Vet                                   */
  color: rgba(233, 91, 19, 1);      /* Oranje                                */
  margin-right: 0.4em;              /* Ruimte voor de naam van het RC        */
}
.rcz-herstel-samenvatting { font-style: italic; }
.rcz-herstel-laatste {
  font-size: 1.4em;                 /* Opvallend                             */
  padding: 0.6em 1em;               /* Binnenmarge                           */
  margin-bottom: 1em;               /* Witruimte onder                       */
  border-left: 6px solid rgba(233, 91, 19, 1);
  background: rgba(233, 91, 19, 0.08);
}
.rcz-herstel-knoppen {
  display: flex;                    /* Knoppen naast elkaar                  */
  flex-wrap: wrap;                  /* Op een smal scherm onder elkaar       */
  gap: 1em;                         /* Ruimte tussen de knoppen              */
  margin-block: 1.5em;              /* Witruimte boven en onder              */
}
.rcz-herstel-knop {
  font-size: 1.3em !important;      /* Grote knoppen                         */
  padding: 0.8em 1.6em !important;  /* Ruim                                  */
}
.rcz-herstel-tip { color: #555; font-size: 0.9em; }
.rcz-herstel-keuze { margin-bottom: 1em; }
.rcz-herstel-keuze .button {
  background: rgba(54, 33, 126, 1) !important;
  border: 2px solid rgba(54, 33, 126, 1) !important;
  color: #fff !important;           /* Knop "Toon": wit op paars             */
  opacity: 1 !important;
}
.rcz-herstel-keuze .button:hover,
.rcz-herstel-keuze .button:focus {
  background: rgba(233, 91, 19, 1) !important;
  border-color: rgba(233, 91, 19, 1) !important;
}
a.rcz-herstel-link {
  color: rgba(54, 33, 126, 1) !important;
  opacity: 1 !important;            /* Links onder de lijst en het scorebord */
  font-weight: 600;
}
.rcz-herstel-lijst { font-size: 0.9em; }
.rcz-herstel-lijst {
  border-collapse: collapse;        /* Eén lijn tussen de cellen             */
  margin-block: 1em;
}
.rcz-herstel-lijst th,
.rcz-herstel-lijst td {
  padding: 0.45em 0.8em;            /* Ruimte in de cellen                   */
  border-bottom: 1px solid #ddd;    /* Lijn onder elke rij                   */
  text-align: left;
  vertical-align: top;
}
.rcz-herstel-lijst th {
  background: rgba(54, 33, 126, 0.08);
  color: rgba(54, 33, 126, 1);      /* Paarse koppen                         */
}
.rcz-herstel-lijst a {
  color: rgba(54, 33, 126, 1) !important;
  opacity: 1 !important;            /* Links in de tabel goed leesbaar       */
  font-weight: 600;
}
.rcz-herstel-deel {
  border-left: 4px solid rgba(233, 91, 19, 1);
  padding-left: 1em;                /* Gekozen deel van het meldformulier    */
}

/* 1b. De knoppen in de huisstijl. Het thema maakt ze grijs of wit; hier
       paars (hoofdknop), wit met paarse rand (andere knoppen) en rood
       (verwijderen, afwijzen). Bij aanwijzen met de muis: oranje.           */

.rcz-herstel-knoppen a.button,
form.rcz-herstel-form .form-actions .button,
form.confirmation .form-actions .button {
  background: #fff !important;      /* Wit                                   */
  color: rgba(54, 33, 126, 1) !important;
  border: 2px solid rgba(54, 33, 126, 1) !important;
  opacity: 1 !important;            /* Niet vaag                             */
  text-decoration: none !important;
  cursor: pointer;
}
.rcz-herstel-knoppen a.button.button--primary,
form.rcz-herstel-form .form-actions .button--primary,
form.confirmation .form-actions .button--primary {
  background: rgba(54, 33, 126, 1) !important;
  color: #fff !important;           /* Wit op paars                          */
}
.rcz-herstel-knoppen a.button:hover,
.rcz-herstel-knoppen a.button:focus,
form.rcz-herstel-form .form-actions .button:hover,
form.rcz-herstel-form .form-actions .button:focus,
form.confirmation .form-actions .button:hover,
form.confirmation .form-actions .button:focus {
  background: rgba(233, 91, 19, 1) !important;
  border-color: rgba(233, 91, 19, 1) !important;
  color: #fff !important;           /* Wit op oranje                         */
}
.rcz-herstel-knoppen a.button.rcz-herstel-oranje {
  background: rgba(233, 91, 19, 1) !important;
  border-color: rgba(233, 91, 19, 1) !important;
  color: #fff !important;           /* Vertrek: wit op oranje                */
}
.rcz-herstel-knoppen a.button.rcz-herstel-oranje:hover,
.rcz-herstel-knoppen a.button.rcz-herstel-oranje:focus {
  background: rgba(54, 33, 126, 1) !important;
  border-color: rgba(54, 33, 126, 1) !important;
}
form.rcz-herstel-form .form-actions .button--danger,
form.confirmation .form-actions .button--danger {
  background: #b3261e !important;   /* Rood                                  */
  border-color: #b3261e !important;
  color: #fff !important;
}
form.rcz-herstel-form .form-actions a:not(.button),
form.confirmation .form-actions a:not(.button) {
  color: rgba(54, 33, 126, 1) !important;
  opacity: 1 !important;            /* Link "Terug naar ..." goed leesbaar   */
}

/* 2. Het scorebord.                                                         */

.rcz-scorebord {
  --rcz-paars: rgba(54, 33, 126, 1);
  --rcz-blauw: #0678be;             /* Toestellen: Drupal-blauw (neutraal)   */
  --rcz-ja: #2e7d32;                /* Hersteld: groen                       */
  --rcz-half: #e9a013;              /* Half: geel-oranje                     */
  --rcz-nee: #b3261e;               /* Niet hersteld: rood                   */
  --rcz-bezig: var(--rcz-paars);    /* In behandeling: huisstijl-paars       */
}
.rcz-sb-datum { font-weight: 600; color: var(--rcz-paars); }
.rcz-sb-tegels {
  display: grid;                    /* Vijf tegels in een rooster            */
  grid-template-columns: repeat(auto-fit, minmax(8em, 1fr));
  gap: 0.8em;                       /* Ruimte tussen de tegels               */
  margin-block: 1em;                /* Witruimte boven en onder              */
}
.rcz-sb-tegel {
  display: flex;                    /* Getal boven, label onder              */
  flex-direction: column;
  align-items: center;
  padding: 0.8em 0.4em;             /* Binnenmarge                           */
  border-radius: 8px;               /* Afgeronde hoeken                      */
  background: var(--rcz-blauw);     /* Volledig gekleurd: ook van ver goed   */
  color: #fff;                      /* Wit op blauw, groen, rood en paars    */
}
.rcz-sb-tegel.rcz-sb-ja { background: var(--rcz-ja); }
.rcz-sb-tegel.rcz-sb-nee { background: var(--rcz-nee); }
.rcz-sb-tegel.rcz-sb-half {
  background: var(--rcz-half);
  color: #1d1832;                   /* Donker op geel: beter leesbaar        */
}
.rcz-sb-tegel.rcz-sb-bezig {
  background: var(--rcz-bezig);
  color: #fff;                      /* Wit op paars (contrast 12,5)          */
}
.rcz-sb-getal {
  font-size: 2.6em;                 /* Groot getal                           */
  font-weight: 700;                 /* Vet                                   */
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.rcz-sb-label { font-size: 0.95em; }
.rcz-sb-procent { font-size: 1.2em; font-weight: 600; }
.rcz-sb-soorten {
  display: grid;                    /* Eén rij per soort                     */
  gap: 0.5em;
  margin-block: 1em;
}
.rcz-sb-soort {
  display: grid;                    /* Naam, balk, aantal                    */
  grid-template-columns: minmax(7em, 12em) 1fr 3em;
  align-items: center;
  gap: 0.8em;
}
.rcz-sb-balk {
  display: block;                   /* Grijze baan over de hele breedte      */
  height: 1.8em;                    /* Hoogte van de balk                    */
  border-radius: 4px;               /* Afgeronde hoeken                      */
  overflow: hidden;                 /* Delen binnen de hoeken                */
  background: #eceaf2;              /* Lichtgrijze baan                      */
}
.rcz-sb-vul {
  display: flex;                    /* Delen naast elkaar                    */
  height: 100%;                     /* Even hoog als de baan                 */
}
.rcz-sb-deel {
  display: flex;                    /* Getal in het midden                   */
  align-items: center;
  justify-content: center;
  color: #fff;                      /* Wit op kleur                          */
  font-weight: 600;
  min-width: 1.6em;                 /* Ook een klein deel blijft leesbaar    */
}
.rcz-sb-deel.rcz-sb-ja { background: var(--rcz-ja); }
.rcz-sb-deel.rcz-sb-half { background: var(--rcz-half); color: #1d1832; }
.rcz-sb-deel.rcz-sb-nee { background: var(--rcz-nee); }
.rcz-sb-deel.rcz-sb-bezig { background: var(--rcz-bezig); }
.rcz-sb-totaalrij {
  border-top: 2px solid rgba(54, 33, 126, 1);
  padding-top: 0.4em;               /* Lijn boven de totaalrij               */
  font-weight: 700;                 /* Vet                                   */
}
.rcz-sb-leeg .rcz-sb-naam,
.rcz-sb-leeg .rcz-sb-aantal { color: #767676; }
.rcz-sb-leeg .rcz-sb-aantal {
  background: #eceaf2;              /* Geen toestellen: grijs, zoals de baan */
  color: #555;                      /* Donkergrijs op lichtgrijs             */
}
.rcz-sb-aantal {
  display: flex;                    /* Getal in het midden                   */
  align-items: center;
  justify-content: center;
  height: 1.8em;                    /* Even hoog als de balk                 */
  border-radius: 4px;               /* Afgeronde hoeken, zoals de balk       */
  background: var(--rcz-blauw);     /* Totaal: blauw, zoals "toestellen"     */
  color: #fff;                      /* Wit op blauw (contrast 4,7)           */
  font-weight: 700;
}
.rcz-sb-legende { font-size: 0.85em; color: #555; }
.rcz-sb-legende .rcz-sb-ja { color: var(--rcz-ja); }
.rcz-sb-legende .rcz-sb-half { color: var(--rcz-half); }
.rcz-sb-legende .rcz-sb-nee { color: var(--rcz-nee); }
.rcz-sb-legende .rcz-sb-bezig { color: var(--rcz-bezig); }
.rcz-sb-legende .rcz-sb-totaal { color: var(--rcz-blauw); }

/* 3. Het scorebord op de beamer: schermvullend, groot, zonder menu.         */

.rcz-sb-body {
  margin: 0;
  padding: 1.8vw 4vw;               /* Marge rond het scorebord              */
  font-family: 'Barlow', 'Segoe UI', Arial, sans-serif;
  font-size: 1.9vw;                 /* Groeit mee met het scherm             */
  color: #1d1832;
  background: #fff;
}
.rcz-sb-beamer .rcz-sb-titel {
  margin: 0;
  font-size: 2.2em;                 /* Grote titel                           */
  color: rgba(54, 33, 126, 1);      /* Paars                                 */
}
.rcz-sb-beamer .rcz-sb-getal { font-size: 2.4em; }
.rcz-sb-beamer .rcz-sb-datum { margin-block: 0.2em; }
.rcz-sb-beamer .rcz-sb-tegels { margin-block: 0.5em; }
.rcz-sb-beamer .rcz-sb-legende { margin-block: 0.3em 0; }
.rcz-sb-beamer .rcz-sb-tegel { padding: 0.4em; }
.rcz-sb-beamer .rcz-sb-procent { margin-block: 0.3em; }
.rcz-sb-beamer .rcz-sb-soorten { gap: 0.35em; margin-block: 0.5em; }
.rcz-sb-beamer .rcz-sb-balk,
.rcz-sb-beamer .rcz-sb-aantal { height: 1.35em; }
.rcz-sb-beamer .rcz-sb-legende { font-size: 0.8em; }
.rcz-sb-site {
  position: fixed;                  /* Altijd rechtsonder                    */
  right: 4vw;
  bottom: 1.5vw;
  margin: 0;
  color: rgba(233, 91, 19, 1);      /* Oranje                                */
  font-weight: 700;
}

/* 4. Het kleine zwevende venster boven een presentatie: alles past in een
      venster van ongeveer 520 x 340 pixels; de letters groeien mee.         */

.rcz-sb-klein {
  padding: 2vh 3vw;                 /* Smalle marge                          */
  font-size: min(3vw, 4.6vh);       /* Past in breedte en hoogte             */
}
.rcz-sb-klein .rcz-sb-titel { font-size: 1.5em; }
.rcz-sb-kopdatum { display: none; }  /* Alleen in het kleine venster         */
.rcz-sb-klein .rcz-sb-kopdatum {
  display: inline;
  font-weight: 400;                 /* Datum niet vet                        */
}
.rcz-sb-klein .rcz-sb-datum,
.rcz-sb-klein .rcz-sb-procent { display: none; }
.rcz-sb-klein .rcz-sb-legende { font-size: 0.8em; margin: 0.3em 0 0; }
.rcz-sb-klein .rcz-sb-tegels {
  grid-template-columns: repeat(5, 1fr);
  gap: 0.4em;                       /* Vijf tegels naast elkaar              */
  margin-block: 0.4em;
}
.rcz-sb-klein .rcz-sb-tegel { padding: 0.2em; }
.rcz-sb-klein .rcz-sb-getal { font-size: 1.8em; }
.rcz-sb-klein .rcz-sb-label { font-size: 0.8em; }
.rcz-sb-klein .rcz-sb-soorten { gap: 0.25em; margin-block: 0.4em; }
.rcz-sb-klein .rcz-sb-soort {
  grid-template-columns: 9.6em 1fr 1.8em;
  gap: 0.5em;
}
.rcz-sb-klein .rcz-sb-balk,
.rcz-sb-klein .rcz-sb-aantal { height: 1.15em; }
.rcz-sb-klein .rcz-sb-deel { min-width: 1.2em; font-size: 0.85em; }

/* 5. De grote beamer met de footer van de sponsors en partners: het
      scorebord bovenaan, de footer onderaan; samen precies één scherm.      */

.rcz-sb-groot {
  display: flex;                    /* Scorebord boven, footer onder         */
  flex-direction: column;
  box-sizing: border-box;
  min-height: 100vh;                /* Footer altijd onderaan het scherm     */
  padding-bottom: 0;                /* De footer loopt tot de rand           */
  font-size: min(1.9vw, 2.75vh);    /* Past in breedte en hoogte             */
}
.rcz-sb-groot .rcz-sb-main { flex: 1; }
.rcz-sb-footer {
  margin: 0 -4vw;                   /* Over de hele breedte                  */
  padding: 1.2vh 4vw;
  background: #eee;                 /* Lichtgrijs, zoals op de website       */
  border-top: 2px solid rgba(54, 33, 126, 1);
}
.rcz-sb-logos {
  display: flex;                    /* Logo's naast elkaar                   */
  flex-wrap: nowrap;                /* Op één rij                            */
  align-items: center;
  justify-content: center;
  gap: 1vh 1vw;                     /* Ruimte tussen de logo's               */
}
.rcz-sb-logos img {
  height: 6vh;                      /* Even hoog, groeit mee met het scherm  */
  width: auto;
  max-width: 6.6vw;                 /* Brede logo's worden iets kleiner      */
  object-fit: contain;              /* Zonder vervorming                     */
}
.rcz-sb-contact {
  display: flex;                    /* Tekst en QR-code naast elkaar         */
  align-items: center;
  justify-content: center;
  gap: 1.5vw;
  margin-top: 1vh;
  padding-top: 0.8vh;
  border-top: 1px solid #ccc;       /* Lijn boven de contactregel            */
  font-size: 1.8vh;
  color: #000;
}
.rcz-sb-qr { height: 6vh; width: auto; }

/* 6. Percentages in de tegels en in de balken: iets kleiner en minder vet
      dan het aantal. In het kleine venster alleen in de tegels.             */

.rcz-sb-pct {
  margin-left: 0.25em;              /* Ruimte na het aantal                  */
  font-size: 0.85em;
  font-weight: 400;
  white-space: nowrap;              /* "(41 %)" niet afbreken                */
}
.rcz-sb-label .rcz-sb-pct { font-weight: 700; }
.rcz-sb-deel {
  container-type: inline-size;      /* Elk stuk meet zijn eigen breedte      */
  white-space: nowrap;
  overflow: hidden;
}
@container (max-width: 6.5em) {
  .rcz-sb-deel .rcz-sb-pct { display: none; } /* Te smal: alleen het aantal  */
}
.rcz-sb-klein .rcz-sb-deel .rcz-sb-pct { display: none; }