/*
 * Het bureaublad van Studio.
 *
 * Bewust géén KaiAdmin hier: dat thema is voor het adminpaneel en het portaal. Studio is een
 * werkomgeving waarin iemand een uur lang in één project zit met meerdere modules naast elkaar,
 * en dat vraagt een bureaublad in plaats van een pagina met kaartjes. Zie ARCHITECTURE.md.
 */

:root {
  --plx-taakbalk: #12162a;
  --plx-vensterrand: #d7dbe3;
  --plx-rand: #dfe3ec;        /* lijnen bínnen een venster */
  --plx-rand-sterk: #c4cbd9;  /* een kader dat een groep moet afbakenen */
  --plx-veldrand: #ccd2e0;
  --plx-accent: #2f6df6;
  --plx-tekst: #1e2433;
  --plx-grijs: #6b7280;
  --plx-taakbalk-hoogte: 56px;
}

/* Zonder dit telt een padding van 8px bij een input met width:100% er gewoon
   bovenop, en loopt elk formulier 18px buiten zijn kader — een horizontale
   schuifbalk in een venster dat breed genoeg lijkt. */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  font: 14px/1.45 "Segoe UI", system-ui, sans-serif;
  color: var(--plx-tekst);
  background: #12162a;
}

/* --- achtergronden -------------------------------------------------------
   Elk thema is een eigen set kleuren die de SVG hieronder inleest, geen filter
   over hetzelfde plaatje: hue-rotate leverde onvoorspelbare uitkomsten op.
   Vector en geen foto, zodat het op elk schermformaat scherp blijft en niet
   scheef rekt.                                                              */

.plx-shell {
  --lucht1:#1a1040; --lucht2:#2b2a6b; --lucht3:#2f5b8f; --lucht4:#20406a;
  --gloed1:#ffb27a; --gloed2:#c46bb0;
  --sluier1:#4fd8c8; --sluier2:#7a6bff;
  --berg1a:#2a3f6d; --berg1b:#16223d;
  --berg2a:#1b2a4d; --berg2b:#0e1628;
  --berg3a:#101a30; --berg3b:#080d18;
  --maan:#ffe9c9;
}
.plx-shell[data-thema="zonsopgang"] {
  --lucht1:#2a0f33; --lucht2:#6d2a52; --lucht3:#c2603f; --lucht4:#e8a05a;
  --gloed1:#ffd08a; --gloed2:#e0665e;
  --sluier1:#ffb27a; --sluier2:#c46bb0;
  --berg1a:#7a4a52; --berg1b:#3d2130;
  --berg2a:#4c2b3b; --berg2b:#26131f;
  --berg3a:#2c1826; --berg3b:#150a12;
  --maan:#fff2d6;
}
.plx-shell[data-thema="woud"] {
  --lucht1:#04160f; --lucht2:#0d3326; --lucht3:#1d6b4f; --lucht4:#2f8f6b;
  --gloed1:#b9f2c8; --gloed2:#3fae8b;
  --sluier1:#8ef2c0; --sluier2:#4fd8c8;
  --berg1a:#22593f; --berg1b:#0f2c1f;
  --berg2a:#163c2b; --berg2b:#091b13;
  --berg3a:#0d2419; --berg3b:#05100b;
  --maan:#e8ffe9;
}
.plx-shell[data-thema="staal"] {
  --lucht1:#0d1017; --lucht2:#1e2534; --lucht3:#3b4658; --lucht4:#586376;
  --gloed1:#c9d4e6; --gloed2:#6b7a92;
  --sluier1:#9fb0c8; --sluier2:#6b7a92;
  --berg1a:#414c60; --berg1b:#232a37;
  --berg2a:#2c3442; --berg2b:#161b24;
  --berg3a:#1b2029; --berg3b:#0b0e13;
  --maan:#eef3fa;
}
.plx-shell[data-thema="effen"] {
  --lucht1:#141a2e; --lucht2:#141a2e; --lucht3:#171d33; --lucht4:#171d33;
}
.plx-shell[data-thema="effen"] .plx-achtergrond .sier { display: none; }

/* Flexkolom en geen vaste hoogte: komt er een supportbanner bij, dan krimpt het bureaublad
   mee in plaats van dat de taakbalk onder de onderkant van het scherm verdwijnt. */
.plx-shell {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

/* isolation: een eigen stapelcontext. De vensters krijgen een z-index die bij elke klik oploopt; zonder deze
   regel schoven ze na een tijdje over het startmenu en de andere menu's heen, die buiten het bureaublad staan. */
#plx-bureaublad {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  isolation: isolate;
}

.plx-achtergrond { position: absolute; inset: 0; z-index: 0; }
.plx-achtergrond svg { width: 100%; height: 100%; display: block; }

/* Het logo staat vast rechtsonder. Het bronlogo is donkerblauw op transparant en
   valt op een donkere achtergrond volledig weg; vandaar een licht silhouet. */
.plx-merklogo {
  position: absolute; z-index: 1;
  right: 34px; bottom: 30px;
  width: 260px; opacity: .5;
  filter: brightness(0) invert(1) drop-shadow(0 2px 10px rgba(0,0,0,.5));
  user-select: none; pointer-events: none;
}

/* --- icoontjes ---------------------------------------------------------- */

.plx-icoon {
  position: absolute; z-index: 2;
  width: 92px; padding: 8px 4px;
  text-align: center; color: #fff;
  cursor: grab; border-radius: 8px; user-select: none;
  background: transparent; border: 0; font: inherit;
}
.plx-icoon:hover { background: rgba(255,255,255,.12); }
.plx-icoon.sleept { opacity: .75; cursor: grabbing; }
.plx-icoon .glyph {
  width: 52px; height: 52px; margin: 0 auto 6px;
  border-radius: 14px; display: grid; place-items: center;
  font-size: 24px; background: linear-gradient(160deg,#4b6bd6,#2f4bb0);
  box-shadow: 0 6px 16px rgba(0,0,0,.4);
}
.plx-icoon .label { font-size: 12px; text-shadow: 0 1px 4px rgba(0,0,0,.7); }

.plx-kleur-groen  .glyph { background: linear-gradient(160deg,#3fae6b,#268049); }
.plx-kleur-oranje .glyph { background: linear-gradient(160deg,#e08b3c,#b96a1f); }
.plx-kleur-rood   .glyph { background: linear-gradient(160deg,#d9534f,#a8332f); }
.plx-kleur-paars  .glyph { background: linear-gradient(160deg,#8b5cd6,#6a3fb0); }

/* --- projectkaart ------------------------------------------------------- */

.plx-projectkaart {
  position: absolute; z-index: 3;
  right: 18px; top: 18px; width: 300px;
  background: rgba(10,14,28,.62);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  color: #fff; padding: 12px 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.plx-projectkaart .naam { font-size: 16px; font-weight: 600; }
.plx-projectkaart dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin: 10px 0 0; font-size: 12px; }
.plx-projectkaart dt { color: rgba(255,255,255,.55); }
.plx-projectkaart dd { margin: 0; }
.plx-projectkaart .code { font-family: Consolas, monospace; }
.plx-projectkaart button {
  margin-top: 10px; width: 100%;
  background: rgba(255,255,255,.12); border: 0; color: #fff;
  padding: 6px; border-radius: 6px; cursor: pointer; font: inherit; font-size: 12px;
}
.plx-projectkaart button:hover { background: rgba(255,255,255,.22); }

/* --- vensters ----------------------------------------------------------- */

.plx-venster {
  position: absolute;
  min-width: 320px; min-height: 200px;
  background: #fff; border: 1px solid var(--plx-vensterrand); border-radius: 10px;
  box-shadow: 0 18px 48px rgba(0,0,0,.42);
  display: flex; flex-direction: column; overflow: hidden;
}
.plx-venster.actief { box-shadow: 0 22px 62px rgba(0,0,0,.55); }
.plx-venster > header {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; background: #f3f5f9;
  border-bottom: 1px solid var(--plx-vensterrand);
  cursor: grab; user-select: none;
}
.plx-venster > header .titel { font-weight: 600; flex: 1; }
.plx-venster > header button {
  width: 26px; height: 22px; border: 0; border-radius: 5px;
  background: transparent; cursor: pointer; color: var(--plx-grijs); font-size: 13px;
}
.plx-venster > header button:hover { background: #e2e6ee; color: var(--plx-tekst); }
.plx-venster > header button.sluit:hover { background: #d9534f; color: #fff; }
.plx-venster .inhoud { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.plx-greep {
  position: absolute; right: 0; bottom: 0; width: 16px; height: 16px;
  cursor: nwse-resize; background: linear-gradient(135deg, transparent 50%, #c3c9d4 50%);
}

/* --- taakbalk ----------------------------------------------------------- */

#plx-taakbalk {
  height: var(--plx-taakbalk-hoogte);
  flex: 0 0 auto;
  background: var(--plx-taakbalk);
  display: flex; align-items: center; gap: 6px;
  padding: 0 10px; color: #fff;
  border-top: 1px solid rgba(255,255,255,.08);
}
#plx-taakbalk .start {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.10); border: 0; color: #fff;
  padding: 8px 15px; border-radius: 7px; cursor: pointer; font: inherit; font-weight: 600;
}
#plx-taakbalk .start:hover { background: rgba(255,255,255,.20); }
.plx-taakknop {
  background: rgba(255,255,255,.07); border: 0; color: #fff;
  padding: 8px 12px; border-radius: 7px; cursor: pointer; font: inherit;
  max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.plx-taakknop:hover { background: rgba(255,255,255,.16); }
.plx-taakknop.actief { background: rgba(255,255,255,.22); box-shadow: inset 0 -2px 0 var(--plx-accent); }

#plx-taakbalk .rechts { margin-left: auto; display: flex; align-items: center; gap: 14px; }
#plx-taakbalk .gebruiker {
  width: 34px; height: 34px; border-radius: 50%;
  border: 0; cursor: pointer; background: var(--plx-accent); color: #fff;
  font: inherit; font-weight: 600; font-size: 13px;
}
#plx-taakbalk .gebruiker:hover { filter: brightness(1.15); }
#plx-taakbalk .klok { font-size: 13px; opacity: .85; font-variant-numeric: tabular-nums; }

/* --- menu's ------------------------------------------------------------- */

.plx-zwevendmenu {
  position: fixed; z-index: 30;
  background: #fff; border-radius: 12px;
  box-shadow: 0 24px 64px rgba(0,0,0,.5);
  bottom: calc(var(--plx-taakbalk-hoogte) + 10px);
}
.plx-startmenu { left: 10px; width: 500px; }
.plx-startmenu .tabbalk { display: flex; gap: 2px; padding: 10px 12px 0; border-bottom: 1px solid #e6e9f0; }
.plx-startmenu .tabbalk button {
  border: 0; background: transparent; font: inherit; cursor: pointer;
  padding: 8px 12px; border-radius: 7px 7px 0 0;
  color: var(--plx-grijs); border-bottom: 2px solid transparent;
}
.plx-startmenu .tabbalk button:hover { background: #f3f5fb; }
.plx-startmenu .tabbalk button.actief { color: var(--plx-accent); border-bottom-color: var(--plx-accent); font-weight: 600; }
.plx-startmenu .tabbalk button.opslot { opacity: .5; }

.plx-startmenu .paneel { padding: 14px; min-height: 190px; }
.plx-startmenu .raster { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.plx-startmenu .item {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 10px 4px; border-radius: 8px; cursor: pointer; text-align: center;
  font-size: 12px; border: 0; background: transparent; font-family: inherit; color: inherit;
}
.plx-startmenu .item:hover { background: #eef2fb; }
.plx-startmenu .item:disabled { opacity: .4; cursor: default; }
.plx-startmenu .item:disabled:hover { background: transparent; }
.plx-startmenu .item .glyph {
  width: 38px; height: 38px; border-radius: 10px;
  display: grid; place-items: center; font-size: 17px; color: #fff;
  background: linear-gradient(160deg,#4b6bd6,#2f4bb0);
}
/* Met .plx-startmenu ervoor, anders wint de regel hierboven van de kleurregels. */
.plx-startmenu .item.plx-kleur-groen  .glyph { background: linear-gradient(160deg,#3fae6b,#268049); }
.plx-startmenu .item.plx-kleur-oranje .glyph { background: linear-gradient(160deg,#e08b3c,#b96a1f); }
.plx-startmenu .item.plx-kleur-rood   .glyph { background: linear-gradient(160deg,#d9534f,#a8332f); }
.plx-startmenu .item.plx-kleur-paars  .glyph { background: linear-gradient(160deg,#8b5cd6,#6a3fb0); }

.plx-nietafgenomen { text-align: center; color: var(--plx-grijs); padding: 26px 16px; }

/* Het rechtermuisknopmenu van het bureaublad. De plek komt inline uit Bureaublad.razor. */
.plx-contextmenu { bottom: auto; width: 250px; padding: 6px; overflow: auto; }
.plx-contextmenu .kop { padding: 6px 10px 8px; margin-bottom: 4px; border-bottom: 1px solid #e6e9f0; color: var(--plx-grijs); font-size: 12px; font-weight: 600; }
.plx-contextmenu .regel {
  display: flex; align-items: center; gap: 10px; width: 100%;
  border: 0; background: transparent; font: inherit; text-align: left;
  padding: 7px 10px; border-radius: 7px; cursor: pointer; color: inherit;
}
.plx-contextmenu .regel:hover { background: #eef2fb; }
.plx-contextmenu .regel.gevaar:hover { background: #fdecea; color: #c50f1f; }
.plx-contextmenu .regel .glyph {
  flex: none; width: 26px; height: 26px; border-radius: 7px;
  display: grid; place-items: center; font-size: 14px; color: #fff;
  background: linear-gradient(160deg,#4b6bd6,#2f4bb0);
}
.plx-contextmenu .regel.plx-kleur-groen  .glyph { background: linear-gradient(160deg,#3fae6b,#268049); }
.plx-contextmenu .regel.plx-kleur-oranje .glyph { background: linear-gradient(160deg,#e08b3c,#b96a1f); }
.plx-contextmenu .regel.plx-kleur-rood   .glyph { background: linear-gradient(160deg,#d9534f,#a8332f); }
.plx-contextmenu .regel.plx-kleur-paars  .glyph { background: linear-gradient(160deg,#8b5cd6,#6a3fb0); }
.plx-contextmenu .leeg { padding: 8px 10px; color: var(--plx-grijs); font-size: 12px; }

.plx-gebruikermenu { right: 10px; width: 260px; padding: 8px; }
.plx-gebruikermenu .kop {
  display: flex; align-items: center; gap: 10px; padding: 10px;
  border-bottom: 1px solid #e6e9f0; margin-bottom: 6px;
}
.plx-gebruikermenu .kop .avatar {
  width: 38px; height: 38px; border-radius: 50%; background: var(--plx-accent); color: #fff;
  display: grid; place-items: center; font-weight: 600;
}
.plx-gebruikermenu .kop small { color: var(--plx-grijs); }
.plx-gebruikermenu .regel {
  display: flex; align-items: center; gap: 10px; width: 100%;
  border: 0; background: transparent; font: inherit; text-align: left;
  padding: 9px 10px; border-radius: 7px; cursor: pointer; color: inherit;
}
.plx-gebruikermenu .regel:hover { background: #eef2fb; }
.plx-gebruikermenu hr { border: 0; border-top: 1px solid #e6e9f0; margin: 6px 0; }
.plx-themakiezer { padding: 4px 10px 10px; }
.plx-themakiezer .rij { display: flex; gap: 6px; }
.plx-themakiezer .staal { flex: 1; height: 34px; border-radius: 6px; cursor: pointer; border: 2px solid transparent; }
.plx-themakiezer .staal.actief { border-color: var(--plx-accent); }

/* --- projectkiezer ------------------------------------------------------ */

.plx-overlay {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(8,11,22,.72); backdrop-filter: blur(6px);
  display: grid; place-items: center;
}
.plx-kiezer {
  width: min(880px, 92vw); max-height: 82vh;
  background: #fff; border-radius: 14px; overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 30px 80px rgba(0,0,0,.55);
}
.plx-kiezer .kop { padding: 18px 20px 12px; border-bottom: 1px solid #e6e9f0; }
.plx-kiezer h2 { margin: 0 0 4px; font-size: 18px; }
.plx-kiezer .kop p { margin: 0; color: var(--plx-grijs); font-size: 13px; }
.plx-kiezer .zoek { padding: 12px 20px; display: flex; gap: 8px; }
.plx-kiezer .zoek input {
  flex: 1; padding: 9px 12px; border: 1px solid #cbd2de; border-radius: 8px; font: inherit;
}
.plx-kiezer .lijst { overflow: auto; padding: 0 12px 12px; min-height: 120px; }
.plx-projecten { width: 100%; border-collapse: collapse; font-size: 13px; }
.plx-projecten th {
  text-align: left; color: var(--plx-grijs); font-weight: 600; font-size: 12px;
  padding: 8px; position: sticky; top: 0; background: #fff;
}
.plx-projecten td { padding: 9px 8px; border-top: 1px solid #eef0f5; }
.plx-projecten tr.rij { cursor: pointer; }
.plx-projecten tr.rij:hover td { background: #f5f8ff; }
.plx-projecten tr.geselecteerd td { background: #e8f0ff; }
.plx-projecten .code { font-family: Consolas, monospace; font-size: 12px; color: var(--plx-grijs); }
.plx-vlag { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; }
.plx-vlag .stip { width: 8px; height: 8px; border-radius: 50%; background: #3fae6b; }
.plx-vlag.bezet .stip { background: #e08b3c; }
.plx-vlag.mij { color: var(--plx-accent); }
.plx-vlag.mij .stip { background: var(--plx-accent); }
.plx-kiezer .voet { padding: 12px 20px; border-top: 1px solid #e6e9f0; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; }
.plx-kiezer .voet .melding { flex: 1 1 160px; min-width: 0; font-size: 12px; color: var(--plx-grijs); }
.plx-kiezer .voet .acties { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px 18px; margin-left: auto; }
.plx-kiezer .voet .groep { display: flex; align-items: center; gap: 8px; }
.plx-kiezer .voet .groep + .groep { padding-left: 18px; border-left: 1px solid #e6e9f0; }
.plx-kiezer .voet button, .plx-kiezer .voet a.tweede {
  border: 0; padding: 9px 18px; border-radius: 8px; cursor: pointer; font: inherit; white-space: nowrap; flex: 0 0 auto;
}
.plx-kiezer .voet a.tweede { color: inherit; text-decoration: none; display: inline-block; line-height: normal; }
.plx-kiezer .voet a.tweede:hover, .plx-kiezer .voet .tweede:not(:disabled):hover { background: #e2e7f1; }
.plx-kiezer .voet .tweede:disabled { color: #a3abbb; cursor: not-allowed; }
.plx-kiezer .voet .plx-bevestig button { padding: 6px 12px; background: #eef1f7; }
.plx-kiezer .voet .plx-bevestig button.gevaar { background: #fdecea; color: #c50f1f; }
.plx-kiezer .voet .primair { background: var(--plx-accent); color: #fff; }
.plx-kiezer .voet .primair:disabled { background: #c8cfdc; cursor: not-allowed; }
.plx-kiezer .voet .tweede { background: #eef1f7; }
.plx-kiezer .voet .afmelden { margin: 0; }
.plx-kiezer .leeg { text-align: center; color: var(--plx-grijs); padding: 28px 16px; }

/* --- foutbalk van Blazor -------------------------------------------------
   Deze balk hoort verborgen te zijn tot er echt iets misgaat. De opmaak ervoor
   stond alleen in MainLayout.razor.css, en dat is een *scoped* stylesheet: die
   geldt uitsluitend voor het element in die ene layout. Het bureaublad en het
   inlogscherm hebben hun eigen kopie van dat div, kregen dus geen display:none,
   en toonden permanent "Er is iets misgegaan" onder in beeld. */

#blazor-error-ui {
  display: none;
  position: fixed; left: 0; bottom: 0; width: 100%; z-index: 1000;
  color-scheme: light only; color: #1e2433;
  background: lightyellow; padding: 10px 20px 11px;
  box-shadow: 0 -1px 2px rgba(0,0,0,.2);
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 12px; top: 8px; }

/* --- inhoud van modulevensters ------------------------------------------ */

/* Een scherm zonder eigen voetbalk: gewoon een blok met marge dat meescrolt. */
.plx-modulepagina { padding: 14px; overflow: auto; flex: 1; }

/* Een scherm mét voetbalk: tabbalk en knoppenbalk blijven staan, alleen de
   velden ertussen scrollen. Zonder min-height:0 groeit een flexkind mee met zijn
   inhoud in plaats van te scrollen, en dan verdwijnt de opslaanknop onder de rand. */
.plx-modulescherm { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.plx-modulescherm .plx-tabinhoud { flex: 1; overflow: auto; padding: 14px; min-height: 0; }

.plx-modulescherm .plx-tabbalk {
  display: flex; gap: 2px; padding: 0 10px;
  border-bottom: 1px solid var(--plx-vensterrand); background: #f8f9fc;
}
.plx-modulescherm .plx-tabbalk button {
  border: 0; background: transparent; cursor: pointer; font: inherit;
  padding: 9px 14px; color: var(--plx-grijs); border-bottom: 2px solid transparent;
}
.plx-modulescherm .plx-tabbalk button:hover { color: var(--plx-tekst); }
.plx-modulescherm .plx-tabbalk button.actief {
  color: var(--plx-accent); border-bottom-color: var(--plx-accent); font-weight: 600;
}

.plx-voetbalk {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-top: 1px solid var(--plx-vensterrand); background: #f8f9fc;
}
.plx-voetbalk .melding { flex: 1; font-size: 12px; color: #3fae6b; }
.plx-voetbalk .melding.fout { color: #d9534f; }
.plx-voetbalk .primair {
  border: 0; padding: 8px 18px; border-radius: 8px; cursor: pointer; font: inherit;
  background: var(--plx-accent); color: #fff;
}
.plx-voetbalk .primair:disabled { background: #c8cfdc; cursor: not-allowed; }

/* Eén groep bij elkaar horende velden. Geen kader eromheen: in een venster van
   660px breed levert dat alleen maar lijnen op. De legend doet het werk. */
/* min-width: 0, want een fieldset wordt standaard nooit smaller dan zijn inhoud: een breed schema of een brede tabel
   erin gaf het hele tabblad een horizontale schuifbalk in plaats van alleen zijn eigen kader. */
.plx-blok { border: 0; padding: 0; margin: 0 0 22px; min-width: 0; }
.plx-blok legend {
  padding: 0; margin-bottom: 10px; font-weight: 600;
  border-bottom: 1px solid var(--plx-vensterrand); width: 100%; padding-bottom: 6px;
}

.plx-duo { display: flex; gap: 8px; min-width: 0; }
.plx-duo input { min-width: 0; }
.plx-vinkje {
  display: inline-flex; align-items: center; gap: 6px;
  margin-right: 16px; color: var(--plx-tekst);
}

.plx-hint {
  background: #eef4ff; border-left: 3px solid var(--plx-accent);
  padding: 8px 10px; border-radius: 0 6px 6px 0; color: #33456b; margin-bottom: 12px;
}
.plx-veldrij { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 8px; margin-bottom: 8px; align-items: center; }
.plx-veldrij label { color: var(--plx-grijs); }
.plx-veldrij input, .plx-veldrij select {
  width: 100%; padding: 6px 8px; border: 1px solid #cbd2de; border-radius: 6px; font: inherit;
}
.plx-veldrij input:focus, .plx-veldrij select:focus {
  outline: 0; border-color: var(--plx-accent); box-shadow: 0 0 0 3px rgba(47,109,246,.15);
}
.plx-veldrij input[readonly], .plx-veldrij select:disabled { background: #f1f3f7; color: var(--plx-grijs); }
.plx-veldrij label { align-self: start; padding-top: 7px; }
.plx-veldrij input[type="checkbox"] { width: auto; }

/* --- inlogscherm ---------------------------------------------------------
   Zelfde achtergrond als het bureaublad, met een kaart in het midden. Dit stond
   er eerst helemaal niet: het inlogscherm viel terug op kale HTML zonder opmaak. */

.plx-inlogscherm {
  position: relative;
  display: grid;
  place-items: center;
}

.plx-inlogkaart {
  position: relative;
  z-index: 2;
  width: min(400px, 92vw);
  background: #fff;
  border-radius: 14px;
  padding: 30px 32px 26px;
  box-shadow: 0 30px 80px rgba(0,0,0,.55);
}
.plx-inloglogo {
  display: block;
  width: 190px;
  margin: 0 auto 22px;
}
.plx-inlogkaart h1 {
  font-size: 17px;
  margin: 0 0 18px;
  text-align: center;
  color: var(--plx-grijs);
  font-weight: 500;
}
.plx-inlogkaart label { display: block; font-size: 13px; color: var(--plx-grijs); margin-bottom: 4px; }
.plx-inlogkaart .veld { margin-bottom: 14px; }
/* Alle invoervelden, niet op type selecteren: Blazor's InputText zet standaard
   helemaal geen type-attribuut, dus input[type="text"] mist hem en dan staat het
   e-mailveld smal naast een breed wachtwoordveld. */
.plx-inlogkaart input:not([type="hidden"]) {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid #cbd2de;
  border-radius: 8px;
  font: inherit;
}
.plx-inlogkaart input:focus {
  outline: 0;
  border-color: var(--plx-accent);
  box-shadow: 0 0 0 3px rgba(47,109,246,.15);
}
.plx-inlogkaart .knop {
  width: 100%;
  border: 0;
  background: var(--plx-accent);
  color: #fff;
  padding: 11px;
  border-radius: 8px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.plx-inlogkaart .knop:hover { filter: brightness(1.08); }
.plx-inlogkaart .knop.tweede { background: #e08b3c; }
.plx-inlogkaart .melding {
  background: #fdecea;
  border-left: 3px solid #d9534f;
  color: #7a2a26;
  padding: 9px 11px;
  border-radius: 0 6px 6px 0;
  margin-bottom: 14px;
  font-size: 13px;
}
.plx-inlogkaart .waarschuwing {
  background: #fff6e6;
  border-left: 3px solid #e08b3c;
  color: #6b4413;
  padding: 9px 11px;
  border-radius: 0 6px 6px 0;
  margin-bottom: 14px;
  font-size: 13px;
}
.plx-inlogkaart .gelukt {
  background: #eaf6ee;
  border-left: 3px solid #3fae6b;
  color: #1f5c36;
  padding: 9px 11px;
  border-radius: 0 6px 6px 0;
  margin-bottom: 14px;
  font-size: 13px;
}
.plx-inlogkaart .naast { text-align: center; margin: 14px 0 0; font-size: 13px; }
.plx-inlogkaart .naast a { color: var(--plx-accent); }
.plx-inlogkaart .validatie { color: #d9534f; font-size: 12px; }
.plx-inlogkaart p { font-size: 13px; line-height: 1.5; }
.plx-inlogkaart ol { font-size: 13px; padding-left: 18px; }
.plx-inlogkaart .qr { text-align: center; margin: 12px 0; }
.plx-inlogkaart .sleutel, .plx-inlogkaart .herstelcodes {
  font-family: Consolas, monospace;
  text-align: center;
  letter-spacing: 1px;
}
.plx-inlogkaart .herstelcodes {
  background: #f4f6fa;
  border: 1px solid #d8deea;
  border-radius: 8px;
  padding: 10px;
  font-size: 15px;
  line-height: 1.8;
  white-space: pre;
}
.plx-inlogkaart details { margin-top: 18px; font-size: 13px; }
.plx-inlogkaart details summary { cursor: pointer; color: var(--plx-accent); }
.plx-inlogkaart .linkknop { background: none; border: 0; color: var(--plx-accent); font: inherit; font-size: 13px; cursor: pointer; padding: 0; }
.plx-inlogkaart a.knop { display: block; text-align: center; text-decoration: none; color: #fff; }

/* --- gewone pagina's (profiel) -------------------------------------------
   Studio heeft één echte pagina buiten het bureaublad om: /profiel. Die stond
   op een witte pagina zonder opmaak. Zelfde achtergrond, met een kaart erop. */

.plx-pagina { overflow: auto; }
.plx-pagina .plx-inhoud {
  position: relative;
  z-index: 2;
  width: min(900px, 94vw);
  margin: 40px auto;
  background: #fff;
  border-radius: 14px;
  padding: 26px 30px;
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
}
.plx-pagina .plx-terug {
  position: relative; z-index: 2;
  display: block; width: min(900px, 94vw);
  margin: 18px auto -22px;
  color: rgba(255,255,255,.8); font-size: 13px;
}
.plx-pagina .plx-terug:hover { color: #fff; }

/* --- kleine set Bootstrap-namen ------------------------------------------
   Studio laadt géén Bootstrap, en dat blijft zo: dat is de taal van het
   adminpaneel. De pagina's hier zijn alleen ooit met die klassenamen
   geschreven toen Studio nog helemaal geen opmaak had. Dit is precies de set
   die /profiel gebruikt — niet meer, zodat het geen half Bootstrap wordt.
   Schrijf nieuwe schermen liever met plx-klassen. */

.container { width: 100%; }
.row { display: flex; flex-wrap: wrap; margin: 0 -12px; }
.col-md-6 { flex: 1 1 320px; padding: 0 12px; min-width: 0; }

.card {
  border: 1px solid #e2e6ee; border-radius: 10px;
  background: #fff; margin-bottom: 16px; overflow: hidden;
}
.card-header {
  padding: 12px 16px; border-bottom: 1px solid #e2e6ee;
  background: #f7f8fb; font-weight: 600;
}
.card-body { padding: 16px; }

.form-label { display: block; font-size: 13px; color: var(--plx-grijs); margin-bottom: 4px; }
.form-control {
  width: 100%; padding: 8px 11px;
  border: 1px solid #cbd2de; border-radius: 8px; font: inherit;
}
.form-control:focus {
  outline: 0; border-color: var(--plx-accent);
  box-shadow: 0 0 0 3px rgba(47,109,246,.15);
}
.form-control-sm { padding: 5px 9px; font-size: 13px; }

.btn {
  border: 1px solid transparent; border-radius: 8px;
  padding: 8px 15px; font: inherit; cursor: pointer;
  background: #eef1f7; color: var(--plx-tekst);
}
.btn:hover { filter: brightness(.97); }
.btn-primary { background: var(--plx-accent); color: #fff; }
.btn-outline-secondary { background: transparent; border-color: #cbd2de; color: var(--plx-grijs); }
.btn-outline-danger { background: transparent; border-color: #e2a5a3; color: #c0433f; }
.btn-sm { padding: 5px 11px; font-size: 13px; }

.alert { padding: 10px 13px; border-radius: 8px; margin-bottom: 14px; }
.alert-warning { background: #fff6e6; border-left: 3px solid #e08b3c; color: #6b4413; }

.text-danger { color: #d9534f; }
.text-success { color: #268049; }
.text-muted { color: var(--plx-grijs); }
.fw-bold { font-weight: 700; }
.fs-5 { font-size: 1.1rem; }
.small { font-size: 12px; }
.d-block { display: block; }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 4px; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 16px; }
.mb-4 { margin-bottom: 24px; }
.mt-2 { margin-top: 8px; }
.py-4 { padding-top: 24px; padding-bottom: 24px; }

/* --- PvE en andere invulschermen --------------------------------------------------------- */

/* De veldcode achter een label. Staat er alleen als "Veldcodes tonen" aanstaat; hij is bedoeld
   voor support, die bij "het adres staat niet in mijn PvE" moet kunnen vragen welk veld dat is. */
.plx-veldcode {
    margin-left: 6px;
    padding: 0 4px;
    border-radius: 3px;
    background: #2a3346;
    color: #8fa3c4;
    font-family: Consolas, "Courier New", monospace;
    font-size: 11px;
    font-weight: normal;
}


.plx-tabelblok { margin-top: 10px; }
.plx-tabelkop { margin-bottom: 4px; color: var(--plx-grijs); font-size: 12px; font-weight: 600; }

.plx-invultabel { width: 100%; border-collapse: collapse; margin-bottom: 8px; }
.plx-invultabel th {
    padding: 4px 6px;
    border-bottom: 1px solid var(--plx-rand);
    color: var(--plx-grijs);
    font-size: 12px;
    font-weight: 600;
    text-align: left;
}
.plx-invultabel td { padding: 2px 3px; }
.plx-invultabel input { width: 100%; }

/* De eisen die bij de grade van een cameraproject horen (Projectgegevens > Camera). Alleen-lezen: meer lucht dan
   een invultabel, en een lijn tussen de tabellen van bijlage 5. */
.plx-gradeeisen td { padding: 5px 6px; vertical-align: top; border-bottom: 1px solid var(--plx-rand); }
.plx-gradeeisen td:first-child { width: 190px; color: var(--plx-grijs); }
.plx-gradeeisen td:last-child { width: 90px; white-space: nowrap; }

.plx-rijweg {
    width: 26px;
    height: 26px;
    border: 1px solid var(--plx-rand);
    border-radius: 4px;
    background: transparent;
    color: var(--plx-grijs);
    cursor: pointer;
    line-height: 1;
}
.plx-rijweg:hover { color: #d9534f; border-color: #d9534f; }

.plx-rijerbij {
    padding: 4px 10px;
    border: 1px dashed var(--plx-rand);
    border-radius: 4px;
    background: transparent;
    color: var(--plx-grijs);
    cursor: pointer;
    font-size: 12px;
}
.plx-rijerbij:hover { color: var(--plx-tekst); border-color: var(--plx-grijs); }

.plx-matrix td { vertical-align: middle; }
.plx-matrix { width: 100%; }
.plx-matrix .vul { width: 100%; }
.plx-matrix th:first-child, .plx-matrix td:first-child { white-space: nowrap; padding-right: 24px; }

/* Vaste breedtes: de vulkolom knijpt alles wat geen eigen maat heeft samen tot de inhoud, en dan
   wordt een zonenummerveld zo smal dat er niets in past. */
.plx-matrix td.zone input { width: 120px; }

/* De algemene invoerregel (.plx-modulescherm input:not([type=checkbox])) zet width:100% en weegt
   zwaarder dan een losse klasse; vandaar hier het element erbij. */
.plx-matrix td input.plx-matrixtekst { width: 250px; }
.plx-matrix .plx-vinkje { gap: 6px; }
.plx-matrixtekst { max-width: 250px; }

/* --- PvE: de indeling van BMO Studio nagebouwd ------------------------------------------- */

/* Groepen naast elkaar, zoals BMO twee GroupBoxen in een Grid zet. Onder een smal venster
   vallen ze onder elkaar; dat kan een bureaubladvenster nu eenmaal worden. */
.plx-form-kolommen { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; align-items: start; }
@media (max-width: 760px) { .plx-form-kolommen { grid-template-columns: 1fr; } }

/* Het kader om een groep is het enige dat de structuur van dit formulier laat zien: driehonderd
   velden zonder afbakening lezen als één lange lijst. Vandaar een echte rand, een eigen ondergrond
   en een kopje dat op de rand ligt. */
.plx-form-groep {
    margin: 0 0 14px;
    padding: 14px 14px 10px;
    border: 1px solid var(--plx-rand-sterk);
    border-radius: 8px;
    background: #fcfdff;
}
.plx-form-groep > legend {
    margin-left: -4px;
    padding: 2px 8px;
    border: 1px solid var(--plx-rand-sterk);
    border-radius: 6px;
    background: #fff;
    color: #2b5fd0;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .01em;
}

/* Label links in een vaste kolom, invoer erachter -- dat is de maat die BMO aanhoudt. */
.plx-form-rij { display: grid; grid-template-columns: 150px 1fr; gap: 8px; align-items: center; margin-bottom: 5px; }
.plx-form-rij > label { color: var(--plx-grijs); font-size: 12px; }
.plx-form-rij textarea { resize: vertical; }

/* Label boven het veld in plaats van ernaast, zoals de opmerkingvelden van het onderhoudsplan. */
.plx-form-rij.boven { grid-template-columns: 1fr; gap: 3px; }

.plx-form-duo { display: flex; gap: 6px; }
.plx-form-duo input { min-width: 0; }

.plx-form-vinkje { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; font-size: 12px; }
.plx-form-vinkje > label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.plx-form-vinkje.ingesprongen { margin-left: 22px; }
/* Een label dat een hele zin is (in het onderhoudsplan) mag het vinkje ernaast niet platdrukken. */
.plx-form-vinkje > label > input { flex-shrink: 0; }
.plx-form-inlinetekst { max-width: 260px; }

.plx-form-vinkjerij { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin-bottom: 4px; }
.plx-form-vinkjerij .plx-form-vinkje { margin-bottom: 0; }

.plx-form-subkop { margin: 6px 0 4px; font-size: 12px; font-weight: 600; }
.plx-form-vraag { color: var(--plx-grijs); font-size: 12px; }
.plx-form-notitie { margin: 0 0 8px; color: var(--plx-grijs); font-size: 12px; font-style: italic; }

/* Een klein invulraster: rijkoppen links, kolomkoppen erboven, smalle vakjes. Voor plekken waar BMO
   een Grid met koppen heeft, zoals "Ongewenst / Intern" en de accuregels van het onderhoudsplan. */
.plx-form-raster { border-collapse: collapse; margin: 4px 0 6px; font-size: 12px; }
.plx-form-raster th { padding: 3px 10px 3px 0; color: var(--plx-grijs); font-weight: normal; text-align: left; white-space: nowrap; }
.plx-form-raster thead th { color: var(--plx-tekst); font-weight: 600; }
.plx-form-raster th.verder { padding-left: 24px; }
.plx-form-raster td { padding: 3px 10px 3px 0; white-space: nowrap; }

/* --- Bestanden in een project: Tekeningen, Certificaten object, Overige documentatie --------- */

/* De uploadbalk: bestand, gegevens en knoppen op één regel, de voortgangsbalk eronder. De breedtes
   staan met element erbij omdat de algemene invoerregel (width:100%) anders wint. */
.plx-uploadbalk { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.plx-modulescherm .plx-uploadbalk input[type="file"] { flex: 1 1 220px; width: auto; padding: 4px; }
.plx-modulescherm .plx-uploadbalk input.nummer { width: 140px; }
.plx-modulescherm .plx-uploadbalk input.omschrijving { flex: 2 1 180px; width: auto; }
.plx-modulescherm .plx-uploadbalk input[type="date"] { width: 150px; }
.plx-modulescherm .plx-uploadbalk select { width: auto; }

/* Staat in de uploadbalk (BijlageUpload rendert hem naast het bestandsveld) en krijgt een eigen regel. */
.plx-voortgang { flex-basis: 100%; height: 6px; border-radius: 3px; background: var(--plx-rand); overflow: hidden; }
.plx-voortgang > div { height: 100%; background: var(--plx-accent); transition: width .15s; }

.plx-bestandentabel td.midden { text-align: center; }
.plx-bestandentabel td.bestand { font-size: 12px; overflow-wrap: anywhere; }
.plx-bestandentabel .grootte { margin-left: 6px; color: var(--plx-grijs); white-space: nowrap; }
.plx-bestandentabel .extern { color: #c77700; }

/* Het type van een bestand, zoals de pilletjes in BMO: blauw voor een certificaat, oranje voor een
   hulpbestand. */
.plx-badge { display: inline-block; padding: 2px 10px; border-radius: 10px; background: #e3f2fd; color: #006cbf; font-size: 12px; font-weight: 600; }
.plx-badge.hulp { background: #fff3e0; color: #b27c00; }

.plx-filter { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.plx-modulescherm .plx-filter button { padding: 4px 12px; border-radius: 14px; font-size: 12px; }
.plx-modulescherm .plx-filter button.actief { border-color: var(--plx-accent); background: var(--plx-accent); color: #fff; }

/* Ontruimingsplan: rood voor een plattegrond, zoals in BMO; een tekstplan houdt het blauw van .plx-badge. */
.plx-badge.plattegrond { background: #fdecea; color: #c50f1f; }
.plx-modulescherm .plx-uploadbalk input.verdieping { width: 140px; }
.plx-modulescherm .plx-uploadbalk input.revisie { width: 90px; }
.plx-bestandentabel td.plx-volgorde { white-space: nowrap; }
.plx-modulescherm .plx-volgorde button { padding: 2px 7px; font-size: 11px; }

/* Inhoudsopgave: twee blokken met een keuzerondje in de kop, het blok dat niet gekozen is grijs. Een
   uitgeschakelde fieldset schakelt zijn inhoud uit, maar het eerste legend-element niet: daardoor blijft
   het keuzerondje in de kop bruikbaar. */
.plx-keuzeblok > legend label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.plx-keuzeblok[disabled] > :not(legend) { opacity: .5; }
/* Een klasse meer dan de algemene invoerregel verderop in dit bestand: die staat later en zou bij
   gelijke zwaarte winnen. */
.plx-modulescherm .plx-keuzeblok input.plx-inhoud-titel { margin-bottom: 10px; font-size: 16px; font-weight: 600; }
.plx-inhoud-grootte { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 12px; }
.plx-modulescherm .plx-inhoud-grootte input[type="number"] { width: 80px; }

/* Logboek: per onderdeel een regel met getallen en de knoppen om het document te bekijken. */
.plx-logboek-regel { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; }
.plx-modulescherm .plx-logboek-regel input[type="number"] { width: 80px; }
.plx-modulescherm .plx-logboek-regel .plx-knoplink { padding: 4px 12px; }
.plx-logboek-regel .verder { margin-left: 12px; }
.plx-logboek-stations { margin: 0 0 10px; font-size: 12px; color: var(--plx-grijs); }
.plx-vinkje.kop { margin-bottom: 8px; font-weight: 600; }
/* Een knoplink die (nog) niet kan: zelfde plek, maar niet klikbaar. */
.plx-modulescherm .plx-knoplink.uit { opacity: .45; pointer-events: none; }

/* Stuurfunctiematrix: verticale koppen zoals in BMO, en cellen die je aanklikt. De koppen zijn geen
   invoervakken (verticaal typen gaat in een browser niet goed); een klik opent de bewerkbalk. */
.plx-matrixwerkbalk { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 13px; }
.plx-matrixwerkbalk .scheiding { width: 1px; height: 20px; background: var(--plx-rand); margin: 0 4px; }
.plx-matrixwerkbalk .legenda { display: flex; gap: 14px; margin-left: auto; color: var(--plx-grijs); font-size: 12px; }
.plx-matrixbewerk { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; padding: 8px 10px; border: 1px solid var(--plx-accent); border-radius: 7px; background: #f2f6ff; font-size: 13px; }
.plx-modulescherm .plx-matrixbewerk input { width: 240px; }
.plx-modulescherm .plx-matrixbewerk input.uitgang { width: 150px; }
.plx-matrixvlak { overflow: auto; }
.plx-stuurmatrix { border-collapse: collapse; background: #fff; font-size: 13px; }
.plx-stuurmatrix th, .plx-stuurmatrix td { border: 1px solid #333; padding: 0; }
.plx-stuurmatrix .hoek { width: 260px; min-width: 260px; padding: 0 0 10px 10px; vertical-align: bottom; text-align: left; font-weight: normal; font-size: 12px; border-top-color: transparent; border-left-color: transparent; }
.plx-stuurmatrix .hoek b, .plx-matrixwerkbalk .legenda b { display: inline-block; width: 18px; font-size: 15px; }
.plx-stuurmatrix .label { width: 32px; min-width: 32px; background: #f5f5f5; }
.plx-stuurmatrix .kop { width: 34px; min-width: 34px; max-width: 34px; cursor: pointer; font-weight: normal; }
.plx-stuurmatrix .kop:hover { background: #eaf1ff; }
.plx-stuurmatrix .kop.gekozen { background: #dbe8ff; }
.plx-stuurmatrix .grijs, .plx-stuurmatrix .balk th { background: #f5f5f5; }
/* De tekst van onder naar boven, zoals in BMO. writing-mode leest van boven naar beneden, de draai
   keert dat om. */
.plx-stuurmatrix .label span, .plx-stuurmatrix .kop span { display: block; writing-mode: vertical-rl; transform: rotate(180deg); margin: 0 auto; padding: 6px 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.plx-stuurmatrix .label span { font-weight: 700; }
.plx-stuurmatrix tr.sturing th { height: 210px; }
.plx-stuurmatrix tr.sturing .kop span { max-height: 200px; }
.plx-stuurmatrix tr.uitgang th { height: 100px; }
.plx-stuurmatrix tr.uitgang .kop span { max-height: 90px; }
.plx-stuurmatrix tr.balk th { height: 32px; padding-left: 10px; text-align: left; font-size: 14px; }
.plx-stuurmatrix .groep { display: flex; align-items: center; gap: 4px; height: 34px; padding: 0 4px; }
.plx-modulescherm .plx-stuurmatrix .groep input { flex: 1; min-width: 0; border: 0; background: transparent; }
.plx-stuurmatrix .groep .plx-volgorde { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
.plx-stuurmatrix td.cel { width: 34px; height: 34px; }
.plx-modulescherm .plx-stuurmatrix button.plx-sturing { display: block; width: 100%; height: 34px; padding: 0; border: 0; border-radius: 0; background: transparent; font-size: 18px; font-weight: 700; cursor: pointer; }
.plx-modulescherm .plx-stuurmatrix button.plx-sturing:hover { background: #eaf1ff; }

/* Bibliotheek naast het project, met de kopieerpijl ertussen (Bediening, Productcertificaten). */
.plx-bibliotheekvlak { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.3fr); gap: 12px; align-items: start; }
/* Productcertificaten: vier kolommen naast elkaar werden in een venster te smal voor een titel. Daarom
   producten en certificaten boven, de pijl naar beneden, en het project eronder over de hele breedte. */
.plx-bibliotheekvlak.drie { grid-template-columns: 210px minmax(0, 1fr); grid-template-areas: "producten bibliotheek" "overdracht overdracht" "project project"; }
.plx-bibliotheekvlak.drie > :nth-child(1) { grid-area: producten; }
.plx-bibliotheekvlak.drie > :nth-child(2) { grid-area: bibliotheek; }
.plx-bibliotheekvlak.drie > :nth-child(3) { grid-area: overdracht; justify-self: center; }
.plx-bibliotheekvlak.drie > :nth-child(4) { grid-area: project; }
.plx-modulescherm .plx-bibliotheekvlak.drie .plx-overdracht button { transform: rotate(90deg); }
.plx-paneel { min-width: 0; }
.plx-paneelkop { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.plx-paneelkop h3 { margin: 0; font-size: 14px; }
.plx-paneelkop .plx-filter { margin: 0; }
.plx-overdracht { align-self: center; }
.plx-modulescherm .plx-overdracht button { width: 40px; height: 40px; padding: 0; font-size: 24px; line-height: 1; }
.plx-bestandentabel tr.gekozen td { background: #eef4ff; }
.plx-bestandinfo { margin-top: 3px; font-size: 12px; overflow-wrap: anywhere; }
.plx-bestandinfo .grootte { margin-left: 6px; color: var(--plx-grijs); white-space: nowrap; }
.plx-wie { font-size: 12px; color: var(--plx-grijs); }
.plx-herkomst { display: inline-block; margin-top: 3px; padding: 1px 8px; border-radius: 9px; background: #eef7ee; color: #2e7d32; font-size: 11px; }
.plx-badge.verlopen { background: #fdecea; color: #c50f1f; margin-left: 4px; }
.plx-nieuwproduct { display: flex; gap: 6px; margin-bottom: 8px; }
.plx-modulescherm .plx-nieuwproduct input { flex: 1; min-width: 0; width: auto; }
/* Bibliotheeklijsten groeien niet eindeloos mee: de lijst met producten of mappen stopt na vijftien regels
   (een regel is 34,8 px), de tabel ernaast na een vaste hoogte. Daarna komt er een schuifbalk, zodat het
   project eronder in beeld blijft. */
.plx-productlijst { margin: 0; padding: 0; list-style: none; border: 1px solid var(--plx-rand); border-radius: 7px; background: #fff; max-height: calc(15 * 35px); overflow: auto; }
.plx-bibliotheeklijst { max-height: 480px; overflow: auto; }
.plx-bibliotheeklijst thead th { position: sticky; top: 0; z-index: 1; background: #fff; }
.plx-productlijst li { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--plx-rand); cursor: pointer; font-size: 13px; }
.plx-productlijst li:last-child { border-bottom: 0; }
.plx-productlijst li:hover { background: #f2f6ff; }
.plx-productlijst li.actief { background: #dbe8ff; }
.plx-productlijst li.leeg { color: var(--plx-grijs); cursor: default; }
.plx-productlijst .naam { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.plx-productlijst .aantal { padding: 1px 7px; border-radius: 9px; background: #e3f2fd; color: #006cbf; font-size: 11px; font-weight: 700; }
.plx-productacties { margin-top: 8px; }

/* De bevestigvraag in een rij, na de eerste klik op Verwijderen. */
.plx-bevestig { display: inline-flex; align-items: center; gap: 4px; color: #d9534f; font-size: 12px; white-space: nowrap; }
.plx-modulescherm .plx-bevestig button { padding: 2px 8px; font-size: 12px; }
.plx-modulescherm .plx-bevestig button.gevaar { border-color: #d9534f; color: #d9534f; }

/* Een tag die het register niet kent. Hoort op te vallen: zonder melding zou een typefout in de
   layout een invulbaar veld opleveren dat nooit in het document terechtkomt. */
.plx-onbekend { color: #d9534f; font-size: 12px; }

.plx-form-kop { padding: 10px 14px 0; border-bottom: 1px solid var(--plx-rand); }
.plx-form-werkbalk { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.plx-form-werkbalk .scheiding { width: 1px; height: 20px; background: var(--plx-rand); margin: 0 6px; }
.plx-form-koptekst { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.plx-form-koptekst > label { color: var(--plx-grijs); font-size: 12px; }
.plx-form-koptekst > input { flex: 1; min-width: 160px; }

/* --- knoppen en invoervelden in een modulevenster ---------------------------------------- */

/* Een kale <button> is een Windows 95-knop. Eén basisstijl voor alles in een modulevenster, en
   daarna de uitzonderingen die hun eigen vorm houden (tabbladen, de primaire opslaanknop, de kleine
   rijknoppen). Bewust in die volgorde in plaats van een :not()-ketting: die wordt bij elke nieuwe
   uitzondering langer en onleesbaar. */
.plx-modulescherm button {
    padding: 7px 14px;
    border: 1px solid var(--plx-rand-sterk);
    border-radius: 7px;
    background: linear-gradient(#ffffff, #f4f6fb);
    color: var(--plx-tekst);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    transition: background .12s, border-color .12s, box-shadow .12s, color .12s;
}
.plx-modulescherm button:hover {
    border-color: var(--plx-accent);
    background: #f2f6ff;
    color: var(--plx-accent);
}
.plx-modulescherm button:active { background: #e8eeff; }
.plx-modulescherm button:disabled { opacity: .45; cursor: not-allowed; }
.plx-modulescherm button:disabled:hover {
    border-color: var(--plx-rand-sterk);
    background: linear-gradient(#ffffff, #f4f6fb);
    color: var(--plx-tekst);
}

/* De uitzonderingen, ná de basisstijl zodat ze winnen. */
.plx-modulescherm .plx-tabbalk button {
    padding: 9px 14px; border: 0; border-bottom: 2px solid transparent;
    border-radius: 0; background: transparent; font-size: 14px;
}
.plx-modulescherm .plx-tabbalk button:hover { background: transparent; color: var(--plx-tekst); }
.plx-modulescherm .plx-tabbalk button.actief { color: var(--plx-accent); border-bottom-color: var(--plx-accent); }

.plx-modulescherm .plx-rijweg,
.plx-modulescherm .plx-rijerbij { padding: 4px 10px; font-size: 12px; }
.plx-modulescherm .plx-rijweg { width: 28px; padding: 0; }

.plx-modulescherm button.plx-actieknop:not(:disabled) {
    border-color: #b9cdf7;
    background: linear-gradient(#f7faff, #eaf1ff);
    color: #22509f;
    font-weight: 600;
}

.plx-voetbalk .primair {
    box-shadow: 0 1px 2px rgba(47,109,246,.35);
    transition: background .12s, box-shadow .12s;
}
.plx-voetbalk .primair:not(:disabled):hover { background: #2560e0; box-shadow: 0 2px 6px rgba(47,109,246,.4); }
.plx-voetbalk .primair:disabled { box-shadow: none; }

/* Invoervelden erbij: de standaardrand van de browser is grijsblauw en te hard naast bovenstaande. */
/* Keuzerondjes horen hier net zo min in als vinkjes: met width:100% duwt een rondje zijn eigen label
   plat. Bewust als lijst binnen één :not() en niet als twee :not()-en achter elkaar: dat laatste telt
   zwaarder en zou de uitzonderingen verderop (de uploadbalk) overstemmen. */
.plx-modulescherm input:not([type="checkbox"], [type="radio"]),
.plx-modulescherm textarea,
.plx-modulescherm select {
    padding: 6px 8px;
    border: 1px solid var(--plx-veldrand);
    border-radius: 6px;
    background: #fff;
    color: var(--plx-tekst);
    font: inherit;
    font-size: 13px;
    width: 100%;
}
.plx-modulescherm input:not([type="checkbox"], [type="radio"]):focus,
.plx-modulescherm textarea:focus,
.plx-modulescherm select:focus {
    outline: 0;
    border-color: var(--plx-accent);
    box-shadow: 0 0 0 3px rgba(47,109,246,.15);
}
.plx-modulescherm input:read-only { background: #f5f6fa; color: var(--plx-grijs); }
.plx-modulescherm input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--plx-accent); cursor: pointer; }
/* Zelfde maat voor een keuzerondje: anders maakt .plx-invultabel input (width:100%) er in een tabelcel
   een uitgerekt rondje van. */
.plx-modulescherm input[type="radio"] { width: 15px; height: 15px; accent-color: var(--plx-accent); cursor: pointer; }

/* De kopbalk boven de tabbladen hoort visueel bij het venster, niet bij het formulier. */
.plx-form-kop { background: #f8f9fc; }

/* De blauwe koptitel boven een tabblad, zoals "2. Eisen Brandmeldinstallatie" in BMO. */
.plx-form-titel { margin: 0 0 12px; color: #006cbf; font-size: 17px; font-weight: 700; }

/* De koptekstvelden zijn in BMO vaste breedtes, geen volle regel. */
.plx-form-koptekst > input { flex: 0 1 340px; }

/* Een link die eruitziet als een knop; nodig waar een download door een echt endpoint gaat. */
.plx-modulescherm .plx-knoplink {
    display: inline-block;
    padding: 7px 14px;
    border: 1px solid var(--plx-rand-sterk);
    border-radius: 7px;
    background: linear-gradient(#ffffff, #f4f6fb);
    color: var(--plx-tekst);
    font-size: 13px;
    text-decoration: none;
    transition: background .12s, border-color .12s, color .12s;
}
.plx-modulescherm .plx-knoplink:hover { border-color: var(--plx-accent); background: #f2f6ff; color: var(--plx-accent); }

/* Blokschema: gereedschap links, papier in het midden, eigenschappen rechts. */
.plx-bs-keuze { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; margin-right: 14px; }
.plx-modulescherm .plx-bs-keuze input { width: auto; }
.plx-bs-balk { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 6px 12px; border-bottom: 1px solid var(--plx-rand); background: #fafbfd; font-size: 13px; }
.plx-modulescherm .plx-bs-balk select { width: auto; }
.plx-bs-balk .plx-filter { margin: 0; }
.plx-bs-zoom, .plx-bs-paginas { display: inline-flex; align-items: center; gap: 6px; }
.plx-modulescherm .plx-bs-zoom button, .plx-modulescherm .plx-bs-paginas button { min-width: 26px; padding: 2px 6px; }
.plx-bs { flex: 1; min-height: 0; display: grid; grid-template-columns: 158px minmax(0, 1fr) 310px; }
.plx-bs-gereedschap { display: flex; flex-direction: column; gap: 6px; padding: 10px; overflow: auto; border-right: 1px solid var(--plx-rand); background: #f5f6f8; }
.plx-bs-gereedschap h3, .plx-bs-eigenschappen h3 { margin: 0 0 6px; font-size: 13px; }
.plx-modulescherm .plx-bs-gereedschap button { display: flex; align-items: center; gap: 7px; padding: 7px 8px; text-align: left; font-size: 12px; cursor: grab; }
.plx-bs-gereedschap .icoon { width: 18px; text-align: center; }
.plx-bs-gereedschap.uit { opacity: .45; }
.plx-bs-canvas { min-height: 0; overflow: auto; padding: 40px; background: #e0e0e0; outline: none; }
.plx-bs-papier { display: block; margin: 0 auto; box-shadow: 0 0 0 1px #000; user-select: none; touch-action: none; }
.plx-bs-schaal { cursor: nwse-resize; }
.plx-bs-papier [data-greep] { cursor: move; }
.plx-bs-eigenschappen { min-height: 0; overflow: auto; padding: 10px 12px; border-left: 1px solid var(--plx-rand); font-size: 13px; }
.plx-bs-velden { margin: 0; padding: 0; border: 0; min-width: 0; }
.plx-bs-velden > label:not(.plx-vinkje) { display: block; margin: 8px 0 3px; color: var(--plx-grijs); font-size: 12px; }
.plx-bs-velden .plx-vinkje { margin: 8px 0 0; }
.plx-modulescherm .plx-bs-velden textarea { width: 100%; resize: vertical; }
.plx-bs-drie { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.plx-bs-drie label { display: block; margin: 8px 0 3px; color: var(--plx-grijs); font-size: 12px; }
.plx-modulescherm input.plx-bs-kleur { width: 60px; height: 28px; padding: 1px; margin-top: 4px; }
.plx-bs-tabel { width: 100%; border-collapse: collapse; font-size: 12px; }
.plx-bs-tabel td, .plx-bs-tabel th { padding: 2px 3px; vertical-align: middle; }
.plx-bs-tabel th { color: var(--plx-grijs); font-weight: 600; text-align: left; }
.plx-bs-tabel img { width: 18px; height: 18px; display: block; }
.plx-bs-tabel .naam { width: 100%; }
.plx-modulescherm .plx-bs-tabel td.aantal input { width: 52px; }
.plx-bs-tabel tr.omschrijving td { padding-left: 26px; padding-bottom: 5px; }
.plx-modulescherm .plx-bs-tabel.lus select { width: 100%; font-size: 12px; padding: 2px; }
.plx-modulescherm .plx-bs-tabel.lus input:not([type="checkbox"]) { width: 100%; font-size: 12px; padding: 2px 4px; }
.plx-modulescherm .plx-bs-tabel .knoppen { white-space: nowrap; }
.plx-modulescherm .plx-bs-tabel .knoppen button { padding: 0 4px; min-width: 0; font-size: 11px; }
.plx-bs-voorbeeld { display: block; max-width: 100%; max-height: 120px; margin: 4px 0; border: 1px solid var(--plx-rand); }
.plx-bs-upload { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.plx-bs-verwijder { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--plx-rand); }

/* Wat in een foreignObject op het papier staat: letterlijk de maten van de WPF-tekenmethoden. */
.plx-bs-papier foreignObject > div { width: 100%; height: 100%; box-sizing: border-box; overflow: hidden; color: #000; font-family: Arial, sans-serif; line-height: 1.25; }
.plx-bs-papier img { pointer-events: none; }
.plx-bs-tekst { display: flex; align-items: center; white-space: pre-wrap; }
.plx-bs-tekst.midden { justify-content: center; text-align: center; padding: 10px; }
.plx-bs-tekst.links { padding: 2px 10px; }
.plx-bs-centrale { display: flex; flex-direction: column; font-size: 14px; }
.plx-bs-centrale .titel { margin: 10px 8px; font-weight: bold; text-align: center; white-space: pre-wrap; }
.plx-bs-centrale .afbeelding { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; margin: 10px; }
.plx-bs-centrale .afbeelding img { max-width: 100%; object-fit: contain; }
.plx-bs-paneel { display: flex; align-items: center; font-size: 14px; }
.plx-bs-paneel img { margin-right: 8px; flex: none; }
.plx-bs-zone { display: flex; flex-direction: column; padding: 12px; font-size: 14px; }
.plx-bs-zone .kop { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.plx-bs-zone img { width: 20px; height: 20px; flex: none; }
.plx-bs-zone .melders { margin-top: auto; margin-left: 28px; }
.plx-bs-zone .melder { display: flex; align-items: center; margin-bottom: 4px; }
.plx-bs-zone .melder .aantal { width: 28px; flex: none; }
.plx-bs-zone .melder img { margin-right: 8px; }
.plx-bs-legenda .logo { display: block; max-width: calc(100% - 12px); max-height: 70px; margin: 6px 6px 4px; object-fit: contain; }
.plx-bs-legenda .regel { margin: 1px 6px; font-size: 11px; }
.plx-bs-legenda hr { margin: 4px 0 2px; border: 0; border-top: 1px solid #000; }
.plx-bs-legenda .symbool { display: flex; align-items: center; font-size: 10px; }
.plx-bs-legenda .symbool img { width: 15px; height: 15px; margin: 1px 2px 1px 4px; }
.plx-bs-samenvatting { font-size: 16px; white-space: pre-wrap; }

/* Mapvoorbeeld: een kaart per hoofdstuk, rood nummer zoals de brandmodules; grijs als het niet in de map komt. */
.plx-mapdeel { border: 1px solid var(--plx-rand); border-radius: 8px; background: #fff; padding: 10px 12px; margin-bottom: 10px; }
.plx-mapdeel.leeg { background: #fafbfd; }
.plx-mapkop { display: flex; align-items: center; gap: 10px; }
.plx-mapkop .nr { min-width: 28px; height: 28px; padding: 0 6px; border-radius: 6px; background: #c50f1f; color: #fff; font-weight: 700; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; }
.plx-mapdeel.leeg .plx-mapkop .nr { background: #b9bfca; }
.plx-mapkop h3 { margin: 0; font-size: 14px; flex: 1; min-width: 0; }
.plx-koppeling { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0 2px 38px; }
.plx-chip { display: inline-flex; align-items: center; gap: 2px; padding: 2px 4px 2px 10px; border-radius: 12px; background: #e3f2fd; color: #006cbf; font-size: 12px; font-weight: 600; }
.plx-modulescherm .plx-chip button { border: 0; background: transparent; color: inherit; cursor: pointer; font-size: 15px; line-height: 1; padding: 0 5px; }
.plx-modulescherm .plx-koppeling select { width: auto; font-size: 12px; padding: 2px 6px; }
.plx-mapstukken { list-style: none; margin: 6px 0 0 38px; padding: 0; font-size: 13px; }
.plx-mapstukken li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; padding: 3px 0; }
.plx-mapstukken .bron { color: var(--plx-grijs); font-size: 12px; }
.plx-mapstukken li.overgeslagen a, .plx-mapstukken li.overgeslagen .titel { color: var(--plx-grijs); text-decoration: line-through; }
.plx-mapstukken li.leeg { color: var(--plx-grijs); }

/* VRKI-intake (Inbraak): een kopstrook die altijd laat zien welke klasse het is en of de maatregelen voldoen.
   De klassekleuren lopen op met het risico; grijs zolang er nog niets te bepalen valt. */
.plx-vrki-kop { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 10px 14px; border-bottom: 1px solid var(--plx-rand); background: #f8f9fc; }
.plx-vrki-kop .klasse { display: flex; flex-direction: column; align-items: center; min-width: 78px; padding: 4px 10px; border-radius: 8px; background: #b9bfca; color: #fff; }
.plx-vrki-kop .klasse .label { font-size: 10px; letter-spacing: .04em; text-transform: uppercase; }
.plx-vrki-kop .klasse .waarde { font-size: 22px; font-weight: 700; line-height: 1.1; }
.plx-vrki-kop .klasse.k1 { background: #3fae6b; }
.plx-vrki-kop .klasse.k2 { background: #c99700; }
.plx-vrki-kop .klasse.k3 { background: #e0701b; }
.plx-vrki-kop .klasse.k4 { background: #c50f1f; }
.plx-vrki-kop .toelichting { flex: 1 1 260px; min-width: 0; color: var(--plx-grijs); font-size: 12px; }
.plx-vrki-uitslag { padding: 6px 12px; border-radius: 8px; font-size: 13px; font-weight: 600; }
.plx-vrki-uitslag small { display: block; font-size: 11px; font-weight: normal; }
.plx-vrki-uitslag.goed { background: #e7f6ec; color: #1e7a45; }
.plx-vrki-uitslag.fout { background: #fdecea; color: #c50f1f; }
.plx-vrki-uitslag.neutraal { background: #eef1f6; color: var(--plx-grijs); }
.plx-vrki-zoek { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.plx-modulescherm .plx-vrki-zoek input { flex: 1 1 240px; width: auto; }
.plx-modulescherm .plx-vrki-zoek select { width: auto; }
.plx-vrki-resultaten { list-style: none; margin: 0 0 4px; padding: 0; max-height: 280px; overflow: auto; border: 1px solid var(--plx-rand); border-radius: 6px; }
.plx-vrki-resultaten li { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-bottom: 1px solid var(--plx-rand); font-size: 13px; }
.plx-vrki-resultaten li:last-child { border-bottom: 0; }
.plx-vrki-resultaten .naam { flex: 1; min-width: 0; }
.plx-modulescherm .plx-vrki-resultaten button { padding: 2px 10px; font-size: 12px; }
.plx-attr { display: inline-block; min-width: 28px; padding: 1px 7px; border-radius: 10px; font-size: 11px; font-weight: 700; text-align: center; white-space: nowrap; }
.plx-attr.a0 { background: #e7f6ec; color: #1e7a45; }
.plx-attr.a1 { background: #fff6d6; color: #8a6a00; }
.plx-attr.a2 { background: #ffe9d6; color: #b25400; }
.plx-attr.a3 { background: #fdecea; color: #c50f1f; }
.plx-attr.geen { background: #eef1f6; color: var(--plx-grijs); font-weight: 600; }
.plx-vrki-staffels tr.huidig td { background: #eaf1ff; font-weight: 600; }
.plx-vrki-combinaties td { font-size: 12px; vertical-align: top; }
.plx-vrki-combinaties tr.gehaald td { color: #1e7a45; font-weight: 600; }
.plx-vrki-meldingen { margin: 10px 0 0; padding-left: 18px; font-size: 12px; }
.plx-vrki-meldingen li { margin-bottom: 4px; }
.plx-vrki-meldingen.fout li { color: #c50f1f; }
.plx-vrki-meldingen.aandacht li { color: #8a5a00; }

/* --- Beveiligingsplan (Inbraak) ------------------------------------------------------------------ */
.plx-plandeel { border: 1px solid var(--plx-rand); border-radius: 8px; padding: 10px 12px; margin-bottom: 14px; background: #fff; }
.plx-plandeel.uit { opacity: .6; }
.plx-plandeel .kop { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.plx-modulescherm .plx-plandeel .kop input.titel { flex: 1; min-width: 0; font-weight: 600; font-size: 14px; }
.plx-plandeel .kop .plx-vinkje { margin-right: 0; white-space: nowrap; }
.plx-modulescherm .plx-plandeel textarea { width: 100%; resize: vertical; font-family: inherit; line-height: 1.45; }
.plx-plandeel .melding { background: #fff6d6; color: #6b5200; border-radius: 6px; padding: 6px 10px; margin-bottom: 8px; font-size: 12px; }
.plx-plandeel .melding.zacht { background: #f4f6fa; color: var(--plx-grijs); }
.plx-plandeel .melding button { margin-left: 6px; }
.plx-plandeel .voorvoegsel { font-size: 12px; color: var(--plx-grijs); margin-bottom: 6px; font-style: italic; }
.plx-plandeel .acties { display: flex; justify-content: flex-end; margin-top: 4px; }
.plx-plancontrole { list-style: none; margin: 0; padding: 0; }
.plx-plancontrole li { display: flex; gap: 8px; align-items: flex-start; padding: 5px 0; border-bottom: 1px solid var(--plx-rand); font-size: 13px; }
.plx-plancontrole li small { display: block; color: var(--plx-grijs); font-size: 11px; }
.plx-plancontrole .teken { flex: 0 0 20px; height: 20px; border-radius: 10px; text-align: center; line-height: 20px; font-weight: 700; font-size: 12px; }
.plx-plancontrole li.goed .teken { background: #e7f6ec; color: #1e7a45; }
.plx-plancontrole li.open .teken { background: #fdecea; color: #c50f1f; }
.plx-plancontrole li.aanbevolen .teken { background: #eef1f6; color: var(--plx-grijs); }
.plx-planlijst { list-style: none; margin: 8px 0; padding: 0; }
.plx-planlijst li { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.plx-modulescherm .plx-planlijst li input:not([type="checkbox"]) { flex: 1; min-width: 0; }
.plx-planlijst-acties { display: flex; gap: 8px; align-items: center; }
.plx-gevel td { vertical-align: top; }
.plx-modulescherm .plx-gevel textarea { width: 100%; resize: vertical; font-family: inherit; }

/* --- Rapport van oplevering (Inbraak) ------------------------------------------------------------- */
.plx-oplever td { padding: 4px 6px; border-bottom: 1px solid var(--plx-rand); }
.plx-oplever td.tussenkop { font-weight: 600; padding-top: 12px; border-bottom: 0; }
.plx-oplever td.keuzes { white-space: nowrap; text-align: right; width: 290px; }
.plx-modulescherm .plx-oplever .keuzes button { padding: 3px 10px; margin-left: 4px; font-size: 12px; }
.plx-modulescherm .plx-oplever .keuzes button.aan { background: #e3edf9; border-color: #6c8fc7; font-weight: 600; }
.plx-modulescherm .plx-oplever .keuzes button.aan.goed { background: #e7f6ec; border-color: #3fae6b; color: #1e7a45; }
.plx-modulescherm .plx-oplever .keuzes button.aan.fout { background: #fdecea; border-color: #c50f1f; color: #c50f1f; }

/* Het opleverrapport van Brand: onderwerp, eis, drie knoppen en een opmerking per punt. */
.plx-opleverpunten { table-layout: fixed; width: 100%; }
.plx-opleverpunten td { vertical-align: top; }
.plx-opleverpunten td.onderwerp { width: 210px; }
.plx-opleverpunten td.onderwerp .grondslag { display: block; color: var(--plx-grijs); font-size: 11px; margin-top: 2px; }
.plx-opleverpunten td.eis { color: #333; font-size: 12.5px; }
.plx-opleverpunten td.eis .extra { margin-top: 6px; color: var(--plx-grijs); }
.plx-opleverpunten td.keuzes { width: 190px; }
.plx-opleverpunten td.opmerking { width: 220px; }
.plx-opleverpunten tr.nee td { background: #fff7f6; }
.plx-modulescherm .plx-opleverpunten input.verplicht { border-color: #c50f1f; }
.plx-oplever-vast { color: #c50f1f; font-weight: 600; }
.plx-oplevertelling { margin-left: auto; color: var(--plx-grijs); font-size: 12px; white-space: nowrap; }
.plx-afgeleid td:first-child { width: 190px; color: var(--plx-grijs); }
.plx-linkknop { background: none; border: 0; padding: 0 0 0 6px; color: var(--plx-accent); cursor: pointer; text-decoration: underline; font-size: inherit; }
.plx-modulescherm .plx-linkknop { background: none; border: 0; padding: 0 0 0 6px; }

/* --- Downloads (algemeen) ------------------------------------------------------------------------- */
.plx-downloadvlak { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 14px; align-items: start; }
.plx-categorieboom { margin: 0; padding: 0; list-style: none; border: 1px solid var(--plx-rand); border-radius: 7px; background: #fff; max-height: 420px; overflow: auto; }
.plx-categorieboom li { display: flex; align-items: center; gap: 6px; padding: 7px 10px; border-bottom: 1px solid var(--plx-rand); cursor: pointer; font-size: 13px; }
.plx-categorieboom li:last-child { border-bottom: 0; }
.plx-categorieboom li.actief { background: #eaf1ff; font-weight: 600; }
.plx-categorieboom li.leeg { color: var(--plx-grijs); cursor: default; }
.plx-categorieboom .naam { flex: 1; min-width: 0; }
.plx-categorieboom .aantal { color: var(--plx-grijs); font-size: 11px; }
.plx-modulescherm .plx-productacties input.hernoem { width: 140px; }

/* --- Cameraplan (Camera) --------------------------------------------------------------------------
   Links de camera's, elk met een stip voor de rekenhulp (groen haalt de pixeldichtheid, rood niet, grijs
   nog te weinig ingevuld); rechts de kaart van de gekozen camera. Beide kolommen scrollen los van elkaar,
   dus de lijst blijft staan terwijl je door een lange kaart scrolt. */
.plx-modulescherm .plx-tabinhoud.plx-camtab { display: flex; padding: 0; overflow: hidden; }
.plx-camlijst {
  width: 250px; flex: 0 0 250px; display: flex; flex-direction: column; min-height: 0;
  border-right: 1px solid var(--plx-vensterrand); background: #f8f9fc;
}
.plx-camlijst-knoppen { display: flex; gap: 6px; padding: 10px 10px 6px; }
.plx-camlijst-knoppen button { flex: 1; }
.plx-modulescherm .plx-camlijst input.plx-camzoek { margin: 0 10px 8px; width: calc(100% - 20px); }
.plx-camlijst ul { list-style: none; margin: 0; padding: 0 6px 10px; overflow: auto; flex: 1; min-height: 0; }
.plx-camlijst li {
  display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 6px; cursor: pointer;
}
.plx-camlijst li:hover { background: #eef1f7; }
.plx-camlijst li.actief { background: #e3ebff; }
.plx-camlijst li .nummer { font-weight: 600; min-width: 42px; }
.plx-camlijst li .naam { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--plx-grijs); }
.plx-camleeg { padding: 0 12px; color: var(--plx-grijs); }
.plx-stip { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 9px; background: #c4cbd9; }
.plx-stip.goed { background: #3fae6b; }
.plx-stip.fout { background: #d9534f; }
.plx-camdetail { flex: 1; min-width: 0; overflow: auto; padding: 14px 16px; }

.plx-camkop { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.plx-camkop-velden { flex: 1; display: flex; gap: 8px; min-width: 0; }
.plx-modulescherm .plx-camkop input.nummer { width: 90px; flex: 0 0 90px; font-weight: 700; }
.plx-modulescherm .plx-camkop input.naam { flex: 1; font-size: 15px; font-weight: 600; }
.plx-modulescherm .plx-camkop input.fout { border-color: #d9534f; }
.plx-camkop-knoppen { display: flex; gap: 6px; align-items: center; }
.plx-fouttekst { color: #d9534f; margin: -8px 0 12px; }

/* Een getal met zijn eenheid erachter: het invoerveld niet de hele breedte laten pakken. */
.plx-eenheid { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.plx-modulescherm .plx-eenheid input:not([type="checkbox"], [type="radio"]) { width: 110px; }
.plx-modulescherm .plx-eenheid select { width: auto; }
.plx-eenheid span { color: var(--plx-grijs); }

.plx-ontwerp { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 16px; align-items: start; }
.plx-uitkomst {
  position: sticky; top: 0;
  border: 1px solid var(--plx-rand-sterk); border-radius: 10px; padding: 12px 14px; background: #fbfcfe;
}
.plx-uitkomst-titel { font-weight: 600; color: var(--plx-grijs); margin-bottom: 6px; }
.plx-uitkomst-groot { font-size: 28px; font-weight: 700; line-height: 1.1; }
.plx-uitkomst-groot small { font-size: 13px; font-weight: 500; color: var(--plx-grijs); }
.plx-uitkomst-groot.goed { color: #2e8b57; }
.plx-uitkomst-groot.fout { color: #c9302c; }
.plx-uitkomst dl { margin: 10px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; }
.plx-uitkomst dt { color: var(--plx-grijs); }
.plx-uitkomst dd { margin: 0; text-align: right; }
.plx-uitkomst-ontbreekt { color: #b27c00; margin: 10px 0 0; }
.plx-uitkomst-noot { color: var(--plx-grijs); font-size: 11px; margin: 10px 0 0; }
.plx-oordeel { margin-top: 6px; padding: 5px 8px; border-radius: 6px; font-size: 12px; }
.plx-oordeel.goed { background: #e6f5ec; color: #23734a; }
.plx-oordeel.fout { background: #fdecea; color: #b0302b; }
.plx-waarde { padding-top: 7px; }

.plx-zichtvelden { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.plx-zichtvelden figure { margin: 0; width: 180px; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.plx-zichtvelden img { width: 180px; height: 120px; object-fit: cover; border-radius: 6px; border: 1px solid var(--plx-rand); display: block; }

.plx-rechten td.mag { color: #23734a; font-weight: 600; }
.plx-rechten td.magniet { color: var(--plx-grijs); }
.plx-rechten tr.tussenkop td { font-weight: 600; background: #f3f5fa; }
.plx-rechten td:first-child { width: auto; color: var(--plx-tekst); }
.plx-rechten td:not(:first-child), .plx-rechten th:not(:first-child) { width: 44px; text-align: center; }

/* --- PvE Camera --------------------------------------------------------------------------------------- */
.plx-doeltabel td, .plx-doeltabel th { padding: 5px 6px; border-bottom: 1px solid var(--plx-rand); }
.plx-doeltabel td:not(:first-child), .plx-doeltabel th:not(:first-child) { width: 110px; text-align: center; }
.plx-controle tr.ok td:first-child { color: #23734a; }
.plx-controle tr.open td:first-child { color: #b0302b; font-weight: 600; }
.plx-controle td:nth-child(2) { width: 90px; color: var(--plx-grijs); }
.plx-controle td:last-child { width: auto; white-space: normal; color: var(--plx-grijs); }

/* --- Afstemming (Camera) ------------------------------------------------------------------------------ */
.plx-afstemstatus { padding: 10px 12px; border-radius: 8px; margin-bottom: 16px; font-weight: 600; }
.plx-afstemstatus.goed { background: #e6f5ec; color: #23734a; }
.plx-afstemstatus.open { background: #fff4e5; color: #9a5b00; }
.plx-afstemlijst td { white-space: normal; }
.plx-afstemlijst td:first-child { width: 90px; }

/* --- Controleronde (oplevering en onderhoud camera) --------------------------------------------------- */
.plx-camcontrole td, .plx-camcontrole th { padding: 4px 6px; border-bottom: 1px solid var(--plx-rand); }
.plx-camcontrole th:nth-child(n+3):not(:last-child), .plx-camcontrole td:nth-child(n+3):not(:last-child) { width: 76px; text-align: center; }
.plx-modulescherm .plx-camcontrole button.plx-stand { width: 64px; padding: 3px 0; font-size: 12px; font-weight: 600; }
.plx-modulescherm .plx-camcontrole button.plx-stand.open { color: var(--plx-grijs); }
.plx-modulescherm .plx-camcontrole button.plx-stand.goed { background: #e7f6ec; border-color: #3fae6b; color: #1e7a45; }
.plx-modulescherm .plx-camcontrole button.plx-stand.fout { background: #fdecea; border-color: #c50f1f; color: #c50f1f; }
.plx-modulescherm .plx-camcontrole button.plx-stand.nvt { background: #f1f3f7; color: var(--plx-grijs); }

/* --- Transmissie (Camera) ----------------------------------------------------------------------------- */
.plx-netwerk { table-layout: fixed; }
.plx-netwerk td { padding: 3px 4px; }
.plx-transmissie { overflow: auto; max-height: 520px; border: 1px solid var(--plx-rand); border-radius: 8px; background: #fff; padding: 8px; }
.plx-transmissie text { font-family: inherit; fill: #1e2433; }

/* --- Projectietekening (Camera) ----------------------------------------------------------------------- */
.plx-modulescherm .plx-tabinhoud.plx-projectie { display: flex; gap: 14px; }
.plx-projectie-zij { width: 280px; flex: 0 0 280px; overflow: auto; }
.plx-projectie-tekening { flex: 1; min-width: 0; overflow: auto; border: 1px solid var(--plx-rand); border-radius: 8px; background: #fff; }
.plx-projectie-tekening svg { width: 100%; height: auto; display: block; }
.plx-projectie-tekening svg.klikbaar { cursor: crosshair; }
.plx-projectie-lijst { list-style: none; margin: 0 0 8px; padding: 0; max-height: 260px; overflow: auto; }
.plx-projectie-lijst li { display: flex; gap: 8px; padding: 5px 6px; border-radius: 6px; cursor: pointer; align-items: baseline; }
.plx-projectie-lijst li:hover { background: #eef1f7; }
.plx-projectie-lijst li.actief { background: #e3ebff; }
.plx-projectie-lijst .naam { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--plx-grijs); }
.plx-projectie-lijst .status { font-size: 11px; color: #23734a; white-space: nowrap; }
.plx-projectie-acties button { margin: 2px 4px 2px 0; }
.plx-kegel { stroke-width: 1; fill-opacity: .28; }
.plx-kegel.goed { fill: #2e8b57; stroke: #2e8b57; }
.plx-kegel.fout { fill: #c9302c; stroke: #c9302c; }
.plx-kegel.open { fill: #1f75c6; stroke: #1f75c6; }
.plx-cammerk { fill: #fff; stroke: #143c78; stroke-width: 1.5; }
.plx-cammerk.gekozen { stroke: #2f6df6; stroke-width: 3; }
.plx-camlabel { text-anchor: middle; font-weight: 700; fill: #111; pointer-events: none; }
.plx-schaallijn { stroke: #c87800; stroke-width: 2; stroke-dasharray: 6 4; }
.plx-schaalpunt { fill: #c87800; }

/* --- Overdrachtsdossier (Camera) ---------------------------------------------------------------------- */
.plx-dossierlijst { list-style: none; margin: 0; padding: 0; }
.plx-dossierlijst li { padding: 3px 0; color: #23734a; }
.plx-dossierlijst li.niet { color: var(--plx-grijs); }
.plx-dossierlijst .reden { margin-left: 8px; font-size: 12px; color: #9a5b00; }

/* --- Projectie: slepen en het rechtermuisknopmenu (Camera) ----------------------------------------------------- */
.plx-contextachtergrond { position: fixed; inset: 0; z-index: 29; }
.plx-contextmenu .leeg { padding: 6px 10px; color: var(--plx-grijs); }
.plx-projectie-lijst li[draggable="true"] { cursor: grab; }
.plx-camgreep { cursor: grab; }
.plx-camgreep:active { cursor: grabbing; }
.plx-projectie-acties .plx-eenheid { flex-wrap: nowrap; margin-top: 6px; }

/* --- Cameraplan: sensor, lens en lensberekening ---------------------------------------------------------------- */
.plx-subkop { margin: 12px 0 6px; font-weight: 600; color: var(--plx-tekst); border-bottom: 1px solid var(--plx-rand); padding-bottom: 3px; }
.plx-modulescherm button.plx-bereken { padding: 2px 10px; font-size: 12px; }

/* --- Hulp per venster: het vraagteken in de titelbalk en het paneel met uitleg --------------------------------- */
.plx-venster > header button.plx-hulpknop {
  width: 20px; height: 20px; border-radius: 50%; border: 1px solid #b9c3d6; margin-right: 6px;
  background: #fff; color: #2f4bb0; font-weight: 700; font-size: 12px; line-height: 1; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.plx-venster > header button.plx-hulpknop:hover,
.plx-venster > header button.plx-hulpknop.open { background: #2f4bb0; color: #fff; border-color: #2f4bb0; }
.plx-hulppaneel {
  position: absolute; top: 39px; right: 0; bottom: 0; z-index: 5;
  width: min(380px, 90%); background: #fff; border-left: 1px solid var(--plx-vensterrand);
  box-shadow: -10px 0 28px rgba(0,0,0,.18); display: flex; flex-direction: column;
}
.plx-hulppaneel > header {
  display: flex; align-items: center; gap: 8px; padding: 10px 44px 10px 14px;
  background: #eef2fb; border-bottom: 1px solid var(--plx-vensterrand); font-weight: 600;
}
.plx-hulppaneel > header span { flex: 1; }
.plx-hulppaneel > header button { border: 0; background: transparent; cursor: pointer; color: var(--plx-grijs); font-size: 13px; }
.plx-hulptekst { overflow: auto; padding: 4px 16px 16px; line-height: 1.45; }
.plx-hulptekst h4 { margin: 14px 0 4px; font-size: 13px; color: #2f4bb0; }
.plx-hulptekst ul { margin: 0; padding-left: 18px; }
.plx-hulptekst li { margin: 3px 0; }

/* --- Bbl-toets --------------------------------------------------------------------------------------------------
   Links de gebruiksfuncties, rechts de uitkomst die meerekent. Onder de 900px vallen ze onder elkaar. */
.plx-bbl { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 900px) { .plx-bbl { grid-template-columns: minmax(0, 1fr); } }
.plx-bbl-functie {
  border: 1px solid var(--plx-rand); border-radius: 8px; padding: 10px; margin-bottom: 10px;
  display: flex; flex-direction: column; gap: 8px; background: #fff;
}
.plx-bbl-rij { display: flex; gap: 8px; align-items: center; }
.plx-bbl-rij .plx-bbl-naam { flex: 1; min-width: 0; font-weight: 600; }
.plx-bbl-getallen { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.plx-bbl-getallen label, .plx-bbl-toelichting { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--plx-grijs); }
.plx-bbl-toelichting { margin-top: 12px; }
.plx-bbl-uitkomst { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.plx-bbl-samenvatting { border-radius: 8px; padding: 10px 12px; background: #f1f3f7; border-left: 4px solid #aab3c5; }
.plx-bbl-samenvatting.vereist { background: #fff4e5; border-left-color: #e08a1e; }
.plx-bbl-samenvatting ul { margin: 6px 0 0; padding-left: 18px; }
.plx-bbl-kaart { border: 1px solid var(--plx-rand); border-radius: 8px; padding: 8px 10px; background: #fff; }
.plx-bbl-kaart .kop { display: flex; justify-content: space-between; gap: 8px; font-weight: 600; margin-bottom: 6px; }
.plx-bbl-label { font-weight: 400; font-size: 12px; padding: 1px 8px; border-radius: 10px; background: #eef0f4; color: var(--plx-grijs); white-space: nowrap; }
.plx-bbl-label.ja { background: #fde8d0; color: #9a5a0c; }
.plx-bbl-grondslag { width: 100%; border-collapse: collapse; font-size: 12px; }
.plx-bbl-grondslag td { vertical-align: top; padding: 3px 4px; border-top: 1px solid #eef0f4; }
.plx-bbl-grondslag td:first-child { white-space: nowrap; color: var(--plx-accent); font-weight: 600; width: 1%; }
.plx-bbl-punt { font-size: 12px; color: var(--plx-grijs); margin-top: 4px; }
.plx-bbl-punt::before { content: "• "; }
.plx-bbl-info { color: var(--plx-accent); cursor: help; font-size: 12px; }
.plx-bbl-label[title]:not([title=""]) { cursor: help; }
.plx-bbl-oai { margin-top: 6px; padding-top: 6px; border-top: 1px dashed #dfe3ea; font-size: 13px; }
.plx-bbl-oaikeuze { margin: 0; min-width: 0; }
.plx-bbl-stil { margin-top: 8px; font-size: 12px; color: var(--plx-grijs); }
.plx-bbl-stil span { display: block; margin-bottom: 4px; }
.plx-bbl-uitleg { font-size: 12px; color: var(--plx-grijs); background: #f6f8fb; border-radius: 6px; padding: 6px 8px; }
.plx-bbl-stap1 { display: flex; flex-wrap: wrap; gap: 4px 0; }
.plx-kiezer-tabs { display: flex; gap: 2px; padding: 0 20px; border-bottom: 1px solid #e6e9f0; }
.plx-kiezer-tabs button { border: 0; background: transparent; padding: 10px 14px; cursor: pointer; font: inherit; color: var(--plx-grijs); border-bottom: 2px solid transparent; }
.plx-kiezer-tabs button.actief { color: var(--plx-accent); border-bottom-color: var(--plx-accent); font-weight: 600; }
.plx-kiezer .lijst button.tweede { border: 0; padding: 5px 12px; border-radius: 8px; cursor: pointer; font: inherit; background: #eef1f7; }
.plx-kiezer .lijst button.tweede:hover { background: #e2e7f1; }

/* De wizard voor een demoproject, in de projectkiezer. */
.plx-demo { padding: 4px 20px 16px; }
.plx-demo h3 { font-size: 13px; margin: 14px 0 6px; color: var(--plx-grijs); font-weight: 600; }
.plx-demo .klein { font-size: 12px; color: var(--plx-grijs); }
.plx-demo-pakketten { display: flex; flex-direction: column; gap: 4px; }
.plx-demo-pakketten label { display: flex; gap: 8px; align-items: center; }
.plx-demo-soorten { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px; }
.plx-demo-formaten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.plx-demo-soorten button, .plx-demo-formaten button {
    border: 1px solid var(--plx-rand); background: #fff; border-radius: 8px; padding: 8px 10px; cursor: pointer;
    font: inherit; text-align: left;
}
.plx-demo-formaten button { display: flex; flex-direction: column; gap: 2px; }
.plx-demo-formaten button span { font-size: 12px; color: var(--plx-grijs); }
.plx-demo-soorten button:hover, .plx-demo-formaten button:hover { border-color: var(--plx-accent); }
.plx-demo button.gekozen { border-color: var(--plx-accent); background: #eef3fc; box-shadow: inset 0 0 0 1px var(--plx-accent); }
.plx-demo-naam { display: flex; flex-direction: column; gap: 4px; }
.plx-demo-naam input { padding: 8px 10px; border: 1px solid var(--plx-veldrand); border-radius: 8px; font: inherit; }

/* Bibliotheek bij een blok velden: "Uit bibliotheek" / "In bibliotheek" met een uitklappaneel. */
.plx-bibbalk { display: flex; justify-content: flex-end; align-items: center; gap: 6px; flex-wrap: wrap; margin: -2px 0 8px; }
.plx-bibkiezer { position: relative; display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.plx-modulescherm .plx-bibkiezer .plx-bibknop,
.plx-modulescherm .plx-bibbalk .plx-bibknop { padding: 3px 10px; font-size: 12px; white-space: nowrap; }
.plx-modulescherm .plx-bibbalk .plx-bevestig { font-size: 12px; }
.plx-modulescherm .plx-bibbalk .plx-bevestig button { padding: 3px 10px; font-size: 12px; }
.plx-bibkiezer .melding { font-size: 12px; color: var(--plx-grijs); }
.plx-bibpaneel {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; width: 400px; max-width: 80vw;
  background: #fff; border: 1px solid var(--plx-rand-sterk, #cfd5e0); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .16); padding: 8px; font-size: 13px;
}
.plx-bibpaneel .kop { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.plx-bibpaneel .kop input:not([type="checkbox"]) { flex: 1; min-width: 0; }
.plx-bibpaneel .kop .plx-vinkje { white-space: nowrap; font-size: 12px; }
.plx-modulescherm .plx-bibpaneel .kop .sluit { margin-left: auto; padding: 0 8px; font-size: 16px; line-height: 22px; }
.plx-bibpaneel ul { list-style: none; margin: 0; padding: 0; max-height: 280px; overflow: auto; }
.plx-bibpaneel li { padding: 6px 8px; border-radius: 6px; cursor: pointer; }
.plx-bibpaneel li:hover { background: #eef3fe; }
.plx-bibpaneel li.gekoppeld { box-shadow: inset 3px 0 0 var(--plx-accent); }
.plx-bibpaneel li span { display: block; color: var(--plx-grijs); font-size: 12px; }
.plx-bibpaneel .leeg { color: var(--plx-grijs); margin: 6px 4px; }
.plx-bibpaneel .fout { color: #c50f1f; margin: 6px 4px; }
.plx-bibpaneel .knoppen { display: flex; gap: 8px; margin-top: 8px; }
.plx-bibpaneel p { margin: 4px 4px; }

/* Open invulplekken in het beveiligingsplan: een gele rand, zodat je ze ziet zonder te zoeken. */
.plx-plandeel.invulplekken { border-left: 4px solid #e8b400; }
.plx-modulescherm .plx-tabbalk button .plx-telling { display: inline-block; min-width: 18px; margin-left: 6px; padding: 0 5px; border-radius: 9px; background: #fff3c4; color: #6b5200; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }