/* TLSSecurityPoC 0.5 — beheerconsole Windows Server. Licht/donker; Staff Support-tokens; geen externe verzoeken. */
:root { --zee: #01474E; --accent: #01D39A; --bg: #F4F7F7; --kaart: #fff; --tekst: #12282B; --zacht: #557072; --lijn: #D6E1E1;
  --ok: #078C55; --ok-bg: #E3F7EE; --let: #B42318; --let-bg: #FDECEA; --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
@media (prefers-color-scheme: dark) { :root { --bg: #0A1719; --kaart: #10242A; --tekst: #E4EEEE; --zacht: #9AB2B4; --lijn: #22403F; --ok: #4ADE9F; --ok-bg: #0F3329; --let: #FF8A7A; --let-bg: #3A1A17; } }
* { box-sizing: border-box; } html, body { margin: 0; }
body { background: var(--bg); color: var(--tekst); font: 15px/1.5 var(--font); }
a { color: inherit; }
.kop { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; padding: 10px 20px; background: var(--zee); color: #fff; }
.merk { display: flex; align-items: center; gap: 8px; font-weight: 800; text-decoration: none; white-space: nowrap; }
.merk em { font-style: normal; font-weight: 400; opacity: .8; }
.stip { width: 11px; height: 11px; border-radius: 50%; background: var(--accent); }
.nav { display: flex; gap: 2px; overflow-x: auto; flex: 1; scrollbar-width: none; }
.nav a { padding: 7px 11px; border-radius: 8px; text-decoration: none; white-space: nowrap; opacity: .85; }
.nav a.aan { background: rgba(1,211,154,.2); box-shadow: inset 0 -3px 0 var(--accent); opacity: 1; font-weight: 700; }
.ik { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.ik span { display: grid; text-align: right; font-size: 13px; } .ik small { opacity: .75; }
.ik form { margin: 0; }
.inhoud { max-width: 1180px; margin: 0 auto; padding: 22px 20px 48px; }
h1 { font-size: 1.6rem; margin: 6px 0 14px; } h1::after { content: ""; display: block; width: 3rem; height: 4px; border-radius: 2px; background: var(--accent); margin-top: 8px; }
h2 { font-size: 1.05rem; margin: 18px 0 8px; } .kaart h2 { margin-top: 0; }
.zacht { color: var(--zacht); }
.kaart { background: var(--kaart); border: 1px solid var(--lijn); border-radius: 8px; padding: 16px; margin-bottom: 16px; }
.raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.waarden { display: grid; grid-template-columns: minmax(120px, 40%) 1fr; gap: 4px 12px; margin: 0; }
.waarden dt { color: var(--zacht); } .waarden dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.waarden dd.ok { color: var(--ok); } .waarden dd.let { color: var(--let); }
.knoppen { display: flex; flex-wrap: wrap; gap: 8px; }
.knop { font: inherit; font-weight: 600; background: var(--zee); color: #fff; border: 1px solid var(--zee); border-radius: 8px; padding: 8px 14px; cursor: pointer; text-decoration: none; display: inline-block; }
.knop:disabled { opacity: .5; cursor: wait; }
.knop.licht { background: transparent; color: inherit; border-color: var(--lijn); }
.kop .knop.licht { color: #fff; border-color: rgba(255,255,255,.4); padding: 5px 10px; font-size: 13px; }
.knop.gevaar { background: var(--let); border-color: var(--let); color: #fff; }
.knop.klein { padding: 4px 9px; font-size: 13px; }
.form { display: grid; gap: 10px; max-width: 420px; }
.form label { display: grid; gap: 4px; font-weight: 600; } .form label small { font-weight: 400; color: var(--zacht); }
.form input { font: inherit; padding: 8px 10px; border: 1px solid var(--lijn); border-radius: 8px; background: var(--kaart); color: var(--tekst); }
.form input:focus { outline: 2px solid var(--accent); }
.form .knop { justify-self: start; }
.kaal { max-width: 440px; margin: 30px auto; background: var(--kaart); border: 1px solid var(--lijn); border-radius: 8px; padding: 24px; }
.fout { background: var(--let-bg); color: var(--let); border-radius: 8px; padding: 8px 12px; }
.ok { background: var(--ok-bg); color: var(--ok); border-radius: 8px; padding: 8px 12px; }
.qr { width: 216px; height: 216px; padding: 8px; margin: 10px auto; background: #fff; border-radius: 8px; }
.geheim { text-align: center; } .geheim code { word-break: break-all; }
.scroll { overflow-x: auto; background: var(--kaart); border: 1px solid var(--lijn); border-radius: 8px; margin-bottom: 16px; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--lijn); vertical-align: top; }
th { color: var(--zacht); font-weight: 600; white-space: nowrap; }
td small { display: block; color: var(--zacht); }
td.acties { white-space: nowrap; } form.inline { display: inline; margin: 0 4px 4px 0; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.chip { border: 1px solid var(--lijn); border-radius: 14px; padding: 4px 12px; text-decoration: none; }
.chip.aan { border-color: var(--accent); background: var(--ok-bg); font-weight: 700; }
.links { margin: 0; padding-left: 1.2em; }
@media (max-width: 640px) { .kop { padding: 10px 16px; } .inhoud { padding: 16px 16px 40px; } .nav { order: 3; flex-basis: 100%; } td.acties { white-space: normal; } }
/* 0.6 gegevens & Excel */
.form select { font: inherit; padding: 8px 10px; border: 1px solid var(--lijn); border-radius: 8px; background: var(--kaart); color: var(--tekst); }
.ok-tekst { color: var(--ok); font-weight: 600; } .let-tekst { color: var(--let); font-weight: 600; }
/* 0.6.2: menu werd met "Bureaublad" te breed naast merk + naam (Logboek viel weg) → onder 1360px menu op een eigen regel */
@media (max-width: 1360px) { .nav { order: 3; flex-basis: 100%; } }
/* 0.7: SQL-venster */
.sqlraster { display: grid; grid-template-columns: minmax(200px, 270px) minmax(0, 1fr); gap: 14px; align-items: start; }
.sqlboom { max-height: 75vh; overflow: auto; font-size: 13px; }
.sqlboom summary { cursor: pointer; padding: 2px 0; overflow-wrap: anywhere; } .sqlboom summary small { opacity: .65; }
.sqlboom ul { list-style: none; margin: 2px 0 6px 14px; padding: 0; } .sqlboom li { overflow-wrap: anywhere; } .sqlboom li small { opacity: .65; }
.sqlboom li.pk { font-weight: 700; }
.sqlform textarea { font: 13px/1.45 ui-monospace, Menlo, Consolas, monospace; width: 100%; min-height: 180px; }
.sqlform .knoppen { display: flex; flex-wrap: wrap; gap: 8px; }
.sqltabel td, .sqltabel th { font: 12px ui-monospace, Menlo, Consolas, monospace; white-space: nowrap; max-width: 420px; overflow: hidden; text-overflow: ellipsis; }
.sqltabel td.null { opacity: .45; font-style: italic; }
.sqlhist { list-style: none; padding: 0; margin: 6px 0 0; } .sqlhist li { margin: 0 0 6px; } .sqlhist code { display: block; opacity: .75; overflow-wrap: anywhere; }
@media (max-width: 860px) { .sqlraster { grid-template-columns: 1fr; } .sqlboom { max-height: 40vh; } }
.sqlform { max-width: none; }
.sqlform textarea { padding: 10px 12px; border: 1px solid var(--lijn); border-radius: 8px; background: var(--kaart); color: var(--tekst); resize: vertical; }
.sqlform textarea:focus { outline: 2px solid var(--accent); }
.sqlform select { max-width: 320px; }