/*--Reactflow components--*/
/* Base layout for infinite canvas */
.app-container {
    display: flex;
    height: 100vh; /* Full viewport height */
    overflow: hidden; /* Prevent scrollbars on the outer container */
    /* width: 100vw; /* Full viewport width */
}

.flow-and-buttons {
    flex: 1; /* Takes up remaining space, after the variables table */
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%; /* Ensure it fills the parent height */
}

.react-flow {
    width: 100%;
    height: 100%; /* Fill the entire flow-and-buttons container */
    background: white; /* Light background for visibility */
}

/* Button container styling */
.button-container {
    display: flex;
    flex-wrap: wrap; /* Allow buttons to wrap if needed */
    gap: 5px; /* Space between buttons */
    padding: 5px;
    background-color: #f0f0f0; /* Light background for the button bar */
    border-bottom: 1px solid #ccc;
    overflow-x: auto; /* Allow horizontal scrolling if buttons overflow */
    z-index: 100; /* Ensure buttons stay above the canvas */
    /*position: absolute; /* Keep it fixed at the top */
    top: 0;
    left: 0;
    max-height: 100px; /* Limit the height;
  /*width: 100%; /* Span the full width */
}

.button-container button {
    padding: 5px 8px; /* Smaller padding to reduce button size */
    font-size: 13px; /* Smaller font size */
    white-space: nowrap; /* Prevent text wrapping */
    border: 1px solid #ccc;
    border-radius: 3px;
    background-color: #fff;
    cursor: pointer;
}

.button-container .button-style-blue {
    background-color: #0aa7f6; /*#75c3ea*/
    color: white;
    border: none;
    border-radius: 4px;
}

.button-container button:hover {
    background-color: #e0e0e0;
}

/*
.button-container label {
  display: inline-block;
  padding: 5px 8px;
  font-size: 13px;
  border: 1px solid #ccc;
  border-radius: 3px;
  background-color: #fff;
  cursor: pointer;
}

.button-container label:hover {
  background-color: #e0e0e0;
}
*/

/* Sidebar styling (contains both ConfigTable and VariableTable) */
.sidebar {
    width: 300px; /* Fixed width for the sidebar */
    padding: 10px;
    background-color: #f9f9f9; /* Light gray background, matching VariableTable */
    border-left: 1px solid #ccc;
    overflow-y: auto; /* Scroll if content overflows */
    height: 100%; /* Fill the full height */
}

/* Config table styling */
.config-table-container {
    margin-bottom: 20px; /* Space between ConfigTable and VariableTable */
}

.config-table-container h3 {
    margin: 0 0 10px 0;
    font-size: 16px;
    text-align: center;
}

.config-table {
    width: 100%;
    border-collapse: collapse;
}

.config-table th,
.config-table td {
    padding: 5px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

.config-table th {
    background-color: #e0e0e0;
}

.config-table input[type="text"] {
    width: 100%;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 12px;
    box-sizing: border-box;
}

.config-table input[type="checkbox"] {
    margin: 0;
}

/* Variable table styling */
.variable-table-container {
    margin-bottom: 20px; /* Space below the table */
}

.variable-table-container h3 {
    margin: 0 0 10px 0;
    font-size: 16px;
    text-align: center;
}

.variable-table-container2 {
    width: 300px; /* Fixed width for the table */
    padding: 10px;
    background-color: #f9f9f9; /* Light gray background */
    border-left: 1px solid #ccc;
    overflow-y: auto; /* Scroll if content overflows */
    height: 100%; /* Fill the full height */
}

.variable-table {
    width: 100%;
    border-collapse: collapse;
}

.variable-table th,
.variable-table td {
    padding: 5px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

.variable-table th {
    background-color: #e0e0e0;
}

.table-input {
    width: 100%;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 12px;
}

/* Node styles */
.group-node {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    box-sizing: border-box;
    background-color: rgba(
        173,
        216,
        230,
        0.3
    ); /* Light blue background with transparency */
    border: 2px dashed #007bff; /* Dashed border to indicate group */
    padding: 10px;
    /*z-index: 0;*/
}

.group-node.selected {
    border: 2px solid #007bff !important;
    /*z-index: 1; /* Keep it behind child nodes when selected */
}

.group-node input {
    margin-bottom: 5px;
}

.integration-node {
    background-color: #ffebee;
    padding: 10px;
    border: 1px solid black;
    min-width: 300px;
    position: relative;
}

.language-preference-node {
    background-color: #f3e5f5; /* Light purple background */
    padding: 10px;
    border: 2px solid #9c27b0; /* Purple border matching the button color */
    min-width: 300px;
    border-radius: 8px;
    position: relative;
    box-shadow: 0 2px 4px rgba(156, 39, 176, 0.2);
}

.language-preference-node.selected {
    border-color: #7b1fa2; /* Darker purple when selected */
    box-shadow: 0 4px 8px rgba(156, 39, 176, 0.4);
}

.sticker-node {
    background-color: yellow;
    padding: 10px;
    border: 1px solid #257a96;
    min-width: 120px;
    text-align: center;
    display: flex; /* Use flexbox for vertical stacking */
    flex-direction: column; /* Stack children vertically */
    /*align-items: center; /* Center children horizontally */
    align-items: flex-start; /* Align children to the left */
    position: relative;
}

.text-node {
    background-color: cyan;
    padding: 10px;
    border: 1px solid #49af6b;
    min-width: 150px;
    border-radius: 5px;
    position: relative;
    /*z-index: 2;*/
}

.react-flow textarea {
    width: 95%; /* Ensure enough width  */
    /*height: 100px; /* Set a fixed height for 6 lines */
    height: 70px;
    padding: 2px; /* Reduced padding */
    margin-right: 5px;
    box-sizing: border-box; /* Prevent padding from causing overflow */
    overflow: visible; /* Avoid clipping */
    white-space: nowrap; /* Prevent text wrapping */
    resize: vertical; /* Allow vertical resizing */
    font-family: sans-serif;
    border: 1px solid #ccc;
    border-radius: 3px;
    background-color: white;
    /*cursor: text;*/
    /*user-select: text;*/
}

.text-node-textarea:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 3px rgba(0, 123, 255, 0.3);
}

.text-node-preview {
    min-height: 20px;
    padding: 5px;
    border: 1px solid #eee;
    border-radius: 3px;
    background-color: #f9f9f9;
    white-space: pre-wrap;
}

/*
.text-node-content-editable {
  width: 100%;
  min-height: 100px;
  padding: 5px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 3px;
  background-color: white;
  white-space: pre-wrap;
  font-family: sans-serif;
  cursor: text;
}

.text-node-content-editable:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 3px rgba(0, 123, 255, 0.3);
}

.text-node-content-editable:empty:before {
  content: attr(placeholder);
  color: #999;
}
*/

.button-reply-node {
    background-color: lightblue;
    padding: 10px;
    border: 1px solid #49af6b;
    min-width: 150px;
    position: relative;
}

.default-q-address-node {
    background-color: rgb(115, 255, 0);
    padding: 10px;
    border: 1px solid #49af6b;
    min-width: 170px;
    position: relative;
}

.default-q-email-node {
    background-color: lightcyan;
    padding: 10px;
    border: 1px solid #49af6b;
    min-width: 170px;
    position: relative;
}

.default-q-name-node {
    background-color: lightseagreen;
    padding: 10px;
    border: 1px solid #49af6b;
    min-width: 170px;
    position: relative;
}

.list-reply-node {
    background-color: lightcyan; /* Distinct color, adjustable to your preference */
    padding: 10px;
    border: 1px solid #49af6b; /* Consistent border color with other nodes */
    min-width: 250px; /* Slightly wider to accommodate nested content */
    border-radius: 5px;
    position: relative;
}

.image-node {
    background-color: lightgoldenrodyellow; /* Distinct color, adjust as needed */
    padding: 10px;
    border: 1px solid #49af6b; /* Consistent border color with other nodes */
    min-width: 150px; /* Matches other nodes like text-node */
    position: relative;
}

.question-language-preference-node {
    background-color: lightpink; /* Distinct color, adjust as needed */
    padding: 10px;
    border: 1px solid #49af6b; /* Consistent border color with other nodes */
    min-width: 200px; /* Slightly wider to accommodate button list */
    position: relative;
}

.question-open-ended-node {
    background-color: #f0e68c; /* Khaki color, adjust as needed */
    padding: 10px;
    border: 1px solid #49af6b; /* Consistent border color with other nodes */
    min-width: 150px; /* Matches simpler nodes like text-node */
    position: relative;
}

.url-node {
    background-color: #e0ffff; /* Light cyan color, adjust as needed */
    padding: 10px;
    border: 1px solid #49af6b; /* Consistent border color with other nodes */
    min-width: 200px; /* Slightly wider to accommodate URL list */
    position: relative;
}

/* Consumer Response Node styling */
.consumer-response-node {
    background-color: #d3d3d3; /* Light gray, distinct but consistent with other nodes */
    padding: 10px;
    border: 1px solid #49af6b; /* Consistent border color with other nodes */
    min-width: 150px; /* Matches other nodes like text-node */
    /*border-radius: 5px;*/
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Align children to the left */
    /*gap: 5px; /* Consistent spacing between elements */
    position: relative;
}

/*
.consumer-response-node div {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 5px; /* Space between label and input/select */
/*
}
*/

/*
.consumer-response-node label {
  /*font-size: 12px;*/
/*
  white-space: nowrap;

}
*/

/* Ensure the dropdown matches the standard input style */
.consumer-response-node select {
    width: 95%;
    padding: 2px;
    margin-right: 5px;
    box-sizing: border-box;
    overflow: visible;
    white-space: nowrap;
}

.if-condition-node {
    background: #90ee90; /* Light green background */
    border: 2px solid #000;
    border-radius: 0;
    transform: rotate(45deg); /* Rotate to create a diamond shape */
    width: 150px;
    height: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px;
    position: relative;
    box-sizing: border-box;
}

.if-condition-node.selected {
    border-color: #ff0072;
    /*z-index: 3; /* Even higher z-index when selected */
}

/* Counter-rotate the content to make it readable */
.if-condition-content {
    transform: rotate(-45deg); /* Counter-rotate the content */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* Style for the title */
.if-condition-title {
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 5px;
    text-align: center;
}

/* Style for each field (True Value, False Value) */
.if-condition-field {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 5px;
    width: 100%;
}

.if-condition-field div {
    font-size: 12px; /* Smaller font for labels */
    margin-bottom: 2px;
}

/* Style for inputs within the IF Condition node */
.if-condition-input {
    width: 100px; /* Smaller width to fit within the diamond */
    font-size: 12px; /* Smaller font size */
    padding: 2px;
    border: 1px solid #ccc;
    border-radius: 3px;
    box-sizing: border-box;
    text-align: center;
}

/* Adjust NodeMetadataFields for IF Condition node */
.if-condition-node .node-metadata-fields {
    margin-bottom: 5px;
}

.if-condition-node .metadata-item {
    margin-top: 0; /* Reduce spacing */
}

.if-condition-node .metadata-item div {
    font-size: 12px; /* Smaller font for metadata */
    text-align: center;
}

/* Adjust handles to align with the diamond shape */
.if-condition-node .react-flow__handle {
    transform: rotate(
        -45deg
    ); /* Adjust handles to align with the diamond shape */
}

/* Style for handle labels (True and False) */
.handle-label {
    position: absolute;
    font-size: 12px;
    color: #555;
    max-width: 25px; /* Constrain the width of the label */
    white-space: nowrap; /* Prevent text wrapping */
    /*overflow: hidden; /* Hide overflow text */
    /*text-overflow: ellipsis; /* Add ellipsis for overflow */
    text-align: right; /* Center the text within the constrained width */
}

.handle-label-true {
    right: -50px; /* Closer to the handle */
    top: -30px; /* Adjusted to align with the True handle */
    transform: rotate(-45deg); /* Counter-rotate to match the node's rotation */
}

.handle-label-false {
    right: -50px; /* Closer to the handle */
    top: 140px; /* Adjusted to align with the False handle */
    transform: rotate(-45deg); /* Counter-rotate to match the node's rotation */
}
/*
.if-condition-node > * {
  transform: rotate(-45deg); /* Counter-rotate the content to make it readable */
/*
}

.if-condition-node.selected {
  border-color: #ff0072;
}

.if-condition-node .react-flow__handle {
  transform: rotate(-45deg); /* Adjust handles to align with the diamond shape */
/*
}
*/

/* Ensure regular nodes have a higher z-index */
/*
.sticker-node,
.text-node,
.button-reply-node,
.default-q-address-node,
.default-q-email-node,
.default-q-name-node,
.list-reply-node,
.image-node,
.question-language-preference-node,
.question-open-ended-node,
.url-node,
.consumer-response-node,
.if-condition-node {
  z-index: 2; /* Higher z-index for all non-group nodes */
/*
}
*/

/* Highlight selected nodes */
.selected {
    border: 3px solid red;
    /*z-index: 3; /* Even higher z-index when selected */
}

/* Input styles */
.standard-input-style2 {
    width: 100px; /* Smaller width */
    font-size: 12px; /* Smaller text */
    padding: 2px; /* Reduced padding */
    text-align: center;
    margin-top: 5px;
    margin-bottom: 5px;

    text-align: center;
    display: flex; /* Use flexbox for vertical stacking */
    flex-direction: column; /* Stack children vertically */
    /*align-items: center; /* Center children horizontally */
    align-items: flex-start; /* Align children to the left */
}

.standard-input-style {
    width: 95%; /* Ensure enough width  */
    /*height: 35px;*/
    padding: 2px; /* Reduced padding */
    margin-right: 5px;
    box-sizing: border-box; /* Prevent padding from causing overflow */
    overflow: visible; /* Avoid clipping */
    white-space: nowrap; /* Prevent text wrapping */
}

.short-input-style {
    width: 45px; /* For short text inputs */
    padding: 2px;
    margin-right: 5px;
    box-sizing: border-box; /* Prevent padding from causing overflow */
    overflow: visible; /* Avoid clipping */
    white-space: nowrap; /* Prevent text wrapping */
}

/* Style the dropdown to match other inputs */
.short-input-style select {
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 12px;
    min-width: 100px;
}

.medium-input-style {
    width: 100px; /* For medium text inputs */
    padding: 2px;
    margin-right: 5px;
    box-sizing: border-box; /* Prevent padding from causing overflow */
    overflow: visible; /* Avoid clipping */
    white-space: nowrap; /* Prevent text wrapping */
}

/* Style the dropdown to match other inputs */
.medium-input-style select {
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 12px;
    min-width: 100px;
}

/* Edge and handle styles */
.react-flow__edge-path {
    stroke: #222;
    stroke-width: 2px;
}

/* Style for selected edges */
.react-flow__edge.selected .react-flow__edge-path {
    stroke: red;
    stroke-width: 2px;
}

.react-flow__handle {
    width: 10px;
    height: 10px;
    background: #555;
    border: 1px solid #fff;
    border-radius: 50%;
}

.react-flow__handle.source {
    background: black; /* Black for source */
}

.react-flow__handle.target {
    background: lightsteelblue; /* Lightsteelblue for target */
}

/* Button list and URL node items */
.button-list {
    display: flex;
    flex-direction: column; /* Stack button items vertically */
    width: 100%; /* Take full width of the parent */
    margin-top: 5px; /* Space above the button list */
}

.button-item {
    display: flex;
    flex-direction: row;
    align-items: center; /* Vertically center align items in the row */
    margin-bottom: 5px; /* Add some spacing between items */
}

/* Ensure labels are left-aligned and take minimal space */
.button-item > div {
    min-width: 30px; /* Fixed width for "id" and "title" labels to align them */
    text-align: left;
    margin-right: 5px; /* Space between label and input */
}

/* List reply node styling */
.list-reply-container {
    margin-top: 10px;
}

.section-item {
    margin-bottom: 15px; /* Space between sections */
    padding: 10px;
    border: 1px solid #ddd; /* Light border to distinguish sections */
    border-radius: 3px;
    background-color: #e0ffff; /* White background for contrast */
}

.row-item {
    margin-top: 5px;
    padding: 5px;
    border: 1px solid darkgrey;
    border-radius: 3px;
    background-color: #fff; /* White background for contrast */
}

/* Buttons */
.add-button {
    margin-top: 5px;
    padding: 5px 10px;
    background-color: #4caf50;
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}

.delete-button {
    margin-top: 5px;
    /*margin-left: 5px; /* Adds space on the left */
    padding: 5px 10px;
    background-color: #ff4444;
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}

/* Node metadata fields */
.node-metadata-fields {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.metadata-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 5px;
    gap: 5px; /* Space between db_id and channel_id */
}

.inline-field {
    display: flex;
    align-items: center;
    gap: 5px; /* Space between label and input */
}

.inline-field span {
    white-space: nowrap;
}

.inline-input2 {
    flex: 1;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 12px;
    min-width: 100px; /* Ensure inputs have a minimum width */
}

.inline-input {
    width: 100%; /* Ensure enough width  */
    padding: 2px; /* Reduced padding */
    margin-right: 5px;
    box-sizing: border-box; /* Prevent padding from causing overflow */
    overflow: visible; /* Avoid clipping */
    white-space: nowrap; /* Prevent text wrapping */
}

.duplicate-node-button {
    background-color: lightgreen;
    color: white;
    border: none;
    padding: 5px 10px;
    text-align: center;
    /*width: 100px;*/
    display: inline-block;
    font-size: 12px;
    border-radius: 5px;
    cursor: pointer;
}

/* Delete node button */
.node-wrapper {
    position: relative;
}

.delete-node-button {
    position: absolute;
    top: 5px;
    right: 5px;
    background: gray;
    color: white;
    border: none;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 12px;
    z-index: 10; /* Ensure the button is above other elements */
}

/* Delete button styling for group nodes (upper left corner) */
.delete-node-button.group-delete-button {
    right: auto; /* Remove the right positioning */
    left: -10px; /* Position in the upper left corner */
}

.delete-node-button:hover {
    background: darkgray; /* Optional hover effect */
}