/* UTP Omnummering — eenvoudige patchpanelen-view */
:root{
  --bg:#0e1116; --bg2:#161b22; --bg3:#1f2630; --line:#2b3340;
  --text:#e6edf3; --muted:#8b949e; --primary:#2f81f7; --primary-hi:#4493f8;
  --ok:#22c55e; --warn:#f59e0b; --err:#f85149;
  --filled-bg:#1a0f10; --filled-border:#3a1d20;
  --newcable-bg:#2a1d05; --newcable-border:#a16207; --newcable-text:#fbbf24;
}
body.light{
  --bg:#f6f8fa; --bg2:#ffffff; --bg3:#eef1f4; --line:#d0d7de;
  --text:#1f2328; --muted:#656d76; --primary:#0969da; --primary-hi:#0860c8;
  --ok:#1a7f37; --warn:#9a6700; --err:#cf222e;
  --filled-bg:#fff1f1; --filled-border:#f5b0b0;
  --newcable-bg:#fff8e1; --newcable-border:#d4a017; --newcable-text:#9a6700;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:14px}
h2{font-size:1.3rem;margin:.4em 0}
h3{font-size:1.05rem;color:var(--muted);margin:.4em 0}
button,input,select{font:inherit;color:var(--text)}
input,select{background:var(--bg2);border:1px solid var(--line);
  border-radius:6px;padding:.6em .8em;min-width:0;width:100%}
input:focus{outline:2px solid var(--primary);border-color:var(--primary)}
button{background:var(--bg3);border:1px solid var(--line);border-radius:6px;
  padding:.55em .9em;cursor:pointer;color:var(--text)}
button:hover{filter:brightness(1.1)}
button.primary{background:var(--primary);border-color:var(--primary);color:#fff}
button.primary:hover{background:var(--primary-hi)}
button.ghost{background:transparent}
button.small{padding:.3em .6em;font-size:.85em}
button.big{padding:.8em 1.2em;font-size:1em}
.muted{color:var(--muted)}
.small-note{font-size:.85em}
.row{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.sep{color:var(--muted)}
.ok{color:var(--ok);font-weight:600}
.err-msg{color:var(--err);min-height:1.2em;margin:.4em 0 0}

/* Status bar */
#statusBar{display:flex;justify-content:space-between;align-items:center;
  background:var(--bg2);padding:.6rem 1rem;border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:50;flex-wrap:wrap;gap:.5rem}
.sb-left,.sb-right{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.conn-dot{width:10px;height:10px;border-radius:50%;display:inline-block;background:var(--err)}
.conn-dot.on{background:var(--ok);box-shadow:0 0 6px var(--ok)}

/* Warnings */
.warnings{padding:0 1rem}
.warnings .w{background:rgba(34,197,94,.15);border:1px solid var(--ok);color:var(--ok);
  padding:.5em .8em;border-radius:6px;margin:.4em 0}
.warnings .w.warn{background:rgba(248,81,73,.12);border-color:var(--err);color:var(--err)}

/* Tabs */
nav#tabs{display:flex;gap:.2rem;padding:.4rem 1rem;background:var(--bg2);
  border-bottom:1px solid var(--line);position:sticky;top:46px;z-index:40}
nav#tabs button{background:transparent;border:none;padding:.7em 1em;
  border-bottom:3px solid transparent;border-radius:0;color:var(--muted)}
nav#tabs button.active{color:var(--text);border-bottom-color:var(--primary)}

main{padding:1rem;max-width:1400px;margin:0 auto}
.tab{display:none}
.tab.active{display:block}

/* Patchpanelen */
.paneel{background:var(--bg2);border:1px solid var(--line);border-radius:8px;
  padding:.8rem 1rem;margin-bottom:1rem}
.paneel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:.35rem}
.poort{background:var(--bg3);border:1px solid var(--line);border-radius:5px;
  padding:.5em .25em;text-align:center;cursor:pointer;user-select:none;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:54px;transition:transform .05s,border-color .15s}
.poort:hover{border-color:var(--primary);transform:scale(1.04)}
.poort .num{font-size:.85em;color:var(--muted)}
.poort .num.old{color:var(--err);font-weight:700;font-size:.95em}
.poort .num.newc{color:var(--newcable-text);font-weight:700;font-size:.95em}
.poort .nieuw{font-size:.95em;color:var(--ok);font-weight:700;margin-top:2px;line-height:1.1}
.poort .nieuw.newc{color:var(--newcable-text)}
.poort.filled{background:var(--filled-bg);border-color:var(--filled-border)}
.poort.newcable{background:var(--newcable-bg);border-color:var(--newcable-border)}

/* Modals */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;
  align-items:center;justify-content:center;z-index:100;padding:1rem}
.modal.show{display:flex}
.modal-box{background:var(--bg2);border:1px solid var(--line);border-radius:10px;
  padding:1.2rem;width:100%;max-width:420px;display:flex;flex-direction:column;gap:.7rem}
.modal-box.wide-list{max-width:680px;max-height:90vh}
.modal-box label{display:flex;flex-direction:column;gap:.3em}
.user-buttons{display:flex;gap:.5rem;flex-wrap:wrap}
.form-actions{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.4rem}
#listText{background:var(--bg3);border:1px solid var(--line);border-radius:6px;
  padding:.8em 1em;overflow:auto;max-height:60vh;white-space:pre;
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.92em;margin:0}

/* Log table */
.tbl-wrap{overflow:auto;border:1px solid var(--line);border-radius:6px}
table{width:100%;border-collapse:collapse}
th,td{padding:.5em .7em;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{background:var(--bg3);position:sticky;top:0;font-weight:600}
tbody tr:hover{background:var(--bg3)}

/* Kastlijst */
.kast-paneel{background:var(--bg2);border:1px solid var(--line);border-radius:8px;
  padding:.8rem 1rem;margin-bottom:1.2rem}
.kast-grid{display:grid;grid-template-columns:1fr 1fr;gap:.6rem .8rem}
.kast-sec{background:var(--bg3);border:1px solid var(--line);border-radius:6px;padding:.5em}
.kast-sec-head{font-weight:700;text-align:center;padding-bottom:.4em;
  border-bottom:1px solid var(--line);margin-bottom:.4em;font-size:.95em;letter-spacing:.5px}
.kast-row{display:grid;grid-template-columns:32px 1fr 1fr;gap:.4em;padding:.18em .3em;
  border-radius:3px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.9em;align-items:baseline}
.kast-row .kp{color:var(--muted);text-align:right}
.kast-row .ko{font-weight:600}
.kast-row .kn{color:var(--ok);font-weight:700}
.kast-row.empty .ko{color:var(--muted);font-weight:400}
.kast-row.filled{background:rgba(248,81,73,.08)}
.kast-row.filled .ko{color:var(--err)}
.kast-row.newcable{background:rgba(245,158,11,.10)}
.kast-row.newcable .ko{color:var(--newcable-text)}
.kast-row.newcable .kn{color:var(--newcable-text)}

@media print {
  #statusBar, .warnings, nav#tabs, .no-print { display:none !important; }
  .tab { display: none !important; }
  #tab-kast.active { display: block !important; }
  body { background: white; color: black; font-size: 11px; }
  .kast-paneel { page-break-inside: avoid; border-color:#888; background:white; margin-bottom:.6rem }
  .kast-sec { background:white; border-color:#aaa }
  .kast-row.filled, .kast-row.newcable { background:white }
}

/* Mobiel: meer kolommen onder elkaar, nooit horizontaal scrollen */
@media (max-width:600px){
  main{padding:.5rem}
  .paneel{padding:.6rem .5rem}
  .paneel-grid{grid-template-columns:repeat(auto-fill,minmax(58px,1fr));gap:.25rem}
  .poort{min-height:50px;padding:.4em .15em}
  .poort .num{font-size:.8em}
  .poort .nieuw{font-size:.85em}
  nav#tabs{top:54px}
  #statusBar{padding:.4rem .6rem;font-size:.9em}
}
@media (max-width:380px){
  .paneel-grid{grid-template-columns:repeat(4,1fr)}
}