/* General Page Styling */
body { 
    font-family: Arial, sans-serif;
    background-color: #f8f9fa;
}

/* Navbar */
.navbar-brand {
    font-weight: bold;
}

/* Container */
.content-container {
    max-width: 900px;
    margin: 30px auto;
    padding: 20px;
    background: white;
    border-radius: 8px;
    box-shadow: 0px 4px 8px rgba(0,0,0,0.1);
}

/* ✅ Left-align all table content */
.table-left {
    text-align: left;
    vertical-align: top;
}

/* ✅ Ensure text inside .wrap-text wraps correctly */
.wrap-text {
    white-space: normal;
    word-wrap: break-word;
    max-width: 500px; /* Adjust as needed */
}



/* Footer */
footer {
    background-color: #343a40;
    color: white;
    text-align: center;
    padding: 10px 0;
    margin-top: 20px;
}

/* Buttons */
.btn-danger, .btn-success {
    padding: 8px 20px;
    border-radius: 5px;
}
.maatregel-row {
    display: flex;
    align-items: center;
    gap: 10px; /* Space between checkbox and text field */
    margin-bottom: 5px;
}

.maatregel-row input[type="checkbox"] {
    width: 20px;
    height: 20px;
}

.maatregel-row input[type="text"] {
    flex-grow: 1; /* Allow remarks field to expand */
    min-width: 250px; /* Prevent it from being too small */
}
.control-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 5px;
}

.control-row input[type="checkbox"] {
    width: 20px;
    height: 20px;
}

body {
    font-family: Arial, sans-serif;
    text-align: center;
    background-color: #f4f4f4;
}

.container_nodes {
    position: relative;
    width: 1100px;
    height: 500px;
    margin: 50px auto;
    border: 1px solid #ccc;
    background: white;
}

.node {
    position: absolute;
    width: 90px;
    height: 90px;
    background-color: lightblue;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
    border: 2px solid #000;
}

.node:hover {
    background-color: deepskyblue;
}

.highlight {
    background-color: orange !important;
}

.line {
    position: absolute;
    height: 2px;
    background-color: gray;
    transform: rotate(0deg);
}

/* ✅ Highlight matching VSE/VSP records */
.highlight-row {
    background-color: rgb(255, 208, 0); /* ✅ Change background to yellow */
    font-weight: bold; /* ✅ Optional: Make highlighted text bold */
}
.highlighted-maatregel {
    background-color: #2bd453;  /* light green */
    font-weight: bold;
}

.error {
    color: red;
}

/* Angled Lines with Rotation */
#line1 { top: 245px; left: 135px; width: 65px; transform: rotate(0deg); } /* Sensors -> Fieldbus */
#line2 { top: 225px; left: 120px; width: 180px; transform: rotate(30deg); } /* Sensors -> IoT */
#line3 { top: 160px; left: 375px; width: 100px; transform: rotate(20deg); } /* PLC -> Firewall */
#line4 { top: 310px; left: 375px; width: 100px; transform: rotate(-20deg); } /* IoT -> Firewall */
#line5 { top: 180px; left: 460px; width: 100px; transform: rotate(10deg); } /* PLC -> Local */
#line6 { top: 275px; left: 460px; width: 100px; transform: rotate(-10deg); } /* Local -> IoT */
#line7 { top: 90px; left: 710px; width: 100px; transform: rotate(-15deg); } /* Firewall -> Internet */
#line8 { top: 180px; left: 710px; width: 100px; transform: rotate(0deg); } /* Firewall -> LTE */
#line9 { top: 260px; left: 710px; width: 100px; transform: rotate(10deg); } /* Firewall -> LoRa */
#line10 { top: 350px; left: 710px; width: 100px; transform: rotate(20deg); } /* Firewall -> WAN */
#line11 { top: 275px; left: 880px; width: 100px; transform: rotate(30deg); } /* LoRa -> Remote */
#line12 { top: 375px; left: 880px; width: 100px; transform: rotate(40deg); } /* WAN -> Remote */
#line13 { top: 250px; left: 880px; width: 100px; transform: rotate(20deg); } /* LoRa -> SaaS */
#line14 { top: 170px; left: 880px; width: 100px; transform: rotate(10deg); } /* LTE -> SaaS */
#line15 { top: 80px; left: 880px; width: 100px; transform: rotate(-10deg); } /* Internet -> SaaS */

/* === Maatregel Modal === */
#maatregelModal {
    display: none;
    position: fixed;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    padding: 20px;
    border: 1px solid #ccc;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    max-width: 600px;
}

#modalBackdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
}

.maatregel-list {
    margin: 0;
    padding: 0;
}

#tab-buttons {
  text-align: center;
  margin-bottom: 1rem;
}

#tab-buttons button {
  padding: 0.5rem 1rem;
  margin: 0 0.5rem;
  border: none;
  background: #ccc;
  cursor: pointer;
  border-radius: 5px;
}

#tab-buttons button.active {
  background: #3498db;
  color: #fff;
}

#tab-content {
  display: flex;
  justify-content: center;
}

.cy-graph {
  width: 100%;
  max-width: 1200px;
  height: 80vh;
  background: #fff;
  border: 1px solid #ccc;
  position: relative;
}


html, body {
  margin: 0;
  padding: 0;
  width: 100vw;
  overflow-x: hidden;
}

#tooltip {
  display: none;
  position: absolute;
  max-width: 300px;
  padding: 5px 10px;
  background: #333;
  color: white;
  font-size: 14px;
  border-radius: 5px;
  z-index: 9999;
  pointer-events: none; /* ensures it doesn't block interactions */
  box-shadow: 0 0 8px rgba(0,0,0,0.3);
}

@media print {
  .no-print {
    display: none !important;
  }
}