@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  /* Smooth transitions for diagram list */
  .diagrams-container {
    min-height: 200px; /* Provide a minimum height to reduce jarring changes */
  }

  .diagrams {
    transition: all 0.5s ease-in-out; /* Smooth transition for height changes */
  }

  .diagram-item {
    transition: all 0.4s ease; /* Smooth transition for each diagram item */
  }
}

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-gray-200;
  }
}

*/
/* Custom validation styling */
.field-error {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 1px #ef4444 !important;
}

.validation-tooltip {
  position: absolute;
  background-color: #ef4444;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
  margin-top: 4px;
  z-index: 10;
  max-width: 100%;
  animation: fadeIn 0.3s ease;
}

.validation-tooltip::before {
  content: '';
  position: absolute;
  top: -4px;
  left: 10px;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 4px solid #ef4444;
}

.validation-tooltip.hidden {
  display: none;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Custom tooltip that appears on hover */
.custom-tooltip {
  position: absolute;
  pointer-events: none;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */
html {
  height: 100%;
}
html * {
  font-family: "Manrope";
}
body {
  margin: 0;
  height: 100%;
  overflow-y: clip;
}

/* Define styles for the container div */
#graph-container {
  position: relative;
  width: 100%;
  height: 100vh; /* Use the viewport height for full-screen */
}

#svg {
  cursor: grab;
}

#svg:active {
  cursor: grabbing;
}

.maingreen{
  color: #4A7152;
}

.secondaryText{
  color: #404756;
}

input{
  background-color: #FFFFFF;
}

[type=email]:focus,[type=password]:focus{
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  border-color: #696969;
  --tw-ring-color: #6f6f6f;
  background-color: rgb(255, 255, 255);
}

[type=checkbox]{
  color: #868686;
}
[type="checkbox"]:focus,
[type="radio"]:focus {
  --tw-ring-color: #ffffff;
}
.tooltip {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 5px;
  border-radius: 3px;
  white-space: pre-line; /* This helps to preserve the new line */
  /* pointer-events: none; */
  display: none; /* Initially hide the tooltip */
  z-index: 9999;
}

@media (max-width: 560px) {
  .modal-content {
    height: 95%;
    width: 95%;
  }
  .home-content {
    width: 80%;
  }
}

/* Styles for larger screens */
@media (min-width: 561px) {
  .modal-content {
    height: 80%;
    width: 65%;
  }
  .home-content {
    width: 70%;
  }
}

.node-selected circle {
  filter: brightness(1.2);
}

/* Blur effect when sidebar is open */
#blur-overlay {
  transition: backdrop-filter 0.3s ease, opacity 0.3s ease;
}

#blur-overlay.active {
  backdrop-filter: blur(5px);
  opacity: 1;
  pointer-events: auto;
}

/* Make sure the sidebar and toggle button don't get blurred */
#sidebar, #hompagesidebar {
  isolation: isolate;
}

/* Smooth dropdown animation */
#dropdownSubmenu {
  max-height: 0;
  opacity: 0;
  transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
  overflow: hidden;
}

#dropdownSubmenu.dropdown-expanded {
  max-height: 200px; /* Adjust based on content */
  opacity: 1;
}

/* Improved smooth transitions for diagram list */
.diagrams-container {
  min-height: 200px;
  transition: all 0.6s ease-in-out;
}

#diagramsList {
  transition: all 0.6s ease-in-out;
}

.diagram-item {
  max-height: 100px; /* Set to a value larger than your items will ever be */
  opacity: 1;
  overflow: hidden;
  padding: 0.5rem 0;
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); /* Smooth easing function */
}

/* Improved animation for hiding items */
.diagram-item.hidden-item {
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin: 0;
  pointer-events: none;
}

/* Loading screen overlay */
#loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(0); /* Start with no blur */
  transition: backdrop-filter 2s ease-in-out; /* Longer, smoother transition */
  z-index: 999999; /* Make sure it's above everything */
  display: none; /* Initially hidden */
  justify-content: center;
  align-items: center;
  pointer-events: all; /* Make sure it captures all clicks */
}

/* Apply blur when shown */
#loading-screen[style*="display: flex"] {
  backdrop-filter: blur(5px); /* End with blur */
}

/* Loader animation */
.loader {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 120px;
}

.loader .circle {
  width: 24px;
  height: 24px;
  margin: 0 8px;
  background-color: #c7c7c7;
  border-radius: 50%;
  animation: fade 2s infinite ease-in-out; /* Renamed from bounce to fade */
  opacity: 0; /* Start invisible */
}

.loader .circle:nth-child(2) {
  animation-delay: 0.5s;
}

.loader .circle:nth-child(3) {
  animation-delay: 1s;
}

@keyframes fade {
  0%, 70%, 100% {
    opacity: 0; /* Invisible */
  }
  35% {
    opacity: 1; /* Fully visible */
  }
}