body{font-family:Arial,Helvetica,sans-serif;margin:0;background:#fff;color:#111}
header{padding:14px 16px;border-bottom:1px solid #ddd}
h1{margin:0 0 10px 0;font-size:22px}
.toolbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.toolbar label{font-size:13px}
.toolbar input,.toolbar select{margin-left:6px;padding:6px 8px}
.chk{margin-left:10px;user-select:none}
.adminActions{display:flex;gap:8px;margin-left:8px}
.toolBtn{padding:6px 10px;border-radius:10px;border:1px solid #333;background:#fff;cursor:pointer}
.toolBtn:hover{background:#f4f4f4}
.legend{margin-top:10px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.pill{display:inline-block;padding:4px 8px;border-radius:999px;font-size:12px}
.note{font-size:12px;opacity:.8}
.status{padding:10px 16px;font-size:13px;opacity:.85}
.tableWrap{padding:0 16px 16px 16px;overflow:auto}
#matrixTable{border-collapse:collapse;table-layout:fixed}
#matrixTable th,#matrixTable td{border:1px solid #ddd}
#matrixTable th{position:sticky;top:0;background:#f7f7f7;z-index:2;vertical-align:top;padding:6px}
#matrixTable td{padding:0}
#matrixTable td.cell{height:28px}
.sticky{position:sticky;left:0;background:#fff;z-index:3}

/* column width */
#matrixTable th,#matrixTable td.cell{min-width:70px;max-width:70px;width:70px;text-align:center}
#matrixTable th.sticky,#matrixTable td.sticky{min-width:260px;max-width:260px;width:260px;text-align:left;padding:6px}

/* header text */
.hNum{font-weight:700;font-size:12px}
.hTitle{
  font-size:11px;line-height:1.15;margin-top:4px;
  display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;
  overflow:hidden;
}
.thRow{display:flex;align-items:flex-start;justify-content:space-between;gap:6px}
.thText{min-width:0}
.thBtns{display:flex;gap:4px;flex:0 0 auto}
.iconMini{
  border:1px solid #999;background:#fff;border-radius:8px;
  padding:2px 6px;cursor:pointer;font-size:12px;line-height:1;
}
.iconMini:hover{background:#efefef}

/* role cell */
.roleWrap{display:flex;align-items:center;justify-content:space-between;gap:8px}
.roleBtns{display:flex;gap:4px}

/* cell text */
.v{font-size:12px;font-weight:700}

/* ===== Overlay/Modal common ===== */
.overlay.hidden{display:none}
.overlay{position:fixed;inset:0;background:rgba(0,0,0,0.25);display:flex;align-items:center;justify-content:center;z-index:9999}
.card{background:#fff;border-radius:12px;width:460px;max-width:calc(100vw - 40px);box-shadow:0 10px 30px rgba(0,0,0,0.25);padding:14px}
.cardHeader{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.cardTitle{font-weight:700}
.iconBtn{border:none;background:transparent;font-size:18px;cursor:pointer}
.row{margin-top:10px}
.lbl{display:block;font-size:12px;opacity:.85;margin-bottom:6px}
.select{width:100%;padding:8px}
.input{width:100%;padding:8px;border:1px solid #ccc;border-radius:10px}
.hint{font-size:12px;opacity:.75;margin-top:6px}
.smallStatus{margin-left:10px;font-size:12px;opacity:.8}

/* Color buttons */
.colorRow{display:flex;gap:8px;flex-wrap:wrap}
.colorBtn{border:1px solid #aaa;padding:6px 10px;border-radius:10px;cursor:pointer}
.colorBtn.active{outline:2px solid #333}

/* Buttons */
.primaryBtn{padding:8px 12px;border-radius:10px;border:1px solid #222;background:#222;color:#fff;cursor:pointer}
.btn{padding:8px 12px;border-radius:10px;border:1px solid #999;background:#fff;cursor:pointer}
.btn:hover{background:#f4f4f4}
.modalActions{display:flex;gap:10px;align-items:center;justify-content:flex-end}

/* Modal form */
.formGrid{display:grid;grid-template-columns:1fr;gap:10px}
.formField label{display:block;font-size:12px;opacity:.85;margin-bottom:6px}
.formError{color:#b00020;font-size:12px;margin-top:6px}


/* Hazard userform */
.hazardCard{width:1100px;max-width:calc(100vw - 40px)}
.hazBanner{
  background:#00ff00; /* bright green like the original */
  border:1px solid #2d7a2d;
  padding:14px 16px;
  font-weight:800;
  font-size:34px;
  text-align:center;
  margin:8px 0 12px 0;
}
.hazTableWrap{overflow:auto;border:1px solid #cfcfcf;border-radius:10px;-webkit-overflow-scrolling:touch}
.hazTable{width:100%;border-collapse:collapse;table-layout:fixed}
.hazTable th,.hazTable td{border:1px solid #cfcfcf;padding:10px;vertical-align:top;overflow-wrap:anywhere;word-break:break-word}
.hazTable th{background:#b8ffb8;font-size:12px}
.hazCell{background:#d9ffd9;font-size:12px;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word}
.hazButtons{display:flex;gap:10px;flex-wrap:wrap;justify-content:space-between;margin-top:10px}
.hazButtons .bigBtn{
  flex:1 1 180px;
  border-radius:8px;
  border:1px solid #9a9a9a;
  background:#e6e6e6;
  padding:10px;
  cursor:pointer;
  font-weight:700;
}
.hazButtons .bigBtn:hover{background:#dcdcdc}

/* Hazard form edit controls */
.hazTopActions{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:flex-end;
  margin:6px 0 8px 0;
}
.hazEditHint{margin-left:auto}
.hazCellEdit{
  width:100%;
  min-height:160px;
  resize:vertical;
  border:1px solid #bdbdbd;
  border-radius:6px;
  padding:8px;
  font-size:12px;
  background:#ffffff;
}
.hazLinkGrid{
  display:grid;
  grid-template-columns: 1fr 2fr;
  gap:8px 10px;
  margin-top:8px;
}
.hazLinkGrid input{
  width:100%;
  border:1px solid #bdbdbd;
  border-radius:6px;
  padding:8px;
  font-size:12px;
}


#adminActions[hidden]{ display:none !important; }

#matrixTable th.printCol, #matrixTable td.printCol{width:18px;min-width:18px;max-width:18px;text-align:center;padding:4px;}

.printIcon{cursor:pointer;font-size:13px;}


/* v10: make print column narrower */
#matrixTable th.printCol, #matrixTable td.printCol{
  width:18px !important;
  min-width:18px !important;
  max-width:18px !important;
  padding:4px !important;
}
.printIcon{ font-size:13px; }


/* v11: version + field legend */
.versionBox{
  margin:6px 0 6px 0;
  font-size:12px;
  opacity:.9;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.versionEdit{
  margin:0 0 10px 0;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  font-size:12px;
}
.versionEdit input{
  padding:4px 6px;
  border:1px solid #ccc;
  border-radius:10px;
  width:120px;
}
.fieldLegend{
  margin:6px 0 12px 0;
  font-size:11px;
  opacity:.85;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
.printIcon{ cursor:pointer !important; pointer-events:auto; }

/* v11: overlay (no popup blockers) */
.overlay{
  position:fixed; inset:0;
  background:rgba(0,0,0,.35);
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:20px;
  z-index:9999;
  /* Wichtig: Dialoge können höher als der Viewport werden (lange Texte).
     Dann muss das Overlay scrollbar sein, sonst sind die unteren Zeilen/Buttons nicht erreichbar. */
  overflow:auto;
}
.overlay .card{
  background:#fff;
  border-radius:14px;
  padding:14px;
  box-shadow:0 8px 28px rgba(0,0,0,.25);
  width:1000px;
  max-width:calc(100vw - 40px);
  /* prevent dialog from spilling out of the viewport */
  max-height:calc(100vh - 40px);
}

/* Hazard-Userform: als „echtes“ Dialogfenster behandeln (innen scrollen statt aus dem Bild zu laufen) */
.overlay .card.hazardCard{
  display:flex;
  flex-direction:column;
}
.overlay .card.hazardCard .hazTableWrap{
  /* table area should use the remaining space and be scrollable */
  flex:1 1 auto;
  min-height:160px;
}
.overlay .card.hazardCard .hazButtons{
  /* keep buttons visible */
  flex:0 0 auto;
}
.overlay .card.hazardCard .row{
  flex:0 0 auto;
}

/* Edit-Textfelder in der Hazard-Form sollen nicht den ganzen Dialog sprengen */
.hazCellEdit{
  max-height:35vh;
  overflow:auto;
}
.overlay .cardHeader{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:8px;
}
.overlay .cardTitle{ font-weight:700; }
.iconBtn{
  border:1px solid #ddd;
  background:#fff;
  border-radius:10px;
  padding:4px 8px;
  cursor:pointer;
}


.titleRow{display:flex; align-items:flex-start; gap:12px}
.titleRow h1{margin:0}
.freigabeTopBox{margin-left:auto; display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.freigabeView{display:flex; gap:8px; flex-wrap:wrap; font-size:12px; opacity:.95}
.freigabeView .kv{display:inline-flex; gap:6px; align-items:baseline; padding:2px 6px; border:1px solid #ddd; border-radius:10px; background:#fafafa}
.miniLegend{margin-left:10px; font-size:11px; opacity:.85; white-space:nowrap}

/* ===== Fix: Hazard-Userfenster (Spaltenüberschrift) darf nicht "unten abschneiden" =====
   - macht das Dialogfenster innerhalb des Viewports nutzbar
   - hält Aktionen (Speichern/Abbrechen) sichtbar
*/
#hazardForm .hazardCard{
  display:flex;
  flex-direction:column;
  /* Platz für Overlay-Padding (20px oben/unten) berücksichtigen */
  max-height:calc(100vh - 40px);
}

/* Der grüne Banner und die Header sollen ihre Größe behalten */
#hazardForm .hazBanner{ flex:0 0 auto; }
#hazardForm .cardHeader{ flex:0 0 auto; }
#hazardForm .hazTopActions{ flex:0 0 auto; }

/* Der Tabellenbereich bekommt den verfügbaren Platz und wird scrollbar */
#hazardForm .hazTableWrap{
  flex:1 1 auto;
  overflow:auto;
}

/* Im Bearbeitungsmodus: Textfelder nicht unendlich wachsen lassen,
   sondern im Feld scrollen (damit untere Zeilen erreichbar bleiben). */
#hazardForm .hazCellEdit{
  max-height:40vh;
  overflow:auto;
}

/* Buttons/Status unten sichtbar halten */
#hazardForm .hazButtons, #hazardForm .row{ flex:0 0 auto; }

/* Mobile: Tabelle im Hazard-Userfenster horizontal scrollbar machen.
   Ohne Mindestbreite werden die Spalten zu schmal und Text „überläuft“ in Nachbarspalten. */
@media (max-width: 700px){
  #hazardForm .hazTable{
    min-width: 980px;   /* genug Platz für alle Spalten */
    width: 980px;
  }
}