/* Basic styling for the resizable container */
.resizable-container {
  display: flex;
  overflow: hidden; /* Prevent content spill */
}

/* Ensure left and right panels don't shrink below minimums initially */
.resizable-left,
.resizable-right {
  /* Default flex-shrink is 1, set to 0 to prevent shrinking */
  flex-shrink: 0;
  /* Add padding or other styles as needed */
}

/* Styling for the resizer handle */
.resizer {
  background-color: #ccc; /* Light grey handle */
  cursor: col-resize; /* Indicates horizontal resizing */
  flex-shrink: 0; /* Prevent the resizer itself from shrinking */
  z-index: 10; /* Ensure it's clickable */
  width: 5px; /* Reduced width from 10px */
  border-left: 1px solid #bbb;
  border-right: 1px solid #bbb;
}

/* Optional: Add a hover effect for better user feedback */
.resizer:hover {
  background-color: #aaa;
}

/* assets/custom.css */

/* Default light mode styles (already handled by Bootstrap) */

/* Dark mode styles */
#app-container.dark-mode {
  background-color: #222; /* Dark background */
  color: #eee; /* Light text */
  min-height: 100vh; /* Ensure it covers the full height */
}

/* Adjust other component colors for dark mode if needed */
#app-container.dark-mode .nav-tabs .nav-link {
  color: #bbb; /* Lighter tab text */
  border-bottom-color: #444; /* Darker border */
}

#app-container.dark-mode .nav-tabs .nav-link.active {
  background-color: #333;
  border-color: #444 #444 #333;
  color: #fff; /* White active tab text */
}

#app-container.dark-mode h1,
#app-container.dark-mode h2,
#app-container.dark-mode h3,
#app-container.dark-mode h4 {
    color: #eee; /* Ensure headings are light too */
}

/* You might need more specific selectors to override default Bootstrap styles */

body {
  user-select: none; /* Prevent text selection cursor */
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition for body */
}

/* Add transition to the main container as well */
#app-container {
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Keep existing dark mode rules */
.dark-mode {
  background-color: #222 !important;
  color: #ddd !important;
}

.dark-mode .card { /* Example for styling cards in dark mode */
    background-color: #333;
    border-color: #555;
}

/* Add more specific dark mode rules as needed */