/**
 * Circloud GUI - Tab Styles
 */

/* Tab Container */
.tabs-container {
  margin-bottom: 4px;
  position: relative;
  z-index: 1;
  pointer-events: auto;
}

/* Tab Navigation */
.tab-nav {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  background: transparent;
  padding: 4px 8px 0;
  border-radius: 8px 8px 0 0;
  position: relative;
  z-index: 3;
  pointer-events: auto;
  backdrop-filter: blur(10px);
}

.tab-button {
  padding: 3px 10px;
  background: transparent;
  color: var(--text-secondary, #a7b0d1);
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  font-size: 10px;
  font-weight: 500;
  transition: all 0.2s ease;
  position: relative;
  margin-bottom: -1px;
  border-radius: 4px 4px 0 0;
  pointer-events: auto;
}

.tab-button:hover {
  color: var(--text, #ffffff);
  background: var(--glass, rgba(255, 255, 255, 0.03));
}

.tab-button.active {
  color: var(--text, #ffffff);
  border-bottom-color: transparent;
  background: var(--gradient-soft, linear-gradient(135deg, #5ecbff 0%, #6b5cff 100%));
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

/* Tab Content */
.tab-content {
  display: none;
  padding: 6px;
  background:
    radial-gradient(820px 520px at 8% 0%, rgba(94, 203, 255, 0.16) 0%, transparent 65%),
    radial-gradient(760px 520px at 96% 110%, rgba(107, 92, 255, 0.12) 0%, transparent 70%),
    linear-gradient(160deg, rgba(10, 16, 34, 0.88) 0%, rgba(12, 18, 36, 0.9) 50%, rgba(9, 14, 30, 0.92) 100%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-top: none;
  border-radius: 0 0 8px 8px;
  backdrop-filter: blur(10px);
  pointer-events: auto;
  position: relative;
  overflow: hidden;
}

.tab-content::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--network-lines-lg);
  background-size: 1800px 1200px;
  background-position: center 12%;
  background-repeat: no-repeat;
  opacity: 0.16;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 0;
}

.tab-content > * {
  position: relative;
  z-index: 1;
}

.tab-content.active {
  display: block;
}

/* Nested tabs */
.tab-content .tabs-container {
  margin-top: 10px;
}

/* Main tab layout fill */
.tabs-container[data-tab-group="main-tabs"] {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
}

.tabs-container[data-tab-group="main-tabs"] .tab-content {
  flex: 1;
  min-height: 0;
  overflow: auto;
}

.tabs-container[data-tab-group="main-tabs"] .tab-content.active {
  display: flex;
  flex-direction: column;
  height: 100%;
}