/* General Layout */
.data-manager {
  font-family: 'Arial', sans-serif;
  margin: 20px auto;
  max-width: 700px; /* Reduced max width for narrower layout */
  display: flex;
  flex-direction: column;
  gap: 20px; /* Reduced spacing between sections */
  align-items: stretch;
  padding: 20px;
  background-color: #2c3e50; /* Dark background */
  border-radius: 12px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  color: #ecf0f1; /* Light text color */
  max-height: 80vh; /* Limit height */
  overflow-y: auto; /* Enable vertical scrolling */
}

.title {
  font-size: 2rem; /* Slightly smaller title */
  margin-bottom: 15px;
  color: #ecf0f1; /* Light color for title */
  text-align: center;
}

/* Section Style */
.section {
  margin-top: 20px;
  background-color: #34495e; /* Dark background for sections */
  padding: 15px 20px; /* Reduced padding for compact cards */
  border-radius: 12px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
  border: 1px solid #4a5f7a; /* Darker border */
  color: #ecf0f1; /* Light text color */
}

/* Section Title */
.card-title {
  font-size: 1.5rem; /* Smaller font size */
  margin-bottom: 10px;
  color: #ecf0f1; /* Light color for section titles */
  text-align: center;
  border-bottom: 1px solid #4a5f7a; /* Darker border */
  padding-bottom: 6px;
}

/* Input and Button Styles */
.form-group {
  display: flex;
  align-items: center;
  gap: 10px; /* Spacing between inputs and buttons */
  margin-bottom: 10px; /* Reduced margin for compact layout */
}

.input {
  padding: 8px 10px; /* Smaller padding */
  border: 1px solid #4a5f7a; /* Darker border */
  border-radius: 6px;
  font-size: 1rem;
  flex: 1;
  background-color: #2c3e50; /* Dark background */
  color: #ecf0f1; /* Light text color */
  transition: border-color 0.3s, box-shadow 0.3s;
  min-width: 100px;
}

.input:focus {
  outline: none;
  border-color: #3498db;
  box-shadow: 0 0 6px rgba(52, 152, 219, 0.5);
}

.button {
  padding: 6px 12px; /* Smaller buttons */
  background-color: #3498db; /* Blue theme */
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 0.9rem; /* Slightly smaller font size */
  cursor: pointer;
  transition: background 0.3s, transform 0.2s;
}

.button:hover {
  background-color: #2980b9; /* Darker blue for hover effect */
  transform: translateY(-1px); /* Slight lift effect */
}

.button-remove {
  padding: 4px 10px; /* Smaller size for remove buttons */
  background-color: #e74c3c; /* Red for delete actions */
  font-size: 0.8rem; /* Smaller font size */
  border-radius: 6px;
  margin-left: 5px; /* Slight space from content */
  color: white;
  border: none;
  cursor: pointer;
  transition: background 0.3s, transform 0.2s;
}

.button-remove:hover {
  background-color: #c0392b; /* Darker red on hover */
  transform: translateY(-1px);
}

.button-save {
  background-color: #27ae60; /* Green for save actions */
  margin-top: 15px;
  font-size: 1rem;
  color: white;
}
.button-save:hover {
  background-color: #229954;
}

/* List Styles */
.list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0; /* Compact padding */
  border-bottom: 1px solid #4a5f7a; /* Darker border */
  gap: 10px; /* Space between content and button */
  color: #ecf0f1; /* Light text color */
}

.nested-list {
  list-style: none;
  padding: 10px 15px; /* Compact nested list padding */
  margin: 8px 0;
  background-color: #2c3e50; /* Dark background */
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  border: 1px solid #4a5f7a; /* Darker border */
}

.nested-list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0; /* Compact nested item padding */
  border-bottom: 1px solid #4a5f7a; /* Darker border */
  gap: 10px; /* Space between text and button */
  color: #ecf0f1; /* Light text color */
}

.nested-list-item:last-child {
  border-bottom: none; /* Remove border for the last item */
}

/* Row Alignment for Inputs and Buttons */
.row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px; /* Reduced margin for compact spacing */
}

/* Loading State */
.loading {
  text-align: center;
  font-size: 1.4rem; /* Slightly smaller font size */
  color: #bdc3c7; /* Light gray color for dark theme */
  margin-top: 20px;
}

/* Item Section */
.item-section {
  margin-top: 15px; /* Reduced margin for compact layout */
}

/* Additional Dark Theme Styles */
.data-manager select {
  background-color: #2c3e50;
  color: #ecf0f1;
  border: 1px solid #4a5f7a;
  border-radius: 6px;
  padding: 8px 10px;
}

.data-manager select:focus {
  outline: none;
  border-color: #3498db;
  box-shadow: 0 0 6px rgba(52, 152, 219, 0.5);
}

.data-manager option {
  background-color: #2c3e50;
  color: #ecf0f1;
}

/* Custom Scrollbar for Dark Theme */
.data-manager::-webkit-scrollbar {
  width: 8px;
}

.data-manager::-webkit-scrollbar-track {
  background: #34495e;
  border-radius: 4px;
}

.data-manager::-webkit-scrollbar-thumb {
  background: #4a5f7a;
  border-radius: 4px;
}

.data-manager::-webkit-scrollbar-thumb:hover {
  background: #5a6f8a;
}

/* Firefox scrollbar */
.data-manager {
  scrollbar-width: thin;
  scrollbar-color: #4a5f7a #34495e;
}

/* Ensure text inputs have proper styling */
.data-manager input[type="text"],
.data-manager input[type="number"] {
  background-color: #2c3e50;
  color: #ecf0f1;
  border: 1px solid #4a5f7a;
}

.data-manager input[type="text"]:focus,
.data-manager input[type="number"]:focus {
  border-color: #3498db;
  box-shadow: 0 0 6px rgba(52, 152, 219, 0.5);
}

/* Placeholder text color */
.data-manager input::placeholder {
  color: #95a5a6;
}

.button-remove {
  margin-left: 10px;
}