/*! bikg_app - v0.0.1-SNAPSHOT - 2025
* https://www.datavisyn.io
* Copyright (c) 2025 datavisyn GmbH; Licensed BSD-3-Clause*/

:root {
  
  /* Other constants */
  --spinner-color: grey;
  --mantine-header-color: #3B3B3F;
  --mantine-header-hover-color: #92a0ad;

  /* Default Node Colors */
  --unselected-default-color: #aaa;
  --selected-default-color: #888;

  /* Text Colors */
  --selected-text-color: black;
  --unselected-text-color: grey;

  /* Type Node Colors */
  --selected-type-node-color: steelblue;
  --unselected-type-node-color: lightsteelblue;

  /* Violation Node Colors */
  --selected-violation-node-color: orange;
  --unselected-violation-node-color: #FFCC99;

  /* Exemplar Node Colors */
  --selected-exemplar-node-color: red;
  --unselected-exemplar-node-color: #FF7F7F;

  /* Children/parent alignment constants */
  --node-layout-offset-x: 500;
  --distance-between-nodes-y: 70;

  /* Tree layout constants */
  --unfolded-subtree-bounding-box-margin: 100;
}

*, *::before, *::after {
  box-sizing: border-box;
}

.chat-container {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0px auto;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  height: 100%; /* Added to make sure it fills the available space of its parent */
}

.chat-history {
  flex: 1 1; /* Makes it take the available space after accounting for other elements */
  overflow-y: auto; /* This will allow scrolling on overflow */
  padding: 20px;
}


.chat-input {
  display: flex;
  padding: 10px;
  border-top: 1px solid #ccc;
  align-items: center; /* ensure alignment of input and button is centered vertically */
}

.chat-input input {
  flex: 1 1; /* allows input to grow */
  padding: 10px;
  border-radius: 4px;
  border: 1px solid #ccc;
  margin-right: 10px;
  flex-shrink: 1; /* allows input to shrink if necessary */
}

.chat-input button {
  padding: 10px 15px; /* give it some space */
  background-color: #3B3B3F;
  background-color: var(--mantine-header-color); /* using the mantine color */
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer; /* indicates clickability */
  flex-shrink: 0; /* prevent button from shrinking */
  white-space: nowrap; /* prevent text inside button from breaking to next line */
}


.chat-message {
  margin-bottom: 10px;
  padding: 8px 10px;
  border-radius: 4px;
  max-width: 100%; /* Set a max width. Adjust as per design needs. */
  word-wrap: break-word; /* To break the word and wrap onto next line */
  white-space: normal; /* Overrides any parent elements that might set this differently */
  overflow: hidden; /* Ensure overflow is hidden */
}

.user, .bot {
  word-wrap: break-word; /* Make sure text wraps within bubble */
}

.user {
  align-self: flex-end;
  background-color: #3B3B3F;
  background-color: var(--mantine-header-color);
  color: white;
}

.bot {
  align-self: flex-start;
  background-color: #f4f4f4;
}

.typing-indicator {
  font-style: italic;
  color: #aaa;
}

.api-key-wrapper {
  position: absolute;
  top: 5;
  left: auto;
  right: 0;
  padding: 0px 0px 0 0px;
  box-sizing: border-box;
  z-index: 10; /* Ensure it's above other elements */
  transition: padding 0.3s ease-in-out, opacity 0.3s ease-in-out; /* Transition for padding and opacity */

}

.api-key-input {
  max-width: 300px; /* Adjust as needed */
  margin: 0;
  display: flex;
  justify-content: flex-end;
  opacity: 0.3; /* Initially less visible */
  transition: opacity 0.3s ease-in-out;
}

.api-key-input input,
.api-key-input button {
  flex: 1 1;
  margin: 0 0px;
}

.api-key-input button {
  background-color: white;
  border: 1px solid #d1d1d1;
  cursor: pointer;
  box-sizing: border-box;
  color: black;
  transition: background-color 0.15s ease, color 0.15s ease; /* Smoother transitions */
  font-size: 1rem; /* Readability */
}

/* Hover Effect */
.api-key-input button:hover {
  background-color: #92a0ad;
  background-color: var(--mantine-header-hover-color);
  color: white;
  border: 1px solid grey;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1); /* subtle shadow as in tabs */
}

/* Active State */
.api-key-input button:active {
  color: white;
  background-color: #3B3B3F;
  background-color: var(--mantine-header-color);
  border: 1px solid grey;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1); /* subtle shadow as in tabs */
}

/* When hovering over the entire wrapper */
.api-key-wrapper:hover .api-key-input,
/* When the input or button inside api-key-input is focused */
.api-key-input input:focus,
.api-key-input button:focus {
  opacity: 1; /* Fully visible */
}
/* Legend.css */
.legend-container {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 16px;
}

.legend-section {
  margin-bottom: 16px;
}

.legend-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 8px;
}

.shapes-section,
.colors-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.shape {
  width: 20px;
  height: 20px;
}

.rectangle {
  background-color: var(--selected-default-color);
}

.triangle {
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  background-color: var(--selected-default-color);
}

.diamond {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  background-color: var(--selected-default-color);
}

.pentagon {
  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
  background-color: var(--selected-default-color);
}

.hexagon {
  clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
  background-color: #777;
}

.circle {
  border-radius: 50%;
  background-color: var(--selected-default-color);
}

.color {
  width: 20px;
  height: 20px;
  /* border: 1px solid #000; */
}

.settings-tab-container {
  max-width: 800px; /* Increased max-width for better spacing on larger screens */
  margin: 20px auto; /* Added top/bottom margin */
  padding: 1.5rem; /* Increased padding */
  background-color: #f9fafb; /* Light background for the whole container */
  border-radius: 12px; /* Rounded corners for the container */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* Softer, more modern shadow */
}

.settings-accordion .mantine-Accordion-item {
  margin-bottom: 1rem; /* Increased spacing between accordion items */
  border-radius: 10px; /* Slightly more rounded corners for items */
  overflow: hidden;
  border: 1px solid #e5e7eb; /* Subtle border for items */
  transition: box-shadow 0.3s ease;
}

.settings-accordion .mantine-Accordion-item:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); /* Hover effect for items */
}

.settings-accordion .mantine-Accordion-control {
  background-color: #ffffff; /* White background for control */
  padding: 1rem 1.25rem; /* Adjusted padding */
  font-weight: 500; /* Slightly less bold font */
  color: #374151; /* Darker text color for better contrast */
  transition: background-color 0.2s ease;
  border-bottom: 1px solid #e5e7eb; /* Separator line */
}

.settings-accordion .mantine-Accordion-control:hover {
  background-color: #f3f4f6; /* Lighter hover for control */
}

.settings-accordion .mantine-Accordion-control[data-active] {
  background-color: #eff6ff; /* Distinct background for active control */
  color: #1d4ed8; /* Accent color for active control text */
}


.settings-accordion .mantine-Accordion-panel {
  padding: 1.25rem; /* Increased padding in panel */
  background-color: #ffffff; /* White background for panel */
  border-top: 1px solid #e5e7eb; /* Separator for panel content */
}

/* Styling for nested accordions to differentiate them */
.settings-accordion .mantine-Accordion-item .mantine-Accordion-item {
  margin-bottom: 0.75rem;
  border-radius: 8px;
  border: 1px solid #f3f4f6; /* Lighter border for nested items */
}

.settings-accordion .mantine-Accordion-item .mantine-Accordion-control {
  background-color: #f9fafb; /* Slightly different bg for nested controls */
  padding: 0.75rem 1rem;
  font-weight: 500;
}

.settings-accordion .mantine-Accordion-item .mantine-Accordion-control:hover {
  background-color: #f0f1f3;
}

.settings-accordion .mantine-Accordion-item .mantine-Accordion-control[data-active] {
  background-color: #e0e7ff; 
  color: #3730a3;
}

.settings-accordion .mantine-Accordion-item .mantine-Accordion-panel {
  padding: 1rem;
  background-color: #ffffff;
}

:root {
  --mantine-header-color: #3B3B3F;
}

html,
body,
#root {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

.mantine-Header-root {
  background-color: #3B3B3F;
  background-color: var(--mantine-header-color);
}

/* Ensures each panel or container doesn't produce unintended overflow. */
.resizable-panel {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Some placeholder styling for .Tabs or text. */
.mantine-Tabs-root {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.mantine-Tabs-panel {
  flex: 1 1;
  overflow: auto;
}

.lineup-window {
  display: flex;
  flex-direction: column;
  height: 100%; /* Ensures it occupies the full height of the parent container */
  width: 100%; /* Ensures it occupies the full width of the parent container */
}

.LineUpParent {
  display: flex;
  flex: 1 1; /* Grows to fill the available space in the container */
  position: relative;
}

.lu {
  width: 100%; /* Occupies the full width of the parent */
  height: 100%; /* Occupies the full height of the parent */
  max-width: 100%; /* Prevents horizontal overflow */
  max-height: 100%; /* Prevents vertical overflow */
  overflow: auto; /* Adds scrollbars only when needed */
}

/* Hover state */
.cy-context-menus-cxt-menuitem:hover {
  background-color: var(--mantine-header-hover-color);
  color: #ffffff;  /* White text for contrast */
}

/* Active/Focused state could also be added */
.cy-context-menus-cxt-menuitem:active,
.cy-context-menus-cxt-menuitem:focus {
  background-color: #3B3B3F;
  background-color: var(--mantine-header-color);
  color: #ffffff;  /* Keep text white for consistency */
}

/* D3 context menu styling */
.d3-context-menu-item {
  display: block;
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  padding: 4px 12px;
  transition: background-color 0.2s ease-in-out;
}

.d3-context-menu-title {
  display: block;
  width: 100%;
  text-align: left;
  padding: 4px 12px;
  font-weight: bold;
}

.d3-context-menu-item:hover {
  background-color: var(--mantine-header-hover-color);
  color: #ffffff;
}

.d3-context-menu-item:active,
.d3-context-menu-item:focus {
  background-color: #3B3B3F;
  background-color: var(--mantine-header-color);
  color: #ffffff;
}


/*# sourceMappingURL=app.css.map*/