/* Ordis4D Monitor, het portaal. Geen raamwerk: één kolom op een gsm (onder
   700 px), lange tabellen scrollen in hun eigen blok. */

:root {
  --tekst: #1d2329;
  --zacht: #5b6670;
  --lijn: #d5dbe0;
  --vlak: #f4f6f8;
  --accent: #0b5c8a;
  --goed: #1f6f3a;
  --fout: #a02020;
  --fout-vlak: #fbeaea;
  --goed-vlak: #e8f4ec;
}

* { box-sizing: border-box; }

html { font-size: 16px; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--tekst);
  background: #fff;
  line-height: 1.45;
}

a { color: var(--accent); }

.kop {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.25rem;
  padding: 0.6rem 1rem;
  border-bottom: 1px solid var(--lijn);
  background: var(--vlak);
}

.merk { font-weight: 700; text-decoration: none; color: var(--tekst); }

.menu { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; }
.menu a { text-decoration: none; }
.menu a:hover { text-decoration: underline; }

.gebruiker { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-left: auto; }
.gebruiker form, .taalkeuze { display: inline-flex; gap: 0.25rem; margin: 0; }
.taalkeuze button[aria-current="true"] { font-weight: 700; }

main { max-width: 72rem; margin: 0 auto; padding: 1rem; }

h1 { font-size: 1.5rem; margin: 0.5rem 0 1rem; }
h2 { font-size: 1.2rem; margin: 1.5rem 0 0.5rem; }
h3 { font-size: 1.05rem; margin: 1rem 0 0.4rem; }

.uitleg { color: var(--zacht); }

.melding { padding: 0.6rem 0.8rem; border-radius: 4px; margin: 0 0 1rem; }
.melding-ok { background: var(--goed-vlak); color: var(--goed); }
.melding-fout { background: var(--fout-vlak); color: var(--fout); }

.formulier { display: grid; grid-template-columns: max-content minmax(0, 24rem); gap: 0.5rem 1rem; align-items: center; margin: 0.5rem 0 1rem; }
.formulier label { font-weight: 600; }
.formulier .uitleg, .formulier button, .formulier fieldset, .formulier .vinkje { grid-column: 1 / -1; }
.formulier.smal { max-width: 32rem; }
.formulier.filter { grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); align-items: end; }
.formulier fieldset { display: grid; grid-template-columns: max-content minmax(0, 24rem); gap: 0.5rem 1rem; border: 1px solid var(--lijn); border-radius: 4px; }
.vinkje { font-weight: normal; }

input, select, textarea, button { font: inherit; }
input, select, textarea { padding: 0.35rem 0.5rem; border: 1px solid var(--lijn); border-radius: 4px; width: 100%; }
input[type="checkbox"] { width: auto; }
button { padding: 0.4rem 0.9rem; border: 1px solid var(--accent); background: var(--accent); color: #fff; border-radius: 4px; cursor: pointer; justify-self: start; }
.taalkeuze button, .gebruiker button { background: #fff; color: var(--accent); padding: 0.2rem 0.6rem; }
button.gevaar { background: var(--fout); border-color: var(--fout); }

.tabelblok { overflow-x: auto; max-width: 100%; margin: 0.5rem 0 1rem; }
table { border-collapse: collapse; min-width: 100%; }
th, td { text-align: left; padding: 0.35rem 0.6rem; border-bottom: 1px solid var(--lijn); vertical-align: top; }
th { background: var(--vlak); white-space: nowrap; }
td.acties, p.acties { display: flex; flex-wrap: wrap; gap: 0.25rem 0.8rem; }
td.acties form { margin: 0; }

.gegevens { display: grid; grid-template-columns: max-content 1fr; gap: 0.25rem 1rem; }
.gegevens dt { font-weight: 600; }
.gegevens dd { margin: 0; }

.kaart { border: 1px solid var(--lijn); border-radius: 6px; padding: 0.5rem 1rem; margin: 1rem 0; }
.label { font-size: 0.8rem; background: var(--vlak); border: 1px solid var(--lijn); border-radius: 3px; padding: 0 0.3rem; font-weight: normal; }

.eenmalig { border: 2px solid var(--accent); border-radius: 6px; padding: 0.5rem 1rem; margin: 1rem 0; background: #f0f7fb; }
.geheim { font-size: 1.05rem; word-break: break-all; white-space: pre-wrap; user-select: all; }
code.klein { font-size: 0.8rem; word-break: break-all; }

.bevestiging { border: 2px solid var(--fout); border-radius: 6px; padding: 0.5rem 1rem; margin: 1rem 0; }
.bladeren { display: flex; gap: 1rem; align-items: center; }

/* De bedieningsschermen: overzicht, opdrachten, meldingen, configuratie. */
.melding-waarschuwing { background: #fdf3e1; color: #7a4b00; }
.goed { color: var(--goed); font-weight: 600; }
.slecht { color: var(--fout); font-weight: 600; }
.opdrachtknoppen { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin: 0.5rem 0; }
.opdrachtknoppen form { margin: 0; }
a.knop { display: inline-block; padding: 0.4rem 0.9rem; border: 1px solid var(--accent); border-radius: 4px; text-decoration: none; }
button.groot { font-size: 1.15rem; padding: 0.7rem 1.4rem; font-weight: 700; }
button.tweede { background: #fff; color: var(--accent); }
.knoppenrij { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.formulier.breed { grid-template-columns: max-content minmax(0, 48rem); }
textarea.code { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 0.85rem; }
ol.verloop { margin: 0; padding-left: 1.2rem; }
ul.meldingen { margin: 0.25rem 0; padding-left: 1.2rem; }
tr.onbevestigd td { background: #fffaf0; }

@media (max-width: 700px) {
  .kop { flex-direction: column; align-items: flex-start; }
  .gebruiker { margin-left: 0; }
  .formulier, .formulier fieldset, .formulier.breed { grid-template-columns: minmax(0, 1fr); }
  .gegevens { grid-template-columns: minmax(0, 1fr); }
  main { padding: 0.75rem; }
}

/* De kringen en de kringpagina. */
.kruimel { color: var(--zacht); margin: 0; font-size: 0.9rem; }
span.klein { font-size: 0.85rem; color: var(--zacht); }
tr.aandacht td { background: var(--fout-vlak); }
tr.getoond td { font-weight: 600; }
td.getal { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.toets { display: inline-block; padding: 0 0.4rem; border-radius: 3px; background: var(--vlak); }
.toets-goed { background: var(--goed-vlak); color: var(--goed); }
.toets-slecht { background: var(--fout-vlak); color: var(--fout); }
.inhoudstafel { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin: 0 0 1rem; font-size: 0.9rem; }
.tegels { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0.5rem; margin: 0.5rem 0 1rem; }
.tegel { border: 1px solid var(--lijn); border-radius: 6px; padding: 0.4rem 0.6rem; }
.tegel-aandacht { border-color: var(--fout); background: var(--fout-vlak); }
.tegelnaam { display: block; font-size: 0.8rem; color: var(--zacht); }
.knoppen { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0.5rem 0; }
.knoppen form { margin: 0; }
.knoppen a.knop { display: inline-block; padding: 0.4rem 0.9rem; border: 1px solid var(--accent); border-radius: 4px; text-decoration: none; }
.tabelblok.hoog { max-height: 32rem; overflow-y: auto; }
iframe.rapport { width: 100%; height: 36rem; border: 1px solid var(--lijn); border-radius: 4px; background: #fff; }
summary { cursor: pointer; }
summary h2.inline { display: inline; }

/* Fase 5, deel D-a: de spoorparameters lezen (spoor, grafieken, profiel). */
.sp-status { display: inline-block; padding: 0 0.4rem; border-radius: 3px; font-weight: 600; }
.sp-status-ok { background: var(--goed-vlak); color: var(--goed); }
.sp-status-alarm { background: #fdf1d6; color: #7a5200; }
.sp-status-interventie { background: var(--fout-vlak); color: var(--fout); }
table.spoor th, table.spoor td { white-space: nowrap; }
.sp-groep { border-left: 1px solid var(--lijn); }
/* De spoorgrafieken (fase 5, deel E; overgenomen door deel D-a). Zonder deze
   regels vult SVG het vlak en elke lijn zwart. */
.sg-blok { overflow-x: auto; max-width: 100%; margin: 0.5rem 0 1.5rem; }
svg.sg { display: block; width: 100%; min-width: 40rem; height: auto; }
.sg polyline { fill: none; }
.sg-vlak { fill: #fcfcfb; stroke: #d5dbe0; }
.sg-raster { stroke: #e6e9ec; stroke-width: 1; }
.sg-nullijn { stroke: #9aa4ad; stroke-width: 1; }
.sg-as, .sg-streepje { stroke: #5b6670; stroke-width: 1; }
.sg-tekst { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 12px; fill: #5b6670; }
.sg-tekst-midden { text-anchor: middle; }
.sg-tekst-rechts { text-anchor: end; }
.sg-astitel { fill: #1d2329; font-weight: 600; }
.sg-legenda-tekst { fill: #1d2329; }
.sg-leeg { font-size: 14px; }
.sg-reeks, .sg-grens { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.sg-reeks.sg-actueel { stroke: #2a78d6; stroke-width: 2; }
.sg-reeks.sg-nulmeting { stroke: #8a949c; stroke-width: 1; stroke-dasharray: 4 3; }
/* Het lengteprofiel: vier lijnen, ook zonder kleur uit elkaar te houden. */
.sg-reeks.sg-links.sg-actueel { stroke: #2a78d6; stroke-dasharray: none; }
.sg-reeks.sg-rechts.sg-actueel { stroke: #eb6834; stroke-dasharray: 8 3; }
.sg-reeks.sg-links.sg-nulmeting { stroke: #2a78d6; stroke-dasharray: 2 3; opacity: 0.7; }
.sg-reeks.sg-rechts.sg-nulmeting { stroke: #eb6834; stroke-dasharray: 6 2 2 2; opacity: 0.7; }
.sg-grens { stroke-width: 1.25; }
.sg-grens.sg-alarm { stroke: #c98500; stroke-dasharray: 6 3; }
.sg-grens.sg-interventie { stroke: #d03b3b; }
.sg-punt { stroke: #fff; stroke-width: 1.5; }
.sg-punt.sg-nulmeting { fill: #8a949c; stroke-width: 1; }
.sg-punt.sg-links { fill: #2a78d6; }
.sg-punt.sg-rechts { fill: #eb6834; }
.sg-status-ok { fill: #0ca30c; }
.sg-status-alarm { fill: #fab219; }
.sg-status-interventie { fill: #d03b3b; }
.sg-status-geen { fill: #e6e9ec; }
.sg-punt.sg-status-geen { fill: #fff; stroke: #5b6670; }  /* hol: een waarde zonder status */
.sg-vak { stroke: none; }
.sg-symbool { fill: #1d2329; }
.sg-onderbreking { fill: #f0f2f4; stroke: none; }
.sg-onderbreking-tekst { fill: #5b6670; font-style: italic; }
/* Einde van het blok van deel D-a. */

/* XYZ-alarmen, deel C: de status in kleur, in woord en in vorm (nooit alleen kleur), en de tabellen. */
.xyz-status { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0 0.45rem; border-radius: 3px; font-weight: 600; white-space: nowrap; }
.xyz-vorm { display: inline-block; width: 0.7em; height: 0.7em; background: currentColor; }
.xyz-ok { background: var(--goed-vlak); color: var(--goed); }
.xyz-ok .xyz-vorm { border-radius: 50%; }
.xyz-alarm { background: #fdf1d6; color: #7a5200; }
.xyz-alarm .xyz-vorm { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.xyz-interventie { background: var(--fout-vlak); color: var(--fout); }
.xyz-interventie .xyz-vorm { border-radius: 0; }
.xyz-geen { background: var(--vlak); color: var(--zacht); }
.xyz-geen .xyz-vorm { background: transparent; border: 2px solid currentColor; transform: rotate(45deg); width: 0.55em; height: 0.55em; }
table.xyz-tabel th, table.xyz-tabel td { white-space: nowrap; }
table.xyz-tabel td.getal { text-align: right; }
tr.ingetrokken td { color: var(--zacht); text-decoration: line-through; }
tr.ingetrokken td a { color: var(--zacht); }
form.xyz-bevestig { display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; align-items: center; margin: 0; }
form.xyz-bevestig input { width: 12rem; }
p.xyz-samenvatting { margin: 0.25rem 0 0.75rem; }
p.xyz-samenvatting-alarm a { color: #7a5200; font-weight: 600; }
p.xyz-samenvatting-interventie a { color: var(--fout); font-weight: 700; }
#xyz-bevestig.bevestiging { grid-column: 1 / -1; }
#xyz-bevestig textarea, #xyz-bevestig label { display: block; margin: 0.25rem 0; }
/* De overgang in de statusstrook van de grafiek (11.2): een streepje boven de vakjes. */
.sg-overgang { stroke: #1d2329; stroke-width: 2; }
@media (max-width: 700px) {
  form.xyz-bevestig input { width: 100%; }
}