/* Nested Tabs Styles for HeadlessUI - Preserving original colors and rounded borders */

/* Wrapper for all tab panels */
.tab-panels-wrapper {
  background: #16213e;
  border-radius: 0 10px 10px 10px;
  border: 2px solid #2c3e50;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  margin-top: 0;
  position: relative;
  z-index: 1;
}

/* Level 1 - Outer tabs list */
.tabs-list.outer-tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  position: relative;
  z-index: 1;
  padding-left: 0;
  margin-left: 0;
}

/* Project panel container */
.project-panel {
  background: transparent;
}

/* Profile tabs wrapper - encases both profile tabs and inner tabs */
.profile-tabs-wrapper {
  background: transparent;
  overflow: visible;
  margin: 0;
  padding: 0;
}

/* Level 2 - Profile tabs container */
.profile-tabs-container {
  background: transparent;
  padding: 0;
  margin: 0;
  position: relative;
}

/* Level 2 - Profile tabs list */
.tabs-list.profile-tabs {
  display: flex;
  gap: 2px;
  position: relative;
  padding: 10px 15px 0 15px;
  margin: 0;
  background: #16213e;
}

/* Profile tabs content area - border starts at bottom of tabs */
.profile-content-wrapper {
  border: 1px solid #2c3e50;
  border-top: none;
  background: #16213e;
  margin-top: -1px;
  position: relative;
  margin-left: 15px;
  margin-right: 15px;
}

/* Profile tab active state - connects to wrapper */
.profile-tabs .tab.active {
  background: #16213e !important;
  border-bottom: 2px solid #16213e !important;
  position: relative;
  z-index: 2;
}

/* Level 3 - Inner project tabs */
.inner-tabs-list.project-inner-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid #2c3e50;
  margin-bottom: 0;
  padding: 10px 15px 0 15px;
  background: #0f1626;
  position: relative;
  border-radius: 8px 8px 0 0;
}

/* Inner tabs content wrapper */
.inner-tabs-wrapper {
  margin: 0;
  overflow: hidden;
  background: #0f1626;
  margin-bottom: 10px;
}

/* Inner tab panels content area */
.inner-tab-panels {
  background: #0f1626;
  border-top: none;
  margin-top: 0;
  margin-right: 10px;
}

/* Inner tab styles */
.inner-tab {
  background: #1a1f3a !important;
  border: 1px solid #1a1f3a !important;
  border-bottom: none !important;
  z-index: 1;
  position: relative;
  margin-bottom: -2px;
}

.inner-tab.active {
  background: #0f1626 !important;
  border-color: #1a1f3a !important;
  border-bottom: 2px solid #0f1626 !important;
}

/* Override HeadlessUI focus styles */
.tab:focus,
.inner-tab:focus {
  outline: 2px solid #4fbdba;
  outline-offset: -2px;
}

/* Hide panel focus outline */
[role="tabpanel"]:focus {
  outline: none;
}

/* Ensure proper panel display */
[role="tabpanel"][data-headlessui-state="selected"] {
  display: block;
  margin-bottom: 15px;
}

[role="tabpanel"]:not([data-headlessui-state="selected"]) {
  display: none;
}