html {
  height: 100%;
}
body {
  min-height: 100%;
}

.appflow-tab {
  background-color: #f3f4f6; /* Light background for inactive tabs */
  border: 1px solid #d0d0d0; /* Gray border to match w2ui panels */
  /*border-bottom: 1px solid white; /* Seamless connection with the content container */
  padding: 8px 12px; /* Add padding to make it feel like a tab */
  cursor: pointer;
  margin-right: 4px; /* Small space between tabs */
  color: #333; /* Default text color */
  border-radius: 3px 3px 0 0; /* Rounded top corners */
  position: relative;
  top: 1px;
  font-size: 14px;
}

.appflow-tab.active {
  background-color: #fff; /* White background for active tab */
  border-color: #d0d0d0; /* Match w2ui's panel border color */
  border-bottom: 2px solid #3498db; /* Remove bottom border for seamless tab connection */
  font-weight: bold; /* Make active tab text bold */
  color: #000; /* Active tab text color */
  z-index: 1; /* Ensure active tab is in front */
}

.appflow-tab .close-btn {
  margin-left: 8px; /* Space between the tab text and close button */
  color: #999;
  cursor: pointer;
  font-size: 12px;
  padding: 2px;
}

.appflow-tab .close-btn:hover {
  color: #e74c3c; /* Red color on hover */
}

.appflow-tab:hover {
  background-color: #e2e2e2; /* Hover effect */
  color: #333; /* Maintain consistent text color */
}

.appflow-tab-container {
  border-bottom: 1px solid #d0d0d0; /* Bottom border for the tab container */
  display: flex; /* Align tabs horizontally */
  padding-bottom: 0; /* Ensure the content flows without padding */
}

.tab-content {
  border: 1px solid #d0d0d0; /* Border for the content container */
  background-color: #fff;
  padding: 5px;
  display: none; /* Initially hide all content containers */
  height: 100%; /* Ensure consistent height for content */
}

.tab-content.active {
  display: block; /* Show only the active content container */
}

/* Dark mode overrides */
body.dark-mode {
  background-color: #121212;
  color: #e0e0e0;
}

.dark-mode .appflow-tab {
  background-color: #2a2a2a;
  border: 1px solid #444;
  color: #ccc;
}

.dark-mode .appflow-tab.active {
  background-color: #1e1e1e;
  border-color: #444;
  border-bottom: 2px solid #3498db;
  color: #fff;
}

.dark-mode .appflow-tab .close-btn {
  color: #bbb;
}

.dark-mode .appflow-tab .close-btn:hover {
  color: #ff6b6b;
}

.dark-mode .appflow-tab:hover {
  background-color: #3a3a3a;
  color: #ddd;
}

.dark-mode .appflow-tab-container {
  border-bottom: 1px solid #444;
}

.dark-mode .tab-content {
  background-color: #1e1e1e;
  border: 1px solid #444;
  color: #ddd;
}

/* Dark mode overrides for W2UI components */

.dark-mode .w2ui-grid {
  background-color: #1e1e1e;
  color: #e0e0e0;
  border-color: #444;
}

.dark-mode .w2ui-grid .w2ui-head {
  background-color: #2a2a2a;
  color: #ccc;
  border-color: #444;
}

.dark-mode .w2ui-grid .w2ui-scroll-wrapper {
  background-color: #1e1e1e;
}

.dark-mode .w2ui-toolbar {
  background-color: #2a2a2a;
  border-color: #444;
  color: #ccc;
}

.dark-mode .w2ui-toolbar .w2ui-button {
  background-color: #2a2a2a;
  color: #ccc;
}

.dark-mode .w2ui-toolbar .w2ui-button:hover {
  background-color: #3a3a3a;
  color: #fff;
}

.dark-mode .w2ui-sidebar {
  background-color: #1a1a1a;
  color: #ccc;
  border-color: #444;
}

.dark-mode .w2ui-sidebar .w2ui-node.selected {
  background-color: #333;
  color: #fff;
}

.dark-mode .w2ui-form {
  background-color: #1e1e1e;
  color: #e0e0e0;
  border-color: #444;
}

.dark-mode .w2ui-form input,
.dark-mode .w2ui-form textarea,
.dark-mode .w2ui-form select {
  background-color: #2a2a2a;
  color: #e0e0e0;
  border: 1px solid #555;
}

.dark-mode .w2ui-popup {
  background-color: #1e1e1e;
  color: #e0e0e0;
  border-color: #444;
}

.dark-mode .w2ui-msg-title {
  background-color: #2a2a2a;
  color: #fff;
  border-color: #444;
}

.dark-mode .w2ui-msg-body {
  background-color: #1e1e1e;
  color: #ddd;
}

.dark-mode .w2ui-msg-buttons button {
  background-color: #2a2a2a;
  color: #ccc;
  border: 1px solid #555;
}

.dark-mode .w2ui-msg-buttons button:hover {
  background-color: #3a3a3a;
  color: #fff;
}