/* -----------------------------------------------------------
   Modern Bow-Tie Tool Stylesheet
   ----------------------------------------------------------- */

/* 1. Font */
@import url("https://rsms.me/inter/inter.css");

/* 2. Colour palette & global tokens */
:root{
  --bg-100:#ffffff;          /* card / box background  */
  --bg-200:#f5f6f8;          /* textarea / input bg    */
  --bg-300:#e9ebee;          /* canvas grid lines      */

  --border:#d0d4dc;
  --text-900:#111;
  --text-700:#444;

  --accent:#ff0000;          /* brand red */
  --accent-dark:#cc0000;     /* hover/active red */
}

/* -----------------------------------------------------------
   3. Canvas & Frame
   ----------------------------------------------------------- */
html,body{
  margin:0; padding:0;
  overflow:hidden; height:100%;
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--text-900);
}

#container{
  width:100vw; height:100vh;
  overflow:hidden; position:relative;
  cursor:grab;
}

/* Canvas size will be set by JS (fitCanvas); only scale here */
#canvas{
  position:absolute; top:0; left:0;
  transform:scale(1);                      /* starting zoom out */
  transform-origin: 0.0;
  /* background-color:orange; */
  /* background: */
    /* linear-gradient(to right,  var(--bg-300) 1px, transparent 1px), */
    /* linear-gradient(to bottom, var(--bg-300) 1px, transparent 1px), */
    /* var(--bg-100); */
  /* background-size:50px 50px; */
}

svg{
  position:absolute; top:0; left:0;
  width:100%; height:100%;
  pointer-events:none;
}

#container,
#canvas,
svg {
  user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}
svg line,
svg path{
  vector-effect: non-scaling-stroke;   /* ⬅ do NOT scale stroke width */
  shape-rendering: crispEdges;         /* hint to the rasteriser      */
}

/* -----------------------------------------------------------
   4. Node & Barrier Boxes
   ----------------------------------------------------------- */

.box,
.barrier-container{
  background:var(--bg-100);
  border:1px solid var(--border);
  box-shadow:0 2px 6px rgba(0,0,0,.07);
  border-radius:10px;
  width:320px;
  min-width:320px;
  max-width:320px;
}

/* node */
.box{
  width:320px;
  min-width:320px;
  max-width:320px;
  padding:14px 16px;
  box-sizing:border-box;
  display:flex; flex-direction:column; align-items:center;
  user-select:none;
    max-width:320px;      /* <— cap the width */
	position:absolute;

}
.box textarea{
  width:100%; margin-bottom:8px;
  resize:none; text-align:center;
}
.box select{
  width:100%; margin-bottom:8px; text-align:center;
}

/* barrier */
.barrier-container{
  min-width:240px;
  padding:12px 14px;
  box-sizing:border-box;
  display:flex; flex-direction:column; align-items:center;
  font-family:inherit;
  position:absolute;
}
.barrier-container input,
.barrier-container textarea,
.barrier-container select{
  width:100%; margin-bottom:6px;
}

/* barrier title */
.barrier-title{
  font-weight:600; margin-bottom:6px;
  color:var(--text-900);
}

/* centre Delete under barrier */
.barrier-container .remove-button{
  bottom:-25px; left:50%; transform:translateX(-50%);
}


/* -----------------------------------------------------------
   5. Buttons
   ----------------------------------------------------------- */

button,
.add-control-button,
.remove-button{
  font-size:.9rem;
  font-weight:500;
  padding:6px 14px;
  border:none;
  border-radius:8px;
  color:#fff; background:var(--accent);
  cursor:pointer;
  box-shadow:0 1px 3px rgba(0,0,0,.12);
  transition:background .15s,transform .1s;

}
button:hover{background:var(--accent-dark);}
button:active{transform:translateY(1px);}

/* secondary actions */
.remove-button{background:#e45050;}
.remove-button:hover{background:#d33f3f;}

.add-control-button{background:#6c7788;}
.add-control-button:hover{background:#596374;}

.action-buttons{display:flex; gap:8px; margin-top:8px;}

.remove-button, .add-control-button{
  position:absolute; user-select:none;
}

/* -----------------------------------------------------------
   6. Inputs & Selects
   ----------------------------------------------------------- */

textarea,
select,
input:not([type=number]){
  background:var(--bg-200);
  border:1px solid var(--border);
  border-radius:6px;
  padding:6px 8px;
  font-family:inherit;
  font-size:.9rem;
  transition:border .15s;
}
textarea:focus,
select:focus,
input:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 2px rgba(45,127,249,.25);
}

/* smaller numeric inputs inside risk matrix keep width via style attr */

/* -----------------------------------------------------------
   7. Top toolbar, zoom buttons
   ----------------------------------------------------------- */

#zoom-controls,
#file-controls{
  position:absolute; top:10px;
  display:flex; gap:8px; z-index:21;
}
#zoom-controls{left:10px;}
#file-controls{right:10px;}

#file-controls button,
#zoom-controls button{
 color:#fff; background:var(--accent);
  border-radius:6px; padding:5px 12px;
}
#file-controls button:hover,
#zoom-controls button:hover{
  background:#596374;
}

/* -----------------------------------------------------------
   8. Minimap
   ----------------------------------------------------------- */

#minimap-container{
  position:absolute; top:10px; left:120px;
  z-index:30;
  width:180px; height:120px;
  background:rgba(255,255,255,.9);
  border:1px solid var(--border);
  border-radius:8px;
  box-shadow:0 2px 8px rgba(0,0,0,.08);
  display:flex; align-items:center; justify-content:center;
}
#minimap{width:170px; height:110px;
         background:var(--bg-200); border-radius:6px;}

/* -----------------------------------------------------------
   9. Footer
   ----------------------------------------------------------- */

#footer{
  position:fixed; left:0; bottom:0;
  width:100vw; text-align:center;
  padding:10px 0;
  background:black;
  border-top:1px solid var(--border);
  font-size:.85rem;
  color:white;
  z-index:100;
}

/* -----------------------------------------------------------
   10. Config Popup & Matrix
   ----------------------------------------------------------- */

#config-popup textarea{
  width:100%; min-height:60px;
  margin-bottom:10px;
  background:var(--bg-200);
  border:1px solid var(--border);
  border-radius:6px;
  padding:6px 8px;
}

#matrix-table{
  border-collapse:collapse; width:100%; margin-top:6px;
}
#matrix-table th,#matrix-table td{
  border:1px solid var(--border);
  text-align:center; padding:4px;
}
#matrix-table input.cell-num{
  width:60px; text-align:center; margin-bottom:4px;
}
#matrix-table .header-input{width:110px;}
#matrix-table select.colour-select{width:80px;}