/* Base styles, applies to all elements */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* width/height includes content, padding, borders */
  font-family: monospace, monospace;
}

/* Base styling for html and body elements */
body,
html {
  height: 100%;
  width: 100%;
  background-color: white;
  overflow: hidden;
}

/* Overall container (holds factors container, dropzone, and info panel) */
.container {
  display: flex;
  flex-direction: row; /* Items (factors container, dropzone, info panel) stacked horizontally */
  height: 100%;
}

/* FACTORS SIDEBAR */

/* Factors Container (holds "Factors" title, Designed Features container, Behavioral Health container) */
.categories {
  display: flex;
  flex-direction: column; /* Items ("Factors" title, Designed Features container, Behavioral Health container) stacked vertically */
  width: 20vw;
  padding: 1.2%;
  gap: 3%;
  background-color: #bcd8e5;
  border: 1px solid #318da9;
  margin: 1%;
  border-radius: 5px;
}

/* "Factors" Title */
.categories-title {
  font-size: 25px;
  font-weight: bold;
  text-transform: uppercase;
  color: #ffffff;
  background-color: #318da9;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6),
    inset 1px 1px 1px rgba(255, 255, 255, 0.8);
  padding: 5px;
  text-align: center;
  border-radius: 5px;
  letter-spacing: 1px;
}

/* Base styles for box (Designed Features, Behavioral Health) holding factors in factor container */
.box {
  border-radius: 5px;
  padding: 10px;
  overflow-y: auto;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  height: 42.5%;
}

/* "Designed Features" box holding factors coloring */
.box1 {
  background-color: #94ecff;
  border-top: 3px solid #56b4e9;
}

/* "Behavioral Health" box holding factors coloring */
.box2 {
  background-color: #ffd54d;
  border-top: 3px solid #e69f00;
}

/* Header for individual factor box ("Designed Features" / "Behavioral Health") */
.section_header {
  font-size: 14px;
  background-color: white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  color: #464646;
  padding: 6px 12px;
  text-transform: uppercase;
  font-weight: bold;
  text-align: center;
  border-radius: 5px;
  margin-bottom: 1px;
  letter-spacing: 0.5px;
}

/* Container holding factors themselves (positioned below section_header) */
.factors-container {
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  align-items: center;
}

/* Base factor styling */
.factor {
  padding: 5px 10px;
  border-radius: 4px;
  cursor: grab;
  position: absolute;
  font-size: 12px;
  color: white;
  margin: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  text-align: center;
  z-index: 10;
  transition: all 0.2s ease;

  /* Limit width of factor and have overflow extend factor vertically */
  max-width: 180px;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Base factor styling displayed in connection modal to prevent drag on factors */
/* Holds exact same styling as .factor, but is not clickable nor draggable */
.factor-clone {
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
  position: absolute;
  font-size: 12px;
  color: white;
  margin: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  z-index: 10;
  transition: all 0.2s ease;

  /* Limit width of factor and have overflow extend factor vertically */
  max-width: 180px;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* When dragging a factor, change cursor to grabbing */
.factor:active {
  cursor: grabbing;
}

/* Specific styling for factors in sidebar factors container */
.categories .factor {
  position: static;
  margin: 2px;
}

/* Dragging state of factor */
.factor.dragging {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
  z-index: 10000; /* Above everything */
  transition: none; /* Smooth dragging */
  position: relative;
}

/* FACTORS COLORING - class applied based on category */
/* Specifies base coloring, coloring when hovered over, and coloring when clicked */

/* "Designed Features" Factors Coloring */
.blue {
  background-color: #56b4e9;
  border: 1px solid #3a9bd1;
}

.blue:hover {
  background-color: #7fc9f0;
  transform: translateX(1px);
}

.factor.blue.selected {
  background-color: #3a9bd1;
  border-left: 3px solid #1e82b8;
}

/* "Behavioral Health" Factors Coloring */
.yellow {
  background-color: #e69f00;
  border: 1px solid #cc8f00;
}

.yellow:hover {
  background-color: #f0b133;
  transform: translateX(1px);
}

.yellow.selected {
  background-color: #cc8f00;
  border-left: 3px solid #a67500;
}

/* Custom Factors (Custom/No Category) Coloring */
.gray {
  background-color: #8d8d8d;
  border: 1px solid #505050;
}

.gray:hover {
  background-color: #a5a5a5;
  transform: translateX(1px);
}

.factor.gray.selected {
  background-color: #696969;
  border-left: 3px solid #565656;
}

/* Custom Factor ("Designed Features" category) Coloring */
.gray-df {
  background-color: #8d8d8d;
  border: 1.5px solid #3a9bd1;
}

.gray-df:hover {
  background-color: #a5a5a5;
  transform: translateX(1px);
}

.gray-df.selected {
  background-color: #696969;
  border-left: 4px solid #1e82b8;
}

/* Custom Factor ("Behavioral Health" category) coloring */
.gray-bh {
  background-color: #8d8d8d;
  border: 1.5px solid #cc8f00;
}

.gray-bh:hover {
  background-color: #a5a5a5;
  transform: translateX(1px);
}

.gray-bh.selected {
  background-color: #696969;
  border-left: 4px solid #a67500;
}

/* CONNECTION ARROW STYLES */

/* Connection line itself */
.connection-line {
  stroke: white;
  stroke-width: 1.5;
  transition: all 0.2s ease;
}

/* When we hover over the arrow, these changes to connection-line (white glow) */
.connection-group:hover .connection-line {
  filter: drop-shadow(0 0 2px #ffffff);
}

/* When we select the arrow, these changes to connection-line (white glow, thicker line) */
.connection-group.selected .connection-line {
  stroke-width: 2.5;
  filter: drop-shadow(0 0 2px #ffffff);
}

/* Transparent area on connection arrow for easier clicking by user to select connection */
.connection-hit-area {
  stroke: transparent;
  stroke-width: 15;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* INFO PANEL (holds factor/connection information when factor/connection selected) */

/* Info panel container (holds title, description, citation, category, edit/delete buttons) */
.info-panel {
  display: flex;
  flex-direction: column; /* Stack items vertically */
  position: relative;
  font-size: 12px;
  width: 20vw;
  background-color: rgb(234, 248, 244);
  border: 1px solid #31a989;
  border-radius: 5px;
  margin: 1%;
  padding: 1.2%;
  padding-bottom: 0;
  overflow-y: auto;
  overflow-x: hidden; /* Prevent horizontal scrolling */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);

  /* Overflow */
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Info panel content */
.info-content {
  flex: 1 1 auto;
}

/* Title of the info panel (factor or connection name)*/
.info-panel h3 {
  margin-bottom: 18px;
  padding: 0 10px 10px 10px;
  border-bottom: 2px solid #31a989; /* Underline */
  text-align: center;
  text-transform: uppercase;
  font-size: 14px;
}

/* Gray Color for factor details that are citations */
.quotation {
  color: rgb(169, 169, 169);
}

/* Basic styling of factor category within info panel */
.factor-category {
  display: inline-block;
  margin: 15px 0;
  padding: 6px 12px;
  border-radius: 12px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: white;
  max-width: 100%;
  box-sizing: border-box;
}

/* Designed Features category tag coloring */
.factor-category.category-df {
  background-color: #318da9;
  border: 1px solid #2a7a92;
}

/* Behavioral Health category tag coloring */
.factor-category.category-bh {
  background-color: #cc8f00;
  border: 1px solid #b37e00;
}

/* Default/No category tag coloring */
.factor-category.category-default {
  background-color: #8d8d8d;
  border: 1px solid #505050;
}

/* Container holding "Edit" and "Delete" buttons in info panel */
.info-actions {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgb(234, 248, 244);
  display: flex;
  justify-content: center;
  gap: 15px;
  z-index: 2;
  margin-top: 5px;
  margin-bottom: 0;
  padding: 15px;
}

/* Base styles for "Edit" and "Delete" buttons in info panel */
.info-actions button {
  padding: 4px 10px;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  font-size: 14px;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
  transition: all 0.2s;
}

/* "Edit" button in info panel coloring */
.info-actions .edit {
  background-color: #f0f0f0;
  color: #3f3f3f;
}

/* When "Edit" button is hovered, these changes are applied */
.info-actions .edit:hover {
  background-color: #e4e4e4;
  transform: scale(1.04);
}

/* "Delete" button in info panel coloring */
.info-actions .delete {
  background-color: #ffebee;
  color: #c62828;
}

/* When "Delete" button is hovered, these changes are applied */
.info-actions .delete:hover {
  background-color: #ffcdd2;
  transform: scale(1.04);
}

/* "Add Factor" AND "Create Connection" MODAL (popup) STYLES */

/* Styling applied to background when "Add Factor" or "Create Connection" modal opened */
.modal {
  display: none; /* Hidden initially */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(2px);
  z-index: 9999;
  justify-content: center;
  align-items: center;
}

/* Modal content itself (container for inputs) */
.modal-content {
  background-color: #fefefe;
  padding: 2%;
  border-radius: 8px;
  width: 450px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  position: relative;
}

/* Title of modal ("Add Factor", "Edit Factor", "Create Connection", or "Edit Connection") */
.modal-title {
  color: #318da9;
  font-weight: bold;
  font-size: 18px;
  text-align: center;
  margin-bottom: 15px;
  text-transform: uppercase;
}

/* Text + Textbox Container (e.g. "Factor Name" and input box to enter factor name) */
.form-group {
  margin-bottom: 12px;
  font-size: 14px;
}

/* Textbox Text (e.g. "Factor Name") */
.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
}

/* Textbox (to input custom factor/connection details) */
.form-group input[type="text"],
.form-group textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

/* Larger Textbox (applied to input boxes expecting longer inputs - e.g., factor definition) */
.form-group textarea {
  resize: none;
  height: 65px;
}

/* Category Multi-Choice Select within "Add Factor" Modal */

/* Container holding all multi-choice options */
.radio-group {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 0;
}

/* Container holding a single option (contains radio button and name of category) */
.radio-option {
  display: flex;
  align-items: center;
  position: relative;
  padding-left: 24px;
  margin: 0;
  cursor: pointer;
  font-size: 13px;
  user-select: none;
  height: 15px;
}

/* Radio Button (multi-choice button option for categories). Is hidden and custom styling is instead used. */
.radio-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Custom styling for unchecked radio button */
.radio-checkmark {
  position: absolute;
  left: 0;
  height: 16px;
  width: 16px;
  background-color: #fff;
  border: 1px solid #95a5a6;
  border-radius: 50%;
  transition: all 0.1s;
}

/* Checked radio button styling */

.radio-option input:checked ~ .radio-checkmark {
  border-color: #318da9;
}

.radio-checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.radio-option input:checked ~ .radio-checkmark:after {
  display: block;
}

.radio-option .radio-checkmark:after {
  top: 3px;
  left: 3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #318da9;
}

/* Category name for multi-choice select (e.g. "Designed Features", "Behavioral Health", "Custom") */
.radio-label {
  margin-left: 6px;
  line-height: 1.2;
}

/* Container holding input box for custom category input in "Add Factor" modal */
/* Initially hidden, display set to "block" upon click on "Custom" category click */
.custom-category-container {
  margin: 4px 0 2px 22px;
  display: none;
}

/* Custom category input box in "Add Factor" modal */
.custom-category-input {
  width: 100%;
  padding: 4px 8px;
  border: 1px solid #bdc3c7;
  border-radius: 3px;
  font-size: 13px;
  height: 26px;
}

/* When clicking on custom category input, these stylings are applied to the input box */
.custom-category-input:focus {
  outline: none;
  border-color: #318da9;
  box-shadow: 0 0 0 1px rgba(49, 141, 169, 0.2);
}

/* Container Holding factors 1 and 2 selection in "Create Connection" Modal */
.connection-factors {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  gap: 20px;
}

/* Container for individual factor selection (holds title "Factor 1", and "Click to Select" box) */
.factor-selector {
  flex: 1;
}

/* Title for factor selection in connection modal ("Factor 1" and "Factor 2") */
.factor-label {
  font-weight: 600;
  margin-bottom: 8px;
  color: #495057;
  font-size: 14px;
}

/* "Click to Select" container */
.factor-box {
  border: 2px dashed #dee2e6;
  padding: 15px;
  border-radius: 8px;
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  background-color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* When hovering over "Click to Select" box, this coloring is applied (blue border) */
.factor-box:hover {
  border-color: #4dabf7;
}

/* Styling for "Click to Select" text */
.click-to-select {
  color: #868e96;
  font-style: italic;
  font-size: 14px;
}

/* "Connection Description" input box styling */
#connectionDescription {
  width: 100%;
  min-height: 100px;
  padding: 10px;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  margin-bottom: 15px;
  transition: all 0.2s ease-in-out;
}

/* When clicking on "Connection Description" input box, these changes are applied */
#connectionDescription:focus {
  border-color: #339af0;
  outline: none;
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.15);
}

/* "Cancel" / "Save" Buttons Container within "Add Factor" and "Create Connection" modals */
.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* "Cancel" / "Save" Buttons Base Styling */
.btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.2s;
}

/* "Cancel" button in modal coloring */
.btn-cancel {
  background-color: #f0f0f0;
  color: #333;
}

/* When hovering over "Cancel" button, these changes are applied */
.btn-cancel:hover {
  background-color: #e0e0e0;
}

/* "Save" button in modal coloring */
.btn-save {
  background-color: #318da9;
  color: white;
}

/* When hovering over "Save" button, these changes are applied */
.btn-save:hover {
  background-color: #2a7a92;
}

/* DROP ZONE (center box where factors are dropped) */
.drop {
  justify-content: center;
  align-items: center;
  background-color: #d7d7d7;
  border: 1px solid #318da9;
  height: 96%;
  width: 56vw;
  margin: 1% 0%;
  position: relative;
  z-index: 0;
}

/* CONNECTION MODE */

/* Stylings applied to Drop Zone when in Connection Mode */
.connection-mode-active #drop-zone {
  position: relative;
  outline: 2px solid #4a6cf7;
  box-shadow: 0 0 0 2px #4a6cf7;
  transition: all 0.3s ease;
}

/* Disables (cannot click) "Add Factor", "Create Connection", and "Clear Board" buttons while in connection mode */
.connection-mode-active button:disabled {
  opacity: 0.3 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  transition: opacity 0.3s ease;
}

/* Disables (cannot click) factors outside dropzone (who have "pointer-events: none") while in connection mode */
.connection-mode-active .factor[style*="pointer-events: none"] {
  opacity: 0.2 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  transition: opacity 0.3s ease;
}

/* Disables (cannot click) info panel while in connection mode */
.connection-mode-active .info-panel {
  opacity: 0.3 !important;
  pointer-events: none !important;
  transition: opacity 0.3s ease;
}

/* "Cancel" button in top right of dropzone in connection mode styling */
.cancel-connection-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  background: #ff4757;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  z-index: 1000;
  transition: all 0.2s ease-in-out;
}

/* When hovering over "Cancel" button in connection mode, these stylings are applied */
.cancel-connection-btn:hover {
  background: #ce2029;
}

/* Bottom Action Bar container (Contains "Add Factor", "Create Connection", and "Clear Board" buttons) */
.bottom-bar {
  position: fixed;
  bottom: 4%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 15px;
  z-index: 9998;
}

/* "Add Factor" / "Create Connection" / "Clear Board" Buttons */
.action-btn {
  color: #318da9;
  border: none;
  font-size: 14px;
  cursor: pointer;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 4px;
  transition: all 0.2s ease;
  background-color: white;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}

/* When hovering over "Add Factor" / "Create Connection" / "Clear Board" Buttons, these stylings are applied */
.action-btn:hover {
  color: #ffffff;
  background-color: #318da9;
}

/* Specific coloring of "Clear Board" button */
.action-btn#clearBoardBtn {
  color: white;
  background: #e74c3c;
  transition: all 0.2s ease-in-out;
}

/* When hovering over "Clear Board" button, these stylings are applied */
.action-btn#clearBoardBtn:hover {
  background: #9b2b1f;
}

/* SCROLLBAR stylings */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}